/* EL COHETE SE APODERA DE LA PANTALLA.
 *
 * Gonzalo, tres veces: «todo el juego está atrapado en ese pequeño recuadro,
 * ese es el problema, por eso es tan complicado» · «quiero que abra una hoja,
 * un tall sheet, para que puedas tener más espacio» · «que sea cinemático
 * también cuando empieces, que sientas que estás entrando en una película».
 *
 * EL JUEGO ES EL MISMO NODO, NO UNA COPIA. Se mueve dentro de la hoja al
 * cargar y vuelve a su sitio al cerrar. Un juego duplicado son dos juegos que
 * se desincronizan, que es exactamente el error que ya se cometió con el pong.
 */
.rocket-hoja{
  width:100%;max-width:none;height:100%;max-height:none;
  margin:0;padding:0;border:0;background:#030711;color:#fff;overflow:hidden;
}
.rocket-hoja::backdrop{background:#01040acc;backdrop-filter:blur(6px)}
.rocket-hoja__interior{display:flex;flex-direction:column;height:100dvh;overflow:hidden}
/* EL ESCENARIO SE QUEDA CON LO QUE SOBRA. Es lo contrario del recuadro: los
   mandos piden lo suyo y el espacio libre se lo lleva el espacio. */
.rocket-hoja .rocket-game{max-width:none;margin:0;border:0;border-radius:0;background:#030711;color:#fff;display:flex;flex-direction:column;flex:1;min-height:0}
.rocket-hoja .rocket-stage{flex:1;min-height:0;height:auto}
/* CRISTAL LIQUIDO, y el tinte NO es de gusto. Gonzalo: «los controles deberian
   ser liquid glass para que se siga viendo el cosmos de fondo». Calculado con
   el texto blanco sobre lo mas brillante del disco de acrecion: al 58% da
   5,25:1 y al 50% cae a 3,95, por debajo de 4,5. Asi que 58% de tinte y 42% de
   espacio que se ve pasar.
   Esta regla vive AQUI y no en rocket.css porque esta hoja se carga despues:
   la puse alli primero y la version solida de este mismo archivo la piso
   entera, con la misma especificidad y ganando por orden. */
.rocket-hoja .rocket-controls{
  flex:none;padding:16px 20px 22px;
  background:linear-gradient(180deg,#02081500,#02081594 26%,#02081594);
  -webkit-backdrop-filter:blur(18px) saturate(130%);backdrop-filter:blur(18px) saturate(130%);
  border-top:1px solid #ffffff1f;
}
.rocket-hoja .rocket-prompt{color:#eaf1ff;margin:4px 0 12px}
.rocket-hoja .rocket-feedback{color:#c6d8f5}
.rocket-hoja .rocket-lesson{border-top-color:#16243d;color:#dbe7fb}
.rocket-hoja .rocket-thesis{background:#0b1730;border-left-color:#86afff;color:#dbe7fb}
.rocket-hoja .rocket-action{background:#0b1f3aed;border-color:#86afff;color:#eaf1ff}
.rocket-hoja .rocket-primary{background:#1d4ed8;color:#fff}
.rocket-hoja .rocket-note,.rocket-hoja .rocket-modes{display:none}

/* LA SALIDA SIEMPRE VISIBLE. Una hoja que se come la pantalla sin salida a la
   vista se siente como una trampa, por bonita que sea. */
.rocket-hoja__salir{
  position:absolute;z-index:9;top:calc(env(safe-area-inset-top,0px) + 10px);right:12px;
  min-height:44px;min-width:44px;padding:10px 16px;
  border:1px solid #86afff66;border-radius:99px;background:#0b1f3aed;color:#eaf1ff;
  font:700 14px/1 "Source Sans 3",sans-serif;cursor:pointer;
}
.rocket-hoja__salir:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* EL CARTEL QUE QUEDA EN LA PÁGINA. Ocupa el sitio del juego mientras el juego
   vive dentro de la hoja: la portada no pierde la sección, gana una puerta. */
.rocket-cartel{
  position:relative;max-width:850px;margin:auto;overflow:hidden;
  width:100%;box-sizing:border-box;text-align:left;font:inherit;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  border:1px solid #16243d;border-radius:18px;
  background:#030711 url('/assets/rocket/black-hole.webp') center center/cover no-repeat;
  color:#fff;min-height:clamp(260px,46vw,380px);
  display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:22px;
}
.rocket-cartel::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#02081566,transparent 30%,#020815d9)}
.rocket-cartel>*{position:relative;z-index:1}
.rocket-cartel__kicker{margin:0;font:700 11px/1.4 "Source Sans 3",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#a9c8ff}
.rocket-cartel__frase{margin:0;font:400 clamp(21px,4.4vw,30px)/1.22 Georgia,serif;max-width:22ch;text-shadow:0 2px 14px #000}
.rocket-cartel:focus-visible{outline:3px solid #86afff;outline-offset:3px}
.rocket-cartel__entrar{
  display:inline-flex;align-items:center;align-self:flex-start;min-height:56px;padding:15px 26px;
  border:2px solid #86afff;border-radius:14px;background:#1d4ed8;color:#fff;
  font:700 clamp(16px,2.2vw,19px)/1.2 "Source Sans 3",sans-serif;cursor:pointer;
  box-shadow:0 10px 26px #0006;
}


@media(prefers-reduced-motion:no-preference){
  /* LA ENTRADA CINEMÁTICA: la hoja se abre desde el centro, como un iris de
     cine, y el espacio entra un pelo después que el marco. Dos tiempos, no
     uno: si todo entra a la vez se lee como un cambio de página. */
  .rocket-hoja[open]{animation:hoja-iris .52s cubic-bezier(.16,.84,.24,1) both}
  .rocket-hoja[open] .rocket-stage{animation:hoja-fondo .9s cubic-bezier(.2,.75,.2,1) both}
  .rocket-hoja[open] .rocket-controls{animation:hoja-mandos .5s ease-out .22s both}
  @keyframes hoja-iris{from{opacity:0;transform:scale(.88);clip-path:circle(22% at 50% 45%)}
                        to{opacity:1;transform:scale(1);clip-path:circle(120% at 50% 45%)}}
  @keyframes hoja-fondo{from{transform:scale(1.22);filter:blur(7px) brightness(.5)}
                        to{transform:scale(1);filter:blur(0) brightness(1)}}
  @keyframes hoja-mandos{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  .rocket-hoja[data-cerrando]{animation:hoja-sale .26s ease-in both}
  @keyframes hoja-sale{to{opacity:0;transform:scale(.94)}}
  .rocket-cartel{transition:transform .18s}
  .rocket-cartel:active{transform:scale(.985)}
}
html[data-hoja-cohete]{overflow:hidden}


/* ---------- EL TURBO DICE LO QUE CUESTA (20-sep) ----------
   Gonzalo: «el turbo necesita otro tratamiento porque no lo entendi en el
   boton». Tenia razon: decia «Turbo x3» y el precio -el riesgo de averia-
   vivia en un atributo que no se ve. Un trato con la mitad escondida no es un
   trato. Ahora la segunda linea dice lo que cuesta, y el ambar lo separa del
   primario azul: azul es «seguir», ambar es «potente y caro».
   Vive en ESTA hoja porque se carga la ultima; puesto en rocket.css lo pisaban
   las reglas base del boton, que ganan por orden con la misma especificidad. */
.rocket-hoja .rocket-turbo{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  width:100%;min-height:62px;padding:10px 14px;border-radius:14px;
  border:1px solid #f0c987;background:#2a1f0ecc;color:#ffe3b4;
  -webkit-backdrop-filter:blur(18px) saturate(130%);backdrop-filter:blur(18px) saturate(130%);
  font:700 17px/1.15 "Source Sans 3",sans-serif;box-shadow:none;
}
.rocket-hoja .rocket-turbo .turbo__precio{
  font:600 13px/1.2 "Source Sans 3",sans-serif;color:#f6d7a4;
}
.rocket-hoja .rocket-turbo:disabled{opacity:.5;color:#e8dcc6;border-color:#8a7a5f;background:#1a1509cc}


/* ---------- EL COSMOS LLEGA DE ARRIBA A ABAJO (20-sep) ----------
   Gonzalo: «quiero que el background del cosmos se extienda, que sangre de
   arriba a abajo». Medido dentro de la hoja: el escenario ocupaba los 664px de
   la pantalla pero la FOTO solo 283, o sea que el cosmos era una franja en
   medio con dos cantos rectos. Se fuerza a ocupar el escenario entero. */
/* La causa, encontrada leyendo la cascada entera: una regla posterior convierte
   el pozo en una IMAGEN con proporcion fija -aspect-ratio 1600/894 al 130% de
   ancho-, y eso en un telefono da 283px de alto. Por eso el cosmos era una
   franja en medio con dos cantos rectos. Dentro de la hoja vuelve a CUBRIR. */
.rocket-hoja .gravity-well{
  position:absolute;inset:0;left:0;top:0;width:auto;height:auto;
  aspect-ratio:auto;
  background-size:cover;background-position:62% center;
  transform:scale(var(--approach-scale,1));transform-origin:66% 48%;
}

/* ---------- EL BOTON SE TENSA AL ACERCARSE (20-sep) ----------
   Gonzalo: «el boton de abortar la mision creo que necesita un borde o algo asi
   que vaya cambiando conforme nos acercamos mas al hoyo, para que visualmente
   vean que tienen que aplastarlo, causarles mas ansiedad».
   El dato ya existia: `--acecho` va de 0 a 1 con la cercania y hasta hoy solo
   encendia el halo del pozo. Aqui mueve el borde del primario: de azul a ambar
   a rojo, y el halo crece. No parpadea: crece. Un parpadeo permanente es la
   clase de movimiento que el kit prohibe, y ademas se vuelve invisible a los
   diez segundos; un borde que engorda no se ignora. */
.rocket-hoja .rocket-cash{
  border-color:color-mix(in oklab,
    #86afff calc((1 - var(--acecho,0)) * 100%),
    #ff5d4d calc(var(--acecho,0) * 100%));
  box-shadow:
    0 0 0 calc(2px + var(--acecho,0) * 6px)
      color-mix(in oklab, #1d4ed800 calc((1 - var(--acecho,0)) * 100%), #ff5d4d55 calc(var(--acecho,0) * 100%)),
    0 8px 22px #0b1f3a20;
  transition:border-color .4s linear, box-shadow .4s linear;
}
/* Y en la recta final, cuando ya no queda margen, si late: tres veces y para. */
@media(prefers-reduced-motion:no-preference){
  .rocket-game[data-danger] .rocket-cash{animation:cash-urge 1.1s ease-in-out 3}
  @keyframes cash-urge{0%,100%{transform:scale(1)}50%{transform:scale(1.022)}}
}




/* ---------- AL LLEGAR SE VE ASTER (20-sep) ----------
   Gonzalo: «no se ve bien como si llegaste al planeta». Tenia razon: al final
   el pozo se apaga, la nave se va y queda una pantalla NEGRA con un panel de
   texto. Decirte que llegaste no es lo mismo que ensenartelo.

   El planeta se dibuja DENTRO del panel y no reutilizando el punto del rotulo
   de destino. Lo intente con ese y perdi cuatro pasadas: heredaba
   `visibility:hidden` de un ancestro, su margen lo anclaba a la derecha, y una
   animacion anterior lo escalaba x6,4 desde esa esquina y lo sacaba de la
   pantalla. Un elemento propio no arrastra nada de eso. */
.aster-llegada{
  display:block;width:116px;height:116px;margin:2px auto 14px;border-radius:50%;
  background:radial-gradient(circle at 28% 28%,#ddeaf0,#759dad 22%,#30485e 47%,#070e1c 70%);
  box-shadow:-6px -3px 26px #8cb6de77, 0 0 54px #6f9dff33;
}
@media(prefers-reduced-motion:no-preference){
  .aster-llegada{animation:aster-recibe 1s cubic-bezier(.2,.8,.2,1) both}
  @keyframes aster-recibe{
    from{transform:scale(.2);opacity:.2}
    62%{transform:scale(1.06);opacity:1}
    to{transform:scale(1);opacity:1}
  }
}

/* ---------- EL INTERRUPTOR DE LA MUSICA (20-sep) ----------
   A la izquierda de Salir, con el mismo cristal para que se lea sobre el
   cosmos. Apagada se ve apagada: si «Musica» y «Silencio» pesaran igual no se
   sabria cual de los dos es el estado y cual es la promesa. */
.rocket-hoja__son{
  position:absolute;z-index:9;top:calc(env(safe-area-inset-top,0px) + 10px);right:86px;
  min-height:44px;min-width:44px;padding:10px 14px;
  border:1px solid #86afff66;border-radius:99px;
  background:#0b1f3ab8;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  color:#eaf1ff;font:700 13px/1 "Source Sans 3",sans-serif;cursor:pointer;
}
.rocket-hoja__son[aria-pressed="false"]{color:#9fb4d4;border-color:#86afff33}
.rocket-hoja__son:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* La proximidad ya no flota sobre el escenario: vive con los mandos, en el
   flujo, que es lo unico que garantiza que nada la tape. */
.rocket-hoja .flight-proximity{
  position:static;inset:auto;width:auto;max-width:none;margin:0 0 8px;
  padding:8px 12px;border-radius:12px;
  background:#0b1f3a8f;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}