/* ═══════════════════════════════════════════════════════════════════════════
   BEATS-O-VISION  ✦  player-video-bot.css  v10
   Desktop: full animations | Mobile: GPU-isolated, no UI shake, no jank
   FIXED: Mobile logo/nav shake (will-change isolation)
   FIXED: Audio progress bar re-render jank on mobile
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=VT323&family=Bebas+Neue&family=Share+Tech+Mono&display=swap');

:root {
  --bezel:       #c8b896;
  --bezel-hi:    #ddd0b4;
  --bezel-lo:    #a08860;
  --bezel-dark:  #3a2410;
  --wood:        #7a5c38;
  --wood-dk:     #4a3018;
  --phosphor:    #39ff7a;
  --amber:       #ffb830;
  --led-red:     #ff2828;
  --knob-def:    radial-gradient(circle at 34% 28%, #a09070, #5a4a30 52%, #2a1a08);
  --knob-red:    radial-gradient(circle at 34% 28%, #d03030, #8a1010 52%, #420000);
  --knob-green:  radial-gradient(circle at 34% 28%, #3aaa58, #1a6030 52%, #083018);
  --knob-blue:   radial-gradient(circle at 34% 28%, #3050d0, #101888 52%, #000440);
  --knob-amber:  radial-gradient(circle at 34% 28%, #d09922, #886600 52%, #442200);
}

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.bvp-scene {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: 56px 0 0;
  box-sizing: border-box;
  position: relative;
  user-select: none;
  /* FIX: Isolate this entire component into its own GPU layer.
     This prevents the TV boot animation from causing the nav/logo
     outside this component to shake/repaint on mobile. */
  isolation: isolate;
  transform: translateZ(0);
  will-change: transform;
}

/* ── TV body ─────────────────────────────────────────────────────────────── */
.bvp-tv {
  width: 100%;
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 30% 16%, var(--bezel-hi) 0%, var(--bezel) 50%, var(--bezel-lo) 100%);
  border: 3px solid var(--bezel-dark);
  box-shadow:
    0  2px 0  rgba(255,255,255,0.32) inset,
    0 -3px 0  rgba(0,0,0,0.22) inset,
    4px 0  0  rgba(255,255,255,0.14) inset,
   -4px 0  0  rgba(0,0,0,0.12) inset,
    0 18px 60px rgba(0,0,0,0.72),
    0  6px 16px rgba(0,0,0,0.44);
  padding: 14px 14px 18px;
  box-sizing: border-box;
  position: relative;
  /* FIX: Own GPU layer — animation stays contained, does not affect siblings */
  will-change: transform, opacity, filter;
  transform: translateZ(0);
  animation: tvBoot 0.8s cubic-bezier(0.19,1,0.22,1) both;
}
.bvp-tv::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: repeating-linear-gradient(
    128deg,
    transparent 0px, transparent 2px,
    rgba(255,255,255,0.016) 2px, rgba(255,255,255,0.016) 4px
  );
}
@keyframes tvBoot {
  0%   { opacity:0; transform:scaleX(0.06) scaleY(0.04) translateZ(0); filter:brightness(8); }
  18%  { opacity:1; transform:scaleX(1.01) scaleY(0.88) translateZ(0); filter:brightness(3) saturate(0); }
  50%  { transform:scaleX(1) scaleY(1.01) translateZ(0); filter:brightness(1.6) saturate(0.2); }
  78%  { filter:brightness(1.2); }
  100% { opacity:1; transform:scale(1) translateZ(0); filter:brightness(1); }
}

/* ── Antennas ────────────────────────────────────────────────────────────── */
.bvp-antenna-wrap {
  position: absolute; top: -58px; left: 0; right: 0;
  display: flex; justify-content: space-between;
  padding: 0 22%; pointer-events: none;
}
.bvp-antenna {
  width: 5px; height: 56px;
  background: linear-gradient(180deg,#d0d0d0 0%,#707070 60%,#a0a0a0 100%);
  border-radius: 3px 3px 2px 2px;
  transform-origin: bottom center;
  box-shadow: 1px 0 3px rgba(0,0,0,0.4);
  position: relative;
  will-change: transform;
}
.bvp-antenna::after {
  content: '';
  position: absolute; top:-8px; left:50%; transform:translateX(-50%);
  width:12px; height:12px; border-radius:50%;
  background: radial-gradient(circle at 34% 28%,#d8d8d8,#606060);
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}
.bvp-antenna--left  { transform:rotate(-22deg); animation:antL 5s ease-in-out infinite; }
.bvp-antenna--right { transform:rotate(22deg);  animation:antR 5.8s ease-in-out infinite; }
@keyframes antL { 0%,100%{transform:rotate(-22deg)} 50%{transform:rotate(-26deg)} }
@keyframes antR { 0%,100%{transform:rotate(22deg)}  50%{transform:rotate(26deg)} }
.bvp-antenna--wigL { animation:wigL 0.72s ease forwards !important; }
.bvp-antenna--wigR { animation:wigR 0.72s ease forwards !important; }
@keyframes wigL { 0%{transform:rotate(-22deg)} 18%{transform:rotate(-54deg)} 42%{transform:rotate(-4deg)} 64%{transform:rotate(-38deg)} 100%{transform:rotate(-22deg)} }
@keyframes wigR { 0%{transform:rotate(22deg)}  18%{transform:rotate(58deg)}  42%{transform:rotate(6deg)}  64%{transform:rotate(42deg)}  100%{transform:rotate(22deg)} }

/* ── Brand bar ───────────────────────────────────────────────────────────── */
.bvp-brand-bar {
  display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:10px;
}
.bvp-brand-bar::before,.bvp-brand-bar::after {
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg,transparent,rgba(90,68,30,0.30),transparent);
}
.bvp-brand-text {
  font-family:'Bebas Neue',sans-serif; font-size:0.72rem; letter-spacing:5px; color:#7a6040;
  text-shadow:0 1px 0 rgba(255,255,255,0.34),0 -1px 0 rgba(0,0,0,0.16); white-space:nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCREEN ROW
   ═══════════════════════════════════════════════════════════════════════════ */
.bvp-screen-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.bvp-panel-left,
.bvp-panel-right {
  width: 54px; flex-shrink: 0;
  display: flex; flex-direction: column;
  align-items: center; gap: 9px;
  padding-top: 4px;
}

/* ─── Bezel ──────────────────────────────────────────────────────────────── */
.bvp-bezel {
  flex: 1;
  min-width: 0;
  background: #0c0a06;
  border-radius: 12px;
  padding: 10px;
  box-sizing: border-box;
  box-shadow:
    0 0 0 2px #040302,
    0 6px 20px rgba(0,0,0,0.95) inset,
    0 2px 0 rgba(255,255,255,0.04) inset;
  position: relative;
}
.bvp-bezel::before {
  content:''; position:absolute; inset:5px; border-radius:8px;
  border:1px solid rgba(160,140,90,0.06); pointer-events:none;
}

/* ─── CRT screen ─────────────────────────────────────────────────────────── */
.bvp-crt {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 5px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.9), 0 0 36px rgba(57,255,122,0.04) inset;
  /* FIX: Isolate CRT filter animations from rest of page */
  will-change: filter;
  transform: translateZ(0);
}

/* ─── Video frame ────────────────────────────────────────────────────────── */
.bvp-video-frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2;
  overflow: hidden;
  background: #000;
}
#bvpVideoFrame > div,
#videoPlayer {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
#bvpVideoFrame iframe,
.bvp-video-frame iframe,
#videoPlayer iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  display: block !important;
}

/* ─── Screen overlays ────────────────────────────────────────────────────── */
.bvp-phosphor {
  position:absolute; inset:0; z-index:7; pointer-events:none; border-radius:5px;
  background:radial-gradient(ellipse at 50% 46%,rgba(57,255,122,0.10) 0%,transparent 65%);
  opacity:0; transition:opacity 1.4s ease;
  will-change: opacity;
}
.bvp-phosphor.on { opacity:1; }

#bvpStaticCanvas {
  position:absolute; inset:0; z-index:6; pointer-events:none;
  width:100%!important; height:100%!important;
  border-radius:5px; opacity:0; transition:opacity 0.04s;
  will-change: opacity;
}
#bvpStaticCanvas.on { opacity:1; }

.bvp-ch-flash {
  position:absolute; inset:0; z-index:8; pointer-events:none;
  background:#fff; border-radius:5px; opacity:0;
  will-change: opacity;
}
.bvp-ch-flash.go { animation:chFlash 0.44s ease forwards; }
@keyframes chFlash { 0%{opacity:0.96} 30%{opacity:0.65} 100%{opacity:0} }

.bvp-swipe-overlay {
  position:absolute; inset:0; z-index:9; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.55),transparent);
  transform:translateX(-110%);
  will-change: transform;
}
.bvp-swipe-overlay.run { animation:swipe 0.48s cubic-bezier(0.4,0,0.2,1) forwards; }
@keyframes swipe { 0%{transform:translateX(-110%)} 50%{transform:translateX(0)} 100%{transform:translateX(110%)} }

.bvp-crt-vignette {
  position:absolute; inset:0; z-index:13; pointer-events:none; border-radius:5px;
  background:radial-gradient(ellipse at 50% 50%,transparent 52%,rgba(0,0,0,0.46) 80%,rgba(0,0,0,0.78) 100%);
}
.bvp-crt-glare {
  position:absolute; z-index:14; pointer-events:none;
  top:4%; left:5%; width:40%; height:28%;
  background:linear-gradient(135deg,rgba(255,255,255,0.052) 0%,transparent 60%);
  border-radius:50%; transform:rotate(-8deg);
}
.bvp-crt-scanlines {
  position:absolute; inset:0; z-index:12; pointer-events:none; border-radius:5px;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.13) 2px,rgba(0,0,0,0.13) 4px);
}

.bvp-crt.flicker { animation:crtFlk 0.09s steps(1,end) 5; }
@keyframes crtFlk {
  0%  { filter:brightness(3.2) saturate(0); }
  20% { filter:brightness(0.05) saturate(0); }
  40% { filter:brightness(2.6) saturate(0.12); }
  60% { filter:brightness(0.04) saturate(0); }
  80% { filter:brightness(1.7); }
  100%{ filter:brightness(1); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   KNOBS
   ═══════════════════════════════════════════════════════════════════════════ */
.bvp-knob-unit {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  cursor:pointer; touch-action:manipulation;
  -webkit-tap-highlight-color:transparent; user-select:none;
}
.bvp-knob-label {
  font-family:'Bebas Neue',sans-serif; font-size:0.46rem; letter-spacing:1px;
  color:rgba(80,58,24,0.68); text-align:center; line-height:1.1;
}
.bvp-knob {
  width:38px; height:38px; border-radius:50%;
  background:var(--knob-def); border:3px solid #1a1106;
  position:relative; flex-shrink:0;
  box-shadow:0 5px 12px rgba(0,0,0,0.70),0 1px 0 rgba(255,255,255,0.16) inset,0 -2px 0 rgba(0,0,0,0.65) inset;
  transition:box-shadow 0.15s,transform 0.1s;
  will-change: transform;
}
.bvp-knob::after {
  content:''; position:absolute; top:5px; left:50%; transform:translateX(-50%);
  width:3px; height:10px;
  background:linear-gradient(180deg,rgba(255,255,255,0.92),rgba(255,255,255,0.22));
  border-radius:2px; box-shadow:0 0 5px rgba(255,255,255,0.5);
}
.bvp-knob:hover {
  box-shadow:0 7px 18px rgba(0,0,0,0.80),0 0 14px rgba(255,200,80,0.13),0 1px 0 rgba(255,255,255,0.20) inset,0 -2px 0 rgba(0,0,0,0.68) inset;
}
.bvp-knob-unit:active .bvp-knob { transform:translateY(2px) scale(0.93); }
.bvp-knob.spin-cw  { animation:kCW  0.44s cubic-bezier(0.34,1.56,0.64,1); }
.bvp-knob.spin-ccw { animation:kCCW 0.44s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes kCW  { from{transform:rotate(-12deg)} to{transform:rotate(130deg)} }
@keyframes kCCW { from{transform:rotate(12deg)}  to{transform:rotate(-130deg)} }

.bvp-knob--prog-up   { background:var(--knob-red); }
.bvp-knob--prog-up::after { background:linear-gradient(180deg,#ffa0a0,#ff3333); box-shadow:0 0 7px rgba(255,60,60,0.9); }
.bvp-knob--prog-down { background:var(--knob-red); filter:brightness(0.68); }
.bvp-knob--power     { width:44px; height:44px; background:var(--knob-red); border-color:#0e0000; }
.bvp-knob--power::after { background:linear-gradient(180deg,#ffbbbb,#ff1111); box-shadow:0 0 9px rgba(255,40,40,1); }
.bvp-knob--power.on  { box-shadow:0 5px 12px rgba(0,0,0,0.70),0 0 28px rgba(255,40,40,0.55),0 1px 0 rgba(255,160,160,0.20) inset; }
.bvp-knob--vol       { background:var(--knob-blue); }
.bvp-knob--vol::after { background:linear-gradient(180deg,#aadeFF,#2288ff); box-shadow:0 0 7px rgba(50,150,255,0.85); }
.bvp-knob--tune      { background:var(--knob-amber); }
.bvp-knob--tune::after { background:linear-gradient(180deg,#ffee88,#ffaa00); box-shadow:0 0 7px rgba(255,180,0,0.85); }
.bvp-knob--shuffle   { background:var(--knob-def); }
.bvp-knob--shuffle.active { background:var(--knob-green); }
.bvp-knob--shuffle.active::after { background:linear-gradient(180deg,#aaffcc,#22dd66); box-shadow:0 0 8px rgba(50,255,100,0.9); }
.bvp-knob--repeat    { background:var(--knob-def); }
.bvp-knob--repeat.active { background:var(--knob-green); }
.bvp-knob--repeat.active::after { background:linear-gradient(180deg,#aaffcc,#22dd66); box-shadow:0 0 8px rgba(50,255,100,0.9); }

/* ── LED ─────────────────────────────────────────────────────────────────── */
.bvp-led {
  width:10px; height:10px; border-radius:50%;
  background:#280000; border:1.5px solid #0e0000;
  box-shadow:inset 0 1px 0 rgba(0,0,0,0.7);
  transition:all 0.35s; flex-shrink:0;
  will-change: opacity;
}
.bvp-led.on {
  background:var(--led-red);
  box-shadow:0 0 8px rgba(255,40,40,1),0 0 20px rgba(255,40,40,0.55),inset 0 1px 0 rgba(255,160,160,0.5);
  animation:ledPulse 2s ease-in-out infinite;
}
@keyframes ledPulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.bvp-led-label {
  font-family:'Share Tech Mono',monospace; font-size:0.38rem; color:rgba(80,58,24,0.50); letter-spacing:0.5px;
}

/* ── Speaker ─────────────────────────────────────────────────────────────── */
.bvp-speaker {
  flex:1; min-height:44px; width:40px; border-radius:6px;
  border:2px solid #3a2812;
  background:repeating-linear-gradient(0deg,#3a2812 0,#3a2812 2px,#1e1006 2px,#1e1006 6px);
  box-shadow:inset 0 3px 8px rgba(0,0,0,0.65); position:relative; overflow:hidden;
}
.bvp-speaker::before {
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg,transparent 0,transparent 4px,rgba(0,0,0,0.38) 4px,rgba(0,0,0,0.38) 5px);
}
.bvp-speaker.playing::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 75%,rgba(57,255,122,0.10) 0%,transparent 65%);
  animation:spkPulse 1.5s ease-in-out infinite;
  will-change: opacity;
}
@keyframes spkPulse { 0%,100%{opacity:0.3} 50%{opacity:1} }

/* ══════════════════════════════════════════════════════════════════
   VCR DISPLAY
   ══════════════════════════════════════════════════════════════════ */
.bvp-vcr {
  background:#020a04; border:2px solid #081206;
  border-radius:6px; padding:5px 12px; margin-top:10px;
  box-shadow:0 0 14px rgba(57,255,122,0.11) inset,0 3px 8px rgba(0,0,0,0.65);
  overflow:hidden; position:relative;
}
.bvp-vcr::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.20) 3px,rgba(0,0,0,0.20) 5px);
}
.bvp-vcr-inner { display:flex; align-items:center; gap:8px; position:relative; z-index:1; }
.bvp-vcr-time {
  font-family:'VT323',monospace; font-size:1.05rem; letter-spacing:3px; min-width:40px;
  color:var(--phosphor); flex-shrink:0;
  text-shadow:0 0 10px rgba(57,255,122,0.95),0 0 24px rgba(57,255,122,0.40);
}
.bvp-vcr-pipe { font-family:'VT323',monospace; font-size:0.85rem; color:rgba(57,255,122,0.24); flex-shrink:0; }
.bvp-vcr-scroll { flex:1; overflow:hidden; white-space:nowrap; }
.bvp-vcr-title {
  display:inline-block; font-family:'VT323',monospace; font-size:1rem; letter-spacing:2px;
  color:var(--phosphor); text-shadow:0 0 7px rgba(57,255,122,0.68);
  padding-right:80px; animation:mq 18s linear infinite;
  will-change: transform;
}
@keyframes mq { 0%{transform:translateX(100%)} 100%{transform:translateX(-100%)} }
.bvp-vcr-ch {
  font-family:'VT323',monospace; font-size:0.9rem; letter-spacing:2px; flex-shrink:0;
  color:var(--amber); text-shadow:0 0 8px rgba(255,184,48,0.85);
}

/* ══════════════════════════════════════════════════════════════════
   PROGRESS
   FIX: will-change on fill and thumb prevents full bar repaint
   ══════════════════════════════════════════════════════════════════ */
.bvp-progress-wrap { width:100%; padding:8px 0 3px; }
.bvp-progress-track {
  width:100%; height:8px; border-radius:4px; cursor:pointer;
  background:repeating-linear-gradient(90deg,#1a1606 0,#1a1606 10px,#100e04 10px,#100e04 12px);
  border:1px solid #060502; box-shadow:0 1px 5px rgba(0,0,0,0.65) inset;
  position:relative; padding:9px 0; margin:-9px 0; box-sizing:content-box;
}
.bvp-progress-fill {
  height:8px; border-radius:4px; position:relative;
  background:linear-gradient(90deg,#1a8830,var(--phosphor),var(--amber));
  box-shadow:0 0 11px rgba(57,255,122,0.60); transition:width 0.1s linear;
  /* FIX: Tell browser only width changes — no full repaint on every tick */
  will-change: width;
  transform: translateZ(0);
}
.bvp-progress-thumb {
  position:absolute; right:-8px; top:50%; transform:translateY(-50%) scale(0);
  width:16px; height:16px; border-radius:50%;
  background:var(--phosphor); box-shadow:0 0 0 2px #040e06,0 0 14px rgba(57,255,122,0.95);
  transition:transform 0.18s cubic-bezier(0.34,1.56,0.64,1);
  /* FIX: GPU layer for thumb so it doesn't trigger bar repaint */
  will-change: transform;
}
.bvp-progress-track:hover .bvp-progress-thumb { transform:translateY(-50%) scale(1); }
.bvp-times {
  display:flex; justify-content:space-between; margin-top:5px;
  font-family:'Share Tech Mono',monospace; font-size:0.68rem;
  color:rgba(57,255,122,0.36); letter-spacing:1px;
}

/* ══════════════════════════════════════════════════════════════════
   TRANSPORT
   ══════════════════════════════════════════════════════════════════ */
.bvp-transport {
  display:flex; align-items:center; justify-content:center;
  gap:6px; padding:10px 0 2px; flex-wrap:wrap;
}
.bvp-btn {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  cursor:pointer; touch-action:manipulation;
  -webkit-tap-highlight-color:transparent; user-select:none;
}
.bvp-btn-cap {
  display:flex; align-items:center; justify-content:center;
  width:46px; height:38px; border-radius:7px;
  background:linear-gradient(158deg,#c2b298 0%,#a08c6a 55%,#7e6c48 100%);
  border:2px solid #483818; color:#382808; font-size:0.88rem; position:relative;
  box-shadow:0 4px 0 #382808,0 5px 12px rgba(0,0,0,0.50),0 1px 0 rgba(255,255,255,0.28) inset,0 -1px 0 rgba(0,0,0,0.26) inset;
  transition:all 0.1s ease;
  will-change: transform;
}
.bvp-btn-cap:hover { background:linear-gradient(158deg,#d4c4a8 0%,#b29c7c 55%,#907c58 100%); }
.bvp-btn:active .bvp-btn-cap {
  transform:translateY(3px);
  box-shadow:0 1px 0 #382808,0 2px 5px rgba(0,0,0,0.40),0 1px 0 rgba(255,255,255,0.18) inset;
}
.bvp-btn-name {
  font-family:'Bebas Neue',sans-serif; font-size:0.44rem; letter-spacing:1px;
  color:rgba(70,50,18,0.68); text-align:center;
}
.bvp-btn--play .bvp-btn-cap {
  width:62px; height:50px;
  background:linear-gradient(158deg,#cc3030 0%,#991818 55%,#6a0808 100%);
  border-color:#380000; color:#ffbbbb; font-size:1.12rem;
  box-shadow:0 5px 0 #260000,0 6px 20px rgba(200,0,0,0.38),0 1px 0 rgba(255,160,160,0.32) inset,0 -1px 0 rgba(0,0,0,0.56) inset;
}
.bvp-btn--play .bvp-btn-cap:hover { background:linear-gradient(158deg,#de4444 0%,#aa2828 55%,#7a1818 100%); }
.bvp-btn--play:active .bvp-btn-cap {
  transform:translateY(4px);
  box-shadow:0 1px 0 #260000,0 2px 7px rgba(200,0,0,0.30),0 1px 0 rgba(255,160,160,0.18) inset;
}
.bvp-btn--active .bvp-btn-cap {
  background:linear-gradient(158deg,#448858 0%,#226638 55%,#0e3e1e 100%)!important;
  border-color:#0a2814!important; color:var(--phosphor)!important;
  box-shadow:0 4px 0 #061a0a,0 0 18px rgba(57,255,122,0.32),0 1px 0 rgba(150,255,180,0.20) inset,0 -1px 0 rgba(0,0,0,0.40) inset!important;
  text-shadow:0 0 8px rgba(57,255,122,0.85);
}

/* Desktop only — play ring pulse */
.bvp-play-ring {
  position:absolute; inset:-5px; border-radius:10px;
  border:1.5px solid rgba(255,80,80,0.30);
  animation:pRing 2.6s ease-out infinite; pointer-events:none;
  will-change: transform, opacity;
}
@keyframes pRing { 0%{transform:scale(1);opacity:0.75} 100%{transform:scale(1.32);opacity:0} }

/* ══════════════════════════════════════════════════════════════════
   INFO + LIKE
   ══════════════════════════════════════════════════════════════════ */
.bvp-info { text-align:center; padding:10px 6px 4px; }
.bvp-on-air {
  display:inline-flex; align-items:center; gap:6px;
  font-family:'Bebas Neue',sans-serif; font-size:0.70rem; letter-spacing:3px;
  color:var(--amber); text-shadow:0 0 9px rgba(255,184,48,0.52); margin-bottom:4px;
}
.bvp-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--led-red); box-shadow:0 0 6px var(--led-red);
  animation:dotBlink 1.7s ease-in-out infinite;
  will-change: opacity;
}
@keyframes dotBlink { 0%,100%{opacity:1} 50%{opacity:0.22} }
.bvp-title {
  font-family:'Bebas Neue',sans-serif; font-size:1.08rem; letter-spacing:2px;
  color:#e8d8b8; line-height:1.24; margin:0 0 4px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  text-shadow:0 2px 8px rgba(0,0,0,0.5);
}
.bvp-artist {
  font-family:'Share Tech Mono',monospace; font-size:0.74rem;
  color:var(--amber); margin:0 0 4px; opacity:0.86;
  text-shadow:0 0 5px rgba(255,184,48,0.28);
}
.bvp-playlist-tag {
  display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:4px;
  background:rgba(0,0,0,0.32); border:1px solid rgba(255,184,48,0.15);
  font-family:'Share Tech Mono',monospace; font-size:0.58rem;
  color:rgba(232,216,184,0.48); width:fit-content; margin:4px auto 0;
}
.bvp-action-row { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:9px; flex-wrap:wrap; }
.bvp-like-btn {
  display:inline-flex; align-items:center; gap:6px; padding:7px 15px; border-radius:7px;
  border:2px solid #7a5a2e; color:#382808;
  background:linear-gradient(158deg,#c0b096 0%,#9e8c6a 100%);
  font-family:'Bebas Neue',sans-serif; font-size:0.78rem; letter-spacing:2px; cursor:pointer;
  box-shadow:0 4px 0 #483018,0 5px 11px rgba(0,0,0,0.34),0 1px 0 rgba(255,255,255,0.20) inset;
  transition:all 0.1s; touch-action:manipulation; min-height:36px;
  will-change: transform;
}
.bvp-like-btn:hover { background:linear-gradient(158deg,#d2c2a6 0%,#b09a7a 100%); }
.bvp-like-btn:active { transform:translateY(3px); box-shadow:0 1px 0 #483018; }
.bvp-like-btn.liked {
  background:linear-gradient(158deg,#cc3030 0%,#881010 100%);
  border-color:#580808; color:#ffcccc;
  box-shadow:0 4px 0 #360000,0 0 18px rgba(255,40,40,0.32),0 1px 0 rgba(255,160,160,0.18) inset;
}
.bvp-ai-badge {
  display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:5px;
  background:rgba(57,255,122,0.07); border:1px solid rgba(57,255,122,0.25);
  font-family:'VT323',monospace; font-size:0.92rem; color:var(--phosphor);
  letter-spacing:1px; text-shadow:0 0 7px rgba(57,255,122,0.68);
  animation:aiP 2.5s ease-in-out infinite;
  will-change: opacity;
}
.bvp-ai-badge.hidden { display:none; }
@keyframes aiP { 0%,100%{opacity:0.70} 50%{opacity:1} }

/* ══════════════════════════════════════════════════════════════════
   BOTTOM ROW
   ══════════════════════════════════════════════════════════════════ */
.bvp-bottom-row {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:9px 2px 2px; border-top:1px solid rgba(255,255,255,0.038);
}
.bvp-vol-row { display:flex; align-items:center; gap:7px; flex:1; min-width:0; }
.bvp-vol-icon {
  color:var(--amber); font-size:0.82rem; cursor:pointer;
  text-shadow:0 0 5px rgba(255,184,48,0.38); flex-shrink:0;
  min-width:30px; min-height:30px; display:flex; align-items:center; justify-content:center;
}
#volumeSlider { display:none; }
.bvp-vol-slider {
  flex:1; height:5px; -webkit-appearance:none; appearance:none;
  background:repeating-linear-gradient(90deg,#1a1606 0,#1a1606 8px,#0e0c02 8px,#0e0c02 10px);
  border-radius:3px; outline:none; cursor:pointer; border:1px solid #060502;
  padding:8px 0; margin:-8px 0; min-width:0;
}
.bvp-vol-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:14px; height:14px; border-radius:50%;
  background:var(--phosphor); box-shadow:0 0 8px rgba(57,255,122,0.85); cursor:pointer;
}
.bvp-toggle-wrap { display:flex; align-items:center; gap:5px; cursor:pointer; flex-shrink:0; touch-action:manipulation; min-height:34px; }
.bvp-toggle-input { display:none; }
.bvp-toggle-pill {
  width:32px; height:16px; background:#161202; border-radius:8px; position:relative;
  transition:background 0.3s; flex-shrink:0; border:1px solid #060502;
  box-shadow:0 1px 5px rgba(0,0,0,0.65) inset;
}
.bvp-toggle-pill::after {
  content:''; position:absolute; width:10px; height:10px; background:#645638;
  border-radius:50%; top:2px; left:2px;
  transition:left 0.28s cubic-bezier(0.34,1.56,0.64,1),background 0.3s;
  will-change: left;
}
.bvp-toggle-input:checked + .bvp-toggle-pill { background:#0a3818; border-color:#041408; }
.bvp-toggle-input:checked + .bvp-toggle-pill::after { left:18px; background:var(--phosphor); box-shadow:0 0 5px rgba(57,255,122,0.85); }
.bvp-toggle-label { font-family:'Bebas Neue',sans-serif; font-size:0.56rem; color:rgba(198,178,138,0.34); letter-spacing:2px; }
.bvp-back-btn {
  display:inline-flex; align-items:center; gap:5px; padding:6px 11px; border-radius:7px;
  background:linear-gradient(158deg,#8a7858 0%,#5a4030 100%);
  border:2px solid #382818; color:#c8b898;
  font-family:'Bebas Neue',sans-serif; font-size:0.68rem; letter-spacing:2px; cursor:pointer;
  box-shadow:0 3px 0 #281808,0 4px 8px rgba(0,0,0,0.38),0 1px 0 rgba(255,255,255,0.09) inset;
  transition:all 0.1s; flex-shrink:0; min-height:34px; touch-action:manipulation;
  will-change: transform;
}
.bvp-back-btn:hover { background:linear-gradient(158deg,#9a8868 0%,#6a5040 100%); color:#e8d8b8; }
.bvp-back-btn:active { transform:translateY(2px); box-shadow:0 1px 0 #281808; }

/* ── Channel flash text ───────────────────────────────────────────────────── */
.bvp-drop-flash {
  position:absolute; top:-20px; left:50%; transform:translateX(-50%);
  font-family:'VT323',monospace; font-size:1.15rem; letter-spacing:7px;
  color:var(--phosphor); text-shadow:0 0 12px rgba(57,255,122,1),0 0 30px rgba(57,255,122,0.50);
  opacity:0; pointer-events:none; z-index:99; white-space:nowrap;
  will-change: transform, opacity;
}
.bvp-drop-flash.show { animation:dfA 1.9s cubic-bezier(0.19,1,0.22,1) forwards; }
@keyframes dfA {
  0%  { opacity:0; transform:translateX(-50%) scale(0.7) translateY(10px); }
  15% { opacity:1; transform:translateX(-50%) scale(1.06) translateY(0); }
  75% { opacity:1; transform:translateX(-50%) scale(1) translateY(0); }
  100%{ opacity:0; transform:translateX(-50%) scale(0.9) translateY(-8px); }
}

/* ── TV legs ─────────────────────────────────────────────────────────────── */
.bvp-legs {
  display:flex; justify-content:space-between;
  padding:0 14%; margin-top:-2px; position:relative; z-index:-1;
}
.bvp-leg {
  width:18px; height:24px; border-radius:0 0 5px 5px;
  background:
    repeating-linear-gradient(90deg,transparent 0,transparent 3px,rgba(0,0,0,0.12) 3px,rgba(0,0,0,0.12) 4px),
    linear-gradient(180deg,var(--bezel-lo) 0%,var(--wood-dk) 100%);
  box-shadow:2px 5px 10px rgba(0,0,0,0.55),inset 0 0 0 1px rgba(0,0,0,0.16);
}
.bvp-leg::after {
  content:''; display:block; margin-top:20px; height:6px;
  background:linear-gradient(90deg,var(--wood-dk),#3a2010);
  border-radius:3px; box-shadow:0 4px 7px rgba(0,0,0,0.5); transform:scaleX(1.4);
}

/* ── Bot stickers ────────────────────────────────────────────────────────── */
.bvp-sticker {
  position:absolute; z-index:30; object-fit:contain;
  pointer-events:auto; cursor:pointer; user-select:none;
  filter:drop-shadow(0 5px 12px rgba(0,0,0,0.80)) drop-shadow(0 2px 4px rgba(0,0,0,0.90));
  opacity:0; animation:stIn 0.65s cubic-bezier(0.34,1.56,0.64,1) forwards;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  will-change: transform, opacity;
}
.bvp-sticker:hover {
  filter:drop-shadow(0 8px 20px rgba(0,0,0,0.86)) drop-shadow(0 0 22px rgba(57,255,122,0.50)) saturate(1.4);
}
@keyframes stIn {
  from { opacity:0; transform:scale(0.3) rotate(var(--rot,0deg)) translateY(22px); }
  to   { opacity:1; transform:scale(1)   rotate(var(--rot,0deg)) translateY(0); }
}
.bvp-sticker.wiggle { animation:stWig 0.62s cubic-bezier(0.34,1.56,0.64,1) forwards !important; }
@keyframes stWig {
  0%  { transform:scale(1)    rotate(0deg)   translateY(0); }
  20% { transform:scale(1.26) rotate(-16deg) translateY(-10px); }
  40% { transform:scale(1.16) rotate(12deg)  translateY(-6px); }
  60% { transform:scale(1.08) rotate(-8deg)  translateY(-3px); }
  80% { transform:scale(1.03) rotate(4deg)   translateY(-1px); }
  100%{ transform:scale(1)    rotate(0deg)   translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE OPTIMIZATIONS — pointer:coarse = touchscreen device
   All heavy animations disabled, GPU-friendly transforms only
   ═══════════════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {

  /* FIX: Scene isolation — most important rule.
     Ensures the entire TV player is a single composited layer.
     Nothing inside can trigger repaints outside it. */
  .bvp-scene {
    contain: layout style paint;
    isolation: isolate;
  }

  /* ── TV boot — simple opacity fade only, no scale/filter ──
     FIX: scale + filter on mobile = full page repaint = logo shake.
     Opacity-only animation is GPU-composited, does not affect siblings. */
  .bvp-tv {
    animation: tvBootMobile 0.35s ease both;
    will-change: opacity;
  }
  @keyframes tvBootMobile {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* ── Remove texture overlay — reduces paint complexity ── */
  .bvp-tv::before { display: none; }

  /* ── Antennas — static, no animation ── */
  .bvp-antenna--left  { animation: none; transform: rotate(-22deg); }
  .bvp-antenna--right { animation: none; transform: rotate(22deg); }

  /* ── LED — no glow animation, static ── */
  .bvp-led.on {
    animation: none;
    opacity: 1;
    box-shadow: 0 0 6px rgba(255,40,40,0.8), inset 0 1px 0 rgba(255,160,160,0.5);
    will-change: auto;
  }

  /* ── Speaker pulse — off on mobile ── */
  .bvp-speaker.playing::after {
    animation: none;
    opacity: 0.6;
    will-change: auto;
  }

  /* ── ON AIR dot — slow blink ── */
  .bvp-dot { animation: dotBlink 3s ease-in-out infinite; }

  /* ── Play ring — OFF on mobile (circle wave culprit) ── */
  .bvp-play-ring { display: none; }

  /* ── CRT flicker — simplified 2-step only ── */
  .bvp-crt.flicker { animation: crtFlkMobile 0.15s steps(1,end) 2; }
  @keyframes crtFlkMobile {
    0%   { filter: brightness(1.8); }
    50%  { filter: brightness(0.3); }
    100% { filter: brightness(1); }
  }

  /* ── Scanlines — lighter weight on mobile ── */
  .bvp-crt-scanlines {
    background: repeating-linear-gradient(
      0deg, transparent, transparent 3px,
      rgba(0,0,0,0.07) 3px, rgba(0,0,0,0.07) 6px
    );
  }

  /* ── AI badge — no pulse ── */
  .bvp-ai-badge {
    animation: none;
    opacity: 0.85;
    will-change: auto;
  }

  /* ── VCR marquee — slower on mobile ── */
  .bvp-vcr-title { animation: mq 28s linear infinite; }

  /* ── Progress bar — FIX jank:
     On mobile the thumb was always visible (scale 1) and had no will-change,
     so every width update triggered a full bar repaint including the thumb.
     Now thumb has its own GPU layer via will-change:transform. ── */
  .bvp-progress-fill {
    will-change: width;
    transform: translateZ(0);
  }
  .bvp-progress-thumb {
    transform: translateY(-50%) scale(1) translateZ(0) !important;
    width: 20px;
    height: 20px;
    will-change: transform;
  }
  .bvp-progress-track { height: 10px !important; }

  /* ── Stickers — no entry animation on mobile ── */
  .bvp-sticker {
    animation: none;
    opacity: 1;
    will-change: transform;
  }
  .bvp-sticker.wiggle {
    animation: stWigMobile 0.4s ease forwards !important;
  }
  @keyframes stWigMobile {
    0%   { transform: scale(1)    rotate(0deg); }
    30%  { transform: scale(1.15) rotate(-10deg); }
    60%  { transform: scale(1.10) rotate(8deg); }
    100% { transform: scale(1)    rotate(0deg); }
  }

  /* ── Knob press — simpler ── */
  .bvp-knob-unit:active .bvp-knob { transform: scale(0.92); }
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE SIZING (both mobile + small desktop)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .bvp-scene   { padding-top: 46px; }
  .bvp-panel-left,.bvp-panel-right { width:44px; gap:7px; }
  .bvp-knob    { width:31px; height:31px; }
  .bvp-knob--power { width:36px; height:36px; }
  .bvp-btn-cap { width:40px; height:34px; font-size:0.80rem; }
  .bvp-btn--play .bvp-btn-cap { width:52px; height:44px; font-size:1rem; }
  .bvp-transport { gap:5px; }
  .bvp-title   { font-size:0.96rem; }
  .bvp-antenna-wrap { padding:0 16%; }
  .bvp-antenna { height:44px; }
  .bvp-bezel   { padding:8px; }
  .bvp-speaker { width:32px; }
  .bvp-sticker { max-width:54px!important; max-height:54px!important; }
}
@media (max-width: 420px) {
  .bvp-scene   { padding-top:38px; }
  .bvp-panel-left,.bvp-panel-right { width:34px; gap:6px; }
  .bvp-knob    { width:25px; height:25px; border-width:2px; }
  .bvp-knob--power { width:29px; height:29px; }
  .bvp-knob::after { width:2px; height:7px; top:4px; }
  .bvp-knob-label { font-size:0.34rem; }
  .bvp-btn-cap { width:33px; height:27px; font-size:0.70rem; }
  .bvp-btn--play .bvp-btn-cap { width:44px; height:36px; font-size:0.90rem; }
  .bvp-transport { gap:4px; }
  .bvp-title   { font-size:0.86rem; }
  .bvp-brand-text { font-size:0.56rem; letter-spacing:3px; }
  .bvp-speaker { display:none; }
  .bvp-bezel   { padding:7px; }
  .bvp-vcr     { padding:4px 8px; }
  .bvp-vcr-time { font-size:0.88rem; }
  .bvp-sticker { max-width:42px!important; max-height:42px!important; }
}
@media (max-width: 340px) {
  .bvp-scene   { padding-top:32px; }
  .bvp-panel-left,.bvp-panel-right { width:26px; gap:5px; }
  .bvp-knob    { width:20px; height:20px; }
  .bvp-knob--power { width:24px; height:24px; }
  .bvp-knob-label  { display:none; }
  .bvp-led-label   { display:none; }
  .bvp-btn-cap { width:26px; height:22px; font-size:0.60rem; }
  .bvp-btn--play .bvp-btn-cap { width:36px; height:30px; }
  .bvp-btn-name    { display:none; }
  .bvp-antenna-wrap { display:none; }
  .bvp-sticker { max-width:34px!important; max-height:34px!important; }
}
@media (max-height:500px) and (orientation:landscape) {
  .bvp-antenna-wrap { display:none; }
  .bvp-vcr     { margin-top:4px; padding:3px 8px; }
  .bvp-transport { padding:4px 0 2px; }
  .bvp-btn-cap { height:27px; }
  .bvp-btn--play .bvp-btn-cap { height:35px; }
  .bvp-title   { -webkit-line-clamp:1; }
  .bvp-speaker { min-height:26px; }
}