/* ==========================================================================
   ENCERRADOS — estilo «cartel de película de atracos de los años 60»
   Tokens primero; ningún valor suelto. Modo oscuro por decisión: el golpe es
   de noche y la interfaz no puede deslumbrar dentro de un casino a oscuras.
   ========================================================================== */
:root {
  color-scheme: dark;
  --tinta: #0d0f1a;
  --tinta-2: #161a2b;
  --tinta-3: #232840;
  --papel: #efe6d2;
  --papel-2: #d9ceb4;
  --papel-3: #b9ad8f;
  --rojo: #d8323c;
  --rojo-osc: #8a1a22;
  --oro: #e2b04a;
  --neon: #35e0d0;
  --texto: #efe6d2;
  --texto-2: #b9b09c;

  --f-titulo: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;

  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px;
  --r-1: 3px; --r-2: 8px; --r-full: 999px;
  --dur-1: 120ms; --dur-2: 220ms; --dur-3: 420ms;
  --curva: cubic-bezier(.2, .8, .2, 1);
  --golpe: cubic-bezier(.5, 1.8, .4, .8);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: var(--tinta); color: var(--texto); font-family: var(--f-mono); -webkit-tap-highlight-color: transparent; }
body { user-select: none; -webkit-user-select: none; touch-action: none; overscroll-behavior: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
[hidden] { display: none !important; }

#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* --- Piezas comunes ------------------------------------------------------ */
.titulo { font-family: var(--f-titulo); text-transform: uppercase; letter-spacing: .02em; line-height: .9; }
.btn {
  font-family: var(--f-titulo); text-transform: uppercase; letter-spacing: .06em; font-size: 20px;
  padding: var(--e-3) var(--e-5); background: var(--papel); color: var(--tinta);
  border-radius: var(--r-1); box-shadow: 4px 4px 0 var(--rojo);
  transition: transform var(--dur-1) var(--curva), box-shadow var(--dur-1) var(--curva);
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--rojo); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--rojo); }
.btn.rojo { background: var(--rojo); color: var(--papel); box-shadow: 4px 4px 0 var(--tinta-3); }
.btn.fantasma { background: transparent; color: var(--papel); box-shadow: inset 0 0 0 2px var(--papel-3); }
.chip { display: inline-flex; align-items: center; gap: var(--e-1); padding: 2px var(--e-2); border-radius: var(--r-full); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

.capa { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; }

/* Sello de goma: el gesto propio del juego */
.sello {
  font-family: var(--f-titulo); text-transform: uppercase; color: var(--rojo);
  border: 5px double var(--rojo); padding: var(--e-2) var(--e-4); border-radius: var(--r-2);
  transform: rotate(-9deg); letter-spacing: .05em; mix-blend-mode: normal;
  -webkit-mask-image: repeating-radial-gradient(circle at 30% 40%, #000 0 2px, rgba(0,0,0,.8) 2px 3px);
  mask-image: repeating-radial-gradient(circle at 30% 40%, #000 0 2px, rgba(0,0,0,.8) 2px 3px);
}
.sello.cae { animation: sello var(--dur-3) var(--golpe) both; }
.sello.verde { color: var(--neon); border-color: var(--neon); }
@keyframes sello { from { transform: rotate(-9deg) scale(2.6); opacity: 0; } to { transform: rotate(-9deg) scale(1); opacity: 1; } }

/* --- MENÚ ---------------------------------------------------------------- */
#menu {
  overflow-y: auto; justify-content: safe center;
  background:
    repeating-linear-gradient(-35deg, transparent 0 46px, rgba(216,50,60,.08) 46px 92px),
    radial-gradient(ellipse at 70% 30%, #2a1420 0%, var(--tinta) 60%);
  flex-direction: column; gap: var(--e-5); text-align: center; padding: var(--e-5);
}
#menu .logo { font-size: clamp(72px, 16vw, 190px); color: var(--papel); text-shadow: 6px 6px 0 var(--rojo); }
.logo .ojo-envoltura { display: inline-block; filter: drop-shadow(5px 5px 0 var(--papel)); }
body[data-escenario="pueblo"] .logo .ojo-envoltura { filter: drop-shadow(5px 5px 0 #000); }
body[data-escenario="playa"] .logo .ojo-envoltura { filter: drop-shadow(4px 4px 0 var(--neon)); }
/* El logo: ENCERRAD + un ojo de cerradura en lugar de la O + S */
.ojo-cerradura {
  display: inline-block; width: .5em; height: .78em; margin: 0 .03em; vertical-align: -.02em;
  background: var(--rojo);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 64'%3E%3Ccircle cx='20' cy='19' r='19'/%3E%3Cpath d='M12 28h16l6 36H6z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 64'%3E%3Ccircle cx='20' cy='19' r='19'/%3E%3Cpath d='M12 28h16l6 36H6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
#menu .lema { font-size: clamp(13px, 1.6vw, 17px); letter-spacing: .3em; text-transform: uppercase; color: var(--oro); }
#menu .fila { display: flex; gap: var(--e-4); flex-wrap: wrap; justify-content: center; align-items: center; }
.selector { display: inline-flex; border-radius: var(--r-1); overflow: hidden; box-shadow: inset 0 0 0 2px var(--papel-3); }
.selector button { padding: var(--e-2) var(--e-3); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); }
.selector button[aria-pressed="true"] { background: var(--papel); color: var(--tinta); }
.selector-etq { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--texto-2); margin-right: var(--e-2); }
#menu .banda { display: flex; gap: var(--e-1); justify-content: center; margin-top: calc(var(--e-2) * -1); }
#menu .banda img { width: 56px; height: 56px; }
#menu .banda img.rata { filter: drop-shadow(0 0 10px var(--rojo)); }
#menu .ayuda { max-width: 640px; font-size: 13px; line-height: 1.6; color: var(--texto-2); text-align: left; background: rgba(0,0,0,.35); padding: var(--e-4); border-left: 3px solid var(--oro); }
#menu .ayuda b { color: var(--papel); }

/* --- INTRO (revelar papel) ----------------------------------------------- */
#intro { flex-direction: column; gap: var(--e-4); background: var(--tinta); animation: aparecer var(--dur-3) var(--curva); }
#intro.rata { background: radial-gradient(ellipse at center, var(--rojo-osc) 0%, #1a0508 70%); }
#intro .pre { font-size: 14px; letter-spacing: .4em; text-transform: uppercase; color: var(--texto-2); }
#intro .rol { font-size: clamp(64px, 12vw, 150px); color: var(--papel); animation: acercar 1.2s var(--curva) both; }
#intro.rata .rol { color: var(--papel); text-shadow: 6px 6px 0 #000; }
#intro .mision { font-size: 15px; color: var(--oro); max-width: 560px; text-align: center; line-height: 1.5; }
#intro .banda { display: flex; gap: var(--e-2); margin-top: var(--e-4); }
#intro .banda img { width: 64px; height: 64px; }
#intro .banda img.otro { filter: brightness(.45) saturate(.4); }
@keyframes acercar { from { transform: scale(1.4); letter-spacing: .3em; opacity: 0; } to { transform: scale(1); letter-spacing: .02em; opacity: 1; } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

/* --- HUD ----------------------------------------------------------------- */
#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#hud > * { pointer-events: auto; }
.plan { position: absolute; top: var(--e-3); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: var(--e-2); background: rgba(13,15,26,.82); padding: var(--e-2) var(--e-3); border-radius: var(--r-1); box-shadow: inset 0 0 0 1px rgba(226,176,74,.35); }
.plan .etq { font-family: var(--f-titulo); letter-spacing: .12em; font-size: 15px; color: var(--oro); }
.plan .barra { width: min(34vw, 320px); height: 10px; background: #000; border-radius: var(--r-1); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.plan .barra i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(-45deg, var(--oro) 0 8px, #c99433 8px 16px); transition: width var(--dur-3) var(--curva); }
.plan b { font-size: 12px; min-width: 3.5ch; text-align: right; }

.alerta { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); font-family: var(--f-titulo); letter-spacing: .08em; font-size: 22px; padding: var(--e-2) var(--e-4); background: var(--rojo); color: var(--papel); border-radius: var(--r-1); box-shadow: 0 0 30px rgba(216,50,60,.6); animation: latido 1s infinite; text-align: center; }
.alerta small { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; }
.alerta.apagon { background: #1a1d2c; box-shadow: inset 0 0 0 2px var(--oro); color: var(--oro); animation: none; }
@keyframes latido { 50% { transform: translateX(-50%) scale(1.04); } }

.aviso-rol { position: absolute; bottom: var(--e-3); left: 50%; transform: translateX(-50%); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--texto-2); background: rgba(0,0,0,.5); padding: 2px var(--e-3); border-radius: var(--r-full); }
.aviso-rol.rata { color: var(--rojo); }
.aviso-rol.fantasma { color: #9fb4ff; }

.tareas { background: rgba(13,15,26,.82); border-radius: var(--r-1); box-shadow: inset 0 0 0 1px rgba(239,230,210,.12); }
.tareas h3 { font-family: var(--f-titulo); font-weight: 400; letter-spacing: .12em; font-size: 14px; color: var(--oro); margin-bottom: var(--e-2); }
.tareas ul { list-style: none; display: grid; gap: 3px; }
.tareas li { font-size: 12px; display: flex; gap: var(--e-2); }
.tareas li .sala { color: var(--texto-2); }
.tareas li.hecha { color: #6f7a6a; text-decoration: line-through; }
.tareas li.arreglo { color: var(--rojo); font-weight: 600; }

/* --- PC ------------------------------------------------------------------ */
body[data-disp="pc"] .tareas { position: absolute; top: var(--e-3); left: var(--e-3); padding: var(--e-3); min-width: 250px; }
body[data-disp="pc"] #minimapa { position: absolute; top: var(--e-3); right: var(--e-3); width: 220px; border-radius: var(--r-1); box-shadow: inset 0 0 0 1px rgba(239,230,210,.2); background: rgba(13,15,26,.8); }
.acciones-pc { position: absolute; right: var(--e-4); bottom: var(--e-4); display: flex; gap: var(--e-2); align-items: flex-end; }
.acc { position: relative; display: grid; place-items: center; gap: 2px; width: 92px; height: 92px; border-radius: var(--r-2); background: rgba(13,15,26,.85); box-shadow: inset 0 0 0 2px rgba(239,230,210,.25); font-family: var(--f-titulo); letter-spacing: .08em; font-size: 15px; color: var(--papel); transition: transform var(--dur-1) var(--curva), opacity var(--dur-2); }
.acc svg { width: 34px; height: 34px; }
.acc kbd { position: absolute; top: 5px; left: 6px; font-family: var(--f-mono); font-size: 10px; font-weight: 600; padding: 0 4px; border-radius: 2px; background: var(--papel); color: var(--tinta); }
.acc .cd { position: absolute; inset: 0; display: grid; place-items: center; font-size: 34px; background: rgba(0,0,0,.6); border-radius: var(--r-2); }
.acc[disabled] { opacity: .35; cursor: default; }
.acc:not([disabled]):hover { transform: translateY(-2px); }
.acc.listo { box-shadow: inset 0 0 0 2px var(--oro), 0 0 20px rgba(226,176,74,.35); }
.acc.peligro:not([disabled]) { background: var(--rojo); box-shadow: 0 0 24px rgba(216,50,60,.6); }
.acc.alerta-r:not([disabled]) { background: #b8742a; }
.menu-sabotaje { position: absolute; bottom: 100px; right: 0; display: grid; gap: var(--e-1); background: var(--tinta-2); padding: var(--e-2); border-radius: var(--r-2); box-shadow: inset 0 0 0 1px var(--rojo); min-width: 220px; }
.menu-sabotaje button { text-align: left; padding: var(--e-2) var(--e-3); font-size: 13px; border-radius: var(--r-1); }
.menu-sabotaje button:hover { background: var(--rojo); }
.menu-sabotaje kbd { font-size: 10px; background: var(--papel); color: var(--tinta); padding: 0 4px; margin-right: var(--e-2); border-radius: 2px; }
.pista-tecla { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); font-size: 13px; background: rgba(0,0,0,.7); padding: var(--e-1) var(--e-3); border-radius: var(--r-1); }
.pista-tecla kbd { background: var(--papel); color: var(--tinta); padding: 0 5px; border-radius: 2px; font-weight: 600; margin-right: var(--e-1); }

/* --- MÓVIL (en vertical) --------------------------------------------------
   El móvil se juega de pie. Tres franjas: arriba lo que se MIRA (plan, tarea,
   alertas), en medio el juego, abajo lo que se TOCA (joystick a la izquierda,
   acciones a la derecha). Nada que haya que pulsar queda fuera del alcance del
   pulgar. */
body[data-disp="movil"] #menu { gap: var(--e-3); justify-content: flex-start; padding: max(var(--e-5), env(safe-area-inset-top)) var(--e-4) max(var(--e-5), env(safe-area-inset-bottom)); }
body[data-disp="movil"] #menu .logo { font-size: clamp(40px, 13.5vw, 84px); margin-top: var(--e-4); white-space: nowrap; }
body[data-disp="movil"] #menu .lema { font-size: 11px; letter-spacing: .22em; }
body[data-disp="movil"] #menu .banda { flex-wrap: wrap; }
body[data-disp="movil"] #menu .banda img { width: 34px; height: 34px; }
body[data-disp="movil"] #menu .pais { display: none; }
body[data-disp="movil"] #menu .mapas { grid-template-columns: 1fr; width: 100%; }
body[data-disp="movil"] .mapa { padding: var(--e-3); }
body[data-disp="movil"] .mapa-pais { display: flex; }
body[data-disp="movil"] .mapa-nombre { font-size: 20px; }
body[data-disp="movil"] #menu .fila { width: 100%; gap: var(--e-3); }
body[data-disp="movil"] #menu .fila .btn { flex: 1 1 100%; font-size: 18px; padding: var(--e-3) var(--e-4); }
body[data-disp="movil"] #menu .ayuda { font-size: 12px; }
body[data-disp="pc"] #menu .mapa-pais { display: none; }

/* Franja de arriba */
.barra-sup { position: absolute; top: 0; left: 0; right: 0; padding: max(var(--e-2), env(safe-area-inset-top)) var(--e-3) 0; display: grid; gap: var(--e-2); pointer-events: none; }
.barra-sup > * { pointer-events: auto; }
body[data-disp="movil"] .plan { position: static; transform: none; padding: var(--e-2) var(--e-3); }
body[data-disp="movil"] .plan .barra { flex: 1; width: auto; }
.fila-sup { display: flex; gap: var(--e-2); align-items: stretch; }
.chip-tarea { flex: 1; min-width: 0; background: rgba(13,15,26,.85); border-radius: var(--r-1); padding: var(--e-2) var(--e-3); font-size: 12px; line-height: 1.3; box-shadow: inset 0 0 0 1px rgba(226,176,74,.35); text-align: left; overflow: hidden; }
.chip-tarea b { color: var(--oro); font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-tarea .mas { color: var(--texto-2); font-size: 10px; }
.bm.mapa-btn { width: 52px; height: auto; min-height: 48px; border-radius: var(--r-1); }
.bm.mapa-btn svg { margin: 0; }
body[data-disp="movil"] .tareas { position: static; padding: var(--e-3); max-height: 40vh; overflow: auto; }
body[data-disp="movil"] .alerta { position: static; transform: none; justify-self: center; font-size: 18px; animation: latido-m 1s infinite; }
@keyframes latido-m { 50% { transform: scale(1.04); } }
body[data-disp="movil"] .aviso-rol { bottom: auto; top: calc(max(var(--e-2), env(safe-area-inset-top)) + 112px); font-size: 10px; letter-spacing: .14em; white-space: nowrap; }

/* Franja de abajo: joystick a la izquierda, acciones a la derecha */
.zona-joy { position: absolute; left: 0; bottom: 0; width: 58%; height: 42%; }
.joy-pista { position: absolute; left: 50%; bottom: calc(max(var(--e-4), env(safe-area-inset-bottom)) + 40px); transform: translateX(-50%); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; text-align: center; line-height: 1.6; color: rgba(239,230,210,.45); pointer-events: none; }
.joy-base { position: absolute; width: 124px; height: 124px; border-radius: 50%; background: rgba(239,230,210,.07); box-shadow: inset 0 0 0 2px rgba(239,230,210,.2); transform: translate(-50%, -50%); pointer-events: none; }
.joy-mando { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(239,230,210,.35); box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.botonera-movil { position: absolute; right: var(--e-3); bottom: max(var(--e-4), env(safe-area-inset-bottom)); display: flex; gap: var(--e-2); align-items: flex-end; }
.col-sec, .col-pri { display: flex; flex-direction: column; gap: var(--e-2); align-items: center; }
.bm { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: rgba(13,15,26,.8); box-shadow: inset 0 0 0 3px rgba(239,230,210,.3); font-family: var(--f-titulo); font-size: 12px; letter-spacing: .08em; color: var(--papel); position: relative; transition: transform var(--dur-1) var(--curva), opacity var(--dur-2); }
.bm svg { width: 28px; height: 28px; margin-bottom: -6px; }
.bm.grande { width: 100px; height: 100px; font-size: 16px; }
.bm.grande svg { width: 40px; height: 40px; }
.bm:active { transform: scale(.92); }
.bm.listo { box-shadow: inset 0 0 0 3px var(--oro), 0 0 26px rgba(226,176,74,.45); background: rgba(40,32,14,.9); }
.bm.peligro { background: var(--rojo); box-shadow: 0 0 30px rgba(216,50,60,.7); }
.bm.alerta-r { background: #b8742a; }
.bm.fantasmal, .acc.fantasmal { background: rgba(40,48,90,.85); box-shadow: inset 0 0 0 2px #9fb4ff; color: #dfe6ff; }
.bm[disabled] { opacity: .35; }
.bm .cd { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.6); font-size: 26px; }
.bm.peq { width: 56px; height: 56px; font-size: 9px; }
.bm.peq svg { width: 22px; height: 22px; }
.menu-sab-movil { position: absolute; right: var(--e-3); left: var(--e-3); bottom: calc(max(var(--e-4), env(safe-area-inset-bottom)) + 190px); min-width: 0; }
.menu-sab-movil button { display: grid; gap: 2px; padding: var(--e-3); font-size: 15px; }
.menu-sab-movil small { font-size: 11px; color: var(--texto-2); }
#mapa-grande { position: fixed; inset: 0; z-index: 15; background: rgba(6,7,11,.9); display: grid; place-items: center; }
#mapa-grande canvas { max-width: 94vw; max-height: 80vh; border-radius: var(--r-2); }
#mapa-grande .cerrar { position: absolute; top: max(var(--e-3), env(safe-area-inset-top)); right: var(--e-3); }

/* Un móvil tumbado: se pide ponerlo de pie (una tablet grande juega igual) */
#girar { position: fixed; inset: 0; z-index: 100; background: var(--tinta); display: none; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-4); text-align: center; padding: var(--e-5); }
#girar .icono { font-size: 64px; animation: girar 1.6s var(--curva) infinite; }
@keyframes girar { 0%, 30% { transform: rotate(-90deg); } 60%, 100% { transform: rotate(0); } }
@media (orientation: landscape) and (max-height: 520px) { body[data-disp="movil"] #girar { display: flex; } }

/* --- REUNIÓN --------------------------------------------------------------- */
#reunion { background: var(--tinta); z-index: 30; flex-direction: column; align-items: stretch; justify-content: flex-start; }
.splash { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-4);
  background: repeating-linear-gradient(-30deg, var(--rojo) 0 60px, var(--rojo-osc) 60px 120px); animation: splash 1.9s var(--curva) both; }
.splash .titulo { font-size: clamp(48px, 9vw, 120px); color: var(--papel); text-shadow: 6px 6px 0 #000; text-align: center; }
.splash img { width: 150px; height: 150px; filter: drop-shadow(0 10px 0 rgba(0,0,0,.4)); }
@keyframes splash { 0% { clip-path: inset(50% 0 50% 0); } 15% { clip-path: inset(0 0 0 0); } 85% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }

.cab-reunion { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); padding: var(--e-3) var(--e-5); background: var(--tinta-2); border-bottom: 3px solid var(--oro); }
.cab-reunion .titulo { font-size: 30px; color: var(--papel); }
.cab-reunion .motivo { font-size: 12px; color: var(--texto-2); }
.reloj-fase { display: flex; align-items: baseline; gap: var(--e-2); font-family: var(--f-titulo); letter-spacing: .1em; }
.reloj-fase .fase { color: var(--oro); font-size: 16px; }
.reloj-fase .seg { font-size: 34px; color: var(--papel); min-width: 2.2ch; text-align: right; }
.reloj-fase.urgente .seg { color: var(--rojo); }

.cuerpo-reunion { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.tablon { padding: var(--e-4); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-3); align-content: start; overflow: auto;
  background: #3a2a1c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Crect width='6' height='6' fill='%233a2a1c'/%3E%3Ccircle cx='1' cy='1' r='.6' fill='%234a3826'/%3E%3C/svg%3E"); }
.ficha { position: relative; background: var(--papel); color: var(--tinta); border-radius: 2px; padding: var(--e-2); box-shadow: 0 6px 14px rgba(0,0,0,.45); transform: rotate(var(--giro, 0deg)); transition: transform var(--dur-2) var(--curva), box-shadow var(--dur-2); text-align: left; }
.ficha::before { content: ''; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff7a7a, var(--rojo) 60%, #5a0f14); box-shadow: 0 2px 3px rgba(0,0,0,.5); }
.ficha .foto { position: relative; aspect-ratio: 1 / 1; background:
    repeating-linear-gradient(to bottom, transparent 0 11px, rgba(13,15,26,.35) 11px 12px),
    linear-gradient(#cfc5ae, #b8ad92); display: grid; place-items: center; overflow: hidden; }
.ficha .foto img { width: 86%; height: 86%; }
.ficha .foto .altura { position: absolute; right: 3px; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-around; font-size: 8px; color: rgba(13,15,26,.6); }
.ficha .placa { margin-top: var(--e-1); background: var(--tinta); color: var(--papel); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 2px var(--e-2); display: flex; justify-content: space-between; }
.ficha .votos { display: flex; flex-wrap: wrap; gap: 2px; min-height: 18px; margin-top: 3px; }
.ficha .votos img { width: 18px; height: 18px; }
.ficha .estado { position: absolute; left: -4px; right: -4px; top: 40%; text-align: center; font-family: var(--f-titulo); letter-spacing: .15em; font-size: 16px; background: #f2d34b; color: #111; transform: rotate(-12deg); box-shadow: 0 2px 4px rgba(0,0,0,.4); }
.ficha .estado.fuera { background: var(--tinta); color: var(--papel); }
.ficha.muerta .foto img { filter: grayscale(1) contrast(.8); opacity: .65; }
.ficha.votable { cursor: pointer; }
.ficha.votable:hover, .ficha.sel { transform: rotate(0) translateY(-4px) scale(1.03); box-shadow: 0 12px 24px rgba(0,0,0,.55), 0 0 0 3px var(--oro); z-index: 2; }
.ficha .ha-votado { position: absolute; top: 6px; left: 6px; background: var(--neon); color: var(--tinta); }
.ficha .yo { position: absolute; top: 6px; right: 6px; background: var(--oro); color: var(--tinta); }
.popover { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); z-index: 5; margin-top: var(--e-1); display: grid; gap: 2px; background: var(--tinta); padding: var(--e-1); border-radius: var(--r-1); box-shadow: 0 8px 20px rgba(0,0,0,.6), inset 0 0 0 1px var(--oro); min-width: 170px; }
.popover button { color: var(--papel); text-align: left; font-size: 12px; padding: var(--e-2); border-radius: 2px; }
.popover button:hover, .popover button:focus-visible { background: var(--tinta-3); }
.popover button.votar { background: var(--rojo); font-weight: 600; }

.lado-chat { display: flex; flex-direction: column; min-height: 0; background: var(--tinta-2); border-left: 1px solid rgba(239,230,210,.1); }
.chat { flex: 1; min-height: 0; overflow-y: auto; padding: var(--e-3); display: flex; flex-direction: column; gap: var(--e-2); }
.msg { display: grid; grid-template-columns: 32px 1fr; gap: var(--e-2); align-items: start; animation: entra var(--dur-2) var(--curva); }
.msg img { width: 32px; height: 32px; }
.msg .quien { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.msg .txt { font-size: 13px; line-height: 1.4; background: rgba(239,230,210,.06); padding: var(--e-1) var(--e-2); border-radius: 0 var(--r-2) var(--r-2) var(--r-2); }
.msg.mio .txt { background: rgba(226,176,74,.14); }
.msg.sistema { grid-template-columns: 1fr; text-align: center; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--oro); }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } }
.frases { display: flex; flex-wrap: wrap; gap: var(--e-1); padding: var(--e-2) var(--e-3); border-top: 1px solid rgba(239,230,210,.1); }
.frases button { font-size: 11px; padding: var(--e-1) var(--e-2); border-radius: var(--r-full); box-shadow: inset 0 0 0 1px var(--papel-3); color: var(--papel-2); }
.frases button:hover { background: var(--papel); color: var(--tinta); }
.escribir { display: flex; gap: var(--e-1); padding: 0 var(--e-3) var(--e-3); }
.escribir input { flex: 1; font: inherit; font-size: 13px; background: var(--tinta); color: var(--papel); border: 1px solid var(--papel-3); border-radius: var(--r-1); padding: var(--e-2); }
.escribir input:focus { outline: 2px solid var(--oro); outline-offset: 1px; }
.pie-reunion { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-2) var(--e-5); background: var(--tinta-2); border-top: 1px solid rgba(239,230,210,.1); font-size: 12px; color: var(--texto-2); }

/* Expulsión: la furgoneta en la carretera de noche */
.expulsion { position: absolute; inset: 0; z-index: 4; background: linear-gradient(#05060c 0 62%, #15141a 62% 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-5); overflow: hidden; animation: aparecer var(--dur-3) var(--curva); }
.expulsion .carretera { position: absolute; left: 0; right: 0; top: 70%; height: 6px; background: repeating-linear-gradient(90deg, var(--oro) 0 40px, transparent 40px 90px); animation: carretera .5s linear infinite; }
@keyframes carretera { to { background-position: -90px 0; } }
.expulsion .volando { position: absolute; top: 44%; width: 110px; animation: volar 2.4s cubic-bezier(.25,.6,.4,1) both; }
@keyframes volar { from { left: 58%; transform: rotate(0); } to { left: -20%; transform: rotate(-720deg) translateY(40px); } }
.expulsion .furgo { position: absolute; top: 50%; right: 12%; width: 210px; height: 90px; background: var(--papel-2); border-radius: 14px 30px 6px 6px; box-shadow: inset -60px 0 0 #b9ad8f; }
.expulsion .furgo::after { content: ''; position: absolute; left: 30px; bottom: -14px; width: 150px; height: 28px; background: radial-gradient(circle at 20px 14px, #111 12px, transparent 13px), radial-gradient(circle at 130px 14px, #111 12px, transparent 13px); }
.expulsion .texto { position: relative; font-size: clamp(22px, 3.2vw, 38px); color: var(--papel); text-align: center; }
.expulsion .sello { font-size: clamp(34px, 6vw, 72px); position: relative; background: rgba(5,6,12,.6); }

/* Reunión en móvil (vertical): una sola columna — cabecera, pruebas, turno,
   fichas en dos filas de cuatro, chat y frases al alcance del pulgar */
body[data-disp="movil"] .cab-reunion { padding: max(var(--e-2), env(safe-area-inset-top)) var(--e-3) var(--e-2); }
body[data-disp="movil"] .cab-reunion .titulo { font-size: 20px; }
body[data-disp="movil"] .cab-reunion .motivo { font-size: 11px; }
body[data-disp="movil"] .reloj-fase { flex-direction: column; align-items: flex-end; gap: 0; }
body[data-disp="movil"] .reloj-fase .fase { font-size: 12px; }
body[data-disp="movil"] .reloj-fase .seg { font-size: 26px; }
body[data-disp="movil"] .cuerpo-reunion { display: flex; flex-direction: column; }
body[data-disp="movil"] .tablon { flex: none; padding: var(--e-3) var(--e-2) var(--e-2); gap: var(--e-2) var(--e-2); overflow: visible; }
body[data-disp="movil"] .ficha { padding: 3px; }
body[data-disp="movil"] .ficha .foto .altura { display: none; }
body[data-disp="movil"] .ficha .placa { font-size: 9px; padding: 1px 3px; letter-spacing: .06em; }
body[data-disp="movil"] .ficha .placa span + span { display: none; }
body[data-disp="movil"] .ficha .votos { min-height: 12px; }
body[data-disp="movil"] .ficha .votos img { width: 12px; height: 12px; }
body[data-disp="movil"] .ficha .estado { font-size: 10px; }
body[data-disp="movil"] .ficha .chip { font-size: 8px; padding: 0 4px; top: 3px; }
body[data-disp="movil"] .lado-chat { flex: 1; min-height: 0; border-left: 0; border-top: 1px solid rgba(239,230,210,.1); }
body[data-disp="movil"] .chat { padding: var(--e-2) var(--e-3); }
body[data-disp="movil"] .msg { grid-template-columns: 26px 1fr; }
body[data-disp="movil"] .msg img { width: 26px; height: 26px; }
body[data-disp="movil"] .msg.sistema { grid-template-columns: 1fr; }
body[data-disp="movil"] .ficha .foto { aspect-ratio: 5 / 4; }
body[data-disp="movil"] .ficha .foto img { width: 74%; height: 92%; }
body[data-disp="movil"] .msg .txt { font-size: 13px; }
body[data-disp="movil"] .frases { flex-wrap: nowrap; overflow-x: auto; padding: var(--e-2) var(--e-3); scrollbar-width: none; }
body[data-disp="movil"] .frases button { flex: none; font-size: 13px; padding: var(--e-2) var(--e-3); }
body[data-disp="movil"] .escribir { display: none; }
body[data-disp="movil"] .pie-reunion { padding: var(--e-2) var(--e-3) max(var(--e-2), env(safe-area-inset-bottom)); font-size: 11px; }
body[data-disp="movil"] .popover { position: fixed; left: 0; right: 0; top: auto; bottom: 0; transform: none; width: auto; margin: 0; z-index: 50; padding: var(--e-3) var(--e-3) max(var(--e-3), env(safe-area-inset-bottom)); grid-template-columns: 1fr; gap: var(--e-1); border-radius: var(--r-2) var(--r-2) 0 0; animation: sube var(--dur-2) var(--curva); }
@keyframes sube { from { transform: translateY(100%); } }
body[data-disp="movil"] .popover button { font-size: 16px; padding: var(--e-3); }
.pop-titulo { display: flex; align-items: center; gap: var(--e-2); font-family: var(--f-titulo); font-size: 20px; letter-spacing: .06em; text-transform: uppercase; padding: 0 var(--e-2) var(--e-1); }
.pop-titulo img { width: 36px; height: 36px; }
.popover .cerrar-pop { color: var(--texto-2); text-align: center; }
body[data-disp="movil"] .pruebas { padding: var(--e-2) var(--e-3); }
body[data-disp="movil"] .turno-barra { padding: var(--e-2) var(--e-3); font-size: 12px; }
body[data-disp="movil"] .turno-barra .btn { font-size: 14px; padding: var(--e-2) var(--e-3); }

/* --- FIN ------------------------------------------------------------------- */
#fin { z-index: 40; background: var(--tinta); overflow: auto; align-items: flex-start; padding: var(--e-5); }
.cartel-fin { width: min(1000px, 100%); margin: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-6); align-items: start; }
.cartel-fin .izq { display: grid; gap: var(--e-4); justify-items: start; }
.cartel-fin .gana { font-size: clamp(46px, 7vw, 96px); color: var(--papel); text-shadow: 5px 5px 0 var(--rojo); }
.cartel-fin.rata .gana { text-shadow: 5px 5px 0 #000; color: var(--rojo); }
.cartel-fin .motivo { font-size: 14px; color: var(--oro); line-height: 1.5; }
.cartel-fin .tu { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.cartel-fin .revela { display: flex; align-items: center; gap: var(--e-4); background: var(--papel); color: var(--tinta); padding: var(--e-3) var(--e-4) var(--e-3) var(--e-3); border-radius: 2px; transform: rotate(-2deg); box-shadow: 6px 6px 0 var(--rojo); }
.cartel-fin .revela img { width: 88px; height: 88px; background: repeating-linear-gradient(to bottom, transparent 0 9px, rgba(13,15,26,.3) 9px 10px), #cfc5ae; }
.cartel-fin .revela .quien { font-family: var(--f-titulo); font-size: 34px; text-transform: uppercase; }
.cartel-fin .revela small { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.cronologia h3 { font-family: var(--f-titulo); font-weight: 400; letter-spacing: .15em; color: var(--oro); font-size: 20px; margin-bottom: var(--e-3); }
.cronologia ol { list-style: none; display: grid; gap: 0; border-left: 2px solid var(--tinta-3); max-height: 62vh; overflow: auto; }
.cronologia li { display: grid; grid-template-columns: 4.5ch 1fr; gap: var(--e-3); font-size: 12px; line-height: 1.4; padding: var(--e-1) 0 var(--e-1) var(--e-3); position: relative; }
.cronologia li::before { content: ''; position: absolute; left: -6px; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--tinta-3); }
.cronologia li .t { color: var(--texto-2); }
.cronologia li.rata::before, .cronologia li.atado::before { background: var(--rojo); }
.cronologia li.rata .x, .cronologia li.atado .x { color: #ff8a90; }
.cronologia li.reunion::before { background: var(--oro); }
.cronologia li.expulsion::before { background: var(--papel); }
.cronologia li.fin .x { font-weight: 600; color: var(--papel); }
body[data-disp="movil"] #fin { padding: var(--e-3) max(var(--e-4), env(safe-area-inset-right)) var(--e-3) max(var(--e-4), env(safe-area-inset-left)); }
body[data-disp="movil"] .cartel-fin { gap: var(--e-4); grid-template-columns: 1fr; }
body[data-disp="movil"] .cartel-fin .gana { font-size: 44px; }
body[data-disp="movil"] .cronologia ol { max-height: 46vh; }

/* ==========================================================================
   SELECTOR DE MAPAS — agrupados por país (plan: uno o dos mapas por país)
   ========================================================================== */
#menu .mapas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--e-2) var(--e-3); width: min(720px, 100%); align-items: stretch; }
#menu .pais { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--e-2); font-size: 11px; letter-spacing: .25em; text-transform: uppercase; color: var(--texto-2); text-align: left; margin-top: var(--e-1); }
.bandera { display: inline-block; width: 22px; height: 15px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.4); flex: none; }
.bandera.simbolo { width: auto; height: auto; box-shadow: none; font-size: 15px; letter-spacing: 0; color: var(--oro); }
.mapa-pais { display: none; align-items: center; gap: var(--e-1); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--texto-2); }
.mapa-pais .bandera { width: 16px; height: 11px; }
.mapa { display: grid; gap: 2px; text-align: left; padding: var(--e-3) var(--e-4); border-radius: var(--r-1); box-shadow: inset 0 0 0 2px var(--papel-3); background: rgba(0,0,0,.3); transition: transform var(--dur-1) var(--curva), box-shadow var(--dur-1); }
.mapa:hover { transform: translateY(-2px); }
.mapa[aria-checked="true"] { box-shadow: inset 0 0 0 3px var(--oro), 4px 4px 0 var(--rojo); background: rgba(0,0,0,.55); }
.mapa-nombre { font-family: var(--f-titulo); font-size: 22px; letter-spacing: .04em; text-transform: uppercase; color: var(--papel); }
.mapa-sub { font-size: 11px; color: var(--texto-2); }
.mapa-pueblo .mapa-nombre { font-family: 'Rye', 'Anton', serif; color: #f2b705; }
.mapa-casino .mapa-nombre { font-family: 'Anton', Impact, sans-serif; }

/* ==========================================================================
   TEMA · FIESTAS DEL PUEBLO — cartel de toros, cal, albero y verbena
   ========================================================================== */
body[data-escenario="pueblo"] {
  --tinta: #15100d;
  --tinta-2: #221813;
  --tinta-3: #3a2a20;
  --papel: #f7eedb;
  --papel-2: #e8dcc0;
  --papel-3: #c2b08e;
  --rojo: #c8102e;
  --rojo-osc: #7a0a1c;
  --oro: #f2b705;
  --neon: #4c8fe8;
  --texto: #f7eedb;
  --texto-2: #cbb99a;
  --f-titulo: 'Rye', 'Anton', Georgia, serif;
}
body[data-escenario="pueblo"] #menu {
  background:
    radial-gradient(ellipse at 50% 120%, rgba(242,183,5,.25) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 20%, #3a1a14 0%, var(--tinta) 65%);
}
/* Banderines de verbena colgando arriba del menú */
body[data-escenario="pueblo"] #menu::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 34px; pointer-events: none;
  background:
    linear-gradient(135deg, transparent 50%, var(--tinta) 50%) 0 0 / 28px 28px repeat-x,
    linear-gradient(225deg, transparent 50%, var(--tinta) 50%) 0 0 / 28px 28px repeat-x,
    linear-gradient(90deg, #c8102e 0 25%, #f2b705 25% 50%, #2f8a4f 50% 75%, #1f5fae 75%) 0 0 / 112px 28px repeat-x;
  filter: drop-shadow(0 3px 2px rgba(0,0,0,.4));
}
body[data-escenario="pueblo"] #menu .logo { font-size: clamp(64px, 13vw, 160px); color: #f2b705; text-shadow: 5px 5px 0 var(--rojo), 10px 10px 0 rgba(0,0,0,.4); }
body[data-escenario="pueblo"] #menu .logo span { color: var(--papel); text-shadow: 5px 5px 0 var(--rojo); }
body[data-escenario="pueblo"] #menu .lema::before { content: 'Grandes fiestas · '; color: var(--papel); }
body[data-escenario="pueblo"] .btn { box-shadow: 4px 4px 0 var(--oro); }
body[data-escenario="pueblo"] .btn.rojo { box-shadow: 4px 4px 0 var(--oro); }
body[data-escenario="pueblo"] #intro.rata { background: radial-gradient(ellipse at center, #1f4a2a 0%, #0b1a10 70%); } /* verde Guardia Civil */
body[data-escenario="pueblo"] .splash { background: repeating-linear-gradient(-30deg, #c8102e 0 60px, #f2b705 60px 120px); }
body[data-escenario="pueblo"] .splash .titulo { color: var(--papel); text-shadow: 4px 4px 0 #000; }
body[data-escenario="pueblo"] .tablon { background: #5a3a1f repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 2px, transparent 2px 80px); } /* la barra del Bar Manolo */
body[data-escenario="pueblo"] .cab-reunion { border-bottom-color: var(--rojo); }
body[data-escenario="pueblo"] .plan { box-shadow: inset 0 0 0 1px rgba(242,183,5,.5); }
body[data-escenario="pueblo"] .plan .barra i { background: repeating-linear-gradient(-45deg, #c8102e 0 8px, #f2b705 8px 16px); }
body[data-escenario="pueblo"] .cartel-fin .gana { text-shadow: 4px 4px 0 var(--rojo); }
body[data-escenario="pueblo"] .cartel-fin.rata .gana { color: #2f8a4f; text-shadow: 4px 4px 0 #000; }

/* La letra de cartel de toros es muy ancha: en botones y avisos del HUD,
   la estrecha de siempre para que quepa */
body[data-escenario="pueblo"] .acc, body[data-escenario="pueblo"] .bm, body[data-escenario="pueblo"] .alerta,
body[data-escenario="pueblo"] .plan .etq, body[data-escenario="pueblo"] .reloj-fase { font-family: 'Anton', Impact, sans-serif; }
/* ==========================================================================
   TEMA · EL CHIRINGUITO — cartel turístico de los 70, noche de verano
   ========================================================================== */
body[data-escenario="playa"] {
  --tinta: #0a1a26;
  --tinta-2: #112838;
  --tinta-3: #1c3a4f;
  --papel: #fff4e0;
  --papel-2: #f3e1bf;
  --papel-3: #c9b28a;
  --rojo: #e8433b;
  --rojo-osc: #8a1f1a;
  --oro: #ffc93c;
  --neon: #3ec7c2;
  --texto: #fff4e0;
  --texto-2: #b9c8cf;
  --f-titulo: 'Shrikhand', 'Anton', Georgia, serif;
}
/* El sol poniéndose en franjas, como los carteles de «Spain is different» */
body[data-escenario="playa"] #menu {
  background:
    radial-gradient(circle at 50% 108%, #ffc93c 0 12%, #f28a2e 12% 17%, #e8433b 17% 22%, #b8306a 22% 27%, transparent 27%),
    linear-gradient(#0a1a26 0%, #10283a 55%, #1c3a4f 100%);
}
body[data-escenario="playa"] #menu .logo { color: var(--oro); text-shadow: 4px 4px 0 var(--rojo), 8px 8px 0 #0a1a26; font-size: clamp(60px, 12vw, 150px); letter-spacing: .01em; }
body[data-escenario="playa"] #menu .logo span { color: var(--papel); text-shadow: 4px 4px 0 var(--neon), 8px 8px 0 #0a1a26; }
body[data-escenario="playa"] #menu .lema::before { content: 'Noche de verano · '; color: var(--neon); }
body[data-escenario="playa"] .btn, body[data-escenario="playa"] .btn.rojo { box-shadow: 4px 4px 0 var(--neon); }
body[data-escenario="playa"] #intro.rata { background: radial-gradient(ellipse at center, #1b2a4a 0%, #070b16 70%); }
body[data-escenario="playa"] .splash { background: repeating-linear-gradient(-30deg, #3ec7c2 0 60px, #f7eedb 60px 120px); }
body[data-escenario="playa"] .splash .titulo { color: var(--rojo); text-shadow: 4px 4px 0 #0a1a26; }
body[data-escenario="playa"] .tablon { background: #b8894a repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 3px, transparent 3px 9px); } /* la barra de cañizo */
body[data-escenario="playa"] .cab-reunion { border-bottom-color: var(--neon); }
body[data-escenario="playa"] .plan .barra i { background: repeating-linear-gradient(-45deg, #e8433b 0 8px, #fff4e0 8px 16px); }
body[data-escenario="playa"] .acc, body[data-escenario="playa"] .bm, body[data-escenario="playa"] .alerta,
body[data-escenario="playa"] .plan .etq, body[data-escenario="playa"] .reloj-fase { font-family: 'Anton', Impact, sans-serif; }
.mapa-playa .mapa-nombre { font-family: 'Shrikhand', 'Anton', serif; color: #ffc93c; text-transform: none; }
.alerta.marea { background: #1d5f7a; color: #fff4e0; box-shadow: 0 0 30px rgba(62,199,194,.45); animation: none; }

/* Expulsión en la playa: mar adentro en el flotador de patito */
.expulsion.mar { background: linear-gradient(#050b14 0 55%, #0e3148 55% 100%); }
.expulsion.mar .carretera { display: none; }
.expulsion .luna { position: absolute; top: 12%; right: 14%; width: 70px; height: 70px; border-radius: 50%; background: #fff4e0; box-shadow: 0 0 60px 10px rgba(255,244,224,.25); }
.expulsion .olas { position: absolute; left: 0; right: 0; top: 55%; height: 45%; background: repeating-linear-gradient(0deg, transparent 0 22px, rgba(255,255,255,.07) 22px 24px); }
.expulsion .flotando { position: absolute; top: 47%; width: 100px; animation: flotar 3.6s ease-in both; }
.expulsion .flotando::after { content: ''; }
@keyframes flotar { 0% { left: 42%; transform: translateY(0) rotate(0); } 25% { transform: translateY(-8px) rotate(-6deg); } 50% { transform: translateY(0) rotate(5deg); } 75% { transform: translateY(-6px) rotate(-4deg) scale(.7); } 100% { left: 85%; transform: translateY(-40px) scale(.2); opacity: .2; } }

.alerta.siesta { background: #d9a441; color: #3a2a10; box-shadow: 0 0 30px rgba(242,183,5,.5); animation: none; }
.msg.vecina .txt { background: rgba(200,200,210,.12); font-style: italic; }

/* Expulsión en el pueblo: «se va a por tabaco» */
.expulsion.tabaco { background: linear-gradient(#0b0a12 0 62%, #2a241e 62% 100%); }
.expulsion.tabaco .carretera { background: repeating-linear-gradient(90deg, #6f6558 0 30px, #5b554d 30px 34px); height: 10px; animation: none; }
.expulsion .andando { position: absolute; top: 46%; width: 100px; animation: andar 3.4s linear both; }
@keyframes andar { from { left: 20%; transform: translateY(0); } 25% { transform: translateY(-4px); } 50% { transform: translateY(0); } 75% { transform: translateY(-4px); } to { left: 110%; transform: translateY(0); } }
.expulsion .estanco { position: absolute; top: 34%; right: 6%; font-family: var(--f-titulo); color: #f2b705; background: #7a0a1c; padding: var(--e-1) var(--e-3); letter-spacing: .1em; box-shadow: 0 0 24px rgba(242,183,5,.5); }
.expulsion .farola-exp { position: absolute; top: 20%; left: 12%; width: 6px; height: 44%; background: #2d3336; }
.expulsion .farola-exp::after { content: ''; position: absolute; top: -10px; left: -10px; width: 26px; height: 26px; border-radius: 50%; background: #ffe7a8; box-shadow: 0 0 60px 20px rgba(255,231,168,.35); }

/* ==========================================================================
   JUGAR EN LÍNEA — entrar y sala de espera
   ========================================================================== */
#sala { z-index: 45; background:
    repeating-linear-gradient(-35deg, transparent 0 46px, rgba(216,50,60,.06) 46px 92px),
    radial-gradient(ellipse at 30% 20%, var(--tinta-3) 0%, var(--tinta) 65%);
  overflow-y: auto; justify-content: safe center; padding: var(--e-5); }
.en-linea { width: min(640px, 100%); display: grid; gap: var(--e-4); justify-items: start; }
.en-linea-titulo { font-size: clamp(40px, 7vw, 72px); color: var(--papel); text-shadow: 4px 4px 0 var(--rojo); }
.en-linea-sub { color: var(--texto-2); max-width: 52ch; line-height: 1.5; }
.campo { display: grid; gap: var(--e-1); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--texto-2); }
.campo input { font: inherit; font-size: 18px; letter-spacing: .04em; text-transform: none; color: var(--papel); background: var(--tinta); border: 2px solid var(--papel-3); border-radius: var(--r-1); padding: var(--e-2) var(--e-3); min-width: 0; }
.campo input:focus { outline: 3px solid var(--oro); outline-offset: 1px; }
.campo.codigo input { width: 7.5ch; font-family: var(--f-titulo); font-size: 28px; letter-spacing: .25em; text-transform: uppercase; text-align: center; }
.fila-en-linea { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-3); }
.fila-en-linea .o { color: var(--texto-2); padding-bottom: var(--e-3); }
.error-linea { color: #ff8a90; min-height: 1.4em; font-size: 13px; }
.aviso-sin-servidor { font-size: 12px; color: var(--texto-2); }
.aviso-sin-servidor code { color: var(--oro); }

.sala-espera { width: min(1040px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--e-5); align-items: start; }
.sala-codigo { display: grid; gap: var(--e-3); justify-items: start; background: var(--tinta-2); padding: var(--e-4); border-radius: var(--r-2); box-shadow: inset 0 0 0 1px rgba(239,230,210,.12); }
.sala-codigo p { font-size: 13px; color: var(--texto-2); line-height: 1.5; }
.sala-codigo p b { color: var(--papel); word-break: break-all; }
.codigo-grande { font-family: var(--f-titulo); font-size: clamp(56px, 9vw, 96px); letter-spacing: .18em; line-height: 1; color: var(--papel); text-shadow: 5px 5px 0 var(--rojo); }
.sala-espera .etq { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--texto-2); }
.mapa-sala { display: grid; gap: var(--e-2); width: 100%; }
.mapas-sala { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.mapa-mini { font-size: 12px; font-weight: 600; padding: var(--e-2) var(--e-3); border-radius: var(--r-1); box-shadow: inset 0 0 0 2px var(--papel-3); color: var(--papel-2); }
.mapa-mini.activo { background: var(--papel); color: var(--tinta); box-shadow: 3px 3px 0 var(--rojo); }
.mapa-elegido { font-family: var(--f-titulo); font-size: 22px; color: var(--oro); text-transform: uppercase; }
.sala-banda { display: grid; gap: var(--e-3); }
.huecos { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-2); }
.hueco { display: grid; justify-items: center; gap: 2px; background: var(--tinta-2); border-radius: var(--r-2); padding: var(--e-2) var(--e-1); text-align: center; min-width: 0; box-shadow: inset 0 0 0 1px rgba(239,230,210,.1); }
.hueco img { width: 64px; height: 64px; }
.hueco .quien { font-size: 13px; font-weight: 600; color: var(--papel); overflow-wrap: anywhere; }
.hueco .color { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); }
.hueco.yo { box-shadow: inset 0 0 0 2px var(--oro); }
.hueco.bot { opacity: .45; }
.hueco.bot img { filter: grayscale(.8); }
.hueco.caido { opacity: .6; }
.chip.anfi { background: var(--oro); color: var(--tinta); font-size: 9px; padding: 0 5px; }
.acciones-sala { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }
.esperando { color: var(--oro); font-size: 13px; }
body[data-disp="movil"] #sala { padding: var(--e-3) max(var(--e-4), env(safe-area-inset-right)) var(--e-3) max(var(--e-4), env(safe-area-inset-left)); }
body[data-disp="movil"] .sala-espera { gap: var(--e-3); }
body[data-disp="movil"] .codigo-grande { font-size: 52px; }
body[data-disp="movil"] .hueco img { width: 44px; height: 44px; }
body[data-disp="movil"] .en-linea { gap: var(--e-3); }
body[data-disp="movil"] .en-linea-titulo { font-size: 40px; }
@media (max-width: 640px) { .sala-espera { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* ==========================================================================
   F3 — PISTAS, TURNOS, CUADERNO Y MINIJUEGOS
   ========================================================================== */
/* Pruebas encima de la mesa: etiquetas de expediente */
.pruebas { display: flex; gap: var(--e-2); padding: var(--e-2) var(--e-5); background: #2a1f15; border-bottom: 1px solid rgba(226,176,74,.25); overflow-x: auto; scrollbar-width: none; flex: none; }
.prueba { flex: none; display: grid; gap: 1px; background: var(--papel); color: var(--tinta); padding: var(--e-1) var(--e-3); border-radius: 2px; font-size: 13px; font-weight: 600; box-shadow: 2px 2px 0 rgba(0,0,0,.35); transform: rotate(-1deg); text-align: left; }
.prueba:nth-child(2n) { transform: rotate(1deg); }
.prueba i { font-style: normal; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--rojo-osc); }
.prueba.susurro { background: #dfe6ff; }
.prueba.susurro i { color: #3b4d9a; }
.prueba.vacia { background: transparent; color: var(--texto-2); box-shadow: none; font-weight: 400; }
.prueba.mis-pistas { background: var(--oro); cursor: pointer; align-content: center; }
/* Turno: a quién le toca */
.turno-barra { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-2) var(--e-5); background: var(--tinta-2); font-size: 13px; color: var(--texto-2); flex: none; min-height: 44px; }
.turno-barra b { color: var(--papel); }
.turno-barra.mio { background: var(--rojo-osc); color: var(--papel); }
.turno-barra .btn { font-size: 15px; padding: var(--e-2) var(--e-4); flex: none; }
.ficha.hablando { box-shadow: 0 6px 14px rgba(0,0,0,.45), 0 0 0 3px var(--neon); }
.ficha.hablando::after { content: '🗣'; position: absolute; bottom: -8px; right: -6px; font-size: 18px; }
.frases.apagadas { opacity: .4; }
.frases button:disabled { cursor: default; }
/* Cuaderno */
.cuaderno { position: absolute; inset: 0; z-index: 6; background: rgba(6,7,11,.75); display: grid; place-items: center; padding: var(--e-4); animation: aparecer var(--dur-2) var(--curva); }
.cuaderno-hoja { width: min(520px, 100%); max-height: 100%; overflow: auto; background: #f4ecd6 repeating-linear-gradient(to bottom, transparent 0 25px, rgba(47,111,224,.18) 25px 26px); color: var(--tinta); padding: var(--e-4) var(--e-4) var(--e-5) var(--e-6); border-radius: 2px; box-shadow: 8px 8px 0 rgba(0,0,0,.4); position: relative; }
.cuaderno-hoja::before { content: ''; position: absolute; left: 28px; top: 0; bottom: 0; width: 2px; background: rgba(216,50,60,.45); }
.cuaderno-hoja header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--e-2); }
.cuaderno-hoja .titulo { font-size: 26px; }
.cuaderno-hoja .btn.fantasma { color: var(--tinta); box-shadow: inset 0 0 0 2px var(--tinta); font-size: 14px; padding: var(--e-1) var(--e-3); }
.cuaderno-hoja h4 { font-family: var(--f-titulo); font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--rojo-osc); margin: var(--e-3) 0 var(--e-1); font-size: 14px; }
.cuaderno-hoja ul { list-style: none; display: grid; gap: 2px; font-size: 13px; line-height: 24px; }
.cuaderno-hoja .vistos li { display: grid; grid-template-columns: 24px 9ch 1fr; gap: var(--e-2); align-items: center; }
.cuaderno-hoja .vistos img { width: 24px; height: 24px; }
.cuaderno-hoja .vistos li.muerto { opacity: .5; text-decoration: line-through; }
.acc.fantasmal:not([disabled]):hover { box-shadow: inset 0 0 0 2px #dfe6ff, 0 0 18px rgba(159,180,255,.5); }

/* Minijuegos: una caja de herramientas sobre el juego */
.minijuego-capa { position: fixed; inset: 0; z-index: 25; display: grid; place-items: center; background: rgba(6,7,11,.55); padding: var(--e-4); animation: aparecer var(--dur-2) var(--curva); }
.mj-caja { width: min(440px, 100%); background: var(--papel); color: var(--tinta); border-radius: var(--r-2); box-shadow: 6px 6px 0 var(--rojo), 0 20px 50px rgba(0,0,0,.6); overflow: hidden; display: flex; flex-direction: column; }
.mj-caja.ok { box-shadow: 6px 6px 0 #2fa75a, 0 20px 50px rgba(0,0,0,.6); }
.mj-cab { display: flex; justify-content: space-between; align-items: center; gap: var(--e-2); background: var(--tinta); color: var(--papel); padding: var(--e-2) var(--e-3); }
.mj-titulo { font-family: var(--f-titulo); letter-spacing: .06em; text-transform: uppercase; font-size: 18px; }
.mj-cerrar { font-size: 12px; color: var(--texto-2); padding: var(--e-2); }
.mj-cuerpo { padding: var(--e-4); touch-action: none; }
.mj-pie { padding: 0 var(--e-4) var(--e-4); display: grid; gap: var(--e-2); }
.mj-ayuda { font-size: 13px; font-weight: 600; }
.mj-barra { height: 6px; background: rgba(13,15,26,.15); border-radius: var(--r-full); overflow: hidden; }
.mj-barra i { display: block; height: 100%; width: 0; background: var(--rojo); transition: width var(--dur-2) linear; }
.mj-caja.ok .mj-barra i { background: #2fa75a; }
/* cables */
.mj-cables { position: relative; display: flex; justify-content: space-between; height: 250px; padding: 0 var(--e-2); background: #2b2f36; border-radius: var(--r-1); }
.mj-cables svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mj-cables .col { display: flex; flex-direction: column; justify-content: space-around; }
.enchufe { width: 44px; height: 44px; border-radius: var(--r-1); background: var(--c); box-shadow: inset 0 -5px 0 rgba(0,0,0,.3), 0 0 0 3px #111; position: relative; z-index: 1; touch-action: none; }
.enchufe.unido { box-shadow: inset 0 -5px 0 rgba(0,0,0,.3), 0 0 0 3px #efe6d2; }
/* combinación */
.mj-combi { display: grid; grid-template-columns: auto 1fr; gap: var(--e-3); align-items: start; }
.papelito { grid-row: span 2; background: #fff7b0; padding: var(--e-2) var(--e-3); font-size: 11px; transform: rotate(-4deg); box-shadow: 2px 3px 6px rgba(0,0,0,.25); display: grid; gap: var(--e-1); }
.papelito b { font-family: var(--f-titulo); font-size: 24px; letter-spacing: .08em; }
.pantallita { background: #10150f; color: #6cff8a; font-family: var(--f-mono); font-size: 26px; letter-spacing: .2em; text-align: center; padding: var(--e-2); border-radius: var(--r-1); }
.pantallita.bien { color: #b8ffc6; }
.pantallita.mal { color: var(--rojo); animation: sacude .3s; }
@keyframes sacude { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.teclado { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-2); }
.teclado button { font-family: var(--f-titulo); font-size: 24px; padding: var(--e-3) 0; background: var(--tinta); color: var(--papel); border-radius: var(--r-1); box-shadow: 0 3px 0 #000; }
.teclado button:active { transform: translateY(2px); box-shadow: 0 1px 0 #000; }
/* llenar */
.mj-llenar { display: grid; grid-template-columns: 110px 1fr; gap: var(--e-4); align-items: end; }
.deposito { position: relative; height: 220px; border: 4px solid var(--tinta); border-top: 0; border-radius: 0 0 var(--r-2) var(--r-2); overflow: hidden; background: rgba(13,15,26,.06); }
.deposito .marca { position: absolute; left: 0; right: 0; background: rgba(47,167,90,.3); border-top: 2px dashed #2fa75a; border-bottom: 2px dashed #2fa75a; z-index: 1; }
.deposito .liquido { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(#e2b04a, #b8742a); }
.grifo { font-family: var(--f-titulo); text-transform: uppercase; letter-spacing: .06em; font-size: 18px; height: 120px; border-radius: var(--r-2); background: var(--rojo); color: var(--papel); box-shadow: 0 5px 0 var(--rojo-osc); touch-action: none; }
.grifo:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--rojo-osc); }
/* recoger */
.mj-recoger { position: relative; height: 240px; background: #3a2a1c; border-radius: var(--r-1); overflow: hidden; }
.pieza { position: absolute; width: 46px; height: 46px; border-radius: 8px; background: var(--oro); box-shadow: inset 0 -5px 0 rgba(0,0,0,.25), 0 3px 6px rgba(0,0,0,.4); transform: rotate(var(--g)); transition: transform var(--dur-2) var(--curva), opacity var(--dur-2); }
.pieza::after { content: ''; position: absolute; inset: 12px; border: 3px solid rgba(13,15,26,.5); border-radius: 50%; }
.pieza.cogida { transform: scale(0) rotate(90deg); opacity: 0; }
/* En el móvil, la caja sale de abajo, donde está el pulgar */
body[data-disp="movil"] .minijuego-capa { place-items: end stretch; padding: 0; }
body[data-disp="movil"] .mj-caja { width: 100%; border-radius: var(--r-2) var(--r-2) 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,.6); padding-bottom: env(safe-area-inset-bottom); animation: sube var(--dur-2) var(--curva); }
body[data-disp="movil"] .mj-caja.ok { box-shadow: 0 -4px 0 #2fa75a, 0 -10px 40px rgba(0,0,0,.6); }
body[data-disp="movil"] .mj-cerrar { font-size: 14px; }

/* Logo en el móvil: las letras del pueblo y de la playa son más anchas; se
   ajusta al ancho de la pantalla para que ENCERRADOS quepa en una línea */
body[data-disp="movil"][data-escenario="pueblo"] #menu .logo,
body[data-disp="movil"][data-escenario="playa"] #menu .logo { font-size: min(84px, calc((100vw - 40px) / 7.4)); }

/* Presentación del papel en el móvil en vertical */
body[data-disp="movil"] #intro { padding: var(--e-5) var(--e-4); text-align: center; }
body[data-disp="movil"] #intro .rol { font-size: min(96px, calc((100vw - 32px) / 4.6)); text-align: center; }
body[data-disp="movil"] #intro .mision { font-size: 14px; }
body[data-disp="movil"] #intro .banda { flex-wrap: wrap; justify-content: center; max-width: 100%; gap: var(--e-1); }
body[data-disp="movil"] #intro .banda img { width: 38px; height: 38px; }
body[data-disp="movil"] .expulsion .furgo { right: 4%; width: 170px; height: 74px; }

/* Botón de sonido */
.b-sonido { color: var(--papel); }
body[data-disp="pc"] .b-sonido { position: absolute; top: var(--e-3); right: calc(220px + var(--e-3) * 2); width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-1); background: rgba(13,15,26,.82); box-shadow: inset 0 0 0 1px rgba(239,230,210,.2); }
.b-sonido svg { width: 22px; height: 22px; }
.b-sonido.apagado { color: var(--texto-2); }
body[data-disp="movil"] .b-sonido svg { margin: 0; }

/* F4 · Escenas de la furgoneta */
.escena-llegada { width: min(900px, 100%); height: clamp(170px, 30vh, 300px); display: block; }
body[data-disp="movil"] .escena-llegada { height: 26vh; }
.expulsion { justify-content: flex-start; padding-top: 12vh; }
.expulsion .escena-expulsion { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.expulsion .texto, .expulsion .sello { z-index: 1; }
.expulsion .texto { text-shadow: 3px 3px 0 #000; padding: 0 var(--e-4); }

/* F4 · La repetición del final */
.cartel-fin .dcha { display: grid; gap: var(--e-4); min-width: 0; }
.repeticion h3 { font-family: var(--f-titulo); font-weight: 400; letter-spacing: .15em; color: var(--oro); font-size: 20px; margin-bottom: var(--e-2); }
.rep-lienzo { width: 100%; background: #06070b; border-radius: var(--r-1); box-shadow: inset 0 0 0 1px rgba(239,230,210,.15); overflow: hidden; }
.rep-lienzo canvas { display: block; width: 100%; height: auto; }
.rep-mandos { display: flex; align-items: center; gap: var(--e-2); margin-top: var(--e-2); }
.rep-mandos button { min-width: 40px; height: 36px; border-radius: var(--r-1); background: var(--papel); color: var(--tinta); font-weight: 600; font-size: 14px; }
.rep-mandos .rep-vel { background: transparent; color: var(--papel); box-shadow: inset 0 0 0 1px var(--papel-3); }
.rep-barra { position: relative; flex: 1; min-width: 0; }
.rep-barra input { width: 100%; accent-color: var(--oro); }
.rep-marcas { position: absolute; left: 0; right: 0; top: -4px; height: 6px; pointer-events: none; }
.rep-marcas i { position: absolute; width: 3px; height: 8px; margin-left: -1px; background: var(--oro); }
.rep-marcas i.atado { background: var(--rojo); }
.rep-reloj { font-variant-numeric: tabular-nums; font-size: 13px; min-width: 4ch; text-align: right; color: var(--texto-2); }
.cronologia li.ahora { background: rgba(226,176,74,.16); }
.cronologia li.ahora .x { color: var(--papel); }
.cronologia ol { max-height: 34vh; }