html, body { margin: 0; padding: 0; overflow-x: hidden; }
body { overscroll-behavior: none; }
::-webkit-scrollbar { display: none; }

.material-symbols-outlined { font-family: "Material Symbols Outlined"; font-size: 1em; line-height: 1; }

/* Scanner laser */
@keyframes scanline {
  0% { transform: translateY(-100%); opacity: 0; }
  15%, 85% { opacity: .8; }
  100% { transform: translateY(850%); opacity: 0; }
}
.animate-scanline { animation: scanline 4.5s cubic-bezier(.4, 0, .2, 1) infinite; box-shadow: 0 0 15px #00f0ff, 0 0 30px #00f0ff; }

/* Floating motes */
@keyframes floatMote1 { 0%,100% { transform: translate(0,0) scale(.8); opacity: .3; } 50% { transform: translate(30px,-45px) scale(1.2); opacity: .8; } }
@keyframes floatMote2 { 0%,100% { transform: translate(0,0) scale(1.1); opacity: .25; } 50% { transform: translate(-40px,-35px) scale(.9); opacity: .7; } }
@keyframes floatMote3 { 0%,100% { transform: translate(0,0); opacity: .2; } 50% { transform: translate(25px,-60px); opacity: .85; } }
.mote-1 { animation: floatMote1 7s ease-in-out infinite; box-shadow: 0 0 8px #00f0ff; }
.mote-2 { animation: floatMote2 9s ease-in-out infinite; box-shadow: 0 0 10px #dcb8ff; }
.mote-3 { animation: floatMote3 6s ease-in-out infinite; box-shadow: 0 0 12px #dbfcff; }

/* Rim glow */
@keyframes rimPulse {
  0%,100% { opacity: .45; filter: drop-shadow(0 0 15px rgba(0,240,255,.3)) drop-shadow(0 0 35px rgba(138,43,226,.25)); }
  50% { opacity: .85; filter: drop-shadow(0 0 30px rgba(0,240,255,.6)) drop-shadow(0 0 60px rgba(138,43,226,.45)); }
}
.animate-rim-glow { animation: rimPulse 5s ease-in-out infinite; }

/* Equalizer: bars only animate while .speaking is on <body> */
@keyframes eq1 { 0%,100% { height: 18%; } 50% { height: 85%; } }
@keyframes eq2 { 0%,100% { height: 50%; } 50% { height: 95%; } }
@keyframes eq3 { 0%,100% { height: 80%; } 50% { height: 35%; } }
@keyframes eq4 { 0%,100% { height: 40%; } 50% { height: 100%; } }
@keyframes eq5 { 0%,100% { height: 25%; } 50% { height: 70%; } }
@keyframes eq6 { 0%,100% { height: 75%; } 50% { height: 30%; } }
[class*="eq-bar-"] { height: 15%; transition: height .3s; }
body.speaking .eq-bar-1 { animation: eq1 .7s ease-in-out infinite; }
body.speaking .eq-bar-2 { animation: eq2 .5s ease-in-out infinite .1s; }
body.speaking .eq-bar-3 { animation: eq3 .65s ease-in-out infinite .2s; }
body.speaking .eq-bar-4 { animation: eq4 .45s ease-in-out infinite .05s; }
body.speaking .eq-bar-5 { animation: eq5 .8s ease-in-out infinite .15s; }
body.speaking .eq-bar-6 { animation: eq6 .6s ease-in-out infinite .25s; }
body.muted #audio-eq-bars, body.muted #spectrum-bars { opacity: .25; }

/* CTA beam */
@keyframes ctaGlow {
  0%,100% { box-shadow: 0 0 20px rgba(0,240,255,.4); }
  50% { box-shadow: 0 0 35px rgba(0,240,255,.8), 0 0 12px rgba(138,43,226,.6); }
}
.animate-cta-beam { animation: ctaGlow 2.5s ease-in-out infinite; }

/* Stage pills */
.stage-pill.active { box-shadow: 0 0 16px rgba(0,240,255,.35); border-color: rgba(0,240,255,.8) !important; }

/* Voice karaoke */
.dialogue-word { color: #A0A5B5; display: inline-block; margin-right: .3em; transition: color .2s, transform .2s, text-shadow .2s; }
.dialogue-word.word-lit { color: #00f0ff; text-shadow: 0 0 12px rgba(0,240,255,.75); }
.dialogue-word.word-lit-now { transform: scale(1.06); }

/* Teleport buttons */
.teleport-btn { position: relative; overflow: hidden; }
.teleport-btn::after { content: ""; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(0,240,255,.25), transparent); }
.teleport-btn:hover::after { left: 140%; transition: .65s ease-in-out; }

/* Start gate fade-out */
#start-gate { transition: opacity .6s ease; }
#start-gate.leaving { opacity: 0; pointer-events: none; }

/* Keyboard focus */
button:focus-visible, a:focus-visible { outline: 2px solid #00f0ff; outline-offset: 2px; }

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

/* mobile polish */
#start-gate{min-height:100dvh}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.stage-pill,.teleport-btn,#replay-btn,#mute-voice-btn,#speed-toggle-btn{min-height:44px}
@media(max-width:640px){#start-btn{width:100%;max-width:340px}#teleport-modal{align-items:flex-end;padding:0}#teleport-modal>div{border-radius:20px 20px 0 0;max-height:92dvh}#voice-dialogue{font-size:16px}}
@media(hover:none){.teleport-btn:hover{transform:none}}