/* BRASLOL 2 - tela SOLO QUEUE (soloq).
   Reaproveita do career.css: .c-root .c-bg .c-shade .c-stage .c-nav .c-p .c-ph .c-nb .c-toast .c-brand (e as animacoes hin/scrin)
   e do roster.css: .r-back .r-navt .r-nlogo.
   Classes novas comecam com sq- . Sem style="" no HTML (CSP): so classes aqui e style.setProperty() no JS (CSSOM e permitido).
   Mesmo PALCO FIXO do painel (1620x941, escalado por JS): nada rola. Botoes quadrados e sem borda (igual ao flat.css). */

body[data-screen="soloq"] #topbar{display:none}
body[data-screen="soloq"] #app{background:#121212;overflow:hidden;touch-action:none;padding-left:0;padding-right:0}

/* ---- painel unico: cabecalho (titulo, filtro de lane, paginas) + 6 cartas (3 x 2) ---- */
.sq-main{position:absolute;inset:0;pointer-events:none}
.sq-pan{left:47px;top:130px;width:952px;height:643px;border-color:transparent}   /* mesma largura e topo do painel de Times (.t-teams); so a altura e menor (683 -> 643), a borda de baixo sobe */
.sq-cnt{margin-right:10px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8);white-space:nowrap}
.sq-pg{display:flex;align-items:center;gap:4px;margin-left:18px}
.sq-none{padding:80px 30px;font-size:14px;line-height:22px;letter-spacing:.04em;text-align:center;color:rgba(255,255,255,.7)}
.sq-av{width:48px;height:48px;object-fit:cover;flex:none;display:block;border-radius:8px;background:#1c2438}
.sq-lic{display:block;object-fit:contain;flex:none;filter:grayscale(1)}
.sq-emb{display:block;object-fit:contain;flex:none}
.sq-nm{display:flex;flex-direction:column;gap:3px;min-width:0}
.sq-nm b{font-weight:700;letter-spacing:.04em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sq-nm small{display:flex;align-items:center;gap:6px;min-width:0;letter-spacing:.06em;text-transform:uppercase}
.sq-nm small span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sq-fl{width:20px;height:14px;object-fit:cover;border-radius:2px;flex:none;display:block}

/* ---- filtro de lane (cabecalho) ---- */
.sq-fs{display:flex;align-items:center;gap:6px}
.sq-f{display:flex;align-items:center;justify-content:center;height:32px;min-width:36px;padding:0 8px!important;border:0!important;border-radius:0!important;background:rgba(255,255,255,.1)!important;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8);transition:background .15s,color .15s}
.sq-f:hover{background:rgba(255,255,255,.22)!important;color:#fff}
.sq-f.on{background:rgba(255,255,255,.3)!important;color:#fff;box-shadow:inset 0 -2px 0 #fff}
.sq-fa{padding:0 12px!important;margin-right:2px}
.sq-rg{position:absolute;left:18px;right:18px;top:55px;display:flex;align-items:center;gap:6px}   /* filtro de regiao: linha logo abaixo do cabecalho */
.sq-rb{padding:0 14px!important}
.sq-fic{width:22px;height:22px;object-fit:contain;display:block;opacity:.75;filter:grayscale(1);transition:opacity .15s}
.sq-f:hover .sq-fic,.sq-f.on .sq-fic{opacity:1}

/* ---- cartas: 3 em cima e 3 embaixo. Ouro, prata e bronze so no 1o, 2o e 3o do ranking (.n = demais) ---- */
.sq-cards{position:absolute;left:18px;right:18px;top:99px;bottom:18px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:14px}
.sq-card{position:relative;overflow:hidden;min-width:0;box-sizing:border-box;border-radius:8px;background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.03));--rk:rgba(255,255,255,.9)}
.sq-card.g{--rk:#f5c451}
.sq-card.s{--rk:#cfd6e4}
.sq-card.b{--rk:#e48a3c}
.sq-rk{position:absolute;left:14px;top:18px;min-width:28px;font-size:28px;font-weight:700;line-height:1;text-align:center;font-variant-numeric:tabular-nums;color:var(--rk);text-shadow:0 2px 8px rgba(0,0,0,.4)}
.sq-who{position:absolute;left:50px;right:64px;top:14px;display:flex;align-items:center;gap:10px;min-width:0}
.sq-who .sq-nm b{font-size:14px;line-height:19px;letter-spacing:.02em;text-transform:none}
.sq-nt{display:flex;align-items:baseline;gap:6px;min-width:0}
.sq-nt b{flex:0 1 auto;min-width:0}
.sq-age{flex:none;font-style:normal;font-size:12px;font-weight:600;line-height:19px;color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums}
.sq-who .sq-nm small{font-size:10px;line-height:12px;color:rgba(255,255,255,.7)}
.sq-ln{position:absolute;right:12px;top:14px;display:flex;flex-direction:column;align-items:center;gap:4px;width:44px}
.sq-ln .sq-lic{width:26px;height:26px}
.sq-ln small{font-size:12px;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.85)}
.sq-lpb{position:absolute;left:0;right:0;top:92px;display:flex;align-items:center;justify-content:center;gap:10px}
.sq-lpb .sq-emb{width:46px;height:46px}
.sq-lp{font-size:38px;font-weight:700;line-height:1;letter-spacing:.01em;font-variant-numeric:tabular-nums;color:#7fd6ff}
.sq-wl{position:absolute;left:0;right:0;top:158px;text-align:center;font-size:13px;letter-spacing:.06em;color:rgba(255,255,255,.8)}
.sq-wl b{font-weight:700;color:#fff}
.sq-ft{position:absolute;left:14px;right:14px;bottom:14px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.sq-st{display:flex;flex-direction:column;gap:2px;min-width:40px}
.sq-st b{font-size:17px;font-weight:700;line-height:19px;font-variant-numeric:tabular-nums}
.sq-st small{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.sq-st.r{align-items:flex-end}

/* botao Conversar (no lugar dos campeoes do modelo) */
.sq-chat{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:34px;padding:0 14px!important;border:0!important;border-radius:0!important;background:#fff!important;color:#1a2234;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;transition:background .15s}
.sq-chat:hover,.sq-chat:focus-visible{background:#e6eaff!important}
.sq-chat svg.c-ic{width:16px;height:16px;stroke-width:1.8}

/* ---- animacao de entrada (mesma ideia das outras telas): vidro e cartas em cascata ---- */
.sq-main>*{animation:hin .39s ease both;animation-delay:.13s}
.sq-card{animation:hin .36s ease backwards}
.sq-card:nth-child(1){animation-delay:.29s}
.sq-card:nth-child(2){animation-delay:.33s}
.sq-card:nth-child(3){animation-delay:.38s}
.sq-card:nth-child(4){animation-delay:.42s}
.sq-card:nth-child(5){animation-delay:.46s}
.sq-card:nth-child(6){animation-delay:.51s}
.sq-main.re>*,.sq-main.re .sq-card{animation:none}   /* depois de trocar de pagina/lane nao reanima a entrada */
.sq-root .c-toast{z-index:40}