/* ===========================================================
   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:center;
  width:96vw;max-width:420px;padding:0 4px;margin-bottom:6px;gap:10px;}
.hud{display:flex;gap:18px;font-size:13px;letter-spacing:1px;}
.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;}

.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 */
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);}

/* 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 compactos en la barra superior */
.toggles{display:flex;flex-direction:row;gap:8px;align-items:center;}
.tog{font-family:inherit;font-size:11px;letter-spacing:1px;color:var(--text);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.25);
  padding:6px 9px;border-radius:5px;cursor:pointer;white-space:nowrap;}
.tog .on{color:var(--snake);}
.tog .off{color:#777;}
.hint{font-size:10px;opacity:.5;margin-top:8px;text-align:center;letter-spacing:1px;}
.ver{font-size:10px;letter-spacing:2px;margin-top:4px;color:var(--neon-cyan);opacity:.4;}
/* 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:var(--neon-yellow);border-color:var(--neon-yellow);
  box-shadow:0 0 8px rgba(255,230,0,.4);text-shadow:0 0 6px var(--neon-yellow);}

/* 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;}