/* Asteroides Avantia — módulo 03 de la zona de juegos.
   La base (HUD, paneles de cristal, chips de teclas, botones) es la misma que la de
   «Carrera espacial» (css/pulido.css, .c3d-*) con el prefijo .ast-, para que los tres
   juegos parezcan de la misma familia. Debajo, lo propio: vidas, etiquetas de los
   asteroides, texto flotante, rótulo de oleada y mandos táctiles. */
.ast{position:fixed;inset:0;touch-action:none;user-select:none;-webkit-user-select:none}
.ast[hidden]{display:none}
html.modo-asteroides body{overflow:hidden}
.ast{z-index:2147483000;background:#04020a;overflow:hidden;font-family:"Inter",system-ui,sans-serif;color:#f3f2f7;-webkit-tap-highlight-color:transparent}
.ast .ast-lienzo{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:pointer}
.ast-velo{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgb(4 2 10 / .65) 100%),linear-gradient(180deg,rgb(4 2 10 / .55),transparent 22%,transparent 80%,rgb(4 2 10 / .5))}
.ast-velo::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 55%,rgb(233 226 255 / .55),rgb(143 99 255 / .25) 40%,transparent 70%);opacity:0;transition:opacity .45s ease-out}
.ast-velo.golpe::after{opacity:1;transition:none}
/* HUD */
.ast-hud{position:absolute;inset:0 0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:12px;
  padding:max(18px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) 0 max(22px,env(safe-area-inset-left));pointer-events:none}
.ast-marca{display:flex;align-items:center;gap:10px;font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#bdb3e6;padding-top:15px}
.ast-punto{width:7px;height:7px;border-radius:50%;background:#8f63ff;box-shadow:0 0 0 4px rgb(143 99 255 / .18),0 0 14px #8f63ff}
.ast-marcador{display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;transform:translateY(-8px);transition:opacity .5s,transform .5s var(--suave)}
.ast.jugando .ast-marcador,.ast.fin .ast-marcador{opacity:1;transform:none}
.ast-pts{font:500 clamp(30px,4.4vw,46px)/1 var(--mono);letter-spacing:.06em;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 0 24px rgb(143 99 255 / .55)}
.ast-pts.hito{animation:ast-hito .55s var(--suave)}
@keyframes ast-hito{30%{color:#c9b8ff;transform:scale(1.12)}}
.ast-sub{display:flex;gap:14px;font:500 10.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#b3aed0;text-shadow:0 1px 8px rgb(4 2 10 / .9)}
.ast-sub i{font-style:normal;color:#c9b8ff}
.ast-vel{color:#c9b8ff}
.ast-botones{display:flex;gap:10px;justify-content:flex-end;pointer-events:auto}
.ast-btn{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#efeaff;
  border:1px solid rgb(201 184 255 / .2);background:rgb(22 12 50 / .45);-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .08);transition:background .25s,border-color .25s,transform .25s}
.ast-btn:hover{background:rgb(107 43 255 / .4);border-color:rgb(201 184 255 / .45)}
.ast-btn:active{transform:scale(.94)}
.ast-btn:focus-visible,.ast-go:focus-visible,.ast-cta:focus-visible{outline:2px solid #c9b8ff;outline-offset:3px}
.ast-son .off{display:none}.ast-son.mudo .off{display:inline}.ast-son.mudo .on{display:none}
.ast-pista{position:absolute;left:50%;bottom:max(28px,env(safe-area-inset-bottom));transform:translateX(-50%);margin:0;white-space:nowrap;
  font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#cfc6f2;padding:12px 18px;border-radius:999px;
  background:rgb(22 12 50 / .45);border:1px solid rgb(201 184 255 / .16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;transition:opacity .6s;pointer-events:none}
.ast.jugando .ast-pista{opacity:1}.ast.jugando .ast-pista.fuera{opacity:0}
.ast-pista kbd,.ast-teclas kbd{font:500 10.5px/1 var(--mono);letter-spacing:.08em;padding:5px 8px;border-radius:7px;color:#fff;
  border:1px solid rgb(201 184 255 / .3);background:rgb(255 255 255 / .06);box-shadow:inset 0 -2px 0 rgb(0 0 0 / .35)}
/* paneles de inicio y final */
.ast-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(calc(100vw - 32px),470px);max-height:calc(100dvh - 120px);overflow:auto;
  padding:clamp(26px,4vw,40px);border-radius:28px;text-align:center;
  background:linear-gradient(180deg,rgb(40 20 96 / .5),rgb(12 6 32 / .62));border:1px solid rgb(201 184 255 / .2);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 40px 120px -30px rgb(107 43 255 / .55),inset 0 1px 0 rgb(255 255 255 / .1);animation:ast-entra .7s var(--suave) both}
.ast-panel[hidden]{display:none}
@keyframes ast-entra{from{opacity:0;transform:translate(-50%,-46%) scale(.97)}}
.ast-eyebrow{font:500 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:#a993ff;margin:0 0 16px}
.ast-panel h2{font:700 clamp(38px,6vw,54px)/.98 var(--titular);letter-spacing:-.045em;color:#fff;margin:0 0 16px}
.ast-panel h2 em{font:inherit;font-style:normal;letter-spacing:inherit;
  background:linear-gradient(100deg,#c9b8ff 0%,#9d7bff 30%,#6b2bff 55%,#b49cff 75%,#e9e2ff 85%,#8f63ff 100%) 0 0/250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgb(124 77 255 / .4));animation:estela 7s ease-in-out infinite}
.ast-texto{color:#c4c0d6;font-size:15px;line-height:1.55;margin:0 auto 22px;max-width:36ch}
.ast-teclas{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:10px;justify-items:center}
.ast-teclas li{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.ast-teclas span{font-size:13.5px;color:#9e99b4;margin-left:6px}
.ast-acc{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.ast-go,.ast-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:999px;
  font:600 15px/1 "Inter",sans-serif;cursor:pointer;text-decoration:none;transition:transform .3s var(--suave),box-shadow .3s,background .3s}
.ast-go{border:0;color:#fff;background:linear-gradient(100deg,#7c4dff,#6b2bff 45%,#5a24e0);box-shadow:0 14px 40px -12px rgb(107 43 255 / .95),inset 0 1px 0 rgb(255 255 255 / .25)}
.ast-go:hover{transform:translateY(-2px);box-shadow:0 20px 50px -12px rgb(143 99 255 / 1),inset 0 1px 0 rgb(255 255 255 / .3)}
.ast-go span,.ast-cta span{transition:transform .3s var(--suave)}.ast-go:hover span,.ast-cta:hover span{transform:translateX(3px)}
.ast-cta{color:#fff;border:1px solid rgb(201 184 255 / .3);background:rgb(255 255 255 / .04)}
.ast-cta:hover{background:rgb(255 255 255 / .1);transform:translateY(-2px)}
.ast-inicio .ast-go{min-width:200px}
.ast-mejor{margin:18px 0 0;font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#8a8a93}
.ast-mejor b{color:#c9b8ff;font-weight:500}
.ast-gran{margin:0 0 6px;display:flex;flex-direction:column;align-items:center;gap:10px}
.ast-gran b{font:800 clamp(64px,11vw,96px)/.9 var(--titular);letter-spacing:-.05em;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff 20%,#c9b8ff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 30px rgb(143 99 255 / .45))}
.ast-gran small{font:500 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:#8a8a93}
.ast-nuevo{display:inline-block;margin:10px 0 0;padding:8px 14px;border-radius:999px;font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:#fff;background:linear-gradient(90deg,rgb(107 43 255 / .5),rgb(143 99 255 / .3));border:1px solid rgb(201 184 255 / .4)}
.ast-nuevo[hidden]{display:none}
.ast-fin .ast-texto{margin-top:16px}
.ast.sin-webgl .ast-inicio .ast-texto::after{content:" (Tu navegador no tiene WebGL activo: el juego no puede arrancar.)";color:#ff9ee0}
@media (max-width:640px){
  .ast-hud{grid-template-columns:1fr auto;padding-left:16px;padding-right:16px}
  .ast-marca{display:none}
  .ast-marcador{align-items:flex-start;grid-column:1}
  .ast-pts{font-size:30px}
  .ast-btn{width:44px;height:44px}
  .ast-pista{font-size:10px;letter-spacing:.12em;padding:10px 14px;white-space:normal;width:max-content;max-width:calc(100vw - 32px);text-align:center;line-height:1.6}
  .ast-panel{border-radius:24px}
  .ast-texto{font-size:14.5px}
  .ast-acc .ast-go,.ast-acc .ast-cta{flex:1 1 140px}
}
@media (prefers-reduced-motion:reduce){
  .ast-panel,.ast-pts.hito,.ast-panel h2 em{animation:none}
  .ast-marcador,.ast-pista,.ast-velo::after,.ast-go,.ast-cta,.ast-btn{transition:none}
}

/* ───────── propio de Asteroides ───────── */
.ast-capa-et{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
/* vidas: la A del logo en pequeño */
.ast-vidas{display:inline-flex;gap:5px;align-items:center}
.ast-vidas i{width:15px;height:15px;background:url(../img/a-carga.png) center/contain no-repeat;filter:drop-shadow(0 0 6px rgb(143 99 255 / .7))}
/* etiqueta de cada asteroide: pastilla de cristal oscuro, Inter Tight blanco */
.ast-et{position:absolute;z-index:1;left:0;top:0;white-space:nowrap;will-change:transform;
  font:600 14px/1 var(--titular);letter-spacing:-.01em;color:#fff;padding:6px 11px 7px;border-radius:999px;
  background:rgb(14 8 34 / .58);border:1px solid rgb(201 184 255 / .28);
  box-shadow:0 6px 22px -8px rgb(0 0 0 / .8),inset 0 1px 0 rgb(255 255 255 / .08);text-shadow:0 1px 6px rgb(4 2 10 / .8)}
.ast-et[hidden]{display:none}
.ast-et.t2{font-size:12.5px;padding:5px 9px 6px}
.ast-et.t1{font-size:10.5px;padding:4px 7px 5px;letter-spacing:0;background:rgb(14 8 34 / .5)}
/* texto flotante «+100 · adiós Excel» */
.ast-flota{position:absolute;z-index:2;transform:translate(-50%,-50%);display:flex;align-items:baseline;gap:8px;white-space:nowrap;pointer-events:none;
  animation:ast-flota 1.25s cubic-bezier(.2,.7,.2,1) forwards}
.ast-flota b{font:500 17px/1 var(--mono);letter-spacing:.04em;color:#fff;text-shadow:0 0 16px rgb(143 99 255 / .9),0 0 2px rgb(143 99 255)}
.ast-flota span{font:600 15px/1 var(--titular);letter-spacing:-.01em;color:#d9ccff;text-shadow:0 1px 10px rgb(4 2 10 / .9)}
.ast-flota span::before{content:"·";margin-right:8px;color:#8f63ff}
.ast-flota.especial b{color:#e9e2ff}
@keyframes ast-flota{0%{opacity:0;transform:translate(-50%,-30%) scale(.86)}14%{opacity:1;transform:translate(-50%,-60%) scale(1.04)}
  70%{opacity:1}100%{opacity:0;transform:translate(-50%,-190%) scale(1)}}
/* rótulo de oleada */
.ast-ola{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;opacity:0}
.ast-ola small{font:500 11px/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:#a993ff}
.ast-ola b{font:800 clamp(64px,9vw,104px)/.9 var(--titular);letter-spacing:-.05em;
  background:linear-gradient(180deg,#fff 20%,#c9b8ff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 30px rgb(143 99 255 / .5))}
.ast-ola span{font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#cfc6f2}
.ast-ola.ver{animation:ast-ola 2.1s var(--suave) both}
@keyframes ast-ola{0%{opacity:0;transform:translate(-50%,-40%) scale(.94)}18%,72%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-58%) scale(1.02)}}
/* separador entre chips en la misma fila */
.ast-teclas kbd.sep{margin-left:14px}
/* teclado o táctil: cada cual ve sus instrucciones */
.ast .solo-tactil{display:none}
.ast.tactil .solo-tactil{display:revert}
.ast.tactil .solo-teclado{display:none}
.ast.tactil ul.solo-tactil{display:grid}
/* datos del final */
.ast-datos{list-style:none;margin:18px auto 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:340px}
.ast-datos li{display:flex;flex-direction:column;gap:7px;padding:14px 10px;border-radius:16px;background:rgb(255 255 255 / .04);border:1px solid rgb(201 184 255 / .14)}
.ast-datos b{font:500 24px/1 var(--mono);color:#fff;font-variant-numeric:tabular-nums}
.ast-datos small{font:500 10px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#8a8a93}
/* mandos táctiles: joystick flotante (aparece donde se apoya el pulgar) y botón de disparo */
.ast-mando{position:absolute;inset:0;pointer-events:none;display:none}
.ast.tactil.jugando .ast-mando{display:block}
.ast-joy{position:absolute;left:max(86px,calc(env(safe-area-inset-left) + 86px));top:calc(100% - max(96px,calc(env(safe-area-inset-bottom) + 96px)));
  width:116px;height:116px;margin:-58px 0 0 -58px;border-radius:50%;
  border:1px solid rgb(201 184 255 / .28);background:radial-gradient(circle,rgb(107 43 255 / .1),rgb(22 12 50 / .38) 70%);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:.6;transition:opacity .25s}
.ast-joy.activo{opacity:1}
.ast-joy i{position:absolute;left:50%;top:50%;width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;
  background:linear-gradient(160deg,#9d7bff,#5a24e0);box-shadow:0 8px 24px -6px rgb(107 43 255 / .9),inset 0 1px 0 rgb(255 255 255 / .35)}
.ast-fuego{position:absolute;right:max(26px,env(safe-area-inset-right));bottom:max(38px,calc(env(safe-area-inset-bottom) + 24px));pointer-events:auto;
  width:88px;height:88px;border-radius:50%;display:grid;place-items:center;color:#fff;cursor:pointer;
  border:1px solid rgb(201 184 255 / .4);background:linear-gradient(150deg,rgb(124 77 255 / .75),rgb(90 36 224 / .7));
  box-shadow:0 16px 40px -10px rgb(107 43 255 / .9),inset 0 1px 0 rgb(255 255 255 / .3);touch-action:none;transition:transform .12s}
.ast-fuego.activo{transform:scale(.92);background:linear-gradient(150deg,#9d7bff,#6b2bff)}
.ast.tactil .ast-pista{bottom:auto;top:calc(max(18px,env(safe-area-inset-top)) + 64px)}
@media (max-width:640px){
  .ast-et{font-size:12px;padding:5px 9px 6px}
  .ast-et.t2{font-size:11px}
  .ast-et.t1{font-size:9.5px;padding:3px 6px 4px}
  .ast-flota b{font-size:15px}.ast-flota span{font-size:13px}
  .ast-sub{gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .ast-flota{animation:ast-flota-quieto 1.2s linear forwards}
  .ast-ola.ver{animation:ast-flota-quieto 2s linear both}
  @keyframes ast-flota-quieto{0%,80%{opacity:1}100%{opacity:0}}
}
/* mira del ratón (apuntar y volar): sustituye al cursor mientras se juega con ratón */
.ast-mira{position:absolute;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;pointer-events:none;opacity:0;transition:opacity .25s;
  border-radius:50%;border:1.5px solid rgb(201 184 255 / .85);box-shadow:0 0 14px rgb(143 99 255 / .7),inset 0 0 10px rgb(143 99 255 / .35)}
.ast-mira::before,.ast-mira::after{content:"";position:absolute;left:50%;top:50%;background:#e9e2ff;border-radius:2px}
.ast-mira::before{width:4px;height:4px;margin:-2px 0 0 -2px;box-shadow:0 0 8px #c9b8ff}
.ast-mira::after{width:46px;height:46px;margin:-23px 0 0 -23px;background:none;border-radius:50%;
  -webkit-mask:conic-gradient(#000 0 8%,transparent 0 25%,#000 0 33%,transparent 0 50%,#000 0 58%,transparent 0 75%,#000 0 83%,transparent 0);
  mask:conic-gradient(from -15deg,#000 0 8%,transparent 0 25%,#000 0 33%,transparent 0 50%,#000 0 58%,transparent 0 75%,#000 0 83%,transparent 0);
  border:1.5px solid rgb(201 184 255 / .55)}
.ast.jugando.con-raton:not(.tactil) .ast-mira{opacity:1}
.ast.jugando.con-raton:not(.tactil) .ast-lienzo{cursor:none}
.ast-teclas i{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#6f6a88;font-style:normal;margin:0 4px}