/*! themes-games.css — eight game-inspired looks (StarCraft II and Warcraft moods) as token blocks.

   What it does: same as themes.css, one [data-theme=<key>] block per look setting the tokens from tokens.css.
   Keys (StarCraft II): crystal, terran, nova, zerg. Keys (Warcraft): nightelf, human (light), bloodelf,
   highelf (light). Listed in THEMES in theme-switcher.js (groups "StarCraft II" and "Warcraft").
   They borrow only a mood and a palette: no game art, logos, fonts or names of characters on screen beyond the
   look's own name. Same plain-finish rules as the others (../themes/RULES.md): gradients became their middle
   colour, no glows, neon or animation, status colours distinct, prints black on white.
   Source: the lab app's style.css after the "less AI-generated" rework. There are no DESIGN.md specs for these.
   Gotchas: Terran headings use --font-mono on purpose (stencil/HUD feel). */

/* Crystal, inspired by the Protoss: deep blue, gold trim. */
[data-theme=crystal] {
    --bg: #040817;
    --surface: #0a1430;
    --surface-2: rgba(22, 40, 86, .55);
    --surface-hover: rgba(92, 214, 255, .08);
    --chrome: rgba(5, 11, 30, .86);
    --input-bg: rgba(2, 6, 22, .6);
    --line: rgba(230, 185, 85, .16);
    --line-strong: rgba(230, 185, 85, .34);
    --ink: #eef3ff;
    --ink-2: #c4d0ea;
    --muted: #8d9cc0;
    --heading: #f6e7be;
    --accent: #5cd6ff;
    --accent-soft: rgba(92, 214, 255, .13);
    --danger: #ff7a85;
    --warn: #f2c14e;
    --ok: #4fe0b0;
    --info: #6aa8ff;
    --shadow: inset 0 1px 0 rgba(246, 222, 160, .07), 0 24px 48px -30px rgba(0, 0, 0, .95);
    --trim: #e6b955;
    --trim-rgb: 230 185 85;
    --on-trim: #0a1a44;
    --primary: #0f3fa8;
    --on-primary: #fff8e1;
    --radius: 4px 22px 4px 22px;
    --radius-sm: 4px 14px 4px 14px;
    --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23e6b955' stroke-opacity='.15'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34' fill='none' stroke='%235cd6ff' stroke-opacity='.05'/%3E%3C/svg%3E");
    --pattern-size: 56px 100px;
}

/* Terran: gunmetal plates, amber hazard markings, square military corners. */
[data-theme=terran] {
    --font-display: var(--font-mono);
    --bg: #090c10;
    --surface: #151a21;
    --surface-2: rgba(42, 50, 62, .62);
    --surface-hover: rgba(255, 166, 48, .07);
    --chrome: rgba(11, 14, 19, .92);
    --input-bg: rgba(4, 6, 9, .72);
    --line: rgba(160, 175, 195, .16);
    --line-strong: rgba(255, 166, 48, .36);
    --ink: #e8ecf1;
    --ink-2: #bcc5d0;
    --muted: #8a95a3;
    --heading: #f4f6f9;
    --accent: #ffa630;
    --accent-soft: rgba(255, 166, 48, .13);
    --danger: #ff5a4f;
    --warn: #ffc23d;
    --ok: #6ad38a;
    --info: #5ec8ff;
    --shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 24px 48px -30px rgba(0, 0, 0, .95);
    --trim: #ffa630;
    --trim-rgb: 255 166 48;
    --on-trim: #1a1206;
    --primary: #2a323c;
    --on-primary: #ffd27a;
    --radius: 3px;
    --radius-sm: 2px;
    --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80' viewBox='0 0 120 80'%3E%3Cpath d='M0 .5H120M.5 0V80M60.5 0V40' stroke='%23a0afc3' stroke-opacity='.07' fill='none'/%3E%3Cg fill='%23ffa630' fill-opacity='.14'%3E%3Ccircle cx='5' cy='5' r='1.3'/%3E%3Ccircle cx='55' cy='5' r='1.3'/%3E%3Ccircle cx='65' cy='5' r='1.3'/%3E%3Ccircle cx='115' cy='5' r='1.3'/%3E%3C/g%3E%3C/svg%3E");
    --pattern-size: 120px 80px;
}

/* Nova: a covert operative's HUD, near black with a cold teal and a trace of psionic violet. */
[data-theme=nova] {
    --bg: #04060a;
    --surface: #0a1017;
    --surface-2: rgba(24, 34, 46, .6);
    --surface-hover: rgba(62, 240, 214, .07);
    --chrome: rgba(4, 7, 11, .92);
    --input-bg: rgba(0, 3, 6, .72);
    --line: rgba(110, 230, 220, .13);
    --line-strong: rgba(110, 230, 220, .32);
    --ink: #e6fbfa;
    --ink-2: #b4cfd0;
    --muted: #7895a0;
    --heading: #f2ffff;
    --accent: #3ef0d6;
    --accent-soft: rgba(62, 240, 214, .12);
    --danger: #ff6b81;
    --warn: #ffd166;
    --ok: #3ef0a0;
    --info: #7cc4ff;
    --shadow: inset 0 1px 0 rgba(159, 252, 240, .05), 0 24px 48px -30px rgba(0, 0, 0, .95);
    --trim: #9ffcf0;
    --trim-rgb: 159 252 240;
    --on-trim: #021614;
    --primary: #0a4a48;
    --on-primary: #e6fffb;
    --radius: 0;
    --radius-sm: 2px;
    --pattern: repeating-linear-gradient(0deg, rgba(62, 240, 214, .035) 0 1px, transparent 1px 4px);
    --pattern-size: auto;
}

/* Zerg: living violet tissue, acid green, nothing quite straight. */
[data-theme=zerg] {
    --bg: #0b0510;
    --surface: #1a0c21;
    --surface-2: rgba(54, 22, 64, .58);
    --surface-hover: rgba(166, 240, 58, .07);
    --chrome: rgba(14, 6, 18, .92);
    --input-bg: rgba(6, 2, 9, .66);
    --line: rgba(190, 90, 220, .18);
    --line-strong: rgba(190, 90, 220, .38);
    --ink: #f6ecf8;
    --ink-2: #d4bfdb;
    --muted: #a088a9;
    --heading: #eaffc9;
    --accent: #a6f03a;
    --accent-soft: rgba(166, 240, 58, .12);
    --danger: #ff5f8a;
    --warn: #ffcf4a;
    --ok: #a6f03a;
    --info: #b48cff;
    --shadow: inset 0 1px 0 rgba(242, 182, 255, .06), 0 24px 48px -30px rgba(0, 0, 0, .95);
    --trim: #c24bea;
    --trim-rgb: 194 75 234;
    --on-trim: #1a0420;
    --primary: #6a1488;
    --on-primary: #f2ffe0;
    --radius: 26px 12px 30px 14px / 16px 28px 12px 24px;
    --radius-sm: 16px 8px 18px 9px / 10px 16px 8px 14px;
    --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23c24bea' stroke-opacity='.11'%3E%3Cpath d='M0 40C30 30 40 70 80 60S130 20 160 40'/%3E%3Cpath d='M0 120C35 135 55 95 90 110S140 140 160 120'/%3E%3Cpath d='M40 0C50 40 20 60 35 100S60 140 50 160'/%3E%3C/g%3E%3Cg fill='%23a6f03a' fill-opacity='.08'%3E%3Ccircle cx='80' cy='60' r='3'/%3E%3Ccircle cx='35' cy='100' r='2'/%3E%3Ccircle cx='120' cy='122' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    --pattern-size: 160px 160px;
}

/* Night Elf: a moonlit forest, silver light, violet dusk and wisp green. */
[data-theme=nightelf] {
    --bg: #07081a;
    --surface: #121133;
    --surface-2: rgba(40, 36, 90, .56);
    --surface-hover: rgba(110, 232, 196, .07);
    --chrome: rgba(8, 8, 26, .9);
    --input-bg: rgba(3, 3, 16, .62);
    --line: rgba(170, 160, 255, .16);
    --line-strong: rgba(170, 160, 255, .34);
    --ink: #eeeefe;
    --ink-2: #c6c4ea;
    --muted: #918ebe;
    --heading: #e6f0ff;
    --accent: #6ee8c4;
    --accent-soft: rgba(110, 232, 196, .12);
    --danger: #ff7a9a;
    --warn: #f5cf6a;
    --ok: #6ee8c4;
    --info: #8ea8ff;
    --shadow: inset 0 1px 0 rgba(200, 211, 245, .06), 0 24px 48px -30px rgba(0, 0, 0, .95);
    --trim: #c8d3f5;
    --trim-rgb: 200 211 245;
    --on-trim: #15143d;
    --primary: #43309c;
    --on-primary: #f2f0ff;
    --radius: 22px 4px 22px 4px;
    --radius-sm: 14px 3px 14px 3px;
    --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='20' cy='30' r='.9' fill-opacity='.5'/%3E%3Ccircle cx='70' cy='12' r='.6' fill-opacity='.4'/%3E%3Ccircle cx='130' cy='45' r='1.1' fill-opacity='.55'/%3E%3Ccircle cx='160' cy='110' r='.7' fill-opacity='.35'/%3E%3Ccircle cx='95' cy='90' r='.6' fill-opacity='.3'/%3E%3Ccircle cx='40' cy='140' r='1' fill-opacity='.45'/%3E%3Ccircle cx='115' cy='160' r='.6' fill-opacity='.35'/%3E%3C/g%3E%3Ccircle cx='150' cy='150' r='1' fill='%236ee8c4' fill-opacity='.5'/%3E%3C/svg%3E");
    --pattern-size: 180px 180px;
}

/* Human: a parchment page, royal blue banners and brass. A light look. */
[data-theme=human] {
    --font-display: Georgia, Cambria, "Times New Roman", serif;
    --bg: #ebe2cd;
    --surface: #fbf7ec;
    --surface-2: #f2ead6;
    --surface-hover: rgba(31, 79, 168, .06);
    --chrome: rgba(246, 239, 222, .94);
    --input-bg: #fffdf6;
    --line: #dccfb2;
    --line-strong: #c3b089;
    --ink: #2a2117;
    --ink-2: #4a3d2c;
    --muted: #7a6a52;
    --heading: #1b2d5c;
    --accent: #1f4fa8;
    --accent-soft: rgba(31, 79, 168, .1);
    --danger: #b42318;
    --warn: #a15c07;
    --ok: #2f7a3a;
    --info: #1f4fa8;
    --shadow: 0 1px 2px rgba(60, 40, 10, .08), 0 14px 34px -22px rgba(60, 40, 10, .4);
    --trim: #b8892b;
    --trim-rgb: 184 137 43;
    --on-trim: #2a1d06;
    --primary: #1f4fa8;
    --on-primary: #fff8e6;
    --radius: 6px;
    --radius-sm: 6px;
    --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M32 22l3 7 7 3-7 3-3 7-3-7-7-3 7-3z' fill='%23b8892b' fill-opacity='.07'/%3E%3C/svg%3E");
    --pattern-size: 64px 64px;
    color-scheme: light;
}

/* Blood Elf: crimson velvet, gold filigree and phoenix embers. */
[data-theme=bloodelf] {
    --bg: #120406;
    --surface: #210a0e;
    --surface-2: rgba(66, 18, 24, .58);
    --surface-hover: rgba(240, 190, 80, .07);
    --chrome: rgba(18, 5, 8, .92);
    --input-bg: rgba(8, 2, 3, .66);
    --line: rgba(240, 190, 90, .16);
    --line-strong: rgba(240, 190, 90, .36);
    --ink: #fbefe8;
    --ink-2: #e2c6bd;
    --muted: #b08f88;
    --heading: #ffe6ad;
    --accent: #ff9248;
    --accent-soft: rgba(255, 146, 72, .13);
    --danger: #ff6464;
    --warn: #ffc94d;
    --ok: #8be06a;
    --info: #ffb070;
    --shadow: inset 0 1px 0 rgba(255, 220, 160, .06), 0 24px 48px -30px rgba(0, 0, 0, .95);
    --trim: #f0c05a;
    --trim-rgb: 240 192 90;
    --on-trim: #2a0a06;
    --primary: #8c1219;
    --on-primary: #fff1c4;
    --radius: 20px 20px 4px 4px;
    --radius-sm: 12px 12px 3px 3px;
    --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M24 2L46 24L24 46L2 24Z' fill='none' stroke='%23f0c05a' stroke-opacity='.08'/%3E%3Cpath d='M24 18l2 6-2 6-2-6z' fill='%23f0c05a' fill-opacity='.1'/%3E%3C/svg%3E");
    --pattern-size: 48px 48px;
}

/* High Elf: pearl white, sky blue and pale gold, a light and airy look. */
[data-theme=highelf] {
    --font-display: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
    --bg: #f2f4fb;
    --surface: #ffffff;
    --surface-2: #eef2fa;
    --surface-hover: rgba(42, 116, 201, .06);
    --chrome: rgba(255, 255, 255, .88);
    --input-bg: #ffffff;
    --line: #dde3f0;
    --line-strong: #c6cfe3;
    --ink: #18213d;
    --ink-2: #3b4566;
    --muted: #6a7493;
    --heading: #14306b;
    --accent: #2a74c9;
    --accent-soft: rgba(42, 116, 201, .1);
    --danger: #c0264a;
    --warn: #a86a08;
    --ok: #1e7a5a;
    --info: #2a74c9;
    --shadow: 0 1px 2px rgba(20, 48, 107, .05), 0 16px 36px -24px rgba(20, 48, 107, .35);
    --trim: #c8a046;
    --trim-rgb: 200 160 70;
    --on-trim: #2a1f06;
    --primary: #2a74c9;
    --on-primary: #ffffff;
    --radius: 18px;
    --radius-sm: 999px;
    --pattern: repeating-conic-gradient(from 0deg at 50% -10%, rgba(200, 160, 70, .05) 0deg 3deg, transparent 3deg 12deg);
    --pattern-size: auto;
    color-scheme: light;
}

/* Touches: square corners and uppercase headings for the military looks. */
:root[data-theme=terran] h1 { text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
:root[data-theme=terran] h2 { text-transform: uppercase; letter-spacing: .05em; }
:root[data-theme=terran] .btn-primary { text-transform: uppercase; letter-spacing: .06em; }
:root[data-theme=nova] .btn-primary { text-transform: uppercase; letter-spacing: .08em; }