/* User color themes. Loaded after shell.css so these tokens win.
 *
 * Each theme only declares base tokens (--t-*). The shared [data-theme] rule
 * derives every legacy variable (--hud-*, --bg-*, --border-*, --text-*, ...)
 * from them. Swatches in the theme picker carry their own data-theme
 * attribute, so previews read colors straight from this file.
 *
 * Required: --t-bg --t-card --t-line --t-text --t-muted --t-accent --t-ink
 * Optional: --t-bg2 --t-hover --t-line2 --t-dim --t-alt --t-mana --t-glow
 */

[data-theme] {
  --accent: var(--t-accent);
  --accent-ink: var(--t-ink);
  --hud-cyan: var(--t-accent);
  --neon-green: var(--t-accent);
  --neon-green-glow: color-mix(in srgb, var(--t-accent) var(--t-glow, 35%), transparent);
  --mana-cyan: var(--t-mana, var(--t-accent));
  --syndicate-gold: var(--t-alt, var(--t-accent));
  --hud-bg: var(--t-bg);
  --hud-card: var(--t-card);
  --hud-line: var(--t-line);
  --hud-text: var(--t-text);
  --hud-muted: var(--t-muted);
  --bg-darkest: var(--t-bg);
  --bg-darker: var(--t-bg2, var(--t-bg));
  --bg-card: var(--t-card);
  --bg-card-hover: var(--t-hover, color-mix(in srgb, var(--t-card) 90%, var(--t-text)));
  --bg-surface: var(--t-card);
  --border-dim: var(--t-line);
  --border-bright: var(--t-line2, color-mix(in srgb, var(--t-line) 70%, var(--t-text)));
  --text-main: var(--t-text);
  --text-muted: var(--t-muted);
  --text-dim: color-mix(in srgb, var(--t-text) 68%, var(--t-bg));
}

/* ---------- Dark ---------- */

[data-theme="slate"] {
  --t-bg: #0f172a; --t-card: #1e293b; --t-hover: #263449;
  --t-line: #334155; --t-line2: #475569;
  --t-text: #f8fafc; --t-muted: #94a3b8; --t-dim: #64748b;
  --t-accent: #22d3ee; --t-ink: #042027;
}

[data-theme="void"] {
  --t-bg: #000000; --t-card: #0a0a0a; --t-hover: #141414;
  --t-line: #262626; --t-line2: #404040;
  --t-text: #fafafa; --t-muted: #a3a3a3; --t-dim: #737373;
  --t-accent: #f5f5f5; --t-ink: #000000;
  --t-glow: 0%;
}

[data-theme="charcoal"] {
  --t-bg: #121212; --t-card: #1c1c1e; --t-hover: #26262a;
  --t-line: #2e2e33; --t-line2: #44444b;
  --t-text: #f2f2f3; --t-muted: #9d9da6; --t-dim: #70707a;
  --t-accent: #38bdf8; --t-ink: #04202e;
  --t-glow: 18%;
}

[data-theme="crawler"] {
  --t-bg: #071410; --t-card: #12261f; --t-hover: #18362c;
  --t-line: #1f4d3d; --t-line2: #2f6b56;
  --t-text: #ecfdf5; --t-muted: #86efac; --t-dim: #4ade80;
  --t-accent: #10b981; --t-ink: #022c22; --t-mana: #34d399;
}

[data-theme="syndicate"] {
  --t-bg: #140e05; --t-card: #2a2112; --t-hover: #3a2d16;
  --t-line: #5c4518; --t-line2: #92680f;
  --t-text: #fffbeb; --t-muted: #fcd34d; --t-dim: #d97706;
  --t-accent: #f59e0b; --t-ink: #1c1404; --t-mana: #fbbf24;
}

[data-theme="alert"] {
  --t-bg: #16060a; --t-card: #2c1218; --t-hover: #3d1822;
  --t-line: #6b2433; --t-line2: #9f3046;
  --t-text: #fff1f2; --t-muted: #fda4af; --t-dim: #fb7185;
  --t-accent: #fb7185; --t-ink: #3f0610; --t-mana: #fda4af;
}

[data-theme="donut"] {
  --t-bg: #12081c; --t-card: #241433; --t-hover: #321b48;
  --t-line: #5b3480; --t-line2: #7e4aad;
  --t-text: #faf5ff; --t-muted: #d8b4fe; --t-dim: #a855f7;
  --t-accent: #c084fc; --t-ink: #2e1065; --t-mana: #d8b4fe;
}

[data-theme="nord"] {
  --t-bg: #2e3440; --t-card: #3b4252; --t-hover: #434c5e;
  --t-line: #4c566a; --t-line2: #616e88;
  --t-text: #eceff4; --t-muted: #d8dee9; --t-dim: #aeb8c8;
  --t-accent: #88c0d0; --t-ink: #2e3440; --t-mana: #8fbcbb;
}

[data-theme="dracula"] {
  --t-bg: #282a36; --t-card: #343746; --t-hover: #3e4154;
  --t-line: #44475a; --t-line2: #6272a4;
  --t-text: #f8f8f2; --t-muted: #bfbfc7; --t-dim: #6272a4;
  --t-accent: #bd93f9; --t-ink: #282a36; --t-mana: #8be9fd; --t-alt: #ff79c6;
}

[data-theme="mocha"] {
  --t-bg: #1e1e2e; --t-bg2: #181825; --t-card: #313244; --t-hover: #45475a;
  --t-line: #45475a; --t-line2: #585b70;
  --t-text: #cdd6f4; --t-muted: #a6adc8; --t-dim: #6c7086;
  --t-accent: #cba6f7; --t-ink: #1e1e2e; --t-mana: #89dceb; --t-alt: #f9e2af;
}

[data-theme="tokyo-night"] {
  --t-bg: #1a1b26; --t-bg2: #16161e; --t-card: #24283b; --t-hover: #2f3549;
  --t-line: #3b4261; --t-line2: #565f89;
  --t-text: #c0caf5; --t-muted: #9aa5ce; --t-dim: #6b739c;
  --t-accent: #7aa2f7; --t-ink: #12131c; --t-mana: #7dcfff; --t-alt: #bb9af7;
}

[data-theme="gruvbox"] {
  --t-bg: #282828; --t-bg2: #1d2021; --t-card: #3c3836; --t-hover: #504945;
  --t-line: #504945; --t-line2: #665c54;
  --t-text: #ebdbb2; --t-muted: #bdae93; --t-dim: #928374;
  --t-accent: #fabd2f; --t-ink: #282828; --t-mana: #8ec07c; --t-alt: #fe8019;
}

[data-theme="rose-pine"] {
  --t-bg: #191724; --t-card: #26233a; --t-hover: #302d41;
  --t-line: #403d52; --t-line2: #524f67;
  --t-text: #e0def4; --t-muted: #908caa; --t-dim: #6e6a86;
  --t-accent: #ebbcba; --t-ink: #191724; --t-mana: #9ccfd8; --t-alt: #c4a7e7;
}

[data-theme="kanagawa"] {
  --t-bg: #1f1f28; --t-card: #2a2a37; --t-hover: #363646;
  --t-line: #363646; --t-line2: #54546d;
  --t-text: #dcd7ba; --t-muted: #c8c093; --t-dim: #727169;
  --t-accent: #7e9cd8; --t-ink: #1a1a22; --t-mana: #7fb4ca; --t-alt: #ffa066;
  --t-glow: 10%;
}

[data-theme="everforest"] {
  --t-bg: #2d353b; --t-card: #343f44; --t-hover: #3d484d;
  --t-line: #475258; --t-line2: #5c6a72;
  --t-text: #d3c6aa; --t-muted: #a7c080; --t-dim: #859289;
  --t-accent: #a7c080; --t-ink: #1e2326; --t-mana: #7fbbb3; --t-alt: #e69875;
  --t-glow: 0%;
}

[data-theme="one-dark"] {
  --t-bg: #282c34; --t-card: #2c313c; --t-hover: #353b48;
  --t-line: #3e4451; --t-line2: #4b5263;
  --t-text: #abb2bf; --t-muted: #9da5b4; --t-dim: #7f8794;
  --t-accent: #61afef; --t-ink: #1b1f27; --t-mana: #56b6c2; --t-alt: #e5c07b;
  --t-glow: 8%;
}

[data-theme="goldleaf"] {
  --t-bg: #14110c; --t-card: #1e1a14; --t-hover: #282218;
  --t-line: #3a3224; --t-line2: #544832;
  --t-text: #f6efe2; --t-muted: #cbbfa8; --t-dim: #9a8d78;
  --t-accent: #e6c27a; --t-ink: #241c0c;
  --t-glow: 0%;
}

/* ---------- Flat & minimal (no glow, flat borders) ---------- */

[data-theme="graphite"] {
  --t-bg: #1f2124; --t-card: #2a2d31; --t-hover: #32363b;
  --t-line: #3a3e44; --t-line2: #4a4f56;
  --t-text: #e8eaed; --t-muted: #9aa0a6; --t-dim: #747b84;
  --t-accent: #8ab4f8; --t-ink: #0b1a33;
  --t-glow: 0%;
}

[data-theme="ink"] {
  --t-bg: #0d1014; --t-card: #14181d; --t-hover: #1c2127;
  --t-line: #262c34; --t-line2: #3a424d;
  --t-text: #e6edf3; --t-muted: #8b96a3; --t-dim: #68727e;
  --t-accent: #e6edf3; --t-ink: #0d1014;
  --t-glow: 0%;
}

[data-theme="midnight"] {
  --t-bg: #0b1220; --t-card: #111a2e; --t-hover: #16223b;
  --t-line: #1e2c4a; --t-line2: #2c4070;
  --t-text: #e6ecf8; --t-muted: #8fa0c4; --t-dim: #6578a0;
  --t-accent: #4f8cff; --t-ink: #06122b;
  --t-glow: 0%;
}

[data-theme="flat-indigo"] {
  --t-bg: #14152b; --t-card: #1d1f3d; --t-hover: #262952;
  --t-line: #2f3366; --t-line2: #454b8f;
  --t-text: #eef0ff; --t-muted: #a3a8dd; --t-dim: #7b80bb;
  --t-accent: #818cf8; --t-ink: #12133a;
  --t-glow: 0%;
}

[data-theme="flat-teal"] {
  --t-bg: #0c1b1c; --t-card: #12292b; --t-hover: #183437;
  --t-line: #1f3d40; --t-line2: #2e5b60;
  --t-text: #e6fffd; --t-muted: #8fcfca; --t-dim: #60a8a3;
  --t-accent: #2dd4bf; --t-ink: #042f2a;
  --t-glow: 0%;
}

[data-theme="flat-coral"] {
  --t-bg: #1c1213; --t-card: #2a1a1c; --t-hover: #352123;
  --t-line: #442a2d; --t-line2: #6b4044;
  --t-text: #fff1ee; --t-muted: #e0a49b; --t-dim: #b87a73;
  --t-accent: #ff7a66; --t-ink: #2e0c07;
  --t-glow: 0%;
}

[data-theme="ash"] {
  --t-bg: #1a1c1e; --t-card: #242628; --t-hover: #2c2f32;
  --t-line: #363a3e; --t-line2: #4a4f55;
  --t-text: #f2f3f4; --t-muted: #a7adb4; --t-dim: #7b828a;
  --t-accent: #79a8d4; --t-ink: #0d1c2c;
  --t-glow: 0%;
}

[data-theme="harbor"] {
  --t-bg: #1a232b; --t-card: #24303a; --t-hover: #2c3b46;
  --t-line: #3a4b58; --t-line2: #516474;
  --t-text: #e8eef2; --t-muted: #9eb0be; --t-dim: #738492;
  --t-accent: #8fbfcf; --t-ink: #102026;
  --t-glow: 0%;
}

[data-theme="dune"] {
  --t-bg: #1c1712; --t-card: #2a231b; --t-hover: #342c22;
  --t-line: #463c30; --t-line2: #5e5140;
  --t-text: #f6f0e6; --t-muted: #cbbba4; --t-dim: #9a8b76;
  --t-accent: #e2b56a; --t-ink: #2a1c08;
  --t-glow: 0%;
}

[data-theme="pine"] {
  --t-bg: #121815; --t-card: #1b2420; --t-hover: #24302a;
  --t-line: #314038; --t-line2: #456055;
  --t-text: #e8f2eb; --t-muted: #9bb5a4; --t-dim: #6f8b7a;
  --t-accent: #8fcea3; --t-ink: #102016;
  --t-glow: 0%;
}

[data-theme="glacier"] {
  --t-bg: #12181e; --t-card: #1b252e; --t-hover: #24323d;
  --t-line: #334555; --t-line2: #4a6276;
  --t-text: #e8f2f7; --t-muted: #9db4c4; --t-dim: #738898;
  --t-accent: #9fd4ea; --t-ink: #0c2430;
  --t-glow: 0%;
}

[data-theme="copper"] {
  --t-bg: #1a1411; --t-card: #271e19; --t-hover: #322822;
  --t-line: #46362d; --t-line2: #624a3c;
  --t-text: #f8efe8; --t-muted: #d0b5a4; --t-dim: #a38472;
  --t-accent: #e09262; --t-ink: #2c140c;
  --t-glow: 0%;
}

[data-theme="crimson"] {
  --t-bg: #1a1214; --t-card: #271a1d; --t-hover: #322226;
  --t-line: #4a3034; --t-line2: #684248;
  --t-text: #fbf0f1; --t-muted: #d4a8ae; --t-dim: #a87b82;
  --t-accent: #e07a86; --t-ink: #2c0c12;
  --t-glow: 0%;
}

[data-theme="fog"] {
  --t-bg: #2b3036; --t-card: #363c44; --t-hover: #404750;
  --t-line: #4c545e; --t-line2: #646d78;
  --t-text: #f4f6f8; --t-muted: #c2c8d0; --t-dim: #8e97a2;
  --t-accent: #9eb6e0; --t-ink: #162033;
  --t-glow: 0%;
}

[data-theme="parchment"] {
  --t-bg: #1a1814; --t-card: #26231c; --t-hover: #302c24;
  --t-line: #433e34; --t-line2: #5c5648;
  --t-text: #f4efe4; --t-muted: #c9c0ae; --t-dim: #9a917e;
  --t-accent: #efe6d4; --t-ink: #1a1814;
  --t-glow: 0%;
}

[data-theme="cobalt"] {
  --t-bg: #0d1b2a; --t-card: #16324a; --t-hover: #1c3d5c;
  --t-line: #245074; --t-line2: #3a6d99;
  --t-text: #e7f1fb; --t-muted: #9ec0de; --t-dim: #6d95b6;
  --t-accent: #4ea1ff; --t-ink: #041426;
  --t-glow: 0%;
}

[data-theme="stone"] {
  --t-bg: #1e1d1b; --t-card: #2a2926; --t-hover: #343330;
  --t-line: #45433e; --t-line2: #5e5b54;
  --t-text: #f3f1ec; --t-muted: #bdb8ae; --t-dim: #8f8a80;
  --t-accent: #d2a15a; --t-ink: #241a0c;
  --t-glow: 0%;
}

[data-theme="tide"] {
  --t-bg: #101c22; --t-card: #17303a; --t-hover: #1e3d4a;
  --t-line: #2a5260; --t-line2: #3d7384;
  --t-text: #e6f4f6; --t-muted: #9dc4cc; --t-dim: #6f9aa4;
  --t-accent: #5ec8d8; --t-ink: #062228;
  --t-glow: 0%;
}

[data-theme="pitch"] {
  --t-bg: #000000; --t-card: #0a0a0a; --t-hover: #141414;
  --t-line: #222222; --t-line2: #333333;
  --t-text: #f4f4f5; --t-muted: #a1a1aa; --t-dim: #71717a;
  --t-accent: #f4f4f5; --t-ink: #000000;
  --t-glow: 0%;
}

[data-theme="oled-cyan"] {
  --t-bg: #000000; --t-card: #071016; --t-hover: #0c1a24;
  --t-line: #123040; --t-line2: #1c4a62;
  --t-text: #e7f6ff; --t-muted: #8ecae6; --t-dim: #5e94ad;
  --t-accent: #7fd4ff; --t-ink: #041018;
  --t-glow: 0%;
}

[data-theme="oled-amber"] {
  --t-bg: #000000; --t-card: #120e08; --t-hover: #1c160c;
  --t-line: #3a2c14; --t-line2: #5a441c;
  --t-text: #fff4e0; --t-muted: #e6c48a; --t-dim: #b4925c;
  --t-accent: #ffb020; --t-ink: #1a1000;
  --t-glow: 0%;
}

[data-theme="oled-green"] {
  --t-bg: #000000; --t-card: #07120c; --t-hover: #0c1c12;
  --t-line: #143822; --t-line2: #1e5232;
  --t-text: #e7ffef; --t-muted: #8fd4a8; --t-dim: #5a9a72;
  --t-accent: #7dffb3; --t-ink: #04180c;
  --t-glow: 0%;
}

[data-theme="oled-violet"] {
  --t-bg: #000000; --t-card: #100818; --t-hover: #1a1028;
  --t-line: #321c50; --t-line2: #4a2c74;
  --t-text: #f3eaff; --t-muted: #c4b0e4; --t-dim: #8c78b4;
  --t-accent: #c4b5fd; --t-ink: #160c28;
  --t-glow: 0%;
}

[data-theme="oled-rose"] {
  --t-bg: #000000; --t-card: #14080c; --t-hover: #200e14;
  --t-line: #4a1824; --t-line2: #6e2838;
  --t-text: #ffe8ee; --t-muted: #f0a8b8; --t-dim: #c07080;
  --t-accent: #ff8aa0; --t-ink: #240810;
  --t-glow: 0%;
}

/* ---------- Game HUD ---------- */

[data-theme="matrix"] {
  --t-bg: #000a02; --t-card: #02150a; --t-hover: #052412;
  --t-line: #0a3d1c; --t-line2: #12642e;
  --t-text: #b6ffc8; --t-muted: #4fd37a; --t-dim: #2f9a55;
  --t-accent: #00ff66; --t-ink: #00240c;
  --t-glow: 55%;
}

[data-theme="amber-terminal"] {
  --t-bg: #0d0800; --t-card: #1a1000; --t-hover: #261800;
  --t-line: #4a3000; --t-line2: #7a5000;
  --t-text: #ffd27a; --t-muted: #d99a2b; --t-dim: #a37020;
  --t-accent: #ffb000; --t-ink: #1a0f00;
  --t-glow: 55%;
}

[data-theme="cyberpunk"] {
  --t-bg: #0d0221; --t-card: #170a35; --t-hover: #20104a;
  --t-line: #3a1c7a; --t-line2: #5a2db0;
  --t-text: #f5f0ff; --t-muted: #b9a3e8; --t-dim: #8d76c6;
  --t-accent: #fcee0a; --t-ink: #1a1700; --t-mana: #05d9e8; --t-alt: #ff2a6d;
  --t-glow: 40%;
}

[data-theme="synthwave"] {
  --t-bg: #1a0b2e; --t-card: #2a1245; --t-hover: #371a5a;
  --t-line: #4a2478; --t-line2: #7a3fb8;
  --t-text: #fff0fa; --t-muted: #e0a8e8; --t-dim: #b07cc8;
  --t-accent: #ff4fd8; --t-ink: #2a0524; --t-mana: #36f9f6; --t-alt: #36f9f6;
  --t-glow: 45%;
}

[data-theme="tactical"] {
  --t-bg: #12140f; --t-card: #1b1e16; --t-hover: #252a1e;
  --t-line: #343a28; --t-line2: #4f5a3a;
  --t-text: #e9ecd9; --t-muted: #aab38a; --t-dim: #838c66;
  --t-accent: #ff8a1f; --t-ink: #241200; --t-mana: #b5c75a; --t-alt: #b5c75a;
  --t-glow: 30%;
}

[data-theme="plasma"] {
  --t-bg: #040b14; --t-card: #08182a; --t-hover: #0c2540;
  --t-line: #12365c; --t-line2: #1c5a94;
  --t-text: #e3f4ff; --t-muted: #7fbfe8; --t-dim: #4f90bd;
  --t-accent: #3fd0ff; --t-ink: #00212e; --t-alt: #ff7a1a;
  --t-glow: 50%;
}

[data-theme="ion"] {
  --t-bg: #030814; --t-card: #071422; --t-hover: #0c2038;
  --t-line: #14345c; --t-line2: #1f5290;
  --t-text: #e5f6ff; --t-muted: #7eb6dc; --t-dim: #4e86b0;
  --t-accent: #3ec5ff; --t-ink: #00202e; --t-alt: #d6f4ff;
  --t-glow: 52%;
}

[data-theme="phosphor"] {
  --t-bg: #071109; --t-card: #0d1c12; --t-hover: #132818;
  --t-line: #1d3d28; --t-line2: #2d5c3c;
  --t-text: #d8f5e0; --t-muted: #7dba90; --t-dim: #4e8a64;
  --t-accent: #5dff9a; --t-ink: #042412;
  --t-glow: 42%;
}

[data-theme="ember"] {
  --t-bg: #120c08; --t-card: #1e140c; --t-hover: #2a1c10;
  --t-line: #4a2e16; --t-line2: #6e4520;
  --t-text: #fff0e0; --t-muted: #e2b48a; --t-dim: #b48458;
  --t-accent: #ff8c32; --t-ink: #2a1200; --t-alt: #ffd2a8;
  --t-glow: 46%;
}

[data-theme="sonar"] {
  --t-bg: #07131c; --t-card: #0e2230; --t-hover: #143044;
  --t-line: #1e4a64; --t-line2: #2e6e90;
  --t-text: #e4f3fb; --t-muted: #8eb8d0; --t-dim: #5e8eaa;
  --t-accent: #ffb020; --t-ink: #2a1600; --t-mana: #5ad0ff; --t-alt: #5ad0ff;
  --t-glow: 40%;
}

[data-theme="aether"] {
  --t-bg: #0e0a18; --t-card: #181228; --t-hover: #221838;
  --t-line: #3a2860; --t-line2: #553c8c;
  --t-text: #f3ecff; --t-muted: #c0b0e4; --t-dim: #8c78b8;
  --t-accent: #b794f6; --t-ink: #1a1030; --t-mana: #7dd3fc; --t-alt: #e9d5ff;
  --t-glow: 44%;
}

[data-theme="radar"] {
  --t-bg: #10140e; --t-card: #1a2016; --t-hover: #242c1e;
  --t-line: #3a4630; --t-line2: #556844;
  --t-text: #eef3e4; --t-muted: #b4c29e; --t-dim: #849274;
  --t-accent: #d2ee6a; --t-ink: #1a2208; --t-mana: #9dcc7a;
  --t-glow: 32%;
}

[data-theme="nova"] {
  --t-bg: #070812; --t-card: #101426; --t-hover: #181e36;
  --t-line: #2a3458; --t-line2: #41508a;
  --t-text: #eef1ff; --t-muted: #a8b2d8; --t-dim: #7480aa;
  --t-accent: #8aa4ff; --t-ink: #101428; --t-alt: #f0c36a;
  --t-glow: 48%;
}

[data-theme="wire"] {
  --t-bg: #14080c; --t-card: #220e14; --t-hover: #30141c;
  --t-line: #5a2230; --t-line2: #8a3044;
  --t-text: #ffe8ec; --t-muted: #f0a8b4; --t-dim: #c07080;
  --t-accent: #ff5a78; --t-ink: #2a0610;
  --t-glow: 48%;
}

[data-theme="arctic"] {
  --t-bg: #07141a; --t-card: #0d222c; --t-hover: #123040;
  --t-line: #1c4c60; --t-line2: #2a7088;
  --t-text: #e7f8ff; --t-muted: #9ad0e0; --t-dim: #5e9eb2;
  --t-accent: #b6f3ff; --t-ink: #042028;
  --t-glow: 50%;
}

[data-theme="helios"] {
  --t-bg: #100e08; --t-card: #1c180e; --t-hover: #28220e;
  --t-line: #4a3e1c; --t-line2: #705c28;
  --t-text: #fff6e0; --t-muted: #e6d09a; --t-dim: #b89a58;
  --t-accent: #ffd15c; --t-ink: #241c04;
  --t-glow: 42%;
}

/* Game HUD readouts. Scanlines are a separate toggle (data-scanlines). */
html[data-theme-group="hud"] .stat-val,
html[data-theme-group="hud"] #hud-main-title {
  text-shadow: 0 0 10px var(--neon-green-glow);
}

html[data-theme-group="hud"] .hud-stat-box {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-accent) 22%, transparent),
    0 0 14px -6px var(--neon-green-glow);
}

/* Pixel grid: same scanline overlay the Game HUD themes used, now opt-in. */
html[data-scanlines="on"]::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.16) 2px,
    rgba(0, 0, 0, 0.16) 3px
  );
}

/* ---------- Experimental ---------- */

[data-theme="solarized"] {
  --t-bg: #002b36; --t-bg2: #073642; --t-card: #073642; --t-hover: #0a4a56;
  --t-line: #0e5563; --t-line2: #586e75;
  --t-text: #eee8d5; --t-muted: #93a1a1; --t-dim: #657b83;
  --t-accent: #2aa198; --t-ink: #002b36; --t-mana: #268bd2; --t-alt: #b58900;
  --t-glow: 0%;
}

[data-theme="iris"] {
  --t-bg: #14121c; --t-card: #1e1a2c; --t-hover: #282438;
  --t-line: #3a3450; --t-line2: #524868;
  --t-text: #f4f0fa; --t-muted: #b7aec8; --t-dim: #857c98;
  --t-accent: #ffb48a; --t-ink: #2a140c; --t-mana: #9db7ff; --t-alt: #c4b5fd;
  --t-glow: 12%;
}

[data-theme="signal"] {
  --t-bg: #0c0e0c; --t-card: #141814; --t-hover: #1c221c;
  --t-line: #242a24; --t-line2: #3a443a;
  --t-text: #f4f7f2; --t-muted: #a3b0a4; --t-dim: #6e7c70;
  --t-accent: #3dde8a; --t-ink: #04210f;
  --t-glow: 0%;
}

[data-theme="carbon"] {
  --t-bg: #050505; --t-card: #0c0c0c; --t-hover: #161616;
  --t-line: #2a2a2a; --t-line2: #3f3f3f;
  --t-text: #f7f7f7; --t-muted: #9a9a9a; --t-dim: #6a6a6a;
  --t-accent: #ff3b3b; --t-ink: #1a0000;
  --t-glow: 8%;
}

[data-theme="blueprint"] {
  --t-bg: #0e1a2b; --t-card: #13243a; --t-hover: #1a3050;
  --t-line: #2a4d73; --t-line2: #3d6a99;
  --t-text: #e7f0fa; --t-muted: #8eafd0; --t-dim: #5e84a8;
  --t-accent: #7ec8ff; --t-ink: #062033;
  --t-glow: 0%;
}

[data-theme="holo"] {
  --t-bg: #0c1018; --t-card: #161c28; --t-hover: #1e2636;
  --t-line: #314056; --t-line2: #465c78;
  --t-text: #eef3f8; --t-muted: #a9b6c6; --t-dim: #74849a;
  --t-accent: #6ee7d2; --t-ink: #04241e; --t-mana: #d8b4fe; --t-alt: #93c5fd;
  --t-glow: 22%;
}

[data-theme="newsprint"] {
  --t-bg: #f7f4ee; --t-bg2: #efeae1; --t-card: #fffefb; --t-hover: #f3efe6;
  --t-line: #e4ddd0; --t-line2: #cfc6b6;
  --t-text: #1c1915; --t-muted: #5e584f; --t-dim: #8a8276;
  --t-accent: #0f6f6b; --t-ink: #ffffff; --t-alt: #8a4b2f;
  --t-glow: 0%;
}

/* ---------- Light: Boxer ---------- */

[data-theme="boxer"] {
  --t-bg: #ffffff; --t-bg2: #fff5f6; --t-card: #ffffff; --t-hover: #fff0f2;
  --t-line: #f2c4cb; --t-line2: #e5919f;
  --t-text: #3b0a14; --t-muted: #7d3e4b; --t-dim: #a5606d;
  --t-accent: #e11d48; --t-ink: #ffffff; --t-alt: #be123c;
  --t-glow: 18%;
}

/* One large heart per tile, repeated edge to edge on white. */
html[data-theme="boxer"] body {
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cpath fill='%23fecdd3' transform='translate(25 22) scale(4.6)' d='M12 21s-7-4.4-10-8.2C-1 9 1 4 5.5 4 8 4 10 5.5 12 8c2-2.5 4-4 6.5-4C23 4 25 9 22 12.8 19 16.6 12 21 12 21z'/%3E%3C/svg%3E") !important;
  background-repeat: repeat !important;
  background-size: 160px 160px !important;
}

/* ---------- Light-mode fixes (shared by any light theme) ---------- */

html[data-theme-mode="light"] body {
  background-color: var(--t-bg);
  background-image: none;
}

html[data-theme-mode="light"] body::before {
  opacity: 0.04;
}

/* Square corners: every painted control and container, including modals. */
html[data-corners="square"][data-theme] body,
html[data-corners="square"][data-theme] body * {
  border-radius: 0 !important;
}

html[data-theme-mode="light"] .achievement-popover-card,
html[data-theme-mode="light"] .theme-menu,
html[data-theme-mode="light"] .account-dropdown,
html[data-theme-mode="light"] .topbar {
  box-shadow: 0 10px 28px rgba(28, 25, 21, 0.12);
}

/* Hover and selection pick up a light accent glow on every theme.
   The hard edge stays inside the control so it does not cover the next button.
   --t-glow stays theme-specific and is not used here. */
html[data-theme][data-glow="on"] .hud-shell :is(
  button,
  .variant-card,
  .drops-item-card,
  .theme-choice,
  .side-series-btn,
  .hide-vault-toggle,
  .tab-btn,
  .chip-btn
):is(:hover, .active, .owned, .wishlisted, [aria-selected="true"], [aria-pressed="true"], [aria-checked="true"]):not(:disabled) {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--t-accent) 55%, transparent),
    0 0 10px color-mix(in srgb, var(--t-accent) 28%, transparent) !important;
}

html[data-theme][data-glow="on"] .hud-shell .hide-vault-toggle:has(input:checked) {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--t-accent) 55%, transparent),
    0 0 10px color-mix(in srgb, var(--t-accent) 28%, transparent) !important;
}

/* Borders off clears every border, including !important chrome on cards,
   sidebar rows, header stats, and the item modal. Focus outlines stay.
   :not(#_) raises specificity above class-level !important borders. */
html[data-borders="off"][data-theme] :is(body, body *, body *::before, body *::after):not(#_) {
  border-color: transparent !important;
}

html[data-borders="off"][data-theme] :is(input[type="checkbox"], input[type="radio"]):not(#_) {
  border-color: var(--border-bright, #475569) !important;
}

html[data-borders="off"][data-theme] .side-check input:checked:not(#_) {
  border-color: var(--hud-cyan) !important;
}

html[data-borders="off"][data-theme] .side-check input:checked::after:not(#_) {
  border-left-color: var(--accent-ink, #042027) !important;
  border-bottom-color: var(--accent-ink, #042027) !important;
}

/* Admin cards keep a visible gap and their own surface when borders are off.
   A transparent border was letting the stat tiles and the filter row read as one shape. */
html[data-borders="off"][data-theme] .admin-modal-body {
  gap: 1.35rem;
}

html[data-borders="off"][data-theme] .admin-stats-grid {
  gap: 14px;
}

html[data-borders="off"][data-theme] .admin-controls-bar,
html[data-borders="off"][data-theme] .admin-actions-wrap,
html[data-borders="off"][data-theme] .admin-tabs-bar {
  gap: 12px;
}

html[data-borders="off"][data-theme] .admin-stat-box,
html[data-borders="off"][data-theme] .admin-search-input,
html[data-borders="off"][data-theme] .admin-select,
html[data-borders="off"][data-theme] .admin-tab-btn,
html[data-borders="off"][data-theme] .admin-table-container {
  border-width: 0 !important;
  box-shadow: none !important;
  background: #162033;
}

html[data-borders="off"][data-theme] .admin-refresh-btn {
  border-width: 0 !important;
  box-shadow: none !important;
}

html[data-theme][data-glow="on"][data-borders="off"] .hud-shell :is(
  button,
  .variant-card,
  .drops-item-card,
  .theme-choice,
  .side-series-btn,
  .hide-vault-toggle,
  .tab-btn,
  .chip-btn
):is(:hover, .active, .owned, .wishlisted, [aria-selected="true"], [aria-pressed="true"], [aria-checked="true"]):not(:disabled),
html[data-theme][data-glow="on"][data-borders="off"] .hud-shell .hide-vault-toggle:has(input:checked) {
  box-shadow: 0 0 10px color-mix(in srgb, var(--t-accent) 28%, transparent) !important;
}

html[data-theme-mode="light"] .card-title,
html[data-theme-mode="light"] .meta-v,
html[data-theme-mode="light"] .card-series-tag,
html[data-theme-mode="light"] .news-title,
html[data-theme-mode="light"] .drops-title,
html[data-theme-mode="light"] .news-post-title {
  color: var(--hud-text) !important;
}