/* =====================================================================
   TEMPORADA DE LENDA (05/11, SQL 2615) — o painel do herói na aba Temporada dos Rankings.
   Desenho escolhido pelo autor: "A) Duas colunas" (à esquerda a divisão e a trilha de Bronze a Lenda,
   à direita os 10 modos da semana, embaixo o prêmio). No celular as colunas descem.
   Mesmas cores dos cartões dos Rankings (#2c313d, laranja #ffb84d, cinza #8f97aa). Sem glow (regra do autor).
   Texto nunca corta: quebra de linha e a letra acompanha o --text-scale das Opções.
   ===================================================================== */
.tl-painel{display:grid;gap:10px;min-width:0;padding:12px 14px;border:1px solid #2c313d;border-radius:10px;background:rgba(0,0,0,.32)}
.tl-a-grade{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:14px}
.tl-a-col{display:grid;gap:10px;align-content:start;min-width:0}
.tl-a .tl-a-col+.tl-a-col{padding-left:14px;border-left:1px solid #2c313d}

/* o herói: emblema, divisão, pontos */
.tl-topo{display:flex;align-items:center;gap:12px;min-width:0}
.tl-liga{display:inline-grid;place-items:center;flex:0 0 auto}
.tl-liga .col-icone{display:grid;place-items:center;width:100%;height:100%;font-style:normal;line-height:1;font-size:calc(var(--tl-ic,34px) * .8)}
.tl-liga .col-icone-img,.tl-liga img{display:block;width:100%;height:100%;object-fit:contain}
.tl-liga-grande{width:64px;height:64px;--tl-ic:64px}
.tl-liga.tl-sem{border:2px dashed #3a4050;border-radius:50%}
.tl-quem{display:grid;gap:2px;min-width:0}
.tl-quem small{color:#8f97aa;font-size:calc(11px * var(--text-scale,1));line-height:1.3;overflow-wrap:anywhere}
.tl-div-nome{color:#ffb84d;font-size:calc(20px * var(--text-scale,1));line-height:1.15;overflow-wrap:anywhere}
.tl-pontos{color:#d9dde6;font-size:calc(13px * var(--text-scale,1));overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.tl-falta{margin:0;color:#c6ccd8;font-size:calc(12px * var(--text-scale,1));line-height:1.35;overflow-wrap:anywhere}
.tl-falta b{color:#ffb84d}

/* a trilha de Bronze a Lenda */
.tl-trilha{position:relative;min-width:0;padding-top:4px}
.tl-trilha-linha{position:absolute;left:10%;right:10%;top:24px;height:6px;border-radius:3px;background:#1b1f28;border:1px solid #2c313d}
.tl-trilha-linha i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#b8862f,#ffb84d)}
.tl-trilha ol{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin:0;padding:0;list-style:none}
.tl-no{display:grid;justify-items:center;align-content:start;gap:2px;min-width:0;text-align:center;opacity:.5}
.tl-no.feito{opacity:.9}
.tl-no.atual{opacity:1}
.tl-no-ic{width:40px;height:40px;--tl-ic:40px;border-radius:50%;background:#151821;border:2px solid #2c313d;padding:3px;box-sizing:border-box}
.tl-no.feito .tl-no-ic{border-color:#b8862f}
.tl-no.atual .tl-no-ic{border-color:#ffb84d;background:#2a2112}
.tl-no b{color:#e6e9f0;font-size:calc(11px * var(--text-scale,1));line-height:1.2}
.tl-no.atual b{color:#ffb84d}
.tl-no span{color:#8f97aa;font-size:calc(10px * var(--text-scale,1));font-variant-numeric:tabular-nums}

/* os 10 modos da semana */
.tl-semana h4{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;margin:0;color:#ffb84d;font-size:calc(12.5px * var(--text-scale,1))}
.tl-semana h4 span{color:#d9dde6;font-variant-numeric:tabular-nums}
.tl-modos{margin:0;padding:0;list-style:none}
.tl-modos-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.tl-modo{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0;padding:4px 8px;border:1px solid #2c313d;border-radius:8px;background:#151821;color:#8f97aa;font-size:calc(11px * var(--text-scale,1))}
.tl-modo span{min-width:0;overflow-wrap:anywhere}
.tl-modo b{color:#c6ccd8;font-variant-numeric:tabular-nums}
.tl-modo.conta{border-color:#b8862f;color:#e6e9f0;background:rgba(255,184,77,.08)}
.tl-modo.conta b{color:#ffb84d}
.tl-modo.nao{opacity:.45}
.tl-modo.vazio{grid-column:1/-1;white-space:normal;line-height:1.35}
.tl-dica{margin:0;color:#8f97aa;font-size:calc(11px * var(--text-scale,1));line-height:1.4;overflow-wrap:anywhere}

/* o prêmio da divisão */
.tl-premio{margin:0;color:#c6ccd8;font-size:calc(11px * var(--text-scale,1));line-height:1.4;overflow-wrap:anywhere}
div.tl-premio{display:grid;gap:6px}
.tl-premio-tit{color:#8f97aa}
.tl-premio-lista{display:flex;flex-wrap:wrap;gap:6px}
.tl-premio-item{display:inline-block;max-width:100%;padding:3px 8px;border:1px solid #2c313d;border-radius:999px;background:#151821;color:#e6e9f0;overflow-wrap:anywhere}

@media (max-width:720px){
  .tl-a-grade{grid-template-columns:minmax(0,1fr)}
  .tl-a .tl-a-col+.tl-a-col{padding-left:0;border-left:0;padding-top:10px;border-top:1px solid #2c313d}
}
@media (max-width:520px){
  .tl-painel{padding:10px}
  .tl-liga-grande{width:52px;height:52px;--tl-ic:52px}
}
@media (max-width:420px){
  .tl-no-ic{width:32px;height:32px;--tl-ic:32px}
  .tl-trilha-linha{top:20px}
  .tl-no b{font-size:calc(9.5px * var(--text-scale,1));letter-spacing:-.2px}
}