/* ======================================================================
   Videos v2 (Oct 2026): the picture fills the tube.
   - Widescreen 16:9 tube, so YouTube's 16:9 picture fills it edge to edge
     with no letterbox bars; the monitor gets wider to suit.
   - No colour filter on the iframe: a CSS filter over a playing video makes
     the browser re-composite every frame, which is what felt sluggish.
   - Full screen (key on the monitor, double-click, or F).
   - Drawn SVG key icons: the old ❚❚ and ■ glyphs fell back to the same
     block in some fonts, so PAUSE and STOP looked identical.
   ====================================================================== */
.vroom{max-width:1240px}
.tv__shell{grid-template-columns:minmax(0,1fr) 128px;gap:16px;padding:18px 18px 20px}
.tv__bezel{padding:12px;border-radius:22px/26px}
.tv__screen{aspect-ratio:16/9;border-radius:5% / 8.5%}
.tv__player{transition:opacity .12s linear}
.tv__player iframe{filter:none}
.tv__glass{background:
    repeating-linear-gradient(180deg,rgba(0,0,0,.12) 0 1px,transparent 1px 3px),
    radial-gradient(130% 110% at 50% 50%,transparent 66%,rgba(0,0,0,.45) 100%),
    linear-gradient(115deg,rgba(255,255,255,.07) 0 10%,transparent 30%)}

/* click layer over the picture: click = pause/play (or sound on), double-click = full screen */
.tv__hit{position:absolute;inset:0;z-index:4;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tv:not(.has-tape) .tv__hit{cursor:default}

/* full screen: the real API where there is one, a fixed overlay where not (iPhone) */
.tv__screen:fullscreen{aspect-ratio:auto;width:100vw;height:100vh;border-radius:0;box-shadow:none;background:#000}
.tv__screen:-webkit-full-screen{aspect-ratio:auto;width:100vw;height:100vh;border-radius:0;box-shadow:none;background:#000}
.tv__screen.is-max{position:fixed;inset:0;z-index:2000;aspect-ratio:auto;width:100vw;height:100vh;height:100dvh;border-radius:0;box-shadow:none;background:#000}
.tv__screen:fullscreen .tv__glass,.tv__screen.is-max .tv__glass{opacity:.5}
html.vroom-max,html.vroom-max body{overflow:hidden}

/* side panel keys */
.tv__side{gap:10px}
.tv__input.btn{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:6px;height:36px;min-height:36px;font-size:.54rem}
.tv__sound[aria-pressed=false]{color:#b0362a}
.tv__sound[aria-pressed=false]::before{content:"";width:6px;height:6px;border-radius:50%;background:#e2483a;box-shadow:0 0 6px #e2483a}

/* VCR keys: drawn icons, and a muted look instead of disabled (so they still click) */
.vcr__icon{display:block;width:13px;height:13px;fill:currentColor}
.tv__input .vcr__icon{width:11px;height:11px}
.vcr__key[aria-disabled=true]{opacity:.55;cursor:default}
.vcr__key.btn{gap:5px}

@media (max-width:760px){
  .tv__shell{grid-template-columns:minmax(0,1fr);padding:10px 10px 12px;gap:10px;border-radius:18px 18px 14px 14px}
  .tv__bezel{padding:7px;border-radius:14px/16px}
  .tv__side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"mark chan" "full sound" "model power";align-items:center;gap:8px 10px;padding:0}
  .tv__engrave{grid-area:mark;height:26px}
  .tv__channel{grid-area:chan;justify-self:end}
  .tv__full{grid-area:full}
  .tv__sound{grid-area:sound}
  .tv__model{grid-area:model;margin:0}
  .tv__power{grid-area:power;justify-content:flex-end}
  .tv__grille{display:none}
}

/* quicker tape in/out (playback never waits on these) */
.vcr__loaded.is-inserting{animation-duration:.55s}
.vcr__loaded.is-ejecting{animation-duration:.45s}

/* the tape in the deck: its spine sits in the slot, label out */
.vcr__slot.has-tape .vcr__flap::after{display:none}
.vcr__spine{position:absolute;left:4%;right:4%;top:13%;bottom:13%;z-index:2;padding:4px 5px;border-radius:3px;
  background:linear-gradient(180deg,#232321,#111110 55%,#1b1b19);
  box-shadow:0 2px 5px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.12);
  opacity:0;transform:translateY(-35%) scaleY(.85);transition:opacity .18s ease,transform .25s cubic-bezier(.3,.7,.2,1);pointer-events:none}
.vcr__spine.is-in{opacity:1;transform:none}
.vcr__spine-label{display:flex;align-items:stretch;gap:7px;height:100%;padding:3px 6px 3px 3px;border-radius:2px;
  background:linear-gradient(180deg,#fbfaf5,#ecebe4);border-left:4px solid #b0362a;overflow:hidden}
.vcr__spine-thumb{flex:0 0 auto;aspect-ratio:16/9;height:100%;background:#111 center/cover no-repeat}
.vcr__spine-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px;color:#1d1b17}
.vcr__spine-title{font:800 .62rem/1.1 Helvetica Neue,Arial,sans-serif;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vcr__spine-artist{font:600 .54rem/1.1 Helvetica Neue,Arial,sans-serif;color:#6b665b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vcr__spine-brand{flex:0 0 52px;height:auto;opacity:.75}
.vcr__spine-brand::after{background:rgba(255,255,255,.6)}
.vcr__spine-brand::before{background:linear-gradient(170deg,#3a3936,#5b5a55)}
@media (max-width:760px){.vcr__spine-brand{display:none}}
@media (prefers-reduced-motion:reduce){.vcr__spine{transition:none}}

/* full screen: a control bar with a clear way back out */
.tv__fsbar{display:none}
.tv__screen.is-full .tv__fsbar{
  position:absolute;left:0;right:0;bottom:0;z-index:9;display:flex;align-items:center;gap:10px;
  padding:16px max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
  background:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,.35) 70%,transparent);
  opacity:1;transition:opacity .25s ease}
.tv__screen.is-full.is-idle .tv__fsbar{opacity:0;pointer-events:none}
.tv__screen.is-full.is-idle .tv__hit{cursor:none}
.tv__fstitle{flex:1 1 auto;min-width:0;color:#f2fff0;font:700 .8rem/1.2 ui-monospace,Menlo,monospace;letter-spacing:.08em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px #000}
.tv__fsbtn{flex:none;appearance:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-width:48px;height:44px;padding:0 12px;border:1px solid rgba(255,255,255,.35);border-radius:6px;
  background:rgba(20,20,18,.7);color:#f2fff0;font:700 .62rem/1 Helvetica Neue,Arial,sans-serif;letter-spacing:.12em}
.tv__fsbtn:hover{background:rgba(60,60,55,.85)}
.tv__fsbtn:focus-visible{outline:2px solid #7ff5dc;outline-offset:2px}
.tv__fsbtn .vcr__icon{width:16px;height:16px}
.tv__fsbtn--exit{background:#f2f2ee;color:#1d1b17;border-color:#fff}
.tv__fsbtn--exit:hover{background:#fff}
.tv__fs-pause{display:none}
.tv__screen.is-playing .tv__fs-play{display:none}
.tv__screen.is-playing .tv__fs-pause{display:inline}
@media (max-width:600px){.tv__fstitle{display:none}.tv__fsbtn--exit{margin-left:auto}.tv__fsbtn{padding:0 10px}}