/* ============================================================
   PROYECTADAS CLICKER — tema: sala de cine / proyector 35mm
   ============================================================ */

:root{
  --void:        #0b0705;
  --curtain:     #1c0f0f;
  --curtain-2:   #2a1414;
  --beam:        #ffd27a;
  --beam-hot:    #fff4d6;
  --brass:       #b8863b;
  --brass-light: #d9ab5c;
  --velvet:      #7a1f2b;
  --velvet-light:#a8384a;
  --smoke:       #cfc7bd;
  --smoke-dim:   #8a8078;
  --rosa:        #ff7fa8;
  --rosa-hot:    #ffd6e4;
  --azul-noti:   #6fb8ff;

  --font-display: 'Bebas Neue', 'Barlow Condensed', sans-serif;
  --font-body: 'Barlow', sans-serif;

  /* Pulso de música: actualizadas por JS en cada frame, con valores
     por defecto neutros cuando no hay música sonando */
  --beat-ojo: 1;
  --beat-pagina: 1;
  --beat-brillo: .75;

  /* Alto de las franjas de ondas arriba/abajo: se usa tanto para
     dibujarlas como para reservarles hueco en el padding del .stage,
     así el título y el reproductor nunca quedan tapados por ellas. */
  --onda-alto: clamp(64px, 14vh, 130px);
}

*{ box-sizing:border-box; }

/* Cualquier elemento con el atributo [hidden] debe desaparecer SIEMPRE,
   sin importar qué otra regla de la hoja le ponga display:flex/block más
   abajo (p. ej. .boss-overlay, .boss-intro, .boss-arena, .boss-final).
   Sin este !important, esas reglas ganaban el empate de especificidad
   contra el [hidden] del user-agent y el jefe final quedaba visible
   todo el rato, tapando el arranque y el clicker. */
[hidden]{ display:none !important; }

html,body{
  margin:0; padding:0;
  height:100%;
  background: radial-gradient(ellipse at 50% -10%, var(--curtain-2) 0%, var(--void) 55%, #000 100%);
  color: var(--smoke);
  font-family: var(--font-body);
  overflow-x:hidden;
  overscroll-behavior:none;
}

button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

::selection{ background: var(--velvet); color:#fff; }

/* ---------- Polvo ambiente sutil ---------- */
.motas{ position:fixed; inset:0; pointer-events:none; z-index:5; }
.mota{
  position:absolute; width:3px; height:3px; border-radius:50%;
  background: var(--beam-hot); opacity:.5; filter: blur(.5px);
  animation: flotar linear infinite;
}
@keyframes flotar{
  from{ transform: translateY(0) translateX(0); opacity:0; }
  10%{ opacity:.6; }
  90%{ opacity:.4; }
  to{ transform: translateY(-40vh) translateX(6vw); opacity:0; }
}


/* ---------- Estructura general ---------- */
.stage{
  position:relative; z-index:10;
  max-width:560px; margin:0 auto;
  height:100%;
  display:flex; flex-direction:column;
  padding: calc(14px + var(--onda-alto)) 16px calc(96px + var(--onda-alto));
  transform: scale(var(--beat-pagina, 1));
  transform-origin: center top;
  transition: transform .18s ease-out;
  will-change: transform;
}

.marquesina{ text-align:center; margin-bottom:8px; flex:0 0 auto; }
.titulo{
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 8vw, 2.6rem);
  letter-spacing: .04em;
  margin:0;
  color: var(--beam-hot);
  text-shadow:
    0 0 6px var(--beam),
    0 0 22px rgba(255,210,122,.5),
    0 0 60px rgba(255,210,122,.25);
  animation: parpadeo 4.5s ease-in-out infinite;
}
.titulo span{
  display:block;
  font-size:.42em;
  letter-spacing:.5em;
  color: var(--velvet-light);
  text-shadow: 0 0 10px rgba(168,56,74,.6);
  margin-top:-.2em;
}
@keyframes parpadeo{
  0%,94%,100%{ opacity:1; }
  95%{ opacity:.85; }
  97%{ opacity:1; }
}
.subtitulo{
  font-family: var(--font-body);
  letter-spacing:.3em; text-transform:uppercase;
  font-size:.6rem; color: var(--smoke-dim); margin:.4em 0 0;
}

/* ---------- Ficha compacta: contador + stats ---------- */
.resumen{
  flex:0 0 auto;
  background: linear-gradient(180deg, rgba(28,15,15,.75), rgba(11,7,5,.85));
  border: 1px solid rgba(184,134,59,.25);
  border-radius: 10px;
  padding: 10px 14px;
  backdrop-filter: blur(2px);
}
.resumen-top{
  display:flex; justify-content:center; align-items:baseline; gap:8px;
  font-size:.56rem; letter-spacing:.06em; color: var(--smoke-dim); text-transform:uppercase;
  flex-wrap:wrap;
}
.resumen-top b{ color: var(--brass-light); font-weight:600; }
.resumen-count{
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 8vw, 2.4rem); line-height:1;
  color: var(--beam-hot);
  margin-top:4px;
  text-align:center;
  text-shadow: 0 0 12px rgba(255,210,122,.35);
  word-break: break-all;
}
.resumen-unidad{
  text-align:center;
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color: var(--velvet-light);
  margin-bottom:8px;
}
.resumen-stats{
  display:flex; justify-content:center; gap:18px; flex-wrap:wrap;
  border-top:1px dashed rgba(184,134,59,.3); padding-top:7px;
}
.resumen-stat{
  display:flex; flex-direction:column; align-items:center; gap:1px;
  font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; color: var(--smoke-dim);
}
.resumen-stat span:last-child{
  font-family: var(--font-display); font-size:1rem; letter-spacing:0; text-transform:none;
  color: var(--beam);
}
.resumen-stat.racha-fila span:last-child{ color: var(--rosa); }

/* ---------- Zona central: solo la lente ---------- */
.pantalla-central{
  position:relative;
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px;
  padding: 10px 0 4px;
}

/* Fila central: ondas | ojo | ondas — el ojo queda solo y despejado en
   medio, con las barras de ecualizador a los lados y todo lo demás
   (stats, tienda) fuera de esta franja, para que la órbita del ojo
   tenga sitio de sobra para moverse sin chocar con nada. */
.lente-arena{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:100%;
}

/* Esfera/espectro reactivo detrás del ojo: un anillo orgánico que se
   deforma en tiempo real con las frecuencias de la canción (tipo
   "audio reactive orb"), dibujado en canvas para que sea fluido. */
.orbe-espectro{
  position:absolute; top:50%; left:50%;
  width: clamp(230px, 58vh, 380px);
  height: clamp(230px, 58vh, 380px);
  /* Se mueve y rota junto con el ojo (mismas variables --eye-x/--eye-y que
     actualiza JS cada frame), en vez de quedarse fijo mientras el ojo se
     desplaza encima. */
  transform: translate(-50%,-50%) translate(var(--eye-x, 0px), var(--eye-y, 0px)) rotate(var(--eye-rot, 0deg));
  transition: transform .18s ease-out;
  pointer-events:none;
  z-index:1;
  will-change: transform;
}

/* Ecualizador al ritmo de la música: dos franjas FIJAS que ocupan todo el
   ancho de la pantalla, una pegada arriba y otra pegada abajo, con el ojo
   quedando despejado justo en medio. Cada barra reacciona en directo al
   volumen (más alta = más grave sonando ahora mismo). pointer-events:none
   para que nunca bloqueen el clic sobre el ojo ni el resto de la UI. */
.ondas-eq{
  position:fixed; left:0; right:0; z-index:4;
  display:flex; justify-content:center; align-items:stretch; gap: clamp(6px, 1.6vw, 16px);
  height: var(--onda-alto);
  padding: 0 4vw;
  pointer-events:none;
  opacity:.9;
}
.ondas-eq.ondas-arriba{ top:0; align-items:flex-start; }
.ondas-eq.ondas-abajo{ bottom:0; align-items:flex-end; }
.ondas-eq span{
  display:block; width: clamp(6px, 1.6vw, 14px); border-radius:5px;
  height:14%; max-width:16px;
  background: linear-gradient(180deg, var(--beam-hot), var(--beam) 60%, var(--brass) 100%);
  box-shadow: 0 0 16px rgba(255,210,122,.55);
  transform-origin:center;
  transition: height .09s ease-out;
}
.ondas-eq.ondas-abajo span{
  background: linear-gradient(0deg, var(--beam-hot), var(--beam) 60%, var(--brass) 100%);
}
@media (max-width:520px){
  :root{ --onda-alto: clamp(50px, 11vh, 90px); }
  .ondas-eq{ gap: clamp(4px,1.4vw,10px); }
  .ondas-eq span{ width: clamp(4px,1.4vw,9px); }
}

/* ---------- Móvil lateral: aquí viven las notificaciones ambiente ---------- */
.movil-lateral{
  position:fixed; z-index:12; pointer-events:none;
  left:14px; bottom:14px; top:auto;
  transform: scale(.85);
  transform-origin: bottom left;
  opacity:.9;
}
.movil-lateral-marco{
  position:relative;
  width:190px; height:390px;
  border-radius:34px;
  background:#0a0a0a;
  border:5px solid #1b1b1b;
  box-shadow: 0 24px 60px rgba(0,0,0,.65), inset 0 0 0 2px #000;
}
.movil-lateral-notch{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:74px; height:14px; background:#0a0a0a; border-radius:0 0 10px 10px; z-index:6;
}
.movil-lateral-pantalla{
  position:absolute; inset:6px; border-radius:28px; overflow:hidden;
  background: linear-gradient(200deg, #241016 0%, #150e18 45%, #0a0e18 100%);
  display:flex; flex-direction:column; align-items:center;
  padding-top:26px;
}
/* Siempre anclado a la esquina inferior izquierda, pequeño, para que no
   estorbe ni al ojo ni a los paneles de logros/mejoras en ningún ancho */
@media (max-width: 759px){
  .movil-lateral{ transform: scale(.55); bottom:78px; }
}

.noti{
  position:relative; width:88%; flex-shrink:0;
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border:1px solid rgba(255,255,255,.25);
  border-radius:14px; padding:9px 11px; margin-bottom:8px;
  font-size:.62rem; color:#fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.35);
  display:flex; gap:7px; align-items:center;
  animation: notiEntrada 3.2s ease forwards;
}
.noti .noti-icono{
  font-size:.95rem; flex-shrink:0; width:22px; height:22px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.12);
}
@keyframes notiEntrada{
  0%{ opacity:0; transform: translateY(-14px) scale(.92); }
  8%{ opacity:1; transform: translateY(0) scale(1); }
  85%{ opacity:1; transform: translateY(0) scale(1); }
  100%{ opacity:0; transform: translateY(-6px) scale(.97); }
}

/* ---------- Racha ---------- */
.racha-fila span:last-child{ color: var(--rosa) !important; }
.lente.racha-activa{ box-shadow: 0 0 60px 16px rgba(255,127,168,.55), 0 0 120px 40px rgba(255,127,168,.25), inset 0 0 20px rgba(0,0,0,.5); }

/* ---------- Confeti al comprar mejora ---------- */
.confeti{
  position:fixed; top:-10px; width:8px; height:14px; z-index:65;
  animation: caerConfeti linear forwards;
  pointer-events:none;
}
@keyframes caerConfeti{
  to{ transform: translateY(105vh) rotate(var(--rot)); opacity:.2; }
}

/* Lente clicable: elemento central de clic — círculo limpio, solo la imagen/ojo */
.lente{
  position:relative; z-index:5;
  width: clamp(140px, 34vh, 210px);
  aspect-ratio: 1 / 1;
  border-radius:50%;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 38% 32%, var(--beam-hot) 0%, var(--beam) 28%, #6b4415 70%, #2a1a08 100%);
  box-shadow:
    0 0 40px 10px rgba(255,210,122,.55),
    0 0 90px 30px rgba(255,210,122,.25),
    inset 0 0 0 3px rgba(255,244,214,.35),
    inset 0 0 20px rgba(0,0,0,.5),
    0 12px 24px rgba(0,0,0,.6);
  transition: transform .08s ease;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  animation: latido 1.6s ease-in-out infinite;
}
@keyframes latido{
  0%,100%{ transform: scale(1); }
  15%{ transform: scale(1.045); }
  30%{ transform: scale(1); }
  45%{ transform: scale(1.03); }
  60%{ transform: scale(1); }
}
.lente:active{ transform: scale(.94); }
@keyframes flotarEmoji{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-5px); }
}
.lente-hint{
  margin:10px 0 0; font-size:.68rem; letter-spacing:.15em; text-transform:uppercase;
  color: var(--smoke-dim); animation: parpadeoSuave 2.4s ease-in-out infinite;
}
@keyframes parpadeoSuave{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
/* Envoltorio que hace el pequeño recorrido circular del ojo/lente,
   independiente del pulso de escala (que va en la imagen de dentro) */
.lente-mov{
  position:absolute; inset:0; border-radius:50%; overflow:hidden;
  /* Movimiento y "vibración" al ritmo de la canción: --eye-x/--eye-y los
     actualiza JS en cada frame (deriva suave normal + sacudida extra en
     cada golpe de bajo), en vez de una órbita en bucle fijo. */
  transform: translate(var(--eye-x, 0px), var(--eye-y, 0px));
  transition: transform .18s ease-out;
  will-change: transform;
}
.lente-img{
  position:absolute; inset:-18%; width:136%; height:136%; object-fit:cover; border-radius:50%;
  transform: scale(var(--beat-ojo, 1));
  transition: transform .12s ease-out;
  will-change: transform;
}

/* Latido al ritmo de la música: en vez de un párpado que se cierra de
   verdad, el ojo "parpadea" reutilizando el mismo pulso que al pulsarlo
   (ver .clic-anim) y suelta un anillo expansivo, como una onda de sonar */
.onda-latido{
  position:absolute; z-index:4; pointer-events:none;
  border-radius:50%;
  border: 2px solid rgba(255,210,122,.8);
  box-shadow: 0 0 14px rgba(255,210,122,.45);
  transform: translate(-50%,-50%) scale(1);
  animation: ondaLatidoExpandir .7s ease-out forwards;
}
@keyframes ondaLatidoExpandir{
  0%{ transform: translate(-50%,-50%) scale(1); opacity:.9; }
  100%{ transform: translate(-50%,-50%) scale(1.9); opacity:0; }
}


/* Ojos láser tipo Homelander, sobre la imagen del proyector, durante el efecto de rayos */
.lente.ojos-laser::before,
.lente.ojos-laser::after{
  content:''; position:absolute; top:38%; width:13px; height:13px; border-radius:50%;
  background: radial-gradient(circle, #fff 0%, #ff2b4d 45%, #7a0012 100%);
  box-shadow: 0 0 14px 5px rgba(255,40,60,.9), 0 0 34px 12px rgba(255,40,60,.5);
  z-index:6; pointer-events:none;
  animation: ojosLaserBrillo .9s ease-out;
}
.lente.ojos-laser::before{ left:30%; }
.lente.ojos-laser::after{ left:62%; }
@keyframes ojosLaserBrillo{
  0%{ opacity:0; transform: scale(.4); }
  15%{ opacity:1; transform: scale(1); }
  75%{ opacity:1; transform: scale(1); }
  100%{ opacity:0; transform: scale(1.15); }
}

.lente.clic-anim{ animation: clicPulso .18s ease-out; }
@keyframes clicPulso{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.08); filter: brightness(1.3); }
  100%{ transform:scale(1); }
}

.flotantes{ position:absolute; inset:0; pointer-events:none; z-index:6; overflow:visible; }
.flotante{
  position:absolute;
  font-family: var(--font-display);
  color: var(--beam-hot);
  text-shadow: 0 0 8px rgba(255,210,122,.7);
  font-size:1.4rem;
  animation: subirDesvanecer .9s ease-out forwards;
  pointer-events:none;
}
@keyframes subirDesvanecer{
  0%{ transform: translateY(0) scale(.8); opacity:1; }
  70%{ opacity:1; }
  100%{ transform: translateY(-70px) scale(1.15); opacity:0; }
}

.chispa{
  position:absolute; width:5px; height:5px; border-radius:50%;
  background: var(--beam-hot);
  animation: chispaVuelo .5s ease-out forwards;
  pointer-events:none;
}
@keyframes chispaVuelo{
  from{ transform: translate(0,0) scale(1); opacity:1; }
  to{ transform: var(--fin) scale(.2); opacity:0; }
}

/* ---------- Cuerpo: columna principal + panel lateral ---------- */
.cuerpo{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column; gap:10px;
}
.col-principal{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column; gap:8px;
}

/* ---------- Panel lateral: pestañas de mejoras / logros ---------- */
.col-lateral{
  flex:0 0 auto;
  display:flex; flex-direction:column;
  max-height:38vh;
  background: linear-gradient(180deg, rgba(28,15,15,.75), rgba(11,7,5,.85));
  border: 1px solid rgba(184,134,59,.25);
  border-radius: 10px;
  overflow:hidden;
}
.paneles-tabs{
  flex:0 0 auto;
  display:flex;
  border-bottom: 1px solid rgba(184,134,59,.25);
}
.tab-btn{
  flex:1 1 50%;
  padding:10px 8px;
  font-family: var(--font-display); letter-spacing:.06em; font-size:.95rem;
  color: var(--smoke-dim);
  text-align:center;
  border-bottom:2px solid transparent;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.tab-btn:hover{ color: var(--brass-light); }
.tab-btn.activo{
  color: var(--beam);
  border-bottom-color: var(--beam);
  background: rgba(184,134,59,.08);
}
.paneles-contenido{ flex:1 1 auto; min-height:0; }

.tienda-lista, .logros-lista{
  display:flex; flex-direction:column; gap:8px;
  height:100%; overflow-y:auto;
  padding: 10px 12px;
}
.tienda-lista::-webkit-scrollbar, .logros-lista::-webkit-scrollbar{ width:6px; }
.tienda-lista::-webkit-scrollbar-thumb, .logros-lista::-webkit-scrollbar-thumb{ background: var(--brass); border-radius:3px; }

/* En pantallas anchas: layout de 3 columnas reales — logros pegados al
   borde izquierdo, la columna principal (ojo + stats) centrada, y las
   mejoras pegadas al borde derecho. Para lograr que las dos listas
   "salten" a los extremos de .cuerpo (que solo tiene 2 hijos directos:
   col-principal y aside.col-lateral) usamos display:contents en los
   envoltorios intermedios: así dejan de pintarse como caja propia y sus
   hijos (tienda-lista / logros-lista) pasan a comportarse como hijos
   directos de .cuerpo, pudiendo colocarse con order a cada lado. */
@media (min-width: 760px){
  .stage{ max-width:1180px; }
  .cuerpo{ flex-direction:row; align-items:stretch; gap:18px; }
  .col-principal{ order:2; flex:1 1 auto; max-width:600px; margin:0 auto; }

  .col-lateral{ display:contents; }
  .paneles-tabs{ display:none; }
  .paneles-contenido{ display:contents; }

  .tienda-lista, .logros-lista{
    display:flex !important; flex-direction:column; gap:8px;
    flex:0 0 280px; max-height:none; height:auto;
    background: linear-gradient(180deg, rgba(28,15,15,.75), rgba(11,7,5,.85));
    border: 1px solid rgba(184,134,59,.25);
    border-radius: 10px;
    padding: 12px;
  }
  .logros-lista{ order:1; }
  .tienda-lista{ order:3; }
}

.mejora{
  display:flex; align-items:center; gap:10px;
  padding:8px; border-radius:8px;
  border:1px solid rgba(184,134,59,.2);
  background: rgba(0,0,0,.2);
  text-align:left;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.mejora:not(:disabled):hover{
  transform: translateX(2px);
  border-color: var(--brass-light);
  background: rgba(184,134,59,.12);
}
.mejora:disabled{ opacity:.4; cursor:not-allowed; }
.mejora-icono{ font-size:1.4rem; width:34px; text-align:center; flex-shrink:0; }
.mejora-info{ flex:1; min-width:0; }
.mejora-nombre{ font-size:.82rem; font-weight:600; color: var(--smoke); }
.mejora-desc{ font-size:.68rem; color: var(--smoke-dim); }
.mejora-cantidad{ font-size:.68rem; color: var(--brass-light); }
.mejora-costo{
  font-family: var(--font-display); font-size:1rem; color: var(--beam);
  white-space:nowrap;
}

.mejora.recien-comprada{ animation: destello .5s ease; }
@keyframes destello{
  0%{ box-shadow: 0 0 0 0 rgba(255,210,122,.7); }
  100%{ box-shadow: 0 0 0 12px rgba(255,210,122,0); }
}

/* ---------- Logros (fila compacta dentro del desplegable) ---------- */
.logro{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:8px;
  border:1px solid rgba(184,134,59,.2);
  background: rgba(0,0,0,.25);
  text-align:left; font-size:.74rem; color: var(--smoke-dim);
  transition: all .2s ease;
}
.logro.conseguido{
  color: var(--beam-hot); border-color: var(--beam);
  background: rgba(255,210,122,.08);
  box-shadow: 0 0 12px rgba(255,210,122,.25);
}
.logro-icono{ font-size:1.15rem; flex-shrink:0; }

/* ---------- Pie ---------- */
.pie{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px 12px;
  flex:0 0 auto;
  margin-top:10px; font-size:.6rem; color: var(--smoke-dim);
  letter-spacing:.08em; text-transform:uppercase;
}
.btn-reset{
  border:1px solid rgba(168,56,74,.5); color: var(--velvet-light);
  padding:6px 14px; border-radius:20px; font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; transition: all .15s ease;
}
.btn-reset:hover{ background: var(--velvet); color:#fff; }

/* ---------- Reproductor de música ---------- */
.reproductor{
  position:fixed; left:50%; bottom:16px; transform:translateX(-50%);
  z-index:60;
  display:flex; align-items:center; gap:10px;
  width:min(92vw, 480px);
  padding:8px 14px;
  background: linear-gradient(180deg, rgba(28,15,15,.92), rgba(5,3,2,.95));
  border:1px solid rgba(184,134,59,.35);
  border-radius: 30px;
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
}
.rp-carrete{
  width:26px; height:26px; border-radius:50%;
  background: radial-gradient(circle, var(--brass) 0 30%, #2a1a08 32% 60%, var(--brass) 62% 100%);
  flex-shrink:0;
  animation: girar 3s linear infinite;
}
.reproductor.reproduciendo .rp-carrete{ animation-play-state: running; }
.reproductor:not(.reproduciendo) .rp-carrete{ animation-play-state: paused; }
@keyframes girar{ to{ transform: rotate(360deg); } }

.rp-info{ flex:1; min-width:0; }
.rp-titulo{ font-size:.72rem; color: var(--smoke); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rp-barra{ height:3px; background: rgba(184,134,59,.25); border-radius:2px; margin-top:5px; overflow:hidden; }
.rp-progreso{ height:100%; width:0%; background: var(--beam); }

.rp-controles{ display:flex; gap:6px; align-items:center; flex-shrink:0; }
.rp-controles button{ font-size:.85rem; color: var(--smoke); padding:2px 4px; }
.rp-controles button:hover{ color: var(--beam); }

/* Volumen regulable */
.rp-volumen{
  -webkit-appearance:none; appearance:none;
  width:56px; height:3px; border-radius:2px;
  background: rgba(184,134,59,.3);
  cursor:pointer; flex-shrink:0;
}
.rp-volumen::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:11px; height:11px; border-radius:50%;
  background: var(--beam);
  box-shadow: 0 0 6px rgba(255,210,122,.7);
  border:none;
}
.rp-volumen::-moz-range-thumb{
  width:11px; height:11px; border-radius:50%;
  background: var(--beam); border:none;
  box-shadow: 0 0 6px rgba(255,210,122,.7);
}
.rp-volumen::-moz-range-track{ background: rgba(184,134,59,.3); height:3px; border-radius:2px; }
@media (max-width:420px){ .rp-volumen{ width:38px; } }

/* ---------- Toast ---------- */
.toast{
  position:fixed; top:24px; left:50%; transform:translateX(-50%) translateY(-20px);
  background: var(--velvet); color:#fff; padding:10px 18px; border-radius:8px;
  font-size:.8rem; letter-spacing:.03em; z-index:70;
  opacity:0; pointer-events:none;
  box-shadow: 0 8px 20px rgba(0,0,0,.5);
  transition: opacity .25s ease, transform .25s ease;
}
.toast.mostrar{ opacity:1; transform:translateX(-50%) translateY(0); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ============================================================
   PANTALLA DE ARRANQUE — móvil que hay que encender
   ============================================================ */
.boot{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(ellipse at 50% 25%, #1a1015 0%, #050303 65%, #000 100%);
  transition: opacity .6s ease, visibility .6s;
}
.boot.oculto{ opacity:0; visibility:hidden; pointer-events:none; }

.boot-telefono{
  position:relative;
  width: 250px; height: 520px;
  border-radius:46px;
  background:#0a0a0a;
  border:6px solid #1b1b1b;
  box-shadow: 0 40px 90px rgba(0,0,0,.7), inset 0 0 0 2px #000;
  transition: transform .65s cubic-bezier(.4,0,.2,1), opacity .5s ease;
}
.boot.desbloqueando .boot-telefono{
  transform: scale(9);
  opacity:0;
}
.boot-notch{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:110px; height:20px; background:#0a0a0a; border-radius:0 0 14px 14px; z-index:6;
}
.boot-power{
  position:absolute; right:-5px; top:110px; width:4px; height:64px;
  background: linear-gradient(180deg,#3a3a3a,#111);
  border-radius:2px 0 0 2px;
  box-shadow: -2px 0 0 rgba(255,210,122,0);
  transition: box-shadow .4s ease;
}
.boot-vol{
  position:absolute; left:-5px; width:4px; background: linear-gradient(180deg,#3a3a3a,#111);
  border-radius:0 2px 2px 0;
}
.boot-vol-1{ top:96px; height:34px; }
.boot-vol-2{ top:140px; height:34px; }

.boot-pantalla{
  position:absolute; inset:9px; border-radius:36px; overflow:hidden;
  background:#000;
  display:flex; align-items:center; justify-content:center;
  transition: background 1s ease;
}
.boot-pantalla.encendido, .boot-pantalla.encendiendo{
  background: linear-gradient(200deg, #2a1420 0%, #17101c 45%, #0b0f1c 100%);
}

.boot-capa{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px;
  opacity:0; transition: opacity .5s ease;
  text-align:center; padding:0 20px;
}
.boot-capa-apagado{ opacity:1; }
.boot-pantalla.apagado .boot-capa-apagado{ opacity:1; }
.boot-pantalla:not(.apagado) .boot-capa-apagado{ opacity:0; }

.boot-off-hint{
  font-size:.68rem; letter-spacing:.1em; color: rgba(207,199,189,.4);
  text-transform:uppercase; animation: parpadeoSuave 2.6s ease-in-out infinite;
}

.boot-pantalla.encendiendo .boot-capa-encendiendo{ opacity:1; }
.boot-logo{ font-size:2.4rem; animation: latido 1.4s ease-in-out infinite; }
.boot-marca{
  font-family: var(--font-display); letter-spacing:.3em; text-transform:uppercase;
  color: var(--beam-hot); font-size:.85rem;
}
.boot-cargando{ display:flex; gap:6px; margin-top:6px; }
.boot-cargando span{
  width:6px; height:6px; border-radius:50%; background: var(--rosa);
  animation: rebotarPunto 1s ease-in-out infinite;
}
.boot-cargando span:nth-child(2){ animation-delay:.15s; }
.boot-cargando span:nth-child(3){ animation-delay:.3s; }
@keyframes rebotarPunto{ 0%,80%,100%{ transform:translateY(0); opacity:.5; } 40%{ transform:translateY(-6px); opacity:1; } }

.boot-pantalla.encendido .boot-capa-encendido{ opacity:1; }
.boot-hora{
  font-family: var(--font-display); font-size:3.4rem; color:#fff;
  text-shadow: 0 2px 20px rgba(255,127,168,.4);
}
.boot-fecha{ font-size:.72rem; color: rgba(255,255,255,.65); letter-spacing:.03em; }
.boot-swipe{
  margin-top:34px; font-size:.66rem; letter-spacing:.15em; text-transform:uppercase;
  color: rgba(255,255,255,.55);
  animation: flotarEmoji 1.8s ease-in-out infinite;
}

/* ---------- Revelado del juego tras desbloquear el móvil ---------- */
.juego{
  opacity:0; transform: scale(.97);
  transition: opacity .7s ease .1s, transform .7s ease .1s;
  pointer-events:none;
  height:100vh; height:100dvh;
  overflow:hidden;
}
.juego.visible{
  opacity:1; transform: scale(1);
  pointer-events:auto;
}

/* ============================================================
   CAPA DE EFECTOS AL DESBLOQUEAR CADA MEJORA
   ============================================================ */
.efectos-capa{
  position:fixed; inset:0; z-index:56; pointer-events:none; overflow:hidden;
}

/* 1) Pensar en ella -> globos de pensamiento */
.fx-burbuja{
  position:absolute; bottom:-40px; font-size:1.8rem;
  animation: fxSubirBurbuja 3.4s ease-in forwards;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
}
@keyframes fxSubirBurbuja{
  0%{ transform: translateY(0) scale(.6); opacity:0; }
  12%{ opacity:1; transform: translateY(-10vh) scale(1); }
  85%{ opacity:.9; }
  100%{ transform: translateY(-100vh) scale(1.1); opacity:0; }
}

/* 2) Hablar sobre ella -> frases flotando */
.fx-frase{
  position:absolute; white-space:nowrap;
  font-family: var(--font-body); font-weight:600; font-size:1rem;
  color: var(--rosa-hot); text-shadow: 0 0 10px rgba(255,127,168,.5);
  animation: fxFrase 3.6s ease-in-out forwards;
}
@keyframes fxFrase{
  0%{ opacity:0; transform: translateX(-30px) translateY(0); }
  15%{ opacity:1; }
  85%{ opacity:1; }
  100%{ opacity:0; transform: translateX(30px) translateY(-16px); }
}

/* 3) Recordar momentos -> tarjetas de recuerdo */
.fx-recuerdo{
  position:absolute; width:74px; height:92px;
  background:#f4ecd8; border-radius:3px; padding:6px 6px 14px;
  box-shadow: 0 10px 20px rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center; font-size:1.6rem;
  transform-origin:center;
  animation: fxRecuerdoCaer 3.2s cubic-bezier(.2,.8,.3,1) forwards;
}
.fx-recuerdo::after{
  content: attr(data-nota);
  position:absolute; bottom:2px; left:0; right:0; text-align:center;
  font-size:.5rem; color:#6b5c3e; font-family: var(--font-body);
}
@keyframes fxRecuerdoCaer{
  0%{ opacity:0; top:-10%; transform: rotate(var(--rot,0deg)) scale(.7); }
  15%{ opacity:1; }
  70%{ opacity:1; }
  100%{ opacity:0; top:70%; transform: rotate(var(--rot,0deg)) scale(1); }
}

/* 4) Hablar con amigos -> aparecen amigos */
.fx-amigo{
  position:absolute; display:flex; align-items:center; gap:6px;
  background: rgba(15,10,8,.85); border:1px solid rgba(184,134,59,.3);
  border-radius:20px; padding:6px 12px; font-size:.8rem; color: var(--smoke);
  animation: fxAmigoEntra 3.4s ease forwards;
}
@keyframes fxAmigoEntra{
  0%{ opacity:0; transform: translateY(14px) scale(.8); }
  15%{ opacity:1; transform: translateY(0) scale(1); }
  80%{ opacity:1; }
  100%{ opacity:0; transform: translateY(-10px) scale(.95); }
}

/* 5) Redes sociales -> notificaciones estilo iOS "liquid glass" */
.fx-noti-glass{
  position:absolute; left:50%; top:0; width:min(400px,92vw);
  transform: translate(-50%,-40px);
  display:flex; align-items:flex-start; gap:12px;
  padding:16px 18px; border-radius:24px;
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(22px) saturate(1.7);
  -webkit-backdrop-filter: blur(22px) saturate(1.7);
  border:1px solid rgba(255,255,255,.4);
  box-shadow: 0 18px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.5);
  animation: fxNotiGlass 4.2s cubic-bezier(.2,.9,.25,1) forwards;
}
.fx-noti-glass .fx-noti-icono{
  width:46px; height:46px; border-radius:13px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:1.35rem; color:#fff;
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
}
.fx-noti-glass .fx-noti-texto{ flex:1; text-align:left; min-width:0; }
.fx-noti-glass .fx-noti-cabecera{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.fx-noti-glass .fx-noti-app{ font-size:.8rem; font-weight:700; color:#fff; letter-spacing:.02em; }
.fx-noti-glass .fx-noti-hora{ font-size:.66rem; color: rgba(255,255,255,.6); flex-shrink:0; }
.fx-noti-glass .fx-noti-msg{ display:block; margin-top:2px; font-size:.86rem; color: rgba(255,255,255,.9); line-height:1.3; }
@keyframes fxNotiGlass{
  0%{ opacity:0; transform: translate(-50%,-40px) scale(.9); }
  10%{ opacity:1; transform: translate(-50%,18px) scale(1); }
  88%{ opacity:1; transform: translate(-50%,18px) scale(1); }
  100%{ opacity:0; transform: translate(-50%,4px) scale(.97); }
}

/* 6) Ver fotos suyas -> polaroids cayendo */
.fx-foto{
  position:absolute; top:-14%; width:80px; height:96px;
  background:#fff; border-radius:3px; padding:5px 5px 16px;
  box-shadow: 0 12px 26px rgba(0,0,0,.5);
  animation: fxFotoCaer 3.6s cubic-bezier(.3,.7,.3,1) forwards;
}
.fx-foto .fx-foto-marco{
  width:100%; height:100%; border-radius:2px;
  background: linear-gradient(150deg, var(--rosa) 0%, #c04b74 60%, #6b1f36 100%);
  display:flex; align-items:center; justify-content:center; font-size:1.6rem;
  overflow:hidden;
}
.fx-foto .fx-foto-marco img{
  width:100%; height:100%; object-fit:cover; display:block;
}
@keyframes fxFotoCaer{
  0%{ opacity:0; transform: translateY(0) rotate(var(--rot,0deg)); }
  12%{ opacity:1; }
  75%{ opacity:1; }
  100%{ opacity:0; transform: translateY(90vh) rotate(var(--rot,0deg)); }
}

/* 7) Stalkearla -> ojos en el fondo */
.fx-ojo{
  position:absolute; width:34px; height:20px;
  background:#fff; border-radius:50%;
  box-shadow: 0 0 14px rgba(0,0,0,.4);
  display:flex; align-items:center; justify-content:center;
  opacity:0; animation: fxOjoAparecer 4.4s ease forwards;
}
.fx-ojo::after{
  content:''; width:9px; height:9px; border-radius:50%; background:#1a0e0e;
  animation: fxPupila 2.6s ease-in-out infinite;
}
@keyframes fxOjoAparecer{
  0%{ opacity:0; transform: scale(.4); }
  10%{ opacity:1; transform: scale(1); }
  88%{ opacity:1; }
  100%{ opacity:0; }
}
@keyframes fxPupila{
  0%,100%{ transform: translateX(-4px); }
  50%{ transform: translateX(4px); }
}
/* Variante del ojo-stalkeo: a veces, en vez de un ojo dibujado, se asoma
   una miniatura circular de una foto (mujer1..20.png) */
.fx-ojo-foto{
  position:absolute; width:40px; height:40px; border-radius:50%;
  overflow:hidden; opacity:0;
  border:2px solid rgba(255,255,255,.5);
  box-shadow: 0 0 16px rgba(0,0,0,.5);
  animation: fxOjoAparecer 4.4s ease forwards;
}
.fx-ojo-foto img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Cameo discreto de Homelander asomando en un lateral, con el brillo
   rojo de ojos láser detrás — pensado como "detalle" recurrente, no
   como el efecto grande de rayos */
.fx-homelander{
  position:absolute; bottom:0; width:120px; opacity:0;
  filter: drop-shadow(0 -10px 24px rgba(255,40,60,.45));
  animation: fxHomelanderAsoma 4.6s ease forwards;
  pointer-events:none;
}
.fx-homelander img{ width:100%; display:block; }
@keyframes fxHomelanderAsoma{
  0%{ opacity:0; transform: translateY(30%); }
  14%{ opacity:1; transform: translateY(0%); }
  80%{ opacity:1; transform: translateY(0%); }
  100%{ opacity:0; transform: translateY(10%); }
}

/* 9) Arrastrarte por ella -> migas de pan (imagenes/migajas.png) cayendo */
.fx-miga{
  position:absolute; top:-6%;
  animation: fxMigaCaer linear forwards;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.4));
}
.fx-miga-fallback{
  border-radius:40% 60% 55% 45%/50% 40% 60% 50%;
  background: linear-gradient(160deg,#d9a35c,#8a5a2a);
  box-shadow: inset 0 -2px 2px rgba(0,0,0,.3);
}
@keyframes fxMigaCaer{
  to{ transform: translateY(105vh) rotate(var(--rot,180deg)); opacity:.15; }
}

/* 10) Rayos como láser -> flash + rayos + explosión */
.fx-flash{
  position:fixed; inset:0; background:#fff; opacity:0; z-index:57;
  animation: fxFlash .5s ease-out forwards;
}
@keyframes fxFlash{
  0%{ opacity:0; }
  12%{ opacity:.85; }
  100%{ opacity:0; }
}
.fx-rayo{
  position:absolute; top:50%; left:50%; width:6px; height:0;
  background: linear-gradient(180deg, #fff, var(--rosa) 40%, #ff2b4d 100%);
  box-shadow: 0 0 16px 4px rgba(255,60,90,.8);
  transform-origin: top center;
  animation: fxRayo .5s ease-out forwards;
}
@keyframes fxRayo{
  0%{ height:0; opacity:1; }
  60%{ height: var(--largo,220px); opacity:1; }
  100%{ height: var(--largo,220px); opacity:0; }
}
.fx-explosion{
  position:absolute; width:14px; height:14px; border-radius:50%;
  background: radial-gradient(circle, #fff, var(--rosa) 40%, transparent 70%);
  animation: fxExplosion .6s ease-out forwards;
}
@keyframes fxExplosion{
  0%{ transform: translate(0,0) scale(.3); opacity:1; }
  100%{ transform: var(--fin) scale(.2); opacity:0; }
}
.pantalla-vibrando{ animation: fxTemblor .4s ease; }
@keyframes fxTemblor{
  0%,100%{ transform: scale(var(--beat-pagina,1)) translate(0,0); }
  20%{ transform: scale(var(--beat-pagina,1)) translate(-5px,2px); }
  40%{ transform: scale(var(--beat-pagina,1)) translate(5px,-2px); }
  60%{ transform: scale(var(--beat-pagina,1)) translate(-3px,-2px); }
  80%{ transform: scale(var(--beat-pagina,1)) translate(3px,2px); }
}

/* ============================================================
   JEFE FINAL — Homelander, al llegar al millón de proyectadas
   ============================================================ */
.boss-overlay{
  position:fixed; inset:0; z-index:220;
  background: radial-gradient(ellipse at 50% 30%, #2a0508 0%, #0a0202 60%, #000 100%);
  display:flex; align-items:center; justify-content:center;
  animation: bossOverlayEntrada .5s ease;
}
@keyframes bossOverlayEntrada{ from{ opacity:0; } to{ opacity:1; } }

/* --- Secuencia de introducción (imágenes + frases) --- */
.boss-intro{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
}
.boss-intro-capa{
  display:flex; flex-direction:column; align-items:center; gap:22px;
  padding: 0 24px; text-align:center;
  animation: bossFraseEntrada .45s ease;
}
@keyframes bossFraseEntrada{
  from{ opacity:0; transform: scale(.94); }
  to{ opacity:1; transform: scale(1); }
}
.boss-intro-img{
  width: clamp(140px, 30vh, 260px);
  border-radius:10px;
  filter: drop-shadow(0 0 40px rgba(255,40,60,.55)) grayscale(.15) contrast(1.1);
  animation: bossImgLatido 1.4s ease-in-out infinite;
  opacity:1;
  transition: opacity 2.6s ease, filter 2.6s ease;
}
/* Estado inicial: la foto entra difuminada y de baja opacidad, y se
   aclara sola en cuanto se le quita esta clase (ver script.js). */
.boss-intro-img.boss-intro-img-difuminada{
  opacity:.12;
  filter: drop-shadow(0 0 40px rgba(255,40,60,.55)) grayscale(.15) contrast(1.1) blur(14px);
}
@keyframes bossImgLatido{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.035); }
}
.boss-intro-texto{
  font-family: var(--font-display); letter-spacing:.03em;
  font-size: clamp(1.1rem, 3.4vw, 1.6rem);
  color: var(--smoke); max-width:520px; line-height:1.35;
  text-shadow: 0 2px 10px rgba(0,0,0,.8);
}
.boss-intro-texto.grande{
  font-size: clamp(2.6rem, 9vw, 4.6rem);
  color:#ff2b4d;
  text-shadow: 0 0 30px rgba(255,40,60,.7), 0 0 70px rgba(255,40,60,.4);
  letter-spacing:.06em;
}

/* --- Arena de combate --- */
.boss-arena{
  width:min(94vw, 480px);
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding: 20px 16px 30px;
}
.boss-arena.boss-golpe{ animation: fxTemblor .3s ease; }
.boss-arena.boss-derrota{ animation: bossDerrotaFade .5s ease forwards; }
@keyframes bossDerrotaFade{ to{ opacity:.15; transform: scale(.96); } }

.boss-cabecera{ width:100%; display:flex; flex-direction:column; align-items:center; gap:6px; }
.boss-nombre{
  font-family: var(--font-display); letter-spacing:.12em; font-size:1.5rem;
  color:#ff4d63; text-shadow: 0 0 18px rgba(255,40,60,.6);
}
.boss-hp-barra{
  width:100%; height:14px; border-radius:8px; overflow:hidden;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,80,90,.4);
}
.boss-hp-relleno{
  height:100%; width:100%;
  background: linear-gradient(90deg, #ff2b4d, #ff8a3d);
  transition: width .18s ease-out;
}

.boss-objetivo{
  position:relative;
  width: clamp(160px, 42vh, 260px);
  aspect-ratio: 1/1;
  border-radius:16px;
  overflow:hidden;
  background: radial-gradient(circle at 40% 30%, #3a0a0f, #120303 75%);
  box-shadow: 0 0 50px 12px rgba(255,40,60,.35), inset 0 0 0 2px rgba(255,90,100,.4);
  -webkit-tap-highlight-color: transparent;
  animation: bossLatido 1.5s ease-in-out infinite;
  transition: transform .08s ease;
}
.boss-objetivo:active{ transform: scale(.95); }
@keyframes bossLatido{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.02); }
}
.boss-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition: opacity .35s ease;
}
/* Las fotos de Homelander se van turnando por su número (1,2,3,1,2,3...)
   como si fuesen los fotogramas de una animación en bucle, con un
   fundido cruzado entre una y otra en vez de un cambio brusco. */
.boss-img.boss-img-entrando{ opacity:0; }
.boss-img.boss-img-saliendo{ opacity:0; }
.boss-arena.boss-golpe .boss-objetivo{ filter: brightness(1.5) saturate(1.4); }
.boss-arena.boss-golpe-jugador{ animation: fxTemblor .35s ease; }

/* --- Barra de "entereza" del jugador --- */
.boss-hp-barra-jugador{ border-color: rgba(120,190,255,.4); margin-top:2px; }
.boss-hp-relleno-jugador{
  background: linear-gradient(90deg, #4da8ff, #7fe0ff);
  transition: width .25s ease-out;
}
.boss-hp-label-jugador{
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:#8fd0ff; opacity:.75; margin-top:-4px;
}

/* --- Bocadillo de frases de Homelander --- */
.boss-burbuja{
  position:relative; max-width:88%;
  background: rgba(20,4,6,.9); border:1px solid rgba(255,80,90,.45);
  border-radius:14px; padding:8px 14px;
  font-size:.82rem; line-height:1.3; color:var(--smoke);
  text-align:center; box-shadow: 0 0 22px rgba(255,40,60,.25);
  animation: bossFraseEntrada .3s ease;
}
.boss-burbuja::after{
  content:""; position:absolute; left:50%; bottom:-8px; transform:translateX(-50%);
  border:8px solid transparent; border-top-color: rgba(255,80,90,.45);
}

/* ============================================================
   ATAQUES DEL JEFE — capa fija por encima de todo
   ============================================================ */
.boss-qte-capa{
  position:fixed; inset:0; z-index:230; pointer-events:none; overflow:hidden;
}

/* --- Aviso + disparo del rayo de Homelander --- */
.boss-rayo-aviso{
  position:fixed; top:0; width:34px; height:100%;
  background: linear-gradient(180deg, rgba(255,60,90,0) 0%, rgba(255,60,90,.35) 100%);
  border-left:2px dashed rgba(255,90,110,.85); border-right:2px dashed rgba(255,90,110,.85);
  animation: rayoAvisoParpadeo .35s ease-in-out infinite;
  transform: translateX(-50%);
}
@keyframes rayoAvisoParpadeo{ 0%,100%{ opacity:.35; } 50%{ opacity:.85; } }

.boss-rayo-golpe{
  position:fixed; top:0; width:34px; height:100%;
  background: linear-gradient(180deg, #fff, #ff8a3d 35%, #ff2b4d 100%);
  box-shadow: 0 0 40px 10px rgba(255,60,90,.8);
  transform: translateX(-50%);
  animation: rayoGolpeFlash .3s ease-out forwards;
}
@keyframes rayoGolpeFlash{ 0%{ opacity:1; } 100%{ opacity:0; } }

.boss-zona-segura{
  position:fixed; width:74px; height:74px; border-radius:50%;
  background: radial-gradient(circle, rgba(120,220,255,.35), rgba(120,220,255,.05));
  border:2px solid #7fe0ff; box-shadow: 0 0 22px rgba(120,220,255,.6);
  transform: translate(-50%,-50%); pointer-events:auto; cursor:pointer;
  animation: zonaSeguraPulso .6s ease-in-out infinite;
  display:flex; align-items:center; justify-content:center;
  font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:#eafcff;
}
@keyframes zonaSeguraPulso{ 0%,100%{ transform: translate(-50%,-50%) scale(1); } 50%{ transform: translate(-50%,-50%) scale(1.12); } }

/* --- Reto de escribir una palabra --- */
.boss-ataque-palabra{
  position:fixed; left:50%; top:38%; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  background: rgba(12,3,4,.92); border:1px solid rgba(255,80,90,.5);
  border-radius:16px; padding:18px 26px; pointer-events:auto;
  box-shadow: 0 0 40px rgba(255,40,60,.35);
  animation: bossFraseEntrada .3s ease;
  width:min(90vw, 340px);
}
.boss-ataque-palabra-titulo{
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--smoke-dim);
}
.boss-ataque-palabra-texto{
  font-family: var(--font-display); letter-spacing:.1em;
  font-size: clamp(1.6rem, 6vw, 2.2rem); color:#ff4d63;
  text-shadow: 0 0 16px rgba(255,40,60,.6);
}
.boss-ataque-palabra-barra{
  width:100%; height:6px; border-radius:4px; overflow:hidden; background: rgba(255,255,255,.1);
}
.boss-ataque-palabra-tiempo{
  height:100%; background: linear-gradient(90deg,#ff2b4d,#ff8a3d);
  transition: width .05s linear;
}
.boss-ataque-palabra-input{
  width:100%; padding:8px 10px; border-radius:8px; text-align:center;
  border:1px solid rgba(255,80,90,.5); background: rgba(255,255,255,.06);
  color:var(--smoke); font-family: var(--font-body); font-size:1rem;
  letter-spacing:.06em; text-transform:uppercase;
}
.boss-ataque-palabra-input:focus{ outline:none; border-color:#ff8a3d; }

/* --- Objetivos para pararle un ataque grande --- */
.boss-objetivo-punto{
  position:fixed; width:52px; height:52px; border-radius:50%;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(255,210,122,.5), rgba(255,140,60,.08));
  border:2px solid var(--beam-hot); box-shadow: 0 0 20px rgba(255,180,90,.7);
  pointer-events:auto; cursor:pointer;
  animation: objetivoAparece .18s ease, objetivoPulso .5s ease-in-out infinite;
}
@keyframes objetivoAparece{ from{ transform: translate(-50%,-50%) scale(0); opacity:0; } to{ transform: translate(-50%,-50%) scale(1); opacity:1; } }
@keyframes objetivoPulso{ 0%,100%{ filter:brightness(1); } 50%{ filter:brightness(1.4); } }
.boss-objetivo-punto.tocado{ animation: objetivoTocado .25s ease forwards; pointer-events:none; }
@keyframes objetivoTocado{ to{ transform: translate(-50%,-50%) scale(1.6); opacity:0; } }

/* --- Rayo que lanza el propio jugador al tocar a Homelander --- */
.jugador-rayo{
  position:fixed; bottom:0; width:8px; height:0;
  background: linear-gradient(0deg, #fff, #7fe0ff 45%, #4da8ff 100%);
  box-shadow: 0 0 18px 5px rgba(120,200,255,.85);
  transform-origin: bottom center; transform: translateX(-50%);
  animation: jugadorRayoSube .32s ease-out forwards;
}
@keyframes jugadorRayoSube{ 0%{ height:0; opacity:1; } 60%{ opacity:1; } 100%{ height: var(--largo,260px); opacity:0; } }

.boss-hint{
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--smoke-dim);
  animation: parpadeoSuave 2.2s ease-in-out infinite;
}

.boss-flotantes{ position:absolute; inset:0; pointer-events:none; overflow:visible; }
.boss-flotante{
  position:absolute;
  font-family: var(--font-display); font-size:1.5rem; color:#ff4d63;
  text-shadow: 0 0 10px rgba(255,40,60,.8);
  animation: subirDesvanecer .85s ease-out forwards;
  pointer-events:none;
}

/* --- Pantalla final --- */
.boss-final{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  text-align:center; padding:0 24px;
  animation: bossFraseEntrada .6s ease;
}
.boss-final-texto{
  font-family: var(--font-display); letter-spacing:.05em;
  font-size: clamp(2.2rem, 8vw, 3.6rem);
  color: var(--beam-hot);
  text-shadow: 0 0 30px rgba(255,210,122,.6);
}
.boss-final-sub{ color: var(--smoke-dim); font-size:.9rem; max-width:420px; }

@media (max-width:520px){
  .boss-objetivo{ width: clamp(130px, 46vh, 200px); }
}