/* ════════════════════════════════════════════════════════════
   LearningForge — Cosmetics
   Outlines (Level-basiert) + Themes (Note-basiert)
   ════════════════════════════════════════════════════════════ */

/* ── Outline-Stufen ─────────────────────────────────────── */

/* Bronze (Lv 3) — schlichte warme Umrandung */
.outline-bronze {
  box-shadow:
    0 0 0 2px var(--bg-card),
    0 0 0 3px #cd7f32;
}

/* Silver (Lv 8) — kühle Umrandung mit leichtem Glow */
.outline-silver {
  box-shadow:
    0 0 0 2px var(--bg-card),
    0 0 0 3px #cbd5e1,
    0 0 6px rgba(203,213,225,0.5);
}

/* Gold (Lv 15) — pulsiert sanft */
.outline-gold {
  box-shadow:
    0 0 0 2px var(--bg-card),
    0 0 0 3px #fbbf24,
    0 0 10px rgba(251,191,36,0.5);
  animation: outline-pulse 4s ease-in-out infinite;
}
@keyframes outline-pulse {
  0%,100% { box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 3px #fbbf24, 0 0 8px rgba(251,191,36,0.4); }
  50%     { box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 3px #fcd34d, 0 0 14px rgba(251,191,36,0.7); }
}

/* Emerald (Lv 22) — grüner Glow */
.outline-emerald {
  box-shadow:
    0 0 0 2px var(--bg-card),
    0 0 0 3px #10b981,
    0 0 12px rgba(16,185,129,0.5);
  animation: outline-pulse-emerald 3.5s ease-in-out infinite;
}
@keyframes outline-pulse-emerald {
  0%,100% { box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 3px #10b981, 0 0 10px rgba(16,185,129,0.5); }
  50%     { box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 3px #34d399, 0 0 18px rgba(16,185,129,0.8); }
}

/* Sapphire (Lv 30) — tiefblau mit Welleneffekt */
.outline-sapphire {
  box-shadow:
    0 0 0 2px var(--bg-card),
    0 0 0 3px #2563eb,
    0 0 14px rgba(37,99,235,0.6);
  animation: outline-pulse-sapphire 3s ease-in-out infinite;
}
@keyframes outline-pulse-sapphire {
  0%,100% { box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 3px #2563eb, 0 0 12px rgba(37,99,235,0.55); }
  50%     { box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 3px #60a5fa, 0 0 22px rgba(37,99,235,0.85); }
}

/* Ruby (Lv 40) — Rot, intensiver Pulse */
.outline-ruby {
  box-shadow:
    0 0 0 2px var(--bg-card),
    0 0 0 3px #dc2626,
    0 0 16px rgba(220,38,38,0.65);
  animation: outline-pulse-ruby 2.5s ease-in-out infinite;
}
@keyframes outline-pulse-ruby {
  0%,100% { box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 3px #dc2626, 0 0 14px rgba(220,38,38,0.6); }
  50%     { box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px #f87171, 0 0 26px rgba(220,38,38,0.9); }
}

/* Amethyst (Lv 52) — lila mit Doppelring */
.outline-amethyst {
  box-shadow:
    0 0 0 2px var(--bg-card),
    0 0 0 3px #a855f7,
    0 0 0 5px rgba(168,85,247,0.3),
    0 0 18px rgba(168,85,247,0.7);
  animation: outline-pulse-amethyst 2.8s ease-in-out infinite;
}
@keyframes outline-pulse-amethyst {
  0%,100% { box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 3px #a855f7, 0 0 0 5px rgba(168,85,247,0.3), 0 0 16px rgba(168,85,247,0.6); }
  50%     { box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 3px #c084fc, 0 0 0 6px rgba(192,132,252,0.4), 0 0 28px rgba(168,85,247,0.9); }
}

/* Diamond (Lv 65) — heller Glanz, animierter Border */
.outline-diamond {
  position: relative;
  box-shadow:
    0 0 0 2px var(--bg-card),
    0 0 0 3px #e0f2fe,
    0 0 0 5px rgba(125,211,252,0.5),
    0 0 22px rgba(125,211,252,0.8);
  animation: outline-pulse-diamond 2.2s ease-in-out infinite;
}
@keyframes outline-pulse-diamond {
  0%,100% {
    box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 3px #e0f2fe, 0 0 0 5px rgba(125,211,252,0.5), 0 0 18px rgba(125,211,252,0.7);
  }
  50% {
    box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px #fff, 0 0 0 6px rgba(56,189,248,0.6), 0 0 32px rgba(125,211,252,1);
  }
}

/* Rainbow (Lv 80) — rotierender Conic-Gradient */
.outline-rainbow {
  position: relative;
  background: var(--bg-card);
}
.outline-rainbow::before {
  content: '';
  position: absolute; inset: -5px;
  border-radius: 50%; z-index: -1;
  background: conic-gradient(
    from 0deg,
    #ef4444, #f59e0b, #fbbf24, #10b981,
    #06b6d4, #3b82f6, #8b5cf6, #ec4899, #ef4444);
  filter: blur(2px);
  animation: outline-rainbow-spin 4s linear infinite;
}
@keyframes outline-rainbow-spin {
  to { transform: rotate(360deg); }
}

/* Cosmic (Lv 100) — animierter Universumseffekt mit Sternen */
.outline-cosmic {
  position: relative;
  background: var(--bg-card);
}
.outline-cosmic::before {
  content: '';
  position: absolute; inset: -8px;
  border-radius: 50%; z-index: -2;
  background:
    radial-gradient(circle at 20% 30%, #fff 0.5px, transparent 1.5px),
    radial-gradient(circle at 70% 60%, #fff 0.5px, transparent 1.5px),
    radial-gradient(circle at 40% 80%, #fff 0.5px, transparent 1.5px),
    radial-gradient(circle at 85% 25%, #fff 0.5px, transparent 1.5px),
    conic-gradient(from 0deg, #1e1b4b, #6366f1, #a855f7, #ec4899, #f59e0b, #1e1b4b);
  filter: blur(1px);
  animation: outline-cosmic-spin 6s linear infinite;
}
.outline-cosmic::after {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 50%; z-index: -1;
  box-shadow:
    inset 0 0 0 2px var(--bg-card),
    0 0 28px rgba(168,85,247,0.8),
    0 0 50px rgba(99,102,241,0.5);
}
@keyframes outline-cosmic-spin {
  to { transform: rotate(-360deg); }
}

/* ── SECRET Outlines (Phase 3) ─────────────────────────────
   Strikt unsichtbar fuer normale Schueler im Inventar (filtered in
   renderInventory). Stil-Intensitaet bewusst hoch, da Admin/Tester-only.
   Outlines reduce-motion: animation entfernen, statische Form behalten.
*/

/* Anvil Core (Admin) — gold/amber Pulse mit Krone-Feeling */
.outline-anvil-core {
  box-shadow:
    0 0 0 2px var(--bg-card),
    0 0 0 3px #f59e0b,
    0 0 20px rgba(245,158,11,0.6);
  animation: outline-anvil-core-pulse 4s ease-in-out infinite;
}
@keyframes outline-anvil-core-pulse {
  0%,100% {
    box-shadow:
      0 0 0 2px var(--bg-card),
      0 0 0 3px #f59e0b,
      0 0 18px rgba(245,158,11,0.55);
  }
  50% {
    box-shadow:
      0 0 0 2px var(--bg-card),
      0 0 0 4px #fbbf24,
      0 0 32px rgba(245,158,11,0.9);
  }
}

/* Beta Spark (Tester) — neon-laser Outline mit Rotation */
.outline-beta-spark {
  position: relative;
  background: var(--bg-card);
}
.outline-beta-spark::before {
  content: '';
  position: absolute; inset: -5px;
  border-radius: 50%; z-index: -1;
  background: conic-gradient(
    from 0deg,
    #00ff41, #00aaff, #ff00ff, #00ff41);
  filter: blur(2px);
  animation: outline-beta-spark-spin 3s linear infinite;
}
.outline-beta-spark::after {
  content: '';
  position: absolute; inset: -2px;
  border-radius: 50%; z-index: -1;
  box-shadow:
    inset 0 0 0 2px var(--bg-card),
    0 0 18px rgba(0,255,65,0.55),
    0 0 32px rgba(0,170,255,0.4);
}
@keyframes outline-beta-spark-spin {
  to { transform: rotate(360deg); }
}

/* Bug Hunter (Bug-Reporter Belohnung) — amber-grün Glitch-Pulse */
.outline-bug-reporter {
  box-shadow:
    0 0 0 2px var(--bg-card),
    0 0 0 3px #10b981,
    0 0 14px rgba(16,185,129,0.5);
  animation: outline-bug-reporter-pulse 3s ease-in-out infinite;
}
@keyframes outline-bug-reporter-pulse {
  0%,100% {
    box-shadow:
      0 0 0 2px var(--bg-card),
      0 0 0 3px #10b981,
      0 0 12px rgba(16,185,129,0.45);
  }
  50% {
    box-shadow:
      0 0 0 2px var(--bg-card),
      0 0 0 3px #f59e0b,
      0 0 22px rgba(16,185,129,0.75);
  }
}

/* Reduced-Motion: Statik statt Pulse/Spin (Hard rule — a11y).
   Inset/Form bleibt, nur die Bewegung weg. */
@media (prefers-reduced-motion: reduce) {
  .outline-anvil-core,
  .outline-beta-spark::before,
  .outline-bug-reporter {
    animation: none;
  }
}

/* ── Echt-Rollen Spectacle (überschreibt alle Tier-Outlines) ── */
/* Admin: gold-rotating mit Glow-Aura — sehr auffällig */
.role-glow-admin {
  position: relative;
  background: var(--bg-card);
}
.role-glow-admin::before {
  content: '';
  position: absolute; inset: -6px;
  border-radius: 50%; z-index: -1;
  background: conic-gradient(
    from 0deg,
    #fbbf24 0%, #f59e0b 20%, #fef3c7 35%,
    #fbbf24 50%, #d97706 65%, #fef3c7 80%, #fbbf24 100%);
  filter: blur(2px);
  animation: outline-rainbow-spin 3s linear infinite;
}
.role-glow-admin::after {
  content: '';
  position: absolute; inset: -2px;
  border-radius: 50%; z-index: -1;
  box-shadow:
    inset 0 0 0 2px var(--bg-card),
    0 0 24px rgba(245,158,11,0.9),
    0 0 50px rgba(251,191,36,0.5);
  animation: admin-glow-pulse 2s ease-in-out infinite;
}
@keyframes admin-glow-pulse {
  0%,100% { filter: brightness(1); }
  50%     { filter: brightness(1.4); }
}

/* Tester: lila-rotating mit Beta-Pattern */
.role-glow-tester {
  position: relative;
  background: var(--bg-card);
}
.role-glow-tester::before {
  content: '';
  position: absolute; inset: -6px;
  border-radius: 50%; z-index: -1;
  background: conic-gradient(
    from 0deg,
    #8b5cf6 0%, #a78bfa 25%, #c4b5fd 40%,
    #8b5cf6 60%, #6366f1 75%, #c4b5fd 90%, #8b5cf6 100%);
  filter: blur(2px);
  animation: outline-rainbow-spin 3.2s linear infinite reverse;
}
.role-glow-tester::after {
  content: '';
  position: absolute; inset: -2px;
  border-radius: 50%; z-index: -1;
  box-shadow:
    inset 0 0 0 2px var(--bg-card),
    0 0 24px rgba(139,92,246,0.9),
    0 0 50px rgba(167,139,250,0.5);
  animation: admin-glow-pulse 2.2s ease-in-out infinite;
}

/* Mission 7 Bug-Fix: Legendary Outlines (rainbow/cosmic) und Role-Glows
   brauchen overflow:visible — sonst werden ::before/::after geclippt.
   Betrifft .lb-avatar (Leaderboard) und .inv-active-avatar (Profil-Banner).
   .profile-avatar-large hat schon kein overflow:hidden, ist OK.
   Das innere <img> hat eigenen border-radius:50% inline — bleibt rund. */
.lb-avatar.outline-rainbow,
.lb-avatar.outline-cosmic,
.lb-avatar.outline-anvil-core,
.lb-avatar.outline-beta-spark,
.lb-avatar.outline-bug-reporter,
.lb-avatar.role-glow-admin,
.lb-avatar.role-glow-tester,
.inv-active-avatar.outline-rainbow,
.inv-active-avatar.outline-cosmic,
.inv-active-avatar.outline-anvil-core,
.inv-active-avatar.outline-beta-spark,
.inv-active-avatar.outline-bug-reporter,
.inv-active-avatar.role-glow-admin,
.inv-active-avatar.role-glow-tester {
  isolation: isolate;     /* Stacking-Context — wie vorher */
  overflow: visible;      /* NEU: Pseudo-Elemente + Glow-Box-Shadow nicht clippen */
}

/* ── Themes (durch 1en/2en freischaltbar) ─────────────────── */
/* Themes überschreiben Tokens aus :root */

/* Cosmetic-Modulations-Variablen (Maya v2 § "Cosmetic × Subject").
   Cosmetic-Themes setzen drei Modulations-Achsen — diese werden in
   subject-tokens.css als calc()-Argumente zu oklch() konsumiert,
   sodass Subject-Akzente in jedem Cosmetic-BG passend ge-tuned
   werden, ohne Subject-Identitaet zu verlieren. Defaults (lift=0,
   sat=1, opacity-mult=1) stehen in main.css :root.
   Werte aus Maya-v2-Tabelle. Themes ohne expliziten Eintrag erben
   die :root-Identitaets-Werte (kein Effekt = neutral). */
[data-app-theme="aurora"] {
  --cosmetic-lift: 0.02;
  --cosmetic-saturation: 0.85;
  --cosmetic-pattern-opacity-multiplier: 0.6;
}
[data-app-theme="cyberpunk"] {
  --cosmetic-lift: 0.05;
  --cosmetic-saturation: 1.30;
  --cosmetic-pattern-opacity-multiplier: 1.2;
}
[data-app-theme="sand"] {
  --cosmetic-lift: 0;
  --cosmetic-saturation: 0.95;
  --cosmetic-pattern-opacity-multiplier: 1.0;
}
[data-app-theme="schiefer"] {
  --cosmetic-lift: -0.04;
  --cosmetic-saturation: 0.80;
  --cosmetic-pattern-opacity-multiplier: 1.1;
}
[data-app-theme="carbon"] {
  --cosmetic-lift: 0;
  --cosmetic-saturation: 0.95;
  --cosmetic-pattern-opacity-multiplier: 0.9;
}
[data-app-theme="cherry"] {
  --cosmetic-lift: 0.01;
  --cosmetic-saturation: 1.05;
  --cosmetic-pattern-opacity-multiplier: 1.0;
}
[data-app-theme="forest"] {
  --cosmetic-lift: -0.02;
  --cosmetic-saturation: 1.00;
  --cosmetic-pattern-opacity-multiplier: 1.0;
}
[data-app-theme="ocean"] {
  --cosmetic-lift: 0;
  --cosmetic-saturation: 1.00;
  --cosmetic-pattern-opacity-multiplier: 1.0;
}
[data-app-theme="sunset"] {
  --cosmetic-lift: 0.02;
  --cosmetic-saturation: 1.10;
  --cosmetic-pattern-opacity-multiplier: 1.0;
}

[data-app-theme="ocean"] {
  --accent: #0891b2; --accent-hover: #0e7490; --accent-subtle: #ecfeff;
  --bg: #ecfeff;
}
[data-app-theme="ocean"][data-theme="dark"] {
  --bg: #042f3a; --bg-card: #083d4d; --bg-input: #0c4a5d;
  --accent: #22d3ee; --accent-subtle: #0c4a5d; --border: #155e75;
}

[data-app-theme="forest"] {
  --accent: #16a34a; --accent-hover: #15803d; --accent-subtle: #f0fdf4;
  --bg: #f0fdf4;
}
[data-app-theme="forest"][data-theme="dark"] {
  --bg: #052e16; --bg-card: #0a3d1f; --bg-input: #14532d;
  --accent: #4ade80; --accent-subtle: #14532d; --border: #166534;
}

/* Sand (common) — Phase 2 Refinement 2026-05-08 */
[data-app-theme="sand"] {
  --bg:            #fdf8ed;          /* warmes off-white, Tendenz Strandgelb */
  --bg-card:       #ffffff;          /* clean white, lesbarkeit-anker */
  --bg-input:      #fbf2dc;          /* leicht waermer als bg, abgrenzbar */
  --text:          #3a2410;          /* dunkles roest-braun, NICHT pures schwarz */
  --text-muted:    #8a6a3f;          /* warmes mittelbraun */
  --border:        #e8d8b5;          /* sandbeige */
  --accent:        #d97706;          /* amber-600, warmes Gold */
  --accent-hover:  #b45309;          /* amber-700 */
  --accent-subtle: #fef3c7;          /* amber-100 — bleibt fuer Subtle-BGs */
  --success:       #15803d;          /* dunkleres gruen, harmoniert mit warm-bg */
  --success-subtle:#dcfce7;
  --success-text:  #14532d;
  --warning:       #ea580c;          /* orange-600 — staerker als default warning, weil bg amber ist */
  --warning-subtle:#ffedd5;
  --warning-text:  #7c2d12;
  --danger:        #b91c1c;          /* red-700, satter wegen warmer Umgebung */
  --highlight-me:  #fed7aa;          /* orange-200 — Override fuer Sand-light */
  --highlight-me-border: #ea580c;    /* orange-600 */
}
[data-app-theme="sand"][data-theme="dark"] {
  --bg:            #1f1608;          /* tiefes warm-schwarz, kein blau-stich */
  --bg-card:       #2d1f0c;          /* warmes dunkelbraun */
  --bg-input:      #3a2810;
  --text:          #fef3c7;          /* warmes creme (amber-100) — nicht pures weiss */
  --text-muted:    #d4a574;          /* warm tan */
  --border:        #5c3d14;          /* dunkles bernstein */
  --accent:        #fbbf24;          /* amber-400 — leuchtendes gold im dunkel */
  --accent-hover:  #f59e0b;          /* amber-500 */
  --accent-subtle: #3a2810;          /* eigene tiefe schicht, nicht =bg */
  --highlight-me:  rgba(234,88,12,0.22); /* Override fuer Sand-dark */
  --highlight-me-border: #fb923c;
  /* default-dark-Werte fuer success/warning/danger bleiben (harmonieren mit amber-Akzent). */
}

/* Schiefer (common) — Phase 2 Refinement 2026-05-08 */
[data-app-theme="schiefer"] {
  --bg:            #f1f5f9;          /* slate-100, kuehl-blass */
  --bg-card:       #ffffff;
  --bg-input:      #e2e8f0;          /* slate-200 */
  --text:          #0f172a;          /* slate-900 — hartes anchor-dark */
  --text-muted:    #475569;          /* slate-600 */
  --border:        #cbd5e1;          /* slate-300 */
  --accent:        #475569;          /* slate-600 — blaeulich-grau, nicht knallig */
  --accent-hover:  #334155;          /* slate-700 */
  --accent-subtle: #e0e7ef;          /* eigener subtle-tone, leicht blau-getoent (nicht slate-100, sonst =bg) */
  /* success/warning/danger: defaults aus :root sind ok — slate-bg ist neutral genug */
}
[data-app-theme="schiefer"][data-theme="dark"] {
  --bg:            #0f172a;          /* slate-900 */
  --bg-card:       #1e293b;          /* slate-800 */
  --bg-input:      #334155;          /* slate-700 */
  --text:          #f1f5f9;          /* slate-100 */
  --text-muted:    #94a3b8;          /* slate-400 */
  --border:        #334155;          /* slate-700 */
  --accent:        #94a3b8;          /* slate-400 — gedeckt, NICHT bloomend wie Aurora */
  --accent-hover:  #cbd5e1;          /* slate-300 */
  --accent-subtle: #1e293b;          /* identisch zu bg-card, gibt unsichtbare Hinweis-BGs */
  /* success/warning/danger: dark-defaults bleiben */
}

[data-app-theme="sunset"] {
  --accent: #ea580c; --accent-hover: #c2410c; --accent-subtle: #fff7ed;
  --bg: linear-gradient(135deg, #fff7ed, #fed7aa);
}
[data-app-theme="sunset"][data-theme="dark"] {
  --bg: linear-gradient(135deg, #431407, #7c2d12);
  --bg-card: #431407; --bg-input: #7c2d12;
  --accent: #fb923c; --accent-subtle: #7c2d12; --border: #9a3412;
}

[data-app-theme="lavender"] {
  --accent: #a855f7; --accent-hover: #9333ea; --accent-subtle: #faf5ff;
  --bg: #faf5ff;
}
[data-app-theme="lavender"][data-theme="dark"] {
  --bg: #2e1065; --bg-card: #3b0764; --bg-input: #4c1d95;
  --accent: #c4b5fd; --accent-subtle: #4c1d95; --border: #5b21b6;
}

[data-app-theme="crimson"] {
  --accent: #dc2626; --accent-hover: #b91c1c; --accent-subtle: #fef2f2;
  --bg: #fef2f2;
}
[data-app-theme="crimson"][data-theme="dark"] {
  --bg: #450a0a; --bg-card: #7f1d1d; --bg-input: #991b1b;
  --accent: #f87171; --accent-subtle: #7f1d1d; --border: #b91c1c;
}

[data-app-theme="mint"] {
  --accent: #14b8a6; --accent-hover: #0f766e; --accent-subtle: #f0fdfa;
  --bg: #f0fdfa;
}
[data-app-theme="mint"][data-theme="dark"] {
  --bg: #042f2e; --bg-card: #134e4a; --bg-input: #115e59;
  --accent: #5eead4; --accent-subtle: #115e59; --border: #0f766e;
}

[data-app-theme="cherry"] {
  --accent: #ec4899; --accent-hover: #db2777; --accent-subtle: #fdf2f8;
  --bg: #fdf2f8;
}
[data-app-theme="cherry"][data-theme="dark"] {
  --bg: #500724; --bg-card: #831843; --bg-input: #9d174d;
  --accent: #f9a8d4; --accent-subtle: #831843; --border: #be185d;
}

[data-app-theme="carbon"] {
  --accent: #525252; --accent-hover: #404040; --accent-subtle: #f5f5f5;
  --bg: #fafafa; --bg-card: #f5f5f5;
}
[data-app-theme="carbon"][data-theme="dark"] {
  --bg: #0a0a0a; --bg-card: #171717; --bg-input: #262626;
  --accent: #a3a3a3; --accent-subtle: #262626; --border: #404040;
}

/* Aurora — animierter Hintergrund (legendary) */
[data-app-theme="aurora"] {
  --accent: #06b6d4; --accent-hover: #0891b2; --accent-subtle: #ecfeff;
  /* highlight-me default-Gelb beibehalten — gibt scharfen Kontrast zum cyan-Body */
  /* F-03 Audio-Modus: aurora pickt einen lila Tint, weil der animierte
     Cyan/Lila/Pink-Body sonst gegen den amber-Akzent zu chaotisch wirkt. */
  --audio-highlight: rgba(168, 85, 247, 0.18);
}
[data-app-theme="aurora"] body {
  background:
    linear-gradient(135deg,
      rgba(99,102,241,0.08) 0%,
      rgba(168,85,247,0.10) 25%,
      rgba(236,72,153,0.10) 50%,
      rgba(6,182,212,0.10) 75%,
      rgba(99,102,241,0.08) 100%);
  background-size: 200% 200%;
  animation: aurora-shift 15s ease infinite;
}
[data-app-theme="aurora"][data-theme="dark"] {
  --bg: #0c0a1f; --bg-card: #1a1735; --bg-input: #251f50;
  --border: #3b3372;
  --accent: #67e8f9; --accent-subtle: #164e63;
  /* warmes Amber-Highlight gegen lila/cyan Body */
  --highlight-me: rgba(245,158,11,0.18); --highlight-me-border: #f59e0b;
  /* F-03 Audio-Modus: dark-aurora — staerkerer lila Tint fuer Sichtbarkeit
     auf dem dunkleren Body. */
  --audio-highlight: rgba(192, 132, 252, 0.25);
}
[data-app-theme="aurora"][data-theme="dark"] body {
  background:
    linear-gradient(135deg,
      rgba(99,102,241,0.15) 0%,
      rgba(168,85,247,0.18) 25%,
      rgba(236,72,153,0.15) 50%,
      rgba(6,182,212,0.18) 75%,
      rgba(99,102,241,0.15) 100%),
    #0c0a1f;
  background-size: 200% 200%;
  animation: aurora-shift 15s ease infinite;
}
@keyframes aurora-shift {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}

/* Cyberpunk (legendary) — Neon mit dunkel */
[data-app-theme="cyberpunk"] {
  --bg: #0a0014; --bg-card: #1a0033; --bg-input: #2d0a4e;
  --text: #f0f0f0; --text-muted: #b794f6;
  --border: #6b21a8;
  --accent: #f0abfc; --accent-hover: #e879f9; --accent-subtle: #2d0a4e;
  /* Cyberpunk: warmes Pink-Highlight passt zum Neon-Branding */
  --highlight-me: rgba(236,72,153,0.20); --highlight-me-border: #ec4899;
}
[data-app-theme="cyberpunk"] body {
  background:
    radial-gradient(circle at 20% 50%, rgba(236,72,153,0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(99,102,241,0.15) 0%, transparent 50%),
    #0a0014;
}
[data-app-theme="cyberpunk"] .btn-primary {
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  box-shadow: 0 0 16px rgba(236,72,153,0.5);
}

/* ──────────────────────────────────────────────────────────
   SECRET Themes (Phase 3) — Admin/Tester-only
   Inventory-Filter in app.js stellt sicher dass nur Berechtigte
   die Karte sehen; das Theme selbst kann (wenn aktiviert) intensiv
   sein. Reduced-Motion neutralisiert die Keyframes.
   ────────────────────────────────────────────────────────── */

/* Anvil Forge (Admin) — amber Akzent + langsamer Hue-Rotate Glow */
[data-app-theme="anvil-forge"] {
  --accent: #f59e0b;
  --accent-hover: #d97706;
  --accent-subtle: #1c1200;
  /* highlight bleibt aus :root; anvil-forge erbt sonst alle Tokens */
}
[data-app-theme="anvil-forge"][data-theme="dark"] {
  --bg: #0f0a02;
  --bg-card: #1c1200;
  --bg-input: #2a1c05;
  --text: #fef3c7;
  --text-muted: #d4a574;
  --border: #5c3d14;
  --accent: #fbbf24;
  --accent-hover: #f59e0b;
  --accent-subtle: #2a1c05;
}
[data-app-theme="anvil-forge"] .navbar,
[data-app-theme="anvil-forge"] .btn-primary {
  animation: anvil-forge-hue 8s linear infinite;
}
[data-app-theme="anvil-forge"] .btn-primary {
  box-shadow: 0 0 16px rgba(245,158,11,0.45);
}
@keyframes anvil-forge-hue {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

/* Quantum Lab (Tester) — Matrix-look + Scanline-Overlay */
[data-app-theme="quantum-lab"] {
  --bg: #0a0a0a;
  --bg-card: #0f1410;
  --bg-input: #142018;
  --bg-nav: rgba(10,14,11,0.95);
  --text: #00ff41;
  --text-muted: #4ade80;
  --border: #166534;
  --accent: #00ff41;
  --accent-hover: #16a34a;
  --accent-subtle: #052e16;
}
[data-app-theme="quantum-lab"][data-theme="dark"] {
  /* identische Tokens wie light — Theme ist nativ "dark". */
  --bg: #050505;
  --bg-card: #0a0f0c;
  --bg-input: #0f1814;
  --text: #00ff41;
  --text-muted: #4ade80;
  --border: #166534;
  --accent: #00ff41;
  --accent-subtle: #052e16;
}
[data-app-theme="quantum-lab"] body {
  position: relative;
}
/* Scanline-Overlay: repeating-linear-gradient + langsame vertikale Drift.
   pointer-events:none damit der Overlay keine Klicks abfaengt. */
[data-app-theme="quantum-lab"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,255,65,0.04) 0px,
    rgba(0,255,65,0.04) 1px,
    transparent 1px,
    transparent 4px);
  animation: quantum-scan 6s linear infinite;
}
@keyframes quantum-scan {
  0%   { background-position: 0 0; }
  100% { background-position: 0 4px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-app-theme="anvil-forge"] .navbar,
  [data-app-theme="anvil-forge"] .btn-primary,
  [data-app-theme="quantum-lab"] body::before {
    animation: none;
  }
}

/* ── Inventory-UI ─────────────────────────────────────────── */
.inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.inv-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 12px;
  text-align: center;
  cursor: pointer;
  transition: transform var(--transition), border-color var(--transition);
  position: relative;
  overflow: hidden;
}
.inv-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.inv-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}
.inv-card.locked {
  opacity: 0.5;
  cursor: not-allowed;
}
.inv-card.locked:hover { transform: none; border-color: var(--border); }

/* ── Locked-Cards V2 (Mission 7) ─────────────────────────
   Mysterioses Schloss-Layout statt grauer Apathie. Rarity-Stripe oben,
   ???-Name, Lock-Overlay, Hint-Zeile. Bei epic/legendary laeuft die
   Animation gedimmt im Hintergrund weiter ("da kommt noch was Geiles"). */
.inv-card.inv-locked-v2 {
  /* Override des opacity:0.5 von .locked — V2 nutzt Rarity-Tinting + Lock statt Dimm-Look. */
  opacity: 1;
  cursor: default;
  /* Subtle Rarity-Tint des Card-Backgrounds — fallback fuer Browser ohne color-mix. */
  background: var(--bg-card);
}
@supports (background: color-mix(in srgb, white, black)) {
  .inv-card.inv-locked-v2.inv-rarity-bg-common    { background: color-mix(in srgb, var(--bg-card) 92%, var(--rarity-common)    8%); }
  .inv-card.inv-locked-v2.inv-rarity-bg-rare      { background: color-mix(in srgb, var(--bg-card) 92%, var(--rarity-rare)      8%); }
  .inv-card.inv-locked-v2.inv-rarity-bg-epic      { background: color-mix(in srgb, var(--bg-card) 92%, var(--rarity-epic)      8%); }
  .inv-card.inv-locked-v2.inv-rarity-bg-legendary { background: color-mix(in srgb, var(--bg-card) 90%, var(--rarity-legendary) 10%); }
}
.inv-card.inv-locked-v2:hover {
  transform: none;          /* kein Hover-Lift fuer locked */
  border-color: var(--border);
}
.inv-card.inv-locked-v2:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Top-Stripe in Rarity-Farbe — 2px hoch, full-width. */
.inv-rarity-stripe {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--rarity-common);  /* default fallback */
  pointer-events: none;
}
.inv-card.inv-rarity-bg-rare      .inv-rarity-stripe { background: var(--rarity-rare); }
.inv-card.inv-rarity-bg-epic      .inv-rarity-stripe { background: var(--rarity-epic); }
.inv-card.inv-rarity-bg-legendary {
  /* Legendary-Stripe mit Glow */
}
.inv-card.inv-rarity-bg-legendary .inv-rarity-stripe {
  background: var(--rarity-legendary);
  box-shadow: 0 0 6px var(--rarity-legendary);
}

/* Lock-Overlay: zentriert ueber dem Preview, mit Text-Shadow fuer Lesbarkeit
   gegen animierte Hintergruende. Mission 8: Lucide-SVG ersetzt das Emoji. */
.inv-lock-overlay {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  pointer-events: none;
  text-shadow: 0 0 4px var(--bg-card), 0 0 8px var(--bg-card);
  z-index: 2;
}
/* Preview braucht relative + Animation laeuft weiter (NICHT pausiert!).
   Common/Rare: dimmen + grayscale. Epic/Legendary: scaled + leicht blur,
   damit der User die Animation sieht aber gedaempft. */
.inv-locked-v2 .inv-preview,
.inv-locked-v2 .inv-theme-preview {
  position: relative;
}
.inv-locked-v2.inv-rarity-bg-common .inv-preview,
.inv-locked-v2.inv-rarity-bg-rare   .inv-preview,
.inv-locked-v2.inv-rarity-bg-common .inv-theme-preview,
.inv-locked-v2.inv-rarity-bg-rare   .inv-theme-preview {
  opacity: 0.4;
  filter: grayscale(0.6);
}
.inv-locked-v2.inv-rarity-bg-epic .inv-preview,
.inv-locked-v2.inv-rarity-bg-legendary .inv-preview {
  opacity: 0.35;
  transform: scale(0.85);
  filter: blur(0.5px);
}
.inv-locked-v2.inv-rarity-bg-epic .inv-theme-preview,
.inv-locked-v2.inv-rarity-bg-legendary .inv-theme-preview {
  opacity: 0.35;
  filter: blur(0.5px);
}
.inv-preview {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--accent-subtle);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 22px; color: var(--accent);
  margin: 0 auto 12px;
}
.inv-name { font-weight: 600; font-size: 14px; }
.inv-meta { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.inv-rarity {
  display: inline-block;
  padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  margin-top: 6px;
}
.inv-rarity-common    { background: var(--bg-input); color: var(--text-muted); }
.inv-rarity-rare      { background: #dbeafe; color: #1e40af; }
.inv-rarity-epic      { background: #f3e8ff; color: #7e22ce; }
.inv-rarity-legendary { background: linear-gradient(90deg, #fbbf24, #ec4899); color: #fff; }
.inv-rarity-secret    { background: linear-gradient(90deg, #f59e0b, #00ff41); color: #fff; text-shadow: 0 0 4px rgba(0,0,0,0.5); }
[data-theme="dark"] .inv-rarity-rare { background: #1e3a8a; color: #bfdbfe; }
[data-theme="dark"] .inv-rarity-epic { background: #581c87; color: #e9d5ff; }

.inv-theme-preview {
  width: 100%; height: 64px; border-radius: var(--radius-sm);
  margin-bottom: 12px;
  border: 1px solid var(--border);
}
.inv-active-tag {
  position: absolute; top: 8px; right: 8px;
  background: var(--accent); color: #fff;
  padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700;
}

/* Theme-Drop-Toast (special) */
.theme-drop-toast {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #fbbf24, #ec4899);
  color: #fff;
  padding: 24px 32px; border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 80px rgba(236,72,153,0.3);
  z-index: 10000;
  text-align: center;
  animation: theme-drop-pop 4s ease forwards;
}
.theme-drop-title { font-size: 14px; opacity: 0.9; }
.theme-drop-name  { font-size: 28px; font-weight: 800; margin: 8px 0; }
.theme-drop-sub   { font-size: 12px; opacity: 0.8; }

/* Mission 7: Doppel-Drop / Trostpreis-Toast — XP groß, Theme-Name klein,
   Akzent-Farbe statt Pink-Gradient (technischer Reward, kein Rarity-Glanz). */
.theme-drop-toast.theme-drop-toast-double {
  background: var(--accent);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4),
              0 0 60px color-mix(in srgb, var(--accent) 30%, transparent);
}
.theme-drop-toast.theme-drop-toast-double .theme-drop-title {
  font-size: 32px;       /* XP groß */
  font-weight: 800;
  opacity: 1;
}
.theme-drop-toast.theme-drop-toast-double .theme-drop-name {
  font-size: 14px;       /* Theme-Name klein */
  font-weight: 600;
  margin: 6px 0 4px;
  opacity: 0.95;
}
@keyframes theme-drop-pop {
  0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  10%  { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
  20%  { transform: translate(-50%, -50%) scale(1); }
  90%  { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.95); opacity: 0; pointer-events: none; }
}

/* Testing-Tab */
.testing-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}
.testing-section-title {
  font-size: 14px; font-weight: 700; color: var(--accent);
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.testing-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.testing-section.admin-section {
  border-color: #f59e0b;
  background: linear-gradient(135deg, var(--bg-card), rgba(245,158,11,0.05));
}