/* =============================================================================
ISEKAIRPG — Mini App
Identidade: "Aura" (o sistema mágico do lore) — brilho pulsando, acentos em
ouro/ferrugem/mana. Componentes de interação (gaveta, bottom sheet, ripple,
confete, número flutuante, esqueleto de carregamento) adaptados de um
projeto irmão que já validou esses padrões em produção.
============================================================================= */
:root {
--vazio: #0a0910;
--vazio-alto: #131020;
--painel: #17131f;
--painel-borda: #392f52;
--painel-borda-forte: #4d4070;
--tinta: #ede7f2;
--tinta-fraca: #9b93ac;
--ouro: #e8b64a;
--ferrugem: #d8623a;
--mana: #4fc3c8;
--verde: #7fd67f;
--rar-comum: #9098a8;
--rar-incomum: #4fd17a;
--rar-raro: #4a9eff;
--rar-epico: #b565e8;
--rar-lendario: #e8b64a;
--rar-mythic: #ff3b3b; /* 🔴 (09/10, dev) mítico: aura vermelha */
/* tons de canto — levemente mais claros que a cor base, pra "brilhar" no vértice */
--canto-incomum: #7fe89f;
--canto-raro: #7fbaff;
--canto-epico: #ce93f0;
--canto-lendario: #f5d484;
--fonte-display: 'Cinzel', serif;
--fonte-corpo: 'Manrope', sans-serif;
/* 11/09/2026 — era 'JetBrains Mono'. O guia é explícito: três famílias é
quase sempre uma a mais, e monoespaçada em rótulo pequeno pra "dar ar de
dados" está na lista de vícios. O que a mono resolvia de verdade era
número que não pula quando o valor muda — e isso é tabular-nums, logo
abaixo, na família que já estava carregada. Uma fonte a menos pra baixar.
O token continua existindo: pra voltar atrás é esta linha. */
--fonte-numero: 'Manrope', sans-serif;
/* 25/09/2026 — escala de tipo. Eram ~25 tamanhos soltos, 78 deles abaixo
de 12px (alguns em 8 e 9px), ilegíveis num celular. Agora são cinco
passos, e o menor é 12px. Ícone/emoji e campo de formulário ficam fora
da escala: emoji não é texto, e input abaixo de 16px faz o iOS dar zoom. */
--t-mini: 12px;
--t-pequeno: 13px;
--t-corpo: 15px;
--t-sub: 18px;
--t-titulo: 22px;
/* Cor da seção (25/09/2026). Cada botão da barra de baixo tem um tom, e
ele tinge a aba ativa, a borda do topo, a placa do andar e os títulos
de seção — dá pra saber onde você está sem ler. O dourado dos botões
de ação não muda: ação é ação em qualquer seção. */
--secao-mundo: var(--mana);
--secao-cidade: var(--ouro);
--secao-voce: #b48cf2;
--secao-cla: #e06a78;
--secao-mais: var(--tinta-fraca);
--cor-secao: var(--ouro);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background:
radial-gradient(ellipse 800px 500px at 50% -10%, rgba(232, 182, 74, 0.06), transparent),
radial-gradient(ellipse 600px 400px at 100% 100%, rgba(79, 195, 200, 0.05), transparent),
var(--vazio);
background-attachment: fixed;
color: var(--tinta);
font-family: var(--fonte-corpo);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
.oculto { display: none !important; }
body[data-secao="mundo"] { --cor-secao: var(--secao-mundo); }
body[data-secao="cidade"] { --cor-secao: var(--secao-cidade); }
body[data-secao="personagem"] { --cor-secao: var(--secao-voce); }
body[data-secao="clan"] { --cor-secao: var(--secao-cla); }
body[data-secao="mais"] { --cor-secao: var(--secao-mais); }
/* ---------- carregando ---------- */
.tela-carregando {
position: fixed; inset: 0; z-index: 100;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
background: var(--vazio);
}
.runa-girando {
width: 42px; height: 42px; border-radius: 50%;
border: 2px solid var(--painel-borda); border-top-color: var(--ouro);
animation: girar 0.9s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
.carregando-texto {
font-family: var(--fonte-display); font-size: var(--t-mini); letter-spacing: 0.1em;
color: var(--tinta-fraca);
}
/* ---------- shell / topo ---------- */
.app { max-width: 480px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
/* 25/09/2026 — topo em três colunas: a placa do andar, quem você é (nome e
carteira) e os botões. A borda de baixo pega a cor da seção. */
.topo {
background: linear-gradient(180deg, var(--painel), var(--vazio-alto));
border-bottom: 1px solid color-mix(in srgb, var(--cor-secao) 40%, var(--painel-borda));
padding: 10px 10px 10px 12px;
position: sticky; top: 0; z-index: 10;
display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
transition: border-color .25s;
}
.topo-id { min-width: 0; }
.topo-nome-linha { display: flex; align-items: center; gap: 7px; min-width: 0; }
.topo-botoes { display: flex; align-items: center; }
/* A placa: o número do andar é o elemento grande do topo. Os cantos
chanfrados lembram placa de pedra, não botão — ela informa, não se toca. */
.placa-andar {
min-width: 52px; padding: 5px 8px 6px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
background:
linear-gradient(180deg, color-mix(in srgb, var(--cor-secao) 16%, transparent), transparent 70%),
var(--vazio);
border: 1px solid color-mix(in srgb, var(--cor-secao) 55%, var(--painel-borda));
clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px),
calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
transition: border-color .25s;
}
.placa-andar-rotulo { font-size: var(--t-mini); color: var(--tinta-fraca); line-height: 1.1; }
.placa-andar-num {
font-family: var(--fonte-display); font-weight: 700; font-size: var(--t-titulo);
line-height: 1.05; color: var(--ouro); font-variant-numeric: tabular-nums;
}
.btn-hamburguer {
position: relative;
flex-shrink: 0; width: 30px; height: 30px;
background: rgba(0,0,0,0.22); border: 1px solid var(--painel-borda); border-radius: 8px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
cursor: pointer;
}
.btn-hamburguer span { width: 14px; height: 2px; background: var(--tinta); border-radius: 2px; }
.badge-menu {
position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px;
border-radius: 9px; background: var(--verde); color: #0c1a0c;
font-family: var(--fonte-numero); font-size: var(--t-mini); font-weight: 700;
display: flex; align-items: center; justify-content: center; padding: 0 3px;
box-shadow: 0 0 0 2px var(--vazio);
animation: badge-menu-pulso 1.8s ease-in-out infinite;
}
@keyframes badge-menu-pulso { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.retrato-mini {
width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
border: 1.5px solid var(--ouro); background: var(--painel);
display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.nome-topo {
flex: 1; min-width: 0; margin: 0;
font-family: var(--fonte-display); font-weight: 700; font-size: var(--t-sub);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.btn-som { flex-shrink: 0; background: none; border: none; cursor: pointer; font-size: var(--t-corpo); padding: 4px 6px; opacity: 0.8; }
.topo-recursos {
margin-top: 5px;
font-family: var(--fonte-numero); font-size: var(--t-pequeno); color: var(--tinta-fraca);
display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.topo-chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 2px 9px 2px 7px; border-radius: 999px;
background: rgba(0, 0, 0, 0.28); border: 1px solid var(--painel-borda);
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.topo-recursos b { color: var(--ouro); font-weight: 700; }
.conteudo { flex: 1; padding: 16px 16px calc(78px + env(safe-area-inset-bottom)); animation: entrar-tela 0.22s ease-out; }
@keyframes entrar-tela { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* ---------- bottom sheet ---------- */
.sheet-overlay {
position: fixed; inset: 0; z-index: 130;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
display: flex; align-items: flex-end;
}
.sheet-conteudo {
width: 100%; max-width: 480px; margin: 0 auto;
background: color-mix(in srgb, var(--painel) 94%, transparent);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border-radius: 20px 20px 0 0;
padding: 10px 18px calc(20px + env(safe-area-inset-bottom));
max-height: 82vh; overflow-y: auto;
animation: subir-sheet 0.25s ease-out;
box-shadow: 0 -8px 24px rgba(0,0,0,0.5);
}
@keyframes subir-sheet { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet-alca { width: 38px; height: 4px; background: var(--painel-borda); border-radius: 4px; margin: 6px auto 14px; }
/* ---------- puxar pra atualizar ---------- */
.puxar-indicador {
position: absolute; top: 64px; left: 50%; transform: translateX(-50%) translateY(0) rotate(0deg);
font-size: 18px; color: var(--ouro); opacity: 0; z-index: 5;
transition: opacity 0.15s ease; pointer-events: none;
}
/* ---------- esqueleto de carregamento ---------- */
.esqueleto-bloco {
border-radius: 14px;
background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.1), rgba(255,255,255,0.05));
background-size: 200% 100%; animation: pulsar-esqueleto 1.3s ease-in-out infinite;
height: 60px;
}
@keyframes pulsar-esqueleto { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
/* ---------- toast ---------- */
.toast {
position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(10px);
background: var(--painel); border: 1px solid var(--painel-borda); color: var(--tinta);
padding: 11px 18px; border-radius: 12px; font-size: var(--t-pequeno); font-weight: 600;
box-shadow: 0 8px 20px rgba(0,0,0,0.4);
z-index: 250; opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease;
max-width: 88vw; text-align: center;
}
.toast.mostrar { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.erro { border-color: var(--ferrugem); color: #ffb8a0; }
/* ---------- ripple ---------- */
.tem-ripple { position: relative; overflow: hidden; }
.ripple {
position: absolute; border-radius: 50%; pointer-events: none;
background: rgba(255,255,255,0.3); transform: scale(0);
animation: ripple-expandir 0.6s ease-out forwards;
}
@keyframes ripple-expandir { 0% { transform: scale(0); opacity: 0.7; } 100% { transform: scale(1); opacity: 0; } }
/* ---------- número flutuante ---------- */
.numero-flutuante {
position: fixed; z-index: 60; pointer-events: none; transform: translate(-50%,-50%);
font-family: var(--fonte-numero); font-weight: 700; font-size: var(--t-pequeno);
animation: subir-sumir 1.1s ease-out forwards;
}
.numero-flutuante.positivo { color: var(--verde); }
.numero-flutuante.negativo { color: var(--ferrugem); }
@keyframes subir-sumir {
0% { opacity: 0; transform: translate(-50%,-50%) scale(0.8); }
15% { opacity: 1; transform: translate(-50%,-50%) scale(1.15); }
30% { transform: translate(-50%,-50%) scale(1); }
100% { opacity: 0; transform: translate(-50%,-140%) scale(1); }
}
/* ---------- flash dourado ---------- */
.flash-dourado {
position: fixed; inset: 0; z-index: 199; pointer-events: none;
background: radial-gradient(circle, rgba(232,182,74,0.5), transparent 70%);
animation: flash-sumir 0.7s ease-out forwards;
}
@keyframes flash-sumir { 0% { opacity: 1; } 100% { opacity: 0; } }
/* ---------- notificação grande (nível, forja, evolução, invocação) ---------- */
.notificacao-grande-overlay {
position: fixed; inset: 0; z-index: 210;
display: flex; align-items: center; justify-content: center;
pointer-events: none; padding: 40px;
}
.notificacao-grande {
position: relative; pointer-events: none;
background: linear-gradient(180deg, var(--painel), var(--vazio-alto));
border: 1px solid var(--painel-borda-forte); border-radius: 18px;
padding: 26px 34px; text-align: center; overflow: hidden;
box-shadow: 0 16px 40px rgba(0,0,0,0.55);
animation: notif-entrar 0.35s cubic-bezier(0.22,1,0.36,1) forwards, notif-sair 0.3s ease-in forwards 1.7s;
}
@keyframes notif-entrar {
0% { opacity: 0; transform: scale(0.8) translateY(10px); }
100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes notif-sair {
0% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(0.92) translateY(-6px); }
}
.notificacao-grande::before {
content: ""; position: absolute; inset: 0;
background: radial-gradient(circle at 50% 30%, rgba(232,182,74,0.25), transparent 65%);
animation: notif-pulso 1.4s ease-in-out infinite;
}
@keyframes notif-pulso { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
.notificacao-grande-icone { position: relative; z-index: 1; font-size: 38px; margin-bottom: 6px; }
.notificacao-grande-titulo {
position: relative; z-index: 1;
font-family: var(--fonte-display); font-weight: 700; font-size: var(--t-sub); color: var(--ouro);
text-shadow: 0 0 16px rgba(232,182,74,0.6);
}
.notificacao-grande-sub {
position: relative; z-index: 1; margin-top: 4px;
font-size: var(--t-pequeno); color: var(--tinta-fraca);
}
/* ---------- botões genéricos ---------- */
.botao-secundario {
background: var(--painel); border: 1px solid var(--painel-borda); color: var(--tinta);
padding: 10px 20px; border-radius: 10px; font-family: var(--fonte-corpo); font-weight: 600; font-size: var(--t-corpo);
}
.botao-holofote {
background: linear-gradient(180deg, #f0cf7a, var(--ouro) 55%, #c99a3a); color: #221904;
border: none; padding: 12px 20px; border-radius: 12px;
font-family: var(--fonte-corpo); font-weight: 800; font-size: var(--t-corpo); width: 100%;
box-shadow: 0 3px 0 #a9782a, inset 0 1px 0 rgba(255,255,255,0.4);
transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.botao-holofote:active {
transform: translateY(2px);
box-shadow: 0 1px 0 #a9782a, inset 0 1px 0 rgba(255,255,255,0.3);
}
/* ---------- placeholder de tela ainda não migrada ---------- */
.em-construcao {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 10px; padding: 60px 20px; text-align: center; color: var(--tinta-fraca);
}
.em-construcao-icone { font-size: 36px; }
/* ---------- resultado de combate (Arena, Arena de Pets) ---------- */
.resultado-combate { position: relative; overflow: hidden; border-radius: 16px; }
.resultado-vitoria::before {
content: ""; position: absolute; inset: 0;
background: radial-gradient(circle at 50% 40%, rgba(232,182,74,0.22), transparent 65%);
animation: resultado-vitoria-pulso 2.2s ease-in-out infinite;
pointer-events: none;
}
@keyframes resultado-vitoria-pulso {
0%, 100% { opacity: 0.5; transform: scale(0.95); }
50% { opacity: 1; transform: scale(1.08); }
}
.resultado-vitoria .em-construcao-icone {
position: relative; z-index: 1;
text-shadow: 0 0 20px rgba(232,182,74,0.8);
animation: resultado-icone-escala 2.2s ease-in-out infinite;
}
@keyframes resultado-icone-escala { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.resultado-vitoria p:not(.texto-fraco) { position: relative; z-index: 1; color: var(--ouro); font-family: var(--fonte-display); font-weight: 700; font-size: var(--t-sub); }
.resultado-derrota { background: radial-gradient(circle at 50% 30%, rgba(216,98,58,0.08), transparent 70%); }
.resultado-derrota .em-construcao-icone { filter: grayscale(0.4) opacity(0.8); }
.resultado-derrota p:not(.texto-fraco) { color: var(--tinta-fraca); font-family: var(--fonte-display); font-size: var(--t-corpo); }
/* ---------- retrato / aura (tela de personagem) ---------- */
.cabecalho-personagem { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.retrato-wrap { position: relative; width: 84px; height: 84px; flex-shrink: 0; }
.retrato-aura {
position: absolute; inset: -14px; border-radius: 50%;
background: radial-gradient(circle, color-mix(in srgb, var(--cor-aura, var(--ouro)) 55%, transparent), transparent 70%);
animation: pulsar-aura 3.2s ease-in-out infinite;
}
@keyframes pulsar-aura { 0%,100% { opacity: 0.55; transform: scale(0.96); } 50% { opacity: 0.95; transform: scale(1.06); } }
.retrato-simbolo {
position: relative; width: 100%; height: 100%; border-radius: 50%;
border: 2px solid var(--cor-aura, var(--ouro)); background: var(--painel);
box-shadow: 0 0 14px -4px var(--cor-aura, var(--ouro));
display: flex; align-items: center; justify-content: center; font-size: 34px;
}
.identidade { flex: 1; min-width: 0; }
.nome-jogador { font-family: var(--fonte-display); font-size: var(--t-titulo); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.classe-raca { font-size: var(--t-pequeno); color: var(--tinta-fraca); margin-top: 2px; text-transform: capitalize; }
.chakra-linha { font-size: var(--t-mini); color: var(--rar-epico); margin-top: 4px; line-height: 1.3; }
.nivel-selo {
position: relative;
display: inline-flex; align-items: baseline; gap: 5px; margin-top: 8px;
background: linear-gradient(135deg, color-mix(in srgb, var(--cor-aura, var(--ouro)) 16%, transparent), color-mix(in srgb, var(--cor-aura, var(--ouro)) 4%, transparent));
border: 1px solid color-mix(in srgb, var(--cor-aura, var(--ouro)) 35%, transparent); padding: 3px 10px; border-radius: 4px;
background-image:
linear-gradient(135deg, var(--cor-aura, var(--ouro)) 45%, transparent 46%) top left / 6px 6px no-repeat,
linear-gradient(-135deg, var(--cor-aura, var(--ouro)) 45%, transparent 46%) top right / 6px 6px no-repeat,
linear-gradient(45deg, var(--cor-aura, var(--ouro)) 45%, transparent 46%) bottom left / 6px 6px no-repeat,
linear-gradient(-45deg, var(--cor-aura, var(--ouro)) 45%, transparent 46%) bottom right / 6px 6px no-repeat,
linear-gradient(135deg, color-mix(in srgb, var(--cor-aura, var(--ouro)) 16%, transparent), color-mix(in srgb, var(--cor-aura, var(--ouro)) 4%, transparent));
}
#nivel-valor { font-family: var(--fonte-numero); font-weight: 700; font-size: var(--t-corpo); color: var(--cor-aura, var(--ouro)); }
.nivel-rotulo { font-size: var(--t-mini); letter-spacing: 1px; color: var(--tinta-fraca); }
.barras { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.barra-rotulo { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--t-pequeno); color: var(--tinta-fraca); margin-bottom: 5px; }
.barra-numero { font-family: var(--fonte-numero); color: var(--tinta); }
.barra-trilho { height: 10px; border-radius: 6px; background: var(--painel); border: 1px solid var(--painel-borda); overflow: hidden; }
.barra-preenchimento { height: 100%; border-radius: 6px; width: 0%; transition: width 0.8s cubic-bezier(0.22,1,0.36,1); }
.barra-hp { background: linear-gradient(90deg, var(--ferrugem), #f0865e); }
.barra-xp { background: linear-gradient(90deg, var(--mana), #8fe3e6); }
.secao-titulo {
font-family: var(--fonte-display); font-size: var(--t-corpo); letter-spacing: 1px;
color: color-mix(in srgb, var(--cor-secao) 55%, var(--tinta-fraca));
text-transform: uppercase; margin: 0 0 10px 2px;
}
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 24px; }
.stat-linha {
background: var(--painel); border: 1px solid var(--painel-borda); border-radius: 10px;
padding: 8px 12px 8px 8px; display: flex; align-items: center; gap: 9px; font-size: var(--t-pequeno);
opacity: 0; animation: aparecer-stat 0.35s ease-out forwards;
}
@keyframes aparecer-stat { to { opacity: 1; } }
.stat-icone-chip {
flex-shrink: 0; width: 26px; height: 26px; border-radius: 7px;
background: color-mix(in srgb, var(--cor-aura, var(--ouro)) 14%, var(--vazio-alto));
display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.stat-linha-corpo { flex: 1; display: flex; justify-content: space-between; align-items: baseline; min-width: 0; }
.stat-nome { color: var(--tinta-fraca); }
.stat-valor { font-family: var(--fonte-numero); font-weight: 700; color: var(--tinta); }
.equip-secao, .pets-secao { margin-bottom: 24px; }
.equip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.equip-slot {
background-color: var(--painel); border: 1px solid var(--painel-borda); border-radius: 12px;
padding: 10px 6px; text-align: center; min-height: 74px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.equip-slot.vazio { opacity: 0.45; border-style: dashed; }
/* O ícone do slot vira a ARTE do item quando há um equipado: antes espada
comum e espada lendária mostravam o mesmo desenho de tipo.
⚠️ background-color e não background (armadilha nº 2). */
.equip-slot-icone {
font-size: 20px; width: 44px; height: 44px; border-radius: 9px;
margin: 0 auto 2px; background-color: transparent;
background-size: cover; background-position: center;
display: flex; align-items: center; justify-content: center;
}
.equip-slot-nome { font-size: var(--t-mini); color: var(--tinta-fraca); letter-spacing: 0.4px; }
.equip-slot-item { font-size: var(--t-mini); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
/* ---------- raridade: cantos ornamentados + glow por tier ----------
Os 4 triângulos de canto são só camadas de background (sem DOM extra),
então funcionam em qualquer elemento com --cor-canto definida — não
precisa mudar o JS que já monta essas classes. */
.rar-comum { border-color: var(--rar-comum) !important; }
.rar-incomum {
border-color: var(--rar-incomum) !important;
box-shadow: 0 0 8px -5px var(--rar-incomum);
}
.rar-raro, .rar-epico, .rar-lendario {
border-width: 1.5px !important;
background-image:
linear-gradient(135deg, var(--cor-canto) 45%, transparent 46%) top left / 9px 9px no-repeat,
linear-gradient(-135deg, var(--cor-canto) 45%, transparent 46%) top right / 9px 9px no-repeat,
linear-gradient(45deg, var(--cor-canto) 45%, transparent 46%) bottom left / 9px 9px no-repeat,
linear-gradient(-45deg, var(--cor-canto) 45%, transparent 46%) bottom right / 9px 9px no-repeat;
}
.rar-raro {
border-color: var(--rar-raro) !important;
box-shadow: 0 0 10px -4px var(--rar-raro);
--cor-canto: var(--canto-raro);
}
.rar-epico {
border-color: var(--rar-epico) !important;
box-shadow: 0 0 13px -3px var(--rar-epico);
--cor-canto: var(--canto-epico);
}
.rar-lendario {
border-color: var(--rar-lendario) !important; border-width: 2px !important;
box-shadow: 0 0 15px -3px var(--rar-lendario);
--cor-canto: var(--canto-lendario);
animation: pulsar-lendario 2.4s ease-in-out infinite;
}
@keyframes pulsar-lendario {
0%, 100% { box-shadow: 0 0 15px -3px var(--rar-lendario); }
50% { box-shadow: 0 0 22px -2px var(--rar-lendario); }
}
.rar-mythic {
border-color: var(--rar-mythic) !important; border-width: 2px !important;
box-shadow: 0 0 16px -2px rgba(255,40,40,0.75);
--cor-canto: #ff3b3b;
background-image:
linear-gradient(135deg, var(--cor-canto) 45%, transparent 46%) top left / 9px 9px no-repeat,
linear-gradient(-135deg, var(--cor-canto) 45%, transparent 46%) top right / 9px 9px no-repeat,
linear-gradient(45deg, var(--cor-canto) 45%, transparent 46%) bottom left / 9px 9px no-repeat,
linear-gradient(-45deg, var(--cor-canto) 45%, transparent 46%) bottom right / 9px 9px no-repeat;
animation: pulsar-mitico 1.8s ease-in-out infinite;
}
@keyframes pulsar-mitico {
0%, 100% { box-shadow: 0 0 12px -2px rgba(255,40,40,0.55), inset 0 0 10px -6px rgba(255,40,40,0.5); }
50% { box-shadow: 0 0 26px 2px rgba(255,40,40,0.95), inset 0 0 14px -6px rgba(255,60,60,0.7); }
}
/* minmax(0, 1fr): com "1fr" puro a coluna não encolhe abaixo do texto, e
com o mínimo de 12px o 5º slot saía da tela (medido: página 467px numa
tela de 390). */
.pets-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.pet-slot {
min-width: 0;
aspect-ratio: 1; border-radius: 10px; background: var(--painel); border: 1px solid var(--painel-borda);
display: flex; flex-direction: column; align-items: center; justify-content: center;
font-size: var(--t-mini); color: var(--tinta-fraca); text-align: center; padding: 3px; gap: 2px;
transition: transform 0.1s ease, background 0.15s ease;
}
.pet-slot:active { transform: scale(0.94); background: rgba(255,255,255,0.04); }
.pet-slot:not(.vazio) { border-color: color-mix(in srgb, var(--cor-aura, var(--ouro)) 30%, var(--painel-borda)); }
.pet-slot.vazio { opacity: 0.35; border-style: dashed; }
.pet-slot-nivel { font-family: var(--fonte-numero); font-weight: 700; color: var(--ouro); font-size: var(--t-mini); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 🐾 A arte do pet dentro do slot. O nome fica em uma linha só e corta com
reticências: cinco cartões numa tela de celular não comportam duas. */
.pet-slot-arte {
width: 100%; flex: 1; min-height: 0; border-radius: 8px;
background-color: var(--vazio-alto);
background-size: cover; background-position: center;
display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.pet-slot-nome {
width: 100%; font-size: var(--t-mini); line-height: 1.2; color: var(--tinta);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 🐎 montaria equipada — um slot largo, porque é uma só */
.montaria-slot {
display: flex; align-items: center; gap: 12px; width: 100%;
padding: 10px; border-radius: 12px;
background-color: var(--painel); border: 1px solid var(--painel-borda);
cursor: pointer; text-align: left; min-height: 64px;
}
.montaria-slot.vazio { opacity: 0.6; border-style: dashed; }
.montaria-slot:active { transform: scale(0.99); }
.montaria-arte {
width: 52px; height: 52px; flex: 0 0 auto; border-radius: 10px;
background-color: var(--vazio-alto); background-size: cover; background-position: center;
display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.montaria-txt { min-width: 0; flex: 1; }
.montaria-nome { font-size: var(--t-corpo); font-weight: 700; color: var(--tinta); }
.montaria-sub { font-size: var(--t-mini); color: var(--tinta-fraca); margin-top: 2px; }
/* 📊 a conta do atributo (quanto é base, quanto veio da trilha) */
.stat-nome-bloco { display: flex; flex-direction: column; min-width: 0; }
.stat-fonte { font-size: var(--t-mini); color: var(--tinta-fraca); font-family: var(--fonte-numero); }
/* ⚔️ os atributos de combate do pet, no próprio slot do esquadrão */
.pet-slot-stats {
display: flex; flex-wrap: wrap; justify-content: center; gap: 4px;
margin-top: 3px; font-size: var(--t-mini); color: var(--tinta-fraca);
font-family: var(--fonte-numero); font-variant-numeric: tabular-nums;
}
@media (min-width: 520px) { .equip-grid { grid-template-columns: repeat(4, 1fr); } }
/* ---------- carrossel horizontal de filtro (inventário por slot) ---------- */
.filtro-carrossel {
display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 14px;
scrollbar-width: none;
/* 🖼️ (09/07/2026): desvanece as pontas — sinaliza visualmente que o
carrossel continua, e ajuda o dedo a não tocar exatamente na borda da
tela (no iOS, um toque bem na borda pode disparar o gesto de fechar
o app por engano). */
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
.filtro-carrossel::-webkit-scrollbar { display: none; }
.filtro-chip {
flex-shrink: 0; background: var(--painel); border: 1px solid var(--painel-borda); color: var(--tinta-fraca);
padding: 8px 14px; border-radius: 20px; font-size: var(--t-pequeno); font-weight: 600; white-space: nowrap;
}
.filtro-chip.ativo { background: linear-gradient(135deg, var(--ouro), #c99a3a); color: #221904; border-color: transparent; }
/* ---------- cartão de item / pet (inventário e esquadrão) ---------- */
.cartao-item {
background-color: var(--painel); border: 1px solid var(--painel-borda); border-radius: 12px;
padding: 12px 14px; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.cartao-item-info { min-width: 0; flex: 1; }
.cartao-item-nome { font-weight: 700; font-size: var(--t-pequeno); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartao-item-bonus { font-family: var(--fonte-numero); font-size: var(--t-mini); color: var(--ouro); margin-top: 3px; }
.cartao-item-bonus-evo { display: flex; align-items: center; gap: 1px; font-family: var(--fonte-corpo); }
.estrelas-evo { display: inline-flex; gap: 1px; }
.estrela-pip { font-size: var(--t-mini); color: var(--painel-borda-forte); }
.estrela-pip.cheia { color: var(--rar-lendario); }
.cartao-item-sockets { font-size: var(--t-mini); color: var(--tinta-fraca); margin-top: 2px; }
.cartao-item-acoes { display: flex; gap: 6px; flex-shrink: 0; }
.cartao-item.equipada { border-color: var(--ouro); background-color: color-mix(in srgb, var(--ouro) 6%, var(--painel)); }
.texto-fraco { color: var(--tinta-fraca); font-size: var(--t-pequeno); padding: 10px 2px; }
/* ---------- estado vazio (mais convidativo que texto solto) ---------- */
.estado-vazio {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 8px; padding: 30px 20px; text-align: center;
border: 1px dashed var(--painel-borda); border-radius: 14px; margin-bottom: 8px;
}
.estado-vazio-icone { font-size: 26px; opacity: 0.7; }
.estado-vazio-texto { font-size: var(--t-pequeno); color: var(--tinta-fraca); line-height: 1.5; max-width: 260px; }
/* ---------- controles dentro do bottom sheet ---------- */
.sheet-opcao { width: 100%; margin-top: 8px; text-align: left; }
.sheet-select, .sheet-input {
width: 100%; background: var(--vazio-alto); border: 1px solid var(--painel-borda); color: var(--tinta);
padding: 10px 12px; border-radius: 10px; font-family: var(--fonte-corpo); font-size: 14px; margin-top: 8px;
}
/* ---------- missões ---------- */
.cartao-missao {
background: var(--painel); border: 1px solid var(--painel-borda); border-radius: 12px;
padding: 12px 14px; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.cartao-missao.concluida { border-color: var(--verde); }
.cartao-missao.resgatada { opacity: 0.55; }
.missao-desc { font-size: var(--t-mini); color: var(--tinta-fraca); margin-top: 4px; line-height: 1.4; }
.missao-selo {
flex-shrink: 0; font-size: var(--t-mini); font-weight: 700; padding: 6px 10px; border-radius: 20px;
background: rgba(127,214,127,0.15); color: var(--verde);
}
.missao-selo.pendente { background: rgba(155,147,172,0.15); color: var(--tinta-fraca); }
/* --- diárias do reino (25/09/2026) --- */
.diarias { margin-bottom: 22px; }
.diarias-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.diarias-topo .secao-titulo { margin-bottom: 4px; }
.diarias-pago { font-size: var(--t-pequeno); font-weight: 700; color: var(--ouro); font-variant-numeric: tabular-nums; white-space: nowrap; }
.diarias > .texto-fraco { margin-bottom: 10px; }
.diaria {
display: flex; align-items: center; gap: 12px;
background: var(--painel); border: 1px solid var(--painel-borda); border-radius: 12px;
padding: 12px 14px; margin-bottom: 8px;
}
.diaria.pronta { border-color: var(--verde); }
.diaria.resgatada { opacity: 0.55; }
.diaria-info { flex: 1; min-width: 0; }
.diaria-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.diaria-nome { font-family: var(--fonte-display); font-weight: 700; font-size: var(--t-corpo); }
.diaria-ouro { font-size: var(--t-pequeno); font-weight: 700; color: var(--ouro); font-variant-numeric: tabular-nums; white-space: nowrap; }
.diaria-trilho { height: 6px; margin-top: 9px; border-radius: 3px; background: var(--vazio-alto); overflow: hidden; }
.diaria-cheio { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--mana), var(--verde)); transition: width .4s ease; }
.diaria-conta { margin-top: 3px; font-size: var(--t-mini); color: var(--tinta-fraca); text-align: right; font-variant-numeric: tabular-nums; }
.diaria-bonus { border-style: dashed; border-color: color-mix(in srgb, var(--ouro) 45%, var(--painel-borda)); }
.diaria-bonus.pronta { border-style: solid; border-color: var(--ouro); }
/* ---------- ranking semanal da arena ---------- */
.gold-panel {
background: linear-gradient(180deg, var(--painel), var(--vazio-alto));
border: 1px solid var(--painel-borda); border-radius: 12px; padding: 12px 14px;
}
.arena-semana-titulo {
font-family: var(--fonte-display); font-weight: 700; font-size: var(--t-pequeno); color: var(--ouro); margin-bottom: 8px;
}
.arena-semana-faixas { display: flex; gap: 8px; flex-wrap: wrap; }
.arena-semana-faixa {
font-family: var(--fonte-numero); font-size: var(--t-mini); font-weight: 700; color: var(--tinta-fraca);
background: rgba(0,0,0,0.2); border-radius: 6px; padding: 3px 8px;
}
/* ---------- boss global (compartilhado entre todos os jogadores) ---------- */
.boss-global-painel {
position: relative; text-align: center;
background: linear-gradient(180deg, #241418, #160e10);
border: 1px solid var(--ferrugem); border-radius: 16px; padding: 20px 16px;
margin-bottom: 14px; overflow: hidden;
}
.boss-global-painel::before {
content: ""; position: absolute; inset: 0;
background: radial-gradient(circle at 50% 0%, rgba(216,98,58,0.22), transparent 65%);
animation: boss-global-pulso 2.6s ease-in-out infinite;
pointer-events: none;
}
@keyframes boss-global-pulso { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
.boss-global-nome {
position: relative; z-index: 1;
font-family: var(--fonte-display); font-weight: 800; font-size: var(--t-sub); color: #ff8a6b;
text-shadow: 0 0 14px rgba(216,98,58,0.7);
}
.boss-global-geracao { position: relative; z-index: 1; font-size: var(--t-mini); color: var(--tinta-fraca); margin-top: 2px; }
.boss-global-fase {
position: relative; z-index: 1; font-size: var(--t-mini); color: #ffb89e; margin-top: 6px; font-weight: 700;
}
.boss-global-barra-wrap { position: relative; z-index: 1; margin-top: 12px; }
.boss-global-sessao {
position: relative; z-index: 1; font-size: var(--t-mini); color: var(--ouro); margin-top: 10px; line-height: 1.5;
}
/* ranking: ver "RANKING — pódio" no fim do arquivo (25/09/2026) */
/* ---------- fusão mítica (Forja) ---------- */
.fusao-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-bottom: 8px; }
.fusao-item {
display: flex; flex-direction: column; align-items: center; gap: 4px;
background: var(--painel); border: 1px solid var(--painel-borda); border-radius: 10px;
padding: 10px 6px; text-align: center;
}
.fusao-item.pronto { border-color: var(--rar-mythic); box-shadow: 0 0 10px -4px rgba(255,40,40,0.7); }
.fusao-item-icone { font-size: 18px; }
.fusao-item-nome { font-size: var(--t-mini); color: var(--tinta-fraca); }
.fusao-item-contagem { font-family: var(--fonte-numero); font-size: var(--t-mini); font-weight: 700; color: var(--tinta); }
.fusao-item .botao-secundario { width: 100%; padding: 5px; font-size: var(--t-mini); margin-top: 2px; }
/* ---------- gacha (templo de evocação / estábulo) ---------- */
.gacha-botoes { display: flex; gap: 10px; margin: 16px 0 24px; }
.gacha-botoes button { flex: 1; }
/* ---------- revelação em estágio dos itens sorteados ---------- */
.cartao-revelar {
opacity: 0; transform: translateY(10px) scale(0.96);
animation: revelar-item 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes revelar-item {
to { opacity: 1; transform: translateY(0) scale(1); }
}
.cartao-carregando {
justify-content: center; min-height: 24px;
animation: revelar-item 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards, carregando-tremor 0.35s ease-in-out infinite;
}
.cartao-carregando .cartao-item-nome { color: var(--tinta-fraca); font-size: var(--t-corpo); text-align: center; width: 100%; }
@keyframes carregando-tremor {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-2px); }
75% { transform: translateX(2px); }
}
/* ---------- botão desabilitado (forja) ---------- */
.botao-holofote:disabled { opacity: 0.4; filter: grayscale(0.6); }
/* ---------- combate (Torre) ---------- */
.barra-atb { background: linear-gradient(90deg, var(--mana), #8fe3e6); animation: atb-shimmer 2s ease-in-out infinite; }
@keyframes atb-shimmer { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.2); } }
.barra-trilho.mini { height: 6px; margin: 4px 0; }
.barra-numero-mini { font-family: var(--fonte-numero); font-size: var(--t-mini); color: var(--tinta-fraca); text-align: right; }
/* fila de iniciativa — ordem de quem age a seguir, do mais pronto pro menos */
/* Próximos turnos. A ordem é calculada com a MESMA regra do motor (a barra
enche a spd por unidade de tempo, age em 100 e desconta 100), então não é
estimativa — é a conta. Mas é PREVISÃO: vale enquanto ninguém morrer nem
for lentificado, e por isso o título diz "próximos" e não "será". */
.fila-caixa { margin-bottom: 4px; }
.fila-titulo {
font-size: var(--t-mini); letter-spacing: 0.08em; text-transform: uppercase;
color: var(--tinta-fraca); margin-bottom: 5px;
}
.fila-iniciativa {
display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 12px; margin-top: -2px;
scrollbar-width: none;
}
.fila-iniciativa::-webkit-scrollbar { display: none; }
.fila-chip {
position: relative; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
background-color: var(--painel); background-size: cover; background-position: center;
border: 1.5px solid var(--painel-borda);
display: flex; align-items: center; justify-content: center; font-size: var(--t-corpo);
opacity: 0.55; transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
/* Os mais distantes desbotam: a ordem importa mais perto do agora, e o
degradê diz isso sem precisar de número. */
.fila-chip:nth-child(n+5) { opacity: 0.4; }
.fila-chip:nth-child(n+8) { opacity: 0.28; }
/* A letra liga o chip à ficha do inimigo lá embaixo. Sem ela, dez carinhas
iguais não dizem qual monstro age quando. */
.fila-chip-tag {
position: absolute; bottom: -3px; right: -3px;
background: var(--vazio); border: 1px solid var(--painel-borda);
border-radius: 6px; padding: 0 3px;
font-size: var(--t-mini); font-weight: 800; line-height: 1.35; color: var(--tinta);
}
.fila-chip.jogador { border-color: var(--mana); }
.fila-chip.inimigo { border-color: var(--ferrugem); }
.fila-chip.proximo { opacity: 1; transform: scale(1.18); }
.fila-chip.proximo .fila-chip-tag { border-color: var(--ouro); color: var(--ouro); }
.fila-chip.jogador.proximo { box-shadow: 0 0 12px -2px var(--mana); }
.fila-chip.inimigo.proximo { box-shadow: 0 0 12px -2px var(--ferrugem); }
.fila-chip.morto { opacity: 0.25; filter: grayscale(1); }
/* flash de dano recebido — pulso vermelho rápido, some sozinho */
.flash-dano { animation: flash-dano-pulso 0.45s ease-out; }
@keyframes flash-dano-pulso {
0% { box-shadow: 0 0 0 2px rgba(226,75,74,0.9), 0 0 14px rgba(226,75,74,0.6); }
100% { box-shadow: none; }
}
.cartao-inimigo {
background: var(--painel); border: 1px solid var(--painel-borda); border-radius: 12px;
padding: 10px 14px; margin-bottom: 8px; cursor: pointer;
transition: transform 0.1s ease, background 0.15s ease, border-color 0.15s ease;
}
.cartao-inimigo:active { transform: scale(0.97); background: rgba(255,255,255,0.04); }
.cartao-inimigo.selecionado { border-color: var(--ferrugem); box-shadow: 0 0 10px -3px var(--ferrugem); }
.barra-inimigo { background: linear-gradient(90deg, var(--ferrugem), #f0865e); }
.log-combate {
background: var(--vazio-alto); border: 1px solid var(--painel-borda); border-radius: 10px;
padding: 10px 12px; font-size: var(--t-pequeno); color: var(--tinta-fraca); line-height: 1.5;
margin: 12px 0;
}
/* Duas colunas fixas. Com flex-wrap o número de colunas mudava conforme a
quantidade de botões — Atacar sozinho virava um botão da largura da tela,
três skills viravam três colunas espremidas. Grade fixa dá posição estável:
o dedo aprende onde fica Atacar e não precisa reler a tela a cada turno. */
.combate-acoes {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0;
}
.combate-acoes button { width: 100%; min-width: 0; min-height: 44px; }
/* Botão sozinho ocupa as duas colunas em vez de deixar um buraco. */
.combate-acoes button:only-child { grid-column: 1 / -1; }
/* ---------- arena (pvp e pets) ---------- */
.barra-inimigo-full { background: linear-gradient(90deg, var(--ferrugem), #f0865e); }
/* ---------- traição (raid) ---------- */
.traicao-linha { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--painel-borda); }
.botao-traicao {
width: 100%; background: rgba(216, 98, 58, 0.1); border: 1px solid var(--ferrugem);
color: #ffb8a0; padding: 9px 14px; border-radius: 10px;
font-family: var(--fonte-corpo); font-weight: 600; font-size: var(--t-pequeno);
}
/* ---------- lobby de raid ---------- */
.cartao-item.voce { border-color: var(--mana); background: color-mix(in srgb, var(--mana) 6%, var(--painel)); }
.status-membro.pronto { color: var(--verde) !important; }
/* ---------- painel VS de combate (retratos frente a frente + cronômetro) ---------- */
.combate-vs {
display: flex; align-items: flex-start; gap: 6px;
background: linear-gradient(180deg, var(--painel), var(--vazio-alto));
border: 1px solid var(--painel-borda); border-radius: 16px;
padding: 16px 10px 14px; margin-bottom: 14px;
}
.combate-vs-lado {
flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
}
/* Quadrado e o maior que couber: é o retrato principal da tela de luta, e
redondo com 56px cortava justamente a silhueta.
Largura FLUIDA com teto, não valor fixo: com 130px fixos o retrato
estouraria a coluna em aparelho estreito e empurraria o painel pra fora
da tela. Assim ele ocupa o que tem, até 130.
⚠️ background-color e NÃO background: o shorthand apagaria a imagem
posta pelo JS (armadilha nº 2 do projeto). */
.combate-vs-retrato {
width: 100%; max-width: 130px; aspect-ratio: 1;
border-radius: 14px; overflow: hidden;
background-color: var(--vazio-alto); background-size: cover; background-position: center;
border: 2px solid var(--mana);
display: flex; align-items: center; justify-content: center; font-size: 44px;
}
.combate-vs-lado.inimigo .combate-vs-retrato { border-color: var(--ferrugem); }
.combate-vs-lado.inimigo.atingido .combate-vs-retrato { animation: flash-dano-pulso 0.45s ease-out; }
.combate-vs-nome {
font-family: var(--fonte-display); font-weight: 700; font-size: var(--t-mini); text-align: center;
max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.combate-vs-barra-wrap { width: 100%; }
.combate-vs-barra-wrap .barra-numero-mini { text-align: center; }
/* Só o cronômetro mora aqui agora. Estreito de propósito: cada pixel que
este meio não usa vira largura dos dois retratos, que são o assunto. */
.combate-vs-meio {
flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
justify-content: center; gap: 4px; padding: 0 6px; max-width: 64px;
}
/* Título da tela de luta. Em ouro e na fonte de display porque é o título
da página — o mesmo peso que "Inimigos" tem mais abaixo, só que maior. */
.titulo-luta {
display: flex; align-items: baseline; justify-content: center;
gap: 8px; flex-wrap: wrap;
margin: 2px 0 12px; text-align: center;
}
.titulo-luta-onde,
.titulo-luta-detalhe {
font-family: var(--fonte-display); font-weight: 700;
font-size: var(--t-titulo); line-height: 1.15; color: var(--ouro);
letter-spacing: 0.03em;
}
.titulo-luta-detalhe { font-variant-numeric: tabular-nums; }
.combate-vs-timer {
font-family: var(--fonte-numero); font-size: var(--t-mini); color: var(--tinta-fraca);
white-space: nowrap; font-variant-numeric: tabular-nums;
}
#combate-cronometro { color: var(--ouro); font-weight: 700; }
/* ---------- fileira de inimigos (tela de luta) ----------
Substituiu a grade de quadradinhos: lá o retrato tinha 30px e a arte não
cabia. Aqui cada inimigo tem arte grande, nome e a própria barra de vida
embaixo — e a fileira rola de lado quando são muitos, em vez de quebrar
linha e empurrar os botões pra fora da tela. */
/* Cinco por linha, em qualquer largura de tela. Grade de 5 frações em vez
de largura fixa: com px fixo, o aparelho estreito encaixava 4 e o largo
deixava sobra — e o número de fichas por linha mudando de celular pra
celular é o tipo de coisa que faz a tela parecer quebrada. */
.fileira-inimigos {
display: grid; grid-template-columns: repeat(5, 1fr);
gap: 5px; margin-bottom: 14px; padding: 2px 0 2px;
}
.inimigo-ficha {
position: relative; min-width: 0;
background: var(--painel); border: 1px solid var(--painel-borda);
border-radius: 9px; padding: 4px 3px 5px;
display: flex; flex-direction: column; align-items: center; gap: 3px;
color: var(--tinta); font-family: inherit; cursor: pointer;
transition: transform 0.1s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.inimigo-ficha:active { transform: scale(0.96); }
.inimigo-ficha:focus-visible { outline: 2px solid var(--mana); outline-offset: 2px; }
.inimigo-ficha.selecionado {
border-color: var(--ferrugem); box-shadow: 0 0 12px -3px var(--ferrugem);
}
.inimigo-ficha.morto { opacity: 0.32; filter: grayscale(1); }
.inimigo-ficha-arte {
width: 100%; aspect-ratio: 1; border-radius: 7px;
background-color: var(--vazio-alto); background-size: cover; background-position: center;
display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.inimigo-ficha-alvo { position: absolute; top: 2px; right: 3px; font-size: var(--t-mini); }
.inimigo-ficha-tag {
position: absolute; top: 2px; left: 3px;
background: var(--vazio); border: 1px solid var(--painel-borda);
border-radius: 6px; padding: 0 4px;
font-size: var(--t-mini); font-weight: 800; color: var(--tinta);
}
/* Com o mínimo de 12px (25/09/2026), uma linha só cortava o nome em
"Guardiã…". Duas linhas cabem o nome; a altura fixa de 2 linhas mantém
as barras de vida dos três cartões alinhadas. */
.inimigo-ficha-nome {
font-size: var(--t-mini); font-weight: 700; text-align: center; line-height: 1.15;
overflow: hidden; overflow-wrap: anywhere;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
min-height: 2.3em; max-width: 100%; width: 100%;
}
.inimigo-ficha-barra {
width: 100%; height: 4px; border-radius: 3px;
background: var(--vazio-alto); overflow: hidden;
}
.inimigo-ficha-barra-fill {
height: 100%; background: var(--ferrugem); transition: width 0.25s ease;
}
.inimigo-ficha-hp {
font-family: var(--fonte-numero); font-size: var(--t-mini); color: var(--tinta-fraca);
font-variant-numeric: tabular-nums;
}
/* ---------- grade de quadradinhos (inimigos/aliados em combate) ---------- */
.grade-combatentes {
display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
gap: 8px; margin-bottom: 14px;
}
.quadrado-combatente {
position: relative; aspect-ratio: 1;
background: var(--painel); border: 1px solid var(--painel-borda); border-radius: 10px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 6px 4px; gap: 3px; overflow: hidden;
transition: transform 0.1s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.quadrado-combatente:active { transform: scale(0.94); }
.quadrado-combatente.inimigo { border-color: var(--painel-borda); }
.quadrado-combatente.jogador { border-color: color-mix(in srgb, var(--mana) 45%, var(--painel-borda)); }
.quadrado-combatente.selecionado { border-color: var(--ferrugem); box-shadow: 0 0 10px -3px var(--ferrugem); }
.quadrado-combatente.morto { opacity: 0.32; filter: grayscale(1); }
.quadrado-combatente-retrato {
width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
background-color: var(--vazio-alto); background-size: cover; background-position: center;
display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.quadrado-combatente-alvo { position: absolute; top: 3px; right: 4px; font-size: var(--t-mini); }
.quadrado-combatente-nome {
font-size: var(--t-mini); font-weight: 700; text-align: center; line-height: 1.15;
overflow: hidden; overflow-wrap: anywhere;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
min-height: 2.3em; max-width: 100%;
}
.quadrado-combatente-barra { width: 100%; height: 4px; border-radius: 3px; background: var(--vazio-alto); overflow: hidden; }
.quadrado-combatente-barra-fill { height: 100%; }
/* ---------- imagens reais do jogo (09/07/2026) ----------
🖼️ (atualização): banners e imagem de combate agora usam a técnica de
"imagem de fundo + gradiente escuro na base + texto sobreposto" — em vez
de imagem solta com borda, o nome/contexto flutua legível por cima dela. */
.banner-wrap {
position: relative; width: 100%; max-height: 130px; border-radius: 14px;
overflow: hidden; margin-bottom: 16px; border: 1px solid var(--painel-borda);
}
.banner-tela { width: 100%; max-height: 130px; object-fit: cover; display: block; }
.banner-legenda {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(10,9,16,0.92) 0%, rgba(10,9,16,0.35) 45%, transparent 75%);
display: flex; align-items: flex-end; padding: 10px 14px;
}
.banner-titulo {
font-family: var(--fonte-display); font-weight: 700; font-size: var(--t-corpo); letter-spacing: 0.4px;
color: var(--tinta); text-shadow: 0 2px 6px rgba(0,0,0,0.8);
}
.cartao-thumb {
width: 44px; height: 44px; object-fit: cover; border-radius: 8px;
flex-shrink: 0; border: 1px solid var(--painel-borda); background: var(--vazio-alto);
}
/* ---------- portão de entrada do site (11/09/2026) ----------
Reaproveita .sheet-input, .botao-holofote e .botao-secundario de
propósito: é a mesma linguagem do resto do jogo, e inventar um estilo
novo só pro login faria a primeira tela parecer de outro produto.
A ousadia do jogo está na partida, não aqui. */
.portao {
width: 100%; max-width: 340px; margin: 0 auto; padding: 28px 22px;
display: flex; flex-direction: column; text-align: center;
background: var(--painel); border: 1px solid var(--painel-borda); border-radius: 16px;
}
.portao-marca { font-size: 40px; line-height: 1; margin-bottom: 6px; }
.portao-titulo {
font-family: var(--fonte-display); font-size: var(--t-titulo); font-weight: 700;
color: var(--ouro); letter-spacing: 0.02em; margin-bottom: 4px;
}
.portao-lore { font-size: var(--t-pequeno); color: var(--tinta-fraca); line-height: 1.5; margin-bottom: 14px; }
.portao-dica {
font-size: var(--t-mini); color: var(--tinta-fraca); line-height: 1.5;
text-align: left; margin-top: 8px;
}
.portao-atencao { color: var(--canto-lendario); }
.portao-aviso {
font-size: var(--t-mini); color: var(--tinta); background: var(--vazio-alto);
border: 1px solid var(--painel-borda); border-radius: 10px;
padding: 8px 10px; margin-bottom: 10px;
}
/* Erro em vermelho e ALTO o bastante pra não empurrar o botão quando
aparece — sem min-height, a tela pula na cara de quem errou a senha. */
.portao-erro { min-height: 18px; margin-top: 10px; font-size: var(--t-mini); color: #ff9aa8; }
/* ---------- caixa de avisos (11/09/2026) ---------- */
.btn-som { position: relative; }
.badge-avisos {
position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px;
padding: 0 5px; border-radius: 9px; background: #c9414f; color: #fff;
font-size: var(--t-mini); font-weight: 800; line-height: 18px; text-align: center;
}
.aviso-item {
background: var(--painel); border: 1px solid var(--painel-borda); border-radius: 12px;
padding: 12px 14px; margin-bottom: 8px; text-align: left;
}
/* A borda dourada some quando o aviso é lido. É o único sinal de "novo" —
sem ela, uma lista de 50 avisos não diz o que mudou desde a última vez. */
.aviso-item.novo { border-color: var(--ouro); }
.aviso-titulo { font-family: var(--fonte-display); font-size: var(--t-corpo); font-weight: 700; color: var(--tinta); }
.aviso-texto { font-size: var(--t-pequeno); color: var(--tinta-fraca); line-height: 1.5; margin-top: 4px; }
.aviso-quando { font-size: var(--t-mini); color: var(--tinta-fraca); opacity: 0.7; margin-top: 6px; }
/* ---------- criação de personagem (11/09/2026) ----------
A ousadia do jogo mora no combate. Aqui a escolha é que tem que
aparecer, então: sem partícula, sem gradiente, sem cartão flutuando.
Uma grade legível e o número na cara. */
.criacao-topo { text-align: center; padding: 4px 4px 18px; }
.criacao-passo {
font-family: var(--fonte-numero); font-size: var(--t-mini); letter-spacing: 0.08em;
color: var(--tinta-fraca); margin-bottom: 6px;
}
.criacao-titulo {
font-family: var(--fonte-display); font-size: var(--t-titulo); font-weight: 700;
color: var(--ouro); margin-bottom: 6px;
}
.criacao-lore {
font-family: var(--fonte-corpo); font-size: var(--t-pequeno); line-height: 1.55;
color: var(--tinta-fraca); max-width: 30em; margin: 0 auto;
}
.escolha-cartao {
background-color: var(--painel); border: 1px solid var(--painel-borda);
border-radius: 14px; padding: 12px; display: flex; flex-direction: column;
}
.escolha-nome {
font-family: var(--fonte-display); font-size: var(--t-corpo); font-weight: 700;
color: var(--tinta); line-height: 1.25;
}
.escolha-atributo { font-size: var(--t-mini); color: var(--mana); margin-top: 3px; }
.escolha-lore {
font-family: var(--fonte-corpo); font-size: var(--t-mini); line-height: 1.45;
color: var(--tinta-fraca); margin-top: 6px;
}
.escolha-efeitos { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0 4px; }
.escolha-ganho, .escolha-perda {
font-family: var(--fonte-numero); font-size: var(--t-mini); font-weight: 700;
padding: 3px 7px; border-radius: 6px;
}
.escolha-ganho { background-color: rgba(127, 214, 127, 0.14); color: var(--verde); }
/* Mesmo peso e mesmo tamanho do ganho. Numa escolha sem volta, o custo
não pode ser letra miúda. */
.escolha-perda { background-color: rgba(216, 98, 58, 0.16); color: var(--ferrugem); }
.escolha-botao { margin-top: auto; width: 100%; }
/* ---------- engaste de gemas (11/09/2026) ---------- */
.engaste-slots { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.engaste-slot {
width: 34px; height: 34px; border-radius: 8px; font-size: var(--t-corpo);
background-color: var(--vazio-alto); border: 1px dashed var(--painel-borda);
color: var(--tinta-fraca);
}
/* Ocupado é borda cheia e dourada; vazio é tracejado. A diferença tem que
ser visível sem ler a etiqueta — o dedo decide antes do olho. */
.engaste-slot.ocupado { border: 1px solid var(--ouro); border-style: solid; color: var(--ouro); }
.engaste-etiqueta { font-size: var(--t-mini); color: var(--tinta-fraca); margin-right: 6px; }
.engaste-alerta {
background-color: rgba(216, 98, 58, 0.14); border: 1px solid var(--ferrugem);
color: var(--ferrugem); border-radius: 10px; padding: 10px 12px;
font-size: var(--t-mini); line-height: 1.45; margin-bottom: 10px;
}
.engaste-opcao {
display: flex; justify-content: space-between; align-items: center; gap: 10px;
width: 100%; text-align: left; padding: 11px 12px; margin-bottom: 6px;
background-color: var(--painel); border: 1px solid var(--painel-borda);
border-radius: 10px; color: var(--tinta);
}
.engaste-opcao-nome { font-size: var(--t-pequeno); }
.engaste-opcao-bonus { font-family: var(--fonte-numero); font-size: var(--t-mini); color: var(--verde); }
/* ---------- tutorial e histórico (11/09/2026) ---------- */
.tutorial-texto { margin: 6px 0 12px; }
.tutorial-linha {
font-family: var(--fonte-corpo); font-size: var(--t-pequeno); line-height: 1.6;
color: var(--tinta); margin-bottom: 8px;
}
/* A primeira linha de cada tutorial é o título com emoji — destacada
porque é ela que diz do que a tela toda está falando. */
.tutorial-linha:first-child {
font-family: var(--fonte-display); font-size: var(--t-corpo); font-weight: 700;
color: var(--ouro); margin-bottom: 10px;
}
.historico-combate { max-height: 55vh; overflow-y: auto; }
.historico-linha {
font-family: var(--fonte-corpo); font-size: var(--t-mini); line-height: 1.5;
color: var(--tinta-fraca); padding: 8px 10px; margin-bottom: 5px;
background-color: var(--vazio-alto); border-radius: 8px;
border-left: 2px solid var(--painel-borda);
}
/* =============================================================================
PISO DE QUALIDADE (11/09/2026)
Trazido do Mestre do Futebol. Nada aqui é estético — é o mínimo pra a
interface não brigar com quem usa.
============================================================================= */
/* Número que não "pula" quando o valor muda. É o que a fonte monoespaçada
estava resolvendo, sem precisar de uma terceira família. */
[class*="stat"], [class*="valor"], [class*="preco"], [class*="numero"],
[class*="hp-"], [class*="topo-"], .cartao-item-bonus, .aviso-quando,
.linha-lista-sub, .escolha-ganho, .escolha-perda {
font-variant-numeric: tabular-nums;
}
/* Foco de teclado visível. Sem isto, quem navega por teclado (ou por teclado
externo no tablet) não enxerga onde está. */
:focus-visible {
outline: 2px solid var(--ouro);
outline-offset: 2px;
border-radius: 4px;
}
/* Quem pediu menos movimento no sistema operacional pediu pra valer:
enjoo de movimento é condição real, não preferência estética. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
}
/* Campo de formulário com menos de 16px faz o Safari do iPhone dar zoom
sozinho ao focar, e a tela inteira sai do lugar. Era 14px. */
.sheet-input, .sheet-select, input, select, textarea { font-size: 16px; }
/* Alvo de toque de 44px. Abaixo disso o dedo erra, e no celular o dedo é a
única forma de entrada. */
button, .linha-lista, .aba-item { min-height: 44px; }
/* =============================================================================
COMPONENTES ESTRUTURAIS DO MESTRE
Copiados porque são independentes de tema — a paleta continua sendo a do
Isekai (ouro/aura/mana), não a do futebol.
============================================================================= */
/* --- barra de abas inferior: 5 telas do laço principal a um toque --- */
.barra-abas {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
display: flex; max-width: 480px; margin: 0 auto;
background-color: var(--vazio);
border-top: 1px solid var(--painel-borda);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.aba-item {
position: relative;
flex: 1; border: none; background: none; cursor: pointer;
display: flex; flex-direction: column; align-items: center; gap: 2px;
padding: 8px 2px 7px;
font-family: var(--fonte-corpo); font-size: var(--t-mini); font-weight: 600;
/* Cor própria pro fundo escuro. No Mestre foi usada aqui a cor de texto
sobre papel claro e os rótulos inativos ficaram invisíveis — cor de
texto não é transferível entre fundos. */
color: rgba(237, 231, 242, 0.62);
transition: color .15s;
}
/* Ícones em SVG desde 25/09/2026: emoji cada aparelho desenha de um jeito
(e com cor própria, que não obedece ao estado ativo). O traço segue a cor
do texto, então ativo/inativo/fora-da-cidade valem pro ícone também. */
.aba-icone { width: 23px; height: 23px; display: block; transition: transform .15s, filter .15s; }
.aba-item.ativa { color: var(--cor-secao); }
.aba-item.ativa .aba-icone {
transform: translateY(-1px) scale(1.06);
filter: drop-shadow(0 0 5px color-mix(in srgb, var(--cor-secao) 70%, transparent));
}
.aba-item.ativa::before {
content: ""; position: absolute; top: -1px; left: 50%; width: 22px; height: 2px;
transform: translateX(-50%); border-radius: 0 0 2px 2px; background: var(--cor-secao);
}
.aba-item .aba-badge {
position: absolute; transform: translate(14px, -4px);
min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
background-color: var(--ferrugem); color: #fff;
font-size: var(--t-mini); font-weight: 800; line-height: 18px;
}
/* --- linha de lista: substitui o cartão em qualquer navegação --- */
.linha-lista {
display: flex; align-items: center; gap: 12px;
padding: 14px 4px;
border: 0; border-bottom: 1px solid var(--painel-borda);
background: none; width: 100%; text-align: left; cursor: pointer;
color: var(--tinta); font-family: var(--fonte-corpo);
}
.linha-lista:last-child { border-bottom: 0; }
.linha-lista:active { background-color: rgba(237, 231, 242, .05); }
.linha-lista-icone { font-size: 19px; width: 24px; text-align: center; flex: 0 0 auto; }
.linha-lista-texto { flex: 1; min-width: 0; }
.linha-lista-titulo { font-size: var(--t-corpo); font-weight: 600; }
.linha-lista-sub { font-size: var(--t-mini); color: var(--tinta-fraca); margin-top: 2px; }
.linha-lista-seta { color: var(--tinta-fraca); opacity: .55; flex: 0 0 auto; }
/* =============================================================================
RETRATOS E QUADROS COM ARTE REAL (11/09/2026)
A tela de batalha já mostrava retrato redondo com a arte do jogo; o resto
usava emoji. Agora é a mesma linguagem em todo lugar.
============================================================================= */
/* Retrato redondo genérico. Mesma forma do .quadrado-combatente-retrato da
batalha — é dele que o estilo veio. */
.retrato-img {
width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
background-color: var(--vazio-alto);
display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.retrato-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Dentro do retrato grande da Ficha, a arte preenche o círculo inteiro e a
aura pulsa por fora. O emoji era o conteúdo; agora é só a reserva. */
.retrato-simbolo .retrato-img { width: 100%; height: 100%; font-size: 34px; }
.retrato-mini .retrato-img { width: 100%; height: 100%; font-size: 13px; }
/* =============================================================================
CARROSSEL DE ESCOLHA (11/09/2026) — classe e raça
Um card por vez, do tamanho da tela. Rola com scroll-snap NATIVO: acompanha
o dedo, tem a inércia do sistema e obedece "menos movimento" sem código
extra. Carrossel movido por timer em JS não faz nada disso — e ainda anda
sozinho na cara de quem está lendo.
============================================================================= */
.carrossel-bloco { margin: 0 -16px; } /* sangra até a borda: o card ocupa a tela toda */
.carrossel {
display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch; scrollbar-width: none;
gap: 0; padding: 2px 0 10px;
}
.carrossel::-webkit-scrollbar { display: none; }
.carrossel-slide {
flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always;
padding: 0 16px; display: flex;
}
/* scroll-snap-stop: always impede que um deslize forte pule três opções de
uma vez. Numa escolha definitiva, passar batido pela opção certa é pior
que rolar devagar. */
.escolha-cartao {
flex: 1; display: flex; flex-direction: column; align-items: center;
background-color: var(--painel); border: 1px solid var(--painel-borda);
border-radius: 16px; padding: 18px 16px 16px; text-align: center;
}
/* O selo grande é o que o card ganhou ao virar carrossel: tem espaço pra a
marca da classe aparecer de verdade, com a aura da cor dela. */
.escolha-selo {
width: 74px; height: 74px; border-radius: 50%; margin-bottom: 12px;
display: flex; align-items: center; justify-content: center; font-size: 34px;
background-color: var(--vazio-alto);
border: 2px solid var(--cor-aura, var(--ouro));
box-shadow: 0 0 18px -6px var(--cor-aura, var(--ouro));
}
.escolha-nome { font-family: var(--fonte-display); font-size: var(--t-titulo); font-weight: 700; color: var(--tinta); }
.escolha-atributo { font-size: var(--t-mini); color: var(--mana); margin-top: 4px; }
.escolha-lore {
font-family: var(--fonte-corpo); font-size: var(--t-pequeno); line-height: 1.55;
color: var(--tinta-fraca); margin-top: 10px;
/* Altura fixa pras três linhas: sem isso, cada card tem uma altura e o
bloco de efeitos dança de lugar a cada deslize — justamente o que
precisa ficar parado pra dar pra comparar. */
min-height: 3.2em;
}
.escolha-efeitos {
display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
margin: 14px 0 16px; min-height: 52px; align-content: flex-start;
}
.escolha-ganho, .escolha-perda, .escolha-neutro {
font-size: var(--t-mini); font-weight: 700; padding: 5px 10px; border-radius: 7px;
}
.escolha-ganho { background-color: rgba(127, 214, 127, 0.14); color: var(--verde); }
.escolha-perda { background-color: rgba(216, 98, 58, 0.16); color: var(--ferrugem); }
.escolha-neutro { background-color: var(--vazio-alto); color: var(--tinta-fraca); font-weight: 400; }
.escolha-botao { margin-top: auto; width: 100%; }
/* --- controles --- */
.carrossel-pontos { display: flex; justify-content: center; gap: 6px; margin-bottom: 10px; }
.carrossel-ponto {
width: 7px; height: 7px; min-height: 7px; padding: 0; border: 0; border-radius: 50%;
background-color: var(--painel-borda); transition: background-color .15s, transform .15s;
}
.carrossel-ponto.ativo { background-color: var(--ouro); transform: scale(1.35); }
.carrossel-barra { display: flex; align-items: center; justify-content: center; gap: 14px; }
.carrossel-seta {
width: 44px; height: 44px; border-radius: 50%; font-size: 22px; line-height: 1;
background-color: var(--painel); border: 1px solid var(--painel-borda); color: var(--tinta);
}
/* Seta desabilitada some em vez de ficar clicável e não fazer nada — na
primeira e na última opção ela não tem pra onde ir. */
.carrossel-seta:disabled { opacity: .25; }
.carrossel-contador { font-size: var(--t-mini); color: var(--tinta-fraca); min-width: 5em; text-align: center; }
/* --- portão da cidade (11/09/2026) --- */
/* O grupo Cidade fica visivelmente diferente quando você está fora dela.
A barra inteira ganha um fio de ferrugem: é a pista periférica de que
alguma coisa está trancada, antes mesmo de tocar. */
.barra-abas.fora-da-cidade .aba-item[data-grupo="cidade"] { color: var(--ferrugem); }
.barra-abas.fora-da-cidade { border-top-color: var(--ferrugem); }
/* Quadro de destino trancado: apagado, mas ainda tocável — tocar mostra o
preço da volta. Desabilitar por completo esconderia a informação que o
jogador precisa justamente nesse momento. */
.quadro-destino.trancado { opacity: .45; }
.quadro-destino.trancado::after {
content: "🔒"; position: absolute; top: 5px; right: 6px; font-size: var(--t-mini); opacity: .9;
}
/* =============================================================================
MENU EM LISTA (11/09/2026)
Trocou a grade de arte por linhas. Num menu quem decide é LER o nome —
doze miniaturas iguais só empurram o texto pra baixo e fazem rolar. A arte
fica onde significa algo: batalha, banner da tela e praça.
============================================================================= */
.menu-lista { margin-top: 4px; }
.menu-lista .linha-lista { padding: 13px 2px; }
.menu-lista .linha-lista:last-child { border-bottom: 0; }
/* Trancado fica apagado mas continua tocável: tocar é o que revela o preço
da volta, e esconder isso agora seria esconder justamente o que falta. */
.menu-lista .linha-lista.trancado .linha-lista-titulo,
.menu-lista .linha-lista.trancado .linha-lista-sub { opacity: .45; }
/* =============================================================================
TRILHAS (11/09/2026)
============================================================================= */
.trilha-saldo {
text-align: center; padding: 14px; margin-bottom: 14px;
background-color: var(--painel); border: 1px solid var(--painel-borda); border-radius: 14px;
}
.trilha-saldo-valor {
font-family: var(--fonte-display); font-size: 34px; font-weight: 700;
color: var(--ouro); line-height: 1; font-variant-numeric: tabular-nums;
}
.trilha-saldo-rotulo { font-size: var(--t-mini); color: var(--tinta-fraca); margin-top: 4px; }
.trilha-cartao {
background-color: var(--painel); border: 1px solid var(--painel-borda);
border-radius: 14px; padding: 14px; margin-bottom: 10px;
}
.trilha-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.trilha-nome { font-family: var(--fonte-display); font-size: var(--t-corpo); font-weight: 700; color: var(--tinta); }
.trilha-ciclo { font-size: var(--t-mini); color: var(--tinta-fraca); font-variant-numeric: tabular-nums; }
/* Dez marcas, não barra contínua: aqui o que importa é CONTAR passos, e
passo é coisa discreta. Barra suave esconderia quantos faltam. */
.trilha-passos { display: flex; gap: 4px; margin: 12px 0 10px; }
.trilha-passo {
flex: 1; height: 7px; border-radius: 3px;
background-color: var(--vazio-alto); border: 1px solid var(--painel-borda);
}
.trilha-passo.feito { background-color: var(--ouro); border-color: var(--ouro); }
/* A quinta é a barreira do secundário. Marcada sempre, feita ou não, pra o
jogador ver de longe onde a escolha definitiva vai cair. */
.trilha-passo.barreira { border-color: var(--mana); border-width: 2px; }
.trilha-sec { font-size: var(--t-mini); color: var(--tinta-fraca); margin-bottom: 10px; }
.trilha-acoes, .trilha-opcoes { display: flex; gap: 8px; }
.trilha-acoes button, .trilha-opcoes button { flex: 1; }
/* --- botões de apoio no combate (11/09/2026) --- */
.combate-apoio {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px;
}
.combate-apoio button { width: 100%; min-width: 0; min-height: 44px; font-size: var(--t-pequeno); }
.combate-apoio button:only-child { grid-column: 1 / -1; }
/* =============================================================================
CLÃ (11/09/2026) — o pilar idle
============================================================================= */
/* O diário vem antes de tudo na tela. É ele que transforma "24 ticks
processados" em história; sem ele o jogador volta e vê só números
diferentes, sem saber o que aconteceu com quem. */
.clan-diario {
background-color: var(--painel); border: 1px solid var(--ouro);
border-radius: 14px; padding: 14px; margin-bottom: 16px;
}
.clan-diario-titulo {
font-family: var(--fonte-display); font-size: var(--t-corpo); font-weight: 700;
color: var(--ouro); margin-bottom: 8px;
}
.clan-diario-linha { font-size: var(--t-pequeno); line-height: 1.5; color: var(--tinta); }
.clan-diario-nota { font-size: var(--t-mini); color: var(--tinta-fraca); margin-top: 8px; }
.clan-diario-morte {
/* (28/09) a faixa colorida na esquerda era o cartão-padrão de qualquer
painel gerado; o luto agora é o contorno inteiro em ferrugem */
background-color: rgba(216, 98, 58, 0.12);
border: 1px solid color-mix(in srgb, var(--ferrugem) 45%, transparent);
border-radius: 8px; padding: 10px 12px; margin-bottom: 8px;
}
.clan-recursos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.clan-recurso {
flex: 1 1 78px; text-align: center; padding: 10px 6px;
background-color: var(--painel); border: 1px solid var(--painel-borda); border-radius: 12px;
}
.clan-recurso-icone { font-size: 17px; }
.clan-recurso-valor {
font-family: var(--fonte-numero); font-size: var(--t-sub); font-weight: 800;
color: var(--tinta); font-variant-numeric: tabular-nums;
}
.clan-recurso-nome { font-size: var(--t-mini); color: var(--tinta-fraca); margin-top: 2px; }
/* Memorial. Permadeath sem memorial é só um número que sumiu da lista. */
.clan-morto {
background-color: var(--vazio-alto); border-left: 3px solid var(--painel-borda);
border-radius: 8px; padding: 10px 12px; margin-bottom: 6px;
}
.clan-morto-nome { font-family: var(--fonte-display); font-size: var(--t-pequeno); color: var(--tinta); }
.clan-morto-causa { font-size: var(--t-mini); color: var(--tinta-fraca); line-height: 1.45; margin-top: 3px; }
/* Previsão antes de mandar. A frase é maior que o número de propósito:
"morre se esbarrar no chefe" se entende; "3,2%" não diz nada. */
.clan-previsao {
background-color: rgba(127, 214, 127, 0.12); border: 1px solid var(--verde);
border-radius: 12px; padding: 12px; margin-bottom: 10px;
}
.clan-previsao-frase {
font-family: var(--fonte-display); font-size: var(--t-corpo); font-weight: 700;
color: var(--tinta); line-height: 1.3;
}
.clan-previsao-num { font-size: var(--t-mini); color: var(--tinta-fraca); margin-top: 5px; }
.clan-encontro {
display: flex; justify-content: space-between; align-items: center;
padding: 8px 2px; border-bottom: 1px solid var(--painel-borda); font-size: var(--t-mini);
}
.clan-encontro-nome { color: var(--tinta-fraca); }
.clan-encontro-res { font-family: var(--fonte-numero); font-size: var(--t-mini); font-weight: 700; }
.clan-res-vence { color: var(--verde); }
.clan-res-recua { color: var(--ouro); }
.clan-res-morre { color: var(--ferrugem); }
/* ---------- decisões, conselho e saga (11/09/2026) ---------- */
.decisao-cena {
background-color: var(--painel); border: 1px solid var(--painel-borda);
border-radius: 14px; padding: 16px; margin-bottom: 14px;
}
.decisao-texto {
font-family: var(--fonte-corpo); font-size: var(--t-corpo); line-height: 1.65; color: var(--tinta);
}
.conselho-fala {
background-color: var(--vazio-alto); border-left: 3px solid var(--painel-borda);
border-radius: 10px; padding: 11px 13px; margin-bottom: 8px; cursor: pointer;
}
/* Quem vai executar fica marcado em ouro. Sem isso o jogador escolhe o
conselheiro e não vê que escolheu. */
.conselho-fala.escolhido { border-left-color: var(--ouro); background-color: rgba(232,182,74,0.10); }
.conselho-nome { font-family: var(--fonte-display); font-size: var(--t-pequeno); color: var(--ouro); }
.conselho-texto { font-size: var(--t-pequeno); line-height: 1.5; color: var(--tinta); margin-top: 3px; }
.conselho-pericia { font-size: var(--t-mini); color: var(--mana); margin-top: 5px; }
.conselho-pericias { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.saga-linha {
display: flex; gap: 10px; padding: 9px 2px;
border-bottom: 1px solid var(--painel-borda); font-size: var(--t-pequeno); line-height: 1.5;
}
.saga-turno { color: var(--tinta-fraca); flex: 0 0 66px; font-variant-numeric: tabular-nums; }
.saga-texto { color: var(--tinta); }
/* Consequência atrasada em destaque: é o momento em que o jogador descobre
que o jogo lembrou de uma escolha de oito turnos atrás. */
.saga-consequencia .saga-texto { color: var(--ouro); }
.saga-escolha .saga-texto { color: var(--tinta); }
.saga-evento .saga-texto { color: var(--tinta-fraca); }
/* ---------- humor do clã e fundação (11/09/2026) ---------- */
.clan-humor {
border-radius: 14px; padding: 12px 14px; margin-bottom: 14px;
background-color: var(--painel); border: 1px solid var(--painel-borda);
}
.clan-humor-nome { font-family: var(--fonte-display); font-size: var(--t-corpo); font-weight: 700; }
.clan-humor-texto { font-size: var(--t-mini); color: var(--tinta-fraca); margin-top: 3px; line-height: 1.45; }
.clan-humor-barra {
height: 5px; border-radius: 3px; margin-top: 9px; overflow: hidden;
background-color: var(--vazio-alto);
}
.clan-humor-preenche { height: 100%; border-radius: 3px; transition: width .3s ease; }
/* A cor da faixa carrega o aviso antes da leitura. Vermelho no topo da tela
diz "olhe isto" sem precisar de texto. */
.humor-motim { border-color: var(--ferrugem); }
.humor-motim .clan-humor-nome { color: var(--ferrugem); }
.humor-motim .clan-humor-preenche { background-color: var(--ferrugem); }
.humor-inquieto .clan-humor-nome { color: #d89a3a; }
.humor-inquieto .clan-humor-preenche { background-color: #d89a3a; }
.humor-resignado .clan-humor-nome { color: var(--tinta); }
.humor-resignado .clan-humor-preenche { background-color: var(--tinta-fraca); }
.humor-confiante .clan-humor-nome { color: var(--verde); }
.humor-confiante .clan-humor-preenche { background-color: var(--verde); }
.humor-festa { border-color: var(--ouro); }
.humor-festa .clan-humor-nome { color: var(--ouro); }
.humor-festa .clan-humor-preenche { background-color: var(--ouro); }
.linha-lista.escolhido-fundacao {
background-color: rgba(232, 182, 74, 0.10);
border-radius: 8px;
}
.linha-lista.escolhido-fundacao .linha-lista-titulo { color: var(--ouro); }
/* ---------- imagens: rede de segurança (11/09/2026) ----------
Auditoria antes de mexer: só 1 de 9 ![]()
tinha loading="lazy", e as artes
vinham em tamanho cheio (~1280px) pra ser desenhadas a 30–84px.
Estas três linhas valem pra QUALQUER imagem que entre no jogo depois,
inclusive as que alguém esquecer de estilizar: nunca estoura a largura,
nunca deforma, e reserva o espaço antes de carregar pra a tela não pular
quando a arte chega. */
img {
max-width: 100%;
object-fit: cover;
/* Fundo enquanto carrega: sem ele o retrato é um buraco branco que
pisca, e no tema escuro isso é bem pior que um quadrado discreto. */
background-color: var(--vazio-alto);
}
/* =============================================================================
GRADE DE CAMINHOS (11/09/2026)
Substituiu a folha que o botão da barra abria. Dois motivos: a folha
custava um toque a mais e tapava a tela que você acabou de abrir; e em
grade os destinos ficam visíveis enquanto você lê a página — a navegação
deixa de ser um lugar aonde se vai e passa a ser parte da tela.
============================================================================= */
.caminhos {
margin-top: 26px; padding-top: 14px;
border-top: 1px solid var(--painel-borda);
}
.caminhos-titulo {
font-family: var(--fonte-display); font-size: var(--t-mini); font-weight: 700;
color: var(--tinta-fraca); letter-spacing: .04em; margin-bottom: 10px;
}
/* Duas colunas: com uma, a grade vira a mesma lista que eu acabei de tirar;
com três, o subtítulo não cabe e sobra só o nome. */
.caminhos-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 420px) { .caminhos-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.caminho {
position: relative; display: flex; flex-direction: column; gap: 3px;
text-align: left; padding: 11px 12px; min-height: 58px;
background-color: var(--painel); border: 1px solid var(--painel-borda);
border-radius: 11px; color: var(--tinta);
transition: border-color .15s ease, transform .1s ease;
}
.caminho:active { transform: scale(0.97); border-color: var(--ouro); }
.caminho-nome { font-family: var(--fonte-display); font-size: var(--t-pequeno); font-weight: 700; line-height: 1.2; }
.caminho-sub {
font-size: var(--t-mini); color: var(--tinta-fraca); line-height: 1.3;
overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
/* A atual fica marcada e desabilitada. Botão que leva pra onde você já
está é ruído — e pior, faz duvidar se o toque funcionou. */
.caminho.atual {
border-color: var(--ouro); background-color: rgba(232, 182, 74, 0.08);
opacity: 1;
}
.caminho.atual .caminho-nome { color: var(--ouro); }
/* 25/09/2026: era absoluta no canto de cima e, com o mínimo de 12px,
passava por cima de nome longo ("Mercado de personagens"). Agora entra
no fluxo, embaixo do subtítulo — nunca disputa espaço com o nome. */
.caminho.atual::after {
content: "você está aqui"; align-self: flex-start; margin-top: 2px;
font-size: var(--t-mini); color: var(--ouro); opacity: .85;
}
.caminho.trancado { opacity: .5; }
.caminho-cadeado { position: absolute; right: 10px; top: 10px; font-size: var(--t-mini); }
/* =============================================================================
🎠 CARROSSEL DE CRIATURAS (18/09/2026) — espíritos e montarias
=============================================================================
Antes eram pilhas verticais de cartões finos com miniatura de lado. Com 50
espíritos possíveis isso vira rolagem infinita, e o cartão não dizia o que a
criatura FAZ — escolher entre duas era escolher pelo nome. */
.peca-carrossel {
display: flex; gap: 12px; overflow-x: auto; margin-bottom: 16px;
padding: 4px 2px 10px;
scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.peca-carrossel::-webkit-scrollbar { display: none; }
.peca-card {
flex: 0 0 auto; width: 78%; max-width: 300px; scroll-snap-align: center;
background: linear-gradient(180deg, var(--painel), var(--vazio-alto));
border: 1px solid var(--painel-borda); border-radius: 16px;
overflow: hidden; display: flex; flex-direction: column;
}
/* A borda colorida é a raridade. Fica no card inteiro e não num selinho:
a 78% de largura, a cor é a primeira coisa que o olho pega ao deslizar. */
.peca-card.rar-incomum { border-color: var(--rar-incomum); }
.peca-card.rar-raro { border-color: var(--rar-raro); }
.peca-card.rar-epico { border-color: var(--rar-epico); }
.peca-card.rar-lendario { border-color: var(--rar-lendario); }
.peca-card.destacado { box-shadow: 0 0 16px -6px var(--ouro); }
.peca-arte {
position: relative; width: 100%; aspect-ratio: 1;
background-color: var(--vazio); background-size: cover; background-position: center;
display: flex; align-items: center; justify-content: center; font-size: 68px;
}
.peca-selo {
position: absolute; top: 8px; right: 8px;
background: var(--ouro); color: var(--vazio);
font-size: var(--t-mini); font-weight: 800; letter-spacing: 0.04em;
padding: 3px 8px; border-radius: 20px; text-transform: uppercase;
}
.peca-corpo { padding: 11px 12px 13px; display: flex; flex-direction: column; gap: 8px; }
.peca-nome {
font-family: var(--fonte-display); font-weight: 700; font-size: var(--t-corpo);
line-height: 1.2; color: var(--tinta);
}
.peca-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: var(--t-mini); }
.peca-raridade { font-weight: 800; letter-spacing: 0.06em; }
.rar-texto-comum { color: var(--rar-comum); }
.rar-texto-incomum { color: var(--rar-incomum); }
.rar-texto-raro { color: var(--rar-raro); }
.rar-texto-epico { color: var(--rar-epico); }
.rar-texto-lendario { color: var(--rar-lendario); }
.peca-arquetipo, .peca-qtd { color: var(--tinta-fraca); }
.peca-evo { display: flex; align-items: center; gap: 8px; font-size: var(--t-mini); }
.peca-nivel { color: var(--tinta-fraca); font-variant-numeric: tabular-nums; }
/* O que a criatura faz, em pílulas. É a informação que decide a escolha, e
era exatamente a que não aparecia em lugar nenhum. */
.peca-efeitos { display: flex; flex-wrap: wrap; gap: 6px; }
.peca-pill {
display: flex; align-items: center; gap: 5px;
background: var(--vazio); border: 1px solid var(--painel-borda);
border-radius: 8px; padding: 4px 8px; font-size: var(--t-mini);
}
.peca-pill-nome { color: var(--tinta-fraca); }
.peca-pill-valor { font-weight: 700; color: var(--verde); font-variant-numeric: tabular-nums; }
.peca-pill.destaque {
border-color: color-mix(in srgb, var(--mana) 45%, var(--painel-borda));
color: var(--mana);
}
.peca-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 2px; }
.peca-acoes button { width: 100%; min-width: 0; min-height: 44px; font-size: var(--t-pequeno); }
.peca-acoes button:only-child { grid-column: 1 / -1; }
/* Aviso de trava: o motivo junto do cadeado. Botão apagado sem explicação é
pior que botão que dá erro ao tocar. */
.aviso-trava {
display: flex; align-items: center; gap: 10px;
background: var(--vazio-alto);
border: 1px solid color-mix(in srgb, var(--ouro) 40%, var(--painel-borda));
border-radius: 12px; padding: 10px 12px; margin-bottom: 10px;
}
.aviso-trava-icone { font-size: 20px; flex-shrink: 0; }
.aviso-trava-texto { font-size: var(--t-pequeno); line-height: 1.35; color: var(--tinta); }
/* Contador da forja: com o carrossel, o "2/5" no fim do título some do olho
de quem está deslizando os cartões. */
.forja-contador {
display: flex; align-items: baseline; gap: 7px;
background: var(--vazio-alto); border: 1px solid var(--painel-borda);
border-radius: 10px; padding: 8px 12px; margin-bottom: 10px;
}
.forja-contador.pronto { border-color: var(--rar-incomum); }
.forja-contador-num {
font-family: var(--fonte-numero); font-size: var(--t-titulo); font-weight: 800;
color: var(--ouro); font-variant-numeric: tabular-nums; line-height: 1;
}
.forja-contador.pronto .forja-contador-num { color: var(--rar-incomum); }
.forja-contador-de { font-size: var(--t-pequeno); color: var(--tinta-fraca); }
.forja-contador-ok { margin-left: auto; color: var(--rar-incomum); font-size: var(--t-sub); }
/* ---------- 👣 encontro na Torre ---------- */
.encontro-texto { font-size: var(--t-corpo); line-height: 1.55; color: var(--tinta); }
.encontro-opcoes { display: flex; flex-direction: column; gap: 9px; }
.encontro-opcoes button {
text-align: left; padding: 12px 14px; min-height: 44px;
display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
}
.encontro-opcao-rotulo { font-size: var(--t-corpo); font-weight: 600; }
/* O teste aparece ANTES de escolher: agência vem antes, e opção com rolagem
escondida é armadilha. */
.encontro-opcao-teste {
font-size: var(--t-mini); color: var(--tinta-fraca); font-variant-numeric: tabular-nums;
}
/* ---------- 📜 o que a sua escolha causou ----------
Painel e não toast: toast some, e a conta do dado é justamente o que a
pessoa quer reler quando falha. */
.consequencia {
background: linear-gradient(180deg, var(--painel), var(--vazio-alto));
border: 1px solid var(--painel-borda); border-radius: 14px;
padding: 14px 15px 15px;
}
.consequencia-escolha {
font-size: var(--t-pequeno); color: var(--tinta-fraca); margin-bottom: 10px;
line-height: 1.4;
}
.consequencia-teste {
border-radius: 10px; padding: 10px 12px; margin-bottom: 11px;
border: 1px solid var(--painel-borda); background: var(--vazio);
}
.consequencia-teste.ok { border-color: var(--rar-incomum); }
.consequencia-teste.ruim { border-color: var(--ferrugem); }
.consequencia-teste-conta {
font-family: var(--fonte-numero); font-size: var(--t-pequeno);
font-variant-numeric: tabular-nums; color: var(--tinta);
}
.consequencia-teste-veredito {
font-family: var(--fonte-display); font-weight: 700; font-size: var(--t-corpo);
margin-top: 3px;
}
.consequencia-teste.ok .consequencia-teste-veredito { color: var(--rar-incomum); }
.consequencia-teste.ruim .consequencia-teste-veredito { color: var(--ferrugem); }
.consequencia-efeitos { display: flex; flex-wrap: wrap; gap: 6px; }
.consequencia-pill {
display: flex; align-items: center; gap: 6px;
border: 1px solid var(--painel-borda); border-radius: 8px;
padding: 5px 9px; font-size: var(--t-mini); background: var(--vazio);
}
.consequencia-pill-nome { color: var(--tinta-fraca); }
.consequencia-pill-valor { font-weight: 700; font-variant-numeric: tabular-nums; }
.consequencia-pill.ganho { border-color: color-mix(in srgb, var(--rar-incomum) 45%, var(--painel-borda)); }
.consequencia-pill.ganho .consequencia-pill-valor { color: var(--rar-incomum); }
.consequencia-pill.perda { border-color: color-mix(in srgb, var(--ferrugem) 45%, var(--painel-borda)); }
.consequencia-pill.perda .consequencia-pill-valor { color: var(--ferrugem); }
.consequencia-nada { font-size: var(--t-pequeno); color: var(--tinta-fraca); font-style: italic; }
.consequencia-agenda {
margin-top: 10px; font-size: var(--t-mini); color: var(--ouro);
border-top: 1px solid var(--painel-borda); padding-top: 9px;
}
/* =============================================================================
🏰 SITUAÇÃO DO CLÃ (18/09/2026)
=============================================================================
A tela mostrava recursos e uma lista de membros, e mais nada: nem quantos
aldeões existiam, nem quantos trabalhavam, nem quanto a comida ainda
durava. */
.sit-painel {
background: linear-gradient(180deg, var(--painel), var(--vazio-alto));
border: 1px solid var(--painel-borda); border-radius: 14px;
padding: 12px; margin-bottom: 10px;
}
.sit-grade {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.sit-ficha {
background: var(--vazio); border: 1px solid var(--painel-borda);
border-radius: 10px; padding: 8px 6px; text-align: center;
}
.sit-ficha.ruim { border-color: color-mix(in srgb, var(--ferrugem) 55%, var(--painel-borda)); }
.sit-ficha.morto { border-color: color-mix(in srgb, var(--rar-comum) 55%, var(--painel-borda)); }
.sit-ficha-icone { font-size: 15px; line-height: 1.1; }
.sit-ficha-valor {
font-family: var(--fonte-numero); font-size: var(--t-titulo); font-weight: 800;
color: var(--tinta); font-variant-numeric: tabular-nums; line-height: 1.15;
}
.sit-ficha.ruim .sit-ficha-valor { color: var(--ferrugem); }
.sit-ficha-rotulo { font-size: var(--t-mini); color: var(--tinta-fraca); }
/* Autonomia: quantas sessões a comida aguenta. É o número que decide entre
postar mais gente e mandar alguém colher. */
.sit-autonomia {
display: flex; align-items: baseline; gap: 8px; margin-top: 9px;
background: var(--vazio);
/* (28/09) o status (ok / atenção) vai no contorno inteiro, não numa faixa */
border: 1px solid color-mix(in srgb, var(--rar-incomum) 45%, var(--painel-borda));
border-radius: 10px; padding: 9px 11px;
}
.sit-autonomia.atencao { border-color: color-mix(in srgb, var(--ouro) 55%, var(--painel-borda)); }
.sit-autonomia.ruim { border-left-color: var(--ferrugem); }
.sit-autonomia-num {
font-family: var(--fonte-numero); font-size: var(--t-titulo); font-weight: 800;
color: var(--rar-incomum); font-variant-numeric: tabular-nums;
}
.sit-autonomia.atencao .sit-autonomia-num { color: var(--ouro); }
.sit-autonomia.ruim .sit-autonomia-num { color: var(--ferrugem); }
.sit-autonomia-txt { font-size: var(--t-mini); color: var(--tinta-fraca); line-height: 1.35; }
/* Alertas em ordem de urgência. Cada um tem ação óbvia — alerta que o
jogador não consegue agir é ruído. */
.sit-alertas { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.sit-alerta {
display: flex; gap: 8px; align-items: flex-start;
border-radius: 9px; padding: 8px 10px; font-size: var(--t-pequeno); line-height: 1.4;
background: var(--vazio-alto); border: 1px solid var(--painel-borda);
}
.sit-alerta.grave { border-color: var(--ferrugem); color: var(--tinta); }
.sit-alerta.atencao { border-color: color-mix(in srgb, var(--ouro) 55%, var(--painel-borda)); }
.sit-alerta.info { color: var(--tinta-fraca); }
.sit-alerta-marca { flex-shrink: 0; }
/* Jornadas anteriores: uma só seria "o que aconteceu"; várias são "como o
clã chegou até aqui". */
.clan-jornada {
display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
padding: 8px 4px; border-top: 1px solid var(--painel-borda); font-size: var(--t-mini);
}
.clan-jornada-quando { color: var(--tinta-fraca); min-width: 74px; }
.clan-jornada-ganhos { color: var(--tinta); font-variant-numeric: tabular-nums; }
.clan-jornada-morte { color: var(--ferrugem); }
/* ---------- 🎁 o que caiu na exploração ----------
Só o drop. A narração são 4 frases repetindo a cada exploração, e em 7
seguidas ela vira ruído em cima da única coisa que o jogador quer saber. */
.drop-caixa {
display: flex; align-items: center; gap: 12px;
background: var(--vazio-alto); border: 1px solid var(--painel-borda);
border-radius: 12px; padding: 12px; margin: 4px 0 12px;
}
.drop-caixa.rar-incomum { border-color: var(--rar-incomum); }
.drop-caixa.rar-raro { border-color: var(--rar-raro); }
.drop-caixa.rar-epico { border-color: var(--rar-epico); }
.drop-caixa.rar-lendario { border-color: var(--rar-lendario); }
.drop-arte {
width: 60px; height: 60px; border-radius: 10px; flex-shrink: 0;
background-color: var(--vazio); background-size: cover; background-position: center;
display: flex; align-items: center; justify-content: center; font-size: 30px;
}
.drop-nome { font-family: var(--fonte-display); font-weight: 700; font-size: var(--t-corpo); }
.drop-qtd {
font-family: var(--fonte-numero); font-size: var(--t-sub); font-weight: 800;
color: var(--rar-incomum); font-variant-numeric: tabular-nums;
}
/* =============================================================================
🏪 LOJA (18/09/2026) — repaginada
=============================================================================
Antes era uma pilha onde "Poção 25g" e "VIP 500⭐" eram cartões do mesmo
tamanho, com dois botões espremidos ao lado do nome — na largura do
celular o nome do item sobrava com três letras e reticências. A premium
saiu pra tela própria; aqui a linha ABRE no lugar e as ações ficam
debaixo do nome, com a largura inteira. */
.moeda-linha {
display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
gap: 8px; margin-bottom: 14px;
}
.moeda-ficha {
display: flex; flex-direction: column; align-items: center; gap: 1px;
background: var(--painel); border: 1px solid var(--painel-borda);
border-radius: 11px; padding: 9px 6px;
}
.moeda-ficha.cheio { border-color: var(--ouro); }
.moeda-ficha-icone { font-size: 15px; line-height: 1.1; }
.moeda-ficha-valor {
font-family: var(--fonte-numero); font-size: var(--t-sub); font-weight: 800;
color: var(--tinta); font-variant-numeric: tabular-nums;
}
.moeda-ficha-rotulo { font-size: var(--t-mini); color: var(--tinta-fraca); }
.venda-linha {
background: var(--painel); border: 1px solid var(--painel-borda);
border-left: 3px solid var(--painel-borda);
border-radius: 11px; margin-bottom: 7px; overflow: hidden;
}
.venda-linha.rar-incomum { border-left-color: var(--rar-incomum); }
.venda-linha.rar-raro { border-left-color: var(--rar-raro); }
.venda-linha.rar-epico { border-left-color: var(--rar-epico); }
.venda-linha.rar-lendario { border-left-color: var(--rar-lendario); }
.venda-linha.aberta { border-color: var(--painel-borda-forte); }
.venda-topo {
display: flex; align-items: center; gap: 10px; width: 100%;
background: none; border: 0; color: var(--tinta);
padding: 11px 12px; min-height: 44px; text-align: left;
font-family: inherit; cursor: pointer;
}
.venda-topo:focus-visible { outline: 2px solid var(--mana); outline-offset: -2px; }
.venda-txt { flex: 1; min-width: 0; }
.venda-nome {
font-size: var(--t-corpo); font-weight: 700; line-height: 1.25;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.venda-sub { font-size: var(--t-mini); color: var(--tinta-fraca); margin-top: 1px; }
.venda-seta { color: var(--tinta-fraca); font-size: 15px; flex-shrink: 0; }
/* 🐛 20/09/2026 — o botão de comprar poção ocupava a linha inteira e
empurrava o nome e o preço pra fora da tela: `.botao-holofote` declara
`width: 100%`, e dentro de uma linha flex isso vira "o máximo que couber".
`flex-shrink: 0` só impedia que ele encolhesse — piorava. Largura
automática devolve a linha ao texto, que é quem diz o que se está
fazendo. */
/* 🐛 20/09/2026: o botão de comprar poção saía do tamanho de um botão
de holofote (largura cheia, 16px, padding alto) e empurrava o texto
"25g · você tem X de 10" pra fora da linha — dava pra ver o botão e
não dava pra ler o que se estava comprando. `.botao-holofote` vem
depois no arquivo, então empatava na especificidade e ganhava: por
isso a regra agora é `.venda-topo .venda-botao-topo`, que ganha por
mérito e não por ordem. */
.venda-topo .venda-botao-topo {
flex: 0 0 auto; width: auto; min-width: 0; max-width: 42%;
min-height: 40px; font-size: var(--t-pequeno); padding: 10px 14px;
white-space: nowrap; letter-spacing: 0;
}
/* As ações em duas colunas e com a largura inteira: é aqui que o "vender 1
/ vender tudo" cabe sem espremer o nome do item. */
.venda-acoes {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
padding: 0 12px 12px;
}
.venda-acoes button { width: 100%; min-width: 0; min-height: 44px; font-size: var(--t-pequeno); }
.venda-acoes button:only-child { grid-column: 1 / -1; }
/* ---------- 🛠️ item recém-forjado ----------
⚠️ A arte vai no .forjado-arte, NUNCA na .forjado-caixa: a caixa leva a
classe de raridade, cujos cantos ornamentados são background-image — pôr
outra imagem de fundo ali apagaria o efeito (armadilha nº 2). */
.forjado-caixa {
background-color: var(--vazio-alto);
border: 1.5px solid var(--painel-borda); border-radius: 16px;
padding: 16px 14px; text-align: center; margin-bottom: 14px;
}
.forjado-arte {
width: 132px; height: 132px; margin: 0 auto 12px; border-radius: 14px;
background-color: var(--vazio); background-size: cover; background-position: center;
display: flex; align-items: center; justify-content: center; font-size: 58px;
}
.forjado-nome {
font-family: var(--fonte-display); font-weight: 700; font-size: var(--t-sub);
line-height: 1.25; color: var(--tinta);
}
.forjado-raridade {
font-size: var(--t-mini); font-weight: 800; letter-spacing: 0.1em; margin-top: 3px;
}
.forjado-stats {
display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 13px;
}
.forjado-stat {
display: flex; justify-content: space-between; gap: 8px;
background: var(--vazio); border: 1px solid var(--painel-borda);
border-radius: 8px; padding: 6px 9px; font-size: var(--t-mini);
}
.forjado-stat-nome { color: var(--tinta-fraca); }
.forjado-stat-valor {
font-weight: 800; color: var(--rar-incomum); font-variant-numeric: tabular-nums;
}
/* ---------- 💎 cores da forja, em lista compacta ----------
O carrossel da Forja é dos ITENS; core é ingrediente e cabe numa linha.
Dois carrosséis empilhados fariam deslizar duas vezes por uma decisão só. */
.core-lista { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.core-linha {
display: flex; align-items: center; gap: 10px; width: 100%;
background: var(--painel); border: 1px solid var(--painel-borda);
border-left: 3px solid var(--painel-borda);
border-radius: 10px; padding: 9px 11px; min-height: 44px;
color: var(--tinta); font-family: inherit; text-align: left; cursor: pointer;
}
.core-linha.marcado { border-color: var(--ouro); background: var(--vazio-alto); }
.core-linha:focus-visible { outline: 2px solid var(--mana); outline-offset: -2px; }
.core-txt { flex: 1; min-width: 0; }
.core-nome {
font-size: var(--t-pequeno); font-weight: 700; line-height: 1.25;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.core-bonus { font-size: var(--t-mini); color: var(--tinta-fraca); margin-top: 1px; }
.core-marca {
flex-shrink: 0; font-family: var(--fonte-numero); font-weight: 800;
font-size: var(--t-corpo); color: var(--ouro); min-width: 22px; text-align: right;
}
/* ---------- ✨ fusão mítica ----------
A conta aberta ANTES de confirmar: quantas peças, que chance de tipo, e a
multiplicação das duas rolagens. Esconder que são duas é o que faz o
jogador achar que foi roubado quando sai outro tipo. */
.fusao-painel {
background: var(--vazio-alto); border: 1px solid var(--painel-borda);
border-left: 3px solid var(--painel-borda);
border-radius: 12px; padding: 12px 13px; margin-bottom: 12px;
}
.fusao-painel.pronto { border-left-color: var(--rar-lendario); }
.fusao-contador {
font-family: var(--fonte-numero); font-size: var(--t-titulo); font-weight: 800;
color: var(--ouro); font-variant-numeric: tabular-nums;
}
.fusao-previsao { font-size: var(--t-pequeno); color: var(--tinta); margin-top: 3px; line-height: 1.4; }
.fusao-nota { font-size: var(--t-mini); color: var(--tinta-fraca); margin-top: 5px; line-height: 1.45; }
/* ---------- 🔍 filtros do mercado ---------- */
.mercado-filtro { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mercado-filtro-rotulo {
flex-shrink: 0; font-size: var(--t-mini); text-transform: uppercase;
letter-spacing: 0.06em; color: var(--tinta-fraca); width: 58px;
}
.mercado-filtro .filtro-carrossel { margin: 0; flex: 1; min-width: 0; }
/* ---------- 🃏 carta que vira ----------
O detalhe (descrição da skill, o que o pet dispara, o gatilho da
especialidade) é muito texto pra frente do cartão: enfiado ali, ele vira
parágrafo e o carrossel perde o que tem de bom, que é passar o olho.
A frente continua completa por si — virar acrescenta, não desbloqueia. */
.peca-palco {
display: block; width: 100%; padding: 0; border: 0; background: none;
perspective: 1000px; cursor: pointer; font-family: inherit;
/* 🐛 20/09/2026 — TINTA PRETA SOBRE FUNDO ESCURO.
`.peca-palco` é um