:root{
  --pink:#e0218a;
  --pink-dk:#8c0f55;
  --ink:#0c0c14;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{
  height:100%;
  background:#000;
  color:#fff;
  font-family:'Press Start 2P', monospace;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  touch-action:none;
}
#frame{
  position:relative;
  width:100vw;
  height:100vh;
  height:100dvh;   /* área visible real en iOS (no queda tapado por la barra de Safari) */
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at 50% 40%, #14141f 0%, #000 80%);
}
#stage{ display:contents; }   /* escritorio: wrapper transparente (canvas centrado por #frame) */
#game{
  image-rendering:auto;   /* contenido = fotos (portada + intro): se escalan suaves/nítidas, sin bloques */
  background:#000;
  /* size set by JS to integer scale */
  box-shadow:0 0 0 4px #1a1a26, 0 0 40px rgba(224,33,138,.25);
}
#scanlines{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,.18) 3px,
    rgba(0,0,0,.18) 4px
  );
  mix-blend-mode:multiply;
}
#hint{
  position:fixed;
  bottom:6px;left:0;right:0;
  text-align:center;
  font-size:8px;
  line-height:1.6;
  color:#6a6a82;
  padding:0 8px;
}

/* ---- Reward overlay ---- */
.overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(4,4,10,.86);
  z-index:5;
  padding:16px;
}
.hidden{display:none !important;}
.reward-box{
  width:min(440px,92vw);
  border:4px solid var(--pink);
  background:#0c0c14;
  padding:22px 20px;
  text-align:center;
  box-shadow:0 0 24px rgba(224,33,138,.5);
}
.reward-box h2{
  color:var(--pink);
  font-size:14px;
  line-height:1.5;
  margin-bottom:14px;
}
.reward-copy{font-size:9px;line-height:1.9;margin-bottom:18px;color:#e8e8f0;}
#reward-form{display:flex;flex-direction:column;gap:10px;}
#reward-email{
  font-family:inherit;
  font-size:10px;
  padding:12px;
  background:#16161f;
  border:2px solid #44445a;
  color:#fff;
  text-align:center;
}
#reward-email:focus{outline:none;border-color:var(--pink);}
#reward-submit{
  font-family:inherit;
  font-size:11px;
  padding:13px;
  background:var(--pink);
  color:#fff;
  border:none;
  cursor:pointer;
  letter-spacing:1px;
}
#reward-submit:active{transform:translateY(2px);}
#reward-submit:disabled{opacity:.5;cursor:default;}
.reward-result{font-size:9px;line-height:1.9;margin-top:16px;color:#ffd34d;}
.reward-result b{color:#fff;}
.reward-fine{font-size:7px;line-height:1.8;margin-top:16px;color:#5a5a72;}

/* ---- Saltar intro ---- */
#skip-intro{
  position:absolute;
  top:14px; right:14px;
  z-index:6;
  font-family:inherit;
  font-size:8px;
  padding:8px 10px;
  color:#e9d9b6;
  background:rgba(8,6,10,.6);
  border:2px solid rgba(224,33,138,.6);
  border-radius:6px;
  cursor:pointer;
  letter-spacing:1px;
}
#skip-intro:active{ background:rgba(224,33,138,.7); }

/* ---- Control táctil retro (solo celular: body.mobile) ---- */
#gamepad{ display:none; }                       /* oculto en escritorio */

body.mobile{ touch-action:none; }
body.mobile #frame{ flex-direction:column; justify-content:flex-start; align-items:stretch; }
body.mobile #stage{ display:flex; flex:1 1 auto; min-height:0; align-items:center; justify-content:center; }  /* 2/3 arriba, juego centrado */
body.mobile #game{ margin:0; }
body.mobile #hint{ display:none; }

body.mobile #gamepad{
  display:flex; align-items:center; justify-content:center;
  flex:0 0 28dvh; min-height:0;
  position:relative; z-index:4;
  padding:6px 10px calc(6px + env(safe-area-inset-bottom));
  background:#15111b; border-top:3px solid var(--pink);
  user-select:none;
}
/* contenedor con el mismo aspecto que la imagen del control (2:1): los % de los botones calzan con la imagen */
#ctrl{ position:relative; width:100%; aspect-ratio:2 / 1; max-height:100%; }
#ctrl-img{ width:100%; height:100%; object-fit:contain; display:block; pointer-events:none; -webkit-user-drag:none; user-select:none; }
/* zonas táctiles invisibles encima de cada botón del mando */
#ctrl .zone{ position:absolute; background:transparent; border:0; padding:0; border-radius:12%; cursor:pointer; -webkit-tap-highlight-color:transparent; }
#ctrl .zone:active{ background:rgba(255,255,255,.22); }
#ctrl .z-up{    left:11%; top:21%; width:14%; height:23%; }
#ctrl .z-down{  left:11%; top:56%; width:14%; height:23%; }
#ctrl .z-left{  left:2%;  top:41%; width:11%; height:18%; }
#ctrl .z-right{ left:21%; top:41%; width:12%; height:18%; }
#ctrl .z-b{     left:59%; top:31%; width:14%; height:33%; }
#ctrl .z-a{     left:75%; top:31%; width:15%; height:33%; }
#ctrl .z-start{ left:37%; top:62%; width:17%; height:17%; }