/**
 * visual.css — палитра, токены и внешний вид компонентов.
 * Собрана из visual-v4/v5/v7/v8 (2026-08-31) с удалением перекрытых объявлений:
 * 439 правил и 39.5 КБ превратились в 299 правил и 24.8 КБ без изменения вычисленных стилей.
 * Победитель у каждого свойства теперь один.
 */
/* ===== visual-v4: Energy Circuit 4.0 ===== */
/* Energy Circuit 4.0 — production material pass approved in concept-v4. */
:root{--cyan:#4abbe8;--coral:#f06c62;--amber:#f4bb4d;--mint:#42d99a;--iris:#8c7de2}
body:after{background-image:radial-gradient(circle at 25% 30%,rgba(255,255,255,.05) 0 1px,transparent 1.4px),linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:19px 19px,48px 48px,48px 48px}
.mode{border-color:rgba(172,219,196,.2)}
.mode.primary{border-left-color:var(--action)}
.mode.continue{border-left-color:var(--cyan)}
.scores{border-color:rgba(176,220,199,.18)}
.scores b{font-variant-numeric:tabular-nums}
.round,.tools button{background:linear-gradient(145deg,rgba(31,47,40,.9),rgba(11,18,15,.96));box-shadow:inset 0 1px rgba(255,255,255,.055),0 4px 9px rgba(0,0,0,.22)}
.board-wrap:before{content:"";position:absolute;pointer-events:none}
.cell:before,.mini-cell:before{content:"";position:absolute;inset:3px;pointer-events:none;clip-path:inherit;background:radial-gradient(circle at 18% 24%,rgba(255,255,255,.12) 0 1px,transparent 1.5px);background-size:13px 13px;opacity:.22}
.piece-slot{border-color:rgba(176,220,199,.09);box-shadow:inset 0 1px rgba(255,255,255,.03)}
.piece-slot.selected{border-color:var(--action)}
.daily-progress{background:linear-gradient(120deg,rgba(25,43,35,.95),rgba(8,15,12,.95));border-color:rgba(172,219,196,.2)}
.card{border-color:rgba(183,221,205,.26)}
.card button.primary{box-shadow:inset 0 1px rgba(255,255,255,.5),0 5px 0 #287d59}
.card button.primary:active{transform:translateY(3px);box-shadow:inset 0 1px rgba(255,255,255,.35),0 2px 0 #287d59}
@media(max-width:380px) and (min-height:600px){
  .board-wrap{width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));max-width:none;margin-left:calc((100% - 100vw + env(safe-area-inset-left) + env(safe-area-inset-right))/2);border-radius:0}
  .board{inset:1px;gap:0;border-radius:0}
}
@media(orientation:landscape) and (max-height:500px){
  .game-screen{padding-top:10px;padding-bottom:10px}
  .cell{min-width:44px;min-height:44px}
}
@media(prefers-reduced-motion:reduce){
  .cell.filled{transform:none}
}
.board{grid-template-columns:repeat(var(--board-size,8),1fr)}
.leaderboard-note{margin:6px 0 0;color:var(--muted);font-size:11px;line-height:1.35;max-width:52ch}
.leaderboard li span svg{color:var(--warm);stroke:currentColor;fill:none}
/* ===== visual-v5: Print Arcade 5.0 ===== */
/* Print Arcade 5.0 — token-first visual system. No external assets or fonts. */
:root{--paper:#f3efe4;--paper-raised:#fffdf7;--paper-muted:#ded8cb;--ink:#171b23;--ink-2:#59606c;--board:#101722;--board-cell:#1d2938;--blue:#426bff;--red:#f45c48;--yellow:#ffc845;--green:#46d6a4;--purple:#8c70e8;--danger:#d63c35;--success-ink:#14815d}
button:focus-visible{outline-color:var(--focus);outline-width:3px}
/* Editorial menu */
.menu-screen{position:relative;isolation:isolate}
.menu-screen:before{content:"PLAY / CLEAR / REPEAT";position:absolute;left:max(12px,env(safe-area-inset-left));top:max(12px,env(safe-area-inset-top));font-size:10px;font-weight:950;letter-spacing:2px;color:var(--ink-2);writing-mode:vertical-rl}
.menu-screen h1{position:relative}
.menu-screen h1:after{display:block;width:max-content;line-height:1}
.mode{position:relative;border-left:2px solid var(--ink)}
.mode:before{content:"0" counter(mode);align-self:stretch;align-items:center;padding-right:11px;border-right:2px solid var(--ink);font-size:10px;font-weight:950;letter-spacing:1px;color:var(--ink-2)}
.mode.continue small,.mode.continue:before{color:#c9cbd0}
.mode.continue:before{border-color:#7d828c}
.mode.continue .mode-icon{border-color:var(--paper)}
.mode small{color:var(--ink-2);font-weight:650}
.menu-bottom .text-btn,.text-btn{border-bottom:2px solid var(--ink);font-weight:850}
.text-btn:hover{border-color:var(--blue)}
/* Game chrome: the dark board is the only visual well. */
.game-screen header{border-bottom:2px solid var(--ink);padding-bottom:5px}
.scores .score-main{position:relative}
.scores .score-main:after{content:"";position:absolute;left:24%;right:24%;bottom:-3px;height:5px;background:var(--red);transform:rotate(-1deg);z-index:-1}
.cell:before,.mini-cell:before{display:none}
.tray{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
/* Mission tickets and verified table */
.level-card{position:relative}
.level-card:before{content:"";position:absolute;top:0;left:0;width:100%}
/* Result as a printed score sheet. */
.modal-score{text-decoration-color:var(--yellow);text-decoration-thickness:9px;text-underline-offset:-4px;text-decoration-skip-ink:none}
@media(max-width:520px){
  .menu-screen:before{display:none}
  .menu-screen{justify-content:flex-start;padding-top:max(18px,env(safe-area-inset-top))}
  .subtitle{margin:8px 0 14px}
  .mode:before{padding-right:7px}
  .mode-icon{box-shadow:2px 2px 0 var(--ink)}
  .tray{height:72px}
  .level-card{box-shadow:3px 3px 0 var(--ink)}
  .card{box-shadow:6px 6px 0 var(--ink)}
}
@media(max-height:700px) and (max-width:759px){
  .tray{padding:2px}
  .menu-screen{padding-top:8px}
  .logo{transform:scale(.82) rotate(-2deg);margin-bottom:0}
  .menu-screen h1:after{display:none}
  .subtitle{margin:5px 0 9px}
  .menu-bottom{margin-top:5px}
}
@media(min-width:760px) and (max-height:650px){
  .game-screen header,.scores,.daily-progress,.coach,.tray,.tools{background:var(--paper-raised)}
  .game-screen header,.scores{padding-left:10px;padding-right:10px}
}
@media(orientation:landscape) and (max-height:500px){
  .board-wrap{border-width:3px;box-shadow:4px 4px 0 var(--ink)}
}
@media(max-width:380px){
  .board{inset:2px}
}
@media(prefers-contrast:more){
  :root{--ink-2:#30343c;--board-cell:#33445a}
}
/* ===== visual-v7: Premium Tactile 7.0 ===== */
/* Premium Tactile 7.0 — soft polymer, field-first, asset-free. */
:root{--space:#0b1218;--space-raised:#131d26;--space-soft:#1a2732;--board-deep:#071016;--cell-deep:#14212b;--cream:#f5f2ea;--silver:#a9b4bf;--hairline:rgba(196,219,232,.13);--sky:#56bceb;--salmon:#ff7468;--saffron:#f6c85a;--seafoam:#4fd5a4;--lavender:#9a84f4;--surface-base:var(--space);--surface-raised:var(--space-raised);--surface-board:var(--board-deep);--surface-soft:var(--space-soft);--stroke:var(--hairline);--stroke-strong:rgba(196,219,232,.24);--text:var(--cream);--muted:var(--silver);--action:var(--sky);--warm:var(--saffron);--success:var(--seafoam);--hazard:var(--salmon);--focus:#8ce8ff;--r-small:10px;--r-large:22px;color-scheme:dark}
body{color:var(--cream);background:var(--space);background-image:linear-gradient(rgba(127,169,190,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(127,169,190,.025) 1px,transparent 1px);background-size:42px 42px}
body:after{background:linear-gradient(135deg,transparent 0 56%,rgba(86,188,235,.025) 56% 58%,transparent 58%);opacity:1}
button:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
/* Menu: quiet chrome, one unmistakable action. */
.menu-screen:before{display:none}
.logo{transform:none;gap:6px;margin-bottom:24px;filter:drop-shadow(0 14px 20px rgba(0,0,0,.28))}
.logo i{border:0;border-radius:7px;clip-path:none;background:var(--sky);box-shadow:inset 0 2px 2px rgba(255,255,255,.42),inset 0 -5px 8px rgba(1,28,40,.25),0 5px 8px rgba(0,0,0,.28)}
.logo i:nth-child(2){background:var(--salmon)}
.logo i:nth-child(3){background:var(--lavender)}
.logo i:nth-child(4){background:var(--saffron)}
.logo i:nth-child(5){background:var(--seafoam)}
.menu-screen h1{color:var(--cream);letter-spacing:-5px;text-shadow:0 16px 38px rgba(0,0,0,.3)}
.menu-screen h1:after{content:"TACTICAL 8 × 8";margin-top:15px;padding:0;background:transparent;color:var(--silver);font-size:10px;letter-spacing:2.4px;transform:none}
.subtitle{color:var(--silver);font-weight:600}
.mode-list{counter-reset:none;gap:10px}
.mode{counter-increment:none;min-height:76px;overflow:hidden;border:1px solid var(--hairline);border-radius:18px;background:var(--space-raised);box-shadow:0 8px 24px rgba(0,0,0,.18);color:var(--cream);transition:background 160ms ease,border-color 160ms ease,box-shadow 160ms ease,transform 120ms ease}
.mode:before{display:none}
.mode:hover{background:#182530;border-color:rgba(140,232,255,.38);transform:translateY(-2px);box-shadow:0 14px 32px rgba(0,0,0,.25)}
.mode:active{transform:scale(.985);box-shadow:0 4px 14px rgba(0,0,0,.2)}
.mode.primary{min-height:94px;background:var(--saffron);border-color:transparent;color:#14202a;box-shadow:0 15px 36px rgba(0,0,0,.26),0 8px 28px rgba(246,200,90,.09)}
.mode.primary:hover{background:#ffd36b;border-color:transparent}
.mode.daily{background:#12241f}
.mode.continue{background:#17202d;border-color:rgba(154,132,244,.28);color:var(--cream)}
.mode-icon{width:50px;height:50px;border:0;border-radius:14px;clip-path:none;background:rgba(86,188,235,.14);box-shadow:inset 0 0 0 1px rgba(86,188,235,.28);color:var(--sky)}
.mode.journey .mode-icon{background:rgba(255,116,104,.13);box-shadow:inset 0 0 0 1px rgba(255,116,104,.27);color:var(--salmon)}
.mode.primary .mode-icon{background:rgba(20,32,42,.1);box-shadow:inset 0 0 0 1px rgba(20,32,42,.2);color:#14202a}
.mode.daily .mode-icon{background:rgba(79,213,164,.13);box-shadow:inset 0 0 0 1px rgba(79,213,164,.27);color:var(--seafoam)}
.mode.continue .mode-icon{background:rgba(154,132,244,.14);border:0;box-shadow:inset 0 0 0 1px rgba(154,132,244,.3);color:#c7baff}
.mode b{font-weight:800;letter-spacing:-.2px}
.mode small,.mode.continue small{color:var(--silver);font-weight:550}
.mode.primary small{color:#53606a}
.mode>strong{color:var(--saffron)}
.mode.primary>strong{color:#14202a}
.menu-bottom .text-btn,.text-btn{color:var(--silver);border:0;border-radius:0;background:transparent}
.text-btn:hover{color:var(--cream);border:0}
/* Minimal HUD and dominant board. */
.game-screen header{border:0;padding:0}
.mode-label{color:var(--silver);font-weight:750;letter-spacing:2px}
.round{width:48px;height:48px;border:1px solid var(--hairline);border-radius:50%;background:var(--space-raised);box-shadow:0 6px 18px rgba(0,0,0,.22);color:var(--cream)}
.round:hover{border-color:rgba(140,232,255,.45);background:var(--space-soft)}
.round:active{transform:scale(.94);box-shadow:0 3px 10px rgba(0,0,0,.2)}
.scores{border:0;background:transparent;padding:2px 0 5px}
.scores small{color:#84929d;font-weight:750;letter-spacing:1.5px}
.scores b{color:var(--cream);font-weight:750}
.scores .score-main:after{display:none}
.scores .score-main b{color:var(--cream);font-size:42px;font-weight:800;text-shadow:0 8px 28px rgba(86,188,235,.13)}
.board-wrap{padding:9px;border:1px solid rgba(171,212,229,.16);border-radius:24px;background:#0c171f;box-shadow:0 28px 70px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.05);filter:none}
.board-wrap:before{inset:5px;border:1px solid rgba(255,255,255,.045);border-radius:18px}
.board{inset:9px;padding:5px;gap:5px;border:0;border-radius:17px;background:var(--board-deep);background-image:linear-gradient(90deg,transparent 49.7%,rgba(86,188,235,.035) 49.7% 50.3%,transparent 50.3%),linear-gradient(transparent 49.7%,rgba(86,188,235,.035) 49.7% 50.3%,transparent 50.3%);box-shadow:inset 0 0 40px rgba(0,0,0,.34)}
.cell{border:0;border-radius:9px;clip-path:none;background:linear-gradient(145deg,#182731,#111d26);box-shadow:inset 1px 1px rgba(255,255,255,.035),inset -2px -3px rgba(0,0,0,.18)}
.cell.filled,.mini-cell,.ghost-cell{border:0;border-radius:8px;clip-path:none;background:linear-gradient(150deg,color-mix(in srgb,var(--tile),white 26%) 0 5%,var(--tile) 16% 62%,color-mix(in srgb,var(--tile),black 30%) 100%);box-shadow:inset 0 2px 1px rgba(255,255,255,.62),inset 3px 3px 6px rgba(255,255,255,.14),inset -3px -6px 9px rgba(0,0,0,.28),0 5px 10px rgba(0,0,0,.42)}
.cell.c0,.mini-cell.c0,.ghost-cell.c0{--tile:var(--sky)}
.cell.c1,.mini-cell.c1,.ghost-cell.c1{--tile:var(--salmon)}
.cell.c2,.mini-cell.c2,.ghost-cell.c2{--tile:var(--saffron)}
.cell.c3,.mini-cell.c3,.ghost-cell.c3{--tile:var(--seafoam)}
.cell.c4,.mini-cell.c4,.ghost-cell.c4{--tile:var(--lavender)}
.cell.filled{transform:translateY(-1px)}
.cell.preview{background:rgba(79,213,164,.36);box-shadow:inset 0 0 0 2px #aaf5d8,0 0 18px rgba(79,213,164,.18)}
.cell.invalid{background:rgba(255,113,106,.35);box-shadow:inset 0 0 0 2px #ffaaa5}
.cell.clearing{box-shadow:inset 0 0 0 2px #fff,0 0 18px color-mix(in srgb,var(--tile),white 20%)}
.tray{height:82px;padding:5px 2px;border:0;background:transparent}
.piece-slot{border:1px solid transparent;border-radius:16px;background:transparent}
.piece-slot:hover:not(.disabled){background:rgba(255,255,255,.035);border-color:var(--hairline)}
.piece-slot.selected{background:rgba(86,188,235,.1);border:1px solid rgba(140,232,255,.4);box-shadow:0 10px 24px rgba(0,0,0,.18);transform:translateY(-4px)}
.tools{gap:8px}
.tools button{min-height:54px;border:1px solid var(--hairline);border-radius:14px;background:var(--space-raised);box-shadow:0 6px 18px rgba(0,0,0,.18);color:var(--cream)}
.tools button:hover{border-color:rgba(140,232,255,.35);background:var(--space-soft)}
.tools button:active{transform:scale(.96);box-shadow:0 3px 9px rgba(0,0,0,.18)}
.tools small{color:var(--silver);font-weight:650}
.daily-progress,.coach{border:1px solid var(--hairline);border-left:3px solid var(--sky);border-radius:14px;background:var(--space-raised);box-shadow:0 8px 24px rgba(0,0,0,.19);color:var(--cream)}
.daily-progress span,.goal-extra,.coach small{color:var(--silver)}
.daily-progress b,.coach b{color:var(--cream)}
.daily-track{background:#071016;border:0;border-radius:4px}
.daily-track i{border-radius:4px;background:var(--sky);box-shadow:0 0 14px rgba(86,188,235,.25)}
.coach-step{color:var(--sky)}
.coach-action{border:1px solid rgba(140,232,255,.3);border-radius:10px;background:rgba(86,188,235,.12);color:var(--cream)}
.float-score{color:var(--saffron);font-size:31px;text-shadow:0 4px 18px rgba(0,0,0,.65),0 0 22px rgba(246,200,90,.22)}
/* Journey and verified rank. */
.journey-screen header{background:rgba(11,18,24,.96);border:0;border-bottom:1px solid var(--hairline)}
.journey-screen h2{font-weight:800;letter-spacing:-.5px}
.rank-badge{padding:7px 10px;border:1px solid rgba(246,200,90,.26);border-radius:10px;background:rgba(246,200,90,.12);box-shadow:none;color:var(--saffron);transform:none}
.map-summary{color:var(--silver)}
.level-grid{gap:10px}
.level-card{min-height:98px;border:1px solid var(--hairline);border-radius:16px;background:var(--space-raised);box-shadow:0 8px 22px rgba(0,0,0,.16);color:var(--cream);overflow:hidden}
.level-card:before{height:3px;background:var(--sky)}
.level-card:nth-child(3n+1):before{background:var(--salmon)}
.level-card:nth-child(3n+2):before{background:var(--saffron)}
.level-card:nth-child(3n):before{background:var(--seafoam)}
.level-card:hover:not(:disabled){border-color:rgba(140,232,255,.38);transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.24)}
.level-card small{color:var(--silver)}
.level-card .stars{color:var(--saffron)}
.level-card:disabled{opacity:.68;color:#7e8a94;background:#101921;box-shadow:none;border-color:rgba(196,219,232,.08)}
.level-card:disabled small{color:#71808b}
.level-card.completed{border-left:3px solid var(--seafoam);background:#12231f}
.leaderboard{border:1px solid var(--hairline);border-radius:18px;background:var(--space-raised);box-shadow:0 12px 30px rgba(0,0,0,.2);color:var(--cream)}
.leaderboard-note,.leaderboard li{color:var(--silver)}
.leaderboard li.me{color:var(--cream);background:rgba(86,188,235,.1);border-radius:8px}
.leaderboard li span,.leaderboard li span svg{color:var(--saffron)}
/* Result sheet. */
.modal{background:rgba(3,8,12,.82);backdrop-filter:blur(8px)}
.card{border:1px solid rgba(196,219,232,.16);border-radius:24px;background:#121d26;box-shadow:0 30px 90px rgba(0,0,0,.6);color:var(--cream)}
.modal-icon{background:rgba(86,188,235,.13);color:var(--sky);border:1px solid rgba(86,188,235,.25);border-radius:16px;clip-path:none;box-shadow:none}
.card h2{font-weight:800;letter-spacing:-.5px}
.card p{color:var(--silver)}
.modal-score{color:var(--cream);text-decoration:none;text-shadow:0 10px 32px rgba(86,188,235,.15)}
.modal-stats{gap:8px;background:transparent;border:0}
.modal-stats div{border:1px solid var(--hairline);border-radius:10px;background:#0d171f;color:var(--cream)}
.modal-stats small{color:var(--silver)}
.card button{border:1px solid var(--hairline);border-radius:12px;background:#1a2833;color:var(--cream);box-shadow:none}
.card button.primary{border-color:transparent;background:var(--saffron);color:#13202a}
.card button:hover{filter:brightness(1.06)}
.card button:active{transform:scale(.98);box-shadow:none}
.toast{border:1px solid var(--hairline);border-radius:12px;background:#18242e;color:var(--cream);box-shadow:0 14px 36px rgba(0,0,0,.4)}
@keyframes polymerPlace{0%{transform:translateY(-11px) scale(.94);filter:brightness(1.3)}65%{transform:translateY(2px) scale(1.015)}100%{transform:translateY(-1px) scale(1);filter:none}}
@keyframes polymerClear{0%{opacity:1;filter:brightness(1)}35%{opacity:1;filter:brightness(1.8);transform:scale(.92)}100%{opacity:0;filter:brightness(2);transform:scale(.18)}}
.cell.placed{animation:polymerPlace 190ms cubic-bezier(.22,.9,.31,1)}
.cell.clearing{animation:polymerClear 280ms cubic-bezier(.2,.78,.28,1) forwards}
.spark{width:7px;height:7px;border-radius:50%;box-shadow:0 0 14px var(--spark)}
@media(max-width:520px){
  .logo{margin-bottom:10px}
  .menu-screen h1{font-size:56px;letter-spacing:-4px}
  .menu-screen h1:after{margin:8px auto 0}
  .mode{min-height:65px;border-radius:16px;box-shadow:0 7px 20px rgba(0,0,0,.17)}
  .mode.primary{min-height:76px}
  .mode-icon{width:42px;height:42px;border-radius:12px}
  .board-wrap{padding:6px;border-width:1px;border-radius:19px;box-shadow:0 20px 54px rgba(0,0,0,.46)}
  .board-wrap:before{inset:3px;border-radius:15px}
  .board{inset:6px;padding:3px;gap:3px;border-radius:14px}
  .cell{border-radius:7px}
  .cell.filled,.mini-cell,.ghost-cell{border-radius:6px}
  .tools{gap:6px}
  .tools button{border-radius:11px;box-shadow:0 5px 14px rgba(0,0,0,.17)}
  .level-grid{gap:8px}
  .level-card{min-height:90px;border-radius:14px}
  .card{border-radius:22px}
}
@media(max-height:700px) and (max-width:759px){
  .tray{height:78px}
  .menu-screen h1{font-size:48px}
  .mode.primary{min-height:64px}
  .mode{min-height:59px}
  .round{width:44px;height:44px}
  .scores .score-main b{font-size:36px}
}
@media(min-width:760px) and (max-height:650px){
  .game-screen header,.scores,.daily-progress,.coach,.tray{background:transparent}
  .scores{border:0;box-shadow:none}
  .tray{height:220px;border:1px solid var(--hairline);border-radius:18px;background:rgba(19,29,38,.68);box-shadow:0 12px 30px rgba(0,0,0,.2)}
  .tools{background:transparent}
}
@media(orientation:landscape) and (max-height:500px){
  .game-screen .board-wrap,.game-screen.daily-mode .board-wrap,.game-screen.tutorial-mode .board-wrap{width:min(520px,calc(100dvh - 32px),44vw)!important;height:min(520px,calc(100dvh - 32px),44vw)}
  .game-screen .tray{height:184px}
  .board-wrap{padding:4px}
  .board{inset:4px;padding:2px;gap:2px}
}
@media(max-width:380px){
  .board-wrap{max-width:100%;margin-left:auto;margin-right:auto;border-left-width:1px;border-right-width:1px;box-shadow:0 18px 45px rgba(0,0,0,.46)}
}
@media(prefers-contrast:more){
  :root{--silver:#d2d9df;--hairline:rgba(255,255,255,.4)}
  .cell{background:#243643}
  .level-card:disabled{opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .mode,.round,.tools button,.level-card,.cell.filled{transform:none!important}
  .spark{display:none}
}
/* ===== visual-v8: Premium Tactile 8.0 ===== */
/* Premium Tactile 8.0 — tactical field feedback and differentiated outcomes. */
:root{--pressure-open:var(--seafoam);--pressure-tight:var(--saffron);--pressure-critical:var(--salmon);--motion-impact:360ms cubic-bezier(.2,.82,.25,1)}
.game-context{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:128px;gap:4px}
.field-status{display:flex;align-items:center;gap:6px;color:var(--seafoam);font-size:9px;font-weight:800;line-height:1;letter-spacing:1.35px;text-transform:uppercase;white-space:nowrap}
.field-status:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 12px color-mix(in srgb,currentColor,transparent 35%)}
#game[data-pressure="tight"] .field-status{color:var(--pressure-tight)}
#game[data-pressure="critical"] .field-status{color:var(--pressure-critical)}
.field-status.previewing-clear{color:var(--saffron)!important}
/* 8.3 — one compact desktop composition and one coordinate plane for drag. */
@media(min-width:760px){
  .menu-screen{grid-template-columns:minmax(280px,360px) minmax(390px,460px);grid-template-rows:auto auto;column-gap:clamp(42px,6vw,88px);row-gap:10px;align-content:center;align-items:center}
  .menu-brand{grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;align-self:center}
  .menu-brand .logo{margin-bottom:22px}
  .menu-brand .subtitle{align-self:auto}
  .menu-screen .mode-list{grid-column:2;grid-row:1;align-self:center}
  .menu-screen .menu-bottom{grid-column:2;grid-row:2;align-self:start}
}
@media(max-width:759px){
  .menu-brand{display:flex;flex-direction:column;align-items:center;width:100%}
  .menu-brand .logo,.menu-brand h1,.menu-brand .subtitle{align-self:center}
}
.board-wrap{transition:border-color 220ms ease,box-shadow 260ms ease}
#game[data-pressure="open"] .board-wrap{border-color:rgba(79,213,164,.2)}
#game[data-pressure="tight"] .board-wrap{border-color:rgba(246,200,90,.42);box-shadow:0 28px 70px rgba(0,0,0,.48),0 0 0 1px rgba(246,200,90,.08),inset 0 1px rgba(255,255,255,.05)}
#game[data-pressure="critical"] .board-wrap{border-color:rgba(255,116,104,.55);box-shadow:0 28px 70px rgba(0,0,0,.48),0 0 28px rgba(255,116,104,.1),inset 0 1px rgba(255,255,255,.05)}
.board-wrap.clear-pulse{animation:fieldImpact var(--motion-impact)}
.board-wrap.preview-clears{border-color:rgba(246,200,90,.72);box-shadow:0 28px 70px rgba(0,0,0,.48),0 0 0 2px rgba(246,200,90,.18),0 0 28px rgba(246,200,90,.12),inset 0 1px rgba(255,255,255,.05)}
.cell.will-clear{z-index:2;transform:translateY(-1px) scale(.94)}
.cell.will-clear:after{content:"";position:absolute;inset:-2px;border:2px solid #fff0b5;border-radius:inherit;pointer-events:none;background:repeating-linear-gradient(135deg,rgba(246,200,90,.22) 0 5px,rgba(255,255,255,.08) 5px 10px);box-shadow:0 0 16px rgba(246,200,90,.42),inset 0 0 9px rgba(255,255,255,.18);animation:clearPreview 680ms ease-in-out infinite alternate}
.scores.combo-hot .score-main b,.scores.combo-hot #combo{color:var(--saffron);text-shadow:0 0 22px rgba(246,200,90,.42)}
.daily-progress.goal-reached{border-left-color:var(--seafoam);box-shadow:0 8px 24px rgba(0,0,0,.19),0 0 0 1px rgba(79,213,164,.13)}
.modal[data-kind="result"] .card{position:relative;overflow:hidden;padding-top:34px}
.modal[data-kind="result"] .card:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--sky)}
.modal[data-icon="daily"] .card:before{background:var(--seafoam)}
.modal[data-icon="route"] .card:before{background:linear-gradient(90deg,var(--salmon),var(--saffron),var(--seafoam))}
.modal[data-kind="result"] .modal-icon{width:58px;height:58px;border-radius:18px}
.modal[data-icon="daily"] .modal-icon{color:var(--seafoam);background:rgba(79,213,164,.12);border-color:rgba(79,213,164,.28)}
.modal[data-icon="route"] .modal-icon{color:var(--saffron);background:rgba(246,200,90,.12);border-color:rgba(246,200,90,.28)}
.modal[data-kind="result"] .modal-score{font-variant-numeric:tabular-nums;letter-spacing:-2px}
.modal[data-kind="result"] .modal-stats div{min-width:0}
.modal[data-kind="result"] .modal-stats b{overflow-wrap:anywhere}
.card button:disabled{opacity:.52;cursor:wait;filter:saturate(.45)}
@keyframes fieldImpact{
  0%{transform:scale(1)}
  32%{transform:scale(1.012);filter:brightness(1.12)}
  100%{transform:scale(1);filter:none}
}
@keyframes clearPreview{from{opacity:.66}to{opacity:1}}
@media(max-width:520px){
  .game-context{min-width:112px;gap:3px}
  .field-status{font-size:8px;letter-spacing:1.05px}
  .field-status:before{width:5px;height:5px}
  .modal[data-kind="result"] .card{padding-top:28px}
}
@media(max-height:700px) and (max-width:759px){
  .game-screen.daily-mode{gap:3px;padding-top:4px;padding-bottom:4px}
  .game-screen.daily-mode .tray{height:72px}
  .game-screen.daily-mode .tools button{min-height:48px}
}
@media(orientation:landscape) and (max-height:500px){
  .game-context{align-items:flex-start;gap:5px}
  .field-status{font-size:8px}
}
@media(prefers-reduced-motion:reduce){
  .board-wrap.clear-pulse{animation:none}
  .board-wrap{transition:none}
  .cell.will-clear:after{animation:none;opacity:1}
}

/* ===== Визуальное направление 9.0 =====
   Ориентир — яркие конкуренты в жанре: светящийся градиентный фон вместо плоского тёмного,
   счёт как главный акцент экрана, насыщенные глянцевые блоки. Поле остаётся тёмным:
   на светлом фоне блоки теряют читаемость, а именно они несут игру.
   Здесь только то, что 9.0 переопределяет намеренно; всё остальное живёт выше в файле. */

:root{
  --nine-top:#1d2a63;
  --nine-mid:#131a44;
  --nine-deep:#0a0f28;
  --nine-glow:rgba(96,132,255,.34);
  --nine-glow-warm:rgba(79,213,164,.16);
  /* Насыщенность палитры поднята: цвета конкурентов заметно сочнее наших прежних. */
  --sky:#4ec3ff;
  --salmon:#ff6f62;
  --saffron:#ffc94a;
  --seafoam:#3fe0a6;
  --lavender:#a586ff;
}

body{
  background-color:var(--nine-deep);
  background-image:
    radial-gradient(110% 55% at 50% 8%,var(--nine-glow),transparent 62%),
    radial-gradient(80% 45% at 50% 58%,var(--nine-glow-warm),transparent 70%),
    linear-gradient(180deg,var(--nine-top) 0%,var(--nine-mid) 38%,var(--nine-deep) 100%);
  background-size:auto;
}
/* Прежняя виньетка гасила бы градиент по краям — оставляем лёгкую, только по низу. */
body:after{background:linear-gradient(180deg,transparent 60%,rgba(6,9,22,.45));opacity:1}

/* Свечение за полем. Статический слой под доской: во время перетаскивания он не
   перерисовывается, фильтров здесь нет — бюджет кадра не трогаем. */
.board-wrap:before{
  content:"";position:absolute;inset:-14% -10%;z-index:0;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 50%,rgba(120,150,255,.28),transparent 70%);
}
.board{z-index:1}

/* Счёт — главный акцент экрана. */
.scores .score-main b{
  font-size:52px;font-weight:900;letter-spacing:-1px;color:#fff;
  text-shadow:0 0 26px rgba(120,160,255,.55),0 6px 22px rgba(0,0,0,.5);
}
.scores.combo-hot .score-main b{color:var(--saffron);text-shadow:0 0 34px rgba(255,201,74,.6),0 6px 22px rgba(0,0,0,.5)}
/* Новый рекорд виден сразу, а не только в карточке результата. */
.scores.record .score-main b{color:#ffe9a8;text-shadow:0 0 32px rgba(255,201,74,.7),0 6px 22px rgba(0,0,0,.5)}
.scores.record small{color:var(--saffron)}
.scores small{color:#9fb0d8}
.scores b{color:#eef2ff}

@media(max-height:700px) and (max-width:759px){
  .scores .score-main b{font-size:38px}
}
@media(min-width:760px) and (max-height:650px){
  .scores .score-main b{font-size:40px}
}

