/* Final 02 — opening landing ("ONE COURT. EVERY ANGLE.") + the one primary action lane on the root page.
   Loads last. Palette: court blue #043cff · rotor yellow #ffcf00 · ball green #9aff00 · UI lime #b6ef3c (pressable only)
   · silver #e9eef2 · black. Glass = CSS chrome rims + inset highlights (the beveled 3D pane behind the pill is painted
   by stadium28-ui-components). Motion: 900 ms fades, cubic-bezier(.22,.61,.36,1), no bounce. */
:root{--f2-ease:cubic-bezier(.22,.61,.36,1);--f2-silver:#e9eef2;--f2-mute:#aeb8c2;--f2-lime:#b6ef3c;--f2-yellow:#ffcf00;--f2-black:#030406}

/* ───────── The landing ───────── */
html body #cinematicEntry.final02-entry{position:fixed;inset:0;z-index:2000;display:block;margin:0;padding:0;background:var(--f2-black);color:var(--f2-silver);opacity:1;overflow:hidden;cursor:default;touch-action:manipulation;transition:opacity 900ms var(--f2-ease)}
html body #cinematicEntry.final02-entry[hidden]{display:none}
html body.final02-landing-leaving #cinematicEntry.final02-entry{opacity:0;pointer-events:none}
html body.final02-landing #cmTravel,html body.final02-landing #boot{visibility:hidden}

#final02Stage{position:absolute;inset:0;opacity:0;transition:opacity 900ms var(--f2-ease)}
#final02Stage.ready{opacity:1}
#final02Stage canvas{display:block;width:100%;height:100%}
#final02Stage .f2-hint{position:absolute;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);margin:0;white-space:nowrap;font:600 10px/1 Inter,sans-serif;letter-spacing:.22em;color:var(--f2-mute);text-shadow:0 1px 3px #000}
#final02Stage .f2-credit{position:absolute;right:18px;top:max(18px,env(safe-area-inset-top));margin:0;max-width:40vw;text-align:right;font:500 9px/1.4 Inter,sans-serif;letter-spacing:.04em;color:#7d8791}
#final02Stage .f2-timer{position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--f2-silver);opacity:.32;transform:scaleX(0);transform-origin:left center}
html body.final02-counting #final02Stage .f2-timer{transform:scaleX(1);transition:transform var(--f2-wait,6000ms) linear}

html body #cinematicEntry.final02-entry .ce-stars{display:none}
html body #cinematicEntry.final02-entry .cinematic-brand{position:absolute;left:clamp(18px,3vw,36px);top:max(16px,env(safe-area-inset-top));display:flex;flex-direction:column;gap:3px;margin:0;pointer-events:none}
html body #cinematicEntry.final02-entry .cinematic-brand>span:first-child{font:800 28px/1 'Barlow Condensed',Inter,sans-serif;letter-spacing:.02em;color:var(--f2-silver)}
html body #cinematicEntry.final02-entry .cinematic-brand .cinematic-o{color:var(--f2-yellow)}
html body #cinematicEntry.final02-entry .cinematic-brand>span:last-child{font:600 9px/1 Inter,sans-serif;letter-spacing:.24em;color:var(--f2-mute)}

html body #cinematicEntry.final02-entry .cinematic-entry-bottom{position:absolute;left:clamp(18px,4vw,56px);right:clamp(18px,4vw,56px);bottom:clamp(44px,9vh,84px);display:flex;align-items:flex-end;justify-content:space-between;gap:28px;pointer-events:none}
html body #cinematicEntry.final02-entry .cinematic-copy{max-width:min(56vw,760px)}
html body #cinematicEntry.final02-entry .cinematic-copy p{margin:0;font:800 clamp(44px,7.4vw,112px)/.9 'Barlow Condensed',Inter,sans-serif;letter-spacing:-.01em;text-transform:uppercase;color:var(--f2-silver);text-shadow:0 3px 10px #000}
html body #cinematicEntry.final02-entry .cinematic-copy span{display:block;margin-top:12px;font:500 clamp(12px,1.1vw,15px)/1.5 Inter,sans-serif;letter-spacing:.02em;color:var(--f2-mute)}

/* Real controls. Keyboard and screen readers always get them; with slabs on they are invisible until focused. */
html body #cinematicEntry.final02-entry .cinematic-entry-actions{display:flex;flex-direction:column;align-items:stretch;gap:10px;width:min(300px,100%);margin:0;pointer-events:auto;transition:opacity 300ms var(--f2-ease)}
html body #cinematicEntry.final02-entry .cinematic-entry-actions>a,
html body #cinematicEntry.final02-entry .cinematic-entry-actions>button{appearance:none;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:56px;margin:0;padding:12px 18px;border:1px solid #e9eef259;border-radius:14px;background:linear-gradient(180deg,#e9eef21a,#0306091f 55%,#03060940);box-shadow:inset 0 1px 0 #ffffffb3,inset 0 -1px 0 #e9eef226,0 8px 24px #00000080;color:var(--f2-silver);font:inherit;text-align:left;text-decoration:none;cursor:pointer;transition:border-color 300ms var(--f2-ease),box-shadow 300ms var(--f2-ease),transform 300ms var(--f2-ease)}
html body #cinematicEntry.final02-entry .cinematic-entry-actions strong{font:800 22px/1 'Barlow Condensed',Inter,sans-serif;letter-spacing:.03em;text-transform:uppercase}
html body #cinematicEntry.final02-entry .cinematic-entry-actions span{font:500 11px/1.3 Inter,sans-serif;letter-spacing:.02em;color:var(--f2-mute)}
html body #cinematicEntry.final02-entry .cinematic-entry-actions>.cinematic-play{border-color:#ffe36b;background:linear-gradient(180deg,#ffdc4d,#ffcf00 60%,#e6b900);box-shadow:inset 0 1px 0 #fff3b3,0 10px 28px #ffcf0033;color:#0a0c06}
html body #cinematicEntry.final02-entry .cinematic-entry-actions>.cinematic-play span{color:#3a3200}
html body #cinematicEntry.final02-entry .cinematic-entry-actions>.cinematic-play strong{font-size:28px}
html body #cinematicEntry.final02-entry .cinematic-entry-actions>:is(a,button):hover{border-color:var(--f2-lime);box-shadow:inset 0 1px 0 #ffffffb3,0 0 0 1px #b6ef3c33,0 8px 24px #00000080}
html body #cinematicEntry.final02-entry .cinematic-entry-actions>:is(a,button):active{transform:translateY(1px)}
html body #cinematicEntry.final02-entry .cinematic-entry-actions>:is(a,button):focus-visible{outline:2px solid var(--f2-lime);outline-offset:3px}
html body #cinematicEntry.final02-entry .cinematic-entry-actions>[hidden],
html body #cinematicEntry.final02-entry #cinematicStatus{display:none}
html body.final02-slabs #cinematicEntry.final02-entry .cinematic-entry-actions{opacity:0;pointer-events:none}
html body.final02-slabs #cinematicEntry.final02-entry .cinematic-entry-actions:focus-within{opacity:1;pointer-events:auto}
html body #cinematicEntry.final02-entry .cinematic-entry-actions>button[disabled]{opacity:.45;cursor:not-allowed}

/* ───────── The primary lane: PLAY DUEL pill + quiet TRAINING ───────── */
html body #final02Lane{position:fixed;left:var(--f2-x,50%);bottom:var(--f2-b,24px);transform:translateX(var(--f2-tx,-50%));z-index:1800;display:flex;align-items:center;gap:12px;margin:0;padding:0;pointer-events:none;opacity:1;transition:opacity 900ms var(--f2-ease),left 300ms var(--f2-ease),bottom 300ms var(--f2-ease)}
html body.final02-landing #final02Lane{opacity:0;pointer-events:none}
html body.try-racket #final02Lane,html body.rotor-access-panel-open #final02Lane,html body.club-center-open #final02Lane,html body.emblem-editor-open #final02Lane,html body.three-hero-opening #final02Lane{opacity:0;pointer-events:none}

html body #final02Lane :is(#rotorSceneEnterArena,#f11HomeBig):is(#rotorSceneEnterArena,#f11HomeBig){position:static!important;inset:auto!important;display:inline-flex!important;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:236px;min-height:58px;margin:0;padding:9px 34px 10px;border:1px solid #e9eef2a6;border-radius:999px;background:linear-gradient(180deg,#e9eef224,#0306091a 48%,#03060938)!important;box-shadow:inset 0 1px 0 #ffffffd9,inset 0 -1px 0 #e9eef233,inset 0 0 0 1px #e9eef214,0 10px 30px #0000008c!important;color:var(--f2-lime)!important;font:800 13px/1 Inter,sans-serif!important;letter-spacing:.16em;text-decoration:none;text-transform:uppercase;visibility:visible!important;pointer-events:auto;cursor:pointer;transition:border-color 300ms var(--f2-ease),box-shadow 300ms var(--f2-ease),transform 300ms var(--f2-ease)}
html body #final02Lane :is(#rotorSceneEnterArena,#f11HomeBig):is(#rotorSceneEnterArena,#f11HomeBig) .f2-pill-label{color:var(--f2-lime);text-shadow:0 1px 2px #000}
html body #final02Lane :is(#rotorSceneEnterArena,#f11HomeBig):is(#rotorSceneEnterArena,#f11HomeBig) .f2-pill-sub{font:600 9px/1 Inter,sans-serif;letter-spacing:.18em;color:var(--f2-silver);opacity:.78}
html body #final02Lane :is(#rotorSceneEnterArena,#f11HomeBig):is(#rotorSceneEnterArena,#f11HomeBig):hover{border-color:var(--f2-lime);box-shadow:inset 0 1px 0 #ffffffd9,inset 0 0 0 1px #b6ef3c40,0 0 28px #b6ef3c29,0 10px 30px #0000008c!important}
html body #final02Lane :is(#rotorSceneEnterArena,#f11HomeBig):is(#rotorSceneEnterArena,#f11HomeBig):active{transform:translateY(1px)}
html body #final02Lane :is(#rotorSceneEnterArena,#f11HomeBig):is(#rotorSceneEnterArena,#f11HomeBig):focus-visible{outline:2px solid var(--f2-lime);outline-offset:3px}

html body #final02Lane #rotorSceneTraining{display:inline-flex;align-items:center;min-height:40px;margin:0;padding:0 16px;border:1px solid #e9eef238;border-radius:999px;background:#0306094d;box-shadow:inset 0 1px 0 #ffffff33;color:var(--f2-silver);font:700 11px/1 Inter,sans-serif;letter-spacing:.16em;text-decoration:none;pointer-events:auto;transition:border-color 300ms var(--f2-ease),color 300ms var(--f2-ease)}
html body #final02Lane #rotorSceneTraining:hover{border-color:#b6ef3ca6;color:var(--f2-lime)}
html body #final02Lane #rotorSceneTraining:focus-visible{outline:2px solid var(--f2-lime);outline-offset:3px}

/* Duplicate copies of the primary action elsewhere on the root. */
html body #mainMenu .cm-primary :is(.cm-play,.cm-train){display:none!important}
html body #cmAngles .cm-full-room[href^="arena"]{display:none!important}
html body #threeHeroOpenerControls .three-hero-play{display:none!important}

/* ───────── Sizes ───────── */
@media (max-width:900px){
  html body #cinematicEntry.final02-entry .cinematic-copy p{font-size:clamp(40px,8.6vw,84px)}
  #final02Stage .f2-credit{max-width:34vw;font-size:8px}
}
@media (max-width:760px){
  html body #cinematicEntry.final02-entry .cinematic-entry-bottom{flex-direction:column;align-items:stretch;gap:18px;left:16px;right:16px;bottom:52px}
  html body #cinematicEntry.final02-entry .cinematic-copy{max-width:none}
  html body #cinematicEntry.final02-entry .cinematic-copy p{font-size:clamp(40px,11vw,76px)}
  html body #cinematicEntry.final02-entry .cinematic-copy span{margin-top:8px;font-size:12px}
  html body #cinematicEntry.final02-entry .cinematic-entry-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  html body #cinematicEntry.final02-entry .cinematic-entry-actions>.cinematic-play{grid-column:1 / -1}
  html body #cinematicEntry.final02-entry .cinematic-entry-actions>a,
  html body #cinematicEntry.final02-entry .cinematic-entry-actions>button{min-height:52px;padding:10px 14px}
  html body #cinematicEntry.final02-entry .cinematic-entry-actions strong{font-size:19px}
  html body #cinematicEntry.final02-entry .cinematic-entry-actions>.cinematic-play strong{font-size:24px}
  html body #cinematicEntry.final02-entry .cinematic-entry-actions span{font-size:10px}
  #final02Stage .f2-credit{display:none}
  #final02Stage .f2-hint{font-size:9px;letter-spacing:.18em;bottom:max(14px,env(safe-area-inset-bottom))}
}
@media (max-width:480px){
  html body #cinematicEntry.final02-entry .cinematic-brand>span:first-child{font-size:24px}
  html body #cinematicEntry.final02-entry .cinematic-entry-bottom{bottom:44px}
  html body #cinematicEntry.final02-entry .cinematic-copy p{font-size:clamp(38px,12.5vw,52px)}
  html body #cinematicEntry.final02-entry .cinematic-entry-actions span{display:none}
  html body #cinematicEntry.final02-entry .cinematic-entry-actions>a,
  html body #cinematicEntry.final02-entry .cinematic-entry-actions>button{min-height:50px;justify-content:center}
  /* Phone lane: the pill owns the thumb zone; the view rail and the headline block move up out of it. */
  html body #final02Lane{left:12px;right:12px;bottom:max(14px,env(safe-area-inset-bottom));transform:none;gap:8px}
  html body #final02Lane :is(#rotorSceneEnterArena,#f11HomeBig):is(#rotorSceneEnterArena,#f11HomeBig){flex:1 1 auto;min-width:0;min-height:54px;padding:8px 18px 9px}
  html body #final02Lane #rotorSceneTraining{min-height:54px;padding:0 14px;font-size:10px}
  html body.final02-lane .cm-view-rail{bottom:84px!important}
  html body.blue-court-opening.final02-lane:not(.rotor-access-panel-open):not(.club-center-open):not(.emblem-editor-open) #mainMenu#mainMenu{bottom:272px!important;max-height:24vh!important}
}
@media (max-height:480px) and (orientation:landscape){
  html body #cinematicEntry.final02-entry .cinematic-entry-bottom{bottom:30px;align-items:flex-end}
  html body #cinematicEntry.final02-entry .cinematic-copy p{font-size:clamp(30px,7vw,44px)}
  html body #cinematicEntry.final02-entry .cinematic-copy span{display:none}
  html body #cinematicEntry.final02-entry .cinematic-entry-actions{display:flex;flex-direction:row;width:auto;max-width:60vw}
  html body #cinematicEntry.final02-entry .cinematic-entry-actions>a,
  html body #cinematicEntry.final02-entry .cinematic-entry-actions>button{min-height:44px;padding:8px 12px}
  html body #cinematicEntry.final02-entry .cinematic-entry-actions span{display:none}
  html body #cinematicEntry.final02-entry .cinematic-brand{display:none}
  #final02Stage .f2-credit{display:none}
}

@media (prefers-reduced-motion:reduce){
  html body #cinematicEntry.final02-entry,#final02Stage,html body #final02Lane,html body #final02Lane :is(#rotorSceneEnterArena,#f11HomeBig):is(#rotorSceneEnterArena,#f11HomeBig),html body #final02Lane #rotorSceneTraining,
  html body #cinematicEntry.final02-entry .cinematic-entry-actions>a,html body #cinematicEntry.final02-entry .cinematic-entry-actions>button{transition:none}
  html body.final02-counting #final02Stage .f2-timer{transition:none;transform:scaleX(1)}
}

/* Final 02 critic fixes: the UI painter tags these as data-rotor-ui-3d and strips faces with !important; the landing keeps its own glass/yellow faces on every width. */
html body #cinematicEntry.final02-entry .cinematic-entry-actions>:is(a,button)[data-rotor-ui-3d]{background:linear-gradient(180deg,#ffffff1a,#0000008c)!important;border:1px solid #e9eef259!important;box-shadow:inset 0 1px 0 #ffffff80,0 10px 26px #00000080!important;transform:none!important;color:#e9eef2!important}
html body #cinematicEntry.final02-entry .cinematic-entry-actions>.cinematic-play[data-rotor-ui-3d]{background:linear-gradient(180deg,#ffdc4d,#ffcf00 60%,#e6b900)!important;border-color:#ffe36b!important;box-shadow:inset 0 1px 0 #fff3b3,0 10px 28px #ffcf0033!important;color:#0a0800!important}
html body #cinematicEntry.final02-entry .rotor-ui3d-icon{display:none!important}
/* When the scene paints a metal pane behind the PLAY DUEL pill, the CSS face steps back so there is one face, not two. */
html body #final02Lane :is(#rotorSceneEnterArena,#f11HomeBig):is(#rotorSceneEnterArena,#f11HomeBig)[data-rotor-ui-3d]{background:transparent!important;box-shadow:none!important;border-color:transparent!important}
html body #final02Lane :is(#rotorSceneEnterArena,#f11HomeBig):is(#rotorSceneEnterArena,#f11HomeBig)[data-rotor-ui-3d] .f2-pill-label{color:#b6ef3c!important}
/* The PLAY DUEL lane steps aside while CHOOSE YOUR VIEW is open. */
html body:has(#cmAngles:not([hidden])) #final02Lane{opacity:0!important;pointer-events:none!important}
/* Player Studio owns the screen while the editor is open: the PLAY DUEL lane steps out (both body flags the studio exposes). */
html body.f2-identity-editing #final02Lane,html body.emblem-editor-open #final02Lane{opacity:0!important;pointer-events:none!important}