/**
 * style.css — структура, компоновка и адаптивность.
 * Собрана из прежних style.css + progress.css + polish.css (2026-08-31).
 * Внешний вид (палитра, материалы, тени) живёт в visual.css, анимации — в effects.css.
 */
/* ===== style.css: структура и компоновка ===== */
:root{--surface-base:#111411;--surface-raised:#1a201c;--surface-board:#080b09;--surface-soft:#222a24;--stroke:#39443c;--stroke-strong:#66766a;--text:#f2f0e8;--muted:#aab4aa;--action:#56d7e5;--warm:#f0b84b;--success:#66d18b;--hazard:#f06c5e;--focus:#a9f1f7;--cyan:#4ec9d8;--coral:#e86a62;--amber:#e6b44a;--mint:#62c889;--iris:#8b7fd8;--r-small:6px;--r-large:14px;--gap:clamp(3px,.7vw,5px);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:dark}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden}
body{color:var(--text);background-color:var(--surface-base);background-image:linear-gradient(#202720 1px,transparent 1px),linear-gradient(90deg,#202720 1px,transparent 1px);background-size:48px 48px;overscroll-behavior:none;user-select:none}
body:after{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(17,20,17,.96),rgba(17,20,17,.55) 50%,rgba(17,20,17,.96))}
#app{height:100%;isolation:isolate;position:relative;z-index:1}
.booting #app{visibility:hidden}
.hidden{display:none!important}
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ui-icon,svg{width:1.2em;height:1.2em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:square;stroke-linejoin:miter}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.screen{height:100%;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
/* Menu: editorial split on wide screens, compact stack on phones. */
.menu-screen{display:grid;grid-template-columns:minmax(250px,340px) minmax(340px,430px);grid-template-rows:auto auto 1fr auto;column-gap:72px;align-content:center;justify-content:center;align-items:end}
.logo{grid-column:1;grid-row:1;display:grid;grid-template-columns:repeat(3,23px);grid-template-rows:repeat(3,23px);gap:5px;margin:0 0 20px}
.logo i{clip-path:polygon(0 0,78% 0,100% 22%,100% 100%,0 100%);background:var(--cyan);box-shadow:inset 0 -4px rgba(0,0,0,.18)}
.logo i:nth-child(1){grid-area:1/1}
.logo i:nth-child(2){grid-area:2/1;background:var(--coral)}
.logo i:nth-child(3){grid-area:2/2;background:var(--iris)}
.logo i:nth-child(4){grid-area:3/2;background:var(--amber)}
.logo i:nth-child(5){grid-area:3/3;background:var(--mint)}
h1{grid-column:1;grid-row:2;font-size:clamp(54px,7vw,86px);line-height:.86;margin:0;font-weight:950;letter-spacing:-5px;color:var(--text);text-transform:uppercase}
.subtitle{grid-column:1;grid-row:3;align-self:start;color:var(--muted);font-weight:650;margin:18px 0 0;max-width:270px;font-size:16px;line-height:1.45}
.mode-list{grid-column:2;grid-row:1/4;display:flex;flex-direction:column;gap:8px;width:100%}
.mode{min-height:72px;border:1px solid var(--stroke);border-left:5px solid var(--stroke-strong);border-radius:var(--r-large);background:var(--surface-raised);display:flex;align-items:center;gap:14px;padding:10px 14px;text-align:left;box-shadow:0 8px 24px rgba(0,0,0,.2);transition:100ms transform,100ms background,100ms border-color}
.mode:hover{background:#202822;border-color:var(--stroke-strong)}
.mode:active{transform:translateY(2px);box-shadow:0 4px 14px rgba(0,0,0,.22)}
.mode.journey{border-left-color:var(--amber)}
.mode.primary{border-left-color:var(--cyan)}
.mode.daily{border-left-color:var(--mint)}
.mode.continue{border-left-color:var(--iris);min-height:62px}
.mode-icon{width:46px;height:46px;flex:none;display:grid;place-items:center;color:var(--text);background:#0d110e;clip-path:polygon(0 0,78% 0,100% 22%,100% 100%,0 100%)}
.mode-icon svg{width:24px;height:24px}
.mode b,.mode small{display:block}
.mode b{font-size:18px;letter-spacing:-.2px}
.mode small{color:var(--muted);font-size:12px;margin-top:4px}
.mode>strong{margin-left:auto;align-self:center;display:flex;align-items:center;gap:4px;color:var(--warm);font-size:12px;font-weight:850}
.mode>strong svg{width:14px;height:14px;fill:currentColor}
.streak-badge{white-space:nowrap;color:var(--success)!important}
.menu-bottom{grid-column:2;grid-row:4;display:flex;justify-content:flex-end;gap:12px;margin-top:14px}
.text-btn{min-height:44px;background:transparent;border:0;border-bottom:1px solid var(--stroke-strong);color:var(--muted);font-weight:750;padding:0 8px}
.text-btn:hover{color:var(--text);border-color:var(--action)}
/* Shared chrome. */
header{width:min(560px,100%);display:flex;align-items:center;justify-content:space-between;min-height:44px}
.round{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-small);border:1px solid var(--stroke);background:var(--surface-raised)}
.round:hover{border-color:var(--action)}
.round svg{width:22px;height:22px}
.mode-label{font-size:12px;color:var(--muted);font-weight:850;letter-spacing:1.4px;text-transform:uppercase}
.game-screen{display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:min(1.1vh,9px)}
.scores{display:grid;grid-template-columns:1fr 1.35fr 1fr;width:min(560px,100%);align-items:end;text-align:center;border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke);padding:5px 0}
.scores div{display:flex;flex-direction:column}
.scores small{font-size:9px;text-transform:uppercase;letter-spacing:1.3px;color:var(--muted);font-weight:850}
.scores b{font-size:20px;font-variant-numeric:tabular-nums}
.scores .score-main b{font-size:36px;line-height:1;color:var(--text)}
/* The board is the visual hero. */
.board-wrap{position:relative;width:min(520px,calc(100vw - 24px),calc(100dvh - 312px));aspect-ratio:1;margin:2px auto;filter:drop-shadow(0 14px 22px rgba(0,0,0,.32))}
.board{position:absolute;inset:0;display:grid;gap:var(--gap);padding:9px;border-radius:var(--r-large);background-color:var(--surface-board);background-image:linear-gradient(90deg,transparent 33%,rgba(240,184,75,.12) 33%,rgba(240,184,75,.12) 33.7%,transparent 33.7%,transparent 66%,rgba(240,184,75,.12) 66%,rgba(240,184,75,.12) 66.7%,transparent 66.7%),linear-gradient(transparent 33%,rgba(240,184,75,.12) 33%,rgba(240,184,75,.12) 33.7%,transparent 33.7%,transparent 66%,rgba(240,184,75,.12) 66%,rgba(240,184,75,.12) 66.7%,transparent 66.7%);border:1px solid var(--stroke-strong);box-shadow:inset 0 0 0 5px #0f1410}
.cell{border:0;padding:0;clip-path:polygon(0 0,82% 0,100% 18%,100% 100%,0 100%);background:#182019;position:relative;transition:100ms transform,100ms background,140ms opacity}
.cell:focus-visible{outline:0;box-shadow:inset 0 0 0 3px var(--focus);z-index:3}
.cell[tabindex="0"]{cursor:pointer}
.cell.filled,.mini-cell,.ghost-cell{background:var(--tile);box-shadow:inset 0 3px rgba(255,255,255,.2),inset 0 -5px var(--tile-shadow),0 3px 0 rgba(0,0,0,.25)}
.cell.c0,.mini-cell.c0,.ghost-cell.c0{--tile:var(--cyan);--tile-shadow:#2e929e}
.cell.c1,.mini-cell.c1,.ghost-cell.c1{--tile:var(--coral);--tile-shadow:#a94740}
.cell.c2,.mini-cell.c2,.ghost-cell.c2{--tile:var(--amber);--tile-shadow:#a47a28}
.cell.c3,.mini-cell.c3,.ghost-cell.c3{--tile:var(--mint);--tile-shadow:#358e59}
.cell.c4,.mini-cell.c4,.ghost-cell.c4{--tile:var(--iris);--tile-shadow:#5f54a2}
.cell.preview{background:rgba(102,209,139,.58);box-shadow:inset 0 0 0 2px #b9f4cb}
.cell.invalid{background:rgba(240,108,94,.5);box-shadow:inset 0 0 0 2px #ffc0b9}
.cell.hinted{box-shadow:inset 0 0 0 3px var(--focus),0 0 0 2px #0b100c}
.tray{width:min(560px,100%);height:78px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.piece-slot{border:1px solid transparent;background:transparent;position:relative;touch-action:none;border-radius:var(--r-small);display:grid;place-items:center;min-height:56px}
.piece-slot:hover:not(.disabled){background:var(--surface-raised);border-color:var(--stroke)}
.piece-slot.disabled{opacity:.16}
.piece-slot.impossible{opacity:.35}
.piece-slot.selected{background:var(--surface-soft);border:2px solid var(--focus);transform:translateY(-3px)}
.piece{position:relative}
.mini-cell,.ghost-cell{position:absolute;clip-path:polygon(0 0,82% 0,100% 18%,100% 100%,0 100%)}
.piece-slot .mini-cell{width:18px;height:18px}
.ghost{position:fixed;z-index:80;pointer-events:none;filter:drop-shadow(0 9px 8px rgba(0,0,0,.45));transform:translate(-50%,-100%)}
.ghost-cell{width:30px;height:30px}
.tools{width:min(560px,100%);display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.tools button{min-height:50px;border:1px solid var(--stroke);background:var(--surface-raised);border-radius:var(--r-small);padding:5px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.tools button:hover{border-color:var(--action);background:var(--surface-soft)}
.tools button:active{transform:translateY(2px)}
.tools svg{width:20px;height:20px}
.tools small{font-size:10px;color:var(--muted);font-weight:750}
.coach{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:10px;border:1px solid var(--action);border-left:5px solid var(--action);border-radius:var(--r-large);padding:8px 10px}
.coach-step{font-weight:900;color:var(--action);font-variant-numeric:tabular-nums}
.coach b,.coach small{display:block}
.coach b{font-size:13px}
.coach small{font-size:11px;color:var(--muted);margin-top:2px}
.coach-action{min-height:44px;border:1px solid var(--stroke-strong);border-radius:var(--r-small);background:transparent;padding:0 10px;font-size:11px;font-weight:800}
.float-score{position:absolute;z-index:8;left:0;right:0;top:22%;text-align:center;white-space:nowrap;pointer-events:none;font-weight:950;color:var(--text);font-size:27px;text-shadow:0 2px #000;opacity:0}
.float-score.go{animation:float 520ms ease}
.fx{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:var(--r-large);z-index:12}
.spark{position:absolute;left:50%;top:50%;width:10px;height:3px;background:var(--spark);animation:sparkFly 360ms ease-out forwards;transform:translate(-50%,-50%) rotate(var(--angle)) translateY(-20px)}
.paused .board,.paused .tray{filter:grayscale(.55) brightness(.55);pointer-events:none}
/* Dialog and result sheet. */
.modal{position:fixed;inset:0;z-index:100;background:rgba(5,7,5,.88);display:grid;place-items:center;padding:20px}
.modal[aria-hidden="true"]{display:none!important}
.card{width:min(410px,100%);max-height:calc(100dvh - 30px);overflow-y:auto;background:var(--surface-raised);border:1px solid var(--stroke-strong);border-radius:var(--r-large);padding:24px;text-align:left;box-shadow:0 18px 60px rgba(0,0,0,.48)}
.modal-icon{width:52px;height:52px;display:grid;place-items:center;background:#0c100d;color:var(--warm);clip-path:polygon(0 0,78% 0,100% 22%,100% 100%,0 100%)}
.modal-icon svg{width:28px;height:28px}
.card h2{font-size:26px;line-height:1.1;margin:18px 0 6px}
.card p{color:var(--muted);line-height:1.45;white-space:pre-line;margin:8px 0}
.modal-score{font-size:58px;line-height:1;font-weight:950;margin:18px 0 12px;font-variant-numeric:tabular-nums}
.modal-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--stroke);border:1px solid var(--stroke);margin:14px 0}
.modal-stats div{min-width:0;background:#121713;padding:9px}
.modal-stats small,.modal-stats b{display:block}
.modal-stats small{color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.7px}
.modal-stats b{font-size:13px;margin-top:4px;overflow-wrap:anywhere}
.card button{width:100%;min-height:48px;padding:10px 12px;margin-top:8px;border-radius:var(--r-small);border:1px solid var(--stroke);background:var(--surface-soft);font-weight:800;display:flex;align-items:center;justify-content:center;gap:8px}
.card button.primary{border-color:#83e4ec;background:var(--action);color:#071012}
.card button:disabled{opacity:.45;cursor:wait}
.card button svg{width:19px;height:19px}
.toast{position:fixed;z-index:150;bottom:calc(16px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);max-width:90%;white-space:nowrap;background:#202822;border:1px solid var(--stroke-strong);border-radius:var(--r-small);padding:10px 14px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
/* Journey map. */
.journey-screen{overflow-y:auto;display:flex;flex-direction:column;align-items:center;gap:12px}
.journey-screen header{position:sticky;top:0;z-index:4;padding:4px 0;background:var(--surface-base)}
.journey-screen h2{margin:0;font-size:23px}
.rank-badge{padding:6px 9px;border-radius:var(--r-small);background:var(--warm);color:#241a07;font-weight:900;font-size:11px}
.map-summary{margin:0;color:var(--muted);font-weight:750;text-align:center}
.level-grid{width:min(680px,100%);display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.level-card{min-height:92px;border:1px solid var(--stroke);border-radius:var(--r-large);background:var(--surface-raised);padding:10px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;text-align:left}
.level-card:hover:not(:disabled){border-color:var(--action);transform:translateY(-1px)}
.level-card b{display:flex;align-items:center;gap:7px;font-size:17px}
.level-card b svg{width:18px;height:18px;color:var(--warm)}
.level-card small{color:var(--muted);font-size:10px;line-height:1.25}
.level-card .stars{height:15px;display:flex;gap:3px;color:var(--warm)}
.level-card .stars svg{width:14px;height:14px;fill:currentColor}
.level-card .stars i{width:11px;height:11px;border:1px solid var(--stroke-strong);clip-path:polygon(50% 0,62% 36%,100% 38%,70% 60%,80% 100%,50% 77%,20% 100%,30% 60%,0 38%,38% 36%)}
.level-card:disabled{opacity:.38;cursor:not-allowed}
.level-card.completed{border-left:4px solid var(--warm)}
.leaderboard{width:min(680px,100%);border:1px solid var(--stroke);border-radius:var(--r-large);background:var(--surface-raised);padding:14px 16px;margin-bottom:max(12px,env(safe-area-inset-bottom))}
.leaderboard-head{display:flex;align-items:center;justify-content:space-between}
.leaderboard h3{margin:0;font-size:17px}
.leaderboard ol{margin:10px 0 0;padding-left:28px}
.leaderboard li{padding:6px;color:var(--muted)}
.leaderboard li.me{color:var(--text);background:#20302d}
.leaderboard li span{float:right;color:var(--warm);font-weight:800;display:flex;align-items:center;gap:3px}
.leaderboard li span svg{width:13px;height:13px;fill:currentColor}
.game-screen>*{flex-shrink:0;min-height:0}
@media(max-width:520px){
  .menu-screen{display:flex;flex-direction:column;align-items:stretch;justify-content:safe center;overflow-y:auto;padding-top:max(18px,env(safe-area-inset-top))}
  .logo{align-self:center;margin-bottom:10px}
  .menu-screen h1{align-self:center;font-size:58px}
  .subtitle{align-self:center;text-align:center;margin:10px 0 18px;font-size:13px}
  .mode-list{width:100%;gap:7px}
  .mode{min-height:66px;padding:8px 11px}
  .mode-icon{width:42px;height:42px}
  .mode b{font-size:16px}
  .menu-bottom{align-self:center;margin-top:10px}
  .level-grid{grid-template-columns:repeat(3,1fr)}
  .level-card{min-height:86px;padding:8px}
  .journey-screen{gap:9px}
  .coach{grid-template-columns:34px 1fr auto;padding:6px 8px}
  .coach small{max-width:220px}
}
@media(max-height:700px) and (max-width:759px){
  .game-screen{gap:4px;padding-top:6px;padding-bottom:6px}
  .game-screen header{min-height:38px}
  .scores{padding:2px 0}
  .scores .score-main b{font-size:29px}
  .scores b{font-size:17px}
  .board-wrap{width:min(520px,calc(100vw - 20px),calc(100dvh - 258px))}
  .game-screen.daily-mode .board-wrap{width:min(520px,calc(100vw - 20px),calc(100dvh - 315px))}
  .tray{height:58px}
  .piece-slot .mini-cell{width:14px;height:14px}
  .tools button{min-height:44px}
  .tools svg{width:17px;height:17px}
  .coach{min-height:55px}
  .coach small{font-size:9px}
}
@media(min-width:760px) and (max-height:650px){
  .game-screen{display:grid;grid-template-columns:minmax(190px,260px) minmax(320px,520px) minmax(190px,260px);grid-template-rows:auto auto 1fr;align-content:center;justify-content:center;align-items:start;gap:10px 18px;padding:10px 16px}
  .game-screen header{grid-column:1;grid-row:1;width:100%}
  .scores{grid-column:1;grid-row:2;width:100%;grid-template-columns:repeat(3,1fr)}
  .daily-progress{grid-column:1;grid-row:3;width:100%;align-self:start}
  .coach{grid-column:1;grid-row:3;width:100%;grid-template-columns:32px 1fr}
  .coach-action{grid-column:1/-1;width:100%}
  .board-wrap,.game-screen.daily-mode .board-wrap,.game-screen.tutorial-mode .board-wrap{grid-column:2;grid-row:1/4;width:min(520px,calc(100dvh - 24px),46vw);margin:auto}
  .tray{grid-column:3;grid-row:1/3;width:100%;height:160px;grid-template-columns:1fr;gap:2px}
  .tools{grid-column:3;grid-row:3;width:100%;grid-template-columns:repeat(2,1fr);align-self:end}
  .tools button{min-height:58px}
  .mode-label{font-size:10px}
  .game-screen .board-wrap,.game-screen.daily-mode .board-wrap,.game-screen.tutorial-mode .board-wrap{width:min(520px,calc(100dvh - 24px),46vw)!important;height:min(520px,calc(100dvh - 24px),46vw);justify-self:center;align-self:center}
}
@media(max-width:350px){
  .screen{padding-left:7px;padding-right:7px}
  .menu-screen h1{font-size:50px}
  .mode{min-height:61px}
  .mode-icon{width:38px;height:38px}
  .tools{gap:4px}
  .modal-stats{grid-template-columns:repeat(2,1fr)}
}
/* Rules 4.0: the canonical board is 8×8. */
.board{grid-template-columns:repeat(var(--board-size,8),1fr)}
.text-btn{min-width:44px}
.modal-stats.revive-preview{grid-template-columns:repeat(3,1fr);min-height:76px;background:#0c120f}
.modal-stats.revive-preview>div{display:grid;place-items:center;min-height:76px}
@media(prefers-contrast:more){
  :root{--stroke:#728078;--muted:#d3d8d2}
  .cell{box-shadow:inset 0 0 0 1px #738076}
  .cell.filled{box-shadow:inset 0 0 0 2px #fff}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
/* ===== из progress.css: прогресс «Задачи дня» ===== */
.game-screen.daily-mode .board-wrap{width:min(520px,calc(100vw - 24px),calc(100dvh - 380px))}
.daily-progress{width:min(560px,100%);padding:8px 10px;border-radius:var(--r-small);background:var(--surface-raised);border:1px solid var(--stroke)}
.daily-progress>div:first-child{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;gap:12px}
.daily-progress span{font-size:10px;color:var(--muted);font-weight:850;text-transform:uppercase;letter-spacing:.7px}
.daily-progress b{font-size:12px;color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums}
.daily-track{height:6px;background:#080b09;overflow:hidden}
.daily-track i{display:block;width:0;height:100%;background:var(--action);transition:width 280ms ease}
.daily-progress.goal-reached{border-color:var(--warm)}
.daily-progress.goal-reached .daily-track i{background:var(--success)}
.goal-extra{display:block;color:var(--muted);margin-top:5px;font-size:10px;font-weight:700}
/* ===== из polish.css: перетаскивание и наложение обучения ===== */
/* Reserved for narrowly scoped post-QA fixes. Core tokens and components live in style.css. */
/* ---------- Перетаскивание: путь без layout и без анимаций ---------- */
/* Призрак двигается только трансформом (app.js positionGhost), поэтому его
   собственные смещения обнулены, а слой поднят заранее. */
.ghost{left:0;top:0;will-change:transform}
/* На время перетаскивания у клеток нет переходов: 100ms transform/background
   на 81 клетке с градиентами давали шлейф перерисовки за пальцем. */
.board.dragging .cell{transition:none}
/* ---------- Обучение: наложение, а не элемент потока ---------- */
/* Раньше #coach стоял в колонке игрового экрана и отбирал высоту у поля: на 390x600
   поле сжималось с 355 до 268 px, на 390x500 — с 255 до 168. Теперь подсказка лежит
   поверх верхней части поля и на бюджет высоты не влияет вообще. */
.coach{position:absolute;left:0;right:0;top:0;z-index:6;width:auto;margin:0;background:rgba(11,18,24,.93);box-shadow:0 10px 30px rgba(0,0,0,.45)}
/* Подсказка перекрывает верх поля, поэтому текст не обрезаем — он должен читаться
   целиком с первого взгляда, иначе шаг непонятен. */
.coach small{max-width:none}
@media(min-width:760px){
  /* На широком экране подсказка перестала быть элементом сетки — возвращаем ей
     горизонтальную раскладку вместо колоночной, которая была рассчитана на боковую панель. */
  .coach{grid-template-columns:42px 1fr auto}
  .coach-action{grid-column:auto;width:auto}
}