/* ================================================================
   ROLEPLAY QUIZ (RPQ) · escenario, actores y caja de diálogo
   Compartida por builder.html y play.html.

     .rpq-stage        caja de proporción fija
       .rpq-bg ×2      capas de fundido cruzado de escena
       .rpq-weather    lluvia / niebla / brasas
       .rpq-vignette   viñeta de bordes
       .rpq-actors     sprites de personajes
       .rpq-hud        barras de vida
       .rpq-flash      fogonazo de daño / golpe crítico
       .rpq-box        caja de diálogo
       .rpq-choices    opciones
   ================================================================ */

.rpq-stage {
  /* Unidad base del texto del escenario (fallback; ver @supports abajo) */
  --u: 1vw;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 300px;
  overflow: hidden;
  border-radius: 18px;
  isolation: isolate;
  background: #07050c;
  color: #fff;
  font-family: var(--rpq-font, 'Nunito', sans-serif);
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  contain: paint;

  /* Skin por defecto */
  --rpq-box-bg:      linear-gradient(180deg, rgba(18,12,30,.92), rgba(10,7,18,.96));
  --rpq-box-border:  1.5px solid rgba(160,200,255,.30);
  --rpq-box-radius:  18px;
  --rpq-box-shadow:  0 -10px 40px rgba(0,0,0,.5);
  --rpq-text-color:  #f2eeff;
  --rpq-name-bg:     linear-gradient(135deg, rgba(141,238,255,.18), rgba(169,106,231,.18));
  --rpq-name-border: rgba(141,238,255,.45);
  --rpq-font:        'Nunito', sans-serif;
  --rpq-font-name:   'Baloo 2', cursive;
  --rpq-opt-bg:      rgba(255,255,255,.06);
  --rpq-opt-border:  rgba(255,255,255,.20);
  --rpq-opt-hover:   #8deeff;
  --rpq-accent:      #8deeff;
}

/* Pantalla completa */
.rpq-stage:fullscreen,
.rpq-stage:-webkit-full-screen {
  aspect-ratio: auto;
  width: 100vw;
  height: 100vh;
  border-radius: 0;
}

/* ══════════════════════════════════════════════════════════════════
   FONDO
   ══════════════════════════════════════════════════════════════════ */
.rpq-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity .55s ease;
  will-change: opacity;
}
.rpq-bg.is-on { opacity: 1; }
.rpq-bg.is-photo { background-size: cover; }

.rpq-vignette {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,.28) 0%, transparent 22%, transparent 52%, rgba(0,0,0,.62) 100%);
}

/* ══════════════════════════════════════════════════════════════════
   CLIMA
   ══════════════════════════════════════════════════════════════════ */
.rpq-weather { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.rpq-weather[data-fx]:not([data-fx=""])::before,
.rpq-weather[data-fx]:not([data-fx=""])::after {
  content: ""; position: absolute; inset: -30%;
}

.rpq-weather[data-fx="lluvia"]::before {
  background: repeating-linear-gradient(104deg, rgba(190,220,255,.34) 0 1px, transparent 1px 9px);
  animation: rpq-lluvia .55s linear infinite;
}
.rpq-weather[data-fx="lluvia"]::after {
  background: repeating-linear-gradient(100deg, rgba(190,220,255,.18) 0 1px, transparent 1px 16px);
  animation: rpq-lluvia .9s linear infinite;
}
@keyframes rpq-lluvia { from { transform: translate3d(0,-14%,0); } to { transform: translate3d(-6%,14%,0); } }

.rpq-weather[data-fx="nieve"]::before,
.rpq-weather[data-fx="destellos"]::before {
  background:
    radial-gradient(2.5px 2.5px at 12% 20%, #fff, transparent),
    radial-gradient(2px 2px at 42% 62%, #fff, transparent),
    radial-gradient(3px 3px at 71% 32%, #fff, transparent),
    radial-gradient(2px 2px at 88% 74%, #fff, transparent),
    radial-gradient(2.5px 2.5px at 28% 88%, #fff, transparent);
  background-size: 340px 340px;
  opacity: .8;
  animation: rpq-caer 9s linear infinite;
}
.rpq-weather[data-fx="destellos"]::before {
  animation: rpq-brillar 3.4s ease-in-out infinite alternate;
}
@keyframes rpq-caer { from { transform: translate3d(0,-12%,0); } to { transform: translate3d(3%,12%,0); } }
@keyframes rpq-brillar { from { opacity: .25; } to { opacity: .9; } }

.rpq-weather[data-fx="brasas"]::before {
  background:
    radial-gradient(3px 3px at 18% 82%, rgba(255,168,80,.95), transparent),
    radial-gradient(2px 2px at 52% 68%, rgba(255,120,60,.9), transparent),
    radial-gradient(2.5px 2.5px at 78% 88%, rgba(255,196,110,.9), transparent);
  background-size: 300px 300px;
  animation: rpq-subir 7s linear infinite;
}
@keyframes rpq-subir { from { transform: translate3d(0,12%,0); } to { transform: translate3d(-4%,-14%,0); } }

.rpq-weather[data-fx="niebla"]::before {
  background: radial-gradient(60% 40% at 30% 70%, rgba(220,230,255,.22), transparent 70%),
              radial-gradient(50% 34% at 74% 62%, rgba(220,230,255,.16), transparent 70%);
  animation: rpq-vagar 22s ease-in-out infinite alternate;
}
@keyframes rpq-vagar { from { transform: translate3d(-4%,0,0) scale(1); } to { transform: translate3d(4%,-2%,0) scale(1.12); } }

/* ── TEMBLOR E INTERFERENCIA ───────────────────────── */
.rpq-stage[data-clima="temblor"] .rpq-bg,
.rpq-stage[data-clima="temblor"] .rpq-actors {
  animation: rpq-temblor 1.9s steps(1) infinite;
}
@keyframes rpq-temblor {
  0%   { transform: translate3d(0, 0, 0); }
  3%   { transform: translate3d(-4px, 2px, 0); }
  6%   { transform: translate3d(3px, -3px, 0); }
  9%   { transform: translate3d(-3px, -1px, 0); }
  12%  { transform: translate3d(4px, 2px, 0); }
  15%  { transform: translate3d(-2px, 3px, 0); }
  18%  { transform: translate3d(2px, -2px, 0); }
  21%, 100% { transform: translate3d(0, 0, 0); }
}

/* ── INTERFERENCIA ──────────────────────────────── */
.rpq-tear { position: absolute; inset: 0; pointer-events: none; }
.rpq-stage[data-clima="interferencia"] .rpq-tear::before,
.rpq-stage[data-clima="interferencia"] .rpq-tear::after {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: hue-rotate(90deg) saturate(1.8) contrast(1.15);
  -webkit-backdrop-filter: hue-rotate(90deg) saturate(1.8) contrast(1.15);
  animation: rpq-banda-a 2.7s steps(1) infinite;
}
.rpq-stage[data-clima="interferencia"] .rpq-tear::after {
  backdrop-filter: hue-rotate(-70deg) saturate(2.2) brightness(1.15);
  -webkit-backdrop-filter: hue-rotate(-70deg) saturate(2.2) brightness(1.15);
  animation: rpq-banda-b 3.9s steps(1) infinite .6s;
}
@keyframes rpq-banda-a {
  0%, 100% { clip-path: inset(100% 0 0 0); }
  8%       { clip-path: inset(18% 0 74% 0); }
  10%      { clip-path: inset(100% 0 0 0); }
  46%      { clip-path: inset(61% 0 33% 0); }
  49%      { clip-path: inset(100% 0 0 0); }
  50%      { clip-path: inset(7% 0 88% 0); }
  52%      { clip-path: inset(100% 0 0 0); }
}
@keyframes rpq-banda-b {
  0%, 100% { clip-path: inset(100% 0 0 0); }
  22%      { clip-path: inset(40% 0 55% 0); }
  25%      { clip-path: inset(100% 0 0 0); }
  67%      { clip-path: inset(78% 0 14% 0); }
  70%      { clip-path: inset(30% 0 66% 0); }
  73%      { clip-path: inset(100% 0 0 0); }
}

.rpq-stage[data-clima="interferencia"] .rpq-bg {
  animation: rpq-desgarro 2.7s steps(1) infinite;
}
@keyframes rpq-desgarro {
  0%, 100% { transform: translate3d(0,0,0); filter: hue-rotate(0); }
  8%       { transform: translate3d(-9px,0,0); filter: hue-rotate(12deg) contrast(1.2); }
  10%      { transform: translate3d(0,0,0); filter: hue-rotate(0); }
  50%      { transform: translate3d(7px,-2px,0); filter: hue-rotate(-18deg) brightness(1.2); }
  52%      { transform: translate3d(0,0,0); filter: hue-rotate(0); }
}
.rpq-stage[data-clima="interferencia"] .rpq-actors {
  animation: rpq-aberracion 2.7s steps(1) infinite;
}
@keyframes rpq-aberracion {
  0%, 100% { filter: none; transform: translate3d(0,0,0); }
  8%       { filter: drop-shadow(3px 0 0 rgba(255,45,94,.6)) drop-shadow(-3px 0 0 rgba(34,230,255,.6)); transform: translate3d(3px,0,0); }
  10%      { filter: none; transform: translate3d(0,0,0); }
  50%      { filter: drop-shadow(-4px 0 0 rgba(255,45,94,.55)) drop-shadow(4px 0 0 rgba(34,230,255,.55)); transform: translate3d(-2px,0,0); }
  52%      { filter: none; transform: translate3d(0,0,0); }
}

/* ══════════════════════════════════════════════════════════════════
   ACTORES
   ══════════════════════════════════════════════════════════════════ */
/* Unidad relativa al contenedor (fallback: --u: 1vw) */
@supports (container-type: inline-size) {
  .rpq-stage { container-type: inline-size; --u: 1cqw; }
}

.rpq-actors { position: absolute; inset: 0; pointer-events: none; }

.rpq-actor {
  position: absolute;
  bottom: 0;
  height: 84%;
  max-width: 46%;
  object-fit: contain;
  object-position: bottom center;
  transform-origin: 50% 100%;
  /* --op opacidad, --esc escala, --flip volteo horizontal, --fx efecto */
  --op: 1;
  --esc: 1;
  --flip: 1;
  --fx: ;
  filter: var(--fx, ) drop-shadow(0 14px 26px rgba(0,0,0,.55));
  opacity: 0;
  transition: opacity .38s ease, transform .38s ease, filter .3s ease;
  will-change: transform, opacity;
}
.rpq-actor[data-pos="left"]   { left: 3%;  transform: translateX(-26px) scaleX(var(--flip)) scale(var(--esc)); }
.rpq-actor[data-pos="center"] { left: 50%; transform: translate(-50%, 0) scaleX(var(--flip)) scale(calc(.98 * var(--esc))); }
.rpq-actor[data-pos="right"]  { right: 3%; transform: translateX(26px) scaleX(var(--flip)) scale(var(--esc)); }

.rpq-actor.is-in[data-pos="left"]   { opacity: var(--op); transform: translateX(0) scaleX(var(--flip)) scale(var(--esc)); }
.rpq-actor.is-in[data-pos="center"] { opacity: var(--op); transform: translate(-50%, 0) scaleX(var(--flip)) scale(var(--esc)); }
.rpq-actor.is-in[data-pos="right"]  { opacity: var(--op); transform: translateX(0) scaleX(var(--flip)) scale(var(--esc)); }

.rpq-actor.is-out { opacity: 0 !important; }

/* Quien no habla se apaga: es la señal más barata de quién tiene la
   palabra, y ahorra repetir el nombre dentro del texto. */
.rpq-actor.is-dim { filter: var(--fx, ) drop-shadow(0 10px 20px rgba(0,0,0,.5)) brightness(.5) saturate(.6); }
.rpq-actor.is-talking { filter: var(--fx, ) drop-shadow(0 16px 30px rgba(0,0,0,.6)) brightness(1.06); }

/* ── LOS EFECTOS ──────────────────────────────────────────────────
   Filtros y nada más: el sprite sigue siendo el mismo archivo. Un
   personaje que sale en blanco y negro en el recuerdo y en color en el
   presente no son dos WebP, es un `data-fx`. */
.rpq-actor[data-fx="bn"]       { --fx: grayscale(1) contrast(1.06); }
.rpq-actor[data-fx="sepia"]    { --fx: sepia(.8) saturate(.75) contrast(.95) brightness(1.04); }
/* Negro puro: alguien a contraluz, o de quien todavía no se sabe la cara. */
.rpq-actor[data-fx="silueta"]  { --fx: brightness(0) opacity(.92); }
.rpq-actor[data-fx="fantasma"] { --fx: blur(1.4px) saturate(.45) brightness(1.25) opacity(.62); }
.rpq-actor[data-fx="neon"]     { --fx: saturate(1.75) contrast(1.12) drop-shadow(0 0 12px rgba(141,238,255,.75)); }

/* ── GLITCH ───────────────────────────────────────────────────────
   Tres operaciones, en este orden: SE CORTA, SE MUEVE, SE TIÑE.
   (La receta es la de muffinman.io/blog/css-image-glitch.)

   Antes esto era una animación de `filter` y nada más: el sprite entero
   parpadeaba a la vez. Se leía como un fallo de brillo, no como una
   señal corrupta, porque a un glitch de verdad lo define que la imagen
   se PARTA — que una franja se vaya de sitio mientras el resto se queda.

   Eso pide más de una capa, y un <img> no admite pseudoelementos. Así
   que el motor pone cinco copias del mismo sprite encima del original
   (`.rpq-tira`), cada una recortada a una franja horizontal distinta con
   `clip-path`. Juntas tapan el sprite entero, así que en reposo no se
   nota nada: la imagen se ve igual. Cuando la animación desplaza una
   franja, esa franja se va y debajo asoma el original — el desgarro.

   Que las copias sean <img> con la misma clase `.rpq-actor` no es
   pereza: heredan tal cual el alto, el ancho máximo, el `object-fit` y
   el `left/right` del personaje, así que encajan al píxel sin tener que
   calcular su caja desde JavaScript. Si el sprite es más estrecho, las
   copias también.

   FALLA HACIA LO BONITO: si el motor no llega a poner las tiras
   —rendimiento bajo, movimiento reducido, un navegador viejo— el
   original de debajo conserva su propia animación de color y el efecto
   sigue existiendo, más pobre pero entero. */

/* Los saltos son de un fotograma: los dos fotogramas clave que forman
   cada salto van separados 0,1%, así que el navegador no tiene sitio
   para interpolar nada. Un glitch que se desvanece suavemente no es un
   glitch. Y `hue-rotate(0)` en vez de `none` en el reposo porque Safari
   no sabe animar un filtro que empieza valiendo `none`.

   `--tdim` y `--tsat` son el apagado de "este no está hablando": el
   filtro de `.is-dim` no puede llegar hasta aquí porque una animación
   gana a cualquier regla, y sin esto las tiras taparían al personaje
   apagado con su copia a pleno brillo. */
@keyframes rpq-tira-a {
  0%, 26%, 36%, 71%, 81%, 100% {
    transform: var(--tira-base);
    filter: hue-rotate(0) brightness(var(--tdim, 1)) saturate(var(--tsat, 1));
  }
  26.1%, 35.9% {
    transform: var(--tira-base) translateX(var(--gx1));
    filter: hue-rotate(var(--gh1)) drop-shadow(2px 0 0 rgba(34,230,255,.55))
            brightness(var(--tdim, 1)) saturate(var(--tsat, 1));
  }
  71.1%, 80.9% {
    transform: var(--tira-base) translateX(var(--gx2));
    filter: hue-rotate(var(--gh2)) drop-shadow(-3px 0 0 rgba(255,45,94,.55))
            brightness(var(--tdim, 1)) saturate(var(--tsat, 1));
  }
}
@keyframes rpq-tira-b {
  0%, 14%, 21%, 52%, 58%, 88%, 93%, 100% {
    transform: var(--tira-base);
    filter: hue-rotate(0) brightness(var(--tdim, 1)) saturate(var(--tsat, 1));
  }
  14.1%, 20.9% {
    transform: var(--tira-base) translateX(var(--gx2));
    filter: hue-rotate(var(--gh2)) drop-shadow(-2px 0 0 rgba(255,45,94,.6))
            brightness(var(--tdim, 1)) saturate(var(--tsat, 1));
  }
  52.1%, 57.9% {
    transform: var(--tira-base) translateX(var(--gx1));
    filter: hue-rotate(var(--gh1)) drop-shadow(3px 0 0 rgba(34,230,255,.6))
            brightness(var(--tdim, 1)) saturate(var(--tsat, 1));
  }
  /* El tercer salto no mueve nada: apaga la franja. Un trozo de imagen
     que desaparece un fotograma y vuelve es tan glitch como uno que se
     va de sitio, y rompe la cadencia para que no se oiga el bucle. */
  88.1%, 92.9% {
    transform: var(--tira-base);
    filter: hue-rotate(0) opacity(.25) brightness(var(--tdim, 1)) saturate(var(--tsat, 1));
  }
}
@keyframes rpq-tira-c {
  0%, 41%, 49%, 63%, 67%, 100% {
    transform: var(--tira-base);
    filter: hue-rotate(0) brightness(var(--tdim, 1)) saturate(var(--tsat, 1));
  }
  41.1%, 48.9% {
    transform: var(--tira-base) translateX(var(--gx1));
    filter: hue-rotate(var(--gh1)) drop-shadow(-2px 0 0 rgba(255,45,94,.5))
            brightness(var(--tdim, 1)) saturate(var(--tsat, 1));
  }
  63.1%, 66.9% {
    transform: var(--tira-base) translateX(var(--gx2)) scaleY(1.04);
    filter: hue-rotate(var(--gh2)) contrast(1.5)
            brightness(var(--tdim, 1)) saturate(var(--tsat, 1));
  }
}

.rpq-tira {
  /* La animación escribe `transform` entera, así que la posición del
     personaje tiene que viajar dentro de una variable: sin esto, el
     primer fotograma mandaría a la copia al origen del escenario. */
  --tira-base: scaleX(var(--flip)) scale(var(--esc));
  transition: none;
  will-change: transform, filter;
  /* Sin la sombra grande del personaje: son cinco copias, y cinco
     sombras proyectadas del mismo sprite es pintar seis veces lo mismo
     para no ver ninguna diferencia. */
  filter: none;
}
.rpq-tira[data-pos="center"] { --tira-base: translate(-50%, 0) scaleX(var(--flip)) scale(var(--esc)); }

/* Las cinco franjas. Los altos son desiguales a propósito: cinco tiras
   idénticas se leen como una persiana, y un desgarro no tiene medida.
   Entre todas cubren de 0 a 100 sin solaparse, así que en reposo el
   sprite se ve exactamente igual que sin efecto. */
.rpq-tira[data-tira="1"] { clip-path: inset(0    0 86%  0); --gx1:  9px; --gx2: -14px; --gh1:  22deg; --gh2: -30deg; animation: rpq-tira-b 5.2s infinite;         }
.rpq-tira[data-tira="2"] { clip-path: inset(14%  0 69%  0); --gx1: -16px; --gx2:   7px; --gh1: -40deg; --gh2:  18deg; animation: rpq-tira-a 3.7s infinite  .4s;   }
.rpq-tira[data-tira="3"] { clip-path: inset(31%  0 50%  0); --gx1:  22px; --gx2: -10px; --gh1:  95deg; --gh2: -14deg; animation: rpq-tira-c 4.9s infinite 1.1s;   }
.rpq-tira[data-tira="4"] { clip-path: inset(50%  0 27%  0); --gx1: -11px; --gx2:  17px; --gh1: -25deg; --gh2:  70deg; animation: rpq-tira-a 6.3s infinite  .7s;   }
.rpq-tira[data-tira="5"] { clip-path: inset(73%  0  0   0); --gx1:  13px; --gx2:  -8px; --gh1:  16deg; --gh2: -55deg; animation: rpq-tira-b 4.1s infinite 1.9s;   }

.rpq-tira.is-dim     { --tdim: .5; --tsat: .6; }
.rpq-tira.is-talking { --tdim: 1.06; }

/* El original de debajo. Se queda con una versión suave del efecto de
   siempre —el desdoble en rojo y cian— por dos motivos: tapa el
   fotograma en que una tira se aparta, y es lo único que se ve si las
   tiras no llegan a existir. */
.rpq-actor[data-fx="glitch"] { animation: rpq-glitch 3.3s steps(1) infinite; }
@keyframes rpq-glitch {
  0%, 46%, 100% { filter: drop-shadow(0 14px 26px rgba(0,0,0,.55)); }
  48% { filter: drop-shadow(0 14px 26px rgba(0,0,0,.55)) drop-shadow(3px 0 0 rgba(255,45,94,.85)) drop-shadow(-3px 0 0 rgba(34,230,255,.85)) saturate(1.4); }
  50% { filter: drop-shadow(0 14px 26px rgba(0,0,0,.55)) brightness(1.5); }
  52% { filter: drop-shadow(0 14px 26px rgba(0,0,0,.55)) drop-shadow(-5px 0 0 rgba(255,45,94,.9)) drop-shadow(5px 0 0 rgba(34,230,255,.9)) contrast(1.3); }
  54%, 84% { filter: drop-shadow(0 14px 26px rgba(0,0,0,.55)); }
  86% { filter: drop-shadow(0 14px 26px rgba(0,0,0,.55)) drop-shadow(2px 0 0 rgba(255,45,94,.7)) drop-shadow(-2px 0 0 rgba(34,230,255,.7)); }
  88% { filter: drop-shadow(0 14px 26px rgba(0,0,0,.55)); }
}

/* Aqui vivia `.rpq-actor.is-pop`, el destello que se disparaba en cada
   cambio de expresion. Se quito entero: subrayaba algo que no lo
   necesitaba y hacia parpadear el render en cada linea de dialogo.

   Solo se anima `filter`, nunca `transform`: la posicion del sprite YA
   vive en transform (data-pos), y una animacion que lo tocara mandaria
   al personaje al centro de la pantalla durante un tercio de segundo.
   Vale para is-hurt y para cualquiera que se añada despues. */
.rpq-actor.is-hurt { animation: rpq-hurt .5s ease; }
@keyframes rpq-hurt {
  0%, 100% { filter: drop-shadow(0 14px 26px rgba(0,0,0,.55)); }
  10%, 30%, 50% { filter: drop-shadow(0 14px 26px rgba(0,0,0,.55)) brightness(2.4) sepia(1) hue-rotate(-40deg) saturate(6); }
  20%, 40%, 60% { filter: drop-shadow(0 14px 26px rgba(0,0,0,.55)); }
}

/* ══════════════════════════════════════════════════════════════════
   BARRAS DE VIDA
   ══════════════════════════════════════════════════════════════════ */
.rpq-hud { position: absolute; inset: 0; pointer-events: none; }

.rpq-hp {
  position: absolute;
  width: min(38%, 300px);
  padding: 8px 12px 10px;
  border-radius: 14px;
  background: rgba(8,5,16,.62);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.rpq-hp.is-enemy { top: 3.5%; right: 3%; }
.rpq-hp.is-hero  { bottom: 30%; left: 3%; }

/* Con «ocultar barras durante los diálogos» las barras entran y salen
   muchas veces en una partida, y apareciendo de golpe se leen como un
   parpadeo de error. La animación corre sola al pasar de `hidden` a
   visible —el navegador la reinicia cuando el display deja de ser
   none—, así que no hace falta que el guion la dispare.
   No lleva animación de salida a propósito: irse discretamente es lo
   que se le pide, y encadenar una salida obligaría a retrasar el
   `hidden` con un temporizador que se puede desincronizar. */
@keyframes rpq-hp-entra {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.rpq-hp { animation: rpq-hp-entra .26s ease-out both; }
.rpq-hp.is-hero { animation-name: rpq-hp-entra-abajo; }
@keyframes rpq-hp-entra-abajo {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rpq-hp { animation: none; }
}

.rpq-hp-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 6px;
}
.rpq-hp-name {
  font-family: var(--rpq-font-name); font-weight: 800; font-size: clamp(11px, calc(1.5 * var(--u)), 15px);
  letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rpq-hp-num {
  font-size: clamp(9px, calc(1.1 * var(--u)), 12px); font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.72); font-weight: 700; flex: none;
}
.rpq-hp-track {
  height: 10px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,.12);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.5);
}
.rpq-hp-fill {
  display: block; height: 100%; width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #3ddc97, #8deeff);
  transition: width .45s cubic-bezier(.2,.9,.3,1), background .3s ease;
}
.rpq-hp.is-enemy .rpq-hp-fill { background: linear-gradient(90deg, #ff6b8a, #ffa14a); }
.rpq-hp.is-critico .rpq-hp-fill { background: linear-gradient(90deg, #ff3b52, #ff8a5c); animation: rpq-latido 1s ease-in-out infinite; }
.rpq-hp.is-vacio { opacity: .55; }
@keyframes rpq-latido { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.55); } }

/* Números flotantes de daño y curación */
.rpq-num {
  position: absolute; right: 12px; top: -6px;
  font-family: var(--rpq-font-name); font-weight: 800;
  font-size: clamp(16px, calc(2.4 * var(--u)), 26px);
  text-shadow: 0 2px 8px rgba(0,0,0,.7);
  animation: rpq-flota 1.1s ease-out forwards;
  pointer-events: none;
}
.rpq-num.is-dano  { color: #ff6b6b; }
.rpq-num.is-cura  { color: #6bffb0; }
.rpq-num.is-crit  { color: #ffd76b; font-size: clamp(20px, calc(3.2 * var(--u)), 34px); }
@keyframes rpq-flota {
  0%   { opacity: 0; transform: translateY(6px) scale(.8); }
  20%  { opacity: 1; transform: translateY(-4px) scale(1.12); }
  100% { opacity: 0; transform: translateY(-38px) scale(1); }
}

/* ══════════════════════════════════════════════════════════════════
   FOGONAZO Y TEMBLOR
   ══════════════════════════════════════════════════════════════════ */
.rpq-flash {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  mix-blend-mode: screen;
}
.rpq-flash.is-on { animation: rpq-flash .42s ease-out; }
@keyframes rpq-flash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }

.rpq-stage.is-shake { animation: rpq-shake .42s cubic-bezier(.36,.07,.19,.97); }
.rpq-stage.is-shake-fuerte { animation: rpq-shake-fuerte .62s cubic-bezier(.36,.07,.19,.97); }
@keyframes rpq-shake {
  10%, 90% { transform: translate(-2px, 1px); }
  20%, 80% { transform: translate(3px, -2px); }
  30%, 50%, 70% { transform: translate(-5px, 2px); }
  40%, 60% { transform: translate(5px, -1px); }
}
@keyframes rpq-shake-fuerte {
  10%, 90% { transform: translate(-5px, 3px) rotate(-.2deg); }
  20%, 80% { transform: translate(7px, -4px) rotate(.25deg); }
  30%, 50%, 70% { transform: translate(-11px, 5px) rotate(-.35deg); }
  40%, 60% { transform: translate(11px, -3px) rotate(.3deg); }
}

/* ══════════════════════════════════════════════════════════════════
   AVISO FLOTANTE (dato al acertar, bandera conseguida…)
   ══════════════════════════════════════════════════════════════════ */
.rpq-toast {
  position: absolute; left: 50%; top: 8%;
  transform: translateX(-50%);
  max-width: 78%;
  padding: 10px 18px;
  border-radius: 14px;
  background: rgba(10,7,20,.86);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: clamp(11px, calc(1.5 * var(--u)), 14px); font-weight: 700; line-height: 1.55;
  text-align: center;
  animation: rpq-toast-in .3s ease;
}
.rpq-toast.is-ok   { border-color: rgba(61,220,151,.6);  color: #9dffd4; }
.rpq-toast.is-mal  { border-color: rgba(255,107,138,.6); color: #ffb7c4; }
.rpq-toast.is-dato { border-color: rgba(141,238,255,.6); color: #cdf4ff; }
@keyframes rpq-toast-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ══════════════════════════════════════════════════════════════════
   CAJA DE DIÁLOGO
   ------------------------------------------------------------------
   El ancla de la interfaz. Ocupa el ancho con un margen generoso, y el
   texto lleva su propio aire: 1.65 de interlínea y 18-22px de relleno.
   Con menos, en cuanto una frase pasa de dos líneas, el bloque se lee
   como un muro.
   ══════════════════════════════════════════════════════════════════ */
.rpq-box {
  position: absolute;
  left: 3.5%; right: 3.5%; bottom: 3.5%;
  min-height: 22%;
  /* Escalado con el escenario, igual que el texto. Con 20/22/26px fijos,
     el relleno era el 7% del alto jugando y el 23% en la vista previa: la
     caja se comia la escena y el personaje se quedaba sin sitio. */
  padding: clamp(10px, calc(1.8 * var(--u)), 20px)
           clamp(11px, calc(2 * var(--u)), 22px)
           clamp(13px, calc(2.4 * var(--u)), 26px);
  border-radius: var(--rpq-box-radius);
  background: var(--rpq-box-bg);
  border: var(--rpq-box-border);
  box-shadow: var(--rpq-box-shadow);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--rpq-text-color);
}
.rpq-box[hidden] { display: none; }

.rpq-name {
  position: absolute; top: -14px; left: 18px;
  display: inline-block;
  padding: 5px 16px;
  border-radius: 999px;
  background: var(--rpq-name-bg);
  border: 1.5px solid var(--rpq-name-border);
  font-family: var(--rpq-font-name);
  font-weight: 800; font-size: clamp(12px, calc(1.7 * var(--u)), 16px);
  letter-spacing: .02em;
  max-width: calc(100% - 36px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.rpq-name[hidden] { display: none; }

.rpq-text {
  margin: 6px 0 0;
  font-size: clamp(13px, calc(1.85 * var(--u)), 18px);
  line-height: 1.68;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  min-height: 3em;
}
/* Sin nombre = narrador. Se marca en cursiva y un poco más apagado: la
   voz que cuenta no es una voz que habla. */
.rpq-box.is-narrador .rpq-text { font-style: italic; opacity: .92; }

/* El cartel de "pulsa para continuar" de las escenas. Vive fuera de la
   caja de dialogo porque una escena no la enseña: sin el, un fondo con un
   rotulo y nada mas se leeria como que el juego se colgo. */
.rpq-seguir {
  position: absolute;
  right: 4%;
  bottom: 5%;
  z-index: 6;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(8, 5, 16, .62);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, .82);
  font-size: clamp(11px, calc(1.4 * var(--u)), 13px);
  font-weight: 700;
  pointer-events: none;
  animation: rpq-seguir-in .3s ease both, rpq-next 1.4s ease-in-out 0.3s infinite;
}
.rpq-seguir[hidden] { display: none; }
@keyframes rpq-seguir-in { from { opacity: 0; } to { opacity: 1; } }

.rpq-next {
  position: absolute; right: 16px; bottom: 10px;
  font-size: 14px; opacity: 0;
  color: var(--rpq-accent);
  transition: opacity .2s ease;
}
.rpq-next.is-on { opacity: 1; animation: rpq-next 1.1s ease-in-out infinite; }
@keyframes rpq-next { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ══════════════════════════════════════════════════════════════════
   OPCIONES
   ══════════════════════════════════════════════════════════════════ */
.rpq-choices {
  position: absolute;
  left: 3.5%; right: 3.5%; bottom: 3.5%;
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px 20px 20px;
  border-radius: var(--rpq-box-radius);
  background: var(--rpq-box-bg);
  border: var(--rpq-box-border);
  box-shadow: var(--rpq-box-shadow);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  max-height: 84%;
  overflow-y: auto;
  cursor: default;
}
.rpq-choices[hidden] { display: none; }

.rpq-ask {
  margin: 0 0 4px;
  font-family: var(--rpq-font-name);
  font-size: clamp(13px, calc(1.8 * var(--u)), 18px);
  font-weight: 700; line-height: 1.55;
  color: var(--rpq-text-color);
}

.rpq-ask-timer {
  height: 5px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,.12);
}
.rpq-ask-timer[hidden] { display: none; }
.rpq-ask-timer span {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--rpq-accent), #a96ae7);
  transition: width .1s linear;
}
.rpq-ask-timer.is-urgente span { background: linear-gradient(90deg, #ff3b52, #ff8a5c); }

.rpq-opts { display: flex; flex-direction: column; gap: 9px; }

.rpq-opt {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--rpq-opt-bg);
  border: 1.5px solid var(--rpq-opt-border);
  color: var(--rpq-text-color);
  font-family: inherit;
  font-size: clamp(12px, calc(1.6 * var(--u)), 16px);
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.rpq-opt:hover, .rpq-opt:focus-visible {
  border-color: var(--rpq-opt-hover);
  background: rgba(255,255,255,.12);
  transform: translateX(4px);
  outline: none;
}
.rpq-opt-key {
  display: grid; place-items: center; flex: none;
  width: 24px; height: 24px; border-radius: 7px;
  background: rgba(255,255,255,.12);
  font-size: 11px; font-weight: 800;
  color: var(--rpq-accent);
}
.rpq-opt-txt { flex: 1; min-width: 0; }

/* ══════════════════════════════════════════════════════════════════
   ESCRIBIR UNA RESPUESTA (⌨️ Pregunta abierta)
   ------------------------------------------------------------------
   Vive dentro de `.rpq-opts`, en el mismo sitio donde saldrían los
   botones de un desafío: para el jugador es el mismo momento —la
   historia le pide algo—, así que hereda su marco y sus colores en vez
   de traer un formulario con pinta de otro sitio.
   ══════════════════════════════════════════════════════════════════ */
.rpq-entrada { display: flex; gap: 9px; align-items: stretch; }

.rpq-entrada-txt {
  flex: 1; min-width: 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--rpq-opt-bg);
  border: 1.5px solid var(--rpq-opt-border);
  color: var(--rpq-text-color);
  font-family: inherit;
  font-size: clamp(12px, calc(1.6 * var(--u)), 16px);
  font-weight: 700;
  transition: border-color .15s ease, background .15s ease;
}
.rpq-entrada-txt::placeholder { color: currentColor; opacity: .45; font-weight: 600; }
.rpq-entrada-txt:focus {
  outline: none;
  border-color: var(--rpq-opt-hover);
  background: rgba(255,255,255,.12);
}

.rpq-entrada-ok {
  flex: none;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1.5px solid var(--rpq-opt-border);
  background: var(--rpq-opt-bg);
  color: var(--rpq-accent);
  font-family: var(--rpq-font-name);
  font-size: clamp(12px, calc(1.5 * var(--u)), 15px);
  font-weight: 800;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.rpq-entrada-ok:hover, .rpq-entrada-ok:focus-visible {
  border-color: var(--rpq-opt-hover);
  background: rgba(255,255,255,.12);
  transform: translateY(-1px);
  outline: none;
}

/* Enviar en blanco no saca un mensaje de error encima de la escena:
   la caja se sacude, que es lo que dice "aquí falta algo" sin sacar al
   jugador de la historia. */
.rpq-entrada.is-mal .rpq-entrada-txt { border-color: #ff3b52; }
.rpq-entrada.is-mal { animation: rpq-nope .42s ease; }
@keyframes rpq-nope {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  45% { transform: translateX(6px); }
  70% { transform: translateX(-3px); }
}

@media (max-width: 640px) {
  /* En un teléfono, campo y botón lado a lado dejan el campo del ancho
     de una palabra. */
  .rpq-entrada { flex-direction: column; }
}

/* ══════════════════════════════════════════════════════════════════
   EL DEPURADOR (🐞, solo al probar desde el constructor)
   ------------------------------------------------------------------
   Se pega a una esquina del escenario y no ocupa el centro: hay que
   poder leer la traza MIENTRAS se juega, no en vez de jugar. Por eso
   tampoco es opaco del todo.
   ══════════════════════════════════════════════════════════════════ */
.rpq-dbg {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 40;
  width: min(340px, 62%);
  max-height: 78%;
  display: flex; flex-direction: column;
  border-radius: 14px;
  background: rgba(8, 6, 16, .93);
  border: 1.5px solid rgba(141, 238, 255, .35);
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #eae6ff;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 12px;
  cursor: default;
  text-align: left;
}
.rpq-dbg[hidden] { display: none; }

.rpq-dbg-top {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.rpq-dbg-top strong { font-size: 12.5px; }
.rpq-dbg-sub { flex: 1; opacity: .55; font-size: 10.5px; }
.rpq-dbg-btn {
  flex: none;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: inherit; font: inherit; font-size: 11px; font-weight: 700;
  cursor: pointer;
}
.rpq-dbg-btn:hover { border-color: #8deeff; background: rgba(255,255,255,.13); }

.rpq-dbg-body { overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.rpq-dbg-vars { padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.10); max-height: 40%; overflow-y: auto; }
.rpq-dbg-tit { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; opacity: .5; margin: 4px 0 5px; }
.rpq-dbg-var {
  display: flex; gap: 8px; align-items: baseline;
  padding: 3px 0;
  border-bottom: 1px dashed rgba(255,255,255,.07);
}
.rpq-dbg-k { flex: 1; min-width: 0; opacity: .8; word-break: break-all; }
.rpq-dbg-v { flex: none; max-width: 55%; font-weight: 800; color: #8deeff; word-break: break-word; text-align: right; }
/* Lo que ha cambiado durante la partida se destaca: es lo que se está
   mirando cuando se abre esto. */
.rpq-dbg-var.is-cambiada .rpq-dbg-v { color: #7ef0a8; }
.rpq-dbg-var.is-suelta .rpq-dbg-k::after { content: " ⚠️"; }
.rpq-dbg-vacio { margin: 2px 0; opacity: .55; }

.rpq-dbg-traza {
  margin: 0; padding: 6px 10px 10px;
  list-style: none;
  overflow-y: auto;
  flex: 1; min-height: 0;
}
.rpq-dbg-l {
  display: flex; gap: 6px; align-items: baseline;
  padding: 2px 0;
  line-height: 1.45;
}
.rpq-dbg-t { flex: none; opacity: .4; font-variant-numeric: tabular-nums; font-size: 10.5px; }
.rpq-dbg-i { flex: none; }
.rpq-dbg-x { flex: 1; min-width: 0; word-break: break-word; }
.rpq-dbg-l.is-salta   { opacity: .6; }
.rpq-dbg-l.is-salto   { color: #c9a6ff; font-weight: 700; }
.rpq-dbg-l.is-punto   { color: #8deeff; font-weight: 700; }
.rpq-dbg-l.is-variable { color: #7ef0a8; }
.rpq-dbg-l.is-error   { color: #ff8a95; font-weight: 700; }
.rpq-dbg-l.is-final   { color: #ffd76b; font-weight: 800; }

@media (max-width: 640px) {
  .rpq-dbg { width: 92%; left: 4%; right: 4%; top: 6px; max-height: 62%; font-size: 11.5px; }
}

/* ══════════════════════════════════════════════════════════════════
   LA PANTALLA DE INICIO (▶️ Portada)
   ------------------------------------------------------------------
   Cubre el escenario entero y espera un clic. El velo oscuro no es
   adorno: el fondo que elige el creador puede ser una ilustración con
   detalle en cualquier sitio, y sin él no hay forma de garantizar que el
   título se lea encima.
   ══════════════════════════════════════════════════════════════════ */
.rpq-portada {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 6% 8%;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(6,4,12,.30), rgba(6,4,12,.72) 62%, rgba(6,4,12,.86));
  opacity: 0;
  transition: opacity .45s ease;
}
.rpq-portada[hidden] { display: none; }
.rpq-portada.is-in { opacity: 1; }

.rpq-portada-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, calc(1.4 * var(--u)), 16px);
  text-align: center;
  max-width: 86%;
  transform: translateY(10px);
  transition: transform .5s cubic-bezier(.2, .9, .3, 1);
}
.rpq-portada.is-in .rpq-portada-in { transform: translateY(0); }

.rpq-portada-tit {
  margin: 0;
  font-family: var(--rpq-font-name);
  font-weight: 800;
  font-size: clamp(20px, calc(4.4 * var(--u)), 52px);
  line-height: 1.1;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 4px 22px rgba(0,0,0,.85), 0 1px 2px rgba(0,0,0,.9);
}
.rpq-portada-tit[hidden] { display: none; }

.rpq-portada-sub {
  margin: 0;
  font-family: var(--rpq-font);
  font-size: clamp(11px, calc(1.7 * var(--u)), 18px);
  font-weight: 600;
  line-height: 1.5;
  color: rgba(255,255,255,.86);
  text-shadow: 0 2px 12px rgba(0,0,0,.8);
  max-width: 42ch;
}
.rpq-portada-sub[hidden] { display: none; }

.rpq-portada-btn {
  margin-top: clamp(4px, calc(1 * var(--u)), 12px);
  padding: clamp(8px, calc(1.3 * var(--u)), 14px) clamp(16px, calc(2.6 * var(--u)), 30px);
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--rpq-font-name);
  font-weight: 800;
  font-size: clamp(11px, calc(1.6 * var(--u)), 17px);
  cursor: pointer;
  /* Late. Es lo único de la pantalla que dice «esto se puede tocar», y
     en una portada quieta pasa desapercibido sin el latido. */
  animation: rpq-latido 2.4s ease-in-out infinite;
  transition: background .15s ease, border-color .15s ease;
}
.rpq-portada-btn:hover, .rpq-portada-btn:focus-visible {
  background: rgba(255,255,255,.22);
  border-color: #fff;
  outline: none;
}
@keyframes rpq-latido {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,.28); }
  50% { transform: scale(1.045); box-shadow: 0 0 0 10px rgba(255,255,255,0); }
}

@media (max-width: 640px) {
  .rpq-portada { padding: 8% 6%; }
  .rpq-portada-in { max-width: 96%; }
}

/* ══════════════════════════════════════════════════════════════════
   ESTILOS DE CAJA (skins)
   ══════════════════════════════════════════════════════════════════ */
.rpq-stage[data-skin="pergamino"] {
  --rpq-box-bg: linear-gradient(180deg, #f4e7c8, #e7d3a8);
  --rpq-box-border: 2px solid #8a6a3c;
  --rpq-box-radius: 10px;
  --rpq-box-shadow: 0 -8px 34px rgba(0,0,0,.45);
  --rpq-text-color: #3a2a15;
  --rpq-name-bg: linear-gradient(135deg, #8a6a3c, #6d4f28);
  --rpq-name-border: #5b4020;
  --rpq-font: 'Nunito', serif;
  --rpq-opt-bg: rgba(255,255,255,.5);
  --rpq-opt-border: rgba(120,88,44,.5);
  --rpq-opt-hover: #7a4f1c;
  --rpq-accent: #7a4f1c;
}
.rpq-stage[data-skin="pergamino"] .rpq-name { color: #f7ecd4; }
.rpq-stage[data-skin="pergamino"] .rpq-opt:hover { background: rgba(255,255,255,.78); }

.rpq-stage[data-skin="arcade"] {
  --rpq-box-bg: #05060a;
  --rpq-box-border: 3px solid #f4f4f4;
  --rpq-box-radius: 0px;
  --rpq-box-shadow: 0 0 0 3px #05060a, 0 -6px 26px rgba(0,0,0,.6);
  --rpq-text-color: #f4f4f4;
  --rpq-name-bg: #05060a;
  --rpq-name-border: #f4f4f4;
  --rpq-font: 'Space Mono', monospace;
  --rpq-font-name: 'Space Mono', monospace;
  --rpq-opt-bg: transparent;
  --rpq-opt-border: #f4f4f4;
  --rpq-opt-hover: #6bff9d;
  --rpq-accent: #6bff9d;
}
.rpq-stage[data-skin="arcade"] .rpq-opt { border-radius: 0; }
.rpq-stage[data-skin="arcade"] .rpq-opt-key { border-radius: 0; background: #f4f4f4; color: #05060a; }
.rpq-stage[data-skin="arcade"] .rpq-name { color: #6bff9d; }

.rpq-stage[data-skin="neon"] {
  --rpq-box-bg: linear-gradient(180deg, rgba(10,4,24,.86), rgba(6,2,16,.94));
  --rpq-box-border: 1.5px solid rgba(255,70,190,.55);
  --rpq-box-radius: 20px;
  --rpq-box-shadow: 0 0 34px rgba(255,70,190,.22), 0 -10px 40px rgba(0,0,0,.55);
  --rpq-text-color: #f7e9ff;
  --rpq-name-bg: linear-gradient(135deg, rgba(255,70,190,.30), rgba(80,220,255,.24));
  --rpq-name-border: rgba(255,70,190,.7);
  --rpq-opt-border: rgba(80,220,255,.4);
  --rpq-opt-hover: #ff46be;
  --rpq-accent: #ff8ad8;
}
.rpq-stage[data-skin="neon"] .rpq-name { text-shadow: 0 0 12px rgba(255,70,190,.7); }

/* ══════════════════════════════════════════════════════════════════
   REGISTRO DE DIÁLOGO (el 📜 del reproductor)
   ══════════════════════════════════════════════════════════════════ */
.rpq-log-linea {
  margin: 0 0 12px;
  font-size: 0.9rem;
  line-height: 1.65;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.rpq-log-linea:last-child { border-bottom: none; }
.rpq-log-linea b { font-family: 'Baloo 2', cursive; margin-right: 4px; }
.rpq-log-vacio { opacity: .7; font-size: .9rem; }

/* ══════════════════════════════════════════════════════════════════
   ACCESIBILIDAD Y RENDIMIENTO
   ------------------------------------------------------------------
   El clima y los brillos son lo primero que sobra en un teléfono justo
   o con "reducir movimiento" puesto: son capas animadas a pantalla
   completa. Lo que NO se apaga es el contenido — el temblor y el
   fogonazo los cambia el motor por un tinte, que informa igual.
   ══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .rpq-weather { display: none; }
  .rpq-bg { transition: none; }
  .rpq-actor { transition: opacity .2s ease; }
  .rpq-next.is-on { animation: none; }
  .rpq-seguir { animation: none; }
  .rpq-hp.is-critico .rpq-hp-fill { animation: none; }
  .rpq-num { animation-duration: .01s; }
  /* El glitch es puro parpadeo: para quien pidió que nada se mueva, se
     queda en su primer fotograma —el render normal— en vez de a medias.
     Las tiras se van enteras: son cinco copias del sprite, y sin
     animación no aportan nada salvo capas que pintar. */
  .rpq-actor[data-fx="glitch"] { animation: none; }
  .rpq-tira { display: none; }
  /* El temblor y la interferencia son movimiento a pantalla completa:
     exactamente lo que este modo existe para quitar. La escena se queda
     quieta y el clima deja de contar nada, que es preferible a marear a
     quien pidió no ser mareado. */
  .rpq-stage[data-clima] .rpq-bg,
  .rpq-stage[data-clima] .rpq-actors { animation: none; filter: none; transform: none; }
  .rpq-tear { display: none; }
  .rpq-portada-btn { animation: none; }
  .rpq-portada, .rpq-portada-in { transition: none; }
}
body.perf-low .rpq-weather { display: none; }
body.perf-low .rpq-box,
body.perf-low .rpq-choices,
body.perf-low .rpq-hp,
body.perf-low .rpq-toast { backdrop-filter: none; -webkit-backdrop-filter: none; }
/* Sin sombra proyectada, que es lo caro de pintar, pero el efecto que
   el creador puso se queda: es narrativo, no decorativo. */
body.perf-low .rpq-actor { filter: var(--fx, none); }
body.perf-low .rpq-actor:not([data-fx]) { filter: none; }
/* El desenfoque y el parpadeo son lo más caro de la lista en un móvil
   justo: se cambian por sus versiones baratas en vez de apagarse, para
   que la escena siga contando lo mismo. */
body.perf-low .rpq-actor[data-fx="fantasma"] { --fx: opacity(.6); }
body.perf-low .rpq-actor[data-fx="neon"] { --fx: saturate(1.6); }
body.perf-low .rpq-actor[data-fx="glitch"] { animation: none; --fx: drop-shadow(2px 0 0 rgba(255,45,94,.7)) drop-shadow(-2px 0 0 rgba(34,230,255,.7)); }
/* Cinco copias más del sprite, cada una en su capa de composición, es
   justo lo que un móvil justo no puede pagar. El motor ya ni las crea
   en este modo; esto es el cinturón por si el modo se enciende con las
   tiras ya puestas. */
body.perf-low .rpq-tira { display: none; }
body.perf-low .rpq-stage[data-clima] .rpq-bg,
body.perf-low .rpq-stage[data-clima] .rpq-actors { animation: none; filter: none; transform: none; }
.rpq-tear { display: none; }
body.perf-low .rpq-portada { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ══════════════════════════════════════════════════════════════════
   MÓVIL
   ------------------------------------------------------------------
   En vertical, un 16/9 deja el escenario del tamaño de un sello. Se
   estira a 4/3 y la caja de diálogo se lleva más alto: en un teléfono,
   leer es el 90% de lo que se hace aquí.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .rpq-stage { aspect-ratio: 4 / 3; }
  .rpq-box { left: 2.5%; right: 2.5%; bottom: 2.5%; min-height: 28%; padding: 18px 16px 24px; }
  .rpq-choices { left: 2.5%; right: 2.5%; bottom: 2.5%; padding: 15px 14px 16px; }
  .rpq-actor { height: 74%; max-width: 60%; }
  .rpq-hp { width: 44%; padding: 6px 10px 8px; }
  .rpq-hp.is-hero { bottom: 34%; }
  .rpq-opt { padding: 11px 13px; }
}