/**
 * NachtBlau Crew — Design-Basis „Obsidian Slate“
 * Ersetzt die bunte Cyan-Glass-Optik durch ruhiges Slate + Indigo.
 * HTML, JS und Layout bleiben unverändert — nur Tokens & Oberflächen.
 */

:root,
[data-theme="dark"] {
  color-scheme: dark;

  --bg-deep: #0b0d12;
  --bg-main: #12151c;
  --bg-card: #181c26;
  --bg-card-hover: #1f2430;
  --header-bg: rgba(11, 13, 18, 0.94);
  --header-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 40px rgba(0, 0, 0, 0.45);
  --nav-mobile-bg: rgba(18, 21, 28, 0.98);

  --border: rgba(148, 163, 184, 0.14);
  --border-bright: rgba(167, 139, 250, 0.35);
  --text: #e8ecf4;
  --text-muted: #8b95a8;

  --accent: #a78bfa;
  --accent-bright: #c4b5fd;
  --accent-glow: rgba(167, 139, 250, 0.32);
  --neon: #8b5cf6;
  --gold: #93c5fd;
  --gold-glow: rgba(147, 197, 253, 0.28);
  --purple: #a78bfa;
  --teal: #2dd4bf;
  --gaming-green: #34d399;
  --moon: #cbd5e1;

  --body-glow-1: rgba(139, 92, 246, 0.08);
  --body-glow-2: rgba(59, 130, 246, 0.05);
  --grid-line: rgba(148, 163, 184, 0.045);
  --stars-opacity: 0.22;
  --moon-glow-opacity: 0.55;

  --gradient: linear-gradient(135deg, #a78bfa 0%, #818cf8 50%, #6366f1 100%);
  --gradient-neon: linear-gradient(90deg, #818cf8 0%, #a78bfa 50%, #93c5fd 100%);
  --aurora: linear-gradient(160deg, rgba(99, 102, 241, 0.07) 0%, rgba(139, 92, 246, 0.04) 40%, transparent 70%);
  --panel-glow: 0 0 0 1px rgba(148, 163, 184, 0.08), 0 16px 48px rgba(0, 0, 0, 0.35);
  --glass-bg: rgba(24, 28, 38, 0.82);
  --glass-border: rgba(148, 163, 184, 0.14);
  --overlay-bg: rgba(11, 13, 18, 0.82);

  --guild-accent: #93c5fd;
  --guild-accent-bright: #bfdbfe;
  --guild-accent-deep: #3b82f6;
  --guild-accent-glow: rgba(147, 197, 253, 0.35);
  --guild-gold: var(--guild-accent);
  --guild-gold-glow: var(--guild-accent-glow);
  --guild-crimson: #f472b6;

  --fun: #f472b6;
  --fun-glow: rgba(244, 114, 182, 0.22);

  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --shadow: 0 16px 48px rgba(0, 0, 0, 0.4);

  --font: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-display: 'Sora', system-ui, sans-serif;
  --font-gaming: 'Chakra Petch', system-ui, sans-serif;
  --font-play: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-modern: 'Plus Jakarta Sans', system-ui, sans-serif;
}

[data-theme="light"] {
  --bg-deep: #f1f5f9;
  --bg-main: #e2e8f0;
  --bg-card: #ffffff;
  --bg-card-hover: #f8fafc;
  --header-bg: rgba(255, 255, 255, 0.92);
  --header-shadow: 0 1px 0 rgba(15, 23, 42, 0.06), 0 8px 32px rgba(15, 23, 42, 0.06);
  --nav-mobile-bg: rgba(255, 255, 255, 0.98);

  --border: rgba(15, 23, 42, 0.1);
  --border-bright: rgba(99, 102, 241, 0.28);
  --text: #0f172a;
  --text-muted: #64748b;

  --accent: #6366f1;
  --accent-bright: #4f46e5;
  --accent-glow: rgba(99, 102, 241, 0.2);
  --guild-accent: #2563eb;
  --guild-accent-bright: #3b82f6;
  --guild-accent-deep: #1d4ed8;
  --guild-accent-glow: rgba(37, 99, 235, 0.22);

  --glass-bg: rgba(255, 255, 255, 0.88);
  --glass-border: rgba(15, 23, 42, 0.1);
  --panel-glow: 0 0 0 1px rgba(15, 23, 42, 0.06), 0 12px 32px rgba(15, 23, 42, 0.08);
  --overlay-bg: rgba(241, 245, 249, 0.88);
  --grid-line: rgba(15, 23, 42, 0.05);
  --stars-opacity: 0.08;
  --moon-glow-opacity: 0.25;
}

/* —— Hintergrund: ruhiger, weniger Spielzeug —— */
body {
  background:
    radial-gradient(ellipse 70% 45% at 50% -5%, var(--body-glow-1) 0%, transparent 55%),
    radial-gradient(ellipse 50% 35% at 100% 30%, var(--body-glow-2) 0%, transparent 50%),
    var(--bg-deep);
}

.play-deco {
  display: none;
}

.mesh-bg .blob {
  opacity: 0.18;
  filter: blur(110px);
}

.blob-1 { background: radial-gradient(circle, rgba(139, 92, 246, 0.45), transparent 70%); }
.blob-2 { background: radial-gradient(circle, rgba(99, 102, 241, 0.35), transparent 70%); }
.blob-3 { background: radial-gradient(circle, rgba(59, 130, 246, 0.25), transparent 70%); }

.grid-bg {
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, black 15%, transparent 75%);
  opacity: 0.85;
}

.moon-glow {
  top: -80px;
  right: -40px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(167, 139, 250, 0.12) 0%, rgba(99, 102, 241, 0.04) 45%, transparent 72%);
}

.stars {
  animation: none;
  opacity: var(--stars-opacity);
}

/* —— Header —— */
.fusion-header {
  box-shadow: var(--header-shadow);
}

.fusion-header-main,
.guild-header-bar .fusion-header-main {
  background: var(--header-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  padding-bottom: 0;
}

.fusion-header-main::after,
.guild-header-bar .fusion-header-main::after {
  display: none;
}

.header-brand-title > span:nth-child(2) {
  background: linear-gradient(135deg, #f8fafc 0%, #c4b5fd 45%, #93c5fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.header-brand-crew {
  color: #e0e7ff;
  background: rgba(99, 102, 241, 0.22);
  border-color: rgba(167, 139, 250, 0.35);
  -webkit-text-fill-color: #e0e7ff;
}

.header-meta-pill,
.header-icon-btn {
  background: var(--bg-card);
  border-color: var(--border);
}

.header-meta-time {
  color: var(--accent-bright);
}

.header-auth-btn {
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(167, 139, 250, 0.35);
}

.header-auth-btn:hover {
  background: rgba(99, 102, 241, 0.22);
  border-color: var(--accent);
}

.fusion-menu .fusion-menu-link {
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow: none;
  border-radius: var(--radius-xs);
}

.fusion-menu .fusion-menu-link:hover {
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(167, 139, 250, 0.35);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.fusion-menu .fusion-menu-link.active {
  color: #fff;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border-color: rgba(196, 181, 253, 0.5);
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.35);
  transform: none;
}

/* —— Hero / Willkommen —— */
.hero-welcome-full {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  box-shadow: var(--panel-glow);
  backdrop-filter: none;
}

.hero-welcome-full::before,
.hero-welcome-full::after {
  display: none;
}

.guild-frame {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.guild-frame::before,
.guild-frame::after {
  display: none;
}

.guild-banner-stripe {
  color: var(--accent-bright);
  border-bottom-color: var(--border);
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent);
}

.hero-badge {
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(167, 139, 250, 0.3);
  color: var(--accent-bright);
  box-shadow: none;
  animation: none;
}

.hero-glass {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: var(--radius);
  box-shadow: var(--panel-glow);
}

.gradient-text {
  background: linear-gradient(135deg, #c4b5fd 0%, #93c5fd 50%, #818cf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-welcome-full .hero-crew-word {
  color: var(--guild-accent-bright);
  text-shadow: none;
  animation: none;
  transform: none;
}

.crew-pill,
.guild-pill {
  background: var(--bg-main);
  border: 1px solid var(--border);
  box-shadow: none;
  border-radius: var(--radius-xs);
}

.crew-pill:hover,
.guild-pill:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 16px var(--accent-glow);
  transform: translateY(-2px);
}

.crew-pill.is-active,
.crew-pill.is-active.guild-pill {
  background: rgba(99, 102, 241, 0.15);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.2);
}

/* —— Panels —— */
.fusion-panel {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--panel-glow);
  overflow: hidden;
}

.fusion-panel-guild {
  border-left: 3px solid var(--accent);
  border-color: var(--border);
  box-shadow: var(--panel-glow);
}

.fusion-panel-guild .fusion-panel-head {
  background: var(--bg-main);
  border-bottom: 1px solid var(--border);
  text-shadow: none;
  font-family: var(--font-gaming);
  letter-spacing: 0.06em;
}

.fusion-panel-guild .fusion-panel-body {
  background: var(--bg-card);
}

.fusion-panel-center {
  border-radius: var(--radius);
}

.guild-count {
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(167, 139, 250, 0.3);
  color: var(--accent-bright);
}

/* —— Buttons —— */
.btn-primary {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border: 1px solid rgba(196, 181, 253, 0.4);
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
  border-radius: var(--radius-xs);
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%);
  box-shadow: 0 6px 28px rgba(99, 102, 241, 0.4);
  transform: translateY(-2px);
}

.btn-secondary {
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
}

.btn-secondary:hover:not(:disabled) {
  border-color: var(--accent);
  background: rgba(99, 102, 241, 0.08);
}

/* —— Hub / Forum —— */
.hub-tab.active,
.hub-filter.active,
.fusion-filter-btn.active,
.cat-btn.active {
  background: rgba(99, 102, 241, 0.15);
  border-color: var(--accent);
  color: var(--accent-bright);
}

.section-tag,
.guild-tag {
  color: var(--accent-bright);
  border-color: rgba(167, 139, 250, 0.35);
  background: rgba(99, 102, 241, 0.1);
}

.hero-stats-banner {
  border-top-color: var(--border);
}

.hero-stats-banner .hero-stat-num {
  color: var(--accent-bright);
}

.glass-stat {
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
}

/* —— Footer —— */
.footer-bar {
  background: var(--bg-main);
  border-top: 1px solid var(--border);
  text-transform: none;
  letter-spacing: 0.02em;
}

.footer {
  background: transparent;
}

/* —— Modals —— */
.modal {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* —— Light mode Feinschliff —— */
[data-theme="light"] .fusion-header-main,
[data-theme="light"] .guild-header-bar .fusion-header-main {
  background: var(--header-bg);
  border-bottom-color: var(--border);
}

[data-theme="light"] .fusion-menu .fusion-menu-link.active {
  color: #fff;
}

[data-theme="light"] .header-brand-crew {
  color: #3730a3;
  background: rgba(99, 102, 241, 0.12);
  -webkit-text-fill-color: #3730a3;
}