/* ============================================================
RESKIN-CARDS.CSS — "pergaminho de guilda" no jogo inteiro (05/09)
------------------------------------------------------------
Estende para TODAS as páginas o visual já aplicado ao painel de
Status (ver o bloco no fim de css/status.css). Só APARÊNCIA:
nenhum HTML, texto, ícone ou comportamento muda — este ficheiro
é carregado DEPOIS do CSS de cada página e sobrepõe-se a ele.
Para reverter o jogo inteiro basta remover a linha que o
carrega; nada do CSS original foi apagado.
Como funciona, em duas camadas:
1) TROCA DE TOKENS. 88% das cores do jogo vêm de variáveis
(var(--text), var(--ink-750), var(--ink-line)…). Redefinindo
essas variáveis DENTRO de cada card, todo o conteúdo passa
sozinho de "claro sobre escuro" para "escuro sobre papel",
sem reescrever centenas de regras uma a uma.
2) MOLDURA. O card ganha o pergaminho, o traço naval, o friso
dourado e os quatro rebites. Os rebites vão no próprio
background (quatro gradientes radiais), e não em ::before —
assim não há risco de colidir com pseudo-elementos que as
páginas já usem para os seus próprios enfeites.
Os acentos néon do tema escuro (ciano #4fd1ff, dourado #d9a441,
verde #35d488, laranja #ff5a36) dariam 1,4:1 a 2,5:1 de contraste
sobre papel — ilegíveis. São reapontados para versões escuras dos
MESMOS tons (5,1:1 a 7,6:1): a linguagem de cor de cada secção
mantém-se, só passa a dar para ler. As BARRAS não seguem a troca
(lá a cor é preenchimento, não texto).
============================================================ */
/* ── 1. CARDS ─────────────────────────────────────────────── */
/* Invasor */
.invasor-card-single,
.inv-recomp-card,
.inv-dano-rank-card,
.inv-log-section,
.invasor-waiting,
.inv-jutsu-panel,
.inv-perfil-card,
.inv-arena,
/* Missões */
.missao-grupo,
.mis-filtros,
.mis-info-item,
/* Jutsus */
.jut-elem-card,
.jut-elemento-panel,
.jut-card,
/* Habilidades */
.hab-perfil-card,
.hb-cat-card,
.hb-painel,
.hb-sub-card,
.hb-selo-card,
.hb-portao-card,
.hb-combo-card,
/* Doujutsus */
/* .dou-overview saiu a 15/09 — a tira de visão geral foi substituída
pela grelha de .jut-elem-card, que já está na lista acima. */
.dou-bloco,
.dou-node,
.dou-opcao,
.dou-info-item,
/* Linhagem */
.lin-intro,
.lin-card,
.lin-atual,
.lin-hab-card,
/* Loja */
.loja-sidebar,
.loja-card,
.loja-player-card,
.loja-cart-card,
/* Refino */
.refino-player-card,
.refino-inv-card,
.refino-main-card,
.refino-log-card,
.refino-modal-card,
/* Campanha */
.camp-cap-card,
.camp-est-card,
.camp-modal-card,
/* Inventário */
.inv2-perfil-card,
.inv2-equip-card,
.inv2-mochila-card,
.inv2-detalhe-card,
.inv2-modal-card,
/* Trade */
.trade-perfil-card,
.trade-avisos-card,
.trade-criar-card,
.trade-central-card,
/* Treino */
.tr-card,
.tr-info-panel,
/* Bijuus */
.bijuu-card,
.bijuu-id-card,
.bijuu-conexao,
.bijuu-analise,
.bijuu-caixa-card,
/* Invocações */
.inv-card,
.inv-player-card,
.inv-ativa-card,
/* Hospital */
.hosp-perfil-card,
.hosp-trat-card,
.hosp-parcial-card,
.hosp-itens-card,
.hosp-item-card,
/* Premium */
.prem-cash-card,
.prem-vip-card,
/* Novidades */
.nov-card-conteudo,
/* Manual */
.man-secao,
.man-toc,
.man-cat,
.man-grad-card,
.man-jutsu-card,
/* Ranking */
.rnk-tabela-wrap,
.rnk-modal-card,
.rnk-vila-info-card,
/* PvP Online
13/09 — .pvpon-page-head faltava aqui. Era o único painel principal
do jogo ainda em preto: o jogador entrava no PvP e o bloco do topo
(título, Criar Sala, Prémios de Liga, filtros) destoava de todos os
outros ecrãs, que já são pergaminho. */
.pvpon-page-head,
.pvpon-perfil-card,
.pvpon-chat-card,
.pvpon-salas-card,
.pvpon-sala-card,
.pvpon-aguard-card,
.pon-result-card,
.pvpon-modal-box,
/* Contatos */
.ct-panel {
/* Paleta local invertida */
--text: #14263f;
--text-dim: #4f5f78;
--text-faint: #6b788c;
--ink-900: #d7c9a8;
--ink-850: #ddd0b2;
--ink-800: #e4d8bd;
--ink-750: #ece2cb;
--ink-700: #cfc2a2;
--ink-line: rgba(29,63,112,.20);
--ink-line-strong: rgba(29,63,112,.34);
/* Acentos escurecidos (mesmos tons, agora legíveis no papel) */
--chakra: #12628f;
--chakra-dim: #17567c;
--gold: #7d5a0d;
--gold-dim: #6b4d0b;
--success: #146b41;
--ember: #a83518;
--ember-dim: #8d2c13;
--danger: #a01f2c;
/* Pergaminho + rebites dourados nos quatro cantos.
A cor sólida fica por baixo: gradiente é background-IMAGE, e sem ela
o card não tem background-color nenhum (fica "transparente" para
quem inspeciona, e para qualquer fundo herdado). */
background:
radial-gradient(circle at 10px 10px,
#fbeec2 0 1.6px, #d8ae52 1.6px 3.2px, #8a6a22 3.2px 4.1px, transparent 4.2px),
radial-gradient(circle at calc(100% - 10px) 10px,
#fbeec2 0 1.6px, #d8ae52 1.6px 3.2px, #8a6a22 3.2px 4.1px, transparent 4.2px),
radial-gradient(circle at 10px calc(100% - 10px),
#fbeec2 0 1.6px, #d8ae52 1.6px 3.2px, #8a6a22 3.2px 4.1px, transparent 4.2px),
radial-gradient(circle at calc(100% - 10px) calc(100% - 10px),
#fbeec2 0 1.6px, #d8ae52 1.6px 3.2px, #8a6a22 3.2px 4.1px, transparent 4.2px),
radial-gradient(circle at 18% 12%, rgba(255,255,255,.55), transparent 42%),
linear-gradient(178deg, #faf5ea 0%, #f0e7d3 46%, #e6dabe 100%);
background-color: #f0e7d3; /* depois do shorthand: ele reseta a cor */
border: 2px solid #1d3f70;
border-radius: 16px;
clip-path: none; /* desliga o corte "dossiê rasgado" */
color: #14263f;
box-shadow:
inset 0 0 0 2px rgba(198,155,72,.60),
inset 0 2px 0 rgba(255,255,255,.65),
0 10px 22px -12px rgba(16,32,58,.55),
0 2px 0 rgba(16,32,58,.18);
}
/* ── 2. CABEÇALHOS DENTRO DOS CARDS ───────────────────────
Placa naval com filete dourado. Ao contrário do painel de Status
(onde a faixa sangra até à borda), aqui a placa fica dentro do
padding do card: cada página tem um padding diferente, e uma
margem negativa fixa desalinharia umas quantas. */
/* Invasor */
.inv-recomp-titulo,
.inv-log-header,
.inv-deck-header,
.inv-jutsu-header,
.inv-perfil-header,
/* Missões */
.missao-grupo-header,
/* Jutsus */
.jut-elem-header,
/* Habilidades */
.hb-painel-header,
.hb-combo-header,
.hb-portao-header,
/* Doujutsus */
.dou-bloco-header,
.dou-opcao-header,
/* Loja */
.loja-cart-header,
.loja-sidebar-titulo,
.loja-inv-titulo,
/* Refino */
.refino-inv-header,
.refino-log-titulo,
.refino-modal-header,
.refino-bonus-titulo,
/* Campanha */
.camp-modal-header,
/* Inventário */
.inv2-mochila-header,
.inv2-detalhe-header,
.inv2-modal-header,
.inv2-equip-titulo,
/* Trade */
.trade-avisos-header,
.trade-central-header,
.trade-criar-header,
/* Bijuus */
.bijuu-id-header,
.bijuu-analise-header,
.bijuu-sinc-header,
.bijuu-caixa-titulo,
/* Hospital */
.hosp-trat-header,
/* Manual */
.man-secao-titulo,
.man-toc-titulo,
/* Premium */
.prem-secao-titulo,
/* Invocações */
.inv-side-title,
/* Treino */
.tr-card-top,
.tr-info-panel > summary {
background: linear-gradient(180deg, #2f5f9e 0%, #234a80 52%, #1b3c6b 100%);
background-color: #234a80; /* depois do shorthand: ele reseta a cor */
border: 1px solid #16345c;
border-bottom: 2px solid #c69b48;
border-radius: 10px;
padding: 9px 13px;
margin-bottom: 12px;
color: #fdf7e8;
box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 2px 6px -3px rgba(16,32,58,.5);
}
/* Invasor */
.inv-recomp-titulo,
.inv-log-header,
.inv-deck-header,
.inv-jutsu-header,
.inv-perfil-header,
/* Missões */
.missao-grupo-header,
/* Jutsus */
.jut-elem-header,
/* Habilidades */
.hb-painel-header,
.hb-combo-header,
.hb-portao-header,
/* Doujutsus */
.dou-bloco-header,
.dou-opcao-header,
/* Loja */
.loja-cart-header,
.loja-sidebar-titulo,
.loja-inv-titulo,
/* Refino */
.refino-inv-header,
.refino-log-titulo,
.refino-modal-header,
.refino-bonus-titulo,
/* Campanha */
.camp-modal-header,
/* Inventário */
.inv2-mochila-header,
.inv2-detalhe-header,
.inv2-modal-header,
.inv2-equip-titulo,
/* Trade */
.trade-avisos-header,
.trade-central-header,
.trade-criar-header,
/* Bijuus */
.bijuu-id-header,
.bijuu-analise-header,
.bijuu-sinc-header,
.bijuu-caixa-titulo,
/* Hospital */
.hosp-trat-header,
/* Manual */
.man-secao-titulo,
.man-toc-titulo,
/* Premium */
.prem-secao-titulo,
/* Invocações */
.inv-side-title,
/* Treino */
.tr-card-top,
.tr-info-panel > summary {
--text: #fdf7e8;
--text-dim: #cfe2fb;
--text-faint: #a9c4e6;
}
/* Campos de busca/entrada que vivam dentro de uma faixa naval: ficam
claros, senão desapareciam (campo escuro sobre azul escuro). */
.inv-recomp-titulo input,
.inv-recomp-titulo select,
.inv-recomp-titulo textarea,
.inv-log-header input,
.inv-log-header select,
.inv-log-header textarea,
.inv-deck-header input,
.inv-deck-header select,
.inv-deck-header textarea,
.inv-jutsu-header input,
.inv-jutsu-header select,
.inv-jutsu-header textarea,
.inv-perfil-header input,
.inv-perfil-header select,
.inv-perfil-header textarea,
.missao-grupo-header input,
.missao-grupo-header select,
.missao-grupo-header textarea,
.jut-elem-header input,
.jut-elem-header select,
.jut-elem-header textarea,
.hb-painel-header input,
.hb-painel-header select,
.hb-painel-header textarea,
.hb-combo-header input,
.hb-combo-header select,
.hb-combo-header textarea,
.hb-portao-header input,
.hb-portao-header select,
.hb-portao-header textarea,
.dou-bloco-header input,
.dou-bloco-header select,
.dou-bloco-header textarea,
.dou-opcao-header input,
.dou-opcao-header select,
.dou-opcao-header textarea,
.loja-cart-header input,
.loja-cart-header select,
.loja-cart-header textarea,
.loja-sidebar-titulo input,
.loja-sidebar-titulo select,
.loja-sidebar-titulo textarea,
.loja-inv-titulo input,
.loja-inv-titulo select,
.loja-inv-titulo textarea,
.refino-inv-header input,
.refino-inv-header select,
.refino-inv-header textarea,
.refino-log-titulo input,
.refino-log-titulo select,
.refino-log-titulo textarea,
.refino-modal-header input,
.refino-modal-header select,
.refino-modal-header textarea,
.refino-bonus-titulo input,
.refino-bonus-titulo select,
.refino-bonus-titulo textarea,
.camp-modal-header input,
.camp-modal-header select,
.camp-modal-header textarea,
.inv2-mochila-header input,
.inv2-mochila-header select,
.inv2-mochila-header textarea,
.inv2-detalhe-header input,
.inv2-detalhe-header select,
.inv2-detalhe-header textarea,
.inv2-modal-header input,
.inv2-modal-header select,
.inv2-modal-header textarea,
.inv2-equip-titulo input,
.inv2-equip-titulo select,
.inv2-equip-titulo textarea,
.trade-avisos-header input,
.trade-avisos-header select,
.trade-avisos-header textarea,
.trade-central-header input,
.trade-central-header select,
.trade-central-header textarea,
.trade-criar-header input,
.trade-criar-header select,
.trade-criar-header textarea,
.bijuu-id-header input,
.bijuu-id-header select,
.bijuu-id-header textarea,
.bijuu-analise-header input,
.bijuu-analise-header select,
.bijuu-analise-header textarea,
.bijuu-sinc-header input,
.bijuu-sinc-header select,
.bijuu-sinc-header textarea,
.bijuu-caixa-titulo input,
.bijuu-caixa-titulo select,
.bijuu-caixa-titulo textarea,
.hosp-trat-header input,
.hosp-trat-header select,
.hosp-trat-header textarea,
.man-secao-titulo input,
.man-secao-titulo select,
.man-secao-titulo textarea,
.man-toc-titulo input,
.man-toc-titulo select,
.man-toc-titulo textarea,
.prem-secao-titulo input,
.prem-secao-titulo select,
.prem-secao-titulo textarea,
.inv-side-title input,
.inv-side-title select,
.inv-side-title textarea,
.tr-card-top input,
.tr-card-top select,
.tr-card-top textarea,
.tr-info-panel > summary input,
.tr-info-panel > summary select,
.tr-info-panel > summary textarea {
background: #f4eddd;
border: 1px solid #16345c;
color: #14263f;
}
/* ── 3. TRILHOS DE BARRA ──────────────────────────────────── */
.inv-bar-bg,
.inv-hp-bar-bg,
.inv-fighter-hp-bar-bg,
.hosp-bar-bg,
.inv2-bar-bg,
.hab-bar-bg,
.inv-chakra-bar-bg,
.refino-taxa-bar-bg,
.rnk-modal-bar-bg,
.rnk-modal-liga-bar-bg,
.bar-bg,
.mis-rank-bar,
.camp-hp-bar-bg,
.pvpon-bar-bg {
background: #cdbf9e;
box-shadow: inset 0 1px 2px rgba(16,32,58,.28);
border: 1px solid rgba(29,63,112,.14);
}
/* ── 4. CORREÇÕES PONTUAIS ────────────────────────────────────
Encontradas medindo o contraste real de cada texto dentro dos
cards, página a página, depois do reskin. São os casos que a
troca de tokens não resolve sozinha. */
/* 4a. Cores de ESTADO (raridade, rank, graduação, VIP, capítulo).
Vêm cravadas no CSS de cada página ou em style="" gerado pelo JS,
e distinguem coisas — a raridade de um item, o rank de uma missão.
Trocá-las por uma cor fixa apagaria essa distinção; escurecê-las
mantém cada tom reconhecível e devolve a legibilidade sobre o
papel (passam de ~1,1-2,3:1 para ~4-6:1). */
.loja-card-nome,
.missao-rank-tag,
.prem-vip-nome,
.refino-player-grad,
.camp-cap-num,
.pvpon-perfil-grad,
.grad-badge-pvp,
.dou-jutsu-mini-desc {
filter: brightness(.58) saturate(1.15);
}
/* 4b. Texto escuro que ficou sobre um fundo colorido escuro (o
fundo é do tema antigo, o texto passou a ser o do papel). */
.bijuu-btn-sinc,
.pvpon-lv-badge,
.trade-aba-badge,
.trade-aba.active .trade-aba-badge { /* .trade-aba.active vence por especificidade */
color: #fdf7e8;
}
/* O rank do grupo de missões fica DENTRO da faixa naval, não sobre o
papel: aqui a cor tem de CLAREAR (não escurecer) para se ler, e o
brilho mantém cada rank com o seu tom. */
.missao-grupo-rank { filter: brightness(1.75) saturate(1.1); }
/* 4c. Botão que perdeu o fundo escuro e ficou branco-sobre-claro —
passa a naval com contorno dourado, como os restantes botões. */
.prem-vip-btn {
background: linear-gradient(180deg,#2f5f9e,#1b3c6b);
border: 1.5px solid #c69b48;
color: #fdf7e8;
}
/* 4d. Cinzento-azulado cravado (#8a9ba8) dentro do emblema de liga. */
.liga-badge, .liga-badge * { color: #34435c; }
/* ── 5. LEGIBILIDADE E ENQUADRAMENTO (2ª passagem) ────────────
Ajustes feitos depois de ver o reskin a correr nas páginas. */
/* 5a. TÍTULOS DE PÁGINA. Ficam FORA dos cards, sobre o fundo amarelo,
e continuavam com a cor do tema escuro (#dde2ea no título, #8891a1
no subtítulo): 1,2:1 e 2,0:1 — praticamente ilegíveis. */
.jut-titulo, .mis-titulo, .hab-titulo, .dou-titulo, .lin-titulo-page,
.tr-titulo, .inv-page-titulo, .man-titulo-page, .nov-titulo-page,
.prem-titulo-page, .rnk-titulo, .hosp-titulo, .inv2-titulo,
.refino-titulo, .loja-main-nome, .camp-titulo,
.bijuu-header h1, .inv-header h1 {
color: #131a26;
}
.jut-subtitulo, .mis-subtitulo, .hab-subtitulo, .dou-subtitulo,
.lin-subtitulo-page, .tr-subtitulo, .inv-page-subtitulo,
.man-subtitulo-page, .nov-subtitulo-page, .prem-subtitulo-page,
.rnk-subtitulo, .refino-sub, .loja-main-count, .camp-subtitulo,
.bijuu-header p, .inv-header p {
color: #3a4557;
}
/* 5b. JUTSUS. O nome do elemento e o selo de nível trazem a cor do
elemento (vermelho no Fogo, etc.) cravada em style="". No card, que
é papel, escurece; no painel, cuja faixa é naval, clareia — nos dois
casos mantendo o tom do elemento. */
.jut-sub-nivel { filter: brightness(.5) saturate(1.2); }
.jut-elem-header .jut-elem-nome,
.jut-elem-header .jut-elem-nivel-badge { filter: brightness(1.6) saturate(1.1); }
/* Peças de fundo CLARO que vivem dentro da faixa naval (os chips
"Nível 10/10", "Bônus +50%", e o botão "Nível Máximo"): o texto tem
de voltar a escuro — a faixa torna --text creme, o que está certo
para o título mas não para estas. */
.jut-elem-header .jut-elem-stat,
.jut-elem-header .jut-elem-stat *,
.jut-elem-header .jut-btn-max {
color: #14263f;
--text: #14263f;
}
/* 5c. IMAGENS DE ITEM inteiras dentro do quadro, sem corte. `cover`
preenchia o quadrado cortando as bordas do desenho; `contain` mostra
a peça toda. Vale só para ícones de item/técnica — retratos e fotos
de perfil continuam com `cover`, que é o certo para enquadrar rosto. */
.loja-card-img img, .loja-cart-item-img img,
.inv2-slot-img img, .inv2-card-img img,
.trade-inv-item img, .trade-item-sel-img img, .trade-oferta-img img,
.refino-inv-item img, .refino-item-img-wrap img,
.jut-elem-card-img, .jut-elem-img, .jut-card-img,
.hb-cat-img, .hb-sub-img, .hb-selo-img, .hb-modo-opcao-img, .hb-variant-tab img,
.dou-ov-item img, .dou-bloco-icon img, .dou-node-icon img,
.dou-opcao-icon img,
.bijuu-card-img, .bijuu-conexao-img, .bijuu-sinc-img,
.inv-card-img, .inv-ativa-img,
.lin-hab-mini img, .lin-hab-card img,
.pvpon-ej-img, .pon-jutsu-img, .rnk-modal-chip img,
.st2-dou-img-wrap img, .st2-showcase-img img, .st2-invoc-img img,
.st2-selo-img img, .st2-bijuu-slot img {
object-fit: contain;
}
/* O zoom no hover da loja ampliava a imagem já cortada; com `contain`
só fazia a peça saltar para fora do quadro. */
.loja-card:hover .loja-card-img img { transform: none; }
/* 5d. RETRATO DO STATUS. Atrás da moldura ficava um bloco azul: a
moldura é um PNG com margens transparentes e o azul aparecia por
elas. Com o fundo transparente, o que se vê por trás passa a ser o
próprio pergaminho do card — sem bloco estranho, e sem tocar na
moldura, na foto, nem na calibração de cada graduação. */
.st2-card-personagem .st2-personagem-img-wrap {
background: transparent;
border-bottom: none;
}
/* ── 6. RESÍDUOS DE CONTRASTE (3ª passagem) ───────────────────
Levantados medindo o contraste de cada texto, página a página. */
/* 6a. Controlos e rótulos que ficam FORA dos cards, sobre o amarelo
da página, e ainda usavam a cor clara do tema escuro. */
.bijuu-filtro-btn, .rnk-vila-btn,
.combat-name, .combat-vs, .rnk-empty,
.inv-paginacao, .rnk-paginacao, .bar-row {
color: #3a4557;
}
/* Só a aba ACTIVA fica sobre o amarelo (as inactivas têm fundo escuro
próprio e continuam com texto claro). */
.rnk-aba.active { color: #131a26; }
/* 6b. Títulos dentro da faixa naval que herdavam um acento escurecido
(o dourado e o ember do papel) e ficavam ilegíveis sobre o azul.
Vale para os títulos de qualquer página — daí o selector por
"class contém titulo", em vez de listar um a um. */
.inv-recomp-titulo [class*="titulo"],
.inv-recomp-titulo [class*="title"],
.inv-log-header [class*="titulo"],
.inv-log-header [class*="title"],
.inv-deck-header [class*="titulo"],
.inv-deck-header [class*="title"],
.inv-jutsu-header [class*="titulo"],
.inv-jutsu-header [class*="title"],
.inv-perfil-header [class*="titulo"],
.inv-perfil-header [class*="title"],
.missao-grupo-header [class*="titulo"],
.missao-grupo-header [class*="title"],
.jut-elem-header [class*="titulo"],
.jut-elem-header [class*="title"],
.hb-painel-header [class*="titulo"],
.hb-painel-header [class*="title"],
.hb-combo-header [class*="titulo"],
.hb-combo-header [class*="title"],
.hb-portao-header [class*="titulo"],
.hb-portao-header [class*="title"],
.dou-bloco-header [class*="titulo"],
.dou-bloco-header [class*="title"],
.dou-opcao-header [class*="titulo"],
.dou-opcao-header [class*="title"],
.loja-cart-header [class*="titulo"],
.loja-cart-header [class*="title"],
.loja-sidebar-titulo [class*="titulo"],
.loja-sidebar-titulo [class*="title"],
.loja-inv-titulo [class*="titulo"],
.loja-inv-titulo [class*="title"],
.refino-inv-header [class*="titulo"],
.refino-inv-header [class*="title"],
.refino-log-titulo [class*="titulo"],
.refino-log-titulo [class*="title"],
.refino-modal-header [class*="titulo"],
.refino-modal-header [class*="title"],
.refino-bonus-titulo [class*="titulo"],
.refino-bonus-titulo [class*="title"],
.camp-modal-header [class*="titulo"],
.camp-modal-header [class*="title"],
.inv2-mochila-header [class*="titulo"],
.inv2-mochila-header [class*="title"],
.inv2-detalhe-header [class*="titulo"],
.inv2-detalhe-header [class*="title"],
.inv2-modal-header [class*="titulo"],
.inv2-modal-header [class*="title"],
.inv2-equip-titulo [class*="titulo"],
.inv2-equip-titulo [class*="title"],
.trade-avisos-header [class*="titulo"],
.trade-avisos-header [class*="title"],
.trade-central-header [class*="titulo"],
.trade-central-header [class*="title"],
.trade-criar-header [class*="titulo"],
.trade-criar-header [class*="title"],
.bijuu-id-header [class*="titulo"],
.bijuu-id-header [class*="title"],
.bijuu-analise-header [class*="titulo"],
.bijuu-analise-header [class*="title"],
.bijuu-sinc-header [class*="titulo"],
.bijuu-sinc-header [class*="title"],
.bijuu-caixa-titulo [class*="titulo"],
.bijuu-caixa-titulo [class*="title"],
.hosp-trat-header [class*="titulo"],
.hosp-trat-header [class*="title"],
.man-secao-titulo [class*="titulo"],
.man-secao-titulo [class*="title"],
.man-toc-titulo [class*="titulo"],
.man-toc-titulo [class*="title"],
.prem-secao-titulo [class*="titulo"],
.prem-secao-titulo [class*="title"],
.inv-side-title [class*="titulo"],
.inv-side-title [class*="title"],
.tr-card-top [class*="titulo"],
.tr-card-top [class*="title"],
.tr-info-panel > summary [class*="titulo"],
.tr-info-panel > summary [class*="title"] {
color: #fdf7e8;
}
/* 6c. Botão que continuou branco-sobre-claro depois do reskin. */
.prem-cash-btn {
background: linear-gradient(180deg,#2f5f9e,#1b3c6b);
border: 1.5px solid #c69b48;
color: #fdf7e8;
}
/* 6d. Emblema de graduação em dourado vivo sobre o papel. */
.hosp-perfil-meta-badge { filter: brightness(.58) saturate(1.15); }
/* ── 7. INVENTÁRIO, EQUIPAMENTOS E BIJUUS (05/09) ─────────────
Pedido: legibilidade do contador de quantidade e cards de
equipamento/bijuu um por linha, todos do mesmo tamanho. */
/* 7a. O selo "x100" tem fundo preto próprio; dentro do card de
pergaminho o `--text` passou a ser escuro, logo ficava
preto-sobre-preto. Cor clara fixa, independente do tema do card.
Mesmo problema no selo de raridade, que partilha o fundo preto. */
.inv2-card-qtd-badge { color: #fdf7e8; }
.inv2-card-qtd-badge b { color: #fdf7e8; }
/* 7b. EQUIPAMENTO ACTUAL (inventário): uma peça por linha, todas do
mesmo tamanho, imagem à esquerda e nome + atributos à direita. */
.inv2-slots-grid { grid-template-columns: 1fr; }
.inv2-slot {
padding: 12px 14px;
/* altura fixa: com 3 atributos os bónus passam para 2 linhas e o
slot ficava mais alto que os vazios */
min-height: 112px;
justify-content: center;
}
.inv2-slot-corpo {
display: flex; align-items: center; gap: 12px;
}
.inv2-slot-img {
width: 68px; height: 68px; flex: 0 0 68px;
}
.inv2-slot-img img { object-fit: contain; }
.inv2-slot-info {
display: flex; flex-direction: column; gap: 4px;
min-width: 0; flex: 1 1 auto;
}
.inv2-slot-nome { font-size: .82rem; }
.inv2-slot-bonus {
display: flex; flex-wrap: wrap; gap: 4px 10px;
}
.inv2-slot-bonus-item {
font-size: .66rem; font-weight: 700; color: var(--text-dim);
white-space: nowrap;
}
.inv2-slot-bonus-item b { color: var(--success); }
/* 7c. EQUIPAMENTOS (status): mesma ideia, mas com o nome e os
atributos POR BAIXO da imagem — o `.es-slot-corpo` já é uma
coluna, só falta ocupar a linha inteira e ampliar a peça.
A imagem tem width/height inline (js/game.js), daí o !important:
evita mexer no JS só para trocar dois números. */
.st2-equip-grid #gameEquipSlots .es-slot {
flex: 1 1 100%;
/* altura fixa para o slot vazio ficar igual ao preenchido */
min-height: 158px;
padding: 12px 10px;
}
.es-img-wrap { width: 84px; height: 84px; }
.st2-equip-grid .es-img-wrap img {
width: 100% !important; height: 100% !important;
}
.es-slot-corpo { gap: 6px; }
.es-nome { font-size: .74rem; max-width: 100%; }
.es-bonus {
display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 10px;
}
.es-bonus-item { font-size: .64rem; }
/* 7d. BIJUUS: uma por linha, todas com a mesma altura. */
.bijuu-grid {
grid-template-columns: 1fr;
grid-auto-rows: 1fr;
}
/* 7e. "— vazio —" dos slots do status: o JS emite .es-vazio (e não
.es-slot-vazio, que é o que o CSS tinha), por isso ficava com a cor
clara herdada — quase invisível sobre o pergaminho. */
.es-vazio, .es-slot-vazio, .inv2-slot-vazio { color: #6b788c; }
/* ── 8. TREINO (05/09) ────────────────────────────────────────
A página já recebia o pergaminho, mas os cards não tinham
cabeçalho próprio no HTML, por isso não ganhavam a placa naval
e destoavam do resto do jogo. O `.tr-card-top` (nome +
descrição do atributo) passa a ser essa placa — está na lista
de cabeçalhos acima —, o que só exige clarear o que vive lá
dentro, que herdava as cores escuras do papel. */
.tr-card-top { align-items: center; gap: 10px; flex-wrap: wrap; }
.tr-card-nome { color: #fdf7e8; }
.tr-card-desc { color: #cfe2fb; }
/* O selo de dependência ("TAIJUTSU") é irmão do cabeçalho, não filho:
fica no papel, logo precisa de tinta escura, não de dourado claro. */
.tr-card-dep {
margin-top: 0;
color: #3a4557;
border-color: rgba(29,63,112,.35);
background: rgba(29,63,112,.06);
}
/* O do painel "Como funcionam os atributos" abre e fecha:
sem margem quando fechado, com o filete do card quando aberto. */
.tr-info-panel > summary { margin-bottom: 0; }
.tr-info-panel[open] > summary { margin-bottom: 12px; border-bottom: 2px solid #c69b48; }
/* Disposição pedida: Taijutsu e Ninjutsu lado a lado, Doujutsu e
Defesa por baixo, e Inteligência sozinha ao meio da última linha.
A ordem no HTML já é essa, portanto basta duas colunas e centrar
o último card — sem lhe mexer na largura em relação aos outros. */
.tr-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
max-width: 920px;
align-items: stretch;
}
.tr-grid > .tr-card:last-child {
grid-column: 1 / -1;
width: calc(50% - 8px);
margin: 0 auto;
}
.tr-info-panel { max-width: 920px; }
/* Em ecrã estreito volta a uma coluna (o card do meio também). */
@media (max-width: 720px) {
.tr-grid { grid-template-columns: 1fr; }
.tr-grid > .tr-card:last-child { width: 100%; }
}
/* ── 9. RANKING: linha "vila · nível" (05/09) ─────────────────
Fica debaixo do nome de cada ninja e usava `--text-dim`, que a
0,68rem sobre o pergaminho lê como cinzento lavado. Passa a tinta
escura — sem mudar tamanho nem peso, para o nome continuar a ser
o elemento dominante da linha. */
.rnk-ninja-sub { color: #1e2a3d; }