/* ============================================================================
   Cipher — bright, juicy word-game UI
   Dark default · candy/casino palette · chunky tactile controls
   Class names match the vanilla-JS client (app.js) exactly — drop-in.
   ========================================================================== */

/* ── DARK (default) ──────────────────────────────────────────────────────── */
:root {
  --bg: #0e1016;
  --bg-2: #141722;
  --panel: #1a1e2b;
  --panel-solid: #1a1e2b;
  --panel-2: #212636;
  --panel-3: #2a3043;
  --line: #2c3346;
  --line-strong: #3b4459;
  --ink: #f4f7ff;
  --ink-2: #aab4c9;
  --ink-3: #717c92;

  --accent: #ffc53d;
  --accent-2: #f0a417;
  --accent-ink: #2a1c02;
  --accent-soft: rgba(255, 197, 61, 0.14);

  --red: #fb5071;          /* Coral team */
  --red-deep: #b91c47;
  --red-ink: #fff3f5;
  --blue: #21d4cf;         /* Cyan team */
  --blue-deep: #0c8f93;
  --blue-ink: #04282b;

  --neutral: #c9bba0;
  --neutral-deep: #8a7d64;
  --neutral-ink: #2a2418;
  --assassin: #0a0a0c;

  --good: #34d399;
  --warn: #fbbf24;
  --danger: #fb5071;

  --surface-inset: #12151f;
  --surface-raised: #1f2433;
  --board-frame-bg: linear-gradient(180deg, #1c2130 0%, #161a26 100%);
  --board-inner-border: #2b3245;
  --board-inset-shadow: inset 0 2px 22px rgba(0, 0, 0, 0.45);
  --team-red-active: #2a1622;
  --team-blue-active: #0f2630;
  --card-paper: #283044;
  --card-paper-hi: #323c56;
  --card-paper-shadow: #161c2a;
  --card-ink: #eef2fb;
  --card-desk: #0a0c12;
  --shadow-ink: #000;
  --scrim-bg: rgba(6, 8, 14, 0.66);
  --av-on-color: #fff;
  --grid-line: rgba(255, 255, 255, 0.025);

  --radius: 18px;
  --radius-sm: 13px;
  --radius-lg: 26px;
  --hard: 0 18px 44px -20px rgba(0, 0, 0, 0.8);
  --hard-sm: 0 6px 18px -8px rgba(0, 0, 0, 0.6);
  --shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.85);
  --ring: 0 0 0 3px var(--bg), 0 0 0 6px var(--accent);
  --edge: rgba(0, 0, 0, 0.5);

  color-scheme: dark;
  --font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Bricolage Grotesque", var(--font);
  --head: "Bricolage Grotesque", var(--font);
  --mono: "Space Mono", ui-monospace, Menlo, monospace;

  --ease: cubic-bezier(0.34, 1.56, 0.64, 1);     /* gentle overshoot */
  --ease-out: cubic-bezier(0.22, 0.7, 0.25, 1);
  --maxw: 1240px;
}

/* ── LIGHT (Wheesht editorial — cream + violet, matches /games) ──────────── */
[data-theme="light"] {
  color-scheme: light;
  --bg: #f4eee3;
  --bg-2: #ede5d6;
  --panel: #ffffff;
  --panel-solid: #ffffff;
  --panel-2: #fbf6ec;
  --panel-3: #f1ead9;
  --line: #e4dbc9;
  --line-strong: #1a1a1a;
  --ink: #1a1a1a;
  --ink-2: #5a554c;
  --ink-3: #8a8378;

  --accent: #6c5ce7;
  --accent-2: #4b3fd0;
  --accent-ink: #ffffff;
  --accent-soft: #eceafb;

  --red: #f6325c;
  --red-deep: #c81143;
  --red-ink: #fff3f5;
  --blue: #11b8b2;
  --blue-deep: #0a8a86;
  --blue-ink: #04302d;

  --neutral: #cabd9f;
  --neutral-deep: #9a8d6e;
  --neutral-ink: #2a2418;
  --assassin: #16121c;

  --good: #18b377;
  --warn: #e8980c;
  --danger: #f6325c;

  --surface-inset: #fbf6ec;
  --surface-raised: #ffffff;
  --board-frame-bg: linear-gradient(180deg, #ffffff 0%, #fbf6ec 100%);
  --board-inner-border: #e4dbc9;
  --board-inset-shadow: inset 0 2px 16px rgba(60, 45, 20, 0.08);
  --team-red-active: #ffe9ee;
  --team-blue-active: #def6f5;
  --card-paper: #ffffff;
  --card-paper-hi: #ffffff;
  --card-paper-shadow: #efe7d6;
  --card-ink: #1a1a1a;
  --card-desk: #ede5d6;
  --shadow-ink: rgba(60, 45, 20, 0.45);
  --av-on-color: #fff;
  --grid-line: rgba(60, 45, 20, 0.04);

  --hard: 0 18px 40px -20px rgba(60, 45, 20, 0.26);
  --hard-sm: 0 5px 16px -6px rgba(60, 45, 20, 0.2);
  --shadow: 0 24px 56px -28px rgba(60, 45, 20, 0.3);
  --ring: 0 0 0 3px var(--bg), 0 0 0 6px var(--accent);
  --edge: rgba(60, 45, 20, 0.16);
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 600;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Calm ambience: one soft overhead glow, nothing busy */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(125% 65% at 50% -25%, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 62%);
  transition: background 0.45s var(--ease-out);
}
body::after { display: none; }

.aurora, .grain { display: none; }

.app { max-width: var(--maxw); margin: 0 auto; padding: clamp(12px, 2.5vw, 36px); padding-bottom: max(12px, env(safe-area-inset-bottom)); min-height: 100vh; min-height: 100dvh; }

/* ── Typography ──────────────────────────────────────────────────────────── */
h1, h2, h3 { margin: 0; font-family: var(--head); font-weight: 600; line-height: 1.08; letter-spacing: -0.01em; }
.eyebrow {
  font-family: var(--head);
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 0.5em;
}
.eyebrow::before { content: none; }
.muted { color: var(--ink-2); }
.tiny { font-size: 0.78rem; }

/* ── Buttons — chunky, tactile, press-down ───────────────────────────────── */
.btn {
  appearance: none; cursor: pointer; font: inherit; font-weight: 800;
  font-family: var(--head); letter-spacing: 0.01em;
  color: var(--ink); background: var(--panel-2);
  border: 0; border-radius: var(--radius-sm);
  padding: 0.7em 1.3em; display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  box-shadow: 0 4px 0 var(--edge), var(--hard-sm);
  transition: transform 0.08s var(--ease-out), box-shadow 0.08s var(--ease-out), background 0.15s, color 0.15s, filter 0.15s;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--edge), var(--hard-sm); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: 0 4px 0 var(--edge); filter: saturate(0.6); }
.btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 3px 0 var(--accent-2), var(--hard-sm); }
.btn--primary:active { box-shadow: 0 0 0 var(--accent-2); }
.btn--ghost { background: transparent; box-shadow: none; border: 1.5px solid var(--line-strong); }
.btn--ghost:hover { box-shadow: none; border-color: var(--accent); }
.btn--ghost:active { transform: translateY(2px); box-shadow: none; }
.btn--lg { padding: 0.95em 1.7em; font-size: 1.08rem; border-radius: var(--radius); }
.btn--block { width: 100%; justify-content: center; }
.btn--red { background: var(--red); color: var(--red-ink); box-shadow: 0 3px 0 var(--red-deep), var(--hard-sm); }
.btn--red:active { box-shadow: 0 0 0 var(--red-deep); }
.btn--blue { background: var(--blue); color: var(--blue-ink); box-shadow: 0 3px 0 var(--blue-deep), var(--hard-sm); }
.btn--blue:active { box-shadow: 0 0 0 var(--blue-deep); }
.btn--danger { color: var(--danger); }
.btn--sm { padding: 0.46em 0.85em; font-size: 0.82rem; box-shadow: 0 3px 0 var(--edge); border-radius: 10px; }
.btn--sm:active { transform: translateY(3px); box-shadow: 0 0 0 var(--edge); }

.mode-dark {
  margin-top: 10px; color: var(--red-ink);
  background: linear-gradient(180deg, #c0285a 0%, #8e1140 100%);
  box-shadow: 0 4px 0 #5e0c2a, var(--hard-sm);
}
.mode-dark:active { box-shadow: 0 0 0 #5e0c2a; }
.mode-toofar {
  margin-top: 10px; color: #ffe2e2;
  background: linear-gradient(180deg, #2a1118 0%, #160409 100%);
  box-shadow: 0 4px 0 #000, var(--hard-sm); border: 1px solid #7a1320;
}
.mode-toofar:active { box-shadow: 0 0 0 #000; }

.pwa-install {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; border: 2px solid var(--accent); background: var(--accent-soft);
}
.pwa-install__copy { display: grid; gap: 4px; }
.pwa-install__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.icon-btn {
  appearance: none; border: 0; background: var(--panel-2);
  color: var(--ink); width: 44px; height: 44px; border-radius: 13px; cursor: pointer;
  display: grid; place-items: center; font-size: 1.1rem; box-shadow: 0 4px 0 var(--edge), var(--hard-sm);
  transition: transform 0.08s var(--ease-out), box-shadow 0.08s var(--ease-out), filter 0.15s;
}
.icon-btn:hover { filter: brightness(1.08); }
.icon-btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--edge); }
.icon-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.icon-btn--txt { font-family: var(--head); font-size: 1rem; font-weight: 700; letter-spacing: 0; }

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field > label { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.01em; color: var(--ink-2); }
.input, .select, textarea.input {
  font: inherit; font-weight: 700; color: var(--ink); background: var(--surface-inset);
  border: 2px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 0.74em 0.95em; width: 100%; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.input::placeholder { color: var(--ink-3); font-weight: 600; }
.input:focus, .select:focus, textarea.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
textarea.input { resize: vertical; min-height: 92px; font-size: 0.92rem; }
.code-input { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.4em; font-size: 1.35rem; text-align: center; font-weight: 700; color: var(--accent); }

.segmented { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-inset); border: 2px solid var(--line-strong); border-radius: var(--radius-sm); flex-wrap: wrap; }
.segmented button {
  appearance: none; border: 0; background: transparent; color: var(--ink-2);
  cursor: pointer; font: inherit; font-weight: 800; font-family: var(--head); border-radius: 9px;
  padding: 0.5em 0.95em; transition: 0.14s var(--ease-out);
}
.segmented button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); box-shadow: 0 3px 0 var(--accent-2); transform: translateY(-1px); }
.segmented button:focus-visible { outline: none; box-shadow: inset var(--ring); }

/* ── Panels ──────────────────────────────────────────────────────────────── */
.panel {
  position: relative; background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--hard-sm);
  padding: clamp(16px, 2.4vw, 26px);
}
.panel::after { display: none; }
.panel::before { display: none; }
.dossier-card { border-top: 3px solid var(--line-strong); }
.dossier-card.red { border-top-color: var(--red); }
.dossier-card.blue { border-top-color: var(--blue); }

.badge {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--head);
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.01em;
  padding: 0.36em 0.75em; border-radius: 999px; border: 0; color: var(--ink-2);
  background: var(--panel-2); box-shadow: inset 0 0 0 1.5px var(--line);
}
.badge--live { color: var(--good); }
.badge--agents { color: var(--accent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 50%, transparent); }
.badge--dev { color: var(--accent); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pulse { animation: pulse 1.6s steps(2, end) infinite; }
@keyframes pulse { 50% { opacity: 0.3; } }

/* ============================================================================
   HOME
   ========================================================================== */
.home { display: grid; gap: clamp(28px, 5vw, 48px); padding-top: clamp(16px, 4vh, 40px); }

.home__hero { display: grid; gap: 18px; justify-items: start; max-width: 760px; }
.brand { display: flex; align-items: center; gap: 0.65rem; }
.brand__mark { display: none; }
.brand__name { font-family: var(--head); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.brand__name b { font-weight: 700; color: var(--ink); }
.home h1 {
  font-family: var(--display); font-weight: 600; font-size: clamp(2.1rem, 6.2vw, 3.6rem);
  line-height: 1.04; letter-spacing: -0.02em;
}
.home h1 .grad { color: var(--accent); -webkit-text-fill-color: var(--accent); }
.home .hero-kicker {
  font-family: var(--head); font-size: 1.1rem; font-weight: 600;
  color: var(--ink); max-width: 48ch; line-height: 1.45; margin: 0;
}
.home .lede { font-size: 1.02rem; color: var(--ink-2); max-width: 58ch; line-height: 1.65; margin: 0; font-weight: 600; }
.home .lede b { color: var(--ink); font-weight: 800; }

.home__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; width: 100%; max-width: 860px; }
@media (max-width: 680px) { .home__actions { grid-template-columns: 1fr; } }
.action-card { display: grid; gap: 14px; align-content: start; }
.action-card h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: 0; }
.join-row { display: flex; gap: 10px; }
.join-row .code-input { flex: 1; min-width: 0; }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.feature { display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--panel-2); border: 1px solid var(--line); }
.feature .ico { font-size: 1.4rem; }
.feature h4 { font-family: var(--head); font-size: 0.98rem; margin: 0; font-weight: 600; letter-spacing: 0; }
.feature p { margin: 0; color: var(--ink-2); font-size: 0.86rem; line-height: 1.5; font-weight: 600; }

.home__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; color: var(--ink-3); font-size: 0.8rem; font-family: var(--head); font-weight: 600; }

/* Live stats ribbon */
.stats-ribbon {
  display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap;
  border: 0; border-radius: var(--radius);
  background: transparent; overflow: visible; box-shadow: none;
}
.stats-ribbon__item {
  flex: 1; min-width: 120px; padding: 16px 18px;
  display: grid; gap: 4px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel-2);
}
.stats-ribbon__val {
  font-family: var(--display); font-weight: 600; font-size: 1.7rem;
  line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums;
}
.stats-ribbon__lbl {
  font-family: var(--head); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
}

/* Split room-code input */
.code-boxes { display: flex; gap: 10px; flex: 1; min-width: 0; }
.code-box {
  flex: 1; max-width: 56px; aspect-ratio: 1; text-align: center;
  font-family: var(--mono); font-weight: 700; font-size: 1.25rem;
  text-transform: uppercase; color: var(--accent); letter-spacing: 0;
  padding: 0; caret-color: var(--accent); border-radius: 14px;
}
.code-box:focus { box-shadow: 0 0 0 4px var(--accent-soft); }
.code-box.filled { border-color: var(--accent); background: var(--accent-soft); }

/* ============================================================================
   TOPBAR
   ========================================================================== */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.topbar__left, .topbar__right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.room-code {
  font-family: var(--mono); font-weight: 700; letter-spacing: 0.16em; font-size: 0.9rem; color: var(--accent);
  cursor: pointer; transition: filter 0.15s; background: var(--panel-2); padding: 8px 14px; border-radius: 12px;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 35%, transparent);
}
.room-code:hover { filter: brightness(1.12); }
.room-code small { color: var(--ink-3); letter-spacing: 0.12em; font-weight: 700; margin-right: 7px; font-size: 0.66rem; }
.room-code.copied { color: var(--good); }

.conn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--head); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-3); text-transform: uppercase; }
.conn .dot { background: var(--good); }
.conn.bad .dot { background: var(--danger); animation: pulse 1s steps(2) infinite; }

/* ── Scoreboard ──────────────────────────────────────────────────────────── */
.mission-status::before {
  content: "SCOREBOARD";
  display: block;
  font-family: var(--head); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.14em; color: var(--ink-3); margin-bottom: 8px;
}
.mission-status__bar {
  border: 1px solid var(--line);
  background: var(--surface-raised);
  border-radius: var(--radius);
  box-shadow: var(--hard-sm);
}
.scoreboard-wrap { display: grid; gap: 0; margin-bottom: 16px; }
.scoreboard {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: stretch;
  padding: 8px;
}
.team-score {
  display: flex; align-items: center; gap: 14px; padding: 12px 18px;
  border: 0; border-radius: var(--radius-sm); background: var(--panel-2);
  box-shadow: inset 0 0 0 1.5px var(--line);
  transition: box-shadow 0.22s, background 0.22s;
}
.team-score--blue { justify-content: flex-end; }
.team-score--red.active { background: var(--team-red-active); box-shadow: inset 0 0 0 2px var(--red); }
.team-score--blue.active { background: var(--team-blue-active); box-shadow: inset 0 0 0 2px var(--blue); }
.team-score .num {
  font-family: var(--display); font-weight: 600; font-size: 2.6rem;
  line-height: 0.9; font-variant-numeric: tabular-nums; flex: none;
}
.team-score--red .num { color: var(--red); }
.team-score--blue .num { color: var(--blue); }
.team-score .score-denom { font-size: 1rem; opacity: 0.5; font-weight: 600; }
.team-score .meta { display: grid; gap: 1px; }
.team-score .meta b { font-family: var(--head); font-weight: 600; font-size: 0.84rem; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.team-score .meta .tiny { font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.team-start-badge {
  display: inline-block; margin-top: 3px;
  font-family: var(--head); font-size: 0.56rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  color: var(--accent-ink); background: var(--accent);
}
.turn-pill { text-align: center; display: grid; gap: 4px; justify-items: center; align-content: center; padding: 0 10px; min-width: 130px; }
.turn-pill .who { font-family: var(--head); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.03em; }
.timer { font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.84rem; letter-spacing: 0.04em; color: var(--ink-3); }
.timer.low { color: var(--danger); }

.timer-bar { height: 4px; background: var(--line); overflow: hidden; margin-top: 8px; border-radius: 999px; }
.timer-bar__fill {
  height: 100%; background: var(--accent); width: 100%; border-radius: 999px;
  transform-origin: left center; transition: transform 0.25s linear, background 0.25s;
}
.timer-bar__fill.low { background: var(--danger); }

/* ── Game layout ─────────────────────────────────────────────────────────── */
/* Room content stays comfortably centred — board never sprawls */
[data-room-root] { max-width: 980px; margin-inline: auto; }

.game-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.board-wrap { display: grid; gap: 12px; }

/* ── Board tray ──────────────────────────────────────────────────────────── */
.board-frame {
  background: var(--board-frame-bg);
  border: 1px solid var(--line);
  padding: 14px 14px 16px;
  border-radius: var(--radius-lg);
  box-shadow: var(--hard-sm);
  position: relative;
  width: 100%;
}
.board-frame::before { display: none; }
.board-frame__head {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 2px 4px 12px;
  font-family: var(--head); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3);
  flex-wrap: wrap;
}
.board-frame__head::before { content: none; }
.board-frame__title { color: var(--ink-2); }
.board-frame__title strong { color: var(--ink); font-weight: 600; font-size: 1rem; letter-spacing: 0.02em; }
.board-frame__meta { margin-left: auto; }
.board-frame__head strong { color: var(--ink-2); font-weight: 600; }

.board {
  display: grid; gap: 8px;
  grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr));
  padding: 10px;
  background: var(--card-desk);
  border: 1px solid var(--board-inner-border);
  border-radius: var(--radius);
  box-shadow: var(--board-inset-shadow);
  width: 100%;
}

.cardx {
  position: relative; aspect-ratio: 1.12 / 1; min-height: 0; width: 100%;
  padding: 12px 5px 9px; font: inherit; cursor: default;
  display: grid; place-items: center; align-content: center; text-align: center;
  border: 0; border-radius: 14px;
  background: linear-gradient(180deg, var(--card-paper-hi) 0%, var(--card-paper) 62%);
  color: var(--card-ink);
  box-shadow: 0 5px 0 var(--card-paper-shadow), 0 9px 16px -8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: transform 0.14s var(--ease), box-shadow 0.16s var(--ease-out), filter 0.18s var(--ease-out);
  overflow: hidden; user-select: none; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-appearance: none; appearance: none;
  container-type: inline-size;
  container-name: card;
}
.cardx::before { display: none; }

.cardx__ref {
  position: absolute; top: 6px; left: 8px; z-index: 2;
  font-family: var(--mono); font-size: 0.5rem; font-weight: 700;
  letter-spacing: 0.04em; color: var(--ink-3); opacity: 0.7; line-height: 1;
}

.cardx__mark {
  position: absolute; top: 5px; right: 6px; z-index: 2;
  width: 16px; height: 16px; display: grid; place-items: center;
  font-family: var(--head); font-size: 0.56rem; font-weight: 700;
  letter-spacing: 0; line-height: 1; border-radius: 6px; border: 1.5px solid currentColor;
}
.cardx__mark--red { color: var(--red); background: color-mix(in srgb, var(--red) 18%, transparent); }
.cardx__mark--blue { color: var(--blue); background: color-mix(in srgb, var(--blue) 18%, transparent); }
.cardx__mark--neutral { color: var(--neutral-deep); background: color-mix(in srgb, var(--neutral) 18%, transparent); }
.cardx__mark--assassin { color: var(--red); background: #0a0a0a; border-color: var(--red-deep); }

.cardx .word {
  grid-column: 1; grid-row: 1;
  position: relative; z-index: 1;
  width: max-content; max-width: calc(100% - 4px); min-width: 0;
  margin: 0; padding: 0 2px;
  font-family: var(--head); font-weight: 600; line-height: 1.06;
  letter-spacing: -0.005em;
  hyphens: none; -webkit-hyphens: none;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  text-rendering: geometricPrecision;
}
.cardx .word--single {
  white-space: nowrap;
  overflow: hidden;
  overflow-wrap: normal; word-break: keep-all;
  font-size: min(0.82rem, calc((100cqw - 8px) / max(var(--word-chars, 5), 3) * 1.62));
}
.cardx .word--multi {
  width: 100%; max-width: calc(100% - 4px);
  white-space: normal;
  overflow-wrap: break-word; word-break: normal;
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden;
  font-size: min(0.74rem, 10.5cqw);
  line-height: 1.1;
}
.cardx .word--emoji {
  width: auto; max-width: 100%;
  font-size: clamp(1rem, calc(100cqw * 0.42), 1.75rem);
  letter-spacing: 0; line-height: 1;
  white-space: nowrap;
}

/* Operative view — unrevealed cards are clean blank tiles */
.board--blind .cardx:not(.revealed) {
  background: linear-gradient(180deg, var(--card-paper-hi) 0%, var(--card-paper) 62%);
  color: var(--card-ink);
}
.board--blind .cardx:not(.revealed) .cardx__mark { display: none; }

/* Spymaster key — full colour per team (unrevealed) */
.cardx.key-red {
  background: var(--red);
  color: var(--red-ink);
  box-shadow: 0 5px 0 var(--red-deep), 0 8px 16px -10px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.cardx.key-red .word { color: var(--red-ink); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.28); }
.cardx.key-red .cardx__ref { color: rgba(255, 235, 240, 0.7); }

.cardx.key-blue {
  background: var(--blue);
  color: var(--blue-ink);
  box-shadow: 0 5px 0 var(--blue-deep), 0 8px 16px -10px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.cardx.key-blue .word { color: var(--blue-ink); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.25); }
.cardx.key-blue .cardx__ref { color: rgba(4, 40, 43, 0.55); }

.cardx.key-neutral {
  background: var(--neutral);
  color: var(--neutral-ink);
  box-shadow: 0 5px 0 var(--neutral-deep), 0 10px 20px -12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.cardx.key-neutral .word { color: #3a3320; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); }
.cardx.key-neutral .cardx__ref { color: rgba(58, 51, 32, 0.5); }

.cardx.key-assassin {
  background: linear-gradient(160deg, #2a2436 0%, #100c16 55%, #050407 100%);
  color: #ffd9df;
  box-shadow: 0 4px 0 #000, 0 0 0 1.5px color-mix(in srgb, var(--red) 32%, transparent), 0 10px 22px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.cardx.key-assassin .word { color: #ffe7eb; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.cardx.key-assassin .cardx__ref { color: rgba(255, 200, 210, 0.45); }

.cardx.key-red .cardx__mark,
.cardx.key-blue .cardx__mark,
.cardx.key-neutral .cardx__mark {
  background: rgba(0, 0, 0, 0.22);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}
.cardx.key-assassin .cardx__mark {
  background: var(--red-deep);
  border-color: var(--red);
  color: var(--red-ink);
}

.board-frame__key {
  font-family: var(--head); font-size: 0.62rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-ink);
  background: var(--accent); padding: 4px 10px; border-radius: 999px;
}

.cardx:disabled {
  cursor: default; pointer-events: none;
}
.cardx.clickable { cursor: pointer; }
.cardx.clickable:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 9px 0 var(--card-paper-shadow), 0 18px 30px -12px rgba(0, 0, 0, 0.5), 0 0 0 2.5px var(--accent), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.cardx.clickable:active { transform: translateY(-1px) scale(0.99); box-shadow: 0 3px 0 var(--card-paper-shadow), 0 0 0 2.5px var(--accent); }

.cardx--near,
.cardx--near-mine,
.cardx--pending { padding-top: 15px; }
.cardx--near {
  box-shadow: 0 4px 0 var(--card-paper-shadow), 0 0 0 2.5px color-mix(in srgb, var(--accent) 55%, transparent), 0 8px 16px -8px rgba(0, 0, 0, 0.4);
}
.cardx--near-mine {
  box-shadow: 0 5px 0 var(--card-paper-shadow), 0 0 0 3px var(--accent), 0 8px 18px -8px rgba(0, 0, 0, 0.4);
  background: color-mix(in srgb, var(--accent) 9%, var(--card-paper));
}
.cardx--taken {
  opacity: 0.6; filter: saturate(0.75);
  cursor: not-allowed;
  box-shadow: 0 4px 0 var(--card-paper-shadow), 0 0 0 2px color-mix(in srgb, var(--ink-3) 40%, transparent);
}
.cardx--taken .word { opacity: 0.72; }
.cardx--pending {
  box-shadow: 0 0 0 3px var(--accent), 0 14px 30px -12px rgba(0, 0, 0, 0.5), 0 4px 0 var(--accent-2);
  transform: translateY(-3px) scale(1.05);
  z-index: 3;
}
.cardx__pick {
  position: absolute; top: 0; left: 0; right: 0; z-index: 4;
  display: flex; justify-content: center; padding: 4px 4px 0; pointer-events: none;
}
.cardx__pick-chip {
  max-width: calc(100% - 8px);
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--head); font-size: 0.54rem; font-weight: 700;
  letter-spacing: 0.03em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #fff; background: var(--pick-color, var(--accent));
  border: 1.5px solid rgba(0, 0, 0, 0.18);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
}
.cardx--pending .cardx__pick-chip { animation: pick-pulse 1.3s ease-in-out infinite; }
@keyframes pick-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}
.cardx__status {
  position: absolute; top: 5px; right: 5px; z-index: 3;
  font-family: var(--head); font-size: 0.5rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 999px;
  color: rgba(255, 255, 255, 0.95); background: rgba(0, 0, 0, 0.4);
}
.cardx--out { cursor: default; pointer-events: none; }
.cardx--out .word { text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, 0.3); text-decoration-thickness: 2px; }
.cardx.kind-red.cardx--out .word,
.cardx.kind-blue.cardx--out .word,
.cardx.kind-neutral.cardx--out .word { text-decoration-color: rgba(255, 255, 255, 0.5); }
.cardx__near {
  position: absolute; left: 5px; right: 5px; bottom: 5px; z-index: 3;
  display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; pointer-events: none;
}
.cardx__near-tag {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; font-family: var(--head); font-size: 0.56rem; font-weight: 700;
  color: #fff; background: var(--pick-color, var(--accent)); border: 1.5px solid rgba(0, 0, 0, 0.22);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.cardx.clickable:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Revealed — color floods in with a satisfying pop */
.cardx.revealed { cursor: default; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35), 0 10px 22px -10px rgba(0, 0, 0, 0.5); }
.cardx.kind-red { background: var(--red); color: var(--red-ink); box-shadow: 0 4px 0 var(--red-deep), 0 8px 18px -10px rgba(0, 0, 0, 0.4); }
.cardx.kind-blue { background: var(--blue); color: var(--blue-ink); box-shadow: 0 4px 0 var(--blue-deep), 0 8px 18px -10px rgba(0, 0, 0, 0.4); }
.cardx.kind-neutral { background: var(--neutral); color: var(--neutral-ink); box-shadow: 0 4px 0 var(--neutral-deep), 0 8px 18px -12px rgba(0, 0, 0, 0.3); }
.cardx.kind-assassin { background: radial-gradient(120% 120% at 50% 0%, #2a2436 0%, #0a0810 55%, #050407 100%); color: #ffd9df; box-shadow: 0 4px 0 #000, 0 0 0 1.5px color-mix(in srgb, var(--red) 30%, transparent), 0 12px 26px -12px rgba(0, 0, 0, 0.6); }
.cardx.kind-assassin .word { color: #ffe7eb; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.cardx.kind-assassin .cardx__mark { color: var(--red); }
.cardx.kind-red .word, .cardx.kind-blue .word { text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18); }

.cardx.just-revealed { animation: card-reveal 0.5s var(--ease) both; }
@keyframes card-reveal {
  0% { transform: rotateX(-32deg) scale(0.88); filter: brightness(1.7) saturate(1.2); }
  55% { transform: rotateX(0) scale(1.07); filter: brightness(1.1); }
  100% { transform: none; filter: none; }
}

/* ── Live clue banner ────────────────────────────────────────────────────── */
.clue-banner {
  margin-bottom: 14px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--hard-sm), 0 14px 34px -16px rgba(0, 0, 0, 0.5);
  border: 0;
}
.clue-banner--red {
  background: linear-gradient(180deg, color-mix(in srgb, var(--red) 86%, #fff) 0%, var(--red) 42%);
  color: var(--red-ink);
}
.clue-banner--blue {
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 86%, #fff) 0%, var(--blue) 42%);
  color: var(--blue-ink);
}
.clue-banner__inner {
  display: grid; justify-items: center; gap: 7px;
  padding: 16px 16px 13px; text-align: center;
}
.clue-banner__team {
  font-family: var(--head); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.95;
  padding: 4px 12px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.16);
}
.clue-banner--blue .clue-banner__team { background: rgba(255, 255, 255, 0.22); }
.clue-banner__main {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(12px, 3vw, 20px); flex-wrap: nowrap; width: 100%;
  max-width: 100%; min-width: 0;
}
.clue-banner__word {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.8rem, 8vw, 3.4rem);
  line-height: 1; letter-spacing: 0.01em;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
  hyphens: none; word-break: keep-all; overflow-wrap: normal;
  max-width: 100%; min-width: 0;
}
.clue-banner--blue .clue-banner__word { text-shadow: 0 2px 0 rgba(255, 255, 255, 0.18); }
.clue-banner__word--single {
  white-space: nowrap;
  font-size: clamp(
    1.45rem,
    calc((min(100vw, var(--maxw)) - 108px) / max(var(--clue-chars, 6), 4) * 1.05),
    2.9rem
  );
}
.clue-banner__word--compound {
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.04;
  text-wrap: balance;
}
.clue-banner__num {
  flex: none;
  min-width: 1.4em; height: 1.4em; padding: 0 0.2em;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.6rem, 6.5vw, 2.7rem);
  line-height: 1;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.24);
  border: 2.5px solid rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), 0 4px 0 rgba(0, 0, 0, 0.12);
}
.clue-banner--blue .clue-banner__num { background: rgba(255, 255, 255, 0.4); border-color: rgba(255, 255, 255, 0.7); }
.clue-banner__meta {
  font-family: var(--head); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.95;
}
.clue-banner__actions {
  display: flex; justify-content: center;
  padding: 0 14px 14px;
}
.clue-banner__pass {
  background: rgba(0, 0, 0, 0.24); color: inherit;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.22);
  font-weight: 800;
}
.clue-banner--blue .clue-banner__pass { background: rgba(255, 255, 255, 0.3); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.14); }
.clue-banner__pass:active { box-shadow: 0 0 0 rgba(0, 0, 0, 0.22); }
.clue-banner--fresh { animation: clue-pop 0.6s var(--ease); }
@keyframes clue-pop {
  0% { transform: scale(0.9) translateY(-8px); opacity: 0; }
  55% { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ── Mission panel ───────────────────────────────────────────────────────── */
.mission-panel { display: grid; gap: 12px; padding: 16px 16px 14px; border-radius: var(--radius); }
.mission-panel__label {
  margin: 0 0 8px; font-family: var(--head); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
}
.mission-panel__active { display: grid; gap: 10px; }
.mission-panel__active--live { gap: 12px; }
.mission-panel__active--ended { display: flex; flex-wrap: wrap; gap: 8px; }
.mission-panel__active--wait { font-size: 0.98rem; font-weight: 700; }
.mission-panel__trail-wrap { display: grid; gap: 8px; border-top: 1.5px dashed var(--line); padding-top: 12px; }
.mission-panel__trail-label {
  margin: 0; font-family: var(--head); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
}
.mission-panel__trail-empty { margin: 0; }
.mission-trail {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.mission-chip {
  flex: 0 0 auto; display: grid; gap: 2px; min-width: 92px; max-width: 156px;
  padding: 9px 12px; border-radius: var(--radius-sm); border: 0;
  background: var(--panel-2); box-shadow: inset 0 0 0 1.5px var(--line); scroll-snap-align: start;
}
.mission-chip--clue.red { box-shadow: inset 0 0 0 2px var(--red); background: color-mix(in srgb, var(--red) 12%, var(--panel)); }
.mission-chip--clue.blue { box-shadow: inset 0 0 0 2px var(--blue); background: color-mix(in srgb, var(--blue) 12%, var(--panel)); }
.mission-chip--guess.hit { box-shadow: inset 0 0 0 2px var(--good); }
.mission-chip--guess.wrong { box-shadow: inset 0 0 0 2px var(--danger); }
.mission-chip--guess.neutral { box-shadow: inset 0 0 0 2px var(--neutral-deep); }
.mission-chip--guess.assassin { background: #16121c; color: #ffd9df; box-shadow: inset 0 0 0 2px var(--red-deep); }
.mission-chip__kind {
  font-family: var(--head); font-size: 0.56rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3);
}
.mission-chip__word {
  font-family: var(--head); font-weight: 600; font-size: 0.98rem; line-height: 1.12;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mission-chip__num {
  font-family: var(--display); font-weight: 600; font-size: 0.82rem; color: var(--accent);
}

.clue-display { display: grid; gap: 8px; flex: 1; min-width: 0; }
.clue-live { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.clue-meta {
  font-family: var(--head); font-size: 0.66rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3);
}
.clue-word {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.4rem, 5.5vw, 2.1rem); letter-spacing: -0.01em; line-height: 1.05;
}
.clue-num {
  min-width: 2.4em; height: 2.4em; padding: 0 0.4em;
  display: grid; place-items: center; border: 0;
  background: var(--surface-inset); color: var(--accent);
  font-family: var(--display); font-weight: 600; font-size: 1.1rem; border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.clue-form { display: grid; gap: 12px; flex: 1; min-width: 0; }
.mission-panel__count { max-width: 150px; }
.clue-form .field { min-width: 0; }
.guesses-left { color: var(--ink-2); font-size: 0.84rem; font-family: var(--head); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; }
.guesses-left b { color: var(--ink); font-weight: 800; font-size: 1.05rem; }

.guess-confirm {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 70; width: min(540px, calc(100vw - 20px));
  display: grid; gap: 12px; padding: 16px 18px;
  border: 2px solid var(--accent); border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel-solid) 94%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 50px -14px rgba(0, 0, 0, 0.55), var(--hard-sm);
  animation: guess-confirm-in 0.28s var(--ease);
}
.guess-confirm__main { display: grid; gap: 4px; }
.guess-confirm__label {
  font-family: var(--head); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
}
.guess-confirm__word { font-family: var(--display); font-size: 1.5rem; line-height: 1.1; font-weight: 600; }
.guess-confirm__hint { margin: 0; }
.guess-confirm__actions { display: grid; grid-template-columns: 1fr 1.2fr; gap: 10px; }
body.guess-confirm-open .app { padding-bottom: calc(124px + env(safe-area-inset-bottom)); }
@keyframes guess-confirm-in {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Legacy cluebar selectors */
.cluebar { margin-top: 0; padding: 14px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cluebar--active { border-left: 3px solid var(--accent); }

/* ── Side panel ──────────────────────────────────────────────────────────── */
/* ── Side panel — click-to-open overlay drawer ───────────────────────────── */
.side {
  display: grid; gap: 16px; align-content: start;
  position: fixed; top: 0; right: 0; z-index: 90;
  width: min(392px, 92vw); height: 100dvh; overflow-y: auto;
  padding: 18px clamp(14px, 2vw, 20px) calc(20px + env(safe-area-inset-bottom));
  background: var(--panel); border-left: 1px solid var(--line);
  box-shadow: -26px 0 64px -26px rgba(0, 0, 0, 0.6);
  transform: translateX(100%); transition: transform 0.34s var(--ease-out);
}
body.panel-open .side { transform: translateX(0); }
.side__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.side__title { font-family: var(--head); font-weight: 600; font-size: 1.1rem; }
.panel-scrim { position: fixed; inset: 0; z-index: 85; background: var(--scrim-bg); backdrop-filter: blur(3px); animation: fade 0.2s ease; }
.tabs { display: flex; gap: 4px; padding: 5px; background: var(--surface-inset); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.tabs button { flex: 1; appearance: none; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; font: inherit; font-family: var(--head); font-weight: 600; padding: 0.6em; font-size: 0.9rem; border-radius: 9px; transition: 0.14s var(--ease-out); }
.tabs button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); box-shadow: 0 3px 0 var(--accent-2); }
.tabs button:focus-visible { outline: none; box-shadow: inset var(--ring); }
.tabs button .tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 5px; margin-left: 6px;
  font-family: var(--head); font-size: 0.6rem; font-weight: 700;
  background: var(--red); color: var(--red-ink); border-radius: 999px; vertical-align: middle;
}

.team-col { display: grid; gap: 10px; }
.team-head { display: flex; align-items: center; justify-content: space-between; }
.team-head h3 { font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.team-head.red h3 { color: var(--red); }
.team-head.blue h3 { color: var(--blue); }
.roster { display: grid; gap: 6px; }
.player-chip .av { width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; font-size: 0.7rem; font-weight: 800; color: var(--av-on-color); flex: none; border: 1.5px solid rgba(0,0,0,0.12); }
.player-chip .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.player-chip .off { opacity: 0.4; }

.reaction-bar button { background: var(--panel-2); }
.pack-opt { background: var(--panel-2); }
.segmented button[aria-pressed="false"]:hover { background: var(--panel-3); color: var(--ink); }

/* Lobby team picker */
.lobby-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px) { .lobby-teams { grid-template-columns: 1fr; } }
.team-card { display: grid; gap: 12px; }
.team-card.red { border-top-color: var(--red); }
.team-card.blue { border-top-color: var(--blue); }
.team-card__head { display: flex; gap: 12px; align-items: flex-start; }
.team-card__sigil {
  width: 38px; height: 38px; display: grid; place-items: center; flex: none;
  font-size: 1.05rem; border-radius: 12px; border: 0;
  background: var(--surface-inset); color: var(--ink-2);
}
.team-card.red .team-card__sigil { color: var(--red); background: color-mix(in srgb, var(--red) 16%, var(--panel)); }
.team-card.blue .team-card__sigil { color: var(--blue); background: color-mix(in srgb, var(--blue) 16%, var(--panel)); }
.team-card__title { display: grid; gap: 4px; flex: 1; min-width: 0; }
.team-card h3 { font-size: 1.25rem; display: flex; align-items: center; gap: 8px; margin: 0; }
.team-name-row { display: flex; gap: 8px; align-items: center; }
.team-name-input { font-family: var(--head); font-weight: 600; min-width: 0; }
.team-col--red { border-left: 3px solid var(--red); padding-left: 10px; }
.team-col--blue { border-left: 3px solid var(--blue); padding-left: 10px; }
.team-card .ctas { display: flex; gap: 8px; flex-wrap: wrap; }
.team-card .ctas .btn.active {
  box-shadow: 0 0 0 3px var(--accent), 0 4px 0 var(--accent-2);
  background: var(--accent-soft);
  color: var(--ink);
}
.team-card .ctas .btn--red.active { background: var(--red); color: var(--red-ink); box-shadow: 0 0 0 3px var(--red-deep), 0 4px 0 var(--red-deep); }
.team-card .ctas .btn--blue.active { background: var(--blue); color: var(--blue-ink); box-shadow: 0 0 0 3px var(--blue-deep), 0 4px 0 var(--blue-deep); }
.team-card .ctas .btn[disabled] { background: var(--surface-inset); color: var(--ink-3); opacity: 1; box-shadow: 0 4px 0 var(--edge); }

.lobby-status { display: grid; gap: 10px; border-left: 5px solid var(--accent); }
.lobby-status__title { font-family: var(--head); font-weight: 600; font-size: 1.05rem; }
.lobby-status__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 640px) { .lobby-status__grid { grid-template-columns: 1fr; } }
.lobby-status__item {
  display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px;
  border-radius: var(--radius-sm); background: var(--surface-inset); border: 1px solid var(--line);
  font-size: 0.88rem; font-weight: 700;
}
.lobby-status__item--ok { box-shadow: inset 0 0 0 2px var(--good); background: color-mix(in srgb, var(--good) 14%, var(--panel-2)); border-color: transparent; }
.lobby-status__item--need { box-shadow: inset 0 0 0 2px var(--warn); background: color-mix(in srgb, var(--warn) 12%, var(--panel-2)); border-color: transparent; }
.lobby-status__mark { font-weight: 800; width: 1.1em; flex: none; }
.lobby-status__item--ok .lobby-status__mark { color: var(--good); }
.lobby-status__item--need .lobby-status__mark { color: var(--warn); }

.role-slots { display: grid; gap: 8px; }
.role-slot {
  display: flex; align-items: center; gap: 10px; padding: 11px 13px;
  border-radius: var(--radius-sm); border: 2px dashed var(--line-strong);
  background: var(--surface-inset); transition: border-color 0.2s, background 0.2s;
}
.role-slot--filled { border-style: solid; background: var(--panel-2); }
.role-slot--red.role-slot--filled { border-color: var(--red); background: color-mix(in srgb, var(--red) 10%, var(--panel-2)); }
.role-slot--blue.role-slot--filled { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, var(--panel-2)); }
.role-slot--open { border-color: var(--line); }
.role-slot__icon { font-size: 1.3rem; line-height: 1; }
.role-slot__body { display: grid; gap: 2px; min-width: 0; }
.role-slot__label { font-family: var(--head); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-3); }
.role-slot__name { font-weight: 700; color: var(--ink); word-break: break-word; }
.role-slot--open .role-slot__name { color: var(--ink-3); font-weight: 600; font-style: italic; }

.player-chip { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--radius-sm); background: var(--panel-2); border: 1.5px solid var(--line); font-size: 0.92rem; transition: border-color 0.15s, box-shadow 0.15s; flex-wrap: wrap; }
.player-chip.spy { box-shadow: inset 4px 0 0 var(--accent); }
.player-chip.you { border-color: var(--accent); background: var(--accent-soft); }
.player-chip--red.spy { box-shadow: inset 4px 0 0 var(--red); }
.player-chip--blue.spy { box-shadow: inset 4px 0 0 var(--blue); }
.role-badge {
  font-family: var(--head);
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 0.22em 0.6em; border-radius: 999px; white-space: nowrap;
}
.role-badge--spy { background: color-mix(in srgb, var(--accent) 26%, var(--panel)); color: var(--ink); }
.role-badge--op { background: var(--surface-inset); color: var(--ink-2); }
.player-chip .tag { font-family: var(--head); font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); }
.tag--host { color: var(--accent); }
.tag--bot { color: var(--ink-3); }

/* Log + chat */
.feed { display: grid; gap: 8px; max-height: 380px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; }
.feed::-webkit-scrollbar { width: 7px; }
.feed::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.log-line { font-size: 0.86rem; font-weight: 700; color: var(--ink-2); line-height: 1.45; padding: 8px 11px; border-radius: 10px; background: var(--panel-2); border-left: 3px solid var(--line-strong); }
.log-line.red { border-left-color: var(--red); }
.log-line.blue { border-left-color: var(--blue); }
.log-line.end { border-left-color: var(--accent); color: var(--ink); font-weight: 800; }

.chat-msg { display: flex; gap: 8px; font-size: 0.9rem; }
.chat-msg .nm { font-weight: 800; flex: none; }
.chat-msg .tx { color: var(--ink); word-break: break-word; font-weight: 600; }
.chat-msg.reaction .tx { font-size: 1.4rem; }
.chat-form { display: flex; gap: 8px; margin-top: 10px; }
.chat-form .input { flex: 1; }
.reaction-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.reaction-bar button { appearance: none; border: 0; background: var(--panel-2); box-shadow: 0 3px 0 var(--edge); border-radius: 10px; cursor: pointer; font-size: 1.1rem; padding: 5px 9px; transition: 0.1s var(--ease-out); }
.reaction-bar button:hover { filter: brightness(1.1); }
.reaction-bar button:active { transform: translateY(3px); box-shadow: 0 0 0 var(--edge); }

/* ── Settings / modal ────────────────────────────────────────────────────── */
.scrim { position: fixed; inset: 0; background: var(--scrim-bg); z-index: 40; display: grid; place-items: center; padding: 18px; animation: fade 0.18s ease; backdrop-filter: blur(4px); }
@keyframes fade { from { opacity: 0; } }
.modal { width: min(580px, 100%); max-height: 90vh; overflow-y: auto; animation: rise 0.3s var(--ease); }
@keyframes rise { from { transform: translateY(20px) scale(0.97); opacity: 0; } }
.modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.modal__head h2 { font-size: 1.4rem; }
.settings-grid { display: grid; gap: 20px; }
.pack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; }
.pack-opt { text-align: left; cursor: pointer; padding: 13px; border-radius: var(--radius-sm); border: 2px solid var(--line); background: var(--panel-2); display: grid; gap: 4px; transition: 0.14s var(--ease-out); box-shadow: 0 3px 0 var(--edge); }
.pack-opt:hover { border-color: var(--accent); filter: brightness(1.04); }
.pack-opt:active { transform: translateY(3px); box-shadow: 0 0 0 var(--edge); }
.pack-opt[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 3px 0 var(--accent-2); }
.pack-opt .pemoji { font-size: 1.5rem; }
.pack-opt b { font-family: var(--head); font-size: 0.98rem; font-weight: 600; }
.pack-opt small { color: var(--ink-3); font-size: 0.76rem; line-height: 1.35; font-weight: 600; }
.pack-opt--toofar { border-color: #7a1320; }
.pack-opt--toofar:hover { border-color: #c81e36; }
.pack-opt--toofar[aria-pressed="true"] { border-color: #e11d48; background: rgba(225, 29, 72, 0.12); box-shadow: 0 3px 0 #7a1320; }

.house-rules { display: grid; gap: 10px; }
.check-row { display: flex; align-items: center; gap: 11px; font-size: 0.9rem; cursor: pointer; font-weight: 700; }
.check-row input { width: 18px; height: 18px; accent-color: var(--accent); }

.turn-pill.turn-swap { animation: turn-swap 0.5s var(--ease); }
@keyframes turn-swap {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); color: var(--accent); }
  100% { transform: scale(1); }
}
.team-score.team-pulse { animation: team-pulse 0.6s var(--ease); }
@keyframes team-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.scoreboard-wrap .team-score.active { transition: box-shadow 0.25s, transform 0.25s; }

.dev-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; border-left: 4px solid var(--accent); }
.dev-bar__label { font-family: var(--head); font-weight: 600; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; }
.dev-bar__hint { flex: 1; min-width: 140px; font-weight: 600; }
.dev-bar__btns { display: flex; gap: 6px; flex-wrap: wrap; }
.dev-bar__btns .btn.active { box-shadow: 0 0 0 3px var(--accent), 0 3px 0 var(--edge); }
.dev-mode-field { padding: 13px; border: 2px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--panel-2); }
.check-row--dev { align-items: flex-start; }
.check-row--dev b { color: var(--accent); }

.social-panel { display: grid; gap: 16px; }
.social-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.social-panel__google { min-height: 44px; }
.social-user { display: flex; align-items: flex-start; gap: 12px; }
.social-user__av-btn {
  appearance: none; border: 0; padding: 0; background: transparent; cursor: pointer;
  border-radius: 50%; line-height: 0; flex: none;
}
.social-user__av-btn:hover .social-user__av,
.social-user__av-btn:focus-visible .social-user__av { border-color: var(--accent); box-shadow: var(--ring); }
.social-user__av-btn:focus-visible { outline: none; }
.social-user__av { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line-strong); display: block; }
.social-user__av--ph { display: grid; place-items: center; background: var(--panel-2); font-size: 1.4rem; width: 58px; height: 58px; }
.social-user__av-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.social-list__who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.social-list__who > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social-list__av { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--line); flex: none; }
.social-list__av.social-user__av--ph { font-size: 0.78rem; width: 26px; height: 26px; }
.social-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.social-stat { flex: 1; min-width: 92px; padding: 12px; border: 0; box-shadow: inset 0 0 0 1.5px var(--line); border-radius: var(--radius-sm); background: var(--panel-2); text-align: center; }
.social-stat__val { display: block; font-family: var(--display); font-size: 1.3rem; font-weight: 600; color: var(--accent); }
.social-stat__lbl { font-family: var(--head); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); font-weight: 600; }
.social-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.social-cols h4 { font-family: var(--head); font-size: 0.84rem; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 8px; color: var(--ink-2); font-weight: 600; }
.social-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.social-list__item { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.88rem; font-weight: 700; padding: 7px 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }

/* Toggle switch */
.timer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; position: relative; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track { width: 50px; height: 28px; border-radius: 999px; background: var(--surface-inset); border: 2px solid var(--line-strong); position: relative; transition: background 0.15s, border-color 0.15s; }
.switch .thumb { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink-2); transition: transform 0.18s var(--ease), background 0.15s; }
.switch input:checked + .track { background: var(--accent); border-color: var(--accent-2); }
.switch input:checked + .track .thumb { transform: translateX(22px); background: var(--accent-ink); }
.switch input:focus-visible + .track { box-shadow: var(--ring); }
.switch-lbl { font-family: var(--head); font-size: 0.78rem; font-weight: 600; color: var(--ink-2); min-width: 26px; text-transform: uppercase; }

/* Range slider */
.slider-row { display: flex; align-items: center; gap: 14px; margin-top: 4px; transition: opacity 0.2s; }
.slider-row[data-disabled] { opacity: 0.4; }
.slider-val { font-family: var(--display); font-weight: 600; font-variant-numeric: tabular-nums; min-width: 56px; text-align: right; color: var(--accent); }
input[type="range"] {
  -webkit-appearance: none; appearance: none; flex: 1; height: 8px; border-radius: 999px;
  background: var(--line); outline: none; cursor: pointer; border: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--panel-solid); box-shadow: 0 3px 0 var(--accent-2); cursor: pointer;
  transition: transform 0.1s var(--ease-out);
}
input[type="range"]::-webkit-slider-thumb:active { transform: scale(0.92); }
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 3px solid var(--panel-solid); cursor: pointer; }
input[type="range"]:focus-visible { box-shadow: var(--ring); }
input[type="range"]:disabled { background: var(--line-strong); cursor: not-allowed; }

/* ── Win banner ──────────────────────────────────────────────────────────── */
.win-banner { text-align: center; display: grid; gap: 8px; padding: 28px 24px; border-radius: var(--radius-lg); position: relative; overflow: hidden; }
.win-banner::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0.16; pointer-events: none;
  background: radial-gradient(80% 120% at 50% -10%, currentColor 0%, transparent 60%);
}
.win-banner > * { position: relative; z-index: 1; }
.win-banner__label {
  font-family: var(--head); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin: 0;
}
.win-banner h2 {
  font-family: var(--display); font-weight: 600; font-size: clamp(2rem, 7vw, 3rem);
  letter-spacing: -0.01em; margin: 0; animation: win-bounce 0.7s var(--ease) both;
}
@keyframes win-bounce {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}
.win-banner.red { color: var(--red); box-shadow: inset 0 0 0 2.5px var(--red); }
.win-banner.blue { color: var(--blue); box-shadow: inset 0 0 0 2.5px var(--blue); }
.win-banner.red h2 { color: var(--red); }
.win-banner.blue h2 { color: var(--blue); }
.win-banner .muted, .win-banner__label { color: var(--ink-2); }

/* ── Toasts ──────────────────────────────────────────────────────────────── */
.toast-stack { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 60; display: grid; gap: 8px; width: min(420px, calc(100% - 28px)); }
.toast {
  background: var(--panel-solid); border: 0; border-radius: var(--radius-sm);
  padding: 13px 17px 13px 19px; box-shadow: var(--hard); animation: rise 0.24s var(--ease);
  font-size: 0.92rem; font-weight: 700; position: relative; border-left: 5px solid var(--line-strong);
}
.toast.err { border-left-color: var(--red); }
.toast.ok { border-left-color: var(--good); }

/* Connecting */
.loader {
  display: grid; gap: 14px; justify-items: center; text-align: center;
  padding: clamp(48px, 12vh, 100px) 24px;
}
.loader__stamp { display: none; }
.loader__code {
  font-family: var(--mono); font-size: clamp(1.4rem, 4.5vw, 1.9rem);
  letter-spacing: 0.22em; color: var(--accent); font-weight: 700;
}
.loader__status {
  font-family: var(--head); font-size: 0.74rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 600;
}
.loader__dots::after {
  content: ""; animation: dots 1.4s steps(4, end) infinite;
}
@keyframes dots {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75% { content: "..."; }
}

.confetti { position: fixed; inset: 0; z-index: 55; pointer-events: none; }

.empty { text-align: center; color: var(--ink-3); padding: 24px; font-size: 0.92rem; font-weight: 700; }
.hint-banner { display: flex; align-items: center; gap: 11px; padding: 12px 15px; border-radius: var(--radius-sm); background: var(--panel-2); border: 2px dashed var(--line-strong); color: var(--ink-2); font-size: 0.9rem; font-weight: 700; margin-bottom: 14px; }
.hint-banner--league { border-style: solid; border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }

.league-panel { display: grid; gap: 16px; }
.league-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.league-panel__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.league-code { font-family: var(--mono); letter-spacing: 0.08em; color: var(--accent); font-size: 0.92em; }
.league-forms { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .league-forms { grid-template-columns: 1fr; } }
.league-form { display: grid; gap: 12px; padding: 15px; }
.league-form h4 { margin: 0; font-size: 1rem; }
.league-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 800px) { .league-grid { grid-template-columns: 1fr; } }
.league-grid h4 { margin: 0 0 8px; font-size: 0.95rem; color: var(--ink-2); }
.league-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; font-weight: 700; }
.league-table th, .league-table td { padding: 7px 9px; text-align: left; border-bottom: 1px solid var(--line); }
.league-table th { color: var(--ink-3); font-weight: 700; font-size: 0.76rem; }
.league-games { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.league-game { display: grid; gap: 2px; padding: 9px 11px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 0.88rem; }
.league-game__meta { font-weight: 800; }

/* ── Mobile-first play layout ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .topbar { margin-bottom: 10px; gap: 8px; }
  .topbar__left, .topbar__right { gap: 8px; }
  .room-code { font-size: 0.82rem; letter-spacing: 0.12em; padding: 6px 11px; }
  .icon-btn { width: 40px; height: 40px; }

  .scoreboard-wrap { margin-bottom: 10px; }
  .mission-status::before { margin-bottom: 5px; }
  .scoreboard { padding: 7px; gap: 7px; }
  .team-score { padding: 9px 11px; gap: 9px; }
  .team-score .num { font-size: 1.7rem; }
  .team-score .meta b { font-size: 0.72rem; }
  .turn-pill { min-width: 0; padding: 0 4px; }
  .turn-pill .who { font-size: 0.72rem; line-height: 1.25; }

  .mission-panel { padding: 13px; gap: 10px; }
  .mission-chip { min-width: 100px; padding: 9px 11px; }
  .mission-chip__word { font-size: 1rem; }

  .board-frame { padding: 10px 10px 12px; }
  .board-frame__title strong { font-size: 1.05rem; }
  .board { gap: 6px; padding: 7px; }
  .cardx { padding: 10px 3px 7px; aspect-ratio: 1 / 1.04; }
  .cardx__ref { font-size: 0.5rem; top: 4px; left: 5px; }
  .cardx .word--single {
    font-size: min(0.74rem, calc((100cqw - 6px) / max(var(--word-chars, 5), 3) * 1.52));
  }
  .cardx .word--multi { font-size: min(0.68rem, 9.8cqw); }
  .cardx .word--emoji { font-size: min(1.45rem, calc(100cqw * 0.44)); }

  .cardx.clickable:hover { transform: translateY(-3px) scale(1.02); }
  .cardx.clickable:active { transform: scale(0.97); }
  .cardx--pending { transform: translateY(-2px) scale(1.03); }

  .guess-confirm { width: calc(100vw - 16px); padding: 13px 15px; }
  .guess-confirm__word { font-size: 1.6rem; }
  body.guess-confirm-open .app { padding-bottom: calc(132px + env(safe-area-inset-bottom)); }

  .clue-banner { margin-bottom: 10px; }
  .clue-banner__inner { padding: 16px 11px 12px; gap: 6px; }
  .clue-banner__word { font-size: clamp(1.55rem, 7.5vw, 2.7rem); }
  .clue-banner__word--single {
    font-size: clamp(
      1.3rem,
      calc((100vw - 88px) / max(var(--clue-chars, 6), 4) * 1.02),
      2.5rem
    );
  }
  .clue-banner__num { font-size: clamp(1.45rem, 6vw, 2.3rem); border-radius: 12px; }

  .dev-bar { flex-direction: column; align-items: stretch; }
  .dev-bar__btns { display: flex; flex-wrap: wrap; gap: 6px; }
}

@media (max-width: 520px) {
  .scoreboard {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "turn turn" "red blue";
  }
  .turn-pill { grid-area: turn; width: 100%; padding: 4px 0 9px; border-bottom: 1.5px dashed var(--line); }
  .team-score--red { grid-area: red; }
  .team-score--blue { grid-area: blue; }
  .team-score--blue .meta { text-align: right !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.05ms !important; }
  .cardx--pending .cardx__pick-chip { animation: none; }
  .cardx.clickable:hover { transform: none; }
}