* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* --u = 1% del alto de la pantalla del juego (lo calcula juego.js) */
  --u: 5px;
  --bisel-x: 28px;
  --bisel-y: 14px;
}

html, body {
  width: 100%;
  height: 100%;
  background: #050507;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  font-family: system-ui, -apple-system, sans-serif;
}

#contenedor {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

#telefono { position: relative; }

#pantalla {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
}

#juego { display: block; background: #000; }

#isla, .boton-lateral, #ayuda { display: none; }

/* ------------------------------------------------------------------ */
/* Computador: el juego dentro de un celular en horizontal             */
/* ------------------------------------------------------------------ */
body.escritorio {
  background: radial-gradient(ellipse at 50% 35%, #3a0c0c 0%, #140406 45%, #050507 80%);
}

body.escritorio #telefono {
  padding: var(--bisel-y) var(--bisel-x);
  border-radius: calc(var(--bisel-y) * 3.6);
  background: linear-gradient(160deg, #4a4a52 0%, #1b1b20 35%, #0d0d10 70%, #2b2b31 100%);
  box-shadow:
    0 0 0 1.5px #6a6a72,
    0 0 0 4px #1a1a1e,
    0 40px 90px rgba(0, 0, 0, 0.85),
    0 0 120px rgba(200, 20, 20, 0.18),
    inset 0 0 0 2px #000;
}

body.escritorio #pantalla { border-radius: calc(var(--bisel-y) * 2.4); }

/* Botones físicos en el canto superior (en horizontal quedan arriba) */
body.escritorio .boton-lateral {
  display: block;
  position: absolute;
  top: -4px;
  height: 5px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(#6a6a72, #2a2a30);
}
body.escritorio .volumen { left: 18%; width: 9%; box-shadow: calc(var(--bisel-y) * 7) 0 0 #4a4a52; }
body.escritorio .encendido { top: auto; bottom: -4px; right: 22%; width: 12%; border-radius: 0 0 3px 3px; }

/* "Isla" de la cámara al costado izquierdo de la pantalla */
body.escritorio #isla {
  display: block;
  position: absolute;
  left: calc(var(--u) * 1.6);
  top: 50%;
  transform: translateY(-50%);
  width: calc(var(--u) * 5.5);
  height: calc(var(--u) * 22);
  border-radius: 999px;
  background: #000;
  z-index: 5;
}
body.escritorio #isla::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 22%;
  width: calc(var(--u) * 2.4);
  height: calc(var(--u) * 2.4);
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #3a4a7a, #0a0f1e 60%);
}

body.escritorio #ayuda {
  display: block;
  color: #9a9aa2;
  font-size: 14px;
  letter-spacing: 0.02em;
}
kbd {
  display: inline-block;
  min-width: 22px;
  padding: 2px 6px;
  margin: 0 2px;
  border: 1px solid #555;
  border-bottom-width: 3px;
  border-radius: 5px;
  background: #1a1a1e;
  color: #eee;
  font: 12px ui-monospace, monospace;
  text-align: center;
}

/* ------------------------------------------------------------------ */
/* Controles táctiles: control de la NES                               */
/* ------------------------------------------------------------------ */
/* --u = 1% del alto de la pantalla del juego. Los colores imitan el
   control original: plástico gris claro, franjas negras, botones rojos. */
#tactil {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  --nes-gris: rgba(200, 200, 200, 0.82);
  --nes-negro: rgba(22, 22, 24, 0.88);
  --nes-rojo: #d4231c;
}
body[data-estado="jugando"] #tactil { display: block; }

#tactil, #tactil * {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.boton { pointer-events: auto; transition: transform 0.05s, filter 0.05s; }

/* --- Cruz --- */
#pad {
  position: absolute;
  left: max(calc(var(--u) * 4), env(safe-area-inset-left));
  bottom: calc(var(--u) * 5);
  width: calc(var(--u) * 43);
  height: calc(var(--u) * 43);
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  pointer-events: auto;
  border-radius: 50%;
  background: radial-gradient(circle, var(--nes-gris) 0 64%, transparent 65%);
  padding: calc(var(--u) * 3);
}
#pad .boton,
#pad .cruz-centro {
  background: #1d1d1f;
  pointer-events: none;
  box-shadow: inset 0 calc(var(--u) * -0.8) 0 rgba(0, 0, 0, 0.55), inset 0 calc(var(--u) * 0.6) 0 rgba(255, 255, 255, 0.08);
}
#pad .arriba    { grid-area: 1 / 2; border-radius: calc(var(--u) * 1.4) calc(var(--u) * 1.4) 0 0; }
#pad .izquierda { grid-area: 2 / 1; border-radius: calc(var(--u) * 1.4) 0 0 calc(var(--u) * 1.4); }
#pad .cruz-centro { grid-area: 2 / 2; box-shadow: none; position: relative; }
#pad .cruz-centro::after {
  content: ''; position: absolute; inset: 22%;
  border-radius: 50%; background: radial-gradient(circle at 40% 35%, #333 0, #151516 70%);
}
#pad .derecha   { grid-area: 2 / 3; border-radius: 0 calc(var(--u) * 1.4) calc(var(--u) * 1.4) 0; }
#pad .abajo     { grid-area: 3 / 2; border-radius: 0 0 calc(var(--u) * 1.4) calc(var(--u) * 1.4); }
/* Flechas en relieve sobre cada brazo */
#pad .boton::after {
  content: ''; display: block; margin: auto; width: 0; height: 0;
  border: calc(var(--u) * 1.9) solid transparent;
  position: relative; top: 50%; transform: translateY(-50%);
}
#pad .arriba::after    { border-bottom-color: #4a4a4e; border-top-width: 0; }
#pad .abajo::after     { border-top-color: #4a4a4e; border-bottom-width: 0; }
#pad .izquierda::after { border-right-color: #4a4a4e; border-left-width: 0; }
#pad .derecha::after   { border-left-color: #4a4a4e; border-right-width: 0; }
#pad .boton.activo { filter: brightness(2.2); }

/* --- SELECT / START --- */
#nes-centro {
  position: absolute;
  left: 50%;
  bottom: calc(var(--u) * 3);
  transform: translateX(-50%);
  display: flex;
  gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 1.6) calc(var(--u) * 3) calc(var(--u) * 1);
  border-radius: calc(var(--u) * 2);
  background: var(--nes-negro);
}
.nes-pastilla { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.8); }
.nes-pastilla .boton {
  width: calc(var(--u) * 11);
  height: calc(var(--u) * 4.2);
  border-radius: calc(var(--u) * 2.1);
  background: #2c2c2f;
  border: calc(var(--u) * 0.5) solid #8e8e8e;
}
.nes-pastilla .boton.activo { transform: scale(0.92); filter: brightness(1.8); }
.nes-pastilla span, .nes-tecla span {
  font-family: 'Press Start 2P', monospace;
  color: var(--nes-rojo);
  line-height: 1;
}
.nes-pastilla span { font-size: calc(var(--u) * 2.2); }
/* Sin sonido, SELECT queda encendido en rojo */
body.silencio #btn-sonido { background: var(--nes-rojo); border-color: #ff7a70; }

/* --- B / A --- */
#acciones {
  position: absolute;
  right: max(calc(var(--u) * 4), env(safe-area-inset-right));
  bottom: calc(var(--u) * 5);
  display: flex;
  align-items: flex-start;
  gap: calc(var(--u) * 4);
  padding: calc(var(--u) * 3) calc(var(--u) * 3.5) calc(var(--u) * 1.6);
  border-radius: calc(var(--u) * 3);
  background: var(--nes-gris);
  box-shadow: 0 0 0 calc(var(--u) * 1.2) var(--nes-negro);
}
.nes-tecla { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.2); }
/* La A queda un poco mas abajo, como en el control original */
.nes-tecla:last-child { margin-top: calc(var(--u) * 2.5); }
.nes-tecla .boton {
  width: calc(var(--u) * 19.5);
  height: calc(var(--u) * 19.5);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #ff5a4c 0, var(--nes-rojo) 45%, #8f0f0a 100%);
  box-shadow: 0 calc(var(--u) * 0.9) 0 #5b0805, 0 0 0 calc(var(--u) * 1) #1b1b1d;
}
.nes-tecla .boton.activo {
  transform: translateY(calc(var(--u) * 0.8));
  box-shadow: 0 calc(var(--u) * 0.1) 0 #5b0805, 0 0 0 calc(var(--u) * 1) #1b1b1d;
}
.nes-tecla span { font-size: calc(var(--u) * 3.5); }

/* En el computador el control es parte de la "imagen" de celular: más sutil */
body.escritorio #pad,
body.escritorio #nes-centro,
body.escritorio #acciones { opacity: 0.6; }
body.escritorio #pad:hover,
body.escritorio #nes-centro:hover,
body.escritorio #acciones:hover { opacity: 0.9; }

/* ------------------------------------------------------------------ */
/* Aviso de girar el celular                                           */
/* ------------------------------------------------------------------ */
#girar {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: radial-gradient(circle, #2a0808, #000 75%);
  color: #fff;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
}
#girar small { font-size: 14px; font-weight: 400; color: #bbb; }
.icono-telefono {
  width: 56px;
  height: 96px;
  border: 5px solid #fff;
  border-radius: 12px;
  animation: girar 2s ease-in-out infinite;
}
@keyframes girar {
  0%, 25% { transform: rotate(0deg); }
  55%, 100% { transform: rotate(-90deg); }
}
@media (orientation: portrait) {
  body.movil #girar { display: flex; }
}

/* ── Registro para vidas ilimitadas ──────────────────────────────────────
   Vive sobre la pantalla del juego, no sobre la pagina, para que en celular
   quede dentro del marco horizontal igual que el resto de la interfaz. */
#registro{
  position:absolute; inset:0; z-index:40;
  display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(0,0,0,.82);
  font-family:'Press Start 2P',monospace;
}
#registro[hidden]{ display:none !important; }
.reg-caja{
  position:relative; width:100%; max-width:430px; max-height:100%; overflow-y:auto;
  background:#14100f; border:2px solid #ee503c; padding:22px 20px 18px; color:#eee;
}
.reg-cerrar{
  position:absolute; top:6px; right:10px; background:none; border:0;
  color:#8a8a8a; font-size:22px; line-height:1; cursor:pointer; font-family:inherit;
}
.reg-cerrar:hover{ color:#fff; }
.reg-sobre{ margin:0; font-size:8px; letter-spacing:.14em; color:#ee503c; text-transform:uppercase; }
.reg-caja h2{ margin:8px 0 14px; font-size:14px; line-height:1.5; color:#fff; font-family:'Metal Mania',cursive; letter-spacing:.02em; }
.reg-texto{ margin:0 0 14px; font-size:9px; line-height:1.9; color:#b9b3b0; font-family:system-ui,sans-serif; }
.reg-campo{ display:block; margin-bottom:12px; }
.reg-campo span{ display:block; font-size:8px; letter-spacing:.08em; color:#8f8885; margin-bottom:6px; text-transform:uppercase; }
.reg-campo em{ font-style:normal; color:#6b6562; }
.reg-campo input{
  width:100%; box-sizing:border-box; padding:11px 12px;
  background:#0b0908; border:1px solid #3a3230; color:#fff;
  font-family:system-ui,sans-serif; font-size:16px; /* < 16px y iOS hace zoom al enfocar */
}
.reg-campo input:focus{ outline:2px solid #ee503c; outline-offset:1px; border-color:#ee503c; }
.reg-codigo{ letter-spacing:.5em; text-align:center; font-size:22px !important; }
.reg-consent{ display:flex; gap:9px; align-items:flex-start; margin:14px 0 4px; cursor:pointer; }
.reg-consent input{ margin-top:2px; width:16px; height:16px; accent-color:#ee503c; flex:none; }
.reg-consent span{ font-size:9px; line-height:1.8; color:#9a9491; font-family:system-ui,sans-serif; }
.reg-aviso{ margin:12px 0 0; min-height:14px; font-size:9px; line-height:1.7; color:#6ecf9e; font-family:system-ui,sans-serif; }
.reg-aviso.reg-error{ color:#ff7a68; }
.reg-boton{
  display:block; width:100%; margin-top:14px; padding:13px;
  background:#ee503c; border:0; color:#fff; cursor:pointer;
  font-family:inherit; font-size:10px; letter-spacing:.06em;
}
.reg-boton:hover:not(:disabled){ background:#d93f2c; }
.reg-boton:disabled{ opacity:.6; cursor:default; }
.reg-link{
  display:block; width:100%; margin-top:10px; padding:4px; text-align:center;
  background:none; border:0; color:#8f8885; cursor:pointer;
  font-family:system-ui,sans-serif; font-size:10px; text-decoration:underline;
}
.reg-link:hover{ color:#fff; }
.reg-ok{ margin:0 0 8px; font-size:12px; line-height:1.7; color:#6ecf9e; }
@media (max-height:420px){
  .reg-caja{ padding:14px 16px; }
  .reg-caja h2{ font-size:12px; margin-bottom:10px; }
  .reg-texto,.reg-consent span{ font-size:8px; line-height:1.7; }
}

/* Acceso directo al registro, arriba a la derecha de la pantalla del juego. */
#reg-abrir{
  position:absolute; top:8px; right:10px; z-index:30;
  padding:7px 11px; cursor:pointer;
  background:rgba(238,80,60,.92); border:1px solid #ff8a76; color:#fff;
  font-family:'Press Start 2P',monospace; font-size:8px; letter-spacing:.08em;
}
#reg-abrir:hover{ background:#ee503c; }
#reg-abrir[hidden]{ display:none !important; }
@media (max-width:640px){ #reg-abrir{ font-size:7px; padding:6px 8px; top:6px; right:8px; } }