/* ============================================================
   Componentes
   ============================================================ */

/* ---------------- botones ----------------
   Los del cliente. Tres pesos y nada más:
     .btn            el común: relleno gris, marco dorado, letra dorada
     .btn--primary   el que HACE algo ("Entrar en cola", "Aceptar"): magia
                     cian adentro del marco dorado. Uno por pantalla.
     .btn--ghost     volver / cancelar: solo la letra
   El marco es el fondo del borde (border-box) y el relleno va por dentro
   (padding-box): así el degradé dorado de 2px queda como en el cliente. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-2);
  border: 2px solid transparent;
  border-radius: var(--r-xs);
  background: linear-gradient(var(--gris-4), var(--gris-4)) padding-box, var(--marco) border-box;
  box-shadow: inset 0 0 2px var(--shade-strong);
  color: var(--oro-txt);
  padding: var(--gap-3) var(--gap-5);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--ls-boton);
  text-transform: uppercase;
  transition: color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast), filter var(--dur-fast);
}
.btn:hover {
  color: var(--oro-1);
  background: linear-gradient(180deg, var(--gris-4) 0%, var(--oro-6) 100%) padding-box, var(--marco-claro) border-box;
  box-shadow: 0 0 14px -3px var(--glow-oro), inset 0 0 2px var(--shade-strong);
}
.btn:active {
  color: var(--oro-4);
  background: linear-gradient(var(--gris-4), var(--gris-4)) padding-box, var(--marco-apagado) border-box;
  box-shadow: none;
  transform: translateY(1px);
}

/* El primario: la magia. Brilla desde abajo, y al pasar el mouse un
   reflejo lo cruza de punta a punta. */
.btn--primary {
  overflow: hidden;
  color: var(--cian-1);
  background:
    radial-gradient(120% 95% at 50% 125%, color-mix(in srgb, var(--cian-2) 45%, transparent) 0%, transparent 70%) padding-box,
    linear-gradient(180deg, var(--cian-5) 0%, var(--cian-6) 100%) padding-box,
    var(--marco) border-box;
  box-shadow: 0 0 0 1px var(--bg), 0 0 18px -6px var(--glow-cian), inset 0 0 2px var(--shade-strong);
  text-shadow: 0 0 10px color-mix(in srgb, var(--cian-2) 60%, transparent);
}
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--cian-1) 22%, transparent) 50%, transparent 65%);
  transform: translateX(-110%);
  pointer-events: none;
}
.btn--primary:hover {
  color: var(--white);
  background:
    radial-gradient(130% 110% at 50% 120%, color-mix(in srgb, var(--cian-2) 60%, transparent) 0%, transparent 72%) padding-box,
    linear-gradient(180deg, var(--cian-5) 0%, var(--cian-6) 100%) padding-box,
    var(--marco-claro) border-box;
  box-shadow: 0 0 0 1px var(--bg), 0 0 28px -4px var(--glow-cian), inset 0 0 2px var(--shade-strong);
}
.btn--primary:hover::after { transform: translateX(110%); transition: transform var(--dur-slower) var(--ease-salida); }
.btn--primary:active {
  color: var(--cian-1);
  background:
    linear-gradient(180deg, var(--cian-6) 0%, var(--cian-5) 100%) padding-box,
    var(--marco-apagado) border-box;
  box-shadow: 0 0 0 1px var(--bg);
}

.btn--ghost {
  background: transparent;
  box-shadow: none;
  color: var(--txt-2);
}
.btn--ghost:hover { background: transparent; box-shadow: none; color: var(--oro-1); text-shadow: 0 0 12px var(--glow-oro); }
.btn--ghost:active { background: transparent; color: var(--oro-4); }

/* el boton de omitir que llevan las secciones opcionales de la identidad */
.btn--mini {
  padding: var(--gap-1) var(--gap-3);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
}
.btn:disabled,
.btn:disabled:hover {
  color: var(--gris-2);
  background: linear-gradient(var(--gris-4), var(--gris-4)) padding-box, var(--marco-gris) border-box;
  box-shadow: none;
  text-shadow: none;
  transform: none;
  cursor: not-allowed;
}
.btn:disabled::after { display: none; }

/* ---------------- EL BOTÓN GRANDE ----------------
   La cara de "Buscar partida" del cliente: un primario con una luz que da
   vueltas por el marco y un latido del brillo. Va UNO, en la portada. Dice
   lo nuestro ("Jugar"), nunca el texto del juego. */
@property --giro {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.btn--cola {
  min-width: 280px;
  padding: var(--gap-4) var(--gap-6);
  font-size: var(--fs-lg);
  background:
    radial-gradient(120% 95% at 50% 125%, color-mix(in srgb, var(--cian-2) 50%, transparent) 0%, transparent 70%) padding-box,
    linear-gradient(180deg, var(--cian-5) 0%, var(--cian-6) 100%) padding-box,
    conic-gradient(from var(--giro), transparent 0deg 250deg, var(--cian-2) 320deg, var(--cian-1) 345deg, transparent 360deg) border-box,
    var(--marco) border-box;
  animation: cola-giro var(--dur-giro) linear infinite, cola-latido var(--dur-latido) ease-in-out infinite;
}
.btn--cola:hover {
  background:
    radial-gradient(130% 110% at 50% 120%, color-mix(in srgb, var(--cian-2) 65%, transparent) 0%, transparent 72%) padding-box,
    linear-gradient(180deg, var(--cian-5) 0%, var(--cian-6) 100%) padding-box,
    conic-gradient(from var(--giro), transparent 0deg 250deg, var(--cian-2) 320deg, var(--cian-1) 345deg, transparent 360deg) border-box,
    var(--marco-claro) border-box;
}
@keyframes cola-giro { to { --giro: 360deg; } }
@keyframes cola-latido {
  50% { box-shadow: 0 0 0 1px var(--bg), 0 0 34px -2px var(--glow-cian), inset 0 0 2px var(--shade-strong); }
}
/* apretar: el botón se hunde y rebota, como el del cliente */
.btn--cola:active { animation: cola-giro var(--dur-giro) linear infinite, cola-apretar var(--dur-slow) var(--ease-pop); }
@keyframes cola-apretar { 0% { transform: scale(1); } 30% { transform: scale(.96); } 100% { transform: scale(1); } }

/* dos renglones: lo que hace y, abajo, chiquito, a dónde lleva */
.btn__linea { display: block; }
.btn__sub {
  display: block;
  margin-top: var(--gap-1);
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: none;
  color: var(--cian-2);
  text-shadow: none;
}
.btn--cola .btn__txt { display: flex; flex-direction: column; align-items: center; }


@media (prefers-reduced-motion: reduce) {
  .btn--cola, .btn--cola:active { animation: none; }
  .btn--primary::after { display: none; }
}

/* ---------------- EL CARTEL DE "EMPEZAR CARRERA" ----------------
   La cara de "¡Partida encontrada!" del cliente, con lo nuestro: tu
   jugador listo para arrancar. El anillo se LLENA (estás listo), no corre
   un reloj: nadie pierde la carrera por tardar. Se pinta dentro de #app
   (como .extras) para que lo alcance la delegación de clics. */
.aceptar {
  position: fixed;
  inset: 0;
  z-index: var(--z-cartel);
  display: grid;
  place-items: center;
  padding: var(--gap-5);
  background: radial-gradient(60% 50% at 50% 45%, color-mix(in srgb, var(--cian-5) 60%, transparent), var(--scrim) 70%);
  backdrop-filter: blur(4px);
  animation: fade var(--dur) ease;
}
.aceptar__caja {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-3);
  text-align: center;
  animation: aceptar-entra var(--dur-slower) var(--ease-resorte) both;
}
@keyframes aceptar-entra { from { opacity: 0; transform: scale(.86) translateY(14px); } to { opacity: 1; transform: none; } }

.aceptar__anillo {
  position: relative;
  width: 196px;
  height: 196px;
  display: grid;
  place-items: center;
  margin-bottom: var(--gap-2);
}
/* solo el dibujo del anillo: el ícono de la medalla de adentro es otro svg */
.aceptar__anillo > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.aceptar__pista { fill: none; stroke: var(--oro-5); stroke-width: 3; }
.aceptar__marco { fill: none; stroke: var(--oro-2); stroke-width: 1.5; }
.aceptar__tiempo {
  fill: none;
  stroke: var(--cian-2);
  stroke-width: 5;
  stroke-linecap: butt;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  filter: drop-shadow(0 0 6px var(--glow-cian));
  animation: aceptar-cuenta calc(var(--dur-latido) / 2) var(--ease-salida) forwards;
  animation-delay: var(--dur-slow);
}
@keyframes aceptar-cuenta { to { stroke-dashoffset: 0; } }
.aceptar__runas { fill: none; stroke: var(--oro-4); stroke-width: 1; stroke-dasharray: 2 6; transform-origin: 50% 50%; animation: cup-spin var(--dur-loop) linear infinite; }
.aceptar__rombo { fill: var(--oro-2); }
.aceptar__centro {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-1);
}
.aceptar__modo {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-caps-wide);
  text-transform: uppercase;
  color: var(--txt-2);
}
.aceptar__anillo .medalla { width: 92px; height: 92px; }
.aceptar__anillo .medalla__glifo { width: 46%; height: 46%; }
.aceptar__anillo .medalla::before { display: none; }
.aceptar__datos { margin: 0; color: var(--txt-2); font-size: var(--fs-body); display: flex; gap: var(--gap-2); align-items: center; justify-content: center; flex-wrap: wrap; }
.aceptar__tit {
  margin: 0;
  font-family: var(--font-display);
  font-style: var(--display-estilo);
  font-weight: 800;
  font-size: var(--fs-2xl);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--oro-1);
  text-shadow: 0 0 24px var(--glow-oro);
}
.btn--aceptar {
  min-width: 260px;
  padding: var(--gap-4) var(--gap-6);
  font-size: var(--fs-xl);
  animation: cola-latido calc(var(--dur-latido) / 2) ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .aceptar__caja, .aceptar__runas, .btn--aceptar { animation: none; }
}

/* ---------------- tarjeta de modo ---------------- */
.mode {
  text-align: left;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 100%);
  border-radius: var(--r-lg);
  padding: var(--gap-5);
  transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
}
.mode:hover { border-color: var(--line-strong); transform: translateY(-2px); }
/* elegido = el marco se enciende en oro, como un campeón en la selección */
.mode[aria-pressed="true"] {
  border-color: var(--oro-2);
  background: linear-gradient(180deg, color-mix(in srgb, var(--oro-2) 12%, transparent), transparent 70%), var(--bg-2);
  box-shadow: 0 0 0 1px var(--oro-2) inset, 0 0 22px -6px var(--glow-oro);
}
.mode__name { font-size: var(--fs-xl); margin-bottom: var(--gap-1); color: var(--oro-1); }
.mode__tag {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--oro-2);
  margin-bottom: 8px;
}
.mode__desc { font-size: var(--fs-base); color: var(--muted); line-height: 1.5; }

/* ---------------- campos de formulario ---------------- */
.field { margin-bottom: 14px; }
.field__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-caps-wide);
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 6px;
  text-align: center;
}
.input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 14px;
  font-size: var(--fs-body);
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  outline: none;
  transition: border-color var(--dur-fast);
}
.input:focus { border-color: var(--oro-2); box-shadow: 0 0 12px -4px var(--glow-oro); }
.input::placeholder { color: var(--muted-2); font-weight: 500; }

.segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 4px;
}
.segmented button {
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: var(--r-sm);
  padding: 9px 6px;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  transition: background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
}
.segmented button:hover { color: var(--oro-1); }
.segmented button[aria-pressed="true"] {
  background: linear-gradient(0deg, color-mix(in srgb, var(--oro-2) 22%, transparent), transparent);
  color: var(--oro-1);
  box-shadow: inset 0 -2px 0 var(--oro-2);
}

/* ---------------- buscador + grilla de paises ---------------- */
.search { position: relative; margin-bottom: 14px; }
.search input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 14px 12px 40px;
  font-size: var(--fs-body);
  outline: none;
}
.search input:focus { border-color: var(--oro-2); box-shadow: 0 0 12px -4px var(--glow-oro); }
.search::before {
  content: "";
  position: absolute;
  left: 15px; top: 50%;
  width: 13px; height: 13px;
  margin-top: -8px;
  border: 1.6px solid var(--muted);
  border-radius: 50%;
  box-shadow: 4px 4px 0 -1px var(--muted);
  pointer-events: none;
}

.countries {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  max-height: 420px;
  overflow-y: auto;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
}
.country {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--r);
  padding: 9px 11px;
  font-size: var(--fs-base);
  font-weight: 600;
  text-align: left;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.country:hover { background: var(--panel-2); }
.country[aria-pressed="true"] { border-color: var(--oro-2); background: color-mix(in srgb, var(--oro-2) 12%, transparent); }
.country__check { margin-left: auto; color: var(--oro-2); opacity: 0; }
.country[aria-pressed="true"] .country__check { opacity: 1; }
.countries__empty { grid-column: 1 / -1; padding: 24px; text-align: center; color: var(--muted); font-size: var(--fs-base); }

/* banderas */
.flag {
  width: 22px;
  height: 16px;
  flex: 0 0 22px;
  border-radius: var(--r-xs);
  object-fit: cover;
  background: var(--panel-3);
}
.flag--sm { width: 17px; height: 12px; flex-basis: 17px; }
.flag-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 16px;
  flex: 0 0 22px;
  border-radius: var(--r-xs);
  background: var(--panel-3);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 8px;   /* ds-ok: dos letras dentro de una caja de 22x16 que imita una bandera; lo dicta la caja */
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  color: var(--txt-2);
}
.flag-code.flag--sm { width: 17px; height: 12px; flex-basis: 17px; font-size: 7px; }  /* ds-ok: la misma caja de bandera, en chico */

/* ---------------- grieta / selector de rol ---------------- */
.rift {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 330px;
  margin: 0 auto;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--rift-line);
}
.rift svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rift__map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  display: block;
}
.rift__roles { position: absolute; inset: 0; }
.role-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  border: 2px solid transparent;
  background: linear-gradient(var(--rift-pin-bg), var(--rift-pin-bg)) padding-box, var(--marco-apagado) border-box;
  color: var(--oro-txt);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: var(--ls-boton);
  left: var(--x);
  top: var(--y);
  transition: color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}
.role-pin:hover { color: var(--oro-1); background: linear-gradient(var(--rift-pin-bg), var(--rift-pin-bg)) padding-box, var(--marco) border-box; }
/* el elegido: marco encendido, el rombo arriba y el halo, como la calle
   elegida en la web del juego */
.role-pin[aria-pressed="true"] {
  color: var(--oro-1);
  background: linear-gradient(var(--rift-pin-bg), var(--rift-pin-bg)) padding-box, var(--marco-claro) border-box;
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--oro-4), 0 0 26px var(--glow-oro);
}
.role-pin[aria-pressed="true"]::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -9px;
  width: 8px;
  height: 8px;
  background: var(--oro-2);
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 0 0 0 2px var(--bg);
}

/* ---------------- badge de OVR ---------------- */
.ovr {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 74px; height: 74px;
  flex: 0 0 74px;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  background:
    radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--oro-1) 35%, transparent), transparent 70%) padding-box,
    linear-gradient(170deg, var(--oro-2) 0%, var(--oro-3) 45%, var(--oro-4) 100%) padding-box,
    var(--marco-claro) border-box;
  color: var(--bg);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--oro-4), 0 8px 24px -6px var(--glow-oro);
  /* las esquinas cortadas del marco hextech */
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
.ovr__label { font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--ls-caps); opacity: .75; }
.ovr__value { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 700; line-height: 1; letter-spacing: var(--ls-tight); font-variant-numeric: lining-nums tabular-nums; }

/* ---------------- panel del jugador ---------------- */
.plr__head { display: flex; gap: var(--gap-3); align-items: stretch; margin-bottom: 16px; }
.plr__id {
  flex: 1;
  min-width: 0;
  border-radius: var(--r);
  border: 1px solid var(--line-soft);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
/* con equipo: su color de fondo, que llega del JS como --team-2 */
.plr__id--team { background: linear-gradient(100deg, var(--team-2) 0%, transparent 78%); }
/* el nick, chico, entre los chips y el nombre del equipo */
.plr__alias { margin: var(--gap-1) 0 0; }
/* titular / KDA / lesionado, debajo de las stats */
.plr__estado { margin-bottom: var(--gap-3); }
.plr__idrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; position: relative; }
.plr__nick {
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: var(--ls-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plr__age {
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 12px;
}
.plr__age b { font-size: var(--fs-2xl); font-weight: 800; line-height: 1; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: var(--r-sm);
  padding: 3px 9px;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  background: var(--panel-3);
  color: var(--txt-2);
  white-space: nowrap;
}
.chip--role { background: color-mix(in srgb, var(--role) 22%, transparent); color: var(--oro-1); box-shadow: inset 0 0 0 1px var(--oro-4); }
.chip--good { background: var(--good-dim); color: var(--good); }
.chip--bad  { background: var(--bad-dim);  color: var(--bad); }
.chip--tier1 { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--tier-1); }
.chip--tier2 { background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--tier-2); }
.chip--tier3 { background: var(--panel-3); color: var(--tier-3); }

.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 12px 0;
  margin-bottom: 14px;
}
/* al pie de una tarjeta: aire arriba, nada abajo */
.stats-row--pie { margin: var(--gap-4) 0 0; }
.stat { text-align: center; }
.stat + .stat { border-left: 1px solid var(--line-soft); }
.stat__label {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
.stat__value { font-size: var(--fs-xl); font-weight: 800; font-variant-numeric: tabular-nums; }

/* vitrina */
.cabinet { text-align: center; padding: 10px 0 16px; }
.cabinet__empty {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps-wide);
  text-transform: uppercase;
  color: var(--muted-2);
}
.cabinet__icons { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.trophy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: var(--r-pill);
  padding: 4px 10px;
  font-size: var(--fs-sm);
  font-weight: 700;
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  color: var(--gold);
  border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
}
.trophy--intl { background: color-mix(in srgb, var(--purple) 12%, transparent); color: var(--purple); border-color: color-mix(in srgb, var(--purple) 22%, transparent); }
.trophy--award { background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--blue); border-color: color-mix(in srgb, var(--blue) 22%, transparent); }

/* ---------------- la vitrina con copas ----------------
   Cada titulo pasa de ser un chip con un emoji a una copa dibujada con su
   nombre propio debajo. Se apilan en columna porque el nombre importa tanto
   como la copa: "Copa del Invocador" no es lo mismo que "Campeon de LCK". */
.trophy {
  flex-direction: column;
  gap: 2px;
  border-radius: var(--r);
  padding: 10px 12px 9px;
  min-width: 86px;
  max-width: 132px;
  text-align: center;
}
.trophy .cup { display: block; margin: 0 auto 3px; height: auto; }
.trophy__name {
  font-size: var(--fs-sm);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: var(--ls-tight);
}
.trophy__sub {
  font-size: var(--fs-xs);
  font-weight: 600;
  opacity: .62;
  letter-spacing: var(--ls-wide);
  font-variant-numeric: tabular-nums;
}
.trophy--major { background: color-mix(in srgb, var(--metal-silver) 12%, transparent); color: var(--metal-silver); border-color: color-mix(in srgb, var(--metal-silver) 22%, transparent); }
.trophy--league { background: color-mix(in srgb, var(--metal-bronze) 12%, transparent); color: var(--metal-bronze); border-color: color-mix(in srgb, var(--metal-bronze) 22%, transparent); }

/* ---------------- la copa en pantalla ----------------
   Aparece cada vez que ganas un titulo. Se cierra sola a los 3,4 s o con un
   toque, y si ganaste dos en la misma temporada se muestran de a uno. */
.cup-pop {
  position: fixed;
  inset: 0;
  z-index: var(--z-aviso);
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--scrim);
  backdrop-filter: blur(3px);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur) ease;
}
.cup-pop.is-in { opacity: 1; }

.cup-pop__box {
  position: relative;
  text-align: center;
  transform: translateY(14px) scale(.94);
  transition: transform var(--dur-slow) var(--ease-resorte);
}
.cup-pop.is-in .cup-pop__box { transform: none; }

/* el resplandor de atras: gira despacio y da la sensacion de foco */
.cup-pop__rays {
  position: absolute;
  left: 50%; top: 82px;
  width: 460px; height: 460px;
  margin: -230px 0 0 -230px;
  background: conic-gradient(from 0deg,
    color-mix(in srgb, var(--metal-gold) 22%, transparent) 0deg, transparent 18deg,
    color-mix(in srgb, var(--metal-gold) 22%, transparent) 36deg, transparent 54deg,
    color-mix(in srgb, var(--metal-gold) 22%, transparent) 72deg, transparent 90deg,
    color-mix(in srgb, var(--metal-gold) 22%, transparent) 108deg, transparent 126deg,
    color-mix(in srgb, var(--metal-gold) 22%, transparent) 144deg, transparent 162deg,
    color-mix(in srgb, var(--metal-gold) 22%, transparent) 180deg, transparent 198deg,
    color-mix(in srgb, var(--metal-gold) 22%, transparent) 216deg, transparent 234deg,
    color-mix(in srgb, var(--metal-gold) 22%, transparent) 252deg, transparent 270deg,
    color-mix(in srgb, var(--metal-gold) 22%, transparent) 288deg, transparent 306deg,
    color-mix(in srgb, var(--metal-gold) 22%, transparent) 324deg, transparent 342deg,
    color-mix(in srgb, var(--metal-gold) 22%, transparent) 360deg);
  border-radius: 50%;
  animation: cup-spin var(--dur-loop) linear infinite;
  pointer-events: none;
}
@keyframes cup-spin { to { transform: rotate(360deg); } }

.cup-pop__cup {
  position: relative;
  filter: drop-shadow(0 12px 30px var(--shade-strong));
  animation: cup-rise var(--dur-slower) var(--ease-resorte) both;
}
@keyframes cup-rise {
  from { transform: translateY(22px) scale(.86); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.cup-pop__cup .cup { height: auto; }

.cup-pop__kicker {
  margin-top: 10px;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--gold);
}
.cup-pop__name {
  margin-top: 4px;
  font-size: var(--fs-3xl);
  font-weight: 900;
  letter-spacing: var(--ls-tighter);
  line-height: 1.1;
}
.cup-pop__sub {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--muted);
}
.cup-pop__year { opacity: .6; font-variant-numeric: tabular-nums; }
.cup-pop__hint {
  margin-top: 20px;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps-wide);
  text-transform: uppercase;
  color: var(--muted-2);
}

/* el mundial se distingue: dorado mas fuerte */
.cup-pop--intl .cup-pop__name { color: var(--metal-gold-pale); }

@media (prefers-reduced-motion: reduce) {
  .cup-pop__rays { animation: none; }
  .cup-pop__cup { animation: none; }
  .cup-pop__box { transition: none; }
}

/* ---------------- bloque de decision ---------------- */
.decision { border-top: 1px solid var(--line-soft); padding-top: 16px; }
.decision__title { font-size: var(--fs-xl); font-weight: 800; letter-spacing: var(--ls-tight); margin: 0 0 4px; }
.decision__desc { font-size: var(--fs-base); color: var(--muted); margin: 0 0 14px; line-height: 1.5; }

/* el campeon del que habla el evento, al lado del titulo */
.decision__head { display: flex; gap: 12px; align-items: flex-start; }
.decision__head > div { min-width: 0; }
.decision__champ {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  border-radius: var(--r);
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--line), 0 4px 14px var(--shade);
}

/* y el de cada opcion, dentro de su recuadro de color */
.opt__champ {
  width: 68px;
  height: 68px;
  border-radius: var(--r);
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--shade);
}

/* El pictograma del tema, para los eventos que no son de un campeon ni
   pasan en un punto del mapa: una tendinitis, un sueldo que no llega, el
   servicio militar. Va tenue y grande: es el fondo de la ficha, no el
   protagonista — lo que se lee es el texto de la opcion. */
.opt__icono {
  width: 62px;
  height: 62px;
  color: var(--white);
  opacity: .3;
  filter: drop-shadow(0 2px 6px var(--shade));
}
/* en la ficha mas clara (la dorada) el trazo blanco se pierde */
.opt__art--gold .opt__icono { opacity: .38; }

.opt:hover .opt__icono { opacity: .46; transition: opacity var(--dur-fast); }

/* El fondo de la carta: cinco colores, cada uno con su degradé de
   tokens. El JS solo elige cuál (U.artClase), nunca escribe el color. */
.opt__art--green   { --art-1: var(--art-green-1);   --art-2: var(--art-green-2); }
.opt__art--blue    { --art-1: var(--art-blue-1);    --art-2: var(--art-blue-2); }
.opt__art--red     { --art-1: var(--art-red-1);     --art-2: var(--art-red-2); }
.opt__art--gold    { --art-1: var(--art-gold-1);    --art-2: var(--art-gold-2); }
.opt__art--neutral { --art-1: var(--art-neutral-1); --art-2: var(--art-neutral-2); }
.opt__art--green, .opt__art--blue, .opt__art--red,
.opt__art--gold, .opt__art--neutral { background: linear-gradient(140deg, var(--art-1), var(--art-2)); }

/* La carta de una oferta de club: el degradé sale de los colores del
   equipo, que el JS pasa como --team-1 / --team-2 (son datos, no diseño). */
.opt__art--club { background: linear-gradient(140deg, color-mix(in srgb, var(--team-1) 20%, transparent), var(--team-2)); }

/* El recuadro de la opcion con el mapa real debajo del color: cada
   decision de partida pasa en un lugar concreto de la Grieta. El color va
   translucido para dejar ver el mapa; la zona llega como --zona. */
.opt__art--mapa {
  background-image:
    linear-gradient(140deg, color-mix(in srgb, var(--art-1) 78%, transparent), color-mix(in srgb, var(--art-2) 92%, transparent)),
    url(../img/rift.png);
  background-position: center, var(--zona, center);
  background-repeat: no-repeat;
  background-size: cover, 300%;
  image-rendering: auto;
}

.opts { display: grid; gap: var(--gap-3); }
.opts--2 { grid-template-columns: 1fr 1fr; }

.opt {
  position: relative;          /* ancla el corazon de "tu club" */
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--r-lg);
  padding: 14px;
  transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}
.opt:hover { border-color: var(--oro-2); background: var(--panel-2); transform: translateY(-2px); box-shadow: 0 0 22px -8px var(--glow-oro); }
.opt__kicker {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
.opt__name { font-size: var(--fs-lg); font-weight: 800; letter-spacing: var(--ls-tight); margin-bottom: 8px; }
.opt__art {
  height: 84px;
  border-radius: var(--r);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.opt__meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.opt__odds { display: grid; gap: 5px; margin-top: 8px; }
.odd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: var(--r-sm);
  padding: 6px 10px;
  font-size: var(--fs-base);
  font-weight: 700;
}
/* Una ficha puede decir dos cosas ("+2 OVR · el doble de titulos"), asi que
   el texto tiene que poder cortarse en dos lineas sin aplastar al
   porcentaje, que es lo que pasaba en pantalla angosta. */
.odd > span:first-child { min-width: 0; line-height: 1.3; }
.odd__p { flex: 0 0 auto; }

.odd--good { background: var(--good-dim); color: var(--good); }
.odd--bad  { background: var(--bad-dim);  color: var(--bad); }
.odd--flat { background: var(--panel-2);  color: var(--muted); }
.odd__p { font-size: var(--fs-sm); opacity: .85; }

/* ---------------- la ruleta del resultado ----------------
   Al elegir una opcion con varios desenlaces, la interfaz salta entre ellos y
   va frenando hasta quedarse en el que salio. El azar ya estaba resuelto antes
   de que empiece esto: la animacion no decide nada, solo muestra la duda. */
.opt--rolling {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 35%, transparent), 0 8px 26px var(--shade);
  transform: none !important;
  cursor: progress;
}
/* el desenlace por el que va pasando la ruleta */
.odd--spot {
  transform: scale(1.035);
  filter: brightness(1.45);
  box-shadow: inset 0 0 0 1px currentColor;
}
/* y el que finalmente salio */
.odd--landed {
  transform: scale(1.06);
  filter: brightness(1.6);
  box-shadow: inset 0 0 0 2px currentColor, 0 0 18px -2px currentColor;
  animation: odd-pop var(--dur-slow) var(--ease-pop);
}
@keyframes odd-pop {
  0%   { transform: scale(1.2); }
  100% { transform: scale(1.06); }
}
.odd { transition: transform var(--dur-fast), filter var(--dur-fast), box-shadow var(--dur-fast); }

@media (prefers-reduced-motion: reduce) {
  .odd, .odd--spot, .odd--landed { transition: none; animation: none; transform: none; }
}

/* ---------------- tu club ----------------
   La oferta del equipo del que sos hincha se marca con un corazon, para que se
   encuentre de un golpe entre las cuatro. */
.opt--fav { border-color: color-mix(in srgb, var(--fav) 45%, transparent); }
.opt--fav:hover { border-color: color-mix(in srgb, var(--fav) 60%, transparent); }
.opt__fav {
  position: absolute;
  top: 10px; right: 12px;
  font-size: var(--fs-base);
  color: var(--fav);
  filter: drop-shadow(0 1px 3px var(--shade-strong));
}

/* lista de equipos en la creacion del personaje */
.countries--teams { grid-template-columns: 1fr; }
.team-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--r);
  padding: 7px 10px;
  font-size: var(--fs-base);
  font-weight: 600;
  text-align: left;
  width: 100%;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.team-pick:hover { background: var(--panel-2); }
.team-pick[aria-pressed="true"] { border-color: var(--fav); background: var(--panel-2); }
.team-pick[aria-pressed="true"] .country__check { opacity: 1; color: var(--fav); }
.team-pick__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.team-pick__lg {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  color: var(--muted-2);
}

/* ---------------- escudos ----------------
   El escudo es un SVG con forma de blason, asi que el contenedor solo reserva
   el lugar: no lleva fondo ni borde propios. La forma y los colores los pone
   LOL.ui.crest() a partir del equipo. */
.crest {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 35px;
  flex: 0 0 30px;
  line-height: 0;
}
.crest svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 3px var(--shade)); }
.crest--lg { width: 58px; height: 68px; flex-basis: 58px; }
.crest--sm { width: 20px; height: 23px; flex-basis: 20px; }
/* El monograma heredaba el cuerpo de letra del contexto, asi que tres
   letras ("LYO") median 23px dentro de un blason de 20 y se salian. Cada
   tamano de escudo lleva el suyo. */
.crest { font-size: var(--fs-sm); font-weight: 800; letter-spacing: var(--ls-tight); }
.crest--lg { font-size: var(--fs-xl); }
.crest--sm { font-size: 8px; }  /* ds-ok: monograma de 3 letras dentro de un escudo de 20px; lo dicta el escudo */
/* sin equipo: el lugar del escudo queda reservado con un "?" */
.crest--nada { background: var(--panel-3); }
/* las particiones del blason (banda, palo, faja...), un velo blanco */
.crest__veta { fill: var(--crest-veil); }

/* ---------------- timeline de años ---------------- */
.tl { width: 100%; }
.tl__head {
  display: grid;
  grid-template-columns: 46px 1fr 52px 62px 62px 62px;
  gap: 6px;
  padding: 10px 14px;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--muted-2);
  border-bottom: 1px solid var(--line-soft);
}
.tl__head span:nth-child(n+3) { text-align: right; }
.tl__rows { max-height: calc(100vh - 150px); overflow-y: auto; }

.yr {
  display: grid;
  grid-template-columns: 46px 1fr 52px 62px 62px 62px;
  gap: 6px;
  align-items: center;
  padding: 7px 14px;
  font-size: var(--fs-base);
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  width: 100%;
  border-left: 0; border-right: 0; border-top: 0;
  background: transparent;
  text-align: left;
  color: inherit;
  font-family: inherit;
  cursor: default;
}
.yr--played { cursor: pointer; }
.yr--played:hover { background: var(--veil); }
.yr--future { opacity: .35; }
.yr--current { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.yr__age {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  border-radius: var(--r-sm);
  padding: 2px 0;
  text-align: center;
  font-size: var(--fs-md);
}
.yr__club { display: flex; align-items: center; gap: 8px; min-width: 0; }
.yr__clubname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.yr__ovr {
  justify-self: end;
  font-weight: 800;
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
  border-radius: var(--r-sm);
  padding: 2px 8px;
  background: linear-gradient(170deg, var(--oro-2), var(--oro-4));
  color: var(--bg);
}
.yr__n { text-align: right; font-variant-numeric: tabular-nums; color: var(--txt-2); }
.yr__badges { display: inline-flex; gap: 4px; margin-left: 2px; flex: 0 0 auto; }
.yr__badge { font-size: var(--fs-sm); line-height: 1; }

.yr-detail {
  padding: 10px 14px 14px 60px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--veil-faint);
  font-size: var(--fs-base);
  animation: fade var(--dur) ease;
}
.yr-detail__row { display: flex; gap: 10px; align-items: baseline; padding: 2px 0; }
.yr-detail__k { color: var(--muted); min-width: 124px; font-size: var(--fs-sm); letter-spacing: var(--ls-wide); text-transform: uppercase; flex: 0 0 124px; }
.yr-detail__v { color: var(--txt-2); }

/* ---------------- pantalla final ---------------- */
.card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-2);
  padding: 18px;
}
.card__title {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps-wide);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
/* nombre y chips a la izquierda, el OVR a la derecha */
.final__cabeza { display: flex; gap: var(--gap-4); align-items: flex-start; justify-content: space-between; }
.final__ovr { text-align: right; }
.final__ovr .ovr { margin-left: auto; }
.final__name { font-size: var(--fs-3xl); font-weight: 800; letter-spacing: var(--ls-tighter); line-height: 1; margin-bottom: 8px; }
.club-card {
  position: relative;
  background: linear-gradient(160deg, color-mix(in srgb, var(--team-1) 15%, transparent), var(--team-2));
  border-radius: var(--r-lg);
  padding: 20px 16px 0;
  overflow: hidden;
  min-height: 210px;
  border: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.club-card__bg {
  position: absolute; inset: 0;
  opacity: .13;
  font-size: var(--fs-deco);
  font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  letter-spacing: var(--ls-tighter);
  white-space: nowrap;
  color: var(--team-1);
}
.club-card__name { font-weight: 800; font-size: var(--fs-body); margin: 10px 0 14px; text-align: center; position: relative; }
.club-card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: calc(100% + 32px);
  margin: auto -16px 0;
  background: var(--shade);
  position: relative;
}
.club-card__stats .stat { padding: 8px 0; }
.club-card__stats .stat__value { font-size: var(--fs-lg); }
.club-card__trophies {
  display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;
  position: relative; padding-bottom: 12px;
}

/* ---------------- misc ---------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  background: var(--bg);
  border: 1px solid var(--oro-4);
  border-radius: var(--r-xs);
  padding: 10px 20px;
  font-size: var(--fs-base);
  font-weight: 600;
  box-shadow: var(--shadow);
  z-index: var(--z-aviso);
  animation: fade var(--dur) ease;
}
.sep { height: 1px; background: var(--line-soft); margin: 14px 0; }
.note { font-size: var(--fs-md); color: var(--muted); line-height: 1.5; }
.pill-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pill-row--centro { justify-content: center; }

@media (max-width: 560px) {
  .opts--2 { grid-template-columns: 1fr; }
  .tl__head, .yr { grid-template-columns: 34px 1fr 44px 44px 44px 44px; font-size: var(--fs-md); padding-left: 10px; padding-right: 10px; }
  .yr-detail { padding-left: 16px; }
  .yr-detail__k { flex-basis: 96px; min-width: 96px; }
}

/* ---------------- descenso ----------------
   Lo unico malo que le puede pasar a tu equipo sin que vos lo hayas elegido,
   asi que se marca en rojo y con una flecha hacia abajo en la linea de tiempo. */
.yr__badge--bad { color: var(--bad); }
.yr-detail__v--bad { color: var(--bad); font-weight: 700; }

/* desplegable de ligas del selector de club */
.select {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px 12px;
  margin-bottom: 8px;
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--txt);
  outline: none;
}
.select:focus { border-color: var(--oro-2); }

/* escudo real encima del monograma: si la imagen no carga, queda el de abajo */
.crest--img { position: relative; background: transparent; overflow: hidden; }

/* La chapa clara para los logos negros sobre transparente. Va apenas por
   debajo del blanco para que no gane la atencion por encima del escudo, y
   con el mismo radio que el resto de las piezas chicas de la pantalla. */
.crest--img.is-oscuro::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: var(--r-sm);
  background: var(--crest-plate);
  box-shadow: 0 1px 3px var(--shade);
}
.crest--img.is-oscuro > img { padding: 11%; }
/* si la imagen fallo, manda el blason: la chapa sobra */
.crest--img.is-oscuro.is-broken::before { display: none; }

.crest--img > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  background: none;
  z-index: 1;                /* por encima del blason de reserva */
}
/* el blason es solo la reserva: aparece unicamente si la imagen falla */
.crest--img > svg,
.crest--img > i { display: none; }
.crest--img.is-broken > img { display: none; }
.crest--img.is-broken > svg { display: block; }
.crest--img.is-broken > i { display: flex; }

/* El blason dibujado: el escudo detras y el monograma encima. El texto se
   sube un poco porque el blason termina en punta y el centro optico queda
   mas arriba que el geometrico. */
.crest--mono,
.crest--img.is-broken { position: relative; background: transparent; }
.crest--mono > svg,
.crest--img.is-broken > svg { position: absolute; inset: 0; }
.crest--mono > i,
.crest--img.is-broken > i {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-style: normal;
  padding-bottom: 14%;
  text-shadow: 0 1px 2px var(--shade-strong);
}

/* ---------------- campeones ---------------- */
.champs {
  border-top: 1px solid var(--line-soft);
  padding: 18px 26px 22px;
}
.champs__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
}
.champs__count {
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: var(--ls-caps);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: var(--r-sm);
  padding: 3px 10px;
}
.champs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: 6px;
  max-height: 232px;
  overflow-y: auto;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
}
.champ {
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--r);
  padding: 5px 3px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.champ img {
  width: 40px;
  height: 40px;
  border-radius: var(--r-xs);
  display: block;
  background: var(--panel-3);
  filter: grayscale(.55) brightness(.8);
  transition: filter var(--dur-fast);
}
.champ:hover { background: var(--panel-2); }
.champ:hover img { filter: none; }
.champ__name {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted);
  line-height: 1.1;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.champ[aria-pressed="true"] { border-color: var(--oro-2); background: color-mix(in srgb, var(--oro-2) 12%, transparent); }
.champ[aria-pressed="true"] img { filter: none; box-shadow: 0 0 0 2px var(--oro-2), 0 0 12px var(--glow-oro); }
.champ[aria-pressed="true"] .champ__name { color: var(--txt); }

/* Pool en la ficha del jugador.

   Arranca en cinco y termina en diez, asi que tiene que poder cortarse en
   dos filas: en una sola, diez retratos de 38px no entran en el panel y
   se aplastaban unos contra otros. */
.pool {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 14px;
}
.pool__c { position: relative; display: block; width: 38px; flex: 0 0 auto; }
.pool__c img {
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  display: block;
  background: var(--panel-3);
}
.pool__c > i {
  position: absolute;
  left: 0; bottom: 0;
  width: var(--pct);
  height: 3px;
  background: var(--accent);
  border-radius: 0 0 0 var(--r-sm);
  display: block;
}

@media (max-width: 560px) {
  .champs { padding: 16px; }
  .champs__grid { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); max-height: 190px; }
  .champ img { width: 34px; height: 34px; }
}

/* logo real del torneo encima de la copa dibujada */
.cup-wrap { position: relative; display: inline-block; flex: 0 0 auto; width: var(--size); height: var(--size); }

/* El metal de cada copa: claro arriba, oscuro abajo. El SVG lo dibuja
   U.trophySvg y solo dice de que tipo es. */
.cup--intl   { --cup-a: var(--metal-gold);   --cup-b: var(--metal-gold-deep); }
.cup--major  { --cup-a: var(--metal-silver); --cup-b: var(--metal-silver-deep); }
.cup--league { --cup-a: var(--metal-bronze); --cup-b: var(--metal-bronze-deep); }
.cup--award  { --cup-a: var(--metal-award);  --cup-b: var(--metal-award-deep); }
.cup__a { stop-color: var(--cup-a); }
.cup__b { stop-color: var(--cup-b); }
.cup__brillo { fill: var(--white); }
.cup-wrap > .cup { position: absolute; inset: 0; width: 100%; height: 100%; }
.cup--img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  z-index: 2;
}

/* separador entre los campeones de tu linea y el resto del roster */
.champs__sep {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 4px 2px;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: var(--ls-caps-wide);
  text-transform: uppercase;
  color: var(--muted-2);
}
.champs__sep::before, .champs__sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-soft);
}

/* la consecuencia que no se mide en OVR */
.opt__note {
  font-size: var(--fs-sm);
  line-height: 1.35;
  color: var(--muted);
  margin: -4px 0 8px;
}

/* campeon fuerte en el parche actual */
.pool__c--meta img { box-shadow: 0 0 0 2px var(--accent); }
.pool__c--meta::after {
  content: "";
  position: absolute;
  top: -3px; right: -3px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg-2);
}

/* ---------------- partidos ---------------- */
.ver-partidos {
  display: inline-block;
  margin-top: 6px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--oro-txt);
  border-radius: var(--r-xs);
  padding: 3px 12px;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
}
.ver-partidos:hover { background: var(--panel-2); color: var(--txt); }

.matches {
  margin: 8px 0 4px;
  border-left: 2px solid var(--line);
  padding-left: 10px;
}
.matches__tit {
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--muted);
  margin: 8px 0 4px;
}
.match {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  font-size: var(--fs-md);
  margin-bottom: 2px;
  background: var(--panel);
}
.match--win  { box-shadow: inset 2px 0 0 var(--good); }
.match--loss { box-shadow: inset 2px 0 0 var(--bad); }
.match__ronda {
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--muted);
  min-width: 62px;
}
.match__rival { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.match__rival > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match__score {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--fs-md);
}
.match--win  .match__score { color: var(--good); }
.match--loss .match__score { color: var(--bad); }

/* lo que pasa despues de una serie de playoffs, en su propio renglon */
.match { flex-wrap: wrap; }
.match__sigue {
  flex-basis: 100%;
  padding-left: 70px;
  margin-top: -1px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--muted);
}
.match--win .match__sigue { color: var(--txt-2); }

/* ---------------- la tabla de la fase regular ---------------- */
.tabla { margin-bottom: 2px; }
.tabla__fila {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  font-size: var(--fs-md);
  margin-bottom: 2px;
  background: var(--panel);
}
/* los que entran a playoffs llevan la raya del costado, como un partido ganado */
.tabla__fila--po { box-shadow: inset 2px 0 0 var(--line); }
.tabla__fila--mia {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow: inset 2px 0 0 var(--accent);
  font-weight: 700;
}
.tabla__pos {
  min-width: 18px;
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--muted);
}
.tabla__fila--mia .tabla__pos { color: var(--accent); }
.tabla__fila .match__score { color: var(--txt-2); }
.tabla__corte {
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--muted-2);
  border-top: 1px dashed var(--line);
  margin: 4px 0;
  padding-top: 3px;
}
.tabla__mas { text-align: center; color: var(--muted-2); line-height: 1; margin: 2px 0; }

.matches__fase {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  color: var(--txt-2);
  margin: 6px 0 3px;
}

.matches__fmt {
  font-size: var(--fs-sm);
  color: var(--muted-2);
  margin: -2px 0 6px;
  font-style: italic;
}

/* ---------------- selector de idioma ---------------- */
.lang-bar {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: 12px;
  z-index: var(--z-barra);
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  backdrop-filter: blur(4px);
}
/* un <select> con cara de pastilla: la flecha va dibujada porque la del
   sistema cambia con cada navegador. color-scheme oscuro para que la lista
   que abre el sistema tampoco salga blanca. */
.lang-select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: var(--r-xs);
  color-scheme: dark;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23b3b9c6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 11px center;
  color: var(--txt);
  font: inherit;
  font-size: var(--fs-md);
  font-weight: 700;
  padding: 5px 28px 5px 12px;
  cursor: pointer;
}
.lang-select:hover { background-color: var(--panel-3); }
.lang-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lang-select option { background: var(--panel); color: var(--txt); }

@media (max-width: 560px) {
  .lang-bar { top: calc(6px + env(safe-area-inset-top, 0px)); right: 6px; padding: 2px; }
  .lang-select { font-size: var(--fs-sm); padding: 4px 26px 4px 10px; }
}

/* la fila del ano se abre: que se note */
.yr__age { position: relative; }
.yr__flecha {
  font-style: normal;
  color: var(--muted-2);
  margin-left: 3px;
  display: inline-block;
  transition: transform var(--dur-fast), color var(--dur-fast);
}
.yr--played:hover .yr__flecha { color: var(--txt-2); }
.yr--open .yr__flecha { transform: rotate(90deg); color: var(--accent); }
.yr--future .yr__flecha, .yr--current:not(.yr--played) .yr__flecha { display: none; }

.tl__ayuda {
  padding: 8px 14px 0;
  font-size: var(--fs-sm);
  color: var(--muted-2);
}

/* ============================================================
   EL DRAFT

   Una sola decision: la composicion rival arriba y tres cartas abajo.
   Cada carta lleva los dos ejes —lo que rendis vos y lo que le suma al
   equipo— en lineas separadas, porque son independientes y mezclarlos
   esconde justo la eleccion que importa.
   ============================================================ */

.decision--draft .decision__desc { margin-bottom: 10px; }

.dr-tablero {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-start;
  padding: 12px;
  margin-bottom: 14px;
  border-radius: var(--r);
  background: var(--panel);
  border: 1px solid var(--line-soft);
}
.dr-lado { min-width: 0; }
.dr-lado__t {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 6px;
}
.dr-fila { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.dr-slot {
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  overflow: hidden;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-3);
  box-shadow: 0 0 0 1px var(--line);
}
.dr-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* el de tu linea, que es contra el que se mide el matchup */
.dr-slot--lane { box-shadow: 0 0 0 2px var(--bad); }

.decision__head .dr-slot { width: 54px; height: 54px; border-radius: var(--r); }

/* los dos ejes de cada carta */
.dr-ejes {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
}
.dr-eje { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--txt-2); }
.dr-eje b {
  display: inline-block;
  flex: none;
  min-width: 46px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--muted-2);
}
.dr-pick { margin-top: 4px; }

/* Cada lectura de la carta en un recuadro de color, con un cuadradito del
   mismo color adelante: dorado lo mejor, verde suma, gris da igual, rojo
   resta. Se entiende antes de leer la frase. */
.dr-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 2px 8px 2px 6px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--panel-3);
  color: var(--txt-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
}
.dr-chip::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--r-xs);
  background: currentColor;
}
.dr-chip--top,
.dr-chip--bien   { color: var(--good); background: var(--good-dim);      border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.dr-chip--neutro { color: var(--gold); background: color-mix(in srgb, var(--warn) 12%, transparent); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.dr-chip--mal    { color: var(--bad);     background: var(--bad-dim);       border-color: color-mix(in srgb, var(--bad) 45%, transparent); }

@media (max-width: 560px) {
  .dr-slot { width: 32px; height: 32px; }
  .dr-tablero { gap: 10px; padding: 10px; }
}

/* El pie del resumen internacional nunca habia tenido estilo: los spans
   se pegaban y salia "0 titulosW 0M 0FS 0" todo junto. */
.tl__sub { font-size: var(--fs-md); }
.tl__nation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-base);
}
.tl__nation > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.tl__nation .yr__n { flex: 0 0 auto; }

/* ============================================================
   EL INICIO: las piezas que comparte con la carrera del día
   (js/ui/diario.js las usa tal cual: la portada nueva tiene las suyas)
   ============================================================ */

.hm { max-width: 860px; margin: 0 auto; }

.hm-hero { text-align: center; padding: 18px 0 30px; }
.hm-hero__sub {
  color: var(--txt-2);
  max-width: 540px;
  margin: 10px auto 0;
  font-size: var(--fs-body);
  line-height: 1.55;
}

.hm-modos { display: grid; gap: var(--gap-3); margin-bottom: var(--gap-5); }

/* la tarjeta de una entrada: clickeable entera, marco dorado al pasar */
.hm-modo {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  text-align: left;
  transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
}
.hm-modo:hover {
  border-color: var(--oro-2);
  background: linear-gradient(180deg, var(--panel-2), var(--bg-2));
  transform: translateY(-2px);
  box-shadow: 0 0 22px -8px var(--glow-oro);
}
.hm-modo__icono { font-size: var(--ico-lg); line-height: 1; flex: 0 0 auto; }
.hm-modo__texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.hm-modo__nombre { font-size: var(--fs-xl); font-weight: 700; letter-spacing: var(--ls-wide); color: var(--oro-1); }
.hm-modo__bajada { font-size: var(--fs-base); color: var(--txt-2); line-height: 1.5; }
.hm-modo__flecha { font-size: var(--ico-md); color: var(--oro-4); flex: 0 0 auto; transition: color var(--dur-fast); }
.hm-modo:hover .hm-modo__flecha { color: var(--oro-1); }

.hm-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-3); }
.hm-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  padding: 18px;
}
.hm-card__tit {
  font-size: var(--fs-sm);
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.hm-card__sub { font-family: var(--font); color: var(--muted-2); letter-spacing: var(--ls-wide); text-transform: none; font-weight: 600; }

.hm-marcas { display: flex; flex-direction: column; }
.hm-marca {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 10px;
  padding: 8px 0;
  border-top: 1px solid var(--line-soft);
}
.hm-marca:first-child { border-top: 0; padding-top: 0; }
.hm-marca__k { font-size: var(--fs-base); color: var(--txt-2); }
.hm-marca__v { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; text-align: right; color: var(--oro-1); font-variant-numeric: lining-nums tabular-nums; }
.hm-marca__quien {
  grid-column: 1 / -1;
  font-size: var(--fs-sm);
  color: var(--muted-2);
}

/* borrar las marcas: un enlace chico, a propósito poco tentador */
.hm-borrar {
  display: block;
  margin: var(--gap-4) auto 0;
  font-size: var(--fs-sm);
  color: var(--muted-2);
  background: none;
  border: 0;
  padding: var(--gap-1) 0;
  text-decoration: underline;
}
.hm-borrar:hover { color: var(--txt-2); }

/* ============================================================
   LA PORTADA
   La puerta del sitio, con la cara del cliente. Viene escrita en el HTML
   de cada idioma (tools/build-paginas.js) para que la lean los buscadores;
   home.js la "despierta". Todo lo que se mueve acá se apaga con
   prefers-reduced-motion (al final del bloque).
   ============================================================ */

.portada { max-width: 1120px; margin: 0 auto; }
/* entraron con una dirección puesta (#/carrera): la portada escrita en el
   HTML no se muestra mientras arranca el juego (la marca la pone index.html
   y la saca home.js) */
.is-con-ruta .portada { visibility: hidden; }

/* ---------- la medalla: el ícono redondo con el rombo arriba ----------
   La de "Elige una calle": un aro dorado, un aro fino por fuera y el
   rombo que lo corta arriba. Apagada por defecto; --on es la elegida. */
.medalla {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border: 2px solid transparent;
  border-radius: var(--r-circulo);
  background: radial-gradient(circle at 50% 35%, var(--panel-2), var(--bg) 72%) padding-box, var(--marco-apagado) border-box;
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px color-mix(in srgb, var(--oro-4) 60%, transparent);
  color: var(--oro-4);
  transition: color var(--dur) var(--ease-hex), box-shadow var(--dur) var(--ease-hex), background var(--dur) var(--ease-hex);
}
.medalla::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -8px;
  width: 9px;
  height: 9px;
  background: var(--oro-4);
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 0 0 0 2px var(--bg);
  transition: background var(--dur) var(--ease-hex);
}
.medalla__glifo { width: 52%; height: 52%; }
.medalla__num { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); line-height: 1; }
.medalla--on {
  color: var(--oro-1);
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--oro-2) 22%, var(--panel-2)), var(--bg) 72%) padding-box, var(--marco-claro) border-box;
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--oro-2), 0 0 28px -2px var(--glow-oro);
}
.medalla--on::before { background: var(--oro-1); }
.medalla--lg { width: 84px; height: 84px; }

/* ---------- el sobretítulo con sus filetes ---------- */
.sobretitulo {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-3);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--oro-2);
}
.sobretitulo::before,
.sobretitulo::after {
  content: "";
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--oro-3));
}
.sobretitulo::after { transform: scaleX(-1); }

/* ---------- 1. el héroe ---------- */
.portada-heroe {
  position: relative;
  isolation: isolate;
  min-height: min(84vh, 780px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--gap-7) 0 var(--gap-8);
}
.portada-heroe__fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(closest-side, var(--bg) 60%, transparent 100%);
  mask-image: radial-gradient(closest-side, var(--bg) 60%, transparent 100%);
}
.runa {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(760px, 150vw);
  aspect-ratio: 1;
  translate: -50% -50%;
  opacity: .55;
  animation: cup-spin calc(var(--dur-loop) * 6) linear infinite;
}
.runa--b { width: min(500px, 100vw); opacity: .4; animation-direction: reverse; animation-duration: calc(var(--dur-loop) * 4); }
.runa__aro { fill: none; stroke: var(--oro-4); stroke-width: 1; }
.runa__aro--fino { stroke: var(--oro-5); stroke-dasharray: 1 5; }
.runa__marcas { fill: none; stroke: var(--oro-4); stroke-width: 1; }
.runa__rombo { fill: var(--oro-3); }

/* la magia: un resplandor cian que respira detrás del título */
.portada-heroe__magia {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 640px;
  height: 420px;
  translate: -50% -50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--cian-3) 35%, transparent), transparent);
  animation: magia-respira var(--dur-latido) ease-in-out infinite alternate;
}
@keyframes magia-respira { from { opacity: .55; scale: .94; } to { opacity: 1; scale: 1.04; } }

/* las chispas que suben, como el polvo de la pantalla de inicio */
.chispas { position: absolute; inset: 0; }
.chispas i {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: var(--r-circulo);
  background: var(--oro-1);
  box-shadow: 0 0 8px 2px var(--glow-oro);
  opacity: 0;
  animation: chispa calc(var(--dur-loop) * .7) linear infinite;
}
.chispas i:nth-child(3n)   { background: var(--cian-1); box-shadow: 0 0 8px 2px var(--glow-cian); }
.chispas i:nth-child(1)  { left: 8%;  animation-delay: calc(var(--dur-loop) * -.10); }
.chispas i:nth-child(2)  { left: 17%; animation-delay: calc(var(--dur-loop) * -.42); animation-duration: calc(var(--dur-loop) * .9); }
.chispas i:nth-child(3)  { left: 24%; animation-delay: calc(var(--dur-loop) * -.25); }
.chispas i:nth-child(4)  { left: 31%; animation-delay: calc(var(--dur-loop) * -.61); animation-duration: calc(var(--dur-loop) * .55); }
.chispas i:nth-child(5)  { left: 39%; animation-delay: calc(var(--dur-loop) * -.05); }
.chispas i:nth-child(6)  { left: 46%; animation-delay: calc(var(--dur-loop) * -.33); animation-duration: calc(var(--dur-loop) * .8); }
.chispas i:nth-child(7)  { left: 54%; animation-delay: calc(var(--dur-loop) * -.52); }
.chispas i:nth-child(8)  { left: 60%; animation-delay: calc(var(--dur-loop) * -.18); animation-duration: calc(var(--dur-loop) * .6); }
.chispas i:nth-child(9)  { left: 67%; animation-delay: calc(var(--dur-loop) * -.47); }
.chispas i:nth-child(10) { left: 73%; animation-delay: calc(var(--dur-loop) * -.29); animation-duration: calc(var(--dur-loop) * .95); }
.chispas i:nth-child(11) { left: 80%; animation-delay: calc(var(--dur-loop) * -.66); }
.chispas i:nth-child(12) { left: 86%; animation-delay: calc(var(--dur-loop) * -.12); animation-duration: calc(var(--dur-loop) * .65); }
.chispas i:nth-child(13) { left: 92%; animation-delay: calc(var(--dur-loop) * -.38); }
.chispas i:nth-child(14) { left: 13%; animation-delay: calc(var(--dur-loop) * -.57); animation-duration: calc(var(--dur-loop) * .85); }
@keyframes chispa {
  0%   { transform: translate(0, 0); opacity: 0; }
  12%  { opacity: .9; }
  70%  { opacity: .5; }
  100% { transform: translate(28px, -640px); opacity: 0; }
}
.chispas i:nth-child(even) { animation-name: chispa-b; }
@keyframes chispa-b {
  0%   { transform: translate(0, 0); opacity: 0; }
  15%  { opacity: .8; }
  100% { transform: translate(-36px, -560px); opacity: 0; }
}

/* entrar de a uno: sube, se enfoca y frena. --i es su turno. */
.entra {
  animation: entra var(--dur-entrada) var(--ease-salida) both;
  animation-delay: calc(var(--i, 0) * var(--dur-escalon) + var(--dur-fast));
}
@keyframes entra {
  from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

.portada-heroe__titulo {
  margin: var(--gap-3) 0 var(--gap-4);
  padding-inline: .1em;   /* que la itálica no se corte en los bordes */
  font-family: var(--font-display);
  font-style: var(--display-estilo);
  font-weight: 800;
  font-size: var(--fs-hero);
  line-height: .95;
  text-transform: uppercase;
  background: linear-gradient(100deg, var(--oro-2) 0%, var(--oro-1) 38%, var(--white) 50%, var(--oro-1) 62%, var(--oro-2) 100%);
  background-size: 250% 100%;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: titulo-asienta var(--dur-slower) var(--ease-salida) both, titulo-brillo calc(var(--dur-latido) * 1.4) var(--ease-hex) both;
  animation-delay: calc(var(--i) * var(--dur-escalon)), calc(var(--dur-entrada) + var(--dur-slow));
}
/* el título se asienta: llega abierto y se cierra */
@keyframes titulo-asienta {
  from { opacity: 0; transform: translateY(22px) scale(.97); letter-spacing: var(--ls-kicker); }
  to   { opacity: 1; transform: none; letter-spacing: normal; }
}
/* y un reflejo lo cruza una vez */
@keyframes titulo-brillo { from { background-position: 100% 0; } to { background-position: 0 0; } }

.portada-heroe__sub {
  max-width: 620px;
  margin: 0 auto var(--gap-5);
  color: var(--txt-2);
  font-size: var(--fs-lg);
  line-height: 1.55;
}
.portada-heroe__cta { display: flex; flex-wrap: wrap; gap: var(--gap-4); align-items: center; justify-content: center; }
.portada-heroe__nota { margin: var(--gap-3) 0 0; font-size: var(--fs-sm); letter-spacing: var(--ls-wide); color: var(--muted); }

.portada-datos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: var(--gap-6) 0 0;
  padding: 0;
}
.portada-datos li { display: flex; flex-direction: column; align-items: center; gap: var(--gap-1); padding: 0 var(--gap-5); }
.portada-datos li + li { border-left: 1px solid var(--line); }
.portada-datos b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: 1;
  color: var(--oro-1);
  font-variant-numeric: lining-nums tabular-nums;
}
.portada-datos span { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--ls-caps-wide); text-transform: uppercase; color: var(--muted); }

/* la flechita que invita a bajar */
.portada-heroe__baja {
  position: absolute;
  left: 50%;
  bottom: var(--gap-6);
  width: 14px;
  height: 14px;
  border-right: 2px solid var(--oro-3);
  border-bottom: 2px solid var(--oro-3);
  transform: translateX(-50%) rotate(45deg);
  opacity: .7;
  animation: baja var(--dur-latido) ease-in-out infinite;
}
@keyframes baja { 50% { translate: 0 8px; opacity: .25; } }

/* ---------- las secciones ---------- */
.portada-sec { padding: var(--gap-7) 0; }
.portada-sec__cab { text-align: center; margin-bottom: var(--gap-6); }
.portada-sec__tit {
  margin: var(--gap-2) 0 0;
  font-family: var(--font-display);
  font-style: var(--display-estilo);
  font-weight: 800;
  font-size: var(--fs-display-sm);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--oro-1);
}
.portada-sec__bajada { max-width: 600px; margin: var(--gap-3) auto 0; color: var(--txt-2); font-size: var(--fs-body); line-height: 1.6; }

/* entrar al hacer scroll: lo prende home.js (.portada--anima en la pantalla,
   .is-visto en cada sección). Sin JS —y para los buscadores— todo se ve quieto. */
.portada--anima .revela { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-entrada) var(--ease-salida), transform var(--dur-entrada) var(--ease-salida); }
.portada--anima .revela.is-visto { opacity: 1; transform: none; }
.portada--anima .revela .portada-modo,
.portada--anima .revela .pasos > li,
.portada--anima .revela .puestos__tab {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-entrada) var(--ease-salida), transform var(--dur-entrada) var(--ease-salida);
  transition-delay: calc(var(--i, 0) * var(--dur-escalon) * 2 + var(--dur));
}
.portada--anima .revela.is-visto .portada-modo,
.portada--anima .revela.is-visto .pasos > li,
.portada--anima .revela.is-visto .puestos__tab { opacity: 1; transform: none; }

/* ---------- 2. los modos: la pantalla de jugar del cliente ---------- */
.portada-modos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-5); }
.portada-modo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-3);
  min-height: 340px;
  padding: var(--gap-6) var(--gap-5) 0;
  border: 2px solid transparent;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--bg-2), var(--bg)) padding-box, var(--marco-apagado) border-box;
  text-align: center;
  transition: transform var(--dur) var(--ease-salida), box-shadow var(--dur), background var(--dur), opacity var(--dur-entrada) var(--ease-salida);
}
.portada-modo__arte {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .5;
  transition: opacity var(--dur-slow), transform var(--dur-slower) var(--ease-salida);
}
.portada-modo--carrera .portada-modo__arte {
  background:
    radial-gradient(70% 55% at 50% 0%, color-mix(in srgb, var(--cian-3) 35%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 35%, transparent) 20%, var(--bg) 92%),
    url(../img/rift.png) center 30% / 120% no-repeat;
  filter: saturate(.7) brightness(.55);
}
.portada-modo--diario .portada-modo__arte {
  background:
    radial-gradient(70% 55% at 50% 0%, color-mix(in srgb, var(--oro-3) 35%, transparent), transparent 70%),
    repeating-conic-gradient(from 0deg at 50% 34%, color-mix(in srgb, var(--oro-4) 35%, transparent) 0deg 1.5deg, transparent 1.5deg 15deg);
  -webkit-mask-image: radial-gradient(60% 55% at 50% 34%, var(--bg), transparent);
  mask-image: radial-gradient(60% 55% at 50% 34%, var(--bg), transparent);
}
.portada-modo:hover {
  transform: translateY(-4px);
  background: linear-gradient(180deg, var(--bg-2), var(--bg)) padding-box, var(--marco) border-box;
  box-shadow: 0 22px 44px -22px var(--glow-oro);
}
.portada-modo:hover .portada-modo__arte { opacity: .85; transform: scale(1.05); }
.portada-modo:hover .medalla {
  color: var(--oro-1);
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--oro-2) 22%, var(--panel-2)), var(--bg) 72%) padding-box, var(--marco-claro) border-box;
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--oro-2), 0 0 28px -2px var(--glow-oro);
}
.portada-modo .medalla { color: var(--oro-2); margin-bottom: var(--gap-2); }
.portada-modo__nombre {
  font-family: var(--font-display);
  font-style: var(--display-estilo);
  font-weight: 800;
  font-size: var(--fs-2xl);
  text-transform: uppercase;
  color: var(--oro-1);
}
.portada-modo__bajada { max-width: 36ch; color: var(--txt-2); font-size: var(--fs-body); line-height: 1.55; }
.portada-modo__chip { font-size: var(--fs-sm); letter-spacing: var(--ls-wide); color: var(--muted); }
.portada-modo__jugar {
  width: calc(100% + var(--gap-5) * 2);
  margin-top: auto;
  padding: var(--gap-3) 0;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--ls-boton);
  text-transform: uppercase;
  color: var(--oro-txt);
  transition: color var(--dur-fast), background var(--dur-fast);
}
.portada-modo:hover .portada-modo__jugar { color: var(--oro-1); background: color-mix(in srgb, var(--oro-2) 12%, transparent); }

/* ---------- 3. elegí tu puesto (el "Elige una calle") ---------- */
.puestos { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--gap-6); align-items: center; }
.puestos__cab { text-align: left; }
.puestos__cab .portada-sec__bajada { margin-left: 0; }
.puestos__cab .sobretitulo::before { display: none; }
.puestos__tabs { display: flex; flex-wrap: wrap; gap: var(--gap-4); margin-top: var(--gap-6); }
.puestos__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-3);
  min-width: 72px;
  padding: var(--gap-3) 0 0;
  border: 0;
  background: none;
}
.puestos__tab .medalla { width: 64px; height: 64px; }
.puestos__nombre {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--dur-fast);
}
.puestos__tab:hover .medalla:not(.medalla--on) { color: var(--oro-2); background: radial-gradient(circle at 50% 35%, var(--panel-2), var(--bg) 72%) padding-box, var(--marco) border-box; }
.puestos__tab:hover .puestos__nombre { color: var(--txt-2); }
.puestos__tab[aria-pressed="true"] .puestos__nombre { color: var(--oro-1); }

.puesto { display: flex; flex-direction: column; align-items: center; gap: var(--gap-3); text-align: center; }
.puesto__mapa { position: relative; width: 100%; max-width: 500px; aspect-ratio: 1; }
.puesto__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.7) brightness(.42) contrast(1.2);   /* oscuro, con el río azul: como el mapa de la web del juego */
  -webkit-mask-image: radial-gradient(closest-side, var(--bg) 62%, transparent 100%);
  mask-image: radial-gradient(closest-side, var(--bg) 62%, transparent 100%);
}
/* el haz de luz de la base a la calle, que se dibuja cada vez que elegís */
.puesto__haz { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.puesto__haz line {
  stroke: var(--cian-2);
  stroke-width: .7;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 4px var(--glow-cian));
  animation: haz var(--dur-entrada) var(--ease-salida) forwards;
}
@keyframes haz { to { stroke-dashoffset: 0; } }
.puesto__base {
  position: absolute;
  left: 10%;
  top: 90%;
  width: 18px;
  height: 18px;
  translate: -50% -50%;
  border: 2px solid var(--cian-2);
  border-radius: var(--r-circulo);
  animation: pulso var(--dur-latido) ease-out infinite;
}
@keyframes pulso { from { box-shadow: 0 0 0 0 var(--glow-cian); } to { box-shadow: 0 0 0 18px transparent; } }
.puesto__pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
  animation: pin-aparece var(--dur-slow) var(--ease-pop) both;
  animation-delay: calc(var(--dur-entrada) * .55);
}
@keyframes pin-aparece { from { scale: .4; opacity: 0; } to { scale: 1; opacity: 1; } }
.puesto__texto { animation: entra var(--dur-slow) var(--ease-salida) both; }
.puesto__nombre {
  margin: 0;
  font-family: var(--font-display);
  font-style: var(--display-estilo);
  font-weight: 800;
  font-size: var(--fs-2xl);
  text-transform: uppercase;
  color: var(--oro-1);
}
.puesto__texto p { max-width: 46ch; margin: var(--gap-2) auto var(--gap-3); color: var(--txt-2); line-height: 1.6; }

/* ---------- 4. cómo se juega ---------- */
.pasos { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-5); margin: 0; padding: 0; list-style: none; }
.pasos::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 17%;
  right: 17%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--oro-4) 20%, var(--oro-4) 80%, transparent);
}
.pasos > li { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--gap-2); text-align: center; }
.pasos .medalla { margin-bottom: var(--gap-2); color: var(--oro-2); }
.pasos b { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); letter-spacing: var(--ls-wide); color: var(--oro-1); }
.pasos > li > span:last-child { max-width: 30ch; color: var(--txt-2); font-size: var(--fs-base); line-height: 1.55; }

/* ---------- 5. tus marcas ---------- */
.portada-marcas { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--gap-3); }
.portada-marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-1);
  padding: var(--gap-4);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  text-align: center;
}
.portada-marca__k { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--muted); }
.portada-marca__v { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; color: var(--oro-1); font-variant-numeric: lining-nums tabular-nums; }
.portada-marca__quien { font-size: var(--fs-sm); color: var(--muted-2); }


/* ---------- 6. preguntas frecuentes ---------- */
.faq { display: flex; flex-direction: column; gap: var(--gap-2); max-width: 780px; margin: 0 auto; }
.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  transition: border-color var(--dur-fast);
}
.faq__item[open] { border-color: var(--oro-4); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-3);
  padding: var(--gap-4) var(--gap-5);
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  color: var(--oro-1);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: calc(var(--gap-1) * -1);
  border-right: 2px solid var(--oro-2);
  border-bottom: 2px solid var(--oro-2);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease-hex), margin var(--dur) var(--ease-hex);
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg); margin-top: var(--gap-1); }
.faq__q:hover { color: var(--white); }
.faq__a { margin: 0; padding: 0 var(--gap-5) var(--gap-4); color: var(--txt-2); font-size: var(--fs-base); line-height: 1.65; }
.faq__item[open] .faq__a { animation: entra var(--dur-slow) var(--ease-salida); }

.hm-pie { margin-top: var(--gap-5); }

@media (prefers-reduced-motion: reduce) {
  .runa, .portada-heroe__magia, .chispas, .portada-heroe__baja, .puesto__base { animation: none; }
  .chispas { display: none; }
  .entra, .portada-heroe__titulo, .puesto__texto, .puesto__pin, .faq__item[open] .faq__a { animation: none; }
  .puesto__haz line { animation: none; stroke-dashoffset: 0; }
}

/* el boton de volver, arriba a la izquierda de una pantalla de adentro */
.btn--volver {
  position: absolute;
  left: 0;
  top: 0;
  font-size: var(--fs-base);
  padding: 7px 13px;
}
.intro { position: relative; }

/* ============================================================
   LOS DOS BOTONES DE LA PORTADA Y EL PANEL DE INFORMACION
   ============================================================ */

.hm-acciones {
  display: flex;
  gap: var(--gap-3);
  justify-content: center;
  margin-top: var(--gap-4);
  flex-wrap: wrap;
}

.hm-accion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--r-xs);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--oro-txt);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.hm-accion:hover { border-color: var(--oro-2); background: var(--oro-6); color: var(--oro-1); }
.hm-accion__ico { font-size: var(--ico-sm); line-height: 1; }

/* El café: el guiño a la esencia azul de la tienda del cliente (un
   cristal propio, el marco cian). Dice "Ko-fi" para que nadie crea que
   está comprando algo del juego. */
.hm-accion--kofi {
  border: 2px solid transparent;
  background: linear-gradient(180deg, var(--cian-5), var(--cian-6)) padding-box, linear-gradient(0deg, var(--cian-4), var(--cian-2)) border-box;
  color: var(--cian-1);
}
.hm-accion--kofi:hover {
  background: linear-gradient(180deg, var(--cian-5), var(--cian-6)) padding-box, linear-gradient(0deg, var(--cian-3), var(--cian-1)) border-box;
  box-shadow: 0 0 20px -4px var(--glow-cian);
  color: var(--white);
}
.hm-accion__marca { font-family: var(--font); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-wide); text-transform: none; color: var(--cian-2); opacity: .8; }
.esencia { width: 18px; height: 18px; flex: none; filter: drop-shadow(0 0 6px var(--glow-cian)); }
.esencia__a { fill: var(--cian-3); }
.esencia__b { fill: var(--cian-1); }
.esencia__c { fill: var(--cian-4); }
.hm-accion--kofi:hover .esencia { animation: esencia-brilla var(--dur-slower) var(--ease-pop); }
@keyframes esencia-brilla { 40% { transform: scale(1.25) rotate(-8deg); } }

/* ---------------- el panel ---------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--scrim);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--dur) ease;
}
.modal.is-in { opacity: 1; }

.modal__caja {
  position: relative;
  width: min(620px, 100%);
  max-height: min(84vh, 760px);
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
  border: 2px solid transparent;
  background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--marco) border-box;
  box-shadow: var(--shadow);
  transform: translateY(10px) scale(.98);
  transition: transform var(--dur) var(--ease-suave);
}
.modal.is-in .modal__caja { transform: none; }

.modal__x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: var(--r-circulo);
  border: 1px solid var(--oro-5);
  background: var(--bg);
  color: var(--oro-2);
  font-size: var(--ico-sm);
  line-height: 1;
}
.modal__x:hover { background: var(--panel-2); color: var(--oro-1); }

.modal__scroll {
  overflow-y: auto;
  padding: 24px 26px 8px;
  min-height: 0;
}
.modal__pie {
  padding: 14px 26px 18px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: flex-end;
}

.info__bloque { margin-bottom: 22px; }
.info__bloque:last-child { margin-bottom: 8px; }
.info__bloque h3 {
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: var(--ls-tight);
  margin: 0 0 8px;
}
.info__bloque p {
  margin: 0 0 9px;
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--txt-2);
}
/* el aviso legal cierra, en gris y mas chico: esta para que este */
.info__bloque:last-child h3 { font-size: var(--fs-md); color: var(--muted); text-transform: uppercase; letter-spacing: var(--ls-caps); }
.info__bloque:last-child p { font-size: var(--fs-md); color: var(--muted-2); }

/* el aviso de Riot y el enlace de privacidad, en el pie */
.legal__riot { display: block; margin-top: 8px; opacity: .85; }
.legal__links { display: block; margin-top: 10px; }
.legal__link {
  background: none;
  border: 0;
  padding: 4px 6px;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
}
.legal__link:hover { color: var(--txt-2); }
.legal__beta { font-size: var(--fs-sm); color: var(--muted); }

/* ============================================================
   PASO 2 DE LA IDENTIDAD: EL CARTEL DE LO OPCIONAL

   Se pinta dentro de #app pero se posiciona sobre todo, para que lo
   alcance la delegacion de clics sin dejar de comportarse como cartel.
   ============================================================ */

.extras {
  position: fixed;
  inset: 0;
  z-index: var(--z-cartel);
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--scrim);
  backdrop-filter: blur(3px);
  animation: extrasIn var(--dur) ease;
}
@keyframes extrasIn { from { opacity: 0; } to { opacity: 1; } }

.extras__caja {
  width: min(560px, 100%);
  max-height: min(86vh, 800px);
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
  border: 2px solid transparent;
  background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--marco) border-box;
  box-shadow: var(--shadow);
}

.extras__head { padding: 22px 24px 16px; }
.extras__head h2 {
  margin: 0 0 6px;
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: var(--ls-tight);
}
.extras__head .note { margin: 0; text-align: left; }

.extras__secs {
  overflow-y: auto;
  min-height: 0;
  border-top: 1px solid var(--line-soft);
}

.extras__foot {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-3);
  padding: 16px 24px 20px;
  border-top: 1px solid var(--line-soft);
}

/* ---------------- secciones plegables ---------------- */

.ex-sec + .ex-sec { border-top: 1px solid var(--line-soft); }

.ex-sec__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 24px 4px 14px;
}

.ex-sec__tit {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 14px 6px;
  background: none;
  border: 0;
  text-align: left;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--txt);
}
.ex-sec__tit:hover { color: var(--white); }

.ex-sec__flecha {
  flex: 0 0 auto;
  font-size: var(--fs-md);
  color: var(--muted);
  transition: transform var(--dur-fast) ease;
}
.ex-sec.is-abierta .ex-sec__flecha { transform: rotate(90deg); color: var(--accent); }

.ex-sec__nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ex-sec__lado {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.ex-sec__dato {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--accent);
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ex-sec__cuerpo { padding: 0 20px 18px; }
/* dentro del cartel las listas no necesitan ser tan altas */
.ex-sec__cuerpo .countries { max-height: 230px; }
.ex-sec__cuerpo .champs { border-top: 0; padding: 0; }
.ex-sec__cuerpo .champs__grid { max-height: 210px; }

/* ---------------- la carrera del dia ---------------- */

.dia .hm-hero { padding-top: 10px; }

.dia-ficha {
  display: flex;
  gap: var(--gap-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--gap-4);
}
.dia-ficha__item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  padding: 10px 18px;
  border-radius: var(--r);
  background: var(--panel);
  border: 1px solid var(--line-soft);
}
.dia-ficha__item span {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--muted-2);
}
.dia-ficha__item b { font-size: var(--fs-body); display: flex; align-items: center; gap: 6px; }

.dia-res { margin-bottom: var(--gap-4); }

.dia-lista { display: flex; flex-direction: column; }
.dia-lista__fila {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-base);
}
.dia-lista__fila:first-child { border-top: 0; padding-top: 0; }
.dia-lista__fila b { color: var(--accent); }

/* ---------------- aviso de cookies ----------------
   Abajo y angosto: un cartel que tapa media pantalla es la razon por la
   que todo el mundo odia estos avisos. Rechazar pesa lo mismo que
   aceptar, que ademas es lo que pide la norma europea. */
.cookies {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-cookies);
  padding: 12px;
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur) ease, transform var(--dur) ease;
}
.cookies.is-in { opacity: 1; transform: none; }
.cookies__caja {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 820px;
  padding: 14px 18px;
  border-radius: var(--r-lg);
  border: 1px solid var(--oro-4);
  background: var(--bg);
  box-shadow: var(--shadow);
}
.cookies__txt { margin: 0; flex: 1 1 320px; font-size: var(--fs-base); line-height: 1.5; color: var(--txt-2); }
.cookies__btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cookies__mas {
  background: none; border: 0; padding: 4px;
  font-size: var(--fs-sm); color: var(--muted); text-decoration: underline;
}
.cookies__mas:hover { color: var(--txt-2); }

@media (max-width: 560px) {
  .cookies__caja { flex-direction: column; align-items: stretch; }
  .cookies__btns .btn { flex: 1 1 0; }
}

/* ============================================================
   COMPARTIR LA CARRERA (pantalla final)
   ============================================================ */
.share { margin-top: var(--gap-5); }
.share__body {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: var(--gap-5);
  align-items: start;
}
.share__preview {
  width: 100%;
  height: auto;
  aspect-ratio: 1080 / 1350;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--panel-2);
  box-shadow: var(--shadow);
}
.share__side { display: flex; flex-direction: column; gap: var(--gap-3); min-width: 0; }
.share__row { display: flex; flex-wrap: wrap; gap: var(--gap-2); }
.share__red { text-decoration: none; }
@media (max-width: 560px) {
  .share__body { grid-template-columns: 1fr; }
  .share__preview { max-width: 280px; margin: 0 auto; }
}

/* resultado de la decision anterior: el evento de titulo */
.flash { margin: 4px 0 2px; }
.flash__tit { font-size: var(--fs-lg); font-weight: 800; line-height: 1.2; color: var(--txt); }
.flash__opt { margin-top: 2px; font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--accent); }
.flash__txt { margin-top: 6px; font-size: var(--fs-base); line-height: 1.45; color: var(--txt-2); }


/* ============================================================
   LOS TÍTULOS: la letra del cliente
   Un solo lugar dice qué es título. Spectral, en mayúscula, y los
   grandes en itálica (--display-estilo), como en la web del juego.
   En chino, japonés y coreano el token los pasa a la letra del sistema.
   ============================================================ */
.decision__title, .opt__name, .mode__name, .identity__head h1, .identity__coltitle,
.final__name, .cup-pop__name, .extras__head h2, .info__bloque h3, .flash__tit,
.plr__nick, .club-card__name, .hm-modo__nombre, .ex-sec__tit, .card__title,
.hm-card__tit, .cup-pop__kicker {
  font-family: var(--font-display);
}
.decision__title, .identity__head h1, .final__name, .cup-pop__name, .extras__head h2 {
  font-style: var(--display-estilo);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--oro-1);
}
.opt__name, .plr__nick, .flash__tit, .info__bloque h3, .identity__coltitle, .club-card__name, .ex-sec__tit {
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  color: var(--oro-1);
}
.identity__coltitle, .card__title, .hm-card__tit, .cup-pop__kicker { text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--oro-2); font-weight: 700; }


/* ---------------- LA PANTALLA DE VICTORIA ----------------
   El cartel de campeón con la cara del final de una partida ganada: el
   emblema dorado se abre (las plumas salen de a una), lo que ganaste llega
   abierto y se cierra, y un destello lo cruza por detrás. La palabra es la
   nuestra ("Campeón de LCK"), nunca "Victoria". */
.cup-pop { background: radial-gradient(55% 45% at 50% 40%, color-mix(in srgb, var(--cian-5) 85%, transparent), var(--scrim) 75%); }
.cup-pop__rays { top: 120px; opacity: .7; }
.victoria { position: relative; width: 400px; max-width: 92vw; aspect-ratio: 400 / 230; margin: 0 auto; }
.victoria__emblema { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 22px var(--glow-oro)); animation: vic-emblema var(--dur-slower) var(--ease-salida) both; }
@keyframes vic-emblema { from { opacity: 0; transform: scale(1.35); filter: blur(8px); } to { opacity: 1; transform: none; filter: drop-shadow(0 0 22px var(--glow-oro)); } }
.victoria__oro-a { stop-color: var(--oro-1); }
.victoria__oro-b { stop-color: var(--oro-4); }
.victoria__pluma { fill: url(#vic-oro); stroke: var(--oro-1); stroke-width: .8; transform-box: fill-box; transform-origin: 100% 50%; animation: vic-pluma var(--dur-slower) var(--ease-resorte) both; animation-delay: calc(var(--dur-slow) + var(--i) * var(--dur-escalon)); }
@keyframes vic-pluma { from { opacity: 0; transform: scaleX(.2) rotate(8deg); } to { opacity: 1; transform: none; } }
.victoria__fondo { fill: var(--bg); }
.victoria__aro { fill: none; stroke: url(#vic-oro); stroke-width: 4; }
.victoria__aro--fino { stroke: var(--oro-4); stroke-width: 1.2; }
.victoria__rombo { fill: url(#vic-oro); stroke: var(--oro-1); stroke-width: .8; }
.victoria .cup-pop__cup { position: absolute; left: 50%; top: 48.7%; translate: -50% -50%; filter: drop-shadow(0 6px 18px var(--shade-strong)); }

.victoria__palabra {
  position: relative;
  margin-top: var(--gap-1);
  font-family: var(--font-display);
  font-style: var(--display-estilo);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: 1;
  text-transform: uppercase;
}
/* el destello horizontal detrás de la palabra */
.victoria__palabra::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140%;
  height: 3px;
  translate: -50% -50%;
  background: linear-gradient(90deg, transparent, var(--cian-1) 45%, var(--white) 50%, var(--cian-1) 55%, transparent);
  box-shadow: 0 0 18px 4px var(--glow-cian);
  animation: vic-destello calc(var(--dur-slower) * 2) var(--ease-hex) both;
  animation-delay: var(--dur-slower);
}
@keyframes vic-destello { 0% { opacity: 0; transform: scaleX(0); } 40% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1.1); } }
.victoria__palabra > span {
  position: relative;
  display: inline-block;
  padding-inline: .1em;
  background: linear-gradient(180deg, var(--white) 0%, var(--oro-1) 35%, var(--oro-2) 60%, var(--oro-4) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 var(--bg)) drop-shadow(0 0 18px var(--glow-oro));
  animation: titulo-asienta var(--dur-slower) var(--ease-salida) both;
  animation-delay: var(--dur-slow);
}
.cup-pop__kicker { margin-top: var(--gap-2); }
.cup-pop__name.victoria__palabra { font-size: var(--fs-display-sm); letter-spacing: var(--ls-wide); }
@media (prefers-reduced-motion: reduce) {
  .victoria__emblema, .victoria__pluma, .victoria__palabra span, .victoria__palabra::before { animation: none; }
  .victoria__palabra::before { opacity: 0; }
}