/* ==================================================================
   MEGA-SCOPES :: MEGA-VISION
   A CRT television and an analog remote. Videos are posters until you
   press play: no YouTube iframe (and no YouTube cookie) is created
   until the visitor actually asks for one.
   ================================================================== */

.tvroom{display:grid;grid-template-columns:minmax(0,1fr) 210px;
  gap:clamp(20px,4vw,52px);align-items:start;
  max-width:1120px;margin:0 auto}

/* ---------------- the set ---------------- */
.tv{position:relative}
.tv-body{position:relative;border-radius:26px 26px 18px 18px;padding:26px 26px 0;
  background:
    linear-gradient(180deg,#2a2018 0%,#1d1610 42%,#171009 100%),
    repeating-linear-gradient(94deg,rgba(255,255,255,.028) 0 2px,transparent 2px 7px);
  box-shadow:0 34px 70px rgba(0,0,0,.72), inset 0 2px 0 rgba(255,255,255,.10),
             inset 0 -3px 0 rgba(0,0,0,.6);
  border:1px solid #0d0906}

/* the tube */
.screen{position:relative;border-radius:22px;padding:14px;background:#0b0b0d;
  box-shadow:inset 0 0 0 2px #060608, inset 0 6px 22px rgba(0,0,0,.9)}
.crt{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;
  background:#05070a;isolation:isolate;
  box-shadow:inset 0 0 70px rgba(0,0,0,.95)}
.crt .picture{position:absolute;inset:0;z-index:3;will-change:auto}
.crt img.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.92) contrast(1.06) brightness(.92)}
.crt .player{position:absolute;inset:0;z-index:4}
.crt .player iframe{width:100%;height:100%;border:0;display:block}

/* scanlines + phosphor + curvature */
.crt .scan{position:absolute;inset:0;z-index:5;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.34) 0 1px,transparent 1px 3px)}
.crt .glass{position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:16px;
  background:
    radial-gradient(ellipse 120% 100% at 50% 50%,transparent 52%,rgba(0,0,0,.62) 100%),
    radial-gradient(ellipse 60% 40% at 28% 16%,rgba(255,255,255,.10),transparent 60%);
  box-shadow:inset 0 0 44px rgba(0,0,0,.7)}
/* The canvas is drawn at a third of the screen's resolution, for speed. A
   <canvas> does NOT stretch from inset:0 alone: it keeps its pixel size, which
   left the static as a small square in the top-left corner. width/height 100%
   scales it across the whole tube, and pixelated keeps the grain crunchy
   instead of smearing it. */
.crt canvas.static{position:absolute;inset:0;width:100%;height:100%;z-index:7;
  pointer-events:none;opacity:0;transition:opacity .12s linear;mix-blend-mode:screen;
  image-rendering:pixelated;image-rendering:crisp-edges}
.crt.tuning canvas.static{opacity:.85}
.crt.off img.poster,.crt.off .player{opacity:0}
.crt.off{background:#040507}

/* the on-screen display */
.crt .osd{position:absolute;top:12px;right:14px;z-index:8;font-family:var(--mono);
  font-size:15px;letter-spacing:.18em;color:#9fffc4;
  text-shadow:0 0 10px rgba(46,230,168,.9);opacity:0;transition:opacity .3s}
.crt.osd-on .osd{opacity:1}
.crt .label{position:absolute;left:0;right:0;bottom:0;z-index:8;padding:34px 16px 14px;
  background:linear-gradient(transparent,rgba(0,0,0,.88));
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:#dfeaf2;
  transition:opacity .3s}
.crt.off .label,.crt.playing .label{opacity:0}

.playbtn{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:8;
  width:84px;height:84px;border-radius:50%;border:2px solid rgba(255,255,255,.7);
  background:rgba(5,7,10,.5);color:#fff;cursor:pointer;display:grid;place-items:center;
  transition:.2s;backdrop-filter:blur(2px)}
.playbtn:hover{background:rgba(34,211,238,.28);border-color:var(--cyan);transform:translate(-50%,-50%) scale(1.06)}
.playbtn svg{width:30px;height:30px;fill:#fff;margin-left:4px}
.crt.off .playbtn,.crt.playing .playbtn{display:none}

/* ---------------- the cabinet ---------------- */
.tv-controls{display:flex;align-items:center;gap:16px;padding:14px 4px 20px}
.badge{font-family:var(--disp);font-size:15px;letter-spacing:.22em;color:#c8b38a;
  text-shadow:0 1px 0 rgba(0,0,0,.8)}
.grille{flex:1;height:26px;border-radius:4px;
  background:repeating-linear-gradient(90deg,#120c07 0 3px,#241a11 3px 6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.knob{width:30px;height:30px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 34% 30%,#5b4830,#241a11 70%);
  box-shadow:0 2px 4px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.18);
  position:relative}
.knob::after{content:"";position:absolute;left:50%;top:5px;width:2px;height:9px;
  background:#c8b38a;translate:-50% 0;border-radius:1px}
.knob.small{width:22px;height:22px}
.pwr-led{width:9px;height:9px;border-radius:50%;flex:none;background:#3a1d1d;
  box-shadow:inset 0 0 3px #000}
.pwr-led.on{background:#ff4d4d;box-shadow:0 0 10px rgba(255,77,77,.9)}
.legs{height:16px;margin:0 30px;border-radius:0 0 12px 12px;
  background:linear-gradient(#150f08,#0a0705)}

/* ---------------- the remote ----------------
   A 1970s "space command" handset: walnut bakelite body, brushed aluminium
   faceplate with a transmitter grille, chunky cream keys you can feel
   bottom out, aluminium channel bars and a chrome-ringed red power button. */
.remote{position:sticky;top:96px;border-radius:26px 26px 34px 34px;padding:18px 16px 24px;
  background:
    repeating-linear-gradient(92deg,rgba(255,255,255,.025) 0 2px,transparent 2px 7px),
    linear-gradient(180deg,#5a3a22 0%,#3e2715 55%,#2c1b0e 100%);
  border:1px solid #1a0f07;
  box-shadow:0 26px 50px rgba(0,0,0,.65),inset 0 2px 0 rgba(255,220,170,.18),
             inset 0 -4px 8px rgba(0,0,0,.45),inset 3px 0 6px rgba(255,200,140,.06)}
/* brushed aluminium faceplate the keys sit in */
.remote::before{content:"";position:absolute;inset:44px 10px 12px;border-radius:12px 12px 22px 22px;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,rgba(0,0,0,.04) 1px 2px,transparent 2px 3px),
    linear-gradient(180deg,#cfcabd,#aca69a 60%,#948e82);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 4px rgba(0,0,0,.3),0 1px 0 rgba(255,220,170,.15)}
.remote>*{position:relative}
.remote .rtop{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:-4px 0 18px;padding:0 2px}
/* the ultrasonic transmitter grille at the nose */
.remote .rtop::before{content:"";position:absolute;left:50%;top:-10px;width:56px;height:8px;translate:-50% 0;
  border-radius:4px;background:repeating-linear-gradient(90deg,#140c05 0 3px,#6b4a2c 3px 5px);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.8)}
.remote .rbrand{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:700;font-size:15px;
  letter-spacing:.02em;color:#f1ddb0;text-shadow:0 1px 0 #1a0f07,0 0 8px rgba(255,200,120,.25)}
.remote .rbrand::after{content:"SPACE COMMAND";display:block;font-family:var(--mono);font-style:normal;
  font-weight:400;font-size:7px;letter-spacing:.3em;color:#c9a978;margin-top:1px}

.rbtn{position:relative;cursor:pointer;font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.06em;
  color:#3b2a18;padding:11px 0;border-radius:6px 6px 9px 9px;border:1px solid #6d5a3f;
  background:linear-gradient(180deg,#fbf3df 0%,#e6d9bb 60%,#cdbd9a 100%);
  box-shadow:0 4px 0 #8a7351,0 6px 8px rgba(0,0,0,.35),inset 0 1px 0 #fff;
  transition:transform .07s,box-shadow .07s,filter .15s}
.rbtn:hover{filter:brightness(1.05)}
.rbtn:active{transform:translateY(3px);box-shadow:0 1px 0 #8a7351,0 2px 3px rgba(0,0,0,.35),inset 0 1px 0 #fff}
.rbtn:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* aluminium channel bars */
.rnav{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 4px}
.rnav .rbtn{padding:14px 0;font-size:12px;color:#1d2126;border-color:#50555c;
  background:linear-gradient(180deg,#f4f5f6 0%,#c9cdd1 45%,#aab0b6 55%,#d7dade 100%);
  box-shadow:0 4px 0 #5d636a,0 6px 8px rgba(0,0,0,.35),inset 0 1px 0 #fff}
.rnav .rbtn:active{box-shadow:0 1px 0 #5d636a,0 2px 3px rgba(0,0,0,.35),inset 0 1px 0 #fff}
.rnav [data-tv="down"]::before{content:"\25BC  "}
.rnav [data-tv="up"]::after{content:"  \25B2"}

.rpad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px 8px}

/* power: red dome in a chrome ring */
.rbtn.pwr{width:44px;height:44px;border-radius:50%;padding:0;display:grid;place-items:center;color:#ffe3e3;
  border:3px solid #d9dcdf;background:radial-gradient(circle at 35% 30%,#ff6b6b,#b3141f 60%,#6e0a12);
  box-shadow:0 0 0 1px #6a6e73,0 3px 0 #4a0a10,0 5px 8px rgba(0,0,0,.45),inset 0 2px 3px rgba(255,255,255,.35)}
.rbtn.pwr:not(.on){background:radial-gradient(circle at 35% 30%,#8a4a4a,#4a1a1f 60%,#2a0c10);color:#c9a0a0}
.rbtn.pwr:active{transform:translateY(2px)}

/* long aluminium play bar */
.remote [data-tv="play"]{margin-top:2px;color:#1d2126;border-color:#50555c;
  background:linear-gradient(180deg,#f4f5f6 0%,#c9cdd1 45%,#aab0b6 55%,#d7dade 100%);
  box-shadow:0 4px 0 #5d636a,0 6px 8px rgba(0,0,0,.35),inset 0 1px 0 #fff}

.rlabel{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.24em;color:#4a3a26;
  text-transform:uppercase;margin:12px 0 7px;text-align:center;text-shadow:0 1px 0 rgba(255,255,255,.45)}
.remote .rlabel:first-of-type{margin-top:2px}

/* ---------------- channel list ---------------- */
.channels{margin-top:34px}
.chlist{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr))}
.chrow{display:flex;align-items:center;gap:12px;text-align:left;width:100%;
  background:var(--deep);border:1px solid var(--line);border-radius:8px;padding:10px 12px;
  color:inherit;font:inherit;cursor:pointer;transition:.16s}
.chrow:hover{border-color:var(--cyan);transform:translateY(-2px)}
.chrow[aria-current="true"]{border-color:var(--cyan);background:var(--panel)}
.chrow .n{font-family:var(--mono);font-size:11px;color:var(--cyan);flex:none;width:24px}
.chrow img{width:72px;aspect-ratio:16/9;object-fit:cover;border-radius:4px;flex:none}
.chrow .t{font-size:13px;line-height:1.3}
.chrow .t .d{display:block;font-family:var(--mono);font-size:10px;color:var(--dim);
  letter-spacing:.1em;margin-top:3px}
.chhead{grid-column:1/-1;font-family:var(--mono);font-size:10px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--cyan);margin:18px 0 2px;padding-top:12px;
  border-top:1px solid var(--line)}
.chhead:first-child{margin-top:0;padding-top:0;border-top:0}

@media(max-width:900px){
  .tvroom{grid-template-columns:1fr}
  .remote{position:relative;top:auto;max-width:280px;margin:0 auto}
}
@media (prefers-reduced-motion:reduce){
  .crt canvas.static{display:none}
}

/* ---- phones: the remote becomes a thumb strip right under the set, and the
   screen itself swipes between channels ---- */
.swipe-hint{display:none}
@media(max-width:760px){
  .tvroom{gap:12px}
  .remote{max-width:none;margin:0;display:grid;grid-template-columns:1fr 1.25fr 1fr 52px;gap:8px;
    padding:12px 12px 16px;border-radius:16px}
  .remote::before{inset:6px;border-radius:12px}
  .remote .rtop::before{display:none}
  .remote .rtop,.remote .rnav{display:contents}
  .remote .rbrand,.remote .rlabel,.remote .rpad{display:none}
  .remote [data-tv="down"]{order:1}
  .remote [data-tv="play"]{order:2;width:auto!important}
  .remote [data-tv="up"]{order:3}
  .remote .rbtn.pwr{order:4}
  .remote .rbtn{min-height:52px;font-size:13px}
  .swipe-hint{display:block;text-align:center;margin:10px 0 0;font-family:var(--mono);font-size:11px;
    letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
  .crt{touch-action:pan-y}
  .playbtn{width:62px;height:62px}
  .playbtn svg{width:24px;height:24px}
  .crt .label{font-size:11px;padding:22px 12px 9px;line-height:1.4}
  .rbtn.pwr{display:grid;place-items:center}
}

/* sound toggle, floats over the playing video */
.soundbtn{position:absolute;left:12px;top:12px;z-index:9;cursor:pointer;padding:8px 12px;border-radius:99px;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#fff;
  background:rgba(3,5,11,.72);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(3px)}
.soundbtn:hover{border-color:var(--cyan);color:var(--cyan)}
.soundbtn .s-on,.soundbtn[aria-pressed="true"] .s-off{display:none}
.soundbtn[aria-pressed="true"] .s-on{display:inline}
.soundbtn[aria-pressed="false"]{animation:soundPulse 2.4s ease-in-out infinite}
@keyframes soundPulse{50%{box-shadow:0 0 0 6px rgba(34,211,238,.25)}}
.soundbtn[hidden]{display:none}

/* ---------------- knobs, picture effects, channel window ---------------- */
.knobs{display:flex;align-items:flex-start;gap:12px;flex:none}
.kwrap{display:grid;justify-items:center;gap:5px;flex:none}
.klbl{font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:#a8946c;text-align:center;white-space:nowrap}
.knob[data-k]{width:34px;height:34px;cursor:grab;touch-action:none;transition:transform .06s linear}
.knob[data-k]:not(.small){width:40px;height:40px}
.knob[data-k]::after{top:4px;height:11px;background:#ffd98a}
.knob[data-k]:active{cursor:grabbing}
.knob[data-k]:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.tv-controls .grille{min-width:20px}
.crt .hbar{position:absolute;left:0;right:0;top:0;height:7%;z-index:4;pointer-events:none;opacity:0;
  background:linear-gradient(#000,#050505 40%,rgba(255,255,255,.08) 50%,#000)}

.chwin{display:flex;align-items:center;gap:7px;flex:0 1 240px;min-width:0;height:30px;padding:0 10px;border-radius:4px;
  background:#0b0703;box-shadow:inset 0 2px 5px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.05);
  font-family:var(--mono);color:#ffb347;text-shadow:0 0 8px rgba(255,150,40,.85)}
.ch-lbl{font-size:9px;letter-spacing:.2em;opacity:.8}
.ch-num{font-size:18px;font-weight:700;letter-spacing:.06em;min-width:2ch}
.ch-title{flex:1;min-width:0;overflow:hidden;white-space:nowrap;font-size:10px;letter-spacing:.08em;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ch-scroll{display:inline-block;padding-left:100%;animation:chMarquee 14s linear infinite}
@keyframes chMarquee{to{transform:translateX(-100%)}}
.chwin.flip .ch-num{animation:chFlip .35s steps(3)}
@keyframes chFlip{0%{opacity:.2}50%{opacity:1}75%{opacity:.4}100%{opacity:1}}
.crt.off ~ * .chwin,.tv.off .chwin{opacity:.25}

@media(max-width:1000px){
  .tv-controls{flex-wrap:wrap;row-gap:12px}
  .tv-controls .grille{display:none}
  .chwin{flex:1 1 200px}
  .knobs{flex:1 1 100%;justify-content:space-between}
}
@media(max-width:760px){
  .tv-controls{gap:10px;padding:12px 2px 16px}
  .tv-controls .badge{display:none}
  .knob[data-k]{width:42px;height:42px}
  .knob[data-k]:not(.small){width:46px;height:46px}
  .knobs{gap:4px}
}
@media (prefers-reduced-motion:reduce){ .ch-scroll{animation:none;padding-left:0} }

/* VHS tracking bands for the WARBLE knob. backdrop-filter smears and shifts
   whatever is underneath, including the live YouTube frame, and works in
   Safari (-webkit-) where SVG filters on embedded video do not. */
.crt .wband{position:absolute;left:-4%;right:-4%;height:9%;z-index:5;pointer-events:none;opacity:0;
  -webkit-backdrop-filter:blur(2px) saturate(2.2) hue-rotate(25deg) brightness(1.25);
  backdrop-filter:blur(2px) saturate(2.2) hue-rotate(25deg) brightness(1.25);
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.07) 45%,rgba(255,0,120,.08) 55%,transparent);
  will-change:transform}
.crt .wband.b2{height:4%;-webkit-backdrop-filter:blur(1px) invert(.15) saturate(1.6);backdrop-filter:blur(1px) invert(.15) saturate(1.6)}

/* ---------------- phones: bigger picture, calmer controls ---------------- */
@media(max-width:760px){
  /* thinner bezels and a widescreen tube so videos fill the glass */
  .tv-body{padding:12px 12px 0;border-radius:18px 18px 14px 14px}
  .screen{padding:7px;border-radius:14px}
  .crt{aspect-ratio:16/9;border-radius:10px}
  .crt .glass{border-radius:10px}
  .crt .label{padding:14px 10px 7px;font-size:10.5px}
  .crt .osd{top:6px;right:8px;font-size:12px}
  .playbtn{width:58px;height:58px}
  .legs{margin:0 22px;height:10px}
  /* channel window: full-width strip, title truncated instead of scrolling */
  .chwin{flex:1 1 100%;height:34px}
  .ch-scroll{animation:none;padding-left:0;display:block;overflow:hidden;text-overflow:ellipsis}
  .ch-title{mask-image:none;-webkit-mask-image:none}
  .pwr-led{display:none}
  /* knobs: identical size, evenly spaced, labels on one baseline */
  .knobs{display:grid;grid-template-columns:repeat(5,1fr);gap:0;width:100%}
  .kwrap{grid-template-rows:48px auto;align-items:center}
  .knob[data-k],.knob[data-k]:not(.small){width:44px;height:44px}
  .klbl{font-size:8.5px;letter-spacing:.08em}
  .tv-controls{padding:10px 4px 12px;row-gap:10px}
  .swipe-hint{margin:8px 0 0;font-size:10px}
  .tv.has-played .swipe-hint{visibility:hidden}
}

/* an unmute blocked by the browser: pulse the picture so the viewer taps the player itself */
.crt.unmute-hint::after{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 3px var(--cyan),inset 0 0 40px rgba(34,211,238,.45);animation:soundPulse 1s ease-in-out 4}
.soundbtn.blocked{border-color:var(--cyan);color:var(--cyan)}
@media(max-width:760px){ .soundbtn{left:8px;top:8px;padding:7px 10px;font-size:10px} }

/* station ident: the animated logo plays on the tube before the first channel */
.crt video.ident{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;z-index:1;display:block}
.crt.identing .playbtn{display:none}
.crt.identing .label{opacity:0}
.crt.identing img.poster{opacity:0}