/* ¡Otra vez lunes! — estilo retro: escenario 16:9 que escala, CRT, pixel art. */

:root {
  --tinta: #1a1020;
  --papel: #f4f0e0;
  --fondo: #1b1430;
  --fondo2: #2a1f48;
  --amarillo: #ffd23f;
  --rosa: #ff4fa0;
  --naranja: #ff6b35;
  --verde: #33ff66;
  --verde-claro: #a8ffbc;
  --verde-oscuro: #06140a;
  --rojo: #d23a3a;
  --foco: #ffd23f;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #0b0816;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: "Courier New", Courier, monospace;
}

/* Escenario fijo 16:9: 1em = 16px a 1280x720, 24px a 1920x1080. */
#app {
  position: relative;
  width: min(100vw, 177.78vh);
  height: min(100vh, 56.25vw);
  font-size: calc(min(100vw, 177.78vh) / 80);
  background:
    radial-gradient(ellipse at 50% 0%, #3a2a6a 0%, transparent 60%),
    repeating-linear-gradient(45deg, var(--fondo) 0 .5em, #1e1736 .5em 1em);
  color: var(--papel);
  overflow: hidden;
}

/* Líneas de barrido y viñeta CRT sobre todo. */
#app::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, .16) 0, rgba(0, 0, 0, .16) 1px, transparent 1px, transparent 3px),
    radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, .55) 100%);
}

#pantalla {
  position: absolute;
  inset: 0;
  overflow: auto;
  outline: none;
}
#app.con-hud #pantalla { top: 3.2em; }

canvas { image-rendering: crisp-edges; image-rendering: pixelated; }

[hidden] { display: none !important; }

/* ---------- Botones ---------- */
button {
  font: inherit;
  font-weight: bold;
  cursor: pointer;
  color: var(--tinta);
  background: #e8e0c8;
  border: .18em solid var(--tinta);
  box-shadow: .2em .2em 0 var(--tinta);
  padding: .45em .9em;
  line-height: 1.2;
}
button:hover:not(:disabled) { background: #fff6d8; }
button:active:not(:disabled) { transform: translate(.15em, .15em); box-shadow: .05em .05em 0 var(--tinta); }
button:disabled { cursor: not-allowed; opacity: .55; }
button.primario { background: var(--amarillo); }
button.primario:hover:not(:disabled) { background: #ffe680; }
button.peligro { background: #ff8a8a; }

:focus-visible {
  outline: .22em dashed var(--foco) !important;
  outline-offset: .2em;
}
input:focus-visible, textarea:focus-visible { outline-color: var(--rosa) !important; }

.acciones { display: flex; flex-wrap: wrap; gap: .8em; margin-top: 1em; }
.acciones-columna { flex-direction: column; align-items: stretch; }

/* ---------- HUD ---------- */
#hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3.2em;
  display: flex;
  align-items: center;
  gap: .6em;
  padding: 0 1em;
  background: #120c22;
  border-bottom: .2em solid #000;
  box-shadow: 0 .2em 0 #3a2a6a;
  z-index: 20;
  font-weight: bold;
}
.hud-bloque { display: flex; align-items: center; gap: .4em; }
.hud-reloj {
  background: #000;
  color: var(--verde);
  padding: .2em .6em;
  border: .15em solid #3a3a48;
  font-size: 1.2em;
  letter-spacing: .05em;
  text-shadow: 0 0 .4em rgba(51, 255, 102, .7);
  min-width: 11.5em;
}
.hud-franja { flex: 1; color: #d8c8ff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hud-loop { color: var(--rosa); font-size: 1.2em; text-shadow: .1em .1em 0 #000; }
.hud-loop.destello { animation: destello .25s steps(2) 6; }
@keyframes destello { 50% { color: var(--amarillo); } }
.hud-tintos { display: flex; gap: .3em; }
.hud-tintos canvas { width: 2.25em; height: 2.25em; }
.hud-tintos.sacudir { animation: sacudir .4s steps(4); }
@keyframes sacudir { 25% { transform: translateX(-.3em); } 75% { transform: translateX(.3em); } }
.btn-hud { font-size: .8em; padding: .3em .6em; }
/* Reloj del día (S6): fuera de la escena, estilo display ámbar de VHS, distinto del reloj del juego. */
.hud-cronometro {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background: #1a0c00;
  border: .15em dashed #ffb000;
  padding: .05em .55em .1em;
  line-height: 1;
}
.crono-etiqueta { font-size: .55em; letter-spacing: .18em; color: #c07a00; }
.crono-valor {
  font-size: 1.25em;
  color: #ffb000;
  font-variant-numeric: tabular-nums;
  letter-spacing: .12em;
  text-align: right;
  text-shadow: 0 0 .4em rgba(255, 176, 0, .75);
  min-width: 5em;
}

/* ---------- Título ---------- */
.titulo { padding: .8em 3em .8em; display: flex; flex-direction: column; align-items: center; min-height: 100%; }
.logo {
  margin: 0;
  font-size: 5em;
  font-weight: 900;
  line-height: 1;
  color: var(--amarillo);
  letter-spacing: .03em;
  text-align: center;
  transform: skewX(-6deg);
  text-shadow:
    .05em .05em 0 var(--naranja),
    .1em .1em 0 #c2185b,
    .15em .15em 0 #3a1a5a,
    .2em .2em 0 #000;
  animation: flotar 2.4s steps(4) infinite;
}
@keyframes flotar { 50% { transform: skewX(-6deg) translateY(-.06em); } }
.subtitulo {
  margin: .4em 0 .5em;
  font-size: 1.5em;
  font-weight: bold;
  color: var(--verde-claro);
  letter-spacing: .15em;
  text-transform: uppercase;
  text-shadow: .1em .1em 0 #000;
}
.titulo-cuerpo { display: grid; grid-template-columns: 22em 1fr; gap: 2em; width: 100%; max-width: 72em; align-items: start; }
.titulo-jefe { display: flex; flex-direction: column; align-items: center; gap: .8em; }
.sprite-grande { width: 12em; height: 18em; }
.globo {
  position: relative;
  background: var(--papel);
  color: var(--tinta);
  border: .2em solid var(--tinta);
  box-shadow: .25em .25em 0 #000;
  padding: .7em .9em;
  line-height: 1.35;
}
.globo::before {
  content: "";
  position: absolute;
  top: -.9em; left: 45%;
  border: .45em solid transparent;
  border-bottom-color: var(--tinta);
}
.titulo-form { background: rgba(10, 6, 24, .75); border: .2em solid #000; box-shadow: inset 0 0 0 .2em #3a2a6a; padding: 1em 1.4em 1.2em; }
.etiqueta { display: block; margin: .4em 0 .4em; font-weight: bold; color: var(--amarillo); letter-spacing: .08em; text-transform: uppercase; }
#nombre {
  font: inherit;
  font-size: 1.15em;
  width: 100%;
  padding: .4em .6em;
  background: #000;
  color: var(--verde);
  border: .18em solid var(--verde);
  caret-color: var(--verde);
}
#nombre::placeholder { color: #3a8a4a; }
.tarjetas { display: grid; grid-template-columns: repeat(5, 1fr); gap: .8em; }
.tarjeta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2em;
  padding: .5em .3em .6em;
  background: #2a1f48;
  color: var(--papel);
  border-color: #000;
}
.tarjeta:hover:not(:disabled) { background: #3a2a6a; }
.tarjeta canvas { width: 6em; height: 9em; }
.tarjeta[aria-pressed="true"] { background: #4a2a7a; box-shadow: 0 0 0 .2em var(--amarillo), .2em .2em 0 #000; }
.tarjeta[aria-pressed="true"]::before { content: "▼ TÚ"; color: var(--amarillo); font-size: .8em; }
.tarjeta-nombre { font-size: 1.1em; }
.tarjeta-rol { font-size: .7em; font-weight: normal; color: #c8b8ef; text-align: center; }
.titulo-stats { margin: .9em 0 0; color: #c8b8ef; }

/* ---------- Acceso y registro (sesión) ---------- */
.campo {
  font: inherit;
  font-size: 1.15em;
  width: 100%;
  padding: .4em .6em;
  background: #000;
  color: var(--verde);
  border: .18em solid var(--verde);
  caret-color: var(--verde);
}
.campo::placeholder { color: #3a8a4a; }
.acceso-titulo { margin: 0 0 .6em; font-size: 1.3em; line-height: 1.3; color: var(--papel); }
.acceso-aviso { margin: .3em 0; min-height: 1.3em; color: var(--rosa); font-weight: bold; }
.acceso-aviso:empty { min-height: 0; margin: 0; }
.acceso-nota { margin: .6em 0 0; font-size: .85em; color: #a898d0; }
.elecciones { display: flex; flex-wrap: wrap; gap: .8em; margin-bottom: .6em; }
.eleccion { background: #2a1f48; color: var(--papel); border-color: #000; }
.eleccion:hover:not(:disabled) { background: #3a2a6a; }
.eleccion[aria-pressed="true"] { background: var(--amarillo); color: var(--tinta); }
.identidad { display: flex; flex-wrap: wrap; align-items: center; gap: .6em 1em; margin-bottom: .4em; }
.identidad canvas { width: 3.2em; height: 3.2em; }
.identidad-texto { flex: 1 1 16em; margin: 0; color: var(--verde-claro); font-weight: bold; line-height: 1.35; }
.identidad-botones { display: flex; gap: .5em; }
button.chico { font-size: .8em; padding: .3em .6em; }
.logo-chico { font-size: 2.6em; animation: none; margin: .4em 0 .6em; }
.registro-form { width: 100%; max-width: 52em; }
.atajos { margin-top: auto; padding-top: .8em; font-size: .85em; color: #a898d0; text-align: center; }

/* ---------- Pantalla de juego ---------- */
.juego {
  display: grid;
  /* 40em + borde = escena a 2x (1280x720) o 3x (1920x1080) exactos. */
  grid-template-columns: calc(40em + 8px) minmax(0, 1fr);
  gap: 1em;
  padding: 1em;
  height: 100%;
}
.col-izq { display: flex; flex-direction: column; gap: .8em; min-height: 0; }
.col-der { display: flex; flex-direction: column; min-height: 0; }
/* La escena se escala por enteros desde juego.js (ajustarEscalas); el borde va en px enteros. */
.marco-escena { flex: none; display: flex; justify-content: center; }
canvas.escena {
  display: block;
  box-sizing: content-box;
  width: 40em;
  height: 22.5em;
  border: 4px solid #000;
  box-shadow: 0 0 0 3px #5a4a8a, 6px 6px 0 #000;
  background: #000;
}

.dialogo {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  gap: .8em;
  background: var(--papel);
  color: var(--tinta);
  border: .25em solid var(--tinta);
  box-shadow: inset 0 0 0 .2em #c9b48a, .4em .4em 0 #000;
  padding: .8em 1em;
  cursor: pointer;
}
.retrato-marco { flex: none; width: 5.5em; height: 5.5em; border: .2em solid var(--tinta); background: #9ad0ff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.retrato { width: 100%; height: 100%; display: block; }
.dialogo-cuerpo { flex: 1; min-height: 0; overflow: auto; }
.dialogo-nombre { font-weight: bold; color: #7a1f2e; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .3em; }
.dialogo-texto { margin: 0; font-size: 1.1em; line-height: 1.4; white-space: pre-wrap; }
.dialogo-flecha { position: absolute; right: .7em; bottom: .4em; opacity: 0; color: #7a1f2e; }
.dialogo-cuerpo.listo + .dialogo-flecha { opacity: 1; animation: parpadeo 1s steps(2) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }

/* Consola CRT. */
.consola {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: radial-gradient(ellipse at center, #0a2412 0%, var(--verde-oscuro) 75%);
  color: var(--verde-claro);
  border: .5em solid #3a3a48;
  border-radius: .8em;
  box-shadow: inset 0 0 2.5em rgba(51, 255, 102, .18), 0 0 0 .25em #000, .45em .45em 0 #000;
  overflow: hidden;
}
.consola::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .22) 0, rgba(0, 0, 0, .22) 1px, transparent 1px, transparent 3px);
  border-radius: .4em;
}
.consola-barra {
  display: flex;
  align-items: center;
  gap: .8em;
  background: var(--verde);
  color: var(--verde-oscuro);
  font-weight: bold;
  padding: .3em .8em;
  letter-spacing: .06em;
}
.consola-titulo { flex: 1; }
/* Reloj por caso (martes): fijo, se pone rojo en los últimos 10 s (el parpadeo lo apaga reducir movimiento). */
.reloj-caso { background: var(--verde-oscuro); color: var(--verde); padding: 0 .5em; font-variant-numeric: tabular-nums; }
.reloj-caso.urgente { background: var(--rojo); color: #fff; animation: parpadeo 1s steps(2) infinite; }
/* Selector de nivel en la pantalla de título. */
.selector-nivel { display: flex; justify-content: center; gap: .8em; margin: 0 0 .5em; }
.selector-nivel .nivel { background: #2a1a4a; color: #e8e0ff; }
.selector-nivel .nivel[aria-pressed="true"] { background: var(--amarillo); color: var(--tinta); }
.selector-nivel .nivel.bloqueado { background: #1a1230; color: #8a80a8; }
.selector-nivel .nivel { display: flex; flex-direction: column; align-items: center; gap: 0; padding: .2em .9em; line-height: 1.1; }
.nivel-motivo { font-size: .7em; font-weight: normal; }
/* Nivel sin escena (lunes): retratos de cuerpo entero + dialogo a la izquierda, consola a la derecha. */
.juego.sin-escena { grid-template-columns: 26em minmax(0, 1fr); }
.retratos { flex: none; display: flex; justify-content: space-around; gap: .6em; padding: .8em .6em .6em; background: rgba(10, 6, 24, .75); border: .2em solid #000; box-shadow: inset 0 0 0 .2em #3a2a6a; }
.retrato-figura { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .3em; }
.retrato-figura canvas { width: 6em; height: 9em; }
.retrato-figura figcaption { display: flex; flex-direction: column; align-items: center; font-size: .9em; }
.retrato-figura strong { color: var(--amarillo); text-transform: uppercase; letter-spacing: .06em; }
.retrato-figura span { color: #c8b8ef; font-size: .85em; }
.juego.sin-escena .dialogo { flex: 1; }
.victoria-equipo { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 1em; padding: 1.5em 1em; background: rgba(10, 6, 24, .75); border: .2em solid #000; box-shadow: inset 0 0 0 .2em #3a2a6a; }
.victoria-equipo canvas { width: 6em; height: 9em; }
.insignia-critico { background: var(--rojo); color: #fff; padding: 0 .5em; animation: parpadeo 1s steps(2) infinite; }
.consola-cuerpo { position: relative; z-index: 1; flex: 1; min-height: 0; overflow: auto; padding: .9em 1.1em 1.2em; text-shadow: 0 0 .35em rgba(51, 255, 102, .45); }
.arranque { margin: 0; font: inherit; font-size: 1.05em; line-height: 1.6; white-space: pre-wrap; }
.cursor { animation: parpadeo 1s steps(2) infinite; }
.pregunta { font-weight: bold; font-size: 1.12em; line-height: 1.35; margin: 0 0 .8em; color: #e8ffe8; }
.cargando { color: #5ac87a; animation: parpadeo 1s steps(2) infinite; }
.ayuda { margin: 0 0 .5em; color: #7adf96; }

.dejavu {
  margin: 0 0 .8em;
  padding: .5em .7em;
  background: #2a0f3a;
  color: #ffd8ff;
  border: .15em dashed var(--rosa);
  line-height: 1.35;
  text-shadow: none;
  animation: dejavu 2s steps(2) infinite;
}
.dejavu strong { color: var(--amarillo); }
@keyframes dejavu { 50% { border-color: var(--amarillo); } }

.btn-consola {
  display: block;
  width: 100%;
  text-align: left;
  margin: 0 0 .5em;
  background: #0d2a14;
  color: var(--verde-claro);
  border: .15em solid var(--verde);
  box-shadow: .2em .2em 0 #000;
  font-weight: bold;
  text-shadow: none;
}
.btn-consola:hover:not(:disabled) { background: #1a5a2a; color: #fff; }
.btn-consola:disabled { opacity: 1; color: #5a8a64; border-color: #2a5a34; }
.btn-consola.ok, .mock-item.ok, .mock-sub.ok { background: #1f7a3a !important; color: #fff !important; border-color: #a8ffbc !important; }
.btn-consola.mal, .mock-item.mal, .mock-sub.mal { background: #8a1f2e !important; color: #fff !important; border-color: #ff9a9a !important; }
.paso:disabled { text-decoration: line-through; opacity: .5; }
.pool { margin-bottom: .6em; }
.ranuras { margin: 0; padding-left: 2em; }
.ranuras li { margin: .25em 0; padding: .25em .5em; border: .12em dashed #2a6a3a; }
.ranuras li.lleno { border-style: solid; border-color: var(--verde); color: #fff; }
.ranuras li.vacio { color: #3a8a4a; }
.ranuras li.ok { background: #1f7a3a; }
.ranuras li.mal { background: #8a1f2e; }

/* Consola simulada para "navegar". */
.mock { border: .15em solid var(--verde); background: #041008; }
.mock-miga { background: #0d2a14; padding: .3em .6em; border-bottom: .12em solid var(--verde); font-size: .9em; }
.mock-cuerpo { display: grid; grid-template-columns: 14.5em 1fr; min-height: 16em; }
.mock-lado { display: flex; flex-direction: column; background: #08200f; border-right: .12em solid #2a6a3a; padding: .2em; gap: 0; }
.mock-item, .mock-sub {
  text-align: left;
  font-size: .85em;
  line-height: 1.15;
  padding: .14em .5em;
  background: transparent;
  color: var(--verde-claro);
  border: .12em solid transparent;
  box-shadow: none;
  text-shadow: none;
}
.mock-item:hover:not(:disabled), .mock-sub:hover:not(:disabled) { background: #1a5a2a; color: #fff; border-color: var(--verde); }
.mock-item:disabled, .mock-sub:disabled { opacity: 1; color: #5a8a64; }
.mock-item.activo { background: #1a5a2a; color: #fff; }
.mock-principal { padding: .6em .8em; }
.mock-vacio { color: #5ac87a; }
.mock-seccion { margin: 0 0 .5em; font-size: 1.1em; color: #fff; }
.mock-subs { display: grid; grid-template-columns: repeat(auto-fill, minmax(11em, 1fr)); gap: .4em; }
.mock-sub { border-color: #2a6a3a; }

/* Retroalimentación. */
.retro:empty { display: none; }
.retro { margin-top: 1em; padding: .7em .9em; border: .2em solid; background: rgba(0, 0, 0, .45); text-shadow: none; }
.retro-ok { border-color: var(--verde); }
.retro-mal { border-color: #ff6a6a; }
.retro-titulo { margin: 0 0 .4em; font-size: 1.25em; font-weight: 900; }
.retro-ok .retro-titulo { color: var(--verde); }
.retro-mal .retro-titulo { color: #ff8a8a; animation: parpadeo .5s steps(2) 4; }
.retro-motivo, .retro-sub { margin: .2em 0; color: var(--amarillo); font-weight: bold; }
.retro-orden { margin: .2em 0 .4em; }
.retro-explicacion { margin: .5em 0 0; line-height: 1.4; color: #e8ffe8; }

/* ---------- Rebobinar (VHS) ---------- */
.capa { position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; }
.capa-oscura { background: rgba(5, 2, 15, .78); }
#rebobinar { background: rgba(10, 0, 40, .45); }
.rebobinar-fase1 { position: absolute; inset: 0; }
.osd {
  position: absolute;
  top: 1.2em; left: 1.4em;
  margin: 0;
  font-size: 3.2em;
  font-weight: 900;
  color: #fff;
  text-shadow: .08em 0 0 #ff2a6a, -.08em 0 0 #2affff;
  animation: parpadeo .6s steps(2) infinite;
}
.osd-sub { position: absolute; bottom: 1.4em; right: 1.6em; margin: 0; font-size: 1.6em; font-weight: bold; color: #fff; text-shadow: .08em 0 0 #ff2a6a, -.08em 0 0 #2affff; }
.osd-chico { position: static; font-size: 2.4em; animation: none; text-align: center; }
.ruido {
  position: absolute;
  inset: 0;
  opacity: .5;
  background:
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, .25) 0, rgba(255, 255, 255, .25) .15em, transparent .15em, transparent 1.4em),
    repeating-linear-gradient(90deg, rgba(255, 0, 80, .08) 0, rgba(0, 255, 255, .08) 2em, transparent 4em);
  animation: ruido .18s steps(3) infinite;
}
@keyframes ruido { 100% { background-position: 0 4em, 3em 0; } }
#app.vhs #pantalla { animation: vhs .22s steps(2) infinite; }
@keyframes vhs {
  0% { transform: translateX(0) skewX(0); filter: hue-rotate(0) contrast(1.2); }
  50% { transform: translateX(-.8em) skewX(5deg); filter: hue-rotate(90deg) contrast(1.6) saturate(2); }
  100% { transform: translateX(.6em) skewX(-3deg); filter: hue-rotate(-60deg) contrast(1.3); }
}
#app.vhs .hud-reloj { color: #ff4fa0; animation: sacudir .2s steps(2) infinite; }

.ventana {
  position: relative;
  max-width: 46em;
  background: #120c22;
  color: var(--papel);
  border: .25em solid #000;
  box-shadow: 0 0 0 .25em #5a4a8a, .5em .5em 0 #000;
  padding: 1.4em 1.8em;
}
.ventana h2 { margin: 0 0 .4em; color: var(--amarillo); }
.ventana p { line-height: 1.4; font-size: 1.1em; }
.rebobinar-dialogo { display: flex; gap: 1em; align-items: center; background: var(--papel); color: var(--tinta); border: .2em solid var(--tinta); padding: .6em .9em; }
.rebobinar-dialogo canvas { width: 5em; height: 5em; flex: none; background: #9ad0ff; border: .15em solid var(--tinta); box-sizing: content-box; }
.rebobinar-loop { color: var(--rosa); font-weight: bold; }

/* ---------- Sin tintos: compartir para reponer (S16) ---------- */
#sin-tintos { z-index: 65; }
.ventana-sin-tintos { text-align: center; border-color: #000; box-shadow: 0 0 0 .25em var(--rosa), .5em .5em 0 #000; }
.sin-tintos-titulo { font-size: 2.2em; color: var(--rosa) !important; text-shadow: .08em .08em 0 #000; letter-spacing: .1em; }
.ventana-sin-tintos .acciones { justify-content: center; }
.sin-tintos-aviso { min-height: 1.4em; color: var(--amarillo); font-weight: bold; }
.toast {
  position: absolute;
  left: 50%;
  bottom: 2em;
  transform: translateX(-50%);
  z-index: 70;
  background: var(--amarillo);
  color: var(--tinta);
  border: .2em solid var(--tinta);
  box-shadow: .3em .3em 0 #000;
  padding: .6em 1.2em;
  font-weight: bold;
  font-size: 1.15em;
}

/* ---------- Victoria ---------- */
.victoria { padding: 1.5em 2em; display: flex; flex-direction: column; align-items: center; gap: 1.2em; }
.logo-victoria { font-size: 5.5em; color: #7dffa0; }
.victoria-cuerpo { display: grid; grid-template-columns: calc(40em + 8px) 1fr; gap: 1.5em; width: 100%; }
.victoria-der { display: flex; flex-direction: column; gap: .5em; }
.victoria-der .dialogo { flex: none; min-height: 9em; }
.victoria-dato { margin: .2em 0; font-size: 1.2em; font-weight: bold; color: var(--amarillo); }

/* ---------- Puntaje del día y medallas (S7, S8, S11) ---------- */
.puntaje-dia { background: rgba(10, 6, 24, .8); border: .2em solid #000; box-shadow: inset 0 0 0 .2em #3a2a6a; padding: .6em .9em; }
.puntaje-tabla { width: 100%; border-collapse: collapse; font-size: 1.05em; }
.puntaje-tabla caption { text-align: left; color: var(--amarillo); font-weight: bold; font-size: 1.15em; margin-bottom: .2em; }
.puntaje-tabla th { text-align: left; font-weight: normal; padding: .1em 0; }
.puntaje-tabla td { text-align: right; font-weight: bold; font-variant-numeric: tabular-nums; }
.puntaje-total th, .puntaje-total td { border-top: .15em solid var(--amarillo); padding-top: .25em; color: var(--amarillo); font-size: 1.2em; font-weight: bold; }
.puntaje-perfecto { margin: .4em 0 0; color: #7dffa0; font-weight: bold; }
.puntaje-modo { margin: .4em 0 0; font-weight: bold; }
.puntaje-modo.cuenta { color: var(--verde-claro); }
.puntaje-modo.practica { color: #c8b8ef; }
.medalla-ganada { margin: .5em 0 0; }
.medalla {
  display: inline-block;
  background: var(--amarillo);
  color: var(--tinta);
  border: .15em solid var(--tinta);
  box-shadow: .15em .15em 0 #000;
  padding: .1em .5em;
  font-weight: bold;
  font-size: .85em;
}
.medalla::before { content: '\2605  '; }
.medalla-ganada .medalla { font-size: 1.05em; }
.perfil-titulo { margin: 0 0 .4em; }
.perfil-mejores { margin: 0 0 .3em; color: var(--amarillo); font-weight: bold; }
.medallas { display: flex; flex-wrap: wrap; gap: .4em; margin: 0; padding: 0; list-style: none; }

/* ---------- Pausa obligada: Mauricio gigante (S8, S17) ---------- */
.capa-tinto { z-index: 66; background: rgba(5, 2, 15, .9); }
.ventana-tinto { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 52em; box-shadow: 0 0 0 .25em var(--amarillo), .5em .5em 0 #000; }
.sprite-gigante { display: block; width: 16em; height: 16em; background: #9ad0ff; border: .25em solid var(--tinta); image-rendering: crisp-edges; image-rendering: pixelated; }
.tinto-texto { font-size: 1.5em !important; margin: .8em 0 .2em; }
.tinto-texto strong { color: var(--amarillo); }
.tinto-hora { color: var(--rosa); font-weight: bold; font-size: 1.3em !important; margin: .2em 0 .6em; }
.ventana-tinto .acciones { justify-content: center; }

/* ---------- Resumen ---------- */
.resumen { padding: 1.2em 2.4em 2em; }
.resumen-cabecera { display: flex; align-items: center; gap: 1.2em; margin: 0 0 .7em; }
.marca { display: flex; align-items: center; gap: .6em; flex: none; padding: .3em .7em .3em .4em; background: rgba(10, 6, 24, .8); border: .2em solid #000; box-shadow: inset 0 0 0 .2em #3a2a6a; }
.marca-logo { display: block; height: 2.8em; width: auto; image-rendering: auto; }
.marca-control { display: block; width: 3em; height: 1.8em; image-rendering: crisp-edges; image-rendering: pixelated; }
.resumen-titulo { margin: 0; font-size: 2.6em; color: var(--amarillo); text-shadow: .08em .08em 0 #c2185b, .14em .14em 0 #000; letter-spacing: .06em; }
.resumen-cuerpo { display: grid; grid-template-columns: 26em 1fr; gap: 1.6em; }
.ficha { display: flex; gap: 1em; align-items: flex-start; background: rgba(10, 6, 24, .8); border: .2em solid #000; box-shadow: inset 0 0 0 .2em #3a2a6a; padding: 1em; }
.ficha canvas { width: 6em; height: 9em; flex: none; }
.ficha dl { margin: 0; }
.dato { margin-bottom: .45em; }
.dato dt { color: #c8b8ef; font-size: .8em; text-transform: uppercase; letter-spacing: .08em; }
.dato dd { margin: 0; font-weight: bold; font-size: 1.05em; }
.temas { background: rgba(10, 6, 24, .8); border: .2em solid #000; box-shadow: inset 0 0 0 .2em #3a2a6a; padding: .8em 1.2em; }
.temas h2 { margin: .2em 0 .5em; font-size: 1.2em; color: var(--verde); text-transform: uppercase; letter-spacing: .08em; }
.lista-temas { list-style: none; margin: 0; padding: 0; }
.tema { display: grid; grid-template-columns: 1fr 14em 9em; gap: .8em; align-items: center; margin-bottom: .35em; }
.tema-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra { display: flex; gap: .15em; }
.seg { width: 1.2em; height: 1em; background: #2a2440; border: .08em solid #000; }
.seg.on.bajo { background: #ff5a5a; }
.seg.on.medio { background: var(--amarillo); }
.seg.on.alto { background: var(--verde); }
.tema-pct { font-weight: bold; text-align: right; }
.debiles { margin: 0; padding-left: 1.6em; line-height: 1.5; font-weight: bold; color: #ffb0b0; }
.aviso { min-height: 1.4em; color: var(--verde); font-weight: bold; }
.resumen-texto { width: 100%; font: inherit; font-size: .85em; background: #000; color: var(--verde-claro); border: .15em solid var(--verde); padding: .6em; }

/* ---------- Error de contenido ---------- */
.error-contenido { padding: 2em 3em; line-height: 1.5; }
.error-contenido li { color: #ffb0b0; }

/* Transición entre pantallas: iris escalonado en 5 pasos. */
#pantalla.transicion { animation: iris .3s steps(5, end); }
@keyframes iris {
  from { clip-path: circle(0% at 50% 50%); }
  to { clip-path: circle(75% at 50% 50%); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; }
  #pantalla.transicion { animation: none; }
}

/* ---------- Ranking público y reglas desde el título (S12, S20) ---------- */
.acciones-publico { margin-top: .6em; }
.fila-casilla { display: flex; align-items: center; gap: .6em; margin: .8em 0 .2em; font-weight: bold; }
.casilla { width: 1.3em; height: 1.3em; accent-color: var(--amarillo); }
.casilla:disabled + label { opacity: .75; }

/* ---------- Feedback de jugadores (feedback-capacidad S1, S2): cajitas que no frenan el juego ---------- */
.feedback-respuesta { margin-top: .6em; }
.feedback-boton { background: #2a1f48; color: var(--papel); border-color: #000; }
.feedback-boton:hover:not(:disabled) { background: #3a2a6a; }
.feedback-caja {
  margin-top: .5em;
  padding: .6em .8em;
  max-width: 34em;
  background: rgba(10, 6, 24, .9);
  border: .18em solid #000;
  box-shadow: inset 0 0 0 .18em #3a2a6a;
  text-shadow: none;
}
.feedback-titulo { margin: 0 0 .4em; font-weight: bold; color: var(--amarillo); }
.feedback-texto { font-size: .95em; resize: vertical; min-height: 4.2em; }
.feedback-aviso { margin: .3em 0 0; min-height: 1.2em; font-size: .85em; color: var(--rosa); font-weight: bold; }
.feedback-aviso:empty { min-height: 0; margin: 0; }
.feedback-botones { display: flex; gap: .6em; margin-top: .5em; }
.feedback-gracias { margin: .3em 0 0; color: var(--verde); font-weight: bold; }
.feedback-invitacion { margin-top: .4em; }
.titulo { position: relative; }
.feedback-fijo { position: absolute; right: 1em; bottom: .8em; margin: 0; z-index: 2; max-width: 30em; opacity: .85; }
.feedback-fijo:hover, .feedback-fijo:focus-within { opacity: 1; }
.feedback-fijo .feedback-caja { width: 28em; }