:root {
  --board-corner-radius: 10px;
  --lichess-light: #f0d9b5;
  --lichess-dark: #b58863;
  --lichess-hi: rgba(190, 180, 75, 0.5);
  --lichess-last: rgba(205, 210, 106, 0.66);
  --lichess-hi-strong: rgba(220, 240, 90, 0.55);
  --lichess-last-strong: rgba(40, 120, 60, 0.55);
  --danger: #c04444;
  --ok: #3a7d44;
  --radius: 12px;
  --board-px: min(94vw, 600px);
  --task-star-empty: rgba(20, 18, 16, 0.35);
  --task-star-preview: rgba(201, 169, 98, 0.45);
  --scrollbar-track: rgba(0, 0, 0, 0.07);
  --scrollbar-thumb: rgba(0, 0, 0, 0.28);
  --scrollbar-thumb-hover: rgba(0, 0, 0, 0.42);
  --scrollbar-corner: transparent;
  /* Шапка + страница: один коридор с основным текстовым контентом (главная 78rem); на узком окне даёт min(var,100%). */
  --fbc-site-inner-max: min(78rem, 1728px);
  font-family: "Montserrat", "Segoe UI", "Segoe UI Symbol", "Noto Sans Symbols 2", system-ui, -apple-system, sans-serif;
}

/* Задачи/вслепую: тот же внутренний предел, что в :root (раньше было 1728px — шире контента). */
:is(html[data-fbc-page="trainer"], html[data-fbc-page="blind"]) {
  --fbc-site-inner-max: min(78rem, 1728px);
  /* Десктоп 2–3 col: пол ширины текстовой колонки — сначала сжимается доска, кегль ЗиТ (cqi) падает позже. */
  --trainer-text-col-min: 400px;
  --trainer-text-col-min-land: 320px;
}

/* Тренажёр: высота блока справа от обложки = высота миниатюры (см. шапку #puzzleMainPanel). */
html[data-fbc-page="trainer"] {
  /* Миниатюра обложки: площадь ~в 3 раза меньше базовой 114×152 — линейный масштаб 1/√3. */
  --trainer-book-thumb-w: calc(114px / sqrt(3));
  --trainer-book-thumb-h: calc(var(--trainer-book-thumb-w) * 4 / 3);
  /* Смещение панелей ЗиТ от левого края колонки текста к линии левого края миниатюры: −(ширина миниатюры + зазор). */
  --trainer-zit-panel-left: 0;
  /* Макс. ширина ЗиТ только от окна (не от колонки шапки / FAB). */
  --trainer-zit-viewport-max-w: calc(
    100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 16px
  );
  /*
   * Кегль сетки номеров — только от 100cqi колонки (#puzzleMainPanel), не от vw: иначе кегль падает при сжатии окна раньше, чем сужается колонка.
   */
  --trainer-zit-num-font-max: 15.5px;
  --trainer-zit-num-font-min: 8.5px;
  --trainer-zit-num-cqi-div: 54;
}

@media (orientation: landscape), (min-width: 1021px) {
  html[data-fbc-page="trainer"] {
    --trainer-zit-panel-left: calc(-1 * (var(--trainer-book-thumb-w) + 0.55rem));
  }
}

@media (max-width: 768px) and (orientation: portrait) {
  html[data-fbc-page="trainer"] {
    --trainer-zit-panel-left: calc(-1 * (var(--trainer-book-thumb-w) + 0.42rem));
  }
}

html[data-fbc-page="trainer"] #puzzleMainPanel .puzzle-header > .book-thumb-btn {
  width: var(--trainer-book-thumb-w);
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  display: block;
  border-radius: 6px;
  appearance: none;
  align-self: start;
}

html[data-fbc-page="trainer"] #puzzleMainPanel .puzzle-header > .book-thumb-btn:disabled {
  cursor: default;
  opacity: 0.45;
}

html[data-fbc-page="trainer"] #puzzleMainPanel .puzzle-header > .book-thumb-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

html[data-fbc-page="trainer"] #puzzleMainPanel .puzzle-header > .book-thumb-btn .book-thumb {
  width: 100%;
  aspect-ratio: 3 / 4;
  height: auto;
  display: block;
  vertical-align: top;
  -webkit-user-drag: none;
  user-select: none;
}

/* ——— Темы интерфейса (меню «Вид» → тема оформления) ——— */
html[data-app-theme="lichess-gray"] {
  --warm-bg: #2e2a27;
  --warm-bg-mid: #262220;
  --warm-bg-deep: #1a1816;
  --warm-card: #36312d;
  --warm-card-elev: #3f3a34;
  --warm-ink: #f5f1eb;
  --warm-muted: rgba(255, 255, 255, 0.52);
  --accent: #c9a962;
  --accent-hover: #dcc07a;
  --btn-secondary-bg: #4a433c;
  --btn-secondary-hover: #5d554d;
  --shadow: 0 28px 64px rgba(0, 0, 0, 0.5);
  --header-bg-top: #2e2a27;
  --header-bg-bottom: #1c1a18;
  --header-border: rgba(255, 255, 255, 0.06);
  --nav-trigger-bg: rgba(255, 255, 255, 0.06);
  --nav-trigger-border: rgba(255, 255, 255, 0.1);
  --nav-trigger-fg: #ffffff;
  --nav-trigger-expanded-bg: rgba(201, 169, 98, 0.2);
  --nav-trigger-expanded-border: rgba(201, 169, 98, 0.42);
  --panel-border: rgba(255, 255, 255, 0.07);
  --input-bg: #2c2825;
  --input-border: rgba(255, 255, 255, 0.12);
  --ghost-border: rgba(255, 255, 255, 0.16);
  --ghost-hover-bg: rgba(255, 255, 255, 0.06);
  --muted-fill: rgba(0, 0, 0, 0.25);
  --board-frame-glow: rgba(255, 255, 255, 0.05);
  --code-bg: rgba(255, 255, 255, 0.08);
  --radius: 22px;
  --task-star-empty: rgba(0, 0, 0, 0.28);
  --task-star-preview: rgba(201, 169, 98, 0.48);
  --scrollbar-track: rgba(0, 0, 0, 0.35);
  --scrollbar-thumb: rgba(201, 169, 98, 0.4);
  --scrollbar-thumb-hover: rgba(220, 192, 122, 0.62);
}

html[data-app-theme="warm-beige"] {
  --warm-bg: #a8987a;
  --warm-bg-mid: #958569;
  --warm-bg-deep: #7d6f56;
  --warm-card: #dfd4c2;
  --warm-card-elev: #ebe3d4;
  --warm-ink: #1a1510;
  --warm-muted: #4a3f32;
  --accent: #7a4a1e;
  --accent-hover: #935a28;
  --btn-secondary-bg: #5c4a32;
  --btn-secondary-hover: #6e5a40;
  --shadow: 0 10px 36px rgba(40, 32, 22, 0.28);
  --header-bg-top: #3d352b;
  --header-bg-bottom: #2e2820;
  --header-border: rgba(255, 230, 200, 0.12);
  --nav-trigger-bg: rgba(255, 245, 235, 0.1);
  --nav-trigger-border: rgba(255, 220, 180, 0.25);
  --nav-trigger-fg: #fff5e8;
  --nav-trigger-expanded-bg: rgba(201, 123, 60, 0.45);
  --nav-trigger-expanded-border: rgba(255, 200, 140, 0.4);
  --panel-border: rgba(70, 55, 40, 0.12);
  --input-bg: #fffef9;
  --input-border: #a89880;
  --ghost-border: #8a7a62;
  --ghost-hover-bg: rgba(90, 70, 45, 0.12);
  --muted-fill: rgba(255, 255, 255, 0.45);
  --board-frame-glow: rgba(255, 250, 245, 0.35);
  --code-bg: rgba(255, 255, 255, 0.55);
  --task-star-empty: rgba(0, 0, 0, 0.04);
  --task-star-preview: rgba(180, 145, 65, 0.42);
  --scrollbar-track: rgba(90, 70, 45, 0.1);
  --scrollbar-thumb: rgba(122, 74, 30, 0.38);
  --scrollbar-thumb-hover: rgba(122, 74, 30, 0.55);
}

html[data-app-theme="white"] {
  --warm-bg: #e4e8ed;
  --warm-bg-mid: #d8dce3;
  --warm-bg-deep: #cdd2da;
  --warm-card: #ffffff;
  --warm-card-elev: #f7f8fa;
  --warm-ink: #161512;
  --warm-muted: #5c5b58;
  --accent: #457b2d;
  --accent-hover: #356022;
  --btn-secondary-bg: #3d5a80;
  --btn-secondary-hover: #324a6e;
  --shadow: 0 6px 28px rgba(0, 0, 0, 0.08);
  --header-bg-top: #ffffff;
  --header-bg-bottom: #eef1f4;
  --header-border: rgba(22, 21, 18, 0.1);
  --nav-trigger-bg: rgba(22, 21, 18, 0.04);
  --nav-trigger-border: rgba(22, 21, 18, 0.12);
  --nav-trigger-fg: #161512;
  --nav-trigger-expanded-bg: rgba(69, 123, 45, 0.15);
  --nav-trigger-expanded-border: rgba(69, 123, 45, 0.35);
  --panel-border: rgba(22, 21, 18, 0.08);
  --input-bg: #ffffff;
  --input-border: #c6ccd4;
  --ghost-border: #a8b0bc;
  --ghost-hover-bg: rgba(22, 21, 18, 0.06);
  --muted-fill: rgba(22, 21, 18, 0.04);
  --board-frame-glow: rgba(255, 255, 255, 0.9);
  --code-bg: rgba(22, 21, 18, 0.06);
  --task-star-empty: rgba(0, 0, 0, 0.04);
  --task-star-preview: rgba(140, 115, 45, 0.4);
  --scrollbar-track: rgba(22, 21, 18, 0.07);
  --scrollbar-thumb: rgba(69, 123, 45, 0.36);
  --scrollbar-thumb-hover: rgba(69, 123, 45, 0.52);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--warm-ink);
  background: linear-gradient(
    165deg,
    var(--warm-bg) 0%,
    var(--warm-bg-mid) 52%,
    var(--warm-bg-deep, var(--warm-bg-mid)) 100%
  );
  background-attachment: fixed;
  max-width: 100vw;
  /* Не задавать overflow-x здесь: в паре с overflow-y это даёт второй вертикальный скролл (html + body). */
}

/* Полосы прокрутки в гамме темы (Firefox); один вертикальный скролл — на корне документа */
html {
  background: var(--warm-bg-deep, var(--warm-bg-mid, #1a1816));
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  max-width: 100vw;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Чуть компактнее типографика в широком окне браузера (rem от корня) */
@media (min-width: 721px) {
  html {
    font-size: 14px;
  }
}

/* Chromium / Safari / старый Edge */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-corner {
  background: var(--scrollbar-corner, transparent);
}

*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* ——— Верхнее меню ——— */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  box-sizing: border-box;
  background: linear-gradient(
    180deg,
    var(--header-bg-top) 0%,
    var(--header-bg-bottom) 100%
  );
  color: var(--nav-trigger-fg);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--header-border);
  border-radius: var(--radius);
  padding: 0.14rem 0.65rem 0.16rem;
}

/* Шапка + основной блок одной ширины (как колонка с layout ниже), по центру в .app-frame */
.app-content-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  gap: 0.3rem;
}

/* Общая ширина с колонкой доски: левый край логотипа = левый край доски.
   По умолчанию — во всю ширину (safe-area). Браузер с мышью: узкий блок по контенту, поля снаружи. */
.app-frame {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding-top: 0.3rem;
  padding-bottom: 2.5rem;
  padding-left: max(0px, env(safe-area-inset-left, 0px));
  padding-right: max(0px, env(safe-area-inset-right, 0px));
}

@media (pointer: fine) {
  .app-frame {
    width: max-content;
    max-width: min(100%, 100vw);
    margin: 0 auto;
    padding: 0.3rem max(1.25rem, env(safe-area-inset-left, 0px)) 2.5rem
      max(1.25rem, env(safe-area-inset-right, 0px));
  }

  /* Рамка на всю ширину окна; боковые поля не из padding — только safe-area (поля задаёт .app-content-stack через max-width + margin: auto). */
  html[data-fbc-page] .app-frame {
    width: 100%;
    max-width: min(100%, 100vw);
    margin-left: 0;
    margin-right: 0;
    padding-left: max(0px, env(safe-area-inset-left, 0px));
    padding-right: max(0px, env(safe-area-inset-right, 0px));
    padding-top: 0.3rem;
    padding-bottom: 2.5rem;
    min-width: 0;
    box-sizing: border-box;
  }

}

html[data-fbc-page] .app-content-stack {
  width: 100%;
  max-width: min(var(--fbc-site-inner-max, 1728px), 100%);
  margin-left: auto;
  margin-right: auto;
  min-width: 0;
  box-sizing: border-box;
}

html[data-fbc-page="welcome"] .app-content-stack > .site-header,
html[data-fbc-page="welcome"] .app-content-stack > .page-body {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

html[data-fbc-page="welcome"] .welcome-main {
  display: block;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.page-body {
  margin: 0;
  padding: 0;
  min-width: 0;
}

.header-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
  flex-wrap: wrap;
  padding: 0;
}

.site-header .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: var(--nav-trigger-fg);
}

.site-header .brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
  background: transparent;
  padding: 0;
  border: none;
  border-radius: 0;
}

.site-header .brand-logo-img {
  display: block;
  height: 1.75rem;
  width: auto;
  object-fit: contain;
}

/* Светлая шапка: контур чёрный на прозрачном, без фильтра */
html[data-app-theme="white"] .site-header .brand-logo-img {
  filter: none;
}

.site-header .brand-text {
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--nav-trigger-fg);
  display: flex;
  align-items: center;
}

.site-header .brand:focus-visible {
  outline: 2px solid var(--accent, #629924);
  outline-offset: 4px;
  border-radius: 6px;
}

/* Контурный логотип (чёрный на прозрачном): на тёмной шапке — в тон акценту */
html[data-app-theme="warm-beige"] .site-header .brand-logo-img {
  filter: brightness(0) saturate(100%) invert(88%) sepia(28%) saturate(520%) hue-rotate(358deg)
    brightness(0.96) contrast(0.92);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  flex: 0 1 auto;
  min-width: 0;
  justify-content: flex-end;
  margin-left: auto;
}

.nav-burger {
  display: none;
  margin-left: 0.2rem;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--nav-trigger-border);
  border-radius: 8px;
  background: var(--nav-trigger-bg);
  color: var(--nav-trigger-fg);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.22rem;
  cursor: pointer;
}

.nav-burger__line {
  display: block;
  width: 1.1rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

/* ——— Выпадающее меню (аккордеон) + оверлей-панели тренажёра ——— */
.nav-item--mega {
  position: relative;
  margin-left: auto;
  display: flex;
  align-items: center;
}

.nav-menu-btn {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.nav-account-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.22rem;
  height: 1.22rem;
  margin-right: 0.48rem;
  padding: 0;
  border: 1.45px solid color-mix(in srgb, currentColor 64%, transparent);
  border-radius: 50%;
  box-sizing: border-box;
  background:
    radial-gradient(circle at 50% 33%, currentColor 0 14%, transparent 16%),
    radial-gradient(ellipse 55% 36% at 50% 75%, currentColor 0 44%, transparent 46%);
  opacity: 0.9;
  cursor: pointer;
}

.nav-account-btn:hover,
.nav-account-btn:focus-visible {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 72%, transparent);
}

.nav-menu-btn__lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  opacity: 0.85;
}

.nav-menu-btn__lines span {
  display: block;
  width: 22px;
  height: 2.6px;
  border-radius: 1px;
  background: currentColor;
  transform-origin: center;
  transition: transform 0.22s ease, opacity 0.18s ease;
}

.nav-menu-btn__label {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: normal;
  font-stretch: expanded;
  transform: scaleX(1.08);
  transform-origin: right center;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  display: none;
}

/* Панель главного меню: без обводки, типографика и воздух */
.dropdown.panel-main-menu {
  border: none !important;
  outline: none;
  right: 0;
  left: auto;
  min-width: min(92vw, 260px);
  max-width: min(96vw, 320px);
  max-height: min(78vh, 560px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.2rem 0.38rem 0.24rem !important;
  z-index: 220;
  -webkit-overflow-scrolling: touch;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.menu-acc {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.menu-acc__group {
  padding: 0.04rem 0 0.1rem;
  border-bottom: none;
}

.menu-acc__group + .menu-acc__group {
  margin-top: 0.05rem;
  padding-top: 0.12rem;
}

.menu-acc__branch {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.1rem 0 0.16rem;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  color: var(--warm-muted);
  box-sizing: border-box;
  transition: color 0.18s ease;
}

.menu-acc__branch:hover {
  color: var(--warm-ink);
}

.menu-acc__branch[aria-expanded="true"] {
  color: var(--accent);
}

.menu-acc__branch::after {
  content: "";
  flex-shrink: 0;
  width: 0.35em;
  height: 0.35em;
  margin-top: 0.15em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: 0.55;
  transform: rotate(-45deg);
  transition: transform 0.22s ease, opacity 0.2s ease;
}

.menu-acc__branch[aria-expanded="true"]::after {
  transform: rotate(45deg);
  opacity: 0.85;
}

/* display:flex иначе перебивает UA [hidden] — подменю «не сворачивались» */
.menu-acc__sub[hidden] {
  display: none !important;
}

.menu-acc__sub {
  padding: 0.14rem 0.32rem 0.12rem 0.42rem;
  margin: 0.06rem 0 0.08rem 0.05rem;
  border-left: none;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  background: var(--warm-card-elev);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  box-sizing: border-box;
}

.menu-acc__leaf {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.14rem 0.06rem;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.38;
  text-align: left;
  cursor: pointer;
  color: var(--warm-ink);
  transition:
    color 0.15s ease,
    transform 0.15s ease;
}

.menu-acc__leaf:hover {
  color: var(--accent);
  background: var(--muted-fill);
  transform: translateX(1px);
}

.menu-acc__leaf:focus-visible {
  outline: none;
  color: var(--accent);
  box-shadow: inset 2px 0 0 0 var(--accent);
}

.menu-acc__leaf--link {
  text-decoration: none;
}

.menu-acc__hint {
  margin: 0.02rem 0 0.06rem;
  padding: 0;
  font-size: 0.68rem;
  font-weight: 400;
  line-height: 1.48;
  color: var(--warm-muted);
  letter-spacing: 0.01em;
}

/* Десктоп: пункты меню в ряд, подменю только по наведению / фокусу (без клика по ветке).
   С 769px: до 768 (узкий слой) без горизонтальной полосы — бургер/кнопка «Меню». */
@media (min-width: 769px) {
  .header-bar {
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.3rem;
  }

  .nav-menu-btn {
    display: none !important;
  }

  .nav-item--mega {
    display: flex;
    flex: 1 1 auto;
    justify-content: flex-end;
    align-items: center;
    min-width: 0;
    margin-left: auto;
  }

  .dropdown.panel-main-menu {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    overflow: visible;
    overflow-x: visible;
    overflow-y: visible;
    max-height: none;
    min-width: 0;
    max-width: none;
    width: auto;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
  }

  .panel-main-menu .menu-acc {
    --menu-bar-icon: 0.76rem;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.12rem 0;
  }

  .panel-main-menu .menu-acc__group {
    position: relative;
    padding: 0;
    margin: 0;
  }

  /* Разделители только между первыми тремя разделами; перед анализом, шестерёнкой, аватаром и рейтингом — нет */
  .panel-main-menu .menu-acc__group:has(.menu-acc__branch[aria-controls="menuSubTasks"]),
  .panel-main-menu .menu-acc__group:has(.menu-acc__branch[aria-controls="menuSubBlind"]),
  .panel-main-menu .menu-acc__group:has(.menu-acc__branch[aria-controls="menuSubServices"]) {
    padding-right: 0.58rem;
    margin-right: 0.58rem;
    border-right: 2px solid color-mix(in srgb, var(--accent) 88%, #fff 12%);
  }

  .panel-main-menu .menu-acc__group--nav-rating {
    margin-left: 0.22rem;
  }

  .panel-main-menu .menu-acc__group:has(.menu-acc__branch[aria-controls="menuSubAccount"]) {
    margin-left: 0.42rem;
  }

  .panel-main-menu .menu-acc__group + .menu-acc__group {
    margin-top: 0;
    padding-top: 0;
    border-bottom: none;
  }

  .panel-main-menu .menu-acc__branch {
    font-size: 0.54rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    padding: 0.06rem 0.18rem;
    border-radius: 0;
    cursor: default;
  }

  .panel-main-menu .menu-acc__branch::after {
    display: none;
  }

  .panel-main-menu .menu-acc__leaf {
    font-size: 0.7rem;
    font-weight: 400;
    padding: 0.14rem 0.4rem;
    line-height: 1.36;
    border-radius: 0;
    border: 1px solid transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition:
      color 0.15s ease,
      transform 0.15s ease,
      background 0.15s ease,
      border-color 0.15s ease,
      box-shadow 0.15s ease,
      border-radius 0.15s ease;
  }

  .panel-main-menu .menu-acc__leaf:hover {
    color: var(--accent);
    background: var(--warm-card-elev);
    border-radius: var(--radius, 12px);
    border: 1px solid var(--panel-border);
    box-shadow: var(--shadow);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transform: translateX(1px);
  }

  .panel-main-menu .menu-acc__leaf:focus-visible {
    box-shadow: var(--shadow), inset 2px 0 0 0 var(--accent);
    border-radius: var(--radius, 12px);
    border: 1px solid var(--panel-border);
    background: var(--warm-card-elev);
    color: var(--accent);
  }

  .panel-main-menu .menu-acc__hint {
    font-size: 0.6rem;
    font-weight: 400;
    line-height: 1.45;
    margin: 0.02rem 0 0.05rem;
  }

  .panel-main-menu .menu-acc__sub {
    position: absolute;
    top: calc(100% + 0.42rem);
    left: 0;
    right: auto;
    min-width: 188px;
    max-width: min(90vw, 268px);
    padding: 0.26rem 0.32rem 0.14rem;
    margin: 0;
    margin-left: 0;
    border-left: none;
    border-radius: 4px;
    background: var(--warm-card-elev) !important;
    border: 1px solid var(--panel-border);
    outline: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 280;
    flex-direction: column;
    gap: 0.12rem;
    display: none !important;
  }

  /* Невидимая зона над панелью — курсор не «рвёт» hover при зазоре от пункта */
  .panel-main-menu .menu-acc__sub::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 0.42rem;
  }

  .panel-main-menu .menu-acc__group:hover > .menu-acc__sub,
  .panel-main-menu .menu-acc__group:focus-within > .menu-acc__sub {
    display: flex !important;
  }

  .panel-main-menu .menu-acc__group:hover > .menu-acc__branch,
  .panel-main-menu .menu-acc__group:focus-within > .menu-acc__branch {
    color: var(--accent);
    background: transparent;
  }

  .panel-main-menu .menu-acc__branch[aria-controls="menuSubHelp"] {
    font-size: 0;
    letter-spacing: 0;
    min-width: var(--menu-bar-icon);
    text-align: center;
  }

  .panel-main-menu .menu-acc__branch[aria-controls="menuSubHelp"]::before {
    content: "?";
    font-size: var(--menu-bar-icon);
    font-weight: 700;
    line-height: 1;
  }

  .panel-main-menu .menu-acc__branch[aria-controls="menuSubAccount"] {
    font-size: 0;
    letter-spacing: 0;
    --acc-disc: calc(var(--menu-bar-icon) + 0.22rem);
    width: var(--acc-disc);
    height: var(--acc-disc);
    min-width: var(--acc-disc);
    padding: 0;
    position: relative;
    box-sizing: border-box;
    border: 1.5px solid color-mix(in srgb, currentColor 42%, transparent);
    border-radius: 50%;
    background:
      radial-gradient(
        65% 55% at 50% 18%,
        color-mix(in srgb, currentColor 26%, transparent),
        transparent 52%
      ),
      color-mix(in srgb, currentColor 12%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, currentColor 22%, transparent);
  }

  .panel-main-menu .menu-acc__branch[aria-controls="menuSubAccount"]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.28rem;
    height: 0.28rem;
    margin-top: -0.24rem;
    margin-left: -0.14rem;
    background: currentColor;
    opacity: 0.9;
    border-radius: 50%;
    border: none;
  }

  .panel-main-menu .menu-acc__branch[aria-controls="menuSubAccount"]::after {
    display: block;
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0.1rem;
    width: 0.5rem;
    height: 0.24rem;
    margin-left: -0.25rem;
    background: currentColor;
    opacity: 0.9;
    border-radius: 0.28rem 0.28rem 0.16rem 0.16rem;
    border: none;
  }

}

/* Аккаунт / справка — на всю ширину вьюпорта (с отступами). */
.site-header .nav-item--mega > .dropdown.panel-account,
.site-header .nav-item--mega > .dropdown.panel-help {
  position: fixed;
  left: max(8px, env(safe-area-inset-left, 0px));
  right: max(8px, env(safe-area-inset-right, 0px));
  top: calc(var(--site-header-height, 52px) + 6px);
  bottom: max(8px, env(safe-area-inset-bottom, 0px));
  z-index: 260;
  max-height: none;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin-top: 0;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
}

/* Книги / избранное / настройки в шапке — ширина/левый край как у .app-content-stack (--fbc-mega-stack-* задаётся в applySiteHeaderMetrics). */
.site-header .nav-item--mega > .dropdown.panel-tasks {
  position: fixed;
  --fbc-mega-pad-l: max(0px, env(safe-area-inset-left, 0px));
  --fbc-mega-pad-r: max(0px, env(safe-area-inset-right, 0px));
  --fbc-mega-content-w: min(
    var(--fbc-site-inner-max, 1728px),
    calc(100vw - var(--fbc-mega-pad-l) - var(--fbc-mega-pad-r))
  );
  left: var(
    --fbc-mega-stack-left,
    max(var(--fbc-mega-pad-l), calc(50vw - var(--fbc-mega-content-w) / 2))
  );
  width: var(--fbc-mega-stack-w, var(--fbc-mega-content-w)) !important;
  right: auto !important;
  top: calc(var(--site-header-height, 52px) + 6px);
  bottom: max(8px, env(safe-area-inset-bottom, 0px));
  z-index: 260;
  max-height: none;
  min-width: 0 !important;
  max-width: none !important;
  margin-top: 0;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
}

/* Ширина сетки = колонка контента (без потолка 904px); --fav-inner-w без «100%» в custom property. */
.site-header .nav-item--mega > .dropdown.panel-tasks.panel-tasks--tab-fav {
  --fav-inner-w: calc(var(--fbc-mega-stack-w, var(--fbc-mega-content-w)) - 22px);
}

/* welcome/blind-hub: узкая lite-панель — не подменять --fav-inner-w шириной стека */
.site-header .nav-item--mega > .dropdown.panel-tasks.panel-tasks--lite.panel-tasks--tab-fav {
  --fav-inner-w: calc(min(96vw, 420px) - 22px);
}

.btn-mobile-stars {
  display: none;
}

.nav-item {
  position: relative;
}

.nav-trigger {
  background: var(--nav-trigger-bg);
  border: 1px solid var(--nav-trigger-border);
  color: var(--nav-trigger-fg);
  padding: 0.3rem 0.6rem;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 500;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.1s ease;
}

.nav-trigger:hover,
.nav-trigger[aria-expanded="true"] {
  background: var(--nav-trigger-expanded-bg);
  border-color: var(--nav-trigger-expanded-border);
}

.nav-trigger:active {
  transform: scale(0.98);
}

/* Кнопка аватара слева от бургера: финальный override после базового .nav-trigger */
.nav-trigger.nav-account-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.22rem;
  height: 1.22rem;
  min-width: 1.22rem;
  min-height: 1.22rem;
  margin-right: 0.48rem;
  padding: 0;
  border: 1.45px solid color-mix(in srgb, currentColor 64%, transparent);
  border-radius: 50%;
  box-sizing: border-box;
  background:
    radial-gradient(circle at 50% 33%, currentColor 0 14%, transparent 16%),
    radial-gradient(ellipse 55% 36% at 50% 75%, currentColor 0 44%, transparent 46%);
  opacity: 0.9;
}

.nav-trigger.nav-account-btn:hover,
.nav-trigger.nav-account-btn:focus-visible {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 72%, transparent);
}

/* Кнопка «Меню»: текст и иконка, без «кнопочной» рамки */
.nav-trigger.nav-menu-btn {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0.4rem 0.25rem;
  gap: 0.45rem;
}

.nav-trigger.nav-menu-btn:hover,
.nav-trigger.nav-menu-btn[aria-expanded="true"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--accent);
}

.nav-trigger.nav-menu-btn:focus,
.nav-trigger.nav-menu-btn:focus-visible,
.nav-trigger.nav-menu-btn:active {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.nav-trigger.nav-menu-btn[aria-expanded="true"] .nav-menu-btn__lines span:nth-child(1) {
  transform: none;
}

.nav-trigger.nav-menu-btn[aria-expanded="true"] .nav-menu-btn__lines span:nth-child(2) {
  opacity: 1;
  transform: none;
}

.nav-trigger.nav-menu-btn[aria-expanded="true"] .nav-menu-btn__lines span:nth-child(3) {
  transform: none;
}

.nav-trigger.nav-menu-btn .nav-menu-btn__label {
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.2s ease;
}

.nav-trigger.nav-menu-btn:hover .nav-menu-btn__label,
.nav-trigger.nav-menu-btn[aria-expanded="true"] .nav-menu-btn__label {
  text-decoration-color: var(--accent);
}

a.nav-trigger {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.nav-trigger--icon {
  padding: 0.22rem;
  min-width: 2rem;
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-help-icon {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
}

.dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: min(96vw, 380px);
  max-height: min(70vh, 520px);
  overflow-y: auto;
  padding: 0.85rem 1rem;
  background: var(--warm-card);
  color: var(--warm-ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--panel-border);
}

/* Меню «Задачи» (книги / избранное / настройки) */
.panel-tasks {
  right: auto;
  left: 0;
  max-width: calc(100vw - 16px);
  padding-top: 0.65rem;
}

.panel-tasks.panel-tasks--tab-books {
  min-width: min(96vw, 600px);
}

.panel-tasks.panel-tasks--tab-display {
  min-width: min(96vw, 320px);
  max-width: min(96vw, 440px);
  max-height: min(78vh, 680px);
}

/* Главная / слепые: вкладки «Избранное» и «Настройки» без широкой сетки */
.panel-tasks.panel-tasks--lite.panel-tasks--tab-fav {
  width: auto;
  max-width: min(96vw, 420px);
  min-width: min(96vw, 280px);
  right: auto;
  left: 0;
  max-height: min(56vh, 420px);
  --fav-inner-w: calc(min(96vw, 420px) - 22px);
}

.panel-tasks.panel-tasks--lite.panel-tasks--tab-display {
  width: auto;
  max-width: min(96vw, 420px);
  min-width: min(96vw, 280px);
  right: auto;
  left: 0;
  max-height: min(56vh, 420px);
}

.panel-tasks .nav-tasks-pane--books {
  --book-menu-thumb: 120px;
  --book-menu-thumb-h: calc(var(--book-menu-thumb) * 4 / 3);
  --book-cover-radius: 12px;
}

.nav-tasks-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.75rem;
  padding: 0;
}

.nav-tasks-tab {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.38rem 0.55rem;
  border-radius: 9px;
  border: 1px solid var(--nav-trigger-border);
  background: var(--nav-trigger-bg);
  color: var(--nav-trigger-fg);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.nav-tasks-tab:hover {
  background: var(--nav-trigger-expanded-bg);
  border-color: var(--nav-trigger-expanded-border);
}

.nav-tasks-tab[aria-selected="true"] {
  background: var(--nav-trigger-expanded-bg);
  border-color: var(--nav-trigger-expanded-border);
}

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

.nav-tasks-panes {
  min-height: 0;
}

.nav-tasks-pane {
  min-height: 0;
}

.panel-help {
  min-width: min(96vw, 360px);
}

.panel-account {
  min-width: min(96vw, 300px);
}

/* Шире выпадашка «Аккаунт» у админа — сетка отзывов и миниатюры */
.panel-account.panel-account--admin-wide {
  min-width: min(96vw, 900px);
  max-width: min(calc(100vw - 10px), 980px);
}

.panel-tasks.panel-tasks--tab-fav {
  /* Ширина сетки избранного; якорь справа у пункта «Задачи» */
  right: 0;
  left: auto;
  width: min(calc(100vw - 16px), var(--fbc-site-inner-max, 1728px));
  max-width: calc(100vw - 16px);
  min-width: 0;
  max-height: min(calc(100vh - 72px), 900px);
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  --fav-mini-board-radius: 8px;
  /* Портрет переопределяет на 3; ландшафт — на 6 */
  --fav-cols: 6;
  --fav-visible-rows: 6;
  --fav-gap-x: 4px;
  --fav-gap-y: 4px;
  --fav-inner-w: calc(min(100vw - 16px, var(--fbc-site-inner-max, 1728px)) - 22px);
  /* Оценка ширины ячейки для высоты ряда/скролла; сами доски — width:100% в сетке */
  --fav-slot: max(
    48px,
    calc(
      (var(--fav-inner-w) - (var(--fav-cols) - 1) * var(--fav-gap-x)) / var(--fav-cols)
    )
  );
  --fav-row-h: calc(var(--fav-slot) + 0.28rem + 2.15rem);
}

.fav-panel-step--grid {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-width: 100%;
}

.fav-star-categories {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.35rem;
  margin: 0;
  width: 100%;
}

.fav-cat-btn {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.45rem 0.2rem;
  border: 1px solid var(--input-border);
  border-radius: 10px;
  background: var(--input-bg);
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--warm-ink);
  text-align: center;
  box-sizing: border-box;
}

.fav-cat-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.fav-cat-btn[aria-pressed="true"] {
  border-color: #e6c02f;
  box-shadow: inset 0 0 0 1px #e6c02f;
}

.fav-cat-stars {
  color: #e6c02f;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  font-size: clamp(0.65rem, 2.1vw, 0.95rem);
  line-height: 1;
  white-space: nowrap;
}

.fav-cat-count {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  line-height: 1;
  color: var(--warm-muted);
}

.fav-back-btn {
  margin: 0 0 0.5rem;
  padding: 0.35rem 0.6rem;
  font-size: 0.85rem;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background: var(--muted-fill);
  cursor: pointer;
  color: var(--warm-ink);
}

.fav-back-btn:hover {
  border-color: var(--accent);
}

.fav-grid-title {
  font-size: 0.88rem;
  font-weight: 600;
  margin: 0 0 0.65rem;
  color: var(--warm-muted);
}

.fav-puzzles-grid-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(
    calc(
      var(--fav-visible-rows) * var(--fav-row-h) +
        (var(--fav-visible-rows) - 1) * var(--fav-gap-y)
    ),
    calc(100vh - 200px)
  );
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.fav-puzzles-grid {
  display: grid;
  grid-template-columns: repeat(var(--fav-cols), minmax(0, 1fr));
  gap: var(--fav-gap-y) var(--fav-gap-x);
  align-items: start;
  width: 100%;
  min-width: 0;
}

.fav-thumb-cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.22rem;
  min-width: 0;
  padding: 0.18rem 0.1rem;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  color: var(--warm-ink);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.fav-thumb-cell:link,
.fav-thumb-cell:visited,
.fav-thumb-cell:hover,
.fav-thumb-cell:active {
  color: var(--warm-ink);
  text-decoration: none;
}

.fav-thumb-cell:hover {
  background: var(--muted-fill);
  border-color: var(--panel-border);
}

.fav-mini-board.board {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  aspect-ratio: 1;
  border-radius: var(--fav-mini-board-radius);
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.2),
    inset 0 0 0 1px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
}

.fav-mini-board .piece {
  cursor: default;
  pointer-events: none;
}

.fav-thumb-caption {
  font-size: 0.56rem;
  line-height: 1.22;
  color: var(--warm-muted);
  text-align: center;
  max-width: 100%;
  width: 100%;
  word-break: break-word;
  white-space: pre-line;
  hyphens: auto;
}

.auth-register-wrap {
  margin-top: 0.75rem;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--input-border);
}

.auth-register-hint {
  margin-bottom: 0.35rem;
  font-size: 0.82rem;
}

.auth-form input,
.side-panel textarea,
.side-panel input[type="text"],
.side-panel input[type="number"] {
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.45rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  font-size: 0.85rem;
  color: var(--warm-ink);
}

.panel-help .themes-list li button[disabled] {
  opacity: 1;
  cursor: default;
}

.menu-sep {
  border: 0;
  border-top: 1px solid var(--panel-border);
  margin: 0.6rem 0 0.7rem;
}

.grading-modes-menu {
  padding: 0.2rem 0.05rem;
  margin-bottom: 0.4rem;
}

.settings-field {
  margin-bottom: 0.65rem;
}

.settings-field span {
  font-size: 0.78rem;
}

.settings-field select {
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.45rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  font-size: 0.85rem;
  color: var(--warm-ink);
}

.slider-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
  margin-top: 0.3rem;
}

.slider-pair input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.dropdown-hint {
  margin: 0 0 0.65rem;
  font-size: 0.82rem;
  color: var(--warm-muted);
}

.books-list {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, var(--books-list-col-min, 17rem)), 1fr)
  );
  gap: 0.6rem;
  align-items: start;
}

.books-list > .book-row {
  min-width: 0;
}

.book-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.65rem;
  /* Высота строки = обложка 3:4 + вертикальные отступы (раньше padding обрезал миниатюру) */
  min-height: calc(var(--book-menu-thumb-h) + 0.85rem);
  box-sizing: border-box;
  background: var(--muted-fill);
  border-radius: var(--radius);
  border: 1px solid var(--panel-border);
  padding: 0.45rem 0.55rem;
  overflow: visible;
  color: var(--warm-ink);
  text-decoration: none;
}

.book-row:link,
.book-row:visited,
.book-row:hover,
.book-row:active {
  color: var(--warm-ink);
  text-decoration: none;
}

.book-row--open {
  cursor: pointer;
}

.book-row--open:hover {
  border-color: var(--accent-hover);
}

.book-cover-col {
  flex-shrink: 0;
  width: var(--book-menu-thumb, 120px);
  height: var(--book-menu-thumb-h);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  border-radius: var(--book-cover-radius, 12px);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.book-row .cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  background: #3d2e26;
  border-radius: var(--book-cover-radius, 12px);
}

.book-row .book-body {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: visible;
}

.book-row .book-meta {
  padding: 0;
  min-height: 0;
  overflow: hidden;
}

.book-row .book-meta strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 0.84rem;
  line-height: 1.2;
  margin-bottom: 0.1rem;
}

.book-row .sub {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 0.68rem;
  color: var(--warm-muted);
  line-height: 1.3;
  margin-bottom: 0.12rem;
}

.book-row .authors {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  font-size: 0.7rem;
  color: var(--warm-ink);
  opacity: 0.9;
}

.book-inline-hint {
  margin: 0.2rem 0 0;
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--warm-muted);
}

.book-inline-hint code {
  font-size: 0.62rem;
  word-break: break-word;
}

.book-toc-wrap {
  flex-shrink: 0;
  margin-top: 0.25rem;
  position: relative;
  align-self: flex-start;
}

.book-toc-toggle {
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--accent, #c9a962);
  text-decoration: underline;
  text-underline-offset: 0.12em;
  text-align: left;
}

.book-toc-toggle:hover {
  color: var(--accent-hover, #dcc07a);
}

.book-toc-dropdown {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 40;
  min-width: min(100%, 320px);
  width: max-content;
  max-width: min(94vw, 520px);
  max-height: min(58vh, 440px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.5rem 0.55rem;
  background: var(--warm-card);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow);
}

.book-row .chapter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: none;
  overflow-y: visible;
}

.chapter-list li {
  margin: 0;
}

.chapter-list button {
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.55rem;
  margin: 3px 0;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--warm-ink);
}

.chapter-list button:hover {
  background: rgba(201, 123, 60, 0.15);
}

.chapter-list .ch-count {
  color: var(--warm-muted);
  font-size: 0.8rem;
}

.themes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
}

.themes-list li button {
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.5rem;
  margin-bottom: 4px;
  border: 1px solid var(--panel-border);
  background: var(--input-bg);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--warm-ink);
}

.themes-list li button:hover {
  border-color: var(--accent);
}

.themes-note {
  font-size: 0.8rem;
  color: var(--warm-muted);
  margin: 0.5rem 0 0;
}

.chapter-tag {
  font-size: 0.82rem;
  color: var(--warm-muted);
  padding: 0.4rem 0.65rem;
  background: var(--muted-fill);
  border-radius: 8px;
  border: 1px dashed var(--input-border);
  margin-bottom: 0.5rem;
  cursor: pointer;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Панель глав: оболочка как у списка номеров (.puzzle-task-panel в JS); строки — без рамок. */
.chapter-jump-panel .puzzle-task-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.chapter-jump-panel .puzzle-task-link {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0.38rem 0.5rem;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  color: var(--warm-ink);
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}

.chapter-jump-panel .puzzle-task-link:hover {
  background: rgba(201, 169, 98, 0.14);
  border: none;
}

.chapter-jump-panel .puzzle-task-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.about-parse {
  max-width: 1280px;
  margin: 0 auto 1rem;
  padding: 0 1.25rem;
}

.about-parse summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--warm-muted);
  font-size: 0.9rem;
}

.about-body {
  margin-top: 0.65rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--warm-muted);
}

.about-body code {
  background: var(--code-bg);
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
  font-size: 0.82em;
}


.top {
  text-align: center;
  margin-bottom: 1.5rem;
}

.top h1 {
  margin: 0 0 0.35rem;
  font-weight: 600;
  font-size: 1.75rem;
  letter-spacing: -0.02em;
}

.subtitle {
  margin: 0;
  color: var(--warm-muted);
  font-size: 0.95rem;
}

.layout {
  display: grid;
  /* Правый столбец +20% к прежним 380–500px → 456–600px */
  grid-template-columns: max-content minmax(456px, 600px);
  gap: 1rem;
  align-items: flex-start;
  justify-content: center;
}

/* Задачи / вслепую: доска max-content, текст — на всю оставшуюся ширину (ровно как блок шапки/меню). */
html[data-fbc-page="trainer"] .layout,
html[data-fbc-page="blind"] .layout {
  justify-content: start;
  width: 100%;
  max-width: 100%;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 0;
  row-gap: 1rem;
}

html[data-fbc-page="trainer"] .right-column,
html[data-fbc-page="blind"] .right-column {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

/* Портрет ≥1021: дорожка текста с полом — max-content доски отдаёт ширину до упора в пол. */
@media (min-width: 1021px) and (orientation: portrait) {
  html[data-fbc-page="trainer"] .layout,
  html[data-fbc-page="blind"] .layout {
    grid-template-columns: max-content minmax(min(var(--trainer-text-col-min), 100%), 1fr);
  }

  html[data-fbc-page="trainer"] .right-column,
  html[data-fbc-page="blind"] .right-column {
    min-width: min(var(--trainer-text-col-min), 100%);
  }
}

.panel {
  background: var(--warm-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem;
  border: 1px solid var(--panel-border);
}

.board-panel {
  display: block;
  padding: 0;
  width: max-content;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Админ-редактор: доска остаётся в кадре при прокрутке страницы (форма справа/ниже может быть длинной). */
body.admin-editor-open .layout > .board-panel {
  position: sticky;
  top: calc(var(--site-header-height, 52px) + 0.35rem);
  align-self: start;
  z-index: 4;
}

.board-wrap {
  position: relative;
  --frame-pad: 0.86rem;
  --coord-font-size: 0.64rem;
  padding: var(--frame-pad);
  width: max-content;
  border-radius: var(--board-corner-radius);
  background: var(--frame-bg, rgba(255, 255, 255, 0.08));
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.2),
    0 3px 8px rgba(0, 0, 0, 0.12),
    inset 0 0 0 2px var(--frame-border, rgba(0, 0, 0, 0.25));
  --coord-color: var(--warm-muted);
  --frame-brightness: 100%;
  --frame-contrast: 100%;
}

.board-stack {
  position: relative;
  width: min(var(--board-px), calc(100vw - 620px));
  max-width: 100%;
}

/* Двухколоночный портрет (широкое окно): больше места правому тексту, доска уступает по потолку. */
@media (min-width: 1021px) and (orientation: portrait) {
  html[data-fbc-page="trainer"] .board-stack,
  html[data-fbc-page="blind"] .board-stack {
    width: min(var(--board-px), calc(100vw - 680px));
  }
}

.board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--board-corner-radius);
  overflow: hidden;
  box-shadow:
    0 2px 14px rgba(0, 0, 0, 0.22),
    inset 0 0 0 2px rgba(0, 0, 0, 0.45),
    inset 0 0 0 2px var(--board-frame-glow);
  user-select: none;
  touch-action: none;
  background-size: cover;
  background-position: center;
}

.board-coord-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  pointer-events: none;
  z-index: 2;
  border-radius: var(--board-corner-radius);
  font-size: clamp(0.48rem, 2.4vmin, 0.74rem);
  font-weight: 700;
  line-height: 1;
}

.board-wrap--welcome .board-flip-corner,
.board-wrap--welcome .board-resize-handle {
  visibility: hidden;
  pointer-events: none;
}

.board-welcome-screen {
  position: absolute;
  inset: 0;
  z-index: 15;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0.45rem 0.35rem 0.5rem;
  border-radius: var(--board-corner-radius);
  background: color-mix(in srgb, var(--warm-card, #36312d) 97%, #000 3%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.board-welcome-screen[hidden] {
  display: none !important;
}

.board-welcome-hint {
  flex-shrink: 0;
  margin: 0 0 0.4rem;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--warm-muted, rgba(255, 255, 255, 0.52));
}

.board-welcome-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  align-content: start;
  padding: 0.08rem 0.04rem 0.15rem;
  -webkit-overflow-scrolling: touch;
}

.board-welcome-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: center;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}

.board-welcome-tile:focus-visible {
  outline: 2px solid var(--accent, #c9a962);
  outline-offset: 2px;
}

.board-welcome-tile__cover-wrap {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 3 / 4;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.board-welcome-tile__cover-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.board-welcome-tile:hover .board-welcome-tile__cover-wrap,
.board-welcome-tile:focus-visible .board-welcome-tile__cover-wrap {
  border-color: color-mix(in srgb, var(--accent, #c9a962) 50%, transparent);
}

.board-welcome-tile__title {
  font-size: clamp(0.55rem, 1.65vw, 0.74rem);
  font-weight: 600;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Координаты на рамке: без оверлея на широком портрете и в ландшафте с мышью (не скачок при ~1021). */
@media (min-width: 1021px), ((orientation: landscape) and (pointer: fine)) {
  .board-coord-overlay {
    display: none;
  }
}

.board-coord-cell {
  position: relative;
  pointer-events: none;
}

.board-coord-file {
  position: absolute;
  left: 2px;
  bottom: 1px;
  color: var(--coord-ink-on-light, var(--lichess-dark));
}

.board-coord-rank {
  position: absolute;
  right: 2px;
  top: 1px;
  color: var(--coord-ink-on-dark, var(--lichess-light));
}

.board-coord-cell.on-light-square .board-coord-file,
.board-coord-cell.on-light-square .board-coord-rank {
  color: var(--coord-ink-on-light);
}

.board-coord-cell.on-dark-square .board-coord-file,
.board-coord-cell.on-dark-square .board-coord-rank {
  color: var(--coord-ink-on-dark);
}

.coord-files {
  position: absolute;
  left: var(--frame-pad);
  right: var(--frame-pad);
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  align-items: center;
  justify-items: center;
  font-size: var(--coord-font-size);
  line-height: 1;
  color: var(--coord-color);
  letter-spacing: 0.01em;
  filter: brightness(var(--frame-brightness)) contrast(var(--frame-contrast));
}

.coord-files span {
  display: inline-block;
  transform: translateY(0.02rem);
}

.coord-files.bottom {
  bottom: 0.16rem;
}

.coord-ranks {
  position: absolute;
  top: var(--frame-pad);
  bottom: var(--frame-pad);
  display: grid;
  grid-template-rows: repeat(8, 1fr);
  align-items: center;
  justify-items: center;
  font-size: var(--coord-font-size);
  line-height: 1;
  color: var(--coord-color);
  filter: brightness(var(--frame-brightness)) contrast(var(--frame-contrast));
}

.coord-ranks.left {
  left: 0.18rem;
  width: 0.52rem;
}

.square {
  position: relative;
  width: 100%;
  height: 100%;
}

.square.tap-selected {
  box-shadow: inset 0 0 32px 18px rgba(255, 230, 80, 0.22) !important;
}

.tap-move-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(62%, 3.1rem);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  z-index: 4;
  border: none;
  outline: none;
  box-shadow: none;
  /* Только градиент: яркая точка в центре, без контуров — плавно в прозрачность (цвет поля проступает) */
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 255, 220, 1) 0%,
    rgba(255, 248, 80, 0.92) 3%,
    rgba(255, 235, 50, 0.55) 14%,
    rgba(255, 210, 45, 0.28) 30%,
    rgba(255, 185, 40, 0.12) 48%,
    rgba(255, 170, 35, 0.04) 65%,
    transparent 82%
  );
}

.board .piece.tap-piece-glow {
  filter: drop-shadow(0 0 14px rgba(255, 235, 50, 0.45));
}

/* ——— Темы полей ——— */
.board-theme-classic .square.light {
  background: var(--lichess-light);
}

.board-theme-classic .square.dark {
  background: var(--lichess-dark);
}

/* Песочно-серая */
.board-theme-sand-gray .square.light {
  background: #cec690;
}

.board-theme-sand-gray .square.dark {
  background: #6e6156;
}

/* «Коричневая» как на Lichess */
.board-theme-lichess-brown .square.light {
  background: #f0d9b5;
}

.board-theme-lichess-brown .square.dark {
  background: #b58863;
}

/* Зелёная (Lichess default green) */
.board-theme-lichess-green .square.light {
  background: #eeeed2;
}

.board-theme-lichess-green .square.dark {
  background: #769656;
}

/* Синяя */
.board-theme-lichess-blue .square.light {
  background: #dee3e6;
}

.board-theme-lichess-blue .square.dark {
  background: #8ca2ad;
}

/* Серая (icy) */
.board-theme-lichess-gray .square.light {
  background: #e8e9ec;
}

.board-theme-lichess-gray .square.dark {
  background: #9facb7;
}

.board-theme-lichess-purple .square.light {
  background: #e5e0e9;
}

.board-theme-lichess-purple .square.dark {
  background: #9f90b0;
}

.board-theme-lichess-ic .square.light {
  background: #eceff1;
}

.board-theme-lichess-ic .square.dark {
  background: #5d7479;
}

.board-theme-lichess-pink .square.light {
  background: #fef0f6;
}

.board-theme-lichess-pink .square.dark {
  background: #d48ab0;
}

.board-theme-lichess-red .square.light {
  background: #fff0f0;
}

.board-theme-lichess-red .square.dark {
  background: #c86a6a;
}

.board-theme-lichess-orange .square.light {
  background: #fff4e6;
}

.board-theme-lichess-orange .square.dark {
  background: #d99555;
}

.board-theme-lichess-yellow .square.light {
  background: #ffffdd;
}

.board-theme-lichess-yellow .square.dark {
  background: #d8c86d;
}

.board-theme-lichess-olive .square.light {
  background: #eeeed6;
}

.board-theme-lichess-olive .square.dark {
  background: #6b6b3f;
}

/* Выпадающий выбор темы доски (настройки): превью 2×2 без подписей */
.board-theme-picker {
  --board-theme-swatch-size: 9.4rem; /* 2.35rem × 4 */
  position: relative;
  margin-top: 0.25rem;
}

.board-theme-picker__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 3.85rem;
  padding: 0.55rem 0.55rem;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--warm-ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
}

.board-theme-picker__trigger:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--input-border));
}

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

.board-theme-picker__trigger-preview,
.piece-set-picker__trigger-preview {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-width: 0;
  min-height: 2.65rem;
  margin-right: 0.35rem;
}

.board-theme-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  width: 100%;
  height: 100%;
  min-height: 2.65rem;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warm-ink) 18%, transparent);
}

.board-theme-strip__cell {
  display: block;
  min-width: 0;
  min-height: 0;
}

.board-theme-picker__chevron {
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.15rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: 0.55;
}

.board-theme-swatch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: var(--board-theme-swatch-size, 9.4rem);
  height: var(--board-theme-swatch-size, 9.4rem);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warm-ink) 18%, transparent);
}

.board-theme-swatch__cell {
  display: block;
  min-width: 0;
  min-height: 0;
}

.board-theme-picker__menu {
  position: absolute;
  z-index: 120;
  top: calc(100% + 0.28rem);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.5rem;
  list-style: none;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: var(--warm-card-elev);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  max-height: min(42rem, 80vh);
  overflow-y: auto;
}

.board-theme-picker__menu[hidden] {
  display: none !important;
}

.board-theme-picker__option {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem;
  border-radius: 10px;
  cursor: pointer;
  border: 2px solid transparent;
  min-width: 0;
}

.board-theme-picker__menu .board-theme-swatch {
  width: 100%;
  height: auto;
  max-width: var(--board-theme-swatch-size, 9.4rem);
  aspect-ratio: 1;
  margin-inline: auto;
}

.board-theme-picker__option:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.board-theme-picker__option.is-selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* Страница настроек: единый вид подписей и выпадашек (как «Тема доски») */
#settingsForm .field > span,
#settingsForm .board-theme-field > span {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--warm-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#settingsForm .field select {
  width: 100%;
  min-height: 2.75rem;
  margin-top: 0;
  padding: 0.45rem 2.1rem 0.45rem 0.5rem;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background-color: var(--input-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%23a89e94' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 0.55rem auto;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--warm-ink);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

#settingsForm .field select:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--input-border));
}

#settingsForm .field select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#settingsForm .board-theme-picker__trigger,
#settingsForm .field select {
  box-sizing: border-box;
}

#settingsForm .board-theme-picker {
  margin-top: 0;
}

/* Набор фигур: превью белых К Ф Л С К п в ряд */
.piece-set-picker {
  position: relative;
  margin-top: 0;
}

.piece-set-picker__menu {
  position: absolute;
  z-index: 120;
  top: calc(100% + 0.28rem);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: var(--warm-card-elev);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  max-height: min(28rem, 72vh);
  overflow-y: auto;
}

.piece-set-picker__menu[hidden] {
  display: none !important;
}

.piece-set-picker__option {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.55rem;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  min-width: 0;
}

.piece-set-picker__option:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.piece-set-picker__option.is-selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.piece-set-preview {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  width: 100%;
}

.piece-set-preview--trigger {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  width: 100%;
  height: 100%;
  min-height: 2.65rem;
  gap: 0;
}

.piece-set-preview--trigger .piece-set-preview__piece {
  width: 100%;
  height: 100%;
  max-height: clamp(1.85rem, 6.2vw, 2.65rem);
  margin-inline: auto;
  object-fit: contain;
  object-position: bottom center;
}

.piece-set-preview--menu .piece-set-preview__piece {
  width: 2.475rem;
  height: 2.475rem;
}

.piece-set-preview__piece {
  display: block;
  object-fit: contain;
  flex: 0 0 auto;
  pointer-events: none;
}

/* Текстурные деревянные темы (без внешних файлов) */
.board-theme-wood-maple .square.light {
  background:
    radial-gradient(circle at 20% 28%, rgba(255, 255, 255, 0.22), transparent 55%),
    linear-gradient(115deg, #d2b07f 0%, #c79f6d 45%, #be9461 100%);
}

.board-theme-wood-maple .square.dark {
  background:
    radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.1), transparent 50%),
    linear-gradient(125deg, #8e6239 0%, #7a5431 46%, #6a4a2c 100%);
}

.board-theme-wood-oak .square.light {
  background:
    repeating-linear-gradient(
      88deg,
      rgba(255, 255, 255, 0.05) 0 2px,
      rgba(255, 255, 255, 0) 2px 5px
    ),
    linear-gradient(120deg, #e0c18f 0%, #d7b27b 48%, #cda56c 100%);
}

.board-theme-wood-oak .square.dark {
  background:
    repeating-linear-gradient(
      92deg,
      rgba(0, 0, 0, 0.08) 0 2px,
      rgba(0, 0, 0, 0) 2px 5px
    ),
    linear-gradient(120deg, #8d5f34 0%, #7c532f 47%, #714b2b 100%);
}

.board-theme-wood-walnut .square.light {
  background:
    linear-gradient(118deg, #ceb38b 0%, #c3a176 46%, #b89266 100%);
}

.board-theme-wood-walnut .square.dark {
  background:
    linear-gradient(122deg, #70492f 0%, #603f29 48%, #523623 100%);
}

.board-theme-wood-rosewood .square.light {
  background:
    linear-gradient(120deg, #d2b293 0%, #c89f7d 44%, #bb8f6f 100%);
}

.board-theme-wood-rosewood .square.dark {
  background:
    linear-gradient(125deg, #6c3940 0%, #5a3037 48%, #4a282f 100%);
}

.board-theme-wood-ebony .square.light {
  background:
    linear-gradient(120deg, #c9c3b8 0%, #bbb3a6 50%, #ada496 100%);
}

.board-theme-wood-ebony .square.dark {
  background:
    linear-gradient(122deg, #3e3b3a 0%, #32302f 48%, #282625 100%);
}

/* Дерево: фото + лёгкая тонировка светлых/тёмных */
.board-theme-wood {
  background-image: url("/static/boards/wood.png");
  box-shadow:
    0 6px 28px rgba(40, 28, 20, 0.35),
    inset 0 0 0 2px rgba(255, 250, 245, 0.2);
}

.board-theme-wood .square.light {
  background: rgba(253, 246, 232, 0.38);
}

.board-theme-wood .square.dark {
  background: rgba(62, 42, 28, 0.5);
}

.board-theme-wood .square.hint {
  box-shadow: inset 0 0 0 2px rgba(206, 188, 65, 0.55);
}

.board-theme-wood .square.lastmove {
  background-color: var(--lichess-last-strong) !important;
}

.square.lastmove {
  background-color: var(--lichess-last) !important;
}

.square.hint {
  box-shadow: inset 0 0 0 2px var(--lichess-hi);
}

.square.hint-dest::after {
  content: "";
  position: absolute;
  width: 26%;
  height: 26%;
  left: 37%;
  top: 37%;
  border-radius: 50%;
  background: rgba(92, 132, 54, 0.42);
  box-shadow: 0 0 0 1px rgba(58, 79, 33, 0.28);
  pointer-events: none;
}

.piece.hint-piece {
  filter:
    drop-shadow(0 0 0.5px rgba(40, 60, 25, 0.9))
    drop-shadow(0 0 5px rgba(190, 195, 84, 0.8));
}

.square.drag-over {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.piece {
  position: absolute;
  inset: 2%;
  width: 96%;
  height: 96%;
  object-fit: contain;
  cursor: grab;
  pointer-events: auto;
  z-index: 2;
}

.piece.dragging {
  cursor: grabbing;
  z-index: 10;
  opacity: 0.92;
  transform: scale(1.06);
}

.board-tools {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
}

.controls {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--warm-muted);
}

.field.grow {
  flex: 1;
}

.field input,
.field select {
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--warm-ink);
  font-size: 1rem;
}

.nav-row {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}

.btn {
  padding: 0.55rem 1rem;
  border-radius: 10px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.9rem;
  transition:
    background 0.15s ease,
    transform 0.08s ease,
    box-shadow 0.15s ease;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
}

.btn:hover {
  background: var(--accent-hover);
}

.btn:active {
  transform: translateY(1px);
  box-shadow: none;
}

.btn.secondary {
  background: var(--btn-secondary-bg);
}

.btn.secondary:hover {
  background: var(--btn-secondary-hover);
}

.btn.ghost {
  background: transparent;
  color: var(--warm-ink);
  border: 1px solid var(--ghost-border);
  box-shadow: none;
}

.btn.ghost:hover {
  background: var(--ghost-hover-bg);
}

/* Единый размер «инструментальных» кнопок */
.btn-tool {
  min-height: 2.75rem;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
}

.btn-icon-only {
  width: 2.75rem;
  min-width: 2.75rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-icon-emoji,
.btn-inline-ico {
  font-size: 1.1rem;
  line-height: 1;
  pointer-events: none;
}

.btn-inline-ico {
  margin-right: 0.35rem;
  font-size: 1rem;
}

.btn-block {
  width: 100%;
}

.hint-block-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.board-link-row {
  width: min(100%, var(--board-px));
  margin-top: 0.1rem;
}

.board-link-row .btn {
  width: 100%;
}

.eval-gauge-shell {
  width: 100%;
  margin-top: 4px;
  height: 10px;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    rgba(40, 36, 32, 0.95) 0%,
    rgba(72, 67, 59, 0.9) 100%
  );
  box-shadow: inset 0 0 0 1px rgba(201, 169, 98, 0.25);
}

.eval-gauge-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--eval-fill-pct, 50%);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 78%, #fff 22%) 0%,
    color-mix(in srgb, var(--accent) 60%, #000 40%) 100%
  );
}

.eval-gauge-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 14px;
  border-radius: 6px;
  background: rgba(24, 22, 20, 0.96);
  border: 1px solid rgba(201, 169, 98, 0.42);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  line-height: 1;
  color: #f3ead8;
  font-weight: 700;
}

.eval-gauge-marker {
  position: absolute;
  top: 50%;
  left: var(--eval-marker-pct, 50%);
  width: 30px;
  height: 14px;
  transform: translateX(-50%);
  margin-top: -7px;
  border-radius: 6px;
  background: rgba(24, 22, 20, 0.96);
  border: 1px solid rgba(201, 169, 98, 0.42);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.eval-gauge-marker-label {
  font-size: 0.62rem;
  line-height: 1;
  color: #f3ead8;
  font-weight: 700;
}

.hint-block-tools .btn-tool {
  flex: 1 1 auto;
  min-width: 8.5rem;
}

.nav-row-tight {
  align-items: flex-end;
}

.nav-row-tight .btn-icon-only {
  flex-shrink: 0;
  margin-bottom: 1px;
}

.status {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  background: var(--muted-fill);
  border: 1px solid var(--panel-border);
  font-size: 0.95rem;
  line-height: 1.45;
  font-family: inherit;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  hyphens: auto;
  text-align: justify;
  text-align-last: start;
  text-wrap: pretty;
}

.status.solved {
  border-color: #9ccc9c;
  background: rgba(58, 125, 68, 0.1);
  color: var(--ok);
}

.status.error {
  border-color: #e8a0a0;
  background: rgba(192, 68, 68, 0.08);
  color: var(--danger);
}

.status.success {
  border-color: #82b96f;
  background: rgba(34, 52, 30, 0.75);
}

.status-praise {
  color: #58d16a;
  font-weight: 800;
  margin-bottom: 0.2rem;
}

.status-ok-text {
  color: #fff;
  font-weight: 800;
  line-height: 1.24;
}

.status-next-hint {
  margin-top: 0.35rem;
  font-size: 0.76rem;
  opacity: 0.85;
  line-height: 1.24;
}

.grading-modes {
  margin: 0.6rem 0 0;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  background: var(--muted-fill);
  border: 1px solid var(--panel-border);
}

.grading-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--warm-muted);
  margin-bottom: 0.35rem;
}

.grading-row {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--warm-ink);
  margin: 0.25rem 0;
  cursor: pointer;
}

.grading-row input {
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.engine-tuning {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  margin: 0.45rem 0 0;
  align-items: flex-end;
}

.field.tight {
  margin: 0;
}

.field.tight input[type="number"] {
  width: 4.5rem;
  padding: 0.25rem 0.35rem;
}

.engine-opt {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--warm-muted);
  cursor: pointer;
}

.engine-opt input {
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.eval-bar {
  margin-top: 0.65rem;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  background: var(--muted-fill);
  border: 1px solid var(--panel-border);
  font-size: 0.84rem;
  line-height: 1.45;
}

.eval-bar strong {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--warm-muted);
  margin-bottom: 0.35rem;
}

.eval-bar .eval-detail {
  margin: 0;
  color: var(--warm-ink);
}

.lichess-out {
  margin: 0.55rem 0 0;
}

.lichess-out .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-align: center;
}

.meta {
  font-size: 0.95rem;
  color: var(--warm-muted);
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.meta .meta-id {
  font-size: 0.8rem;
  opacity: 0.9;
}

.meta .meta-book-authors {
  display: block;
  font-size: 0.78rem;
  color: var(--warm-ink);
  opacity: 0.9;
  margin-top: 0.2rem;
  line-height: 1.35;
}

.hint-block {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.preamble-muted {
  color: var(--warm-muted);
  font-size: 0.92rem;
}

.preamble.preamble-structured {
  white-space: normal;
}

.preamble .preamble-messa-turn {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.55rem;
  margin-bottom: 0.35rem;
}

.preamble .preamble-messa-stars {
  margin-left: 2ch;
  color: var(--accent);
  letter-spacing: 0.06em;
  font-size: 0.92em;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}

.preamble .preamble-messa-theme {
  margin-bottom: 0.35rem;
}

.preamble .preamble-messa-body strong {
  font-weight: 600;
}

.preamble {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--warm-ink);
  background: var(--warm-card-elev);
  border-radius: var(--board-corner-radius);
  border: 1px dashed var(--input-border);
  overflow: visible;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  text-align: justify;
  text-align-last: start;
  text-wrap: pretty;
  font-variant-numeric: tabular-nums;
  /* Символы шахматных фигур (Unicode) */
  font-family:
    "Segoe UI",
    "Segoe UI Symbol",
    "Noto Sans Symbols 2",
    system-ui,
    sans-serif;
}

.compact-controls {
  margin-bottom: 0.4rem;
}

.mini-field {
  max-width: 110px;
}

.puzzle-header {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
  align-items: start;
  margin-bottom: 0.6rem;
  padding: 0.5rem;
  border: 1px solid var(--panel-border);
  border-radius: var(--board-corner-radius);
  background: var(--muted-fill);
}

.puzzle-header-body {
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  padding-right: 5.35rem;
}

.puzzle-header-body .chapter-tag {
  margin-bottom: 0;
}

.chapter-tag-stack {
  position: relative;
  width: 100%;
  align-self: stretch;
  min-width: 0;
}

.puzzle-task-line {
  position: relative;
  margin-top: 0.35rem;
}

.puzzle-header-body .puzzle-task-line {
  margin-top: 0;
}

.meta-task-trigger {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.15rem 0.35rem;
  margin: 0;
  padding: 0.15rem 0;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  background: transparent;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  text-align: left;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.meta-task-trigger:hover {
  color: var(--accent-hover);
}

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

/* Кнопка списка номеров без текста «Задача №» в шапке (символ #). */
.meta-task-trigger--icon {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 700;
  padding: 0.12rem 0.42rem;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 6px;
  line-height: 1;
  white-space: nowrap;
  max-width: none;
  overflow-wrap: normal;
  word-break: normal;
}

.meta-task-trigger__icon {
  display: inline-block;
  font-size: 1.05em;
  line-height: 1;
}

.meta-task-trigger:disabled {
  opacity: 0.45;
  cursor: default;
}

.meta-task-stars {
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--accent);
}

.meta-book-progress {
  margin-top: 0.2rem;
  font-size: 0.8rem;
  line-height: 1.35;
  font-weight: 500;
  color: var(--warm-ink);
  opacity: 0.88;
  font-variant-numeric: tabular-nums;
}

.puzzle-task-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.2rem);
  z-index: 60;
  max-height: min(52vh, 340px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.55rem 0.6rem;
  border-radius: 12px;
  border: 2px solid var(--accent);
  /* Почти непрозрачный фон — список номеров читается лучше */
  background: linear-gradient(
    165deg,
    rgba(228, 218, 200, 0.97) 0%,
    rgba(200, 186, 162, 0.96) 42%,
    rgba(48, 44, 38, 0.99) 100%
  );
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(201, 169, 98, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.puzzle-task-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 0.22rem;
}

.puzzle-task-link {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  min-height: 2.05rem;
  padding: 0.18rem 0.12rem;
  margin: 0;
  font-size: 0.76rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--warm-ink);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(201, 169, 98, 0.35);
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
}

.puzzle-task-link:hover {
  background: rgba(242, 206, 96, 0.42);
  border-color: rgba(242, 206, 96, 0.92);
  color: var(--warm-ink);
}

.puzzle-task-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.puzzle-task-link.is-current {
  background: rgba(201, 169, 98, 0.45);
  border-color: var(--accent);
  color: #1a1510;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.puzzle-task-link.is-solved:not(.is-current) {
  border-color: rgba(72, 145, 85, 0.55);
  background: rgba(72, 145, 85, 0.16);
  color: var(--warm-ink);
}

.puzzle-task-link.is-solved-second:not(.is-current) {
  border-color: rgba(188, 154, 68, 0.62);
  background: rgba(188, 154, 68, 0.2);
  color: var(--warm-ink);
}

.puzzle-task-link.is-solved-thirdplus:not(.is-current) {
  border-color: rgba(180, 82, 72, 0.62);
  background: rgba(180, 82, 72, 0.2);
  color: var(--warm-ink);
}

.puzzle-task-link.is-solved.is-current {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.2),
    inset 0 0 0 2px rgba(72, 145, 85, 0.55);
}

.puzzle-task-link.is-solved-second.is-current {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.2),
    inset 0 0 0 2px rgba(188, 154, 68, 0.62);
}

.puzzle-task-link.is-solved-thirdplus.is-current {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.2),
    inset 0 0 0 2px rgba(180, 82, 72, 0.62);
}

/* Нерешённые: внешняя 1px окантовка как у закрашенных 2-й / 3+; внутри — «неполная» заливка inset */
.puzzle-task-link.is-live-fail-1:not(.is-current) {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(188, 154, 68, 0.62);
  box-shadow: inset 0 0 0 6px rgba(188, 154, 68, 0.2);
  color: var(--warm-ink);
}

.puzzle-task-link.is-live-fail-2:not(.is-current) {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(180, 82, 72, 0.62);
  box-shadow: inset 0 0 0 6px rgba(180, 82, 72, 0.2);
  color: var(--warm-ink);
}

.puzzle-task-link.is-live-fail-1.is-current {
  background: rgba(201, 169, 98, 0.45);
  border: 1px solid rgba(188, 154, 68, 0.62);
  color: #1a1510;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.2),
    inset 0 0 0 6px rgba(188, 154, 68, 0.2);
}

.puzzle-task-link.is-live-fail-2.is-current {
  background: rgba(201, 169, 98, 0.45);
  border: 1px solid rgba(180, 82, 72, 0.62);
  color: #1a1510;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.2),
    inset 0 0 0 6px rgba(180, 82, 72, 0.2);
}

.puzzle-task-link.is-live-fail-1:not(.is-current):hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(188, 154, 68, 0.62);
  box-shadow: inset 0 0 0 6px rgba(188, 154, 68, 0.28);
  color: var(--warm-ink);
}

.puzzle-task-link.is-live-fail-2:not(.is-current):hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(180, 82, 72, 0.62);
  box-shadow: inset 0 0 0 6px rgba(180, 82, 72, 0.28);
  color: var(--warm-ink);
}

.book-thumb {
  display: block;
  width: 72px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid rgba(0, 0, 0, 0.35);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.puzzle-header-fabs {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  z-index: 25;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.3rem;
}

/* Кнопка «??» — сообщение об ошибке в задаче */
.puzzle-feedback-fab {
  position: static;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  margin: 0;
  border: 1px solid var(--accent-hover);
  border-radius: 50%;
  background: var(--input-bg);
  background-image: url("/static/icons/menu/puzzle-feedback.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 56% 56%;
  color: transparent;
  font-size: 0;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.puzzle-admin-edit-fab {
  position: static;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, #000 45%);
  border-radius: 50%;
  background: var(--input-bg);
  background-image: url("/static/icons/menu/admin-edit.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 52% 52%;
  color: transparent;
  font-size: 0;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Иначе display:inline-flex перебивает [hidden] — кнопка видна не-админам. */
#btnPuzzleAdminEdit[hidden] {
  display: none !important;
}

.puzzle-admin-edit-fab:hover {
  border-color: var(--accent-hover);
  background: color-mix(in srgb, var(--accent) 18%, var(--input-bg));
}

.puzzle-admin-edit-fab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.puzzle-feedback-fab:hover {
  border-color: color-mix(in srgb, var(--danger) 85%, #000 15%);
  background: var(--danger);
  color: #fff8f0;
  box-shadow: 0 2px 8px rgba(192, 68, 68, 0.35);
}

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

.admin-editor-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

/* Палитра слева, Сохранить / Отменить справа в колонку */
.admin-editor-palette-toolbar {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0.22rem;
  width: 100%;
  min-width: 0;
}

.admin-editor-palette-toolbar .admin-piece-palette {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}

.admin-editor-palette-toolbar .admin-editor-head-actions {
  flex: 0 0 auto;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  gap: 0.16rem;
  min-width: 4.25rem;
}

.admin-editor-palette-toolbar .admin-editor-head-btn {
  width: 100%;
  box-sizing: border-box;
  padding: 0.1rem 0.28rem;
  font-size: 0.6rem;
}

.admin-editor-turn-field .admin-editor-turn {
  margin-bottom: 0;
}

/* Админ-редактор: палитра сверху, форма в прокручиваемой колонке — основная доска не уезжает */
#adminEditorPanel.admin-editor-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: min(88vh, 52rem);
  overflow: hidden;
  gap: 0.2rem;
  font-size: 0.76rem;
}

body.admin-editor-open #adminEditorPanel.admin-editor-panel:not([hidden]) {
  max-height: min(52rem, calc(100dvh - var(--site-header-height, 52px) - 1.75rem));
}

/* Иначе display:flex из правила выше перебивает UA [hidden] и панель остаётся видимой после «Отменить». */
#adminEditorPanel.admin-editor-panel[hidden] {
  display: none !important;
}

#adminEditorPanel.admin-editor-panel .admin-editor-hint {
  font-size: 0.68rem;
  line-height: 1.32;
  margin: 0 0 0.32rem;
}

#adminEditorPanel.admin-editor-panel .settings-field .field,
#adminEditorPanel.admin-editor-panel label.field.tight {
  font-size: 0.72rem;
}

#adminEditorPanel.admin-editor-panel .settings-field input,
#adminEditorPanel.admin-editor-panel .settings-field textarea,
#adminEditorPanel.admin-editor-panel .settings-field select {
  font-size: 0.72rem;
}

.admin-editor-head-btn {
  padding: 0.16rem 0.42rem;
  font-size: 0.66rem;
  line-height: 1.2;
  min-height: 0;
}

.admin-editor-top {
  flex-shrink: 0;
}

.admin-editor-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  padding: 0.28rem 0.12rem 0.2rem 0;
  margin-top: 0.06rem;
  border-top: 1px solid var(--panel-border);
}

.puzzle-feedback-popover {
  position: absolute;
  top: 2.85rem;
  right: 0.35rem;
  z-index: 80;
  width: min(17.5rem, calc(100% - 0.5rem));
  max-width: calc(100vw - 1.5rem);
  padding: 0.55rem 0.6rem 0.6rem;
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  background: var(--warm-card);
  box-shadow: var(--shadow);
  box-sizing: border-box;
}

.puzzle-feedback-popover-title {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--warm-muted);
}

.puzzle-feedback-text {
  width: 100%;
  box-sizing: border-box;
  min-height: 4.2rem;
  margin: 0 0 0.45rem;
  padding: 0.4rem 0.45rem;
  font: inherit;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--warm-ink);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 8px;
  resize: vertical;
}

.puzzle-feedback-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.35rem;
}

.admin-feedback-log-wrap {
  margin-top: 0.35rem;
}

.admin-feedback-list {
  max-height: min(72vh, 620px);
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0.35rem 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem 0.55rem;
  align-items: start;
}

@media (max-width: 900px) {
  .admin-feedback-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .admin-feedback-list {
    grid-template-columns: 1fr;
  }
}

.admin-feedback-item {
  padding: 0.45rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: var(--muted-fill);
  font-size: 0.72rem;
  line-height: 1.35;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.admin-feedback-item__meta {
  color: var(--warm-muted);
}

.admin-feedback-item__text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  color: var(--warm-ink);
  font-size: 0.78rem;
  line-height: 1.4;
}

.admin-feedback-item__visual {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.admin-feedback-book-cover {
  width: 64px;
  max-width: 34%;
  min-width: 48px;
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.32);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  flex-shrink: 0;
  user-select: none;
}

.admin-feedback-thumb {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  line-height: 0;
  max-width: 100%;
}

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

.admin-feedback-thumb-placeholder {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  min-width: 4.5rem;
  min-height: 5.5rem;
  padding: 0.35rem 0.45rem;
  border-radius: 8px;
  border: 1px dashed color-mix(in srgb, var(--panel-border) 55%, #c9a962 45%);
  background: color-mix(in srgb, var(--warm-card) 88%, #1e1a17 12%);
  flex-shrink: 0;
}

.admin-feedback-thumb-placeholder span {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--warm-muted) 55%, #e8c86b 45%);
  text-align: center;
  line-height: 1.25;
}

.admin-feedback-mini-board.board {
  width: 100%;
  max-width: 248px;
  min-width: 140px;
  aspect-ratio: 1;
  border-radius: 6px;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.22),
    inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.admin-feedback-thumb:hover .admin-feedback-mini-board.board {
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.28),
    inset 0 0 0 2px var(--accent-hover);
}

.admin-feedback-thumb:hover .admin-feedback-book-cover {
  border-color: var(--accent-hover);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
}

.admin-feedback-mini-board .piece {
  cursor: inherit;
  pointer-events: none;
}

.admin-feedback-item__book {
  font-weight: 600;
  color: var(--warm-ink);
  font-size: 0.76rem;
  line-height: 1.25;
}

.admin-feedback-item__tasknum {
  font-size: 0.72rem;
  color: var(--accent);
  font-weight: 600;
}

.admin-feedback-item__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}

.admin-feedback-item .btn.admin-feedback-btn {
  font-size: 0.58rem;
  padding: 0.1rem 0.28rem;
  line-height: 1.2;
}

.side-panel {
  padding: 0.9rem;
}

.side-actions {
  padding-top: 0.8rem;
}

.control-strip {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem 2.75rem 2.75rem;
  gap: 0.45rem;
  align-items: center;
  margin-bottom: 0.6rem;
}

/* Навигация, звёзды, сетка 2×2, ряд иконок движок / Lichess */
.nav-star-panel {
  --action-tile-size: 4.6rem;
  --action-grid-gap: 0.22rem;
  /* Высота сетки 2×2 + ряд движок/Lichess = три «ряда» маленьких кнопок */
  --action-stack-height: calc(
    var(--action-tile-size) * 1.5 + var(--action-grid-gap) / 2
  );
  margin-bottom: 0.65rem;
}

.side-actions-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.15rem 0.1rem;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.nav-star-cluster {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0.08rem 0.12rem;
  min-width: 0;
  flex: 1 1 auto;
}

.action-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--action-grid-gap);
  flex: 0 0 auto;
}

/* Сетка 2×2: суммарная ширина = сторона квадрата «вперёд» раньше; ряд движок / Lichess — те же колонки */
.action-grid-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--action-grid-gap);
  width: var(--action-tile-size);
  height: var(--action-tile-size);
  flex: 0 0 auto;
  box-sizing: border-box;
}

.action-engine-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--action-grid-gap);
  width: var(--action-tile-size);
  box-sizing: border-box;
}

.action-engine-slot {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  min-height: 0;
}

.action-engine-slot .btn-action-tile {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

.btn-action-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0.06rem;
  box-sizing: border-box;
}

.btn-action-tile__glyph {
  font-size: 1.05rem;
  line-height: 1;
  pointer-events: none;
}

.btn-action-icon {
  display: block;
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  pointer-events: none;
}

#btnHint .btn-action-icon {
  color: #e0c040;
}

#btnSolution .btn-action-icon {
  color: #d9534f;
}

.lichess-logo-img {
  display: block;
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  object-fit: contain;
}

html[data-app-theme="white"] .lichess-logo-img,
html[data-app-theme="warm-beige"] .lichess-logo-img {
  filter: invert(1);
}

.stockfish-logo-img {
  display: block;
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

#btnPlayOut.btn-action-tile {
  padding: 0.12rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

#btnPlayOut .stockfish-logo-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  object-fit: contain;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}

a.btn-nav-ctrl.btn-action-tile {
  text-decoration: none;
  color: inherit;
}

a.btn-nav-ctrl.btn-action-tile:hover {
  color: inherit;
  text-decoration: none;
}

.btn-nav-ctrl {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(155deg, #34302d 0%, #2a2725 100%);
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease,
    transform 0.08s ease;
}

/* Узкая «назад», широкая «вперёд»; высота = суммарная высота правого блока (три ряда маленьких кнопок) */
.btn-nav-prev {
  width: 2.15rem;
  flex: 0 0 auto;
  height: var(--action-stack-height);
  min-height: var(--action-stack-height);
  padding: 0.28rem 0.16rem;
  border-radius: 12px 8px 8px 12px;
}

.btn-nav-next {
  margin-left: 0.2rem;
  width: calc(var(--action-tile-size) * 1.5 + var(--action-grid-gap) / 2);
  min-width: calc(var(--action-tile-size) * 1.5 + var(--action-grid-gap) / 2);
  flex: 0 0 auto;
  height: var(--action-stack-height);
  min-height: var(--action-stack-height);
  padding: 0.32rem;
  border-radius: 12px;
}

.btn-nav-ctrl:hover {
  background: linear-gradient(155deg, #3d3936 0%, #302e2c 100%);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.92);
}

.btn-nav-ctrl:active {
  transform: translateY(1px);
}

.btn-nav-ctrl:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.35);
  outline-offset: 2px;
}

.btn-nav-glyph {
  line-height: 1;
  pointer-events: none;
  color: inherit;
}

.btn-nav-glyph--prev {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.06em;
  font-size: 1.12rem;
}

.btn-nav-chev {
  display: inline-block;
  font-size: 1em;
  line-height: 1;
}

.btn-nav-glyph--next {
  font-size: 3.05rem;
  line-height: 1;
}

.btn-nav-next .btn-nav-glyph--next {
  color: #4caf50;
}

.btn-nav-ctrl.btn-nav-next:hover .btn-nav-glyph--next,
.btn-nav-ctrl.btn-nav-next:focus-visible .btn-nav-glyph--next {
  color: #5cbf6a;
}

.btn-nav-ctrl#btnHint:hover .btn-action-icon,
.btn-nav-ctrl#btnHint:focus-visible .btn-action-icon {
  color: #f0d050;
}

.btn-nav-ctrl#btnSolution:hover .btn-action-icon,
.btn-nav-ctrl#btnSolution:focus-visible .btn-action-icon {
  color: #e86b66;
}

.task-star-rating {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 0.06rem;
  min-width: 0;
  max-width: none;
  padding: 0;
}

.task-star-rating--disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* Крупные звёзды в одной линии с кнопками (под внутреннюю ширину боковой панели) */
.task-star-btn {
  flex: 0 0 auto;
  width: 3.8rem;
  height: 3.8rem;
  min-width: 3.8rem;
  min-height: 3.8rem;
  margin: 0;
  padding: 0.05rem;
  border: none;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  color: var(--warm-muted);
  transition:
    transform 0.1s ease,
    filter 0.12s ease;
}

.task-star-btn .task-star-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.task-star-btn .task-star-path {
  fill: rgba(20, 18, 16, 0.35);
  stroke: rgba(201, 169, 98, 0.78);
  stroke-width: 1.25;
  transition: fill 0.12s ease;
}

.task-star-btn.is-active .task-star-path {
  fill: #e8cf7a;
}

/* Единая палитра звёзд только в мобильном попапе (на десктопе — общие .task-star-btn и хром как у .btn-nav-ctrl). */
#taskStarRating.task-star-rating--mobile-fixed .task-star-path {
  fill: rgba(56, 60, 68, 0.96);
}

#taskStarRating.task-star-rating--mobile-fixed .task-star-btn.is-active .task-star-path {
  fill: #ffd84a;
}

#taskStarRating.task-star-rating--mobile-fixed[data-preview-stars]:not(
    .task-star-rating--disabled
  )
  .task-star-btn
  .task-star-path {
  fill: rgba(56, 60, 68, 0.96);
}

#taskStarRating.task-star-rating--mobile-fixed[data-preview-stars="1"]:not(
    .task-star-rating--disabled
  )
  .task-star-btn:nth-child(-n + 1)
  .task-star-path,
#taskStarRating.task-star-rating--mobile-fixed[data-preview-stars="2"]:not(
    .task-star-rating--disabled
  )
  .task-star-btn:nth-child(-n + 2)
  .task-star-path,
#taskStarRating.task-star-rating--mobile-fixed[data-preview-stars="3"]:not(
    .task-star-rating--disabled
  )
  .task-star-btn:nth-child(-n + 3)
  .task-star-path,
#taskStarRating.task-star-rating--mobile-fixed[data-preview-stars="4"]:not(
    .task-star-rating--disabled
  )
  .task-star-btn:nth-child(-n + 4)
  .task-star-path,
#taskStarRating.task-star-rating--mobile-fixed[data-preview-stars="5"]:not(
    .task-star-rating--disabled
  )
  .task-star-btn:nth-child(-n + 5)
  .task-star-path {
  fill: #ffd84a;
}

.task-star-btn:hover:not(:disabled) .task-star-path {
  fill: rgba(201, 169, 98, 0.28);
}

.task-star-rating[data-preview-stars]:not(.task-star-rating--disabled) .task-star-btn .task-star-path {
  fill: var(--task-star-empty);
}

.task-star-rating[data-preview-stars="1"]:not(.task-star-rating--disabled)
  .task-star-btn:nth-child(-n + 1)
  .task-star-path,
.task-star-rating[data-preview-stars="2"]:not(.task-star-rating--disabled)
  .task-star-btn:nth-child(-n + 2)
  .task-star-path,
.task-star-rating[data-preview-stars="3"]:not(.task-star-rating--disabled)
  .task-star-btn:nth-child(-n + 3)
  .task-star-path,
.task-star-rating[data-preview-stars="4"]:not(.task-star-rating--disabled)
  .task-star-btn:nth-child(-n + 4)
  .task-star-path,
.task-star-rating[data-preview-stars="5"]:not(.task-star-rating--disabled)
  .task-star-btn:nth-child(-n + 5)
  .task-star-path {
  fill: var(--task-star-preview);
}

.task-star-btn.is-active:hover:not(:disabled) .task-star-path {
  fill: #f5e6a8;
}

.task-star-btn:focus-visible {
  outline: none;
}

.task-star-btn:focus-visible .task-star-path {
  fill: rgba(201, 169, 98, 0.38);
}

/* Десктоп: пять звёзд в ряд — тот же хром, что у соседних .btn-nav-ctrl (моб. попап с классом --mobile-fixed не трогаем). */
.nav-star-cluster
  #taskStarRating.task-star-rating:not(.task-star-rating--mobile-fixed)
  .task-star-btn {
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: linear-gradient(155deg, #34302d 0%, #2a2725 100%);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: 0.12rem;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease,
    transform 0.08s ease,
    filter 0.12s ease;
}

.nav-star-cluster
  #taskStarRating.task-star-rating:not(.task-star-rating--mobile-fixed)
  .task-star-btn:hover:not(:disabled) {
  background: linear-gradient(155deg, #3d3936 0%, #302e2c 100%);
  border-color: rgba(255, 255, 255, 0.16);
}

.nav-star-cluster
  #taskStarRating.task-star-rating:not(.task-star-rating--mobile-fixed)
  .task-star-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.nav-star-cluster
  #taskStarRating.task-star-rating:not(.task-star-rating--mobile-fixed)
  .task-star-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.35);
  outline-offset: 2px;
}

.task-star-rating--disabled .task-star-btn .task-star-path {
  fill: rgba(0, 0, 0, 0.15);
}

html[data-app-theme="white"] .task-star-btn .task-star-path {
  fill: rgba(0, 0, 0, 0.04);
}

html[data-app-theme="white"] .task-star-btn.is-active .task-star-path {
  fill: #d4b85c;
}

html[data-app-theme="warm-beige"] .task-star-btn .task-star-path {
  fill: rgba(0, 0, 0, 0.04);
}

html[data-app-theme="warm-beige"] .task-star-btn.is-active .task-star-path {
  fill: #c9a962;
}

@media (max-width: 520px) {
  .nav-star-panel {
    --action-tile-size: 4.35rem;
  }

  .btn-nav-prev {
    width: 2rem;
    height: var(--action-stack-height);
    min-height: var(--action-stack-height);
  }

  .task-star-btn {
    width: 3.35rem;
    height: 3.35rem;
    min-width: 3.35rem;
    min-height: 3.35rem;
  }

  .btn-nav-glyph--next {
    font-size: 2.85rem;
  }

  .side-actions-toolbar {
    gap: 0.12rem 0.18rem;
  }

  .nav-star-cluster {
    gap: 0.06rem 0.1rem;
  }
}

.task-star-rating-hint {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  color: var(--warm-muted);
  text-align: center;
  line-height: 1.35;
}

.right-column {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  width: 100%;
}

.action-strip {
  display: grid;
  grid-template-columns: 2.75rem 2.75rem minmax(0, 1fr) 2.75rem;
  gap: 0.45rem;
  margin-bottom: 0.45rem;
}

.action-strip .btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.action-strip:last-child {
  grid-template-columns: 1fr;
  margin-bottom: 0;
}

.board-flip-corner {
  position: absolute;
  top: 0.22rem;
  left: 0.22rem;
  width: 1.05rem;
  height: 1.05rem;
  border: none;
  background: transparent;
  color: var(--coord-color);
  opacity: 0.65;
  font-size: 0.74rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 3px;
  z-index: 5;
}

.board-flip-corner:hover {
  opacity: 0.95;
  background: rgba(0, 0, 0, 0.12);
}

/* Одноколоночный «телефонный» стек только в портрете. В ландшафте <1020 (например 900px) остаётся двухколоночная доска+панель. */
@media (max-width: 1020px) and (orientation: portrait) {
  .layout {
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  html[data-fbc-page="trainer"] .layout,
  html[data-fbc-page="blind"] .layout {
    grid-template-columns: 1fr;
    justify-content: stretch;
    column-gap: 0;
    row-gap: 1rem;
  }

  html[data-fbc-page="trainer"] .right-column,
  html[data-fbc-page="blind"] .right-column {
    width: 100%;
    max-width: 100%;
  }

  .board-panel {
    width: 100%;
  }

  .board-wrap {
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  html[data-fbc-page="trainer"] .board-wrap,
  html[data-fbc-page="blind"] .board-wrap {
    margin-left: 0;
    margin-right: auto;
  }
}

@media (max-width: 1020px) {
  .site-header {
    transition: transform 0.32s ease;
    z-index: 50;
  }

  body.mobile-header-hidden .site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(calc(-100% - 6px));
  }

  body.mobile-header-hidden .board-panel {
    position: sticky;
    top: 4px;
    z-index: 70;
    align-self: flex-start;
  }

  body.mobile-board-over-header .site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(calc(-100% - 6px));
  }

  body.mobile-board-over-header .board-panel {
    position: sticky;
    top: 0;
    z-index: 70;
    align-self: flex-start;
  }

  .board {
    width: min(100%, var(--board-px));
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* Координаты на клетках (оверлей): прячем буквы/цифры на рамке только в портрете или на таче — в ландшафте+мышь остаются на рамке (оверлей выкл.). */
@media (max-width: 1020px) and (orientation: portrait) {
  .board-wrap .coord-files.bottom,
  .board-wrap .coord-ranks.left {
    display: none;
  }
}

.board-resize-handle {
  display: none;
  position: absolute;
  right: 0.12rem;
  bottom: 0.12rem;
  z-index: 8;
  box-sizing: border-box;
  width: 1.2rem;
  height: 1.2rem;
  min-width: 1.2rem;
  min-height: 1.2rem;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(74, 48, 28, 0.4);
  border-radius: 4px;
  background: rgba(139, 99, 66, 0.2);
  color: #5c3d26;
  cursor: nwse-resize;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  filter: brightness(var(--frame-brightness)) contrast(var(--frame-contrast));
}

.board-resize-handle__svg {
  display: block;
  pointer-events: none;
  transform: rotate(180deg);
  transform-origin: center;
}

.board-resize-handle:hover,
.board-resize-handle:focus-visible {
  background: rgba(120, 82, 52, 0.32);
  color: #3d2818;
}

.board-resize-handle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 65%, #fff 35%);
  outline-offset: 1px;
}

/* Настраиваемая рамка доски и координат */
.board-wrap.frame-gray {
  --frame-bg: rgba(255, 255, 255, 0.08);
  --frame-border: rgba(0, 0, 0, 0.26);
  --coord-color: #7f7a72;
}

.board-wrap.frame-slate {
  --frame-bg: linear-gradient(140deg, #56595f 0%, #45484f 52%, #3b3e44 100%);
  --frame-border: rgba(18, 20, 24, 0.75);
  --coord-color: #d8dbe0;
}

.board-wrap.frame-light {
  --frame-bg: linear-gradient(140deg, #f0f1f4 0%, #e5e8ec 50%, #dde0e5 100%);
  --frame-border: rgba(110, 120, 132, 0.5);
  --coord-color: #616b77;
}

.board-wrap.frame-wood-dark {
  --frame-bg: linear-gradient(135deg, #5b4030 0%, #4b3427 52%, #412c21 100%);
  --frame-border: rgba(20, 12, 8, 0.72);
  --coord-color: #dcc7ae;
}

.board-wrap.frame-wood-light {
  --frame-bg: linear-gradient(140deg, #cfa97b 0%, #c29768 50%, #b78b5c 100%);
  --frame-border: rgba(89, 59, 32, 0.55);
  --coord-color: #5e4025;
}

.board-wrap.frame-minimal {
  --frame-bg: rgba(0, 0, 0, 0);
  --frame-border: rgba(0, 0, 0, 0.18);
  --coord-color: #7d7a73;
}

.admin-editor-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.admin-editor-hint {
  font-size: 0.82rem;
  color: var(--warm-muted);
  margin: 0.35rem 0 0.5rem;
  line-height: 1.35;
}

.admin-editor-turn {
  margin-bottom: 0.35rem;
}

.admin-piece-palette {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.06rem;
  align-items: stretch;
  width: 100%;
  margin-bottom: 0.1rem;
}

.admin-palette-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.05rem;
  width: 100%;
  align-items: center;
}

.admin-palette-piece {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.12s ease,
    box-shadow 0.12s ease;
}

.admin-palette-row .admin-palette-piece--fig {
  aspect-ratio: 1;
  width: 100%;
  max-height: clamp(1.12rem, 7.5vw, 1.58rem);
  justify-self: center;
}

.admin-palette-row .admin-palette-piece--fig img {
  width: 88%;
  height: 88%;
  object-fit: contain;
  pointer-events: none;
}

.admin-palette-piece img {
  object-fit: contain;
  pointer-events: none;
}

.admin-palette-row .admin-palette-tool {
  aspect-ratio: auto;
  min-height: 0;
  min-width: 0;
  align-self: stretch;
  border-radius: 5px;
  border: 1px solid rgba(120, 110, 98, 0.22);
  background: rgba(0, 0, 0, 0.06);
}

.admin-palette-drag-ghost {
  position: fixed;
  z-index: 12000;
  pointer-events: none;
  left: 0;
  top: 0;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.38));
}

.blind-memory-palette-drag-ghost {
  position: fixed;
  z-index: 12000;
  pointer-events: none;
  left: 0;
  top: 0;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.38));
}

.admin-palette-piece--fig:hover {
  background: rgba(98, 153, 36, 0.08);
}

.admin-palette-piece--fig:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.admin-palette-piece.selected {
  box-shadow: 0 0 0 2px rgba(98, 153, 36, 0.45);
  background: rgba(98, 153, 36, 0.1);
}

.admin-palette-tool:hover {
  border-color: rgba(98, 153, 36, 0.45);
}

.admin-palette-tool:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.admin-palette-erase {
  font-size: 1.05rem;
  line-height: 1;
  font-weight: 700;
  color: var(--danger);
}

.admin-palette-clear-board {
  font-size: 0.52rem;
  line-height: 1.12;
  font-weight: 600;
  color: var(--warm-ink);
  white-space: normal;
  padding: 0.06rem 0.08rem;
  text-align: center;
}

.board.admin-editor-mode {
  cursor: grab;
}

.board.admin-editor-mode .square {
  cursor: grab;
}

.board.admin-editor-mode .piece {
  pointer-events: auto;
  cursor: grab;
}

.foot {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--warm-muted);
  line-height: 1.5;
}

.foot code {
  background: var(--code-bg);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}

/* ——— Тёплый «интерьерный» вид (только тема lichess-gray), разметка без изменений ——— */
html[data-app-theme="lichess-gray"] body {
  font-family: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

html[data-app-theme="lichess-gray"] .site-header {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

html[data-app-theme="lichess-gray"] .app-content-stack {
  gap: 0.28rem;
}

html[data-app-theme="lichess-gray"] .header-bar {
  padding: 0;
}

html[data-app-theme="lichess-gray"] .site-header .brand-text {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.1;
}

html[data-app-theme="lichess-gray"] .site-header .brand-logo-img {
  height: 1.62rem;
  filter: brightness(0) saturate(100%) invert(88%) sepia(28%) saturate(520%) hue-rotate(358deg)
    brightness(0.96) contrast(0.92);
}

html[data-app-theme="lichess-gray"] .main-nav {
  gap: 0.38rem;
}

/* Верхнее меню: текстовые пункты, без «кнопок» */
html[data-app-theme="lichess-gray"] .nav-trigger {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0.4rem 0.65rem;
  border-radius: 0;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  border-bottom: 2px solid transparent;
  transition:
    color 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

html[data-app-theme="lichess-gray"] .nav-trigger:hover {
  color: #ffffff;
  background: rgba(201, 169, 98, 0.12);
  border-bottom-color: rgba(201, 169, 98, 0.45);
  box-shadow: none;
}

html[data-app-theme="lichess-gray"] .nav-trigger[aria-expanded="true"] {
  color: var(--accent);
  background: rgba(201, 169, 98, 0.14);
  border-bottom-color: var(--accent);
  box-shadow: none;
}

html[data-app-theme="lichess-gray"] .nav-trigger:active {
  transform: none;
}

html[data-app-theme="lichess-gray"] .nav-tasks-tabs {
  gap: 0.25rem;
  margin-bottom: 0.65rem;
}

html[data-app-theme="lichess-gray"] .nav-tasks-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  padding: 0.35rem 0.45rem;
}

html[data-app-theme="lichess-gray"] .nav-tasks-tab:hover {
  color: #ffffff;
  background: rgba(201, 169, 98, 0.12);
  border-bottom-color: rgba(201, 169, 98, 0.35);
}

html[data-app-theme="lichess-gray"] .nav-tasks-tab[aria-selected="true"] {
  color: var(--accent);
  background: rgba(201, 169, 98, 0.14);
  border-bottom-color: var(--accent);
}

html[data-app-theme="lichess-gray"] .nav-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

html[data-app-theme="lichess-gray"] .nav-trigger--icon {
  padding: 0.28rem;
  min-width: 1.9rem;
  min-height: 1.9rem;
  letter-spacing: normal;
  text-transform: none;
  color: rgba(255, 255, 255, 0.55);
}

html[data-app-theme="lichess-gray"] .nav-trigger--icon:hover {
  color: #ffffff;
}

html[data-app-theme="lichess-gray"] .nav-trigger--icon[aria-expanded="true"] {
  color: var(--accent);
}

html[data-app-theme="lichess-gray"] .dropdown {
  border-radius: 26px;
  padding: 1rem 1.15rem;
  background: linear-gradient(
    165deg,
    rgba(56, 51, 47, 0.98) 0%,
    rgba(38, 35, 32, 0.99) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

html[data-app-theme="lichess-gray"] .dropdown-hint {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}

html[data-app-theme="lichess-gray"] .panel:not(.board-panel) {
  background: linear-gradient(155deg, var(--warm-card) 0%, var(--warm-card-elev) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: var(--shadow);
}

html[data-app-theme="lichess-gray"] .board-wrap {
  --frame-pad: 1.05rem;
  border-radius: 12px;
  background: linear-gradient(160deg, #3f3a35 0%, #2e2a27 55%, #252220 100%);
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.5),
    0 4px 16px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

html[data-app-theme="lichess-gray"] .board {
  border-radius: 4px;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.45),
    inset 0 0 0 2px rgba(0, 0, 0, 0.35),
    inset 0 0 0 2px var(--board-frame-glow);
}

html[data-app-theme="lichess-gray"] .board-theme-lichess-gray .square.light {
  background: #4a433d;
}

html[data-app-theme="lichess-gray"] .board-theme-lichess-gray .square.dark {
  background: #2f2b28;
}

html[data-app-theme="lichess-gray"] .btn:not(.ghost):not(.secondary) {
  color: #1f1c19;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.78rem;
  border-radius: 16px;
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.18),
    0 8px 20px rgba(201, 169, 98, 0.2);
}

html[data-app-theme="lichess-gray"] .btn.secondary {
  color: #f5f1eb;
}

html[data-app-theme="lichess-gray"] .btn-tool.ghost,
html[data-app-theme="lichess-gray"] a.btn-tool.ghost {
  background: linear-gradient(145deg, #32302e, #262422);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow:
    5px 5px 12px rgba(0, 0, 0, 0.42),
    -3px -3px 10px rgba(255, 255, 255, 0.03);
  border-radius: 16px;
}

html[data-app-theme="lichess-gray"] .btn-tool.ghost:hover,
html[data-app-theme="lichess-gray"] a.btn-tool.ghost:hover {
  border-color: rgba(201, 169, 98, 0.28);
  box-shadow:
    3px 3px 8px rgba(0, 0, 0, 0.45),
    -1px -1px 6px rgba(255, 255, 255, 0.04);
}

/* Правый блок кнопок: иконки и подписи — золотой акцент */
html[data-app-theme="lichess-gray"] .side-actions .btn-tool.ghost,
html[data-app-theme="lichess-gray"] .side-actions a.btn-tool.ghost {
  background: linear-gradient(155deg, #3d372f 0%, #2b2722 100%);
  border: 1px solid rgba(201, 169, 98, 0.42);
  color: var(--accent);
  box-shadow:
    4px 4px 12px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(201, 169, 98, 0.08),
    inset 0 1px 0 rgba(201, 169, 98, 0.06);
}

html[data-app-theme="lichess-gray"] .side-actions .btn-tool.ghost:hover,
html[data-app-theme="lichess-gray"] .side-actions a.btn-tool.ghost:hover {
  border-color: var(--accent);
  color: var(--accent-hover);
  background: linear-gradient(155deg, #4a4339 0%, #322d27 100%);
  box-shadow:
    0 0 22px rgba(201, 169, 98, 0.18),
    3px 3px 10px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(201, 169, 98, 0.12);
}

html[data-app-theme="lichess-gray"] .side-actions .btn-icon-only {
  font-variant-emoji: text;
}

html[data-app-theme="lichess-gray"] .side-actions .btn-icon-emoji {
  color: inherit;
}

html[data-app-theme="lichess-gray"] .side-actions .btn-inline-ico {
  color: inherit;
}

html[data-app-theme="lichess-gray"] .btn-nav-ctrl {
  background: linear-gradient(155deg, var(--warm-card) 0%, var(--warm-card-elev) 100%);
  border: 1px solid var(--panel-border);
  color: rgba(255, 255, 255, 0.76);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html[data-app-theme="lichess-gray"] .btn-nav-ctrl:hover {
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
  background: linear-gradient(155deg, #3f3a36 0%, #34302c 100%);
}

html[data-app-theme="white"] .btn-nav-ctrl {
  background: linear-gradient(155deg, #f1f3f6 0%, #e9ecef 100%);
  border: 1px solid var(--panel-border);
  color: var(--warm-muted);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

html[data-app-theme="white"] .btn-nav-ctrl:hover {
  background: linear-gradient(155deg, #f7f8fa 0%, #eef1f4 100%);
  border-color: rgba(22, 21, 18, 0.12);
  color: var(--warm-ink);
}

html[data-app-theme="warm-beige"] .btn-nav-ctrl {
  background: linear-gradient(155deg, #e8e0d4 0%, #dfd4c2 100%);
  border: 1px solid var(--panel-border);
  color: var(--warm-muted);
  box-shadow: 0 1px 3px rgba(40, 32, 22, 0.12);
}

html[data-app-theme="warm-beige"] .btn-nav-ctrl:hover {
  background: linear-gradient(155deg, #efe8de 0%, #e5dac8 100%);
  border-color: rgba(70, 55, 40, 0.18);
  color: var(--warm-ink);
}

html[data-app-theme="white"] .btn-nav-ctrl:focus-visible {
  outline: 2px solid rgba(22, 21, 18, 0.28);
  outline-offset: 2px;
}

html[data-app-theme="warm-beige"] .btn-nav-ctrl:focus-visible {
  outline: 2px solid rgba(70, 55, 40, 0.3);
  outline-offset: 2px;
}

html[data-app-theme="lichess-gray"]
  .nav-star-cluster
  #taskStarRating.task-star-rating:not(.task-star-rating--mobile-fixed)
  .task-star-btn {
  background: linear-gradient(155deg, var(--warm-card) 0%, var(--warm-card-elev) 100%);
  border: 1px solid var(--panel-border);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html[data-app-theme="lichess-gray"]
  .nav-star-cluster
  #taskStarRating.task-star-rating:not(.task-star-rating--mobile-fixed)
  .task-star-btn:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.14);
  background: linear-gradient(155deg, #3f3a36 0%, #34302c 100%);
}

html[data-app-theme="lichess-gray"]
  .nav-star-cluster
  #taskStarRating.task-star-rating:not(.task-star-rating--mobile-fixed)
  .task-star-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.35);
  outline-offset: 2px;
}

html[data-app-theme="white"]
  .nav-star-cluster
  #taskStarRating.task-star-rating:not(.task-star-rating--mobile-fixed)
  .task-star-btn {
  background: linear-gradient(155deg, #f1f3f6 0%, #e9ecef 100%);
  border: 1px solid var(--panel-border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

html[data-app-theme="white"]
  .nav-star-cluster
  #taskStarRating.task-star-rating:not(.task-star-rating--mobile-fixed)
  .task-star-btn:hover:not(:disabled) {
  background: linear-gradient(155deg, #f7f8fa 0%, #eef1f4 100%);
  border-color: rgba(22, 21, 18, 0.12);
}

html[data-app-theme="white"]
  .nav-star-cluster
  #taskStarRating.task-star-rating:not(.task-star-rating--mobile-fixed)
  .task-star-btn:focus-visible {
  outline: 2px solid rgba(22, 21, 18, 0.28);
  outline-offset: 2px;
}

html[data-app-theme="warm-beige"]
  .nav-star-cluster
  #taskStarRating.task-star-rating:not(.task-star-rating--mobile-fixed)
  .task-star-btn {
  background: linear-gradient(155deg, #e8e0d4 0%, #dfd4c2 100%);
  border: 1px solid var(--panel-border);
  box-shadow: 0 1px 3px rgba(40, 32, 22, 0.12);
}

html[data-app-theme="warm-beige"]
  .nav-star-cluster
  #taskStarRating.task-star-rating:not(.task-star-rating--mobile-fixed)
  .task-star-btn:hover:not(:disabled) {
  background: linear-gradient(155deg, #efe8de 0%, #e5dac8 100%);
  border-color: rgba(70, 55, 40, 0.18);
}

html[data-app-theme="warm-beige"]
  .nav-star-cluster
  #taskStarRating.task-star-rating:not(.task-star-rating--mobile-fixed)
  .task-star-btn:focus-visible {
  outline: 2px solid rgba(70, 55, 40, 0.3);
  outline-offset: 2px;
}

html[data-app-theme="lichess-gray"] .task-star-btn .task-star-path {
  fill: rgba(0, 0, 0, 0.28);
}

html[data-app-theme="lichess-gray"] .task-star-btn.is-active .task-star-path {
  fill: #e8cf7a;
}

html[data-app-theme="lichess-gray"] .task-star-btn:hover:not(:disabled) .task-star-path {
  fill: rgba(201, 169, 98, 0.32);
}

html[data-app-theme="lichess-gray"] .task-star-btn.is-active:hover:not(:disabled) .task-star-path {
  fill: #f5e6a8;
}

html[data-app-theme="lichess-gray"] .task-star-rating--disabled .task-star-btn .task-star-path {
  fill: rgba(0, 0, 0, 0.18);
}

html[data-app-theme="lichess-gray"] .task-star-rating-hint {
  color: rgba(255, 255, 255, 0.45);
}

html[data-app-theme="lichess-gray"] .puzzle-task-panel {
  border-color: rgba(201, 169, 98, 0.65);
  background: linear-gradient(
    165deg,
    rgba(58, 54, 50, 0.99) 0%,
    rgba(42, 38, 35, 0.99) 48%,
    rgba(14, 12, 11, 1) 100%
  );
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(201, 169, 98, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html[data-app-theme="lichess-gray"] .puzzle-task-link {
  background: rgba(0, 0, 0, 0.28);
  border-color: rgba(201, 169, 98, 0.42);
  color: #f5f1eb;
}

html[data-app-theme="lichess-gray"] .puzzle-task-link:hover {
  background: rgba(242, 206, 96, 0.36);
  border-color: rgba(242, 206, 96, 0.9);
  color: #fff;
}

html[data-app-theme="lichess-gray"] .puzzle-header {
  border-radius: var(--board-corner-radius);
  padding: 0.65rem 0.75rem;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

html[data-app-theme="lichess-gray"] .book-thumb {
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

html[data-app-theme="lichess-gray"] .meta-task-trigger {
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}

html[data-app-theme="lichess-gray"] .meta-task-stars {
  color: var(--accent);
}

html[data-app-theme="lichess-gray"] .meta-book-progress {
  color: rgba(255, 255, 255, 0.72);
}

html[data-app-theme="lichess-gray"] .puzzle-task-link.is-solved:not(.is-current) {
  border-color: rgba(110, 175, 120, 0.55);
  background: rgba(110, 175, 120, 0.14);
  color: #f0ebe3;
}

html[data-app-theme="lichess-gray"] .puzzle-task-link.is-solved-second:not(.is-current) {
  border-color: rgba(203, 170, 88, 0.64);
  background: rgba(203, 170, 88, 0.22);
  color: #f7f1df;
}

html[data-app-theme="lichess-gray"] .puzzle-task-link.is-solved-thirdplus:not(.is-current) {
  border-color: rgba(201, 93, 82, 0.66);
  background: rgba(201, 93, 82, 0.2);
  color: #ffe9e7;
}

html[data-app-theme="lichess-gray"] .puzzle-task-link.is-live-fail-1:not(.is-current) {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(203, 170, 88, 0.64);
  box-shadow: inset 0 0 0 6px rgba(203, 170, 88, 0.22);
  color: #f7f1df;
}

html[data-app-theme="lichess-gray"] .puzzle-task-link.is-live-fail-2:not(.is-current) {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(201, 93, 82, 0.66);
  box-shadow: inset 0 0 0 6px rgba(201, 93, 82, 0.2);
  color: #ffe9e7;
}

html[data-app-theme="lichess-gray"] .puzzle-task-link.is-live-fail-1.is-current {
  background: rgba(201, 169, 98, 0.38);
  border: 1px solid rgba(203, 170, 88, 0.64);
  color: #1a1510;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    inset 0 0 0 6px rgba(203, 170, 88, 0.22);
}

html[data-app-theme="lichess-gray"] .puzzle-task-link.is-live-fail-2.is-current {
  background: rgba(201, 169, 98, 0.38);
  border: 1px solid rgba(201, 93, 82, 0.66);
  color: #1a1510;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    inset 0 0 0 6px rgba(201, 93, 82, 0.2);
}

html[data-app-theme="lichess-gray"] .puzzle-task-link.is-live-fail-1:not(.is-current):hover {
  background: rgba(242, 206, 96, 0.14);
  border-color: rgba(203, 170, 88, 0.64);
  box-shadow: inset 0 0 0 6px rgba(203, 170, 88, 0.3);
  color: #fff;
}

html[data-app-theme="lichess-gray"] .puzzle-task-link.is-live-fail-2:not(.is-current):hover {
  background: rgba(201, 93, 82, 0.12);
  border-color: rgba(201, 93, 82, 0.66);
  box-shadow: inset 0 0 0 6px rgba(201, 93, 82, 0.28);
  color: #ffe9e7;
}

html[data-app-theme="lichess-gray"] .chapter-jump-panel .puzzle-task-link {
  color: #f5f1eb;
  background: transparent;
  border: none;
}

html[data-app-theme="lichess-gray"] .chapter-jump-panel .puzzle-task-link:hover {
  background: rgba(201, 169, 98, 0.18);
  border: none;
  color: #fff;
}

html[data-app-theme="lichess-gray"] .meta .meta-book-authors {
  color: rgba(255, 255, 255, 0.78);
  opacity: 1;
}

html[data-app-theme="lichess-gray"] .preamble {
  border-radius: var(--board-corner-radius);
  border: 1px dashed rgba(201, 169, 98, 0.35);
  background: rgba(0, 0, 0, 0.15);
  font-family:
    "Montserrat",
    "Segoe UI",
    "Segoe UI Symbol",
    "Noto Sans Symbols 2",
    system-ui,
    sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.65;
}

html[data-app-theme="lichess-gray"] .preamble.preamble-muted {
  color: rgba(255, 255, 255, 0.58);
  font-weight: 500;
  letter-spacing: 0.05em;
}

html[data-app-theme="lichess-gray"] .preamble .preamble-messa-body strong {
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--warm-ink);
}

html[data-app-theme="lichess-gray"] .status {
  border-radius: 20px;
  font-family:
    "Montserrat",
    "Segoe UI",
    "Segoe UI Symbol",
    "Noto Sans Symbols 2",
    system-ui,
    sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.65;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

html[data-app-theme="lichess-gray"] .status.solved {
  border-color: rgba(130, 185, 110, 0.45);
  background: rgba(58, 125, 68, 0.12);
}

html[data-app-theme="lichess-gray"] .eval-bar {
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.18);
}

html[data-app-theme="lichess-gray"] .chapter-tag {
  border-radius: 14px;
  border-color: rgba(201, 169, 98, 0.25);
}

html[data-app-theme="lichess-gray"] .chapter-list button:hover {
  background: rgba(201, 169, 98, 0.14);
}

html[data-app-theme="lichess-gray"] .themes-list li button:hover,
html[data-app-theme="lichess-gray"] .fav-cat-btn:hover:not(:disabled),
html[data-app-theme="lichess-gray"] .fav-thumb-cell:hover {
  border-color: rgba(201, 169, 98, 0.5);
}

html[data-app-theme="lichess-gray"] .board-flip-corner {
  color: rgba(255, 255, 255, 0.55);
}

html[data-app-theme="lichess-gray"] .board-flip-corner:hover {
  background: rgba(255, 255, 255, 0.08);
}

html[data-app-theme="lichess-gray"] .board-resize-handle {
  background: rgba(90, 62, 40, 0.32);
  color: #6b4423;
  border-color: rgba(107, 68, 35, 0.45);
}

html[data-app-theme="lichess-gray"] .board-resize-handle:hover,
html[data-app-theme="lichess-gray"] .board-resize-handle:focus-visible {
  background: rgba(100, 70, 45, 0.42);
  color: #4a3018;
}

html[data-app-theme="lichess-gray"] .settings-field > span:first-child,
html[data-app-theme="lichess-gray"] label.field.tight > span:first-child {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

html[data-app-theme="lichess-gray"] .settings-field select,
html[data-app-theme="lichess-gray"] .settings-field input,
html[data-app-theme="lichess-gray"] label.field.tight input,
html[data-app-theme="lichess-gray"] label.field.tight textarea,
html[data-app-theme="lichess-gray"] label.field.tight select {
  border-radius: 14px;
}

html[data-app-theme="lichess-gray"] .grading-row {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
}

html[data-app-theme="lichess-gray"] .admin-palette-piece.selected {
  box-shadow: 0 0 0 2px rgba(201, 169, 98, 0.5);
}

/* ——— Узкие экраны (телефон / малый планшет): не меняет вёрстку широкого десктопа ——— */
@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .board-panel {
    width: 100%;
    max-width: 100%;
  }

  .board-wrap {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  html[data-fbc-page="trainer"] .board-wrap,
  html[data-fbc-page="blind"] .board-wrap {
    margin-left: 0;
    margin-right: auto;
  }

  /* 100% родителя, чтобы min(var) не упирался в 620px при узком контейнере */
  .board {
    width: min(100%, var(--board-px));
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* Панель «оглавление / темы»: при узком окне фикс. ширина по вьюпорту. Тренер: см. --trainer-zit-viewport-max-w. */
@media (max-width: 1020px) {
  .chapter-jump-panel {
    width: min(
      calc(
        100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)
      ),
      520px
    );
    max-width: min(
      calc(
        100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)
      ),
      520px
    );
    min-width: min(
      calc(
        100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)
      ),
      320px
    );
    left: auto;
    right: 0;
    box-sizing: border-box;
  }

  /* Тренер: левый край оглавления — на линии миниатюры, не по внутреннему контейнеру. */
  html[data-fbc-page="trainer"] #puzzleMainPanel .chapter-jump-panel {
    left: var(--trainer-zit-panel-left);
  }
}

@media (orientation: portrait) {
  html[data-fbc-page="trainer"] .board,
  html[data-fbc-page="blind"] .board {
    border-radius: calc(var(--board-corner-radius) / 2);
  }

  .puzzle-task-grid {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 0.2rem;
  }

  .chapter-jump-panel .puzzle-task-grid {
    display: flex;
    flex-direction: column;
  }

  html {
    font-size: 14px;
  }

  .layout {
    gap: 4px;
  }

  .app-frame {
    box-sizing: border-box;
    padding-top: max(0.2rem, env(safe-area-inset-top, 0px));
    padding-right: max(0px, env(safe-area-inset-right, 0px));
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    padding-left: max(0px, env(safe-area-inset-left, 0px));
    overflow-x: clip;
  }

  html[data-fbc-page="trainer"] .app-frame,
  html[data-fbc-page="blind"] .app-frame {
    padding-bottom: max(0.55rem, calc(env(safe-area-inset-bottom, 0px) + 6px));
  }

  .site-header {
    position: relative;
    top: auto;
    z-index: 50;
    transition: transform 0.32s ease;
  }

  .header-bar {
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    position: relative;
  }

  .site-header .brand {
    align-self: center;
    margin-right: auto;
    margin-left: max(0px, env(safe-area-inset-left, 0px));
  }

  .site-header .brand-text {
    font-size: 0.86rem;
  }

  .site-header .brand-logo-img {
    height: 1.75rem;
  }

  .nav-burger {
    display: inline-flex;
  }

  /* В потоке под строкой бренд+бургер — .site-header по высоте включает кнопки меню;
     иначе fixed-панели опирались на заниженный --site-header-height и перекрывали меню. */
  .main-nav {
    display: none;
    order: 10;
    width: 100%;
    flex-basis: 100%;
    align-self: stretch;
    box-sizing: border-box;
    position: static;
    margin: 0.35rem 0 0;
    padding: 0.55rem;
    border-radius: 12px;
    border: 1px solid var(--panel-border);
    background: var(--warm-card);
    box-shadow: var(--shadow);
    z-index: 120;
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .main-nav.is-mobile-open {
    display: grid;
  }

  .main-nav > .nav-item {
    width: 100%;
    min-width: 0;
  }

  .main-nav .nav-trigger {
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    font-size: 0.78rem;
    padding: 0.5rem 0.55rem;
    border-radius: 8px;
  }

  .main-nav .nav-trigger--icon {
    min-width: 0;
    min-height: 0;
    justify-content: flex-start;
  }

  .main-nav .dropdown {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    max-height: min(56vh, 380px);
    margin-top: 0.4rem;
    border-radius: 10px;
    box-shadow: none;
  }

  /* Открытое бургер-меню: панели на весь экран между полями и шапкой/низом */
  .main-nav.is-mobile-open .nav-item .dropdown {
    position: fixed;
    left: max(10px, env(safe-area-inset-left, 0px));
    right: max(10px, env(safe-area-inset-right, 0px));
    top: calc(var(--site-header-height, 52px) + 8px);
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: none;
    margin-top: 0;
    z-index: 250;
    box-sizing: border-box;
    box-shadow: var(--shadow);
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--warm-card) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1;
  }

  .main-nav.is-mobile-open .nav-item .dropdown.panel-tasks,
  .main-nav.is-mobile-open .nav-item .dropdown.panel-help,
  .main-nav.is-mobile-open .nav-item .dropdown.panel-account {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .board-panel {
    position: relative;
    z-index: 10;
    padding: 0;
  }

  .board-wrap {
    --frame-pad: 0;
    width: calc(100vw - 10px);
    max-width: calc(100vw - 10px);
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--board-corner-radius);
    box-shadow: none;
    border: none;
    background: transparent;
  }

  html[data-fbc-page="trainer"] .board-wrap,
  html[data-fbc-page="blind"] .board-wrap {
    width: calc(
      100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 12px
    );
    max-width: calc(
      100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 12px
    );
    margin-left: 6px;
    margin-right: 6px;
  }

  .board-wrap[class*="frame-"] {
    --frame-bg: transparent;
    --frame-border: transparent;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .board-stack {
    width: 100%;
  }

  .board {
    width: 100%;
    max-width: 100%;
    border-radius: var(--board-corner-radius);
    box-shadow: none;
  }

  html[data-app-theme="lichess-gray"] .board,
  html[data-app-theme="warm-beige"] .board,
  html[data-app-theme="white"] .board {
    border-radius: var(--board-corner-radius);
    box-shadow: none;
  }

  .coord-files.bottom,
  .coord-ranks.left {
    display: none;
  }

  .right-column > .side-actions {
    order: 1;
    margin-top: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .right-column > .side-panel:not(.side-actions):not(#adminEditorPanel) {
    order: 2;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.12rem 0.05rem;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .right-column > #adminEditorPanel.admin-editor-panel {
    order: 3;
    max-height: min(46vh, 24rem);
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .nav-star-panel {
    --action-tile-size: 3.8rem;
    margin-bottom: 0.04rem;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .side-actions-toolbar {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--mobile-row-gap, 5px);
    overflow-x: hidden;
    padding: 0;
    margin: 0;
  }

  .nav-star-cluster,
  .action-stack,
  .action-grid-2x2 {
    display: contents;
  }

  .btn-mobile-stars {
    display: inline-flex;
    position: static;
    z-index: 1;
    width: var(--action-tile-size);
    min-width: var(--action-tile-size);
    height: var(--action-tile-size);
    min-height: var(--action-tile-size);
    border-radius: 8px;
    padding: 0;
    font-size: 1.45rem;
    color: #e8cf7a;
    order: 1;
  }

  #taskStarRating {
    display: none;
    position: absolute;
    left: 0;
    bottom: calc(100% + 0.2rem);
    z-index: 130;
    justify-content: center;
    align-items: center;
    gap: 0;
    padding: 0.08rem 0.12rem;
    border-radius: 8px;
    background: rgba(20, 18, 16, 0.52);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  }

  #taskStarRating.task-star-rating--mobile-fixed {
    position: fixed;
    justify-content: center;
    gap: 15px;
    padding: 0.35rem 0.5rem;
    box-sizing: border-box;
    border-radius: 10px;
    background: rgba(20, 18, 16, 0.52);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(2px);
  }

  .nav-star-panel.is-mobile-stars-open #taskStarRating {
    display: flex;
  }

  .task-star-btn {
    width: var(--task-star-btn-size, 2.1rem);
    height: var(--task-star-btn-size, 2.1rem);
    min-width: var(--task-star-btn-size, 2.1rem);
    min-height: var(--task-star-btn-size, 2.1rem);
  }

  #btnPrev,
  #btnNext,
  #btnReset,
  #btnRandom,
  #btnHint,
  #btnSolution {
    width: var(--action-tile-size);
    min-width: var(--action-tile-size);
    height: var(--action-tile-size);
    min-height: var(--action-tile-size);
    margin: 0;
    border-radius: 8px;
    padding: 0.08rem;
  }

  #btnPrev { order: 2; }
  #btnNext { order: 3; }
  #btnReset { order: 4; }
  #btnRandom { order: 5; }
  #btnHint { order: 6; }
  #btnSolution { order: 7; }

  .btn-nav-glyph--next {
    font-size: 1.75rem;
  }

  .btn-nav-glyph--prev {
    font-size: 0.8rem;
  }

  .action-engine-row {
    display: none;
  }

  .right-column {
    gap: 0.02rem;
  }

  .right-column > .side-panel:not(.side-actions):not(#adminEditorPanel) > .preamble {
    order: 1;
    margin-top: 0;
    max-height: none;
    padding: 0.26rem 0.34rem;
    border: none;
    background: transparent;
    border-radius: var(--board-corner-radius);
    line-height: 1.42;
  }

  .right-column > .side-panel:not(.side-actions):not(#adminEditorPanel) > .puzzle-header {
    order: 2;
    margin-bottom: 0;
    grid-template-columns: 64px minmax(0, 1fr);
    padding: 0.12rem 0.18rem;
    padding-left: 0;
    border: none;
    background: transparent;
    border-radius: var(--board-corner-radius);
  }

  /* Внутри шапки: книга у миниатюры, затем тема и номер (trainer: bookmeta + secondary) */
  .puzzle-header > .puzzle-header-body {
    grid-column: 1 / -1;
    grid-row: 1 / span 4;
    display: contents;
    padding-right: 0;
  }

  /* Обёртки в trainer.html: те же ячейки сетки, что у «плоских» детей .puzzle-header-body */
  .puzzle-header-body > .puzzle-header-bookmeta,
  .puzzle-header-body > .puzzle-header-secondary {
    display: contents;
  }

  .puzzle-header > .book-thumb-btn {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 58px;
    align-self: start;
    margin-top: 0.08rem;
  }

  .puzzle-header > .book-thumb-btn .book-thumb {
    width: 100%;
  }

  .puzzle-header > .puzzle-header-fabs {
    top: 0;
    right: 0;
  }

  .puzzle-header-body .meta {
    grid-column: 2;
    grid-row: 1;
  }

  .puzzle-header-body .meta-book-progress {
    grid-column: 2;
    grid-row: 2;
  }

  .puzzle-header-body #chapterTagStack {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-bottom: 0;
    padding: 0.06rem 0;
    border: none;
    background: transparent;
    border-radius: 0;
  }

  .puzzle-header-body .puzzle-task-line {
    grid-column: 1 / -1;
    grid-row: 4;
    margin-top: 0;
  }

  .meta {
    font-size: 0.84rem;
    line-height: 1.25;
  }

  .meta-task-trigger {
    padding: 0;
    font-size: 0.9rem;
  }

  #status {
    order: 4;
    display: block;
    margin-top: 0;
    padding: 0.35rem 0.45rem;
    border-radius: 6px;
  }

  body.mobile-answer-mode #preamble {
    display: none;
  }

  body.mobile-answer-mode #status {
    display: block;
    cursor: pointer;
    border-color: var(--accent);
    box-shadow: 0 0 0 1px rgba(201, 169, 98, 0.25);
  }
}

/* Узкий экран, тренажёр: обложка + текст в одну колонку по высоте миниатюры (без «лесенки» сетки). */
@media (max-width: 768px) {
  html[data-fbc-page="trainer"] {
    --trainer-book-thumb-w: clamp(
      calc(72px / sqrt(3)),
      calc(21vw / sqrt(3)),
      calc(92px / sqrt(3))
    );
    --trainer-book-thumb-h: calc(var(--trainer-book-thumb-w) * 4 / 3);
  }

  html[data-fbc-page="trainer"]
    .right-column
    > .side-panel:not(.side-actions):not(#adminEditorPanel)
    > .puzzle-header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 0.42rem;
  }

  html[data-fbc-page="trainer"] .puzzle-header > .book-thumb-btn {
    grid-column: auto;
    grid-row: auto;
    flex: 0 0 auto;
    margin-top: 0;
  }

  html[data-fbc-page="trainer"] .puzzle-header > .puzzle-header-body {
    display: flex;
    flex-direction: column;
    grid-column: auto;
    grid-row: auto;
    flex: 1 1 auto;
    min-width: 0;
    max-height: var(--trainer-book-thumb-h);
    overflow: visible;
    padding-right: 4.75rem;
    gap: 0.12rem;
  }

  html[data-fbc-page="trainer"] .puzzle-header-body > .puzzle-header-bookmeta,
  html[data-fbc-page="trainer"] .puzzle-header-body > .puzzle-header-secondary {
    display: flex;
    flex-direction: column;
    gap: 0.06rem;
    min-width: 0;
  }

  html[data-fbc-page="trainer"] .puzzle-header-body > .puzzle-header-bookmeta {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  html[data-fbc-page="trainer"] .puzzle-header-body > .puzzle-header-secondary {
    flex: 0 0 auto;
    margin-top: 0;
  }

  html[data-fbc-page="trainer"] .puzzle-header-body .meta,
  html[data-fbc-page="trainer"] .puzzle-header-body .meta-book-progress,
  html[data-fbc-page="trainer"] .puzzle-header-body #chapterTagStack,
  html[data-fbc-page="trainer"] .puzzle-header-body .puzzle-task-line {
    grid-column: auto;
    grid-row: auto;
  }
}

/* Портрет + мышь: общий portrait обнуляет горизонталь — вернуть внутренние поля как у (pointer: fine). */
@media (orientation: portrait) and (pointer: fine) {
  .app-frame {
    padding-left: max(env(safe-area-inset-left, 0px), 1.25rem);
    padding-right: max(env(safe-area-inset-right, 0px), 1.25rem);
  }

  /* Все приложение: без 1.25rem по бокам рамки — как тренажёр, без сдвига шапки при переходах. */
  html[data-fbc-page] .app-frame {
    padding-left: max(0px, env(safe-area-inset-left, 0px));
    padding-right: max(0px, env(safe-area-inset-right, 0px));
  }

  /* Список номеров: 10 равных колонок (4-значные номера). */
  .puzzle-task-panel:not(.chapter-jump-panel) .puzzle-task-grid {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
}

/* Избранное: ландшафт — 6 колонок, ширина под окно; lite не трогаем --fav-inner-w (узкая панель). */
@media (orientation: landscape) {
  .panel-tasks.panel-tasks--tab-fav:not(.panel-tasks--lite) {
    --fav-cols: 6;
    --fav-gap-x: 4px;
    --fav-gap-y: 4px;
    --fav-inner-w: calc(
      100vw - max(env(safe-area-inset-left, 0px), var(--browser-landscape-gutter, 0px)) -
        max(env(safe-area-inset-right, 0px), var(--browser-landscape-gutter, 0px)) - 1.05rem
    );
    --fav-slot: max(
      48px,
      calc(
        (var(--fav-inner-w) - (var(--fav-cols) - 1) * var(--fav-gap-x)) / var(--fav-cols)
      )
    );
    --fav-row-h: calc(var(--fav-slot) + 0.28rem + 2.15rem);
  }

  .panel-tasks.panel-tasks--lite.panel-tasks--tab-fav {
    --fav-cols: 6;
    --fav-gap-x: 4px;
    --fav-gap-y: 4px;
    --fav-slot: max(
      48px,
      calc(
        (var(--fav-inner-w) - (var(--fav-cols) - 1) * var(--fav-gap-x)) / var(--fav-cols)
      )
    );
    --fav-row-h: calc(var(--fav-slot) + 0.28rem + 2.15rem);
  }

  .site-header .nav-item--mega > .dropdown.panel-tasks.panel-tasks--tab-fav:not(.panel-tasks--lite) {
    --fav-inner-w: calc(
      100vw - max(env(safe-area-inset-left, 0px), var(--browser-landscape-gutter, 0px)) -
        max(env(safe-area-inset-right, 0px), var(--browser-landscape-gutter, 0px)) - 1.05rem
    );
  }
}

@media (orientation: portrait) {
  .panel-tasks.panel-tasks--tab-fav:not(.panel-tasks--lite) {
    --fav-cols: 3;
    --fav-visible-rows: 6;
    --fav-inner-w: calc(min(100vw - 16px, var(--fbc-site-inner-max, 1728px)) - 22px);
    --fav-slot: max(
      48px,
      calc(
        (var(--fav-inner-w) - (var(--fav-cols) - 1) * var(--fav-gap-x)) / var(--fav-cols)
      )
    );
    --fav-row-h: calc(var(--fav-slot) + 0.28rem + 2.15rem);
  }

  .panel-tasks.panel-tasks--lite.panel-tasks--tab-fav {
    --fav-cols: 3;
    --fav-visible-rows: 6;
    --fav-slot: max(
      48px,
      calc(
        (var(--fav-inner-w) - (var(--fav-cols) - 1) * var(--fav-gap-x)) / var(--fav-cols)
      )
    );
    --fav-row-h: calc(var(--fav-slot) + 0.28rem + 2.15rem);
  }

  .fav-thumb-caption {
    font-size: 0.56rem;
    line-height: 1.12;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .right-column > .side-actions {
    --mobile-row-gap: 5px;
    --mobile-btn-size: clamp(
      24px,
      calc((100% - (8 * var(--mobile-row-gap))) / 10.05),
      68px
    );
    --mobile-btn-radius: 4px;
    --mobile-btn-height: clamp(24px, calc(var(--mobile-btn-size) * 0.95), 64px);
  }

  .side-actions,
  .nav-star-panel,
  .side-actions-toolbar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .board {
    width: 100%;
  }

  /* Как у .board-wrap в портрете; padding 0 — иначе .panel/.side-panel съедают ширину ряда */
  .right-column > .side-actions {
    width: calc(100vw - 10px);
    max-width: calc(100vw - 10px);
    box-sizing: border-box;
    padding: 0 !important;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
  }

  html[data-fbc-page="trainer"] .right-column > .side-actions,
  html[data-fbc-page="blind"] .right-column > .side-actions {
    width: calc(
      100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 12px
    );
    max-width: calc(
      100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 12px
    );
    margin-left: 6px;
    margin-right: 6px;
  }

  /* Под доской: преамбула -> задача № -> глава -> название книги */
  .right-column > .side-panel:not(.side-actions):not(#adminEditorPanel) {
    display: flex;
    flex-direction: column;
  }

  .preamble {
    order: 1;
  }

  #status {
    order: 4;
    display: block;
    margin-top: 0;
    font-size: 0.88rem;
    line-height: 1.55;
    font-family: inherit;
  }

  #chapterTag,
  .meta-task-trigger {
    font-family: inherit;
  }

  #status .status-praise,
  #status .status-ok-text,
  #status .status-next-hint {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
  }

  #status .status-ok-text {
    font-weight: 400;
  }

  #status .status-praise {
    font-weight: 800;
    font-size: 1.02rem;
    line-height: 1.25;
  }

  body.mobile-answer-mode #preamble {
    display: none;
  }

  body.mobile-answer-mode #status {
    display: block;
    cursor: pointer;
    border-color: var(--accent);
    box-shadow: 0 0 0 1px rgba(201, 169, 98, 0.25);
  }

  .puzzle-header-body #chapterTag {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent);
    line-height: 1.25;
  }

  .meta-task-trigger {
    font-size: 1.12rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent);
    line-height: 1.25;
  }

  .meta-task-trigger--icon {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
  }

  .side-actions-toolbar {
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    gap: var(--mobile-row-gap);
    overflow-x: hidden;
  }

  .action-engine-row,
  .action-engine-slot {
    display: contents !important;
  }

  .action-engine-slot .btn-action-tile {
    position: static;
    inset: auto;
  }

  .btn-mobile-stars,
  #btnPrev,
  #btnNext,
  #btnReset,
  #btnRandom,
  #btnHint,
  #btnSolution,
  #btnPlayOut,
  #linkLichessAnalysis {
    width: var(--mobile-btn-size);
    min-width: var(--mobile-btn-size);
    height: var(--mobile-btn-height);
    min-height: var(--mobile-btn-height);
    max-height: var(--mobile-btn-height);
    flex: 0 0 var(--mobile-btn-size);
    padding: 0.05rem;
    border-radius: var(--mobile-btn-radius);
    box-sizing: border-box;
  }

  .btn-nav-ctrl {
    background: linear-gradient(
      155deg,
      color-mix(in srgb, var(--accent) 88%, #fff 12%) 0%,
      color-mix(in srgb, var(--accent) 78%, #000 22%) 100%
    );
    border-color: color-mix(in srgb, var(--accent) 70%, #000 30%);
    color: #1f1b12;
  }

  .btn-nav-ctrl:hover,
  .btn-nav-ctrl:focus-visible {
    background: linear-gradient(
      155deg,
      color-mix(in srgb, var(--accent-hover) 88%, #fff 12%) 0%,
      color-mix(in srgb, var(--accent) 82%, #000 18%) 100%
    );
    border-color: color-mix(in srgb, var(--accent-hover) 72%, #000 28%);
    color: #19150d;
  }

  #btnNext {
    width: calc(var(--mobile-btn-size) * 2.05);
    min-width: calc(var(--mobile-btn-size) * 2.05);
    flex-basis: calc(var(--mobile-btn-size) * 2.05);
    height: var(--mobile-btn-height);
    min-height: var(--mobile-btn-height);
    max-height: var(--mobile-btn-height);
    border-radius: var(--mobile-btn-radius);
    box-sizing: border-box;
  }

  #btnPlayOut[hidden] {
    display: inline-flex !important;
  }

  .btn-action-icon {
    width: calc(var(--mobile-btn-height) * 0.8);
    height: calc(var(--mobile-btn-height) * 0.8);
    max-width: 100%;
    max-height: 100%;
    flex-shrink: 0;
  }

  .btn-action-tile__glyph {
    font-size: calc(var(--mobile-btn-height) * 0.8);
    line-height: 1;
  }

  .btn-nav-glyph--next {
    font-size: calc(var(--mobile-btn-height) * 0.8);
    line-height: 1;
    color: #ffffff;
  }

  .btn-nav-next .btn-nav-glyph--next,
  .btn-nav-ctrl.btn-nav-next:hover .btn-nav-glyph--next,
  .btn-nav-ctrl.btn-nav-next:focus-visible .btn-nav-glyph--next {
    color: inherit;
  }

  .btn-nav-glyph--prev {
    font-size: calc(var(--mobile-btn-height) * 0.8);
    line-height: 1;
  }

  .stockfish-logo-img,
  .lichess-logo-img {
    width: calc(var(--mobile-btn-height) * 0.8);
    height: calc(var(--mobile-btn-height) * 0.8);
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .btn-mobile-stars {
    font-size: calc(var(--mobile-btn-height) * 0.8);
    line-height: 1;
  }

  .btn-mobile-stars { order: 1; }
  #btnPrev { order: 2; }
  #btnRandom { order: 3; }
  #btnNext { order: 4; }
  #btnReset { order: 5; }
  #btnHint { order: 6; }
  #btnSolution { order: 7; }
  #btnPlayOut { order: 8; }
  #linkLichessAnalysis { order: 9; }

  #taskStarRating {
    left: auto;
    right: 0;
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.52rem;
    padding: 0.34rem 0.48rem;
  }

  .task-star-btn {
    width: calc(var(--task-star-btn-size, 1.45rem) * 1.12);
    height: calc(var(--task-star-btn-size, 1.45rem) * 1.12);
    min-width: calc(var(--task-star-btn-size, 1.45rem) * 1.12);
    min-height: calc(var(--task-star-btn-size, 1.45rem) * 1.12);
    padding: 0;
  }
}

@media (orientation: landscape) {
  html {
    font-size: 14px;
  }

  .app-frame {
    --mobile-btn-min: 24px;
    --mobile-row-gap: 5px;
    /* На телефоне в ландшафте 0; на широком браузере — боковые поля (см. media ниже). */
    --browser-landscape-gutter: 0px;
    /* Лишний зазор снизу (ПК): панель задач Windows и т.п.; 0 на тач-устройствах. */
    --browser-landscape-bottom-gap: 0px;
    /* Резерв на внутренние вертикальные отступы/зазоры, чтобы скролл не появлялся
       до начала уменьшения кластера «доска+кнопки». */
    --landscape-vertical-reserve: 6px;
    /* Резерв под текстовую колонку при расчёте ширины доски; больше — шире блок задачи до «градусника». */
    --landscape-info-col: clamp(220px, 36vw, 420px);
    --landscape-header-offset: var(--site-header-height, 0px);
    /* Сначала размер доски, иначе --eval-strip-w может считаться от неверного var. */
    --landscape-board-size: min(
      calc(
        100vw - var(--landscape-info-col) - 12px - env(safe-area-inset-left, 0px) -
          env(safe-area-inset-right, 0px) - (2 * var(--browser-landscape-gutter))
      ),
      calc(
        100dvh - var(--landscape-header-offset) - var(--landscape-controls-h, 44px) - 2px -
          var(--landscape-vertical-reserve) - env(safe-area-inset-top, 0px) -
          env(safe-area-inset-bottom, 0px) - var(--browser-landscape-bottom-gap)
      )
    );
    --eval-strip-w: clamp(10px, calc(var(--landscape-board-size) * 0.028), 14px);
    --mobile-btn-size: max(
      var(--mobile-btn-min),
      min(
        72px,
        calc((var(--landscape-board-size) - (8 * var(--mobile-row-gap))) / 10.05)
      )
    );
    --mobile-btn-radius: 4px;
    --mobile-btn-height: max(
      var(--mobile-btn-min),
      min(68px, calc(var(--mobile-btn-size) * 0.95))
    );
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-top: max(0px, env(safe-area-inset-top, 0px));
    padding-left: max(0px, env(safe-area-inset-left, 0px));
    padding-right: max(0px, env(safe-area-inset-right, 0px));
    padding-bottom: max(0px, env(safe-area-inset-bottom, 0px));
  }

  /* Очень низкий ландшафт: продолжаем пропорционально уменьшать кластер
     «доска+кнопки», чтобы не проваливаться в вертикальный скролл. */
  @media (max-width: 1020px) and (max-height: 420px) {
    .app-frame {
      --mobile-btn-min: 20px;
      --mobile-row-gap: 4px;
      --landscape-vertical-reserve: 3px;
    }
  }

  @media (max-width: 1020px) {
    .app-frame {
      min-height: 360px;
      /* Меньший резерв под текстовую колонку — иначе на телефоне в ландшафте доска съужается сильнее, чем в узком окне ПК. */
      --landscape-info-col: clamp(96px, 22vw, 280px);
    }
  }

  .main-nav .nav-trigger {
    min-height: 37px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: calc(0.55rem + 3px);
    padding-right: calc(0.55rem + 3px);
  }

  .nav-burger {
    min-width: 37px;
    min-height: 37px;
    padding: 0.32rem;
  }

  /* Ландшафт: выпадашки на ширину/высоту экрана с полями и safe-area */
  .main-nav .dropdown {
    position: fixed;
    left: max(10px, env(safe-area-inset-left, 0px));
    right: max(10px, env(safe-area-inset-right, 0px));
    top: calc(var(--site-header-height, 52px) + 6px);
    bottom: max(10px, env(safe-area-inset-bottom, 0px));
    width: auto;
    min-width: 0 !important;
    max-width: none;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    z-index: 140;
  }

  /* Сброс min-width/width из .panel-* — left/right остаются от .main-nav .dropdown (иначе static + fixed уезжает). */
  .main-nav .dropdown.panel-tasks,
  .main-nav .dropdown.panel-help,
  .main-nav .dropdown.panel-account {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .layout {
    display: grid;
    /* 3-я колонка = весь остаток после доски и градусника; от контента не зависит. */
    grid-template-columns:
      var(--landscape-board-size)
      var(--eval-strip-w)
      minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 1px;
    row-gap: 0;
    justify-content: start;
    justify-items: stretch;
    align-items: start;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .right-column {
    display: contents;
  }

  body.mobile-header-hidden .app-frame,
  body.mobile-board-over-header .app-frame {
    --landscape-header-offset: 0px;
  }

  body.mobile-header-hidden .layout > .eval-gauge-shell,
  body.mobile-header-hidden .right-column > .side-panel:not(.side-actions):not(#adminEditorPanel),
  body.mobile-header-hidden .right-column > #adminEditorPanel,
  body.mobile-board-over-header .layout > .eval-gauge-shell,
  body.mobile-board-over-header .right-column > .side-panel:not(.side-actions):not(#adminEditorPanel),
  body.mobile-board-over-header .right-column > #adminEditorPanel {
    margin-top: 4px;
  }

  .board-panel {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0;
    margin: 4px 0 0;
    align-self: flex-start;
    width: var(--landscape-board-size);
    max-width: var(--landscape-board-size);
    grid-column: 1;
    grid-row: 1 / span 2;
    height: calc(
      100dvh - var(--landscape-header-offset) - env(safe-area-inset-top, 0px) -
        env(safe-area-inset-bottom, 0px) - var(--browser-landscape-bottom-gap)
    );
  }

  /* Кнопки сразу под доской: не margin-top:auto (иначе при height:100dvh уезжают вниз колонки). */
  .board-panel > .side-actions {
    width: 100%;
    max-width: 100%;
    margin: 6px 0 0;
    padding: 0;
    flex-shrink: 0;
  }

  /* Fallback для ПК: если JS-перенос кнопок в board-panel не сработал,
     держим панель кнопок в той же ширине и колонке, что и доска. */
  .right-column > .side-actions {
    grid-column: 1;
    grid-row: 2;
    width: var(--landscape-board-size);
    max-width: var(--landscape-board-size);
    justify-self: start;
    margin: 6px 0 0;
    padding: 0;
  }

  .right-column > .side-panel:not(.side-actions):not(#adminEditorPanel) {
    grid-column: 3;
    /* Как у .board-panel (ряды 1–2): та же высота, что у доски + кнопок — без «короткой» правой колонки. */
    grid-row: 1 / span 2;
    justify-self: stretch;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    min-height: 0;
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.08rem 0.02rem;
    margin-left: 4px;
    background: transparent;
    border: none;
    box-shadow: none;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body.admin-editor-open .right-column > #puzzleMainPanel.side-panel {
    grid-row: 1;
    align-self: start;
  }

  .right-column > #adminEditorPanel.admin-editor-panel {
    grid-column: 3;
    grid-row: 2;
    justify-self: stretch;
    align-self: start;
    width: 100%;
    min-width: 0;
    max-width: none;
    max-height: calc(
      100dvh - var(--landscape-header-offset) - env(safe-area-inset-top, 0px) -
        env(safe-area-inset-bottom, 0px) - var(--browser-landscape-bottom-gap) - 5.25rem
    );
    min-height: 0;
    overflow: hidden;
    margin-left: 4px;
    display: flex;
    flex-direction: column;
  }

  html[data-fbc-page="trainer"] .right-column > .side-panel:not(.side-actions):not(#adminEditorPanel),
  html[data-fbc-page="blind"] .right-column > .side-panel:not(.side-actions):not(#adminEditorPanel) {
  margin-left: 0;
  }

  html[data-fbc-page="trainer"] .right-column > #adminEditorPanel.admin-editor-panel,
  html[data-fbc-page="blind"] .right-column > #adminEditorPanel.admin-editor-panel {
  margin-left: 0;
  }

  .right-column > .side-panel:not(.side-actions):not(#adminEditorPanel) > .puzzle-header {
    order: 0;
    margin-bottom: 0;
    grid-template-columns: 1fr;
    padding: 0.12rem 0.18rem;
    padding-left: 0;
    border: none;
    background: transparent;
    border-radius: var(--board-corner-radius);
  }

  .right-column > .side-panel:not(.side-actions):not(#adminEditorPanel) > .preamble {
    order: 2;
    margin-top: 0;
    max-height: none;
    padding: 0.26rem 0.34rem;
    border: none;
    background: transparent;
    border-radius: var(--board-corner-radius);
    line-height: 1.42;
  }

  .right-column > .side-panel:not(.side-actions):not(#adminEditorPanel) > #status {
    order: 3;
    margin-top: 0;
    font-size: 0.86rem;
    line-height: 1.55;
    font-family: inherit;
  }

  .right-column > .side-panel:not(.side-actions):not(#adminEditorPanel) > #engineEvalLegacy {
    order: 4;
  }

  #status .status-praise,
  #status .status-ok-text,
  #status .status-next-hint {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
  }

  #status .status-ok-text {
    font-weight: 400;
  }

  #status .status-praise {
    font-weight: 800;
    font-size: 1.02rem;
    line-height: 1.25;
  }

  .puzzle-header-body #chapterTag {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent);
    line-height: 1.25;
  }

  .puzzle-header-body .puzzle-task-line {
    margin-top: 0;
  }

  .meta {
    font-size: 0.82rem;
    line-height: 1.25;
  }

  .puzzle-header-body #chapterTag,
  .meta-task-trigger {
    font-family: inherit;
  }

  .meta-task-trigger {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent);
    line-height: 1.25;
    padding: 0;
  }

  .board-wrap {
    --frame-pad: 0;
    width: var(--landscape-board-size);
    max-width: var(--landscape-board-size);
    margin: 0;
    border: none;
    box-shadow: none;
    background: transparent;
  }

  .layout > .eval-gauge-shell {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    width: var(--eval-strip-w);
    height: calc(
      var(--landscape-board-size)
    );
    margin-top: 4px;
    border-radius: 999px;
    background: linear-gradient(
      180deg,
      rgba(40, 36, 32, 0.95) 0%,
      rgba(72, 67, 59, 0.9) 100%
    );
  }

  .layout > .eval-gauge-shell .eval-gauge-fill {
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    height: var(--eval-fill-pct, 50%);
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent) 60%, #000 40%) 0%,
      color-mix(in srgb, var(--accent) 78%, #fff 22%) 100%
    );
  }

  .layout > .eval-gauge-shell .eval-gauge-marker {
    left: 50%;
    top: auto;
    bottom: var(--eval-marker-pct, 50%);
    width: 18px !important;
    height: 48px !important;
    transform: translate(-50%, 50%) rotate(-90deg);
    margin-top: 0;
    border-radius: 24px !important;
    padding-inline: 2px;
    background: rgba(24, 22, 20, 0.96) !important;
    border: 1px solid rgba(201, 169, 98, 0.42);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    overflow: hidden;
  }

  .layout > .eval-gauge-shell .eval-gauge-marker-label {
    font-size: 0.52rem;
    font-weight: 700;
    color: #f3ead8;
    line-height: 1;
  }

  .board-stack {
    width: 100%;
    max-width: 100%;
  }

  .board-wrap[class*="frame-"] {
    --frame-bg: transparent;
    --frame-border: transparent;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .board {
    width: 100%;
    max-width: 100%;
    box-shadow: none;
  }

  .coord-files.bottom,
  .coord-ranks.left {
    display: none;
  }

  .side-actions,
  .nav-star-panel,
  .side-actions-toolbar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .side-actions-toolbar {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: var(--mobile-row-gap) !important;
    overflow: visible;
    scrollbar-width: none;
  }

  .side-actions-toolbar::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .nav-star-cluster,
  .action-stack,
  .action-grid-2x2 {
    display: contents;
  }

  .action-engine-row,
  .action-engine-slot {
    display: contents !important;
  }

  .action-engine-slot .btn-action-tile {
    position: static;
    inset: auto;
  }

  .btn-mobile-stars,
  #btnPrev,
  #btnNext,
  #btnReset,
  #btnRandom,
  #btnHint,
  #btnSolution,
  #btnPlayOut,
  #linkLichessAnalysis {
    width: var(--mobile-btn-size);
    min-width: var(--mobile-btn-size);
    height: var(--mobile-btn-height);
    min-height: var(--mobile-btn-height);
    max-height: var(--mobile-btn-height);
    flex: 0 0 var(--mobile-btn-size);
    padding: 0.05rem;
    border-radius: var(--mobile-btn-radius);
    box-sizing: border-box;
    margin: 0 !important;
  }

  .btn-nav-ctrl {
    background: rgba(22, 20, 18, 0.78);
    border-color: rgba(255, 255, 255, 0.18);
    color: #e8cf7a;
    box-shadow: none;
  }

  .btn-nav-ctrl:hover,
  .btn-nav-ctrl:focus-visible {
    background: rgba(30, 27, 23, 0.88);
    border-color: rgba(255, 216, 122, 0.45);
    color: #e8cf7a;
    box-shadow: none;
  }

  #btnNext {
    width: calc(var(--mobile-btn-size) * 2.05);
    min-width: calc(var(--mobile-btn-size) * 2.05);
    flex-basis: calc(var(--mobile-btn-size) * 2.05);
  }

  .btn-mobile-stars {
    display: inline-flex;
    position: static;
    font-size: calc(var(--mobile-btn-height) * 0.8);
    line-height: 1;
  }

  #taskStarRating {
    display: none;
    position: absolute;
    left: 0;
    bottom: calc(100% + 0.2rem);
    z-index: 130;
    justify-content: center;
    align-items: center;
    gap: 0;
    padding: 0.08rem 0.12rem;
    border-radius: 8px;
    background: rgba(20, 18, 16, 0.52);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  }

  #taskStarRating.task-star-rating--mobile-fixed {
    position: fixed;
    justify-content: center;
    gap: 15px;
    padding: 0.35rem 0.5rem;
    box-sizing: border-box;
    border-radius: 10px;
    background: rgba(20, 18, 16, 0.52);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(2px);
  }

  .nav-star-panel.is-mobile-stars-open #taskStarRating {
    display: flex;
  }

  .task-star-btn {
    width: var(--task-star-btn-size, 2.1rem);
    height: var(--task-star-btn-size, 2.1rem);
    min-width: var(--task-star-btn-size, 2.1rem);
    min-height: var(--task-star-btn-size, 2.1rem);
  }

  .btn-action-icon {
    width: calc(var(--mobile-btn-height) * 0.8);
    height: calc(var(--mobile-btn-height) * 0.8);
  }

  .btn-action-tile__glyph {
    font-size: calc(var(--mobile-btn-height) * 0.8);
    line-height: 1;
  }

  .btn-nav-glyph--next {
    font-size: calc(var(--mobile-btn-height) * 0.8);
    line-height: 1;
    color: #ffffff;
  }

  .btn-nav-next .btn-nav-glyph--next,
  .btn-nav-ctrl.btn-nav-next:hover .btn-nav-glyph--next,
  .btn-nav-ctrl.btn-nav-next:focus-visible .btn-nav-glyph--next {
    color: inherit;
  }

  .btn-nav-glyph--prev {
    font-size: calc(var(--mobile-btn-height) * 0.8);
    line-height: 1;
  }

  .stockfish-logo-img,
  .lichess-logo-img {
    width: calc(var(--mobile-btn-height) * 0.8);
    height: calc(var(--mobile-btn-height) * 0.8);
  }

  .btn-mobile-stars { order: 1; }
  #btnPrev { order: 2; }
  #btnRandom { order: 3; }
  #btnNext { order: 4; }
  #btnReset { order: 5; }
  #btnHint { order: 6; }
  #btnSolution { order: 7; }
  #btnPlayOut { order: 8; }
  #linkLichessAnalysis { order: 9; }

}

/* Ландшафт тренажёра/слепых: одна ветка для всех устройств (без pointer: coarse / min-width). */
@media (orientation: landscape) {
  html[data-fbc-page="trainer"],
  html[data-fbc-page="trainer"] body {
    height: 100%;
    overflow: hidden;
  }

  html[data-fbc-page="trainer"] .app-frame,
  html[data-fbc-page="trainer"] .app-content-stack,
  html[data-fbc-page="trainer"] .page-body {
    min-height: 0;
    overflow: hidden;
  }

  html[data-fbc-page="trainer"] .layout,
  html[data-fbc-page="blind"] .layout {
    grid-template-columns:
      var(--landscape-board-size) var(--eval-strip-w)
      minmax(min(var(--trainer-text-col-min-land), 100%), 1fr);
    column-gap: 0;
    justify-items: stretch;
  }

  html[data-fbc-page="trainer"] .right-column > .side-panel:not(.side-actions):not(#adminEditorPanel),
  html[data-fbc-page="blind"] .right-column > .side-panel:not(.side-actions):not(#adminEditorPanel),
  html[data-fbc-page="trainer"] .right-column > #adminEditorPanel.admin-editor-panel,
  html[data-fbc-page="blind"] .right-column > #adminEditorPanel.admin-editor-panel {
    justify-self: stretch;
    width: 100%;
    max-width: none;
  }

  html[data-fbc-page="trainer"] .layout,
  html[data-fbc-page="blind"] .layout {
    align-items: stretch;
  }

  html[data-fbc-page="trainer"] .right-column,
  html[data-fbc-page="blind"] .right-column {
    min-height: 0;
  }

  html[data-fbc-page="trainer"] .right-column > .side-actions {
    flex-shrink: 0;
  }

  html[data-fbc-page="trainer"] .right-column > .side-panel:not(.side-actions):not(#adminEditorPanel),
  html[data-fbc-page="blind"] .right-column > .side-panel:not(.side-actions):not(#adminEditorPanel) {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: none;
  }
}

/* Слепые, ландшафт: колонка тренажёра выше кластера доски (иначе transform/наслоение съедают клики справа). Шкала — на всю ширину панели, как в портрете. */
@media (orientation: landscape) {
  html[data-fbc-page="blind"] .layout {
    isolation: isolate;
  }

  html[data-fbc-page="blind"] .layout > .board-panel {
    position: relative;
    z-index: 1;
  }

  html[data-fbc-page="blind"] .layout > .eval-gauge-shell {
    position: relative;
    z-index: 2;
  }

  html[data-fbc-page="blind"] .right-column > .side-panel,
  html[data-fbc-page="blind"] .right-column > .blind-trainer-panel {
    position: relative;
    z-index: 10;
    pointer-events: auto;
  }

  html[data-fbc-page="blind"] .blind-trainer-panel .blind-arcade-controls {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  html[data-fbc-page="blind"] .blind-trainer-panel .blind-arcade-controls:not(.blind-arcade-controls--unified) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-items: unset;
  }

  html[data-fbc-page="blind"]
    .blind-trainer-panel
    .blind-arcade-controls:not(.blind-arcade-controls--unified)
    .blind-arcade-timer-wrap {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
    justify-content: center;
  }

  html[data-fbc-page="blind"] .blind-trainer-panel .blind-arcade-controls.blind-arcade-controls--unified {
    width: 100%;
    max-width: 100%;
    align-self: stretch;
  }
}

/* Слепые, ландшафт: ниже резерв под панель — больше высоты доски; круговой таймер и полоска — в 1.5 раза ниже. */
@media (orientation: landscape) {
  html[data-fbc-page="blind"] .app-frame {
    --landscape-controls-h: calc(44px / 1.5);
  }

  html[data-fbc-page="blind"]
    .blind-arcade-timer-wrap:not(.blind-colors-linear-wrap):not(.blind-arcade-linear-unified-wrap) {
    min-height: calc(clamp(4.8rem, 14vmin, 8.4rem) / 1.5);
  }

  html[data-fbc-page="blind"]
    .blind-arcade-timer-wrap:not(.blind-colors-linear-wrap):not(.blind-arcade-linear-unified-wrap)
    .blind-arcade-timer {
    width: calc(clamp(4.8rem, 14vmin, 8.4rem) / 1.5);
    font-size: calc(clamp(1.25rem, 3.4vmin, 2rem) / 1.5);
  }

  html[data-fbc-page="blind"]
    .blind-arcade-timer-wrap:not(.blind-colors-linear-wrap):not(.blind-arcade-linear-unified-wrap)
    .blind-arcade-timer.is-go {
    font-size: calc(clamp(1.05rem, 2.9vmin, 1.35rem) / 1.5);
  }

  html[data-fbc-page="blind"]
    .blind-arcade-timer-wrap:not(.blind-colors-linear-wrap):not(.blind-arcade-linear-unified-wrap)
    .blind-arcade-bonus {
    font-size: calc(clamp(2.2rem, 6.8vmin, 4.2rem) / 1.5);
  }

  html[data-fbc-page="blind"][data-blind-layout="unified-noncoords"]
    .blind-arcade-controls.blind-arcade-controls--unified {
    --blind-colors-timer-h: calc(clamp(2.2rem, 7.4vmin, 2.9rem) / 1.5);
    --blind-colors-timer-r: calc(clamp(7px, 1.1vmin, 11px) / 1.5);
    --blind-colors-timer-r-cap: calc(11px / 1.5);
    --blind-colors-timer-cell-w: calc(calc(clamp(2.85rem, 9.5vw, 3.85rem) * 1.25) / 1.5);
    gap: calc(clamp(0.22rem, 0.9vmin, 0.36rem) / 1.5);
  }
}

/* Задачи/вслепую + мышь в ландшафте: плавный rem/gutter (раньше скачок на 1024px), поля .app-frame, избранное, выпадашки. */
@media (orientation: landscape) and (pointer: fine) {
  html {
    font-size: clamp(14px, calc(9.8px + 0.52vw), 21px);
  }

  .app-frame {
    --browser-landscape-gutter: clamp(
      0px,
      calc(0.15 * (100vw - 1000px)),
      min(7.5rem, 120px)
    );
    --browser-landscape-bottom-gap: clamp(
      0px,
      calc(0.12 * (100vw - 1010px)),
      18px
    );
    padding-left: max(env(safe-area-inset-left, 0px), var(--browser-landscape-gutter));
    padding-right: max(env(safe-area-inset-right, 0px), var(--browser-landscape-gutter));
  }

  /* Тренажёр/вкладки приложения: горизонтальные поля задаёт --browser-landscape-gutter у кластера доски, не дублируем здесь. */
  html[data-fbc-page] .app-frame {
    padding-left: max(0px, env(safe-area-inset-left, 0px));
    padding-right: max(0px, env(safe-area-inset-right, 0px));
  }

  html[data-fbc-page] .app-content-stack {
    width: 100%;
    max-width: min(var(--fbc-site-inner-max, 1728px), 100%);
    margin-left: auto;
    margin-right: auto;
  }

  .panel-tasks.panel-tasks--tab-fav {
    width: 100%;
    max-width: none;
  }

  .site-header .main-nav .nav-item {
    position: static;
  }

  .site-header .main-nav .nav-item .dropdown {
    position: fixed;
    left: max(env(safe-area-inset-left, 0px), var(--browser-landscape-gutter)) !important;
    right: max(env(safe-area-inset-right, 0px), var(--browser-landscape-gutter)) !important;
    top: calc(var(--site-header-height, 52px) + 6px);
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
    width: auto !important;
    min-width: 0 !important;
    max-width: none;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 300;
    box-sizing: border-box;
    transform: none !important;
  }

  .site-header .main-nav .dropdown.panel-tasks,
  .site-header .main-nav .dropdown.panel-help,
  .site-header .main-nav .dropdown.panel-account {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  /* Правая колонка: карточка «книга + тема + №» (раньше только от 1024px — скачок). */
  .right-column > .side-panel:not(.side-actions):not(#adminEditorPanel) {
    gap: 0.55rem;
  }

  .right-column > .side-panel:not(.side-actions):not(#adminEditorPanel) > .puzzle-header {
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--panel-border);
    background: var(--muted-fill);
    border-radius: var(--board-corner-radius);
    grid-template-columns: 1fr;
    gap: 0.75rem;
    align-items: start;
    box-sizing: border-box;
  }

  html[data-fbc-page="trainer"] .right-column > .side-panel:not(.side-actions):not(#adminEditorPanel) > .puzzle-header {
    padding-left: 0;
  }
}

/* Широкий портрет в браузере с мышью: выпадашки с полями; планшет — на всю ширину safe-area */
@media (min-width: 1024px) and (orientation: portrait) and (pointer: fine) {
  .site-header .main-nav .nav-item {
    position: static;
  }

  .site-header .main-nav .nav-item .dropdown {
    position: fixed;
    left: max(env(safe-area-inset-left, 0px), clamp(0.75rem, 2.5vw, 2.5rem));
    right: max(env(safe-area-inset-right, 0px), clamp(0.75rem, 2.5vw, 2.5rem));
    top: calc(var(--site-header-height, 52px) + 6px);
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
    width: auto;
    min-width: 0 !important;
    max-width: none;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 300;
    box-sizing: border-box;
    transform: none;
  }

  .site-header .main-nav .dropdown.panel-tasks,
  .site-header .main-nav .dropdown.panel-help,
  .site-header .main-nav .dropdown.panel-account {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* ——— Стартовый экран (логотип / первая загрузка) ——— */
body.app-landing-open {
  overflow: hidden;
}

.app-landing {
  position: fixed;
  top: var(--site-header-height, 52px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.app-landing__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  padding: 0;
  border: none;
  display: block;
  width: 100%;
  min-height: 100%;
  background: linear-gradient(
    165deg,
    rgba(10, 8, 6, 0.72) 0%,
    rgba(26, 22, 18, 0.82) 45%,
    rgba(12, 10, 8, 0.88) 100%
  );
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
}

html[data-app-theme="white"] .app-landing__scrim {
  background: linear-gradient(
    165deg,
    rgba(240, 242, 246, 0.88) 0%,
    rgba(255, 255, 255, 0.92) 100%
  );
}

html[data-app-theme="warm-beige"] .app-landing__scrim {
  background: linear-gradient(
    165deg,
    rgba(60, 52, 42, 0.55) 0%,
    rgba(40, 34, 28, 0.75) 100%
  );
}

.app-landing__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: min(1080px, 100%);
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 1.75rem) clamp(0.75rem, 2.5vw, 1.25rem)
    clamp(1.5rem, 4vw, 2.5rem);
  box-sizing: border-box;
}

.app-landing__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
}

@media (max-width: 768px) {
  .app-landing__grid {
    grid-template-columns: 1fr;
  }
}

.app-landing__main {
  padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1rem, 2vw, 1.35rem);
  border-radius: calc(var(--radius, 12px) + 4px);
  background: linear-gradient(
    145deg,
    var(--warm-card-elev, #3f3a34) 0%,
    var(--warm-card, #36312d) 55%,
    rgba(0, 0, 0, 0.12) 100%
  );
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow, 0 24px 48px rgba(0, 0, 0, 0.35));
}

html[data-app-theme="white"] .app-landing__main {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

.app-landing__eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.95;
}

.app-landing__title {
  margin: 0 0 0.65rem;
  font-size: clamp(1.65rem, 4vw, 2.15rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--warm-ink);
}

.app-landing__lede {
  margin: 0 0 1.1rem;
  font-size: 0.65rem;
  line-height: 1.22;
  color: var(--warm-muted);
  max-width: min(48rem, 100%);
}

.app-landing__sections {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.app-landing-expand {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  width: 100%;
}

.app-landing-tile {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  padding: 0.75rem 0.95rem;
  border-radius: var(--radius, 12px);
  border: 1px solid var(--panel-border);
  background: var(--muted-fill);
  color: var(--warm-ink);
  font: inherit;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.12s ease;
}

.app-landing-tile:hover {
  border-color: var(--accent);
  background: rgba(201, 169, 98, 0.08);
}

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

.app-landing-tile--primary {
  background: linear-gradient(
    125deg,
    rgba(201, 169, 98, 0.22) 0%,
    rgba(0, 0, 0, 0.2) 100%
  );
  border-color: rgba(201, 169, 98, 0.35);
}

html[data-app-theme="white"] .app-landing-tile--primary {
  background: linear-gradient(
    125deg,
    rgba(69, 123, 45, 0.12) 0%,
    rgba(255, 255, 255, 0.9) 100%
  );
  border-color: rgba(69, 123, 45, 0.28);
}

.app-landing-tile--soon {
  opacity: 0.92;
  cursor: default;
}

.app-landing-tile--soon:hover {
  transform: none;
  border-color: var(--panel-border);
  background: var(--muted-fill);
}

.app-landing-tile__icon {
  flex-shrink: 0;
  width: 2.35rem;
  height: 2.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  line-height: 1;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--panel-border);
}

html[data-app-theme="white"] .app-landing-tile__icon {
  background: rgba(0, 0, 0, 0.04);
}

.app-landing-tile__icon--puzzles,
.app-landing-tile__icon--blind,
.app-landing-tile__icon--tools,
.app-landing-tile__icon--analysis {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 88% 88%;
}

.app-landing-tile__icon--puzzles {
  background-image: url("/static/icons/welcome/solve-puzzles.png");
}

.app-landing-tile__icon--blind {
  background-image: url("/static/icons/welcome/blind-chess.png");
}

.app-landing-tile__icon--tools {
  background-image: url("/static/icons/welcome/tools-analysis-sprite.png?v=1");
  background-size: 200% 100%;
  background-position: left center;
}

.app-landing-tile__icon--analysis {
  background-image: url("/static/icons/welcome/tools-analysis-sprite.png?v=1");
  background-size: 200% 100%;
  background-position: right center;
}

html[data-fbc-welcome-tile-icons="v2"] .app-landing-tile__icon {
  width: 5.15rem;
  height: 3.35rem;
  border: none;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}

html[data-fbc-welcome-tile-icons="v2"] .app-landing-tile__icon--puzzles,
html[data-fbc-welcome-tile-icons="v2"] .app-landing-tile__icon--blind,
html[data-fbc-welcome-tile-icons="v2"] .app-landing-tile__icon--tools,
html[data-fbc-welcome-tile-icons="v2"] .app-landing-tile__icon--analysis {
  background-size: contain;
}

html[data-fbc-welcome-tile-icons="v2"] .app-landing-tile__icon--tools {
  background-size: 200% 100%;
  background-position: left center;
}

html[data-fbc-welcome-tile-icons="v2"] .app-landing-tile__icon--analysis {
  background-size: 200% 100%;
  background-position: right center;
}

@media (max-width: 640px) {
  html[data-fbc-welcome-tile-icons="v2"] .app-landing-tile__icon {
    width: 4.5rem;
    height: 3rem;
  }
}

.app-landing-tile__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.app-landing-tile__label {
  font-weight: 700;
  font-size: 0.98rem;
}

.app-landing-tile__hint {
  font-size: 0.78rem;
  color: var(--warm-muted);
}

.app-landing-tile__chev {
  flex-shrink: 0;
  font-size: 0.65rem;
  opacity: 0.65;
  transition: transform 0.2s ease;
}

.app-landing-tile--primary[aria-expanded="true"] .app-landing-tile__chev {
  transform: rotate(-180deg);
}

.app-landing-badge {
  flex-shrink: 0;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  background: rgba(201, 169, 98, 0.2);
  color: var(--accent);
  border: 1px solid rgba(201, 169, 98, 0.35);
}

html[data-app-theme="white"] .app-landing-badge {
  background: rgba(69, 123, 45, 0.12);
  color: var(--accent);
  border-color: rgba(69, 123, 45, 0.25);
}

.app-landing-flyout {
  margin: 0.35rem 0 0.5rem;
  padding: 0.65rem 0.75rem 0.85rem;
  border-radius: var(--radius, 12px);
  border: 1px solid var(--panel-border);
  background: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
  align-self: stretch;
}

html[data-app-theme="white"] .app-landing-flyout {
  background: transparent;
}

.app-landing-flyout__hint {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  color: var(--warm-muted);
}

/* Сетка книг под «Решать задачи»: 3 колонки в узком слое, 5 — от 701px (как порог «широкой» раскладки слепых/хаба). */
.welcome-book-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.42rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

@media (min-width: 701px) {
  .welcome-book-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.welcome-book-cover-link {
  display: block;
  min-width: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--panel-border) 85%, transparent);
  aspect-ratio: 2 / 3;
  box-sizing: border-box;
  text-decoration: none;
  transition:
    border-color 0.14s ease,
    transform 0.12s ease,
    box-shadow 0.14s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.welcome-book-cover-link:hover {
  border-color: rgba(201, 169, 98, 0.55);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

.welcome-book-cover-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.welcome-book-cover-img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
}

.app-landing-blind-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

html[data-fbc-page="welcome"] .app-landing-blind-grid {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

html[data-fbc-page="welcome"] .app-landing-blind-card {
  min-width: 0;
  max-width: 100%;
}

html[data-fbc-page="welcome"] .app-landing-blind-card__icon {
  max-width: 100%;
  height: auto;
}

.app-landing-blind-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  min-height: 124px;
  padding: 0.68rem 0.38rem 0.58rem;
  border-radius: 13px;
  border: 1px solid color-mix(in srgb, var(--panel-border) 68%, #e6c02f 32%);
  background: color-mix(in srgb, var(--warm-card, #36312d) 90%, #fff 10%);
  color: var(--warm-ink);
  text-decoration: none;
  box-sizing: border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 5px 12px rgba(0, 0, 0, 0.16);
  transition:
    border-color 0.14s ease,
    transform 0.14s ease,
    background 0.14s ease,
    box-shadow 0.14s ease;
}

.app-landing-blind-card:link,
.app-landing-blind-card:visited,
.app-landing-blind-card:hover,
.app-landing-blind-card:active {
  color: var(--warm-ink);
  text-decoration: none;
}

.app-landing-blind-card:hover {
  border-color: #e6c02f;
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--warm-card, #36312d) 82%, #fff 18%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 8px 16px rgba(0, 0, 0, 0.2);
}

.app-landing-blind-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.app-landing-blind-card__avatar {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  position: relative;
  color: #e6c02f;
  border: 1px solid color-mix(in srgb, #e6c02f 74%, #fff 26%);
  background-color: color-mix(in srgb, var(--warm-bg-deep, #1f1b18) 92%, #fff 8%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 3px 8px rgba(0, 0, 0, 0.2);
  background-repeat: no-repeat;
  background-size: 74% 74%;
  background-position: center;
}

.app-landing-blind-card__avatar--coords {
  background-image: url("/static/icons/blind/coords-target.svg");
}

.app-landing-blind-card__avatar--colors {
  background-image: url("/static/icons/blind/colors-contrast.svg");
}

.app-landing-blind-card__avatar--knight {
  background-image: url("/static/icons/blind/knight.svg");
}

.app-landing-blind-card__avatar--bishop {
  background-image: url("/static/icons/blind/bishop.svg");
}

.app-landing-blind-card__avatar--puzzle {
  background-image: url("/static/icons/blind/pawn-glasses.svg");
}

.app-landing-blind-card__avatar--memory {
  background-image: url("/static/icons/blind/memory-board-question.svg");
}

.app-landing-blind-card__label {
  font-size: 0.7rem;
  line-height: 1.15;
  color: color-mix(in srgb, var(--warm-muted) 76%, #fff 24%);
  text-align: center;
}

.app-landing-book-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: min(42vh, 320px);
  overflow-y: auto;
}

.app-landing-book-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.45rem 0.55rem;
  border-radius: 10px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.04);
  color: var(--warm-ink);
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease, border-color 0.12s ease;
}

html[data-app-theme="white"] .app-landing-book-btn {
  background: rgba(0, 0, 0, 0.03);
}

.app-landing-book-btn:hover {
  border-color: var(--accent);
  background: rgba(201, 169, 98, 0.12);
}

.app-landing-book-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.app-landing-book-btn__cover {
  width: 40px;
  height: 53px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.app-landing-book-btn__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.app-landing-book-btn__meta {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 0.86rem;
  line-height: 1.25;
}

.app-landing__aside {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.app-landing-auth {
  padding: 1rem 1.05rem 1.15rem;
  border-radius: calc(var(--radius, 12px) + 2px);
  background: var(--warm-card, #36312d);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow, 0 12px 32px rgba(0, 0, 0, 0.28));
}

html[data-app-theme="white"] .app-landing-auth {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
}

.app-landing-auth__title {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--warm-ink);
}

.app-landing-auth__status {
  margin: 0 0 0.85rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--warm-muted);
}

.app-landing-auth__form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.app-landing-field {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  font-size: 0.78rem;
  color: var(--warm-muted);
}

.app-landing-field input {
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--warm-ink);
  font: inherit;
  font-size: 0.88rem;
}

.app-landing-auth__submit {
  margin-top: 0.25rem;
  width: 100%;
}

.app-landing-auth__logout {
  width: 100%;
  margin-top: 0.35rem;
}

.app-landing__continue {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius, 12px);
  border: 1px dashed var(--ghost-border);
  background: transparent;
  color: var(--warm-muted);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}

.app-landing__continue:hover {
  color: var(--warm-ink);
  border-color: var(--accent);
  background: rgba(201, 169, 98, 0.06);
}

/* Доступность: подпись только для скринридеров */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Тренажёр: координаты / цвет поля (слепые шахматы) */
.blind-trainer-panel {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  border-radius: 0;
}

.blind-trainer-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 0 0.4rem;
  margin: 0 0 0.35rem;
  border-bottom: 2px solid color-mix(in srgb, var(--panel-border) 62%, #f0cf66 38%);
}

.blind-trainer-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--warm-ink);
  line-height: 1.25;
}

.blind-trainer-exit {
  flex-shrink: 0;
  font-size: 0.78rem;
  padding: 0.28rem 0.5rem;
}

.blind-trainer-back-link {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--warm-ink);
  line-height: 1.25;
  text-decoration: none;
  transition: opacity 0.16s ease;
}

.blind-trainer-back-link:hover,
.blind-trainer-back-link:focus-visible {
  opacity: 0.78;
  outline: none;
}

.blind-arcade-controls {
  display: grid;
  gap: 0.72rem;
  justify-items: center;
  margin-top: 0.42rem;
  grid-template-rows: auto auto;
}


.blind-arcade-btn {
  justify-self: center;
  min-height: 2.3rem;
  min-width: 12.5rem;
  font-weight: 700;
}

.blind-arcade-btn.is-active {
  border-color: color-mix(in srgb, #72d78c 56%, var(--panel-border) 44%);
  color: #eaffee;
}

html[data-fbc-page="blind"][data-blind-layout="unified-noncoords"] .blind-arcade-controls.blind-arcade-controls--unified {
  --blind-colors-timer-h: clamp(2.2rem, 7.4vmin, 2.9rem);
  --blind-colors-timer-r-cap: 11px;
  --blind-colors-timer-cell-w: calc(clamp(2.85rem, 9.5vw, 3.85rem) * 1.25);
  --blind-colors-timer-r: clamp(7px, 1.1vmin, var(--blind-colors-timer-r-cap));
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: clamp(0.22rem, 0.9vmin, 0.36rem);
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-top: 0.42rem;
  box-sizing: border-box;
}

.blind-arcade-timer-wrap {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.2rem;
  width: fit-content;
  min-height: clamp(4.8rem, 14vmin, 8.4rem);
  margin: 0 auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
}

.blind-arcade-timer-wrap.is-button {
  cursor: pointer;
}

.blind-arcade-timer-wrap.is-button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--blind-colors-btn-light, #f5dfad) 65%, #fff 35%);
  outline-offset: 2px;
}

.blind-arcade-timer-wrap.is-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.blind-arcade-timer-wrap.is-active {
  border-color: transparent;
}

.blind-arcade-timer {
  --arcade-progress: 1;
  --arcade-fill-color: var(--blind-colors-btn-light, #f5dfad);
  width: clamp(4.8rem, 14vmin, 8.4rem);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(12, 12, 12, 0.88) 55%, transparent 56%),
    conic-gradient(
      from -90deg,
      var(--arcade-fill-color) 0turn calc(var(--arcade-progress) * 1turn),
      color-mix(in srgb, var(--arcade-fill-color) 24%, #1a1a1a 76%) calc(var(--arcade-progress) * 1turn) 1turn
    );
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--arcade-fill-color) 46%, #0f0f0f 54%),
    0 4px 14px rgba(0, 0, 0, 0.35);
  font-size: clamp(1.25rem, 3.4vmin, 2rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.01em;
  color: #f9f5e9;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.48);
  transition: background 90ms linear, box-shadow 150ms ease, color 150ms ease;
}

.blind-arcade-timer.is-low {
  --arcade-fill-color: #df6565;
}

.blind-arcade-timer.is-countdown {
  color: #f0cf66;
  box-shadow:
    inset 0 0 0 1px rgba(240, 207, 102, 0.5),
    0 6px 18px rgba(240, 207, 102, 0.22);
}

.blind-arcade-timer.is-go {
  font-size: clamp(1.05rem, 2.9vmin, 1.35rem);
  letter-spacing: 0.01em;
}

.blind-arcade-timer.is-running {
  color: transparent;
  text-shadow: none;
}

.blind-arcade-bonus {
  position: absolute;
  right: 0.2rem;
  top: -0.9rem;
  font-size: clamp(2.2rem, 6.8vmin, 4.2rem);
  font-weight: 800;
  color: #67df83;
  opacity: 0;
  transform: translate(0, 8px) scale(0.8);
  pointer-events: none;
  text-shadow: 0 2px 10px rgba(28, 90, 46, 0.45);
}

.blind-arcade-bonus.is-pop {
  animation: blindArcadeBonusPop 620ms cubic-bezier(0.2, 0.72, 0.24, 1) forwards;
}

@keyframes blindArcadeBonusPop {
  0% {
    opacity: 0;
    transform: translate(0, 8px) scale(0.8);
  }
  22% {
    opacity: 1;
    transform: translate(-38px, -10px) scale(1.05);
  }
  100% {
    opacity: 0;
    transform: translate(-150px, -34px) scale(1.56);
  }
}

.blind-arcade-stats {
  margin-top: 0.15rem;
  display: grid;
  gap: 0.24rem;
  font-size: 0.84rem;
}

.blind-arcade-stats__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.7rem;
  color: var(--warm-muted);
}

.blind-arcade-stats__row strong {
  color: var(--warm-ink);
  font-weight: 700;
}

.blind-trainer-prompt-wrap {
  text-align: center;
  padding: 0.55rem 0.35rem 0.45rem;
  border-radius: var(--radius, 12px);
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid var(--panel-border);
}

html[data-app-theme="white"] .blind-trainer-prompt-wrap {
  background: rgba(0, 0, 0, 0.04);
}

.blind-trainer-prompt-label {
  margin: 0 0 0.2rem;
  font-size: 0.76rem;
  color: var(--warm-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.blind-trainer-prompt {
  margin: 0;
  font-size: clamp(2.1rem, 8vw, 2.75rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--warm-ink);
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.blind-trainer-stats {
  font-size: 0.82rem;
  color: var(--warm-muted);
  line-height: 1.4;
}

.blind-trainer-timer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  font-size: 0.8rem;
  color: var(--warm-muted);
}

.blind-trainer-check {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  user-select: none;
}

.blind-trainer-timer-select select {
  font: inherit;
  font-size: 0.82rem;
  padding: 0.25rem 0.4rem;
  border-radius: 8px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--warm-ink);
}

.blind-trainer-time-left {
  font-weight: 700;
  color: var(--warm-ink);
  font-variant-numeric: tabular-nums;
}

.blind-trainer-color-actions {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}

.blind-trainer-color-actions .blind-color-btn {
  flex: 1;
  justify-content: center;
  min-height: 2.5rem;
}

.blind-trainer-hint {
  margin: 0;
  font-size: 0.78rem;
  color: var(--warm-muted);
  line-height: 1.4;
}

.blind-trainer-footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.board.board--blind-colors {
  pointer-events: none;
}

/* До гидрации blind-page.js: скрыть сырую панель доски (нет вспышки кругового таймера и старой сетки). */
html[data-fbc-page="blind"][data-blind-mode="colors-only"]:not([data-blind-ready="1"]) .board-panel {
  opacity: 0;
  pointer-events: none;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-ready="1"] .board-panel {
  opacity: 1;
  transition: opacity 0.14s ease;
}

/* Радиус .board-wrap должен совпадать с .board — иначе overflow на обёртке даёт более крупную дугу сверху/снизу относительно поля. */
html[data-fbc-page="blind"][data-blind-mode="colors-only"] {
  --fbc-blind-board-clip-radius: var(--board-corner-radius);
  --fbc-blind-subhead-line: color-mix(in srgb, var(--panel-border) 62%, #f0cf66 38%);
}

html[data-app-theme="lichess-gray"][data-fbc-page="blind"][data-blind-mode="colors-only"] {
  --fbc-blind-board-clip-radius: 4px;
}

@media (orientation: portrait) {
  html[data-fbc-page="blind"][data-blind-mode="colors-only"] {
    --fbc-blind-board-clip-radius: calc(var(--board-corner-radius) / 2) !important;
  }
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .layout {
  --blind-colors-rhythm: 0.65rem;
  /* Половина rhythm: доска — шкала — кнопки (сетка стадии + отступ таймера) */
  --blind-colors-stack-gap: calc(var(--blind-colors-rhythm) * 0.5);
  --blind-colors-gap: var(--blind-colors-rhythm);
  --blind-colors-right-w: min(
    625px,
    calc((min(98vw, var(--fbc-mega-stack-w, 1280px)) - var(--blind-colors-gap)) / 2)
  );
  display: grid !important;
  grid-template-columns: minmax(260px, 1fr) auto;
  justify-content: center;
  gap: 0.75rem;
  align-items: start;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .board-panel {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  overflow: visible;
  border-radius: 0;
}

/* Зазоры 10px (доска↔кнопки) и 6px (низ блока↔окно) — только ландшафт; в портрете mate2 — 9px до кнопок, без зазора «полка↔окно». */
html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] {
  --blind-mate2-gap-board-to-actions: 0px;
  --blind-mate2-gap-stack-to-viewport: 0px;
}

@media (orientation: landscape) {
  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] {
    --blind-mate2-gap-board-to-actions: 10px;
    --blind-mate2-gap-stack-to-viewport: 6px;
  }
}

/* mate2: стадия съедает высоту колонки доски; кнопки — отдельный футер (в широком ландшафте в потоке снизу панели, иначе fixed к низу окна). */
html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .board-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  /* запас под fixed/absolute-футер: шов + отступ блока от низа + высота полосы + safe-area; в широком ландшафте ≥701px переопределяется */
  padding-bottom: calc(
    var(--blind-mate2-gap-board-to-actions) + var(--blind-mate2-gap-stack-to-viewport) +
      var(--blind-mate2-footer-bar-est, 3.45rem) + env(safe-area-inset-bottom, 0px)
  );
  box-sizing: border-box;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .board-panel > .blind-colors-stage {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .blind-mate2-footer-bar {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--blind-mate2-gap-stack-to-viewport) + env(safe-area-inset-bottom, 0px));
  z-index: 35;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  background: color-mix(in srgb, var(--warm-bg, #262421) 92%, transparent);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.28);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .blind-mate2-footer-bar .blind-colors-buttons {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  transform: none;
  box-sizing: border-box;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .blind-mate2-footer-bar .blind-mate2-actions-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  gap: clamp(0.14rem, 1.2vmin, 0.4rem);
  justify-content: stretch;
  box-sizing: border-box;
}

/*
 * Ряд уже по ширине .board-panel; узкое место — глобальное .blind-mate2-actions-row .btn { min-width: min(100%, 6.5rem) }:
 * три кнопки не могут сжаться, подпись «Показать/Скрыть доску» переносится. В футере mate2 снимаем пол и даём одну строку.
 */
html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
  .blind-mate2-footer-bar
  .blind-mate2-actions-row
  .btn {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
}

/* mate2, портрет: кнопки в потоке под доской (9px), не fixed к низу окна; без фона полосы и «плиток» у кнопок; ряд по центру как у остальных слепых в портрете. */
@media (orientation: portrait) {
  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] {
    --blind-mate2-gap-board-to-actions: 9px;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .board-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--blind-mate2-gap-board-to-actions);
    padding-bottom: 0;
    min-height: 0;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .board-panel > .blind-colors-stage {
    flex: 0 0 auto;
    flex-grow: 0;
    flex-shrink: 0;
    min-height: 0;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .blind-mate2-footer-bar {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: 6;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
    .blind-mate2-footer-bar
    .blind-colors-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    transform: none;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
    .blind-mate2-footer-bar
    .blind-mate2-actions-row {
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
    .blind-mate2-footer-bar
    .blind-mate2-actions-row
    .btn.btn-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}

/*
 * mate2, кнопки футера: инверсия к полям доски — «Заново»/«Следующая» на тёмном поле,
 * «Показать доску» на светлом (--blind-colors-btn-* на .board-panel задаёт blind-page.js).
 */
html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
  .blind-mate2-footer-bar
  .blind-mate2-actions-row
  .btn.btn-tool:nth-child(1),
html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
  .blind-mate2-footer-bar
  .blind-mate2-actions-row
  .btn.btn-tool:nth-child(2) {
  background: var(--blind-colors-btn-dark, #262421) !important;
  color: #fff !important;
  border: 1px solid
    color-mix(
      in srgb,
      var(--blind-colors-btn-light, #f5f1eb) 28%,
      var(--blind-colors-btn-dark, #262421) 72%
    ) !important;
  box-shadow: none !important;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
  .blind-mate2-footer-bar
  .blind-mate2-actions-row
  .btn.btn-tool:nth-child(3) {
  background: var(--blind-colors-btn-light, #f0d9b5) !important;
  color: #000 !important;
  border: 1px solid color-mix(in srgb, var(--blind-colors-btn-dark, #181513) 34%, transparent) !important;
  box-shadow: none !important;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
  .blind-mate2-footer-bar
  .blind-mate2-actions-row
  .btn.btn-tool:nth-child(1):hover,
html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
  .blind-mate2-footer-bar
  .blind-mate2-actions-row
  .btn.btn-tool:nth-child(2):hover,
html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
  .blind-mate2-footer-bar
  .blind-mate2-actions-row
  .btn.btn-tool:nth-child(1):focus-visible,
html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
  .blind-mate2-footer-bar
  .blind-mate2-actions-row
  .btn.btn-tool:nth-child(2):focus-visible {
  filter: brightness(1.09);
  color: #fff !important;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
  .blind-mate2-footer-bar
  .blind-mate2-actions-row
  .btn.btn-tool:nth-child(3):hover,
html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
  .blind-mate2-footer-bar
  .blind-mate2-actions-row
  .btn.btn-tool:nth-child(3):focus-visible {
  filter: brightness(1.06);
  color: #000 !important;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .right-column {
  display: block !important;
  width: var(--blind-colors-right-w);
  max-width: var(--blind-colors-right-w);
  min-width: 0;
  justify-self: center;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .right-column > .blind-trainer-panel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-trainer-panel {
  min-height: 0;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-trainer-panel > :not(.blind-trainer-head) {
  display: none !important;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-trainer-head {
  width: 100%;
  box-sizing: border-box;
  display: block;
  border: none;
  margin: 0;
  padding: 0;
  background: transparent;
  text-align: center;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-trainer-head .blind-trainer-back-link {
  display: none !important;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-trainer-head .blind-trainer-title {
  display: block;
  width: 100%;
  text-align: center;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-stage {
  --blind-colors-arcade-seconds-fz: 2.1rem;
  /* Единая ширина для cqw: промпт в портрете в герое доски, в широком ландшафте — в DKK; оба под этим предком. */
  container-type: inline-size;
  container-name: blind-colors-stage;
  display: grid;
  gap: var(--blind-colors-stack-gap, calc(var(--blind-colors-rhythm, 0.65rem) * 0.5));
  width: 100%;
  max-width: 100%;
  overflow: visible;
}

/* Слепые colors-only: не оставлять большой хвост 2.5rem под контентом — иначе на мобиле видна «полоска» фона под кластером. */
html[data-fbc-page="blind"][data-blind-mode="colors-only"] .app-frame {
  padding-bottom: max(0.45rem, env(safe-area-inset-bottom, 0px));
}

/* Портрет: как «Координаты» — доска сверху, под ней компактный таймер, ниже консоль (поле + кнопки). */
html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-board-hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  min-height: 0;
}

/* Доска в потоке не раздувает герой: слот фиксирован по aspect-ratio, обёртка поверх — кнопки не прыгают */
html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-board-hero > .board-wrap {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: none !important;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transition: opacity 130ms ease;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]
  .board-panel.blind-colors-stage--show-board
  .blind-colors-board-hero
  > .board-wrap {
  opacity: 1;
  pointer-events: auto;
  max-height: none !important;
}

/* Слепые «мат в 2»: при показе позиции условие (иконки состава) уходит под слой доски. */
html[data-fbc-page="blind"][data-blind-mode="colors-only"]
  .board-panel.blind-mate2-prompt-behind-board
  .blind-colors-board-prompt-host {
  z-index: 1;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-board-prompt-host {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 6;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-board-prompt-host:has(.blind-king-target--interactive) {
  pointer-events: auto;
}

/* Спринт короля в герое доски: не наследовать гигантский font-size хоста; по центру квадрата (как раньше). */
html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="king"]
  .blind-colors-board-prompt-host
  .blind-colors-target.blind-colors-target--knight-question {
  font-size: 1rem;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-board-prompt-host .blind-colors-target {
  margin: 0;
  font-size: clamp(4.6rem, 16vw, 8.4rem);
  line-height: 1;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]
  .blind-colors-board-prompt-host:has(.blind-mate2-prompt-root) {
  /* Иначе pointer-events: none у хоста — клики по фигурам условия не доходят до кнопок. */
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.1rem, 1.4vmin, 0.32rem) clamp(0.28rem, 2vmin, 0.5rem);
  box-sizing: border-box;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]
  .blind-colors-board-prompt-host .blind-colors-target.blind-mate2-prompt-root,
html[data-fbc-page="blind"][data-blind-mode="colors-only"]
  .blind-colors-dkk-bottom > .blind-colors-target.blind-mate2-prompt-root {
  /* Базовый .blind-colors-target — grid + place-items:center, translateY и огромный font-size;
     условие — по центру блока доски по вертикали (хост уже центрирует; внутри — колонка по центру). */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  place-items: unset;
  min-height: 0;
  transform: none;
  font-size: clamp(0.7rem, 2vw, 0.86rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-transform: none;
  width: 100%;
  max-width: 100%;
  text-align: center;
  align-self: center;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-arcade-countdown-host {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 7;
  opacity: 0;
  transition: opacity 0.12s ease;
}

/* Лента координат (z-index 8) — обратный отсчёт аркады должен быть поверх. */

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-arcade-countdown-host.is-on {
  opacity: 1;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-arcade-countdown-k {
  margin: 0;
  padding: 0 0.6rem;
  text-align: center;
  font-weight: 900;
  line-height: 1.05;
  color: var(--warm-ink);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  transform-origin: center center;
  will-change: transform, opacity, filter;
  font-size: clamp(4.6rem, 16vw, 8.4rem);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-arcade-countdown-k--go {
  font-size: clamp(2.4rem, 8.5vw, 4.8rem);
  letter-spacing: 0.02em;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-arcade-countdown-k--anim {
  opacity: 0;
  transform: scale(0.1);
  filter: blur(4px);
  animation: blind-colors-arcade-countdown-pop 0.78s cubic-bezier(0.2, 0.88, 0.32, 1) both;
}

@keyframes blind-colors-arcade-countdown-pop {
  0% {
    opacity: 0;
    transform: scale(0.1);
    filter: blur(4px);
    text-shadow: 0 0 0 transparent;
  }
  40% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
    text-shadow:
      0 0 0.08em rgba(255, 250, 240, 0.55),
      0 0 0.42em rgba(220, 175, 70, 0.55);
  }
  100% {
    opacity: 0.96;
    transform: scale(1.03);
    text-shadow:
      0 0 0.14em rgba(255, 250, 240, 0.4),
      0 0 0.65em rgba(220, 175, 70, 0.38);
  }
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-timer-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  margin-top: var(--blind-colors-stack-gap, calc(var(--blind-colors-rhythm, 0.65rem) * 0.5));
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-timer-row:has(.blind-colors-timer-fused) {
  gap: 0;
  padding: 0;
  justify-content: flex-start;
}

/* Одна строка на всю ширину колонки: иначе окно счёта упирается в max-content и не совпадает с правым краем «Чёрное». */
html[data-fbc-page="blind"][data-blind-mode="colors-only"]
  .blind-colors-timer-row:has(.blind-colors-timer-fused)
  .blind-colors-timer-fused {
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  min-width: 0;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-timer-row .blind-arcade-timer-wrap {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-arcade-toggle.btn.btn-tool {
  flex: 0 0 auto;
  min-width: clamp(3rem, 11vw, 4.25rem);
  min-height: clamp(2.2rem, 7.4vmin, 2.9rem);
  height: clamp(2.2rem, 7.4vmin, 2.9rem);
  padding: 0.1rem 0.5rem;
  font-size: inherit;
  line-height: 1;
  border-radius: 10px;
  box-sizing: border-box;
  color: color-mix(in srgb, var(--blind-colors-btn-light, #f4ebe3) 88%, #fff 12%);
  background: var(--blind-colors-btn-dark, color-mix(in srgb, var(--warm-card) 34%, #1e1a18 66%));
  border: 1px solid color-mix(in srgb, var(--blind-colors-btn-dark, #3a322c) 55%, #000 45%);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-arcade-toggle.is-active {
  border-color: color-mix(in srgb, var(--blind-colors-btn-light, #f0e6dc) 35%, var(--blind-colors-btn-dark, #3a322c) 65%);
  color: color-mix(in srgb, var(--blind-colors-btn-light, #f4ebe3) 90%, #fff 10%);
  background: var(--blind-colors-btn-dark, color-mix(in srgb, var(--warm-card) 34%, #1e1a18 66%));
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-arcade-toggle__ico {
  display: grid;
  place-items: center;
  line-height: 1;
  font-size: clamp(1.35rem, 4.5vmin, 1.95rem);
  font-weight: 600;
  letter-spacing: 0;
  font-variant-emoji: text;
  font-family: "Segoe UI Symbol", "Noto Sans Symbols2", "DejaVu Sans", system-ui, sans-serif;
  text-shadow: none;
  filter: none;
  color: color-mix(in srgb, var(--blind-colors-btn-light, #f4ebe3) 88%, #fff 12%);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-arcade-toggle__lbl--stop {
  font-size: clamp(0.72rem, 1.95vmin, 0.86rem);
  line-height: 1.12;
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 800;
  color: color-mix(in srgb, var(--blind-colors-btn-light, #f4ebe3) 88%, #fff 12%);
}

/* Старт + шкала + окно счёта: без наслоения, отдельные соседние элементы. */
html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-timer-fused {
  --blind-colors-timer-h: clamp(2.2rem, 7.4vmin, 2.9rem);
  --blind-colors-timer-r-cap: 11px;
  --blind-colors-timer-cell-w: calc(clamp(2.85rem, 9.5vw, 3.85rem) * 1.25);
  --blind-colors-timer-r: clamp(7px, 1.1vmin, var(--blind-colors-timer-r-cap));
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: clamp(0.22rem, 0.9vmin, 0.36rem);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
  min-height: 0;
  transition: width 0.62s cubic-bezier(0.33, 1.02, 0.68, 1);
}

html[data-fbc-page="blind"][data-blind-layout="unified-noncoords"] .blind-arcade-controls.blind-arcade-controls--unified {
  transition: width 0.62s cubic-bezier(0.33, 1.02, 0.68, 1);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-timer-fused > .blind-arcade-timer-wrap.blind-colors-linear-wrap,
html[data-fbc-page="blind"][data-blind-layout="unified-noncoords"] .blind-arcade-controls.blind-arcade-controls--unified > .blind-arcade-timer-wrap.blind-arcade-linear-unified-wrap {
  position: relative;
  z-index: 1;
  /* basis 0: иначе при малым --arcade-progress ширина дорожки тянется за внутренней полосой и схлопывается. */
  flex: 1 1 0%;
  align-self: stretch;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: none;
  border-radius: var(--blind-colors-timer-r);
  box-shadow: none;
  /* Лоток под полосой прогресса — всегда на ширину блока кнопок/доски (раньше max-width:0 скрывал шкалу вне аркады). */
  background: color-mix(in srgb, var(--blind-colors-btn-dark, #3a322c) 28%, transparent);
  opacity: 1;
  margin-left: 0;
  overflow: hidden;
  pointer-events: auto;
  transition: opacity 0.34s ease;
}

/* Класс оставлен для JS/стилей «аркада активна»; ширину дорожки больше не схлопываем. */
html[data-fbc-page="blind"][data-blind-mode="colors-only"]
  .blind-colors-timer-fused.blind-colors-timer-strip--expanded
  > .blind-arcade-timer-wrap.blind-colors-linear-wrap,
html[data-fbc-page="blind"][data-blind-layout="unified-noncoords"]
  .blind-arcade-controls.blind-arcade-controls--unified.blind-colors-timer-strip--expanded
  > .blind-arcade-timer-wrap.blind-arcade-linear-unified-wrap {
  max-width: 100%;
  opacity: 1;
  pointer-events: auto;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-timer-fused .blind-colors-linear-wrap::before,
html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-timer-fused .blind-colors-linear-wrap::after {
  display: none;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-timer-fused > button.blind-colors-arcade-toggle.btn.btn-tool,
html[data-fbc-page="blind"][data-blind-layout="unified-noncoords"] .blind-arcade-controls.blind-arcade-controls--unified > button.blind-arcade-btn.blind-arcade-btn--strip.btn.btn-tool {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  align-self: stretch;
  box-sizing: border-box;
  height: var(--blind-colors-timer-h);
  min-height: var(--blind-colors-timer-h);
  max-height: var(--blind-colors-timer-h);
  margin: 0;
  padding: 0.06rem 0.48rem;
  min-width: var(--blind-colors-timer-cell-w);
  border-radius: var(--blind-colors-timer-r);
  border: 1px solid color-mix(in srgb, var(--blind-colors-btn-dark, #3a322c) 55%, #000 45%);
  background: var(--blind-colors-btn-dark, color-mix(in srgb, var(--warm-card) 34%, #1e1a18 66%));
  box-shadow: none;
  color: color-mix(in srgb, var(--blind-colors-btn-light, #f4ebe3) 88%, #fff 12%);
  font-weight: 800;
  font-size: inherit;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]
  .blind-colors-timer-fused
  > button.blind-colors-arcade-toggle.btn.btn-tool:focus,
html[data-fbc-page="blind"][data-blind-mode="colors-only"]
  .blind-colors-timer-fused
  > button.blind-colors-arcade-toggle.btn.btn-tool:focus-visible,
html[data-fbc-page="blind"][data-blind-layout="unified-noncoords"]
  .blind-arcade-controls.blind-arcade-controls--unified
  > button.blind-arcade-btn.blind-arcade-btn--strip.btn.btn-tool:focus,
html[data-fbc-page="blind"][data-blind-layout="unified-noncoords"]
  .blind-arcade-controls.blind-arcade-controls--unified
  > button.blind-arcade-btn.blind-arcade-btn--strip.btn.btn-tool:focus-visible {
  outline: none;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-timer-fused > button.blind-colors-arcade-toggle.btn.btn-tool:hover,
html[data-fbc-page="blind"][data-blind-layout="unified-noncoords"] .blind-arcade-controls.blind-arcade-controls--unified > button.blind-arcade-btn.blind-arcade-btn--strip.btn.btn-tool:hover {
  background: color-mix(in srgb, var(--blind-colors-btn-dark, #3a322c) 82%, #fff 18%);
  color: color-mix(in srgb, var(--blind-colors-btn-light, #f4ebe3) 92%, #fff 8%);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-timer-fused > button.blind-colors-arcade-toggle.btn.btn-tool.is-active,
html[data-fbc-page="blind"][data-blind-layout="unified-noncoords"] .blind-arcade-controls.blind-arcade-controls--unified > button.blind-arcade-btn.blind-arcade-btn--strip.btn.btn-tool.is-active {
  border: 1px solid color-mix(in srgb, var(--blind-colors-btn-light, #f0e6dc) 28%, var(--blind-colors-btn-dark, #3a322c) 72%);
  color: color-mix(in srgb, var(--blind-colors-btn-light, #f4ebe3) 90%, #fff 10%);
  background: var(--blind-colors-btn-dark, color-mix(in srgb, var(--warm-card) 34%, #1e1a18 66%));
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-timer-fused > button.blind-colors-arcade-toggle.btn.btn-tool:active,
html[data-fbc-page="blind"][data-blind-layout="unified-noncoords"] .blind-arcade-controls.blind-arcade-controls--unified > button.blind-arcade-btn.blind-arcade-btn--strip.btn.btn-tool:active {
  transform: translateY(1px);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-linear-wrap,
html[data-fbc-page="blind"][data-blind-layout="unified-noncoords"] .blind-arcade-linear-unified-wrap {
  position: relative;
  display: block;
  width: 100%;
  height: var(--blind-colors-timer-h, clamp(2.2rem, 7.4vmin, 2.9rem));
  border-radius: var(--blind-colors-timer-r, clamp(7px, 1.1vmin, 11px));
  border: none;
  background: color-mix(in srgb, var(--blind-colors-btn-dark, #3a322c) 28%, transparent);
  box-shadow: none;
  overflow: hidden;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-timer-fused > .blind-arcade-timer-wrap.blind-colors-linear-wrap,
html[data-fbc-page="blind"][data-blind-layout="unified-noncoords"] .blind-arcade-controls.blind-arcade-controls--unified > .blind-arcade-timer-wrap.blind-arcade-linear-unified-wrap {
  height: var(--blind-colors-timer-h);
  min-height: var(--blind-colors-timer-h);
  max-height: var(--blind-colors-timer-h);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-linear-wrap::before,
html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-linear-wrap::after,
html[data-fbc-page="blind"][data-blind-layout="unified-noncoords"] .blind-arcade-linear-unified-wrap::before,
html[data-fbc-page="blind"][data-blind-layout="unified-noncoords"] .blind-arcade-linear-unified-wrap::after {
  display: none;
}

/* Линейная шкала «цвета»: убывает от полной к пустой по --arcade-progress. */
html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-linear-wrap .blind-arcade-timer,
html[data-fbc-page="blind"][data-blind-layout="unified-noncoords"] .blind-arcade-linear-unified-wrap .blind-arcade-timer {
  width: max(2px, calc(var(--arcade-progress) * 100%));
  height: 100%;
  min-width: 0;
  aspect-ratio: auto;
  display: block;
  border-radius: var(--blind-colors-timer-r, clamp(7px, 1.1vmin, 11px));
  /* База: без красного, пока progress > 0.25 (это даст «начинает краснеть» ровно в конце). */
  background: var(
    --blind-colors-btn-dark,
    color-mix(in srgb, var(--warm-card) 34%, #1e1a18 66%)
  );
  opacity: 0.82;
  box-shadow: none;
  color: transparent;
  text-shadow: none;
  transition: width 80ms linear, background 0.22s ease;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]
  .blind-colors-linear-wrap
  .blind-arcade-timer.is-low,
html[data-fbc-page="blind"][data-blind-layout="unified-noncoords"]
  .blind-arcade-linear-unified-wrap
  .blind-arcade-timer.is-low {
  /* progress: 0.25 -> 0.125 => плавно к красному, ниже 0.125 — полностью красная. */
  --arcade-danger: clamp(0, calc((0.25 - var(--arcade-progress)) / 0.125), 1);
  background: color-mix(
    in srgb,
    var(--blind-colors-btn-dark, color-mix(in srgb, var(--warm-card) 34%, #1e1a18 66%))
      calc((1 - var(--arcade-danger)) * 100%),
    hsl(352 78% 52%) calc(var(--arcade-danger) * 100%)
  );
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-inline-score {
  display: grid;
  place-items: center;
  align-self: stretch;
  margin-left: auto;
  height: var(--blind-colors-timer-h);
  min-height: var(--blind-colors-timer-h);
  max-height: var(--blind-colors-timer-h);
  min-width: var(--blind-colors-timer-cell-w);
  width: var(--blind-colors-timer-cell-w);
  padding: 0;
  border-radius: var(--blind-colors-timer-r);
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--blind-colors-btn-light, #f4ebe3) 92%, #fff 8%);
  font-weight: 800;
  font-size: clamp(0.84rem, 2.35vmin, 1rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 2px
    var(--blind-colors-btn-dark, color-mix(in srgb, var(--warm-card) 34%, #1e1a18 66%));
  overflow: hidden;
  white-space: nowrap;
  opacity: 1;
  transition: color 0.2s ease, box-shadow 0.2s ease;
}

html[data-fbc-page="blind"][data-blind-layout="unified-noncoords"]
  .blind-arcade-controls.blind-arcade-controls--unified
  > .blind-colors-inline-score {
  margin-left: auto;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-linear-wrap .blind-arcade-bonus,
html[data-fbc-page="blind"][data-blind-layout="unified-noncoords"] .blind-arcade-linear-unified-wrap .blind-arcade-bonus {
  right: 0.2rem;
  top: -1.25rem;
  font-size: clamp(0.74rem, 1.7vmin, 0.94rem);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-squares-row {
  /*
   * Контейнер для cqi: ширина слота «шкала + кнопки» — зазор до шкалы считаем долей слота, а не голым vmin.
   */
  container-type: inline-size;
  container-name: blind-colors-ui-slot;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  width: 100%;
  max-width: 100%;
  gap: var(--blind-colors-gap);
  /*
   * Отступ между строкой таймера/«линейки» (.blind-colors-timer-row) и блоком шкала+кнопки.
   * В широком ландшафте см. margin-bottom в блоке ≥701px (там flex-колонка с justify-end).
   */
  margin-top: clamp(0.52rem, 2.2vmin, 1.05rem);
  margin-bottom: 0;
}

@media (max-width: 1020px) and (orientation: portrait), (orientation: landscape) and (max-width: 700px) {
  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .layout {
    grid-template-columns: 1fr !important;
    justify-content: stretch !important;
    width: 100%;
    column-gap: 0;
    row-gap: 1rem;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .board-panel,
  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-stage,
  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-board-hero,
  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-timer-row,
  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .board-wrap,
  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .board-stack {
    max-width: 100% !important;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .right-column {
    width: 100% !important;
    max-width: 100% !important;
    justify-self: stretch !important;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-squares-row {
    grid-template-columns: 1fr !important;
    justify-content: stretch !important;
    width: 100%;
    max-width: 100%;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-left-square {
    width: 100%;
    max-width: 100%;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-dkk {
    aspect-ratio: auto;
    min-height: 0;
    width: 100%;
  }

  /* Высоту задаёт aspect-ratio у героя; min-height не нужен — иначе дублирует слот и ломает стабильность кнопок */
  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-board-hero {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    flex-shrink: 0;
  }

}

/*
 * mate2, узкий ландшафт: футер absolute в .board-panel — ширина ряда = ширина колонки доски (не 100vw);
 * убираем боковые отступы, лишний row-gap у .layout. Зазоры 10px/6px только здесь (переменные в @media landscape).
 */
@media (orientation: landscape) and (max-width: 700px) {
  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .layout {
    row-gap: 0;
  }

  /* Как в широком ландшафте: не даём .board-panel > .blind-colors-stage с flex:1 раздувать пустоту над кнопками. */
  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .board-panel > .blind-colors-stage {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    flex: 0 0 auto;
    flex-grow: 0;
    flex-shrink: 0;
    min-height: 0;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .board-panel {
    position: relative;
    padding-inline: 0;
    margin-inline: 0;
    max-width: 100%;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .blind-mate2-footer-bar {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    bottom: calc(var(--blind-mate2-gap-stack-to-viewport) + env(safe-area-inset-bottom, 0px));
    padding-left: 0;
    padding-right: 0;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
    .blind-mate2-footer-bar
    .blind-colors-buttons,
  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
    .blind-mate2-footer-bar
    .blind-mate2-actions-row {
    max-width: none;
    width: 100%;
    padding-inline: 0;
    margin-inline: 0;
  }
}

/* Планшетный портрет шире 1020px: тот же смысл — без квадратного пустого DKK и с зарезервированной зоной доски. */
@media (min-width: 1021px) and (orientation: portrait) {
  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-dkk {
    aspect-ratio: auto;
    min-height: 0;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-board-hero {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    flex-shrink: 0;
  }
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-left-square {
  display: grid;
  gap: var(--blind-colors-rhythm, 0.65rem);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-left-square > .blind-colors-toggle {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
}

/* Координаты: доска всегда видна, переключателя «Показывать доску» нет (см. blind-page.js). */
html[data-fbc-page="blind"][data-blind-trainer="coords"] .blind-colors-left-square > .blind-colors-toggle {
  display: none !important;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-dkk {
  position: relative;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}

/*
 * mate2: в .blind-colors-squares-row только слот доски+DKK; кнопки — .blind-mate2-footer-bar под стадией (blind-page.js).
 */
html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .blind-colors-squares-row {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr);
  gap: clamp(4px, 1.2vmin, 6px);
  box-sizing: border-box;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .blind-colors-board-square,
html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .blind-colors-left-square {
  grid-area: 1 / 1;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .blind-colors-left-square {
  gap: clamp(4px, 1.2vmin, 6px);
  grid-template-rows: minmax(0, 1fr);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .blind-colors-dkk {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  align-self: stretch;
  justify-content: center;
  align-items: stretch;
  gap: clamp(0.1rem, 1.6vmin, 0.32rem);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .blind-colors-dkk-top,
html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .blind-colors-dkk-bottom {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  height: auto;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .blind-colors-dkk-top {
  display: none !important;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .blind-colors-dkk-bottom {
  flex: 1 1 auto;
  min-height: 0;
  justify-content: center;
  align-items: center;
  padding: 0 clamp(0.24rem, 2vmin, 0.45rem) clamp(0.06rem, 1vmin, 0.18rem);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-board-square {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: none;
}

/* «Запомни позицию»: слот доски с палитрами по бокам — иначе display:none скрывает слот при смене ориентации. */
html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"] .blind-colors-board-square {
  display: block;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"] .blind-memory-piece-btn {
  touch-action: none;
  user-select: none;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-arcade-timer-wrap.blind-colors-arcade-on-board {
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 4;
  min-height: 0;
  align-items: center;
  /* Пустая область inset:0 не должна перехватывать клики — только круг .blind-arcade-timer (pointer-events: auto). */
  pointer-events: none;
  transform: translateY(-25%);
  opacity: 1;
  transition: opacity 180ms ease;
}

/* Аркада: полоски в блоке под строкой режима; ширина ограничивается JS до левого края доски */
html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-bars-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: auto;
  --blind-arcade-bar-gap: 6px;
  --blind-arcade-bar-row-h: 14px;
  pointer-events: none;
  box-sizing: border-box;
  margin: 0;
}

/* Телефон, портрет: полоски не упираются в край экрана (и safe-area для выреза). */
@media (orientation: portrait) {
  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-bars-wrap {
    padding-right: calc(10px + env(safe-area-inset-right, 0px));
    box-sizing: border-box;
  }
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-bars-rows {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: var(--blind-arcade-bar-gap);
  height: auto;
  width: 100%;
  box-sizing: border-box;
  flex: 0 0 auto;
  min-height: 0;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-bar-row {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: stretch;
  gap: 6px;
  flex: 0 0 auto;
  height: var(--blind-arcade-bar-row-h);
  min-height: var(--blind-arcade-bar-row-h);
  max-height: var(--blind-arcade-bar-row-h);
  box-sizing: border-box;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-bar-row.is-hidden-row {
  display: none;
}

/* Визуально отделить блок WR+PB от полос последних попыток (~полстроки диаграммы). */
html[data-fbc-page="blind"][data-blind-mode="colors-only"]
  .blind-colors-bar-row:has(.blind-colors-bar--pb) {
  margin-bottom: calc(var(--blind-arcade-bar-row-h) / 2);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-bars-tick {
  font-size: clamp(0.56rem, 1.05vmin, 0.72rem);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: color-mix(in srgb, var(--warm-muted) 72%, #3a3228 28%);
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  text-align: right;
  user-select: none;
  opacity: 0.78;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: clamp(1rem, 2.4vmin, 1.35rem);
}

/* Ряд — только слот; сама «плашка» как у вертикальных столбиков, только в ширину */
html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-bar-track {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  align-self: stretch;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-bar-ribbon-label {
  position: absolute;
  left: clamp(3px, 0.9vmin, 7px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  font-size: clamp(0.56rem, 1.2vmin, 0.7rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, #d4b878 78%, #4a3c30 22%);
  line-height: 1;
  pointer-events: none;
  opacity: 0.88;
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.88),
    0 1px 2px rgba(0, 0, 0, 0.55);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-bar {
  --bar-w: 0%;
  flex: 0 0 auto;
  width: var(--bar-w);
  height: 100%;
  min-width: 0;
  border-radius: 2px 4px 4px 2px;
  background: color-mix(in srgb, var(--warm-card) 70%, #2a2622 30%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.28);
  transition: width 220ms cubic-bezier(0.2, 0.72, 0.24, 1), background 180ms ease, opacity 180ms ease,
    min-width 220ms cubic-bezier(0.2, 0.72, 0.24, 1);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-bar.is-empty {
  background: color-mix(in srgb, var(--warm-card) 50%, #1a1816 50%);
  opacity: 0.45;
  min-width: clamp(5px, 6%, 14px);
}

/* WR / PB / попытки: приглушённые, с коричневым подмесом, чуть прозрачные — меньше отвлекают от задачи */
html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-bar--wr {
  --blind-arcade-bar-earth: #45362e;
  opacity: 0.86;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #e8a8a0 74%, var(--blind-arcade-bar-earth) 26%) 0%,
    color-mix(in srgb, #c0786e 68%, var(--blind-arcade-bar-earth) 32%) 48%,
    color-mix(in srgb, #8f5248 62%, var(--blind-arcade-bar-earth) 38%) 100%
  );
  border: 1px solid color-mix(in srgb, #7a4540 55%, var(--blind-arcade-bar-earth) 45%);
  box-shadow: 0 1px 3px rgba(40, 28, 24, 0.22);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-bar--pb {
  --blind-arcade-bar-earth: #3a342c;
  opacity: 0.86;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #7fd88a 70%, var(--blind-arcade-bar-earth) 30%) 0%,
    color-mix(in srgb, #5fb86e 64%, var(--blind-arcade-bar-earth) 36%) 52%,
    color-mix(in srgb, #4a8f58 58%, var(--blind-arcade-bar-earth) 42%) 100%
  );
  border: 1px solid color-mix(in srgb, #4a9660 50%, var(--blind-arcade-bar-earth) 50%);
  box-shadow: 0 1px 3px rgba(28, 36, 28, 0.2);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-bar--attempt {
  --blind-arcade-bar-earth: #40382e;
  opacity: calc(var(--attempt-alpha, 1) * 0.84);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #e8d070 68%, var(--blind-arcade-bar-earth) 32%) 0%,
    color-mix(in srgb, #d4b850 62%, var(--blind-arcade-bar-earth) 38%) 50%,
    color-mix(in srgb, #b89a40 56%, var(--blind-arcade-bar-earth) 44%) 100%
  );
  border: 1px solid color-mix(in srgb, #a88c38 52%, var(--blind-arcade-bar-earth) 48%);
  box-shadow: 0 1px 3px rgba(36, 32, 22, 0.18);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-arcade-timer-wrap.blind-colors-arcade-on-board .blind-arcade-timer {
  width: clamp(9.6rem, 28vmin, 16.8rem);
  font-size: clamp(2.1rem, 5.6vmin, 3.2rem);
  pointer-events: auto;
  cursor: pointer;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .board-panel.blind-colors-stage--show-board .blind-arcade-timer-wrap.blind-colors-arcade-on-board {
  opacity: 0.38;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]
  .board-panel.blind-colors-stage--show-board
  .blind-arcade-timer-wrap.blind-colors-arcade-on-board:has(.blind-arcade-timer:hover),
html[data-fbc-page="blind"][data-blind-mode="colors-only"]
  .board-panel.blind-colors-stage--show-board
  .blind-arcade-timer-wrap.blind-colors-arcade-on-board:focus-within {
  opacity: 0.6;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-dkk-top,
html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-dkk-bottom {
  position: absolute;
  left: 0;
  right: 0;
  display: grid;
  justify-items: center;
  align-content: center;
  pointer-events: auto;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-dkk-top {
  top: 0;
  height: 50%;
  justify-items: start;
  align-content: start;
  align-items: start;
  padding: 0.08rem 0 0 0.08rem;
  gap: 0;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-dkk-top #btnArcadeMode {
  justify-self: start;
  align-self: start;
  margin: 0 !important;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-dkk-bottom {
  bottom: 0;
  height: 50%;
  padding-bottom: 0.4rem;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-target {
  margin: 0;
  min-height: 2.2rem;
  width: 100%;
  max-width: 100%;
  border-radius: 0;
  border: none;
  background: transparent;
  display: grid;
  place-items: center;
  font-size: 8rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: lowercase;
  color: var(--warm-ink);
  transition: color 140ms ease, text-shadow 140ms ease;
  transform: translateY(-0.7rem);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-target--knight-question {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.95rem;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  padding: 0 0.35rem;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-target--knight-question .blind-knight-question-line {
  display: block;
  font-size: clamp(1.1rem, 1.9vw, 1.9rem);
  line-height: 0.38;
  white-space: normal;
  color: color-mix(in srgb, var(--warm-ink) 82%, #9db2c0 18%);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-target--knight-question .blind-knight-coords-line {
  font-size: clamp(4rem, 12.8vw, 5.9rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.05;
}

/*
 * Спринт короля: зазор от низа блока фигур до строки «Сколько ходов…» — фиксированный (px),
 * не схлопывается при масштабировании (flex-gap убран, отступы только margin).
 */
html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="king"]
  .blind-colors-target--knight-question {
  gap: 0;
}

/* Зазор под ряд пешек — padding у стека (в flex не схлопывается с отрицательными margin соседей). */
html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="king"] .blind-king-pieces-stack {
  padding-bottom: 28px;
  box-sizing: border-box;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="king"]
  .blind-colors-target--knight-question
  > .blind-knight-question-line {
  margin-top: 12px;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="king"]
  .blind-colors-target--knight-question
  > .blind-knight-coords-line {
  margin-top: 10px;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-target--ok {
  color: #3fe06f;
  text-shadow:
    0 0 12px rgba(63, 224, 111, 0.6),
    0 0 28px rgba(63, 224, 111, 0.42);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-target--bad {
  color: #f05858;
  text-shadow:
    0 0 12px rgba(240, 88, 88, 0.56),
    0 0 28px rgba(240, 88, 88, 0.4);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]
  .blind-colors-target.blind-colors-target--arcade-countdown-hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.14s ease, visibility 0.14s ease;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]
  .blind-colors-target.blind-colors-target--hidden-for-board-flash {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.14s ease, visibility 0.14s ease;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--blind-colors-rhythm, 0.65rem);
  transform: translateY(-5px);
}

/* Две кнопки (цвет полей, ход коня): явный зазор между колонками */
html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="colors"]
  .blind-colors-buttons,
html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="knight"]
  .blind-colors-buttons {
  gap: max(var(--blind-colors-rhythm, 0.65rem), 12px);
  column-gap: max(var(--blind-colors-rhythm, 0.65rem), 12px);
}

/* Хаб режимов слепых: сетка карточек на 5px выше */
html[data-fbc-page="blind-hub"] .blind-hub-grid {
  transform: translateY(-5px);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-bishop-group {
  width: 100%;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-bishop-unified-shell {
  width: 100%;
  box-sizing: border-box;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]
  .blind-colors-buttons.blind-memory-buttons.blind-bishop-memory-layout {
  gap: calc(var(--blind-colors-rhythm, 0.65rem) * 0.55);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-bishop-grid--unified {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: calc(var(--blind-colors-rhythm, 0.65rem) * 0.45);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-bishop-key {
  border: 1px solid color-mix(in srgb, var(--panel-border) 70%, #000 30%);
  border-radius: 12px;
  min-height: clamp(46px, 8.2vw, 68px);
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;
}

/* Слон: буквы = светлое поле, цифры = тёмное (как у текущей темы доски; :has по классу .board). */
html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-bishop-key--file {
  background: #cec690;
  color: #14120f;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-bishop-key--rank {
  background: #6e6156;
  color: #f5f1e8;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-bishop-key--file.is-active {
  background: #6e6156;
  color: #f5f1e8;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-bishop-key--rank.is-active {
  background: #cec690;
  color: #14120f;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-classic) .blind-bishop-key--file {
  background: var(--lichess-light);
  color: #111;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-classic) .blind-bishop-key--rank {
  background: var(--lichess-dark);
  color: #f4f4f4;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-classic) .blind-bishop-key--file.is-active {
  background: var(--lichess-dark);
  color: #f4f4f4;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-classic) .blind-bishop-key--rank.is-active {
  background: var(--lichess-light);
  color: #111;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-sand-gray) .blind-bishop-key--file {
  background: #cec690;
  color: #14120f;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-sand-gray) .blind-bishop-key--rank {
  background: #6e6156;
  color: #f5f1e8;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-sand-gray) .blind-bishop-key--file.is-active {
  background: #6e6156;
  color: #f5f1e8;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-sand-gray) .blind-bishop-key--rank.is-active {
  background: #cec690;
  color: #14120f;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-brown) .blind-bishop-key--file {
  background: #f0d9b5;
  color: #1a1510;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-brown) .blind-bishop-key--rank {
  background: #b58863;
  color: #fffaf2;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-brown) .blind-bishop-key--file.is-active {
  background: #b58863;
  color: #fffaf2;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-brown) .blind-bishop-key--rank.is-active {
  background: #f0d9b5;
  color: #1a1510;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-green) .blind-bishop-key--file {
  background: #eeeed2;
  color: #1a1c12;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-green) .blind-bishop-key--rank {
  background: #769656;
  color: #f6f8ef;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-green) .blind-bishop-key--file.is-active {
  background: #769656;
  color: #f6f8ef;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-green) .blind-bishop-key--rank.is-active {
  background: #eeeed2;
  color: #1a1c12;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-blue) .blind-bishop-key--file {
  background: #dee3e6;
  color: #161a1e;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-blue) .blind-bishop-key--rank {
  background: #8ca2ad;
  color: #f8fafc;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-blue) .blind-bishop-key--file.is-active {
  background: #8ca2ad;
  color: #f8fafc;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-blue) .blind-bishop-key--rank.is-active {
  background: #dee3e6;
  color: #161a1e;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-gray) .blind-bishop-key--file {
  background: #e8e9ec;
  color: #1a1d22;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-gray) .blind-bishop-key--rank {
  background: #9facb7;
  color: #f6f8fb;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-gray) .blind-bishop-key--file.is-active {
  background: #9facb7;
  color: #f6f8fb;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-gray) .blind-bishop-key--rank.is-active {
  background: #e8e9ec;
  color: #1a1d22;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-purple) .blind-bishop-key--file {
  background: #e5e0e9;
  color: #2a2430;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-purple) .blind-bishop-key--rank {
  background: #9f90b0;
  color: #f8f6fa;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-purple) .blind-bishop-key--file.is-active {
  background: #9f90b0;
  color: #f8f6fa;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-purple) .blind-bishop-key--rank.is-active {
  background: #e5e0e9;
  color: #2a2430;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-ic) .blind-bishop-key--file {
  background: #eceff1;
  color: #1e2a2e;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-ic) .blind-bishop-key--rank {
  background: #5d7479;
  color: #eef3f4;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-ic) .blind-bishop-key--file.is-active {
  background: #5d7479;
  color: #eef3f4;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-ic) .blind-bishop-key--rank.is-active {
  background: #eceff1;
  color: #1e2a2e;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-pink) .blind-bishop-key--file {
  background: #fef0f6;
  color: #3d2433;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-pink) .blind-bishop-key--rank {
  background: #d48ab0;
  color: #fff8fc;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-pink) .blind-bishop-key--file.is-active {
  background: #d48ab0;
  color: #fff8fc;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-pink) .blind-bishop-key--rank.is-active {
  background: #fef0f6;
  color: #3d2433;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-red) .blind-bishop-key--file {
  background: #fff0f0;
  color: #3d2020;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-red) .blind-bishop-key--rank {
  background: #c86a6a;
  color: #fff5f5;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-red) .blind-bishop-key--file.is-active {
  background: #c86a6a;
  color: #fff5f5;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-red) .blind-bishop-key--rank.is-active {
  background: #fff0f0;
  color: #3d2020;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-orange) .blind-bishop-key--file {
  background: #fff4e6;
  color: #3d2a14;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-orange) .blind-bishop-key--rank {
  background: #d99555;
  color: #fff8f0;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-orange) .blind-bishop-key--file.is-active {
  background: #d99555;
  color: #fff8f0;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-orange) .blind-bishop-key--rank.is-active {
  background: #fff4e6;
  color: #3d2a14;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-yellow) .blind-bishop-key--file {
  background: #ffffdd;
  color: #3d3818;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-yellow) .blind-bishop-key--rank {
  background: #d8c86d;
  color: #2e2a12;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-yellow) .blind-bishop-key--file.is-active {
  background: #d8c86d;
  color: #2e2a12;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-yellow) .blind-bishop-key--rank.is-active {
  background: #ffffdd;
  color: #3d3818;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-olive) .blind-bishop-key--file {
  background: #eeeed6;
  color: #2e2e1a;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-olive) .blind-bishop-key--rank {
  background: #6b6b3f;
  color: #f4f4e8;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-olive) .blind-bishop-key--file.is-active {
  background: #6b6b3f;
  color: #f4f4e8;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-lichess-olive) .blind-bishop-key--rank.is-active {
  background: #eeeed6;
  color: #2e2e1a;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-app-theme="lichess-gray"]:has(
    .board.board-theme-lichess-gray
  )
  .blind-bishop-key--file {
  background: #4a433d;
  color: #f0ebe4;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-app-theme="lichess-gray"]:has(
    .board.board-theme-lichess-gray
  )
  .blind-bishop-key--rank {
  background: #2f2b28;
  color: #e8e4df;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-app-theme="lichess-gray"]:has(
    .board.board-theme-lichess-gray
  )
  .blind-bishop-key--file.is-active {
  background: #2f2b28;
  color: #e8e4df;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-app-theme="lichess-gray"]:has(
    .board.board-theme-lichess-gray
  )
  .blind-bishop-key--rank.is-active {
  background: #4a433d;
  color: #f0ebe4;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-wood-maple) .blind-bishop-key--file {
  background:
    radial-gradient(circle at 20% 28%, rgba(255, 255, 255, 0.22), transparent 55%),
    linear-gradient(115deg, #d2b07f 0%, #c79f6d 45%, #be9461 100%);
  color: #1f140c;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-wood-maple) .blind-bishop-key--rank {
  background:
    radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.1), transparent 50%),
    linear-gradient(125deg, #8e6239 0%, #7a5431 46%, #6a4a2c 100%);
  color: #fdf6ed;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-wood-maple) .blind-bishop-key--file.is-active {
  background:
    radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.1), transparent 50%),
    linear-gradient(125deg, #8e6239 0%, #7a5431 46%, #6a4a2c 100%);
  color: #fdf6ed;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-wood-maple) .blind-bishop-key--rank.is-active {
  background:
    radial-gradient(circle at 20% 28%, rgba(255, 255, 255, 0.22), transparent 55%),
    linear-gradient(115deg, #d2b07f 0%, #c79f6d 45%, #be9461 100%);
  color: #1f140c;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-wood-oak) .blind-bishop-key--file {
  background:
    repeating-linear-gradient(88deg, rgba(255, 255, 255, 0.05) 0 2px, rgba(255, 255, 255, 0) 2px 5px),
    linear-gradient(120deg, #e0c18f 0%, #d7b27b 48%, #cda56c 100%);
  color: #1c140c;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-wood-oak) .blind-bishop-key--rank {
  background:
    repeating-linear-gradient(92deg, rgba(0, 0, 0, 0.08) 0 2px, rgba(0, 0, 0, 0) 2px 5px),
    linear-gradient(120deg, #8d5f34 0%, #7c532f 47%, #714b2b 100%);
  color: #fff5e8;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-wood-oak) .blind-bishop-key--file.is-active {
  background:
    repeating-linear-gradient(92deg, rgba(0, 0, 0, 0.08) 0 2px, rgba(0, 0, 0, 0) 2px 5px),
    linear-gradient(120deg, #8d5f34 0%, #7c532f 47%, #714b2b 100%);
  color: #fff5e8;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-wood-oak) .blind-bishop-key--rank.is-active {
  background:
    repeating-linear-gradient(88deg, rgba(255, 255, 255, 0.05) 0 2px, rgba(255, 255, 255, 0) 2px 5px),
    linear-gradient(120deg, #e0c18f 0%, #d7b27b 48%, #cda56c 100%);
  color: #1c140c;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-wood-walnut) .blind-bishop-key--file {
  background:
    linear-gradient(118deg, #ceb38b 0%, #c3a176 46%, #b89266 100%);
  color: #1a120d;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-wood-walnut) .blind-bishop-key--rank {
  background:
    linear-gradient(122deg, #70492f 0%, #603f29 48%, #523623 100%);
  color: #fdf6ee;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-wood-walnut) .blind-bishop-key--file.is-active {
  background:
    linear-gradient(122deg, #70492f 0%, #603f29 48%, #523623 100%);
  color: #fdf6ee;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-wood-walnut) .blind-bishop-key--rank.is-active {
  background:
    linear-gradient(118deg, #ceb38b 0%, #c3a176 46%, #b89266 100%);
  color: #1a120d;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-wood-rosewood) .blind-bishop-key--file {
  background:
    linear-gradient(120deg, #d2b293 0%, #c89f7d 44%, #bb8f6f 100%);
  color: #1c100d;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-wood-rosewood) .blind-bishop-key--rank {
  background:
    linear-gradient(125deg, #6c3940 0%, #5a3037 48%, #4a282f 100%);
  color: #fdeff0;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-wood-rosewood) .blind-bishop-key--file.is-active {
  background:
    linear-gradient(125deg, #6c3940 0%, #5a3037 48%, #4a282f 100%);
  color: #fdeff0;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-wood-rosewood) .blind-bishop-key--rank.is-active {
  background:
    linear-gradient(120deg, #d2b293 0%, #c89f7d 44%, #bb8f6f 100%);
  color: #1c100d;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-wood-ebony) .blind-bishop-key--file {
  background:
    linear-gradient(120deg, #c9c3b8 0%, #bbb3a6 50%, #ada496 100%);
  color: #161514;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-wood-ebony) .blind-bishop-key--rank {
  background:
    linear-gradient(122deg, #3e3b3a 0%, #32302f 48%, #282625 100%);
  color: #f2f0ec;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-wood-ebony) .blind-bishop-key--file.is-active {
  background:
    linear-gradient(122deg, #3e3b3a 0%, #32302f 48%, #282625 100%);
  color: #f2f0ec;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-wood-ebony) .blind-bishop-key--rank.is-active {
  background:
    linear-gradient(120deg, #c9c3b8 0%, #bbb3a6 50%, #ada496 100%);
  color: #161514;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-wood) .blind-bishop-key--file {
  background: rgba(253, 246, 232, 0.38);
  color: #1e1610;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-wood) .blind-bishop-key--rank {
  background: rgba(62, 42, 28, 0.5);
  color: #fff8f0;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-wood) .blind-bishop-key--file.is-active {
  background: rgba(62, 42, 28, 0.5);
  color: #fff8f0;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]:has(.board.board-theme-wood) .blind-bishop-key--rank.is-active {
  background: rgba(253, 246, 232, 0.38);
  color: #1e1610;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-bishop-key:hover {
  filter: brightness(1.03);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-bishop-key:active {
  transform: translateY(1px) scale(0.995);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-bishop-key.is-active {
  outline: 2px solid color-mix(in srgb, #f0cf66 70%, #fff 30%);
  outline-offset: -2px;
  box-shadow:
    0 0 0 2px color-mix(in srgb, #f0cf66 50%, transparent 50%) inset,
    0 8px 16px rgba(0, 0, 0, 0.22);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]
  .blind-bishop-key.is-mate2-from-lock:not(.is-active) {
  outline: 2px dashed color-mix(in srgb, #f0cf66 58%, transparent 42%);
  outline-offset: -2px;
  box-shadow: 0 0 0 1px color-mix(in srgb, #f0cf66 35%, transparent 65%) inset;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-mate2-dynamic-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  text-align: center;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-mate2-dynamic-lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.18rem;
  width: 100%;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-mate2-feedback-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  margin-top: calc(var(--blind-colors-rhythm, 0.65rem) * 0.55);
  padding-top: calc(var(--blind-colors-rhythm, 0.65rem) * 0.42);
  border: none;
  outline: none;
  box-shadow: none;
  background: transparent;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-mate2-heading {
  font-weight: 800;
  letter-spacing: 0.03em;
  font-size: clamp(0.95rem, 2.75vw, 1.2rem);
  color: #fcefb4;
  text-shadow:
    0 0 18px color-mix(in srgb, #f0cf66 42%, transparent),
    0 1px 2px rgba(0, 0, 0, 0.55);
  margin: 0;
  line-height: 1.15;
  width: 100%;
  text-align: center;
}

html[data-app-theme="white"][data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-mate2-heading {
  color: #8a6a10;
  text-shadow: 0 0 10px color-mix(in srgb, #f0cf66 28%, transparent);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-mate2-line-turn {
  font-weight: 750;
  font-size: clamp(0.72rem, 2vw, 0.86rem);
  color: var(--warm-ink);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-mate2-line-black {
  font-size: clamp(0.74rem, 2.05vw, 0.9rem);
  color: color-mix(in srgb, var(--warm-ink) 86%, transparent);
  line-height: 1.25;
  text-align: center;
  width: 100%;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-mate2-line-white {
  font-size: clamp(0.74rem, 2.05vw, 0.9rem);
  color: color-mix(in srgb, var(--warm-ink) 86%, transparent);
  line-height: 1.25;
  text-align: center;
  width: 100%;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-mate2-black-san {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-mate2-white-san {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* SAN с Unicode-фигурами: тот же кегль, глифы из шрифта символов (соразмерно строке). */
html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-mate2-san-figurine {
  font-family:
    "Segoe UI Symbol",
    "Noto Sans Symbols2",
    "DejaVu Sans",
    "Apple Symbols",
    system-ui,
    sans-serif;
  font-size: 1em;
  line-height: inherit;
  font-weight: inherit;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  white-space: nowrap;
  vertical-align: baseline;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-mate2-input-hint {
  font-size: clamp(0.62rem, 1.75vw, 0.76rem);
  color: color-mix(in srgb, var(--warm-ink) 78%, transparent);
  line-height: 1.28;
  margin-top: 0.06rem;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-mate2-feedback {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  box-shadow: none;
  background: transparent;
  font-weight: 900;
  font-size: clamp(1.62rem, 3.22vw, 2.19rem);
  letter-spacing: 0.03em;
  line-height: 1.12;
  text-align: center;
  width: 100%;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-mate2-feedback--ok {
  color: color-mix(in srgb, #2ecf72 88%, #000 12%);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-mate2-feedback--bad {
  color: color-mix(in srgb, #e84848 90%, #000 10%);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-mate2-coord-legend {
  font-size: clamp(0.78rem, 2vw, 0.92rem);
  opacity: 0.88;
  margin: 0.15rem 0 0.25rem;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-mate2-san-wrap {
  width: 100%;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-mate2-san-label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: clamp(0.76rem, 1.9vw, 0.9rem);
  color: color-mix(in srgb, var(--warm-ink) 90%, transparent);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-mate2-san-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.45rem 0.55rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--panel-border) 70%, #000 30%);
  font-size: clamp(0.95rem, 2.2vw, 1.05rem);
  background: color-mix(in srgb, var(--warm-card) 82%, #fff 18%);
  color: var(--warm-ink);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-mate2-static {
  /* Подъём подписи координат от низа квадрата иконки к визуальному «полу» фигуры (настройка вручную, px). */
  --blind-mate2-coord-lift: 5px;
  container-type: inline-size;
  container-name: blind-mate2-static;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Между блоком фигур, заголовком «мат в N» и терминалом: растёт слегка с шириной блока (переносы фигур). */
  gap: clamp(0.14rem, 3.2cqi, 0.48rem);
  width: 100%;
  box-sizing: border-box;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-mate2-piece-rows {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Между белыми и чёрными: компактно; перенос строк внутри ряда не требует фиксированного «резерва» снизу */
  gap: clamp(0.04rem, 0.6vmin, 0.12rem);
  row-gap: clamp(0.04rem, 0.6vmin, 0.12rem);
  width: 100%;
  box-sizing: border-box;
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]
  .blind-mate2-static
  .blind-mate2-pawns-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  /* Иначе при переносе строк align-content: stretch раздувает расстояние между линиями */
  align-content: center;
  gap: 0.08rem 0.26rem;
  width: 100%;
  max-width: 100%;
  margin: 0;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]
  .blind-mate2-piece-rows
  .blind-mate2-pawns-row--black {
  margin-top: 0;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]
  .blind-mate2-static
  .blind-mate2-pawns-row
  .blind-king-piece-badge {
  min-height: unset;
  height: auto;
  gap: 0.21rem;
  align-items: flex-end;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]
  .blind-mate2-static
  .blind-mate2-pawns-row
  .blind-king-piece-badge__img {
  width: clamp(51px, 9vw, 75px);
  height: clamp(51px, 9vw, 75px);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]
  .blind-mate2-static
  .blind-mate2-pawns-row
  .blind-king-piece-badge__coord {
  font-size: clamp(1.62rem, 3.22vw, 2.19rem);
  line-height: 1;
  transform: translateY(calc(-1 * var(--blind-mate2-coord-lift, 5px)));
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]
  .blind-mate2-static
  .blind-mate2-pawns-row
  button.blind-king-piece-badge.blind-mate2-cond-piece {
  margin: 0;
  padding: 0;
  border: none;
  font: inherit;
  color: inherit;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]
  .blind-mate2-static
  .blind-mate2-pawns-row
  button.blind-king-piece-badge.blind-mate2-cond-piece:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-warm, #c58b2e) 85%, #fff 15%);
  outline-offset: 3px;
}

.blind-mate2-move-popover {
  z-index: 12050;
  box-sizing: border-box;
  min-width: 7.5rem;
  /* Ширину подстраивает JS под .board-wrap; запасной вариант — как у доски */
  width: min(var(--board-px), calc(100vw - 16px));
  max-width: calc(100vw - 16px);
  padding: 0.35rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--panel-border, #444) 72%, #000 28%);
  background: color-mix(in srgb, var(--warm-card, #2e2a26) 94%, #111 6%);
  box-shadow:
    0 12px 36px color-mix(in srgb, #000 55%, transparent),
    0 0 0 1px color-mix(in srgb, #fff 6%, transparent);
}

.blind-mate2-move-popover--has-grid {
  padding: 0.5rem 0.52rem;
}

.blind-mate2-move-popover__grid {
  display: grid;
  gap: 0.3rem 0.34rem;
  align-content: start;
  justify-content: stretch;
  width: 100%;
  /* до ~6 рядов крупных кнопок, дальше прокрутка */
  max-height: min(48vh, calc(6 * (2.72rem + 0.3rem) + 0.15rem));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.blind-mate2-move-popover__btn--san {
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
  letter-spacing: 0.03em;
}

.blind-mate2-move-popover__btn {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0.52rem 0.42rem;
  border: none;
  border-radius: 10px;
  font-size: clamp(1rem, 2.75vw, 1.18rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  color: var(--warm-ink, #ece8e4);
  background: color-mix(in srgb, var(--warm-card, #2e2a26) 88%, #fff 12%);
}

.blind-mate2-move-popover__btn:hover {
  background: color-mix(in srgb, var(--warm-card, #2e2a26) 76%, #fff 24%);
}

.blind-mate2-move-popover__empty {
  padding: 0.5rem 0.45rem;
  font-size: clamp(0.82rem, 2vw, 0.92rem);
  color: color-mix(in srgb, var(--warm-ink, #ece8e4) 72%, transparent);
}

.blind-mate2-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: stretch;
  width: 100%;
}

.blind-mate2-actions-row .btn {
  flex: 1 1 auto;
  min-width: min(100%, 6.5rem);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-mate2-dynamic {
  margin: 0;
  width: 100%;
  align-self: stretch;
  text-align: left;
}

/* Вердикт — текстом в промпте; без цветной обводки всей панели. */
html[data-fbc-page="blind"][data-blind-mode="colors-only"] .board-panel.blind-mate2-solved,
html[data-fbc-page="blind"][data-blind-mode="colors-only"] .board-panel.blind-mate2-failed {
  box-shadow: none;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-king-sprint-buttons {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--blind-colors-rhythm, 0.65rem) * 0.45);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-buttons.blind-memory-buttons {
  grid-template-columns: 1fr;
  gap: calc(var(--blind-colors-rhythm, 0.65rem) * 0.55);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"] {
  --blind-memory-piece-sz: clamp(26px, min(12vmin, 11vw), 52px);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-buttons.blind-memory-buttons .blind-memory-palette {
  display: flex;
  flex-direction: column;
  gap: calc(var(--blind-colors-rhythm, 0.65rem) * 0.32);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-buttons.blind-memory-buttons .blind-memory-palette-side {
  display: flex;
  flex-direction: column;
  gap: calc(var(--blind-colors-rhythm, 0.65rem) * 0.22);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]
  .blind-colors-buttons.blind-memory-buttons
  .blind-memory-palette-side
  .blind-memory-palette-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: calc(var(--blind-colors-rhythm, 0.65rem) * 0.3);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-buttons.blind-memory-buttons .blind-memory-piece-btn {
  min-height: auto;
  min-width: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-buttons.blind-memory-buttons .blind-memory-piece-btn.is-active {
  box-shadow:
    0 0 0 2px color-mix(in srgb, #f0cf66 52%, transparent),
    0 0 14px color-mix(in srgb, #f0cf66 44%, transparent);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-buttons.blind-memory-buttons .blind-memory-piece {
  width: var(--blind-memory-piece-sz, clamp(42px, 7vw, 58px));
  height: var(--blind-memory-piece-sz, clamp(42px, 7vw, 58px));
  max-width: none;
  object-fit: contain;
}

/* «Запомни позицию»: строка таймера аркады не показывается — узел остаётся в DOM для логики. */
html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-memory-hidden-timer-host {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-memory-land-footer-bar {
  display: none !important;
}

/* Панель действий: в широком ландшафте и в компактной «вертикалке» (см. @media ниже). */
html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-memory-land-toolbar {
  display: none !important;
}

/*
 * «Запомни позицию», компактная колонка (портрет / узкий ландшафт): кнопки «Старт / Готово / Настройки»
 * под блоком доски вместо дублирования подсказок в .blind-colors-status; палитра плотнее и по центру.
 */
@media (max-width: 1020px) and (orientation: portrait), (orientation: landscape) and (max-width: 700px) {
  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"] .blind-memory-land-footer-bar {
    display: block !important;
    width: 100%;
    max-width: 100%;
    margin-top: clamp(0.35rem, 1.2vmin, 0.65rem);
    padding-inline: clamp(0.15rem, 1.2vmin, 0.45rem);
    box-sizing: border-box;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"] .blind-memory-land-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(6px, 1.2vmin, 12px);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-inline: 0;
    padding-inline: 0;
    box-sizing: border-box;
    position: relative;
    z-index: 8;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"] .blind-colors-status:not(.error):not(.success) {
    display: none !important;
    min-height: 0 !important;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"] .blind-memory-ready-btn {
    display: none !important;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"]
    .blind-colors-buttons.blind-memory-buttons
    .blind-memory-palette {
    align-items: center;
    width: 100%;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"]
    .blind-colors-buttons.blind-memory-buttons
    .blind-memory-palette-side {
    align-items: center;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    gap: calc(var(--blind-colors-rhythm, 0.65rem) * 0.12);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"]
    .blind-colors-buttons.blind-memory-buttons
    .blind-memory-palette-side
    .blind-memory-palette-row {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    grid-template-columns: repeat(6, auto);
    gap: clamp(2px, 0.9vmin, 6px);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"]
    .blind-colors-buttons.blind-memory-buttons
    .blind-memory-piece-btn {
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"]
    .blind-colors-buttons.blind-memory-buttons
    .blind-memory-piece {
    width: min(var(--blind-memory-piece-sz, 44px), 11.5vmin);
    height: min(var(--blind-memory-piece-sz, 44px), 11.5vmin);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"] .blind-memory-land-btn {
    min-height: clamp(38px, 11vmin, 52px);
    font-size: clamp(0.72rem, 3.2vmin, 0.92rem);
    font-weight: 700;
    white-space: pre-line;
    text-align: center;
    justify-content: center;
    box-shadow: none;
    filter: none;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"] .blind-memory-land-settings-popover {
    grid-column: 1 / -1;
    justify-self: stretch;
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 8px);
    min-width: 0;
    max-width: 100%;
    padding: clamp(0.45rem, 1.5vmin, 0.65rem) clamp(0.5rem, 1.8vmin, 0.75rem);
    box-sizing: border-box;
    z-index: 30;
    flex-direction: column;
    gap: 0.45rem;
    background: color-mix(in srgb, var(--warm-card, #2e2a26) 92%, #000 8%);
    color: var(--warm-ink, #ece8e4);
    border: none;
    border-radius: 10px;
    box-shadow: none;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"]
    .blind-memory-land-settings-popover.is-open {
    display: flex;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"] .blind-memory-land-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    min-width: 0;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"] .blind-memory-land-settings-label {
    font-size: clamp(0.62rem, 2.8vmin, 0.82rem);
    color: color-mix(in srgb, var(--warm-ink, #ece8e4) 82%, transparent);
    flex: 0 0 auto;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"] .blind-memory-land-settings-select {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 9.5rem;
    margin: 0;
    padding: 0.28rem 0.42rem;
    font-size: clamp(0.58rem, 2.6vmin, 0.8rem);
    font-weight: 600;
    color: var(--warm-ink, #ece8e4);
    background: color-mix(in srgb, var(--warm-card, #2e2a26) 55%, #1a1816 45%);
    border: none;
    border-radius: 6px;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"] .blind-memory-land-settings-apply {
    width: 100%;
    margin-top: 0.15rem;
  }
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-king-sprint-key {
  min-height: clamp(40px, 7.4vw, 58px);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]
  .blind-king-sprint-buttons
  .blind-king-sprint-key {
  background: var(--blind-colors-btn-dark, color-mix(in srgb, var(--warm-card) 34%, #1e1a18 66%));
  color: #f4f4f4;
  border-color: color-mix(in srgb, var(--blind-colors-btn-dark, #3a322c) 55%, #000 45%);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-king-levels {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--blind-colors-rhythm, 0.65rem) * 0.42);
  margin-top: calc(var(--blind-colors-rhythm, 0.65rem) * 0.25);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-king-level-key {
  min-height: clamp(30px, 5.2vw, 42px);
  font-size: clamp(0.74rem, 1.35vw, 0.94rem);
  letter-spacing: 0.01em;
  text-transform: none;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-king-level-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: clamp(0.72rem, 1.12vw, 0.92rem);
  color: color-mix(in srgb, var(--warm-ink) 84%, #9db2c0 16%);
  margin-top: calc(var(--blind-colors-rhythm, 0.65rem) * 0.32);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-king-level-toggle input {
  width: 1rem;
  height: 1rem;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-king-meta-line {
  display: block;
  font-size: clamp(0.78rem, 1.25vw, 1.06rem);
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--warm-ink) 74%, #9db2c0 26%);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-king-pieces-stack {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--blind-colors-rhythm, 0.65rem) * 0.28);
  min-height: 0;
  align-content: center;
  margin-top: calc(var(--blind-colors-rhythm, 0.65rem) * -0.56);
  margin-bottom: calc(var(--blind-colors-rhythm, 0.65rem) * 0.18);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="king"]
  .blind-king-piece-top
  .blind-king-piece-badge,
html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="king"]
  .blind-king-pawns-row
  .blind-king-piece-badge {
  gap: 0.12rem;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-king-piece-top {
  display: flex;
  justify-content: center;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-king-pawns-row {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--blind-colors-rhythm, 0.65rem) * 0.18);
  max-width: 100%;
  margin: 0 auto;
}

/* Спринт короля: ряд пешек компактный по ширине, не на всю колонку. */
html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="king"] .blind-king-pawns-row {
  width: fit-content;
  max-width: 100%;
  grid-template-columns: repeat(4, auto);
  column-gap: clamp(0.06rem, 1.1cqw, 0.2rem);
  row-gap: clamp(0.04rem, 0.9cqw, 0.16rem);
  justify-self: center;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-king-pawns-row .blind-king-piece-badge {
  min-height: 0;
  gap: 0.21rem;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-king-pawns-row .blind-king-piece-badge__img {
  width: clamp(36px, 7.2vw, 58px);
  height: clamp(36px, 7.2vw, 58px);
}

/* Белый король в условии — в 1.8 раза крупнее пешек и своей координаты относительно пешечной. */
html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-king-piece-top .blind-king-piece-badge__img {
  width: calc(1.8 * clamp(36px, 7.2vw, 58px));
  height: calc(1.8 * clamp(36px, 7.2vw, 58px));
  object-fit: contain;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-king-pawns-row .blind-king-piece-badge__coord {
  font-size: clamp(1.05rem, 2.85vw, 1.72rem);
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.01em;
  color: var(--warm-ink);
  transform: translateY(-0.12em);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-king-piece-top .blind-king-piece-badge__coord {
  font-size: calc(1.8 * clamp(1.05rem, 2.85vw, 1.72rem));
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.01em;
  color: var(--warm-ink);
  transform: translateY(-0.12em);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-king-piece-badge {
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.42rem;
  padding: 0;
}

/* Прочие вставки бейджа короля — базовый размер как у пешки в стеке (верх стека задаёт ×1.8 отдельно). */
html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-king-piece-badge__img {
  width: clamp(36px, 7.2vw, 58px);
  height: clamp(36px, 7.2vw, 58px);
  object-fit: contain;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-king-piece-badge__coord {
  font-size: clamp(1.05rem, 2.85vw, 1.72rem);
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.01em;
  color: var(--warm-ink);
  transform: translateY(-0.12em);
}

/*
 * Спринт короля: фигуры и подписи — от ширины колонки (.blind-colors-stage), а не от vw,
 * чтобы при смене ориентации и ресайзе масштаб шёл вместе с блоком.
 */
@container blind-colors-stage (min-width: 1px) {
  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="king"] .blind-king-pieces-stack {
    --blind-king-sprint-pawn: min(42px, 8.5cqw);
    align-content: center;
    gap: clamp(0.03rem, 0.85cqw, 0.32rem);
    margin-top: calc(var(--blind-colors-rhythm, 0.65rem) * -0.28);
    margin-bottom: calc(var(--blind-colors-rhythm, 0.65rem) * 0.08);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="king"] .blind-king-pawns-row {
    column-gap: clamp(0.05rem, 0.95cqw, 0.22rem);
    row-gap: clamp(0.03rem, 0.75cqw, 0.16rem);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="king"]
    .blind-king-pawns-row
    .blind-king-piece-badge__img {
    width: var(--blind-king-sprint-pawn);
    height: var(--blind-king-sprint-pawn);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="king"]
    .blind-king-piece-top
    .blind-king-piece-badge__img {
    width: calc(var(--blind-king-sprint-pawn) * 1.8);
    height: calc(var(--blind-king-sprint-pawn) * 1.8);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="king"]
    .blind-king-pawns-row
    .blind-king-piece-badge__coord {
    font-size: clamp(0.52rem, 3.15cqw, 1.22rem);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="king"]
    .blind-king-piece-top
    .blind-king-piece-badge__coord {
    font-size: calc(1.8 * clamp(0.52rem, 3.15cqw, 1.22rem));
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="king"] .blind-king-meta-line {
    font-size: clamp(0.68rem, 3.1cqw, 1.05rem);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="king"] .blind-king-level-key {
    min-height: clamp(22px, 8cqw, 42px);
    font-size: clamp(0.62rem, 2.85cqw, 0.94rem);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="king"] .blind-king-level-toggle {
    font-size: clamp(0.62rem, 2.5cqw, 0.92rem);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="king"]
    .blind-colors-target--knight-question {
    gap: 0;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="king"]
    .blind-colors-target--knight-question
    .blind-knight-question-line {
    font-size: clamp(0.62rem, 2.65cqw, 1.12rem);
    line-height: 1.28;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="king"]
    .blind-colors-target--knight-question
    .blind-knight-coords-line {
    font-size: clamp(1.05rem, 7.8cqw, 3.2rem);
    line-height: 1.05;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="king"] .blind-colors-inline-score {
    font-size: clamp(0.74rem, 3.9cqw, 1rem);
    line-height: 1.28;
  }
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-trainer-subhead {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.4rem 0 calc(0.4rem + 2px);
  margin: 0;
  border-top: none;
  border-bottom: none;
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: left bottom;
  /*
   * Портрет / узкий горизонт: размыв с ~¼ ширины, шире прозрачное «окно», переходы контрастнее.
   */
  background-image: linear-gradient(
    90deg,
    var(--fbc-blind-subhead-line) 0%,
    var(--fbc-blind-subhead-line) 24%,
    color-mix(in srgb, var(--fbc-blind-subhead-line) 58%, transparent) 26%,
    color-mix(in srgb, var(--fbc-blind-subhead-line) 14%, transparent) 29.5%,
    transparent 34.5%,
    transparent 65.5%,
    color-mix(in srgb, var(--fbc-blind-subhead-line) 14%, transparent) 70.5%,
    color-mix(in srgb, var(--fbc-blind-subhead-line) 58%, transparent) 74%,
    var(--fbc-blind-subhead-line) 76%,
    var(--fbc-blind-subhead-line) 100%
  );
}

/*
 * Слот под сайт-шапкой: только строка режима в потоке — высота не растёт от блока диаграммы,
 * доска не уезжает вниз; диаграмма абсолютно под жёлтой линией (поверх верха контента).
 */
html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-page-head-slot {
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  /*
   * Край строки режима = как у бренда относительно .app-content-stack (JS: --fbc-blind-head-pad-l).
   * Не смешивать с env(safe-area-inset-*): боковые inset уже задаёт .app-frame — иначе в ландшафте
   * на телефоне max(safe-area, pad) дублировал safe-area слева, а padding-right — справа.
   */
  padding-left: var(--fbc-blind-head-pad-l, 0.65rem);
  padding-right: 0;
}

/* Под шапкой: полная ширина, нижняя линия как у .blind-trainer-head; в потоке задаёт только эту высоту. */
html[data-fbc-page="blind"][data-blind-mode="colors-only"]
  .page-body
  > .blind-colors-page-head-slot
  > .blind-colors-trainer-subhead {
  max-width: 100%;
  margin: 0;
  padding: 0.32rem 0 calc(0.32rem + 2px);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]
  .blind-colors-page-head-slot
  > .blind-arcade-stats-strip {
  position: absolute;
  left: 0;
  top: calc(100% + 1lh);
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  min-width: 0;
  /* Выше .board-panel (z≈20) в ландшафте, чтобы полоски были видны поверх верха доски */
  z-index: 25;
  pointer-events: none;
}

/* Портрет: статистика под кнопками, по центру колонки */
@media (orientation: portrait) {
  html[data-fbc-page="blind"][data-blind-mode="colors-only"]
    .blind-colors-left-square
    > .blind-arcade-stats-strip {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 100%;
    margin: 0.28rem 0 0;
    padding-left: max(env(safe-area-inset-left, 0px), var(--fbc-blind-head-pad-l, 0px));
    padding-right: max(0px, env(safe-area-inset-right, 0px));
    z-index: 1;
    pointer-events: none;
    box-sizing: border-box;
    min-width: 0;
  }

  /* Только подпись «Статистика» по центру; сами полоски — как в общих правилах .blind-colors-bars-wrap */
  html[data-fbc-page="blind"][data-blind-mode="colors-only"]
    .blind-colors-left-square
    > .blind-arcade-stats-strip
    .blind-arcade-stats-strip__title {
    text-align: center;
    width: 100%;
    box-sizing: border-box;
  }
}

/* Слепые задачи на мат: весь блок условий+текста по центру квадрата доски (герой и колонка DKK). */
html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
  .blind-colors-board-prompt-host:has(.blind-mate2-prompt-root) {
  align-items: center;
  justify-content: center;
  padding-left: clamp(0.28rem, 2vmin, 0.48rem);
  padding-right: clamp(0.28rem, 2vmin, 0.48rem);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
  .blind-colors-board-prompt-host
  .blind-colors-target.blind-mate2-prompt-root,
html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
  .blind-colors-dkk-bottom
  .blind-colors-target.blind-mate2-prompt-root {
  /* width:auto + align-items:center на колонке сжимали блок до min-content — каждое слово с новой строки */
  align-items: stretch;
  text-align: center;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .blind-mate2-static {
  align-items: stretch;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .blind-mate2-piece-rows {
  align-items: stretch;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
  .blind-mate2-static
  .blind-mate2-pawns-row {
  justify-content: center;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .blind-mate2-dynamic-inner {
  align-items: stretch;
  text-align: center;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .blind-mate2-dynamic-lines {
  align-items: stretch;
  text-align: center;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .blind-mate2-heading {
  text-align: center;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .blind-mate2-dynamic {
  text-align: center;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-arcade-stats-strip__title {
  margin: 0 0 0.4rem;
  padding: 0;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.25;
  color: var(--warm-muted);
}

/* Строка режима: компактный UI-шрифт сайта, название слева / «Назад» справа по краям блока */
html[data-fbc-page="blind"][data-blind-mode="colors-only"]
  .blind-colors-trainer-subhead
  .blind-colors-trainer-subhead__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding-right: 0.35rem;
  box-sizing: border-box;
  text-align: left;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--warm-ink);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]
  .blind-colors-trainer-subhead
  .blind-colors-trainer-subhead__back {
  flex: 0 0 auto;
  align-self: center;
  margin: 0;
  text-align: right;
  white-space: nowrap;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: color-mix(in srgb, var(--warm-ink) 88%, var(--warm-muted) 12%);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-arcade-controls {
  display: none;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-arcade-timer-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2rem;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-arcade-timer-wrap.is-hidden {
  display: none;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-arcade-timer {
  min-width: 2.5ch;
  text-align: center;
  font-size: var(--blind-colors-arcade-seconds-fz);
  font-weight: 900;
  color: var(--warm-ink);
  font-variant-numeric: tabular-nums;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-arcade-timer.is-low {
  color: #e65f5f;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-arcade-timer.is-countdown,
html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-arcade-timer.is-go {
  color: #f0b95a;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-arcade-bonus {
  font-size: clamp(1.2rem, 3.8vw, 2rem);
  font-weight: 900;
  color: #f3d58a;
  opacity: 0;
  transform: translateY(0) scale(0.86);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-arcade-bonus.is-pop {
  animation: blind-colors-bonus-pop 1450ms cubic-bezier(0.22, 0.72, 0.2, 1);
}

@keyframes blind-colors-bonus-pop {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.86);
  }
  18% {
    opacity: 1;
    transform: translate(0, 8px) scale(1.15);
  }
  55% {
    opacity: 1;
    transform: translate(0, 38px) scale(1.24);
  }
  100% {
    opacity: 0;
    transform: translate(0, 92px) scale(1.38);
  }
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-answer {
  border: 1px solid color-mix(in srgb, var(--panel-border) 70%, #000 30%);
  border-radius: 14px;
  min-height: clamp(86px, 20vw, 158px);
  font-size: clamp(1.2rem, 3.1vw, 1.85rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: none;
  transition: transform 120ms ease, filter 120ms ease;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-answer--light {
  background: var(--blind-colors-btn-light, color-mix(in srgb, var(--warm-card) 88%, #fff 12%));
  color: #111;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-answer--dark {
  background: var(--blind-colors-btn-dark, color-mix(in srgb, var(--warm-card) 34%, #1e1a18 66%));
  color: #f4f4f4;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-answer:hover {
  filter: brightness(1.03);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-answer:active {
  transform: translateY(1px) scale(0.995);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-board-slot-right {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  pointer-events: none;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-toggle {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--blind-colors-rhythm, 0.65rem);
  color: var(--warm-muted);
  font-size: 0.86rem;
  user-select: none;
  cursor: pointer;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-toggle__input {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-toggle:focus-within .blind-colors-toggle__track {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--blind-colors-btn-light, #c9c0b0) 55%, transparent);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-toggle__track {
  position: relative;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 1.5rem;
  border-radius: 999px;
  background: color-mix(
    in srgb,
    var(--blind-colors-btn-dark, #6b5d52) 42%,
    color-mix(in srgb, var(--blind-colors-btn-light, #e8e0d5) 28%, var(--warm-card, #1a1714) 72%) 58%
  );
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
  transition: background 0.2s ease, box-shadow 0.15s ease;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-toggle__input:checked + .blind-colors-toggle__track {
  background: color-mix(in srgb, var(--blind-colors-btn-light, #e8e0d5) 92%, var(--blind-colors-btn-dark, #6b5d52) 8%);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-toggle__thumb {
  position: absolute;
  top: 50%;
  left: 0.14rem;
  width: 1.2rem;
  height: 1.2rem;
  margin-top: -0.6rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--blind-colors-btn-light, #f3ece4) 78%, #fff 22%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
  transition: transform 0.22s ease, background 0.2s ease;
  transform: translateX(0);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"]
  .blind-colors-toggle__input:checked
  + .blind-colors-toggle__track
  .blind-colors-toggle__thumb {
  transform: translateX(1.22rem);
  background: color-mix(in srgb, var(--blind-colors-btn-dark, #4a413a) 88%, #fff 12%);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-toggle__text {
  line-height: 1.2;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .board-wrap {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  --frame-pad: 0;
  padding: 0;
  /* Тема (lichess-gray и др.) задаёт рамку/градиент у .board-wrap — без сброса на планшете остаётся «полоска» под доской. */
  border: none;
  box-shadow: none;
  background: transparent;
  --frame-bg: transparent;
  --frame-border: transparent;
  border-radius: var(--fbc-blind-board-clip-radius, var(--board-corner-radius));
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 130ms ease;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .board-panel.blind-colors-stage--show-board .board-wrap {
  opacity: 1;
  max-height: 100%;
  overflow: hidden;
  pointer-events: auto;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .board-panel.blind-colors-stage--show-board .board.board--blind-colors {
  pointer-events: auto;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .board-stack {
  width: 100% !important;
  max-width: 100%;
}

/* Герой доски и обёртки доски — по ширине колонки (как кнопки), без жёсткого max-width */
html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-board-hero,
html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-board-hero > .board-wrap,
html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-board-hero .board-stack {
  max-width: 100%;
}

@media (orientation: landscape) and (min-width: 701px) {
  /*
   * Горизонт colors-only при ширине ≥701px: один «браузерный» режим (4 колонки + сдвиг доски).
   * В ландшафте при ≤700px — колонка как в портрете (см. общий блок у портрета / узкого ландшафта).
   */
  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .layout {
    /* mate2: доп. вычитание из высотного бюджета доски — полоска кнопок под стадией (иначе --blind-land-board-size завышен и низ поля обрезается). */
    --blind-mate2-footer-land-reserve: 0px;
    /* Резерв под полоску таймера/аркады под квадратом доски (−1.5× по высоте для большей доски). */
    --blind-land-scale-h: calc(clamp(2.55rem, 7.2vmin, 3.25rem) / 1.5);
    /* Подъём до строки режима (плавнее по vmin/vw); точную щель добивает JS --fbc-blind-board-margin-top-delta. */
    --blind-land-subhead-overlap: clamp(2.35rem, min(7.4vmin, 5.2vw), 2.82rem);
    /* Минимум снизу: safe-area; общий padding .app-frame остаётся, здесь не дублируем лишний зазор */
    --blind-land-app-frame-bottom: max(0px, env(safe-area-inset-bottom, 0px));
    /* Диаграмма аркады вынесена влево (translateX); отдельный «барьер» в формуле ширины не нужен — давал смещение визуального центра. */
    --blind-land-bars-x: 0px;
    /* Под квадратом: только высота шкалы; зазор до низа экрана ужат — компенсируем отступом шкала↔кнопки */
    --blind-land-below-board: var(--blind-land-scale-h);
    /* Правая колонка тренажёра — одно имя для сетки и отступов (единая формула на всю горизонтальную ветку ≥701). */
    --blind-land-trainer-col: clamp(12rem, 13vw, 19rem);
    /* Ширина вьюпорта (не 100cqi на самом .layout — иначе cqi часто резолвится от чужого контейнера и сжимает всю математику). */
    --blind-land-inline-size: calc(
      100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)
    );
    /* Зазор «низ .site-header → верх колонки доски» — фикс. 5px; JS (--fbc-blind-board-margin-top-delta) подгоняет визуально. */
    --blind-land-gap-under-menu: 5px;
    --blind-land-gap-board-to-diagram: 3px;
    --blind-land-gap-diagram-bottom: 4px;
    --blind-land-board-vertical-margin: calc(
      var(--blind-land-gap-under-menu) + var(--blind-land-gap-board-to-diagram) +
        var(--blind-land-gap-diagram-bottom)
    );
    --blind-land-board-horizontal-margin: 5px;
    /* Квадрат доски: min(доступная ширина под колонку, бюджет по высоте); от него же — шкала и кегль (не наоборот от схлопнутого fit-content). */
    --blind-land-board-size: max(
      220px,
      min(
        calc(
          var(--blind-land-inline-size) - var(--blind-land-trainer-col) - 1.25rem -
            var(--blind-land-board-horizontal-margin)
        ),
        calc(
          100dvh - var(--landscape-header-offset) - env(safe-area-inset-top, 0px) -
            var(--browser-landscape-bottom-gap) - var(--blind-land-app-frame-bottom) -
            var(--blind-land-below-board) - var(--blind-land-board-vertical-margin) -
            var(--blind-mate2-footer-land-reserve, 0px)
        ),
        calc(96vmin - var(--blind-land-board-vertical-margin) - var(--blind-mate2-footer-land-reserve, 0px))
      )
    );
    /*
     * Ширина «полки» между центральной колонкой доски и правым блоком тренажёра (примерно правый minmax(0,1fr) в сетке).
     * Диаграмма аркады визуально слева от доски, но по ширине совпадает с этой свободной зоной справа от доски.
     */
    --blind-land-diagram-slot-w: clamp(
      5.25rem,
      calc(
        (var(--blind-land-inline-size) - var(--blind-land-board-size) - var(--blind-land-trainer-col)) / 2 -
          clamp(5px, 1vmin, 12px)
      ),
      min(28rem, 46vw)
    );
    --blind-land-ui-scale: clamp(0.72, calc(var(--blind-land-board-size) / 560), 1);
    --blind-land-timer-h: calc(
      clamp(1.65rem, calc(var(--blind-land-board-size) * 0.115), 2.9rem) / 1.5
    );
    --blind-land-timer-r: calc(clamp(6px, calc(var(--blind-land-board-size) * 0.028), 11px) / 1.5);
    --blind-land-timer-cell-w: calc(
      clamp(2.55rem, calc(var(--blind-land-board-size) * 0.24), 4.8rem) / 1.5
    );
    /* 1fr | auto | 1fr | панель — центр доски совпадает с полосой под меню. */
    grid-template-columns:
      minmax(0, 1fr)
      auto
      minmax(0, 1fr)
      var(--blind-land-trainer-col);
    column-gap: 0;
    row-gap: 0;
    justify-content: stretch;
    justify-items: stretch;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .layout {
    /*
     * Высота полосы кнопок + шов 10px до доски. НЕ включаем --blind-mate2-gap-stack-to-viewport (6px до низа окна):
     * он уже учтён в bottom футера и padding-bottom .board-panel — дублирование съедало бы высоту квадрата.
     */
    --blind-mate2-footer-land-reserve: calc(
      var(--blind-mate2-gap-board-to-actions) + clamp(2.28rem, 8.2vmin, 3.38rem)
    );
    /* В mate2 нет строки шкалы под доской — не резервировать высоту «как у координат». */
    --blind-land-below-board: 0px;
    /*
     * Крупнее квадрат доски: у координат в --blind-land-board-vertical-margin заложены зазоры под диаграмму (3+4px),
     * для mate2 они лишние — высотный бюджет растёт, сторона min(ширина, высота) подтягивается к ширине колонки.
     * Горизонтально: вместо 1.25rem+5px — один clamp; третий член 100vmin вместо 96vmin.
     */
    --blind-land-board-vertical-margin: var(--blind-land-gap-under-menu);
    --blind-land-board-size: max(
      220px,
      min(
        calc(
          var(--blind-land-inline-size) - var(--blind-land-trainer-col) -
            clamp(8px, 1.25vmin, 18px)
        ),
        calc(
          100dvh - var(--landscape-header-offset) - env(safe-area-inset-top, 0px) -
            var(--browser-landscape-bottom-gap) - var(--blind-land-app-frame-bottom) -
            var(--blind-land-below-board) - var(--blind-land-board-vertical-margin) -
            var(--blind-mate2-footer-land-reserve, 0px)
        ),
        calc(
          100vmin - var(--blind-land-board-vertical-margin) - var(--blind-mate2-footer-land-reserve, 0px)
        )
      )
    );
  }

  /* Запомни позицию: как mate2 — доска от шапки, кнопки в футере панели; зазор под шапкой 6px. */
  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"] .layout {
    --blind-memory-piece-sz: calc(var(--blind-land-board-size) / 8 * 0.92);
    --blind-land-below-board: 0px;
    --blind-land-gap-under-menu: 6px;
    --blind-memory-gap-board-to-toolbar: clamp(6px, 1.2vmin, 10px);
    --blind-memory-footer-land-reserve: calc(
      var(--blind-memory-gap-board-to-toolbar) + clamp(2.15rem, 7.8vmin, 3.15rem)
    );
    --blind-land-board-vertical-margin: var(--blind-land-gap-under-menu);
    --blind-land-board-size: max(
      220px,
      min(
        calc(
          var(--blind-land-inline-size) - var(--blind-land-trainer-col) -
            clamp(8px, 1.25vmin, 18px)
        ),
        calc(
          100dvh - var(--landscape-header-offset) - env(safe-area-inset-top, 0px) -
            var(--browser-landscape-bottom-gap) - var(--blind-land-app-frame-bottom) -
            var(--blind-land-below-board) - var(--blind-land-board-vertical-margin) -
            var(--blind-memory-footer-land-reserve, 0px)
        ),
        calc(
          100vmin - var(--blind-land-board-vertical-margin) -
            var(--blind-memory-footer-land-reserve, 0px)
        )
      )
    );
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"] .board-panel {
    justify-content: flex-start;
    gap: var(--blind-memory-gap-board-to-toolbar);
    padding-bottom: max(0px, env(safe-area-inset-bottom, 0px));
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"]
    .board-panel
    > .blind-colors-stage {
    justify-content: flex-start;
    gap: 0;
    flex: 0 0 auto;
    flex-grow: 0;
    flex-shrink: 0;
    min-height: 0;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"] .blind-colors-squares-row {
    flex: 0 0 auto;
    flex-grow: 0;
    flex-shrink: 0;
    min-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    height: var(--blind-land-board-size);
    max-height: var(--blind-land-board-size);
    width: 100%;
    aspect-ratio: auto;
    grid-template-rows: minmax(0, auto);
    align-self: stretch;
    place-items: center;
    container-type: size;
    container-name: blind-memory-squares;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"] .blind-memory-land-footer-bar {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: 6;
    align-self: stretch;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    flex: 0 0 auto;
    display: block !important;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"]
    .blind-memory-land-footer-bar
    .blind-memory-land-toolbar {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-inline: 0;
    padding-inline: 0;
    box-sizing: border-box;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"] .blind-colors-left-square {
    visibility: hidden;
    pointer-events: none;
    place-self: start center;
    width: min(100%, 100cqw, 100cqh);
    height: min(100%, 100cqw, 100cqh);
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"] .blind-colors-board-square {
    place-self: start center;
    width: min(100%, 100cqw, 100cqh);
    height: min(100%, 100cqw, 100cqh);
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    pointer-events: auto;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"] .app-frame {
    padding-bottom: max(0px, env(safe-area-inset-bottom, 0px));
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"] .blind-memory-land-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(6px, 1.2vmin, 12px);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 8;
    margin-top: 0;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"] .blind-memory-land-btn {
    min-height: clamp(38px, calc(var(--blind-land-board-size) * 0.12), 52px);
    font-size: clamp(0.62rem, calc(var(--blind-land-board-size) * 0.028), 0.92rem);
    font-weight: 700;
    white-space: pre-line;
    text-align: center;
    justify-content: center;
    box-shadow: none;
    filter: none;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"]
    .blind-memory-land-btn--primary {
    border-radius: clamp(8px, calc(var(--blind-land-board-size) * 0.018), 12px);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"]
    .blind-memory-land-btn--settings {
    border-radius: clamp(8px, calc(var(--blind-land-board-size) * 0.018), 12px);
    font-weight: 600;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"] .blind-memory-land-settings-popover {
    display: none;
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    min-width: min(100%, 12.5rem);
    max-width: min(100%, 16rem);
    padding: clamp(0.45rem, 1.5vmin, 0.65rem) clamp(0.5rem, 1.8vmin, 0.75rem);
    box-sizing: border-box;
    z-index: 30;
    flex-direction: column;
    gap: 0.45rem;
    background: color-mix(in srgb, var(--warm-card, #2e2a26) 92%, #000 8%);
    color: var(--warm-ink, #ece8e4);
    border: none;
    border-radius: 10px;
    box-shadow: none;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"]
    .blind-memory-land-settings-popover.is-open {
    display: flex;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"] .blind-memory-land-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    min-width: 0;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"] .blind-memory-land-settings-label {
    font-size: clamp(0.58rem, calc(var(--blind-land-board-size) * 0.024), 0.78rem);
    color: color-mix(in srgb, var(--warm-ink, #ece8e4) 82%, transparent);
    flex: 0 0 auto;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"] .blind-memory-land-settings-select {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 9.5rem;
    margin: 0;
    padding: 0.28rem 0.42rem;
    font-size: clamp(0.58rem, calc(var(--blind-land-board-size) * 0.024), 0.8rem);
    font-weight: 600;
    color: var(--warm-ink, #ece8e4);
    background: color-mix(in srgb, var(--warm-card, #2e2a26) 55%, #1a1816 45%);
    border: none;
    border-radius: 8px;
    box-shadow: none;
    outline: none;
    cursor: pointer;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"]
    .blind-memory-land-settings-select:focus-visible {
    outline: 2px solid color-mix(in srgb, #f0cf66 65%, transparent);
    outline-offset: 1px;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"] .blind-memory-land-settings-apply {
    align-self: stretch;
    margin-top: 0.15rem;
    min-height: clamp(30px, calc(var(--blind-land-board-size) * 0.095), 40px);
    font-size: clamp(0.58rem, calc(var(--blind-land-board-size) * 0.024), 0.78rem);
    box-shadow: none;
    filter: none;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"] .blind-memory-land-flank {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(4px, 1vmin, 12px);
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"] .blind-memory-land-board-mid {
    position: relative;
    flex: 0 0 auto;
    width: min(100%, var(--blind-land-board-size));
    height: min(100%, var(--blind-land-board-size));
    max-width: min(100%, var(--blind-land-board-size));
    max-height: min(100%, var(--blind-land-board-size));
    aspect-ratio: 1 / 1;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"] .blind-memory-palette-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 0;
    gap: clamp(3px, 0.85vmin, 8px);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"]
    .blind-memory-palette-side
    .blind-memory-palette-row {
    display: flex;
    flex-direction: column;
    gap: clamp(2px, 0.55vmin, 6px);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"] .blind-memory-piece-btn {
    min-height: var(--blind-memory-piece-sz);
    min-width: var(--blind-memory-piece-sz);
    width: var(--blind-memory-piece-sz);
    height: var(--blind-memory-piece-sz);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"] .blind-memory-piece-btn.is-active {
    box-shadow:
      0 0 0 2px color-mix(in srgb, #f0cf66 50%, transparent),
      0 0 16px color-mix(in srgb, #f0cf66 42%, transparent);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"] .blind-memory-piece {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"] .blind-memory-ready-btn {
    display: none !important;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="memory"] .blind-colors-buttons.blind-memory-buttons .blind-memory-palette {
    display: none !important;
  }

  /* mate2, широкий ландшафт: скрытая доска не участвует в layout слота (остальные режимы — без изменений). */
  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
    .board-panel:not(.blind-colors-stage--show-board)
    .board-wrap {
    display: none !important;
    opacity: 1;
    max-height: none !important;
    transition: none;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
    .board-panel.blind-colors-stage--show-board
    .board-wrap {
    display: block !important;
    opacity: 1;
    max-height: 100% !important;
    overflow: hidden;
    pointer-events: auto;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
    .blind-colors-status:not(.error):not(.success) {
    display: none !important;
    min-height: 0 !important;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .right-column {
    display: contents !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    justify-self: stretch !important;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"]
    .right-column
    > .blind-trainer-panel.side-panel {
    grid-column: 4;
    grid-row: 1 / span 2;
    margin-left: 0;
    width: 100%;
    max-width: none;
    justify-self: stretch;
    position: relative;
    z-index: 15;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"]
    .page-body
    > .blind-colors-page-head-slot
    > .blind-colors-trainer-subhead {
    position: relative;
    z-index: 1;
    /*
     * До измерения JS — запасной центральный провал; после sync —
     * html[data-blind-subhead-fade-synced="1"] (границы .board-panel).
     */
    background-image: linear-gradient(
      90deg,
      var(--fbc-blind-subhead-line) 0%,
      var(--fbc-blind-subhead-line) max(0%, calc(50% - 28vmin)),
      color-mix(in srgb, var(--fbc-blind-subhead-line) 82%, transparent) calc(50% - 20vmin),
      color-mix(in srgb, var(--fbc-blind-subhead-line) 35%, transparent) calc(50% - 9vmin),
      transparent calc(50% - 2.8vmin),
      transparent calc(50% + 2.8vmin),
      color-mix(in srgb, var(--fbc-blind-subhead-line) 35%, transparent) calc(50% + 9vmin),
      color-mix(in srgb, var(--fbc-blind-subhead-line) 82%, transparent) calc(50% + 20vmin),
      var(--fbc-blind-subhead-line) min(100%, calc(50% + 28vmin)),
      var(--fbc-blind-subhead-line) 100%
    );
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-subhead-fade-synced="1"]
    .page-body
    > .blind-colors-page-head-slot
    > .blind-colors-trainer-subhead {
    background-image: linear-gradient(
      90deg,
      var(--fbc-blind-subhead-line) 0%,
      var(--fbc-blind-subhead-line)
        max(
          0%,
          calc(var(--fbc-blind-subhead-b-l) * 1% - var(--fbc-blind-subhead-fthr) * 1%)
        ),
      color-mix(in srgb, var(--fbc-blind-subhead-line) 38%, transparent)
        max(
          0%,
          calc(
            var(--fbc-blind-subhead-b-l) * 1% - var(--fbc-blind-subhead-fthr) * 0.4 * 1%
          )
        ),
      transparent calc(var(--fbc-blind-subhead-b-l) * 1%),
      transparent calc(var(--fbc-blind-subhead-b-r) * 1%),
      color-mix(in srgb, var(--fbc-blind-subhead-line) 38%, transparent)
        min(
          100%,
          calc(
            var(--fbc-blind-subhead-b-r) * 1% + var(--fbc-blind-subhead-fthr) * 0.4 * 1%
          )
        ),
      var(--fbc-blind-subhead-line)
        min(
          100%,
          calc(var(--fbc-blind-subhead-b-r) * 1% + var(--fbc-blind-subhead-fthr) * 1%)
        ),
      var(--fbc-blind-subhead-line) 100%
    );
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .board-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    gap: max(2px, 0.28vmin);
    /* Без padding-inline в rem: на (pointer: fine) крупнее root → шкала уже доски; только px/vmin при необходимости — здесь 0. */
    padding: 0;
    margin: 0;
    /* Базовый перекрытие строки режима + JS: зазор «шапка → колонка доски» = --blind-land-gap-under-menu (5px для всех colors-only). */
    margin-top: calc(
      var(--blind-land-gap-under-menu) - var(--blind-land-subhead-overlap) +
        var(--fbc-blind-board-margin-top-delta, 0px)
    );
    width: var(--blind-land-board-size);
    max-width: min(
      100%,
      calc(
        var(--blind-land-inline-size) - var(--blind-land-trainer-col) - 1.25rem -
          var(--blind-land-board-horizontal-margin)
      )
    );
    min-width: 0;
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: stretch;
    justify-self: center;
    transform: translateX(calc(var(--blind-land-trainer-col) / 2));
    position: relative;
    /*
     * Ниже сайт-шапки (z-index .site-header до 100), выше строки режима (1): перекрываем подшапку, не меню.
     * Высота — от низа сайт-шапки до низа вьюпорта с учётом safe-area и нижнего люфта браузера.
     */
    z-index: 20;
    height: calc(
      100dvh - var(--landscape-header-offset) - env(safe-area-inset-top, 0px) -
        var(--browser-landscape-bottom-gap) - var(--blind-land-app-frame-bottom) -
        var(--blind-land-gap-under-menu)
    );
    max-height: calc(
      100dvh - var(--landscape-header-offset) - env(safe-area-inset-top, 0px) -
        var(--browser-landscape-bottom-gap) - var(--blind-land-app-frame-bottom) -
        var(--blind-land-gap-under-menu)
    );
    min-height: 0;
    box-sizing: border-box;
    overflow: visible;
  }

  /* mate2: футер в потоке колонки доски; зазор доска↔кнопки — gap у .board-panel, низ блока — padding-bottom у панели. */
  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .blind-mate2-footer-bar {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: 6;
    align-self: stretch;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    background: transparent;
    box-shadow: none;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
    .blind-mate2-footer-bar
    .blind-colors-buttons,
  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
    .blind-mate2-footer-bar
    .blind-mate2-actions-row {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-inline: 0;
    padding-inline: 0;
    box-sizing: border-box;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
    .blind-mate2-footer-bar
    .blind-mate2-actions-row
    .btn {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: none;
    filter: none;
    min-height: clamp(1.45rem, 4vmin, 2rem);
    padding: 0.18rem 0.48rem;
    line-height: 1.12;
    font-size: clamp(0.52rem, calc(var(--blind-land-board-size) * 0.026), 0.76rem);
    transition:
      background 0.15s ease,
      transform 0.08s ease;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
    .blind-mate2-footer-bar
    .blind-mate2-actions-row
    .btn:hover,
  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
    .blind-mate2-footer-bar
    .blind-mate2-actions-row
    .btn:focus-visible,
  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
    .blind-mate2-footer-bar
    .blind-mate2-actions-row
    .btn:active {
    box-shadow: none;
    filter: none;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .board-panel {
    padding-bottom: calc(var(--blind-mate2-gap-stack-to-viewport) + env(safe-area-inset-bottom, 0px));
    justify-content: flex-start;
    gap: var(--blind-mate2-gap-board-to-actions);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .blind-colors-squares-row {
    margin-bottom: 0;
    container-type: size;
    container-name: blind-mate2-squares;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .blind-colors-board-square,
  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .blind-colors-left-square {
    width: min(100%, 100cqw, 100cqh);
    height: min(100%, 100cqw, 100cqh);
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    /* Верх колонки доски у подшапки; таймер-строки в mate2 нет — end давал пустоту над полем. */
    place-self: start center;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .app-frame {
    padding-bottom: max(0px, env(safe-area-inset-bottom, 0px));
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-stage {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    gap: max(2px, 0.28vmin);
  }

  /*
   * mate2: стадия не flex:1 — иначе глобальное .board-panel > .blind-colors-stage { flex: 1 1 auto } сильнее
   * селектора без «>» и съедает всю высоту колонки пустотой между доской и кнопками.
   */
  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .board-panel > .blind-colors-stage {
    justify-content: flex-start;
    gap: 0;
    flex: 0 0 auto;
    flex-grow: 0;
    flex-shrink: 0;
    min-height: 0;
  }

  /* Под доской: только шкала (таймер/аркада); квадрат доски выше */
  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-squares-row {
    order: 1;
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 0;
    margin-bottom: clamp(0.55rem, 2.35vmin, 1.1rem);
  }

  /*
   * mate2, широкий ландшафт: после общего flex:1 у .blind-colors-squares-row — слот по высоте = --blind-land-board-size,
   * без пустоты под графикой доски; 10px до кнопок только через gap у .board-panel.
   */
  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .blind-colors-squares-row {
    flex: 0 0 auto;
    flex-grow: 0;
    flex-shrink: 0;
    min-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    height: var(--blind-land-board-size);
    max-height: var(--blind-land-board-size);
    width: 100%;
    aspect-ratio: auto;
    grid-template-rows: minmax(0, auto);
    align-self: stretch;
    place-items: center;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-timer-row {
    order: 2;
    flex: 0 0 auto;
    align-self: stretch;
    width: 100%;
    max-width: none;
    margin-top: 0;
    box-sizing: border-box;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-timer-fused {
    --blind-colors-timer-h: var(--blind-land-timer-h);
    --blind-colors-timer-r: var(--blind-land-timer-r);
    --blind-colors-timer-cell-w: var(--blind-land-timer-cell-w);
    gap: calc(clamp(0.16rem, calc(var(--blind-land-board-size) * 0.0075), 0.36rem) / 1.5);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-timer-fused > button.blind-colors-arcade-toggle.btn.btn-tool,
  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-arcade-toggle.btn.btn-tool {
    min-height: var(--blind-land-timer-h);
    height: var(--blind-land-timer-h);
    min-width: clamp(2.35rem, calc(var(--blind-land-board-size) * 0.21), 4.25rem);
    border-radius: var(--blind-land-timer-r);
    padding: 0 clamp(0.14rem, calc(var(--blind-land-board-size) * 0.01), 0.34rem);
    overflow: hidden;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-arcade-toggle__ico {
    font-size: calc(
      clamp(0.95rem, calc(var(--blind-land-board-size) * 0.075), 1.95rem) / 1.5
    );
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-arcade-toggle__lbl--stop {
    font-size: calc(
      clamp(0.62rem, calc(var(--blind-land-board-size) * 0.025), 0.86rem) / 1.5
    );
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-inline-score {
    font-size: clamp(0.72rem, calc(var(--blind-land-board-size) * 0.03), 1rem);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-status {
    display: none !important;
  }

  /* Герой — только для портрета */
  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-board-hero {
    display: none !important;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .board-panel,
  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-stage,
  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-board-hero,
  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-timer-row,
  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-board-slot-right,
  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .board-wrap,
  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .board-stack {
    max-width: none;
  }

  /* Один слот: доска поверх, кнопки/поля под ней */
  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-squares-row {
    --blind-colors-gap: var(--blind-colors-rhythm, 0.65rem);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    place-items: center;
    justify-content: center;
    /* Ровно ширина контентной колонки панели (= шкала и fused). */
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    margin-top: 0;
    align-self: center;
    gap: 0;
    position: relative;
    overflow: visible;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-left-square,
  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-board-square {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-left-square {
    z-index: 1;
    position: relative;
    aspect-ratio: 1 / 1;
    align-self: center;
    justify-self: center;
    display: grid;
    grid-template-rows: 1fr auto;
    min-height: 0;
    overflow: hidden;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"]:not([data-blind-trainer="memory"]) .blind-colors-board-square {
    z-index: 2;
    position: relative;
    pointer-events: none;
    aspect-ratio: 1 / 1;
    display: block;
    overflow: visible;
  }

  /* Ландшафт colors-only: доска в правом слоте всегда заполняет квадрат и перекрывает слой кнопок/текста */
  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-board-slot-right > .board-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: none !important;
    box-sizing: border-box;
  }

  /* Оверлей 3–2–1 переносится в слот доски (blind-page.js); держим поверх обёртки доски. */
  html[data-fbc-page="blind"][data-blind-mode="colors-only"]
    .blind-colors-board-slot-right
    > .blind-colors-arcade-countdown-host {
    z-index: 8;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-board-slot-right > .board-wrap > .board-stack {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-board-slot-right > .board-wrap .board {
    width: 100%;
    height: auto;
  }

  /*
   * Обёртка доски на весь слот (inset:0) иначе перехватывает клики в пустых углах квадрата и
   * глушит нижележащую сетку ответов (вторая группа слона, второй столбец «Да/Нет» и т.д.).
   * Кликабельна только сама доска. Таймер в слоте: обёртка pointer-events:none, круг .blind-arcade-timer — auto.
   */
  html[data-fbc-page="blind"][data-blind-mode="colors-only"]
    .board-panel.blind-colors-stage--show-board
    .blind-colors-board-slot-right
    > .board-wrap {
    pointer-events: none;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"]
    .board-panel.blind-colors-stage--show-board
    .blind-colors-board-slot-right
    > .board-wrap
    > .board-stack {
    pointer-events: none;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"]
    .board-panel.blind-colors-stage--show-board
    .blind-colors-board-slot-right
    > .board-wrap
    .board {
    pointer-events: auto;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"]
    .blind-colors-board-slot-right
    > .blind-arcade-timer-wrap {
    pointer-events: none;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"]
    .blind-colors-board-slot-right
    > .blind-arcade-timer-wrap
    .blind-arcade-timer {
    pointer-events: auto;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-dkk {
    aspect-ratio: auto;
    min-height: 0;
  }

  /* Цвет полей: координата условия ближе к верху колонки (как на скрине), не по центру нижней половины DKK. */
  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="colors"]
    .blind-colors-dkk-bottom {
    align-content: start;
    align-items: start;
    padding-top: clamp(0.28rem, 2vmin, 0.95rem);
    padding-bottom: 0.28rem;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="colors"]
    .blind-colors-dkk-bottom
    .blind-colors-target:not(.blind-mate2-prompt-root) {
    transform: translateY(calc(-0.7rem - clamp(0.85rem, 3.2vmin, 2.35rem)));
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-buttons {
    align-self: center;
    width: 100%;
    gap: clamp(
      0.22rem,
      calc(var(--blind-colors-rhythm, 0.65rem) * var(--blind-land-ui-scale)),
      var(--blind-colors-rhythm, 0.65rem)
    );
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="colors"]
    .blind-colors-buttons,
  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="knight"]
    .blind-colors-buttons {
    gap: clamp(14px, calc(0.5rem + 1.25vmin), 24px);
    column-gap: clamp(14px, calc(0.5rem + 1.25vmin), 24px);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-answer {
    min-height: clamp(52px, calc(var(--blind-land-board-size) * 0.172), 158px);
    font-size: clamp(0.86rem, calc(var(--blind-land-board-size) * 0.031), 1.85rem);
    border-radius: clamp(9px, calc(var(--blind-land-board-size) * 0.026), 14px);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-bishop-key {
    min-height: clamp(42px, calc(var(--blind-land-board-size) * 0.13), 68px);
    font-size: clamp(0.78rem, calc(var(--blind-land-board-size) * 0.042), 1.35rem);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-memory-piece-btn {
    min-height: clamp(44px, calc(var(--blind-land-board-size) * 0.145), 72px);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-memory-piece {
    width: clamp(24px, calc(var(--blind-land-board-size) * 0.105), 58px);
    height: clamp(24px, calc(var(--blind-land-board-size) * 0.105), 58px);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-king-sprint-key {
    min-height: clamp(38px, calc(var(--blind-land-board-size) * 0.13), 58px);
    font-size: clamp(0.78rem, calc(var(--blind-land-board-size) * 0.041), 1.15rem);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-toggle {
    font-size: clamp(0.66rem, calc(var(--blind-land-board-size) * 0.026), 0.86rem);
    gap: clamp(0.28rem, calc(var(--blind-land-board-size) * 0.02), 0.65rem);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-toggle__track {
    width: clamp(2rem, calc(var(--blind-land-board-size) * 0.13), 2.75rem);
    height: clamp(1.12rem, calc(var(--blind-land-board-size) * 0.07), 1.5rem);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-toggle__thumb {
    width: clamp(0.88rem, calc(var(--blind-land-board-size) * 0.056), 1.2rem);
    height: clamp(0.88rem, calc(var(--blind-land-board-size) * 0.056), 1.2rem);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-target {
    font-size: min(5.5rem, calc(var(--blind-land-board-size) * 0.2));
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-target--coords {
    font-size: min(5.5rem, calc(var(--blind-land-board-size) * 0.2));
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-target--knight-question {
    gap: 0.55rem;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-target--knight-question .blind-knight-question-line {
    font-size: clamp(0.48rem, 1.1vw, 0.72rem);
    line-height: 0.66;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-target--knight-question .blind-knight-coords-line {
    font-size: min(3.2rem, calc(var(--blind-land-board-size) * 0.12));
  }

  /*
   * Спринт короля (широкий ландшафт): условие к верху DKK; король ×1.8 к пешке;
   * блок условий поднят к шапке (translate dkk, меньше зазор до кнопок).
   */
  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="king"]
    .blind-colors-target.blind-colors-target--knight-question {
    justify-content: flex-start;
    transform: none;
    gap: 0;
    margin-top: calc(-1 * clamp(0.35rem, calc(var(--blind-land-board-size) * 0.042), 1.15rem));
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="king"]
    .blind-colors-target--knight-question
    > .blind-knight-question-line {
    margin-top: 14px;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="king"]
    .blind-colors-target--knight-question
    .blind-knight-question-line {
    font-size: clamp(0.58rem, calc(var(--blind-land-board-size) * 0.03), 0.88rem);
    line-height: 1.26;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="king"]
    .blind-colors-target--knight-question
    .blind-knight-coords-line {
    font-size: min(2.65rem, calc(var(--blind-land-board-size) * 0.092));
    line-height: 1.04;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="king"] .blind-king-pieces-stack {
    --blind-king-sprint-pawn: min(38px, calc(var(--blind-land-board-size) * 0.082));
    align-content: start;
    gap: clamp(0.04rem, calc(var(--blind-land-board-size) * 0.014), 0.32rem);
    margin-top: calc(var(--blind-colors-rhythm, 0.65rem) * -0.58);
    padding-bottom: 36px;
    box-sizing: border-box;
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="king"] .blind-king-pawns-row {
    column-gap: clamp(0.03rem, calc(var(--blind-land-board-size) * 0.012), 0.24rem);
    row-gap: clamp(0.02rem, calc(var(--blind-land-board-size) * 0.009), 0.18rem);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="king"]
    .blind-king-pawns-row
    .blind-king-piece-badge__img {
    width: var(--blind-king-sprint-pawn);
    height: var(--blind-king-sprint-pawn);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="king"]
    .blind-king-piece-top
    .blind-king-piece-badge__img {
    width: calc(var(--blind-king-sprint-pawn) * 1.8);
    height: calc(var(--blind-king-sprint-pawn) * 1.8);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="king"]
    .blind-king-pawns-row
    .blind-king-piece-badge__coord {
    font-size: clamp(0.48rem, calc(var(--blind-land-board-size) * 0.036), 1.12rem);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="king"]
    .blind-king-piece-top
    .blind-king-piece-badge__coord {
    font-size: calc(1.8 * clamp(0.48rem, calc(var(--blind-land-board-size) * 0.036), 1.12rem));
  }

  /*
   * Колонка условий по верху слота (иначе place-items:center на квадрате «вдавливает» блок вниз).
   */
  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="king"] .blind-colors-left-square {
    align-self: start;
    gap: clamp(0.05rem, 0.55vmin, 0.22rem);
    margin-top: calc(-1 * clamp(0.12rem, calc(var(--blind-land-board-size) * 0.018), 0.55rem));
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="king"] .blind-colors-dkk {
    transform: translateY(calc(-1 * clamp(0.85rem, calc(var(--blind-land-board-size) * 0.112), 3.35rem)));
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="king"] .blind-king-meta-line {
    font-size: clamp(0.58rem, calc(var(--blind-land-board-size) * 0.026), 0.88rem);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="king"] .blind-king-level-key {
    min-height: clamp(20px, calc(var(--blind-land-board-size) * 0.062), 38px);
    font-size: clamp(0.55rem, calc(var(--blind-land-board-size) * 0.026), 0.82rem);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="king"] .blind-king-level-toggle {
    font-size: clamp(0.54rem, calc(var(--blind-land-board-size) * 0.024), 0.8rem);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="king"] .blind-colors-dkk-bottom {
    justify-items: center;
    align-content: start;
    align-items: stretch;
    padding-top: 0;
    padding-bottom: clamp(0.06rem, calc(var(--blind-land-board-size) * 0.01), 0.22rem);
    margin-top: calc(-1 * clamp(0.18rem, calc(var(--blind-land-board-size) * 0.022), 0.72rem));
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-dkk-top {
    padding-top: 0;
    transform: translateY(-0.18rem);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-mate2-prompt-root {
    font-size: clamp(0.62rem, 1.35vw, 0.78rem);
  }

  /* Мат в слепую, ландшафт ≥701px: при сжатии слота — фигуры, подписи и кнопки до минимально читаемого */
  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .blind-mate2-prompt-root {
    font-size: clamp(0.45rem, calc(var(--blind-land-board-size) * 0.018), 0.72rem);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .blind-mate2-heading {
    font-size: clamp(0.52rem, calc(var(--blind-land-board-size) * 0.032), 0.88rem);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .blind-mate2-line-white,
  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .blind-mate2-line-black {
    font-size: clamp(0.48rem, calc(var(--blind-land-board-size) * 0.027), 0.78rem);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .blind-mate2-feedback {
    font-size: clamp(0.72rem, calc(var(--blind-land-board-size) * 0.048), 1.28rem);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
    .blind-mate2-static
    .blind-mate2-pawns-row
    .blind-king-piece-badge__img {
    width: clamp(20px, calc(var(--blind-land-board-size) * 0.1), 50px);
    height: clamp(20px, calc(var(--blind-land-board-size) * 0.1), 50px);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
    .blind-mate2-static
    .blind-mate2-pawns-row
    .blind-king-piece-badge__coord {
    font-size: clamp(0.55rem, calc(var(--blind-land-board-size) * 0.038), 1rem);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .blind-mate2-actions-row {
    gap: clamp(0.14rem, calc(var(--blind-land-board-size) * 0.011), 0.38rem);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .blind-mate2-actions-row .btn {
    min-height: clamp(24px, calc(var(--blind-land-board-size) * 0.082), 38px);
    padding: clamp(0.1rem, calc(var(--blind-land-board-size) * 0.014), 0.28rem)
      clamp(0.16rem, calc(var(--blind-land-board-size) * 0.019), 0.4rem);
    font-size: clamp(0.52rem, calc(var(--blind-land-board-size) * 0.026), 0.74rem);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
    .blind-colors-buttons.blind-memory-buttons
    > .blind-colors-toggle {
    font-size: clamp(0.58rem, calc(var(--blind-land-board-size) * 0.028), 0.78rem);
    gap: clamp(0.2rem, calc(var(--blind-land-board-size) * 0.016), 0.42rem);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
    .blind-colors-buttons.blind-memory-buttons
    .blind-colors-toggle__track {
    width: clamp(1.85rem, calc(var(--blind-land-board-size) * 0.15), 2.45rem);
    height: clamp(0.95rem, calc(var(--blind-land-board-size) * 0.078), 1.28rem);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
    .blind-colors-buttons.blind-memory-buttons
    .blind-colors-toggle__thumb {
    width: clamp(0.72rem, calc(var(--blind-land-board-size) * 0.06), 1.05rem);
    height: clamp(0.72rem, calc(var(--blind-land-board-size) * 0.06), 1.05rem);
    margin-top: calc(-0.5 * clamp(0.72rem, calc(var(--blind-land-board-size) * 0.06), 1.05rem));
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
    .blind-colors-buttons.blind-memory-buttons
    .blind-colors-toggle__input:checked
    + .blind-colors-toggle__track
    .blind-colors-toggle__thumb {
    transform: translateX(clamp(0.78rem, calc(var(--blind-land-board-size) * 0.065), 1.12rem));
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .blind-mate2-move-popover {
    padding: clamp(0.2rem, calc(var(--blind-land-board-size) * 0.012), 0.34rem);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .blind-mate2-move-popover__btn {
    padding: clamp(0.26rem, calc(var(--blind-land-board-size) * 0.016), 0.44rem)
      clamp(0.24rem, calc(var(--blind-land-board-size) * 0.015), 0.4rem);
    font-size: clamp(0.68rem, calc(var(--blind-land-board-size) * 0.032), 1.05rem);
  }

  /*
   * «Показывать доску» — справа от колонки доски, вне слота .blind-colors-board-slot-right
   * (родитель — .board-panel; left:100% от края панели).
   */
  html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-toggle--land-outside-panel {
    position: absolute;
    left: 100%;
    bottom: 0;
    margin-left: clamp(6px, 1.2vmin, 14px);
    z-index: 22;
    pointer-events: auto;
    margin-bottom: 0;
    padding: 0;
    align-items: center;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.72);
    max-width: min(42vw, 12.5rem);
    box-sizing: border-box;
    flex-wrap: nowrap;
  }
}

/* Мат в слепую: узкий ландшафт (нет --blind-land-board-size) — те же пропорции через vmin */
@media (orientation: landscape) and (max-width: 700px) {
  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .blind-mate2-prompt-root {
    font-size: clamp(0.44rem, 1.55vmin, 0.68rem);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .blind-mate2-heading {
    font-size: clamp(0.52rem, 2.35vmin, 0.82rem);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .blind-mate2-line-white,
  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .blind-mate2-line-black {
    font-size: clamp(0.48rem, 2.05vmin, 0.76rem);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .blind-mate2-feedback {
    font-size: clamp(0.68rem, 3.6vmin, 1.15rem);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
    .blind-mate2-static
    .blind-mate2-pawns-row
    .blind-king-piece-badge__img {
    width: clamp(20px, 7.2vmin, 48px);
    height: clamp(20px, 7.2vmin, 48px);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
    .blind-mate2-static
    .blind-mate2-pawns-row
    .blind-king-piece-badge__coord {
    font-size: clamp(0.52rem, 2.85vmin, 0.95rem);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .blind-mate2-actions-row {
    gap: clamp(0.12rem, 0.85vmin, 0.32rem);
  }

  /* Только полоса под доской: три кнопки на всю ширину панели, компактнее паддинги — «ОТКРЫТЬ ДОСКУ» не режется. */
  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
    .blind-mate2-footer-bar
    .blind-mate2-actions-row {
    gap: clamp(0.08rem, 0.65vmin, 0.26rem);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
    .blind-mate2-footer-bar
    .blind-mate2-actions-row
    .btn {
    min-height: clamp(22px, 6vmin, 36px);
    padding: clamp(0.06rem, 0.55vmin, 0.2rem) clamp(0.06rem, 0.55vmin, 0.22rem);
    font-size: clamp(0.44rem, 1.75vmin, 0.66rem);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
    .blind-colors-buttons.blind-memory-buttons
    > .blind-colors-toggle {
    font-size: clamp(0.52rem, 2vmin, 0.74rem);
    gap: clamp(0.16rem, 1.1vmin, 0.36rem);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
    .blind-colors-buttons.blind-memory-buttons
    .blind-colors-toggle__track {
    width: clamp(1.65rem, 10vmin, 2.35rem);
    height: clamp(0.88rem, 5.1vmin, 1.22rem);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
    .blind-colors-buttons.blind-memory-buttons
    .blind-colors-toggle__thumb {
    width: clamp(0.66rem, 4vmin, 0.98rem);
    height: clamp(0.66rem, 4vmin, 0.98rem);
    margin-top: calc(-0.5 * clamp(0.66rem, 4vmin, 0.98rem));
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
    .blind-colors-buttons.blind-memory-buttons
    .blind-colors-toggle__input:checked
    + .blind-colors-toggle__track
    .blind-colors-toggle__thumb {
    transform: translateX(clamp(0.72rem, 4.35vmin, 1.05rem));
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .blind-mate2-move-popover {
    padding: clamp(0.22rem, 1vmin, 0.38rem);
  }

  html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"] .blind-mate2-move-popover__btn {
    padding: clamp(0.28rem, 1.2vmin, 0.42rem) clamp(0.26rem, 1.1vmin, 0.38rem);
    font-size: clamp(0.72rem, 2.4vmin, 1rem);
  }
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .coord-ranks.left,
html[data-fbc-page="blind"][data-blind-mode="colors-only"] .coord-files.bottom,
html[data-fbc-page="blind"][data-blind-mode="colors-only"] .board-resize-handle,
html[data-fbc-page="blind"][data-blind-mode="colors-only"] .board-flip-corner,
html[data-fbc-page="blind"][data-blind-mode="colors-only"] .board-coord-overlay {
  display: none;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .square.square--blind-preview {
  position: relative;
  box-shadow: inset 0 0 0 3px rgba(250, 226, 139, 0.98);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .square.square--blind-correct {
  box-shadow:
    inset 0 0 0 7px rgba(72, 212, 106, 1),
    0 0 0 3px rgba(72, 212, 106, 0.75),
    0 0 18px rgba(72, 212, 106, 0.74);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .square.square--blind-wrong {
  box-shadow:
    inset 0 0 0 7px rgba(228, 66, 66, 1),
    0 0 0 3px rgba(228, 66, 66, 0.75),
    0 0 18px rgba(228, 66, 66, 0.74);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .square--blind-step-num {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.25rem, 2.8vw, 2.2rem);
  line-height: 1;
  font-weight: 900;
  color: var(--blind-colors-btn-dark, #1f1f1f);
  background: transparent;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
  pointer-events: none;
  z-index: 3;
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .square.dark .square--blind-step-num {
  color: var(--blind-colors-btn-light, #f3f3f3);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

html[data-fbc-page="blind"][data-blind-mode="colors-only"] .blind-colors-status {
  min-height: 1.2rem;
  margin: 0;
  text-align: center;
  color: var(--warm-muted);
  font-size: 0.88rem;
}

/* Конь / слон / спринт: без нейтральных подсказок под кнопками (ошибки и «Верно» остаются). */
html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="knight"]
  .blind-colors-status:not(.error):not(.success),
html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="bishop"]
  .blind-colors-status:not(.error):not(.success),
html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="king"]
  .blind-colors-status:not(.error):not(.success) {
  display: none !important;
  min-height: 0 !important;
}

/* mate2: нейтральная строка под сеткой только съедает место над кнопками — оставляем .error / .success. */
html[data-fbc-page="blind"][data-blind-mode="colors-only"][data-blind-trainer="mate2"]
  .blind-colors-status:not(.error):not(.success) {
  display: none !important;
  min-height: 0 !important;
}

/* colors-only uses one unified layout, no mobile branches */

.square.square--blind-hit {
  box-shadow: inset 0 0 0 3px rgba(72, 160, 92, 0.95);
}

.square.square--blind-miss {
  box-shadow: inset 0 0 0 3px rgba(200, 72, 72, 0.95);
}

html[data-fbc-page="blind"][data-blind-mode="memory-position"] .square.square--blind-preview {
  position: relative;
  box-shadow: inset 0 0 0 3px rgba(250, 226, 139, 0.98);
}

html[data-fbc-page="blind"][data-blind-mode="memory-position"] .square.square--blind-correct {
  box-shadow:
    inset 0 0 0 7px rgba(72, 212, 106, 1),
    0 0 0 3px rgba(72, 212, 106, 0.75),
    0 0 18px rgba(72, 212, 106, 0.74);
}

html[data-fbc-page="blind"][data-blind-mode="memory-position"] .square.square--blind-wrong {
  box-shadow:
    inset 0 0 0 7px rgba(228, 66, 66, 1),
    0 0 0 3px rgba(228, 66, 66, 0.75),
    0 0 18px rgba(228, 66, 66, 0.74);
}

.blind-memory-position {
  margin-top: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.blind-memory-palette {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.blind-memory-palette.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.blind-memory-palette-side.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.blind-memory-palette-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.35rem;
}

.blind-memory-piece-btn {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.blind-memory-piece-btn.is-active {
  box-shadow:
    0 0 0 2px color-mix(in srgb, #f0cf66 50%, transparent),
    0 0 14px color-mix(in srgb, #f0cf66 40%, transparent);
}

.blind-memory-piece {
  width: 100%;
  max-width: 48px;
  aspect-ratio: 1 / 1;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

.blind-memory-ready-btn {
  width: 100%;
}

.blind-coords-ribbon {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  overflow: hidden;
  --coords-main-x: 50%;
  --coords-prev-x: 25%;
  --coords-next-x: 80%;
  --coords-ghost-x: 93%;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: lowercase;
}

.blind-coords-slot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center;
  color: rgba(255, 244, 219, 0.74);
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.42),
    0 0 24px rgba(0, 0, 0, 0.3);
  transition:
    left 500ms cubic-bezier(0.22, 0.72, 0.2, 1),
    transform 500ms cubic-bezier(0.22, 0.72, 0.2, 1),
    opacity 500ms ease;
  will-change: transform, opacity;
  text-align: center;
  min-width: 2ch;
}

.blind-coords-ribbon.is-resetting .blind-coords-slot {
  transition: none !important;
}

.blind-coords-slot--main {
  font-size: clamp(6.9rem, 20.2vmin, 12.5rem);
  opacity: 0.8;
  left: var(--coords-main-x);
  transform: translate(-50%, -50%) scale(1);
}

.blind-coords-slot--next {
  font-size: clamp(3.45rem, 10.2vmin, 6.3rem);
  opacity: 0.7;
  left: var(--coords-next-x);
  transform: translate(-50%, -52%) scale(1);
}

.blind-coords-slot--ghost {
  font-size: clamp(3.45rem, 10.2vmin, 6.3rem);
  opacity: 0;
  left: var(--coords-ghost-x);
  transform: translate(-50%, -52%) scale(1);
}

.blind-coords-ribbon.is-advancing .blind-coords-slot--main {
  opacity: 0.42;
  left: var(--coords-prev-x);
  transform: translate(-50%, -52%) scale(0.5);
}

.blind-coords-ribbon.is-advancing .blind-coords-slot--next {
  opacity: 0.8;
  left: var(--coords-main-x);
  transform: translate(-50%, -50%) scale(2);
}

.blind-coords-ribbon.is-advancing .blind-coords-slot--ghost {
  opacity: 0.7;
  left: var(--coords-next-x);
  transform: translate(-50%, -52%) scale(1);
}

.square.square--memory-flash {
  box-shadow: inset 0 0 0 3px rgba(201, 169, 98, 0.9);
}

.blind-hub-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 1rem 0 2rem;
}

.blind-hub-grid.app-landing-blind-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
}

html:not([data-fbc-blind-icons="v1"]) .blind-hub-grid .app-landing-blind-card {
  min-height: 540px;
  padding: 1.1rem 0.6rem 0.9rem;
}

html:not([data-fbc-blind-icons="v1"]) .blind-hub-grid .app-landing-blind-card__avatar,
html:not([data-fbc-blind-icons="v1"]) .blind-hub-grid .app-landing-blind-card .app-landing-blind-card__avatar--puzzle {
  width: 368px;
  height: 368px;
}

html:not([data-fbc-blind-icons="v1"]) .blind-hub-grid .app-landing-blind-card__icon--modern {
  width: 312px;
  height: 160px;
}

html:not([data-fbc-blind-icons="v1"]) .blind-hub-grid .app-landing-blind-card__label {
  font-size: 1rem;
}

.static-page {
  max-width: 36rem;
  margin: 0 auto;
  padding: 1rem 0 2.5rem;
}

html[data-fbc-page="account"] .static-page {
  max-width: 56rem;
}

/* Аккаунт в портрете: на всю ширину окна (только safe-area), без боковых «полей» колонки. В альбоме — как было (56rem + паддинги .welcome-page-body). */
@media (orientation: portrait) {
  html[data-fbc-page="account"] .welcome-body .page-body.welcome-page-body {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 1rem max(0px, env(safe-area-inset-right, 0px)) 2rem max(0px, env(safe-area-inset-left, 0px));
  }

  html[data-fbc-page="account"] .static-page {
    max-width: 100%;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0;
  }
}

.static-page h1 {
  font-size: 1.35rem;
  margin: 0 0 0.5rem;
}

.static-page .static-lede {
  color: var(--warm-muted);
  font-size: 0.88rem;
  margin: 0 0 1.25rem;
}

.account-stats {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  background: var(--warm-card);
  border: 1px solid var(--panel-border);
  margin-bottom: 1.25rem;
  font-size: 0.88rem;
}

#welcomeAuthStats.welcome-dashboard-stats {
  display: grid;
  gap: 0.68rem;
  padding: 0.85rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--panel-border) 55%, #bda06c 45%);
  background:
    radial-gradient(circle at 12% 0%, rgba(201, 169, 98, 0.22), transparent 50%),
    linear-gradient(140deg, rgba(57, 50, 45, 0.98), rgba(37, 33, 30, 0.98));
}

.welcome-stats-head {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
}

.welcome-stats-head__account {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.18rem 0.52rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--panel-border) 68%, #be9658 32%);
  background: color-mix(in srgb, var(--warm-card) 84%, #1e1b18 16%);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #f5e5c6;
}

.welcome-stats-head__solved {
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--warm-muted) 80%, #f4dec0 20%);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.welcome-stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.42rem;
}

.welcome-stats-row--top .welcome-stat-chip {
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: center;
  align-items: stretch;
  text-align: center;
  padding: 0.3rem 0.5rem 0.28rem;
  min-height: 2.94rem;
  row-gap: 0.1rem;
}

.welcome-stats-row--top .welcome-stat-chip span {
  align-self: start;
  margin-top: 0;
  font-size: 0.62rem;
  letter-spacing: 0.045em;
}

.welcome-stats-row--top .welcome-stat-chip > strong,
.welcome-stats-row--top .welcome-stat-chip > .welcome-goal-target-btn {
  align-self: center;
}

.welcome-stats-row--bottom {
  align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 0.64rem;
}

.welcome-stat-chip {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.52rem 0.56rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--panel-border) 66%, #c9a962 34%);
  background: color-mix(in srgb, var(--warm-card) 84%, #1e1a17 16%);
}

.welcome-stat-chip span {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  color: var(--warm-muted);
}

.welcome-stat-chip strong {
  font-size: 1.05rem;
  color: #f7e6c5;
}

.welcome-stat-chip--goal {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.welcome-stat-chip--goal-active strong {
  color: #ffe08d;
}

.welcome-goal-target-btn {
  width: 1.76rem;
  height: 1.76rem;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: transform 0.16s ease, filter 0.16s ease;
}

.welcome-goal-target-btn:hover:not(:disabled),
.welcome-goal-target-btn:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.06);
  outline: none;
}

.welcome-goal-target-btn:disabled {
  opacity: 0.62;
  cursor: wait;
}

.welcome-goal-target-btn__icon {
  display: block;
  width: 1.56rem;
  height: 1.56rem;
  object-fit: contain;
}

.welcome-goal-modal {
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.welcome-goal-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 11, 10, 0.7);
  backdrop-filter: blur(2px);
}

.welcome-goal-modal__dialog {
  position: relative;
  width: min(34rem, 100%);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, #c9a962 58%, var(--panel-border) 42%);
  background:
    radial-gradient(circle at 0% 0%, rgba(201, 169, 98, 0.24), transparent 46%),
    linear-gradient(150deg, rgba(52, 45, 39, 0.98), rgba(29, 25, 22, 0.98));
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.46);
  padding: 1rem 0.96rem 0.9rem;
}

.welcome-goal-modal__close {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--panel-border) 70%, #be9658 30%);
  background: color-mix(in srgb, var(--warm-card) 86%, #201c19 14%);
  color: #f0d9ad;
  font-size: 1rem;
  cursor: pointer;
}

.welcome-goal-modal__title {
  margin: 0 0 0.45rem;
  font-size: 1.08rem;
  color: #ffe4ba;
}

.welcome-goal-modal__text {
  margin: 0 0 0.78rem;
  color: color-mix(in srgb, #f2dfbf 86%, var(--warm-muted) 14%);
  font-size: 0.84rem;
  line-height: 1.42;
}

.welcome-goal-modal__choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.46rem;
}

.welcome-goal-choice-btn {
  display: grid;
  gap: 0.08rem;
  align-content: center;
  justify-items: center;
  min-height: 3rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, #c9a962 58%, var(--panel-border) 42%);
  background: color-mix(in srgb, var(--warm-card) 78%, #5c4721 22%);
  color: #ffe8bf;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.welcome-goal-choice-btn:hover:not(:disabled),
.welcome-goal-choice-btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
  filter: brightness(1.08);
  outline: none;
}

.welcome-goal-choice-btn:disabled {
  opacity: 0.46;
  cursor: not-allowed;
}

.welcome-goal-choice-btn__target {
  font-size: 1rem;
  font-weight: 800;
}

.welcome-goal-choice-btn__mult {
  font-size: 0.76rem;
  color: color-mix(in srgb, #f6e3c3 78%, var(--warm-muted) 22%);
}

.welcome-goal-modal__hint {
  margin: 0.58rem 0 0;
  font-size: 0.76rem;
  color: #ffcb9a;
}

.welcome-stat-chip--total {
  border-color: color-mix(in srgb, #f0d15f 58%, var(--panel-border) 42%);
  background: color-mix(in srgb, #5a4620 24%, var(--warm-card) 76%);
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0.38rem 0.44rem;
  gap: 0;
}

.welcome-stat-chip--total strong {
  line-height: 1;
  color: #ffe08d;
}

.welcome-weekly-goal-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.26rem;
  margin-top: 0.08rem;
  font-size: 0.66rem;
  color: var(--warm-muted);
  text-transform: none;
  letter-spacing: 0.01em;
}

.welcome-weekly-goal-select {
  border: 1px solid color-mix(in srgb, var(--panel-border) 68%, #c9a962 32%);
  background: color-mix(in srgb, var(--warm-card) 88%, #1d1a17 12%);
  color: #f6e1bd;
  border-radius: 999px;
  height: 1.2rem;
  min-width: 3.7rem;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 0 0.42rem;
}

.welcome-rating-card {
  display: grid;
  gap: 0.15rem;
  padding: 0.62rem 0.64rem;
  border-radius: 10px;
  border: 1px solid rgba(206, 178, 120, 0.42);
  background: linear-gradient(120deg, rgba(201, 169, 98, 0.22), rgba(25, 23, 20, 0.44));
}

.welcome-rating-card__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--warm-muted) 80%, #f4dec0 20%);
}

.welcome-rating-card__value {
  font-size: clamp(1.65rem, 3.2vw, 2.15rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: #ffd38a;
}

.welcome-rating-card__rank {
  font-size: 0.74rem;
  color: color-mix(in srgb, var(--warm-muted) 72%, #ffffff 28%);
}

.welcome-attempts-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.22rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.welcome-attempt-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.58rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.84rem;
  border: 1px solid transparent;
}

.welcome-attempt-pill--first {
  color: #132f11;
  background: #6fd37f;
  border-color: #4bab5f;
}

.welcome-attempt-pill--second {
  color: #3a3007;
  background: #f0d15f;
  border-color: #d7b649;
}

.welcome-attempt-pill--third {
  color: #3f1010;
  background: #dd7d7d;
  border-color: #c95e5e;
}

.welcome-streak-inline {
  display: grid;
  gap: 0.2rem;
  margin: 0.1rem 0 0.3rem;
}

.welcome-streak-title {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--warm-muted) 85%, #f4dec0 15%);
}

.welcome-streak-track {
  position: relative;
  width: 100%;
  height: 0.56rem;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--warm-card) 70%, #181614 30%);
}

.welcome-streak-track__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #69ce79, #f0d15f 62%, #f7be6a);
  box-shadow: 0 0 10px rgba(221, 176, 87, 0.26);
}

.welcome-streak-milestones {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.67rem;
  font-weight: 600;
  color: color-mix(in srgb, #f3deb5 82%, var(--warm-muted) 18%);
  letter-spacing: 0.02em;
  margin-top: -0.02rem;
}

.admin-menu-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.7rem;
}

.admin-menu-actions__btn {
  flex: 1 1 10rem;
}

.admin-menu-actions__btn.is-active {
  border-color: var(--accent);
  color: var(--accent);
}

.admin-menu-panels {
  width: 100%;
}

.admin-menu-panel {
  width: 100%;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  background: var(--warm-card);
  padding: 0.8rem;
  box-sizing: border-box;
  margin: 0 0 0.8rem;
}

.admin-menu-panel__title {
  margin: 0 0 0.55rem;
  font-size: 0.95rem;
}

.admin-menu-panel .account-stats {
  background: transparent;
  border: 1px solid var(--panel-border);
}

.form-stack {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.form-stack .field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.form-stack .field span {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--warm-muted);
}

.form-stack input {
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--warm-ink);
  font: inherit;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.form-msg {
  font-size: 0.82rem;
  margin: 0.25rem 0 0;
  min-height: 1.2em;
}

.form-msg.is-error {
  color: var(--danger);
}

.form-msg.is-ok {
  color: var(--ok);
}

/* Страницы с классом welcome-body: общий контейнер. Горизонталь 0.75rem — в тон паддингу шапки; поля даёт .app-frame (без второго «лишнего» 1rem). */
.welcome-body .page-body.welcome-page-body {
  padding: 1rem max(0.75rem, env(safe-area-inset-right, 0px)) 2rem
    max(0.75rem, env(safe-area-inset-left, 0px));
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Только главная (/): шире; подстраницы account/settings/hub остаются 56rem */
.welcome-body .page-body.welcome-page-body:has(.welcome-main) {
  max-width: min(78rem, 100%);
}

.welcome-top-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.welcome-top-link {
  font-size: 0.82rem;
  padding: 0.35rem 0.65rem;
}

/* minmax(0,1fr): иначе min трека = min-content детей — колонка с кнопками сужается, пока флайаут [hidden], и расширяется при раскрытии сетки книг. */
.welcome-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin-top: 1rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

@media (min-width: 701px) {
  .welcome-grid {
    grid-template-columns: minmax(0, 1fr) min(22rem, 34vw);
    align-items: start;
  }
}

.welcome-grid__primary {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
  width: 100%;
}

.welcome-grid__aside .app-landing__continue.welcome-continue-link {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}

/* Широкая главная: flex вместо grid 1fr — иначе min трека/браузер даёт ширину по контенту, пока флайаут скрыт, и блок кнопок расширяется при раскрытии. */
@media (min-width: 701px) {
  html[data-fbc-page="welcome"] .welcome-grid {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1.25rem;
  }

  html[data-fbc-page="welcome"] .welcome-grid__primary {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }

  html[data-fbc-page="welcome"] .welcome-grid__aside {
    flex: 0 0 min(22rem, 34vw);
    min-width: 0;
  }
}

.welcome-status {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--warm-muted);
}

.welcome-status.welcome-status--error {
  color: #c45c5c;
}

.welcome-status.welcome-status--success {
  color: var(--accent, #6b9e4e);
}

/* Главная: «Выйти» и «Обратная связь» — тонкие жёлтые, в ряд по ширине колонки (как блок статистики) */
.welcome-aside-actions {
  display: grid;
  gap: 0.42rem;
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.45rem;
}

.welcome-aside-actions[data-welcome-actions-layout="pair"] {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.welcome-aside-actions[data-welcome-actions-layout="single"] {
  grid-template-columns: minmax(0, 1fr);
}

.welcome-aside-btn {
  margin: 0;
  padding: 0.38rem 0.5rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, #e8c86b 70%, rgba(42, 36, 30, 1) 30%);
  background: linear-gradient(
    180deg,
    rgba(232, 200, 107, 0.16) 0%,
    rgba(232, 200, 107, 0.05) 100%
  );
  color: #f2dfa2;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.28;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

.welcome-aside-btn:hover {
  border-color: color-mix(in srgb, #f5e9c4 62%, #6b5a3a 38%);
  background: linear-gradient(
    180deg,
    rgba(245, 228, 170, 0.24) 0%,
    rgba(232, 200, 107, 0.1) 100%
  );
  color: #fff8df;
}

.welcome-aside-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, #e8c86b 88%, transparent);
  outline-offset: 2px;
}

.welcome-aside-btn[hidden] {
  display: none !important;
}

.welcome-grid__aside .account-stats.welcome-dashboard-stats {
  margin-bottom: 0.55rem;
}

.welcome-feedback-modal {
  position: fixed;
  inset: 0;
  z-index: 2600;
  display: grid;
  place-items: center;
  padding: 1rem;
  box-sizing: border-box;
}

.welcome-feedback-modal[hidden] {
  display: none !important;
}

.welcome-feedback-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 11, 10, 0.72);
  backdrop-filter: blur(2px);
}

.welcome-feedback-modal__dialog {
  position: relative;
  width: min(22rem, 100%);
  box-sizing: border-box;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, #c9a962 58%, var(--panel-border) 42%);
  background:
    radial-gradient(circle at 10% 0%, rgba(201, 169, 98, 0.22), transparent 48%),
    linear-gradient(150deg, rgba(52, 45, 39, 0.98), rgba(29, 25, 22, 0.98));
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.46);
  padding: 0.85rem 0.88rem 0.82rem;
}

.welcome-feedback-modal__close {
  position: absolute;
  top: 0.38rem;
  right: 0.38rem;
  width: 1.85rem;
  height: 1.85rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--warm-muted);
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: color 0.15s ease, background 0.15s ease;
}

.welcome-feedback-modal__close:hover,
.welcome-feedback-modal__close:focus-visible {
  color: var(--warm-ink);
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}

.blind-page-status {
  margin-top: 0.5rem;
}

/* Выпадающее меню «Книги/Избранное» без верхней шапки-вкладок */
.site-header .nav-item--mega > .dropdown.panel-tasks .nav-tasks-tabs {
  display: none;
}

.site-header .nav-item--mega > .dropdown.panel-tasks .nav-tasks-panes {
  padding-top: 0;
}

/* Финальный override: в мобильном портрете радиус доски вдвое меньше */
@media (orientation: portrait) {
  html[data-fbc-page="trainer"] .board,
  html[data-fbc-page="blind"] .board {
    border-radius: calc(var(--board-corner-radius) / 2) !important;
  }
}

/* Бургер-меню в мобилке: только непрозрачный фон */
@media (max-width: 768px) {
  .site-header .nav-item--mega > .dropdown.panel-tasks .nav-tasks-tabs {
    display: none;
  }

  .site-header .nav-item--mega > .dropdown.panel-tasks .nav-tasks-panes {
    padding-top: 0;
  }

  .site-header .header-bar .nav-item .dropdown.panel-main-menu {
    background: color-mix(in srgb, var(--warm-card) 74%, #2a2622 26%) !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid color-mix(in srgb, var(--panel-border) 70%, #000 30%) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
    border-radius: 10px !important;
    padding: 0.32rem 0.3rem 0.34rem !important;
    max-width: min(90vw, 280px) !important;
  }

  .site-header .header-bar .nav-item .dropdown.panel-main-menu .menu-acc {
    gap: 0.22rem;
  }

  .site-header .header-bar .nav-item .dropdown.panel-main-menu .menu-acc__group {
    margin: 0;
    padding: 0;
  }

  .site-header .header-bar .nav-item .dropdown.panel-main-menu .menu-acc__leaf {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.25;
    color: color-mix(in srgb, #f0e3c9 86%, #ffffff 14%);
    letter-spacing: normal;
    transform: none;
    transform-origin: center;
    text-decoration: none;
    border-bottom: none;
    padding: 0.48rem 0.58rem;
    position: relative;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition:
      color 0.16s ease,
      background 0.16s ease,
      transform 0.16s ease;
  }

  .site-header .header-bar .nav-item .dropdown.panel-main-menu .menu-acc__leaf::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 42px;
    height: 1px;
    background: color-mix(in srgb, var(--panel-border) 72%, #cdb06f 28%);
    opacity: 0.7;
  }

  .site-header .header-bar .nav-item .dropdown.panel-main-menu .menu-acc__leaf:hover,
  .site-header .header-bar .nav-item .dropdown.panel-main-menu .menu-acc__leaf:focus-visible {
    color: var(--accent);
    background: color-mix(in srgb, var(--muted-fill) 58%, #fff 42%);
    transform: none;
  }
}

/* === Тренажёр: восстановление по CHANGED_FILES_LOG (2026-04-16) — #puzzleMainPanel, шапка, тач-ландшафт === */
html[data-fbc-page="trainer"] #puzzleMainPanel.side-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  flex: 1 1 auto;
  align-self: stretch;
  min-width: 0;
  /* cqi для сетки номеров — ширина колонки текста, а не max-content панели / полный vw. */
  container-type: inline-size;
  container-name: trainer-main-col;
}

/*
 * ЗиТ: левый край по обложке (absolute fallback).
 * Кегль сетки номеров: min(max,cqi) без vw; колонка с полом (--trainer-text-col-min), сначала сжимается доска.
 * Пропорциональная сетка 10×ch: ≥1021 или любой ландшафт ≤1020 (max-content панели); портрет+мышь ≤1020 — ch, панель по left/right доски.
 * 1fr + крупные кнопки: только тач в портрете ≤1020 (в ландшафте тач — те же ch, без коллапса).
 */
html[data-fbc-page="trainer"] #puzzleMainPanel .puzzle-task-panel,
html[data-fbc-page="trainer"] #puzzleMainPanel .chapter-jump-panel {
  left: var(--trainer-zit-panel-left);
  right: auto;
  box-sizing: border-box;
  overflow-x: hidden;
}

html[data-fbc-page="trainer"] #puzzleMainPanel .chapter-jump-panel {
  container-type: inline-size;
  container-name: trainer-zit-chapter;
  width: auto;
  max-width: var(--trainer-zit-viewport-max-w);
  /* База em для ссылок; масштаб строк — 100cqi в .puzzle-task-link, не vw. */
  font-size: 1rem;
  padding: 0.55rem 0.6rem;
}

html[data-fbc-page="trainer"] #puzzleMainPanel .chapter-jump-panel .puzzle-task-link {
  /* max(...): при cqi=0 (контейнер ещё без ширины) не обнулять кегль. */
  font-size: min(1em, max(0.82em, calc(100cqi / 28)));
  padding: 0.38em 0.5em;
}

html[data-fbc-page="trainer"] #puzzleMainPanel .puzzle-task-panel:not(.chapter-jump-panel) {
  /* normal: иначе 100cqi у сетки — ширина max-content панели, кегль не следует за колонкой. */
  container-type: normal;
  width: auto;
  max-width: var(--trainer-zit-viewport-max-w);
  padding: 0.55rem 0.6rem;
}

html[data-fbc-page="trainer"] #puzzleMainPanel .puzzle-task-panel:not(.chapter-jump-panel) .puzzle-task-grid {
  --puzzle-task-gap: 0.22em;
  /* max(...): иначе при max-content-панели cqi=0 → нулевой кегль и ch → ширина сетки 0. */
  font-size: min(
    var(--trainer-zit-num-font-max),
    max(var(--trainer-zit-num-font-min), calc(100cqi / var(--trainer-zit-num-cqi-div)))
  );
  gap: var(--puzzle-task-gap);
  grid-template-columns: repeat(10, minmax(0, 4.35ch));
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

html[data-fbc-page="trainer"] #puzzleMainPanel .puzzle-task-panel:not(.chapter-jump-panel) .puzzle-task-link {
  font-size: 1em;
  min-height: 2.05em;
  padding: 0.18em 0.08em;
  width: 100%;
  min-width: 0;
}

/* Портрет ≤1020: одна сетка для всех устройств (без pointer: coarse / fine). */
@media (max-width: 1020px) and (orientation: portrait) {
  html[data-fbc-page="trainer"] #puzzleMainPanel .puzzle-task-panel:not(.chapter-jump-panel) {
    container-type: normal;
  }

  html[data-fbc-page="trainer"] #puzzleMainPanel .puzzle-task-panel:not(.chapter-jump-panel) .puzzle-task-grid {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
    --puzzle-task-gap: 0.28em;
    gap: var(--puzzle-task-gap);
    font-size: min(
      calc(var(--trainer-zit-num-font-max) * 1.12),
      max(var(--trainer-zit-num-font-min), calc(100cqi / 48))
    );
  }

  html[data-fbc-page="trainer"] #puzzleMainPanel .puzzle-task-panel:not(.chapter-jump-panel) .puzzle-task-link {
    min-height: 2.42em;
    padding: 0.24em 0.1em;
  }
}

/* ≥1021: 10×ch, max-content панели (единый «браузерный» режим без отдельной мобильной горизонтали). */
@media (min-width: 1021px) {
  html[data-fbc-page="trainer"] #puzzleMainPanel .puzzle-task-panel:not(.chapter-jump-panel) {
    width: max-content;
    container-type: normal;
  }

  html[data-fbc-page="trainer"] #puzzleMainPanel .puzzle-task-panel:not(.chapter-jump-panel) .puzzle-task-grid {
    width: max-content;
    max-width: 100%;
    font-size: min(
      var(--trainer-zit-num-font-max),
      max(var(--trainer-zit-num-font-min), calc(100cqi / var(--trainer-zit-num-cqi-div)))
    );
    /* minmax(0.6em,…): положительный вклад в max-content (не minmax(0,…) + cqi→0). */
    grid-template-columns: repeat(10, minmax(0.6em, 4.35ch));
  }

  html[data-fbc-page="trainer"] #puzzleMainPanel .chapter-jump-panel {
    width: max-content;
    max-width: min(520px, var(--trainer-zit-viewport-max-w));
  }
}

/* Браузер, экран от 1020px: выпадающий список «Тема» (главы) — ниже порога min-content/cqi не схлопывать, шире и читабельнее. */
@media (min-width: 1020px) and (pointer: fine) {
  html[data-fbc-page="trainer"] #puzzleMainPanel .chapter-jump-panel {
    min-width: clamp(300px, 26vw, 460px);
    max-width: min(640px, var(--trainer-zit-viewport-max-w));
  }

  html[data-fbc-page="trainer"] #puzzleMainPanel .chapter-jump-panel .puzzle-task-link {
    font-size: 0.94rem;
    line-height: 1.42;
    padding: 0.42rem 0.65rem;
  }
}

html[data-fbc-page="trainer"] .right-column > #puzzleMainPanel.side-panel {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  /* overflow-x не задаём: иначе по правилам пар overflow-y становится не-visible и обрезаются
     выпадающие панели «номера задач» / «тема» под .puzzle-header-body. Горизонталь — у преамбулы/статуса. */
}

html[data-fbc-page="trainer"] #puzzleMainPanel > .puzzle-header {
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  /* Выровнять «тему» и блок мета с левым краем колонки (без лишнего padding шапки). */
  padding-left: 0;
}

html[data-fbc-page="trainer"] #puzzleMainPanel > #preamble,
html[data-fbc-page="trainer"] #puzzleMainPanel > #status {
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

html[data-fbc-page="trainer"] #puzzleMainPanel > #preamble,
html[data-fbc-page="trainer"] #puzzleMainPanel > #status {
  overflow-x: hidden;
}

html[data-fbc-page="trainer"] #puzzleMainPanel #preamble.preamble-structured .preamble-messa-turn,
html[data-fbc-page="trainer"] #puzzleMainPanel #preamble.preamble-structured .preamble-messa-body {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

html[data-fbc-page="trainer"] #puzzleMainPanel .puzzle-header,
html[data-fbc-page="trainer"] #puzzleMainPanel .meta {
  min-width: 0;
  max-width: 100%;
}

html[data-fbc-page="trainer"] .layout .right-column > #puzzleMainPanel > .puzzle-header {
  min-height: 0;
  overflow: visible;
}

/* Обложка + мета: длинные строки не раздувают шапку выше миниатюры. */
html[data-fbc-page="trainer"] #puzzleMainPanel .puzzle-header-bookmeta .meta {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

html[data-fbc-page="trainer"] #puzzleMainPanel .puzzle-header-bookmeta .meta strong {
  font-weight: 600;
}

html[data-fbc-page="trainer"] #puzzleMainPanel .meta-book-progress {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

html[data-fbc-page="trainer"] #puzzleMainPanel .puzzle-header-secondary .chapter-tag-stack {
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
}

html[data-fbc-page="trainer"] #puzzleMainPanel .puzzle-header-secondary .chapter-tag {
  padding: 0.12rem 0;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 0.72rem;
  line-height: 1.22;
}

html[data-fbc-page="trainer"]
  .right-column
  > .side-panel:not(.side-actions):not(#adminEditorPanel)
  > .puzzle-header {
  gap: 0.36rem;
}

@media (orientation: landscape), (min-width: 1021px) {
  html[data-fbc-page="trainer"] .layout .right-column > #puzzleMainPanel > .puzzle-header {
    grid-template-columns: auto 1fr;
    align-items: start;
    column-gap: 0.55rem;
  }

  html[data-fbc-page="trainer"] .layout .right-column > #puzzleMainPanel > .puzzle-header > .book-thumb-btn {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
  }

  html[data-fbc-page="trainer"] .layout .right-column > #puzzleMainPanel > .puzzle-header > .puzzle-header-body {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    max-height: var(--trainer-book-thumb-h);
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    padding-right: 5.35rem;
    gap: 0.14rem;
  }

  html[data-fbc-page="trainer"] #puzzleMainPanel .puzzle-header-bookmeta {
    display: flex;
    flex-direction: column;
    gap: 0.04rem;
    line-height: 1.2;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  html[data-fbc-page="trainer"] #puzzleMainPanel .puzzle-header-bookmeta .meta {
    font-size: 0.8rem;
    line-height: 1.2;
  }

  html[data-fbc-page="trainer"] #puzzleMainPanel .puzzle-header-bookmeta .meta-book-authors + br {
    display: none;
  }

  html[data-fbc-page="trainer"] #puzzleMainPanel .puzzle-header-bookmeta .meta-book-authors {
    display: block;
    margin-bottom: 0.06rem;
  }

  html[data-fbc-page="trainer"] #puzzleMainPanel #bookSolveProgress {
    margin-top: 0;
    font-size: 0.7rem;
    line-height: 1.25;
    flex-shrink: 0;
  }

  html[data-fbc-page="trainer"] #puzzleMainPanel .puzzle-header-secondary {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.06rem;
    margin-top: 0;
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
  }

  html[data-fbc-page="trainer"] #puzzleMainPanel .puzzle-header-secondary .puzzle-task-line {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    margin-top: 0;
    width: 100%;
    min-width: 0;
  }

  html[data-fbc-page="trainer"] #puzzleMainPanel .puzzle-header-secondary .meta-task-trigger--icon {
    font-size: 0.72rem;
    padding: 0.06rem 0.32rem;
  }
}

@media (orientation: landscape) and (min-width: 1024px) and (pointer: fine) {
  html[data-fbc-page="trainer"] .puzzle-header #chapterTag,
  html[data-fbc-page="trainer"] .puzzle-header .chapter-tag {
    font-size: 0.72rem;
  }

  html[data-fbc-page="trainer"] .puzzle-header .meta-task-trigger--icon {
    font-size: 0.8rem;
  }
}

/* До 720: ширина доски и панели кнопок от контейнера, а не от 100vw,
   чтобы вертикальный скроллбар не «съедал» правый край (scrollbar-gutter: stable на html — глобально). */
@media (max-width: 720px) {
  html[data-fbc-page="trainer"] .board-wrap,
  html[data-fbc-page="blind"] .board-wrap,
  html[data-fbc-page="trainer"] .right-column > .side-actions,
  html[data-fbc-page="blind"] .right-column > .side-actions {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }
}

/* === BEGIN: menu icons v1 (account / settings) + рейтинг, бургер-тексты.
   Значки на десктопе; в бургере (≤768px) — «Настройка» и «Аккаунт» словами.
   Рейтинг: монета + целое вниз.
   Откат: убрать data-fbc-menu-icons="v1" с <html> или удалить блок BEGIN/END.
   ============================================================ */
.menu-acc__leaf-burger-text {
  display: none;
}

.menu-acc__group--nav-rating {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.menu-acc__rating-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.1rem 0.38rem 0.1rem 0.28rem;
  border-radius: 999px;
  min-height: 1.35rem;
  box-sizing: border-box;
  color: var(--warm-ink, #ececec);
}

.menu-acc__coin-icon {
  display: block;
  width: 1.05rem;
  height: 1.05rem;
  object-fit: contain;
  flex-shrink: 0;
}

.menu-acc__rating-digits {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1;
  min-width: 1.5ch;
}

@media (min-width: 769px) {
  .panel-main-menu .menu-acc__leaf-burger-text {
    display: none !important;
  }
}

@media (max-width: 768px) {
  html[data-fbc-menu-icons="v1"] .site-header .header-bar .nav-item .dropdown.panel-main-menu .menu-acc__leaf--settings-icon::before,
  html[data-fbc-menu-icons="v1"] .site-header .header-bar .nav-item .dropdown.panel-main-menu .menu-acc__leaf--account-icon::before {
    display: none !important;
  }

  .site-header .header-bar .nav-item .dropdown.panel-main-menu .menu-acc__leaf-burger-text {
    display: inline !important;
  }

  html[data-fbc-menu-icons="v1"] .site-header .header-bar .nav-item .dropdown.panel-main-menu .menu-acc__leaf--settings-icon,
  html[data-fbc-menu-icons="v1"] .site-header .header-bar .nav-item .dropdown.panel-main-menu .menu-acc__leaf--account-icon {
    justify-content: flex-end;
    gap: 0;
  }
}

html[data-fbc-menu-icons="v1"] .menu-acc__leaf--account-icon,
html[data-fbc-menu-icons="v1"] .menu-acc__leaf--settings-icon {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 1.4rem;
  gap: 0.4rem;
  color: var(--warm-ink);
}

html[data-fbc-menu-icons="v1"] .menu-acc__leaf--account-icon::before,
html[data-fbc-menu-icons="v1"] .menu-acc__leaf--settings-icon::before {
  content: "";
  display: inline-block;
  width: 1.15rem;
  height: 1.15rem;
  background-color: currentColor;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  transition: background-color 0.16s ease, transform 0.16s ease;
}

html[data-fbc-menu-icons="v1"] .menu-acc__leaf--account-icon::before {
  -webkit-mask-image: url("/static/icons/menu/account.svg?v=3");
          mask-image: url("/static/icons/menu/account.svg?v=3");
}

html[data-fbc-menu-icons="v1"] .menu-acc__leaf--settings-icon::before {
  -webkit-mask-image: url("/static/icons/menu/settings.png?v=2");
          mask-image: url("/static/icons/menu/settings.png?v=2");
}

html[data-fbc-menu-icons="v1"] .menu-acc__leaf--account-icon:hover::before,
html[data-fbc-menu-icons="v1"] .menu-acc__leaf--account-icon:focus-visible::before,
html[data-fbc-menu-icons="v1"] .menu-acc__leaf--settings-icon:hover::before,
html[data-fbc-menu-icons="v1"] .menu-acc__leaf--settings-icon:focus-visible::before {
  background-color: var(--accent);
  transform: scale(1.06);
}

@media (max-width: 768px) {
  html[data-fbc-menu-icons="v1"] .site-header .header-bar .nav-item .dropdown.panel-main-menu .menu-acc__leaf--account-icon,
  html[data-fbc-menu-icons="v1"] .site-header .header-bar .nav-item .dropdown.panel-main-menu .menu-acc__leaf--settings-icon {
    justify-content: flex-end;
    min-height: 1.5rem;
  }

  html[data-fbc-menu-icons="v1"] .site-header .header-bar .nav-item .dropdown.panel-main-menu .menu-acc__leaf--account-icon::before,
  html[data-fbc-menu-icons="v1"] .site-header .header-bar .nav-item .dropdown.panel-main-menu .menu-acc__leaf--settings-icon::before {
    width: 1.25rem;
    height: 1.25rem;
  }
}
/* === END: menu icons v1 === */

/* === BEGIN: blind-card icons v1 (welcome page).
   Подменяем 6 значков в раскрытой плитке «Слепые шахматы» на PNG-кропы
   из набора «MODERN CHESS ICONS | UI FLAT DESIGN SET» (pixel-perfect, без
   перерисовки). В каждой карточке в HTML лежат ДВЕ иконки рядом:
     .app-landing-blind-card__icon--legacy — старая (SVG из icons/blind/),
     .app-landing-blind-card__icon--modern — новая (PNG из icons/blind/set-modern/).
   По умолчанию модерновые скрыты — т.е. без флага всё работает как раньше.
   При html[data-fbc-blind-icons="v1"] — наоборот: легаси скрыты, модерновые видны.

   Под флагом дополнительно:
     • снимаем круглую жёлтую рамку у .app-landing-blind-card__avatar
       (новые значки шире, чем высокие — ~2:1, в круг 78×78 они смотрелись
       мелкими и кривыми);
     • выравниваем сетку: 3 колонки фиксированной ширины, единая высота
       строк, ровные отступы — карточки выглядят одной серией.

   Откат:
     1) Убрать атрибут data-fbc-blind-icons="v1" с <html> в welcome.html
        (карточки моментально вернутся к старым SVG в круглых аватарках).
     2) Полный откат — снести этот блок целиком + убрать из HTML вторые <img>
        с классом --modern. Папка icons/blind/set-modern/ при этом не нужна.
   ============================================================ */
.app-landing-blind-card__icon--modern {
  display: none;
}

html[data-fbc-blind-icons="v1"] .app-landing-blind-card__icon--legacy {
  display: none;
}

/* Адаптивная плотная сетка: на широком экране в один ряд, на узком — с переносом. */
html[data-fbc-blind-icons="v1"] .app-landing-blind-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  grid-auto-rows: 1fr;
  gap: 0.08rem;
  align-items: stretch;
  justify-items: stretch;
}

/* Более плотные, но визуально крупные карточки для быстрой навигации. */
html[data-fbc-blind-icons="v1"] .app-landing-blind-card {
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: center;
  width: 100%;
  min-height: 96px;
  padding: 0.16rem 0.03rem 0.12rem;
  border-radius: 10px;
  border: none;
  background: transparent;
  box-shadow: none;
  transition: transform 0.16s ease;
}

html[data-fbc-blind-icons="v1"] .app-landing-blind-card:hover {
  transform: translateY(-1px);
}

/* В выпадашке оставляем только сами modern-иконки, без подложек-контейнеров. */
html[data-fbc-blind-icons="v1"] .app-landing-blind-card .app-landing-blind-card__avatar,
html[data-fbc-blind-icons="v1"] .app-landing-blind-card .app-landing-blind-card__avatar--puzzle {
  width: auto;
  max-width: none;
  height: auto;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

html[data-fbc-blind-icons="v1"] .app-landing-blind-card__icon--modern {
  display: block;
  width: 66px;
  height: 66px;
  object-fit: contain;
  object-position: center;
  filter: none;
  transition: transform 0.16s ease;
}

html[data-fbc-blind-icons="v1"] .app-landing-blind-card:hover .app-landing-blind-card__icon--modern {
  transform: scale(1.02);
}

/* Подпись чуть крупнее и спокойнее — чтобы держала строй. */
html[data-fbc-blind-icons="v1"] .app-landing-blind-card .app-landing-blind-card__label {
  margin-top: 0.02rem;
  font-size: 0.64rem;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0;
  color: color-mix(in srgb, var(--warm-ink, #f5f1eb) 78%, #fff 22%);
  text-align: center;
  min-height: 1.12rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 700px) {
  html[data-fbc-blind-icons="v1"] .app-landing-blind-grid {
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  }
}

@media (max-width: 480px) {
  html[data-fbc-blind-icons="v1"] .app-landing-blind-grid {
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: 0.12rem;
  }

  html[data-fbc-blind-icons="v1"] .app-landing-blind-card__icon--modern {
    width: 62px;
    height: 62px;
  }
}
/* === END: blind-card icons v1 === */

/* Страница /blind/hub: сетка 4×2 на всю ширину колонки, крупные иконки; в портрете — меньше колонок. */
html[data-fbc-page="blind-hub"] .static-page {
  max-width: min(56rem, 100%);
  width: 100%;
  box-sizing: border-box;
}

html[data-fbc-page="blind-hub"][data-fbc-blind-icons="v1"] .blind-hub-grid.app-landing-blind-grid {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.45rem, 1.2vw, 0.85rem);
  align-items: start;
}

html[data-fbc-page="blind-hub"][data-fbc-blind-icons="v1"] .blind-hub-grid .app-landing-blind-card {
  min-height: 0;
  min-width: 0;
  width: 100%;
  padding: 0.28rem 0.1rem 0.18rem;
}

html[data-fbc-page="blind-hub"][data-fbc-blind-icons="v1"] .blind-hub-grid .app-landing-blind-card__avatar,
html[data-fbc-page="blind-hub"][data-fbc-blind-icons="v1"] .blind-hub-grid .app-landing-blind-card .app-landing-blind-card__avatar--puzzle {
  width: 100%;
  max-width: 100%;
}

html[data-fbc-page="blind-hub"][data-fbc-blind-icons="v1"] .blind-hub-grid .app-landing-blind-card__icon--modern {
  display: block;
  width: min(100%, clamp(72px, 16vw, 128px));
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  margin-inline: auto;
}

html[data-fbc-page="blind-hub"][data-fbc-blind-icons="v1"] .blind-hub-grid .app-landing-blind-card .app-landing-blind-card__label {
  font-size: clamp(0.62rem, 1.05vw, 0.82rem);
  line-height: 1.15;
  padding-inline: 0.08rem;
  hyphens: none;
}

@media (max-width: 640px) {
  html[data-fbc-page="blind-hub"][data-fbc-blind-icons="v1"] .blind-hub-grid.app-landing-blind-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
  }

  html[data-fbc-page="blind-hub"][data-fbc-blind-icons="v1"] .blind-hub-grid .app-landing-blind-card__icon--modern {
    width: min(100%, clamp(64px, 22vw, 108px));
  }
}

@media (max-width: 420px) {
  html[data-fbc-page="blind-hub"][data-fbc-blind-icons="v1"] .blind-hub-grid.app-landing-blind-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }

  html[data-fbc-page="blind-hub"][data-fbc-blind-icons="v1"] .blind-hub-grid .app-landing-blind-card__icon--modern {
    width: min(100%, clamp(72px, 38vw, 120px));
  }
}

/* === Account page refresh (profile / infographic / rating log) === */
html[data-fbc-page="account"] .account-infographic {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  container-type: inline-size;
  container-name: acig;
}

@media (orientation: landscape) {
  html[data-fbc-page="account"] .account-infographic {
    zoom: 1;
    container-type: normal;
  }
}

@media (max-width: 640px) and (orientation: portrait) {
  html[data-fbc-page="account"] .account-infographic {
    zoom: clamp(0.5, 100vw / 480, 1);
  }
}
html[data-fbc-page="account"] .account-member-since {
  margin: 0 0 0.65rem;
  font-size: 0.86rem;
  color: color-mix(in srgb, var(--warm-muted) 88%, #c9b48c 12%);
}

html[data-fbc-page="account"] .account-guest-hint {
  margin: 0 0 1.1rem;
  font-size: 0.88rem;
  color: var(--warm-muted);
  line-height: 1.45;
}

html[data-fbc-page="account"] .account-profile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 1.1rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--panel-border) 70%, transparent);
}

html[data-fbc-page="account"] .account-profile-head__left {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.65rem;
  min-width: 0;
}

html[data-fbc-page="account"] .account-profile-line-name {
  font-size: 1.02rem;
  font-weight: 700;
  color: #f0e6d8;
  letter-spacing: 0.01em;
}

html[data-fbc-page="account"] .account-admin-badge {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #c9a227 55%, var(--panel-border) 45%);
  color: #e8d49a;
}

html[data-fbc-page="account"] .account-logout-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  padding: 0.28rem 0.55rem 0.28rem 0.42rem;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--panel-border) 75%, #888 25%);
  background: color-mix(in srgb, var(--warm-card) 88%, #1a1816 12%);
  color: color-mix(in srgb, var(--warm-muted) 55%, #e8ddd0 45%);
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

html[data-fbc-page="account"] .account-logout-btn:hover,
html[data-fbc-page="account"] .account-logout-btn:focus-visible {
  color: #f5efe6;
  border-color: color-mix(in srgb, var(--panel-border) 50%, #c9a227 50%);
  background: color-mix(in srgb, var(--warm-card) 70%, #2a2622 30%);
  outline: none;
}

html[data-fbc-page="account"] .account-logout-btn__icon {
  width: 1.05rem;
  height: 1.05rem;
  opacity: 0.92;
}

html[data-fbc-page="account"] .account-section-title {
  font-size: 1rem;
  margin: 1.35rem 0 0.55rem;
}

html[data-fbc-page="account"] .account-ig-muted {
  margin: 0;
  font-size: 0.82rem;
  color: var(--warm-muted);
}

html[data-fbc-page="account"] .account-ig-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
  gap: 0.85rem;
  margin-bottom: 0.25rem;
  min-width: 0;
}

@media (max-width: 820px) and (orientation: portrait) {
  html[data-fbc-page="account"] .account-ig-grid {
    grid-template-columns: 1fr;
  }
}

@media (orientation: landscape) {
  html[data-fbc-page="account"] .account-ig-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
  }
}

html[data-fbc-page="account"] .account-ig-panel {
  padding: 0.85rem 0.95rem;
  border-radius: var(--radius);
  background: var(--warm-card);
  border: 1px solid var(--panel-border);
  min-width: 0;
}

html[data-fbc-page="account"] .account-ig-panel__title {
  margin: 0 0 0.65rem;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--warm-muted) 80%, #d4c4a8 20%);
}

html[data-fbc-page="account"] .account-ig-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
  margin-bottom: 0.45rem;
}

html[data-fbc-page="account"] .account-ig-kpi-row--2 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 0.65rem;
}

@media (max-width: 520px) {
  html[data-fbc-page="account"] .account-ig-kpi-row,
  html[data-fbc-page="account"] .account-ig-kpi-row--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

html[data-fbc-page="account"] .account-ig-kpi {
  padding: 0.42rem 0.45rem;
  border-radius: 10px;
  background: color-mix(in srgb, #1e1c1a 55%, var(--warm-card) 45%);
  border: 1px solid color-mix(in srgb, var(--panel-border) 80%, transparent);
}

html[data-fbc-page="account"] .account-ig-kpi span {
  display: block;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--warm-muted);
  margin-bottom: 0.12rem;
}

html[data-fbc-page="account"] .account-ig-kpi strong {
  font-size: 1rem;
  font-weight: 800;
  color: #f3eadc;
}

html[data-fbc-page="account"] .account-ig-rating-card {
  margin: 0.35rem 0 0.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  background: linear-gradient(125deg, rgba(56, 52, 48, 0.95), rgba(28, 26, 24, 0.98));
  border: 1px solid color-mix(in srgb, var(--panel-border) 65%, #8f7a4a 35%);
}

html[data-fbc-page="account"] .account-ig-rating-card__head {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--warm-muted);
  margin-bottom: 0.15rem;
}

html[data-fbc-page="account"] .account-ig-rating-card__big {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #f8efd8;
}

html[data-fbc-page="account"] .account-ig-rating-card__split {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--warm-muted);
}

html[data-fbc-page="account"] .account-ig-rating-card__split em {
  font-style: normal;
  font-weight: 700;
  color: #e8dcc8;
}

html[data-fbc-page="account"] .account-ig-pos {
  color: #629924 !important;
}

html[data-fbc-page="account"] .account-ig-neg {
  color: #c33 !important;
}

html[data-fbc-page="account"] .account-ig-tier__title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--warm-muted);
  margin-bottom: 0.28rem;
}

html[data-fbc-page="account"] .account-ig-tier__bar {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: #2a2622;
  margin-bottom: 0.35rem;
}

html[data-fbc-page="account"] .account-ig-tier__bar > .account-ig-tier__seg {
  display: block;
  flex-shrink: 0;
  height: 100%;
  font-style: normal;
  margin: 0;
  padding: 0;
  border: 0;
}

html[data-fbc-page="account"] .account-ig-tier__1 {
  background: linear-gradient(90deg, #4a8f2e, #629924);
}

html[data-fbc-page="account"] .account-ig-tier__2 {
  background: linear-gradient(90deg, #b8892e, #d4a84b);
}

html[data-fbc-page="account"] .account-ig-tier__3 {
  background: linear-gradient(90deg, #7a3030, #a82e2e);
}

html[data-fbc-page="account"] .account-ig-tier__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  font-size: 0.74rem;
  color: var(--warm-muted);
}

html[data-fbc-page="account"] .account-ig-tier__legend .dot {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  margin-right: 0.2rem;
  vertical-align: -0.08rem;
}

html[data-fbc-page="account"] .account-ig-tier__legend .dot--1 {
  background: #629924;
}

html[data-fbc-page="account"] .account-ig-tier__legend .dot--2 {
  background: #d4a84b;
}

html[data-fbc-page="account"] .account-ig-tier__legend .dot--3 {
  background: #a82e2e;
}

html[data-fbc-page="account"] .account-ig-books__title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--warm-muted);
  margin: 0.5rem 0 0.35rem;
}

html[data-fbc-page="account"] .account-ig-book-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) auto;
  align-items: center;
  gap: 0.35rem 0.5rem;
  font-size: 0.78rem;
  margin-bottom: 0.28rem;
}

html[data-fbc-page="account"] .account-ig-book-row__name {
  color: color-mix(in srgb, var(--warm-muted) 35%, #e4d8c4 65%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-fbc-page="account"] .account-ig-book-row__bar {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: #2a2622;
  overflow: hidden;
}

html[data-fbc-page="account"] .account-ig-book-row__bar > .account-ig-book-row__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #3d5a28, #629924);
  max-width: 100%;
}

html[data-fbc-page="account"] .account-ig-book-row__n {
  font-weight: 700;
  color: #eee3d0;
  font-variant-numeric: tabular-nums;
}

html[data-fbc-page="account"] .account-ig-blind-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 112px), 1fr));
  gap: 0.45rem;
}

@media (orientation: landscape) {
  html[data-fbc-page="account"] .account-ig-blind-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}

html[data-fbc-page="account"] .account-ig-blind-card {
  padding: 0.5rem 0.55rem;
  border-radius: 10px;
  background: color-mix(in srgb, #1e1c1a 50%, var(--warm-card) 50%);
  border: 1px solid color-mix(in srgb, var(--panel-border) 85%, transparent);
  font-size: 0.74rem;
}

html[data-fbc-page="account"] .account-ig-blind-card__title {
  font-weight: 800;
  font-size: 0.78rem;
  margin-bottom: 0.35rem;
  color: #f2e8d8;
}

html[data-fbc-page="account"] .account-ig-blind-card__row {
  display: flex;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.12rem;
  color: var(--warm-muted);
}

html[data-fbc-page="account"] .account-ig-blind-card__row strong {
  color: #ebe1cf;
  font-variant-numeric: tabular-nums;
}

html[data-fbc-page="account"] .account-ig-blind-card__recent {
  margin-top: 0.35rem;
  font-size: 0.66rem;
  color: color-mix(in srgb, var(--warm-muted) 90%, #bda06c 10%);
  line-height: 1.35;
  word-break: break-word;
}

@container acig (max-width: 420px) {
  .account-ig-panel {
    padding: 0.55rem 0.58rem;
  }

  .account-ig-blind-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.32rem;
  }

  .account-ig-blind-card {
    padding: 0.4rem 0.42rem;
    font-size: 0.68rem;
  }

  .account-ig-blind-card__title {
    font-size: 0.72rem;
  }

  .account-ig-rating-card {
    padding: 0.52rem 0.58rem;
  }

  .account-ig-rating-card__big {
    font-size: 1.38rem;
  }

  .account-ig-kpi strong {
    font-size: 0.92rem;
  }

  .account-ig-kpi span {
    font-size: 0.56rem;
    letter-spacing: 0.03em;
  }

  .account-ig-book-row {
    font-size: 0.72rem;
    gap: 0.28rem 0.38rem;
  }

  .account-ig-tier__bar {
    height: 8px;
  }
}

@container acig (max-width: 300px) {
  .account-ig-kpi-row,
  .account-ig-kpi-row--2 {
    gap: 0.3rem;
  }

  .account-ig-blind-card__recent {
    font-size: 0.6rem;
  }
}

@media (max-width: 480px) and (orientation: portrait) {
  html[data-fbc-page="account"] .account-rating-summary__value {
    font-size: 1.08rem;
  }

  html[data-fbc-page="account"] .account-rating-summary__label {
    font-size: 0.65rem;
  }

  html[data-fbc-page="account"] .account-rating-row {
    padding: 0.38rem 0.45rem;
    gap: 0.42rem;
  }

  html[data-fbc-page="account"] .account-rating-row__title {
    font-size: 0.78rem;
  }

  html[data-fbc-page="account"] .account-rating-row__meta {
    font-size: 0.64rem;
  }

  html[data-fbc-page="account"] .account-rating-row__num {
    font-size: 0.85rem;
  }

  html[data-fbc-page="account"] .account-rating-row__delta {
    min-width: 3.5rem;
  }
}

html[data-fbc-page="account"] .account-rating-rules {
  margin-bottom: 0.65rem;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--warm-card) 94%, #181614 6%);
}

html[data-fbc-page="account"] .account-rating-rules__summary {
  cursor: pointer;
  padding: 0.5rem 0.65rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--warm-text);
  list-style: none;
}

html[data-fbc-page="account"] .account-rating-rules__summary::-webkit-details-marker {
  display: none;
}

html[data-fbc-page="account"] .account-rating-rules__summary::before {
  content: "▸ ";
  color: var(--warm-muted);
}

html[data-fbc-page="account"] .account-rating-rules[open] .account-rating-rules__summary::before {
  content: "▾ ";
}

html[data-fbc-page="account"] .account-rating-rules__body {
  padding: 0 0.65rem 0.65rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--warm-text);
}

html[data-fbc-page="account"] .account-rating-rules__lead {
  margin: 0 0 0.55rem;
  color: var(--warm-muted);
}

html[data-fbc-page="account"] .account-rating-rules__block {
  margin-bottom: 0.65rem;
}

html[data-fbc-page="account"] .account-rating-rules__h {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--warm-muted);
}

html[data-fbc-page="account"] .account-rating-rules__list {
  margin: 0.25rem 0 0.35rem;
  padding-left: 1.1rem;
}

html[data-fbc-page="account"] .account-rating-rules__list li {
  margin-bottom: 0.2rem;
}

html[data-fbc-page="account"] .account-rating-rules__note {
  margin: 0.25rem 0 0;
  font-size: 0.76rem;
  color: var(--warm-muted);
}

html[data-fbc-page="account"] .account-rating-rules__note--foot {
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--panel-border);
}

html[data-fbc-page="account"] .account-rating-rules__table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.35rem 0 0.45rem;
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
}

html[data-fbc-page="account"] .account-rating-rules__table th,
html[data-fbc-page="account"] .account-rating-rules__table td {
  padding: 0.25rem 0.35rem;
  border-bottom: 1px solid var(--panel-border);
  text-align: left;
}

html[data-fbc-page="account"] .account-rating-rules__table th {
  color: var(--warm-muted);
  font-weight: 700;
}

html[data-fbc-page="account"] .account-rating-summary {
  margin-bottom: 0.65rem;
}

html[data-fbc-page="account"] .account-rating-summary__band {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  background: color-mix(in srgb, var(--warm-card) 92%, #1c1a18 8%);
}

html[data-fbc-page="account"] .account-rating-summary__band--up {
  border-color: color-mix(in srgb, var(--panel-border) 40%, #3d6a28 60%);
  box-shadow: inset 0 0 0 1px rgba(98, 153, 36, 0.12);
}

html[data-fbc-page="account"] .account-rating-summary__band--down {
  border-color: color-mix(in srgb, var(--panel-border) 40%, #6a2828 60%);
  box-shadow: inset 0 0 0 1px rgba(200, 50, 50, 0.1);
}

html[data-fbc-page="account"] .account-rating-arrow {
  font-size: 1rem;
  line-height: 1;
  font-weight: 800;
}

html[data-fbc-page="account"] .account-rating-summary__band--up .account-rating-arrow--sum {
  color: #629924;
}

html[data-fbc-page="account"] .account-rating-summary__band--down .account-rating-arrow--sum {
  color: #c33;
}

html[data-fbc-page="account"] .account-rating-summary__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--warm-muted);
}

html[data-fbc-page="account"] .account-rating-summary__value {
  font-size: 1.25rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

html[data-fbc-page="account"] .account-rating-summary__hint {
  margin-top: 0.2rem;
  font-size: 0.78rem;
  color: var(--warm-muted);
  font-variant-numeric: tabular-nums;
}

html[data-fbc-page="account"] .account-rating-summary__band--up .account-rating-summary__value {
  color: #629924;
}

html[data-fbc-page="account"] .account-rating-summary__band--down .account-rating-summary__value {
  color: #c33;
}

html[data-fbc-page="account"] .account-rating-log {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

html[data-fbc-page="account"] .account-rating-row {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.45rem 0.55rem;
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  background: color-mix(in srgb, var(--warm-card) 94%, #181614 6%);
}

html[data-fbc-page="account"] .account-rating-row--up {
  border-color: color-mix(in srgb, var(--panel-border) 55%, #355a22 45%);
}

html[data-fbc-page="account"] .account-rating-row--down {
  border-color: color-mix(in srgb, var(--panel-border) 55%, #5a2222 45%);
}

html[data-fbc-page="account"] .account-rating-row__delta {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
  min-width: 4.2rem;
}

html[data-fbc-page="account"] .account-rating-row--up .account-rating-arrow {
  color: #629924;
}

html[data-fbc-page="account"] .account-rating-row--down .account-rating-arrow {
  color: #c33;
}

html[data-fbc-page="account"] .account-rating-row__num {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
}

html[data-fbc-page="account"] .account-rating-row--up .account-rating-row__num {
  color: #629924;
}

html[data-fbc-page="account"] .account-rating-row--down .account-rating-row__num {
  color: #c33;
}

html[data-fbc-page="account"] .account-rating-row__title {
  font-size: 0.84rem;
  color: #eee6d8;
  line-height: 1.35;
}

html[data-fbc-page="account"] .account-rating-row__meta {
  font-size: 0.7rem;
  color: var(--warm-muted);
  margin-top: 0.12rem;
}

html[data-fbc-page="account"] #profileBio {
  resize: vertical;
  min-height: 4.5rem;
}