/* Direction A, "Felt & Punchboard" (mockups/a-felt-punchboard.html).
   Green felt underneath; UI pieces are cream punched-cardboard tokens with a
   solid bottom edge. Meeple yellow only marks the next thing to tap. */
:root {
  --felt: #1d5a4c;
  --felt-deep: #134236;
  --felt-line: #2a6d5d;
  --token: #f6efdf;
  --token-edge: #b9a57f;
  --ink: #1f2420;
  --ink-soft: #5b5a50;
  --meeple: #f2b33d;
  --meeple-edge: #b67d14;
  --meeple-ink: #2a1d00;
  --red: #c9412f;
  --good: #2f7d4f;
  --on-felt: #eaf3ee;
  --on-felt-soft: #a9c9bd;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --text: "Atkinson Hyperlegible", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --felt: #0f2d27; --felt-deep: #0a201b; --felt-line: #1a3f37;
    --token: #2b2a25; --token-edge: #12110e; --ink: #f1ead8; --ink-soft: #b8af98;
    --meeple-edge: #8a5c0a; --red: #e2604d; --good: #6cc08d;
    --on-felt: #e3eee9; --on-felt-soft: #86a99c;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --felt: #0f2d27; --felt-deep: #0a201b; --felt-line: #1a3f37;
  --token: #2b2a25; --token-edge: #12110e; --ink: #f1ead8; --ink-soft: #b8af98;
  --meeple-edge: #8a5c0a; --red: #e2604d; --good: #6cc08d;
  --on-felt: #e3eee9; --on-felt-soft: #86a99c;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 16px/1.5 var(--text);
  color: var(--on-felt);
  background:
    radial-gradient(circle at 30% 10%, rgba(255, 255, 255, .05), transparent 60%),
    repeating-linear-gradient(45deg, transparent 0 3px, rgba(0, 0, 0, .035) 3px 4px),
    var(--felt);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 3px solid var(--meeple); outline-offset: 2px; }

/* Screen: a top bar, scrolling content, and a dock in thumb reach. */
.screen { max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(8px + env(safe-area-inset-top)) 16px 0; min-height: 52px;
  color: var(--on-felt-soft); font-size: 15px;
}
.top .link { background: none; border: 0; padding: 10px 4px; min-height: 44px; color: inherit; }
.room-label { font: 700 15px var(--display); letter-spacing: .08em; color: var(--on-felt); }
.content { flex: 1; padding: 8px 16px 24px; }
.dock {
  position: sticky; bottom: 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, var(--felt-deep) 28%);
}
.dock-note { text-align: center; color: var(--on-felt-soft); font-size: 14px; margin: 10px 0 0; }

h1.title, h2.title { font: 800 34px/1.05 var(--display); margin: 20px 0 8px; color: var(--on-felt); }
.lede { color: var(--on-felt-soft); margin: 0 0 20px; }
.section-label { font: 700 15px var(--display); color: var(--on-felt-soft); margin: 24px 0 10px; }

/* Tokens */
.token { background: var(--token); color: var(--ink); border-radius: 18px; box-shadow: 0 4px 0 var(--token-edge); }
.token-pad { padding: 16px; }

/* Buttons */
.primary {
  width: 100%; min-height: 58px; border: 0; border-radius: 18px;
  font: 800 19px var(--display); background: var(--meeple); color: var(--meeple-ink);
  box-shadow: 0 5px 0 var(--meeple-edge);
}
.primary:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 var(--meeple-edge); }
.primary:disabled { background: var(--felt-line); color: var(--on-felt-soft); box-shadow: none; }
.secondary {
  width: 100%; min-height: 52px; border-radius: 16px; border: 2px solid var(--felt-line);
  background: transparent; color: var(--on-felt); font: 700 16px var(--text);
}
.chip-btn {
  min-height: 44px; padding: 0 16px; border-radius: 22px; font: 700 15px var(--text);
  background: transparent; color: var(--on-felt); border: 2px solid var(--felt-line);
}
.danger-link { background: none; border: 0; color: var(--on-felt-soft); text-decoration: underline; min-height: 44px; padding: 0 8px; }

/* Forms */
.field { display: block; margin-bottom: 14px; }
.field span { display: block; font: 700 15px var(--display); color: var(--on-felt-soft); margin-bottom: 6px; }
.input {
  width: 100%; min-height: 56px; padding: 0 16px; border-radius: 16px; border: 0;
  background: var(--token); color: var(--ink); font-size: 18px;
  box-shadow: inset 0 3px 0 color-mix(in srgb, var(--token-edge) 45%, transparent);
}
.input::placeholder { color: var(--ink-soft); opacity: .7; }
.code-input { font: 800 30px var(--display); letter-spacing: .3em; text-transform: uppercase; text-align: center; }
.error { background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--on-felt); border-left: 4px solid var(--red); padding: 10px 12px; border-radius: 8px; margin: 0 0 14px; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--on-felt-soft); margin: 28px 0 18px; font-size: 14px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 2px; background: var(--felt-line); }

/* Room code as punched letter tokens */
.code-tiles { display: flex; gap: 10px; justify-content: center; margin: 8px 0 14px; }
.code-tiles span {
  width: 62px; height: 70px; display: grid; place-items: center; border-radius: 14px;
  background: var(--token); color: var(--ink); box-shadow: 0 4px 0 var(--token-edge);
  font: 800 38px var(--display);
}
.share-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.copied { color: var(--meeple); font-size: 14px; text-align: center; min-height: 21px; margin: 6px 0 0; }

/* Players */
.players { display: grid; gap: 10px; list-style: none; padding: 0; margin: 0; }
.player { display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-height: 60px; }
.avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font: 800 16px var(--display); background: var(--felt); color: var(--on-felt);
}
.player .name { flex: 1; font: 700 17px var(--display); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag { font-size: 13px; padding: 3px 10px; border-radius: 12px; background: var(--meeple); color: var(--meeple-ink); font-weight: 700; }
.tag.quiet { background: transparent; color: var(--ink-soft); border: 2px solid var(--token-edge); }

/* Player-count stepper */
.counter { display: flex; align-items: center; gap: 14px; }
.counter .num { flex: 1; text-align: center; font: 800 48px/1 var(--display); }
.step {
  width: 60px; height: 60px; border-radius: 50%; border: 0; flex: none;
  background: var(--meeple); color: var(--meeple-ink); font: 800 30px/1 var(--display);
  box-shadow: 0 4px 0 var(--meeple-edge);
}
.step:disabled { background: color-mix(in srgb, var(--token-edge) 40%, transparent); box-shadow: none; color: var(--ink-soft); }
.counter-note { text-align: center; font-size: 14px; color: var(--ink-soft); margin: 10px 0 0; }
.counter-note button { background: none; border: 0; color: var(--ink); text-decoration: underline; padding: 6px; min-height: 44px; }
.fit { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 2px dashed var(--token-edge); }
.fit b { font: 800 30px/1 var(--display); }
.fit span { color: var(--ink-soft); }

/* Centered message screens (ended, not found) */
.message { text-align: center; padding-top: 18vh; }
.message .lede { max-width: 30ch; margin: 0 auto 28px; }

.loading { text-align: center; color: var(--on-felt-soft); padding-top: 30vh; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.code-input::placeholder { font: 400 18px var(--text); letter-spacing: normal; text-transform: none; }

/* ---------- Questions ---------- */
.track { display: flex; gap: 6px; padding: 10px 16px 0; }
.track span { flex: 1; height: 8px; border-radius: 4px; background: var(--felt-line); }
.track span.done { background: var(--on-felt-soft); }
.track span.now { background: var(--meeple); }
.qmeta { display: flex; gap: 10px; margin: 14px 0 20px; flex-wrap: wrap; }
.chip-btn.on { background: var(--meeple); color: var(--meeple-ink); border-color: var(--meeple); box-shadow: 0 3px 0 var(--meeple-edge); }
.answers { display: grid; gap: 12px; }
.answer {
  display: flex; align-items: center; gap: 14px; text-align: left; width: 100%;
  min-height: 68px; padding: 10px 16px; border: 0;
}
.answer:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--token-edge); }
.answer .pips { display: flex; gap: 3px; flex: none; }
.answer .pips i { width: 9px; height: 9px; border-radius: 50%; background: var(--token-edge); }
.answer .pips i.f { background: var(--ink); }
.answer b { display: block; font: 700 18px var(--display); }
.answer small { color: var(--ink-soft); font-size: 14px; }
.answer.picked { outline: 4px solid var(--meeple); outline-offset: -4px; }
.who { display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 12px; font-size: 14px; color: var(--on-felt-soft); }
.who .m { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--felt-line); color: var(--on-felt); }
.who .m.ok { background: var(--good); color: #fff; }
.done-list { display: grid; gap: 10px; list-style: none; padding: 0; margin: 0; }
.check { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; flex: none; }
.check.ok { background: var(--good); color: #fff; }
.check.wait { border: 2px dashed var(--token-edge); color: var(--ink-soft); }

/* ---------- Game art placeholder (until BGG images) ---------- */
.art {
  position: relative; overflow: hidden; display: grid; place-items: center;
  background:
    radial-gradient(circle at 20% 85%, hsl(var(--h) 35% 52%) 0 22%, transparent 23%),
    radial-gradient(circle at 75% 35%, hsl(calc(var(--h) + 60) 40% 45%) 0 26%, transparent 27%),
    radial-gradient(circle at 92% 92%, hsl(calc(var(--h) + 150) 45% 58%) 0 18%, transparent 19%),
    linear-gradient(135deg, hsl(var(--h) 30% 70%), hsl(calc(var(--h) + 30) 28% 50%));
}
.art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.art .mono { font: 800 64px/1 var(--display); color: rgba(255, 255, 255, .85); text-shadow: 0 3px 0 rgba(0, 0, 0, .15); }
.art .tag-best {
  position: absolute; top: 12px; left: 12px; background: var(--meeple); color: var(--meeple-ink);
  font: 800 14px var(--display); padding: 6px 12px; border-radius: 14px; box-shadow: 0 3px 0 var(--meeple-edge);
}
.thumb { width: 48px; height: 48px; border-radius: 12px; flex: none; }
.thumb .mono { font-size: 22px; }

/* ---------- Game card ---------- */
.card { overflow: hidden; }
.card .art { height: 200px; border-radius: 18px 18px 0 0; }
.card .body { padding: 16px 18px 20px; }
.card h3 { font: 800 30px/1.05 var(--display); margin: 0; }
.card .sub { color: var(--ink-soft); font-size: 14px; margin-top: 4px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 16px 0; }
.stat {
  text-align: center; border-radius: 50%; aspect-ratio: 1; display: grid; place-content: center; padding: 4px;
  background: color-mix(in srgb, var(--token-edge) 25%, transparent);
}
.stat b { font: 800 17px/1.05 var(--display); display: block; }
.stat span { font-size: 11px; line-height: 1.2; color: var(--ink-soft); }
.stat.best { background: var(--meeple); }
.stat.best b, .stat.best span { color: var(--meeple-ink); }
.blurb p { margin: 0 0 10px; font-size: 15px; }
.blurb strong { font-family: var(--display); }
.mechs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.mechs span { font-size: 13px; padding: 5px 10px; border-radius: 12px; border: 2px dashed var(--token-edge); }
.owners { font-size: 14px; color: var(--ink-soft); }
.card-actions { display: flex; gap: 10px; margin-top: 16px; }
.ghost { flex: 1; min-height: 50px; border-radius: 14px; border: 2px solid var(--token-edge); background: none; color: var(--ink); font: 700 15px var(--text); }
.ghost.veto { color: var(--red); border-color: color-mix(in srgb, var(--red) 55%, transparent); }
.ghost:disabled { opacity: .6; }
.credit { font-size: 12px; color: var(--ink-soft); margin: 14px 0 0; }
.credit a { color: inherit; }
.why-title { font: 800 18px var(--display); margin: 18px 0 8px; }

/* ---------- Why it matched ---------- */
.why { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; font-size: 14px; }
.why li { display: flex; gap: 8px; }
.why .mk { width: 20px; flex: none; font-weight: 800; text-align: center; }
.why .yes { color: var(--good); } .why .no { color: var(--red); } .why .some { color: var(--ink-soft); }
.why .q { font-weight: 700; }

/* ---------- Results ---------- */
.hero { margin-top: 10px; width: 100%; text-align: left; border: 0; padding: 0; }
.hero .art { height: 150px; }
.hero-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.score { font: 800 56px/1 var(--display); white-space: nowrap; }
.score small { font-size: 20px; }
.list { display: grid; gap: 10px; }
.lrow {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; min-height: 68px;
  width: 100%; border: 0; text-align: left;
}
.lrow .n { flex: 1; min-width: 0; }
.lrow .n b { font: 700 17px var(--display); display: block; }
.lrow .n small { color: var(--ink-soft); font-size: 13px; display: block; }
.lrow .pct { font: 800 22px var(--display); }
.lrow.out { opacity: .7; }
.lrow.out b { text-decoration: line-through; }
.lrow .undo { background: none; border: 2px solid var(--token-edge); border-radius: 12px; min-height: 40px; padding: 0 12px; font-weight: 700; color: var(--ink); }
.note { color: var(--on-felt-soft); font-size: 14px; margin: 8px 0 0; }

/* ---------- Sheet (game card over the current screen) ---------- */
.sheet {
  position: fixed; inset: 0; z-index: 10; overflow-y: auto; overscroll-behavior: contain;
  background:
    repeating-linear-gradient(45deg, transparent 0 3px, rgba(0, 0, 0, .035) 3px 4px),
    var(--felt);
}
.sheet .inner { max-width: 480px; margin: 0 auto; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.sheet .content { padding-top: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .sheet { animation: rise .18s ease-out; }
  @keyframes rise { from { transform: translateY(24px); opacity: 0; } }
}
.toast {
  position: fixed; left: 16px; right: 16px; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 20;
  max-width: 448px; margin: 0 auto; padding: 12px 16px; border-radius: 14px;
  background: var(--ink); color: var(--token); box-shadow: 0 4px 0 rgba(0, 0, 0, .3);
}