/* Display face: self-hosted Anton (OFL) so headings render identically everywhere */
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/anton-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/anton-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ==========================================================================
   THEME ARCHITECTURE: STYLES
   Switched with <html data-theme="…">; chosen by visitors via /assets/theme.js
   ========================================================================== */

/* Theme 1: Default Monochrome Baseline */
:root, [data-theme="monochrome"] {
  --bg-main: #0B0C10;
  --text-primary: #FFFFFF;
  --text-muted: #7A828E;
  --accent-primary: #FFFFFF;
  --accent-secondary: #24292E;
  --ui-border: #24292E;
  --glow-color: rgba(255, 255, 255, 0.1);
  /* Secondary accent when used as text/linework (#24292E is too dark to read) */
  --accent-secondary-text: #7A828E;
}

/* Theme 2: Cyber-Arcade Neon (High Energy) */
[data-theme="cyber-neon"] {
  --bg-main: #06070D;
  --text-primary: #FFFFFF;
  --text-muted: #623CEA;
  --accent-primary: #00F5D4;    /* Laser Cyan */
  --accent-secondary: #FF007F;  /* Neon Magenta */
  --ui-border: #1B1E36;
  --glow-color: rgba(0, 245, 212, 0.3);
  --accent-secondary-text: #FF007F;
}



/* Theme 5: Synthwave Sunset (Retro Drive) */
[data-theme="synthwave"] {
  --bg-main: #140A1F;
  --text-primary: #F7E9FF;
  --text-muted: #8A6FA8;
  --accent-primary: #FF6EC7;    /* Hot Pink */
  --accent-secondary: #FFA34D;  /* Sunset Orange */
  --ui-border: #2E1A44;
  --glow-color: rgba(255, 110, 199, 0.3);
  --accent-secondary-text: #FFA34D;
}


/* Theme 7: Arctic Signal (Cold & Clinical) */
[data-theme="arctic"] {
  --bg-main: #0A1118;
  --text-primary: #E6F1F7;
  --text-muted: #5B7486;
  --accent-primary: #7FDBFF;    /* Glacier Blue */
  --accent-secondary: #9D7BFF;  /* Aurora Violet */
  --ui-border: #1A2833;
  --glow-color: rgba(127, 219, 255, 0.25);
  --accent-secondary-text: #9D7BFF;
}

/* Theme 8: Toxic Hazard (Acid & Warning) */
[data-theme="toxic"] {
  --bg-main: #0D0F08;
  --text-primary: #E8F5C8;
  --text-muted: #5F6B3A;
  --accent-primary: #C6FF00;    /* Acid Lime */
  --accent-secondary: #FF5F1F;  /* Hazard Orange */
  --ui-border: #23281A;
  --glow-color: rgba(198, 255, 0, 0.25);
  --accent-secondary-text: #FF5F1F;
}

html/* ---- NEON additions ---- */
[data-theme="vapor"] {          /* Vaporwave cyan & pink */
  --bg-main: #0C0A1A; --text-primary: #F2F0FF; --text-muted: #6C64A8;
  --accent-primary: #7DF9FF; --accent-secondary: #FF71CE; --accent-secondary-text: #FF71CE;
  --ui-border: #221D42; --glow-color: rgba(125, 249, 255, 0.28);
}
[data-theme="acid"] {           /* Radioactive green & ultraviolet */
  --bg-main: #050805; --text-primary: #F0FFF0; --text-muted: #4F6A4F;
  --accent-primary: #39FF14; --accent-secondary: #B026FF; --accent-secondary-text: #C46BFF;
  --ui-border: #142014; --glow-color: rgba(57, 255, 20, 0.28);
}
/* ---- LUXE tab ---- */
[data-theme="gold"] {           /* Black & gold leaf */
  --bg-main: #0B0A08; --text-primary: #F3E9D2; --text-muted: #6E6550;
  --accent-primary: #D4AF37; --accent-secondary: #8C6D1F; --accent-secondary-text: #C9A54A;
  --ui-border: #2A251A; --glow-color: rgba(212, 175, 55, 0.22);
}
[data-theme="chrome"] {         /* Polished chrome */
  --bg-main: #0C0D0F; --text-primary: #E9EDF1; --text-muted: #5D6672;
  --accent-primary: #C0C7D0; --accent-secondary: #6E7B8A; --accent-secondary-text: #9AA6B4;
  --ui-border: #23272D; --glow-color: rgba(192, 199, 208, 0.2);
}
[data-theme="rose"] {           /* Rose gold on burgundy-black */
  --bg-main: #120B0D; --text-primary: #F7E8EA; --text-muted: #7A5E64;
  --accent-primary: #E8A6B5; --accent-secondary: #B76E79; --accent-secondary-text: #D48A97;
  --ui-border: #2C1C20; --glow-color: rgba(232, 166, 181, 0.22);
}
[data-theme="jade"] {           /* Jade & antique gold */
  --bg-main: #07110E; --text-primary: #E3F3EC; --text-muted: #4E6B60;
  --accent-primary: #3FD8A6; --accent-secondary: #C9A227; --accent-secondary-text: #D4B04A;
  --ui-border: #16271F; --glow-color: rgba(63, 216, 166, 0.22);
}

/* ---- SIGNATURE: the eight most-used UI / editor colour schemes ---- */
[data-theme="dracula"]   { --bg-main:#282A36; --text-primary:#F8F8F2; --text-muted:#6272A4; --accent-primary:#BD93F9; --accent-secondary:#FF79C6; --accent-secondary-text:#FF79C6; --ui-border:#44475A; --glow-color:rgba(189,147,249,.25); }
[data-theme="nord"]      { --bg-main:#2E3440; --text-primary:#ECEFF4; --text-muted:#616E88; --accent-primary:#88C0D0; --accent-secondary:#EBCB8B; --accent-secondary-text:#EBCB8B; --ui-border:#434C5E; --glow-color:rgba(136,192,208,.22); }
[data-theme="tokyo-night"] { --bg-main:#1A1B26; --text-primary:#C0CAF5; --text-muted:#565F89; --accent-primary:#7AA2F7; --accent-secondary:#BB9AF7; --accent-secondary-text:#BB9AF7; --ui-border:#292E42; --glow-color:rgba(122,162,247,.25); }
[data-theme="catppuccin"] { --bg-main:#1E1E2E; --text-primary:#CDD6F4; --text-muted:#6C7086; --accent-primary:#CBA6F7; --accent-secondary:#FAB387; --accent-secondary-text:#FAB387; --ui-border:#313244; --glow-color:rgba(203,166,247,.22); }
[data-theme="gruvbox"]   { --bg-main:#282828; --text-primary:#EBDBB2; --text-muted:#7C6F64; --accent-primary:#FABD2F; --accent-secondary:#FE8019; --accent-secondary-text:#FE8019; --ui-border:#3C3836; --glow-color:rgba(250,189,47,.22); }
[data-theme="one-dark"]  { --bg-main:#282C34; --text-primary:#ABB2BF; --text-muted:#5C6370; --accent-primary:#61AFEF; --accent-secondary:#C678DD; --accent-secondary-text:#C678DD; --ui-border:#3E4451; --glow-color:rgba(97,175,239,.22); }
[data-theme="solarized"] { --bg-main:#002B36; --text-primary:#EEE8D5; --text-muted:#586E75; --accent-primary:#2AA198; --accent-secondary:#B58900; --accent-secondary-text:#CB9B0E; --ui-border:#0A4150; --glow-color:rgba(42,161,152,.22); }
[data-theme="monokai"]   { --bg-main:#272822; --text-primary:#F8F8F2; --text-muted:#75715E; --accent-primary:#A6E22E; --accent-secondary:#F92672; --accent-secondary-text:#F92672; --ui-border:#3E3D32; --glow-color:rgba(166,226,46,.22); }

/* ---- MONO tab: monochrome variations ---- */
[data-theme="graphite"] { --bg-main:#1A1918; --text-primary:#ECE9E4; --text-muted:#77736D; --accent-primary:#D8D4CD; --accent-secondary:#3A3734; --accent-secondary-text:#A39E96; --ui-border:#33302D; --glow-color:rgba(236,233,228,.1); }
[data-theme="ink"]      { --bg-main:#000000; --text-primary:#FFFFFF; --text-muted:#6B6B6B; --accent-primary:#FFFFFF; --accent-secondary:#1F1F1F; --accent-secondary-text:#9A9A9A; --ui-border:#1F1F1F; --glow-color:rgba(255,255,255,.14); }
[data-theme="slate"]    { --bg-main:#0F1419; --text-primary:#E3E8EE; --text-muted:#6B7785; --accent-primary:#C9D3DE; --accent-secondary:#2A333D; --accent-secondary-text:#8C99A8; --ui-border:#232B34; --glow-color:rgba(201,211,222,.12); }
[data-theme="ash"]      { --bg-main:#2B2B2B; --text-primary:#F0F0F0; --text-muted:#8A8A8A; --accent-primary:#FFFFFF; --accent-secondary:#454545; --accent-secondary-text:#B5B5B5; --ui-border:#424242; --glow-color:rgba(255,255,255,.1); }
[data-theme="paper"]    { --bg-main:#F2F2F0; --text-primary:#111111; --text-muted:#8A8A8A; --accent-primary:#111111; --accent-secondary:#D0D0CC; --accent-secondary-text:#555555; --ui-border:#D0D0CC; --glow-color:rgba(0,0,0,.06); }
[data-theme="fog"]      { --bg-main:#D9DADC; --text-primary:#1C1D1F; --text-muted:#7D8086; --accent-primary:#1C1D1F; --accent-secondary:#A9ACB1; --accent-secondary-text:#4A4D52; --ui-border:#B4B7BC; --glow-color:rgba(0,0,0,.08); }
html[data-theme="paper"] { --text-small:#444444; --bg-deep:#E6E6E3; color-scheme:light; }
html[data-theme="fog"]   { --text-small:#3A3C40; --bg-deep:#CDCED1; color-scheme:light; }

/* Derived tokens shared by every theme */
:root {
  /* Small informational text: muted tone lifted toward primary so it stays readable */
  --text-small: color-mix(in srgb, var(--text-muted) 55%, var(--text-primary));
  --bg-raised: color-mix(in srgb, var(--ui-border) 35%, var(--bg-main));
  --bg-deep: color-mix(in srgb, var(--bg-main) 75%, #000);
  --grid-line: color-mix(in srgb, var(--ui-border) 65%, transparent);
}

/* ==========================================================================
   UTILITY HOOKS
   ========================================================================== */
body {
  background-color: var(--bg-main);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.accent-text { color: var(--accent-primary); text-shadow: 0 0 8px var(--glow-color); }
.system-border { border: 1px solid var(--ui-border); }

/* ==========================================================================
   FREQUENCY SWITCHER
   ========================================================================== */
.theme-switch { display:grid; gap:7px; justify-items:start; font:10px/1 'Courier New',Courier,monospace; letter-spacing:.08em; }
.theme-switch-label { color:var(--text-small); white-space:nowrap; }
.theme-switch-current { color:var(--accent-primary); font-weight:normal; text-shadow:0 0 8px var(--glow-color); }
.theme-tabs { display:flex; flex-wrap:wrap; border-bottom:1px solid var(--ui-border); }
.theme-tabs [role="tab"] { position:relative; padding:6px 9px 7px; border:0; background:none; color:var(--text-small); font:inherit; font-size:9px; letter-spacing:.12em; cursor:pointer; }
.theme-tabs [role="tab"]:hover { color:var(--text-primary); }
.theme-tabs [role="tab"][aria-selected="true"] { color:var(--accent-primary); }
.theme-tabs [role="tab"][aria-selected="true"]::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--accent-primary); box-shadow:0 0 8px var(--glow-color); }
.theme-switch-keys { display:flex; flex-wrap:wrap; gap:4px; }
.theme-switch-keys[hidden] { display:none; }
.theme-option { display:inline-flex; align-items:center; gap:6px; padding:5px 8px; border:1px solid var(--ui-border); background:none; color:var(--text-small); font:inherit; font-size:9px; letter-spacing:.08em; line-height:1; cursor:pointer; }
.theme-option::before { content:""; width:9px; height:9px; flex:none; background:linear-gradient(135deg,var(--swatch-a) 50%,var(--swatch-b) 50%); box-shadow:0 0 0 1px var(--swatch-bg); }
.theme-option:hover { color:var(--text-primary); border-color:var(--accent-secondary-text); }
.theme-option[aria-pressed="true"] { color:var(--accent-primary); border-color:var(--accent-primary); box-shadow:0 0 10px var(--glow-color); }
@media (prefers-reduced-motion:reduce) { body,.theme-switch button { transition:none; } }

/* ==========================================================================
   THE ANIMATED SCREEN: HIGH-VOLTAGE CRT FILTER
   ========================================================================== */
body::before {
  content: " ";
  display: block;
  position: fixed;
  inset: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
              linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 99999; /* Always on top */
  background-size: 100% 4px, 6px 100%; /* Pixel mask & horizontal scanlines */
  pointer-events: none;
}

/* The subtle screen flicker (elusive energy) */
@keyframes crt-flicker {
  0% { opacity: 0.985; }
  50% { opacity: 0.998; }
  100% { opacity: 0.989; }
}
body { animation: crt-flicker 0.15s infinite; }

/* A glowing phosphor scan bar passing down the monitor */
body::after {
  content: " ";
  display: block;
  position: fixed;
  inset: 0;
  z-index: 99998;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.03) 10%, rgba(255,255,255,0) 11%);
  animation: scanline-scroll 8s linear infinite;
}
@keyframes scanline-scroll {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

/* Visitors who ask for less motion keep the scanline texture but lose flicker and the moving bar. */
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  body::after { animation: none; display: none; }
}

/* ==========================================================================
   TACTILE UI MECHANICS — un-smoothed digital snap
   ========================================================================== */
.portfolio-card {
  border: 1px solid var(--ui-border);
  transition: transform 0.05s steps(2), box-shadow 0.05s steps(2), border-color 0.05s steps(2);
}
.portfolio-card:hover,
.portfolio-card:focus-visible,
.portfolio-card:focus-within {
  transform: translate(-2px, -2px);
  border-color: var(--accent-primary);
  box-shadow: 4px 4px 0 var(--accent-secondary), 0 0 15px var(--glow-color);
}
.portfolio-card:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 transparent;
}
.snap-btn { transition: transform 0.05s steps(2), box-shadow 0.05s steps(2); }
.snap-btn:hover { transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--accent-secondary); }
.snap-btn:active { transform: translate(1px, 1px); box-shadow: none; }
.theme-switch button { transition: transform 0.05s steps(2), box-shadow 0.05s steps(2), color .05s steps(2), border-color .05s steps(2); }
.theme-switch button:active { transform: translate(1px, 1px); }
@media (prefers-reduced-motion: reduce) {
  .portfolio-card, .snap-btn { transition: none; }
}

/* ==========================================================================
   ELUSIVE LAYER — ghost logs & transient data blocks
   ========================================================================== */
.ghost-logs { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.has-ghost-logs main, .has-ghost-logs .site-nav, .has-ghost-logs .footer { position: relative; z-index: 1; }
.has-ghost-logs .site-nav { position: sticky; z-index: 10; }

.data-block {
  position: absolute; z-index: 3; right: 10px; bottom: 10px;
  margin: 0; padding: 8px 10px; max-width: calc(100% - 20px);
  background: color-mix(in srgb, var(--bg-main) 82%, transparent);
  border: 1px solid var(--accent-primary);
  box-shadow: 3px 3px 0 var(--accent-secondary);
  font: 9px/1.55 'Courier New', Courier, monospace; letter-spacing: .08em;
  color: var(--text-primary); text-transform: uppercase;
  opacity: 0; transform: translate(4px, 4px);
  transition: opacity .05s steps(2), transform .05s steps(2);
  pointer-events: none;
}
.data-block div { display: flex; gap: 10px; justify-content: space-between; white-space: nowrap; }
.data-block dt { color: var(--text-small); }
.data-block dd { margin: 0; color: var(--accent-primary); overflow: hidden; text-overflow: ellipsis; }
.data-block.is-pinned,
.portfolio-card:hover .data-block,
.portfolio-card:focus-visible .data-block,
.inspect:hover .data-block,
.inspect:focus-within .data-block { opacity: 1; transform: none; }

/* ==========================================================================
   HARDWARE DISTORTION OVERLAY
   Triggered by window.GambitDistort() — on style switch and
   on arcade category lock-in. Skipped entirely for reduced-motion visitors.
   ========================================================================== */
.glitch-flash-overlay {
  position: fixed; inset: 0; z-index: 100000; pointer-events: none; opacity: 0;
  /* Tight scanline band in the accent colour, like a CRT re-syncing */
  background:
    linear-gradient(to bottom, transparent 0, color-mix(in srgb, var(--accent-primary) 28%, transparent) 50%, transparent 100%) 0 0 / 100% 18% no-repeat,
    repeating-linear-gradient(to bottom, color-mix(in srgb, var(--text-primary) 7%, transparent) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
}
html[data-theme="paper"] .glitch-flash-overlay, html[data-theme="fog"] .glitch-flash-overlay,
html[data-theme="riso"] .glitch-flash-overlay, html[data-theme="caution"] .glitch-flash-overlay, html[data-theme="matcha"] .glitch-flash-overlay { mix-blend-mode: multiply; }

/* Style switch: a quick vertical-hold roll — the band sweeps down once, lines jitter, then settle */
.system-distorting { animation: crt-resync .38s steps(10, end) both; }
@keyframes crt-resync {
  0%   { opacity: 0;   background-position: 0 -20%, 0 0;   transform: translateX(0); }
  15%  { opacity: .9;  background-position: 0 10%, 0 1px;  transform: translateX(-2px); }
  35%  { opacity: .7;  background-position: 0 40%, 0 0;    transform: translateX(1px); }
  60%  { opacity: .55; background-position: 0 75%, 0 2px;  transform: translateX(0); }
  85%  { opacity: .25; background-position: 0 105%, 0 0; }
  100% { opacity: 0;   background-position: 0 120%, 0 0; }
}
/* The page itself slips a hair during the re-sync */
html:has(.system-distorting) body > :not(.glitch-flash-overlay):not(.ghost-logs) { animation: crt-slip .38s steps(4, end); }
@keyframes crt-slip { 0%,100% { filter: none; transform: none; } 30% { filter: saturate(1.3) contrast(1.05); transform: translateX(1px); } 60% { transform: translateX(-1px); } }

/* Ambient micro-glitch on headings (added by theme.js): tiny RGB split and slice, ~0.3s */
.micro-glitch { animation: micro-glitch .32s steps(3, end); }
@keyframes micro-glitch {
  0%, 100% { transform: none; }
  20% { transform: translateX(1.5px); text-shadow: -1.5px 0 var(--accent-secondary-text), 1.5px 0 var(--glow-color); }
  45% { transform: translateX(-1px); text-shadow: 1px 0 var(--accent-secondary-text), -1px 0 var(--accent-primary); }
  70% { transform: translateX(.5px); text-shadow: -1px 0 var(--accent-secondary-text); }
}
@media (prefers-reduced-motion: reduce) {
  .glitch-flash-overlay { display: none; }
  .system-distorting, .micro-glitch, html:has(.system-distorting) body > * { animation: none; }
}

/* ==========================================================================
   TWO-TONE (DUOTONE) MODULES
   Each theme defines only a background and one ink colour; every other token
   is blended from those two, like a two-colour print run.
   ========================================================================== */
[data-theme="riso"]      { --duo-bg: #F4EFE6; --duo-ink: #0047BB; } /* Cream / Riso Blue */
[data-theme="blueprint"] { --duo-bg: #0B3D91; --duo-ink: #E8F1FF; } /* Cyanotype Navy / Ice */
[data-theme="redline"]   { --duo-bg: #0A0A0A; --duo-ink: #FF2A2A; } /* Black / Signal Red */
[data-theme="caution"]   { --duo-bg: #FFE600; --duo-ink: #0A0A0A; } /* Hazard Yellow / Black */
[data-theme="sovereign"] { --duo-bg: #0A0F2C; --duo-ink: #F5C542; } /* Midnight Navy / Gold */
[data-theme="matcha"]    { --duo-bg: #E8EDDF; --duo-ink: #2F4A2F; } /* Matcha Paper / Forest */

[data-theme="riso"], [data-theme="blueprint"], [data-theme="redline"], [data-theme="caution"], [data-theme="sovereign"], [data-theme="matcha"] {
  --bg-main: var(--duo-bg);
  --text-primary: var(--duo-ink);
  --text-muted: color-mix(in srgb, var(--duo-ink) 40%, var(--duo-bg));
  --text-small: color-mix(in srgb, var(--duo-ink) 88%, var(--duo-bg)); /* keeps small text ≥ 4.5:1 */
  --accent-primary: var(--duo-ink);
  --accent-secondary: color-mix(in srgb, var(--duo-ink) 55%, var(--duo-bg));
  --accent-secondary-text: color-mix(in srgb, var(--duo-ink) 70%, var(--duo-bg));
  --ui-border: color-mix(in srgb, var(--duo-ink) 32%, var(--duo-bg));
  --glow-color: color-mix(in srgb, var(--duo-ink) 22%, transparent);
  --bg-raised: color-mix(in srgb, var(--duo-ink) 6%, var(--duo-bg));
  --bg-deep: color-mix(in srgb, var(--duo-ink) 10%, var(--duo-bg));
  --grid-line: color-mix(in srgb, var(--duo-ink) 14%, transparent);
}
/* Light-paper duotones: native controls and scrollbars render light */
html[data-theme="riso"], html[data-theme="caution"], html[data-theme="matcha"] { color-scheme: light; }

/* Divider in the switcher between full-colour and two-tone modules */


/* Page-to-page fades were removed: only the home intro uses a black transition. */

/* Light-paper duotones: soften the CRT mask so text stays crisp on pale stock */
html[data-theme="riso"] body::before, html[data-theme="caution"] body::before, html[data-theme="matcha"] body::before, html[data-theme="paper"] body::before, html[data-theme="fog"] body::before {
  background: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.07) 50%),
              linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
  background-size: 100% 4px, 6px 100%;
}

/* ==========================================================================
   CONSOLE ERA MODULES — palette + surface treatment per direction
   (inspired by hardware eras; no marks or logos are used)
   ========================================================================== */
[data-theme="neo-vintage"] { --bg-main:#F4F1EA; --text-primary:#22252A; --text-muted:#8C8A84; --accent-primary:#C24A0C; --accent-secondary:#8FC1E3; --accent-secondary-text:#2F6E9A; --ui-border:#D8D3C8; --glow-color:rgba(242,107,29,.16); }
[data-theme="midnight"]    { --bg-main:#070B1F; --text-primary:#DDE3F5; --text-muted:#5E6A99; --accent-primary:#4A93FF; --accent-secondary:#8A5CFF; --accent-secondary-text:#A98BFF; --ui-border:#1C2550; --glow-color:rgba(74,147,255,.35); }
[data-theme="industrial"]  { --bg-main:#0A0B0A; --text-primary:#E4E8E2; --text-muted:#5F665F; --accent-primary:#9BFF2A; --accent-secondary:#3A403C; --accent-secondary-text:#A4ADA6; --ui-border:#2E3430; --glow-color:rgba(155,255,42,.38); }
[data-theme="lcd"]         { --bg-main:#D6DCAE; --text-primary:#1F3A1F; --text-muted:#6B7A45; --accent-primary:#1F3A1F; --accent-secondary:#8B9A5B; --accent-secondary-text:#3F5424; --ui-border:#9AA56B; --glow-color:rgba(31,58,31,.06); }
[data-theme="pearl"]       { --bg-main:#E9EBEE; --text-primary:#2A2E33; --text-muted:#8A9099; --accent-primary:#0A7EA0; --accent-secondary:#B8BEC6; --accent-secondary-text:#4D5560; --ui-border:#CDD2D8; --glow-color:rgba(15,160,200,.22); }
[data-theme="translucent"] { --bg-main:#140E17; --text-primary:#EEE6F5; --text-muted:#7E6B8C; --accent-primary:#C6FF3D; --accent-secondary:#6E2D73; --accent-secondary-text:#C9A7F0; --ui-border:#3A2742; --glow-color:rgba(198,255,61,.28); }
[data-theme="signature"]   { --bg-main:#0A0A0C; --text-primary:#FFFFFF; --text-muted:#7C7A85; --accent-primary:#9D4DFF; --accent-secondary:#26232E; --accent-secondary-text:#C4A3FF; --ui-border:#26232E; --glow-color:rgba(157,77,255,.30); }

/* Light consoles */
html[data-theme="neo-vintage"] { --text-small:#4A4D52; --bg-deep:#E8E3D8; --bg-raised:#FBF9F4; color-scheme:light; }
html[data-theme="lcd"]         { --text-small:#2C4422; --bg-deep:#C6CE98; --bg-raised:#CDD4A2; color-scheme:light; }
html[data-theme="pearl"]       { --text-small:#3E444C; --bg-deep:#DCDFE3; --bg-raised:#F3F4F6; color-scheme:light; }
html[data-theme="neo-vintage"] .glitch-flash-overlay, html[data-theme="lcd"] .glitch-flash-overlay, html[data-theme="pearl"] .glitch-flash-overlay { mix-blend-mode: multiply; }
html[data-theme="neo-vintage"] body::before, html[data-theme="lcd"] body::before, html[data-theme="pearl"] body::before {
  background: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,.05) 50%); background-size: 100% 4px;
}

/* Surfaces each treatment styles */
html[data-theme] :is(.node-panel,.case-panel,.contact-panel,.gate-console,.term-box,.os-keys-box,.archive-grid figure,.feed-card,.work-card,.drop-card) { transition: border-color .2s, box-shadow .2s, background-color .3s; }

/* NEO VINTAGE — clean panels, disc-menu geometry, restrained gradients */
html[data-theme="neo-vintage"] body { background-image: radial-gradient(120% 80% at 85% -10%, rgba(143,193,227,.35), transparent 55%), radial-gradient(90% 60% at -10% 110%, rgba(242,107,29,.10), transparent 60%); background-attachment: fixed; }
html[data-theme="neo-vintage"] :is(.node-panel,.case-panel,.contact-panel,.gate-console,.term-box,.os-keys-box,.archive-grid figure,.feed-card,.work-card,.drop-card,.sys-diag) { border-radius: 14px; overflow: hidden; background-color: #FBF9F4; box-shadow: 0 1px 0 #fff inset, 0 10px 30px rgba(34,37,42,.07); }
html[data-theme="neo-vintage"] :is(.theme-option,.node-btn,.cf-submit,.os-keys kbd) { border-radius: 999px; }
html[data-theme="neo-vintage"] .category-option.is-active { background: linear-gradient(90deg, rgba(242,107,29,.12), transparent 70%); border-radius: 0 999px 999px 0; }
html[data-theme="neo-vintage"] .art-frame { border-radius: 50% 50% 18px 18px / 22% 22% 18px 18px; overflow: hidden; }

/* MIDNIGHT — atmospheric depth, translucent panels, soft light */
html[data-theme="midnight"] body { background-image: radial-gradient(80% 60% at 70% 0%, rgba(74,147,255,.18), transparent 60%), radial-gradient(70% 50% at 10% 100%, rgba(138,92,255,.16), transparent 60%), linear-gradient(#070B1F, #040616); background-attachment: fixed; }
html[data-theme="midnight"] :is(.node-panel,.case-panel,.contact-panel,.gate-console,.term-box,.os-keys-box,.feed-card,.work-card,.drop-card,.sys-diag,.control-panel) { background-color: rgba(18,26,66,.45); backdrop-filter: blur(14px) saturate(1.2); border-color: rgba(120,150,255,.22); box-shadow: 0 0 40px rgba(74,147,255,.10), inset 0 1px 0 rgba(255,255,255,.06); border-radius: 6px; }
html[data-theme="midnight"] :is(h1,.row-label) { text-shadow: 0 0 28px rgba(74,147,255,.35); }

/* INDUSTRIAL — industrial borders, luminous selection states */
html[data-theme="industrial"] :is(.node-panel,.case-panel,.contact-panel,.gate-console,.term-box,.os-keys-box,.archive-grid figure,.feed-card,.work-card,.drop-card,.sys-diag) { border: 2px solid #2E3430; background-image: linear-gradient(135deg, rgba(255,255,255,.03), transparent 40%); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
html[data-theme="industrial"] :is(.category-option.is-active,.theme-option[aria-pressed="true"],.class-options input:checked+span,a:focus-visible,button:focus-visible) { color: #9BFF2A; border-color: #9BFF2A; box-shadow: 0 0 0 1px #9BFF2A, 0 0 22px rgba(155,255,42,.45); text-shadow: 0 0 10px rgba(155,255,42,.6); }
html[data-theme="industrial"] .category-option.is-active { background: linear-gradient(90deg, rgba(155,255,42,.10), transparent 75%); }
html[data-theme="industrial"] :is(.work-card,.archive-grid figure,.feed-card):hover { border-color: #9BFF2A; box-shadow: 0 0 24px rgba(155,255,42,.25); }

/* LCD — flat contrast, pixel details, minimal glow */
html[data-theme="lcd"] *, html[data-theme="lcd"] *::before, html[data-theme="lcd"] *::after { text-shadow: none !important; border-radius: 0 !important; }
html[data-theme="lcd"] :is(.node-panel,.case-panel,.contact-panel,.gate-console,.term-box,.os-keys-box,.archive-grid figure,.feed-card,.work-card,.drop-card,.sys-diag) { border: 2px solid #1F3A1F; box-shadow: 4px 4px 0 #8B9A5B; background-color: #CDD4A2; backdrop-filter: none; }
html[data-theme="lcd"] body { background-image: radial-gradient(rgba(31,58,31,.10) 1px, transparent 1.2px); background-size: 4px 4px; }
html[data-theme="lcd"] :is(.category-option.is-active,.theme-option[aria-pressed="true"]) { background: #1F3A1F; color: #D6DCAE; box-shadow: none; }
html[data-theme="lcd"] .category-option.is-active * { color: #D6DCAE !important; }

/* PEARL — glass-like surfaces, flowing background accents */
html[data-theme="pearl"] body { background-image: linear-gradient(115deg, transparent 30%, rgba(10,126,160,.10) 45%, rgba(255,255,255,.7) 50%, rgba(10,126,160,.08) 56%, transparent 70%), linear-gradient(#EEF0F2, #E1E4E8); background-size: 300% 300%, 100% 100%; background-attachment: fixed; animation: pearl-flow 26s ease-in-out infinite alternate; }
@keyframes pearl-flow { from { background-position: 0% 40%, 0 0; } to { background-position: 100% 60%, 0 0; } }
html[data-theme="pearl"] :is(.node-panel,.case-panel,.contact-panel,.gate-console,.term-box,.os-keys-box,.feed-card,.work-card,.drop-card,.sys-diag,.control-panel,.archive-grid figure) { background-color: rgba(255,255,255,.55); backdrop-filter: blur(16px) saturate(1.4); border-color: rgba(255,255,255,.9); box-shadow: 0 8px 30px rgba(42,46,51,.08), inset 0 1px 0 #fff; border-radius: 12px; overflow: hidden; }

/* TRANSLUCENT — layered panels, coloured transparent edges */
html[data-theme="translucent"] body { background-image: radial-gradient(60% 50% at 90% 10%, rgba(110,45,115,.35), transparent 65%), radial-gradient(50% 40% at 0% 90%, rgba(198,255,61,.07), transparent 60%); background-attachment: fixed; }
html[data-theme="translucent"] :is(.node-panel,.case-panel,.contact-panel,.gate-console,.term-box,.os-keys-box,.archive-grid figure,.feed-card,.work-card,.drop-card,.sys-diag,.control-panel) { background-color: rgba(110,45,115,.20); backdrop-filter: blur(10px); border: 1px solid rgba(201,167,240,.38); box-shadow: 6px 6px 0 rgba(110,45,115,.45), -1px -1px 0 rgba(198,255,61,.25) inset; border-radius: 10px; }
html[data-theme="translucent"] :is(.category-option.is-active,.theme-option[aria-pressed="true"]) { box-shadow: inset 3px 0 0 #C6FF3D, 0 0 18px rgba(198,255,61,.2); }

/* SIGNATURE — black, white and signal purple; archival identity */
html[data-theme="signature"] body { background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 120px); }
html[data-theme="signature"] :is(.node-panel,.case-panel,.contact-panel,.gate-console,.term-box,.os-keys-box,.archive-grid figure,.feed-card,.work-card,.drop-card,.sys-diag) { border: 1px solid #2E2B36; border-top: 3px solid #9D4DFF; background-color: #111014; border-radius: 0; }
html[data-theme="signature"] :is(.eyebrow,.section-head span:first-child,.slot-label) { color: #9D4DFF; }
html[data-theme="signature"] :is(h1,h2) { color: #FFFFFF; text-shadow: none; }
html[data-theme="signature"] .section-head { border-top: 1px solid #9D4DFF; }
html[data-theme="signature"] .category-option.is-active .row-index { color: #9D4DFF; }

@media (prefers-reduced-motion: reduce) { html[data-theme="pearl"] body { animation: none; } }

/* ==========================================================================
   GAME WORLD MODULES — colourways inspired by game genres (no marks or logos)
   ========================================================================== */
[data-theme="cyberpunk"]    { --bg-main:#0B0A12; --text-primary:#F4F1E1; --text-muted:#6E6A80; --accent-primary:#FCEE0A; --accent-secondary:#00F0FF; --accent-secondary-text:#00F0FF; --ui-border:#2A2638; --glow-color:rgba(252,238,10,.30); }
[data-theme="tactical"]     { --bg-main:#0D110E; --text-primary:#D7DED6; --text-muted:#5D6B5F; --accent-primary:#5CFF9D; --accent-secondary:#4A5643; --accent-secondary-text:#9DB59A; --ui-border:#263026; --glow-color:rgba(92,255,157,.28); }
[data-theme="wasteland"]    { --bg-main:#120D06; --text-primary:#FFD58A; --text-muted:#7A5D2E; --accent-primary:#FFB000; --accent-secondary:#5C4318; --accent-secondary-text:#E09B3D; --ui-border:#33260F; --glow-color:rgba(255,176,0,.32); }
[data-theme="ember"]        { --bg-main:#121110; --text-primary:#E6DFD3; --text-muted:#6F675D; --accent-primary:#FF7A2E; --accent-secondary:#3B342E; --accent-secondary-text:#C9A27A; --ui-border:#2C2723; --glow-color:rgba(255,122,46,.26); }
[data-theme="phantom"]      { --bg-main:#0A0A0A; --text-primary:#FFFFFF; --text-muted:#8A8A8A; --accent-primary:#FF1F3D; --accent-secondary:#C4001F; --accent-secondary-text:#FF8A99; --ui-border:#2B2B2B; --glow-color:rgba(255,31,61,.30); }
[data-theme="strand"]       { --bg-main:#E8E6E1; --text-primary:#1B1E22; --text-muted:#8A8C8E; --accent-primary:#8C6A12; --accent-secondary:#C9B26A; --accent-secondary-text:#3E4A55; --ui-border:#CFCBC2; --glow-color:rgba(201,178,106,.22); }
html[data-theme="strand"] { --text-small:#3A3E43; --bg-deep:#DAD7D0; --bg-raised:#F1EFEB; color-scheme:light; }
html[data-theme="strand"] .glitch-flash-overlay { mix-blend-mode: multiply; }
html[data-theme="strand"] body::before { background: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,.05) 50%); background-size: 100% 4px; }

/* CYBERPUNK — hazard yellow on night, cyan data, cut corners and glitch offsets */
html[data-theme="cyberpunk"] :is(.node-panel,.case-panel,.contact-panel,.gate-console,.term-box,.os-keys-box,.archive-grid figure,.feed-card,.work-card,.drop-card,.sys-diag) { border: 1px solid #FCEE0A; box-shadow: 4px 4px 0 #00F0FF; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%); }
html[data-theme="cyberpunk"] :is(h1,.row-label) { text-shadow: 3px 0 rgba(0,240,255,.55), -2px 0 rgba(255,0,60,.45); }
html[data-theme="cyberpunk"] :is(.category-option.is-active,.theme-option[aria-pressed="true"]) { background: #FCEE0A; color: #0B0A12; box-shadow: 3px 3px 0 #00F0FF; }
html[data-theme="cyberpunk"] .category-option.is-active * { color: #0B0A12 !important; }

/* TACTICAL — stealth-ops codec screens: green phosphor, scan grid, bracketed frames */
html[data-theme="tactical"] body { background-image: linear-gradient(rgba(92,255,157,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(92,255,157,.04) 1px, transparent 1px); background-size: 40px 40px; }
html[data-theme="tactical"] :is(.node-panel,.case-panel,.contact-panel,.gate-console,.term-box,.os-keys-box,.archive-grid figure,.feed-card,.work-card,.drop-card,.sys-diag) { border: 1px solid #263026; background-color: rgba(18,26,20,.85); box-shadow: inset 0 0 30px rgba(92,255,157,.06), 0 0 0 1px rgba(92,255,157,.12); }
html[data-theme="tactical"] :is(h1,h2,.row-label) { text-transform: uppercase; text-shadow: 0 0 12px rgba(92,255,157,.35); }

/* WASTELAND — amber terminal, chunky bevels, warm phosphor bloom */
html[data-theme="wasteland"] body { background-image: radial-gradient(ellipse at center, rgba(255,176,0,.08), transparent 70%); }
html[data-theme="wasteland"] * { text-shadow: 0 0 6px rgba(255,176,0,.25); }
html[data-theme="wasteland"] :is(.node-panel,.case-panel,.contact-panel,.gate-console,.term-box,.os-keys-box,.archive-grid figure,.feed-card,.work-card,.drop-card,.sys-diag) { border: 2px solid #5C4318; border-radius: 8px; box-shadow: inset 0 0 0 2px #120D06, inset 0 0 0 3px #33260F, 0 0 20px rgba(255,176,0,.08); }

/* EMBER — dark fantasy: ash stone, ember glow, engraved edges */
html[data-theme="ember"] body { background-image: radial-gradient(60% 40% at 50% 110%, rgba(255,122,46,.16), transparent 70%); background-attachment: fixed; }
html[data-theme="ember"] :is(.node-panel,.case-panel,.contact-panel,.gate-console,.term-box,.os-keys-box,.archive-grid figure,.feed-card,.work-card,.drop-card,.sys-diag) { border: 1px solid #3B342E; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 -1px 0 rgba(0,0,0,.6), 0 12px 30px rgba(0,0,0,.45); }
html[data-theme="ember"] :is(h1,h2) { letter-spacing: .02em; text-shadow: 0 0 18px rgba(255,122,46,.25); }

/* PHANTOM — stylish JRPG menus: red, black and white, slanted cut-outs.
   Slants use clip-path, never transform, so they don't fight the console's own animations. */
html[data-theme="phantom"] :is(.node-panel,.case-panel,.contact-panel,.gate-console,.term-box,.os-keys-box,.archive-grid figure,.feed-card,.work-card,.drop-card,.sys-diag) { border: 2px solid #FFFFFF; box-shadow: 6px 6px 0 #FF1F3D; }
html[data-theme="phantom"] .category-option.is-active { background: #FF1F3D; clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%); }
html[data-theme="phantom"] .category-option.is-active :is(.row-index,.row-label,.row-arrow,.row-tagline) { color: #FFFFFF !important; text-shadow: 3px 3px 0 #0A0A0A; }
html[data-theme="phantom"] .category-option.is-active::before { background: #FFFFFF; }
html[data-theme="phantom"] .theme-option[aria-pressed="true"] { background: #FF1F3D; border-color: #FF1F3D; color: #FFFFFF; box-shadow: none; clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%); padding-right: 12px; }
html[data-theme="phantom"] .theme-option[aria-pressed="true"]::before { box-shadow: 0 0 0 1px #FFFFFF; }
html[data-theme="phantom"] :is(h1,h2) { text-shadow: 4px 4px 0 #FF1F3D; }
html[data-theme="phantom"] .brand h1 { color: #FFFFFF; }
html[data-theme="phantom"] .section-head { border-top: 2px solid #FF1F3D; }
html[data-theme="phantom"] :is(.node-btn,.cf-submit) { color: #FFFFFF; }

/* STRAND — bone-white field gear, slate type, chiral gold threads */
html[data-theme="strand"] body { background-image: repeating-linear-gradient(135deg, rgba(201,178,106,.10) 0 1px, transparent 1px 28px); }
html[data-theme="strand"] :is(.node-panel,.case-panel,.contact-panel,.gate-console,.term-box,.os-keys-box,.archive-grid figure,.feed-card,.work-card,.drop-card,.sys-diag) { background-color: #F1EFEB; border: 1px solid #CFCBC2; border-left: 3px solid #C9B26A; box-shadow: 0 8px 24px rgba(27,30,34,.06); }
html[data-theme="strand"] :is(.eyebrow,.slot-label) { color: #8C6A12; }
/* Calm mode (settings drawer): no glitch flashes or moving backgrounds */
html.is-calm .glitch-flash-overlay { display: none; }
html.is-calm .micro-glitch, html.is-calm body { animation: none !important; }
html.is-calm .sys-diag { transition: none; }