/* ============================================================
   Theme — "Pumpkin Ember"
   ------------------------------------------------------------
   Applies the styling language of the supplied
   halloween_background_theme.html to the app: near-black slate
   washed with a warm moon glow, pumpkin orange `#f97316` as the
   primary accent, witch purple `#a855f7` as the secondary, the
   Creepster display face for the page title and brand, and the
   reference's `rgba(15, 10, 25, .75)` glass panels.

   Layers on top of assets/style.css — tokens first, then the few
   rules there that hard-code the default purple neon.

   Preview it with ?theme=halloween on any page.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* Base surfaces — the reference's sky gradient, top to bottom */
  --bg: #020617;
  --bg-alt: #0f0716;
  --card: rgba(255, 255, 255, 0.05);
  --card-solid: rgba(15, 10, 25, 0.74);
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(249, 115, 22, 0.4);

  /* Pumpkin, ember and witch craft */
  --purple: #ea580c;
  --purple-light: #fdba74;
  --neon: #f97316;
  --cyan: #a855f7;
  --text: #f1f5f9;
  --text-dim: #94a3b8;

  /* Status + data colours */
  --green: #22c55e;
  --yellow: #fbbf24;
  --red: #f87171;
  --blue: #a78bfa;
  --pink: #f472b6;

  /* Shared effects — the reference's .glass-panel recipe */
  --glow-purple: 0 0 12px rgba(249, 115, 22, 0.5);
  --glow-cyan: 0 0 12px rgba(168, 85, 247, 0.4);
  --glass: linear-gradient(160deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.014));
  --card-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 28px rgba(249, 115, 22, 0.12);
}

html { scrollbar-color: rgba(255, 115, 0, 0.45) rgba(0, 0, 0, 0.2); }

/* Ember-orange moon high on the right, witch haze low on the left, over the
   reference's #020617 → #0f0716 → #1a0c03 night. */
body {
  font-family: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(900px 560px at 80% 6%, rgba(251, 146, 60, 0.16), transparent 62%),
    radial-gradient(1100px 620px at 8% 104%, rgba(168, 85, 247, 0.14), transparent 60%),
    radial-gradient(760px 420px at 50% -10%, rgba(249, 115, 22, 0.1), transparent 60%),
    linear-gradient(180deg, #020617 0%, #0f0716 55%, #1a0c03 100%);
  background-attachment: fixed;
}

/* Creepster is the reference's one display face — page title and brand. */
h1, nav .brand {
  font-family: "Creepster", "Chiller", "Papyrus", cursive;
  font-weight: 400;
  letter-spacing: 0.03em;
}

h1 {
  font-size: 34px;
  line-height: 1.15;
  background: linear-gradient(90deg, #fb923c 0%, #d8b4fe 55%, #f97316 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(249, 115, 22, 0.5));
}
/* Section headings stay in the UI face, extra-bold like the hero card. */
h2 { font-weight: 800; letter-spacing: -0.01em; }

/* ---------- Nav ---------- */

nav {
  background: rgba(2, 6, 23, 0.86);
  border-bottom-color: rgba(249, 115, 22, 0.26);
  box-shadow: 0 1px 0 rgba(249, 115, 22, 0.38), 0 10px 34px rgba(0, 0, 0, 0.6);
}
nav .brand {
  font-size: 21px;
  color: var(--neon);
  text-shadow: 0 2px 12px rgba(249, 115, 22, 0.55);
  text-transform: none;
}
nav .brand span {
  background: linear-gradient(90deg, #fdba74, #a855f7);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--purple-light);
}
nav .links a:hover {
  color: #fdba74;
  text-shadow: 0 0 14px rgba(249, 115, 22, 0.75);
}
nav .links a.active {
  color: #fdba74;
  border-bottom-color: var(--neon);
  filter: drop-shadow(0 0 6px rgba(249, 115, 22, 0.8));
}
nav .links a.nav-user { color: #fdba74; }

.nav-drop-menu {
  background: rgba(15, 10, 25, 0.97);
  border-color: rgba(249, 115, 22, 0.3);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.7), 0 0 18px rgba(249, 115, 22, 0.15);
}
.nav-drop-menu a:hover { background: rgba(249, 115, 22, 0.16); }
nav .links .nav-drop-menu a.active { border-bottom-color: rgba(249, 115, 22, 0.6); }

/* ---------- Glass panels ---------- */

.card, .stat, .artist-hero, .preview-hero, .not-found-card {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55),
              inset 0 1px 0 rgba(255, 255, 255, 0.12),
              0 0 28px rgba(249, 115, 22, 0.1);
}
.card::before {
  background: linear-gradient(90deg, transparent, rgba(249, 115, 22, 0.6), rgba(168, 85, 247, 0.4), transparent);
}
.stats-row-heading::after { background: linear-gradient(90deg, rgba(249, 115, 22, 0.5), transparent); }

.stat .num {
  color: #fdba74;
  text-shadow: 0 0 15px rgba(249, 115, 22, 0.6), 0 0 30px rgba(249, 115, 22, 0.3);
}
a.stat:hover .num { filter: drop-shadow(0 0 10px rgba(249, 115, 22, 0.7)); }
a.stat:hover .stat-go { text-shadow: 0 0 12px rgba(249, 115, 22, 0.8); }
.stat-go { color: #fdba74; }
.stat[role="button"]:hover, a.stat:hover {
  border-color: rgba(249, 115, 22, 0.55);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5), 0 0 24px rgba(249, 115, 22, 0.22);
}

/* ---------- Tables ---------- */

th { color: #94a3b8; }
table tr:hover td { background: rgba(249, 115, 22, 0.07); }

/* ---------- Controls: the reference's rounded-xl ember buttons ---------- */

.btn {
  border-radius: 12px;
  background: linear-gradient(135deg, #f97316 0%, #d97706 100%);
  color: #fff;
  box-shadow: 0 10px 24px rgba(249, 115, 22, 0.28);
}
.btn:hover {
  filter: brightness(1.1);
  box-shadow: 0 12px 30px rgba(249, 115, 22, 0.42), 0 0 20px rgba(249, 115, 22, 0.3);
}
.btn-small { border-radius: 10px; }

.btn-secondary {
  background: rgba(15, 10, 25, 0.75);
  border-color: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.btn-secondary:hover {
  background: rgba(249, 115, 22, 0.14);
  border-color: rgba(249, 115, 22, 0.55);
  box-shadow: 0 0 16px rgba(249, 115, 22, 0.25);
}

.btn-danger {
  background: rgba(248, 113, 113, 0.1);
  border-color: rgba(248, 113, 113, 0.5);
}
.btn-danger:hover { background: rgba(248, 113, 113, 0.85); border-color: var(--red); }

/* ---------- Pills, forms ---------- */

.pill { background: rgba(255, 255, 255, 0.06); }

.form-row input, .form-row select, .form-row textarea,
#typedConfirmInput {
  background: rgba(10, 8, 22, 0.72);
  border-color: rgba(255, 255, 255, 0.12);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  border-color: var(--neon);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2);
}
.form-hint code { background: rgba(255, 255, 255, 0.07); }

/* ---------- Modals ---------- */

dialog {
  background: linear-gradient(180deg, rgba(21, 13, 33, 0.98), rgba(6, 3, 14, 0.99));
  border-color: rgba(249, 115, 22, 0.35);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.8), 0 0 44px rgba(168, 85, 247, 0.18);
}
dialog::backdrop { background: rgba(2, 6, 23, 0.76); backdrop-filter: blur(6px); }
.modal-stats { background: rgba(249, 115, 22, 0.09); }
.modal-close:hover { text-shadow: 0 0 12px rgba(249, 115, 22, 0.9); }

/* ---------- Sticky radio bar ---------- */

.radio-bar {
  background: linear-gradient(180deg, rgba(15, 10, 25, 0.95), rgba(2, 6, 23, 0.98));
  border-top-color: rgba(249, 115, 22, 0.3);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.6);
}
.radio-play {
  background: linear-gradient(135deg, #f97316, #d97706);
  box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.45), 0 0 18px rgba(249, 115, 22, 0.45);
}
.radio-bar input[type="range"] { accent-color: var(--neon); }

/* ---------- Map ---------- */

.leaflet-popup-content-wrapper,
.leaflet-popup-tip { border-color: rgba(249, 115, 22, 0.38); }
.leaflet-popup-content-wrapper {
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.65), 0 0 20px rgba(249, 115, 22, 0.16);
}
.leaflet-control-attribution { background: rgba(15, 10, 25, 0.85) !important; }

/* ---------- Footer ---------- */

.site-footer { border-top-color: rgba(249, 115, 22, 0.18); }
.site-footer-links a:hover { color: #fdba74; }