/* ROTOR Final 01 — UX finish sheet. Loaded last on every page.
   Fixes the broken-button states Codex left behind, adds pointer-driven sheen and
   glass parallax, a sharper chrome-bead cursor, and phone/tablet layout rules.
   Palette only: court blue #043cff · rotor yellow #ffcf00 · ball green #9aff00 · UI lime #c7fc68 · silver #e9eef2. */

:root{
  --f1-lime:#c7fc68;--f1-ball:#9aff00;--f1-yellow:#ffcf00;--f1-silver:#e9eef2;--f1-blue:#043cff;
  --f1-ease:cubic-bezier(.22,.61,.36,1);
  --mx:50%;--my:50%;--tilt-x:0deg;--tilt-y:0deg;
}

/* 1. Primary 3D buttons were painted yellow text on a yellow metal pane (RESUME, PLAY, READY UP were unreadable). */
html body [data-rotor-ui-3d][data-rotor-ui-3d][data-rotor-ui-3d][data-rotor-ui-3d-primary]:not([data-rotor-ui-3d-glyph]){
  color:#101706!important;
  text-shadow:0 0 2px #ffe8a0,0 0 8px #ffcf00cc,0 1px 0 #fff6!important;
  font-weight:800;letter-spacing:1.6px;
}
html body [data-rotor-ui-3d][data-rotor-ui-3d][data-rotor-ui-3d][data-rotor-ui-3d-primary]:not([data-rotor-ui-3d-glyph]):is(:hover,:focus-visible){
  text-shadow:0 0 2px #fff2c0,0 0 12px #ffcf00,0 1px 0 #fff8!important;
}
/* Pause dialog: readable stack, focus lands on RESUME. */
html body #resumePanel #resume{font-size:17px!important;letter-spacing:2px}
html body #resumePanel button:focus-visible{outline:2px solid var(--f1-lime)!important;outline-offset:3px!important}

/* 2. Pointer sheen on every real control: a highlight that follows the bead. */
.f1-sheen{position:relative;isolation:isolate}
.f1-sheen::after{
  content:""!important;display:block!important;position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:radial-gradient(120px 90px at var(--mx) var(--my),#ffffff2e,#ffffff08 40%,transparent 70%);
  opacity:0;transition:opacity 220ms var(--f1-ease);
}
.f1-sheen:is(:hover,:focus-visible)::after{opacity:1}
/* Chrome rim + lime underline on hover for DOM glass buttons (never for the 3D-painted controls, their shader does it). */
html body :is(.gb,.cm-primary a,.cm-learning a,.cm-view-rail button,.cm-full-room,.rotor-access-route,.match-frame-destinations :is(a,button),.rotor-view-toggle,.rotor-view-pip header button,.topActions button,.rotor-club-button,.stadium-room-nav a,.stadium-room-nav button,#viewControls button,.entry button,.directorLinks a):not([data-rotor-ui-3d]){
  transition:transform 160ms var(--f1-ease),box-shadow 220ms var(--f1-ease),border-color 220ms var(--f1-ease),filter 220ms var(--f1-ease);
}
html body :is(.gb,.cm-primary a,.cm-learning a,.cm-view-rail button,.cm-full-room,.rotor-access-route,.match-frame-destinations :is(a,button),.rotor-view-toggle,.rotor-view-pip header button,.topActions button,.rotor-club-button,.stadium-room-nav a,.stadium-room-nav button,#viewControls button,.entry button,.directorLinks a):not([data-rotor-ui-3d]):is(:hover,:focus-visible){
  border-color:#e9eef2cc!important;
  box-shadow:inset 0 1px 0 #ffffff80,inset 0 -2px 0 #c7fc6899,0 10px 26px #00000066,0 0 0 1px #c7fc6833!important;
  filter:brightness(1.08);
}
html body :is(.gb,.cm-primary a,.cm-view-rail button,.rotor-access-route,.match-frame-destinations :is(a,button),.rotor-view-toggle):not([data-rotor-ui-3d]):active{transform:translateY(1px) scale(.985)}
/* Hover accents on the 3D-painted controls: their pane is drawn by the scene, so only the label reacts. */
html body [data-rotor-ui-3d][data-rotor-ui-3d]:not([data-rotor-ui-3d-primary]):not([data-rotor-ui-3d-glyph]):is(:hover,:focus-visible){color:#f4ffe0!important;text-shadow:0 0 10px #c7fc6880,0 1px 2px #000c!important}

/* 3. Glass parallax: panels tilt a few degrees toward the pointer. JS adds .f1-tilt only when the panel has no transform of its own. */
.f1-tilt{transform:perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transform-style:preserve-3d;transition:transform 420ms var(--f1-ease);will-change:transform}
.f1-tilt:hover{transition-duration:120ms}
@media (prefers-reduced-motion:reduce){.f1-tilt{transform:none!important;transition:none}.f1-sheen::after{transition:none}}

/* 4. Cursor: the chrome bead never lags the hand. */
#rotorCursor{will-change:translate;transition:width 90ms,height 90ms,box-shadow 90ms,transform 40ms}
#rotorCursor[data-zone="match"]{width:26px;height:26px;background:radial-gradient(circle at 50% 50%,#e9eef2 0,#e9eef2 9%,transparent 11%),radial-gradient(circle at 50% 50%,transparent 60%,#c7fc68 63%,#c7fc68 70%,transparent 74%);box-shadow:0 0 10px #c7fc6855}
#rotorCursor[data-zone="world"]{width:16px;height:16px}
/* Focus ring for keyboard players on everything. */
html body :is(a,button,summary,select,[role=button]):focus-visible{outline:2px solid #c7fc68!important;outline-offset:3px!important}

/* 5. Arena: one reading lane per corner. Music deck becomes a compact chip while a point is live.
   (Three ids on purpose: the inherited design sheets fight with two.) */
html body.stadium-arena.playing #pfDeck#pfDeck#pfDeck:not([hidden]){width:210px!important;max-height:118px!important;top:auto!important;bottom:214px!important;left:18px!important;right:auto!important;padding:10px!important;opacity:.78;transition:opacity 300ms var(--f1-ease)}
/* Lanes during a live point (1024 wide): music chip left-middle · COURT CONTROLS left-bottom · beat centre · session tools + racket bubble right-bottom, side by side. */
html body.stadium-arena.playing .rotor36-session-tools{left:auto!important;top:auto!important;right:270px!important;bottom:118px!important}
html body.stadium-arena.playing #pfDeck#pfDeck#pfDeck:not([hidden]):hover{opacity:1}
html body.stadium-arena.playing #pfDeck#pfDeck#pfDeck :is(.host,.acts,.pf-spotify-note,#pfSpotifyStatus,.pf-video-host){display:none!important}
/* The route dock (STADIUM · TRAINING · WORLD · PLAY …) is navigation, not play. It rests while the ball is live. */
html body.stadium-arena.playing .rotor-access-dock{opacity:.22;transition:opacity 400ms var(--f1-ease)}
html body.stadium-arena.playing .rotor-access-dock:is(:hover,:focus-within){opacity:1}
html body.stadium-arena:has(.f1-coach.on) .rotor-access-dock{opacity:0;pointer-events:none}
html body.stadium-arena:has(.f1-coach.on) #readyHint{display:none!important}
/* The emblem window and the yellow opponent card live in the world during play (final01-pilot-badge.js); they return on pause. */
html body.stadium-arena.playing:not(.paused-f1) :is(.rotor-arena-badge,#rotorOpponentGlass){opacity:0!important;pointer-events:none!important;transition:opacity 400ms var(--f1-ease)}
/* Tablets and narrow laptops: the HUD sits higher, so the music chip rides higher too. */
@media (max-width:900px) and (min-width:481px){
  html body.stadium-arena.playing #pfDeck#pfDeck#pfDeck:not([hidden]){bottom:330px!important}
}
html body.stadium-arena #pfDeck [data-spotify-play],html body.stadium-arena #pfSpotifyPlayback{min-height:38px!important;font-size:11px!important}
/* The side rail of music buttons was the loudest thing on the court. Keep it off during live play. */
html body.stadium-arena.playing .rotor36-session-tools{opacity:.55;transform:scale(.9);transform-origin:left bottom;transition:opacity 300ms var(--f1-ease),transform 300ms var(--f1-ease)}
html body.stadium-arena.playing .rotor36-session-tools:hover{opacity:1;transform:none}
/* Mirrored ghost copy on the court boards during a match stays, but the results text is never mirrored in the HUD. */
html body.stadium-arena .match-frame-destinations{gap:10px}

/* 5a. The point strip (score after each point) takes the free bottom-centre lane, never the racket bubble's corner. */
html body.stadium-arena.playing #stadiumPointStrip:not([hidden]){left:50%!important;right:auto!important;transform:translateX(-50%)!important;bottom:118px!important;top:auto!important;max-width:min(425px,calc(100vw - 600px))!important}
@media (max-width:1100px){html body.stadium-arena.playing #stadiumPointStrip:not([hidden]){bottom:330px!important;max-width:min(425px,calc(100vw - 48px))!important}}
/* 5b. The match-up (PLAY card vs rival card) owns the screen: no music deck or session tools on top of it. */
html body:has(#opponentPull:not([hidden])) :is(#pfDeck#pfDeck#pfDeck,nav.rotor36-session-tools,.rotor-access-dock,.rotor-arena-badge,#rotorOpponentGlass){opacity:0!important;pointer-events:none!important;transition:opacity 300ms var(--f1-ease)}
/* 6. Opponent card returns beside the pause dialog and the pre-match menu. */
html body.rotor-match-frame:not(.playing) #rotorOpponentGlass:not([hidden]),html body.rotor-match-frame.paused-f1 #rotorOpponentGlass:not([hidden]){top:auto!important;bottom:130px!important;right:18px!important}

/* 7. Responsive: phone and tablet reading lanes. */
@media (max-width:760px){
  html body.stadium-arena header{padding-inline:10px}
  html body.stadium-arena #scoreboard{transform:scale(.86);transform-origin:center top}
  html body.stadium-arena .match-frame-destinations{flex-wrap:wrap;justify-content:center}
  html body.stadium-arena .match-frame-destinations :is(a,button){min-height:40px;font-size:10px;padding-inline:10px}
  html body.stadium-arena #flightHud .ballStats{gap:12px}
  /* Phones: the music chip sits under the header, clear of the touch pads; side tools and the bubble stay off. */
  html body.stadium-arena.playing #pfDeck#pfDeck#pfDeck:not([hidden]){width:150px!important;top:118px!important;bottom:auto!important;left:12px!important;max-height:96px!important;padding:8px!important}
  html body.stadium-arena.playing .rotor36-session-tools{display:none!important}
  html body.stadium-arena .stadium-match-tools{top:auto!important}
  html body #resumePanel{padding:20px!important}
  html body #resumePanel h2{font-size:34px!important}
  html body .rotor-view-pip{width:min(272px,calc(100vw - 28px))!important;left:14px!important}
}
@media (max-width:480px){
  html body.stadium-arena #scoreboard{transform:scale(.74)}
  html body .cm-primary{gap:8px}
  /* Phone, live point: thumb pads own the bottom. Music chip and HUD share one strip under the header; coach below them.
     Court controls, session tools and the badge windows come back the moment you pause. */
  html body.stadium-arena.playing:not(.paused-f1) :is(details.stadium-match-tools,nav.rotor36-session-tools,nav.rotor-access-dock,#readyHint){display:none!important}
  html body.stadium-arena #medalToast:not([hidden]){top:44%!important;bottom:auto!important;left:12px!important;right:12px!important;width:auto!important;max-width:none!important}
  html body.stadium-arena.playing #pfDeck#pfDeck#pfDeck:not([hidden]){top:76px!important;bottom:auto!important;left:12px!important;width:150px!important;max-height:96px!important;padding:8px!important}
  html body.stadium-arena.playing:not(.paused-f1) footer#flightHud{top:76px!important;bottom:auto!important;left:170px!important;right:12px!important;width:auto!important;height:auto!important;max-height:96px!important;padding:8px 10px!important;gap:4px!important;font-size:9px!important;overflow:hidden}
  html body.stadium-arena.playing:not(.paused-f1) #flightHud :is(.session,.energyLegend){display:none!important}
  html body.stadium-arena.playing:not(.paused-f1) #flightHud :is(#flightSpeed,.ballStats b){font-size:18px!important}
}
@media (max-height:560px){
  html body #resumePanel{top:48px!important;max-height:calc(100dvh - 60px)!important}
}
/* Browser zoom / small laptops: never let the HUD and the bottom tools overlap. */
@media (max-width:1180px) and (min-width:761px){
  html body.stadium-arena .match-frame-destinations :is(a,button){font-size:10px;min-height:40px}
}

/* ── Final 01.3 — arena pre-match and in-play lanes (Joey: nothing on the scoreboard, cleaner 3D UI) ── */
/* The coach never shows outside a live point; the scoreboard board stays clear during play (coach moved to the bottom lane). */
html body.stadium-arena:not(.playing) :is(.f1-coach,.f1-beat){display:none!important}
/* Slideshow controls inside PiPs (Stadium 31) are stale: PiPs are live cameras now. */
html body .rotor-view-pip .rotor-slide-controls{display:none!important}
/* The route dock in the arena becomes icon-only, top-right, under the scoreboard header: it no longer covers the top board. */
html body.stadium-arena .rotor-access-dock{left:auto!important;right:20px!important;top:84px!important;width:auto!important;max-width:calc(100vw - 40px);grid-template-columns:none!important;display:flex!important;gap:6px!important;padding:4px!important;border-radius:26px!important}
html body.stadium-arena .rotor-access-dock .rotor-access-route{min-width:40px!important;width:40px;height:40px;padding:0!important;border-radius:20px!important;justify-content:center}
html body.stadium-arena .rotor-access-dock .rotor-access-route .f2-route-label,html body.stadium-arena .rotor-access-dock .rotor-access-route > span:not(.rotor-access-glyph){position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
html body.stadium-arena.playing .rotor-access-dock{opacity:.22}
/* Pre-match: the arena menu card is the one primary surface; the opponent/emblem windows and the old difficulty row stay out of its column. */
html body.stadium-arena:not(.playing) #menu{z-index:60}
html body.stadium-arena:not(.playing) .rotor-arena-badge{top:150px!important;right:20px!important}
/* The stale session text in the HUD gives its cell to the live input sticks (final03-input-sticks). */
html body.stadium-arena #flightHud .session{display:none!important}
/* The point strip takes the lane above the coach card. */
html body.stadium-arena.playing #stadiumPointStrip:not([hidden]){bottom:300px!important}
/* Arena on phone landscape: HUD strip top, pads bottom corners, coach compact. */
@media (max-height:480px) and (orientation:landscape){
  html body.stadium-arena.playing #pfDeck#pfDeck#pfDeck:not([hidden]){top:12px!important;bottom:auto!important;left:12px!important;width:64px!important;max-height:64px!important}
  html body.stadium-arena.playing .rotor-access-dock,html body.stadium-arena.playing .rotor36-session-tools,html body.stadium-arena.playing details.stadium-match-tools,html body.stadium-arena.playing .f1-bubble-pip,html body.stadium-arena.playing #rotorMatchView{display:none!important}
  html body.stadium-arena .f1-coach{top:auto!important;bottom:8px!important;width:min(420px,calc(100vw - 340px))!important;padding:6px 8px!important}
  html body.stadium-arena .f1-coach .f1-step span,html body.stadium-arena .f1-coach .f1-foot span{display:none}
  html body.stadium-arena #flightHud{transform:scale(.8);transform-origin:center bottom}
}