/*
 * GXXXN.LIVE — BLACKLIGHT REACTIVE v3
 * Palette/style inspired only by the uploaded blacklight color reference:
 * near-black base, fluorescent magenta, ultraviolet blue/violet, cyan,
 * acid green/yellow and small hot-orange highlights. No copied imagery.
 */

:root {
  --bl-black: #010103;
  --bl-black-2: #040108;
  --bl-black-3: #08030d;
  --bl-magenta: #ff16c8;
  --bl-pink: #ff43ea;
  --bl-violet: #7f35ff;
  --bl-blue: #255dff;
  --bl-cyan: #00eaff;
  --bl-teal: #00ffc3;
  --bl-lime: #b8ff12;
  --bl-yellow: #efff2a;
  --bl-orange: #ff7b17;
  --bl-white: #fffaff;
  --bl-muted: #b4a5bd;
  --bl-line: rgba(127,53,255,.22);
  --bl-spectrum: linear-gradient(90deg,
    var(--bl-magenta) 0%,
    var(--bl-violet) 23%,
    var(--bl-blue) 42%,
    var(--bl-cyan) 60%,
    var(--bl-teal) 72%,
    var(--bl-lime) 87%,
    var(--bl-yellow) 100%);
  --bl-glow-magenta: 0 0 5px rgba(255,22,200,.88), 0 0 18px rgba(255,22,200,.52), 0 0 42px rgba(255,22,200,.18);
  --bl-glow-cyan: 0 0 5px rgba(0,234,255,.88), 0 0 18px rgba(0,234,255,.46), 0 0 36px rgba(0,234,255,.16);
  --bl-glow-lime: 0 0 5px rgba(184,255,18,.82), 0 0 18px rgba(184,255,18,.34);
}

html,
body {
  background: var(--bl-black) !important;
}

body {
  color: var(--bl-white) !important;
  background-image:
    radial-gradient(ellipse at 9% 9%, rgba(255,22,200,.13), transparent 22rem),
    radial-gradient(ellipse at 88% 12%, rgba(37,93,255,.12), transparent 28rem),
    radial-gradient(ellipse at 74% 54%, rgba(0,234,255,.055), transparent 30rem),
    radial-gradient(ellipse at 18% 72%, rgba(184,255,18,.045), transparent 24rem),
    linear-gradient(180deg, #010103 0%, #030106 50%, #010103 100%) !important;
}

/* Very faint UV-reactive pigment noise. Abstract only. */
body::before {
  opacity: .42 !important;
  background-image:
    radial-gradient(circle at 11% 17%, rgba(255,22,200,.32) 0 1px, transparent 1.5px),
    radial-gradient(circle at 73% 31%, rgba(0,234,255,.26) 0 1px, transparent 1.6px),
    radial-gradient(circle at 39% 76%, rgba(184,255,18,.18) 0 1px, transparent 1.5px) !important;
  background-size: 103px 91px, 137px 119px, 173px 151px !important;
  filter: blur(.15px);
}

body::after {
  opacity: .018 !important;
}

/* Clean up the old decorative chrome. */
.store-marquee,
.status-card::before,
.hero::before,
.hero-sign,
.hero-kicker,
.hero-open {
  display: none !important;
}

main,
footer {
  width: min(1500px, calc(100% - 36px)) !important;
}

.topbar {
  padding-block: 12px !important;
}

.topbar::before {
  background: rgba(1,1,3,.91) !important;
  border-bottom: 1px solid rgba(0,234,255,.12) !important;
  box-shadow: 0 10px 36px rgba(0,0,0,.64) !important;
}

.brand-mark,
.age-logo {
  border: 0 !important;
  background: #07020b !important;
  color: var(--bl-magenta) !important;
  box-shadow: var(--bl-glow-magenta), inset 0 0 22px rgba(127,53,255,.18) !important;
}

.brand-copy > span,
.footer-brand > span {
  color: var(--bl-cyan) !important;
  text-shadow: var(--bl-glow-cyan) !important;
}

.brand-copy small {
  color: var(--bl-lime) !important;
  text-shadow: var(--bl-glow-lime) !important;
}

/* Search: matte black with one fluorescent spectrum edge. */
#searchForm.search,
.search {
  position: relative;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  background:
    linear-gradient(#050108, #050108) padding-box,
    var(--bl-spectrum) border-box !important;
  box-shadow: 0 0 18px rgba(127,53,255,.12) !important;
}

#searchForm.search:focus-within,
.search:focus-within {
  box-shadow: var(--bl-glow-cyan) !important;
  transform: translateY(-1px);
}

.search-icon {
  color: var(--bl-magenta) !important;
  text-shadow: var(--bl-glow-magenta) !important;
}

.search input {
  caret-color: var(--bl-lime) !important;
}

.search button,
.primary-button,
.load-more {
  border: 0 !important;
  color: #010103 !important;
  background: var(--bl-lime) !important;
  box-shadow: var(--bl-glow-lime) !important;
}

.search button:hover,
.primary-button:hover,
.load-more:hover {
  background: var(--bl-cyan) !important;
  box-shadow: var(--bl-glow-cyan) !important;
}

.source-control > span,
.orientation-label,
.search-source-note strong,
.eyebrow,
.intel-stamp {
  color: var(--bl-yellow) !important;
  text-shadow: 0 0 10px rgba(239,255,42,.35) !important;
}

/* Hero: no sign, no panel, just fluorescent type on black. */
.hero {
  min-height: 430px !important;
  grid-template-columns: minmax(0,1.5fr) minmax(250px,.45fr) !important;
  align-items: center !important;
  padding: clamp(52px,7vw,90px) 0 52px !important;
}

.hero-copy-wrap {
  position: relative;
  max-width: 970px;
}

.blacklight-wordmark {
  margin: 0 !important;
}

.blacklight-wordmark::before {
  display: none !important;
}

.blacklight-wordmark h1,
#sceneTitle {
  margin: 0 !important;
  font-size: clamp(4.7rem, 10.5vw, 10.8rem) !important;
  font-weight: 1000 !important;
  line-height: .74 !important;
  letter-spacing: -.075em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}

.blacklight-wordmark .uv-hot,
.blacklight-wordmark .uv-spectrum,
#sceneTitle > span {
  color: transparent !important;
  background: var(--bl-spectrum) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 5px rgba(255,22,200,.55)) drop-shadow(0 0 14px rgba(0,234,255,.18)) !important;
}

.blacklight-wordmark h1 small,
#sceneTitle small {
  display: block !important;
  margin: .12em 0 0 .055em !important;
  color: var(--bl-white) !important;
  font-size: .23em !important;
  font-weight: 900 !important;
  letter-spacing: .42em !important;
  text-shadow: 0 0 5px rgba(255,255,255,.75), 0 0 18px rgba(0,234,255,.28) !important;
}

.hero-copy {
  max-width: 720px !important;
  color: #cabdd0 !important;
  font-size: 1rem !important;
  line-height: 1.68 !important;
}

.text-link {
  color: var(--bl-cyan) !important;
  text-shadow: 0 0 10px rgba(0,234,255,.25) !important;
}

/* Less boxed UI. Blacklight feels strongest against empty black. */
.status-card,
.category-deck,
.affiliate-market,
.intel-panel,
.age-card {
  background: rgba(4,1,7,.72) !important;
  border: 1px solid rgba(127,53,255,.14) !important;
  box-shadow: none !important;
}

.status-card {
  border-left: 2px solid var(--bl-cyan) !important;
}

.status-dot {
  background: var(--bl-lime) !important;
  box-shadow: var(--bl-glow-lime) !important;
}

.status-grid b {
  color: var(--bl-cyan) !important;
  text-shadow: 0 0 9px rgba(0,234,255,.24) !important;
}

.category-deck,
.affiliate-market {
  border-radius: 12px !important;
}

.category-head h2,
.affiliate-market h2,
.feed-head h2 {
  color: var(--bl-white) !important;
  text-shadow: none !important;
}

.feed-head {
  border-top: 1px solid rgba(255,22,200,.16) !important;
}

/* Fluorescent chips: each family gets a different UV-reactive hue. */
.chip,
.ghost-button,
.orientation-button,
.recent-pill,
.category-rail button,
.category-rail a,
.provider-categories summary,
.save-button {
  border: 1px solid rgba(127,53,255,.22) !important;
  background: rgba(5,1,9,.9) !important;
  color: #e8deec !important;
  box-shadow: none !important;
}

.chip:nth-child(4n+1) { border-color: rgba(255,22,200,.4) !important; }
.chip:nth-child(4n+2) { border-color: rgba(0,234,255,.4) !important; }
.chip:nth-child(4n+3) { border-color: rgba(184,255,18,.35) !important; }
.chip:nth-child(4n)   { border-color: rgba(127,53,255,.44) !important; }

.chip:hover,
.ghost-button:hover,
.orientation-button:hover,
.recent-pill:hover,
.category-rail button:hover,
.category-rail a:hover,
.provider-categories summary:hover {
  color: var(--bl-white) !important;
  border-color: var(--bl-cyan) !important;
  box-shadow: 0 0 12px rgba(0,234,255,.22) !important;
}

.chip.active,
.orientation-button.active,
.ghost-button.active {
  color: #010103 !important;
  border-color: transparent !important;
  background: var(--bl-cyan) !important;
  box-shadow: var(--bl-glow-cyan) !important;
}

/* Video wall: matte black cards with fluorescent pigment edges, not neon boxes. */
.video-grid {
  gap: 30px 18px !important;
}

.video-card {
  position: relative;
  padding-bottom: 5px;
}

.video-card::before {
  display: none !important;
}

.video-card::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 28%;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--bl-spectrum);
  box-shadow: 0 0 9px rgba(255,22,200,.28), 0 0 13px rgba(0,234,255,.16);
  opacity: .45;
  transition: right .2s ease, opacity .2s ease;
}

.video-card:hover::after {
  right: 3px;
  opacity: 1;
}

.thumb-button {
  border: 1px solid rgba(127,53,255,.18) !important;
  border-radius: 13px !important;
  background: #030105 !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.55) !important;
}

.thumb-button:hover {
  border-color: rgba(255,22,200,.58) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.65), 0 0 15px rgba(255,22,200,.18) !important;
}

.provider-badge {
  color: #010103 !important;
  background: var(--bl-yellow) !important;
  border: 0 !important;
  box-shadow: 0 0 10px rgba(239,255,42,.34) !important;
}

.duration {
  color: var(--bl-cyan) !important;
  border-color: rgba(0,234,255,.25) !important;
  background: rgba(0,0,0,.9) !important;
}

.play-badge {
  color: #010103 !important;
  background: var(--bl-magenta) !important;
  box-shadow: var(--bl-glow-magenta) !important;
}

.title-button:hover {
  color: var(--bl-cyan) !important;
  text-shadow: 0 0 9px rgba(0,234,255,.2) !important;
}

.save-button.saved {
  color: #010103 !important;
  background: var(--bl-lime) !important;
  border-color: transparent !important;
  box-shadow: var(--bl-glow-lime) !important;
}

/* Player and dialogs keep the room black; fluorescent color is reserved for edges/actions. */
.player-dialog {
  background: rgba(1,1,3,.97) !important;
  border: 1px solid rgba(127,53,255,.22) !important;
  box-shadow: 0 30px 100px rgba(0,0,0,.82) !important;
}

.player-frame-wrap {
  border: 1px solid rgba(255,22,200,.28) !important;
  box-shadow: 0 0 18px rgba(255,22,200,.08) !important;
}

.dialog-close,
.toast {
  color: var(--bl-cyan) !important;
}

.toast {
  border-color: rgba(0,234,255,.35) !important;
  background: rgba(1,1,3,.96) !important;
  box-shadow: 0 0 18px rgba(0,234,255,.18) !important;
}

footer {
  border-top-color: rgba(127,53,255,.18) !important;
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  .status-card {
    max-width: 620px;
  }
}

@media (max-width: 760px) {
  main,
  footer {
    width: min(100% - 24px, 1500px) !important;
  }

  .blacklight-wordmark h1,
  #sceneTitle {
    font-size: clamp(4.2rem, 20vw, 7rem) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .video-card::after,
  #searchForm.search,
  .search {
    transition: none !important;
  }
}