/* ===================================================================== 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 : 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 `

` 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 `

` 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 CATALOGO POR FAMILIA (`/catalogo`). Uma linha por familia — o nivel de cima dos tres. As duas colunas largas sao as que respondem a pergunta do dono ("que versoes deste item existem, e o que as separa"), e por isso sao as que levam a folga; a contagem e o link ficam presos a direita. */ .w-linhas.catalogo { --w-grade: minmax(104px, 152px) /* os icones dos modelos */ minmax(150px, 1fr) /* nome da familia + categorias */ minmax(150px, 1.1fr) /* versoes as pastilhas de validade */ minmax(160px, 1.3fr) /* eixos o que separa as versoes */ 56px /* itens */ 78px; /* abrir -> */ } /* "O que as separa" e uma FRASE ("validade (col48) · restricoes (col10) · preco (col52)"), nao uma celula de lista: sem isto o `.w-sub` global corta-a na primeira coluna e a resposta da tela fica em reticencias. Mesmo remendo (e mesmo motivo) do `.w-linhas.telas .w-sub`. */ .w-linhas.catalogo .w-sub { white-space: normal; overflow: visible; } .w-linhas.catalogo .w-linha { min-height: 52px; } /* As VARIANTES de um modelo (`/catalogo/{id}`) — o nivel de baixo. Irma da `pecas-slot` do editor de conjuntos, com duas colunas a mais: o empilhamento e o par vitrine/entrega, que la nao separavam nada e aqui sao metade do que o dono foi ver. */ .w-linhas.variantes { --w-grade: 64px /* id */ minmax(150px, 1fr) /* nome o mesmo nas seis versoes */ minmax(120px, 160px) /* validade col48 */ minmax(130px, 190px) /* pilha col21 + a familia col20 */ minmax(120px, 175px) /* troca col10 */ minmax(110px, 155px) /* vitrine col52 + entrega col22 */ 62px; /* dar -> */ } .w-linhas.variantes .w-sub { white-space: normal; overflow: visible; } .w-linhas.variantes .w-linha { min-height: 54px; } /* 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; } /* Caem os icones dos modelos (1) e a lista de eixos (4): a fila de pastilhas de VALIDADE fica, porque e a pergunta que traz o operador a esta tela. O nome vai a `minmax(0, ...)` pelo mesmo motivo da `pecas-slot`: com piso, as quatro colunas transbordavam num ecra de 375 px. */ /* ⚠️ As pastilhas em `1fr` e o nome em `1fr` NAO da meio a meio: o piso da coluna das pastilhas ganhava a repartição e o nome ficava com 37px medidos a 375 — reticências e mais nada. Com px fixos nas outras duas, o nome leva tudo o que sobra (113px). Caem os ícones dos modelos (1), a lista de eixos (4) e a CONTAGEM (5): a fila de pastilhas de VALIDADE fica, porque é a pergunta que traz o operador a esta tela, e a contagem repete-se no cabeçalho da própria família. */ .w-linhas.catalogo { --w-grade: minmax(0, 1fr) 88px 60px; } .w-linhas.catalogo .w-linha > :nth-child(1), .w-linhas.catalogo .w-linhas__cab > :nth-child(1), .w-linhas.catalogo .w-linha > :nth-child(4), .w-linhas.catalogo .w-linhas__cab > :nth-child(4), .w-linhas.catalogo .w-linha > :nth-child(5), .w-linhas.catalogo .w-linhas__cab > :nth-child(5) { display: none; } /* O nome é a IDENTIDADE da linha: cortá-lo a meio deixa a lista sem resposta nenhuma. Aqui ele embrulha em vez de levar reticências — a `.w-linha` já tem `min-height` e não altura fixa. */ .w-linhas.catalogo .w-nome, .w-linhas.variantes .w-nome { white-space: normal; overflow: visible; } /* Caem as restricoes (a col10 le-se na ficha) e o par vitrine/entrega. O que fica e o que o dono foi la ver: id, nome, VALIDADE e PILHA. O "dar ->" fica porque e a unica entrada da linha. */ .w-linhas.variantes { --w-grade: 56px minmax(0, 1fr) 88px 96px 58px; } .w-linhas.variantes .w-linha > :nth-child(5), .w-linhas.variantes .w-linhas__cab > :nth-child(5), .w-linhas.variantes .w-linha > :nth-child(6), .w-linhas.variantes .w-linhas__cab > :nth-child(6) { 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 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 `` 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/). ⚠️ 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 `

` 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 `
`; a lista e um `
` 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 `
` 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; } /* O resumo e as seccoes da gaveta (14-09-2026): a pergunta que a gaveta responde, e a pergunta de cada punhado de telas. Sao texto e nao links — o rato passa por cima sem nada acender, que e o que diz "isto e um titulo". */ .w-nav__resumo { padding: .3rem .55rem .45rem; font-size: 11.5px; line-height: 1.35; color: var(--w-texto-2); border-bottom: 1px solid var(--w-linha); margin-bottom: 2px; } .w-nav__seccao { padding: .5rem .55rem .15rem; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--w-fraco); } /* 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 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 `
, 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 `` 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 `` 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 mesma grelha, com a celula do tamanho de uma IMAGEM e nao de um icone (tela /carregamento: 21 telas de 1024x768). Os 112px do `.w-assets` sao a medida do icone de 64 mais o rodape; aqui dariam 21 miniaturas ilegiveis. ⚠️ O `height: auto` nao e enfeite: o `` leva `width`/`height` de 1024x768 nos atributos (para o navegador reservar o espaco certo e a pagina nao saltar ao carregar), e sem ele o `max-width: 100%` encolhia so a largura e a imagem saia esmagada na vertical. */ .w-assets--largo { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } .w-assets--largo .w-asset img { width: 100%; height: auto; } /* --------------------------------------------------------------------- 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 `` 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 `
` 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; } /* O guia de tarefas do inicio (14-09-2026): a pergunta e uma frase inteira ("Dar um item, arma ou dinheiro a um jogador"), entao a porta e mais larga do que as do indice da oficina, que so levam um nome. */ .w-portas--tarefas { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .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 `
` 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 `` com `border-collapse` nao desenha em sitio nenhum, porque a caixa do `` 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); } /* A linha APAGADA de uma tabela: o item da loja de cash que esta desligado (`/cash`). Nao e uma marca de atencao — e o contrario: continua legivel e deixa de disputar o olho com as linhas que estao no ar. ⚠️ Esta classe esteve NO TEMPLATE SEM REGRA NENHUMA (apanhada em 29-08-2026 pelo `test_css_sao`): o `` do item desligado desenhava-se exactamente como o ligado, e a coluna «Ativo» era a unica maneira de os distinguir. */ tr.w-linha--fraca > td { opacity: .55; } /* --------------------------------------------------------------------- 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 ` 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 `
` (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 `` 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 `
` e as da tabela sempre `
`, 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 `
` 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 `
` e usa `box-shadow: inset` — que num `