/* ==========================================================================
   Game stages
   ========================================================================== */
.game-box:empty { display: none; }
.game-box.is-final { opacity: .9; }
.hud { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

/* ---------- shared board players / clocks ---------- */
.bplayer { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 6px 10px; border-radius: var(--r-md); transition: background-color var(--dur-base); }
.bplayer.active { background: var(--surface-2); }
.clock { font-size: 22px; font-weight: 700; padding: 4px 14px; border-radius: 12px; background: var(--surface-2); min-width: 96px; text-align: center; font-variant-numeric: tabular-nums; }
.clock.run { background: var(--fg); color: var(--bg); }
.clock.low.run { background: var(--bad); color: #fff; }
.side-col { display: flex; flex-direction: column; gap: var(--sp-4); }
.movelist { max-height: 340px; overflow: auto; padding: 8px 12px; border-radius: var(--r-md); background: var(--surface-2); }
.movelist ol { margin: 0; padding-left: 28px; display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
.movelist li { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; color: var(--fg-3); font-size: 13px; }
.movelist .mv { color: var(--fg); font-weight: 600; }
.movelist li:last-child .mv:last-child { color: var(--accent); }

/* ---------- chess ---------- */
.chess { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--sp-6); align-items: start; }
.board-col { display: flex; flex-direction: column; gap: var(--sp-3); width: 100%; max-width: min(640px, calc(100vh - 230px)); margin: 0 auto; }
.board { --sq-l: #EEDCC0; --sq-d: #B58863; position: relative; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); aspect-ratio: 1; border-radius: 12px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; container-type: inline-size; box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.sq { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; }
.sq.l { background: var(--sq-l); } .sq.d { background: var(--sq-d); }
.board.glassy .sq.l { background: rgb(255 255 255 / .2); } .board.glassy .sq.d { background: rgb(255 255 255 / .06); }
.sq.last::before, .sq.sel::before, .sq.pre::before, .sq.hover::before { content: ''; position: absolute; inset: 0; }
.sq.last::before { background: rgb(255 214 102 / .42); }
.sq.sel::before { background: rgb(255 170 60 / .55); }
.sq.pre::before { background: rgb(90 169 255 / .45); }
.sq.hover::before { box-shadow: inset 0 0 0 4px rgb(255 255 255 / .75); }
.sq.check::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgb(255 60 60 / .9), rgb(255 60 60 / 0) 70%); }
.sq .dot { position: absolute; width: 30%; height: 30%; border-radius: 50%; background: rgb(20 30 20 / .28); z-index: 2; pointer-events: none; }
.sq .ring { position: absolute; inset: 4%; border-radius: 50%; box-shadow: inset 0 0 0 6cqi rgb(20 30 20 / .28); z-index: 2; pointer-events: none; }
.pc { position: relative; z-index: 3; font-family: var(--font-chess); font-size: 9.6cqi; line-height: 1; cursor: grab; will-change: transform; }
.pc.w { color: #FFFDF8; -webkit-text-stroke: 1.2px #2c2722; text-shadow: 0 2px 2px rgb(0 0 0 / .3); }
.pc.b { color: #26282E; -webkit-text-stroke: .6px rgb(255 255 255 / .35); text-shadow: 0 2px 2px rgb(0 0 0 / .35); }
.pc.anim { transition: transform 170ms var(--ease); }
.pc.lifted { opacity: .3; }
.ghost-pc { position: fixed; left: 0; top: 0; z-index: var(--z-toast); pointer-events: none; display: grid; place-items: center; font-family: var(--font-chess); line-height: 1; filter: drop-shadow(0 10px 14px rgb(0 0 0 / .45)); }
.coord { position: absolute; z-index: 2; font-size: 2.4cqi; font-weight: 700; opacity: .75; pointer-events: none; }
.coord.r { left: 3px; top: 2px; } .coord.f { right: 4px; bottom: 1px; }
.sq.l .coord { color: var(--sq-d); } .sq.d .coord { color: var(--sq-l); }
.promo { display: flex; gap: 12px; justify-content: center; }
.promo button { width: 76px; height: 76px; border-radius: 18px; display: grid; place-items: center; background: var(--surface-2); font-family: var(--font-chess); font-size: 48px; }
.promo button:hover { background: var(--surface-3); }

/* ---------- checkers ---------- */
.board.ck .sq.l { background: #F0D9B5; } .board.ck .sq.d { background: #7A5236; }
.ck .sq { grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.disc { position: relative; z-index: 3; width: 78%; height: auto; aspect-ratio: 1; min-height: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: transform 170ms var(--ease); }
.disc.w { background: radial-gradient(circle at 35% 30%, #fff, #e8e2d6 55%, #bfb6a5); box-shadow: inset 0 -3px 0 rgb(0 0 0 / .18), 0 3px 6px rgb(0 0 0 / .35); }
.disc.b { background: radial-gradient(circle at 35% 30%, #5b5f68, #2a2d33 55%, #15171b); box-shadow: inset 0 -3px 0 rgb(0 0 0 / .35), 0 3px 6px rgb(0 0 0 / .45); }
.disc::after { content: ''; position: absolute; inset: 18%; border-radius: 50%; box-shadow: inset 0 0 0 2px rgb(0 0 0 / .12); }
.disc.b::after { box-shadow: inset 0 0 0 2px rgb(255 255 255 / .12); }
.disc .ico { width: 46%; height: auto; aspect-ratio: 1; stroke-width: 2.2; position: relative; z-index: 2; }
.disc.w .ico { color: #b5832a; } .disc.b .ico { color: #f4c542; }
.disc.must { box-shadow: 0 0 0 3px var(--accent), 0 3px 6px rgb(0 0 0 / .35); }
.sq.captured .disc { opacity: .35; }

/* ---------- connect four ---------- */
.c4 { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }
.c4-top { display: flex; width: 100%; max-width: 560px; justify-content: space-between; align-items: center; gap: var(--sp-3); }
.c4-board { position: relative; width: 100%; max-width: 560px; aspect-ratio: 7 / 6; padding: 2.4%; border-radius: 22px; background: linear-gradient(180deg, #3B74E6, #2753BF); box-shadow: inset 0 2px 0 rgb(255 255 255 / .25), 0 18px 40px -16px rgb(39 83 191 / .6); display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(6, 1fr); gap: 2%; }
.c4-cell { position: relative; border-radius: 50%; background: #10275F; box-shadow: inset 0 3px 6px rgb(0 0 0 / .5); overflow: visible; }
.c4-disc { position: absolute; inset: 0; border-radius: 50%; }
.c4-disc.p1 { background: radial-gradient(circle at 35% 30%, #fff1a6, #FFD23F 45%, #e0ab00); }
.c4-disc.p2 { background: radial-gradient(circle at 35% 30%, #ffb3c1, #FF4D6D 45%, #c9183a); }
.c4-disc.drop { animation: drop var(--dd, 380ms) cubic-bezier(.4, 0, .9, .6); }
@keyframes drop { from { transform: translateY(var(--from, -500%)); } 80% { transform: translateY(4%); } }
.c4-disc.win { box-shadow: 0 0 0 4px #fff, 0 0 18px #fff; }
.c4-cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, 1fr); z-index: 5; }
.c4-cols button { border-radius: 12px; }
.c4-cols button:hover { background: rgb(255 255 255 / .08); }
.c4-mydisc { width: 26px; height: 26px; border-radius: 50%; display: inline-block; }

/* ---------- battleship ---------- */
.bs { display: flex; flex-direction: column; gap: var(--sp-4); }
.bs-grids { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.bs-grid-wrap h3 { margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.bs-grid { display: grid; grid-template-columns: repeat(10, 1fr); aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: color-mix(in srgb, #2EC4B6 30%, var(--line-2)); box-shadow: inset 0 0 0 1px var(--line); gap: 1px; padding: 1px; user-select: none; touch-action: manipulation; }
.bs-cell { position: relative; background: color-mix(in srgb, #2EC4B6 9%, var(--ink-1)); display: grid; place-items: center; }
.bs-grid.target .bs-cell.free { cursor: crosshair; }
.bs-grid.target .bs-cell.free:hover { background: color-mix(in srgb, var(--accent) 25%, var(--surface)); }
.bs-cell.ship { background: #8FA3B8; }
:root[data-theme='light'] .bs-cell.ship { background: #6B7F94; }
.bs-cell.ghost-ok { background: color-mix(in srgb, var(--ok) 45%, var(--surface)); }
.bs-cell.ghost-bad { background: color-mix(in srgb, var(--bad) 45%, var(--surface)); }
.bs-cell.miss::after { content: ''; width: 22%; height: 22%; border-radius: 50%; background: var(--fg-3); }
.bs-cell.hit { background: color-mix(in srgb, var(--bad) 30%, var(--surface)); }
.bs-cell.hit::after { content: ''; width: 56%; height: 56%; background: linear-gradient(45deg, transparent 42%, var(--bad) 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, var(--bad) 42% 58%, transparent 58%); }
.bs-cell.sunk { background: var(--bad); }
.bs-cell.sunk::after { content: ''; width: 56%; height: 56%; background: linear-gradient(45deg, transparent 42%, #fff 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, #fff 42% 58%, transparent 58%); }
.bs-cell.last { box-shadow: inset 0 0 0 2px var(--accent); }
.bs-cell.splash::before { content: ''; position: absolute; inset: 10%; border-radius: 50%; border: 2px solid var(--accent); animation: splash 600ms var(--ease) forwards; }
@keyframes splash { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.fleet { display: flex; flex-wrap: wrap; gap: 8px; }
.fleet .sh { display: flex; gap: 2px; padding: 4px; border-radius: 6px; cursor: pointer; }
.fleet .sh i { width: 14px; height: 14px; border-radius: 3px; background: #8FA3B8; }
.fleet .sh.done i { background: var(--surface-3); }
.fleet .sh.cur { box-shadow: 0 0 0 2px var(--accent); }

/* ---------- arm wrestling ---------- */
.arm { display: flex; flex-direction: column; gap: var(--sp-4); align-items: stretch; }
.arm-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-4); }
.arm-side { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.arm-side.right { flex-direction: row-reverse; text-align: right; }
.arm-side.right .row { justify-content: flex-end; }
.arm-side .combo { font-size: 12px; font-weight: 700; color: var(--fg-3); }
.arm-side .combo b { color: var(--accent); font-size: 16px; }
.arm-round { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 13px; }
.arm-round strong { font-size: 18px; }
.pips { display: inline-flex; gap: 4px; }
.pips i { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); }
.pips i.on { background: var(--accent); }
.arm-main { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(240px, 1fr); gap: var(--sp-6); align-items: center; }
.arm-arena { position: relative; display: grid; place-items: center; }
.arm-gauge { width: 100%; max-width: 560px; }
.arm-gauge .track { fill: none; stroke: var(--surface-3); stroke-width: 18; stroke-linecap: round; }
.arm-gauge .mine { fill: none; stroke: var(--accent); stroke-width: 18; stroke-linecap: round; }
.arm-gauge .theirs { fill: none; stroke: var(--info); stroke-width: 18; stroke-linecap: round; }
.arm-gauge .tick { stroke: var(--fg-3); stroke-width: 2; }
.arm-gauge .knob-dot { fill: var(--fg); stroke: var(--bg); stroke-width: 4; }
.arm-gauge .knob-glow { fill: var(--fg); opacity: .12; }
.arm-gauge .knob[data-side='mine'] .knob-dot, .arm-gauge .knob[data-side='mine'] .knob-glow { fill: var(--accent); }
.arm-gauge .knob[data-side='theirs'] .knob-dot, .arm-gauge .knob[data-side='theirs'] .knob-glow { fill: var(--info); }
.arm-gauge .knob-glow { opacity: .25; }
.arm-gauge .pos-val { fill: var(--fg); font: 800 44px var(--font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.arm-gauge .pos-val[data-side='mine'] { fill: var(--accent); } .arm-gauge .pos-val[data-side='theirs'] { fill: var(--info); }
.arm-gauge .pos-lbl { fill: var(--fg-3); font: 600 13px var(--font); }
.arm-gauge .lbl { fill: var(--fg-3); font-size: 13px; font-weight: 600; font-family: var(--font); }
.arm-overlay { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity var(--dur-base); }
.arm-overlay.show { opacity: 1; }
.big-count { font-size: clamp(56px, 10vw, 110px); font-weight: 800; letter-spacing: -0.04em; color: var(--fg); text-shadow: 0 6px 30px rgb(0 0 0 / .35); animation: pop var(--dur-slow) var(--spring); }
.big-count.small { font-size: clamp(26px, 4vw, 42px); }
.arm-feedback { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); pointer-events: none; }
.fb { display: inline-block; font-weight: 800; font-size: 26px; letter-spacing: -0.02em; animation: fb 900ms var(--ease) forwards; white-space: nowrap; }
.fb.perfect { color: var(--accent); } .fb.hit { color: var(--ok); } .fb.miss { color: var(--bad); }
@keyframes fb { 0% { opacity: 0; transform: scale(.6); } 20% { opacity: 1; transform: scale(1.12); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
.arm-controls { display: grid; place-items: center; gap: var(--sp-4); }
.skill-ring { position: relative; width: 230px; height: 230px; border-radius: 50%; cursor: pointer; }
.skill-ring.reverse .needle { stroke: var(--info); }
.skill.fogged .zone, .skill.fogged .perfect { opacity: 0; transition: opacity 120ms; }
.press-btn { width: min(320px, 100%); min-height: 76px; border-radius: 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none;
  color: var(--gold-ink); background: linear-gradient(180deg, var(--gold-2), var(--gold) 55%, color-mix(in srgb, var(--gold) 80%, #000)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .55), inset 0 -3px 8px rgb(120 70 0 / .35), 0 10px 26px -12px var(--gold); transition: transform 70ms var(--ease), filter 120ms; }
.press-btn.down { transform: scale(.95) translateY(2px); filter: brightness(.95); }
.press-btn .press-l { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: .04em; }
.press-btn .press-k { font-size: 11px; font-weight: 700; opacity: .7; }
.press-btn.gold { animation: surge-pulse .5s ease-in-out infinite alternate; background: linear-gradient(180deg, #fff3c4, #ffd34a 55%, #ff9a1c); box-shadow: 0 0 0 4px rgb(255 211 74 / .35), 0 0 40px #ffb020; }
@keyframes surge-pulse { to { transform: scale(1.04); } }
.surge-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 99px; font-weight: 800; color: #2a1e08; background: #ffd34a; animation: pop var(--dur-base) var(--spring); }
.arm-mod { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.mod-reveal { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 99px; font-weight: 800; background: rgb(0 0 0 / .5); color: var(--gold-2); animation: pop var(--dur-slow) var(--spring); }
.skill { width: 100%; height: 100%; transition: transform 80ms var(--ease); }
.skill .ring { fill: none; stroke: var(--surface-3); stroke-width: 14; }
.skill .zone { fill: none; stroke: var(--accent); stroke-width: 18; transition: d 120ms; }
.skill .perfect { fill: none; stroke: #fff; stroke-width: 18; opacity: .85; }
:root[data-theme='light'] .skill .perfect { stroke: #1d2026; opacity: .6; }
.skill .needle { stroke: var(--fg); stroke-width: 4; stroke-linecap: round; opacity: 0; }
.skill.live .needle { opacity: 1; }
.skill .hub { fill: var(--surface-2); }
.skill .combo-n { fill: var(--fg); font-size: 40px; font-weight: 800; font-family: var(--font); }
.skill .combo-l { fill: var(--fg-3); font-size: 12px; font-weight: 600; font-family: var(--font); }
.skill.flash-perfect .ring { stroke: var(--accent); animation: flash 400ms var(--ease); }
.skill.flash-hit .ring { stroke: var(--ok); animation: flash 400ms var(--ease); }
.skill.flash-miss .ring { stroke: var(--bad); animation: flash 400ms var(--ease); }
@keyframes flash { from { stroke-width: 24; } }

/* ---------- spy ---------- */
.spy-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--sp-6); }
.role-card { width: 100%; min-height: 160px; padding: var(--sp-6); border-radius: var(--r-xl); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; background: linear-gradient(160deg, color-mix(in srgb, #9B8CFF 22%, var(--surface)), var(--surface)); box-shadow: inset 0 0 0 1px var(--line); }
.role-card .role-ic { color: #9B8CFF; }
.role-card .role-loc { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.role-card.open.spy { background: linear-gradient(160deg, color-mix(in srgb, var(--bad) 25%, var(--surface)), var(--surface)); }
.role-card.open.spy .role-ic, .role-card.open.spy .role-loc { color: var(--bad); }
.hints { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 8px; }
.hints span { padding: 4px 10px; border-radius: 99px; background: rgb(255 255 255 / .1); font-size: 13px; font-weight: 600; }
:root[data-theme='light'] .hints span { background: rgb(0 0 0 / .06); }
.spy-players { display: flex; flex-direction: column; gap: 4px; }
.spy-players .player { background: var(--surface-2); }
.spy-players .player.asking { box-shadow: inset 0 0 0 2px var(--accent); }
.spy-players .player.was-spy .nick { color: var(--bad); }
.vote-card { padding: var(--sp-4); border-radius: var(--r-md); display: flex; flex-direction: column; gap: 10px; background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }
.locs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.loc { min-height: 40px; padding: 6px 10px; border-radius: var(--r-sm); font-size: 13px; font-weight: 600; text-align: left; background: var(--surface-2); transition: background-color var(--dur-fast); }
.loc:hover { background: var(--surface-3); }
.loc.crossed { color: var(--fg-3); text-decoration: line-through; opacity: .55; }
.loc.mine { box-shadow: inset 0 0 0 2px #9B8CFF; }
.loc.hit { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.locs.guessing .loc { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 50%, transparent); }

/* ---------- mines ---------- */
.mines-score { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sp-4); align-items: center; }
.team-score { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); display: flex; flex-direction: column; gap: 6px; background: color-mix(in srgb, var(--tc) 9%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 30%, transparent); }
.team-score:last-child { align-items: flex-end; text-align: right; }
.team-score strong { color: var(--tc); }
.team-score.attacking { box-shadow: inset 0 0 0 2px var(--tc); }
.big-score { font-size: 40px; font-weight: 800; line-height: 1; }
.mines-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-6); }
.word-card { padding: var(--sp-6); border-radius: var(--r-xl); display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; background: linear-gradient(160deg, color-mix(in srgb, #9BE15D 18%, var(--surface)), var(--surface)); box-shadow: inset 0 0 0 1px var(--line); }
.the-word { font-size: clamp(30px, 4vw, 46px); font-weight: 800; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.the-word.masked { letter-spacing: .2em; color: var(--fg-3); }
.word-card.boom { animation: boom 700ms var(--ease); }
@keyframes boom { 0% { box-shadow: 0 0 0 0 rgb(255 90 95 / .9); background: rgb(255 90 95 / .4); } 100% { box-shadow: 0 0 0 40px rgb(255 90 95 / 0); } }
.mine-chip { display: inline-flex; align-items: center; gap: 2px; min-height: 32px; padding: 0 4px 0 12px; border-radius: 99px; font-weight: 600; background: var(--surface-2); }
.mine-chip:not(:has(button)) { padding-right: 12px; }
.mine-chip.exploded { background: var(--bad); color: #fff; }
.mines-feed { padding: var(--sp-4); border-radius: var(--r-md); background: var(--surface-2); max-height: 460px; overflow: auto; }
.clue { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--surface); font-weight: 600; width: fit-content; max-width: 100%; overflow-wrap: anywhere; animation: pop var(--dur-base) var(--spring); }
.clue.boom { background: var(--bad); color: #fff; }
.guess { font-size: 13px; padding: 4px 10px; border-radius: 99px; background: var(--surface); color: var(--fg-2); }
.guess.ok { background: color-mix(in srgb, var(--ok) 25%, transparent); color: var(--fg); }
.stage.shake { animation: shake 500ms var(--ease); }
@keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-8px); } 40%, 60% { transform: translateX(8px); } }

/* ---------- croc ---------- */
.hint { font-size: 22px; font-weight: 700; letter-spacing: .08em; }
.croc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--sp-4); }
.croc-board { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.croc-canvas { width: 100%; height: auto; aspect-ratio: 4 / 3; background: #fff; touch-action: none; }
.croc-canvas.can-draw { cursor: crosshair; }
.croc-choose { position: absolute; inset: 0; display: none; place-items: center; background: rgb(10 14 20 / .3); }
.croc-choose.show { display: grid; }
.choose-card { padding: var(--sp-6); border-radius: 28px; display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }
.croc-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.sw { width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .2), 0 0 0 1px var(--line); transition: transform var(--dur-fast) var(--spring); }
.sw:hover { transform: scale(1.12); }
.sw.on { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--accent); }
.dotsize { display: block; border-radius: 50%; background: currentColor; }
.croc-scores { display: flex; flex-direction: column; gap: 2px; }
.croc-scores .player.guessed { background: color-mix(in srgb, var(--ok) 12%, transparent); }

@media (max-width: 1100px) {
  .arm-main { grid-template-columns: minmax(0, 1fr); }
  .chess { grid-template-columns: minmax(0, 1fr); }
  .board-col { max-width: 640px; }
  .spy-grid, .mines-grid, .croc-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .bs-grids { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .arm-head { grid-template-columns: 1fr 1fr; }
  .arm-round { grid-column: span 2; order: -1; }
  .arm-side, .arm-side.right { flex-direction: column; align-items: flex-start; gap: 6px; }
  .arm-side.right { align-items: flex-end; }
  .arm-side .row { flex-wrap: wrap; }
  .skill-ring { width: 170px; height: 170px; }
  .arm-controls { gap: var(--sp-3); }
  .press-btn { width: 100%; min-height: 84px; }
  .arm-gauge { max-width: 300px; }
  .arm-main { gap: var(--sp-2); }
}

/* ---------- dots ---------- */
.dots { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }
.dots-top { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); width: 100%; }
.dots-top .bplayer { flex: 1 1 180px; max-width: 260px; box-shadow: inset 0 0 0 1px var(--line); }
.dots-top .bplayer.active { box-shadow: inset 0 0 0 2px var(--pc); background: color-mix(in srgb, var(--pc) 10%, var(--surface-2)); }
.dots-swatch { width: 10px; height: 26px; border-radius: 6px; flex: none; }
.dots-score { font-size: 20px; min-width: 2ch; text-align: right; }
.dots-board { width: 100%; max-width: 520px; border-radius: var(--r-lg); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); padding: 6px; transition: box-shadow var(--dur-base); }
.dots-board.my-turn { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--me) 60%, transparent); }
.dots-svg { width: 100%; height: auto; user-select: none; }
.dots-dot { fill: var(--fg); }
.dots-line { stroke: var(--line-2); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 9; transition: stroke var(--dur-fast); }
.dots-line.set { stroke-width: 7; stroke-dasharray: none; }
.dots-line.preview { stroke-width: 5; stroke-dasharray: 10 8; opacity: .6; }
@media (hover: none) { .dots-line.preview { stroke: var(--line-2) !important; stroke-width: 3; stroke-dasharray: 2 9; opacity: 1; } }
.dots-line.fresh { animation: dots-in 320ms var(--spring); }
@keyframes dots-in { from { stroke-width: 14; } }
.dots-hit { fill: transparent; cursor: pointer; outline: none; }
.dots-board:not(.my-turn) .dots-hit { pointer-events: none; }
.dots-hit:focus-visible { fill: color-mix(in srgb, var(--accent) 25%, transparent); }
.dots-box rect { fill: transparent; opacity: 0; transform-box: fill-box; transform-origin: center; }
.dots-box.on rect { opacity: .28; }
.dots-box.pop rect { animation: dots-box 420ms var(--spring); }
.dots-box text { fill: var(--fg); font: 800 20px var(--font); }
@keyframes dots-box { from { transform: scale(.2); opacity: 0; } }

/* ---------- quiz ---------- */
.quiz-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--sp-6); }
.quiz-main { gap: var(--sp-4); }
.quiz-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }
.quiz-bar { height: 6px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.quiz-bar i { display: block; height: 100%; background: var(--accent); transform-origin: left; border-radius: inherit; }
.quiz-bar.low i { background: var(--bad); }
.quiz-q { font-size: clamp(22px, 3vw, 32px); line-height: 1.2; min-height: 2.4em; text-wrap: balance; }
.quiz-q.in { animation: quiz-q 420ms var(--ease); }
@keyframes quiz-q { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } }
.quiz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.quiz-opt { display: flex; align-items: center; gap: var(--sp-3); min-height: 64px; padding: 12px 16px; border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); text-align: left; font-weight: 600; transition: transform var(--dur-fast) var(--ease), background-color var(--dur-base), opacity var(--dur-base), box-shadow var(--dur-base); animation: quiz-opt 360ms var(--ease) both; animation-delay: var(--d); }
@keyframes quiz-opt { from { opacity: 0; transform: translateY(6px); } }
.quiz-opt:not(:disabled):hover { background: var(--surface-3); }
.quiz-opt:not(:disabled):active { transform: scale(.98); }
.quiz-opt:disabled { cursor: default; }
.quiz-letter { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-3); font-weight: 800; flex: none; }
.quiz-text { flex: 1; }
.quiz-count { color: var(--fg-2); }
.quiz-opt.mine { box-shadow: inset 0 0 0 2px var(--accent); }
.quiz-opt.mine .quiz-letter { background: var(--accent); color: var(--on-accent); }
.quiz-opt.dim { opacity: .5; }
.quiz-opt.right { background: color-mix(in srgb, var(--ok) 18%, var(--surface-2)); box-shadow: inset 0 0 0 2px var(--ok); }
.quiz-opt.right .quiz-letter { background: var(--ok); color: #fff; }
.quiz-opt.wrong { background: color-mix(in srgb, var(--bad) 14%, var(--surface-2)); box-shadow: inset 0 0 0 2px var(--bad); animation: shake 420ms var(--ease); }
.quiz-note { min-height: 1.5em; font-weight: 600; }
.quiz-note.good { color: var(--ok); } .quiz-note.bad { color: var(--bad); }
.quiz-board { display: flex; flex-direction: column; gap: 2px; }
.quiz-board h3 { margin-bottom: 8px; }
.quiz-board .player { animation: quiz-opt 300ms var(--ease) both; animation-delay: calc(var(--k) * 30ms); }
.quiz-rank { width: 18px; color: var(--fg-3); text-align: center; }
.quiz-delta { font-weight: 700; font-size: 13px; }
.quiz-delta.good { color: var(--ok); } .quiz-delta.bad { color: var(--bad); }
.quiz-fire { color: var(--warn); display: inline-flex; }

/* ---------- phone ---------- */
.phone-grid { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--sp-4); }
.phone-body { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.phone-side { display: flex; flex-direction: column; gap: 2px; }
.phone-side h3 { margin-bottom: 8px; }
.phone-side .player.guessed { background: color-mix(in srgb, var(--ok) 12%, transparent); }
.phone-form { max-width: 520px; gap: var(--sp-3); }
.phone-prompt { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: var(--r-md); background: var(--surface-2); }
.phone-prompt strong { font-size: 20px; letter-spacing: -.01em; }
.phone-wait { display: grid; justify-items: center; gap: 6px; padding: 48px 16px; text-align: center; }
.phone-wait-ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); animation: dots-box 420ms var(--spring); }
.phone-pic { width: 100%; height: auto; aspect-ratio: 4 / 3; background: #fff; }
.phone-owner { display: flex; align-items: baseline; gap: 8px; }
.phone-chain { display: flex; flex-direction: column; gap: var(--sp-4); max-height: min(70vh, 900px); overflow: auto; padding: 4px; scrollbar-width: thin; }
.phone-entry { display: flex; flex-direction: column; gap: 6px; max-width: 520px; }
.phone-entry.text:nth-child(odd) { align-self: flex-start; } .phone-entry.draw { align-self: center; width: 100%; }
.phone-entry.fresh { animation: quiz-q 480ms var(--ease); }
.phone-who { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.phone-bubble { padding: 12px 16px; border-radius: 18px 18px 18px 6px; background: var(--surface-2); font-size: 18px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--line); }
.phone-bubble.first { background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); }
.phone-drawing { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.phone-like { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: var(--r-full); background: rgb(15 17 21 / .72); color: #fff; backdrop-filter: blur(8px); transition: transform var(--dur-fast) var(--spring); }
.phone-like:not(:disabled):active { transform: scale(.9); }
.phone-like.on { background: var(--bad); }
.phone-like.on .ico { fill: currentColor; }
.phone-like:disabled { opacity: .7; cursor: default; }
@media (max-width: 1100px) { .quiz-grid, .phone-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .quiz-opts { grid-template-columns: 1fr; } .quiz-opt { min-height: 54px; } }
.arm-arena:has(.arm-overlay.show) .pos-val, .arm-arena:has(.arm-overlay.show) .pos-lbl { opacity: 0; }
.arm-gauge .pos-val, .arm-gauge .pos-lbl { transition: opacity var(--dur-base); }

/* ---------- quip (Острослов) ---------- */
.quip { display: flex; flex-direction: column; gap: var(--sp-4); }
.quip-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.quip-grid { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--sp-5); }
.quip-body { min-width: 0; }
.quip-side { display: flex; flex-direction: column; gap: 2px; }
.quip-side h3 { margin-bottom: 8px; }
.quip-prompt { font-size: clamp(22px, 3vw, 34px); line-height: 1.2; text-wrap: balance; }
.quip-body.fresh .quip-prompt { animation: quiz-q 420ms var(--ease); }
.quip-write { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 680px; }
.quip-write .input { flex: 1; min-height: 52px; font-size: 17px; }
.quip-wait { display: grid; justify-items: center; gap: 6px; padding: 48px 16px; text-align: center; }
.quip-wait-ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); animation: dots-box 420ms var(--spring); }
.quip-vote { display: flex; flex-direction: column; gap: var(--sp-4); }
.quip-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.quip-cards.final { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.quip-card { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 140px; padding: var(--sp-5); border-radius: var(--r-xl); text-align: left; font-size: 20px; font-weight: 700; line-height: 1.3;
  background: linear-gradient(160deg, color-mix(in srgb, var(--qc) 22%, transparent), rgb(255 255 255 / .04)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--qc) 40%, transparent), var(--g-shadow);
  transition: transform var(--dur-base) var(--spring), box-shadow var(--dur-base); }
.quip-body.fresh .quip-card { animation: quip-in 480ms var(--spring) backwards; animation-delay: var(--d); }
.quip-card.c0 { --qc: #e58fb0; } .quip-card.c1 { --qc: #8fbfe0; } .quip-card.c2 { --qc: #9fd08a; } .quip-card.c3 { --qc: #e0c06a; }
@keyframes quip-in { from { opacity: 0; transform: translateY(16px) rotate(-1.5deg) scale(.96); } }
.quip-card:not(:disabled):hover { transform: translateY(-3px) rotate(-.6deg); }
.quip-card:disabled { cursor: default; }
.quip-card.chosen { box-shadow: inset 0 0 0 3px var(--gold), 0 12px 30px -14px var(--gold); }
.quip-card.revealed { cursor: default; }
.quip-card.lead { transform: scale(1.02); }
.quip-card.sweep { box-shadow: inset 0 0 0 3px #ffd34a, 0 0 40px -10px #ffd34a; }
.quip-text { flex: 1; overflow-wrap: anywhere; }
.quip-who { display: flex; align-items: center; gap: 8px; font-size: 14px; animation: quiz-q 400ms var(--ease); }
.quip-who strong { font-size: 20px; color: var(--gold); }
.quip-voters { display: flex; gap: 4px; flex-wrap: wrap; }
.quip-badge { position: absolute; right: 14px; top: -12px; padding: 4px 12px; border-radius: 99px; font-family: var(--font-display); font-size: 13px; font-weight: 800; color: #2a1e08; background: #ffd34a; transform: rotate(4deg); animation: pop 500ms var(--spring); }
.quip-mine { font-size: 12px; color: var(--fg-3); }
.quip-podium { display: flex; justify-content: center; align-items: flex-end; gap: var(--sp-4); padding: var(--sp-6) 0; }
.pod { display: flex; flex-direction: column; align-items: center; gap: 6px; animation: quip-in 600ms var(--spring) backwards; }
.pod.p1 { order: 2; } .pod.p2 { order: 1; animation-delay: 150ms; } .pod.p3 { order: 3; animation-delay: 300ms; }
.pod-step { width: 96px; display: grid; place-items: start center; padding-top: 8px; border-radius: 16px 16px 0 0; font-family: var(--font-display); font-size: 26px; font-weight: 800; background: rgb(255 255 255 / .08); box-shadow: inset 0 1px 0 rgb(255 255 255 / .2); }
.pod.p1 .pod-step { height: 120px; color: var(--gold); } .pod.p2 .pod-step { height: 86px; } .pod.p3 .pod-step { height: 62px; }
.center { text-align: center; }

/* ---------- scale (Шкала) ---------- */
.scale { display: flex; flex-direction: column; gap: var(--sp-4); }
.scale-top { display: flex; flex-direction: column; gap: var(--sp-3); }
.scale-poles { display: flex; justify-content: space-between; gap: var(--sp-4); }
.pole { font-family: var(--font-display); font-weight: 700; font-size: clamp(16px, 2.2vw, 24px); padding: 6px 14px; border-radius: 14px; }
.pole.l { color: #6cb8f0; background: rgb(108 184 240 / .12); } .pole.r { color: #f08a72; background: rgb(240 138 114 / .12); text-align: right; }
.scale-grid { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--sp-5); }
.scale-main { min-width: 0; }
.scale-wrap { display: grid; place-items: center; }
.scale-dial { width: 100%; max-width: 640px; touch-action: none; user-select: none; }
.scale-dial.can-drag { cursor: grab; } .scale-dial.can-drag:active { cursor: grabbing; }
.scale-dial .tick { stroke: rgb(255 255 255 / .35); stroke-width: 1.5; } .scale-dial .tick.big { stroke-width: 3; }
.scale-dial .target path { stroke: none; }
.scale-dial .z1 { fill: rgb(255 255 255 / .12); } .scale-dial .z2 { fill: rgb(255 211 74 / .28); } .scale-dial .z3 { fill: rgb(255 154 28 / .5); } .scale-dial .z4 { fill: #ff5a5f; }
.scale-dial .target.reveal { animation: scale-reveal 700ms var(--spring); transform-origin: 200px 210px; }
@keyframes scale-reveal { from { transform: scale(.4); opacity: 0; } }
.scale-dial .zl { fill: #fff; font: 800 14px var(--font-display); }
.scale-dial .ptr line { stroke-width: 4; stroke-linecap: round; }
.scale-dial .ptr circle { stroke: var(--ink-0); stroke-width: 3; }
.scale-dial .ptr.mine line { stroke-width: 6; }
.scale-dial .hub { fill: var(--fg); stroke: var(--ink-0); stroke-width: 4; }
.scale-panel { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 640px; width: 100%; margin: 0 auto; }
.scale-clue { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.scale-clue strong { font-family: var(--font-display); font-size: clamp(20px, 3vw, 30px); animation: quiz-q 420ms var(--ease); }
.scale-res { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px; background: rgb(255 255 255 / .04); }
.scale-res > i, .scale-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.scale-side { display: flex; flex-direction: column; gap: 2px; }
.scale-side h3 { margin-bottom: 8px; }
@media (max-width: 1100px) { .quip-grid, .scale-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .quip-cards { grid-template-columns: 1fr; } .quip-card { min-height: 110px; font-size: 18px; } .pod-step { width: 72px; } }
@media (hover: none) and (pointer: coarse) { .press-btn .press-k { display: none; } }
.skill .press-mark line { stroke: #fff; stroke-width: 5; stroke-linecap: round; }
.skill .press-mark { opacity: 0; }
.skill .press-mark.show { animation: press-mark 900ms var(--ease) forwards; }
.skill .press-mark[data-grade='miss'] line { stroke: var(--danger, #ff5a5f); }
.skill .press-mark[data-grade='perfect'] line { stroke: #ffd34a; }
@keyframes press-mark { 0% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- mines: layout, voice mode, phones ---------- */
.stage.mines { display: flex; flex-direction: column; gap: var(--sp-4); }
.team-score.t-A { --tc: var(--team-a); } .team-score.t-B { --tc: var(--team-b); }
.team-avas { display: flex; gap: 4px; flex-wrap: wrap; }
.team-score:last-child .team-avas { justify-content: flex-end; }
.mines-mid { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mines-mid .timer { font-size: 28px; font-weight: 800; }
.mines-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mines-main { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.mines-box { padding: 0 2px; }
.mine-list { display: flex; flex-wrap: wrap; gap: 8px; }
.word-card.won { animation: won 900ms var(--ease); }
@keyframes won { 0% { box-shadow: 0 0 0 0 rgb(95 211 120 / .8); background: rgb(95 211 120 / .3); } 100% { box-shadow: 0 0 0 40px rgb(95 211 120 / 0); } }
.mines-input { display: flex; gap: 8px; }
.mines-input .input { flex: 1; min-width: 0; min-height: 48px; font-size: 16px; }
.mines-actions { display: flex; flex-direction: column; gap: 10px; }
.mines-actions:empty { display: none; }
.voice-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.btn.big { min-height: 64px; padding: 0 30px; font-size: 20px; border-radius: 22px; }
.mine-list.armed { gap: 10px; }
.boom-btn { padding: 0 6px 0 12px; min-height: 48px; gap: 8px; font-size: 16px; cursor: pointer; background: color-mix(in srgb, var(--bad) 16%, var(--surface-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 50%, transparent);
  transition: transform var(--dur-fast) var(--spring), background var(--dur-fast); }
.boom-btn:hover { background: color-mix(in srgb, var(--bad) 30%, var(--surface-2)); }
.boom-btn:active { transform: scale(.95); }
.boom-tag { padding: 4px 9px; border-radius: 99px; font-size: 11px; font-weight: 800; letter-spacing: .04em; color: #fff; background: var(--bad); }
.mines-tips { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 6px; color: var(--fg-2); }
@media (max-width: 1100px) { .mines-feed { max-height: 260px; } }
@media (max-width: 600px) {
  .mines-score { grid-template-columns: 1fr auto 1fr; gap: 8px; }
  .team-score { padding: 10px; }
  .team-score .chip { display: none; }
  .big-score { font-size: 30px; }
  .mines-mid .timer { font-size: 22px; }
  .word-card { padding: var(--sp-4); }
  .mines-input .btn-label { display: none; }
  .voice-actions .btn.big { flex: 1; }
  .voice-actions { flex-direction: column; align-items: stretch; }
}

/* ---------- blitz (Блиц) ---------- */
.stage.blitz { display: flex; flex-direction: column; gap: var(--sp-3); }
.blitz-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.blitz-bar { height: 6px; border-radius: 99px; background: rgb(127 127 127 / .18); overflow: hidden; }
.blitz-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7fd6f0, var(--gold)); transform-origin: left; will-change: transform; }
.blitz-grid { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--sp-5); }
.blitz-main { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.blitz-side { display: flex; flex-direction: column; gap: 2px; }
.blitz-side h3 { margin-bottom: 8px; }
.blitz-side .delta { font-weight: 800; font-size: 13px; animation: pop 400ms var(--spring); }
.blitz-side .delta.up { color: var(--ok); } .blitz-side .delta.down { color: var(--bad); }
.blitz-arena { position: relative; display: grid; place-items: center; min-height: clamp(240px, 42vh, 420px); border-radius: var(--r-xl); background: rgb(127 127 127 / .08); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.blitz-ready { display: grid; justify-items: center; gap: 6px; animation: quiz-q 380ms var(--ease); }
.blitz-ready strong { font-family: var(--font-display); font-size: clamp(26px, 4vw, 44px); }
.blitz-big { font-family: var(--font-display); font-size: clamp(44px, 8vw, 88px); font-weight: 800; letter-spacing: -.02em; animation: pop 380ms var(--spring); }
.blitz-big.stroop { font-size: clamp(40px, 7vw, 76px); text-shadow: 0 2px 0 rgb(0 0 0 / .2); }
.tap-pad { position: absolute; inset: 0; display: grid; place-items: center; cursor: pointer; background: #c9343a; transition: background 60ms linear; }
.blitz-arena.go .tap-pad { background: #22b35e; }
.tap-text { font-family: var(--font-display); font-size: clamp(28px, 5vw, 52px); color: #fff; }
.blitz-arena.locked .tap-pad { filter: saturate(.6); cursor: default; }
.count-field { position: absolute; inset: 14px; }
.count-field i { position: absolute; width: clamp(14px, 2.4vw, 22px); aspect-ratio: 1; border-radius: 50%; background: var(--fg); transform: translate(-50%, -50%); animation: pop 260ms var(--spring) backwards; }
.count-answer { position: absolute; right: 16px; top: 12px; font-family: var(--font-display); font-weight: 800; font-size: 34px; color: var(--ok); }
.odd-grid { display: grid; gap: clamp(4px, 1vw, 8px); width: min(100%, 420px); padding: 14px; }
.odd-cell { aspect-ratio: 1; border-radius: 18%; cursor: pointer; transition: transform var(--dur-fast) var(--spring); }
.odd-cell:hover { transform: scale(1.04); }
.odd-cell.right { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--ok); transform: scale(1.08); }
.blitz-arena.locked .odd-cell, .blitz-arena.revealed .odd-cell { cursor: default; }
.blitz-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.blitz-choices:empty { display: none; }
.blitz-choices.two .blitz-choice { min-height: 96px; font-size: clamp(24px, 4vw, 36px); }
.blitz-choice { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; padding: 10px 16px; border-radius: 20px; font-family: var(--font-display); font-size: clamp(20px, 3vw, 28px); font-weight: 700;
  background: rgb(127 127 127 / .12); box-shadow: inset 0 0 0 1px var(--line); transition: transform var(--dur-fast) var(--spring), background var(--dur-fast); }
.blitz-choice:hover { background: rgb(127 127 127 / .2); }
.blitz-choice:active { transform: scale(.96); }
.blitz-choice kbd { position: absolute; left: 12px; top: 10px; font: 700 11px var(--font-body, inherit); color: var(--fg-3); }
.blitz-choices.locked .blitz-choice { pointer-events: none; opacity: .7; }
.blitz-choice.right { opacity: 1 !important; background: color-mix(in srgb, var(--ok) 28%, transparent); box-shadow: inset 0 0 0 2px var(--ok); }
.blitz-note { min-height: 28px; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; text-align: center; }
.blitz-note .ok { color: var(--ok); font-size: 20px; } .blitz-note .bad { color: var(--bad); font-size: 20px; }
.blitz-arena.k-over { background: transparent; box-shadow: none; }

/* ---------- whois (Кто из нас?) ---------- */
.stage.whois { display: flex; flex-direction: column; gap: var(--sp-4); }
.whois-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.whois-grid { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--sp-5); }
.whois-main { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.whois-side { display: flex; flex-direction: column; gap: 2px; }
.whois-side h3 { margin-bottom: 8px; }
.whois-prompt { display: flex; flex-direction: column; gap: 4px; }
.whois-lead { color: var(--fg-3); font-weight: 600; }
.whois-q { font-size: clamp(24px, 3.4vw, 38px); line-height: 1.15; text-wrap: balance; }
.whois-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.whois-person { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px; border-radius: 22px; background: rgb(127 127 127 / .1); box-shadow: inset 0 0 0 1px var(--line);
  transition: transform var(--dur-fast) var(--spring), background var(--dur-fast), box-shadow var(--dur-fast); }
.whois-body.fresh .whois-person { animation: quip-in 420ms var(--spring) backwards; animation-delay: var(--d); }
.whois-person:not(:disabled):hover { transform: translateY(-2px); background: rgb(127 127 127 / .18); }
.whois-person:disabled { opacity: .55; cursor: default; }
.whois-person.chosen { opacity: 1; background: color-mix(in srgb, var(--gold) 18%, transparent); box-shadow: inset 0 0 0 2px var(--gold); }
.whois-winner { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; font-family: var(--font-display); font-size: clamp(16px, 2.4vw, 20px); font-weight: 700; }
.whois-winner .ico { color: var(--gold); }
.whois-bar { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 16px; overflow: hidden; isolation: isolate; }
.whois-bar::before { content: ''; position: absolute; inset: 0; z-index: -1; width: var(--w); border-radius: inherit; background: rgb(127 127 127 / .16); transform-origin: left; animation: whois-grow 700ms var(--ease) backwards; animation-delay: var(--d); }
.whois-bar.lead::before { background: color-mix(in srgb, var(--gold) 30%, transparent); }
@keyframes whois-grow { from { transform: scaleX(0); } }
.whois-bar-name { min-width: 0; flex: 0 1 auto; }
.whois-bar-voters { display: flex; gap: 2px; flex: 1; justify-content: flex-end; flex-wrap: wrap; }
.whois-titles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.whois-title-card { padding: 14px; border-radius: 18px; background: rgb(127 127 127 / .1); }
.whois-title-card ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 4px; color: var(--fg-2); }
@media (max-width: 1100px) { .blitz-grid, .whois-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .blitz-arena { min-height: 32vh; }
  .blitz-choice { min-height: 64px; }
  .whois-people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .whois-person { padding: 12px 8px; }
}

.blitz-arena.k-bigger { min-height: 64px; }
@media (hover: none) and (pointer: coarse) { .blitz-choice kbd { display: none; } }