/* ROTOR Final 01 — bubble PiPs. Real glass comes from the scene (pip-glass overlay); this is layout and hover. */
html body .f1-bubble-pip{left:auto!important;right:18px!important;top:auto!important;bottom:118px!important;width:236px!important;padding:8px!important;border-radius:30px!important;border-color:#e9eef2b0!important;z-index:402!important}
html body .f1-bubble-pip header{margin-bottom:6px!important;gap:6px!important}
html body .f1-bubble-pip :is(.rotor-slide-controls,.pip-world-actions){display:none!important}
html body .f1-bubble-pip header select{flex:1;min-height:32px!important;border-radius:16px!important;font-size:10px!important;letter-spacing:1.2px}
html body .f1-bubble-pip header button{min-height:32px!important;width:32px;padding:0!important;border-radius:16px!important}
html body .f1-bubble-pip .rotor-view-window{aspect-ratio:16/10;border-radius:22px!important;cursor:pointer;overflow:hidden;position:relative}
html body .f1-bubble-pip .rotor-view-window::after{content:"CLICK · NEXT CAMERA";position:absolute;left:10px;bottom:8px;font:700 9px/1 Inter,system-ui,sans-serif;letter-spacing:1.6px;color:#e9eef2cc;opacity:0;transition:opacity 220ms;pointer-events:none;text-shadow:0 1px 2px #000c}
html body .f1-bubble-pip:hover .rotor-view-window::after{opacity:1}
html body .f1-bubble-pip.expanded{width:min(640px,calc(100vw - 36px))!important;bottom:130px!important}
html body .f1-bubble-pip.expanded .rotor-view-window{aspect-ratio:16/9}
/* Toggle lives beside the match tools; the access-center sheet hides the generic toggle, this one is its own control. */
html body.rotor-access-ready .f1-bubble-toggle{display:inline-flex!important;align-items:center;left:auto!important;right:18px!important;top:auto!important;bottom:68px!important;min-height:40px!important;padding:0 14px!important;border-radius:20px!important;font-size:10px!important;letter-spacing:1.6px;color:#e9eef2!important;border:1px solid #e9eef299!important;background:linear-gradient(155deg,#ffffff1f,#00000080)!important;box-shadow:inset 0 1px 0 #ffffff66,0 8px 20px #0006!important;z-index:401!important}
/* Open bubble has its own close control; the toggle only shows while the bubble is closed, in the bubble's lane. */
html body.rotor-access-ready .f1-bubble-toggle[aria-expanded="true"]{display:none!important}
html body.rotor-access-ready .f1-bubble-toggle{bottom:118px!important}
html body.rotor-access-ready:not(.playing) .f1-bubble-toggle{display:none!important}
html body:not(.playing) .f1-bubble-pip:not(.f1-keep){display:none!important}
html body:has(#resumePanel:not([hidden])) .f1-bubble-pip,html body.searching .f1-bubble-pip{visibility:hidden!important}
/* Hover accents on every PiP header. */
html body .rotor-view-pip header :is(select,button):hover{border-color:#c7fc68cc!important;color:#f4ffe0!important;box-shadow:inset 0 1px 0 #ffffff80,0 0 0 1px #c7fc6833!important}
html body .rotor-view-pip{transition:box-shadow 260ms cubic-bezier(.22,.61,.36,1)}
html body .rotor-view-pip:hover{box-shadow:inset 0 2px #ffffff66,0 22px 50px #0007,0 0 0 1px #e9eef233!important}
@media (max-width:480px){
  html body .f1-bubble-pip,html body.rotor-access-ready .f1-bubble-toggle{display:none!important}
}
@media (max-width:760px){
  html body .f1-bubble-pip{width:170px!important;bottom:206px!important;right:12px!important;padding:6px!important}
  html body .f1-bubble-pip header select{font-size:9px!important}
  html body.rotor-access-ready .f1-bubble-toggle{bottom:160px!important;right:12px!important;min-height:36px!important}
  html body .f1-bubble-pip.expanded{width:calc(100vw - 24px)!important;right:12px!important}
}

/* ── Final 02 — BOTH PLAYERS broadcast lane ──────────────────────────────────────────────────────────
   #rotorMatchView while a point is live (game.js opens it at >=1100px and picks the 'broadcast' camera).
   Top-right lane: under the scoreboard header (y 16..78) and the resting route dock (y 90..152).
   Width 34vw max 520px, 16:9 window; the height clamp keeps its bottom above the racket bubble
   (bubble top = 100vh - 118px - 192px). Total PiP area stays under 28% of the viewport.
   Three ids on purpose: the inherited sheets position .rotor-view-pip with two. */
html body.stadium-arena.playing #rotorMatchView#rotorMatchView#rotorMatchView:not([hidden]){
  position:fixed;left:auto!important;right:20px!important;top:164px!important;bottom:auto!important;
  width:min(34vw,520px,calc((100vh - 556px) * 1.7778 + 20px))!important;min-width:240px!important;max-width:none!important;max-height:none!important;
  padding:10px!important;border-radius:24px!important;overflow:visible!important;z-index:401!important;
  border:1px solid #e9eef2b8!important;
  box-shadow:inset 0 1px 0 #ffffffb3,inset 0 -1px 0 #e9eef233,inset 0 0 0 1px #0000004d,0 1px 0 #ffffff14,0 22px 48px #00000080!important;
  transition:width 1800ms cubic-bezier(.22,.61,.36,1),opacity 900ms cubic-bezier(.22,.61,.36,1),box-shadow 260ms cubic-bezier(.22,.61,.36,1);
}
/* While the swing coach card is up (centre, 560px wide from y 88) the lane narrows so the two never touch; it glides back when GOT IT closes the card. */
html body.stadium-arena.playing:has(.f1-coach.on) #rotorMatchView#rotorMatchView#rotorMatchView:not([hidden]){
  width:min(34vw,520px,calc(50vw - 312px),calc((100vh - 556px) * 1.7778 + 20px))!important;
}
/* Expanded: one deliberate press; the bubble steps aside so nothing overlaps. Still under 28% of 1440x900. */
html body.stadium-arena.playing #rotorMatchView#rotorMatchView#rotorMatchView.expanded:not([hidden]){
  width:min(52vw,760px,calc((100vh - 432px) * 1.7778 + 20px))!important;
}
html body.stadium-arena.playing:has(#rotorMatchView.expanded:not([hidden])) .f1-bubble-pip{visibility:hidden!important}
/* Header: camera select + play / expand / close as chrome icon buttons, one row. */
html body.stadium-arena.playing #rotorMatchView#rotorMatchView header{display:flex;flex-wrap:nowrap!important;align-items:center;gap:6px!important;margin:0 0 8px!important;padding:0!important}
html body.stadium-arena.playing #rotorMatchView#rotorMatchView header select{flex:1 1 60px!important;width:auto!important;min-width:0!important;min-height:36px!important;border-radius:18px!important;font:800 10px/1 Inter,system-ui,sans-serif!important;letter-spacing:1.4px;text-transform:uppercase;padding:0 26px 0 12px!important}
html body.stadium-arena.playing #rotorMatchView#rotorMatchView header button{flex:0 0 36px!important;width:36px!important;min-height:36px!important;height:36px;padding:0!important;border-radius:18px!important;display:inline-flex;align-items:center;justify-content:center}
html body.stadium-arena.playing #rotorMatchView#rotorMatchView header button svg{width:16px;height:16px}
/* The window is the broadcast frame: 16:9, click to cycle cameras (the select stays the accessible control). */
html body.stadium-arena.playing #rotorMatchView#rotorMatchView .rotor-view-window{aspect-ratio:16/9!important;width:100%;border-radius:16px!important;border-color:#e9eef266!important;cursor:pointer;overflow:hidden;position:relative}
html body.stadium-arena.playing #rotorMatchView#rotorMatchView .rotor-view-window::after{content:"CLICK · NEXT CAMERA";position:absolute;left:12px;bottom:10px;font:700 9px/1 Inter,system-ui,sans-serif;letter-spacing:1.6px;color:#e9eef2cc;opacity:0;transition:opacity 220ms;pointer-events:none;text-shadow:0 1px 2px #000c}
html body.stadium-arena.playing #rotorMatchView#rotorMatchView:hover .rotor-view-window::after{opacity:1}
html body.stadium-arena.playing #rotorMatchView#rotorMatchView[data-kind="broadcast"] .rotor-view-window::before{content:"BOTH PLAYERS · LIVE";position:absolute;right:12px;top:10px;z-index:1;font:700 9px/1 Inter,system-ui,sans-serif;letter-spacing:1.6px;color:#e9eef2d9;pointer-events:none;text-shadow:0 1px 2px #000c}
/* Rooms / modes navigation is not play: it stays out of the broadcast lane. */
html body.stadium-arena.playing #rotorMatchView#rotorMatchView .pip-world-actions{display:none!important}
/* Pause dialog, rival scan: the lane clears, like the bubble (the opponent card returns in that corner). */
html body:has(#resumePanel:not([hidden])) #rotorMatchView,html body.searching #rotorMatchView{visibility:hidden!important}
/* Short windows: the lane cannot fit between the dock and the bubble; the bubble carries the live view alone. */
@media (max-height:640px){
  html body.stadium-arena.playing #rotorMatchView#rotorMatchView#rotorMatchView:not(.expanded){display:none!important}
}
/* Tablets and phones: no broadcast lane during play (game.js only opens it at >=1100px). */
@media (max-width:760px){
  html body.stadium-arena.playing #rotorMatchView#rotorMatchView#rotorMatchView{display:none!important}
}
@media (prefers-reduced-motion:reduce){
  html body.stadium-arena.playing #rotorMatchView#rotorMatchView#rotorMatchView:not([hidden]){transition:none!important}
}