* { 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                                                  */
/* ------------------------------------------------------------------ */
#tactil {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}
body[data-estado="jugando"] #tactil { display: block; }

.boton {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45);
  background: rgba(15, 15, 18, 0.4);
  color: rgba(255, 255, 255, 0.9);
  font-size: calc(var(--u) * 6.5);
  line-height: 1;
  pointer-events: auto;
  touch-action: none;
  transition: transform 0.05s, background 0.05s;
}
.boton.activo { transform: scale(0.9); background: rgba(255, 255, 255, 0.28); }

#pad {
  position: absolute;
  left: max(calc(var(--u) * 3), env(safe-area-inset-left));
  bottom: calc(var(--u) * 4);
  display: flex;
  gap: calc(var(--u) * 2.5);
  pointer-events: auto;
  touch-action: none;
}
#pad .boton { width: calc(var(--u) * 17); height: calc(var(--u) * 17); pointer-events: none; }

#acciones {
  position: absolute;
  right: max(calc(var(--u) * 3), env(safe-area-inset-right));
  bottom: calc(var(--u) * 4);
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 30);
}
#acciones .boton { position: absolute; }
.boton.saltar {
  right: 0;
  bottom: 0;
  width: calc(var(--u) * 20);
  height: calc(var(--u) * 20);
  background: rgba(40, 90, 200, 0.4);
}
.boton.disparar {
  left: 0;
  top: 0;
  width: calc(var(--u) * 17);
  height: calc(var(--u) * 17);
  background: rgba(190, 20, 20, 0.45);
  font-size: calc(var(--u) * 7.5);
}

#btn-pausa {
  position: absolute;
  top: calc(var(--u) * 10);
  right: max(calc(var(--u) * 2.5), env(safe-area-inset-right));
  width: calc(var(--u) * 9);
  height: calc(var(--u) * 9);
  font-size: calc(var(--u) * 3);
  font-weight: 900;
  font-family: system-ui, sans-serif;
}

#btn-sonido {
  position: absolute;
  top: calc(var(--u) * 21);
  right: max(calc(var(--u) * 2.5), env(safe-area-inset-right));
  width: calc(var(--u) * 9);
  height: calc(var(--u) * 9);
  font-size: calc(var(--u) * 4);
}
body.silencio #btn-sonido { text-decoration: line-through; color: #f55; }

/* En el computador los botones son parte de la "imagen" de celular: más sutiles */
body.escritorio .boton { opacity: 0.55; }
body.escritorio .boton:hover { opacity: 0.85; }

/* ------------------------------------------------------------------ */
/* 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:15px;
}
.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; } }