/* Unified 14 — studio intro (TV title sequence), 3D menu, broadcast idle, free camera. */

/* ── Studio intro ── */
#studioIntro{position:fixed;inset:0;z-index:2147483000;background:#05030c;overflow:hidden;color:#eef3ff;font-family:Inter,Arial,sans-serif;transition:opacity 2.2s ease}
#studioIntro.leaving{opacity:0;pointer-events:none}
#studioIntro.skipped.leaving{transition-duration:.9s}
#studioIntro .si-shot{position:absolute;inset:-6%;width:112%;height:112%;display:block;opacity:0;transition:opacity 1.05s ease,filter 1.2s ease;will-change:transform,opacity,filter;filter:blur(20px) saturate(1.15)}
#studioIntro .si-shot.on.ready{opacity:1;filter:blur(0) saturate(1.2) contrast(1.06)}
#studioIntro .si-shot.failed{opacity:0}
#studioIntro .si-shot.rack-out{filter:blur(28px) brightness(.5) saturate(1.4);opacity:0}
#studioIntro:not(.playing) .si-shot[data-shot="core"].ready{opacity:.48;filter:blur(3px) saturate(1.2)}
#studioIntro .si-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(75% 65% at 50% 48%,transparent 40%,#05030ccc 100%)}
#studioIntro .si-grade{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(70% 60% at 50% 42%,#043cff22,transparent 58%),linear-gradient(180deg,#021a6a14,transparent 40%,#01081844);mix-blend-mode:screen}
#studioIntro .si-grain{position:absolute;inset:-20%;z-index:3;pointer-events:none;opacity:.1;mix-blend-mode:overlay;background-image:repeating-radial-gradient(circle at 18% 28%,#fff 0 1px,transparent 1px 3px);animation:siGrain 1.4s steps(5) infinite}
@keyframes siGrain{to{transform:translate3d(-2%,1%,0)}}
#studioIntro .si-focus{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;box-shadow:inset 0 0 160px 60px #05030cdd;transition:opacity .7s}
#studioIntro.rack-focus .si-focus{opacity:1}
#studioIntro.rack-focus .si-shot.on{filter:blur(20px) saturate(1.35)}
#studioIntro .si-bar{position:absolute;left:0;right:0;height:0;background:#000;z-index:5;transition:height 1.6s cubic-bezier(.2,.8,.2,1)}
#studioIntro .si-bar.top{top:0}#studioIntro .si-bar.bottom{bottom:0}
#studioIntro.playing .si-bar{height:10vh}
#studioIntro.leaving .si-bar{height:0}
#studioIntro .si-flash{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;background:radial-gradient(55% 55% at 50% 50%,#dbe6ff,#2f6bff 42%,#010b29 100%);mix-blend-mode:screen}
#studioIntro .si-black{position:absolute;inset:0;z-index:6;pointer-events:none;background:#000;opacity:0}
#studioIntro.impact .si-shot.on{animation:siShake .45s steps(9) both}
@keyframes siShake{0%{translate:0 0}20%{translate:6px -4px}40%{translate:-5px 3px}60%{translate:3px 2px}80%{translate:-2px -1px}100%{translate:0 0}}
#studioIntro.on-trophy{background:transparent}
#studioIntro.on-court{background:transparent}
#studioIntro.on-court .si-shot{display:none!important}
#studioIntro.on-court .si-vignette{background:radial-gradient(70% 60% at 50% 48%,transparent 42%,#05030caa 100%)}
#studioIntro.on-court .si-hud{pointer-events:auto}
#studioIntro.on-trophy .si-shot{display:none!important}
#studioIntro.on-trophy .si-vignette{background:radial-gradient(65% 55% at 50% 48%,transparent 38%,#0a0614cc 100%)}
body.studio-intro.si-trophy #cinematicEntry{visibility:visible!important;z-index:60;background:#080414}
#cinematicEntry.si-trophy-cut .cinematic-entry-bottom,#cinematicEntry.si-trophy-cut .cinematic-entry-actions,#cinematicEntry.si-trophy-cut .cinematic-brand,#cinematicEntry.si-trophy-cut #menuMusic,#cinematicEntry.si-trophy-cut .occ-hint,#cinematicEntry.si-trophy-cut .occ-credit{display:none!important}
body.si-trophy #oneCourtCore canvas{opacity:1!important;transition:opacity .4s ease}

/* Ident + title */
#studioIntro .si-ident{position:absolute;left:36%;top:50%;z-index:4;transform:translate(-50%,-50%);text-align:center;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
#studioIntro.ident-on .si-ident{opacity:1}
#studioIntro .si-ident b{display:block;position:relative;font:800 clamp(64px,11vw,176px)/.9 "Barlow Condensed",Impact,Arial Narrow,sans-serif;letter-spacing:.14em;margin-right:-.14em;color:transparent;background:linear-gradient(180deg,#fff 0%,#cfe0ff 38%,#3d6cff 70%,#021a6a 100%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 22px #043cffaa) drop-shadow(0 0 2px #fff);clip-path:inset(0 100% 0 0);transition:clip-path 1.4s cubic-bezier(.3,.7,.2,1) .2s}
#studioIntro.ident-on .si-ident b{clip-path:inset(0 0 0 0)}
#studioIntro .si-ident b::after{content:attr(data-text);position:absolute;inset:0;color:transparent;background:repeating-linear-gradient(0deg,#ffffff22 0 1px,transparent 1px 4px);-webkit-background-clip:text;background-clip:text;animation:siScan 2.8s linear infinite}
@keyframes siScan{from{background-position:0 0}to{background-position:0 60px}}
#studioIntro .si-ident i{display:block;height:1px;margin:18px auto 14px;width:0;background:linear-gradient(90deg,transparent,#c8f25a,transparent);box-shadow:0 0 14px #c8f25a;transition:width 1.6s ease .7s}
#studioIntro.ident-on .si-ident i{width:min(52vw,640px)}
#studioIntro .si-ident small{display:block;font:600 clamp(12px,1.2vw,17px) Arial,sans-serif;letter-spacing:.9em;margin-right:-.9em;color:#c4b4ff;opacity:0;transition:opacity 1s ease 1.3s}
#studioIntro.ident-on .si-ident small{opacity:1}
#studioIntro .si-titlecard{position:absolute;left:0;right:0;top:46%;z-index:4;text-align:center;pointer-events:none;opacity:0;transform:scale(.96);transition:opacity 1s ease,transform 1.4s cubic-bezier(.2,.8,.2,1)}
#studioIntro.titlecard-on .si-titlecard{opacity:1;transform:none}
#studioIntro .si-titlecard b{display:block;font:800 clamp(72px,14vw,200px)/.82 "Barlow Condensed",Impact,sans-serif;letter-spacing:.14em;margin-right:-.14em;color:transparent;background:linear-gradient(180deg,#fff,#cfe0ff 40%,#2f6bff 78%,#021a6a);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 28px #043cff77)}
#studioIntro .si-titlecard em{display:block;margin-top:14px;font:600 13px Arial,sans-serif;font-style:normal;letter-spacing:.55em;margin-right:-.55em;color:#c4b4ff}

/* Lower third on the block city, kicker on the title */
#studioIntro .si-lower{position:absolute;left:clamp(20px,5vw,72px);bottom:calc(10vh + 30px);z-index:4;pointer-events:none;opacity:0;transform:translateX(-18px);transition:opacity .9s ease,transform .9s ease}
#studioIntro.lower-on .si-lower{opacity:1;transform:none}
#studioIntro .si-lower small{display:block;font:600 11px Arial,sans-serif;letter-spacing:.34em;color:#9fb4df;margin-bottom:8px}
#studioIntro .si-lower strong{display:block;font:800 clamp(26px,3.4vw,50px)/1 "Barlow Condensed",Impact,sans-serif;letter-spacing:.02em;border-left:3px solid #c8f25a;padding-left:14px;color:#eef3ff}
#studioIntro .si-kicker{position:absolute;left:0;right:0;bottom:calc(9.5vh + 26px);z-index:2;text-align:center;font:600 12px Arial,sans-serif;letter-spacing:.5em;color:#cfe0ff;opacity:0;transition:opacity 1.2s ease;pointer-events:none}
#studioIntro.kicker-on .si-kicker{opacity:.9}

/* Gate, HUD, credit */
#studioIntro .si-gate{display:none!important}
#studioIntro.needs-sound .si-sound{border-color:#c8f25a;color:#c8f25a}
#studioIntro .si-mark{font:800 clamp(38px,6vw,82px) "Barlow Condensed",Impact,sans-serif;letter-spacing:.3em;margin-right:-.3em;text-shadow:0 0 30px #6a3dff99}
#studioIntro .si-mark i{font-style:normal;color:#c8f25a}
#studioIntro .si-gate strong{font:700 13px Arial,sans-serif;letter-spacing:.5em;margin-right:-.5em;padding:14px 26px;border:1px solid #ffffff40;border-radius:999px;background:#ffffff0d;backdrop-filter:blur(10px);animation:siPulse 2.4s ease-in-out infinite}
@keyframes siPulse{50%{box-shadow:0 0 0 10px #3d7bff14,0 0 40px #3d7bff44}}
#studioIntro .si-gate small{font:500 10px Arial,sans-serif;letter-spacing:.34em;color:#8fa2c8}
#studioIntro .si-hud{position:absolute;right:clamp(14px,3vw,40px);bottom:calc(9.5vh + 20px);z-index:6;display:flex;gap:8px;opacity:0;transition:opacity .8s ease 1s}
#studioIntro.playing .si-hud{opacity:1}
#studioIntro .si-hud button{font:700 11px Arial,sans-serif;letter-spacing:.2em;color:#eef3ff;background:#0008;border:1px solid #ffffff33;border-radius:999px;padding:11px 16px;cursor:pointer;backdrop-filter:blur(8px)}
#studioIntro .si-hud button:hover{border-color:#c8f25a;color:#c8f25a}
#studioIntro .si-credit{position:absolute;left:clamp(14px,3vw,40px);bottom:12px;z-index:6;margin:0;font:500 10px Arial,sans-serif;color:#6b7690;letter-spacing:.03em}
body.studio-intro #cinematicEntry,body.studio-intro #world-ui,body.studio-intro #sceneTravelLaunch,body.studio-intro .clarity-companion{visibility:hidden}

/* ── ONE COURT 3D menu: the real buttons stay for keyboard and screen readers, the 3D slabs take the pointer ── */
body.broadcast #cinematicEntry .cinematic-entry-actions{opacity:0;pointer-events:none}
body.broadcast.cinematic-entry #cinematicEntry .cinematic-copy{opacity:.42}
body.occ-3d #cinematicEntry .cinematic-entry-actions{opacity:0;pointer-events:none}
body.occ-3d #cinematicEntry .cinematic-entry-actions:has(:focus-visible){opacity:1;pointer-events:auto}
body.occ-3d #oneCourtCore{pointer-events:auto}
body.occ-3d #cinematicEntry .cinematic-entry-bottom{pointer-events:none}
body.occ-3d #cinematicEntry .cinematic-entry-bottom .cinematic-copy{pointer-events:none}
#oneCourtCore .occ-hint{position:absolute;right:clamp(16px,3vw,44px);bottom:12px;margin:0;z-index:1;font:600 10px Arial,sans-serif;letter-spacing:.3em;color:#6d7a92;opacity:0;transition:opacity 1s ease 2s}
body.occ-3d #oneCourtCore.ready .occ-hint{opacity:1}

/* ── Broadcast idle (golf-course style) ── */
#broadcastBug{position:fixed;inset:0;z-index:80;pointer-events:none;opacity:0;transition:opacity 1.4s ease}
body.broadcast #broadcastBug{opacity:1}
#broadcastBug .bb-bar{position:absolute;left:0;right:0;height:7vh;background:#000;transition:transform 1.4s ease}
#broadcastBug .bb-bar.t{top:0;transform:translateY(-100%)}#broadcastBug .bb-bar.b{bottom:0;transform:translateY(100%)}
body.broadcast #broadcastBug .bb-bar{transform:none}
#broadcastBug .bb-live{position:absolute;top:calc(7vh + 18px);left:clamp(16px,3vw,44px);display:flex;align-items:center;gap:10px;font:700 11px Arial,sans-serif;letter-spacing:.28em;color:#e9eef8}
#broadcastBug .bb-live i{width:8px;height:8px;border-radius:50%;background:#c8f25a;box-shadow:0 0 10px #c8f25a;animation:bbBlink 1.6s ease-in-out infinite}
@keyframes bbBlink{50%{opacity:.35}}
#broadcastBug .bb-card{position:absolute;left:clamp(16px,3vw,44px);bottom:calc(7vh + 22px);display:grid;grid-template-columns:auto auto;align-items:stretch;background:linear-gradient(90deg,#070a10f2,#0b1220d9);border:1px solid #ffffff1c;border-radius:6px;overflow:hidden;box-shadow:0 20px 50px #000a;transform:translateX(-24px);opacity:0;transition:opacity .8s ease,transform .8s ease}
#broadcastBug .bb-card.in{transform:none;opacity:1}
#broadcastBug .bb-num{display:grid;place-content:center;padding:0 18px;background:#f2cf2d;color:#12160a;font:800 30px "Barlow Condensed",Impact,sans-serif}
#broadcastBug .bb-num small{display:block;font:700 9px Arial,sans-serif;letter-spacing:.2em;text-align:center}
#broadcastBug .bb-text{padding:12px 20px 12px 16px}
#broadcastBug .bb-text strong{display:block;font:800 22px "Barlow Condensed",Impact,sans-serif;letter-spacing:.04em;color:#f4f7ff}
#broadcastBug .bb-text span{display:block;margin-top:3px;font:600 10px Arial,sans-serif;letter-spacing:.22em;color:#93a3c4}
#broadcastBug .bb-stat{display:block;margin-top:7px;font:800 11px "Barlow Condensed",Impact,sans-serif;letter-spacing:.16em;color:#c8f25a}
#broadcastBug .bb-hint{position:absolute;right:clamp(16px,3vw,44px);bottom:calc(7vh + 26px);font:600 10px Arial,sans-serif;letter-spacing:.28em;color:#8a97b2}
body.broadcast #world-ui,body.broadcast #nightCourtStation,body.broadcast #stationRail,body.broadcast .clarity-companion,body.broadcast #sceneTravelLaunch{opacity:.0;transition:opacity 1.2s ease;pointer-events:none}
body.broadcast.touring #tourControls{opacity:1;pointer-events:auto}
#world-ui,#nightCourtStation,#stationRail{transition:opacity .6s ease}

/* ── Free camera (replay / build-mode style) ── */
#freeCamToggle{position:fixed;right:clamp(14px,2.4vw,36px);top:50%;transform:translateY(-50%);z-index:58;display:grid;place-items:center;gap:6px;width:64px;padding:12px 0;border-radius:14px;border:1px solid #ffffff2a;background:linear-gradient(160deg,#141a26e6,#07090ee6);color:#e8eefc;font:700 9px Arial,sans-serif;letter-spacing:.18em;cursor:pointer;box-shadow:0 14px 34px #000b,inset 0 1px 0 #ffffff26;transition:transform .2s ease,border-color .2s ease}
#freeCamToggle:hover{transform:translateY(-50%) scale(1.05);border-color:#c8f25a}
#freeCamToggle svg{width:24px;height:24px;stroke:#c8f25a;fill:none;stroke-width:1.6}
body.cinematic-entry #freeCamToggle,body.playing #freeCamToggle,body.studio-intro #freeCamToggle,body.u07-montage #freeCamToggle,body.native-scene-open #freeCamToggle{display:none}
#freeCamHud{position:fixed;inset:0;z-index:57;pointer-events:none;display:none}
body.free-cam #freeCamHud{display:block}
body.free-cam #world-ui,body.free-cam #nightCourtStation,body.free-cam #stationRail,body.free-cam .clarity-companion,body.free-cam #sceneTravelLaunch{opacity:0;pointer-events:none}
body.free-cam #freeCamToggle{border-color:#c8f25a;background:#c8f25a;color:#10150a}
body.free-cam #freeCamToggle svg{stroke:#10150a}
#freeCamHud .fc-top{position:absolute;top:18px;left:50%;transform:translateX(-50%);display:flex;gap:10px;align-items:center;font:700 11px Arial,sans-serif;letter-spacing:.3em;color:#e9eef8;background:#05070bcc;border:1px solid #ffffff22;border-radius:999px;padding:10px 18px}
#freeCamHud .fc-top i{width:8px;height:8px;border-radius:50%;background:#ff4d4d;box-shadow:0 0 10px #ff4d4d}
#freeCamHud .fc-keys{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:92vw}
#freeCamHud .fc-keys span{font:600 10px Arial,sans-serif;letter-spacing:.14em;color:#c4cee3;background:#05070bcc;border:1px solid #ffffff1f;border-radius:6px;padding:8px 10px}
#freeCamHud .fc-keys b{color:#c8f25a;margin-right:6px}
#freeCamHud .fc-reticle{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border:1px solid #ffffff55;border-radius:50%}
#freeCamHud .fc-reticle::after{content:'';position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px;border-radius:50%;background:#c8f25a}
#freeCamHud .fc-speed{position:absolute;right:22px;top:22px;font:700 10px Arial,sans-serif;letter-spacing:.24em;color:#9fb0cf;background:#05070bcc;border:1px solid #ffffff1f;border-radius:6px;padding:8px 12px}

/* ── View transitions: a glass iris between destinations ── */
#viewWipe{position:fixed;inset:0;z-index:2147482000;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--wx,50%) var(--wy,50%),transparent 0,transparent var(--wr,0%),#03050acc calc(var(--wr,0%) + 6%),#03050a calc(var(--wr,0%) + 30%));backdrop-filter:blur(var(--wb,0px)) saturate(1.4)}
#viewWipe::after{content:'';position:absolute;left:var(--wx,50%);top:var(--wy,50%);width:calc(var(--wr,0%) * 2.2);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 0 0 1px #c8f25a66,0 0 60px #3d7bff66 inset;opacity:.8}
@media (prefers-reduced-motion:reduce){#viewWipe{display:none}}

/* ── Magnetic, glass-lit buttons (cursor UX) ── */
.u14-mag{transition:translate .2s ease-out,transform .2s ease-out,background-color .2s,box-shadow .2s,filter .2s,border-color .2s!important}
.u14-mag::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),#ffffff2e,transparent 60%);opacity:0;transition:opacity .3s ease}
.u14-mag:hover::before{opacity:1}
body.occ-3d.cinematic-entry #sceneTravelLaunch{opacity:0;pointer-events:none}
/* Gate = a portal orb: rotating light rings around a glass glob, the energy core glowing through it. */
#studioIntro .si-gate{gap:10px}
#studioIntro .si-portal{position:absolute;left:50%;top:50%;width:min(56vmin,460px);aspect-ratio:1;transform:translate(-50%,-50%);display:block;z-index:1;pointer-events:none}
#studioIntro .si-gate .si-mark,#studioIntro .si-gate strong,#studioIntro .si-gate small{position:relative;z-index:2}
#studioIntro .si-portal .glob{position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffffff55,transparent 22%),radial-gradient(circle at 50% 55%,#3d7bff55,#0a1540aa 55%,#02040a 78%);box-shadow:inset 0 0 40px #6f98ff88,inset 0 0 120px #1d3fbf66,0 0 80px #3d7bff55,0 0 180px #3d7bff33;backdrop-filter:blur(3px) saturate(1.6);animation:siGlob 5s ease-in-out infinite}
@keyframes siGlob{50%{transform:scale(1.035);box-shadow:inset 0 0 50px #8fb0ffaa,inset 0 0 140px #2d4fdf77,0 0 110px #3d7bff77,0 0 240px #3d7bff44}}
#studioIntro .si-portal .ring{position:absolute;inset:4%;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 55%,#c8f25a 62%,#fff 64%,#6f98ff 70%,transparent 78%);-webkit-mask:radial-gradient(circle,transparent 66%,#000 67.5%,#000 69%,transparent 70.5%);mask:radial-gradient(circle,transparent 66%,#000 67.5%,#000 69%,transparent 70.5%);filter:drop-shadow(0 0 10px #6f98ff);animation:siSpin 6s linear infinite}
#studioIntro .si-portal .ring.two{inset:0;animation-duration:11s;animation-direction:reverse;opacity:.7;background:conic-gradient(from 90deg,transparent 0 40%,#6f98ff 55%,#fff 57%,transparent 66%)}
@keyframes siSpin{to{transform:rotate(1turn)}}
#studioIntro .si-gate strong{animation:siPulse 2.4s ease-in-out infinite;letter-spacing:.7em;margin-right:-.7em}
#studioIntro .si-gate:hover .glob{box-shadow:inset 0 0 60px #c8f25a88,inset 0 0 140px #3d7bffaa,0 0 140px #6f98ff88}
#studioIntro.playing .si-gate{transform:scale(1.6);filter:blur(8px);transition:opacity 1s ease,transform 1.4s cubic-bezier(.3,.6,.2,1),filter 1s ease}

/* ── Unified 15: music on the ONE COURT screen ── */
#menuMusic{position:absolute;top:clamp(58px,8vh,92px);right:clamp(18px,3vw,44px);z-index:3;display:flex;gap:8px;align-items:flex-start}
#menuMusic>button{display:flex;align-items:center;gap:9px;font:700 10px Arial,sans-serif;letter-spacing:.24em;color:#dfe7f7;background:#070a10cc;border:1px solid #ffffff26;border-radius:999px;padding:10px 14px;cursor:pointer;backdrop-filter:blur(10px)}
#menuMusic>button:hover{border-color:#c8f25a;color:#fff}
#menuMusic .mm-odesza em{font-style:normal;color:#c8f25a}
#menuMusic .mm-score i{display:flex;gap:2px;align-items:flex-end;height:12px}
#menuMusic .mm-score i b{width:2px;height:3px;background:#6d7a92;border-radius:1px}
#menuMusic.playing .mm-score i b{background:#c8f25a;animation:mmEq 1s ease-in-out infinite}
#menuMusic.playing .mm-score i b:nth-child(2){animation-delay:.2s}#menuMusic.playing .mm-score i b:nth-child(3){animation-delay:.45s}#menuMusic.playing .mm-score i b:nth-child(4){animation-delay:.7s}
@keyframes mmEq{0%,100%{height:3px}50%{height:12px}}
#menuMusic .mm-panel{position:absolute;top:48px;right:0;width:min(380px,86vw);padding:14px;border-radius:16px;background:linear-gradient(160deg,#101521f2,#05070cf2);border:1px solid #ffffff22;box-shadow:0 30px 70px #000c,inset 0 1px 0 #ffffff1c;backdrop-filter:blur(14px)}
#menuMusic .mm-panel[hidden]{display:none}
#menuMusic .mm-panel header{display:grid;grid-template-columns:1fr auto;align-items:center;margin-bottom:10px}
#menuMusic .mm-panel small{grid-column:1;font:600 9px Arial,sans-serif;letter-spacing:.3em;color:#8a97b2}
#menuMusic .mm-panel strong{grid-column:1;font:800 18px "Barlow Condensed",Impact,sans-serif;letter-spacing:.06em;color:#f1f5ff}
#menuMusic .mm-close{grid-column:2;grid-row:1/3;background:none;border:0;color:#9fb0cf;font-size:16px;cursor:pointer}
#menuMusic .mm-frame iframe{border-radius:12px;display:block}
#menuMusic .mm-panel p{margin:10px 2px 0;font:500 10px Arial,sans-serif;color:#7d8aa3;line-height:1.5}
@media(max-width:700px){#menuMusic{top:auto;bottom:calc(100% - 64px)}}