/* Imposter Word client styles.
   This is the original artifact prototype's stylesheet, carried over
   rule for rule (only the prototype test mode note styles were dropped).
   The small additions at the bottom cover elements that exist only in
   the real multiplayer client: the reconnect banner, the global error
   line, disconnected player dots, and a .hidden utility. */

:root {
  --bg: #fff7ec;
  --surface: #ffffff;
  --surface-2: #ffefd9;
  --ink: #23202b;
  --ink-soft: #5d576e;
  --line: #f0ddc4;
  --coral: #ff5a49;
  --coral-dark: #d63e30;
  --teal: #0e9594;
  --teal-dark: #0a7473;
  --blue: #3a86ff;
  --sun: #ffb703;
  --sun-soft: #ffe9b0;
  --danger: #e5383b;
  --good: #2a9d5c;
  --shadow: 0 6px 0 rgba(35, 32, 43, 0.12);
  --radius: 20px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1826;
    --surface: #2a2538;
    --surface-2: #352e49;
    --ink: #f6f1ff;
    --ink-soft: #bdb4d4;
    --line: #453c61;
    --coral: #ff6a5c;
    --coral-dark: #ff5a49;
    --teal: #2bb3b1;
    --teal-dark: #2bb3b1;
    --sun: #ffb703;
    --sun-soft: #4a3a10;
    --shadow: 0 6px 0 rgba(0, 0, 0, 0.35);
  }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Nunito", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  min-height: 100dvh;
}
.wrap {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 18px calc(28px + env(safe-area-inset-bottom));
}
h1, h2, h3 { font-family: "Fredoka", "Nunito", sans-serif; margin: 0; line-height: 1.1; }
p { margin: 0; }

/* ---------- header ---------- */
.brand { text-align: center; padding: 10px 0 4px; }
.brand .logo {
  font-family: "Fredoka", sans-serif;
  font-size: 44px; font-weight: 700; letter-spacing: 0.5px;
}
.brand .logo .mask { color: var(--coral); }
.brand .tag { color: var(--ink-soft); font-weight: 800; font-size: 15px; margin-top: 2px; }
.roundbar {
  display: none; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  margin: 14px 0 4px; font-weight: 900; font-size: 14px; color: var(--ink-soft);
}
.roundbar.show { display: flex; }
.roundbar .pill {
  background: var(--surface); border: 2px solid var(--line); border-radius: 999px;
  padding: 5px 12px; color: var(--ink);
}

/* ---------- screens ---------- */
.screen { display: none; animation: pop 0.25s ease; }
.screen.active { display: block; }
@keyframes pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .screen { animation: none; } }

.card {
  background: var(--surface); border: 2px solid var(--line);
  border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow);
  margin-top: 16px;
}
.card h2 { font-size: 26px; margin-bottom: 6px; }
.card .sub { color: var(--ink-soft); font-weight: 700; font-size: 15px; line-height: 1.45; }

/* ---------- buttons ---------- */
.btn {
  display: block; width: 100%; border: none; cursor: pointer;
  font-family: "Fredoka", sans-serif; font-weight: 600;
  font-size: 20px; padding: 16px 20px; border-radius: 16px;
  color: #fff; background: var(--coral);
  box-shadow: 0 5px 0 var(--coral-dark);
  transition: transform 0.08s ease, box-shadow 0.08s ease, opacity 0.15s;
  touch-action: manipulation; user-select: none;
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--coral-dark); }
.btn.teal { background: var(--teal); box-shadow: 0 5px 0 var(--teal-dark); }
.btn.teal:active { box-shadow: 0 1px 0 var(--teal-dark); }
.btn.ghost {
  background: var(--surface); color: var(--ink);
  border: 2px solid var(--line); box-shadow: 0 5px 0 var(--line);
}
.btn.ghost:active { box-shadow: 0 1px 0 var(--line); }
.btn:disabled {
  opacity: 1; pointer-events: none; cursor: default;
  background: #ffb5ad; box-shadow: none;
}
.btn.teal:disabled { background: #93cfcf; box-shadow: none; }
.btn.ghost:disabled { background: var(--surface-2); box-shadow: none; }
.btn.small { font-size: 17px; padding: 12px 16px; }
/* Tappable controls must never behave like selectable text on touch: no
   text selection, no iOS long press callout (Copy / Find Selection), and
   no tap flash. The unprefixed user-select alone does not stop iOS.
   This rule is keyed to the button ELEMENT so every future button gets
   it for free. Any non-button tappable element must carry .tap (the
   convention in README, Shared building blocks) to get the same cover. */
button, .tap, .cat-chip, .game-tile, .vote-opt, .secret-card {
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* Nothing in the game UI is selectable text, not just the controls:
   a long press anywhere should never start the system text selection.
   On iOS a tile long press was selecting words inside the definition
   dialog, which opens under the player's still held finger. Inputs
   opt back in below so names and clues stay editable. */
.wrap, .modal-overlay {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.wrap input, .wrap textarea {
  -webkit-user-select: text;
  user-select: text;
}
.btn-row { display: flex; gap: 10px; margin-top: 14px; }
.btn-row .btn { flex: 1; }
.spacer { height: 14px; }

/* ---------- forms ---------- */
.field-label { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 19px; margin-top: 18px; }
.field-label:first-child { margin-top: 0; }
.text-input {
  width: 100%; font: inherit; font-weight: 800; font-size: 18px; margin-top: 8px;
  padding: 14px; border-radius: 12px; border: 2px solid var(--line);
  background: var(--surface); color: var(--ink);
}
.text-input:focus { outline: 3px solid var(--sun); border-color: var(--sun); }
.code-input {
  text-transform: uppercase; letter-spacing: 10px; text-align: center;
  font-family: "Fredoka", sans-serif; font-size: 30px; font-weight: 700;
}
.code-input::placeholder { letter-spacing: 10px; color: var(--ink-soft); opacity: 0.5; }
.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.cat-chip {
  font: inherit; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 17px;
  padding: 14px 10px; border-radius: 14px; cursor: pointer; text-align: center;
  background: var(--surface); color: var(--ink); border: 2px solid var(--line);
  touch-action: manipulation; user-select: none;
}
.cat-chip .emoji { display: block; font-size: 24px; margin-bottom: 2px; }
.cat-chip.selected { border-color: var(--teal); background: var(--surface-2); box-shadow: 0 4px 0 var(--teal); }
.cat-chip:disabled { cursor: default; }
.hint { color: var(--ink-soft); font-weight: 700; font-size: 14px; margin-top: 6px; line-height: 1.45; }
.error { color: var(--danger); font-weight: 900; font-size: 15px; margin-top: 10px; min-height: 20px; }
.divider {
  display: flex; align-items: center; gap: 12px; margin: 22px 0 0;
  color: var(--ink-soft); font-weight: 900; font-size: 13px; letter-spacing: 2px;
}
.divider::before, .divider::after { content: ""; flex: 1; border-top: 2px solid var(--line); }

/* Entry mode segmented control (Create game / Join game) */
.seg-control {
  display: flex; gap: 5px; margin-top: 14px; padding: 5px;
  background: var(--surface-2); border-radius: 16px;
}
.seg-btn {
  flex: 1; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 16px;
  padding: 11px 8px; border: none; border-radius: 12px;
  background: transparent; color: var(--ink-soft); cursor: pointer;
  touch-action: manipulation; user-select: none;
}
.seg-btn.selected {
  background: var(--surface); color: var(--ink);
  box-shadow: 0 3px 0 rgba(35,32,43,0.12);
}
#createPanel, #joinPanel { margin-top: 16px; }

/* ---------- lobby game catalog ---------- */
.game-catalog { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.game-tile {
  display: flex; align-items: flex-start; gap: 14px; width: 100%;
  font: inherit; text-align: left; padding: 16px; border-radius: 16px;
  background: var(--surface); color: var(--ink); border: 2px solid var(--line);
  cursor: pointer; touch-action: manipulation; user-select: none;
}
.game-tile.selected { border-color: var(--teal); background: var(--surface-2); box-shadow: 0 4px 0 var(--teal); }
.game-tile:disabled { cursor: default; }
.game-tile.unavailable { background: var(--surface-2); }
.game-tile.coming-soon { border-style: dashed; cursor: default; }
.game-emoji { font-size: 34px; line-height: 1.1; flex: none; }
.game-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.game-name { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 20px; line-height: 1.15; }
.game-tagline { color: var(--ink-soft); font-weight: 700; font-size: 14.5px; line-height: 1.4; }
.game-range { font-weight: 900; font-size: 14px; margin-top: 4px; }
.game-reason { color: var(--danger); font-weight: 900; font-size: 14px; }
#gameSetup { margin-top: 18px; }
#gameSetup .field-label { margin-top: 0; }

/* ---------- lobby ---------- */
.room-code-big {
  text-align: center; font-family: "Fredoka", sans-serif; font-weight: 700;
  font-size: 64px; letter-spacing: 14px; margin: 6px 0 2px; padding-left: 14px;
  color: var(--ink);
}
.qr-box {
  margin: 14px auto 4px; width: 232px; max-width: 100%;
  background: #fff; border: 2px solid var(--line); border-radius: 16px; padding: 12px;
  display: flex; align-items: center; justify-content: center;
}
.qr-box svg { width: 100%; height: auto; display: block; }
.qr-fallback { font-weight: 800; font-size: 14px; color: #23202b; text-align: center; line-height: 1.5; word-break: break-all; }
.join-url { text-align: center; font-weight: 800; font-size: 13.5px; color: var(--ink-soft); word-break: break-all; margin-top: 8px; line-height: 1.5; }
.lobby-player {
  display: flex; align-items: center; gap: 12px; background: var(--surface-2);
  border-radius: 12px; padding: 11px 14px; font-weight: 900; font-size: 17px; margin-top: 8px;
}
.legend-row {
  display: flex; align-items: center; gap: 12px; background: var(--surface-2);
  border-radius: 12px; padding: 11px 14px; margin-top: 8px;
}
.legend-emoji { font-size: 20px; flex: none; }
.legend-texts { display: flex; flex-direction: column; }
.legend-name { font-weight: 900; font-size: 17px; }
.legend-line { margin: 2px 0 0; }
.legend-count {
  margin-left: auto; flex: none; background: var(--surface); color: var(--ink);
  border: 2px solid var(--line); border-radius: 999px; padding: 2px 10px;
  font-size: 14px; font-weight: 900;
}
.sync-pile {
  font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 84px;
  line-height: 1.05; color: var(--ink); margin: 6px 0 2px;
}
.sync-hand { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.sync-card-btn {
  font: inherit; font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 26px;
  min-width: 68px; padding: 16px 10px; border-radius: 14px; cursor: pointer;
  background: var(--surface-2); color: var(--ink); border: 2px solid var(--line);
  box-shadow: 0 4px 0 var(--line); touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}
.sync-card-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--line); }
.sync-card-btn:disabled { opacity: .45; cursor: default; box-shadow: none; user-select: none; -webkit-user-select: none; }
.sync-stats { display: flex; gap: 10px; margin-top: 12px; }
.sync-stat {
  flex: 1; border: 2px solid var(--line); border-top: 6px solid var(--line);
  border-radius: 14px; padding: 8px 6px 10px; background: var(--surface);
}
.sync-stat.lives { border-top-color: var(--coral); }
.sync-stat.stars { border-top-color: var(--sun); }
.sync-stat.played { border-top-color: var(--teal); }
.sync-stat-num { font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 30px; line-height: 1.1; }
/* The cards left line breathes by the same 10px that separates
   the stat boxes horizontally. */
.card .sub.sync-cards-line { margin-top: 10px; }
.sync-stat-label {
  font-size: 12px; font-weight: 900; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--ink-soft); margin-top: 2px;
}
.btn-sub { margin-top: 12px; }
.quest-track { display: flex; gap: 8px; margin-top: 12px; }
.quest-box {
  flex: 1; border: 2px solid var(--line); border-top: 6px solid var(--line);
  border-radius: 14px; padding: 7px 2px 9px; background: var(--surface);
  text-align: center;
}
.quest-box.good { border-top-color: var(--good); }
.quest-box.dark { border-top-color: var(--danger); }
.quest-box.current { border-color: var(--sun); box-shadow: 0 0 0 2px var(--sun); }
.quest-box-mark { font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 24px; line-height: 1.15; }
.quest-box.good .quest-box-mark { color: var(--good); }
.quest-box.dark .quest-box-mark { color: var(--danger); }
.quest-box-size { font-size: 13px; font-weight: 900; color: var(--ink-soft); margin-top: 1px; }
.quest-box-note { font-size: 10px; font-weight: 900; color: var(--danger); margin-top: 1px; }
.quest-box-note.soft { color: var(--ink-soft); }
.peek-area { padding: 8px 0 14px; }
.peek-covered { font-size: 46px; line-height: 1.2; }
.peek-role { font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 34px; line-height: 1.2; }
.legend-team-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 19px;
  margin: 16px 0 2px; padding-top: 14px; border-top: 2px solid var(--line);
}
.legend-team-head:first-of-type { margin-top: 8px; padding-top: 0; border-top: none; }
.legend-team-head.good { color: var(--good); }
.legend-team-head.dark { color: var(--danger); }
.evt-box {
  text-align: left; margin-top: 12px; border: 2px solid var(--line);
  border-radius: 14px; padding: 10px 12px; background: var(--surface);
}
.evt-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.evt-title {
  font-size: 12px; font-weight: 900; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--ink-soft);
}
.evt-cost {
  flex: none; border: 2px solid var(--danger); color: var(--danger);
  border-radius: 999px; padding: 2px 10px; font-size: 14px; font-weight: 900;
}
.evt-cost.star { border-color: var(--line); color: var(--ink); }
.evt-rows { margin-top: 8px; }
.evt-rows.many { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
.evt-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.evt-num {
  font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 20px;
  min-width: 48px; text-align: center; background: var(--surface-2);
  border-radius: 10px; padding: 3px 0;
}
.dot { width: 18px; height: 18px; border-radius: 50%; flex: none; border: 2px solid rgba(0,0,0,0.15); }
.host-badge {
  margin-left: auto; background: var(--sun); color: #3a2a00; font-size: 12px;
  padding: 3px 9px; border-radius: 999px; letter-spacing: 0.5px; font-weight: 900;
}
.you-badge {
  margin-left: auto; background: var(--teal); color: #fff; font-size: 12px;
  padding: 3px 9px; border-radius: 999px; letter-spacing: 0.5px; font-weight: 900;
}
.host-badge + .you-badge { margin-left: 6px; }
.offline-badge {
  margin-left: auto; color: var(--danger); font-size: 12px;
  font-weight: 900; letter-spacing: 0.4px;
}
.remove-player-btn {
  margin-left: auto; border: 2px solid var(--danger); color: var(--danger);
  background: transparent; border-radius: 999px; padding: 4px 10px;
  font: inherit; font-size: 12px; font-weight: 900; cursor: pointer;
}
.offline-badge + .remove-player-btn { margin-left: 8px; }
.waiting-text { text-align: center; font-weight: 900; font-size: 17px; color: var(--ink-soft); margin-top: 16px; line-height: 1.5; }
.pulse { animation: pulse 1.6s ease-in-out infinite; display: inline-block; }
@keyframes pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }

/* ---------- reveal ---------- */
.me-avatar {
  width: 96px; height: 96px; border-radius: 50%; margin: 8px auto 14px;
  display: flex; align-items: center; justify-content: center;
  font-family: "Fredoka", sans-serif; font-size: 40px; font-weight: 700; color: #fff;
  border: 4px solid rgba(0,0,0,0.12);
}
.center { text-align: center; }
.secret-card {
  border-radius: var(--radius); padding: 30px 20px; text-align: center; margin-top: 18px;
  min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 3px dashed var(--line); background: var(--surface-2); user-select: none;
}
.secret-card .cat-hint { font-weight: 900; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-soft); }
.secret-card .word { font-family: "Fredoka", sans-serif; font-size: 40px; font-weight: 700; margin-top: 8px; line-height: 1.15; }
.secret-card .covered { font-size: 52px; }
.secret-card .covered-label { font-weight: 900; color: var(--ink-soft); margin-top: 6px; font-size: 16px; }
.secret-card.imposter { border-color: var(--danger); border-style: solid; background: var(--surface); }
.secret-card.imposter .word { color: var(--danger); }
.hold-btn {
  margin-top: 16px; background: var(--ink); color: var(--bg);
  box-shadow: 0 5px 0 rgba(0,0,0,0.35);
}
.hold-btn:active { box-shadow: 0 1px 0 rgba(0,0,0,0.35); background: var(--ink); }
.hold-btn.holding { background: var(--teal); }
.privacy-note { text-align: center; color: var(--ink-soft); font-weight: 800; font-size: 14px; margin-top: 14px; }

/* ---------- clue round ---------- */
.order-list { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.order-item {
  display: flex; align-items: center; gap: 12px; background: var(--surface-2);
  border-radius: 12px; padding: 10px 14px; font-weight: 900; font-size: 17px;
}
.order-item .num {
  width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--bg);
  display: flex; align-items: center; justify-content: center; font-size: 15px; flex: none;
}
.order-item .first-badge {
  margin-left: auto; background: var(--sun); color: #3a2a00; font-size: 12px;
  padding: 3px 9px; border-radius: 999px; letter-spacing: 0.5px;
}
.order-item .turn-badge {
  margin-left: auto; background: var(--teal); color: #fff; font-size: 12px;
  padding: 3px 9px; border-radius: 999px; letter-spacing: 0.5px;
}
.timer-face {
  text-align: center; font-family: "Fredoka", sans-serif; font-weight: 700;
  font-size: 64px; margin: 8px 0 2px; font-variant-numeric: tabular-nums;
}
.timer-face.done { color: var(--danger); }
.timer-bar { height: 12px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin: 10px 0 4px; }
.timer-fill { height: 100%; background: var(--teal); border-radius: 999px; transition: width 0.3s linear; }
.seg { display: flex; gap: 8px; margin-top: 12px; }
.seg button {
  flex: 1; font: inherit; font-weight: 900; font-size: 16px; padding: 11px 0;
  border-radius: 12px; border: 2px solid var(--line); background: var(--surface);
  color: var(--ink); cursor: pointer; touch-action: manipulation;
}
.seg button.selected { border-color: var(--teal); background: var(--surface-2); }
.seg button:disabled { opacity: 1; pointer-events: none; color: var(--ink-soft); }

/* ---------- voting ---------- */
.vote-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.vote-btn {
  display: flex; align-items: center; gap: 12px; width: 100%;
  font: inherit; font-weight: 900; font-size: 19px; text-align: left;
  padding: 16px; border-radius: 14px; border: 2px solid var(--line);
  background: var(--surface); color: var(--ink); cursor: pointer; touch-action: manipulation;
}
.vote-btn:active { border-color: var(--coral); background: var(--surface-2); }
.vote-btn.selected { border-color: var(--teal); background: var(--surface-2); box-shadow: 0 4px 0 var(--teal); }

/* ---------- crosskey ---------- */
.ck-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.ck-tile {
  font: inherit; font-weight: 800; font-size: clamp(10px, 2.8vw, 14px);
  text-transform: uppercase; letter-spacing: 0.2px; padding: 12px 2px;
  border-radius: 10px; border: 2px solid var(--line);
  background: var(--surface); color: var(--ink); cursor: pointer;
  transition: transform 0.12s ease;
}
.ck-tile.noact { cursor: default; }
.ck-tile.holding { transform: scale(0.95); }
.ck-tile.revealed { color: #fff; border-color: transparent; cursor: default; }
.ck-tile.t-coral { background: var(--coral); }
.ck-tile.t-teal { background: var(--blue); }
.ck-tile.t-neutral, .ck-tile.t-bystander { background: var(--surface-2); color: var(--ink-soft); }
.ck-tile.t-assassin { background: var(--ink); border-color: var(--danger); }
.ck-tile.t-agent { background: var(--good); }
.ck-tile.t-agent-missed { background: var(--surface-2); color: var(--good); border-color: var(--good); border-style: dashed; }
.ck-tile.k-coral { border-color: var(--coral); background: var(--surface); background: color-mix(in srgb, var(--coral) 14%, var(--surface)); }
.ck-tile.k-teal { border-color: var(--blue); background: var(--surface); background: color-mix(in srgb, var(--blue) 14%, var(--surface)); }
.ck-tile.k-assassin { border-color: var(--ink); background: var(--surface); background: color-mix(in srgb, var(--ink) 16%, var(--surface)); }
.ck-tile.k-agent { border-color: var(--good); background: var(--surface); background: color-mix(in srgb, var(--good) 14%, var(--surface)); }
.ck-tile.selected { outline: 3px solid var(--sun); outline-offset: 1px; }
@media (prefers-color-scheme: dark) {
  /* --ink flips near white in dark mode, which turned the assassin
     tiles white on white (revealed text is white). The bomb stays a
     near black tile with a red border in both schemes, and the key
     view assassin gets the same border over a darkened tile. */
  .ck-tile.t-assassin { background: #100e16; color: #fff; }
  .ck-tile.k-assassin {
    border-color: var(--danger);
    background: color-mix(in srgb, #000 42%, var(--surface));
  }
}
.ck-team { border-top: 6px solid var(--line); }
.ck-team.coral { border-top-color: var(--coral); }
.ck-team.teal { border-top-color: var(--blue); }
.ck-spy { margin-left: auto; font-size: 19px; }
.ck-begin-error {
  text-align: center; color: var(--danger); font-weight: 900;
  font-size: 15px; line-height: 1.45; margin-top: 10px;
}
.ck-status { text-align: center; }
.ck-side-name.coral { color: var(--coral); }
.ck-side-name.teal { color: var(--blue); }
.ck-score { display: flex; gap: 10px; margin-top: 12px; }
.ck-score-team {
  flex: 1; border: 2px solid var(--line); border-top: 6px solid var(--line);
  border-radius: 14px; padding: 10px 8px 12px; background: var(--surface);
}
.ck-score-team.coral { border-top-color: var(--coral); }
.ck-score-team.teal { border-top-color: var(--blue); }
.ck-score-team.coral.active { border-color: var(--coral); box-shadow: 0 0 0 2px var(--coral); }
.ck-score-team.teal.active { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue); }
.ck-score-name { font-family: "Fredoka", sans-serif; font-size: 21px; }
.ck-score-team.coral .ck-score-name { color: var(--coral); }
.ck-score-team.teal .ck-score-name { color: var(--blue); }
.ck-score-num { font-weight: 900; font-size: 15px; color: var(--ink-soft); margin-top: 2px; }
.ck-score-you {
  margin-top: 4px; font-size: 12px; font-weight: 900;
  letter-spacing: 0.6px; text-transform: uppercase; color: var(--ink-soft);
}
.progress-dots { display: flex; gap: 6px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.progress-dots span { width: 12px; height: 12px; border-radius: 50%; background: var(--line); }
.progress-dots span.filled { background: var(--teal); }

/* ---------- results ---------- */
.result-hero { text-align: center; }
.result-hero .big { font-size: 34px; }
.imposter-banner {
  margin-top: 14px; border-radius: var(--radius); padding: 18px; text-align: center;
  background: var(--surface-2); border: 2px solid var(--line);
}
.imposter-banner .who { font-family: "Fredoka", sans-serif; font-size: 28px; font-weight: 700; }
.imposter-banner .word-was { margin-top: 4px; font-weight: 800; color: var(--ink-soft); }
.imposter-banner .word-was b { color: var(--ink); }
.tally-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-bottom: 2px solid var(--line); font-weight: 800; font-size: 16px;
}
.tally-row:last-child { border-bottom: none; }
.tally-row .votes-for { margin-left: auto; color: var(--ink-soft); font-weight: 900; }
.tally-row .tag-imp { color: var(--danger); font-size: 13px; font-weight: 900; letter-spacing: 0.5px; }
.steal-warning { color: var(--danger); font-weight: 900; font-size: 15px; margin-top: 10px; line-height: 1.45; }
.secret-card .hint-line { margin-top: 10px; font-weight: 800; font-size: 16px; color: var(--ink-soft); }
.secret-card .hint-line b { color: var(--ink); font-size: 18px; }
.points-note {
  margin-top: 14px; border-radius: 14px; padding: 14px 16px; font-weight: 800;
  font-size: 16px; line-height: 1.5; background: var(--sun-soft); text-align: left;
}
.score-row {
  display: flex; align-items: center; gap: 12px; padding: 11px 2px;
  border-bottom: 2px solid var(--line); font-weight: 900; font-size: 18px;
}
.score-row:last-child { border-bottom: none; }
.score-row .pts { margin-left: auto; font-family: "Fredoka", sans-serif; font-size: 22px; }
.score-row .delta { color: var(--good); font-size: 15px; margin-left: 8px; }
.score-row .rank { width: 26px; color: var(--ink-soft); font-size: 15px; }

footer { text-align: center; color: var(--ink-soft); font-weight: 700; font-size: 13px; margin-top: 30px; line-height: 1.5; }
#wash {
  position: fixed; pointer-events: none;
  /* Keep the wash off the strips under Safari's glass bars: they
     sample the page beneath them and held the wash color as a solid
     tint. Safe area insets keep the flash on the page itself. */
  top: env(safe-area-inset-top); bottom: env(safe-area-inset-bottom);
  left: 0; right: 0;
  opacity: 0; z-index: 40;
}
.modal-overlay {
  position: fixed; inset: 0; background: rgba(18,15,26,0.66);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 50;
}
.modal-card {
  max-width: 420px; width: 100%; margin: 0;
  box-shadow: 0 18px 50px rgba(0,0,0,0.5);
}
.guide-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 16px;
}
.guide-nav .btn { width: auto; padding-left: 20px; padding-right: 20px; }
.guide-dots { font-size: 11px; letter-spacing: 4px; color: var(--ink-soft); }
.guide-page-title { font-family: "Fredoka", sans-serif; font-size: 20px; margin: 2px 0 6px; }
.leave-link {
  display: block; margin: 22px auto 0; background: none; border: none; cursor: pointer;
  font: inherit; font-weight: 900; font-size: 14px; color: var(--ink-soft);
  text-decoration: underline; touch-action: manipulation;
}
.screen-actions {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 0 22px;
}
.screen-actions .leave-link { margin: 22px 0 0; }
    

/* ---------- multiplayer client additions ---------- */
.hidden { display: none !important; }
.dot.off { opacity: 0.35; filter: grayscale(1); }
.conn-banner {
  margin-top: 16px; border: 2px solid var(--sun); border-radius: var(--radius);
  padding: 14px 16px; font-weight: 800; font-size: 15px; line-height: 1.5;
  color: var(--ink); background: var(--sun-soft); text-align: center;
}
#error-box { min-height: 0; text-align: center; margin-top: 12px; }

/* ---- Motion (ported from the approved animation demo) ----
   One easing curve, two speeds: 160ms for taps and flips, 260ms
   for entrances. Animations explain a change; nothing loops, and
   nothing delays input. The colour wash stays the alert layer. */
:root {
  --ease: cubic-bezier(0.25, 0.9, 0.3, 1);
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideDownIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes rowIn {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes pulseVal {
  0% { transform: scale(1); }
  35% { transform: scale(1.14); }
  100% { transform: scale(1); }
}
@keyframes popNum {
  0% { transform: scale(0.6); }
  55% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@keyframes shakeX {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
@keyframes flipTile {
  from { transform: rotateY(90deg); }
  to { transform: rotateY(0deg); }
}
@keyframes stampIn {
  0% { transform: scale(1.5) rotate(-7deg); opacity: 0.3; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes ringPulse {
  0% { transform: scale(0.97); }
  100% { transform: scale(1); }
}
/* Cards rise in when a screen or phase first lands; render() holds
   the phase-enter class on body only for the entrance window, so
   same phase re-renders stay still. */
.phase-enter .card {
  animation: riseIn 0.26s var(--ease) both;
}
.anim-row {
  animation: riseIn 0.26s var(--ease) both;
}
.pulse {
  animation: pulseVal 0.32s var(--ease);
}
.sync-pile.pop {
  animation: popNum 0.3s var(--ease);
}
.shake {
  animation: shakeX 0.38s ease-out;
}
.ck-grid {
  perspective: 700px;
}
.ck-tile.flip-in {
  animation: flipTile 0.3s var(--ease);
}
.clue-in {
  animation: slideDownIn 0.26s var(--ease) both;
}
.quest-box.stamp {
  animation: stampIn 0.28s var(--ease);
}
.lobby-player.row-in {
  animation: rowIn 0.26s var(--ease) both;
}
.game-tile {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.game-tile.ring-in {
  animation: ringPulse 0.26s var(--ease);
}
.ck-tile,
.vote-btn,
.sync-card-btn,
.game-tile {
  transition: transform 0.12s ease;
}
.ck-tile:active,
.sync-card-btn:active,
.game-tile:active {
  transform: scale(0.96);
}
.vote-btn:active {
  transform: translateY(2px);
}
.fly-ghost {
  position: fixed;
  z-index: 65;
  margin: 0;
  pointer-events: none;
}
#tint {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.6s ease, background-color 0.6s ease;
}
body .wrap {
  position: relative;
  z-index: 1;
}

/* Entry error sits under the action buttons, not the name field. */
#entryError {
  margin: 14px 0 0;
}
#entryError:empty {
  margin: 0;
}

/* Game posters carousel on the entry screen. */
.poster-carousel {
  margin-top: 16px;
}
.poster-track.no-snap {
  scroll-snap-type: none;
}
.poster-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 2px 10px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* The peeking neighbor posters fade into the page at both edges
     instead of cutting off hard, like the Jackbox carousel. The
     mask is fixed to the track box while the posters scroll under
     it. */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 40px,
    #000 calc(100% - 40px),
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 40px,
    #000 calc(100% - 40px),
    transparent
  );
}
.poster-track::-webkit-scrollbar {
  display: none;
}
.poster {
  scroll-snap-align: center;
  flex: 0 0 86%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent) 14%, var(--surface)),
    var(--surface) 70%
  );
  border: 2px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 6px 0 rgba(35, 32, 43, 0.12);
}
.poster-art {
  aspect-ratio: 2 / 1;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
}
.poster-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.poster-main {
  padding: 13px 18px 17px;
}
.poster-name {
  font-family: Fredoka, sans-serif;
  font-size: 21px;
  font-weight: 600;
}
.poster-tag {
  color: var(--ink-soft);
  font-size: 14.5px;
  margin: 2px 0 9px;
}
.poster-players {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 999px;
  padding: 3px 9px;
}


/* Collapsible How it works card. */
.how-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: Fredoka, sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.how-chev {
  transition: transform 0.2s ease;
  color: var(--ink-soft);
}
#howCard.collapsed .how-chev {
  transform: rotate(-90deg);
}
.how-body {
  margin-top: 6px;
}

/* Lobby poster rail: the Pick a game shelf. Same posters as the
   home carousel, plus selection and eligibility states. */
.poster-rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 2px 10px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.poster-rail::-webkit-scrollbar {
  display: none;
}
.poster-rail .poster {
  flex-basis: 78%;
}
.poster-rail .poster-art {
  position: relative;
}
.poster-art.fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
}
.poster.selected {
  border-color: var(--accent);
  box-shadow:
    0 0 0 3px var(--accent),
    0 6px 0 rgba(35, 32, 43, 0.12);
}
.poster.ring-in {
  animation: ringPulse 0.26s var(--ease);
}
.poster.tappable {
  cursor: pointer;
}
.poster.off .poster-art img {
  filter: saturate(0.25);
  opacity: 0.75;
}
.poster.off .poster-name,
.poster.off .poster-tag {
  opacity: 0.55;
}
.poster-selected-pill {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--accent);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 4px 10px;
}
.poster-reason-pill {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background: rgba(27, 24, 38, 0.85);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  border-radius: 999px;
  padding: 4px 10px;
}

/* The lobby's sticky start bar: pinned to the bottom of the
   screen while the lobby scrolls behind it. */
.lobby-bar {
  position: sticky;
  bottom: 10px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 6px 0 rgba(35, 32, 43, 0.12);
  padding: 12px 14px;
  margin-top: 16px;
}
.lobby-bar-main {
  flex: 1;
  min-width: 0;
}
.lobby-bar-title {
  font-family: Fredoka, sans-serif;
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lobby-bar-sub {
  color: var(--ink-soft);
  font-size: 13px;
}
.lobby-bar-btn {
  flex: none;
  width: auto;
  padding: 12px 22px;
}
.lobby-bar-wait {
  flex: none;
  font-family: Fredoka, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-soft);
}