/* Theme presets and the textured game feel. Shared by the landing page and the app.
   A preset is a block of variables; the list shown in the picker lives in app/modes.js. */
:root{--ok-ink:#fff;--ink:var(--accent-ink);--char:#6d4aff;--char-deep:#4a2fc4;--char-trim:#ffd966;--edge:rgba(0,0,0,.16);
  --display:inherit;--pattern:none;--pattern-size:auto;--grain-o:0;
  --grain-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
:root[data-mode="baddie"]{--char:#e6007e;--char-deep:#2b1630;--char-trim:#ffd23f}

:root[data-skin="grimoire"]{
  --bg:#14102a;--surface:#1e1840;--surface2:#2a2256;--text:#f3ecd8;--muted:#b3a8d1;--line:#3a3070;
  --accent:#f2c14e;--accent-soft:#3b3160;--accent-ink:#1b1430;--ok:#5fd39a;--ok-soft:#173a33;--ok-ink:#0c2a1e;--warn:#f0a35e;--danger:#ff8a80;--code-bg:#0c0920;
  --char:#7b5cff;--char-deep:#4a2fc4;--char-trim:#f2c14e;--edge:rgba(0,0,0,.45);--display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --pattern:radial-gradient(1.5px 1.5px at 24px 34px,rgba(255,255,255,.55) 50%,transparent 51%),radial-gradient(1px 1px at 96px 118px,rgba(255,255,255,.4) 50%,transparent 51%),radial-gradient(2px 2px at 158px 62px,rgba(242,193,78,.55) 50%,transparent 51%),radial-gradient(1px 1px at 188px 170px,rgba(255,255,255,.35) 50%,transparent 51%),radial-gradient(1.5px 1.5px at 62px 182px,rgba(180,160,255,.5) 50%,transparent 51%);
  --pattern-size:220px 220px;--grain:var(--grain-light);--grain-o:.1}
:root[data-skin="enchanted"]{
  --bg:#f3ecd6;--surface:#fbf6e6;--surface2:#e9dfc2;--text:#2b2416;--muted:#6a5d42;--line:#d4c59c;
  --accent:#b5541c;--accent-soft:#f6dcc4;--accent-ink:#fff;--ok:#2f7d4f;--ok-soft:#dcebd0;--ok-ink:#fff;--warn:#96590a;--danger:#b3261e;--code-bg:#221c12;
  --char:#2f7d4f;--char-deep:#1d5234;--char-trim:#f2c14e;--edge:rgba(70,50,10,.22);--display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --pattern:repeating-linear-gradient(45deg,rgba(90,70,20,.045) 0 2px,transparent 2px 9px),repeating-linear-gradient(-45deg,rgba(90,70,20,.045) 0 2px,transparent 2px 9px);
  --grain:var(--grain-dark);--grain-o:.14}
:root[data-skin="cyberbabe"]{
  --bg:#ffe9f3;--surface:#fff7fb;--surface2:#ffd6e8;--text:#3a0f2a;--muted:#85436a;--line:#f7b6d2;
  --accent:#d6006f;--accent-soft:#ffd0e6;--accent-ink:#fff;--ok:#0a8562;--ok-soft:#d4f5ea;--ok-ink:#fff;--warn:#9a5200;--danger:#c2185b;--code-bg:#2a0f22;
  --char:#e6007e;--char-deep:#2b1630;--char-trim:#ffd23f;--edge:rgba(170,0,90,.22);--display:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold","Trebuchet MS",sans-serif;
  --pattern:linear-gradient(rgba(214,0,111,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(214,0,111,.1) 1px,transparent 1px),radial-gradient(rgba(214,0,111,.35) 1.5px,transparent 2px);
  --pattern-size:32px 32px;--pattern-pos:0 0,0 0,-16px -16px;--grain:var(--grain-dark);--grain-o:.08}
:root[data-skin="afterdark"]{
  --bg:#0d0b10;--surface:#18141c;--surface2:#241d2a;--text:#fdf2f8;--muted:#b9a3b4;--line:#3a2c3d;
  --accent:#ff4fa3;--accent-soft:#3a1730;--accent-ink:#14060e;--ok:#c6ff3d;--ok-soft:#26330f;--ok-ink:#14200a;--warn:#ffb454;--danger:#ff8a80;--code-bg:#060508;
  --char:#ff4fa3;--char-deep:#f4e9ff;--char-trim:#c6ff3d;--edge:rgba(0,0,0,.6);--display:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold","Trebuchet MS",sans-serif;
  --pattern:repeating-linear-gradient(135deg,rgba(255,79,163,.07) 0 1px,transparent 1px 14px),radial-gradient(1.5px 1.5px at 40px 30px,rgba(198,255,61,.5) 50%,transparent 51%),radial-gradient(1px 1px at 120px 100px,rgba(255,255,255,.4) 50%,transparent 51%);
  --pattern-size:auto,160px 160px,160px 160px;--grain:var(--grain-light);--grain-o:.1}
:root[data-skin="arcade"]{
  --bg:#0b1026;--surface:#131a3a;--surface2:#1c2550;--text:#e8f0ff;--muted:#9aa8d6;--line:#2c3a78;
  --accent:#ffd23f;--accent-soft:#2c3163;--accent-ink:#1a1400;--ok:#3df2c0;--ok-soft:#0f3a3a;--ok-ink:#052a20;--warn:#ffb454;--danger:#ff7a90;--code-bg:#060a1a;
  --char:#ff5d8f;--char-deep:#b3245a;--char-trim:#ffd23f;--edge:rgba(0,0,0,.55);--radius:6px;--display:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --pattern:linear-gradient(rgba(60,80,170,.28) 1px,transparent 1px),linear-gradient(90deg,rgba(60,80,170,.28) 1px,transparent 1px);
  --pattern-size:28px 28px;--grain:var(--grain-light);--grain-o:.07}

/* texture: a tiled pattern behind, film grain over everything */
:root[data-game] body{background-image:var(--pattern);background-size:var(--pattern-size);background-position:var(--pattern-pos,0 0)}
:root[data-game] body::before{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;background:var(--grain);opacity:var(--grain-o)}

/* game feel: chunky, pressable, slightly raised */
:root[data-game] h1,:root[data-game] h2,:root[data-game] h3,:root[data-game] .brand,:root[data-game] .btn,:root[data-game] header b{font-family:var(--display)}
:root[data-game] .btn{border-width:2px;border-bottom-width:4px;font-weight:700;transition:transform .06s}
:root[data-game] .btn:active{transform:translateY(2px);border-bottom-width:2px;margin-bottom:2px}
:root[data-game] .btn.primary{border-color:color-mix(in srgb,var(--accent) 70%,#000)}
:root[data-game] .card,:root[data-game] .pack,:root[data-game] .callout,:root[data-game] .cert,:root[data-game] .steps div,:root[data-game] .cta,:root[data-game] .landmark .lm,:root[data-game] .quiz .opt{border-width:2px;box-shadow:0 4px 0 var(--edge)}
:root[data-game] .pack.soon{box-shadow:none}
:root[data-game] .icon-btn{border-width:2px;border-bottom-width:3px}
:root[data-game] .overall{height:14px;border:2px solid var(--line)}
:root[data-skin="arcade"] .btn,:root[data-skin="arcade"] .icon-btn,:root[data-skin="arcade"] .card,:root[data-skin="arcade"] .pack,:root[data-skin="arcade"] .landmark .lm,:root[data-skin="arcade"] .dialog,:root[data-skin="arcade"] .cta,:root[data-skin="arcade"] .steps div,:root[data-skin="arcade"] .quiz .opt{border-radius:6px}
:root[data-skin="arcade"] h1{text-transform:uppercase;letter-spacing:.02em}