/* ============================================================
   PAINEL DOTA — desenhado para o CELULAR primeiro.
   Ele disse que vai usar mais no telefone, entao o padrao e mobile
   e o computador e que ganha a barra lateral. Nada de layout de
   desktop encolhido.
   ============================================================ */
:root{
  --fundo:#0a0c11; --carta:#121620; --carta2:#171c28; --linha:#232a3a;
  --texto:#eaeef6; --fraco:#8c96ab; --mudo:#5a6377;
  --laranja:#e8623c; --verde:#3ddc84; --vermelho:#ff5b5b; --amarelo:#f5b642;
  --barra:64px;              /* altura da barra de navegacao no celular */
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--fundo);color:var(--texto);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none}
.num{font-variant-numeric:tabular-nums}
img{max-width:100%}

/* ---------- estrutura ---------- */
.app{display:flex;min-height:100vh;min-height:100dvh}
.conteudo{flex:1;min-width:0;padding-bottom:calc(var(--barra) + env(safe-area-inset-bottom))}
.limite{max-width:1240px;margin:0 auto;padding:0 14px}

/* ---------- topo ---------- */
header{background:var(--carta);border-bottom:1px solid var(--linha);
  position:sticky;top:0;z-index:40}
.topo{display:flex;align-items:center;gap:11px;padding:11px 0}
.topo .logo{height:22px;width:auto;flex:none;filter:brightness(1.15)}
.topo .div{width:1px;height:26px;background:var(--linha);flex:none}
.topo .ava{width:34px;height:34px;border-radius:50%;background:var(--carta2);
  object-fit:cover;flex:none}
.topo .quem{flex:1;min-width:0}
.topo .nome{font-size:15px;font-weight:800;line-height:1.15;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.topo .sub{font-size:11px;color:var(--fraco);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
/* No celular o selo do rank e grande e sobrava 14px para o nome: saia "H." e
   "1 ...". Nome picotado nao informa nada. Some, e ficam logo + foto + rank.
   A partir de 520px o nome cabe inteiro e volta. */
@media(max-width:519px){.topo .quem{display:none}}
/* ---------- o selo do rank: grande, no celular e no computador ---------- */
.selorank{display:none;align-items:center;gap:9px;flex:none;
  background:linear-gradient(180deg,#2b2210,#1d1809);border:1px solid #4a3c1a;
  border-radius:12px;padding:5px 12px 5px 6px}
.selorank.tem{display:flex}
/* a medalha e o número na placa dela, como o jogo mostra */
.selorank .med{position:relative;display:block;width:52px;height:52px;flex:none}
.selorank .med img{width:52px;height:52px;display:block}
/* ⚠️ a placa da medalha fica entre 70% e 88% da altura da arte. O número vai
   CENTRADO nela (top 79% + translate), não "colado embaixo" — assim ele não
   escapa da placa quando tem 4 dígitos. */
.selorank .med .pos{position:absolute;left:0;right:0;top:82%;transform:translateY(-50%);
  text-align:center;font-size:9.5px;font-weight:800;color:#ffeccb;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.4px;
  text-shadow:0 1px 2px #000,0 0 3px rgba(0,0,0,.9)}
@media(min-width:520px){
  .selorank .med,.selorank .med img{width:62px;height:62px}
  .selorank .med .pos{font-size:11.5px}
}
.selorank .n{font-size:26px;font-weight:800;color:var(--amarelo);line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.selorank .l{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#b89a52;line-height:1.25}
.selorank .l b{display:block;color:var(--amarelo);font-size:10px;letter-spacing:.06em}
/* a variação desde a última posição vista neste aparelho */
.selorank .var{font-size:11px;font-weight:800;padding:2px 6px;border-radius:99px;
  line-height:1.1;flex:none}
.selorank .var.sobe{color:#0d1119;background:var(--verde)}
.selorank .var.desce{color:#fff;background:var(--vermelho)}
/* em tela de 320px (SE antigo, Fold fechado) o selo estourava a direita e o
   "NO MUNDO / IMMORTAL" saia cortado: encolhe o selo e a logo. */
@media(max-width:359px){
  .topo{gap:8px}
  .topo .logo{height:18px}
  .selorank{padding:6px 9px;gap:6px}
  .selorank .n{font-size:22px}
  .selorank .l{font-size:8px}
  .selorank .l b{font-size:9px}
}
@media(min-width:520px){.selorank .n{font-size:32px}}
@media(min-width:900px){.selorank{padding:8px 16px}.selorank .n{font-size:36px}}

.vivo{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;color:var(--fraco);
  background:var(--carta2);border:1px solid var(--linha);border-radius:99px;
  padding:5px 10px;flex:none}
/* em tela bem estreita o "ao vivo" sai para o rank caber grande */
@media(max-width:420px){.vivo{display:none}}
.ponto{width:6px;height:6px;border-radius:50%;background:var(--verde);flex:none}
.ponto.pisca{animation:pisca 2s ease-in-out infinite}
@keyframes pisca{0%,100%{opacity:1}50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.ponto.pisca{animation:none}}

/* ============================================================
   O OBJETIVO: meta, missão e pool. São os três primeiros blocos da tela.
   Regra que eu sigo aqui: cada um responde UMA pergunta e cabe em um olhar.
   ============================================================ */
/* troca de conta: duas contas, um painel só */
.contas{display:flex;gap:7px;margin:14px 0 0;flex-wrap:wrap}
.contas:empty{display:none}
.cbt{font-size:12.5px;font-weight:700;color:var(--fraco);text-decoration:none;
  background:var(--carta2);border:1px solid var(--linha);border-radius:99px;
  padding:6px 13px;line-height:1.2}
.cbt.on{color:#0a0c11;background:var(--amarelo);border-color:var(--amarelo)}

.meta,.missao,.pool,.agora{background:var(--carta);border:1px solid var(--linha);
  border-radius:16px;padding:15px 16px;margin:14px 0}
/* o semáforo: a cor é o recado, o texto é o motivo */
.agora{border-left:4px solid var(--mudo)}
.agora.bom{border-left-color:var(--verde);background:linear-gradient(180deg,rgba(61,220,132,.07),var(--carta) 60%)}
.agora.meio{border-left-color:var(--amarelo);background:linear-gradient(180deg,rgba(245,182,66,.08),var(--carta) 60%)}
.agora.ruim{border-left-color:var(--vermelho);background:linear-gradient(180deg,rgba(255,91,91,.09),var(--carta) 60%)}
.acab{display:flex;align-items:center;gap:11px}
.aico{font-size:26px;line-height:1;flex:none}
.atit{font-size:20px;font-weight:800;line-height:1.2;margin-top:1px}
.agora.bom .atit{color:var(--verde)}
.agora.meio .atit{color:var(--amarelo)}
.agora.ruim .atit{color:var(--vermelho)}
.amot{margin:9px 0 0;padding-left:17px;font-size:12.5px;color:var(--fraco);line-height:1.55}
.amot li{margin-top:3px}
.meta{border-color:#3a3320;background:linear-gradient(180deg,#181402,#121620 62%)}
.mtopo{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.mrot{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mudo)}
.mnum{font-size:30px;font-weight:800;color:var(--amarelo);line-height:1.1;margin-top:2px;
  font-variant-numeric:tabular-nums}
.mnum span{font-size:13px;font-weight:700;color:var(--fraco)}
.mdir{text-align:right;flex:none}
.mpos{font-size:19px;font-weight:800;margin-top:3px;font-variant-numeric:tabular-nums}
/* ⚠️ o trilho é filho de flex em outros blocos e some; aqui é block por padrão,
   mas deixo a altura explícita pelo mesmo motivo de sempre */
.trilho{height:9px;border-radius:99px;background:#2a2418;margin:12px 0 9px;overflow:hidden}
.fita{height:9px;border-radius:99px;background:linear-gradient(90deg,#f5b642,#ffd479)}
.mlinha{font-size:13.5px;color:var(--fraco)}
.mlinha b{color:var(--texto)}
.mnota{font-size:11px;color:var(--mudo);margin-top:7px;line-height:1.45}

/* o campo de correção do MMR */
.ajuste{margin-top:10px;border-top:1px solid var(--linha);padding-top:9px}
.ajuste .abrir{background:none;border:1px solid var(--linha);color:var(--fraco);
  font:inherit;font-size:11.5px;font-weight:700;border-radius:99px;padding:5px 12px;
  cursor:pointer}
.ajuste .abrir:hover{color:var(--texto);border-color:var(--mudo)}
.ajuste .campos{display:flex;flex-wrap:wrap;gap:9px;align-items:flex-end;margin-top:10px}
.ajuste label{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mudo);display:flex;flex-direction:column;gap:4px;flex:1;min-width:110px}
.ajuste input{background:var(--carta2);border:1px solid var(--linha);border-radius:8px;
  color:var(--texto);font:inherit;font-size:15px;font-weight:700;padding:7px 9px;width:100%;
  text-transform:none;letter-spacing:0}
.ajuste .salvar{background:var(--amarelo);color:#0a0c11;border:0;font:inherit;
  font-size:12.5px;font-weight:800;border-radius:8px;padding:9px 16px;cursor:pointer}
.ajuste .campos .mnota{width:100%;margin-top:0}

/* o dia da semana: sete colunas, a de hoje em destaque */
.sem{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:11px;
  align-items:end}
.sd{text-align:center;min-width:0}
.sd.hj{background:rgba(245,182,66,.1);border-radius:8px;padding:3px 0 2px}
.sv{font-size:10.5px;font-weight:800;color:var(--fraco);margin-bottom:3px;
  font-variant-numeric:tabular-nums}
.sd.hj .sv{color:var(--amarelo)}
/* ⚠️ o trilho precisa de altura EXPLÍCITA: filho de grid com barra em % não
   herda altura, e as sete colunas saíam vazias */
.st{height:52px;display:flex;align-items:flex-end;justify-content:center;
  background:var(--carta2);border-radius:5px;overflow:hidden}
.st span{display:block;width:100%;border-radius:5px 5px 0 0}
.sn{font-size:10px;font-weight:700;color:var(--fraco);margin-top:4px;
  text-transform:capitalize}
.sd.hj .sn{color:var(--texto)}
.sj{font-size:9.5px;color:var(--mudo)}

/* as partidas de campeonato do Yatoro */
.camp{display:flex;flex-direction:column;gap:6px;margin-top:7px}
.cj{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:var(--carta2);border:1px solid var(--linha);border-left-width:3px;
  border-radius:9px;padding:7px 10px;color:inherit;font:inherit;cursor:pointer}
.cj.v{border-left-color:var(--verde)} .cj.d{border-left-color:var(--vermelho)}
.cj:hover{border-color:var(--mudo)}
.cj img{width:44px;height:25px;object-fit:cover;border-radius:4px;flex:none}
.cjd{min-width:0;flex:1}
.cjn{font-size:13.5px;font-weight:800;line-height:1.25;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cjv{font-weight:600;color:var(--fraco);font-size:12px}
.cjs{font-size:11.5px;color:var(--fraco);margin-top:1px}
.cjr{font-size:14px;font-weight:800;flex:none;width:16px;text-align:center}
.cj.v .cjr{color:var(--verde)} .cj.d .cjr{color:var(--vermelho)}

/* avatar do companheiro, no lugar do ícone de herói */
.cav{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none;
  background:var(--carta2);display:block}

.micab{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:7px}
.mirot{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mudo)}
.selo{font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:4px 9px;border-radius:99px;flex:none}
.selo.ok{background:var(--verde);color:#0a0c11}
.selo.meio{background:var(--carta2);color:var(--amarelo);border:1px solid #3d3423}
.selo.espera{background:var(--carta2);color:var(--fraco);border:1px solid var(--linha)}
.mititulo{font-size:21px;font-weight:800;line-height:1.2}
.miporque{font-size:12.5px;color:var(--fraco);margin-top:5px;line-height:1.5}

.mpartidas{display:flex;flex-direction:column;gap:6px;margin-top:11px}
.mp{display:flex;align-items:center;gap:9px;background:var(--carta2);
  border:1px solid var(--linha);border-left-width:3px;border-radius:9px;padding:7px 10px}
.mp.ok{border-left-color:var(--verde)} .mp.furou{border-left-color:var(--vermelho)}
.mp img{width:38px;height:22px;object-fit:cover;border-radius:4px;flex:none}
.mpn{font-size:13px;font-weight:700;flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.mpc{font-size:12px;color:var(--fraco);flex:none}
.mpv{font-size:12px;font-weight:800;width:16px;text-align:center;flex:none}
.mpv.v{color:var(--verde)} .mpv.d{color:var(--vermelho)}
.miplacar{font-size:12.5px;color:var(--fraco);margin-top:11px;line-height:1.5}
.miplacar b{color:var(--texto)} .fogo{color:var(--amarelo)!important}
.msemana{display:flex;gap:5px;margin-top:9px}
.ms{flex:1;min-width:0;text-align:center;border-radius:8px;padding:6px 2px;
  background:var(--carta2);border:1px solid var(--linha)}
.ms.ok{background:rgba(61,220,132,.14);border-color:rgba(61,220,132,.45)}
.msd{font-size:9.5px;color:var(--mudo)}
.msn{font-size:12px;font-weight:800;margin-top:1px;font-variant-numeric:tabular-nums}
.ms.ok .msn{color:var(--verde)}

.plista{display:flex;flex-direction:column;gap:6px;margin-top:7px}
.ph{display:flex;align-items:center;gap:10px;background:var(--carta2);
  border:1px solid var(--linha);border-left-width:3px;border-radius:9px;padding:7px 10px}
.ph.bom{border-left-color:var(--verde)} .ph.ruim{border-left-color:var(--vermelho)}
.ph img{width:44px;height:25px;object-fit:cover;border-radius:4px;flex:none}
.phd{min-width:0;flex:1}
.phn{font-size:14px;font-weight:800;line-height:1.2}
.phs{font-size:11.5px;color:var(--fraco);margin-top:1px}
.phs b{color:var(--texto)} .ouro{color:var(--amarelo)!important}

/* a posição no mundo, por herói */
.tm{display:flex;align-items:center;gap:10px;background:var(--carta2);
  border:1px solid var(--linha);border-left-width:3px;border-left-color:var(--mudo);
  border-radius:9px;padding:7px 10px}
.tm.dentro{border-left-color:var(--amarelo);background:rgba(245,182,66,.09)}
.tm.perto{border-left-color:#8a7434}
/* a frase de posição: é o número que ele abre o painel para ver */
.frase{font-size:20px;font-weight:800;line-height:1.25;margin:2px 0 4px}
.frase b{color:var(--texto)}
.frase .ouro{font-size:27px}
.apx{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mudo);border:1px solid var(--linha);border-radius:99px;
  padding:2px 7px;margin-left:7px;vertical-align:middle;white-space:nowrap}
@media(min-width:760px){.frase{font-size:24px}.frase .ouro{font-size:33px}}
.tmp.est{color:var(--amarelo);font-size:14px}
.tm img{width:44px;height:25px;object-fit:cover;border-radius:4px;flex:none}
.tmd{min-width:0;flex:1}
.tmn{font-size:14px;font-weight:800;line-height:1.2}
.tms{font-size:11.5px;color:var(--fraco);margin-top:1px}
.tms b{color:var(--texto)}
.tmp{font-size:15px;font-weight:800;flex:none;color:var(--fraco);
  font-variant-numeric:tabular-nums}

@media(min-width:760px){
  .mnum{font-size:38px} .mpos{font-size:24px} .mititulo{font-size:25px}
  .plista{display:grid;grid-template-columns:repeat(3,1fr)}
  .pool .plista:last-of-type{grid-template-columns:repeat(2,1fr)}
  #topmundo .plista{grid-template-columns:repeat(2,1fr)}
}

/* ---------- o destaque do topo: herói do período ---------- */
.destaque{position:relative;border-radius:16px;overflow:hidden;margin:14px 0;
  background:var(--carta);border:1px solid var(--linha);min-height:150px}
.destaque .arte{position:absolute;inset:0;background-size:cover;background-position:center 28%;
  opacity:.5}
.destaque .veu{position:absolute;inset:0;
  background:linear-gradient(100deg,#0d1119 26%,rgba(13,17,25,.86) 58%,rgba(13,17,25,.35) 100%)}
.destaque .dentro{position:relative;padding:17px 18px;display:flex;flex-direction:column;
  gap:13px}
.destaque .titulo{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mudo)}
.destaque .heroi{display:flex;align-items:center;gap:12px}
.destaque .heroi img{width:74px;height:42px;object-fit:cover;border-radius:7px;flex:none;
  border:1px solid #2c3547}
.destaque .heroi .nm{font-size:21px;font-weight:800;line-height:1.15}
.destaque .heroi .wr{font-size:13px;color:var(--fraco);margin-top:2px}
.destaque .heroi .wr b{color:var(--verde)}
/* 2 colunas no celular (com o rank vira 4 quadros); 4 em linha no computador */
.destaque .tres{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
@media(min-width:520px){.destaque .tres{grid-template-columns:repeat(4,1fr)}}
.destaque .t{background:rgba(10,13,19,.72);border:1px solid var(--linha);border-radius:10px;
  padding:10px 11px}
.destaque .t .r{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mudo);line-height:1.2}
.destaque .t .v{font-size:20px;font-weight:800;margin-top:3px;line-height:1.1}
.destaque .t .v.v{color:var(--verde)} .destaque .t .v.r{color:var(--vermelho)}
.destaque .t .p{font-size:10.5px;color:var(--fraco);margin-top:1px}

/* ---------- navegacao: barra embaixo no celular ---------- */
nav.lado{position:fixed;left:0;right:0;bottom:0;z-index:50;background:#0d1119;
  border-top:1px solid var(--linha);display:flex;
  padding-bottom:env(safe-area-inset-bottom);overflow-x:auto;scrollbar-width:none}
nav.lado::-webkit-scrollbar{display:none}
nav.lado button{flex:1 0 auto;min-width:62px;background:none;border:none;color:var(--mudo);
  font-family:inherit;padding:9px 6px 8px;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;gap:3px;font-size:10px;font-weight:600;height:var(--barra)}
nav.lado button .ic{font-size:19px;line-height:1}
nav.lado button[aria-current="true"]{color:var(--laranja)}
nav.lado .marca{display:none}

/* ---------- no computador vira barra lateral ---------- */
@media(min-width:900px){
  :root{--barra:0px}
  .app{flex-direction:row}
  nav.lado{position:sticky;top:0;left:auto;right:auto;bottom:auto;height:100vh;
    width:216px;flex:none;flex-direction:column;border-top:none;
    border-right:1px solid var(--linha);padding:16px 12px;gap:3px;overflow:visible}
  nav.lado .marca{display:flex;align-items:center;gap:9px;padding:6px 10px 18px}
  nav.lado .marca img{height:22px;filter:brightness(1.15)}
  nav.lado button{flex:none;width:100%;min-width:0;flex-direction:row;justify-content:flex-start;
    gap:11px;padding:11px 13px;border-radius:10px;font-size:14px;height:auto;text-align:left}
  nav.lado button:hover{background:var(--carta2);color:var(--texto)}
  nav.lado button[aria-current="true"]{background:#2a1a14;color:#ffb595}
  nav.lado button .ic{font-size:17px}
  header .logo,header .div{display:none}
  .limite{padding:0 24px}
  .conteudo{padding-bottom:40px}
  .destaque .tres{grid-template-columns:repeat(4,1fr)}
}

/* ---------- secoes ---------- */
section.pag{display:none;padding:2px 0 26px}
section.pag.viva{display:block}
h2.sec{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mudo);margin:22px 0 10px}
h2.sec:first-child{margin-top:6px}

.grade{display:grid;gap:11px}
/* ⚠️ No celular: g2 e g3 em UMA coluna. Dois gráficos lado a lado numa tela
   de 390px viram miniatura ilegível — foi o que a captura mostrou.
   Só os cards de número (g4) aguentam duas colunas em tela pequena. */
.g2,.g3{grid-template-columns:1fr}
.g4{grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){
  .g2{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(3,1fr)}
  .g4{grid-template-columns:repeat(4,1fr)}}

.card{background:var(--carta);border:1px solid var(--linha);border-radius:13px;padding:14px 15px}
.card .rot{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mudo);line-height:1.25}
.card .val{font-size:29px;font-weight:800;line-height:1.05;margin-top:6px}
@media(min-width:700px){.card .val{font-size:34px}}
.card .val.v{color:var(--verde)} .card .val.r{color:var(--vermelho)}
.card .val.a{color:var(--amarelo)} .card .val.l{color:var(--laranja)}
.card .pe{font-size:11.5px;color:var(--fraco);margin-top:4px;line-height:1.4}
.card .pe b{color:var(--texto)}

.bloco{background:var(--carta);border:1px solid var(--linha);border-radius:13px;padding:15px 16px}
.bloco h3{font-size:14.5px;font-weight:800;line-height:1.25}
.bloco .peq{font-size:11.5px;color:var(--fraco);margin-top:2px;line-height:1.45}
.bloco .cab{margin-bottom:13px}
svg{display:block;width:100%;height:auto}
/* ⚠️ min-width:0 é OBRIGATÓRIO aqui. Sem ele, um filho largo (tabela ou
   gráfico) estica o container em vez de rolar dentro dele — e a PÁGINA
   passa a rolar de lado no celular, que é o pior defeito possível. */
.rolar{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;min-width:0}
.bloco,.card,.grade>*,.conteudo,.limite,section.pag{min-width:0}
.app{max-width:100%;overflow-x:clip}

/* ---------- filtros ---------- */
.filtros{display:flex;gap:6px;padding:9px 0;overflow-x:auto;scrollbar-width:none}
.filtros::-webkit-scrollbar{display:none}
.fbt{background:var(--carta2);border:1px solid var(--linha);color:var(--fraco);
  border-radius:9px;padding:8px 13px;font-size:12.5px;font-weight:600;cursor:pointer;
  font-family:inherit;white-space:nowrap;flex:none}
.fbt[aria-pressed="true"]{background:#2a1a14;border-color:var(--laranja);color:#ffb595}
.fdata{display:flex;align-items:center;gap:5px;flex:none}
.fdata input{background:var(--carta2);border:1px solid var(--linha);color:var(--texto);
  border-radius:8px;padding:7px 9px;font-size:12px;font-family:inherit;color-scheme:dark}

/* ---------- leituras ---------- */
.leitura{background:var(--carta);border:1px solid var(--linha);border-radius:13px;
  padding:13px 15px;border-left:4px solid var(--mudo);display:flex;gap:11px}
.leitura.bom{border-left-color:var(--verde)}
.leitura.ruim{border-left-color:var(--vermelho)}
.leitura.neutro{border-left-color:var(--laranja)}
.leitura .ic{font-size:18px;flex:none;line-height:1.3}
.leitura .tt{font-size:14px;font-weight:800;line-height:1.3}
.leitura .tx{font-size:12.5px;color:var(--fraco);margin-top:2px;line-height:1.45}
.leitura b{color:var(--texto)}

/* ---------- barras ---------- */
.bar{display:flex;align-items:center;gap:9px;margin-top:7px}
.bar .lb{width:88px;font-size:12px;color:var(--fraco);flex:none;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
@media(min-width:700px){.bar .lb{width:118px;font-size:12.5px}}
.bar .tr{flex:1;height:16px;background:#0e1117;border-radius:99px;overflow:hidden;
  border:1px solid var(--linha)}
/* display:block obrigatorio: span e inline e ignora width */
.bar .fi{display:block;height:100%;border-radius:99px;background:var(--laranja);
  transition:width .4s ease}
.bar .fi.v{background:var(--verde)} .bar .fi.r{background:var(--vermelho)}
.bar .vl{width:70px;text-align:right;font-size:12px;font-weight:700;flex:none}
.bar .vl small{color:var(--mudo);font-weight:500}
.bar img{width:34px;height:20px;object-fit:cover;border-radius:4px;flex:none;background:#0e1218}

/* ---------- tabela ---------- */
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--mudo);
  text-align:left;padding:7px 6px;border-bottom:1px solid var(--linha);font-weight:700;
  white-space:nowrap}
td{padding:8px 6px;border-bottom:1px solid #171c26;white-space:nowrap}
td .nome{display:flex;align-items:center;gap:8px}
td .nome img{width:34px;height:20px;object-fit:cover;border-radius:4px;flex:none}

/* ---------- partidas ---------- */
.jogo{display:flex;align-items:center;gap:10px;padding:9px 11px;background:var(--carta2);
  border:1px solid var(--linha);border-left:4px solid;border-radius:10px;margin-bottom:7px;
  text-align:left;width:100%;font-family:inherit;color:inherit}
button.jogo{cursor:pointer}
button.jogo:active{background:#1c2230}
.jogo.v{border-left-color:var(--verde)} .jogo.d{border-left-color:var(--vermelho)}
.jogo img{width:44px;height:26px;object-fit:cover;border-radius:5px;flex:none;background:#0e1218}
.jogo .info{flex:1;min-width:0}
.jogo .nm{font-weight:700;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jogo .mt{font-size:11px;color:var(--fraco);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.jogo .kda{text-align:right;font-weight:700;flex:none;font-size:13px}
.jogo .kda small{display:block;font-size:10px;color:var(--mudo);font-weight:500}

/* ---------- aula interativa ---------- */
.progresso{background:var(--carta);border:1px solid var(--linha);border-radius:13px;
  padding:14px 16px;margin-bottom:12px}
.progresso .lin{display:flex;align-items:center;gap:11px}
.progresso .tt{font-size:14px;font-weight:800;flex:1}
.progresso .n{font-size:13px;font-weight:800;color:var(--verde)}
.progresso .tr{height:9px;background:#0e1117;border-radius:99px;overflow:hidden;
  border:1px solid var(--linha);margin-top:9px}
.progresso .fi{display:block;height:100%;background:var(--verde);border-radius:99px;
  transition:width .5s ease}

.licao{background:var(--carta);border:1px solid var(--linha);border-radius:13px;
  margin-bottom:9px;border-left:4px solid var(--laranja);overflow:hidden}
.licao.feito{border-left-color:var(--verde)}
.licao.treinando{border-left-color:var(--amarelo)}
.licao .cabl{display:flex;align-items:flex-start;gap:11px;padding:14px 15px;cursor:pointer;
  width:100%;background:none;border:none;font-family:inherit;color:inherit;text-align:left}
.licao .cabl:active{background:var(--carta2)}
.licao .n{width:29px;height:29px;border-radius:9px;background:#2a1a14;color:#ffb595;
  display:grid;place-items:center;font-weight:800;font-size:13px;flex:none;margin-top:1px}
.licao.feito .n{background:#12291d;color:#9df0c4}
.licao.treinando .n{background:#2a2114;color:#ffd07a}
.licao .tt{font-size:14.5px;font-weight:800;line-height:1.3;flex:1}
.licao .selo{font-size:9.5px;font-weight:700;border-radius:99px;padding:2px 8px;
  margin-left:7px;vertical-align:2px;text-transform:uppercase;letter-spacing:.04em;
  display:inline-block}
.licao .selo.ini{background:#3a1a12;color:#ffb595;border:1px solid #4a2c1a}
.licao .selo.ok{background:#12291d;color:#9df0c4;border:1px solid #1d4634}
.licao .selo.tr{background:#2a2114;color:#ffd07a;border:1px solid #4a3c1a}
.licao .seta{color:var(--mudo);font-size:15px;flex:none;transition:transform .25s}
.licao.aberta .seta{transform:rotate(180deg)}
.licao .corpo{display:none;padding:0 15px 15px}
.licao.aberta .corpo{display:block}
.licao .dois{display:grid;grid-template-columns:1fr;gap:9px;margin-bottom:11px}
@media(min-width:640px){.licao .dois{grid-template-columns:1fr 1fr}}
.licao .lado{background:var(--carta2);border:1px solid var(--linha);border-radius:9px;
  padding:10px 12px;font-size:12.5px;color:var(--fraco)}
.licao .lado b{color:var(--texto)}
.licao .lado .q{display:block;font-size:9.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mudo);margin-bottom:3px}
.licao .pq{font-size:12.5px;color:var(--fraco);line-height:1.55;margin-bottom:11px}
.licao .meta{font-size:12.5px;font-weight:700;background:#12291d;color:#9df0c4;
  border:1px solid #1d4634;border-radius:9px;padding:9px 12px;margin-bottom:11px}
.licao .acoes{display:flex;gap:8px;flex-wrap:wrap}
.licao .acoes button{background:var(--carta2);border:1px solid var(--linha);color:var(--fraco);
  border-radius:9px;padding:9px 14px;font-size:12.5px;font-weight:600;cursor:pointer;
  font-family:inherit;flex:1;min-width:130px}
.licao .acoes button.on{background:#2a2114;border-color:#4a3c1a;color:#ffd07a}
.licao .acoes button.ok.on{background:#12291d;border-color:#1d4634;color:#9df0c4}

/* ---------- mapa ---------- */
/* ⚠️ DOIS por linha mesmo no celular. Empilhados, comparar vitória com derrota
   exigia rolar a tela — e comparação que precisa de memória não é comparação. */
.mapas{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(min-width:700px){.mapas{gap:11px}}
.mp{background:#0b1016;border:1px solid var(--linha);border-radius:12px;padding:8px;
  min-width:0}
.mp .tt{font-size:11px;font-weight:800;margin-bottom:6px;text-align:center;line-height:1.25}
@media(min-width:700px){.mp{padding:10px}.mp .tt{font-size:12.5px}}
.mp svg,.mp img{max-width:100%;height:auto;display:block;margin:0 auto}

/* ---------- lado a lado ---------- */
.versus{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:840px){.versus{grid-template-columns:1fr 1fr}}

/* MODO SIMPLES: a conta que está começando não vê o Yatoro nem o mapa.
   `soSimples` é o contrário — texto que só aparece lá. */
/* "na próxima partida": o passo prático, destacado do diagnóstico */
.como{background:rgba(232,98,60,.1);border:1px solid rgba(232,98,60,.35);
  border-radius:9px;padding:9px 11px;margin-top:9px;font-size:13px;line-height:1.55}
.como .q{display:block;font-size:9.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--laranja);margin-bottom:3px}

.soSimples{display:none}
body.simples .soYatoro{display:none}
body.simples .soSimples{display:block}
@media(min-width:840px){body.simples .versus{grid-template-columns:1fr}}
.coluna .cabc{display:flex;align-items:center;gap:8px;padding:10px 13px;border-radius:10px;
  margin-bottom:9px;font-weight:800;font-size:13px;flex-wrap:wrap}
.coluna.eu .cabc{background:#2a1a14;color:#ffb595;border:1px solid #4a2c1a}
.coluna.ele .cabc{background:#12291d;color:#9df0c4;border:1px solid #1d4634}
.coluna .cabc .r{font-size:11px;font-weight:600;opacity:.85;margin-left:auto}

.mt2{display:grid;grid-template-columns:1fr 80px 1fr;align-items:center;gap:8px;
  padding:10px 0;border-bottom:1px solid #171c26}
.mt2:last-child{border-bottom:none}
.mt2 .a,.mt2 .b{display:flex;align-items:center;gap:7px}
.mt2 .a{justify-content:flex-end}
.mt2 .n{font-size:16px;font-weight:800}
.mt2 .barra{height:8px;border-radius:99px;background:#0e1117;overflow:hidden;flex:1;
  max-width:110px}
.mt2 .barra i{display:block;height:100%;border-radius:99px}
.mt2 .rot{font-size:9.5px;color:var(--mudo);text-align:center;text-transform:uppercase;
  letter-spacing:.04em;line-height:1.2}

/* ---------- calendario ---------- */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
@media(min-width:700px){.cal{grid-template-columns:repeat(14,1fr)}}
.cal .q{aspect-ratio:1;border-radius:5px;background:#151a24;border:1px solid #1d2432;
  position:relative}
.cal .q.tem{border-color:transparent}
.cal .q .n{position:absolute;inset:0;display:grid;place-items:center;font-size:10px;
  font-weight:700;color:#06120c}

/* ---------- diversos ---------- */
.pill{display:inline-block;font-size:11px;padding:2px 8px;border-radius:99px;margin:3px 4px 0 0;
  border:1px solid var(--linha);color:var(--fraco)}
.aviso{background:#191510;border:1px solid #4a3c1a;border-left:4px solid var(--amarelo);
  border-radius:10px;padding:10px 13px;font-size:12px;color:#f0d9a8;margin-top:9px}
.nota{font-size:11.5px;color:var(--mudo);margin-top:8px;line-height:1.5}
.erro{background:#1a1013;border:1px solid #4a2226;border-left:4px solid var(--vermelho);
  border-radius:12px;padding:14px;color:#ffb3b3;font-size:13.5px;margin-top:12px}
/* aviso não é erro: o painel está funcionando, com dado de minutos atrás */
.erro.aviso{background:#191403;border-color:#4a3c1a;border-left-color:var(--amarelo);
  color:#f0d597}
.carregando{color:var(--mudo);padding:40px 0;text-align:center;font-size:13.5px}
.btn{background:var(--carta2);border:1px solid var(--linha);color:var(--texto);border-radius:9px;
  padding:9px 15px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit}
.btn:disabled{opacity:.55}

/* ---------- gaveta ---------- */
#capa{position:fixed;inset:0;background:rgba(5,7,11,.88);z-index:100;display:none;
  overflow-y:auto;-webkit-overflow-scrolling:touch}
#capa.viva{display:block}
#gaveta{max-width:940px;margin:0 auto;background:var(--carta);
  border:1px solid var(--linha);border-radius:16px 16px 0 0;padding:18px 15px 40px;
  min-height:100%}
@media(min-width:700px){#capa{padding:20px 14px}
  #gaveta{border-radius:16px;min-height:0;padding:20px}}
#fechar{position:sticky;top:0;float:right;background:var(--carta2);
  border:1px solid var(--linha);color:var(--fraco);border-radius:9px;padding:8px 15px;
  cursor:pointer;font-family:inherit;font-size:13px;z-index:5}

/* ---------- META DO PATCH ----------
   Aba nova (29/08). Prefixo `m` em tudo: `.sv` e `.sd` ja existem aqui com
   outro sentido (semana e dia da missao), e reusar quebraria os dois. */
.msobe{color:var(--verde)}
.mdesce{color:var(--vermelho)}

/* a diferenca entre voce e o mundo, colada no nome do heroi */
.mvant{margin-left:7px;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}

/* subindo / caindo: cartao pequeno, tres por linha */
.mtgrade{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.mtend{background:var(--carta2);border:1px solid var(--linha);border-radius:11px;
  padding:10px 8px;text-align:center;min-width:0}
.mtend img{width:38px;height:38px;border-radius:8px;object-fit:cover;margin-bottom:6px}
.mtn{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.mtv{font-size:17px;font-weight:800;line-height:1.2;font-variant-numeric:tabular-nums}
.mts{font-size:10.5px;color:var(--fraco);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}

/* heroi com icone dentro de tabela e de cabecalho */
.mnome{display:flex;align-items:center;gap:8px;font-weight:600;min-width:0}
.mnome img{width:28px;height:28px;border-radius:6px;object-fit:cover;flex:none}
/* a linha do heroi que ELE joga salta da tier list — e o unico motivo de a
   lista existir: achar o seu nome nela */
tr.meu{background:rgba(245,182,66,.07)}
tr.meu td{border-color:rgba(245,182,66,.22)}

/* o profissional */
.mprol{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px}
.mpro{display:flex;align-items:center;gap:9px;background:var(--carta2);
  border:1px solid var(--linha);border-radius:10px;padding:8px 9px;min-width:0}
.mpro img{width:32px;height:32px;border-radius:7px;object-fit:cover;flex:none}
.mps{font-size:11px;color:var(--fraco)}

/* o build, fase por fase */
.mfase{display:flex;gap:10px;align-items:flex-start;padding:8px 0;
  border-top:1px solid var(--linha)}
.mfr{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mudo);width:62px;flex:none;padding-top:5px}
.mfi{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.mitem{display:inline-flex;align-items:center;gap:6px;background:var(--carta);
  border:1px solid var(--linha);border-radius:8px;padding:4px 8px 4px 4px;
  font-size:11.5px;color:var(--texto)}
.mitem img{width:32px;height:24px;border-radius:4px;object-fit:cover;flex:none}

@media(max-width:760px){
  .mtgrade{grid-template-columns:repeat(2,1fr)}
  .mprol{grid-template-columns:1fr}
  .mfase{flex-direction:column;gap:5px}
  .mfr{width:auto;padding-top:0}
}

/* ---------- POOL POR FUNCAO ----------
   As abas ficam DENTRO do bloco, coladas no titulo: a pergunta ("voce vai de
   que?") tem de aparecer antes da resposta, nao no meio da lista. */
.pfabas{padding:2px 0 10px;gap:6px;flex-wrap:wrap}
.pfb{display:inline-flex;align-items:center;gap:6px}
.pfj{font-size:10px;font-weight:800;color:var(--mudo);background:rgba(255,255,255,.06);
  border-radius:99px;padding:1px 6px}
.pfb[aria-pressed="true"] .pfj{color:var(--laranja);background:rgba(255,255,255,.9)}

/* ---------- PROS ---------- */
.procard{margin-bottom:12px}
.procab{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.proava{width:52px;height:52px;border-radius:12px;object-fit:cover;flex:none}
.proq{flex:1;min-width:0}
.pron{font-size:17px;font-weight:800}
.pros2{font-size:12px;color:var(--fraco)}
.selo.bom{color:#0d1119;background:var(--verde)}
.selo.ruim{color:#fff;background:rgba(255,91,91,.22);border-color:rgba(255,91,91,.4)}
.pronums{margin-bottom:10px}
/* o aviso do tipo de partida cola nos numeros: numero sem contexto engana */
.proaviso{margin-bottom:12px}
@media(max-width:760px){
  .pronums{grid-template-columns:repeat(2,1fr)}
}