/* =========================================================================
   TUTORIAL DE PRIMERA PARTIDA

   La capa NO intercepta los toques (`pointer-events:none`) salvo el propio
   cartel. Es lo que permite que el jugador pulse el botón de verdad mientras
   el tutorial lo está señalando, en vez de tener que cerrar el aviso primero.
   ========================================================================= */
.tuto{
  position:fixed; inset:0; z-index:7000;
  pointer-events:none;
}

/* Foco: un agujero de luz alrededor del objetivo. El velo se hace con una
   sombra INTERIOR gigantesca en vez de cuatro paneles alrededor — así se
   adapta a cualquier tamaño y posición sin calcular nada. */
/*
 * EL VELO NO SE ANIMA. Antes esta regla animaba el `box-shadow` ENTERO, y ese
 * `box-shadow` incluye la sombra de 9999 px que hace de velo a pantalla
 * completa. O sea: para latir un halo de 18 a 30 px, el navegador repintaba
 * toda la pantalla 60 veces por segundo, sin parar, mientras el tutorial
 * estuviera abierto.
 *
 * Y era gratuito: la parte de 9999 px es IDÉNTICA en los tres fotogramas
 * clave. Sólo cambiaba el halo.
 *
 * En Chrome de escritorio no se nota; dentro del WebView de Android es el
 * «parpadeo rápido de toda la pantalla» al entrar al juego.
 *
 * Ahora el velo es estático y el latido vive en un pseudo-elemento del tamaño
 * del foco que sólo anima `opacity` — una propiedad que se resuelve en el
 * compositor y no repinta nada.
 */
.tuto-foco{
  position:absolute;
  border-radius:16px;
  border:2px solid var(--c-neon);
  box-shadow:0 0 0 9999px rgba(3,5,12,.72);
}
.tuto-foco::after{
  content:"";
  position:absolute; inset:-2px;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:0 0 30px rgba(57,255,136,.75);
  animation:tutoLate 1.9s ease-in-out infinite;
}
@keyframes tutoLate{ 0%,100%{ opacity:.55 } 50%{ opacity:1 } }

.tuto-globo{
  position:absolute;
  pointer-events:auto;
  padding:14px 16px 12px;
  border-radius:var(--r-lg);
  background:linear-gradient(165deg,#141C3A,#0A0E1C 70%);
  border:1px solid var(--stroke-hot);
  box-shadow:var(--sh-3), 0 0 40px rgba(57,255,136,.18);
  animation:tutoEntra .34s var(--ease-back);
}
@keyframes tutoEntra{
  from{ opacity:0; transform:translateY(10px) scale(.96); }
  to  { opacity:1; transform:none; }
}

.tuto-globo b{
  display:block; font-size:16px; letter-spacing:.04em;
  text-transform:uppercase; margin-bottom:5px;
}
.tuto-globo p{
  margin:0; font-size:13px; line-height:1.5; color:var(--tx-mid);
}
.tuto-pasos{
  font-size:10px; font-weight:800; letter-spacing:.18em;
  color:var(--c-neon); margin-bottom:3px;
}
/* Pista de que se puede cerrar. Tenue: es una salida, no una instrucción —
   lo que hay que hacer es tocar el BOTÓN, no el cartel. */
.tuto-tocar{
  display:block; margin-top:9px;
  font-size:10.5px; letter-spacing:.10em; text-transform:uppercase;
  color:var(--tx-lo);
}

/* El velo no puede tapar la interfaz de la misión: en combate el jugador
   necesita ver la tropa y el HUD mientras lee. */
.mission-hud, .mission-fx{ z-index:20; }

@media (prefers-reduced-motion: reduce){
  .tuto-foco{ animation:none; }
  .tuto-globo{ animation:none; }
}

/* ==========================================================================
   MINI TUTORIAL DE MODO (ui/tutorial-modo.js)
   ==========================================================================
   Reutiliza `.tuto` y `.tuto-globo`, pero centrado en pantalla y sin foco: no
   señala a ningún botón, explica un modo entero antes de entrar en él.
*/
/*
 * FONDO DESENFOCADO detrás del cartel.
 *
 * `pointer-events:auto` sólo aquí: el tutorial general deja pasar los toques a
 * propósito —está señalando un botón que hay que pulsar—, pero éste explica un
 * modo entero y no señala nada, así que el velo tiene que bloquear. Si no,
 * tocar «al lado» del cartel dispararía la tarjeta de debajo.
 *
 * El desenfoque va con `-webkit-` delante: sin el prefijo, Safari de iOS ignora
 * la propiedad y el fondo se queda nítido — justo el navegador donde más se
 * nota, porque ahí el juego corre a pantalla completa.
 */
.tuto-modo{
  display:flex; align-items:center; justify-content:center; padding:20px;
  pointer-events:auto;
  background:rgba(3,5,12,.55);
  -webkit-backdrop-filter:blur(7px) saturate(.85);
  backdrop-filter:blur(7px) saturate(.85);
  animation:tutoVeloIn .22s ease-out both;
}
@keyframes tutoVeloIn{ from{ opacity:0 } to{ opacity:1 } }
.tuto-modo .tuto-globo{
  position:static; max-width:340px; text-align:center;
  animation:tutoModoIn .28s var(--ease-back, cubic-bezier(.34,1.56,.64,1)) both;
}
.tuto-ico{ font-size:44px; line-height:1; margin:2px 0 8px; }
.tuto-ico svg{ width:44px; height:44px; }
.tuto-pie{ display:flex; gap:8px; margin-top:14px; }
.tuto-pie .btn{ flex:1; }
@keyframes tutoModoIn{
  from{ opacity:0; transform:translateY(14px) scale(.94); }
  to{ opacity:1; transform:none; }
}

/* Chip de ayuda en la tarjeta de modo. */
.mc-ayuda{ cursor:pointer; border:none; font:inherit; }
.mc-ayuda:active{ transform:scale(.95); }