/* V84c — power restore (breaker room) + security room. Opacity/transform animations only. */
.hl-room { position: fixed; inset: 0; z-index: 90; background: #020304; overflow: hidden; opacity: 0; transition: opacity 280ms ease; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.hl-room.is-in { opacity: 1; }
body.hl-room-open .toast { z-index: 98; }
.app.hl-room-open .summer-scene__frame, .app.hl-room-open .back-hub__frame { visibility: hidden; }
.hl-room__stage { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(ellipse at 50% 45%, #0b0d10, #010102 70%); }
.hl-room__frame { position: absolute; top: 0; left: 50%; height: 100%; height: 100dvh; width: calc(100vh * .5625); width: calc(100dvh * .5625); margin-left: calc(-50vh * .5625); margin-left: calc(-50dvh * .5625); transition: transform 900ms cubic-bezier(.2,.75,.2,1); transform-origin: 50% 50%; }
.hl-room__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.hl-room__art--on { opacity: 0; transition: opacity 1100ms ease; }
.hl-room.is-powered .hl-room__art--on[src] { opacity: 1; }
.hl-room.is-instant .hl-room__art--on { transition: none; } /* V85g: reopening with the power on shows it straight away */

.hl-spot { position: absolute; z-index: 6; border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; outline: none; }
.hl-spot span { position: absolute; left: 50%; bottom: 4%; transform: translate(-50%, 6px); padding: 6px 9px; border: 1px solid rgba(255,190,120,.42); border-radius: 999px; background: rgba(6,3,1,.66); color: rgba(255,232,196,.94); font: 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .18em; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; }
.hl-spot:hover span, .hl-spot:focus-visible span { opacity: 1; transform: translate(-50%, 0); }
@media (hover: none) { .hl-spot span { opacity: .78; transform: translate(-50%, 0); } }

.hl-room__card { position: absolute; z-index: 20; left: max(14px, env(safe-area-inset-left)); right: max(14px, env(safe-area-inset-right)); bottom: max(62px, calc(env(safe-area-inset-bottom) + 62px)); max-width: 440px; padding: 11px 14px 12px; border-left: 2px solid rgba(255,170,90,.6); background: linear-gradient(90deg, rgba(0,0,0,.78), rgba(0,0,0,.5) 70%, rgba(0,0,0,.1)); text-shadow: 0 2px 12px #000; pointer-events: none; }
.hl-room__card.is-pop { animation: hlCardPop 260ms ease-out 1; }
@keyframes hlCardPop { from { opacity: .3; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.hl-room__status { color: rgba(255,178,104,.92); font: 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .24em; }
.hl-room__title { margin: 5px 0 4px; color: #f4e6cb; font: 700 17px/1.1 Georgia, serif; letter-spacing: .04em; }
.hl-room__text { margin: 0; color: rgba(240,228,206,.88); font: 13px/1.38 Georgia, serif; }
.hl-room__back, .hl-room__zoomout { position: absolute; z-index: 21; bottom: max(14px, calc(env(safe-area-inset-bottom) + 12px)); padding: 11px 14px; border: 1px solid rgba(255,190,120,.4); border-radius: 999px; background: rgba(6,3,1,.72); color: rgba(255,232,196,.94); font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .18em; cursor: pointer; }
.hl-room__back { left: max(14px, env(safe-area-inset-left)); }
.hl-room__zoomout { right: max(14px, env(safe-area-inset-right)); }

/* ---------- breaker room ---------- */
.br-breaker { position: absolute; z-index: 7; border: 0; padding: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.br-breaker__well { position: absolute; left: 10%; right: 10%; top: 13%; bottom: 14%; border-radius: 2px; background: linear-gradient(180deg, #151718, #0d0e0f 60%, #18191a); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 3px 6px rgba(0,0,0,.8); }
.br-led { position: absolute; left: 50%; top: 18%; width: 22%; aspect-ratio: 1; margin-left: -11%; border-radius: 50%; background: #2a0d0b; box-shadow: inset 0 0 2px rgba(0,0,0,.8); }
.br-led::after { content: ""; position: absolute; inset: -160%; border-radius: 50%; background: radial-gradient(circle, rgba(120,255,140,.95) 0 18%, rgba(60,230,100,.45) 32%, transparent 62%); opacity: 0; transition: opacity 160ms ease; }
.br-toggle { position: absolute; left: 22%; right: 22%; top: 40%; height: 30%; border-radius: 2px; background: linear-gradient(180deg, #8d9192, #4a4e50 45%, #2b2e30); box-shadow: 0 3px 4px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.35); transform: translateY(26%); transition: transform 120ms cubic-bezier(.3,1.6,.5,1); }
.br-breaker.is-on .br-toggle { transform: translateY(-38%); }
.br-breaker.is-on .br-led::after { opacity: 1; }
.hl-room.is-fizzle .br-breaker.is-on .br-led::after { animation: brFizz 360ms steps(2, jump-none) 1; }
@keyframes brFizz { 0% { opacity: 1; } 50% { opacity: .1; } 100% { opacity: .7; } }
.hl-room.is-fizzle .br-frame { animation: brShake 300ms ease 1; }
.hl-room.is-zoomed.is-fizzle .br-frame { animation: none; }
@keyframes brShake { 25% { translate: -2px 0; } 75% { translate: 2px 0; } }

.br-lever { position: absolute; z-index: 8; pointer-events: none; }
.br-lever__plate { position: absolute; inset: 6% 4%; border-radius: 4px; background: linear-gradient(180deg, #3a3d3e, #26292a); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 2px 6px rgba(0,0,0,.6); }
.br-lever__plate::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 40% 35%, #9a9fa1, #3d4143 70%); box-shadow: 0 1px 3px rgba(0,0,0,.8); }
/* the arm pivots on the plate's center; 180deg = down (off), 0deg = up (on) */
.br-lever__arm { position: absolute; left: 50%; bottom: 50%; width: 24%; height: 58%; margin-left: -12%; transform-origin: 50% 100%; transform: rotate(180deg); transition: transform 620ms cubic-bezier(.34,1.45,.55,1); }
.br-lever__arm::before { content: ""; position: absolute; left: 30%; right: 30%; top: 18%; bottom: 0; background: linear-gradient(90deg, #6b6f70, #c4c8c9 50%, #5b5f60); border-radius: 2px; }
.br-lever__grip { position: absolute; left: 0; right: 0; top: 0; height: 46%; border-radius: 4px 4px 3px 3px; background: linear-gradient(90deg, #8e130e, #e2382c 45%, #9b1711); box-shadow: 0 2px 4px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,180,160,.5); }
.br-lever.is-thrown .br-lever__arm { transform: rotate(0deg); }
.br-sparks { position: absolute; left: 50%; top: 18%; width: 0; height: 0; }
.br-sparks i { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: #ffd27a; box-shadow: 0 0 6px 2px rgba(255,160,60,.9); opacity: 0; transform: rotate(var(--a)) translateY(0); }
.hl-room.is-sparking .br-sparks i { animation: brSpark 700ms cubic-bezier(.15,.7,.3,1) var(--t) 2; }
@keyframes brSpark { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1.2); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(var(--d)) scale(.4); } }
.br-bulbs { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: radial-gradient(ellipse at 55% 8%, rgba(255,200,120,.32), transparent 55%), radial-gradient(ellipse at 40% 70%, rgba(255,170,90,.14), transparent 60%); opacity: 0; }
.hl-room.is-powered .br-bulbs { animation: brBulbs 1600ms steps(1, end) 1 forwards; }
@keyframes brBulbs { 0% { opacity: 0; } 12% { opacity: .9; } 20% { opacity: .1; } 34% { opacity: 1; } 42% { opacity: .3; } 60%, 100% { opacity: .55; } }
.hl-room.is-zoomed .br-spot--panel { pointer-events: none; }
.hl-room.is-zoomed .br-spot--panel span, .hl-room.is-zoomed .br-spot--gen span, .hl-room.is-zoomed .br-spot--window span, .hl-room.is-zoomed .br-spot--lever span { opacity: 0; }
.br-spot--panel { z-index: 4; }
.hl-room.is-powered .br-spot--panel span, .hl-room.is-powered .br-spot--lever span { opacity: 0; }
.br-spot--list, .br-spot--lever { z-index: 9; }
.br-spot--list span { bottom: auto; top: 100%; transform: translate(-50%, 4px); }
.hl-room:not(.is-zoomed) .br-breaker { pointer-events: none; }

.br-note { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; align-content: center; gap: 14px; background: rgba(0,0,0,.62); opacity: 0; transition: opacity 200ms ease; }
.br-note[hidden] { display: none; }
.br-note.is-open { opacity: 1; }
.br-note__paper { width: min(300px, 78vw); padding: 22px 24px 18px; background: linear-gradient(170deg, #e9dcc0, #d4c3a0); color: #1d1a16; font-family: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive; box-shadow: 0 18px 40px rgba(0,0,0,.6); transform: rotate(-2deg) scale(.94); transition: transform 240ms cubic-bezier(.2,1.4,.4,1); }
.br-note.is-open .br-note__paper { transform: rotate(-2deg) scale(1); }
.br-note__head { margin: 0 0 6px; font-size: 20px; opacity: .7; }
.br-note__paper ol { margin: 0; padding-left: 30px; font-size: 38px; line-height: 1.15; font-weight: 700; }
.br-note__foot { margin: 10px 0 0; font-size: 18px; opacity: .72; }
.br-note__close { padding: 10px 14px; border: 1px solid rgba(255,190,120,.4); border-radius: 999px; background: rgba(6,3,1,.8); color: rgba(255,232,196,.94); font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .18em; }

/* ---------- Summer's Paradise: the surge (the V84 stage door is gone) ---------- */
@keyframes hlDoorPulse { from { opacity: .35; } to { opacity: 1; } }
.hl-surge-dim { position: absolute; inset: 0; z-index: 9; background: #000; opacity: 0; pointer-events: none; }
.summer-scene.hl-power-surge .hl-surge-dim { animation: hlParkFlicker 1500ms steps(1, end) 1; }
@keyframes hlParkFlicker { 0% { opacity: .75; } 10% { opacity: .15; } 18% { opacity: .82; } 26% { opacity: .05; } 34% { opacity: .6; } 42% { opacity: 0; } 50% { opacity: .35; } 58%, 100% { opacity: 0; } }
.summer-scene.hl-power-surge .jumbotron-live { animation: hlJumboGlitch 1800ms steps(1, end) 300ms 1; }
@keyframes hlJumboGlitch { 0% { opacity: .2; transform: translateX(-3px); } 10% { opacity: 1; transform: translateX(4px); } 18% { opacity: .1; transform: none; } 30% { opacity: .9; transform: translateX(-2px) skewX(-4deg); } 40% { opacity: .3; transform: none; } 55% { opacity: 1; transform: translateX(2px); } 70%, 100% { opacity: 1; transform: none; } }
.hl-jumbo-boost { position: absolute; z-index: 6; left: 39.7%; top: 8.5%; width: 30%; height: 38%; pointer-events: none; background: radial-gradient(ellipse at 50% 55%, rgba(140,225,255,.34), rgba(255,140,200,.12) 45%, transparent 72%); opacity: 0; transition: opacity 900ms ease; }
.summer-scene.hl-powered .hl-jumbo-boost { opacity: 1; }
.summer-scene.hl-power-surge .hl-jumbo-boost { animation: hlBoost 2400ms ease-out 1; }
@keyframes hlBoost { 0%, 40% { opacity: 0; } 55% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: none; } }
.summer-scene.hl-power-surge .summer-glow--pool { animation: hlPoolSurge 2600ms ease-out 600ms 1; }
@keyframes hlPoolSurge { 0% { opacity: .4; transform: translate(-50%,-50%) scale(1); } 35% { opacity: 1; transform: translate(-50%,-50%) scale(1.25, 1.12); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1); } }

/* ---------- Staff Access: security door ---------- */
.hl-hub-security { left: 42.2%; top: 31.3%; width: 14.8%; height: 48.3%; z-index: 19; } /* V84d: the repainted steel SECURITY door */
/* V85j: the old floating status dot (a CSS glow on the wall above the door's top-left corner) is gone.
   Power state now lives where it belongs in the art: a faint glow on the card reader's little screen beside the door.
   No power = dim red standby blink; power restored = soft cyan readout. Decorative only (pointer-events none). */
.hl-sec-lamp { position: absolute; left: 56.0%; top: 54.0%; width: 1.7%; height: 2.2%; transform: translate(-50%, -50%); border-radius: 2px; z-index: 8; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(ellipse at 50% 50%, rgba(255,70,40,.34), rgba(255,40,20,.10) 60%, transparent 85%); animation: hlLampWarn 2.8s steps(1, end) infinite; }
@keyframes hlLampWarn { 0%, 70% { opacity: .9; } 71%, 100% { opacity: .35; } }
.hl-sec-powered .hl-sec-lamp { background: radial-gradient(ellipse at 50% 50%, rgba(110,235,255,.42), rgba(60,200,255,.14) 60%, transparent 88%); animation: hlLampOk 3.4s ease-in-out infinite alternate; }
@keyframes hlLampOk { from { opacity: .7; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hl-sec-lamp { animation: none; } }
.hl-sec-window { position: absolute; left: 46.1%; top: 39.6%; width: 5.9%; height: 10.9%; z-index: 8; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 60%, rgba(90,230,255,.42), rgba(60,200,255,.16) 55%, transparent 80%); mix-blend-mode: screen; transition: opacity 900ms ease; }
.hl-sec-powered .hl-sec-window { opacity: 1; animation: hlMonitorGlow 2.3s steps(1, end) infinite; }
@keyframes hlMonitorGlow { 0%, 40% { opacity: 1; } 41% { opacity: .72; } 44%, 78% { opacity: .95; } 79% { opacity: .8; } 82%, 100% { opacity: 1; } }
/* V84c: the SECURITY ROOM label is always on (beats the V36 'invisible hotspots' rule), bigger and lit */
.back-hub .back-zone.hl-hub-security span { opacity: 1 !important; visibility: visible !important; transform: translate(-50%, -50%) !important; left: 50%; right: auto; bottom: auto; top: 63%; white-space: nowrap; padding: 7px 10px 7px 20px; border: 1px solid rgba(255,120,80,.75); border-radius: 4px; background: rgba(14,4,2,.86); color: #ffe6c8; font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 0 14px rgba(255,90,50,.45), 0 0 30px rgba(255,90,50,.22); }
.back-hub .back-zone.hl-hub-security span::before { content: ""; position: absolute; left: 8px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #ff5a3c; box-shadow: 0 0 6px 1px rgba(255,90,60,.9); animation: hlDoorPulse 1.1s ease-in-out infinite alternate; }
.back-hub .back-zone.hl-hub-security span::after { content: ""; }
.back-hub .back-zone.hl-hub-security.is-powered span::after { color: #8ff4ff; }
.back-hub .back-zone.hl-hub-security.is-powered span { border-color: rgba(110,230,255,.75); box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 0 14px rgba(90,220,255,.4), 0 0 30px rgba(90,220,255,.2); }
.back-hub .back-zone.hl-hub-security.is-powered span::before { background: #6ff0ff; box-shadow: 0 0 6px 1px rgba(110,240,255,.9); }
.hl-hub-security[hidden] { display: none; }
.hl-hub-security__glow { position: absolute; inset: -14%; border-radius: 8px; background: radial-gradient(ellipse, rgba(255,90,60,.32), transparent 70%); animation: hlDoorPulse 2.6s ease-in-out infinite alternate; pointer-events: none; }
.hl-hub-security.is-powered .hl-hub-security__glow { background: radial-gradient(ellipse, rgba(110,230,255,.34), transparent 70%); }
@media (hover: none) { .hl-hub-security span { opacity: .85; transform: translate(-50%, 0); } }

/* ---------- security room ---------- */
.sr-glow { position: absolute; z-index: 2; pointer-events: none; left: 22.34%; top: 30%; width: 39.72%; height: 31%; background: radial-gradient(ellipse, rgba(80,240,230,.28), transparent 70%); animation: srHum 3.4s ease-in-out infinite alternate; }
@keyframes srHum { 0% { opacity: .55; } 48% { opacity: .9; } 50% { opacity: .5; } 52%, 100% { opacity: .85; } }
.sr-scan { position: absolute; z-index: 3; pointer-events: none; left: 23.59%; top: 31%; width: 36.83%; height: 16.5%; overflow: hidden; opacity: .35; }
.sr-scan::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18%; background: linear-gradient(180deg, transparent, rgba(190,255,250,.5), transparent); animation: srScan 2.8s linear infinite; }
@keyframes srScan { from { transform: translateY(-100%); } to { transform: translateY(560%); } }
.sr-cursor { position: absolute; z-index: 3; left: 31.03%; top: 52%; width: 1.16%; height: .8%; background: rgba(170,255,240,.95); animation: srBlink 1s steps(1, end) infinite; pointer-events: none; }
@keyframes srBlink { 50% { opacity: 0; } }
.sr-dark { position: absolute; inset: 0; z-index: 10; pointer-events: none; overflow: hidden; }
.sr-dark i { position: absolute; left: 0; top: 0; width: 0; height: 0; transition: transform 160ms ease-out; }
.sr-dark i.is-sweep { transition: transform 1300ms cubic-bezier(.45,0,.2,1); }
.sr-dark i::before { content: ""; position: absolute; left: -150vmax; top: -150vmax; width: 300vmax; height: 300vmax; background: radial-gradient(circle at center, rgba(0,0,0,0) 0, rgba(0,0,0,0) 70px, rgba(0,0,0,.55) 120px, rgba(0,0,0,.9) 190px, rgba(0,0,0,.94) 100%); }
.hl-room.is-dark .hl-spot span { opacity: .5; border-color: rgba(255,255,255,.18); }
/* V85e: on touch (no hover) the security room's label pills only show while .sr-labels is set (open, power-up, empty tap), then fade */
@media (hover: none) {
  .hl-room.hl-room--security .hl-spot span { opacity: 0; transition: opacity 600ms ease; }
  .hl-room.hl-room--security.sr-labels .hl-spot span { opacity: .78; transition-duration: 220ms; }
  .hl-room.hl-room--security.is-dark.sr-labels .hl-spot span { opacity: .5; }
}

@media (prefers-reduced-motion: reduce) {
  .hl-room__frame, .br-toggle, .br-lever__arm, .sr-dark i { transition-duration: 1ms; }
  .hl-sec-lamp, .hl-sec-window, .sr-breakers__glow, .sr-breakers__sign, .hl-hub-security__glow, .sr-glow, .sr-scan::before, .sr-cursor { animation: none; }
  .summer-scene.hl-power-surge .hl-surge-dim, .summer-scene.hl-power-surge .jumbotron-live, .hl-room.is-powered .br-bulbs { animation-duration: 1ms; }
  .hl-room.is-powered .br-bulbs { opacity: .55; }
}
/* edge spots: keep their labels inside the frame (the security frame is fitted to the phone width in V84b) */
.sr-spot--photos span { left: auto; right: -16%; transform: none !important; }
.sr-spot--jug span { left: 70%; transform: none !important; }
.sr-spot--safe span { left: 4%; transform: none !important; }
.sr-spot--keys span { left: auto; right: 60%; transform: none !important; }

/* ---------- V84b: security frame fitted to the width on phones (whole room visible: jug, key rack, BREAKERS door) ---------- */
.hl-room__frame.sr-frame { --fw: min(100vw, calc(100vh * .6797)); --fw: min(100vw, calc(100dvh * .6797)); width: var(--fw); height: calc(var(--fw) * 1.4713); margin-left: calc(var(--fw) / -2); top: max(0px, calc((100vh - var(--fw) * 1.4713 - 200px) / 2)); top: max(0px, calc((100dvh - var(--fw) * 1.4713 - 200px) / 2)); }
.sr-frame::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(180deg, #010102 0, rgba(1,1,2,0) 7%, rgba(1,1,2,0) 90%, #010102 100%); }
/* the BREAKERS door: lit sign above it + light leaking round the frame; sits above the darkness so it reads in the dark */
.sr-spot--breakers { z-index: 12; }
.sr-door { position: absolute; z-index: 2; display: block; object-fit: fill; pointer-events: none; -webkit-user-select: none; user-select: none; box-shadow: 0 0 6px 2px rgba(0,0,0,.55); }
.hl-room.is-powerup .sr-door--on { animation: srPowerUp 1300ms steps(1, end) 1 both; }
.sr-breakers__glow { position: absolute; inset: 0; border: 1px solid rgba(255,176,86,.42); border-bottom: 0; border-radius: 2px 2px 0 0; box-shadow: 0 0 10px rgba(255,150,60,.42), inset 0 0 9px rgba(255,140,50,.22); animation: hlDoorPulse 2.4s ease-in-out infinite alternate; pointer-events: none; }
.sr-breakers__leak { position: absolute; left: 6%; right: 6%; bottom: 0; height: 2.6%; border-radius: 2px; background: rgba(255,92,58,.85); box-shadow: 0 0 9px 2px rgba(255,80,50,.5); pointer-events: none; }
.sr-breakers__sign { position: absolute; right: -6%; bottom: 100%; margin-bottom: 5px; padding: 4px 6px 3px; border-radius: 2px; background: #e0ae2c; color: #170f02; font: 800 10px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: .1em; white-space: nowrap; box-shadow: 0 0 0 1px rgba(30,18,2,.8), 0 0 12px rgba(255,186,60,.6), 0 0 26px rgba(255,140,40,.32); animation: srSignBuzz 3.2s steps(1, end) infinite; pointer-events: none; }
@keyframes srSignBuzz { 0%, 100% { opacity: 1; } 71% { opacity: .55; } 73% { opacity: 1; } 76% { opacity: .7; } 78% { opacity: 1; } }
.hl-room:not(.is-dark) .sr-breakers__glow { animation: none; opacity: .45; }
.hl-room:not(.is-dark) .sr-breakers__leak { background: rgba(255,200,140,.8); box-shadow: 0 0 9px 2px rgba(255,190,120,.4); }
.sr-spot--breakers:active .sr-breakers__glow, .sr-spot--breakers:focus-visible .sr-breakers__glow { opacity: 1; border-color: rgba(255,210,140,.9); }

/* ---------- V84c: surge montage (opacity/transform only) ---------- */
.hl-montage { position: fixed; inset: 0; z-index: 96; pointer-events: auto; touch-action: none; -webkit-tap-highlight-color: transparent; }
.hl-montage.is-out { opacity: 0; transition: opacity 380ms ease; pointer-events: none; }
.hl-montage__bar { position: absolute; left: 0; right: 0; height: 12vh; background: #000; transform: scaleY(0); transition: transform 260ms ease-out; }
.hl-montage__bar--top { top: 0; transform-origin: 50% 0; }
.hl-montage__bar--bot { bottom: 0; transform-origin: 50% 100%; }
.hl-montage.is-in .hl-montage__bar { transform: scaleY(1); }
.hl-montage__flash { position: absolute; inset: 0; background: #fff8ec; opacity: 0; }
.hl-montage__flash.is-on { animation: hlMontFlash 360ms ease-out 1 both; }
@keyframes hlMontFlash { 0% { opacity: 0; } 28% { opacity: 1; } 46% { opacity: .96; } 100% { opacity: 0; } }
.hl-montage.is-reduced .hl-montage__flash { background: #000; }
.hl-montage.is-reduced .hl-montage__flash.is-on { animation: hlMontDip 680ms ease-in-out 1 both; }
@keyframes hlMontDip { 0% { opacity: 0; } 44% { opacity: 1; } 56% { opacity: 1; } 100% { opacity: 0; } }
.hl-montage__skip { position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: calc(6vh - 5px); color: rgba(255,240,220,.62); font: 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .2em; opacity: 0; transition: opacity 300ms ease 500ms; }
.hl-montage.is-in .hl-montage__skip { opacity: 1; }
.app.hl-montage-cut .hub, .app.hl-montage-cut .summer-scene, .app.hl-montage-cut .back-hub, .app.hl-montage-cut .ride-stage, .app.hl-montage-cut .outpost-store { transition: none !important; }
/* shot 1: the main hub jolts */
.hl-hub-jolt { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
.hl-hub-jolt i { position: absolute; opacity: 0; }
.hl-hub-jolt__spike { left: 22%; top: 2%; width: 56%; height: 40%; background: radial-gradient(ellipse at 50% 50%, rgba(255,120,80,.75), rgba(255,70,40,.28) 42%, transparent 70%); mix-blend-mode: screen; }
.hl-hub-jolt__wash { inset: 0; background: radial-gradient(ellipse at 50% 30%, rgba(255,236,210,.5), rgba(255,190,140,.16) 55%, transparent 80%); mix-blend-mode: screen; }
.hl-hub-jolt__dim { inset: 0; background: #000; }
.app.hl-jolt-hub .hl-hub-jolt__spike { animation: hlJoltSpike 1400ms steps(1, end) 1 both; }
.app.hl-jolt-hub .hl-hub-jolt__wash { animation: hlJoltWash 1400ms ease-out 1 both; }
.app.hl-jolt-hub .hl-hub-jolt__dim { animation: hlJoltDim 1400ms steps(1, end) 1 both; }
@keyframes hlJoltSpike { 0% { opacity: 1; } 8% { opacity: .2; } 14% { opacity: 1; } 22% { opacity: .4; } 30% { opacity: 1; } 40% { opacity: .7; } 52% { opacity: 1; } 70% { opacity: .85; } 100% { opacity: .6; } }
@keyframes hlJoltWash { 0% { opacity: 1; } 12% { opacity: .25; } 18% { opacity: .9; } 45% { opacity: .2; } 100% { opacity: 0; } }
@keyframes hlJoltDim { 0% { opacity: 0; } 6% { opacity: .7; } 10% { opacity: 0; } 20% { opacity: .55; } 25% { opacity: 0; } 36% { opacity: .35; } 40%, 100% { opacity: 0; } }
.app.hl-jolt-hub .hub { animation: hlShake 560ms linear 1; }
@keyframes hlShake { 0% { transform: translate3d(0,0,0); } 10% { transform: translate3d(-6px, 3px, 0); } 20% { transform: translate3d(5px, -4px, 0); } 30% { transform: translate3d(-4px, -2px, 0); } 40% { transform: translate3d(4px, 3px, 0); } 55% { transform: translate3d(-2px, 1px, 0); } 70% { transform: translate3d(2px, -1px, 0); } 100% { transform: translate3d(0,0,0); } }
.app.hl-jolt-hub .hub-light--heartland, .app.hl-jolt-hub .hub-light--heartland-bulbs, .app.hl-jolt-hub .live-glow--heartland-red, .app.hl-jolt-hub .live-glow--heartland-bulbs,
.app.hl-jolt-hub .hub-light--donut, .app.hl-jolt-hub .hub-light--list, .app.hl-jolt-hub .hub-light--love, .app.hl-jolt-hub .hub-light--getaway { animation: hlNeonJolt 1300ms steps(1, end) 1 both !important; }
@keyframes hlNeonJolt { 0% { opacity: 1; } 9% { opacity: .1; } 15% { opacity: 1; } 24% { opacity: .3; } 32% { opacity: 1; } 46% { opacity: .55; } 54%, 100% { opacity: 1; } }
/* shot 3: the security room powering up */
.hl-room.is-powerup .sr-on-art { animation: srPowerUp 1300ms steps(1, end) 1 both; }
@keyframes srPowerUp { 0% { opacity: 0; } 12% { opacity: .7; } 18% { opacity: 0; } 30% { opacity: .9; } 36% { opacity: .2; } 50% { opacity: 1; } 56% { opacity: .5; } 64%, 100% { opacity: 1; } }
.hl-room.is-powerup .sr-glow, .hl-room.is-powerup .sr-scan, .hl-room.is-powerup .sr-cursor { opacity: 0; animation: srFadeIn 500ms ease 900ms 1 forwards; }
@keyframes srFadeIn { to { opacity: 1; } }
.hl-room.is-powerup .sr-scan { animation-name: srFadeScan; }
@keyframes srFadeScan { to { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .app.hl-jolt-hub .hub { animation: none; }
  .hl-hub-jolt i { animation: none !important; }
  .hl-room.is-powerup .sr-on-art { animation: srFadeIn 900ms ease 1 both; opacity: 0; }
  .hl-room.is-powerup .sr-door--on { animation: srFadeIn 900ms ease 1 both; opacity: 0; }
}

/* ---------- V85i: canvas sparks, cinematic montage, no SECURITY ROOM labels ---------- */
canvas.hl-sparks { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.hl-montage__bar { z-index: 2; }
.hl-montage__flash { z-index: 3; }
.hl-room__title:empty { display: none; }
.back-hub .back-zone.hl-hub-security span { display: none !important; }
/* during the jolt montage nothing but the scene: every label, card, chip, toast, button and hint is gone */
body.hl-cinematic .mini-brand, body.hl-cinematic .sound-btn, body.hl-cinematic .hub-card, body.hl-cinematic .controls,
body.hl-cinematic .toast, body.hl-cinematic .mobile-hint, body.hl-cinematic .walkie-sub, body.hl-cinematic .back-hub-card,
body.hl-cinematic .back-hub__back, body.hl-cinematic .summer-card, body.hl-cinematic .summer-sound, body.hl-cinematic .summer-scene__back,
body.hl-cinematic .summer-reach, body.hl-cinematic .summer-float-spot, body.hl-cinematic .truck-note, body.hl-cinematic .hub-note,
body.hl-cinematic .hotspot span, body.hl-cinematic .back-zone span, body.hl-cinematic .hl-room__card, body.hl-cinematic .hl-room__back,
body.hl-cinematic .hl-spot span, body.hl-cinematic .comic-modal {
  opacity: 0 !important; visibility: hidden !important; transition: none !important; animation: none !important;
}