/* LA ESCENA QUE EXPLICA EL COHETE.
   Aire de consola de 16 bits: caja de texto con borde grueso, tipografía de
   ancho fijo, y el texto apareciendo letra a letra. No es nostalgia: una caja
   de diálogo con un nombre encima dice «esto te está hablando alguien» sin
   gastar una palabra en explicarlo. */
.rocket-game{position:relative}
.escena{
  position:absolute;inset:0;z-index:12;
  display:flex;align-items:flex-end;justify-content:center;
  padding:16px;
  background:linear-gradient(180deg,#020815a8,#020815e8 62%);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
}
.escena[data-saliendo]{opacity:0;pointer-events:none}

/* --- acto 1: la pregunta --- */
.escena__pregunta{
  margin:auto;text-align:center;max-width:30rem;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.escena__titulo{
  margin:0;color:#fff;text-wrap:balance;
  font:400 clamp(22px,5.2vw,32px)/1.18 Georgia,serif;
}
.escena__pie{margin:0;color:#b9c8e4;font:400 15px/1.4 "Source Sans 3",sans-serif}
.escena__si{
  margin-top:6px;min-height:48px;padding:12px 26px;border:0;border-radius:999px;
  background:#1d4ed8;color:#fff;cursor:pointer;
  font:600 17px/1.2 "Source Sans 3",sans-serif;
}

/* --- actos 2 y 3: la caja de diálogo --- */
.escena__caja{
  width:min(100%,34rem);box-sizing:border-box;
  padding:14px 16px 12px;
  border:3px solid #7fa6e8;border-radius:10px;
  background:#0b1730f2;
  box-shadow:0 0 0 3px #040d1f, 0 14px 34px #0009;
}
.escena__quien{
  margin:0 0 6px;color:#ffd9a8;
  font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.18em;text-transform:uppercase;
}
.escena__texto{
  margin:0;color:#fff;min-height:3.2em;
  font:400 16px/1.45 "Source Sans 3",sans-serif;text-wrap:pretty;
}
.escena__paso{
  margin:8px 0 0;color:#8fa6c8;
  font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;
}
.escena__seguir{
  margin-top:10px;min-height:44px;width:100%;padding:10px 18px;
  border:2px solid #7fa6e8;border-radius:8px;background:#16295180;color:#fff;cursor:pointer;
  font:600 16px/1.2 "Source Sans 3",sans-serif;
}
.escena__saltar{
  position:absolute;right:10px;top:10px;
  min-height:44px;padding:8px 14px;border:0;border-radius:999px;
  background:#ffffff1f;color:#dbe6fb;cursor:pointer;
  font:600 13px/1 "Source Sans 3",sans-serif;
}
.escena__si:focus-visible,.escena__seguir:focus-visible,.escena__saltar:focus-visible{
  outline:3px solid #fff;outline-offset:3px;
}

/* --- el foco que señala el mando de verdad --- */
.escena__foco{
  position:absolute;z-index:1;pointer-events:none;border-radius:14px;
  border:3px solid #ffd9a8;
  box-shadow:0 0 0 9999px #020815cc, 0 0 24px 4px #ffd9a866;
}
.escena__caja--mando{margin-bottom:4px}

@media(prefers-reduced-motion:no-preference){
  .escena{animation:escena-entra .28s ease-out}
  .escena[data-saliendo]{transition:opacity .3s ease}
  .escena__caja{animation:escena-sube .3s cubic-bezier(.2,.8,.25,1)}
  /* El foco late TRES veces y para: llamar la atención sobre un botón que ya
     estás mirando, para siempre, cansa. */
  .escena__foco{animation:escena-late 1.1s ease-in-out 3}
  @keyframes escena-entra{from{opacity:0}}
  @keyframes escena-sube{from{opacity:0;transform:translateY(14px)}}
  @keyframes escena-late{0%,100%{box-shadow:0 0 0 9999px #020815cc,0 0 18px 2px #ffd9a844}
                         50%{box-shadow:0 0 0 9999px #020815cc,0 0 34px 10px #ffd9a8aa}}
}

@media(max-width:600px){
  .escena{padding:10px}
  .escena__caja{padding:12px 13px 10px}
  .escena__texto{font-size:15px}
  .escena__saltar{right:8px;top:8px;padding:8px 12px}
}

/* ---------- MAS GRANDE, Y CON PERSONAJES (20-sep) ----------
   Gonzalo: «las instrucciones casi ni se leen, estan como bajitos en ese
   recuadro, tienen que ser mas grandes; debe contarte una historia narrativa,
   idealmente con pequenos personajes, ilustraciones, asi como hacian antes en
   Super Nintendo: te aparecian los personajes ahi y abajo el texto».
   El texto pasa de 16px fijos a 19-23px, la caja crece, y cada frase trae la
   cara de quien habla. */
.escena__caja{
  width:min(100%,40rem);
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  padding:16px 18px 14px;
}
.escena__cara{
  width:clamp(56px,15vw,76px);aspect-ratio:1;flex:none;
  border:3px solid #7fa6e8;border-radius:8px;background:#04122b;
  display:grid;place-items:center;overflow:hidden;
}
.escena__retrato{display:block;width:100%;height:100%}
.escena__retrato path,.escena__retrato circle,.escena__retrato ellipse{
  stroke:#04122b;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.escena__retrato .rp-fondo{fill:#12325f;stroke:none}
.escena__retrato .rp-casco{fill:#eef4ff}
.escena__retrato .rp-visor{fill:#1d4ed8}
.escena__retrato .rp-brillo{fill:none;stroke:#bcd8ff;stroke-width:3}
.escena__retrato .rp-traje{fill:#e8443c}
.escena__retrato .rp-disco{fill:#ffb020}
.escena__retrato .rp-hueco{fill:#04122b}
.escena__retrato .rp-tiron{fill:none;stroke:#ffd9a8;stroke-width:3}
.escena__retrato .rp-llama{fill:#ffb020}
.escena__retrato .rp-chispa{fill:none;stroke:#ffe45e;stroke-width:4}
.escena__retrato .rp-flecha{fill:none;stroke-width:4}
.escena__retrato .rp-flecha--bien{stroke:#8ef5c0}
.escena__retrato .rp-flecha--mal{stroke:#ff9d9d}
.escena__texto{font-size:clamp(19px,4.6vw,23px);line-height:1.4;min-height:4.2em}
.escena__quien{font-size:12.5px;margin-bottom:8px}
.escena__titulo{font-size:clamp(26px,6.4vw,40px)}
.escena__pie{font-size:17px}
.escena__caja--mando{grid-template-columns:1fr}
@media(max-width:380px){
  .escena__cara{width:52px}
  .escena__texto{font-size:18px}
}


/* ---------- MAS GRANDE TODAVIA (20-sep, jugandolo) ----------
   Gonzalo: «los personajes que sean un poco mas grandes para que se vea mas, y
   el boton de seguir esta apachurrado en vez de ser un boton primario completo».
   Visto en la captura tenia razon en las dos: el retrato media 59px dentro de
   una caja de 40rem, y «Seguir» era un boton con borde en una esquina, del
   tamano de un enlace. El primario de una escena es el unico camino adelante:
   ocupa el ancho. */
.escena__cara{width:clamp(78px,21vw,104px);border-width:3px;border-radius:10px}
.escena__caja{gap:16px;padding:18px 18px 16px}
.escena__seguir{
  grid-column:1/-1;width:100%;min-height:56px;margin-top:12px;
  border:0;border-radius:12px;background:#1d4ed8;color:#fff;cursor:pointer;
  font:700 18px/1.2 "Source Sans 3",sans-serif;
}
.escena__seguir:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* El contador deja de partir en dos el texto y el boton: se va a la esquina. */
.escena__paso{position:absolute;right:16px;bottom:14px;margin:0;font-size:11.5px;opacity:.7}
.escena__caja{position:relative}
@media(max-width:380px){.escena__cara{width:70px}}

/* ---------- LA ESCENA USA EL SITIO QUE TIENE (20-sep) ----------
   Gonzalo, con media pantalla vacia encima de la caja: «las instrucciones
   tienen que ser mas altas, el texto mas grande, el personaje mas grande, y el
   boton mas cerca de donde naturalmente estaria el pulgar, porque estaba
   dificil de agarrar alla abajo; y que no se choque el texto con ese botoncito».

   Cuatro cosas, y las cuatro son la misma: habia espacio y no se usaba.

   EL POR QUE DEL PULGAR: el boton pegado al borde inferior parece comodo y no
   lo es. El arco natural del pulgar en un telefono grande acaba antes del
   borde, asi que lo ultimo de la pantalla es de lo mas incomodo que hay. Se
   sube separandolo del canto. */
.escena{align-items:flex-end;padding:16px 16px calc(env(safe-area-inset-bottom,0px) + 34px)}
/* COLOCACION EXPLICITA. Con las filas en automatico el boton caia a media
   altura y dejaba un hueco muerto debajo, medido y visto: la caja era alta y el
   contenido se apilaba arriba. Ahora el retrato y el texto ocupan la fila que
   crece, y el boton vive SIEMPRE en la de abajo. */
.escena__caja{
  width:min(100%,40rem);
  min-height:min(52vh,420px);
  grid-template-columns:auto 1fr;
  grid-template-rows:1fr auto;
  gap:18px;padding:22px 20px 20px;
}
.escena__cara{grid-column:1;grid-row:1;align-self:start}
.escena__dicho{grid-column:2;grid-row:1}
.escena__seguir{grid-column:1/-1;grid-row:2}
.escena__cara{width:clamp(96px,26vw,132px)}
.escena__texto{font-size:clamp(21px,5.4vw,26px);line-height:1.38}
.escena__quien{font-size:13.5px;letter-spacing:.2em}
/* EL CONTADOR SE VA ARRIBA. Abajo a la derecha caia ENCIMA del boton: en la
   captura el «3 / 4» se lee dentro de «Seguir». Un contador no compite con el
   unico camino adelante. */
.escena__paso{
  position:static;grid-column:1/-1;justify-self:end;align-self:start;
  margin:0;font-size:12.5px;opacity:.65;
}
.escena__dicho{display:flex;flex-direction:column;justify-content:center;min-height:100%}
.escena__seguir{min-height:60px;font-size:19px;margin-top:0}
@media(max-width:380px){
  .escena__cara{width:84px}
  .escena__texto{font-size:20px}
  .escena__caja{min-height:min(60vh,420px)}
}