/* ==========================================================================
   Inertia.gg — Torneos comunitarios de pago
   Zonas comunes con la marca propia (lima) y tres secciones temáticas con
   colores inspirados en el arte de cada juego. No se usan logos, tipografías
   ni marcas oficiales de Riot Games para no sugerir un evento oficial.
   El arte de Riot se muestra completo: sin recortes, filtros ni superposiciones.
   ========================================================================== */

:root {
  --ink: #0A0C11;
  --surface: #11141C;
  --surface-2: #171B25;
  --line: #252B38;
  --line-soft: #1C212C;
  --text: #ECEFF4;
  --muted: #9AA3B3;
  --accent: #C8F560;
  --accent-ink: #0A0C11;
  --accent-hover: #D6FA80;
  --shadow-pop: 0 18px 40px rgba(0, 0, 0, .5);
  --lol: #D9B870;
  --val: #FF5A5F;
  --tft: #B49BFF;
  --danger: #FF8A80;
  --radius: 16px;
  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 400 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: .92em;
  padding: .1em .4em;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

h1, h2, h3 {
  font-family: var(--font-display);
  margin: 0;
  line-height: 1.05;
  letter-spacing: -.01em;
}

.wrap {
  width: min(1180px, 100%);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: .6em 1em;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .85em 1.35em;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  font: 600 15px/1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease, filter .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { border-color: var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--muted); }
.btn-sm { padding: .65em 1.05em; font-size: 14px; }
.btn-block { width: 100%; }
.btn[aria-disabled="true"] {
  background: var(--surface-2);
  color: var(--muted);
  pointer-events: none;
}

/* ---------- Aviso no oficial ---------- */
.notice {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--muted);
}
.notice-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 9px;
}
.notice p { margin: 0; }
.notice strong { color: var(--text); font-weight: 600; }
.notice-badge {
  flex: none;
  padding: .2em .6em;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--ink) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
/* La barra superior es más ancha que el contenido: la navegación y los botones llegan casi al borde derecho. */
.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  width: min(1560px, 100%);
  min-height: 68px;
}
/* El logo es el nombre: «INERTIA» en el color del texto y «.GG» en el acento. */
.brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.brand-tld { color: var(--accent); }
.brand-name {
  font-family: var(--font-display);
  font-stretch: 120%;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.nav { margin-left: auto; }
.nav ul {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: .5em .75em;
  border-radius: 8px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
.nav a:hover { color: var(--text); background: var(--surface-2); }

/* En pantallas medianas solo quedan Inicio, Torneos y Mi equipo. En pantallas angostas la navegación,
   el cambio de tema y Discord pasan al menú del botón (js/menu.js), y la barra queda en una sola fila. */
@media (max-width: 1040px) {
  .nav li:not(.nav-main) { display: none; }
}
.menu-btn,
.menu-movil { display: none; }
@media (max-width: 860px) {
  html { scroll-padding-top: 76px; }
  .header-inner { gap: 0 16px; min-height: 60px; }
  .header-acciones { margin-left: auto; }
  .site-header:has(.menu-btn) .nav,
  .site-header:has(.menu-btn) .header-acciones > .tema-btn,
  .site-header:has(.menu-btn) .header-acciones > .discord-btn { display: none; }
  .menu-btn {
    display: grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
  }
  .menu-btn:hover,
  .menu-btn[aria-expanded="true"] { border-color: var(--accent); background: var(--surface-2); }
  .menu-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .menu-btn path { transform-origin: 12px 12px; transition: transform .2s ease, opacity .2s ease; }
  .menu-btn[aria-expanded="true"] .menu-btn-l1 { transform: translateY(5px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] .menu-btn-l2 { opacity: 0; }
  .menu-btn[aria-expanded="true"] .menu-btn-l3 { transform: translateY(-5px) rotate(-45deg); }

  .menu-movil {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 55;
    display: grid;
    gap: 10px;
    max-height: calc(100dvh - 64px);
    padding: 10px 16px 16px;
    overflow-y: auto;
    border-bottom: 1px solid var(--line);
    background: var(--ink);
    box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .6);
    animation: menu-movil-entrada .18s ease;
  }
  .menu-movil[hidden] { display: none; }
  .menu-movil-lista { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
  .menu-movil-lista a,
  .menu-movil-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--text);
    font: 600 16px/1.2 var(--font-body);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }
  .menu-movil-lista a:hover,
  .menu-movil-item:hover { background: var(--surface-2); }
  .menu-movil-lista a[aria-current="page"] { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
  .menu-movil-extras { display: grid; gap: 2px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
  .menu-movil-extras .menu-movil-item { color: var(--muted); font-size: 15px; font-weight: 500; }
  .menu-movil-tema svg { flex: none; width: 22px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .menu-movil-discord svg { flex: none; width: 22px; height: auto; fill: #5865F2; }
  .menu-movil-discord.is-proximo { cursor: default; opacity: .6; }
  .menu-movil-discord.is-proximo:hover { background: none; }
}
@keyframes menu-movil-entrada { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
  .menu-movil { animation: none; }
  .agente, .agente:hover { transition: none; transform: none; }
  .menu-btn path { transition: none; }
}

/* ---------- Tipografía de secciones ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pulse {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(200, 245, 96, .6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 10px rgba(200, 245, 96, 0); }
  100% { box-shadow: 0 0 0 0 rgba(200, 245, 96, 0); }
}

.section { padding-block: clamp(64px, 9vw, 112px); }
.section-alt {
  background: var(--surface);
  border-block: 1px solid var(--line-soft);
}
.section-head { max-width: 680px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head h2 {
  font-size: clamp(32px, 4.6vw, 52px);
  font-stretch: 112%;
  font-weight: 800;
  text-transform: uppercase;
}
.section-sub {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 17px;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-block: clamp(40px, 7vw, 96px) clamp(56px, 7vw, 96px);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 70% 40%, #000, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 70% at 70% 40%, #000, transparent 75%);
  pointer-events: none;
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.hero-grid > * { min-width: 0; }
/* El tamaño del título se calcula sobre el ancho de su columna para que la
   palabra más larga nunca se corte ni desborde. */
.hero-copy { container-type: inline-size; }
.hero h1 {
  font-size: clamp(30px, 5.2vw, 72px);
  font-size: clamp(30px, 12.5cqi, 92px);
  font-stretch: 110%;
  font-weight: 900;
  line-height: .94;
  text-transform: uppercase;
}
.accent { color: var(--accent); }
.lede {
  max-width: 560px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: clamp(17px, 1.6vw, 19px);
}
.lede strong { color: var(--text); font-weight: 600; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin: 40px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.hero-stats dt {
  color: var(--muted);
  font-size: 13px;
}
.hero-stats dd {
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-stretch: 115%;
  font-size: 28px;
  font-weight: 800;
  text-transform: uppercase;
}

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Selector de juegos del hero */
.picker {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pick {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 10px 16px 10px 10px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--pick);
  border-radius: 14px;
  background: var(--surface);
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease;
}
.pick:hover,
.pick:focus-within { transform: translateX(4px); border-color: var(--pick); }
.pick--lol { --pick: var(--lol); }
.pick--val { --pick: var(--val); }
.pick--tft { --pick: var(--tft); }
.pick-art img { width: 100%; height: auto; }
.pick-game {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.pick-name {
  display: block;
  margin-top: 2px;
  font-family: var(--font-display);
  font-stretch: 108%;
  font-size: clamp(17px, 1.8vw, 21px);
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}
.pick-fee {
  display: block;
  margin-top: 6px;
  color: var(--pick);
  font-size: 14px;
  font-weight: 600;
}
/* Toda la tarjeta lleva a la sección del juego; «Ver torneos» queda encima y abre su tablero */
.pick-name { text-decoration: none; }
.pick-name::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
}
.pick-name:focus-visible { outline: none; }
.pick-name:focus-visible::after { outline: 2px solid var(--pick); outline-offset: 3px; }
.pick-cta {
  position: relative;
  z-index: 1;
  margin-top: 12px;
  border-color: var(--pick);
  color: var(--pick);
}
.pick-cta:hover { background: var(--surface-2); }
@media (max-width: 440px) {
  .pick { grid-template-columns: minmax(0, 1fr); padding: 10px; gap: 10px; }
  .pick-body { padding: 0 6px 6px; }
}

/* ==========================================================================
   Secciones por juego
   ========================================================================== */
.game {
  position: relative;
  isolation: isolate;
  padding-block: clamp(72px, 10vw, 128px);
  background: var(--g-bg);
  color: var(--g-text);
  border-top: 1px solid var(--g-line);
  overflow: hidden;
}
.game::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.game-head { max-width: 780px; margin-bottom: clamp(28px, 4vw, 44px); }
.game-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  color: var(--g-accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.game-kicker::before {
  content: "";
  flex: none;
  width: 28px;
  height: 2px;
  background: currentColor;
}
.game h2 {
  font-size: clamp(36px, 5.6vw, 68px);
  font-stretch: 112%;
  font-weight: 900;
  text-transform: uppercase;
}
.game-sub {
  max-width: 62ch;
  margin: 16px 0 0;
  color: var(--g-muted);
  font-size: 17px;
}
.game-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 32px);
  align-items: start;
}
@media (max-width: 980px) {
  .game-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Marcos de arte: el arte va dentro con relleno, nunca recortado ni tapado. */
.art { margin: 0; }
.art-frame {
  padding: 8px;
  border: 1px solid var(--g-line);
  background: var(--g-bg-2);
}
.art-frame img { width: 100%; height: auto; }
.art-frame--portrait {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(circle at 50% 58%, var(--g-glow), transparent 64%),
    var(--g-bg-2);
}
.art-frame--portrait img { width: 100%; height: 100%; object-fit: contain; }
.art figcaption {
  margin-top: 8px;
  color: var(--g-muted);
  font-size: 12.5px;
}
.art-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: clamp(14px, 2vw, 20px);
  margin: clamp(20px, 3vw, 32px) 0 0;
  padding: 0;
  list-style: none;
}

/* En escritorio el arte acompaña al lector mientras recorre las fichas. */
@media (min-width: 981px) {
  .game-art { position: sticky; top: 92px; }
}
.ticket-stack { display: grid; gap: 28px; }

/* Ficha de precios y premios */
.ticket-title {
  margin: 0 0 14px;
  font-size: 24px;
  font-stretch: 108%;
  font-weight: 800;
  text-transform: uppercase;
}
.servers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.servers li {
  padding: .25em .75em;
  border: 1px solid var(--g-line);
  border-radius: 999px;
  background: var(--g-bg-2);
  color: var(--g-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
}
.ticket {
  position: relative;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--g-line);
  background: var(--g-surface);
}
.ticket-label {
  margin: 0;
  color: var(--g-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 6px 0 0;
}
.price-amount {
  font-family: var(--font-display);
  font-stretch: 110%;
  font-size: clamp(48px, 5vw, 64px);
  font-weight: 900;
  line-height: 1;
  color: var(--g-accent);
}
.price-unit { font-weight: 600; }
.price-note {
  margin: 6px 0 0;
  color: var(--g-muted);
  font-size: 14px;
}
.pool {
  margin-top: 22px;
  padding: 16px 18px;
  border: 1px solid var(--g-line);
  background: var(--g-bg-2);
}
.pool-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}
.pool-head p { margin: 0; color: var(--g-muted); font-size: 14px; }
.pool-head strong { color: var(--g-text); }
.pool-amount {
  font-family: var(--font-display);
  font-stretch: 108%;
  font-size: 28px;
  font-weight: 800;
  color: var(--g-text);
}
.pool-max {
  margin: 6px 0 0;
  color: var(--g-muted);
  font-size: 14px;
}
.pool-max strong { color: var(--g-accent); }
/* Solo el primer lugar gana premio */
.pool-winner {
  position: relative;
  margin: 0 0 12px;
  padding: 0 0 12px 26px;
  border-bottom: 1px solid var(--g-line);
  color: var(--g-accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.pool-winner svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pool-foot {
  margin: 10px 0 0;
  color: var(--g-muted);
  font-size: 12.5px;
}
.facts {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14.5px;
}
.facts li {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  padding-block: 9px;
  border-top: 1px solid var(--g-line, var(--line-soft));
}
.facts span { color: var(--g-muted, var(--muted)); }
/* Pestañas de precio: 10, 15 y 20 USD en cada juego */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 8px 0 22px;
  padding: 4px;
  border: 1px solid var(--g-line);
  background: var(--g-bg-2);
}
.tier {
  padding: .75em .5em;
  border: 0;
  background: transparent;
  color: var(--g-muted);
  font: 700 15px/1 var(--font-body);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.tier:hover { color: var(--g-text); }
.tier[aria-selected="true"] { background: var(--g-accent); color: var(--g-accent-ink); }
.tier:focus-visible { outline: 2px solid var(--g-text); outline-offset: 2px; }
.tier-panel .price { margin-top: 0; }
.game--lol .tiers,
.game--lol .tier { border-radius: 2px; }
.game--val .tier[aria-selected="true"] {
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.game--tft .tiers,
.game--tft .tier { border-radius: 999px; }

/* Arte que nunca se muestra más grande que su tamaño original */
.art-frame--fit img { max-width: 512px; margin-inline: auto; }
.art-frame--wide img { max-width: 1024px; margin-inline: auto; }
.art-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Key art de agentes de VALORANT (268×640): siempre tres columnas */
.art-strip--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.art-frame--card img { max-width: 268px; margin-inline: auto; }

/* ---------- Utilidades ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- League of Legends: azul noche y dorado envejecido ---------- */
.game--lol {
  --g-bg: #07101E;
  --g-bg-2: #0A1628;
  --g-surface: #0D1B31;
  --g-line: #253A5A;
  --g-text: #EFE7D6;
  --g-muted: #A7B2C3;
  --g-accent: var(--lol);
  --g-accent-ink: #0A1220;
  --g-glow: rgba(217, 184, 112, .22);
}
.game--lol::before {
  background:
    radial-gradient(55% 45% at 85% 0%, rgba(217, 184, 112, .13), transparent 70%),
    radial-gradient(45% 40% at 0% 100%, rgba(70, 198, 190, .09), transparent 70%);
}
.game--lol h2 { font-stretch: 100%; letter-spacing: .03em; }
.game--lol .art-frame,
.game--lol .ticket {
  border-color: rgba(217, 184, 112, .4);
  box-shadow: inset 0 0 0 3px var(--g-bg-2), inset 0 0 0 4px rgba(217, 184, 112, .16);
}
.game--lol .ticket::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 11px;
  height: 11px;
  background: var(--g-accent);
  transform: translateX(-50%) rotate(45deg);
}
.game--lol .btn-game-line { border-radius: 2px; }

/* ---------- VALORANT: grafito, crema y coral ---------- */
.game--val {
  --g-bg: #0F1318;
  --g-bg-2: #141920;
  --g-surface: #171C24;
  --g-line: #2E343F;
  --g-text: #EEE8DE;
  --g-muted: #A9ADB5;
  --g-accent: var(--val);
  --g-accent-ink: #16090A;
  --g-glow: rgba(255, 90, 95, .22);
}
.game--val::before {
  background:
    linear-gradient(115deg, transparent 0 60%, rgba(255, 90, 95, .07) 60% 71%, transparent 71%),
    repeating-linear-gradient(90deg, rgba(238, 232, 222, .03) 0 1px, transparent 1px 88px);
}
.game--val h2 { font-stretch: 125%; letter-spacing: -.02em; }
.game--val .game-kicker::before {
  width: 14px;
  height: 14px;
  background: var(--g-accent);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.game--val .art-frame { border-left: 3px solid var(--g-accent); }
.game--val .ticket {
  --cut: 18px;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}

/* ---------- Teamfight Tactics: índigo, violeta y destellos dorados ---------- */
.game--tft {
  --g-bg: #120C26;
  --g-bg-2: #170F31;
  --g-surface: #1C1339;
  --g-line: #3A2D6B;
  --g-text: #F2EEFF;
  --g-muted: #B6ADD6;
  --g-accent: var(--tft);
  --g-accent-ink: #140C2A;
  --g-glow: rgba(180, 155, 255, .28);
}
.game--tft::before {
  background:
    radial-gradient(circle, rgba(242, 196, 90, .22) 1px, transparent 1.6px) 0 0 / 46px 46px,
    radial-gradient(60% 55% at 12% 8%, rgba(180, 155, 255, .2), transparent 70%),
    radial-gradient(50% 45% at 100% 100%, rgba(242, 196, 90, .1), transparent 70%);
}
.game--tft h2 { font-stretch: 106%; }
.game--tft .game-kicker::before {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #F2C45A;
  box-shadow: 0 0 12px #F2C45A;
}
.game--tft .art-frame,
.game--tft .ticket { border-radius: 20px; }
.game--tft .pool { border-radius: 14px; }

/* ==========================================================================
   Tablero de torneos (copa-5v5.html)
   Un panel por torneo con su splash art completo. El estado se distingue con
   etiquetas y con el tamaño del panel: el arte nunca se atenúa ni se filtra.
   ========================================================================== */
.nav a[aria-current="page"] { color: var(--text); background: var(--surface-2); }

.btn-game-line {
  margin-top: 24px;
  border-color: var(--g-accent);
  color: var(--g-accent);
}
.btn-game-line:hover { background: var(--g-bg-2); }
.game-head .btn-game { margin-top: 24px; }

.board {
  --live: #5ACFC6;
  padding-block: 0 clamp(72px, 10vw, 120px);
  border-top: 0;
}
.board-body { padding-top: clamp(36px, 5vw, 64px); }
.board-head { margin-bottom: 0; }
.board-head h1 {
  font-size: clamp(36px, 5.6vw, 68px);
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* Barra de juegos: cambia entre los tableros de cada juego. Cada enlace lleva el
   color y la forma de su juego; el activo se subraya. */
.gamebar {
  border-bottom: 1px solid var(--g-line);
  background: var(--g-bg-2);
}
.gamebar-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-block: 0;
  list-style: none;
}
.gamebar-list li + li { border-left: 1px solid var(--g-line); }
.gamebar-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 14px clamp(10px, 2vw, 22px);
  color: var(--g-muted);
  text-decoration: none;
  transition: color .15s ease, background-color .15s ease;
}
.gamebar-link::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 3px;
  background: var(--gb);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.gamebar-link:hover { color: var(--g-text); background: color-mix(in srgb, var(--gb) 7%, transparent); }
.gamebar-link:hover::after { transform: scaleX(.3); }
.gamebar-link[aria-current="page"] {
  color: var(--g-text);
  background: linear-gradient(to top, color-mix(in srgb, var(--gb) 16%, transparent), transparent);
}
.gamebar-link[aria-current="page"]::after { transform: none; }
.gamebar-link:focus-visible { outline-color: var(--gb); outline-offset: -3px; }
.gamebar-mark {
  flex: none;
  width: 12px;
  height: 12px;
  background: var(--gb);
}
.gamebar-link--lol,
.team-sum--lol { --gb: var(--lol); }
.gamebar-link--lol .gamebar-mark,
.team-sum--lol .gamebar-mark { transform: rotate(45deg) scale(.85); }
.gamebar-link--val,
.team-sum--val { --gb: var(--val); }
.gamebar-link--val .gamebar-mark,
.team-sum--val .gamebar-mark { clip-path: polygon(0 0, 100% 0, 100% 100%); }
.gamebar-link--tft,
.team-sum--tft { --gb: var(--tft); }
.gamebar-link--tft .gamebar-mark,
.team-sum--tft .gamebar-mark { border-radius: 50%; box-shadow: 0 0 10px var(--gb); }
.gamebar-text { display: grid; min-width: 0; }
.gamebar-game {
  font-family: var(--font-display);
  font-size: clamp(14px, 1.6vw, 18px);
  font-stretch: 108%;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}
.gamebar-cup {
  margin-top: 2px;
  color: var(--g-muted);
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gamebar-link[aria-current="page"] .gamebar-cup { color: var(--gb); }
@media (max-width: 640px) {
  .gamebar-list { padding-inline: 0; }
  .gamebar-link { justify-content: center; padding: 12px 8px; text-align: center; }
  .gamebar-mark,
  .gamebar-cup { display: none; }
  .gamebar-game { font-size: 13px; text-wrap: balance; }
}
.sim-note {
  margin: 20px 0 0;
  padding: 10px 14px;
  border: 1px dashed var(--live);
  color: var(--g-text);
  font-size: 14px;
}
/* Grupos: inscripciones abiertas, en vivo y finalizados */
.board { --r: 4px; }
.game--val.board { --live: #3FD6B0; --r: 0px; }
.game--tft.board { --live: #F2C45A; --r: 12px; }
.game--val .board-head h1 { font-stretch: 125%; letter-spacing: -.02em; }
.game--tft .board-head h1 { font-stretch: 106%; letter-spacing: 0; }
.game--tft .sim-note { border-radius: var(--r); }
.game--val .btn-game-line { border-radius: 0; }
.game--tft .btn-game-line { border-radius: 999px; }

.board-group { margin-top: clamp(36px, 5vw, 56px); }
.group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 16px;
}
.group-head h2 {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 800;
}
.group-count {
  color: var(--g-muted);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.group-empty {
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid var(--g-line);
  color: var(--g-muted);
  font-size: 14.5px;
}
/* Seis torneos por juego: tres paneles por fila en escritorio */
.tgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 900px) {
  .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .tgrid { grid-template-columns: minmax(0, 1fr); }
}

/* Estado: un punto y el texto, sin marco */
.status {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 7px;
  margin: 0;
  color: var(--g-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.status::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.status--abierto { color: var(--g-accent); }
.status--en-juego { color: var(--live); }
.status--en-juego::before { animation: pulse-live 2s infinite; }
.status--cerrado::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
@keyframes pulse-live {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent); }
  70%, 100% { box-shadow: 0 0 0 7px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .status--en-juego::before { animation: none; }
}

/* Panel de torneo: arte completo, nombre, fecha, dinero, cupos y una sola acción.
   El arte va dentro del panel con un margen: nunca se redondea, recorta ni cubre. */
.tcard {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--g-line);
  border-radius: var(--r);
  background: var(--g-surface);
  transition: border-color .15s ease, transform .15s ease;
}
.tcard--en-juego { border-color: color-mix(in srgb, var(--live) 55%, var(--g-line)); }
.tcard-art { margin: 0; padding: 6px 6px 0; }
.tcard-art img { display: block; width: 100%; height: auto; background: var(--g-bg-2); }
.tcard-art figcaption { margin-top: 4px; color: var(--g-muted); font-size: 10.5px; }
.tcard-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 10px 14px 14px;
}
.tcard-title {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.15;
  text-wrap: balance;
}
.tcard-when { margin: -6px 0 0; color: var(--g-muted); font-size: 13.5px; }
.tcard-money {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--g-line);
}
.tcard-money dt {
  color: var(--g-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.tcard-money dd {
  margin: 2px 0 0;
  color: var(--g-text);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tcard-money div:first-child dd { color: var(--g-accent); }
.tcard-money small { color: var(--g-muted); font-size: 12px; font-weight: 500; }
.tcard-cupos { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tcard-cupos li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.tcard-cupos li:has(.tcard-srv) { grid-template-columns: 2.6em minmax(0, 1fr) auto; }
.tcard-srv { color: var(--g-muted); font-weight: 700; }
.tcard-num { min-width: 3.4em; color: var(--g-text); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.tcard-bar {
  display: block;
  width: 100%;
  height: 4px;
  border: 0;
  border-radius: 99px;
  background: var(--g-line);
  color: var(--g-accent);
  appearance: none;
}
.tcard-bar::-webkit-progress-bar { border-radius: 99px; background: var(--g-line); }
.tcard-bar::-webkit-progress-value { border-radius: 99px; background: var(--g-accent); }
.tcard-bar::-moz-progress-bar { border-radius: 99px; background: var(--g-accent); }
.tcard-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  margin: auto 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--g-line);
  color: var(--g-muted);
  font-size: 12.5px;
}
.tcard-live { color: var(--live); font-weight: 600; }
.tcard-go { color: var(--g-accent); font-weight: 700; }

/* Todo el panel abre la vista del torneo: el enlace del título se estira sobre el panel. */
.tcard-link { color: var(--g-text); text-decoration: none; }
.tcard-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tcard-link:focus-visible { outline: none; }
.tcard:has(.tcard-link:hover) { border-color: var(--g-accent); transform: translateY(-2px); }
.tcard:has(.tcard-link:focus-visible) { outline: 2px solid var(--g-accent); outline-offset: 3px; }
.game--lol .tcard-title { letter-spacing: .01em; }
.game--val .tcard-title { font-stretch: 125%; letter-spacing: -.02em; }
.game--tft .tcard-title { font-stretch: 106%; }
@media (prefers-reduced-motion: reduce) {
  .tcard { transition: none; }
  .tcard:has(.tcard-link:hover) { transform: none; }
}

/* ==========================================================================
   Vista de un torneo (?torneo=<id>, js/torneo.js)
   Información, bracket o clasificatorias y participantes, con los colores del juego.
   Diseño sobrio: líneas finas, el ganador resaltado y el camino de cada participante al pasar el cursor.
   ========================================================================== */
.detalle-back {
  display: inline-flex;
  margin-bottom: 20px;
  color: var(--g-muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.detalle-back:hover { color: var(--g-text); }
.detalle-head {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(20px, 4vw, 40px);
  align-items: start;
}
@media (max-width: 860px) {
  .detalle-head { grid-template-columns: minmax(0, 1fr); }
}
.detalle-art { margin: 0; }
.detalle-art img { display: block; width: 100%; height: auto; border: 1px solid var(--g-line); }
.detalle-art figcaption { margin-top: 6px; color: var(--g-muted); font-size: 12px; }
.detalle-info { display: grid; gap: 8px; }
.detalle-info h1 {
  margin: 0;
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 900;
  line-height: 1.05;
  text-wrap: balance;
}
.detalle-fee { margin: 0; color: var(--g-text); font-size: 17px; font-weight: 600; }
.detalle-fee small { color: var(--g-muted); font-size: 13px; font-weight: 500; }
.detalle-edicion { margin: 0; color: var(--g-muted); font-size: 13.5px; }
.detalle-edicion a { color: var(--g-accent); font-weight: 600; text-decoration: none; }
.detalle-edicion a:hover { text-decoration: underline; }
.detalle-facts { margin: 10px 0 0; font-size: 14px; }
.detalle-facts div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  padding-block: 7px;
  border-top: 1px solid var(--g-line);
}
.detalle-facts dt,
.detalle-facts small { color: var(--g-muted); }
.detalle-facts dd { margin: 0; }
@media (max-width: 480px) {
  .detalle-facts div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
.detalle-ejemplo {
  margin: 24px 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--g-line);
  color: var(--g-muted);
  font-size: 13.5px;
}
.detalle-tabs {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(80px, 1fr));
  gap: 4px;
  margin-top: 24px;
  padding: 3px;
  border: 1px solid var(--g-line);
  border-radius: var(--r);
}
.detalle-resumen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0 0;
}
@media (max-width: 640px) {
  .detalle-resumen { grid-template-columns: minmax(0, 1fr); }
}
.detalle-resumen div { padding: 12px 14px; border: 1px solid var(--g-line); border-radius: var(--r); }
.detalle-resumen dt {
  color: var(--g-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.detalle-resumen dd { margin: 4px 0 0; font-size: 17px; font-weight: 700; }
.detalle-seccion { margin-top: clamp(32px, 4vw, 48px); }
.detalle-seccion > h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0 0 16px;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 800;
}
.detalle-sub { margin: -8px 0 12px; color: var(--g-muted); font-size: 13.5px; }
.detalle-vacio { margin: 0; padding: 14px 0; border-top: 1px solid var(--g-line); color: var(--g-muted); }
.detalle-vacio a { color: var(--g-accent); font-weight: 600; }

/* Bracket: una columna por ronda y líneas finas que llevan cada partida a la siguiente.
   Cada ronda reparte su alto en partes iguales, así cada partida queda a la altura de las dos que la alimentan. */
.llave { --gap: 36px; }
.llave + .llave,
.final-tft + .clasificatorias { margin-top: 28px; }
.llave-title {
  margin: 0 0 10px;
  color: var(--g-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.llave-hint { display: none; margin: 0 0 8px; color: var(--g-muted); font-size: 13px; }
@media (max-width: 760px) {
  .llave-hint { display: block; }
}
.llave-scroll { overflow-x: auto; padding: 4px 2px 10px; }
.llave-rondas { display: flex; gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.ronda { display: flex; flex: 0 0 188px; flex-direction: column; }
.ronda-title {
  display: grid;
  margin: 0 0 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--g-line);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.ronda-title span { color: var(--g-muted); font-weight: 500; }
.ronda-partidas,
.llave-par { display: flex; flex: 1; flex-direction: column; }
.llave-par { position: relative; }
.llave-slot { display: flex; flex: 1; flex-direction: column; justify-content: center; padding-block: 6px; }
.match {
  position: relative;
  border: 1px solid var(--g-line);
  border-radius: var(--r);
  background: var(--g-surface);
  font-size: 13px;
}
.match--vacia { visibility: hidden; }
.match--vivo { border-color: var(--live); }
.ronda--entra .match::before,
.ronda--sale-uno .match::after,
.ronda--sale-par .match::after {
  content: "";
  position: absolute;
  top: 50%;
  border-top: 1px solid var(--g-line);
}
.ronda--entra .match::before { right: 100%; width: calc(var(--gap) / 2 + 2px); }
.ronda--sale-uno .match::after,
.ronda--sale-par .match::after { left: 100%; width: calc(var(--gap) / 2); }
.ronda--sale-par .llave-par::after {
  content: "";
  position: absolute;
  top: 25%;
  bottom: calc(25% - 1px);
  right: calc(var(--gap) / -2);
  border-right: 1px solid var(--g-line);
}
.match-live {
  position: absolute;
  top: -8px;
  right: 8px;
  z-index: 1;
  padding: 0 6px;
  border-radius: var(--r);
  background: var(--live);
  color: var(--g-accent-ink);
  font-size: 9.5px;
  font-weight: 800;
  line-height: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.match-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 8px;
  color: var(--g-text);
}
.match-row:first-child { border-radius: var(--r) var(--r) 0 0; }
.match-row:last-child { border-radius: 0 0 var(--r) var(--r); }
.match-row + .match-row { border-top: 1px solid var(--g-line); }
.match-seed { color: var(--g-muted); font-size: 10.5px; text-align: right; font-variant-numeric: tabular-nums; }
.match-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-score { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.match-row.is-winner { font-weight: 700; }
.match-row.is-winner .match-score { color: var(--g-accent); }
.match-row.is-loser { color: var(--g-muted); }
.match-row--pase,
.match-row--tbd { grid-template-columns: minmax(0, 1fr); color: var(--g-muted); }
.match-row.is-traza { background: color-mix(in srgb, var(--g-accent) 18%, transparent); color: var(--g-text); }
/* VALORANT: mapa sorteado de cada partida, debajo de los dos rivales */
.match-mapa {
  display: block;
  overflow: hidden;
  padding: 0 8px;
  border-top: 1px dashed var(--g-line);
  color: var(--g-muted);
  font-size: 10.5px;
  line-height: 20px;
  letter-spacing: .02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.match--vivo .match-mapa,
.match--jugado .match-mapa { color: var(--g-text); }

/* TFT: estado de cada ronda, tabla de puntos con la línea de clasificación y final */
.ronda-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.ronda-chip {
  display: grid;
  padding: 6px 10px;
  border: 1px solid var(--g-line);
  border-radius: var(--r);
  font-size: 12px;
  font-weight: 700;
}
.ronda-chip span { color: var(--g-muted); font-weight: 400; }
.ronda-chip--vivo { border-color: var(--live); }
.ronda-chip--pendiente { border-style: dashed; color: var(--g-muted); }
.tabla-scroll { overflow-x: auto; border: 1px solid var(--g-line); border-radius: var(--r); }
.tabla-puntos {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
.tabla-puntos th,
.tabla-puntos td { padding: 8px 10px; border-top: 1px solid var(--g-line); text-align: center; white-space: nowrap; }
.tabla-puntos thead th {
  border-top: 0;
  color: var(--g-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.tabla-puntos thead th:first-child { width: 48px; }
.tabla-puntos thead th:nth-child(2) { width: 38%; }
.tabla-puntos thead th:last-child { width: 76px; }
.tabla-puntos abbr { text-decoration: none; }
.tabla-puntos tbody th { overflow: hidden; font-weight: 600; text-align: left; text-overflow: ellipsis; }
.tabla-pos { color: var(--g-muted); }
.tabla-pts { font-weight: 800; }
.tabla-puntos tr.is-qualified .tabla-pos { color: var(--g-accent); font-weight: 800; }
.tabla-puntos tr.is-qualified + tr:not(.is-qualified) > * { border-top: 1px dashed var(--g-accent); }
.tabla-mas { margin-top: 10px; }
.tabla-mas summary { padding: 6px 0; color: var(--g-accent); font-size: 14px; font-weight: 700; cursor: pointer; }
.final-tft { padding: 14px 16px; border: 1px solid var(--g-line); border-radius: var(--r); }
.final-tft .ronda-title { display: flex; gap: 8px; margin-bottom: 8px; padding: 0; border: 0; }
.final-note { margin: 0; color: var(--g-muted); }
.final-list,
.participantes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: 0 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.final-list li,
.participantes li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 2px;
  border-bottom: 1px solid var(--g-line);
  font-size: 14px;
}
.final-list li.is-winner,
.participantes li.is-winner { color: var(--g-accent); font-weight: 700; }
.final-pos,
.part-seed { min-width: 2em; color: var(--g-muted); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.final-pos:empty,
.part-seed:empty { display: none; }
.final-name,
.part-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.final-badge {
  padding: .1em .5em;
  border-radius: var(--r);
  background: var(--g-accent);
  color: var(--g-accent-ink);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Toques de cada juego en la vista del torneo */
.game--lol .detalle-info h1 { letter-spacing: .01em; }
.game--val .detalle-info h1 { font-stretch: 125%; letter-spacing: -.02em; }
.game--tft .detalle-info h1 { font-stretch: 106%; }
.game--tft .detalle-tabs,
.game--tft .final-badge,
.game--tft .match-live { border-radius: 999px; }

/* ==========================================================================
   Mi equipo (mi-equipo.html)
   Un bloque por juego con el tema de su sección. El único arte de Riot Games son
   los íconos de equipo, que se muestran completos: sin recortes, redondeos ni capas.
   ========================================================================== */
.team-intro { padding-block: clamp(44px, 7vw, 88px) clamp(40px, 6vw, 64px); }
.team-intro .section-head { max-width: 760px; margin-bottom: clamp(24px, 4vw, 36px); }
.team-intro h1 {
  font-size: clamp(34px, 6vw, 72px);
  font-stretch: 112%;
  font-weight: 900;
  text-transform: uppercase;
}
.team-intro .section-sub strong { color: var(--text); font-weight: 600; }
.team-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 760px) {
  .team-summary { grid-template-columns: minmax(0, 1fr); }
}
.team-sum {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gb);
  border-radius: 12px;
  background: var(--surface);
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease;
}
.team-sum:hover { transform: translateY(-2px); border-color: var(--gb); }
.team-sum-text { display: grid; min-width: 0; }
.team-sum-game {
  font-family: var(--font-display);
  font-size: 17px;
  font-stretch: 108%;
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
}
.team-sum-state {
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  font-size: 13.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.team-sum--activo .team-sum-state { color: var(--gb); font-weight: 600; }
.team-sum--activo .gamebar-mark { display: none; }
.team-sum-icon { flex: none; width: 40px; height: auto; }
.team-note {
  margin: 16px 0 0;
  padding: 12px 16px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--muted);
  font-size: 14px;
}
.team-note strong { color: var(--text); }

.team-game { padding-block: clamp(56px, 8vw, 96px); }
.team-game h2 { font-size: clamp(32px, 4.8vw, 56px); }

/* Estado vacío, tarjeta del equipo y formulario comparten el marco de cada juego */
.team-box {
  position: relative;
  max-width: 900px;
  border: 1px solid var(--g-line);
  background: var(--g-surface);
}
.game--lol .team-box {
  border-color: rgba(217, 184, 112, .4);
  box-shadow: inset 0 0 0 3px var(--g-bg-2), inset 0 0 0 4px rgba(217, 184, 112, .16);
}
.game--lol .team-box::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 11px;
  height: 11px;
  background: var(--g-accent);
  transform: translateX(-50%) rotate(45deg);
}
.game--val .team-box {
  --cut: 18px;
  border-left: 3px solid var(--g-accent);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.game--tft .team-box {
  border-radius: 20px;
  background:
    radial-gradient(120% 45% at 50% 0%, rgba(180, 155, 255, .12), transparent 70%),
    var(--g-surface);
}
.team-flash {
  margin: 0;
  padding: 12px clamp(20px, 3vw, 30px);
  border-bottom: 1px solid var(--g-line);
  color: var(--g-accent);
  font-size: 14px;
  font-weight: 600;
}
.team-empty { padding: clamp(24px, 4vw, 36px); }
.team-empty .team-flash { margin-bottom: 14px; padding: 0; border: 0; }
.team-empty-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 28px);
  font-stretch: 108%;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}
.team-empty-text { max-width: 60ch; margin: 8px 0 0; color: var(--g-muted); }
.team-empty .btn { margin-top: 22px; }

/* Botones con el color de cada juego */
.btn-game { background: var(--g-accent); color: var(--g-accent-ink); }
.btn-game:hover { filter: brightness(1.08); }
.btn-danger { border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.team-box .btn-game-line { margin-top: 0; }

/* Sala del equipo: estandarte con emblema, medidor de alineación y puestos como en la pantalla
   de un torneo. Las abreviaturas de rol son texto y las siluetas y coronas, dibujos propios. */
.lobby { padding: 0; }
.game--lol .lobby { padding: 4px; }
.game--tft .lobby { overflow: hidden; }
.lobby [hidden] { display: none !important; }
.lobby-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--g-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.lobby-kicker::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  background: currentColor;
  transform: rotate(45deg);
}
.lobby-banner {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px 28px;
  padding: clamp(18px, 3vw, 28px) clamp(20px, 3vw, 32px);
  overflow: hidden;
  border-bottom: 1px solid var(--g-line);
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--g-accent) 16%, transparent), transparent 50%),
    var(--g-bg-2);
}
.lobby-banner::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--g-accent), transparent);
}
.game--lol .lobby-banner::before {
  content: "";
  position: absolute;
  inset: 0 0 0 55%;
  background: repeating-linear-gradient(135deg, rgba(217, 184, 112, .06) 0 1px, transparent 1px 12px);
  pointer-events: none;
}
.lobby-banner > * { position: relative; min-width: 0; }
@media (max-width: 760px) {
  .lobby-banner { grid-template-columns: auto minmax(0, 1fr); }
  .lobby-banner .ready { grid-column: 1 / -1; justify-items: start; }
}
.emblem {
  display: grid;
  place-items: center;
  padding: 6px;
  border: 1px solid var(--g-accent);
  background: var(--g-bg);
  box-shadow:
    0 0 0 4px var(--g-bg-2),
    0 0 0 5px color-mix(in srgb, var(--g-accent) 35%, transparent),
    0 0 34px -8px var(--g-accent);
}
.emblem img { width: 88px; height: auto; }
.emblem--ancho img { width: 132px; }
@media (max-width: 440px) {
  .emblem img { width: 60px; }
  .emblem--ancho img { width: 90px; }
}
.team-card-name {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 44px);
  font-stretch: 110%;
  font-weight: 900;
  line-height: 1;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}
.team-card-name.is-vacio { color: var(--g-muted); opacity: .55; }
.team-card-name:focus:not(:focus-visible),
.team-form-title:focus:not(:focus-visible),
.paso-title:focus:not(:focus-visible) { outline: none; }
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.chips li {
  max-width: 100%;
  padding: .25em .75em;
  overflow: hidden;
  border: 1px solid var(--g-line);
  background: var(--g-bg);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chips li:empty { display: none; }
.chips .chip-ok { border-color: var(--g-accent); color: var(--g-accent); }

/* Medidor de alineación: un segmento por puesto titular */
.ready { display: grid; justify-items: end; gap: 8px; }
.ready-bar { display: flex; gap: 5px; margin: 0; padding: 0; list-style: none; }
.ready-bar li {
  display: grid;
  place-items: center;
  width: 46px;
  height: 30px;
  border: 1px solid var(--g-line);
  background: var(--g-bg);
  color: var(--g-muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  transform: skewX(-14deg);
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.ready-bar li span { transform: skewX(14deg); }
.ready-bar li.is-on {
  border-color: var(--g-accent);
  background: var(--g-accent);
  color: var(--g-accent-ink);
  box-shadow: 0 0 16px -3px var(--g-accent);
}
.ready-text {
  margin: 0;
  color: var(--g-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ready-text strong { color: var(--g-text); font-size: 15px; }
@media (max-width: 440px) {
  .ready-bar li { width: 40px; }
}

/* Puestos: tarjetas de jugador en fila, como una alineación de torneo */
.slots {
  --cols: 5;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.slots--2 { --cols: 2; max-width: 620px; }
@media (max-width: 980px) {
  .slots:not(.slots--2) { grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); }
}
@media (max-width: 440px) {
  .slots--2 { grid-template-columns: minmax(0, 1fr); }
}
.slot {
  --slot-edge: var(--g-line);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--g-line);
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--g-accent) 6%, transparent), transparent 45%),
    var(--g-bg);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.slot::before {
  content: "";
  position: absolute;
  inset: -1px;
  background:
    linear-gradient(var(--slot-edge), var(--slot-edge)) top left / 16px 2px no-repeat,
    linear-gradient(var(--slot-edge), var(--slot-edge)) top left / 2px 16px no-repeat,
    linear-gradient(var(--slot-edge), var(--slot-edge)) bottom right / 16px 2px no-repeat,
    linear-gradient(var(--slot-edge), var(--slot-edge)) bottom right / 2px 16px no-repeat;
  pointer-events: none;
}
.slot--listo,
.slot--capitan { --slot-edge: var(--g-accent); }
.slot--listo {
  border-color: color-mix(in srgb, var(--g-accent) 50%, var(--g-line));
  box-shadow: 0 0 28px -14px var(--g-accent);
}
.slot--incompleto { --slot-edge: var(--danger); }
.slots--form .slot:focus-within { border-color: var(--g-accent); transform: translateY(-3px); }
.slot-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.slot-badge {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 24px;
  padding: 0 9px;
  background: color-mix(in srgb, var(--g-accent) 16%, var(--g-bg-2));
  color: var(--g-accent);
  font-family: var(--font-display);
  font-size: 12px;
  font-stretch: 110%;
  font-weight: 800;
  letter-spacing: .06em;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
}
.slot-state {
  color: var(--g-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-align: right;
  text-transform: uppercase;
}
.slot--listo .slot-state,
.slot--capitan .slot-state { color: var(--g-accent); }
.slot--incompleto .slot-state { color: var(--danger); }
.slot-avatar {
  display: grid;
  place-items: center;
  align-self: center;
  width: 64px;
  height: 64px;
  border: 1px solid var(--g-line);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--g-accent) 16%, transparent), transparent 70%),
    var(--g-bg-2);
  color: var(--g-line);
  transition: color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.slot-avatar svg { width: 34px; height: 34px; fill: currentColor; }
.slot--listo .slot-avatar,
.slot--capitan .slot-avatar { border-color: var(--g-accent); color: var(--g-accent); }
.slot--capitan .slot-avatar { box-shadow: 0 0 0 3px var(--g-bg), 0 0 0 4px color-mix(in srgb, var(--g-accent) 45%, transparent); }
.slot--listo .slot-avatar { animation: lock-in .35s ease; }
@keyframes lock-in { 50% { transform: scale(1.12); } }
.slot .slot-role {
  display: block;
  color: var(--g-text);
  font-family: var(--font-display);
  font-size: 15px;
  font-stretch: 106%;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}
.slot-account {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
  overflow-wrap: anywhere;
}
.slot--vacante .slot-account { color: var(--g-muted); font-style: italic; font-weight: 400; }
.slots--vista .slot {
  align-items: center;
  padding-top: 40px;
  animation: slot-in .45s ease both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.slots--vista .slot-badge { position: absolute; top: 10px; left: 10px; }
@keyframes slot-in { from { opacity: 0; transform: translateY(12px); } }

/* Sala del equipo ya creado, como la sala previa de cada juego: estandartes colgados en LoL,
   tarjetas de jugador en VALORANT y la pareja enlazada en TFT. --elo es el color del nivel
   declarado. Estandartes, íconos de línea y de rol e insignias de elo son dibujos propios. */
.plantel {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.plantel-jugador {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  text-align: center;
  isolation: isolate;
  animation: slot-in .45s ease both;
  animation-delay: calc(var(--i, 0) * 80ms);
}
.plantel-fondo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.plantel-avatar { position: relative; display: grid; place-items: center; }
.plantel-img { display: block; width: 100%; height: auto; }
.plantel-silueta svg { width: 40%; height: auto; fill: currentColor; }
.plantel-nombre {
  display: grid;
  max-width: 100%;
  color: var(--g-text);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.plantel-tag { color: var(--g-muted); font-family: var(--font-body); font-size: 12px; font-weight: 500; }
.plantel-rol,
.plantel-elo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.plantel-rol { color: var(--g-accent); }
.plantel-rol-icono { flex: none; width: 20px; height: 20px; object-fit: contain; }
.plantel-elo { color: var(--g-text); }
.plantel-emblema { flex: none; width: 22px; height: 22px; }
svg.plantel-emblema { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--elo) 55%, transparent)); }
img.plantel-emblema { width: 44px; height: 44px; margin-block: -10px; }
.plantel-corona { position: absolute; z-index: 1; color: var(--g-accent); }
.plantel-corona svg { display: block; width: 26px; height: 26px; fill: currentColor; }
.plantel-jugador .badge { background: var(--g-bg); }
.plantel-jugador .badge--capitan { background: var(--g-accent); }
.is-vacante .plantel-nombre { color: var(--g-muted); font-style: italic; font-weight: 500; }
.is-vacante .plantel-rol { color: var(--g-muted); }
.is-vacante .plantel-elo { color: var(--g-muted); }

/* League of Legends: un estandarte colgado de la barra dorada, con el ícono en un aro del color del elo */
.plantel--lol {
  position: relative;
  gap: 14px;
  padding: 10px 6px 0;
}
.plantel--lol::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, #8C6F35 8%, #F0D9A0 50%, #8C6F35 92%, transparent);
}
.plantel--lol .plantel-jugador {
  min-height: 330px;
  padding: 26px 10px 54px;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .45));
}
.plantel--lol .plantel-fondo {
  --corte: polygon(0 0, 100% 0, 100% calc(100% - 38px), 50% 100%, 0 calc(100% - 38px));
  background: linear-gradient(180deg, color-mix(in srgb, var(--elo) 80%, #fff 10%), color-mix(in srgb, var(--elo) 45%, #3A2D14));
  clip-path: var(--corte);
}
.plantel--lol .plantel-fondo::before {
  content: "";
  position: absolute;
  inset: 0 2px 3px;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, color-mix(in srgb, var(--elo) 34%, #0B1424) 0%, #0B1424 58%, color-mix(in srgb, var(--elo) 18%, #07101E));
  clip-path: var(--corte);
}
.plantel--lol .plantel-fondo::after {
  content: "";
  position: absolute;
  inset: auto 20% 30px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--elo), transparent);
}
.plantel--lol .plantel-avatar {
  width: 88px;
  aspect-ratio: 1;
  margin-bottom: 4px;
  padding: 4px;
  border-radius: 50%;
  background: conic-gradient(from 210deg, var(--elo), #F0D9A0, var(--elo), color-mix(in srgb, var(--elo) 50%, #000), var(--elo));
  box-shadow: 0 0 22px -4px var(--elo);
}
.plantel--lol .plantel-img,
.plantel--lol .plantel-silueta { width: 100%; height: 100%; border: 2px solid #0B1424; border-radius: 50%; }
.plantel--lol .plantel-silueta { display: grid; place-items: center; background: #0B1424; color: var(--g-line); }
.plantel--lol .plantel-corona { top: 4px; left: 50%; transform: translateX(-50%); }
.plantel--lol .plantel-nombre { font-stretch: 100%; letter-spacing: .01em; }
.plantel--lol .plantel-rol { padding: 4px 8px; border-block: 1px solid color-mix(in srgb, var(--g-accent) 30%, transparent); }
.plantel--lol .plantel-elo { margin-top: auto; flex-direction: column; gap: 4px; font-size: 11px; }
.plantel--lol img.plantel-emblema { width: 88px; height: 88px; margin-block: -18px -14px; }
.plantel--lol .plantel-rol-icono { width: 22px; height: 22px; }
.plantel--lol .badge { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); }
.plantel--lol .is-vacante { opacity: .6; }
.plantel--lol .is-vacante .plantel-avatar { background: var(--g-line); box-shadow: none; }
.plantel--lol .is-capitan .plantel-fondo { background: linear-gradient(180deg, #F0D9A0, color-mix(in srgb, var(--elo) 60%, #8C6F35)); }

/* VALORANT: tarjetas altas con la tarjeta de jugador, franja roja, rol y elo abajo */
.plantel--val { gap: 8px; }
.plantel--val .plantel-jugador {
  min-height: 340px;
  padding: 0 10px 14px;
  border: 1px solid var(--g-line);
  background: linear-gradient(180deg, #1B222C, #0F1318 70%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}
.plantel--val .plantel-fondo {
  inset: 0 0 auto;
  height: 176px;
  border-bottom: 2px solid var(--g-accent);
  background:
    repeating-linear-gradient(120deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 11px),
    linear-gradient(180deg, color-mix(in srgb, var(--elo) 26%, #0F1318), #0F1318);
}
.plantel--val .plantel-avatar {
  width: min(128px, 100%);
  height: 176px;
  margin: 0 auto 6px;
  place-items: end center;
  padding-bottom: 14px;
}
.plantel--val .plantel-img { box-shadow: 0 10px 22px rgba(0, 0, 0, .55); }
.plantel--val .plantel-silueta { display: grid; place-items: center; width: 96px; aspect-ratio: 1; border: 1px dashed var(--g-line); color: var(--g-line); }
.plantel--val .plantel-corona { top: 8px; left: 8px; color: var(--g-accent); }
.plantel--val .plantel-corona svg { width: 20px; height: 20px; }
.plantel--val .plantel-jugador::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--g-line);
}
.plantel--val .is-capitan::after { background: var(--g-accent); }
.plantel--val .plantel-nombre { font-size: 16px; font-stretch: 125%; letter-spacing: -.01em; text-transform: uppercase; }
.plantel--val .plantel-rol,
.plantel--val .plantel-elo {
  justify-content: center;
  width: 100%;
  padding: 6px 0;
  border-top: 1px solid var(--g-line);
}
.plantel--val .plantel-rol { margin-top: auto; }
.plantel--val .plantel-rol-icono { width: 18px; height: 18px; }
.plantel--val svg.plantel-emblema { width: 24px; height: 25px; }
.plantel-elo.is-sin-vincular { color: var(--g-muted); }
.plantel-emblema--vacio,
.plantel--lol .plantel-emblema--vacio,
.plantel--val .plantel-emblema--vacio { width: 20px; height: 20px; margin: 0; filter: none; }
.plantel--val .badge { border-radius: 0; }
.plantel--val .is-vacante { opacity: .6; }

/* TFT: la pareja del Dúo Dinámico, dos tarjetas redondeadas enlazadas en el centro */
.plantel--tft {
  position: relative;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
  max-width: 640px;
}
.plantel--tft::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(50% - 40px);
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--g-accent), transparent);
}
.plantel--tft::after {
  content: "Dúo";
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 2px solid var(--g-accent);
  border-radius: 50%;
  background: var(--g-bg);
  box-shadow: 0 0 22px -4px var(--g-accent);
  color: var(--g-accent);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
}
.plantel--tft .plantel-jugador {
  padding: 28px 18px 22px;
  border: 1px solid var(--g-line);
  border-radius: 24px;
  background:
    radial-gradient(90% 55% at 50% 0%, color-mix(in srgb, var(--elo) 24%, transparent), transparent 70%),
    var(--g-bg);
}
.plantel--tft .is-capitan { border-color: color-mix(in srgb, var(--g-accent) 55%, var(--g-line)); }
.plantel--tft .plantel-avatar {
  width: 112px;
  aspect-ratio: 1;
  margin-bottom: 6px;
  padding: 10px;
  border: 3px solid var(--elo);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--elo) 20%, var(--g-bg-2)), var(--g-bg-2));
  box-shadow: 0 0 0 5px var(--g-bg), 0 0 0 6px color-mix(in srgb, var(--elo) 40%, transparent), 0 0 30px -6px var(--elo);
}
.plantel--tft .plantel-silueta { display: grid; place-items: center; width: 100%; height: 100%; color: var(--g-line); }
.plantel--tft .plantel-corona { top: 8px; left: 50%; transform: translateX(-50%); }
.plantel--tft .plantel-nombre { font-size: 18px; font-stretch: 106%; }
.plantel--tft .plantel-rol { color: var(--g-muted); }
.plantel--tft img.plantel-emblema { width: 48px; height: 48px; margin-block: -14px; margin-left: -8px; }
.plantel--tft .plantel-elo { padding: 6px 14px 6px 10px; border-radius: 999px; background: color-mix(in srgb, var(--elo) 14%, var(--g-bg-2)); }
.plantel--tft .is-vacante { border-style: dashed; }

@media (max-width: 860px) {
  .plantel--lol,
  .plantel--val { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
}
@media (max-width: 520px) {
  .plantel--tft { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .plantel--tft::before { top: calc(50% - 40px); left: 50%; width: 2px; height: 80px; background: linear-gradient(180deg, transparent, var(--g-accent), transparent); }
}

/* Elo y rol dentro de cada puesto del formulario */
.slots--form .slot-select select { min-height: 40px; padding: .45em .6em; font-size: 14px; }
.slots--form .slot-select label { color: var(--g-muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

.lobby-section { padding: clamp(18px, 3vw, 28px) clamp(20px, 3vw, 32px); }
.lobby-section + .lobby-section { border-top: 1px solid var(--g-line); }
.lobby-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  color: var(--g-muted);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.lobby-section-title span { color: var(--g-accent); }
.lobby-empty-line { margin: 10px 0 0; color: var(--g-muted); font-size: 14px; }
.staff-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.staff-chips li {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  max-width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--g-line);
  background: var(--g-bg);
  font-size: 13.5px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.staff-chip-role {
  color: var(--g-accent);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.team-empty .slots { margin-top: 24px; }
.btn-lg { padding: 1em 1.8em; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.badge {
  padding: .2em .6em;
  border: 1px solid var(--g-line);
  border-radius: 999px;
  color: var(--g-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge--capitan { border-color: var(--g-accent); background: var(--g-accent); color: var(--g-accent-ink); }
.badge--revision { border-color: var(--g-muted); color: var(--g-text); }

/* Cierre de plantilla: libre hasta 24 h antes del torneo; después, 2 cambios de jugadores */
.cierre {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--g-line);
  border-left: 3px solid var(--g-muted);
  background: var(--g-bg-2);
}
.cierre--cerrado { border-left-color: var(--g-accent); }
.cierre p { margin: 0; color: var(--g-muted); font-size: 14px; line-height: 1.5; }
.cierre p strong { color: var(--g-text); }
.cierre-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.cierre-head .lobby-section-title { margin: 0; }
.cierre-cambios { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cierre-cambios li {
  width: 14px;
  height: 14px;
  border: 1px solid var(--g-accent);
  transform: rotate(45deg);
}
.cierre-cambios li.is-usado { background: var(--g-accent); }
.cierre-aviso {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-left: 3px solid var(--g-accent);
  background: var(--g-bg-2);
  color: var(--g-text);
  font-size: 13.5px;
  line-height: 1.5;
}
.cierre-aviso.is-excede { border-left-color: var(--danger); color: var(--danger); }
.cierre-nota { margin: 0; color: var(--g-muted); font-size: 13.5px; align-self: center; }
.staff-group[data-fijo] { opacity: .75; }
.team-card-note {
  margin: 0;
  padding: 12px clamp(20px, 3vw, 30px);
  border-top: 1px solid var(--g-line);
  color: var(--g-muted);
  font-size: 12.5px;
}
.team-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 18px clamp(20px, 3vw, 30px) clamp(20px, 3vw, 26px);
  border-top: 1px solid var(--g-line);
}
.team-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.team-confirm p { flex-basis: 100%; margin: 0 0 4px; }

/* Registro del equipo por pasos */
.lobby-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px clamp(20px, 3vw, 32px);
  border-bottom: 1px solid var(--g-line);
}
.team-form-title {
  color: var(--g-accent);
  font-size: 14px;
  font-stretch: 110%;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.link-btn {
  padding: .35em .1em;
  border: 0;
  background: none;
  color: var(--g-muted);
  cursor: pointer;
  font: 600 14px/1.2 var(--font-body);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-btn:hover { color: var(--g-text); }

.stepper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--g-line);
}
.stepper li + li { border-left: 1px solid var(--g-line); }
.step-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  padding: 14px clamp(10px, 2vw, 20px);
  border: 0;
  background: transparent;
  color: var(--g-muted);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: color .15s ease, background-color .15s ease;
}
.step-btn::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 3px;
  background: var(--g-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.step-btn:hover { color: var(--g-text); background: color-mix(in srgb, var(--g-accent) 6%, transparent); }
.step-btn:focus-visible { outline-offset: -3px; }
.step-btn[aria-current="step"] {
  color: var(--g-text);
  background: linear-gradient(to top, color-mix(in srgb, var(--g-accent) 14%, transparent), transparent);
}
.step-btn[aria-current="step"]::after { transform: none; }
.step-num {
  position: relative;
  z-index: 0;
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
}
.step-num::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: -1;
  border: 1px solid var(--g-line);
  background: var(--g-bg);
  transform: rotate(45deg);
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.step-btn[aria-current="step"] .step-num { color: var(--g-accent); }
.step-btn[aria-current="step"] .step-num::before { border-color: var(--g-accent); box-shadow: 0 0 14px -2px var(--g-accent); }
.step-btn.is-done .step-num { color: var(--g-accent-ink); }
.step-btn.is-done .step-num::before { border-color: var(--g-accent); background: var(--g-accent); }
.step-text { display: grid; min-width: 0; }
.step-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-stretch: 106%;
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
}
.step-detail {
  overflow: hidden;
  color: var(--g-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .step-btn { flex-direction: column; justify-content: center; gap: 4px; padding: 10px 4px; text-align: center; }
  .step-name { font-size: 11.5px; }
  .step-detail { display: none; }
}

.lobby-paso { padding: clamp(20px, 3.5vw, 32px); }
.lobby-paso:not([hidden]) { animation: paso-in .3s ease both; }
@keyframes paso-in { from { opacity: 0; transform: translateY(8px); } }
.paso-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.8vw, 30px);
  font-stretch: 108%;
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
}
.team-form-help { max-width: 72ch; margin: 8px 0 0; color: var(--g-muted); font-size: 14.5px; }
.team-form-help + .field-hint { margin-top: 8px; color: var(--g-accent); }
.game code { border-color: var(--g-line); background: var(--g-bg-2); }
.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 16px 20px;
  margin-top: 22px;
}
.field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.field-count { color: var(--g-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.icon-field { margin-top: 24px; }
.icon-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
}
.field {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.field label,
.field-label { color: var(--g-text); font-size: 14px; font-weight: 600; }
.field legend.field-label { margin-bottom: 6px; padding: 0; }
.field input,
.field select {
  width: 100%;
  min-height: 46px;
  padding: .6em .8em;
  border: 1px solid var(--g-line);
  border-radius: 8px;
  background: var(--g-bg);
  color: var(--g-text);
  color-scheme: dark;
  font: 400 15px/1.3 var(--font-body);
}
.field input::placeholder { color: var(--g-muted); opacity: .7; }
.field input:focus-visible,
.field select:focus-visible { border-color: var(--g-accent); outline: 2px solid var(--g-accent); outline-offset: 1px; }
.field input[aria-invalid="true"] { border-color: var(--danger); }
.field-error { margin: 0; color: var(--danger); font-size: 13px; }
.field-hint { margin: 0; color: var(--g-muted); font-size: 12.5px; }
.field-static {
  display: flex;
  align-items: center;
  min-height: 46px;
  margin: 0;
  padding: 0 .9em;
  border: 1px dashed var(--g-line);
  font-size: 14.5px;
  font-weight: 600;
}

/* Cuenta de Riot: el nombre arriba; el # y la etiqueta debajo */
.riot-id {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}
.riot-id [data-parte="nombre"] { grid-column: 1 / -1; }
.riot-id-hash {
  padding-inline: 4px;
  color: var(--g-accent);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
}
.slots--form .field { gap: 8px; }
.slots--form .field input { min-height: 40px; padding: .5em .65em; font-size: 14px; }

/* Ícono del equipo: arte oficial completo; la selección se marca con el borde de la opción */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.icon-grid--ancho { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.icon-option {
  position: relative;
  display: grid;
  place-items: center;
  padding: 5px;
  border: 2px solid transparent;
  background: var(--g-bg-2);
  cursor: pointer;
  transition: border-color .15s ease;
}
.icon-option input { position: absolute; opacity: 0; pointer-events: none; }
.icon-option img { width: 100%; max-width: 128px; height: auto; }
.icon-grid--ancho .icon-option img { max-width: 512px; }
.icon-option:hover { border-color: var(--g-line); }
.icon-option:has(input:checked) { border-color: var(--g-accent); box-shadow: 0 0 0 1px var(--g-accent); }
.icon-option:has(input:focus-visible) { outline: 2px solid var(--g-text); outline-offset: 2px; }

/* Imagen propia del equipo: la opción «Tuya» y el bloque para subirla */
.icon-option--propia { position: relative; }
.icon-option--propia img { aspect-ratio: 1; object-fit: cover; }
.icon-tag {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--g-accent);
  color: var(--g-accent-ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.subir {
  gap: 10px;
  margin-top: 18px;
  padding: 14px;
  border: 1px dashed var(--g-line);
}
.subir-reglas {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  color: var(--g-muted);
  font-size: 13px;
  line-height: 1.45;
  list-style: none;
}
.subir-reglas li { padding-left: 18px; text-indent: -18px; }
.subir-reglas li::before { content: "— "; }
.subir-aviso { margin: 0; color: var(--g-text); font-size: 13px; line-height: 1.45; }
.subir-archivo {
  min-height: 0;
  padding: 8px;
  border: 1px solid var(--g-line);
  background: var(--g-bg);
  color: var(--g-text);
  font: inherit;
  font-size: 13.5px;
}
.subir-archivo::file-selector-button {
  margin-right: 10px;
  padding: 7px 12px;
  border: 1px solid var(--g-accent);
  background: transparent;
  color: var(--g-accent);
  cursor: pointer;
  font: 600 13px/1 var(--font-body);
}
.subir-archivo::file-selector-button:hover { background: var(--g-surface); }
.subir-listo { display: grid; gap: 8px; }
.subir-nombre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13.5px;
  overflow-wrap: anywhere;
}
.subir-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
}
.subir-check input {
  flex: none;
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 2px 0 0;
  padding: 0;
  accent-color: var(--g-accent);
}
.subir .link-btn { justify-self: start; }

/* Selector de servidor */
.seg {
  display: inline-grid;
  grid-auto-columns: minmax(72px, 1fr);
  grid-auto-flow: column;
  justify-self: start;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--g-line);
  border-radius: 8px;
  background: var(--g-bg-2);
}
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span {
  display: block;
  padding: .6em 1em;
  border-radius: 5px;
  color: var(--g-muted);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}
.seg label:hover span { color: var(--g-text); }
.seg input:checked + span { background: var(--g-accent); color: var(--g-accent-ink); }
.seg input:focus-visible + span { outline: 2px solid var(--g-text); outline-offset: 2px; }

/* Botón con el que el capitán elige su rol */
.slot-claim {
  margin-top: auto;
  min-height: 36px;
  padding: 0 .8em;
  border: 1px dashed var(--g-line);
  background: transparent;
  color: var(--g-muted);
  cursor: pointer;
  font: 700 11.5px/1.1 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.slot-claim:hover { border-color: var(--g-accent); color: var(--g-accent); }
.slot-claim[aria-pressed="true"] {
  border-style: solid;
  border-color: var(--g-accent);
  background: color-mix(in srgb, var(--g-accent) 16%, transparent);
  color: var(--g-accent);
  cursor: default;
}

/* Suplentes, analistas y coach */
.staff {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 14px;
  margin-top: 20px;
}
.staff-group {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--g-line);
  background: var(--g-bg);
}
.staff-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; }
.staff-head .field-label {
  font-family: var(--font-display);
  font-size: 15px;
  font-stretch: 106%;
  font-weight: 800;
  text-transform: uppercase;
}
.staff-limit { color: var(--g-muted); font-size: 12px; }
.staff-list { display: grid; gap: 10px; }
.staff-list:empty { display: none; }
.staff-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px; }
.staff-remove,
.staff-add {
  min-height: 46px;
  padding: 0 1em;
  border: 1px solid var(--g-line);
  border-radius: 8px;
  background: transparent;
  color: var(--g-muted);
  cursor: pointer;
  font: 600 14px/1 var(--font-body);
}
.staff-remove:hover { border-color: var(--g-muted); color: var(--g-text); }
.staff-add { min-height: 44px; border-style: dashed; color: var(--g-accent); }
.staff-add:hover { border-color: var(--g-accent); background: color-mix(in srgb, var(--g-accent) 8%, transparent); }

/* Revisión final */
.review { display: grid; gap: 14px; margin-top: 20px; }
.review-block { padding: 16px; border: 1px solid var(--g-line); background: var(--g-bg); }
.review-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.review-head h5 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-stretch: 106%;
  font-weight: 800;
  text-transform: uppercase;
}
.review-head h5 span { margin-left: 6px; color: var(--g-accent); }
.review-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  gap: 10px 20px;
  margin: 12px 0 0;
}
.review-list dt {
  color: var(--g-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.review-list dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.review .slots { gap: 8px; margin-top: 12px; }
.review .slot-avatar { width: 44px; height: 44px; }
.review .slot-avatar svg { width: 24px; height: 24px; }
.review-warn {
  margin: 0;
  padding: 12px 14px;
  border-left: 3px solid var(--g-accent);
  background: color-mix(in srgb, var(--g-accent) 8%, transparent);
  font-size: 14px;
}

/* Navegación entre pasos */
.lobby-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 16px clamp(20px, 3vw, 32px);
  border-top: 1px solid var(--g-line);
  background: color-mix(in srgb, var(--g-bg) 55%, transparent);
}
.form-status { flex-basis: 100%; margin: 0; color: var(--danger); font-size: 14px; font-weight: 600; }
.lobby-nav-count {
  margin-right: auto;
  color: var(--g-muted);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.lobby-nav .btn-game { min-width: 190px; }
.btn-arrow::after { content: "→"; transition: transform .15s ease; }
.btn-arrow:hover::after { transform: translateX(3px); }
@media (max-width: 520px) {
  .form-status { order: -2; }
  .lobby-nav-count { flex-basis: 100%; order: -1; }
  .lobby-nav .btn { flex: 1; min-width: 0; }
}

/* Formas por juego: dorado recto y hexágonos, cortes secos, tablero redondeado */
.game--lol :is(.btn-game, .btn-danger, .field input, .field select, .seg, .seg span, .staff-remove, .staff-add, .icon-option, .emblem, .chips li, .staff-chips li, .slot-claim, .staff-group, .review-block) { border-radius: 2px; }
.game--val :is(.btn-game, .btn-danger, .field input, .field select, .seg, .seg span, .staff-remove, .staff-add, .badge, .icon-option, .emblem, .chips li, .staff-chips li, .slot-claim, .staff-group, .review-block) { border-radius: 0; }
.game--val .slot {
  --cut: 12px;
  border-left: 3px solid var(--slot-edge);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.game--val .slot::before { display: none; }
.game--val .slot-badge { clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.game--val .step-num::before { transform: skewX(-14deg); }
.game--val .lobby-kicker::before { transform: none; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.game--tft :is(.field input, .field select, .staff-remove, .staff-add, .icon-option, .emblem, .slot-claim, .staff-group, .review-block, .slot) { border-radius: 14px; }
.game--tft :is(.btn-game, .btn-danger, .seg, .seg span, .chips li, .staff-chips li, .slot-badge, .ready-bar li) { border-radius: 999px; }
.game--tft .slot::before { display: none; }
.game--tft .slot-badge { clip-path: none; }
.game--tft .ready-bar li,
.game--tft .ready-bar li span { transform: none; }
.game--tft .step-num::before,
.game--tft .lobby-kicker::before { border-radius: 50%; transform: none; }

/* ---------- Pasos ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.step {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink);
}
.step-num {
  display: block;
  margin-bottom: 20px;
  color: var(--accent);
  font-family: var(--font-display);
  font-stretch: 120%;
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
}
.step h3 { font-size: 22px; font-stretch: 108%; font-weight: 750; }
.step p { margin: 10px 0 0; color: var(--muted); }

/* ---------- Reglas y acceso gratuito ---------- */
.rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
  overflow: hidden;
}
.rule {
  padding: 28px;
  background: var(--ink);
}
.section-alt .rule { background: var(--surface); }
/* Las líneas entre tarjetas las dibuja cada tarjeta, no el fondo de la cuadrícula: así, si la última fila no se llena, el hueco no queda como un cuadro de color vacío. */
.rules { gap: 0; background: var(--ink); }
.section-alt .rules { background: var(--surface); }
.rule { box-shadow: 1px 1px 0 var(--line); }
/* Columnas fijas según cuántas tarjetas hay, para que todas las filas queden completas. */
#reglas .rules { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#gratis .rules { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { #reglas .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { #gratis .rules { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { #reglas .rules { grid-template-columns: minmax(0, 1fr); } }
.rule-icon {
  width: 28px;
  height: 28px;
  margin-bottom: 18px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rule h3 { font-size: 19px; font-stretch: 105%; font-weight: 700; }
.rule p { margin: 10px 0 0; color: var(--muted); font-size: 15px; }

/* ---------- FAQ ---------- */
.faq-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(24px, 5vw, 64px);
  align-items: start;
}
.faq-grid > * { min-width: 0; }
@media (max-width: 860px) {
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
}
/* En dos columnas el título tiene menos espacio: a tamaño normal se metía encima de las preguntas */
@media (min-width: 861px) {
  .faq-grid .section-head h2 { font-size: clamp(28px, 3.2vw, 40px); }
}
.faq-grid .section-head h2 { overflow-wrap: break-word; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary {
  position: relative;
  padding: 22px 40px 22px 0;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-size: 24px;
  font-weight: 400;
}
.faq details[open] summary::after { content: "−"; }
.faq details p {
  margin: -6px 0 22px;
  max-width: 62ch;
  color: var(--muted);
}

/* ---------- Footer ---------- */
.site-footer {
  padding-block: 56px 32px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--text); }
/* Aviso legal en un lugar visible y legible, no escondido. */
.legal { padding-block: 28px; max-width: 900px; }
.legal h2 {
  margin-bottom: 14px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text);
}
.legal p {
  margin: 0 0 12px;
  color: color-mix(in srgb, var(--text) 82%, var(--ink));
  font-size: 14.5px;
}
.legal .legal-es { color: var(--muted); font-size: 13.5px; }
.copyright {
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

/* ==========================================================================
   Cuenta de jugador: botón de la barra superior, crear cuenta (crear-cuenta.html)
   y perfil (perfil.html). Usa la marca propia (lima).
   Los íconos de Riot Games se muestran completos: sin recortes, redondeos ni capas.
   ========================================================================== */
.header-acciones { display: flex; flex: none; align-items: center; gap: 10px; }
.header-cuenta { display: flex; flex: none; align-items: center; gap: 8px; }
/* Ícono de Discord: la marca oficial en su color, sin modificar (pautas de marca de Discord). */
.discord-btn {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: #5865F2;
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.discord-btn svg { width: 22px; height: auto; fill: currentColor; }
.discord-btn:hover { border-color: #5865F2; background: var(--surface-2); transform: translateY(-1px); }
.discord-btn--proximo { cursor: default; opacity: .5; }
@media (max-width: 400px) {
  .discord-btn { width: 36px; height: 36px; }
  .discord-btn svg { width: 20px; }
}
.header-cuenta .btn[aria-current="page"] { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--accent); }
.perfil-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 220px;
  padding: 4px 14px 4px 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.perfil-link:hover,
.perfil-link[data-actual],
.perfil-link[aria-expanded="true"] { border-color: var(--accent); background: var(--surface-2); }
button.perfil-link { font-family: inherit; line-height: inherit; cursor: pointer; }
.perfil-link-flecha {
  flex: none;
  width: 12px;
  height: 12px;
  margin-left: -2px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .15s ease;
}
.perfil-link[aria-expanded="true"] .perfil-link-flecha { transform: rotate(180deg); }
.perfil-link-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1040px) {
  .perfil-link { max-width: 180px; }
}
@media (max-width: 400px) {
  .perfil-link { max-width: 150px; padding-right: 10px; }
}

.avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
}
.avatar img,
.avatar svg { width: 100%; height: 100%; object-fit: contain; }
.avatar--ancho { width: 48px; }
.cuenta-preview-avatar .avatar,
.avatar--medio { width: 64px; height: 64px; }
.cuenta-preview-avatar .avatar--ancho,
.avatar--medio.avatar--ancho { width: 96px; }
.avatar--grande { width: 128px; height: 128px; }
.avatar--grande.avatar--ancho { width: 190px; }
@media (max-width: 480px) {
  .avatar--grande { width: 96px; height: 96px; }
  .avatar--grande.avatar--ancho { width: 143px; }
}

/* Las páginas de cuenta reutilizan los campos de Mi equipo con los colores de la marca */
.cuenta {
  --g-bg: var(--ink);
  --g-bg-2: var(--surface-2);
  --g-surface: var(--surface);
  --g-line: var(--line);
  --g-text: var(--text);
  --g-muted: var(--muted);
  --g-accent: var(--accent);
  --g-accent-ink: var(--accent-ink);
  padding-block: clamp(40px, 6vw, 80px) clamp(64px, 9vw, 112px);
}
.cuenta [hidden] { display: none !important; }
.cuenta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.cuenta-intro { position: sticky; top: 100px; }
@media (max-width: 900px) {
  .cuenta-grid { grid-template-columns: minmax(0, 1fr); }
  .cuenta-intro { position: static; }
}
.cuenta-intro h1 {
  margin-top: 14px;
  font-size: clamp(38px, 5vw, 60px);
  font-stretch: 112%;
  font-weight: 900;
  text-transform: uppercase;
}
.cuenta-intro .section-sub { margin-top: 14px; }
.cuenta-preview {
  margin-top: 28px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.cuenta-preview-label {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.cuenta-preview-card { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cuenta-preview-text { min-width: 0; }
.cuenta-preview-name {
  margin: 0;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 22px;
  font-stretch: 108%;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cuenta-preview-name.is-vacio { color: var(--muted); }
.cuenta-preview-id { margin: 2px 0 0; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.cuenta-points {
  display: grid;
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 14.5px;
}
.cuenta-points li { position: relative; padding-left: 26px; }
.cuenta-points li::before {
  content: "";
  position: absolute;
  top: .42em;
  left: 3px;
  width: 11px;
  height: 6px;
  border-bottom: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
  transform: rotate(-45deg);
}

.cuenta-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.cuenta-form { display: grid; }
.cuenta-form .team-note {
  margin: 0;
  padding: 14px clamp(20px, 3.5vw, 32px);
  border: 0;
  border-bottom: 1px dashed var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
}
.cuenta-bloque {
  padding: clamp(22px, 3.5vw, 32px);
  border-bottom: 1px solid var(--line);
}
.cuenta-bloque-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(20px, 2.4vw, 24px);
  font-stretch: 108%;
  font-weight: 800;
  text-transform: uppercase;
}
.cuenta-bloque-num {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--accent);
  font-size: 14px;
}
.cuenta-bloque .field-grid { margin-top: 18px; }
.cuenta-bloque .icon-head .team-form-help { margin: 0; }
.cuenta-bloque .icon-head { margin-top: 10px; }
.cuenta-campo-full { grid-column: 1 / -1; }
.cuenta-form-foot { display: grid; gap: 16px; padding: clamp(22px, 3.5vw, 32px); }
.cuenta-form-foot .btn { justify-self: start; }
.cuenta-existe { margin: 0; padding: clamp(24px, 4vw, 36px); }
.cuenta-existe .btn { margin-top: 22px; }

/* Contraseña: botón para mostrarla y requisitos que se marcan mientras se escribe */
.pass { position: relative; }
.pass input { padding-right: 92px; }
.pass-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  min-width: 76px;
  min-height: 34px;
  padding: 0 .8em;
  border: 0;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  font: 600 13px/1 var(--font-body);
  transform: translateY(-50%);
}
.pass-toggle:hover { background: var(--line); }
.pass-reglas {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 12.5px;
}
.pass-reglas li::before { content: "○"; margin-right: 5px; }
.pass-reglas li.is-ok { color: var(--accent); }
.pass-reglas li.is-ok::before { content: "✓"; }

/* Riot ID en una sola línea: nombre # etiqueta */
.riot-id--linea { grid-template-columns: minmax(0, 1fr) auto minmax(84px, 120px); }
.riot-id--linea [data-parte="nombre"] { grid-column: auto; }

/* Botón «Continuar con Google» según las pautas de marca de Google */
.google-btn {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 12px;
  min-height: 44px;
  padding: 0 16px 0 12px;
  border: 1px solid #747775;
  border-radius: 4px;
  background: #FFFFFF;
  color: #1F1F1F;
  cursor: pointer;
  font: 500 14px/1 Roboto, var(--font-body);
}
.google-btn:hover { background: #F1F3F4; }
.google-btn svg { flex: none; width: 20px; height: 20px; }

/* Forma de acceso: Google o correo, solo una. Los dos botones tienen el mismo tamaño y presencia. */
.acceso-opciones { display: grid; gap: 12px; max-width: 380px; margin-top: 16px; }
.acceso-opciones [data-google-oficial]:empty { display: none; }
.acceso-opciones .google-btn { justify-content: center; justify-self: stretch; }
.correo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 16px 0 12px;
  border: 1px solid var(--muted);
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: 500 14px/1 Roboto, var(--font-body);
}
.correo-btn:hover { border-color: var(--text); background: var(--surface-2); }
.correo-btn svg { flex: none; width: 20px; height: 20px; }
.acceso-o {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.acceso-o::before,
.acceso-o::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.google-sim {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 10px;
}
.google-sim .link-btn { justify-self: start; }
.google-sim-row { display: flex; gap: 8px; }
.google-sim-row input { flex: 1; min-width: 0; }
.acceso-ok {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--ink);
}
.acceso-ok svg { flex: none; width: 22px; height: 22px; }
.acceso-ok .icono-correo { color: var(--accent); }
.acceso-ok-text { flex: 1; min-width: 0; margin: 0; font-size: 14px; }
.acceso-ok-text strong { display: block; }
.acceso-ok-text span { color: var(--muted); overflow-wrap: anywhere; }

/* Íconos de perfil por colección */
.cuenta-iconos { margin-top: 4px; }
.icon-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.icon-tab {
  padding: .6em .95em;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: 600 13.5px/1.1 var(--font-body);
}
.icon-tab:hover { border-color: var(--muted); color: var(--text); }
.icon-tab[aria-selected="true"] { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.icon-panel .field-hint { margin-top: 14px; }
.cuenta .icon-grid { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); }
.cuenta .icon-grid--ancho { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.icon-option svg { width: 100%; max-width: 128px; height: auto; }

.cuenta-check label { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; }
.cuenta-check input {
  flex: none;
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 2px 0 0;
  padding: 0;
  accent-color: var(--accent);
}
.cuenta-check a { color: var(--accent); }
.cuenta-check .field-hint { margin: 6px 0 0 28px; }

/* Términos y condiciones */
.terminos { padding-block: clamp(40px, 6vw, 80px) clamp(64px, 9vw, 112px); }
.terminos-grid {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  grid-template-areas: "head head" "indice cuerpo";
  gap: clamp(28px, 4vw, 48px) clamp(28px, 5vw, 64px);
  align-items: start;
}
.terminos-head { grid-area: head; max-width: 720px; }
.terminos-head h1 {
  font-size: clamp(36px, 5vw, 60px);
  font-stretch: 112%;
  font-weight: 900;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
.terminos-version { margin: 14px 0 0; color: var(--muted); font-size: 14px; }
.terminos-indice {
  grid-area: indice;
  position: sticky;
  top: 100px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.terminos-indice-title {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.terminos-indice ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; font-size: 14px; }
.terminos-indice li::marker { color: var(--muted); }
.terminos-indice a { color: var(--text); text-decoration: none; }
.terminos-indice a:hover { color: var(--accent); text-decoration: underline; }
.terminos-cuerpo { grid-area: cuerpo; max-width: 760px; }
.terminos-cuerpo section { padding-block: 26px; border-top: 1px solid var(--line); }
.terminos-cuerpo section:first-child { padding-top: 0; border-top: 0; }
.terminos-cuerpo h2 {
  margin: 0 0 12px;
  font-size: clamp(21px, 2.4vw, 26px);
  font-stretch: 106%;
  font-weight: 800;
}
.terminos-cuerpo h2 span { color: var(--accent); }
.terminos-cuerpo p,
.terminos-cuerpo li { color: var(--muted); font-size: 16px; line-height: 1.65; }
.terminos-cuerpo p { margin: 0 0 12px; }
.terminos-cuerpo ul { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 8px; }
.terminos-cuerpo strong { color: var(--text); }
.terminos-cuerpo a:not(.btn) { color: var(--accent); }
.terminos-volver { margin-top: 20px !important; }
@media (max-width: 900px) {
  .terminos-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "indice" "cuerpo"; }
  .terminos-indice { position: static; }
}

/* Perfil */
.perfil-flash {
  margin: 0 0 28px;
  padding: 12px 16px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  color: var(--accent);
  font-weight: 600;
}
.perfil-titulo:focus:not(:focus-visible) { outline: none; }
.perfil-vacio { max-width: 640px; }
.perfil-vacio h1 {
  margin-top: 14px;
  font-size: clamp(34px, 5vw, 56px);
  font-stretch: 112%;
  font-weight: 900;
  text-transform: uppercase;
}
.perfil-vacio .section-sub { margin: 14px 0 26px; }
.perfil-head { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; }
.perfil-head-text { min-width: 0; }
.perfil-head h1 {
  margin-top: 10px;
  font-size: clamp(34px, 5.4vw, 64px);
  font-stretch: 108%;
  font-weight: 900;
  overflow-wrap: anywhere;
}
.perfil-since { margin: 8px 0 0; color: var(--muted); }
.perfil-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(28px, 4vw, 44px);
}
@media (max-width: 760px) {
  .perfil-grid { grid-template-columns: minmax(0, 1fr); }
}
.perfil-card {
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.perfil-card h2 {
  font-size: 17px;
  font-stretch: 108%;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.perfil-datos { display: grid; gap: 16px; margin: 18px 0 0; }
.perfil-datos dt { color: var(--muted); font-size: 13px; }
.perfil-datos dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 2px 0 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.perfil-nota { flex-basis: 100%; color: var(--muted); font-size: 13px; font-weight: 400; }
.tag {
  padding: .25em .65em;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.tag--ok { border-color: var(--accent); color: var(--accent); }
.perfil-icono { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.perfil-icono p { display: grid; min-width: 0; margin: 0; }
.perfil-icono span { color: var(--muted); font-size: 13.5px; }
.perfil-equipos { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.perfil-equipo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 12px;
  padding: 10px 14px;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--gb);
  border-radius: 8px;
  background: var(--ink);
  font-size: 14.5px;
}
.perfil-equipo span { color: var(--muted); }
.perfil-equipo strong { overflow-wrap: anywhere; }
.perfil-equipo strong.is-vacio { color: var(--muted); font-weight: 500; }
.perfil-equipo--lol { --gb: var(--lol); }
.perfil-equipo--val { --gb: var(--val); }
.perfil-equipo--tft { --gb: var(--tft); }
.perfil-card-btn { margin-top: 16px; }
.perfil-sesion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin-top: 16px;
}
.perfil-sesion p { max-width: 62ch; margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.perfil-acciones { display: flex; flex-wrap: wrap; gap: 10px; }

/* ==========================================================================
   Vista del torneo: ficha de datos, resumen del bracket y participantes
   Mismo lenguaje que las fichas de precio de la portada: marco por juego,
   cifras en la tipografía de títulos y una fila por dato.
   ========================================================================== */
.tficha {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 24px);
  margin-top: clamp(24px, 3vw, 36px);
  align-items: start;
}
@media (max-width: 860px) {
  .tficha { grid-template-columns: minmax(0, 1fr); }
}
.tficha-datos {
  position: relative;
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--g-line);
  border-radius: var(--r);
  background: var(--g-surface);
}
.tficha-datos .price-amount { font-size: clamp(36px, 4vw, 48px); }
.tficha-datos .facts { margin-top: 16px; }
.tficha-datos .facts li { grid-template-columns: 116px minmax(0, 1fr); }
.tficha-pool { margin-top: 0; border-radius: var(--r); }
.premios {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.premio {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 10px 12px;
  border: 1px solid var(--g-line);
  border-radius: var(--r);
  background: var(--g-surface);
}
.premio-puesto {
  color: var(--g-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.premio-monto {
  font-family: var(--font-display);
  font-stretch: 106%;
  font-size: 26px;
  font-weight: 900;
  color: var(--g-accent);
  font-variant-numeric: tabular-nums;
}
.premio-monto small { color: var(--g-muted); font-size: 13px; font-weight: 600; }
.premio--2 { border-style: dashed; }
.premio--2 .premio-monto { font-size: 22px; color: var(--g-text); }

/* Resumen del bracket */
.resumen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}
@media (max-width: 760px) {
  .resumen { grid-template-columns: minmax(0, 1fr); }
}
.resumen-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--g-line);
  border-radius: var(--r);
  background: var(--g-surface);
}
.resumen-card--bolsa { border-color: color-mix(in srgb, var(--g-accent) 45%, var(--g-line)); }
.resumen-dt {
  margin: 0;
  color: var(--g-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.resumen-dd {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: 106%;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.resumen-dd small { color: var(--g-muted); font-size: 14px; font-weight: 600; }
.resumen-dd--corto { font-size: 19px; }
.resumen-card--bolsa .resumen-dd { color: var(--g-accent); }
.resumen-nota { margin: 0; color: var(--g-muted); font-size: 13px; }
.resumen-split { display: grid; gap: 2px; margin: 2px 0 0; padding: 0; list-style: none; font-size: 13.5px; }
.resumen-split li { display: flex; justify-content: space-between; gap: 10px; }
.resumen-split span { color: var(--g-muted); }
.resumen-split b { font-variant-numeric: tabular-nums; }
.resumen-campeon { display: flex; align-items: center; gap: 8px; color: var(--g-accent); }
.resumen-campeon svg,
.pcard-badge svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.resumen-pendiente { color: var(--g-muted); font-family: var(--font-body); font-size: 15px; font-weight: 600; }

/* Participantes: una tarjeta por equipo, con su semilla y sus puntos */
.participantes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pcard {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--g-line);
  border-radius: var(--r);
  background: var(--g-surface);
  transition: border-color .15s ease;
}
.pcard-seed {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--g-line);
  border-radius: var(--r);
  background: var(--g-bg-2);
  color: var(--g-muted);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.pcard-texto { display: grid; min-width: 0; }
.pcard-name {
  overflow: hidden;
  color: var(--g-text);
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pcard-name:hover { color: var(--g-accent); }
.pcard-meta { color: var(--g-muted); font-size: 12px; }
.pcard-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: .25em .6em;
  border-radius: var(--r);
  background: var(--g-accent);
  color: var(--g-accent-ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
}
.pcard-badge--2 { background: transparent; border: 1px solid var(--g-accent); color: var(--g-accent); }
.pcard--campeon { border-color: var(--g-accent); background: color-mix(in srgb, var(--g-accent) 10%, var(--g-surface)); }
.pcard--campeon .pcard-seed { border-color: var(--g-accent); color: var(--g-accent); }
.pcard--segundo { border-color: color-mix(in srgb, var(--g-accent) 45%, var(--g-line)); }
.pcard.is-traza { border-color: var(--g-accent); }

/* Formas de cada juego, como en las fichas de la portada */
.game--lol :is(.tficha-datos, .tficha-pool, .premio, .resumen-card, .pcard, .pcard-seed, .pcard-badge) { border-radius: 2px; }
.game--lol .tficha-datos::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid color-mix(in srgb, var(--g-accent) 32%, transparent);
  pointer-events: none;
}
.game--val :is(.tficha-datos, .tficha-pool, .premio, .resumen-card, .pcard, .pcard-seed, .pcard-badge) { border-radius: 0; }
.game--val .tficha-datos {
  --cut: 18px;
  border-left: 3px solid var(--g-accent);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.game--val .pcard { border-left: 3px solid color-mix(in srgb, var(--g-accent) 45%, var(--g-line)); }
.game--tft :is(.tficha-datos, .tficha-pool, .premio, .resumen-card, .pcard) { border-radius: 16px; }
.game--tft :is(.pcard-seed, .pcard-badge) { border-radius: 999px; }

/* Reparto de la bolsa entre el campeón y el subcampeón */
.pool-split {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 8px 0 0;
  color: var(--g-text);
  font-size: 14.5px;
}
.pool-split strong { color: var(--g-accent); }

/* ==========================================================================
   Secciones de cada copa: torneos, temporada y buscar equipo
   ========================================================================== */
.subnav { border-bottom: 1px solid var(--g-line); background: var(--g-bg); }
.subnav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 18px;
  margin: 0;
  padding-block: 8px;
  list-style: none;
}
.subnav a {
  display: inline-block;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  color: var(--g-muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.subnav a:hover { color: var(--g-text); }
.subnav a[aria-current="page"] { border-bottom-color: var(--g-accent); color: var(--g-text); }

/* Horas de cada servidor en el panel del tablero */
.tcard-horas { display: grid; gap: 2px; margin: -4px 0 0; padding: 0; list-style: none; font-size: 13px; }
.tcard-horas li { display: flex; gap: 8px; }
.tcard-horas small,
.detalle-hora small { color: var(--g-muted); font-size: 12px; font-weight: 500; }
.detalle-horas { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; font-size: 15px; }
.detalle-hora b { color: var(--g-muted); font-weight: 700; }
.detalle-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.detalle-acciones .btn-game-line { margin-top: 0; }
.detalle-aviso {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px dashed var(--g-accent);
  border-radius: var(--r);
  color: var(--g-text);
  font-size: 14px;
}
.detalle-aviso a { color: var(--g-accent); font-weight: 600; }

/* Check-in */
.checkin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 24px;
  padding: 16px 18px;
  border: 1px solid var(--g-line);
  border-radius: var(--r);
  background: var(--g-surface);
}
.checkin--abierto { border-color: var(--live); }
.checkin h2 { font-size: 17px; font-weight: 800; }
.checkin p { margin: 6px 0 0; max-width: 62ch; font-size: 14px; }
.checkin-nota { color: var(--g-muted); font-size: 13px; }
.checkin-ok {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-left: 3px solid var(--g-accent);
  background: var(--g-bg-2);
  color: var(--g-text);
  font-size: 14px;
  font-weight: 600;
}
.checkin-accion .btn { margin-top: 0; }

/* Horario por fases */
.fases { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fase { padding: 12px 14px; border: 1px solid var(--g-line); border-radius: var(--r); }
.fase--vivo { border-color: var(--live); }
.fase--pendiente { border-style: dashed; }
.fase-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin: 0;
  font-size: 14.5px;
}
.fase-num { color: var(--g-muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.fase-head strong { flex: 1; min-width: 12ch; }
.fase-hora { color: var(--g-muted); font-size: 13px; }
.fase-hora small { font-size: 12px; }
.fase-estado { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.fase--vivo .fase-estado { color: var(--live); }
.fase--jugado .fase-estado { color: var(--g-muted); }
.fase-lista summary { margin-top: 8px; color: var(--g-accent); font-size: 13px; font-weight: 600; cursor: pointer; }
.fase-lista ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 2px 20px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
}
.fase-lista li { padding: 5px 0; border-bottom: 1px solid var(--g-line); }
.fase-lista a { color: var(--g-text); text-decoration: none; }
.fase-lista a:hover { color: var(--g-accent); }
.fase-pase { color: var(--g-muted); }

/* Transmisión de la final */
.stream {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 20px;
  border: 1px dashed var(--g-line);
  border-radius: var(--r);
  background: var(--g-bg-2);
}
.stream-nota { max-width: 56ch; margin: 0; color: var(--g-muted); font-size: 14px; text-align: center; }

/* ==========================================================================
   Vista de una partida
   ========================================================================== */
.partida-head { margin-bottom: 20px; }
.partida-head h1 {
  margin: 6px 0 0;
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 900;
}
.partida-head h1 span { display: block; color: var(--g-muted); font-size: 15px; font-weight: 600; }
.marcador {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--g-line);
  border-radius: var(--r);
  background: var(--g-surface);
}
.marcador-lado { display: flex; align-items: center; gap: 10px; min-width: 0; }
.marcador-lado:last-child { flex-direction: row-reverse; text-align: right; }
.marcador-nombre { flex: 1; min-width: 0; overflow: hidden; color: var(--g-text); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.marcador-puntos { font-family: var(--font-display); font-size: 28px; font-weight: 900; font-variant-numeric: tabular-nums; }
.marcador-lado.is-winner .marcador-puntos,
.marcador-lado.is-winner .marcador-nombre { color: var(--g-accent); }
.marcador-vs { margin: 0; color: var(--g-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }

.alineacion { display: grid; gap: 4px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 14px; }
.alineacion li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--g-line); }
.alineacion a { flex: 1; color: var(--g-text); font-weight: 600; text-decoration: none; }
.alineacion a:hover { color: var(--g-accent); }
.alineacion span:last-child { color: var(--g-muted); font-size: 12.5px; }
.alineacion--grande { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 0 20px; }

.juego + .juego { margin-top: 24px; }
.juego .llave-title span { color: var(--g-muted); font-weight: 500; text-transform: none; letter-spacing: 0; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px; margin-top: 12px; }
.stats-equipo { padding: 12px 14px; border: 1px solid var(--g-line); border-radius: var(--r); background: var(--g-surface); }
.stats-equipo.is-winner { border-color: var(--g-accent); }
.stats-equipo h4 { margin: 0 0 10px; font-family: var(--font-display); font-size: 17px; font-weight: 800; }
.stats-equipo h4 span { display: block; color: var(--g-muted); font-size: 12.5px; font-weight: 500; }
.bans { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.bans > span:first-child { color: var(--g-muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.champ-icon { width: 34px; height: 34px; border: 1px solid var(--g-line); border-radius: 4px; }
.ban .champ-icon { opacity: .55; }
.tabla-stats { width: 100%; min-width: 420px; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.tabla-stats th,
.tabla-stats td { padding: 6px 8px; border-top: 1px solid var(--g-line); text-align: left; white-space: nowrap; }
.tabla-stats thead th {
  border-top: 0;
  color: var(--g-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.tabla-stats tbody th { font-weight: 600; }
.tabla-stats a { color: var(--g-text); text-decoration: none; }
.tabla-stats a:hover { color: var(--g-accent); }
.tabla-rol { color: var(--g-muted); font-size: 11.5px; font-weight: 700; }
.tabla-champ { display: flex; align-items: center; gap: 8px; }

.salas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 16px; }
.sala { padding: 12px 14px; border: 1px solid var(--g-line); border-radius: var(--r); background: var(--g-surface); }
.sala-puntos { color: var(--g-accent); font-size: 12.5px; font-weight: 700; }

.reporte-form { display: grid; gap: 12px; max-width: 560px; }
.reporte-form .field-hint { margin: 0; }
.field textarea {
  width: 100%;
  padding: .6em .8em;
  border: 1px solid var(--g-line);
  border-radius: 8px;
  background: var(--g-bg);
  color: var(--g-text);
  color-scheme: dark;
  font: 400 15px/1.4 var(--font-body);
  resize: vertical;
}
.field textarea:focus-visible { border-color: var(--g-accent); outline: 2px solid var(--g-accent); outline-offset: 1px; }

/* ==========================================================================
   Temporada, perfiles públicos y buscar equipo
   ========================================================================== */
/* Ícono pequeño, a la altura del texto, a la izquierda de un nombre. El arte se muestra completo y
   siempre más chico que su tamaño original. */
.icono-mini {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  overflow: hidden;
  border: 1px solid var(--g-line);
  border-radius: min(var(--r, 4px), 6px);
  background: var(--g-bg);
  vertical-align: middle;
}
.icono-mini img { display: block; width: 100%; height: 100%; object-fit: contain; }
.temporada-quien { display: inline-flex; align-items: center; gap: 10px; }
.tabla-temporada tbody th { padding-block: 6px; }

.temporada-destacados { display: grid; gap: clamp(28px, 4vw, 40px); margin-top: 24px; }

/* Equipo de la semana: la sala de Mi equipo con un estandarte de salón de la fama, con
   laureles y trofeo (dibujos propios) alrededor del ícono. */
.semana { max-width: none; }
.semana-banner {
  background:
    radial-gradient(60% 120% at 12% 0%, color-mix(in srgb, var(--g-accent) 26%, transparent), transparent 70%),
    linear-gradient(100deg, color-mix(in srgb, var(--g-accent) 10%, transparent), transparent 60%),
    var(--g-bg-2);
}
.semana-emblema { display: flex; align-items: center; gap: 4px; color: var(--g-accent); }
.semana-laurel svg { display: block; width: 26px; height: 52px; fill: currentColor; opacity: .85; }
.semana-laurel--der svg { transform: scaleX(-1); }
.semana-nombre a {
  color: var(--g-text);
  text-decoration: none;
  text-shadow: 0 0 28px color-mix(in srgb, var(--g-accent) 45%, transparent);
}
.semana-nombre a:hover { color: var(--g-accent); }
.semana-trofeo {
  display: grid;
  justify-items: center;
  gap: 4px;
  color: var(--g-accent);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .14em;
}
.semana-trofeo svg {
  width: 64px;
  height: 64px;
  fill: currentColor;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--g-accent) 55%, transparent));
}
@media (max-width: 760px) {
  .semana-trofeo { display: none; }
}
@media (max-width: 440px) {
  .semana-laurel { display: none; }
}
.plantel--publico .plantel-nombre { text-decoration: none; }
.plantel--publico .plantel-nombre:hover { color: var(--g-accent); }
.plantel--publico.plantel--lol .plantel-jugador { min-height: 250px; }
.plantel--publico.plantel--val .plantel-jugador { min-height: 280px; }
.plantel--publico.plantel--tft { margin-inline: auto; }

/* Campeones del fin de semana: una placa de salón de la fama por torneo. */
.salon { margin-top: 0; }
.salon > .salon-title { display: flex; align-items: center; gap: 10px; }
.salon-trofeo svg { display: block; width: 26px; height: 26px; fill: var(--g-accent); }
.salon-placas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.placa {
  position: relative;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 16px 18px 18px;
  overflow: hidden;
  border: 1px solid var(--g-line);
  border-top: 3px solid var(--g-accent);
  border-radius: var(--r, 4px);
  background:
    radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--g-accent) 14%, transparent), transparent 75%),
    var(--g-surface);
  animation: slot-in .45s ease both;
}
.game--val .placa { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); }
.game--tft .placa { border-radius: 18px; }
.placa--vacia { border-top-color: var(--g-line); }
.placa-torneo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--g-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.placa-torneo small { font-size: inherit; font-weight: 500; letter-spacing: .04em; }
.placa-trofeo svg { display: block; width: 18px; height: 18px; fill: var(--g-accent); }
.placa-campeon { display: flex; align-items: center; gap: 14px; color: var(--g-text); text-decoration: none; }
.placa-campeon:hover .placa-nombre { color: var(--g-accent); }
.placa .placa-icono { border-color: var(--g-accent); box-shadow: 0 0 22px -8px var(--g-accent); }
.placa .placa-icono img { width: 52px; }
.placa-nombre {
  display: grid;
  gap: 2px;
  margin: 0;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.placa-nombre--vacio { color: var(--g-muted); font-style: italic; font-weight: 500; }
.placa-etiqueta {
  color: var(--g-accent);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.placa-mvp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px dashed var(--g-line);
  font-size: 14px;
}
.placa-mvp a { color: var(--g-text); font-weight: 700; text-decoration: none; }
.placa-mvp a:hover { color: var(--g-accent); }
.placa-kda { margin-left: auto; color: var(--g-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.escala { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.escala li {
  padding: 6px 12px;
  border: 1px solid var(--g-line);
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 700;
}
.escala span { display: block; color: var(--g-muted); font-size: 11px; font-weight: 600; }
.tabla-temporada thead th:nth-child(2),
.tabla-historial thead th:nth-child(2) { width: 32%; }
.tabla-temporada tbody th,
.tabla-historial tbody th { text-align: left; }
.tabla-temporada a,
.tabla-historial a { color: var(--g-text); text-decoration: none; }
.tabla-temporada a:hover,
.tabla-historial a:hover { color: var(--g-accent); }
.tabla-historial td,
.tabla-historial th { text-align: left; }

.perfil-publico { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.perfil-publico h1 { margin: 4px 0 0; font-size: clamp(30px, 4vw, 46px); font-weight: 900; }
.monograma {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border: 2px solid var(--g-accent);
  border-radius: var(--r);
  background: var(--g-surface);
  color: var(--g-accent);
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 900;
  letter-spacing: .02em;
}
.perfil-stats { margin-top: 14px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.mas-jugados { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mas-jugados li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--g-line);
  border-radius: var(--r);
  font-size: 13.5px;
  font-weight: 600;
}
.mas-jugados small { color: var(--g-muted); font-weight: 500; }

.filtros { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.filtros .field { min-width: 180px; }
.agentes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.agente {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  overflow: hidden;
  border: 1px solid var(--g-line);
  border-radius: var(--r);
  background:
    radial-gradient(120% 70% at 0% 0%, var(--g-glow), transparent 55%),
    linear-gradient(180deg, var(--g-surface), var(--g-bg-2));
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
/* Franja del color del juego arriba de cada tarjeta */
.agente::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--g-accent), transparent 75%); opacity: .8; }
.agente:hover { border-color: color-mix(in srgb, var(--g-accent) 55%, var(--g-line)); box-shadow: 0 10px 28px rgba(0, 0, 0, .28); transform: translateY(-2px); }
.agente--propio { border-color: var(--g-accent); }
.agente-alias { margin: 0; font-family: var(--font-display); font-size: 19px; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.agente-datos { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; }
.agente-datos li { display: flex; align-items: center; gap: 10px; }
.agente-datos li > span:first-child { flex: none; min-width: 6.5em; color: var(--g-muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.agente-mensaje { margin: 0; padding-left: 12px; border-left: 2px solid var(--g-line); color: var(--g-text); font-size: 14px; font-style: italic; }
.agente-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--g-line); }
.agente-fecha { color: var(--g-muted); font-size: 12.5px; }
.agente-pie .btn { margin-top: 0; }
.agente-form { display: grid; gap: 14px; max-width: 720px; }
.agente-form .field-grid { margin-top: 0; }
.agente-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.agente-acciones .btn { margin-top: 0; }
.agente-alias a { color: inherit; text-decoration: none; }
.agente-alias a:hover { color: var(--g-accent); }
.agente-alias .tag { vertical-align: middle; }
/* Cabeza: ícono del equipo o del jugador, nombre y estado o elo */
.agente-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.agente-titulo { display: grid; flex: 1 1 8em; gap: 3px; min-width: 0; }
.agente-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; color: var(--g-muted); font-size: 12.5px; }
.agente-meta .tag { padding-block: .15em; font-size: 10px; }
.agente--equipo .agente-cabeza { flex-wrap: nowrap; justify-content: flex-start; }
/* Arte oficial completo y sin recortar: solo se enmarca, nunca más grande que su tamaño original */
.agente-escudo,
.agente .agente-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 4px;
  border: 1px solid var(--g-line);
  border-radius: calc(var(--r) + 6px);
  background: var(--g-bg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-accent) 14%, transparent);
}
.agente .agente-avatar.avatar--ancho { width: 84px; }
.agente-escudo-img { width: 100%; height: 100%; object-fit: contain; }
.agente-bloque { display: grid; gap: 6px; }
.agente-bloque .agente-etiqueta,
.agente-requisitos .agente-etiqueta { margin: 0; color: var(--g-muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.agente-elo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--g-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.agente-elo.is-sin-vincular { color: var(--g-muted); }
.agente-elo img.plantel-emblema { width: 48px; height: 48px; margin-block: -12px; }
.agente-elo svg.plantel-emblema { width: 24px; height: 24px; }
.agente-puestos { display: flex; flex-wrap: wrap; gap: 6px; }
.agente-bloque .agente-puesto { padding: 4px 10px 4px 8px; border: 1px solid var(--g-line); border-radius: 999px; background: color-mix(in srgb, var(--g-accent) 8%, var(--g-bg)); font-size: 13px; }
.agente-puesto { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.agente-puesto .plantel-rol-icono { width: 18px; height: 18px; color: var(--g-accent); }
/* Rango de elo que busca el equipo: emblema del mínimo → emblema del máximo */
.agente-rango { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-weight: 600; }
.agente-rango.is-cualquiera { color: var(--g-accent); }
.agente-rango-emblema { display: inline-grid; place-items: center; width: 24px; height: 24px; }
.agente-rango-emblema img.plantel-emblema { width: 40px; height: 40px; max-width: none; margin: -8px; }
.agente-rango-emblema svg.plantel-emblema { width: 20px; height: 20px; }
.agente-rango-sep { color: var(--g-muted); font-size: 12px; }
.eq-rango { margin-top: 10px; }
.eq-rango[hidden] { display: none; }
.agente-requisitos { padding: 10px 12px; border-left: 2px solid var(--g-accent); border-radius: 0 var(--r) var(--r) 0; background: color-mix(in srgb, var(--g-bg) 70%, transparent); }
.agente-requisitos p { margin: 0; font-size: 14px; }
.agente-requisitos .agente-etiqueta { margin-bottom: 2px; }
.buscar-tabs { grid-template-columns: repeat(2, minmax(0, auto)); }
.buscar-tabs .tier { padding-inline: 1em; }
.buscar-tab-n { margin-left: 4px; opacity: .7; font-variant-numeric: tabular-nums; }
.seg--varios { display: flex; flex-wrap: wrap; }
.seg--varios span { display: inline-flex; align-items: center; gap: 6px; }
.seg--varios .plantel-rol-icono { width: 18px; height: 18px; }
#propio-title:focus { outline: none; }

/* La partida del bracket es un enlace a su propia vista */
a.match { display: block; color: inherit; text-decoration: none; }
a.match:hover { border-color: var(--g-accent); }
.match-row.is-second,
.participantes li.is-second { color: var(--g-text); }
.final-badge--2 { background: transparent; border: 1px solid var(--g-accent); color: var(--g-accent); }
.participantes a.part-name { color: inherit; text-decoration: none; }
.participantes a.part-name:hover { color: var(--g-accent); }

@media (max-width: 640px) {
  .marcador { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .marcador-lado,
  .marcador-lado:last-child { flex-direction: row; justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Ladder (ladder.html)
   Una sección por juego, con sus colores y sus formas: podio de los más
   ganadores y tabla con torneos, victorias, winrate y racha. Los íconos de
   equipo son arte oficial de Riot, completo y más chico que su tamaño original.
   ========================================================================== */
.ladder-intro .section-head { max-width: 760px; margin-bottom: clamp(24px, 4vw, 36px); }
.ladder-intro h1 {
  margin-top: 6px;
  font-size: clamp(38px, 5.4vw, 66px);
  font-stretch: 112%;
  font-weight: 900;
  text-transform: uppercase;
}
.ladder-temporada { margin-top: 14px; color: var(--muted); font-size: 14px; }
.ladder-temporada a { color: var(--accent); font-weight: 600; text-decoration: none; }
.ladder-temporada a:hover { text-decoration: underline; }
.ladder-temporada strong { color: var(--text); }

/* Radio de las esquinas de cada juego, como en los tableros. */
.ladder-juego { --r: 4px; padding-block: clamp(56px, 8vw, 96px); }
.game--val.ladder-juego { --r: 0px; }
.game--tft.ladder-juego { --r: 12px; }
.ladder-juego h2 { font-size: clamp(32px, 4.8vw, 56px); }
.ladder-juego .game-sub a { color: var(--g-accent); font-weight: 600; }
.ladder-grupo + .ladder-grupo { margin-top: clamp(36px, 5vw, 56px); }
.ladder-grupo .llave-title { margin-bottom: 16px; }
.ladder-pie { margin: 10px 0 0; }

/* ---------- Podio ---------- */
/* En orden de clasificación en el HTML; en pantalla, el campeón queda al centro y en alto. */
.podio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: clamp(10px, 2vw, 20px);
  margin: 0 0 clamp(24px, 4vw, 36px);
  padding: 0;
  list-style: none;
}
.podio-puesto--1 { order: 2; }
.podio-puesto--2 { order: 1; }
.podio-puesto--3 { order: 3; }
.podio-puesto a {
  display: grid;
  justify-items: center;
  gap: 8px;
  height: 100%;
  padding: clamp(16px, 2.4vw, 24px) 14px 18px;
  border: 1px solid var(--g-line);
  border-bottom: 3px solid var(--g-line);
  border-radius: var(--r);
  background: var(--g-surface);
  color: inherit;
  text-align: center;
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease;
}
.podio-puesto a:hover { transform: translateY(-2px); border-color: var(--g-accent); }
.podio-puesto--1 a {
  padding-top: clamp(24px, 3.6vw, 40px);
  border-color: var(--g-accent);
  border-bottom-color: var(--g-accent);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--g-accent) 14%, transparent), var(--g-surface) 60%);
}
.podio-medalla {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--g-muted);
  text-transform: uppercase;
}
.podio-puesto--1 .podio-medalla { color: var(--g-accent); }
.podio-nombre {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.9vw, 21px);
  font-stretch: 106%;
  font-weight: 800;
  line-height: 1.15;
  text-wrap: balance;
}
.podio-datos { color: var(--g-muted); font-size: 12.5px; }
@media (max-width: 560px) {
  .podio { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .podio-puesto--1, .podio-puesto--2, .podio-puesto--3 { order: 0; }
  .podio-puesto a { grid-template-columns: auto auto minmax(0, 1fr); justify-items: start; gap: 4px 14px; padding: 14px; text-align: left; }
  .podio-puesto--1 a { padding-top: 14px; }
  .podio-puesto .ladder-icono { grid-row: span 2; }
  .podio-medalla { align-self: end; }
  .podio-nombre { grid-column: 3; grid-row: 1; align-self: end; }
  .podio-datos { grid-column: 2 / -1; }
}

/* ---------- Ícono del equipo ---------- */
.ladder-icono {
  display: grid;
  flex: none;
  place-items: center;
  padding: 4px;
  border: 1px solid var(--g-line);
  border-radius: var(--r);
  background: var(--g-bg);
}
.ladder-icono img { width: 56px; height: auto; }
.ladder-icono--ancho img { width: 84px; }
.podio-puesto--1 .ladder-icono { border-color: var(--g-accent); }
.ladder-icono--fila { padding: 2px; }
.ladder-icono--fila img { width: 30px; }
.ladder-icono--fila.ladder-icono--ancho img { width: 45px; }

/* ---------- Tabla ---------- */
.tabla-ladder thead th:nth-child(2) { width: 40%; }
.tabla-ladder tbody th { padding-block: 6px; }
.ladder-equipo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--g-text);
  text-decoration: none;
}
.ladder-equipo:hover { color: var(--g-accent); }
.ladder-equipo:hover .ladder-icono { border-color: var(--g-accent); }
/* El nombre corta con puntos suspensivos cuando no cabe; el servidor va debajo. */
.ladder-nombre { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ladder-nombre small { display: block; color: var(--g-muted); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; }
.ladder-racha small { display: block; margin-top: 2px; color: var(--g-muted); font-size: 11px; font-weight: 500; }
.racha {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  padding: 2px 6px;
  border: 1px solid var(--g-line);
  border-radius: var(--r);
  color: var(--g-muted);
  font-weight: 700;
}
.racha--viva {
  border-color: var(--g-accent);
  background: color-mix(in srgb, var(--g-accent) 14%, transparent);
  color: var(--g-accent);
}

/* Imagen de perfil propia (crear cuenta) */
.subida { display: grid; gap: 12px; margin-top: 14px; }
.icon-option--subida { width: 96px; }
.icon-option--subida img { width: 100%; height: auto; border-radius: 8px; }
.subida-archivo { display: grid; gap: 6px; justify-items: start; }
.subida-archivo label { font-weight: 600; font-size: 14px; }
.field .subida-archivo input[type="file"] { max-width: 100%; min-height: 0; padding: 8px; cursor: pointer; }
.subida-estado { margin: 0; font-size: 14px; color: var(--accent); }
.subida-estado.is-error { color: var(--danger); }
.subida-titulo { margin: 4px 0 0; font-weight: 600; font-size: 14px; }
.subida-reglas { margin: 0; padding-left: 1.2em; color: var(--muted); font-size: 14px; }
.subida-reglas li + li { margin-top: 2px; }
.subida-check { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; font-size: 14px; }
.field .subida-check input { flex: none; width: 18px; height: 18px; min-height: 0; margin: 2px 0 0; padding: 0; accent-color: var(--accent); }

/* ==========================================================================
   Modo día y modo noche (js/tema.js)
   El modo noche es el diseño original. El modo día redefine los mismos tokens: fondos claros,
   texto oscuro y acentos más profundos para que se lean sobre blanco. Cada juego conserva su
   identidad de color. El arte de Riot Games no cambia: se muestra igual en los dos modos.
   ========================================================================== */
.sin-transiciones *,
.sin-transiciones *::before,
.sin-transiciones *::after { transition: none !important; }

:root[data-tema="claro"] {
  --ink: #F4F6FA;
  --surface: #FFFFFF;
  --surface-2: #EBEEF4;
  --line: #D3D9E3;
  --line-soft: #E2E6ED;
  --text: #11151D;
  --muted: #586174;
  --accent: #4B7A0C;
  --accent-ink: #FFFFFF;
  --accent-hover: #3E6609;
  --shadow-pop: 0 18px 40px rgba(17, 21, 29, .16);
  --lol: #8A6618;
  --val: #D02A38;
  --tft: #6848D4;
  --danger: #C0352B;
}

:root[data-tema="claro"] .game--lol {
  --g-bg: #F5F1E6;
  --g-bg-2: #ECE5D3;
  --g-surface: #FFFCF4;
  --g-line: #D8CBAA;
  --g-text: #12203A;
  --g-muted: #5A6378;
  --g-accent-ink: #FFFFFF;
  --g-glow: rgba(138, 102, 24, .18);
}
:root[data-tema="claro"] .game--val {
  --g-bg: #F5F2ED;
  --g-bg-2: #ECE7DF;
  --g-surface: #FFFFFF;
  --g-line: #DAD3C7;
  --g-text: #17191E;
  --g-muted: #5D6068;
  --g-accent-ink: #FFFFFF;
  --g-glow: rgba(208, 42, 56, .16);
}
:root[data-tema="claro"] .game--tft {
  --g-bg: #F4F1FE;
  --g-bg-2: #EAE4FC;
  --g-surface: #FFFFFF;
  --g-line: #D4C9F3;
  --g-text: #1C1440;
  --g-muted: #5E568C;
  --g-accent-ink: #FFFFFF;
  --g-glow: rgba(104, 72, 212, .18);
}
:root[data-tema="claro"] .game--lol .art-frame,
:root[data-tema="claro"] .game--lol .ticket { border-color: rgba(138, 102, 24, .4); }
:root[data-tema="claro"] .game--tft .game-kicker::before { background: #D99A1E; box-shadow: none; }
:root[data-tema="claro"] .game--tft::before {
  background:
    radial-gradient(circle, rgba(217, 154, 30, .28) 1px, transparent 1.6px) 0 0 / 46px 46px,
    radial-gradient(60% 55% at 12% 8%, rgba(104, 72, 212, .12), transparent 70%),
    radial-gradient(50% 45% at 100% 100%, rgba(217, 154, 30, .08), transparent 70%);
}

/* Botón de la barra superior: sol en modo noche, luna en modo día. */
.tema-btn {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.tema-btn:hover { border-color: var(--accent); background: var(--surface-2); transform: translateY(-1px); }
.tema-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tema-btn svg circle,
:root[data-tema="claro"] .tema-btn svg path { fill: currentColor; fill-opacity: .18; }
@media (max-width: 400px) {
  .tema-btn { width: 36px; height: 36px; }
  .tema-btn svg { width: 18px; height: 18px; }
}

/* Menú de la cuenta: se abre desde el ícono y el nombre de la barra superior. */
.menu-cuenta { position: relative; }
.menu-cuenta-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: 272px;
  max-width: calc(100vw - 32px);
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-pop);
  animation: menu-cuenta-entra .14s ease-out;
}
.menu-cuenta-panel[hidden] { display: none; }
@keyframes menu-cuenta-entra {
  from { opacity: 0; transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .menu-cuenta-panel { animation: none; }
}
.menu-cuenta-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 12px;
}
.menu-cuenta-head .avatar { width: 44px; height: 44px; }
.menu-cuenta-head .avatar--ancho { width: 66px; }
.menu-cuenta-head p { display: grid; min-width: 0; margin: 0; line-height: 1.3; }
.menu-cuenta-head strong,
.menu-cuenta-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-cuenta-head span { color: var(--muted); font-size: 13px; }
.menu-cuenta-lista {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 6px 0;
  border-top: 1px solid var(--line-soft);
  list-style: none;
}
.menu-cuenta-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--text);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
}
.menu-cuenta-item:hover,
.menu-cuenta-item:focus-visible { background: var(--surface-2); }
.menu-cuenta-item[aria-current="page"] { color: var(--accent); }
.menu-cuenta-item[data-salir] { color: var(--danger); }
.menu-cuenta-ico {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.menu-cuenta-item .menu-cuenta-ico { color: var(--muted); }
.menu-cuenta-item[aria-current="page"] .menu-cuenta-ico,
.menu-cuenta-item[data-salir] .menu-cuenta-ico { color: inherit; }
.menu-cuenta-tema {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border-top: 1px solid var(--line-soft);
  font-size: 14.5px;
  font-weight: 500;
}
.menu-cuenta-tema > span { display: flex; align-items: center; gap: 12px; }
.menu-cuenta-tema .menu-cuenta-ico { color: var(--muted); }
.menu-cuenta-seg {
  display: flex;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ink);
}
.menu-cuenta-seg button {
  padding: 4px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: 600 12.5px/1.2 var(--font-body);
  cursor: pointer;
}
.menu-cuenta-seg button:hover { color: var(--text); }
.menu-cuenta-seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

/* Ajustes del perfil */
.perfil-ajustes { margin-top: 16px; scroll-margin-top: 96px; }
.perfil-ajustes:focus { outline: none; }
.perfil-ajuste {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px 32px;
  margin-top: 18px;
}
@media (max-width: 860px) {
  .perfil-ajuste { grid-template-columns: minmax(0, 1fr); }
}
.perfil-ajuste h3 { font: 600 15px/1.3 var(--font-body); letter-spacing: 0; }
.perfil-ajuste p { max-width: 52ch; margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.tema-opciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 480px) {
  .tema-opciones { grid-template-columns: minmax(0, 1fr); }
}
.tema-opcion {
  position: relative;
  display: grid;
  gap: 2px;
  min-width: 132px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--ink);
  cursor: pointer;
  transition: border-color .15s ease;
}
.tema-opcion:hover { border-color: var(--muted); }
.tema-opcion:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tema-opcion:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.tema-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.tema-opcion strong { margin-top: 8px; font-size: 14px; }
.tema-opcion > span:last-child { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.tema-muestra {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 8px 1fr;
  gap: 4px;
  height: 52px;
  padding: 6px;
  border: 1px solid rgba(128, 128, 128, .3);
  border-radius: 8px;
  background: #0A0C11;
}
.tema-muestra i { border-radius: 3px; background: #252B38; }
.tema-muestra i:first-child { grid-column: 1 / -1; width: 40%; background: #C8F560; }
.tema-opcion--claro .tema-muestra { background: #F4F6FA; }
.tema-opcion--claro .tema-muestra i { background: #D3D9E3; }
.tema-opcion--claro .tema-muestra i:first-child { background: #4B7A0C; }
.tema-opcion--sistema .tema-muestra { background: linear-gradient(135deg, #F4F6FA 50%, #0A0C11 50%); }
.tema-opcion--sistema .tema-muestra i { background: rgba(128, 128, 128, .45); }
.tema-opcion--sistema .tema-muestra i:first-child { background: #7FA82C; }

/* ---------- Notificaciones: campanita de la barra superior (js/notificaciones.js) ---------- */
.notif { position: relative; flex: none; }
.notif-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.notif-btn:hover,
.notif-btn[aria-expanded="true"] { border-color: var(--accent); background: var(--surface-2); }
.notif-btn:hover { transform: translateY(-1px); }
.notif-campana { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.notif-n {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 15px;
  text-align: center;
}
.notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: 340px;
  max-width: calc(100vw - 32px);
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-pop);
  animation: menu-cuenta-entra .14s ease-out;
}
.notif-panel[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .notif-panel { animation: none; }
}
.notif-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 8px 10px; border-bottom: 1px solid var(--line-soft); }
.notif-titulo { margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 800; }
.notif-leer { padding: 4px 6px; border: 0; border-radius: 6px; background: none; color: var(--accent); font: 600 13px/1.2 var(--font-body); cursor: pointer; }
.notif-leer:hover { background: var(--surface-2); }
.notif-lista { display: grid; gap: 2px; max-height: min(420px, 60vh); margin: 6px 0; padding: 0; overflow-y: auto; list-style: none; }
.notif-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 10px 8px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
  text-decoration: none;
}
.notif-item:hover,
.notif-item:focus-visible { background: var(--surface-2); }
.notif-item.is-nueva { color: var(--text); }
.notif-item strong { color: var(--text); font-weight: 700; }
.notif-tipo { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--surface-2); color: var(--accent); }
.notif-tipo svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.notif-tipo--lol { color: var(--lol); }
.notif-tipo--val { color: var(--val); }
.notif-tipo--tft { color: var(--tft); }
.notif-cuerpo { display: grid; gap: 2px; }
.notif-meta { color: var(--muted); font-size: 12.5px; }
.notif-punto { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--accent); }
.notif-vacio { margin: 0; padding: 18px 8px; color: var(--muted); font-size: 14px; }
.notif-pie { margin: 0; padding: 10px 8px 4px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 12.5px; }
.notif-pie a:not(.btn) { color: var(--text); font-weight: 600; }
.notif-pie .btn { width: 100%; margin-top: 0; }
@media (max-width: 400px) {
  .notif-btn { width: 36px; height: 36px; }
  .notif-campana { width: 18px; height: 18px; }
}
/* En pantallas angostas la cuenta muestra solo su ícono, para que quepan la campanita y los demás botones. */
@media (max-width: 480px) {
  .header-acciones { gap: 8px; }
  .perfil-link { padding-right: 8px; }
  .perfil-link-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .notif-panel { position: fixed; top: 64px; right: 16px; left: 16px; width: auto; max-width: none; }
}

/* ---------- Buscar equipo: Unirse, Invitar, solicitudes e invitaciones ---------- */
.agente-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.agente-botones .btn { margin-top: 0; }
.btn.is-enviado::before { content: "\2713\00a0"; }
.buscar-tab-punto { display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: currentColor; vertical-align: middle; }

.solicitudes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 16px; margin-top: 14px; }
.solicitud {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--g-accent);
  border-radius: var(--r);
  background: var(--g-surface);
  scroll-margin-top: 120px;
}
.solicitud:focus { outline: none; }
.solicitud.is-destacada { box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-accent) 45%, transparent); }
.solicitud.is-resuelta { border-color: var(--g-line); }
.solicitud-kicker { margin: 0; color: var(--g-accent); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.solicitud-kicker span { color: var(--g-muted); font-weight: 600; letter-spacing: 0; text-transform: none; }
.solicitud-pie { display: flex; flex-wrap: wrap; gap: 8px; margin: auto 0 0; padding-top: 10px; border-top: 1px solid var(--g-line); }
.solicitud-pie .btn { margin-top: 0; }
.solicitud-pie .btn[aria-disabled="true"] { cursor: not-allowed; opacity: .45; }

.ficha { display: grid; gap: 12px; }
.ficha-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ficha-titulo { display: grid; flex: 1 1 9em; gap: 2px; min-width: 0; }
.ficha-nombre { margin: 0; overflow-wrap: anywhere; font-family: var(--font-display); font-size: 20px; font-weight: 800; line-height: 1.15; }
.ficha-nombre a { color: inherit; text-decoration: none; }
.ficha-nombre a:hover { color: var(--g-accent); }
.ficha-riot { color: var(--g-text); font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.ficha-riot.is-vacio { color: var(--g-muted); font-weight: 500; }
.ficha-tag { color: var(--g-muted); font-weight: 500; }
.ficha-avatar { overflow: hidden; border-radius: 12px; }
.ficha-escudo { display: grid; flex: none; place-items: center; width: 64px; height: 64px; }
.ficha-escudo-img { width: 100%; height: 100%; object-fit: contain; }
.ficha-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px 16px; margin: 0; }
.ficha-datos div { display: grid; gap: 1px; }
.ficha-datos dt { color: var(--g-muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ficha-datos dd { margin: 0; color: var(--g-text); font-size: 14px; font-weight: 600; }
.ficha-mensaje { margin: 0; padding: 8px 12px; border-left: 2px solid var(--g-line); color: var(--g-text); font-size: 14px; font-style: italic; }
.ficha .agente-etiqueta { margin: 0 0 -6px; color: var(--g-muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ficha-plantilla { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ficha-miembro {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  grid-template-areas: "mini nombre elo" "mini rol elo";
  align-items: center;
  gap: 0 10px;
  padding: 6px 10px 6px 6px;
  border: 1px solid var(--g-line);
  border-radius: 10px;
  background: var(--g-bg-2);
}
.ficha-mini { display: grid; grid-area: mini; place-items: center; width: 36px; height: 36px; overflow: hidden; border-radius: 8px; background: var(--g-surface); color: var(--g-line); }
.ficha-mini svg { width: 26px; height: 26px; fill: currentColor; }
.ficha-mini-img { width: 100%; height: 100%; object-fit: cover; }
.ficha-miembro-nombre { display: flex; flex-wrap: wrap; grid-area: nombre; align-items: baseline; gap: 0 8px; min-width: 0; font-size: 14px; }
.ficha-miembro-nombre strong { overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .ficha-miembro { grid-template-columns: 36px minmax(0, 1fr); grid-template-areas: "mini nombre" "mini rol" "mini elo"; }
}
.ficha-miembro .agente-puesto { grid-area: rol; color: var(--g-muted); font-size: 12.5px; font-weight: 500; }
.ficha-miembro .agente-puesto .plantel-rol-icono { width: 15px; height: 15px; }
.ficha-miembro .agente-elo { grid-area: elo; font-size: 10.5px; }
.ficha-corona { display: inline-flex; align-self: center; color: var(--g-accent); }
.ficha-corona svg { width: 15px; height: 15px; fill: currentColor; }
.ficha-miembro.is-vacante { border-style: dashed; background: transparent; }
.ficha-miembro.is-vacante strong { color: var(--g-muted); }
.ficha-miembro.is-tuyo { border-color: var(--g-accent); }
.ficha-miembro.is-tuyo strong { color: var(--g-accent); }

.buscar-dialogo {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid var(--g-line);
  border-radius: var(--r);
  background: var(--g-surface);
  color: var(--g-text);
  box-shadow: var(--shadow-pop);
}
.buscar-dialogo::backdrop { background: rgba(4, 6, 10, .7); backdrop-filter: blur(2px); }
.buscar-dialogo-form { display: grid; gap: 14px; padding: 18px 20px 20px; }
.buscar-dialogo-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.buscar-dialogo-head h2 { margin: 0; font-size: 22px; }
.buscar-dialogo-x { flex: none; width: 34px; height: 34px; border: 1px solid var(--g-line); border-radius: 8px; background: none; color: var(--g-text); font-size: 22px; line-height: 1; cursor: pointer; }
.buscar-dialogo-x:hover { border-color: var(--g-accent); }
.buscar-dialogo-nota { margin: 0; color: var(--g-muted); font-size: 14px; }
.buscar-dialogo-nota strong { color: var(--g-text); }
.buscar-dialogo .ficha { padding: 12px; border: 1px solid var(--g-line); border-radius: var(--r); background: var(--g-bg-2); }
.buscar-dialogo .ficha-miembro { background: var(--g-surface); }
.buscar-dialogo .field { margin: 0; }
.buscar-dialogo .agente-acciones { margin: 0; }

/* ---------- Barra superior en celulares ----------
   La marca, la campanita, la cuenta y el botón de menú caben en una sola fila; lo demás vive en el menú. */
@media (max-width: 480px) {
  .header-inner { gap: 0 8px; }
  .brand-name { font-size: 16px; }
  .header-acciones { gap: 6px; }
  .tema-btn, .discord-btn, .notif-btn, .menu-btn { width: 34px; height: 34px; border-radius: 8px; }
  .tema-btn svg, .notif-campana { width: 16px; height: 16px; }
  .discord-btn svg { width: 16px; }
  .header-cuenta .btn-sm { padding: .5em .7em; font-size: 13px; }
  .header-cuenta { gap: 5px; }
  /* En celulares la barra no cabe con dos botones: se entra desde «Crear cuenta», que enlaza a «Iniciar sesión». */
  .header-entrar { display: none; }
}
/* En los celulares más angostos (320 px) la fila se ajusta un poco más para que el botón de menú quepa. */
@media (max-width: 360px) {
  .header-inner { gap: 0 6px; }
  .brand-name { font-size: 14px; }
  .header-acciones { gap: 4px; }
  .tema-btn, .discord-btn, .notif-btn, .menu-btn { width: 32px; height: 32px; }
  .header-cuenta .btn-sm { padding: .5em .6em; }
}


/* Estadísticas privadas: el jugador no autorizó mostrarlas (partida y perfiles públicos). */
.stats-privado { color: var(--g-muted); font-size: 13px; font-style: italic; }
.stats-nota { margin: 8px 0 0; color: var(--g-muted); font-size: 13px; }

/* Páginas legales y de ayuda (reglamento, privacidad, contacto e historial de premios). */
.legal-tabla-scroll { overflow-x: auto; margin: 4px 0 12px; border: 1px solid var(--line); border-radius: 12px; }
.legal-tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
.legal-tabla th,
.legal-tabla td { padding: 10px 14px; border-top: 1px solid var(--line); color: var(--muted); text-align: left; }
.legal-tabla thead th { border-top: 0; color: var(--text); font-size: 13px; font-weight: 600; white-space: nowrap; }
.legal-tabla td:last-child { font-variant-numeric: tabular-nums; }
.terminos-cuerpo .is-pendiente { color: var(--muted); font-style: italic; font-weight: 500; }

/* ---------- Mi equipo: invitaciones, solicitudes y buscador de cuentas ---------- */
.invitaciones[hidden] { display: none; }
.team-slot > .invitaciones { max-width: 900px; margin-bottom: 16px; padding: clamp(16px, 3vw, 24px); border: 1px solid var(--g-line); background: var(--g-surface); }
.invitaciones .team-flash,
.invitaciones > .field-error { margin: 0 0 14px; }
.invitaciones-bloque + .invitaciones-bloque { margin-top: 20px; }
.invitaciones-lista,
.invitar-resultados { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.invitacion { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--g-line); background: var(--g-bg-2); }
.invitacion-cabeza,
.invitar-resultado { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.invitar-resultado { padding: 8px 12px; border: 1px solid var(--g-line); background: var(--g-bg-2); }
.invitar-resultado > :last-child { margin-left: auto; }
.invitacion-avatar.avatar { width: 36px; height: 36px; flex: none; }
.invitacion-avatar.avatar--ancho { width: 54px; }
.invitacion-quien { display: grid; min-width: 0; }
.invitacion-quien strong { overflow-wrap: anywhere; color: var(--g-text); }
.invitacion-quien a { color: inherit; }
.invitacion-riot { color: var(--g-muted); font-size: 13px; overflow-wrap: anywhere; }
.invitacion-puesto { margin-left: auto; color: var(--g-muted); font-size: 13px; }
.invitacion-mensaje { margin: 0; color: var(--g-text); font-size: 14px; }
.invitacion-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.invitacion-botones .btn { margin-top: 0; }
.invitar-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px 16px; margin-top: 12px; }
.invitar-campos .field { margin: 0; }
.invitar-vacio { padding: 8px 0; color: var(--g-muted); font-size: 14px; }
.team-miembro-cabeza { display: flex; align-items: center; gap: 16px; }
.team-miembro .chips { margin-top: 16px; }
.team-miembro .team-empty-title a { color: inherit; }

/* Páginas públicas: imagen propia aprobada del equipo e integrantes sin cuenta. */
.monograma--imagen { overflow: hidden; padding: 0; }
.monograma--imagen img { width: 100%; height: 100%; object-fit: cover; }
.alineacion-pendiente { flex: 1; color: var(--g-muted); font-style: italic; }
.chips a { color: inherit; }
.buscar-nota { margin: 0 0 8px; }