/* Elim Game · 양세찬 게임 — component and layout styles.
   Consumes tokens.css only. Product classes are unprefixed; everything that
   belongs to the review-only switcher is prefixed `rv-` and must not ship. */

*, *::before, *::after { box-sizing: border-box; }
/* The root owns the paper, so scrolling past either end (rubber-band) shows
   the same dotted tabletop, never the browser's white or black canvas. */
html {
  -webkit-text-size-adjust: 100%;
  color-scheme: light;
  overscroll-behavior: none;
  background-color: var(--color-bg);
  background-image: radial-gradient(var(--color-bg-dot) 1.2px, transparent 1.4px);
  background-size: var(--space-5) var(--space-5);
}
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: clip;           /* tilted cards and shadows never cause a sideways scroll */
  word-break: keep-all;       /* Korean wraps between words, never mid-word */
  overflow-wrap: anywhere;    /* …but a single over-long word still breaks */
}
button, input, select { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

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

:focus-visible {
  outline: var(--stroke-strong) solid var(--color-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 7px var(--color-focus-halo);
}

/* ========================================================== App shell === */

.app {
  container: app / inline-size;
  position: relative;
  min-height: 100%;
  background-color: var(--color-bg);
  /* tabletop felt: a quiet dot grid, 24px pitch */
  background-image: radial-gradient(var(--color-bg-dot) 1.2px, transparent 1.4px);
  background-size: var(--space-5) var(--space-5);
  color: var(--color-text);
}

.shell {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-4);
  display: grid;
  gap: var(--space-4);
}
@container app (min-width: 640px) { .shell { padding: var(--space-5); gap: var(--space-5); } }

.topbar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-3);
}
.brand { display: flex; align-items: baseline; gap: var(--space-2); margin-right: auto; min-width: 0; }
.brand__mark {
  font-family: var(--font-display); font-size: var(--text-xl);
  letter-spacing: var(--tracking-display); line-height: 1;
}
.brand__sub { font-size: var(--text-sm); color: var(--color-text-muted); }
.topbar__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.room-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--control-min);
  padding: 0 var(--space-4);
  border: var(--stroke) solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--text-sm);
}
.room-chip b { font-family: var(--font-mono-code); font-weight: var(--weight-medium); letter-spacing: 0.08em; }

.meta-row {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-sm); color: var(--color-text-muted);
}
.meta-row strong { color: var(--color-text); font-weight: var(--weight-medium); }

/* Desktop: stage + rail. Tablet/mobile: one column, rail follows the stage. */
.layout { display: grid; gap: var(--space-5); align-items: start; position: relative; }
@container app (min-width: 960px) {
  .layout { grid-template-columns: minmax(0, 1fr) var(--rail-width); }
}
.stage { display: grid; gap: var(--space-5); min-width: 0; position: relative; }

/* ============================================================== Icons === */
/* One family: 24 canvas, 20 live area, 2px round stroke. */
.icon {
  width: 24px; height: 24px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.icon--sm { width: 20px; height: 20px; }

/* ============================================================ Buttons === */

.btn {
  --btn-bg: var(--color-secondary);
  --btn-fg: var(--color-on-secondary);
  --btn-press: var(--color-sunken);
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-min);
  padding: var(--space-2) var(--space-5); /* v2: block padding keeps a wrapped Korean label off the outline */
  border: var(--stroke) solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: var(--shadow-lift);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out),
              box-shadow var(--dur-press) var(--ease-out),
              background-color var(--dur-press) linear;
  margin-bottom: var(--lift); /* reserve the lip so neighbours never collide */
}
.btn:hover { background: color-mix(in srgb, var(--btn-bg) 88%, var(--color-line)); }
.btn:active:not(:disabled):not([aria-busy="true"]) {
  transform: translateY(calc(var(--lift) - var(--lift-pressed)));
  box-shadow: var(--shadow-lift-pressed);
  background: var(--btn-press);
}
.btn:disabled, .btn[aria-disabled="true"] {
  --btn-bg: var(--color-disabled-bg);
  --btn-fg: var(--color-disabled-text);
  border-color: var(--color-line-soft);
  box-shadow: none; transform: translateY(var(--lift-pressed));
  cursor: not-allowed;
}
.btn[aria-busy="true"] { cursor: progress; }

.btn--primary { --btn-bg: var(--color-primary); --btn-fg: var(--color-on-primary); --btn-press: var(--color-primary-press); }
.btn--answer  { --btn-bg: var(--color-answer);  --btn-fg: var(--color-on-answer);  --btn-press: var(--color-answer-press); }
.btn--quiet   { --btn-bg: transparent; box-shadow: none; border-color: transparent; margin-bottom: 0; text-decoration: underline; text-underline-offset: 4px; }
.btn--quiet:hover { --btn-bg: var(--color-sunken); }
/* A quiet link-like action that leads a text column starts on that column's edge
   (no inset label); it keeps the 48px row height and its focus ring. */
.footer > .btn--quiet { padding-inline: 0; border-inline-width: 0; }

/* Game actions speak in the display voice. */
.btn--game { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-lg); }
.btn--lg   { min-height: var(--control-lg); font-size: var(--text-lg); padding: var(--space-2) var(--space-4); }
.btn--block { width: 100%; }
.btn--sm   { font-size: var(--text-sm); padding: var(--space-2) var(--space-4); }

/* Pending indicator: always next to readable text. */
.spinner {
  width: 18px; height: 18px; flex: none;
  border: var(--stroke) solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; border-right-color: currentColor; border-style: dotted; }
}

/* ============================================================= Fields === */

.field { display: grid; gap: var(--space-2); }
.field__label { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.field__row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: flex-start; }
.field__row > .input { flex: 1 1 160px; }
.input {
  min-height: 56px; width: 100%;
  padding: 0 var(--space-4);
  border: var(--stroke) solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--text-lg);
}
.input::placeholder { color: var(--color-text-muted); }
.input--code { font-family: var(--font-mono-code); letter-spacing: 0.12em; text-transform: uppercase; }
.input[aria-invalid="true"] { border-color: var(--color-error-text); background: var(--color-error-bg); }
.input:disabled { background: var(--color-sunken); color: var(--color-text-muted); }
.field__hint { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ===================================================== Status messages === */
/* Waiting (butter + clock), success (mint + check), error (rose + alert).
   Each carries an icon and words; colour is never the only signal. */

.status {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: var(--stroke) solid currentColor;
  font-size: var(--text-sm);
}
.status__title { font-weight: var(--weight-medium); font-size: var(--text-md); }
.status__body { display: grid; gap: var(--space-1); }
.status--waiting { background: var(--color-waiting-bg); color: var(--color-waiting-text); }
.status--success { background: var(--color-success-bg); color: var(--color-success-text); }
.status--error   { background: var(--color-error-bg);   color: var(--color-error-text); }
.status--info    { background: var(--color-surface);    color: var(--color-text); }
.status .spinner, .status > .icon { margin-top: 2px; }
.status .btn { justify-self: start; margin-top: var(--space-1); }

.field__error {
  display: flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--color-error-text);
}

/* Presence / submission label: text first, tiny mark second. */
.pill {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-3); /* v2: was 2px, now on the scale */
  border-radius: var(--radius-pill);
  border: var(--stroke) solid currentColor;
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  white-space: nowrap;
}
.pill--online, .pill--done { color: var(--color-success-text); background: var(--color-success-bg); }
.pill--turn-them { color: var(--color-on-turn); background: var(--color-turn-them); }
.pill--offline { color: var(--color-error-text);   background: var(--color-error-bg); border-style: dashed; }
.pill--turn    { color: var(--color-on-turn);      background: var(--color-turn-me); }
.pill--wait    { color: var(--color-waiting-text); background: var(--color-waiting-bg); }
.pill--neutral { color: var(--color-text-muted);   background: var(--color-surface); }
.pill--host    { color: var(--color-text);         background: var(--butter-300); }

/* ========================================================= Turn banner === */

.turn {
  position: relative;
  display: grid; gap: var(--space-1);
  padding: var(--space-4);
  border: var(--stroke) solid var(--color-line);
  border-radius: var(--radius-xl);
  background: var(--turn-bg, var(--color-turn-them));
  color: var(--color-on-turn);
  box-shadow: var(--shadow-lift);
  text-align: center;
  /* v3: no automatic entrance; motion.js plays the handoff only when the turn changes. */
}
.turn__title {
  font-family: var(--font-display); font-weight: var(--weight-regular);
  font-size: var(--text-2xl); line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  overflow-wrap: anywhere;
}
.turn__sub { font-size: var(--text-md); }
.turn__tag {
  justify-self: center;
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-3); /* v2: was 2px */
  border-radius: var(--radius-pill);
  background: var(--color-line); color: var(--paper-50);
  font-size: var(--text-xs); font-weight: var(--weight-medium);
}
.turn--me     { --turn-bg: var(--color-turn-me); }
.turn--them   { --turn-bg: var(--color-turn-them); }
.turn--judge  { --turn-bg: var(--color-turn-judge); }
.turn--paused { --turn-bg: var(--color-sunken); }
.turn--done   { --turn-bg: var(--color-turn-them); }
@container app (min-width: 640px) {
  .turn { padding: var(--space-6); }
  .turn__title { font-size: var(--text-3xl); }
  .turn__sub { font-size: var(--text-lg); }
}

/* ========================================================== Word cards === */

/* Two cards side by side at every width: on a phone both words must be in the
   first screen above the answer tray. */
.cards { display: grid; gap: var(--space-3); grid-template-columns: 1fr 1fr; }
@container app (min-width: 480px) { .cards { gap: var(--space-5); } }

.word-card {
  container: card / inline-size;
  --tilt: 0deg;
  position: relative;
  display: grid; justify-items: center; align-content: center; gap: var(--space-2);
  min-height: 168px;
  padding: var(--space-4) var(--space-3);
  border: var(--stroke) solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lift);
  text-align: center;
  transform: rotate(var(--tilt));
}
.cards > .word-card:nth-child(1) { --tilt: -1.2deg; }
.cards > .word-card:nth-child(2) { --tilt: 1deg; }
@container app (min-width: 640px) { .word-card { min-height: 220px; padding: var(--space-5); } }

.word-card__label { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.word-card__word {
  font-family: var(--font-display); font-weight: var(--weight-regular);
  font-size: var(--text-word); line-height: 1.05;
  letter-spacing: var(--tracking-display);
  overflow-wrap: anywhere; max-width: 100%;
}
.word-card__note { font-size: var(--text-sm); color: var(--color-text-muted); }
/* v2 hook (optional): a long secret word (e.g. 11+ characters, up to the 30-char
   limit) steps down so the card stays two-up on a phone. Runtime decides when. */
.word-card__word--long { font-size: clamp(24px, 9cqi, 40px); line-height: var(--leading-tight); }

/* Concealed own card: a card back. The only word text is the literal ???. */
.word-card--hidden {
  background-color: var(--color-card-back);
  background-image: repeating-linear-gradient(
    -45deg,
    var(--color-card-back) 0 var(--space-3),
    var(--color-card-back-alt) var(--space-3) var(--space-5));
}
.word-card--hidden .word-card__plate {
  display: grid; justify-items: center; gap: var(--space-1);
  padding: var(--space-3) var(--space-3);
  border: var(--stroke) solid var(--color-line);
  border-radius: var(--radius-sm);  /* card 20 − inset 12 = 8 */
  background: var(--color-surface);
  min-width: 70%;
  max-width: 100%;
}
@container app (min-width: 640px) { .word-card--hidden .word-card__plate { padding: var(--space-3) var(--space-5); } }
.word-card__owner {
  position: absolute; top: calc(-1 * var(--space-3)); left: var(--space-4);
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-line); color: var(--paper-50);
  font-size: var(--text-xs); line-height: 22px;
}

/* v3: the result flip is played once by motion.js (results phase only). */

/* ========================================================== Action bar === */

.answer-bar { display: grid; gap: var(--space-3); }
.answer-bar__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.answer-bar__hint { font-size: var(--text-sm); color: var(--color-text-muted); text-align: center; }
@container app (min-width: 640px) {
  .answer-bar__row { grid-template-columns: 1fr 1fr minmax(0, 0.8fr); gap: var(--space-4); }
}
/* Mobile: controls live in a thumb tray pinned to the bottom of the screen.
   The stage dissolves into the layout grid so the tray can sit last (after the
   rail) and stay pinned for the whole scroll. */
@container app (max-width: 639px) {
  .layout > .stage { display: contents; }
  .layout .answer-bar { order: 10; }
  .answer-bar {
    position: sticky; bottom: 0; z-index: var(--z-tray);
    margin: 0 calc(-1 * var(--space-4));
    padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
    border-top: var(--stroke) solid var(--color-line);
    background: var(--color-surface);
  }
  .answer-bar__row > .btn--again { grid-column: 1 / -1; }
}

/* ============================================================== Rail ==== */

.rail { display: grid; gap: var(--space-4); }
@container app (min-width: 640px) and (max-width: 959px) {
  .rail { grid-template-columns: 1fr 1fr; }
}
.panel {
  display: grid; gap: var(--space-3);
  padding: var(--space-4);
  border: var(--stroke) solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.panel__title {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2);
  font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-lg);
}
.panel__title small { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-muted); }

.presence { display: grid; gap: var(--space-2); }
.presence li {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}
.presence__name { font-weight: var(--weight-medium); margin-right: auto; overflow-wrap: anywhere; }
.presence__role { font-size: var(--text-xs); color: var(--color-text-muted); }

.history { display: grid; gap: var(--space-1); font-size: var(--text-sm); }
.history li { display: flex; justify-content: space-between; gap: var(--space-2); padding: var(--space-1) 0; border-bottom: 1px solid var(--color-line-soft); }
.history li:last-child { border-bottom: 0; }
.history__ans { font-weight: var(--weight-medium); }

.spectators { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.spectators li { padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--color-bg); font-size: var(--text-sm); }

/* Mobile disclosure for rail content */
details.panel > summary { cursor: pointer; list-style: none; min-height: var(--control-min); display: flex; align-items: center; }
details.panel > summary::-webkit-details-marker { display: none; }
details.panel > summary::after { content: "열기"; margin-left: auto; font-size: var(--text-sm); color: var(--color-text-muted); }
details.panel[open] > summary::after { content: "닫기"; }

/* ============================================== Spectator / host areas === */

.notice {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: var(--stroke) solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-notice-bg);
  font-weight: var(--weight-medium); text-align: center;
}
.host-panel {
  display: grid; gap: var(--space-3);
  padding: var(--space-4);
  border: var(--stroke) dashed var(--color-line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--butter-100) 60%, var(--color-surface));
}
.host-panel__head { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-size: var(--text-lg); }
.host-panel__row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.host-panel__note { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ============================================================== Entry === */

.entry { display: grid; gap: var(--space-6); align-items: center; padding-block: var(--space-5); }
@container app (min-width: 760px) {
  .entry { grid-template-columns: 1.1fr 1fr; gap: var(--space-7); padding-block: var(--space-7); }
}
.entry__hero { display: grid; gap: var(--space-4); align-content: start; }
.entry__eyebrow {
  justify-self: start;
  padding: var(--space-1) var(--space-3);
  border: var(--stroke) solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--butter-300);
  font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.2;
}
.entry__title {
  font-family: var(--font-display); font-weight: var(--weight-regular);
  font-size: clamp(44px, 11cqi, var(--text-4xl)); line-height: 1;
  letter-spacing: var(--tracking-display);
}
.entry__lede { font-size: var(--text-lg); }
.rules { display: grid; gap: var(--space-2); }
.rules li { display: flex; align-items: center; gap: var(--space-3); }
.rules li:not(:has(> .icon)) { display: block; }   /* text-only rules flow as one line of prose */
.rules .icon { color: var(--color-primary); }

/* Two tilted cards: the game's whole idea in one glance. */
.fan { position: relative; height: 150px; margin-top: var(--space-2); }
.fan .word-card { position: absolute; width: 132px; min-height: 0; height: 150px; padding: var(--space-3); }
.fan .word-card:nth-child(1) { left: 0; --tilt: -8deg; }
/* The second card tucks closer on very narrow screens so the tilted pair
   never pokes past the edge (a 132px card plus ~8px of tilt). */
.fan .word-card:nth-child(2) { left: clamp(72px, calc(100% - 148px), 120px); top: 8px; --tilt: 6deg; }
.fan .word-card__word { font-size: var(--text-2xl); }
.fan .word-card__plate { min-width: 0; padding: var(--space-2) var(--space-3); }

.form-card {
  display: grid; gap: var(--space-5);
  padding: var(--space-5);
  border: var(--stroke) solid var(--color-line);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-lift);
}
.form-card__group { display: grid; gap: var(--space-2); /* v2: 8 inside a group, 24 between form sections */ }
.divider {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: var(--text-sm); color: var(--color-text-muted);
}
.divider::before, .divider::after { content: ""; flex: 1; border-top: var(--stroke) dotted var(--color-line-soft); }

/* ============================================================== Lobby === */

.seats { display: grid; gap: var(--space-4); }
@container app (min-width: 560px) { .seats { grid-template-columns: 1fr 1fr; } }
.seat {
  display: grid; gap: var(--space-3); align-content: start;
  min-height: 168px;
  padding: var(--space-4);
  border: var(--stroke) solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lift);
}
.seat__no { font-size: var(--text-sm); color: var(--color-text-muted); }
.seat__name { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.1; overflow-wrap: anywhere; }
.seat__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.seat--empty {
  background: transparent; box-shadow: none;
  border-style: dashed; justify-items: start;
}
.lobby { display: grid; gap: var(--space-5); }
@container app (min-width: 960px) { .lobby { grid-template-columns: minmax(0, 1fr) var(--rail-width); align-items: start; } }
.lobby__side { display: grid; gap: var(--space-4); }
.select { appearance: none; background-image: none; }

/* =========================================================== Word entry === */

.compose {
  display: grid; gap: var(--space-5);
  max-width: 640px; width: 100%; margin: 0 auto;
  padding: var(--space-5);
  border: var(--stroke) solid var(--color-line);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-lift);
}
.compose__eyebrow { justify-self: center; }
.compose__title {
  font-family: var(--font-display); font-weight: var(--weight-regular);
  font-size: var(--text-xl); line-height: var(--leading-tight); text-align: center;
}
@container app (min-width: 640px) { .compose { padding: var(--space-6); } .compose__title { font-size: var(--text-2xl); } }
.compose__sub { text-align: center; color: var(--color-text-muted); }
.submissions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }

/* ============================================================= Result === */

.result { display: grid; gap: var(--space-5); }
@container app (min-width: 960px) { .result { grid-template-columns: minmax(0, 1fr) var(--rail-width); align-items: start; } }
.result__head { display: grid; gap: var(--space-2); justify-items: center; text-align: center; }
.result__title {
  font-family: var(--font-display); font-weight: var(--weight-regular);
  font-size: clamp(44px, 10cqi, 72px); line-height: 1; letter-spacing: var(--tracking-display);
}
.score { display: grid; gap: var(--space-2); }
.score li {
  display: flex; justify-content: space-between; align-items: center;
  min-height: var(--control-min);
  padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}
.score li[data-winner] { background: var(--color-turn-them); }
.score__num { font-family: var(--font-display); font-size: var(--text-xl); }
.result__actions { display: grid; gap: var(--space-3); grid-template-columns: 1fr 1fr; }
@container app (min-width: 960px) { .result__actions { grid-template-columns: 1fr; } }

/* ============================================ Overlays: pause, dialog === */

.overlay {
  position: absolute; inset: calc(-1 * var(--space-2));
  z-index: var(--z-overlay);
  display: grid; justify-items: center; align-items: start;
  padding: var(--space-7) var(--space-4);
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--color-bg) 70%, transparent);
  backdrop-filter: blur(3px);
}
.overlay__card {
  position: sticky; top: var(--space-7);   /* stays in view while the page scrolls */
  display: grid; gap: var(--space-3); justify-items: center; text-align: center;
  max-width: 420px;
  padding: var(--space-5);
  border: var(--stroke) solid var(--color-line);
  border-radius: var(--radius-xl);
  background: var(--color-waiting-bg);
  box-shadow: var(--shadow-lift), var(--shadow-float);
}
.overlay__card--error { background: var(--color-error-bg); }
.overlay__title { font-family: var(--font-display); font-size: var(--text-xl); line-height: var(--leading-tight); }

dialog.sheet {
  width: min(440px, calc(100vw - var(--space-6)));
  padding: var(--space-5);
  border: var(--stroke) solid var(--color-line);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-lift), var(--shadow-float);
}
dialog.sheet[open] { animation: dialog-in var(--dur-dialog) var(--ease-out) both; }
dialog.sheet::backdrop { background: var(--color-scrim); }
.sheet__body { display: grid; gap: var(--space-4); }
.sheet__title { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-xl); }
.sheet__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }

.toast-region {
  position: fixed; left: 50%; bottom: var(--space-5); z-index: var(--z-toast);
  transform: translateX(-50%);
  display: grid; gap: var(--space-2); justify-items: center;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: var(--stroke) solid var(--color-line);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lift);
  font-weight: var(--weight-medium);
  animation: toast-in var(--dur-toast) var(--ease-out) both;
}
.toast--success { background: var(--color-success-bg); color: var(--color-success-text); }
.toast--error   { background: var(--color-error-bg);   color: var(--color-error-text); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ====================================== v3: motion support + game guide === */
/* Static states are complete; design/motion.js and design/guide.js only add short,
   event-driven Web Animations on top (fill: backwards) and honour reduced motion. */

.cards { perspective: 900px; }              /* depth for the one-time results flip */
.result__head { position: relative; }       /* hosts the transient paper burst */
.confetti { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.confetti i {
  position: absolute; top: 0; width: var(--space-2); height: var(--space-3);
  border: 1px solid var(--color-line); border-radius: 2px;
}

/* App feedback toast (public/app.css positions it with transform); animate the
   individual translate property so the centring transform is untouched. */
.feedback:not(:empty) { animation: feedback-in var(--dur-toast) var(--ease-out) both; }
@keyframes feedback-in { from { opacity: 0; translate: 0 var(--space-2); } }

/* Game guide inside the existing <dialog class="sheet"> */
dialog.sheet:has(.guide) {
  width: min(520px, calc(100vw - var(--space-6)));
  max-height: calc(100dvh - var(--space-6));
  overflow-y: auto;
}
.guide { display: grid; gap: var(--space-4); }
.guide__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.guide__heading { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-lg); line-height: var(--leading-tight); }
.guide__scenes { display: grid; gap: var(--space-6); }
.guide__scene { display: grid; gap: var(--space-3); }
.guide__scene[hidden], .guide__nav[hidden], .guide__replay[hidden] { display: none; }
.guide__art { position: relative; margin: 0; border-radius: var(--radius-sm); overflow: hidden; } /* sheet 28 − inset 24 → floor 8 */
.guide__svg { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; }
.guide__example {
  position: absolute; top: var(--space-3); left: var(--space-3);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
  background: var(--color-line); color: var(--paper-50);
  font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: var(--leading-tight);
}
.guide__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.guide__count { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-muted); }
.guide__progress { display: inline-flex; gap: var(--space-1); }
.guide__progress span { width: 20px; height: 6px; border-radius: var(--radius-pill); background: var(--color-line-soft); }
.guide__progress .is-on { background: var(--color-primary); }
.guide__replay { margin-left: auto; }
.guide__keep, .keep { white-space: nowrap; }   /* phrases like 예·아니오 never split at the dot */
.guide__title { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-xl); line-height: var(--leading-tight); }
.guide__nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.guide__nav .btn { min-width: 0; padding-inline: var(--space-3); white-space: nowrap; }
.guide__nav .btn[aria-disabled="true"] {
  --btn-bg: var(--color-disabled-bg); --btn-fg: var(--color-disabled-text);
  border-color: var(--color-line-soft); box-shadow: none; cursor: not-allowed;
}

/* Illustration paint: tokens only. */
.guide__svg [data-m] { transform-box: fill-box; transform-origin: center; }
.guide__svg [data-m="band"] { transform-origin: left center; }
.g-table { fill: var(--color-sunken); }
.g-shadow { fill: var(--color-line); }
.g-card, .g-plate, .g-token, .g-bubble, .g-phone { fill: var(--color-surface); stroke: var(--color-line); stroke-width: 2; }
.g-back { fill: var(--color-card-back); }
.g-stripe { fill: none; stroke: var(--color-card-back-alt); stroke-width: 9; }
.g-outline { fill: none; stroke: var(--color-line); stroke-width: 2; }
.g-tag { fill: var(--color-line); }
.g-tag-text, .g-notice-text { fill: var(--color-text); font-family: var(--font-ui); font-weight: var(--weight-medium); font-size: 10px; }
.g-tag-text { fill: var(--paper-50); }
.g-word, .g-word-sm, .g-word-xs, .g-token-text, .g-on, .g-stamp-text { font-family: var(--font-display); fill: var(--color-text); }
.g-word { font-size: 24px; }
.g-word-sm { font-size: 16px; }
.g-word-xs { font-size: 14px; }
.g-token-text { font-size: 17px; }
.g-on { font-size: 15px; fill: var(--color-on-answer); }
.g-key-p { fill: var(--color-primary); stroke: var(--color-line); stroke-width: 2; }
.g-sight { fill: none; stroke: var(--color-line); stroke-width: 2; stroke-dasharray: 4 4; stroke-linecap: round; }
.g-stamp { fill: var(--color-success-bg); stroke: var(--color-success-text); stroke-width: 3; }
.g-stamp-text { fill: var(--color-success-text); font-size: 18px; }
.g-notice { fill: var(--color-notice-bg); stroke: var(--color-line); stroke-width: 1.5; }
.g-eye { fill: none; stroke: var(--color-line); stroke-width: 2; stroke-linejoin: round; }
.g-eye-dot { fill: var(--color-line); }

/* ======================================================= v5: topic vote === */
/* Figma: page "05 Topic vote" — Vote/Header 39:52, Vote/Topic tile 38:98, Vote/Count chip 37:33,
   Vote/Mine tag 37:34, Icon/Topic 37:28, Vote/Close 39:82, Vote/Tie 39:132, Vote/Tie option 39:97,
   Vote/Topic reveal 39:139. Questions and 예·아니오 stay spoken; this is the phones' only shared choice. */
.vote { display: grid; gap: var(--space-5); min-width: 0; }
.vote__head { --turn-bg: var(--color-turn-me); } /* markup: <header class="turn vote__head"> reuses the banner */
.vote__head .turn__sub { text-wrap: balance; }

.topics {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none;
}
@container app (min-width: 720px) {
  .topics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
}
.topics > li { display: grid; min-width: 0; }

.topic {
  display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-2);
  min-height: 128px; min-width: 0;
  padding: var(--space-3);
  border: var(--stroke) solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface); color: var(--color-text);
  box-shadow: var(--shadow-lift);
  margin-bottom: var(--lift);
  text-align: start; font: inherit; cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out), background-color var(--dur-press) linear;
}
@container app (min-width: 480px) { .topic { padding: var(--space-4); } }
.topic:hover:not(:disabled) { background: color-mix(in srgb, var(--color-surface) 90%, var(--color-line)); }
.topic:active:not(:disabled) { transform: translateY(calc(var(--lift) - var(--lift-pressed))); box-shadow: var(--shadow-lift-pressed); }
.topic[aria-pressed="true"] {
  background: var(--color-success-bg);
  border-width: var(--stroke-strong);
  padding: calc(var(--space-3) - (var(--stroke-strong) - var(--stroke))); /* outline grows inward, content stays put */
}
@container app (min-width: 480px) {
  .topic[aria-pressed="true"] { padding: calc(var(--space-4) - (var(--stroke-strong) - var(--stroke))); }
}
.topic:disabled {
  background: var(--color-disabled-bg); color: var(--color-disabled-text);
  border-color: var(--color-line-soft); box-shadow: none; cursor: not-allowed;
}
.topic:disabled .topic__desc { color: inherit; }
.topic__head { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.topic__icon { flex: none; width: 24px; height: 24px; }
.topic__name {
  font-family: var(--font-display); font-weight: var(--weight-regular);
  font-size: var(--text-lg); line-height: var(--leading-tight);
}
.topic__desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-body); }
.topic__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--space-1) var(--space-2); }
.topic__mine {
  display: inline-flex; align-items: center;
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill);
  background: var(--color-answer); color: var(--color-on-answer);
  font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: var(--leading-tight);
}
.topic__count {
  display: inline-flex; align-items: center;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
  border: var(--stroke) solid transparent;
  background: var(--color-sunken);
  font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums;
}
.topic--leader .topic__count { background: var(--color-turn-judge); border-color: var(--color-line); }

.vote__foot { display: grid; gap: var(--space-3); justify-items: stretch; }
.vote__tally { text-align: center; font-size: var(--text-lg); font-weight: var(--weight-medium); }

.tie {
  display: grid; gap: var(--space-4);
  padding: var(--space-4);
  border: var(--stroke) solid var(--color-line); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lift);
  margin: 0 0 var(--lift); min-width: 0;
}
@container app (min-width: 640px) { .tie { padding: var(--space-5); } }
.tie__title { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-xl); line-height: var(--leading-tight); }
.tie__lede { color: var(--color-text-muted); }
.tie__options { display: grid; gap: var(--space-3); margin: 0; padding: 0; border: 0; min-width: 0; }
.tie-option {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 56px; padding: var(--space-3) var(--space-4);
  border: var(--stroke) solid var(--color-line); border-radius: var(--radius-md);
  background: var(--color-surface); box-shadow: var(--shadow-lift); margin-bottom: var(--lift);
  cursor: pointer;
}
.tie-option:has(:checked) { background: var(--color-success-bg); }
.tie-option input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--color-line); } /* global :focus-visible ring + halo */
.tie-option--static { cursor: default; box-shadow: none; margin-bottom: 0; }
.tie-option__name { flex: 1; min-width: 0; font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--leading-tight); }
.tie-option__count { font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }

.topic-reveal {
  display: grid; gap: var(--space-2); justify-items: center; text-align: center;
  padding: var(--space-5);
  border: var(--stroke) solid var(--color-line); border-radius: var(--radius-lg);
  background: var(--color-success-bg); box-shadow: var(--shadow-lift);
  margin-bottom: var(--lift);
}
.topic-reveal__title {
  font-family: var(--font-display); font-weight: var(--weight-regular);
  font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display);
}
.topic-reveal__hint { text-wrap: balance; }
@container app (min-width: 640px) {
  .topic-reveal { padding: var(--space-6); }
  .topic-reveal__title { font-size: var(--text-3xl); }
  .topic-reveal__hint { font-size: var(--text-lg); }
}
/* 320px phones: the 34px banner title would split mid-phrase. */
@container app (max-width: 359px) {
  .vote__head .turn__title, .topic-reveal__title { font-size: var(--text-xl); }
}

@media (prefers-reduced-motion: reduce) {
  .topic, .tie-option { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .guide__replay { display: none; }
  .feedback:not(:empty) { animation: none; }
}

/* ===================================================================== */