/* 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:150px!important;top:auto!important;bottom:118px!important;left:18px!important;right:auto!important;opacity:.78;transition:opacity 300ms var(--f1-ease)}
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). */
@media (min-width:761px){
  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)}
}
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}

/* 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}
  html body.stadium-arena.playing #pfDeck#pfDeck:not([hidden]){width:150px!important;bottom:150px!important;max-height:110px!important}
  html body.stadium-arena.playing .rotor36-session-tools{display:none!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.stadium-arena .stadium-match-tools{bottom:92px!important}
  html body .cm-primary{gap:8px}
}
@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}
}