/* ============================================================
   MH-TRAINING — THEME-SYSTEM
   Wählbare Designs. Überschreibt die kanonischen Forge-Tokens
   (forge.css) via html[data-theme="…"].
   Rein lokal — keine externen Calls außer Google Fonts (wie forge.css).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700;800&family=Rajdhani:wght@500;600;700&family=Oswald:wght@500;600;700&family=Cinzel:wght@600;700;800&display=swap');

/* ── NEUE THEME-TOKENS — Default-Fallbacks (gelten für Forge) ──
   Werden von den einzelnen Theme-Blöcken unten überschrieben.      */
:root {
  --glass-bg:      rgba(28,28,30,0.82);   /* Sidebar-Hintergrund (blur)  */
  --glass-topbar:  rgba(0,0,0,0.75);      /* Topbar-Hintergrund (blur)   */
  --app-bg:        none;                   /* Hintergrundmuster (body)    */
  --glow:          0 0 0 rgba(0,0,0,0);    /* Akzent-Glow (Nav/Buttons)   */
  --glow-soft:     none;                    /* dezenter Text-/Box-Glow     */
}

/* ════════════════════════════════════════════════════════════
   FUTURE / NEON  (Standard)
   Tiefblau/Violett, Neon-Cyan + Magenta, Grid-Glow
   ════════════════════════════════════════════════════════════ */
html[data-theme="future"] {
  --bg-base:       #070B16;
  --bg-surface:    #101627;
  --bg-elevated:   #18203A;
  --bg-overlay:    #222C4D;
  --border-subtle: rgba(120,170,255,0.12);
  --border-muted:  rgba(120,170,255,0.24);

  --accent:        #22D3EE;
  --accent-hover:  #38E0F5;
  --accent-muted:  rgba(34,211,238,0.16);
  --accent-amber:  #C56BFF;

  --success:       #34E5C2;
  --success-muted: rgba(52,229,194,0.15);
  --danger:        #FF5C7A;
  --danger-muted:  rgba(255,92,122,0.14);
  --warning:       #FFC152;
  --warning-muted: rgba(255,193,82,0.15);

  --fg-1:          #EAF2FF;
  --fg-2:          rgba(200,216,255,0.62);
  --fg-3:          rgba(200,216,255,0.32);
  --fg-inverse:    #04111A;

  --font-display:  'Orbitron', sans-serif;

  --glass-bg:      rgba(16,22,39,0.78);
  --glass-topbar:  rgba(7,11,22,0.72);
  --app-bg:
    radial-gradient(900px 500px at 80% -10%, rgba(34,211,238,0.10), transparent 60%),
    radial-gradient(700px 500px at 0% 110%, rgba(197,107,255,0.10), transparent 55%),
    linear-gradient(rgba(120,170,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,170,255,0.045) 1px, transparent 1px);
  --glow:          0 0 16px rgba(34,211,238,0.45);
  --glow-soft:     0 0 12px rgba(34,211,238,0.30);
}
html[data-theme="future"] body {
  background-size: auto, auto, 38px 38px, 38px 38px;
}

/* ════════════════════════════════════════════════════════════
   FORGE  (das ursprüngliche Design — Orange/Schwarz)
   ════════════════════════════════════════════════════════════ */
html[data-theme="forge"] {
  --bg-base:       #000000;
  --bg-surface:    #1C1C1E;
  --bg-elevated:   #2C2C2E;
  --bg-overlay:    #3A3A3C;
  --border-subtle: rgba(255,255,255,0.10);
  --border-muted:  rgba(255,255,255,0.18);

  --accent:        #FF5C28;
  --accent-hover:  #E84F20;
  --accent-muted:  rgba(255,92,40,0.15);
  --accent-amber:  #FFB347;

  --fg-1:          #FFFFFF;
  --fg-2:          rgba(235,235,245,0.60);
  --fg-3:          rgba(235,235,245,0.30);
  --fg-inverse:    #000000;

  --font-display:  'Barlow Condensed', sans-serif;

  --glass-bg:      rgba(28,28,30,0.82);
  --glass-topbar:  rgba(0,0,0,0.75);
  --app-bg:        none;
  --glow:          0 0 0 rgba(0,0,0,0);
  --glow-soft:     none;
}

/* ════════════════════════════════════════════════════════════
   SLAYER  (Anime-inspiriert — Schwarz/Tannengrün, Wasser-Glow)
   Eigene, lizenzfreie Palette. Keine geschützten Bilder/Logos.
   ════════════════════════════════════════════════════════════ */
html[data-theme="slayer"] {
  --bg-base:       #0A0F0D;
  --bg-surface:    #122019;
  --bg-elevated:   #1A2D23;
  --bg-overlay:    #244033;
  --border-subtle: rgba(120,255,200,0.12);
  --border-muted:  rgba(120,255,200,0.22);

  --accent:        #2EE6A8;
  --accent-hover:  #3FF7B8;
  --accent-muted:  rgba(46,230,168,0.15);
  --accent-amber:  #66E0FF;

  --success:       #2EE6A8;
  --success-muted: rgba(46,230,168,0.15);
  --danger:        #FF6B6B;
  --danger-muted:  rgba(255,107,107,0.14);

  --fg-1:          #EAFBF3;
  --fg-2:          rgba(200,240,225,0.60);
  --fg-3:          rgba(200,240,225,0.30);
  --fg-inverse:    #04140E;

  --font-display:  'Oswald', sans-serif;

  --glass-bg:      rgba(18,32,25,0.82);
  --glass-topbar:  rgba(10,15,13,0.74);
  --app-bg:
    radial-gradient(800px 480px at 85% -10%, rgba(46,230,168,0.10), transparent 60%),
    repeating-linear-gradient(45deg, rgba(46,230,168,0.030) 0 12px, transparent 12px 24px);
  --glow:          0 0 16px rgba(46,230,168,0.40);
  --glow-soft:     0 0 12px rgba(46,230,168,0.28);
}

/* ════════════════════════════════════════════════════════════
   SORCERER  (Anime-inspiriert — Dunkelblau/Violett, Energie-Glow)
   Eigene, lizenzfreie Palette. Keine geschützten Bilder/Logos.
   ════════════════════════════════════════════════════════════ */
html[data-theme="sorcerer"] {
  --bg-base:       #080A1A;
  --bg-surface:    #121634;
  --bg-elevated:   #1B2150;
  --bg-overlay:    #272F6B;
  --border-subtle: rgba(150,130,255,0.14);
  --border-muted:  rgba(150,130,255,0.26);

  --accent:        #7C5CFF;
  --accent-hover:  #9277FF;
  --accent-muted:  rgba(124,92,255,0.18);
  --accent-amber:  #FF5CC8;

  --success:       #4CE0B3;
  --success-muted: rgba(76,224,179,0.15);
  --danger:        #FF5C7A;
  --danger-muted:  rgba(255,92,122,0.14);

  --fg-1:          #EDEBFF;
  --fg-2:          rgba(210,205,255,0.62);
  --fg-3:          rgba(210,205,255,0.32);
  --fg-inverse:    #0A0820;

  --font-display:  'Rajdhani', sans-serif;

  --glass-bg:      rgba(18,22,52,0.82);
  --glass-topbar:  rgba(8,10,26,0.74);
  --app-bg:
    radial-gradient(820px 520px at 78% -12%, rgba(124,92,255,0.16), transparent 60%),
    radial-gradient(680px 480px at 5% 112%, rgba(255,92,200,0.12), transparent 55%);
  --glow:          0 0 18px rgba(124,92,255,0.50);
  --glow-soft:     0 0 13px rgba(124,92,255,0.32);
}

/* ════════════════════════════════════════════════════════════
   OLDSCHOOL  (Retro-Gym — Sepia/Anthrazit + Gold, Serif)
   ════════════════════════════════════════════════════════════ */
html[data-theme="oldschool"] {
  --bg-base:       #14110C;
  --bg-surface:    #221C13;
  --bg-elevated:   #2E2719;
  --bg-overlay:    #3D3422;
  --border-subtle: rgba(201,162,39,0.16);
  --border-muted:  rgba(201,162,39,0.30);

  --accent:        #C9A227;
  --accent-hover:  #DDB738;
  --accent-muted:  rgba(201,162,39,0.16);
  --accent-amber:  #E0B84A;

  --success:       #9FB23D;
  --success-muted: rgba(159,178,61,0.15);
  --danger:        #C2553B;
  --danger-muted:  rgba(194,85,59,0.16);
  --warning:       #E0B84A;
  --warning-muted: rgba(224,184,74,0.16);

  --fg-1:          #F3E9D2;
  --fg-2:          rgba(231,214,180,0.62);
  --fg-3:          rgba(231,214,180,0.32);
  --fg-inverse:    #1A1206;

  --font-display:  'Cinzel', serif;

  --glass-bg:      rgba(34,28,19,0.86);
  --glass-topbar:  rgba(20,17,12,0.80);
  --app-bg:
    radial-gradient(900px 520px at 50% -10%, rgba(201,162,39,0.08), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.30));
  --glow:          0 0 0 rgba(0,0,0,0);
  --glow-soft:     none;
}

/* ════════════════════════════════════════════════════════════
   BODYBUILDING  (kräftig — Schwarz + Rot/Gold, fett & condensed)
   ════════════════════════════════════════════════════════════ */
html[data-theme="bodybuilding"] {
  --bg-base:       #0B0608;
  --bg-surface:    #1A0E11;
  --bg-elevated:   #26151A;
  --bg-overlay:    #371D24;
  --border-subtle: rgba(255,90,90,0.14);
  --border-muted:  rgba(255,90,90,0.26);

  --accent:        #E23131;
  --accent-hover:  #FF4242;
  --accent-muted:  rgba(226,49,49,0.16);
  --accent-amber:  #F2B431;

  --success:       #46D17A;
  --success-muted: rgba(70,209,122,0.15);
  --danger:        #FF4242;
  --danger-muted:  rgba(255,66,66,0.16);
  --warning:       #F2B431;
  --warning-muted: rgba(242,180,49,0.16);

  --fg-1:          #FCEFEF;
  --fg-2:          rgba(245,220,220,0.62);
  --fg-3:          rgba(245,220,220,0.32);
  --fg-inverse:    #160405;

  --font-display:  'Oswald', sans-serif;

  --glass-bg:      rgba(26,14,17,0.84);
  --glass-topbar:  rgba(11,6,8,0.78);
  --app-bg:
    radial-gradient(820px 500px at 80% -10%, rgba(226,49,49,0.14), transparent 60%),
    radial-gradient(680px 460px at 8% 112%, rgba(242,180,49,0.08), transparent 55%);
  --glow:          0 0 16px rgba(226,49,49,0.42);
  --glow-soft:     0 0 12px rgba(226,49,49,0.30);
}

/* ════════════════════════════════════════════════════════════
   THEME-PICKER (Profilseite)
   ════════════════════════════════════════════════════════════ */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  max-width: 640px;
  margin-bottom: 8px;
}
.theme-card {
  position: relative;
  border: 1px solid var(--border-muted);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  overflow: hidden;
  background: var(--bg-surface);
  transition: transform .15s var(--ease-default), border-color .15s, box-shadow .15s;
}
.theme-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.theme-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--glow-soft);
}
.theme-card.active::after {
  content: "✓";
  position: absolute; top: 8px; right: 10px;
  color: var(--accent); font-weight: 700; font-size: 14px;
}
.theme-card-swatch {
  display: flex; gap: 6px; margin-bottom: 10px;
}
.theme-card-dot {
  width: 22px; height: 22px; border-radius: 7px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}
.theme-card-name {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--fg-1);
}
.theme-card-desc {
  font-size: 11px; color: var(--fg-2); margin-top: 2px;
}

/* ════════════════════════════════════════════════════════════
   SLAYER SESSION SKIN — aktiver Trainings-Screen
   Aus design/layouts/slayer-session.html abgeleitet.
   Deko (Wasser-Ribbons, Glowballs) + Konzentrations-Meter,
   nur sichtbar wenn data-theme="slayer". Daten bleiben live.
   ════════════════════════════════════════════════════════════ */
.session-stage { position: relative; }
.session-decor { display: none; }   /* default aus — nur Slayer zeigt Deko */
.conc-meter    { display: none; }   /* default aus — nur Slayer zeigt Meter */

/* Konzentrations-Meter (Markup immer da, Werte werden live gesetzt) */
.conc-meter { position: relative; width: 54px; height: 54px; flex-shrink: 0; }
.conc-meter svg { transform: rotate(-90deg); display: block; }
.conc-meter .cm-val {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--fg-1);
}

/* ── nur im Slayer-Theme aktiv ── */
html[data-theme="slayer"] .conc-meter { display: block; }
html[data-theme="slayer"] .session-stage { overflow: hidden; border-radius: 22px; }
html[data-theme="slayer"] .session-content { position: relative; z-index: 1; border-top: none !important; }
html[data-theme="slayer"] .session-decor {
  display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
html[data-theme="slayer"] .session-decor .waves { position: absolute; inset: 0; opacity: .5; }
html[data-theme="slayer"] .session-decor .waves svg { position: absolute; width: 160%; left: -30%; }
html[data-theme="slayer"] .session-decor .w1 { top: 5%;  animation: sl-drift 26s linear infinite; }
html[data-theme="slayer"] .session-decor .w2 { top: 44%; animation: sl-drift 34s linear infinite reverse; opacity: .6; }
html[data-theme="slayer"] .session-decor .w3 { bottom: 7%; animation: sl-drift 30s linear infinite; opacity: .5; }
html[data-theme="slayer"] .session-decor .glowball { position: absolute; border-radius: 50%; filter: blur(80px); }
@keyframes sl-drift { from { transform: translateX(0); } to { transform: translateX(16%); } }

/* Hero-Akzente im Slayer-Theme */
html[data-theme="slayer"] .tracker-title { text-shadow: 0 0 22px rgba(46,230,168,.35); }
html[data-theme="slayer"] #tVol { text-shadow: 0 0 18px rgba(46,230,168,.40); }

/* ── Bewegungsreduktion respektieren ── */
@media (prefers-reduced-motion: reduce) {
  .theme-card { transition: none; }
  .theme-card:hover { transform: none; }
  html[data-theme="slayer"] .session-decor .w1,
  html[data-theme="slayer"] .session-decor .w2,
  html[data-theme="slayer"] .session-decor .w3 { animation: none; }
  .conc-meter #tConcRing { transition: none; }
}