/* =====================================================================
   TABLERO · TERCER PUESTO Y PODIO (js/tercer-puesto.js; las reglas, en js/llaves.js)
   Dos piezas que se cuelgan de la pirámide de css/components.css (bloque TABLERO · LLAVES) sin
   cambiarle la forma:
     .t3      el duelo por el tercer puesto. Va DENTRO de la sección de la Final, después de su fila.
              Su casilla es una .lln como las demás (más .t3n) y no lleva línea: no alimenta a nadie.
     .t3pw    el podio (1.º, 2.º, 3.º). Va dentro de la fila del campeón (.llr-c), después de él.
   < 700 px   una fila más cada uno: el tercer puesto con su título, bajo la Final; el podio, bajo
              el campeón.
   >= 700 px  los dos van a la derecha de la casilla del centro (la Final, el campeón), en la misma
              fila y con su misma altura: la Final y el campeón no se mueven del eje de la pirámide
              y las líneas, que salen y llegan por el centro, no los tocan. El codo de las líneas
              que suben de la semifinal queda 15 px por debajo de la fila, así que tampoco cruza la
              casilla del tercer puesto (por eso tiene que medir lo mismo de alto que la Final).
   Solo tokens de css/base.css.
   ===================================================================== */

/* ---------- tercer puesto ---------- */
.t3{min-width:0;margin-top:16px}
.t3l{display:none}   /* "Tercer puesto · " dentro de la casilla: en teléfono ya lo dice el título de la fila */

/* ---------- podio ---------- */
.t3pw{min-width:0;margin-top:8px;padding:8px 12px 10px;border-radius:12px;background:var(--card)}
.t3pt{display:block;font-size:11px;line-height:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fg2)}
.t3p{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:2px}
.t3p li{position:relative;display:flex;align-items:center;gap:8px;min-width:0;min-height:28px}
.t3p li + li{border-top:.5px solid var(--sep)}
.t3pp{flex:none;min-width:32px;padding:2px 0;border-radius:8px;background:var(--fill);color:var(--fg);font-size:12px;line-height:16px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
.t3p1 .t3pp{background:var(--accent-tint);color:var(--link)}
.t3pn{flex:1;min-width:0;font-size:15px;line-height:19px;font-weight:500;overflow-wrap:anywhere}
.t3p1 .t3pn{font-weight:700}
.t3pn.tbd{font-size:13px;line-height:17px;font-weight:400;color:var(--fg2)}

@media (min-width:700px){
  /* cada pieza de una fila, en su sitio a mano: así el bloque de al lado puede compartir celda con
     la fila de casillas sin que la colocación automática mande a nadie a otra línea */
  .llr > .llrt{grid-column:1;grid-row:1}
  .llr > .llrow{grid-column:2;grid-row:1}
  /* la fila del campeón y la de la Final (la que le sigue) se estiran a todo el alto, para que la
     casilla del centro y la de al lado midan lo mismo */
  .llr-c > .llrow,.llr-c + .llr > .llrow{align-self:stretch}
  .llchamp{justify-content:center}

  .t3,.t3pw{
    --t3h:118px;   /* media casilla del centro: la Final mide como mucho 236 px */
    grid-column:2;grid-row:1;align-self:stretch;justify-self:start;
    width:min(200px,calc(50% - var(--t3h) - 8px));margin:0 0 0 calc(50% + var(--t3h) + 8px);
  }
  .t3pw{--t3h:150px;display:flex;flex-direction:column;justify-content:center;padding:8px;container-type:inline-size}   /* el campeón mide como mucho 300 px */
  .t3{display:flex;flex-direction:column}
  .t3 > .llrt{display:none}        /* aquí el nombre va dentro de la casilla */
  .t3 > .llrow{flex:1}
  .t3l{display:inline}
  .t3pn{font-size:13px;line-height:17px}
  .t3pn.tbd{font-size:12px;line-height:16px}
}
@media (min-width:1024px){
  .t3pn{font-size:14px;line-height:18px}
}
/* podio estrecho (pirámide de 700 px, o PC con la ficha abierta al lado): más apretado, para que
   los nombres se partan menos. Va al final para ganar a los tamaños de arriba. Donde no hay
   consultas de contenedor, se queda como estaba. */
@container (max-width:132px){
  .t3p li{gap:6px}
  .t3pp{min-width:26px;font-size:11px;line-height:15px}
  .t3pn,.t3pn.tbd{font-size:12px;line-height:15px}
}