/* ===========================================================
   SYNKRO POWER MACHINE — estilo retro arcade
   azul noche + neón cálido, scanlines, pixel headings.
   =========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

:root{
  --night:#141A2A;        /* fondo base */
  --night2:#0E1322;       /* más oscuro */
  --panel:#1E263B;        /* tarjetas */
  --panel2:#27314A;
  --ink:#FBF4E6;          /* texto crema */
  --muted:#9AA6C0;
  --orange:#FF8A1E;
  --orange-d:#E86A10;
  --red:#E8261C;
  --scarf:#7E1A1C;
  --cyan:#4FD0E0;
  --green:#5BD06A;
  --line:#33405E;
  --pix:"Press Start 2P", monospace;
  --read:"VT323", monospace;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;}
body{
  background:var(--night);
  color:var(--ink);
  font-family:var(--read);
  font-size:21px;
  line-height:1.5;
  min-height:100vh;
  overflow-x:hidden;
}
/* subtle starfield + vignette + scanlines layered on the body */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(255,138,30,.10), transparent 55%),
    radial-gradient(80% 80% at 50% 120%, rgba(79,208,224,.06), transparent 60%);
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;opacity:.5;
}
.wrap{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:0 22px;}

/* ---- pixel type helpers ---- */
.pix{font-family:var(--pix);line-height:1.5;letter-spacing:.5px;}
h1,h2,h3{font-family:var(--pix);font-weight:400;line-height:1.45;margin:0;}
.glow{text-shadow:0 0 12px rgba(255,138,30,.5), 3px 3px 0 var(--scarf);}

/* ---- top nav ---- */
.nav{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 0 8px;position:relative;z-index:2;}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);}
.brand img{width:46px;height:46px;image-rendering:pixelated;border-radius:10px;
  border:2px solid var(--line);background:#222;}
.brand .bn{font-family:var(--pix);font-size:12px;line-height:1.4;}
.brand .bn b{color:var(--orange);display:block;}
.brand .bn span{color:var(--muted);font-size:10px;}
.navlinks{display:flex;gap:8px;}
.navlinks a{font-family:var(--pix);font-size:10px;color:var(--muted);text-decoration:none;
  padding:9px 12px;border-radius:9px;border:2px solid transparent;}
.navlinks a:hover,.navlinks a.on{color:var(--ink);border-color:var(--line);background:var(--panel);}

/* ---- arcade button ---- */
.btn{display:inline-flex;align-items:center;gap:12px;cursor:pointer;text-decoration:none;
  font-family:var(--pix);font-size:13px;color:#fff;
  padding:18px 24px;border-radius:14px;border:2px solid rgba(255,255,255,.22);
  background:linear-gradient(var(--orange),var(--orange-d));
  box-shadow:0 6px 0 #9A4408, 0 10px 18px rgba(0,0,0,.4);
  transition:transform .08s, box-shadow .08s, filter .08s;}
.btn:active{transform:translateY(5px);box-shadow:0 1px 0 #9A4408,0 4px 10px rgba(0,0,0,.4);}
.btn .ico{width:26px;height:26px;display:flex;}
.btn .ico svg{width:100%;height:100%;}
.btn.ghost{background:var(--panel);box-shadow:0 6px 0 #0C1322,0 10px 18px rgba(0,0,0,.35);border-color:var(--line);}
.btn.ghost:active{transform:translateY(5px);box-shadow:0 1px 0 #0C1322;}
.btn.cyan{background:linear-gradient(#5BDCEC,#2BAFC2);box-shadow:0 6px 0 #176B79,0 10px 18px rgba(0,0,0,.4);}
.btn.cyan:active{box-shadow:0 1px 0 #176B79;}
.btn small{font-family:var(--read);font-size:15px;opacity:.85;font-weight:normal;letter-spacing:0;}

/* ---- footer ---- */
.foot{text-align:center;color:var(--muted);font-size:18px;padding:46px 0 40px;}
.foot a{color:var(--orange);text-decoration:none;}
.foot .mini{font-family:var(--pix);font-size:9px;letter-spacing:.5px;margin-top:8px;color:#586079;}

/* blink */
@keyframes blink{50%{opacity:.25}}
.blink{animation:blink 1.1s steps(1) infinite;}

@media(max-width:640px){
  body{font-size:19px;}
  .brand .bn{font-size:10px;}
  .navlinks a{font-size:9px;padding:8px 9px;}
  h1,h2,h3{line-height:1.5;}
}

/* --- móvil: evitar desborde horizontal del hero de cada juego --- */
@media(max-width:640px){
  .ghero{grid-template-columns:1fr !important;gap:16px !important;text-align:center;padding:22px !important;}
  .ghero .appicon{margin:0 auto;width:120px !important;height:120px !important;}
  .ghero .info{min-width:0;}
  .ghero h1{font-size:22px !important;}
  .ghero .sub{font-size:17px !important;}
  .ghero .chips{justify-content:center;}
  .ghero .actions,.ghero .btns{justify-content:center;}
  h1,h2,h3{overflow-wrap:anywhere;word-break:break-word;}
  .hero h1{font-size:26px !important;}
}