:root{
  color-scheme: dark;   /* navegador usa defaults oscuros (el html ya no sale blanco en modo claro) */
  --bg:#05060a; --bg2:#0b1020;
  --neon:#ffe600; --neon2:#00e5ff; --pink:#ff5be1; --red:#ff2e4d;
  --plastic:#2b2f3a; --plastic2:#171a22;
  --txt:#e7eefc;
}
*{box-sizing:border-box}
/* El atributo hidden debe ganarle a cualquier display de clase (login overlay, canales) */
[hidden]{display:none !important}
html{background:#05060a !important}
html,body{margin:0;height:100%;background:#05060a}
body{
  font-family:'Press Start 2P',system-ui,monospace;
  color:var(--txt);
  background:
    radial-gradient(1200px 600px at 50% -10%, #131a33 0%, transparent 60%),
    repeating-linear-gradient(0deg,#0a0e1a 0 38px,#0b1020 38px 40px),
    var(--bg);
  display:flex; flex-direction:column; align-items:center;
  min-height:100%; padding:14px 10px 24px; gap:12px;
  overflow-x:hidden;
}

/* ---------- Marquesina ---------- */
.marquee{
  display:flex; align-items:center; gap:14px;
  padding:10px 22px; border-radius:10px;
  background:linear-gradient(#1a1030,#0d0820);
  border:3px solid #3a1e6e; box-shadow:0 0 18px #6d28d9aa, inset 0 0 12px #00000080;
}
.marquee h1{
  font-size:clamp(14px,3.4vw,30px); margin:0; letter-spacing:2px;
  color:#fff; text-shadow:0 0 6px var(--neon),0 0 14px var(--pink),3px 3px 0 #000;
}
.logo-pac{width:26px;height:26px;border-radius:50%;
  background:conic-gradient(from 35deg, var(--neon) 0 300deg, transparent 300deg 360deg);
  filter:drop-shadow(0 0 5px var(--neon)); animation:chomp .35s steps(2,end) infinite;}
@keyframes chomp{50%{background:radial-gradient(var(--neon) 0 0)}}
.dot-live{width:14px;height:14px;border-radius:50%;background:var(--red);
  box-shadow:0 0 0 0 rgba(255,46,77,.7); animation:pulse 1.6s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(255,46,77,0)}100%{box-shadow:0 0 0 0 rgba(255,46,77,0)}}

/* ---------- Cabinet (TV + decoraciones) ---------- */
.cabinet{
  display:flex; align-items:center; justify-content:center; gap:18px;
  width:100%; max-width:1180px;
}
.deco{display:flex; flex-direction:column; gap:22px; padding:6px}
.deco-left{align-items:center}
.deco-right{align-items:center}

/* ---------- La TV ---------- */
.tv{
  position:relative;
  background:linear-gradient(160deg,var(--plastic),var(--plastic2));
  border-radius:26px; padding:22px 22px 14px;
  border:2px solid #000;
  box-shadow:0 18px 40px #000a, inset 0 2px 0 #ffffff14, inset 0 -8px 24px #0008;
  width:min(92vw,920px);
}
.tv-brand{
  text-align:center; font-size:10px; letter-spacing:3px; color:#9aa3b5;
  margin-bottom:10px; text-shadow:1px 1px 0 #000;
}
.screen{
  position:relative; aspect-ratio:4/3; width:100%;
  background:#000; border-radius:14px; overflow:hidden;
  border:10px solid #0c0d10;
  box-shadow:inset 0 0 60px #000, inset 0 0 14px #00000080, 0 0 0 3px #313644;
}
#video{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000;
  filter:saturate(1.05) contrast(1.03)}
/* CRT scanlines + viñeta + brillo de vidrio */
.scanlines{position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 2px, transparent 2px 4px);
  mix-blend-mode:multiply; opacity:.55}
.glass{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.10), transparent 45%),
             radial-gradient(140% 120% at 50% 120%, rgba(0,0,0,.55), transparent 55%);
  border-radius:14px}
.power-led{position:absolute; right:10px; bottom:8px; width:8px; height:8px; border-radius:50%;
  background:#27f06b; box-shadow:0 0 8px #27f06b}

.screen-msg{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; font-size:12px; color:var(--neon2); text-shadow:0 0 8px var(--neon2);
  background:#000c; z-index:3}
.screen-msg.hidden{display:none}
.blink{animation:blink 1s steps(2,end) infinite}
@keyframes blink{50%{opacity:.15}}

/* perillas */
.tv-knobs{display:flex; align-items:center; gap:14px; margin-top:12px; padding:0 8px}
.knob{width:26px; height:26px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #5a6072, #20242e 70%);
  border:2px solid #0a0c10; box-shadow:0 2px 4px #000, inset 0 0 4px #000}
.speaker{margin-left:auto; display:grid; grid-template-columns:repeat(3,8px); gap:5px}
.speaker i{width:8px; height:8px; border-radius:50%; background:#0a0c10; box-shadow:inset 0 0 3px #000}

/* ---------- Login overlay ---------- */
.login-overlay{position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center;
  background:rgba(2,4,10,.86); backdrop-filter:blur(2px)}
.login-box{display:flex; flex-direction:column; gap:14px; width:min(86%,360px);
  padding:22px; border:3px solid var(--neon2); border-radius:10px; background:#080b16;
  box-shadow:0 0 24px #00e5ff66, inset 0 0 18px #000}
.coin{font-size:9px; color:var(--neon); text-align:center; letter-spacing:1px; animation:blink 1.1s steps(2,end) infinite}
.login-box h2{margin:0; text-align:center; font-size:16px; color:#fff; text-shadow:0 0 8px var(--pink)}
.login-box label{font-size:9px; color:#9fb4d6; display:flex; flex-direction:column; gap:7px; letter-spacing:1px}
.login-box input{font-family:inherit; font-size:11px; padding:11px; background:#0d1224; color:var(--neon);
  border:2px solid #25406b; border-radius:6px; outline:none}
.login-box input:focus{border-color:var(--neon); box-shadow:0 0 8px var(--neon)}
.login-box button{font-family:inherit; font-size:11px; padding:12px; cursor:pointer; color:#04121a;
  background:linear-gradient(#33f0ff,#00bcd4); border:none; border-radius:6px;
  box-shadow:0 4px 0 #007a8a, 0 0 12px #00e5ff88; letter-spacing:1px}
.login-box button:active{transform:translateY(3px); box-shadow:0 1px 0 #007a8a}
.login-box button[disabled]{opacity:.6; cursor:wait}
.login-err{font-size:8px; color:var(--red); text-align:center; text-shadow:0 0 6px #ff2e4d}

/* ---------- Canales ---------- */
.channels{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; padding:4px}
.arcade-btn{font-family:inherit; cursor:pointer; color:#1a1300; letter-spacing:1px;
  background:linear-gradient(var(--neon),#d9c400); border:none; border-radius:8px;
  padding:13px 18px; font-size:11px; box-shadow:0 5px 0 #8c7d00, 0 0 14px #ffe60055}
.arcade-btn:active{transform:translateY(4px); box-shadow:0 1px 0 #8c7d00}
.arcade-btn.active{background:linear-gradient(#33f0ff,#00bcd4); color:#04121a; box-shadow:0 5px 0 #007a8a,0 0 16px #00e5ff88}
.arcade-btn.small{font-size:9px; padding:10px 14px}
.arcade-btn.ghost-btn{background:linear-gradient(#ff7b9c,#ff2e4d); color:#1a0006; box-shadow:0 5px 0 #8c0018}

.foot{display:flex; gap:12px; align-items:center; margin-top:2px}

/* ---------- Pixel-art decoraciones (Pac-Man / fantasmas / invaders / joystick) ---------- */
.ghost{width:46px; height:50px; position:relative; border-radius:24px 24px 0 0;
  animation:bob 1.4s ease-in-out infinite; filter:drop-shadow(2px 3px 0 #0006)}
.ghost::before{content:""; position:absolute; left:0; right:0; bottom:0; height:10px;
  background:radial-gradient(circle at 8px 0, currentColor 6px, transparent 6px) repeat-x;
  background-size:16px 16px; color:inherit}
.ghost::after{content:""; position:absolute; top:15px; left:9px; width:11px; height:14px;
  border-radius:50%; background:#fff;
  box-shadow:14px 0 0 #fff,                        /* ojo derecho */
             3px 3px 0 1px #1b3bff,                /* pupila izq */
             17px 3px 0 1px #1b3bff;}              /* pupila der */
.ghost i{display:none}
.g-red{background:#ff2e4d; color:#ff2e4d}
.g-pink{background:#ff5be1; color:#ff5be1; animation-delay:.2s}
.g-cyan{background:#00e5ff; color:#00e5ff; animation-delay:.4s}
.g-orange{background:#ff9b21; color:#ff9b21; animation-delay:.6s}
/* pupilas */
.ghost{box-shadow:inset 0 0 0 0 transparent}
.deco .ghost{position:relative}
.deco .ghost > * {display:none}
@keyframes bob{50%{transform:translateY(-8px)}}

.invader{width:46px; height:38px; background:var(--neon2);
  filter:drop-shadow(2px 3px 0 #0006); animation:hop 1s steps(2,end) infinite;
  -webkit-mask:var(--inv) center/contain no-repeat; mask:var(--inv) center/contain no-repeat}
.inv-a{--inv:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 8' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M2 0h1v1H2zM8 0h1v1H8zM3 1h1v1H3zM7 1h1v1H7zM2 2h7v1H2zM1 3h2v1H1zM4 3h3v1H4zM8 3h2v1H8zM0 4h11v1H0zM0 5h1v1H0zM2 5h7v1H2zM10 5h1v1h-1zM0 6h1v1H0zM3 6h1v1H3zM7 6h1v1H7zM10 6h1v1h-1zM2 7h1v1H2zM8 7h1v1H8z'/%3E%3C/svg%3E")}
.inv-b{--inv:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M0 0h1v1H0zM11 0h1v1h-1zM1 1h1v1H1zM10 1h1v1h-1zM0 2h12v1H0zM0 3h3v1H0zM4 3h4v1H4zM9 3h3v1H9zM0 4h12v1H0zM2 5h8v1H2zM1 6h2v1H1zM9 6h2v1H9zM0 7h2v1H0zM10 7h2v1h-2z'/%3E%3C/svg%3E");animation-delay:.3s}
.inv-c{--inv:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M3 0h2v1H3zM2 1h4v1H2zM1 2h6v1H1zM0 3h8v1H0zM0 4h8v1H0zM1 5h2v1H1zM5 5h2v1H5zM2 6h1v1H2zM5 6h1v1H5zM1 7h2v1H1zM5 7h2v1H5z'/%3E%3C/svg%3E");animation-delay:.6s}
@keyframes hop{50%{transform:translateY(-6px)}}

.joystick{position:relative; width:80px; height:70px; margin-top:8px;
  background:linear-gradient(#3a3f4c,#15181f); border-radius:14px 14px 18px 18px;
  border:2px solid #000; box-shadow:0 8px 16px #000a, inset 0 2px 0 #ffffff14}
.joystick .stick{position:absolute; left:50%; top:-22px; transform:translateX(-50%);
  width:10px; height:34px; background:linear-gradient(#222,#000); border-radius:5px}
.joystick .ball{position:absolute; left:50%; top:-40px; transform:translateX(-50%);
  width:26px; height:26px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ff6b6b,#c1121f 70%); box-shadow:0 0 8px #ff2e4d99}

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .deco{display:none}
  .tv{width:96vw; padding:14px 14px 10px}
  .marquee{width:96vw; justify-content:center}
}
:fullscreen #video, :-webkit-full-screen #video{object-fit:contain}
.tv.fs{position:fixed; inset:0; width:100vw; height:100vh; border-radius:0; padding:0; z-index:50;
  display:flex; align-items:center; justify-content:center; background:#000}
.tv.fs .tv-brand,.tv.fs .tv-knobs{display:none}
.tv.fs .screen{height:100vh; width:100vw; aspect-ratio:auto; border:0; border-radius:0}

/* ════════════ Controles (volumen stream/juego) ════════════ */
.controls{display:flex; flex-wrap:wrap; gap:14px 18px; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:12px; background:linear-gradient(#0d1326,#0a0f1f);
  border:2px solid #25325c; box-shadow:inset 0 0 14px #0008; width:min(96vw,920px)}
.vol{display:flex; align-items:center; gap:9px; font-size:9px; color:#9fb4d6; letter-spacing:1px}
.vol span{font-size:15px; line-height:1}
.vol input[type=range]{-webkit-appearance:none; appearance:none; width:clamp(90px,30vw,180px); height:8px;
  border-radius:6px; background:linear-gradient(90deg,var(--neon),#5a5000); outline:none; cursor:pointer}
.vol input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:18px; height:18px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,#00bcd4 70%); border:2px solid #04121a; box-shadow:0 0 8px #00e5ff}
.vol input[type=range]::-moz-range-thumb{width:18px; height:18px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,#00bcd4 70%); border:2px solid #04121a; box-shadow:0 0 8px #00e5ff}

/* ════════════ Sección arcade Pac-Man ════════════ */
.arcade{display:flex; flex-direction:column; align-items:center; gap:12px; width:min(96vw,920px);
  padding:16px 12px 20px; border-radius:18px;
  background:linear-gradient(160deg,#141a30,#0a0e1c); border:3px solid #3a1e6e;
  box-shadow:0 0 22px #6d28d955, inset 0 0 18px #0009}
.arcade-head{display:flex; align-items:center; gap:12px}
.arcade-head h2{margin:0; font-size:clamp(12px,3vw,20px); color:#fff;
  text-shadow:0 0 6px var(--neon),0 0 14px var(--pink),2px 2px 0 #000; letter-spacing:2px}
.pac-hud{display:flex; gap:18px; flex-wrap:wrap; justify-content:center; font-size:9px; color:#9fb4d6; letter-spacing:1px}
.pac-hud b{color:var(--neon); text-shadow:0 0 6px #ffe60066}
.pac-hud .lives{color:var(--red); text-shadow:0 0 6px #ff2e4d99; letter-spacing:2px}

.pac-wrap{display:flex; gap:16px; align-items:flex-start; justify-content:center; width:100%; flex-wrap:wrap}
.pac-screen{position:relative; background:#000; border-radius:10px; padding:6px;
  border:6px solid #0c0d10; box-shadow:inset 0 0 30px #000, 0 0 0 3px #313644; line-height:0}
#pac{display:block; width:min(88vw,420px); height:auto; image-rendering:pixelated; image-rendering:crisp-edges;
  background:#000; border-radius:4px; touch-action:none}

.pac-msg{position:absolute; inset:6px; display:flex; flex-direction:column; gap:12px;
  align-items:center; justify-content:center; text-align:center; background:rgba(2,4,10,.86); border-radius:6px; z-index:4}
.pac-msg .go-big{font-size:clamp(16px,5vw,26px); color:var(--neon); text-shadow:0 0 10px var(--pink)}
.pac-msg .go-sc{font-size:10px; color:var(--neon2)}

/* captura iniciales */
.ini-box{position:absolute; inset:6px; display:flex; flex-direction:column; gap:10px;
  align-items:center; justify-content:center; text-align:center; background:rgba(2,4,12,.92); border-radius:6px; z-index:5}
.ini-title{font-size:13px; color:var(--neon); text-shadow:0 0 10px var(--pink)}
.ini-sub{font-size:8px; color:#9fb4d6; letter-spacing:1px}
.ini-slots{display:flex; gap:8px}
.ini-slot{width:34px; height:44px; display:flex; align-items:center; justify-content:center;
  font-size:20px; color:var(--neon); background:#0d1224; border:2px solid #25406b; border-radius:6px; cursor:pointer}
.ini-slot.active{border-color:var(--neon); box-shadow:0 0 10px var(--neon); animation:blink 1s steps(2,end) infinite}
.ini-pad{display:grid; grid-template-columns:repeat(4,44px); gap:6px; align-items:center; margin-top:4px}
.ini-pad button{font-family:inherit; font-size:12px; padding:10px 0; cursor:pointer; color:#04121a;
  background:linear-gradient(#33f0ff,#00bcd4); border:none; border-radius:6px; box-shadow:0 3px 0 #007a8a}
.ini-pad button.ok{background:linear-gradient(var(--neon),#d9c400); box-shadow:0 3px 0 #8c7d00; grid-column:auto}
.ini-pad button:active{transform:translateY(2px)}
.ini-hint{font-size:7px; color:#6a7da0; letter-spacing:1px}

/* leaderboard */
.leaderboard{min-width:170px; flex:0 1 200px; background:#080b16; border:2px solid var(--neon2);
  border-radius:10px; padding:10px; box-shadow:0 0 16px #00e5ff44, inset 0 0 14px #000}
.lb-title{font-size:9px; color:var(--neon); text-align:center; letter-spacing:1px; margin-bottom:8px}
.lb-body{display:flex; flex-direction:column; gap:5px; min-height:120px}
.lb-row{display:grid; grid-template-columns:24px 1fr auto; gap:6px; font-size:9px; color:var(--txt); align-items:center}
.lb-row span:first-child{color:#6a7da0}
.lb-ini{color:var(--neon2); letter-spacing:2px}
.lb-sc{color:var(--neon); text-shadow:0 0 5px #ffe60055}
.lb-empty{font-size:8px; color:#6a7da0; text-align:center; padding:20px 0}
.lb-foot{font-size:7px; color:#6a7da0; text-align:center; margin-top:8px; letter-spacing:1px}

/* D-pad táctil */
.dpad{display:none; grid-template-columns:repeat(3,52px); grid-template-rows:repeat(3,52px); gap:6px;
  margin-top:6px; touch-action:none}
.dpad button{font-family:inherit; font-size:16px; color:#04121a; border:none; border-radius:10px; cursor:pointer;
  background:linear-gradient(var(--neon),#d9c400); box-shadow:0 4px 0 #8c7d00}
.dpad button:active{transform:translateY(3px); box-shadow:0 1px 0 #8c7d00}
.dpad .d-up{grid-area:1/2} .dpad .d-left{grid-area:2/1} .dpad .d-down{grid-area:3/2} .dpad .d-right{grid-area:2/3}
.pac-help{font-size:7px; color:#6a7da0; text-align:center; letter-spacing:1px; max-width:90%}
.site-foot{font-size:8px; color:#3f4a63; letter-spacing:2px; padding:8px}

/* ════════════ Móvil ════════════ */
@media (max-width:820px){
  body{padding:10px 6px 20px; gap:10px}
  .deco{display:none}
  .tv{width:96vw; padding:12px 12px 8px}
  .marquee{width:96vw; justify-content:center}
  .controls{width:96vw}
  .arcade{width:96vw}
  .pac-wrap{flex-direction:column; align-items:center}
  .leaderboard{width:min(88vw,420px); flex:none}
  .lb-body{min-height:auto}
  .dpad{display:grid}              /* D-pad visible en móvil */
}
@media (hover:none) and (pointer:coarse){
  .dpad{display:grid}             /* cualquier táctil */
}

/* ════════════ Juego DOS (js-dos) ════════════ */
.dos-wrap{display:flex; gap:16px; align-items:flex-start; justify-content:center; width:100%; flex-wrap:wrap}
.dos-screen{position:relative; width:min(92vw,640px); aspect-ratio:4/3; background:#000;
  border-radius:10px; padding:0; border:6px solid #0c0d10;
  box-shadow:inset 0 0 30px #000, 0 0 0 3px #313644; overflow:hidden}
.dos-screen #dos{position:absolute; inset:0; width:100%; height:100%; background:#05060a !important}
.dos-screen .jsdos-rso{width:100%; height:100%}
@media (max-width:820px){
  .dos-screen{width:96vw}
}