/* ============================================================
   BALLSY RETRO TV CAST CARDS — drop-in, additive.
   1) Link this file in <head>:  <link rel="stylesheet" href="retro-tv.css">
   2) Drop a TV set inside any .card (photo lives in img/):
      <div class="tv tv-gold">
        <div class="tv-aerial" aria-hidden="true"></div>
        <div class="tv-body">
          <div class="tv-screen">
            <img src="img/david.jpg" alt="David"
                 onerror="this.closest('.tv-screen').classList.add('no-signal')">
            <div class="tv-testcard" aria-hidden="true"><span>🏆</span><b>NO SIGNAL</b></div>
            <div class="tv-glass" aria-hidden="true"></div>
          </div>
          <div class="tv-panel">
            <span class="tv-ch">CH 01</span>
            <span class="tv-knob"></span><span class="tv-knob"></span>
            <span class="tv-led"></span>
          </div>
        </div>
      </div>
   Colours: tv-gold / tv-purple / tv-pink / tv-cyan / tv-green
   If the photo is missing, the set shows colour bars. Fabulous either way.
   ============================================================ */
.tv{
  --tvc:#FFE600;
  position:relative;
  margin:6px auto 26px;
  max-width:320px;
}
.tv-purple{--tvc:#9B30FF}
.tv-pink{--tvc:#FF2D8F}
.tv-cyan{--tvc:#00E5FF}
.tv-green{--tvc:#00D97E}

/* rabbit ears */
.tv-aerial{
  position:relative;
  height:30px;
  margin:0 auto 0;
  width:0;
}
.tv-aerial::before,
.tv-aerial::after{
  content:"";
  position:absolute;
  bottom:-2px;left:0;
  width:2.5px;height:36px;
  background:linear-gradient(to top,var(--tvc),transparent 92%);
  border-radius:2px;
  transform-origin:bottom center;
}
.tv-aerial::before{transform:rotate(-32deg)}
.tv-aerial::after{transform:rotate(30deg)}

/* the set */
.tv-body{
  border:2.5px solid var(--tvc);
  border-radius:22px;
  background:
    linear-gradient(160deg,
      color-mix(in srgb,var(--tvc) 16%,#111) 0%,
      #0c0c0c 55%,
      color-mix(in srgb,var(--tvc) 8%,#0a0a0a) 100%);
  padding:14px 14px 10px;
  box-shadow:
    0 10px 34px rgba(0,0,0,.55),
    0 0 26px color-mix(in srgb,var(--tvc) 22%,transparent),
    inset 0 1px 0 color-mix(in srgb,var(--tvc) 35%,transparent);
  transition:transform .25s ease, box-shadow .25s ease;
}
.tv:hover .tv-body{
  transform:translateY(-3px) rotate(-.6deg);
  box-shadow:
    0 16px 44px rgba(0,0,0,.6),
    0 0 44px color-mix(in srgb,var(--tvc) 40%,transparent),
    inset 0 1px 0 color-mix(in srgb,var(--tvc) 45%,transparent);
}

/* CRT screen */
.tv-screen{
  position:relative;
  aspect-ratio:4/3;
  border-radius:16px / 20px;
  overflow:hidden;
  background:#000;
  border:2px solid #000;
  box-shadow:inset 0 0 34px rgba(0,0,0,.85);
}
.tv-screen img{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
  filter:saturate(1.08) contrast(1.05);
}
.tv-screen.no-signal img{display:none}

/* test card fallback — colour bars in house palette */
.tv-testcard{
  position:absolute;inset:0;
  display:none;
  background:linear-gradient(90deg,
    #FFE600 0 20%,
    #00E5FF 20% 40%,
    #00D97E 40% 60%,
    #FF2D8F 60% 80%,
    #9B30FF 80% 100%);
  place-items:center;
}
.tv-screen.no-signal .tv-testcard{display:grid}
.tv-testcard span{
  font-size:3.4rem;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.6));
  grid-area:1/1;
  transform:translateY(-14px);
}
.tv-testcard b{
  grid-area:1/1;
  align-self:end;
  justify-self:center;
  margin-bottom:12px;
  font-family:'JetBrains Mono',monospace;
  font-size:.62rem;font-weight:700;
  letter-spacing:.22em;
  color:#fff;background:#0a0a0a;
  padding:4px 12px;border-radius:999px;
}

/* CRT glass: scanlines + curvature vignette + flicker */
.tv-glass{
  position:absolute;inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(to bottom,
      rgba(0,0,0,.14) 0 1.5px,
      transparent 1.5px 4px),
    radial-gradient(ellipse at center,
      transparent 58%,
      rgba(0,0,0,.42) 100%);
  animation:crtFlicker 4s steps(60) infinite;
}
@keyframes crtFlicker{
  0%,100%{opacity:1}
  92%{opacity:1}
  93%{opacity:.86}
  94%{opacity:1}
  97%{opacity:.92}
}

/* control panel */
.tv-panel{
  display:flex;align-items:center;gap:10px;
  padding:10px 6px 2px;
}
.tv-ch{
  font-family:'JetBrains Mono',monospace;
  font-size:.62rem;font-weight:700;
  letter-spacing:.18em;
  color:var(--tvc);
  margin-right:auto;
}
.tv-knob{
  width:15px;height:15px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#3a3a3a,#101010 70%);
  border:1.5px solid color-mix(in srgb,var(--tvc) 55%,#333);
  position:relative;
  transition:transform .3s ease;
}
.tv-knob::after{
  content:"";position:absolute;
  top:1.5px;left:50%;width:1.5px;height:5px;
  margin-left:-.75px;background:var(--tvc);border-radius:1px;
}
.tv:hover .tv-knob{transform:rotate(120deg)}
.tv:hover .tv-knob + .tv-knob{transform:rotate(-95deg)}
.tv-led{
  width:7px;height:7px;border-radius:50%;
  background:var(--tvc);
  box-shadow:0 0 10px var(--tvc);
  animation:tvLed 1.6s steps(2,start) infinite;
}
@keyframes tvLed{50%{opacity:.25}}

@media (prefers-reduced-motion:reduce){
  .tv-glass,.tv-led{animation:none}
  .tv:hover .tv-body,.tv:hover .tv-knob,.tv:hover .tv-knob + .tv-knob{transform:none}
}

.tv-video-screen{position:relative;overflow:hidden;background:#050308}.tv-video-screen video{display:block;width:100%;height:100%;object-fit:cover}.tv-volume{position:absolute;right:10px;bottom:10px;z-index:9;border:2px solid #fff;background:rgba(5,3,8,.88);color:#fff;border-radius:999px;padding:9px 13px;font-weight:900;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.5)}