/* ==========================================================================
   BeatDesk / LyricBingo — UNIFIED REDESIGN LAYER
   --------------------------------------------------------------------------
   Authoritative cohesive design system. Loaded LAST so it wins the cascade
   over the legacy beatdesk-* stylesheets. One visual language across every
   page: landing, logged-in home, dashboard, playlist library, playlist
   detail + host console, auth, venue display.

   Concept: "Neon Stage" — confident graphite dark UI, electric violet/teal
   accents, lime as the live-energy pop. Glassy elevated panels, one card
   recipe, one button system, one typographic rhythm.
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS  (override prior :root, propagate everywhere)
   ========================================================================== */
:root {
  /* — Surfaces: layered graphite with depth — */
  --bg-0: #07060e;          /* page base (deepest) */
  --bg-1: #0c0a18;          /* base panel */
  --bg-2: #131127;          /* elevated panel */
  --bg-3: #1b1836;          /* raised / hover */
  --bg-4: #252146;          /* pressed / active */

  /* gradient surface recipes (use as background) */
  --surface-card: linear-gradient(160deg, rgba(31,27,62,0.55) 0%, rgba(16,13,33,0.78) 100%);
  --surface-card-hover: linear-gradient(160deg, rgba(44,38,84,0.7) 0%, rgba(20,16,40,0.85) 100%);
  --surface-panel: linear-gradient(180deg, rgba(20,17,40,0.9) 0%, rgba(12,10,24,0.92) 100%);
  --surface-glass: rgba(18,16,38,0.6);

  /* — Brand — */
  --bd-violet: #8b5cf6;
  --bd-violet-hover: #7c3aed;
  --bd-violet-soft: #b9a6ff;
  --bd-indigo: #6366f1;
  --bd-teal: #2dd4bf;
  --bd-teal-deep: #14b8a6;
  --bd-lime: #c6ff4a;
  --bd-pink: #f472b6;
  --bd-gold: #fbbf24;

  /* gradients */
  --grad-primary: linear-gradient(135deg, #9b6dff 0%, #7c3aed 55%, #6d28d9 100%);
  --grad-primary-hover: linear-gradient(135deg, #a883ff 0%, #8b5cf6 55%, #7c3aed 100%);
  --grad-accent: linear-gradient(120deg, #8b5cf6, #2dd4bf);
  --grad-aurora:
    radial-gradient(120% 80% at 12% -10%, rgba(139,92,246,0.20) 0%, transparent 55%),
    radial-gradient(100% 70% at 100% 0%, rgba(45,212,191,0.12) 0%, transparent 50%),
    radial-gradient(90% 90% at 50% 120%, rgba(99,102,241,0.10) 0%, transparent 60%);

  /* — Text — */
  --tx-strong: #fbf8ff;
  --tx: #ece7fb;
  --tx-sub: #a39cc4;
  --tx-muted: #6f6890;
  --tx-faint: #4d4769;

  /* — Lines / borders — */
  --line: rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.14);
  --line-violet: rgba(139,92,246,0.32);

  /* — Card system — */
  --card-bd: 1px solid var(--line);
  --card-radius: 18px;
  --card-shadow: 0 1px 0 0 rgba(255,255,255,0.04) inset, 0 18px 40px -24px rgba(0,0,0,0.8);
  --card-shadow-hover: 0 1px 0 0 rgba(255,255,255,0.07) inset, 0 28px 60px -28px rgba(0,0,0,0.9), 0 0 0 1px var(--line-violet);

  /* — Radius scale — */
  --r-xs: 9px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* — Spacing rhythm — */
  --space-section: clamp(3rem, 7vw, 5.5rem);
  --shell-max: 1200px;
  --shell-pad: clamp(1.1rem, 4vw, 2rem);

  /* — Type — */
  --font-body: "DM Sans", system-ui, -apple-system, sans-serif;
  --font-display: "Sora", "DM Sans", system-ui, sans-serif;

  /* — Effects — */
  --glow-violet: 0 14px 40px -12px rgba(139,92,246,0.55);
  --glow-teal: 0 14px 40px -14px rgba(45,212,191,0.45);
  --focus-ring: 0 0 0 3px rgba(139,92,246,0.5);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* legacy aliases so old rules pick up new palette */
  --bd-text: var(--tx);
  --bd-text-sub: var(--tx-sub);
  --bd-text-muted: var(--tx-muted);
  --bd-cream: var(--tx-strong);
  --bd-cream-muted: var(--tx-sub);
  --bd-divider: var(--line);
  --sp-base: var(--bg-0);
  --sp-elevated: var(--bg-2);
  --sp-highlight: var(--bg-2);
  --sp-hover: var(--bg-3);
  --bd-violet-glow: rgba(139,92,246,0.4);
}

/* ==========================================================================
   2. BASE / GLOBAL CANVAS
   ========================================================================== */
html { scroll-behavior: smooth; }

body {
  background: var(--bg-0) !important;
  color: var(--tx) !important;
  font-family: var(--font-body) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Persistent aurora canvas behind everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--grad-aurora), var(--bg-0);
  display: block !important;
}

::selection { background: rgba(139,92,246,0.5); color: #fff; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(139,92,246,0.28);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(139,92,246,0.5); background-clip: padding-box; }

/* Consistent focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible,
summary:focus-visible {
  outline: none !important;
  box-shadow: var(--focus-ring) !important;
  border-radius: var(--r-sm);
}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, .font-display {
  font-family: var(--font-display) !important;
  color: var(--tx-strong) !important;
  letter-spacing: -0.03em !important;
}
h1 { line-height: 1.02 !important; font-weight: 800 !important; }
h2 { line-height: 1.08 !important; font-weight: 800 !important; }
h3 { line-height: 1.15 !important; font-weight: 700 !important; }

/* Eyebrow / kicker — used across pages for cohesion */
.section-kicker,
.bd-dj-section-head > p:first-child {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--bd-violet-soft) !important;
}
.section-kicker::before {
  content: "";
  width: 1.6rem;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-accent);
}

/* ==========================================================================
   4. SHELL — header + footer
   ========================================================================== */
header.site-header {
  position: sticky !important;
  top: 0;
  z-index: 60;
  background: rgba(8,7,16,0.72) !important;
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--line) !important;
  transition: box-shadow .25s var(--ease), background .25s var(--ease);
}
header.site-header.bd-header-scrolled,
header.site-header.bd-pro-header {
  background: rgba(8,7,16,0.9) !important;
  box-shadow: 0 12px 40px -22px rgba(0,0,0,0.9);
}

.site-header .nav-link {
  position: relative;
  color: var(--tx-sub) !important;
  font-weight: 600 !important;
  transition: color .18s var(--ease);
}
.site-header .nav-link:hover { color: var(--tx-strong) !important; }
.site-header .nav-link--active { color: var(--tx-strong) !important; }
.site-header .nav-link--active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-accent);
}

.lb-brand-logo, .logo-mark { filter: drop-shadow(0 4px 14px rgba(139,92,246,0.4)); }

footer {
  border-top: 1px solid var(--line) !important;
  background: linear-gradient(180deg, transparent, rgba(139,92,246,0.04)) !important;
}

/* ==========================================================================
   5. PRIMITIVES — buttons
   ========================================================================== */
.btn-primary,
.bd-acc-btn--primary,
.bd-cta-big,
button[data-bd-upgrade],
.bd-dash-upgrade-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0.7rem 1.8rem !important;
  border: none !important;
  border-radius: var(--r-pill) !important;
  background: var(--grad-primary) !important;
  color: #fff !important;
  font-family: var(--font-body) !important;
  font-size: 0.97rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: var(--glow-violet) !important;
  transition: transform .12s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease) !important;
}
.btn-primary:hover,
.bd-acc-btn--primary:hover,
.bd-cta-big:hover,
button[data-bd-upgrade]:hover,
.bd-dash-upgrade-btn:hover {
  background: var(--grad-primary-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 22px 50px -14px rgba(139,92,246,0.7) !important;
}
.btn-primary:active, .bd-acc-btn--primary:active { transform: translateY(0) scale(0.99); }

.btn-secondary,
.bd-acc-btn--secondary,
.action-chip,
.btn-ghost,
.bd-acc-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.65rem 1.5rem !important;
  border-radius: var(--r-pill) !important;
  border: 1px solid var(--line-strong) !important;
  background: var(--surface-glass) !important;
  color: var(--tx-strong) !important;
  font-weight: 600 !important;
  font-size: 0.94rem !important;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform .12s var(--ease), border-color .2s var(--ease), background .2s var(--ease) !important;
}
.btn-secondary:hover,
.bd-acc-btn--secondary:hover,
.action-chip:hover,
.btn-ghost:hover,
.bd-acc-btn:hover {
  border-color: var(--line-violet) !important;
  background: var(--bg-3) !important;
  transform: translateY(-2px);
}

.btn-primary--sm, .site-header .btn-primary {
  min-height: 2.55rem;
  padding: 0.5rem 1.25rem !important;
  font-size: 0.9rem !important;
}

/* Filter pills (library + landing) */
.filter-pill {
  padding: 0.5rem 1.05rem !important;
  border-radius: var(--r-pill) !important;
  border: 1px solid var(--line) !important;
  background: var(--surface-glass) !important;
  color: var(--tx-sub) !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  transition: all .18s var(--ease);
}
.filter-pill:hover { color: var(--tx-strong) !important; border-color: var(--line-violet) !important; }
.filter-pill--active {
  background: var(--grad-primary) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: var(--glow-violet);
}

/* ==========================================================================
   6. PRIMITIVES — universal card recipe
   Applied to every card-like surface for one cohesive language.
   ========================================================================== */
.playlist-card,
.bd-pl-card,
.bd-poster-card,
.bd-dj-cat-card,
.bd-dj-result-card,
.bd-how-step,
.bd-experience-card,
.stat-card,
.flow-card,
.bd-hd-action,
.bd-hd-side-card,
.bd-hd-game-row,
.bd-dash-plan-card {
  position: relative;
  border: var(--card-bd) !important;
  border-radius: var(--card-radius) !important;
  background: var(--surface-card) !important;
  box-shadow: var(--card-shadow) !important;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease) !important;
}
.playlist-card:hover,
.bd-pl-card:hover,
.bd-poster-card:hover,
.bd-dj-cat-card:hover,
.bd-dj-result-card:hover,
.bd-how-step:hover,
.bd-experience-card:hover,
.stat-card:hover,
.flow-card:hover,
.bd-hd-action:hover,
.bd-hd-game-row:hover {
  transform: translateY(-4px);
  background: var(--surface-card-hover) !important;
  box-shadow: var(--card-shadow-hover) !important;
  border-color: var(--line-violet) !important;
}

/* Badges */
.playlist-card-badge,
.bd-pl-badge,
.bd-plan-badge {
  border-radius: var(--r-pill) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Inputs */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], select, textarea,
.bd-auth-field input, .bd-dj-search-hero__input, #bd-playlists-search {
  background: var(--bg-1) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--r-sm) !important;
  color: var(--tx-strong) !important;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--bd-violet) !important;
  box-shadow: 0 0 0 3px rgba(139,92,246,0.25) !important;
  outline: none !important;
}

/* ==========================================================================
   7. LANDING / WELCOME (guest)
   ========================================================================== */
.relative.flex.min-h-\[88vh\] {
  min-height: 94dvh !important;
  align-items: center !important;
  background:
    radial-gradient(120% 70% at 50% -5%, rgba(139,92,246,0.28) 0%, transparent 60%),
    radial-gradient(90% 60% at 85% 20%, rgba(45,212,191,0.14) 0%, transparent 55%),
    linear-gradient(180deg, #0a0818 0%, #07060e 80%) !important;
}
.relative.flex.min-h-\[88vh\] h1 {
  font-size: clamp(3rem, 7.2vw, 5.25rem) !important;
  line-height: 0.95 !important;
  font-weight: 800 !important;
  letter-spacing: -0.055em !important;
  background: linear-gradient(180deg, #fff 30%, #d9cffb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.relative.flex.min-h-\[88vh\] p {
  font-size: clamp(1.1rem, 2vw, 1.35rem) !important;
  line-height: 1.45 !important;
  color: var(--tx-sub) !important;
}

/* Landing hero side visual — richer card stack */
.relative.flex.min-h-\[88vh\] .bd-landing-visual {
  width: min(420px, 36%);
  height: min(380px, 46vh);
  border-radius: var(--r-xl);
  background: linear-gradient(155deg, rgba(139,92,246,0.3), rgba(45,212,191,0.14));
  border: 1px solid var(--line-strong);
  box-shadow: 0 40px 110px -28px rgba(0,0,0,0.7);
}
.bd-landing-visual .bd-vis-grid span { background: rgba(255,255,255,0.2); }
.bd-landing-visual .bd-vis-wave span {
  background: linear-gradient(to top, var(--bd-teal), var(--bd-violet-soft));
}

/* How it works */
.bd-how-grid { gap: 1.25rem; }
.bd-how-step .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  background: var(--grad-primary);
  color: #fff !important;
  font-weight: 800;
  box-shadow: var(--glow-violet);
  margin-bottom: 0.75rem;
}

/* Final CTA band */
.bd-final-inner {
  background:
    radial-gradient(120% 200% at 0% 0%, rgba(139,92,246,0.22), transparent 60%),
    var(--surface-card) !important;
  border: 1px solid var(--line-violet) !important;
  border-radius: var(--r-lg) !important;
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 2.75rem) !important;
  box-shadow: var(--card-shadow);
}

/* ==========================================================================
   8. LOGGED-IN HOME (vault)
   ========================================================================== */
html.bd-logged-in-home #bd-home-mount .bd-home-vault { background: transparent; }

.bd-home-hero, .bd-dj-home-hero {
  border-radius: var(--r-lg);
  background:
    radial-gradient(110% 120% at 0% 0%, rgba(139,92,246,0.22), transparent 55%),
    var(--surface-panel) !important;
  border: 1px solid var(--line) !important;
  overflow: hidden;
}
.bd-home-hero h1, .bd-dj-home-hero h1 {
  font-size: clamp(1.9rem, 4vw, 2.8rem) !important;
}

.bd-dj-section { margin-top: clamp(2rem, 5vw, 3rem); }
.bd-dj-section-head h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem) !important; margin-top: 0.4rem; }
.bd-dj-section-head p { color: var(--tx-sub) !important; }

/* Featured category cards */
.bd-dj-cat-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
  gap: 1rem !important;
}
.bd-dj-cat-card {
  display: flex !important;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem !important;
  text-align: left;
  overflow: hidden;
}
.bd-dj-cat-card__art {
  width: 3.1rem; height: 3.1rem;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--grad-accent);
  flex: none;
  box-shadow: 0 8px 20px -10px rgba(45,212,191,0.6);
}
.bd-dj-cat-card__emoji { font-size: 1.5rem; }
.bd-dj-cat-card__body strong { color: var(--tx-strong); font-weight: 700; }
.bd-dj-cat-card__meta { color: var(--tx-muted); font-size: 0.8rem; }

/* Playlist poster tiles */
.bd-pl-card { overflow: hidden; }
.bd-pl-card-art {
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: var(--grad-accent);
}
.bd-pl-card-body { padding: 0.85rem 0.95rem 1rem !important; }
.bd-pl-card-body strong { color: var(--tx-strong) !important; }

/* horizontal rails */
.bd-home-scroll { gap: 1rem !important; padding-bottom: 0.5rem; }

/* ==========================================================================
   9. USER DASHBOARD
   ========================================================================== */
#bd-account-mount .bd-dash.bd-hd { color: var(--tx); }

.bd-hd-top { align-items: flex-end; }
.bd-hd-greeting h1 { font-size: clamp(1.8rem, 4vw, 2.6rem) !important; }
.bd-hd-greeting p { color: var(--tx-sub) !important; }

/* status pills */
.bd-hd-pill {
  border: 1px solid var(--line) !important;
  background: var(--surface-glass) !important;
  border-radius: var(--r-md) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.bd-hd-pill--gold { border-color: rgba(251,191,36,0.35) !important; }
.bd-hd-pill--live { border-color: rgba(198,255,74,0.4) !important; }
.bd-hd-pill__icon { color: var(--bd-violet-soft); }

/* Quick action cards */
.bd-hd-actions {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)) !important;
  gap: 1rem !important;
}
.bd-hd-action {
  display: flex !important;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.3rem 1.25rem !important;
  text-decoration: none;
  overflow: hidden;
}
.bd-hd-action::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(130% 100% at 100% 0%, rgba(139,92,246,0.18), transparent 60%);
  opacity: 0;
  transition: opacity .25s var(--ease);
  pointer-events: none;
}
.bd-hd-action:hover::after { opacity: 1; }
.bd-hd-action__icon {
  width: 2.85rem; height: 2.85rem;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-size: 1.35rem;
  background: var(--bg-3);
  border: 1px solid var(--line-strong);
}
.bd-hd-action--start .bd-hd-action__icon { background: var(--grad-primary); border: none; box-shadow: var(--glow-violet); }
.bd-hd-action--browse .bd-hd-action__icon { background: var(--grad-accent); border: none; }
.bd-hd-action h3 { font-size: 1.05rem !important; }
.bd-hd-action p { color: var(--tx-sub) !important; font-size: 0.85rem; margin: 0; }
.bd-hd-action__btn {
  margin-top: auto;
  color: var(--bd-violet-soft) !important;
  font-weight: 700;
  font-size: 0.85rem;
}
.bd-hd-action--locked { opacity: 0.85; }
.bd-hd-premium-tag {
  font-size: 0.62rem; font-weight: 800;
  background: var(--grad-primary); color: #fff;
  padding: 0.1rem 0.5rem; border-radius: var(--r-pill);
  margin-left: 0.5rem; vertical-align: middle;
}

/* layout */
.bd-hd-layout { display: grid !important; grid-template-columns: minmax(0,1fr) 320px !important; gap: 1.5rem !important; align-items: start; }
@media (max-width: 920px) { .bd-hd-layout { grid-template-columns: 1fr !important; } }

/* recent games */
.bd-hd-games-head h2 { font-size: 1.25rem !important; }
.bd-hd-games-list { display: flex; flex-direction: column; gap: 0.6rem; }

/* loading / empty states */
.bd-hd-games-loading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1rem;
  color: var(--tx-sub);
  font-size: 0.9rem;
}
.bd-hd-games-loading p { margin: 0; }
.bd-hd-spinner {
  width: 1.25rem; height: 1.25rem;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  border-top-color: var(--bd-violet);
  animation: bd-spin .7s linear infinite;
  flex: none;
}
@keyframes bd-spin { to { transform: rotate(360deg); } }
.bd-hd-games-empty {
  padding: 1.25rem 1rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg-1);
  text-align: center;
}
.bd-hd-games-empty p { color: var(--tx-sub); margin: 0 0 0.75rem; }
.bd-hd-game-row {
  display: flex !important;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem !important;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.bd-hd-game-row__icon {
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  flex: none; font-size: 1.1rem;
}
.bd-hd-game-row__icon--pink { background: rgba(244,114,182,0.18); }
.bd-hd-game-row__icon--purple { background: rgba(139,92,246,0.2); }
.bd-hd-game-row__icon--teal { background: rgba(45,212,191,0.18); }
.bd-hd-game-row__icon--gold { background: rgba(251,191,36,0.18); }
.bd-hd-game-row__main strong { color: var(--tx-strong); }
.bd-hd-game-row__stat { color: var(--tx-sub); font-size: 0.82rem; }
.bd-hd-game-row__chev { color: var(--tx-muted); margin-left: auto; }

/* sidebar */
.bd-hd-sidebar { display: flex; flex-direction: column; gap: 1rem; }
.bd-hd-side-card { padding: 1.2rem 1.25rem !important; }
.bd-hd-side-card--premium, .bd-hd-side-card--upgrade {
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(139,92,246,0.25), transparent 55%),
    var(--surface-card) !important;
  border-color: var(--line-violet) !important;
}
.bd-hd-shortcuts { display: flex; flex-direction: column; gap: 0.2rem; }
.bd-hd-shortcuts a {
  color: var(--tx-sub) !important;
  padding: 0.55rem 0.65rem;
  border-radius: var(--r-xs);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.bd-hd-shortcuts a:hover { background: var(--bg-3); color: var(--tx-strong) !important; }
.bd-hd-sponsor-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.5rem; }
.bd-hd-sponsor-tile {
  aspect-ratio: 1; border-radius: var(--r-xs);
  background: var(--bg-1); border: 1px solid var(--line);
  display: grid; place-items: center; overflow: hidden;
}

/* admin tabs */
.bd-dash-admin-nav { gap: 0.4rem; border-bottom: 1px solid var(--line); }
.bd-dash-admin-tab {
  color: var(--tx-sub) !important; font-weight: 600;
  padding: 0.6rem 0.95rem; border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.bd-dash-admin-tab.is-active { color: var(--tx-strong) !important; background: var(--bg-2); }

/* ==========================================================================
   10. PLAYLIST LIBRARY (overlay)
   ========================================================================== */
.bd-dj-library { color: var(--tx); }
.bd-dj-library-head h1 { font-size: clamp(2rem, 5vw, 3rem) !important; }
.bd-dj-library-head p { color: var(--tx-sub) !important; }

.bd-dj-search-hero {
  background: var(--surface-panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  padding: 1.25rem !important;
  box-shadow: var(--card-shadow);
}
.bd-dj-search-hero__input {
  font-size: 1.05rem !important;
  padding: 0.85rem 1.1rem !important;
}

.bd-dj-results-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 1.1rem !important;
}
.bd-dj-result-card { display: flex; flex-direction: column; overflow: hidden; }
.bd-dj-result-card__main { display: flex; flex-direction: column; height: 100%; }
.bd-dj-result-card__body { padding: 1rem 1.1rem; }
.bd-dj-result-card__body h3 { font-size: 1.05rem !important; }
.bd-dj-result-card__body p { color: var(--tx-sub) !important; font-size: 0.85rem; }
.bd-dj-vibe-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.6rem; }
.bd-dj-vibe-chips > * {
  font-size: 0.68rem; font-weight: 700;
  padding: 0.18rem 0.55rem; border-radius: var(--r-pill);
  background: var(--bg-3); color: var(--bd-violet-soft);
}
.bd-dj-result-card__play, .bd-dj-result-card__unlock {
  margin-top: auto;
}

/* ==========================================================================
   11. PLAYLIST DETAIL + HOST PLAYER + CONSOLE
   ========================================================================== */
.game-hero--detail {
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  overflow: hidden;
}
.game-hero-overlay {
  background: linear-gradient(180deg, rgba(7,6,14,0.2) 0%, rgba(7,6,14,0.82) 100%) !important;
}
.game-hero--detail h1 { font-size: clamp(2rem, 5vw, 3.1rem) !important; }

/* unify the panels with the rest of the app */
.sp-player, .sp-queue {
  background: var(--surface-card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

/* now-playing queue row uses lime live-energy accent */
.sp-queue-row--now {
  background: linear-gradient(90deg, rgba(198,255,74,0.12), transparent) !important;
  border-left: 3px solid var(--bd-lime) !important;
}
.sp-queue-now { color: var(--bd-lime) !important; font-weight: 800 !important; }
.sp-status { color: var(--bd-teal) !important; }

/* primary play control */
.sp-ctrl--play {
  background: var(--grad-primary) !important;
  box-shadow: var(--glow-violet) !important;
}

/* Auto DJ button */
.sp-autodj-btn {
  border-radius: var(--r-pill) !important;
  border: 1px solid var(--line-strong) !important;
  background: var(--surface-glass) !important;
  transition: all .18s var(--ease);
}
.sp-autodj-btn--stop {
  background: var(--grad-accent) !important;
  border-color: transparent !important;
  color: #07060e !important;
  font-weight: 700 !important;
  box-shadow: var(--glow-teal);
}

/* Host console — cohesive panel */
#bd-host-console {
  background: var(--surface-panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
}
.bd-host-section { border-top-color: var(--line) !important; }
.bd-host-section-label {
  font-family: var(--font-display);
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bd-violet-soft) !important;
}
.bd-host-action {
  border-radius: var(--r-sm) !important;
  border: 1px solid var(--line-strong) !important;
  background: var(--surface-glass) !important;
  color: var(--tx-strong) !important;
  font-weight: 600 !important;
  transition: all .15s var(--ease);
}
.bd-host-action:hover { border-color: var(--line-violet) !important; background: var(--bg-3) !important; transform: translateY(-1px); }
.bd-host-action[data-action="player-autodj"] { background: var(--grad-accent) !important; color: #07060e !important; border: none !important; }
.bd-host-action[data-action="end"] { border-color: rgba(244,114,182,0.4) !important; color: #ffd9ec !important; }

/* win pattern tiles */
.bd-host-pattern-tile {
  border-radius: var(--r-xs) !important;
  border: 1px solid var(--line) !important;
  background: var(--bg-2) !important;
  color: var(--tx) !important;
  transition: all .15s var(--ease);
}
.bd-host-pattern-tile:hover { border-color: var(--line-violet) !important; }
.bd-host-pattern-tile.is-active,
.bd-host-pattern-tile[aria-pressed="true"] {
  border-color: var(--bd-violet) !important;
  background: rgba(139,92,246,0.18) !important;
  box-shadow: 0 0 0 1px var(--bd-violet) inset;
}

/* Host dock (mobile fixed bar) */
#bd-host-dock {
  background: rgba(8,7,16,0.9) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--line) !important;
}
.bd-host-dock-btn--play { background: var(--grad-primary) !important; box-shadow: var(--glow-violet); }

/* ==========================================================================
   12. AUTH
   ========================================================================== */
.bd-auth-card {
  background: var(--surface-panel) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,0.9) !important;
  max-width: 440px !important;
}
.bd-auth-card h1 { font-size: 1.9rem !important; }

/* ==========================================================================
   13. MOTION  (rich animations site-wide, modal-safe)
   --------------------------------------------------------------------------
   IMPORTANT: page-level containers animate OPACITY ONLY. A lingering transform
   (from `animation: ... both`) turns an element into the containing block for
   its `position: fixed` descendants, which would push modals off-center. All
   transform keyframes therefore END at `transform: none` to leave no residue.
   ========================================================================== */
@keyframes bd-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bd-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes bd-rise-soft {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes bd-pop {
  0% { opacity: 0; transform: scale(0.92); }
  60% { transform: scale(1.02); }
  100% { opacity: 1; transform: none; }
}
@keyframes bd-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Page shells — opacity only (keeps fixed modals centered) */
.bd-page-enter,
.bd-home-vault,
.bd-dash,
.bd-dj-library,
.bd-an { animation: bd-fade-in .45s var(--ease) both; }

/* Section blocks rise in */
.bd-dj-section,
.bd-dj-search-hero,
.bd-final-inner,
.bd-how,
.game-hero--detail,
.sp-player,
.sp-queue,
#bd-host-console,
.bd-hd-top,
.bd-hd-actions,
.bd-hd-layout { animation: bd-rise .55s var(--ease) both; }

/* Staggered children across every grid/rail */
.bd-dj-cat-grid > *,
.bd-hd-actions > *,
.bd-hd-games-list > *,
.bd-dj-results-grid > *,
.bd-home-scroll > *,
.bd-how-grid > *,
.bd-hd-pills > *,
.bd-experience-grid > * { animation: bd-rise-soft .5s var(--ease) both; }

.bd-dj-cat-grid > *:nth-child(1),  .bd-hd-actions > *:nth-child(1),  .bd-dj-results-grid > *:nth-child(1),  .bd-hd-games-list > *:nth-child(1) { animation-delay: .02s; }
.bd-dj-cat-grid > *:nth-child(2),  .bd-hd-actions > *:nth-child(2),  .bd-dj-results-grid > *:nth-child(2),  .bd-hd-games-list > *:nth-child(2) { animation-delay: .07s; }
.bd-dj-cat-grid > *:nth-child(3),  .bd-hd-actions > *:nth-child(3),  .bd-dj-results-grid > *:nth-child(3),  .bd-hd-games-list > *:nth-child(3) { animation-delay: .12s; }
.bd-dj-cat-grid > *:nth-child(4),  .bd-hd-actions > *:nth-child(4),  .bd-dj-results-grid > *:nth-child(4),  .bd-hd-games-list > *:nth-child(4) { animation-delay: .17s; }
.bd-dj-cat-grid > *:nth-child(5),  .bd-dj-results-grid > *:nth-child(5),  .bd-hd-games-list > *:nth-child(5) { animation-delay: .22s; }
.bd-dj-cat-grid > *:nth-child(n+6), .bd-dj-results-grid > *:nth-child(n+6), .bd-hd-games-list > *:nth-child(n+6) { animation-delay: .27s; }

/* Hero headline + landing visual */
.relative.flex.min-h-\[88vh\] h1 { animation: bd-rise .7s var(--ease) both; }
.relative.flex.min-h-\[88vh\] p { animation: bd-rise .7s .08s var(--ease) both; }
/* opacity-only: this element is positioned via transform: translateY(-52%) */
.relative.flex.min-h-\[88vh\] .bd-landing-visual { animation: bd-fade-in .9s .15s var(--ease) both; }

/* ── Micro-interactions ── */
.nav-link::after,
.nav-link--active::after { transition: transform .2s var(--ease); }
.site-header .nav-link { transition: color .18s var(--ease); }

.bd-hd-game-row { transition: transform .18s var(--ease), background .2s var(--ease), border-color .2s var(--ease) !important; }
.bd-hd-game-row:hover .bd-hd-game-row__chev { transform: translateX(3px); transition: transform .18s var(--ease); }

.bd-dj-cat-card__art,
.bd-hd-action__icon { transition: transform .25s var(--ease); }
.bd-dj-cat-card:hover .bd-dj-cat-card__art { transform: scale(1.06) rotate(-3deg); }
.bd-hd-action:hover .bd-hd-action__icon { transform: translateY(-2px) scale(1.04); }

.playlist-card-play,
.bd-pl-card-art { transition: transform .25s var(--ease); }
.playlist-card:hover .playlist-card-play { transform: scale(1.08); }

.sp-ctrl,
.action-chip,
.filter-pill,
.bd-host-action,
.sp-pill { transition: transform .12s var(--ease), background .2s var(--ease), border-color .2s var(--ease), filter .2s var(--ease) !important; }
.sp-ctrl:active,
.bd-host-action:active,
.action-chip:active { transform: translateY(1px) scale(0.98) !important; }

/* Now-playing artwork breathes */
.sp-artwork--live { animation: bd-float 3.2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   15. MODAL / OVERLAY SAFETY + cohesive toasts
   ========================================================================== */
/* The report/detail overlay: pin to viewport + center (was knocked off-center
   by an ancestor transform; page containers are now transform-free too). */
.bd-an-detail-overlay {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.bd-an-detail { margin: auto !important; }

/* Toasts must sit above modals (modal z-index ~12000) */
.bd-acc-toast,
.ui-toast {
  z-index: 13050 !important;
  background: var(--bg-3) !important;
  border: 1px solid var(--line-violet) !important;
  color: var(--tx-strong) !important;
  border-radius: var(--r-pill) !important;
  box-shadow: 0 18px 50px -16px rgba(0,0,0,0.85), var(--glow-violet) !important;
  font-weight: 700 !important;
  padding: 0.8rem 1.3rem !important;
}
.bd-acc-toast--error {
  border-color: rgba(244,114,182,0.6) !important;
  box-shadow: 0 18px 50px -16px rgba(0,0,0,0.85), 0 14px 40px -14px rgba(244,114,182,0.5) !important;
}

/* ==========================================================================
   17. ADMIN — emoji hints editor
   ========================================================================== */
.bd-emoji-admin .bd-emoji-pick {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: 360px;
  margin-bottom: 1rem;
}
.bd-emoji-admin .bd-emoji-pick > span {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--tx-sub);
}
.bd-emoji-songs {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 0.35rem;
}
.bd-emoji-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-1);
}
.bd-emoji-row__meta { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.bd-emoji-row__meta strong {
  color: var(--tx-strong);
  font-size: 0.92rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bd-emoji-row__meta span {
  color: var(--tx-muted);
  font-size: 0.78rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bd-emoji-row__edit { display: flex; align-items: center; gap: 0.5rem; }
.bd-emoji-row__preview {
  flex: none;
  min-width: 4.6rem;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: right;
}
.bd-emoji-input {
  flex: 1;
  min-width: 0;
  font-size: 1.05rem !important;
  padding: 0.5rem 0.6rem !important;
}
.bd-emoji-clear {
  flex: none;
  width: 2.1rem; height: 2.1rem;
  border-radius: var(--r-xs);
  border: 1px solid var(--line-strong);
  background: var(--surface-glass);
  color: var(--tx-sub);
  cursor: pointer;
  transition: all .15s var(--ease);
}
.bd-emoji-clear:hover { border-color: var(--line-violet); color: var(--tx-strong); }
.bd-emoji-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}
.bd-emoji-status { font-weight: 700; font-size: 0.88rem; color: var(--tx-sub); }
.bd-emoji-status--ok { color: var(--bd-teal); }
.bd-emoji-status--error { color: var(--bd-pink); }

@media (max-width: 600px) {
  .bd-emoji-row { grid-template-columns: 1fr; gap: 0.5rem; }
  .bd-emoji-row__preview { text-align: left; min-width: 0; }
}

/* ==========================================================================
   16. HOST "RUN THE GAME" PAGE — bring into the unified design language
   beatdesk-host.css hardcodes the OLD palette via .bd-host-page selectors;
   remap its variables so the whole console matches the rest of the site.
   ========================================================================== */
.bd-host-page {
  --host-surface: var(--bg-2);
  --host-surface-2: var(--bg-3);
  --host-border: var(--line);
  --host-radius: 16px;
  --bd-violet-dark: #6d28d9;
  --bd-violet-glow: rgba(139,92,246,0.45);
}
.bd-host-page .game-player {
  --bd-bg-card: var(--surface-card);
  --bd-bg-raised: var(--bg-3);
  --bd-bg-soft: rgba(255,255,255,0.05);
  --bd-border: var(--line);
  --bd-cream: var(--tx-strong);
  --bd-cream-muted: var(--tx-sub);
  --bd-violet: #8b5cf6;
  --bd-violet-light: var(--bd-violet-soft);
  --bd-teal: #2dd4bf;
  --bd-glow: rgba(139,92,246,0.4);
}

/* Console shell — unified panel */
.bd-host-page .mx-auto.max-w-6xl {
  background: var(--surface-panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--card-shadow) !important;
}
/* "Host console" kicker -> shared eyebrow style */
.bd-host-page .mx-auto.max-w-6xl::before {
  font-family: var(--font-display) !important;
  letter-spacing: 0.16em !important;
  color: var(--bd-violet-soft) !important;
}

/* Player stage + queue surfaces */
.bd-host-page .bd-host-grid .sp-player,
.bd-host-page .bd-host-grid .sp-queue {
  background: var(--surface-card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--card-radius) !important;
}
.bd-host-page .bd-host-grid .sp-player {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(139,92,246,0.16), transparent 60%),
    var(--surface-card) !important;
}
.bd-host-page .sp-title { font-family: var(--font-display) !important; }
.bd-host-page .sp-track::before,
.bd-host-page .sp-status { color: var(--bd-teal) !important; }

/* Now-playing queue row -> lime live accent (consistent with rest of app) */
.bd-host-page .sp-queue-row--now {
  background: linear-gradient(90deg, rgba(198,255,74,0.14), rgba(139,92,246,0.1)) !important;
  border: 1px solid rgba(198,255,74,0.45) !important;
}

/* Console action buttons -> unified */
.bd-host-page #bd-host-console .bd-host-action {
  background: var(--surface-glass) !important;
  border: 1px solid var(--line-strong) !important;
  color: var(--tx-strong) !important;
  border-radius: var(--r-sm) !important;
}
.bd-host-page #bd-host-console .bd-host-action:hover {
  border-color: var(--line-violet) !important;
  background: var(--bg-3) !important;
  filter: none;
  transform: translateY(-1px);
}
.bd-host-page #bd-host-console .bd-host-btn--accent { background: var(--grad-accent) !important; color: #07060e !important; }
.bd-host-page #bd-host-console .bd-host-btn--primary { background: var(--grad-primary) !important; }
.bd-host-page #bd-host-console .bd-host-section-label,
.bd-host-page #bd-host-console .bd-host-block-label { color: var(--bd-violet-soft) !important; }

/* ==========================================================================
   14. RESPONSIVE
   ========================================================================== */
@media (max-width: 640px) {
  .bd-hd-actions { grid-template-columns: 1fr !important; }
  .bd-dj-cat-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; }
  .relative.flex.min-h-\[88vh\] .bd-landing-visual { display: none; }
}