/* theme-nebula.css — CosmicOdds "Nebula HUD" retheme (branch: theme/nebula-hud)
   Override layer, loaded LAST in index.html. Navy base + purple nebula glows,
   glass (backdrop-blur) chrome, magenta accents. Data-viz elements (gauges,
   param bars, status colors) intentionally KEEP cyan for readability.
   Additive + override only: no selectors removed, no logic touched. */

:root {
  --neb-purple:  #7b2ff7;
  --neb-magenta: #e14eca;
  --neb-navy-0:  #050810;
  --neb-navy-1:  #0a1224;
  --neb-line:    rgba(158, 178, 255, .24);
  --neb-glass:   rgba(16, 28, 56, .45);
  /* re-point hud-theme.css widget edges from cyan to purple */
  --hud-line:    rgba(163, 113, 247, .35);
  --hud-panel:   rgba(14, 22, 44, .55);
}

/* ── 1. Nebula backdrop: navy base + purple glows (over video, under UI) ──
   body gets a solid navy floor so the page never reads grey/white when the
   background video is absent or still loading. !important on #root because a
   later inline <style> block in index.html also sets #root background. */
body { background: #050810; }
#root {
  background:
    radial-gradient(1100px 750px at 78% 8%,  rgba(123, 47, 247, .30), transparent 60%),
    radial-gradient(850px  650px at 10% 80%, rgba(225, 78, 202, .16), transparent 65%),
    radial-gradient(900px  800px at 92% 88%, rgba(94,  49, 178, .20), transparent 60%),
    radial-gradient(ellipse at top, rgba(10, 18, 36, .55) 0%, rgba(5, 8, 16, .62) 55%, rgba(2, 3, 8, .72) 100%) !important;
}

/* ── 2. Header frame: glass with purple aura (video preserved) ── */
.header-frame {
  border: 1px solid var(--neb-line);
  border-radius: 16px;
  box-shadow:
    0 0 24px rgba(123, 47, 247, .35),
    0 0 60px rgba(225, 78, 202, .15),
    inset 0 0 30px rgba(123, 47, 247, .10);
}
.header-frame::before {
  background: linear-gradient(45deg,
    transparent 0%, rgba(123, 47, 247, .30) 25%,
    transparent 50%, rgba(225, 78, 202, .30) 75%, transparent 100%);
}

/* ── 3. Panels: deep frosted glass ── */
.panel, .panel-purple, .panel-red {
  background: linear-gradient(160deg, rgba(16, 28, 56, .55) 0%, rgba(7, 10, 22, .72) 100%);
  border: 1px solid var(--neb-line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.panel-purple { border-color: rgba(225, 78, 202, .40); }
.panel-red    { border-color: rgba(255, 93, 108, .40); }

/* ── 4. Header buttons: glass + purple ── */
.info-btn, .header-action-btn {
  background: rgba(16, 28, 56, .50);
  border: 1px solid var(--neb-line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  box-shadow: 0 0 14px rgba(123, 47, 247, .22);
}
.info-btn:hover, .header-action-btn:hover {
  background: rgba(123, 47, 247, .25);
  border-color: rgba(225, 78, 202, .70);
  box-shadow: 0 0 22px rgba(225, 78, 202, .45);
}
.header-action-btn.feedback, .header-action-btn.donate {
  background: rgba(88, 28, 135, .35);
  border-color: rgba(163, 113, 247, .50);
}

/* ── 5. Category tabs: glass pills, magenta active ── */
.tab-active {
  background: linear-gradient(135deg, rgba(123, 47, 247, .45) 0%, rgba(225, 78, 202, .35) 100%);
  border: 1px solid rgba(225, 78, 202, .60);
  border-radius: 9999px;
  box-shadow: 0 0 20px rgba(225, 78, 202, .35), inset 0 0 15px rgba(123, 47, 247, .15);
}
.tab-inactive {
  background: rgba(12, 20, 40, .55);
  border: 1px solid var(--neb-line);
  border-radius: 9999px;
  backdrop-filter: blur(8px);
}
.tab-inactive:hover {
  border-color: rgba(163, 113, 247, .55);
  box-shadow: 0 0 12px rgba(123, 47, 247, .30);
}

/* ── 6. Hover glow gradient: cyan -> purple/magenta ── */
.btn-glow::after {
  background: linear-gradient(45deg, #7b2ff7, #e14eca, #7b2ff7);
}

/* ── 7. Language selector: purple identity ── */
.horiz-lang-trigger {
  border-color: rgba(163, 113, 247, .55);
  color: #d9b8ff;
  box-shadow: 0 0 15px rgba(123, 47, 247, .30);
}
.horiz-lang-trigger:hover {
  border-color: rgba(225, 78, 202, .75);
  box-shadow: 0 0 25px rgba(225, 78, 202, .45);
}
.horiz-lang-trigger.open, .horiz-lang-item.active {
  background: linear-gradient(135deg, #7b2ff7 0%, #b23bd6 100%);
  border-color: rgba(225, 78, 202, .80);
  color: #fff;
  box-shadow: 0 0 20px rgba(225, 78, 202, .50);
}
.horiz-lang-item:hover {
  background: rgba(123, 47, 247, .40);
  border-color: rgba(225, 78, 202, .60);
  color: #fff;
}

/* ── 8. Belief slider shell: glass ── */
.belief-slider-wrapper {
  background: rgba(14, 22, 44, .60);
  border: 1px solid var(--neb-line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 15px rgba(123, 47, 247, .20);
}

/* ── 9. HUD corner brackets (hud-theme.css widgets): magenta ── */
.hud-corner::before, .hud-corner::after {
  border-color: var(--neb-magenta);
  filter: drop-shadow(0 0 4px var(--neb-magenta));
}

/* ── 10. 3D selector tooltip: glass card ── */
.threed-tooltip {
  background: rgba(14, 22, 44, .78) !important;
  border: 1px solid rgba(163, 113, 247, .50) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .5), 0 0 18px rgba(123, 47, 247, .25);
}

/* ── 11. Scrollbar: nebula ── */
::-webkit-scrollbar-track { background: #070a14; }
::-webkit-scrollbar-thumb { background: #3d2a6e; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #7b2ff7; }

/* ── 12. Text selection ── */
::selection { background: rgba(225, 78, 202, .35); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .header-frame::before { animation: none; }
}

/* ═══ PHASE 2: structural redesign (nebula-pill-nav, nebula-rail, search) ═══ */

/* ── 13. Glass pill command nav (Header bottom row) ── */
.nebula-nav-row { justify-content: center !important; }
.nebula-pill-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 9999px;
  background: rgba(10, 18, 36, .55);
  border: 1px solid var(--neb-line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.nebula-pill-nav .info-btn,
.nebula-pill-nav .header-action-btn {
  border-radius: 9999px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  animation: none;
}
.nebula-pill-nav .info-btn:hover,
.nebula-pill-nav .header-action-btn:hover {
  background: rgba(123, 47, 247, .30);
  border-color: rgba(225, 78, 202, .55);
  box-shadow: 0 0 16px rgba(225, 78, 202, .40);
}

/* ── 14. Vertical side rail (decorative, mockup Space-Horizons style) ── */
.nebula-rail {
  position: fixed;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 52px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 34px;
  pointer-events: none;
  border-inline-end: 1px solid rgba(158, 178, 255, .10);
  background: linear-gradient(180deg, rgba(10, 18, 36, .30), rgba(10, 18, 36, .04));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.nebula-rail span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  letter-spacing: 4px;
  color: rgba(154, 167, 199, .75);
}
.nebula-rail span.rail-hot {
  color: var(--neb-magenta);
  text-shadow: 0 0 12px rgba(225, 78, 202, .80);
}
@media (max-width: 1200px) { .nebula-rail { display: none; } }

/* ── 15. Global search: frosted pill ── */
.global-search-bar {
  border-radius: 9999px !important;
  background: rgba(10, 18, 36, .55) !important;
  border: 1px solid var(--neb-line) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .40);
}
.global-search-bar input {
  border-radius: 9999px !important;
  background: rgba(5, 8, 16, .55) !important;
}
.global-search-bar input:focus {
  border-color: rgba(225, 78, 202, .55) !important;
  box-shadow: 0 0 0 1px rgba(225, 78, 202, .30) !important;
}
.global-search-bar button.hud-chip {
  border-radius: 9999px !important;
  background: linear-gradient(135deg, rgba(123, 47, 247, .55), rgba(225, 78, 202, .45)) !important;
  border-color: rgba(225, 78, 202, .55) !important;
  color: #fff !important;
}
.global-search-bar button.hud-chip:hover {
  box-shadow: 0 0 18px rgba(225, 78, 202, .50);
}

/* ── 16. Counter badge + gradient divider: nebula ── */
.counter-badge {
  border-radius: 9999px !important;
  background: rgba(10, 18, 36, .55) !important;
  border: 1px solid var(--neb-line) !important;
  backdrop-filter: blur(10px);
}
.counter-badge .count-number { color: var(--neb-magenta) !important; }
.gradient-line {
  background: linear-gradient(90deg, transparent, rgba(123, 47, 247, .6), rgba(225, 78, 202, .6), transparent) !important;
}

/* ═══ PHASE 3: category pills, featured card fan-feel, hero title ═══ */

/* ── 17. Category tabs -> frosted pill group, magenta active ── */
.category-tabs-container {
  display: inline-flex !important;
  gap: 6px !important;
  padding: 6px !important;
  border-radius: 9999px !important;
  background: rgba(10, 18, 36, .55) !important;
  border: 1px solid var(--neb-line) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .40), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.category-tab {
  border-radius: 9999px !important;
  clip-path: none !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  transition: all .25s ease !important;
}
.category-tab:hover {
  background: rgba(123, 47, 247, .20) !important;
  border-color: rgba(163, 113, 247, .40) !important;
}
.category-tab.active {
  background: linear-gradient(135deg, rgba(123, 47, 247, .85) 0%, rgba(225, 78, 202, .70) 100%) !important;
  border-color: rgba(225, 78, 202, .60) !important;
  box-shadow: 0 0 18px rgba(225, 78, 202, .45) !important;
  color: #fff !important;
}

/* ── 18. Featured cards: card-fan feel on hover (alternating tilt + lift) ── */
.featured-card {
  transition: transform .3s cubic-bezier(.34, 1.3, .64, 1) !important;
}
.featured-card:hover {
  transform: translateY(-10px) rotate(-1.4deg) scale(1.04);
  z-index: 5;
}
.featured-scroll .featured-card:nth-child(even):hover {
  transform: translateY(-10px) rotate(1.4deg) scale(1.04);
}
.featured-card:hover .featured-card-inner {
  box-shadow: 0 0 28px rgba(225, 78, 202, .40), 0 18px 40px rgba(0, 0, 0, .55);
}

/* ── 19. Hero title: nebula gradient text (mockup treatment) ── */
.hud-brand-title {
  background: linear-gradient(92deg, #eef2ff 0%, #c9b8ff 32%, #e14eca 62%, #4ecde1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  letter-spacing: 2px;
  text-shadow: none;
  filter: drop-shadow(0 0 22px rgba(123, 47, 247, .50));
}

/* ═══ PHASE 4: rail active category + 3D control tips ═══ */

/* ── 20. Rail: green glow on the active category ── */
.nebula-rail span.rail-active {
  color: #45f08a;
  font-weight: 700;
  text-shadow: 0 0 12px rgba(69, 240, 138, .85), 0 0 26px rgba(69, 240, 138, .40);
}

/* ── 21. 3D control tips chip (bottom-right of the stellar view) ── */
.threed-tips {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(10, 18, 36, .62);
  border: 1px solid var(--neb-line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
  font-size: 10.5px;
  letter-spacing: .6px;
  color: rgba(154, 167, 199, .95);
}
.threed-tips b {
  color: #d9b8ff;
  font-weight: 700;
}
@media (max-width: 760px) { .threed-tips { display: none; } }

/* ── 22. Hide 3d-force-graph's built-in nav hint: it describes the OLD
   control scheme (left-drag rotate, wheel zoom). Our .threed-tips chip
   documents the actual Nebula HUD controls. ── */
.scene-nav-info { display: none !important; }

/* ── 23. Move mode (SHIFT toggle): blue frame + banner on the 3D view ── */
.threed-selector-container.nav-mode {
  outline: 2px solid rgba(72, 168, 255, .85);
  outline-offset: -2px;
  border-radius: 10px;
  box-shadow: 0 0 26px rgba(72, 168, 255, .45), inset 0 0 46px rgba(72, 168, 255, .10);
}
.threed-selector-container.nav-mode .threed-selector-canvas { cursor: grab; }
.threed-selector-container.nav-mode .threed-selector-canvas:active { cursor: grabbing; }
.threed-selector-container.nav-mode::before {
  content: 'MOVE MODE \2014 holding Shift \00b7 drag: rotate \00b7 wheel: zoom';
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  padding: 5px 14px;
  border-radius: 9999px;
  background: rgba(14, 34, 64, .85);
  border: 1px solid rgba(72, 168, 255, .70);
  color: #9fd0ff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  pointer-events: none;
  box-shadow: 0 0 16px rgba(72, 168, 255, .40);
}
.threed-selector-container.nav-mode .threed-tips {
  border-color: rgba(72, 168, 255, .60);
}
.threed-selector-container.nav-mode .threed-tips b { color: #9fd0ff; }

/* ── 24. G.A.I. unlocked: live green glow (was greyed-out 'coming soon') ── */
.header-action-btn-labeled.gai-link {
  background: rgba(34, 197, 94, .12);
  border-color: rgba(69, 240, 138, .45);
  cursor: pointer;
}
.header-action-btn-labeled.gai-link:hover {
  background: rgba(34, 197, 94, .22);
  border-color: rgba(69, 240, 138, .85);
  box-shadow: 0 0 18px rgba(69, 240, 138, .45);
}