/*
 * Ligas, torneos y perfiles públicos.
 *
 * Tres pantallas que se leen, no que se juegan: aquí manda la legibilidad de tablas y
 * listas, no los 60 fps. Lo único que se mueve es lo que ya se movía en el resto.
 */

.competitions, .league, .tournament, .profile-public {
    display: grid;
    gap: var(--space-4);
    width: min(64rem, 100%);
    margin-inline: auto;
    padding-block: var(--space-4);
}

.page-head { display: grid; gap: var(--space-1); }
.page-head h1 { margin: 0; }
.empty { color: var(--text-dim); font-size: .9rem; margin: 0; }

/* ─── Lo que juegas ────────────────────────────────────────────────────────── */
.comp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.comp-link {
    display: grid; gap: 2px;
    padding: var(--space-3);
    border: 1px solid var(--line); border-left-width: 3px;
    border-radius: var(--radius-1);
    background: var(--surface);
    text-decoration: none; color: inherit;
}
.comp-link:hover, .comp-link:focus-visible { border-color: var(--accent); }
.comp-link small { color: var(--text-dim); font-size: .8rem; }
/* Liga y torneo se distinguen por el borde: son cosas distintas en la misma lista. */
[data-kind="league"] .comp-link     { border-left-color: var(--accent); }
[data-kind="tournament"] .comp-link { border-left-color: #ff9f45; }

.comp-forms { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.stack { display: grid; gap: var(--space-2); }

/* ─── Clasificación ────────────────────────────────────────────────────────── */
/* Se desplaza en horizontal en vez de encogerse: una tabla ilegible no es una tabla. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.standings { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 34rem; }
.standings th, .standings td { padding: var(--space-2) var(--space-3); text-align: left; }
.standings th { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }
.standings tbody tr { border-top: 1px solid var(--line); }
.standings .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.standings .strong { font-weight: 700; color: var(--accent); }
.standings a { color: inherit; }
/* Podio: oro, plata y bronce. El resto van iguales, que para eso están abajo. */
.standings tr[data-rank="1"] td:first-child { color: #ffd166; font-weight: 700; }
.standings tr[data-rank="2"] td:first-child { color: #cfd8dc; font-weight: 700; }
.standings tr[data-rank="3"] td:first-child { color: #d59b6a; font-weight: 700; }

.invite-panel { display: grid; gap: var(--space-2); justify-items: start; }
.invite-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

/* ─── Cuadro del torneo ────────────────────────────────────────────────────── */
/* Columnas, una por ronda. Un cuadro de 16 no cabe en un móvil de otra forma. */
.bracket { display: flex; gap: var(--space-4); align-items: stretch; min-width: max-content; padding-bottom: var(--space-2); }
.bracket-round { display: grid; grid-template-rows: auto 1fr; gap: var(--space-2); min-width: 12rem; }
/* Los cruces se reparten a lo alto; el título se queda arriba. Sin separarlos, cada
   columna empieza a una altura distinta y el cuadro parece descolgado. */
.bracket-matches { display: flex; flex-direction: column; justify-content: space-around; gap: var(--space-3); }
.bracket-round h3 { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); margin: 0; }
.bracket-match {
    display: grid;
    border: 1px solid var(--line); border-radius: var(--radius-1);
    background: var(--surface);
    overflow: hidden;
}
.bracket-match[data-status="walkover"] { opacity: .65; }
.bracket-match[data-status="ready"] { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.bracket-slot {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: .86rem;
}
.bracket-slot + .bracket-slot { border-top: 1px solid var(--line); }
.bracket-slot[data-empty="true"] { color: var(--text-dim); font-style: italic; }
.bracket-slot[data-winner="true"] { color: var(--accent); font-weight: 700; }

.champion-card {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-2);
    background: linear-gradient(135deg, color-mix(in srgb, #ffd166 16%, transparent), transparent);
    border: 1px solid color-mix(in srgb, #ffd166 50%, transparent);
}
.champion-crown { font-size: 1.6rem; }
.champion-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-dim); }

.entrant-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.entrant-list li {
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--line); border-radius: 999px;
    font-size: .84rem;
}

/* ─── Perfil público ───────────────────────────────────────────────────────── */
.profile-head { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.profile-head h1 { margin: 0; }
.profile-face { border-radius: 50%; object-fit: cover; border: 2px solid var(--line); }
.h2h { color: var(--accent-2); font-weight: 700; margin: var(--space-1) 0 0; }

.stat-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: var(--space-2);
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}
.stat-grid li {
    display: grid; gap: 2px;
    padding: var(--space-3);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-1);
}
.stat-value { font-family: var(--font-mono); font-size: 1.3rem; color: var(--accent); }
.stat-label { font-size: .72rem; color: var(--text-dim); }

.game-log { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.game-log li {
    display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
    padding: var(--space-2) var(--space-3);
    background: var(--surface); border: 1px solid var(--line);
    border-left: 3px solid var(--line);
    border-radius: var(--radius-1);
}
.game-log li[data-won="true"]  { border-left-color: var(--accent); }
.game-log li[data-won="false"] { border-left-color: #ff6b6b; }
.game-result { font-size: .86rem; min-width: 4.5rem; }
.game-detail { font-size: .8rem; color: var(--text-dim); }
.game-mvp {
    margin-left: auto;
    font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
    color: #ffd166;
}

/* Selector de liga en la creación de sala. Va en la portada, pero es cosa de
   competiciones, así que su estilo vive con las suyas. */
.setup-league {
    display: grid; gap: var(--space-1);
    padding: var(--space-3);
    border: 1px dashed var(--line);
    border-radius: var(--radius-1);
}
.setup-league label { font-size: .82rem; font-weight: 700; }

.account-public { font-size: .84rem; color: var(--accent-2); }