/* Hallowiiin: темы. Разметка и компоненты берут цвета только из токенов ниже (css/hallowiiin.css).
   Тема задаётся атрибутом <html data-theme="standard|halloween"> (см. js/theme.js).
   Игровая логика темы не знает: подставить третью тему = добавить блок токенов и записать имя в THEMES (js/theme.js). */

/* ---------- Стандартная: студия, синий и золото ---------- */
:root,
:root[data-theme="standard"]{
  color-scheme: dark;
  --night:#050826; --stage:#0a1250; --stage-hi:#1a2a8a;
  --tile:#1731b8; --tile-hi:#2b52e6; --tile-lo:#1228a0; --tile-edge:#0a1760; --tile-used:#0a1347;
  --plate-hi:#1a2fa8; --plate:#10207f;
  --card-hi:#2441d0; --card-mid:#14269a; --card-lo:#0d1a78;
  --panel:rgba(5,8,38,.55);
  --accent:#ffcf3f; --accent-rgb:255 207 63; --accent-deep:#a86a00; --accent-mid:#b77a00; --accent-dark:#7a4b00; --on-accent:#2a1b00;
  --ink:#f3f5ff; --mute:#9aa8e6; --line:rgba(255,255,255,.14);
  --good:#3fe08f; --bad:#ff5b6b; --on-good:#032b17; --on-bad:#3a0009;
  --beam-1:130 160 255; --beam-2:130 160 255; --beam-op:.55;
  --ink-on-player:#08103a;
  --bag:#c9a56b; --bag-d:#8f6a33; --cat-fur:#ff9f43; --cat-eye:#0a1250; --cat-pupil:#0a1250; --cat-nose:#ff6fb1;
  --f-display:'Unbounded','Arial Black',system-ui,sans-serif;
  --f-title:var(--f-display);
  --f-body:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --p0:#ff6f59; --p1:#ff9f43; --p2:#a6e34a; --p3:#35d6a0; --p4:#4cc9ff; --p5:#a98bff; --p6:#ff6fb1;
}

/* ---------- Halloween: лиловая ночь, тыква, ядовитый зелёный ---------- */
:root[data-theme="halloween"]{
  --night:#0a0512; --stage:#1b0d2e; --stage-hi:#44176b;
  --tile:#3b1a66; --tile-hi:#5b2c9c; --tile-lo:#2d1250; --tile-edge:#1a0a33; --tile-used:#150a24;
  --plate-hi:#4a2080; --plate:#2c1250;
  --card-hi:#4b1f80; --card-mid:#2c1250; --card-lo:#190a30;
  --panel:rgba(14,6,24,.66);
  --accent:#ff8a1f; --accent-rgb:255 138 31; --accent-deep:#a44200; --accent-mid:#c75a00; --accent-dark:#6b2a00; --on-accent:#1f0d00;
  --ink:#f7efff; --mute:#bba8dc; --line:rgba(255,255,255,.16);
  --good:#5dffa0; --bad:#ff5b6b; --on-good:#042b17; --on-bad:#3a0009;
  --beam-1:150 255 80; --beam-2:255 138 31; --beam-op:.34;
  --bag:#a8814f; --bag-d:#6e4f27; --cat-fur:#1b1230; --cat-eye:#b6ff3b; --cat-pupil:#0a0512; --cat-nose:#ff7aa8;
  --f-title:'Rubik Wet Paint','Unbounded','Arial Black',system-ui,sans-serif;
  --p0:#ff6f59; --p1:#ffb347; --p2:#b6ff3b; --p3:#35d6a0; --p4:#4cc9ff; --p5:#c39bff; --p6:#ff6fb1;
}

/* ---------- Декор Halloween (в стандартной теме скрыт) ---------- */
.deco{display:none}
:root[data-theme="halloween"] .deco{display:block;position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
:root[data-theme="halloween"] .beam.b1{background:linear-gradient(180deg,rgb(var(--beam-1) / .3),rgb(var(--beam-1) / 0) 72%)}
:root[data-theme="halloween"] .beam.b2{background:linear-gradient(180deg,rgb(var(--beam-2) / .3),rgb(var(--beam-2) / 0) 72%)}

.moon{position:absolute;top:clamp(64px,10%,96px);right:5%;width:clamp(56px,11vmin,130px);aspect-ratio:1;border-radius:50%;opacity:.8;
  background:
    radial-gradient(circle at 62% 30%,rgba(150,120,50,.35) 0 7%,transparent 8%),
    radial-gradient(circle at 36% 62%,rgba(150,120,50,.3) 0 10%,transparent 11%),
    radial-gradient(circle at 70% 70%,rgba(150,120,50,.25) 0 5%,transparent 6%),
    radial-gradient(circle at 36% 32%,#fff6d4,#f4dc92 58%,#cfa84c);
  box-shadow:0 0 50px 14px rgba(255,220,130,.22),0 0 160px 50px rgba(255,200,120,.12)}
.fog{position:absolute;left:-30%;width:160%;height:34%;border-radius:50%;filter:blur(18px);opacity:.5;
  background:radial-gradient(50% 50% at 50% 50%,rgba(190,150,255,.28),rgba(190,150,255,0) 70%)}
.fog.f1{bottom:6%}
.fog.f2{bottom:-8%;opacity:.4;background:radial-gradient(50% 50% at 50% 50%,rgba(150,255,120,.2),rgba(150,255,120,0) 70%)}
.web{position:absolute;top:0;width:clamp(90px,16vmin,170px);height:auto;color:#fff;opacity:.2}
.web.w-l{left:0}
.web.w-r{right:0;transform:scaleX(-1)}
.bat{position:absolute;width:clamp(26px,4.4vmin,54px);height:auto;fill:#07030c;opacity:.85;top:var(--y)}
.bat.a1{--y:12%;left:-8%}
.bat.a2{--y:24%;left:-8%}
.bat.a3{--y:8%;left:-8%}
.skyline{position:absolute;left:0;right:0;bottom:0;width:100%;height:min(24vh,200px)}
.skyline .sil{fill:#07030c}
.skyline .glow{fill:var(--accent)}

@media (prefers-reduced-motion:no-preference){
  :root[data-theme="halloween"] .fog.f1{animation:drift 38s ease-in-out infinite alternate}
  :root[data-theme="halloween"] .fog.f2{animation:drift 52s ease-in-out infinite alternate-reverse}
  :root[data-theme="halloween"] .moon{animation:moonpulse 7s ease-in-out infinite alternate}
  :root[data-theme="halloween"] .bat.a1{animation:fly 26s linear infinite}
  :root[data-theme="halloween"] .bat.a2{animation:fly 34s linear -12s infinite}
  :root[data-theme="halloween"] .bat.a3{animation:fly 44s linear -28s infinite}
  :root[data-theme="halloween"] .skyline .glow{animation:flicker 3.2s steps(1,end) infinite}
}
@keyframes drift{to{transform:translateX(12%)}}
@keyframes moonpulse{to{box-shadow:0 0 70px 20px rgba(255,220,130,.3),0 0 180px 60px rgba(255,200,120,.16)}}
@keyframes fly{0%{transform:translate(0,0) scale(1)}25%{transform:translate(32vw,-4vh) scale(1.05)}50%{transform:translate(64vw,3vh) scale(.95)}75%{transform:translate(96vw,-3vh) scale(1.05)}100%{transform:translate(128vw,0) scale(1)}}
@keyframes flicker{0%,100%{opacity:1}46%{opacity:.78}50%{opacity:1}73%{opacity:.88}}

/* статичное расположение летучих мышей, когда движение отключено */
@media (prefers-reduced-motion:reduce){
  :root[data-theme="halloween"] .bat.a1{left:14%}
  :root[data-theme="halloween"] .bat.a2{left:62%}
  :root[data-theme="halloween"] .bat.a3{left:38%}
}

/* ---------- Мелкие тематические отличия компонентов ---------- */
:root[data-theme="halloween"] .cell:not(:disabled){
  background:linear-gradient(180deg,var(--tile-hi) 0%,var(--tile) 55%,var(--tile-lo) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -3px 0 rgba(0,0,0,.34),0 2px 0 var(--tile-edge),0 10px 18px -10px rgba(0,0,0,.85),inset 0 0 0 1px rgb(var(--accent-rgb) / .22)}
:root[data-theme="halloween"] .qcard::before{content:"";position:absolute;left:0;top:0;width:min(150px,28%);aspect-ratio:1;pointer-events:none;opacity:.16;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M0 0L150 0M0 0L139 56M0 0L106 106M0 0L59 138M0 0L0 150'/%3E%3Cpath d='M28 0Q22 4 26 10Q18 12 20 20Q12 18 11 26Q4 22 0 28M56 0Q43 8 52 21Q37 24 40 40Q25 36 22 52Q9 43 0 56M86 0Q66 13 80 32Q56 37 61 61Q38 56 34 79Q13 66 0 86M118 0Q91 18 109 44Q77 51 83 83Q52 77 46 109Q18 91 0 118'/%3E%3C/g%3E%3C/svg%3E") no-repeat 0 0/100% 100%}
:root[data-theme="halloween"] .logo{letter-spacing:.01em}
:root[data-theme="halloween"] .bag{filter:drop-shadow(0 0 14px rgb(182 255 59 / .35))}
/* пейзаж нужен стартовому и ожидающему экрану; на табло и в финале он только мешает читать */
.app:has(#screen-board:not([hidden])) .skyline{opacity:.3}
.app:has(#screen-final:not([hidden])) .skyline{display:none}