body { margin: 0; min-height: 100vh; display: grid; place-items: center; text-align: center;
  background: #f2ede3; color: #151935; font-family: system-ui, sans-serif; }
h1 { font-size: clamp(2.2rem, 7vw, 5rem); margin: .2em 0; }
.meta { font-family: ui-monospace, monospace; letter-spacing: .14em; color: #4a4e66; }
#conexion { color: #b3261e; } #conexion[data-ok="true"] { color: #2e9d5b; }
.botones { display: flex; gap: 12px; justify-content: center; margin-top: 24px; }
button { font: 600 1.2rem system-ui, sans-serif; padding: 18px 32px; border-radius: 10px;
  border: 2px solid #151935; background: #fffdf8; color: #151935; cursor: pointer; }
button.principal { background: #2a3ccb; border-color: #2a3ccb; color: #fbf6ea; }
.caja { max-width: 420px; padding: 24px; box-sizing: border-box; }
label { display: block; text-align: left; margin: 20px 0 8px; }
input { width: 100%; box-sizing: border-box; height: 56px; padding: 0 16px; font-size: 1.2rem;
  border: 2px solid #cec8bc; border-radius: 8px; background: #fffdf8; color: #151935; }
.aviso { color: #7a2a12; background: #fdebd9; padding: 12px; border-radius: 8px; }
.tarjeta { background: #fffdf8; border: 1px solid #ddd6c8; border-radius: 12px; overflow: hidden;
  text-align: left; box-shadow: 0 12px 30px rgba(21,25,53,.12); }
.tarjeta .cabecera { background: #2a3ccb; color: #fbf6ea; margin: 0; padding: 12px 18px; }
.tarjeta .cuerpo { padding: 18px; }
.tarjeta h2 { font-size: 2rem; margin: 4px 0 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 900px; }
.chips span { background: #fffdf8; border: 1px solid #ddd6c8; border-radius: 999px; padding: 8px 16px; font-size: 1.2rem; }
.lista { list-style: none; padding: 0; margin: 24px auto 0; max-width: 520px; text-align: left; }
.lista li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #ddd6c8; }
.lista .punto { width: 10px; height: 10px; border-radius: 5px; background: #cec8bc; }
.lista .punto.on { background: #2e9d5b; }
.lista .nombre { flex: 1; font-size: 1.1rem; }
.lista .oculto .nombre { text-decoration: line-through; color: #4a4e66; }
.lista button { padding: 8px 14px; font-size: .9rem; }
.escena { width: 100%; max-width: 1100px; padding: 24px; box-sizing: border-box; }
.opciones { display: grid; gap: 12px; margin: 24px auto; max-width: 900px; }
@media (min-width: 700px) { .escena .opciones { grid-template-columns: 1fr 1fr; } }
.opcion { display: flex; align-items: center; gap: 14px; text-align: left; padding: 18px 20px; box-sizing: border-box;
  background: #fffdf8; border: 2px solid #cec8bc; border-radius: 10px; font-size: 1.3rem; color: #151935; }
.opcion b { font-family: ui-monospace, monospace; color: #2a3ccb; }
.opcion span { flex: 1; }
.opcion em { font-style: normal; font-family: ui-monospace, monospace; font-weight: 600; }
.opcion.correcta { border-color: #2a3ccb; background: #e6e9fb; }
button.opcion { width: 100%; font-weight: 500; }
button:disabled { opacity: .5; }
.grande { font-size: 1.4rem; }
.ranking { list-style: none; padding: 0; margin: 24px auto; max-width: 640px; text-align: left; }
.ranking li { display: flex; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid #ddd6c8; font-size: 1.5rem; }
.ranking li b { width: 48px; font-family: ui-monospace, monospace; color: #2a3ccb; }
.ranking li span { flex: 1; }
.podio { display: flex; justify-content: center; align-items: flex-end; gap: 16px; margin-top: 32px; }
.podio > div { width: 30%; max-width: 300px; display: flex; flex-direction: column; gap: 10px; }
.podio .quien { min-height: 90px; }
.podio .quien strong { display: block; font-size: 1.6rem; }
.podio .quien small { color: #4a4e66; font-size: 1rem; }
.podio .bloque { border: 2px solid #151935; background: #fffdf8; display: grid; place-items: start center;
  padding-top: 16px; font-size: 3rem; font-weight: 700; }
.podio .p1 .bloque { height: 240px; background: #2a3ccb; color: #fbf6ea; }
.podio .p2 .bloque { height: 170px; }
.podio .p3 .bloque { height: 120px; }
dialog { border: 2px solid #151935; border-radius: 12px; padding: 24px; max-width: 420px; }
dialog::backdrop { background: rgba(21,25,53,.4); }
dialog .botones { flex-direction: column; }
select { font: 500 .95rem system-ui, sans-serif; padding: 8px; border-radius: 6px; border: 1px solid #cec8bc; background: #fffdf8; color: #151935; }
.acusado-tag { color: #2a3ccb; font-weight: 600; }
.personas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 20px; }
.persona { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; font-size: 1rem; }
.persona small { color: #4a4e66; font-weight: 400; font-size: .8rem; line-height: 1.2; }
.persona:disabled { opacity: .4; }
.avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; background: #e6e9fb; }
.avatar.inicial { display: grid; place-items: center; font-size: 2.2rem; font-weight: 700; color: #2a3ccb; }
.tarjeta .cuerpo { display: flex; gap: 16px; align-items: center; }
.enlace { background: none; border: none; color: #2a3ccb; text-decoration: underline; font-size: 1rem; margin-top: 16px; }
.chips span { display: inline-flex; align-items: center; gap: 8px; }
.chips img, .chips .mini { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.chips .mini { display: inline-grid; place-items: center; background: #e6e9fb; color: #2a3ccb; font-weight: 700; }
.personas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 20px; }
.persona { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; font-size: 1rem; }
.persona small { color: #4a4e66; font-weight: 400; font-size: .8rem; line-height: 1.2; }
.persona:disabled { opacity: .4; }
.avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; background: #e6e9fb; }
.avatar.inicial { display: grid; place-items: center; font-size: 2.2rem; font-weight: 700; color: #2a3ccb; }
.tarjeta .cuerpo { display: flex; gap: 16px; align-items: center; }
.enlace { background: none; border: none; color: #2a3ccb; text-decoration: underline; font-size: 1rem; margin-top: 16px; }
.chips span { display: inline-flex; align-items: center; gap: 8px; }
.chips img, .chips .mini { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.chips .mini { display: inline-grid; place-items: center; background: #e6e9fb; color: #2a3ccb; font-weight: 700; }
.personas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 20px; }
.persona { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; font-size: 1rem; }
.persona small { color: #4a4e66; font-weight: 400; font-size: .8rem; line-height: 1.2; }
.persona:disabled { opacity: .4; }
.avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; background: #e6e9fb; }
.avatar.inicial { display: grid; place-items: center; font-size: 2.2rem; font-weight: 700; color: #2a3ccb; }
.tarjeta .cuerpo { display: flex; gap: 16px; align-items: center; }
.enlace { background: none; border: none; color: #2a3ccb; text-decoration: underline; font-size: 1rem; margin-top: 16px; }
.chips span { display: inline-flex; align-items: center; gap: 8px; }
.chips img, .chips .mini { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.chips .mini { display: inline-grid; place-items: center; background: #e6e9fb; color: #2a3ccb; font-weight: 700; }
/* En el móvil: el estado de conexión solo se muestra si hay un problema */
.aviso-conexion { background: #fdebd9; padding: 8px 12px; border-radius: 8px; }
.aviso-conexion:has([data-ok="true"]) { display: none; }
/* Secuencias de apertura y cierre */
.secuencia { min-height: 60vh; display: grid; place-items: center; }
.diapositiva { display: flex; flex-direction: column; align-items: center; gap: 28px; animation: aparecer 1s ease both; }
@keyframes aparecer { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.frase { font-size: clamp(2rem, 4.5vw, 4rem); font-weight: 600; max-width: 1000px; line-height: 1.15; margin: 0; }
.diapositiva.pregunta .frase { color: #2a3ccb; }
.fotos { display: flex; gap: 24px; justify-content: center; }
.fotos img { max-height: 50vh; max-width: 40vw; background: #fffdf8; padding: 12px 12px 36px; border: 1px solid #ddd6c8;
  box-shadow: 0 16px 40px rgba(21,25,53,.18); transform: rotate(-2deg); }
.fotos img:nth-child(2) { transform: rotate(2deg); }
.stats { display: flex; gap: 64px; justify-content: center; }
.stats div { display: flex; flex-direction: column; }
.stats strong { font-size: 6rem; line-height: 1; }
#qr-img { width: 240px; height: 240px; }

/* Arreglo general: "hidden" siempre oculta, aunque el elemento tenga display propio */
[hidden] { display: none !important; }

/* Aviso de conexión del proyector: solo si se pierde */
.aviso-conexion.fijo { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 10; margin: 0; }

/* ---------- Pantalla de espera (TV) ---------- */
.espera { position: fixed; inset: 0; box-sizing: border-box; padding: 5vh 5vw 6vh; background: #f2ede3; color: #151935;
  display: flex; flex-direction: column; justify-content: space-between; text-align: left;
  font-family: 'Instrument Sans', system-ui, sans-serif; }
.espera .cabecera { display: flex; justify-content: space-between; padding-bottom: 1.8vh; border-bottom: 2px solid #151935;
  font: 500 clamp(12px, 1.05vw, 20px) 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .14em; color: #4a4e66; }
.espera-centro { display: flex; align-items: center; gap: 6vw; }
.espera-texto { flex: 1; }
.etiqueta-azul { font: 600 clamp(12px, 1.1vw, 20px) 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .2em; color: #2a3ccb; margin: 0 0 2.4vh; }
.titular { font-size: clamp(48px, 7.2vw, 150px); line-height: .98; letter-spacing: -.03em; font-weight: 600; margin: 0; }
.titular mark { background: #f4b72e; color: inherit; padding: 0 .14em; }
.subtitulo { font-size: clamp(18px, 1.9vw, 38px); line-height: 1.35; color: #4a4e66; margin: 3.4vh 0 0; max-width: 30ch; }
.qr-tarjeta { flex-shrink: 0; background: #fffdf8; border: 2px solid #151935; padding: 1.4vw; box-shadow: 0 2vh 5vh rgba(21,25,53,.12); }
.qr-tarjeta img { display: block; width: min(22vw, 40vh); height: min(22vw, 40vh); }
.espera-pie { display: flex; flex-direction: column; gap: 2vh; min-height: 13vh; }
.contador { display: flex; align-items: center; gap: 14px; margin: 0;
  font: 600 clamp(12px, 1.1vw, 20px) 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .12em; }
.punto-azul { width: 12px; height: 12px; border-radius: 50%; background: #2a3ccb; animation: latido 1.6s ease-in-out infinite; }
@keyframes latido { 50% { opacity: .25; } }
.espera .chips { justify-content: flex-start; max-width: none; gap: 12px; }
.espera .chips > span { display: inline-flex; align-items: center; gap: 12px; padding: 6px 20px 6px 6px;
  font-size: clamp(16px, 1.4vw, 28px); font-weight: 500; background: #fffdf8; border: 1px solid #ddd6c8; border-radius: 999px; }
.espera .chips img, .espera .chips .mini { width: clamp(36px, 3.2vw, 60px); height: clamp(36px, 3.2vw, 60px); }
.chips .mini { padding: 0; border: none; }
.espera .chips .nuevo { animation: entrar .7s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes entrar { from { opacity: 0; transform: scale(.6) translateY(12px); } to { opacity: 1; transform: none; } }

/* Caras en ranking y podio */
.ranking li { align-items: center; }
.ranking .cara { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.cara.inicial, .cara-podio.inicial, .cara-podio.incognita { display: inline-grid; place-items: center;
  background: #e6e9fb; color: #2a3ccb; font-weight: 700; }
.ranking .cara.inicial { font-size: 1.4rem; }
.podio .quien { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; min-height: 240px; }
.cara-podio { width: clamp(90px, 9vw, 170px); height: clamp(90px, 9vw, 170px); border-radius: 50%; object-fit: cover;
  border: 4px solid #fffdf8; box-shadow: 0 8px 24px rgba(21,25,53,.2); font-size: 3rem; }
.podio .p1 .cara-podio { width: clamp(110px, 11vw, 210px); height: clamp(110px, 11vw, 210px); border-color: #f4b72e; }
.cara-podio.revelada { animation: entrar .8s cubic-bezier(.2, 1.4, .4, 1) both; }

/* Reloj de cuenta atrás */
.reloj { display: grid; place-items: center; }
.reloj-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.reloj-tv { width: clamp(90px, 9vw, 160px); height: clamp(90px, 9vw, 160px); margin: 0 auto 2vh; }
.reloj-movil { width: 96px; height: 96px; margin: 0 auto 12px; }
.reloj-fondo { fill: #fffdf8; stroke: #ddd6c8; stroke-width: 10; }
.reloj-arco { fill: none; stroke: #2a3ccb; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset .1s linear, stroke .3s; }
.reloj-num { font: 700 46px 'Instrument Sans', system-ui, sans-serif; fill: #151935; }
.reloj.reloj-aviso .reloj-arco { stroke: #f4b72e; }
.reloj.reloj-urgente .reloj-arco { stroke: #d1432f; }
.reloj.reloj-urgente .reloj-num { fill: #d1432f; }
.reloj.reloj-urgente { animation: pulso .5s ease-in-out infinite alternate; }
@keyframes pulso { to { transform: scale(1.07); } }

/* ---------- Bellotín ---------- */
.bellotin { position: fixed; right: 3vw; bottom: 3vh; z-index: 6; display: flex; align-items: flex-end; gap: 1vw; pointer-events: none; }
.bellotin-cuerpo { width: clamp(110px, 11vw, 200px); animation: flotar 3s ease-in-out infinite; }
.bellotin-cuerpo svg { display: block; width: 100%; height: auto; overflow: visible; }
.bocadillo { position: relative; max-width: 22vw; margin-bottom: 9vh; padding: 1.3vh 1.3vw; background: #fffdf8; color: #151935;
  border: 2px solid #151935; border-radius: 18px; font: 600 clamp(14px, 1.3vw, 26px)/1.25 'Instrument Sans', system-ui, sans-serif;
  animation: entrar .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.bocadillo::after { content: ''; position: absolute; right: -11px; bottom: 18px; width: 18px; height: 18px; background: #fffdf8;
  border-right: 2px solid #151935; border-bottom: 2px solid #151935; border-radius: 0 0 5px 0; transform: rotate(-45deg); }
.bocadillo:empty { display: none; }
@keyframes flotar { 50% { transform: translateY(-8px) rotate(-2deg); } }
.bellotin.tiempo .bellotin-cuerpo { animation: temblar .25s linear infinite; }
@keyframes temblar { 25% { transform: translateX(-3px) rotate(-3deg); } 75% { transform: translateX(3px) rotate(3deg); } }
.bellotin.resuelto .bellotin-cuerpo { animation: saltar .7s cubic-bezier(.3, 1.6, .5, 1) infinite alternate; }
@keyframes saltar { to { transform: translateY(-14px); } }
/* Que las caras de la espera no queden debajo de Bellotín */
.espera .chips { max-width: calc(100% - 32vw); }

/* Botón para activar el sonido en la TV (desaparece al pulsarlo) */
.activar-sonido { position: fixed; left: 2vw; bottom: 2vh; z-index: 11; font-size: 14px; padding: 8px 14px; opacity: .85; }

/* Instrucciones de la misión */
.reglas { list-style: none; counter-reset: r; padding: 0; margin: 5vh auto 0; max-width: 1000px; text-align: left; display: grid; gap: 3vh; }
.reglas li { counter-increment: r; display: flex; align-items: center; gap: 1.6vw; font-size: clamp(20px, 2.2vw, 42px); font-weight: 500; line-height: 1.25; }
.reglas li::before { content: counter(r); flex-shrink: 0; display: grid; place-items: center; width: 2.1em; height: 2.1em;
  border-radius: 50%; background: #2a3ccb; color: #fbf6ea; font-weight: 700; }

/* ---------- Pantalla de espera v2 ---------- */
.espera { padding: 4.5vh 5vw 4vh; justify-content: flex-start; gap: 3vh; }
.espera .cabecera span:last-child { color: #2a3ccb; font-weight: 600; }
.espera-centro { flex: 1; min-height: 0; justify-content: space-between; gap: 5vw; }
.titular { font-size: clamp(48px, 7.4vw, 156px); line-height: .95; }
.titular mark { background: none; padding: 0; }
.marcador { background: linear-gradient(transparent 58%, #f4b72e 58%, #f4b72e 90%, transparent 90%); padding: 0 .06em; }
.pasos-alta { list-style: none; counter-reset: a; padding: 0; margin: 4.5vh 0 0; display: grid; gap: 1.6vh; }
.pasos-alta li { counter-increment: a; display: flex; align-items: center; gap: 1vw; font-size: clamp(16px, 1.6vw, 32px); color: #4a4e66; }
.pasos-alta li::before { content: counter(a); flex-shrink: 0; display: grid; place-items: center; width: 1.9em; height: 1.9em;
  border-radius: 50%; border: 2px solid #2a3ccb; color: #2a3ccb; font: 600 .85em 'IBM Plex Mono', ui-monospace, monospace; }

.ficha-qr { position: relative; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 1.6vh;
  background: #fffdf8; border: 1px solid #ddd6c8; border-radius: 6px; padding: 5vh 2vw 2.4vh;
  transform: rotate(1.5deg); box-shadow: 0 2.4vh 5vh rgba(21,25,53,.14); }
.ficha-pestana { position: absolute; top: -1.8vh; left: 1.6vw; padding: .8vh 1vw; border-radius: 4px; background: #2a3ccb; color: #fbf6ea;
  font: 600 clamp(11px, .9vw, 17px) 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .16em; }
.ficha-qr img { display: block; width: min(22vw, 36vh); height: min(22vw, 36vh); }
.ficha-pie { font: 500 clamp(12px, 1vw, 20px) 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: #4a4e66; }

.tablon { padding-right: 24vw; } /* hueco para Bellotín */
.tablon-caras { display: flex; flex-wrap: wrap; gap: 1.6vh 1.2vw; }
.agente { display: flex; flex-direction: column; align-items: center; gap: .8vh; width: clamp(64px, 6.4vw, 120px);
  opacity: .35; filter: grayscale(1); transition: opacity .5s, filter .5s; }
.agente.dentro { opacity: 1; filter: none; }
.agente-cara { width: clamp(48px, 4.8vw, 92px); height: clamp(48px, 4.8vw, 92px); border-radius: 50%; object-fit: cover;
  border: 3px solid #fffdf8; box-shadow: 0 4px 12px rgba(21,25,53,.12); }
.agente.dentro .agente-cara { border-color: #2a3ccb; }
.agente-cara.inicial { display: grid; place-items: center; background: #e6e9fb; color: #2a3ccb; font-weight: 700; font-size: 1.6em; }
.agente-nombre { font-size: clamp(11px, .95vw, 18px); font-weight: 500; text-align: center; line-height: 1.15; }
.agente.recien { animation: entrar .7s cubic-bezier(.2, 1.4, .4, 1) both; }

/* Bellotín algo más grande y bocadillo más estrecho */
.bellotin-cuerpo { width: clamp(120px, 12vw, 220px); }
.bocadillo { max-width: 17vw; }

/* ---------- Pantalla de espera v3 ---------- */
/* Rotulador detrás de las letras */
.marcador { background: none; position: relative; z-index: 0; padding: 0; }
.marcador::after { content: ''; position: absolute; z-index: -1; left: -.05em; right: -.05em; bottom: .1em; height: .3em;
  background: #f4b72e; border-radius: .06em; }
/* QR algo más grande */
.ficha-qr img { width: min(24vw, 40vh); height: min(24vw, 40vh); }
/* Tablón en una sola fila */
.tablon { padding-right: 22vw; }
.tablon-titulo { margin: 0 0 1.8vh; font: 600 clamp(11px, .95vw, 18px) 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .16em; color: #4a4e66; }
.tablon-caras { flex-wrap: nowrap; gap: 0 .9vw; }
.agente { width: clamp(56px, 5.6vw, 108px); opacity: .5; }
.agente-marco { position: relative; }
.agente-cara { width: clamp(44px, 4.4vw, 84px); height: clamp(44px, 4.4vw, 84px); }
.agente-check { position: absolute; right: -2px; bottom: -2px; width: 1.6em; height: 1.6em; display: grid; place-items: center;
  border-radius: 50%; background: #2a3ccb; color: #fbf6ea; border: 2px solid #f2ede3; font-size: clamp(10px, .8vw, 15px); font-weight: 700; }
.agente.es-acusado .agente-cara { border-color: #f4b72e; }
.agente-etiqueta { position: absolute; left: 50%; bottom: -.9em; transform: translateX(-50%); white-space: nowrap;
  padding: 2px 6px; border-radius: 3px; background: #f4b72e; color: #151935;
  font: 700 clamp(8px, .62vw, 12px) 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .1em; }
.agente.es-acusado .agente-nombre { margin-top: .7em; }
/* Todos dentro */
.espera.completo .cabecera span:last-child { background: #f4b72e; color: #151935; padding: 2px 10px; border-radius: 3px; }
/* Activar sonido: arriba a la derecha y discreto */
.activar-sonido { top: 1.2vh; right: 1.2vw; left: auto; bottom: auto; font-size: 12px; padding: 6px 10px; opacity: .6; }

/* ---------- Pantalla de espera v4: más compacta ---------- */
.espera { padding: 3.5vh 4.5vw; gap: 2vh; }
.espera-centro { gap: 4vw; }
.etiqueta-azul { margin-bottom: 1.6vh; }
.titular { font-size: min(8vw, 13vh); }
.pasos-alta { margin-top: 3.6vh; gap: 1.4vh; }
.pasos-alta li { font-size: min(2vw, 3.4vh); }
.ficha-qr { padding: 4.6vh 1.8vw 2.2vh; }
.ficha-qr img { width: min(26vw, 44vh); height: min(26vw, 44vh); }
.ficha-pie { font-size: min(1.1vw, 1.9vh); }

/* Tablón: todo el ancho, caras más grandes */
.tablon { padding-right: 0; }
.tablon-caras { justify-content: space-between; gap: 0; }
.agente { width: min(8vw, 13vh); }
.agente-cara { width: min(6vw, 10vh); height: min(6vw, 10vh); }
.agente-nombre { font-size: min(1.1vw, 1.9vh); }
.agente-check { font-size: min(.9vw, 1.5vh); }
.agente-etiqueta { font-size: min(.7vw, 1.2vh); }

/* Bellotín en la espera: entre el título y el QR, con el bocadillo encima */
.bellotin.en-espera { right: auto; bottom: auto; left: 55vw; top: 34vh; transform: translate(-50%, -50%);
  flex-direction: column; align-items: center; gap: 1.4vh; }
.bellotin.en-espera .bocadillo { margin-bottom: 0; max-width: 16vw; text-align: center; }
.bellotin.en-espera .bocadillo::after { right: auto; left: 50%; bottom: -11px; transform: translateX(-50%) rotate(45deg); }
.bellotin.en-espera .bellotin-cuerpo { width: min(11vw, 18vh); }
.frase { white-space: pre-line; }

/* ---------- Final: el expediente se cierra y se sella ---------- */
.expediente-cierre { position: fixed; inset: 0; z-index: 20; perspective: 2200px; display: grid; place-items: center;
  pointer-events: none; animation: golpe .35s ease-out 1.3s; }
.tapa { position: absolute; inset: 7vh 4vw 4vh; display: flex; flex-direction: column; justify-content: center; padding: 0 7vw;
  background: #d9b77a; border: 2px solid #a8844a; border-radius: 1.2vh; box-shadow: 0 3vh 8vh rgba(21,25,53,.35);
  transform-origin: left center; animation: cerrar-tapa 1.3s cubic-bezier(.6, 0, .9, .4) both; }
.tapa::before { content: ''; position: absolute; top: -3.6vh; left: 4vw; width: 22vw; height: 4vh; background: #d9b77a;
  border: 2px solid #a8844a; border-bottom: none; border-radius: 1.2vh 1.2vh 0 0; }
.tapa-pestana { font: 600 min(1.6vw, 2.6vh) 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .3em; color: #5a4320; }
.tapa-titulo { margin: 2vh 0 0; font: 700 min(6.5vw, 11vh)/1.02 'Instrument Sans', system-ui, sans-serif; letter-spacing: -.02em; color: #2b2112; }
.tapa-sub { margin: 2vh 0 0; font: 500 min(2.2vw, 3.8vh) 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .14em;
  text-transform: uppercase; color: #5a4320; }
@keyframes cerrar-tapa { from { transform: rotateY(-115deg); opacity: 0; } 15% { opacity: 1; } to { transform: rotateY(0); opacity: 1; } }
@keyframes golpe { 30% { transform: translate(-6px, 4px); } 60% { transform: translate(5px, -3px); } }
.sello-cierre { position: relative; z-index: 2; margin-top: 30vh; padding: .2em .55em; border: .1em solid #2a3ccb; border-radius: .12em;
  color: #2a3ccb; font: 700 min(7vw, 12vh)/1 'Instrument Sans', system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em;
  mix-blend-mode: multiply; transform: rotate(-8deg); animation: sellar-fuerte .45s cubic-bezier(.2, 1.6, .4, 1) 1.9s both; }
@keyframes sellar-fuerte { from { opacity: 0; transform: rotate(-8deg) scale(2.2); } to { opacity: .92; transform: rotate(-8deg) scale(1); } }

/* Número impar de opciones en la TV: la última ocupa todo el ancho */
.escena .opciones .opcion:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ================= TV · pantallas del juego (diseño final) ================= */
body[data-tipo] { display: block; }
body[data-tipo] .escena { position: fixed; inset: 0; box-sizing: border-box; max-width: none; padding: 4vh 4.5vw;
  display: flex; flex-direction: column; gap: 3vh; text-align: left; font-family: 'Instrument Sans', system-ui, sans-serif; }

/* Cabecera, como en la espera */
.juego-cabecera { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1.6vh; border-bottom: 2px solid #151935;
  font: 500 min(1.05vw, 1.9vh) 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .14em; color: #4a4e66; }
.juego-cabecera #etiqueta { color: #2a3ccb; font-weight: 600; }
body[data-tipo="apertura"] .juego-cabecera, body[data-tipo="cierre"] .juego-cabecera, body[data-tipo="espera"] .juego-cabecera { display: none; }

/* Pregunta + reloj */
.juego-pregunta { display: flex; align-items: center; gap: 3vw; }
body[data-tipo] #titulo { flex: 1; margin: 0; text-align: left; font-size: min(4.2vw, 7.4vh); line-height: 1.08; letter-spacing: -.02em; font-weight: 600; }
body[data-tipo] #titulo:empty { display: none; }
.juego-pregunta .reloj-tv { margin: 0; flex-shrink: 0; width: min(9vw, 15vh); height: min(9vw, 15vh); }

/* Opciones */
.juego-cuerpo { display: flex; gap: 3vw; align-items: flex-start; min-height: 0; }
body[data-tipo] .opciones { flex: 1; margin: 0; max-width: none; grid-template-columns: 1fr 1fr; gap: 1.8vh 1.4vw; }
body[data-tipo] .opciones:empty { display: none; }
body[data-tipo] .opcion { gap: 1.2vw; padding: 2.4vh 1.6vw; border-radius: 14px; background: #fffdf8; font-size: min(2.1vw, 3.7vh); font-weight: 500; }
body[data-tipo] .opcion b { flex-shrink: 0; display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%;
  background: #2a3ccb; color: #fbf6ea; font-size: .8em; }
body[data-tipo] .opcion em { padding: .2em .7em; border-radius: 999px; background: #e6e9fb; color: #2a3ccb; font-size: .8em; }
body[data-tipo] .opcion.correcta { background: #2a3ccb; border-color: #2a3ccb; color: #fbf6ea; }
body[data-tipo] .opcion.correcta b, body[data-tipo] .opcion.correcta em { background: #f4b72e; color: #151935; }
body[data-tipo="revelacion"] .opcion:not(.correcta), body[data-tipo="voto-resultado"] .opcion:not(.correcta) { opacity: .45; }
/* Con anécdota: opciones en una columna y la prueba al lado */
.juego-cuerpo:has(#anecdota:not([hidden])) .opciones { grid-template-columns: 1fr; }

/* Prueba desclasificada (tarjeta de papel) */
body[data-tipo] #anecdota { width: min(34vw, 62vh); flex-shrink: 0; background: #fffdf8; border: 1px solid #ddd6c8; border-radius: 6px;
  transform: rotate(-1.5deg); box-shadow: 0 2vh 5vh rgba(21,25,53,.16); animation: entrar .7s cubic-bezier(.2, 1.4, .4, 1) both; }
body[data-tipo] #anecdota .cuerpo { display: flex; flex-direction: column; align-items: flex-start; gap: 1.6vh; padding: 3.2vh 2vw; }
.prueba-titulo { color: #2a3ccb; font-weight: 600; letter-spacing: .16em; margin: 0; }
body[data-tipo] #a-texto { margin: 0; font-size: min(1.9vw, 3.3vh); line-height: 1.35; }
body[data-tipo] #a-autor { margin: 0; }

/* Línea de estado abajo a la izquierda (la derecha es de Bellotín) */
body[data-tipo] #info { margin: auto 0 0; max-width: 62vw; text-align: left; color: #4a4e66;
  font: 600 min(1.1vw, 2vh) 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .12em; }
#info:empty { display: none; }

/* Instrucciones */
body[data-tipo="reglas"] .reglas { margin: 2vh 0 0; max-width: 70vw; }

/* Ranking intermedio: dos columnas, los tres primeros destacados */
body[data-tipo="ranking"] .ranking { margin: 1vh 0 0; max-width: 72vw; display: grid; grid-template-columns: 1fr 1fr; column-gap: 4vw; }
body[data-tipo="ranking"] .ranking li { font-size: min(2vw, 3.4vh); padding: 1.4vh 0; }
body[data-tipo="ranking"] .ranking .cara { width: min(4vw, 7vh); height: min(4vw, 7vh); }
body[data-tipo="ranking"] .ranking li:nth-child(-n+3) b { color: #151935; background: #f4b72e; border-radius: 6px; text-align: center; }

/* Podio centrado */
body[data-tipo^="podio"] #titulo { text-align: center; }
body[data-tipo^="podio"] .podio { margin: auto 0 0; }

/* Apertura y cierre ocupan toda la pantalla */
body[data-tipo] .secuencia { flex: 1; min-height: 0; }

/* Acertó más rápido */
.rapido { align-self: flex-start; display: inline-flex; align-items: center; gap: .8vw; padding: .6vh 1.4vw .6vh .6vh;
  border-radius: 999px; background: #f4b72e; color: #151935; animation: entrar .6s cubic-bezier(.2, 1.4, .4, 1) .4s both;
  font: 600 min(1.1vw, 2vh) 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .1em; }
.rapido-cara { width: min(3.2vw, 5.6vh); height: min(3.2vw, 5.6vh); border-radius: 50%; object-fit: cover; border: 2px solid #fffdf8; }
.rapido-cara.inicial { display: grid; place-items: center; background: #fffdf8; color: #2a3ccb; font-weight: 700; }

/* ================= Móvil · diseño final ================= */
body.movil { font-family: 'Instrument Sans', system-ui, sans-serif; place-items: start center; text-align: left; }
body.movil .caja { width: 100%; max-width: 460px; min-height: 100vh; box-sizing: border-box; padding: 14px 20px 28px; display: flex; flex-direction: column; }
.movil-cabecera { display: flex; justify-content: space-between; align-items: center; padding: 6px 0 12px; margin-bottom: 18px;
  border-bottom: 2px solid #151935; font: 600 12px 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .14em; color: #4a4e66; }
.movil-cabecera #mis-puntos { color: #2a3ccb; }
body.movil section { flex: 1; display: flex; flex-direction: column; }
body.movil h1 { margin: 6px 0 12px; font-size: 2.3rem; line-height: 1.05; letter-spacing: -.02em; text-align: left; }

/* Elegir cara */
body.movil .persona { background: #fffdf8; border: 2px solid #ddd6c8; border-radius: 14px; padding: 14px 8px; }
body.movil .persona strong { font-size: 1.05rem; }

/* Credencial */
body.movil .tarjeta { position: relative; border-radius: 14px; }
body.movil .tarjeta .cabecera { font: 600 11px 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .16em; }
body.movil .tarjeta .cuerpo { padding: 20px 18px 34px; }
body.movil #c-nombre { margin: 2px 0 8px; font-size: 2rem; letter-spacing: -.01em; }
body.movil #credencial .tarjeta::after { content: 'ACCESO AUTORIZADO'; position: absolute; right: 14px; bottom: 10px; padding: 3px 8px;
  border: 2px solid #2a3ccb; border-radius: 4px; color: #2a3ccb; transform: rotate(-6deg);
  font: 700 10px 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .14em; }
body.movil #paso { margin-top: auto; padding-top: 24px; text-align: center; }

/* Pregunta */
body.movil #juego .reloj-movil { margin: 2px auto 12px; }
body.movil #q-texto { margin: 6px 0 14px; font-size: 1.35rem; font-weight: 600; line-height: 1.25; }
body.movil #q-opciones { flex: 1; margin: 0; gap: 10px; }
body.movil button.opcion { min-height: 64px; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #fffdf8; font-size: 1.2rem; }
body.movil button.opcion b { flex-shrink: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: #2a3ccb; color: #fbf6ea; font-size: .95rem; }
body.movil button.opcion:active { background: #e6e9fb; border-color: #2a3ccb; }

/* Mensajes */
body.movil #mensaje { align-items: center; justify-content: center; gap: 6px; text-align: center; }
.m-bellotin { width: 120px; margin-bottom: 6px; animation: flotar 3s ease-in-out infinite; }
.m-bellotin svg { display: block; width: 100%; height: auto; overflow: visible; }
body.movil #m-titulo { text-align: center; }
body.movil #m-detalle { margin: 0; font-size: 1.15rem; color: #4a4e66; }
body.movil #m-pie { margin-top: 18px; color: #2a3ccb; font-weight: 600; }
body.movil #m-pie:not(:empty)::before { content: '↑ '; }