.boom-stage { position: fixed; inset: 0; z-index: 100000; overflow: hidden; isolation: isolate; touch-action: none; font-family: 'Poppins', sans-serif; color: #ecf9f6; }
.boom-stage::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 110%, #175951, #08131eee 65%); opacity: var(--boom-dim, 0); }
.boom-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.boom-hud { position: absolute; top: max(22px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: min(520px, calc(100% - 140px)); text-align: center; pointer-events: none; }
.boom-hud small { color: #87d9c9; font: 10px/1.5 monospace; letter-spacing: .25em; }
.boom-hud h2 { color: #ecf9f6 !important; font: 600 clamp(19px, 3vw, 32px)/1.4 'Poppins', sans-serif !important; text-shadow: none !important; letter-spacing: -.03em; margin: 8px 0; }
html body .boom-stage #boom-title { color: #ecf9f6 !important; text-shadow: none !important; }
.boom-hud p { color: #a9c0c2; font: 12px/1.6 'Poppins', sans-serif; margin: 0; }
.boom-meter { width: 120px; height: 2px; margin: 16px auto 0; background: #97d8ca22; overflow: hidden; }
.boom-meter::after { content: ''; display: block; height: 100%; background: #87e8cd; transform: scaleX(var(--boom-progress, 0)); transform-origin: left; }
.boom-skip { position: absolute; right: max(16px, env(safe-area-inset-right)); top: max(20px, env(safe-area-inset-top)); border: 1px solid #d7f7ed4d; border-radius: 999px; background: #102a31; color: #ecf9f6; padding: 10px 16px; font: 12px 'Poppins', sans-serif; cursor: pointer; }
.boom-skip:focus-visible { outline: 2px solid #87e8cd; outline-offset: 4px; }
.boom-robot { position: absolute; left: 0; bottom: max(20px, env(safe-area-inset-bottom)); width: clamp(124px, 18vw, 200px); will-change: transform; filter: drop-shadow(0 14px 12px #0006); pointer-events: none; }
.boom-robot svg { display: block; width: 100%; overflow: visible; }
.boom-robot__eyes { transition: transform .35s ease; transform: translateX(4px); }
.boom-stage[data-beat="look"] .boom-robot__eyes { transform: translateX(0); }
.boom-stage[data-beat="escape"] .boom-robot__eyes { transform: translateX(7px); }
.boom-robot__arm { transform-origin: 141px 105px; transition: transform .35s ease; }
.boom-stage[data-beat="look"] .boom-robot__arm { transform: rotate(-32deg); }
.boom-robot__beam { opacity: 0; }
.boom-stage[data-beat="clean"] .boom-robot__beam { opacity: .7; }
.boom-robot__bubble { position: absolute; bottom: 95%; left: 15%; min-width: 110px; padding: 9px 14px; background: #e6fff4; color: #123b35; border-radius: 14px 14px 14px 3px; font: 12px/1.4 'Poppins', sans-serif; opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; text-align: center; }
.boom-stage[data-beat="look"] .boom-robot__bubble { opacity: 1; transform: translateY(0); }
body.boom-running #sideNav { transform: translateX(0) !important; }
body.boom-running :is(#leftHoverZone, #sidenavHint, #scrollRibbon) { pointer-events: none !important; }
@media (max-width: 600px) { .boom-hud { top: 76px; width: calc(100% - 40px); } .boom-hud p { font-size: 11px; } .boom-skip { top: 16px; } }
@media (prefers-reduced-motion: reduce) { .boom-robot__eyes, .boom-robot__arm, .boom-robot__bubble { transition: none; } }