/* ============================================================
   Site skins. Every colour in the app and in each game comes from
   these variables, so a skin only has to redefine them here.
   Colours are "R G B" triplets so they work with transparency:
   rgb(var(--c1))  or  rgb(var(--c1) / .4)
   ============================================================ */
:root, [data-skin="neon"] {
  --skin: neon;
  --bg: #070814;
  --bg-art:
    radial-gradient(1100px 600px at 12% -10%, rgb(168 107 255 / .18), transparent 60%),
    radial-gradient(900px 600px at 105% 10%, rgb(255 79 216 / .13), transparent 60%),
    radial-gradient(900px 700px at 50% 120%, rgb(77 243 255 / .12), transparent 60%);
  --grid-art: .35;              /* faint background grid strength (0 = off) */
  --panel: rgb(17 19 42 / .78);
  --panel-solid: #12142c;
  --modal-bg: linear-gradient(180deg, rgb(24 26 56 / .97), rgb(14 15 34 / .98));
  --topbar-bg: rgb(7 8 20 / .72);
  --text: #e9ecff;
  --text-soft: #c3c7ee;
  --muted: #8f95c4;
  --on-accent: #07081a;
  --c1: 77 243 255;     /* main accent (cyan)   */
  --c2: 255 79 216;     /* second accent (pink) */
  --c3: 168 107 255;    /* violet  */
  --c4: 255 224 102;    /* yellow  */
  --c5: 61 255 158;     /* green   */
  --c6: 255 77 109;     /* red     */
  --c7: 255 159 69;     /* orange  */
  --ink: 255 255 255;   /* subtle overlays */
  --line-c: 130 145 255;
  --field: rgb(0 0 0 / .35);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Orbitron', 'Inter', sans-serif;
  --display-case: uppercase;
  --display-spacing: .14em;
  --radius: 14px;
  --glow-c: 0 0 10px rgb(77 243 255 / .55), 0 0 30px rgb(77 243 255 / .18);
  --glow-p: 0 0 10px rgb(255 79 216 / .55), 0 0 30px rgb(255 79 216 / .18);
  --glow-s: .55;        /* box-glow strength multiplier (0 = flat skins) */
  --shadow: 0 10px 40px rgb(0 0 0 / .35);
  color-scheme: dark;
}

[data-skin="classic"] {
  --skin: classic;
  --bg: #efe5cf;
  --bg-art:
    radial-gradient(1200px 700px at 20% -10%, rgb(255 255 255 / .55), transparent 60%),
    repeating-linear-gradient(0deg, rgb(120 90 50 / .025) 0 2px, transparent 2px 6px);
  --grid-art: 0;
  --panel: rgb(255 251 242 / .92);
  --panel-solid: #fbf6ea;
  --modal-bg: linear-gradient(180deg, #fffaf0, #f6eedb);
  --topbar-bg: rgb(244 236 218 / .9);
  --text: #2b2118;
  --text-soft: #4d3f31;
  --muted: #84725e;
  --on-accent: #fffaf0;
  --c1: 31 92 82;       /* deep green  */
  --c2: 150 36 44;      /* burgundy    */
  --c3: 120 82 40;      /* brass       */
  --c4: 184 134 30;     /* gold        */
  --c5: 46 125 50;
  --c6: 176 36 36;
  --c7: 196 110 30;
  --ink: 70 50 25;
  --line-c: 120 92 60;
  --field: rgb(255 255 255 / .7);
  --display: 'Playfair Display', Georgia, serif;
  --display-case: none;
  --display-spacing: .02em;
  --radius: 10px;
  --glow-c: none;
  --glow-p: none;
  --glow-s: 0;
  --shadow: 0 6px 24px rgb(60 40 20 / .12);
  color-scheme: light;
}

[data-skin="dark"] {
  --skin: dark;
  --bg: #0e1014;
  --bg-art: radial-gradient(900px 500px at 50% -10%, rgb(255 255 255 / .04), transparent 70%);
  --grid-art: 0;
  --panel: #171a20;
  --panel-solid: #171a20;
  --modal-bg: #1b1f26;
  --topbar-bg: rgb(14 16 20 / .9);
  --text: #e7e9ee;
  --text-soft: #c4c9d3;
  --muted: #8a92a0;
  --on-accent: #0b0d11;
  --c1: 96 165 250;
  --c2: 244 114 182;
  --c3: 167 139 250;
  --c4: 251 191 36;
  --c5: 52 211 153;
  --c6: 248 113 113;
  --c7: 251 146 60;
  --ink: 255 255 255;
  --line-c: 150 160 180;
  --field: rgb(0 0 0 / .3);
  --display: 'Inter', system-ui, sans-serif;
  --display-case: none;
  --display-spacing: 0;
  --radius: 12px;
  --glow-c: none;
  --glow-p: none;
  --glow-s: 0;
  --shadow: 0 8px 30px rgb(0 0 0 / .4);
  color-scheme: dark;
}

[data-skin="light"] {
  --skin: light;
  --bg: #f3f5fa;
  --bg-art: radial-gradient(1000px 600px at 80% -20%, rgb(124 58 237 / .07), transparent 60%), radial-gradient(900px 600px at 0% 0%, rgb(37 99 235 / .06), transparent 60%);
  --grid-art: 0;
  --panel: #ffffff;
  --panel-solid: #ffffff;
  --modal-bg: #ffffff;
  --topbar-bg: rgb(255 255 255 / .88);
  --text: #18202f;
  --text-soft: #3b4456;
  --muted: #687185;
  --on-accent: #ffffff;
  --c1: 37 99 235;
  --c2: 219 39 119;
  --c3: 124 58 237;
  --c4: 202 138 4;
  --c5: 22 163 74;
  --c6: 220 38 38;
  --c7: 234 88 12;
  --ink: 20 30 60;
  --line-c: 100 110 140;
  --field: #f6f7fb;
  --display: 'Inter', system-ui, sans-serif;
  --display-case: none;
  --display-spacing: 0;
  --radius: 12px;
  --glow-c: none;
  --glow-p: none;
  --glow-s: 0;
  --shadow: 0 6px 24px rgb(20 30 60 / .08);
  color-scheme: light;
}

[data-skin="arcade"] {
  --skin: arcade;
  --bg: #12082a;
  --bg-art:
    linear-gradient(180deg, transparent 55%, rgb(255 64 129 / .14) 100%),
    radial-gradient(900px 500px at 50% 0%, rgb(255 214 10 / .08), transparent 60%),
    repeating-linear-gradient(0deg, rgb(0 0 0 / .18) 0 1px, transparent 1px 3px);
  --grid-art: .25;
  --panel: rgb(35 14 66 / .86);
  --panel-solid: #230e42;
  --modal-bg: linear-gradient(180deg, #2a1150, #1c0a38);
  --topbar-bg: rgb(18 8 42 / .85);
  --text: #fff4e0;
  --text-soft: #f2d9ff;
  --muted: #b996e8;
  --on-accent: #1a0830;
  --c1: 255 214 10;
  --c2: 255 64 129;
  --c3: 0 229 255;
  --c4: 255 145 0;
  --c5: 118 255 3;
  --c6: 255 61 61;
  --c7: 255 145 0;
  --ink: 255 255 255;
  --line-c: 190 140 255;
  --field: rgb(0 0 0 / .35);
  --display: 'Press Start 2P', 'Orbitron', monospace;
  --display-case: uppercase;
  --display-spacing: .04em;
  --radius: 6px;
  --glow-c: 0 0 8px rgb(255 214 10 / .6);
  --glow-p: 0 0 8px rgb(255 64 129 / .6);
  --glow-s: .4;
  --shadow: 0 8px 0 rgb(0 0 0 / .35);
  color-scheme: dark;
}

/* helpers */
.glow-c { text-shadow: var(--glow-c); }
.glow-p { text-shadow: var(--glow-p); }