:root {
  color-scheme: light;
  --page: #f9f9f7; --surface: #fcfcfb; --ink: #0b0b0b; --ink-2: #52514e; --muted: #898781;
  --grid: #e1e0d9; --axis: #c3c2b7; --ring: rgba(11,11,11,0.10);
  --s1: #2a78d6; --s2: #eb6834; --good: #006300; --bad: #d03b3b; --warn: #fab219; --ativo: #0ca30c;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page: #0d0d0d; --surface: #1a1a19; --ink: #f0efec; --ink-2: #c3c2b7; --muted: #898781;
    --grid: #2c2c2a; --axis: #383835; --ring: rgba(255,255,255,0.10);
    --s1: #3987e5; --s2: #d95926; --good: #0ca30c; --bad: #e66767;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d; --surface: #1a1a19; --ink: #f0efec; --ink-2: #c3c2b7; --muted: #898781;
  --grid: #2c2c2a; --axis: #383835; --ring: rgba(255,255,255,0.10);
  --s1: #3987e5; --s2: #d95926; --good: #0ca30c; --bad: #e66767;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--ink); font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 1280px; margin: 0 auto; padding: 16px 16px 48px; }
nav { display: flex; gap: 16px; align-items: baseline; margin-bottom: 12px; flex-wrap: wrap; }
nav a { color: var(--ink-2); text-decoration: none; } nav a[aria-current] { color: var(--ink); font-weight: 600; }
h1 { font-size: 20px; margin: 0; } h2 { font-size: 15px; margin: 0 0 4px; }
.sub { color: var(--ink-2); font-size: 13px; } .muted { color: var(--muted); }
.card { background: var(--surface); border: 1px solid var(--ring); border-radius: 10px; padding: 14px; margin-bottom: 14px; }
.barra { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.barra label { color: var(--ink-2); font-size: 13px; display: inline-flex; gap: 6px; align-items: center; }
input, select, button { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--ring); border-radius: 8px; padding: 5px 9px; }
input[type=number] { width: 84px; } button { cursor: pointer; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { padding: 7px 8px; border-bottom: 1px solid var(--grid); text-align: left; vertical-align: middle; }
th { color: var(--ink-2); font-weight: 600; font-size: 13px; position: sticky; top: 0; background: var(--surface); }
td.num, th.num { text-align: right; }
tr.alvo td { background: color-mix(in srgb, #8b7cf6 14%, transparent); } /* alvo: tom lilas, sem fixar no topo */
tr.na-faixa > td:nth-child(3) { color: var(--ativo); font-weight: 700; } /* vstar de quem esta na sua faixa */
.estrela { background: none; border: 0; font-size: 18px; padding: 0 4px; color: var(--muted); }
.estrela[aria-pressed="true"] { color: #e6a700; }
.selo { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 1px 7px; border-radius: 99px; border: 1px solid var(--ring); color: var(--ink-2); white-space: nowrap; }
.selo.ativo { color: var(--ink); border-color: var(--ativo); } .selo.ativo::before { content: "●"; color: var(--ativo); }
.v { color: var(--good); } .d { color: var(--bad); }
.time { display: flex; gap: 4px; }
.time img { object-fit: contain; background: color-mix(in srgb, var(--ink) 4%, transparent); border-radius: 8px; }
/* imagem do NFT (enquanto o desenho nao chega): o Axie ocupa so ~55% da largura dela, um pouco acima do centro (medido
   em 6 NFTs). Ampliada para ficar do tamanho do desenho, a troca quase nao aparece */
.time img:not(.morph):not(.rn) { transform: translateY(4%) scale(1.6); } /* so o Axie; o icone da runa (.rn) fica como esta */
/* caixas na proporcao do desenho gerado (180x146): quadradas, sobrava faixa vazia em cima e embaixo */
img.ax { width: 96px; height: 78px; } img.ax-p { width: 56px; height: 46px; } img.ax-g { width: 120px; height: 98px; }
img:not([src]) { visibility: hidden; }
@media (max-width: 700px) { img.ax { width: 64px; height: 52px; } img.ax-p { width: 44px; height: 36px; } }
.lado { display: grid; grid-template-columns: auto auto; gap: 16px; align-items: start; justify-content: start; margin: 8px 0; }
.lado h3 { font-size: 12px; font-weight: 600; color: var(--ink-2); margin: 0 0 4px; }
details.time-det summary { cursor: pointer; list-style: none; } details.time-det summary::-webkit-details-marker { display: none; }
.lutador { display: grid; grid-template-columns: 1fr; gap: 8px; align-items: center; margin: 6px 0; font-size: 12px; color: var(--ink-2); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.tile .lbl { color: var(--ink-2); font-size: 13px; } .tile .val { font-size: 22px; font-weight: 600; }
svg { display: block; width: 100%; height: auto; } svg text { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.legend { display: flex; gap: 16px; color: var(--ink-2); font-size: 13px; margin: 4px 0; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.tip { position: fixed; pointer-events: none; background: var(--surface); border: 1px solid var(--ring); border-radius: 8px; padding: 8px 10px;
       font-size: 13px; box-shadow: 0 4px 16px rgba(0,0,0,.12); display: none; z-index: 9; }
.tip b { font-size: 15px; } .tip .k { display: inline-block; width: 12px; height: 2px; margin-right: 6px; vertical-align: 3px; }
.erro { color: var(--bad); }
.carregando { opacity: .55; transition: opacity .2s; }
@media (max-width: 700px) { .so-largo { display: none; } }
/* snipe: tipos de time, painel do jogador, avisos */
.tipos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; margin-top: 8px; }
.tipo { position: relative; display: flex; justify-content: space-between; gap: 8px; text-align: left; overflow: hidden; }
.tipo i { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--s1); }
.tipo[aria-pressed="true"] { border-color: var(--s1); box-shadow: inset 0 0 0 1px var(--s1); }
.tipo .num { color: var(--ink-2); font-variant-numeric: tabular-nums; }
button.link { background: none; border: 0; padding: 0; color: var(--ink); text-decoration: underline; text-decoration-color: var(--axis); text-underline-offset: 3px; text-align: left; }
tr.eu td:first-child { box-shadow: inset 3px 0 0 var(--s1); }
.replay { display: inline-block; margin-top: 2px; font-size: 12px; color: var(--s1); text-decoration: none; }
.lutadores { display: flex; flex-wrap: wrap; gap: 10px; }
.lutador { display: block; border: 1px solid var(--ring); border-radius: 10px; padding: 8px; width: 290px; font-size: 13px; color: var(--ink); }
.lut-topo { display: grid; grid-template-columns: 120px 1fr; gap: 8px; align-items: center; }
.runas { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 4px; }
.partes { display: grid; gap: 2px; margin-top: 6px; }
.parte { display: grid; grid-template-columns: 56px 1fr 28px; gap: 6px; align-items: center; }
.ponto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
img.ico { width: 26px; height: 26px; object-fit: contain; } img.ico-g { width: 34px; height: 34px; object-fit: contain; }
.lado { grid-template-columns: 1fr; }
tr.clicavel { cursor: pointer; } tr.clicavel:hover td { background: color-mix(in srgb, var(--ink) 3%, transparent); }
tr.det > td { background: color-mix(in srgb, var(--ink) 2%, transparent); }
.barra-pct { height: 4px; background: var(--grid); border-radius: 2px; margin-top: 3px; max-width: 160px; }
.barra-pct i { display: block; height: 100%; background: var(--s1); border-radius: 2px; }
dialog#dlg-jogador { width: min(1240px, 96vw); max-height: 92vh; padding: 0; border: 1px solid var(--ring); border-radius: 12px; background: var(--page); color: var(--ink); }
dialog::backdrop { background: rgba(0,0,0,.5); }
.dlg-topo { position: sticky; top: 0; z-index: 2; display: flex; gap: 12px; align-items: center; padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--ring); }
.dlg-topo h2 { margin: 0; font-size: 16px; } .dlg-topo #dlg-mais { margin-left: auto; }
#dlg-corpo { padding: 12px 16px; }
.toasts { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 20; }
.toast { background: var(--surface); border: 1px solid var(--ativo); border-radius: 10px; padding: 10px 14px; box-shadow: 0 4px 16px rgba(0,0,0,.2); max-width: 340px; cursor: pointer; }
.time-bt { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.time-bt[aria-expanded="true"] .sub { color: var(--ink); }
.selo-tipo { display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap; font-size: 13px; }
.selo-tipo > span { margin-left: 3px; }
img.ico-p { width: 20px; height: 20px; object-fit: contain; }
.lapis { background: none; border: 0; padding: 0 3px; color: var(--muted); font-size: 12px; cursor: pointer; }
.lapis:hover { color: var(--ink); }
.parece { background: none; border: 0; padding: 0 3px; color: var(--muted); font-size: 11px; font-style: italic; cursor: pointer; text-decoration: underline dotted; }
.parece:hover { color: var(--ink); }
dialog#dlg-nome { width: min(420px, 92vw); padding: 16px; border: 1px solid var(--ring); border-radius: 12px; background: var(--surface); color: var(--ink); }
dialog#dlg-nome h2 { margin: 0 0 6px; font-size: 16px; } dialog#dlg-nome input { width: 100%; box-sizing: border-box; }
.tipos { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.tipo { align-items: center; }
.selo-tipo { flex-wrap: nowrap; } .selo-tipo > span { white-space: normal; }
.tipo { display: grid; grid-template-columns: 1fr auto; text-align: left; }
.tipo .num { white-space: nowrap; }
.e { color: var(--muted); }
span.starter { display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: var(--muted); background: color-mix(in srgb, var(--ink) 4%, transparent); border-radius: 8px; }
span.starter.ax { width: 96px; height: 78px; } span.starter.ax-p { width: 56px; height: 46px; } span.starter.ax-g { width: 120px; height: 98px; }
/* snipe compacto: linha mais baixa */
#lista td { padding-top: 5px; padding-bottom: 5px; }
.replay { margin-top: 0; }
main { max-width: 1680px; }
#corpo .sub { white-space: nowrap; }
button.mais { margin-top: 10px; }
.res { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 6px; border: 1px solid var(--muted); background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--ink); }
.res.v { border-color: var(--s1); background: color-mix(in srgb, var(--s1) 22%, transparent); }
.res.d { border-color: var(--s2); background: color-mix(in srgb, var(--s2) 22%, transparent); }
#corpo .anterior { opacity: .6; }
/* partes recolhiveis do snipe */
#tipos-box > summary { cursor: pointer; list-style: none; display: flex; gap: 10px; align-items: baseline; }
#tipos-box > summary::-webkit-details-marker { display: none; }
#tipos-box > summary h2 { margin: 0; } #tipos-box > summary::before { content: "▸"; color: var(--muted); } #tipos-box[open] > summary::before { content: "▾"; }
#tipos-box:not([open]) { padding-top: 10px; padding-bottom: 10px; }
.recolhivel { padding: 8px 10px; border: 1px solid var(--ring); border-radius: 10px; background: var(--surface); }
details.legenda > summary { cursor: pointer; margin-bottom: 6px; } details.legenda[open] > .sub { margin-bottom: 8px; }
#filtros-bt[aria-expanded="true"] { border-color: var(--s1); }
[hidden] { display: none !important; } /* .barra usa display:flex, que vencia o atributo hidden */
/* entrar / convite */
main.entrar { max-width: 360px; padding-top: 12vh; }
.entrar form { display: grid; gap: 10px; } .entrar label { display: grid; gap: 4px; color: var(--ink-2); font-size: 13px; }
.entrar button[type=submit] { font-weight: 600; }
nav .quem { margin-left: auto; display: inline-flex; gap: 10px; align-items: baseline; }

.rolagem { overflow-x: auto; }
td.time-rk { min-width: 190px; } td.time-rk .selo-tipo { font-size: 12px; color: var(--ink-2); margin-top: 2px; max-width: 200px; }

/* celular: barra de cima em linhas cheias e cada linha do snipe vira um cartao (sem rolagem para o lado) */
@media (max-width: 640px) {
  .barra > label { flex: 1 1 100%; }
  .barra > label > select, .barra > label > input[type=search] { flex: 1; min-width: 0; }
  .barra > button { flex: 1 1 auto; }
  #lista thead { display: none; }
  #lista table, #lista tbody, #lista tr.det, #lista tr.det > td { display: block; }
  /* linha 1: estrela # nome vstar · 2: time + composicao · 3: historico (lado a lado) · 4: contra */
  #lista tr.cartao { display: grid; grid-template-columns: auto auto 1fr auto; column-gap: 6px; align-items: center;
    grid-template-areas: "est pos nome vstar" "time time time time" "hist hist hist hist" "op op op op"; border-bottom: 1px solid var(--grid); padding: 6px 0; }
  #lista tr.cartao > td { border-bottom: 0; padding: 2px 6px; min-width: 0; }
  #lista td.c-est { grid-area: est; } #lista td.c-pos { grid-area: pos; } #lista td.c-nome { grid-area: nome; }
  #lista td.c-vstar { grid-area: vstar; font-weight: 600; } #lista td.c-time { grid-area: time; } #lista td.c-hist { grid-area: hist; }
  #lista td.c-op { grid-area: op; } #lista td.c-op:empty { display: none; }
  #lista td.c-nome { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
  #lista td.c-nome button.link { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #lista tr.cartao[class*=res-] td:first-child { box-shadow: none; }
  #lista tr.res-v { box-shadow: inset 4px 0 0 var(--good); } #lista tr.res-d { box-shadow: inset 4px 0 0 var(--bad); } #lista tr.res-e { box-shadow: inset 4px 0 0 var(--muted); }
  #lista tr.cartao[class*=res-] { padding-left: 6px; }
  /* contra numa linha so: o nome do oponente encolhe com reticencias; composicao e vstar ficam sempre a vista */
  #lista td.c-op:not(:empty) { display: flex; white-space: nowrap; width: auto; max-width: none; }
  #lista td.c-op > div:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  #lista td.c-op > div + div { flex: none; } #lista td.c-op > div + div::before { content: "·"; margin: 0 .35em; }
  #lista .comp .lapis, #lista .comp .parece { opacity: 1; }
  #corpo .sub { white-space: normal; }
}

/* painel: ponto fraco e horas em que o jogador costuma jogar */
.selo-fraco { margin-left: 8px; padding: 1px 6px; border-radius: 8px; font-size: 12px; background: var(--s2); color: #fff; }
tr.ponto-fraco td { background: color-mix(in srgb, var(--s2) 12%, transparent); }
.horas { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding-bottom: 16px; }
.hora { flex: 1; height: 100%; position: relative; display: flex; align-items: flex-end; }
.hora i { display: block; width: 100%; min-height: 2px; background: var(--s1); border-radius: 3px 3px 0 0; }
.hora span { position: absolute; left: 0; right: 0; bottom: -16px; text-align: center; font-size: 11px; color: var(--ink-2); }

/* snipe: layout D (colunas: estrela, #, vstar, jogador, time, historico, contra), linha de ~55 px */
img.ax-s { width: 86px; height: 68px; } span.starter.ax-s { width: 86px; height: 68px; }
@media (max-width: 700px) { img.ax-s, span.starter.ax-s { width: 66px; height: 52px; } }
/* Axie com a runa numa coluna a esquerda (centralizada na altura, sem cobrir o desenho) e as estrelas dela numa
   plaquinha logo abaixo do icone */
.axw { position: relative; display: inline-block; line-height: 0; padding-left: 25px; }
.axw img.ax-s, .axw img.ax-p, .axw img.ax { background: none; }
.axw .rn { position: absolute; left: 1px; top: 50%; margin-top: -17px; width: 22px; height: 22px; }
.axw .rn-est { position: absolute; left: 0; top: 50%; margin-top: 6px; width: 24px; text-align: center; font-size: 8px; line-height: 10px;
  letter-spacing: -1px; padding: 0 1px; border-radius: 4px; background: rgba(0, 0, 0, .7); white-space: nowrap; color: var(--muted); }
.axw .rn-est { text-shadow: 0 0 2px rgba(0, 0, 0, .8); }
.axw .rn-est.t-rara { color: #22c55e; }
.axw .rn-est.t-epica { color: #38bdf8; }
.axw .rn-est.t-mistica { color: #a855f7; }
#lista .time { gap: 10px; }
.comp { font-size: 11.5px; color: var(--muted); line-height: 1.2; margin-top: 2px; }
.comp .selo-tipo { font-size: 11.5px; color: var(--muted); max-width: 240px; flex-wrap: nowrap; }
.comp .selo-tipo .ico-p { display: none; }
.comp .selo-tipo > span { margin-left: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.comp .lapis, .comp .parece { opacity: 0; transition: opacity .15s; }
tr.cartao:hover .comp .lapis, tr.cartao:hover .comp .parece, .comp .lapis:focus-visible { opacity: 1; }
.voce { margin-left: 6px; font-size: 11px; color: var(--s1); }
.rk { margin-left: 6px; font-size: 11px; color: var(--muted); }
/* historico do snipe em blocos: ultima partida (.ult), forma das 5 ultimas (.forma .q) e selo de sequencia (.seq).
   Verde = venceu, vermelho = perdeu, cinza = empate; a letra (V/D/E) vai sempre junto, a cor nunca vai sozinha */
.hist { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hist .ult { display: inline-flex; align-items: center; gap: 6px; border-radius: 7px; padding: 4px 9px; font-weight: 700; font-size: 13px; color: #fff; }
.hist .ult b { font-weight: 700; }
.hist .ult .ht { font-weight: 500; font-size: 12px; opacity: .92; }
.hist .forma { display: inline-flex; gap: 4px; }
.hist .q { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 4px; font-size: 11px; font-weight: 700; color: #fff; }
.hist .v { background: #0b7a0b; } .hist .d { background: #b23c3c; } .hist .e { background: #5a5955; }
.hist .seq { background: none; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 1px 8px; border: 1px solid; }
.hist .seq.v { color: var(--good); border-color: var(--good); } .hist .seq.d { color: var(--bad); border-color: var(--bad); }
.hist .dot { display: none; width: 7px; height: 7px; border-radius: 50%; background: #7dff7d; box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.hist .dot.on { display: inline-block; }
.hist .car { background: color-mix(in srgb, var(--muted) 45%, var(--surface)); color: var(--ink); animation: hist-pisca 1.1s infinite; }
@keyframes hist-pisca { 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .hist .car { animation: none; } }
/* faixa na borda da linha pelo resultado da ultima partida (vale tambem na sua conta, no lugar da faixa azul) */
#lista tr.res-v td:first-child { box-shadow: inset 4px 0 0 var(--good); }
#lista tr.res-d td:first-child { box-shadow: inset 4px 0 0 var(--bad); }
#lista tr.res-e td:first-child { box-shadow: inset 4px 0 0 var(--muted); }
/* Contra fica com ate 28% da tabela e corta com "..." (width + max-width 0: o truque da celula de tabela que
   encolhe); antes, com max-width 240px, em tela media a linha passava da caixa */
td.c-op { font-size: 12px; color: var(--muted); width: 28%; max-width: 0; }
@media (min-width: 701px) and (max-width: 1200px) { img.ax-s, span.starter.ax-s { width: 70px; height: 56px; } }
td.c-op > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* nome/composicao longos nao alargam a tabela; texto inteiro no title */

/* "Mostrar mais" abaixo da tabela do snipe */
.mais { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 0 4px; }
/* selo "ao vivo" na barra da busca do snipe (como no axiemaster); a hora da ultima conferida fica no title */
.vivo { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; border: 1px solid var(--ring); color: var(--muted); }
.vivo:empty { display: none; }
.vivo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.vivo.on { color: var(--ativo); border-color: color-mix(in srgb, var(--ativo) 45%, transparent); background: color-mix(in srgb, var(--ativo) 10%, transparent); }
.vivo.on::before { animation: pulso 1.6s ease-in-out infinite; }
.vivo.erro { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); text-transform: none; letter-spacing: 0; }
@keyframes pulso { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .vivo.on::before { animation: none; } }
input.curto { width: 76px; }
/* aluguel de Axies: vitrine em cartoes e "Meus anuncios" */
.anuncios { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; margin-top: 12px; }
.anuncio { border: 1px solid var(--ring); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; background: var(--page); }
.anuncio-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.aluga-axie { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.aluga-axie img.ax { background: none; }
.partes-aluga { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 1px 8px; font-size: 12.5px; margin-top: 4px; }
.comps { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.anuncio .preco { font-weight: 700; font-size: 15px; }
.lutadores-escolha { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin: 10px 0; max-height: 420px; overflow: auto; }
.lutadores-escolha .escolha { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.eras-escolha { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; }
.meu { border-top: 1px solid var(--grid); padding: 8px 0; }
@media (max-width: 700px) { .anuncios { grid-template-columns: 1fr; } .partes-aluga { grid-template-columns: auto 1fr; } }
.partes-aluga .orig { color: var(--muted); font-size: 11.5px; }
.morph-info { color: var(--s1); }
/* aluguel: escolha dos Axies em cards clicaveis, bandeja "Selecionados" presa no fim da tela e "Publicados" em cards */
.esc-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; max-height: 520px; overflow: auto; padding: 2px; }
.esc-card { display: flex; gap: 6px; align-items: center; padding: 6px; border: 1px solid var(--ring); border-radius: 8px; cursor: pointer; font-size: 12.5px; }
.esc-card:hover { border-color: var(--axis); }
.esc-card[aria-checked="true"] { border-color: var(--s1); box-shadow: inset 0 0 0 1px var(--s1); background: color-mix(in srgb, var(--s1) 8%, transparent); }
.esc-card:focus-visible { outline: 2px solid var(--s1); outline-offset: 1px; }
.esc-card img.ax-p { background: none; flex: none; }
.esc-txt { min-width: 0; } .esc-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }
.bandeja { position: sticky; bottom: 0; z-index: 5; margin-top: 10px; padding: 10px; border: 1px solid var(--s1); border-radius: 10px;
  background: var(--surface); box-shadow: 0 -6px 18px rgba(0, 0, 0, .25); }
.bandeja-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.sel-lista { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.sel-mini { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; } .sel-mini img.ax-p { width: 40px; height: 33px; background: none; }
.previa { max-width: 420px; margin-top: 6px; }
.previa .anuncio { opacity: .95; }
.pub-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; }
.pub { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; padding: 8px; border: 1px solid var(--ring); border-radius: 10px; }
.pub-fora { opacity: .7; } .pub-imgs { display: flex; } .pub-imgs img.ax-p { background: none; }
.pub-info { font-size: 13px; } .pub-acoes { grid-column: 1 / -1; display: flex; gap: 6px; }
@media (max-width: 700px) { .esc-grade { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
/* aluguel: pedidos, carteiras e o dialogo Alugar */
.selo.ocupada { text-decoration: line-through; opacity: .6; }
button.alugar { margin-top: 8px; align-self: flex-start; justify-self: start; }
.pedidos { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 8px; }
.pedido .situ { font-weight: 600; margin-top: 2px; }
.pedido-fazer { margin-top: 6px; line-height: 1.5; }
.pedido code, .carteira code { font-size: 12px; overflow-wrap: anywhere; user-select: all; }
.pedido .pedido-fazer code { display: block; margin: 2px 0; }
.pedido input.hash { width: 100%; box-sizing: border-box; margin-top: 6px; font-family: ui-monospace, monospace; font-size: 12px; }
.carteiras { display: grid; gap: 4px; margin-top: 8px; }
.carteira { display: flex; align-items: center; gap: 10px; }
#c-endereco { width: min(420px, 80vw); font-family: ui-monospace, monospace; font-size: 12px; }
dialog#dlg-alugar { width: min(520px, 94vw); padding: 16px; border: 1px solid var(--ring); border-radius: 12px; background: var(--surface); color: var(--ink); }
dialog#dlg-alugar h2 { margin: 0 0 6px; font-size: 16px; }
dialog#dlg-alugar label { display: grid; gap: 2px; margin-top: 10px; } dialog#dlg-alugar select { width: 100%; }
dialog#dlg-alugar .barra { margin-top: 14px; }
@media (max-width: 700px) { .pedidos { grid-template-columns: 1fr; } }
.toast-erro { border-color: var(--bad); }
.c-msg { display: grid; gap: 2px; margin-top: 8px; } .c-msg textarea { width: min(640px, 100%); box-sizing: border-box; }
.aprov-msg { margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; font-style: italic; }
.al-bloco { margin-top: 10px; } .al-eras { display: grid; gap: 4px; margin-top: 4px; } .al-eras label { display: flex !important; gap: 6px; align-items: center; margin: 0 !important; }
.al-total { margin-top: 8px; font-weight: 600; } .al-total.erro { font-weight: 400; }
dialog#dlg-alugar textarea { width: 100%; box-sizing: border-box; }
.filtro-partes { margin-top: 6px; } .filtro-partes select { max-width: 150px; }
.al-morph { display: flex !important; gap: 6px; align-items: center; }
.preco .selo.slips { margin-left: 8px; font-weight: 400; vertical-align: middle; }
#al-extras input { width: min(360px, 70vw); font-family: ui-monospace, monospace; font-size: 12px; }
/* aluguel: card do anuncio (cabecalho com selos, partes com a cor da classe, rodape preso no fim) */
.como-funciona summary { cursor: pointer; color: var(--ink-2); } .como-funciona .sub { margin-top: 6px; }
.ax-info { min-width: 0; }
.ax-cab { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.ax-nome { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.selo.cls { color: var(--c); border-color: color-mix(in srgb, var(--c) 55%, transparent); }
.selo.morph-info { color: var(--s1); }
.parte-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.morfada { color: var(--s1); cursor: help; }
.partes-det summary { cursor: pointer; font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }
.anuncio-rodape { margin-top: auto; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--ring); padding-top: 8px; }
.preco-grande { font-weight: 700; font-size: 18px; } .preco-sub { font-size: 12.5px; color: var(--ink-2); }
.anuncio-rodape button.alugar { margin-top: 2px; }
#f-total { margin-left: auto; }
.parte-nome { white-space: nowrap; } /* o ↺ nao pula para a linha de baixo, longe do nome */
.parte-orig { display: block; font-size: 11px; color: var(--muted); margin-left: 12px; line-height: 1.2; }
.morfada { cursor: default; }
/* partes do card do aluguel: 2 colunas de celulas (rotulo em cima); nome longo termina em ... em vez de vazar */
.partes-aluga { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 12px; }
.parte-cel { min-width: 0; } .parte-rot { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); line-height: 1.2; }
.parte-aluga { display: block; min-width: 0; }
.parte-nome { display: block; overflow: hidden; text-overflow: ellipsis; }
.parte-orig { margin-left: 12px; overflow-wrap: anywhere; }
/* filtro por partes: exemplo + 6 seletores com o catalogo inteiro */
.fp-exemplo { margin-top: 0; } .fp-ajuda { margin: 4px 0 6px; }
.fp-partes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.fp-partes label { display: grid; gap: 2px; min-width: 0; } .fp-partes select { width: 100%; max-width: none; }
@media (max-width: 900px) { .fp-partes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.filtro-partes { display: block; border: 1px solid var(--ring); border-radius: 10px; padding: 10px; }
.filtro-partes[hidden] { display: none; }
.fp-partes input { width: 100%; box-sizing: border-box; } .fp-partes input.invalido { border-color: var(--warn); }
/* seletor de parte com busca (filtro por partes) */
.fp-campo { display: grid; gap: 2px; min-width: 0; }
.combo { position: relative; min-width: 0; }
.combo-bt { width: 100%; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 22px; position: relative; color: var(--ink-2); }
.combo-bt.com-valor { color: var(--ink); font-weight: 600; }
.combo-bt::after { content: "▾"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.combo-pop { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; width: max(100%, 240px); background: var(--surface); border: 1px solid var(--ring); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.35); padding: 6px; }
.combo-busca { width: 100%; box-sizing: border-box; margin-bottom: 6px; }
.combo-lista { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow-y: auto; }
.combo-lista li { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.combo-lista li.ativo { background: color-mix(in srgb, var(--s1) 22%, transparent); }
.combo-lista li.escolhido .combo-nome { font-weight: 700; }
.combo-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-classe { font-size: 11px; color: var(--muted); }
.combo-vazio { color: var(--muted); cursor: default !important; }
/* dialogo Meu perfil (aberto pelo login no topo de qualquer pagina) */
.perfil-bt { font-weight: 600; }
dialog#dlg-perfil { width: min(460px, 94vw); padding: 16px; border: 1px solid var(--ring); border-radius: 12px; background: var(--surface); color: var(--ink); }
dialog#dlg-perfil h2 { margin: 0 0 2px; font-size: 16px; } dialog#dlg-perfil h3 { margin: 0 0 6px; font-size: 13px; }
.perfil-secao { border-top: 1px solid var(--ring); margin-top: 12px; padding-top: 10px; display: grid; gap: 6px; }
.perfil-secao label { display: grid; gap: 2px; } .perfil-secao input[type=password] { width: 100%; box-sizing: border-box; }
.perfil-avisos label { display: block; } .perfil-secao button { justify-self: start; }
dialog#dlg-perfil > button { margin-top: 14px; }

/* paginador (ranking e partidas do painel) e abas do painel do jogador */
.paginador { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 10px; }
.paginador button.atual { background: var(--s1); border-color: var(--s1); color: #fff; }
.paginador button[disabled] { opacity: .35; cursor: default; }
.paginador .pag-info { margin-left: 8px; }
.pag-linha { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.pag-linha label { margin-top: 10px; display: inline-flex; gap: 6px; align-items: center; }
#ir-pos { width: 90px; }
tr.destaque td { background: color-mix(in srgb, var(--warn) 22%, transparent); }
tr.destaque td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.abas { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--grid); margin-bottom: 14px; }
.abas button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--ink-2); padding: 8px 12px; cursor: pointer; }
.abas button:hover { color: var(--ink); }
.abas button[aria-selected=true] { color: var(--ink); border-bottom-color: var(--s1); font-weight: 600; }
/* filtros dentro de uma aba: o seletor encolhe em vez de sair da tela no celular */
[role=tabpanel] .barra label { max-width: 100%; min-width: 0; }
[role=tabpanel] .barra select { min-width: 0; max-width: 100%; flex: 0 1 auto; }

/* partidas do painel do jogador em tela estreita (janela reduzida, celular): cada partida vira um cartao em vez de uma
   linha de 7 colunas que saia da tela. 1: quando, resultado, vstar e replay · 2: time · 3: contra · 4: time do oponente */
@media (max-width: 1150px) {
  .tab-partidas thead { display: none; }
  .tab-partidas, .tab-partidas tbody, .tab-partidas tr.det, .tab-partidas tr.det > td { display: block; }
  .tab-partidas tr.clicavel { display: grid; grid-template-columns: auto auto 1fr auto; column-gap: 14px; row-gap: 2px; align-items: center;
    grid-template-areas: "quando res vstar rep" "time time time time" "op op op op" "opt opt opt opt"; border-bottom: 1px solid var(--grid); padding: 8px 0; }
  .tab-partidas tr.clicavel > td { border-bottom: 0; padding: 2px 6px; min-width: 0; }
  .tab-partidas td.p-quando { grid-area: quando; color: var(--ink-2); } .tab-partidas td.p-res { grid-area: res; font-weight: 700; }
  .tab-partidas td.p-vstar { grid-area: vstar; text-align: left; } .tab-partidas td.p-rep { grid-area: rep; }
  .tab-partidas td.p-time { grid-area: time; } .tab-partidas td.p-op { grid-area: op; } .tab-partidas td.p-opt { grid-area: opt; }
  .tab-partidas td.p-op > div { display: inline; } .tab-partidas td.p-op > div:first-child::before { content: "vs "; color: var(--muted); }
  .tab-partidas td.p-op > div + div::before { content: " · "; }
}

/* administracao em abas: contador de pendencias, lista de usuarios com selos, painel de detalhe e barras da cota */
.cont { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; border-radius: 9px; background: var(--bad); color: #fff; font-size: 11px; font-weight: 700; padding: 0 5px; margin-left: 5px; vertical-align: middle; }
.selo-adm { border-color: var(--warn); color: var(--warn); } .selo-ok { border-color: #5865f2; color: #8f99ff; }
.selo-sem { border-color: var(--warn); color: var(--warn); } .selo-ruim { border-color: var(--bad); color: var(--bad); } .selo-vazio { color: var(--muted); }
.adm-lista .selo { margin: 1px 3px 1px 0; }
.adm-lista th { text-align: left; color: var(--muted); font-weight: 500; font-size: 12px; padding: 6px 8px; }
.adm-lista td { vertical-align: middle; }
.adm-lista tr.sel td { background: color-mix(in srgb, var(--s1) 12%, transparent); }
.adm-duo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: 14px; align-items: start; margin-top: 8px; }
.adm-duo:has(> .adm-det[hidden]) { grid-template-columns: minmax(0, 1fr); }
.adm-det { border: 1px solid var(--ring); border-radius: 10px; padding: 12px; background: var(--page); }
.det-topo { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; } .det-topo h3 { margin: 0; font-size: 16px; } .esp { flex: 1; }
.det-bloco { margin-top: 12px; border-top: 1px solid var(--grid); padding-top: 10px; }
.det-rot { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.det-acoes { margin: 14px 0 0; }
.chave { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 5px 0; }
.chave small { display: block; color: var(--muted); font-size: 12px; }
button.liga { flex: none; width: 38px; height: 21px; padding: 0; border-radius: 11px; border: 0; background: var(--axis); position: relative; cursor: pointer; }
button.liga::after { content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: var(--surface); transition: left .15s; }
button.liga[aria-checked=true] { background: var(--s1); } button.liga[aria-checked=true]::after { left: 19px; background: #fff; }
button.primario { background: var(--s1); border-color: var(--s1); color: #fff; } button.perigo { color: var(--bad); }
.medidor { margin-top: 10px; max-width: 640px; } .med-linha { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.trilho { height: 9px; background: var(--grid); border-radius: 5px; margin-top: 3px; overflow: hidden; } .trilho i { display: block; height: 100%; }
.med-fundo-ok { background: var(--s1); } .med-fundo-alto { background: var(--warn); } .med-fundo-critico { background: var(--bad); }
.med-alto { color: var(--warn); font-weight: 600; } .med-critico { color: var(--bad); font-weight: 600; }
@media (max-width: 1000px) { .adm-duo { grid-template-columns: minmax(0, 1fr); } }

/* faixa "Conecte seu Discord" logo abaixo do menu */
.faixa-discord { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: color-mix(in srgb, #5865f2 16%, transparent); border: 1px solid #5865f2; border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; }
.faixa-discord > div { flex: 1 1 260px; min-width: 0; }
#regras .chave { max-width: 760px; }

/* aba Sistema: alertas ativos e chaves dos alertas */
.alerta-ativo { border-left: 4px solid var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); border-radius: 6px; padding: 7px 10px; margin-top: 6px; }
#alertas-cfg .chave { max-width: 760px; } #alertas-cfg small input { margin: 0 4px; }

/* grafico de chamadas por hora (aba Sistema): uma serie, grade discreta, texto na cor de texto */
.consumo-grafico { max-width: 900px; margin-top: 6px; } .consumo-grafico svg { width: 100%; height: auto; display: block; }
.consumo-grafico text { font-size: 11px; fill: var(--muted); } .consumo-grafico .grade { stroke: var(--grid); } .consumo-grafico .eixo { stroke: var(--axis); }
.consumo-grafico .barra { fill: var(--s1); } .consumo-grafico .barra.com-recusa { fill: var(--bad); }
.consumo-grafico .alvo { fill: transparent; } .consumo-grafico .alvo:hover { fill: color-mix(in srgb, var(--ink) 6%, transparent); }
.consumo-tipos { max-width: 560px; margin-top: 6px; } .consumo-tipos td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* snipe: linhas mais baixas. O nome da composicao fica embaixo do nome do jogador e os Axies um pouco menores */
#lista td { padding-top: 2px; padding-bottom: 2px; }
#lista td.c-nome .comp { margin-top: 1px; }
@media (min-width: 1201px) { #lista img.ax-s, #lista span.starter.ax-s { width: 74px; height: 58px; } }
@media (max-width: 700px) { #lista td.c-nome .comp { flex-basis: 100%; } }

/* historico do snipe empilhado, numa coluna de largura fixa: o bloco da ultima partida em cima e, embaixo, 5 casas
   iguais para a forma (casa sem partida fica vazia); o selo de sequencia vai embaixo, na mesma largura. No celular
   (cartao) continua tudo numa linha so. */
@media (min-width: 701px) {
  #lista td.c-hist { width: 186px; }
  .hist { flex-direction: column; align-items: flex-start; gap: 3px; }
  .hist .pilha { display: flex; flex-direction: column; gap: 3px; width: 170px; }
  .hist .pilha .ult { justify-content: space-between; padding: 2px 8px; }
  .hist .pilha .ult .ht { margin-left: auto; }
  .hist .pilha .forma { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .hist .pilha .forma .q { width: auto; }
  .hist .seq { width: 170px; text-align: center; padding: 0 8px; }
}
@media (max-width: 700px) { .hist .pilha { display: contents; } }

/* snipe em janela media (701 a 1200 px): Axies um pouco menores, nome do jogador numa linha so (corta com reticencias)
   e a coluna do historico mais justa, para a coluna Contra nao ficar espremida */
@media (min-width: 701px) and (max-width: 1200px) {
  #lista img.ax-s, #lista span.starter.ax-s { width: 60px; height: 48px; }
  #lista .axw { padding-left: 22px; }
  #lista td.c-nome { max-width: 150px; }
  #lista td.c-nome button.link { display: inline-block; vertical-align: bottom; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* na linha da propria conta o nome cede espaco para a etiqueta "você" ficar ao lado (senao ela descia de linha) */
  #lista td.c-nome:has(.voce) button.link { max-width: calc(100% - 40px); }
  #lista td.c-hist { width: 160px; } .hist .pilha, .hist .seq { width: 150px; }
  #lista td.c-op { width: 170px; max-width: 170px; }
}

/* ranking: linha baixa como no snipe; rank, vstar e diferenca juntos a direita (a coluna do time fica com a sobra) */
.tab-ranking td { padding-top: 3px; padding-bottom: 3px; }
.tab-ranking th:nth-child(n+5), .tab-ranking td:nth-child(n+5) { width: 1%; white-space: nowrap; padding-left: 22px; }
.tab-ranking td.time-rk { min-width: 0; width: auto; }

/* ranking no celular: cada jogador vira um cartao (antes a tabela rolava para o lado e o time ficava fora da tela).
   1: estrela, posicao, nome e vstar · 2: time e a diferenca para voce. O rank fica so no filtro. */
@media (max-width: 700px) {
  .tab-ranking thead { display: none; }
  .tab-ranking, .tab-ranking tbody { display: block; }
  .tab-ranking tr { display: grid; grid-template-columns: auto auto 1fr auto; column-gap: 6px; align-items: center;
    grid-template-areas: "est pos nome vstar" "time time time dif"; border-bottom: 1px solid var(--grid); padding: 6px 0; }
  .tab-ranking tr > td { border-bottom: 0; padding: 2px 6px; min-width: 0; width: auto; }
  .tab-ranking td.r-est { grid-area: est; } .tab-ranking td.r-pos { grid-area: pos; } .tab-ranking td.r-nome { grid-area: nome; }
  .tab-ranking td.r-vstar { grid-area: vstar; font-weight: 600; } .tab-ranking td.time-rk { grid-area: time; } .tab-ranking td.r-dif { grid-area: dif; }
  .tab-ranking td.r-rank { display: none; }
  .tab-ranking td.r-nome button.link { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tab-ranking td[colspan] { grid-column: 1 / -1; }
  /* alvo e sua conta: o fundo vai no cartao inteiro (por celula ficavam buracos entre as areas) */
  .tab-ranking tr.alvo { background: color-mix(in srgb, #8b7cf6 14%, transparent); } .tab-ranking tr.alvo td, .tab-ranking tr.eu td { background: none; }
  .tab-ranking tr.eu { background: color-mix(in srgb, var(--s1) 10%, transparent); box-shadow: inset 3px 0 0 var(--s1); } .tab-ranking tr.eu td:first-child { box-shadow: none; }
}

/* composicoes: icones das runas na lista e as variacoes no painel de detalhe */
.runas-ico { display: inline-flex; gap: 3px; vertical-align: middle; } .runas-ico img.ico-p { width: 22px; height: 22px; }
.variacao { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; padding: 7px 0; border-top: 1px solid var(--grid); }
.variacao:first-of-type { border-top: 0; } .variacao-txt { display: inline-flex; gap: 8px; align-items: center; min-width: 0; }
.variacao-acoes { display: inline-flex; gap: 10px; align-items: center; }
.adm-det .det-topo { align-items: center; }

/* janela do jogador: abre ja no tamanho final e mostra o esqueleto do conteudo enquanto carrega */
dialog#dlg-jogador { height: 92vh; }
.esq { background: color-mix(in srgb, var(--ink) 9%, transparent); border-radius: 6px; animation: esq-pulso 1.2s ease-in-out infinite; }
.esq-titulo { width: 160px; height: 18px; margin-bottom: 12px; } .esq-tile { height: 62px; }
.esq-abas { display: flex; gap: 10px; margin: 2px 0 14px; } .esq-aba { width: 110px; height: 28px; }
.esq-linha { height: 58px; margin-top: 8px; }
@keyframes esq-pulso { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .esq { animation: none; } }

/* dialogo de alugar: modos (por era / periodo livre), calendario e resumo com o total */
dialog#dlg-alugar { width: min(560px, 94vw); max-height: 94vh; overflow-y: auto; }
.al-modos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.al-modos button[aria-pressed=true] { background: var(--s1); border-color: var(--s1); color: #fff; font-weight: 600; }
.al-livre input { width: 80px; margin-left: 6px; } .al-livre .sub { margin-top: 4px; }
.cal { border: 1px solid var(--ring); border-radius: 10px; padding: 10px; margin-top: 10px; }
.cal-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-weight: 600; text-transform: capitalize; }
.cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal-sem { font-size: 11px; color: var(--muted); padding: 2px 0; }
button.cal-dia { border: 1px solid transparent; border-radius: 6px; background: none; color: var(--ink); padding: 5px 0; font-size: 12.5px; cursor: default; }
button.cal-dia.clicavel { cursor: pointer; } button.cal-dia.clicavel:hover { border-color: var(--s1); }
button.cal-dia.passado { color: var(--axis); }
button.cal-dia.ocupado { background: color-mix(in srgb, var(--bad) 18%, transparent); color: var(--bad); text-decoration: line-through; }
button.cal-dia.hoje { border-color: var(--axis); }
button.cal-dia.sel { background: color-mix(in srgb, var(--s1) 28%, transparent); }
button.cal-dia.sel.ocupado { background: color-mix(in srgb, var(--bad) 40%, transparent); color: #fff; }
button.cal-dia.ini, button.cal-dia.fim { background: var(--s1); color: #fff; font-weight: 700; }
.cal-leg { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); margin-top: 8px; }
.cal-leg i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.cal-l-sel { background: var(--s1); } .cal-l-ocup { background: color-mix(in srgb, var(--bad) 45%, transparent); }
#al-total.al-total { border: 1px solid var(--ring); border-radius: 10px; padding: 8px 12px; margin-top: 10px; font-weight: 400; background: var(--page); }
#al-total > div { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; color: var(--ink-2); }
#al-total > div > span:last-child { text-align: right; }
#al-total .al-tot { border-top: 1px solid var(--grid); margin-top: 6px; padding-top: 8px; font-size: 16px; font-weight: 700; color: var(--ink); }
#al-total .erro { display: block; color: var(--bad); }
.livre-campos { display: inline-flex; gap: 10px; flex-wrap: wrap; }

/* Meta: selo de tier e o "+N" de quem mais joga */
.tier { display: inline-block; min-width: 22px; padding: 1px 6px; border-radius: 6px; text-align: center; font-weight: 700; font-size: 12.5px; border: 1px solid transparent; }
.tier-S { background: color-mix(in srgb, #e6a700 26%, transparent); border-color: color-mix(in srgb, #e6a700 60%, transparent); }
.tier-A { background: color-mix(in srgb, var(--good) 22%, transparent); border-color: color-mix(in srgb, var(--good) 55%, transparent); }
.tier-B { background: color-mix(in srgb, var(--s1) 20%, transparent); border-color: color-mix(in srgb, var(--s1) 50%, transparent); }
.tier-C { border-color: var(--ring); color: var(--muted); }
button.mais-n { border: 1px solid var(--ring); border-radius: 999px; background: none; color: var(--ink-2); padding: 0 7px; font-size: 11.5px; cursor: pointer; }
button.mais-n:hover { color: var(--ink); border-color: var(--s1); }

/* segunda fila de abas (as da pagina), abaixo das abas da Administracao */
.abas + .sub-abas { margin-top: -6px; } .abas[hidden] + .sub-abas { margin-top: 0; }

/* Sistema: atraso da captura */
.captura-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 8px 0; }
.captura-num { border: 1px solid var(--ring); border-radius: 10px; padding: 8px 12px; } .captura-num b { display: block; font-size: 18px; margin: 2px 0; }
.captura-horas td, .captura-horas th { padding: 4px 8px; }

/* menu de cima recolhido no celular: titulo, botao com a pagina atual e o login; os links abrem em coluna */
.menu-bt { display: none; }
@media (max-width: 640px) {
  nav { gap: 8px 12px; align-items: center; }
  nav .menu-bt { display: inline-block; padding: 4px 10px; font-weight: 600; }
  nav > a { display: none; }
  nav.aberto > a { display: block; order: 5; flex-basis: 100%; padding: 8px 4px; border-top: 1px solid var(--grid); }
  nav #status { order: 6; flex-basis: 100%; }
}

/* snipe em janela de 701 a 945 px: a tabela nao cabia (as linhas vazavam do cartao). A coluna Contra sai e o oponente
   vira uma linha curta embaixo do historico; abaixo de 800 px os Axies e o nome encolhem mais um pouco */
@media (min-width: 701px) and (max-width: 945px) {
  #lista thead th:last-child, #lista td.c-op { display: none; }
  #lista td.c-hist[data-op]::after { content: attr(data-op); display: block; width: 150px; margin-top: 2px; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (min-width: 701px) and (max-width: 800px) {
  #lista img.ax-s, #lista span.starter.ax-s { width: 50px; height: 40px; }
  #lista .axw { padding-left: 18px; }
  #lista td.c-nome { max-width: 112px; }
}

/* historico do snipe: embaixo do bloco da ultima partida, 3 quadros iguais (as 3 anteriores) com a letra a esquerda
   e a idade a direita; no celular (tudo numa linha) cada quadro tem a largura do proprio texto */
.hist .forma .q { width: auto; padding: 0 6px; gap: 5px; justify-content: space-between; font-size: 11.5px; }
.hist .q .qt { font-style: normal; font-weight: 500; font-size: 11px; opacity: .92; font-variant-numeric: tabular-nums; }
@media (min-width: 701px) { .hist .pilha .forma { grid-template-columns: repeat(3, 1fr); } .hist .pilha .forma .q { padding: 0 7px; } }

/* perfil: carteiras (dialogo mais largo e com rolagem) */
dialog#dlg-perfil { width: min(560px, 94vw); max-height: 92vh; overflow-y: auto; }
.perfil-cart-acoes { margin-top: 8px; } .perfil-cart-acoes label { flex: 1 1 220px; } .perfil-cart-acoes input { flex: 1; min-width: 0; }
.perfil-secao .c-msg textarea { width: 100%; }
/* Meus anuncios: Axies no tamanho padrao das listas (o do snipe), sem quadro de fundo */
.pub-imgs img.ax-p { width: 74px; height: 58px; }
.esc-card img.ax-p { width: 74px; height: 58px; }
.lutadores-escolha { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
@media (max-width: 700px) { .pub-imgs img.ax-p, .esc-card img.ax-p { width: 60px; height: 47px; } }

/* Meus anuncios > Publicados: com os Axies no tamanho padrao, as imagens vao em cima e o texto embaixo, na largura toda */
.pub { grid-template-columns: 1fr; } .pub-imgs { gap: 4px; }
.carteira { flex-wrap: wrap; }
/* enquanto o desenho nao chega, a imagem do NFT e ampliada como no snipe (o Axie ocupa so ~55% dela) */
.pub-imgs img:not(.morph), .esc-card img.ax-p:not(.morph) { transform: translateY(4%) scale(1.6); }

/* premium: marca no menu das paginas do plano pago, pagina do premium e campo-armadilha do cadastro */
nav a.so-premium::after { content: '★'; font-size: 10px; margin-left: 3px; color: var(--warn); vertical-align: super; }
.pag-premium > :not(nav) { max-width: 860px; margin-left: auto; margin-right: auto; }
.pm-aviso { border-color: var(--warn); }
.pm-situacao h2 { margin: 0 0 4px; } .pm-situacao p { margin: 0; } .pm-situacao.pm-ativo { border-color: var(--good); }
.pm-planos { width: 100%; } .pm-planos th, .pm-planos td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--grid); } .pm-planos td:first-child { width: 60%; }
.pm-passos { padding-left: 20px; display: grid; gap: 8px; }
.pm-endereco { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; } .pm-endereco code { font-size: 14px; word-break: break-all; padding: 6px 8px; border: 1px solid var(--ring); border-radius: 6px; }
.pm-codigo { margin-top: 10px; } .pm-codigo input { min-width: min(520px, 80vw); }
.armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#pm-cfg { margin-bottom: 8px; }

/* ---------- montador de times (/times): time a esquerda, um Axie aberto no meio, resultado fixo a direita ---------- */
a.botao { display: inline-block; text-align: center; text-decoration: none; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--ring); color: var(--ink); } a.botao.primario { background: var(--s1); border-color: var(--s1); color: #fff; }
.tm-grade { display: grid; grid-template-columns: 240px minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.tm-dir { position: sticky; top: 10px; }
.tm-mini { display: grid; grid-template-columns: 62px 1fr; gap: 8px; align-items: center; width: 100%; text-align: left; padding: 8px; margin-bottom: 8px; border: 1px solid var(--ring); border-radius: 9px; background: var(--surface); cursor: pointer; }
.tm-mini.sel, .tm-parte.sel, .tm-op.sel, .tm-item.sel { outline: 2px solid var(--s1); outline-offset: -1px; }
.tm-mini small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 400; }
.tm-desenho { display: grid; place-items: center; border-radius: 8px; background: color-mix(in srgb, var(--ink) 6%, transparent); text-align: center; font-size: 11px; } .tm-desenho img { width: 100%; height: 100%; object-fit: contain; }
.tm-desenho.p { width: 62px; height: 50px; } .tm-desenho.g { width: 200px; height: 162px; font-size: 12.5px; }
.tm-itens h2 { font-size: 14px; margin: 0 0 6px; } .tm-item { display: grid; grid-template-columns: 1fr; gap: 0; width: 100%; text-align: left; padding: 5px 8px; margin-bottom: 4px; border: 1px solid var(--ring); border-radius: 7px; background: none; cursor: pointer; }
.tm-item small { color: var(--muted); font-size: 11px; } .tm-item span { font-size: 13px; }
.tm-editor { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 14px; align-items: start; } .tm-lado { display: grid; gap: 8px; } .tm-lado label { display: grid; gap: 2px; font-size: 12px; color: var(--ink-2); } .tm-lado select { width: 100%; }
.tm-parte { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; margin-bottom: 5px; border: 1px solid var(--ring); border-left: 3px solid var(--ring); border-radius: 7px; background: var(--surface); cursor: pointer; }
.tm-parte small { color: var(--muted); font-size: 11.5px; } .tm-parte > div > small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tm-parte b { font-size: 13.5px; }
.tm-cl { font-size: 11px; color: var(--ink-2); border: 1px solid var(--ring); border-radius: 999px; padding: 0 6px; } .tm-n { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--ink-2); white-space: nowrap; text-align: right; }
.tm-evo { display: block; margin: 3px 0 0 auto; font-size: 11px; padding: 0 6px; border-radius: 999px; } .tm-evo.on { border-color: var(--warn); color: var(--warn); }
.tm-opcoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; max-height: 420px; overflow-y: auto; padding: 2px; }
.tm-op { display: grid; gap: 1px; text-align: left; padding: 6px 8px; border: 1px solid var(--ring); border-left: 3px solid var(--ring); border-radius: 7px; background: var(--surface); cursor: pointer; font-size: 12px; }
.tm-op b { font-size: 13px; } .tm-op small { color: var(--muted); } .tm-op .tm-n { text-align: left; } .tm-ponto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.tm-uso { font-size: 11px; color: var(--warn); } .tm-premium { border: 1px solid var(--warn); border-radius: 8px; padding: 8px 10px; margin-top: 10px; font-size: 13px; grid-column: 1 / -1; } .tm-premium > b { color: var(--warn); }
.tm-vs { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; margin: 6px 0; }
#tm-baralho h2, #tm-comp h2 { font-size: 14px; margin: 0 0 6px; } .tm-linha { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--grid); font-size: 13px; }
.tm-curva { display: flex; align-items: flex-end; gap: 6px; height: 60px; margin: 20px 0 2px; } .tm-curva div { flex: 1; background: var(--s1); border-radius: 3px 3px 0 0; position: relative; } .tm-curva div span { position: absolute; top: -17px; left: 0; right: 0; text-align: center; font-size: 11px; }
.tm-curva-rot { display: flex; gap: 6px; font-size: 11px; color: var(--muted); margin-bottom: 6px; } .tm-curva-rot span { flex: 1; text-align: center; }
@media (max-width: 1100px) { .tm-grade { grid-template-columns: 220px minmax(0, 1fr); } .tm-dir { grid-column: 1 / -1; position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } }
@media (max-width: 700px) { .tm-grade, .tm-dir, .tm-editor { grid-template-columns: 1fr; } #tm-minis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .tm-mini { grid-template-columns: 1fr; margin: 0; } .tm-mini .tm-desenho.p { width: 100%; } .tm-desenho.g { width: 100%; } .tm-parte { grid-template-columns: 50px minmax(0, 1fr); } .tm-parte .tm-n { grid-column: 2; text-align: left; } }
/* ---------- Axie Finder (/axies): filtros a esquerda, Axies do mercado a direita ---------- */
.fd-grade { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; align-items: start; }
.fd-filtros { display: grid; gap: 12px; } .fd-filtros h3 { margin: 0 0 6px; font-size: 13px; } .fd-filtros > label { display: grid; gap: 3px; font-size: 12px; color: var(--ink-2); } .fd-filtros input[type=text] { width: 100%; box-sizing: border-box; }
.fd-chips { display: flex; flex-wrap: wrap; gap: 5px; } .fd-chips button { border-radius: 999px; padding: 2px 10px; font-size: 12px; } .fd-chips button[aria-pressed=true] { background: var(--s1); border-color: var(--s1); color: #fff; }
.fd-partes { display: grid; gap: 5px; } .fd-partes select { width: 100%; } .fd-faixas { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .fd-faixas label { display: grid; gap: 2px; font-size: 12px; color: var(--ink-2); } .fd-faixas input { width: 100%; box-sizing: border-box; }
.fd-topo b { font-size: 16px; }
.fd-axies { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.fd-ax { display: grid; gap: 5px; align-content: start; padding: 9px; border: 1px solid var(--ring); border-top: 3px solid var(--ring); border-radius: 9px; background: var(--surface); font-size: 12.5px; }
.fd-img { width: 100%; height: 130px; object-fit: contain; } .fd-tit { display: flex; justify-content: space-between; align-items: center; font-weight: 700; } .fd-cl { font-size: 12px; } .fd-nm { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-pts { display: flex; flex-wrap: wrap; gap: 3px; } .fd-pts span { border: 1px solid var(--ring); border-radius: 5px; padding: 0 5px; font-size: 11.5px; } .fd-preco { font-weight: 700; font-size: 14px; }
.fd-selo { border-radius: 6px; padding: 3px 7px; font-size: 11.5px; font-weight: 600; text-decoration: none; } .fd-aluga { background: color-mix(in srgb, var(--good) 20%, transparent); color: var(--good); border: 1px solid var(--good); } .fd-joga { border: 1px solid var(--warn); color: var(--warn); }
@media (max-width: 800px) { .fd-grade { grid-template-columns: 1fr; } }
.fd-morph { display: block; margin-top: 6px; font-size: 12px; } .fd-h2 { font-size: 16px; margin: 22px 0 4px; } .fd-morfa { border: 1px solid var(--s1); color: var(--s1); }
.fd-parte { display: grid; gap: 3px; } .fd-tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .fd-tags button { border-radius: 999px; padding: 1px 8px; font-size: 11.5px; background: var(--s1); border-color: var(--s1); color: #fff; }

/* idioma: no menu (junto do login) e, nas telas sem menu (entrar, cadastro), no canto de cima */
nav .quem select.idioma { font-size: 12px; padding: 2px 4px; }
.idioma-solto { position: fixed; top: 10px; right: 12px; z-index: 5; }
.idioma-solto select { font-size: 13px; }

/* alertas do mercado no Axie Finder */
.fd-alertas { margin: 12px 0; display: flex; flex-direction: column; gap: 8px; }
.fd-alertas h3 { margin: 0; }
.fd-al-novo label { display: inline-flex; gap: 6px; align-items: center; }
.fd-al-novo input { width: 140px; }
.fd-al-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border-top: 1px solid var(--ring); }

/* snipe: ritmo do jogador (espera media, duracao media e previsao da fila) embaixo do historico */
.hist .ritmo { margin-top: 3px; font-size: 12px; color: var(--muted); line-height: 1.5; max-width: 200px; } /* a pilula cai para a linha de baixo em vez de alargar a coluna */
.hist .prox { display: inline-block; margin-left: 6px; border: 1px solid color-mix(in srgb, var(--ativo) 60%, transparent); color: var(--ativo); border-radius: 10px; padding: 0 7px; font-size: 11px; white-space: nowrap; }
.hist .prox.partida { border-color: color-mix(in srgb, var(--s1) 60%, transparent); color: var(--s1); }
.hist .prox.passou { border-color: color-mix(in srgb, var(--warn) 60%, transparent); color: var(--warn); }

/* snipe: coluna do nome com largura FIXA (um nome comprido nao redimensiona a coluna: corta com reticencias e o nome
   inteiro fica na dica). A largura vai no botao, em px: em tabela automatica, max-width em % no td nao segura a coluna */
@media (min-width: 701px) {
  #lista td.c-nome { width: 190px; max-width: 190px; }
  #lista td.c-nome button.link { display: inline-block; vertical-align: bottom; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #lista td.c-nome:has(.voce) button.link { max-width: 150px; }
  #lista td.c-nome .comp { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (min-width: 701px) and (max-width: 1200px) {
  #lista td.c-nome { width: 150px; max-width: 150px; }
  #lista td.c-nome button.link, #lista td.c-nome .comp { max-width: 150px; }
  #lista td.c-nome:has(.voce) button.link { max-width: 110px; }
}
@media (min-width: 701px) and (max-width: 800px) {
  #lista td.c-nome { width: 112px; max-width: 112px; }
  #lista td.c-nome button.link, #lista td.c-nome .comp { max-width: 112px; }
  #lista td.c-nome:has(.voce) button.link { max-width: 72px; }
}
/* o historico e todo nowrap; a linha do ritmo pode quebrar (a pilula desce em vez de sair do cartao) */
.hist .ritmo { white-space: normal; }

/* snipe: a pilula da previsao fica sempre numa linha propria, embaixo das medias */
.hist .prox { display: block; width: fit-content; margin: 2px 0 0; }
/* snipe: Axies ~20% maiores em cada faixa de largura (eram 74x58, 60x48, 50x40 e 66x52 no celular) */
@media (min-width: 1201px) { #lista img.ax-s, #lista span.starter.ax-s { width: 90px; height: 71px; } }
@media (min-width: 701px) and (max-width: 1200px) { #lista img.ax-s, #lista span.starter.ax-s { width: 72px; height: 57px; } }
@media (min-width: 701px) and (max-width: 800px) { #lista img.ax-s, #lista span.starter.ax-s { width: 60px; height: 47px; } }
@media (max-width: 700px) { #lista img.ax-s, #lista span.starter.ax-s { width: 78px; height: 62px; } }
/* as medias numa linha so; a pilula fica na linha de baixo (.prox display: block), entao nada alarga a coluna */
.hist .ritmo { white-space: nowrap; max-width: none; }
/* janela media e estreita: os Axies crescem so ~10% (com ~20% a tabela passava do cartao a 1000 e a 760 px) */
@media (min-width: 701px) and (max-width: 1200px) { #lista img.ax-s, #lista span.starter.ax-s { width: 66px; height: 52px; } }
@media (min-width: 701px) and (max-width: 800px) { #lista img.ax-s, #lista span.starter.ax-s { width: 55px; height: 43px; } }
/* janela media e estreita: as medias so com icone e numero ("⏳ 0m47 · ⏱ 4m28"); por extenso a tabela passava do cartao */
@media (min-width: 701px) and (max-width: 1200px) { .hist .rt-rot { display: none; } }
/* coluna Contra fica com o espaco que sobra (max-width 0 + width 100%): sem isso a celula crescia ate o texto inteiro e
   empurrava a tabela para fora do cartao (a 946 px ja passava 10 px antes de os Axies crescerem) */
@media (min-width: 946px) { #lista td.c-op { width: 100%; max-width: 0; } }
/* na borda de baixo de cada faixa os Axies crescem menos (medido: a 701 e a 801 px a tabela passava do cartao) */
@media (min-width: 701px) and (max-width: 760px) { #lista img.ax-s, #lista span.starter.ax-s { width: 50px; height: 40px; } }
@media (min-width: 801px) and (max-width: 870px) { #lista img.ax-s, #lista span.starter.ax-s { width: 62px; height: 49px; } }
@media (min-width: 701px) and (max-width: 720px) { #lista img.ax-s, #lista span.starter.ax-s { width: 46px; height: 37px; } }

/* snipe em tela larga: largura maxima do conteudo (a 1920 px a tabela esticava com buracos; o olho atravessava a tela do
   nome ao historico) e colunas em proporcao: antes a coluna Contra ficava com toda a sobra (724 px a 1920) */
main:has(#lista) { max-width: 1500px; }
@media (min-width: 1201px) {
  #lista td.c-time { width: 36%; }
  #lista td.c-time .time { justify-content: space-evenly; }
  #lista td.c-hist { width: 260px; }
  #lista td.c-op { width: 24%; max-width: 0; }
}