/* ============================================================
   Визуальный слой поверх style.css: шапка, анимации, карта-тропа
   уроков, тренер в уроке, отклик на ответы, мобильная раскладка.
   Все движения выключаются при prefers-reduced-motion.
   ============================================================ */

[hidden] { display: none !important; }

/* конь для логотипа и водяного знака — та же SVG-фигура, что на доске (cburnett, CC BY-SA 3.0),
   а не символ шрифта: шрифт с шахматными символами весит 370 КБ ради одного знака */
:root { --knight-svg: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMiAxMGMxMC41IDEgMTYuNSA4IDE2IDI5SDE1YzAtOSAxMC02LjUgOC0yMSIgZmlsbD0iIzAwMCIvPjxwYXRoIGQ9Ik0yNCAxOGMuMzggMi45MS01LjU1IDcuMzctOCA5LTMgMi0yLjgyIDQuMzQtNSA0LTEuMDQyLS45NCAxLjQxLTMuMDQgMC0zLTEgMCAuMTkgMS4yMy0xIDItMSAwLTQuMDAzIDEtNC00IDAtMiA2LTEyIDYtMTJzMS44OS0xLjkgMi0zLjVjLS43My0uOTk0LS41LTItLjUtMyAxLTEgMyAyLjUgMyAyLjVoMnMuNzgtMS45OTIgMi41LTNjMSAwIDEgMyAxIDMiIGZpbGw9IiMwMDAiLz48cGF0aCBkPSJNOS41IDI1LjVhLjUuNSAwIDEgMS0xIDAgLjUuNSAwIDEgMSAxIDB6bTUuNDMzLTkuNzVhLjUgMS41IDMwIDEgMS0uODY2LS41LjUgMS41IDMwIDEgMSAuODY2LjV6IiBmaWxsPSIjZWNlY2VjIiBzdHJva2U9IiNlY2VjZWMiLz48cGF0aCBkPSJNMjQuNTUgMTAuNGwtLjQ1IDEuNDUuNS4xNWMzLjE1IDEgNS42NSAyLjQ5IDcuOSA2Ljc1UzM1Ljc1IDI5LjA2IDM1LjI1IDM5bC0uMDUuNWgyLjI1bC4wNS0uNWMuNS0xMC4wNi0uODgtMTYuODUtMy4yNS0yMS4zNC0yLjM3LTQuNDktNS43OS02LjY0LTkuMTktNy4xNmwtLjUxLS4xeiIgZmlsbD0iI2VjZWNlYyIgc3Ryb2tlPSJub25lIi8+PC9nPjwvc3ZnPg=='); }

/* ---------- шапка: липкая панель, навигация «таблетками» ---------- */
header {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "title badge" "nav nav";
  align-items: center; gap: 8px 18px;
  position: sticky; top: 0; z-index: 30;
  margin: 0 -16px 22px; padding: 10px 16px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--line);
}
.wrap { padding-top: 0; }
header h1 { grid-area: title; font-size: 24px; white-space: nowrap; }
header .main-nav {
  grid-area: nav; justify-self: stretch; display: flex; flex-wrap: nowrap; gap: 4px; margin: 0 -4px;
  overflow-x: auto; scrollbar-width: none; max-width: 100%;
}
header .main-nav::-webkit-scrollbar { display: none; }
header .main-nav a {
  flex: none; padding: 6px 12px; border-radius: 999px; font-size: 14px; font-weight: 700;
  color: var(--text-2); text-decoration: none; border: 2px solid transparent; transition: background .15s, color .15s;
}
header .main-nav a:hover { color: var(--text); background: var(--card-2); }
header .main-nav a[aria-current="page"] {
  color: #2B2B36; background: var(--highlight); border-color: var(--border); text-decoration: none;
}
header .me-badge { grid-area: badge; justify-self: end; }

/* ---------- анимации ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--highlight) 70%, transparent); } 100% { box-shadow: 0 0 0 18px transparent; } }
@keyframes shake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes glow { 0% { box-shadow: 3px 3px 0 var(--shadow), 0 0 0 0 var(--ok); } 50% { box-shadow: 3px 3px 0 var(--shadow), 0 0 0 8px color-mix(in srgb, var(--ok) 45%, transparent); } 100% { box-shadow: 3px 3px 0 var(--shadow), 0 0 0 0 transparent; } }
@keyframes drawPath { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }

.wrap > .layout, .wrap > .today-grid, .wrap > #index, .wrap > .mode, .wrap > .panel { animation: fadeUp .35s ease-out both; }
.board.win-glow { animation: glow .9s ease-out; }
button:focus-visible, a:focus-visible, .map-node-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- отклик на ответ под доской ---------- */
/* обычный текст с <b> внутри — не flex, иначе жирные куски переносятся отдельными «колонками» */
.board-note { display: block; min-height: 28px; }
.board-note.ok, .board-note.bad {
  padding: 8px 12px; border-radius: var(--radius-sm); border: 2px solid currentColor; animation: pop .25s ease-out;
}
.board-note.ok { background: color-mix(in srgb, var(--ok) 12%, var(--card)); }
.board-note.bad { background: color-mix(in srgb, var(--blunder) 10%, var(--card)); animation: shake .35s ease-out; }
.board-note.ok::before { content: "✓"; font-weight: 800; margin-right: 8px; }
.board-note.bad::before { content: "✗"; font-weight: 800; margin-right: 8px; }

/* ---------- урок: тренер и прогресс ---------- */
.lesson-panel { display: flex; flex-direction: column; gap: 10px; }
.lesson-top { display: flex; align-items: center; gap: 10px; }
.close-btn {
  flex: none; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--border); display: grid; place-items: center;
  color: var(--text); text-decoration: none; font-size: 20px; font-weight: 700; line-height: 1; background: var(--card);
}
.close-btn:hover { background: var(--card-2); }
.lesson-top .dots { flex: 1; margin: 0; gap: 4px; flex-wrap: nowrap; }
.lesson-top .dots .dot { flex: 1; height: 12px; width: auto; border-radius: 6px; border-width: 2px; min-width: 8px; transition: background .25s; }
.lesson-top .dots .dot.task { border-radius: 6px; border-style: dashed; }
.lesson-top .dots .dot.done { border-style: solid; }
.lesson-top .dots .dot:hover { transform: scaleY(1.2); }
.lesson-panel .crumbs { margin: 0; }
.lesson-panel .lesson-title { margin: 0; }
.coach { display: flex; gap: 12px; align-items: flex-start; }
.coach-ava {
  flex: none; width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--border); background-color: var(--highlight);
  background-size: 78%; box-shadow: 2px 2px 0 var(--shadow); animation: bob 3.2s ease-in-out infinite;
}
.coach.task .coach-ava { background-color: var(--primary); }
.coach-ava.fen-ava { display: grid; place-items: end center; overflow: hidden; }
.coach-ava.fen-ava svg { width: 46px; height: auto; display: block; }
.bubble {
  position: relative; flex: 1; min-width: 0; background: var(--card-2); border: 2px solid var(--border);
  border-radius: 4px var(--radius) var(--radius) var(--radius); padding: 12px 14px; animation: fadeUp .3s ease-out;
}
.bubble::before {
  content: ""; position: absolute; left: -10px; top: 12px; width: 14px; height: 14px; background: var(--card-2);
  border-left: 2px solid var(--border); border-bottom: 2px solid var(--border); transform: rotate(45deg);
}
.bubble .step-kind { margin-bottom: 4px; }
.lesson-panel.finished .coach-ava, .lesson-panel.finished .bubble::before { display: none; }
.lesson-panel.finished .bubble { background: none; border: none; padding: 0; }
.finish .finish-stars span { display: inline-block; animation: pop .45s ease-out both; }
.finish .finish-stars span:nth-child(2) { animation-delay: .18s; }
.finish .finish-stars span:nth-child(3) { animation-delay: .36s; }
.finish .xp-chip { display: inline-block; margin: 6px 0; padding: 4px 12px; border-radius: 999px; background: var(--primary); color: var(--primary-text);
  font-weight: 800; border: 2px solid var(--border); animation: pop .4s .5s ease-out both; }

/* мобильные: кнопки урока — внизу экрана, под большим пальцем */
@media (max-width: 760px) {
  .lesson-layout .board-actions {
    position: sticky; bottom: 0; z-index: 20; margin: 12px -16px 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    /* фон сплошной: сквозь полупрозрачный подсказка под доской просвечивала через неактивную кнопку «←» */
    background: var(--bg);
    border-top: 2px solid var(--line);
  }
  .lesson-layout .board-actions #nextBtn, .lesson-layout .board-actions #checkBtn { flex: 1; }
}

/* ---------- карта обучения: главы и тропа ---------- */
.hero-continue {
  display: flex; align-items: center; gap: 18px; padding: 18px 20px; margin-bottom: 26px;
  border: 2px solid var(--border); border-radius: var(--radius); box-shadow: 4px 4px 0 var(--shadow);
  background: var(--soft-yellow);
}
.hero-continue .hero-icon { flex: none; width: 76px; height: 76px; border-radius: 22px; border: 2px solid var(--border);
  background-color: var(--card); background-size: 80%; box-shadow: 2px 2px 0 var(--shadow); animation: bob 3s ease-in-out infinite; }
.hero-continue .hero-text { flex: 1; min-width: 0; }
.hero-continue h2 { margin: 0 0 4px; font-size: 20px; }
.hero-continue .meta { font-size: 14px; }
@media (max-width: 560px) { .hero-continue { flex-wrap: wrap; } .hero-continue button { width: 100%; } }

.chapter { margin-bottom: 34px; }
.chapter-banner {
  position: relative; overflow: hidden; display: flex; align-items: flex-end; min-height: 176px;
  border: 2px solid var(--border); border-radius: var(--radius); box-shadow: 4px 4px 0 var(--shadow);
  background: var(--ch); color: #1d1d27;
}
.chapter-banner::before {   /* клетки доски, уходящие в перспективу */
  content: ""; position: absolute; inset: auto -10% -40% 30%; height: 150%;
  background: conic-gradient(rgba(255,255,255,.28) 25%, transparent 0 50%, rgba(255,255,255,.28) 0 75%, transparent 0) 0 0 / 44px 44px;
  transform: perspective(300px) rotateX(55deg); transform-origin: bottom; opacity: .9;
}
.chapter.locked .chapter-banner { filter: grayscale(.85); opacity: .7; }
.chapter-info { position: relative; z-index: 1; padding: 16px 18px; flex: 1; min-width: 0; }
.chapter-info .kicker { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.chapter-info h2 { margin: 2px 0 4px; font-size: 24px; color: #1d1d27; }
.chapter-info .tag { font-size: 14px; font-weight: 600; opacity: .85; max-width: 34ch; }
.chapter-stats { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.chapter-stats span { background: rgba(255,255,255,.72); border: 2px solid #1d1d27; border-radius: 999px; padding: 2px 10px; font-size: 13px; font-weight: 800; }
.chapter-art { position: relative; z-index: 1; width: 230px; height: 150px; flex: none; transform: scale(1.25); transform-origin: bottom right; margin-right: 10px; }
.chapter-art .piece { position: absolute; filter: drop-shadow(3px 4px 0 rgba(0,0,0,.25)); }
.chapter-art svg { position: absolute; inset: 0; overflow: visible; }
@media (max-width: 560px) {
  .chapter-banner { flex-direction: column-reverse; align-items: stretch; }
  .chapter-art { transform: scale(.8); transform-origin: bottom right; align-self: flex-end; height: 110px; margin: -6px 0 -18px; }
  .chapter-info h2 { font-size: 20px; }
}
.chapter .locked-note { margin: 10px 4px 0; }

.trail { position: relative; width: 320px; max-width: 100%; margin: 18px auto 0; }
.trail svg.trail-line { position: absolute; left: 50%; top: 0; transform: translateX(-50%); overflow: visible; pointer-events: none; }
.trail-line path { fill: none; stroke: var(--line); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 2 16; }
.trail-line path.done { stroke: var(--ch); stroke-dasharray: none; stroke-width: 8; opacity: .85; }
.trail-node { position: absolute; width: 76px; display: flex; flex-direction: column; align-items: center; gap: 4px; animation: pop .4s ease-out both; }
.map-node-btn {
  width: 68px; height: 68px; border-radius: 50%; padding: 0; min-height: 0; border: 3px solid var(--border);
  background-color: var(--card); background-repeat: no-repeat; background-position: center; background-size: 70%;
  box-shadow: 0 5px 0 var(--shadow); transition: transform .12s, box-shadow .12s;
}
.map-node-btn:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 8px 0 var(--shadow); }
.map-node-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 var(--shadow); }
.trail-node.done .map-node-btn { background-color: var(--ch); }
.trail-node.current .map-node-btn { background-color: var(--highlight); animation: pulseRing 1.6s ease-out infinite; }
.trail-node.open .map-node-btn { background-color: var(--card-2); }
.trail-node.locked .map-node-btn { background-color: var(--card-2); filter: grayscale(1); opacity: .5; cursor: pointer; }
.trail-node .node-stars { font-size: 13px; letter-spacing: 1px; color: var(--highlight); -webkit-text-stroke: .6px var(--border); line-height: 1; min-height: 13px; }
.trail-node .node-label { font-size: 12px; font-weight: 700; text-align: center; line-height: 1.2; color: var(--text-2); max-width: 110px; }
.trail-node.current .node-label, .trail-node.done .node-label { color: var(--text); }
.trail-node .start-flag {
  position: absolute; top: -34px; background: var(--text); color: var(--bg); font-size: 12px; font-weight: 800; letter-spacing: .05em;
  padding: 4px 10px; border-radius: 8px; white-space: nowrap; animation: bob 1.6s ease-in-out infinite; text-transform: uppercase;
}
.trail-node .start-flag::after { content: ""; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; border: 5px solid transparent; border-bottom: 0; border-top-color: var(--text); }
.trail-node.exam .map-node-btn { width: 84px; height: 84px; border-radius: 26px; background-size: 60%; }
.trail-node.exam.done .map-node-btn { background-color: var(--ok); }

.node-pop {
  position: absolute; z-index: 10; width: 280px; left: 50%; transform: translateX(-50%);
  background: var(--card); border: 2px solid var(--border); border-radius: var(--radius); box-shadow: 4px 4px 0 var(--shadow);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; animation: pop .2s ease-out;
}
.node-pop h3 { margin: 0; font-size: 17px; }
.node-pop .meta { font-size: 13px; }
.node-pop .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.node-pop .row button { flex: 1; }

.chapter-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: rgba(0,0,0,.18); z-index: 2; }
.chapter-bar span { display: block; height: 100%; background: #2B2B36; border-radius: 0 4px 4px 0; transition: width .6s ease-out; }
.ico-board { display: block; width: 58%; height: 58%; margin: auto; border: 2px solid var(--border); border-radius: 4px;
  background: conic-gradient(var(--sq-dark) 25%, var(--sq-light) 0 50%, var(--sq-dark) 0 75%, var(--sq-light) 0) 0 0 / 50% 50%; }
.ico-text { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 600; font-size: 15px; color: var(--text); }
.trail-node.done .ico-text { color: #1d1d27; }
.map-node-btn { display: grid; place-items: center; }
.node-prog { font-size: 11px; font-weight: 800; color: var(--text-2); -webkit-text-stroke: 0; letter-spacing: 0; }
.hero-continue .hero-icon { display: grid; place-items: center; }
.map-node-btn.piece { background-size: 66%; }
.trail-node.exam .map-node-btn { background-size: 62%; }
.hero-continue .hero-icon.piece { background-size: 80%; }
.coach-ava.piece { background-size: 78%; }
canvas.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 60; }
.finish-stars span { display: inline-block; }

.settings h2 .status { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; font-family: var(--font-body);
  font-size: 12px; font-weight: 600; color: var(--text-2); vertical-align: middle; }

/* ---------- кто что съел (над и под доской) ---------- */
.captures { display: flex; align-items: center; gap: 10px; min-height: 30px; margin: 4px 0; font-size: 14px; }
.captures .cap-name { font-weight: 800; white-space: nowrap; }
.captures .cap-pieces { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; }
.captures .cap-group { display: inline-flex; align-items: center; padding: 1px 7px 1px 4px; border-radius: 999px;
  background: var(--sq-light); border: 1px solid var(--line); }
.captures .cap-group .piece { width: 22px; height: 22px; background-size: 100%; }
.captures .cap-group .piece + .piece { margin-left: -12px; }
.captures .cap-n { font-size: 11px; font-weight: 800; color: #2B2B36; margin-left: 2px; }
.captures .cap-none { font-size: 12px; color: var(--text-2); }
.captures .cap-adv { margin-left: auto; font-weight: 800; padding: 1px 9px; border-radius: 999px; background: var(--ok); color: #fff; border: 2px solid var(--border); animation: pop .3s ease-out; }

/* ---------- мелочи ---------- */
.board-actions { align-items: center; }
.board-actions .spacer { flex: 1; }
.guard-box { animation: pop .25s ease-out; }

/* ============================================================
   «Шахматный кружок»: логотип, значок прогресса, страница «Сегодня»
   ============================================================ */

/* логотип перед заголовком страницы — жёлтая плитка с конём */
header h1 { display: flex; align-items: center; gap: 12px; font-size: 22px; }
header h1::before {
  content: ""; flex: none; width: 42px; height: 42px; border-radius: 13px;
  background: var(--highlight) var(--knight-svg) center / 76% no-repeat;
  border: var(--bw) solid var(--border); box-shadow: 3px 3px 0 var(--shadow);
  transform: rotate(-6deg);
}
header .main-nav a { font-weight: 600; font-size: 15px; padding: 7px 14px; }
header .main-nav a[aria-current="page"] { font-weight: 800; }

/* значок в шапке: огонёк серии + фишка уровня */
.me-badge, .me-badge:hover { padding: 0; border: 0; background: none; box-shadow: none; transform: none; gap: 10px; }
.me-badge .streak {
  display: inline-flex; align-items: center; gap: 5px; height: 38px; padding: 0 12px; border-radius: 999px;
  background: var(--soft-orange); border: 2px solid var(--border); font-weight: 800; font-size: 15px; opacity: 1;
}
.me-badge .streak:not(.on) .flame-ico { filter: grayscale(1); opacity: .5; }
.flame-ico path { fill: var(--played); stroke: var(--border); stroke-width: 1.8; stroke-linejoin: round; }
.me-badge .lvl-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 4px; border-radius: 999px;
  background: var(--card); border: 2px solid var(--border); transition: transform .08s, box-shadow .08s;
}
.me-badge:hover .lvl-chip, .me-badge:hover .streak { box-shadow: 2px 2px 0 var(--shadow); }
.lvl-ava {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tint-lilac); color: #2B2B36; border: 2px solid var(--border);
  font-family: var(--font-glyph); font-size: 17px; line-height: 1;
}
.lvl-ava.big { width: 52px; height: 52px; font-size: 32px; box-shadow: 3px 3px 0 var(--shadow); }
/* SVG-фигура внутри круглых/квадратных иконок (аватары, плитки, наклейки) */
.lvl-ava .piece, .climb-ava .piece, .mini-ico .piece, .sticker .piece { display: block; width: 78%; height: 78%; background-size: 100%; }
.climb-ava .piece { width: 72%; height: 72%; }
.me-badge .lvl-txt { display: flex; flex-direction: column; gap: 3px; }
.me-badge .lvl { color: var(--text); font-size: 12px; font-weight: 700; line-height: 1; }
.me-badge .xpbar { width: 90px; height: 7px; border: 0; background: var(--line); }
@media (max-width: 560px) { .me-badge .lvl-txt { display: none; } .me-badge .lvl-chip { padding: 0 4px; } }

/* ---------- «Сегодня» ---------- */
.today-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 24px; }
@media (max-width: 760px) { .today-grid { grid-template-columns: minmax(0, 1fr); } }
.today-grid .panel h2 { font-size: 20px; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; margin-bottom: 14px; }
.panel-head h2 { margin: 0 !important; }

/* главный блок — жёлтый план дня */
.plan-hero {
  position: relative; overflow: hidden; background: var(--highlight); color: #2B2B36;
  border-width: 3px; box-shadow: 6px 6px 0 var(--shadow); padding: 28px 30px; display: flex; flex-direction: column; gap: 16px;
}
.plan-hero::after {   /* большой конь-водяной знак */
  content: ""; position: absolute; right: -24px; top: -30px; width: 230px; height: 230px;
  background: var(--knight-svg) center / contain no-repeat; opacity: .08; transform: rotate(12deg); pointer-events: none;
}
.plan-hero .kicker { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 480px) { .today-grid .plan-hero .greet { font-size: 23px !important; } }
.today-grid .plan-hero .greet { margin: 0; font-size: 30px; line-height: 1.15; font-weight: 800; max-width: 18em; position: relative; z-index: 1; color: #2B2B36; }
.plan-hero .plan { gap: 10px; position: relative; z-index: 1; }
.plan-hero .plan-item {
  gap: 14px; padding: 12px 16px; background: #FFFFFF; color: #2B2B36; border: 2px solid #2B2B36; border-radius: 16px;
  transition: transform .08s, box-shadow .08s;
}
.plan-hero .plan-item:hover { background: #FFFFFF; transform: translate(-1px, -1px); box-shadow: 3px 3px 0 #2B2B36; }
.plan-hero .plan-item.done { background: rgba(255,255,255,.5); }
.plan-hero .plan-item .check {
  width: 34px; height: 34px; border: 2px dashed #2B2B36; font-size: 11px; font-weight: 800; background: #FFFFFF;
}
.plan-hero .plan-item.done .check { background: var(--primary); border: 2px solid #2B2B36; }
.plan-item .check svg path { fill: none; stroke: #16323A; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.plan-hero .plan-item .t { display: flex; flex-direction: column; gap: 6px; font-size: 16px; min-width: 0; }
.plan-hero .plan-item.done .t { color: #4A4A58; text-decoration: none; }
.plan-hero .plan-item.done .tt { text-decoration: line-through; text-decoration-thickness: 2px; }
.plan-item .segs { display: flex; gap: 4px; max-width: 100%; }
.plan-item .segs i { flex: 0 1 32px; min-width: 8px; height: 8px; border-radius: 9px; background: #EFEADB; border: 1.5px solid #2B2B36; }
.plan-item .segs i.on { background: var(--primary); }
.plan-hero .plan-item .go {
  padding: 8px 14px; border-radius: 12px; border: 2px solid #2B2B36; background: var(--primary); color: #16323A;
  box-shadow: 2px 2px 0 #2B2B36; font-size: 14px; white-space: nowrap;
}
.plan-hero .plan-item.done .go { background: none; border-color: transparent; box-shadow: none; color: #4A4A58; }
.plan-hero .plan-foot { font-size: 14px; font-weight: 600; position: relative; z-index: 1; }

/* серия и уровень */
.streak-card { display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.hero-streak .flame { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center;
  background: var(--soft-orange); border: var(--bw) solid var(--border); box-shadow: 3px 3px 0 var(--shadow); filter: none; opacity: 1; }
.hero-streak .flame .flame-ico { width: 34px; height: 38px; }
.hero-streak:not(.on) .flame .flame-ico { filter: grayscale(1); opacity: .5; }
.hero-streak .big { font-size: 30px; font-weight: 800; }
.hero-level { gap: 10px; }
.lvl-row { display: flex; align-items: center; gap: 12px; }

/* лестница: аватары соперников ступеньками вверх */
.ladder-climb { display: flex; align-items: flex-end; gap: 10px; min-height: 200px; padding: 18px 6px 8px; overflow-x: auto; scrollbar-width: thin; }
.climb-step { flex: 1 0 84px; display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: var(--lift); }
.climb-ava {
  position: relative; width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tint); color: #2B2B36; border: 3px solid var(--border); box-shadow: 3px 3px 0 var(--shadow);
  font-family: var(--font-glyph); font-size: 40px; line-height: 1; text-decoration: none; transition: transform .1s;
}
.climb-ava:hover { transform: translateY(-3px); }
.climb-step.now .climb-ava { width: 88px; height: 88px; font-size: 50px; box-shadow: 4px 4px 0 var(--shadow); animation: pulseRing 1.6s ease-out infinite; }
.climb-step.locked { opacity: .5; }
.climb-step.locked .climb-ava { pointer-events: none; }
.climb-ava .badge { position: absolute; right: -6px; bottom: -4px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; background: var(--card); border: 2px solid var(--border); }
.climb-ava .badge.ok { background: var(--primary); }
.climb-ava .badge svg path { fill: none; stroke: #16323A; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.climb-ava .badge svg rect { fill: var(--text); }
.climb-ava .badge svg path:last-child:not(:first-child) { stroke: var(--text); stroke-width: 1.6; }
.climb-name { font-size: 13px; font-weight: 700; text-align: center; line-height: 1.2; }
.ladder-next { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap;
  margin: 16px 0 0; padding-top: 16px; border-top: 2px dashed var(--line); }
button.accent, a.btn > button.accent { background: var(--highlight); color: #2B2B36; }

/* мини-игры — цветные плитки */
.mini-list { gap: 12px; }
@media (max-width: 420px) { .mini-list { grid-template-columns: 1fr; } }
.mini-card { flex-direction: row; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: var(--tint);
  transition: transform .08s, box-shadow .08s; }
.mini-card:hover { background: var(--tint); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--shadow); }
.mini-ico { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: #FFFFFF; color: #2B2B36; border: 2px solid var(--border); font-family: var(--font-glyph); font-size: 28px; line-height: 1; }
.mini-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.3; }
.mini-card .rec { color: var(--text-2); font-weight: 600; }

/* достижения — наклейки */
.ach-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 16px 10px; }
.ach, .ach.on { border: 0; background: none; padding: 0; align-items: center; text-align: center; gap: 8px; opacity: .5; }
.ach.on { opacity: 1; }
.ach b { font-size: 12px; line-height: 1.25; }
.ach .sticker {
  width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center;
  background: var(--tint); color: #2B2B36; border: var(--bw) dashed var(--border); transform: rotate(var(--tilt));
  font-family: var(--font-glyph); font-size: 28px; line-height: 1;
}
.ach:not(.on) .sticker { color: var(--text-2); }
.ach.on .sticker { border-style: solid; box-shadow: 3px 3px 0 var(--shadow); }

/* ---------- мини-игры: жизни, серия, время на ход ---------- */
.game-hud { align-items: center; gap: 12px; }
.game-hud .s { margin-left: auto; }
.game-hud .lives { color: var(--blunder); font-size: 20px; letter-spacing: 2px; line-height: 1; }
.game-hud .lives .lost { color: var(--line); }
.game-hud .combo {
  padding: 2px 10px; border-radius: 999px; background: var(--highlight); color: #2B2B36;
  border: 2px solid var(--border); font-size: 13px; font-weight: 800; animation: pop .25s ease-out;
}
.game-hud .movebar { flex: 1; max-width: 220px; height: 10px; border-radius: 99px; background: var(--card-2); border: 2px solid var(--border); overflow: hidden; }
.game-hud .movebar span { display: block; height: 100%; background: var(--primary); transition: width .1s linear; }
.sq.found::after { content: ""; position: absolute; inset: 3px; border: 4px solid var(--ok); border-radius: 50%; z-index: 2; animation: pop .2s ease-out; }
#tabs { flex-wrap: wrap; }

/* тренажёр: все темы задач группами */
.theme-groups { display: flex; flex-direction: column; margin-top: 10px; }
.theme-groups details { border-top: 2px dashed var(--line); }
.theme-groups summary { cursor: pointer; padding: 10px 0; font-weight: 800; font-size: 15px; }
.theme-groups summary .cnt { color: var(--text-2); font-weight: 600; font-size: 13px; margin-left: 4px; }
.theme-groups .chips { padding: 0 0 12px; }

/* ---------- аккаунт: кнопка в шапке и окно входа ---------- */
header { grid-template-columns: 1fr auto auto; grid-template-areas: "title badge acct" "nav nav nav"; }
header .account-btn {
  grid-area: acct; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 4px 12px 4px 4px;
  border-radius: 999px; font-size: 14px; box-shadow: none; max-width: 180px;
}
header .account-btn.guest { padding: 4px 16px; background: var(--primary); color: var(--primary-text); box-shadow: 2px 2px 0 var(--shadow); }
.account-btn .acc-ava {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--highlight); color: #2B2B36; border: 2px solid var(--border); font-weight: 800; font-size: 13px;
}
.account-btn .acc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .account-btn .acc-name { display: none; } header .account-btn:not(.guest) { padding: 4px; } }
/* ---------- навигация: 5 разделов + подразделы; на телефоне — нижняя панель ---------- */
header { grid-template-areas: "title badge acct" "nav nav nav" "sub sub sub"; }
header .main-nav a { display: inline-flex; align-items: center; gap: 6px; }
header .main-nav svg { display: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; }
header .sub-nav { grid-area: sub; display: flex; flex-wrap: nowrap; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: -2px -4px 0; }
header .sub-nav::-webkit-scrollbar { display: none; }
header .sub-nav a { flex: none; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text-2);
  text-decoration: none; border: 1.5px solid var(--line); }
header .sub-nav a:hover { color: var(--text); background: var(--card-2); }
header .sub-nav a[aria-current="page"] { color: var(--text); border-color: var(--border); background: var(--card-2); font-weight: 800; }
@media (max-width: 640px) {
  /* размытие шапки делает её «рамкой» для position: fixed — на телефоне шапка сплошная, панель — у края экрана */
  header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); grid-template-areas: "title badge acct" "sub sub sub"; }
  header .main-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; margin: 0; max-width: none; overflow: visible;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0;
    padding: 6px 4px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--card); border-top: 2px solid var(--border);
  }
  header .main-nav a { flex-direction: column; gap: 2px; padding: 4px 0; min-height: 48px; justify-content: center;
    font-size: 11px; font-weight: 600; border: 0; border-radius: 12px; }
  header .main-nav svg { display: block; }
  header .main-nav a[aria-current="page"] { background: none; border: 0; color: var(--text); font-weight: 800; }
  header .main-nav a[aria-current="page"] svg { color: #2B2B36; background: var(--highlight); border-radius: 10px; padding: 3px 12px;
    box-sizing: content-box; }
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  /* «+15 опыта», достижения — над нижней панелью, а не поверх неё */
  #toasts { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); right: 12px; left: 12px; align-items: flex-end; }
}

/* ---------- логотип в шапке: значок с конём + «fenlore»; название страницы — sr-only h1 ---------- */
header .brand { grid-area: title; display: inline-flex; align-items: center; gap: 12px; min-width: 0; justify-self: start;
  color: var(--text); text-decoration: none; font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -0.02em; }
header .brand::before {
  content: ""; flex: none; width: 42px; height: 42px; border-radius: 13px;
  background: var(--highlight) var(--knight-svg) center / 76% no-repeat;
  border: var(--bw) solid var(--border); box-shadow: 3px 3px 0 var(--shadow); transform: rotate(-6deg); transition: transform .15s;
}
header .brand:hover { color: var(--text); }
header .brand:hover::before { transform: rotate(4deg) scale(1.05); }
@media (max-width: 480px) { header .brand { font-size: 20px; gap: 8px; } header .brand::before { width: 34px; height: 34px; border-radius: 11px; } }

/* ---------- главная ---------- */
.home-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.home-span2 { grid-column: span 2; } .home-span3 { grid-column: span 3; }
.home-hero { grid-column: span 2; display: flex; gap: 24px; align-items: center; padding: 28px 30px; border-radius: var(--radius);
  background: var(--highlight); color: #2B2B36; border: var(--bw) solid var(--border); box-shadow: 6px 6px 0 var(--shadow); min-width: 0; }
.home-hero.green { background: var(--primary); color: var(--primary-text); }
.home-hero.green .hub-btn.dark { background: #0E2A22; color: #FFD35C; border-color: #0E2A22; }
.home-hero .hub-btn.ghost { color: inherit; border-color: currentColor; }
.home-hero-text { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.home-hero .kicker, .home-grid .kicker { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.home-hero h2 { margin: 0; font-size: 36px; line-height: 1.1; }
.home-hero p { margin: 0; font-size: 16px; max-width: 30em; }
.home-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.hub-btn.big { min-height: 54px; padding: 0 26px; font-size: 18px; border-radius: 18px; }
.home-ava { flex: none; width: 170px; height: 170px; border-radius: 50%; background: var(--tint); border: 3px solid #2B2B36;
  display: grid; place-items: center; box-shadow: 4px 4px 0 #2B2B36; transform: rotate(-4deg); }
.home-ava .piece { width: 118px; height: 118px; }
.streak-card .streak-big { font-family: var(--font-display); font-size: 40px; font-weight: 800; line-height: 1.1; }
.week-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 10px 0 14px; }
.week-strip i { height: 30px; border-radius: 9px; background: var(--card-2); border: 2px dashed var(--border); }
.week-strip i.on { background: var(--highlight); border: 2px solid var(--border); }
.week-strip i.today:not(.on) { border-style: solid; border-color: var(--highlight); }
.streak-card .lvl-row { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.plan-card { display: flex; flex-direction: column; gap: 10px; }
.plan-card .plan { display: flex; flex-direction: column; gap: 8px; }
.plan-card .plan-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--card-2);
  border: 2px solid var(--line); color: var(--text); text-decoration: none; }
.plan-card .plan-item:hover { border-color: var(--border); color: var(--text); }
.plan-card .plan-item .check { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 2px dashed var(--text-2);
  display: grid; place-items: center; font-size: 10px; font-weight: 800; }
.plan-card .plan-item.done .check { background: var(--primary); border: 2px solid var(--border); }
.plan-card .plan-item .t { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; font-weight: 600; }
.plan-card .plan-item.done .tt { text-decoration: line-through; color: var(--text-2); }
.plan-card .plan-item .segs i { background: var(--card); border-color: var(--border); }
.plan-card .plan-item .segs i.on { background: var(--primary); }
.plan-card .plan-item .go { color: var(--highlight); font-weight: 900; font-size: 18px; }
.focus-ico svg { width: 38px; height: 38px; fill: none; stroke: var(--blunder); stroke-width: 2; }
.focus-ico { width: 60px; height: 60px; border-radius: 18px; background: var(--soft-red); border: 2px solid var(--blunder);
  display: grid; place-items: center; font-size: 0; }
@media (max-width: 900px) {
  .home-grid { grid-template-columns: minmax(0, 1fr); }
  .home-hero, .home-span2, .home-span3 { grid-column: auto; }
}
@media (max-width: 560px) {
  .home-hero { flex-direction: column-reverse; align-items: flex-start; padding: 20px; gap: 12px; }
  .home-hero h2 { font-size: 26px; }
  .home-ava { width: 84px; height: 84px; box-shadow: 3px 3px 0 #2B2B36; }
  .home-ava .piece { width: 58px; height: 58px; }
  .home-actions .hub-btn { flex: 1 1 auto; }
}

/* ---------- хабы «Играть» и «Учиться» ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-bottom: var(--gap); }
.hub-hero { border-radius: var(--radius); border: var(--bw) solid var(--border); background: var(--card); box-shadow: 5px 5px 0 var(--shadow);
  padding: 24px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.hub-hero h2 { margin: 0; font-size: 26px; }
.hub-yellow { background: var(--highlight); color: #2B2B36; }
.hub-green { background: var(--primary); color: var(--primary-text); }
.hub-wide { margin-bottom: var(--gap); }
.hub-kicker { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.hub-about { margin: 0; font-size: 15px; }
.hub-yellow .hub-about, .hub-green .hub-about { opacity: .9; }
.hub-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.hub-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; border-radius: 16px;
  font-weight: 800; font-size: 16px; text-decoration: none; border: 2px solid var(--border); }
.hub-btn.dark { background: #2B2B36; color: var(--highlight); border-color: #2B2B36; }
.hub-green .hub-btn.dark { color: #FFD35C; }
.hub-btn.primary { background: var(--primary); color: var(--primary-text); box-shadow: 2px 2px 0 var(--shadow); }
.hub-btn.ghost { background: transparent; color: inherit; border-color: currentColor; }
.hub-btn.small { min-height: 38px; font-size: 14px; align-self: flex-start; margin-top: 4px; }
.hub-ladder { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; }   /* все 8 — в одну строку, кружки ужимаются */
.hub-ava { position: relative; flex: 0 1 50px; min-width: 28px; aspect-ratio: 1 / 1; border-radius: 50%; display: grid; place-items: center;
  background: var(--tint); border: 2.5px solid #2B2B36; text-decoration: none; }
.hub-ava .piece { width: 68%; height: 68%; }
.hub-ava.now { flex-basis: 64px; flex-shrink: 0; box-shadow: 0 0 0 4px #2B2B36; }
.hub-ava.now .piece { width: 68%; height: 68%; }
.hub-ava.beaten::after { content: "✓"; position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--primary); color: #16323A; border: 2px solid #2B2B36; font-size: 12px; font-weight: 900; display: grid; place-items: center; }
.hub-ava.locked { opacity: .45; border-style: dashed; pointer-events: none; }
.hub-ava .lock { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF;
  border: 2px solid #2B2B36; display: grid; place-items: center; }
.hub-ava .lock svg { fill: none; stroke: #2B2B36; stroke-width: 1.6; }
.hub-ratings { display: flex; gap: 12px; }
.hub-rating { flex: 1; padding: 10px 14px; border-radius: 16px; background: var(--card-2); border: 2px solid var(--line); }
.hub-rating span { display: block; font-size: 13px; color: var(--text-2); }
.hub-rating b { font-family: var(--font-display); font-size: 24px; }
.hub-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-bottom: var(--gap); }
.hub-cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hub-card { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: var(--radius); background: var(--card);
  border: var(--bw) solid var(--border); color: var(--text); text-decoration: none; transition: transform .08s, box-shadow .08s; min-width: 0; }
.hub-card:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--shadow); color: var(--text); }
.hub-card b { font-family: var(--font-display); font-size: 19px; }
.hub-card span { color: var(--text-2); font-size: 14px; }
.hub-card .hub-btn { color: var(--primary-text); }
.hub-card svg { width: 34px; height: 34px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico-blue { stroke: var(--accent); } .ico-green { stroke: var(--primary); } .ico-yellow { stroke: var(--inacc); }
.hub-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.hub-tags i { font-style: normal; font-size: 13px; padding: 3px 10px; border-radius: 999px; background: var(--card-2); border: 1.5px solid var(--line); color: var(--text); }
.hub-row { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.hub-grow { flex: 1 1 280px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hub-bar { max-width: 460px; }
.hub-recent-list { display: flex; flex-wrap: wrap; gap: 8px; }
.hub-chip { display: flex; flex-direction: column; padding: 8px 14px; border-radius: 14px; background: var(--card-2); border: 2px solid var(--line);
  color: var(--text); text-decoration: none; font-weight: 600; font-size: 14px; }
.hub-chip:hover { border-color: var(--border); color: var(--text); }
@media (max-width: 860px) { .hub-grid, .hub-cards, .hub-cards.two { grid-template-columns: minmax(0, 1fr); } }

/* узкий телефон: заголовок сжимается, а не выталкивает «Войти» за край */
header h1 { min-width: 0; }
@media (max-width: 480px) {
  header { gap: 8px 10px; }
  header h1 { font-size: 18px; gap: 8px; overflow: hidden; }
  header h1::before { width: 34px; height: 34px; border-radius: 11px; }
  header .account-btn.guest { padding: 4px 12px; }
  .me-badge { gap: 6px; }
}

.account-dialog {
  width: min(420px, calc(100vw - 32px)); padding: 0; border: var(--bw) solid var(--border); border-radius: var(--radius);
  background: var(--card); color: var(--text); box-shadow: 6px 6px 0 var(--shadow);
}
.account-dialog::backdrop { background: rgba(20, 20, 28, .45); }
.acc-form { display: flex; flex-direction: column; gap: 12px; padding: 22px; }
.acc-form h2 { margin: 0; font-size: 20px; }
.acc-form .meta { margin: 0; font-size: 14px; }
.acc-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.acc-form input { font-family: inherit; font-size: 15px; color: var(--text); background: var(--card-2); border: 2px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px; min-height: 44px; }
.acc-form input:focus { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 1px; }
.acc-tabs { display: flex; gap: 6px; }
.acc-tabs button { flex: 1; box-shadow: none; }
.acc-tabs button[aria-selected="true"] { background: var(--highlight); color: #2B2B36; }
.acc-error { min-height: 18px; color: var(--blunder); font-size: 14px; font-weight: 700; }
.acc-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.acc-actions .primary, .acc-actions .danger { flex: 1; }

/* ---------- документы, подвал, мелкие кнопки-ссылки ---------- */
.link-btn { background: none; border: 0; box-shadow: none; padding: 4px 0; min-height: 0; color: var(--text-2);
  font-weight: 600; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; align-self: flex-start; }
.link-btn:hover:not(:disabled) { color: var(--text); transform: none; box-shadow: none; }
.site-footer { display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: center; margin-top: 40px; padding-top: 16px;
  border-top: 2px dashed var(--line); font-size: 13px; }
.site-footer a { color: var(--text-2); }
/* фокус недели («Сегодня», тренажёр) */
.focus-row { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.focus-ico { font-size: 34px; line-height: 1; flex: 0 0 auto; }
.focus-main { flex: 1 1 280px; min-width: 0; }
.focus-main h2 { margin: 2px 0 6px !important; font-size: 20px; }
.focus-main p { margin: 0 0 6px; font-size: 15px; }
.focus-goal { flex: 0 0 180px; display: grid; gap: 6px; }
.focus-goal .big { font-size: 26px; font-weight: 800; line-height: 1.1; }
.focus-card .kicker { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.focus-banner { margin-bottom: 12px; }
.focus-banner .link-btn { margin-left: 6px; }
.acc-links { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; }
.acc-form label.check.acc-promo { display: flex; flex-direction: row; align-items: flex-start; gap: 8px; font-size: 13px; font-weight: 500;
  color: var(--text-2); line-height: 1.45; }
.acc-form label.check.acc-promo input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; min-height: 0; padding: 0; }
.acc-legal { font-size: 12px; margin: 0; }
/* контакты и реквизиты (contacts.html) */
.req-list { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 6px; }
.req-list li { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.req-list li span { color: var(--text-2); }
@media (max-width: 560px) { .req-list li { grid-template-columns: 1fr; gap: 2px; } }
/* разбор за 5 минут */
.key-list { display: grid; gap: 8px; margin: 10px 0; }
.key-item { display: flex; gap: 12px; align-items: center; text-align: left; width: 100%; padding: 10px 12px; font: inherit; color: inherit;
            background: var(--card); border: 2px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; }
.key-item:hover { background: var(--card-2); }
.key-item.active { border-color: var(--border); background: var(--card-2); box-shadow: 3px 3px 0 var(--shadow); }
.key-n { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800;
         background: var(--highlight); color: #2B2B36; border: 2px solid var(--border); }
.key-body { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.key-body .meta { flex-basis: 100%; }
.key-nav { display: flex; gap: 8px; justify-content: space-between; }
.book-note { font-size: 13px; color: var(--text-2); margin: -2px 0 8px; }
.book-note span[title] { text-decoration: underline dotted; cursor: help; }
/* «покажи вариант» (разбор) */
.line-play { font-size: 12px; padding: 2px 8px; margin-left: 4px; border-width: 1.5px; box-shadow: none; }
.line-view .lv-moves { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 14px; line-height: 2; }
.lv-mv { padding: 2px 5px; border-radius: 6px; cursor: pointer; }
.lv-mv:hover { background: var(--card-2); }
.lv-mv.active { background: var(--highlight); color: #2B2B36; font-weight: 700; }
.line-view .nav { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
/* «Сначала подумай сам» (разбор) */
.quiz h3 { font-size: 17px; margin: 10px 0 4px; }
.quiz-opts { display: grid; gap: 8px; margin: 12px 0 8px; }
.quiz-opt { display: flex; gap: 10px; align-items: center; text-align: left; width: 100%; padding: 10px 12px; font: inherit; color: inherit;
            background: var(--card); border: 2px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; box-shadow: 3px 3px 0 var(--shadow); }
.quiz-opt:hover { background: var(--card-2); }
.quiz-opt:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--shadow); }
.link-btn { background: none; border: 0; padding: 4px 0; color: var(--text-2); text-decoration: underline; cursor: pointer; font: inherit; font-size: 13px; box-shadow: none; }
.quiz-result { border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 10px; font-weight: 600; font-size: 14px; }
.quiz-result.ok { background: var(--soft-green); } .quiz-result.bad { background: var(--soft-yellow); }
.think-toggle { display: block; margin-top: 10px; font-size: 13px; color: var(--text-2); }
/* причина ошибки (cause.py) — в разборе, «Моих ошибках» */
.cause { border: 2px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; margin-top: 12px; font-size: 14px; line-height: 1.55; background: var(--card-2); }
.cause-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.cause-head b { font-size: 15px; }
.cause-advice { color: var(--text-2); font-size: 13px; margin-top: 4px; }
.cause-threat { border-color: color-mix(in srgb, var(--blunder) 45%, var(--line)); }
.cause-created { border-color: color-mix(in srgb, var(--mistake) 45%, var(--line)); }
.cause-missed { border-color: color-mix(in srgb, var(--highlight) 60%, var(--line)); }
.site-footer .footer-brand { font-family: var(--font-display); font-weight: 700; color: var(--text); }
.doc { line-height: 1.65; max-width: 820px; }
.doc.narrow { max-width: 460px; }
.doc h2 { font-size: 20px; margin: 4px 0 12px; }
.doc h3 { font-size: 16px; margin: 22px 0 6px; }
.doc ul { padding-left: 20px; }
.doc li { margin: 4px 0; }
.doc-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0 12px; }
.doc-table th, .doc-table td { text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--line); vertical-align: top; }
.doc-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
.doc-draft { display: block; margin-bottom: 18px; }
/* на телефоне таблица лицензий шире экрана — листается сама, а не сдвигает страницу */
@media (max-width: 560px) { .doc-table { font-size: 13px; display: block; overflow-x: auto; } .doc-table th, .doc-table td { padding: 6px; } }

/* ---------- игра с игроками ---------- */
.pvp-lobby { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 760px) { .pvp-lobby { grid-template-columns: minmax(0, 1fr); } }
.pvp-start { display: flex; flex-direction: column; gap: 12px; }
.pvp-start h2 { margin: 0; }
.pvp-label { font-size: 13px; font-weight: 800; color: var(--text-2); text-transform: uppercase; letter-spacing: .06em; }
.pvp-ratings { display: flex; gap: 12px; flex-wrap: wrap; }
.pvp-rating { display: flex; flex-direction: column; padding: 10px 16px; border: 2px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card-2); min-width: 120px; }
.pvp-rating b { font-family: var(--font-display); font-size: 24px; line-height: 1.2; }
.pvp-seeking { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.spinner { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--primary); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pvp-games { display: flex; flex-direction: column; gap: 6px; }
.pvp-game-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 8px 12px;
  border: 2px solid var(--line); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; }
.pvp-game-row:hover { border-color: var(--border); }
.pvp-game-row .res-win { color: var(--ok); } .pvp-game-row .res-loss { color: var(--blunder); }
/* строка партии: основная ссылка + «Разобрать» у законченных; по переписке — «ваш ход» и срок */
.pvp-game-row { grid-template-columns: 1fr auto; padding: 0; }
.pvp-game-main { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 12px; align-items: center; padding: 8px 12px;
  color: var(--text); text-decoration: none; min-width: 0; }
.pvp-game-main > .meta:last-child:nth-child(4) { grid-column: 1 / -1; }
.pvp-game-main.as-text { grid-template-columns: 1fr; gap: 2px; }
.pvp-game-row > button.small { margin-right: 10px; }
.pvp-review-link { padding: 8px 12px; font-weight: 700; font-size: 14px; color: var(--accent); text-decoration: none; white-space: nowrap; }
.pvp-review-link:hover { text-decoration: underline; }
.pvp-game-row.your-turn { border-color: var(--border); background: var(--card-2); }
.pvp-game-row .res-turn { color: var(--accent); }
.pvp-moves-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pvp-moves-head h2 { margin: 0; }
@keyframes pulseRing { 0%, 100% { box-shadow: 3px 3px 0 var(--shadow), 0 0 0 0 color-mix(in srgb, var(--primary) 50%, transparent); }
  50% { box-shadow: 3px 3px 0 var(--shadow), 0 0 0 6px color-mix(in srgb, var(--primary) 0%, transparent); } }
button.pulse { animation: pulseRing 1.6s ease-in-out infinite; }
a.button-link.primary, a.button-link.primary:hover { background: var(--primary); color: var(--primary-text); }
.pvp-player { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin: 8px 0; border: 2px solid var(--line);
  border-radius: var(--radius-sm); background: var(--card); }
.pvp-player.turn { border-color: var(--border); box-shadow: 3px 3px 0 var(--shadow); }
.pvp-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border); flex: none; }
.pvp-dot.white { background: #FFFFFF; } .pvp-dot.black { background: #2B2B36; }
.pvp-name { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pvp-clock { margin-left: auto; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 22px; font-weight: 600;
  padding: 2px 10px; border-radius: 10px; background: var(--card-2); min-width: 84px; text-align: center; }
.pvp-player.turn .pvp-clock { background: var(--highlight); color: #2B2B36; }
.pvp-clock.low { background: var(--blunder) !important; color: #fff !important; }
.pvp-link { display: flex; gap: 8px; margin: 10px 0; }
.pvp-link input { flex: 1; min-width: 0; }

.pvp-lock { border-color: var(--highlight); background: var(--soft-yellow); }
.pvp-lock a { font-weight: 800; margin-left: 6px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Фен (маскот, fen.js): подсказки, первый вход ---------- */
svg.fen { display: block; flex: none; overflow: visible; }
.fen-tip { display: flex; align-items: flex-end; gap: 12px; margin: 10px 0; padding: 12px 14px; border-radius: var(--radius-sm);
  background: #F3F0E7; color: #2B2B36; box-shadow: 4px 4px 0 var(--shadow); animation: fadeUp .3s ease-out both; }
.fen-tip > div { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.fen-tip p { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; }
.fen-tip-ok { align-self: flex-start; padding: 6px 16px; border-radius: 12px; background: #2B2B36; color: #FFD35C; border: 0; font-weight: 800; box-shadow: none; }
.fen-onboard { width: min(440px, calc(100vw - 24px)); max-height: calc(100vh - 24px); border: var(--bw) solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--text); padding: 18px 20px 22px; box-shadow: 6px 6px 0 var(--shadow); }
.fen-onboard::backdrop { background: rgba(16, 16, 23, .7); }
.fen-onboard h2 { margin: 6px 0 12px; font-size: 24px; line-height: 1.2; }
.fo-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.fo-logo { font-family: var(--font-display); font-weight: 800; font-size: 18px; }
.fo-hello { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 8px; }
.fo-bubble { position: relative; flex: 1; margin-bottom: 26px; padding: 12px 14px; border-radius: 18px; background: #F3F0E7; color: #2B2B36;
  font-size: 16px; line-height: 1.45; font-weight: 500; }
.fo-hello.no-fen .fo-bubble { margin-bottom: 4px; }
.fo-bubble::after { content: ""; position: absolute; left: -7px; bottom: 16px; width: 16px; height: 16px; background: #F3F0E7; transform: rotate(45deg); }
.fo-hello.no-fen .fo-bubble::after { display: none; }
.fo-options { display: flex; flex-direction: column; gap: 10px; }
.fo-opt { display: flex; flex-direction: column; gap: 3px; text-align: left; width: 100%; padding: 14px 16px; border-radius: 18px;
  background: var(--card); color: var(--text); border: 2.5px solid var(--border); box-shadow: 3px 3px 0 var(--shadow);
  font: inherit; cursor: pointer; text-decoration: none; }
.fo-opt:hover { background: var(--card-2); color: var(--text); }
.fo-opt b { font-size: 17px; } .fo-opt span { font-size: 14px; color: var(--text-2); }
.fo-opt.on { background: var(--highlight); color: #2B2B36; } .fo-opt.on span { color: #4A4A58; }
.fo-note { text-align: center; margin: 12px 0 0; }
.fo-card { display: flex; flex-direction: column; gap: 4px; padding: 16px; margin: 6px 0 14px; border-radius: 20px; border: 2.5px solid var(--border); }
.fo-card.green { background: var(--primary); color: var(--primary-text); } .fo-card.yellow { background: var(--highlight); color: #2B2B36; }
.fo-card b { font-family: var(--font-display); font-size: 21px; }
.fo-kicker { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.fen-onboard .hub-btn { width: 100%; box-sizing: border-box; margin-top: 8px; }
.fen-onboard .hub-btn.ghost { color: var(--text); border-color: var(--border); }
.fen-inline { display: flex; align-items: center; gap: 12px; }
.acc-settings { border-top: 2px dashed var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.acc-settings h3 { margin: 0; font-size: 15px; }
.acc-settings label.check { display: flex; align-items: center; gap: 8px; flex-direction: row; font-size: 14px; color: var(--text); font-weight: 600; }
.acc-settings label.check input { flex: none; width: 18px; height: 18px; margin: 0; }
.acc-only-settings .acc-settings { border-top: 0; padding-top: 0; }
.acc-only-settings .acc-settings h3 { display: none; }

/* невысокий экран ноутбука (1366×768): доска подстраивается под высоту окна, чтобы кнопки под ней были видны без прокрутки */
@media (min-width: 900px) and (max-height: 900px) {
  .board { width: min(100%, 440px, max(320px, calc(100vh - 400px))); }
  .board-row .board { flex: 0 1 auto; }   /* иначе рядом со шкалой оценки доска растягивается обратно */
}

/* хаб «Играть» на телефоне: 8 соперников в строку — кружки и значки поменьше, чтобы не обрезался край */
@media (max-width: 640px) {
  .hub-ladder { gap: 5px; }
  .hub-ava { min-width: 24px; border-width: 2px; }
  .hub-ava.now { flex-basis: 52px; box-shadow: 0 0 0 3px #2B2B36; }
  .hub-ava .lock, .hub-ava.beaten::after { width: 13px; height: 13px; right: -3px; bottom: -3px; font-size: 8px; border-width: 1.5px; }
  .hub-ava .lock svg { width: 7px; height: 7px; }
}

/* разбор: доска закреплена под шапкой, пока справа листаются объяснения и вопрос «что вы упустили?» */
@media (min-width: 900px) {
  .review-layout > .board-col { position: sticky; top: calc(var(--header-h, 110px) + 8px); align-self: flex-start; }
}
/* поле PGN свёрнуто, когда партия пришла из игры или истории */
.input-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.input-head h2 { margin: 0; }
.input-panel.collapsed textarea, .input-panel.collapsed .input-actions { display: none; }
.input-panel.collapsed .input-head { margin-bottom: 8px; }
/* переключатель «оценка словами / как у движка» */
.eval-mode { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 14px; padding-top: 10px; border-top: 2px dashed var(--line); }
.eval-mode button { font-size: 12px; min-height: 30px; padding: 4px 10px; }
.eval-mode button[aria-pressed="true"] { background: var(--highlight); color: #1B1B23; border-color: var(--border); }
.nowrap { white-space: nowrap; }
.t-ico { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; vertical-align: -2px; margin-right: 2px; }
.home-about { margin: 28px 0 0; padding-top: 18px; border-top: 2px dashed var(--line); color: var(--text-2); max-width: 820px; }
.home-about h2 { font-size: 16px; margin: 0 0 6px; color: var(--text); }
.home-about p { margin: 0; font-size: 14px; line-height: 1.7; }

/* ---------- телефон: доска и ответ на одном экране ----------
   На узком экране колонки встают друг под друга, и объяснение уезжало на экран-два ниже доски.
   Теперь доска (.board-stick) прилипает к верху, а текст разбора листается прямо под ней.
   Раскладка включается классом .m-stick на .layout: колонки «растворяются» (display: contents),
   и их блоки расставляются по порядку через order. */
.move-chip { display: none; }
.coach-jump { display: none; }
/* разбор: варианты движка под объяснением тренера; на телефоне свёрнуты */
.engine-lines { margin-top: 10px; }
.engine-lines > summary { cursor: pointer; font-weight: 700; font-size: 14px; padding: 4px 0; list-style: none; }
.engine-lines > summary::-webkit-details-marker { display: none; }
.engine-lines > summary::before { content: "▸ "; display: inline-block; transition: transform .15s; }
.engine-lines[open] > summary::before { transform: rotate(90deg); }
.engine-lines > .lines { margin-top: 4px; }
/* объяснение тренера только что пришло (или к нему перешли по 💬) — короткая подсветка */
@keyframes coachFresh { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--highlight) 80%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
.explain.fresh { animation: coachFresh 1.1s ease-out 2; border-radius: var(--radius-sm); }
@media (max-width: 640px) {
  :root { --tabbar-h: calc(72px + env(safe-area-inset-bottom, 0px)); }
  /* разделы — в нижней панели, поэтому шапка уезжает при прокрутке и не отнимает высоту у доски */
  header { position: static; }
  /* липкие кнопки урока и тренажёра — над нижней панелью, а не под ней; пустая полоска не нужна */
  .lesson-layout .board-actions { bottom: var(--tabbar-h); }
  .lesson-layout .board-actions:empty { display: none; }

  .layout.m-stick { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 14px; }
  .m-stick > .board-col, .m-stick > .side-col { display: contents; }
  .m-stick > .board-col > *, .m-stick > .side-col > * { margin-top: 0; margin-bottom: 0; }
  .m-stick .board-stick {
    position: sticky; top: 0; z-index: 15; margin: 0 -16px; padding: 6px 16px 10px;
    background: var(--bg); border-bottom: 2px solid var(--line);
  }
  /* доска не выше экрана: под ней должно оставаться место для текста (на маленьких телефонах она чуть меньше) */
  .m-stick .board-stick .board { width: min(100%, max(232px, calc(100vh - 440px))); margin: 0 auto; }
  @supports (height: 100svh) {
    .m-stick .board-stick .board { width: min(100%, max(232px, calc(100svh - 440px))); }
  }
  .m-stick .board-stick .board-row { justify-content: center; }
  .m-stick .board-stick .board-row .board { flex: 0 1 auto; margin: 0; }
  .m-stick .board-stick .captures { min-height: 26px; margin: 2px 0; }

  /* разбор партии: доска → ответ движка → подсказки → главные моменты → итоги и ходы */
  .review-layout .board-stick .nav { margin-top: 8px; gap: 6px; }
  .review-layout .nav button { min-height: 40px; padding: 6px 4px; }
  .review-layout .nav #firstBtn, .review-layout .nav #lastBtn { flex: 0 0 40px; }
  .m-hide { display: none; }
  .review-layout .move-chip {
    display: flex; flex: 2.2 1 0; min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: 0;
    padding: 2px 6px; line-height: 1.15; white-space: nowrap; overflow: hidden;
  }
  .move-chip b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .move-chip span { font-size: 11px; font-weight: 600; color: var(--text-2); }
  .move-chip.v-mistake b, .move-chip.v-blunder b, .move-chip.v-inaccuracy b { color: var(--mc); }
  .move-chip.v-inaccuracy { --mc: var(--inacc); }
  .move-chip.v-mistake { --mc: var(--mistake); }
  .move-chip.v-blunder { --mc: var(--blunder); }
  .review-layout .coach-jump { display: grid; place-items: center; flex: 0 0 44px; font-size: 18px; padding: 0; }
  .review-layout .coach-jump[hidden] { display: none; }
  .review-layout .coach-jump.ask { opacity: .65; }
  .review-layout .view-toggle { display: none; }
  .review-layout #detail { order: 1; }
  .review-layout .whatif-hint, .review-layout .legend, .review-layout .players { order: 2; }
  .review-layout #keyPanel { order: 3; }
  .review-layout .side-col > .panel:not(#detail):not(#keyPanel) { order: 4; }

  /* тренировка с движком: доска → страховка, чей ход, листание ходов → разбор хода → кнопки партии → остальное */
  .coach-mode .m-stick #guardBox, .coach-mode .m-stick .turn-indicator, .coach-mode .m-stick .history-nav { order: 1; }
  .coach-mode .m-stick #detailPanel { order: 2; }
  .coach-mode .m-stick .board-actions { order: 3; }
  .coach-mode .m-stick .side-col > .panel:not(#detailPanel) { order: 4; }
  .coach-mode .m-stick #ladderPanel { order: 5; }
  .coach-mode .m-stick .settings { order: 6; }
}

/* уроки на телефоне: текст шага, доска и кнопка «Дальше» — на одном экране без прокрутки.
   Панель компактнее (аватар меньше, раздел не повторяем — он есть на карте уроков), доска не выше,
   чем остаётся места под текстом. */
@media (max-width: 640px) {
  #layout.lesson-layout { gap: 12px; }
  .lesson-panel { gap: 8px; padding: 12px 14px; }
  .lesson-panel .crumbs { display: none; }
  .lesson-panel .lesson-title { font-size: 18px; }
  .lesson-panel .coach { gap: 10px; }
  .lesson-panel .coach-ava { width: 38px; height: 38px; }
  .lesson-panel .bubble { padding: 10px 12px; }
  #layout.lesson-layout .board { width: min(100%, max(260px, calc(100vh - 500px))); margin: 0 auto; }
  @supports (height: 100svh) {
    #layout.lesson-layout .board { width: min(100%, max(260px, calc(100svh - 500px))); }
  }
  #layout.lesson-layout .board-note { margin-top: 8px; }
}
.m-only { display: none; }
@media (max-width: 640px) {
  .m-only { display: inline; }
  /* кнопки урока — в одну строку: «Подсказка» и «Заново» на телефоне — значками */
  #layout.lesson-layout .board-actions { flex-wrap: nowrap; gap: 8px; }
  #layout.lesson-layout .board-actions button { padding-left: 10px; padding-right: 10px; white-space: nowrap; min-width: 0; }
  #layout.lesson-layout .board-actions #prevBtn, #layout.lesson-layout .board-actions #hintBtn,
  #layout.lesson-layout .board-actions #retryBtn { flex: 0 0 44px; padding: 0; font-size: 18px; }
  #layout.lesson-layout .board-actions .spacer { display: none; }
}
@media (max-width: 640px) {
  /* липкая панель тренажёра и «Угадай ход»: после ответа неактивные «Подсказка» / «Показать ответ» не нужны —
     остаются «Следующая →» и «Переиграть», в одну строку */
  .lesson-layout.m-stick .board-actions button:disabled { display: none; }
  .lesson-layout.m-stick .board-stick[hidden] ~ .board-actions { display: none; }   /* пустой тренажёр — без полоски кнопок */
  /* порядок: доска → отклик → задание / оценка хода → легенда → прочие панели; кнопки — последними,
     поэтому они всё время прилипают к низу экрана, а не висят посреди текста */
  .lesson-layout.m-stick .board-note { order: 1; }
  .lesson-layout.m-stick .side-col > * { order: 4; }
  .lesson-layout.m-stick .side-col > :first-child { order: 2; }
  .lesson-layout.m-stick .legend { order: 3; }
  .lesson-layout.m-stick .board-actions { order: 9; }
  .lesson-layout.m-stick .board-actions { flex-wrap: nowrap; gap: 8px; }
  .lesson-layout.m-stick .board-actions > button, .lesson-layout.m-stick .board-actions > .btn { flex: 1 1 auto; min-width: 0; }
  .lesson-layout.m-stick .board-actions button { width: 100%; white-space: nowrap; padding-left: 10px; padding-right: 10px; }
}

/* «Мои ошибки» на телефоне: сами ошибки — сразу после фильтров, памятка «как проработать» — после них
   (на узком экране она растягивается на пару экранов и прятала список) */
@media (max-width: 640px) {
  .mistakes-wrap { display: flex; flex-direction: column; }
  .mistakes-wrap > #list { order: 1; }
  .mistakes-wrap > #study { order: 2; }
  .mistakes-wrap > .panel:not(:first-of-type):not(#study) { order: 3; }
  .mistakes-wrap > #siteFooter { order: 4; }
}
/* окно аккаунта: почта не подтверждена */
.acc-verify { padding: 10px 12px; border-radius: 12px; border: 2px dashed var(--highlight); font-size: 14px; line-height: 1.5; }
.acc-verify .link-btn { display: block; margin-top: 6px; }

/* тренажёр: «Задачи на вашу слабость» — над каталогом тем (weakness.py) */
.weak-box { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; margin: 12px 0 4px; padding: 14px 16px;
  text-align: left; font: inherit; color: var(--text); background: var(--soft-yellow); border: 2px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: 3px 3px 0 var(--shadow); cursor: pointer; }
.weak-box b { font-size: 17px; }
.weak-box .meta { color: var(--text-2); }
.weak-box.active { background: var(--highlight); color: #2B2B36; }
.weak-box.active .meta, .weak-box.active .weak-kicker { color: #4A4A58; }
.weak-box.off { background: var(--card-2); box-shadow: none; border-style: dashed; cursor: default; }
.weak-kicker { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.focus-goal .focus-more { display: block; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--text-2); }

/* разбор: партии с Lichess и Chess.com (importer.py) */
.import-box { margin-top: 16px; padding-top: 14px; border-top: 2px dashed var(--line); display: flex; flex-direction: column; gap: 8px; }
.import-box:empty { display: none; }
.input-panel.collapsed .import-box { display: none; }
.import-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.import-head h3 { margin: 0; font-size: 16px; }
.import-box p { margin: 0; }
.import-form { display: flex; gap: 8px; flex-wrap: wrap; }
.import-form input { flex: 1 1 160px; min-width: 0; }
.import-accs { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; }
.import-acc .link-btn { padding: 0 4px; min-height: 0; }
.import-acc .err { display: block; font-size: 12px; color: var(--blunder); }
.import-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; }
.import-list li { display: grid; grid-template-columns: 84px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.import-site { font-size: 12px; font-weight: 800; color: var(--text-2); }
.import-act { justify-self: end; }
@media (max-width: 560px) {
  .import-list li { grid-template-columns: 1fr auto; }
  .import-site { grid-column: 1 / -1; }
}
.import-older { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- страница «Премиум» ---------- */
.pro-hero { display: flex; gap: 24px; align-items: center; padding: 28px 30px; margin-bottom: var(--gap); border-radius: var(--radius);
  background: var(--highlight); color: #2B2B36; border: var(--bw) solid var(--border); box-shadow: 6px 6px 0 var(--shadow); }
.pro-hero-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pro-hero h2 { margin: 0; font-size: 34px; line-height: 1.1; color: #2B2B36; }
.pro-hero p { margin: 0; font-size: 16px; max-width: 34em; }
.pro-hero .kicker { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pro-hero .meta { color: #4A4A58; }
.pro-hero .err { color: #9B1D2E; font-weight: 700; }
.pro-fen { flex: none; }
.pro-status { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin-top: 6px; }
.pro-on { font-size: 18px; font-weight: 800; }
.pro-links { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.pro-links a { color: #2B2B36; font-weight: 700; }
.pro-start { margin-top: 10px; }
.pro-steps-title { font-family: var(--font-display); font-weight: 800; color: #2B2B36; margin-bottom: 6px; }
.pro-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; color: #2B2B36; font-size: 15px; line-height: 1.45; }
.pro-steps a { color: #2B2B36; font-weight: 800; }
.pro-steps li.ok::marker { content: "✓  "; font-weight: 800; }
.pro-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-bottom: var(--gap); }
.pro-card { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: var(--radius-sm); background: var(--card);
  border: var(--bw) solid var(--border); box-shadow: 3px 3px 0 var(--shadow); color: var(--text); text-decoration: none; }
a.pro-card:hover { background: var(--card-2); color: var(--text); }
.pro-card b { font-size: 17px; }
.pro-card span { font-size: 14px; color: var(--text-2); line-height: 1.5; }
.pro-table-wrap { overflow-x: auto; }
.pro-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pro-table th, .pro-table td { text-align: left; padding: 9px 10px; border-bottom: 2px solid var(--line); vertical-align: top; }
.pro-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
.pro-table td:last-child { font-weight: 700; }
.pro-prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin: var(--gap) 0 10px; }
.pro-price { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 18px 20px; border-radius: var(--radius-sm);
  background: var(--card); border: var(--bw) solid var(--border); }
.pro-price.best { box-shadow: 4px 4px 0 var(--highlight); }
.pro-save { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--highlight); color: #2B2B36;
  letter-spacing: 0; font-weight: 800; }
.pro-price .kicker { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.pro-sum { font-size: 16px; } .pro-sum b { font-family: var(--font-display); font-size: 34px; }
.pro-note { margin-bottom: 20px; }
@media (max-width: 760px) { .pro-cards, .pro-prices { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .pro-hero { flex-direction: column-reverse; align-items: flex-start; padding: 20px; }
  .pro-hero h2 { font-size: 26px; }
  .pro-fen svg { width: 96px; height: auto; }
}

/* главная: полоса «Партии с Lichess и Chess.com» */
.import-strip { display: flex; align-items: center; gap: 16px; }
.import-strip-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.import-strip-text b { font-size: 17px; }
.import-strip-text span { color: var(--text-2); font-size: 14px; }
@media (max-width: 560px) { .import-strip { flex-direction: column; align-items: stretch; } }

/* ---------- темы доски — награды за прогресс (cosmetics.py) ----------
   :root:root — чтобы перебить и светлую, и тёмную тему сайта (там переменные доски заданы на :root[...]). */
:root:root[data-board="mint"] { --sq-light: #EAF3E3; --sq-dark: #8CBFA3; }
:root:root[data-board="marble"] { --sq-light: #ECEBE6; --sq-dark: #A4A3AE; }
:root:root[data-board="night"] { --sq-light: #CFD8E6; --sq-dark: #4C6A94; }
:root:root[data-board="wood"] { --sq-light: #F0D9B5; --sq-dark: #B58863; }
:root:root[data-board="tournament"] { --sq-light: #EEEED2; --sq-dark: #769656; }
:root:root[data-board="coral"] { --sq-light: #FBE6DA; --sq-dark: #DE8466; }
:root:root[data-board="gold"] { --sq-light: #FFF4D2; --sq-dark: #CFA03A; }
.board-picks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.board-pick { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; font: inherit; font-size: 12px;
  font-weight: 700; color: var(--text); background: var(--card); border: 2px solid var(--line); border-radius: 12px; cursor: pointer; }
.board-pick.on { border-color: var(--border); background: var(--card-2); box-shadow: 2px 2px 0 var(--shadow); }
.board-pick:disabled { cursor: default; opacity: .55; }
.board-pick .sw { width: 44px; height: 44px; border-radius: 8px; border: 2px solid var(--border);
  background: conic-gradient(var(--d) 25%, var(--l) 0 50%, var(--d) 0 75%, var(--l) 0) 0 0 / 22px 22px; }
.board-pick .lk { font-size: 11px; font-weight: 600; color: var(--text-2); text-align: center; line-height: 1.2; }
@media (max-width: 420px) { .board-picks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ник для игры с людьми (nicks.py) */
.nick-box { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; margin: 4px 0 12px; border-radius: var(--radius-sm);
  background: var(--soft-yellow); border: 2px solid var(--border); }
.nick-row { display: flex; gap: 8px; }
.nick-row input { flex: 1; min-width: 0; }
.nick-box .err, .acc-nick .err { color: var(--blunder); }
.acc-nick { display: flex; flex-direction: column; gap: 6px; }

/* значок Премиума — у своего бейджа в шапке и у ника в партиях с людьми */
.pro-star { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 4px; border-radius: 50%;
  background: var(--highlight); color: #2B2B36; border: 1.5px solid var(--border); font-size: 12px; line-height: 1; flex: none; }
.me-badge .pro-star { margin: 0 2px 0 0; }
/* классические цвета доски — для половины игрока без темы (партии с людьми: каждая половина в теме своего игрока) */
:root { --classic-light: #FFF3D6; --classic-dark: #7FB2D9; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --classic-light: #E6DCC2; --classic-dark: #5C84AC; } }
:root[data-theme="dark"] { --classic-light: #E6DCC2; --classic-dark: #5C84AC; }

/* ---------- наборы фигур (cosmetics.PIECES) — через переменные --pc-wK… из pieces.css ----------
   html[data-pieces] — для всей страницы; .board[data-wset] / [data-bset] — в партии с людьми каждая сторона своим
   набором; «classic» сбрасывает переменные к классике. Размер фигуры на клетке: --ps-w / --ps-b. */
.sq > .piece[class*="piece-w"] { background-size: var(--ps-w, 88%); }
.sq > .piece[class*="piece-b"] { background-size: var(--ps-b, 88%); }
html[data-pieces="marker"], .board[data-wset="marker"], [data-pset="marker"] { --pc-wK: url(/static/pieces/marker/wK.svg); --pc-wQ: url(/static/pieces/marker/wQ.svg); --pc-wR: url(/static/pieces/marker/wR.svg); --pc-wB: url(/static/pieces/marker/wB.svg); --pc-wN: url(/static/pieces/marker/wN.svg); --pc-wP: url(/static/pieces/marker/wP.svg); --ps-w: 100%; }
html[data-pieces="marker"], .board[data-bset="marker"], [data-pset="marker"] { --pc-bK: url(/static/pieces/marker/bK.svg); --pc-bQ: url(/static/pieces/marker/bQ.svg); --pc-bR: url(/static/pieces/marker/bR.svg); --pc-bB: url(/static/pieces/marker/bB.svg); --pc-bN: url(/static/pieces/marker/bN.svg); --pc-bP: url(/static/pieces/marker/bP.svg); --ps-b: 100%; }
.board[data-wset="classic"], [data-pset="classic"] { --pc-wK: initial; --pc-wQ: initial; --pc-wR: initial; --pc-wB: initial; --pc-wN: initial; --pc-wP: initial; --ps-w: 88%; }
.board[data-bset="classic"], [data-pset="classic"] { --pc-bK: initial; --pc-bQ: initial; --pc-bR: initial; --pc-bB: initial; --pc-bN: initial; --pc-bP: initial; --ps-b: 88%; }
.piece-pick .sw { background: var(--sq-light) center / 90% no-repeat; }

/* ---------- страница «Оформление» (/look) ---------- */
.look-top { display: flex; gap: 28px; align-items: center; margin-bottom: var(--gap); }
.look-preview { flex: none; width: min(100%, 400px); display: flex; flex-direction: column; gap: 10px; }
.look-preview .board { width: 100%; }
.look-now { font-size: 14px; } .look-lock { color: var(--text-2); }
.look-intro { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.look-intro h2 { margin: 0; font-size: 30px; } .look-intro p { margin: 0; }
.look-intro label.check { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.look-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.look-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 10px; border-radius: var(--radius-sm);
  border: 2px solid var(--line); background: var(--card); text-align: center; }
.look-card.on { border-color: var(--border); box-shadow: 3px 3px 0 var(--shadow); }
.look-card.tried { outline: 3px solid var(--highlight); outline-offset: 2px; }
.look-try { padding: 0; border: 0; background: none; box-shadow: none; cursor: pointer; min-height: 0; }
.look-sw { display: block; width: 96px; height: 96px; border-radius: 12px; border: 2px solid var(--border);
  background: conic-gradient(var(--d) 25%, var(--l) 0 50%, var(--d) 0 75%, var(--l) 0) 0 0 / 48px 48px; }
.look-pcs { display: grid; grid-template-columns: repeat(3, 40px); grid-template-rows: repeat(2, 40px); gap: 2px; padding: 6px;
  border-radius: 12px; border: 2px solid var(--border); background: var(--sq-light); }
.look-pcs .piece { display: block; width: 40px; height: 40px; background-size: 100%; }
.look-state { font-size: 12px; font-weight: 600; color: var(--text-2); }
.look-state.on { color: var(--ok); font-weight: 800; }
.look-card.locked .look-sw, .look-card.locked .look-pcs { opacity: .8; }
@media (max-width: 760px) { .look-top { flex-direction: column; align-items: stretch; } .look-preview { margin: 0 auto; } }
/* ссылка «Доска и фигуры» под доской */
.look-link { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.look-link:hover { color: var(--text); }
.coach-mode .m-stick .look-link { order: 3; }

/* ---------- Премиум в шапке: «★ Премиум» (ссылка на /premium) и золотое кольцо у аватара ---------- */
.me-badge-link { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.me-badge-link:hover .lvl-chip, .me-badge-link:hover .streak { box-shadow: 2px 2px 0 var(--shadow); }
.pro-pill { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 6px; border-radius: 999px;
  background: var(--highlight); color: #2B2B36; border: 2px solid var(--border); font-size: 13px; font-weight: 800; text-decoration: none; }
.pro-pill:hover { color: #2B2B36; box-shadow: 2px 2px 0 var(--shadow); }
.pro-pill .pro-ico { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #2B2B36; color: #FFD35C; font-size: 13px; }
@media (max-width: 760px) { .pro-pill { padding: 0 6px; } .pro-pill .pro-txt { display: none; } }
.account-btn.pro .acc-ava { position: relative; box-shadow: 0 0 0 3px var(--highlight); }
.account-btn .acc-pro { position: absolute; right: -7px; bottom: -6px; display: grid; place-items: center; width: 16px; height: 16px;
  border-radius: 50%; background: #2B2B36; color: #FFD35C; font-size: 10px; line-height: 1; border: 1.5px solid var(--highlight); }
.pvp-player .pro-star { width: 24px; height: 24px; font-size: 14px; }

/* оформление подписки на /premium */
.pro-pay { display: flex; flex-direction: column; gap: 12px; margin: var(--gap) 0 10px; }
.pro-pay h2 { margin: 0; }
.pro-pay .pro-prices { margin: 0; }
.pro-price { cursor: pointer; position: relative; }
.pro-price input { position: absolute; top: 14px; right: 14px; width: 20px; height: 20px; accent-color: var(--primary); }
/* выбранный срок — жёлтая рамка и тень; «выгодный» год без выбора — только плашка «−30%», иначе он выглядел выбранным */
.pro-price.best:not(:has(input:checked)) { box-shadow: none; }
.pro-price:has(input:checked) { border-color: var(--highlight); box-shadow: 4px 4px 0 var(--highlight); background: var(--card-2); }
.pro-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; max-width: 46em; }
.pro-consent input { margin-top: 3px; flex: none; width: 18px; height: 18px; }
.pro-pay .hub-btn { align-self: flex-start; }
.pro-pay .err:empty { display: none; }
.pro-sub { font-size: 14px; line-height: 1.5; max-width: 36em; }
.pro-sub .link-btn { margin-left: 6px; color: #2B2B36; font-weight: 800; text-decoration: underline; }
.pro-sub a { color: #2B2B36; font-weight: 800; }   /* на жёлтом фоне синяя ссылка почти не видна */

/* предложение Премиума «в момент боли» (Progress.teaser) */
.teaser { display: flex; gap: 14px 20px; align-items: center; flex-wrap: wrap; }
.teaser-main { flex: 1 1 320px; line-height: 1.5; }
.teaser .kicker { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); margin-bottom: 4px; }
.teaser-main .meta { margin-top: 4px; }
.teaser-act { display: flex; align-items: center; gap: 12px; }
.teaser-card { border-color: var(--highlight); }

/* дебюты и сравнение с игроками уровня (progress.html) */
.op-worst { padding: 10px 12px; border: 2px solid var(--highlight); border-radius: var(--radius-sm); margin-bottom: 12px; line-height: 1.5; }
.op-worst a { font-weight: 700; white-space: nowrap; }
.op-side { font-size: 14px; margin: 12px 0 6px; color: var(--text-2); }
.op-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.op-table th { text-align: left; font-size: 12px; color: var(--text-2); font-weight: 700; padding: 4px 6px; }
.op-table td { padding: 6px; border-top: 1px solid var(--line); }
.op-table tr.worst td { background: color-mix(in srgb, var(--blunder) 12%, transparent); }
.op-list { margin: 0; padding-left: 18px; line-height: 1.7; }
.lock-msg.lock-inline { position: static; margin-top: 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  padding: 12px 14px; border: 2px dashed var(--line); border-radius: var(--radius-sm); }
.lock-inline b { font-size: 16px; } .lock-inline span { font-size: 14px; color: var(--text-2); }
@media (max-width: 560px) { .op-table th:nth-child(3), .op-table td:nth-child(3) { display: none; } }

/* план на неделю (today.html, plan.py) */
.plan-week-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.plan-week-head h2 { margin: 2px 0 0; }
.plan-week .kicker, .plan-week-lock .kicker { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.plan-days { display: flex; gap: 6px; }
.plan-day { width: 34px; height: 34px; border-radius: 10px; border: 2px solid var(--line); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--text-2); }
.plan-day.done { background: var(--primary); border-color: var(--border); color: var(--primary-text); }
.plan-day.today { border-color: var(--highlight); color: var(--text); }
.plan-day.future { opacity: .5; }
.plan-tasks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.plan-task { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 2px solid var(--line); border-radius: var(--radius-sm);
  color: var(--text); text-decoration: none; font-weight: 600; line-height: 1.3; }
.plan-task:hover { border-color: var(--border); }
.plan-task.done { opacity: .65; }
.plan-check { flex: none; min-width: 40px; height: 28px; border-radius: 8px; background: var(--card-2); border: 2px solid var(--line);
  display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.plan-task.done .plan-check { background: var(--ok); border-color: var(--border); color: #fff; }
.plan-week-lock { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; line-height: 1.5; }
.plan-week-lock b { display: block; margin: 2px 0; }
@media (max-width: 560px) { .plan-day { width: 30px; height: 30px; } }

/* главная: игра с людьми (today.html, #pvpHome) */
.pvp-home { display: flex; justify-content: space-between; align-items: center; gap: 16px 28px; flex-wrap: wrap; }
.pvp-home-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pvp-home-main h2 { margin: 0; }
.pvp-home-main .kicker { color: var(--text-2); }
.pvp-home-ratings { display: flex; gap: 8px 18px; flex-wrap: wrap; }
.pvp-home-rating { display: flex; flex-direction: column; }
.pvp-home-rating b { font-family: var(--font-display); font-size: 20px; line-height: 1.2; }
.pvp-home-alert { font-weight: 800; color: var(--accent); text-decoration: none; }
.pvp-home-alert:hover { text-decoration: underline; }
.pvp-home-actions { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: 8px; }
.pvp-home-actions .hub-btn { justify-content: center; text-align: center; }
@media (max-width: 560px) { .pvp-home-actions { grid-template-columns: 1fr 1fr; width: 100%; }
  .pvp-home-actions .hub-btn { padding: 0 8px; font-size: 14px; white-space: nowrap; min-height: 44px; } }

/* ---------- поделиться разбором (chess_review.html, share.py) ---------- */
.share-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.share-row input { flex: 1 1 220px; min-width: 0; font: inherit; font-size: 14px; padding: 10px 12px; border-radius: 12px;
  border: 2px solid var(--line); background: var(--bg); color: var(--text); }
.share-row .hub-btn { min-height: 40px; padding: 0 14px; font-size: 15px; }
.share-intro .board-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- приветствие «Разберём ваши партии» (today.html, ответ «Играю на Lichess или Chess.com») ---------- */
.welcome { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: center;
  padding: 30px; border-radius: var(--radius); background: var(--primary); color: var(--primary-text);
  border: var(--bw) solid var(--border); box-shadow: 6px 6px 0 var(--shadow); }
.welcome[hidden] { display: none; }
.welcome h2 { margin: 6px 0 10px; font-size: 38px; line-height: 1.08; }
.welcome p { margin: 0; font-size: 17px; line-height: 1.5; max-width: 32em; }
.welcome .kicker { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.nick-form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.site-toggle { display: inline-flex; border: 2.5px solid #0E2A22; border-radius: 16px; overflow: hidden; }
.site-toggle button { border: 0; border-radius: 0; box-shadow: none; min-height: 50px; padding: 0 16px; font-weight: 800;
  background: transparent; color: #0E2A22; }
.site-toggle button.on { background: #0E2A22; color: #FFD35C; }
.nick-form input { flex: 1 1 180px; min-width: 0; min-height: 54px; padding: 0 16px; font: inherit; font-size: 17px; border-radius: 16px;
  border: 2.5px solid #0E2A22; background: #F3F0E7; color: #1B1B23; }
.nick-form .hub-btn { background: #0E2A22; color: #FFD35C; border-color: #0E2A22; }
.welcome .welcome-msg { margin-top: 10px; font-size: 15px; font-weight: 700; min-height: 0; }
.welcome .welcome-msg:empty { display: none; }
.welcome .alt { margin-top: 14px; font-size: 15px; }
.welcome .alt a { color: inherit; font-weight: 700; }
.welcome .ex-wrap { display: flex; align-items: flex-end; gap: 6px; }
.welcome .ex-wrap .fen-ava { flex: none; }
.welcome .example { background: #F3F0E7; color: #2B2B36; border-radius: 20px; border: 2.5px solid #0E2A22; padding: 16px 18px; }
.welcome .ex-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.welcome .ex-move { font-family: var(--font-display); font-size: 20px; font-weight: 800; }
.welcome .tag-bad { background: #E5484D; color: #fff; border-radius: 999px; padding: 2px 10px; font-size: 13px; font-weight: 800; }
.welcome .example p { font-size: 15px; line-height: 1.55; }
.welcome .ex-best { margin-top: 8px; font-size: 14px; color: #1E7B53; font-weight: 700; }
.welcome .ex-note { margin-top: 10px; font-size: 12px; color: #6A6A78; }
@media (max-width: 900px) {
  .welcome { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .welcome { padding: 22px 18px; gap: 20px; }
  .welcome h2 { font-size: 30px; }
  .welcome p { font-size: 16px; }
  .welcome .ex-wrap .fen-ava { display: none; }
  .site-toggle { width: 100%; } .site-toggle button { flex: 1; }
  .nick-form .hub-btn { width: 100%; }
}

/* ---------- главная для нового посетителя (today.html: .home-grid.fresh) ---------- */
.home-grid:not(.fresh) #featuresCard { display: none; }
.home-grid.fresh #hero, .home-grid.fresh #planCard, .home-grid.fresh #focusCard, .home-grid.fresh #achCard { display: none; }
@media (min-width: 901px) {
  /* первый заход: рядом с главной кнопкой задача дня (если есть), иначе кнопка во всю ширину */
  .home-grid.fresh:not(:has(#dailyCard:not([hidden]))) #nextCard { grid-column: span 3; }
  /* дальше задача дня стоит в ряд с серией и заданиями дня — кнопка над ними во всю ширину, без пустот */
  .home-grid:not(.fresh):has(#dailyCard:not([hidden])) #nextCard { grid-column: span 3; }
}
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.feature { display: flex; flex-direction: column; gap: 6px; }
.feature .kicker { color: var(--text-2); }
.feature h3 { margin: 0; font-size: 19px; }
.feature p { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.5; }
.feature a { margin-top: auto; padding-top: 6px; font-weight: 700; }
@media (max-width: 760px) { .features { grid-template-columns: minmax(0, 1fr); } }

/* ---------- пустой тренажёр (train.html: #trainEmpty) ---------- */
.train-empty h2 { margin: 0 0 6px; font-size: 22px; }
.train-empty .meta { margin: 0; line-height: 1.55; }
.train-empty .board-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.train-ways { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.train-way { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; padding: 14px 16px; border-radius: 18px;
  border: 2px solid var(--line); background: var(--card-2, var(--card)); color: var(--text); text-decoration: none; font: inherit;
  box-shadow: none; cursor: pointer; }
.train-way:hover { border-color: var(--highlight); }
.train-way b { font-size: 16px; } .train-way span { font-size: 14px; color: var(--text-2); }
.wrap.is-empty > .panel:not(#emptyWays) { display: none; }   /* «Мои ошибки» без ошибок — только карточка «что делать» */
#emptyWays { margin-bottom: var(--gap); }
.wrap.is-empty > #list { display: none; }   /* та же подсказка — уже в карточке сверху */

/* ---------- обратная связь (feedback.js): «Написать нам», «Как вам?», опрос, 👍/👎 тренеру, причина отмены ---------- */
.fb-form textarea, .fb-quick textarea, .fb-survey textarea, .fb-cancel textarea, .fb-ai input {
  font-family: var(--font-body); font-size: 15px; line-height: 1.45; min-height: 0; }
.fb-form textarea { min-height: 120px; }
.fb-form .acc-tabs button { padding: 8px 6px; font-size: 14px; }
.fb-opt { font-weight: 500; }
.fb-note { font-size: 12px !important; }
.fb-thanks { align-items: center; text-align: center; }
.fb-thanks .acc-actions { align-self: stretch; }
.fb-fen { flex: none; display: inline-flex; }
.fb-fen:empty { display: none; }
.site-footer .footer-fb { font-weight: 700; color: var(--text); }

.fb-quick { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; padding: 14px 16px; text-align: left;
  border: 2px dashed var(--line); border-radius: var(--radius-sm); background: var(--card-2); animation: fadeUp .3s ease-out both; }
.fb-quick-head { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.fb-quick-row { display: flex; gap: 10px; flex-wrap: wrap; }
.fb-vote { flex: 1 1 140px; }
.fb-vote.on { background: var(--highlight); color: #2B2B36; }
.fb-quick .link-btn { margin-top: -4px; }

.fb-survey-card[hidden] { display: none; }
.fb-survey { display: flex; flex-direction: column; gap: 14px; }
.fb-survey-head { display: flex; gap: 14px; align-items: center; }
.fb-survey-head h2 { margin: 0 0 4px !important; font-size: 18px; }
.fb-survey-head p { margin: 0; }
.fb-survey-form { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.fb-survey-form fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fb-survey-form legend, .fb-survey-form > label { font-weight: 700; font-size: 15px; padding: 0; }
.fb-survey-form > label { display: flex; flex-direction: column; gap: 6px; }
.fb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-chip { position: relative; cursor: pointer; }
.fb-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fb-chip span, .fb-chip-btn { display: inline-block; padding: 8px 14px; border: 2px solid var(--border); border-radius: 999px;
  background: var(--card); font-size: 14px; font-weight: 600; line-height: 1.2; min-height: 0; box-shadow: none; }
.fb-chip input:checked + span, .fb-chip-btn.on { background: var(--highlight); color: #2B2B36; }
.fb-chip input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.fb-nps { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 6px; max-width: 560px; }
.fb-nps button { padding: 0; min-height: 40px; font-size: 15px; box-shadow: none; }
.fb-nps button[aria-checked="true"] { background: var(--highlight); color: #2B2B36; }
.fb-nps-ends { display: flex; justify-content: space-between; max-width: 560px; font-size: 12px; }
@media (max-width: 520px) {
  .fb-nps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .fb-nps-ends { display: none; }
  .fb-survey-head .fb-fen { display: none; }
}

.fb-ai { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; }
.fb-ai-btn { min-height: 34px; padding: 2px 10px; font-size: 16px; box-shadow: none; }
.fb-ai-btn.on { background: var(--highlight); }
.fb-ai-why { display: flex; gap: 8px; flex: 1 1 100%; }
.fb-ai-why input { flex: 1; min-width: 0; }

.fb-cancel { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; padding: 12px 14px;
  border: 2px dashed var(--line); border-radius: var(--radius-sm); }
.fb-cancel .fb-chip-btn { cursor: pointer; }
.fb-cancel-more { display: flex; flex-direction: column; gap: 8px; }
.fb-cancel-more[hidden] { display: none; }
.fb-cancel .fb-chip-btn.on { background: var(--primary); color: var(--primary-text); }

/* курсы дебютов: «что ответить?» (learn.html, goal: choose) */
.choose-opts { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.choose-opts .quiz-opt { justify-content: center; font-size: 17px; }
.quiz-opt.wrong { opacity: .55; text-decoration: line-through; border-color: var(--blunder); box-shadow: none; }
.quiz-opt.right { background: color-mix(in srgb, var(--ok) 28%, var(--card)); border-color: var(--ok); color: var(--text); }
.quiz-opt:disabled { cursor: default; }
.choose-why .quiz-result { font-weight: 500; line-height: 1.5; }
.choose-why .quiz-result b { font-weight: 800; }

/* ---------- шах, мат, итог партии (board-marks.js: markCheck, gameEnd) ---------- */
.sq.in-check { box-shadow: inset 0 0 0 3px var(--blunder), inset 0 0 22px 6px color-mix(in srgb, var(--blunder) 60%, transparent); }
.sq.mated { box-shadow: inset 0 0 0 4px var(--blunder), inset 0 0 30px 10px color-mix(in srgb, var(--blunder) 80%, transparent); }
.sq.mated .piece { transform: rotate(-78deg) scale(.9); transform-origin: 50% 85%; }   /* король повален */
.sq.check-pop { animation: checkPop .55s ease-out 2; }
.sq.mate-hit .piece { animation: kingFall .9s cubic-bezier(.5, -0.3, .6, 1.4) both; }
.board.mate-flash { animation: mateFlash 1.1s ease-out; }
.board.end-win { animation: endWin 1.6s ease-out; }
.board.end-loss { animation: endShake .45s ease-in-out, endDim 2.4s ease-in-out; }
.board.end-draw { animation: endDraw 1.4s ease-in-out; }
.guard-box .res-title { display: inline-block; animation: pop .5s ease-out both; }
@keyframes checkPop {
  0% { box-shadow: inset 0 0 0 3px var(--blunder), inset 0 0 0 0 transparent; }
  50% { box-shadow: inset 0 0 0 5px var(--blunder), inset 0 0 34px 14px color-mix(in srgb, var(--blunder) 85%, transparent); }
  100% { box-shadow: inset 0 0 0 3px var(--blunder), inset 0 0 22px 6px color-mix(in srgb, var(--blunder) 60%, transparent); }
}
@keyframes kingFall {
  0% { transform: none; }
  30% { transform: translateY(-8%) rotate(8deg) scale(1.08); }
  100% { transform: rotate(-78deg) scale(.9); }
}
@keyframes mateFlash {
  0%, 100% { box-shadow: none; }
  25% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--blunder) 70%, transparent), 0 0 40px 8px color-mix(in srgb, var(--blunder) 45%, transparent); }
}
@keyframes endWin {
  0%, 100% { box-shadow: none; }
  30% { box-shadow: 0 0 0 6px var(--ok), 0 0 48px 12px color-mix(in srgb, var(--ok) 55%, transparent); }
}
@keyframes endShake {
  0%, 100% { transform: none; } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(3px); }
}
@keyframes endDim { 0%, 100% { filter: none; } 30%, 70% { filter: grayscale(.7) brightness(.82); } }
@keyframes endDraw {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 0 5px var(--highlight), 0 0 36px 8px color-mix(in srgb, var(--highlight) 45%, transparent); }
}
/* «Учиться»: карточки группами — тренировка и дебюты */
.hub-group { font-size: 18px; margin: 22px 0 10px; }
/* главная: строка «бесплатно» в первой карточке, карточка «Разбор» сразу под ней (dense — серия встаёт рядом с первой карточкой) */
.home-grid { grid-auto-flow: row dense; }
.value-line { margin-top: 14px; font-size: 13px; font-weight: 700; letter-spacing: .02em; opacity: .8; }
.review-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.home-grid.novice #pvpHome { display: none; }
/* разбор: подключение ника — первым, PGN — запасной путь */
.input-lead { margin: -6px 0 12px; color: var(--text-2); }
.input-panel .import-box { margin: 0 0 14px; padding: 0 0 14px; border-top: 0; border-bottom: 2px dashed var(--line); }
.pgn-label { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.input-panel.collapsed .input-lead, .input-panel.collapsed .pgn-label { display: none; }
/* Премиум, таблица на телефоне: название строки — на всю ширину, под ним «бесплатно» и «премиум» в две колонки */
@media (max-width: 560px) {
  .pro-table, .pro-table tbody, .pro-table thead { display: block; }
  .pro-table tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; padding: 8px 0; border-bottom: 2px solid var(--line); }
  .pro-table th, .pro-table td { border-bottom: 0; padding: 2px 0; }
  .pro-table tr > :first-child { grid-column: 1 / -1; }
  .pro-table td:first-child { font-weight: 600; }
  .pro-table th:first-child { display: none; }
}
.features > [hidden] { display: none; }
/* вопрос «С чего начнём?» карточкой на главной (fen.js, Fen.onboarding со slot): не окно, компактнее */
.fen-onboard.inline { position: static; width: auto; max-height: none; margin: 0; }
.fen-onboard.inline .fo-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fen-onboard.inline .fo-bubble { margin-bottom: 14px; }
@media (max-width: 560px) {
  .fen-onboard.inline .fo-options { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .fen-onboard.inline .fo-opt { padding: 11px 14px; }
  .fen-onboard.inline .fo-opt span { display: none; }   /* на телефоне — только заголовки: все четыре видно сразу */
  .fen-onboard.inline h2 { font-size: 21px; margin: 2px 0 10px; }
}
.fen-onboard.inline .fo-logo { visibility: hidden; }
.board-note { white-space: pre-line; }   /* в курсах дебютов: ответ соперника и следующий ход — двумя строками */
/* страница дебюта: доска, которую можно прокликать (opening-viewer.js) */
.seo .ov.ov-on { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 22px; align-items: start; }
.ov-board-live { width: 100%; }
.ov-ctrl { display: flex; gap: 6px; margin-top: 10px; }
.ov-ctrl button { flex: 1; min-height: 40px; font-size: 18px; }
.ov-title { font-family: var(--font-display); font-size: 18px; margin-bottom: 8px; }
.ov-moves { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.ov-mv { all: unset; cursor: pointer; font-family: var(--font-display); font-size: 15px; padding: 3px 7px; border-radius: 8px; }
.ov-mv:hover { background: var(--card-2); }
.ov-mv.base { color: var(--text-2); }
.ov-mv.cur { background: var(--highlight); color: #1B1B23; }
.ov-note { min-height: 72px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--card); border: 2px solid var(--line); line-height: 1.5; font-size: 16px; }
.ov-branch-h { margin: 14px 0 6px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); }
.ov-branches { display: flex; flex-wrap: wrap; gap: 6px; }
.ov-br { min-height: 34px; font-size: 14px; padding: 0 12px; }
.ov-br.cur { background: var(--highlight); color: #1B1B23; border-color: var(--border); }
.ov-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ov-acts .hub-btn { margin: 0; }
.ov-board-live .sq.last { box-shadow: inset 0 0 0 999px rgba(255, 211, 92, .45); }
@media (max-width: 700px) { .seo .ov.ov-on { grid-template-columns: 1fr; } }

/* ---------- задача дня на главной (today.html #dailyCard) ---------- */
.daily-card { display: flex; flex-direction: column; gap: 10px; }
.daily-card .kicker { color: var(--text-2); }
.daily-board { display: block; align-self: center; width: 100%; max-width: 200px; }
.daily-board svg { display: block; width: 100%; height: auto; border-radius: 12px; border: var(--bw) solid var(--border); }
.daily-done { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--primary); }
.daily-done svg { stroke: currentColor; stroke-width: 2.4; fill: none; }
.daily-card .hub-btn { align-self: flex-start; margin: 0; }

/* «Сохраните прогресс» гостю (progress.js saveNudge): не исчезает сама, кнопки кликабельны поверх #toasts */
.toast.save-nudge { pointer-events: auto; max-width: 340px; gap: 6px; border-color: var(--primary); }
.save-nudge-acts { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.save-nudge-acts button { margin: 0; }