html, body {
  margin: 0;
  height: 100%;
  background: #0c1720;
  overflow: hidden;
  font-family: "Cascadia Mono", Consolas, ui-monospace, monospace;
  color: #e6eeee;
  /* EN UN MÓVIL, UN ARRASTRE SOBRE EL MAPA NO PUEDE REBOTAR LA PÁGINA. Sin
     esto, arrastrar hacia abajo recarga la página en Chrome de Android y en iOS
     estira todo con el rebote elástico, justo cuando se está intentando mover
     el mundo. */
  overscroll-behavior: none;
  /* Y un toque doble sobre el mapa no debe acercar el TEXTO de la página: el
     zoom lo lleva el pellizco, que va contra la cámara del juego. */
  touch-action: none;
  -webkit-text-size-adjust: 100%;
}

/* El mundo ocupa la pantalla entera. Nada de instrucciones ni de cartelitos
   encima: esto se ve en un directo, y todo lo que no sea el juego estorba. Lo
   único que hay es lo que se pulsa. */
canvas {
  display: block;
  image-rendering: pixelated;
  cursor: grab;
  /* El navegador no toca los gestos que caigan aquí: son todos del juego. Sin
     esto, el primer dedo que se mueve sobre el mapa hace scroll de la página y
     el arrastre se pierde a medias. */
  touch-action: none;
  /* Un arrastre largo no selecciona nada ni saca el resaltado azul del toque. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
canvas:active { cursor: grabbing; }

/* El único control a la vista: mapa o planeta. Cristal oscuro y desenfocado
   para que se apoye sobre cualquier parte del mundo sin ensuciarlo. */
#vista {
  position: fixed;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid rgba(150, 220, 245, 0.28);
  border-radius: 999px;
  background: rgba(10, 22, 32, 0.55);
  backdrop-filter: blur(10px);
  color: #cfe9f4;
  font: 600 12px/1 "Cascadia Mono", Consolas, ui-monospace, monospace;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
}

#vista:hover {
  background: rgba(22, 48, 66, 0.72);
  border-color: rgba(170, 235, 255, 0.55);
  transform: translateY(-1px);
}

#vista:active { transform: translateY(0); }

#vista:focus-visible {
  outline: 2px solid rgba(170, 235, 255, 0.9);
  outline-offset: 2px;
}

#vista-icono { font-size: 15px; line-height: 1; color: #8fd9f5; }

/* EL PLANETA GIRANDO SOLO. Junto al botón de vista y con su mismo aspecto: es
   el otro control de esta pantalla, y solo existe cuando se está mirando la
   bola. Encendido se ve encendido, como el resto de interruptores del juego. */
/* A la izquierda, al lado del botón de sonido: la fila de la derecha ya lleva
   dos y el cajón de la partida se abre por ese lado. */
#girar {
  position: fixed;
  top: 16px;
  left: 124px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid rgba(150, 220, 245, 0.28);
  border-radius: 999px;
  background: rgba(10, 22, 32, 0.55);
  backdrop-filter: blur(10px);
  color: #cfe9f4;
  font: 600 12px/1 "Cascadia Mono", Consolas, ui-monospace, monospace;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
  z-index: 5;
}

#girar span:first-child { font-size: 15px; line-height: 1; color: #8fd9f5; }
#girar:hover { background: rgba(22, 48, 66, 0.72); border-color: rgba(170, 235, 255, 0.55); }
#girar.encendido {
  background: rgba(40, 82, 106, 0.85);
  border-color: rgba(180, 240, 255, 0.7);
  color: #eaf7ff;
}
/* Girando, el icono gira: el botón dice lo que está pasando sin leerlo. */
#girar.encendido span:first-child { animation: girar-icono 4s linear infinite; }
#girar:focus-visible { outline: 2px solid rgba(170, 235, 255, 0.9); outline-offset: 2px; }
#girar[hidden] { display: none; }

@keyframes girar-icono {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  #girar.encendido span:first-child { animation: none; }
}

@media (max-width: 720px) {
  /* En el móvil el de sonido se queda en su icono, así que este cabe justo a su
     lado; y sin el rótulo, que ahí el ancho es oro. */
  #girar {
    top: max(10px, env(safe-area-inset-top));
    left: calc(max(10px, env(safe-area-inset-left)) + 58px);
    padding: 11px 13px;
  }
  #girar-texto { display: none; }
}

/* ------------------------------------------------------- el cajón de la partida
   Se despliega por la derecha. Mismo cristal oscuro que el botón: apoyado sobre
   el mundo, no encima de él. */
/* A LA IZQUIERDA, y no en la fila de la derecha con los otros dos: el cajón de
   la partida se abre por ese lado y se lo comía. Aquí no estorba a nada y sigue
   estando donde se mira primero. */
#sonido {
  position: fixed;
  top: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid rgba(150, 220, 245, 0.28);
  border-radius: 999px;
  background: rgba(10, 22, 32, 0.55);
  backdrop-filter: blur(10px);
  color: #cfe9f4;
  font: 600 12px/1 "Cascadia Mono", Consolas, ui-monospace, monospace;
  letter-spacing: 0.14em;
  cursor: pointer;
  z-index: 5;
  /* Apagado se ve apagado: hasta que no se pulsa, no suena nada. */
  opacity: 0.55;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s;
}

#sonido span { font-size: 14px; color: #8fd9f5; }
#sonido:hover { background: rgba(22, 48, 66, 0.72); border-color: rgba(170, 235, 255, 0.55); opacity: 0.8; }
#sonido.activo {
  opacity: 1;
  background: rgba(40, 82, 106, 0.85);
  border-color: rgba(180, 240, 255, 0.7);
}

#abrir-panel {
  position: fixed;
  top: 16px;
  right: 92px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid rgba(150, 220, 245, 0.28);
  border-radius: 999px;
  background: rgba(10, 22, 32, 0.55);
  backdrop-filter: blur(10px);
  color: #cfe9f4;
  font: 600 12px/1 "Cascadia Mono", Consolas, ui-monospace, monospace;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
}

#abrir-panel span { font-size: 14px; color: #8fd9f5; }
#abrir-panel:hover { background: rgba(22, 48, 66, 0.72); border-color: rgba(170, 235, 255, 0.55); }
#abrir-panel.activo { background: rgba(40, 82, 106, 0.85); border-color: rgba(180, 240, 255, 0.7); }
#abrir-panel:focus-visible, #panel button:focus-visible, #panel input:focus-visible {
  outline: 2px solid rgba(170, 235, 255, 0.9);
  outline-offset: 2px;
}

#panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(380px, 92vw);
  display: flex;
  flex-direction: column;
  background: rgba(8, 18, 27, 0.82);
  backdrop-filter: blur(16px);
  border-left: 1px solid rgba(150, 220, 245, 0.18);
  color: #d6e8f0;
  font: 12px/1.5 "Cascadia Mono", Consolas, ui-monospace, monospace;
  /* Fuera de la pantalla mientras está cerrado, y sin quitarle el ratón al mapa. */
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.26s;
}

#panel.abierto { transform: translateX(0); visibility: visible; }

/* Con el cajón abierto, los botones se apartan a su lado en vez de quedarse
   debajo. Se mueven con la misma curva que el panel, así que viajan juntos. */
body.con-panel #vista,
body.con-panel #abrir-panel {
  transform: translateX(calc(-1 * min(380px, 92vw)));
}

#vista, #abrir-panel {
  transition: background 0.18s, border-color 0.18s, transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

#panel-pestanas {
  display: flex;
  gap: 2px;
  padding: 20px 12px 0;
  flex: 0 0 auto;
}

#panel-pestanas button {
  flex: 1;
  padding: 9px 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: #7f9aa8;
  font: 600 11px/1 "Cascadia Mono", Consolas, ui-monospace, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

#panel-pestanas button:hover { color: #bfe0ee; }
#panel-pestanas button.activa { color: #eaf7ff; border-bottom-color: #58c8f0; }

#panel-cuerpo { flex: 1; overflow-y: auto; padding: 14px 14px 24px; }
#panel-cuerpo section { display: none; }
#panel-cuerpo section.activa { display: block; }

#panel .titular { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
#panel .ronda { font-size: 17px; font-weight: 700; color: #f0f8ff; letter-spacing: 0.04em; }
#panel .fase { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #7f9aa8; }
#panel .fase-votacion { color: #7fe0a8; }
#panel .fase-lanzamiento { color: #ff9a6a; }
#panel .fase-fin { color: #ffd166; }

#panel .etiqueta { margin: 0 0 8px; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #6f8896; }
#panel .vacio { color: #6f8896; font-style: italic; margin: 6px 0; }
#panel .ganador { font-size: 15px; color: #ffd166; }

#panel .ronda-item, #panel .pais, #panel .hallado {
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid rgba(140, 200, 225, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.028);
}

#panel header { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
#panel .ronda-item header span:first-child { font-weight: 700; color: #eaf7ff; }
#panel .muertos { color: #ff9a8a; font-weight: 700; }
#panel .datos { margin: 5px 0 0; color: #85a2b0; display: flex; gap: 12px; flex-wrap: wrap; }
#panel .caidos { margin: 6px 0 0; color: #ffd166; }

/* Los dos números que resumen la partida entera. */
#panel .panorama { display: flex; gap: 10px; margin-bottom: 16px; }
#panel .panorama div {
  flex: 1;
  padding: 12px;
  border: 1px solid rgba(140, 200, 225, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.028);
  text-align: center;
}
#panel .panorama b { display: block; font-size: 22px; color: #eaf7ff; letter-spacing: 0.02em; }
#panel .panorama span { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #6f8896; }
#panel .ronda-item .datos b { color: #eaf7ff; }

#panel .pais { cursor: pointer; transition: border-color 0.15s, background 0.15s; }
#panel .pais:hover { border-color: rgba(170, 235, 255, 0.42); background: rgba(255, 255, 255, 0.06); }
#panel .punto { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
#panel .nombre { flex: 1; color: #eaf7ff; font-weight: 600; }
#panel .vivos { font-weight: 700; color: #eaf7ff; }
#panel .barra { height: 3px; margin-top: 7px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
#panel .barra i { display: block; height: 100%; }
#panel .defiende { color: #8fd9f5; }
#panel .ataques { margin: 7px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
#panel .ataque { color: #ffb08a; }
#panel .ataque b { color: #ffd9c4; }

#panel .busca { display: block; margin-bottom: 12px; }
#panel input[type="search"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(150, 220, 245, 0.22);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.28);
  color: #eaf7ff;
  font: 12px "Cascadia Mono", Consolas, ui-monospace, monospace;
}

#panel .hallado.caido { opacity: 0.6; }
#panel .hallado.ir { cursor: pointer; }
#panel .hallado.ir:hover { border-color: rgba(170, 235, 255, 0.42); }
#panel .estado { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #7fe0a8; }
#panel .caido .estado { color: #ff9a8a; }
#panel .mata { color: #ff9a8a; }
#panel .fin { margin: 6px 0 0; color: #a8bcc7; }

/* ------------------------------------------------------ la barra del director
   Abajo, ancha y con un solo botón grande: el que toca ahora. En directo, con
   la cabeza en el chat, elegir entre seis botones parecidos es como se pulsa el
   que no era. */
#director {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid rgba(150, 220, 245, 0.28);
  border-radius: 16px;
  background: rgba(8, 18, 27, 0.78);
  backdrop-filter: blur(14px);
  color: #d6e8f0;
  font: 12px "Cascadia Mono", Consolas, ui-monospace, monospace;
}

/* Plegada, se va hacia abajo hasta dejar solo la pestañita asomando. El 100%
   es su propia altura, así que funciona sea cual sea el alto de la barra. */
#director.plegado { transform: translateX(-50%) translateY(calc(100% + 20px)); }

#dir-plegar {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  padding: 3px 0 !important;
  border-radius: 8px 8px 0 0 !important;
  font-size: 10px !important;
  line-height: 1;
  background: rgba(8, 18, 27, 0.92) !important;
  border-bottom-color: transparent !important;
}

/* Plegada, la pestaña sube por encima del borde para poder pulsarla. */
#director.plegado #dir-plegar { top: -34px; padding: 8px 0 !important; }

/* La salida del panel, en su propia pestañita arriba a la derecha. Fuera de la
   fila de botones a propósito: no se pulsa por error, y se encuentra a la
   primera cuando hace falta. */
#dir-salir {
  position: absolute;
  top: -14px;
  right: 14px;
  padding: 4px 12px !important;
  border-radius: 8px 8px 0 0 !important;
  border-bottom-color: transparent !important;
  font-size: 10px !important;
  letter-spacing: 0.08em;
  color: #9fb6c4;
}
#dir-salir:hover { color: #eaf7ff; }

#dir-llave { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* El aviso de contraseña rechazada. Sale solo cuando el servidor dice que no, y
   por eso puede permitirse ocupar sitio: es lo único que hay que leer en ese
   momento. */
#dir-llave .aviso {
  flex-basis: 100%;
  margin: 4px 0 0;
  max-width: 420px;
  color: #ffbfae;
  font-size: 11px;
  line-height: 1.5;
}
#dir-llave .aviso b { color: #ffe0d6; }

/* `hidden` no gana por sí solo a un `display` explícito, y sin esto el campo de
   la contraseña se quedaba en pantalla después de entrar. */
#director [hidden] { display: none; }

#director input[type="password"] {
  padding: 9px 12px;
  border: 1px solid rgba(150, 220, 245, 0.22);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.3);
  color: #eaf7ff;
  font: 12px "Cascadia Mono", Consolas, ui-monospace, monospace;
}

#dir-mando { display: flex; align-items: center; gap: 16px; }
#dir-estado { display: flex; flex-direction: column; gap: 3px; min-width: 190px; }
#dir-fase { font-size: 15px; color: #f0f8ff; letter-spacing: 0.03em; }
#dir-pie { font-size: 11px; color: #7f9aa8; }

#director button {
  padding: 9px 14px;
  border: 1px solid rgba(150, 220, 245, 0.28);
  border-radius: 9px;
  background: rgba(22, 44, 60, 0.7);
  color: #cfe9f4;
  font: 600 11px/1 "Cascadia Mono", Consolas, ui-monospace, monospace;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

#director button:hover:not(:disabled) { background: rgba(36, 72, 96, 0.9); border-color: rgba(170, 235, 255, 0.55); }
#director button:disabled { opacity: 0.45; cursor: default; }
#director button:focus-visible { outline: 2px solid rgba(170, 235, 255, 0.9); outline-offset: 2px; }

/* El botón grande cambia de color según lo que toque: la fase se reconoce sin
   leer, que es lo que hace falta cuando estás mirando otra cosa. */
#dir-paso {
  padding: 16px 30px;
  font-size: 14px;
  letter-spacing: 0.16em;
  border-radius: 12px;
}

#dir-paso[data-tono="entrando"] { background: rgba(34, 82, 74, 0.85); border-color: rgba(120, 235, 190, 0.5); color: #d6fff0; }
#dir-paso[data-tono="votando"] { background: rgba(30, 74, 96, 0.9); border-color: rgba(140, 225, 255, 0.55); color: #e2f7ff; }
#dir-paso[data-tono="lanzar"] { background: rgba(126, 44, 30, 0.92); border-color: rgba(255, 160, 120, 0.6); color: #ffe6dc; }
#dir-paso[data-tono="fin"] { background: rgba(112, 88, 24, 0.9); border-color: rgba(255, 214, 102, 0.55); color: #fff3d0; }
#dir-paso[data-tono="espera"] { background: rgba(30, 40, 50, 0.85); }

#dir-extras { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; max-width: 330px; }
#director .peligro { border-color: rgba(255, 140, 120, 0.35); color: #ffbfae; }

/* Un interruptor encendido se ve encendido: la salida por turnos cambia cómo se
   va a ver la próxima andanada entera, y hay que saberlo de un vistazo. */
#director .encendido {
  background: rgba(40, 82, 106, 0.9);
  border-color: rgba(180, 240, 255, 0.7);
  color: #eaf7ff;
}
#dir-velocidad { display: flex; align-items: center; gap: 6px; color: #7f9aa8; font-size: 11px; }

#director select {
  padding: 6px 8px;
  border: 1px solid rgba(150, 220, 245, 0.22);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  color: #eaf7ff;
  font: 11px "Cascadia Mono", Consolas, ui-monospace, monospace;
}

/* ------------------------------------------------- quién ataca en este turno
   Arriba y centrado, que es donde no hay nada y donde no tapa el mundo. Solo
   sale en el modo por turnos: es el rótulo de quien lanza ahora. */
#turno {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 9px 22px;
  border: 1px solid rgba(150, 220, 245, 0.18);
  border-radius: 12px;
  background: rgba(8, 16, 24, 0.68);
  backdrop-filter: blur(10px);
  pointer-events: none;
  user-select: none;
  text-align: center;
  z-index: 4;
}

#turno b {
  font: 700 19px/1.1 "Cascadia Mono", Consolas, ui-monospace, monospace;
  letter-spacing: 0.04em;
}

#turno i {
  color: #8ea8b6;
  font: 11px/1 "Cascadia Mono", Consolas, ui-monospace, monospace;
  font-style: normal;
  letter-spacing: 0.1em;
}

/* CONTRA QUIÉN VA LA ANDANADA. El cartel decía quién lanza y cuántos, y dejaba
   fuera lo único que hace falta para seguir la ronda: a quién. Cada objetivo
   con su color —el mismo que tiene en el mapa— y cuántos misiles le tocan. */
#turno .objetivos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 8px;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid rgba(150, 220, 245, 0.14);
  max-width: 42vw;
}

#turno .contra {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 600 12px/1 "Cascadia Mono", Consolas, ui-monospace, monospace;
  letter-spacing: 0.02em;
}

/* Cuántos le caen a ese, en su cápsula. Es el número que se lee de un vistazo
   para saber cuál de los tres objetivos es el de verdad. */
#turno .cuantos {
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  color: #eaf7ff;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

@keyframes turno-entra {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  #turno { animation: none !important; }
}

/* -------------------------------------------- lo que queda para votar
   En el mismo sitio que el cartel de turno, y nunca coinciden: uno es de la
   votación y el otro de la andanada. El número es lo único que hay que mirar
   mientras se decide, así que va grande y con la barra debajo — un número solo
   dice cuánto queda, pero una barra dice cuánto queda DE LO QUE HABÍA, que es
   lo que hace levantarse a votar. */
#reloj {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 8px 24px 10px;
  border: 1px solid rgba(150, 220, 245, 0.18);
  border-radius: 12px;
  background: rgba(8, 16, 24, 0.68);
  backdrop-filter: blur(10px);
  pointer-events: none;
  user-select: none;
  z-index: 4;
}

#reloj b {
  font: 700 30px/1 "Cascadia Mono", Consolas, ui-monospace, monospace;
  letter-spacing: 0.04em;
  color: #d6f0ff;
  /* Los dígitos no bailan al cambiar de cifra: un reloj que se ensancha en el
     0:09 llama la atención por el motivo equivocado. */
  font-variant-numeric: tabular-nums;
}

#reloj .barra {
  display: block;
  width: 120px;
  height: 3px;
  border-radius: 2px;
  background: rgba(150, 220, 245, 0.16);
  overflow: hidden;
}

#reloj .barra i {
  display: block;
  height: 100%;
  background: #7fd4f0;
  transform-origin: left center;
  /* Se escala, no se le cambia el ancho: así el navegador no rehace la
     maquetación sesenta veces por segundo. */
  will-change: transform;
}

/* LOS ÚLTIMOS DIEZ SEGUNDOS. Cambia de color y late: es el aviso de «o lo
   escribes ahora o no llegas», y llega a quien está mirando el mapa y no el
   reloj. */
#reloj.apuro b { color: #ffb4a2; animation: reloj-late 1s steps(1) infinite; }
#reloj.apuro .barra i { background: #e2564a; }
#reloj.apuro { border-color: rgba(226, 86, 74, 0.45); }

@keyframes reloj-late {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  #reloj.apuro b { animation: none; }
}

/* ------------------------------------------------------ la línea de comandos
   Lo único del juego que se dirige a quien está mirando: qué se escribe en el
   chat AHORA. Abajo y en pequeño, porque el mundo manda; centrado, porque es lo
   primero que busca quien acaba de entrar al directo.

   Cristal oscuro como todo lo demás, para que se apoye sobre el mar, sobre la
   ceniza o sobre el espacio sin cambiar de sitio ni de peso. */
#comandos {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(96vw, 1320px);
  flex-wrap: wrap;
  justify-content: center;
  padding: 8px 16px;
  border: 1px solid rgba(150, 220, 245, 0.22);
  border-radius: 999px;
  background: rgba(10, 22, 32, 0.62);
  backdrop-filter: blur(10px);
  font: 11px/1 "Cascadia Mono", Consolas, ui-monospace, monospace;
  /* Se mira, no se toca: no puede robarle el ratón al mundo que hay debajo. */
  pointer-events: none;
  user-select: none;
}

#comandos b {
  color: #7fd4f0;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.18em;
}

#comandos .orden { display: flex; align-items: center; gap: 7px; }

/* El comando, con el aspecto de lo que es: algo que se copia tal cual. */
#comandos code {
  padding: 5px 9px;
  border: 1px solid rgba(150, 220, 245, 0.28);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.34);
  color: #eaf7ff;
  font: 600 12px/1 "Cascadia Mono", Consolas, ui-monospace, monospace;
  white-space: nowrap;
}

/* Atacar y defender son las dos decisiones de la partida, y se distinguen por
   el color antes que por el texto: rojo el que sale, azul el que aguanta. */
#comandos .atacar code { border-color: rgba(255, 150, 120, 0.5); color: #ffdccf; }
#comandos .defender code { border-color: rgba(140, 225, 255, 0.5); color: #dcf3ff; }
/* Y el apoyo en verde: no es atacar ni defenderse, es tapar a otro. */
#comandos .apoyar code { border-color: rgba(95, 224, 176, 0.5); color: #d6fff0; }
/* Los dos lados de la moneda del duelo, con los mismos tonos que ella: cara
   cálida, cruz fría. Se distinguen de un vistazo sin leerlas. */
#comandos .cara code { border-color: rgba(255, 212, 121, 0.55); color: #ffe9bb; }
#comandos .cruz code { border-color: rgba(143, 214, 255, 0.55); color: #dcf3ff; }

#comandos i { color: #8ea8b6; font-style: normal; }
#comandos .ambiente { color: #8ea8b6; }

/* LA NOTICIA DE LA RONDA. Va en el sitio del rótulo pero no con su estilo: un
   rótulo es una etiqueta —cuatro letras espaciadas y en mayúsculas— y esto es
   una frase que se lee. Más grande y sin tanto tracking, que es lo que separa
   «VOTACIÓN CERRADA» de «Rusia se queda sin nadie». */
#comandos .titular {
  color: #eaf7ff;
  font: 700 15px/1.2 "Cascadia Mono", Consolas, ui-monospace, monospace;
  letter-spacing: 0.01em;
}

/* En el panel del director la línea se encoge y se queda solo con los comandos
   —quien dirige no necesita que le expliquen nada—, pero el titular sí lo
   quiere: es lo que va a leer en voz alta. */
body.director #comandos .titular { font-size: 13px; }

/* En el panel del director estorbaría: su barra de mando vive justo ahí. Se va
   a la esquina, donde no pisa nada y sigue diciendo lo mismo que ven los demás.
   Y ahí van cuatro comandos, así que se queda solo con ellos: quien dirige no
   necesita que le expliquen qué hace cada uno, solo verlos de reojo. */
body.director #comandos {
  left: 16px;
  transform: none;
  max-width: 44vw;
  gap: 8px;
  padding: 6px 12px;
}
body.director #comandos i,
body.director #comandos b { display: none; }

/* Cuando no cabe, se quedan los comandos y se van las explicaciones: lo que hay
   que poder copiar es el comando. */
@media (max-width: 1500px) {
  #comandos { gap: 9px; padding: 7px 12px; }
  #comandos i { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #panel { transition: none; }
  #vista, #abrir-panel { transition: none; }
}

/* ------------------------------------------------------------- el último duelo
   Quedan dos. El mapa de al lado se ha apagado a negro y aquí arriba se queda
   lo único que importa ya: quién es cada uno, cuánta gente le queda y —la
   balanza— cómo va la cosa sin tener que restar dos números.

   Se separa a propósito del resto de la interfaz, que es toda cápsulas de
   cristal pequeñas: esto pesa, ocupa y no se parece a nada de lo que había
   antes, porque el juego tampoco. */
#duelo {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: min(760px, 94vw);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "izq der" "pzi pzd" "bal bal";
  align-items: end;
  gap: 10px 18px;
  padding: 12px 20px 14px;
  border: 1px solid rgba(150, 220, 245, 0.16);
  border-radius: 16px;
  background: rgba(6, 12, 18, 0.72);
  backdrop-filter: blur(12px);
  pointer-events: none;
  user-select: none;
  z-index: 5;
  animation: duelo-entra 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 0.5s ease;
}

/* EL NÚMERO VA AL EXTREMO DE FUERA, alineado con su punta de la balanza, y el
   nombre hacia el centro. Así cada cifra se lee sobre el trozo de barra que le
   corresponde, y los dos números no acaban chocándose en mitad del cartel. */
#duelo .lado {
  grid-area: izq;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  flex-direction: row-reverse;
  gap: 14px;
  min-width: 0;
}

#duelo .lado.der {
  grid-area: der;
  flex-direction: row;
}

#duelo .lado b {
  font: 700 17px/1.1 "Cascadia Mono", Consolas, ui-monospace, monospace;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* El número, del tamaño de un marcador de verdad. Cifras de ancho fijo: es lo
   que hace que no baile al bajar de 100 a 99 en mitad de una andanada. */
#duelo .lado span {
  font: 700 30px/1 "Cascadia Mono", Consolas, ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  color: #eef7fb;
}

/* LA BALANZA. Los dos colores repartiéndose una barra según la gente que les
   queda. Es la única cosa de la pantalla que dice quién va ganando sin que
   haya que leer nada. */
#duelo .balanza {
  grid-area: bal;
  display: flex;
  gap: 3px;
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
}

#duelo .balanza i {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* CARA O CRUZ, EN VIVO. El recuento de cada país mientras se vota: es lo que
   convierte el coinflip en un pulso —¿el otro va a ir a lo mismo que yo?— en vez
   de una tirada a ciegas. Debajo de su propio marcador y alineado hacia fuera,
   igual que la cifra de gente. */
#duelo .pulso {
  grid-area: pzi;
  display: flex;
  gap: 14px;
  justify-content: flex-start;
  text-decoration: none;
  min-width: 0;
}

#duelo .pulso.der {
  grid-area: pzd;
  justify-content: flex-end;
}

#duelo .pulso i {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font: 11px/1 "Cascadia Mono", Consolas, ui-monospace, monospace;
  font-style: normal;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
  color: #5f7683;
  transition: color 0.25s ease;
}

#duelo .pulso i b {
  font: 700 16px/1 "Cascadia Mono", Consolas, ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-indent: 0;
}

/* El lado que va ganando en ese país, encendido. Los mismos dos tonos que en la
   moneda: cara cálida, cruz fría. */
#duelo .pulso i.cara.manda { color: #ffd479; }
#duelo .pulso i.cruz.manda { color: #8fd6ff; }

/* El aviso de turno vive justo aquí: se baja mientras dure el duelo. */
body.en-duelo #turno { top: 116px; }

@keyframes duelo-entra {
  from { opacity: 0; transform: translateX(-50%) translateY(-16px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* El rótulo del cambio de acto. Sale una vez, dice lo que ha pasado y se va:
   a partir de ahí el marcador de arriba ya lo cuenta solo. */
#duelo-rotulo {
  position: fixed;
  top: 38%;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
  pointer-events: none;
  user-select: none;
  z-index: 6;
  transform: translate(-50%, -50%);
  animation: duelo-rotulo 5s ease-out forwards;
}

#duelo-rotulo em {
  font: 12px/1 "Cascadia Mono", Consolas, ui-monospace, monospace;
  font-style: normal;
  letter-spacing: 0.55em;
  text-indent: 0.55em;
  color: #c3d6e0;
  text-transform: uppercase;
  /* Sobre el mapa claro —un desierto, el hielo— este renglón se perdía: es
     gris pequeño y con mucho espaciado, y encima cae justo debajo de la
     moneda. La sombra lo despega del fondo sin ponerle una caja. */
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.95), 0 0 6px rgba(0, 0, 0, 0.85);
}

#duelo-rotulo strong {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: center;
  font: 700 clamp(28px, 5.4vw, 62px)/1 "Cascadia Mono", Consolas, ui-monospace, monospace;
  letter-spacing: 0.02em;
  text-shadow: 0 4px 34px rgba(0, 0, 0, 0.9);
}

#duelo-rotulo strong b {
  font: 400 13px/1 "Cascadia Mono", Consolas, ui-monospace, monospace;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  color: #6f8896;
  text-transform: uppercase;
}

@keyframes duelo-rotulo {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.94); }
  10% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  82% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  #duelo, #duelo-rotulo { animation-duration: 0.01s; }
  #duelo .balanza i { transition: none; }
}

/* --------------------------------------------------- la moneda del último 1v1
   El duelo no se juega atacando: se pide cara o cruz y esto es lo que decide la
   partida. Ocupa el centro entero de la pantalla porque durante esos segundos
   ES la partida — los misiles ya están en el aire, pero lo que hay que mirar es
   en qué lado se para.

   A los lados, qué pidió cada país. Es la mitad de la gracia: la pregunta del
   duelo no es qué va a salir, sino qué va a pedir el otro. */
#moneda {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "izq tiro der" "ver ver ver";
  align-items: center;
  justify-items: center;
  gap: 26px clamp(18px, 5vw, 64px);
  align-content: center;
  pointer-events: none;
  user-select: none;
  z-index: 7;
}

/* Lo que pidió cada país. Se apagan al aterrizar la moneda: a partir de ahí lo
   que se lee es el veredicto, y tres cosas encendidas a la vez no las lee
   nadie. */
#moneda .pide {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 12px 20px 14px;
  border: 1px solid rgba(150, 220, 245, 0.18);
  border-radius: 14px;
  background: rgba(6, 12, 18, 0.74);
  backdrop-filter: blur(10px);
  text-align: center;
  transition: opacity 0.5s ease, transform 0.5s ease;
  animation: moneda-pide 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

#moneda .pide.izq { grid-area: izq; }
#moneda .pide.der { grid-area: der; animation-delay: 0.12s; }
#moneda.parada .pide { opacity: 0.34; transform: scale(0.94); }

/* EL PRIMER TRAMO: las dos apuestas y nada más.
   La moneda caía a la vez que salían las placas, así que no se leía ninguna de
   las dos cosas. Ahora espera con la moneda quieta y en penumbra, y lo único
   encendido es quién ha pedido qué. */
#moneda.esperando .pieza,
#moneda.esperando .sombra { opacity: 0.32; }
#moneda.esperando .pide { opacity: 1; transform: none; }


#moneda .pide b {
  font: 700 15px/1.1 "Cascadia Mono", Consolas, ui-monospace, monospace;
  letter-spacing: 0.05em;
  max-width: 26vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#moneda .pide span {
  font: 700 clamp(22px, 3.4vw, 38px)/1 "Cascadia Mono", Consolas, ui-monospace, monospace;
  letter-spacing: 0.1em;
  color: #eef7fb;
}

/* Cara y cruz se distinguen de un vistazo sin leerlas: una es cálida y la otra
   fría. Con dos países del mismo tono, el color del nombre no basta. */
#moneda .pide[data-lado="cara"] span { color: #ffd479; }
#moneda .pide[data-lado="cruz"] span { color: #8fd6ff; }

#moneda .tiro {
  grid-area: tiro;
  display: grid;
  justify-items: center;
  gap: 14px;
  perspective: 900px;
}

/* LA MONEDA. Dos caras pegadas espalda contra espalda y un giro en X: es
   exactamente lo que CSS sabe hacer solo, sin una línea de dibujo. */
#moneda .pieza {
  position: relative;
  width: clamp(110px, 15vw, 190px);
  height: clamp(110px, 15vw, 190px);
  transform-style: preserve-3d;
  animation: moneda-cae 2.6s cubic-bezier(0.22, 0.9, 0.3, 1) forwards;
}

#moneda .pieza i {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  backface-visibility: hidden;
  font: 700 clamp(17px, 2.2vw, 26px)/1 "Cascadia Mono", Consolas, ui-monospace, monospace;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  box-shadow: 0 0 44px rgba(0, 0, 0, 0.7), inset 0 0 0 6px rgba(0, 0, 0, 0.18);
}

#moneda .pieza .cara {
  background: radial-gradient(circle at 34% 28%, #ffe6a8, #d8a03a 62%, #8d6216);
  color: #4a3208;
}

#moneda .pieza .cruz {
  background: radial-gradient(circle at 34% 28%, #dff1fb, #8fb6c9 62%, #4a6c7d);
  color: #16303c;
  transform: rotateX(180deg);
}

/* EN QUÉ LADO SE PARA. La animación gira un número entero de vueltas y media,
   así que media vuelta más deja arriba la otra cara: es lo único que separa un
   resultado del otro. */
#moneda[data-salio="cruz"] .pieza { animation-name: moneda-cae-cruz; }

/* La sombra en el suelo se encoge cuando la moneda sube y se abre al caer: es
   lo que hace que se lea como una moneda cayendo y no como un disco girando. */
#moneda .sombra {
  width: clamp(80px, 11vw, 140px);
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.6), transparent 70%);
  animation: moneda-sombra 2.6s cubic-bezier(0.22, 0.9, 0.3, 1) forwards;
}

/* El veredicto entra cuando la moneda ya se ha parado: antes sería contar el
   final antes de que pase. */
#moneda .veredicto {
  grid-area: ver;
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
  animation: moneda-veredicto 1.1s 2.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

#moneda .veredicto em {
  font: 12px/1 "Cascadia Mono", Consolas, ui-monospace, monospace;
  font-style: normal;
  letter-spacing: 0.55em;
  text-indent: 0.55em;
  color: #7f9aa8;
  text-transform: uppercase;
}

#moneda .veredicto strong {
  font: 700 clamp(26px, 5vw, 58px)/1 "Cascadia Mono", Consolas, ui-monospace, monospace;
  letter-spacing: 0.02em;
  color: #eef7fb;
  text-shadow: 0 4px 34px rgba(0, 0, 0, 0.9);
}

@keyframes moneda-pide {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Sube, gira ocho vueltas y media y cae. Acaba en 3600deg + 0 → cara arriba. */
@keyframes moneda-cae {
  0% { transform: translateY(-46vh) rotateX(0deg) scale(0.72); }
  55% { transform: translateY(-6vh) rotateX(1980deg) scale(1.06); }
  78% { transform: translateY(0) rotateX(2880deg) scale(1); }
  88% { transform: translateY(-3vh) rotateX(3240deg) scale(1); }
  100% { transform: translateY(0) rotateX(3600deg) scale(1); }
}

/* Lo mismo, media vuelta más: se para con la cruz mirando a la pantalla. */
@keyframes moneda-cae-cruz {
  0% { transform: translateY(-46vh) rotateX(0deg) scale(0.72); }
  55% { transform: translateY(-6vh) rotateX(1980deg) scale(1.06); }
  78% { transform: translateY(0) rotateX(2880deg) scale(1); }
  88% { transform: translateY(-3vh) rotateX(3240deg) scale(1); }
  100% { transform: translateY(0) rotateX(3780deg) scale(1); }
}

@keyframes moneda-sombra {
  0% { opacity: 0.08; transform: scale(0.4); }
  55% { opacity: 0.3; transform: scale(0.8); }
  78% { opacity: 0.75; transform: scale(1); }
  88% { opacity: 0.5; transform: scale(0.86); }
  100% { opacity: 0.75; transform: scale(1); }
}

@keyframes moneda-veredicto {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Mientras cae la moneda, el marcador del duelo se aparta: los dos viven en el
   centro de arriba y se pisan. */
body.con-moneda #duelo { opacity: 0.28; }

/* En un móvil no caben las dos placas y la moneda en fila: se apilan. La moneda
   arriba —es lo que se mira— y debajo, uno al lado del otro, qué pidió cada uno. */
@media (max-width: 720px) {
  #moneda {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "tiro tiro" "izq der" "ver ver";
    gap: 18px 12px;
    padding: 0 14px;
  }

  #moneda .pide { padding: 9px 12px 11px; }
  #moneda .pide b { max-width: 40vw; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  #moneda .pieza,
  #moneda .sombra,
  #moneda .pide { animation-duration: 0.01s; }
  #moneda .veredicto { animation: none; }
}

/* ------------------------------------------------ cuánta gente lleva entrando
   Arriba y centrado, en el hueco que dejan libres el reloj de la votación y el
   cartel de turno —ninguno de los dos existe todavía mientras se elige país—.
   Grande porque en ese momento es LA cifra: le dice al director cuándo puede
   empezar y al que acaba de llegar que se está quedando fuera. */
#entrando {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 10px 26px 12px;
  border: 1px solid rgba(150, 220, 245, 0.18);
  border-radius: 14px;
  background: rgba(8, 16, 24, 0.68);
  backdrop-filter: blur(10px);
  pointer-events: none;
  user-select: none;
  z-index: 4;
}

#entrando b {
  font: 700 34px/1 "Cascadia Mono", Consolas, ui-monospace, monospace;
  color: #eaf7ff;
  letter-spacing: 0.02em;
  /* Los dígitos no bailan al pasar de 99 a 100. */
  font-variant-numeric: tabular-nums;
}

#entrando i {
  color: #8ea8b6;
  font: 10px/1 "Cascadia Mono", Consolas, ui-monospace, monospace;
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Un latido en cada entrada nueva: así se lee como algo que está pasando y no
   como un número puesto ahí. */
@keyframes entrando-late {
  from { transform: translateX(-50%) scale(1.06); }
  to { transform: translateX(-50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  #entrando { animation: none !important; }
}

@media (max-width: 720px) {
  #entrando { top: max(10px, env(safe-area-inset-top)); padding: 7px 18px 9px; }
  #entrando b { font-size: 26px; }
}

/* ------------------------------------------------------- la versión que corre
   En la esquina, del tamaño más pequeño que sigue siendo legible y casi del
   color del fondo. No es para quien mira el directo —a nadie le importa el
   número— sino para saber si el despliegue ha llegado sin abrir otra pestaña.
   Si compitiera por la atención con algo, estaría mal puesta. */
#version {
  position: fixed;
  right: 7px;
  bottom: 4px;
  color: rgba(150, 220, 245, 0.26);
  font: 9px/1 "Cascadia Mono", Consolas, ui-monospace, monospace;
  letter-spacing: 0.08em;
  pointer-events: none;
  user-select: none;
  z-index: 3;
}

/* En el teléfono la línea de comandos ocupa lo de abajo de lado a lado, así que
   la marca sube justo por encima de ella. */
@media (max-width: 720px) {
  #version { bottom: calc(max(8px, env(safe-area-inset-bottom)) + 62px); }
}

/* ------------------------------------------------------------------ el final
   Una partida de hora y media acababa con una línea en un cajón lateral. Esto
   es el clímax del directo: el mundo entero apagado menos un país, y encima las
   cifras de toda la guerra. Va centrado y grande porque no compite con nada —a
   estas alturas ya no hay partida que mirar— y se queda hasta la siguiente. */
#final {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 28px 44px 24px;
  border: 1px solid rgba(150, 220, 245, 0.22);
  border-radius: 18px;
  background: rgba(6, 14, 22, 0.72);
  backdrop-filter: blur(14px);
  text-align: center;
  pointer-events: none;
  user-select: none;
  z-index: 6;
  animation: final-entra 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

#final b {
  font: 700 clamp(28px, 5vw, 46px)/1 "Cascadia Mono", Consolas, ui-monospace, monospace;
  letter-spacing: 0.03em;
}

#final > i {
  color: #8ea8b6;
  font: 12px/1 "Cascadia Mono", Consolas, ui-monospace, monospace;
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Las dos cifras de la partida, con el mismo cuadrito que el panorama del
   cajón: es el mismo dato contado en el mismo sitio de siempre. */
#final .cifras { display: flex; gap: 10px; margin-top: 6px; }
#final .cifras div {
  min-width: 104px;
  padding: 10px 14px;
  border: 1px solid rgba(140, 200, 225, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}
#final .cifras b { display: block; font-size: 24px; color: #eaf7ff; letter-spacing: 0.02em; }
#final .cifras span {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6f8896;
}

/* Y el nombre que la gente busca al terminar. En ámbar, que es el color con el
   que este juego marca a las personas. */
#final .letal {
  margin: 4px 0 0;
  color: #b79a6a;
  font-size: 12px;
  letter-spacing: 0.04em;
}
#final .letal b { display: inline; font-size: 13px; color: #ffd166; letter-spacing: 0.02em; }

@keyframes final-entra {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.94); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  #final { animation: none; }
}

@media (max-width: 720px) {
  #final { padding: 22px 20px 18px; width: min(92vw, 420px); }
  #final .cifras div { min-width: 0; flex: 1; }
}

/* `hidden` TIENE QUE GANARLE AL `display` DE LA REGLA.
   El navegador oculta con `[hidden] { display: none }`, y esa regla es suya:
   pierde contra cualquier `#algo { display: grid }` del autor por muy tarde que
   venga. Sin esto, el cartel de turno se quedaba clavado en pantalla con el
   nombre del último país que atacó, y el rótulo del duelo no se iría nunca. */
#turno[hidden], #duelo[hidden], #duelo-rotulo[hidden], #reloj[hidden],
#final[hidden], #entrando[hidden], #moneda[hidden],
#moneda .pide[hidden], #duelo .pulso[hidden] { display: none; }

/* ==========================================================================
   EL MÓVIL
   ==========================================================================

   Todo lo de arriba está pensado para una pantalla apaisada y grande, que es
   donde se ve un directo. Pero se ve TAMBIÉN desde el teléfono —la mitad de la
   gente de un directo lo ve así— y quien dirige tiene el ordenador ocupado con
   la captura y la mesa llena: dirigir desde el móvil no es la excepción.

   Nada de esto toca al escritorio: vive entero dentro de las consultas de aquí
   abajo, y por encima de 720 px de ancho no se aplica ni una regla.

   Dos ideas gobiernan lo que sigue:

   1. LO QUE SE PULSA TIENE QUE PODER PULSARSE. Un botón de treinta píxeles se
      falla con el dedo, y en el panel del director fallar un botón es lanzar
      una ronda antes de tiempo. Cuarenta y cuatro es el mínimo.
   2. LO QUE NO SE PULSA, SE APARTA. En una pantalla de teléfono el mundo es lo
      único que hay sitio para enseñar. */

/* EL TAMAÑO DE LO QUE SE PULSA NO DEPENDE DEL ANCHO, SINO DEL DEDO.
   Una tablet de 1024 px tiene sitio de sobra para la barra en horizontal, pero
   se maneja igual con el dedo que un teléfono: si el tamaño mínimo fuera por
   ancho, ahí seguirían los botones de treinta píxeles. `pointer: coarse` es
   justo esa pregunta —¿se apunta con algo gordo?— y no la del tamaño. */
@media (pointer: coarse) {
  #director button, #director select, #director input[type="password"],
  #vista, #sonido, #abrir-panel, #panel-pestanas button {
    min-height: 44px;
    box-sizing: border-box;
  }
  /* Las dos pestañitas del cajón son lengüetas, no botones: no llegan a 44 y no
     deben —taparían el mundo— pero sí lo suficiente para acertarlas. */
  #dir-plegar { min-height: 30px; width: 72px; }
  #dir-salir { min-height: 30px; padding: 7px 14px !important; }
  /* Los campos de texto a 16 px o el navegador del móvil hace zoom solo al
     tocarlos, y de ahí ya no se vuelve. */
  #director input[type="password"] { font-size: 16px; }
}

@media (max-width: 720px) {
  /* Los tres botones de arriba, más juntos y más bajos: en un teléfono la fila
     de arriba se comparte con la hora y la batería. */
  #vista, #sonido, #abrir-panel {
    top: max(10px, env(safe-area-inset-top));
    padding: 11px 13px;
  }
  #vista { right: max(10px, env(safe-area-inset-right)); }
  #sonido { left: max(10px, env(safe-area-inset-left)); }
  #abrir-panel { right: calc(max(10px, env(safe-area-inset-right)) + 78px); }

  /* El texto de los botones sobra: el icono ya lo dice, y lo que se gana es
     sitio para que los tres quepan sin pisarse en una pantalla de 360. */
  #sonido-texto { display: none; }

  /* El cajón de la partida ocupa la pantalla: en un teléfono un cajón de 380 px
     ES la pantalla, así que se deja de fingir que hay algo detrás. */
  #panel { width: 100%; }
  /* Y los botones no se apartan a su lado, porque no hay lado: se quedan donde
     están y el cajón los tapa. */
  body.con-panel #vista,
  body.con-panel #abrir-panel { transform: none; }
  /* LAS PESTAÑAS, POR DEBAJO DE LOS BOTONES QUE FLOTAN.
     Con el cajón ocupando la pantalla entera, los tres botones de arriba se
     quedan encima de él —tienen que quedarse, uno de ellos es el que lo cierra—
     y aterrizaban justo sobre la primera pestaña. */
  #panel-pestanas { padding-top: calc(max(10px, env(safe-area-inset-top)) + 54px); }
  #panel-cuerpo { padding: 14px 14px calc(24px + env(safe-area-inset-bottom)); }
  /* Las fichas de país se pulsan con el dedo: más altas y más separadas. */
  #panel .pais, #panel .hallado { padding: 13px 12px; }

  /* La línea de comandos, pegada abajo y a lo ancho. Es lo que le dice al que
     acaba de entrar qué escribir, así que en móvil importa MÁS, no menos: es
     la única pantalla desde la que se está escribiendo en el chat a la vez. */
  #comandos {
    left: 8px;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    transform: none;
    max-width: none;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 16px;
  }
  #comandos code { font-size: 13px; padding: 6px 10px; }
  #comandos .ambiente { flex-basis: 100%; text-align: center; }

  /* ---------------------------------------------------------- el director
     La barra deja de ser una barra: en vertical no hay ancho para una fila de
     ocho botones, así que se convierte en un cajón a lo ancho con el botón
     grande arriba —el único que se pulsa en cada ronda— y los demás debajo. */
  #director {
    left: 8px;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    transform: none;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    /* Aire arriba para las dos pestañas: son mucho más grandes que en el
       escritorio —hay que poder pulsarlas con el dedo— y sin este hueco el
       número de ronda queda debajo de ellas. */
    padding: 26px 12px 12px;
  }
  #director.plegado { transform: translateY(calc(100% + 12px)); }

  /* EL DESLIZAMIENTO VA EN EL CONTENIDO, NO EN EL CAJÓN.
     Las pestañas de plegar y de salir se dibujan por FUERA del borde de arriba,
     y un contenedor con `overflow` recorta lo que se le sale: puestas ahí,
     acababan dentro del cajón pisando el número de ronda. */
  #dir-mando {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    /* Si no cabe, se desliza en vez de crecer hasta tapar el mundo entero. */
    max-height: 58vh;
    overflow-y: auto;
    /* Deslizar la lista de botones no puede arrastrar el mapa de debajo. */
    touch-action: pan-y;
    overscroll-behavior: contain;
  }
  #dir-estado { min-width: 0; text-align: center; }

  /* EL BOTÓN DEL SIGUIENTE PASO, A TODO LO ANCHO. Es el que se pulsa cada
     ronda y el único que hay que encontrar sin mirar. */
  #dir-paso { width: 100%; padding: 18px 16px; font-size: 15px; }

  /* Y los demás en rejilla, que es lo que los hace del mismo tamaño y lo que
     evita que uno se quede solo en una fila y se pulse por error. */
  #dir-extras {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    max-width: none;
  }
  #director button { padding: 11px 10px; }
  /* Los dos peligrosos, cada uno en su fila y al final: no se rozan con el
     resto y no se pulsan de pasada. */
  #director .peligro { grid-column: 1 / -1; }

  #dir-velocidad, #dir-plazo {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 2px;
  }
  #director select { flex: 1; font-size: 13px; }
  #director input[type="password"] { flex: 1; }

  /* Las pestañas suben lo que han crecido, para seguir asomando por el borde. */
  #dir-plegar { top: -30px; }
  #dir-salir { top: -30px; }
  #director.plegado #dir-plegar { top: -48px; }

  /* Dirigiendo desde el móvil, la línea de comandos sobra: el cajón ocupa lo
     de abajo y quien dirige ya sabe qué se escribe. */
  body.director #comandos { display: none; }

  /* El reloj y el cartel de turno, un punto más pequeños para que quepan entre
     los botones de arriba sin tocarlos. */
  #reloj { top: max(64px, calc(env(safe-area-inset-top) + 58px)); padding: 6px 18px 8px; }
  #reloj b { font-size: 26px; }
  #turno { top: max(64px, calc(env(safe-area-inset-top) + 58px)); padding: 7px 16px; }
  #turno b { font-size: 16px; }
}

/* APAISADO Y BAJITO: un teléfono girado tiene 360 px de alto, y ahí un cajón de
   director al 62 % se come el mundo. Se le da menos altura y los botones vuelven
   a caber de tres en tres, que es lo que sobra a lo ancho. */
@media (max-width: 1000px) and (max-height: 480px) {
  /* A LO ANCHO SOBRA SITIO Y A LO ALTO NO HAY NINGUNO. Con el cajón en columna
     —lo que hace falta de pie— los botones se apilaban en ocho filas y se
     comían cuatro quintos de la pantalla: no quedaba mundo que dirigir. Aquí
     vuelve a ser una barra, ocupando todo el ancho para que quepan de tres en
     tres. */
  #director {
    left: 8px;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    /* Ocupa todo el ancho, así que ya no hay que centrarla a mano. */
    transform: none;
    flex-direction: row;
    align-items: center;
    padding: 10px 12px;
    gap: 10px;
  }
  #director.plegado { transform: translateY(calc(100% + 12px)); }
  #dir-mando {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    max-height: none;
    overflow: visible;
  }
  #dir-estado { min-width: 130px; text-align: left; }
  #dir-extras {
    display: flex;
    flex-wrap: wrap;
    max-width: none;
    flex: 1;
  }
  #director .peligro { grid-column: auto; }
  #dir-velocidad, #dir-plazo { grid-column: auto; flex: 0 0 auto; }
  #director select { flex: 0 0 auto; }
  #dir-paso { width: auto; padding: 12px 20px; font-size: 13px; }

  #reloj { top: 8px; padding: 4px 14px 6px; }
  #reloj b { font-size: 20px; }
  #reloj .barra { width: 90px; }
  #turno { top: 8px; }
}

/* NADA DE EFECTOS AL PASAR POR ENCIMA EN UNA PANTALLA QUE NO TIENE «ENCIMA».
   En táctil, `:hover` se queda pegado después de pulsar: el botón se queda
   iluminado como si el dedo siguiera ahí, y en el panel del director eso se lee
   como «este es el que está activo». */
@media (hover: none) {
  #vista:hover, #abrir-panel:hover, #panel .pais:hover,
  #director button:hover, #panel-pestanas button:hover {
    background: inherit;
    border-color: inherit;
    transform: none;
    color: inherit;
  }
  /* Salvo los que dicen algo con su color: esos lo dicen igual. */
  #director .encendido, #abrir-panel.activo, #panel-pestanas button.activa { all: revert-layer; }
}