:root {
  color-scheme: light dark;

  --bg: #f5f3ee;
  --surface: #ffffff;
  --surface-2: #ece9e1;
  --ink: #1b1a17;
  --ink-2: #55524b;
  --ink-3: #85827a;
  --line: rgba(27, 26, 23, .13);
  --accent: #f2b01e;
  --accent-ink: #1b1a17;
  --ok: #2c9a4b;
  --bad: #d24343;
  --data: #2a78d6;

  --radius: 14px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141311;
    --surface: #1e1d1a;
    --surface-2: #2a2824;
    --ink: #f3f1ea;
    --ink-2: #c4c1b6;
    --ink-3: #908d84;
    --line: rgba(255, 255, 255, .13);
    --ok: #3fb562;
    --bad: #e66767;
    --data: #3987e5;
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.45 var(--font);

  /* цвета доски: меняются настройкой «Цвет доски» */
  --sq-l: #f0d9b5;
  --sq-d: #b58863;
  /* всё, что по высоте не доска: шапка, счёт, отступы — чтобы экран не скроллился */
  --chrome: 236px;
}
body[data-board="green"] { --sq-l: #ebecd0; --sq-d: #739552; }
body[data-board="blue"] { --sq-l: #dee3e6; --sq-d: #8ca2ad; }
body[data-mode="name"] { --chrome: 344px; }

button, input { font: inherit; color: inherit; }
h1, h2, p { margin: 0; }

kbd {
  display: inline-block;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--ink-2);
  font: 600 11px/1 var(--font);
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- шапка ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 60px;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 18px/1 var(--font-display);
}
.brand svg { flex: none; }

.tabs { display: flex; flex: 1; gap: 4px; min-width: 0; }

.tab {
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-2);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
@media (hover: hover) { .tab:hover { background: var(--surface-2); } } /* на тачскрине :hover «залипает» после касания */
.tab[aria-current="page"] { background: var(--ink); color: var(--bg); }
.tab-stats { margin-left: auto; }
.tab .short { display: none; }

/* ---------- раскладка тренировки ---------- */

.layout {
  display: grid;
  grid-template-columns: auto 320px;
  justify-content: center;
  align-items: start;
  gap: 32px;
  padding: 20px;
}

.stage {
  --size: min(clamp(280px, calc(100dvh - var(--chrome)), 720px), calc(100vw - 392px));
  width: var(--size);
}

.hud {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 72px;
}

.hud-side { display: flex; flex-direction: column; gap: 4px; }
.hud-side b { display: inline-block; font: 700 28px/1 var(--font-display); }
.hud-side span { color: var(--ink-3); font-size: 12px; line-height: 1; }
.hud-right { position: relative; align-items: flex-end; }
.hud-right b { font-variant-numeric: tabular-nums; }

/* отклик на ответ в счёте и в задании: верно — счёт подпрыгивает, новое задание «выпрыгивает»;
   мимо — задание дёргается и краснеет, оставаясь прежним */
.hud-side b.bump { transform-origin: left center; animation: bump .4s ease-out; } /* растёт от своего левого края, а не уезжает влево */
.hud-center.pop { animation: pop .25s ease-out; }
.hud-center.is-wrong { animation: hud-wrong .45s ease-out; }
.hud-plus {
  position: absolute;
  right: 0;
  top: -6px;
  color: var(--ok);
  font: 700 15px/1 var(--font-display);
  pointer-events: none;
  animation: rise .9s ease-out forwards;
}
.hud-plus.is-minus { color: var(--bad); }

@keyframes bump {
  0% { transform: scale(1.45); color: var(--ok); }
  70% { color: var(--ok); }
  100% { transform: scale(1); }
}
@keyframes pop {
  from { transform: scale(1.2); opacity: .3; }
}
@keyframes hud-wrong {
  20% { transform: translateX(-8px); color: var(--bad); }
  40% { transform: translateX(7px); color: var(--bad); }
  60% { transform: translateX(-4px); color: var(--bad); }
  80% { transform: translateX(2px); color: var(--bad); }
}
@keyframes rise {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-24px); }
}

.hud-center {
  position: relative;
  font: 800 clamp(46px, 9vmin, 64px)/1 var(--font-display);
  letter-spacing: -.02em;
  white-space: nowrap;
}
.hud-center.is-msg {
  color: var(--ink-2);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
}
.hud-next {
  position: absolute;
  left: 100%;
  bottom: .12em;
  margin-left: 14px;
  color: var(--ink-3);
  font-size: .42em;
  font-weight: 700;
  letter-spacing: 0;
}

.slots { display: inline-flex; gap: 8px; vertical-align: middle; }
.slot {
  display: grid;
  place-items: center;
  width: 56px;
  height: 62px;
  border-radius: 12px;
  background: var(--surface-2);
  font: 800 40px/1 var(--font-display);
}
.slot.is-empty { color: var(--ink-3); font: 600 12px/1 var(--font); letter-spacing: 0; }
.slots.shake { animation: shake .3s; }
.slots.shake .slot { background: color-mix(in srgb, var(--bad) 22%, var(--surface-2)); }

@keyframes shake {
  25% { transform: translateX(-6px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}

.timebar {
  height: 4px;
  margin-bottom: 10px;
  border-radius: 2px;
  background: var(--surface-2);
  overflow: hidden;
}
.timebar i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
  transform-origin: left;
  transition: transform .1s linear;
}
.timebar.is-low i { background: var(--bad); }
.timebar.is-off i { visibility: hidden; }

/* ---------- доска ---------- */

.board-wrap { position: relative; }

.board {
  display: grid;
  grid-template: repeat(8, 1fr) / repeat(8, 1fr);
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  isolation: isolate; /* вспышки полей не должны вылезать поверх карточки результата */
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 8px 24px rgba(0, 0, 0, .1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.sq { position: relative; }
.sq.light { background: var(--sq-l); color: var(--sq-d); }
.sq.dark { background: var(--sq-d); color: var(--sq-l); }
body[data-mode="find"][data-status="running"] .sq { cursor: pointer; }

.coord {
  position: absolute;
  z-index: 1;
  font: 700 clamp(9px, 1.7vmin, 14px)/1 var(--font);
  pointer-events: none;
}
.coord-rank { top: 5%; left: 6%; }
.coord-file { right: 7%; bottom: 5%; }
.board.no-coords .coord { display: none; }

/* вспышка ответа: зелёная — верно, красная — мимо (с названием поля, в которое попали) */
.sq::after {
  content: attr(data-flash);
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  color: #fff;
  font: 800 clamp(15px, 3.4vmin, 28px)/1 var(--font-display);
  opacity: 0;
  pointer-events: none;
}
/* верно: зелёная заливка с галочкой «выпрыгивает» и тает, от поля расходится кольцо;
   мимо: красная заливка с именем поля держится дольше, само поле дёргается */
.sq.ok, .sq.bad { z-index: 3; } /* кольцо и дрожание поверх соседних полей */
.sq.ok { animation: ring-ok .6s ease-out; }
.sq.ok::after { content: "✓"; background: var(--ok); animation: flash-ok .6s ease-out; }
.sq.bad { animation: shake-sq .45s ease-out; }
.sq.bad::after { background: var(--bad); animation: flash-bad 1.1s ease-out; }

@keyframes flash-ok {
  0% { opacity: 1; transform: scale(.7); }
  30% { opacity: 1; transform: scale(1); }
  60% { opacity: .95; }
  100% { opacity: 0; }
}
@keyframes ring-ok {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 75%, transparent); }
  to { box-shadow: 0 0 0 16px transparent; }
}
@keyframes flash-bad {
  0%, 65% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes shake-sq {
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

/* «Переворачивать доску по ходу»: клетки при перевороте остаются на местах, меняются только фигуры
   и подписи — они мягко проявляются на новых местах, сама доска не двигается */
.board.turn .piece, .board.turn .coord { animation: turn-in .32s ease-out; }
@keyframes turn-in {
  from { opacity: 0; transform: scale(.86); }
}

/* «Назвать поле»: загаданное поле */
.sq.target::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #ffd43b;
  box-shadow: inset 0 0 0 clamp(3px, .7vmin, 5px) #1b1a17;
  animation: target-in .18s ease-out;
}
.sq.target .coord { color: #1b1a17; }

@keyframes target-in {
  from { transform: scale(.82); opacity: .4; }
}

/* фигуры в начальной расстановке: по ним сразу видно, где белые, а где чёрные.
   Рисунки — свободный набор Cburnett (автор Colin M.L. Burnett, лицензия GPLv2+), в том виде, как на Lichess */
.piece {
  position: absolute;
  inset: 8%; /* не во всё поле: подписи в углах остаются свободными */
  background: center / contain no-repeat;
  pointer-events: none;
}
.piece.wk { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='color-scheme:light only' viewBox='0 0 45 45'%3E%3Cg fill='none' fill-rule='evenodd' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath stroke-linejoin='miter' d='M22.5 11.63V6M20 8h5'/%3E%3Cpath fill='%23fff' stroke-linecap='butt' stroke-linejoin='miter' d='M22.5 25s4.5-7.5 3-10.5c0 0-1-2.5-3-2.5s-3 2.5-3 2.5c-1.5 3 3 10.5 3 10.5'/%3E%3Cpath fill='%23fff' d='M11.5 37c5.5 3.5 15.5 3.5 21 0v-7s9-4.5 6-10.5c-4-6.5-13.5-3.5-16 4V27v-3.5c-3.5-7.5-13-10.5-16-4-3 6 5 10 5 10z'/%3E%3Cpath d='M11.5 30c5.5-3 15.5-3 21 0m-21 3.5c5.5-3 15.5-3 21 0m-21 3.5c5.5-3 15.5-3 21 0'/%3E%3C/g%3E%3C/svg%3E"); }
.piece.wq { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='color-scheme:light only' width='45' height='45' viewBox='0 0 45 45'%3E%3Cg fill='%23fff' fill-rule='evenodd' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath d='M8 12a2 2 0 1 1-4 0 2 2 0 1 1 4 0m16.5-4.5a2 2 0 1 1-4 0 2 2 0 1 1 4 0M41 12a2 2 0 1 1-4 0 2 2 0 1 1 4 0M16 8.5a2 2 0 1 1-4 0 2 2 0 1 1 4 0M33 9a2 2 0 1 1-4 0 2 2 0 1 1 4 0'/%3E%3Cpath stroke-linecap='butt' d='M9 26c8.5-1.5 21-1.5 27 0l2-12-7 11V11l-5.5 13.5-3-15-3 15-5.5-14V25L7 14z'/%3E%3Cpath stroke-linecap='butt' d='M9 26c0 2 1.5 2 2.5 4 1 1.5 1 1 .5 3.5-1.5 1-1.5 2.5-1.5 2.5-1.5 1.5.5 2.5.5 2.5 6.5 1 16.5 1 23 0 0 0 1.5-1 0-2.5 0 0 .5-1.5-1-2.5-.5-2.5-.5-2 .5-3.5 1-2 2.5-2 2.5-4-8.5-1.5-18.5-1.5-27 0z'/%3E%3Cpath fill='none' d='M11.5 30c3.5-1 18.5-1 22 0M12 33.5c6-1 15-1 21 0'/%3E%3C/g%3E%3C/svg%3E"); }
.piece.wr { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='color-scheme:light only' width='45' height='45' viewBox='0 0 45 45'%3E%3Cg fill='%23fff' fill-rule='evenodd' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath stroke-linecap='butt' d='M9 39h27v-3H9zm3-3v-4h21v4zm-1-22V9h4v2h5V9h5v2h5V9h4v5'/%3E%3Cpath d='m34 14-3 3H14l-3-3'/%3E%3Cpath stroke-linecap='butt' stroke-linejoin='miter' d='M31 17v12.5H14V17'/%3E%3Cpath d='m31 29.5 1.5 2.5h-20l1.5-2.5'/%3E%3Cpath fill='none' stroke-linejoin='miter' d='M11 14h23'/%3E%3C/g%3E%3C/svg%3E"); }
.piece.wb { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='color-scheme:light only' width='45' height='45' viewBox='0 0 45 45'%3E%3Cg fill='none' fill-rule='evenodd' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cg fill='%23fff' stroke-linecap='butt'%3E%3Cpath d='M9 36c3.39-.97 10.11.43 13.5-2 3.39 2.43 10.11 1.03 13.5 2 0 0 1.65.54 3 2-.68.97-1.65.99-3 .5-3.39-.97-10.11.46-13.5-1-3.39 1.46-10.11.03-13.5 1-1.35.49-2.32.47-3-.5 1.35-1.94 3-2 3-2z'/%3E%3Cpath d='M15 32c2.5 2.5 12.5 2.5 15 0 .5-1.5 0-2 0-2 0-2.5-2.5-4-2.5-4 5.5-1.5 6-11.5-5-15.5-11 4-10.5 14-5 15.5 0 0-2.5 1.5-2.5 4 0 0-.5.5 0 2z'/%3E%3Cpath d='M25 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 1 1 5 0z'/%3E%3C/g%3E%3Cpath stroke-linejoin='miter' d='M17.5 26h10M15 30h15m-7.5-14.5v5M20 18h5'/%3E%3C/g%3E%3C/svg%3E"); }
.piece.wn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='color-scheme:light only' width='45' height='45' viewBox='0 0 45 45'%3E%3Cg fill='none' fill-rule='evenodd' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath fill='%23fff' d='M22 10c10.5 1 16.5 8 16 29H15c0-9 10-6.5 8-21'/%3E%3Cpath fill='%23fff' d='M24 18c.38 2.91-5.55 7.37-8 9-3 2-2.82 4.34-5 4-1.042-.94 1.41-3.04 0-3-1 0 .19 1.23-1 2-1 0-4.003 1-4-4 0-2 6-12 6-12s1.89-1.9 2-3.5c-.73-.994-.5-2-.5-3 1-1 3 2.5 3 2.5h2s.78-1.992 2.5-3c1 0 1 3 1 3'/%3E%3Cpath fill='%23000' d='M9.5 25.5a.5.5 0 1 1-1 0 .5.5 0 1 1 1 0m5.433-9.75a.5 1.5 30 1 1-.866-.5.5 1.5 30 1 1 .866.5'/%3E%3C/g%3E%3C/svg%3E"); }
.piece.wp { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='color-scheme:light only' width='45' height='45' viewBox='0 0 45 45'%3E%3Cpath fill='%23fff' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M22.5 9c-2.21 0-4 1.79-4 4 0 .89.29 1.71.78 2.38C17.33 16.5 16 18.59 16 21c0 2.03.94 3.84 2.41 5.03-3 1.06-7.41 5.55-7.41 13.47h23c0-7.92-4.41-12.41-7.41-13.47 1.47-1.19 2.41-3 2.41-5.03 0-2.41-1.33-4.5-3.28-5.62.49-.67.78-1.49.78-2.38 0-2.21-1.79-4-4-4z'/%3E%3C/svg%3E"); }
.piece.bk { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='color-scheme:light only' viewBox='0 0 45 45'%3E%3Cg fill='none' fill-rule='evenodd' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath stroke-linejoin='miter' d='M22.5 11.6V6'/%3E%3Cpath fill='%23000' stroke-linecap='butt' stroke-linejoin='miter' d='M22.5 25s4.5-7.5 3-10.5c0 0-1-2.5-3-2.5s-3 2.5-3 2.5c-1.5 3 3 10.5 3 10.5'/%3E%3Cpath fill='%23000' d='M11.5 37a22.3 22.3 0 0 0 21 0v-7s9-4.5 6-10.5c-4-6.5-13.5-3.5-16 4V27v-3.5c-3.5-7.5-13-10.5-16-4-3 6 5 10 5 10z'/%3E%3Cpath stroke-linejoin='miter' d='M20 8h5'/%3E%3Cpath stroke='%23ececec' d='M32 29.5s8.5-4 6-9.7C34.1 14 25 18 22.5 24.6v2.1-2.1C20 18 9.9 14 7 19.9c-2.5 5.6 4.8 9 4.8 9'/%3E%3Cpath stroke='%23ececec' d='M11.5 30c5.5-3 15.5-3 21 0m-21 3.5c5.5-3 15.5-3 21 0m-21 3.5c5.5-3 15.5-3 21 0'/%3E%3C/g%3E%3C/svg%3E"); }
.piece.bq { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='color-scheme:light only' width='45' height='45' viewBox='0 0 45 45'%3E%3Cg fill-rule='evenodd' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cg stroke='none'%3E%3Ccircle cx='6' cy='12' r='2.75'/%3E%3Ccircle cx='14' cy='9' r='2.75'/%3E%3Ccircle cx='22.5' cy='8' r='2.75'/%3E%3Ccircle cx='31' cy='9' r='2.75'/%3E%3Ccircle cx='39' cy='12' r='2.75'/%3E%3C/g%3E%3Cpath stroke-linecap='butt' d='M9 26c8.5-1.5 21-1.5 27 0l2.5-12.5L31 25l-.3-14.1-5.2 13.6-3-14.5-3 14.5-5.2-13.6L14 25 6.5 13.5z'/%3E%3Cpath stroke-linecap='butt' d='M9 26c0 2 1.5 2 2.5 4 1 1.5 1 1 .5 3.5-1.5 1-1.5 2.5-1.5 2.5-1.5 1.5.5 2.5.5 2.5 6.5 1 16.5 1 23 0 0 0 1.5-1 0-2.5 0 0 .5-1.5-1-2.5-.5-2.5-.5-2 .5-3.5 1-2 2.5-2 2.5-4-8.5-1.5-18.5-1.5-27 0z'/%3E%3Cpath fill='none' stroke-linecap='butt' d='M11 38.5a35 35 1 0 0 23 0'/%3E%3Cpath fill='none' stroke='%23ececec' d='M11 29a35 35 1 0 1 23 0m-21.5 2.5h20m-21 3a35 35 1 0 0 22 0m-23 3a35 35 1 0 0 24 0'/%3E%3C/g%3E%3C/svg%3E"); }
.piece.br { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='color-scheme:light only' width='45' height='45' viewBox='0 0 45 45'%3E%3Cg fill-rule='evenodd' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath stroke-linecap='butt' d='M9 39h27v-3H9zm3.5-7 1.5-2.5h17l1.5 2.5zm-.5 4v-4h21v4z'/%3E%3Cpath stroke-linecap='butt' stroke-linejoin='miter' d='M14 29.5v-13h17v13z'/%3E%3Cpath stroke-linecap='butt' d='M14 16.5 11 14h23l-3 2.5zM11 14V9h4v2h5V9h5v2h5V9h4v5z'/%3E%3Cpath fill='none' stroke='%23ececec' stroke-linejoin='miter' stroke-width='1' d='M12 35.5h21m-20-4h19m-18-2h17m-17-13h17M11 14h23'/%3E%3C/g%3E%3C/svg%3E"); }
.piece.bb { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='color-scheme:light only' width='45' height='45' viewBox='0 0 45 45'%3E%3Cg fill='none' fill-rule='evenodd' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cg fill='%23000' stroke-linecap='butt'%3E%3Cpath d='M9 36c3.4-1 10.1.4 13.5-2 3.4 2.4 10.1 1 13.5 2 0 0 1.6.5 3 2-.7 1-1.6 1-3 .5-3.4-1-10.1.5-13.5-1-3.4 1.5-10.1 0-13.5 1-1.4.5-2.3.5-3-.5 1.4-2 3-2 3-2z'/%3E%3Cpath d='M15 32c2.5 2.5 12.5 2.5 15 0 .5-1.5 0-2 0-2 0-2.5-2.5-4-2.5-4 5.5-1.5 6-11.5-5-15.5-11 4-10.5 14-5 15.5 0 0-2.5 1.5-2.5 4 0 0-.5.5 0 2z'/%3E%3Cpath d='M25 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 1 1 5 0z'/%3E%3C/g%3E%3Cpath stroke='%23ececec' stroke-linejoin='miter' d='M17.5 26h10M15 30h15m-7.5-14.5v5M20 18h5'/%3E%3C/g%3E%3C/svg%3E"); }
.piece.bn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='color-scheme:light only' width='45' height='45' viewBox='0 0 45 45'%3E%3Cg fill='none' fill-rule='evenodd' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath fill='%23000' d='M22 10c10.5 1 16.5 8 16 29H15c0-9 10-6.5 8-21'/%3E%3Cpath fill='%23000' d='M24 18c.38 2.91-5.55 7.37-8 9-3 2-2.82 4.34-5 4-1.04-.94 1.41-3.04 0-3-1 0 .19 1.23-1 2-1 0-4 1-4-4 0-2 6-12 6-12s1.89-1.9 2-3.5c-.73-1-.5-2-.5-3 1-1 3 2.5 3 2.5h2s.78-2 2.5-3c1 0 1 3 1 3'/%3E%3Cpath fill='%23ececec' stroke='%23ececec' d='M9.5 25.5a.5.5 0 1 1-1 0 .5.5 0 1 1 1 0m5.43-9.75a.5 1.5 30 1 1-.86-.5.5 1.5 30 1 1 .86.5'/%3E%3Cpath fill='%23ececec' stroke='none' d='m24.55 10.4-.45 1.45.5.15c3.15 1 5.65 2.49 7.9 6.75S35.75 29.06 35.25 39l-.05.5h2.25l.05-.5c.5-10.06-.88-16.85-3.25-21.34s-5.79-6.64-9.19-7.16z'/%3E%3C/g%3E%3C/svg%3E"); }
.piece.bp { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='color-scheme:light only' width='45' height='45' viewBox='0 0 45 45'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M22.5 9a4 4 0 0 0-3.22 6.38 6.48 6.48 0 0 0-.87 10.65c-3 1.06-7.41 5.55-7.41 13.47h23c0-7.92-4.41-12.41-7.41-13.47a6.46 6.46 0 0 0-.87-10.65A4.01 4.01 0 0 0 22.5 9z'/%3E%3C/svg%3E"); }

/* ---------- карточка поверх доски: старт и результат ---------- */

.overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 14px;
  border-radius: 10px;
  /* дымка лёгкая: фигуры под ней должны читаться ещё до старта */
  background: color-mix(in srgb, var(--bg) 38%, transparent);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
body[data-status="running"] .overlay { display: none; }

.sheet {
  width: min(100%, 330px);
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 14px 44px rgba(0, 0, 0, .24);
  text-align: center;
  animation: sheet-in .2s ease-out;
}
@keyframes sheet-in {
  from { transform: translateY(8px); opacity: 0; }
}

.sheet h2 { margin-bottom: 6px; font: 800 22px/1.15 var(--font-display); }
.sheet-text { margin-bottom: 18px; color: var(--ink-2); }
.sheet-eyebrow { color: var(--ink-3); font-size: 13px; font-weight: 600; }
.sheet-score { font: 800 60px/1.05 var(--font-display); }
.sheet-cap { margin-bottom: 14px; color: var(--ink-2); font-size: 14px; }
.sheet-cap .badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 700;
}

.sheet-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 12px;
}
.sheet-facts div { padding: 8px; border-radius: 10px; background: var(--surface-2); }
.sheet-facts dt { color: var(--ink-3); font-size: 12px; }
.sheet-facts dd { margin: 0; font: 700 18px/1.3 var(--font-display); }

.sheet-misses { margin-bottom: 14px; color: var(--ink-2); font-size: 13px; }
.sheet-misses b {
  display: inline-block;
  margin: 2px 1px;
  padding: 1px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--bad) 16%, transparent);
  color: var(--ink);
  font-weight: 700;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  border: 0;
  border-radius: 12px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}
.btn:hover { opacity: .88; }
.btn:disabled { opacity: .5; cursor: default; }
.btn kbd { border-color: transparent; background: color-mix(in srgb, var(--bg) 22%, transparent); color: inherit; }
.sheet .btn { width: 100%; }

.btn-ghost {
  border: 1px solid var(--line);
  background: none;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
}
.btn-ghost:hover { border-color: var(--bad); color: var(--bad); opacity: 1; }

/* ---------- ввод ответа под доской ---------- */

.pad { display: none; margin-top: 12px; }
body[data-mode="name"] .pad-name { display: block; }
body:not([data-status="running"]) .pad { opacity: .4; pointer-events: none; }

.keys { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.keys + .keys { margin-top: 6px; }

.key {
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  font: 700 19px/1 var(--font-display);
  cursor: pointer;
  touch-action: manipulation;
}
@media (hover: hover) { .key:hover { background: var(--surface-2); } }
.key.is-on { border-color: transparent; background: var(--accent); color: var(--accent-ink); }

.stage-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  height: 32px;
  margin-top: 10px;
  color: var(--ink-3);
  font-size: 13px;
}

.link-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  padding: 6px 4px;
  border: 0;
  background: none;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.link-btn:hover { color: var(--ink); }

/* ---------- боковая панель ---------- */

.panel { display: grid; gap: 14px; }

.card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.card-title {
  margin-bottom: 14px;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

fieldset {
  display: grid;
  gap: 16px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  transition: opacity .15s;
}
fieldset:disabled { opacity: .45; pointer-events: none; }

.field-label { display: block; margin-bottom: 6px; color: var(--ink-2); font-size: 13px; }

.seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: var(--surface-2);
}
.seg label { position: relative; }
.seg input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.seg span {
  display: block;
  padding: 7px 8px;
  border-radius: 8px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}
.seg input:checked + span { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .14); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }

.switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
}
.switch small { display: block; color: var(--ink-3); font-size: 12px; }
.switch input {
  position: relative;
  flex: none;
  width: 42px;
  height: 24px;
  margin: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ink-3) 55%, var(--surface-2));
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: background .15s;
}
.switch input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: transform .15s;
}
.switch input:checked { background: var(--accent); }
.switch input:checked::after { transform: translateX(18px); }

.swatches { display: flex; gap: 10px; }
.swatches label { position: relative; }
.swatches input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.swatches i {
  display: block;
  width: 52px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--l) 50%, var(--d) 50%);
  box-shadow: inset 0 0 0 1px var(--line);
}
.swatches input:checked + i { outline: 2px solid var(--ink); outline-offset: 2px; }
.swatches input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }

.rec-row { display: flex; align-items: baseline; gap: 10px; }
.rec-num { font: 800 34px/1 var(--font-display); }
.rec-cap, .rec-empty { color: var(--ink-2); font-size: 13px; }

/* последние попытки: один ряд — один цвет, значение подписано только у последней */
.spark {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 64px;
  margin-top: 14px;
  padding-top: 18px;
  border-bottom: 1px solid var(--line);
}
.bar {
  position: relative;
  flex: 0 1 14px;
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  background: var(--data);
  font-style: normal;
}
.bar:hover { filter: brightness(1.18); }
.bar.is-last::before {
  content: attr(data-v);
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
}
.spark-cap { margin-top: 6px; color: var(--ink-3); font-size: 12px; }

.keys-hint { color: var(--ink-3); font-size: 12px; text-align: center; }

/* ---------- статистика ---------- */

.stats { max-width: 1040px; margin: 0 auto; padding: 24px 20px 40px; }

.stats-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: 18px;
}
.stats-head h1 { font: 800 26px/1.1 var(--font-display); }
.filters { display: flex; flex-wrap: wrap; gap: 10px; }
.filters .seg span { padding-inline: 14px; }

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.tile { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.tile-label { color: var(--ink-2); font-size: 13px; }
.tile-value { font: 700 26px/1.2 var(--font-display); }

.stats-grid { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 16px; align-items: start; }
.stats-col { display: grid; gap: 16px; }

.chart-title { font: 700 17px/1.2 var(--font-display); }
.chart-sub { margin: 4px 0 14px; color: var(--ink-2); font-size: 13px; }

.heatmap {
  display: grid;
  grid-template: repeat(8, 1fr) / repeat(8, 1fr);
  gap: 2px;
  aspect-ratio: 1;
}
.hm-cell {
  display: grid;
  place-items: center;
  border-radius: 4px;
  color: #0b0b0b; /* заливка яркая в обеих темах — на ней читается тёмный текст */
  font: 700 clamp(10px, 2.6vw, 14px)/1 var(--font);
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}
.hm-cell.is-empty { background: var(--surface-2); color: var(--ink-3); font-weight: 500; }
.hm-cell:hover, .hm-cell.is-tip { outline: 2px solid var(--ink); outline-offset: -2px; }

.legend {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  color: var(--ink-2);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.ramp { display: flex; flex: 1; max-width: 220px; height: 10px; border-radius: 3px; overflow: hidden; }
.ramp i { flex: 1; }
.legend-empty { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.legend-empty::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--surface-2); }

.weak { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.weak li { display: flex; align-items: baseline; gap: 12px; }
.weak-sq { width: 34px; font: 800 18px/1 var(--font-display); }
.weak-val { font-weight: 700; }
.weak-note { margin-left: auto; color: var(--ink-3); font-size: 13px; }
.weak-empty { color: var(--ink-2); font-size: 14px; }

details summary { font-weight: 600; cursor: pointer; }
.table-wrap { max-height: 320px; margin-top: 12px; overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
th, td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: right; }
th:first-child, td:first-child { text-align: left; font-weight: 700; }
th { position: sticky; top: 0; background: var(--surface); color: var(--ink-3); font-weight: 600; }

.tip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  max-width: 240px;
  padding: 8px 11px;
  border-radius: 9px;
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  font-size: 12px;
  line-height: 1.35;
  pointer-events: none;
}
.tip b { display: block; font-size: 15px; }
.tip span { opacity: .78; }

/* ---------- узкие экраны ---------- */

@media (max-width: 899px) {
  .layout { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 22px; padding: 8px 16px 28px; }
  .stage { --size: min(clamp(280px, calc(100dvh - var(--chrome)), 720px), calc(100vw - 32px)); }
  .panel { width: 100%; max-width: 560px; }
  .keys-hint { display: none; }
  .stats-grid { grid-template-columns: minmax(0, 1fr); }
  .tiles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 599px) {
  /* на телефоне доска идёт от края до края экрана: выходит за боковые отступы страницы (по 16px),
     поэтому она на 32px выше остального блока — это учтено в запасе по высоте */
  body { --chrome: 244px; }
  body[data-mode="name"] { --chrome: 352px; }
  .board-wrap { margin-inline: -16px; }
  .board, .overlay { border-radius: 0; }
  /* доска стоит по центру экрана по высоте: на высоком экране задание и доска вместе опускаются.
     138px — всё, что над доской: шапка 52 + отступ 8 + счёт 64 + полоска времени 14; доска = --size + 32px;
     --below — то, что под доской и должно остаться на первом экране: «Закончить» (42) и клавиши «Назвать» (106).
     Сдвиг не больше свободного места под доской. svh, а не dvh: центр не «плывёт», когда браузер
     прячет адресную строку при прокрутке */
  body { --below: 42px; }
  body[data-mode="name"] { --below: 148px; }
  .stage {
    padding-top: max(0px, min(
      calc((100svh - var(--size) - 32px) / 2 - 138px),
      calc(100svh - 138px - var(--size) - 32px - var(--below))));
  }
  .topbar { gap: 8px; height: 52px; padding: 0 12px; }
  .brand span { display: none; }
  .tab { padding: 7px 10px; font-size: 14px; }
  .tab .full { display: none; }
  .tab .short { display: inline; }
  .hud { height: 64px; }
  .hud-side b { font-size: 24px; }
  .slot { width: 50px; height: 54px; font-size: 34px; }
  .slot.is-empty { font-size: 11px; }
  .stats { padding: 16px 16px 32px; }
}

/* вспышки ответа остаются (это затухание, а не движение), убираем только перемещения */
@media (prefers-reduced-motion: reduce) {
  .sheet, .sq.target::before, .slots.shake, .sq.ok, .sq.bad,
  .hud-side b.bump, .hud-center.pop, .hud-center.is-wrong,
  .board.turn .piece, .board.turn .coord { animation: none; }
  .sq.ok::after, .sq.bad::after { animation-name: flash-still; } /* только затухание, без прыжка */
  .timebar i, fieldset, .switch input, .switch input::after { transition: none; }
}
@keyframes flash-still {
  0%, 60% { opacity: 1; }
  100% { opacity: 0; }
}