/* Roomful's own components, on top of the kit's base, identity and stage layout. */
:root { --hard: #1d1030; --side-a: #ffcc00; --side-a-ink: #241a00; --side-b: #ff4f9a; --side-b-ink: #2a0716; }
.wordmark-mark { width: 30px; height: 30px; }
.site-header .brand { font-family: var(--font-display); font-weight: 400; letter-spacing: 0; font-size: 1.25rem; }
h1, h2, .hero-title { font-weight: 400; letter-spacing: 0; }

/* ---- landing ---- */
.hero-title { max-width: 18ch; margin-inline: auto; line-height: 1.05; }
.start-row { display: grid; gap: var(--s4); width: 100%; max-width: 56rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .start-row { grid-template-columns: 1.1fr 0.9fr; align-items: start; } }
.start-card { background: var(--surface); color: var(--ink); border: 3px solid var(--ink); border-radius: var(--radius-l); padding: var(--s5); box-shadow: 6px 6px 0 var(--hard); display: grid; gap: var(--s3); align-content: start; }
.start-card h2 { font-size: var(--step-2); margin: 0; }
.start-card p { margin: 0; color: var(--ink-2); }
.join-form { display: grid; grid-template-columns: 1fr auto; gap: var(--s2); }
.code-input { font: 400 1.6rem/1 var(--font-display); letter-spacing: 0.3em; text-transform: uppercase; text-align: center; min-width: 0; }
.demo { width: 100%; max-width: 56rem; display: grid; grid-template-columns: 1fr; gap: var(--s4); align-items: end; }
@media (min-width: 760px) { .demo { grid-template-columns: 2.2fr 1fr; } }
.tv { background: #120c2b; color: #fff3fa; border: 3px solid var(--ink); border-radius: var(--radius); padding: var(--s4); box-shadow: 6px 6px 0 var(--hard); display: grid; gap: var(--s3); }
.tv .round-tag { color: #c8b7e0; }
.tv-q { font: 400 var(--step-1)/1.15 var(--font-display); margin: 0; }
.phones { display: flex; gap: var(--s3); justify-content: center; }
.phone { width: 6.2rem; background: #120c2b; border: 3px solid var(--ink); border-radius: 1.1rem; padding: 0.55rem 0.4rem; display: grid; gap: 0.35rem; box-shadow: 4px 4px 0 var(--hard); }
.phone .avatar { margin-inline: auto; }
.phone .mini { font-size: 0.7rem; font-weight: 700; border-radius: 0.5rem; padding: 0.35rem 0.25rem; text-align: center; }
.phone .mini.a { background: var(--side-a); color: var(--side-a-ink); }
.phone .mini.b { background: var(--side-b); color: var(--side-b-ink); }
.phone .mini.off { opacity: 0.55; background: transparent; color: #fff3fa; outline: 2px dashed #8f80b8; outline-offset: -2px; }
.phone .mini.n { background: #2a2050; color: #fff3fa; }
.steps-3 { display: grid; gap: var(--s4); grid-template-columns: 1fr; counter-reset: s; padding: 0; list-style: none; }
@media (min-width: 760px) { .steps-3 { grid-template-columns: repeat(3, 1fr); } }
.steps-3 li { background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius); padding: var(--s4); }
.steps-3 li::before { counter-increment: s; content: counter(s); display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--brand); color: var(--brand-ink); font-family: var(--font-display); margin-bottom: var(--s2); }
.steps-3 b { display: block; font-size: var(--step-1); margin-bottom: var(--s1); }
.faq details { border-top: 2px solid var(--line); padding-block: var(--s3); }
.faq summary { font-weight: 700; cursor: pointer; }
.faq p { margin: var(--s2) 0 0; color: var(--ink-2); }

/* ---- shared game pieces ---- */
.avatar { --who: #888; display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: color-mix(in oklab, var(--who) 30%, #fff); border: 3px solid var(--who); font-size: 1.35rem; line-height: 1; flex: none; }
.avatar-m { width: 3rem; height: 3rem; font-size: 1.7rem; }
.avatar-l { width: 4rem; height: 4rem; font-size: 2.3rem; }
.avatar-xl { width: 7rem; height: 7rem; font-size: 4.2rem; border-width: 5px; }
.round-tag { font-size: var(--step--1); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin: 0; color: var(--ink-2); }
.side-tag { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 0.6rem; font-family: var(--font-display); font-size: 1.2rem; background: rgba(0, 0, 0, 0.82); color: #fff; flex: none; }
.chip { min-width: 3rem; min-height: 3rem; padding: 0 0.9rem; border-radius: var(--pill); border: 3px solid var(--ink); background: var(--surface); color: var(--ink); font: 700 1.15rem/1 var(--font-body); cursor: pointer; }
.chip.on, .chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

/* ---- the big screen ---- */
.host-page { min-height: 100vh; display: flex; flex-direction: column; }
.host-page main { flex: 1; display: flex; }
.board { flex: 1; display: grid; place-items: center; padding: var(--s5) var(--s4) var(--s6); }
.board > * { width: 100%; max-width: 78rem; }
.host-msg { text-align: center; font-size: var(--step-2); }
.lobby { display: grid; gap: var(--s6); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .lobby { grid-template-columns: 1fr 1.1fr; } }
.lobby-join { text-align: center; display: grid; justify-items: center; gap: var(--s2); }
.lobby-step { margin: 0; color: var(--ink-2); font-size: var(--step-1); }
.lobby-url { margin: 0; font: 700 var(--step-3)/1.1 var(--font-body); color: var(--brand-text); word-break: break-all; }
.room-code { display: flex; gap: var(--s2); margin: var(--s2) 0; }
.room-code span { display: grid; place-items: center; width: clamp(3.6rem, 9vw, 7rem); height: clamp(4.4rem, 11vw, 8.5rem); background: var(--accent); color: #241a00; border: 4px solid var(--ink); border-radius: var(--radius); box-shadow: 6px 6px 0 var(--hard); font: 400 clamp(2.6rem, 7vw, 5.6rem)/1 var(--font-display); }
.qr-wrap { display: flex; align-items: center; gap: var(--s3); color: var(--ink-2); margin-top: var(--s3); }
.qr-wrap p { margin: 0; }
.qr { width: 9.5rem; height: 9.5rem; background: #fff; border-radius: var(--radius-s); padding: 0.3rem; border: 3px solid var(--ink); }
.qr svg { width: 100%; height: 100%; display: block; }
.lobby-room { background: var(--surface); border: 3px solid var(--ink); border-radius: var(--radius-l); box-shadow: 8px 8px 0 var(--hard); padding: var(--s5); display: grid; gap: var(--s4); }
.lobby-room h2 { margin: 0; font-size: var(--step-3); }
.seats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: var(--s3); }
.seat { display: grid; justify-items: center; gap: var(--s1); padding: var(--s3) var(--s2); border-radius: var(--radius); background: var(--surface-2); }
.seat-new { animation: pop 0.35s ease-out; }
.seat-empty { min-height: 7.4rem; border: 3px dashed var(--line-strong); background: none; animation: none; }
.seat-name { font-weight: 700; }
.seat-kick { border: 0; background: none; color: var(--ink-2); font-size: var(--step--1); text-decoration: underline; cursor: pointer; padding: 0.3rem; }
.rounds { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.round { display: grid; gap: var(--s5); justify-items: center; text-align: center; }
.prompt { display: grid; gap: var(--s2); justify-items: center; }
.prompt-text { font-size: clamp(2rem, 4.2vw, 3.8rem); margin: 0; max-width: 24ch; }
.sides { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s4); align-items: stretch; }
.or { align-self: center; font: 400 var(--step-2)/1 var(--font-display); color: var(--ink-2); }
.side { border: 4px solid var(--ink); border-radius: var(--radius-l); padding: var(--s5) var(--s4); box-shadow: 8px 8px 0 var(--hard); display: grid; gap: var(--s3); justify-items: center; align-content: start; }
.side-a { background: var(--side-a); color: var(--side-a-ink); }
.side-b { background: var(--side-b); color: var(--side-b-ink); }
.side-text { margin: 0; font: 700 clamp(1.5rem, 3vw, 2.6rem)/1.15 var(--font-body); }
.howto { margin: 0; color: var(--ink-2); font-size: var(--step-1); }
.clock { width: min(40rem, 100%); height: 0.9rem; border-radius: var(--pill); background: var(--surface-2); overflow: hidden; border: 2px solid var(--ink); }
.clock-fill { display: block; height: 100%; background: var(--brand); transform-origin: left; transition: transform 0.25s linear; }
.answered { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; }
.answered li { opacity: 0.35; transition: 0.2s; }
.answered li.in { opacity: 1; transform: translateY(-4px); }
.split { width: 100%; display: flex; height: 3.4rem; border: 4px solid var(--ink); border-radius: var(--pill); overflow: hidden; }
.split-part { display: grid; place-items: center; min-width: 0; transition: flex-grow 0.8s ease-out; animation: grow 0.9s ease-out; }
.split-a { background: var(--side-a); color: var(--side-a-ink); }
.split-b { background: var(--side-b); color: var(--side-b-ink); }
.split-n { font: 400 1.8rem/1 var(--font-display); }
.who { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; }
.who li { display: grid; justify-items: center; gap: 0.15rem; background: rgba(255, 255, 255, 0.55); border-radius: var(--radius); padding: var(--s2) var(--s3); animation: pop 0.4s ease-out both; }
.who .guess { font-size: 0.9rem; font-weight: 700; }
.who .gain { font: 400 1.2rem/1 var(--font-display); }
.who li.nailed { background: #fff; outline: 4px solid var(--ink); }
.verdict { margin: 0; font: 700 var(--step-2)/1.2 var(--font-body); }
.ranking { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); justify-content: center; counter-reset: r; }
.ranking li { display: flex; align-items: center; gap: var(--s2); }
.rank-n { font-family: var(--font-display); color: var(--ink-2); min-width: 1.2em; }
.rank-score { font: 400 var(--step-1)/1 var(--font-display); }
.ranking-big { display: grid; gap: var(--s2); max-width: 30rem; margin-inline: auto; justify-content: stretch; }
.ranking-big li { background: var(--surface); border: 3px solid var(--ink); border-radius: var(--radius); padding: var(--s2) var(--s4); }
.ranking-big .rank-score { margin-left: auto; }
.controls { justify-content: center; }
.final { display: grid; gap: var(--s4); text-align: center; justify-items: center; }
.winner { display: flex; gap: var(--s3); animation: pop 0.6s ease-out; }
.winner-line { font-size: clamp(1.8rem, 3.2vw, 2.8rem); margin: 0; max-width: 24ch; }
@keyframes pop { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes grow { from { flex-grow: 1; } }
.site-header nav { align-items: center; }
@media (prefers-reduced-motion: reduce) { .seat-new, .who li, .winner, .split-part { animation: none; } }
@media (max-width: 640px) {
  .sides { grid-template-columns: 1fr; }
  .or { justify-self: center; }
}

/* ---- the phone ---- */
.pad-page main { display: block; }
.pad { max-width: 30rem; margin: 0 auto; padding: var(--s4) var(--s4) var(--s6); }
.pad-screen { display: grid; gap: var(--s4); text-align: center; justify-items: center; padding-top: var(--s3); }
.pad-screen > * { margin: 0; }
.pad-title { font-size: var(--step-3); }
.pad-sub { color: var(--ink-2); font-size: var(--step-1); line-height: 1.35; }
.pad-error { color: var(--side-b-ink); background: color-mix(in oklab, var(--side-b) 35%, var(--bg)); padding: var(--s2) var(--s3); border-radius: var(--radius-s); font-weight: 700; }
.code-form { display: grid; gap: var(--s3); width: 100%; }
.code-form .code-input { font-size: 2.6rem; padding: 0.6rem; }
.animal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); width: 100%; }
.animal { display: grid; justify-items: center; gap: var(--s1); padding: var(--s3) var(--s1); border-radius: var(--radius); border: 3px solid var(--ink); background: var(--surface); color: var(--ink); font: 700 0.95rem/1.1 var(--font-body); cursor: pointer; }
.animal:disabled { opacity: 0.3; cursor: not-allowed; text-decoration: line-through; }
.me-badge { display: flex; align-items: center; gap: var(--s2); width: 100%; padding: var(--s2) var(--s3); background: var(--surface); border: 3px solid var(--ink); border-radius: var(--pill); font-weight: 700; text-align: left; }
.me-score { margin-left: auto; font-family: var(--font-display); font-weight: 400; }
.mini-seats { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; }
.pad-q { font-size: var(--step-2); }
.picks { display: grid; gap: var(--s3); width: 100%; }
.pick { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 5rem; padding: var(--s3) var(--s4); border: 4px solid var(--ink); border-radius: var(--radius-l); font: 700 1.25rem/1.2 var(--font-body); text-align: left; cursor: pointer; box-shadow: 5px 5px 0 var(--hard); transition: transform 0.1s; }
.pick-a { background: var(--side-a); color: var(--side-a-ink); }
.pick-b { background: var(--side-b); color: var(--side-b-ink); }
.pick[aria-pressed="false"] { filter: saturate(0.75); }
.pick[aria-pressed="true"] { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--hard); outline: 4px solid var(--ink); outline-offset: 3px; }
.pick:active { transform: translate(3px, 3px); }
.guess-box { display: grid; gap: var(--s3); width: 100%; justify-items: center; }
.guess-q { margin: 0; font-weight: 700; font-size: var(--step-1); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; }
.pad-screen.win .pad-title { color: var(--hit); }
.pad-screen.near .pad-title { color: var(--near); }

/* Hard shadows stay dark in the dark theme, so cards sit on the page instead of glowing. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hard: #05030f; } }
:root[data-theme="dark"] { --hard: #05030f; }
.start-art { display: flex; gap: var(--s2); justify-content: center; align-items: center; padding: var(--s2) 0; }
.start-art .screen { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; width: 6.5rem; padding: 0.4rem; background: #120c2b; border: 3px solid var(--ink); border-radius: 0.7rem; }
.start-art .screen i { height: 2.2rem; border-radius: 0.35rem; }
.start-art .screen i:first-child { background: var(--side-a); }
.start-art .screen i:last-child { background: var(--side-b); }
.start-art .dots { display: flex; gap: 0.35rem; }
@media (max-width: 759px) {
  .hero-compact .hero-title { font-size: 2.05rem; }
  .hero-compact .promise { font-size: 1.05rem; }
  .hero-compact .eyebrow { font-size: 0.78rem; }
}
html[data-layout="stage"] .hero .promise { max-width: 42ch; }
@media (max-width: 759px) {
  html[data-layout="stage"] .hero { padding-block: var(--s2) var(--s3); }
  .hero-compact .eyebrow { display: none; }
  .start-row { display: contents; }
  html[data-layout="stage"] .stage > .container { gap: var(--s4); }
  .start-row > :first-child { order: 1; }
  .demo { order: 2; }
  .start-row > :last-child { order: 3; }
  .demo .tv { padding: var(--s3); }
  .demo .side { padding: var(--s3); box-shadow: 4px 4px 0 var(--hard); }
  .demo .side-text { font-size: 1.15rem; }
  .demo .sides { grid-template-columns: 1fr auto 1fr; gap: var(--s2); }
}
/* Game picker in the host's lobby. */
.games { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.game-pick { display: grid; gap: var(--s1); text-align: left; padding: var(--s3) var(--s4); border-radius: var(--radius); border: 3px solid var(--line-strong); background: var(--surface-2); color: var(--ink); font: 400 var(--step--1)/1.35 var(--font-body); cursor: pointer; }
.game-pick b { font: 400 var(--step-1)/1.1 var(--font-display); }
.game-pick[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 22%, var(--surface)); box-shadow: 4px 4px 0 var(--hard); }
/* Most Likely To on the big screen. */
.field { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: center; }
.field li { display: grid; justify-items: center; gap: var(--s1); font-weight: 700; animation: pop 0.35s ease-out both; }
.tally { list-style: none; margin: 0; padding: 0; width: min(52rem, 100%); display: grid; gap: var(--s2); }
.tally li { display: grid; grid-template-columns: 4rem 1fr auto; grid-template-areas: "who bar n" "who by by"; align-items: center; gap: 0.2rem var(--s3); padding: var(--s2) var(--s3); border-radius: var(--radius); background: var(--surface); border: 3px solid var(--line); text-align: left; }
.tally li > .avatar { grid-area: who; justify-self: center; }
.tally li.top { border-color: var(--accent); box-shadow: 6px 6px 0 var(--hard); }
.tally-bar { grid-area: bar; height: 1.1rem; border-radius: var(--pill); background: var(--surface-2); overflow: hidden; }
.tally-fill { display: block; height: 100%; background: var(--side-b); border-radius: var(--pill); animation: fill 0.9s ease-out; }
.tally li.top .tally-fill { background: var(--accent); }
.tally-n { grid-area: n; font: 400 var(--step-1)/1 var(--font-display); }
.tally-by { grid-area: by; display: flex; flex-wrap: wrap; gap: 0.3rem; min-height: 0; }
.tally-by .avatar { width: 1.8rem; height: 1.8rem; font-size: 1rem; border-width: 2px; }
@keyframes fill { from { width: 0; } }
/* Phones: the chosen animal in a vote. */
.animal[aria-pressed="true"] { background: var(--accent); color: #241a00; box-shadow: 4px 4px 0 var(--hard); transform: translate(-2px, -2px); }
.linkish { border: 0; background: none; color: var(--ink-2); font: 600 var(--step--1)/1.55 var(--font-body); cursor: pointer; padding: 0; }
@media (max-width: 640px) { .games { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .field li, .tally-fill { animation: none; } }
/* Quick Draw: the big screen's signal and the phone's tap pad. Red waits, green taps; the words
   change too, so color is never the only cue. */
.signal { display: grid; place-items: center; width: min(26rem, 70vw); aspect-ratio: 1; border-radius: 50%; background: #d62f45; color: #fff; border: 6px solid var(--hard); box-shadow: 10px 10px 0 var(--hard); }
.signal-text { font: 400 clamp(2rem, 5vw, 3.6rem)/1 var(--font-display); }
.signal.go { background: #0b7a3b; animation: pop 0.25s ease-out; }
.tap-pad { display: grid; place-items: center; align-content: center; gap: var(--s2); width: 100%; min-height: 52vh; border-radius: var(--radius-l); border: 5px solid var(--ink); background: #d62f45; color: #fff; box-shadow: 6px 6px 0 var(--hard); cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.tap-pad.go { background: #0b7a3b; }
.tap-pad:disabled { cursor: default; filter: saturate(0.6); }
.tap-big { font: 400 clamp(2.4rem, 12vw, 4rem)/1 var(--font-display); }
.tap-small { font: 700 1.1rem/1.2 var(--font-body); }
.tally li.out { opacity: 0.7; }
.tally li.out .tally-n { font-family: var(--font-body); font-weight: 700; }
.me-score.bump { animation: bump 0.6s ease-out; color: var(--hit); }
@keyframes bump { 40% { transform: scale(1.5); } }
.tv-help { max-width: 30rem; text-align: left; color: var(--ink-2); margin-top: var(--s2); }
.tv-help summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.tv-help ul { margin: var(--s2) 0 0; padding-left: 1.2rem; }
@media (min-width: 1100px) { .games { grid-template-columns: repeat(3, 1fr); } }
/* ---- guide pages ---- */
.guide-row { display: grid; gap: var(--s4); width: 100%; max-width: 56rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .guide-row { grid-template-columns: 1.1fr 0.9fr; align-items: start; } }
.sample-out { font: 400 var(--step-1)/1.2 var(--font-display); margin: 0; min-height: 2.4em; color: var(--ink); }
.prose h2 { margin-top: var(--s6); font-size: var(--step-2); line-height: 1.1; }
.prose h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--step-1); margin: var(--s4) 0 var(--s1); }
.prose p, .prose li { color: var(--ink-2); }
.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: var(--s1); }
.qlist { columns: 2 16rem; column-gap: var(--s5); }
.qlist li { break-inside: avoid; margin-bottom: var(--s1); }
.related { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); padding: 0; list-style: none; }
.related a { font-weight: 700; }
.guides { display: grid; gap: var(--s2) var(--s5); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); padding: 0; list-style: none; }
.guides a { font-weight: 700; }