/* Play screens: game / aigame / replay (owner: game).
   Platform look (SPEC §12.1, mockups Main / Invited / Invite / ResultCard): navy surfaces, blue primary #2F7BFF,
   orange accent #FF7A2F, Golos Text everywhere, Unbounded 800 for result titles, big headings and big numbers.
   Colours come from the shell tokens in app.css; the --gm-* aliases below give every token the mockup value as a
   fallback (plus light-theme fallbacks), so the play screens keep the brand look even where the shell has no such
   token. Gold is retired (§12.1) — tests/client/game-look.test.js keeps it out of this file. */

/* ------------------------------------------------------------------ palette aliases */
:root {
  --gm-font: var(--font, 'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
  --gm-display: var(--font-display, 'Unbounded', 'Golos Text', system-ui, sans-serif);
  --gm-bg: var(--bg, #14162b);
  --gm-surface: var(--surface, #1e2142);
  --gm-surface-2: var(--surface-2, #262a50);
  --gm-raised: var(--surface-3, #2a2f5a);
  --gm-line: var(--line, #3a3f6b);
  --gm-divider: var(--border, #2c3058);
  --gm-text: var(--text, #ffffff);
  --gm-text-2: var(--text-2, #b9bed6);
  --gm-muted: var(--muted, #8e94b8);
  --gm-primary: var(--primary, #2f7bff);
  /* blue fills that carry text: the darker blue keeps white text at ≥ 4.5:1 */
  --gm-primary-fill: var(--primary-strong, #1f63e0);
  --gm-primary-ink: var(--primary-ink, #ffffff);
  --gm-info: var(--info, #7faaff);
  --gm-accent: var(--accent, #ff7a2f);
  --gm-accent-ink: var(--accent-ink, #14162b);
  --gm-accent-text: var(--accent-text, #ff9a5c);
  --gm-good: var(--good, #34c77b);
  --gm-bad: var(--bad, #ff5d5d);
  --gm-warn: var(--warn, #ffc83d);
  /* Main call to action = the mockups' white button with navy text (inverted on the light theme). */
  --gm-cta: var(--btn-primary-bg, #ffffff);
  --gm-cta-ink: var(--btn-primary-ink, #14162b);
  --gm-disabled: var(--btn-disabled-bg, #2c3058);
  --gm-disabled-ink: var(--btn-disabled-ink, #9aa0c2);
  --gm-shadow: 0 10px 28px rgba(5, 7, 20, .42);
  --gm-ease: var(--ease, cubic-bezier(.2, .8, .2, 1));
  /* Eval bar halves: always a light and a dark half, whatever the theme. */
  --gm-white-side: #f2f3fa;
  --gm-black-side: #14162b;
}
[data-theme='light'] {
  --gm-bg: var(--bg, #eef0f8);
  --gm-surface: var(--surface, #ffffff);
  --gm-surface-2: var(--surface-2, #e6e9f4);
  --gm-raised: var(--surface-3, #dce0ef);
  --gm-line: var(--line, #c9cee3);
  --gm-divider: var(--border, #e1e4f0);
  --gm-text: var(--text, #14162b);
  --gm-text-2: var(--text-2, #4a5072);
  --gm-muted: var(--muted, #5b6185);
  --gm-info: var(--info, #1a5ad6);
  --gm-accent-text: var(--accent-text, #a8400b);
  --gm-good: var(--good, #147548);
  --gm-bad: var(--bad, #c42b2b);
  --gm-warn: var(--warn, #965700);
  --gm-cta: var(--btn-primary-bg, #14162b);
  --gm-cta-ink: var(--btn-primary-ink, #ffffff);
  --gm-disabled: var(--btn-disabled-bg, #dfe2ee);
  --gm-disabled-ink: var(--btn-disabled-ink, #6a7092);
  --gm-shadow: 0 10px 26px rgba(20, 22, 43, .14);
}

.gm-screen {
  --gm-bar-h: 52px;
  --gm-head-h: 34px;
  --gm-strip-h: 42px;
  --gm-actions-h: 58px;
  --gm-gut: 12px; /* one horizontal gutter for header, player bars, move strip and toolbar */
  --gm-ava: 36px;
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 0 0 max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
  color: var(--gm-text);
  font-family: var(--gm-font);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
/* The shell's .screen container is a padded scroll box; play screens fill it edge to edge instead
   (safe-area top/sides only) and never scroll as a whole. */
.screen.screen-game, .screen.screen-aigame, .screen.screen-replay {
  padding: var(--safe-top, 0px) var(--safe-right, 0px) 0 var(--safe-left, 0px);
  overflow: hidden;
}
body.has-main-button .screen.screen-game, body.has-main-button .screen.screen-aigame, body.has-main-button .screen.screen-replay,
body.net-offline .screen.screen-game, body.net-offline .screen.screen-aigame, body.net-offline .screen.screen-replay,
body.browser-back .screen.screen-game, body.browser-back .screen.screen-aigame, body.browser-back .screen.screen-replay {
  padding: var(--safe-top, 0px) var(--safe-right, 0px) 0 var(--safe-left, 0px);
}
/* Browser (dev) mode: leave room for the floating fallback back button next to the header. */
body.browser-back .gm-screen { padding-top: 6px; }
body.browser-back .gm-head { padding-left: 54px; min-height: 38px; flex-basis: 38px; }
.gm-screen *, .gm-screen *::before, .gm-screen *::after { box-sizing: border-box; }
.gm-screen [hidden], .gm-sheet-overlay [hidden], .gm-res [hidden], .gm-menu [hidden] { display: none !important; }

/* ------------------------------------------------------------------ header */
.gm-head {
  flex: 0 0 var(--gm-head-h);
  width: 100%;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 var(--gm-gut);
  font-size: 13px;
  color: var(--gm-muted);
  white-space: nowrap;
  min-width: 0;
}
/* Block (not flex) so the spans are inline text and text-overflow: ellipsis applies. */
.gm-head-tc { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-head-tcname { color: var(--gm-text); font-weight: 700; }
.gm-head-sep { opacity: .5; margin: 0 6px; }
.gm-head-rated { color: var(--gm-text-2); }
.gm-head-badges { display: flex; align-items: center; gap: 6px; flex-shrink: 0; max-width: 60%; min-width: 0; }
.gm-head-sub {
  flex: 0 0 auto; width: 100%; padding: 0 var(--gm-gut) 2px; margin-top: -4px;
  font-size: 12px; color: var(--gm-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gm-badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 10px; border-radius: 999px; border: 0;
  background: var(--gm-surface-2); color: var(--gm-text-2);
  font: 600 12px/1 var(--gm-font);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gm-badge .gm-ico { width: 13px; height: 13px; }
/* "Твой ход": the mockups' "в сети" look — blue dot + light-blue text on a blue tint. */
.gm-badge-turn { background: color-mix(in srgb, var(--gm-primary) 18%, transparent); color: var(--gm-info); }
.gm-badge-turn::before { content: ''; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--gm-primary); }
.gm-badge-wait { color: var(--gm-muted); }
.gm-badge-warn { background: color-mix(in srgb, var(--gm-warn) 18%, transparent); color: var(--gm-warn); }
.gm-badge-over { background: var(--gm-surface-2); color: var(--gm-text); }
.gm-badge-result { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gm-text); }
.gm-badge-result.tone-win { color: var(--gm-accent-text); }
.gm-badge-result.tone-loss { color: var(--gm-bad); }
/* Tappable "Итоги" pill in the header of a finished game (reopens the result sheet): the orange
   "ИТОГ ПАРТИИ" chip of the result card. */
button.gm-badge-results {
  cursor: pointer; position: relative;
  background: var(--gm-accent); color: var(--gm-accent-ink); font-weight: 700;
  transition: transform .1s, filter .15s;
}
button.gm-badge-results::before { content: ''; position: absolute; inset: -8px -4px; }
button.gm-badge-results:active { transform: scale(.95); }
@media (hover: hover) { button.gm-badge-results:hover { filter: brightness(1.06); } }
button.gm-badge-results .gm-ico { width: 14px; height: 14px; }

/* ------------------------------------------------------------------ stage: bars + board */
.gm-stage, .gm-play {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Full width: fitBoard measures the stage. Mobile chess layout (lichess / chess.com): the move strip sits right
   under the header, the player bars hug the board, and the whole block is anchored to the top. Spare height on
   tall phones collects once, above the bottom toolbar (the draw-offer / confirmation banners rise into it) —
   never as empty bands between the header, the move strip, the bars and the board. */
.gm-stage {
  justify-content: flex-start;
  width: 100%;
  padding: 0 0 4px;
}
.gm-play { width: 100%; }
.gm-board-wrap {
  flex: 0 0 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--gm-board-pad, 0px);
}
.gm-board-box {
  position: relative;
  width: var(--gm-bs, min(100vw, 100%));
  height: var(--gm-bs, min(100vw, 100%));
  flex: 0 0 auto;
}
.gm-board { width: 100%; height: 100%; }
/* Replay with the eval bar: symmetric 8 px insets, 10 px bar, 6 px gap → board = box − 32 px. */
.gm-board-box.has-eval { display: flex; align-items: stretch; gap: 6px; padding: 0 8px; height: calc(var(--gm-bs, 100vw) - 32px); }
.gm-board-box.has-eval .gm-board { width: calc(var(--gm-bs, 100vw) - 32px); height: calc(var(--gm-bs, 100vw) - 32px); flex: 0 0 auto; }

/* Phones: the board runs edge to edge without its frame (bigger squares, like lichess / chess.com);
   wider screens keep the framed board, inset by the gutter. */
@media (max-width: 520px) {
  .gm-screen .cb-board { --cb-frameless: 1; }
}
@media (min-width: 521px) {
  .gm-screen { --gm-board-pad: var(--gm-gut); }
}

/* player bar */
.gm-bar {
  position: relative;
  flex: 0 0 var(--gm-bar-h);
  width: var(--gm-bs, 100%);
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 var(--gm-gut);
  min-width: 0;
}
@media (min-width: 521px) { .gm-bar { padding: 0 2px; } }
.gm-ava { position: relative; flex: 0 0 auto; width: var(--gm-ava); height: var(--gm-ava); }
/* ui.avatar() sizes itself inline; the wrapper decides the real size on every breakpoint. */
.gm-ava > :first-child {
  width: 100% !important; height: 100% !important; border-radius: 50%; overflow: hidden;
  font-size: calc(var(--gm-ava) * .4) !important;
  box-shadow: 0 0 0 1.5px var(--gm-line);
  transition: box-shadow .2s var(--gm-ease);
}
.gm-ava img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
/* Side to move: the avatar ring lights up in the primary blue. */
.gm-bar.is-turn .gm-ava > :first-child { box-shadow: 0 0 0 2px var(--gm-primary); }
/* Our own avatar node (only when ctx.ui.avatar is unavailable): photo or robot picture, never letters. */
.gm-avatar { display: inline-block; flex: none; border-radius: 50%; overflow: hidden; background: #161616; line-height: 0; }
.gm-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gm-dot {
  position: absolute; right: -2px; bottom: -2px; z-index: 1;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--gm-muted);
  box-shadow: 0 0 0 2px var(--gm-bg);
  transition: background .3s;
}
.gm-dot.is-on { background: var(--gm-primary); } /* mockups: "в сети" = blue dot */
.gm-pinfo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.gm-pname-row { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.gm-name { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.gm-rating { color: var(--gm-muted); font-size: 13px; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.gm-badges { display: inline-flex; gap: 4px; align-items: center; flex-shrink: 0; }
.gm-badge-premium { color: var(--gm-accent-text); font-size: 13px; }
.gm-badge-you {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 6px;
  background: color-mix(in srgb, var(--gm-primary) 18%, transparent); color: var(--gm-info);
}
/* captured pieces: the board's own SVG pieces, same-type pieces stacked, 3 px between groups */
.gm-cap-row { display: flex; align-items: center; gap: 6px; height: 20px; min-width: 0; overflow: hidden; }
.gm-captured { display: flex; align-items: center; gap: 3px; min-width: 0; }
.gm-cap-group { display: inline-flex; align-items: center; }
.gm-cap { width: 18px; height: 18px; flex: 0 0 18px; display: block; overflow: visible; }
.gm-cap + .gm-cap { margin-left: -9px; }
svg.gm-cap { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); }
/* black pieces on the navy bar get a faint light rim so their silhouette stays readable */
svg.gm-cap-b { filter: drop-shadow(0 0 .7px rgba(255, 255, 255, .6)) drop-shadow(0 1px 1px rgba(0, 0, 0, .45)); }
[data-theme='light'] svg.gm-cap, [data-theme='light'] svg.gm-cap-b { filter: drop-shadow(0 1px 1px rgba(20, 22, 43, .35)); }
/* unicode fallback (only when the piece sprite failed to load) */
.gm-cap-glyph { width: auto; flex: none; font-size: 16px; line-height: 18px; font-family: "Segoe UI Symbol", "DejaVu Sans", "Noto Sans Symbols 2", sans-serif; }
.gm-cap-glyph + .gm-cap-glyph { margin-left: -7px; }
.gm-cap-glyph.gm-cap-w { color: #fafafa; text-shadow: 0 0 1px #000, 0 0 1px #000, 0 1px 1px rgba(0,0,0,.6); }
.gm-cap-glyph.gm-cap-b { color: #1a1a1a; text-shadow: 0 0 1px rgba(255,255,255,.75), 0 0 1px rgba(255,255,255,.75); }
.gm-diff { font-size: 13px; font-weight: 700; color: var(--gm-text-2); font-variant-numeric: tabular-nums; }
.gm-status { font-size: 12px; color: var(--gm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* first-move countdown in the side-to-move's bar (never on top of the squares) */
.gm-status.is-first {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--gm-accent) 18%, transparent);
  color: var(--gm-accent-text);
  font-weight: 600; font-variant-numeric: tabular-nums;
}
.gm-status.is-first.is-urgent { background: color-mix(in srgb, var(--gm-bad) 18%, transparent); color: var(--gm-bad); }
.gm-bar-right { flex: 0 0 auto; display: flex; align-items: center; }
/* Tight bar (a long nick that would be cut, e.g. 16 characters at 320 px — toggled by PlayerBar._fit):
   the name takes the whole first line; rating and badges move down, before the captured pieces. */
.gm-bar.is-tight .gm-pinfo {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-rows: auto auto;
  column-gap: 6px; row-gap: 2px; align-content: center;
}
.gm-bar.is-tight .gm-pname-row { display: contents; }
.gm-bar.is-tight .gm-name { grid-row: 1; grid-column: 1 / -1; letter-spacing: -.01em; }
.gm-bar.is-tight .gm-rating { grid-row: 2; grid-column: 1; align-self: center; font-size: 12px; }
.gm-bar.is-tight .gm-badges { grid-row: 2; grid-column: 2; align-self: center; }
.gm-bar.is-tight .gm-badges:empty { margin-left: -6px; }
.gm-bar.is-tight .gm-badge-you { font-size: 9px; padding: 0 4px; }
.gm-bar.is-tight .gm-cap-row { grid-row: 2; grid-column: 3; }
/* A first-move countdown needs the whole second line more than the rating does. */
.gm-bar.is-tight:has(.gm-status:not([hidden])) .gm-rating,
.gm-bar.is-tight:has(.gm-status:not([hidden])) .gm-badges { display: none; }
.gm-bar.is-tight:has(.gm-status:not([hidden])) .gm-cap-row { grid-column: 1 / -1; }
.gm-bar.is-turn .gm-name { color: var(--gm-text); }
.gm-bar:not(.is-turn) .gm-ava { opacity: .94; }

/* clock: the dominant element of the bar (Golos Text, tabular digits) */
.gm-clock {
  display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 6px;
  min-width: 104px; height: 44px; padding: 0 12px;
  line-height: 44px;
  border-radius: 12px;
  background: var(--gm-surface-2);
  color: var(--gm-text-2);
  font-family: var(--gm-font);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 26px; font-weight: 700; letter-spacing: -.01em;
  transition: background .2s var(--gm-ease), color .2s var(--gm-ease), box-shadow .2s;
}
.gm-clock-ico { align-self: center; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0; transition: opacity .2s; }
.gm-clock-ms { font-size: .7em; opacity: .8; margin-left: -5px; }
.gm-clock-ms:empty { display: none; }
/* is-turn: it is this side's move (the white CTA face); is-running: the clock ticks (blinking dot);
   is-waiting-first: my turn, clock frozen in the first-move window (blue outline, not inverted);
   is-over: finished game (both faces dimmed). */
.gm-clock.is-turn { background: var(--gm-cta); color: var(--gm-cta-ink); box-shadow: var(--gm-shadow); }
.gm-clock.is-waiting-first { background: var(--gm-surface-2); color: var(--gm-text); box-shadow: inset 0 0 0 2px var(--gm-primary); }
.gm-clock.is-running .gm-clock-ico { opacity: .9; animation: gm-blink 1s steps(2, start) infinite; }
.gm-clock.is-low { color: var(--gm-bad); }
.gm-clock.is-low.is-turn { background: var(--gm-bad); color: #fff; }
.gm-clock.is-low.is-running { animation: gm-lowpulse 1s ease-in-out infinite; }
.gm-clock.is-over, .gm-screen.is-over .gm-clock {
  background: var(--gm-surface-2); color: var(--gm-muted); box-shadow: none; animation: none;
}
.gm-screen.is-over .gm-clock .gm-clock-ico { opacity: 0; animation: none; }
.gm-clock.is-flag { animation: gm-shake .4s; }
.gm-clock.is-daily { font-family: var(--gm-font); font-size: 15px; font-weight: 700; letter-spacing: 0; min-width: 72px; height: 38px; line-height: 38px; }
.gm-clock.is-idle { opacity: .5; }
@keyframes gm-blink { to { visibility: hidden; } }
@keyframes gm-shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes gm-lowpulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--gm-bad) 35%, transparent); } }

/* thinking indicator (AI) */
.gm-thinking {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--gm-primary) 16%, var(--gm-surface-2)); color: var(--gm-info); font-size: 13px; font-weight: 600;
}
.gm-dots { display: inline-flex; gap: 3px; align-items: center; }
.gm-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: gm-dot 1.2s infinite ease-in-out; }
.gm-dots i:nth-child(2) { animation-delay: .15s; }
.gm-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes gm-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }

/* ------------------------------------------------------------------ move list strip */
.gm-moves-strip { flex: 0 0 var(--gm-strip-h); width: 100%; display: flex; align-items: center; gap: 6px; min-width: 0; }
.gm-moves {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 2px;
  height: 100%; padding: 0 var(--gm-gut);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
}
.gm-moves::-webkit-scrollbar { display: none; }
.gm-mrow { display: inline-flex; align-items: center; gap: 1px; flex: 0 0 auto; }
.gm-mnum { color: var(--gm-muted); font-size: 12px; font-variant-numeric: tabular-nums; padding: 0 2px 0 6px; }
.gm-chip {
  display: inline-flex; align-items: center;
  border: 0; background: transparent; color: var(--gm-text);
  font: 600 14px/1 var(--gm-font);
  padding: 7px 7px; border-radius: 9px; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s;
}
.gm-fig { width: 16px; height: 16px; flex: 0 0 16px; margin: -3px 1px -3px -2px; overflow: visible; }
.gm-chip:hover { background: var(--gm-surface-2); }
.gm-chip.is-active { background: var(--gm-primary-fill); color: var(--gm-primary-ink); }
.gm-chip.is-pending { opacity: .55; }
.gm-chip.is-empty { color: var(--gm-muted); cursor: default; }
.gm-moves-empty { color: var(--gm-muted); font-size: 13px; padding: 0 4px; white-space: nowrap; }

/* "Back to the game" while browsing earlier moves: lives in the move-strip row, never over the board */
.gm-live-pill {
  position: relative;
  flex: 0 0 auto; margin-right: var(--gm-gut);
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 14px 0 11px; border-radius: 999px; border: 0; cursor: pointer;
  font: 600 13px/1 var(--gm-font); white-space: nowrap;
  background: var(--gm-primary-fill); color: var(--gm-primary-ink);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--gm-primary) 35%, transparent);
  animation: gm-pill-in .22s var(--gm-ease) both;
  transition: transform .1s;
}
.gm-live-pill::before { content: ''; position: absolute; inset: -4px; } /* ≥ 44 px hit area */
.gm-live-pill:active { transform: scale(.96); }
.gm-live-pill .gm-ico { width: 16px; height: 16px; }
@keyframes gm-pill-in { from { opacity: 0; transform: translateX(8px) scale(.96); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ toolbar / actions */
.gm-actions {
  position: relative;
  flex: 0 0 var(--gm-actions-h); margin-top: auto; width: 100%;
  padding: 0 var(--gm-gut) 6px; display: flex; align-items: stretch;
}
.gm-toolbar {
  display: flex; width: 100%; gap: 3px;
  background: var(--gm-surface);
  border: 1px solid var(--gm-divider);
  border-radius: 16px;
  padding: 3px;
}
.gm-tool {
  flex: 1 1 0; min-width: 0; min-height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 0; border-radius: 12px; background: transparent; color: var(--gm-text);
  font: 500 11px/1.1 var(--gm-font); cursor: pointer;
  transition: background .15s, color .15s, opacity .15s, transform .1s;
}
.gm-tool:active:not(:disabled) { transform: scale(.94); background: var(--gm-surface-2); }
@media (hover: hover) { .gm-tool:hover:not(:disabled) { background: var(--gm-surface-2); } }
.gm-tool:disabled { opacity: .35; cursor: default; }
.gm-tool .gm-ico { width: 21px; height: 21px; }
.gm-tool-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gm-text-2); }
.gm-tool.is-danger .gm-ico { color: var(--gm-bad); }
.gm-tool.is-nav { flex: 0.8 1 0; min-width: 44px; }
.gm-tool.is-nav .gm-ico { width: 24px; height: 24px; }
.gm-tool.is-nav .gm-tool-label { display: none; }
.gm-tool.is-on { color: var(--gm-info); }
.gm-tool.is-on .gm-tool-label { color: var(--gm-info); }
.gm-tool.is-busy .gm-ico { animation: gm-pulse 1s infinite; color: var(--gm-primary); }
.gm-tool.is-alert { position: relative; color: var(--gm-accent-text); }
.gm-tool.is-alert::after {
  content: ''; position: absolute; top: 6px; right: calc(50% - 16px);
  width: 8px; height: 8px; border-radius: 50%; background: var(--gm-accent);
  box-shadow: 0 0 0 2px var(--gm-surface); animation: gm-pulse 1.4s infinite;
}
.gm-tool.is-locked .gm-tool-label::after { content: ' ★'; color: var(--gm-accent-text); }
@keyframes gm-pulse { 50% { opacity: .45; } }

.gm-ico { display: inline-flex; width: 18px; height: 18px; flex: 0 0 auto; }
.gm-ico svg { width: 100%; height: 100%; }

/* draw offer / move confirmation banner: replaces the toolbar in the flow (not over it) — message on its own
   line, two full-width 44 px buttons below. The actions row grows into the spare height above the toolbar (tall
   phones: nothing moves) or the stage gives the room back and fitBoard shrinks the board a little (short
   screens) — the player bars and clocks are never covered. The draw offer wears the orange frame of the
   mockups' invitation card; the move confirmation the blue one. */
.gm-screen.has-banner .gm-actions { flex-basis: auto; }
.gm-offer {
  position: relative; z-index: 5; width: 100%;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 8px;
  padding: 10px;
  border-radius: 20px;
  background: var(--gm-surface);
  border: 2px solid var(--gm-accent);
  box-shadow: 0 -10px 28px rgba(5, 7, 20, .35);
  animation: gm-rise .25s var(--gm-ease) both;
}
.gm-offer.is-confirm { border-color: var(--gm-primary); }
[data-theme='light'] .gm-offer { box-shadow: 0 -8px 24px rgba(20, 22, 43, .12); }
.gm-offer-text { flex: 1 1 100%; display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 15px; font-weight: 600; }
.gm-offer-msg { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; }
.gm-offer-ico {
  flex: 0 0 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--gm-accent); color: var(--gm-accent-ink); font-weight: 800;
}
.gm-offer.is-confirm .gm-offer-ico { background: var(--gm-primary-fill); color: var(--gm-primary-ink); }
.gm-offer-ico .gm-ico { width: 18px; height: 18px; }
.gm-offer-actions { flex: 1 1 100%; display: flex; gap: 8px; }
.gm-offer .gm-btn { flex: 1 1 0; height: 44px; padding: 0 12px; width: auto; }
.gm-offer.is-confirm .gm-btn { height: 48px; }
@keyframes gm-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ buttons (sheets, banners) */
.gm-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 50px; padding: 0 16px;
  border: 0; border-radius: 16px; cursor: pointer;
  font: 700 16px/1 var(--gm-font);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: transform .1s, filter .15s, background .15s, opacity .15s, box-shadow .15s;
}
.gm-btn > span:not(.gm-ico):not(.gm-btn-spin) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gm-btn:active:not(:disabled) { transform: scale(.97); }
.gm-btn:disabled { cursor: default; }
.gm-btn .gm-ico { width: 19px; height: 19px; }
/* Primary = the mockups' main call to action: white with navy text (navy with white text on the light theme). */
.gm-btn-primary { background: var(--gm-cta); color: var(--gm-cta-ink); box-shadow: 0 6px 18px rgba(5, 7, 20, .28); }
.gm-btn-primary:hover:not(:disabled) { filter: brightness(.96); }
.gm-btn-primary:active:not(:disabled) { filter: brightness(.92); box-shadow: 0 2px 8px rgba(5, 7, 20, .22); }
[data-theme='light'] .gm-btn-primary { box-shadow: 0 6px 16px rgba(20, 22, 43, .18); }
.gm-btn-primary:disabled { background: var(--gm-disabled); color: var(--gm-disabled-ink); box-shadow: none; }
/* Big calls to action (result sheet, "Начать партию") use the mockups' display face, like the shell's .btn-primary;
   compact buttons (banners, teaser, error card) stay in Golos Text so they fit at 320 px. */
.gm-res-actions > .gm-btn-primary, .gm-res-actions > .gm-res-row > .gm-btn-primary, .gm-setup-cta .gm-btn-primary {
  font-family: var(--gm-display); font-weight: 800; font-size: 15px; letter-spacing: -.01em;
}
.gm-setup-cta .gm-btn-primary { font-size: 17px; }
/* Secondary = the mockups' outlined button (1.5 px line, transparent). */
.gm-btn-ghost { background: transparent; color: var(--gm-text); font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--gm-line); }
@media (hover: hover) { .gm-btn-ghost:hover:not(:disabled) { background: color-mix(in srgb, var(--gm-text) 5%, transparent); } }
.gm-btn-danger { background: color-mix(in srgb, var(--gm-bad) 16%, transparent); color: var(--gm-bad); font-weight: 600; }
.gm-btn-link { background: transparent; color: var(--gm-info); font-weight: 600; font-size: 15px; height: 44px; padding: 0 8px; }
.gm-btn-waiting { background: var(--gm-surface-2); color: var(--gm-text-2); font-weight: 600; }
.gm-btn-waiting > span:last-child::after { content: ''; display: inline-block; width: 1em; text-align: left; animation: gm-ellipsis 1.2s steps(4) infinite; }
.gm-btn-spin {
  width: 16px; height: 16px; flex: 0 0 16px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--gm-muted) 35%, transparent); border-top-color: var(--gm-primary);
  animation: gm-spin .8s linear infinite;
}
.gm-btn-lg { height: 58px; font-size: 17px; border-radius: 16px; }
@keyframes gm-ellipsis { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

/* overflow ("⋯") menu: rows like the mockups' settings list */
.gm-menu { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 6px; font-family: var(--gm-font); }
.gm-menu-item { justify-content: flex-start; height: 54px; padding: 0 18px; font-size: 16px; font-weight: 600; gap: 14px; border-radius: 14px; }
.gm-menu-item.gm-btn-ghost { background: var(--gm-surface-2); box-shadow: none; }
.gm-menu-item .gm-ico { width: 22px; height: 22px; color: var(--gm-text-2); }
.gm-menu-item.gm-btn-danger .gm-ico { color: inherit; }

/* ------------------------------------------------------------------ result sheet content */
.gm-res { display: flex; flex-direction: column; gap: 14px; padding: 2px 2px 8px; color: var(--gm-text); font-family: var(--gm-font); }
/* "X — Y" header: both avatars, the score between them (the mockups' "Max VS Ты" card). */
.gm-res-players {
  display: flex; align-items: flex-start; justify-content: center; gap: 12px;
  padding: 18px 12px 14px; border-radius: 20px; background: var(--gm-surface-2);
}
.gm-res.tone-win .gm-res-players { box-shadow: inset 0 0 0 2px var(--gm-accent); }
.gm-res-player { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.gm-res-ava { position: relative; width: 56px; height: 56px; flex: 0 0 auto; }
.gm-res-ava > :last-child {
  position: relative; z-index: 1;
  width: 100% !important; height: 100% !important; border-radius: 50%; overflow: hidden;
  font-size: 22px !important;
  box-shadow: 0 0 0 2px var(--gm-line);
  animation: gm-ava-in .45s var(--gm-ease) both;
}
.gm-res-player.is-winner .gm-res-ava > :last-child { box-shadow: 0 0 0 2px var(--gm-surface-2), 0 0 0 4px var(--gm-accent); }
.gm-res-player.is-loser .gm-res-ava > :last-child { opacity: .7; filter: saturate(.55); }
.gm-res-player.is-b .gm-res-ava > :last-child { animation-delay: .06s; }
/* (the end keyframe leaves opacity alone, so a loser's avatar settles at its dimmed .7) */
@keyframes gm-ava-in { from { opacity: 0; transform: scale(.7); } to { transform: none; } }
.gm-res-pname { display: flex; align-items: center; justify-content: center; max-width: 100%; font-size: 14px; font-weight: 600; min-width: 0; }
.gm-res-pname-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-res-side { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.gm-res-side.is-w { background: #f2f3fa; box-shadow: inset 0 0 0 1px rgba(20, 22, 43, .35); }
.gm-res-side.is-b { background: #14162b; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.gm-res-score {
  flex: 0 0 auto; align-self: center; margin-bottom: 26px;
  font: 800 22px/1 var(--gm-display); font-variant-numeric: tabular-nums;
  color: var(--gm-text-2); white-space: nowrap;
}
.gm-res-score.is-vs { font-size: 20px; }
/* win: a small orange/blue confetti burst behind the winner's avatar (CSS only) */
.gm-res-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 0; pointer-events: none; }
.gm-res-burst i {
  position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 2px;
  background: var(--gm-accent); opacity: 0;
  animation: gm-burst .7s cubic-bezier(.15, .7, .3, 1) .2s both;
}
.gm-res-burst i:nth-child(even) { background: var(--gm-primary); border-radius: 50%; }
@keyframes gm-burst {
  from { transform: rotate(var(--a)) translateY(0) scale(1); opacity: 1; }
  to { transform: rotate(var(--a)) translateY(-50px) scale(.4); opacity: 0; }
}
.gm-res-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.gm-res-title { font: 800 26px/1.15 var(--gm-display); letter-spacing: -.01em; text-wrap: balance; animation: gm-rise .35s var(--gm-ease) .08s both; }
.tone-win .gm-res-title { color: var(--gm-accent-text); }
.gm-res-reason { font-size: 15px; color: var(--gm-text-2); }
.gm-res-sub { font-size: 13px; color: var(--gm-muted); }
.gm-res-rating { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.gm-res-rating-label { color: var(--gm-text-2); font-size: 14px; font-weight: 600; }
.gm-res-rating-vals { display: inline-flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.gm-res-rating-old { color: var(--gm-muted); font-size: 17px; font-weight: 600; }
.gm-res-rating-arrow { color: var(--gm-muted); font-size: 15px; }
.gm-res-rating-new { font: 800 22px/1 var(--gm-display); font-variant-numeric: tabular-nums; color: var(--gm-text); }
.gm-res-diff-num {
  display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 999px;
  font: 700 16px/1 var(--gm-font); font-variant-numeric: tabular-nums;
  background: var(--gm-surface-2); color: var(--gm-text-2);
}
.gm-res-diff-num.is-up { color: var(--gm-good); background: color-mix(in srgb, var(--gm-good) 16%, transparent); }
.gm-res-diff-num.is-down { color: var(--gm-bad); background: color-mix(in srgb, var(--gm-bad) 16%, transparent); }
.gm-res-note { text-align: center; color: var(--gm-muted); font-size: 13px; }
.gm-res-actions { display: flex; flex-direction: column; gap: 8px; }
.gm-res-row { display: flex; gap: 8px; }
.gm-res-row > .gm-btn { flex: 1 1 0; min-width: 0; padding: 0 10px; gap: 6px; }
/* Text-only links: the padding is invisible, the room is not — and they share the row by their length
   ("Посмотреть доску" needs more than "К шахматам"), so neither is cut at 320 px. */
.gm-res-row > .gm-btn-link { flex: 1 1 auto; width: auto; padding: 0 4px; }
/* "Новая партия" + its icon needs ~150 px: on screens narrower than 375 px the secondary buttons drop their
   icons rather than their words (an ellipsis on a two-word label reads as broken). */
@media (max-width: 374px) { .gm-res-row > .gm-btn-ghost .gm-ico { display: none; } }
.gm-res-offer { text-align: center; font-weight: 600; color: var(--gm-accent-text); animation: gm-pulse 1.6s infinite; }

/* fallback sheet (only when ui.sheet is unavailable) */
.gm-sheet-overlay {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(8, 9, 22, .55); animation: gm-fade .2s both;
}
.gm-sheet-overlay.is-closing { animation: gm-fade .2s reverse both; }
.gm-sheet {
  width: 100%; max-width: 520px; max-height: 90vh; overflow: auto;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  border-radius: 24px 24px 0 0; background: var(--gm-surface); color: var(--gm-text);
  font-family: var(--gm-font);
  animation: gm-rise .26s var(--gm-ease) both;
}
.gm-sheet-grip { width: 38px; height: 4px; border-radius: 2px; background: var(--gm-line); margin: 2px auto 10px; }
.gm-sheet-title { font-weight: 700; font-size: 17px; text-align: center; margin-bottom: 8px; }
@keyframes gm-fade { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------------------ loading / error state */
.gm-state {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: var(--gm-bg);
}
.gm-state-card { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; max-width: 320px; width: 100%; }
.gm-state-emoji { font-size: 54px; line-height: 1; color: var(--gm-muted); }
.gm-state-title { font: 800 19px/1.25 var(--gm-display); }
.gm-state-text { color: var(--gm-text-2); font-size: 14px; }
.gm-state-card .gm-res-row { width: 100%; margin-top: 8px; }
.gm-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--gm-surface-2); border-top-color: var(--gm-primary);
  animation: gm-spin .8s linear infinite;
}
@keyframes gm-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ eval bar + analysis line (replay) */
.gm-eval {
  position: relative; flex: 0 0 10px; width: 10px; height: 100%;
  border-radius: 6px; overflow: hidden;
  background: var(--gm-black-side);
  box-shadow: inset 0 0 0 1px var(--gm-line);
}
.gm-eval-fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 100%;
  background: var(--gm-white-side); transform-origin: bottom; transform: scaleY(.5);
  transition: transform .45s var(--gm-ease);
}
[data-theme='light'] .gm-eval { box-shadow: inset 0 0 0 1px rgba(20, 22, 43, .25); }
[data-theme='light'] .gm-eval-fill { background: #fff; box-shadow: inset 0 0 0 1px rgba(20, 22, 43, .12); }
.gm-eval.is-flipped .gm-eval-fill { top: 0; bottom: auto; transform-origin: top; }
.gm-eval-label { display: none; }
.gm-eval::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: color-mix(in srgb, var(--gm-accent) 80%, transparent); }
.gm-eval.is-empty .gm-eval-fill { opacity: .5; }
.gm-eval.is-locked { opacity: .35; }

.gm-ana {
  flex: 0 0 34px; width: var(--gm-bs, 100%); max-width: 100%;
  display: flex; align-items: center; gap: 10px; padding: 0 var(--gm-gut);
  font-size: 13px; color: var(--gm-muted); min-width: 0; overflow: hidden; white-space: nowrap;
}
.gm-ana.is-off { visibility: hidden; }
.gm-ana-eval {
  min-width: 52px; height: 26px; padding: 0 8px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 14px/1 var(--gm-font); font-variant-numeric: tabular-nums;
  background: var(--gm-surface-2); color: var(--gm-text);
}
.gm-ana-eval.is-white { background: var(--gm-white-side); color: var(--gm-black-side); box-shadow: inset 0 0 0 1px rgba(20, 22, 43, .12); }
.gm-ana-eval.is-black { background: var(--gm-black-side); color: var(--gm-white-side); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.gm-ana.is-busy .gm-ana-eval { opacity: .75; }
.gm-ana-best { display: inline-flex; align-items: center; gap: 4px; color: var(--gm-text); }
.gm-ana-best .gm-ico { width: 15px; height: 15px; color: var(--gm-accent-text); }
.gm-ana-depth { margin-left: auto; font-size: 12px; opacity: .8; }
.gm-ana-text { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gm-ana.is-locked .gm-ico { color: var(--gm-accent-text); }
.gm-ana.is-locked .gm-ana-text { flex: 1 1 auto; color: var(--gm-text-2); }
.gm-ana.is-locked .gm-btn { width: auto; flex: 0 0 auto; height: 28px; padding: 0 12px; font-size: 13px; border-radius: 9px; box-shadow: none; }
/* VS+ teaser: the button is the orange VS+ chip (lock icon + "Оценка позиции…" before it). */
.gm-ana.is-locked .gm-btn-vsplus { min-width: 56px; font-weight: 800; letter-spacing: .02em; background: var(--gm-accent); color: var(--gm-accent-ink); }

.gm-score { min-width: 28px; text-align: center; font: 800 18px/1 var(--gm-display); font-variant-numeric: tabular-nums; color: var(--gm-muted); }
.gm-score.is-win { color: var(--gm-accent-text); }

.gm-live-link {
  flex: 0 0 auto; align-self: center; margin: 0 0 4px;
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--gm-bad) 14%, transparent); color: var(--gm-text);
  font: 600 13px/1 var(--gm-font);
}
.gm-live-link .gm-ico { width: 14px; height: 14px; }
.gm-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gm-bad); animation: gm-pulse 1.2s infinite; }

/* ------------------------------------------------------------------ AI setup */
.gm-ai.is-setup { overflow-y: auto; scroll-padding-bottom: 84px; }
.gm-setup {
  width: 100%; max-width: 480px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 12px;
  padding: 12px 16px 24px;
  animation: gm-rise .3s var(--gm-ease) both;
}
.gm-setup-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 8px 0 4px; }
/* The computer's robot avatar (same picture as on its player bar). */
.gm-setup-emblem {
  width: 72px; height: 72px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  box-shadow: 0 0 0 2px var(--gm-line), var(--gm-shadow);
}
.gm-setup-emblem > :first-child { width: 100% !important; height: 100% !important; border-radius: 50%; font-size: 28px !important; }
.gm-setup-title { margin: 8px 0 0; font: 800 22px/1.2 var(--gm-display); letter-spacing: -.01em; text-wrap: balance; }
.gm-setup-sub { margin: 0; color: var(--gm-text-2); font-size: 15px; line-height: 1.4; text-wrap: balance; }
.gm-setup-or { text-align: center; color: var(--gm-muted); font-size: 13px; font-weight: 600; }
.gm-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px 16px; border-radius: 16px;
  background: var(--gm-surface); border: 1px solid var(--gm-divider);
}
/* Section label like the mockups ("Во что играем", "Настройки"): 14 px, semibold, secondary — not shouting caps. */
.gm-card-label { font-size: 14px; font-weight: 600; color: var(--gm-text-2); }
.gm-lv-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.gm-lv-num { font-size: 12px; color: var(--gm-muted); font-weight: 600; }
.gm-lv-name { font-size: 19px; font-weight: 700; }
.gm-lv-elo {
  flex: 0 0 auto; padding: 4px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--gm-primary) 18%, transparent); color: var(--gm-info);
  font: 700 14px/1.2 var(--gm-font); font-variant-numeric: tabular-nums;
}
.gm-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer;
  --gm-range-pct: 28%;
}
.gm-range::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--gm-primary) var(--gm-range-pct), var(--gm-surface-2) var(--gm-range-pct));
}
.gm-range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--gm-surface-2); }
.gm-range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--gm-primary); }
.gm-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%;
  background: #fff; border: 0; box-shadow: 0 2px 8px rgba(5, 7, 20, .35), 0 0 0 4px color-mix(in srgb, var(--gm-primary) 35%, transparent);
}
.gm-range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 2px 8px rgba(5, 7, 20, .35); }
.gm-range-ticks { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; margin-top: -4px; }
.gm-tick {
  height: 30px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--gm-surface-2); color: var(--gm-muted);
  font: 700 13px/1 var(--gm-font); transition: background .15s, color .15s;
}
.gm-tick.is-on { background: color-mix(in srgb, var(--gm-primary) 24%, var(--gm-surface-2)); color: var(--gm-text); }
.gm-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
/* Colour choice: the mockups' selectable game cards (2 px blue border when chosen). */
.gm-seg-btn {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-width: 0; padding: 12px 6px; border-radius: 14px; cursor: pointer; text-align: center; overflow-wrap: break-word;
  border: 2px solid transparent; background: var(--gm-surface-2); color: var(--gm-text);
  font: 600 14px/1 var(--gm-font);
  transition: border-color .15s, background .15s, transform .1s;
}
.gm-seg-btn > span:last-child { max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }
/* Small phones: a whole «Случайно» still fits its card (it wraps mid-word only with very large system text). */
@media (max-width: 340px) { .gm-seg { gap: 6px; } .gm-seg-btn { padding-inline: 3px; font-size: 12.5px; } }
.gm-seg-btn:active { transform: scale(.97); }
.gm-seg-btn.is-on { border-color: var(--gm-primary); background: color-mix(in srgb, var(--gm-primary) 10%, var(--gm-surface-2)); }
.gm-seg-king { width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(142, 148, 184, .5); }
.gm-seg-king.is-w { background: radial-gradient(circle at 35% 30%, #fff, #d8dbea); }
.gm-seg-king.is-b { background: radial-gradient(circle at 35% 30%, #3a3f6b, #0d0f22); }
.gm-seg-king.is-r { background: linear-gradient(90deg, #f2f3fa 50%, #14162b 50%); }
.gm-setup-cta {
  position: sticky; bottom: 0; z-index: 2;
  margin: 0 -16px; padding: 12px 16px calc(var(--safe-bottom, 0px) + 8px);
  background: linear-gradient(to top, var(--gm-bg) 72%, transparent);
}
/* Saved game: the orange-framed card of the mockups' invitation. */
.gm-resume {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px; border-radius: 18px; cursor: pointer; text-align: left;
  border: 2px solid var(--gm-accent);
  background: var(--gm-surface);
  color: var(--gm-text); font-family: var(--gm-font);
  transition: transform .1s;
}
.gm-resume:active { transform: scale(.98); }
.gm-resume-ico {
  flex: 0 0 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: var(--gm-accent); color: var(--gm-accent-ink);
}
.gm-resume-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gm-resume-title { font-size: 16px; font-weight: 700; }
.gm-resume-sub { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gm-text-2); min-width: 0; }
.gm-resume-sub-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.gm-resume-side { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; color: var(--gm-text); font-weight: 600; }
.gm-resume-color { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; }
.gm-resume-color.is-w { background: #f2f3fa; box-shadow: inset 0 0 0 1px rgba(20, 22, 43, .35); }
.gm-resume-color.is-b { background: #14162b; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.gm-resume-chev { flex: 0 0 auto; color: var(--gm-muted); }
.gm-resume-chev .gm-ico { width: 20px; height: 20px; }

/* ------------------------------------------------------------------ states */
.gm-screen.is-history .gm-board-box::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 4px;
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--gm-primary) 60%, transparent);
}
.gm-screen.is-loading .gm-stage, .gm-screen.is-loading .gm-moves-strip, .gm-screen.is-loading .gm-actions { visibility: hidden; }

/* ------------------------------------------------------------------ responsive */
/* Tall phones: spend the spare height on presence (bigger bars, avatars and clocks). */
@media (min-height: 700px) {
  .gm-screen { --gm-bar-h: 60px; --gm-strip-h: 44px; --gm-actions-h: 62px; --gm-ava: 40px; }
  .gm-name { font-size: 16px; }
  .gm-clock { height: 46px; line-height: 46px; font-size: 28px; }
  .gm-tool { min-height: 48px; }
}
/* Very tall viewports (Telegram fullscreen, browsers): the board is width-bound, so the top-anchored block
   spends a little more of the spare height on the bars (avatars, clocks) instead of a bigger gap above the toolbar. */
@media (min-height: 780px) {
  .gm-screen { --gm-bar-h: 68px; --gm-strip-h: 46px; --gm-actions-h: 66px; --gm-ava: 44px; }
  .gm-name { font-size: 17px; }
  .gm-clock { height: 50px; line-height: 50px; font-size: 30px; min-width: 112px; }
  .gm-tool { min-height: 52px; }
}
@media (max-height: 640px) {
  .gm-screen { --gm-bar-h: 46px; --gm-head-h: 28px; --gm-strip-h: 36px; --gm-actions-h: 56px; --gm-ava: 30px; }
  .gm-clock { height: 36px; line-height: 36px; font-size: 21px; min-width: 86px; border-radius: 10px; }
  .gm-name { font-size: 14px; }
  .gm-tool { min-height: 42px; }
  .gm-tool-label { display: none; }
  .gm-ana { flex-basis: 28px; }
  .gm-cap-row { height: 18px; }
  .gm-cap { width: 16px; height: 16px; flex-basis: 16px; }
  .gm-cap + .gm-cap { margin-left: -8px; }
  .gm-res { gap: 12px; }
  .gm-res-players { padding: 14px 10px 12px; }
  .gm-res-ava { width: 48px; height: 48px; }
  .gm-res-score { margin-bottom: 24px; font-size: 20px; }
  .gm-res-title { font-size: 23px; }
}
@media (max-width: 440px) {
  .gm-tool.is-nav { flex: 0 0 44px; }
  .gm-tool-label { font-size: 10.5px; letter-spacing: -.01em; }
}
@media (max-width: 360px) {
  .gm-screen { --gm-gut: 10px; }
  .gm-head-sep, .gm-head-rated { display: none; }
  .gm-clock { min-width: 88px; padding: 0 10px; font-size: 22px; }
  .gm-bar { gap: 8px; }
  .gm-tool-label { font-size: 10px; }
  .gm-tool.is-nav { flex-basis: 40px; min-width: 40px; }
  .gm-res-players { gap: 8px; padding-left: 8px; padding-right: 8px; }
  .gm-res-title { font-size: 23px; }
  .gm-res-row > .gm-btn { font-size: 15px; padding: 0 8px; }
  /* two buttons side by side at 320 px: the secondary ones drop their icons, the links shrink a little */
  .gm-res-row > .gm-btn-ghost .gm-ico { display: none; }
  .gm-res-row > .gm-btn-link { font-size: 14px; padding: 0 4px; }
  .gm-setup-title { font-size: 20px; }
}
@media (min-width: 700px) and (min-height: 700px) {
  .gm-screen { --gm-bar-h: 60px; --gm-actions-h: 64px; --gm-gut: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .gm-screen *, .gm-sheet-overlay *, .gm-res * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .gm-clock.is-low.is-running { animation: none; }
  .gm-res-burst { display: none; }
}

/* move-list figurines: black pieces get a faint light rim on the dark theme */
.gm-fig-b { filter: drop-shadow(0 0 .6px rgba(255, 255, 255, .7)); }
[data-theme='light'] .gm-fig-b { filter: none; }
[data-theme='light'] .gm-chip.is-active .gm-fig-b { filter: drop-shadow(0 0 .6px rgba(255, 255, 255, .7)); }
.gm-fig-w { filter: drop-shadow(0 .5px .5px rgba(0, 0, 0, .35)); }
body.browser-back .gm-head-sub { padding-left: 54px; }
@media (max-height: 640px) {
  .gm-offer { padding: 8px; gap: 6px 8px; }
  .gm-offer-ico { flex-basis: 26px; height: 26px; }
  .gm-offer-text { font-size: 14px; }
  .gm-offer .gm-btn, .gm-offer.is-confirm .gm-btn { height: 40px; }
}

/* ------------------------------------------------------------------ quick reactions */
.gm-react-pop {
  position: absolute; left: var(--gm-gut); right: var(--gm-gut); bottom: calc(100% + 2px); z-index: 6;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
  padding: 8px;
  border-radius: 18px;
  background: var(--gm-surface);
  border: 1px solid var(--gm-line);
  box-shadow: 0 -10px 30px rgba(5, 7, 20, .35);
  animation: gm-rise .22s var(--gm-ease) both;
}
.gm-react-pop[hidden] { display: none; }
[data-theme='light'] .gm-react-pop { box-shadow: 0 -8px 26px rgba(20, 22, 43, .14); }
.gm-react-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 56px; padding: 6px 4px; min-width: 0;
  border: 0; border-radius: 12px; cursor: pointer;
  background: var(--gm-surface-2); color: var(--gm-text);
  font: 600 12px/1.15 var(--gm-font);
  transition: transform .1s, background .15s;
}
.gm-react-item:active { transform: scale(.94); background: color-mix(in srgb, var(--gm-primary) 22%, var(--gm-surface-2)); }
@media (hover: hover) { .gm-react-item:hover { background: color-mix(in srgb, var(--gm-primary) 14%, var(--gm-surface-2)); } }
.gm-react-item .gm-react-emoji { font-size: 22px; line-height: 1; }
.gm-react-label { max-width: 100%; text-align: center; text-wrap: balance; }

/* speech bubble on a player bar: the top bar's bubble hangs down, the bottom bar's rises up */
.gm-react-bubble {
  position: absolute; z-index: 7; left: calc(var(--gm-gut) + var(--gm-ava) + 4px);
  display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - var(--gm-ava) - 2 * var(--gm-gut) - 8px);
  padding: 7px 12px 7px 9px; border-radius: 16px;
  background: var(--gm-surface); color: var(--gm-text);
  border: 1.5px solid color-mix(in srgb, var(--gm-primary) 55%, var(--gm-line));
  box-shadow: 0 8px 22px rgba(5, 7, 20, .38);
  font: 600 14px/1.15 var(--gm-font); white-space: nowrap; pointer-events: none;
  animation: gm-bubble-in .32s cubic-bezier(.2, 1.4, .4, 1) both;
}
[data-theme='light'] .gm-react-bubble { box-shadow: 0 8px 20px rgba(20, 22, 43, .16); }
.gm-react-bubble .gm-react-emoji { font-size: 18px; line-height: 1; }
.gm-react-bubble .gm-react-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gm-react-bubble.is-mine { border-color: var(--gm-line); }
.gm-bar-top .gm-react-bubble { top: calc(100% - 6px); border-top-left-radius: 6px; transform-origin: 12px 0; }
.gm-bar-bottom .gm-react-bubble { bottom: calc(100% - 6px); border-bottom-left-radius: 6px; transform-origin: 12px 100%; }
.gm-react-bubble.is-leaving { animation: gm-bubble-out .25s ease both; }
@keyframes gm-bubble-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes gm-bubble-out { to { opacity: 0; transform: scale(.85); } }
@media (min-width: 521px) { .gm-react-bubble { left: calc(var(--gm-ava) + 8px); } }