/* Apollo Live Player — tokens from core.js only. Chrome over video uses the DS glass (.glass-frosted)
   and the always-dark ink (--sb-ink-rgb), so it never flips with the theme. */
.amp{--amp-crop:1.4;--amp-fg:255,255,255;position:relative;width:100%;aspect-ratio:16/9;-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-touch-callout:none}
.amp .amp-card{position:absolute;inset:0;overflow:hidden;border-radius:var(--r);background:rgb(var(--sb-ink-rgb));box-shadow:var(--img-frame);container-type:size;isolation:isolate}
.amp .amp-stage{position:absolute;inset:0}

/* iframe = 16:9 "cover" of the card, scaled by --amp-crop so YouTube's title, logo and bar fall outside */
.amp .amp-stage iframe{position:absolute;left:50%;top:50%;translate:-50% -50%;border:0;pointer-events:none;
  width:calc(max(100cqw,177.778cqh)*var(--amp-crop));height:calc(max(100cqw,177.778cqh)*var(--amp-crop)*.5625)}
@supports not (width:1cqw){.amp .amp-stage iframe{width:calc(100%*var(--amp-crop));height:calc(100%*var(--amp-crop))}}

.amp .amp-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:auto;scale:var(--amp-crop);opacity:0;pointer-events:none;transition:opacity .5s var(--ease) .4s}
.amp .amp-poster.is-on{opacity:1;transition-delay:0s}
.amp .amp-hit{position:absolute;inset:0;cursor:pointer;outline:none}
.amp .amp-status{position:absolute;left:14px;bottom:14px;color:rgb(var(--amp-fg));font-size:var(--fs-p2);opacity:0;pointer-events:none;text-shadow:0 1px 8px rgba(var(--sb-ink-rgb),.6)}
.amp .amp-status:not(:empty){opacity:.9}

/* controls layer: hidden = invisible AND untouchable (taps fall through to .amp-hit) */
.amp .amp-ui{position:absolute;inset:0;pointer-events:none;transition:opacity .35s var(--ease),visibility 0s}
.amp .amp-ui.is-off{opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s .45s}
.amp .amp-ui button,.amp .amp-menu{pointer-events:auto}

/* DS glass: .glass-frosted is added in markup; knobs below */
.amp .amp-btn,.amp .amp-menu{--gl-tint:.45;color:rgb(var(--amp-fg))}
.amp .amp-btn{display:grid;place-items:center;border-radius:50%;transition:scale .25s var(--ease)}
.amp .amp-btn:hover{--gl-tint:.65}
.amp .amp-btn:active{scale:.94}
.amp .amp-btn:focus-visible{box-shadow:0 0 0 2px rgba(var(--amp-fg),.9)}
.amp .amp-i{display:grid;place-items:center}

/* PLAY ⇄ STOP morph (shapes swap with scale + rotation) */
.amp .amp-main{position:absolute;left:50%;top:50%;translate:-50% -50%;width:76px;height:76px}
.amp .amp-main svg{width:30px;height:30px;overflow:visible}
.amp .amp-main svg *{stroke:none!important}
.amp .amp-main :is(.p,.s){transform-box:fill-box;transform-origin:center;transition:transform .45s var(--ease),opacity .3s}
.amp .amp-main[data-state=playing] .p,.amp .amp-main[data-state=stopped] .s{opacity:0;transform:scale(.4) rotate(-90deg)}

.amp .amp-dock{position:absolute;right:12px;bottom:12px;display:flex;gap:var(--s-2)}
.amp .amp-dock .amp-btn{width:44px;height:44px;font-size:20px}

/* cast menu: drops DOWN under the card; flips to drop-UP in fullscreen */
.amp .amp-menu{--gl-tint:.6;position:absolute;right:12px;top:calc(100% + var(--s-2));width:min(280px,calc(100vw - 24px));padding:6px;list-style:none;
  border-radius:var(--r-sm);font-size:var(--fs-p2)}
.amp .amp-menu[hidden]{display:none}
.amp .amp-menu li{padding:12px;border-radius:var(--r-xs)}
.amp .amp-menu li[data-a]{cursor:pointer}
.amp .amp-menu li[data-a]:hover{background:rgba(var(--amp-fg),.1)}
.amp .amp-menu .dim{opacity:.6}
.amp .amp-menu .hd{padding:8px 12px 4px;opacity:.55;font-size:var(--fs-p3);text-transform:uppercase;letter-spacing:.06em}
.amp .amp-menu .nm{color:rgb(var(--amp-fg))}

/* fullscreen: real (:fullscreen) or pseudo (.is-pfs, iPhone) */
.amp.is-fs{width:100%;height:100%;aspect-ratio:auto;background:rgb(var(--sb-ink-rgb))}
.amp.is-fs .amp-card{border-radius:0;box-shadow:none}
.amp.is-pfs{position:fixed;inset:0;z-index:var(--z-modal);height:100dvh}
.amp.is-fs .amp-dock{right:max(16px,var(--safe-right));bottom:max(16px,var(--safe-bottom))}
.amp.is-fs .amp-menu{top:auto;right:max(16px,var(--safe-right));bottom:calc(68px + var(--safe-bottom))}
body.amp-lock{overflow:hidden}
