/* =====================================================================
   Painel ADM — a linguagem visual da wiki, portada.
   Carregada DEPOIS do estilo.css, que continua a mandar em tudo o resto.

   Porque um ficheiro separado e nao mais 300 linhas no estilo.css: as
   classes daqui sao TODAS `w-` e ninguem as usa por acidente. As telas
   antigas (contas, loja, banidos...) continuam pixel a pixel como estao
   ate alguem as converter de proposito, e reverter a experiencia inteira
   e apagar duas linhas do base.html.

   O que se copiou da `Wiki/css/main.css` (v22 "Ghost Protocol"):
     - o cartao: gradiente de cima para baixo, moldura de 1px, cantoneiras
       de HUD nos cantos opostos
     - o cabecalho com filete de energia a esquerda e etiqueta de categoria
     - as barras de status com uma cor POR ATRIBUTO (a mesma paleta do
       `Wiki/js/features/weapons/detail.js`)
     - titulos de seccao pequenos, MAIUSCULOS e espacados, com o risco
       inclinado a esquerda

   O que NAO se copiou, e porque:
     - **as fontes** (Chakra Petch + Saira). A wiki puxa-as do
       `fonts.googleapis.com` e a CSP daqui e `default-src 'none'` sem
       `font-src` — nem de origem propria passariam sem mexer no cabecalho
       de seguranca. Fica a fonte do sistema com o mesmo TRATAMENTO
       (maiusculas, espacamento, numeros tabulares), que e o que da o ar
       tecnico; a forma das letras e o que se perde.
     - o `backdrop-filter` do header e a animacao de entrada: um painel de
       administracao abre-se dezenas de vezes por sessao e o fade a cada
       navegacao cansa.
   ===================================================================== */

:root {
    /* Superficies. A relacao e a da wiki (o cartao e MAIS CLARO que a
       pagina, com o topo mais claro que a base), transposta para o azul
       mais frio dela — por isso o --fundo tambem desce aqui. Sem descer o
       fundo, um cartao com as cores da wiki ficaria mais ESCURO que a
       pagina e a profundidade lia-se ao contrario. */
    --fundo: #090c12;
    --w-cartao-topo: #131926;
    --w-cartao-base: #0e131d;
    --w-poco: #080b11;          /* pocos de imagem e pistas de barra */
    --w-elevado: #182030;       /* hover, chip ligado */

    --w-linha: rgba(148, 163, 184, .12);
    --w-linha-forte: rgba(148, 163, 184, .22);
    --w-linha-viva: rgba(56, 224, 255, .35);

    --w-ciano: #38e0ff;
    --w-ciano-claro: #9ff0ff;
    --w-ciano-fraco: rgba(56, 224, 255, .12);
    --w-ouro: #f5c34d;
    --w-verde: #3ddc97;
    --w-vermelho: #ff5d6c;

    --w-texto: #e9eefb;
    --w-texto-2: #b9c4da;
    --w-fraco: #8b97b0;

    --w-raio: 10px;
    --w-sombra: 0 10px 30px rgba(0, 0, 0, .38);
}

/* A malha tecnica da wiki, com a mesma mascara radial que a apaga antes
   de chegar ao rodape. Inerte: `pointer-events: none` e por baixo de
   tudo. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(148, 163, 184, .026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, .026) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(1100px 720px at 50% 0%, #000 30%, transparent 90%);
    mask-image: radial-gradient(1100px 720px at 50% 0%, #000 30%, transparent 90%);
}
body > * { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------
   O cartao
   --------------------------------------------------------------------- */
.w-cartao {
    position: relative;
    background: linear-gradient(180deg, var(--w-cartao-topo), var(--w-cartao-base));
    border: 1px solid var(--w-linha);
    border-radius: var(--w-raio);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, var(--w-sombra);
    margin: 0 0 14px;
}

/* As cantoneiras — a assinatura do tema. Sao dois pseudo-elementos com
   duas bordas cada, nos cantos OPOSTOS (superior esquerdo e inferior
   direito): e o que sugere uma moldura sem desenhar as quatro. */
.w-cartao::before,
.w-cartao::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    pointer-events: none;
    border-color: var(--w-linha-viva);
    border-style: solid;
    opacity: .55;
}
.w-cartao::before {
    top: -1px; left: -1px;
    border-width: 1px 0 0 1px;
    border-top-left-radius: var(--w-raio);
}
.w-cartao::after {
    bottom: -1px; right: -1px;
    border-width: 0 1px 1px 0;
    border-bottom-right-radius: var(--w-raio);
}

/* Cartao que e um link para outra tela (o menu de balanceamento). So
   estes levantam: um cartao de leitura que se mexe ao passar o rato e
   ruido. */
.w-cartao--ligacao { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.w-cartao--ligacao:hover {
    transform: translateY(-3px);
    border-color: var(--w-linha-viva);
    box-shadow: 0 16px 42px rgba(0, 0, 0, .5), 0 0 18px rgba(56, 224, 255, .16);
}
.w-cartao--ligacao:hover::before,
.w-cartao--ligacao:hover::after { opacity: 1; }

/* ---------------------------------------------------------------------
   Cabecalho do cartao — filete a esquerda, titulo, etiqueta de categoria
   --------------------------------------------------------------------- */
.w-cabeca {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 16px;
    border-bottom: 1px solid var(--w-linha);
    background: linear-gradient(90deg, rgba(56, 224, 255, .10), transparent 65%);
    border-radius: var(--w-raio) var(--w-raio) 0 0;
}
.w-cabeca::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--w-ciano), #1f8fff);
    box-shadow: 0 0 12px rgba(56, 224, 255, .5);
    border-radius: var(--w-raio) 0 0 0;
}
.w-cabeca h1, .w-cabeca h2, .w-cabeca h3 {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--w-ciano-claro);
    min-width: 0;
}
.w-cabeca h1 { font-size: 1.15rem; }
/* Empurra para a direita o que vier depois (contagens, ligacoes). */
.w-cabeca .w-direita { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.w-cabeca .w-direita a { text-decoration: none; }

.w-corpo { padding: 12px 16px 14px; }
.w-corpo > :first-child { margin-top: 0; }
.w-corpo > :last-child { margin-bottom: 0; }

/* A etiqueta de categoria: pequena, MAIUSCULA, ciano, moldura fina. */
.w-etiqueta {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--w-linha-viva);
    border-radius: 4px;
    background: var(--w-ciano-fraco);
    color: var(--w-ciano);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}
.w-etiqueta--fraca {
    border-color: var(--w-linha-forte);
    background: transparent;
    color: var(--w-fraco);
}
.w-etiqueta--aviso {
    border-color: rgba(245, 195, 77, .5);
    background: rgba(245, 195, 77, .1);
    color: var(--w-ouro);
}

/* ---------------------------------------------------------------------
   Titulo de seccao — pequeno, espacado, com o risco inclinado
   --------------------------------------------------------------------- */
.w-seccao { margin: 16px 0 8px; }
.w-seccao:first-child { margin-top: 0; }
.w-seccao > h2, .w-seccao > h3, h2.w-titulo, h3.w-titulo {
    position: relative;
    margin: 0 0 8px;
    padding-left: 14px;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--w-texto-2);
}
.w-seccao > h2::before, .w-seccao > h3::before,
h2.w-titulo::before, h3.w-titulo::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%) skewX(-12deg);
    width: 4px;
    height: 1.05em;
    background: linear-gradient(180deg, var(--w-ciano), #1f8fff);
    box-shadow: 0 0 10px rgba(56, 224, 255, .45);
}

/* ---------------------------------------------------------------------
   Barras de status — uma cor POR ATRIBUTO
   ---------------------------------------------------------------------
   A largura de cada barra e escrita pelo `barras.js`, nunca por
   `style="..."` no HTML: a CSP e `style-src 'self'` sem 'unsafe-inline'
   e o atributo seria bloqueado em silencio. Mexer no `.style` a partir
   do JS nao passa pelo analisador de CSS inline e e permitido — e o que
   o `ficha.js` ja fazia desde o primeiro dia.

   As cores sao classes (`.w-barra--atk`) e nao um gradiente escrito na
   marcacao, pela mesma razao. */
.w-barras {
    border: 1px solid var(--w-linha);
    border-radius: 8px;
    background: rgba(0, 0, 0, .25);
    padding: 6px 12px;
}
.w-barra {
    display: grid;
    grid-template-columns: 8.5rem minmax(60px, 1fr) 3.4rem;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(148, 163, 184, .07);
}
.w-barra:last-child { border-bottom: 0; }
.w-barra__r {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--cor-atributo, var(--w-texto-2));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.w-barra__pista {
    height: 10px;
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 2px;
    background: var(--w-poco);
    overflow: hidden;
    position: relative;
}
.w-barra__pista i {
    display: block;
    height: 100%;
    width: 0;                    /* o barras.js e que a enche */
    border-radius: 1px;
    background: linear-gradient(90deg, var(--cor-de, #2f9e59), var(--cor-ate, #5be584));
    transition: width .35s cubic-bezier(.2, .7, .3, 1);
}
.w-barra__v {
    text-align: right;
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--cor-atributo, var(--w-texto));
}
/* Risco no valor que esta HOJE no cliente — mostra o tamanho do passo. */
.w-barra__marca {
    position: absolute;
    top: 0; bottom: 0;
    width: 2px;
    background: rgba(255, 255, 255, .7);
}

/* A paleta por atributo, copiada do `BAR` do `detail.js` da wiki (dano
   laranja->vermelho, cadencia rosa, alcance azul, precisao dourado, vel.
   da bala ciano, mobilidade verde, defesa roxo). Os que a wiki nao tem
   — HP, MP, SP, movimento, municao, e os tres de percentagem — seguem a
   mesma logica: uma matiz por familia de sentido, e nenhuma repetida
   entre atributos que aparecem lado a lado na mesma ficha.

   Classe SOLTA (`.w-cor-atk`) e nao um modificador da barra
   (`.w-barra--atk`) porque a mesma cor tem de servir a barra da ficha de
   item e a pastilha do efeito de conjunto. Ataque tem de ser laranja nas
   duas telas, senao a cor deixa de querer dizer alguma coisa. */
.w-cor-atk      { --cor-de: #f59e0b; --cor-ate: #ef4444; --cor-atributo: #fb923c; }
.w-cor-rof      { --cor-de: #fb7185; --cor-ate: #e11d48; --cor-atributo: #fb7185; }
.w-cor-rng      { --cor-de: #3b82f6; --cor-ate: #60a5fa; --cor-atributo: #60a5fa; }
.w-cor-hit      { --cor-de: #f59e0b; --cor-ate: #fde047; --cor-atributo: #fcd34d; }
.w-cor-bspd     { --cor-de: #22d3ee; --cor-ate: #67e8f9; --cor-atributo: #22d3ee; }
.w-cor-mob      { --cor-de: #22c55e; --cor-ate: #4ade80; --cor-atributo: #4ade80; }
.w-cor-def      { --cor-de: #a855f7; --cor-ate: #c084fc; --cor-atributo: #c084fc; }
/* Resistência (Endurance) fica com o teal que a wiki ja lhe da; as duas
   metades de "Bullets / Magazine" ficam na familia do aco, uma clara e uma
   escura, porque aparecem uma por baixo da outra na mesma ficha. */
.w-cor-end      { --cor-de: #0ea5b7; --cor-ate: #2dd4bf; --cor-atributo: #2dd4bf; }
.w-cor-ammo     { --cor-de: #64748b; --cor-ate: #94a3b8; --cor-atributo: #94a3b8; }
.w-cor-mag      { --cor-de: #334155; --cor-ate: #64748b; --cor-atributo: #7c8ba1; }
.w-cor-hp       { --cor-de: #ef4444; --cor-ate: #f87171; --cor-atributo: #f87171; }
.w-cor-mp       { --cor-de: #6366f1; --cor-ate: #818cf8; --cor-atributo: #818cf8; }
.w-cor-sp       { --cor-de: #d97706; --cor-ate: #f59e0b; --cor-atributo: #fbbf24; }
.w-cor-mv       { --cor-de: #84cc16; --cor-ate: #a3e635; --cor-atributo: #a3e635; }
.w-cor-hs       { --cor-de: #e11d48; --cor-ate: #fb7185; --cor-atributo: #fb7185; }
.w-cor-fire     { --cor-de: #ea580c; --cor-ate: #fb923c; --cor-atributo: #fb923c; }
.w-cor-bul      { --cor-de: #0891b2; --cor-ate: #22d3ee; --cor-atributo: #22d3ee; }
.w-cor-spr      { --cor-de: #7c3aed; --cor-ate: #a78bfa; --cor-atributo: #a78bfa; }
.w-cor-expl     { --cor-de: #ec4899; --cor-ate: #f472b6; --cor-atributo: #f472b6; }
/* Os tres de percentagem (EXP, dinheiro, licenca) nao sao de combate:
   ficam na familia do ouro, que e a cor de recompensa da wiki. */
.w-cor-exp      { --cor-de: #ca8a04; --cor-ate: #facc15; --cor-atributo: #facc15; }
.w-cor-dinheiro { --cor-de: #b45309; --cor-ate: #f5c34d; --cor-atributo: #f5c34d; }
.w-cor-licenca  { --cor-de: #0d9488; --cor-ate: #5eead4; --cor-atributo: #5eead4; }
/* Passou o maior da familia: este item passou a ser o dominante. */
.w-barra.acima .w-barra__pista i { --cor-de: #ff5d6c; --cor-ate: #ff8f99; }
.w-barra.acima .w-barra__v { color: var(--w-vermelho); }
.w-barra.mudado .w-barra__r { text-decoration: underline; }

/* Barra de um atributo que TAMBEM esta compilado no servidor (a col22 /
   Endurance). A tabela de baixo diz isto com a etiqueta "cliente + servidor";
   aqui nao ha coluna livre na grelha, entao a marca vai colada ao rotulo. Sem
   marca nenhuma, este campo mudava de barra como se fosse so do cliente. */
.w-barra--servidor .w-barra__r::after {
    content: " \25C6";                 /* losango cheio */
    color: var(--w-ouro);
    font-size: 9px;
    vertical-align: super;
}

/* Barra dentro de um formulario: entra o cursor e o campo de numero. */
.w-barra--edita {
    grid-template-columns: 8.5rem minmax(60px, 1fr) 7.5rem 4.6rem 3.6rem;
}
.w-barra--edita input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(56, 224, 255, .45), rgba(148, 163, 184, .18));
}
.w-barra--edita input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 11px; height: 11px;
    background: linear-gradient(135deg, var(--w-ciano-claro), #1f8fff);
    border: 1px solid #04121f;
    border-radius: 2px;
    transform: rotate(45deg);
    box-shadow: 0 0 8px rgba(56, 224, 255, .7);
    cursor: pointer;
}
.w-barra--edita input[type=range]::-moz-range-thumb {
    width: 11px; height: 11px;
    background: var(--w-ciano);
    border: 1px solid #04121f;
    border-radius: 2px;
    transform: rotate(45deg);
    box-shadow: 0 0 8px rgba(56, 224, 255, .7);
    cursor: pointer;
}
.w-barra--edita input[type=number] {
    width: 100%;
    text-align: right;
    font-variant-numeric: tabular-nums;
    padding: .3rem .4rem;
}
.w-barra__teto {
    text-align: right;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--w-fraco);
    white-space: nowrap;
}

@media (max-width: 720px) {
    .w-barra, .w-barra--edita { grid-template-columns: 6.5rem minmax(50px, 1fr) 3rem; }
    .w-barra--edita input[type=range], .w-barra__teto { display: none; }
}

/* ---------------------------------------------------------------------
   Celula com barra — a tabela que se le sem comparar numeros a mao
   ---------------------------------------------------------------------
   Numa comparacao de familia o que interessa nao e o numero, e o numero
   COMPARADO: "95 de ataque" so quer dizer alguma coisa ao lado dos outros
   snipers. Cada celula leva por tras uma barra que enche contra o maior
   da COLUNA, entao a coluna inteira passa a ler-se como um perfil e o
   item fora da linha salta sem ninguem ter de percorrer os numeros.

   O enchimento e escrito pelo `barras.js` (a CSP proibe `style=` na
   marcacao) e a cor vem da classe `.w-cor-*` do atributo — a mesma da
   ficha do item e das pastilhas de conjunto. */
.w-celula {
    position: relative;
    display: block;
    padding: 2px 6px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(0, 0, 0, .25);
}
.w-celula i {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0;                    /* o barras.js e que a enche */
    background: linear-gradient(90deg, var(--cor-de, #2f9e59), var(--cor-ate, #5be584));
    opacity: .3;
    transition: width .3s cubic-bezier(.2, .7, .3, 1);
}
.w-celula b, .w-celula s {
    position: relative;          /* por cima do enchimento */
    font-variant-numeric: tabular-nums;
}
.w-celula b { font-weight: 600; color: var(--w-texto); }
/* O maior da coluna: este item e o que manda neste atributo. */
.w-celula--topo { box-shadow: inset 0 0 0 1px var(--w-linha-forte); }
.w-celula--topo b { color: var(--cor-atributo, var(--w-texto)); font-weight: 800; }
/* Um zero nao diz nada a quem balanceia e enche a tabela de ruido — fica
   esbatido para os valores que contam saltarem. */
.w-celula--zero b { color: var(--w-fraco); font-weight: 400; }
/* Valor por publicar: mostra-se o NOVO, com o que esta hoje no cliente
   riscado ao lado. Sem o velho a seguir, a coluna passava a comparar
   metade dos itens contra o futuro e a outra metade contra o presente
   sem se ver a diferenca. */
.w-celula--pendente { box-shadow: inset 0 0 0 1px rgba(245, 195, 77, .5); }
.w-celula--pendente b { color: var(--w-ouro); }
.w-celula s { color: var(--w-fraco); font-size: 10px; margin-left: 5px; }

/* Tabela da linguagem nova: celulas apertadas, porque cada uma ja traz a
   sua barra e o respiro do `estilo.css` (.5rem) espalhava 8 atributos por
   um ecra e meio. */
.w-tabela { table-layout: auto; }
.w-tabela th, .w-tabela td { padding: .28rem .4rem; }
.w-tabela th .w-th {
    color: var(--cor-atributo, var(--w-fraco));
    white-space: nowrap;
}
.w-tabela td.w-cel { width: 1%; }

/* ---------------------------------------------------------------------
   Poco de imagem — o fundo escuro por tras de um icone
   --------------------------------------------------------------------- */
.w-poco {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--w-poco);
    border: 1px solid var(--w-linha);
    border-radius: 6px;
    flex: 0 0 auto;
    overflow: hidden;
}
.w-poco img { display: block; image-rendering: pixelated; }
.w-poco--40 { width: 40px; height: 40px; }
.w-poco--32 { width: 32px; height: 32px; }
.w-poco--24 { width: 24px; height: 24px; }
.w-poco--vazio { border-style: dashed; color: var(--w-fraco); font-size: .75rem; }
/* O item que o `Iteminfo.csv` desta release nao tem. O icone ainda aparece
   (vem do catalogo congelado, que e outra populacao), e sem uma marca a
   linha nao dava nenhum sinal de que aquele cacifo nao entrega nada. */
.w-poco--fantasma { border-color: var(--w-ouro); box-shadow: 0 0 0 1px var(--w-ouro) inset; }

/* ---------------------------------------------------------------------
   Pastilhas — efeitos de conjunto, modos, atalhos
   --------------------------------------------------------------------- */
.w-pastilhas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.w-pastilha {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 3px 9px;
    border: 1px solid var(--w-linha);
    border-radius: 6px;
    background: var(--w-elevado);
    font-size: 12px;
    line-height: 1.4;
    color: var(--w-texto-2);
    text-decoration: none;
    white-space: nowrap;
}
a.w-pastilha:hover { border-color: var(--w-linha-viva); color: var(--w-texto); }
/* A pastilha da familia que se esta a ver, ou do limite escolhido: sem
   isto os seletores de familia e de "ate quantos patamares" ficavam com
   dez opcoes todas iguais e sem dizer onde se esta. */
.w-pastilha--ligada {
    border-color: var(--w-linha-viva);
    background: var(--w-ciano-fraco);
    color: var(--w-ciano-claro);
}
.w-pastilha--ligada .w-pastilha__n { color: var(--w-ciano); }
/* O numero de pecas que arma o efeito: o olho procura isto primeiro. */
.w-pastilha__n {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--w-fraco);
    font-variant-numeric: tabular-nums;
}
.w-pastilha__v {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--cor-atributo, var(--w-ciano));
}
.w-pastilha__r { color: var(--cor-atributo, var(--w-texto-2)); }
/* O que o patamar vale de verdade, do itemclass.csv. */
.w-pastilha__real {
    color: var(--w-fraco);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
   Lista de linhas (conjuntos, itens de uma familia)
   ---------------------------------------------------------------------
   Grelha e nao <table>: as pistas sao as mesmas no cabecalho e em cada
   linha, entao as colunas batem de cima a baixo sem depender do
   conteudo — a mesma decisao (e o mesmo motivo) da tela da loja. */
.w-linhas { display: block; }
.w-linhas__cab, .w-linha {
    display: grid;
    grid-template-columns: var(--w-grade);
    align-items: center;
    gap: 0 10px;
}
.w-linhas__cab {
    padding: 0 12px 6px;
    color: var(--w-fraco);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 1px 0 var(--w-linha);
}
.w-linha {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(148, 163, 184, .07);
    min-height: 46px;
}
.w-linha:last-child { border-bottom: 0; }
.w-linha:hover { background: rgba(56, 224, 255, .045); }
.w-linha--pendente { box-shadow: inset 3px 0 0 var(--w-ouro); }
.w-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--w-fraco);
    font-size: 12px;
}
.w-nome {
    min-width: 0;
    font-weight: 600;
    color: var(--w-texto);
    text-decoration: none;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
a.w-nome:hover { color: var(--w-ciano-claro); }
.w-nome--sem { color: var(--w-fraco); font-weight: 400; font-style: italic; }
.w-sub {
    font-size: 11px;
    color: var(--w-fraco);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* ⚠️ O `.w-sub` de cima e uma CELULA DE LISTA: uma linha so, cortada com
   reticencias. Num `<p>` isso nunca e o que se quer — um paragrafo e uma
   frase, e cortar-lhe o fim engole a explicacao. Ate aqui o remendo era feito
   cartao a cartao (`.w-linhas.telas`, `#reserva`, `.w-tabela--fina td`,
   `#som-e-efeitos`, `#rasto`, `#efeitos` — SEIS rondas do mesmo defeito), e
   cada tela nova recomecava a conta. Cercar pelo ELEMENTO fecha a familia de
   uma vez, tal como o `div.w-cel`: sao 55 `<p class="w-sub">` nos templates.
   Medido no /assets a 375px: o rodape «As texturas que o painel nao consegue
   ler…» era cortado aos 305px de 1366px e empurrava a pagina 232px para fora. */
p.w-sub {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

/* As grelhas, uma por lista. Larguras em px porque `ch`/`rem` resolvem
   contra a fonte de CADA elemento (o cabecalho e 10px, a linha 15px) e as
   mesmas pistas dariam colunas diferentes nos dois. */
.w-linhas.conjuntos {
    --w-grade:
        44px                  /* #      indice no SetItem                  */
        minmax(120px, 210px)  /*        icones das pecas                   */
        minmax(160px, 300px)  /* nome   derivado das pecas                 */
        minmax(220px, 1fr)    /* efeito as pastilhas levam a folga toda    */
        108px;                /*        estado + editar                    */
}
.w-linhas.familia {
    --w-grade:
        40px 40px 64px minmax(150px, 1fr) minmax(220px, 1.4fr) 92px;
}
/* O ÍNDICE de `/conteudo` — as telas por domínio.
   Reusava a grelha `familia`, cuja 3.ª coluna tem 64px: o nome da tela é um
   `.w-nome` (nowrap + reticências), então «Economia do COOP» aparecia
   «Econo…» e «Máquina de moedas» «Máqui…». Com quatro telas novas em 23-08-2026
   (Quests diárias, Presença diária, Filtro do chat, Caixas da missão) passavam
   a ser SEIS de dez cortadas — e um índice em que metade dos destinos não se lê
   deixa de ser um índice. Aqui o nome tem a largura de que precisa e a coluna
   que cede é a do «o quê», que embrulha. */
.w-linhas.telas {
    --w-grade:
        40px                    /* #                                      */
        minmax(140px, 210px)    /* nome da tela                           */
        minmax(200px, 1.6fr)    /* o que ela edita                        */
        minmax(140px, .9fr)     /* o ficheiro                             */
        92px;                   /* abrir                                  */
}
/* O «o quê» é uma frase, não uma célula de lista: sem isto o `.w-sub` global
   (nowrap + reticências) cortava-a a meio, que é o mesmo defeito da coluna do
   nome visto da coluna do lado. */
.w-linhas.telas .w-sub { white-space: normal; overflow: visible; }
.w-linhas.telas .w-linha { min-height: 40px; }
/* A lista de pecas de um conjunto. Uma coluna a mais que a `familia` — a
   VALIDADE — porque um conjunto tem uma peca por slot E por validade, e sem
   ela seis linhas com o mesmo nome e o mesmo icone leem-se como duplicados. */
.w-linhas.pecas-slot {
    --w-grade:
        40px                  /*        icone da peca                      */
        64px                  /* id                                        */
        minmax(150px, 1fr)    /* nome   o mesmo nas seis versoes           */
        minmax(130px, 190px)  /* validade a unica coluna que as separa     */
        minmax(150px, 1fr)    /* restricoes col10/col55                    */
        92px;                 /*        atributos ->                       */
}
/* O cabecalho do slot: separa os blocos sem ser mais um cartao. A conta
   ("6 versoes por validade") fica ao lado do nome e nao por baixo — em cima
   de uma lista de seis linhas iguais, o numero E a informacao. */
.w-slot {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 18px 0 6px;
}
.w-slot:first-of-type { margin-top: 6px; }
.w-slot__nome {
    margin: 0;
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--w-ciano-claro);
}
.w-slot__conta { font-size: 11px; color: var(--w-fraco); }

/* O modelo: o nivel entre o slot e a peca. Duas pecas do mesmo slot podem ser
   dois OBJECTOS (o capacete vermelho e o azul) ou a mesma peca em duas
   validades — a col2 e que decide, e por isso ela aparece aqui. */
.w-modelo {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 6px 12px 4px;
    margin-top: 8px;
    border-left: 2px solid var(--w-linha);
}
.w-modelo__nome { font-weight: 600; font-size: 13px; }
.w-modelo__arte, .w-modelo__conta {
    font-size: 11px;
    color: var(--w-fraco);
    font-variant-numeric: tabular-nums;
}
.w-modelo__conta { margin-left: auto; }

.w-linhas.buffs {
    --w-grade:
        44px                  /* #      indice do buff                     */
        minmax(150px, 1fr)    /* nome   + a anotacao original              */
        minmax(180px, 1.2fr)  /* efeito etiqueta + valor                   */
        minmax(90px, 130px)   /* tempo                                     */
        minmax(70px, 100px)   /* equipa                                    */
        108px;                /*        estado + editar                    */
}
.w-linhas.textos {
    --w-grade:
        56px                  /* id                                        */
        40px                  /*        icone do item                      */
        minmax(180px, 1fr)    /* nome   o que o jogo mostra                */
        minmax(200px, 1.3fr)  /* desc   idem, truncada                     */
        minmax(90px, 150px)   /* estado defeitos e pendencia               */
        92px;                 /*        editar                             */
}
.w-linhas.bundles {
    --w-grade:
        56px                  /* id     = a definicao do proprio pacote    */
        40px                  /*        icone do pacote                    */
        minmax(160px, 320px)  /* nome   do catalogo                        */
        minmax(200px, 1fr)    /* dentrega os icones do conteudo            */
        minmax(90px, 150px)   /* estado defeitos e pendencia               */
        92px;                 /*        editar                             */
}
/* O mapa do espaco (`/folgas`). A coluna do MEIO e uma `.w-barra` sem rotulo:
   o nome da tabela ja esta na primeira coluna, e repeti-lo dentro da barra
   gastava 8,5rem para dizer o mesmo duas vezes. */
.w-linhas.folgas {
    --w-grade:
        minmax(150px, 1fr)    /* tabela nome + registo no .cvf             */
        minmax(120px, 1.1fr)  /* barra  ocupacao de hoje                   */
        minmax(96px, 130px)   /* livre  bytes, ou CHEIA                    */
        minmax(96px, 150px)   /* depois o que a reserva daria              */
        108px;                /*        entrada para o editor              */
}
/* Sem a 1a coluna do rotulo e sem a moldura de lista: aqui a barra vive DENTRO
   de uma celula de grelha, e nao numa pilha de barras. */
.w-linhas.folgas .w-barra {
    grid-template-columns: minmax(48px, 1fr) 3.1rem;
    padding: 0;
    border-bottom: 0;
    gap: 8px;
}
.w-linhas.folgas .w-barra__v { font-size: 12px; }
@media (max-width: 900px) {
    /* Cai a barra (a percentagem esta no numero ao lado) e a coluna do
       "depois" — a decisao de reservar toma-se no `/publicar`, com o preco.
       As duas que ficam sao px FIXOS e o nome leva o resto: com `minmax` nas
       tres, a coluna do numero levava 120px e o nome ficava com 57 — o
       suficiente para "Rasto no pe" e nao para "Curva de balanceamento". */
    .w-linhas.folgas { --w-grade: minmax(0, 1fr) 84px 76px; }
    .w-linhas.folgas .w-linha > :nth-child(2),
    .w-linhas.folgas .w-linhas__cab > :nth-child(2),
    .w-linhas.folgas .w-linha > :nth-child(4),
    .w-linhas.folgas .w-linhas__cab > :nth-child(4) { display: none; }
}
@media (max-width: 900px) {
    .w-linhas.conjuntos { --w-grade: 40px minmax(90px, 140px) minmax(120px, 1fr) 96px; }
    .w-linhas.conjuntos .w-pastilhas,
    .w-linhas.conjuntos .w-linhas__cab > :nth-child(4) { display: none; }
    /* Caem o icone do pacote e a fila de icones do conteudo — sao o que ocupa
       mais e o que menos se perde. O ESTADO e o "editar" ficam: sem o estado
       some a unica marca de que a caixa esta partida, e sem o "editar" a linha
       deixa de ter entrada (o nome tambem e ligacao, mas so isso obrigaria a
       adivinhar que e clicavel). */
    .w-linhas.buffs { --w-grade: 44px minmax(110px, 1fr) minmax(110px, 1fr) 84px; }
    .w-linhas.buffs .w-linha > :nth-child(4),
    .w-linhas.buffs .w-linhas__cab > :nth-child(4),
    .w-linhas.buffs .w-linha > :nth-child(5),
    .w-linhas.buffs .w-linhas__cab > :nth-child(5) { display: none; }
    .w-linhas.textos { --w-grade: 52px minmax(110px, 1fr) minmax(84px, 116px) 76px; }
    .w-linhas.textos .w-linha > :nth-child(2),
    .w-linhas.textos .w-linhas__cab > :nth-child(2),
    .w-linhas.textos .w-linha > :nth-child(4),
    .w-linhas.textos .w-linhas__cab > :nth-child(4) { display: none; }
    /* Cai a coluna das restricoes (a col10 le-se na tela de atributos) e o
       icone; a VALIDADE fica, que e a razao de ser desta lista. */
    /* `minmax(0, ...)` no nome e nao `minmax(110px, ...)`: com um piso de
       110px as quatro colunas somavam 392 px e a linha transbordava num
       ecra de 375. O nome e o unico que pode encolher — o id, a validade
       e a entrada nao. */
    .w-linhas.pecas-slot { --w-grade: 52px minmax(0, 1fr) 92px 72px; }
    .w-linhas.pecas-slot .w-linha > :nth-child(1),
    .w-linhas.pecas-slot .w-linhas__cab > :nth-child(1),
    .w-linhas.pecas-slot .w-linha > :nth-child(5),
    .w-linhas.pecas-slot .w-linhas__cab > :nth-child(5) { display: none; }
    .w-linhas.bundles { --w-grade: 52px minmax(110px, 1fr) minmax(84px, 116px) 76px; }
    .w-linhas.bundles .w-linha > :nth-child(2),
    .w-linhas.bundles .w-linhas__cab > :nth-child(2),
    .w-linhas.bundles .w-linha > :nth-child(4),
    .w-linhas.bundles .w-linhas__cab > :nth-child(4) { display: none; }
}

/* ---------------------------------------------------------------------
   Os dez cacifos de um pacote
   ---------------------------------------------------------------------
   Um cacifo e uma caixa com o icone em cima e o campo do id em baixo. A
   grelha `auto-fill` e nao cinco fixos: com cinco por fila, um ecra
   estreito espremia o campo do id ate ele deixar de caber, e um largo
   deixava metade da linha vazia. */
.w-cacifos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 10px;
    margin: 10px 0;
}
.w-cacifo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    padding: 8px;
    border: 1px solid var(--w-linha);
    border-radius: 8px;
    background: rgba(15, 23, 42, .35);
}
.w-cacifo--cheio { border-color: rgba(56, 224, 255, .28); }
/* O cacifo com um item que o Iteminfo nao tem. Nao e erro de gravacao (a
   release ja tem dez assim) mas o jogador recebe menos do que a caixa
   promete, e isso tem de saltar a vista sem se ler o rodape. */
.w-cacifo--fantasma { border-color: var(--w-ouro); }
/* Onde a proxima escolha da busca vai cair. Sem esta marca, clicar em "por no
   cacifo" escrevia num dos dez sem se ver em qual. */
.w-cacifo--alvo { border-color: var(--w-ciano); box-shadow: 0 0 0 1px var(--w-ciano) inset; }
.w-cacifo__n {
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--w-fraco);
}
.w-cacifo__nome {
    font-size: 11px;
    line-height: 1.25;
    text-align: center;
    min-height: 2.5em;
    overflow: hidden;
    color: var(--w-texto);
}
.w-cacifo input {
    width: 100%;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.w-cacifo__acoes { display: flex; gap: 6px; }

/* Campo de texto largo (nome e descricao de item). O `estilo.css` da folha
   antiga dimensiona <input> pelo atributo `size`, e um nome de item chega
   aos 63 caracteres — sem isto o campo saia com a largura do conteudo e
   escrevia-se dentro de uma fresta. `width:100%` e nao `size` porque a CSP
   proibe `style=` e o valor certo depende do cartao, nao do texto. */
.w-texto {
    width: 100%;
    box-sizing: border-box;
    background: var(--w-poco);
    border: 1px solid var(--w-linha-forte);
    color: var(--w-texto);
    border-radius: 7px;
    padding: .42rem .7rem;
    font: inherit;
    line-height: 1.45;
    resize: vertical;
}
.w-texto:focus {
    outline: none;
    border-color: var(--w-ciano);
    box-shadow: 0 0 0 2px var(--w-ciano-fraco);
}

/* As miniaturas das pecas de um conjunto, encostadas umas as outras. */
.w-pecas { display: flex; gap: 3px; align-items: center; min-width: 0; }
.w-pecas .w-poco { width: 26px; height: 26px; }
.w-pecas .w-poco img { width: 24px; height: 24px; }
/* ⚠️ A base aqui e CONTEXTUAL (`.w-pecas .w-poco`, 0-2-0) e os modificadores
   `.w-poco--NN` sao de uma classe so (0-1-0): DENTRO desta fila o tamanho
   manda-o a fila, e um `.w-poco--24` escrito no template era ignorado em
   silencio — o mesmo mecanismo que fez a borda tracejada do `.w-cel--vazia`
   sair solida. Aqui o certo e mesmo a fila mandar (uma peca de 24px no meio
   de outras de 26px so desalinhava a fila), portanto os templates deixaram de
   pedir o tamanho em vez de o CSS passar a obedecer. */
.w-pecas__mais {
    font-size: 10px;
    color: var(--w-fraco);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* O boneco vestido dentro de um cartao da linguagem nova. O `estilo.css`
   pinta o canvas de #1b1f24, que era o painel antigo e agora ficaria mais
   claro que o cartao — o boneco parecia estar num quadrado por cima da
   tela em vez de dentro dela. As medidas e a grelha dos quatro
   arquetipos ficam onde estao: so muda a cor. */
.w-cartao.boneco canvas {
    background: var(--w-poco);
    border: 1px solid var(--w-linha);
}
.w-cartao.boneco figcaption { color: var(--w-fraco); }

/* ---------------------------------------------------------------------
   Grelha de cartoes (o menu de balanceamento)
   --------------------------------------------------------------------- */
.w-grelha {
    display: grid;
    /* O `min(320px, 100%)` e nao `320px`: um minimo RIGIDO nao encolhe quando
       o espaco e menor do que ele, e a 375px de janela a faixa ficava 15px
       mais larga do que o proprio contentor e o conteudo saia por fora. E o
       mesmo mecanismo que ja esta documentado no `.w-linha-reserva`. */
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 14px;
    align-items: start;
}
.w-grelha .w-cartao { margin: 0; height: 100%; }

/* Chapa de numero — "200 conjuntos", "6058 itens". */
.w-chapas { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.w-chapa {
    flex: 1 1 150px;
    padding: 10px 14px;
    border: 1px solid var(--w-linha);
    border-radius: 8px;
    background: linear-gradient(180deg, var(--w-cartao-topo), var(--w-cartao-base));
}
.w-chapa__r {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--w-fraco);
}
.w-chapa__v {
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--w-texto);
}
.w-chapa__v small { font-size: .8rem; color: var(--w-fraco); font-weight: 400; }
.w-chapa--atencao { border-color: rgba(245, 195, 77, .45); }
.w-chapa--atencao .w-chapa__v { color: var(--w-ouro); }
/* Uma chapa que TAMBEM e o atalho para as linhas que ela conta. Sem isto o
   numero ficava sublinhado e azul de link, e o bloco de chapas — que se le
   como um placar — passava a parecer um menu. */
a.w-chapa { text-decoration: none; color: inherit; }
a.w-chapa:hover { border-color: var(--w-linha-forte); background: rgba(56, 224, 255, .05); }

/* ---------------------------------------------------------------------
   Pares rotulo/valor em duas colunas (a meta da ficha da wiki)
   --------------------------------------------------------------------- */
.w-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 20px; }
.w-meta__l {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(148, 163, 184, .07);
    font-size: 12.5px;
    min-width: 0;
}
/* ⚠️ O rotulo nao quebra, mas TEM de poder encolher. Como item de flex ele
   ficava com `min-width: auto` — ou seja, a largura minima dele e o
   min-content, que com `nowrap` e a FRASE INTEIRA (253px numa coluna de
   255px). Sobravam 2px para o valor, e o `overflow-wrap: anywhere` do `<b>`
   ao lado partia-o letra a letra: no /folgas o «ja reservado» saia como um
   fio vertical de 8x206px por fora da caixa, e a pagina ganhava barra
   horizontal. O `min-width: 0` do `.w-meta__l` e do CONTENTOR e nao se
   herda — tem de estar aqui. */
.w-meta__l span {
    color: var(--w-fraco);
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.w-meta__l b { color: var(--w-ciano); font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.w-meta__l b.ouro { color: var(--w-ouro); }
/* O rotulo de um atributo pinta-se com a cor DELE. A classe `.w-cor-*` esta
   no proprio elemento, entao ele proprio le a variavel que ela define. */
.w-meta__l span.w-att { color: var(--cor-atributo, var(--w-fraco)); }
.w-meta__l b.fraco { color: var(--w-fraco); font-weight: 400; }

/* ---------------------------------------------------------------------
   Avisos dentro da linguagem nova
   --------------------------------------------------------------------- */
.w-nota {
    border: 1px solid var(--w-linha);
    border-left: 3px solid var(--w-fraco);
    border-radius: 6px;
    background: rgba(0, 0, 0, .22);
    padding: .6rem .85rem;
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--w-texto-2);
}
.w-nota strong { color: var(--w-texto); }
.w-nota--aviso { border-left-color: var(--w-ouro); }
.w-nota--erro { border-left-color: var(--w-vermelho); color: #ffc9ce; }
/* Numero que so aparece quando ha alguma coisa errada (o «coisas por
   resolver» do /builder/<projecto>). ⚠️ A classe estava no template sem regra
   nenhuma: o aviso ficava igual aos outros numeros e desaparecia sem deixar
   rasto — exactamente o contrario do que a classe existe para fazer. */
.w-mau { color: var(--w-vermelho); }
/* O risco horizontal que separa dois caminhos dentro do mesmo cartao. O `<hr>`
   por omissao traz a moldura embutida do navegador, que neste fundo escuro
   sai como uma barra clara. */
.w-risca {
    border: 0;
    border-top: 1px solid var(--w-linha);
    margin: 16px 0;
}
.w-nota--ok { border-left-color: var(--w-verde); }
.w-nota:last-child { margin-bottom: 0; }

/* Tabela dentro da linguagem nova (a curva do ItemClass). */
.w-cartao table { background: transparent; border: 0; border-radius: 0; }
.w-cartao th {
    font-size: 10px;
    letter-spacing: .12em;
    color: var(--w-fraco);
    border-bottom: 1px solid var(--w-linha);
}
.w-cartao td { border-bottom: 1px solid rgba(148, 163, 184, .07); }
.w-cartao tbody tr:hover { background: rgba(56, 224, 255, .045); }

/* =====================================================================
   O PAINEL — as pecas que a wiki nao tem
   =====================================================================
   Acrescentado em 16-08-2026, quando a linguagem passou das 8 telas de
   balanceamento para o painel inteiro. A wiki e um site de leitura: nao tem
   barra de administracao, nao tem busca com escopo, nao tem formulario de
   accao destrutiva nem tela de entrada. Estas sao essas pecas, escritas com
   os MESMOS tokens (--w-*) para nao nascer uma terceira estetica.

   A regra que vale aqui como valia la: **nada de `style=` na marcacao.** A CSP
   e `style-src 'self'` SEM 'unsafe-inline' — um `style="flex:1"` e bloqueado
   em silencio, e a tela sai torta sem nada a dizer porque. Foi assim que os
   campos de busca e de motivo ficaram com largura de conteudo em vez de
   ocuparem a linha: os `style="flex:1;min-width:260px"` que la estavam nunca
   chegaram a valer. Quem precisa crescer leva `.w-campo--cresce`.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Barra do topo — UMA fila, com gavetas
   ---------------------------------------------------------------------
   21-08-2026. Antes eram duas filas: a de cima com marca, busca e operador, a
   de baixo com um destino por pastilha. Com dezanove destinos a segunda fila
   embrulhava em duas alturas num portatil, e o topo comia 116px de ecra em
   TODA navegacao.

   O que encolheu nao foi o CSS: foi a contagem. Os destinos passaram a viver
   dentro de gavetas (`app/bancadas.py`), e cinco nomes curtos cabem ao lado da
   marca e do operador. O topo voltou a uma linha (58px).

   As gavetas sao `<details>`; a lista e um `<div>` posicionado por baixo. Sem
   `overflow: hidden` em lado nenhum deste caminho — um `overflow` no `.w-topo`
   ou no `.w-nav` corta a lista e o sintoma e "a gaveta abre vazia". */
.w-topo {
    position: sticky;
    top: 0;
    z-index: 20;
    background: linear-gradient(180deg, #0d1220, #0a0e17);
    border-bottom: 1px solid var(--w-linha);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
.w-topo__fila {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 18px;
    max-width: 1500px;
    margin: 0 auto;
}

/* O `main` do estilo.css trava em 1400px; a barra do topo vai a 1500 e as
   duas tem de acabar no mesmo sitio, senao o conteudo fica visivelmente
   desalinhado da marca. */
main { max-width: 1500px; padding: 18px; }

.w-marca {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    text-decoration: none;
}
/* A logo tem 440x152 com muita transparencia em volta; altura fixa mais
   `width: auto` mantem a proporcao sem depender do tamanho do PNG. */
.w-marca img { height: 24px; width: auto; display: block; }
/* Em que bancada se esta. Com duas abas abertas no mesmo desenho — o painel e
   a oficina — o menu diferente demora um segundo a registar; a palavra nao. */
.w-marca__selo {
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--w-fraco);
    border: 1px solid var(--w-linha-forte);
    border-radius: 999px;
    padding: 1px 7px;
    line-height: 1.5;
}
.bancada-build .w-marca__selo {
    color: var(--w-ciano);
    border-color: var(--w-linha-viva);
    background: var(--w-ciano-fraco);
}
.w-topo__quem {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}
.w-topo__quem .w-email {
    color: var(--w-fraco);
    font-size: 12px;
    /* 14ch e nao 22: o molde ja so imprime a parte antes do `@`. */
    max-width: 14ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------
   Os destinos: pastilhas soltas e gavetas
   ---------------------------------------------------------------------
   ⚠️ Classes proprias (`w-nav__*`) e nao `w-pastilha`: essa ja e usada DENTRO
   das telas (as pastilhas de atributo em atributos.html, as familias em
   balanceamento.html) e um teste chega a procura-la no HTML. Pintar o menu com
   a mesma classe amarrava as duas coisas — mexer na cor do menu mudava a cor
   de um atributo no meio de uma ficha. */
.w-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    min-width: 0;
    /* ⚠️ `0 0 auto` e nao o `0 1 auto` de omissao. MEDIDO a 1024px: com a
       barra a poder encolher, o flexbox tirava-lhe largura antes de tirar a
       busca (que pede 320px de base), a fila de nomes embrulhava em duas
       alturas e o topo voltava aos 85px — metade do ganho, no tamanho de ecra
       de um portatil. Quem cede espaco e a busca, que tem `min-width: 0` e
       encolhe ate ao campo ainda dar para escrever. */
    flex: 0 0 auto;
    /* ⚠️ As tres linhas seguintes desfazem o seletor de ELEMENTO `nav {}` do
       estilo.css (linha 34), que ainda desenha a barra das telas antigas:
       fundo proprio, `padding: .7rem 1.2rem` e um `border-bottom`. Sem isto o
       menu sai como uma segunda barra desenhada DENTRO da barra do topo — com
       risco por baixo e o dobro da altura, que e exactamente o que esta
       mudanca veio tirar. */
    background: none;
    border: 0;
    padding: 0;
}
.w-nav__item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: .32rem .6rem;
    border: 1px solid transparent;
    border-radius: 7px;
    color: var(--w-texto-2);
    text-decoration: none;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
    /* O triangulo do `<details>` nativo: fora. Ele so existe no summary, e sem
       ele os dois tipos de entrada (pastilha solta e gaveta) alinham igual. */
    list-style: none;
}
.w-nav__item::-webkit-details-marker { display: none; }
.w-nav__item:hover {
    background: var(--w-elevado);
    border-color: var(--w-linha-forte);
    color: var(--w-texto);
}
.w-nav__item:focus-visible {
    outline: none;
    border-color: var(--w-linha-viva);
    box-shadow: 0 0 0 3px rgba(56, 224, 255, .12);
}
/* Onde se esta. Fundo E filete em baixo: so a cor do texto nao chega a
   distinguir-se num monitor mal calibrado, que e o do dono. */
.w-nav__item--aceso,
.w-nav__gaveta--aceso > .w-nav__item {
    background: var(--w-ciano-fraco);
    border-color: var(--w-linha-viva);
    color: var(--w-ciano-claro);
    box-shadow: inset 0 -2px 0 var(--w-ciano);
}
/* `/publicar` e o unico botao da barra que MUDA o jogo de todos os jogadores.
   Fica dourado nas duas bancadas — nao para ser bonito, para nao se carregar
   nele a pensar que e mais uma tela de leitura. */
.w-nav__item--destaque {
    color: var(--w-ouro);
    border-color: rgba(245, 195, 77, .3);
}
.w-nav__item--destaque:hover {
    color: var(--w-ouro);
    border-color: rgba(245, 195, 77, .55);
    background: rgba(245, 195, 77, .1);
}
.w-nav__item--destaque.w-nav__item--aceso {
    background: rgba(245, 195, 77, .12);
    border-color: rgba(245, 195, 77, .5);
    color: var(--w-ouro);
    box-shadow: inset 0 -2px 0 var(--w-ouro);
}

.w-nav__gaveta { position: relative; }
.w-nav__seta {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: .55;
    transition: transform .12s ease;
}
.w-nav__gaveta[open] .w-nav__seta { transform: rotate(180deg); }

.w-nav__lista {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;
    min-width: 260px;
    max-width: min(340px, 92vw);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: linear-gradient(180deg, var(--w-cartao-topo), var(--w-cartao-base));
    border: 1px solid var(--w-linha-forte);
    border-radius: var(--w-raio);
    box-shadow: var(--w-sombra);
}
/* Perto da borda direita (`Publicar`, `Mundo` num ecra estreito) a gaveta
   sairia do ecra. Ancorar a ULTIMA pela direita resolve o caso real sem
   medicao nenhuma em JavaScript. */
.w-nav__gaveta:last-of-type .w-nav__lista { left: auto; right: 0; }

.w-nav__link {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: .4rem .55rem;
    border-radius: 7px;
    border-left: 2px solid transparent;
    text-decoration: none;
    color: var(--w-texto-2);
}
.w-nav__link:hover { background: var(--w-elevado); color: var(--w-texto); }
.w-nav__link--aceso {
    background: var(--w-ciano-fraco);
    border-left-color: var(--w-ciano);
    color: var(--w-ciano-claro);
}
.w-nav__nome { font-size: 13px; }
/* A dica e o que a tela FAZ, numa linha. Existe porque metade destes nomes
   ("Fichas", "Molde", "Bundles") so dizem alguma coisa a quem ja sabe — e a
   oficina vai ter outro operador alem do dono. */
.w-nav__dica {
    font-size: 11px;
    color: var(--w-fraco);
    line-height: 1.35;
}
.w-nav__link--aceso .w-nav__dica { color: var(--w-texto-2); }

/* Ecra estreito: a fila embrulha e a gaveta passa a ocupar a largura toda,
   ancorada a esquerda da barra e nao do nome — a 380px uma lista de 260px
   pendurada no ultimo nome sairia meio ecra para fora. */
@media (max-width: 720px) {
    .w-topo__fila { flex-wrap: wrap; gap: 8px; }
    .w-nav { order: 3; width: 100%; }
    .w-nav__lista,
    .w-nav__gaveta:last-of-type .w-nav__lista {
        left: 0;
        right: auto;
        max-width: calc(100vw - 36px);
    }
}

/* ---------------------------------------------------------------------
   A busca unica
   ---------------------------------------------------------------------
   Uma caixa que procura personagem, conta, Discord e IP ao mesmo tempo. Fica
   na barra e nao numa tela propria porque a pergunta ("quem e este?") aparece
   no meio de qualquer outra tarefa. */
.w-busca {
    position: relative;
    /* Base 220 e nao 320 desde 21-08-2026: a barra do topo passou a ter a fila
       de destinos na MESMA linha, e a base e o que o flexbox reparte antes de
       encolher fosse o que fosse. Com 320 a fila embrulhava a 1024px. O
       `max-width` continua a deixa-la crescer ate 560 quando ha espaco. */
    flex: 1 1 220px;
    min-width: 0;
    max-width: 560px;
    display: flex;
}
.w-busca input {
    width: 100%;
    background: var(--w-poco);
    border: 1px solid var(--w-linha-forte);
    color: var(--w-texto);
    border-radius: 7px;
    padding: .42rem .7rem .42rem 2rem;
    font: inherit;
    font-size: 13px;
}
/* A busca do TOPO divide a fila com a marca e o operador; a de dentro de um
   cartao tem a largura toda para si e leva um botao ao lado (a de cima nao
   leva: la o Enter chega). Sem isto o campo saia com 560px no meio de um
   cartao de 1200 e parecia meio desenhado. */
.w-busca--larga { max-width: none; gap: 8px; margin: 0 0 10px; }
.w-busca--larga input { flex: 1 1 auto; }
.w-busca input::placeholder { color: var(--w-fraco); }
.w-busca input:focus {
    outline: none;
    border-color: var(--w-linha-viva);
    box-shadow: 0 0 0 3px rgba(56, 224, 255, .12);
}
/* A lupa e um pseudo-elemento com um caractere, e nao um <img> nem um SVG
   embutido: menos um pedido, e a CSP nao precisa de `img-src` novo. */
.w-busca::before {
    content: "\2315";
    position: absolute;
    left: .6rem;
    top: 50%;
    transform: translateY(-52%) rotate(-45deg);
    color: var(--w-fraco);
    font-size: 14px;
    pointer-events: none;
}

/* ---------------------------------------------------------------------
   Etiquetas de estado
   ---------------------------------------------------------------------
   `--ok` e `--erro` faltavam: o painel dizia "banida" e "online" com uma cor
   de texto solta (`.rotulo-banido`), que num cartao escuro se le como texto
   colorido e nao como ESTADO. */
.w-etiqueta--ok {
    border-color: rgba(61, 220, 151, .45);
    background: rgba(61, 220, 151, .1);
    color: var(--w-verde);
}
.w-etiqueta--erro {
    border-color: rgba(255, 93, 108, .45);
    background: rgba(255, 93, 108, .1);
    color: var(--w-vermelho);
}
/* Um ponto a pulsar seria ruido numa lista de 50; o ponto parado ja diz. */
.w-etiqueta--ok::before,
.w-etiqueta--erro::before {
    content: "\25CF";
    margin-right: 5px;
    font-size: 8px;
    vertical-align: middle;
}

/* ---------------------------------------------------------------------
   Linhas de accao (formularios curtos)
   ---------------------------------------------------------------------
   Substitui o `.linha` do estilo.css nas telas convertidas. O campo que tem
   de ocupar a folga leva `.w-campo--cresce` — em classe, porque o `style=`
   que fazia isso era bloqueado pela CSP. */
.w-acoes {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.w-acoes + .w-acoes { margin-top: 10px; }
/* ⚠️ A BASE `.w-campo` nunca chegou a ser escrita — so os dois modificadores.
   Um `<label>` sem regra e inline, portanto o nome do campo, a caixa e a
   frase de ajuda fluiam os tres na MESMA linha, em 34 campos de 7 telas
   (/rasto, /sons, /efeitos, /criar_item, /efeito_criar, /sprites, /assets).
   O campo e uma coluna: nome em cima, caixa no meio, ajuda em baixo. */
.w-campo {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
/* A ajuda de um campo e uma FRASE, nao uma celula de lista: aqui o `.w-sub`
   global (nowrap + reticencias) tem de voltar a embrulhar, senao a explicacao
   ou e cortada ou estica a caixa toda. */
.w-campo .w-sub { white-space: normal; overflow: visible; text-overflow: clip; }
/* (o tecto do seletor de ficheiro dentro de um `.w-campo` esta mais abaixo,
   ao pe do `.w-cartao input[type=file]` — os dois selectores empatam em
   especificidade e la o meu e o ultimo, que e o que ganha) */
.w-campo--cresce { flex: 1 1 260px; min-width: 0; }
.w-campo--curto { width: 7rem; flex: 0 0 auto; }

/* Formulario do /builder e do /conjuntos/N. ⚠️ Tambem nunca foi escrito: os
   `<form class="w-forma">` ficavam bloco simples com os `<label>` inline, e
   campos e botao encavalitavam-se todos na mesma faixa de 32px de altura.
   Por omissao empilha; o `--linha` poe em fila. */
.w-forma {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    min-width: 0;
}
.w-forma--linha {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

/* Campos e botoes na linguagem nova. O `estilo.css` continua a servir as
   telas por converter; estas regras so ganham dentro de `.w-cartao` e da
   barra, para nao mexer no que ainda nao foi tocado. */
.w-cartao input[type=text], .w-cartao input[type=password],
.w-cartao input[type=number], .w-cartao input[type=search],
.w-cartao input[type=email], .w-cartao select, .w-cartao textarea {
    background: var(--w-poco);
    border: 1px solid var(--w-linha-forte);
    color: var(--w-texto);
    border-radius: 6px;
    padding: .42rem .6rem;
    font: inherit;
    font-size: 13px;
}
.w-cartao input:focus, .w-cartao select:focus, .w-cartao textarea:focus {
    outline: none;
    border-color: var(--w-linha-viva);
    box-shadow: 0 0 0 3px rgba(56, 224, 255, .12);
}
.w-botao {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(180deg, #1a5c78, #124156);
    border: 1px solid var(--w-linha-viva);
    color: var(--w-ciano-claro);
    border-radius: 6px;
    padding: .42rem .95rem;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
.w-botao:hover { border-color: var(--w-ciano); color: #fff; }
.w-botao--fantasma {
    background: transparent;
    border-color: var(--w-linha-forte);
    color: var(--w-texto-2);
    font-weight: 500;
}
.w-botao--fantasma:hover { border-color: var(--w-linha-viva); color: var(--w-texto); }
/* Accao destrutiva: vermelha, e SEMPRE com o campo de motivo ao lado. */
.w-botao--perigo {
    background: linear-gradient(180deg, #7a2530, #571a22);
    border-color: rgba(255, 93, 108, .5);
    color: #ffc9ce;
}
.w-botao--perigo:hover { border-color: var(--w-vermelho); color: #fff; }
/* A accao principal de um cartao com varios botoes (o /builder pede-a em tres
   sitios). Sem regra, ela era indistinguivel das secundarias e a hierarquia
   dos botoes desaparecia. */
.w-botao--forte {
    background: linear-gradient(180deg, #1f7396, #16536d);
    border-color: var(--w-ciano);
    color: #fff;
}
.w-botao--forte:hover { border-color: var(--w-ciano-claro); }

/* ---------------------------------------------------------------------
   Paginacao e estado vazio
   --------------------------------------------------------------------- */
.w-paginacao {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    padding: 10px 4px 0;
    font-size: 12px;
    color: var(--w-fraco);
}
.w-vazio {
    padding: 18px 4px;
    color: var(--w-fraco);
    font-style: italic;
    font-size: 13px;
    margin: 0;
}

/* ---------------------------------------------------------------------
   Entrada (login)
   --------------------------------------------------------------------- */
.w-entrada { max-width: 380px; margin: 10vh auto; }
.w-entrada__logo {
    display: block;
    width: 100%;
    max-width: 240px;
    height: auto;
    margin: 0 auto 1.4rem;
}
.w-entrada label {
    display: block;
    margin: .8rem 0 .25rem;
    color: var(--w-fraco);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.w-entrada input { width: 100%; }
.w-entrada .w-botao { width: 100%; justify-content: center; margin-top: 1.2rem; }

/* ---------------------------------------------------------------------
   Grelhas das listas do painel
   ---------------------------------------------------------------------
   Mesma decisao das listas da wiki: grelha e nao <table>, com as pistas
   partilhadas entre o cabecalho e as linhas, para as colunas baterem de cima
   a baixo sem depender do conteudo. */
.w-linhas.contas   { --w-grade: 56px minmax(140px, 1fr) 70px 70px minmax(120px, 1fr) 92px; }
.w-linhas.chars    { --w-grade: 56px minmax(150px, 1.3fr) minmax(110px, 1fr) 56px 110px 70px 92px; }
.w-linhas.discord  { --w-grade: minmax(150px, 1.1fr) minmax(140px, 1fr) minmax(150px, 1fr) 120px 92px; }
.w-linhas.mercado  { --w-grade: 56px minmax(120px, 1fr) 76px 56px 100px minmax(110px, 1fr) 92px; }
/* Uma coluna a mais desde 21-08-2026: o EMBLEMA, recomposto da arte do
   cliente. 32px chegam para o poco de 24 e a gutter. */
.w-linhas.clas     { --w-grade: 56px 32px minmax(140px, 1fr) 56px 76px 84px 84px; }
@media (max-width: 900px) {
    .w-linhas.contas  { --w-grade: 48px minmax(120px, 1fr) 60px 84px; }
    .w-linhas.chars   { --w-grade: 48px minmax(130px, 1fr) 56px 84px; }
    .w-linhas.discord { --w-grade: minmax(130px, 1fr) minmax(120px, 1fr) 84px; }
    .w-linhas.contas  .w-linha > :nth-child(n+5),
    .w-linhas.contas  .w-linhas__cab > :nth-child(n+5),
    .w-linhas.chars   .w-linha > :nth-child(n+5),
    .w-linhas.chars   .w-linhas__cab > :nth-child(n+5),
    .w-linhas.discord .w-linha > :nth-child(n+4),
    .w-linhas.discord .w-linhas__cab > :nth-child(n+4) { display: none; }
}
/* Coluna de accao, sempre a ultima e sempre encostada a direita. */
.w-linha__fim { display: flex; justify-content: flex-end; gap: 6px; }
.w-linha__fim .w-botao { padding: .22rem .55rem; font-size: 11px; }

/* Valor monetario e sempre tabular: numa coluna alinhada a direita o
   algarismo que se perde e o da ESQUERDA, e aqui isso e dinheiro. */
.w-dinheiro { font-variant-numeric: tabular-nums; color: var(--w-ouro); }

/* ---------------------------------------------------------------------
   Previas dos anuncios da Town
   ---------------------------------------------------------------------
   As duas lado a lado — o que esta no jogo hoje e o que vai entrar — porque a
   pergunta que se faz aqui e "mudou mesmo?", e ela nao se responde com uma
   imagem de cada vez. O fundo do poco e o do jogo: o banner tem cantos
   transparentes, e num fundo claro veria-se um recorte que o jogador nunca ve. */
.anuncio-previas {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 0 14px;
}
.anuncio-previa { margin: 0; }
.anuncio-previa figcaption {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--w-fraco);
    margin-bottom: 6px;
}
.anuncio-previa img {
    display: block;
    max-width: 100%;
    height: auto;
    background: var(--w-poco);
    border: 1px solid var(--w-linha);
    border-radius: 6px;
}
/* A que vai entrar leva a moldura viva: e a unica diferenca entre as duas
   quando as imagens se parecem. */
.anuncio-previa--nova img { border-color: var(--w-linha-viva); }
.anuncio-previa--nova figcaption { color: var(--w-ciano); }

/* O seletor de ficheiro nativo e feio em todo o lado; ao menos que combine
   com os outros campos. */
.w-cartao input[type=file] {
    background: var(--w-poco);
    border: 1px solid var(--w-linha-forte);
    color: var(--w-texto-2);
    border-radius: 6px;
    padding: .34rem .5rem;
    font: inherit;
    font-size: 12px;
    /* O campo nativo nunca encolhe sozinho: a largura minima dele e o texto
       do botao mais o «Nenhum ficheiro selecionado», ~278px. Onde a caixa que
       o contem for mais estreita ele sai por fora e pinta-se em cima do
       vizinho (foi o que aconteceu na grelha do /assets). */
    max-width: 100%;
    box-sizing: border-box;
}
/* Dentro de um `.w-campo` o campo enche a celula, que e o que se quer nas
   grelhas; solto num cartao a toda a largura ele esticava para 1370px
   (medido no /sprites). ⚠️ Tem de estar DEPOIS do bloco de cima: os dois
   selectores empatam em especificidade (0-2-1) e so a ordem decide. */
.w-campo input[type=file] { max-width: 30rem; }
.w-cartao input[type=file]::file-selector-button {
    background: transparent;
    border: 1px solid var(--w-linha-forte);
    color: var(--w-texto-2);
    border-radius: 4px;
    padding: .2rem .6rem;
    margin-right: .6rem;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}
.w-cartao input[type=file]::file-selector-button:hover {
    border-color: var(--w-linha-viva);
    color: var(--w-texto);
}

/* ---------------------------------------------------------------------
   Estudio — palcos de personagens para gravar video
   ---------------------------------------------------------------------
   O palco e a area que o OBS captura: os fundos `fundo-*` sao cores de
   chroma, e por isso NAO usam tokens do tema — um verde de recorte tem de
   ser aquele verde em qualquer tema. O resto (barras de controle, fichas de
   slot) fala a linguagem `w-` normal. Nada de `style=` na marcacao; a cor
   personalizada do fundo entra pelo JS (CSSOM), que a CSP permite. */
.w-estudio__palco {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    align-items: flex-end;
    justify-content: center;
    padding: 30px 18px 22px;
    border-radius: 10px;
    border: 1px solid var(--w-linha);
    min-height: 340px;
    background: var(--w-poco);
}
.w-estudio__palco.fundo-verde       { background: #00b140; }
.w-estudio__palco.fundo-verde-puro  { background: #00ff00; }
.w-estudio__palco.fundo-azul        { background: #0047bb; }
.w-estudio__palco.fundo-magenta     { background: #ff00ff; }
.w-estudio__palco.fundo-preto       { background: #000; }
.w-estudio__palco.fundo-branco      { background: #fff; }
/* O xadrez diz "aqui e transparente" — e o fundo de conferencia, nao de
   gravacao (WebM nao carrega alfa; a gravacao troca-o por preto). */
.w-estudio__palco.fundo-xadrez {
    background: repeating-conic-gradient(#3a4150 0% 25%, #262c38 0% 50%);
    background-size: 22px 22px;
}
/* Em tela cheia o palco E o video: centra e esconde qualquer resto. */
.w-estudio__palco:fullscreen {
    align-items: center;
    align-content: center;
    border: 0;
    border-radius: 0;
}

.w-estudio__slot { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; }
.w-estudio__slot canvas { display: block; }
.w-estudio__slot.espelhado canvas { transform: scaleX(-1); }

/* A ficha de configuracao por baixo de cada slot. Compacta de proposito: o
   assunto da tela e o palco, nao o formulario. */
.w-estudio__config {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 228px;
    padding: 8px;
    border: 1px solid var(--w-linha);
    border-radius: 8px;
    background: linear-gradient(180deg, var(--w-cartao-topo), var(--w-cartao-base));
    font-size: 11.5px;
    color: var(--w-texto-2);
}
.w-estudio__config select,
.w-estudio__config input[type=number] {
    background: var(--w-poco);
    border: 1px solid var(--w-linha-forte);
    color: var(--w-texto);
    border-radius: 5px;
    padding: .2rem .35rem;
    font: inherit;
    font-size: 11.5px;
    max-width: 100%;
}
.w-estudio__config .linha { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.w-estudio__config .linha > select { flex: 1 1 auto; min-width: 0; }
.w-estudio__config .anims { display: flex; gap: 8px; flex-wrap: wrap; }
.w-estudio__config .anims label { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; }

/* Botao pequeno das fichas (sortear, trocar, tirar peca). */
/* ⚠️ `--pequeno` e o mesmo que `--mini`: o CSS tinha o `--mini` sem ninguem o
   usar e os templates do /builder pediam `--pequeno` sem regra nenhuma — os
   dois lados da mesma confusao de nome. Ficam ligados aqui em vez de se
   renomear seis sitios e arriscar deixar um para tras. */
.w-botao--mini, .w-botao--pequeno {
    padding: .18rem .5rem;
    font-size: 11px;
    letter-spacing: .04em;
}

/* O seletor com busca (conjunto, arma, peca): um botao que mostra a escolha
   e um painel por cima com campo e resultados. */
.w-estudio__escolha { position: relative; display: flex; min-width: 0; flex: 1 1 auto; }
.w-estudio__escolha > button {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    background: var(--w-poco);
    border: 1px solid var(--w-linha-forte);
    color: var(--w-texto);
    border-radius: 5px;
    padding: .2rem .45rem;
    font: inherit;
    font-size: 11.5px;
    cursor: pointer;
}
.w-estudio__escolha > button:hover { border-color: var(--w-linha-viva); }
.w-estudio__painel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    width: 300px;
    max-width: 74vw;
    padding: 8px;
    border: 1px solid var(--w-linha-forte);
    border-radius: 8px;
    background: #0d1220;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.w-estudio__painel input[type=search] {
    width: 100%;
    box-sizing: border-box;
    background: var(--w-poco);
    border: 1px solid var(--w-linha-forte);
    color: var(--w-texto);
    border-radius: 6px;
    padding: .3rem .5rem;
    font: inherit;
    font-size: 12px;
}
.w-estudio__painel ul {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 260px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.w-estudio__painel li button {
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 5px;
    color: var(--w-texto-2);
    padding: .26rem .4rem;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.w-estudio__painel li button:hover { background: rgba(56, 224, 255, .08); color: var(--w-texto); }
.w-estudio__painel li small { color: var(--w-fraco); }

/* As pecas avulsas escolhidas a mao, como fichas com um ✕. */
.w-estudio__extras { display: flex; flex-wrap: wrap; gap: 4px; }
.w-estudio__extras button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    background: var(--w-poco);
    border: 1px solid var(--w-linha);
    color: var(--w-texto-2);
    border-radius: 999px;
    padding: .1rem .5rem;
    font: inherit;
    font-size: 10.5px;
    cursor: pointer;
}
.w-estudio__extras button:hover { border-color: var(--w-vermelho); color: #ffc9ce; }

/* As barras de controle do estudio: rotulos curtos com o campo colado. */
.w-estudio__toolbar .w-acoes { align-items: center; }
.w-estudio__toolbar label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--w-texto-2);
    white-space: nowrap;
}
.w-estudio__toolbar h3 { margin: 14px 0 8px; font-size: 13px; color: var(--w-texto); }
.w-estudio__toolbar select,
.w-estudio__toolbar input[type=number] {
    background: var(--w-poco);
    border: 1px solid var(--w-linha-forte);
    color: var(--w-texto);
    border-radius: 6px;
    padding: .24rem .4rem;
    font: inherit;
    font-size: 12px;
}
.w-estudio__toolbar input[type=number] { width: 64px; }
.w-estudio__toolbar input[type=range] { accent-color: var(--w-ciano); }
.w-estudio__toolbar input[type=color] {
    width: 34px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--w-linha-forte);
    border-radius: 6px;
    background: var(--w-poco);
}

/* Modo limpo: fica so o palco — e o que o OBS ve numa captura de janela. */
.w-estudio--limpo .w-estudio__config,
.w-estudio--limpo .w-estudio__so-editor,
.w-estudio--limpo .w-estudio__toolbar { display: none; }

/* O destaque: palco a esquerda, controles a direita. */
.w-estudio__duplo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 14px;
    align-items: start;
}
@media (max-width: 1000px) { .w-estudio__duplo { grid-template-columns: 1fr; } }
.w-estudio__duplo .w-estudio__palco { min-height: 560px; align-items: center; align-content: center; }
/* O canvas do destaque tem resolução interna generosa (1,8× a altura, para a
   arma nunca cortar); quando a janela não chega, ENCOLHE a exibição em vez de
   estourar o cartão — a gravação usa a resolução interna, não a exibida. */
#destaque-tela { max-width: 100%; height: auto; }

/* A sequencia de passos do destaque. */
.w-estudio__passos { display: flex; flex-direction: column; gap: 6px; }
.w-estudio__passo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border: 1px solid var(--w-linha);
    border-radius: 7px;
    background: var(--w-poco);
    font-size: 12px;
}
.w-estudio__passo.a-tocar { border-color: var(--w-ciano); box-shadow: 0 0 0 2px var(--w-ciano-fraco); }
.w-estudio__passo select, .w-estudio__passo input {
    background: transparent;
    border: 1px solid var(--w-linha-forte);
    color: var(--w-texto);
    border-radius: 5px;
    padding: .16rem .3rem;
    font: inherit;
    font-size: 12px;
}
.w-estudio__passo .ordem { color: var(--w-fraco); font-variant-numeric: tabular-nums; }
.w-estudio__passo .tirar { margin-left: auto; }

/* ---------------------------------------------------------------------
   Telas de CONTEUDO (drops, caixa de fim de partida, vending, torneio)
   ---------------------------------------------------------------------
   Um SORTEIO e um cartao dentro do cartao: cabecalho com o nome e a chance,
   e por baixo os itens do pool. Os itens sao a mesma grelha `auto-fill` dos
   cacifos do pacote, mas cada celula leva DOIS campos (o id e o peso) em vez
   de um — por isso o minimo sobe de 132px para 156px: com 132 os dois campos
   ficavam com 50px cada e o peso de cinco digitos deixava de caber. */
.w-sorteios { display: flex; flex-direction: column; gap: 12px; }
.w-sorteio {
    border: 1px solid var(--w-linha);
    border-radius: 9px;
    background: rgba(15, 23, 42, .28);
    padding: 10px 12px 12px;
}
.w-sorteio__cabeca {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding-bottom: 8px;
    box-shadow: 0 1px 0 var(--w-linha);
}
.w-sorteio__cabeca label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--w-fraco);
}
.w-sorteio__cabeca .tirar { margin-left: auto; }
/* O sorteio que nunca cai. O loader carrega-o na mesma e escreve um aviso no
   log — que ninguem le. Aqui a moldura diz o mesmo sem se ler nada. */
.w-sorteio--nunca { border-color: var(--w-ouro); }

.w-itens { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 10px; margin: 10px 0 6px; }
.w-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    padding: 8px;
    border: 1px solid var(--w-linha);
    border-radius: 8px;
    background: rgba(15, 23, 42, .35);
}
.w-item--alvo { border-color: var(--w-ciano); box-shadow: 0 0 0 1px var(--w-ciano) inset; }
/* Indice do Nonposlist com efeito NEGATIVO (os `Decrease`, o Stun, a
   Confusion) ou item que o Iteminfo nao tem. Nos dois casos o servidor grava
   sem se queixar e quem paga e o jogador: no primeiro apanha um castigo, no
   segundo ve um icone que o cliente nao sabe desenhar. */
.w-item--atencao { border-color: var(--w-ouro); }
.w-item__nome {
    font-size: 11px;
    line-height: 1.25;
    text-align: center;
    min-height: 2.5em;
    overflow: hidden;
}
.w-item__campos { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; width: 100%; }
.w-item__campos label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--w-fraco);
}
.w-item input { width: 100%; text-align: center; font-variant-numeric: tabular-nums; box-sizing: border-box; }
/* A probabilidade resolvida (chance do sorteio x peso/total). E o numero que o
   ficheiro nao tem e que decide tudo. */
.w-item__p { font-size: 11px; color: var(--w-ciano); font-variant-numeric: tabular-nums; }

.w-linhas.mapas {
    --w-grade:
        56px                  /* id     decimal                            */
        56px                  /*        o mesmo em hexa                    */
        minmax(150px, 1fr)    /* nome   do maplist do cliente              */
        minmax(90px, 130px)   /* dific  Facil/Dificil/16P                  */
        minmax(150px, 1.2fr)  /* drops  sorteios + o que cai               */
        minmax(90px, 140px)   /* estado propria ou herdada                 */
        92px;                 /*        editar                             */
}
/* Os projecteis dos canhoes (tela /canhoes).
   ⚠️ Esta variante FALTAVA. Sem ela o `--w-grade` nao existe,
   `grid-template-columns: var(--w-grade)` fica invalido, cai para `none` e a
   grelha cria uma coluna implicita por celula — a lista inteira empilhava-se
   numa coluna so, cada linha seis vezes mais alta do que devia. Falha em
   silencio absoluto: nao ha erro em lado nenhum. */
.w-linhas.canhoes {
    --w-grade:
        56px                  /* #        indice                           */
        minmax(150px, 1.4fr)  /* projectil nome + etiquetas                */
        minmax(120px, 1fr)    /* numeros  o resumo                         */
        minmax(110px, 1fr)    /* movimento                                 */
        minmax(150px, 1.2fr)  /* efeitos                                   */
        92px;                 /*          editar                           */
}

@media (max-width: 900px) {
    .w-linhas.mapas { --w-grade: 52px minmax(110px, 1fr) minmax(84px, 130px) 76px; }
    .w-linhas.mapas .w-linha > :nth-child(2),
    .w-linhas.mapas .w-linhas__cab > :nth-child(2),
    .w-linhas.mapas .w-linha > :nth-child(4),
    .w-linhas.mapas .w-linhas__cab > :nth-child(4) { display: none; }
}

/* ---------------------------------------------------------------------
   A grelha de imagens (tela /assets)
   --------------------------------------------------------------------- */
/* `auto-fill` e nao `auto-fit`: com poucos resultados o `auto-fit` estica as
   celulas para encher a linha e um icone de 64px aparecia num cartao de 400px.
   O tamanho da celula e o do proprio icone mais o rodape. */
.w-assets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 14px;
}
.w-asset {
    margin: 0;
    padding: 8px;
    border: 1px solid var(--w-linha);
    border-radius: 6px;
    background: rgba(0, 0, 0, .22);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
/* Fundo axadrezado para se VER a transparencia: sobre o preto do painel, um
   pixel de alpha 0 e um pixel preto sao a mesma coisa na tela — e a diferenca
   entre os dois e o que decide se a arte fica com moldura preta no jogo. */
.w-asset img {
    image-rendering: auto;      /* a arte e um render 3D reduzido, nao pixel art */
    background-image:
        linear-gradient(45deg, rgba(148, 163, 184, .16) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(148, 163, 184, .16) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(148, 163, 184, .16) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(148, 163, 184, .16) 75%);
    background-size: 12px 12px;
    background-position: 0 0, 0 6px, 6px -6px, -6px 0;
    border-radius: 4px;
}
/* O lugar da pré-visualização quando não há pré-visualização possível (dois
   ícones do cliente têm cabeçalho não-TGA desde a origem). MESMAS medidas do
   `<img>` que substitui: uma caixa mais pequena desalinhava a grelha inteira e
   parecia mais uma avaria do que a explicação de uma. */
.w-asset__sem-previa {
    width: 64px;
    height: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 2px;
    text-align: center;
    border: 1px dashed var(--w-linha-forte);
    border-radius: 4px;
    background: rgba(0, 0, 0, .3);
}
.w-asset__sem-previa-rotulo { font-size: 9px; line-height: 1.15; color: var(--w-fraco); }
.w-asset__sem-previa-nota { font-size: 9px; line-height: 1.15; color: var(--w-ouro); }
.w-asset figcaption {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
    max-width: 100%;
}
.w-asset figcaption b { color: var(--w-ciano); font-size: 12px; }
/* O nome do item corta com reticencias em vez de esticar a celula: sao 2 222
   celulas e uma so com nome comprido desalinhava a grelha inteira. */
.w-asset figcaption .w-sub { max-width: 100%; }
.w-asset__acoes { display: flex; gap: 8px; font-size: 11px; }
/* O formulario de trocar a arte, e o bloco da arte em espera.
   ⚠️ ESTAS DUAS CLASSES NAO TINHAM REGRA NENHUMA e era esse o defeito: o
   `input[type=file]` nativo mede ~278px de largura MINIMA (o botao «Escolher
   ficheiro» mais o texto «Nenhum ficheiro selecionado») e nao encolhe sozinho.
   Como o `<form>` e item de flex, ficava com `min-width: auto` — ou seja, a
   largura minima dele e o min-content do campo — e o `align-items: center` do
   `.w-asset` centrava esses 278px sobre um cartao de ~123px, deixando ~76px a
   sair para CADA lado, por cima dos cartoes vizinhos. Media-se: 96 de 96
   cartoes a transbordar e 41px de barra horizontal na pagina.
   O `min-width: 0` e a metade que resolve — sem ele o `width: 100%` perde
   para o min-content do campo nativo e nada muda. */
.w-asset__envio, .w-asset__pendente {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-width: 0;
}
.w-asset__envio input[type=file] {
    width: 100%;
    min-width: 0;
    font-size: 10px;
}
/* Cinto de seguranca para o proximo filho que alguem meta no cartao: nenhum
   passa da largura da celula da grelha, e nenhum se recusa a encolher. */
.w-asset > * { max-width: 100%; min-width: 0; }

/* ---------------------------------------------------------------------
   A linha de um grupo da RESERVA (tela de publicar)
   --------------------------------------------------------------------- */
/* Tres colunas: a caixa de seleccao, o que o grupo e, e o que custa. O preco
   fica na ponta direita e alinhado com os outros de propósito — e o numero que
   decide se se carrega no botao, e ele tem de se poder comparar de relance. */
.w-linha-reserva {
    display: grid;
    grid-template-columns: auto 1fr minmax(120px, auto);
    align-items: start;
    gap: 12px;
    cursor: pointer;
}
/* Sem isto o `1fr` do meio nao encolhe: um item de grelha tem `min-width: auto`,
   que e o min-content do texto, e a 375px o cartao empurrava a PAGINA INTEIRA
   167px para fora (medido). */
.w-linha-reserva > * { min-width: 0; }
/* O `.w-sub` e uma celula de UMA linha (nowrap + reticencias) feita para as
   grelhas de lista. Neste cartao ele carrega FRASES, que tem de embrulhar — com
   o nowrap herdado a descricao do grupo media 459px dentro de uma coluna de 242
   e empurrava a pagina 167px para fora a 375px, e o rodape do formulario saia
   370px alem da margem e ficava cortado a 1265px (medidos os dois). O seletor e
   o CARTAO inteiro, e nao so a linha do grupo, porque foi assim que o segundo
   caso escapou ao primeiro conserto. */
#reserva .w-sub { white-space: normal; overflow: visible; }
/* A tabela das 66 colunas do /builder tropeca no MESMO nowrap: os avisos das
   colunas decifradas (20-08) sao frases inteiras — a fonte do rotulo e o que
   falta confirmar — e numa linha unica a da col9 media ~1400px, dava scroll
   horizontal a pagina toda e empurrava a 4a coluna para fora do ecra. Aqui o
   aviso embrulha e leva um teto; o teto e no SPAN (display block) porque
   max-width em inline nao faz nada. O select do som tambem: com 500 opcoes
   nomeadas ele dimensiona pela MAIS LARGA — trunca-se o controle fechado
   (a lista aberta do navegador expande alem do select e mostra tudo). */
.w-tabela--fina td .w-sub,
.w-tabela--fina td.w-sub { white-space: normal; overflow: visible; }
.w-tabela--fina td .w-sub { display: block; max-width: 34rem; }
.w-tabela--fina td.w-sub { max-width: 20rem; }
.w-tabela--fina select { max-width: 24rem; }
/* O cartao «Som e efeitos» da ficha do item (22-08-2026) tropeca no mesmo
   nowrap pela TERCEIRA vez. Aqui os paragrafos que explicam PORQUE a escolha e
   fechada — e a nota de que o painel nao sabe qual e o projectil de uma arma
   montada — sao frases inteiras fora de tabela: numa linha unica ficavam
   cortadas com reticencias, ou seja, o aviso desaparecia. O seletor e o CARTAO
   inteiro (a licao do `#reserva`: cercar so a linha deixou o segundo caso
   escapar). */
#som-e-efeitos .w-sub { white-space: normal; overflow: visible; }
/* A ficha do item divide o ecra com o boneco, entao a celula da escolha tem
   metade da largura da do /builder (226px medidos a 1000px de ecra): com
   `width: 100%` o `<select>` enchia-a toda e o ▶ que o `colunas.js` cria a
   seguir caia para a linha de baixo. O teto e RELATIVO a celula — um valor
   fixo em `rem` ou cortava o controle num ecra largo ou nao chegava num
   estreito. A lista ABERTA do navegador expande alem do controle, entao
   encurta-lo nao esconde a descricao de nenhum som. */
#som-e-efeitos select { max-width: calc(100% - 2.6rem); }
/* Num telemovel a tabela das colunas de referencia nao encolhe abaixo de
   461px: um `<select>` tem largura MINIMA intrinseca (a opcao mais larga) e
   nao ha teto que a desfaca. Medido a 375px: a pagina INTEIRA passava a rolar
   121px na horizontal, que e o mesmo defeito do `#reserva` visto de outro
   angulo. Com o scroll preso ao cartao, rola a tabela e nao o painel. */
#som-e-efeitos { overflow-x: auto; }
/* O ▶ do som (colunas.js). `vertical-align` porque o botao nasce DEPOIS do
   select, inline, e sem isto os dois desalinham na linha da tabela. */
.w-som-play { margin-left: .4rem; padding: .18rem .5rem; vertical-align: middle; }
.w-linha-reserva input[type="checkbox"] { margin-top: 3px; accent-color: var(--w-ciano); }
.w-linha-reserva input:disabled { cursor: default; }
.w-linha-reserva:has(input:disabled) { cursor: default; opacity: .72; }
.w-linha-reserva > b { text-align: right; color: var(--w-ciano); font-weight: 600; }
.w-linha-reserva > b.ouro { color: var(--w-ouro); }
.w-linha-reserva + .w-reserva-itens { margin-top: 10px; }

/* Os registos de um grupo, em cinco colunas alinhadas: nome | de | seta | para
   | ganho. Grelha e nao tabela porque isto vive dentro de uma `.w-nota`, e uma
   `<table>` ali herdava o cabecalho pegajoso das listas. Os numeros levam
   `tabular-nums` — sem isso "23.720.757" e "40.955.904" nao alinham e a
   comparacao que a coluna existe para permitir deixa de funcionar. */
.w-reserva-itens {
    display: grid;
    grid-template-columns: 1fr auto auto auto auto;
    gap: 2px 10px;
    align-items: baseline;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}
.w-reserva-itens > span { padding: 3px 0; border-bottom: 1px solid rgba(148, 163, 184, .07); }
.w-reserva-item__nome { color: var(--w-fraco); min-width: 0; overflow-wrap: anywhere; }
.w-reserva-item__de { color: var(--w-fraco); text-align: right; }
.w-reserva-item__seta { color: var(--w-fraco); }
.w-reserva-item__para { color: var(--w-ciano); font-weight: 600; text-align: right; }
.w-reserva-item__ganho { color: var(--w-ouro); text-align: right; }

@media (max-width: 640px) {
    /* A 375px cinco colunas nao cabem: o nome passa a ocupar a linha inteira e
       os numeros ficam por baixo, ainda alinhados entre si. */
    .w-reserva-itens { grid-template-columns: auto auto auto 1fr; }
    .w-reserva-item__nome { grid-column: 1 / -1; border-bottom: 0; padding-bottom: 0; }
}

@media (max-width: 640px) {
    .w-linha-reserva { grid-template-columns: auto 1fr; }
    .w-linha-reserva > b { grid-column: 2; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    .w-cartao--ligacao, .w-barra__pista i { transition: none; }
}

/* ---------------------------------------------------------------------
   Prévia do BUILDER — o xadrez é CSS, e não pixels.

   ⚠️ Até 20-08-2026 o xadrez era composto DENTRO do PNG. Ficava bonito e era
   inútil: o dono tentou copiar a imagem e ela vinha com o fundo cinzento
   colado — *"se eu tento copiar ele não vem com fundo transparente"*. Uma
   prévia serve para ver E para guardar; queimar o alpha só serve para a
   primeira metade.

   Aqui o quadriculado vive atrás da imagem. O olho recebe o mesmo sinal (se
   não se vêem quadrados, a arte não tem transparência) e o ficheiro que se
   descarrega continua a ser o verdadeiro.
   --------------------------------------------------------------------- */
.w-previa {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-start;
    margin: 10px 0 18px;
}
.w-previa figure { margin: 0; text-align: center; }
.w-previa img {
    display: block;
    image-rendering: pixelated;      /* o artista quer ver o pixel, não um borrão */
    background-color: #4a4a4a;
    background-image:
        linear-gradient(45deg, #606060 25%, transparent 25%),
        linear-gradient(-45deg, #606060 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #606060 75%),
        linear-gradient(-45deg, transparent 75%, #606060 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 4px;
    max-width: 100%;
}
.w-previa figcaption { margin-top: 4px; font-size: 12px; }
.w-previa__baixar {
    display: inline-block;
    margin-top: 2px;
    font-size: 12px;
}

/* ⚠️ A CSP do painel e `style-src 'self'` — SEM inline. Um `style="..."` num
   elemento e recusado e a regra some sem aviso nenhum (so um erro na consola,
   que ninguem le). Estas tres nasceram de atributos inline que estavam a ser
   engolidos na tela do builder. */
.w-coluna-estado { width: 5em; }
.w-coluna-area   { width: 9em; }
.w-codigo        { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.w-escondido     { display: none; }

/* ---------------------------------------------------------------------
   As portas do índice da oficina (`/oficina`)
   ---------------------------------------------------------------------
   Os mesmos destinos que estão nas gavetas do topo, mas em tamanho de leitura:
   é a tela onde se ESCOLHE o trabalho, e não a barra por onde se salta entre
   telas que já se conhece. Por isso o caminho (`/drops`) aparece — quem já
   sabe onde vai escreve-o na barra do navegador e não passa por aqui outra
   vez.

   `auto-fill` e não `auto-fit`: com quatro portas num grupo e um ecrã largo,
   o `auto-fit` estica cada uma para 400px e a grelha deixa de se ler como
   grelha. */
.w-portas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
}
.w-porta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid var(--w-linha);
    border-left: 2px solid var(--w-linha-forte);
    border-radius: var(--w-raio);
    background: var(--w-poco);
    text-decoration: none;
    color: var(--w-texto-2);
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.w-porta:hover {
    border-color: var(--w-linha-forte);
    border-left-color: var(--w-ciano);
    background: var(--w-elevado);
    transform: translateY(-1px);
}
/* A porta que ABRE a oficina (hoje só o Builder). Ela não é uma tela ao lado
   das outras: é a bancada por onde um item inteiro entra. A borda esquerda em
   ciano é a mesma marca que o `:hover` usa — aqui ela fica acesa de origem,
   que é o que a distingue de relance numa página com trinta portas. */
.w-porta--destaque {
    border-left-color: var(--w-ciano);
    background: var(--w-elevado);
}
.w-porta__nome { color: var(--w-texto); font-size: 14px; font-weight: 600; }
.w-porta--destaque .w-porta__nome { color: var(--w-ciano); }
.w-porta__dica { font-size: 12px; color: var(--w-fraco); line-height: 1.4; }
.w-porta__href {
    margin-top: 2px;
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: rgba(56, 224, 255, .55);
}

/* =====================================================================
   A ficha de personagem (21-08-2026): grades de item, abas, boneco e
   barra rapida.

   Porque isto e CSS e nao um componente: as grades sao a GRADE DO JOGO —
   quadrados de tamanho fixo, com buracos, numerados. Um `<table>` ou uma
   lista dava a mesma informacao e nao dava a mesma LEITURA: o operador
   compara o que ve aqui com o print que o jogador mandou, e para isso a
   forma tem de ser a mesma.
   ===================================================================== */

/* -- abas ----------------------------------------------------------- */
.w-abas {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 14px;
    border-bottom: 1px solid var(--w-linha);
    padding-bottom: 8px;
}
.w-aba {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: var(--w-raio);
    background: transparent;
    color: var(--w-texto-2);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.w-aba:hover { background: var(--w-elevado); color: var(--w-texto); }
.w-aba i {
    font-style: normal;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--w-fraco);
    background: var(--w-poco);
    border: 1px solid var(--w-linha);
    border-radius: 999px;
    padding: 0 6px;
}
.w-aba--activa {
    background: var(--w-ciano-fraco);
    border-color: var(--w-linha-viva);
    color: var(--w-ciano-claro);
}
.w-aba--activa i { color: var(--w-ciano-claro); border-color: var(--w-linha-viva); }
.w-aba-painel[hidden] { display: none; }

/* -- a grade de celulas --------------------------------------------- */
/* 8 por linha e nao `auto-fill`: a mochila do jogo tem 24 celulas por
   pagina em tres filas de oito, e uma grade que muda de largura com a
   janela deixava de bater com o que o jogador ve. */
.w-grade {
    display: grid;
    grid-template-columns: repeat(8, 52px);
    gap: 4px;
    margin: 0 0 14px;
}
.w-grade--trancada { opacity: .45; }
/* ⚠️ `div.` e NAO `.w-cel` — o nome esta ocupado desde antes deste componente.
   As tabelas usam `<td class="numero w-cel">` (ver `.w-tabela td.w-cel` la em
   cima, que encolhe a coluna ao conteudo), e este bloco, sem o `div`, caia-lhes
   em cima. O estrago nao era a largura: era o `display: flex` — um `<td>` com
   display flex deixa de ser celula de tabela e sai do modelo de colunas, entao
   as colunas colapsavam para 15 px e os numeros empilhavam na vertical (linha
   de 469 px de altura). Apanhado em producao em 23-08-2026, no /comparar.
   As celulas da grelha sao sempre `<div>` e as da tabela sempre `<td>`, logo o
   selector de elemento separa-as sem depender de quem esta a volta. */
div.w-cel {
    position: relative;
    width: 52px;
    height: 52px;
    border: 1px solid var(--w-linha);
    border-radius: 6px;
    background: var(--w-poco);
    display: flex;
    align-items: center;
    justify-content: center;
}
.w-cel img { display: block; image-rendering: pixelated; }
/* ⚠️ Os modificadores levam `div.` pela MESMA razao que a base — mas aqui a
   razao e outra e nao e obvia: nao e colisao, e ESPECIFICIDADE. A base passou a
   ser `div.w-cel` (0,1,1) e define `border` na forma curta; um modificador em
   `.w-cel--vazia` (0,1,0) perde para ela e a borda tracejada saia solida.
   Medido no browser logo apos a primeira correccao. Empatar o selector e o que
   devolve o desempate a ordem do ficheiro, que e onde ele deve estar. */
div.w-cel--vazia { border-style: dashed; border-color: rgba(148, 163, 184, .10); }
div.w-cel--trancada {
    background: repeating-linear-gradient(45deg,
        rgba(148, 163, 184, .05) 0 4px, transparent 4px 8px);
}
div.w-cel--presa { border-color: rgba(245, 195, 77, .35); }
.w-cel__sem { color: var(--w-fraco); font-size: 14px; }
/* Os carimbos do canto. Sao pequenos de proposito: quem le a grade
   procura a ARTE; o numero e a confirmacao, nao o assunto. */
.w-cel__usos, .w-cel__mais, .w-cel__slot, .w-cel__laco, .w-cel__relogio {
    position: absolute;
    font-size: 9.5px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    pointer-events: none;
}
.w-cel__usos {
    right: 2px; bottom: 2px;
    color: var(--w-texto);
    background: rgba(8, 11, 17, .82);
    border-radius: 3px;
    padding: 1px 3px;
}
.w-cel__mais { left: 2px; bottom: 2px; color: var(--w-ciano); font-weight: 700; }
.w-cel__laco { right: 2px; top: 2px; }
.w-cel__relogio { left: 2px; top: 2px; }
.w-cel__slot { right: 3px; top: 2px; color: rgba(139, 151, 176, .38); }
.w-cel:hover .w-cel__slot { color: var(--w-fraco); }
/* O laco ocupa o canto do numero do slot; quando ha os dois, o slot
   cala-se — a grade ja diz a posicao pela ordem. */
.w-cel__laco ~ .w-cel__slot { display: none; }

/* -- as pecas equipadas --------------------------------------------- */
.w-vestido {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
    gap: 8px;
    margin: 0 0 14px;
}
.w-peca {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 6px;
    border: 1px solid var(--w-linha);
    border-radius: var(--w-raio);
    background: var(--w-poco);
    text-align: center;
}
.w-peca--vazia { border-style: dashed; opacity: .5; }
.w-peca__slot {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--w-fraco);
}
.w-peca__arte {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 1px solid var(--w-linha);
    border-radius: 6px;
    background: rgba(0, 0, 0, .25);
}
.w-peca__arte img { image-rendering: pixelated; }
.w-peca__nome { font-size: 11.5px; color: var(--w-texto); line-height: 1.3; }
.w-peca__pe { display: flex; gap: 6px; font-size: 10.5px; color: var(--w-fraco); }
.w-peca__pe .mais { color: var(--w-ciano); }
.w-peca__pe .prazo { color: var(--w-ouro); }

/* -- a barra rapida -------------------------------------------------- */
/* Uma fila SEGUIDA de 30, com o numero da posicao por cima. A ordem e o
   assunto: a pergunta e "o que esta na posicao 3", e uma grade que
   embrulha em linhas de largura variavel faz perder a conta. */
.w-fila-rapida {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin: 0 0 12px;
}
.w-rapida {
    position: relative;
    width: 46px;
    height: 46px;
    border: 1px solid var(--w-linha);
    border-radius: 6px;
    background: var(--w-poco);
    display: flex;
    align-items: center;
    justify-content: center;
}
.w-rapida img { image-rendering: pixelated; }
.w-rapida--vazia { border-style: dashed; border-color: rgba(148, 163, 184, .10); }
/* Handle gravado que nao existe em container nenhum: e o estado que
   PRECEDE a perda do atalho. Merece cor. */
.w-rapida--orfa { border-color: var(--w-vermelho); box-shadow: inset 0 0 0 1px rgba(255, 93, 108, .25); }
.w-rapida__n {
    position: absolute;
    left: 3px; top: 1px;
    font-size: 9.5px;
    font-variant-numeric: tabular-nums;
    color: rgba(139, 151, 176, .55);
}
.w-rapida__sacada { position: absolute; right: 2px; bottom: 1px; font-size: 10px; }
.w-rapida__fixo { font-size: 9px; color: var(--w-fraco); text-transform: uppercase; }
/* O lugar do rodape quando nao ha nada a dizer sobre a celula: reserva a
   mesma altura do `.w-rapida__fixo` para as celulas com e sem nota ficarem
   todas do mesmo tamanho. (Nao foi medido no browser — esta tela depende da
   API e da 503 no modo local.) */
.w-rapida__nada { display: block; min-height: 11px; }

/* -- o topo da ficha: boneco a esquerda ------------------------------ */
.ficha-topo { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.ficha-topo__meta { flex: 1 1 380px; min-width: 0; }
.w-boneco { flex: 0 0 auto; width: 300px; }
.w-boneco__poco {
    background: var(--w-poco);
    border: 1px solid var(--w-linha);
    border-radius: var(--w-raio);
    padding: 4px;
}
.w-boneco canvas { display: block; width: 100%; height: auto; }
.w-boneco .w-sub { margin: 6px 0 0; font-size: 11px; line-height: 1.45; }

/* -- o pisca do refresco --------------------------------------------- */
.w-vivo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--w-fraco);
}
.w-vivo__ponto {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--w-fraco);
    display: inline-block;
}
.w-vivo--activo .w-vivo__ponto { background: var(--w-verde); animation: w-pulso 2s ease-in-out infinite; }
.w-vivo--activo { color: var(--w-verde); }
.w-vivo--erro .w-vivo__ponto { background: var(--w-vermelho); animation: none; }
.w-vivo--erro { color: var(--w-vermelho); }
@keyframes w-pulso { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
/* Quem pediu para nao haver movimento nao leva um ponto a piscar na cara
   durante uma investigacao inteira. */
@media (prefers-reduced-motion: reduce) {
    .w-vivo--activo .w-vivo__ponto { animation: none; }
}

/* Um titulo pequeno antes de cada grade, no tom da wiki.
   ⚠️ `h4.` E OBRIGATORIO. `.w-seccao` ja existe la em cima (procure «Titulo de
   seccao») com outro sentido: la e o ENVOLUCRO da seccao, um `<div>` usado 37
   vezes em 17 telas, e o titulo e FILHO dele (`.w-seccao > h2, > h3`). Como
   tudo o que este bloco declara e HERDADO, com o selector nu ele descia por
   dentro dos 37 envolucros e punha paragrafos, notas e rotulos a 11px
   MAIUSCULAS cinzento espacado — as frases de explicacao do /chat e do /coop
   ficavam ilegiveis. E a mesma armadilha do `.w-cel`: dois componentes com o
   mesmo nome, separados so pelo ELEMENTO, e o navegador nao da um aviso.
   A margem nao se repete aqui: ja vem da regra de cima, e assim o
   `.w-seccao:first-child { margin-top: 0 }` continua a ganhar. */
h4.w-seccao {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--w-fraco);
    font-weight: 600;
}
.w-linha--aceso > td { background: var(--w-ciano-fraco); }

/* A MESMA marca de "esta linha precisa de atencao", mas numa TABELA.
   O `.w-linha--pendente` la de cima foi feito para a grelha de `<div>` e usa
   `box-shadow: inset` — que num `<tr>` com `border-collapse` nao desenha em
   sitio nenhum, porque a caixa do `<tr>` nao pinta fundo nem sombra. A marca
   tem de ir nas CELULAS. Usam-na as telas dos ficheiros de conteudo em JSON
   (`/presenca` para o dia sem item, `/supplybox` para a graduacao com id fora
   do catalogo, `/quests` para a missao impossivel de fechar), que sao tabelas
   e nao grelhas. */
tr.w-linha--pendente > td { background: rgba(234, 179, 8, .07); }
tr.w-linha--pendente > td:first-child { box-shadow: inset 3px 0 0 var(--w-ouro); }

/* ---------------------------------------------------------------------
   O RASTO NO PE (/rasto)
   ---------------------------------------------------------------------
   O `.w-sub` global e uma celula de UMA linha (nowrap + reticencias), feita
   para grelhas de lista. Nesta tela ele carrega FRASES — as gamas medidas no
   binario e o que o cliente faz quando o valor sai delas — e essa e
   exactamente a informacao que nao pode ficar cortada: um "1 a 239" truncado
   em "1 a 2…" e pior do que nao estar la.

   Terceira vez que este nowrap morde (depois do `#reserva` e da tabela das 66
   colunas do /builder). O seletor e o CARTAO inteiro, e nao so o formulario,
   porque foi assim que o segundo caso escapou ao primeiro conserto. */
#rasto .w-sub { white-space: normal; overflow: visible; display: block; }
#rasto .w-tabela--fina td .w-sub { max-width: 22rem; }

/* A previa animada de cada mapeamento. Fundo aos quadrados porque, sem ele,
   transparente e preto sao iguais no browser — e a diferenca entre os dois e o
   rasto sair limpo ou sair dentro de um quadrado escuro atras do jogador. O
   xadrez e CSS e nao esta pintado no canvas, pela mesma razao que a previa do
   /builder deixou de o queimar: quem copiar a imagem leva o verdadeiro. */
.w-rasto-previa,
.w-rasto-folha {
    background-image:
        linear-gradient(45deg, rgba(148, 163, 184, .16) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(148, 163, 184, .16) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(148, 163, 184, .16) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(148, 163, 184, .16) 75%);
    background-size: 12px 12px;
    background-position: 0 0, 0 6px, 6px -6px, -6px 0;
    image-rendering: pixelated;
    border: 1px solid var(--w-linha);
    border-radius: 4px;
}
.w-rasto-previa { width: 64px; height: 64px; }
/* A folha inteira e larga (a de demonstracao tem 192 px e uma de 8x8 celulas de
   64 tem 512): um teto em largura impede a tabela de ganhar scroll horizontal,
   que e o outro defeito que esta tela ja herdava do CSS. */
.w-rasto-folha { max-width: 220px; height: auto; }

/* As miniaturas de textura no catalogo de efeitos. Ate quatro por linha da
   tabela — um efeito tem ate 10 camadas, e mostrar as dez esticava a coluna
   para fora do ecra sem acrescentar informacao (as camadas 5 a 10 sao quase
   sempre repeticoes da mesma textura com atraso diferente). */
.w-efeito-tex {
    width: 40px;
    height: 40px;
    object-fit: contain;
    image-rendering: pixelated;
    background-color: #4a4a4a;
    background-image:
        linear-gradient(45deg, #606060 25%, transparent 25%),
        linear-gradient(-45deg, #606060 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #606060 75%),
        linear-gradient(-45deg, transparent 75%, #606060 75%);
    background-size: 10px 10px;
    background-position: 0 0, 0 5px, 5px -5px, -5px 0;
    border-radius: 3px;
    margin-right: 3px;
}
/* A previa ANIMADA de cada camada. Mesmo fundo aos quadrados da miniatura —
   sem ele, uma textura aditiva de fundo preto desenha-se preta sobre preto e
   o operador le "esta camada esta vazia" onde esta a ver o normal. */
.w-efeito-previa {
    width: 48px;
    height: 48px;
    image-rendering: pixelated;
    background-color: #4a4a4a;
    background-image:
        linear-gradient(45deg, #606060 25%, transparent 25%),
        linear-gradient(-45deg, #606060 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #606060 75%),
        linear-gradient(-45deg, transparent 75%, #606060 75%);
    background-size: 10px 10px;
    background-position: 0 0, 0 5px, 5px -5px, -5px 0;
    border-radius: 3px;
    margin-right: 3px;
    vertical-align: middle;
}
#efeitos .w-sub { white-space: normal; overflow: visible; display: block; }
#efeitos .w-tabela--fina td .w-sub { max-width: 30rem; }
/* A coluna "quem o usa" passou a ter ate 12 ligacoes por fonte: sem embrulhar,
   tropeca no `nowrap` do `.w-sub` — a mesma licao do `#sons`. */
#efeitos .w-tabela--fina td { white-space: normal; }

/* O `<select>` dimensiona-se pela opcao MAIS LARGA. Com 355 efeitos e 501
   sons nomeados, o controle esticava a tabela e dava scroll horizontal a
   pagina — o mesmo defeito que o dropdown do som ja tinha causado no
   /builder. Trunca-se o CONTROLE; a lista aberta do navegador expande alem
   dele e mostra o nome inteiro. */
.w-escolha-larga { max-width: 26rem; width: 100%; }

/* ---------------------------------------------------------------------
   A TELA DOS SONS (/sons, 22-08-2026)
   --------------------------------------------------------------------- */
/* O <select> das seccoes dimensiona-se pela opcao MAIS LARGA — e a mais larga
   e "Personagem e comum (bloco sem cabecalho proprio)", 47 caracteres. Dentro
   do flex da busca ele empurrava a linha e dava scroll horizontal a pagina: e
   o MESMO defeito que o dropdown do som ja causou no /builder e o catalogo de
   efeitos a seguir. Trunca-se o controle fechado; a lista aberta do navegador
   expande alem dele e mostra o nome inteiro. */
#sons .w-busca select { max-width: 18rem; flex: 0 1 auto; }

/* O reprodutor nativo do navegador vem com ~300px de largura por omissao, e
   sao 60 por pagina: sem tecto a coluna "Ouvir" sozinha era metade da tabela.
   `preload="none"` no HTML garante que nenhum destes 60 pede um byte enquanto
   ninguem carregar no play — a rota le do .cvf de 400 MB. */
#sons audio { width: 200px; max-width: 100%; height: 32px; vertical-align: middle; }

/* As tres familias de "quem usa" (itens, buffs, projecteis) sao frases com
   ligacoes e tem de EMBRULHAR. Sem isto tropecavam no `nowrap` do `.w-sub`
   pela quarta vez — a licao do `#reserva` e do `#som-e-efeitos`: cercar o
   cartao inteiro, e nao so a linha. */
#sons .w-sub { white-space: normal; overflow: visible; }
#sons .w-tabela--fina td.w-sub { max-width: 26rem; }

/* As duas medidas da tela de sprites por publicar. Viviam num `style=` dentro
   do `sprites.html`, e a CSP do painel e `style-src 'self'` sem
   `unsafe-inline`: o navegador deitava-as fora EM SILENCIO. Sem o tecto, cada
   .dds pendente desenhava-se no tamanho natural (ha texturas de 256 e de 512)
   e esticava a tabela inteira. E a mesma licao do `<script>` inline: um estilo
   inline nao "degrada", desaparece. */
.w-previa-sprite { max-width: 96px; max-height: 96px; }
.w-indice-sprite { font-size: 1.2em; }

/* ---------------------------------------------------------------------
   O MAPA DE AUTORIDADE, A CURVA E O CONFRONTO DAS CAIXAS (22-08-2026)
   ---------------------------------------------------------------------
   Todas as medidas destas telas vivem AQUI e nao num `style=`: a CSP do
   painel e `style-src 'self'` sem `unsafe-inline`, e um estilo inline nao
   "degrada" — o navegador deita-o fora em silencio (a licao ja escrita no
   `.w-previa-sprite` mesmo acima). */

/* Quem manda em cada tabela: rotulo, onde vive, tela, circuito. */
.w-linhas.autoridade {
    --w-grade:
        minmax(150px, 1.1fr)  /* rotulo   o nome pelo qual se procura  */
        minmax(140px, 1fr)    /* registo  o .cvf ou o .json            */
        108px                 /* tela     o link, ou "ninguem"         */
        minmax(180px, 1.6fr); /* circuito o gerador e o aviso          */
}

/* Os dois lados da mesma caixa. Quatro colunas: a lista de itens leva a folga
   toda, porque e nela que a divergencia se ve. */
.w-linhas.confronto {
    --w-grade:
        minmax(120px, 150px)  /* lado                                  */
        minmax(150px, 210px)  /* ficheiro + link para o editor         */
        minmax(220px, 1fr)    /* itens                                 */
        56px;                 /* quantos                               */
}

/* Repositorio contra VPS, por ficheiro de conteudo. Os dois sha ao lado um do
   outro de proposito: e a comparacao que se faz de relance. */
.w-linhas.repo-vps {
    --w-grade:
        minmax(130px, 1fr)    /* ficheiro                              */
        /* ⚠️ A coluna do estado NAO pode ser fixa: o rotulo vem do servidor e
           o mais comprido e «so no repositorio», que mede 148px com o
           `nowrap` da etiqueta. Com os 96px cravados que aqui estavam, a
           chapa saia 52px da coluna e pintava-se por cima do sha256 do
           ficheiro na mesma linha. */
        minmax(96px, max-content) /* estado                            */
        minmax(110px, 130px)  /* sha do repositorio                    */
        minmax(110px, 130px)  /* sha do VPS                            */
        minmax(150px, 1.2fr); /* as duas datas                         */
}

/* A grelha de edicao de um patamar da curva: 47 celulas numericas. Sem grelha
   sairiam 47 caixas em fila e ninguem via que as cinco do meio sao todas do
   mesmo rifle. `auto-fill` e nao `auto-fit`: com poucas colunas num bloco
   (o bloco de arma tem cinco) o `auto-fit` estica cada caixa ate ao ecra. */
.w-celulas-curva {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px 14px;
    margin: 8px 0 4px;
}
.w-celula-curva { display: flex; flex-direction: column; gap: 3px; }
.w-celula-curva label { font-size: 11px; color: var(--w-fraco); }
.w-celula-curva input { width: 100%; }
/* O coreano do proprio ficheiro, por baixo do rotulo traduzido. E a PROVA de
   onde o nome veio, e por isso nunca se esconde — so encolhe. */
.w-celula-curva .w-cabecalho-cru {
    font-size: 10px;
    color: var(--w-fraco);
    opacity: .75;
}
/* Um bloco cujo rotulo e LEITURA do coreano e nao medicao. A marca e
   deliberadamente discreta: nao e um erro, e uma incerteza declarada. */
.w-bloco-lido > .w-titulo::after {
    content: " · leitura";
    font-size: 10px;
    letter-spacing: .1em;
    color: var(--w-fraco);
    text-transform: uppercase;
}