/* ══════════════════════════════════════════════════════════════════
   THE HOLODECK — MyTunes Generate Wizard Interface  (v3 High-Fidelity)
   Activated by: data-interface="holodeck" on #wizard-modal
   Desktop-first. Mobile: graceful degradation only.
   ══════════════════════════════════════════════════════════════════ */

/* ── BUG2 FIX: Force-hide Melo V1 chatbot + V2 ambient while Holodeck is active
   These elements have higher z-indexes (9998/9999) than the holodeck (9992)
   so they can bleed through. The JS also hides them but CSS is the safety net. ── */
body.holodeck-active #melo-container,
body.holodeck-active .melo-ambient-wrap {
  display: none !important;
}

/* ── Full-screen takeover ── */
#wizard-modal[data-interface="holodeck"] {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: radial-gradient(
    ellipse at 50% 55%,
    #2d1060 0%,
    #1a0f2e 25%,
    #0d0618 55%,
    #060310 100%
  ) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 9992 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Hide the default modal chrome */
#wizard-modal[data-interface="holodeck"] .wizard-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* Hide default wizard chrome */
#wizard-modal[data-interface="holodeck"] .wizard-header,
#wizard-modal[data-interface="holodeck"] .wizard-steps,
#wizard-modal[data-interface="holodeck"] .wizard-progress,
#wizard-modal[data-interface="holodeck"] .wizard-back-btn {
  display: none !important;
}

/* ═══════════════════════════════════════════════
   STAR FIELD — dense multi-layer space background
   ═══════════════════════════════════════════════ */
#holodeck-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Layer 1 — small distant stars (white + pale purple dots) */
#holodeck-stars::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at  4%   7%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1px 1px at  9%  19%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 14%  43%, rgba(220,210,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 19%  88%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 23%  31%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 28%  62%, rgba(220,210,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 33%   4%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 38%  75%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 43%  22%, rgba(220,210,255,0.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 48%  91%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 53%  37%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 58%  55%, rgba(220,210,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 63%  12%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 67%  79%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 72%  46%, rgba(220,210,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 77%  24%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 82%  68%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 87%   9%, rgba(220,210,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 91%  83%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 96%  51%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at  6%  58%, rgba(220,210,255,0.50) 0%, transparent 100%),
    radial-gradient(1px 1px at 11%  34%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 16%  76%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 25%  14%, rgba(220,210,255,0.80) 0%, transparent 100%),
    radial-gradient(1px 1px at 35%  48%, rgba(255,255,255,0.50) 0%, transparent 100%),
    radial-gradient(1px 1px at 45%  93%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px 1px at 55%  66%, rgba(220,210,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 65%   2%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 74%  87%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 84%  29%, rgba(220,210,255,0.70) 0%, transparent 100%);
  animation: holodeck-stars-twinkle-a 6s ease-in-out infinite alternate;
}

/* Layer 2 — brighter stars + pink/blue twinkles */
#holodeck-stars::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at  7%  29%, rgba(255,255,255,0.95) 0%, transparent 100%),
    radial-gradient(2px 2px at 18%  54%, rgba(255,200,240,0.70) 0%, transparent 100%),
    radial-gradient(2px 2px at 29%   8%, rgba(150,220,255,0.65) 0%, transparent 100%),
    radial-gradient(2px 2px at 40%  71%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(2px 2px at 51%  38%, rgba(255,200,240,0.60) 0%, transparent 100%),
    radial-gradient(2px 2px at 62%  82%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(2px 2px at 73%  17%, rgba(150,220,255,0.70) 0%, transparent 100%),
    radial-gradient(2px 2px at 83%  63%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(2px 2px at 94%  44%, rgba(255,200,240,0.55) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at  3%  76%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 15%  21%, rgba(196,181,253,0.70) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 32%  94%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 47%  13%, rgba(150,220,255,0.60) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 57%  49%, rgba(196,181,253,0.65) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 68%  88%, rgba(255,200,240,0.50) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 79%  35%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 89%  72%, rgba(196,181,253,0.60) 0%, transparent 100%),
    radial-gradient(2px 2px at 22%  67%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(2px 2px at 44%  28%, rgba(249,115,22,  0.40) 0%, transparent 100%),
    radial-gradient(2px 2px at 76%   5%, rgba(6,182,212,   0.45) 0%, transparent 100%);
  animation: holodeck-stars-twinkle-b 8s ease-in-out infinite alternate;
}

@keyframes holodeck-stars-twinkle-a {
  0%   { opacity: 1;    transform: scale(1);    }
  40%  { opacity: 0.6;  transform: scale(0.98); }
  70%  { opacity: 0.9;  transform: scale(1.01); }
  100% { opacity: 0.75; transform: scale(1);    }
}

@keyframes holodeck-stars-twinkle-b {
  0%   { opacity: 0.8;  transform: scale(1);    }
  30%  { opacity: 1;    transform: scale(1.02); }
  65%  { opacity: 0.55; transform: scale(0.99); }
  100% { opacity: 0.9;  transform: scale(1);    }
}

/* ═══════════════════════════════════════════════
   HOLODECK CONTENT — main layout container
   ═══════════════════════════════════════════════ */
#holodeck-content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 2rem 3rem 1.5rem;
  box-sizing: border-box;
  pointer-events: none; /* children re-enable */
}

#holodeck-content > * {
  pointer-events: auto;
}

/* ═══════════════════════════════════════════════
   STORY INPUT — frosted glass, top center
   ═══════════════════════════════════════════════ */
#holodeck-story-input {
  width: 500px;
  max-width: 82vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  margin-bottom: 20px;
}

#holodeck-story-input .holodeck-section-label {
  margin-bottom: 0.5rem;
}

#holodeck-prompt-input {
  width: 100%;
  height: 70px;
  background: rgba(13, 6, 32, 0.70) !important;
  border: 1.5px solid rgba(249,115,22,0.45) !important;
  border-radius: 12px !important;
  color: rgba(248,250,252,0.95) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 1.05rem !important;
  padding: 0.85rem 1.2rem !important;
  resize: none !important;
  outline: none !important;
  caret-color: #F97316 !important;
  backdrop-filter: blur(24px) !important;
  box-shadow:
    0 0 0 1px rgba(249,115,22,0.15),
    0 4px 30px rgba(249,115,22,0.12),
    0 0   50px rgba(45,27,105,0.25),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
  transition: border-color 0.25s, box-shadow 0.25s;
  box-sizing: border-box;
  line-height: 1.5;
}

#holodeck-prompt-input::placeholder {
  color: rgba(196,181,253,0.38) !important;
  font-style: italic;
}

#holodeck-prompt-input:focus {
  border-color: rgba(249,115,22,0.80) !important;
  box-shadow:
    0 0 0 1px rgba(249,115,22,0.30),
    0 4px 30px rgba(249,115,22,0.25),
    0 0   70px rgba(45,27,105,0.35),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

/* ═══════════════════════════════════════════════
   SPHERE AREA — orbit container (flex middle)
   ═══════════════════════════════════════════════ */
#holodeck-sphere-area {
  position: relative;
  width: 520px;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  flex-grow: 0;
  margin-bottom: 0;
}

/* ═══════════════════════════════════════════════
   CREATE SPHERE — glowing planet center
   ═══════════════════════════════════════════════ */
#holodeck-sphere {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%,
    #9b5de5 0%,
    #7c3aed 18%,
    #5b21b6 38%,
    #3b0f8a 60%,
    #1e0552 100%
  );
  box-shadow:
    0 0  55px rgba(190,80,255,0.75),
    0 0 110px rgba(168,85,247,0.50),
    0 0 180px rgba(236,72,153,0.35),
    0 0 260px rgba(236,72,153,0.15),
    inset 0 0  60px rgba(196,181,253,0.20),
    inset 0 0  20px rgba(255,255,255,0.07),
    inset -40px -40px 80px rgba(168,85,247,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

/* Soft blue-purple highlight sheen near top */
#holodeck-sphere::before {
  content: '';
  position: absolute;
  top: 8%;
  left: 15%;
  width: 55%;
  height: 35%;
  background: radial-gradient(ellipse at 40% 30%,
    rgba(196,181,253,0.35) 0%,
    rgba(139,92,246,0.15) 50%,
    transparent 100%
  );
  border-radius: 50%;
  pointer-events: none;
}

#holodeck-sphere:hover {
  transform: translate(-50%, -50%) scale(1.04);
  box-shadow:
    0 0  70px rgba(190,80,255,0.90),
    0 0 140px rgba(168,85,247,0.60),
    0 0 220px rgba(236,72,153,0.50),
    0 0 310px rgba(236,72,153,0.25),
    inset 0 0  60px rgba(196,181,253,0.25),
    inset 0 0  20px rgba(255,255,255,0.10);
}

#holodeck-sphere:active {
  transform: translate(-50%, -50%) scale(0.97);
}

#holodeck-sphere.generating {
  animation: holodeck-sphere-burst 0.6s ease forwards;
}

@keyframes holodeck-sphere-burst {
  0%   { box-shadow: 0 0 55px rgba(190,80,255,0.75), 0 0 110px rgba(168,85,247,0.50), 0 0 180px rgba(236,72,153,0.35); transform: translate(-50%,-50%) scale(1); }
  45%  { box-shadow: 0 0 130px rgba(249,115,22,0.90), 0 0 240px rgba(249,115,22,0.60), 0 0 350px rgba(249,115,22,0.30); transform: translate(-50%,-50%) scale(1.14); }
  100% { box-shadow: 0 0  45px rgba(190,80,255,0.60), 0 0  90px rgba(168,85,247,0.35), 0 0 150px rgba(236,72,153,0.20); transform: translate(-50%,-50%) scale(0.96); }
}

#holodeck-create-text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.65rem;
  font-weight: 800;
  color: rgba(248,250,252,0.96);
  letter-spacing: 0.22em;
  text-shadow:
    0 0 16px rgba(230,200,255,0.95),
    0 0 36px rgba(196,181,253,0.65),
    0 0 60px rgba(168,85,247,0.40);
  z-index: 1;
  user-select: none;
  position: relative;
}

/* ═══════════════════════════════════════════════
   ORBIT RINGS — animated rings wrapping sphere
   ═══════════════════════════════════════════════ */
.holodeck-orbit-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
}

/* Ring 1 — fiery orange/amber, tilted ~15-20°, brightest upper-left arc */
.holodeck-orbit-ring:nth-child(1) {
  width: 340px;
  height: 340px;
  margin-top: -170px;
  margin-left: -170px;
  border: 3px solid transparent;
  border-top-color:    rgba(251,146,60,0.95);
  border-left-color:   rgba(249,115,22,0.70);
  border-right-color:  rgba(249,115,22,0.30);
  border-bottom-color: rgba(249,115,22,0.08);
  box-shadow:
    0 0 16px rgba(249,115,22,0.45),
    0 0 30px rgba(251,146,60,0.20),
    inset 0 0 12px rgba(249,115,22,0.12);
  transform: rotateX(75deg) rotateZ(-20deg);
  animation: holodeck-ring-spin-a 5s linear infinite;
}

/* Ring 2 — cyan/blue, crossing opposite angle, fainter */
.holodeck-orbit-ring:nth-child(2) {
  width: 360px;
  height: 360px;
  margin-top: -180px;
  margin-left: -180px;
  border: 2px solid transparent;
  border-top-color:    rgba(6,182,212,0.65);
  border-right-color:  rgba(34,211,238,0.40);
  border-bottom-color: rgba(6,182,212,0.12);
  border-left-color:   rgba(6,182,212,0.20);
  box-shadow:
    0 0 10px rgba(6,182,212,0.25),
    inset 0 0 10px rgba(6,182,212,0.08);
  transform: rotateX(75deg) rotateZ(20deg);
  animation: holodeck-ring-spin-b 8s linear infinite reverse;
}

@keyframes holodeck-ring-spin-a {
  from { transform: rotateX(75deg) rotateZ(-20deg); }
  to   { transform: rotateX(75deg) rotateZ(340deg); }
}

@keyframes holodeck-ring-spin-b {
  from { transform: rotateX(75deg) rotateZ(20deg); }
  to   { transform: rotateX(75deg) rotateZ(-340deg); }
}

/* ═══════════════════════════════════════════════
   VOICE ORBIT — 7 genre nodes floating around sphere
   ═══════════════════════════════════════════════ */
#holodeck-voice-orbit {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.holodeck-voice-node {
  position: absolute;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgba(26, 15, 46, 0.65);
  border: 2px solid rgba(196,181,253,0.35);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  font-family: 'Space Grotesk', sans-serif;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
  box-shadow:
    0 0 16px rgba(124,58,237,0.20),
    inset 0 0 10px rgba(196,181,253,0.04);
}

/* ── Per-genre color variants via data-color ── */
.holodeck-voice-node[data-color="amber"] {
  border-color: rgba(245,158,11,0.65);
  box-shadow: 0 0 18px rgba(245,158,11,0.35), inset 0 0 10px rgba(245,158,11,0.08);
}
.holodeck-voice-node[data-color="blue"] {
  border-color: rgba(59,130,246,0.65);
  box-shadow: 0 0 18px rgba(59,130,246,0.35), inset 0 0 10px rgba(59,130,246,0.08);
}
.holodeck-voice-node[data-color="purple"] {
  border-color: rgba(168,85,247,0.65);
  box-shadow: 0 0 18px rgba(168,85,247,0.35), inset 0 0 10px rgba(168,85,247,0.08);
}
.holodeck-voice-node[data-color="cyan"] {
  border-color: rgba(6,182,212,0.65);
  box-shadow: 0 0 18px rgba(6,182,212,0.35), inset 0 0 10px rgba(6,182,212,0.08);
}
.holodeck-voice-node[data-color="orange"] {
  border-color: rgba(249,115,22,0.65);
  box-shadow: 0 0 18px rgba(249,115,22,0.35), inset 0 0 10px rgba(249,115,22,0.08);
}
.holodeck-voice-node[data-color="red"] {
  border-color: rgba(239,68,68,0.65);
  box-shadow: 0 0 18px rgba(239,68,68,0.35), inset 0 0 10px rgba(239,68,68,0.08);
}
.holodeck-voice-node[data-color="green"] {
  border-color: rgba(16,185,129,0.65);
  box-shadow: 0 0 18px rgba(16,185,129,0.35), inset 0 0 10px rgba(16,185,129,0.08);
}

/* Hover — boost whichever color is active */
.holodeck-voice-node:hover {
  transform: scale(1.13);
  z-index: 10;
  filter: brightness(1.2);
}
.holodeck-voice-node[data-color="amber"]:hover {
  box-shadow: 0 0 30px rgba(245,158,11,0.55), 0 0 50px rgba(245,158,11,0.25), inset 0 0 14px rgba(245,158,11,0.12);
}
.holodeck-voice-node[data-color="blue"]:hover {
  box-shadow: 0 0 30px rgba(59,130,246,0.55), 0 0 50px rgba(59,130,246,0.25), inset 0 0 14px rgba(59,130,246,0.12);
}
.holodeck-voice-node[data-color="purple"]:hover {
  box-shadow: 0 0 30px rgba(168,85,247,0.55), 0 0 50px rgba(168,85,247,0.25), inset 0 0 14px rgba(168,85,247,0.12);
}
.holodeck-voice-node[data-color="cyan"]:hover {
  box-shadow: 0 0 30px rgba(6,182,212,0.55), 0 0 50px rgba(6,182,212,0.25), inset 0 0 14px rgba(6,182,212,0.12);
}
.holodeck-voice-node[data-color="orange"]:hover {
  box-shadow: 0 0 30px rgba(249,115,22,0.55), 0 0 50px rgba(249,115,22,0.25), inset 0 0 14px rgba(249,115,22,0.12);
}
.holodeck-voice-node[data-color="red"]:hover {
  box-shadow: 0 0 30px rgba(239,68,68,0.55), 0 0 50px rgba(239,68,68,0.25), inset 0 0 14px rgba(239,68,68,0.12);
}
.holodeck-voice-node[data-color="green"]:hover {
  box-shadow: 0 0 30px rgba(16,185,129,0.55), 0 0 50px rgba(16,185,129,0.25), inset 0 0 14px rgba(16,185,129,0.12);
}

/* Selected state */
.holodeck-voice-node.selected {
  background: rgba(249,115,22,0.18);
  filter: brightness(1.25);
}
.holodeck-voice-node.selected::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(249,115,22,0.45);
  animation: holodeck-node-pulse 1.6s ease-in-out infinite;
}

@keyframes holodeck-node-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%       { transform: scale(1.14); opacity: 0.28; }
}

.holodeck-voice-abbr {
  font-size: 1.05rem;
  font-weight: 800;
  color: rgba(248,250,252,0.92);
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1;
}

.holodeck-voice-full {
  font-size: 0.56rem;
  font-weight: 500;
  color: rgba(196,181,253,0.60);
  letter-spacing: 0.09em;
  text-align: center;
  margin-top: 4px;
  text-transform: uppercase;
}

/* Node clock positions — orbit radius ~210px from sphere-area center (260,210)
   Container: 520×420, sphere center at (260, 210)
   Bubbles are 88px wide, offset by 44px to center
   12 o'clock: top:10px  left:50% translateX(-50%)
   2 o'clock:  top:60px  right:30px
   3 o'clock:  top:50%   right:-10px translateY(-50%)
   5 o'clock:  bottom:60px right:30px
   6 o'clock:  bottom:5px  left:50% translateX(-50%)
   8 o'clock:  bottom:60px left:30px
   9 o'clock:  top:50%   left:-10px translateY(-50%)
*/
.holodeck-voice-node:nth-child(1) { /* 12 o'clock — top */
  top: 10px; left: 50%; transform: translateX(-50%);
  animation: holodeck-float-a 3.8s ease-in-out infinite;
}
.holodeck-voice-node:nth-child(1):hover { transform: translateX(-50%) scale(1.13); }

.holodeck-voice-node:nth-child(2) { /* 2 o'clock — upper-right */
  top: 60px; right: 30px;
  animation: holodeck-float-b 4.2s ease-in-out infinite;
}

.holodeck-voice-node:nth-child(3) { /* 3 o'clock — right */
  top: 50%; right: -10px; transform: translateY(-50%);
  animation: holodeck-float-c 3.5s ease-in-out infinite;
}
.holodeck-voice-node:nth-child(3):hover { transform: translateY(-50%) scale(1.13); }

.holodeck-voice-node:nth-child(4) { /* 5 o'clock — lower-right */
  bottom: 60px; right: 30px;
  animation: holodeck-float-a 4.6s ease-in-out infinite;
}

.holodeck-voice-node:nth-child(5) { /* 6 o'clock — bottom */
  bottom: 5px; left: 50%; transform: translateX(-50%);
  animation: holodeck-float-b 3.9s ease-in-out infinite;
}
.holodeck-voice-node:nth-child(5):hover { transform: translateX(-50%) scale(1.13); }

.holodeck-voice-node:nth-child(6) { /* 8 o'clock — lower-left */
  bottom: 60px; left: 30px;
  animation: holodeck-float-c 4.3s ease-in-out infinite;
}

.holodeck-voice-node:nth-child(7) { /* 9 o'clock — left */
  top: 50%; left: -10px; transform: translateY(-50%);
  animation: holodeck-float-a 4.0s ease-in-out infinite;
}
.holodeck-voice-node:nth-child(7):hover { transform: translateY(-50%) scale(1.13); }

@keyframes holodeck-float-a {
  0%, 100% { transform: translateY(0px);  }
  50%       { transform: translateY(-9px); }
}
@keyframes holodeck-float-b {
  0%, 100% { transform: translateY(-4px); }
  50%       { transform: translateY(6px);  }
}
@keyframes holodeck-float-c {
  0%, 100% { transform: translateY(3px);  }
  50%       { transform: translateY(-7px); }
}

/* ═══════════════════════════════════════════════
   GENRE DISC — elliptical disc in perspective
   ═══════════════════════════════════════════════ */
/* BUG3 FIX: Add perspective to parent so rotateX on child renders as true 3D
   Without perspective on the parent, rotateX just makes a flat flat ellipse. */
#holodeck-genre-disc {
  perspective: 800px;
  perspective-origin: 50% -50%;
  position: relative;
  width: 440px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -20px;
}

/* The elliptical disc platform — 3D convex dome viewed from above */
#holodeck-disc-platform {
  position: relative;
  width: 440px;
  height: 120px;
  border-radius: 50%;
  transform: rotateX(55deg);
  transform-style: preserve-3d;
  background: radial-gradient(ellipse at 50% 25%,
    rgba(249,115,22,0.50) 0%,
    rgba(249,115,22,0.20) 20%,
    rgba(124,58,237,0.30) 45%,
    rgba(45,27,105,0.70) 70%,
    rgba(10,5,30,0.90) 100%
  );
  border: 2px solid rgba(249,115,22,0.50);
  box-shadow:
    0 0 80px rgba(249,115,22,0.35),
    0 0 160px rgba(124,58,237,0.20),
    inset 0 -30px 60px rgba(249,115,22,0.12),
    inset 0 30px 50px rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* Convex dome specular highlight — bright spot toward viewer */
#holodeck-disc-platform::before {
  content: '';
  position: absolute;
  top: 8%;
  left: 20%;
  width: 60%;
  height: 45%;
  border-radius: 50%;
  background: radial-gradient(ellipse,
    rgba(255,255,255,0.10) 0%,
    transparent 70%
  );
  pointer-events: none;
}

/* Dome stays still — genres track spins instead */
#holodeck-disc-platform.paused #holodeck-genres-track {
  animation-play-state: paused;
}

/* Genre track rotation — dome stays still, labels orbit */
#holodeck-genres-track {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0; left: 0;
  animation: holodeck-disc-rotate 30s linear infinite;
}

/* BUG3 FIX: renamed to holodeck-disc-rotate (referenced above) */
@keyframes holodeck-disc-rotate {
  from { transform: rotateZ(0deg); }
  to   { transform: rotateZ(360deg); }
}

/* Keep old name as alias so nothing else breaks */
@keyframes holodeck-genres-spin {
  from { transform: rotateZ(0deg); }
  to   { transform: rotateZ(360deg); }
}

/* Genre items laid out as an arc — counter-rotated so text stays readable
   when the disc is tilted 55deg on X axis */
.holodeck-genre-item {
  position: absolute;
  white-space: nowrap;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(245,158,11,0.65);  /* amber/orange tone matching disc */
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 0.2s, text-shadow 0.2s;
  transform-origin: center center;
  transform: rotateX(-55deg); /* BUG3 FIX: counter-rotate text to remain readable */
}

.holodeck-genre-item:hover {
  color: rgba(251,191,36,0.95);
  text-shadow: 0 0 10px rgba(249,115,22,0.60), 0 0 20px rgba(249,115,22,0.30);
}

.holodeck-genre-item.selected {
  color: #F97316;
  text-shadow:
    0 0 10px rgba(249,115,22,0.95),
    0 0 22px rgba(249,115,22,0.55),
    0 0 40px rgba(249,115,22,0.25);
  font-weight: 800;
}

/* Disc center glow orb — orange-gold */
#holodeck-disc-center-orb {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle,
    #fbbf24 0%,
    #f97316 35%,
    #9d3a00 70%,
    transparent 100%
  );
  box-shadow:
    0 0  18px rgba(251,191,36,0.85),
    0 0  36px rgba(249,115,22,0.60),
    0 0  60px rgba(249,115,22,0.30);
  pointer-events: none;
  z-index: 2;
  animation: holodeck-orb-pulse 2.5s ease-in-out infinite;
}

@keyframes holodeck-orb-pulse {
  0%, 100% { box-shadow: 0 0 18px rgba(251,191,36,0.85), 0 0 36px rgba(249,115,22,0.60), 0 0 60px rgba(249,115,22,0.30); transform: translate(-50%,-50%) scale(1); }
  50%       { box-shadow: 0 0 26px rgba(251,191,36,0.95), 0 0 50px rgba(249,115,22,0.80), 0 0 85px rgba(249,115,22,0.45); transform: translate(-50%,-50%) scale(1.10); }
}

/* ═══════════════════════════════════════════════
   SECTION LABELS
   ═══════════════════════════════════════════════ */
.holodeck-section-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(6,182,212,0.50);
  text-align: center;
}

/* ═══════════════════════════════════════════════
   CLOSE BUTTON
   ═══════════════════════════════════════════════ */
.holodeck-close {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 9994;
  background: rgba(45,27,105,0.40);
  border: 1px solid rgba(248,250,252,0.15);
  color: rgba(248,250,252,0.50);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
}

.holodeck-close:hover {
  border-color: rgba(249,115,22,0.60);
  color: #F97316;
  box-shadow: 0 0 20px rgba(249,115,22,0.25);
}

/* ═══════════════════════════════════════════════
   MELO — holographic character bottom-right
   ═══════════════════════════════════════════════ */
#holodeck-melo {
  position: fixed;
  bottom: 100px;
  right: 32px;
  z-index: 9993;
  pointer-events: none;
  width: 200px;
}

#holodeck-melo img,
#holodeck-melo video {
  width: 200px;
  height: auto;
  filter:
    drop-shadow(0 0 24px rgba(45,27,105,0.90))
    drop-shadow(0 0 48px rgba(6,182,212,0.60))
    drop-shadow(0 4px 20px rgba(45,27,105,0.70))
    brightness(1.15)
    saturate(1.3);
  animation: holodeck-melo-float 4s ease-in-out infinite;
}

#holodeck-melo.sprite-active img,
#holodeck-melo.sprite-active video {
  animation: none;
}

@keyframes holodeck-melo-float {
  0%, 100% { transform: translateY(0);   }
  50%       { transform: translateY(-8px); }
}

.holodeck-melo-bubble {
  position: absolute;
  bottom: 105%;
  right: 0;
  background: rgba(15, 10, 30, 0.92);
  border: 1.5px solid #F97316;
  border-radius: 14px;
  padding: 10px 14px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.82rem;
  color: rgba(248,250,252,0.95);
  max-width: 200px;
  white-space: normal;
  box-shadow: 0 0 20px rgba(249,115,22,0.30);
  pointer-events: none;
  animation: holodeck-bubble-in 0.4s ease forwards;
}

@keyframes holodeck-bubble-in {
  from { opacity: 0; transform: translateY(8px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

.holodeck-melo-bubble::after {
  content: '';
  position: absolute;
  bottom: -8px;
  right: 20px;
  width: 0; height: 0;
  border-left:  7px solid transparent;
  border-right: 7px solid transparent;
  border-top:   8px solid #F97316;
}