@font-face{font-family:RAMGODCondensed;src:url('/assets/overview/headline.otf') format('opentype');font-weight:700;font-display:swap}
:root{--gold:#ff56c8;--pink:#ff37c7;--cream:#f3eee4;--site-nav-height:78px;--character-name-font:'Arial Black',Arial,sans-serif}
html{scroll-padding-top:var(--site-nav-height)}
[hidden]{display:none!important}
a:focus-visible,button:focus-visible{outline:2px solid #ff56c8;outline-offset:5px}
.skip-link{position:fixed;z-index:100;top:8px;left:20px;transform:translateY(-150%);padding:14px 18px;background:var(--gold);color:#050b12;text-decoration:none}
.skip-link:focus{transform:translateY(0)}
.site-header{height:var(--site-nav-height);position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;gap:28px;padding:0 5vw;background:#050a10;border-bottom:1px solid #ffffff1b;backdrop-filter:blur(16px)}
/* Cover content painted above the fixed header in inset mobile webviews.
   The controls stay inside the usable viewport, below the native app toolbar. */
.site-header::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:100vh;background:#050a10;pointer-events:none}
.site-home{display:block;flex:none}.ramgod-logo{width:175px;height:31px;display:block;mix-blend-mode:screen}
.primary-nav{margin-left:auto;height:100%;display:flex;align-items:center;gap:34px}
.site-nav-item{position:relative;display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 0;text-decoration:none;font:700 11px Arial,sans-serif;letter-spacing:1.8px;color:#c4c8cc;background:none;border:0}
.site-nav-item:hover{color:#ff8cdb;text-shadow:0 0 14px #ff37c780}
.site-nav-item[aria-current=page]{color:var(--gold)}
.site-nav-item[aria-current=page]:after{content:'';position:absolute;bottom:1px;left:0;right:0;height:2px;background:var(--gold)}
.future-nav{color:#8f9ca8}.primary-nav .future-nav small{position:absolute;top:38px;white-space:nowrap;font:8px Arial,sans-serif;letter-spacing:1px;opacity:0;transition:opacity .2s;pointer-events:none}.primary-nav .future-nav:hover small,.primary-nav .future-nav:focus-visible small{opacity:1}
.menu-toggle{display:none}.mobile-menu{position:fixed;inset:var(--site-nav-height) 0 0;z-index:39;background:#050b12f7;overflow-y:auto;padding:22px 7vw 45px}
.menu-open{overflow:hidden}
.mobile-menu nav{display:flex;flex-direction:column;align-items:stretch}
.mobile-menu .site-nav-item{display:block;text-align:left;font:700 35px RAMGODCondensed,Arial,sans-serif;padding:19px 0;border-bottom:1px solid #ffffff20;letter-spacing:.4px;min-height:66px}
.mobile-menu .site-nav-item[aria-current=page]:after{display:none}.mobile-menu .future-nav small{display:block;font:9px Arial,sans-serif;letter-spacing:1.5px;margin-top:8px;color:#9eabb7}.mobile-menu p{font:12px/1.8 Arial,sans-serif;color:#9eabb7;margin-top:28px;max-width:270px}
.future-notice{position:fixed;z-index:65;top:calc(var(--site-nav-height) + 16px);right:5vw;width:330px;max-width:90vw;padding:23px 48px 21px 23px;background:#0c1b29;border:1px solid #e4c77966;box-shadow:0 12px 40px #0008;color:var(--cream)}
.future-notice strong{font:700 23px RAMGODCondensed;letter-spacing:1px;color:var(--gold)}.future-notice p{font:13px/1.7 Arial;margin:10px 0 0;color:#c1ccd5}.future-notice button{position:absolute;right:8px;top:5px;width:36px;height:36px;border:0;background:transparent;font-size:24px}

/* One pinned camera, from a league broadcast to the people beneath it. */
.world-journey{--intro-travel:480svh;position:relative;height:calc(var(--intro-travel) + 675svh);background:#050b12;color:var(--cream)}
.journey-sticky{position:sticky;top:0;height:100svh;min-height:480px;overflow:hidden;isolation:isolate;background:#050b12}
#scroll-track{position:absolute;top:var(--intro-travel);height:600svh;width:1px;pointer-events:none}
.journey-anchor{position:absolute;top:calc(230.4svh + var(--site-nav-height));width:1px;height:1px;pointer-events:none}
#experience{position:absolute;inset:0;height:100%;opacity:0;pointer-events:none}
.journey-visual{position:absolute;inset:0;z-index:12;overflow:hidden;pointer-events:none;will-change:opacity}
.city-world{position:absolute;left:0;top:0;width:1536px;height:1024px;transform-origin:0 0;will-change:transform}
.city-world>img{display:block;width:100%;height:100%}
.police-glow{position:absolute;left:74px;top:635px;width:205px;height:42px;background:linear-gradient(90deg,#00cfff88,transparent,#ff2a9b88);filter:blur(14px);mix-blend-mode:screen;animation:patrolGlow 3s ease-in-out infinite alternate}
@keyframes patrolGlow{from{opacity:.25}to{opacity:.85;transform:scaleX(1.08)}}
.league-broadcast{position:absolute;top:0;left:0;width:100%;height:calc(100% - var(--site-nav-height));transform:translateY(var(--site-nav-height));transform-origin:0 0;overflow:hidden;background:#040913;will-change:transform;backface-visibility:hidden}
/* Paint the approved arena opening while the camera module loads. The city
   and billboard bezel must not appear at their raw artwork coordinates.
   The first complete camera update sets data-scene, releasing these layers;
   visibility preserves the dimensions measured for the cinematic reveal. */
.world-journey:not([data-scene]) :is(.city-world,.billboard-frame,.scene-atmosphere){visibility:hidden}
.broadcast-art{position:absolute;inset:-4%;width:108%;height:108%;max-width:none;object-fit:cover;object-position:55% 58%;transform:translateX(var(--broadcast-shift,0));filter:saturate(1.14)}
.broadcast-shade{position:absolute;inset:0;background:linear-gradient(180deg,#020713a8,transparent 38%,#03091a35 68%,#020612d9),radial-gradient(ellipse at 50% 37%,#03112786,transparent 76%)}
.broadcast-scanlines{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 3px,#030a201f 3px 4px);opacity:.6;pointer-events:none}
.broadcast-content{position:absolute;inset:0;text-align:center}
.broadcast-content>.ramgod-logo{position:absolute;left:50%;top:10%;transform:translateX(-50%);width:min(430px,46vw);height:auto;aspect-ratio:414/63;filter:drop-shadow(0 0 24px #38c2ff60)}
.broadcast-opening,.broadcast-expansion{position:absolute;left:3%;right:3%;top:26%;margin:0;will-change:opacity,transform}
.broadcast-opening{font:700 clamp(38px,6.5vw,104px)/.96 RAMGODCondensed,Arial,sans-serif;letter-spacing:-.5px;text-shadow:0 4px 30px #02051be6}
.broadcast-opening>span{display:block}.broadcast-opening .electric-word{color:#a3f5ff;text-shadow:0 0 24px #00cfff55,3px 0 #ff2ecb66;font-size:1.25em}
.broadcast-expansion{opacity:0;top:32%}.broadcast-expansion h2{margin:0;font:700 clamp(54px,8.5vw,138px)/1 RAMGODCondensed,Arial,sans-serif;text-shadow:0 4px 25px #02051be6}.broadcast-expansion em{font-style:normal;color:#ff6cda;text-shadow:0 0 28px #ff30be66}
.broadcast-expansion p{font:400 clamp(18px,2.15vw,30px)/1.4 Arial,sans-serif;margin:25px auto 0;max-width:640px;text-shadow:0 2px 14px #03091b}
.street-copy{position:absolute;z-index:3;left:5vw;top:calc(var(--site-nav-height) + 24px);opacity:0;max-width:520px;filter:drop-shadow(0 2px 12px #010716);will-change:opacity}
.street-copy h2{font:700 clamp(40px,5.2vw,80px)/.98 RAMGODCondensed,Arial,sans-serif;letter-spacing:.2px;margin:0;color:#fff}
.street-copy h2 span{color:#a4f5ff}.street-copy p{font:18px/1.6 Arial,sans-serif;max-width:460px;margin:16px 0 0;text-wrap:pretty;color:#f1edf7;text-shadow:0 2px 12px #010716,0 0 18px #010716}
.family-copy h2 span{color:#ff89df}
.journey-vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 -50px 65px -50px #020713,inset 0 0 80px #030a1620}
/* Floating scroll invitation: the soft scrim has no panel edge or hit target. */
.scroll-cue{position:absolute;z-index:5;isolation:isolate;bottom:max(16px,calc(6% - 24px));left:50%;transform:translateX(-50%);min-width:242px;min-height:96px;padding:20px 28px 14px;display:flex;flex-direction:column;align-items:center;gap:11px;border:0;background:transparent;color:#ffb9ec;box-shadow:none;font:700 13px Arial,sans-serif;letter-spacing:2.5px;text-shadow:0 0 4px #ff6ad8,0 0 12px #ff37c7,0 0 26px #ff37c799;pointer-events:auto;transition:color .2s,text-shadow .2s}
.scroll-cue:before{content:'';position:absolute;z-index:-1;inset:-38px -54px;pointer-events:none;background:radial-gradient(ellipse at center,#020610ed 0%,#020610c9 30%,#02061073 52%,#02061000 74%)}
.scroll-cue svg{width:24px;height:28px;fill:none;stroke:#b8f8ff;stroke-width:2;filter:drop-shadow(0 0 3px #4eeaff) drop-shadow(0 0 9px #4eeaff99);animation:scrollSignal 1.7s ease-in-out infinite}
.scroll-cue:hover,.scroll-cue:focus-visible{color:#ffe3f7;text-shadow:0 0 5px #ff8be5,0 0 15px #ff37c7,0 0 30px #ff37c7bb}
@keyframes scrollSignal{0%,100%{transform:translateY(-2px);opacity:.65}55%{transform:translateY(4px);opacity:1}}
.journey-progress{position:absolute;z-index:15;left:0;right:0;bottom:0;height:2px;background:#7edfff10;pointer-events:none}.journey-progress i{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#ff37c7,#9defff);box-shadow:0 0 12px #ff37c7}
.reduced-scenes{display:none}
/* Trailer shell is ready for the supplied media URL. No fake playback controls. */
.no-script-message{padding:30px;color:#c7d2da;background:#07101a;font:14px Arial}
/* Shared cyan and magenta details carry through the existing interactive garage. */
.characters{grid-template-columns:repeat(5,minmax(0,1fr))}.characters button:hover,.characters button:focus-visible{border-color:#ff6cd8;box-shadow:0 0 20px #ff37c726}.characters button[aria-pressed=true]{box-shadow:0 0 20px #38c2ff22}
.gesture a{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:10px 16px;color:#fff;border:1px solid #ff5bd9;background:#1b1029cb;box-shadow:0 0 20px #ff37c72b;text-decoration:none;pointer-events:auto;font-size:10px;letter-spacing:1.6px}.gesture a:hover{box-shadow:0 0 25px #ff37c76b}
@media(max-width:900px){.primary-nav{gap:23px}.site-nav-item{font-size:10px;letter-spacing:1.1px}.site-header{gap:20px}}
@media(max-width:760px){
 :root{--site-nav-height:66px}
 .site-header{padding:0 6vw}.site-header .ramgod-logo{width:140px;height:26px}.primary-nav{display:none}
 .menu-toggle{margin-left:auto;display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 0 8px 14px;border:0;background:none;font:10px Arial;letter-spacing:1.5px;color:#ff8bdd}.menu-toggle svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.4}
 .broadcast-content>.ramgod-logo{width:78vw;top:15%}.broadcast-opening{top:32%;left:4%;right:4%;font-size:clamp(32px,8.7vw,64px);line-height:1.08;letter-spacing:0}.broadcast-opening .electric-word{font-size:1.8em;line-height:1.12}
 .broadcast-expansion{top:35%}.broadcast-expansion h2{font-size:clamp(42px,11.8vw,84px);line-height:1}.broadcast-expansion h2 em{display:block}.broadcast-expansion p{font-size:18px;line-height:1.6;max-width:88%;margin-top:22px}
 .broadcast-art{object-position:57% 50%}.broadcast-shade{background:linear-gradient(180deg,#050c20bb,transparent 25%,#020c1b66 52%,#030519ad)}
 .scroll-cue{bottom:max(16px,calc(7% - 20px));min-width:238px;min-height:94px;font-size:12px;letter-spacing:2px;padding:20px 24px 14px}
 .street-copy{left:6vw;right:6vw;top:calc(var(--site-nav-height) + 27px);max-width:none}.street-copy h2{font-size:clamp(34px,10.2vw,58px)}.street-copy p{font-size:14px;line-height:1.6;max-width:310px;margin-top:14px}.family-copy{top:calc(var(--site-nav-height) + 50px)}
 .characters{grid-template-columns:repeat(3,minmax(0,1fr))}
 .story-synopsis{font-size:14px;line-height:1.85;text-align:left}.garage-door{width:88vw;margin-top:29px;padding-top:23px}.garage-door strong{font-size:27px}
 .site-footer{padding:24px 6vw;min-height:120px;gap:10px;flex-wrap:wrap;font-size:8px;letter-spacing:1.5px}.site-footer a{font-size:9px}.future-notice{right:6vw;max-width:88vw}
}
@media(max-height:650px){.broadcast-content>.ramgod-logo{top:8%;width:min(300px,62vw)}.broadcast-opening{top:28%;font-size:clamp(31px,7.5vh,62px)}.broadcast-expansion{top:28%}.broadcast-expansion h2{font-size:clamp(42px,9vh,80px)}.broadcast-expansion p{margin-top:12px;font-size:17px}.scroll-cue{bottom:max(12px,calc(5% - 12px));min-height:74px;padding:13px 22px 10px;gap:7px}.scroll-cue svg{height:22px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.city-flight{display:none}}

@media(max-width:760px) and (max-height:650px){.broadcast-opening{font-size:clamp(27px,8.6vw,54px);top:30%}.broadcast-opening .electric-word{font-size:1.7em}.broadcast-content>.ramgod-logo{top:11%}}

/* Broadcast atmosphere stays subtle so the billboard reveal remains the focus. */
.league-broadcast:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 35%,#65dfff0d 48%,#ff4fc50a 52%,transparent 65%);background-size:240% 100%;animation:broadcastSweep 9s ease-in-out infinite}
@keyframes broadcastSweep{0%,20%{background-position:120% 0}80%,100%{background-position:-120% 0}}
.broadcast-content{z-index:2}.broadcast-scanlines{z-index:1}
@media(prefers-reduced-motion:reduce){.league-broadcast:after{animation:none}}

/* A single layered neighborhood with distinct establishing and portrait holds. */
.world-journey{--intro-travel:1400svh}
.journey-anchor{top:calc(539svh + var(--intro-extra,0svh) + var(--site-nav-height))}
.city-world{width:1411px;height:1114px}
.police-glow{display:none}
.street-focus{position:absolute;inset:var(--site-nav-height) 0 0;z-index:2;visibility:hidden;opacity:0;overflow:hidden;pointer-events:auto;background:#060b12;touch-action:pan-y}
.street-backdrop{position:absolute;inset:-10%;width:120%;height:120%;object-fit:cover;object-position:65% 15%;filter:blur(6px) brightness(.45);opacity:.85}
.street-set{position:absolute;inset:0;overflow:hidden}
.street-plane{position:absolute;left:0;top:0;width:1774px;height:887px;will-change:transform;pointer-events:none}
.street-background,.street-car{position:absolute;inset:0;width:1774px;height:887px;max-width:none}
.street-background{mask-image:linear-gradient(0deg,transparent,#000 10%,#000 91%,transparent),linear-gradient(90deg,transparent,#000 8%,#000 95%,transparent);mask-composite:intersect;will-change:filter}
.street-car{mask-image:linear-gradient(90deg,transparent,#000 5%,#000 96%,transparent);clip-path:polygon(0% 55%,3% 47%,7% 43%,11% 39%,17% 34%,21% 31%,24% 30%,49% 31%,52% 39%,58% 47%,63% 53%,69% 57%,73% 63%,76% 76%,77% 100%,0% 100%);will-change:filter}
.street-actor{position:absolute;transform-origin:50% 100%;will-change:filter;pointer-events:none}
.street-actor>img,.street-idle{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;max-width:none}
.focus-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#030a13c4,transparent 32%),linear-gradient(0deg,#02070ef0,transparent 24%)}
.subject-light{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at var(--focus-x,60%) 40%,#a1eaff,transparent 53%);opacity:var(--subject-light,0);mix-blend-mode:screen}
.street-tools{position:absolute;top:22px;left:5vw;right:5vw;display:flex;justify-content:space-between;gap:16px}
.street-tools{align-items:center}.street-motion span{white-space:nowrap}

.focus-identity{position:absolute;left:5vw;top:24%;width:26vw;max-width:350px;text-shadow:0 2px 20px #000}
.focus-eyebrow{font:10px Arial;letter-spacing:2px;color:#86e8ff;margin:0 0 16px;display:flex;align-items:center;gap:10px}.focus-eyebrow:before{content:'';width:5px;height:5px;background:#ff62d1;box-shadow:0 0 12px #ff37c7}
.focus-identity h2{font:700 clamp(36px,4.7vw,78px)/.98 RAMGODCondensed,Arial;margin:0;color:#fff}
.focus-bio{font:15px/1.65 Arial;max-width:290px;color:#d4e2eb;margin:20px 0 24px}
.focus-next{font:9px Arial;letter-spacing:1.4px;min-height:44px;border:0;border-bottom:1px solid #ff6cd366;color:#ffa6e5;background:transparent;padding:12px 0;cursor:pointer;display:flex;gap:20px;align-items:center}.focus-next span{font-size:21px;color:#9defff}
.street-select{position:absolute;bottom:25px;left:5vw;right:5vw;display:flex;gap:10px;justify-content:center}
.street-select button{min-height:48px;padding:14px 28px;min-width:140px;border:1px solid #9defff40;background:#06121cba;font:700 11px Arial;letter-spacing:1.5px;text-transform:uppercase;color:#c7d4e3;cursor:pointer}
.street-select button:hover,.street-select button:focus-visible{border-color:#ff68d3;box-shadow:0 0 22px #ff37c742}
.street-select button[aria-pressed=true]{border-color:#7deaff;color:white;background:#103141db;box-shadow:inset 0 -2px #83edff,0 0 22px #45dfff22}
.street-focus[data-character=scene] .focus-identity{top:auto;bottom:110px;max-width:430px;width:32vw}.street-focus[data-character=scene] .focus-identity h2{font-size:clamp(28px,3.3vw,50px)}
@media(max-width:760px){
 .focus-identity,.street-focus[data-character=scene] .focus-identity{top:auto;bottom:92px;left:6vw;width:88vw;max-width:88vw}
 .focus-identity h2{font-size:38px}.street-focus[data-character=scene] .focus-identity h2{font-size:29px}
 .focus-eyebrow{margin:0 0 10px;font-size:9px;letter-spacing:1.5px}.focus-bio{font-size:12px;line-height:1.5;margin:9px 0 4px;max-width:310px}
 .focus-next{font-size:8px;min-height:35px;padding:7px 0;letter-spacing:1.2px}
 .focus-shade{background:linear-gradient(0deg,#030a13fa 0%,#030a13e6 18%,transparent 48%)}
 .street-select{bottom:20px;left:5vw;right:5vw;gap:5px}.street-select button{min-width:0;flex:1;padding:12px 4px;font-size:9px;letter-spacing:.6px}
 .street-tools{top:14px;left:5vw;right:5vw}
}
@media(max-height:650px){.focus-identity{top:24%}.focus-identity h2{font-size:36px}.focus-bio{font-size:12px;margin:12px 0}.street-tools{top:8px}.street-select{bottom:10px}.street-select button{min-height:40px;padding:10px}.focus-next{min-height:32px}.focus-eyebrow{margin-bottom:9px}}

/* The rear officer is naturally hidden by the roof; the car stays on its registered environment plate. */
.street-car{display:none}
.street-actor[data-actor="bc318"]{clip-path:polygon(0 0,100% 0,100% 65%,84% 58%,70% 53%,0 47%)}

/* The cast inhabits the billboard setting from the first reveal. */
.billboard-actor{position:absolute;pointer-events:none}
.billboard-actor img{display:block;width:100%;height:100%;max-width:none}
.billboard-clint{left:25px;top:465px;width:400px;height:600px}
.billboard-bc{left:490px;top:495px;width:190px;height:212px;clip-path:polygon(0 0,100% 0,100% 75%,75% 65%,0 65%)}
.billboard-malcolm{left:1080px;top:650px;width:200px;height:300px}
.billboard-nia{left:1170px;top:434px;width:220px;height:330px;isolation:isolate}
.billboard-nia:before{content:"";position:absolute;left:62px;right:18px;bottom:-3px;height:10px;border-radius:50%;background:#08090cc4;filter:blur(3px);z-index:-1}

/* Keep copy above independently composited image and lighting layers. */
.league-broadcast,.street-focus{isolation:isolate}
.league-broadcast .broadcast-art,.league-broadcast .sport-plate{z-index:0}
.league-broadcast .broadcast-shade,.league-broadcast .broadcast-scanlines{z-index:1}
.league-broadcast .broadcast-content{z-index:3}
.street-backdrop,.street-set{z-index:0}
.focus-shade,.subject-light{z-index:1}
.focus-identity,.street-tools,.street-select{z-index:3}
/* One continuous setting, with lens softness above and below the focal plane. */
.continuous-scene{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.scene-atmosphere{position:absolute;inset:-10%;width:120%;height:120%;max-width:none;object-fit:cover;object-position:50% 60%;filter:blur(22px) brightness(.5);opacity:.8}
.scene-defocus{position:absolute;inset:var(--site-nav-height) 0 0;opacity:0;pointer-events:none;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);mask-image:linear-gradient(to bottom,#000 0%,#000b 14%,transparent 32%,transparent 72%,#000b 92%,#000 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000b 14%,transparent 32%,transparent 72%,#000b 92%,#000 100%)}
.street-focus{background:transparent}
.street-tools{justify-content:flex-end}
.street-utility{position:absolute;left:6vw;bottom:14px}
.street-select{bottom:58px}
.street-focus[data-character=scene] .focus-identity{bottom:145px}
@media(max-width:760px){.street-select{bottom:54px}.focus-identity,.street-focus[data-character=scene] .focus-identity{bottom:126px}.street-tools{left:6vw;right:6vw}}
@media(max-height:650px){.street-select{bottom:45px}.street-utility{bottom:6px}.focus-identity,.street-focus[data-character=scene] .focus-identity{bottom:110px;top:auto}}

/* Registered high-resolution cutouts move with the environment, never crossfade. */
.city-world{width:1536px;height:1024px}
.city-world>.city-background{width:1536px;height:1024px;position:absolute;inset:0}
.city-world>.city-car{position:absolute;left:447px;top:457px;width:580px;height:386.667px;max-width:none;z-index:3}
.city-world>.city-stoop{position:absolute;left:779px;top:370px;width:573px;height:382px;max-width:none;z-index:1}
.billboard-actor{z-index:2}.billboard-clint{z-index:4}.billboard-malcolm{z-index:4}
/* Preserve Clint's original pose and upper-body pixels; replace only the boots.
   Both layers use the same 1024 x 1536 registration and existing scene camera. */
.billboard-clint>img:first-child,.billboard-clint>.street-idle{position:absolute;inset:0;z-index:1}
.billboard-clint>img.clint-boot{display:none;position:absolute;inset:0;z-index:2;pointer-events:none;mask-image:linear-gradient(transparent 81.77%,#000 82.29%);-webkit-mask-image:linear-gradient(transparent 81.77%,#000 82.29%)}
.billboard-clint.boots-ready>img:first-child,.billboard-clint.boots-ready>.street-idle{mask-image:linear-gradient(#000 81.77%,transparent 82.29%);-webkit-mask-image:linear-gradient(#000 81.77%,transparent 82.29%)}
.billboard-clint.boots-ready>img.clint-boot{display:block}
.billboard-clint>.clint-boot-left{clip-path:inset(0 60% 0 0)}
.billboard-clint>.clint-boot-right{clip-path:inset(0 0 0 40%);transform:translateX(-1.7578125%)}
.billboard-clint.boots-ready::before,.billboard-clint.boots-ready::after{content:"";position:absolute;z-index:0;pointer-events:none;height:2.2%;background:radial-gradient(ellipse,#01040bd9 0%,#01040b77 45%,transparent 72%)}
.billboard-clint.boots-ready::before{left:23%;top:96.2%;width:18%}
.billboard-clint.boots-ready::after{left:40%;top:95.9%;width:28%;transform:rotate(4deg)}
.billboard-bc{clip-path:none}
.billboard-nia:before{left:35%;right:15%;height:5px;bottom:-2px}
.street-utility{z-index:3}
.scene-defocus{backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);mask-image:radial-gradient(ellipse at 53% 42%,transparent 30%,#0008 68%,#000 100%);-webkit-mask-image:radial-gradient(ellipse at 53% 42%,transparent 30%,#0008 68%,#000 100%)}
.focus-shade{background:linear-gradient(90deg,#030a138c,transparent 40%),linear-gradient(0deg,#02070ee8,transparent 32%)}
@media(max-width:760px){.focus-shade{background:linear-gradient(0deg,#030a13f5 0%,#030a13c9 20%,transparent 49%)}.scene-defocus{mask-image:radial-gradient(ellipse at 52% 34%,transparent 27%,#0008 65%,#000 100%);-webkit-mask-image:radial-gradient(ellipse at 52% 34%,transparent 27%,#0008 65%,#000 100%)}}

.city-world{will-change:auto}.billboard-actor{will-change:auto}

.billboard-frame{position:absolute;left:0;top:0;width:1389px;height:1132px;max-width:none;transform-origin:0 0;pointer-events:none;z-index:1}
.scene-defocus{z-index:2}
.billboard-nia:before,.billboard-nia:after{content:"";position:absolute;bottom:-1px;width:30px;height:4px;border-radius:50%;background:#08090cc4;filter:blur(1px);z-index:-1;left:28%;right:auto}
.billboard-nia:after{left:65%}

/* Only the stair treads remain as a foreground detail plate. */
.city-world>.city-stoop{clip-path:polygon(24% 64%,76% 64%,76% 96%,24% 96%);mask-image:linear-gradient(to bottom,transparent 64%,#000 68%,#000 92%,transparent 96%);-webkit-mask-image:linear-gradient(to bottom,transparent 64%,#000 68%,#000 92%,transparent 96%)}
/* Keep the lens vignette outside the character's face and upper body. */
.scene-defocus{backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);mask-image:radial-gradient(ellipse at 52% 43%,transparent 48%,#0006 79%,#000 100%);-webkit-mask-image:radial-gradient(ellipse at 52% 43%,transparent 48%,#0006 79%,#000 100%)}
.city-world{isolation:isolate;z-index:0}

.tablet-rush-glow{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 50%,#b9faffaa,transparent 65%);mix-blend-mode:screen}
@media(prefers-reduced-motion:reduce){.tablet-rush-glow{display:none}}

/* Quiet the foreground as the first full street view is revealed. */
.street-ground-shade{position:absolute;inset:var(--site-nav-height) 0 0;z-index:3;pointer-events:none;opacity:0;background:linear-gradient(to top,rgba(2,7,14,.68) 0%,rgba(2,7,14,.36) 10%,rgba(2,7,14,.12) 18%,transparent 25%)}

/* Foreground occlusion uses only the original mirror pixels, registered to the car. */
.city-world>.city-mirror{z-index:5;pointer-events:none;clip-path:polygon(24.9349% 36.9141%,25.3906% 35.2539%,26.1068% 34.4727%,27.2786% 34.0820%,30.3385% 33.9844%,31.3802% 34.4727%,31.9010% 35.3516%,32.2917% 36.9141%,32.4870% 37.9883%,34.7005% 38.9648%,34.8307% 40.3320%,32.0964% 40.6250%,31.2500% 39.9414%,26.8880% 39.8438%,25.8464% 39.2578%,25.1953% 38.2812%)}

/* Direct league entry shares the existing navigation and tablet destination. */
.street-league-link{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:44px;padding:9px 18px;border:1px solid #7deaff88;background:#071722ed;color:#b9f3ff;font:700 10px/1.3 Arial;letter-spacing:1px;text-transform:uppercase;text-decoration:none;box-sizing:border-box;transition:background .2s,border-color .2s,box-shadow .2s}
.street-league-link:hover,.street-league-link:focus-visible{background:#103141;border-color:#ff68d3;box-shadow:0 0 18px #ff37c733;outline-offset:3px}
.street-league-link[hidden],.focus-next[hidden]{display:none}
.street-league-shortcut{position:absolute;z-index:3;bottom:36px;left:50%;transform:translateX(-50%);white-space:nowrap}
.street-select{bottom:94px}
@media(max-width:760px){.focus-identity,.street-focus[data-character=scene] .focus-identity{bottom:166px}}
@media(max-height:650px){.focus-identity,.street-focus[data-character=scene] .focus-identity{bottom:154px}}
@media(prefers-reduced-motion:reduce){.street-league-link{transition:none}}

.street-league-shortcut.league-ready{color:#eaffff;border-color:#80f5ff;background:#103744;text-shadow:0 0 8px #45eaff;animation:league-ready-glow 1.8s ease-in-out infinite}
@keyframes league-ready-glow{0%,100%{box-shadow:0 0 10px #38e8ff88,inset 0 0 10px #38e8ff22}50%{box-shadow:0 0 25px #38e8ffcc,0 0 9px #b0faff,inset 0 0 18px #38e8ff55}}
@media(prefers-reduced-motion:reduce){.street-league-shortcut.league-ready{animation:none;box-shadow:0 0 18px #38e8ffaa,inset 0 0 12px #38e8ff33}}

/* Shared angled destination controls for travel between New City and the League. */
.city-league-control.street-league-link,.city-league-control.street-league-link:hover,.city-league-control.street-league-link:focus-visible,.city-league-control.street-league-link.league-ready{border:0;background:transparent;box-shadow:none;isolation:isolate;padding-inline:24px}
.city-league-control.street-league-link::before,.city-league-control.street-league-link::after{content:"";position:absolute;z-index:-1;pointer-events:none;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.city-league-control.street-league-link::before{inset:0;background:#7deaff88}
.city-league-control.street-league-link::after{inset:1px;background:#071722}
.city-league-control.street-league-link:hover::before,.city-league-control.street-league-link:focus-visible::before{background:#ff68d3}
.city-league-control.street-league-link.league-ready::before{background:#80f5ff}
.city-league-control.street-league-link.league-ready::after{background:#103744}
@keyframes league-ready-glow{0%,100%{filter:drop-shadow(0 0 4px #38e8ff88)}50%{filter:drop-shadow(0 0 10px #38e8ffcc) drop-shadow(0 0 3px #b0faff)}}
@media(prefers-reduced-motion:reduce){.street-league-shortcut.league-ready{box-shadow:none;filter:drop-shadow(0 0 6px #38e8ffaa)}}

/* City hub completion: retain the approved angled button and reserve control space. */
.street-league-shortcut{flex-direction:column;gap:8px;padding-block:12px;min-height:58px;width:280px;max-width:90%;bottom:max(36px,calc(env(safe-area-inset-bottom,0px) + 26px))}
.street-select{bottom:max(106px,calc(env(safe-area-inset-bottom,0px) + 96px))}
.street-focus[data-character=scene] .focus-identity{bottom:max(168px,calc(env(safe-area-inset-bottom,0px) + 158px))}
@media(max-width:760px){.focus-identity,.street-focus[data-character=scene] .focus-identity{bottom:max(168px,calc(env(safe-area-inset-bottom,0px) + 158px))}}
@media(max-height:650px){.street-league-shortcut{min-height:56px}.focus-identity,.street-focus[data-character=scene] .focus-identity{bottom:max(156px,calc(env(safe-area-inset-bottom,0px) + 146px))}}
/* Narrow phones reserve the bottom corner for the existing music control. */
@media(max-width:420px){
 .street-focus .street-league-shortcut{left:50%;bottom:max(68px,calc(env(safe-area-inset-bottom,0px) + 58px))}
 .street-select{bottom:max(136px,calc(env(safe-area-inset-bottom,0px) + 126px))}
 .focus-identity,.street-focus[data-character=scene] .focus-identity{bottom:max(196px,calc(env(safe-area-inset-bottom,0px) + 186px))}
}
@media(max-width:420px) and (max-height:650px){.street-select{bottom:max(132px,calc(env(safe-area-inset-bottom,0px) + 122px))}.focus-identity,.street-focus[data-character=scene] .focus-identity{bottom:max(180px,calc(env(safe-area-inset-bottom,0px) + 170px))}}

/* Story checkpoints reuse the character row; only the sliver row adds height.
   DOM/tab order follows the story, with each sliver above its character pair. */
.street-select{display:grid;grid-template-columns:repeat(4,minmax(0,140px));grid-template-rows:32px auto;column-gap:10px;row-gap:0}
.street-select [data-street-stop]{grid-row:2}
.street-select [data-street-stop="0"]{grid-column:1}
.street-select [data-street-stop="1"]{grid-column:2}
.street-select [data-street-stop="2"]{grid-column:3}
.street-select [data-street-stop="3"]{grid-column:4}
.street-select .street-story{position:relative;isolation:isolate;display:grid;place-items:center;grid-row:1;min-width:0;min-height:32px;padding:0;border:0;background:transparent;box-shadow:none;color:#ff7bda;touch-action:manipulation;transition:filter .18s ease}
.street-story[data-story-stop="patrol"]{grid-column:1 / 3}
.street-story[data-story-stop="family"]{grid-column:3 / 5}
.street-select .street-story::before,.street-select .street-story::after{content:"";position:absolute;pointer-events:none;z-index:-1;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);transition:background .18s ease}
.street-select .street-story::before{inset:7px 0;background:#ff59cd80}
.street-select .street-story::after{inset:8px 1px;background:#0b111de8}
.story-diamond{width:6px;height:6px;transform:rotate(45deg);border:1px solid currentColor;background:#ff62cf55;box-shadow:0 0 7px #ff37c766;transition:background .18s ease,box-shadow .18s ease}
.street-select .street-story:hover,.street-select .street-story:focus-visible,.street-select .street-story:active,.street-select .street-story[aria-pressed=true]{background:transparent;box-shadow:none;color:#ffd4f1;filter:drop-shadow(0 0 4px #ff37c75c)}
.street-select .street-story:hover::before,.street-select .street-story:focus-visible::before,.street-select .street-story:active::before,.street-select .street-story[aria-pressed=true]::before{background:#ff82dc}
.street-select .street-story[aria-pressed=true]::after{background:#32152eea}
.street-select .street-story:hover .story-diamond,.street-select .street-story:focus-visible .story-diamond,.street-select .street-story:active .story-diamond,.street-select .street-story[aria-pressed=true] .story-diamond{background:currentColor;box-shadow:0 0 9px #ff62d1}
.street-select .street-story:focus-visible{outline:2px solid #ffd4f1;outline-offset:1px}
.street-focus[data-character=scene] .focus-identity{bottom:max(212px,calc(env(safe-area-inset-bottom,0px) + 202px))}
@media(max-width:760px){
 .street-select{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:5px}
 .focus-identity,.street-focus[data-character=scene] .focus-identity{bottom:max(212px,calc(env(safe-area-inset-bottom,0px) + 202px))}
}
@media(max-height:650px){.focus-identity,.street-focus[data-character=scene] .focus-identity{bottom:max(200px,calc(env(safe-area-inset-bottom,0px) + 190px))}}
@media(max-width:420px){.focus-identity,.street-focus[data-character=scene] .focus-identity{bottom:max(240px,calc(env(safe-area-inset-bottom,0px) + 230px))}}
@media(max-width:420px) and (max-height:650px){.focus-identity,.street-focus[data-character=scene] .focus-identity{bottom:max(224px,calc(env(safe-area-inset-bottom,0px) + 214px))}}
@media(prefers-reduced-motion:reduce){.street-select .street-story,.street-select .street-story::before,.street-select .street-story::after,.story-diamond{transition:none}}

/* Short landscape screens keep the original single-row height and copy clearance. */
@media(orientation:landscape) and (max-height:650px){
 .street-select{grid-template-columns:44px repeat(2,minmax(0,140px)) 44px repeat(2,minmax(0,140px));grid-template-rows:auto;column-gap:5px;align-items:center}
 .street-select :is([data-street-stop],.street-story){grid-row:1;grid-column:auto}
 .street-select .street-story{min-height:40px}
 .street-select .street-story::before{inset:11px 0}.street-select .street-story::after{inset:12px 1px}
 .focus-identity,.street-focus[data-character=scene] .focus-identity{bottom:max(168px,calc(env(safe-area-inset-bottom,0px) + 158px))}
}
@media(orientation:landscape) and (max-height:650px) and (max-width:760px){.street-select{grid-template-columns:44px repeat(2,minmax(0,1fr)) 44px repeat(2,minmax(0,1fr))}}

/* The League continues below the New City controls. */
.city-league-control .league-destination-chevron{display:block;flex:none;width:18px;height:10px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Center the label and smaller chevron together with room below the arrow. */
.street-league-shortcut .league-destination-chevron{width:15.3px;height:8.5px}

/* Full-width navigation destinations keep focus without a viewport-sized ring.
   Interactive controls retain their individual keyboard focus indicators. */
:is(#overview,#characters,#teams,#sport,#news,#comic)[tabindex="-1"]:focus{outline:none}

/* Soft, letter-shaped contrast keeps floating copy legible over moving art. */
#overview{
 --journey-heading-shadow:0 2px 4px #0009,0 5px 18px #0008;
 --journey-copy-shadow:0 1px 2px #000d,0 2px 7px #000b,0 4px 16px #0008;
}
#overview :is(.broadcast-opening,.broadcast-expansion h2,.sport-roster,.sport-legend,.street-copy h2,.focus-identity h2){text-shadow:var(--journey-heading-shadow)}
#overview :is(.broadcast-opening>span:last-child,.broadcast-expansion em,.sport-roster em,.sport-legend em){text-shadow:var(--journey-heading-shadow),0 0 24px #ff30be66}
#overview .broadcast-opening .electric-word{ text-shadow:var(--journey-heading-shadow),0 0 24px #00cfff55,3px 0 #ff2ecb66 }
#overview .street-copy{filter:none}
#overview :is(.broadcast-expansion p,.street-copy p,.focus-eyebrow,.focus-bio,.focus-next){text-shadow:var(--journey-copy-shadow)}
#overview .scroll-cue{ text-shadow:var(--journey-copy-shadow),0 0 4px #ff6ad8,0 0 12px #ff37c7,0 0 26px #ff37c799 }
#overview .scroll-cue:is(:hover,:focus-visible){text-shadow:var(--journey-copy-shadow),0 0 5px #ff8be5,0 0 15px #ff37c7,0 0 30px #ff37c7bb}

/* Keep the Barracudas roster beneath the cast, clear of the left-hand bio. */
#garage-route{--player-button-height:48px;--player-nav-shift:max(24px,calc(92px + env(safe-area-inset-right,0px) - 5vw))}
body:not(.ragers-open) #garage-route .characters button{width:100%;height:var(--player-button-height);min-height:var(--player-button-height);line-height:1.2}
body:not(.ragers-open) #garage-route .characters button[aria-pressed=true]{transform:none}
@media(min-width:761px){
 body:not(.ragers-open) #garage-route .characters{left:calc(42% - var(--player-nav-shift));right:calc(5% + var(--player-nav-shift));max-width:840px;margin-inline:auto;gap:8px}
 body:not(.ragers-open) #garage-route .characters button{padding:11px 10px;gap:8px}
}
@media(min-width:761px) and (max-width:1360px){body:not(.ragers-open) #garage-route .characters .arrow{display:none}}
@media(min-width:761px) and (max-width:1100px){
 body:not(.ragers-open) #garage-route .characters{grid-template-columns:repeat(6,minmax(0,1fr));max-width:440px}
 body:not(.ragers-open) #garage-route .characters button{grid-column:span 2}
 body:not(.ragers-open) #garage-route .characters button:nth-child(4){grid-column:2 / span 2}
 body:not(.ragers-open) #garage-route .characters button:nth-child(5){grid-column:4 / span 2}
 body:not(.ragers-open) #garage-route .characters .arrow{display:none}
}
@media(max-width:760px){
 #garage-route{--player-button-height:44px;--player-nav-shift:6px}
 body:not(.ragers-open) #garage-route .characters{left:calc(6vw - var(--player-nav-shift));right:calc(6vw + var(--player-nav-shift));bottom:calc(72px + env(safe-area-inset-bottom,0px))}
}

/* Character headings share the Barracudas' heavy, wide name treatment.
   Container-based sizing keeps longer names inside the existing text column. */
.garage-title,
.street-focus[data-character]:not([data-character=scene]) .focus-identity h2,
.street-copy h2,
.reduced-scenes figure figcaption h2{
 font-family:var(--character-name-font);
 font-weight:950;
 font-style:normal;
 text-transform:uppercase;
 color:var(--white);
}
.street-focus[data-character]:not([data-character=scene]) .focus-identity{container-type:inline-size}
.street-focus[data-character]:not([data-character=scene]) .focus-identity h2{
 font-size:min(clamp(36px,4.7vw,78px),17cqw);
 line-height:.97;
 letter-spacing:-.024em;
}
.street-copy h2,.reduced-scenes figure figcaption h2{line-height:.97;letter-spacing:-.024em}
@media(max-width:760px){
 .street-focus[data-character]:not([data-character=scene]) .focus-identity h2{font-size:min(38px,17cqw);letter-spacing:-1px}
}
@media(max-height:650px){
 .street-focus[data-character]:not([data-character=scene]) .focus-identity h2{font-size:min(36px,17cqw)}
}

/* The two mobile wide-shot captions live above the cast, in the skyline.
   Individual character closeups retain their existing lower caption layout. */
@media(max-width:760px){
 .street-focus[data-character=scene]:is([data-shot=patrol],[data-shot=family]) .focus-identity{
  top:clamp(16px,3svh,28px);bottom:auto;
 }
 .street-focus[data-character=scene]:is([data-shot=patrol],[data-shot=family]) .focus-identity h2{font-size:clamp(22px,7.4vw,29px)}
 .street-focus[data-character=scene]:is([data-shot=patrol],[data-shot=family]) .focus-bio{max-width:100%;margin:8px 0 4px}
}
@media(max-width:760px) and (max-height:650px){
 .street-focus[data-character=scene]:is([data-shot=patrol],[data-shot=family]) .focus-identity{top:12px}
}
@media(max-width:380px){
 .street-focus[data-character=scene][data-shot=family] .focus-next{max-width:40vw;gap:8px;line-height:1.4}
}
/* Shallow landscape viewports use two short columns above the heads. */
@media(max-width:960px) and (max-height:500px) and (orientation:landscape){
 .street-focus[data-character=scene]:is([data-shot=patrol],[data-shot=family]) .focus-identity{top:6px;bottom:auto;width:88vw;max-width:none;display:grid;grid-template-columns:36% minmax(0,1fr);column-gap:16px;align-items:start}
 .street-focus[data-character=scene]:is([data-shot=patrol],[data-shot=family]) .focus-eyebrow{display:none}
 .street-focus[data-character=scene]:is([data-shot=patrol],[data-shot=family]) .focus-identity h2{grid-column:1;grid-row:1;font-size:20px}
 .street-focus[data-character=scene]:is([data-shot=patrol],[data-shot=family]) .focus-bio{grid-column:2;grid-row:1 / 3;margin:0;max-width:100%;font-size:12px;line-height:1.5}
 .street-focus[data-character=scene]:is([data-shot=patrol],[data-shot=family]) .focus-next{grid-column:1;grid-row:2;justify-self:start;font-size:8px;min-height:32px;padding:2px 0}
}