/* ===== Шахматы с нуля — стили ===== */
:root{
  --accent:#FF7A59;
  --accent2:#4EC5F1;
  --ok:#3BC97D;
  --err:#FF5A6E;
  --text:#2E2A4F;
  --card:#FFFFFF;
  --shadow:0 10px 26px rgba(46,42,79,.14);
  /* фон и акцент темы — переопределяются из game.js при смене темы */
  --bg1:#FFF6E5; --bg2:#FFE3F1; --bg3:#E6F4FF;
  --theme-accent:#FF7A59;
  /* доска и фигуры: значения по умолчанию, тема переопределяет их из game.js */
  --sq-light:#F0D9B5;
  --sq-dark:#B58863;
  --frame:#7A5230;
  --pw1:#FFFDF8; --pw2:#F3E3C8; --pw3:#D9BE95;
  --pb1:#6E6579; --pb2:#3B3448; --pb3:#211C2B;
  /* Сторона доски. Отсюда же считается размер фигуры: проценты для знака
     не работают, а clamp по vmin промахивается на низких экранах. */
  /* --bw-base — сколько доска занимает по умолчанию, --bw-k — во сколько раз
     её увеличила кнопка «Размер доски» (game.js). Ширина всё равно упирается
     в 96vw: доска может вылезти вниз и заставить страницу прокрутиться,
     но вбок — никогда, иначе на телефоне пропадёт край доски. */
  --bw-base:min(90vw, 54vh, 480px);
  --bw-k:1;
  --bw:min(96vw, calc(var(--bw-base) * var(--bw-k)));
}

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

html,body{height:100%;}
body{
  margin:0;
  font-family:"Naukino Emoji", system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:18px;
  color:var(--text);
  background:linear-gradient(160deg,var(--bg1),var(--bg2) 55%,var(--bg3));
  transition:background .6s ease;
  min-height:100%;
  -webkit-text-size-adjust:100%;
}

.app{
  max-width:1000px;
  position:relative;
  z-index:1;              /* интерфейс поверх украшений темы */
  margin:0 auto;
  padding:10px 12px 28px;
}

/* ---------- Верхняя панель ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:6px 2px 12px;
}
.brand{font-weight:800;font-size:clamp(17px,4.4vw,24px);letter-spacing:.2px;}
.topbtns{display:flex;gap:8px;}
.icon-btn{
  font-size:22px;line-height:1;
  width:46px;height:46px;border:none;border-radius:16px;
  background:#fff;box-shadow:var(--shadow);cursor:pointer;
  transition:transform .12s ease, filter .12s ease;
}
.icon-btn:hover{transform:translateY(-2px);}
.icon-btn:active{transform:translateY(1px) scale(.96);}
.icon-btn.off{filter:grayscale(1) opacity(.55);}

/* ---------- Размер доски ----------
   Кнопка ⤢ в верхней панели перебирает размеры по кругу, а подпись
   всплывает на секунду: иначе после нажатия непонятно, какой размер
   сейчас и сколько их всего. Подпись поверх всего и кликов не ловит. */
.size-toast{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  z-index:40; pointer-events:none;
  padding:10px 18px; border-radius:999px;
  background:rgba(46,42,79,.90); color:#fff;
  font-size:17px; font-weight:800; white-space:nowrap;
  box-shadow:0 10px 24px rgba(46,42,79,.28);
  animation:sizeToast 1.4s ease forwards;
}
@keyframes sizeToast{
  0%{opacity:0;transform:translateX(-50%) translateY(8px);}
  12%{opacity:1;transform:translateX(-50%) translateY(0);}
  76%{opacity:1;}
  100%{opacity:0;}
}

@media (prefers-reduced-motion:reduce){
  .size-toast{animation:none;opacity:1;}
}
/* На узком телефоне доска и так во всю ширину: увеличивать нечего, а кнопка
   только теснит верхнюю панель — там уже «Выйти», название и звук. */
@media (max-width:640px) and (orientation:portrait){
  #btnSize{display:none;}
}

button:focus-visible,
summary:focus-visible{
  outline:4px solid #6C63FF;
  outline-offset:3px;
}

/* ---------- Экраны ---------- */
.screen{display:none;}
.screen.active{display:block;animation:fadeIn .3s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

.card{
  background:var(--card);
  border-radius:26px;
  box-shadow:var(--shadow);
  padding:clamp(14px,3.2vw,26px);
}

/* ---------- Старт ---------- */
.start-card{text-align:center;}
.start-emoji{font-size:clamp(48px,14vw,84px);line-height:1;margin-bottom:6px;}
.start-card h1{font-size:clamp(26px,7vw,40px);margin:.1em 0 .25em;}
.rules{font-size:clamp(17px,3.6vw,20px);line-height:1.5;margin:0 auto 18px;max-width:620px;}
.diff-title{font-weight:700;margin-bottom:10px;font-size:19px;}
.diff-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:20px;}
.diff-btn{
  flex:1 1 150px;max-width:220px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:14px 10px;border:3px solid #EFE9FF;border-radius:22px;
  background:#FBF8FF;cursor:pointer;font-family:inherit;color:var(--text);
  transition:transform .12s ease,border-color .15s ease,background .15s ease;
}
.diff-btn:hover{transform:translateY(-3px);border-color:#D9CCFF;}
.diff-btn:active{transform:translateY(0) scale(.98);}
.diff-btn.sel{border-color:var(--accent);background:#FFF1EC;box-shadow:0 6px 16px rgba(255,122,89,.25);}
.d-emoji{font-size:34px;line-height:1;}
.d-name{font-weight:800;font-size:19px;}
.d-note{font-size:14px;opacity:.7;}

.big-btn{
  font-family:inherit;font-weight:800;font-size:clamp(19px,4.4vw,23px);color:#fff;
  background:linear-gradient(180deg,#FF9575,var(--accent));
  border:none;border-radius:22px;padding:15px 32px;cursor:pointer;margin:0 5px 8px;
  box-shadow:0 8px 18px rgba(255,122,89,.4);
  transition:transform .12s ease,box-shadow .12s ease;
}
.big-btn:hover{transform:translateY(-2px);box-shadow:0 12px 22px rgba(255,122,89,.45);}
.big-btn:active{transform:translateY(2px) scale(.98);}
.big-btn.alt{background:linear-gradient(180deg,#7ED8F7,var(--accent2));box-shadow:0 8px 18px rgba(78,197,241,.4);}
/* «Учиться с нуля» — первая кнопка для того, кто игру видит впервые */
.big-btn.learn{
  display:block;width:100%;max-width:420px;margin:0 auto 6px;
  background:linear-gradient(180deg,#8FE3A8,#3BC97D);
  box-shadow:0 8px 18px rgba(59,201,125,.42);
}
.learn-note{font-size:15px;opacity:.75;margin-bottom:20px;}
.best-line{margin-top:14px;font-size:16px;opacity:.75;min-height:20px;}

/* ---------- Выбор оформления ---------- */
.theme-row{
  display:grid;gap:10px;margin:0 auto 22px;max-width:660px;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:700px){.theme-row{grid-template-columns:repeat(3,1fr);}}
.theme-btn{
  display:flex;align-items:center;gap:10px;text-align:left;
  padding:9px 11px;border:3px solid #EFE9FF;border-radius:18px;
  background:#FBF8FF;cursor:pointer;font-family:inherit;color:var(--text);
  transition:transform .12s ease,border-color .15s ease,background .15s ease;
}
.theme-btn{min-width:0;}
.theme-btn:hover{transform:translateY(-3px);border-color:#D9CCFF;}
.theme-btn:active{transform:translateY(0) scale(.98);}
.theme-btn.sel{border-color:var(--accent);background:#FFF1EC;box-shadow:0 6px 16px rgba(255,122,89,.25);}
.t-text{display:flex;flex-direction:column;gap:1px;min-width:0;}
.t-name{font-weight:800;font-size:15px;line-height:1.2;}
.t-note{font-size:13px;opacity:.7;line-height:1.2;}
/* крошечная доска на кнопке: видно цвета клеток и обе фигуры */
.t-pv{
  flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;
  width:46px;height:46px;border-radius:9px;overflow:hidden;
  border:2px solid var(--pv-frame);
}
.t-pv .q{position:relative;display:block;}
.t-pv .q1,.t-pv .q4{background:var(--pv-light);}
.t-pv .q2,.t-pv .q3{background:var(--pv-dark);}
.t-pv .q b{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:78%;height:78%;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:11px;
}
.t-pv .q2 b{background:var(--pv-w);}
.t-pv .q3 b{background:var(--pv-b);}
/* в классической теме фигура рисуется знаком, а не кружком */
.t-pv-glyph .q b{background:none;font-size:16px;}
.t-pv-glyph .q2 b{color:#FFFDF8;text-shadow:0 0 2px #43304A,0 1px 0 #43304A,1px 0 0 #43304A,-1px 0 0 #43304A,0 -1px 0 #43304A;}
.t-pv-glyph .q3 b{color:#241D2C;}

/* на телефоне картинка встаёт над подписью — иначе длинные названия
   растягивают колонку и вылезают за край карточки */
@media (max-width:560px){
  .theme-btn{flex-direction:column;align-items:center;text-align:center;gap:6px;padding:10px 6px;}
  .t-text{align-items:center;}
  .t-name{font-size:14px;}
  .t-note{font-size:12px;}
}

/* ---------- Экран обучения ---------- */
.learn-title{font-size:clamp(20px,4.6vw,26px);margin:8px 0 6px;text-align:center;}
.learn-text{
  font-size:clamp(16px,3.4vw,18px);line-height:1.5;
  margin:0 auto 12px;max-width:640px;text-align:center;
}
.learn-text b{color:var(--err);}
.learn-task{
  margin:10px auto 0;max-width:640px;
  background:#F4F1FF;border-radius:16px;padding:10px 14px;
  font-size:17px;font-weight:700;text-align:center;
}
.learn-task b{color:var(--err);}
.ctrl-btn.pulse{animation:nextPulse 1.1s ease-in-out infinite;}
@keyframes nextPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.06);}}

/* ---------- Прогресс ---------- */
.progress-wrap{margin-bottom:10px;}
.progress-text{font-weight:700;font-size:17px;margin-bottom:6px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.progress-bar{height:14px;background:#fff;border-radius:10px;overflow:hidden;box-shadow:inset 0 2px 5px rgba(46,42,79,.12);}
.progress-fill{height:100%;width:0;border-radius:10px;background:linear-gradient(90deg,var(--accent2),var(--ok));transition:width .35s ease;}

/* ---------- Совёнок ---------- */
.hero-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;}
.hero-row.center{margin-top:8px;}
.hero-art{font-size:clamp(38px,9vw,54px);line-height:1;flex:0 0 auto;}
.hero-art.jump{animation:heroJump .55s ease;}
.hero-art.wiggle{animation:heroWiggle .55s ease;}
@keyframes heroJump{0%,100%{transform:translateY(0);}30%{transform:translateY(-16px) scale(1.08);}60%{transform:translateY(0);}80%{transform:translateY(-6px);}}
@keyframes heroWiggle{0%,100%{transform:rotate(0);}20%{transform:rotate(-9deg);}40%{transform:rotate(8deg);}60%{transform:rotate(-6deg);}80%{transform:rotate(4deg);}}
.bubble{
  position:relative;flex:1 1 auto;
  background:#FFF7EF;border:3px solid #FFE0CE;border-radius:20px;
  padding:12px 15px;font-size:clamp(16px,3.5vw,19px);line-height:1.4;min-height:28px;
}
.bubble::before{
  content:"";position:absolute;left:-13px;top:18px;
  border:8px solid transparent;border-right-color:#FFE0CE;
}
.bubble.ok{background:#EAFBF1;border-color:#B6EDCD;}
.bubble.err{background:#FFF0F2;border-color:#FFC9D0;}

/* ---------- Задание и подсказка ---------- */
.task-line{
  font-size:clamp(17px,3.8vw,21px);line-height:1.45;text-align:center;
  margin-bottom:10px;
}
.task-line b{color:var(--err);}
.hint-line{
  background:#F2F8FF;border:2px dashed #B9DEF7;border-radius:16px;
  padding:9px 14px;text-align:center;font-size:clamp(15px,3.4vw,18px);font-weight:600;
  margin-bottom:12px;
}

/* ================================================================
   ДОСКА
   Квадратная сетка 8×8. Размер считается сразу от трёх ограничений,
   чтобы доска целиком помещалась и в узкий телефон, и в низкое окно.
   ================================================================ */
.board-wrap{
  display:flex;justify-content:center;
  padding:4px 0 2px;
  user-select:none;-webkit-user-select:none;
}
.board{
  position:relative;
  display:grid;
  grid-template-columns:repeat(8,1fr);
  width:var(--bw);
  aspect-ratio:1;
  border:7px solid var(--frame);
  border-radius:16px;
  overflow:hidden;
  background:var(--sq-light);
  box-shadow:0 12px 28px rgba(46,42,79,.28), 0 0 0 3px var(--theme-accent);
}
.cell{
  position:relative;
  margin:0;padding:0;border:none;
  display:block;width:100%;height:100%;
  font:inherit;
}
.cell.light{background:var(--sq-light);}
.cell.dark{background:var(--sq-dark);cursor:pointer;touch-action:manipulation;}
.cell.dark:hover{filter:brightness(1.08);}
.cell:focus-visible{outline:4px solid #6C63FF;outline-offset:-4px;z-index:3;}

/* фигура — шахматный знак Юникода. Белые рисуются тем же знаком, только
   светлой заливкой с тёмной обводкой: так обе стороны одной формы и не
   зависят от того, есть ли в системе «полые» глифы. */
.piece{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:calc(var(--bw) / 8 * .80);
  line-height:1;
  animation:piecePop .25s ease;
  z-index:2;
  pointer-events:none;
}
@keyframes piecePop{from{transform:scale(.5);opacity:0;}to{transform:scale(1);opacity:1;}}
.p-black{
  color:#2B2438;
  text-shadow:0 1px 0 rgba(255,255,255,.30), 0 2px 3px rgba(0,0,0,.35);
}
/* фигура темы: эмодзи на кружке. Кружок и говорит, чья это фигура,
   поэтому в тёмных темах он заметно темнее светлого. */
.piece.p-disc{text-shadow:none;}
.piece.p-disc::before{
  content:"";position:absolute;left:50%;top:50%;
  width:84%;height:84%;transform:translate(-50%,-50%);
  border-radius:50%;z-index:0;
}
.p-disc.p-white::before{
  background:radial-gradient(circle at 34% 28%, var(--pw1), var(--pw2) 68%, var(--pw3));
  box-shadow:0 3px 0 rgba(90,60,30,.32), inset 0 -4px 7px rgba(140,95,50,.3), inset 0 4px 8px rgba(255,255,255,.65);
}
.p-disc.p-black::before{
  background:radial-gradient(circle at 34% 28%, var(--pb1), var(--pb2) 66%, var(--pb3));
  box-shadow:0 3px 0 rgba(15,10,25,.45), inset 0 -4px 7px rgba(0,0,0,.45), inset 0 4px 8px rgba(255,255,255,.22);
}
.face{
  position:relative;z-index:1;font-style:normal;line-height:1;
  font-size:calc(var(--bw) / 8 * .52);
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.28));
}
.eaten-face{font-style:normal;}

.p-white{
  color:#FFFDF8;
  /* обводка из восьми теней — работает везде, в отличие от -webkit-text-stroke */
  text-shadow:
    1px 0 0 #43304A, -1px 0 0 #43304A, 0 1px 0 #43304A, 0 -1px 0 #43304A,
    1px 1px 0 #43304A, -1px -1px 0 #43304A, 1px -1px 0 #43304A, -1px 1px 0 #43304A,
    0 3px 4px rgba(0,0,0,.30);
}

/* подписи клеток по краю доски */
/* Первый урок — «буква снизу, цифра сбоку»: подписи надо читать, а не
   угадывать. При кегле до 11 и прозрачности .6 буква на светлой клетке
   почти пропадала, и ребёнок искал d4 наощупь. */
.coord{
  position:absolute;font-size:clamp(9px,1.9vmin,14px);font-weight:800;
  opacity:.9;pointer-events:none;z-index:1;
}
.coord-file{right:3px;bottom:1px;}
.coord-rank{left:3px;top:1px;}
.cell.dark .coord{color:#FFF6E8;}
.cell.light .coord{color:#6B421F;}

/* ---------- Отметки на клетках ----------
   Порядок правил важен: правило ниже перекрывает то, что выше,
   когда на клетке оказалось сразу две отметки. */
.cell.mk-can::after{
  content:"";position:absolute;left:50%;top:50%;
  width:30%;height:30%;transform:translate(-50%,-50%);
  border-radius:50%;background:rgba(255,255,255,.75);
  box-shadow:0 0 0 3px rgba(78,197,241,.55);
  z-index:3;
}
.cell.mk-cancap::after{
  content:"";position:absolute;inset:6%;
  border-radius:50%;
  box-shadow:inset 0 0 0 5px rgba(255,90,110,.75);
  z-index:3;
}
.cell.mk-check::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle, rgba(255,90,110,.85), rgba(255,90,110,0) 72%);
  z-index:1;
}
.cell.mk-pick::after{
  content:"";position:absolute;left:50%;top:50%;
  width:46%;height:46%;transform:translate(-50%,-50%);
  border-radius:50%;background:rgba(78,197,241,.9);
  box-shadow:0 0 0 4px rgba(78,197,241,.35);
  animation:piecePop .2s ease;
  z-index:3;
}
.cell.mk-path::before{
  content:"";position:absolute;inset:0;
  background:rgba(78,197,241,.28);
  z-index:0;
}
.cell.mk-last::before{
  content:"";position:absolute;inset:0;
  background:rgba(255,201,60,.28);
  z-index:0;
}
/* клетка, с которой сейчас едет фигура компьютера: пульсирует, пока
   фигура в пути, — так видно начало траектории хода */
.cell.mk-from::before{
  content:"";position:absolute;inset:0;
  background:rgba(255,201,60,.34);
  box-shadow:inset 0 0 0 4px rgba(255,201,60,.85);
  animation:fromPulse .7s ease-in-out infinite alternate;
  z-index:1;
}
@keyframes fromPulse{from{opacity:.55;}to{opacity:1;}}
.cell.mk-sel::before{
  content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 0 5px #FFC93C;
  background:rgba(255,201,60,.22);
  z-index:1;
}
.cell.mk-focus::after{
  content:"";position:absolute;left:50%;top:50%;
  width:94%;height:94%;transform:translate(-50%,-50%);
  border-radius:22%;border:4px solid #FFC93C;
  animation:ringPulse 1.5s ease-in-out infinite;
  z-index:3;
}
@keyframes ringPulse{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.94);}50%{opacity:1;transform:translate(-50%,-50%) scale(1.02);}}
.cell.mk-good::after{
  content:"";position:absolute;left:50%;top:50%;
  width:56%;height:56%;transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(59,201,125,.35);
  box-shadow:0 0 0 5px var(--ok);
  animation:piecePop .3s ease;
  z-index:3;
}
.cell.mk-bad{animation:shake .45s ease;}
.cell.mk-bad::after{
  content:"";position:absolute;left:50%;top:50%;
  width:56%;height:56%;transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(255,90,110,.4);
  box-shadow:0 0 0 5px var(--err);
  z-index:3;
}
@keyframes shake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-5px);}
  40%{transform:translateX(5px);}
  60%{transform:translateX(-4px);}
  80%{transform:translateX(4px);}
}

/* ---------- Строка партии ---------- */
.match-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;margin-bottom:10px;
}
.match-turn{
  font-weight:800;font-size:clamp(16px,3.8vw,20px);
  background:rgba(255,255,255,.82);border-radius:999px;padding:6px 16px;
  box-shadow:0 4px 12px rgba(46,42,79,.10);
}
.match-turn.thinking{opacity:.75;animation:thinkPulse 1.1s ease-in-out infinite;}
@keyframes thinkPulse{0%,100%{opacity:.55;}50%{opacity:1;}}
.match-score{font-size:15px;font-weight:700;opacity:.8;display:flex;align-items:center;gap:1px;flex-wrap:wrap;}
.eaten{font-style:normal;font-size:20px;line-height:1;}
.eaten.p-black{color:#2B2438;text-shadow:none;}
.eaten.p-white{color:#FFFDF8;text-shadow:1px 0 0 #43304A,-1px 0 0 #43304A,0 1px 0 #43304A,0 -1px 0 #43304A;}

/* ---------- Кнопки управления ---------- */
.controls{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px;
}
.ctrl-btn{
  font-family:inherit;font-weight:800;font-size:clamp(16px,3.6vw,19px);
  border:none;border-radius:20px;padding:13px 22px;cursor:pointer;color:#fff;
  background:linear-gradient(180deg,#FF9575,var(--accent));
  box-shadow:0 6px 14px rgba(255,122,89,.35);
  transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease;
}
.ctrl-btn:hover{transform:translateY(-2px);}
.ctrl-btn:active{transform:translateY(2px) scale(.98);}
.ctrl-btn.ghost{background:#F4F1FF;color:var(--text);box-shadow:0 4px 10px rgba(46,42,79,.12);}
.ctrl-btn.next{background:linear-gradient(180deg,#63E39C,var(--ok));box-shadow:0 6px 14px rgba(59,201,125,.4);}
.ctrl-btn[disabled]{opacity:.45;cursor:default;transform:none;}

/* ---------- Результаты ---------- */
.result-card{text-align:center;}
.result-card h2{font-size:clamp(24px,6vw,34px);margin:.1em 0 .3em;}
.stars{font-size:clamp(40px,11vw,64px);line-height:1.1;min-height:1.2em;}
.stars span{display:inline-block;opacity:0;transform:scale(.2) rotate(-40deg);animation:starPop .5s ease forwards;}
@keyframes starPop{60%{transform:scale(1.25) rotate(6deg);}100%{opacity:1;transform:scale(1) rotate(0);}}
.score-line{font-size:clamp(18px,4.2vw,22px);font-weight:700;margin:6px 0 4px;}
.parents{text-align:left;background:#FAF8FF;border-radius:18px;padding:10px 14px;margin:16px 0;}
.parents summary{cursor:pointer;font-weight:800;font-size:17px;padding:4px 0;}
.parent-body{font-size:16px;line-height:1.5;padding-top:8px;}
.parent-item{padding:8px 0;border-top:1px solid #EDE7FB;}
.parent-item b{color:var(--err);}
.parent-item .good{color:#189A5B;font-weight:700;}
.result-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

/* ---------- Узкие и низкие экраны ---------- */
@media (max-width:420px){
  .app{padding:8px 8px 22px;}
  .card{border-radius:20px;}
  .ctrl-btn{padding:12px 16px;}
  .hero-row{gap:6px;}
  .bubble{padding:10px 12px;}
  :root{--bw-base:min(94vw, 52vh, 480px);}
  .board{border-width:5px;}
}
/* лежачий экран: по высоте места мало, доска и текст ужимаются */
@media (max-height:560px) and (orientation:landscape){
  :root{--bw-base:min(52vw, 74vh, 420px);}
  .hero-art{font-size:34px;}
  .task-line{font-size:16px;margin-bottom:6px;}
  .controls{margin-top:8px;}
  .ctrl-btn{padding:9px 16px;font-size:15px;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}

/* ================================================================
   ОФОРМЛЕНИЕ РАУНДА (темы)
   Сами темы описаны в game.js (массив THEMES) — здесь только то,
   как выглядят фоновые украшения и табличка с названием темы.
   ================================================================ */
.theme-deco{
  position:fixed; inset:0; z-index:0;
  pointer-events:none; overflow:hidden;
}
.theme-deco i{
  position:absolute; display:block;
  transform:translate(-50%,-50%);
  font-style:normal;
}
.theme-deco span{
  display:block;
  opacity:.45;
  will-change:transform;
  filter:drop-shadow(0 4px 10px rgba(46,42,79,.10));
}

@keyframes thFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
@keyframes thBob{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@keyframes thDrift{0%{transform:translateX(-5vw)}100%{transform:translateX(5vw)}}
@keyframes thTwinkle{0%,100%{transform:scale(1);opacity:.30}50%{transform:scale(1.18);opacity:.62}}
.th-float{animation:thFloat 5s ease-in-out infinite}
.th-bob{animation:thBob 4.4s ease-in-out infinite}
.th-drift{animation:thDrift 15s ease-in-out infinite alternate}
.th-drift2{animation:thDrift 21s ease-in-out infinite alternate-reverse}
.th-twinkle{animation:thTwinkle 3.4s ease-in-out infinite}

.theme-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:999px;
  background:rgba(255,255,255,.82);
  border:2px solid rgba(255,255,255,.92);
  box-shadow:0 4px 12px rgba(46,42,79,.10);
  font-size:15px; font-weight:800; color:var(--text,#2E2A4F);
  white-space:nowrap; vertical-align:middle;
}
.theme-chip .th-ico{font-size:20px; line-height:1}
.theme-chip.is-new{animation:thPop .7s ease}
@keyframes thPop{0%{transform:scale(.7);opacity:0}55%{transform:scale(1.14)}100%{transform:scale(1)}}

@media (max-width:560px){
  .theme-chip .th-name{display:none}
  .theme-chip{padding:5px 9px}
  .theme-deco span{opacity:.32}
}
@media (prefers-reduced-motion:reduce){
  .theme-deco span{animation:none !important}
  .theme-chip.is-new{animation:none}
}

/* ---------- кнопка возврата на страницу игры ---------- */
/* Игра открыта в рамке сайта (docs/09-games.md), и эта кнопка — её выход:
   она просит страницу закрыть окно игры. Открытая отдельной вкладкой игра
   кнопку убирает — возвращаться неоткуда. Здесь кнопка стоит первым
   элементом собственной верхней панели и едет вместе с ней. */
.exit-btn{
  display:inline-flex; align-items:center; gap:6px;
  height:46px; padding:0 16px; flex:none;
  border:none; border-radius:16px;
  background:#fff; color:#3D3455;
  font:inherit; font-size:16px; font-weight:800; line-height:1;
  white-space:nowrap; cursor:pointer;
  box-shadow:0 3px 0 rgba(61,52,85,.12);
}
.exit-btn:hover{ background:#F2EFFF; }
.exit-btn:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(61,52,85,.12); }
@media (max-width:480px){
  .exit-btn{ height:40px; padding:0 12px; font-size:14px; }
  .brand{font-size:16px;}
}

/* ---------- Проезд фигуры компьютера ----------
   Копия фигуры едет поверх доски из клетки в клетку, пока настоящая
   позиция ещё не изменилась: ребёнок видит траекторию хода. */
.fly{
  position:absolute;
  z-index:5;
  pointer-events:none;
  transition:transform 450ms cubic-bezier(.34,.16,.28,1);
  will-change:transform;
}
.fly .piece{animation:none;}
@media (prefers-reduced-motion:reduce){
  .cell.mk-from::before{animation:none;opacity:1;}
}

/* Окно ноутбука — 720 пикселей, а до сих пор блок ужатия включался только
   ниже 560 и только в альбомной ориентации. На стартовом экране «Играть»
   уходила за нижний край вместе с выбором сложности, а на игровом — весь
   ряд кнопок, включая «Проверить»: подтвердить ход было нечем. */
@media (max-height: 800px){
  :root{ --bw-base: min(90vw, 46vh, 420px); }
  .start-card h1{ font-size: clamp(22px, 5vw, 30px); margin: .05em 0 .15em; }
  .start-emoji{ font-size: 34px; }
  .theme-btn{ padding: 5px 8px; gap: 6px; font-size: 14px; }
  .diff-btn{ padding: 6px 8px; }
  .d-emoji{ font-size: 22px; }
  .rules{ font-size: clamp(15px, 2.6vw, 17px); margin: 0 auto 10px; }
  .big-btn{ padding: 11px 24px; font-size: clamp(17px, 3.4vw, 20px); margin: 0 5px 6px; }
  .learn-note{ font-size: 14px; margin-bottom: 10px; }
  .theme-row{ gap: 7px; margin: 0 auto 12px; }
  .theme-btn{ padding: 7px 9px; gap: 7px; }
  .diff-title{ margin-bottom: 6px; font-size: 17px; }
  .diff-row{ gap: 8px; margin-bottom: 10px; }
  .diff-btn{ padding: 8px 8px; }
  .best-line{ margin-top: 8px; }
  .hero-art{ font-size: clamp(30px, 6vw, 38px); }
  .hero-row{ margin-bottom: 8px; }
  .bubble{ padding: 8px 12px; font-size: clamp(15px, 2.6vw, 17px); }
  .task-line{ font-size: clamp(16px, 3vw, 18px); margin-bottom: 6px; }
  .hint-line{ padding: 6px 12px; margin-bottom: 8px; }
  .progress-wrap{ margin-bottom: 6px; }
  .controls{ margin-top: 8px; gap: 8px; }
  .ctrl-btn{ padding: 9px 18px; font-size: clamp(15px, 3vw, 17px); }
}