/* ===========================================================
   NOSTALMAX · arcade.css  —  estilos retro compartidos
   Reutilizado por todos los juegos de la colección.
   =========================================================== */
:root{
  --bg:#0d0221;
  --grid:#1b0840;
  --neon-cyan:#00f6ff;
  --neon-magenta:#ff2e97;
  --neon-yellow:#ffe600;
  --snake:#39ff14;
  --snake-dark:#1f9e0c;
  --food:#ff2e97;
  --text:#e8e3ff;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  background:var(--bg);color:var(--text);
  font-family:'Courier New',monospace;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  min-height:100%;overflow:hidden;user-select:none;touch-action:none;
}
/* CRT scanlines */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:50;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0.18) 0,rgba(0,0,0,0.18) 1px,transparent 2px,transparent 3px);
  mix-blend-mode:multiply;
}

header{text-align:center;margin:10px 0 6px;}
.logo{font-weight:bold;letter-spacing:4px;font-size:26px;color:var(--neon-cyan);
  text-shadow:0 0 6px var(--neon-cyan),0 0 14px var(--neon-cyan);}
.logo b{color:var(--neon-magenta);text-shadow:0 0 6px var(--neon-magenta),0 0 14px var(--neon-magenta);}
.sub{font-size:11px;letter-spacing:6px;color:var(--neon-yellow);text-shadow:0 0 6px var(--neon-yellow);margin-top:2px;}

.topbar{display:flex;justify-content:space-between;align-items:flex-start;
  width:96vw;max-width:420px;padding:0 4px;margin:10px 0 6px;gap:10px;}
.tleft{display:flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1.15;}
.tleft .logo{font-size:21px;letter-spacing:3px;position:relative;}
.beta{font-size:9px;letter-spacing:1px;color:var(--neon-yellow);background:rgba(255,230,0,.12);
  border:1px solid var(--neon-yellow);border-radius:3px;padding:0 3px;margin-left:5px;vertical-align:middle;
  text-shadow:0 0 5px var(--neon-yellow);}
.tleft .sub{font-size:10px;letter-spacing:5px;margin:0;}
.hud{display:flex;gap:16px;font-size:13px;letter-spacing:1px;margin-top:3px;}
.hud .label{color:var(--neon-yellow);}
.hud .val{color:#fff;}

#wrap{position:relative;width:96vw;max-width:420px;aspect-ratio:1/1;}
canvas{width:100%;height:100%;display:block;background:var(--bg);
  border:3px solid var(--neon-magenta);
  box-shadow:0 0 12px var(--neon-magenta),inset 0 0 18px rgba(255,46,151,.25);
  border-radius:4px;image-rendering:pixelated;}

/* Overlays */
.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(13,2,33,0.86);backdrop-filter:blur(2px);text-align:center;padding:18px;z-index:20;}
.overlay.hidden{display:none;}
.overlay h2{font-size:22px;letter-spacing:3px;margin-bottom:14px;}
.overlay h2.win{color:var(--neon-yellow);text-shadow:0 0 10px var(--neon-yellow);}
.overlay h2.over{color:var(--neon-magenta);text-shadow:0 0 10px var(--neon-magenta);}
.overlay p{font-size:13px;line-height:1.6;margin-bottom:14px;opacity:.9;}
.prog{font-size:12px;letter-spacing:1px;color:var(--neon-yellow);margin-bottom:12px;
  background:rgba(255,230,0,.07);border:1px solid rgba(255,230,0,.3);border-radius:6px;padding:6px 12px;}
.prog b{color:#fff;}

.btn{font-family:inherit;font-weight:bold;letter-spacing:2px;font-size:15px;
  background:transparent;color:var(--neon-cyan);border:2px solid var(--neon-cyan);
  padding:10px 20px;margin:5px;border-radius:4px;cursor:pointer;
  text-shadow:0 0 6px var(--neon-cyan);box-shadow:0 0 8px rgba(0,246,255,.4);transition:transform .05s;}
.btn:active{transform:scale(.94);}
.btn.magenta{color:var(--neon-magenta);border-color:var(--neon-magenta);text-shadow:0 0 6px var(--neon-magenta);box-shadow:0 0 8px rgba(255,46,151,.4);}
.btn.yellow{color:var(--neon-yellow);border-color:var(--neon-yellow);text-shadow:0 0 6px var(--neon-yellow);box-shadow:0 0 8px rgba(255,230,0,.4);}

/* Initials entry */
.initials{display:flex;gap:14px;margin:10px 0 6px;}
.slot{width:46px;height:60px;border:2px solid var(--neon-yellow);border-radius:4px;
  display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:bold;
  color:var(--neon-yellow);text-shadow:0 0 8px var(--neon-yellow);position:relative;}
.slot.active{box-shadow:0 0 14px var(--neon-yellow);animation:blink 1s steps(2) infinite;}
@keyframes blink{50%{opacity:.35;}}
.arrowrow{display:flex;flex-direction:column;align-items:center;}
.charbtn{font-size:18px;color:var(--neon-cyan);background:none;border:none;cursor:pointer;padding:2px 8px;}

/* Leaderboard */
.lb-layout{display:flex;gap:22px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:6px;}
.lb-btns{display:flex;flex-direction:column;gap:10px;}
table.lb{font-size:14px;letter-spacing:2px;margin:6px 0 12px;border-collapse:collapse;}
table.lb td{padding:3px 12px;}
table.lb .rank{color:var(--neon-yellow);}
table.lb .ini{color:var(--neon-cyan);font-weight:bold;}
table.lb .sc{color:#fff;}
table.lb tr.me .ini{color:var(--neon-magenta);text-shadow:0 0 8px var(--neon-magenta);}
table.lb td.uname{color:var(--text);letter-spacing:1px;max-width:120px;overflow:hidden;text-overflow:ellipsis;}
table.lb tr.me td.uname{color:var(--neon-magenta);text-shadow:0 0 8px var(--neon-magenta);}

/* Leaderboard online: pestañas semanal/mensual/histórico */
.lb-tabs{display:flex;gap:6px;justify-content:center;margin:4px 0 10px;}
.lb-tabs button{font-family:inherit;font-size:11px;letter-spacing:1px;cursor:pointer;
  color:var(--text);background:rgba(255,255,255,.05);border:2px solid rgba(255,255,255,.22);
  padding:6px 10px;border-radius:5px;}
.lb-tabs button.sel{color:#0d0221;background:var(--neon-cyan);border-color:var(--neon-cyan);font-weight:bold;
  box-shadow:0 0 10px rgba(0,246,255,.5);}
.lb-body{min-height:60px;max-height:42vh;overflow-y:auto;}
.lb-foot{display:flex;gap:10px;justify-content:center;margin-top:8px;}
.lb-note{font-size:11px;opacity:.8;margin-top:8px;letter-spacing:1px;text-align:center;}
.lb-note a{color:var(--neon-yellow);}
.lb-empty{font-size:13px;opacity:.7;padding:18px 0;}

/* Modal de cuenta (registro / login) */
.authmodal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background:rgba(5,1,18,.82);backdrop-filter:blur(3px);padding:16px;}
.authmodal.hidden{display:none;}
.authbox{position:relative;width:100%;max-width:340px;background:#140735;border:2px solid var(--neon-cyan);
  border-radius:12px;box-shadow:0 0 22px rgba(0,246,255,.35);padding:22px 20px 20px;text-align:center;
  max-height:88vh;overflow-y:auto;}
.authx{position:absolute;top:8px;right:10px;background:none;border:none;color:var(--text);font-size:18px;cursor:pointer;opacity:.7;}
.authbody h2{font-size:20px;letter-spacing:2px;margin-bottom:12px;}
.auth-sub{font-size:12px;opacity:.75;margin-bottom:14px;}
.auth-tabs{display:flex;gap:6px;justify-content:center;margin-bottom:12px;}
.auth-tabs button{flex:1;font-family:inherit;font-size:12px;letter-spacing:1px;cursor:pointer;
  color:var(--text);background:rgba(255,255,255,.05);border:2px solid rgba(255,255,255,.22);padding:8px;border-radius:5px;}
.auth-tabs button.sel{color:#0d0221;background:var(--neon-yellow);border-color:var(--neon-yellow);font-weight:bold;}
.auth-in{width:100%;font-family:inherit;font-size:14px;color:var(--text);background:rgba(255,255,255,.06);
  border:2px solid rgba(0,246,255,.35);border-radius:6px;padding:11px 12px;margin:6px 0;}
.auth-in:focus{outline:none;border-color:var(--neon-cyan);box-shadow:0 0 8px rgba(0,246,255,.4);}
.auth-hint{font-size:11px;text-align:left;min-height:14px;letter-spacing:1px;opacity:.85;margin:-2px 2px 2px;}
.auth-hint.ok{color:var(--snake);} .auth-hint.bad{color:var(--neon-magenta);}
.auth-chk{display:flex;gap:8px;align-items:flex-start;font-size:12px;text-align:left;margin:8px 2px;line-height:1.4;cursor:pointer;}
.auth-chk input{margin-top:2px;}
.auth-disc{font-size:10.5px;opacity:.62;text-align:left;line-height:1.5;margin:6px 2px 12px;}
.auth-err{color:var(--neon-magenta);font-size:12px;min-height:16px;letter-spacing:1px;margin-bottom:4px;}
.authbody .btn{width:100%;margin:6px 0 0;}

/* Celebración de nivel */
.cele-stars{font-size:28px;letter-spacing:8px;color:var(--neon-yellow);margin-bottom:6px;animation:twinkle .8s infinite alternate;}
@keyframes twinkle{from{opacity:.4;text-shadow:none;}to{opacity:1;text-shadow:0 0 16px var(--neon-yellow);}}
.cele-title{font-size:23px;letter-spacing:2px;color:var(--neon-yellow);text-shadow:0 0 12px var(--neon-yellow);margin-bottom:8px;animation:pop .45s ease;}
@keyframes pop{0%{transform:scale(.3);opacity:0;}70%{transform:scale(1.15);}100%{transform:scale(1);opacity:1;}}
.cele-score{font-size:17px;color:var(--text);margin-bottom:14px;}
.cele-score b{color:var(--neon-cyan);text-shadow:0 0 8px var(--neon-cyan);font-size:20px;}

/* On-screen controls — D-pad grande y centrado, todo el ancho abajo libre */
#controls{display:flex;align-items:center;justify-content:center;
  width:96vw;max-width:420px;margin-top:12px;}
.dpad{display:grid;grid-template-columns:repeat(3,64px);grid-template-rows:repeat(3,64px);gap:6px;}
.dpad button{font-family:inherit;font-size:28px;color:var(--neon-cyan);
  background:rgba(0,246,255,.10);border:2px solid rgba(0,246,255,.55);border-radius:8px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 6px rgba(0,246,255,.18);}
.dpad button:active{background:rgba(0,246,255,.35);transform:scale(.95);}
.dpad .sp{visibility:hidden;border:none;background:none;box-shadow:none;}
/* Toggles integrados: apagado = gris tenue, encendido = neón */
.toggles{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-end;gap:8px;align-items:center;}
.tog{font-family:inherit;font-size:12px;font-weight:bold;letter-spacing:1px;cursor:pointer;
  padding:7px 11px;border-radius:6px;white-space:nowrap;
  color:#56566c;background:rgba(255,255,255,.03);border:2px solid #3a3a4a;transition:all .12s;}
.tog.on{color:var(--snake);border-color:var(--snake);background:rgba(57,255,20,.10);
  text-shadow:0 0 6px var(--snake);box-shadow:0 0 9px rgba(57,255,20,.4);}
.tog:active{transform:scale(.94);}
/* Botones de acción propios de un juego (ej. Cañones: DISPARAR/MUNICIÓN) */
.cn-actions{display:flex;flex-direction:column;gap:8px;margin-left:14px;}
.cn-actions .btn{margin:0;font-size:13px;padding:11px 14px;min-width:140px;}
.hint{font-size:12px;opacity:.92;margin-top:10px;text-align:center;letter-spacing:1px;color:var(--text);}
.ver{font-size:11px;letter-spacing:2px;margin-top:5px;color:var(--neon-cyan);opacity:.75;}
/* Selector de modo en la pantalla de inicio */
.modes{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;justify-content:center;}
.modebtn{font-family:inherit;font-size:12px;letter-spacing:1px;color:var(--text);
  background:rgba(255,255,255,.05);border:2px solid rgba(255,255,255,.25);
  padding:8px 14px;border-radius:5px;cursor:pointer;}
.modebtn.sel{color:#0d0221;background:var(--neon-yellow);border-color:var(--neon-yellow);
  box-shadow:0 0 12px rgba(255,230,0,.6);text-shadow:none;font-weight:bold;}

/* Hub / menú de juegos */
.menu{display:flex;flex-direction:column;gap:12px;width:96vw;max-width:420px;margin-top:18px;}
.gamecard{display:flex;align-items:center;gap:14px;text-decoration:none;
  background:rgba(255,255,255,.04);border:2px solid var(--neon-cyan);border-radius:8px;
  padding:14px 16px;color:var(--text);box-shadow:0 0 8px rgba(0,246,255,.25);transition:transform .05s;}
.gamecard:active{transform:scale(.98);}
.gamecard .ico{font-size:28px;}
.gamecard .nm{font-weight:bold;letter-spacing:2px;color:var(--neon-cyan);text-shadow:0 0 6px var(--neon-cyan);}
.gamecard .ds{font-size:11px;opacity:.7;}
.gamecard.soon{border-color:#555;box-shadow:none;opacity:.55;pointer-events:none;}
.gamecard.soon .nm{color:#888;text-shadow:none;}

/* Barra deslizante bajo el juego (Arkanoid/Naves/Autos): mover sin tapar la pantalla */
.slidebar{position:relative;width:96vw;max-width:420px;height:56px;margin-top:12px;
  border-radius:10px;background:rgba(0,246,255,.04);border:2px solid rgba(0,246,255,.45);
  box-shadow:inset 0 0 12px rgba(0,246,255,.18);touch-action:none;overflow:hidden;cursor:pointer;}
.slidebar .sb-knob{position:absolute;top:50%;left:50%;width:48px;height:40px;
  transform:translate(-50%,-50%);border-radius:8px;background:rgba(0,246,255,.3);
  border:2px solid var(--neon-cyan);box-shadow:0 0 12px rgba(0,246,255,.55);}
.slidebar .sb-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:11px;letter-spacing:3px;color:rgba(232,227,255,.45);pointer-events:none;transition:opacity .2s;}

/* Joystick analógico + botones de acción (Tanques/Comando) */
#controls.with-joy{justify-content:center;gap:20px;}
.joyslot{width:150px;height:150px;display:flex;align-items:center;justify-content:center;}
.joy{position:relative;width:150px;height:150px;border-radius:50%;touch-action:none;
  background:radial-gradient(circle at 50% 50%,rgba(0,246,255,.10),rgba(0,246,255,.02));
  border:2px solid rgba(0,246,255,.4);box-shadow:0 0 12px rgba(0,246,255,.2),inset 0 0 18px rgba(0,246,255,.08);}
.joy .knob{position:absolute;left:50%;top:50%;width:60px;height:60px;border-radius:50%;
  transform:translate(-50%,-50%);background:rgba(0,246,255,.28);border:2px solid var(--neon-cyan);
  box-shadow:0 0 14px rgba(0,246,255,.55);}
.actcol{display:flex;flex-direction:column;gap:12px;}
.actbtn{font-family:inherit;font-weight:bold;letter-spacing:1px;font-size:14px;line-height:1.1;
  min-width:96px;min-height:56px;padding:10px 14px;border-radius:12px;cursor:pointer;
  color:var(--neon-yellow);background:rgba(255,230,0,.08);border:2px solid var(--neon-yellow);
  text-shadow:0 0 6px var(--neon-yellow);box-shadow:0 0 8px rgba(255,230,0,.3);}
.actbtn.cyan{color:var(--neon-cyan);border-color:var(--neon-cyan);
  text-shadow:0 0 6px var(--neon-cyan);box-shadow:0 0 8px rgba(0,246,255,.3);background:rgba(0,246,255,.08);}
.actbtn:active{transform:scale(.94);}

/* ===== PC/escritorio: el juego ocupa el alto disponible; los costados quedan libres (publicidad futura) =====
   (al final del archivo para tener prioridad sobre las reglas base de .topbar/#wrap/#controls) */
@media (min-width:760px) and (min-height:560px){
  body{justify-content:center;}
  :root{--game-w:min(86vw, calc(100vh - 330px), 720px);}
  .topbar,#wrap,#controls,.slidebar{width:var(--game-w);max-width:none;}
  #controls{justify-content:center;}
}