/* The corner TV (17 Oct 2026, Ruben: "a small tv saying coming soon, they click on it, it expands with the promo"; then "angle it a bit
   so it's partly showing", "comes up all of a sudden", and the player "looks cheap ... make it full"). The product pages' Game Boy, small,
   tilted and tucked into the bottom-left corner, gliding in slowly; it lifts out on hover. A comic "NEW!" bubble beside it. A click opens
   a full-screen player: the video as big as it fits, the vertical cut on phones held upright, minimal controls. soontv.js builds it. */
.stv{position:fixed;left:-22px;bottom:-34px;z-index:90;transform-origin:0 100%;transform:translate(-30px,120%) rotate(22deg);opacity:0;pointer-events:none;
  transition:transform 1.1s cubic-bezier(.16,.9,.24,1),opacity .6s ease}
.stv.on{transform:translate(0,0) rotate(11deg);opacity:1;pointer-events:auto}
.stv.on:hover,.stv.on:focus-within{transform:translate(26px,-30px) rotate(5deg);transition-duration:.45s}
.stv-tv{display:block;width:150px;margin:0;padding:10px 10px 40px;border:0;border-radius:10px 10px 30px 10px;cursor:pointer;text-align:left;
  background:linear-gradient(165deg,#c4bebb,#a9a4a1);box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -4px 0 rgba(0,0,0,.18),0 16px 34px rgba(0,0,0,.55)}
.stv-bezel{position:relative;display:block;padding:9px 9px 8px 13px;border-radius:5px 5px 16px 5px;background:linear-gradient(180deg,#605f78,#4a4961);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.stv-led{position:absolute;left:4px;top:calc(50% - 2.5px);width:5px;height:5px;border-radius:50%;background:#ff3b3b;box-shadow:0 0 6px 1px rgba(255,59,59,.7)}
.stv-screen{position:relative;display:block;aspect-ratio:10/9;overflow:hidden;border-radius:3px;background:#d9e2b8;box-shadow:inset 0 0 0 2px rgba(0,0,0,.35)}
.stv-screen video,.stv-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.stv-play{position:absolute;right:5px;bottom:5px;width:22px;height:22px;border-radius:50%;background:rgba(13,18,48,.82);box-shadow:0 0 0 1.5px rgba(255,255,255,.75)}
.stv-play::after{content:"";position:absolute;left:8.5px;top:6px;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent #fff}
/* a hint of the Game Boy's buttons on the part that tucks under the edge */
.stv-pad{position:absolute;left:18px;bottom:12px;width:22px;height:22px;background:linear-gradient(#2b2a38,#2b2a38) center/22px 7px no-repeat,linear-gradient(#2b2a38,#2b2a38) center/7px 22px no-repeat}
.stv-ab{position:absolute;right:16px;bottom:13px;width:12px;height:12px;border-radius:50%;background:#9a2257;box-shadow:-17px 6px 0 #9a2257}
.stv-x{position:absolute;top:-10px;right:-10px;width:28px;height:28px;padding:0;border-radius:50%;border:2px solid rgba(255,255,255,.8);background:#0d1230;color:#fff;
  font:700 16px/1 system-ui,sans-serif;cursor:pointer;display:grid;place-items:center;transform:rotate(-11deg)}
.stv-x::after{content:"";position:absolute;inset:-8px}
/* the comic bubble, kept level against the tilt */
.stv-bub{position:absolute;left:calc(100% + 10px);top:22px;padding:8px 13px 7px;background:#fff;border:3px solid #05070f;border-radius:16px;box-shadow:4px 4px 0 #f9533c;
  transform:rotate(-17deg);transform-origin:0 50%;font:900 26px/1 Archivo,var(--display,sans-serif);font-stretch:75%;letter-spacing:.02em;color:#0d1230;white-space:nowrap;pointer-events:none;opacity:0}
.stv-bub b{color:#f9533c}
.stv-bub::before{content:"";position:absolute;left:-17px;top:calc(50% - 10px);border-style:solid;border-width:10px 17px 10px 0;border-color:transparent #05070f transparent transparent}
.stv-bub::after{content:"";position:absolute;left:-11px;top:calc(50% - 6px);border-style:solid;border-width:6px 11px 6px 0;border-color:transparent #fff transparent transparent}
.stv.on .stv-bub{animation:stv-pop .55s cubic-bezier(.3,1.6,.5,1) 1s both}
@keyframes stv-pop{from{transform:rotate(-17deg) scale(.3);opacity:0}to{transform:rotate(-17deg) scale(1);opacity:1}}
.stv-tv:focus-visible,.stv-x:focus-visible,.stv-dlg button:focus-visible,.stv-dlg a:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* the player: the whole screen, the video as large as it fits */
.stv-dlg{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#04060d;color:#f8f8f8;overflow:hidden}
.stv-dlg::backdrop{background:#04060d}
.stv-stage{position:absolute;inset:0;display:grid;place-items:center;padding:84px 40px 76px}
.stv-frame{position:relative;width:100%;height:100%;display:grid;place-items:center;min-height:0}
.stv-frame video{display:block;max-width:100%;max-height:100%;width:auto;height:auto;border-radius:6px;background:#000;box-shadow:0 30px 90px rgba(0,0,0,.6);cursor:pointer}
.stv-top{position:absolute;left:0;right:0;top:0;height:84px;display:flex;align-items:center;gap:30px;padding:0 28px 0 40px;z-index:2}
.stv-top h2{margin:0;font:700 14px/1 "Inter Tight",var(--body,sans-serif);letter-spacing:.18em;color:#aeb8d8;text-transform:uppercase}
.stv-tabs{display:flex;gap:26px}
.stv-tabs button{padding:6px 0 7px;border:0;border-bottom:4px solid transparent;background:none;color:rgba(248,248,248,.45);
  font:900 34px/1 Archivo,var(--display,sans-serif);font-stretch:62.5%;letter-spacing:.02em;text-transform:uppercase;cursor:pointer;transition:color .2s}
.stv-tabs button:hover{color:rgba(248,248,248,.8)}
.stv-tabs button[aria-selected="true"]{color:#fff;border-bottom-color:#f9533c}
.stv-close{margin-left:auto;width:48px;height:48px;padding:0;border-radius:50%;border:2px solid rgba(255,255,255,.7);background:rgba(4,6,13,.4);color:#fff;font:500 26px/1 system-ui,sans-serif;cursor:pointer}
.stv-bar{position:absolute;left:0;right:0;bottom:0;height:76px;display:flex;align-items:center;gap:18px;padding:0 40px;z-index:2}
.stv-pp,.stv-mute{flex:none;height:44px;min-width:44px;padding:0 14px;border-radius:22px;border:2px solid rgba(255,255,255,.55);background:none;color:#fff;
  font:700 16px/1 "Inter Tight",var(--body,sans-serif);letter-spacing:.06em;cursor:pointer}
.stv-prog{flex:1 1 auto;height:6px;border-radius:3px;background:rgba(255,255,255,.2);cursor:pointer;position:relative}
.stv-prog i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:#f9533c;width:0}
.stv-ft{flex:none;margin:0;font:600 16px/1.3 "Inter Tight",var(--body,sans-serif);color:#aeb8d8;white-space:nowrap}
.stv-ft a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.stv-dlg video::cue{font:600 20px/1.3 "Inter Tight",sans-serif;background:rgba(4,6,13,.75)}
@media (max-width:900px){.stv-ft{display:none}}
@media (max-width:700px){
  .stv{left:-20px;bottom:-30px}
  .stv-tv{width:106px;padding:7px 7px 30px;border-radius:8px 8px 22px 8px}
  .stv-bezel{padding:6px 6px 5px 10px;border-radius:4px 4px 12px 4px}
  .stv-pad{left:12px;bottom:8px;transform:scale(.72);transform-origin:0 100%}.stv-ab{right:11px;bottom:9px;transform:scale(.72)}
  .stv-play{width:18px;height:18px;right:4px;bottom:4px}.stv-play::after{left:7px;top:4.5px;border-width:4.5px 0 4.5px 7px}
  .stv-bub{font-size:20px;top:14px;padding:6px 10px 5px;border-radius:13px}
  .stv-stage{padding:64px 0 64px}
  .stv-frame video{border-radius:0}
  .stv-top{height:64px;gap:16px;padding:0 12px 0 16px}.stv-top h2{display:none}
  .stv-tabs{gap:16px}.stv-tabs button{font-size:24px;white-space:nowrap}
  .stv-close{width:44px;height:44px}
  .stv-bar{height:64px;padding:0 16px;gap:12px}
}
@media (prefers-reduced-motion:reduce){.stv,.stv.on:hover{transition:none}.stv.on .stv-bub{animation:none;opacity:1}}