/* ================================================================
   SaveState v2 — core.css
   Tokens · Glass system · All themes · Mode-aware backgrounds
   ================================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,300;0,400;0,600;0,700;1,300&family=JetBrains+Mono:wght@400;600&family=Rajdhani:wght@400;600;700&display=swap');

/* ── Reset ────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  transition: background 0.4s ease, color 0.2s ease;
}

img,
svg {
  display: block;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button {
  cursor: pointer;
  font-family: inherit;
}

/* ── Base Token Layer (Dark Glass) ───────────────────────── */
:root {
  --font-body: 'Exo 2', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-display: 'Rajdhani', sans-serif;

  /* Accent / brand */
  --accent: #3a8dde;
  --accent-2: #7dd4ff;
  --accent-glow: rgba(58, 141, 222, 0.45);

  /* Dark base surfaces */
  --bg: #0d1117;
  --bg-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  --surface: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.07);
  --surface-3: rgba(255, 255, 255, 0.11);

  /* Glass panel */
  --glass-bg: rgba(16, 24, 36, 0.55);
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-blur: 20px;
  --glass-shine: rgba(255, 255, 255, 0.06);

  /* Text */
  --text: #dde6f1;
  --text-muted: #7a8fa8;
  --text-faint: #3d5068;

  /* Borders */
  --border: rgba(255, 255, 255, 0.09);
  --border-focus: var(--accent);

  /* Feedback */
  --success: #22d362;
  --warning: #f5a623;
  --danger: #e84040;
  --info: #3a8dde;

  /* Geometry */
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);

  /* Transitions */
  --t-fast: 0.12s ease;
  --t-base: 0.22s ease;
  --t-slow: 0.4s ease;

  /* Titlebar gradient */
  --titlebar-grad: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);

  /* Mode label colors */
  --mode-arcade: #ff4ecd;
  --mode-lab: #3af5b0;
  --mode-business: #7a8fa8;

  /* Arcade gradient stops — shifted by the hue animation */
  --arc-c1: #1a0533;
  --arc-c2: #0d1a3a;
  --arc-c3: #1a0a2e;
}

/* ================================================================
   GLASS UTILITY
   ================================================================ */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow),
    inset 0 1px 0 var(--glass-shine);
}

.glass-subtle {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
}

/* ── Business & Lab: strip backdrop-blur from glass panels ── */
/* Blur on top of a static bg is fine; blur on top of animated
   elements is what kills the GPU. In non-arcade modes the bg
   is static so we can keep a light blur, but we still reduce it. */
body[data-mode="business"] .glass,
body[data-mode="lab"] .glass {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body[data-mode="business"] .glass-subtle,
body[data-mode="lab"] .glass-subtle {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ================================================================
   BACKGROUND SCENE
   ================================================================ */
.bg-scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

/* Solid bg fill */
.bg-scene::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg);
}

/* ── Orbs: hidden by default ────────────────────────────── */
/* We show them ONLY in arcade mode, and only as static
   radial gradients — no blur filter, no transform animation.
   Color cycling is done cheaply via @keyframes on opacity
   of two layered pseudo-elements instead of moving large
   filter:blur elements. */
.bg-scene .orb {
  display: none;
}

/* ── Arcade mode background ─────────────────────────────── */
/* A single static radial gradient mesh that slowly shifts
   hue via a CSS filter hue-rotate on the whole bg-scene.
   One hue-rotate on a single element costs almost nothing
   compared to three animated blur(80px) transforms. */
body[data-mode="arcade"] .bg-scene {
  animation: arcadeHue 20s linear infinite;
}

body[data-mode="arcade"] .bg-scene::before {
  background:
    radial-gradient(ellipse 60% 50% at 10% 10%, rgba(168, 85, 247, 0.28) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 90% 85%, rgba(255, 78, 205, 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 55% 50%, rgba(58, 141, 222, 0.12) 0%, transparent 70%),
    var(--bg);
}

@keyframes arcadeHue {
  0% {
    filter: hue-rotate(0deg);
  }

  100% {
    filter: hue-rotate(360deg);
  }
}

/* ── Business mode background: flat, zero animation ──────── */
body[data-mode="business"] .bg-scene {
  animation: none;
}

body[data-mode="business"] .bg-scene::before {
  background: var(--bg);
}

/* ── Lab mode background: very subtle static gradient ────── */
body[data-mode="lab"] .bg-scene {
  animation: none;
}

body[data-mode="lab"] .bg-scene::before {
  background:
    radial-gradient(ellipse 55% 45% at 8% 8%, rgba(58, 245, 176, 0.07) 0%, transparent 65%),
    radial-gradient(ellipse 45% 55% at 92% 88%, rgba(58, 141, 222, 0.06) 0%, transparent 65%),
    var(--bg);
}

/* ── Noise overlay: Lab/Business only (static, cheap) ────── */
body[data-mode="lab"] .bg-scene::after,
body[data-mode="business"] .bg-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--bg-noise);
  background-size: 200px 200px;
  opacity: 0.5;
  pointer-events: none;
}

/* No noise in arcade — saves one composite layer */
body[data-mode="arcade"] .bg-scene::after {
  display: none;
}

/* ── Fallback when data-mode not yet set (matches lab) ───── */
body:not([data-mode]) .bg-scene::before,
body[data-mode=""] .bg-scene::before {
  background:
    radial-gradient(ellipse 55% 45% at 8% 8%, rgba(58, 245, 176, 0.07) 0%, transparent 65%),
    radial-gradient(ellipse 45% 55% at 92% 88%, rgba(58, 141, 222, 0.06) 0%, transparent 65%),
    var(--bg);
}


/* ================================================================
   THEMES
   ================================================================ */

/* ── Light ────────────────────────────────────────────────── */
.theme-light {
  --bg: #e8edf5;
  --glass-bg: rgba(240, 244, 252, 0.70);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-shine: rgba(255, 255, 255, 0.55);
  --surface: rgba(255, 255, 255, 0.55);
  --surface-2: rgba(255, 255, 255, 0.75);
  --text: #1a2233;
  --text-muted: #4b5d7a;
  --text-faint: #9aabbd;
  --border: rgba(0, 0, 0, 0.09);
  --accent: #2563eb;
  --accent-2: #60a5fa;
  --accent-glow: rgba(37, 99, 235, 0.3);
  --subheader-bg: rgba(200, 210, 230, 0.6);
  --picker-bg: #f0f4fc;
  --picker-text: #1a2233;
  --picker-hover: rgba(0, 0, 0, 0.06);
  --mode-arcade: #c026a0;
  --mode-lab: #059669;
  --mode-business: #4b5d7a;
}

/* ── iHeart Dark ──────────────────────────────────────────── */
.theme-iheart-dark {
  --bg: #0e0507;
  --glass-bg: rgba(20, 6, 8, 0.60);
  --glass-border: rgba(228, 0, 43, 0.20);
  --glass-shine: rgba(255, 100, 120, 0.08);
  --accent: #e4002b;
  --accent-2: #ff607a;
  --accent-glow: rgba(228, 0, 43, 0.5);
  --text: #ffeaee;
  --text-muted: #c4808a;
  --text-faint: #6a3040;
  --border: rgba(228, 0, 43, 0.15);
  --titlebar-grad: linear-gradient(135deg, #b0001e, #e4002b, #ff607a);
}

/* ── iHeart Light ─────────────────────────────────────────── */
.theme-iheart-light {
  --bg: #fff0f2;
  --glass-bg: rgba(255, 240, 242, 0.70);
  --glass-border: rgba(228, 0, 43, 0.20);
  --glass-shine: rgba(255, 255, 255, 0.7);
  --accent: #e4002b;
  --accent-2: #ff4d6d;
  --accent-glow: rgba(228, 0, 43, 0.25);
  --text: #1a0508;
  --text-muted: #7a2030;
  --text-faint: #c4808a;
  --border: rgba(228, 0, 43, 0.12);
  --titlebar-grad: linear-gradient(135deg, #b0001e, #e4002b, #ff607a);
  --subheader-bg: rgba(255, 220, 225, 0.65);
  --picker-bg: #fff0f2;
  --picker-text: #1a0508;
  --picker-hover: rgba(228, 0, 43, 0.07);
  --mode-arcade: #c026a0;
  --mode-lab: #059669;
  --mode-business: #7a2030;
}

/* ── Amber Terminal Dark ──────────────────────────────────── */
.theme-amber-dark {
  --bg: #0a0800;
  --glass-bg: rgba(14, 11, 0, 0.70);
  --glass-border: rgba(255, 180, 0, 0.18);
  --glass-shine: rgba(255, 200, 50, 0.06);
  --accent: #ffb300;
  --accent-2: #ffe066;
  --accent-glow: rgba(255, 179, 0, 0.45);
  --text: #ffe799;
  --text-muted: #a07820;
  --text-faint: #4a3800;
  --border: rgba(255, 179, 0, 0.15);
  --titlebar-grad: linear-gradient(135deg, #c87000, #ffb300, #ffe066);
  --font-body: 'JetBrains Mono', monospace;
}

/* ── Amber Terminal Light ─────────────────────────────────── */
.theme-amber-light {
  --bg: #fdf8e8;
  --glass-bg: rgba(253, 248, 232, 0.75);
  --glass-border: rgba(180, 120, 0, 0.18);
  --glass-shine: rgba(255, 255, 255, 0.6);
  --accent: #b86a00;
  --accent-2: #e6a800;
  --accent-glow: rgba(184, 106, 0, 0.25);
  --text: #2a1c00;
  --text-muted: #7a4d00;
  --text-faint: #c49a40;
  --border: rgba(180, 120, 0, 0.12);
  --titlebar-grad: linear-gradient(135deg, #b86a00, #e6a800);
  --font-body: 'JetBrains Mono', monospace;
  --subheader-bg: rgba(240, 228, 190, 0.65);
  --picker-bg: #fdf8e8;
  --picker-text: #2a1c00;
  --picker-hover: rgba(184, 106, 0, 0.08);
  --mode-arcade: #b86a00;
  --mode-lab: #5a7a00;
  --mode-business: #7a4d00;
}

/* ── Win16 Dark ───────────────────────────────────────────── */
.theme-win16-dark {
  --bg: #000000;
  --glass-bg: #000088;
  --glass-border: #0000aa;
  --glass-blur: 0px;
  --glass-shine: transparent;
  --accent: #55ffff;
  --accent-2: #ffffff;
  --accent-glow: transparent;
  --text: #ffffff;
  --text-muted: #aaaaaa;
  --text-faint: #555555;
  --border: #0000aa;
  --radius: 0;
  --radius-sm: 0;
  --radius-lg: 0;
  --font-body: 'Courier New', monospace;
  --shadow: none;
  --shadow-sm: none;
  --titlebar-grad: #0000aa;
}

.theme-win16-dark .bg-scene,
.theme-win16-light .bg-scene {
  animation: none !important;
}

.theme-win16-dark .glass,
.theme-win16-light .glass,
.theme-win16-dark .glass-subtle,
.theme-win16-light .glass-subtle {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ── Win16 Light ──────────────────────────────────────────── */
.theme-win16-light {
  --bg: #c0c0c0;
  --glass-bg: #ffffff;
  --glass-border: #000000;
  --glass-blur: 0px;
  --glass-shine: transparent;
  --accent: #000080;
  --accent-2: #0000aa;
  --accent-glow: transparent;
  --text: #000000;
  --text-muted: #444444;
  --text-faint: #888888;
  --border: #000000;
  --radius: 0;
  --radius-sm: 0;
  --radius-lg: 0;
  --font-body: 'Courier New', monospace;
  --shadow: 2px 2px 0 #000;
  --shadow-sm: 1px 1px 0 #000;
  --titlebar-grad: #000080;
  --subheader-bg: rgba(160, 160, 160, 0.8);
  --picker-bg: #ffffff;
  --picker-text: #000000;
  --picker-hover: rgba(0, 0, 0, 0.08);
  --mode-arcade: #800080;
  --mode-lab: #006400;
  --mode-business: #444444;
}

/* ── Final Fantasy VI ─────────────────────────────────────── */
.theme-ff6 {
  --bg: #100820;
  --glass-bg: rgba(8, 4, 28, 0.72);
  --glass-border: rgba(120, 80, 220, 0.30);
  --glass-shine: rgba(200, 160, 255, 0.08);
  --accent: #a060ff;
  --accent-2: #e0b0ff;
  --accent-glow: rgba(160, 96, 255, 0.5);
  --text: #e8d8ff;
  --text-muted: #9070c0;
  --text-faint: #4a3060;
  --border: rgba(120, 80, 220, 0.20);
  --titlebar-grad: linear-gradient(135deg, #4020a0, #a060ff, #e0b0ff);
}

/* ── Castlevania ──────────────────────────────────────────── */
.theme-castlevania {
  --bg: #0a0000;
  --glass-bg: rgba(18, 2, 2, 0.72);
  --glass-border: rgba(180, 20, 20, 0.25);
  --glass-shine: rgba(255, 80, 80, 0.05);
  --accent: #cc1010;
  --accent-2: #ff8040;
  --accent-glow: rgba(200, 16, 16, 0.5);
  --text: #f5d5c0;
  --text-muted: #a06040;
  --text-faint: #4a2010;
  --border: rgba(180, 20, 20, 0.18);
  --titlebar-grad: linear-gradient(135deg, #700000, #cc1010, #ff8040);
}

/* ── TMNT ─────────────────────────────────────────────────── */
.theme-tmnt {
  --bg: #040f08;
  --glass-bg: rgba(4, 18, 8, 0.68);
  --glass-border: rgba(0, 200, 80, 0.22);
  --glass-shine: rgba(0, 255, 100, 0.06);
  --accent: #00c84a;
  --accent-2: #80ffb0;
  --accent-glow: rgba(0, 200, 74, 0.45);
  --text: #d0ffde;
  --text-muted: #508060;
  --text-faint: #1a3820;
  --border: rgba(0, 200, 80, 0.16);
  --titlebar-grad: linear-gradient(135deg, #006020, #00c84a, #80ffb0);
}

/* ── Metroid ──────────────────────────────────────────────── */
.theme-metroid {
  --bg: #000a04;
  --glass-bg: rgba(0, 14, 4, 0.72);
  --glass-border: rgba(0, 255, 120, 0.20);
  --glass-shine: rgba(0, 255, 120, 0.06);
  --accent: #00ff78;
  --accent-2: #b0ffda;
  --accent-glow: rgba(0, 255, 120, 0.45);
  --text: #c0ffdc;
  --text-muted: #407860;
  --text-faint: #0a2818;
  --border: rgba(0, 255, 120, 0.14);
  --titlebar-grad: linear-gradient(135deg, #003020, #00ff78);
  --font-body: 'JetBrains Mono', monospace;
}

/* ── Synthwave ────────────────────────────────────────────── */
.theme-synthwave {
  --bg: #08001a;
  --glass-bg: rgba(12, 0, 28, 0.68);
  --glass-border: rgba(255, 0, 200, 0.22);
  --glass-shine: rgba(255, 100, 255, 0.06);
  --accent: #ff00cc;
  --accent-2: #00eeff;
  --accent-glow: rgba(255, 0, 200, 0.5);
  --text: #ffccff;
  --text-muted: #c060c0;
  --text-faint: #4a1050;
  --border: rgba(255, 0, 200, 0.16);
  --titlebar-grad: linear-gradient(135deg, #6600aa, #ff00cc, #00eeff);
}

/* ── Cyberpunk ────────────────────────────────────────────── */
.theme-cyberpunk {
  --bg: #020c14;
  --glass-bg: rgba(2, 12, 24, 0.72);
  --glass-border: rgba(0, 240, 255, 0.18);
  --glass-shine: rgba(0, 240, 255, 0.05);
  --accent: #00f0ff;
  --accent-2: #f0e000;
  --accent-glow: rgba(0, 240, 255, 0.45);
  --text: #c0f8ff;
  --text-muted: #407080;
  --text-faint: #0a2028;
  --border: rgba(0, 240, 255, 0.14);
  --titlebar-grad: linear-gradient(135deg, #00408a, #00f0ff, #f0e000);
}

/* ── Respect prefers-reduced-motion system setting ───────── */
@media (prefers-reduced-motion: reduce) {

  .bg-scene,
  body[data-mode="arcade"] .bg-scene {
    animation: none !important;
  }
}