/* Each theme is a full set of tokens. Selectors are not tied to :root,
   so any element with data-theme (e.g. the picker previews) renders in that theme. */

/* ---------- Аркада: тёмный фон, жирный контур, плотные тени ---------- */
[data-theme="arcade"]{
  color-scheme:dark;
  --bg-color:#1a1230;
  --bg-image:radial-gradient(ellipse at 50% -10%,#3a2a6e 0,transparent 60%),radial-gradient(rgba(255,255,255,.07) 1.5px,transparent 1.6px);
  --bg-size:100% 100%,26px 26px;
  --text:#fff; --text-dim:#cfc6ea; --header-bg:rgba(26,18,48,.72);
  --surface:#fff6e6; --surface-text:#1a1230; --surface-dim:#6b5f8a; --input-bg:#f3e6cc; --inset:inset 0 3px 0 rgba(26,18,48,.12);
  --line:#1a1230; --bw:3px; --bw-thick:4px; --r:22px; --r-sm:14px;
  --shadow:0 7px 0 #1a1230; --shadow-sm:0 4px 0 #1a1230; --shadow-press:0 1px 0 #1a1230; --press:3px;
  --btn-bg:#fff6e6; --btn-text:#1a1230;
  --accent:#2fcf7b; --accent-text:#fff; --accent-text-shadow:0 2px 0 rgba(0,0,0,.22); --accent-on-surface:#c4531c;
  --good:#1fae63; --bad:#ff4d5e; --warn:#ffc531; --gold:#ffc531; --gold-text:#1a1230;
  --focus:#ffc531; --focus-soft:rgba(255,197,49,.45);
  --font-d:"Dela Gothic One","Arial Black",system-ui,sans-serif; --font-u:"Golos Text",system-ui,sans-serif;
  --d-weight:400; --d-case:uppercase; --d-track:.02em;
  --tile-face:#fff6e6; --tile-text:#1a1230; --tile-line:#1a1230; --tile-bw:max(2px,.05em); --tile-r:.17em;
  --tile-shadow:inset 0 -.1em 0 #e3cda9,0 .08em 0 #1a1230; --tile-fs:.56em; --tile-dy:-.05em; --tile-gap:.08em; --tile-vow:#cfe0ff;
  --topic-bg:#fff6e6; --topic-text:#1a1230; --topic-dim:#c4531c; --tilt:-1.2deg;
  --rule-bg:#3d6bff; --rule-text:#fff; --track:#2b2150;
  --tray-bg:rgba(16,10,32,.9); --tray-shadow:inset 0 7px 0 rgba(0,0,0,.35),0 5px 0 #1a1230; --tray-dim:#8f86ad;
}

/* ---------- Настолка: зелёное сукно и деревянные фишки ---------- */
[data-theme="board"]{
  color-scheme:dark;
  --bg-color:#1f5e3a;
  --bg-image:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.08),transparent 70%),repeating-linear-gradient(45deg,rgba(0,0,0,.035) 0 2px,transparent 2px 5px),repeating-linear-gradient(-45deg,rgba(255,255,255,.025) 0 2px,transparent 2px 6px);
  --bg-size:100% 100%,auto,auto;
  --text:#f4efe3; --text-dim:#c8decf; --header-bg:rgba(20,62,38,.8);
  --surface:#f6efe0; --surface-text:#2d2418; --surface-dim:#7a6a52; --input-bg:#ece2cc; --inset:inset 0 2px 4px rgba(0,0,0,.12);
  --line:rgba(45,36,24,.22); --bw:1px; --bw-thick:1px; --r:14px; --r-sm:10px;
  --shadow:0 2px 0 rgba(0,0,0,.18),0 14px 30px rgba(0,0,0,.35); --shadow-sm:0 3px 0 rgba(0,0,0,.25),0 6px 12px rgba(0,0,0,.18); --shadow-press:0 1px 0 rgba(0,0,0,.25); --press:2px;
  --btn-bg:#f6efe0; --btn-text:#2d2418;
  --accent:#c8502d; --accent-text:#fff; --accent-text-shadow:0 1px 0 rgba(0,0,0,.25); --accent-on-surface:#c8502d;
  --good:#2e8b57; --bad:#c0392b; --warn:#e8b84a; --gold:#e8b84a; --gold-text:#2d2418;
  --focus:#e8b84a; --focus-soft:rgba(232,184,74,.45);
  --font-d:"Rubik",system-ui,sans-serif; --font-u:"Golos Text",system-ui,sans-serif;
  --d-weight:800; --d-case:none; --d-track:0;
  --tile-face:linear-gradient(160deg,#f6e2b6,#e2bf80); --tile-text:#3b2a16; --tile-line:rgba(59,42,22,.35); --tile-bw:1px; --tile-r:.12em;
  --tile-shadow:inset 0 -.06em 0 #b88a4c,0 .08em .16em rgba(0,0,0,.4); --tile-fs:.6em; --tile-dy:0; --tile-gap:.07em; --tile-vow:linear-gradient(160deg,#e3efd2,#bcd4a2);
  --topic-bg:#f6efe0; --topic-text:#2d2418; --topic-dim:#c8502d; --topic-case:none; --tilt:-.6deg;
  --rule-bg:#2d4a6b; --rule-text:#fff; --track:rgba(0,0,0,.22);
  --tray-bg:linear-gradient(#7a5230,#5e3d22); --tray-shadow:inset 0 4px 12px rgba(0,0,0,.45),0 3px 0 rgba(0,0,0,.25); --tray-dim:#e9d6b0;
}

/* ---------- Неон: ночной город, вывески из трубок, дудлы на фоне ---------- */
[data-theme="neon"]{
  color-scheme:dark;
  --neon-pink:#ff2e88; --neon-cyan:#19e3ff; --neon-yellow:#ffd23d; --neon-green:#3dffa8; --neon-violet:#a46bff;
  --bg-color:#14073b;
  --bg-image:radial-gradient(ellipse 65% 55% at 12% 6%,rgba(255,46,136,.42),transparent 62%),radial-gradient(ellipse 60% 50% at 92% 18%,rgba(25,227,255,.32),transparent 62%),radial-gradient(ellipse 80% 55% at 50% 112%,rgba(164,107,255,.55),transparent 66%),linear-gradient(165deg,#1d0b52 0%,#13063a 52%,#240a58 100%);
  --bg-size:100% 100%;
  --text:#f6f0ff; --text-dim:#b9acdc; --header-bg:rgba(20,7,59,.72);
  --surface:rgba(26,12,66,.84); --surface-text:#f6f0ff; --surface-dim:#a99bd0; --input-bg:rgba(255,255,255,.07); --inset:none;
  --line:var(--neon-pink); --bw:2px; --bw-thick:3px; --r:20px; --r-sm:12px;
  --shadow:0 0 10px rgba(255,46,136,.6),0 0 32px rgba(255,46,136,.3); --shadow-sm:0 0 10px rgba(255,46,136,.4); --shadow-press:0 0 4px rgba(255,46,136,.5); --press:1px;
  --btn-bg:rgba(30,14,74,.9); --btn-text:#f6f0ff;
  --accent:#19e3ff; --accent-text:#07102a; --accent-on-surface:#19e3ff;
  --good:#3dffa8; --bad:#ff3d6e; --warn:#ffd23d; --gold:#ffd23d; --gold-text:#1a0b45;
  --focus:#19e3ff; --focus-soft:rgba(25,227,255,.4);
  --font-d:"Unbounded",system-ui,sans-serif; --font-u:"Golos Text",system-ui,sans-serif;
  --d-weight:800; --d-case:uppercase; --d-track:.04em; --title-glow:0 0 6px #fff,0 0 16px var(--neon-pink),0 0 34px var(--neon-pink);
  --tile-face:rgba(14,6,40,.92); --tile-text:#fff; --tile-line:var(--neon-cyan); --tile-bw:max(1.5px,.035em); --tile-r:.14em;
  --tile-shadow:0 0 .22em rgba(25,227,255,.7),inset 0 0 .24em rgba(25,227,255,.28); --tile-fs:.48em; --tile-dy:0; --tile-gap:.1em; --tile-glow:0 0 .18em #19e3ff; --tile-vow:rgba(255,46,136,.45);
  --topic-bg:rgba(20,8,56,.9); --topic-text:#fff; --topic-dim:#ff6fb0; --tilt:-1deg;
  --rule-bg:#ff2e88; --rule-text:#fff; --track:rgba(255,255,255,.1);
  --tray-bg:rgba(10,4,32,.62); --tray-shadow:inset 0 0 34px rgba(25,227,255,.14),0 0 16px rgba(25,227,255,.32); --tray-dim:#8d7fb8;
}

/* ---------- Бумага: светлый минимализм ---------- */
[data-theme="paper"]{
  color-scheme:light;
  --bg-color:#f4f1ea; --bg-image:none;
  --text:#1b1b1b; --text-dim:#5d5a54; --header-bg:rgba(244,241,234,.86);
  --surface:#fff; --surface-text:#1b1b1b; --surface-dim:#77736b; --input-bg:#f4f1ea; --inset:none;
  --line:#dcd6ca; --bw:1px; --bw-thick:1px; --r:14px; --r-sm:10px;
  --shadow:0 1px 2px rgba(0,0,0,.05),0 10px 28px rgba(0,0,0,.06); --shadow-sm:0 1px 2px rgba(0,0,0,.08); --shadow-press:none; --press:1px;
  --btn-bg:#fff; --btn-text:#1b1b1b;
  --accent:#1b1b1b; --accent-text:#fff; --accent-on-surface:#d93036;
  --good:#18794e; --bad:#d93036; --warn:#b4690e; --gold:#ffd84d; --gold-text:#1b1b1b;
  --focus:#3d6bff; --focus-soft:rgba(61,107,255,.25);
  --font-d:"Golos Text",system-ui,sans-serif; --font-u:"Golos Text",system-ui,sans-serif;
  --d-weight:800; --d-case:none; --d-track:-.01em;
  --tile-face:#fff; --tile-text:#1b1b1b; --tile-line:#dcd6ca; --tile-bw:1px; --tile-r:.14em;
  --tile-shadow:0 .04em 0 #dcd6ca; --tile-fs:.56em; --tile-dy:0; --tile-gap:.07em; --tile-vow:#e6eeff;
  --topic-bg:#fff; --topic-text:#1b1b1b; --topic-dim:#d93036; --topic-case:none; --tilt:0deg;
  --rule-bg:#1b1b1b; --rule-text:#fff; --track:#e8e4da;
  --tray-bg:#fff; --tray-shadow:inset 0 1px 3px rgba(0,0,0,.06); --tray-dim:#a19c92;
}

/* ---------- Пиксель: серый игровой интерфейс с фаской ---------- */
[data-theme="pixel"]{
  color-scheme:dark;
  --bg-color:#383838;
  --bg-image:repeating-conic-gradient(#3b3b3b 0 25%,#343434 0 50%);
  --bg-size:32px 32px;
  --text:#fff; --text-dim:#cfcfcf; --header-bg:rgba(30,30,30,.9);
  --surface:#c6c6c6; --surface-text:#3f3f3f; --surface-dim:#5e5e5e; --input-bg:#dadada; --inset:inset 3px 3px 0 #8b8b8b;
  --line:#000; --bw:3px; --bw-thick:3px; --r:0; --r-sm:0;
  --shadow:inset -4px -4px 0 #555,inset 4px 4px 0 #fff; --shadow-sm:inset -3px -3px 0 #555,inset 3px 3px 0 #fff; --shadow-press:inset 3px 3px 0 #555,inset -3px -3px 0 #fff; --press:0px;
  --btn-bg:#a8a8a8; --btn-text:#fff;
  --accent:#5fb33a; --accent-text:#fff; --accent-text-shadow:2px 2px 0 #2b5a1a; --accent-on-surface:#2e7d1f;
  --good:#3f9a22; --bad:#d83a3a; --warn:#ffd93d; --gold:#ffd93d; --gold-text:#3f2a00;
  --focus:#ffd93d; --focus-soft:rgba(255,217,61,.4);
  --font-d:"Press Start 2P",monospace; --font-u:"Golos Text",system-ui,sans-serif;
  --d-weight:400; --d-case:uppercase; --d-track:0; --title-glow:3px 3px 0 #000;
  --tile-face:#c6c6c6; --tile-text:#3f3f3f; --tile-line:#000; --tile-bw:max(2px,.05em); --tile-r:0;
  --tile-shadow:inset -.07em -.07em 0 #555,inset .07em .07em 0 #fff; --tile-fs:.4em; --tile-dy:.03em; --tile-gap:.06em; --tile-vow:#9fd0ff;
  --topic-bg:#c6c6c6; --topic-text:#3f3f3f; --topic-dim:#8a5a35; --tilt:0deg;
  --rule-bg:#8a5a35; --rule-text:#fff; --track:#1e1e1e;
  --tray-bg:#1e1e1e; --tray-shadow:inset 4px 4px 0 #000,inset -4px -4px 0 #555; --tray-dim:#8b8b8b;
}
[data-theme="pixel"] .btn{text-shadow:2px 2px 0 rgba(0,0,0,.45)}
[data-theme="pixel"] .btn.primary{text-shadow:var(--accent-text-shadow)}
[data-theme="pixel"] .topic-main{line-height:1.35;font-size:clamp(18px,4.4vw,32px)}
[data-theme="pixel"] h2,[data-theme="pixel"] .btn{font-size:13px;line-height:1.4}
[data-theme="pixel"] .btn.big{font-size:15px}
[data-theme="pixel"] .pack b,[data-theme="pixel"] .steps b{font-size:12px;line-height:1.5}
[data-theme="pixel"] .demo-main{font-size:clamp(13px,3vw,17px);line-height:1.5}
[data-theme="pixel"] .logo-tag{font-size:12px;line-height:1.4}
[data-theme="paper"] .fx-pop{--pop-line:#1b1b1b}
[data-theme="paper"] .fx-stamp{border-color:#1b1b1b}
[data-theme="board"] .fx-pop{--pop-line:#2d2418}
[data-theme="neon"] .fx-pop{--pop-line:#ff2e88}
[data-theme="pixel"] .fx-pop{--pop-stroke:4px;font-size:clamp(40px,11vw,90px)}

/* ---------- Неон: фон с плывущими дудлами и вывески ---------- */
@keyframes neonDrift{to{transform:translate3d(480px,480px,0)}}
@keyframes neonFlicker{0%,18%,22%,24%,52%,54%,100%{opacity:1}20%,23%{opacity:.5}53%{opacity:.7}}
@keyframes neonPulse{50%{box-shadow:0 0 14px var(--neon),0 0 44px color-mix(in srgb,var(--neon) 55%,transparent),inset 0 0 30px color-mix(in srgb,var(--neon) 22%,transparent)}}
[data-theme="neon"] body::before{content:"";position:fixed;left:-480px;top:-480px;right:0;bottom:0;z-index:-1;pointer-events:none;
  background:url("../img/neon-doodles.svg") 0 0/480px 480px repeat;opacity:.42;animation:neonDrift 70s linear infinite;will-change:transform}
[data-theme="neon"] body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%,transparent 45%,rgba(8,2,28,.55) 100%)}

/* the header is a strip of light */
[data-theme="neon"] .top{border-bottom:1.5px solid rgba(255,46,136,.55);box-shadow:0 8px 28px -12px rgba(255,46,136,.7)}
[data-theme="neon"] .brand{color:#fff;animation:neonFlicker 7s infinite}

/* every panel is a sign: a glass plate in a tube of its own colour */
[data-theme="neon"] .panel{--neon:var(--neon-cyan);
  background:linear-gradient(180deg,rgba(44,20,100,.78),rgba(20,8,58,.88));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:2px solid var(--neon);border-radius:20px;
  box-shadow:0 0 10px var(--neon),0 0 34px color-mix(in srgb,var(--neon) 42%,transparent),inset 0 0 26px color-mix(in srgb,var(--neon) 15%,transparent),inset 0 1px 0 rgba(255,255,255,.1)}
[data-theme="neon"] .screen>.panel:nth-child(3n+1){--neon:var(--neon-pink)}
[data-theme="neon"] .screen>.panel:nth-child(3n+2){--neon:var(--neon-cyan)}
[data-theme="neon"] .screen>.panel:nth-child(3n){--neon:var(--neon-yellow)}
[data-theme="neon"] .modal-card{--neon:var(--neon-violet)}
[data-theme="neon"] .panel-h h2,[data-theme="neon"] .pf-who h2{color:#fff;text-shadow:0 0 3px #fff,0 0 10px var(--neon,var(--neon-pink)),0 0 24px var(--neon,var(--neon-pink))}
[data-theme="neon"] .kicker{color:var(--neon,var(--neon-pink));text-shadow:0 0 8px color-mix(in srgb,var(--neon,var(--neon-pink)) 70%,transparent)}

/* the topic hangs on two chains and glows like a bar sign */
[data-theme="neon"] .topic{position:relative;margin-top:22px;background:linear-gradient(180deg,rgba(52,18,110,.85),rgba(22,6,60,.92));
  border:3px solid var(--neon-pink);border-radius:26px;outline:2px solid rgba(25,227,255,.85);outline-offset:6px;
  box-shadow:0 0 12px var(--neon-pink),0 0 42px rgba(255,46,136,.45),0 0 26px rgba(25,227,255,.35),inset 0 0 30px rgba(255,46,136,.2)}
[data-theme="neon"] .topic::before,[data-theme="neon"] .topic::after{content:"";position:absolute;top:-36px;width:3px;height:30px;background:linear-gradient(#9b8cc9,#4b3a86);border-radius:2px}
[data-theme="neon"] .topic::before{left:16%}
[data-theme="neon"] .topic::after{right:16%}
[data-theme="neon"] .topic-pre{color:var(--neon-pink);text-shadow:0 0 6px var(--neon-pink),0 0 18px var(--neon-pink);animation:neonFlicker 6s infinite}
[data-theme="neon"] .topic-main{color:#fff;text-shadow:0 0 4px #fff,0 0 14px var(--neon-cyan),0 0 34px var(--neon-cyan)}

/* buttons: lit tubes; the main one is a filled sign */
[data-theme="neon"] .btn{border-color:var(--neon-cyan);color:#fff;background:rgba(14,6,40,.7);box-shadow:0 0 10px rgba(25,227,255,.45),inset 0 0 12px rgba(25,227,255,.12)}
[data-theme="neon"] .btn:hover{box-shadow:0 0 16px rgba(25,227,255,.8),inset 0 0 14px rgba(25,227,255,.22)}
[data-theme="neon"] .btn.primary{background:linear-gradient(135deg,#ff2e88,#a46bff);border-color:#ff8cc2;color:#fff;text-shadow:0 0 8px rgba(255,255,255,.6);
  box-shadow:0 0 14px rgba(255,46,136,.85),0 0 38px rgba(164,107,255,.5),inset 0 0 14px rgba(255,255,255,.25)}
[data-theme="neon"] .btn.primary:hover{box-shadow:0 0 20px rgba(255,46,136,1),0 0 50px rgba(164,107,255,.7),inset 0 0 16px rgba(255,255,255,.35)}
[data-theme="neon"] .btn:disabled{box-shadow:none;opacity:.5}
[data-theme="neon"] .road-btn{border-color:var(--neon-yellow);box-shadow:0 0 14px rgba(255,210,61,.6),0 0 34px rgba(255,210,61,.25),inset 0 0 14px rgba(255,210,61,.18)}
[data-theme="neon"] .logo-tag{background:linear-gradient(135deg,#ff2e88,#a46bff);color:#fff;border-color:#ff8cc2;box-shadow:0 0 14px rgba(255,46,136,.9);text-shadow:0 0 6px rgba(255,255,255,.7)}
[data-theme="neon"] .icon-btn{border-color:rgba(255,46,136,.7);background:rgba(20,8,58,.8);box-shadow:0 0 10px rgba(255,46,136,.4)}

/* fields, packs, chips, score rows */
[data-theme="neon"] .field input{border-color:rgba(25,227,255,.7);background:rgba(8,3,28,.6);color:#fff}
[data-theme="neon"] .field input:focus{border-color:var(--neon-cyan);box-shadow:0 0 0 3px rgba(25,227,255,.3),0 0 18px rgba(25,227,255,.6)}
[data-theme="neon"] .pack{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.05)}
[data-theme="neon"] .pack[aria-pressed="true"]{border-color:var(--neon-cyan);background:linear-gradient(135deg,rgba(25,227,255,.9),rgba(61,255,168,.85));color:#06102a;box-shadow:0 0 16px rgba(25,227,255,.8),0 0 34px rgba(25,227,255,.35)}
[data-theme="neon"] .pack-chip{border-color:rgba(255,46,136,.7);background:rgba(20,8,58,.7);box-shadow:0 0 10px rgba(255,46,136,.35)}
[data-theme="neon"] .sc-row.me{background:rgba(25,227,255,.12);box-shadow:0 0 0 1.5px rgba(25,227,255,.7),0 0 14px rgba(25,227,255,.35)}
[data-theme="neon"] .sc-row.lead .pts{color:var(--neon-yellow);text-shadow:0 0 10px rgba(255,210,61,.9)}
[data-theme="neon"] .tray{border-color:var(--neon-cyan)}
[data-theme="neon"] .timer-track{border-color:rgba(25,227,255,.6)}
[data-theme="neon"] .timer-track i{box-shadow:0 0 12px currentColor,0 0 22px var(--good)}
[data-theme="neon"] .rule{border-color:#ff8cc2;box-shadow:0 0 14px rgba(255,46,136,.8),0 0 34px rgba(255,46,136,.35)}
[data-theme="neon"] .tag{background:rgba(255,255,255,.1);color:#fff}
[data-theme="neon"] .tag.host{background:var(--neon-yellow);color:#1a0b45;box-shadow:0 0 10px rgba(255,210,61,.7)}
[data-theme="neon"] .av.pic{box-shadow:0 0 10px rgba(255,46,136,.6)}
[data-theme="neon"] .lvl-bar{border-color:rgba(25,227,255,.6)}
[data-theme="neon"] .lvl-bar>i{background:linear-gradient(90deg,#19e3ff,#3dffa8);box-shadow:0 0 12px rgba(25,227,255,.9)}
[data-theme="neon"] .ach.got{box-shadow:0 0 0 2px var(--neon-green) inset,0 0 14px rgba(61,255,168,.35)}
[data-theme="neon"] .av-opt.on{border-color:var(--neon-green);box-shadow:0 0 0 2px var(--neon-green) inset,0 0 14px rgba(61,255,168,.45)}
[data-theme="neon"] .pf-tabs button[aria-selected="true"]{background:linear-gradient(135deg,#ff2e88,#a46bff);color:#fff;border-color:#ff8cc2;box-shadow:0 0 12px rgba(255,46,136,.7)}
[data-theme="neon"] .modal{background:rgba(8,2,28,.72)}
@media (prefers-reduced-motion:reduce){
  [data-theme="neon"] body::before,[data-theme="neon"] .brand,[data-theme="neon"] .topic-pre{animation:none}
}
@media (max-width:560px){
  [data-theme="neon"] .topic::before{left:12%}
  [data-theme="neon"] .topic::after{right:12%}
  [data-theme="neon"] .topic{outline-offset:4px;margin-top:20px}
}