/* ================================================================
   Solomachev Chess — Radiant Amber (rev.3 working)
   Тёплый, живой, престижный. Лёгкая анимация, объём, глубина.
   ================================================================ */

:root {
  /* Тёплая глубокая палитра */
  --vault-bg: #0F1419;
  --vault-bg-mid: #161C26;
  --vault-bg-elevated: #1E2533;
  --vault-bg-warm: #252D3D;

  /* Живое золото с переливом — светлее, ярче, престижное */
  --gold: #FFD24D;
  --gold-light: #FFECA0;

  /* Р-159 · Пломба сайта. Одна карточка поверх доски: карточка вступления на
     главном виде, пломбы Practice и пломба секции «Партия» берут вид отсюда и
     нигде больше его не задают. Индиговый сатин, золотой кант, белый текст,
     золотое действие. */
  --seal-face: linear-gradient(165deg, #2E5590 0%, #1D3860 62%, #162946 100%);
  --seal-edge: #FFD24D;
  --seal-text: #FFFFFF;
  --seal-text-dim: #DDE7F5;
  --seal-eyebrow: #FFD24D;
  --seal-lift:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -18px 34px rgba(0,0,0,.28),
    0 16px 42px rgba(0,0,0,.5);
  --seal-action-face: linear-gradient(180deg, #FFE27C, #F5B833);
  --seal-action-edge: #12233A;
  --seal-action-text: #17202B;
  --seal-veil: rgba(9, 16, 27, .58);
  /* Р-165 · Ромб «◆» на сайте одного цвета. Один источник на все места, где
     ромб стоит меткой или разделителем: строка тезисов Rules, метка двух
     правил, оба лозунга, надзаголовки секций, собранные факты первого экрана
     и разделители нижней строки подвала. Метки фактов «Автора» и эмблемы
     порталов Participate живут по своим цветам — С26. */
  --spark-mark: #57C7FF;
  --gold-bright: #FFFBE5;
  --gold-deep: #E5B830;
  --gold-dim: #C49A35;

  /* Тёплый текст — никакого пепла */
  /* Р-74: текст белый. Бежевые и пастельные оттенки сняты со всего сайта:
     автор называл их тусклыми и запретил повторно. Разницу между уровнями
     текста держат размер, начертание и разрядка, а не приглушённый цвет. */
  --text: #FFFFFF;
  --text-bright: #FFFFFF;
  --text-warm: #FFFFFF;
  --text-muted: #FFFFFF;
  --text-dim: #FFFFFF;

  /* Акценты */
  --ray: #8EC5FF;
  --ray-bright: #B8D9FF;
  --ray-dim: #5A8FD4;

  /* Единый стандарт направления хода для всех досок и легенд сайта. */
  --move-origin: #00BFFF;
  --move-origin-fill: rgba(0, 191, 255, .18);
  --move-origin-glow: rgba(0, 191, 255, .55);
  --move-destination: #FF8A1A;
  --move-destination-fill: rgba(255, 138, 26, .24);
  --move-destination-glow: rgba(255, 138, 26, .52);
  --move-pair: #FF4F87;
  --move-pair-fill: rgba(255, 79, 135, .3);
  --move-pair-edge: #332A72;

  /* Границы тёплые */
  --border: #2D3547;
  --border-light: #3D4559;
  --border-glow: rgba(240, 178, 50, 0.15);

  /* Доска */
  --board-light: #E6D39A;
  --board-dark: #146B4A;

  /* Шрифты */
  /* Р-204 · Свои шрифты идут первыми, системные остаются запасом. */
  --font-sans: "Noto Sans Site", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Noto Serif Site", Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;

  --step: 8px;
  --radius: 10px;
  --radius-lg: 16px;
  --dur: 280ms;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* Р-281 · Слой круга v102 удалён целиком. Он лежал здесь вклеенной копией:
   тот же отбор (.discovery-hero, .discovery-head, .discovery-brief,
   .discovery-card, .discovery-result) заново задавался в site-hero.css, и до
   экрана доходили правила оттуда. Живыми оставались только те, что мешали:
   `.discovery-result-box .btn` растягивал обе кнопки окна за
   его края, а `::after { content:"↓" }` рисовал стрелку на кнопке «Смотреть
   доску». Правлено само мёртвое правило, а не заглушено новым. */

* { box-sizing: border-box; margin: 0; }

html { scroll-behavior: smooth; }

body {
  font: 400 17px/1.7 var(--font-sans);
  color: var(--text);
  background: var(--vault-bg);
  -webkit-font-smoothing: antialiased;
}

button, a, [role="button"] { caret-color: transparent; }

::selection {
  background: rgba(240, 178, 50, 0.3);
  color: #fff;
}

/* ---------- Utilities ---------- */
.wrap {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

.eyebrow {
  font: 700 12px/1.4 var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: calc(var(--step) * 2);
}

.skip {
  position: fixed;
  left: 16px;
  top: -6rem;
  z-index: 100;
  padding: 10px 18px;
  background: var(--gold);
  color: var(--vault-bg);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip:focus { top: 16px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  background: var(--vault-bg-elevated);
  color: var(--text-warm);
  font: 600 15px/1.2 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  position: relative;
  overflow: hidden;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(240,178,50,0.06) 100%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.btn:hover {
  border-color: var(--gold-dim);
  color: var(--text-bright);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 0 1px var(--border-glow);
}
.btn:hover::before { opacity: 1; }
.btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn.primary {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  border-color: transparent;
  color: #1A1200;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(240, 178, 50, 0.25), 0 0 0 1px rgba(255,224,102,0.1);
  animation: glow-pulse 3s ease-in-out infinite;
}
.btn.primary:hover {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
  box-shadow: 0 8px 32px rgba(240, 178, 50, 0.4), 0 0 0 1px rgba(255,224,102,0.2);
  transform: translateY(-2px);
}
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(240, 178, 50, 0.25), 0 0 0 1px rgba(255,224,102,0.1); }
  50% { box-shadow: 0 4px 28px rgba(240, 178, 50, 0.38), 0 0 0 1px rgba(255,224,102,0.18); }
}

.btn:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

/* ---------- Header ---------- */
.top {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: rgba(15, 20, 25, 0.82);
  backdrop-filter: blur(20px) saturate(1.3);
  border-bottom: 1px solid var(--border);
}
.top .wrap {
  display: flex;
  align-items: center;
  gap: calc(var(--step) * 3);
  min-height: 68px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text-bright);
}

.pawn-logo {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--gold-dim);
  border-radius: 50%;
  color: #BFE0FF;
  background: radial-gradient(circle, rgba(142,197,255,.12), transparent 68%);
  font: 400 31px/1 Georgia, "Noto Serif", serif;
  overflow: hidden;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.pawn-logo::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  transform: translateX(-50%);
}
.brand:hover .pawn-logo { color: #FFFFFF; border-color: var(--gold); transform: translateY(-1px); }

.brand .word b {
  font: 600 1.15rem/1.1 var(--font-display);
  letter-spacing: 0.01em;
  color: var(--text-bright);
}

.top nav {
  margin-left: clamp(18px, 2.2vw, 36px);
  display: flex;
  align-items: center;
  flex: 1;
  gap: 4px;
  flex-wrap: wrap;
}
.top nav a {
  padding: 8px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: all var(--dur) var(--ease);
  position: relative;
}
.top nav a::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transition: all var(--dur) var(--ease);
  transform: translateX(-50%);
  border-radius: 1px;
}
.top nav a:hover {
  color: var(--gold-light);
  text-shadow: 0 0 16px rgba(240, 178, 50, 0.3);
}
.top nav a:hover::after {
  width: 60%;
}

.navtoggle {
  display: none;
  margin-left: auto;
  width: 42px;
  height: 42px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.navtoggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text-warm);
  border-radius: 1px;
  transition: all var(--dur) var(--ease);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: calc(68px + 64px) 0 80px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 75% 45%, rgba(240, 178, 50, 0.07) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 80% 35%, rgba(142, 197, 255, 0.04) 0%, transparent 50%),
    linear-gradient(180deg, var(--vault-bg) 0%, var(--vault-bg-mid) 50%, var(--vault-bg) 100%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 45% 35% at 78% 42%, rgba(255, 224, 102, 0.04) 0%, transparent 70%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}

.hero-text {
  padding-bottom: 20px;
  animation: fade-up 0.8s var(--ease) both;
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-text .eyebrow {
  color: var(--gold-deep);
  margin-bottom: calc(var(--step) * 2.5);
}

/* Лозунг с объёмом и переливом */
.hero-text h1 {
  font-family: var(--font-display);
  line-height: 1.05;
  letter-spacing: -0.03em;
}



.hero-text .lead {
  margin-top: 28px;
  font-size: clamp(1.05rem, 1.2vw, 1.25rem);
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 44ch;
  animation: fade-up 0.8s 0.45s var(--ease) both;
}

/* CTA с анимацией */







/* Trust — одна колонка с иконками */
.trust {
  display: grid;
  gap: 16px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  animation: fade-up 0.8s 0.75s var(--ease) both;
}



/* ---------- Player ---------- */
.player {
  display: grid;
  gap: calc(var(--step) * 2.5);
  animation: fade-up 0.8s 0.4s var(--ease) both;
}






/* Парящая доска */
.stage {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, rgba(30,37,51,0.7), rgba(22,28,38,0.5));
  border: 1px solid var(--border);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(240, 178, 50, 0.06),
    0 0 40px rgba(240, 178, 50, 0.04),
    inset 0 1px 0 rgba(255,255,255,0.03);
  transition: border-color var(--dur) var(--ease);
}
.position-state {
  position: absolute;
  z-index: 7;
  top: 30px;
  left: 30px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(15,20,25,0.88);
  border: 1px solid var(--gold-dim);
  color: var(--gold-light);
  font: 700 11px/1 var(--font-sans);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  pointer-events: none;
}

.board {
  --pad: 22px;
  position: relative;
  aspect-ratio: 1;
  border-radius: calc(var(--radius) + 2px);
  background: var(--vault-bg);
  box-shadow:
    inset 0 0 0 1px rgba(240, 178, 50, 0.12),
    inset 0 2px 4px rgba(0,0,0,0.3);
  overflow: hidden;
}

.grid {
  position: absolute;
  inset: var(--pad);
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.sq { position: relative; }
.sq.light { background: var(--board-light); }
.sq.dark { background: var(--board-dark); }

/* Marks */
.sq .ring, .sq .field, .sq .nexus {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.sq.is-support .ring { opacity: 1; }
.sq .ring::after {
  content: "";
  position: absolute;
  inset: 10%;
  border: 3px solid #22D3EE;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(142, 197, 255, 0.3);
}
.sq.is-field .field { opacity: 1; }
.sq .field::after {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  box-shadow: inset 0 0 0 3px #FFD166, inset 0 0 18px rgba(255,209,102,.18);
}
.sq.is-nexus .nexus { opacity: 1; }
.sq .nexus::before, .sq .nexus::after {
  content: "";
  position: absolute;
  clip-path: polygon(50% 2%, 93% 26%, 93% 74%, 50% 98%, 7% 74%, 7% 26%);
}
.sq .nexus::before { inset: 12%; background: #B49CFF; }
.sq .nexus::after { inset: 21%; }
.sq.light .nexus::after { background: var(--board-light); }
.sq.dark .nexus::after { background: var(--board-dark); }
.sq.is-moved { animation: land 600ms var(--ease); }
@keyframes land {
  0% { box-shadow: inset 0 0 0 0 rgba(240, 178, 50, 0); }
  35% { box-shadow: inset 0 0 0 4px rgba(240, 178, 50, 0.85); }
  100% { box-shadow: inset 0 0 0 0 rgba(240, 178, 50, 0); }
}

/* Rays */
.rays {
  position: absolute;
  inset: var(--pad);
  pointer-events: none;
  z-index: 3;
}
.rays line, .rays path {
  fill: none;
  stroke: var(--ray);
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  filter: drop-shadow(0 0 3px rgba(142, 197, 255, 0.4));
}
.rays line.on, .rays path.on { opacity: 0.9; }
.demo-board .rays { z-index: 6; }
.demo-board .rays .helper-ray { stroke: #FF2D55; stroke-width: 2.6; filter: drop-shadow(0 0 4px rgba(255,45,85,.68)); }
.demo-board .rays .nexus-ray { stroke: #A855F7; stroke-width: 3.4; filter: drop-shadow(0 0 5px rgba(168,85,247,.78)); }
.demo-board .rays .move-ray { stroke: #00E5FF; stroke-width: 4.5; filter: drop-shadow(0 0 6px rgba(0,229,255,.72)); }
.demo-board .rays .swap-ray { stroke: #00E5FF; stroke-width: 4; filter: drop-shadow(0 0 6px rgba(0,229,255,.68)); }
/* Pieces */
.pieces {
  position: absolute;
  inset: var(--pad);
  pointer-events: none;
  z-index: 4;
}
.pc {
  position: absolute;
  left: 0;
  top: 0;
  width: 12.5%;
  height: 12.5%;
  display: grid;
  place-items: center;
}
.pc img {
  width: 86%;
  height: 86%;
  display: block;
  object-fit: contain;
}
.demo-pc { will-change: transform, opacity; }

/* Coords */
.coords {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font: 600 11px/1 var(--font-sans);
  color: #7A9B8A;
  letter-spacing: 0.06em;
}
.coords span { position: absolute; }
.coords .f { bottom: 6px; transform: translateX(-50%); }
.coords .r { left: 8px; transform: translateY(-50%); }

/* Controls */
.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.hero-demo-controls {
  justify-content: center;
  min-height: 46px;
}
.player-action {
  min-height: 44px;
  padding: 11px 18px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  background: var(--vault-bg-elevated);
  color: var(--text-warm);
  font: 700 13px/1.2 var(--font-sans);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.player-action:hover,
.player-action:focus-visible {
  background: var(--vault-bg-warm);
  border-color: var(--gold-dim);
  color: var(--gold-light);
  box-shadow: 0 7px 20px rgba(0,0,0,0.28);
  outline: none;
}
.player-action[aria-pressed="true"] {
  border-color: var(--gold);
  color: var(--gold-light);
  background: linear-gradient(135deg, rgba(240,178,50,0.18), rgba(30,37,51,0.96));
}
.player-action[hidden] { display: none; }
@keyframes participant-invite {
  0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 4px 18px rgba(240,178,50,0.28); }
  50% { transform: translateY(-4px) scale(1.025); box-shadow: 0 10px 30px rgba(240,178,50,0.5); }
}
.controls .icon {
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--vault-bg-elevated);
  color: var(--text-warm);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.controls .icon:hover {
  background: var(--vault-bg-warm);
  border-color: var(--gold-dim);
  color: var(--gold-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.controls .icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.controls .icon:disabled {
  opacity: 0.35;
  cursor: default;
}
.controls .icon:disabled:hover {
  background: var(--vault-bg-elevated);
  border-color: var(--border);
  color: var(--text-warm);
  transform: none;
  box-shadow: none;
}






/* Phase panel */
.phase {
  display: grid;
  gap: 8px;
  padding: 16px 20px;
  border-radius: var(--radius);
  background: var(--vault-bg-elevated);
  border: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.phase .steps {
  display: flex;
  gap: 6px;
  align-items: center;
}
.phase .steps b {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  transition: background var(--dur) var(--ease);
}
.phase .steps b.done { background: var(--gold-dim); }
.phase .steps b.now { background: var(--gold); box-shadow: 0 0 8px rgba(240,178,50,0.3); }
.phase .name {
  font: 700 11px var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.phase .text {
  margin: 0;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
  min-height: 2.6em;
}
.phase .meta {
  margin: 0;
  color: var(--text-dim);
  font-size: 13px;
}
.phase .meta b { color: var(--text-warm); }








/* ---------- Four extra moves guide ---------- */
.extra-guide {
  padding: clamp(64px, 7vh, 92px) 0;
  border-top: 1px solid var(--border);
  background:
    radial-gradient(circle at 78% 28%, rgba(0,229,255,.07), transparent 28%),
    linear-gradient(180deg, #10161d, #131b24 55%, #10161d);
}
.extra-guide-head {
  display: grid;
  grid-template-columns: minmax(300px,.82fr) minmax(520px,1.18fr);
  gap: 40px;
  align-items: end;
  margin-bottom: 28px;
}
.extra-guide-head h2 {
  margin: 5px 0 8px;
  color: var(--text-bright);
  font: 600 clamp(2rem,3.4vw,3rem)/1.08 var(--font-display);
}
.extra-guide-head > div:first-child > p:last-child { color: #C8D0CC; font-size: 1.05rem; }




.extra-guide-layout {
  display: grid;
  grid-template-columns: minmax(380px,.9fr) minmax(560px,1.35fr);
  gap: 24px;
  align-items: stretch;
}
.extra-rule-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
}
.extra-rule-tile {
  position: relative;
  min-height: 190px;
  padding: 14px;
  overflow: hidden;
  border: 2px solid #334451;
  border-radius: 16px;
  background: linear-gradient(145deg,#1B2631,#141C24);
  color: #FFFFFF;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.035);
  transition: transform 220ms var(--ease), border-color 220ms var(--ease), box-shadow 220ms var(--ease), background 220ms var(--ease);
}
.extra-rule-tile:hover { transform: translateY(-3px); border-color: #647786; }
.extra-rule-tile.is-active {
  border-color: #00DDF2;
  background: linear-gradient(145deg,#173541,#17232D);
  box-shadow: 0 15px 34px rgba(0,0,0,.32), 0 0 0 3px rgba(0,221,242,.12), inset 0 1px rgba(255,255,255,.07);
}
.extra-rule-tile:focus-visible { outline: 3px solid #FF7A00; outline-offset: 3px; }
.extra-rule-tile strong, .extra-rule-tile small, .extra-rule-tile code { position: relative; z-index: 2; display: block; }
.extra-rule-tile strong { margin-top: 10px; font: 850 17px/1.1 var(--font-sans); }
.extra-rule-tile small { margin-top: 5px; color: #B8C4C0; font-weight: 650; }
.extra-rule-tile code { margin-top: 9px; color: #FFC247; font: 800 13px/1 var(--font-mono); }
.rule-thumb {
  position: relative;
  display: grid;
  grid-template-columns: 1fr .7fr 1fr;
  place-items: center;
  width: 100%;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  background-color: #146B4A;
  background-image:
    linear-gradient(45deg,#E6D39A 25%,transparent 25%,transparent 75%,#E6D39A 75%),
    linear-gradient(45deg,#E6D39A 25%,transparent 25%,transparent 75%,#E6D39A 75%);
  background-position: 0 0,18px 18px;
  background-size: 36px 36px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.rule-thumb i { color: #FFF; font: normal 42px/1 serif; filter: drop-shadow(0 2px 1px #000); }
.rule-thumb em { width: 19px; height: 19px; border: 3px solid #FF3CAC; color: transparent; box-shadow: 0 0 8px #FF3CAC; }

.extra-rule-panel {
  min-width: 0;
  padding: 22px;
  border: 1px solid #3A4C59;
  border-radius: 18px;
  background: linear-gradient(145deg,#1C2731,#151E26);
  box-shadow: 0 22px 46px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.045);
}
.extra-rule-panel.is-changing { opacity: .25; transform: translateX(8px); }
.extra-rule-panel { transition: opacity 180ms var(--ease), transform 220ms var(--ease); }

.extra-panel-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.extra-panel-top h3 { margin: 3px 0 0; color: #FFF; font: 850 1.55rem/1 var(--font-sans); }

.extra-study { display: grid; grid-template-columns: minmax(300px,.95fr) minmax(250px,1.05fr); gap: 22px; align-items: start; }
.extra-board-shell { min-width: 0; }
.extra-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  aspect-ratio: 1;
  overflow: hidden;
  border: 12px solid #0D1318;
  border-radius: 13px;
  background: #0D1318;
  box-shadow: 0 16px 30px rgba(0,0,0,.35);
}





.extra-board-controls { display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; margin-top: 10px; }
.extra-board-controls button { min-height: 36px; padding: 7px; border: 1px solid #455663; border-radius: 8px; background: #18232C; color: #DCE4E0; font: 750 11px/1.1 var(--font-sans); cursor:pointer; }
.extra-board-controls button:hover,.extra-board-controls button.is-active,.extra-board-controls button[aria-pressed="true"] { border-color:#00DDF2; background:#12323B; color:#FFF; }
.extra-board-controls button { min-height:52px; display:grid; place-items:center; }
.extra-board-controls button svg { width:34px; height:34px; fill:currentColor; }
.extra-explanation { min-width: 0; }

.extra-explanation ol { display:grid; gap:10px; margin:0; padding:0; list-style:none; counter-reset:rule-step; }
.extra-explanation li { position:relative; padding:11px 12px 11px 42px; border:1px solid #344550; border-radius:10px; background:#162029; color:#D6DEDA; font:600 13px/1.4 var(--font-sans); counter-increment:rule-step; }
.extra-explanation li::before { content:counter(rule-step); position:absolute; left:12px; top:10px; width:20px; height:20px; display:grid; place-items:center; border-radius:50%; background:#00B7C9; color:#071216; font:900 11px/1 var(--font-sans); }



.extra-definition { margin-top:9px; padding:13px; border-left:3px solid #A855F7; background:#171E28; color:#D5DEDA; font:600 13px/1.5 var(--font-sans); }
.extra-definition a { display:inline-block; margin-top:9px; color:#00E5FF; font-weight:800; }

/* ---------- Rules Section (legacy, hidden) ---------- */
.rules {
  padding: 120px 0;
  background: linear-gradient(180deg, var(--vault-bg) 0%, var(--vault-bg-mid) 30%, var(--vault-bg-deep) 100%);
  border-top: 1px solid var(--border);
}
























/* ---------- About Section ---------- */
.about {
  padding: 110px 0;
  background: var(--vault-bg-mid);
  position: relative;
  overflow: hidden;
}
.about::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -10%;
  width: 50%;
  height: 180%;
  background: radial-gradient(ellipse at center, rgba(240, 178, 50, 0.05) 0%, transparent 65%);
  pointer-events: none;
}




/* ---------- Union & Author ---------- */
.author {
  padding: 90px 0;
  border-top: 1px solid var(--border);
}






.position-lab { padding: 84px 0; background: #17263A; color: #F7FAFF; }

/* Р-281 · Слой круга v100 удалён целиком: первый экран трижды переписан
   после него, и до экрана эти правила уже не доходили. Живой была только
   подсветка полей хода — `.discovery-board .sq.is-from/.is-to`; она
   переехала в site-hero.css к остальным правилам первого экрана. */

/* v101 · Новые задачи идут первыми; прежние примеры остаются доступны в
   собственной прокручиваемой колонке без роста всей панели Analysis. */
#lab-analysis-pane .lab-example-list {
  justify-content:flex-start;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
#lab-analysis-pane .lab-example-list button { flex:0 0 auto; }
.position-lab-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 36px; align-items: end; margin-bottom: 24px; }
.position-lab-head h2 { margin: 5px 0 0; font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.02; }
.position-lab-head > p { margin: 0; color: #FFFFFF; font-size: 1.08rem; line-height: 1.65; }
.position-lab-shell { display: grid; grid-template-columns: minmax(320px, 488px) minmax(340px, 488px); gap: 26px; align-items: stretch; justify-content:center; }
.position-lab-board-column { min-width: 0; }
/* Р-283 · Доска «Практики» приведена к общему виду: рамка вокруг поля, внутри
   неё разметка, и та же тёмная подложка с золотой волосяной линией, что у доски
   «Партии» и первого экрана (`.board`). Прежде здесь стоял свой кант в 8 px
   цвета `#101923`, а буквы с цифрами лежали снаружи на фоне секции. */
.position-lab-board { position:relative; width:100%; aspect-ratio: 1; border:0; border-radius:3px; overflow:hidden; background:#263A52; box-shadow:0 4px 12px rgba(0,0,0,.4); }
.lab-grid { position:absolute; inset:0; display:grid; grid-template-columns:repeat(8,1fr); }
.lab-pieces { position:absolute; inset:0; pointer-events:none; z-index:2; }
.lab-piece { position:absolute; left:0; top:0; width:12.5%; height:12.5%; display:grid; place-items:center; }
.lab-square { display:grid; place-items:center; position:relative; border:0; padding:0; line-height:1; }
.lab-square.light { background:#e6d39a; } .lab-square.dark { background:#146b4a; }
.lab-piece img { width:80%; height:80%; object-fit:contain; filter:drop-shadow(0 2px 1px rgba(0,0,0,.7)); pointer-events:none; }




.lab-square.is-selected { box-shadow:inset 0 0 0 5px #ffd24d; }
.lab-square:focus-visible { z-index:1; outline:4px solid #8ec5ff; outline-offset:-4px; }




.position-lab-panel { min-height:488px; box-sizing:border-box; padding:24px; display: flex; flex-direction: column; justify-content: flex-start; }
.lab-mode { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:20px; padding:4px; border-radius:12px; background:rgba(7,17,29,.45); }
.lab-mode button { border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 10px 15px; background: transparent; color: #FFFFFF; }
.lab-mode button.is-active { background: #FFD26A; border-color: #FFD26A; color: #17263A; font-weight: 800; }
.position-lab-panel label { font-weight: 800; margin-bottom: 8px; }









.lab-status { color: #FFFFFF; margin: 10px 0; min-height:1.5em; }
.lab-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
/* Р-202 · Правила `.lab-notation` сняты: такого узла на странице нет, а в
   `content` лежала русская строка «Сделайте ход» — она пережила перевод сайта
   на английский и была бы видна, если бы узел появился. */
.lab-notation li { display:flex; gap:10px; align-items:center; }
.lab-notation .move-number { color:#FFFFFF; min-width:2.4em; }

.position-lab-panel li + li { margin-top: 8px; }
.lab-editor { margin:0 0 8px; padding:14px; border:1px solid rgba(255,255,255,.16); border-radius:12px; background:rgba(7,17,29,.35); }




.lab-editor label { display:inline-block; margin:0 8px 0 0; }
.lab-editor select { border:1px solid rgba(255,255,255,.22); border-radius:8px; padding:8px 10px; background:#17263a; color:white; }
.lab-editor p { margin:12px 0 0; color:#FFFFFF; font-size:.86rem; line-height:1.45; }


.lab-square.is-from { box-shadow:inset 0 0 0 5px #8ec5ff; }
.lab-square.is-to { box-shadow:inset 0 0 0 5px #ffd24d; }









 















.author-main { display: grid; grid-template-columns: minmax(160px, 230px) minmax(0, 1fr); gap: 28px; align-items: start; }
.author-portrait { margin: 0; overflow: hidden; border-radius: 22px; background: #F7F4ED; border: 2px solid rgba(255,210,106,.55); box-shadow: 0 18px 44px rgba(7,17,29,.28); }
.author-portrait img { display: block; width: 100%; height: auto; }
.author-copy h2 { margin-top: 6px; }
.author-copy p + p { margin-top: 12px; }
.author-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* Донаты: у каждой сети своя строка, свой адрес и свой QR-код. */
.wallet-body { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; align-items: start; }
.wallet-qr { margin: 0; display: grid; gap: 8px; justify-items: center; }
.wallet-qr img { display: block; width: 132px; height: 132px; padding: 8px; border-radius: 12px; background: #fff; box-shadow: 0 6px 18px rgba(7,17,29,.35); }
.wallet-qr figcaption { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); text-align: center; }
.wallet-detail { display: grid; gap: 10px; align-content: start; }

@media (max-width: 520px) {
  .wallet-body { grid-template-columns: 1fr; justify-items: center; }
  .wallet-detail { width: 100%; }
}

@media (max-width: 820px) {
.position-lab-head, .position-lab-shell { grid-template-columns: 1fr; gap: 24px; }

  .position-lab-board { width: min(100%, 520px); margin-inline: auto; }
  .author-main { grid-template-columns: 130px minmax(0, 1fr); }
  
}

@media (max-width: 560px) {
  .position-lab { padding: 60px 0; }
  .author-main { grid-template-columns: 1fr; }
  .author-portrait { width: min(68vw, 230px); }
}

.author { background: #24354C; }

/* Position Lab v16 — visual language of the approved game player */
.position-lab { padding:72px 0 78px; background:radial-gradient(circle at 15% 8%,rgba(53,198,211,.09),transparent 34%),#17263a; }
.position-lab-head { grid-template-columns:minmax(0,1fr) minmax(300px,.78fr); max-width:1002px; margin:0 auto 24px; align-items:center; }
.position-lab-head h2 { max-width:650px; margin:6px 0 0; color:#FFFFFF; font-family:var(--font-display); font-size:clamp(2rem,3.35vw,3.15rem); font-weight:650; letter-spacing:-.035em; line-height:1.02; }
.position-lab-head h2 span { color:#ffd26a; }
.position-lab-head > p { justify-self:end; max-width:390px; padding:14px 18px; border-left:3px solid #35c6d3; border-radius:0 12px 12px 0; background:rgba(7,17,29,.34); color:#e7eef6; font-size:1rem; line-height:1.48; text-align:left; }
.position-lab-head > p strong { color:#fff; }
.position-lab-shell { grid-template-columns:minmax(340px,488px) minmax(350px,488px); gap:26px; align-items:start; }
.lab-board-wrap { position:relative; }
.lab-seal { position:absolute; z-index:8; inset:50% auto auto 50%; width:min(72%,310px); transform:translate(-50%,-50%); padding:19px 22px; border:1px solid rgba(255,210,106,.7); border-radius:14px; background:rgba(9,20,32,.93); color:#fff; box-shadow:0 18px 54px rgba(0,0,0,.5),inset 0 0 0 3px rgba(255,255,255,.035); cursor:pointer; text-align:center; transition:opacity .35s ease,transform .35s ease; }
.lab-seal::before { content:""; position:absolute; inset:-7px; border:1px dashed rgba(255,210,106,.45); border-radius:18px; pointer-events:none; }
.lab-seal span,.lab-seal small { display:block; color:#9dd5ff; font-size:.72rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.lab-seal strong { display:block; margin:7px 0 6px; color:#ffd26a; font-family:var(--font-display); font-size:1.42rem; }
.lab-seal.is-open { opacity:0; transform:translate(-50%,-50%) scale(.92); pointer-events:none; }
.lab-transport { min-height:44px; margin:12px auto 0; justify-content:center; }
.lab-transport .demo-play { min-width:174px; }



.position-lab-panel { min-height:488px; padding:22px; border-color:rgba(157,213,255,.24); background:linear-gradient(145deg,rgba(35,54,76,.96),rgba(22,37,55,.98)); box-shadow:0 18px 40px rgba(0,0,0,.2); }
.lab-mode { grid-template-columns:repeat(auto-fit,minmax(105px,1fr)); margin-bottom:17px; }
.lab-mode button { min-width:0; padding:9px 10px; font-size:.87rem; }
.lab-pane { min-width:0; }




.lab-notation { min-height:92px; max-height:178px; margin:0; padding:12px; display:grid; align-content:start; grid-template-columns:1fr 1fr; gap:5px 8px; }
.lab-notation:empty::before { content:"Последний ход появится после открытия позиции"; grid-column:1/-1; color:#8fa4ba; font-size:.9rem; }
.lab-notation li { min-width:0; padding:7px 9px; border-radius:8px; background:rgba(255,255,255,.035); }
.lab-notation li + li { margin:0; }
.lab-notation strong { color:#f7faff; }
.lab-notation .move-number { min-width:auto; color:#8ec5ff; }
.lab-actions { margin-top:0; }










.lab-square.is-move-target::after { content:""; position:absolute; z-index:4; width:24%; aspect-ratio:1; border-radius:50%; pointer-events:none; }
.lab-square.is-move-target.move-regular::after { background:#41d9ff; }
.lab-square.is-move-target.move-simple-shift::after { background:#ffd24d; }
.lab-square.is-move-target.move-simple-swap::after { background:#ff7a59; border-radius:3px; transform:rotate(45deg); }
.lab-square.is-move-target.move-nexus-shift::after { background:#a855f7; box-shadow:0 0 0 4px rgba(168,85,247,.24); }
.lab-square.is-move-target.move-nexus-swap::after { background:#ff3cac; border-radius:3px; transform:rotate(45deg); box-shadow:0 0 0 4px rgba(255,60,172,.22); }
.lab-editor { margin:0; padding:16px; }
.lab-piece-row { display:grid; grid-template-columns:repeat(6,1fr); gap:7px; }
.lab-piece-row + .lab-piece-row { margin-top:7px; }
.lab-piece-row button,.lab-editor-tools button { min-height:48px; border:1px solid rgba(255,255,255,.14); border-radius:9px; background:#263a52; cursor:pointer; }
.lab-piece-row button:hover,.lab-piece-row button.is-active,.lab-editor-tools button.is-active { border-color:#ffd24d; background:#314a65; box-shadow:inset 0 0 0 2px rgba(255,210,77,.55); }
.lab-piece-row img { width:38px; height:38px; object-fit:contain; }
.lab-editor-tools { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:11px 0; }
.lab-editor-tools button { color:#f7faff; font-size:1.35rem; }
.lab-turn { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:10px 0; color:#dce6f1; }
.lab-turn select { min-width:150px; }
.lab-editor-commands { display:grid; gap:8px; margin-top:14px; }
.lab-editor-feedback { min-height:1.3em; margin:10px 0 0; color:#ffcf8b; font-size:.85rem; }
.lab-analysis-status { color:#FFFFFF; }
#lab-analysis-pane h3 { margin:6px 0 14px; color:#fff; font-family:var(--font-display); }
#lab-analysis-notation button { border:0; padding:0; background:none; color:#f7faff; font-weight:800; cursor:pointer; }
#lab-analysis-notation .is-future { opacity:.42; }
@media (max-width:820px){.position-lab-head{grid-template-columns:1fr}.position-lab-head>p{justify-self:start;max-width:none}.position-lab-shell{grid-template-columns:1fr}.position-lab-board-column,.position-lab-panel{width:min(100%,488px);margin-inline:auto}}

/* Position Lab v17 — compact equal columns and external coordinates */
.position-lab { padding:48px 0 54px; }
.position-lab-head { max-width:906px; grid-template-columns:minmax(0,1fr) minmax(280px,.72fr); gap:24px; margin-bottom:18px; }
.position-lab-head h2 { max-width:540px; font-size:clamp(1.8rem,2.7vw,2.48rem); letter-spacing:-.025em; line-height:1.06; }
.position-lab-head > p { max-width:330px; padding:11px 15px; font-size:.93rem; line-height:1.42; }
.position-lab-shell { grid-template-columns:minmax(330px,440px) minmax(340px,452px); gap:14px; }
.lab-board-wrap { box-sizing:border-box; }
.position-lab-board { box-sizing:border-box; width:100%; min-width:0; aspect-ratio:1/1; }
.lab-square { min-width:0; min-height:0; overflow:hidden; }
.lab-coords-files { position:absolute; z-index:7; left:22px; right:22px; bottom:6px; display:grid; grid-template-columns:repeat(8,1fr); color:#7A9B8A; font:600 11px/1 var(--font-sans); letter-spacing:.06em; text-align:center; text-transform:lowercase; pointer-events:none; }
.lab-coords-ranks { position:absolute; z-index:7; left:8px; top:22px; bottom:22px; display:grid; grid-template-rows:repeat(8,1fr); align-items:center; color:#7A9B8A; font:600 11px/1 var(--font-sans); letter-spacing:.06em; text-align:center; pointer-events:none; }


.position-lab-panel { min-height:524px; padding:19px; }
.lab-transport { min-height:40px; margin-top:7px; gap:8px; }
.lab-transport .demo-control { width:46px; height:38px; }
.lab-transport .demo-play { display:none; }
.lab-board-key { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 10px; min-height:36px; margin:7px 0 0 20px; padding:7px 8px; border:1px solid rgba(255,255,255,.12); border-radius:10px; background:rgba(7,17,29,.32); color:#c7d4e2; font-size:.69rem; line-height:1; }
.lab-board-key[hidden] { display:none; }
.lab-board-key span { display:flex; align-items:center; gap:4px; white-space:nowrap; }
.lab-board-key i { display:inline-block; width:9px; height:9px; border-radius:50%; }
.lab-board-key .move-regular { background:#41d9ff; }
.lab-board-key .move-simple-shift { background:#ffd24d; }
.lab-board-key .move-simple-swap { background:#ff7a59; border-radius:2px; transform:rotate(45deg); }
.lab-board-key .move-nexus-shift { background:#a855f7; box-shadow:0 0 0 2px rgba(168,85,247,.22); }
.lab-board-key .move-nexus-swap { background:#ff3cac; border-radius:2px; transform:rotate(45deg); box-shadow:0 0 0 2px rgba(255,60,172,.2); }



.lab-mode { margin-bottom:13px; }
.lab-notation { min-height:102px; max-height:166px; }


.lab-piece-row button,.lab-editor-tools button { min-height:43px; }
.lab-piece-row img { width:34px; height:34px; }
.lab-editor { padding:13px; }
.lab-editor-commands { margin-top:11px; gap:6px; }
.lab-editor-feedback { margin-top:7px; }
.position-lab .btn:disabled,.lab-transport button:disabled { opacity:.38; cursor:not-allowed; filter:saturate(.35); }
@media (max-width:820px){.position-lab{padding:40px 0 46px}.position-lab-head{max-width:452px}.position-lab-shell{grid-template-columns:1fr;gap:16px}.position-lab-board-column,.position-lab-panel{width:min(100%,452px)}.position-lab-panel{min-height:auto}}

/* Position Lab v18 — puzzle feedback and symmetric move selection */

.lab-task-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:1px 0 10px; padding:8px 11px; border:1px solid rgba(157,213,255,.2); border-radius:10px; background:rgba(7,17,29,.28); color:#dfe9f4; font-size:.78rem; font-weight:850; letter-spacing:.055em; text-transform:uppercase; }
.lab-task-meta span:first-child { color:#ffd26a; }
.lab-task-meta span:last-child { color:#9dd5ff; }
.lab-task-feedback { min-height:42px; display:flex; align-items:center; margin:10px 0; padding:9px 12px; border-radius:9px; background:rgba(7,17,29,.22); color:#FFFFFF; font-weight:750; }
.lab-task-feedback:empty { visibility:hidden; }
.lab-task-feedback.is-error { visibility:visible; border:1px solid rgba(255,82,96,.45); background:rgba(116,20,32,.28); color:#ff9ca6; }
.lab-task-feedback.is-success { visibility:visible; border:1px solid rgba(57,217,139,.38); background:rgba(19,91,60,.25); color:#8cf0bd; }
.lab-task-feedback.is-neutral { visibility:visible; border:1px solid rgba(157,213,255,.28); color:#c9d9e9; }
.lab-notation li.is-error { border:1px solid rgba(255,82,96,.42); background:rgba(116,20,32,.25); }
.lab-notation li.is-error strong { color:#ff9ca6; }
.lab-board-key { display:grid; grid-template-columns:repeat(6,max-content); align-items:center; justify-content:center; column-gap:7px; row-gap:7px; }
.lab-board-key span:nth-child(-n+3) { grid-column:span 2; }
.lab-board-key span:nth-child(4) { grid-column:2/span 2; }
.lab-board-key span:nth-child(5) { grid-column:4/span 2; }

.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--step) * 6);
  align-items: start;
}
.two h2 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--text-bright);
  margin-bottom: 16px;
}
.two p {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 20px;
}
.two .btn { margin-top: 8px; }

.panel {
  padding: calc(var(--step) * 4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, rgba(55,70,95,0.78), rgba(38,52,72,0.68));
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  transition: all var(--dur) var(--ease);
}
.panel:hover {
  border-color: var(--border-light);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3), 0 0 0 1px var(--border-glow);
}
.panel h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-bright);
  margin-bottom: 10px;
}
.panel p { font-size: 15px; margin-bottom: 16px; }

/* Poll */
.poll-options {
  display: grid;
  gap: 10px;
}
.poll-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--vault-bg-elevated);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  font-size: 14px;
  color: var(--text-muted);
}
.poll-opt:hover {
  border-color: var(--gold-dim);
  background: rgba(240,178,50,0.05);
  color: var(--text-warm);
  transform: translateX(4px);
}
.poll-opt input {
  width: 18px;
  height: 18px;
  accent-color: var(--gold);
  cursor: pointer;
}
.poll-opt span { pointer-events: none; }
.poll-note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-dim);
  font-style: italic;
}

/* Wallet */
.wallet { display: grid; gap: 12px; }
.wallet-row {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--vault-bg);
  border: 1px solid var(--border);
  transition: all var(--dur) var(--ease);
}
.wallet-row:hover {
  border-color: var(--gold-dim);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.wallet-label {
  display: block;
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.wallet code {
  padding: 12px;
  border-radius: var(--radius);
  background: var(--vault-bg-mid);
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-warm);
  overflow-wrap: anywhere;
  font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.02em;
}
.wallet .btn {
  width: fit-content;
  padding: 10px 18px;
  font-size: 13px;
}
.wallet small {
  font-size: 12px;
  color: var(--text-dim);
}

.panel .note {
  margin-top: 16px;
  padding: 12px 16px;
  border-left: 3px solid var(--gold-dim);
  background: rgba(240, 178, 50, 0.05);
  font-size: 13px;
  color: var(--text-muted);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* ---------- Demonstration game ---------- */
.demo-game {
  padding: 104px 0;
  /* Р-186 · Секция перестала быть тёмной с одного края. Слева, у доски,
     остаётся тёплый отсвет золота — это сторона игры. Справа, где стоят запись
     партии и разбор хода, приходит холодный синий свет — это сторона
     объяснения. Два источника делят секцию по смыслу, а не оставляют правую
     половину чёрной. */
  background:
    radial-gradient(circle at 18% 22%, rgba(240,178,50,0.09), transparent 36%),
    radial-gradient(78% 62% at 82% 46%, rgba(46,85,144,0.3), transparent 64%),
    linear-gradient(180deg, var(--vault-bg), var(--vault-bg-mid));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.demo-game-head { max-width: 760px; margin-bottom: 32px; }
.demo-game-head h2 { margin: 8px 0 14px; }
.demo-game-head .sub {
  color: #E7DFD1;
  font: 650 clamp(17px, 1.5vw, 20px)/1.55 var(--font-sans);
  letter-spacing: .005em;
}
.difference-showcase {
  display: grid;
  grid-template-columns: minmax(170px, .38fr) minmax(0, 1fr);
  gap: 18px;
  margin-bottom: 38px;
}
/* И-3 · Кнопки делят высоту карточки поровну. Карточек стало пять, и при
   `align-content: center` рельс кончался на 70 px выше карточки справа. Ряды
   взяли `1fr`: низ рельса и низ карточки снова на одной линии. */
.difference-rail {
  display: grid;
  gap: 7px;
  align-content: stretch;
  grid-auto-rows: 1fr;
}
.difference-rail button {
  position: relative;
  min-height: 48px;
  padding: 11px 16px 11px 22px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(51,65,73,.72), rgba(29,38,44,.84));
  color: #E0E6E2;
  text-align: left;
  font: 750 14px/1.2 var(--font-sans);
  cursor: pointer;
  transition: color 220ms var(--ease), background 220ms var(--ease), transform 220ms var(--ease);
}
.difference-rail button::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #5D6C64;
  transform: translateY(-50%);
}
.difference-rail button[aria-selected="true"] {
  border-color: #22D3EE;
  background: linear-gradient(135deg, rgba(34,211,238,.2), rgba(29,52,60,.96));
  color: #FFFFFF;
  transform: translateX(5px);
  box-shadow: 0 10px 28px rgba(0,0,0,.28), inset 0 0 0 1px rgba(34,211,238,.18), 0 0 18px rgba(34,211,238,.12);
}
.difference-rail button[aria-selected="true"]::before { background: #22D3EE; box-shadow: 0 0 12px rgba(34,211,238,.8); }
.difference-panels {
  min-height: 242px;
  border: 1px solid var(--border-light);
  border-radius: calc(var(--radius) * 1.25);
  overflow: hidden;
  /* Р-185 · Правая панель взяла зелёный доски. Тот же род цвета, что у тёмных
     полей `--board-dark: #146B4A`, но светлее и мягче: массивной заливки нет,
     по фону идёт свет из верхнего левого угла и гаснет к правому нижнему.
     Панель светлее индигового столбца слева, поэтому глаз идёт слева направо
     сам, а светлый контур эмблемы перестаёт сливаться с фоном. */
  background:
    radial-gradient(130% 90% at 20% 14%, rgba(255,255,255,.1), transparent 58%),
    radial-gradient(90% 70% at 88% 96%, rgba(4,26,18,.34), transparent 62%),
    linear-gradient(140deg, #20604A 0%, #18503D 52%, #12392A 100%);
  box-shadow: 0 24px 58px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.04);
}
.difference-panel {
  display: grid;
  grid-template-columns: minmax(105px, .36fr) 1fr;
  gap: clamp(20px, 4vw, 52px);
  align-items: center;
  min-height: 242px;
  padding: clamp(24px, 4vw, 46px);
  transition: opacity 240ms var(--ease), transform 240ms var(--ease), filter 240ms var(--ease);
}
.difference-panel[hidden] { display: none; }
.difference-panel.is-leaving { opacity: 0; transform: translateX(-12px); filter: blur(2px); }
.difference-panel.is-entering { animation: difference-in 460ms var(--ease) both; }
@keyframes difference-in {
  from { opacity: 0; transform: translateX(22px); filter: blur(2px); }
  to { opacity: 1; transform: translateX(0); }
}
.difference-symbol {
  display: grid;
  place-items: center;
  width: clamp(92px, 10vw, 126px);
  aspect-ratio: 1;
  border: 1px solid rgba(214,236,255,.44);
  border-radius: 32% 68% 55% 45% / 45% 38% 62% 55%;
  /* Р-185 · Тёмная сердцевина медальона. На зелёной панели светлый знак без
     неё теряется: это ровно то, о чём говорил автор. Цвет знака поднят до
     почти белого, кант стал заметнее. */
  background:
    radial-gradient(circle, rgba(142,197,255,.18), rgba(142,197,255,.05)),
    linear-gradient(180deg, rgba(7,26,21,.66), rgba(7,26,21,.5));
  color: #EAF4FF;
  font: 400 clamp(54px, 7vw, 82px)/1 Georgia, serif;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.28));
}
.difference-extra-symbol { color: #5CE9FF; border-color: rgba(34,211,238,.66); background: radial-gradient(circle, rgba(34,211,238,.2), rgba(7,26,21,.55)); font-family: var(--font-sans); font-weight: 900; box-shadow: 0 0 34px rgba(34,211,238,.16); }
.difference-participants-symbol { color:#D9C2FF; border-color:rgba(168,85,247,.62); background:radial-gradient(circle,rgba(168,85,247,.2),rgba(7,26,21,.55)); font-family:var(--font-sans); font-weight:900; }
.difference-nexus-symbol { color:#D9C2FF; border-color:rgba(168,85,247,.72); background:radial-gradient(circle,rgba(168,85,247,.26),rgba(7,26,21,.55)); font-family:var(--font-sans); font-weight:950; box-shadow:0 0 34px rgba(168,85,247,.18); }
.difference-panel h3 { margin:0 0 14px; color:#FFFFFF; font:850 clamp(20px,2vw,28px)/1.15 var(--font-sans); }
.difference-pawn-symbol { position: relative; }
.difference-pawn-symbol::after {
  content: "";
  position: absolute;
  top: 23.5%;
  left: 50%;
  width: 9%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: currentColor;
  transform: translateX(-50%);
}
.difference-draw-symbol { color: #FFD166; font: 800 clamp(25px, 3vw, 38px)/1 var(--font-sans); letter-spacing: -.08em; }
.extra-notation-rule b { color: #22D3EE; font-size: 1.25em; }

.difference-panel ul {
  display: grid;
  gap: 13px;
  margin: 0;
  padding-left: 22px;
  color: #E4EAE6;
  font: 650 clamp(16px, 1.25vw, 19px)/1.45 var(--font-sans);
}
.difference-panel li::marker { color: var(--spark-mark); } /* Р-182 */
.pawn-area { width:min(100%,430px); margin-top:18px; padding:14px 16px; border-left:3px solid #FFC247; border-radius:0 10px 10px 0; background:rgba(255,194,71,.08); }
.pawn-area strong { display:block; margin-bottom:10px; color:#FFD57A; font:850 13px/1.2 var(--font-sans); letter-spacing:.035em; text-transform:uppercase; }
.pawn-area dl { display:grid; gap:7px; margin:0; }
.pawn-area dl > div { display:grid; grid-template-columns:90px 1fr; gap:12px; }
.pawn-area dt { color:#FFFFFF; font-weight:800; }
.pawn-area dd { margin:0; color:#C8D2CD; }
.demo-game-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(420px, 520px) minmax(430px, 1fr);
  gap: clamp(28px, 3.5vw, 48px);
  align-items: start;
}
.demo-game .wrap { max-width: 1320px; }
/* Поведение пломбы партии: место, слой и уход. Вид задан ниже, в Р-160. */
.demo-start-overlay {
  position: absolute;
  z-index: 20;
  inset: 0;
  transition: opacity 360ms var(--ease), visibility 360ms var(--ease);
}
.demo-start-overlay.is-dismissed { opacity: 0; visibility: hidden; pointer-events: none; }
.demo-board-column { width: 100%; max-width: 520px; min-width: 0; }
.demo-stage {
  padding: 20px;
  border: 1px solid var(--border-light);
  border-radius: calc(var(--radius) * 1.6);
  background: rgba(10,14,18,0.74);
  box-shadow: 0 30px 75px rgba(0,0,0,0.4);
}
.demo-board .sq.is-origin::after,
.demo-board .sq.is-destination::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.demo-board .sq.is-support .ring::after {
  inset: 5%;
  width: auto;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(closest-side at 5% 5%, #39FF88 72%, transparent 78%),
    radial-gradient(closest-side at 95% 5%, #39FF88 72%, transparent 78%),
    radial-gradient(closest-side at 5% 95%, #39FF88 72%, transparent 78%),
    radial-gradient(closest-side at 95% 95%, #39FF88 72%, transparent 78%);
  background-size: 13% 13%;
  background-repeat: no-repeat;
  background-position: left top, right top, left bottom, right bottom;
  box-shadow: none;
  transform: none;
}
.demo-board .sq.is-nexus .nexus::before { inset: 2%; background: #B388FF; }
.demo-board .sq.is-nexus .nexus::after { inset: 7%; }
.demo-board .sq.is-field .field::after {
  inset: 7%;
  background:
    linear-gradient(#FF3CAC,#FF3CAC) left top/32% 4px no-repeat,
    linear-gradient(#FF3CAC,#FF3CAC) left top/4px 32% no-repeat,
    linear-gradient(#FF3CAC,#FF3CAC) right top/32% 4px no-repeat,
    linear-gradient(#FF3CAC,#FF3CAC) right top/4px 32% no-repeat,
    linear-gradient(#FF3CAC,#FF3CAC) left bottom/32% 4px no-repeat,
    linear-gradient(#FF3CAC,#FF3CAC) left bottom/4px 32% no-repeat,
    linear-gradient(#FF3CAC,#FF3CAC) right bottom/32% 4px no-repeat,
    linear-gradient(#FF3CAC,#FF3CAC) right bottom/4px 32% no-repeat;
  box-shadow: 0 0 14px rgba(255,60,172,.5);
}
.demo-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 12px;
  color: #AEBAB3;
  font: 650 11px/1.25 var(--font-sans);
}
.demo-legend span { display: inline-flex; align-items: center; gap: 6px; }
.demo-legend i { width: 14px; height: 14px; display: inline-block; border-radius: 3px; }
.legend-interaction {
  background:
    linear-gradient(#FF3CAC,#FF3CAC) left top/45% 2px no-repeat,
    linear-gradient(#FF3CAC,#FF3CAC) left top/2px 45% no-repeat,
    linear-gradient(#FF3CAC,#FF3CAC) right top/45% 2px no-repeat,
    linear-gradient(#FF3CAC,#FF3CAC) right top/2px 45% no-repeat,
    linear-gradient(#FF3CAC,#FF3CAC) left bottom/45% 2px no-repeat,
    linear-gradient(#FF3CAC,#FF3CAC) left bottom/2px 45% no-repeat,
    linear-gradient(#FF3CAC,#FF3CAC) right bottom/45% 2px no-repeat,
    linear-gradient(#FF3CAC,#FF3CAC) right bottom/2px 45% no-repeat;
}

.legend-nexus { background: #B388FF; clip-path: polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%); }
.demo-player-controls { margin-top: 16px; }
.demo-transport {
  display: flex;
  align-items: center;
  gap: 9px;
  justify-content: center;
}
.demo-control {
  min-width: 44px;
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  background: var(--vault-bg-elevated);
  color: var(--text-warm);
  font: 700 13px/1 var(--font-sans);
  cursor: pointer;
}
.demo-control:hover, .demo-control:focus-visible {
  border-color: var(--gold-dim);
  color: var(--gold-light);
  outline: none;
}
.demo-control:disabled { opacity: 0.35; cursor: not-allowed; }
.demo-play { min-width: 76px; border-color: var(--gold-dim); }
.demo-control svg { width: 22px; height: 22px; display: block; margin: auto; }
.demo-control svg path { fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.demo-story {
  display: grid;
  grid-template-columns: minmax(270px, .9fr) minmax(300px, 1.1fr);
  gap: 16px;
  align-items: start;
  min-width: 0;
}
.demo-status {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  min-height: 0;
  padding: 24px;
  /* Р-186 · Разбор хода — объяснение, а объяснение на сайте говорит индиго.
     Прежний плоский `#20272D` на тёмной секции читался как чёрный
     прямоугольник: правая половина «Партии» выглядела безжизненной. */
  /* Р-214 · Карточка разбора стала светлее. Прежний индиго уходил почти в
     чёрный к нижнему краю, и на тёмной секции это читалось как мрачное пятно.
     Цвет остался тем же по роду — объяснение на сайте говорит индиго, — но
     поднят по светлоте примерно вдвое. */
  border: 1px solid rgba(150,182,232,.5);
  border-radius: var(--radius);
  background: linear-gradient(150deg, #3E619B 0%, #33518A 58%, #2B4372 100%);
  box-shadow: 0 14px 34px rgba(6,14,28,.32);
  overflow: hidden;
  transition: height 420ms var(--ease), opacity 280ms var(--ease), transform 320ms var(--ease), filter 260ms var(--ease);
}
.demo-status[hidden] { display: none; }
.demo-status.is-appearing { animation: cloud-appear 520ms var(--ease) both; }
.demo-status.is-updating { opacity: .12; transform: translateX(10px) scale(.985); filter: blur(2px); }
@keyframes cloud-appear {
  from { opacity: 0; transform: translateX(-16px) scale(.9); clip-path: inset(42% 44% 42% 0 round 12px); }
  to { opacity: 1; transform: translateX(0) scale(1); clip-path: inset(0 round 12px); }
}
.demo-status::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 34px;
  width: 18px;
  height: 18px;
  border-left: 1px solid rgba(120,156,214,.42);
  border-bottom: 1px solid rgba(120,156,214,.42);
  background: #3B5D95;                 /* Р-214 · тот же индиго, что у карточки */
  transform: rotate(45deg);
}
/* Р-282 · Имя механики белое полужирное — по общему правилу Р-241. Голубой
   `#22D3EE` тут нарушал его: голубым на сайте помечен термин `Spark Move`, а не
   имена механик. Заголовок обычного хода приглушён: секция учит новым ходам, и
   обычный ход обязан звучать тише их. Разница теперь в светлоте и весе, а не в
   цвете. */
.demo-status h3 { margin: 0 0 11px; color: #FFFFFF; font-size: 1.18rem; font-weight: 850; letter-spacing: .01em; }
.demo-status.is-ordinary h3 { color: var(--seal-text-dim); font-weight: 750; }
.demo-status p:not(.eyebrow) {
  color: #FFFFFF;
  font: 600 15px/1.6 var(--font-sans);
}
.demo-status p span { display: block; }
.demo-status p span + span { margin-top: 8px; }
/* Р-186 · Сообщение о ходе — это объяснение, а на сайте объяснение говорит
   индиго: карточка вступления, пломбы «Практики» и «Партии». Прежний фиолетовый
   в девять процентов на тёмном фоне давал почти чёрный прямоугольник: цвет был
   задан, а глазом его не было. */
.demo-note {
  margin-top: 13px;
  padding: 10px 13px;
  border-left: 3px solid var(--spark-mark);
  border-radius: 0 9px 9px 0;
  /* Р-214 · Сообщение отделяется от карточки не темнотой, а светом: прежде
     оно было почти чёрным прямоугольником внутри и добавляло секции мрака.
     Голубой кант слева остаётся признаком подробности. */
  background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.07));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  color: #FFFFFF !important;
  font-size: 13px !important;
}
/* Р-209 · Надпись переехала в разметку. В стилях её нельзя было перевести
   ни на один язык: словарь работает по узлам страницы, а не по CSS. */
.demo-note .demo-note-label {
  display: block;
  margin-bottom: 6px;
  color: #9DD5FF;
  font: 850 12px/1.2 var(--font-sans);
  letter-spacing: .03em;
}
.demo-note[hidden] { display: none; }
.demo-status code {
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(142,197,255,0.13);
  color: #BFE0FF;
  font: 800 15px/1 var(--font-sans);
}
/* Р-282 · Ссылка настоящим золотом: она главное действие карточки, а золото на
   сайте значит именно это (С8). Прежний `#FFE9A8` — кремовый, он запрещён
   (С19). */
.demo-status a {
  display: inline-block;
  margin-top: 14px;
  color: var(--gold);
  font-weight: 700;
}
.demo-status a[hidden] { display: none; }
.demo-notation {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  max-height: 450px;
  overflow-y: auto;
  margin: 16px 0 0;
  padding: 4px;
  list-style-position: inside;
}
.demo-notation li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  color: #AEBBB4;
  font: 750 16px/1.25 ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
}
.demo-move-number { padding-left: 5px; color: #899991; font-size: 13px; }
.demo-notation button {
  padding: 7px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #FFFFFF;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.demo-notation button:hover { background: rgba(255,255,255,0.07); color: #FFFFFF; }
.demo-notation button.is-extra { color: #FFC247; }
.demo-notation button.is-current {
  background: rgba(240,178,50,0.18);
  box-shadow: inset 0 0 0 1px rgba(255,210,102,0.42);
  color: #FFFFFF;
}
.demo-result {
  grid-column: 1;
  justify-self: center;
  width: fit-content;
  margin-top: 18px;
  padding: 13px 30px 15px;
  border: 1px solid rgba(34,211,238,.5);
  border-radius: 12px;
  background: linear-gradient(155deg, rgba(24,55,61,.98), rgba(27,31,33,.98));
  box-shadow: 0 14px 30px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.1), inset 0 -4px 10px rgba(0,0,0,.22);
  color: var(--text-muted);
  text-align: center;
  user-select: none;
  caret-color: transparent;
}
.demo-result strong { color: #FFFFFF; font: 900 clamp(30px, 3.2vw, 44px)/1 var(--font-sans); letter-spacing: -.04em; text-shadow: 0 2px 9px rgba(34,211,238,.22); }
.demo-result span { color: #E2E8E4; font-weight: 600; line-height: 1.5; }
.demo-result small { color: var(--text-dim); line-height: 1.45; }

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--border);
  background: var(--vault-bg);
  color: var(--text-dim);
  font-size: 14px;
}
.foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--step) calc(var(--step) * 4);
  justify-content: space-between;
  padding: calc(var(--step) * 5) 0;
}
.foot strong { color: var(--text-warm); font-weight: 600; }
.foot a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease);
}
.foot a:hover { color: var(--gold-light); }

/* ---------- v10: current four-rule presentation ---------- */
.extra-guide .wrap { max-width:1440px; }
.extra-guide-head {
  grid-template-columns:minmax(520px,.9fr) minmax(0,1.35fr);
  gap:24px;
  align-items:end;
}
.extra-guide-head h2 { max-width:none; margin-bottom:0; }
.extra-guide-intro {
  max-width:520px;
  justify-self:start;
  margin:0 0 3px;
  padding:4px 0 4px 22px;
  border-left:3px solid #FFC247;
}




.extra-guide-layout { grid-template-columns:minmax(520px,.9fr) minmax(0,1.35fr); align-items:stretch; }
.extra-rule-grid { align-self:stretch; grid-auto-rows:285px; }
.extra-rule-tile { height:285px; min-height:285px; padding:14px; }
.extra-rule-tile strong { margin-top:12px; font-size:18px; }
.rule-thumb {
  display:block;
  width:min(100%,220px);
  height:auto;
  aspect-ratio:1;
  margin-inline:auto;
  background:none;
  box-shadow:0 12px 24px rgba(0,0,0,.28);
}
.rule-thumb > img { display:block; width:100%; height:100%; object-fit:contain; }





.rule-thumb > svg { position:absolute; inset:0; z-index:5; width:100%; height:100%; overflow:visible; pointer-events:none; }
.rule-thumb > svg path { fill:none; stroke-linecap:round; stroke-linejoin:round; }



.extra-panel-top { min-height:38px; margin-bottom:17px; }
.extra-rule-panel { min-height:584px; box-sizing:border-box; }
.extra-panel-top h3 { font-size:1.75rem; }




.extra-study { grid-template-columns:minmax(250px,.92fr) minmax(0,1.08fr); gap:18px; align-items:start; }
.extra-board-shell { position:relative; min-width:0; }
.extra-board {
  display:block;
  width:min(100%,360px);
  max-width:100%;
  margin-inline:auto;
  aspect-ratio:auto;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}
.extra-board > img { display:block; width:100%; max-width:100%; height:auto; }










.extra-explanation > ul { display:grid; gap:9px; margin:0; padding:0; list-style:none; }
.extra-explanation > ul > li { position:relative; padding:12px 12px 12px 32px; border:1px solid #344550; border-radius:10px; background:#162029; color:#D6DEDA; font:600 13px/1.4 var(--font-sans); }
.extra-explanation > ul > li::before { content:""; position:absolute; left:14px; top:17px; width:8px; height:8px; border-radius:2px; background:#35C6D3; transform:rotate(45deg); box-shadow:0 0 7px rgba(53,198,211,.28); }
.extra-definition.is-visible { display:block; margin-top:14px; border-left-color:#00DDF2; color:#FFFFFF; }
.extra-rule-note { margin-top:12px; padding:11px 12px; border:1px solid #655128; border-radius:9px; background:#262217; color:#F4D889; font:750 13px/1.45 var(--font-sans); }
.extra-rule-note ul { display:grid; gap:7px; margin:0; padding-left:20px; }
.extra-rule-note li { display:list-item; margin:0; padding:0; border:0; border-radius:0; background:transparent; color:#F4D889; font:750 13px/1.45 var(--font-sans); counter-increment:none; }
.extra-rule-note li::before { content:none; }
.extra-rule-note li::marker { color:#FFC247; }
.extra-rule-note[hidden] { display:none; }
.extra-board-controls { width:min(calc(100% - 24px),336px); margin:10px auto 0; justify-content:center; grid-template-columns:repeat(2,minmax(104px,1fr)); }
.extra-board-controls button { min-width:0; }
.extra-board-controls button:disabled { opacity:.65; cursor:wait; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .extra-guide-head { grid-template-columns: 1fr; gap: 18px; }
  
  .extra-guide-layout { grid-template-columns: 1fr; }
  .extra-rule-grid { grid-template-columns: repeat(2,minmax(180px,1fr)); overflow: visible; padding: 0; scroll-snap-type: none; }
  .extra-rule-tile { min-height: 174px; scroll-snap-align: start; }
  .extra-study { grid-template-columns: minmax(280px,.85fr) minmax(280px,1.15fr); }
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .hero-text { text-align: center; }
  .hero-text .lead { margin-inline: auto; }
  
  .trust { max-width: 480px; margin-inline: auto; }
  .player { order: -1; }
  .stage { max-width: 420px; }
  .demo-game-layout { grid-template-columns: 1fr; }
  .demo-board-column { max-width: 560px; width: 100%; margin-inline: auto; }
  .demo-story { max-width: 760px; width: 100%; margin-inline: auto; }

  .two { grid-template-columns: 1fr; gap: 40px; }
  
  

  .top nav {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    padding: 12px 0 16px;
    border-top: 1px solid var(--border);
    margin-top: 8px;
  }
  .top nav.open { display: flex; }
  .top nav a { padding: 10px 0; }
  .navtoggle { display: flex; }
}

@media (max-width: 640px) {
  .extra-guide { padding: 64px 0; }
  .extra-guide-head { margin-bottom: 20px; }
  
  
  .extra-guide-layout { gap: 16px; }
  .extra-rule-grid { grid-template-columns: repeat(2,minmax(0,1fr)); overflow:visible; padding:0; gap:9px; }
  .extra-rule-tile { min-height: 158px; padding:10px; }
  .rule-thumb { width:min(100%,132px); height:auto; }
  .extra-rule-tile strong { font-size:14px; }
  .extra-rule-tile small { font-size:11px; }
  .extra-rule-tile code { font-size:11px; }
  .extra-rule-panel { padding:14px; }
  .extra-panel-top { align-items:flex-start; }
  
  .extra-study { grid-template-columns:1fr; }
  .extra-board { max-width:420px; margin-inline:auto; }
  body { font-size: 16px; }
  .hero { padding: calc(68px + 32px) 0 48px; }
  .stage { padding: 14px; }
  .board { --pad: 14px; }
  
  
  
  
  
  .rules { padding: 80px 0; }
  .about { padding: 72px 0; }
  .author { padding: 60px 0; }
  
  .demo-game { padding: 72px 0; }
  .difference-showcase { grid-template-columns: 1fr; }
  .difference-rail { display: flex; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x mandatory; }
  .difference-rail button { min-width: 128px; scroll-snap-align: start; }
  .difference-rail button[aria-selected="true"] { transform: none; }
  .difference-panel { grid-template-columns: 76px 1fr; gap: 16px; padding: 22px 18px; }
  .difference-symbol { width: 72px; font-size: 46px; }
  .demo-stage { padding: 12px; }
  .demo-transport { flex-wrap: wrap; }
  .demo-story { grid-template-columns: 1fr; }
  .demo-notation, .demo-status { grid-column: 1; }
  .demo-notation { grid-row: 1; }
  .demo-status { grid-row: 2; }
  .demo-result { grid-column: 1; }
  .demo-status::before { left: 28px; top: -10px; transform: rotate(135deg); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* Position Lab v19 — Lichess-like editor docks and traditional score */


.lab-editor-piece-dock { box-sizing:border-box; width:calc(100% - 20px); margin-left:20px; padding:6px 8px; border:1px solid rgba(255,255,255,.13); background:rgba(8,18,29,.58); }
.lab-editor-piece-dock.is-black { margin-bottom:6px; border-radius:10px 10px 5px 5px; }
.lab-editor-piece-dock.is-white { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; margin-top:6px; border-radius:5px 5px 10px 10px; }
.lab-editor-piece-dock[hidden] { display:none; }
.lab-editor-piece-dock .lab-piece-row { grid-template-columns:repeat(6,minmax(38px,1fr)); gap:5px; }
.lab-editor-piece-dock .lab-piece-row button,.lab-editor-piece-dock .lab-editor-tools button { min-height:42px; padding:2px; }
.lab-editor-piece-dock .lab-editor-tools { grid-template-columns:repeat(2,42px); gap:5px; margin:0; }
.lab-fen-editor { display:grid; gap:8px; }
.lab-fen-editor label { color:#ffd26a; }
.lab-fen-editor textarea { box-sizing:border-box; width:100%; resize:vertical; min-height:72px; padding:10px 11px; border:1px solid rgba(255,255,255,.2); border-radius:9px; background:#101c2a; color:#f7faff; font:700 .78rem/1.45 ui-monospace,monospace; }
.lab-fen-editor > div { display:flex; gap:8px; }
.lab-turn { justify-content:flex-start; flex-wrap:wrap; padding:10px 12px; border:1px solid rgba(255,255,255,.13); border-radius:10px; background:rgba(7,17,29,.28); }
.lab-turn legend { padding:0 5px; color:#aebed0; font-size:.75rem; font-weight:800; }
.lab-turn label { display:flex; align-items:center; gap:7px; margin:0; cursor:pointer; }
.lab-turn input { width:17px; height:17px; margin:0; accent-color:#35c6d3; }
.lab-score { overflow:hidden; min-height:150px; margin:12px 0; border:1px solid rgba(157,213,255,.2); border-radius:11px; background:rgba(7,17,29,.34); }
.lab-score-head,.lab-score-row { display:grid; grid-template-columns:42px minmax(0,1fr) minmax(0,1fr); }
.lab-score-head { border-bottom:1px solid rgba(157,213,255,.22); background:rgba(157,213,255,.08); color:#9dd5ff; font-size:.71rem; font-weight:900; letter-spacing:.07em; text-transform:uppercase; }
.lab-score-head span,.lab-score-row > span { min-width:0; padding:9px 10px; }
.lab-score-head span:nth-child(3),.lab-score-row > span:nth-child(3) { border-left:1px solid rgba(157,213,255,.16); }
.lab-score-number { color:#8095aa; text-align:right; font:800 .78rem/1.35 ui-monospace,monospace; }
.lab-score-move { color:#f7faff; font-weight:850; }
.lab-score-move.is-regular { color:#eaf7ff; }
.lab-score-move.is-spark { color:#72e5c8; }
.lab-score-move.is-error { background:#d91f35; color:#fff; }
.lab-score-move.is-future { opacity:.38; }
.lab-score-move button { width:100%; border:0; padding:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.lab-square.is-from { box-shadow:inset 0 0 0 5px #00bfff; }
.lab-square.is-to { box-shadow:inset 0 0 0 5px #ff7a00; }
.lab-board-key .move-simple-shift { background:#35d07f; }
.lab-square.is-move-target::after { width:18%; opacity:.58; }
.lab-square.is-move-target.move-simple-shift::after { background:#35d07f; }
.lab-square.is-move-target:has(img)::after { width:62%; background:transparent!important; border:4px solid currentColor; opacity:.52; }
.lab-square.is-move-target.move-regular:has(img)::after { color:#41d9ff; }
.lab-square.is-move-target.move-simple-shift:has(img)::after { color:#35d07f; }
.lab-square.is-move-target.move-simple-swap:has(img)::after { color:#ff7a59; }
.lab-square.is-move-target.move-nexus-shift:has(img)::after { color:#a855f7; }
.lab-square.is-move-target.move-nexus-swap:has(img)::after { color:#ff3cac; }
.lab-task-feedback.is-error { border-color:#ff263f; background:#d91f35; color:#fff; font-weight:900; }
@media(max-width:540px){.lab-editor-piece-dock .lab-piece-row button{min-height:36px}.lab-editor-piece-dock .lab-editor-tools{grid-template-columns:repeat(2,36px)}.lab-score-head,.lab-score-row{grid-template-columns:36px 1fr 1fr}.lab-score-head span,.lab-score-row>span{padding:8px 7px}}

/* Position Lab v20 — invariant square board and one player frame in every mode */
.position-lab .wrap { max-width:1180px; }
.position-lab-head { max-width:1100px; }
.position-lab-shell { width:min(100%,1100px); grid-template-columns:minmax(500px,540px) minmax(500px,540px); gap:20px; }
.position-lab-board-column { width:100%; }
/* Р-283 · Обёртка и есть рамка доски: те же поля 22 px со всех сторон, тот же
   скруглённый тёмный фон и золотая волосяная линия внутри, что у `.board`. */
.lab-board-wrap {
  box-sizing:border-box;
  width:100%;
  padding:22px;
  border-radius:calc(var(--radius) + 2px);
  background:var(--vault-bg);
  box-shadow:inset 0 0 0 1px rgba(240,178,50,.12), inset 0 2px 4px rgba(0,0,0,.3);
}
.position-lab-board {
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  grid-template-columns:repeat(8,minmax(0,1fr));
  grid-template-rows:repeat(8,minmax(0,1fr));
  align-items:stretch;
  contain:layout;
}
.lab-square { min-width:0; min-height:0; }
/* Разметка лежит в полях рамки — как на доске «Партии». */
.lab-coords-files { left:22px; right:22px; bottom:6px; }
.lab-coords-ranks { left:8px; top:22px; bottom:22px; }

.lab-seal[hidden] { display:none!important; }
.lab-editor-piece-dock { width:100%; margin-left:0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; align-items:center; }
.lab-editor-piece-dock.is-black { margin-bottom:7px; }
.lab-editor-piece-dock.is-white { margin-top:7px; }
.lab-editor-piece-dock .lab-piece-row { grid-template-columns:repeat(6,minmax(42px,1fr)); }
.lab-editor-piece-dock .lab-editor-tools { display:grid; grid-template-columns:repeat(2,44px); }
.position-lab-panel { min-width:0; min-height:0; }
.lab-mode { grid-template-columns:repeat(3,minmax(0,1fr)); }
.lab-mode button { padding:11px 8px; white-space:nowrap; font-size:.86rem; }
.lab-fen-editor { grid-template-columns:auto minmax(0,1fr) auto; align-items:center; }
.lab-fen-editor label { margin:0; }
.lab-fen-editor input,.lab-analysis-fen input { min-width:0; padding:11px; border:1px solid rgba(255,255,255,.2); border-radius:9px; background:#101c2a; color:#f7faff; font:700 .72rem/1.2 ui-monospace,monospace; white-space:nowrap; }
.lab-fen-editor > div { gap:6px; }
.lab-fen-editor .btn,.lab-analysis-fen .btn { padding:10px 11px; white-space:nowrap; font-size:.75rem; }
.lab-analysis-fen { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; gap:6px; align-items:center; }
.lab-analysis-fen label { margin:0; color:#ffd26a; font-weight:900; }
.lab-bad-move-mark { margin-left:2px; color:#ff3048; font-weight:1000; text-shadow:0 0 10px rgba(255,48,72,.45); }
.lab-score-move { color:#fff; }
.demo-score { grid-column:1; grid-row:1; min-width:0; }
.demo-score-head { display:grid; grid-template-columns:38px minmax(0,1fr) minmax(0,1fr); margin:0 4px; padding:0 0 7px; border-bottom:1px solid rgba(255,255,255,.12); color:#aebbb4; font:800 11px/1.2 var(--font-sans); letter-spacing:.08em; text-align:center; text-transform:uppercase; }
.demo-score-head span:first-child { color:#899991; }
.demo-notation { margin-top:5px; }
@media(max-width:900px){.position-lab-shell{width:min(100%,560px);grid-template-columns:1fr}.position-lab-head{max-width:560px}.position-lab-board-column,.position-lab-panel{width:100%}}
@media(max-width:560px){.lab-editor-piece-dock .lab-piece-row{grid-template-columns:repeat(6,minmax(30px,1fr))}.lab-editor-piece-dock .lab-editor-tools{grid-template-columns:repeat(2,36px)}.lab-fen-editor,.lab-analysis-fen{grid-template-columns:auto minmax(0,1fr)}.lab-fen-editor>div,.lab-analysis-fen .btn{grid-column:1/-1}.lab-mode button{font-size:.72rem;padding-inline:4px}}

/* Position Lab v21 — clear board, layered legal-move marks, examples */
.position-lab .wrap { max-width:1320px; }
.position-lab-head { max-width:1250px; }
.position-lab-shell { width:min(100%,1250px); grid-template-columns:minmax(530px,560px) minmax(560px,610px); gap:64px; }
.lab-board-wrap:has(.lab-seal:not(.is-open)) .position-lab-board { filter:none!important; transform:none!important; }
.lab-board-wrap { overflow:visible; }






.lab-square.is-selected { box-shadow:inset 0 0 0 5px #006bff,inset 0 0 0 8px rgba(255,255,255,.78); }
.lab-square.is-move-target::after { content:none!important; }
.lab-target-marker { position:absolute; z-index:4; box-sizing:border-box; pointer-events:none; }





.lab-board-key { margin-left:22px; width:calc(100% - 22px); }
.lab-board-key i { box-sizing:border-box; background:transparent!important; transform:none!important; box-shadow:none!important; }
.lab-board-key .move-regular { border-radius:50%; background:#20cfff!important; box-shadow:0 0 0 1px #07141f!important; }
.lab-board-key .move-simple-shift { border:2px solid #fff; border-radius:50%; box-shadow:0 0 0 1px #07141f!important; }
.lab-board-key .move-nexus-shift { border:2px solid #a855f7; border-radius:2px; }
.lab-board-key .move-simple-swap { border:2px solid #ff8a3d; border-radius:1px; }
.lab-board-key .move-nexus-swap { border:2px solid #ff2fc8; border-radius:1px; transform:rotate(45deg)!important; }
.lab-fen-editor { grid-template-columns:auto minmax(0,1fr); }
.lab-fen-editor>div { grid-column:2; }
.lab-analysis-fen { grid-template-columns:auto minmax(0,1fr); }

.lab-analysis-workspace { display:grid; grid-template-columns:142px minmax(0,1fr); gap:10px; margin-top:12px; min-height:400px; }
.lab-example-list { display:flex; flex-direction:column; gap:7px; padding:8px; border:1px solid rgba(157,213,255,.2); border-radius:11px; background:rgba(7,17,29,.34); }
.lab-example-list button { padding:11px 9px; border:1px solid rgba(255,255,255,.14); border-radius:8px; background:rgba(255,255,255,.035); color:#FFFFFF; font:800 .78rem/1.25 var(--font-sans); text-align:left; cursor:pointer; }
.lab-example-list button.is-active { border-color:#00bfff; background:rgba(0,191,255,.12); color:#fff; box-shadow:inset 3px 0 #00bfff; }
.lab-analysis-score { min-height:400px; max-height:440px; margin:0; overflow:auto; }
#lab-analysis-pane { min-height:520px; }
@media(max-width:1050px){.position-lab-shell{width:min(100%,610px);grid-template-columns:1fr;gap:18px}.position-lab-head{max-width:610px}}
@media(max-width:620px){.lab-analysis-workspace{grid-template-columns:1fr}.lab-example-list{display:grid;grid-template-columns:repeat(2,1fr)}.lab-analysis-score{min-height:300px}.lab-fen-editor>div {grid-column:1/-1}}

/* Position Lab v22 — approved hierarchy, turn dot, player navigation */
.position-lab-head { display:flex; flex-direction:column; align-items:center; gap:8px; max-width:900px; margin:0 auto 28px; text-align:center; }
.position-lab-head .eyebrow { margin:0; color:#ffd26a; }
.position-lab-head h2 { display:flex; flex-direction:column; align-items:center; max-width:none; margin:0; font-size:clamp(2.25rem,3.45vw,3.5rem); line-height:.98; letter-spacing:-.035em; }
.position-lab-head h2 span { color:#FFFFFF; font-size:.72em; font-weight:620; letter-spacing:-.015em; }
.position-lab-head h2 strong { color:#ffd26a; font-weight:760; }

.position-lab-shell { width:min(100%,1280px); grid-template-columns:minmax(520px,550px) minmax(620px,660px); gap:54px; }
.position-lab-panel { min-height:650px; }
.lab-seal { width:min(84%,440px); min-height:270px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:30px 34px; border:2px solid #d8a93d; border-radius:20px; background:linear-gradient(145deg,#f4e5bd,#e9c979); color:#17263a; box-shadow:0 22px 60px rgba(0,0,0,.38),inset 0 0 0 4px rgba(255,255,255,.28); }
.lab-seal::before { inset:-9px; border-color:rgba(255,218,126,.8); border-radius:25px; }
.lab-seal span { color:#5c4a24; font-size:.78rem; }
.lab-seal b { display:block; margin-top:17px; color:#006b9a; font:950 .88rem/1 var(--font-sans); letter-spacing:.09em; text-transform:uppercase; }
.lab-seal strong { max-width:330px; margin:11px 0 19px; color:#17263a; font-family:var(--font-display); font-size:clamp(1.7rem,2.2vw,2.2rem); line-height:1.06; }
.lab-seal:disabled { cursor:wait; opacity:.8; }
/* Р-283 · Метка очереди хода живёт в правом поле рамки, а не за её краем: с
   появлением рамки она висела в воздухе рядом с доской. */
.lab-turn-indicator { position:absolute; z-index:7; top:22px; right:1px; bottom:40px; width:20px; pointer-events:none; }
.lab-turn-indicator[hidden] { display:none; }
.lab-turn-indicator i { position:absolute; left:1px; display:none; box-sizing:border-box; width:17px; aspect-ratio:1; border-radius:50%; box-shadow:0 0 0 3px #00bfff,0 0 10px rgba(0,191,255,.65); }
.lab-turn-indicator [data-turn-side="black"] { top:3px; background:#111820; border:2px solid #d9e2eb; }
.lab-turn-indicator [data-turn-side="white"] { bottom:3px; background:#f7f3ea; border:2px solid #17202b; }
.lab-turn-indicator[data-turn="black"] [data-turn-side="black"],.lab-turn-indicator[data-turn="white"] [data-turn-side="white"] { display:block; }
.lab-square.is-selected { box-shadow:inset 0 0 0 6px #006bff,inset 0 0 0 9px rgba(255,255,255,.9); }




.lab-board-key .move-simple-shift { border-color:#ff4d4d; }
.lab-board-key .move-simple-swap { border-color:#ff9a32; }
.lab-board-key .move-nexus-swap { border-color:#ff2fc8; }
.lab-board-alert { position:absolute; z-index:10; inset:50% auto auto 50%; width:min(78%,370px); transform:translate(-50%,-50%); padding:18px 22px; border:2px solid #ff9a32; border-radius:14px; background:#fff3d6; color:#5b2715; box-shadow:0 18px 50px rgba(0,0,0,.4); text-align:center; }
.lab-board-alert[hidden] { display:none; }
.lab-board-alert strong { font:900 1rem/1.35 var(--font-sans); }
.lab-fen-editor input,.lab-analysis-fen input { font-size:.68rem; font-weight:450; letter-spacing:-.025em; }
.lab-analysis-workspace { min-height:475px; }
.lab-analysis-score { min-height:475px; max-height:500px; }
.lab-score-move.is-current { background:rgba(240,178,50,.18); box-shadow:inset 0 0 0 1px rgba(255,210,102,.42); color:#FFFFFF; }
@media(max-width:1120px){.position-lab-shell{width:min(100%,660px);grid-template-columns:1fr;gap:18px}.position-lab-head{max-width:660px}.position-lab-panel{min-height:auto}}
@media(max-width:620px){.lab-turn-indicator{right:1px}.position-lab-head h2{font-size:2.2rem}}

/* Position Lab v23 — shared player hierarchy, notation and motion */
.position-lab-head {
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(320px,.65fr);
  align-items:end;
  gap:36px;
  max-width:1250px;
  margin:0 auto 24px;
  text-align:left;
}
.position-lab-head .eyebrow { grid-column:1/-1; justify-self:start; }
.position-lab-head h2 {
  display:block;
  max-width:none;
  margin:0;
  color:#FFFFFF;
  font:650 clamp(2.05rem,3.2vw,3.25rem)/1.06 var(--font-display);
  letter-spacing:-.032em;
  white-space:nowrap;
}

.position-lab-shell { grid-template-columns:minmax(520px,550px) minmax(650px,680px); gap:44px; }
.lab-seal::before { content:none; }
.lab-seal span { color:#554776; font-size:.68rem; }
.lab-seal b { margin-top:10px; color:#7a294f; font-size:.75rem; }
.lab-seal strong { max-width:240px; margin:8px 0 13px; color:#17263a; font-size:clamp(1.18rem,1.45vw,1.42rem); line-height:1.08; }
.lab-transport[hidden] { display:none!important; }
.position-lab[data-active-mode="edit"] .lab-transport { display:none!important; }
.lab-target-marker { opacity:.68; }


.lab-analysis-workspace { grid-template-columns:190px minmax(0,1fr); min-height:386px; height:386px; }
.lab-example-list { padding:9px; }
.lab-example-list button { padding:12px 11px; }
.lab-analysis-score { min-height:386px; height:386px; max-height:386px; }
#lab-analysis-pane { min-height:0; }
.lab-score-head { position:sticky; z-index:3; top:0; }
.lab-score-move.is-spark,#lab-analysis-notation .lab-score-move.is-spark button { color:#ffc247; }
.lab-score-number { position:sticky; left:0; }
@media(max-width:1120px){
  .position-lab-head{grid-template-columns:1fr;gap:10px;max-width:660px}
  
  .position-lab-head h2{white-space:normal}
}
@media(max-width:620px){
  .lab-analysis-workspace{grid-template-columns:1fr;height:auto;min-height:0}
  .lab-analysis-score{height:330px;min-height:330px;max-height:330px}
}

/* Position Lab v24 — shared player profiles and mode-sized panels */
.position-lab-panel {
  align-self:start;
  min-height:0;
  height:auto;
}
/* Р-368 · Нотация задачи занимает всё, что осталось от панели. Прежние 164 px
   были мерой на глаз: панель сузилась до 500 px, высоту ей держит колонка
   доски, и жёсткая запись то оставляла пустую полосу, то выталкивала полоски
   набора за нижний край. Теперь запись растёт и сжимается сама, а органы
   управления и полоски стоят на месте. */
.position-lab-panel:has(#lab-puzzle-pane:not([hidden])) .lab-score {
  flex:1;
  height:auto;
  min-height:140px;
  max-height:none;
  overflow-y:auto;
}
.position-lab-panel:has(#position-lab-editor:not([hidden])) {
  width:100%;
}
.position-lab-panel:has(#lab-analysis-pane:not([hidden])) {
  width:100%;
}
.lab-seal {
  left:calc(50% + 11px);
  width:min(66%,350px);
  min-height:205px;
  padding:25px 30px;
  border:1px solid rgba(116,196,214,.48);
  border-radius:18px;
  background:linear-gradient(145deg,#162538,#20364d);
  color:#FFFFFF;
  box-shadow:0 22px 58px rgba(0,0,0,.52),inset 0 0 0 1px rgba(255,255,255,.045);
}
.lab-seal b {
  margin:0;
  color:#afc4d8;
  font:850 .76rem/1 var(--font-sans);
  letter-spacing:.095em;
  text-transform:uppercase;
}
.lab-seal strong {
  max-width:280px;
  margin:13px 0 22px;
  color:#FFFFFF;
  font:650 clamp(1.28rem,1.8vw,1.62rem)/1.12 var(--font-display);
}
.lab-seal small {
  padding:10px 21px;
  border:1px solid rgba(255,226,153,.36);
  border-radius:999px;
  background:#f5b942;
  color:#17202b;
  font-size:.73rem;
  font-weight:900;
  letter-spacing:.04em;
}
.lab-board-alert {
  inset:50% auto auto calc(50% + 11px);
  width:min(72%,390px);
  padding:17px 22px;
  border:2px solid #ff5a67;
  border-radius:14px;
  background:rgba(16,29,44,.97);
  color:#fff4f2;
  box-shadow:0 20px 54px rgba(0,0,0,.54);
  cursor:pointer;
  font:inherit;
}
.lab-board-alert[data-kind="info"] { border-color:#5fb7d4; color:#edf8ff; }
.lab-board-alert[data-kind="result"] { border-color:#ffc857; color:#FFFFFF; box-shadow:0 20px 54px rgba(0,0,0,.54),0 0 22px rgba(255,200,87,.18); }
.lab-board-alert:focus-visible { outline:3px solid #9dd5ff; outline-offset:3px; }
.lab-promotion {
  position:absolute;
  z-index:12;
  inset:50% auto auto calc(50% + 11px);
  width:min(76%,410px);
  transform:translate(-50%,-50%);
  padding:18px;
  border:1px solid rgba(116,196,214,.58);
  border-radius:16px;
  background:rgba(16,29,44,.98);
  box-shadow:0 22px 60px rgba(0,0,0,.6);
  color:#FFFFFF;
  text-align:center;
}
.lab-promotion[hidden] { display:none; }
.lab-promotion strong { display:block; margin-bottom:13px; font-size:.88rem; letter-spacing:.05em; }
.lab-promotion > div { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.lab-promotion button {
  display:grid;
  place-items:center;
  aspect-ratio:1;
  padding:5px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:10px;
  background:#263a52;
  cursor:pointer;
}
.lab-promotion button:hover,.lab-promotion button:focus-visible { border-color:#ffc857; background:#314a65; outline:0; box-shadow:inset 0 0 0 2px rgba(255,200,87,.4); }
.lab-promotion img { display:block; width:88%; height:88%; object-fit:contain; filter:drop-shadow(0 2px 2px rgba(0,0,0,.7)); }
.lab-fen-editor input,.lab-analysis-fen input {
  font:400 .84rem/1.25 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:-.018em;
}
.lab-fen-editor > div { justify-content:flex-start; }
.lab-fen-editor .btn,.lab-analysis-fen .btn { width:auto; }
.lab-score {
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  overflow:hidden;
}
.lab-score-head {
  position:relative;
  z-index:4;
  top:auto;
  background:#1b3046;
  box-shadow:0 1px 0 rgba(157,213,255,.24);
}
.lab-score-head span:nth-child(2),.lab-score-head span:nth-child(3) { text-align:center; }
.lab-score-body { min-height:0; overflow:auto; scrollbar-gutter:stable; }
.lab-analysis-workspace {
  grid-template-columns:minmax(220px,40%) minmax(0,60%);
  height:342px;
  min-height:342px;
}
.lab-analysis-score {
  height:342px;
  min-height:342px;
  max-height:342px;
  overflow:hidden;
}
#lab-analysis-pane { min-height:0; }
.lab-analysis-status { display:none!important; }
@media(max-width:1120px){
  .position-lab-panel{align-self:stretch}
}
@media(max-width:620px){
  .lab-seal{left:calc(50% + 11px);width:min(72%,350px);min-height:185px;padding:22px}
  .lab-analysis-workspace{grid-template-columns:1fr;height:auto;min-height:0}
  .lab-analysis-score{height:330px;min-height:330px;max-height:330px}
}

/* Position Lab v29 — заголовок раздела, соразмерная панель и стрелки сюжета */

/* Луч сюжета несёт наконечник, и линия чуть плотнее: стрелка читается на глаз,
   а рисунок остаётся лёгким. Наконечник растёт от толщины линии. */
.player .rays line, .player .rays path { stroke-width: 2.3; }

/* Шапка раздела: надзаголовок и название слева, три строки о вкладках справа.
   Каждая строка начинается с имени вкладки — посетитель сразу видит, куда
   нажимать. */
.position-lab-head { align-items:start; gap:44px; margin-bottom:30px; }
.position-lab-head .eyebrow { margin:0 0 10px; color:#9dd5ff; font-size:11px; letter-spacing:.2em; }
.position-lab-head h2 { color:#fff; font-size:clamp(1.95rem,2.9vw,2.9rem); letter-spacing:-.028em; }



/* Поле разбора принимает многострочную запись PGN, поэтому оно текстовое.
   Две строки видно сразу, а высоту посетитель тянет сам. */
.lab-analysis-fen textarea {
  box-sizing:border-box;
  width:100%;
  min-height:52px;
  max-height:180px;
  padding:9px 11px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:9px;
  background:#101c2a;
  color:#f7faff;
  font:400 .8rem/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;
  resize:vertical;
}
.lab-analysis-fen textarea::placeholder { color:#7d8fa3; }

/* Панель по ширине близка к доске: широкая колонка растягивала кнопки.
   Правки действуют от той ширины, где колонки стоят рядом, — узкие экраны
   сохраняют прежнюю раскладку в один столбец. */
.lab-editor-commands { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.lab-editor-commands .primary { grid-column:1/-1; }
.lab-fen-editor > div { flex-wrap:wrap; }
.lab-fen-editor .btn, .lab-analysis-fen .btn { padding:9px 13px; font-size:.82rem; }
@media(min-width:1051px){
  .position-lab-shell { grid-template-columns:minmax(500px,550px) minmax(440px,510px); gap:36px; }
}
@media(min-width:621px){
  .lab-analysis-workspace { grid-template-columns:minmax(150px,34%) minmax(0,66%); }
}

@media(max-width:1120px){
  .position-lab-head{gap:14px;margin-bottom:22px}
  
}

/* Footer v30 — правовая строка. Подвал распределяет две ячейки по краям, а
   правовая строка длиннее прежней подписи, поэтому она держит собственный
   предел ширины и прижимается вправо. */
.foot-legal { max-width: 62ch; text-align: right; line-height: 1.55; }
@media(max-width:720px){ .foot-legal { text-align: left; } }

/* ============================ v31 ====================================
   Три секции внизу страницы: опрос, автор, поддержка. Секция сообщества
   убрана, поэтому её фон и отступы переходят к опросу. Панели опроса и
   поддержки стоят по центру: раньше их ширину задавала колонка сетки
   `.two`, теперь у каждой собственный предел ширины. */
.support {
  padding: 78px 0;
  border-top: 1px solid var(--border);
}

.support { background: #1E2E42; }
.author { padding: 90px 0; }



.support .support-panel { max-width: 760px; margin: 0 auto; }
.support .support-panel h2 { margin: 4px 0 14px; }

.author-main { max-width: 900px; margin: 0 auto; }


/* Подвал v31 — три уровня. Лозунг стоит первым и всегда на английском:
   рифма построена под этот язык. */
.foot { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.foot p { margin: 0; }
.foot-slogan {
  font-family: var(--font-display);
  font-size: 1.08rem;
  letter-spacing: .01em;
  color: var(--text-warm);
}
.foot-legal { max-width: 78ch; text-align: center; line-height: 1.55; }
@media(max-width:720px){
  .support { padding: 56px 0; }
  .foot-legal { text-align: center; }
}

/* ============================ v32 ====================================
   Поддержка: два кошелька стоят рядом, слева TON, справа USDT. Прежняя
   раскладка ставила коды друг под другом, и камера телефона захватывала
   соседний код. Каждый код стоит в своей колонке с широким полем вокруг. */
.support .wallet { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.support .wallet-row { gap: 14px; justify-items: center; padding: 20px 18px; }
.support .wallet-label { text-align: center; }
.support .wallet-body { grid-template-columns: 1fr; justify-items: center; gap: 14px; width: 100%; }
.support .wallet-qr img { width: 168px; height: 168px; }
.support .wallet-detail { justify-items: center; text-align: center; width: 100%; }
.support .wallet code { width: 100%; text-align: center; }
.support .wallet small { text-align: center; }
.support-lead { max-width: 46ch; }

/* Блок автора: техническая строка отделена от человеческого текста. */


@media(max-width:720px){
  .support .wallet { grid-template-columns: 1fr; gap: 26px; }
  .support .wallet-qr img { width: 150px; height: 150px; }
}

/* ============================ v33 ====================================
   Первый экран, лозунг, поддержка, автор, типографика.
   Каждый блок ниже перекрывает более ранний слой того же селектора. */

/* --- Лозунг. Он всегда на английском: рифма построена под этот язык.
   Точки в конце фраз убраны из показа — в крупной строке они читаются как
   обрыв. Ромб держит паузу между половинами рифмы. Каноническая форма с
   точками сохраняется в документах и в товарном знаке. */
.brand-slogan {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-warm);
}
.brand-slogan i { font-style: normal; font-size: .6rem; color: var(--spark-mark); } /* Р-165 */
.foot-slogan.brand-slogan { justify-content: center; margin: 0; font-size: 1.06rem; }

/* --- Три опорных факта. Прежняя карточка с рамкой и наведением читалась как
   кнопка и обещала переход. Теперь это список: значок, факт, пояснение. */
.trust {
  gap: 18px;
  margin-top: 34px;
  padding-top: 26px;
}

/* --- Подпись под доской. Осталось две строки: что произошло и куда идти
   дальше за полными правилами. */
.phase .text { margin: 0; color: var(--text-muted); }
.phase .meta a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.hero-demo-controls { justify-content: center; }
#btn-spark { min-width: 232px; }

/* --- Меню: разрядка уменьшена, кегль поднят. Русские слова прописными
   читаются медленнее, широкая разрядка замедляла просмотр ещё сильнее. */
.top nav a { font-size: 14px; letter-spacing: 0.03em; }

/* --- Контраст мелкого текста по WCAG. Прежний цвет давал 4.0 к фону блока
   автора — ниже уровня AA. Новый цвет держит 5.3 и выше на всех фонах. */
:root { --text-dim: #FFFFFF; }
.wallet-qr figcaption { font-size: 12px; }
.extra-rule-tile small, .extra-rule-tile code { font-size: 12px; }

.lab-seal small { font-size: .72rem; }

/* --- Поддержка: реквизиты слева, код справа. Высота кода примерно равна
   высоте адреса с кнопкой, поэтому секция стала ниже и прокрутка ушла. */
/* Р-46: реквизиты растянуты до ширины широких секций — адреса входят в одну строку. */
.support .support-panel { max-width: 1320px; }
.support .wallet { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.support .wallet-row { justify-items: stretch; padding: 20px; }
.support .wallet-label { text-align: left; }
.support .wallet-body { grid-template-columns: minmax(0, 1fr) 152px; gap: 18px; align-items: start; }
.support .wallet-detail { grid-column: 1; grid-row: 1; justify-items: start; text-align: left; }
.support .wallet-qr { grid-column: 2; grid-row: 1; }
.support .wallet-qr img { width: 152px; height: 152px; }
.support .wallet code { width: 100%; text-align: left; }
.support .wallet small { text-align: left; }

/* --- Автор: портрет крупнее. Исходный файл 900×755, поэтому увеличение
   проходит без потери резкости. */
.author-main { grid-template-columns: minmax(200px, 400px) minmax(0, 1fr); gap: 34px; max-width: 960px; } /* Р-167 */

/* --- Следующий ход: ответ открывает продолжение. */



@media(max-width:900px){
  .support .support-panel { max-width: 760px; }
  .support .wallet { grid-template-columns: 1fr; gap: 22px; }
}
@media(max-width:560px){
  .support .wallet-body { grid-template-columns: 1fr; justify-items: center; }
  .support .wallet-detail { grid-column: 1; grid-row: 2; justify-items: center; text-align: center; }
  .support .wallet-qr { grid-column: 1; grid-row: 1; }
  .brand-slogan { font-size: .95rem; }
}

/* ==================== v81 ===========================================
   Р-139 · Paste/Copy читаются как управляющие кнопки: объём создают градиент,
   верхний блик и нижняя тень. Золото остаётся за главными действиями. */
#position-lab-paste,
#lab-analysis-paste-fen,
#lab-analysis-paste-pgn {
  border:1px solid #4D86D8;
  background:linear-gradient(180deg,#3977CA 0%,#245CA8 52%,#173F79 100%);
  color:#FFFFFF;
  font-weight:850;
  text-shadow:0 1px 1px rgba(0,0,0,.42);
  box-shadow:inset 0 1px rgba(255,255,255,.32),0 4px 0 #102D59,0 8px 16px rgba(0,0,0,.24);
}
#position-lab-copy,
#lab-analysis-copy-fen,
#lab-analysis-copy-pgn {
  border:1px solid #36AAA6;
  background:linear-gradient(180deg,#25A29E 0%,#187D7D 52%,#0D575F 100%);
  color:#FFFFFF;
  font-weight:850;
  text-shadow:0 1px 1px rgba(0,0,0,.42);
  box-shadow:inset 0 1px rgba(255,255,255,.3),0 4px 0 #083E46,0 8px 16px rgba(0,0,0,.24);
}
#position-lab-paste:active,
#lab-analysis-paste-fen:active,
#lab-analysis-paste-pgn:active,
#position-lab-copy:active,
#lab-analysis-copy-fen:active,
#lab-analysis-copy-pgn:active { transform:translateY(2px); box-shadow:inset 0 1px rgba(255,255,255,.2),0 2px 0 #0B344C,0 4px 9px rgba(0,0,0,.2); }

/* Р-140 · Лозунг — отдельная тонкая лента над авторством. */
.foot-slogan {
  flex:1 0 100%;
  justify-content:center;
  min-height:42px;
  margin:0 0 4px;
  padding:10px 20px;
  border-top:1px solid rgba(255,210,77,.58);
  border-bottom:1px solid rgba(255,210,77,.58);
  background:linear-gradient(90deg,transparent,rgba(37,48,91,.92) 18%,rgba(25,42,76,.98) 50%,rgba(37,48,91,.92) 82%,transparent);
  color:#FFFFFF;
  font-weight:800;
  letter-spacing:.13em;
}

/* Кнопки документов визуально продолжают ссылки подвала, но сохраняют
   пользователя на лендинге. */
.foot-legal-open {
  appearance:none;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  font:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.foot-legal-open:hover { color:#FFFFFF; }

/* Р-141 · Доступное модальное чтение лицензий. Полный документ прокручивается
   внутри iframe; заголовок и закрытие остаются на месте. */
.legal-dialog {
  width:min(760px,calc(100vw - 36px));
  height:min(80dvh,760px);
  padding:0;
  overflow:hidden;
  border:1px solid rgba(157,213,255,.34);
  border-radius:20px;
  background:#13243D;
  color:#FFFFFF;
  box-shadow:0 34px 90px rgba(0,0,0,.65),inset 0 1px rgba(255,255,255,.06);
}
.legal-dialog::backdrop { background:rgba(3,9,17,.78); backdrop-filter:blur(5px); }
.legal-dialog[open] { display:grid; grid-template-rows:auto minmax(0,1fr); animation:legal-dialog-in 360ms var(--ease) both; }
@keyframes legal-dialog-in { from{opacity:0;transform:translateY(14px) scale(.985)} to{opacity:1;transform:none} }
.legal-dialog-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:16px 18px;
  border-bottom:1px solid rgba(255,210,77,.38);
  background:linear-gradient(135deg,#243B64,#1A2D4D);
}
.legal-dialog-head small { color:#FFD24D; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.legal-dialog-head h2 { margin:3px 0 0; color:#FFFFFF; font:800 1.35rem/1.1 var(--font-display); }
.legal-dialog-close {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  padding:0;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  background:linear-gradient(145deg,#315481,#1B3558);
  color:#FFFFFF;
  font-size:1.65rem;
  cursor:pointer;
  box-shadow:inset 0 1px rgba(255,255,255,.22),0 5px 14px rgba(0,0,0,.28);
}
.legal-dialog-frame { width:100%; height:100%; border:0; background:#F7FAFF; color:#17263A; }

@media(max-width:620px){
  .legal-dialog{width:100vw;height:88dvh;max-width:none;margin:auto 0 0;border-radius:20px 20px 0 0}
  .legal-dialog-head{padding:14px 16px}
}
@media(prefers-reduced-motion:reduce){.legal-dialog[open]{animation:none}}

/* --- Мобильный порядок героя. Прежде доска шла первой, а заголовок уходил
   за экран на 850 пикселей вниз. Теперь сверху лозунг и заголовок, следом
   доска с кнопкой, а список опор идёт после демонстрации. */
@media (max-width: 980px) {
  .hero-inner { display: flex; flex-direction: column; gap: 30px; }
  .hero-text { display: contents; }
  .hero-text .brand-slogan { order: 1; text-align: center; justify-content: center; margin: 0; }
  .hero-text h1 { order: 2; text-align: center; margin: 12px 0 0; }
  .player { order: 3; }
  .hero-text .trust { order: 4; max-width: 480px; margin-inline: auto; }
}

/* --- Подпись под доской: рассказ хода слева, шаг к правилам справа.
   Название механики ушло: оно живёт в секции правил и здесь дублировало. */
.phase .meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 8px;
}
.phase .meta code {
  font-family: var(--mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--text);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 10px;
}
@media (max-width: 980px) { .phase .meta { justify-content: center; } }

/* --- Ползунок скорости: полоса касания поднята до 28 px. Стандарт WCAG 2.2
   уровня AA требует цель 24×24 px, прежняя высота держалась на 22 px. */
#demo-speed { height: 28px; }

/* ======================================================================== */
/* v35 — единый шаблон секций, первый экран и исследователь позиции         */
/* Слой лежит последним и перекрывает более ранние правила тех же имён.     */
/* ======================================================================== */

/* --- Лозунг в шапке. Он подпись под названием, а не второй заголовок,
   поэтому тише названия: мельче, приглушённым цветом, с разрядкой. Нижний
   отступ снят — в шапке он сдвигал строку вверх от середины. */
.top .word { display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.top .word > b { font-size: 1.06rem; line-height: 1.1; }
.top .brand-slogan {
  margin: 0;
  gap: 8px;
  color: var(--text-dim);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.top .brand-slogan i { font-size: .5rem; }
.top .brand { align-items: center; }

/* --- Шаблон заголовка секции. Пункт меню и надзаголовок совпадают словом:
   щёлкнув «Отличия», человек видит на месте приземления то же слово и не
   тратит секунду на вопрос «туда ли я попал». Золотой ромб — тот же знак,
   что делит лозунг, поэтому шапка, лозунг и секции связаны одной деталью. */
.section-head { max-width: 720px; margin: 0 auto 42px; text-align: center; }
.section-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  padding: 0;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
}
/* Р-165. Ромбы по бокам надзаголовка сняты совсем. Р-44 погасил их ещё в
   v40 строкой `content: none`, и с тех пор правило лежало мёртвым грузом:
   в коде ромб был, на экране его не было. Раздел объявляет золотая черта. */
.section-head h2 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3.2vw, 2.25rem);
  line-height: 1.16;
  color: var(--text-bright);
}
.section-head .sub {
  max-width: 560px;
  margin: 0 auto;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.5;
}

/* --- Заголовок первого экрана. Золото несёт то, что принадлежит правилам
   Solomachev Chess; шахматное число остаётся спокойным. Так разница читается
   мгновенно и без объяснений. */
.hero-text h1 { display: flex; flex-direction: column; gap: 6px; margin: 0 0 32px; }
.h1-top {
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.h1-figure {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 4.4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
  text-shadow: 0 0 46px rgba(255, 210, 77, .2);
}
.h1-foot {
  color: var(--text-warm);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.1vw, 1.4rem);
}
.h1-foot::before {
  content: "";
  display: block;
  width: 54px;
  height: 2px;
  margin: 12px 0 12px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

/* --- Три опоры оживают один раз, когда экран до них дошёл. Постоянная
   пульсация рядом с доской отнимала бы у доски внимание: она движется редко
   и по делу, а пульсация идёт всегда. Пульсирует только кнопка. */






/* --- Подпись над доской: чей ход, что делать и в каком состоянии позиция.
   Прежняя метка «До хода» лежала на доске и тонула в зелёных полях. */




.board-phase {
  grid-area: phase;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.board-phase[data-phase="before"] { background: rgba(201,185,154,.14); color: var(--text-muted); }
.board-phase[data-phase="after"] { background: rgba(255,210,77,.18); color: var(--gold); }

/* --- Доска и панель ходов стоят рядом: список ходов принадлежит выбранной
   фигуре, поэтому он обязан быть в поле зрения вместе с ней. */
.player-body { display: grid; grid-template-columns: minmax(0, 1fr) 244px; gap: 18px; align-items: start; }
.player-body .stage { margin: 0; }

.explorer { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.explorer-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 2px;
  color: var(--text-warm);
  font-size: .95rem;
}
.explorer-head b { color: var(--gold); font-size: 1.25rem; font-family: var(--font-display); }


.explorer-group {
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: rgba(22, 28, 38, .6);
}
.explorer-group.is-empty { border-style: dashed; opacity: .72; }
.group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.group-title { color: var(--text); font-size: .86rem; font-weight: 600; }
.group-count { color: var(--gold); font-size: .9rem; font-weight: 700; font-family: var(--font-display); }
.explorer-group.is-empty .group-count { color: var(--text-dim); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; }
.group-note { display: block; margin-top: 2px; color: var(--text-dim); font-size: .74rem; line-height: 1.35; }

.move-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.move-chip {
  padding: 5px 9px;
  border: 1px solid var(--border-light);
  border-radius: 7px;
  background: rgba(37, 45, 61, .8);
  color: var(--text-warm);
  font-family: var(--font-sans);
  font-size: .8rem;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.move-chip:hover, .move-chip:focus-visible {
  border-color: var(--gold-dim);
  background: rgba(255, 210, 77, .14);
  color: var(--gold-light);
  outline: none;
}

/* Ноль в группе — это не пустая строка, а обещание. Правило существует,
   просто нужной расстановки на доске ещё нет. */
.explorer-zero {
  margin: 2px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--gold-dim);
  border-radius: 0 8px 8px 0;
  background: rgba(255, 210, 77, .08);
  color: var(--text-warm);
  font-size: .8rem;
  line-height: 1.45;
}
.explorer-zero a { color: var(--gold); }

.explorer-legend { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.explorer-legend span { display: flex; align-items: center; gap: 8px; color: var(--text-dim); font-size: .74rem; }
.explorer-legend i { flex: 0 0 auto; width: 13px; height: 13px; border-radius: 3px; }

/* --- Разметка полей на доске первого экрана повторяет разметку, принятую
   в партии и в «Практике»: один цвет означает одно и то же везде. */
#grid .sq.is-origin::after,
#grid .sq.is-destination::after,
#grid .sq.is-hint::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 3px;
  pointer-events: none;
}
#grid .sq.is-nexus .nexus::before { inset: 2%; background: #B388FF; }
#grid .sq.is-nexus .nexus::after { inset: 7%; }
#grid .sq { position: relative; cursor: pointer; }
#grid .sq:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* --- «Практика» возвращается в общий ряд. Смена фона обязана что-то
   значить; холодный синий выпадал из тёплой палитры и сообщал «я особенная»,
   хотя секция такая же, как соседние. */
.position-lab { background: var(--vault-bg-mid); color: var(--text); }

/* --- Узкий экран: панель ходов уходит под доску, доска остаётся первой. */
@media (max-width: 1100px) {
  .player-body { grid-template-columns: minmax(0, 1fr); }
  .explorer { flex-direction: column; }
  .move-list { gap: 6px; }
}
@media (max-width: 700px) {
  
  .board-phase { justify-self: start; margin-top: 6px; }
  .section-head { margin-bottom: 30px; }
}

/* --- Правки после первого замера v35 --- */

/* Атрибут hidden обязан побеждать раскладку: легенда нужна только когда
   выбрана фигура, иначе она объясняет разметку, которой на доске нет. */
.explorer-legend[hidden] { display: none; }

/* Доске отдано больше места: она главный герой экрана, а колонка текста
   короткая и в лишней ширине не нуждается. */
.hero-inner { grid-template-columns: minmax(0, .82fr) minmax(0, 1.28fr); gap: clamp(32px, 4vw, 56px); }
.hero .stage { max-width: none; padding: 16px; }
.hero-demo-controls { justify-content: center; }

@media (max-width: 980px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .h1-foot::before { margin-inline: auto; }
  .hero-text h1 { align-items: center; }
  .hero .stage { max-width: 520px; }
}

/* Секция автора и «Практика» подчиняются общему шаблону, но их содержимое
   остаётся по левому краю: по центру объявляем раздел, читаем по левому краю. */
.author-copy.section-head, .position-lab-head.section-head { max-width: none; text-align: left; }
.author-copy.section-head .eyebrow, .position-lab-head.section-head .eyebrow { justify-content: flex-start; }
.position-lab-head.section-head { text-align: center; margin-bottom: 30px; }
.position-lab-head.section-head .eyebrow { justify-content: center; }
.author-facts { margin: 14px 0 16px; padding: 0; list-style: none; display: grid; gap: 7px; }
/* Р-46: текст секции автора ярче и крупнее — автору казался тусклым. */
.author-facts li { position: relative; padding-left: 20px; color: var(--text-bright); line-height: 1.5; font-size: 1rem; }
.author-copy p { color: var(--text-bright); }
.author-facts li::before { content: "◆"; position: absolute; left: 0; top: .05em; color: var(--gold-dim); font-size: .6rem; }

/* ======================================================================== */
/* v36 — доска первого экрана, панель ходов, единый вид секций              */
/* ======================================================================== */

/* --- Клетки доски стали кнопками ради выбора фигуры, и браузер добавил им
   собственную рамку. Она и рисовала лишние разделители, съедая поле. */
#grid .sq {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  position: relative;
  cursor: pointer;
}
#grid .sq:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; z-index: 2; }

/* Доска первого экрана держит тот же размер, что и доска в «Практике». */
.hero .stage { max-width: 560px; margin-inline: auto; padding: 18px; }
.board-column { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.hero-demo-controls { display: flex; justify-content: center; }

/* --- Состояние позиции лежит на доске, слева сверху: глаз находит его не
   отрываясь от фигур. Прежняя строка над доской заставляла задирать взгляд. */
.stage { position: relative; }
.board-phase {
  position: absolute;
  top: 26px;
  left: 26px;
  z-index: 3;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  backdrop-filter: blur(3px);
}
.board-phase[data-phase="before"] { background: rgba(15,20,25,.78); color: var(--text-warm); box-shadow: 0 0 0 1px rgba(240,230,210,.18); }
.board-phase[data-phase="after"] { background: rgba(255,210,77,.9); color: #2A1F06; box-shadow: 0 0 14px rgba(255,210,77,.4); }

/* --- Панель ходов. Право хода стоит первой строкой рядом с доской. */



/* Сыгранный ход мигает при обновлении: иначе текст меняется незаметно. */





/* Пояснения групп были почти неразличимы. Теперь они читаются, но остаются
   тише названий: внимание принадлежит доске. */
.group-note { color: var(--text-muted); font-size: .77rem; }
.group-title { color: var(--text-bright); font-size: .88rem; }
.group-count { color: var(--gold); font-size: 1.02rem; }
.explorer-group { background: rgba(30,37,51,.72); border-color: var(--border-light); }
.explorer-group.is-empty { background: rgba(22,28,38,.5); }

/* Кнопки ходов были тёмными на тёмном. Тёплая подложка даёт контраст и
   сразу говорит, что по ним можно нажать. */
.move-chip {
  border-color: rgba(255,210,77,.42);
  background: rgba(255,210,77,.14);
  color: var(--gold-light);
  font-weight: 600;
}
.move-chip:hover, .move-chip:focus-visible {
  border-color: var(--gold);
  background: rgba(255,210,77,.3);
  color: var(--gold-bright);
}

/* Панель не должна дёргать раскладку при выборе фигуры. */
.explorer-groups { min-height: 322px; }

/* --- «Практика»: полоса слева у пояснения выпадала из общего вида. */
.position-lab-head > p {
  justify-self: center;
  max-width: 620px;
  padding: 0;
  border-left: 0;
  border-radius: 0;
  background: transparent;
  text-align: center;
}
.position-lab { padding-top: 64px; }
.position-lab-head.section-head { margin-bottom: 26px; }

@media (max-width: 1100px) {
  .explorer-groups { min-height: 0; }
}

/* Доска получает ширину, равную доске «Практики»: колонка текста короткая
   и в лишней ширине не нуждается. */
.hero-inner { grid-template-columns: minmax(0, 450px) minmax(0, 1fr); }

/* Первый экран берёт ту же ширину, что и секции ниже: доска обязана быть
   не мельче доски в «Практике», иначе главный герой экрана проигрывает. */
.hero .wrap { width: min(1320px, calc(100% - 40px)); }
.hero-inner { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
.player-body { grid-template-columns: minmax(0, 1fr) 232px; }
.hero .stage { max-width: 620px; }

/* --- «Практика»: вкладки стоят над доской и включают режим целиком —
   доску и панель рядом с ней. Активная вкладка срослась с рабочей областью
   под собой, поэтому видно, что это одно поле, а не отдельная кнопка. */
.position-lab .lab-mode {
  display: flex;
  gap: 4px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--border-light);
  background: transparent;
}
.position-lab .lab-mode button {
  position: relative;
  bottom: -1px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.position-lab .lab-mode button:hover { color: var(--text-bright); background: rgba(255,255,255,.04); }
.position-lab .lab-mode button.is-active,
.position-lab .lab-mode button[aria-selected="true"] {
  border-color: var(--border-light);
  background: var(--vault-bg-elevated);
  color: var(--gold);
  box-shadow: inset 0 3px 0 var(--gold);
}

.position-lab .position-lab-shell { margin-top: 0; }

/* Поля опроса были во всю ширину секции и читались как строки ввода.
   Ширина по содержанию возвращает им смысл выбора. Шрифт поднят: ответ —
   это действие, а не примечание. */
.poll-options { display: flex; flex-wrap: wrap; gap: 10px; }
.poll-opt { flex: 0 1 auto; }
.poll-opt span { font-size: .96rem; font-weight: 600; color: var(--text-warm); }
.poll-opt input:checked + span { color: var(--gold); }

/* ======================================================================== */
/* v37 — пересечение правил, пломбы режимов, единый вид секций              */
/* ======================================================================== */

/* Блок про отсутствие Simple Shift возвращён: проверка движком подтвердила,
   что таких ходов в начальном положении действительно нет. */
.explorer-zero { display: block; }

/* Счётчики по группам сняты. При пересечении правил их сумма превышала бы
   общее число ходов, и число в заголовке сайта перестало бы сходиться. */
.group-count { color: var(--text-dim); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* Ход, разрешённый двумя правилами, стоит в обеих группах и помечен ромбом.
   Ромб — знак сайта: он же делит лозунг и обрамляет надзаголовки секций. */
.shared-mark { margin-left: 6px; color: var(--spark-mark); font-size: .7rem; } /* Р-165 */
.move-chip.is-shared { border-color: var(--gold); background: rgba(255,210,77,.24); }
.explorer-shared-note {
  margin: 0 0 4px;
  color: var(--text-muted);
  font-size: .78rem;
  line-height: 1.45;
}
.explorer-shared-note .shared-mark { margin: 0 2px; }

/* Метка состояния поднята над доской: она перекрывала ладью a8. */
.board-phase { top: 4px; left: 22px; }

/* --- Один вид у всех секций без исключений. Прежде «Практика» стояла по
   левому краю, а соседние по центру; опрос и поддержка вовсе не имели
   шаблона. Теперь объявление раздела везде одинаковое. */
.section-head,
.position-lab-head.section-head,
.author-copy.section-head,
.extra-guide-head .section-head {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}
.section-head .eyebrow,
.position-lab-head.section-head .eyebrow,
.author-copy.section-head .eyebrow { justify-content: center; display: inline-flex; }
.support-panel .section-head { margin-bottom: 26px; }
.support-panel .section-head h2 { margin-bottom: 0; }

/* Секция автора подчиняется тому же правилу без исключений: одинаковый
   стиль во всех секциях — прямое требование автора. */
.author-copy.section-head { text-align: center; }
.author-copy.section-head .eyebrow { justify-content: center; }
.author-facts { text-align: left; max-width: 460px; margin-inline: auto; }

/* Опрос — вертикальный список: варианты сравнивают взглядом сверху вниз,
   в строку они читались как набор кнопок. */
.poll-options { display: flex; flex-direction: column; gap: 10px; align-items: stretch; max-width: 460px; margin-inline: auto; }
.poll-opt { flex: 0 0 auto; width: 100%; }

/* Пломба секции «Партия» — тот же вид, что у пломбы задачи. */
/* Пломба живёт в рамке доски: `.demo-stage` — её система координат. */
.demo-stage { position: relative; }
.demo-seal { position: absolute; inset: 0; z-index: 5; }
.demo-start-overlay[hidden] { display: none; }

/* --- Правая панель шире в редакторе и в разборе: там живёт строка FEN,
   и она обязана входить целиком, без переноса. Ширина взята по образцу
   широких секций сайта. */
.position-lab-shell { grid-template-columns: minmax(460px, 500px) minmax(560px, 700px); gap: 32px; width: min(100%, 1290px); }

/* Строка записи: подпись, поле и две кнопки в один ряд. */
.lab-analysis-io { display: grid; gap: 10px; margin-bottom: 14px; }
.lab-io-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px; }
.lab-io-row label {
  min-width: 34px;
  color: var(--gold);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
}
.lab-io-row textarea {
  width: 100%;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: rgba(15,20,25,.55);
  color: var(--text-warm);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: .78rem;
  line-height: 1.35;
  resize: vertical;
  white-space: pre;
  overflow-x: auto;
}
.lab-io-row .btn { padding: 7px 12px; font-size: .78rem; white-space: nowrap; }

@media (max-width: 1240px) {
  .position-lab-shell { grid-template-columns: minmax(0, 1fr); width: min(100%, 700px); }
  .lab-io-row { grid-template-columns: auto minmax(0, 1fr); }
  .lab-io-row .btn { grid-column: span 1; }
}

/* Р-160 · Пломба секции «Партия» — та же пломба, что на главном виде и в
   Practice. Вид берётся из переменных `--seal-*`, собственных цветов у неё
   больше нет. Закрывает она только доску: запись партии, транспорт и легенда
   остаются на виду, как в Practice. */
/* Р-205 · Пломба встаёт по центру доски при любой ширине карточки. Прежде
   стоял `display:grid; place-content:center`, а у карточки ширина задана в
   процентах. Процент считался от дорожки, которую сам же и определял: карточка
   уезжала влево, и тем сильнее, чем длиннее текст. На английском смещение было
   30 px, на французском и немецком — 89 px. Гибкая раскладка считает центр от
   полной ширины пломбы. */
.demo-seal {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: inherit;
  background: var(--seal-veil);
  backdrop-filter: none;
}
.demo-seal .demo-seal-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(84%, 340px);
  padding: 22px 26px;
  border: 2px solid var(--seal-edge);
  border-radius: 22px;
  background: var(--seal-face);
  color: var(--seal-text);
  box-shadow: var(--seal-lift);
  text-align: center;
}
.demo-seal b {
  color: var(--seal-eyebrow);
  font: 800 .76rem/1 var(--font-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.demo-seal strong {
  color: var(--seal-text);
  font: 650 clamp(1.05rem, 1.5vw, 1.32rem)/1.25 var(--font-display);
}
.demo-seal button {
  min-width: 132px;
  margin-top: 4px;
  padding: 11px 22px;
  border: 1px solid #2A3446;
  border-radius: 999px;
  background: var(--seal-action-face);
  color: var(--seal-action-text);
  font: 800 .78rem/1 var(--font-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(0,0,0,.38);
}
.demo-seal button:hover { filter: brightness(1.06); }
/* ======================================================================== */
/* v38 — вступление шагами,
пломба на доске,
разметка выбора                */
/* Решения Р-01…Р-09,
см. docs/site/SITE_DECISIONS_RU.md                    */
/* ======================================================================== */

/* Р-01. Три факта ведут шагами. Счётчик и точки сразу говорят */

/* Второе объявление `intro-in` лежит ниже, в слое телефона, и перебивает это
   по порядку. Здесь оставлен только комментарий: правило было мёртвым. */
@media (prefers-reduced-motion: reduce) { }
/* Р-02. Пройденное вступление сжимается в короткий список: колонка не
   пустеет */


/* Р-03. Пломба закрывает только доску. Очертания начальной позиции остаются
   узнаваемыми под размытием — гость понимает, что там шахматы. */
.player-body.is-sealed .board { pointer-events: none; }
.player-body.is-sealed .explorer { opacity: .32; pointer-events: none; }




/* Р-04. Вводная строка панели вместо строки «Ход белых»: право хода уже
   названо во вступлении, а повтор занимал место постоянно. */
.explorer-intro {
  margin: 0;
  padding: 10px 12px;
  border-radius: 9px;
  background: rgba(30, 37, 51, .7);
  color: var(--text-muted);
  font-size: .82rem;
  line-height: 1.45;
}

/* Р-05. Кнопка под доской появляется только после сделанного хода. */
.hero-demo-controls .player-action[hidden] { display: none; }

/* Р-08. Стрелка хода. Прежний голубой спорил с цветом исходного поля, линия
   была тонкой и без наконечника — направление приходилось угадывать.
   Цвета разведены по смыслу: бирюза — откуда, оранжевый — куда. Стрелка
   оранжевая, потому что указывает на конечное поле. Полупрозрачность
   оставляет фигуру под стрелкой видимой. */
#rays line, #rays path {
  stroke: #FF7A00;
  stroke-width: 4.6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(255, 122, 0, .45));
}
#rays line.on, #rays path.on { opacity: .68; }
/* Наконечнику цвет проставляет скрипт построчно, поэтому здесь нужен приоритет. */
#rays marker path { fill: #FF7A00 !important; }

/* Метка состояния прячется, пока доска под пломбой: говорить «до хода» рано. */
.player-body.is-sealed .board-phase { display: none; }

/* Р-09. Знак справки у пустой группы. */
.group-help {
  width: 18px; height: 18px;
  margin-left: 8px;
  padding: 0;
  border: 1px solid var(--gold-dim);
  border-radius: 50%;
  background: transparent;
  color: var(--gold);
  font: 700 .68rem/1 var(--font-sans);
  cursor: pointer;
}
.group-help:hover { background: rgba(255,210,77,.18); }
.explorer-zero[hidden] { display: none; }

/* ======================================================================== */
/* v39 — воздух в заголовке, читаемые карточки, поведение показанного хода  */
/* Решения Р-12…Р-20, см. docs/site/SITE_DECISIONS_RU.md                    */
/* ======================================================================== */

/* Р-11. Заголовок дышит: прежде строки жались к левому краю секции, вокруг
   пустовало, и обещание читалось слабо. Отступ слева, крупный кегль и
   разрядка дают ту «пышность», которой не хватало. */
.hero-inner { align-items: center; }
.hero-text { padding-left: clamp(0px, 2.4vw, 34px); }
.hero-text h1 { gap: 10px; margin: 0 0 46px; }
.h1-top { font-size: 1.02rem; letter-spacing: .22em; color: var(--text-warm); }
.h1-figure { font-size: clamp(3.6rem, 8.2vw, 5.6rem); letter-spacing: -.01em; }
.h1-foot { font-size: clamp(1.25rem, 2.4vw, 1.72rem); color: var(--text-bright); }
.h1-foot::before { width: 88px; height: 3px; margin: 20px 0 18px; }
/* Р-11. Карточка шагов отодвинута от заголовка: по смыслу это следующий
   разговор,
и расстояние обязано это показать. Фон светлее фона страницы */

@keyframes intro-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes intro-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { }
/* Р-11. Короткий список после вступления проявлялся мягко. Сам список снят в
   круге v113 (Р-289); движение осталось — им пользуются другие строки. */
@keyframes fact-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Р-13. Размытие ослаблено: гость при открытии сайта не должен думать, что
   потерял резкость. Очертания доски и фигур обязаны узнаваться. */
.player-body.is-sealed .explorer { opacity: .5; }

/* Р-13. Карточка на доске крупнее: доля золотого сечения от ширины доски. */

/* Р-46: пломба светлая золотая вместо тёмной на тёмном; счётчик шагов и
   стрелка убраны как дубль левой карточки шагов. Текст пломбы утверждён и не менялся. */



/* Р-18. Метка состояния позиции: светлая на тёмном, с отступом от угла доски.
   Прежде она была чёрной на тёмном фоне и жалась к самому краю. */
.board-phase {
  top: 16px;
  left: 34px;
  padding: 7px 15px;
  font-size: .72rem;
  letter-spacing: .12em;
}
.board-phase[data-phase="before"] {
  background: rgba(232, 220, 200, .92);
  color: #1A2230;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
.board-phase[data-phase="after"] {
  background: linear-gradient(135deg, var(--gold-light), var(--gold-deep));
  color: #2A1F06;
  box-shadow: 0 6px 20px rgba(255, 210, 77, .45);
}

/* Р-15. Верхняя строка панели читается: крупнее, светлее, с золотым знаком. */
.explorer-intro {
  padding: 12px 14px;
  border-left: 3px solid var(--gold);
  border-radius: 0 10px 10px 0;
  background: rgba(46, 56, 74, .85);
  color: var(--text-bright);
  font-size: .95rem;
  font-weight: 600;
}

/* Р-16. Кнопки ходов: живой тёплый цвет вместо блёклого золота. */
.move-chip {
  border-color: rgba(255, 168, 46, .55);
  background: linear-gradient(150deg, rgba(255, 168, 46, .26), rgba(255, 122, 0, .18));
  color: #FFE3B0;
  font-size: .84rem;
}
.move-chip:hover, .move-chip:focus-visible {
  border-color: #FFB648;
  background: linear-gradient(150deg, rgba(255, 182, 72, .5), rgba(255, 122, 0, .34));
  color: #FFF6E4;
}
.move-chip.is-shared { border-color: var(--gold); background: linear-gradient(150deg, rgba(255,210,77,.4), rgba(255,168,46,.26)); }
/* Р-46: подписи правой панели ярче — автору они казались тёмными. */
.group-note { color: var(--text-bright); font-size: .84rem; }
.group-title { font-size: .95rem; }
.explorer-group { background: rgba(38, 47, 64, .8); }

/* Р-46: блокировка больше не гасит ходы — они остаются доступными на вид;
   ход, который сейчас показан на доске, залит золотом. */
.explorer-groups.is-locked .move-chip { opacity: 1; }
.move-chip.is-playing {
  border-color: #FFE9A8;
  background: linear-gradient(150deg, #FFD24D, #F5A623);
  color: #241703;
  font-weight: 700;
  box-shadow: 0 0 18px rgba(255, 210, 77, .45);
}
.hero-demo-controls .player-action {
  border: 1px solid rgba(255, 210, 77, .6);
  background: linear-gradient(135deg, var(--gold-light), var(--gold-deep));
  color: #2A1F06;
  font-weight: 800;
}

/* Р-20. Знак справки заметен, а пояснение открывается рядом с ним. */
.group-help {
  width: 20px; height: 20px;
  border-color: var(--gold);
  background: rgba(255, 210, 77, .2);
  color: var(--gold-light);
  font-size: .74rem;
}
.explorer-zero {
  margin-top: 8px;
  background: rgba(46, 56, 74, .95);
  color: var(--text-bright);
  font-size: .84rem;
}

/* Р-22. Искра вместо мишени: знак должен говорить о Spark Moves. Рисунок
   собственный, в стиле сайта — золото, без рамки и подложки, тот же размер,
   что у шахматных глифов в соседних карточках. */




/* Р-23. Секция «Отличия» была самой мрачной на сайте: золота почти нет,
   подзаголовок тусклый, всё статично. Возвращаем цвет и одно приглашение. */
#difference .section-head .sub { color: var(--text-warm); font-size: 1.02rem; }
#difference { background: linear-gradient(180deg, var(--vault-bg-mid), var(--vault-bg)); }
/* Р-182 · Индиго — цвет объяснения на сайте: карточка вступления, пломбы
   «Практики» и «Партии» говорят им. Между первым экраном и «Участием» он
   пропадал, хотя объяснений там больше всего. Левый столбец «Отличий» берёт тот
   же сатин, что и пломба. Выбранная карточка остаётся золотой: золото здесь
   означает выбор, и роль его не меняется. */
.difference-rail button {
  border: 1px solid rgba(120, 156, 214, .38);
  background: linear-gradient(150deg, #2E5590, #1D3860);
  color: var(--text-warm);
}
.difference-rail button[aria-selected="true"] {
  border-color: var(--gold);
  background: linear-gradient(150deg, rgba(255, 210, 77, .22), rgba(255, 168, 46, .12));
  color: var(--gold-light);
}
.difference-rail.is-inviting button:first-child { animation: card-invite 2.2s var(--ease) infinite; }
@keyframes card-invite {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 210, 77, 0); }
  50% { box-shadow: 0 0 0 5px rgba(255, 210, 77, .22); }
}
@media (prefers-reduced-motion: reduce) { .difference-rail.is-inviting button:first-child { animation: none; } }
.difference-panel ul li { color: var(--text-warm); }
/* Золочение знаков карточек снято: утверждённый вид возвращён по требованию автора. */

/* Р-25. Секция «Партия» не влезала по высоте. Заголовок-дубль снят, поэтому
   шапка стала короче; доска и запись ужаты до разумного, отступы уменьшены. */
#example-game { padding: 56px 0 64px; }
#example-game .section-head { margin-bottom: 24px; }
.demo-game-layout { grid-template-columns: minmax(360px, 440px) minmax(360px, 1fr); gap: clamp(22px, 2.6vw, 34px); }
.demo-stage { padding: 14px; }
.demo-legend { gap: 10px 18px; font-size: .76rem; }

/* ======================================================================== */
/* v40 — возврат традиционных цветов, воздух слева, читаемая правая панель   */
/* Решения Р-27…Р-33                                                        */
/* ======================================================================== */

/* Р-30 (что осталось). Цвета исходного и конечного поля живут одним
   правилом в разделе v65 ниже. Здесь — только подсказка «начните
   отсюда»: она берёт тот же голубой и просит внимания тремя тактами. */
#grid .sq.is-hint::after {
  box-shadow: inset 0 0 0 6px #00BFFF;
  animation: hint-attention 1200ms ease-in-out 3;
}
@keyframes hint-attention {
  0%, 100% { opacity: 1; }
  50% { opacity: .62; }
}
@media (prefers-reduced-motion: reduce) { #grid .sq.is-hint::after { animation: none; } }

/* Р-31. Метка состояния отодвинута от угла доски: автор просил об этом
   четырежды, прежнего отступа было мало. */
.board-phase { top: 20px; left: 68px; }

/* Р-32 (переделано). Второй черты нет: автор просил не добавлять её, а
   развести по высоте существующую линию и текст под ней. */
.hero-text h1 { margin-bottom: 0; }
.h1-foot::before { margin: 22px 0 0; }


/* Р-33. Правая панель перестала быть одноцветной: у каждой группы свой
   оттенок канта по семейству механик, счётчик и подписи читаются. */
.explorer-group { border-left: 3px solid var(--border-light); }
.explorer-group[data-group="regular"] { border-left-color: #7C8AA0; }
.explorer-group[data-group="simple-swap"] { border-left-color: #35C6D3; }
.explorer-group[data-group="simple-shift"] { border-left-color: #6FD48A; }
.explorer-group[data-group="nexus-swap"] { border-left-color: #B388FF; }
.explorer-group[data-group="nexus-shift"] { border-left-color: #FF8A1A; }
.explorer-group.is-empty { border-left-style: dashed; }

/* Р-34. Доска секции «Партия» вернулась к прежнему размеру: высоту секции
   сокращаем отступами и записью, а не доской. */
.demo-game-layout { grid-template-columns: minmax(440px, 520px) minmax(330px, 1fr); }
.demo-stage { padding: 18px; }
#example-game { padding: 48px 0 56px; }
.demo-legend { gap: 8px 16px; font-size: .74rem; }

/* ======================================================================== */
/* v41 — возврат яркости меню и читаемость правой панели                    */
/* ======================================================================== */

/* Меню было приглушённым: пункты серые, лозунг почти невидим. Возвращаю
   выразительность — светлые пункты, золото на наведении и на текущем разделе,
   лозунг снова читается и держит фирменный цвет. */
.top nav a { color: var(--text-bright); font-size: 14px; }
.top nav a:hover, .top nav a:focus-visible {
  color: var(--gold-light);
  background: rgba(255, 210, 77, .12);
}
.top .brand-slogan {
  color: var(--gold-dim);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
}
.top .brand-slogan i { color: var(--spark-mark); font-size: .58rem; } /* Р-165 */
.top .word > b { color: var(--text-bright); }
.top { border-bottom: 1px solid rgba(255, 210, 77, .18); }

/* Правая панель читалась одним тёмным шрифтом на тёмном. Поднимаю кегли,
   осветляю текст и возвращаю золото в счётчики и заголовки групп. */
.explorer-intro { font-size: 1rem; color: var(--text-bright); background: rgba(52, 63, 82, .92); }
.explorer-group { background: rgba(46, 56, 74, .92); border-color: var(--border-light); }
.group-title { color: var(--gold-light); font-size: 1rem; font-weight: 700; }
.group-note { color: var(--text-warm); font-size: .86rem; }
.group-count { color: var(--gold); font-size: .78rem; }
.explorer-group.is-empty { background: rgba(38, 47, 64, .78); }
.explorer-group.is-empty .group-title { color: var(--text-muted); }
.explorer-shared-note { color: var(--text-warm); font-size: .84rem; }
.explorer-shared-note .shared-mark { color: var(--spark-mark); } /* Р-165 */
.explorer-legend span { color: var(--text-warm); font-size: .8rem; }
.group-help { background: rgba(255, 210, 77, .3); color: var(--gold-bright); border-color: var(--gold); }


/* Метка состояния отодвинута ещё дальше от левого угла доски: автор просил об
   этом пятый раз, прежних 68 пикселей от края рамки было мало. */
.board-phase { left: 118px; }

/* ======================================================================== */
/* v42 — золотое меню, выдвижная панель, возврат хода растворением          */
/* Решения Р-39…Р-45                                                        */
/* ======================================================================== */

/* Р-43. Меню вернуло золотистый строй: пункт золотится и получает золотую
   черту снизу, которая растёт из середины. */
.top nav a {
  position: relative;
  color: var(--text-warm);
  background: none;
}
.top nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-light), var(--gold-deep));
  transition: left var(--dur) var(--ease), right var(--dur) var(--ease), opacity var(--dur) var(--ease);
  opacity: 0;
}
.top nav a:hover, .top nav a:focus-visible { color: var(--gold-light); background: none; }
.top nav a:hover::after, .top nav a:focus-visible::after { left: 14px; right: 14px; opacity: 1; }

/* Р-44. Надзаголовок секции больше не повторяет строй лозунга: ромбы по
   бокам принадлежат лозунгу, а раздел объявляет короткая золотая черта.
   Секция и лозунг перестали выглядеть равными по весу. */
.section-head .eyebrow::before,
.section-head .eyebrow::after { content: none; }
.section-head .eyebrow {
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  letter-spacing: .28em;
}
.section-head .eyebrow::after {
  content: "";
  display: block;
  width: 38px;
  height: 2px;
  margin: 0 auto;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* Р-45. Заголовок первого экрана поднят, факты отодвинуты от черты. */
.hero-inner { align-items: start; }
.hero-text { padding-top: 12px; }
.hero-text h1 { margin-top: 0; }
/* Р-46: автору текст «в шахматах — 20» был слишком близко к черте — добавлен нижний отступ. */
.h1-foot::before { margin: 26px 0 14px; }

/* Метка состояния поднята выше и заходит на доску краем. */
.board-phase { top: -14px; left: 96px; }

/* Доска смещена левее внутри своей колонки. */
.hero .stage { margin-left: 0; margin-right: auto; }

/* Р-42. Панель ходов выезжает язычком. */
.explorer {
  width: 232px;
  overflow: hidden;
  transition: width var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.explorer[data-open="false"] { width: 0; opacity: 0; pointer-events: none; }
.explorer-handle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  align-self: center;
  padding: 18px 7px;
  border: 1px solid rgba(255, 210, 77, .45);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(52, 63, 82, .95), rgba(38, 47, 64, .95));
  color: var(--gold-light);
  font: 700 .74rem/1 var(--font-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  writing-mode: vertical-rl;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.explorer-handle:hover { border-color: var(--gold); background: rgba(255, 210, 77, .18); }
.explorer-handle .handle-arrow {
  writing-mode: horizontal-tb;
  font-size: 1.1rem;
  line-height: 1;
  transition: transform var(--dur) var(--ease);
}
.explorer-handle:not(.is-open) { animation: handle-invite 2.4s var(--ease) infinite; }
@keyframes handle-invite {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 210, 77, 0); }
  50% { box-shadow: 0 0 0 6px rgba(255, 210, 77, .16); }
}
@media (prefers-reduced-motion: reduce) { .explorer-handle:not(.is-open) { animation: none; } }
.player-body.is-sealed .explorer-handle { opacity: .35; pointer-events: none; animation: none; }

/* Р-41. Возврат хода растворением. */
/* Р-46: вся доска больше не гаснет при возврате — растворяются только поля хода (точечно в site.js). */
.board-phase.is-flash { animation: phase-flash 1.4s var(--ease) 1; }
@keyframes phase-flash {
  0%, 100% { transform: none; }
  20%, 60% { transform: scale(1.1); }
  40%, 80% { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .board-phase.is-flash { animation: none; }
}

/* Заголовок панели: подпись действия и фигура разной силы, без белого. */
.explorer-intro { display: flex; flex-direction: column; gap: 2px; }
#explorer-piece { color: var(--gold-light); font-size: 1rem; font-weight: 700; }
#explorer-hint { color: var(--text-warm); font-size: .84rem; font-weight: 500; }

/* Эмблема карточки «Участники» — вариант 2 работы Sol, «Пешка впереди». */
.difference-participants-symbol .participants-art { width: 74%; height: 74%; }
.difference-participants-symbol text {
  fill: currentColor;
  font-family: Georgia, "DejaVu Serif", serif;
  text-anchor: middle;
  dominant-baseline: middle;
}
.difference-participants-symbol .art-soft { fill-opacity: .62; }

/* Р-46. Карточки отличий переключаются мягко, без рывка. */
.difference-panel.is-entering { animation: panel-in 420ms var(--ease) both; }
.difference-panel.is-leaving { animation: panel-out 200ms var(--ease) both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(14px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes panel-out { from { opacity: 1; } to { opacity: 0; transform: translateY(-8px); } }
.difference-rail button { transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.difference-rail button[aria-selected="true"] { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .difference-panel.is-entering, .difference-panel.is-leaving { animation: none; }
}

/* Доска сдвинута левее и ограничена по ширине: без предела она разъезжалась
   на всю освободившуюся колонку после того, как панель ходов скрылась. */
.hero-inner { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); }
.hero .stage { max-width: 540px; }

/* ======================================================================== */
/* v43 — раскладка панели ходов и оформление меню                          */
/* ======================================================================== */

/* Р-50. В .player-body три ребёнка: доска, язычок и панель. Колонок было две,
   поэтому панель переносилась на новую строку и падала под доску, а язычок
   отрывался вправо. Колонок стало три. */
.player-body { grid-template-columns: minmax(0, 1fr) auto auto; align-items: start; }
.board-column { grid-column: 1; }
.explorer-handle { grid-column: 2; align-self: center; }
.explorer { grid-column: 3; }

/* Р-51. Подчёркивание меню строится масштабированием от середины, поэтому
   стоит ровно под словом при любой длине пункта. Прежний расчёт по отступам
   давал сдвиг влево. Золото ярче: пункты были тусклыми. */
.top nav a { color: var(--gold-dim); }
.top nav a::after {
  left: 16px;
  right: 16px;
  bottom: 3px;
  height: 2px;
  transform: scaleX(0);
  transform-origin: 50% 50%;
  opacity: 1;
  transition: transform var(--dur) var(--ease);
}
.top nav a:hover, .top nav a:focus-visible { color: var(--gold-bright); }
.top nav a:hover::after, .top nav a:focus-visible::after { left: 16px; right: 16px; transform: scaleX(1); opacity: 1; }

/* Ширина панели задаётся по состоянию: правило для закрытого вида
   специфичнее базового, и открытое состояние обязано быть таким же. */
.explorer[data-open="true"] { width: 232px; opacity: 1; }
.explorer { align-self: start; }

/* ======================================================================== */
/* v44 — язычок панели у самой доски, без слов                             */
/* ======================================================================== */

/* Р-52. Язычок стоял отдельной колонкой сетки и вставал по центру строки,
   которую растягивала скрытая панель, — уезжал далеко вниз от доски. Теперь
   он прижат к правому краю доски и держится её вертикального центра.
   Слово снято: назначение читается формой — вертикальная ручка с шевроном. */
.player-body { grid-template-columns: minmax(0, 1fr) auto; }
.board-column { grid-column: 1; }
.hero .stage { position: relative; overflow: visible; }
.explorer { grid-column: 2; }

.explorer-handle {
  position: absolute;
  top: 50%;
  right: -16px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 30px;
  height: 84px;
  padding: 0;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 210, 77, .5);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(56, 68, 89, .97), rgba(38, 47, 64, .97));
  box-shadow: 0 10px 26px rgba(0, 0, 0, .42);
  cursor: pointer;
  writing-mode: horizontal-tb;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), right var(--dur) var(--ease);
}
.explorer-handle:hover { border-color: var(--gold); background: linear-gradient(180deg, rgba(255,210,77,.26), rgba(255,168,46,.16)); }

/* Насечка: без неё ручка читается как просто кнопка, с ней — как то, что тянут. */
.handle-grip {
  width: 12px;
  height: 14px;
  background-image: repeating-linear-gradient(180deg, var(--gold-dim) 0 2px, transparent 2px 5px);
  opacity: .85;
}
.explorer-handle .handle-arrow {
  color: var(--gold-light);
  font-size: 1.25rem;
  line-height: 1;
  transition: transform var(--dur) var(--ease);
}
.explorer-handle.is-open .handle-arrow { transform: rotate(180deg); }
/* Колонка доски ограничена шириной самой доски: иначе кнопка под ней
   центрируется по колонке и уезжает вправо от доски. */
.board-column { max-width: 540px; }

/* ======================================================================== */
/* v44 — геометрия подсветки меню возвращена из v37                         */
/* ======================================================================== */

/* Подчёркивание снова растёт от центра ссылки через width. Это возвращает
   визуальное центрирование v37 и не затрагивает нынешние цвета, размеры,
   разметку или остальные состояния меню v44. */
.top nav a::after {
  left: 50%;
  right: auto;
  bottom: 4px;
  width: 0;
  height: 2px;
  transform: translateX(-50%);
  transform-origin: 50% 50%;
  opacity: 1;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transition: width var(--dur) var(--ease);
}
.top nav a:hover::after,
.top nav a:focus-visible::after {
  left: 50%;
  right: auto;
  width: 60%;
  transform: translateX(-50%);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .top nav a::after { transition: none; }
}

/* ======================================================================== */
/* v45 — первый экран: мобильная геометрия и интервалы после знакомства     */
/* ======================================================================== */

/* Пока доска закрыта знакомством, ручка боковой панели не является
   доступным действием и потому полностью скрыта. */
.player-body.is-sealed .explorer-handle { display: none; }

/* Точное визуальное поведение v37: только светящийся текст и тонкая нижняя
   линия. Прямоугольная подложка, добавленная позднее, отключена. */
.top nav a:hover,
.top nav a:focus-visible {
  color: var(--gold-light);
  background: transparent;
  text-shadow: 0 0 16px rgba(240, 178, 50, .3);
}

@media (max-width: 980px) {
  html, body { overflow-x: clip; }
  /* Явный поток предотвращает появление неявной второй колонки и сохраняет
     утверждённый порядок: 34 хода → три шага → доска. */
  .hero-inner {
    display: flex;
    flex-direction: column;
    gap: 30px;
    min-width: 0;
  }
  .hero-text { display: contents; }
  .hero-text h1 {
    order: 1;
    width: 100%;
  }
  .player {
    order: 3;
    width: 100%;
    min-width: 0;
  }
  .player-body {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .board-column {
    width: 100%;
    max-width: none;
  }
  .hero .stage {
    width: min(100%, 540px);
    max-width: 100%;
    margin-inline: auto;
  }
  .explorer {
    grid-column: auto;
    max-width: 100%;
  }
  .explorer-handle { right: 4px; }
}



/* ======================================================================== */
/* v47 — закрытая панель не растягивает первый раздел                       */
/* ======================================================================== */

/* При width:0 текст панели переносился по одному символу и сохранял высоту
   1309px. Невидимая колонка растягивала hero и создавала пустой экран перед
   следующей секцией. Закрытое состояние исключено из обеих геометрий. */
.explorer[data-open="false"] {
  height: 0;
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
}
.explorer[data-open="true"] {
  height: auto;
  visibility: visible;
}

/* ======================================================================== */
/* v48 — утверждённая композиция первого экрана                             */
/* ======================================================================== */

/* Одна линия разделяет числовой крючок и пояснение. Текст и следующий блок
   получили самостоятельные, заметные интервалы. */
.h1-foot::before { margin: 30px 0 24px; }
/* Карточка шагов заметно светлее страницы */


/* Плашка центрируется геометрически по самой доске. */



/* На высоком настольном экране доска крупнее; панель стоит рядом с ней без
   пустой промежуточной колонки. */
.hero .stage { width: min(100%, 580px); max-width: 580px; }
.board-column { width: min(100%, 580px); max-width: 580px; }
.player-body { grid-template-columns: minmax(0, 580px) auto; gap: 10px; }
.explorer { width: 260px; }
.explorer[data-open="true"] { width: 260px; }

/* Панель получает окончательную ширину сразу. Анимация ширины заставляла
   текст на промежуточных кадрах переноситься по одному символу и дёргала
   высоту всего первого экрана. Теперь меняется только её видимость. */
.explorer { transition: none; }
.explorer[data-open="false"] { display: none; }
.explorer[data-open="true"] {
  display: flex;
  animation: explorer-v48-in 240ms var(--ease) both;
}
@keyframes explorer-v48-in {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Р-106 · После этапов элементы получают очередь: состояние → легенда →
   переключатель разбора → главное действие. Геометрия занята заранее. */
.player-body.is-revealing-controls .board-phase,
.player-body.is-revealing-controls .explorer-legend,
.player-body.is-revealing-controls .explorer-handle,
.player-body.is-revealing-controls .hero-demo-controls {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Р-164: 0.46 с — общая плавность сайта (С25). Было 500 мс. */
  transition: opacity 460ms var(--ease), visibility 0s linear 460ms;
}
.player-body.is-revealing-controls.reveal-phase .board-phase,
.player-body.is-revealing-controls.reveal-legend .explorer-legend,
.player-body.is-revealing-controls.reveal-handle .explorer-handle,
.player-body.is-revealing-controls.reveal-action .hero-demo-controls {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 460ms var(--ease), visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
  .player-body.is-revealing-controls .board-phase,
  .player-body.is-revealing-controls .explorer-legend,
  .player-body.is-revealing-controls .explorer-handle,
  .player-body.is-revealing-controls .hero-demo-controls { transition: none; }
}
/* Р-172 · Первое прятание органов управления идёт мгновенно: до вступления их
   на экране быть не должно, а плавное исчезновение читалось бы как рывок. */
.player-body.is-revealing-controls.reveal-instant .board-phase,
.player-body.is-revealing-controls.reveal-instant .explorer-legend,
.player-body.is-revealing-controls.reveal-instant .explorer-handle,
.player-body.is-revealing-controls.reveal-instant .hero-demo-controls { transition: none; }

/* ==================== v65 ===========================================
   Р-107 · Один источник цветов обслуживает главную доску, Game и все их
   легенды. Голубое поле означает отправление, оранжевое — назначение.
   Порядок легенды в разметке: Origin, затем Destination. */
#grid .sq.is-origin::after,
.demo-board .sq.is-origin::after {
  background: var(--move-origin-fill);
  box-shadow:
    inset 0 0 0 6px var(--move-origin),
    0 0 16px var(--move-origin-glow);
}
#grid .sq.is-destination::after,
.demo-board .sq.is-destination::after {
  background: var(--move-destination-fill);
  box-shadow:
    inset 0 0 0 6px var(--move-destination),
    0 0 16px var(--move-destination-glow);
}
.legend-origin {
  border: 3px solid var(--move-origin);
  background: var(--move-origin-fill);
}
.legend-destination {
  border: 3px solid var(--move-destination);
  background: var(--move-destination-fill);
}

/* Временная малиновая пара живёт на отдельном слое. Постоянные голубая и
   оранжевая рамки остаются неподвижными на ::after; три такта меняют только
   opacity малинового ::before и затем открывают стандартные цвета. */
#grid .sq.is-candidate-pulse::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 3px;
  pointer-events: none;
  background: var(--move-pair-fill);
  box-shadow:
    inset 0 0 0 6px var(--move-pair),
    inset 0 0 0 9px var(--move-pair-edge),
    0 0 14px rgba(255, 79, 135, .48);
  opacity: 0;
  animation: hero-pair-opacity-v71 2700ms cubic-bezier(.4,0,.2,1) both;
}
@keyframes hero-pair-opacity-v71 {
  0%, 22%, 44%, 66% { opacity: 1; }
  11%, 33%, 55%, 74% { opacity: .7; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #grid .sq.is-candidate-pulse::before { animation: none; opacity: 0; }
}

/* ==================== v67 ===========================================
   Р-109 · Семантика легенды закреплена в разметке через data-marker.
   Одинаковое правило обслуживает hero и Game: первый пункт всегда Origin с
   голубой рамкой, второй — Destination с оранжевой рамкой. */
.hero .explorer-legend [data-marker="origin"] > .legend-origin,
.demo-legend [data-marker="origin"] > .legend-origin {
  border: 3px solid var(--move-origin);
  background: var(--move-origin-fill);
}
.hero .explorer-legend [data-marker="destination"] > .legend-destination,
.demo-legend [data-marker="destination"] > .legend-destination {
  border: 3px solid var(--move-destination);
  background: var(--move-destination-fill);
}

/* Кнопка и утверждённая легенда снова принадлежат доске и остаются видимыми,
   даже когда подробная правая панель закрыта. */
.hero-demo-controls { min-height: 44px; margin-top: 2px; }
.hero-demo-controls .player-action {
  min-width: 250px;
  color: #211604;
  background: linear-gradient(135deg, var(--gold-light), var(--gold-deep));
  border-color: rgba(255, 236, 160, .8);
  box-shadow: 0 10px 28px rgba(255, 210, 77, .22);
}
.hero-demo-controls .player-action:disabled { opacity: .82; cursor: wait; }
.board-column > .explorer-legend {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  min-height: 22px;
  padding-top: 0;
}
.board-column > .explorer-legend[hidden] { display: none; }
.board-column > .explorer-legend span {
  color: #FFFFFF;
  font-size: .86rem;
  font-weight: 600;
}
.board-column > .explorer-legend i { width: 16px; height: 16px; }

/* Правая панель: активное содержание, а не приглушённая справка. Цвета
   меток исходного и конечного поля ниже не меняются. */
.explorer-intro {
  color: #FFFFFF;
  background: #3B4A60;
  border: 1px solid rgba(255, 218, 126, .28);
}
.explorer-group {
  background: #344258;
  border-top-color: rgba(255,255,255,.13);
  border-right-color: rgba(255,255,255,.13);
  border-bottom-color: rgba(255,255,255,.13);
}
.group-title { color: #FFD24D; font-size: 1rem; font-weight: 750; }
.group-note { color: #FFFFFF; font-size: .88rem; font-weight: 500; line-height: 1.42; }
.move-chip {
  color: #FFFFFF;
  background: #46566D;
  border-color: rgba(255, 232, 154, .34);
  font-size: .84rem;
}
.move-chip.is-playing {
  color: #201604;
  background: linear-gradient(135deg, #FFE89A, #FFD24D);
  border-color: #FFF0B8;
  box-shadow: 0 0 0 2px rgba(255, 210, 77, .25), 0 6px 18px rgba(0,0,0,.25);
}
.explorer-group.is-empty { opacity: 1; background: #303C50; }
.explorer-group.is-empty .group-title { color: #D8CCB7; }
.explorer-shared-note { color: #FFFFFF; font-size: .88rem; }

@media (min-width: 981px) and (max-height: 850px) {
  .hero .stage,
  .board-column { width: min(100%, 540px); max-width: 540px; }
  .player-body { grid-template-columns: minmax(0, 540px) auto; }
}

@media (max-width: 980px) {
  .hero .stage { width: min(100%, 560px); max-width: 100%; }
  .board-column { width: 100%; max-width: none; }
  .player-body { display: block; }
  .explorer[data-open="true"] { width: min(100%, 560px); margin: 14px auto 0; }
}

/* ======================================================================== */
/* v49 — выразительность знакомства, спокойный темп и секция Your Voice     */
/* ======================================================================== */

/* Разделитель, подпись «в шахматах» и карточка этапов образуют три явно
   раздельных уровня. Повторявшееся требование автора закреплено численно. */
.h1-foot::before { margin: 30px 0 38px; }
/* Счётчик и заголовки читаются на сланцевом фоне */


/* 10px создавали тесноту. 24px сохраняют визуальную связь и дают панели
   собственную границу. */
.player-body { gap: 24px; }
.explorer-intro { color: #FFFFFF; }
.group-title { color: #FFE48A; }
.group-note { color: #FFF1DA; font-weight: 590; }
.explorer-shared-note { color: #F7EAD4; font-weight: 560; }
.explorer-group.is-empty .group-title { color: #E9DEC9; }
.explorer-group.is-empty .group-note { color: #FFFFFF; }
.group-count { color: #E9D8B8; }

/* Содержимое вкладок Practice входит мягко; геометрия общей доски и
   утверждённые возможности каждого режима сохраняются. */
.lab-pane:not([hidden]),
.lab-editor-piece-dock:not([hidden]),
.lab-board-key:not([hidden]),
.lab-transport:not([hidden]) { animation: lab-v49-in 300ms var(--ease) both; }
@keyframes lab-v49-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Опрос сохраняет прежнюю компактную ширину, но больше не стоит один:
   нижняя часть той же панели ведёт к живой точке присутствия проекта. */



.poll-options { max-width: 480px; }
.poll-opt { color: #FFFFFF; background: #2C3D53; border-color: rgba(255,232,154,.22); }
.poll-opt span { color: #FFFFFF; }
.poll-opt:has(input:checked) {
  border-color: #FFD24D;
  background: #3B4B60;
  box-shadow: inset 3px 0 #FFD24D, 0 8px 22px rgba(0,0,0,.18);
}
.poll-note { min-height: 1.4em; margin: 16px auto 0; color: #FFD24D; font-style: normal; text-align: center; }






@media (max-width: 980px) {
}

@media (prefers-reduced-motion: reduce) {
  .lab-pane:not([hidden]),
  .lab-editor-piece-dock:not([hidden]),
  .lab-board-key:not([hidden]),
  .lab-transport:not([hidden]) { animation: none; }
}

/* Зазор у правой стороны доски соответствует визуальному воздуху между
   доской и левой текстовой колонкой на широком экране. */
.player-body { gap: 40px; }

/* Записи ходов являются полноценными объектами выбора, а не мелкими
   примечаниями. Предварительно выбранный ход получает отдельное состояние. */
.move-chip {
  color: #FFFFFF;
  font: 760 .94rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .01em;
  background: #4A5B72;
  border-color: rgba(255,236,184,.38);
}
.move-chip:hover,
.move-chip:focus-visible { color: #FFFFFF; border-color: #FFE07A; background: #566982; }
.move-chip.is-preview {
  color: #221703;
  background: #FFE07A;
  border-color: #FFF1B8;
  box-shadow: 0 0 0 2px rgba(255,224,122,.22), 0 8px 20px rgba(0,0,0,.24);
}
.group-note { color: #FFF5E4; font-size: .91rem; font-weight: 640; }
.explorer-shared-note { color: #FFF0D6; font-size: .91rem; font-weight: 610; }

@media (max-width: 980px) {
  /* Панель переходит под доску, поэтому горизонтальный зазор превращается в
     прежний управляемый вертикальный margin самой панели. */
  .player-body { gap: 0; }
}

/* ======================================================================== */
/* v51 — быстрый возврат, импульс полей и стабильная геометрия              */
/* ======================================================================== */

/* Верх панели читается как надзаголовок и крупное имя выбранной фигуры. */
.explorer-intro { min-height: 64px; justify-content: center; gap: 5px; padding: 11px 14px; }
#explorer-piece {
  color: #FFE07A;
  font: 820 .75rem/1.1 var(--font-sans);
  letter-spacing: .11em;
  text-transform: uppercase;
}
#explorer-hint {
  color: #FFFFFF;
  font: 780 1.22rem/1.15 var(--font-sans);
  letter-spacing: -.012em;
}

/* Кнопка и легенда всегда занимают свои строки. Скрытие меняет видимость,
   но не высоту колонки, поэтому центрирование больше не двигает доску. */
.hero-demo-controls { height: 44px; min-height: 44px; }
.board-column > .explorer-legend {
  display: flex;
  height: 22px;
  min-height: 22px;
  opacity: 1;
  visibility: visible;
  transition: opacity 180ms var(--ease);
}
.board-column > .explorer-legend[hidden] {
  display: flex;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ==================== v53 · Р-70 ====================================
   Опрос переехал в секцию «Поддержать» первой ступенью. Голос стоит выше
   денег: он бесплатен и открывает разговор, перевод завершает его. Опрос
   перестал быть узкой дощечкой посреди страницы — теперь он занимает всю
   ширину секции: заголовок слева, ответы справа. */
.support-step { margin-top: 30px; }
.support-step-vote {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 620px);
  gap: 34px 40px;
  align-items: center;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(255, 232, 154, .2);
}


.support-step-vote .poll-options { max-width: none; margin: 0; }
.support-step-vote .poll-note { margin: 14px 0 0; text-align: left; }

/* Р-71 · Ступень «Средства»: строка про веру стоит под своим заголовком, а
   предупреждение о сети поднято над реквизитами — оно работает до перевода,
   а прежде стояло после него. */
.support-step-money .support-lead { margin: 10px 0 0; max-width: 46ch; color: #FFFFFF; }
.support-panel .note.wallet-warning { margin: 22px 0 20px; font-size: 1rem; }
.support-step-money .wallet { margin-top: 0; }

/* Р-72 · Объявление секции «Автор» вынесено над фотографией: прежде оно стояло
   внутри правой колонки, и его центр уходил вправо от центра страницы.
   Закон один для всех секций: объявление по центру, содержимое по левому
   краю. */
.author .section-head { margin-bottom: 34px; }
.author-copy { text-align: left; }
.author-copy .author-facts { max-width: none; margin-inline: 0; text-align: left; }

@media (max-width: 900px) {
  .support-step-vote { grid-template-columns: 1fr; gap: 20px; }
  
}

/* Р-72 · Портрет и текст на узком экране снова встают друг под друга. Правило
   ширины колонок из Р-46 стояло ниже прежних медиазапросов и перебивало их,
   поэтому на телефоне текст автора уходил за правый край. */
@media (max-width: 820px) {
  .author-main { grid-template-columns: 130px minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .author-main { grid-template-columns: 1fr; }
  .author-portrait { width: min(68vw, 230px); }
}

/* ==================== v54 · Р-73 ====================================
   Один стиль выравнивания на всём сайте: заголовки и строки под ними стоят
   по центру, содержимое читается слева. Вопрос опроса встал над ответами:
   вопрос по центру и ответы сбоку давали два стиля на одном экране. */
.support-step-vote { display: block; padding-bottom: 34px; }


.support-step-money .support-lead { max-width: 56ch; margin-inline: auto; text-align: center; }
.support-step-vote .poll-options { max-width: 720px; margin: 26px auto 0; }
.support-step-vote .poll-note { text-align: center; margin-top: 16px; }

/* Р-73 · Объявление секции «Правила» и «Практика» подчинилось общему закону.
   Прежде оба заголовка стояли в двухколоночной сетке: у «Правил» — слева от
   вступления, у «Практики» — надзаголовок в одной колонке, заголовок в
   другой. На странице выходило три разных выравнивания. */
.extra-guide-head { display: block; }
.extra-guide-head .section-head { margin-inline: auto; }
.extra-guide-intro {
  max-width: 720px;
  margin: 18px auto 0;
  padding: 0;
  border-left: 0;
  text-align: center;
}
.position-lab-head { display: block; max-width: 720px; margin-inline: auto; text-align: center; }
.position-lab-head > p { justify-self: auto; max-width: none; padding: 0; }

/* ==================== v55 ===========================================
   Р-76 · Реквизиты закрыты одной кнопкой, код скрыт за словом «Код».
   Два чёрных квадрата QR и два длинных адреса тянули взгляд у всех, а
   нужны единицам. Возможность перевести осталась в один щелчок. */
.wallet-gate {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 18px;
  margin-top: 18px;
}
.wallet-gate-line { margin: 0; color: #FFFFFF; font-size: 1rem; }
.btn.wallet-gate-btn {
  background: transparent;
  color: #FFD24D;
  border: 1px solid rgba(255, 210, 77, .55);
  box-shadow: none;
  font-weight: 700;
}
.btn.wallet-gate-btn:hover { background: rgba(255, 210, 77, .12); border-color: #FFD24D; }
.wallet-block { margin-top: 26px; }
.wallet-block[hidden] { display: none; }

/* Тело счёта — простой поток: код появляется под адресом и уходит без
   следа. Колонка под код исчезает вместе с ним. */
.support .wallet-body { display: block; }
.wallet-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }


.support .wallet-qr { margin: 16px 0 0; }
.support .wallet-qr img { width: 200px; height: 200px; }
.wallet-qr[hidden] { display: none; }

/* Р-78 отменено в Р-157: цвет строки о сети живёт вместе с изумрудной лентой
   реквизитов, отдельного правила у него больше нет. */

/* Р-77 · Объявление секции ведёт опрос: строка под вопросом стоит по центру.
   Заголовок «Поддержать проект» снят — два крупных заголовка стояли подряд. */
.support-head-lead { margin: 12px auto 0; max-width: 56ch; color: #FFFFFF; font-size: 1rem; }
.support-step-vote .poll-options { max-width: 720px; margin: 0 auto; }
.support-step-money .support-lead { margin-inline: auto; text-align: center; }

/* А6 · Между фотографией и текстом об авторе больше воздуха. */
.author-main { gap: 56px; } /* Р-167 */
@media (max-width: 820px) { .author-main { gap: 28px; } }

/* Счета выравниваются по верху: открытый код удлиняет свою карточку, а
   соседняя обязана остаться на месте. */
.support .wallet-row { align-content: start; align-items: start; }

/* ==================== v56 ===========================================
   Р-79 · Крючок вместо запертой доски. Доска видна с первой секунды и сама
   играет ход, которого в шахматах нет. Три факта приходят следом, свобода
   трогать доску — после них. Прежняя пломба объявляла запрет и стояла между
   обещанием «34 хода» и его доказательством. */
.player-body.is-sealed .board { filter: none; pointer-events: none; }
.player-body.is-sealed .explorer { opacity: .5; filter: none; pointer-events: none; }

/* ==================== v57 · Р-83 ====================================
   Вступление идёт по центру доски: одна карточка сначала удивляет ходом,
   потом ведёт по трём фактам. Взгляд гостя остаётся в одной области. */
.board-intro {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 12px;
  border-radius: var(--radius-lg);
  background: rgba(10, 15, 20, .3);
  opacity: 0;
  transition: opacity 320ms var(--ease);
}
.board-intro.is-live { opacity: 1; }
.board-intro[hidden] { display: none; }
.board-intro > *[hidden] { display: none; }

.board-intro-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(88%, 340px);
  padding: 20px 24px;
  border: 2px solid #FFE9A8;
  border-radius: 22px;
  background: linear-gradient(160deg, #FFD24D, #F5A623);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .45), 0 0 26px rgba(255, 210, 77, .4);
  text-align: center;
}
.board-intro-card strong { color: #241703; font: 750 1.12rem/1.28 var(--font-display); }
.board-intro-sub { color: #3A2A05; font: 600 .95rem/1.35 var(--font-sans); }
.board-intro-san {
  padding: 3px 14px;
  border: 1px solid rgba(36, 23, 3, .45);
  border-radius: 999px;
  color: #241703;
  font: 700 .92rem/1.6 var(--font-sans);
  letter-spacing: .02em;
}
.board-intro-card .player-action { margin-top: 4px; }
/* Карточка шагов внутри доски: тот же размер и то же место */


/* Поля сыгранного хода дышат, пока карточка стоит. */
#grid .sq.is-breathing::after { animation: hero-breathe 2600ms ease-in-out infinite; }
@keyframes hero-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: .76; }
}
/* Три факта собираются слева строка за строкой — уже после того */

@keyframes trust-line-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  #grid .sq.is-breathing::after { animation: none; }
}

/* На узком экране карточка ужимается: поля хода g1 и e2 обязаны остаться
   видимыми рядом с текстом о нём. */
@media (max-width: 720px) {
  .board-intro { padding: 8px; }
.board-intro-card { width: min(80%, 262px); }
  .board-intro-card { padding: 14px 16px; gap: 8px; }
  .board-intro-card strong { font-size: .98rem; }
  .board-intro-sub { font-size: .85rem; }
  .board-intro-san { font-size: .84rem; }
}
/* ==================== v58 ===========================================
   Р-86 · Карточка вступления стала светлой. Золотая заливка читалась как
   предупреждение об опасности,
а тёмная карточка шагов добавляла экрану
   темноты. Белое поле с золотым кантом держит гамму сайта: золото остаётся
   у действия,
а текст получает чёрный по белому — самый спокойный контраст. */
.board-intro-card {
  background: #FFFFFF;
  border: 2px solid #FFD24D;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .5);
  margin-bottom: 9%;
}
.board-intro-card strong { color: #14181F; }
.board-intro-sub { color: #3A424E; font-weight: 600; }
.board-intro-san {
  background: #EEF2F7;
  border: 1px solid #C3CEDD;
  color: #14181F;
}
#hook-ok {
  background: #2A3446;
  border: 1px solid #2A3446;
  color: #FFFFFF;
  box-shadow: none;
}
#hook-ok:hover { background: #38455C; border-color: #38455C; }

/* Р-85 · После вступления доска прямо зовёт выбрать фигуру. */
.board-invite {
  position: absolute;
  top: 16px;
  left: 50%;
  z-index: 6;
  margin: 0;
  padding: 8px 18px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 210, 77, .55);
  border-radius: 999px;
  background: rgba(16, 22, 30, .88);
  color: #FFFFFF;
  font: 700 .92rem/1.2 var(--font-sans);
  opacity: 0;
  transition: opacity 320ms var(--ease);
}
.board-invite.is-live { opacity: 1; }
.board-invite[hidden] { display: none; }

/* На узком экране приглашение короче: «Выберите фигуру». Длинная строка
   переносилась на две и закрывала первый ряд. */
@media (max-width: 720px) {
  .board-invite {
    top: 10px;
    padding: 6px 14px;
    font-size: .8rem;
    max-width: calc(100% - 24px);
    text-align: center;
  }
  .invite-wide { display: none; }
  /* Метка состояния уступает место приглашению: на узком экране они стояли
     внахлёст. */
  .board-invite.is-live ~ .board-phase { opacity: 0; }
}
/* ==================== v59 ===========================================
   Р-89 · Карточка вступления — индиго с переливом. Белое поле автор отклонил:
   оно отдавало больничной темой. Индиго родня фону страницы,
а перелив,
светлая линия по верхнему канту и тень внутри снизу делают карточку
   предметом,
лежащим на доске. */
.board-intro-card {
  background: var(--seal-face);
  border: 2px solid var(--seal-edge);
  box-shadow: var(--seal-lift);
}
.board-intro-card strong { color: var(--seal-text); }
.board-intro-sub { color: #FFFFFF; font-weight: 700; font-size: 1rem; }
/* Золото достаётся только названию игры: глаз идёт по строке до него. */
.board-intro-sub b { color: #FFD24D; font-weight: 800; }

/* Запись хода стала тише: прежде она была такой же светлой плашкой, что и
   кнопка, и читалась как вторая кнопка. */
.board-intro-san {
  padding: 2px 10px;
  border: 0;
  border-radius: 8px;
  background: rgba(0, 0, 0, .22);
  color: #DDE7F5;
  font-family: var(--font-mono, monospace);
  font-weight: 600;
  letter-spacing: .04em;
}

/* Р-90 · Кнопка `Got it` — золото в тёмной оправе. Плотная заливка, тёмный
   кант и тень дают понять, что это кнопка, а не подпись. */
/* Оттенок золота у этой кнопки утверждён отдельно (Р-90) и на волос темнее
   общего `--seal-action-face`. Пока автор не сказал свести их в один, он
   остаётся здесь явным исключением, а не случайным расхождением. */
#hook-ok {
  padding: 12px 24px;
  border: 2px solid var(--seal-action-edge);
  border-radius: 12px;
  background: linear-gradient(180deg, #FFD75C, #EDAF2C);
  color: var(--seal-action-edge);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .01em;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .45);
}
#hook-ok:hover { background: linear-gradient(180deg, #FFE27C, #F5B833); }

/* Р-91 · Метка состояния позиции без бежевой плёнки. */
/* Р-331 · Метка залита цветом состояния. Тёмная плашка с золотым волоском
   лежала на тёмном поле над доской: буквы держались на одном контуре, и
   автор прочёл это как «текст на тёмном фоне, отделённый только контуром».
   Цвет взят по общему правилу сайта (С14): исходное поле синее, конечное
   оранжевое, и теми же цветами помечены «до хода» и «после хода» на каждой
   доске. Буквы тёмные — на залитой плашке они читаются в любом окружении. */
.board-phase[data-phase="before"] {
  background: var(--move-origin);
  border: 1px solid var(--move-origin);
  color: #04202F;
  box-shadow: 0 6px 16px rgba(4, 10, 20, .4);
}
.board-phase[data-phase="after"] {
  background: var(--move-destination);
  border: 1px solid var(--move-destination);
  color: #2A1503;
  box-shadow: 0 6px 16px rgba(4, 10, 20, .4);
}

/* Р-88 · Приглашение стоит по центру доски. */
.board-invite {
  white-space: nowrap;
  text-align: center;
  top: 50%;
  left: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
  padding: 10px 22px;
  border: 1px solid rgba(255, 210, 77, .55);
  background: rgba(16, 22, 30, .9);
  font-size: 1rem;
  cursor: pointer;
}
.board-invite:hover { opacity: 0; }

/* Р-92 · Плавность одна на весь сайт: карточка выходит снизу и растворяется,
   смена шага идёт тем же движением. Прежде карточка выскакивала рывком. */
.board-intro { transition: opacity 460ms var(--ease); }
.board-intro-card { animation: intro-card-in 460ms var(--ease) both; }
@keyframes intro-card-in {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
.board-intro-card { animation: none; }
}

@media (max-width: 720px) {
  .board-invite { font-size: .84rem; padding: 8px 16px; }
}

/* ==================== v60 ===========================================
   Р-93 · Имя игры стоит крупно над доской: три факта и разбор ходов ниже
   получают привязку — гость видит, о чьих правилах речь. */
.board-brand {
  margin: 0 0 12px;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.1vw, 1.95rem);
  font-weight: 700;
  letter-spacing: .012em;
  color: #FFFFFF;
}

/* Р-95 · Смена карточки идёт растворением, а не рывком. */
.board-intro-card.is-leaving {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 240ms var(--ease), transform 240ms var(--ease);
}

/* Р-96 · Запись хода подписана словом «ход»: спутать её с кнопкой нельзя. */
.board-intro-san {
  padding: 4px 12px 4px 8px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 8px;
  background: rgba(0, 0, 0, .3);
  color: #FFFFFF;
}
.board-intro-san::before {
  content: 'ход';
  margin-right: 10px;
  padding-right: 10px;
  border-right: 1px solid rgba(255,255,255,.28);
  color: #FFD24D;
  font-family: var(--font-sans);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* Р-97 · Правая панель — тот же материал, что у карточки вступления: индиго
   с переливом, золотые названия групп, белые пояснения. Кремовые тона сняты
   по запрету С19 и С24. */
.explorer-intro {
  background: linear-gradient(165deg, #2E5590 0%, #1D3860 100%);
  border: 1px solid rgba(255, 210, 77, .5);
}
.explorer-group {
  background: linear-gradient(165deg, #2A4C7F 0%, #1B3457 100%);
  border-top-color: rgba(255,255,255,.14);
  border-right-color: rgba(255,255,255,.14);
  border-bottom-color: rgba(255,255,255,.14);
}
.explorer-group.is-empty { background: linear-gradient(165deg, #24406A 0%, #182D4B 100%); }
.group-title { color: #FFD24D; }
.group-note,
.explorer-shared-note,
.explorer-group.is-empty .group-note { color: #FFFFFF; }
.explorer-group.is-empty .group-title { color: #FFFFFF; opacity: .82; }
.group-count { color: #FFFFFF; opacity: .78; }
.move-chip { background: rgba(0, 0, 0, .26); border-color: rgba(255,255,255,.22); }
.move-chip:hover,
.move-chip:focus-visible { background: rgba(0, 0, 0, .4); border-color: rgba(255,210,77,.7); }
.move-chip.is-preview,
.move-chip.is-playing {
  background: linear-gradient(180deg, #FFD75C, #EDAF2C);
  color: #12233A;
  border-color: #12233A;
  box-shadow: 0 6px 16px rgba(0,0,0,.3);
}

/* Р-98 · Заголовок панели — золотой ярлык: он объявляет панель и стоит выше
   названий групп по заметности. */
#explorer-piece {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #FFD75C, #EDAF2C);
  color: #12233A;
  font: 900 .74rem/1.35 var(--font-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Имя игры заняло место над доской, поэтому на невысоких экранах доска чуть
   меньше: кнопка показа хода и легенда полей обязаны остаться на виду. */
.board-brand { margin-bottom: 8px; font-size: clamp(1.3rem, 1.9vw, 1.72rem); }
@media (min-width: 981px) and (max-height: 940px) {
  .hero .stage,
  .board-column { width: min(100%, 500px); max-width: 500px; }
}

/* На узком экране карточка стоит выше: нижний край закрывал поле сыгранного
   хода. */
@media (max-width: 720px) {
.board-intro-card { margin-bottom: 15%; }
}

/* ==================== v61 ===========================================
   Р-99 · Название игры становится вторым визуальным якорем первого экрана
   после «34 хода». Сатиновое золото продолжает палитру главного действия,
   полуночно-синее имя сохраняет высокий контраст, а индиговая подпись
   отличается цветом и масштабом. */
.board-brand {
  position: relative;
  isolation: isolate;
  display: grid;
  place-content: center;
  gap: 7px;
  width: 100%;
  min-height: 104px;
  margin: 0 0 12px;
  padding: 15px 24px 14px;
  overflow: hidden;
  border: 1px solid #F5D672;
  border-radius: 16px;
  background: linear-gradient(135deg,
    #B77812 0%,
    #F6D668 27%,
    #D89A1F 54%,
    #FFE68B 77%,
    #B67510 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    0 18px 42px rgba(0,0,0,.26);
  text-align: center;
}
.board-brand::after {
  content: '';
  position: absolute;
  inset: 7px;
  z-index: -1;
  border: 1px solid rgba(67, 42, 7, .18);
  border-radius: 11px;
  pointer-events: none;
}
/* Р-254 · По золотому баннеру медленно проходит свет: автор просил, чтобы
   слиток «играл». Полоса слабее, чем на карточке шапки, — баннер и без неё
   самый яркий предмет экрана. */
.board-brand::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 -30%;
  width: 22%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .34), transparent);
  transform: skewX(-18deg);
  animation: board-brand-sheen 14s linear infinite;
  pointer-events: none;
}
@keyframes board-brand-sheen {
  0%, 62% { left: -30%; opacity: 0 }
  64% { opacity: .9 }
  94% { left: 110%; opacity: .9 }
  96%, 100% { left: 110%; opacity: 0 }
}
@media (prefers-reduced-motion: reduce) {
  .board-brand::before { display: none; animation: none }
}
.board-brand-name {
  color: #0D1B2B;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.72rem);
  font-weight: 750;
  line-height: 1;
  letter-spacing: -.018em;
  text-shadow: 0 1px 0 rgba(255,255,255,.38);
}
.board-brand-subtitle {
  color: #332A72;
  font-family: var(--font-sans);
  font-size: clamp(.66rem, .86vw, .78rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: .19em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255,255,255,.2);
}

/* Р-100 · В v60 между доской и панелью было 40px. Панель приближена на
   ширину бокового управляющего элемента; положение доски сохраняется. */
@media (min-width: 981px) {
  .player-body { gap: 12px; }
}

@media (max-width: 720px) {
  .board-brand {
    min-height: 84px;
    padding: 12px 14px;
    border-radius: 13px;
  }
  .board-brand-name { font-size: clamp(1.65rem, 8vw, 2.2rem); }
  .board-brand-subtitle { font-size: .6rem; letter-spacing: .13em; }
}

/* ==================== v62 ===========================================
   Р-101 · Уход уведомления и появление этапов идут вдвое спокойнее.
   Геометрия движения та же, поэтому смена сохраняет связь с доской. */
.board-intro { transition-duration: 920ms; }
.board-intro-card { animation-duration: 920ms; }
.board-intro-card.is-leaving { transition-duration: 480ms; }
.board-intro-san::before { content: 'move'; }

/* Р-102 · Панель шире на настольном экране: три записи Spark Move входят
   в строку. У строк с тремя и более ходами крайние записи получают одинаковый
   отступ от левой и правой границ содержимого группы. */
@media (min-width: 981px) {
  .explorer,
  .explorer[data-open="true"] { width: 320px; }
  .move-list:has(.move-chip:nth-child(3)) {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    justify-content: space-between;
    column-gap: 6px;
  }
}

/* Р-104 · Панель v48 входила за 240 мс и воспринималась как резкое
   появление. 520 мс согласуются с кроссфейдами главной доски 460–560 мс. */
.explorer[data-open="true"] {
  animation-name: explorer-v63-in;
  animation-duration: 520ms;
  animation-timing-function: var(--ease);
  animation-fill-mode: both;
}
@keyframes explorer-v63-in {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .explorer[data-open="true"] { animation: none; }
}

/* ==================== v68 ===========================================
   Р-110 · Компактная верхняя геометрия настольного hero. Верх контента
   начинается сразу после фиксированного меню с 8px воздуха. Баннер ниже,
   сохраняя крупное имя игры; доска, кнопка и легенда поднимаются вместе. */
@media (min-width: 981px) {
  .hero { align-items: flex-start; padding-top: 76px; }
  .board-brand {
    min-height: 82px;
    margin-bottom: 8px;
    padding: 9px 20px 8px;
    gap: 4px;
  }
  .board-brand-name { font-size: clamp(2rem, 2.7vw, 2.42rem); }
  .board-brand-subtitle { font-size: .68rem; }
}

/* ==================== v70 ===========================================
   Р-111 · От разделителя меню до золотого баннера остаётся один строковый
   интервал — высота строки «In the starting position», а не прежние 8px. */
@media (min-width: 981px) {
  .hero { padding-top: 90px; }
}

/* Р-112 · Во вступительной очереди контейнеры остаются в одном состоянии
   после проявления. is-revealing-controls больше не снимается таймером, поэтому
   кнопка не перескакивает между двумя наборами transition-правил. */
.player-body.is-revealing-controls.reveal-action .hero-demo-controls {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Р-113 · Все пломбы Practice повторяют карточку вступления главной доски:
   индиговый сатин, золотой кант, белый текст и золотое действие. */
.lab-seal,
.lab-board-alert,
.lab-promotion {
  border: 2px solid var(--seal-edge);
  border-radius: 22px;
  background: var(--seal-face);
  color: var(--seal-text);
  box-shadow: var(--seal-lift);
}
.lab-seal { min-height: 188px; padding: 22px 26px; }
.lab-seal b { color: var(--seal-eyebrow); }
.lab-seal strong { color: var(--seal-text); }
.lab-seal span { color: var(--seal-text-dim); }
.lab-seal small {
  border: 1px solid #2A3446;
  background: var(--seal-action-face);
  color: var(--seal-action-text);
  box-shadow: 0 10px 20px rgba(0,0,0,.38);
}
.lab-board-alert { color: #FFFFFF; }
.lab-board-alert[data-kind="info"] { border-color: #73C7E4; color: #FFFFFF; }
.lab-board-alert[data-kind="result"] { border-color: #FFD24D; color: #FFFFFF; }

/* Затемнение лежит отдельным слоем: blur/filter доски больше не используется.
   Слой также физически перехватывает мышь, а JS блокирует транспорт и нотацию. */
.position-lab.is-overlay-blocked .position-lab-board { filter: none; }
.lab-board-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7;
  border-radius: 16px;
  background: rgba(9, 16, 27, .58);
  opacity: 0;
  pointer-events: none;
  transition: opacity 460ms var(--ease);
}
.position-lab.is-overlay-blocked .lab-board-wrap::after {
  opacity: 1;
  pointer-events: auto;
}

/* Р-114 · Анализ получает быстрые переходы к обоим краям партии. */
.lab-analysis-edge[hidden] { display: none; }
.lab-transport .demo-control:disabled {
  opacity: .3;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.position-lab.is-overlay-blocked .lab-transport,
.position-lab.is-overlay-blocked #lab-analysis-notation { cursor: not-allowed; }

/* ==================== v71 ===========================================
   Р-115 · Модальная блокировка Practice действует на каждый фактический
   элемент управления. Курсор запрета показывается над кнопкой, а не только
   в промежутках контейнера. */
.position-lab.is-overlay-blocked .lab-transport .demo-control,
.position-lab.is-overlay-blocked .position-lab-panel,
.position-lab.is-overlay-blocked .position-lab-panel button,
.position-lab.is-overlay-blocked .position-lab-panel input,
.position-lab.is-overlay-blocked .position-lab-panel textarea,
.position-lab.is-overlay-blocked .lab-editor-piece-dock button {
  cursor: not-allowed !important;
}
.position-lab.is-overlay-blocked .position-lab-panel,
.position-lab.is-overlay-blocked .lab-editor-piece-dock { opacity: .58; }

@media (prefers-reduced-motion: reduce) {
  .lab-board-wrap::after { transition: none; }
}

/* ==================== v72 ===========================================
   Р-116 · Слой фигур отделён от слоя полей.

   Рисунки фигур — 32 файла SVG — лежали в общем слое с полями доски. Любая
   перерисовка поля заставляла браузер заново растеризовать все рисунки
   разом; чёрные фигуры на тёмных полях от этого дрожали заметнее прочих.
   Собственный слой рисуется один раз, а подсветка полей под ним больше его
   не трогает. */
.pieces {
  will-change: transform;
  transform: translateZ(0);
}

/* Р-117 · Строка FEN в разборе переносится, а не уезжает вбок.
   Прежде поле держало запись одной строкой и выдавало горизонтальную
   полосу прокрутки: начало записи пропадало из виду, а высота правой панели
   при этом пустовала. Теперь запись видна целиком, поле растёт по тексту, а
   запас высоты ограничен — партия PGN не выталкивает доску. */
.lab-io-row textarea {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-x: hidden;
  overflow-y: hidden;
  resize: none;
}
#lab-analysis-fen { min-height: 4.3em; }
#lab-analysis-pgn { min-height: 8.2em; }
.lab-io-row { align-items: start; }
.lab-io-row label,
.lab-io-row .btn { margin-top: 5px; }

/* Р-118 · Указатель очереди хода стоит в своей полосе у самой доски.
   Прежде он висел на 39 px правее колонки при промежутке в 32 px и потому
   налезал на правую панель. Теперь он стоит в самом промежутке: ближе к
   доске и заведомо не доходит до панели. Доска своего размера не меняет. */
/* Р-283 · Метка очереди хода стоит в правом поле рамки доски. */
.lab-turn-indicator { right: 1px; width: 20px; }
.lab-turn-indicator i { left: 1px; width: 17px; }

/* ==================== v73 ===========================================
   Р-120 · Шапка Rules больше не складывает три короткие фразы «стихом».
   На широком экране это единая строка с утверждёнными ромбами; переносы на
   узком экране определяет доступная ширина, а не принудительный <br>. */
.extra-guide-intro {
  max-width: 1120px;
  margin: 9px auto 0;
}
.spark-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 7px 13px;
  margin: 0;
  color: #FFFFFF;
  font: 700 clamp(.95rem, 1.25vw, 1.08rem)/1.45 var(--font-sans);
  text-align: center;
}
.spark-line em { color: #FFC247; font-style: normal; }
.spark-line strong { color: #FFFFFF; font-weight: 900; }
.spark-line i { color: var(--spark-mark); font-style: normal; font-size: .68em; } /* Р-165 */

/* Р-121 · В Puzzle и Analyse один четырёхкнопочный транспорт. */
.position-lab[data-active-mode="puzzle"] .lab-analysis-edge,
.position-lab[data-active-mode="analysis"] .lab-analysis-edge { display: grid; }

/* Р-122 · FEN заранее получает две-три видимые строки, PGN — большую область.
   Поля растут по содержимому без внутренней полосы; освобождённая высота взята
   у списка четырёх примеров и нотации, которые остаются равными. */
.lab-analysis-io { gap: 12px; margin-bottom: 12px; }
/* И-3 · Поле ввода придвинуто к своему слову, кнопки расширены. Русские
   подписи «Копировать» и «Вставить» в 82 px вставали впритык к краям. */
.lab-io-row {
  grid-template-columns: 44px minmax(0, 1fr) 112px 112px;
  gap: 7px;
  align-items: start;
}
.lab-io-row label {
  margin-top: 0;
  padding-top: 11px;
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: .08em;
}
.lab-io-row textarea {
  min-width: 0;
  padding: 10px 12px;
  line-height: 1.38;
  overflow: hidden;
  scrollbar-width: none;
}
.lab-io-row .btn {
  min-height: 46px;
  margin-top: 0;
  padding: 11px 13px;
  font-size: .82rem;
}
.lab-analysis-workspace,
.lab-analysis-score,
.lab-example-list {
  height: 250px;
  min-height: 250px;
  max-height: 250px;
}
.lab-example-list { justify-content: stretch; }
.lab-example-list button { flex: 1 1 0; min-height: 0; }

/* ==================== v74 ===========================================
   Р-123 · Возвращаем естественную высоту Puzzle и Editor. Только Analyse
   достигает нижнего уровня транспорта и легенды; её последний ряд — список
   примеров и нотация — одновременно является нижним краем панели. */
.position-lab-head.section-head { margin-bottom: 18px; }
.position-lab[data-active-mode="analysis"] .position-lab-panel {
  box-sizing: border-box;
  height: 650px;
  min-height: 650px;
}
#lab-analysis-pane:not([hidden]) {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 250px;
  gap: 12px;
  height: 612px;
  min-height: 0;
}
#lab-analysis-pane .lab-analysis-io {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
  margin: 0;
}
#lab-analysis-pane .lab-io-row:last-child { min-height: 0; }
#lab-analysis-pgn {
  height: 100% !important;
  min-height: 0;
  overflow-y: auto;
}
#lab-analysis-pane .lab-analysis-workspace { margin: 0; }

@media (max-width: 620px) {
  .spark-line { gap: 5px 9px; }
  .lab-io-row { grid-template-columns: 48px minmax(0, 1fr); }
  .lab-io-row .btn { grid-column: auto; }
  .lab-analysis-workspace,
  .lab-analysis-score,
  .lab-example-list { height: auto; min-height: 0; max-height: none; }
  .lab-analysis-score { height: 330px; min-height: 330px; }
  .position-lab[data-active-mode="analysis"] .position-lab-panel,
  #lab-analysis-pane:not([hidden]) { height: auto; min-height: 0; }
  #lab-analysis-pane:not([hidden]) { display: block; }
  #lab-analysis-pane .lab-analysis-workspace { margin-top: 12px; }
  #lab-analysis-pgn { min-height: 10em; }
}

/* ==================== v75 ===========================================
   Р-125 · У всех пунктов основного меню один верхний интервал после
   разделителя. 22 px повторяют расстояние от нижней границы фиксированного
   меню до золотого баннера первого экрана. Нижняя геометрия секций сохранена. */
#difference,
#example-game,
#rules,
#position-lab,
#author,
#support { padding-top: 22px; }

/* Р-184 · Пункт меню приводит любую секцию в одно и то же место: надзаголовок
   встаёт на 24 px ниже липкой шапки. Без этого секция уезжала под шапку
   высотой 69 px, и надзаголовок скрывался целиком — кроме «Участия», где он
   выглядывал наполовину, потому что лежит внутри карточки и отстоит от верха
   секции на 46 px против 23 px у остальных. Разные значения здесь и означают
   один и тот же результат на экране. */
#player,
#difference,
#example-game,
#rules,
#position-lab,
#author { scroll-margin-top: 70px; }
#support { scroll-margin-top: 47px; }

/* Заголовок и следующее за ним содержание используют тот же интервал. У Rules
   вводная строка входит в шапку, поэтому её собственный отступ задаёт эти
   22 px без сложения с нижним margin заголовка. */
.section-head,
.position-lab-head.section-head { margin-bottom: 22px; }
.extra-guide-head .section-head { margin-bottom: 0; }
.extra-guide-intro { margin-top: 22px; }

/* Подчёркивание меню стало заметнее без изменения размеров самой шапки. */
.top nav a::after { height: 3px; }

/* ==================== v76 ===========================================
   Р-126 · Левая история первого экрана начинается на половину высоты
   золотого баннера ниже. Доска и её положение остаются без изменений. */
@media (min-width: 981px) {
  .hero-text { transform: translateY(82px); }
  .explorer { margin-top: 82px; }
}

/* Р-127 · Карточки Differences имеют одну геометрию. Шесть кнопок занимают
   ту же высоту, поэтому выбор меняет только содержание, а не размер блока. */
.difference-rail { align-content: stretch; gap: 8px; }
.difference-rail button {
  min-height: 58px;
  padding: 13px 18px 13px 29px;
  font-size: 16px;
}
.difference-rail button::before {
  left: 11px;
  width: 8px;
  height: 8px;
}
.difference-panels { height: 388px; min-height: 388px; }
.difference-panel[data-difference-panel="draw"] { overflow-y: auto; }
.difference-panel[data-difference-panel="draw"] details { margin-top: 1rem; }
.difference-panel[data-difference-panel="draw"] summary { cursor: pointer; }
.difference-panel {
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
}

/* Р-128 · Строка тезисов Rules отделена от белого заголовка холодным
   серебристо-голубым. Spark сохраняет золото бренда, ромбы получают свой
   голубой акцент и больше с ним не сливаются. Цвет ромба с Р-165 приходит
   из `--spark-mark`, поэтому собственного правила здесь больше нет. */
/* Р-334 · Три части подзаголовка «Правил» набраны одним белым. Крайние шли
   мутно-голубым `#BFD7EA`, средняя — белым: одна строка говорила двумя
   цветами, и голубой здесь ничего не называл. Голубым на сайте помечено то,
   что пришло из новых правил (Р-241), — в этой строке это ромбы-разделители,
   и они голубыми остались. */
.spark-line { color: #FFFFFF; }
.spark-line em { color: #FFD24D; }
.spark-line strong { color: #FFFFFF; }

/* Р-129 · Смена режима Practice состоит из короткого ухода и спокойного
   появления. Вкладки остаются снаружи эффекта и принимают следующий выбор. */
.position-lab-shell.is-mode-leaving {
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 360ms var(--ease), transform 360ms var(--ease);
  pointer-events: none;
}
.position-lab-shell.is-mode-entering {
  animation: lab-mode-v76-in 720ms var(--ease) both;
}
@keyframes lab-mode-v76-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .position-lab-shell.is-mode-leaving { transition: none; }
  .position-lab-shell.is-mode-entering { animation: none; }
}

/* ==================== v77 ===========================================
   Р-130 · Нижняя область показывает три самостоятельных способа участия.
   Индиговая основа связывает её с сайтом, а голубой, фиолетовый и золотой
   акценты разделяют Vote, Follow и Donate по смыслу. */
.support {
  background:
    radial-gradient(circle at 14% 12%, rgba(34, 211, 238, .11), transparent 31%),
    radial-gradient(circle at 88% 46%, rgba(168, 85, 247, .1), transparent 32%),
    linear-gradient(155deg, #172946 0%, #1D304D 48%, #14243C 100%);
}
.support .support-panel {
  max-width: 1120px;
  border-color: rgba(157, 213, 255, .22);
  background: rgba(9, 21, 38, .54);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .32), inset 0 1px rgba(255,255,255,.05);
  /* Р-162 · Тот же отступ до названия секции, что и всюду. Здесь роль
     разделителя играет верхний кант карточки, а не граница секции, и от него
     до слова Participate было 41 px против 31 px в остальных секциях. */
  padding-top: 22px;
}
.support-head-lead {
  color: #BFD7EA;
  font-size: 1.05rem;
  font-weight: 650;
}
.participation-grid {
  display: grid;
  gap: 16px;
  max-width: 940px;
  margin: 0 auto;
}
.participation-card.support-step {
  position: relative;
  margin: 0;
  padding: 24px 26px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 18px;
  background: rgba(13, 27, 47, .78);
  box-shadow: inset 4px 0 var(--participation-accent), 0 14px 34px rgba(0,0,0,.2);
}
.participation-card.is-vote { --participation-accent: #22D3EE; }
.participation-card.is-donate { --participation-accent: #FFD24D; }
.participation-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.participation-card-head > span {
  color: var(--participation-accent);
  font-size: 1rem;
  filter: drop-shadow(0 0 8px var(--participation-accent));
}
.participation-card-head small {
  display: block;
  margin-bottom: 3px;
  color: var(--participation-accent);
  font: 850 .7rem/1 var(--font-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.participation-card-head h3 {
  margin: 0;
  color: #FFFFFF;
  font: 800 clamp(1.2rem, 2vw, 1.55rem)/1.1 var(--font-display);
}
.participation-copy {
  margin: 0 0 18px;
  color: #D4E1ED;
  line-height: 1.5;
}
.participation-card .poll-options { max-width: 720px; margin: 0; }
.participation-card .poll-opt {
  border-color: rgba(34, 211, 238, .2);
  background: rgba(34, 211, 238, .045);
}
.participation-coming {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid rgba(168, 85, 247, .5);
  border-radius: 999px;
  background: rgba(168, 85, 247, .11);
  color: #FFFFFF;
  font-weight: 750;
}
.participation-coming .coming-mark {
  color: #D8B4FE;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* Р-170 · Портал Follow говорит списком: чего гость ждёт от канала. Ромб
   берёт общий цвет `--spark-mark`. Зазор строк подобран так, чтобы список
   закрыл пустоту портала, а самым наполненным остался опрос по центру. */
.participation-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; text-align: left; }
.participation-list li { position: relative; padding-left: 22px; color: #E6F1FB; font-size: .95rem; line-height: 1.45; }
.participation-list li::before {
  content: "◆";
  position: absolute;
  left: 0;
  top: .12em;
  color: var(--spark-mark);
  font-size: .58rem;
}
.participation-card.is-donate .support-lead { margin-top: 0; }
.participation-card.is-donate .wallet-gate { justify-content: flex-start; }

@media (max-width: 620px) {
  .participation-card.support-step { padding: 20px 18px; }
  .participation-coming { align-items: flex-start; flex-direction: column; border-radius: 14px; }
}

/* ==================== v78 ===========================================
   Р-131 · fade-up удерживает transform после загрузки, поэтому геометрический
   отступ Hero задаётся margin: он остаётся действительным после анимации. */
@media (min-width: 981px) {
  .hero-text { margin-top: 82px; transform: none; }
  .explorer { margin-top: 82px; }
}

/* Р-132 · Analyse растягивается ровно по фактической строке CSS Grid, которую
   задаёт доска вместе с транспортом и легендой. Числовая высота 650 удалена. */
.position-lab[data-active-mode="analysis"] .position-lab-panel {
  height: auto;
  min-height: 0;
  align-self: stretch;
}
.position-lab[data-active-mode="analysis"] #lab-analysis-pane:not([hidden]) {
  height: 100%;
}

/* Р-133 · Один шаблон нотации: номер и две строго равные игровые колонки. */
.lab-score-head,
.lab-score-row { grid-template-columns: 44px repeat(2, minmax(0, 1fr)); }
.lab-score-head span:nth-child(2),
.lab-score-row > span:nth-child(2),
.demo-score-head span:nth-child(2) { border-left: 1px solid rgba(157,213,255,.2); }
.demo-score-head { grid-template-columns: 44px repeat(2, minmax(0,1fr)); }
.demo-score-head span:nth-child(3) { border-left: 1px solid rgba(157,213,255,.2); }

/* Р-134 · Цветовая иерархия Practice повторяет главный исследователь: золото
   ведёт к действию, голубой описывает данные, тёмный индиго держит фон. */
.lab-io-row label { color: #FFD24D; text-shadow: 0 0 12px rgba(255,210,77,.22); }
.lab-io-row textarea { border-color: rgba(87,199,255,.38); background: linear-gradient(145deg,#11243d,#0d1b30); }
.lab-example-list button { border-color: rgba(87,199,255,.28); background: linear-gradient(135deg,#183052,#11233d); }
.lab-example-list button.is-active {
  border-color: #FFD24D;
  background: linear-gradient(135deg,#FFD24D,#E4A92B);
  color: #17263A;
  box-shadow: inset 4px 0 #FFFFFF, 0 8px 20px rgba(255,210,77,.18);
}
/* Р-372 · Золото главного действия ушло кнопке перехода к следующей задаче.
   «Show move» — инструмент, и цвет у него голубой, как у подсказки первого
   экрана (Р-312). Двух золотых кнопок в одной панели не бывает (С8). */
#lab-analyse-position { border-color:#FFD24D; background:linear-gradient(135deg,#FFD24D,#E5A82C); color:#17263A; }
#position-lab-solution,
#position-lab-retry,
#lab-puzzle-copy-fen,
#lab-puzzle-copy-pgn,
#lab-start-position,
#lab-clear-board { border-color:rgba(87,199,255,.48); background:linear-gradient(135deg,#19365b,#122744); color:#FFFFFF; }
.lab-task-meta { color:#57C7FF; }

/* Р-135 · Participate — три коротких портала. Реквизиты раскрываются общей
   широкой панелью под ними и сохраняют оба QR и исходную ширину 1320 px. */
.support .support-panel { max-width: 1320px; }
.participation-grid {
  grid-template-columns: repeat(3, minmax(0,1fr));
  align-items: stretch;
  max-width: 1240px;
}
.participation-card.support-step {
  min-height: 310px;
  padding: 26px 22px;
  text-align: center;
}
.participation-card.is-vote { --participation-accent:#63E69A; }
.participation-card.is-follow { --participation-accent:#A855F7; }
.participation-card.is-donate {
  --participation-accent:#FFD24D;
  background:radial-gradient(circle at 50% 0,rgba(255,210,77,.18),transparent 38%),linear-gradient(150deg,#26335d,#142844 70%);
}
.participation-card-head { flex-direction:column; justify-content:center; gap:12px; }
.participation-emblem {
  position:relative;
  display:grid;
  place-items:center;
  width:76px;
  height:76px;
  border:1px solid color-mix(in srgb,var(--participation-accent) 78%,white);
  border-radius:24px;
  background:
    radial-gradient(circle at 32% 24%,rgba(255,255,255,.34),transparent 16%),
    radial-gradient(circle,color-mix(in srgb,var(--participation-accent) 28%,transparent),rgba(10,23,43,.7));
  color:var(--participation-accent);
  font-size:1.65rem;
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.035),inset 0 -12px 22px rgba(0,0,0,.24),0 12px 26px rgba(0,0,0,.38),0 0 24px color-mix(in srgb,var(--participation-accent) 28%,transparent);
  transform:perspective(180px) rotateX(5deg);
}
.participation-card .poll-options { width:min(100%,330px); margin-inline:auto; text-align:left; }
.participation-card .poll-opt { border-color:rgba(99,230,154,.3); background:linear-gradient(90deg,rgba(99,230,154,.1),rgba(35,69,116,.12)); }
.participation-card .participation-coming { margin-top:10px; } /* Р-173 */
.participation-card.is-donate .wallet-gate { justify-content:center; }
/* Р-169 · Реквизиты сворачиваются по высоте за то же время, что и
   растворяются. Прежде блок 0.46 с растворялся, всё это время держал свои
   393 px, а в самом конце получал `hidden` — и страница подпрыгивала на
   393 px за один кадр. Теперь высота, отступ и прозрачность идут одним
   движением, и схлопывать в конце уже нечего. Внешний блок стал пустой
   обоймой, вид коробки переехал на `.wallet-block-inner`: без вложенного
   слоя браузер высоту такого блока плавно не сворачивает. */
.participation-wallet {
  grid-column:1/-1;
  display:grid;
  grid-template-rows:0fr;
  margin-top:0;
  opacity:0;
  transition:grid-template-rows 460ms var(--ease), margin-top 460ms var(--ease), opacity 460ms var(--ease);
}
.participation-wallet.is-open { grid-template-rows:1fr; margin-top:26px; opacity:1; }
.participation-wallet .wallet-block-inner {
  min-height:0;
  overflow:hidden;
  border-radius:18px;
  /* Нижнее поле и грани обоймы сворачиваются вместе с высотой: без этого в
     конце оставались 24 px поля и 2 px граней, и страница дёргалась на 26 px. */
  transition:padding-bottom 460ms var(--ease), border-width 460ms var(--ease);
}
.participation-wallet:not(.is-open) .wallet-block-inner { padding-bottom:0; border-width:0; }
.participation-wallet .wallet { grid-template-columns:repeat(2,minmax(0,1fr)); }
.participation-wallet .wallet-row { background:linear-gradient(135deg,rgba(38,69,119,.72),rgba(16,35,64,.92)); border-color:rgba(255,210,77,.34); }
.participation-wallet .wallet-qr img { width:200px; height:200px; }

@media(max-width:900px){
  .participation-grid{grid-template-columns:1fr}
  .participation-wallet{grid-column:auto}
  .participation-card.support-step{min-height:0}
  .participation-wallet .wallet{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .participation-wallet,
  .participation-wallet .wallet-block-inner { transition:none }
}

/* ==================== v79 ===========================================
   Р-136 · Утверждённый порядок порталов: Follow, Vote, Donate. Цвета слева
   направо: жёлтый, зелёный, индиго. Vote остаётся композиционным центром. */
.participation-card.is-follow { order:1; --participation-accent:#FFD24D; }
.participation-card.is-vote { order:2; --participation-accent:#63E69A; }
.participation-card.is-donate {
  order:3;
  --participation-accent:#8B6CFF;
  background:radial-gradient(circle at 50% 0,rgba(139,108,255,.2),transparent 38%),linear-gradient(150deg,#30255f,#172b50 70%);
}
.participation-wallet { order:4; }

/* Порталы короче: начало широкой панели реквизитов остаётся в поле зрения во
   время раскрытия. Пункты центрального опроса сохраняют удобную цель. */
.participation-card.support-step { min-height:245px; padding:20px 18px; }
.participation-emblem { width:62px; height:62px; border-radius:20px; font-size:1.35rem; }
.participation-card-head { gap:8px; margin-bottom:8px; }
.participation-card-head h3 { font-size:1.25rem; }
.participation-copy { margin-bottom:11px; font-size:.9rem; }
.participation-card .poll-options { gap:5px; }
.participation-card .poll-opt { padding:7px 10px; font-size:.84rem; }
.participation-card .participation-coming { margin-top:8px; }

/* QR входят в раскрываемые реквизиты сразу; отдельный второй шаг отсутствует. */
.participation-wallet .wallet-body { grid-template-columns:minmax(0,1fr) 216px; }
.participation-wallet .wallet-qr { display:grid; }

/* ==================== v80 ===========================================
   Р-137 · Раскрытые реквизиты возвращают компактную геометрию v49: два
   кошелька рядом, сведения слева, QR справа. Вложенные карточные рамки сняты. */
.participation-wallet .wallet-block-inner {   /* Р-169 · вид коробки переехал внутрь */
  padding: 0 26px 24px;
  border: 1px solid rgba(139,108,255,.42);
  background: radial-gradient(circle at 85% 0,rgba(139,108,255,.15),transparent 35%),linear-gradient(145deg,#242d55,#122743 68%);
}
.participation-wallet .wallet-warning {
  width: calc(100% + 52px);
  margin: 0 -26px 24px;
  padding: 12px 24px;
  border: 0;
  border-top: 1px solid rgba(255,210,77,.58);
  border-bottom: 1px solid rgba(255,210,77,.58);
  border-radius: 17px 17px 0 0;
  background: linear-gradient(90deg,rgba(53,39,91,.94),rgba(31,49,88,.96),rgba(53,39,91,.94));
  color: #FFD24D;
  font-size: .95rem;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.participation-wallet .wallet {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 0;
  margin: 0;
}
.participation-wallet .wallet-row {
  display: grid;
  gap: 14px;
  padding: 2px 26px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.participation-wallet .wallet-row + .wallet-row { border-left: 1px solid rgba(157,213,255,.24); }
.participation-wallet .wallet-label {
  display: block;
  padding: 0 0 10px;
  border-bottom: 1px solid rgba(255,210,77,.32);
  color: #FFFFFF;
  font-size: .93rem;
  text-align: center;
}
.participation-wallet .wallet-body {
  display: grid;
  grid-template-columns: minmax(0,1fr) 164px;
  gap: 18px;
  align-items: start;
}
.participation-wallet .wallet-detail {
  grid-column: 1;
  display: grid;
  align-content: start;
  justify-items: stretch;
  gap: 11px;
  min-width: 0;
  text-align: left;
}
.participation-wallet .wallet-detail code {
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-left: 3px solid #FFD24D;
  border-radius: 0 8px 8px 0;
  background: rgba(7,19,36,.58);
  /* Р-161 · Сам счёт белый: его переписывают глазами, и золото здесь мешало.
     Золото осталось кантом слева — оно отмечает строку, а не текст. */
  color: #FFFFFF;
  text-align: left;
  overflow-wrap: anywhere;
}
.participation-wallet .wallet-actions { justify-content: flex-start; }
.participation-wallet .wallet-detail small { color:#C7D8E8; text-align:left; }
.participation-wallet .wallet-qr {
  grid-column: 2;
  grid-row: 1;
  gap: 7px;
  margin: 0;
  justify-items: center;
}
.participation-wallet .wallet-qr img { width:164px; height:164px; padding:8px; background:#FFFFFF; }
.participation-wallet .wallet-qr figcaption { color:#BFD7EA; }

/* Р-138 · Подвал использует одну строку с отдельной цветовой ролью каждого
   юридического элемента. */
.foot-legal { display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:5px 8px; }
/* Р-166 · Нижнюю строку делит тот же ромб, что и весь сайт, только мельче:
   строка служебная и звать к себе права не имеет. Прежние точки `·` тусклым
   золотом на тёмном фоне почти пропадали. */
.foot-legal i { color:var(--spark-mark); font-style:normal; font-size:7px; }
.foot-engine-label { color:#AFC3D6; }
.foot-legal .foot-engine { color:#57C7FF; font-weight:800; }
.foot-by { color:#C8D5E2; }
.foot-by strong { color:#FFFFFF; }
/* Р-176 · Обе открывающиеся записи служебной строки говорят одним холодным
   цветом. Прежде строка была пёстрой: голубая ссылка, золотое «GPL-3.0» и
   сиреневые «Third-party licences». Золото по С8 принадлежит правилам игры и
   главному действию, а не подвалу. */
.foot-legal .foot-source,
.foot-legal .foot-notices { color:#9DD5FF; font-weight:750; }
.legal-dialog-tabs { display:flex; gap:8px; margin-left:auto; }
/* Вкладки лежат на светлой шапке окна Р-154, поэтому выбранная вкладка
   тёмная и плотная, а невыбранная — только в контуре. */
.legal-dialog-tab {
  appearance:none;
  padding:6px 12px;
  border:1px solid rgba(43,58,92,.42);
  border-radius:999px;
  background:transparent;
  color:#2B3A5C;
  font: 700 .8rem/1 var(--font-sans);
  cursor:pointer;
}
.legal-dialog-tab.is-active { border-color:#27364A; background:linear-gradient(180deg,#3B4C64,#27364A); color:#FFFFFF; }
.legal-dialog-tab:not(.is-active):hover { border-color:#27364A; background:rgba(43,58,92,.1); }

@media(max-width:900px){
  .participation-wallet .wallet{grid-template-columns:1fr;gap:22px}
  .participation-wallet .wallet-row{padding:0}
  .participation-wallet .wallet-row + .wallet-row{padding-top:22px;border-left:0;border-top:1px solid rgba(157,213,255,.24)}
}
@media(max-width:560px){
  .participation-wallet .wallet-block-inner{padding-inline:18px}
  .participation-wallet .wallet-warning{width:calc(100% + 36px);margin-inline:-18px}
  .participation-wallet .wallet-body{grid-template-columns:1fr;justify-items:center}
  .participation-wallet .wallet-qr{grid-column:1;grid-row:1}
  .participation-wallet .wallet-detail{grid-column:1;grid-row:2;width:100%}
}

/* ==================== v82 ===========================================
   Р-142 · Participate: названия трёх порталов говорят одним цветом и
   получают ленточную глубину. Цвет карточек и реквизитов v80 сохраняется. */
.participation-card-head small {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  /* Р-207 · Ленты трёх порталов одной ширины в ряду. Слово переводится, а
     ширину задаёт самое длинное слово языка: немецкое `Unterstützung` требует
     157 px, поэтому на немецком все три ленты станут по 157 px. Ряд остаётся
     ровным на любом языке. */
  min-width: var(--ribbon-width, 112px);
  min-height:28px;
  margin:0 0 11px;                     /* Р-168 · было 5 px, названию было тесно */
  padding:7px 18px;
  border-top:1px solid rgba(255,210,77,.55);
  border-bottom:1px solid rgba(255,210,77,.55);
  background:linear-gradient(90deg,transparent,rgba(37,48,91,.96) 18%,#192A4C 50%,rgba(37,48,91,.96) 82%,transparent);
  color:#FFE082;
  text-shadow:0 1px 0 rgba(0,0,0,.48),0 0 10px rgba(255,210,77,.2);
}
/* Р-188 · Строка под заголовком секции говорит холодным светлым голубым.
   Он остаётся выразительным, но уступает белому заголовку выше: у белого на
   этом фоне контраст около 15, у этого — около 11. Порядок чтения задаёт цвет,
   а не только кегль. Тот же голубой уже работает в служебной строке подвала. */
.support-head-lead {
  color:#9DD5FF;
  font-weight:750;
  text-shadow:0 1px 1px rgba(0,0,0,.42),0 0 16px rgba(87,199,255,.16);
}

/* Р-143 · Варианты опроса сохраняют компактность, но получают мягкий контур
   и читаются как отдельные цели выбора. */
.participation-card .poll-opt {
  border-radius:15px;
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 3px 9px rgba(0,0,0,.16);
  transition:border-color 220ms var(--ease),background 220ms var(--ease),box-shadow 220ms var(--ease),transform 180ms var(--ease);
}
.participation-card .poll-opt:hover {
  transform:translateY(-1px);
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 5px 13px rgba(0,0,0,.22);
}

/* Р-144 · Кнопка реквизитов выглядит как главное физическое действие. */
.wallet-gate-btn {
  padding:13px 24px;
  border:1px solid #FFE082;
  border-radius:16px;
  background:linear-gradient(180deg,#FFE477 0%,#F5BF35 52%,#C88312 100%);
  color:#211A08;
  font-weight:900;
  text-shadow:0 1px rgba(255,255,255,.48);
  box-shadow:inset 0 2px rgba(255,255,255,.58),inset 0 -2px rgba(97,55,0,.18),0 5px 0 #8B570B,0 10px 22px rgba(0,0,0,.3);
  transition:transform 180ms var(--ease),filter 220ms var(--ease),box-shadow 180ms var(--ease);
}
.wallet-gate-btn:hover { transform:translateY(-1px); filter:brightness(1.045); }
.wallet-gate-btn:active { transform:translateY(3px); box-shadow:inset 0 2px rgba(255,255,255,.4),0 2px 0 #8B570B,0 5px 10px rgba(0,0,0,.24); }

/* Р-145 (переписано в Р-163) · Общий физический слой получают названные
   органы управления Practice, а не всё, что размечено тегом `button`.
   Прежний отбор `button:not(.lab-seal):not(.lab-board-alert)` доставал и до
   64 полей доски, и до строк нотации: поля несли по четыре лишних тени, а
   строки записи приподнимались под курсором, как кнопки. Исключения и
   контрправила больше не нужны — список ниже и есть список кнопок. */
.position-lab .lab-mode button,
.position-lab .lab-puzzle-levels button,
.position-lab .lab-puzzle-next,
.position-lab .lab-transport .demo-control,
.position-lab .lab-actions .btn,
.position-lab .lab-editor-commands .btn,
.position-lab .lab-editor-tools button,
.position-lab .lab-piece-row button,
.position-lab .lab-io-row .btn,
.position-lab .lab-example-list button,
.position-lab .lab-promotion button {
  box-shadow:inset 0 1px rgba(255,255,255,.2),inset 0 -2px rgba(0,0,0,.18),0 3px 0 rgba(4,13,26,.72),0 7px 14px rgba(0,0,0,.2);
  transition:transform 180ms var(--ease),filter 220ms var(--ease),box-shadow 180ms var(--ease),color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.position-lab .lab-mode button:hover,
.position-lab .lab-puzzle-levels button:hover,
.position-lab .lab-puzzle-next:hover,
.position-lab .lab-transport .demo-control:hover,
.position-lab .lab-actions .btn:hover,
.position-lab .lab-editor-commands .btn:hover,
.position-lab .lab-editor-tools button:hover,
.position-lab .lab-piece-row button:hover,
.position-lab .lab-io-row .btn:hover,
.position-lab .lab-example-list button:hover,
.position-lab .lab-promotion button:hover { transform:translateY(-1px); filter:brightness(1.07); }
.position-lab .lab-mode button:active,
.position-lab .lab-puzzle-levels button:active,
.position-lab .lab-puzzle-next:active,
.position-lab .lab-transport .demo-control:active,
.position-lab .lab-actions .btn:active,
.position-lab .lab-editor-commands .btn:active,
.position-lab .lab-editor-tools button:active,
.position-lab .lab-piece-row button:active,
.position-lab .lab-io-row .btn:active,
.position-lab .lab-example-list button:active,
.position-lab .lab-promotion button:active { transform:translateY(2px); box-shadow:inset 0 1px rgba(255,255,255,.14),0 1px 0 rgba(4,13,26,.78),0 3px 7px rgba(0,0,0,.2); }
.position-lab .lab-mode button:disabled,
.position-lab .lab-puzzle-levels button:disabled,
.position-lab .lab-puzzle-next:disabled,
.position-lab .lab-transport .demo-control:disabled,
.position-lab .lab-actions .btn:disabled,
.position-lab .lab-editor-commands .btn:disabled,
.position-lab .lab-editor-tools button:disabled,
.position-lab .lab-piece-row button:disabled,
.position-lab .lab-io-row .btn:disabled,
.position-lab .lab-example-list button:disabled,
.position-lab .lab-promotion button:disabled {
  /* Выключенная кнопка не приподнимается, не дышит и не отбрасывает объёмной
     тени. Приглушение цвета живёт одной строкой выше по файлу, у общего
     правила `.position-lab .btn:disabled`, и здесь не повторяется. */
  transform:none;
  animation:none;
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 1px 3px rgba(0,0,0,.16);
}

/* Р-146 · Ссылка автора продолжает тот же объёмный язык действий. */
.author-links .btn {
  border:1px solid #FFE082;
  border-radius:15px;
  background:linear-gradient(180deg,#FFE477,#F2B72F 55%,#C47D10);
  color:#211A08;
  font-weight:900;
  text-shadow:0 1px rgba(255,255,255,.45);
  box-shadow:inset 0 2px rgba(255,255,255,.56),inset 0 -2px rgba(91,49,0,.18),0 5px 0 #865208,0 11px 22px rgba(0,0,0,.27);
  transition:transform 180ms var(--ease),filter 220ms var(--ease),box-shadow 180ms var(--ease);
}
.author-links .btn:hover { transform:translateY(-1px); filter:brightness(1.045); }
.author-links .btn:active { transform:translateY(3px); box-shadow:inset 0 2px rgba(255,255,255,.38),0 2px 0 #865208,0 5px 10px rgba(0,0,0,.22); }

/* Р-147 · Нижний лозунг возвращает композицию верхнего: спокойная строка,
   выразительный ромб и тонкая лента в собственной холодной палитре.
   Мятный ромб `#7DE8D8` снят в Р-165: он был перебит Р-153 ещё в v84 и до
   экрана никогда не доходил. */
.foot-slogan {
  border-color:rgba(94,234,212,.42);
  background:linear-gradient(90deg,transparent,rgba(14,86,94,.28) 20%,rgba(19,67,87,.5) 50%,rgba(14,86,94,.28) 80%,transparent);
  color:#DDFBF6;
  font-weight:650;
  letter-spacing:.055em;
  text-shadow:0 1px 1px rgba(0,0,0,.38);
}

@media(prefers-reduced-motion:reduce){
  .participation-card .poll-opt,
  .wallet-gate-btn,
  .position-lab .lab-mode button,
  .position-lab .lab-transport .demo-control,
  .position-lab .lab-actions .btn,
  .position-lab .lab-editor-commands .btn,
  .position-lab .lab-editor-tools button,
  .position-lab .lab-piece-row button,
  .position-lab .lab-io-row .btn,
  .position-lab .lab-example-list button,
  .position-lab .lab-promotion button,
  .author-links .btn { transition:none }
}

/* ==================== v83 ===========================================
   Р-149 снято в Р-163. Оно гасило объём, который Р-145 навешивал на строки
   нотации; теперь объём туда не попадает, и гасить нечего. Собственный вид
   записи задан там же, где вся нотация. */

/* Р-150 · Один нейтральный язык порталов: холодный светлый текст и ромбы
   контрастируют со всеми тремя цветовыми поверхностями. */
.participation-card-head small {
  position:relative;
  min-width: var(--ribbon-width, 124px);
  border:0;
  background:#172846;
  color:#F4FAFF;
  text-shadow:0 1px 1px rgba(0,0,0,.5);
}
.participation-card-head small::before,
.participation-card-head small::after,
.foot-slogan::before,
.foot-slogan::after {
  content:"";
  position:absolute;
  left:5%;
  right:5%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(157,213,255,.78) 22%,rgba(244,250,255,.92) 50%,rgba(157,213,255,.78) 78%,transparent);
}
.participation-card-head small::before,.foot-slogan::before { top:0; }
.participation-card-head small::after,.foot-slogan::after { bottom:0; }
.participation-card-head > .participation-emblem {
  color:#F4FAFF;
  border-color:rgba(244,250,255,.82);
  text-shadow:0 1px 2px rgba(0,0,0,.72);
  filter:drop-shadow(0 0 9px rgba(157,213,255,.62));
}

/* Р-151 · Более точный селектор снимает старое плоское правило v49. */
.participation-card .btn.wallet-gate-btn {
  padding:13px 24px;
  border:1px solid #FFE082;
  border-radius:17px;
  background:linear-gradient(180deg,#FFE98A 0%,#F7C83E 48%,#C98210 100%);
  color:#211A08;
  font-weight:900;
  text-shadow:0 1px rgba(255,255,255,.52);
  box-shadow:inset 0 2px rgba(255,255,255,.68),inset 0 -2px rgba(97,55,0,.2),0 5px 0 #895409,0 11px 23px rgba(0,0,0,.34);
}
.participation-card .btn.wallet-gate-btn:hover { background:linear-gradient(180deg,#FFF09D,#FFD04E 48%,#D38C16); border-color:#FFF0A3; transform:translateY(-1px); }
.participation-card .btn.wallet-gate-btn:active { transform:translateY(3px); box-shadow:inset 0 2px rgba(255,255,255,.42),0 2px 0 #895409,0 5px 10px rgba(0,0,0,.24); }

/* Р-152 · Лента предупреждения живёт строго внутри панели. */
.participation-wallet .wallet-warning {
  box-sizing:border-box;
  width:100%;
  margin:0 0 24px;
  border-radius:12px;
  color:#FFFFFF;
}
.participation-wallet .wallet-label { color:#FFFFFF; }
.participation-wallet .wallet-actions .btn {
  border:1px solid #69DCD5;
  border-radius:12px;
  background:linear-gradient(180deg,#31B9B2,#1B8988 55%,#0D5A62);
  color:#FFFFFF;
  font-weight:850;
  box-shadow:inset 0 1px rgba(255,255,255,.34),inset 0 -2px rgba(0,0,0,.18),0 4px 0 #083E46,0 8px 16px rgba(0,0,0,.24);
}
.participation-wallet .wallet-actions .btn:active { transform:translateY(2px); box-shadow:inset 0 1px rgba(255,255,255,.2),0 2px 0 #083E46,0 4px 8px rgba(0,0,0,.2); }

/* Р-153 · Лозунг имеет одну золотую идентичность сверху и снизу. Фон
   подвала остаётся холодным, линии растворяются как подчёркивание меню. */
.foot-slogan {
  position:relative;
  border:0;
  background:linear-gradient(90deg,transparent,rgba(31,47,77,.55) 20%,rgba(24,40,69,.78) 50%,rgba(31,47,77,.55) 80%,transparent);
  color:#FFD86A;
  font-weight:650;
}
.foot-slogan i { color:var(--spark-mark); filter:drop-shadow(0 0 7px rgba(87,199,255,.48)); } /* Р-165 */
.foot-slogan::before,.foot-slogan::after { background:linear-gradient(90deg,transparent,rgba(255,210,77,.56) 25%,rgba(255,232,154,.88) 50%,rgba(255,210,77,.56) 75%,transparent); }

/* Р-154 · Юридическое окно повторяет светлую лавандовую пломбу Practice:
   тёмная страница остаётся позади, документ всегда расположен по центру. */
.legal-dialog {
  width:min(760px,calc(100vw - 36px));
  height:min(80dvh,760px);
  max-width:760px;
  margin:auto;
  border:2px solid #8E79B8;
  border-radius:18px;
  background:linear-gradient(145deg,#F2F1F7,#DED9EA);
  color:#17263A;
  box-shadow:0 24px 70px rgba(0,0,0,.48),inset 0 0 0 3px rgba(255,255,255,.5);
}
.legal-dialog-head {
  padding:17px 20px;
  border-bottom:1px solid rgba(85,71,118,.3);
  background:linear-gradient(145deg,#F2F1F7,#DED9EA);
}
.legal-dialog-head h2 { margin:0; color:#17263A; }
.legal-dialog-close {
  border-color:#8E79B8;
  background:linear-gradient(180deg,#3B4C64,#27364A);
  color:#FFFFFF;
}
.legal-dialog-frame { background:#F7F8FC; color:#17263A; }

/* ==================== v84 ===========================================

/* Р-156 · Цвет портала возвращён его объёмной эмблеме. Общей остаётся только
   наполненная сердцевина-ромб. */
.participation-card-head > .participation-emblem {
  color:var(--participation-accent);
  border-color:color-mix(in srgb,var(--participation-accent) 78%,white);
  filter:drop-shadow(0 0 9px color-mix(in srgb,var(--participation-accent) 38%,transparent));
  font-size:0;
}
.participation-emblem::after {
  content:"◆";
  color:#F4FAFF;
  font-size:1.28rem;
  text-shadow:0 1px 2px rgba(0,0,0,.72);
}

/* Р-157 · Предупреждение — изумрудная лента внутри реквизитов. Фон и тонкие
   грани растворяются к концам, бело-мятный текст держит высокий контраст. */
.participation-wallet .wallet-warning {
  position:relative;
  width:100%;
  margin:0 0 24px;
  padding:13px 28px;
  border:0;
  border-radius:0;
  background:linear-gradient(90deg,transparent 0%,rgba(7,91,77,.88) 11%,#087F6B 50%,rgba(7,91,77,.88) 89%,transparent 100%);
  color:#F2FFF9;
  font-weight:850;
  text-shadow:0 1px 1px rgba(0,0,0,.55);
  box-shadow:none;
}
.participation-wallet .wallet-warning::before,
.participation-wallet .wallet-warning::after {
  content:"";
  position:absolute;
  left:4%;
  right:4%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(116,255,211,.72) 24%,rgba(213,255,239,.88) 50%,rgba(116,255,211,.72) 76%,transparent);
}
.participation-wallet .wallet-warning::before { top:0; }
.participation-wallet .wallet-warning::after { bottom:0; }

/* Р-158 · Выбранный Author №7: растворяющиеся ленты, контрастное имя и
   строгие ювелирные ромбы. Блеск заменён сатиновым градиентом и чётким ребром. */
#author-title {
  color:#FFFFFF;
  text-shadow:0 2px 2px rgba(0,0,0,.46),0 0 18px rgba(255,255,255,.1);
}
/* Р-174 · Правая часть начинается на 14 px ниже верхнего края фото: колонки
   перестают стоять «в стык» и читаются как снимок и подпись к нему. Зазор
   между фактами уменьшен ровно на столько же, чтобы низ колонок сошёлся. */
.author-copy { padding-top:14px; }
.author-copy .author-facts { display:grid; gap:16px; margin:0 0 21px; } /* Р-167, Р-174 */
.author-copy .author-facts li {
  --author-accent:#FFD24D;             /* Р-167 */
  display:grid;
  grid-template-columns:56px minmax(0,1fr);   /* Р-187 · было 42 px */
  align-items:center;
  min-height:50px;                     /* Р-167 */
  /* Р-187 · Ромб отодвинут от начала ленты, текст — от её конца. Прежде метка
     начиналась в 5 px от края, а строка обрывалась в 14 px: лента выглядела
     набитой до краёв. Теперь по 18 px с обеих сторон. */
  padding:10px 18px 10px 0;
  border-top:1px solid color-mix(in srgb,var(--author-accent) 50%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--author-accent) 28%,transparent);
  border-radius:0;
  background:linear-gradient(90deg,color-mix(in srgb,var(--author-accent) 21%,#14283F),rgba(20,40,63,.68) 72%,transparent);
  color:#D7E8F4;
  font-size:1rem;
  font-weight:750;
  line-height:1.4;
}
/* Р-167 · Метки берут три цвета порталов Participate: жёлтый Follow,
   зелёный Vote, индиговый Donate. Один набор на две секции. */
.author-copy .author-facts li:nth-child(2) { --author-accent:#63E69A; }
.author-copy .author-facts li:nth-child(3) { --author-accent:#8B6CFF; }
.author-copy .author-facts li::before {
  content:"";
  position:relative;
  left:auto;
  top:auto;
  display:grid;
  place-items:center;
  width:19px;                          /* Р-167 · в 1.5 раза меньше 29 px */
  height:19px;
  margin-left:18px;                    /* Р-187 · было 5 px */
  border:1px solid color-mix(in srgb,var(--author-accent) 70%,#DCE8F2);
  border-radius:4px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--author-accent) 88%,#BFD7EA),var(--author-accent) 52%,color-mix(in srgb,var(--author-accent) 72%,#071827));
  box-shadow:inset 0 1px rgba(255,255,255,.2),inset 0 -2px rgba(0,0,0,.28),0 3px 0 color-mix(in srgb,var(--author-accent) 48%,#071827),0 7px 13px rgba(0,0,0,.28);
  transform:rotate(45deg);
}
.author-copy > p {
  color:#E8F2FA;
  font-size:1.02rem;
  font-weight:650;
  line-height:1.65;
  text-shadow:0 1px 1px rgba(0,0,0,.36);
}

/* ==================== v90 ===========================================
   Р-189 · Телефон. Правила Р-25 и Р-34 задают раскладку «Партии» и лежат в
   файле ниже медиазапроса ≤980 px, поэтому перебивали его: на узком экране
   раскладка оставалась двухколонной с минимумом 440 px, доска выходила за край
   и обрезалась. Ошибка того же рода, что записана в start_Claude.md под
   номером 6 — позднее правило бьёт медиазапрос выше. Правило-восстановление
   стоит последним, поэтому побеждает по порядку. */
@media (max-width: 980px) {
  .demo-game-layout { grid-template-columns: minmax(0, 1fr); }
  .demo-board-column { max-width: 560px; width: 100%; margin-inline: auto; }
  .demo-story { max-width: 760px; width: 100%; margin-inline: auto; }
}

/* Р-190 · Мелкие подписи на телефоне. Подзаголовок баннера доски опускался до
   9.6 px, легенда и подписи ползунка — до 10–11.8 px. Это ниже предела
   читаемости на маленьком экране. Кегль поднят только на узких ширинах;
   на настольном экране размеры прежние. */
@media (max-width: 820px) {
  .board-brand-subtitle { font-size: .72rem; letter-spacing: .1em; }
  .demo-legend, .demo-legend .legend-item, .demo-legend span { font-size: .78rem; }
}

/* Р-191 · Метка очереди хода в «Практике» стояла за правым краем доски со
   смещением −24 px и на телефоне обрезалась краем экрана на 4 px. Смещение
   уменьшено ровно настолько, чтобы метка помещалась целиком и по-прежнему не
   налезала на доску. */
@media (max-width: 560px) {
  .lab-turn-indicator { right: 1px; }
}
/* Р-193 · Языки завершают навигацию. На узком экране список раскрывается
   внутри мобильного меню и не отнимает место у бренда и кнопки меню. */
.language-switcher {
  position: relative;
  align-self: center;
  margin-left: auto;
  padding-left: clamp(14px, 1.6vw, 26px);
  border-left: 1px solid rgba(157, 213, 255, .2);
  color: var(--text-bright);
}
.language-switcher summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid rgba(157, 213, 255, .34);
  border-radius: 9px;
  color: #9DD5FF;
  font: 700 12px/1 var(--font-sans);
  /* Р-200 · Ширина кнопки языка постоянна. Флаги разных стран отрисовываются
     неодинаково широко, и от смены языка кнопка съезжала на несколько
     пикселей, утаскивая за собой правый край меню. */
  min-width: 74px;
  justify-content: center;
  letter-spacing: .08em;
  list-style: none;
  cursor: pointer;
}
.language-switcher summary::-webkit-details-marker { display: none; }
.language-switcher summary::after { content: "▾"; font-size: 10px; }
.language-switcher[open] summary::after { transform: rotate(180deg); }
.language-switcher summary:hover,
.language-switcher summary:focus-visible {
  border-color: var(--gold);
  color: var(--text-bright);
}
.language-options {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 70;
  display: grid;
  /* Р-196 · Фон — индиговый сатин сайта, тот же, что у пломбы: список читается
     как карточка сайта, а не как чужое окно.
     Р-200 · Ширина подвижная: самоназвания восьми языков различаются по длине,
     и жёсткое число оставляло то пустоту, то тесноту. */
  width: max-content;
  min-width: 208px;
  max-width: 268px;
  padding: 7px;
  border: 1px solid rgba(157, 213, 255, .42);
  border-radius: 12px;
  background: linear-gradient(160deg, #2A4877 0%, #1B3054 62%, #16273F 100%);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}
.language-options [data-language] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 7px;
  color: var(--text-bright);
  font: 600 13px/1.2 var(--font-sans);
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  width: 100%;
}
.language-options [data-language][aria-current="page"] {
  background: rgba(157, 213, 255, .13);
  color: #9DD5FF;
}
.language-options [data-language]:hover,
.language-options [data-language]:focus-visible { background: rgba(157, 213, 255, .09); }
/* Р-196 · Гость читает самоназвание языка, а не двухбуквенный код, поэтому
   белым набрано именно оно. Код остаётся холодным голубым и вторым по силе:
   на выбранном пункте он совпадает с кантом. Контраст самоназвания к фону
   списка — около 12, кода — около 7. */
.language-options [data-language] > span { color: #9DD5FF; font-weight: 700; font-size: 12px; }
.language-options small {
  color: #FFFFFF;
  font: 650 13px/1.2 var(--font-sans);
  text-align: right;
}
.language-options [data-language][aria-current="page"] small { color: #FFFFFF; }

/* Р-206 · Порог гамбургера поднят с 1100 до 1260 px: между 1101 и 1260 меню
   не помещалось в строку ни на одном языке, включая английский. */
@media (max-width: 1260px) {
  .top .wrap { flex-wrap: wrap; }
  .top nav {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    padding: 12px 0 16px;
    border-top: 1px solid var(--border);
    margin-left: 0;
    margin-top: 8px;
  }
  .top nav.open { display: flex; }
  .top nav > a { padding: 10px 0; }
  .navtoggle { display: flex; }
  .language-switcher {
    width: 100%;
    margin: 10px 0 0;
    padding: 12px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(157, 213, 255, .2);
  }
  .language-switcher summary { justify-content: center; width: 100%; min-height: 44px; }
  .language-options {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin-top: 8px;
    box-shadow: none;
  }
}

@media (max-width: 420px) {
  .language-options { grid-template-columns: 1fr; }
}

/* ==================== v94 ===========================================
   Р-197 · Жизнь в порталах «Участия». Волна идёт слева направо: Follow, Vote,
   Donate вступают со сдвигом в треть цикла. Цикл 5.5 с — темп спокойного
   сосредоточенного дыхания. Меняется только свет по канту и глубина тени;
   размер и положение неподвижны. Пульсация размера читается как дёрганье, а
   не как дыхание — на этом мы уже обжигались с кнопками.
   При наведении портал делает один вдох поглубже и остаётся приподнятым. */
/* Р-199 · Цветная полоса слева — часть утверждённого вида портала, она задана
   внутренней тенью `inset 4px 0`. В Р-197 дыхание переписывало `box-shadow`
   целиком и полосу стирало. Теперь полоса стоит в каждом кадре, а дышит только
   то, что вокруг неё. */
@keyframes portal-breath {
  0%, 100% {
    border-color: color-mix(in srgb, var(--participation-accent) 46%, transparent);
    box-shadow:
      inset 4px 0 0 0 var(--participation-accent),
      0 14px 30px rgba(5, 11, 22, .34);
  }
  50% {
    border-color: color-mix(in srgb, var(--participation-accent) 88%, white 6%);
    box-shadow:
      inset 4px 0 0 0 var(--participation-accent),
      0 16px 36px rgba(5, 11, 22, .38),
      0 0 22px color-mix(in srgb, var(--participation-accent) 26%, transparent);
  }
}
.participation-card {
  transition: transform 460ms var(--ease), box-shadow 460ms var(--ease);
  animation: portal-breath 5.5s var(--ease) infinite both;
}
.participation-card.is-follow { animation-delay: 0s; }
.participation-card.is-vote { animation-delay: 1.83s; }
.participation-card.is-donate { animation-delay: 3.66s; }
.participation-card:hover,
.participation-card:focus-within {
  animation-play-state: paused;
  transform: translateY(-3px);
  box-shadow:
    inset 4px 0 0 0 var(--participation-accent),
    0 22px 44px rgba(5, 11, 22, .44),
    0 0 30px color-mix(in srgb, var(--participation-accent) 34%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .participation-card { animation: none; }
  .participation-card:hover, .participation-card:focus-within { transform: none; }
}
/* ==================== v96 ===========================================
   Р-201 · Составные строки разобраны на части, чтобы каждый текстовый узел
   совпадал с ключом словаря. Тире между фактом и пояснением было частью текста
   и мешало переводу — теперь его рисует стиль, а не буква.
   Р-367 · Конец этого комментария и три правила приглашения восстановлены:
   в круге v116 чистка сняла мёртвое правило `.trust-static .trust-tail::before`
   вместе с закрывающим знаком комментария, и всё до следующего комментария ушло внутрь
   комментария. Из-за этого на доске «Позиции» показывались обе подписи разом —
   «Select any white piece» и «Select a piece». */
.board-invite .invite-narrow { display: none; }
@media (max-width: 620px) {
  .board-invite .invite-wide { display: none; }
  .board-invite .invite-narrow { display: inline; }
}

/* Р-202 · Длина слова меняется от языка к языку. На узком экране немецкие,
   испанские, португальские и русские подписи вкладок «Практики» не помещались
   в кнопку и обрезались: у кнопки стоял запрет переноса. Перенос разрешён,
   строка кнопки растёт по высоте, а не режет текст. Лента «Отличий» —
   прокручиваемая полоса, ей достаточно большего минимума. */
@media (max-width: 820px) {
  .lab-mode button {
    white-space: normal;
    line-height: 1.18;
    overflow-wrap: break-word;
  }
  .difference-rail button { min-width: 152px; }
}

/* ==================== v97 ===========================================
   Р-204 · Шрифт приложен к сайту. Прежде вид зависел от того, что стоит у
   гостя: на английской странице система подставляла одно, на китайской —
   другое, и имя автора выглядело по-разному на разных языках. Теперь буквы
   везде одни и те же и приходят с нашего сайта, без обращения к чужим
   серверам.

   Китайские иероглифы намеренно не прикладываются: их шрифт весит 10–16 МБ.
   `unicode-range` отдаёт латиницу и кириллицу нашему Noto, а всё остальное
   письмо оставляет системе. Поэтому имя `Aleksandr Solomachev` выглядит
   одинаково и на английской, и на китайской странице.

   Лицензия SIL Open Font License 1.1, файл `LICENSE-OFL-1.1.txt`. */
@font-face {
  font-family: "Noto Sans Site";
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url("assets/fonts/noto-sans-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Noto Sans Site";
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url("assets/fonts/noto-sans-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Noto Sans Site";
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url("assets/fonts/noto-sans-600-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Noto Sans Site";
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url("assets/fonts/noto-sans-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Noto Sans Site";
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url("assets/fonts/noto-sans-700-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Noto Sans Site";
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url("assets/fonts/noto-sans-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Noto Serif Site";
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url("assets/fonts/noto-serif-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Noto Serif Site";
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url("assets/fonts/noto-serif-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Noto Serif Site";
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url("assets/fonts/noto-serif-700-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Noto Serif Site";
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url("assets/fonts/noto-serif-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==================== v98 ===========================================
   Р-207 · Ленты трёх порталов равняются по самому длинному слову ряда. Ширину
   считает скрипт после перевода: он меряет естественную ширину трёх лент и
   ставит всем общую. Так слово остаётся на языке гостя, а ряд ровный. */

/* Р-208 · Зелёная панель «Отличий» перестала быть плоским пятном. По ней идёт
   редкая сетка наших ромбов — тех самых, что стоят метками по всему сайту.
   Знак едва различим: белый в четыре процента. Цвет остаётся один, пестроты
   не появляется, но плоскость исчезает. Рисунок лежит слоем под содержимым и
   не мешает ни тексту, ни эмблеме. */
.difference-panels { position: relative; isolation: isolate; }
.difference-panels::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Ромб взят настоящий, а не сложенный из полос: две диагональные полосы
     давали шахматную клетку, а нужен наш знак. Плитка 108 px, ромб посередине,
     соседний ряд смещён на половину — сетка получается разрежённой. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='108' height='108'%3E%3Cpath d='M54 30 L74 54 L54 78 L34 54 Z' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='108' height='108'%3E%3Cpath d='M54 30 L74 54 L54 78 L34 54 Z' fill='%23ffffff' fill-opacity='0.035'/%3E%3C/svg%3E");
  background-size: 108px 108px, 108px 108px;
  background-position: 0 0, 54px 54px;
  opacity: .9;
  mask-image: radial-gradient(120% 100% at 78% 62%, #000 12%, rgba(0,0,0,.55) 58%, transparent 88%);
}
.difference-panel { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .difference-panels::after { opacity: .45; } }

/* Р-206 · Шапка держит меню и выбор языка в одной строке на любом языке.
   Прежде перевод удлинял меню, переключатель сваливался вниз, и шапка росла
   с 69 до 81 px — на пяти языках из восьми.

   Первая попытка правки ушла в пустоту: я поправил правило, которое лежит
   внутри медиазапроса для телефона, и на настольном экране оно не работало.
   Правило должно стоять вне медиазапроса и после мобильного слоя — здесь. */
@media (min-width: 1261px) {
  .top .wrap { flex-wrap: nowrap; }
  .top nav {
    flex-wrap: nowrap;
    min-width: 0;
    gap: clamp(8px, .9vw, 18px);
  }
  .top nav > a { white-space: nowrap; }
}

/* Р-206 (продолжение) · Между гамбургером и широким экраном меню на длинных
   языках упиралось в край. Немецкие и русские пункты в сумме на сотню пикселей
   длиннее английских. В этой полосе ширин пункты набираются чуть мельче и
   плотнее — на глаз перемена незаметна, а строка перестаёт выходить за экран. */
@media (min-width: 1261px) and (max-width: 1460px) {
  .top nav > a { font-size: .76rem; letter-spacing: .05em; }
  .top nav { gap: 4px; }
  .top nav > a { padding-inline: 6px; }
  .language-switcher { padding-left: 10px; }
}


/* Р-211 · Кнопки Copy и Paste в «Анализировать» на телефоне. При узком экране
   они делят одну строку с полем и сжимаются до ширины, в которую слово не
   влезает: по-русски «Копировать», по-немецки «Kopieren», по-китайски «复制» —
   все обрезались. Теперь до 820 px обе кнопки занимают отдельную строку
   пополам, а перенос слова разрешён. Порог 620 px оказался мал: на планшете
   768 px русские подписи резались по-прежнему. Проверено на восьми языках. */
@media (max-width: 820px) {
  .lab-io-row { grid-template-columns: 48px minmax(0, 1fr); }
  .lab-io-row .btn {
    grid-column: span 1;
    min-width: 0;
    white-space: normal;
    line-height: 1.15;
    overflow-wrap: anywhere;
    padding-inline: 8px;
  }
  .lab-io-row .btn:nth-of-type(1) { grid-column: 1 / 2; }
  .lab-io-row .btn:nth-of-type(2) { grid-column: 2 / 3; }
}

/* Р-212 · Записи служебной строки подвала на телефоне были высотой 22 px —
   в такую цель пальцем попадают через раз. На узком экране им дан вертикальный
   запас до 38 px. Вид на настольном экране не меняется. */
@media (max-width: 820px) {
  .foot-legal { gap: 6px 10px; }
  .foot-legal .foot-engine,
  .foot-legal .foot-source,
  .foot-legal .foot-notices {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding-inline: 4px;
  }
}

/* Р-213 · Совсем узкий экран, 320 px. Карточка «Отличий» стояла в две колонки:
   эмблема слева, список справа. На немецком, где слова длиннее, список уходил
   за край на 18 px. При такой ширине колонки складываются в одну — эмблема
   сверху, текст под ней. Проверено на восьми языках. */
@media (max-width: 360px) {
  .difference-panel { grid-template-columns: 1fr; gap: 14px; padding: 18px 14px; }
  .difference-symbol { width: 64px; font-size: 40px; margin-inline: auto; }
  .difference-panel ul { padding-left: 18px; }
}

/* Р-215 · Отклик вкладок «Отличий» на наведение. После Р-182, когда столбец
   стал индиговым, у кнопок не осталось ни одного правила `:hover` — палец
   ведёт мышью, а карточка молчит. Отклик сделан тем же языком, что и у
   порталов: кант светлеет, появляется мягкое свечение, карточка чуть выходит
   вправо. Выбранная карточка остаётся золотой и на наведение не реагирует —
   она уже выбрана. */
.difference-rail button:hover,
.difference-rail button:focus-visible {
  border-color: rgba(157, 213, 255, .72);
  background: linear-gradient(150deg, #3A6AAE, #24446F);
  box-shadow: 0 0 0 1px rgba(157,213,255,.24), 0 10px 22px rgba(5,11,22,.34);
  transform: translateX(3px);
  outline: none;
}
.difference-rail button:hover::before,
.difference-rail button:focus-visible::before {
  background: var(--spark-mark);
  box-shadow: 0 0 10px rgba(87,199,255,.7);
}
.difference-rail button[aria-selected="true"]:hover,
.difference-rail button[aria-selected="true"]:focus-visible {
  background: linear-gradient(150deg, rgba(255, 210, 77, .3), rgba(255, 168, 46, .16));
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(255,210,77,.3), 0 10px 22px rgba(5,11,22,.34);
}
@media (prefers-reduced-motion: reduce) {
  .difference-rail button:hover,
  .difference-rail button:focus-visible { transform: none; }
}

/* Р-214 · Заголовок разбора на посветлевшей карточке. Прежний `#22D3EE` был
   подобран под почти чёрный фон и на новом выцветал. Взяты светлые оттенки тех
   же двух семейств: бирюзовый у Spark Move, золотой у обычного хода. Тёмный
   заголовок здесь не годится — карточка сама средней светлоты, и тёмное на ней
   давало контраст меньше двух. */
.demo-status h3 { color: #9CF4FF; }
.demo-status.is-ordinary h3 { color: var(--seal-text-dim); }
.demo-note .demo-note-label { color: #FFFFFF; }
.demo-status p:not(.eyebrow) { color: #FFFFFF; }
.demo-status code { background: rgba(6,20,40,.34); color: #EAF4FF; }
.demo-status a { color: var(--gold); }


/* ===================== круг v113 · рамки и лента ===================== */
/* Р-287 · Доска «Практики» получила внешний пустой контур — тот же, что у
   доски «Партии» (`.demo-stage`). Внутренний контур с разметкой у неё уже был
   (Р-283), и теперь обе доски устроены одинаково: пустой контур, контур с
   разметкой, поле. */
.lab-board-frame {
  box-sizing: border-box;
  width: 100%;
  padding: 20px;
  border: 1px solid var(--border-light);
  border-radius: calc(var(--radius) * 1.6);
  background: rgba(10, 14, 18, .74);
  box-shadow: 0 30px 75px rgba(0, 0, 0, .4);
}

/* Р-302 · Заголовок разбора в «Партии» — лента, как в реквизитах «Участия» и
   в порталах: канты сверху и снизу, индиговая заливка, белые полужирные буквы.
   Вид один у обычного хода и у Spark Move: разница между ними сказана словом,
   а не цветом. Лента уже карточки на 16 px с каждой стороны — иначе она
   читалась бы вторым разделителем секции, а не заголовком пояснения. */
.demo-status h3,
.demo-status.is-ordinary h3 {
  position: relative;
  margin: 0 -8px 14px;
  padding: 9px 16px;
  border-top: 1px solid rgba(99, 230, 154, .55);
  border-bottom: 1px solid rgba(99, 230, 154, .55);
  background: linear-gradient(90deg, #1B3A56, #24507A, #1B3A56);
  color: #FFFFFF;
  font-size: 1.18rem;
  font-weight: 850;
  letter-spacing: .01em;
  text-align: center;
}


/* ===================== круг v114 · ленты, уровни, нотация ===================== */

/* Р-304 · Нажатая карточка «Отличий» взяла вид кнопок «Copy FEN»: бирюзовая
   заливка, светлый кант, белые буквы. Прежде выбранной была почти прозрачная
   золотая плёнка — на индиговом столбце она читалась тёмной, и выбор угадывался
   только по голубой лампочке. Бирюза на сайте уже значит «орган управления», а
   золото остаётся главному действию (С8). Лампочка у нажатой белая: голубая на
   бирюзе гаснет. */
.difference-rail button[aria-selected="true"] {
  border-color: #36AAA6;
  background: linear-gradient(180deg, #25A29E 0%, #187D7D 52%, #0D575F 100%);
  color: #FFFFFF;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .3),
    0 6px 0 #083E46,
    0 10px 20px rgba(0, 0, 0, .3);
}
.difference-rail button[aria-selected="true"]::before {
  background: #FFFFFF;
  box-shadow: 0 0 10px rgba(255, 255, 255, .85);
}
.difference-rail button[aria-selected="true"]:hover,
.difference-rail button[aria-selected="true"]:focus-visible {
  border-color: #5FD0CB;
  background: linear-gradient(180deg, #2CB4AF 0%, #1B8C8C 52%, #10646D 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    0 6px 0 #083E46,
    0 10px 22px rgba(5, 11, 22, .34);
}

/* Р-305 · Заголовок «Allowed area» набран лентой — той же, что предупреждение
   в реквизитах «Участия». Заголовки пояснений на сайте оформлены одинаково, и
   эта строка была последней, набранной по-своему. Лента растворяется к концам:
   у неё нет кантов по бокам, и она читается заголовком, а не плашкой. */
.pawn-area { overflow: hidden; }
.pawn-area strong {
  position: relative;
  display: block;
  margin: -14px -16px 12px;
  padding: 9px 22px;
  background: linear-gradient(90deg, transparent 0%, rgba(7, 91, 77, .88) 11%, #087F6B 50%, rgba(7, 91, 77, .88) 89%, transparent 100%);
  color: #F2FFF9;
  font: 850 13px/1.2 var(--font-sans);
  letter-spacing: .035em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .55);
}
.pawn-area strong::before,
.pawn-area strong::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(116, 255, 211, .72) 24%, rgba(213, 255, 239, .88) 50%, rgba(116, 255, 211, .72) 76%, transparent);
}
.pawn-area strong::before { top: 0; }
.pawn-area strong::after { bottom: 0; }

/* Р-306 · Заголовок разбора хода в «Партии» взял ленту реквизитов целиком:
   тот же изумруд, то же растворение к концам, те же волосяные грани внутри.
   Круг v113 (Р-302) дал ленте индиговую заливку и жёсткие канты во всю
   ширину — концы обрубались, и лента читалась вторым разделителем секции.
   Ширина прежняя: на 16 px уже карточки. Вид один у обычного хода и у
   Spark Move — разница между ними сказана словом, а не цветом. */
.demo-status h3,
.demo-status.is-ordinary h3 {
  position: relative;
  margin: 0 -8px 14px;
  padding: 10px 24px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(7, 91, 77, .88) 11%, #087F6B 50%, rgba(7, 91, 77, .88) 89%, transparent 100%);
  color: #F2FFF9;
  font-size: 1.18rem;
  font-weight: 850;
  letter-spacing: .01em;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .55);
  box-shadow: none;
}
.demo-status h3::before,
.demo-status h3::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(116, 255, 211, .72) 24%, rgba(213, 255, 239, .88) 50%, rgba(116, 255, 211, .72) 76%, transparent);
}
.demo-status h3::before { top: 0; }
.demo-status h3::after { bottom: 0; }

/* Р-316 · У нотации появилась подложка со скруглёнными углами. Прежде партия
   лежала прямо на фоне секции, и список ходов был единственным предметом
   «Партии» без своего поля: разбор хода стоит на карточке, доска — в рамке, а
   нотация висела в воздухе. */
.demo-score {
  padding: 14px 14px 12px;
  border: 1px solid rgba(157, 213, 255, .22);
  border-radius: calc(var(--radius) * 1.25);
  background: rgba(10, 22, 38, .72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 14px 30px rgba(4, 10, 20, .32);
}
.demo-score .demo-notation { margin-top: 6px; padding: 0; }

/* Р-317 · Боковые блоки «Позиции» встали по верхнему краю доски. Отступ в
   82 px (Р-126, круг v76) равнял их по середине золотого баннера, а баннер из
   этой секции убран ещё в круге v113 (Р-229): ориентир исчез, а сдвиг остался,
   и обе колонки висели ниже доски без причины. */
.hero-text { margin-top: 0; padding-top: 0; transform: none; }
.explorer { margin-top: 0; }

/* Р-315 · Надзаголовок «Позиции» стоит над обеими колонками и занимает всю
   ширину ряда: сетка секции двухколонная, и без этой строки шапка забрала бы
   первую колонку себе, а доска уехала бы на вторую строку. */
/* Р-332 · Надзаголовок «Позиции» стоит к доске так же близко, как во всех
   остальных секциях. Между словом и доской было 70 px — 26 px своего отступа
   и 44 px зазора сетки; у «Отличий», «Правил» и «Партии» тот же промежуток
   равен 22 px (С21: один строй на весь сайт). Свой отступ снят, зазор строк
   сетки задан отдельно от зазора колонок. */
.hero-head { grid-column: 1 / -1; margin-bottom: 0; }
.hero-inner { row-gap: 22px; }

/* Р-333 · Левый блок «Позиции» встал по середине доски. По верхнему краю он
   равнялся с круга v114 (Р-317), и три строки текста кончались на середине
   доски, а ниже стояла пустота в 195 px. Доска — главный предмет секции, и
   текст держится её середины, а не верхнего угла. */
.hero-text { align-self: center; }

/* Р-318 · Состав числа 34 — отдельная строка под «in chess — 20». Имя
   `Spark Moves` голубое: голубой на сайте значит новые правила (Р-241). */
.hero-split {
  margin: 20px 0 0;
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.hero-split b { color: var(--spark-mark); font-weight: 850; }

/* Р-321 · У полки вкладок «Практики» убрано скругление. Строка вкладок держит
   только нижнюю грань, а скругление в 12 px осталось от прежнего вида, когда
   полка была залитой плашкой (site.css, строка ~986). Браузер честно загибал
   единственную грань в углы: справа над панелью торчал завиток, и казалось,
   что за панелью стоит ещё одна. Слева тот же завиток закрывала первая
   вкладка, поэтому его никто не видел. */
.position-lab .lab-mode { border-radius: 0; }

/* ==================== v116 =========================================== */

/* Р-337 · Метка состояния позиции — один предмет на весь сайт.
   Прежде их было три вида: тёмная плашка с золотым волоском в «Позиции»,
   голубой кант по тёмному на первом экране и золотая заливка после хода.
   Автор назвал две беды разом: залитый оранжевый и залитый голубой кричат,
   а сама плашка залезает на поле доски.
   Теперь плашка индиговая — тот же `--seal-face`, что у окон сайта, — буквы
   белые, а состояние называет точка 7 px слева: синяя до хода, оранжевая
   после (С14). Громкий цвет ужат до мелкой детали, как и просил автор.
   Место: доска сложена из трёх колец — пустой внешний контур 19 px, кольцо
   с разметкой 22 px и само поле. Плашка стоит серединой на верхней линии
   внутреннего кольца: `top: 6px` от внешнего контура. Так она ни на поле
   заходит, ни за внешний контур выступает, и до золотого баннера первого
   экрана остаётся 17 px. Размер взят у «Позиции» — автор назвал его удачным. */
.board-phase {
  position: absolute;
  top: 6px;
  left: 19px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 15px 6px 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: var(--seal-face);
  box-shadow: 0 6px 16px rgba(4, 10, 20, .42);
  color: #FFFFFF;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  backdrop-filter: none;
}
.board-phase::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--move-origin);
  box-shadow: 0 0 8px color-mix(in srgb, var(--move-origin) 60%, transparent);
}
.board-phase[data-phase="before"] {
  background: var(--seal-face);
  border-color: rgba(255, 255, 255, .16);
  color: #FFFFFF;
  box-shadow: 0 6px 16px rgba(4, 10, 20, .42);
}
.board-phase[data-phase="after"] {
  background: var(--seal-face);
  border-color: rgba(255, 255, 255, .16);
  color: #FFFFFF;
  box-shadow: 0 6px 16px rgba(4, 10, 20, .42);
}
.board-phase[data-phase="after"]::before {
  background: var(--move-destination);
  box-shadow: 0 0 8px color-mix(in srgb, var(--move-destination) 60%, transparent);
}

/* Р-345 · Плата за белый заголовок «Партии». Легенда шла двумя строками и
   занимала 38 px — сведена в одну строку, 19 px. Нижнее поле секции убавлено
   с 56 до 40 px. Вместе это 35 px из 48 px, которые стоит заголовок. */
#example-game .demo-legend { flex-wrap: nowrap; gap: 6px 12px; white-space: nowrap }
#example-game { padding-bottom: 40px }

/* Р-346 · Шапка нотации получила свою ленту. Прежде «№ · White · Black» шли
   серо-зелёным `#aebbb4`, а знак номера ещё тише — `#899991`: на подложке
   нотации (Р-316) строка читалась пылью. Голубой на сайте описывает данные
   (Р-134), а нотация и есть данные партии; золото занято правилами и главным
   действием (С8). Лента идёт во всю ширину карточки, поэтому у шапки снят
   боковой отступ и добавлены внутренние поля. */
.demo-score-head {
  margin: -14px -14px 0;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(87, 199, 255, .4);
  border-radius: calc(var(--radius) * 1.25 - 1px) calc(var(--radius) * 1.25 - 1px) 0 0;
  background: rgba(87, 199, 255, .12);
  color: #FFFFFF;
}
.demo-score-head span:first-child { color: #FFFFFF }
.demo-score .demo-notation { margin-top: 10px }

/* Р-347 · Ряд кнопок плеера «Партии» стоит намертво. У средней кнопки было
   `min-width: 76px`, а подписи разной длины — `Watch`, `Resume`,
   `Watch again`: самая длинная раздувала кнопку, и стрелки по бокам
   разъезжались. Ширина взята по самой длинной подписи. */
.demo-player-controls .demo-play { min-width: 124px }

/* Р-350 · У «Автора» появилась карточка. Это была единственная секция, где
   предметы лежали прямо на фоне: у остальных либо рамка, либо карточка.
   Взяты те же реквизиты, что у карточки «Участия» под ней — тот же радиус,
   тот же кант, та же заливка, — и обе секции сходятся в один строй (С21). */
.author .author-main {
  box-sizing: border-box;
  max-width: 1120px;
  padding: 32px;
  border: 1px solid rgba(157, 213, 255, .22);
  border-radius: 16px;
  background: rgba(9, 21, 38, .54);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 255, 255, .05);
}

/* Р-351 · Ленты фактов доведены до края. Прежде у них стояло
   `border-radius: 0`, а заливка гасла к 72 % ширины — дальше шёл фон секции,
   и лента выглядела обрубленной под прямым углом. Теперь скругление 12 px,
   как у прочих плашек сайта, заливка держится до правого края, а волосяные
   грани гаснут маской — то самое размытие по сопряжению, о котором говорил
   автор. Буквы белые: фон стал выразительнее, и контраст обязан вырасти
   вместе с ним. Белое на `#162C46` даёт около тринадцати. */
.author-copy .author-facts li {
  border-radius: 12px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--author-accent) 26%, #162C46) 0%,
    rgba(22, 44, 70, .92) 62%,
    rgba(22, 44, 70, .72) 100%);
  color: #FFFFFF;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 74%, rgba(0, 0, 0, .82) 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 74%, rgba(0, 0, 0, .82) 100%);
}

/* Р-352 · Строка над кнопкой блога держит одну меру и ровные строки. Прежде
   она шла во всю ширину колонки рваным правым краем. Выравнивание остаётся
   левым: три ленты над ней тоже левые (С21). */
.author-copy > p {
  max-width: 34em;
  text-wrap: balance;
}

/* Р-353 · Место панели разбора занято всегда. Прежде закрытая панель уходила
   из потока (`display: none`), доска забирала её ширину, и при открытии
   язычка доска убавлялась на 16 px — кнопка и легенда под ней прыгали вверх.
   Теперь колонка панели стоит на месте и лишь прячется: доска держит один
   размер и в закрытом, и в открытом виде. */
@media (min-width: 981px) {
  .explorer[data-open="false"] {
    display: flex;
    /* Ширина названа здесь же: правило круга v66 задаёт закрытой панели
       нулевую ширину и по силе отбора побеждает общее правило панели —
       колонка схлопывалась. */
    width: 320px;
    visibility: hidden;
    animation: none;
    pointer-events: none;
  }
}

/* Р-354 · Высота «Практики» одна на все три вкладки. «Редактор» выше
   «Задачи» на 27 px и «Разбора» на 19 px: при смене вкладки страница меняла
   рост, и «Автор» с подвалом уезжали. Мера взята по самой высокой вкладке —
   628 px на настольном экране. */
@media (min-width: 981px) {
  .position-lab-shell { min-height: 628px; }
}

/* Р-355 · Секции разделены чертой. Приём взят у золотой черты под
   надзаголовками, только холодный и во всю ширину: волосяная линия, гаснущая
   к краям, и голубой ромб посередине — тот самый знак, которым набран весь
   сайт (С26). Черта под первым экраном заодно говорит, что ниже есть ещё. */
.section-rule {
  position: relative;
  width: min(1188px, calc(100% - 40px));
  height: 1px;
  margin: 0 auto;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(87, 199, 255, .32) 18%,
    rgba(87, 199, 255, .32) 46.5%,
    transparent 46.5%,
    transparent 53.5%,
    rgba(87, 199, 255, .32) 53.5%,
    rgba(87, 199, 255, .32) 82%,
    transparent 100%);
}
.section-rule::after {
  content: "◆";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--spark-mark);
  font-size: 9px;
  line-height: 1;
}

/* Р-346 · Та же лента у шапки нотации «Практики»: вид один на весь сайт
   (С21). Здесь шапка липкая и стоит внутри своей рамки, поэтому боковые
   отступы остаются её собственными — меняются только цвет и грань. */
.lab-score-head {
  border-bottom: 1px solid rgba(87, 199, 255, .4);
  background: rgba(87, 199, 255, .12);
  color: #FFFFFF;
}
.lab-score-head span { color: #FFFFFF }


/* ==================== v117 =========================================== */

/* Р-360 · Шапка панели разбора «Позиции» получила сопряжение со всех сторон.
   Прежде у неё было скругление только справа и золотая черта в 3 px слева —
   единственное место на сайте с половинным скруглением. Золото осталось
   ярлыку `AVAILABLE MOVES`, а заливка стала на ступень светлее панели: область
   читается шапкой, а разница по цвету осталась малой. */
.explorer-intro {
  border-left: 0;
  border-radius: 12px;
  background: rgba(30, 52, 80, .92);
  border: 1px solid rgba(157, 213, 255, .28);
}

/* Р-361 · Панель разбора выше колонки доски не растёт: длинный список
   прокручивается внутри неё. Прежде ряд подрастал вместе с панелью, и текст
   слева от доски уезжал вниз вместе с серединой ряда — автор видел это как
   рывок при каждом открытии панели. Рост колонки скрипт кладёт в
   `--player-row` после раскладки и при смене размера окна. */
@media (min-width: 981px) {
  .explorer { max-height: var(--player-row, none); overflow-y: auto; }
}

/* Р-362 · Текст «34 хода» равняется по середине доски, а не по середине ряда.
   В ряд входят доска, кнопка под ней и легенда: середина ряда лежит на 50 px
   ниже середины доски, и текст стоял низко. Отступ снизу поднимает середину
   текста ровно на половину своей меры. */
.hero-text { margin-bottom: 100px; }

/* Р-363 · Лента «Allowed area» в «Отличиях» взяла вид ленты нотации (Р-346).
   Изумрудная лента лежала на зелёной карточке — цвет один и тот же, и
   контраста не выходило. Голубой на сайте описывает данные, и он же стоит в
   шапке нотации «Партии» и «Практики»: приём один на весь сайт (С21).
   Золотая черта слева заменена голубой: на зелёном золото звучало третьим
   акцентом, а чёрная черта прочлась бы тенью. */
.pawn-area {
  border-left: 3px solid #57C7FF;
  background: rgba(9, 21, 38, .5);
}
.pawn-area strong {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(87, 199, 255, .16) 11%,
    rgba(87, 199, 255, .3) 50%,
    rgba(87, 199, 255, .16) 89%,
    transparent 100%);
  border-bottom: 1px solid rgba(87, 199, 255, .4);
  color: #FFFFFF;
}
.pawn-area dd { color: #CDE3F5; }

/* Р-364 · Примечания «Правил» в холодных цветах. Оливково-коричневая заливка
   с золотыми буквами была единственным тёплым пятном среди индиговых карточек
   — автор назвал её чужой. Заливка взяла тот же индиго, что и карточки шагов,
   на ступень темнее; буквы белые; точки пунктов голубые, как ромбы в шагах
   выше; золото осталось правилам игры (С8), но чертой в 3 px слева. */
.extra-rule-note {
  border: 1px solid rgba(157, 213, 255, .2);
  border-left: 3px solid #FFD24D;
  background: rgba(12, 22, 38, .92);
  color: #FFFFFF;
}
.extra-rule-note li { color: #FFFFFF; }
.extra-rule-note li::marker { color: #57C7FF; }

/* Р-365 · Черта между секциями стала простой. Разрыв посередине и одинокий
   голубой ромб автор назвал подозрительными: разрыв читался как обрыв, а знак
   — как метка неизвестно чего. Осталась одна волосяная линия во всю ширину
   ряда, гаснущая к обоим краям. Высота — один пиксель. */
.section-rule {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(157, 213, 255, .22) 18%,
    rgba(157, 213, 255, .22) 82%,
    transparent 100%);
}
.section-rule::after { content: none; }

/* И-3 · Метки возможных ходов на доске «Практики». Значок рисуется элементом
   `.lab-target-marker`, который ставит скрипт, а правил для него в стилях
   отсутствовало вовсе: метка выходила размером 0×0, и доска стояла без единой
   подсказки. Дефект жил ещё в версии v124 прежней базовой. Прежние правила с
   `::after` погашены строкой `content:none!important` выше и работать уже
   перестали. */
.lab-target-marker { left:50%; top:50%; width:19%; aspect-ratio:1; border-radius:50%;
  transform:translate(-50%,-50%); box-shadow:0 0 0 1px rgba(7,20,31,.7); }
.lab-target-marker.marker-regular { background:#20cfff; }
.lab-target-marker.marker-simple-shift { background:#35d07f; }
.lab-target-marker.marker-direct-swap { background:#ff8a3d; border-radius:2px;
  transform:translate(-50%,-50%) rotate(45deg); }
.lab-target-marker.marker-relay-swap { background:#ff2fc8; border-radius:2px;
  transform:translate(-50%,-50%) rotate(45deg); }
/* Поле обмена занято своей пешкой: значок садится в угол, чтобы фигура
   осталась видна целиком. */
.lab-square[data-occupied="true"] .lab-target-marker { left:auto; right:7%; top:7%;
  transform:none; width:22%; }
.lab-square[data-occupied="true"] .lab-target-marker.marker-direct-swap,
.lab-square[data-occupied="true"] .lab-target-marker.marker-relay-swap { transform:rotate(45deg); }

/* И-3 · Значки легенды рисуются кантом: выше стоит `background:transparent
   !important` на всех `.lab-board-key i`, и заливка до экрана не доходит. */
.lab-board-key .move-direct-swap { border:2px solid #ff8a3d; border-radius:1px; }
.lab-board-key .move-relay-swap { border:2px solid #ff2fc8; border-radius:1px; transform:rotate(45deg)!important; }

/* И-5 · Одна кнопка под учебной доской вместо двух стрелок. Подпись говорит,
   что кнопка сделает: «Показать ход» ставит позицию после хода, «Сначала»
   возвращает к позиции до хода. Прежние две стрелки молчали о смысле.
   И-6 · Кнопка получила объём и постоянный цвет — тот же синий, каким живёт
   «Подсказка» первого экрана: заливка градиентом, светло-голубой кант, опора
   снизу. Прежний вид читался кантом поверх пустоты. Золото на странице значит
   переход дальше, а эта кнопка остаётся на месте, поэтому цвет синий. */
.extra-board-controls { grid-template-columns: minmax(0, 1fr); }
.extra-board-controls .extra-board-play,
.extra-board-controls .extra-board-play:hover,
.extra-board-controls .extra-board-play.is-active,
.extra-board-controls .extra-board-play[aria-pressed="true"] {
  min-height: 52px;
  padding: 12px 18px;
  border: 1px solid #7FD6FF;
  border-radius: 11px;
  background: linear-gradient(180deg, #4EB6F2 0%, #2A7FC4 52%, #1B5E9B 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    0 4px 0 #123F69,
    0 8px 16px rgba(0, 0, 0, .28);
  color: #FFFFFF;
  font: 800 15px/1.2 var(--font-sans);
  letter-spacing: .01em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .38);
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.extra-board-controls .extra-board-play:hover:enabled,
.extra-board-controls .extra-board-play:focus-visible:enabled {
  border-color: #A9E4FF;
  background: linear-gradient(180deg, #63C4F8 0%, #3690D4 52%, #2470AF 100%);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    0 5px 0 #123F69,
    0 10px 20px rgba(0, 0, 0, .32);
}
.extra-board-controls .extra-board-play:active:enabled {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .24),
    0 2px 0 #123F69,
    0 4px 9px rgba(0, 0, 0, .24);
}
@media (max-width: 1240px) {
  .extra-board-controls { grid-template-columns: minmax(0, 1fr); }
}

/* И-5 · Легенда ходов стоит одной строкой. Прежняя сетка в шесть колонок
   расставляла пять строк в два ряда; способов хода осталось четыре, и они
   встают в ряд без переноса. Выигранная высота уходит нотации. */
.lab-board-key { display: flex; flex-wrap: nowrap; justify-content: center; column-gap: 14px; row-gap: 0; }

/* И-7 · Растворение на возврате к исходному положению. Уходящий кадр и
   приходящий лежат один на другом: первый гаснет, второй проявляется, оба за
   600 мс — столько же длится показ самого хода. Прежде кадр подменялся разом,
   и возврат читался рывком. */
.extra-board { position: relative; }
.extra-board > img.is-leaving,
.extra-board > img.is-arriving,
.extra-board.is-dissolving > img {
  transition: opacity 600ms var(--ease);
}
.extra-board > img.is-arriving { opacity: 0; }
.extra-board > img.is-leaving {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  opacity: 1;
}
.extra-board.is-dissolving > img.is-leaving { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .extra-board > img.is-leaving,
  .extra-board > img.is-arriving,
  .extra-board.is-dissolving > img { transition: none; }
}

/* Эталон — легенда v5. Цвет и форма общие для доски и легенды. */
.lab-board-key i, .lab-target-marker {
  box-sizing: border-box;
}
.lab-board-key i { width:10px; height:10px; }
.lab-board-key .move-regular, .lab-target-marker.marker-regular {
  background:#20cfff !important; border:0; border-radius:50%;
}
.lab-board-key .move-simple-shift, .lab-target-marker.marker-simple-shift {
  background:transparent !important; border:2px solid #ff4d4d; border-radius:50%;
}
.lab-board-key .move-direct-swap, .lab-target-marker.marker-direct-swap {
  background:transparent !important; border:2px solid #ff8a3d; border-radius:1px;
}
.lab-board-key .move-relay-swap, .lab-target-marker.marker-relay-swap {
  background:transparent !important; border:2px solid #ff2fc8; border-radius:1px;
}
.lab-board-key .move-regular,
.lab-board-key .move-simple-shift,
.lab-board-key .move-direct-swap { transform:none !important; }
.lab-board-key .move-relay-swap { transform:rotate(45deg) !important; }
.lab-target-marker.marker-direct-swap { transform:translate(-50%,-50%); }
.lab-square[data-occupied="true"] .lab-target-marker.marker-direct-swap { transform:none; }

.lab-editor-notice { margin:0 0 12px; padding:12px 14px; border-left:3px solid #57C7FF;
  border-radius:8px; background:#153D57; color:#EAF6FF; }
.lab-editor-notice:has(#lab-editor-requirement[hidden]):has(.lab-editor-feedback:empty) { display:none; }
.lab-editor-notice p { margin:0; font-size:.9rem; line-height:1.45; }
.lab-editor-notice #lab-editor-requirement { color:inherit; font-weight:700; }
.lab-editor-notice #lab-editor-requirement::before { content:'!'; display:inline-grid;
  place-items:center; width:1.2em; height:1.2em; margin-right:.5em;
  border:1px solid #57C7FF; border-radius:50%; color:#57C7FF; }
.lab-editor-notice .lab-editor-feedback:not(:empty) { margin-top:6px; color:inherit; }
#position-lab-copy:disabled { opacity:.45; cursor:not-allowed; transform:none; }