/* ============================================================
 * themes.css — Cyber (霓虹網格) high-tech math theme
 *
 * Single theme: body.theme-cyber
 * Loaded AFTER styles.css so we win the cascade for shared selectors
 * (.btn, .card, .chip, .topbar, .stat, .key, etc.).
 * ============================================================ */

/* ---------- shared scaffolding for body bg layers ---------- */
body {
  position: relative;
}
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-bg);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out);
}

/* ============================================================
 *  THEME · CYBER  (default high-tech math feel)
 * ============================================================ */
body.theme-cyber {
  background:
    radial-gradient(ellipse at top, #0e1430 0%, #050813 60%, #02030a 100%) fixed;
  color: var(--ui-text);
  --ui-bg: #050813;
  --ui-surface: rgba(15, 26, 51, 0.72);
  --ui-text: #e6f1ff;
  --ui-accent: #22d3ee;
  --ui-accent-2: #a78bfa;
}

/* ::before = animated grid + faint math symbols backdrop */
body.theme-cyber::before {
  background-image:
    linear-gradient(rgba(34, 211, 238, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.07) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px;
  background-position: -1px -1px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  opacity: 1;
}
/* ::after = soft accent glows top-left + bottom-right */
body.theme-cyber::after {
  background:
    radial-gradient(circle at 15% 20%, rgba(167, 139, 250, 0.18), transparent 40%),
    radial-gradient(circle at 85% 85%, rgba(34, 211, 238, 0.18), transparent 40%);
  opacity: 1;
}

/* Math-symbol backdrop overlay (additional decorative layer) */
.ui-math-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-bg);
  overflow: hidden;
  opacity: 0.06;
  font-family: "Cambria Math", "Latin Modern Math", "STIX Two Math", serif;
  color: var(--ui-accent);
  user-select: none;
}
.ui-math-bg span {
  position: absolute;
  font-size: clamp(40px, 12vw, 120px);
  font-weight: 200;
  letter-spacing: -0.05em;
  white-space: nowrap;
  filter: drop-shadow(0 0 12px rgba(34, 211, 238, 0.4));
}

/* ---------- Cards & panels ---------- */
body.theme-cyber .ui-card,
body.theme-cyber .card,
body.theme-cyber .today-stats,
body.theme-cyber .hud .stat,
body.theme-cyber .scoreGrid > .stat {
  border: 1px solid rgba(34, 211, 238, 0.22);
  background: linear-gradient(180deg, rgba(15, 26, 51, 0.78), rgba(10, 16, 36, 0.82));
  box-shadow:
    0 0 24px rgba(34, 211, 238, 0.08),
    inset 0 0 16px rgba(34, 211, 238, 0.04),
    0 8px 28px rgba(0, 0, 0, 0.45);
}

/* corner brackets on .card (subtle HUD effect) */
body.theme-cyber .card {
  position: relative;
}
body.theme-cyber .card::before,
body.theme-cyber .card::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--ui-accent);
  pointer-events: none;
  opacity: 0.55;
}
body.theme-cyber .card::before {
  top: -1px; left: -1px;
  border-right: none; border-bottom: none;
  border-top-left-radius: 6px;
}
body.theme-cyber .card::after {
  bottom: -1px; right: -1px;
  border-left: none; border-top: none;
  border-bottom-right-radius: 6px;
}

/* ---------- Topbar ---------- */
body.theme-cyber .topbar {
  border-bottom: 1px solid rgba(34, 211, 238, 0.25);
  background: linear-gradient(180deg, rgba(15, 26, 51, 0.5), transparent);
  padding: 12px 8px 14px;
  position: relative;
}
body.theme-cyber .topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--ui-accent), var(--ui-accent-2), transparent);
  opacity: 0.6;
}

/* ---------- Tabs ---------- */
body.theme-cyber .tab {
  background: rgba(15, 26, 51, 0.6);
  border: 1px solid rgba(34, 211, 238, 0.18);
  color: var(--ui-text-soft);
  border-radius: var(--r-2);
  letter-spacing: var(--ls-tech);
  transition: all var(--dur-2) var(--ease-out);
}
body.theme-cyber .tab:hover {
  border-color: rgba(34, 211, 238, 0.45);
  color: var(--ui-text);
}
body.theme-cyber .tab.active {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.25), rgba(167, 139, 250, 0.18));
  border-color: var(--ui-accent);
  color: var(--ui-text);
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.4);
  text-shadow: 0 0 6px rgba(34, 211, 238, 0.6);
}

/* ---------- Chips ---------- */
body.theme-cyber .chip {
  background: rgba(15, 26, 51, 0.7);
  border: 1px solid rgba(34, 211, 238, 0.22);
  color: var(--ui-text-soft);
  border-radius: var(--r-2);
  letter-spacing: 0.02em;
  transition: all var(--dur-2) var(--ease-out);
}
body.theme-cyber .chip:hover {
  border-color: rgba(34, 211, 238, 0.5);
  color: var(--ui-text);
}
body.theme-cyber .chip.active {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.30), rgba(167, 139, 250, 0.22));
  border-color: var(--ui-accent);
  color: var(--ui-text);
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.45), inset 0 0 8px rgba(34, 211, 238, 0.15);
  text-shadow: 0 0 4px rgba(34, 211, 238, 0.6);
}

/* ---------- Buttons ---------- */
body.theme-cyber .btn,
body.theme-cyber #startBtn,
body.theme-cyber .ui-btn.is-primary {
  background: linear-gradient(135deg, #22d3ee, #6366f1);
  border: 1px solid rgba(125, 211, 252, 0.45);
  color: #fff;
  border-radius: var(--r-2);
  box-shadow:
    0 0 18px rgba(34, 211, 238, 0.45),
    0 6px 24px rgba(99, 102, 241, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
  letter-spacing: var(--ls-tech);
  font-weight: 700;
  position: relative;
  overflow: hidden;
}
body.theme-cyber .btn::after,
body.theme-cyber #startBtn::after {
  content: "";
  position: absolute;
  inset: -100% -50%;
  background: linear-gradient(115deg,
    transparent 35%,
    rgba(255, 255, 255, 0.25) 45%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0.25) 55%,
    transparent 65%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
}
body.theme-cyber .btn:hover::after,
body.theme-cyber #startBtn:hover::after {
  transform: translateX(100%);
}
body.theme-cyber .btn.alt,
body.theme-cyber .btn.small.alt {
  background: rgba(15, 26, 51, 0.7);
  border: 1px solid rgba(34, 211, 238, 0.4);
  color: var(--ui-accent);
  box-shadow:
    0 0 8px rgba(34, 211, 238, 0.2),
    inset 0 0 6px rgba(34, 211, 238, 0.08);
  text-shadow: 0 0 4px rgba(34, 211, 238, 0.45);
}

/* ---------- Stats / numbers ---------- */
body.theme-cyber .stat .k,
body.theme-cyber .ts-label {
  color: var(--ui-muted);
  letter-spacing: var(--ls-tech);
  text-transform: uppercase;
  font-size: var(--fs-xs);
}
body.theme-cyber .stat .v,
body.theme-cyber .ts-val,
body.theme-cyber .ui-stat-tile .v,
body.theme-cyber #qBox,
body.theme-cyber .question {
  font-family: var(--font-mono);
  font-feature-settings: var(--num-feat);
  letter-spacing: var(--ls-tight);
  text-shadow: 0 0 6px var(--ui-accent), 0 0 14px rgba(34, 211, 238, 0.45);
}
body.theme-cyber .stat.right .v,
body.theme-cyber .stat.right .v { color: var(--ui-ok); text-shadow: 0 0 6px var(--ui-ok), 0 0 12px rgba(52, 211, 153, 0.5); }
body.theme-cyber .stat.wrong .v { color: var(--ui-bad); text-shadow: 0 0 6px var(--ui-bad), 0 0 12px rgba(248, 113, 113, 0.5); }
body.theme-cyber .stat.streak .v { color: var(--ui-warn); text-shadow: 0 0 6px var(--ui-warn), 0 0 12px rgba(251, 191, 36, 0.5); }
body.theme-cyber .stat.time .v { color: var(--ui-accent); }

/* ---------- Question (the big math expression) ---------- */
body.theme-cyber .question,
body.theme-cyber #qBox,
body.theme-cyber #battleQBox {
  font-size: var(--fs-display);
  font-weight: 300;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, #ffffff 0%, #a5f3fc 60%, #67e8f9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(34, 211, 238, 0.55))
          drop-shadow(0 0 32px rgba(167, 139, 250, 0.25));
}

/* ---------- Keypad ---------- */
body.theme-cyber .keypad {
  gap: 8px;
}
body.theme-cyber .key {
  background: linear-gradient(180deg, rgba(28, 48, 88, 0.85), rgba(15, 26, 51, 0.95));
  border: 1px solid rgba(34, 211, 238, 0.28);
  color: var(--ui-text);
  border-radius: var(--r-2);
  font-family: var(--font-mono);
  font-feature-settings: var(--num-feat);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 0 6px rgba(125, 211, 252, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -2px 0 rgba(0, 0, 0, 0.35),
    0 0 12px rgba(34, 211, 238, 0.10);
  transition: all var(--dur-1) var(--ease-out);
}
body.theme-cyber .key:active,
body.theme-cyber .key.is-pressed {
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.35), rgba(99, 102, 241, 0.30));
  border-color: var(--ui-accent);
  box-shadow:
    inset 0 0 12px rgba(34, 211, 238, 0.5),
    0 0 18px rgba(34, 211, 238, 0.55);
  transform: scale(0.96);
}
body.theme-cyber .key.submit {
  background: linear-gradient(135deg, #22d3ee, #6366f1);
  border-color: rgba(125, 211, 252, 0.6);
  color: #fff;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
  box-shadow:
    0 0 18px rgba(34, 211, 238, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
body.theme-cyber .key.clear {
  border-color: rgba(248, 113, 113, 0.4);
  color: #fca5a5;
  text-shadow: 0 0 6px rgba(248, 113, 113, 0.5);
}

/* ---------- Headings ---------- */
body.theme-cyber h1 {
  background: linear-gradient(135deg, #ffffff 0%, #67e8f9 50%, #a78bfa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  letter-spacing: 0.02em;
  filter:
    drop-shadow(0 0 8px rgba(167, 139, 250, 0.55))
    drop-shadow(0 0 18px rgba(34, 211, 238, 0.35));
}
body.theme-cyber .sub {
  color: var(--ui-text-soft);
  letter-spacing: var(--ls-tech);
}

/* ---------- Progress bar ---------- */
body.theme-cyber .progress {
  background: rgba(15, 26, 51, 0.6);
  border: 1px solid rgba(34, 211, 238, 0.2);
  border-radius: var(--r-pill);
  overflow: hidden;
  position: relative;
}
body.theme-cyber .progress > div {
  background: linear-gradient(90deg, #22d3ee, #a78bfa, #22d3ee);
  background-size: 200% 100%;
  animation: ui-prog-shimmer 2.5s linear infinite;
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.6);
}
@keyframes ui-prog-shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ---------- today-stats item icons ---------- */
body.theme-cyber .ts-item {
  position: relative;
}
body.theme-cyber .ts-icon {
  filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.6));
}

/* ---------- result screen hero ---------- */
body.theme-cyber .result-big .emoji {
  filter: drop-shadow(0 0 14px rgba(34, 211, 238, 0.6))
          drop-shadow(0 0 28px rgba(167, 139, 250, 0.4));
}
body.theme-cyber .result-big .title {
  background: linear-gradient(135deg, #ffffff, #67e8f9, #a78bfa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.5));
  letter-spacing: 0.04em;
}

/* ---------- review chips after result ---------- */
body.theme-cyber .review .it {
  background: rgba(15, 26, 51, 0.7);
  border: 1px solid rgba(34, 211, 238, 0.2);
}
body.theme-cyber .review .it.right { border-color: rgba(52, 211, 153, 0.4); }
body.theme-cyber .review .it.wrong { border-color: rgba(248, 113, 113, 0.4); }

/* ---------- online badge ---------- */
body.theme-cyber #onlineBadge {
  background: rgba(15, 26, 51, 0.7);
  border: 1px solid rgba(34, 211, 238, 0.3);
  color: var(--ui-text-soft);
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.15);
}
body.theme-cyber #onlineBadge .dot {
  box-shadow: 0 0 8px currentColor;
}

/* ---------- countdown overlay ---------- */
body.theme-cyber .countdown-number {
  font-family: var(--font-mono);
  background: linear-gradient(135deg, #ffffff, #67e8f9, #a78bfa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 24px rgba(34, 211, 238, 0.7));
}

/* ---------- battle hud / vs label ---------- */
body.theme-cyber .battle-timer-bar .fill {
  background: linear-gradient(90deg, #22d3ee, #a78bfa);
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.5);
}

/* ---------- Mobile-first focus ring (visible on dark) ---------- */
body.theme-cyber :focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.2);
}

/* ============================================================
 *  Closet cosmetic themes
 *  These are user rewards, separate from the base UI theme name.
 * ============================================================ */
body.cosmetic-theme-sakura {
  --bg: #1a0b1f;
  --panel: #2c1433;
  --panel2: #3d1d47;
  --accent: #f472b6;
  --accent2: #fbbf24;
  --ui-bg: #1a0b1f;
  --ui-surface: rgba(44, 20, 51, 0.78);
  --ui-text: #fff1f8;
  --ui-text-soft: #fbcfe8;
  --ui-muted: #d8b4c8;
  --ui-accent: #f472b6;
  --ui-accent-2: #fbbf24;
  --ui-border: rgba(244, 114, 182, 0.24);
  --cosmetic-bg: #160817;
  --cosmetic-bg-2: #2c1433;
  --cosmetic-surface-rgb: 44, 20, 51;
  --cosmetic-surface-2-rgb: 61, 29, 71;
  --cosmetic-accent-rgb: 244, 114, 182;
  --cosmetic-accent-2-rgb: 251, 191, 36;
}
body.cosmetic-theme-ocean {
  --bg: #07223d;
  --panel: #0f3460;
  --panel2: #154672;
  --accent: #60a5fa;
  --accent2: #2dd4bf;
  --ui-bg: #07223d;
  --ui-surface: rgba(15, 52, 96, 0.78);
  --ui-text: #e0f2fe;
  --ui-text-soft: #bae6fd;
  --ui-muted: #8fc7df;
  --ui-accent: #60a5fa;
  --ui-accent-2: #2dd4bf;
  --ui-border: rgba(96, 165, 250, 0.24);
  --cosmetic-bg: #041827;
  --cosmetic-bg-2: #0f3460;
  --cosmetic-surface-rgb: 15, 52, 96;
  --cosmetic-surface-2-rgb: 21, 70, 114;
  --cosmetic-accent-rgb: 96, 165, 250;
  --cosmetic-accent-2-rgb: 45, 212, 191;
}
body.cosmetic-theme-forest {
  --bg: #0a1f10;
  --panel: #14301a;
  --panel2: #1d4324;
  --accent: #4ade80;
  --accent2: #fbbf24;
  --ui-bg: #0a1f10;
  --ui-surface: rgba(20, 48, 26, 0.80);
  --ui-text: #ecfdf5;
  --ui-text-soft: #bbf7d0;
  --ui-muted: #9bc8a7;
  --ui-accent: #4ade80;
  --ui-accent-2: #fbbf24;
  --ui-border: rgba(74, 222, 128, 0.24);
  --cosmetic-bg: #07170c;
  --cosmetic-bg-2: #14301a;
  --cosmetic-surface-rgb: 20, 48, 26;
  --cosmetic-surface-2-rgb: 29, 67, 36;
  --cosmetic-accent-rgb: 74, 222, 128;
  --cosmetic-accent-2-rgb: 251, 191, 36;
}
body.cosmetic-theme-retro {
  --bg: #1c0a2a;
  --panel: #2d1141;
  --panel2: #3f1d58;
  --accent: #c084fc;
  --accent2: #fbbf24;
  --ui-bg: #1c0a2a;
  --ui-surface: rgba(45, 17, 65, 0.78);
  --ui-text: #f5f3ff;
  --ui-text-soft: #ddd6fe;
  --ui-muted: #c4b5fd;
  --ui-accent: #c084fc;
  --ui-accent-2: #fbbf24;
  --ui-border: rgba(192, 132, 252, 0.24);
  --cosmetic-bg: #150820;
  --cosmetic-bg-2: #2d1141;
  --cosmetic-surface-rgb: 45, 17, 65;
  --cosmetic-surface-2-rgb: 63, 29, 88;
  --cosmetic-accent-rgb: 192, 132, 252;
  --cosmetic-accent-2-rgb: 251, 191, 36;
}
body.cosmetic-theme-aurora {
  --bg: #081321;
  --panel: #0d2438;
  --panel2: #11334d;
  --accent: #22d3ee;
  --accent2: #a78bfa;
  --ui-bg: #081321;
  --ui-surface: rgba(13, 36, 56, 0.78);
  --ui-text: #ecfeff;
  --ui-text-soft: #cffafe;
  --ui-muted: #9ad5dd;
  --ui-accent: #22d3ee;
  --ui-accent-2: #a78bfa;
  --ui-border: rgba(34, 211, 238, 0.24);
  --cosmetic-bg: #06111d;
  --cosmetic-bg-2: #0d2438;
  --cosmetic-surface-rgb: 13, 36, 56;
  --cosmetic-surface-2-rgb: 17, 51, 77;
  --cosmetic-accent-rgb: 34, 211, 238;
  --cosmetic-accent-2-rgb: 167, 139, 250;
}
body.cosmetic-theme-citrus {
  --bg: #101807;
  --panel: #1f2f0f;
  --panel2: #304413;
  --accent: #bef264;
  --accent2: #facc15;
  --ui-bg: #101807;
  --ui-surface: rgba(31, 47, 15, 0.80);
  --ui-text: #f7fee7;
  --ui-text-soft: #d9f99d;
  --ui-muted: #b7cc8b;
  --ui-accent: #bef264;
  --ui-accent-2: #facc15;
  --ui-border: rgba(190, 242, 100, 0.24);
  --cosmetic-bg: #0b1205;
  --cosmetic-bg-2: #1f2f0f;
  --cosmetic-surface-rgb: 31, 47, 15;
  --cosmetic-surface-2-rgb: 48, 68, 19;
  --cosmetic-accent-rgb: 190, 242, 100;
  --cosmetic-accent-2-rgb: 250, 204, 21;
}
body.cosmetic-theme-berry {
  --bg: #1d1020;
  --panel: #331a31;
  --panel2: #17364a;
  --accent: #fb7185;
  --accent2: #38bdf8;
  --ui-bg: #1d1020;
  --ui-surface: rgba(51, 26, 49, 0.78);
  --ui-text: #fff1f5;
  --ui-text-soft: #fecdd3;
  --ui-muted: #c9b0d0;
  --ui-accent: #fb7185;
  --ui-accent-2: #38bdf8;
  --ui-border: rgba(251, 113, 133, 0.24);
  --cosmetic-bg: #130914;
  --cosmetic-bg-2: #331a31;
  --cosmetic-surface-rgb: 51, 26, 49;
  --cosmetic-surface-2-rgb: 23, 54, 74;
  --cosmetic-accent-rgb: 251, 113, 133;
  --cosmetic-accent-2-rgb: 56, 189, 248;
}
body.cosmetic-theme-blacknova {
  --bg: #020617;
  --panel: #111827;
  --panel2: #3b0764;
  --accent: #ff2bd6;
  --accent2: #22d3ee;
  --ui-bg: #020617;
  --ui-surface: rgba(17, 24, 39, 0.84);
  --ui-text: #f8fafc;
  --ui-text-soft: #e0f2fe;
  --ui-muted: #cbd5e1;
  --ui-accent: #ff2bd6;
  --ui-accent-2: #22d3ee;
  --ui-border: rgba(255, 43, 214, 0.30);
  --cosmetic-bg: #01020a;
  --cosmetic-bg-2: #1e0638;
  --cosmetic-surface-rgb: 17, 24, 39;
  --cosmetic-surface-2-rgb: 59, 7, 100;
  --cosmetic-accent-rgb: 255, 43, 214;
  --cosmetic-accent-2-rgb: 34, 211, 238;
}
body.theme-cyber[class*="cosmetic-theme-"] {
  background:
    radial-gradient(ellipse at top, rgba(var(--cosmetic-accent-rgb), 0.22) 0%, transparent 46%),
    linear-gradient(180deg, var(--cosmetic-bg-2), var(--cosmetic-bg) 68%, #02030a) fixed;
  color: var(--ui-text);
}
body.theme-cyber[class*="cosmetic-theme-"]::before {
  background-image:
    linear-gradient(rgba(var(--cosmetic-accent-rgb), 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--cosmetic-accent-rgb), 0.08) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px;
  background-position: -1px -1px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 82%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 82%);
  opacity: 1;
}
body.theme-cyber[class*="cosmetic-theme-"]::after {
  background:
    radial-gradient(circle at 15% 20%, rgba(var(--cosmetic-accent-2-rgb), 0.20), transparent 40%),
    radial-gradient(circle at 85% 85%, rgba(var(--cosmetic-accent-rgb), 0.22), transparent 42%);
  opacity: 1;
}
body.theme-cyber[class*="cosmetic-theme-"] .ui-card,
body.theme-cyber[class*="cosmetic-theme-"] .card,
body.theme-cyber[class*="cosmetic-theme-"] .today-stats,
body.theme-cyber[class*="cosmetic-theme-"] .hud .stat,
body.theme-cyber[class*="cosmetic-theme-"] .scoreGrid > .stat {
  border-color: rgba(var(--cosmetic-accent-rgb), 0.28);
  background: linear-gradient(180deg, rgba(var(--cosmetic-surface-rgb), 0.80), rgba(var(--cosmetic-surface-2-rgb), 0.76));
  box-shadow:
    0 0 24px rgba(var(--cosmetic-accent-rgb), 0.10),
    inset 0 0 16px rgba(var(--cosmetic-accent-rgb), 0.06),
    0 8px 28px rgba(0, 0, 0, 0.45);
}
body.theme-cyber[class*="cosmetic-theme-"] .card::before,
body.theme-cyber[class*="cosmetic-theme-"] .card::after {
  border-color: var(--ui-accent);
}
body.theme-cyber[class*="cosmetic-theme-"] .topbar {
  border-bottom-color: rgba(var(--cosmetic-accent-rgb), 0.25);
  background: linear-gradient(180deg, rgba(var(--cosmetic-surface-rgb), 0.54), transparent);
}
body.theme-cyber[class*="cosmetic-theme-"] .topbar::after {
  background: linear-gradient(90deg, transparent, var(--ui-accent), var(--ui-accent-2), transparent);
}
body.theme-cyber[class*="cosmetic-theme-"] .tab,
body.theme-cyber[class*="cosmetic-theme-"] .chip,
body.theme-cyber[class*="cosmetic-theme-"] .key,
body.theme-cyber[class*="cosmetic-theme-"] .review .it {
  border-color: rgba(var(--cosmetic-accent-rgb), 0.22);
  background: rgba(var(--cosmetic-surface-rgb), 0.68);
}
body.theme-cyber[class*="cosmetic-theme-"] .tab:hover,
body.theme-cyber[class*="cosmetic-theme-"] .chip:hover {
  border-color: rgba(var(--cosmetic-accent-rgb), 0.50);
}
body.theme-cyber[class*="cosmetic-theme-"] .tab.active,
body.theme-cyber[class*="cosmetic-theme-"] .chip.active,
body.theme-cyber[class*="cosmetic-theme-"] .key:active,
body.theme-cyber[class*="cosmetic-theme-"] .key.is-pressed {
  background: linear-gradient(135deg, rgba(var(--cosmetic-accent-rgb), 0.30), rgba(var(--cosmetic-accent-2-rgb), 0.22));
  border-color: var(--ui-accent);
  box-shadow: 0 0 12px rgba(var(--cosmetic-accent-rgb), 0.42), inset 0 0 8px rgba(var(--cosmetic-accent-rgb), 0.14);
  text-shadow: 0 0 6px rgba(var(--cosmetic-accent-rgb), 0.55);
}
body.theme-cyber[class*="cosmetic-theme-"] .btn,
body.theme-cyber[class*="cosmetic-theme-"] #startBtn,
body.theme-cyber[class*="cosmetic-theme-"] .ui-btn.is-primary,
body.theme-cyber[class*="cosmetic-theme-"] .key.submit {
  background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent-2));
  border-color: rgba(var(--cosmetic-accent-rgb), 0.48);
  box-shadow:
    0 0 18px rgba(var(--cosmetic-accent-rgb), 0.42),
    0 6px 24px rgba(var(--cosmetic-accent-2-rgb), 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
body.theme-cyber[class*="cosmetic-theme-"] .btn.alt,
body.theme-cyber[class*="cosmetic-theme-"] .btn.small.alt {
  background: rgba(var(--cosmetic-surface-rgb), 0.70);
  border-color: rgba(var(--cosmetic-accent-rgb), 0.40);
  color: var(--ui-accent);
}
body.theme-cyber[class*="cosmetic-theme-"] h1,
body.theme-cyber[class*="cosmetic-theme-"] .result-big .title,
body.theme-cyber[class*="cosmetic-theme-"] .countdown-number {
  background: linear-gradient(135deg, #ffffff 0%, var(--ui-accent) 52%, var(--ui-accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body.theme-cyber[class*="cosmetic-theme-"] .question,
body.theme-cyber[class*="cosmetic-theme-"] #qBox,
body.theme-cyber[class*="cosmetic-theme-"] #battleQBox {
  background: linear-gradient(180deg, #ffffff 0%, var(--ui-accent) 62%, var(--ui-accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 0 18px rgba(var(--cosmetic-accent-rgb), 0.52))
    drop-shadow(0 0 32px rgba(var(--cosmetic-accent-2-rgb), 0.24));
}
body.theme-cyber[class*="cosmetic-theme-"] .progress > div,
body.theme-cyber[class*="cosmetic-theme-"] .battle-timer-bar .fill {
  background: linear-gradient(90deg, var(--ui-accent), var(--ui-accent-2), var(--ui-accent));
  background-size: 200% 100%;
}
body.theme-cyber[class*="cosmetic-theme-"] :focus-visible {
  outline-color: var(--ui-accent);
  box-shadow: 0 0 0 4px rgba(var(--cosmetic-accent-rgb), 0.20);
}

/* ============================================================
 *  Theme-agnostic decorations kept here for cohesion
 *  (no longer have a picker — single theme only)
 * ============================================================ */
.ui-theme-picker,
.ui-theme-toggle { display: none !important; }