/* ==================================================================
   Tokens de diseño, reset y elementos compartidos por todas las
   pantallas del juego.
   ================================================================== */
:root{
  --azul:#3a6ea5; --azul2:#1f3b63; --amarillo:#ffd166; --naranja:#ff9f68;
  --verde:#7cc243; --tinta:#0f1a2e; --panel:rgba(20,28,48,.72);
  --borde:rgba(255,255,255,.14);
  --txt:#eaf1fb; --txt2:#a9bcda; --exito:#7CFC9A;
}
*{margin:0;padding:0;box-sizing:border-box;}
/* `100dvh` mide la ventana SIN contar la barra del navegador, que en un móvil
   aparece y desaparece al desplazarse. Con `100%` a secas el último botón de un
   formulario largo quedaba por debajo del borde y no había forma de llegar a él.
   La línea de `height:100%` se queda como reserva para navegadores viejos. */
html,body{width:100%;height:100%;height:100dvh;overflow:hidden;
  font-family:'Segoe UI',system-ui,Tahoma,sans-serif;background:#0b1220;color:#fff;
  /* Nada de resaltados azules ni menús de "copiar" al mantener el dedo: aquí se
     juega, no se selecciona texto. */
  -webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;}
/* `touch-action` va TAMBIÉN en el lienzo, no solo en el contenedor: quien recibe
   los eventos del dedo es el <canvas>, y `touch-action` NO se hereda. Chrome
   perdona el descuido porque mira la cadena de ancestros; Safari en iPhone no, y
   ahí el gesto se toma por un desplazamiento de página: llega un `pointercancel`
   y el toque se pierde. Es decir, el juego se veía pero no respondía al dedo. */
#contenedor3d,#contenedor3d canvas{touch-action:none;
  user-select:none;-webkit-user-select:none;}
#contenedor3d{position:absolute;inset:0;cursor:default;}
/* En iPhone el lienzo es una imagen a ojos del sistema: sin esto, mantener el
   dedo saca el menú de "copiar imagen" en mitad de la partida. */
#contenedor3d canvas{-webkit-touch-callout:none;display:block;}
button{font-family:inherit;}

/* -------- Botones -------- */
.btn{border:none;border-radius:14px;cursor:pointer;font-weight:700;font-size:16px;padding:14px 30px;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  transition:transform .15s,box-shadow .15s;}
.btn:hover{transform:translateY(-2px);}
.btn-primario{color:#14213e;background:linear-gradient(90deg,var(--amarillo),var(--naranja));
  box-shadow:0 10px 26px rgba(255,159,104,.32);}
.btn-secundario{color:#eaf2ff;background:rgba(255,255,255,.08);border:1px solid var(--borde);}
.btn-fantasma{background:none;border:none;color:#9db8de;cursor:pointer;font-size:14px;
  text-decoration:underline;padding:8px;}

/* -------- Superficies -------- */
.overlay{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;overflow-y:auto;padding:30px;
  /* `safe center` centra mientras quepa y, en cuanto NO cabe, se comporta como
     `flex-start`. Sin el "safe", un contenedor centrado que desborda recorta por
     ARRIBA: el titulo "Elige un escenario" quedaba en -52 px, fuera de la
     pantalla y sin forma de subir hasta el. Los navegadores que no lo entiendan
     ignoran esta linea y se quedan con el `center` de arriba. */
  justify-content:safe center;
  /* Las zonas seguras son el hueco del notch y de la barra inferior del iPhone.
     Sin esto el contenido se mete debajo y no se puede ni leer ni pulsar. */
  padding-left:max(30px,env(safe-area-inset-left));
  padding-right:max(30px,env(safe-area-inset-right));
  padding-top:max(30px,env(safe-area-inset-top));
  padding-bottom:max(30px,env(safe-area-inset-bottom));}
.chip{background:rgba(255,255,255,.06);border:1px solid var(--borde);border-radius:999px;
  padding:8px 16px;font-size:13px;color:#dbe6fb;display:inline-flex;align-items:center;gap:8px;}
.chip i{color:var(--amarillo);}

/* Los iconos heredan el tamaño del texto salvo indicación contraria. */
i.fa-solid,i.fa-regular{line-height:1;}