@font-face { font-family: 'Golos Text'; src: url('/assets/fonts/golos-text.woff') format('woff'); font-weight: 400 600; font-display: swap; }
@font-face { font-family: 'Geologica'; src: url('/assets/fonts/geologica.woff') format('woff'); font-weight: 500 800; font-display: swap; }
/* Tulpar — "sky over the steppe"
   Pale sky, felt-and-teal board, deep blue ink, sun-gold accent.
   Geologica (sharp cut, full Kazakh alphabet) for display, Golos Text for everything else. */

:root {
  --page: #E6EEF1;
  --page-deep: #D8E5E9;
  --surface: #F5F9FA;
  --surface-2: #EDF3F5;
  --ink: #11314A;
  --ink-soft: #4B6678;
  --ink-faint: #7C93A1;
  --rule: #C7D8DE;
  --gold: #D3992A;
  --gold-wash: rgba(211, 153, 42, .40);
  --gold-ink: #8A5E0C;
  --hero: #11314A;
  --hero-ink: #F2EBDA;
  --sq-light: #EEDFBC;
  --sq-dark: #5B8D97;
  --coord-on-light: #5B8D97;
  --coord-on-dark: #EEDFBC;
  --select: rgba(17, 49, 74, .22);
  --hint-dot: rgba(17, 49, 74, .30);
  --premove: rgba(92, 84, 196, .36); --premove-dot: rgba(92, 84, 196, .55);
  --pw-fill: #FBF5E6; --pw-line: #11314A;
  --pb-fill: #1D3A52; --pb-line: #0B1E2E; --pb-detail: #E9D9B4;
  --pw-hi: #FFFCF4; --pw-lo: #E7D5AE; --pb-hi: #3D6486; --pb-lo: #10263A;
  --orn-w: #B07D22; --orn-b: #E2B24C;
  --bar-white: #FBF5E6; --bar-black: #1D3A52;
  --c-best: #2E8B69; --c-excellent: #4F9A7C; --c-good: #7C9E8F; --c-book: #8B6FB0;
  --c-inaccuracy: #C99A1E; --c-mistake: #D9772B; --c-blunder: #C2413B; --c-brilliant: #1597A5;
  --win: #2E8B69; --loss: #C2413B; --draw: #7C93A1;
  --shadow: 0 1px 0 rgba(17, 49, 74, .06), 0 18px 40px -24px rgba(17, 49, 74, .55);
  --radius: 10px;
  --font-ui: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Geologica", "Golos Text", system-ui, sans-serif;
  --nav-h: 64px;
  color-scheme: light;
}

:root[data-theme="night"] {
  --page: #0F2433;
  --page-deep: #0B1C28;
  --surface: #14303F;
  --surface-2: #183746;
  --ink: #E4EDEF;
  --ink-soft: #9DB4BE;
  --ink-faint: #6E8794;
  --rule: #24465A;
  --gold: #E3AE45;
  --gold-wash: rgba(227, 174, 69, .38);
  --gold-ink: #E3AE45;
  --hero: #0B1C28;
  --sq-light: #CDBE96;
  --sq-dark: #3F6E78;
  --coord-on-light: #3F6E78;
  --coord-on-dark: #CDBE96;
  --select: rgba(10, 25, 36, .32);
  --hint-dot: rgba(10, 25, 36, .40);
  --premove: rgba(132, 122, 236, .40); --premove-dot: rgba(160, 150, 250, .65);
  --bar-white: #F1E8D2; --bar-black: #081620;
  --c-best: #47B38B; --c-excellent: #64B395; --c-good: #8DAFA0; --c-book: #A98ED0;
  --c-inaccuracy: #E0B23A; --c-mistake: #EC8B45; --c-blunder: #E0605A; --c-brilliant: #38C4CF;
  --win: #47B38B; --loss: #E0605A;
  --shadow: 0 18px 40px -22px rgba(0, 0, 0, .75);
  color-scheme: dark;
}

/* board palettes (Settings) */
:root[data-board="ice"] { --sq-light: #E3ECEF; --sq-dark: #7F9FB0; --coord-on-light: #7F9FB0; --coord-on-dark: #E3ECEF; }
:root[data-board="walnut"] { --sq-light: #EBD3B0; --sq-dark: #A9774E; --coord-on-light: #A9774E; --coord-on-dark: #EBD3B0; }
:root[data-board="grass"] { --sq-light: #E8E6C9; --sq-dark: #6E9468; --coord-on-light: #6E9468; --coord-on-dark: #E8E6C9; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--page);
  color: var(--ink);
  font: 400 15px/1.5 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
}
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
h1, h2, h3 { margin: 0; font-weight: 700; }
p { margin: 0; }

/* ------------------------------------------------------------- top bar */
.topbar {
  position: sticky; top: 0; z-index: 40;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 28px;
  padding: 0 clamp(16px, 3vw, 40px);
  background: color-mix(in srgb, var(--page) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-mark { width: 34px; height: 34px; display: block; }
.brand-mark svg { width: 100%; height: 100%; display: block; }
.brand-mark .pc-w path:nth-of-type(2) { fill: var(--gold); }
.brand-name { font: 700 21px/1 var(--font-display); letter-spacing: -0.02em; }

.nav { display: flex; gap: 4px; }
.nav a {
  text-decoration: none; color: var(--ink-soft); font-weight: 500;
  padding: 8px 12px; border-radius: 8px;
}
.nav a:hover { color: var(--ink); background: var(--surface-2); }
.nav a[aria-current="page"] { color: var(--ink); background: var(--surface); box-shadow: inset 0 -2px 0 var(--gold); }

.top-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.lang-switch { display: flex; border: 1px solid var(--rule); border-radius: 999px; overflow: hidden; }
.lang-switch button {
  border: 0; background: transparent; padding: 5px 10px; font-size: 13px; font-weight: 600;
  color: var(--ink-soft); cursor: pointer;
}
.lang-switch button[aria-pressed="true"] { background: var(--ink); color: var(--page); }
.icon-btn {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--rule); background: var(--surface); border-radius: 999px; cursor: pointer;
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { border-color: var(--ink-soft); }

/* mobile tab bar */
.tabbar { display: none; }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--rule); background: var(--surface); color: var(--ink);
  padding: 9px 16px; border-radius: 999px; cursor: pointer; font-weight: 500; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn:hover:not(:disabled) { border-color: var(--ink-soft); }
.btn:disabled { opacity: .45; cursor: default; }
.btn-primary { background: var(--ink); border-color: var(--ink); color: var(--page); }
.btn-primary:hover:not(:disabled) { background: var(--ink-soft); border-color: var(--ink-soft); }
.btn-gold { background: var(--gold); border-color: var(--gold); color: #1B1406; font-weight: 600; }
.btn-gold:hover:not(:disabled) { filter: brightness(1.06); border-color: var(--gold); }
.btn-lg { padding: 13px 22px; font-size: 16px; }
.btn-sm { padding: 6px 12px; font-size: 13.5px; }
.btn svg { width: 17px; height: 17px; }
.link {
  background: none; border: 0; padding: 0; color: var(--ink-soft); cursor: pointer; font-size: 14px;
  text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px;
}
.link:hover { color: var(--ink); text-decoration-color: var(--ink-soft); }

/* ---------------------------------------------------------------- forms */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.input, select.input, textarea.input {
  border: 1px solid var(--rule); background: var(--surface); border-radius: 8px;
  padding: 10px 12px; width: 100%; min-width: 0;
}
textarea.input { resize: vertical; min-height: 120px; font-size: 13px; }
.input:focus { outline: 2px solid var(--gold); outline-offset: 0; border-color: transparent; }

.seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span {
  display: block; padding: 7px 14px; border: 1px solid var(--rule); border-radius: 999px; cursor: pointer;
  font-weight: 500; font-size: 14px;
}
.seg input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--page); }
.seg input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ----------------------------------------------------------------- main */
.view { min-height: calc(100dvh - var(--nav-h)); }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px); }

/* --------------------------------------------------------------- home */
.hero {
  background: var(--hero);
  color: var(--hero-ink);
  position: relative;
  overflow: hidden;
}
.hero::after {
  /* the steppe horizon */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  background: linear-gradient(to top, rgba(211, 153, 42, .10), transparent);
  pointer-events: none;
}
.hero-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: clamp(28px, 5vw, 72px);
  align-items: center; padding-top: clamp(40px, 7vw, 88px); padding-bottom: clamp(48px, 7vw, 96px);
  position: relative; z-index: 1;
}
.hero h1 {
  font: 700 clamp(36px, 5.4vw, 64px)/1.04 var(--font-display);
  letter-spacing: -0.035em;
  max-width: 13ch;
}
.hero-lead { margin-top: 20px; font-size: 18px; line-height: 1.55; max-width: 46ch; color: rgba(242, 235, 218, .82); }
.hero-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero .btn:not(.btn-gold) { background: transparent; color: var(--hero-ink); border-color: rgba(242, 235, 218, .35); }
.hero .btn:not(.btn-gold):hover { border-color: var(--hero-ink); }
.hero-board { position: relative; }
.hero-board .board { width: 100%; height: auto; aspect-ratio: 1; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.hero-caption {
  display: flex; justify-content: space-between; gap: 12px; margin-top: 12px;
  font-size: 13.5px; color: rgba(242, 235, 218, .7);
}
.hero-caption strong { color: var(--hero-ink); font-weight: 600; }

.section { padding: clamp(48px, 7vw, 88px) 0; }
.section + .section { padding-top: 0; }
.section-title { font: 700 clamp(26px, 3vw, 36px)/1.15 var(--font-display); letter-spacing: -0.025em; max-width: 22ch; }
.section-lead { margin-top: 12px; color: var(--ink-soft); font-size: 17px; max-width: 58ch; }

.import-band {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center;
}
.import-form { display: grid; gap: 12px; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 22px; }
.import-row { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 12px; }
.import-row svg, .import-row img { width: 28px; height: 28px; }
.source-badge {
  width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center;
  font: 700 12px/1 var(--font-display); color: #fff;
}
.source-badge.chesscom { background: #6E9D3E; }
.source-badge.lichess { background: #2C2C2C; }
:root[data-theme="night"] .source-badge.lichess { background: #F0F0F0; color: #1A1A1A; }

.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 36px; }
.feature { border-top: 2px solid var(--ink); padding-top: 18px; }
.feature h3 { font: 700 19px/1.25 var(--font-display); letter-spacing: -0.015em; }
.feature p { margin-top: 10px; color: var(--ink-soft); }
.feature .link { margin-top: 12px; display: inline-block; }

.footer {
  border-top: 1px solid var(--rule); padding: 28px 0 40px; color: var(--ink-soft); font-size: 14px;
}
.footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; }
.footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--ink); text-decoration: underline; }

/* ------------------------------------------------------------- app pages */
.stage {
  --panel: 360px;
  --board: min(calc(100dvh - var(--nav-h) - 128px), calc(100vw - var(--panel) - 150px), 760px);
  display: flex; justify-content: center; align-items: flex-start;
  gap: clamp(20px, 3vw, 44px);
  padding: 22px clamp(16px, 3vw, 40px) 40px;
}
.play-col { display: flex; gap: 12px; align-items: stretch; position: sticky; top: calc(var(--nav-h) + 14px); }
.moves { position: relative; }
.board-col { display: flex; flex-direction: column; gap: 8px; width: var(--board); }
.panel { width: var(--panel); display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.panel-block { border-top: 1px solid var(--rule); padding-top: 14px; }
.panel-title { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 8px; }

.side-line {
  height: 30px; display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--ink-soft);
  white-space: nowrap; min-width: 0;
}
.side-line .who { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.side-line .rating { color: var(--ink-faint); font-weight: 500; }
.side-line .captured { display: flex; align-items: center; }
.side-line .captured .pc { width: 19px; height: 19px; margin-right: -6px; }
.side-line .adv { margin-left: 6px; font-variant-numeric: tabular-nums; }
.side-line .turn-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); visibility: hidden; flex: none; }
.side-line.to-move .turn-dot { visibility: visible; }
.side-line .clock {
  margin-left: auto; font: 600 17px/1 var(--font-ui); font-variant-numeric: tabular-nums;
  padding: 5px 10px; border-radius: 6px; background: var(--surface); border: 1px solid var(--rule); color: var(--ink);
}
.side-line.to-move .clock { background: var(--ink); color: var(--page); border-color: var(--ink); }
.side-line .clock.low { background: var(--c-blunder); border-color: var(--c-blunder); color: #fff; }

.status { font-size: 19px; font-weight: 600; line-height: 1.3; }
.status .sub { display: block; font-size: 14px; font-weight: 400; color: var(--ink-soft); margin-top: 2px; }

/* ----------------------------------------------------------------- board */
.board {
  position: relative; width: var(--board); height: var(--board);
  border-radius: 6px; overflow: hidden; box-shadow: var(--shadow);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.board .squares, .board .pieces, .board .arrows { position: absolute; inset: 0; }
.board .arrows { width: 100%; height: 100%; pointer-events: none; }
.sq { position: absolute; width: 12.5%; height: 12.5%; }
.sq.light { background: var(--sq-light); }
.sq.dark { background: var(--sq-dark); }
.sq.last::after, .sq.sel::after, .sq.check::after { content: ""; position: absolute; inset: 0; }
.sq.last::after { background: var(--gold-wash); }
.sq.sel::after { background: var(--select); }
.sq.check::after { background: radial-gradient(circle, #C2413B 0%, rgba(194, 65, 59, .55) 45%, transparent 72%); }
.sq.target::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 28%; height: 28%;
  transform: translate(-50%, -50%); border-radius: 50%; background: var(--hint-dot); z-index: 1;
}
.sq.target.capture::before { width: 92%; height: 92%; background: none; border: 5px solid var(--hint-dot); }
.coord { position: absolute; font-size: clamp(9px, calc(var(--board, 480px) / 52), 13px); font-weight: 600; line-height: 1; pointer-events: none; }
.coord.file { right: 4px; bottom: 3px; }
.coord.rank { left: 4px; top: 4px; }
.sq.light .coord { color: var(--coord-on-light); }
.sq.dark .coord { color: var(--coord-on-dark); }
.board.no-coords .coord { display: none; }
.piece { position: absolute; left: 0; top: 0; width: 12.5%; height: 12.5%; pointer-events: none; will-change: transform; }
.piece.moving { z-index: 3; }
.piece .mb, .piece .mb-in { width: 100%; height: 100%; }
.piece.dying { z-index: 1; }
.piece.dying .pc { animation: pc-die .26s ease-in .14s forwards; }
.piece.appear .pc { animation: pc-appear .24s ease-out; }
.piece.landed .pc { animation: pc-land .2s ease-out; }
@keyframes pc-die { to { opacity: 0; transform: scale(.55); } }
@keyframes pc-appear { from { opacity: 0; transform: scale(.7); } }
@keyframes pc-land { from { transform: scale(1.06); } }
.board .fx { position: absolute; width: 0; height: 0; overflow: hidden; }
.sq.premove::after { content: ""; position: absolute; inset: 0; background: var(--premove); }
.board.premode .sq.target::before { background: var(--premove-dot); }
.board.premode .sq.target.capture::before { background: none; border-color: var(--premove-dot); }
.piece.lifted { opacity: .35; }
.piece .pc, .ghost .pc { width: 100%; height: 100%; display: block; }
.ghost { position: fixed; pointer-events: none; z-index: 80; filter: drop-shadow(0 8px 10px rgba(11, 30, 46, .35)); }
.pc .b { stroke-width: 3.2; stroke-linejoin: round; stroke-linecap: round; }
.pc .d { fill: none; stroke-width: 2.6; stroke-linecap: round; }
.pc-w .b { fill: var(--pw-fill); stroke: var(--pw-line); }
.pc-w .d { stroke: var(--pw-line); }
.pc-w .e { fill: var(--pw-line); }
.pc-b .b { fill: var(--pb-fill); stroke: var(--pb-line); }
.pc-b .d { stroke: var(--pb-detail); }
.pc-b .e { fill: var(--pb-detail); }
/* shaded sets: gradients from the colour scheme, a soft highlight, gold ornament */
.pgs-w1 { stop-color: var(--pw-hi); } .pgs-w2 { stop-color: var(--pw-lo); }
.pgs-b1 { stop-color: var(--pb-hi); } .pgs-b2 { stop-color: var(--pb-lo); }
.set-tulpar.pc-w .b, .set-oyu.pc-w .b { fill: url(#pg-w); }
.set-tulpar.pc-b .b, .set-oyu.pc-b .b { fill: url(#pg-b); }
.set-tulpar .b, .set-oyu .b { stroke-width: 2.8; }
.pc .h { fill: none; stroke-width: 2.3; stroke-linecap: round; }
.pc-w .h { stroke: rgba(255, 255, 255, .8); }
.pc-b .h { stroke: rgba(255, 255, 255, .2); }
.pc .o { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pc .of { stroke: none; }
.pc-w .o { stroke: var(--orn-w); } .pc-w .of { fill: var(--orn-w); }
.pc-b .o { stroke: var(--orn-b); } .pc-b .of { fill: var(--orn-b); }
/* birch: the wood carries its own colours */
.set-kaiyn .b { stroke-width: 2.6; }
.set-kaiyn.pc-w .b { fill: url(#pt-birch-w); stroke: #4A3216; }
.set-kaiyn.pc-b .b { fill: url(#pt-birch-b); stroke: #1E1008; }
.set-kaiyn .g { fill: none; stroke-width: 1.7; stroke-linecap: round; }
.set-kaiyn.pc-w .g { stroke: rgba(98, 66, 30, .75); }
.set-kaiyn.pc-b .g { stroke: rgba(236, 204, 150, .5); }
.set-kaiyn.pc-w .e { fill: #4A3418; } .set-kaiyn.pc-b .e { fill: #F0D9AE; }
.set-kaiyn.pc-w .h { stroke: rgba(255, 250, 235, .7); } .set-kaiyn.pc-b .h { stroke: rgba(255, 220, 170, .18); }
:root[data-theme="night"] .side-line .pc-b .b { stroke: var(--ink-soft); }
.badge-sq {
  position: absolute; width: 4.4%; height: 4.4%; min-width: 16px; min-height: 16px; border-radius: 50%;
  display: grid; place-items: center; font: 700 10px/1 var(--font-ui); color: #fff; z-index: 3;
  transform: translate(-40%, -40%); box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}
.promo {
  position: absolute; width: 12.5%; display: flex; flex-direction: column; background: var(--surface);
  box-shadow: 0 10px 30px rgba(11, 30, 46, .4); border-radius: 6px; overflow: hidden; z-index: 20;
}
.promo button { aspect-ratio: 1; border: 0; background: transparent; padding: 6%; cursor: pointer; }
.promo button:hover, .promo button:focus-visible { background: var(--gold-wash); }
.arrow-hint { fill: var(--gold); opacity: .85; }
.arrow-best { fill: var(--c-best); opacity: .8; }
.arrow-alt { fill: var(--ink-faint); opacity: .55; }

/* ---------------------------------------------------------------- eval bar */
.evalbar {
  width: 14px; margin: 38px 0; border-radius: 7px; overflow: hidden; background: var(--bar-black);
  position: relative; box-shadow: inset 0 0 0 1px rgba(11, 30, 46, .25); flex: none;
}
.evalbar-white { position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background: var(--bar-white); transition: height .45s cubic-bezier(.3, .7, .3, 1); }
.evalbar.flipped .evalbar-white { top: 0; bottom: auto; }
.evalbar::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--gold); opacity: .8; }
.evalbar.off { visibility: hidden; }

.eval-row { display: flex; align-items: baseline; gap: 12px; }
.eval-num { font: 700 32px/1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.eval-note { color: var(--ink-soft); font-size: 14px; }
.stats { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 12px 0 0; }
.stats div { display: flex; flex-direction: column; }
.stats dt { font-size: 12.5px; color: var(--ink-soft); }
.stats dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.lines { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.lines li { display: grid; grid-template-columns: 58px 1fr; gap: 8px; font-size: 14px; align-items: baseline; }
.lines .ln-score { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; padding: 1px 6px; border-radius: 5px; background: var(--surface-2); }
.lines .ln-moves { color: var(--ink-soft); overflow-wrap: anywhere; }
.lines .ln-moves b { color: var(--ink); }

/* ------------------------------------------------------------- move list */
.moves {
  max-height: clamp(160px, calc(var(--board) - 420px), 420px); overflow-y: auto; scrollbar-width: thin;
  display: grid; grid-template-columns: 2.6em 1fr 1fr; align-content: start; row-gap: 1px;
}
.moves .num { color: var(--ink-faint); padding: 3px 0; font-variant-numeric: tabular-nums; }
.moves .mv {
  text-align: left; border: 0; background: none; padding: 3px 8px; border-radius: 5px; cursor: pointer;
  font-weight: 500; display: flex; align-items: center; gap: 6px; min-width: 0;
}
.moves .mv:hover { background: var(--select); }
.moves .mv.current { background: var(--gold-wash); }
.moves .mv .tag { font-size: 11px; font-weight: 700; padding: 0 5px; border-radius: 4px; color: #fff; line-height: 16px; }
.moves .empty { grid-column: 1 / -1; color: var(--ink-soft); padding: 4px 0; }
.tag.blunder, .dot.blunder { background: var(--c-blunder); }
.tag.brilliant, .dot.brilliant { background: var(--c-brilliant); }
.tag.mistake, .dot.mistake { background: var(--c-mistake); }
.tag.inaccuracy, .dot.inaccuracy { background: var(--c-inaccuracy); }
.tag.best, .dot.best { background: var(--c-best); }
.tag.excellent, .dot.excellent { background: var(--c-excellent); }
.tag.good, .dot.good { background: var(--c-good); }
.tag.book, .dot.book { background: var(--c-book); }
.browse { display: flex; gap: 6px; margin-top: 10px; }
.browse .btn { width: 44px; padding: 7px 0; }

/* --------------------------------------------------------------- review */
.review-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.acc-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; }
.acc-card .who { font-size: 13px; color: var(--ink-soft); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-card .acc { font: 700 28px/1.1 var(--font-display); letter-spacing: -0.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.acc-card .acc small { font: 500 13px var(--font-ui); color: var(--ink-soft); margin-left: 4px; letter-spacing: 0; }
.class-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.class-table td { padding: 4px 0; font-variant-numeric: tabular-nums; }
.class-table td:nth-child(2), .class-table td:nth-child(4) { text-align: center; width: 44px; font-weight: 600; }
.class-table .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.graph { width: 100%; height: 110px; display: block; cursor: pointer; border-radius: 8px; background: var(--surface); border: 1px solid var(--rule); }
.graph .g-white { fill: var(--bar-white); }
.graph .g-bg { fill: var(--bar-black); }
.graph .g-mid { stroke: var(--gold); stroke-width: 1; opacity: .7; }
.graph .g-cur { stroke: var(--gold); stroke-width: 2; }
.progress { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.progress > div { height: 100%; width: 0; background: var(--gold); transition: width .2s; }
.explain { font-size: 14.5px; color: var(--ink-soft); }
.explain b { color: var(--ink); }

/* ---------------------------------------------------------------- games */
.page-head { padding: 28px 0 8px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; justify-content: space-between; }
.page-title { font: 700 clamp(26px, 3vw, 34px)/1.15 var(--font-display); letter-spacing: -0.025em; }
.accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: 12px; align-items: end; margin-top: 18px; }
.account { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: center; }
.summary-row { display: flex; flex-wrap: wrap; gap: 28px; margin: 26px 0 8px; align-items: flex-end; }
.wdl { min-width: 260px; flex: 1; max-width: 420px; }
.wdl-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--surface-2); margin-top: 8px; }
.wdl-bar span { display: block; height: 100%; }
.wdl-legend { display: flex; gap: 16px; margin-top: 8px; font-size: 13.5px; color: var(--ink-soft); }
.wdl-legend b { color: var(--ink); font-variant-numeric: tabular-nums; }
.big-num { font: 700 30px/1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.big-label { font-size: 13px; color: var(--ink-soft); margin-top: 6px; }
.filters { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 18px 0 10px; align-items: center; }
.game-list { border-top: 1px solid var(--rule); }
.game-row {
  display: grid; grid-template-columns: 28px 34px minmax(0, 1.4fr) minmax(0, 1.6fr) 90px 80px 96px; gap: 12px;
  align-items: center; padding: 12px 6px; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit;
}
.game-row:hover { background: var(--surface); }
.res { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; font: 700 13px/1 var(--font-display); color: #fff; }
.res.w { background: var(--win); } .res.l { background: var(--loss); } .res.d { background: var(--draw); }
.g-opp { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-opp small { color: var(--ink-faint); font-weight: 500; }
.g-sub { color: var(--ink-soft); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-tc, .g-date { color: var(--ink-soft); font-size: 13.5px; }
.g-acc { font-weight: 600; font-variant-numeric: tabular-nums; }
.g-acc.none { color: var(--ink-faint); font-weight: 400; font-size: 13px; }
.empty-state { padding: 48px 0; text-align: center; color: var(--ink-soft); }
.empty-state h3 { font: 700 20px/1.3 var(--font-display); color: var(--ink); margin-bottom: 8px; }
.note { font-size: 13.5px; color: var(--ink-soft); }
.note.err { color: var(--c-blunder); font-weight: 500; }

/* --------------------------------------------------------------- settings */
.settings { max-width: 760px; }
.set-group { border-top: 1px solid var(--rule); padding: 22px 0; display: grid; grid-template-columns: 220px 1fr; gap: 16px 28px; }
.set-group h2 { font: 700 16px/1.3 var(--font-display); letter-spacing: -0.01em; }
.set-group .desc { color: var(--ink-soft); font-size: 13.5px; margin-top: 6px; }
.set-items { display: grid; gap: 16px; }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch { border: 2px solid transparent; border-radius: 10px; padding: 3px; cursor: pointer; background: none; }
.swatch[aria-pressed="true"] { border-color: var(--gold); }
.swatch i { outline: 1px solid var(--rule); outline-offset: -1px; display: grid; grid-template-columns: repeat(2, 22px); grid-template-rows: repeat(2, 22px); border-radius: 6px; overflow: hidden; }
.swatch i b:nth-child(1), .swatch i b:nth-child(4) { background: var(--l); }
.swatch i b:nth-child(2), .swatch i b:nth-child(3) { background: var(--d); }
.swatch span { display: block; font-size: 12.5px; margin-top: 4px; color: var(--ink-soft); }
.toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.toggle input { width: 18px; height: 18px; accent-color: var(--ink); }

/* ----------------------------------------------------------------- prose */
.prose { max-width: 70ch; padding-bottom: 60px; }
.prose h2 { font: 700 20px/1.3 var(--font-display); margin: 32px 0 10px; letter-spacing: -0.015em; }
.prose p, .prose li { color: var(--ink-soft); line-height: 1.65; }
.prose p + p { margin-top: 10px; }
.prose b { color: var(--ink); }

/* -------------------------------------------------------------- dialogs */
.sheet {
  border: 0; border-radius: 14px; padding: 0; width: min(560px, calc(100vw - 24px));
  background: var(--surface); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(11, 30, 46, .55);
}
.sheet::backdrop { background: rgba(16, 38, 52, .5); }
.sheet form, .sheet .sheet-body { padding: 24px; display: flex; flex-direction: column; gap: 18px; max-height: calc(100dvh - 40px); overflow-y: auto; }
.sheet h2 { font: 700 21px/1.2 var(--font-display); letter-spacing: -0.02em; }
.sheet fieldset { border: 0; padding: 0; margin: 0; }
.sheet legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.levels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.levels label { position: relative; }
.levels input { position: absolute; opacity: 0; }
.levels span {
  display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border: 1px solid var(--rule); border-radius: 10px;
  cursor: pointer; font-weight: 600; font-size: 13px; text-align: center; line-height: 1.2;
}
.levels span b { font: 700 18px/1 var(--font-display); margin-bottom: 4px; }
.levels input:checked + span { background: var(--ink); color: var(--page); border-color: var(--ink); }
.levels input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.level-about { font-size: 14px; color: var(--ink-soft); min-height: 2.6em; }
.sheet-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90;
  background: var(--ink); color: var(--page); padding: 10px 18px; border-radius: 999px; font-weight: 500;
  max-width: calc(100vw - 32px);
}

/* ---------------------------------------------------------- responsive */
@media (max-width: 1000px) {
  .play-col { position: static; }
  .stage { --board: min(calc(100vw - 52px), 640px); flex-direction: column; align-items: center; padding-top: 14px; }
  .panel { width: min(100%, calc(var(--board) + 26px)); }
  .moves { max-height: 240px; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-board { max-width: 440px; }
  .import-band { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr; gap: 22px; }
  .game-row { grid-template-columns: 28px 34px minmax(0, 1fr) 76px; }
  .game-row .g-sub, .game-row .g-tc { display: none; }
  .game-row .g-date { display: none; }
  .accounts { grid-template-columns: 1fr; }
  .set-group { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  :root { --nav-h: 56px; }
  .nav, .top-tools .lang-switch, .top-tools .hide-sm { display: none; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(10px);
    border-top: 1px solid var(--rule); padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar a {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 7px;
    text-decoration: none; color: var(--ink-faint); font-size: 11px; font-weight: 600;
  }
  .tabbar a svg { width: 22px; height: 22px; }
  .tabbar a[aria-current="page"] { color: var(--ink); }
  .tabbar a[aria-current="page"] svg { color: var(--gold); }
  .stage { --board: calc(100vw - 46px); padding: 10px 12px 24px; gap: 14px; }
  .play-col { gap: 8px; }
  .evalbar { width: 10px; }
  .hero h1 { max-width: none; }
  .hero-lead { font-size: 16px; }
  .footer { padding-bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .piece.moving, .evalbar-white, .progress > div { transition: none; }
}

/* ======================================================= characters */
.avatar { display: block; flex: none; filter: drop-shadow(0 6px 10px rgba(17, 49, 74, .22)); }
.opp { display: flex; gap: 14px; align-items: flex-start; }
.opp:empty { display: none; }
.opp-text { min-width: 0; flex: 1; }
.opp-name { font: 700 17px/1.2 var(--font-display); letter-spacing: -0.01em; }
.opp-name span { font: 500 13px var(--font-ui); color: var(--ink-soft); letter-spacing: 0; margin-left: 4px; }
.bubble {
  position: relative; margin-top: 8px; padding: 9px 13px; border-radius: 4px 14px 14px 14px;
  background: var(--surface); border: 1px solid var(--rule); font-size: 14.5px; line-height: 1.4;
}
.bubble.pop { animation: bubble-in .32s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes bubble-in { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }

.chars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.char { position: relative; }
.char input { position: absolute; opacity: 0; }
.char > span {
  display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px 9px; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); text-align: center;
  transition: border-color .15s, background .15s, transform .15s;
}
.char > span b { font: 600 13px/1.2 var(--font-ui); }
.char:hover > span { transform: translateY(-1px); border-color: var(--ink-faint); }
.char input:checked + span { border-color: var(--gold); background: var(--surface-2); box-shadow: 0 0 0 2px var(--gold-wash); }
.char input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.pips { display: flex; gap: 2px; }
.pips s { width: 6px; height: 6px; border-radius: 1px; background: var(--gold); transform: rotate(45deg); text-decoration: none; }
.pips s.off { background: var(--rule); }

.char-strip {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px; margin-top: 26px;
}
.char-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--ink);
  padding: 14px 6px 12px; border-radius: 14px; transition: background .15s, transform .15s;
}
.char-card:hover { background: var(--surface); transform: translateY(-3px); }
.char-card b { font: 700 15px/1.2 var(--font-display); margin-top: 4px; }
.char-card span { font-size: 13px; color: var(--ink-soft); }
.features { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ========================================================= training */
.progress > span { display: block; height: 100%; width: 0; background: var(--gold); transition: width .25s; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.chip-gold { background: var(--gold-wash); color: var(--gold-ink); }
.train-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.train-head .panel-title { font: 700 22px/1.2 var(--font-display); color: var(--ink); margin: 0; letter-spacing: -0.02em; }
.train-meter { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.train-ctx { color: var(--ink-soft); font-size: 14.5px; margin-bottom: 10px; }
.train-ctx b { color: var(--ink); }
.train-ctx .tag-mistake { color: var(--c-mistake); }
.train-ctx .tag-blunder { color: var(--c-blunder); }
.status.good { color: var(--win); }
.status.bad { color: var(--loss); }
.status.good .sub, .status.bad .sub { color: var(--ink-soft); }
.train-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.train-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; border-top: 1px solid var(--rule); padding-top: 14px; }
.train-stats div { display: flex; flex-direction: column; }
.train-stats b { font: 700 22px/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.train-stats span { font-size: 12.5px; color: var(--ink-soft); }
.train-panel .link { align-self: flex-start; }
.batch { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.arrows .ring { fill: none; stroke: var(--gold); stroke-width: 7; opacity: .9; }

.empty-card {
  max-width: 640px; margin: 18px auto 60px; text-align: center; padding: 36px 28px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 18px; box-shadow: var(--shadow);
}
.empty-card h2 { font: 700 23px/1.25 var(--font-display); letter-spacing: -0.02em; margin-top: 14px; }
.empty-card p { color: var(--ink-soft); margin-top: 10px; }
.empty-art { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--gold-wash); color: var(--gold-ink); }
.empty-art svg { width: 32px; height: 32px; }
.empty-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; }
.train-empty .page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ============================================================ the totem */
.dna {
  display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; margin: 22px 0 6px;
  padding: 22px 24px; border-radius: 18px; color: var(--hero-ink);
  background: radial-gradient(600px 240px at 100% 0%, rgba(211, 153, 42, .28), transparent 65%), linear-gradient(150deg, #0E2A40, #11314A 60%, #183F5C);
  box-shadow: var(--shadow);
}
.dna-kicker { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #E3AE45; }
.dna h2 { font: 700 26px/1.15 var(--font-display); letter-spacing: -0.02em; margin-top: 4px; }
.dna h2 span { font: 500 15px var(--font-ui); letter-spacing: 0; color: #C9D6DF; margin-left: 4px; }
.dna-body > p:not(.dna-kicker):not(.dna-facts) { margin-top: 6px; color: #DCE6EA; max-width: 60ch; }
.dna-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 13.5px; color: #C9D6DF; }
.dna-facts b { color: #FBF5E6; font-weight: 600; }
.dna-actions { display: flex; flex-direction: column; gap: 8px; }
.dna .btn:not(.btn-gold) { background: transparent; color: var(--hero-ink); border-color: rgba(242, 235, 218, .35); }
.card-sheet { padding: 22px; display: flex; flex-direction: column; gap: 16px; max-height: calc(100dvh - 40px); overflow-y: auto; }
.card-sheet img { width: min(100%, 420px); align-self: center; border-radius: 14px; box-shadow: var(--shadow); }

@media (max-width: 1000px) {
  .char-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .chars { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .char > span { padding: 8px 2px; }
  .char > span .avatar { width: 40px; height: 40px; }
  .char-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 6px; margin-inline: -16px; padding: 0 16px 6px; }
  .char-card { flex: 0 0 104px; scroll-snap-align: start; }
  .dna { grid-template-columns: 1fr; text-align: left; padding: 20px; }
  .dna-ava .avatar { width: 72px; height: 72px; }
  .dna-actions { flex-direction: row; flex-wrap: wrap; }
  .opp .avatar { width: 46px; height: 46px; }
}

/* ======================================================= explanations */
.explain .ex-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.explain .ex-head .tag { padding: 2px 8px; border-radius: 6px; color: #fff; font-weight: 700; font-size: 12.5px; }
.explain .ex-eval { font-size: 12.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; margin-left: auto; }
.ex-text { display: block; margin-top: 8px; color: var(--ink); line-height: 1.5; }
.train-ctx .ex-text { font-size: 14px; padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--rule); }

/* ===================================================== custom clock, elo */
.custom-tc { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 10px; margin-top: 12px; }
.custom-tc .field { width: 130px; }
.custom-tc .plus { font: 700 20px/1 var(--font-display); padding-bottom: 10px; color: var(--ink-soft); }
.custom-tc .note { flex-basis: 100%; margin: 0; }
.char .elo { font: 600 11.5px/1 var(--font-ui); font-style: normal; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.opp-name .elo { font-weight: 600; color: var(--gold-ink); }
.char-card .elo { font-size: 12px; font-weight: 600; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .piece.dying .pc, .piece.appear .pc, .piece.landed .pc, .bubble.pop { animation: none; }
}

/* ============================================================ the lobby */
.lobby { padding-bottom: 48px; }
.lobby .page-head { margin-bottom: 6px; }
.setup { display: flex; flex-direction: column; gap: 22px; }
.setup fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.setup legend { font-weight: 600; margin-bottom: 10px; padding: 0; font-size: 15px; }
.lobby .chars { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.lobby .char > span { padding: 14px 4px 12px; gap: 6px; }
.lobby .char > span b { font-size: 14px; }
.lobby .level-about { display: flex; gap: 12px; align-items: center; margin-top: 14px; min-height: 0; font-size: 15px; }
.lobby .level-about .avatar { flex: none; }
.setup-row { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 22px 40px; align-items: start; }
.fen-box summary { cursor: pointer; color: var(--ink-soft); font-size: 14px; }
.fen-box .input { margin-top: 10px; width: 100%; }
.setup-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.resume {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin: 6px 0 22px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 14px;
}
.resume div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.resume span { font-size: 13.5px; color: var(--ink-soft); }
.after-game { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 1000px) {
  .lobby .chars { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .setup-row { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .lobby .chars { gap: 6px; }
  .lobby .char > span { padding: 10px 2px 9px; }
  .lobby .char > span .avatar { width: 44px; height: 44px; }
  .resume { flex-wrap: wrap; }
}

/* ============================================================ Бәйге */
.seg-links { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--rule); }
.seg-links a { padding: 6px 14px; border-radius: 999px; text-decoration: none; color: var(--ink-soft); font-weight: 600; font-size: 14px; white-space: nowrap; }
.seg-links a.on { background: var(--ink); color: var(--page); }
.train-panel .seg-links { align-self: flex-start; }
.train-empty .page-head { flex-wrap: wrap; }
.rush-start .page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rush-hero { display: flex; gap: 26px; align-items: center; margin: 18px 0 26px; }
.rush-horse { width: 120px; height: 120px; flex: none; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #E3AE45, #D3992A 60%, #B47F1C); display: grid; place-items: center; box-shadow: var(--shadow); }
.rush-horse .pc { width: 78%; height: 78%; }
.rush-horse .pc .b { fill: #FBF5E6; stroke: #11314A; }
.rush-horse .pc .d { stroke: #11314A; }
.rush-horse .pc .e { fill: #11314A; }
.rush-horse.big { width: 96px; height: 96px; margin: 0 auto 10px; }
.rush-lead { font-size: 17px; max-width: 56ch; }
.rush-rules { margin: 10px 0 0; padding-left: 20px; color: var(--ink-soft); }
.rush-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 640px; margin-bottom: 16px; }
.rush-mode {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; cursor: pointer; font: inherit; color: var(--ink);
  padding: 18px 20px; border-radius: 16px; border: 1px solid var(--rule); background: var(--surface); box-shadow: var(--shadow); transition: transform .15s, border-color .15s;
}
.rush-mode:hover { transform: translateY(-2px); border-color: var(--gold); }
.rush-mode b { font: 700 22px/1.2 var(--font-display); }
.rush-mode span { color: var(--ink-soft); font-size: 14px; }
.rush-mode i { font-style: normal; font-weight: 600; color: var(--gold-ink); font-size: 13.5px; margin-top: 6px; }
.rush-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rush-clock { font: 700 40px/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.rush-clock.low { color: var(--loss); }
.rush-score { display: flex; flex-direction: column; align-items: flex-end; }
.rush-score b { font: 700 40px/1 var(--font-display); color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.rush-score span { font-size: 13px; color: var(--ink-soft); }
.rush-lives { display: flex; gap: 6px; color: var(--rule); }
.rush-lives .on { color: var(--loss); }
.track { position: relative; height: 34px; border-radius: 17px; background: repeating-linear-gradient(90deg, var(--surface-2) 0 18px, var(--surface) 18px 36px); border: 1px solid var(--rule); }
.track-horse { position: absolute; top: 2px; width: 28px; height: 28px; transition: left .35s cubic-bezier(.3, .8, .3, 1); }
.track-horse .pc { width: 100%; height: 100%; }
.track-best { position: absolute; top: -4px; bottom: -4px; width: 3px; border-radius: 2px; background: var(--gold); }
.rush-marks { display: flex; flex-wrap: wrap; gap: 4px; }
.mark { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; font-size: 13px; font-weight: 700; text-decoration: none; color: #fff; }
.mark.ok { background: var(--win); }
.mark.no { background: var(--loss); }
.rush-end { display: flex; justify-content: center; }
.rush-result { text-align: center; max-width: 560px; margin: 32px auto 60px; padding: 30px 26px; background: var(--surface); border: 1px solid var(--rule); border-radius: 20px; box-shadow: var(--shadow); }
.rush-kicker { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.rush-big { font: 700 84px/1 var(--font-display); color: var(--gold-ink); margin: 6px 0; font-variant-numeric: tabular-nums; }
.rush-result .rush-marks { justify-content: center; margin-top: 14px; }
@media (max-width: 760px) {
  .rush-hero { flex-direction: column; align-items: flex-start; gap: 14px; }
  .rush-horse { width: 84px; height: 84px; }
  .rush-modes { grid-template-columns: 1fr; }
  .rush-clock, .rush-score b { font-size: 32px; }
}

/* ======================================================== shared games */
.shared-note { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: var(--gold-wash); color: var(--ink); font-weight: 600; font-size: 14px; }
.shared-note span { display: inline-flex; align-items: center; gap: 8px; }
.shared-note svg { width: 18px; height: 18px; }

/* ===================================================== review extras */
.opening-name { font-size: 13.5px; color: var(--gold-ink); font-weight: 600; margin: 4px 0 0; line-height: 1.35; }
.panel-block .opening-name { margin: 0 0 8px; }
.phase-table td:nth-child(2), .phase-table td:nth-child(4) { font-weight: 700; }
.phase-table .hi { color: var(--win); }
.phase-table .lo { color: var(--loss); }
.phase-table .na { color: var(--ink-faint); font-weight: 400; }
.moments { display: flex; flex-direction: column; gap: 6px; }
.moment {
  display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 8px; text-align: left; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 7px 10px;
}
.moment:hover { border-color: var(--gold); }
.moment .tag { color: #fff; font-weight: 700; padding: 1px 6px; border-radius: 5px; font-size: 12px; }
.moment .who { color: var(--ink-soft); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.moment .drop { font-variant-numeric: tabular-nums; color: var(--loss); font-weight: 600; font-size: 13px; }
.moment .drop.good { color: var(--c-brilliant); }

/* ===================================== stable analysis / play layout */
.stage.has-nav { --board: min(calc(100dvh - var(--nav-h) - 184px), calc(100vw - var(--panel) - 150px), 760px); }
.board-nav { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 2px; }
.board-nav .btn { width: 58px; padding: 8px 0; justify-content: center; }
.ply-count { min-width: 70px; text-align: center; font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: 13px; font-weight: 600; }
.eval-row { min-width: 0; }
.eval-note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lines li { grid-template-columns: 58px minmax(0, 1fr); }
.lines .ln-moves { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.lines li.ph .ln-score { opacity: .45; }

@media (max-width: 1000px) {
  .stage.has-nav { --board: min(calc(100vw - 52px), 640px); }
}

/* analysis: tabs and the coach card */
.an-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--rule); align-self: flex-start; }
.an-tabs button { border: 0; background: none; padding: 6px 16px; border-radius: 999px; font: 600 14px var(--font-ui); color: var(--ink-soft); cursor: pointer; }
.an-tabs button[aria-selected="true"] { background: var(--ink); color: var(--page); }
.an-tab { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.an-tab[hidden] { display: none; }
.coach { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 12px 14px; position: relative; overflow: hidden; }
.coach::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--gold); }
.coach .ex-text { margin-top: 8px; font-size: 14.5px; }
.ex-notes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; color: var(--ink); }
.ex-notes li { display: flex; gap: 8px; align-items: baseline; line-height: 1.45; }
.ex-notes li::before { content: ""; flex: none; width: 7px; height: 7px; transform: translateY(-1px) rotate(45deg); background: var(--c-good); border-radius: 1px; }
.ex-notes li.bad::before { background: var(--c-mistake); }
.ex-notes li.info::before { background: var(--c-book); }
.ex-lines { margin-top: 10px; display: grid; gap: 6px; }
.ex-wait { font-size: 13px; color: var(--ink-faint); }
.ex-wait::after { content: ""; display: inline-block; width: 1em; text-align: left; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.ex-line { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; text-align: left; width: 100%; border: 1px solid var(--rule); background: var(--page); color: var(--ink);
  border-radius: 9px; padding: 7px 10px; cursor: pointer; font: inherit; }
.ex-line:hover { border-color: var(--ink-soft); }
.ex-line .lbl { grid-column: 1; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--ink-soft); text-transform: uppercase; }
.ex-line .mv { grid-column: 1; font-size: 13.5px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ex-line .res { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; color: #fff; }
.ex-line .res.good { background: var(--c-best); }
.ex-line .res.bad { background: var(--c-blunder); }
.ex-line.warn .lbl { color: var(--c-mistake); }
.ex-line.better .lbl { color: var(--c-best); }

/* opening explorer */
.op-rest { font-weight: 500; color: var(--ink-faint); }
.xp-list { display: grid; gap: 4px; }
.xp-row { display: grid; grid-template-columns: 58px 1fr 64px; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; border: 1px solid transparent;
  background: none; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.xp-row:hover { background: var(--surface); border-color: var(--rule); }
.xp-row.played { background: var(--surface); border-color: var(--gold); }
.xp-san { font-size: 14.5px; font-variant-numeric: tabular-nums; }
.xp-name { font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-name small { display: block; font-size: 12px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; }
.xp-bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.xp-bar i { display: block; height: 100%; background: var(--c-book); border-radius: 3px; }

/* Бәйге themes */
.rush-themes { margin: 22px 0 18px; }
.rush-themes .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rush-themes .chip { border: 1px solid var(--rule); background: var(--surface); color: var(--ink-soft); cursor: pointer; font-family: var(--font-ui); }
.rush-themes .chip:hover { border-color: var(--ink-soft); color: var(--ink); }
.rush-themes .chip.on { background: var(--ink); border-color: var(--ink); color: var(--page); }
.rush-theme-tag { margin: 0; font-size: 13px; font-weight: 700; color: var(--gold-ink); }
.lv-fav { display: block; margin-top: 4px; font-size: 12.5px; color: var(--gold-ink); font-weight: 600; }

/* ---------------------------------------------------------- identity
   The ram's-horn ornament (қошқар мүйіз) and the shanyrak, the crown of the
   yurt, drawn as masks so they take any colour of the theme. */
:root { --orn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 22' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M22 21V13C22 7 16 4 11.5 6C7.5 7.8 8 13 11.5 13.4C14 13.7 14.8 10.6 12.6 9.8'/%3E%3Cpath d='M22 13C22 7 28 4 32.5 6C36.5 7.8 36 13 32.5 13.4C30 13.7 29.2 10.6 31.4 9.8'/%3E%3Cpath d='M0 10.5 2.6 14 0 17.5M44 10.5 41.4 14 44 17.5' stroke-linejoin='round'/%3E%3Cpath d='M0 21H44' stroke-width='1.2'/%3E%3C/svg%3E"); --shanyrak: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-6 -6 60 60' fill='none' stroke='black' stroke-linecap='round'%3E%3Cg stroke-width='2.4'%3E%3Ccircle cx='24' cy='24' r='19'/%3E%3C/g%3E%3Cg stroke-width='1.1'%3E%3Ccircle cx='24' cy='24' r='15.5'/%3E%3Cpath d='M24 5V43M17 6.3C13.5 14 13.5 34 17 41.7M31 6.3C34.5 14 34.5 34 31 41.7'/%3E%3Cpath d='M5 24H43M6.3 17C14 13.5 34 13.5 41.7 17M6.3 31C14 34.5 34 34.5 41.7 31'/%3E%3C/g%3E%3Cg stroke-width='1.4'%3E%3Cpath d='M24 1V-4' transform='rotate(0 24 24)'/%3E%3Cpath d='M24 1V-4' transform='rotate(15 24 24)'/%3E%3Cpath d='M24 1V-4' transform='rotate(30 24 24)'/%3E%3Cpath d='M24 1V-4' transform='rotate(45 24 24)'/%3E%3Cpath d='M24 1V-4' transform='rotate(60 24 24)'/%3E%3Cpath d='M24 1V-4' transform='rotate(75 24 24)'/%3E%3Cpath d='M24 1V-4' transform='rotate(90 24 24)'/%3E%3Cpath d='M24 1V-4' transform='rotate(105 24 24)'/%3E%3Cpath d='M24 1V-4' transform='rotate(120 24 24)'/%3E%3Cpath d='M24 1V-4' transform='rotate(135 24 24)'/%3E%3Cpath d='M24 1V-4' transform='rotate(150 24 24)'/%3E%3Cpath d='M24 1V-4' transform='rotate(165 24 24)'/%3E%3Cpath d='M24 1V-4' transform='rotate(180 24 24)'/%3E%3Cpath d='M24 1V-4' transform='rotate(195 24 24)'/%3E%3Cpath d='M24 1V-4' transform='rotate(210 24 24)'/%3E%3Cpath d='M24 1V-4' transform='rotate(225 24 24)'/%3E%3Cpath d='M24 1V-4' transform='rotate(240 24 24)'/%3E%3Cpath d='M24 1V-4' transform='rotate(255 24 24)'/%3E%3Cpath d='M24 1V-4' transform='rotate(270 24 24)'/%3E%3Cpath d='M24 1V-4' transform='rotate(285 24 24)'/%3E%3Cpath d='M24 1V-4' transform='rotate(300 24 24)'/%3E%3Cpath d='M24 1V-4' transform='rotate(315 24 24)'/%3E%3Cpath d='M24 1V-4' transform='rotate(330 24 24)'/%3E%3Cpath d='M24 1V-4' transform='rotate(345 24 24)'/%3E%3C/g%3E%3C/svg%3E"); }
.orn-band { height: 22px; background: var(--gold); -webkit-mask: var(--orn) 0 0 / 44px 22px repeat-x; mask: var(--orn) 0 0 / 44px 22px repeat-x; opacity: .9; }
.hero .orn-band { position: absolute; left: 0; right: 0; bottom: 14px; opacity: .55; z-index: 1; }
.hero::before {
  content: ""; position: absolute; width: min(760px, 120vw); aspect-ratio: 1; left: -180px; top: -260px;
  background: var(--gold); opacity: .07; pointer-events: none;
  -webkit-mask: var(--shanyrak) center / contain no-repeat; mask: var(--shanyrak) center / contain no-repeat;
  animation: shanyrak-turn 240s linear infinite;
}
@keyframes shanyrak-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }
.page-title::after, .section-title::after {
  content: ""; display: block; width: 88px; height: 11px; margin-top: 12px; background: var(--gold);
  -webkit-mask: var(--orn) 0 0 / 22px 11px repeat-x; mask: var(--orn) 0 0 / 22px 11px repeat-x;
}
.footer { position: relative; border-top: 0; }
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: -11px; height: 11px; background: var(--rule);
  -webkit-mask: var(--orn) 0 0 / 22px 11px repeat-x; mask: var(--orn) 0 0 / 22px 11px repeat-x; }
.features { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.feature { border-top: 0; position: relative; padding-top: 22px; }
.feature::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--ink); }
.feature::after { content: ""; position: absolute; left: 0; top: -4px; width: 10px; height: 10px; background: var(--gold); transform: rotate(45deg); }
/* the shanyrak as the "thinking" mark */
.shanyrak { display: inline-block; width: 1em; height: 1em; background: currentColor; vertical-align: -0.12em;
  -webkit-mask: var(--shanyrak) center / contain no-repeat; mask: var(--shanyrak) center / contain no-repeat; animation: shanyrak-turn 2.4s linear infinite; }
.eval-num .shanyrak { width: 30px; height: 30px; color: var(--gold); vertical-align: -6px; }
@media (prefers-reduced-motion: reduce) { .shanyrak { animation-duration: 12s; } }

/* board themes: Kiiz (felt, red and ochre) and Kok (sky blue and gold) */
:root[data-board="kiiz"] { --sq-light: #F0DDBB; --sq-dark: #B4583F; --coord-on-light: #B4583F; --coord-on-dark: #F0DDBB; }
:root[data-board="kok"] { --sq-light: #F3E6BE; --sq-dark: #3E8DB5; --coord-on-light: #3E8DB5; --coord-on-dark: #F3E6BE; }

/* piece colour schemes (Settings) */
:root[data-pcolor="altyn"] { --pw-fill: #F6E3A8; --pw-line: #5C3D08; --pw-hi: #FFF3C8; --pw-lo: #D9A640; --orn-w: #7A4F0A;
  --pb-fill: #1D3A52; --pb-line: #0A1826; --pb-hi: #345B82; --pb-lo: #0E2236; --pb-detail: #F0C766; --orn-b: #F0C35A; }
:root[data-pcolor="kyzyl"] { --pw-fill: #FBF3E2; --pw-line: #4A1D10; --pw-hi: #FFFBF2; --pw-lo: #EBD8B5; --orn-w: #B4462C;
  --pb-fill: #A4402A; --pb-line: #3A120A; --pb-hi: #CE6446; --pb-lo: #6F2517; --pb-detail: #F6DFB8; --orn-b: #F3CE7A; }
:root[data-pcolor="mono"] { --pw-fill: #FFFFFF; --pw-line: #161616; --pw-hi: #FFFFFF; --pw-lo: #D6D6D6; --orn-w: #8A8A8A;
  --pb-fill: #262626; --pb-line: #000000; --pb-hi: #555555; --pb-lo: #0E0E0E; --pb-detail: #E6E6E6; --orn-b: #C9C9C9; }
:root[data-pcolor="kok"] { --pw-fill: #FDF7E7; --pw-line: #0F3A4A; --pw-hi: #FFFDF5; --pw-lo: #E9DDBC; --orn-w: #1C8FA5;
  --pb-fill: #1689A0; --pb-line: #06323C; --pb-hi: #3FB3C7; --pb-lo: #0C5A69; --pb-detail: #FFE7A6; --orn-b: #FFD877; }

/* piece set and colour pickers */
.piece-sets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pset { border: 2px solid var(--rule); border-radius: 12px; padding: 6px 6px 8px; background: var(--surface); cursor: pointer; text-align: left; }
.pset[aria-pressed="true"] { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-wash); }
.pset-row { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 7px; overflow: hidden; }
.pset-row i { aspect-ratio: 1; display: block; }
.pset-row i.lt { background: var(--sq-light); } .pset-row i.dk { background: var(--sq-dark); }
.pset-row svg { width: 100%; height: 100%; display: block; }
.pset-name { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--ink); padding-left: 2px; }
.pcolors { display: flex; flex-wrap: wrap; gap: 8px; }
.pcolor { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--rule); background: var(--surface); border-radius: 999px; padding: 5px 12px 5px 6px; cursor: pointer; font: 600 13.5px var(--font-ui); color: var(--ink-soft); }
.pcolor i { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--w) 0 50%, var(--b) 50% 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.pcolor[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); box-shadow: 0 0 0 2px var(--gold-wash); }

/* twelve opponents: the four legends get a gold ring */
.lobby .chars { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.char-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 8px; }
.char.legend > span, .char-card.legend { background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 14%, transparent), transparent 70%); }
.char.legend > span::before, .char-card.legend::before { content: attr(data-tier); display: block; font: 700 10px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 2px; }
.char-card.legend { position: relative; }
.human-toggle { display: flex; gap: 10px; align-items: flex-start; }
.human-toggle span { display: flex; flex-direction: column; font-weight: 600; }
.human-toggle small { font-weight: 400; color: var(--ink-soft); font-size: 13px; margin-top: 2px; }
@media (max-width: 1000px) { .lobby .chars { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .char-strip { display: flex; } }


/* ================================================================ refresh
   Warm parchment and felt, the night-blue of the steppe sky kept for the
   frame of the app: header, footer, tab bar. More ornament everywhere. */
:root {
  --page: #F2EDE3; --page-deep: #E8E0D0; --surface: #FCF9F3; --surface-2: #F3EDE1; --rule: #DED3BF;
  --ink: #11314A; --ink-soft: #4E6475; --ink-faint: #8796A0;
  --gold: #D99A2B; --gold-wash: rgba(217, 154, 43, .38); --gold-ink: #8A5A0A; --ember: #DF7838;
  --nav-h: 70px;
  --orn-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 22' fill='none' stroke='%23D99A2B' stroke-opacity='1' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M22 21V13C22 7 16 4 11.5 6C7.5 7.8 8 13 11.5 13.4C14 13.7 14.8 10.6 12.6 9.8'/%3E%3Cpath d='M22 13C22 7 28 4 32.5 6C36.5 7.8 36 13 32.5 13.4C30 13.7 29.2 10.6 31.4 9.8'/%3E%3Cpath d='M0 10.5 2.6 14 0 17.5M44 10.5 41.4 14 44 17.5' stroke-linejoin='round'/%3E%3C/svg%3E");
  --orn-faint: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 22' fill='none' stroke='%23C9A060' stroke-opacity='0.5' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M22 21V13C22 7 16 4 11.5 6C7.5 7.8 8 13 11.5 13.4C14 13.7 14.8 10.6 12.6 9.8'/%3E%3Cpath d='M22 13C22 7 28 4 32.5 6C36.5 7.8 36 13 32.5 13.4C30 13.7 29.2 10.6 31.4 9.8'/%3E%3Cpath d='M0 10.5 2.6 14 0 17.5M44 10.5 41.4 14 44 17.5' stroke-linejoin='round'/%3E%3C/svg%3E");
  --corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M2 22V10C2 5.6 5.6 2 10 2H22'/%3E%3Cpath d='M7 12C7 9.2 9.2 7 12 7C14.3 7 15.3 9.3 13.8 10.6C12.8 11.4 11.3 10.9 11.4 9.7'/%3E%3Cpath d='M2 16H5M16 2V5'/%3E%3C/svg%3E");
  --rosette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cg transform='rotate(0 50 50)'%3E%3Cpath d='M50 38V22 M50 22 C50 13.81 42.2 10.299999999999999 37 15.564999999999998 C32.45 20.245 35.7 27.265 42.85 24.925M50 22 C50 13.81 57.8 10.299999999999999 63 15.564999999999998 C67.55 20.245 64.3 27.265 57.15 24.925'/%3E%3C/g%3E%3Cg transform='rotate(90 50 50)'%3E%3Cpath d='M50 38V22 M50 22 C50 13.81 42.2 10.299999999999999 37 15.564999999999998 C32.45 20.245 35.7 27.265 42.85 24.925M50 22 C50 13.81 57.8 10.299999999999999 63 15.564999999999998 C67.55 20.245 64.3 27.265 57.15 24.925'/%3E%3C/g%3E%3Cg transform='rotate(180 50 50)'%3E%3Cpath d='M50 38V22 M50 22 C50 13.81 42.2 10.299999999999999 37 15.564999999999998 C32.45 20.245 35.7 27.265 42.85 24.925M50 22 C50 13.81 57.8 10.299999999999999 63 15.564999999999998 C67.55 20.245 64.3 27.265 57.15 24.925'/%3E%3C/g%3E%3Cg transform='rotate(270 50 50)'%3E%3Cpath d='M50 38V22 M50 22 C50 13.81 42.2 10.299999999999999 37 15.564999999999998 C32.45 20.245 35.7 27.265 42.85 24.925M50 22 C50 13.81 57.8 10.299999999999999 63 15.564999999999998 C67.55 20.245 64.3 27.265 57.15 24.925'/%3E%3C/g%3E%3Cpath d='M50 40 58 50 50 60 42 50Z' fill='black' stroke='none'/%3E%3Ccircle cx='50' cy='50' r='46' stroke-width='2'/%3E%3C/svg%3E");
  --felt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 88' fill='none' stroke='%23C9A060' stroke-opacity='.25' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M44 30V18 M44 18 C44 12.96 39.2 10.8 36 14.04 C33.2 16.92 35.2 21.240000000000002 39.6 19.8M44 18 C44 12.96 48.8 10.8 52 14.04 C54.8 16.92 52.8 21.240000000000002 48.4 19.8'/%3E%3Cpath d='M44 58V70' /%3E%3Cg transform='rotate(180 44 64)'%3E%3Cpath d='M44 64 M44 64 C44 58.96 39.2 56.8 36 60.04 C33.2 62.92 35.2 67.24 39.6 65.8M44 64 C44 58.96 48.8 56.8 52 60.04 C54.8 62.92 52.8 67.24 48.4 65.8'/%3E%3C/g%3E%3Cpath d='M44 38 49 44 44 50 39 44Z' fill='%23C9A060' fill-opacity='.25' stroke='none'/%3E%3Cpath d='M0 0 5 5M88 0 83 5M0 88 5 83M88 88 83 83'/%3E%3C/svg%3E");
}
:root[data-theme="night"] { --gold: #E8AE4A; --ember: #F08A48; --felt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 88' fill='none' stroke='%23C9A060' stroke-opacity='.12' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M44 30V18 M44 18 C44 12.96 39.2 10.8 36 14.04 C33.2 16.92 35.2 21.240000000000002 39.6 19.8M44 18 C44 12.96 48.8 10.8 52 14.04 C54.8 16.92 52.8 21.240000000000002 48.4 19.8'/%3E%3Cpath d='M44 58V70' /%3E%3Cg transform='rotate(180 44 64)'%3E%3Cpath d='M44 64 M44 64 C44 58.96 39.2 56.8 36 60.04 C33.2 62.92 35.2 67.24 39.6 65.8M44 64 C44 58.96 48.8 56.8 52 60.04 C54.8 62.92 52.8 67.24 48.4 65.8'/%3E%3C/g%3E%3Cpath d='M44 38 49 44 44 50 39 44Z' fill='%23C9A060' fill-opacity='.25' stroke='none'/%3E%3Cpath d='M0 0 5 5M88 0 83 5M0 88 5 83M88 88 83 83'/%3E%3C/svg%3E"); }

/* the header: night-blue felt with a band of ornament */
.topbar { background: var(--hero); border-bottom: 0; padding-bottom: 10px; color: #F4EBD8; backdrop-filter: none; }
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: var(--orn-gold) 0 50% / 22px 11px repeat-x; opacity: .9; }
.topbar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold) 15%, var(--ember) 50%, var(--gold) 85%, transparent); opacity: .55; }
.brand { color: #F4EBD8; }
.brand-mark { width: 40px; height: 40px; }
.brand-name { font-weight: 800; }
.brand-name::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 4px; background: var(--gold); transform: rotate(45deg) translateY(-2px); }
.nav a { color: rgba(244, 235, 216, .72); }
.nav a:hover { color: #FFF8EA; background: rgba(255, 255, 255, .07); }
.nav a[aria-current="page"] { color: #FFF8EA; background: rgba(255, 255, 255, .1); box-shadow: inset 0 -2px 0 var(--gold); }
.topbar .lang-switch { border-color: rgba(244, 235, 216, .28); }
.topbar .lang-switch button { color: rgba(244, 235, 216, .75); }
.topbar .lang-switch button[aria-pressed="true"] { background: var(--gold); color: #1B1406; }
.topbar .icon-btn { background: rgba(255, 255, 255, .06); border-color: rgba(244, 235, 216, .28); color: #F4EBD8; }
.topbar .icon-btn:hover { border-color: var(--gold); }

/* buttons: warm gold, the blue keeps its gold edge */
.btn-gold { background: linear-gradient(180deg, #F4BE52, #D9902A); border-color: #C9821F; color: #2A1A04; box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 6px 16px -10px rgba(140, 80, 10, .8); }
.btn-primary { box-shadow: inset 0 -2px 0 rgba(217, 154, 43, .55); }
.btn-primary:hover:not(:disabled) { background: #1B4466; border-color: #1B4466; }
.seg input:checked + span { box-shadow: inset 0 -2px 0 var(--gold); }

/* ornamented corners on the cards */
.import-form, .resume, .rush-mode, .acc-card, .lobby .level-about, .set-group, .train-panel .card, .coach-card { position: relative; }
.import-form::before, .resume::before, .rush-mode::before, .acc-card::before, .lobby .level-about::before,
.import-form::after, .resume::after, .rush-mode::after, .acc-card::after, .lobby .level-about::after {
  content: ""; position: absolute; width: 18px; height: 18px; background: var(--gold); opacity: .75; pointer-events: none;
  -webkit-mask: var(--corner) center / contain no-repeat; mask: var(--corner) center / contain no-repeat;
}
.import-form::before, .resume::before, .rush-mode::before, .acc-card::before, .lobby .level-about::before { top: 6px; left: 6px; }
.import-form::after, .resume::after, .rush-mode::after, .acc-card::after, .lobby .level-about::after { right: 6px; bottom: 6px; transform: rotate(180deg); }
.lobby .level-about { padding: 14px 18px; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; }

/* the felt pattern under the opponents and on the home sections */
.section:has(.char-strip) { background: var(--felt) 0 0 / 88px 88px; border-block: 1px solid var(--rule); padding-block: clamp(40px, 6vw, 72px); }
.section:has(.char-strip) + .section { padding-top: clamp(48px, 7vw, 88px); }

/* a rosette beside every page title */
.page-head { position: relative; }
.page-head::before { content: ""; position: absolute; right: -10px; top: 6px; width: 120px; height: 120px; background: var(--gold); opacity: .09; pointer-events: none;
  -webkit-mask: var(--rosette) center / contain no-repeat; mask: var(--rosette) center / contain no-repeat; }

/* footer: the sky again */
.footer { background: var(--hero); color: rgba(244, 235, 216, .75); margin-top: 24px; padding-top: 34px; }
.footer::before { top: 0; height: 11px; background: var(--orn-gold) 0 50% / 22px 11px repeat-x; -webkit-mask: none; mask: none; opacity: .8; }
.footer a:hover { color: #FFF8EA; }

/* mobile tab bar */
@media (max-width: 760px) {
  .tabbar { background: var(--hero); border-top: 0; backdrop-filter: none; }
  .tabbar::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 9px; background: var(--hero) var(--orn-gold) 0 100% / 18px 9px repeat-x; }
  .tabbar a { color: rgba(244, 235, 216, .6); }
  .tabbar a[aria-current="page"] { color: #FFF8EA; }
  .page-head::before { width: 84px; height: 84px; right: -6px; }
}

/* ============================================================ тоғыз құмалақ */
.togyz { padding-bottom: 48px; }
.tz-controls { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: flex-end; margin: 18px 0; }
.tz-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tz-board {
  --hole-w: clamp(30px, 8.6vw, 76px);
  position: relative; padding: 22px clamp(8px, 2vw, 22px); border-radius: 18px;
  background: linear-gradient(160deg, #9A6539, #74462A 55%, #5E3820);
  box-shadow: 0 24px 50px -28px rgba(40, 20, 5, .9), inset 0 1px 0 rgba(255, 230, 190, .25);
  display: grid; gap: 14px; justify-content: center;
}
.tz-board::before, .tz-board::after { content: ""; position: absolute; left: 14px; right: 14px; height: 11px; background: var(--orn-gold) 0 50% / 22px 11px repeat-x; opacity: .7; }
.tz-board::before { top: 5px; } .tz-board::after { bottom: 5px; transform: scaleY(-1); }
.tz-row { display: grid; grid-template-columns: repeat(9, var(--hole-w)); gap: clamp(3px, .8vw, 10px); }
.tz-hole {
  position: relative; height: calc(var(--hole-w) * 2.05); border: 0; border-radius: 999px; padding: 18px 3px 18px; cursor: default;
  background: radial-gradient(ellipse at 50% 35%, #3B2213, #24140A 75%); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .65), 0 1px 0 rgba(255, 220, 170, .2);
  display: flex; flex-direction: column; align-items: center; color: #F6E6C8; font: inherit;
}
.tz-hole.can { cursor: pointer; }
.tz-hole.can:hover { box-shadow: inset 0 3px 8px rgba(0, 0, 0, .65), 0 0 0 2px var(--gold); }
.tz-hole.hit { box-shadow: inset 0 3px 8px rgba(0, 0, 0, .65), 0 0 0 3px #FFD36A; }
.tz-hole.tuz { background: radial-gradient(ellipse at 50% 35%, #2B5578, #11314A 75%); }
.tz-hole.tuz::after { content: ""; position: absolute; inset: 30% 18%; background: var(--gold); opacity: .55; -webkit-mask: var(--rosette) center / contain no-repeat; mask: var(--rosette) center / contain no-repeat; }
.tz-num { position: absolute; top: 4px; font-size: 11px; font-weight: 700; color: rgba(246, 230, 200, .55); }
.tz-count { position: absolute; bottom: 3px; font-size: clamp(11px, 1.6vw, 14px); font-weight: 700; font-variant-numeric: tabular-nums; }
.tz-hole.tuz .tz-count { font-size: 9.5px; letter-spacing: .02em; color: #FFD36A; }
.tz-stones { display: grid; grid-template-columns: repeat(3, auto); gap: 2px; align-content: start; justify-content: center; overflow: hidden; flex: 1; }
.tz-stones i { width: calc(var(--hole-w) * .17); height: calc(var(--hole-w) * .17); max-width: 11px; max-height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF3D6, #E2C08A 55%, #A8793F); box-shadow: 0 1px 1px rgba(0, 0, 0, .5); }
.tz-row.top .tz-hole { cursor: default; }
.tz-kazans { display: grid; gap: 8px; }
.tz-kazan { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; border-radius: 999px; overflow: hidden;
  background: #24140A; box-shadow: inset 0 3px 8px rgba(0, 0, 0, .6); color: #F6E6C8; font-size: 13.5px; }
.tz-kazan b { font: 800 20px/1 var(--font-display); position: relative; z-index: 1; }
.tz-kazan span { position: relative; z-index: 1; font-weight: 600; }
.tz-kazan i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(217, 154, 43, .25), rgba(217, 154, 43, .55)); }
.tz-kazan.me i { background: linear-gradient(90deg, rgba(71, 179, 139, .25), rgba(71, 179, 139, .55)); }
.tz-status { margin-top: 16px; min-height: 2.6em; }
.tz-rules { margin-top: 18px; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 12px 16px; }
.tz-rules summary { cursor: pointer; font-weight: 600; }
.tz-rules ul { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 8px; color: var(--ink-soft); }
@media (max-width: 760px) {
  .tz-board { --hole-w: calc((100vw - 32px - 16px - 24px) / 9); padding: 20px 8px; border-radius: 14px; }
  .tz-stones { grid-template-columns: repeat(2, auto); }
  .tz-hole { padding: 15px 1px 16px; }
}

/* ============================================================ Ұстаз */
.ustaz { padding-bottom: 56px; max-width: 880px; }
.ustaz-head { display: flex; gap: 18px; align-items: center; justify-content: flex-start; }
.ustaz-head > .avatar { flex: none; }
.chat { display: flex; flex-direction: column; gap: 14px; margin: 18px 0; }
.msg { display: flex; gap: 10px; align-items: flex-start; max-width: 100%; }
.msg.from-me { justify-content: flex-end; }
.msg-ava { flex: none; }
.bubble-lg { background: var(--surface); border: 1px solid var(--rule); border-radius: 4px 16px 16px 16px; padding: 12px 16px; min-width: 0; max-width: 680px; line-height: 1.5; overflow-wrap: anywhere; }
.bubble-lg > * + * { margin-top: 8px; }
.msg.from-me .bubble-lg { background: var(--ink); color: #F4EBD8; border-color: var(--ink); border-radius: 16px 4px 16px 16px; }
.bubble-lg ul, .bubble-lg ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.bubble-lg a:not(.btn) { color: var(--gold-ink); font-weight: 600; }
.bubble-lg .warn { color: var(--c-mistake); font-weight: 600; }
.bubble-lg .pv { color: var(--ink-soft); font-size: 14px; }
.bubble-lg .ev-num { font: 800 15px var(--font-display); color: var(--ink-soft); margin-left: 4px; }
.with-ava { display: flex; gap: 10px; align-items: center; }
.with-ava .avatar { flex: none; }
.bars { list-style: none; padding: 0 !important; }
.bars li { display: grid; grid-template-columns: minmax(0, 1fr) 90px 42px; gap: 10px; align-items: center; font-size: 14px; }
.bars i { height: 8px; border-radius: 4px; background: var(--surface-2); position: relative; overflow: hidden; }
.bars i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: linear-gradient(90deg, var(--gold), var(--ember)); border-radius: 4px; }
.bars b { text-align: right; font-variant-numeric: tabular-nums; }
.plan li { padding-left: 2px; }
.moments-list { list-style: none; padding: 0 !important; display: flex !important; flex-wrap: wrap; gap: 8px !important; }
.moments-list li { display: inline-flex; gap: 6px; align-items: center; background: var(--surface-2); border-radius: 999px; padding: 4px 10px; }
.moments-list .tag { color: #fff; font-size: 11px; font-weight: 700; padding: 0 5px; border-radius: 4px; }
.chips.ask { display: flex; flex-wrap: wrap; gap: 8px; position: sticky; bottom: 12px; padding: 10px; background: color-mix(in srgb, var(--page) 90%, transparent); border: 1px solid var(--rule); border-radius: 18px; backdrop-filter: blur(8px); }
.chip-btn { border: 1px solid var(--rule); background: var(--surface); border-radius: 999px; padding: 8px 14px; font: 600 14px var(--font-ui); color: var(--ink); cursor: pointer; }
.chip-btn:hover { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-wash); }
.pos-form { display: grid; gap: 8px; }
.pos-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.pos-board { width: min(320px, 100%); }
.pos-board .board { width: 100%; height: auto; aspect-ratio: 1; }
@media (max-width: 760px) { .chips.ask { bottom: calc(70px + env(safe-area-inset-bottom)); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .chip-btn { white-space: nowrap; flex: none; } .bars li { grid-template-columns: minmax(0, 1fr) 60px 38px; } .ustaz-head .avatar { width: 52px; height: 52px; } }

/* ============================================================ features */
.features-page, .legends { padding-bottom: 56px; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; margin-top: 24px; }
.fcard { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--rule); border-radius: 18px; overflow: hidden; }
.fcard.wide { grid-column: 1 / -1; flex-direction: row; }
.fcard.wide .fvis { flex: 0 0 min(44%, 460px); min-height: 0; }
.fcard.wide .ftext { justify-content: center; padding: 26px 30px; }
.fcard.wide .ftext p { flex: none; max-width: 60ch; }
.fvis { min-height: 150px; display: grid; place-items: center; padding: 18px; background: var(--hero); position: relative; overflow: hidden; color: #F4EBD8; }
.fvis::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 11px; background: var(--orn-gold) 0 50% / 22px 11px repeat-x; opacity: .7; }
.ftext { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; flex: 1; }
.ftext h2 { font: 700 19px/1.25 var(--font-display); }
.ftext p { color: var(--ink-soft); flex: 1; }
.fv-avas { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 380px; }
.fv-avas.one svg { width: 96px; height: 96px; }
.fv-avas .pc { width: 96px; height: 96px; }
.fv-pieces { display: flex; gap: 4px; }
.fv-pieces svg { width: 64px; height: 64px; }
.fv-clock { display: flex; align-items: center; gap: 12px; font: 800 34px var(--font-display); }
.fv-clock i { font: 600 16px var(--font-ui); font-style: normal; background: var(--gold); color: #2A1A04; padding: 4px 10px; border-radius: 999px; }
.fv-clock .shanyrak { width: 34px; height: 34px; color: var(--gold); }
.fv-review { width: min(260px, 100%); display: grid; gap: 6px; }
.fv-line { display: flex; justify-content: space-between; background: rgba(255, 255, 255, .08); border-radius: 8px; padding: 6px 10px; }
.fv-line.ok span { color: #6FD3A8; } .fv-line.bad span { color: #F2B84B; }
.fv-graph { height: 46px; color: #F4EBD8; opacity: .85; } .fv-graph svg { width: 100%; height: 100%; display: block; }
.fv-togyz { display: grid; grid-template-columns: repeat(9, 18px); gap: 4px; }
.fv-togyz i { height: 40px; border-radius: 999px; background: #24140A; display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; gap: 1px; padding: 4px 2px; }
.fv-togyz s { width: 5px; height: 5px; border-radius: 50%; background: #E2C08A; }
.fv-togyz.big { grid-template-columns: repeat(9, 17px); gap: 3px; }
.lg-hero p b { color: var(--ink); } .lg-title { color: var(--gold-ink); font-weight: 600; }
.fv-togyz.big i { height: 52px; }
@media (max-width: 700px) { .fcard.wide { grid-column: auto; flex-direction: column; } .fgrid { grid-template-columns: 1fr; } }

/* ============================================================ legends */
.legends { max-width: 1000px; }
.lg-sec { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--rule); }
.lg-sec.flip { grid-template-columns: minmax(0, 1fr) 200px; }
.lg-sec.flip .lg-art { order: 2; }
.lg-sec.plain { grid-template-columns: 1fr; }
.lg-art { display: grid; place-items: center; }
.lg-body { display: grid; gap: 12px; justify-items: start; }
.lg-body h2, .lg-heroes h2 { font: 700 24px/1.2 var(--font-display); }
.lg-body p { font-size: 16.5px; line-height: 1.65; color: var(--ink-soft); }
.lg-mask { width: 160px; height: 160px; display: block; background: var(--gold); }
.lg-mask.shan { -webkit-mask: var(--shanyrak) center / contain no-repeat; mask: var(--shanyrak) center / contain no-repeat; background: var(--ink); }
.lg-mask.rose { -webkit-mask: var(--rosette) center / contain no-repeat; mask: var(--rosette) center / contain no-repeat; }
.lg-mask.orn { height: 60px; -webkit-mask: var(--orn) 0 50% / 44px 22px repeat-x; mask: var(--orn) 0 50% / 44px 22px repeat-x; }
.lg-heroes { padding: 26px 0; border-bottom: 1px solid var(--rule); }
.lg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 16px; }
.lg-hero { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 12px; }
.lg-hero .avatar { flex: none; }
.lg-hero p { font-size: 14.5px; color: var(--ink-soft); }
.lg-list { display: grid; gap: 8px; padding-left: 20px; margin: 0; font-size: 16px; }
.lg-src { margin-top: 18px; }
@media (max-width: 700px) {
  .lg-sec, .lg-sec.flip { grid-template-columns: 1fr; gap: 14px; }
  .lg-sec.flip .lg-art { order: 0; }
  .lg-art svg, .lg-mask { width: 110px; height: 110px; }
  .lg-mask.orn { width: 100%; height: 40px; }
}
.more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 24px 0 48px; }
.more-card { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: 18px; overflow: hidden; padding-bottom: 18px; transition: transform .15s, box-shadow .15s; }
.more-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.more-card b { font: 700 18px/1.25 var(--font-display); padding: 0 18px; }
.more-card > span:last-child { color: var(--ink-soft); padding: 0 18px; }
.more-vis { height: 130px; display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--hero); position: relative; margin-bottom: 6px; }
.more-vis::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 11px; background: var(--orn-gold) 0 50% / 22px 11px repeat-x; opacity: .7; }
.all-features { margin-top: 28px; }
@media (max-width: 760px) { .more-grid { grid-template-columns: 1fr; } }
@media (max-width: 1100px) and (min-width: 761px) { .topbar { gap: 14px; } .nav { gap: 2px; } .nav a { padding: 8px 9px; font-size: 14.5px; } }
@media (max-width: 1000px) and (min-width: 761px) { .topbar .lang-switch { display: none; } }
@media (max-width: 860px) and (min-width: 761px) { .brand-name { display: none; } }

/* ================================================================ modern
   Clean and light: white cards with soft shadows, the steppe blue for the
   frame and the hero, a warm gold-to-amber gradient for the accents. The
   ornament stays as fine accents (hero, card headers, the togyz board)
   instead of bands everywhere. */
:root {
  --page: #F4F6F9; --page-deep: #E9EDF2; --surface: #FFFFFF; --surface-2: #F1F4F8; --rule: #E2E7EE;
  --ink: #0F2A40; --ink-soft: #55697A; --ink-faint: #8A99A6;
  --gold: #E9A23B; --ember: #F2763A; --gold-ink: #A8640F; --gold-wash: rgba(233, 162, 59, .26);
  --accent: linear-gradient(135deg, #F8B84A, #F2763A);
  --hero: #0D2438;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(15, 42, 64, .05), 0 12px 32px -18px rgba(15, 42, 64, .30);
  --shadow-hi: 0 2px 6px rgba(15, 42, 64, .06), 0 26px 50px -26px rgba(15, 42, 64, .45);
  --nav-h: 64px;
}
:root[data-theme="night"] {
  --page: #0A1520; --page-deep: #08111A; --surface: #111F2D; --surface-2: #172838; --rule: #203446;
  --ink: #E8EEF3; --ink-soft: #A0B2C0; --ink-faint: #6F8495; --hero: #0D2438;
  --gold: #F0AE4A; --ember: #F58A4C; --gold-ink: #F3B356; --gold-wash: rgba(240, 174, 74, .25);
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 16px 40px -22px rgba(0, 0, 0, .85);
  --shadow-hi: 0 2px 6px rgba(0, 0, 0, .35), 0 28px 60px -28px rgba(0, 0, 0, .9);
}
body { background: var(--page); letter-spacing: -0.003em; }

/* header: the steppe blue as frosted glass, a single warm hairline */
.topbar { background: rgba(13, 36, 56, .9); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); padding-bottom: 0; box-shadow: 0 10px 30px -22px rgba(0, 0, 0, .7); }
.topbar::after { content: none; }
.topbar::before { bottom: 0; height: 1px; opacity: .9; background: linear-gradient(90deg, transparent, rgba(248, 184, 74, .55) 30%, rgba(242, 118, 58, .55) 70%, transparent); }
.nav a { border-radius: 999px; padding: 7px 14px; font-weight: 500; }
.nav a[aria-current="page"] { background: rgba(255, 255, 255, .13); box-shadow: none; color: #fff; }
.brand-mark { width: 36px; height: 36px; }
.brand-name { font-size: 20px; letter-spacing: -0.03em; }
.topbar .lang-switch { background: rgba(255, 255, 255, .05); }
.topbar .lang-switch button[aria-pressed="true"] { background: var(--accent); color: #fff; }

/* titles: a short warm bar instead of the ornament line */
.page-title, .section-title { letter-spacing: -0.035em; }
.page-title::after, .section-title::after { width: 40px; height: 4px; border-radius: 2px; margin-top: 14px; background: var(--accent); -webkit-mask: none; mask: none; }
.page-head::before { content: none; }
.section-lead { color: var(--ink-soft); }

/* cards: white, rounded, a soft shadow; the ornamented corners go */
.import-form, .resume, .rush-mode, .acc-card, .lobby .level-about, .pset, .fcard, .more-card, .lg-hero, .tz-rules, .bubble-lg, .coach, .feature, .set-group {
  border-radius: 18px; border: 1px solid var(--rule); background: var(--surface); box-shadow: var(--shadow);
}
.import-form::before, .resume::before, .rush-mode::before, .acc-card::before, .lobby .level-about::before,
.import-form::after, .resume::after, .rush-mode::after, .acc-card::after, .lobby .level-about::after { content: none; }
.set-group { padding: 22px; margin-bottom: 14px; border-top: 1px solid var(--rule) !important; }
.msg.from-me .bubble-lg { box-shadow: none; }
.coach::before { width: 3px; background: var(--accent); }

/* buttons and controls */
.btn { border-radius: 12px; font-weight: 600; }
.btn-lg { border-radius: 14px; }
.btn-gold { background: var(--accent); border: 0; color: #fff; box-shadow: 0 10px 24px -12px rgba(242, 118, 58, .85); text-shadow: 0 1px 0 rgba(120, 50, 0, .18); }
.btn-gold:hover:not(:disabled) { filter: brightness(1.05) saturate(1.05); }
.btn-primary { box-shadow: 0 10px 22px -14px rgba(15, 42, 64, .8); }
:root[data-theme="night"] .btn-primary { box-shadow: none; }
.seg span { border-radius: 10px; background: var(--surface); }
.seg input:checked + span { box-shadow: none; }
.input, select.input, textarea.input { border-radius: 12px; background: var(--surface); }
.input:focus { outline: 2px solid var(--gold); }
.chip-btn, .pcolor, .rush-themes .chip { box-shadow: 0 1px 2px rgba(15, 42, 64, .05); }
.an-tabs, .seg-links { background: var(--surface-2); border-color: transparent; }

/* hero: a mesh of blue, teal and a warm glow */
.hero { background:
  radial-gradient(1000px 520px at 88% 8%, rgba(242, 118, 58, .22), transparent 60%),
  radial-gradient(900px 600px at -5% 110%, rgba(38, 150, 175, .28), transparent 60%),
  linear-gradient(160deg, #0A1D2F, #0E2B45 55%, #123A5C); }
.hero::after { content: none; }
.hero::before { opacity: .05; }
.hero .orn-band { opacity: .16; bottom: 0; }
.hero h1 { letter-spacing: -0.045em; }
.hero-board .board { box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .08); border-radius: 12px; }
.hero-pill { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; padding: 6px 14px 6px 6px; border-radius: 999px; text-decoration: none;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: #F4EBD8; font-size: 14px; backdrop-filter: blur(6px); }
.hero-pill b { background: var(--accent); color: #fff; border-radius: 999px; padding: 3px 10px; font-size: 12px; letter-spacing: .02em; }
.hero-pill:hover { background: rgba(255, 255, 255, .13); }

/* home sections */
.section:has(.char-strip) { background: linear-gradient(180deg, transparent, rgba(233, 162, 59, .07) 60%, transparent); border-block: 0; }
.char-card { border-radius: 18px; }
.char-card:hover { background: var(--surface); box-shadow: var(--shadow); }
.char-card.legend { background: linear-gradient(180deg, rgba(233, 162, 59, .14), transparent 75%); }
.feature { padding: 22px; }
.feature::before { content: none; }
.feature::after { content: ""; position: static; display: block; width: 34px; height: 34px; border-radius: 10px; margin-bottom: 14px; transform: none; order: -1;
  background: var(--accent); opacity: .9; -webkit-mask: none; mask: none; }
.feature { display: flex; flex-direction: column; }
.fvis, .more-vis { background: radial-gradient(400px 200px at 80% 0%, rgba(242, 118, 58, .25), transparent 60%), linear-gradient(150deg, #0B2034, #123A5C); }
.fvis::after, .more-vis::after { opacity: .22; }
.more-card, .fcard { transition: transform .18s, box-shadow .18s; }
.more-card:hover, .fcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-hi); }

/* footer: calm blue with a hairline */
.footer { background: #0B1D2E; }
.footer::before { height: 1px; background: linear-gradient(90deg, transparent, rgba(248, 184, 74, .5), transparent); opacity: 1; }

/* mobile tab bar: frosted glass */
@media (max-width: 760px) {
  .tabbar { background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: saturate(1.4) blur(18px); -webkit-backdrop-filter: saturate(1.4) blur(18px); border-top: 1px solid var(--rule); }
  .tabbar::before { content: none; }
  .tabbar a { color: var(--ink-faint); }
  .tabbar a[aria-current="page"] { color: var(--ink); }
  .tabbar a[aria-current="page"] svg { color: var(--ember); }
  .set-group { padding: 16px; }
}

/* lobby tiles */
.lobby .char > span { border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); border-color: var(--rule); }
.char input:checked + span { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-wash), var(--shadow); background: var(--surface); }
.char.legend > span { background: linear-gradient(180deg, rgba(233, 162, 59, .16), var(--surface) 70%); }

/* togyz: a modern night-blue board, the stones glow a little */
.tz-board { background: radial-gradient(600px 300px at 80% 0%, rgba(242, 118, 58, .18), transparent 60%), linear-gradient(160deg, #0E2B45, #0A1D2F); box-shadow: var(--shadow-hi); border: 1px solid rgba(255, 255, 255, .06); }
.tz-board::before, .tz-board::after { opacity: .2; }
.tz-hole { border-radius: 18px; background: linear-gradient(180deg, #08182A, #0B2236); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .05); }
.tz-hole.can:hover { box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6), 0 0 0 2px var(--gold); }
.tz-hole.hit { box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6), 0 0 0 2px #FFD36A, 0 0 18px rgba(255, 211, 106, .45); }
.tz-hole.tuz { background: linear-gradient(180deg, #3A2410, #5A3714); }
.tz-stones i { background: radial-gradient(circle at 35% 30%, #FFF8E6, #F3D08A 55%, #C8863A); box-shadow: 0 0 6px rgba(243, 208, 138, .35); }
.tz-kazan { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); border-radius: 14px; }
.tz-kazan i { background: linear-gradient(90deg, rgba(248, 184, 74, .15), rgba(242, 118, 58, .45)); }
.tz-kazan.me i { background: linear-gradient(90deg, rgba(71, 179, 139, .15), rgba(71, 179, 139, .5)); }

/* board: rounded and lifted */
.board { border-radius: 10px; box-shadow: var(--shadow-hi); }
.feature::after { content: none; }
.f-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 14px; color: #fff; background: var(--accent); box-shadow: 0 8px 18px -10px rgba(242, 118, 58, .8); }
.f-ico svg { width: 20px; height: 20px; }