/* ROTOR Final 02 — the music bubble. #pfDeck (section.pf-courtside-deck, built by radio-view.js) becomes a seamless glass
   bubble: at rest a 64 px disc (album art in a chrome ring, a thin lime progress arc while playing); hover / focus / tap
   expands it in place to a 300 px pill: GUNNA — POP IT · PLAY/PAUSE · MUTE · YouTube icon.
   Every legacy child (top / status / controls / acts / note / CLOSE) stays in the DOM, hidden, so play-full-music.js and
   radio-frame-bridge.js keep painting it. The real optical pane comes from stadium26-pip-glass (#pfDeck is in its selector
   list; it reads the 32 px corner radius, so the pane is a disc / pill). The rim is CSS chrome; no blur, no lime fill.
   Loads LAST on index.html, green-room.html and arena.html.

   Four ids on purpose: the inherited design sheets reach (3,5,2) on this element.

   LANES
     root + Green Room      top 18  left 18   (≤480: top 12 left 12; expanded body opens BELOW the disc at +100 px)
     arena  (final01-ux)    bottom 214 left 18 · 481–900 while playing: bottom 330 · ≤760 playing: top 118 left 12 · ≤480 playing: top 76
   The host-frame LISTEN chip (radio-host.css) mirrors these lanes and hides whenever this bubble is on screen. */

:root{--f2-ease:cubic-bezier(.22,.61,.36,1);--f2-silver:#e9eef2;--f2-lime:#c7fc68;--f2-yellow:#ffcf00;--f2-progress:0}

/* ── the deck itself ── */
html body #pfDeck#pfDeck#pfDeck#pfDeck.pf-courtside-deck{
  display:flex!important;position:fixed!important;z-index:158!important;box-sizing:border-box!important;
  width:64px!important;height:64px!important;min-width:0!important;max-width:none!important;min-height:0!important;max-height:none!important;
  padding:0!important;margin:0!important;border:0!important;border-radius:32px!important;
  background:transparent!important;background-color:transparent!important;box-shadow:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;overflow:visible!important;
  align-items:center!important;gap:0!important;visibility:visible!important;pointer-events:auto!important;
  color:var(--f2-silver)!important;font-family:Inter,Arial,sans-serif!important;
  transition:width 420ms var(--f2-ease),opacity 300ms var(--f2-ease);
}
html body #pfDeck#pfDeck#pfDeck#pfDeck.pf-courtside-deck[hidden]{display:none!important}
html body:is(.rotor-preview,.pf-ui-off,.stadium-idle,.try-racket,.roam-ui-hidden) #pfDeck#pfDeck#pfDeck#pfDeck.pf-courtside-deck{display:none!important}
html body #pfDeck#pfDeck#pfDeck#pfDeck.pf-courtside-deck:is(:hover,:focus-within,.f2-open){width:300px!important}
/* legacy chrome stays mounted, never painted */
html body #pfDeck#pfDeck#pfDeck#pfDeck.pf-courtside-deck>:not(.f2-bubble){display:none!important;visibility:hidden!important;pointer-events:none!important}
html body #pfDeck#pfDeck#pfDeck#pfDeck.pf-courtside-deck .rotor36-music-close{display:none!important}

/* lanes */
html body:not(.stadium-arena) #pfDeck#pfDeck#pfDeck#pfDeck.pf-courtside-deck{top:18px!important;left:18px!important;right:auto!important;bottom:auto!important}
html body.stadium-arena #pfDeck#pfDeck#pfDeck#pfDeck.pf-courtside-deck{top:auto!important;bottom:214px!important;left:18px!important;right:auto!important}
@media (max-width:900px) and (min-width:481px){html body.stadium-arena.playing #pfDeck#pfDeck#pfDeck#pfDeck.pf-courtside-deck{bottom:330px!important}}
@media (max-width:760px){html body.stadium-arena.playing #pfDeck#pfDeck#pfDeck#pfDeck.pf-courtside-deck{top:118px!important;bottom:auto!important;left:12px!important}}
@media (max-width:480px){
  html body:not(.stadium-arena) #pfDeck#pfDeck#pfDeck#pfDeck.pf-courtside-deck{top:12px!important;left:12px!important}
  html body.stadium-arena.playing #pfDeck#pfDeck#pfDeck#pfDeck.pf-courtside-deck{top:76px!important}
}

/* ── bubble shell ── */
html body #pfDeck .f2-bubble{position:relative;display:flex;align-items:center;width:100%;height:64px;border-radius:32px;isolation:isolate;overflow:hidden}
html body #pfDeck .f2-bubble::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  border:1px solid #e9eef2b3;background:linear-gradient(145deg,#ffffff1f,#ffffff06 42%,transparent 60%,#00000033);
  box-shadow:inset 0 1px 0 #ffffffd0,inset 0 -1px 0 #e9eef233,inset 0 0 0 1px #ffffff12,0 10px 26px #0005}
html body #pfDeck .f2-bubble>*{position:relative;z-index:1}

/* ── disc: cover inside a chrome ring, lime progress arc while playing ── */
html body #pfDeck .f2-disc{flex:0 0 64px;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
html body #pfDeck .f2-disc::after{content:"";position:absolute;width:50px;height:50px;border-radius:50%;pointer-events:none;
  box-shadow:inset 0 0 0 2px #e9eef2,inset 0 0 0 3px #00000099,inset 0 6px 10px #ffffff33,inset 0 -6px 10px #0000004d}
html body #pfDeck .f2-art{display:block;width:50px;height:50px;border-radius:50%;object-fit:cover;transition:transform 420ms var(--f2-ease)}
html body #pfDeck.f2-playing .f2-art{transform:scale(1.02)}
html body #pfDeck .f2-arc{position:absolute;inset:0;width:64px;height:64px;transform:rotate(-90deg);pointer-events:none}
html body #pfDeck .f2-arc-track{fill:none;stroke:#e9eef230;stroke-width:2}
html body #pfDeck .f2-arc-fill{fill:none;stroke:#e9eef2;stroke-width:2;stroke-linecap:round;stroke-dasharray:182.2;stroke-dashoffset:calc(182.2 * (1 - var(--f2-progress,0)));opacity:0;transition:opacity 300ms var(--f2-ease),stroke-dashoffset 300ms linear}
html body #pfDeck.f2-playing .f2-arc-fill{opacity:1}
html body #pfDeck .f2-disc:focus-visible{outline:2px solid var(--f2-lime);outline-offset:2px}

/* ── pill body (revealed when expanded) ── */
html body #pfDeck .f2-body{display:flex;align-items:center;gap:6px;flex:1 1 auto;min-width:0;height:64px;padding:0 12px 0 6px;opacity:0;pointer-events:none;transition:opacity 260ms var(--f2-ease) 120ms}
html body #pfDeck.pf-courtside-deck:is(:hover,:focus-within,.f2-open) .f2-body{opacity:1;pointer-events:auto}
html body #pfDeck .f2-title{display:grid;gap:4px;flex:1 1 auto;min-width:0;text-transform:uppercase;white-space:nowrap;overflow:hidden}
html body #pfDeck .f2-title strong{font:800 11px/1 Inter,Arial,sans-serif;letter-spacing:.16em;color:var(--f2-silver);text-shadow:0 1px 2px #000c}
html body #pfDeck .f2-title em{font:600 9px/1 Inter,Arial,sans-serif;font-style:normal;letter-spacing:.2em;color:#c9d2d8}
html body #pfDeck .f2-status{display:block;font:600 8px/1 Inter,Arial,sans-serif;letter-spacing:.18em;color:#9aa5ad;margin-top:1px}
/* round chrome controls: 36 px, silver rims, inset highlight; lime only as the hover underline and focus ring */
html body #pfDeck :is(.f2-play,.f2-mute,.f2-yt-icon){flex:0 0 36px;width:36px;height:36px;border-radius:50%;display:inline-grid;place-items:center;cursor:pointer;box-sizing:border-box;
  border:1px solid #e9eef280;background:linear-gradient(160deg,#ffffff26,#ffffff06 55%,#00000033);box-shadow:inset 0 1px 0 #ffffff99,inset 0 -1px 0 #00000066;color:var(--f2-silver);
  transition:border-color 220ms var(--f2-ease),box-shadow 220ms var(--f2-ease),transform 160ms var(--f2-ease);outline:none;-webkit-tap-highlight-color:transparent}
html body #pfDeck :is(.f2-play,.f2-mute,.f2-yt-icon):hover,html body #pfDeck .f2-yt:focus-visible .f2-yt-icon{border-color:var(--f2-silver);box-shadow:inset 0 1px 0 #ffffffcc,inset 0 -2px 0 #c7fc6899;color:#fff}
html body #pfDeck :is(.f2-play,.f2-mute):active{transform:translateY(1px) scale(.97)}
html body #pfDeck :is(.f2-play,.f2-mute):focus-visible{outline:2px solid var(--f2-lime);outline-offset:2px}
html body #pfDeck .f2-yt{display:inline;color:inherit;text-decoration:none;outline:none}
html body #pfDeck .f2-yt:focus-visible .f2-yt-icon{outline:2px solid var(--f2-lime);outline-offset:2px}
html body #pfDeck .f2-bubble svg.f2-i{width:14px;height:14px;display:block;fill:currentColor}
html body #pfDeck .f2-play .f2-i-pause,html body #pfDeck.f2-playing .f2-play .f2-i-play{display:none}
html body #pfDeck.f2-playing .f2-play .f2-i-pause{display:block}
html body #pfDeck .f2-mute .f2-i-off,html body #pfDeck.f2-muted .f2-mute .f2-i-on{display:none}
html body #pfDeck.f2-muted .f2-mute .f2-i-off{display:block}
html body #pfDeck.f2-muted .f2-mute{color:#c9d2d8}
/* a muted or stalled bubble shows it: ring dims, arc hides */
html body #pfDeck.f2-muted .f2-arc-fill{opacity:.35}

/* phone: the body opens below the disc (the dock owns the top-right) */
@media (max-width:480px){
  html body #pfDeck#pfDeck#pfDeck#pfDeck.pf-courtside-deck:is(:hover,:focus-within,.f2-open){width:64px!important}
  html body #pfDeck .f2-bubble{overflow:visible}
  html body #pfDeck .f2-body{position:absolute;left:0;top:100px;width:min(268px,calc(100vw - 24px));height:64px;padding:0 12px 0 10px;border-radius:32px;
    border:1px solid #e9eef2b3;background:linear-gradient(145deg,#ffffff1f,#ffffff06 42%,#00000066);box-shadow:inset 0 1px 0 #ffffffd0,inset 0 -1px 0 #e9eef233,0 10px 26px #0006}
}

/* ── one music control per screen: the old MUSIC toggle, the wake pill and the deck CLOSE are retired ── */
html body nav.rotor36-session-tools.rotor36-session-tools{display:none!important}
html body #pfMusicWake#pfMusicWake{display:none!important}

@media (prefers-reduced-motion:reduce){
  html body #pfDeck#pfDeck#pfDeck#pfDeck.pf-courtside-deck,html body #pfDeck .f2-body,html body #pfDeck .f2-art,html body #pfDeck .f2-arc-fill,html body #pfDeck :is(.f2-play,.f2-mute,.f2-yt-icon){transition:none!important}
}
@media (forced-colors:active){
  html body #pfDeck .f2-bubble::before,html body #pfDeck :is(.f2-play,.f2-mute,.f2-yt-icon){background:Canvas!important;border-color:CanvasText!important;box-shadow:none!important}
}