/* AEHCH - Marcador HEMA
   pantalla.css : la ventana que se proyecta.

   DOS TEMAS, y no es capricho.

   Un fondo negro se comporta como un espejo: la luz ambiente que rebota se
   SUMA por igual a todos los pixeles, y sobre un negro que apenas emite se
   lleva por delante el contraste entero. Con sol dando en el televisor, el oro
   sobre negro cae de 7:1 a menos de 2:1 y el marcador deja de leerse. Subir el
   brillo no arregla nada, porque el reflejo sube con el.

   La salida es invertir: fondo claro y tinta casi negra. El pixel emite todo
   lo que puede contra ese velo de luz fijo, y ademas un fondo blanco no hace
   de espejo. De ahi el tema 'claro'.

   El tema 'oscuro' (negro y oro, el del club) sigue siendo mejor con luz
   controlada: cansa menos la vista y la pantalla no deslumbra al publico.

   TODO se mide en vmin, no en px: asi el marcador ocupa lo mismo en un
   portatil de 13" que en el televisor de 32" del pabellon. Los tamanos estan
   subidos pensando en ese televisor, que es pequeno para una sala.
*/

/* ====================================================================== */
/*  Tema SALA (por defecto): negro y oro                                  */
/* ====================================================================== */
body {
  --fondo:        #0f0f0d;
  --tinta:        #ece9e1;
  --acento:       #c79a3b;
  --acento-flojo: #a39b86;
  --cab-fondo:    #000;
  --cab-linea:    #c79a3b;
  --caja:         rgba(0, 0, 0, .38);
  --caja-borde:   rgba(199, 154, 59, .35);
  --velo:         rgba(15, 15, 13, .94);

  /* Tirador A (rojo) */
  --a-panel:  linear-gradient(180deg, rgba(180, 52, 42, .55) 0%, #1a1915 42%);
  --a-borde:  #e0503f;
  --a-banda:  #e0503f;
  --a-num:    #ffffff;
  /* Tirador B (azul) */
  --b-panel:  linear-gradient(180deg, rgba(44, 107, 168, .55) 0%, #1a1915 42%);
  --b-borde:  #4a9be0;
  --b-banda:  #4a9be0;
  --b-num:    #ffffff;

  --banda-tinta: #0f0f0d;
  --urgente:     #ff6b5e;
  --agotado:     #ff4438;
}

/* ====================================================================== */
/*  Tema CLARO: alto contraste para reflejos y luz directa                  */
/* ====================================================================== */
/* Los colores de los tiradores se oscurecen respecto al tema oscuro. Sobre
   blanco, el rojo y el azul vivos apenas darian 3:1; oscurecidos dan 9:1 y
   10:1, que es lo que aguanta el reflejo sin dejar de ser rojo y azul. */
body.tema-claro {
  --fondo:        #ffffff;
  --tinta:        #14120d;
  --acento:       #6d4c15;
  --acento-flojo: #55524a;
  --cab-fondo:    #f2efe6;
  --cab-linea:    #6d4c15;
  --caja:         rgba(0, 0, 0, .05);
  --caja-borde:   rgba(20, 18, 13, .35);
  --velo:         rgba(255, 255, 255, .96);

  --a-panel:  #ffffff;
  --a-borde:  #9c2b22;
  --a-banda:  #9c2b22;
  --a-num:    #8f1d16;
  --b-panel:  #ffffff;
  --b-borde:  #1f5285;
  --b-banda:  #1f5285;
  --b-num:    #10416e;

  --banda-tinta: #ffffff;
  --urgente:     #b3261e;
  --agotado:     #8f1d16;
}

/* ====================================================================== */
/*  Armazon                                                               */
/* ====================================================================== */
html, body { height: 100%; overflow: hidden; }

body {
  display: flex;
  flex-direction: column;
  background: var(--fondo);
  color: var(--tinta);
  /* Sin cursor sobre la proyeccion: el raton del operador no tiene que salir
     en la pantalla del pabellon. Vuelve al moverlo (ver JS). */
  cursor: none;
}
body.raton { cursor: default; }

/* Emblema de fondo, tenue, en los dos temas.

   Antes esto llevaba un 'mix-blend-mode: lighten' y una mascara radial para
   borrarle al PNG su fondo negro, que no tenia transparencia. El logo del club
   ya viene con alfa de verdad (silueta dorada, sin marco), asi que los dos
   apanos sobran: basta la opacidad. */
.marca-agua {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url('../img/logo.png');
  background-repeat: no-repeat;
  background-position: center 55%;
  background-size: 46vmin;
  opacity: .06;
}
/* Sobre blanco hace falta casi el doble de opacidad para que se note LO MISMO.
   No es capricho: cerca del blanco el ojo distingue peor las diferencias, asi
   que el mismo 6% que en negro se ve como un 3%. Con estos valores los dos
   temas tienen la marca igual de presente (3,7 de diferencia de claridad).
   El coste en contraste es despreciable: las cifras pasan de 18,7:1 a 17,0:1,
   que sigue siendo de sobra para el tema pensado justo para los reflejos. */
body.tema-claro .marca-agua { opacity: .11; }

/* ====================================================================== */
/*  Cabecera: emblema a la izquierda, categoria grande al centro          */
/* ====================================================================== */
/* Rejilla de tres columnas, y no una fila flexible, para que la categoria
   quede centrada en la PANTALLA y no en el hueco que sobra a la derecha del
   emblema. Las dos columnas de los lados miden 1fr cada una: al ser iguales,
   lo que va en medio cae en el centro exacto. La tercera va vacia a proposito;
   es lo que hace de contrapeso al emblema. */
.cabecera {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 2vmin;
  padding: 1vmin 2.2vmin;
  background: var(--cab-fondo);
  border-bottom: .35vmin solid var(--cab-linea);
  flex: 0 0 auto;
}

.marca { justify-self: start; display: flex; align-items: center; }
.marca img { height: 8vmin; width: 8vmin; object-fit: contain; }

/* El emblema es una silueta dorada (#dea22f) sobre transparencia. Sobre la
   cabecera negra se lee de sobra (9,3:1), pero sobre la cabecera clara del tema
   claro cae a 2,0:1 y queda deslavado. Ahi se le pone un disco oscuro detras,
   que lo devuelve a 8,5:1 y ademas parece hecho a proposito. */
body.tema-claro .marca img {
  background: #0f0f0d;
  border-radius: 50%;
  padding: .6vmin;
}

.contexto {
  min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1.1;
}
.categoria {
  font-size: 5.2vmin; font-weight: 800;
  text-transform: uppercase; letter-spacing: .02em;
  color: var(--tinta);
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fase {
  font-size: 3vmin; font-weight: 600;
  color: var(--acento);
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.categoria:empty, .fase:empty { display: none; }

/* ====================================================================== */
/*  Cuerpo: tirador | reloj | tirador                                     */
/* ====================================================================== */
.pista {
  position: relative; z-index: 1;
  flex: 1 1 auto; min-height: 0;
  display: grid;
  /* La columna del reloj va en 'auto', no en un ancho fijo. Con un maximo
     fijo el reloj se salia: a 16vmin, un '03:00' pide unos 42vmin de ancho y
     la columna daba 30, asi que el sobrante se metia encima de los paneles de
     los tiradores. En 'auto' la columna mide lo que mida el reloj, y deja de
     poder desbordar aunque se cambie el tamano de la letra. */
  grid-template-columns: 1fr auto 1fr;
  gap: 3vmin;
  padding: 1.4vmin;
}

/* Los sitios se asignan a mano, no por orden de aparicion, para que el espejo
   sea un solo cambio y no dependa del orden del HTML. */
/* La FILA hay que fijarla tambien, y no es opcional. Al invertir las columnas,
   el tirador A pasa a la 3; el colocador automatico no retrocede nunca, asi que
   el reloj (columna 2) ya no cabia en la fila 1 y se iba a la 2, y el tirador B
   a la 3. Ese era el desnivel: uno arriba y otro abajo. Con la fila fija, las
   columnas se pueden barajar sin que nada se descuelgue. */
.pista { grid-template-rows: 1fr; }
.tirador.a, .centro, .tirador.b { grid-row: 1; }

.tirador.a { grid-column: 1; }
.centro    { grid-column: 2; }
.tirador.b { grid-column: 3; }

/* ESPEJO: los dos tiradores cambian de sitio; el texto NO se voltea (eso lo
   haria ilegible). Sirve cuando el operador esta detras de la pantalla: lo que
   el ve a su izquierda, el publico lo ve a su derecha. */
body.espejo .tirador.a { grid-column: 3; }
body.espejo .tirador.b { grid-column: 1; }

.tirador {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  border-radius: var(--radio);
  overflow: hidden;
}
.tirador.a { background: var(--a-panel); border: .45vmin solid var(--a-borde); }
.tirador.b { background: var(--b-panel); border: .45vmin solid var(--b-borde); }

/* La silueta del esgrimista, al fondo de cada panel.

   Va en un ::before absoluto y no como otra capa del 'background' del panel
   porque necesita SU PROPIA mascara: si se pusiera junto al degradado, la
   mascara se comeria tambien el color del panel.

   La lamina viene recortada de la cintura para arriba —la cintura estaba al
   60% de la figura entera, donde la silueta se estrecha— y llena el panel.
   El desvanecido copia el degradado que ya tenian los paneles: fuerte arriba
   y apagandose hacia abajo.

   Al 18% la cifra conserva 15:1 de contraste sobre el panel (17,6:1 sin la
   figura), asi que no estorba a lo que hay que leer. */
.tirador { position: relative; }
/* El contenido por encima de la silueta. Sin esto, un elemento posicionado se
   pintaria sobre el texto en vez de detras. */
.tirador > * { position: relative; z-index: 1; }

.tirador::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  /* El 40% no es un numero al azar: sube la lamina hasta que la careta cae
     justo sobre la cifra.

     La careta esta hacia el 49% de la lamina (medido en el propio archivo), y
     la cifra ocupa el hueco que queda entre la banda, los nombres y las
     marcas: su centro cae a un 53% del alto del panel. Con este valor las dos
     coinciden. */
  background-position: center 40%;
  /* 'cover' para que llene el panel. La lamina es mas alargada que el hueco,
     asi que se ajusta al ancho y lo que sobra por abajo se sale: da igual,
     porque ahi el desvanecido ya la ha apagado. */
  background-size: cover;
  opacity: .12;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .40) 38%, rgba(0, 0, 0, .10) 66%, transparent 88%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .40) 38%, rgba(0, 0, 0, .10) 66%, transparent 88%);
}
/* La misma lamina en los dos paneles: es una sola figura, y el volteo se
   encarga de que se den la cara. */
.tirador::before { background-image: url('../img/esgrimista.png'); }

/* Los dos miran al centro, siempre.

   La lamina viene mirando hacia la derecha, asi que en el panel de la IZQUIERDA
   vale tal cual y en el de la DERECHA hay que voltearla.

   El volteo sigue al LADO DE LA PANTALLA, no al tirador: con el espejo puesto
   los paneles cambian de sitio, y si el volteo fuera del tirador, al cambiarse
   de lado acabaria mirando hacia afuera. Por eso las dos reglas se invierten
   bajo 'body.espejo'. */
.tirador.a::before { transform: none; }
.tirador.b::before { transform: scaleX(-1); }

body.espejo .tirador.a::before { transform: scaleX(-1); }
body.espejo .tirador.b::before { transform: none; }

/* Sobre blanco el dorado casi no tine, y la figura se sostiene por su contorno
   oscuro: hace falta algo mas de cuerpo para que se note lo mismo. */
body.tema-claro .tirador::before { opacity: .18; }

.tirador .banda {
  color: var(--banda-tinta);
  font-size: 2.6vmin; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; text-align: center;
  padding: .6vmin 0;
  flex: 0 0 auto;
}
.tirador.a .banda { background: var(--a-banda); }
.tirador.b .banda { background: var(--b-banda); }

.tirador .identidad { padding: 1.4vmin 1.6vmin .4vmin; text-align: center; flex: 0 0 auto; }
.tirador .nombre {
  font-size: 5vmin; font-weight: 700; line-height: 1.05;
  text-transform: uppercase;
  /* Dos lineas como maximo: un nombre muy largo se recorta antes que empujar
     el marcador fuera de la pantalla. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.tirador .nombre:empty::before { content: '—'; color: var(--acento-flojo); }
.tirador .club {
  font-size: 2.6vmin; font-weight: 600; color: var(--acento); margin-top: .5vmin;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.tirador .puntos {
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 30vmin; font-weight: 800; line-height: .82;
  letter-spacing: -.02em;
}
.tirador.a .puntos { color: var(--a-num); }
.tirador.b .puntos { color: var(--b-num); }
/* La sombra da cuerpo a la cifra sobre el degradado oscuro. En el tema claro
   sobra: sobre blanco solo ensuciaria el borde de los numeros. */
body:not(.tema-claro) .tirador .puntos { text-shadow: 0 0 6vmin rgba(0, 0, 0, .55); }

.tirador .marcas {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  gap: 1.4vmin; flex-wrap: wrap;
  padding: 1vmin 1.2vmin 1.6vmin;
  min-height: 8vmin;
}

/* Tarjetas: se dibujan como lo que son, rectangulos de color, tantas como
   haya. A diez metros eso se cuenta de un vistazo; un numero, no. */
.tarjeta {
  width: 3.2vmin; height: 4.6vmin; border-radius: .5vmin;
  box-shadow: 0 .3vmin .8vmin rgba(0, 0, 0, .45);
  border: .2vmin solid rgba(0, 0, 0, .5);
}
.tarjeta.amarilla { background: #f2c94c; }
.tarjeta.roja { background: #e03131; }
body.tema-claro .tarjeta.amarilla { background: #e8b012; }
body.tema-claro .tarjeta.roja { background: #cc2222; }

/* El reclamo, en una esquina del panel.

   No se cuenta: se tiene o se ha perdido. Mientras al tirador le acepten los
   reclamos puede seguir pidiendolos; al primero que le rechacen se queda sin
   derecho. Por eso esta SIEMPRE a la vista y lo que cambia es si esta tachado:
   un icono que solo apareciera al perderlo no diria nada mientras le queda.

   Va en la esquina de ABAJO y del lado de AFUERA, que es lo unico que queda
   libre: arriba esta la banda con el color, en medio la cifra y abajo al
   centro las tarjetas. */
.reclamo-esq {
  position: absolute;
  bottom: 1.2vmin;
  width: 8vmin; height: 8vmin;
  background: url('../img/reclamo.png') center / contain no-repeat;
  z-index: 2;
}
.tirador.a .reclamo-esq { left: 1.2vmin; }
.tirador.b .reclamo-esq { right: 1.2vmin; }
/* Con el espejo los paneles cambian de sitio: el icono sigue al lado de afuera. */
body.espejo .tirador.a .reclamo-esq { left: auto; right: 1.2vmin; }
body.espejo .tirador.b .reclamo-esq { right: auto; left: 1.2vmin; }

/* Perdido: una X encima, de lado a lado. Se dibuja con dos barras giradas en
   vez de pintarla en la imagen, para que siga siendo el mismo archivo. */
.reclamo-esq.gastado { opacity: .75; }
.reclamo-esq.gastado::before,
.reclamo-esq.gastado::after {
  content: '';
  position: absolute; top: 50%; left: -6%;
  width: 112%; height: .9vmin;
  background: var(--agotado);
  border-radius: .45vmin;
  box-shadow: 0 0 .6vmin rgba(0, 0, 0, .55);
}
.reclamo-esq.gastado::before { transform: translateY(-50%) rotate(45deg); }
.reclamo-esq.gastado::after  { transform: translateY(-50%) rotate(-45deg); }

/* ====================================================================== */
/*  Columna central: el reloj                                             */
/* ====================================================================== */
.centro {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.4vmin;
  /* Un minimo para que la columna no pegue un salto cuando el reloj deja de
     ser '03:00' y pasa a decir 'ULTIMO ASALTO': son anchos distintos y sin
     esto los paneles se moverian. */
  min-width: 40vmin;
  padding: 0 1.5vmin;
}

/* El reloj y sus contadores van juntos para poder empujarlos como un bloque.

   Con el historial encendido, 'margin-top: auto' manda todo el hueco libre por
   ENCIMA de ellos: el reloj queda algo por debajo del centro y, sobre todo, se
   queda QUIETO. Antes el hueco del historial aparecia de golpe con la primera
   marca y el reloj pegaba un salto hacia arriba. */
.reloj-grupo {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.4vmin;
  min-width: 0; width: 100%;
}
body.con-historial .centro { justify-content: flex-start; }
body.con-historial .reloj-grupo { margin-top: auto; }

.reloj {
  font-size: 16vmin; font-weight: 800; line-height: 1;
  color: var(--tinta); letter-spacing: -.01em; text-align: center;
  white-space: nowrap;
}
/* Ultimos diez segundos: el reloj se pone rojo y late. Es la senal que arbitro
   y tiradores miran de reojo sin dejar de mirar la pista. */
.reloj.urgente { color: var(--urgente); animation: latido 1s ease-in-out infinite; }
.reloj.agotado {
  color: var(--agotado);
  animation: none;
  /* Ya no es una hora sino un aviso de dos palabras: baja de tamano y se le
     deja partir en dos lineas. El salto viene en el propio texto. */
  font-size: 7vmin;
  line-height: 1.05;
  white-space: pre-line;
  text-transform: uppercase;
  letter-spacing: .04em;
}
@keyframes latido {
  0%, 100% { opacity: 1; }
  50%      { opacity: .4; }
}

.rondas {
  font-size: 3.8vmin; font-weight: 700; color: var(--tinta);
  background: var(--caja);
  border: .3vmin solid var(--caja-borde);
  border-radius: var(--radio);
  padding: .7vmin 2vmin;
  text-align: center;
}
/* Al llegar al tope, en rojo: el doble suele castigarse, asi que hay que
   verlo venir desde la pista. */
.rondas.al-tope { border-color: var(--urgente); color: var(--urgente); }
.rondas.al-tope small { color: var(--urgente); }
.rondas small {
  display: block; font-size: 1.9vmin; font-weight: 700;
  color: var(--acento); letter-spacing: .12em; text-transform: uppercase;
}

/* ---------- Historial de puntos ---------- */
/* Una sola columna para los dos tiradores. Cada etiqueta se pega al lado del
   suyo, asi que leyendo de arriba abajo se ve el orden en que se marcaron los
   puntos: si se alternan, las etiquetas se alternan de lado. Con una lista por
   tirador esa lectura se perderia.

   La caja tiene un alto FIJO y esta SIEMPRE puesta, aunque no haya ni una
   marca. Ahi esta la gracia:

   - El reloj no se mueve nunca. Si la caja apareciera con la primera marca, el
     reloj daria un salto justo cuando el operador esta anotando.
   - Va la ultima de la columna, asi que su borde de abajo es el borde de la
     pantalla: el historial baja hasta el fondo sin estirar nada.
   - Y rompe la pescadilla: el tamano de las etiquetas sale del alto de la
     caja, asi que la caja no puede depender de las etiquetas.

   Se llena DESDE ABAJO: la pila se apoya en el suelo y crece hacia arriba, con
   la mas nueva encima.

   El tamano lo pone el JS en '--tam-marca', repartiendo el alto entre las que
   haya: al acumularse se achican para dejarse sitio unas a otras. Ninguna se
   cae de la lista. */
.historial {
  flex: 0 0 auto;
  height: 44vmin;
  overflow: hidden;
  display: flex; flex-direction: column;
  justify-content: flex-end;
  gap: calc(var(--tam-marca, 2.8vmin) * .3);
  width: 100%;
}

.marca-punto {
  align-self: flex-end;          /* el tirador B, a la derecha */
  padding: .18em .7em;
  border-radius: 999px;
  /* Todo en 'em' para que al cambiar el tamano de letra se encoja entero:
     el relleno, el ancho minimo y el radio van detras. */
  min-width: 2.6em;
  font-size: var(--tam-marca, 2.8vmin);
  font-weight: 800; line-height: 1.2;
  text-align: center;
  color: var(--banda-tinta);
  white-space: nowrap;
}
.marca-punto.a { align-self: flex-start; background: var(--a-banda); }
.marca-punto.b { align-self: flex-end;   background: var(--b-banda); }

/* Una correccion se ve como lo que fue: hueca, para no confundirla con un
   punto marcado. */
.marca-punto.resta {
  background: transparent;
  color: var(--acento-flojo);
  border: .08em dashed var(--caja-borde);
}

/* Con el espejo los paneles cambian de sitio, asi que las etiquetas tambien:
   si no, quedarian pegadas al tirador que no es. */
body.espejo .marca-punto.a { align-self: flex-end; }
body.espejo .marca-punto.b { align-self: flex-start; }

/* ====================================================================== */
/*  Rotulo a pantalla completa                                            */
/* ====================================================================== */
/* Para 'ALTO', 'DESCANSO', el nombre del ganador... Tapa el marcador entero a
   proposito: cuando esto se enciende, lo unico que importa es el rotulo. */
/* Para 'ALTO', 'DESCANSO' o el anuncio del proximo asalto. Tapa el marcador
   entero a proposito: cuando esto se enciende, lo unico que importa es el
   rotulo.

   Va en cuatro lineas y no en un parrafo porque cada una tiene su papel y su
   color: el titulo y el 'VS' en oro —el mismo en los dos temas, oscurecido en
   el claro para que se lea— y los nombres en la tinta, que sí cambia: blanca
   sobre negro y negra sobre blanco. */
.rotulo {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3vmin;
  background: var(--velo);
  padding: 4vmin; text-align: center;
  line-height: 1.05;
}
/* Los tamanos son los que hacen que el anuncio ocupe la pantalla: entre las
   cuatro lineas suman unos 63vmin de los 100 de alto, y con el margen llenan
   el hueco. Es un anuncio para leer desde el fondo de la sala, no un pie de
   foto. */
.rotulo .titulo {
  font-size: 12vmin; font-weight: 800;
  color: var(--acento);
  text-transform: uppercase; letter-spacing: .06em;
}
.rotulo .quien {
  font-size: 17vmin; font-weight: 700;
  color: var(--tinta);
  text-transform: uppercase; letter-spacing: .01em;
  /* Un nombre corto cabe de sobra; uno muy largo parte de linea en vez de
     salirse por los lados. */
  max-width: 94vw;
  overflow-wrap: break-word;
}
.rotulo .vs {
  font-size: 8vmin; font-weight: 800;
  color: var(--acento);
  text-transform: uppercase; letter-spacing: .2em;
}
/* Un 'ALTO' seco no lleva nombres: las lineas vacias no deben dejar hueco. */
/* La cuenta atras del rotulo, debajo. Mas discreta que el resto: dice cuanto
   falta, no es el anuncio. */
.rotulo .cuenta {
  font-size: 8vmin; font-weight: 800;
  color: var(--acento);
  letter-spacing: .02em;
  margin-top: 1vmin;
}
.rotulo .cuenta:empty { display: none; }

.rotulo .quien:empty, .rotulo .titulo:empty { display: none; }

/* ====================================================================== */
/*  Aviso de espera                                                       */
/* ====================================================================== */
.espera {
  position: fixed; left: 50%; bottom: 2vmin; transform: translateX(-50%);
  z-index: 20;
  font-size: 1.8vmin; color: var(--acento-flojo);
  background: var(--caja);
  border: .2vmin solid var(--caja-borde);
  border-radius: 999px;
  padding: .7vmin 2vmin;
}

/* En pantallas muy apaisadas el ancho sobra pero el alto no: la cifra se ajusta
   al alto para que no se coma los nombres. */
@media (min-aspect-ratio: 21/9) {
  .tirador .puntos { font-size: 24vmin; }
}