/* ==========================================================================
   GN-MATH — design system
   Flat, minimal launcher aesthetic: near-black, hairline borders, quiet type.
   Structure: tokens → themes → base → components → shell
   ========================================================================== */

/* 1. Core tokens ----------------------------------------------------------- */
:root {
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-pixel: "Silkscreen", "Courier New", monospace;

  --motion: 1;
  --ease-out: cubic-bezier(0.22, 0.61, 0.21, 1);
  --dur-fast: 120ms;
  --dur-med: 200ms;
  --dur-slow: 320ms;

  --w-shell: 1180px;
  --radius: 10px;
  --radius-lg: 14px;
  --pad-card: 14px;
  --gap-grid: 14px;
  --gap-section: 48px;
}

:root[data-density="compact"] { --pad-card: 10px; --gap-grid: 10px; --gap-section: 36px; }
:root[data-density="cozy"] { --pad-card: 18px; --gap-grid: 18px; --gap-section: 60px; }

/* 2. Themes ---------------------------------------------------------------- */

/* Midnight Voltage (default) — near-black, neutral, white text */
:root[data-theme="midnight-voltage"] {
  --bg: #08080c;
  --bg-elev: #0b0b10;
  --surface: #0e0e14;
  --surface-2: #12121a;
  --surface-hover: #17171f;
  --primary: #e9e9ee;
  --primary-hover: #ffffff;
  --primary-contrast: #0a0a0e;
  --secondary: #8f8fa3;
  --accent: #b7a6ff;
  --accent-soft: rgba(183, 166, 255, 0.1);
  --text-1: #e6e6ec;
  --text-2: #9b9ba8;
  --text-muted: #5d5d6b;
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.14);
  --success: #57d99a;
  --warning: #e0b45c;
  --error: #f2707f;
  --focus: #b7a6ff;
  --selection-bg: rgba(183, 166, 255, 0.25);
  --overlay: rgba(4, 4, 7, 0.7);
  --glow-1: rgba(140, 130, 220, 0.05);
  --glow-2: rgba(140, 130, 220, 0.03);
  --skeleton-a: #101017;
  --skeleton-b: #16161f;  --vortex-1: rgba(183,166,255,0.85); --vortex-2: rgba(124,196,255,0.5); --vortex-eye: rgba(183,166,255,0.13); --vortex-star: rgba(255,255,255,0.55); --vortex-arm: rgba(140,130,225,0.085);
  color-scheme: dark;
}

/* Arctic Pulse — pale glacial light theme */
:root[data-theme="arctic-pulse"] {
  --bg: #e9edf3;
  --bg-elev: #f0f3f7;
  --surface: #f7f9fb;
  --surface-2: #eff2f6;
  --surface-hover: #e8edf3;
  --primary: #1a1d24;
  --primary-hover: #000000;
  --primary-contrast: #f5f7fa;
  --secondary: #5a6472;
  --accent: #3565d6;
  --accent-soft: rgba(53, 101, 214, 0.1);
  --text-1: #1a1d24;
  --text-2: #4c5462;
  --text-muted: #8a93a1;
  --border: rgba(20, 24, 32, 0.09);
  --border-strong: rgba(20, 24, 32, 0.18);
  --success: #1d9e6b;
  --warning: #b26a00;
  --error: #d64550;
  --focus: #3565d6;
  --selection-bg: rgba(53, 101, 214, 0.2);
  --overlay: rgba(20, 26, 34, 0.4);
  --glow-1: rgba(53, 101, 214, 0.06);
  --glow-2: rgba(53, 101, 214, 0.03);
  --skeleton-a: #e3e8ee;
  --skeleton-b: #eef1f5;  --vortex-1: rgba(53,101,214,0.55); --vortex-2: rgba(8,145,178,0.4); --vortex-eye: rgba(53,101,214,0.1); --vortex-star: rgba(30,50,90,0.45); --vortex-arm: rgba(53,101,214,0.07);
  color-scheme: light;
}

/* Solar Flare — warm charcoal */
:root[data-theme="solar-flare"] {
  --bg: #0e0b08;
  --bg-elev: #120e0a;
  --surface: #16110c;
  --surface-2: #1b1510;
  --surface-hover: #211a13;
  --primary: #ece5da;
  --primary-hover: #ffffff;
  --primary-contrast: #171008;
  --secondary: #a89880;
  --accent: #f0a35a;
  --accent-soft: rgba(240, 163, 90, 0.1);
  --text-1: #ece5da;
  --text-2: #a2968a;
  --text-muted: #6b6155;
  --border: rgba(255, 240, 220, 0.08);
  --border-strong: rgba(255, 240, 220, 0.16);
  --success: #57d99a;
  --warning: #e0b45c;
  --error: #f2707f;
  --focus: #f0a35a;
  --selection-bg: rgba(240, 163, 90, 0.25);
  --overlay: rgba(8, 5, 2, 0.7);
  --glow-1: rgba(240, 163, 90, 0.05);
  --glow-2: rgba(240, 163, 90, 0.03);
  --skeleton-a: #191309;
  --skeleton-b: #201810;  --vortex-1: rgba(255,178,102,0.75); --vortex-2: rgba(255,106,92,0.45); --vortex-eye: rgba(255,163,90,0.12); --vortex-star: rgba(255,230,200,0.45); --vortex-arm: rgba(240,163,90,0.07);
  color-scheme: dark;
}

/* Velvet Horizon — dusk plum */
:root[data-theme="velvet-horizon"] {
  --bg: #120e13;
  --bg-elev: #161118;
  --surface: #1a141d;
  --surface-2: #201925;
  --surface-hover: #261e2b;
  --primary: #ece2ec;
  --primary-hover: #ffffff;
  --primary-contrast: #1c1220;
  --secondary: #a894a8;
  --accent: #e39ab4;
  --accent-soft: rgba(227, 154, 180, 0.1);
  --text-1: #ece4ec;
  --text-2: #a493a6;
  --text-muted: #6d5f70;
  --border: rgba(255, 235, 250, 0.08);
  --border-strong: rgba(255, 235, 250, 0.16);
  --success: #57d99a;
  --warning: #e0b45c;
  --error: #f2707f;
  --focus: #e39ab4;
  --selection-bg: rgba(227, 154, 180, 0.25);
  --overlay: rgba(10, 6, 11, 0.7);
  --glow-1: rgba(200, 130, 170, 0.05);
  --glow-2: rgba(200, 130, 170, 0.03);
  --skeleton-a: #1d1520;
  --skeleton-b: #251b29;  --vortex-1: rgba(240,170,200,0.7); --vortex-2: rgba(217,179,106,0.45); --vortex-eye: rgba(227,154,180,0.12); --vortex-star: rgba(255,240,250,0.45); --vortex-arm: rgba(200,130,170,0.07);
  color-scheme: dark;
}

/* Neon Current — black glass */
:root[data-theme="neon-current"] {
  --bg: #050507;
  --bg-elev: #08080b;
  --surface: #0b0b10;
  --surface-2: #101016;
  --surface-hover: #15151d;
  --primary: #eceaf4;
  --primary-hover: #ffffff;
  --primary-contrast: #0b0b12;
  --secondary: #8f8fa8;
  --accent: #f65fa8;
  --accent-soft: rgba(246, 95, 168, 0.1);
  --text-1: #eae8f2;
  --text-2: #9a97ac;
  --text-muted: #5f5c72;
  --border: rgba(230, 225, 255, 0.08);
  --border-strong: rgba(230, 225, 255, 0.16);
  --success: #57d99a;
  --warning: #e0b45c;
  --error: #f2707f;
  --focus: #f65fa8;
  --selection-bg: rgba(246, 95, 168, 0.25);
  --overlay: rgba(2, 2, 4, 0.72);
  --glow-1: rgba(246, 95, 168, 0.05);
  --glow-2: rgba(246, 95, 168, 0.03);
  --skeleton-a: #0e0e15;
  --skeleton-b: #14141c;  --vortex-1: rgba(246,95,168,0.7); --vortex-2: rgba(94,234,212,0.4); --vortex-eye: rgba(246,95,168,0.12); --vortex-star: rgba(255,255,255,0.5); --vortex-arm: rgba(246,95,168,0.07);
  color-scheme: dark;
}

/* Obsidian Bloom — graphite jade */
:root[data-theme="obsidian-bloom"] {
  --bg: #0a0d0c;
  --bg-elev: #0d1110;
  --surface: #101413;
  --surface-2: #141a18;
  --surface-hover: #192019;
  --primary: #e5ebe7;
  --primary-hover: #ffffff;
  --primary-contrast: #0d1310;
  --secondary: #8fa098;
  --accent: #5fd9a4;
  --accent-soft: rgba(95, 217, 164, 0.09);
  --text-1: #e4eae6;
  --text-2: #97a39d;
  --text-muted: #5c6762;
  --border: rgba(230, 255, 245, 0.07);
  --border-strong: rgba(230, 255, 245, 0.15);
  --success: #5fd9a4;
  --warning: #e0b45c;
  --error: #f2707f;
  --focus: #5fd9a4;
  --selection-bg: rgba(95, 217, 164, 0.22);
  --overlay: rgba(3, 6, 5, 0.7);
  --glow-1: rgba(95, 217, 164, 0.04);
  --glow-2: rgba(95, 217, 164, 0.02);
  --skeleton-a: #121816;
  --skeleton-b: #181f1c;  --vortex-1: rgba(95,217,164,0.65); --vortex-2: rgba(140,180,220,0.4); --vortex-eye: rgba(95,217,164,0.1); --vortex-star: rgba(240,255,248,0.4); --vortex-arm: rgba(95,217,164,0.045);
  color-scheme: dark;
}

/* Aurora Circuit — deep navy */
:root[data-theme="aurora-circuit"] {
  --bg: #060a13;
  --bg-elev: #090d17;
  --surface: #0c111d;
  --surface-2: #101627;
  --surface-hover: #141c30;
  --primary: #e4eaf4;
  --primary-hover: #ffffff;
  --primary-contrast: #0a0f1a;
  --secondary: #8494b3;
  --accent: #6fd08c;
  --accent-soft: rgba(111, 208, 140, 0.09);
  --text-1: #e2e8f2;
  --text-2: #939fb5;
  --text-muted: #5a6478;
  --border: rgba(225, 235, 255, 0.08);
  --border-strong: rgba(225, 235, 255, 0.16);
  --success: #6fd08c;
  --warning: #e0b45c;
  --error: #f2707f;
  --focus: #6fd08c;
  --selection-bg: rgba(111, 208, 140, 0.22);
  --overlay: rgba(2, 4, 9, 0.7);
  --glow-1: rgba(111, 208, 140, 0.04);
  --glow-2: rgba(111, 208, 140, 0.02);
  --skeleton-a: #0e1524;
  --skeleton-b: #131b2d;  --vortex-1: rgba(111,208,140,0.65); --vortex-2: rgba(124,196,255,0.45); --vortex-eye: rgba(111,208,140,0.1); --vortex-star: rgba(240,250,255,0.45); --vortex-arm: rgba(111,208,140,0.045);
  color-scheme: dark;
}

/* Crimson Drift — smoked charcoal red */
:root[data-theme="crimson-drift"] {
  --bg: #0d0a0b;
  --bg-elev: #110d0e;
  --surface: #151011;
  --surface-2: #1a1415;
  --surface-hover: #201819;
  --primary: #ede4e5;
  --primary-hover: #ffffff;
  --primary-contrast: #170e10;
  --secondary: #a89195;
  --accent: #ef6a7a;
  --accent-soft: rgba(239, 106, 122, 0.1);
  --text-1: #ebe3e4;
  --text-2: #a39396;
  --text-muted: #6b5d60;
  --border: rgba(255, 235, 238, 0.08);
  --border-strong: rgba(255, 235, 238, 0.16);
  --success: #57d99a;
  --warning: #e0b45c;
  --error: #ef6a7a;
  --focus: #ef6a7a;
  --selection-bg: rgba(239, 106, 122, 0.25);
  --overlay: rgba(6, 3, 4, 0.7);
  --glow-1: rgba(239, 106, 122, 0.05);
  --glow-2: rgba(239, 106, 122, 0.03);
  --skeleton-a: #171112;
  --skeleton-b: #1e1617;  --vortex-1: rgba(239,106,122,0.7); --vortex-2: rgba(255,158,122,0.45); --vortex-eye: rgba(239,106,122,0.12); --vortex-star: rgba(255,240,242,0.45); --vortex-arm: rgba(239,106,122,0.07);
  color-scheme: dark;
}

/* 3. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-1);
  background: var(--bg);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  transition: background-color var(--dur-slow) var(--ease-out), color var(--dur-slow) var(--ease-out);
  overflow-x: clip;
}

h1, h2, h3, h4 { line-height: 1.2; margin: 0; letter-spacing: -0.01em; font-weight: 600; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
input, select { font: inherit; color: inherit; }
::selection { background: var(--selection-bg); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  :root { --motion: 0 !important; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: 200;
  background: var(--primary); color: var(--primary-contrast);
  padding: 8px 16px; border-radius: var(--radius); font-weight: 600; font-size: 0.85rem;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 4. Background — the storm ------------------------------------------------ */
.bg-atmosphere { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }

.bg-arm {
  position: absolute; border-radius: 50%;
  background: conic-gradient(from 8deg,
    transparent 0deg, var(--vortex-arm) 38deg, transparent 84deg,
    transparent 170deg, var(--vortex-arm) 215deg, transparent 268deg);
  filter: blur(42px);
  will-change: transform;
  animation: arm-rotate 110s linear infinite;
}
.bg-arm--1 { width: 135vmax; height: 135vmax; left: 50%; top: 44%; translate: -50% -50%; }
.bg-arm--2 {
  width: 92vmax; height: 92vmax; left: 50%; top: 44%; translate: -50% -50%;
  filter: blur(56px); opacity: 1; will-change: transform;
  animation-direction: reverse; animation-duration: 160s;
}
@keyframes arm-rotate { to { rotate: 360deg; } }

#bg-vortex { position: absolute; inset: 0; display: block; }

.bg-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(115% 95% at 50% 44%, transparent 42%, color-mix(in srgb, var(--bg) 50%, transparent) 80%, var(--bg) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 55%, transparent) 0%, transparent 16%);
}

/* 5. Shell ------------------------------------------------------------------ */
.app { flex: 1; display: flex; flex-direction: column; width: 100%; }

.view {
  flex: 1;
  width: 100%;
  max-width: var(--w-shell);
  margin: 0 auto;
  padding: 24px clamp(24px, 4vw, 48px) 64px;
}
.view:focus { outline: none; }

.page { animation: page-in var(--dur-slow) var(--ease-out) both; }
.page-leave { animation: page-out 100ms var(--ease-out) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes page-out { to { opacity: 0; } }

/* topbar — HUD style: online counter left, brand center, icon nav right */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 56px;
  padding: 0 clamp(20px, 3vw, 36px);
  width: 100%;
  background: color-mix(in srgb, var(--bg) 50%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: background-color var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out);
}
.topbar > :first-child { justify-self: start; }
.topbar > :last-child { justify-self: end; }
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-mark { width: 24px; height: 24px; color: var(--text-1); display: block; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 35%, transparent)); }
.brand-name { font-family: var(--font-pixel); font-weight: 400; font-size: 1rem; letter-spacing: 0.02em; color: var(--text-1); }

.nav { display: flex; align-items: center; gap: 4px; justify-self: end; }
.nav .icon-btn { width: 36px; height: 36px; }
.nav .icon-btn[aria-current="page"] { color: var(--text-1); background: var(--surface-2); }

/* 6. Components ------------------------------------------------------------- */

.btn {
  --btn-bg: var(--surface-2); --btn-fg: var(--text-1); --btn-border: var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-border);
  font-weight: 500; font-size: 0.86rem;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
  min-height: 38px; white-space: nowrap; cursor: pointer;
}
.btn:hover { background: var(--surface-hover); border-color: var(--border-strong); color: var(--primary); }
.btn:active { transform: scale(0.98); }
.btn svg { width: 15px; height: 15px; }
.btn--primary { --btn-bg: var(--primary); --btn-fg: var(--primary-contrast); --btn-border: transparent; font-weight: 600; }
.btn--primary:hover { background: var(--primary-hover); color: var(--primary-contrast); }
.btn--ghost { --btn-bg: transparent; }
.btn--danger { color: var(--error); }
.btn--danger:hover { border-color: var(--error); background: color-mix(in srgb, var(--error) 10%, transparent); color: var(--error); }
.btn--lg { padding: 11px 20px; min-height: 42px; font-size: 0.9rem; }
.btn--sm { padding: 5px 12px; min-height: 30px; font-size: 0.78rem; }
.btn[disabled] { opacity: 0.5; pointer-events: none; }
.btn.is-loading { color: transparent !important; pointer-events: none; position: relative; }
.btn.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid var(--text-2); border-top-color: transparent; border-left-color: transparent;
  animation: spin 900ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; color: var(--text-2); flex-shrink: 0;
  transition: color var(--dur-fast), background-color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.icon-btn:hover { color: var(--text-1); background: var(--surface-hover); }
.icon-btn:active { transform: scale(0.92); }
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn[aria-pressed="true"] { color: var(--accent); }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 999px;
  background: transparent; border: 1px solid var(--border-strong);
  color: var(--text-2); font-size: 0.8rem; font-weight: 500;
  transition: all var(--dur-fast) var(--ease-out); min-height: 34px; cursor: pointer;
}
.chip:hover { color: var(--text-1); border-color: var(--text-muted); }
.chip svg { width: 14px; height: 14px; }
.chip[aria-pressed="true"], .chip.is-active {
  background: var(--surface-2); border-color: var(--border-strong); color: var(--text-1);
}
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.field { position: relative; display: flex; align-items: center; }
.field > svg { position: absolute; left: 14px; width: 15px; height: 15px; color: var(--text-muted); pointer-events: none; transition: color var(--dur-fast); }
.field-input {
  width: 100%; padding: 10px 40px 10px 40px; min-height: 42px;
  border-radius: 999px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text-1); font-size: 0.9rem;
  transition: border-color var(--dur-fast), background-color var(--dur-fast);
}
.field-input::placeholder { color: var(--text-muted); }
.field-input:focus-visible { outline: none; border-color: var(--text-muted); background: var(--surface-2); }
.field:focus-within > svg { color: var(--text-2); }
.field-clear {
  position: absolute; right: 6px; display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; color: var(--text-muted);
  transition: color var(--dur-fast), background-color var(--dur-fast);
}
.field-clear:hover { color: var(--text-1); background: var(--surface-hover); }
.field-clear[hidden] { display: none; }
.field-clear svg { width: 13px; height: 13px; }
.field-input[type="search"]::-webkit-search-cancel-button,
.field-input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

.segmented { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); }
.segmented button {
  padding: 5px 12px; border-radius: 8px; color: var(--text-2); font-size: 0.8rem; font-weight: 500;
  transition: all var(--dur-fast) var(--ease-out); min-height: 30px;
}
.segmented button:hover { color: var(--text-1); }
.segmented button[aria-pressed="true"] { background: var(--surface-2); color: var(--text-1); }

.switch { position: relative; display: inline-flex; align-items: center; width: 40px; height: 23px; flex-shrink: 0; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch-track {
  position: absolute; inset: 0; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border-strong);
  transition: background-color var(--dur-med) var(--ease-out), border-color var(--dur-med);
}
.switch-thumb {
  position: absolute; top: 50%; left: 3px; translate: 0 -50%;
  width: 15px; height: 15px; border-radius: 50%; background: var(--text-muted);
  transition: translate var(--dur-med) var(--ease-out), background-color var(--dur-med);
}
.switch input:checked ~ .switch-track { background: var(--accent-soft); border-color: var(--accent); }
.switch input:checked ~ .switch-thumb { translate: 17px -50%; background: var(--accent); }
.switch input:focus-visible ~ .switch-track { outline: 2px solid var(--focus); outline-offset: 2px; }

.range { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--accent) var(--range-fill, 50%), var(--surface-2) var(--range-fill, 50%)); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: var(--text-1); transition: transform var(--dur-fast) var(--ease-out); }
.range:active::-webkit-slider-thumb { transform: scale(1.2); }
.range::-moz-range-track { height: 4px; border-radius: 999px; background: var(--surface-2); }
.range::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--accent); }
.range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--text-1); border: none; }

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }

.section { margin-top: var(--gap-section); }
.section-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.section-title { font-size: 0.95rem; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.section-title svg { width: 15px; height: 15px; color: var(--text-2); }
.section-sub { color: var(--text-muted); font-size: 0.8rem; }
.section-link { margin-left: auto; color: var(--text-muted); font-weight: 500; font-size: 0.8rem; }
.section-link:hover { color: var(--text-1); }

/* game tiles */
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--gap-grid); }
:root[data-density="compact"] .game-grid { grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); }

.game-card {
  position: relative; display: flex; flex-direction: column;
  content-visibility: auto;
  contain-intrinsic-size: auto 168px;
  border-radius: var(--radius); overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  animation: card-in var(--dur-slow) var(--ease-out) both;
  animation-delay: var(--card-delay, 0ms);
}
@keyframes card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.game-card:hover { border-color: var(--border-strong); background: var(--surface-2); transform: translateY(-1px); }
.game-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.game-art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); display: flex; align-items: center; justify-content: center; }
.game-art--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.game-art--tile {
  background:
    radial-gradient(90% 90% at 78% 16%, var(--tile-glow), transparent 64%),
    linear-gradient(155deg, var(--tile-a), var(--tile-b));
  border-bottom: 1px solid var(--border);
}
.tile-spiral {
  position: absolute; width: 120px; height: 120px; opacity: 0.55;
  color: var(--tile-s);
}
.tile-spiral svg { width: 100%; height: 100%; }
.tile-sheen {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.05) 50%, transparent 58%);
}


.game-veil {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--bg) 42%, transparent); opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.game-veil .play-orb {
  width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--primary); color: var(--primary-contrast);
  transform: scale(0.75); transition: transform var(--dur-fast) var(--ease-out);
}
.game-veil .play-orb svg { width: 15px; height: 15px; translate: 1px 0; }
.game-card:hover .game-veil { opacity: 1; }
.game-card:hover .game-veil .play-orb { transform: scale(1); }
.game-card:focus-visible .game-veil { opacity: 1; }

.fav-btn {
  position: absolute; top: 7px; right: 7px; z-index: 2;
  width: 27px; height: 27px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--bg) 55%, transparent); border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--text-2); opacity: 0; transition: all var(--dur-fast) var(--ease-out);
}
.game-card:hover .fav-btn, .fav-btn:focus-visible, .fav-btn[aria-pressed="true"] { opacity: 1; }
.fav-btn svg { width: 13px; height: 13px; transition: transform var(--dur-fast) var(--ease-out); }
.fav-btn:hover { color: var(--accent); transform: scale(1.05); }
.fav-btn[aria-pressed="true"] { color: var(--accent); }
.fav-btn[aria-pressed="true"] svg { fill: currentColor; }

.game-body { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 11px; min-width: 0; }
.game-title { font-weight: 500; font-size: 0.84rem; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; color: var(--text-1); }
.game-meta { display: flex; align-items: center; gap: 6px; font-size: 0.68rem; color: var(--text-muted); white-space: nowrap; min-width: 0; }
.game-meta > span:first-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.game-meta .dot { width: 2px; height: 2px; border-radius: 50%; background: currentColor; opacity: 0.6; flex-shrink: 0; }

/* skeleton */
.skeleton { border-radius: var(--radius); overflow: hidden; background: var(--surface); border: 1px solid var(--border); }
.skeleton-art { aspect-ratio: 16 / 10; }
.skeleton-line { height: 11px; margin: 12px; border-radius: 6px; width: 68%; }
.skeleton-art, .skeleton-line {
  background: linear-gradient(100deg, var(--skeleton-a) 40%, var(--skeleton-b) 50%, var(--skeleton-a) 60%);
  background-size: 200% 100%; animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* empty state */
.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 56px 24px; border-radius: var(--radius-lg); border: 1px dashed var(--border-strong);
  animation: page-in var(--dur-slow) var(--ease-out);
}
.empty-orb {
  width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--text-2); margin-bottom: 14px;
}
.empty-orb svg { width: 20px; height: 20px; }
.empty h3 { font-size: 0.98rem; margin-bottom: 5px; }
.empty p { color: var(--text-2); font-size: 0.85rem; max-width: 44ch; margin-bottom: 16px; }

/* toasts */
.toast-stack { position: fixed; z-index: 130; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 10px; pointer-events: auto;
  padding: 10px 16px 10px 12px; border-radius: 12px; max-width: 340px;
  background: var(--bg-elev); border: 1px solid var(--border-strong);
  font-size: 0.82rem; font-weight: 500;
  animation: toast-in var(--dur-med) var(--ease-out) both;
}
.toast.leaving { animation: toast-out var(--dur-fast) var(--ease-out) both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }
.toast-icon { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.toast-icon svg { width: 14px; height: 14px; }
.toast--ok .toast-icon { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.toast--info .toast-icon { background: var(--surface-2); color: var(--text-2); }
.toast--warn .toast-icon { background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--warning); }

/* modal */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: var(--overlay); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  animation: fade-in var(--dur-fast) var(--ease-out);
}
.modal-backdrop.leaving { animation: fade-out var(--dur-fast) var(--ease-out) both; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
.modal {
  width: min(400px, 100%); padding: 22px; border-radius: var(--radius-lg);
  background: var(--bg-elev); border: 1px solid var(--border-strong);
  animation: modal-in var(--dur-med) var(--ease-out);
}
.modal-backdrop.leaving .modal { animation: modal-out var(--dur-fast) var(--ease-out) both; }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
@keyframes modal-out { to { opacity: 0; transform: translateY(8px); } }
.modal h3 { font-size: 1rem; margin-bottom: 7px; }
.modal p { color: var(--text-2); font-size: 0.85rem; margin-bottom: 20px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

.hurlo-spin { width: 34px; height: 34px; color: var(--text-2); animation: spin 1.1s linear infinite; }

@media (max-width: 860px) {
  :root { --gap-section: 38px; }
  .game-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* --------------------------------------------------------------------------
   7. Corner HUD (mizu-style)
   -------------------------------------------------------------------------- */
.hud-bl { position: fixed; left: 18px; bottom: 16px; z-index: 60; }
.hud-br { position: fixed; right: 18px; bottom: 16px; z-index: 60; }
.hud-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px; font-size: 0.74rem; font-weight: 600;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  border: 1px solid var(--border-strong); color: var(--text-2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: color var(--dur-fast), border-color var(--dur-fast);
  cursor: pointer; font-family: var(--font-body);
}
.hud-pill:hover { color: var(--text-1); border-color: var(--text-muted); }
.hud-pill svg { width: 13px; height: 13px; }
.hud-clock { font-family: var(--font-pixel); font-size: 0.8rem; color: var(--text-2); letter-spacing: 0.05em; }
.hud-bc { position: fixed; left: 50%; bottom: 16px; translate: -50% 0; z-index: 60; display: flex; gap: 8px; }
a.hud-pill { text-decoration: none; }
a.hud-pill:hover { color: var(--text-1); }
.about-version { margin-top: 12px; margin-bottom: -6px; font-family: var(--font-pixel); font-size: 0.72rem; color: var(--text-muted); letter-spacing: 0.06em; }
body.player-active .hud-bl, body.player-active .hud-br { display: none; }

@media (max-width: 900px) {
  .hud-bl, .hud-br { display: none; }
}

/* --------------------------------------------------------------------------
   8. Custom cursor — hurricane ring & eye
   -------------------------------------------------------------------------- */
html {
  cursor: url("../img/cursor.svg") 12 12, auto;
}
a, button, [role="button"], label.switch, .chip, .game-card, .fs-folder, .fs-back,
.theme-card, .icon-btn, input[type="checkbox"], input[type="range"], select, summary {
  cursor: url("../img/cursor-pointer.svg") 12 12, pointer;
}
input[type="text"], input[type="search"], input[type="url"], input[type="number"],
input[type="email"], input[type="password"], textarea {
  cursor: text;
}