/* Playfair Display for the wordmark and buttons, Inter for everything that has to be read at
   length. Both self-hosted — see fonts.css. */

:root {
  --yellow: #ffd21e;
  --orange: #ff8a00;
  --ink: #16160f;
  --muted: #6b6b63;
  --line: #e4e4dd;
  --bg: #ffffff;
  --tint: #fff8ec;
  --radius: 12px;

  --display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Column layout so the footer sits at the bottom of the viewport on short pages instead of
   hanging directly under the content. */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Wide enough that a full poll link fits on one line next to its label, tag and Copy button. */
.page {
  flex: 1 1 auto;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 40px 48px 64px;
}

.footer {
  flex: 0 0 auto;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 22px 48px 32px;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 10px;
  border-top: 1px solid var(--line);
  color: #a3a39a;
  font-size: 14px;
}

.footer-sep { color: var(--line); }

.footer-version { font-family: var(--mono); font-size: 13px; }

/* --- type ---------------------------------------------------------------- */

.brand {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: 84px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.brand-sm {
  font-size: 34px;
  line-height: 1.2;
}

.tagline {
  font-size: 24px;
  color: var(--muted);
  margin: 14px 0 40px;
  white-space: nowrap;
}

.poll-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 46px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 28px;
}

/* The title doubles as the heading and its own input: borderless until hovered or focused, so it
   reads as a heading but invites editing. */
.title-edit {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 28px;
}

.poll-title-input {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--ink);
}

.poll-title-input::placeholder { color: #bdbdb4; }

.poll-title-input:hover { border-color: var(--line); }

.poll-title-input:focus {
  outline: none;
  border-color: var(--orange);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.14);
}

.title-status {
  flex: 0 0 auto;
  font-size: 15px;
  color: var(--muted);
  white-space: nowrap;
}

.title-status.is-error { color: #c62828; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.section-title {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 0 0 16px;
}

.hint, .link-desc, .note, .empty, .field-hint {
  color: var(--muted);
  font-size: 15px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.note { margin: 16px 0 0; }
.note-top { margin: 0 0 18px; }
.empty { margin: 0; }

.hero {
  padding: 120px 0 0;
  text-align: center;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 36px;
}

.topbar-split { justify-content: space-between; }

/* --- buttons ------------------------------------------------------------- */

.btn {
  background: var(--yellow);
  color: var(--ink);
  border: none;
  border-radius: var(--radius);
  padding: 13px 26px;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease;
}

.btn:hover:not(:disabled),
.btn:focus-visible:not(:disabled) {
  background: var(--orange);
  color: #fff;
}

.btn:active:not(:disabled) {
  background: var(--orange);
  color: #fff;
  transform: translateY(1px);
}

.btn:disabled { opacity: 0.45; cursor: not-allowed; }

a.btn { text-decoration: none; display: inline-block; }

.btn-lg { padding: 20px 56px; font-size: 26px; }

.btn-copy { padding: 11px 20px; font-size: 17px; }

.btn-ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--text);
  font-size: 16px;
  font-weight: 600;
}

.btn-ghost:hover, .btn-ghost:focus-visible {
  background: transparent;
  border-color: var(--orange);
  color: var(--orange);
}

/* --- inputs -------------------------------------------------------------- */

.input {
  width: 100%;
  padding: 16px 18px;
  font-family: var(--text);
  font-size: 18px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.input:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.14);
}

.input-question { font-size: 22px; padding: 18px 20px; }

.input-comment {
  margin-top: 10px;
  font-size: 17px;
  color: var(--muted);
}

.input-comment:focus { color: var(--ink); }

.field {
  display: block;
  margin-bottom: 20px;
}

.field-label {
  display: block;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 8px;
}

.field-hint { display: block; margin-top: 8px; }

.setup-form { margin: 0; }

/* --- share links --------------------------------------------------------- */

.links {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 44px;
}

/* Deliberately one line per link: the label, the tag, the URL and Copy stay side by side rather
   than wrapping. The URL field takes whatever width is left. */
.link-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 14px;
}

.link-row + .link-row { margin-top: 16px; }

.link-meta {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-width: 190px;
}

.link-label { font-weight: 700; font-size: 17px; white-space: nowrap; }
.link-desc { white-space: nowrap; }

.link-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 16px;
  font-size: 15px;
  font-family: var(--mono);
  color: var(--muted);
  background: #fafaf7;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-overflow: ellipsis;
}

.link-input:focus { outline: none; border-color: var(--orange); color: var(--ink); }

.tag {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
}

/* The tags sit inside the label column rather than the row: "Keep secret, save for later!" is wide
   enough that, on the row, it took the width the URL field needs to show a full link. */
.link-meta .tag {
  align-self: flex-start;
  margin-top: 6px;
}

.tag-secret { background: #fdecec; color: #b3261e; }
.tag-share { background: #eaf5ec; color: #1e7b34; }

.warn {
  margin: 18px 0 0;
  padding: 16px 18px;
  font-size: 16px;
  line-height: 1.6;
  color: #6d3b00;
  background: var(--tint);
  border: 1px solid #ffd9a8;
  border-radius: var(--radius);
}

.warn strong { color: #b3261e; }

/* --- composer ------------------------------------------------------------ */

.composer { margin-bottom: 52px; }

.kind-toggle {
  display: flex;
  gap: 12px;
  margin: 16px 0;
}

.kind {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 17px;
  white-space: nowrap;
  cursor: pointer;
}

.kind:has(input:checked) {
  border-color: var(--orange);
  background: var(--tint);
  font-weight: 600;
}

.kind input { accent-color: var(--orange); margin: 0; width: 18px; height: 18px; }

.option-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.option-row .input { padding: 13px 16px; font-size: 17px; }

.remove-option {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 26px;
  line-height: 1;
  padding: 4px 10px;
  cursor: pointer;
  border-radius: 8px;
}

.remove-option:hover { color: var(--orange); }

.composer-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 20px;
}

.error {
  color: #c62828;
  font-size: 16px;
  margin: 14px 0 0;
}

/* --- question list ------------------------------------------------------- */

.question-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.question-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 12px;
  background: #fff;
}

.question-item.dragging { opacity: 0.4; }
.question-item.drop-target { border-color: var(--orange); }

.drag-handle {
  flex: 0 0 auto;
  cursor: grab;
  color: #b8b8ae;
  font-size: 20px;
  line-height: 1.3;
  user-select: none;
}

.drag-handle:active { cursor: grabbing; }

.question-body { flex: 1 1 auto; min-width: 0; }

.question-text { font-weight: 600; font-size: 20px; }

/* The creator's note on a question, in both the editor list and the answer form. Set apart with a
   rule rather than italics so it does not compete with the question itself. */
.question-comment,
.answer-question-comment {
  margin: 8px 0 0;
  padding-left: 12px;
  border-left: 3px solid var(--yellow);
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}

.answer-question-comment { margin: 10px 0 0; font-size: 17px; }

.badge {
  display: inline-block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  color: var(--muted);
  background: #f4f4ef;
  border-radius: 999px;
  padding: 4px 11px;
  margin: 8px 0 4px;
  white-space: nowrap;
}

.option-list {
  list-style: disc;
  margin: 8px 0 0;
  padding-left: 24px;
  color: var(--muted);
  font-size: 17px;
}

.question-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
  align-items: flex-start;
}

.edit-question,
.delete-question {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  white-space: nowrap;
}

.edit-question:hover,
.delete-question:hover { color: var(--orange); }

.question-item.is-editing {
  border-color: var(--orange);
  background: #fffdf8;
}

.question-item.is-editing .input-question { font-size: 20px; }

/* --- answering ----------------------------------------------------------- */

.answer-question {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin: 0 0 18px;
}

.answer-question-text {
  font-weight: 600;
  font-size: 22px;
  padding: 0 6px;
}

.answer-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.answer-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  font-size: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}

.answer-option:hover { border-color: var(--orange); }

.answer-option:has(input:checked) {
  border-color: var(--orange);
  background: var(--tint);
}

.answer-option input {
  accent-color: var(--orange);
  margin: 0;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

/* --- results ------------------------------------------------------------- */

.response {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 12px;
}

.response-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
  margin-bottom: 14px;
}

.response-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
}

.response-time {
  color: var(--muted);
  font-size: 14px;
  font-family: var(--mono);
  white-space: nowrap;
}

.response-answers { margin: 0; }

.response-answers dt {
  color: var(--muted);
  font-size: 16px;
  margin-top: 12px;
}

.response-answers dt:first-child { margin-top: 0; }

.response-answers dd {
  margin: 3px 0 0;
  font-weight: 600;
  font-size: 19px;
}

/* --- narrow screens ------------------------------------------------------ */

/* Laptop widths: claw back horizontal padding and label width so the full poll link still fits on
   its single line instead of scrolling inside the field. */
@media (max-width: 1400px) {
  .page { padding: 40px 28px 64px; }
  .footer { padding: 22px 28px 32px; }
  .link-meta { min-width: 170px; }
  .links { padding: 20px; }
}

/* The no-wrap link rows only hold up while there is width for them. Below this they stack, which
   beats a URL field squeezed to nothing. */
@media (max-width: 780px) {
  html, body { font-size: 17px; }
  .page { padding: 28px 20px 48px; }
  .footer { padding: 20px 20px 28px; }
  .brand { font-size: 56px; white-space: normal; }
  .brand-sm { font-size: 28px; }
  .tagline { font-size: 20px; white-space: normal; }
  .poll-title { font-size: 34px; }
  .btn-lg { padding: 16px 36px; font-size: 22px; }
  .hero { padding: 64px 0 0; }
  .link-row { flex-wrap: wrap; }
  .link-meta { min-width: 0; }
  .link-input { flex: 1 1 100%; }
}

/* --- footer link + prose pages ------------------------------------------- */

.footer-link {
  color: #a3a39a;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-link:hover { color: var(--orange); }

.prose {
  max-width: 760px;
  font-size: 18px;
  line-height: 1.65;
}

.prose .lede {
  font-size: 21px;
  line-height: 1.5;
  padding: 16px 18px;
  background: var(--tint);
  border: 1px solid #ffd9a8;
  border-radius: var(--radius);
  color: #6d3b00;
  margin: 0 0 28px;
}

.prose h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  margin: 32px 0 10px;
}

.prose p { margin: 0 0 14px; }

.prose ul { margin: 0 0 14px; padding-left: 24px; }

.prose li { margin-bottom: 8px; }

/* --- landing page --------------------------------------------------------
   The front page has to sell the thing, so it gets a narrower measure than the app pages: a full
   1320px line of body copy is unreadable however well it suits a poll editor. */

.hero-sell { padding: 96px 0 0; }

.hero-question {
  font-family: var(--display);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  max-width: 900px;
  margin: 20px auto 0;
}

.hero-lede {
  font-size: 21px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 700px;
  margin: 20px auto 36px;
}

.hero-note {
  font-size: 16px;
  color: var(--muted);
  margin: 22px 0 0;
}

.hero-note a { color: var(--muted); }
.hero-note a:hover, .hero-note a:focus-visible { color: var(--orange); }

.pitch { margin-top: 104px; }

.pitch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.pitch-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px;
  font-size: 17px;
  line-height: 1.6;
  /* Column, so the closing line can be pushed to the bottom and the three of them line up across
     cards of unequal length. Otherwise the shortest ends halfway up and looks unfinished. */
  display: flex;
  flex-direction: column;
}

.pitch-card p { margin: 0 0 14px; }
.pitch-card p:last-child { margin-bottom: 0; }

.pitch-question {
  font-family: var(--display);
  font-weight: 700;
  font-size: 27px;
  line-height: 1.2;
  margin: 0 0 16px;
}

/* The one line in each card worth carrying away from it. Specific enough to beat `.pitch-card p`
   above, which zeroes margin-top and would leave the auto margin doing nothing. */
.pitch-card .pitch-punch {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-weight: 600;
}

.steps { margin-top: 104px; }

.step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.step-list li { display: flex; gap: 18px; align-items: flex-start; }

.step-num {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--yellow);
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 21px;
  margin: 6px 0 8px;
}

.step-list p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.6; }

.cta-band {
  margin-top: 104px;
  padding: 56px 40px;
  border-radius: var(--radius);
  background: var(--tint);
  border: 1px solid #ffd9a8;
  text-align: center;
}

.cta-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  max-width: 760px;
  margin: 0 auto 16px;
}

.cta-note {
  font-size: 17px;
  line-height: 1.6;
  color: #6d3b00;
  max-width: 680px;
  margin: 0 auto 30px;
}

.cta-note a { color: #6d3b00; }

@media (max-width: 1100px) {
  .pitch-grid, .step-list { grid-template-columns: 1fr; }
  .pitch, .steps, .cta-band { margin-top: 72px; }
}

@media (max-width: 780px) {
  .hero-sell { padding: 56px 0 0; }
  .hero-question { font-size: 30px; }
  .hero-lede { font-size: 19px; }
  .pitch-question { font-size: 24px; }
  .cta-title { font-size: 27px; }
  .cta-band { padding: 40px 24px; }
}


/* ===========================================================================
   Hungry Haaskjold. Everything above is the shared base the other Brightness
   apps use. Played on a tablet lying flat, so every control is at least 44px,
   nothing depends on hover, and the table fits the shorter side of the screen.
   =========================================================================== */

.table-top {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}

.deck {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: 20px;
  padding: 12px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom))
           max(16px, env(safe-area-inset-left));
  align-items: start;
}

.deck-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
}

.deck-where { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.deck-title { font-family: var(--display); font-weight: 700; font-size: 20px; }
.deck-left { color: var(--muted); font-size: 15px; }
.deck-rules { color: var(--muted); font-size: 15px; min-height: 44px; display: flex;
              align-items: center; }
.deck-rules:hover, .deck-rules:focus-visible { color: var(--orange); }

/* --- the kitchen table ---------------------------------------------------- */

.board-wrap { display: flex; justify-content: center; align-items: flex-start; gap: 14px; }

/* The table, ringed by the rails a waiting hamster pushes in from. The ring keeps its width whether
   or not the buttons are there, so the board does not jump when a hamster steps on. */
.board-frame {
  --rail: 38px;
  /* The table's own border plus its padding. The rails have to be inset by exactly this much or the
     arrows do not line up with the rows and columns they push: they span the full frame while the
     nine cells are inset, so the error fans out from the middle and the end arrows point between two
     lines. Keep in step with the border and padding on .table below. */
  --edge: 13px;
  /* The gap between plates. The rails use the same one, or their buttons drift out of step with the
     lines they push, one gap at a time across the board. */
  --cell-gap: 2px;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr) var(--rail);
  grid-template-rows: var(--rail) auto var(--rail);
  gap: 4px;
  min-width: 0;
}
.board-frame .table { grid-column: 2; grid-row: 2; }

.rail { display: grid; gap: var(--cell-gap); }
.rail form { margin: 0; display: contents; }
.rail-top { grid-column: 2; grid-row: 1; grid-template-columns: repeat(9, 1fr);
             padding: 0 var(--edge); }
.rail-bottom { grid-column: 2; grid-row: 3; grid-template-columns: repeat(9, 1fr);
                padding: 0 var(--edge); }
.rail-left { grid-column: 1; grid-row: 2; grid-template-rows: repeat(9, 1fr);
              padding: var(--edge) 0; }
.rail-right { grid-column: 3; grid-row: 2; grid-template-rows: repeat(9, 1fr);
               padding: var(--edge) 0; }

.lane {
  /* No min-height: the side rails share a grid row with the table, so a minimum on the buttons makes
     the rail taller than the board it is pointing at and every arrow slides out of line. The button
     takes its across-the-rail size from --rail and its along-the-rail size from the board. */
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  border: 1px solid var(--yellow); border-radius: 6px;
  background: var(--tint); color: var(--ink);
  font-family: var(--text); line-height: 1; cursor: pointer; padding: 0;
}
.lane:disabled { opacity: .35; cursor: default; }
.lane-arrow { font-size: 16px; }
/* What the arrow would drag off the table: the number for food, and a symbol for the plates that
   have no number, so a broken plate is not silently indistinguishable from an empty line. */
.lane-tile { font-size: 10px; font-weight: 700; color: var(--muted); line-height: 1; }
.lane-tile.is-bonus { font-size: 12px; color: #b8860b; }
.lane-tile.is-broken { font-size: 11px; color: #a8452f; }
.lane-tile.is-wild { font-size: 12px; color: var(--orange); }

/* The rails are the only way to move, so every arrow you can use is lit. */
.lane:not(:disabled) { background: var(--yellow); border-color: var(--orange); }
.lane:hover:not(:disabled), .lane:focus-visible:not(:disabled) { background: var(--orange); color: #fff; }
.lane:hover:not(:disabled) .lane-tile, .lane:focus-visible:not(:disabled) .lane-tile { color: #fff; }

/* An arrow this hamster cannot use at all keeps its place in the ring without being a button. */
.lane-blank { display: block; }

.stack-side {
  flex: 0 0 auto;
  width: 78px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 8px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--tint);
  text-align: center;
}
.stack-art { width: 58px; height: 58px; object-fit: contain; }
.stack-count { font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1.1; }
.stack-word { font-size: 12px; color: var(--muted); line-height: 1.25; }

.table {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  gap: var(--cell-gap, 2px);
  /* Leaves room for the rails above and below, so the whole ring fits a landscape
     tablet without the page scrolling. */
  width: min(100%, calc(100dvh - 168px));
  aspect-ratio: 1;
  /* A real kitchen table under the plates. Generated once by tools/make_graphics.py and served from
     here: img-src is 'self', so nothing off-site would load anyway. */
  background-image: url("/static/img/table.png");
  background-size: cover;
  border: 5px solid #4a3421;
  border-radius: 10px;
  padding: 8px;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .25);
}

.cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.plate {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
}

/* The number sits on the rim, not over the food, so both stay readable. */
.plate-label {
  position: absolute;
  bottom: 4%;
  right: 8%;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(9px, 1.25vw, 18px);
  color: #4a3f31;
  background: rgba(255, 255, 255, .85);
  border-radius: 999px;
  min-width: 1.6em;
  text-align: center;
  line-height: 1.5;
  pointer-events: none;
}

/* Plates dealt from the stack at the end of a turn arrive rather than appear, so it is obvious what
   is new on a table you have been staring at. The delay classes stagger them: with no inline styles
   allowed there is nowhere else to put a per-plate delay. */
@keyframes plate-in {
  from { opacity: 0; transform: scale(.55) translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.cell.is-fresh .plate, .cell.is-fresh .plate-label { animation: plate-in .45s ease-out both; }
.cell.d0 .plate, .cell.d0 .plate-label { animation-delay: 0s; }
.cell.d1 .plate, .cell.d1 .plate-label { animation-delay: .05s; }
.cell.d2 .plate, .cell.d2 .plate-label { animation-delay: .1s; }
.cell.d3 .plate, .cell.d3 .plate-label { animation-delay: .15s; }
.cell.d4 .plate, .cell.d4 .plate-label { animation-delay: .2s; }
.cell.d5 .plate, .cell.d5 .plate-label { animation-delay: .25s; }
.cell.d6 .plate, .cell.d6 .plate-label { animation-delay: .3s; }
.cell.d7 .plate, .cell.d7 .plate-label { animation-delay: .35s; }

/* The hamster stands on the square, over whatever plate is there. */
.hamster {
  position: absolute;
  width: 96%;
  height: 96%;
  object-fit: contain;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45));
  z-index: 2;
}

.tok-img { width: 30px; height: 30px; object-fit: contain; }

/* --- the panel ------------------------------------------------------------ */

.panel { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.whose {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 12px 16px; background: var(--tint); border-radius: var(--radius);
}
.whose-turn { font-family: var(--display); font-weight: 700; font-size: 22px; }
.whose-cash { font-family: var(--mono); font-weight: 700; }

.step {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.step.is-now { border-color: var(--orange); background: #fffdf7; }

.step-head {
  display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.step-no {
  width: 22px; height: 22px; border-radius: 50%; background: var(--yellow); color: var(--ink);
  display: flex; align-items: center; justify-content: center; font-size: 12px; flex: 0 0 auto;
}
.step.is-now .step-no { background: var(--orange); color: #fff; }
.step-waiting { margin: 0; color: var(--muted); font-size: 15px; }

.btn { min-height: 48px; }
.btn-lg { min-height: 60px; }
.btn-wide { width: 100%; }

/* One box per player: what they have taken, drawn as the plates it is. */
.seats { display: flex; flex-direction: column; gap: 10px; }

.seat-box {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.seat-box.is-turn { border-color: var(--orange); background: #fffdf7; }

.seat-head { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; }
.seat-who { font-weight: 600; font-size: 16px; min-width: 0; }
.seat-box.is-turn .seat-who { font-weight: 700; }
.seat-points { font-family: var(--mono); font-weight: 700; font-size: 16px; }

.haul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.haul-item { position: relative; width: 44px; height: 44px; }
.haul-plate { width: 100%; height: 100%; object-fit: contain;
              filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25)); }
/* How many of that plate, in the same corner the number sits in on the table. */
.haul-count {
  position: absolute; bottom: -2px; right: -2px;
  min-width: 18px; padding: 0 4px;
  font-family: var(--display); font-weight: 700; font-size: 12px; line-height: 18px;
  text-align: center; color: #fff; background: var(--ink);
  border-radius: 999px; box-shadow: 0 0 0 2px var(--bg);
}
.haul-item.is-broken .haul-count { background: #a8452f; }

.seat-none { margin: 0; font-size: 14px; color: var(--muted); }
.seat-sum { margin: 0; font-size: 12px; color: var(--muted); }

/* The scoring card. Static text, there to settle arguments without opening the rules. */
.scorecard {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px; background: var(--tint);
}
.score-list { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px;
              font-size: 14px; align-items: baseline; }
.score-list dt { font-weight: 700; }
.score-list dd { margin: 0; color: var(--muted); }
.score-note { margin: 0; font-size: 12px; color: var(--muted); }

.drawer { border-top: 1px solid var(--line); padding-top: 10px; }
.drawer summary { cursor: pointer; min-height: 44px; display: flex; align-items: center;
                  font-weight: 600; }
.drawer-quiet summary { color: var(--muted); font-weight: 400; }

.loot-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.loot {
  width: 30px; height: 30px; border-radius: 50%; background: #efe6d8;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.08);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700;
}
.loot.is-broken { background: #cbb9a8; color: #7a4b3a; }

.log { margin: 0; padding-left: 20px; font-size: 14px; color: var(--muted);
        display: flex; flex-direction: column; gap: 5px; }

/* --- setup and the front page --------------------------------------------- */

.seat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.seat { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px;
        display: grid; grid-template-columns: 22px 1fr; gap: 6px 10px; align-items: center; }
.seat-token { width: 20px; height: 20px; border-radius: 50%; }
.seat-token[data-colour="smulen"] { background: #c9772e; }
.seat-token[data-colour="notta"] { background: #6b8f3a; }
.seat-token[data-colour="knerten"] { background: #3f7fa6; }
.seat-token[data-colour="lurven"] { background: #9a4f7a; }
.seat-label { font-size: 13px; font-weight: 700; text-transform: uppercase;
              letter-spacing: 0.07em; color: var(--muted); }
.seat .input { grid-column: 1 / -1; }
.seat-name { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }

.hamster-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap;
                gap: 18px; }
.hamster-item { display: flex; align-items: center; gap: 10px; }
.hamster-name { font-weight: 600; }

@media (max-aspect-ratio: 1/1), (max-width: 900px) {
  .deck { grid-template-columns: minmax(0, 1fr); }
  .table { width: min(100%, calc(92dvh - 130px)); }
}

@media (max-width: 720px) {
  .board-wrap { flex-direction: column; align-items: center; }
  .stack-side { width: auto; flex-direction: row; align-items: center; gap: 10px; }
  .stack-art { width: 44px; height: 44px; }
}

@media (max-width: 560px) {
  .board-frame { --rail: 32px; --edge: 9px; --cell-gap: 3px; }
  .table { padding: 4px; }
}

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

/* --- the hamsters on the front page --------------------------------------- */

.hamster-portrait { width: 64px; height: 64px; object-fit: contain; }
.hamster-item { flex-direction: column; gap: 6px; }
.hamster-list { gap: 26px; }