/* BetSafe — escudos de equipos y logos de casas
 * Lo arma assets/js/crests.js. El tamaño llega en --s; en los escudos
 * generados, los colores en --c1 y --c2 y el del texto en --ct.
 */

.crest {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--s, 28px);
  height: var(--s, 28px);
  vertical-align: middle;
  line-height: 1;
  overflow: hidden;
}

.crest > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* El sitio es oscuro y hay escudos azul marino o negros: un filo claro los
 * despega del fondo sin meterles una caja atrás. */
.crest:not(.crest--book) {
  overflow: visible;
}

.crest:not(.crest--book) > img {
  filter: drop-shadow(0 0 0.6px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.28));
}

.crest--gen {
  overflow: hidden;
}

/* Generado: forma de escudo, recto arriba y en punta redonda abajo. */
.crest--gen {
  border-radius: 22% 22% 50% 50% / 16% 16% 46% 46%;
  background: linear-gradient(160deg, var(--c1, #2a3a6e), var(--c2, #16204a));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 -0.18em 0.4em rgba(0, 0, 0, 0.22);
  color: var(--ct, #fff);
  font-family: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: calc(var(--s, 28px) * 0.42);
  font-stretch: condensed;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  /* La punta de abajo le saca lugar al texto: va un poco más arriba. */
  padding-bottom: calc(var(--s, 28px) * 0.08);
  user-select: none;
}

.crest--gen.crest--3 {
  font-size: calc(var(--s, 28px) * 0.34);
  letter-spacing: 0;
}

/* Casas: cuadrado con puntas redondeadas, o apaisado si el logo es el nombre. */
.crest--book {
  width: var(--w, var(--s, 22px));
  border-radius: calc(var(--s, 22px) * 0.22);
}

.crest--plate {
  width: auto;
  max-width: calc(var(--s, 22px) * 5);
  padding: 0 calc(var(--s, 22px) * 0.3);
  border-radius: calc(var(--s, 22px) * 0.22);
  font-size: calc(var(--s, 22px) * 0.52);
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  display: inline-block;
  line-height: var(--s, 22px);
}

@media (forced-colors: active) {
  .crest--gen { border: 1px solid CanvasText; forced-color-adjust: none; }
}

/* Tema claro: los escudos se bajaron en su versión para fondo oscuro (muchos
 * son blancos). Van sobre una plaquita oscura para que se vean todos. */
:root[data-theme='light'] :not(.is-dark) > .crest:not(.crest--gen),
:root[data-theme='light'] .crest:not(.crest--gen) { background: #101b40; border-radius: 24%; box-shadow: 0 0 0 2px #101b40; }
:root[data-theme='light'] .match__r + .sr-only + .match__r { margin-top: 9px; }