/* ===========================================================================
   REAPERS — folha única do site
   ---------------------------------------------------------------------------
   Identidade tirada do brasão da guilda: preto absoluto, plasma roxo, cromo nas
   letras, lâminas nas bordas. Diablo IV dá a atmosfera (luz de cima, escuridão
   fechando nas bordas, grão de filme); Throne and Liberty dá a estrutura de
   item; o sci-fi entra como HUD — monoespaçado e com cantos chanfrados.

   Duas regras que valem para a folha inteira:

     · O gótico mora no SÍMBOLO. A interface é HUD. Se as duas coisas
       disputarem a mesma camada, as duas perdem.
     · Roxo e vermelho não são duas cores soltas: são as pontas de uma rampa
       que passa pelo magenta. Violeta é a guilda; carmim é o que dói.
   =========================================================================== */

:root {
  /* fundo e superfície */
  --vazio:      #060406;
  --laje:       #100a13;
  --laje-alta:  #170e1c;
  --fio:        #35213f;
  --fio-vivo:   #7e22ce;

  /* texto — cromo, não branco; névoa com viés roxo, não cinza puro */
  --cromo:      #cdd1de;
  --cromo-alto: #f4f2f8;
  --nevoa:      #8b7f9a;

  /* a rampa */
  --abissal:    #4c1d95;
  --plasma:     #a855f7;
  --plasma-luz: #d8b4fe;
  --fusao:      #d21fb0;
  --carmim:     #e11d48;
  --carmim-esc: #8b0d2a;

  /* semântica — separada do acento, de propósito */
  --ganho:      #34d399;
  --perda:      #fb4d6a;
  --atencao:    #f0a83c;

  --hud: 'Consolas', 'SF Mono', 'Roboto Mono', 'Courier New', monospace;
  --corpo: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  --num: 'Courier New', 'Consolas', monospace;

  /* O canto cortado é a assinatura da interface. Uma variável só, para o
     chanfro ser idêntico em botão, painel e chip. */
  --chanfro: polygon(12px 0, 100% 0, 100% calc(100% - 12px),
                     calc(100% - 12px) 100%, 0 100%, 0 12px);
  --chanfro-p: polygon(7px 0, 100% 0, 100% calc(100% - 7px),
                       calc(100% - 7px) 100%, 0 100%, 0 7px);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--vazio);
  color: var(--cromo);
  font-family: var(--corpo);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* --- atmosfera: quatro camadas, nenhuma delas clicável --------------------
   Sem o grão, os degradês fazem faixas visíveis no escuro e a tela denuncia
   que é software. */
#particulas { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(52% 40% at 50% -2%, color-mix(in srgb, var(--plasma) 26%, transparent), transparent 70%),
    radial-gradient(40% 34% at 86% 28%, color-mix(in srgb, var(--fusao) 13%, transparent), transparent 72%),
    radial-gradient(46% 40% at 10% 80%, color-mix(in srgb, var(--carmim-esc) 30%, transparent), transparent 74%);
}

body::after {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(125% 90% at 50% 42%, transparent 40%,
              color-mix(in srgb, var(--vazio) 78%, transparent) 88%, var(--vazio) 100%);
}

/* Grão de filme. Não é enfeite: sem ele os degradês fazem faixas visíveis no
   escuro e a tela inteira parece um degradê de software. */
.grao {
  position: fixed; inset: -50%; z-index: 1; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: tremor 700ms steps(2) infinite;
}
@keyframes tremor {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-1.5%, 1.2%); }
  100% { transform: translate(1.1%, -1.4%); }
}

.header, .container { position: relative; z-index: 2; }

/* --- o brasão ------------------------------------------------------------
   O logo é o herói da abertura. Ele já traz o gótico, a caveira e o plasma —
   um título em texto por cima seria dizer duas vezes a mesma coisa. */
.hero { text-align: center; padding: 1.5rem 0 2rem; }
.brasao {
  width: min(clamp(220px, 38vw, 400px), 100%); height: auto;
  margin: 0 auto; display: block;
  filter: drop-shadow(0 0 56px color-mix(in srgb, var(--plasma) 42%, transparent))
          drop-shadow(0 14px 44px color-mix(in srgb, var(--carmim-esc) 50%, transparent));
  animation: respirar 7s ease-in-out infinite;
}
@keyframes respirar {
  0%, 100% { filter: drop-shadow(0 0 50px color-mix(in srgb, var(--plasma) 36%, transparent))
                     drop-shadow(0 14px 42px color-mix(in srgb, var(--carmim-esc) 46%, transparent)); }
  50%      { filter: drop-shadow(0 0 76px color-mix(in srgb, var(--plasma) 60%, transparent))
                     drop-shadow(0 14px 50px color-mix(in srgb, var(--carmim) 32%, transparent)); }
}
.hero .lema {
  font-family: var(--hud); font-size: .66rem; letter-spacing: .42em;
  text-transform: uppercase; margin: .5rem 0 0;
  background: linear-gradient(90deg, var(--plasma-luz), var(--fusao) 55%, var(--carmim));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* --- tipografia ---------------------------------------------------------- */
h1, h2, h3 { font-family: var(--hud); letter-spacing: .2em; text-transform: uppercase;
             font-weight: 600; color: var(--cromo-alto); margin: 0; text-wrap: balance; }
h1 { font-size: 1.35rem; }
h2 { font-size: .95rem; letter-spacing: .24em; }
h3 { font-size: .8rem; letter-spacing: .18em; color: var(--plasma); }

a { color: var(--plasma-luz); text-decoration: none; }
a:hover { color: var(--cromo-alto); }
:focus-visible { outline: 2px solid var(--plasma); outline-offset: 2px; }

.num { font-family: var(--num); font-weight: 900; font-variant-numeric: tabular-nums; }

/* --- cabeçalho ----------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--fio);
  background: color-mix(in srgb, var(--vazio) 86%, transparent);
  backdrop-filter: blur(14px);
  padding: .75rem 1.25rem;
}
.header::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--plasma) 22%, var(--fusao) 52%, var(--carmim) 78%, transparent);
  opacity: .8;
}
.header-content { max-width: 76rem; margin: 0 auto; display: flex;
                  align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.guild-info { display: flex; align-items: center; gap: .8rem; }
.guild-logo { height: 46px; width: auto; flex: none;
              filter: drop-shadow(0 0 12px color-mix(in srgb, var(--plasma) 50%, transparent)); }
.guild-title h1 {
  font-family: Georgia, 'Times New Roman', serif; font-size: 1.45rem;
  font-weight: 700; letter-spacing: .1em; line-height: 1;
  background: linear-gradient(180deg, var(--cromo-alto) 0%, var(--cromo) 42%,
                              #5d5872 56%, var(--cromo-alto) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.guild-subtitle { font-family: var(--hud); font-size: .58rem; letter-spacing: .28em;
                  text-transform: uppercase; color: var(--nevoa); margin-top: .15rem; }

.header-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.eu { font-family: var(--hud); font-size: .62rem; letter-spacing: .12em;
      text-transform: uppercase; color: var(--nevoa); text-align: right; line-height: 1.35; }
.eu b { display: block; font-size: .78rem; color: var(--cromo-alto); letter-spacing: .06em; }

/* --- navegação ----------------------------------------------------------- */
.container { max-width: 76rem; margin: 0 auto; padding: 1.5rem 1.25rem 5rem; }

.nav-links {
  display: flex; gap: .3rem; flex-wrap: wrap; align-items: center;
  margin-bottom: 1.6rem; padding-bottom: .9rem;
  border-bottom: 1px solid var(--fio);
}
.nav-links a {
  /* Letra de texto, grossa e clara — não a monoespaçada do HUD. A staff
     reclamou (13/09) que o menu em Consolas miúda e cinza não dava para ler;
     o resto da identidade (maiúsculas, chanfro, cores) continua. */
  font-family: var(--corpo); font-size: .8rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--cromo);
  padding: .45rem .8rem; border: 1px solid transparent;
  clip-path: var(--chanfro-p); white-space: nowrap;
  transition: color .16s, border-color .16s, background .16s;
}
.nav-links a:hover { color: var(--plasma-luz); border-color: var(--fio-vivo);
                     background: color-mix(in srgb, var(--plasma) 10%, transparent); }
.nav-links a.active { color: var(--cromo-alto); border-color: var(--plasma);
                      background: color-mix(in srgb, var(--plasma) 18%, transparent);
                      box-shadow: 0 0 16px color-mix(in srgb, var(--plasma) 25%, transparent); }
/* As abas de administração mais usadas, cada uma com a sua cor (13/09). A cor
   vale sempre — não só na aba aberta — porque é ela que a staff procura no
   meio da lista. */
.nav-links a.nav-cor {
  color: var(--cor-nav); font-weight: 700;
  border-color: color-mix(in srgb, var(--cor-nav) 45%, transparent);
  background: color-mix(in srgb, var(--cor-nav) 8%, transparent);
}
.nav-links a.nav-cor:hover, .nav-links a.nav-cor.active {
  color: var(--cromo-alto); border-color: var(--cor-nav);
  background: color-mix(in srgb, var(--cor-nav) 24%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--cor-nav) 30%, transparent);
}
.nav-links a.nav-aprov { --cor-nav: #f472b6; }   /* rosa     */
.nav-links a.nav-gear  { --cor-nav: #fbbf24; }   /* âmbar    */
.nav-links a.nav-board { --cor-nav: #22d3ee; }   /* ciano    */
.nav-links a.nav-obs   { --cor-nav: #4ade80; }   /* verde    */
/* Separa as quatro em destaque do resto, que vem em ordem alfabética. */
.nav-div { width: 1px; align-self: stretch; margin: .15rem .4rem;
           background: var(--fio-vivo); }
/* Força a administração a começar numa linha nova (some no celular, onde o
   menu é uma faixa só que rola para o lado). */
.nav-quebra { flex-basis: 100%; height: 0; }
.nav-links .nav-quebra + .nav-sep { border-left: 0; margin-left: 0; padding-left: .2rem; }
.nav-sep { font-family: var(--corpo); font-size: .74rem; font-weight: 700;
           letter-spacing: .14em; text-transform: uppercase;
           color: color-mix(in srgb, var(--carmim) 65%, white);
           padding: 0 .5rem 0 1rem; border-left: 1px solid var(--fio); margin-left: .5rem; }

/* --- topo de página ------------------------------------------------------ */
.topo { margin-bottom: 1.5rem; }
.topo h1 { font-size: 1.15rem; letter-spacing: .24em; }
.topo p { color: var(--nevoa); font-size: .92rem; margin: .5rem 0 0; max-width: 66ch; }
.topo-linha { display: flex; align-items: center; justify-content: space-between;
              gap: 1rem; flex-wrap: wrap; }

/* --- cartões e painéis --------------------------------------------------- */
.card {
  position: relative;
  background: linear-gradient(160deg, var(--laje-alta), var(--laje));
  border: 1px solid var(--fio);
  clip-path: var(--chanfro);
  padding: 1.25rem 1.35rem;
  margin-bottom: 1.1rem;
}
.card::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--plasma) 22%, var(--fusao) 52%, var(--carmim) 78%, transparent);
  opacity: .75;
}
.card > h2 { margin-bottom: 1rem; }

.cartoes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }

/* --- números em destaque ------------------------------------------------- */
.tiles { display: grid; gap: 1px; background: var(--fio); border: 1px solid var(--fio);
         grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin-bottom: 1.4rem; }
.tile { background: var(--laje); padding: .95rem .85rem; text-align: center; transition: background .16s; }
.tile:hover { background: var(--laje-alta); }
.tile .v { font-family: var(--num); font-weight: 900; font-size: 1.45rem;
           color: var(--cromo-alto); display: block; line-height: 1.15; }
.tile .v.ganho { color: var(--ganho); }
.tile .v.perda { color: var(--perda); }
.tile .k { font-family: var(--hud); font-size: .58rem; letter-spacing: .18em;
           text-transform: uppercase; color: var(--nevoa); }

/* --- tabelas ------------------------------------------------------------- */
/* Toda tabela larga rola dentro do próprio contêiner: o corpo da página
   nunca rola de lado, que é o que quebra a leitura no celular. */
.tabela-wrap { overflow-x: auto; border: 1px solid var(--fio); background: var(--laje);
               clip-path: var(--chanfro); margin-bottom: 1.1rem; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
thead th {
  font-family: var(--hud); font-size: .58rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--plasma); font-weight: 600;
  text-align: left; padding: .7rem .85rem; white-space: nowrap;
  background: var(--laje-alta); border-bottom: 1px solid var(--fio);
}
th.num, td.num { text-align: right; font-family: var(--num); font-weight: 900;
                 font-variant-numeric: tabular-nums; }
tbody td { padding: .62rem .85rem; border-bottom: 1px solid var(--fio); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: color-mix(in srgb, var(--plasma) 7%, transparent); }
td.nome { color: var(--cromo-alto); }

/* pódio */
.pos { font-family: var(--num); font-weight: 900; color: var(--nevoa); width: 3rem; }
tbody tr:nth-child(1) .pos { color: var(--plasma-luz); font-size: 1.15rem;
                             text-shadow: 0 0 14px var(--plasma); }
tbody tr:nth-child(2) .pos { color: var(--cromo); font-size: 1.05rem; }
tbody tr:nth-child(3) .pos { color: var(--fusao); font-size: 1rem; }

/* --- botões -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--hud); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 600;
  padding: .5rem .9rem; cursor: pointer;
  border: 1px solid var(--fio); background: transparent; color: var(--cromo);
  clip-path: var(--chanfro-p);
  transition: color .16s, border-color .16s, background .16s, box-shadow .16s;
}
.btn:hover { color: var(--plasma-luz); border-color: var(--fio-vivo);
             background: color-mix(in srgb, var(--plasma) 10%, transparent); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.btn-primary, .btn.primario {
  border-color: var(--plasma); color: var(--cromo-alto);
  background: color-mix(in srgb, var(--plasma) 22%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--plasma) 28%, transparent);
}
.btn-primary:hover, .btn.primario:hover {
  background: color-mix(in srgb, var(--plasma) 34%, transparent);
  box-shadow: 0 0 26px color-mix(in srgb, var(--plasma) 45%, transparent);
}
.btn-secondary { border-color: var(--fio); color: var(--nevoa); }

/* Tirar ponto, remover, cancelar: sempre carmim. A cor avisa antes do texto. */
.btn-danger, .btn.perigo {
  border-color: color-mix(in srgb, var(--carmim) 55%, transparent);
  color: var(--carmim);
  background: color-mix(in srgb, var(--carmim) 10%, transparent);
}
.btn-danger:hover, .btn.perigo:hover {
  background: color-mix(in srgb, var(--carmim) 22%, transparent);
  color: var(--cromo-alto);
  box-shadow: 0 0 20px color-mix(in srgb, var(--carmim) 35%, transparent);
}
.btn-sm, .btn.mini { padding: .3rem .6rem; font-size: .58rem; }
.btn-xs { padding: .22rem .45rem; font-size: .54rem; }

/* --- formulários --------------------------------------------------------- */
label { display: block; font-family: var(--hud); font-size: .58rem;
        letter-spacing: .16em; text-transform: uppercase; color: var(--nevoa);
        margin-bottom: .3rem; }
input, select, textarea {
  width: 100%; padding: .55rem .7rem;
  background: color-mix(in srgb, var(--vazio) 60%, transparent);
  border: 1px solid var(--fio); color: var(--cromo);
  font-family: var(--corpo); font-size: .92rem;
  clip-path: var(--chanfro-p);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--plasma);
  box-shadow: 0 0 0 1px var(--plasma), 0 0 20px color-mix(in srgb, var(--plasma) 25%, transparent);
}
textarea { min-height: 5rem; resize: vertical; }
.campo { margin-bottom: .9rem; }
.linha { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.linha > div { min-width: 0; }
.faixa { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.faixa input { flex: 1; min-width: 7rem; }
.faixa span { font-family: var(--hud); font-size: .6rem; letter-spacing: .14em;
              text-transform: uppercase; color: var(--nevoa); }
.faixas { display: grid; gap: .5rem; }

/* --- chips de estado ----------------------------------------------------- */
.chip {
  display: inline-block; font-family: var(--hud); font-size: .54rem;
  letter-spacing: .14em; text-transform: uppercase;
  padding: .16rem .5rem; border: 1px solid var(--fio); color: var(--nevoa);
}
.chip.presente, .chip.aberto { color: var(--ganho);
  border-color: color-mix(in srgb, var(--ganho) 45%, transparent);
  background: color-mix(in srgb, var(--ganho) 10%, transparent); }
.chip.faltou, .chip.cancelado { color: var(--carmim);
  border-color: color-mix(in srgb, var(--carmim) 50%, transparent);
  background: color-mix(in srgb, var(--carmim) 10%, transparent); }
.chip.justificado, .chip.sem_lance { color: var(--atencao);
  border-color: color-mix(in srgb, var(--atencao) 45%, transparent); }
.chip.isento, .chip.encerrado { color: var(--nevoa); }
.chip.t4 { color: var(--plasma-luz); border-color: var(--fio-vivo);
           background: color-mix(in srgb, var(--plasma) 14%, transparent); }
.chip.t3 { color: var(--nevoa); border-color: var(--fio); }
.t3-badge { display: inline-block; font-family: var(--hud); font-size: .54rem;
            letter-spacing: .14em; text-transform: uppercase; padding: .14rem .45rem;
            color: var(--nevoa); border: 1px solid var(--fio); }
.t4 { color: var(--plasma-luz); }

/* --- valores com sinal --------------------------------------------------- */
.val, .mais, .menos { font-family: var(--num); font-weight: 900; }
.val.mais, .mais, .ganho { color: var(--ganho); }
.val.menos, .menos, .perda { color: var(--perda); }

/* --- extrato ------------------------------------------------------------- */
.extrato { display: grid; gap: .3rem; }
.mov {
  display: grid; grid-template-columns: 5.5rem 1fr auto; gap: .8rem;
  align-items: center; padding: .55rem .75rem;
  border: 1px solid var(--fio); background: color-mix(in srgb, var(--vazio) 45%, transparent);
  clip-path: var(--chanfro-p); font-size: .88rem;
}
.mov:hover { border-color: var(--fio-vivo);
             background: color-mix(in srgb, var(--plasma) 8%, transparent); }
/* O estorno precisa se distinguir do lançamento que ele desfaz — senão o
   extrato parece ter cobrado duas vezes. */
.mov.estorno { border-style: dashed; opacity: .82; }

/* Linha escondida do jogador. Ela continua no livro e continua contando no
   saldo — o risco visual e o carmim dizem "isto o jogador nao ve", e so
   aparecem na tela da staff. */
.mov.oculta { border-style: dashed; border-color: color-mix(in srgb, var(--carmim) 45%, transparent);
              background: color-mix(in srgb, var(--carmim) 7%, transparent); }
.mov.oculta .oque b { text-decoration: line-through;
                      text-decoration-color: color-mix(in srgb, var(--carmim) 70%, transparent);
                      color: var(--nevoa); }

/* Acao discreta dentro da linha: presente quando o mouse chega, legivel
   sempre no toque, onde nao existe hover. */
.btn-linha { margin-top: 4px; padding: 2px 8px; border-radius: 4px; cursor: pointer;
             font-family: var(--hud); font-size: .56rem; letter-spacing: .12em;
             text-transform: uppercase; color: var(--nevoa);
             background: transparent; border: 1px solid var(--fio);
             opacity: .35; transition: opacity .15s, color .15s, border-color .15s; }
.mov:hover .btn-linha, .btn-linha:focus-visible { opacity: 1; }
.btn-linha:hover { color: var(--carmim); border-color: var(--carmim); }
.btn-linha[disabled] { opacity: .3; cursor: progress; }
@media (hover: none) { .btn-linha { opacity: .85; } }
.mov .quando { font-family: var(--num); font-size: .78rem; color: var(--nevoa); }
.mov .oque { min-width: 0; }
.mov .oque b { display: block; color: var(--cromo-alto); font-weight: 600; font-size: .9rem; }
.mov .quem { font-family: var(--hud); font-size: .56rem; letter-spacing: .12em;
             text-transform: uppercase; color: var(--nevoa); }
.mov .quanto { font-family: var(--num); font-weight: 900; font-size: 1rem; text-align: right; }
.mov .quanto.mais { color: var(--ganho); }
.mov .quanto.menos { color: var(--perda); }

/* --- item do arsenal ----------------------------------------------------- */
/* `clip-path` recorta tudo que passa da borda — inclusive a arte ampliada no
   hover, que ficava cortada dentro do próprio cartão. Sem o recorte, a imagem
   cresce por cima dos vizinhos, que é o efeito que a lista antiga tinha. O
   canto chanfrado volta como borda desenhada. */
.item { border: 1px solid var(--fio); background: var(--laje);
        padding: 1rem 1.1rem; transition: border-color .2s;
        position: relative; overflow: visible; }
.item:hover { z-index: 40; }
.item:hover { border-color: var(--fio-vivo);
              box-shadow: 0 0 30px color-mix(in srgb, var(--plasma) 16%, transparent); }
.item b { color: var(--cromo-alto); font-size: 1rem; }
.item:hover b { color: var(--plasma-luz); }
/* A arte que amplia 2,6× no hover era a marca da lista antiga. Fica. */
.item img { width: 56px; height: 56px; object-fit: contain;
            transition: transform .3s cubic-bezier(.2,.8,.3,1), filter .3s;
            filter: drop-shadow(0 0 6px color-mix(in srgb, var(--plasma) 30%, transparent)); }
.item:hover img { transform: scale(2.6);
                  filter: drop-shadow(0 0 22px color-mix(in srgb, var(--plasma) 85%, transparent)); }
.item table tbody td { padding: .4rem .5rem; font-size: .85rem; }

.cartao-arma { border: 1px solid var(--fio); background: var(--laje);
               clip-path: var(--chanfro); padding: 1rem 1.1rem; }
.cartao-topo { display: flex; align-items: center; justify-content: space-between;
               gap: .8rem; margin-bottom: .8rem; flex-wrap: wrap; }
.cartao-topo b { color: var(--cromo-alto); }

/* --- fila / posições ----------------------------------------------------- */
.pos-linha { display: grid; grid-template-columns: 2.4rem 1fr auto;
             gap: .7rem; align-items: center; padding: .5rem .3rem; }
.pos-linha + .pos-linha { border-top: 1px solid var(--fio); }
.pos-linha:hover { background: color-mix(in srgb, var(--plasma) 7%, transparent); }
.pos-lugar { font-family: var(--num); font-weight: 900; color: var(--nevoa); text-align: right; }
.pos-lugar.topo { color: var(--plasma-luz); text-shadow: 0 0 12px var(--plasma); }
.pos-pts { font-family: var(--num); font-weight: 900; color: var(--cromo-alto); }
.pos-item b { color: var(--cromo-alto); }
.pos-item span { color: var(--nevoa); font-size: .85rem; }
.pos-vazio { color: var(--nevoa); font-size: .88rem; padding: .8rem .3rem; }

/* --- os quatro bolsos ----------------------------------------------------
   Só o bolso do tier vigente é gastável. O outro fica visível como resíduo e
   NUNCA soma — mostrar um total dos quatro seria mentir sobre o que a pessoa
   pode gastar. */
.bolsos { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.bolso { border: 1px solid var(--fio); padding: .85rem .9rem;
         clip-path: var(--chanfro-p);
         background: color-mix(in srgb, var(--vazio) 55%, transparent); }
.bolso.gastavel { border-color: var(--fio-vivo);
                  background: color-mix(in srgb, var(--plasma) 10%, transparent); }
.bolso .top { display: flex; justify-content: space-between; gap: .5rem;
              font-family: var(--hud); font-size: .58rem; letter-spacing: .16em;
              text-transform: uppercase; color: var(--nevoa); }
.bolso .v { font-family: var(--num); font-weight: 900; font-size: 1.55rem;
            line-height: 1.3; color: var(--cromo-alto); }
.bolso.residuo .v { color: var(--nevoa); }
.bolso .nota { font-family: var(--hud); font-size: .55rem; letter-spacing: .1em;
               text-transform: uppercase; }
.bolso.gastavel .nota { color: var(--plasma-luz); }
.bolso.residuo .nota { color: var(--nevoa); }

/* --- leilão --------------------------------------------------------------
   O relógio começa roxo, vira magenta abaixo de 12h e pulsa em carmim na
   última hora. A cor avisa que está acabando antes de a pessoa ler o número. */
.relogio { font-family: var(--num); font-weight: 900; font-size: 1.3rem;
           color: var(--plasma-luz); letter-spacing: .04em;
           text-shadow: 0 0 16px color-mix(in srgb, var(--plasma) 55%, transparent);
           transition: color .6s, text-shadow .6s; }
.relogio small { display: block; font-family: var(--hud); font-size: .55rem;
                 letter-spacing: .2em; text-transform: uppercase;
                 color: var(--nevoa); font-weight: 400; text-shadow: none; }
.relogio.apertando { color: var(--fusao);
                     text-shadow: 0 0 18px color-mix(in srgb, var(--fusao) 65%, transparent); }
.relogio.ultimas { color: var(--carmim); animation: pulsar 1.6s ease-in-out infinite;
                   text-shadow: 0 0 22px color-mix(in srgb, var(--carmim) 75%, transparent); }
@keyframes pulsar { 50% { opacity: .58; } }

.leilao { display: grid; grid-template-columns: 88px 1fr; gap: 1rem; align-items: start; }
.item-arte {
  width: 88px; height: 88px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--fio-vivo); clip-path: var(--chanfro-p);
  background: radial-gradient(circle at 50% 40%,
              color-mix(in srgb, var(--plasma) 34%, transparent), transparent 68%), var(--vazio);
  transition: transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s;
}
.item-arte:hover { transform: scale(1.14); z-index: 3;
                   box-shadow: 0 0 34px color-mix(in srgb, var(--plasma) 50%, transparent); }
.item-arte img { width: 54px; height: 54px; object-fit: contain;
                 filter: drop-shadow(0 0 10px color-mix(in srgb, var(--plasma) 45%, transparent)); }
.item-nome { font-family: Georgia, serif; font-size: 1.15rem; letter-spacing: .03em;
             color: var(--cromo-alto); margin: 0 0 .35rem; }

.tags { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .8rem; }
.tag { font-family: var(--hud); font-size: .55rem; letter-spacing: .16em;
       text-transform: uppercase; padding: .16rem .5rem;
       border: 1px solid var(--fio); color: var(--nevoa); }
.tag.roxa { border-color: var(--fio-vivo); color: var(--plasma-luz); }

.lances { display: grid; gap: .35rem; margin-top: .9rem; }
.lance { display: flex; justify-content: space-between; align-items: center; gap: .8rem;
         padding: .45rem .6rem; border: 1px solid var(--fio); font-size: .86rem;
         clip-path: var(--chanfro-p); }
.lance.topo { border-color: var(--fio-vivo);
              background: color-mix(in srgb, var(--plasma) 12%, transparent); }
.lance .quem { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.lance .arma { font-family: var(--hud); font-size: .53rem; letter-spacing: .14em;
               text-transform: uppercase; color: var(--nevoa);
               border: 1px solid var(--fio); padding: .06rem .35rem; }
.lance .val { font-family: var(--num); font-weight: 900; color: var(--cromo-alto);
              text-align: right; white-space: nowrap; }
.lance .val small { display: block; font-family: var(--hud); font-size: .5rem;
                    font-weight: 400; letter-spacing: .1em; color: var(--nevoa); }

/* A build em destaque: e o dado que decide quem recebe o item. */
.lance .build { font-family: var(--hud); font-size: .55rem; letter-spacing: .12em;
                text-transform: uppercase; padding: 2px 7px; border-radius: 3px;
                color: var(--plasma); background: color-mix(in srgb, var(--plasma) 14%, transparent);
                border: 1px solid color-mix(in srgb, var(--plasma) 35%, transparent); }
.lance .build.vazia { color: var(--nevoa); background: transparent;
                      border-color: var(--fio); font-style: italic; }
.lance .usa { font-family: var(--hud); font-size: .5rem; letter-spacing: .1em;
              color: var(--nevoa); flex-basis: 100%; }
.lance .btn-linha { flex: 0 0 auto; }

/* --- escolha do lance ---------------------------------------------------- */
.pcts { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; }
.pct { font-family: var(--num); font-weight: 900; font-size: .84rem;
       padding: .4rem .7rem; border: 1px solid var(--fio); background: transparent;
       color: var(--nevoa); cursor: pointer; clip-path: var(--chanfro-p);
       transition: all .16s; }
.pct:hover:not(:disabled) { border-color: var(--fio-vivo); color: var(--plasma-luz); }
.pct.on { border-color: var(--plasma); color: var(--cromo-alto);
          background: color-mix(in srgb, var(--plasma) 22%, transparent);
          box-shadow: 0 0 18px color-mix(in srgb, var(--plasma) 32%, transparent); }
.pct:disabled { opacity: .3; cursor: not-allowed; text-decoration: line-through; }

.armas { display: flex; gap: .4rem; margin-top: .5rem; }
.arma-btn { flex: 1; text-align: left; padding: .55rem .7rem; cursor: pointer;
            border: 1px solid var(--fio); background: transparent; color: var(--nevoa);
            font-family: var(--hud); font-size: .62rem; letter-spacing: .14em;
            text-transform: uppercase; clip-path: var(--chanfro-p); transition: all .16s; }
.arma-btn .saldo { display: block; font-family: var(--num); font-weight: 900;
                   font-size: 1rem; letter-spacing: 0; color: var(--cromo-alto);
                   margin-top: .15rem; }
.arma-btn.on { border-color: var(--plasma); color: var(--plasma-luz);
               background: color-mix(in srgb, var(--plasma) 18%, transparent); }
/* Arma travada no T3: o botão não some, ele explica. Sumir faria a pessoa
   achar que é bug. */
.arma-btn.travada { opacity: .55; cursor: not-allowed; }
.arma-btn.travada .saldo { color: var(--carmim); }

.resultado { margin-top: .8rem; padding: .65rem .8rem; border: 1px solid var(--fio);
             font-size: .86rem; clip-path: var(--chanfro-p); }
.resultado.ok { border-color: color-mix(in srgb, var(--ganho) 45%, transparent);
                background: color-mix(in srgb, var(--ganho) 8%, transparent); }
.resultado.bloqueado { border-color: color-mix(in srgb, var(--carmim) 45%, transparent);
                       background: color-mix(in srgb, var(--carmim) 8%, transparent); }
.resultado strong { color: var(--cromo-alto); }

/* --- grade de armas do arsenal ------------------------------------------- */
.armas-grade { display: grid; gap: .55rem;
               grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
/* Mesma história do `.item`: sem `clip-path`, para a arte ampliada sair da
   moldura em vez de ser cortada por ela. */
.arma-card { position: relative; cursor: pointer; padding: .7rem .4rem .55rem;
             display: grid; justify-items: center; gap: .35rem;
             background: color-mix(in srgb, var(--vazio) 60%, transparent);
             border: 1px solid var(--fio); overflow: visible;
             transition: border-color .18s, background .18s; }
.arma-card:hover { z-index: 40; }
.arma-card:hover { border-color: var(--fio-vivo);
                   background: color-mix(in srgb, var(--plasma) 10%, transparent); }
.arma-card.on { border-color: var(--plasma);
                background: color-mix(in srgb, var(--plasma) 18%, transparent);
                box-shadow: 0 0 26px color-mix(in srgb, var(--plasma) 28%, transparent); }
.arma-card img { width: 46px; height: 46px; object-fit: contain;
                 filter: drop-shadow(0 0 6px color-mix(in srgb, var(--plasma) 28%, transparent));
                 transition: transform .3s cubic-bezier(.2,.8,.3,1), filter .3s; }
.arma-card:hover img { transform: scale(2.6);
                       filter: drop-shadow(0 0 20px color-mix(in srgb, var(--plasma) 85%, transparent)); }
.arma-card .nome { font-family: var(--hud); font-size: .54rem; letter-spacing: .1em;
                   text-transform: uppercase; color: var(--nevoa); text-align: center;
                   line-height: 1.35; }
.arma-card.on .nome { color: var(--plasma-luz); }
.arma-card .fila-n { font-family: var(--num); font-weight: 900; font-size: .72rem;
                     color: var(--cromo); }

.slot-abas { display: flex; gap: .4rem; margin-bottom: 1rem; }
.slot-aba { flex: 1; padding: .5rem .7rem; cursor: pointer;
            font-family: var(--hud); font-size: .62rem; letter-spacing: .16em;
            text-transform: uppercase; background: transparent;
            border: 1px solid var(--fio); color: var(--nevoa);
            clip-path: var(--chanfro-p); transition: all .16s; }
.slot-aba.on { border-color: var(--plasma); color: var(--plasma-luz);
               background: color-mix(in srgb, var(--plasma) 18%, transparent); }

.fila-topo { display: flex; align-items: center; gap: .9rem;
             padding-bottom: .9rem; border-bottom: 1px solid var(--fio); }
.fila-topo img { width: 54px; height: 54px; object-fit: contain;
                 filter: drop-shadow(0 0 14px color-mix(in srgb, var(--plasma) 50%, transparent)); }
.fila-topo h3 { font-family: Georgia, serif; font-size: 1.2rem; letter-spacing: .03em;
                text-transform: none; color: var(--cromo-alto); }
.fila-topo .qtd { font-family: var(--hud); font-size: .58rem; letter-spacing: .16em;
                  text-transform: uppercase; color: var(--nevoa); }

.marca-pri { font-family: var(--hud); font-size: .5rem; letter-spacing: .12em;
             text-transform: uppercase; padding: .1rem .35rem; border: 1px solid; }
.marca-pri.furou { color: var(--carmim); background: color-mix(in srgb, var(--carmim) 12%, transparent);
                   border-color: color-mix(in srgb, var(--carmim) 55%, transparent); }

/* --- avisos -------------------------------------------------------------- */
.aviso {
  padding: .7rem .9rem; margin-bottom: .9rem; font-size: .9rem;
  border: 1px solid var(--fio); border-left-width: 3px;
  background: var(--laje); clip-path: var(--chanfro-p);
}
.aviso.ok { border-left-color: var(--ganho);
            background: color-mix(in srgb, var(--ganho) 8%, transparent); }
.aviso.erro { border-left-color: var(--carmim);
              background: color-mix(in srgb, var(--carmim) 8%, transparent); }
.aviso.atencao { border-left-color: var(--atencao);
                 background: color-mix(in srgb, var(--atencao) 8%, transparent); }

/* O recado de "salvou" flutua sobre a pagina em vez de entrar nela.
   Antes ele era inserido no topo do conteudo e a pagina rolava ate la — quem
   salvava uma anotacao no fim da tela do gear voltava para o comeco e tinha
   que procurar de novo onde estava. As `.aviso` fixas dentro dos templates
   continuam iguais: quem muda de comportamento e so o que nasce aqui dentro. */
#avisos-flutuantes {
  position: fixed; z-index: 60;
  right: 1rem; bottom: 1rem; width: min(24rem, calc(100vw - 2rem));
  display: flex; flex-direction: column; gap: .5rem;
  pointer-events: none;
}
#avisos-flutuantes .aviso {
  margin: 0; pointer-events: auto;
  background: var(--laje); backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  animation: aviso-entra .22s ease-out;
}
@keyframes aviso-entra {
  from { opacity: 0; transform: translateY(.5rem); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #avisos-flutuantes .aviso { animation: none; }
}

.vazio { color: var(--nevoa); font-size: .92rem; padding: 1.5rem 0; text-align: center; }
.vazio b { display: block; color: var(--cromo); margin-bottom: .3rem;
           font-family: var(--hud); font-size: .72rem; letter-spacing: .16em;
           text-transform: uppercase; }
.dica { color: var(--nevoa); font-size: .84rem; margin-top: .5rem; }

/* --- busca de nomes ------------------------------------------------------ */
.nomes { max-height: 18rem; overflow-y: auto; display: grid; gap: .25rem; }
.nomes::-webkit-scrollbar { width: 4px; }
.nomes::-webkit-scrollbar-thumb { background: var(--plasma); }
.nome-op { padding: .5rem .7rem; border: 1px solid var(--fio); cursor: pointer;
           clip-path: var(--chanfro-p); background: transparent; text-align: left;
           color: var(--cromo); font-family: var(--corpo); font-size: .9rem; width: 100%; }
.nome-op:hover { border-color: var(--plasma); color: var(--plasma-luz);
                 background: color-mix(in srgb, var(--plasma) 10%, transparent); }
.sugestoes { position: relative; }
.sugestoes div { padding: .45rem .7rem; cursor: pointer; border: 1px solid var(--fio);
                 border-top: 0; background: var(--laje-alta); font-size: .88rem; }
.sugestoes div:hover { background: color-mix(in srgb, var(--plasma) 14%, transparent);
                       color: var(--plasma-luz); }

/* --- portão de login ----------------------------------------------------- */
.portao { max-width: 26rem; margin: 3rem auto; }
.portao .card { padding: 1.6rem; }

.admin-only { display: none; }
body.admin .admin-only { display: initial; }

/* --- celular ------------------------------------------------------------- */
/* Metade da guilda abre isto no telefone. A navegação vira faixa rolável em
   vez de quebrar em cinco linhas e empurrar o conteúdo para baixo da dobra. */
@media (max-width: 46rem) {
  body { font-size: 15px; }
  .container { padding: 1rem .85rem 4rem; }
  .header { padding: .6rem .85rem; }
  .guild-logo { height: 38px; }
  .guild-title h1 { font-size: 1.15rem; }
  .nav-links { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
               -webkit-overflow-scrolling: touch; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-sep, .nav-div, .nav-quebra { display: none; }
  .mov { grid-template-columns: 1fr auto; }
  .mov .quando { grid-column: 1 / -1; }
  .tiles { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }
  .tile .v { font-size: 1.2rem; }
  /* Ampliar 2,6× no toque cobre a tela inteira e não tem como desfazer. */
  .item:hover img, .arma-card:hover img { transform: none; }
  .bolsos { grid-template-columns: 1fr; }
  .leilao { grid-template-columns: 1fr; }
  .armas { flex-direction: column; }
  .brasao { width: min(240px, 70vw); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- seletor de guilda -----------------------------------------------------
   Duas guildas no mesmo site, no mesmo banco, com bolsos que não se somam. O
   seletor fica no cabeçalho porque trocar de guilda muda TUDO que a página
   mostra — esconder isso num menu faria alguém ler o ranking errado achando
   que é o seu.

   A ativa é plasma; a outra é névoa. Violeta é a guilda, e aqui ele diz
   "você está aqui" — não é enfeite. */
.troca-guilda {
  display: inline-flex;
  border: 1px solid var(--fio);
  clip-path: var(--chanfro-p);
  overflow: hidden;
}
.troca-guilda a {
  padding: .38rem .7rem;
  font-family: var(--hud);
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nevoa);
  text-decoration: none;
  background: var(--laje);
  transition: color .16s, background .16s;
  white-space: nowrap;
}
.troca-guilda a:hover { color: var(--cromo); background: var(--laje-alta); }
.troca-guilda a.ativa {
  color: var(--plasma-luz);
  background: color-mix(in srgb, var(--abissal) 45%, var(--laje));
  border-left: 1px solid var(--fio-vivo);
}
.troca-guilda a:first-child.ativa { border-left: 0; }

@media (max-width: 560px) {
  .troca-guilda a { padding: .32rem .5rem; font-size: .52rem; letter-spacing: .1em; }
}

/* --- a ajuda de cada tela --------------------------------------------------
   O tutorial no lugar onde a dúvida nasce. Fechada por padrão: quem já sabe
   usar não pode ser obrigado a rolar por cima dela todo dia.

   Discreta de propósito — plasma só na marca e na borda esquerda quando
   aberta. Se ela competisse com o conteúdo, viraria a primeira coisa que a
   pessoa aprende a ignorar. */
.ajuda {
  margin: 0 0 1.25rem;
  border: 1px solid var(--fio);
  background: var(--laje);
  clip-path: var(--chanfro-p);
}
.ajuda > summary {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem .8rem;
  cursor: pointer;
  font-family: var(--hud);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--nevoa);
  list-style: none;
  transition: color .16s, background .16s;
}
.ajuda > summary::-webkit-details-marker { display: none; }
.ajuda > summary:hover { color: var(--cromo); background: var(--laje-alta); }
.ajuda[open] > summary { color: var(--plasma-luz); background: var(--laje-alta); }

/* A marca é um "?" dentro do chanfro da casa — não um ícone emprestado. */
.ajuda-marca {
  display: inline-grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  border: 1px solid var(--fio-vivo);
  color: var(--plasma);
  font-size: .68rem;
  font-weight: 700;
  clip-path: var(--chanfro-p);
}
.ajuda > summary::after {
  content: '+';
  margin-left: auto;
  font-family: var(--num);
  font-size: .85rem;
  color: var(--nevoa);
}
.ajuda[open] > summary::after { content: '−'; color: var(--plasma); }

.ajuda-corpo {
  padding: .1rem .9rem .9rem 1rem;
  border-left: 2px solid var(--fio-vivo);
  margin-left: .8rem;
}
.ajuda-corpo ol { margin: .5rem 0 0; padding-left: 1.15rem; }
.ajuda-corpo li {
  margin: 0 0 .45rem;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--cromo);
}
.ajuda-corpo li::marker { color: var(--plasma); font-family: var(--num); }
.ajuda-corpo code {
  font-family: var(--hud);
  font-size: .82rem;
  padding: .05rem .3rem;
  background: var(--vazio);
  border: 1px solid var(--fio);
  color: var(--plasma-luz);
}

/* Carmim é o que dói — aqui também: o que não dá para desfazer, o que custa
   ponto, o prazo que expira. */
.ajuda-nota {
  margin: .8rem 0 0;
  padding: .55rem .7rem;
  border-left: 2px solid var(--carmim);
  background: color-mix(in srgb, var(--carmim) 8%, transparent);
  font-size: .85rem;
  line-height: 1.5;
  color: var(--cromo);
}

@media (max-width: 560px) {
  .ajuda > summary { font-size: .56rem; letter-spacing: .1em; }
  .ajuda-corpo li { font-size: .85rem; }
}


/* -------------------------------------------------------------------------
   Filtros de janela (tela "Quem esteve nas salas")
   Sao links, nao botoes: cada janela e um endereco proprio, entao recarregar
   ou compartilhar mantem o filtro.
   ------------------------------------------------------------------------- */
.filtros { display: flex; flex-direction: column; gap: .55rem; margin: 1.1rem 0; }
.janelas { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip-filtro { font-family: var(--hud); font-size: .58rem; letter-spacing: .13em;
               text-transform: uppercase; text-decoration: none;
               padding: 5px 11px; border-radius: 4px; color: var(--nevoa);
               background: transparent; border: 1px solid var(--fio);
               transition: color .15s, border-color .15s, background .15s; }
.chip-filtro:hover { color: var(--cromo); border-color: var(--fio-vivo); }
.chip-filtro.on { color: var(--plasma); border-color: var(--plasma);
                  background: color-mix(in srgb, var(--plasma) 12%, transparent); }

/* Tabela larga rola sozinha em vez de empurrar a pagina para o lado. */
.tabela-rolagem { overflow-x: auto; }
.tabela-rolagem table { width: 100%; min-width: 560px; }

/* ===========================================================================
   A aba de regras
   ---------------------------------------------------------------------------
   Metade da pagina e texto escrito pela staff e metade sai do catalogo. As
   duas metades usam o mesmo desenho de proposito: quem le nao precisa saber
   qual e qual — precisa saber que as duas valem.

   Toda a animacao esta atras de `.anima-regras`, que o script so poe no <html>
   depois de conferir `prefers-reduced-motion`. Sem JS, sem a classe: tudo
   nasce visivel. Uma regra que so aparece depois de um efeito e uma regra que
   alguem nao vai ler.
   =========================================================================== */

.calmo { color: var(--nevoa); }
.ganho { color: var(--ganho); }

/* --- o cabecalho ---------------------------------------------------------- */
.regra-heroi {
  position: relative; text-align: center;
  padding: 2.4rem 1rem 2rem; margin-bottom: 1.6rem;
  border: 1px solid var(--fio); clip-path: var(--chanfro);
  background:
    radial-gradient(ellipse 70% 120% at 50% -10%,
      color-mix(in srgb, var(--plasma) 26%, transparent), transparent 70%),
    linear-gradient(160deg, var(--laje-alta), var(--laje));
  overflow: hidden;
}
/* O fio de plasma que corre no topo. E a mesma assinatura do cabecalho do
   site, so que devagar: aqui ele marca uma pagina que se le, nao uma que se
   opera. */
.regra-heroi::before {
  content: ""; position: absolute; inset: 0 auto auto 0; height: 1px;
  width: 45%;
  background: linear-gradient(90deg, transparent, var(--plasma),
                              var(--fusao), transparent);
}
.anima-regras .regra-heroi::before { animation: correr-fio 5.5s ease-in-out infinite; }
@keyframes correr-fio {
  0%   { transform: translateX(-100%); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(322%); opacity: 0; }
}

.regra-brasao {
  font-size: 2.1rem; line-height: 1; margin-bottom: .7rem;
  color: var(--plasma-luz);
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--plasma) 60%, transparent));
}
.anima-regras .regra-brasao { animation: pulsar-brasao 4s ease-in-out infinite; }
@keyframes pulsar-brasao {
  0%, 100% { opacity: .85; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}

.regra-heroi h1 { margin: 0 0 .8rem; }
.regra-lema {
  display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap; gap: .55rem;
  font-family: var(--hud); font-size: .66rem;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--plasma-luz); margin: 0;
}
.regra-lema i { color: var(--fusao); font-style: normal; }
.regra-morte {
  font-family: Georgia, serif; font-style: italic;
  color: var(--nevoa); margin: .6rem 0 0; font-size: .95rem;
}

.regra-nota {
  border-left: 2px solid var(--fio-vivo);
  background: var(--laje); color: var(--nevoa);
  font-size: .88rem; padding: .8rem 1rem; margin: 0 0 1.5rem;
}

/* --- o indice ------------------------------------------------------------- */
/* Gruda no topo enquanto a pessoa rola: uma pagina de regra longa sem atalho
   permanente e uma pagina que ninguem consulta duas vezes.

   Uma faixa so, que rola de lado. Em duas ou tres linhas ele comia um terco
   da tela do celular o tempo todo — e o que a pessoa veio ler e a regra, nao
   o menu. O script traz o item aceso para dentro da faixa. */
.regra-indice {
  /* Abaixo do cabecalho do site, que tambem e sticky. `--alt-cabecalho` e
     medido pelo script a cada carga e a cada resize: no celular o cabecalho
     quebra em duas linhas e um valor fixo aqui esconderia o indice atras
     dele. O 58px e so o piso para quando o script nao rodar. */
  position: sticky; top: var(--alt-cabecalho, 58px); z-index: 5;
  display: flex; flex-wrap: nowrap; gap: .45rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: .7rem 0; margin: 0 0 1.5rem;
  background: linear-gradient(var(--vazio) 72%, transparent);
  backdrop-filter: blur(6px);
}
.regra-indice::-webkit-scrollbar { display: none; }
.regra-indice a { flex: 0 0 auto; }
.regra-indice a {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--hud); font-size: .6rem;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--nevoa); text-decoration: none;
  border: 1px solid var(--fio); padding: .38rem .7rem;
  clip-path: var(--chanfro-p);
  transition: color .18s, border-color .18s, background .18s;
}
.regra-indice a .ico { font-size: .95em; letter-spacing: 0; }
.regra-indice a:hover { color: var(--plasma-luz); border-color: var(--fio-vivo); }
.regra-indice a.aqui {
  color: var(--cromo-alto); border-color: var(--plasma);
  background: color-mix(in srgb, var(--plasma) 18%, transparent);
}

/* Cabecalho + faixa do indice: sem isto a ancora para debaixo dos dois e
   o titulo da secao nao aparece. */
.card[id] { scroll-margin-top: calc(var(--alt-cabecalho, 58px) + 3.6rem); }

/* --- a entrada dos blocos ------------------------------------------------- */
.anima-regras .revelar {
  opacity: 0; transform: translateY(18px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.3,1);
}
.anima-regras .revelar.dentro { opacity: 1; transform: none; }

/* Item de lista, linha de tabela, degrau e comando entram em cascata dentro
   do bloco que ja apareceu. `--atraso` vem do template, um por item. */
.anima-regras .revelar .regra-lista li,
.anima-regras .revelar .tabela-viva tbody tr,
.anima-regras .revelar .degrau,
.anima-regras .revelar .comando {
  opacity: 0; transform: translateY(8px);
}
.anima-regras .revelar.dentro .regra-lista li,
.anima-regras .revelar.dentro .tabela-viva tbody tr,
.anima-regras .revelar.dentro .degrau,
.anima-regras .revelar.dentro .comando {
  animation: subir .42s cubic-bezier(.2,.8,.3,1) var(--atraso, 0ms) both;
}
@keyframes subir { to { opacity: 1; transform: none; } }

/* --- o corpo -------------------------------------------------------------- */
.regra-ico { margin-right: .5rem; }

.regra-sub {
  font-size: .95rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--plasma-luz);
  margin: 1.6rem 0 .6rem; padding-left: .7rem;
  border-left: 2px solid var(--fio-vivo);
}
.regra-sub:first-child { margin-top: 0; }

.regra-lista { list-style: none; margin: .5rem 0 1rem; padding: 0; }
.regra-lista li {
  position: relative; padding-left: 1.6rem; margin-bottom: .45rem;
  line-height: 1.6;
}
.regra-lista li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.marca-item::before    { content: "·"; color: var(--plasma); font-size: 1.3em;
                         line-height: 1.15; }
.marca-sim::before     { content: "✔"; color: var(--ganho); }
.marca-nao::before     { content: "✘"; color: var(--perda); }
.marca-atencao::before { content: "⚠"; color: var(--atencao); }
/* O que machuca fica marcado no texto tambem, nao so no simbolo: quem passa
   os olhos pela lista tem que parar nestes dois. */
.marca-nao, .marca-atencao { color: var(--cromo-alto); }

.regra-rodape { color: var(--nevoa); font-size: .85rem; margin: 1rem 0 0; }
.regra-alerta {
  margin: 1.2rem 0 0; padding: .7rem .9rem; font-size: .88rem;
  border: 1px solid color-mix(in srgb, var(--perda) 45%, transparent);
  background: color-mix(in srgb, var(--perda) 9%, transparent);
  clip-path: var(--chanfro-p);
}

.regra-resgate + .regra-resgate { margin-top: 1.8rem; }
.regra-comando { margin: .2rem 0 .8rem; font-size: .88rem; }
.regra-comando code { color: var(--plasma-luz); }

/* --- os degraus de resgate ------------------------------------------------ */
/* Tabela de duas colunas nao mostra que uma faixa vale mais que a outra. O
   degrau mostra: a faixa forte ganha o rastro de plasma, a seca nao. */
.degraus { display: grid; gap: .4rem; }
.degrau {
  position: relative; display: flex; justify-content: space-between;
  align-items: center; gap: 1rem;
  padding: .55rem .8rem; overflow: hidden;
  border: 1px solid var(--fio); background: var(--laje);
  clip-path: var(--chanfro-p);
}
.degrau::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 100%;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--plasma) 22%, transparent), transparent 65%);
}
.degrau.seco::before { background: none; }
.degrau > * { position: relative; }
.degrau-faixa {
  font-family: var(--hud); font-size: .62rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--nevoa);
}
.degrau-pts {
  font-family: var(--num); font-weight: 900; font-size: 1.02rem;
  color: var(--plasma-luz);
}
.degrau.seco .degrau-pts {
  color: var(--nevoa); font-size: .78rem; font-family: var(--hud);
  letter-spacing: .12em; text-transform: uppercase;
}

/* --- a tabela de eventos -------------------------------------------------- */
.tabela-viva tbody tr { transition: background .16s; }
.tabela-viva tbody tr:hover { background: var(--laje-alta); }

/* --- os comandos ---------------------------------------------------------- */
.comandos {
  display: grid; gap: 1px; background: var(--fio);
  border: 1px solid var(--fio);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.comando {
  display: flex; align-items: baseline; gap: .6rem;
  background: var(--laje); padding: .6rem .8rem;
  font-size: .86rem; transition: background .16s;
}
.comando:hover { background: var(--laje-alta); }
.comando code { color: var(--plasma-luz); white-space: nowrap; }
.comando span { color: var(--nevoa); }

@media (max-width: 640px) {
  .regra-indice { gap: .35rem; padding: .55rem 0; }
  .regra-indice a { font-size: .55rem; padding: .32rem .55rem; }
  .regra-lema { letter-spacing: .18em; font-size: .58rem; }
}

/* ===========================================================================
   A vitrine de leiloes da pagina inicial
   ---------------------------------------------------------------------------
   A arte grande, no lugar da linha de lista que estava aqui. O item e a coisa
   pela qual a pessoa vai gastar 20% dos dois bolsos: reconhecer a arma de
   longe vale mais do que caber mais uma linha na tela.
   =========================================================================== */

.vitrine {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: .9rem;
}

.vitrine-item {
  display: flex; flex-direction: column; gap: .2rem;
  text-decoration: none; color: inherit;
  min-width: 0;
}
.vitrine-item b {
  font-family: Georgia, serif; font-size: .95rem; line-height: 1.25;
  color: var(--cromo-alto); margin-top: .5rem;
  /* O nome inteiro, em duas linhas. Cortar com reticencias transforma
     "Adaga do Leviathan" e "Adaga do Kowazan" no mesmo texto na tela. */
  overflow-wrap: anywhere;
  /* Espaco para duas linhas mesmo quando o nome cabe em uma: sem isto, um
     item de nome comprido empurra as legendas dele para baixo e a grade sai
     desalinhada. */
  min-height: 2.5em;
}
.vitrine-item:hover b { color: var(--plasma-luz); }

.vitrine-arte {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 1; width: 100%;
  border: 1px solid var(--fio-vivo); clip-path: var(--chanfro-p);
  background: radial-gradient(circle at 50% 40%,
              color-mix(in srgb, var(--plasma) 34%, transparent), transparent 68%), var(--vazio);
  transition: box-shadow .3s, border-color .3s;
}
.vitrine-item:hover .vitrine-arte {
  border-color: var(--plasma);
  box-shadow: 0 0 34px color-mix(in srgb, var(--plasma) 45%, transparent);
}
.vitrine-arte img {
  width: 74%; height: 74%; object-fit: contain;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--plasma) 45%, transparent));
  transition: transform .3s cubic-bezier(.2,.8,.3,1);
}
.vitrine-item:hover .vitrine-arte img { transform: scale(1.09); }

/* O chip do tier fica sobre a arte, no canto. Fora dela roubaria uma linha
   de cada cartao so para repetir o que a cor ja diz. */
.vitrine-arte .chip { position: absolute; top: .35rem; right: .35rem; }
.vitrine-vazia { color: var(--nevoa); font-size: .58rem;
                 letter-spacing: .1em; text-transform: uppercase; }

.vitrine-info, .vitrine-lances {
  font-family: var(--hud); font-size: .58rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--nevoa);
}
.vitrine-info { color: var(--plasma-luz); }

@media (max-width: 480px) {
  .vitrine { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); }
}

/* A previa do aviso, do jeito que ele sai no Discord. Fonte de leitura e nao
   de codigo: o que esta ali e um recado para gente, e ver em monoespacada
   engana sobre como ele vai parecer. */
.previa-aviso {
  margin: 1rem 0 0; padding: .9rem 1rem;
  white-space: pre-wrap; word-break: break-word;
  font-family: var(--corpo); font-size: .9rem; line-height: 1.6;
  color: var(--cromo);
  border: 1px solid var(--fio-vivo); background: var(--laje);
  clip-path: var(--chanfro-p);
}

/* Os dias da semana, como pastilhas que acendem. Caixa de marcar solta ao
   lado do nome quebra em duas linhas e o nome cola no dia seguinte — dava
   para marcar "quarta" achando que era "terca". */
.dias-semana { display: flex; flex-wrap: wrap; gap: .4rem; }
.dias-semana label {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .7rem; margin: 0; cursor: pointer;
  font-family: var(--hud); font-size: .6rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--nevoa);
  border: 1px solid var(--fio); clip-path: var(--chanfro-p);
  transition: color .16s, border-color .16s, background .16s;
}
.dias-semana label:hover { border-color: var(--fio-vivo); color: var(--plasma-luz); }
.dias-semana input { margin: 0; accent-color: var(--plasma); }
.dias-semana label:has(input:checked) {
  color: var(--cromo-alto); border-color: var(--plasma);
  background: color-mix(in srgb, var(--plasma) 18%, transparent);
}

/* ===========================================================================
   Regras — o seletor de idioma
   ---------------------------------------------------------------------------
   Sem JavaScript a pagina fica em portugues, que e o estado em que ela sempre
   esteve: o `.so-es` nasce escondido e so aparece quando alguem escolhe.

   Secao SEM traducao nao some no modo espanhol - o `[data-tem-es]` marca quais
   cartoes tem as duas versoes, e so nesses o portugues se esconde. Um buraco no
   meio do regulamento seria pior que uma secao que a pessoa traduz sozinha.
   =========================================================================== */

.regra-idioma {
  display: flex; gap: .4rem; justify-content: center;
  margin: 0 0 1.2rem;
}
.regra-idioma button {
  font: inherit; font-size: .86rem; cursor: pointer;
  padding: .42rem .9rem; color: var(--nevoa);
  background: var(--laje); border: 1px solid var(--fio);
  clip-path: var(--chanfro-p);
  transition: color .18s, border-color .18s, background .18s;
}
.regra-idioma button:hover { color: var(--tinta); }
.regra-idioma button.ativo {
  color: var(--tinta); border-color: var(--ganho);
  background: color-mix(in srgb, var(--ganho) 14%, var(--laje));
}

.so-es { display: none; }
:root[data-idioma="es"] .so-es { display: block; }
:root[data-idioma="es"] [data-tem-es] > .so-pt { display: none; }
/* Dentro de um paragrafo os dois trechos sao `span`: `block` quebraria a
   linha e deixaria um espaco vazio onde estava o outro idioma. */
:root[data-idioma="es"] span.so-es { display: inline; }
.so-es, span.so-es { display: none; }
:root[data-idioma="es"] div.so-es { display: block; }
:root[data-idioma="es"] span.so-pt { display: none; }

/* ===========================================================================
   Gear check
   ---------------------------------------------------------------------------
   A tela da staff e feita para conferir dezenas seguidas: cartao pequeno,
   print grande o bastante para decidir sem abrir, e dois botoes. Tudo que
   exigisse um clique a mais viraria uma tela que ninguem usa.
   =========================================================================== */

.gear-envio {
  display: grid; gap: 1rem; margin-top: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.gear-slot {
  border: 1px solid var(--fio); background: var(--laje);
  padding: .9rem; clip-path: var(--chanfro-p);
}
.gear-slot img {
  width: 100%; max-height: 190px; object-fit: contain;
  margin: .6rem 0; background: var(--vazio);
  border: 1px solid var(--fio);
}
.gear-slot input[type=file] { width: 100%; font-size: .82rem; }
/* O espaco escolhido precisa ser obvio: o Ctrl+V vai cair NELE, e colar a
   print do set no lugar do status e o erro que faz a staff reprovar. */
.gear-slot { cursor: pointer; transition: border-color .18s, box-shadow .18s; }
.gear-slot:hover { border-color: var(--brilho, var(--fio)); }
.gear-slot.armado {
  border-color: var(--ganho);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ganho) 45%, transparent);
}
.gear-slot:focus-visible { outline: 2px solid var(--ganho); outline-offset: 2px; }
/* A area de colar guarda o lugar da imagem mesmo vazia: sem altura fixa, o
   primeiro Ctrl+V empurraria a tela inteira para baixo. */
.gear-alvo {
  display: grid; place-items: center; min-height: 150px;
  margin: .6rem 0; padding: .4rem; text-align: center;
  background: var(--vazio); border: 1px dashed var(--fio);
}
.gear-alvo img { margin: 0; border: 0; }
.gear-vazio { color: var(--muted); font-size: .82rem; }

/* Abas da lista de quem falta. A staff cobra uma guilda de cada vez: misturar
   as duas transforma a lista num paredao de nomes que ninguem le ate o fim. */
.gear-abas {
  display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 1rem;
}
.gear-abas button {
  font: inherit; font-size: .84rem; cursor: pointer;
  padding: .35rem .8rem; color: var(--nevoa);
  background: var(--laje); border: 1px solid var(--fio);
  clip-path: var(--chanfro-p);
  transition: color .18s, border-color .18s, background .18s;
}
.gear-abas button:hover { color: var(--tinta); }
.gear-abas button.ativo {
  color: var(--tinta); border-color: var(--plasma);
  background: color-mix(in srgb, var(--plasma) 16%, var(--laje));
}
.gear-abas button .calmo { margin-left: .35rem; }
/* A aba «Nenhuma» so fica vermelha quando tem gente nela: uma aba sempre
   alarmada vira decoracao, e a staff para de olhar. */
.gear-abas button.perigo { border-color: color-mix(in srgb, var(--perda) 55%, transparent); }
.gear-abas button.perigo.ativo {
  color: var(--tinta); border-color: var(--perda);
  background: color-mix(in srgb, var(--perda) 18%, var(--laje));
}
.painel-aba[hidden] { display: none; }

.gear-grade {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}
.gear-cartao { margin: 0; }
/* A borda diz a situacao antes de o olho chegar no texto. */
.gear-cartao[data-status="aprovado"]  { border-color: color-mix(in srgb, var(--ganho) 50%, transparent); }
.gear-cartao[data-status="reprovado"] { border-color: color-mix(in srgb, var(--perda) 55%, transparent); }

.gear-classe { margin: .2rem 0 .8rem; font-size: .9rem; }

.gear-miniaturas { display: flex; flex-wrap: wrap; gap: .5rem; }
.gear-miniaturas img {
  width: 148px; height: 148px; object-fit: cover;
  background: var(--vazio); border: 1px solid var(--fio);
  transition: transform .18s, border-color .18s;
}
.gear-miniaturas a:hover img {
  transform: scale(1.04); border-color: var(--plasma);
}

.gear-recado {
  margin: .8rem 0 0; padding: .6rem .8rem; font-size: .88rem;
  border-left: 2px solid var(--perda); background: var(--laje);
}

.gear-antigo {
  padding: .9rem 0; border-top: 1px solid var(--fio);
}
.gear-antigo:first-of-type { border-top: none; }
.gear-antigo .gear-miniaturas { margin-top: .6rem; }
.gear-antigo .gear-miniaturas img { width: 96px; height: 96px; }

.gear-faltam { display: flex; flex-wrap: wrap; gap: .4rem; }
.gear-faltam a { text-decoration: none; }
/* A bolinha do menu: a staff respondeu o gear check e o jogador ainda nao
   abriu. Some sozinha na primeira visita a tela. */
.bolinha {
  display: inline-block; width: .5rem; height: .5rem; margin-left: .4rem;
  border-radius: 50%; background: var(--perda); vertical-align: middle;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--perda) 30%, transparent);
}
/* A sugestao e conselho, nao cobranca: outra cor, longe do vermelho do
   recado de reprovacao. */
.gear-sugestao { border-color: color-mix(in srgb, var(--plasma) 55%, transparent); }
/* ===========================================================================
   Board de PTs
   ---------------------------------------------------------------------------
   Doze cartoes lado a lado, como a planilha: a staff precisa ver varias PTs
   de uma vez para trocar alguem de uma para outra sem rolar a tela.
   =========================================================================== */
.board-grade {
  display: grid; gap: 1rem; margin-bottom: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
}
.board-pt { margin: 0; }
.board-pt select { width: 100%; }
.board-rotulo { display: block; font-size: .78rem; margin: .5rem 0 .2rem; }
.board-lider { margin-bottom: .6rem; }
.board-vaga {
  display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem;
  gap: .4rem; align-items: center; margin-top: .3rem;
}
.board-classe { font-size: .76rem; text-align: right; overflow: hidden;
                text-overflow: ellipsis; white-space: nowrap; }
/* Player em duas vagas: a planilha pintava de cor; aqui a borda fica vermelha
   e o aviso do topo diz em quais PTs procurar. */
.board-slot.repetido { border-color: var(--perda);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--perda) 45%, transparent); }

/* O board em abas, com o «Geral» ao lado (13/09). Em tela estreita o Geral
   sobe para cima das abas: e o resumo que a staff olha primeiro. */
.board-layout {
  display: grid; gap: 1rem; align-items: start;
  grid-template-columns: minmax(0, 1fr) 17rem;
}
.board-geral { margin: 0; position: sticky; top: 1rem; }
.board-geral h2 { margin-top: 0; }
.board-geral h3 {
  font-size: .72rem; margin: 1.1rem 0 .4rem; color: var(--nevoa);
  text-transform: uppercase; letter-spacing: .1em;
}
.board-geral-linha {
  display: flex; justify-content: space-between; gap: .5rem;
  padding: .32rem 0; border-bottom: 1px solid var(--fio); font-size: .88rem;
}
.board-geral-linha b { font-variant-numeric: tabular-nums; }
.board-geral-linha.alerta b { color: var(--perda); }
.board-geral-aviso { font-size: .82rem; margin: .6rem 0 0; color: var(--atencao); }
.board-ultimas {
  list-style: none; margin: 0; padding: 0; font-size: .8rem;
  max-height: 20rem; overflow-y: auto;
}
.board-ultimas li { padding: .38rem 0; border-bottom: 1px solid var(--fio);
                    overflow-wrap: anywhere; }
.board-ultimas li span { display: block; font-size: .72rem; }
.board-aba-link { align-self: center; margin-left: auto; font-size: .84rem; }
.board-nome-pt { flex: 1; min-width: 0; margin-right: .5rem; font-weight: 700; }
.board-num { font-size: .72rem; margin-top: .2rem; }
.board-acoes { display: flex; gap: .3rem; margin-top: .3rem; }
tr.board-removido td { opacity: .55; }

/* Recados da staff (13/09): na página de observações, e na tela do jogador. */
.obs-trancada { font-size: .72rem; color: var(--nevoa); }
.recado-bloco { margin-top: .6rem; border-top: 1px dashed var(--fio); padding-top: .5rem; }
.recado-bloco summary { cursor: pointer; font-size: .84rem; color: var(--plasma-luz); }
.recado-bloco textarea { width: 100%; margin: .3rem 0; }
.recado-bloco select { max-width: 16rem; }
.recado-historico { list-style: none; margin: .6rem 0 0; padding: 0; font-size: .82rem; }
.recado-historico li { padding: .35rem 0; border-top: 1px solid var(--fio);
                       white-space: pre-wrap; overflow-wrap: anywhere; }
.recado-historico li span { display: block; font-size: .74rem; white-space: normal; }
.recado-novo { border-color: var(--plasma); }
@media (max-width: 960px) {
  .board-layout { grid-template-columns: 1fr; }
  .board-geral { position: static; order: -1; }
}

/* --- ShotCaller (15/09) ---------------------------------------------------- */
/* O desenho segue o painel do ShotCaller que a guilda já conhecia: faixa do
   /start, duas caixas lado a lado, filtro de prioridade e a grade de oradores. */
.sc-faixa-start { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
                  padding: .7rem .9rem; margin-bottom: 1.2rem; font-size: .88rem;
                  border: 1px solid color-mix(in srgb, var(--plasma) 40%, transparent);
                  background: color-mix(in srgb, var(--plasma) 8%, transparent); }
.sc-faixa-start p { margin: 0; flex: 1 1 18rem; }
.sc-faixa-icone { font-family: var(--num); font-weight: 900; color: var(--plasma-luz);
                  border: 1px solid var(--fio-vivo); padding: .15rem .4rem; }
.sc-dupla { display: grid; gap: 1rem; margin-bottom: 1rem;
            grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.sc-dupla > .card { margin: 0; }
.sc-cabeca { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .9rem; }
.sc-cabeca h2 { margin: 0 0 .15rem; }
.sc-cabeca p { margin: 0; color: var(--nevoa); font-size: .84rem; }
.sc-icone { flex: none; display: grid; place-items: center; width: 2.3rem; height: 2.3rem;
            font-size: 1.05rem; border: 1px solid var(--fio); }
.sc-icone-verde { border-color: color-mix(in srgb, var(--ganho) 40%, transparent);
                  background: color-mix(in srgb, var(--ganho) 14%, transparent); }
.sc-icone-roxo { border-color: var(--fio-vivo);
                 background: color-mix(in srgb, var(--plasma) 16%, transparent); }
.sc-icone-azul { border-color: color-mix(in srgb, #60a5fa 40%, transparent);
                 background: color-mix(in srgb, #60a5fa 14%, transparent); }
.sc-icone-laranja { border-color: color-mix(in srgb, var(--atencao) 40%, transparent);
                    background: color-mix(in srgb, var(--atencao) 14%, transparent); }
.sc-info { padding: .6rem .8rem; margin-bottom: .9rem; font-size: .86rem;
           border: 1px solid color-mix(in srgb, #60a5fa 35%, transparent);
           background: color-mix(in srgb, #60a5fa 7%, transparent); }
.sc-prioridade { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.sc-slot { padding: .75rem; border: 1px solid var(--fio); min-width: 0; }
.sc-slot-principal { border-color: color-mix(in srgb, var(--atencao) 55%, transparent);
                     background: color-mix(in srgb, var(--atencao) 9%, transparent); }
.sc-slot-principal .sc-slot-topo b { color: var(--atencao); }
.sc-slot-secundario { border-style: dashed; }
.sc-slot-topo { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; margin-bottom: .5rem; }
.sc-slot-topo .calmo { font-size: .78rem; }
.sc-mais { margin-top: .9rem; }
.sc-mais > summary, .sc-opcoes-mais > summary { cursor: pointer; color: var(--plasma-luz);
                                                font-size: .84rem; margin-bottom: .6rem; }
.sc-oradores-topo { display: flex; justify-content: space-between; align-items: flex-start;
                    gap: .8rem; flex-wrap: wrap; }
.sc-oradores-acoes { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.sc-cabeca p.sc-contagem { display: flex; gap: .35rem; margin-top: .3rem; }
.sc-banner { padding: .6rem .8rem; margin-bottom: 1rem; font-size: .88rem; border: 1px solid; }
.sc-banner.ok { color: var(--ganho); border-color: color-mix(in srgb, var(--ganho) 40%, transparent);
                background: color-mix(in srgb, var(--ganho) 8%, transparent); }
.sc-banner.ok::before { content: "✓  "; }
.sc-banner.atencao { color: var(--atencao); border-color: color-mix(in srgb, var(--atencao) 40%, transparent);
                     background: color-mix(in srgb, var(--atencao) 8%, transparent); }
.sc-banner.atencao::before { content: "⚠  "; }
/* Três colunas no computador, como no painel antigo; uma no celular. */
.sc-grade { display: grid; gap: .8rem; margin-top: 1rem;
            grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.sc-callers { display: grid; gap: .7rem; }
.sc-bot { border: 1px solid var(--fio); padding: .75rem; min-width: 0;
          background: color-mix(in srgb, var(--vazio) 45%, transparent); }
.sc-bot.sc-desligado { opacity: .55; }
.sc-bot-topo { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.sc-bot-icone { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem;
                border-radius: 50%; font-size: .9rem; border: 1px solid var(--fio); }
.sc-bot-icone.sc-ok { border-color: color-mix(in srgb, var(--ganho) 50%, transparent);
                      background: color-mix(in srgb, var(--ganho) 14%, transparent); }
.sc-bot-icone.sc-atencao { border-color: color-mix(in srgb, var(--atencao) 50%, transparent);
                           background: color-mix(in srgb, var(--atencao) 12%, transparent); }
.sc-bot-icone.sc-erro { border-color: color-mix(in srgb, var(--carmim) 55%, transparent);
                        background: color-mix(in srgb, var(--carmim) 12%, transparent); }
.sc-bot-titulo { flex: 1; min-width: 0; }
.sc-bot-nome { display: block; color: var(--cromo-alto); }
.sc-bot-sub { display: block; font-size: .74rem; color: var(--nevoa); overflow-wrap: anywhere; }
.sc-bot-conta { font-size: .72rem; }
.sc-estado { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin-top: .55rem; }
.sc-opcoes-mais { margin-top: .55rem; }
.sc-opcoes-mais .campo { margin: .3rem 0 .5rem; }
.sc-bot [hidden], .sc-faixa-start [hidden], .aviso[hidden] { display: none !important; }
.sc-opcoes { display: grid; gap: .35rem; }
label.sc-marca { display: flex; align-items: center; gap: .5rem; margin: 0; cursor: pointer;
                 font-family: var(--corpo); font-size: .84rem; letter-spacing: 0;
                 text-transform: none; color: var(--cromo); }
label.sc-marca input { width: auto; clip-path: none; flex: none; }
.chip.sc-ok { color: var(--ganho);
  border-color: color-mix(in srgb, var(--ganho) 45%, transparent);
  background: color-mix(in srgb, var(--ganho) 10%, transparent); }
.chip.sc-atencao { color: var(--atencao);
  border-color: color-mix(in srgb, var(--atencao) 45%, transparent); }
.chip.sc-erro { color: var(--carmim);
  border-color: color-mix(in srgb, var(--carmim) 50%, transparent);
  background: color-mix(in srgb, var(--carmim) 10%, transparent); }
.chip.sc-calmo { color: var(--nevoa); }
.interruptor { position: relative; display: inline-block; flex: none; margin: 0;
               width: 2.6rem; height: 1.4rem; cursor: pointer; }
.interruptor input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%;
                     margin: 0; cursor: pointer; clip-path: none; }
.interruptor span { position: absolute; inset: 0; pointer-events: none; border-radius: 999px;
                    border: 1px solid var(--fio); background: var(--laje);
                    transition: background .16s, border-color .16s; }
.interruptor span::after { content: ""; position: absolute; top: 2px; left: 2px;
                           width: calc(1.4rem - 6px); height: calc(1.4rem - 6px);
                           border-radius: 50%; background: var(--nevoa);
                           transition: transform .16s, background .16s; }
.interruptor input:checked + span { border-color: var(--plasma);
                                    background: color-mix(in srgb, var(--plasma) 35%, transparent); }
.interruptor input:checked + span::after { transform: translateX(1.2rem); background: var(--cromo-alto); }
.interruptor input:focus-visible + span { box-shadow: 0 0 0 2px var(--plasma); }
.sc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden;
         clip: rect(0 0 0 0); white-space: nowrap; }
.sc-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; min-height: 1.6rem; }
.sc-cargo { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem;
            padding: .15rem .25rem .15rem .55rem; border: 1px solid var(--fio-vivo);
            background: color-mix(in srgb, var(--plasma) 12%, transparent); }
.sc-cargo button { background: none; border: 0; color: var(--nevoa); cursor: pointer;
                   font-size: 1rem; line-height: 1; padding: 0 .2rem; }
.sc-cargo button:hover { color: var(--carmim); }
.sc-cargos input[data-digitar] { margin-top: .4rem; }
@media (max-width: 600px) {
  .sc-faixa-start .btn { width: 100%; justify-content: center; }
  .sc-grade, .sc-dupla { grid-template-columns: 1fr; }
}