:root { --g:#7CFF8A; --y:#ffe14d; --b:#0a1a8c; --b2:#1230d0; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:#050505; color:#fff; font-family:"Courier New", ui-monospace, monospace; }
#tv { position:relative; width:100vw; height:100vh; background:#000; overflow:hidden; }
video, #static { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; }
/* El reproductor se agranda y se recorta para dejar fuera la barra de título/usuario y el logo de YouTube */
#ytwrap { position:absolute; inset:0; background:#000; pointer-events:none; overflow:hidden; }
#ytwrap.veil { opacity:0; }
#ytwrap iframe { width:100%; height:100%; border:0; transform:scale(1.27); transform-origin:center center; }
#static { opacity:0; pointer-events:none; object-fit:fill; }
#static.on { opacity:1; }
.crt { position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%);
  mix-blend-mode:multiply; }
#tv:not(.off) video { filter:saturate(1.15) contrast(1.05) blur(.25px); }

.hidden { display:none !important; }

#osd { position:absolute; top:5%; right:5%; text-align:right; color:var(--g);
  text-shadow:2px 2px 0 #000, 0 0 8px rgba(124,255,138,.6); }
#osd-num { font-size:clamp(36px,7vw,84px); font-weight:bold; letter-spacing:4px; }
#osd-name { font-size:clamp(14px,2.2vw,26px); }
#osd-now { font-size:clamp(11px,1.6vw,18px); opacity:.85; max-width:50vw; margin-left:auto; }

#typed { position:absolute; top:5%; left:5%; color:var(--g); font-size:clamp(36px,7vw,84px); font-weight:bold;
  text-shadow:2px 2px 0 #000; letter-spacing:4px; }
#msg { position:absolute; left:50%; bottom:8%; transform:translateX(-50%); background:rgba(0,0,0,.75);
  color:var(--y); padding:10px 18px; border:2px solid var(--y); font-size:clamp(13px,1.8vw,20px); text-align:center; max-width:90%; }

/* guía */
#guide { position:absolute; inset:0; display:flex; flex-direction:column; gap:1.6%; padding:2.2% 2.6% 1.6%;
  font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif; font-weight:700;
  background:radial-gradient(ellipse at 50% 0%,#14308f 0%,#0a1a63 60%,#07104a 100%); }
#guide::before { content:""; position:absolute; inset:5px; border-radius:22px; border:2px solid rgba(120,150,255,.35); pointer-events:none; }
.g-top { display:flex; gap:1.6%; flex:0 0 36%; min-height:0; }
.g-preview { flex:0 0 36%; border:3px solid #f08a24; border-radius:3px; background:#000; overflow:hidden; }
.g-preview video { position:static; width:100%; height:100%; object-fit:cover; filter:grayscale(.15) contrast(1.1); }
.g-info { flex:1; border:3px solid #f08a24; border-radius:3px; background:linear-gradient(180deg,#0e2287,#0a186c);
  padding:2% 3%; display:flex; flex-direction:column; gap:2%; overflow:hidden; min-width:0; }
.gi-head { display:flex; justify-content:space-between; color:#fff; font-size:clamp(12px,1.6vw,20px); letter-spacing:.5px; }
#guide-clock { color:#f08a24; }
#gi-title { color:#f5c518; font-size:clamp(18px,3.1vw,38px); line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#gi-time { color:#fff; font-size:clamp(11px,1.5vw,18px); }
#gi-next { color:#cdd8ff; font-size:clamp(10px,1.3vw,16px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#gi-desc { color:#9fb4ff; font-size:clamp(10px,1.2vw,15px); font-weight:400; }
#guide-grid { flex:1; min-height:0; display:flex; flex-direction:column; gap:5px; }
.row { display:flex; gap:4px; flex:1; min-height:0; }
.row.head { flex:0 0 7%; align-items:center; }
.row .ch { flex:0 0 20%; display:flex; align-items:center; gap:7%; padding:0 3%; background:#1a38b8; color:#fff;
  font-size:clamp(11px,1.5vw,18px); overflow:hidden; white-space:nowrap; border-radius:2px; }
.row .ch b { font-size:clamp(14px,2vw,26px); min-width:1.6em; text-align:right; }
.row .ch span { overflow:hidden; text-overflow:ellipsis; text-transform:uppercase; font-size:.72em; line-height:1.05; white-space:normal; }
.row.head .ch { background:none; color:#f5c518; font-size:clamp(12px,1.7vw,20px); padding:0; }
.row.sel .ch { background:#f5c518; color:#111; }
.slots { position:relative; flex:1; overflow:hidden; }
.slots .prog { position:absolute; top:0; bottom:0; padding:0 .7em; background:#2a52d9; color:#fff; border-radius:2px;
  font-size:clamp(11px,1.55vw,19px); display:flex; align-items:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row.sel .prog { background:#f5c518; color:#141414; }
.row.sel .prog.now { box-shadow:inset 0 0 0 2px #fff; }
.tick { position:absolute; top:50%; transform:translateY(-50%); color:#fff; font-size:clamp(12px,1.7vw,20px); padding-left:.7em; }
.g-foot { flex:none; text-align:center; color:#f08a24; font-size:clamp(9px,1.2vw,14px); letter-spacing:1px; padding:.2% 0; }

/* encendido */
#power { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center;
  background:radial-gradient(circle,#10172e,#000); z-index:5; }
#power.hidden { display:none; }
/* TV de tubo gris oscuro: la perilla es el botón POWER del panel inferior */
#power { background:radial-gradient(ellipse at 50% 40%,#222 0%,#0b0b0c 75%,#000 100%); }
.power-box { width:min(94vw,760px,calc((100vh - 190px) * 1.2)); }
.tv-body { position:relative; padding:5% 5.5% 3.5%; border-radius:22px 22px 48px 48px / 22px 22px 34px 34px;
  background:linear-gradient(170deg,#4a4b50 0%,#34353a 40%,#26272b 100%);
  box-shadow:0 22px 44px rgba(0,0,0,.85), inset 0 2px 2px rgba(255,255,255,.18), inset 0 -3px 6px rgba(0,0,0,.5), inset 0 0 40px rgba(0,0,0,.25); }
.tv-screen { aspect-ratio:16/10.5; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:0 3%; border-radius:26px / 22px;
  background:radial-gradient(ellipse at 50% 40%,#2a3946 0%,#17212b 60%,#0b1117 100%);
  box-shadow:inset 0 0 60px rgba(0,0,0,.9), inset 0 0 0 3px #000, 0 0 0 6px #1a1b1e, 0 0 0 7px rgba(255,255,255,.08);
  position:relative; overflow:hidden; }
.tv-screen::after { content:""; position:absolute; inset:0; background:linear-gradient(155deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 35%); pointer-events:none; }
.tv-screen p { margin:8px 0 0; font-size:clamp(11px,2vw,16px); }
.tv-panel { display:flex; align-items:center; gap:clamp(8px,2.2vw,18px); margin-top:clamp(12px,3.2%,26px); padding:0 2%; min-height:60px; }
.knob-wrap { display:flex; flex-direction:column; align-items:center; gap:5px; }
.mini-btns { display:flex; gap:clamp(5px,1.4vw,10px); }
.mini-btns i { width:clamp(16px,3.4vw,26px); height:clamp(10px,2vw,15px); border-radius:5px; background:linear-gradient(#17181b,#0c0c0e); box-shadow:0 2px 0 rgba(0,0,0,.6), inset 0 1px 1px rgba(255,255,255,.18); }
.ir { width:16px; height:16px; border-radius:50%; background:radial-gradient(circle at 40% 35%,#555,#111); box-shadow:0 0 0 2px #1a1b1e; margin-left:clamp(4px,3vw,30px); }
.grille { margin-left:auto; width:clamp(70px,22%,170px); height:54px; border-radius:6px 6px 14px 6px; transform:skewX(-8deg);
  background:radial-gradient(circle,#0b0b0d 1.3px,transparent 1.6px) 0 0/6px 6px, #2b2c30; box-shadow:inset 0 2px 4px rgba(0,0,0,.6); }
.power-box h1 { font-size:clamp(40px,9vw,110px); margin:0; color:var(--g); letter-spacing:8px; text-shadow:0 0 18px rgba(124,255,138,.6); }
.power-box p { color:#b8c4ff; margin:8px 0 24px; }
.power-box .knob { width:clamp(38px,6.5vw,50px); height:clamp(38px,6.5vw,50px); padding:0; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#cfcfd2; cursor:pointer; border:2px solid #111214;
  background:radial-gradient(circle at 35% 30%, #4b4d53 0%, #26272b 55%, #121315 100%);
  box-shadow:0 4px 0 #08080a, 0 6px 10px rgba(0,0,0,.6), inset 0 1px 2px rgba(255,255,255,.25);
  transition:transform .08s, box-shadow .08s, color .15s; }
.power-box .knob:hover { color:#fff; }
.power-box .knob:active { transform:translateY(3px); box-shadow:0 1px 0 #08080a, 0 2px 4px rgba(0,0,0,.6), inset 0 1px 2px rgba(255,255,255,.2); color:var(--g); }
.knob-label { color:#c9ccd6; font-size:9px; letter-spacing:2px; text-transform:uppercase; }
.power-box small { display:block; margin:14px auto 0; text-align:center; color:#7d8ac0; max-width:520px; }

.power-box .disclaimer { margin:12px auto 0; max-width:640px; font-size:11px; line-height:1.4; color:#7c7c82; }
.power-box .disclaimer a { color:#ffd36b; text-decoration:none; white-space:nowrap; }
#remote { position:absolute; right:10px; bottom:10px; display:flex; gap:6px; opacity:.0; transition:opacity .3s; z-index:4; }
#tv:hover #remote { opacity:.9; }
#remote button { background:#222; color:#fff; border:1px solid #555; padding:8px 10px; font:inherit; cursor:pointer; }
.power-box h1 .sub { display:block; font-size:.28em; letter-spacing:.5em; margin-top:4px; color:#b8c4ff; text-shadow:none; }
.power-box .support { margin-top:18px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 10px; color:#b8c4ff; font-size:14px; }
.power-box .support .cafe { margin-top:0; }
.power-box .cafe { display:inline-block; margin-top:18px; color:#ffd36b; text-decoration:none; border:1px solid #ffd36b66; padding:6px 14px; border-radius:20px; font-size:14px; }
.power-box .cafe:hover { background:#ffd36b22; }