/* 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;
  --bg-color:#07060f;
  --bg-image:radial-gradient(ellipse at 50% 120%,rgba(255,46,136,.28),transparent 60%),linear-gradient(rgba(255,46,136,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(25,227,255,.06) 1px,transparent 1px);
  --bg-size:100% 100%,44px 44px,44px 44px;
  --text:#f2eaff; --text-dim:#a99cc9; --header-bg:rgba(7,6,15,.75);
  --surface:rgba(18,14,36,.88); --surface-text:#f2eaff; --surface-dim:#9b8fc0; --input-bg:rgba(255,255,255,.05); --inset:none;
  --line:rgba(255,46,136,.75); --bw:1.5px; --bw-thick:2px; --r:14px; --r-sm:10px;
  --shadow:0 0 0 1px rgba(255,46,136,.15),0 0 28px rgba(255,46,136,.28); --shadow-sm:0 0 14px rgba(255,46,136,.28); --shadow-press:0 0 4px rgba(255,46,136,.4); --press:1px;
  --btn-bg:rgba(18,14,36,.9); --btn-text:#f2eaff;
  --accent:#19e3ff; --accent-text:#07060f; --accent-on-surface:#19e3ff;
  --good:#3dffa8; --bad:#ff3d6e; --warn:#ffd23d; --gold:#ffd23d; --gold-text:#07060f;
  --focus:#19e3ff; --focus-soft:rgba(25,227,255,.35);
  --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 14px rgba(255,46,136,.85),0 0 2px #fff;
  --tile-face:rgba(10,8,22,.92); --tile-text:#fff; --tile-line:#19e3ff; --tile-bw:max(1.5px,.035em); --tile-r:.14em;
  --tile-shadow:0 0 .2em rgba(25,227,255,.55),inset 0 0 .22em rgba(25,227,255,.25); --tile-fs:.48em; --tile-dy:0; --tile-gap:.1em; --tile-glow:0 0 .18em #19e3ff; --tile-vow:rgba(255,46,136,.4);
  --topic-bg:rgba(18,14,36,.88); --topic-text:#fff; --topic-dim:#ff2e88; --tilt:0deg;
  --rule-bg:#ff2e88; --rule-text:#fff; --track:rgba(255,255,255,.08);
  --tray-bg:rgba(0,0,0,.5); --tray-shadow:inset 0 0 32px rgba(25,227,255,.1); --tray-dim:#7d70a5;
}

/* ---------- Бумага: светлый минимализм ---------- */
[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="neon"] .btn.primary{box-shadow:0 0 18px rgba(25,227,255,.55)}
[data-theme="neon"] .timer-track i{box-shadow:0 0 12px currentColor}
[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)}