:root {
  color-scheme: light dark;
  --bg: #f6f1e6;
  --ink: #2a2436;
  --muted: #5c5470;
  --panel: #fffaf0;
  --line: #d8cebb;
  --accent: #a8433a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1723;
    --ink: #ece8f5;
    --muted: #b3abc6;
    --panel: #241f31;
    --line: #3c3550;
    --accent: #e0897e;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow-wrap: break-word;
}

main {
  max-width: 44rem;
  margin: 0 auto;
  padding: 1rem 1rem 2rem;
}

h1 {
  font-size: 1.55rem;
  margin: 0.75rem 0 0.25rem;
}

.lead {
  margin: 0 0 1rem;
  color: var(--muted);
}

canvas {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #110f1a;
}

.caption {
  font-weight: 600;
  margin: 0.75rem 0 0.15rem;
}

.story {
  margin: 0 0 0.35rem;
  color: var(--ink);
  border-left: 3px solid var(--accent);
  padding-left: 0.6rem;
}

/* The seed line is the one thing worth carrying away from a visit, so it sits in its
   own box under the buttons and one tap selects the whole of it. */
.code {
  color: var(--ink);
  font-size: 0.9rem;
  margin: 0.35rem 0 0.9rem;
  padding: 0.5rem 0.6rem;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--panel);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  -webkit-user-select: all;
  user-select: all;
}

.controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 0.6rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

label {
  font-size: 0.85rem;
  color: var(--muted);
}

select,
input,
button {
  font: inherit;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
}

/* A native select keeps a wide intrinsic width; let it shrink inside its grid cell
   instead of pushing the whole row off the edge of a narrow phone. */
select,
input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

button {
  cursor: pointer;
  font-weight: 600;
  touch-action: manipulation;
}

button:hover {
  border-color: var(--accent);
}

/* A quieter button for the sheet switch: it is an aside, not a main action. */
.ghost {
  background: transparent;
  color: var(--muted);
  font-size: 0.9rem;
  padding: 0.35rem 0.7rem;
  margin: 0.35rem 0 0.5rem;
}

.ghost:hover {
  color: var(--ink);
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 0.25rem;
}

/* On a narrow phone the two main buttons are worth a full row each, so both are
   an easy thumb target and neither label is squeezed. */
@media (max-width: 26rem) {
  .row button {
    flex: 1 1 100%;
  }

  /* The four seed buttons are not actions but small steps of one control, and four
     full-width lines under the seed box pushed everything below them off a phone
     screen. Two to a line: half the height, still a comfortable target, and the
     labels "Earlier seed -1" and "Later seed +1" fit side by side. Selector is more
     specific than ".row button" above, so it wins inside the seed field only. */
  .field .row button {
    flex: 1 1 calc(50% - 0.25rem);
  }
}

.error {
  color: var(--accent);
  min-height: 1.3rem;
  margin: 0.25rem 0 0.5rem;
}

.hint {
  color: var(--muted);
  font-size: 0.92rem;
}

/* The line that introduces the seed box should not read as part of the box. */
.hint + .code {
  margin-top: 0.35rem;
}

.hidden {
  display: none;
}

.sheet {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0.5rem 0 0.25rem;
}

.slot {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

/* The previews are 200x120 with one canvas pixel per logical pixel. Nearest-neighbour
   scaling keeps that crisp when they are scaled down into a narrow column. */
.slot canvas {
  border-radius: 6px;
  image-rendering: pixelated;
}

.slot button {
  font-size: 0.85rem;
  padding: 0.4rem 0.4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sheet-note {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0.35rem 0 0;
}

.panel {
  border-top: 1px solid var(--line);
  margin-top: 1.25rem;
  padding-top: 0.5rem;
}

.panel h2 {
  font-size: 1.05rem;
  margin: 0.75rem 0 0.35rem;
}

.panel p {
  margin: 0.35rem 0;
}

.lands {
  padding-left: 1.1rem;
  margin: 0.35rem 0;
}

.lands > li {
  margin: 0 0 0.55rem;
}

/* The measured details of the one land with a built structure read as a small
   aside under its bullet, not as one run-on line. */
.lands .detail {
  margin: 0.3rem 0 0;
  padding-left: 1rem;
  color: var(--muted);
  font-size: 0.92rem;
}

.lands .detail li {
  margin: 0 0 0.2rem;
}

footer {
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  padding: 0.5rem 1rem 2rem;
}

a {
  color: var(--accent);
}

@media (max-width: 32rem) {
  /* Three previews across are unreadably small here: stack them full width instead,
     where each one is drawn slightly larger than its native 200px, so it stays crisp. */
  .sheet {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
  }

  .slot button {
    white-space: normal;
    text-align: left;
  }

  /* Tighten the top of the page so the canvas and the controls sit higher on a phone. */
  h1 {
    font-size: 1.35rem;
    margin: 0.35rem 0 0.2rem;
  }

  .lead {
    font-size: 0.95rem;
    margin-bottom: 0.7rem;
  }

  canvas {
    border-radius: 8px;
  }
}

@media (max-width: 24rem) {
  main {
    padding: 0.75rem 0.75rem 1.75rem;
  }

  .controls {
    grid-template-columns: minmax(0, 1fr);
  }

  h1 {
    font-size: 1.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}