/* ng-skins.css — twelve atmosphere packs for AURORA-X (2026-09-06).
 *
 * Companion to ng-skins.js. Applied as :root[data-skin="<id>"]; this sheet is
 * linked AFTER <link id="brand-sheet">, so at equal specificity (0,2,0) source
 * order lets a skin win over the brand's token block. Remove the attribute and
 * the brand returns untouched — a skin holds no state of its own.
 *
 * WHAT A SKIN OWNS: the surface ramp (--s0..--s3, the ramp the app actually
 * renders), the chromatic hues, text tones, lines, status colours, the glass
 * fills, the aurora field, the starfield, a texture layer, and --skin-brain
 * (which ng-skins.js hands to the WebGL brain, since CSS cannot reach it).
 * WHAT A SKIN NEVER TOUCHES: identity. Name, wordmark, tagline and demo-safety
 * stay with brands/*.css per THEMING.md.
 *
 * MERIDIAN, KEPT: every skin ships ONE hero hue and ONE signal hue. --crit is
 * always the most alarming colour inside its own palette, per THEMING.md rule 3
 * ("status may be retinted, never re-meaning"). Where the hero is itself red
 * (ARES, JUDGMENT) or green (DERELICT, CONSTRUCT), --crit is pushed to a hue
 * that still out-alarms it rather than colliding with it.
 *
 * ACCESSIBILITY: in every one of these source palettes the most on-brand colour
 * is the one that fails WCAG as text. So each skin carries the canonical hex on
 * --x-cyan (fills, borders, glows, large display) and a LIGHTENED sibling on
 * --skin-text for anything that carries body copy. Saturated-on-black halates:
 * text tones are deliberately desaturated relative to the hero.
 */

/* ---------------- GRID ---------------- */
:root[data-skin="grid"] {
  --skin-id:"grid";
  --x-cyan:#0EF8F8; --accent:#0EF8F8; --skin-brain:#0EF8F8;
  --skin-text:#8FE9F2;
  --x-blue:#4FB3FF; --x-violet:#4A9FD6; --x-mint:#3FE0C0;
  --x-amber:#FF8C00; --x-pink:#7FE9FF; --x-red:#FF4D6B; --x-slate:#7A94A3;
  --bg:#05080D; --s0:#05080D; --s1:#080F16; --s2:#0B1620; --s3:#122430;
  --surface-1:#080F16; --surface-2:#0B1620; --surface-3:#122430;
  --glass:rgba(11,22,32,.55); --glass-deep:rgba(8,15,22,.76); --glass-bar:rgba(5,8,13,.82);
  --t0:#E8F7FB; --t1:#B7D6E0; --t2:#7A94A3; --t3:#4A6472;
  --line:rgba(14,248,248,.10); --line2:rgba(14,248,248,.20);
  /* rgb triplets: retint the ~170 rgba() glow/border/gradient sites */
  --hero-rgb:14,248,248; --hero2-rgb:79,179,255;
  --violet-rgb:74,159,214; --mint-rgb:63,224,192;
  --linehue-rgb:14,248,248;
  --ok:#3FE0C0; --warn:#FF8C00; --crit:#FF4D6B; --info:#4FB3FF; --idle:#5A7382;
  --aurora-1:rgba(14,248,248,0.16); --aurora-2:rgba(6,36,116,0.3); --aurora-3:rgba(14,248,248,0.1); --aurora-op:.34;
  --star-1:rgba(207,248,255,0.7); --star-2:rgba(143,233,242,0.35); --star-3:rgba(14,248,248,0.4); --star-4:rgba(255,255,255,0.3); --star-op:.5;
}
/* ---------------- ARES ---------------- */
:root[data-skin="ares"] {
  --skin-id:"ares";
  --x-cyan:#FF2D2D; --accent:#FF2D2D; --skin-brain:#FF2D2D;
  --skin-text:#FF8A7A;
  --x-blue:#00FFFF; --x-violet:#A30000; --x-mint:#3CE87A;
  --x-amber:#FF7F00; --x-pink:#FF5FA8; --x-red:#FF5FA8; --x-slate:#9A8080;
  --bg:#08070A; --s0:#08070A; --s1:#0E0709; --s2:#150A0C; --s3:#1F0F10;
  --surface-1:#0E0709; --surface-2:#150A0C; --surface-3:#1F0F10;
  --glass:rgba(21,10,12,.55); --glass-deep:rgba(14,7,9,.76); --glass-bar:rgba(8,7,10,.82);
  --t0:#F2E9E9; --t1:#D8C4C4; --t2:#9A8080; --t3:#6B5252;
  --line:rgba(255,45,45,.10); --line2:rgba(255,45,45,.20);
  /* rgb triplets: retint the ~170 rgba() glow/border/gradient sites */
  --hero-rgb:255,45,45; --hero2-rgb:0,255,255;
  --violet-rgb:163,0,0; --mint-rgb:60,232,122;
  --linehue-rgb:255,45,45;
  --ok:#3CE87A; --warn:#FF7F00; --crit:#FF5FA8; --info:#00FFFF; --idle:#6B5A5A;
  --aurora-1:rgba(255,0,0,0.26); --aurora-2:rgba(139,0,0,0.34); --aurora-3:rgba(255,127,0,0.14); --aurora-op:.40;
  --star-1:rgba(255,217,217,0.5); --star-2:rgba(255,138,122,0.3); --star-3:rgba(255,45,45,0.35); --star-4:rgba(255,255,255,0.2); --star-op:.35;
}
/* ---------------- JUDGMENT ---------------- */
:root[data-skin="judgment"] {
  --skin-id:"judgment";
  --x-cyan:#FF3B24; --accent:#FF3B24; --skin-brain:#FF3B24;
  --skin-text:#FF8A72;
  --x-blue:#6E97A8; --x-violet:#6E97A8; --x-mint:#7FD4A8;
  --x-amber:#FFB300; --x-pink:#FF2D6B; --x-red:#FF2D6B; --x-slate:#B8C2C8;
  --bg:#0B0B0C; --s0:#0B0B0C; --s1:#101315; --s2:#151B1F; --s3:#1E272C;
  --surface-1:#101315; --surface-2:#151B1F; --surface-3:#1E272C;
  --glass:rgba(21,27,31,.55); --glass-deep:rgba(16,19,21,.76); --glass-bar:rgba(11,11,12,.82);
  --t0:#D6DDE0; --t1:#B8C2C8; --t2:#7C868C; --t3:#565F65;
  --line:rgba(255,59,36,.10); --line2:rgba(255,59,36,.20);
  /* rgb triplets: retint the ~170 rgba() glow/border/gradient sites */
  --hero-rgb:255,59,36; --hero2-rgb:110,151,168;
  --violet-rgb:110,151,168; --mint-rgb:127,212,168;
  --linehue-rgb:255,59,36;
  --ok:#7FD4A8; --warn:#FFB300; --crit:#FF2D6B; --info:#6E97A8; --idle:#565F65;
  --aurora-1:rgba(255,59,36,0.18); --aurora-2:rgba(110,151,168,0.2); --aurora-3:rgba(255,179,0,0.1); --aurora-op:.30;
  --star-1:rgba(200,212,218,0.5); --star-2:rgba(143,160,168,0.3); --star-3:rgba(255,59,36,0.25); --star-4:rgba(255,255,255,0.25); --star-op:.30;
}
/* ---------------- MONARCH ---------------- */
:root[data-skin="monarch"] {
  --skin-id:"monarch";
  --x-cyan:#8B5CF6; --accent:#8B5CF6; --skin-brain:#8B5CF6;
  --skin-text:#C4A9FF;
  --x-blue:#2E6FF2; --x-violet:#A970FF; --x-mint:#5FE0B0;
  --x-amber:#E8C27A; --x-pink:#EBBAF2; --x-red:#FF4D8F; --x-slate:#9A8FB5;
  --bg:#0B0714; --s0:#0B0714; --s1:#110C1E; --s2:#171029; --s3:#221838;
  --surface-1:#110C1E; --surface-2:#171029; --surface-3:#221838;
  --glass:rgba(23,16,41,.55); --glass-deep:rgba(17,12,30,.76); --glass-bar:rgba(11,7,20,.82);
  --t0:#F3ECFB; --t1:#D6C9EA; --t2:#9A8FB5; --t3:#6B6182;
  --line:rgba(139,92,246,.10); --line2:rgba(139,92,246,.20);
  /* rgb triplets: retint the ~170 rgba() glow/border/gradient sites */
  --hero-rgb:139,92,246; --hero2-rgb:46,111,242;
  --violet-rgb:169,112,255; --mint-rgb:95,224,176;
  --linehue-rgb:139,92,246;
  --ok:#5FE0B0; --warn:#E8C27A; --crit:#FF4D8F; --info:#2E6FF2; --idle:#6B6182;
  --aurora-1:rgba(139,92,246,0.3); --aurora-2:rgba(46,111,242,0.22); --aurora-3:rgba(235,186,242,0.12); --aurora-op:.44;
  --star-1:rgba(235,186,242,0.7); --star-2:rgba(196,169,255,0.4); --star-3:rgba(139,92,246,0.5); --star-4:rgba(255,255,255,0.35); --star-op:.65;
}
/* ---------------- OFF-WORLD ---------------- */
:root[data-skin="offworld"] {
  --skin-id:"offworld";
  --x-cyan:#FF8A2B; --accent:#FF8A2B; --skin-brain:#FF8A2B;
  --skin-text:#FFB877;
  --x-blue:#2AA3B8; --x-violet:#B07A5A; --x-mint:#3FD8D0;
  --x-amber:#2AA3B8; --x-pink:#E8B77A; --x-red:#FF5A4D; --x-slate:#8A9BA3;
  --bg:#0B0F12; --s0:#0B0F12; --s1:#101519; --s2:#153A42; --s3:#1C4A54;
  --surface-1:#101519; --surface-2:#153A42; --surface-3:#1C4A54;
  --glass:rgba(21,58,66,.55); --glass-deep:rgba(16,21,25,.76); --glass-bar:rgba(11,15,18,.82);
  --t0:#F2E7D5; --t1:#D4C4AC; --t2:#8A9BA3; --t3:#5F6E75;
  --line:rgba(255,138,43,.10); --line2:rgba(255,138,43,.20);
  /* rgb triplets: retint the ~170 rgba() glow/border/gradient sites */
  --hero-rgb:255,138,43; --hero2-rgb:42,163,184;
  --violet-rgb:176,122,90; --mint-rgb:63,216,208;
  --linehue-rgb:255,138,43;
  --ok:#3FD8D0; --warn:#FF8A2B; --crit:#FF5A4D; --info:#2AA3B8; --idle:#5F6E75;
  --aurora-1:rgba(255,138,43,0.26); --aurora-2:rgba(21,58,66,0.44); --aurora-3:rgba(42,163,184,0.14); --aurora-op:.46;
  --star-1:rgba(242,231,213,0.5); --star-2:rgba(232,183,122,0.3); --star-3:rgba(42,163,184,0.35); --star-4:rgba(255,255,255,0.2); --star-op:.30;
}
/* ---------------- DERELICT ---------------- */
:root[data-skin="derelict"] {
  --skin-id:"derelict";
  --x-cyan:#4AF626; --accent:#4AF626; --skin-brain:#4AF626;
  --skin-text:#8FD97C;
  --x-blue:#B8B3A0; --x-violet:#7A8C78; --x-mint:#4AF626;
  --x-amber:#FFB000; --x-pink:#FFB000; --x-red:#FF6B1A; --x-slate:#B8B3A0;
  --bg:#0A0E0A; --s0:#0A0E0A; --s1:#0E140E; --s2:#141C14; --s3:#1D281C;
  --surface-1:#0E140E; --surface-2:#141C14; --surface-3:#1D281C;
  --glass:rgba(20,28,20,.55); --glass-deep:rgba(14,20,14,.76); --glass-bar:rgba(10,14,10,.82);
  --t0:#D9E2D4; --t1:#B4C2AE; --t2:#7A8C78; --t3:#556354;
  --line:rgba(74,246,38,.10); --line2:rgba(74,246,38,.20);
  /* rgb triplets: retint the ~170 rgba() glow/border/gradient sites */
  --hero-rgb:74,246,38; --hero2-rgb:184,179,160;
  --violet-rgb:122,140,120; --mint-rgb:74,246,38;
  --linehue-rgb:74,246,38;
  --ok:#4AF626; --warn:#FFB000; --crit:#FF6B1A; --info:#B8B3A0; --idle:#556354;
  --aurora-1:rgba(74,246,38,0.14); --aurora-2:rgba(255,176,0,0.1); --aurora-3:rgba(42,58,40,0.4); --aurora-op:.26;
  --star-1:rgba(217,226,212,0.4); --star-2:rgba(143,217,124,0.25); --star-3:rgba(74,246,38,0.3); --star-4:rgba(255,176,0,0.2); --star-op:.22;
}
/* ---------------- SECTOR ---------------- */
:root[data-skin="sector"] {
  --skin-id:"sector";
  --x-cyan:#2BE7F5; --accent:#2BE7F5; --skin-brain:#2BE7F5;
  --skin-text:#8FE9F2;
  --x-blue:#2BE7F5; --x-violet:#B06BFF; --x-mint:#4E9B7A;
  --x-amber:#FF2D95; --x-pink:#FF2D95; --x-red:#FF2D95; --x-slate:#6B7A8F;
  --bg:#06080F; --s0:#06080F; --s1:#0B1018; --s2:#1A2233; --s3:#243047;
  --surface-1:#0B1018; --surface-2:#1A2233; --surface-3:#243047;
  --glass:rgba(26,34,51,.55); --glass-deep:rgba(11,16,24,.76); --glass-bar:rgba(6,8,15,.82);
  --t0:#E8F4F8; --t1:#C0D2DC; --t2:#6B7A8F; --t3:#4C5868;
  --line:rgba(43,231,245,.10); --line2:rgba(43,231,245,.20);
  /* rgb triplets: retint the ~170 rgba() glow/border/gradient sites */
  --hero-rgb:43,231,245; --hero2-rgb:43,231,245;
  --violet-rgb:176,107,255; --mint-rgb:78,155,122;
  --linehue-rgb:43,231,245;
  --ok:#4E9B7A; --warn:#F2C14E; --crit:#FF2D95; --info:#2BE7F5; --idle:#4C5868;
  --aurora-1:rgba(43,231,245,0.2); --aurora-2:rgba(255,45,149,0.2); --aurora-3:rgba(78,107,90,0.22); --aurora-op:.42;
  --star-1:rgba(232,244,248,0.6); --star-2:rgba(143,233,242,0.35); --star-3:rgba(255,45,149,0.35); --star-4:rgba(255,255,255,0.3); --star-op:.55;
}
/* ---------------- DOGMA ---------------- */
:root[data-skin="dogma"] {
  --skin-id:"dogma";
  --x-cyan:#FF6600; --accent:#FF6600; --skin-brain:#FF6600;
  --skin-text:#FFA766;
  --x-blue:#765898; --x-violet:#765898; --x-mint:#52D053;
  --x-amber:#52D053; --x-pink:#D3290F; --x-red:#D3290F; --x-slate:#8A8A82;
  --bg:#000000; --s0:#000000; --s1:#08080A; --s2:#0F0F12; --s3:#18181C;
  --surface-1:#08080A; --surface-2:#0F0F12; --surface-3:#18181C;
  --glass:rgba(15,15,18,.55); --glass-deep:rgba(8,8,10,.76); --glass-bar:rgba(0,0,0,.82);
  --t0:#FFFFFF; --t1:#D8D8D2; --t2:#8A8A82; --t3:#5E5E58;
  --line:rgba(255,102,0,.10); --line2:rgba(255,102,0,.20);
  /* rgb triplets: retint the ~170 rgba() glow/border/gradient sites */
  --hero-rgb:255,102,0; --hero2-rgb:118,88,152;
  --violet-rgb:118,88,152; --mint-rgb:82,208,83;
  --linehue-rgb:255,102,0;
  --ok:#52D053; --warn:#F5C024; --crit:#D3290F; --info:#765898; --idle:#5E5E58;
  --aurora-1:rgba(255,102,0,0.14); --aurora-2:rgba(118,88,152,0.12); --aurora-3:rgba(82,208,83,0.08); --aurora-op:.22;
  --star-1:rgba(255,255,255,0.5); --star-2:rgba(138,138,130,0.3); --star-3:rgba(255,102,0,0.3); --star-4:rgba(82,208,83,0.2); --star-op:.28;
}
/* ---------------- SPICE ---------------- */
:root[data-skin="spice"] {
  --skin-id:"spice";
  --x-cyan:#C8A97E; --accent:#C8A97E; --skin-brain:#C8A97E;
  --skin-text:#DCC49E;
  --x-blue:#35A7D8; --x-violet:#8A6B3D; --x-mint:#9F955F;
  --x-amber:#35A7D8; --x-pink:#B4462C; --x-red:#B4462C; --x-slate:#7D7568;
  --bg:#0D0B08; --s0:#0D0B08; --s1:#13100C; --s2:#1A1611; --s3:#26201A;
  --surface-1:#13100C; --surface-2:#1A1611; --surface-3:#26201A;
  --glass:rgba(26,22,17,.55); --glass-deep:rgba(19,16,12,.76); --glass-bar:rgba(13,11,8,.82);
  --t0:#E8E4DC; --t1:#C9C1B2; --t2:#7D7568; --t3:#5B554B;
  --line:rgba(200,169,126,.10); --line2:rgba(200,169,126,.20);
  /* rgb triplets: retint the ~170 rgba() glow/border/gradient sites */
  --hero-rgb:200,169,126; --hero2-rgb:53,167,216;
  --violet-rgb:138,107,61; --mint-rgb:159,149,95;
  --linehue-rgb:200,169,126;
  --ok:#9F955F; --warn:#C8A97E; --crit:#B4462C; --info:#35A7D8; --idle:#3E4A44;
  --aurora-1:rgba(200,169,126,0.22); --aurora-2:rgba(138,107,61,0.26); --aurora-3:rgba(53,167,216,0.1); --aurora-op:.40;
  --star-1:rgba(232,228,220,0.4); --star-2:rgba(200,169,126,0.25); --star-3:rgba(53,167,216,0.3); --star-4:rgba(255,255,255,0.2); --star-op:.24;
}
/* ---------------- CONSTRUCT ---------------- */
:root[data-skin="construct"] {
  --skin-id:"construct";
  --x-cyan:#00FF41; --accent:#00FF41; --skin-brain:#00FF41;
  --skin-text:#6B9E6E;
  --x-blue:#5C7A99; --x-violet:#5C7A99; --x-mint:#00FF41;
  --x-amber:#CCFFCC; --x-pink:#FF5544; --x-red:#FF5544; --x-slate:#4F7F52;
  --bg:#0D0208; --s0:#0D0208; --s1:#040A05; --s2:#08120A; --s3:#0D1D10;
  --surface-1:#040A05; --surface-2:#08120A; --surface-3:#0D1D10;
  --glass:rgba(8,18,10,.55); --glass-deep:rgba(4,10,5,.76); --glass-bar:rgba(13,2,8,.82);
  --t0:#CCFFCC; --t1:#8FD98F; --t2:#4F7F52; --t3:#356038;
  --line:rgba(0,255,65,.10); --line2:rgba(0,255,65,.20);
  /* rgb triplets: retint the ~170 rgba() glow/border/gradient sites */
  --hero-rgb:0,255,65; --hero2-rgb:92,122,153;
  --violet-rgb:92,122,153; --mint-rgb:0,255,65;
  --linehue-rgb:0,255,65;
  --ok:#00FF41; --warn:#CCFFCC; --crit:#FF5544; --info:#5C7A99; --idle:#356038;
  --aurora-1:rgba(0,255,65,0.14); --aurora-2:rgba(0,59,0,0.5); --aurora-3:rgba(0,143,17,0.2); --aurora-op:.30;
  --star-1:rgba(204,255,204,0.5); --star-2:rgba(0,255,65,0.35); --star-3:rgba(0,143,17,0.4); --star-4:rgba(0,59,0,0.5); --star-op:.40;
}
/* ---------------- HOLO ---------------- */
:root[data-skin="holo"] {
  --skin-id:"holo";
  --x-cyan:#3FC8E8; --accent:#3FC8E8; --skin-brain:#3FC8E8;
  --skin-text:#8FDCF0;
  --x-blue:#3FC8E8; --x-violet:#507CAE; --x-mint:#8BE9C4;
  --x-amber:#FFB300; --x-pink:#7FE9FF; --x-red:#FF6B6E; --x-slate:#64696C;
  --bg:#02060B; --s0:#02060B; --s1:#060D14; --s2:#0A1A24; --s3:#122836;
  --surface-1:#060D14; --surface-2:#0A1A24; --surface-3:#122836;
  --glass:rgba(10,26,36,.55); --glass-deep:rgba(6,13,20,.76); --glass-bar:rgba(2,6,11,.82);
  --t0:#BEF3FF; --t1:#9EC9D8; --t2:#5E93A6; --t3:#43697A;
  --line:rgba(63,200,232,.10); --line2:rgba(63,200,232,.20);
  /* rgb triplets: retint the ~170 rgba() glow/border/gradient sites */
  --hero-rgb:63,200,232; --hero2-rgb:63,200,232;
  --violet-rgb:80,124,174; --mint-rgb:139,233,196;
  --linehue-rgb:63,200,232;
  --ok:#8BE9C4; --warn:#FFB300; --crit:#FF6B6E; --info:#3FC8E8; --idle:#64696C;
  --aurora-1:rgba(63,200,232,0.22); --aurora-2:rgba(27,107,135,0.3); --aurora-3:rgba(139,233,196,0.1); --aurora-op:.38;
  --star-1:rgba(190,243,255,0.6); --star-2:rgba(127,233,255,0.35); --star-3:rgba(63,200,232,0.4); --star-4:rgba(255,255,255,0.3); --star-op:.5;
}
/* ---------------- ARCLIGHT ---------------- */
:root[data-skin="arclight"] {
  --skin-id:"arclight";
  --x-cyan:#29ABE2; --accent:#29ABE2; --skin-brain:#29ABE2;
  --skin-text:#8FD3F0;
  --x-blue:#29ABE2; --x-violet:#B14FE8; --x-mint:#7FBF3F;
  --x-amber:#C8A254; --x-pink:#F242F5; --x-red:#F242F5; --x-slate:#8A8778;
  --bg:#0E1119; --s0:#0E1119; --s1:#121624; --s2:#171326; --s3:#221B38;
  --surface-1:#121624; --surface-2:#171326; --surface-3:#221B38;
  --glass:rgba(23,19,38,.55); --glass-deep:rgba(18,22,36,.76); --glass-bar:rgba(14,17,25,.82);
  --t0:#E8E4DC; --t1:#C6C2B8; --t2:#8A8778; --t3:#635F55;
  --line:rgba(41,171,226,.10); --line2:rgba(41,171,226,.20);
  /* rgb triplets: retint the ~170 rgba() glow/border/gradient sites */
  --hero-rgb:41,171,226; --hero2-rgb:41,171,226;
  --violet-rgb:177,79,232; --mint-rgb:127,191,63;
  --linehue-rgb:41,171,226;
  --ok:#7FBF3F; --warn:#C8A254; --crit:#F242F5; --info:#29ABE2; --idle:#635F55;
  --aurora-1:rgba(41,171,226,0.22); --aurora-2:rgba(138,44,226,0.24); --aurora-3:rgba(127,191,63,0.12); --aurora-op:.44;
  --star-1:rgba(232,228,220,0.5); --star-2:rgba(177,224,231,0.3); --star-3:rgba(41,171,226,0.35); --star-4:rgba(200,162,84,0.25); --star-op:.42;
}

/* ===========================================================================
 * EFFECTS — v2, "clean, modern, futuristic" (2026-09-06, the operator's note:
 * "I like the ones where you don't hide the background").
 *
 * v1 was retro and it covered things: CRT scanlines at 55% multiply, hazard
 * chevrons, a full-bleed lattice. Those sat at z-index 1, directly on top of
 * the aurora field and the 3D brain, and washed both out.
 *
 * THE RULE NOW: the middle of the screen stays clear. Every effect is either
 *   (a) EDGE-WEIGHTED — masked so it lives at the perimeter, or
 *   (b) SPARSE — a few small emitters, never a fill, or
 *   (c) a SINGLE moving element, not a repeating field.
 * Nothing uses multiply. Opacity budget is a fraction of v1. The backdrop is
 * the point; these frame it rather than cover it.
 * ======================================================================== */

/* --- the shared base: a soft vignette that makes the CENTRE brighter by
       comparison, so the brain and aurora read MORE, not less. ------------- */
:root[data-skin] body::after {
  content: ""; position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 120% 100% at 50% 45%,
              transparent 52%, rgba(0,0,0,.30) 100%);
}

/* --- the signature layer: edge-weighted light bleed in the skin's own hue.
       `screen` on a dark ground adds light without hiding what is under it. -- */
:root[data-skin] body::before {
  content: ""; position: fixed; inset: 0; z-index: 1;
  pointer-events: none; mix-blend-mode: screen;
  background:
    radial-gradient(60% 42% at 0% 0%,   rgba(var(--hero-rgb,0,229,255),.11), transparent 70%),
    radial-gradient(52% 38% at 100% 100%, rgba(var(--mint-rgb,0,255,200),.08), transparent 70%);
}

/* GRID — a horizon lattice that fades out before it reaches the content. */
:root[data-skin="grid"] body::after {
  background:
    repeating-linear-gradient(90deg, transparent 0 63px, rgba(var(--hero-rgb),.16) 63px 64px),
    radial-gradient(ellipse 120% 100% at 50% 45%, transparent 52%, rgba(0,0,0,.30) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 62%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 62%, #000 100%);
}

/* ARES — hard red rim light from the top-left, industrial but not a texture. */
:root[data-skin="ares"] body::before {
  background:
    radial-gradient(70% 46% at 0% 0%, rgba(255,45,45,.16), transparent 68%),
    radial-gradient(46% 34% at 100% 96%, rgba(255,127,0,.10), transparent 70%);
}

/* JUDGMENT — machine vision, expressed as corner brackets rather than
   scanlines. Four hairlines at the frame corners; the middle is untouched. */
:root[data-skin="judgment"] body::after {
  background:
    linear-gradient(90deg, rgba(var(--hero-rgb),.5) 0 78px, transparent 78px) 22px 22px/100% 1px no-repeat,
    linear-gradient(0deg,  rgba(var(--hero-rgb),.5) 0 78px, transparent 78px) 22px 22px/1px 100% no-repeat,
    linear-gradient(270deg, rgba(var(--hero-rgb),.5) 0 78px, transparent 78px) calc(100% - 22px) calc(100% - 22px)/100% 1px no-repeat,
    linear-gradient(180deg, rgba(var(--hero-rgb),.5) 0 78px, transparent 78px) calc(100% - 22px) calc(100% - 22px)/1px 100% no-repeat,
    radial-gradient(ellipse 120% 100% at 50% 45%, transparent 52%, rgba(0,0,0,.34) 100%);
}

/* MONARCH — sparse embers. Already the right idiom; just fewer and dimmer. */
:root[data-skin="monarch"] body::before {
  background:
    radial-gradient(1.5px 1.5px at 14% 86%, rgba(232,194,122,.55), transparent 100%),
    radial-gradient(1px 1px at 66% 74%, rgba(var(--violet-rgb),.5), transparent 100%),
    radial-gradient(1.5px 1.5px at 88% 92%, rgba(232,194,122,.4), transparent 100%),
    radial-gradient(64% 44% at 0% 0%, rgba(var(--hero-rgb),.13), transparent 70%);
  background-size: 620px 680px, 620px 680px, 620px 680px, 100% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  :root[data-skin="monarch"] body::before { animation: skin-rise 34s linear infinite; }
  @keyframes skin-rise { from { background-position: 0 0, 0 0, 0 0, 0 0 }
                         to   { background-position: 0 -680px, 0 -680px, 0 -680px, 0 0 } }
}

/* OFF-WORLD — a sodium haze pooling up from the floor of the frame. */
:root[data-skin="offworld"] body::before {
  background:
    linear-gradient(0deg, rgba(255,138,43,.13), transparent 42%),
    radial-gradient(52% 36% at 96% 4%, rgba(42,163,184,.10), transparent 70%);
}

/* DERELICT — phosphor bloom at the edges. The scanlines are gone; what is
   left is the glow they were sitting in. */
:root[data-skin="derelict"] body::before {
  background:
    radial-gradient(66% 44% at 0% 100%, rgba(var(--hero-rgb),.12), transparent 70%),
    radial-gradient(48% 32% at 100% 0%, rgba(255,176,0,.08), transparent 70%);
}

/* SECTOR — the two-hue cyber-noir split, corner to corner. */
:root[data-skin="sector"] body::before {
  background:
    radial-gradient(58% 40% at 4% 0%, rgba(var(--hero-rgb),.13), transparent 70%),
    radial-gradient(58% 40% at 96% 100%, rgba(255,45,149,.12), transparent 70%);
}

/* DOGMA — one hazard hairline at the very bottom edge. The chevron field is
   gone; a single 2px accent reads as command-centre without covering anything. */
:root[data-skin="dogma"] body::after {
  background:
    linear-gradient(90deg, rgba(255,102,0,.55) 0 22%, rgba(82,208,83,.4) 22% 30%, transparent 30%)
      0 100%/100% 2px no-repeat,
    radial-gradient(ellipse 120% 100% at 50% 45%, transparent 52%, rgba(0,0,0,.34) 100%);
}

/* SPICE — ochre dust suspended in the upper air, plus real grain. */
:root[data-skin="spice"] body::before {
  background:
    linear-gradient(180deg, rgba(200,169,126,.11), transparent 38%),
    radial-gradient(44% 30% at 90% 96%, rgba(53,167,216,.07), transparent 70%);
}
:root[data-skin="spice"] body::after,
:root[data-skin="arclight"] body::after {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.42'/></svg>"),
    radial-gradient(ellipse 120% 100% at 50% 45%, transparent 52%, rgba(0,0,0,.30) 100%);
  opacity: .5;
}

/* CONSTRUCT — code rain confined to the outer margins; the centre is clear. */
:root[data-skin="construct"] body::after {
  background:
    repeating-linear-gradient(90deg, transparent 0 26px, rgba(var(--hero-rgb),.16) 26px 27px),
    radial-gradient(ellipse 120% 100% at 50% 45%, transparent 52%, rgba(0,0,0,.30) 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0, transparent 16%, transparent 84%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0, transparent 16%, transparent 84%, #000 100%);
}
@media (prefers-reduced-motion: no-preference) {
  :root[data-skin="construct"] body::after { animation: skin-fall 2.4s linear infinite; }
  @keyframes skin-fall { from { background-position: 0 0, 0 0 } to { background-position: 0 240px, 0 0 } }
}

/* HOLO — the one moving element in the whole system: a single soft sweep. */
@media (prefers-reduced-motion: no-preference) {
  :root[data-skin="holo"] body::after {
    background:
      linear-gradient(180deg, transparent, rgba(var(--hero-rgb),.30), transparent) 0 0/100% 130px no-repeat,
      radial-gradient(ellipse 120% 100% at 50% 45%, transparent 52%, rgba(0,0,0,.30) 100%);
    animation: skin-sweep 5.5s cubic-bezier(.45,0,.55,1) infinite;
  }
  @keyframes skin-sweep { from { background-position: 0 -140px, 0 0 }
                          to   { background-position: 0 110vh, 0 0 } }
}

/* ARCLIGHT — hextech above, shimmer below. */
:root[data-skin="arclight"] body::before {
  background:
    radial-gradient(58% 38% at 8% 0%, rgba(var(--hero-rgb),.13), transparent 70%),
    radial-gradient(54% 36% at 92% 100%, rgba(177,79,232,.12), transparent 70%);
}

@media (prefers-reduced-motion: reduce) {
  :root[data-skin] body::after,
  :root[data-skin] body::before { animation: none !important; }
}
/* ===========================================================================
 * THE PICKER
 * ======================================================================== */
#skin-picker[hidden] { display: none; }
#skin-picker { position: fixed; inset: 0; z-index: 9200; display: flex;
  align-items: center; justify-content: center; }
.skin-veil { position: absolute; inset: 0; background: rgba(2,5,10,.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.skin-panel { position: relative; width: min(920px, 94vw); max-height: 86vh;
  overflow: auto; padding: 18px;
  background: var(--glass-deep, rgba(5,11,22,.94));
  border: 1px solid var(--line2); border-radius: var(--r3, 14px);
  box-shadow: 0 24px 80px rgba(0,0,0,.6); }
.skin-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px; }
.skin-title { font: 600 13px/1 var(--fm); letter-spacing: .22em; color: var(--t0); }
.skin-sub { flex: 1 1 auto; font: 400 11px/1.4 var(--fm); color: var(--t3); }
.skin-x { min-height: 36px; min-width: 36px; background: none; border: 0;
  color: var(--t2); font-size: 15px; cursor: pointer; border-radius: var(--r2); }
.skin-x:hover { color: var(--t0); }
.skin-grid { display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.skin-card { display: flex; align-items: center; gap: 11px; padding: 10px;
  text-align: left; cursor: pointer;
  background: var(--glass, rgba(10,20,38,.5));
  border: 1px solid var(--line); border-radius: var(--r2, 8px);
  transition: border-color var(--tf) var(--ease), transform var(--tf) var(--ease); }
.skin-card:hover { border-color: var(--line2); transform: translateY(-1px); }
.skin-card.on { border-color: var(--x-cyan); box-shadow: 0 0 0 1px var(--x-cyan) inset; }
.skin-swatch { position: relative; flex: 0 0 auto; width: 46px; height: 46px;
  border-radius: var(--r2, 8px); overflow: hidden;
  background: var(--sw-bg); border: 1px solid var(--line2); }
.skin-swatch .sw-hero, .skin-swatch .sw-sig { position: absolute; border-radius: 50%; }
.skin-swatch .sw-hero { width: 26px; height: 26px; left: 5px; top: 6px;
  background: var(--sw-hero); box-shadow: 0 0 12px var(--sw-hero); }
.skin-swatch .sw-sig { width: 13px; height: 13px; right: 6px; bottom: 7px;
  background: var(--sw-sig); box-shadow: 0 0 8px var(--sw-sig); }
.skin-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.skin-name { font: 600 11px/1 var(--fm); letter-spacing: .16em; color: var(--t0); }
.skin-blurb { font: 400 10.5px/1.35 var(--fu); color: var(--t2); }
#skin-btn .skin-btn-lbl { margin-left: 6px; }
#skin-btn svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.5; fill: none; }

/* The picker is a full-screen sheet on phones — the mobile shell's own idiom. */
@media (max-width: 700px) {
  .skin-panel { width: 100vw; max-height: 100dvh; height: 100dvh;
    border-radius: 0; border: 0;
    padding: calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom)); }
  .skin-grid { grid-template-columns: 1fr; }
  .skin-card { min-height: 60px; }
  #skin-btn .skin-btn-lbl { display: none; }
}

/* The status bar already clips its right edge at 1440 (TOKENS/MIN is cut off
   before this button existed). The launcher must not make that worse, so the
   word goes away below 1600px and it rides as an icon. */
@media (max-width: 1600px) { #skin-btn .skin-btn-lbl { display: none; } }