/* ============================================================
Algorithmia — Estilo base (tema JRPG escuro e vibrante)
Design system: docs/arte/PROMPT-EVOLUCAO-VISUAL.md
Pixel art: .no-bolha:not(.no-bolha-arte) img — ver §5 do design system
============================================================ */
/* Fontes carregadas via no de cada página (header.php, login,
registro, criar-personagem) — evita o @import render-blocking duplicado. */
:root {
--bg: #0b0c1d;
--bg-2: #14162c;
--painel: #1a1d38;
--painel-2: #23274a;
--borda: #353c6b;
--borda-luz: #4a54a0;
--texto: #eef0fb;
--texto-fraco:#9aa0c9;
--primaria: #7c5cff;
--primaria-2:#9d83ff;
--hp: #ff5d6c;
--mp: #4aa3ff;
--xp: #ffd23f;
--ouro: #ffce47;
--sucesso: #2ecc71;
--erro: #ff6b6b;
--aviso: #ffb142;
--sombra: 0 10px 34px rgba(0,0,0,.5);
--brilho: 0 0 22px rgba(124,92,255,.35);
--fonte: 'Rubik', 'Segoe UI', system-ui, -apple-system, sans-serif;
--titulo: 'Pixelify Sans', 'Rubik', sans-serif; /* display/título: pixel premium */
--hud: 'Pixelify Sans', 'Rubik', sans-serif; /* números de HUD estilo game */
--pixel: 'JetBrains Mono', 'Courier New', monospace;
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: var(--fonte);
color: var(--texto);
background:
radial-gradient(1200px 620px at 50% -12%, rgba(124,92,255,.22), transparent 62%),
radial-gradient(900px 520px at 100% 110%, rgba(74,163,255,.12), transparent 60%),
radial-gradient(700px 500px at 0% 90%, rgba(46,204,113,.08), transparent 60%),
var(--bg);
min-height: 100vh;
/* Layout em coluna para fixar o rodapé ao fundo da página. */
display: flex;
flex-direction: column;
position: relative;
overflow-x: hidden;
}
/* Campo de estrelas sutil que se move lentamente ao fundo (imersão). */
body::before {
content: "";
position: fixed; inset: 0; z-index: -1; pointer-events: none;
background-image:
radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.5), transparent),
radial-gradient(1.5px 1.5px at 70% 60%, rgba(200,180,255,.4), transparent),
radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,.35), transparent),
radial-gradient(1px 1px at 85% 20%, rgba(180,210,255,.4), transparent),
radial-gradient(1.5px 1.5px at 55% 45%, rgba(255,255,255,.3), transparent),
radial-gradient(1px 1px at 10% 70%, rgba(255,230,180,.35), transparent);
background-size: 600px 600px, 500px 500px, 400px 400px, 700px 700px, 550px 550px, 480px 480px;
animation: derivaEstrelas 120s linear infinite;
opacity: .7;
}
@keyframes derivaEstrelas { from { background-position: 0 0,0 0,0 0,0 0,0 0,0 0; } to { background-position: 600px 300px,-500px 250px,400px -200px,-700px 350px,550px -275px,-480px 240px; } }
/* Vinheta para dar foco e profundidade. */
body::after {
content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
box-shadow: inset 0 0 220px 40px rgba(0,0,0,.55);
}
h1, h2, h3, .titulo-secao, .marca-texto {
font-family: var(--titulo); letter-spacing: .5px; font-weight: 700;
text-shadow: 0 2px 0 rgba(0,0,0,.35); /* leve relevo, cara de game */
}
h1 { letter-spacing: 1px; }
/* HUD com numerais estilo game */
.marca-texto { letter-spacing: 1px; }
.recurso, .hud-nivel, .nivel-num, .barra-label, .no-rotulo { font-family: var(--hud); }
a { color: var(--primaria-2); text-decoration: none; }
a:hover { color: #c4b4ff; }
code, pre { font-family: var(--pixel); }
/* ---------- Topo / HUD ---------- */
.topo {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: .85rem 1rem;
padding: .55rem 1rem .55rem 1.1rem;
background: linear-gradient(180deg, rgba(14,16,36,.96), rgba(10,11,28,.88));
border-bottom: 1px solid color-mix(in oklab, var(--primaria) 28%, var(--borda));
box-shadow: 0 4px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(157,131,255,.1);
position: sticky; top: 0; z-index: 50;
backdrop-filter: blur(14px) saturate(1.15);
}
.topo::before {
content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; pointer-events: none;
background: linear-gradient(90deg, transparent, rgba(140,230,255,.45) 20%, rgba(255,206,71,.55) 50%, rgba(140,230,255,.45) 80%, transparent);
opacity: .85;
}
.topo-jogo { isolation: isolate; }
/* Barra emoldurada (moldura-barra-fina.webp) via border-image 9-slice: cantos
nítidos, bordas esticadas, miolo transparente. Slice/largura ajustáveis. */
.topo-moldurado { padding: .55rem 1.7rem; }
.topo-moldurado::before { display: none; } /* sem o trilho de luz duplicado */
/* Moldura UNIFORME e fina SOBRE a barra (overlay no topo, não atrás).
pointer-events:none deixa os cliques passarem para o conteúdo. */
.topo-moldurado::after {
content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
border-style: solid;
border-width: 13px;
border-image: url("../img/ui/molduras/moldura-barra-fina.webp") 50 / 13px / 0 stretch;
}
.marca {
display: inline-flex; align-items: center;
color: var(--texto); text-decoration: none; line-height: 0; flex-shrink: 0;
max-width: min(52vw, 240px);
}
.logo-marca {
object-fit: contain;
image-rendering: auto;
}
.logo-marca-header {
display: block;
height: clamp(48px, 6vw, 68px);
width: auto;
max-width: 100%;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .4)) drop-shadow(0 0 10px rgba(124, 92, 255, .25));
}
.logo-marca-auth {
display: block;
width: min(280px, 85vw);
height: auto;
max-height: 72px;
margin: 0 auto;
filter: drop-shadow(0 0 14px rgba(124, 92, 255, .35));
}
.logo-marca-rodape {
height: 22px;
width: auto;
}
.logo-marca-hero {
width: 100%;
height: auto;
display: block;
}
.marca-texto {
display: none;
background: linear-gradient(90deg, var(--primaria-2), var(--xp));
-webkit-background-clip: text; background-clip: text; color: transparent;
font-size: 1.12rem; letter-spacing: .4px;
}
.hud {
justify-self: center; max-width: 100%; padding: 0;
background: transparent; border: none; box-shadow: none;
}
.hud-placa {
display: flex; align-items: center; gap: .65rem;
padding: .42rem .7rem .42rem .42rem;
border-radius: 16px;
background: linear-gradient(155deg, rgba(20,22,48,.94), rgba(8,10,26,.9));
border: 1px solid color-mix(in oklab, var(--hud-cor, var(--primaria)) 40%, rgba(255,255,255,.1));
box-shadow:
0 0 22px color-mix(in oklab, var(--hud-cor, var(--primaria)) 22%, transparent),
inset 0 1px 0 rgba(255,255,255,.08),
inset 0 -1px 0 rgba(0,0,0,.35);
position: relative; overflow: hidden;
}
.hud-placa::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background:
linear-gradient(135deg, color-mix(in oklab, var(--hud-cor, var(--primaria)) 14%, transparent), transparent 50%),
linear-gradient(90deg, rgba(140,230,255,.06), transparent 30%, transparent 70%, rgba(255,206,71,.05));
}
.hud-placa > * { position: relative; z-index: 1; }
.hud-avatar {
width: 54px; height: 54px; border-radius: 12px; flex-shrink: 0;
background: radial-gradient(circle at 50% 20%, color-mix(in oklab, var(--hud-cor) 25%, #14162c), #0a0c1d);
border: 2px solid color-mix(in oklab, var(--hud-cor, var(--primaria)) 55%, rgba(255,255,255,.15));
box-shadow: 0 0 16px color-mix(in oklab, var(--hud-cor) 35%, transparent);
position: relative; overflow: hidden;
}
.hud-retrato {
width: 100%; height: 100%; object-fit: cover; object-position: center 18%;
image-rendering: auto;
}
.hud-nivel-badge {
position: absolute; bottom: 0; right: 0;
font-family: var(--hud); font-size: .56rem; font-weight: 700; letter-spacing: .02em;
padding: .12rem .32rem .1rem .38rem;
border-radius: 8px 0 10px 0;
background: linear-gradient(180deg, color-mix(in oklab, var(--hud-cor) 80%, #000), rgba(0,0,0,.85));
color: #fff; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,.6);
border-top: 1px solid rgba(255,255,255,.15);
}
.hud-heroi-svg { width: 42px; height: 42px; }
.hud-info { min-width: 168px; flex: 1; }
.hud-nome { display: flex; flex-direction: column; line-height: 1.15; margin-bottom: .28rem; gap: .05rem; }
.hud-nome strong { font-size: .92rem; letter-spacing: .02em; }
.hud-classe {
font-size: .68rem; color: color-mix(in oklab, var(--hud-cor, var(--primaria-2)) 65%, var(--texto-fraco));
font-weight: 600;
}
.hud-barras { display: flex; flex-direction: column; gap: 4px; }
.hud-placa .barra { height: 12px; border-radius: 6px; border-color: rgba(0,0,0,.35); }
.hud-placa .barra-fill { box-shadow: inset 0 1px 0 rgba(255,255,255,.28); }
.hud-placa .barra-label { font-size: .58rem; }
.hud-recursos {
display: flex; flex-direction: column; gap: .3rem; font-weight: 700; font-size: .86rem;
padding-left: .45rem; border-left: 1px solid rgba(255,255,255,.08);
}
.recurso { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.recurso .ico { width: 18px; height: 18px; }
.recurso.ouro { color: var(--ouro); }
/* Status do topo clicável → abre a ficha do herói. */
.hud-placa-click { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.hud-placa-click:hover {
transform: translateY(-1px);
box-shadow:
0 0 28px color-mix(in oklab, var(--hud-cor, var(--primaria)) 40%, transparent),
inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.35);
}
.hud-placa-click:focus-visible { outline: 2px solid var(--hud-cor, var(--primaria)); outline-offset: 2px; }
/* ---------- Popup da ficha do herói ---------- */
.ficha-modal-overlay {
position: fixed; inset: 0; z-index: 1300;
display: none; place-items: center; padding: 1.2rem;
background: rgba(4,6,16,.74); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.ficha-modal-overlay.aberto { display: grid; animation: loreFade .2s ease both; }
.ficha-modal-card {
position: relative; width: min(94vw, 400px); max-height: 90vh; overflow: hidden;
display: flex; flex-direction: column;
background: linear-gradient(180deg, #12152c, #0f1126);
border: 2px solid color-mix(in oklab, var(--hud-cor, var(--primaria)) 55%, var(--ouro));
border-radius: 18px;
box-shadow:
0 0 0 3px color-mix(in oklab, var(--hud-cor, var(--primaria)) 26%, transparent),
0 24px 64px rgba(0,0,0,.6),
0 0 42px color-mix(in oklab, var(--hud-cor, var(--primaria)) 30%, transparent);
animation: lorePop .24s cubic-bezier(.2,.8,.3,1.2) both;
}
/* Quando há ficha-fundo, a arte cobre o CARD inteiro (não só o topo). */
.ficha-com-fundo { background-size: cover; background-position: center; background-repeat: no-repeat; }
.ficha-banner {
position: relative; flex-shrink: 0;
display: grid; place-items: center;
padding: 1.1rem 1.1rem .4rem;
}
/* Mostra a carta no formato natural (reta e cheia), sem espremer. */
.ficha-retrato { width: 84%; max-width: 320px; }
.ficha-retrato img { width: 100%; height: auto; display: block; object-fit: contain; image-rendering: auto; filter: drop-shadow(0 10px 24px rgba(0,0,0,.6)); }
.ficha-nivel {
position: absolute; top: .6rem; right: .6rem;
font-family: var(--titulo); font-size: .8rem; font-weight: 700; letter-spacing: .03em;
color: #fff; padding: .2rem .6rem; border-radius: 999px;
background: color-mix(in oklab, var(--hud-cor, var(--primaria)) 30%, rgba(0,0,0,.55));
border: 1px solid color-mix(in oklab, var(--hud-cor, var(--primaria)) 50%, rgba(255,255,255,.12));
}
.ficha-corpo { padding: 1rem 1.3rem 1.35rem; text-align: center; overflow-y: auto; }
.ficha-corpo h3 { margin: 0 0 .25rem; font-family: var(--titulo); font-size: 1.35rem; color: #fff; text-shadow: 0 0 12px color-mix(in oklab, var(--hud-cor, var(--primaria)) 34%, transparent), 0 2px 6px rgba(0,0,0,.6); }
.ficha-classe-linha { color: color-mix(in oklab, var(--hud-cor, var(--primaria-2)) 70%, var(--texto-fraco)); font-weight: 700; font-size: .82rem; margin-bottom: .9rem; }
.ficha-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: 1.1rem; }
.ficha-stat {
display: flex; flex-direction: column; gap: .12rem; align-items: flex-start;
padding: .5rem .7rem; border-radius: 10px;
background: rgba(7,9,22,.55); border: 1px solid rgba(255,255,255,.07);
}
.ficha-stat span { font-size: .7rem; color: var(--texto-fraco); display: inline-flex; align-items: center; gap: .3rem; }
.ficha-stat span .ico { width: 14px; height: 14px; }
.ficha-stat strong { font-family: var(--hud); font-size: .95rem; color: #fff; }
.ficha-stat-larga { grid-column: 1 / -1; }
.ficha-perfil-link { width: 100%; }
.ficha-modal-fechar {
position: absolute; top: .55rem; left: .55rem; z-index: 2;
width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.22);
color: #fff; font-size: .95rem; line-height: 1; cursor: pointer; transition: .15s;
}
.ficha-modal-fechar:hover { background: rgba(0,0,0,.82); transform: scale(1.08); }
/* ---------- Popup usando a carta de status (card-status-heroi) ---------- */
.fcs-wrap { display: flex; flex-direction: column; align-items: center; gap: .7rem; max-height: 94vh; }
.ficha-card-status {
position: relative;
width: min(90vw, 360px);
aspect-ratio: 799 / 1011;
background-size: 100% 100%; background-repeat: no-repeat;
container-type: inline-size;
animation: lorePop .24s cubic-bezier(.2, .8, .3, 1.2) both;
filter: drop-shadow(0 18px 44px rgba(0,0,0,.6));
}
.ficha-card-status > * { position: absolute; }
.ficha-card-status .ficha-modal-fechar {
top: 2.5%; left: 3.5%; width: 9%; height: auto; aspect-ratio: 1; font-size: 4cqw;
}
/* Personagem no painel superior (slot y 4–46%). */
.fcs-personagem { top: 5%; height: 40%; left: 50%; transform: translateX(-50%); display: grid; place-items: center; }
.fcs-personagem img { height: 100%; width: auto; max-width: 72cqw; object-fit: contain; image-rendering: auto; }
/* Nome (slot ~52%). */
.fcs-nome {
top: 47.5%; left: 50%; transform: translateX(-50%); width: 74%; text-align: center;
font-family: var(--titulo); font-weight: 700; font-size: 6cqw; color: #fff; line-height: 1;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 6px rgba(0,0,0,.8);
}
.fcs-nivel { font-size: 3.4cqw; color: var(--ouro); }
/* Slots de stat (2×2 + reputação larga). */
.fcs-slot {
transform: translate(-50%, -50%); display: flex; align-items: center; gap: 1.5cqw;
font-family: var(--hud); font-weight: 700; font-size: 3.6cqw; color: #fff; white-space: nowrap;
text-shadow: 0 1px 3px rgba(0,0,0,.85);
}
.fcs-slot .ic { display: inline-flex; align-items: center; font-size: 3.8cqw; }
.fcs-slot .ic .ico { width: 3.8cqw; height: 3.8cqw; }
.fcs-hp { left: 28.5%; top: 62.5%; color: var(--hp); }
.fcs-mp { left: 71%; top: 62.5%; color: var(--mp); }
.fcs-xp { left: 28.5%; top: 71.5%; color: var(--xp); }
.fcs-ouro { left: 71%; top: 71.5%; color: var(--ouro); }
.fcs-rep { left: 50%; top: 83%; width: 78%; justify-content: center; font-size: 3.1cqw; }
/* ---------- Controle de som (mute/volume) no topo ---------- */
.som-controle { display: inline-flex; align-items: center; gap: .4rem; }
.btn-som {
display: inline-grid; place-items: center; width: 38px; height: 38px;
border-radius: 10px; border: 1px solid var(--borda); background: var(--painel);
color: var(--texto); cursor: pointer; font-size: 1.1rem; line-height: 1; transition: .15s;
}
.btn-som:hover { border-color: var(--borda-luz); background: var(--painel-2); }
.btn-som.mudo { color: var(--texto-fraco); opacity: .8; }
.som-volume {
width: 78px; accent-color: var(--primaria); cursor: pointer;
}
@media (max-width: 760px) { .som-volume { display: none; } }
.navegacao { display: flex; gap: .25rem; flex-wrap: wrap; justify-self: end; align-items: center; }
.topo-nav { margin-left: 0; }
.navegacao a {
position: relative;
padding: .4rem .72rem; border-radius: 9px; color: var(--texto-fraco);
font-family: var(--titulo); font-weight: 600; font-size: .98rem; letter-spacing: .02em;
border: 1px solid transparent;
transition: color .15s, background .15s, transform .15s, box-shadow .15s, border-color .15s;
}
.navegacao a:hover {
background: color-mix(in oklab, var(--primaria) 18%, var(--painel-2));
border-color: color-mix(in oklab, var(--primaria) 40%, transparent);
color: #fff;
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(124,92,255,.24);
}
/* Tracinho de luz embaixo no hover (cara de menu de game). */
.navegacao a::after {
content: ""; position: absolute; left: 24%; right: 24%; bottom: 1px; height: 2px;
border-radius: 2px; opacity: 0; transition: opacity .15s;
background: linear-gradient(90deg, transparent, var(--primaria-2), var(--ouro), transparent);
}
.navegacao a:hover::after { opacity: 1; }
.link-mestre { color: var(--xp) !important; }
.link-sair { color: var(--hp) !important; }
.link-sair:hover { background: color-mix(in oklab, var(--hp) 18%, var(--painel-2)); border-color: color-mix(in oklab, var(--hp) 40%, transparent); box-shadow: 0 4px 16px rgba(255,107,107,.22); }
/* ---------- Barras (HP/MP/XP) ---------- */
.barra {
position: relative; height: 14px; width: 100%;
background: #0c0d1c; border-radius: 8px; overflow: hidden;
border: 1px solid rgba(255,255,255,.06);
}
.barra-fill { height: 100%; border-radius: 8px 0 0 8px; transition: width .5s ease; }
.barra-hp .barra-fill { background: linear-gradient(90deg, #ff8a8a, var(--hp)); }
.barra-mp .barra-fill { background: linear-gradient(90deg, #7cc0ff, var(--mp)); }
.barra-xp .barra-fill { background: linear-gradient(90deg, #ffe27a, var(--xp)); }
.barra-label {
position: absolute; inset: 0; display: grid; place-items: center;
font-size: .62rem; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.8);
}
/* ---------- Conteúdo e cartões ---------- */
.conteudo { max-width: 1100px; width: 100%; margin: 0 auto; padding: 1.6rem 1.2rem 3rem; flex: 1 0 auto; }
.pagina-home {
/* Cor sólida sempre (nunca branco). A cena vem de um ![]()
.home-entrada-bg,
não de background-image: ![]()
renderiza em mobile e independe do MIME do
WebP no servidor (background:url(.webp) falha como CSS em alguns hosts). */
background: var(--bg);
}
.pagina-home::before { display: none; }
.pagina-home > * {
position: relative;
z-index: 1;
}
.pagina-home .splash-inicio { z-index: 9999; }
.pagina-home .conteudo {
position: relative;
z-index: 1;
margin-top: 0;
padding-top: 3rem;
background: transparent;
border-radius: 0;
box-shadow: none;
}
.pagina-home .rodape {
position: relative;
z-index: 1;
background: rgba(5,7,18,.72);
}
/* ---------- Rodapé fixado ao fundo ---------- */
.rodape {
flex-shrink: 0; margin-top: auto;
border-top: 1px solid var(--borda);
background: linear-gradient(180deg, transparent, rgba(11,12,29,.85));
padding: 1rem 1.2rem;
}
.rodape-conteudo {
max-width: 1100px; margin: 0 auto;
display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap;
color: var(--texto-fraco); font-size: .85rem;
}
.rodape-marca { display: inline-flex; align-items: center; }
.rodape-sep { opacity: .4; }
.rodape-fraco { opacity: .7; }
/* ---------- Modal temático (substitui confirm/alert nativos) ---------- */
.modal-overlay {
position: fixed; inset: 0; z-index: 1000;
display: flex; align-items: center; justify-content: center; padding: 1.2rem;
background: rgba(5,6,16,.72); backdrop-filter: blur(6px);
opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s;
}
.modal-overlay.aberto { opacity: 1; visibility: visible; }
.modal-painel {
position: relative; width: 100%; max-width: 440px; text-align: center;
background: linear-gradient(180deg, #20244a, #15172e);
border: 1px solid var(--borda-luz); border-radius: 18px;
padding: 2rem 1.6rem 1.4rem; box-shadow: var(--sombra), var(--brilho);
transform: translateY(16px) scale(.96); transition: transform .26s cubic-bezier(.2,.9,.3,1.2);
}
.modal-overlay.aberto .modal-painel { transform: translateY(0) scale(1); }
.modal-borda-topo { position: absolute; top: 0; left: 18%; right: 18%; height: 3px; border-radius: 3px;
background: linear-gradient(90deg, transparent, var(--primaria-2), transparent); }
.modal-icone { font-size: 2.4rem; line-height: 1; margin-bottom: .5rem; filter: drop-shadow(0 3px 8px rgba(0,0,0,.5)); }
.modal-titulo { font-family: var(--titulo); margin: 0 0 .5rem; font-size: 1.35rem; color: var(--texto); }
.modal-mensagem { color: #cdd2ef; line-height: 1.55; margin: 0 0 1.4rem; font-size: 1rem; }
.modal-botoes { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }
.modal-botoes .botao { min-width: 130px; }
.modal-painel.perigo { border-color: rgba(255,93,108,.6); box-shadow: var(--sombra), 0 0 22px rgba(255,93,108,.3); }
.modal-painel.perigo .modal-borda-topo { background: linear-gradient(90deg, transparent, var(--hp), transparent); }
.modal-painel.arcano { border-color: rgba(124,92,255,.7); box-shadow: var(--sombra), 0 0 26px rgba(124,92,255,.45); }
.modal-painel.arcano .modal-borda-topo { background: linear-gradient(90deg, transparent, #c4b0ff, transparent); }
/* ---------- Toast ---------- */
.toast {
position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px);
z-index: 1100; padding: .7rem 1.2rem; border-radius: 12px; font-weight: 600;
background: var(--painel); border: 1px solid var(--borda-luz); box-shadow: var(--sombra);
opacity: 0; transition: opacity .35s, transform .35s;
}
.toast.mostrar { opacity: 1; transform: translate(-50%, 0); }
.toast-erro { border-color: rgba(255,107,107,.6); color: #ffc2c2; }
.toast-sucesso { border-color: rgba(46,204,113,.6); color: #9af5c0; }
.painel {
position: relative;
background:
linear-gradient(180deg, rgba(124,92,255,.06), transparent 40%),
var(--painel);
border: 1px solid var(--borda); border-radius: 16px; padding: 1.4rem;
box-shadow: var(--sombra);
transition: border-color .2s, box-shadow .2s;
}
.painel:hover { border-color: var(--borda-luz); }
.titulo-secao { font-size: 1.55rem; margin: 0 0 1rem; }
.titulo-secao::after {
content: ""; display: block; width: 56px; height: 3px; margin-top: .5rem;
border-radius: 3px; background: linear-gradient(90deg, var(--primaria-2), transparent);
}
.subtitulo { color: var(--texto-fraco); margin-top: -.4rem; }
/* ---------- Botões ---------- */
.botao, button.botao {
display: inline-flex; align-items: center; gap: .5rem; justify-content: center;
padding: .7rem 1.2rem; border-radius: 11px; border: none; cursor: pointer;
font-weight: 700; font-size: .98rem; font-family: var(--fonte);
background: linear-gradient(180deg, var(--primaria-2), var(--primaria));
color: #fff; box-shadow: 0 6px 18px rgba(124,92,255,.4); transition: .15s;
}
.botao:hover { transform: translateY(-2px); filter: brightness(1.08); color: #fff; }
.botao:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.botao-fantasma { background: transparent; border: 1px solid var(--borda); box-shadow: none; color: var(--texto); }
.botao-perigo { background: linear-gradient(180deg, #ff8585, var(--hp)); box-shadow: 0 6px 18px rgba(255,93,108,.35); }
.botao-ouro { background: linear-gradient(180deg, #ffe27a, var(--ouro)); color: #4a3b00; box-shadow: 0 6px 18px rgba(255,206,71,.35); }
.botao-sm { padding: .4rem .75rem; font-size: .82rem; border-radius: 8px; }
/* ---------- Formulários ---------- */
.campo { margin-bottom: 1rem; }
.campo label { display: block; margin-bottom: .35rem; font-weight: 600; font-size: .9rem; color: var(--texto-fraco); }
.campo input, .campo select, .campo textarea {
width: 100%; padding: .7rem .85rem; border-radius: 10px;
background: var(--bg-2); border: 1px solid var(--borda); color: var(--texto);
font-family: var(--fonte); font-size: .98rem;
}
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--primaria); box-shadow: 0 0 0 3px rgba(124,92,255,.2); }
textarea { min-height: 90px; resize: vertical; }
/* ---------- Mensagens / flash ---------- */
.flash {
max-width: 1100px; margin: 1rem auto 0; padding: .8rem 1.1rem;
border-radius: 11px; font-weight: 600; border: 1px solid;
}
.flash-sucesso { background: rgba(46,204,113,.12); border-color: rgba(46,204,113,.5); color: #9af5c0; }
.flash-erro { background: rgba(255,107,107,.12); border-color: rgba(255,107,107,.5); color: #ffc2c2; }
.flash-info { background: rgba(74,163,255,.12); border-color: rgba(74,163,255,.5); color: #bfe0ff; }
.lista-erros { background: rgba(255,107,107,.1); border: 1px solid rgba(255,107,107,.4); padding: .7rem 1rem .7rem 1.6rem; border-radius: 10px; color: #ffc2c2; margin-bottom: 1rem; }
/* ---------- Telas de autenticação ---------- */
.tela-auth { display: grid; place-items: center; min-height: 100vh; padding: 2rem 1rem; }
.cartao-auth { width: 100%; max-width: 440px; }
.cartao-auth .painel { padding: 2rem; }
.auth-logo { text-align: center; margin-bottom: 1.2rem; }
.auth-logo h1 { margin: .4rem 0 0; font-size: 1.7rem; }
.auth-logo p { margin: .2rem 0 0; color: var(--texto-fraco); font-size: .9rem; }
.auth-logo .logo-marca-auth + h1 { margin-top: .75rem; }
.auth-logo .logo-marca-auth + p { margin-top: .5rem; }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.auth-troca { text-align: center; margin-top: 1rem; color: var(--texto-fraco); font-size: .9rem; }
/* ---------- Landing / Home ---------- */
.hero { text-align: center; padding: 4rem 1rem 2rem; max-width: 880px; margin: 0 auto; }
.hero h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); margin: .3rem 0; line-height: 1.05; }
.hero h1 .grad { background: linear-gradient(90deg, var(--primaria-2), var(--xp)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lema { font-size: 1.15rem; color: var(--texto-fraco); max-width: 620px; margin: 1rem auto 1.8rem; }
.hero-acoes { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.hero-logo svg { width: 96px; height: 96px; }
.mestres-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.mestre-card {
background: var(--painel); border: 1px solid var(--borda); border-radius: 14px;
padding: 1.1rem; text-align: center; transition: .2s;
}
.mestre-card:hover { transform: translateY(-4px); border-color: var(--primaria); }
.mestre-card .retrato { width: 100%; aspect-ratio: 2 / 3; height: auto; margin: 0 auto .7rem; border-radius: 12px; overflow: hidden; background: var(--bg-2); display: block; }
.mestre-card .retrato svg { width: 84px; height: 84px; }
.mestre-card h3 { margin: .3rem 0 .1rem; font-size: 1rem; }
.mestre-card .titulo-m { color: var(--primaria-2); font-size: .82rem; font-weight: 700; }
.mestre-card .disc { color: var(--texto-fraco); font-size: .78rem; margin-top: .25rem; }
.home-entrada {
position: relative;
min-height: 100dvh;
display: grid;
place-items: center;
overflow: hidden;
isolation: isolate;
}
.home-entrada-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
z-index: 0;
}
.home-entrada-overlay {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 50% 42%, rgba(12, 14, 30, .06), rgba(4, 6, 16, .48) 64%, rgba(4, 6, 16, .82)),
linear-gradient(180deg, rgba(4, 6, 16, .08) 0%, rgba(4, 6, 16, .38) 70%, rgba(4,6,16,.68) 100%);
z-index: 1;
}
.home-entrada-conteudo {
position: relative;
z-index: 2;
text-align: center;
padding: 0 1.2rem;
}
.home-entrada-conteudo .logo-marca-hero {
width: min(90vw, 760px);
height: auto;
filter: drop-shadow(0 0 28px rgba(124,92,255,.62)) drop-shadow(0 8px 32px rgba(0,0,0,.55));
}
.home-entrada-sub {
max-width: 46ch;
margin: .7rem auto 1.1rem;
color: var(--texto);
line-height: 1.45;
text-shadow: 0 2px 10px rgba(0,0,0,.75);
}
.home-entrada-botao {
display: inline-block;
transition: transform .18s ease, filter .18s ease;
}
.home-entrada-botao img {
width: min(70vw, 520px);
height: auto;
display: block;
image-rendering: auto;
filter: drop-shadow(0 0 24px rgba(124,221,255,.38)) drop-shadow(0 8px 22px rgba(0,0,0,.45));
}
.home-entrada-botao:hover {
transform: translateY(-3px) scale(1.03);
filter: brightness(1.08);
}
.home-login-link {
display: block;
margin-top: .65rem;
color: var(--texto-fraco);
font-weight: 700;
text-shadow: 0 2px 8px rgba(0,0,0,.7);
}
.home-login-link:hover { color: var(--xp); }
.home-entrada .seta-rolar {
position: absolute;
left: 50%;
bottom: calc(env(safe-area-inset-bottom,0px) + 1rem);
transform: translateX(-50%);
color: var(--texto-fraco);
font-size: 1.4rem;
animation: cenaSeta 1.8s ease-in-out infinite;
}
.secao-historia { max-width: 760px; margin: 2.5rem auto; line-height: 1.7; color: #cfd3f0; }
.secao-historia h2 { color: var(--xp); }
/* ---------- Seleção de classe ---------- */
.conteudo-criar-heroi { max-width: 1680px; }
.painel-selecao-classes {
border: 0;
border-radius: 38px;
padding: 9.2rem 9.2rem 6.4rem;
overflow: hidden;
background:
linear-gradient(180deg, rgba(7, 9, 24, .20), rgba(7, 9, 24, .34)),
url("../img/ui/molduras/moldura-selecao-classes.png") center / 100% 100% no-repeat,
#090d20;
box-shadow:
0 0 0 1px rgba(255,255,255,.08),
0 0 34px rgba(124,92,255,.28),
0 18px 46px rgba(0,0,0,.55);
}
.painel-selecao-classes:hover { border-color: transparent; }
.painel-selecao-classes > * {
position: relative;
z-index: 1;
}
.painel-selecao-classes .campo input {
background: rgba(9, 12, 32, .96);
border: 1px solid rgba(124, 221, 255, .42);
color: #fff;
box-shadow:
0 0 18px rgba(124,221,255,.14),
inset 0 1px 0 rgba(255,255,255,.08);
}
.painel-selecao-classes .campo-nome-heroi {
max-width: 560px;
margin: 0 auto 1.9rem;
text-align: center;
}
.painel-selecao-classes .campo-nome-heroi input {
padding: .62rem .85rem;
font-size: .94rem;
border-radius: 10px;
text-align: center;
}
.painel-selecao-classes .campo-nome-heroi label {
font-family: var(--titulo);
font-size: 1.3rem;
font-weight: 700;
letter-spacing: .03em;
color: #eaf2ff;
margin-bottom: .55rem;
text-shadow: 0 0 12px rgba(124,221,255,.42), 0 2px 6px rgba(0,0,0,.6);
}
/* "Escolha sua classe": título de seção com a fonte do game, centralizado. */
.titulo-escolha-classe {
display: block;
width: 100%;
text-align: center;
font-family: var(--titulo);
font-size: 1.7rem;
font-weight: 700;
letter-spacing: .03em;
color: #fff;
margin: 1.7rem 0 .2rem;
text-shadow: 0 0 16px rgba(124,92,255,.5), 0 2px 8px rgba(0,0,0,.65);
}
.painel-selecao-classes .botao {
border: 1px solid rgba(255,255,255,.14);
box-shadow:
0 0 20px rgba(124,92,255,.38),
inset 0 1px 0 rgba(255,255,255,.18);
}
.botao-sofrimento {
width: 100%;
margin-top: 1.8rem;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
display: grid;
place-items: center;
line-height: 0;
filter: drop-shadow(0 0 26px rgba(124,92,255,.58)) drop-shadow(0 10px 24px rgba(0,0,0,.52));
transition: transform .16s ease, filter .16s ease;
animation: botaoSofrimentoPulso 1.7s ease-in-out infinite alternate;
}
.botao-sofrimento img {
width: min(100%, 560px);
height: auto;
image-rendering: auto;
display: block;
}
.botao-sofrimento:hover {
transform: translateY(-2px) scale(1.015);
filter: drop-shadow(0 0 24px rgba(157,131,255,.55)) drop-shadow(0 10px 24px rgba(0,0,0,.5)) brightness(1.06);
}
.botao-sofrimento:active { transform: translateY(0) scale(.99); }
@keyframes botaoSofrimentoPulso {
from { filter: drop-shadow(0 0 18px rgba(124,92,255,.45)) drop-shadow(0 8px 18px rgba(0,0,0,.45)); }
to { filter: drop-shadow(0 0 32px rgba(157,131,255,.75)) drop-shadow(0 12px 28px rgba(0,0,0,.55)); }
}
.classes-grid {
display: grid;
/* Auto-responsivo: 1 coluna no celular, 2 no tablet, 3 no desktop.
min(100%, 270px) evita estouro horizontal em telas estreitas. */
grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
gap: clamp(1rem, 3vw, 2rem);
margin: 1.65rem 0;
}
@media (max-width: 920px) {
.painel-selecao-classes { padding: 6.4rem 4.6rem 4rem; }
}
@media (max-width: 560px) {
.painel-selecao-classes { padding: 5.1rem 2.25rem 2.6rem; border-radius: 24px; }
.botao-sofrimento img { width: min(100%, 420px); }
}
.classe-card { position: relative; cursor: pointer; }
.classe-card input { position: absolute; opacity: 0; }
.classe-card .corpo {
background:
linear-gradient(135deg, color-mix(in oklab, var(--classe-cor, var(--primaria)) 48%, var(--ouro)) 0 2px, transparent 2px 20px),
radial-gradient(circle at 50% 0, color-mix(in oklab, var(--classe-cor, var(--primaria)) 22%, transparent), transparent 44%),
linear-gradient(180deg, #12152c 0%, #171a36 100%);
border: 2px solid color-mix(in oklab, var(--classe-cor, var(--primaria)) 42%, var(--ouro));
border-radius: 18px;
padding: .42rem;
text-align: center;
transition: .15s;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.10),
inset 0 0 28px rgba(0,0,0,.34),
0 0 22px color-mix(in oklab, var(--classe-cor, var(--primaria)) 20%, transparent);
}
.classe-card:hover .corpo { border-color: color-mix(in oklab, var(--classe-cor, var(--primaria-2)) 55%, var(--primaria-2)); }
.classe-card input:checked + .corpo {
border-color: var(--classe-cor, var(--primaria));
box-shadow:
0 0 0 3px color-mix(in oklab, var(--classe-cor, var(--primaria)) 35%, transparent),
inset 0 0 0 1px rgba(255,255,255,.12),
inset 0 0 30px rgba(0,0,0,.28),
0 0 30px color-mix(in oklab, var(--classe-cor, var(--primaria)) 32%, transparent);
background: var(--painel-2);
}
.classe-retrato-wrap {
width: 100%;
aspect-ratio: 3 / 2;
margin: 0;
flex-shrink: 0;
background: #0f1228;
border-radius: 13px 13px 5px 5px;
border: 1px solid rgba(255,255,255,.14);
box-shadow:
0 0 18px color-mix(in oklab, var(--classe-cor, var(--primaria)) 24%, transparent),
inset 0 -24px 28px rgba(0,0,0,.18);
line-height: 0;
overflow: hidden;
position: relative;
}
.classe-retrato {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
image-rendering: auto;
}
.classe-info {
position: relative;
margin-top: .38rem;
padding: 1.18rem 1.65rem 1.12rem;
background:
radial-gradient(ellipse 46% 58% at 50% 54%, rgba(6,8,22,.82), rgba(6,8,22,.38) 62%, transparent 74%),
radial-gradient(circle at 50% 8%, color-mix(in oklab, var(--classe-cor, var(--primaria)) 18%, transparent), transparent 54%),
linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.20)),
url("../img/ui/molduras/card-texto-bg.png") center / 100% 100% no-repeat;
border-radius: 8px 8px 13px 13px;
box-shadow:
inset 0 0 0 1px color-mix(in oklab, var(--classe-cor, var(--primaria)) 22%, rgba(255,255,255,.08)),
0 -1px 0 rgba(255,255,255,.08),
0 0 18px color-mix(in oklab, var(--classe-cor, var(--primaria)) 16%, transparent);
}
.classe-info::before {
content: "";
position: absolute;
top: -.48rem;
left: 50%;
transform: translateX(-50%);
width: 68%;
height: .6rem;
clip-path: polygon(0 50%, 8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%);
background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--classe-cor, var(--primaria)) 72%, var(--ouro)), var(--ouro), color-mix(in oklab, var(--classe-cor, var(--primaria)) 72%, var(--ouro)), transparent);
box-shadow: 0 0 12px color-mix(in oklab, var(--classe-cor, var(--primaria)) 45%, transparent);
}
.classe-info::after {
content: "";
display: block;
width: 42%;
height: 2px;
margin: 0 auto .54rem;
border-radius: 999px;
background: linear-gradient(90deg, transparent, var(--classe-cor, var(--primaria)), var(--ouro), transparent);
box-shadow: 0 0 12px color-mix(in oklab, var(--classe-cor, var(--primaria)) 55%, transparent);
}
.classe-texto {
position: relative;
z-index: 1;
max-width: 82%;
margin: 0 auto;
}
.classe-card .corpo svg { width: 80px; height: 80px; }
.classe-card h3 {
margin: 0 0 .16rem;
font-size: .96rem;
color: #fff;
letter-spacing: .02em;
text-shadow: 0 2px 8px rgba(0,0,0,.82), 0 0 12px color-mix(in oklab, var(--classe-cor, var(--primaria)) 34%, transparent);
}
.classe-especie {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 92px;
padding: .12rem .5rem;
border-radius: 999px;
font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
color: color-mix(in oklab, var(--classe-cor, var(--primaria-2)) 78%, #fff);
background: color-mix(in oklab, var(--classe-cor, var(--primaria)) 14%, rgba(0,0,0,.28));
border: 1px solid color-mix(in oklab, var(--classe-cor, var(--primaria)) 35%, rgba(255,255,255,.08));
margin-bottom: .5rem;
box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.classe-card .desc {
font-size: .73rem;
line-height: 1.24;
color: color-mix(in oklab, var(--texto-fraco) 82%, #fff);
min-height: 3.72em;
text-shadow: 0 1px 5px rgba(0,0,0,.78);
}
.classe-card .stats {
display: flex; justify-content: center; gap: .34rem; margin-top: .64rem;
font-size: .72rem; font-weight: 800;
}
.classe-card .stats span {
min-width: 40px;
padding: .16rem .3rem;
border-radius: 8px;
background: rgba(7, 9, 22, .58);
border: 1px solid rgba(255,255,255,.08);
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.classe-card .stats .s-hp { color: var(--hp); }
.classe-card .stats .s-mp { color: var(--mp); }
.classe-card .stats .s-atk { color: var(--xp); }
/* Botão que abre o popup de lore (substitui o que esticava o card). */
.classe-lore-btn {
margin-top: .7rem;
padding: .34rem .8rem;
font: inherit;
font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
color: color-mix(in oklab, var(--classe-cor, var(--primaria-2)) 82%, #fff);
background: color-mix(in oklab, var(--classe-cor, var(--primaria)) 14%, rgba(0,0,0,.32));
border: 1px solid color-mix(in oklab, var(--classe-cor, var(--primaria)) 36%, rgba(255,255,255,.1));
border-radius: 999px;
cursor: pointer;
transition: .15s;
box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.classe-lore-btn:hover {
transform: translateY(-1px);
background: color-mix(in oklab, var(--classe-cor, var(--primaria)) 28%, rgba(0,0,0,.32));
box-shadow: 0 0 14px color-mix(in oklab, var(--classe-cor, var(--primaria)) 40%, transparent);
}
/* ---------- Popup de lore (origem do povo) ---------- */
.lore-modal-overlay {
position: fixed; inset: 0; z-index: 1200;
display: none; place-items: center;
padding: 1.2rem;
background: rgba(4, 6, 16, .74);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.lore-modal-overlay.aberto { display: grid; animation: loreFade .2s ease both; }
@keyframes loreFade { from { opacity: 0; } to { opacity: 1; } }
.lore-modal-card {
position: relative;
width: min(94vw, 460px);
max-height: 88vh;
display: flex; flex-direction: column;
overflow: hidden;
background: linear-gradient(180deg, #12152c 0%, #171a36 100%);
border: 2px solid color-mix(in oklab, var(--classe-cor, var(--primaria)) 55%, var(--ouro));
border-radius: 18px;
box-shadow:
0 0 0 3px color-mix(in oklab, var(--classe-cor, var(--primaria)) 26%, transparent),
0 24px 64px rgba(0, 0, 0, .6),
0 0 42px color-mix(in oklab, var(--classe-cor, var(--primaria)) 30%, transparent);
animation: lorePop .24s cubic-bezier(.2, .8, .3, 1.2) both;
}
@keyframes lorePop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.lore-modal-retrato {
aspect-ratio: 16 / 10;
flex-shrink: 0;
overflow: hidden;
background: #0f1228;
border-bottom: 1px solid color-mix(in oklab, var(--classe-cor, var(--primaria)) 30%, rgba(255,255,255,.1));
}
.lore-modal-retrato img {
width: 100%; height: 100%;
object-fit: cover; object-position: center top;
display: block; image-rendering: auto;
}
.lore-modal-corpo {
padding: 1.05rem 1.35rem 1.4rem;
overflow-y: auto;
text-align: center;
}
.lore-modal-corpo h3 {
margin: 0 0 .45rem;
font-size: 1.18rem; color: #fff;
text-shadow: 0 2px 8px rgba(0,0,0,.82), 0 0 12px color-mix(in oklab, var(--classe-cor, var(--primaria)) 34%, transparent);
}
.lore-modal-corpo p {
margin: .75rem 0 0;
text-align: left;
font-size: .86rem; line-height: 1.58;
color: color-mix(in oklab, var(--texto-fraco) 90%, #fff);
}
.lore-modal-fechar {
position: absolute; top: .55rem; right: .55rem; z-index: 2;
width: 2rem; height: 2rem; border-radius: 50%;
display: grid; place-items: center;
background: rgba(0, 0, 0, .55);
border: 1px solid rgba(255, 255, 255, .22);
color: #fff; font-size: .95rem; line-height: 1; cursor: pointer;
transition: .15s;
}
.lore-modal-fechar:hover { background: rgba(0, 0, 0, .82); transform: scale(1.08); }
/* ---------- Grades genéricas (itens, conquistas) ---------- */
.grade-itens { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.raridade { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; padding: .1rem .4rem; border-radius: 5px; }
.raridade-comum { background: rgba(154,160,201,.2); color: #c3c8ea; }
.raridade-raro { background: rgba(74,163,255,.2); color: #8cc6ff; }
.raridade-epico { background: rgba(157,131,255,.22); color: #c4b0ff; }
.raridade-lendario { background: rgba(255,206,71,.2); color: var(--xp); }
@keyframes itemLendario {
0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 206, 71, .45), 0 0 12px rgba(255, 206, 71, .22); }
50% { box-shadow: inset 0 0 0 1px rgba(255, 206, 71, .7), 0 0 22px rgba(255, 206, 71, .5); }
}
/* ---------- Loja: itens como cartas colecionáveis (arte 2:3) ---------- */
.grade-cartas-loja {
display: grid; gap: 1.1rem; margin-top: 1rem; align-items: start;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
/* Carta da loja com CHROME DE MARCA: alcove navy + filete dourado + borda/brilho
por raridade (tokens.css). A arte ilustrada (moldura de ouro) é preservada. */
.carta-loja {
--rar-borda: rgba(124, 92, 255, .28);
--rar-glow: rgba(124, 92, 255, .18);
background:
radial-gradient(130% 75% at 50% -12%, rgba(124, 92, 255, .12), transparent 58%),
linear-gradient(180deg, #15173a 0%, #0d0e24 62%, #0a0b1b 100%);
border: 1px solid var(--rar-borda); border-radius: 16px;
overflow: hidden; display: flex; flex-direction: column; position: relative;
box-shadow: 0 8px 22px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .05);
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
/* Filete dourado de marca no topo, tingido pela raridade. */
.carta-loja::before {
content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; z-index: 3;
background: linear-gradient(90deg, transparent, var(--rar-glow), var(--ouro), var(--rar-glow), transparent);
opacity: .85;
}
.carta-loja:hover {
transform: translateY(-4px);
box-shadow: 0 16px 34px rgba(0, 0, 0, .5), 0 0 26px var(--rar-glow);
}
.carta-loja__arte {
position: relative; overflow: hidden; line-height: 0;
background: linear-gradient(180deg, #0c0d20, #07080f);
border-bottom: 1px solid var(--rar-borda);
}
/* A arte preenche a LARGURA na altura natural da carta: sem tarja preta e sem
corte, qualquer que seja a proporção do item (anel largo, poção retrato...). */
.carta-loja__arte .carta-loja__img {
width: 100%; height: auto; display: block;
image-rendering: auto; position: relative; z-index: 1;
transition: transform .25s ease;
}
/* Vinheta sutil só nas bordas, p/ encaixar a carta no chrome. */
.carta-loja__arte::after {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
box-shadow: inset 0 0 26px rgba(0, 0, 0, .35);
}
.carta-loja:hover .carta-loja__img { transform: scale(1.04); }
.carta-loja__raridade {
position: absolute; top: .5rem; right: .5rem; z-index: 2;
backdrop-filter: blur(2px); box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
.carta-loja__corpo { padding: .8rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.carta-loja__nome { margin: 0; font-size: 1rem; line-height: 1.2; font-family: var(--titulo, inherit); }
.carta-loja__corpo .desc-item { margin: 0; font-size: .78rem; color: var(--texto-fraco); }
.carta-loja__efeitos { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .82rem; font-weight: 700; }
/* Comparação ciente de slot: deixa óbvio o ganho real de equipar o item. */
.carta-loja__comparacao {
display: flex; flex-direction: column; gap: .15rem; font-size: .78rem;
background: rgba(124, 92, 255, .08); border: 1px solid var(--borda);
border-radius: 9px; padding: .45rem .6rem;
}
.carta-loja__comparacao .cmp-linha,
.carta-loja__comparacao .cmp-poder { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.carta-loja__comparacao .cmp-vals { color: var(--texto-fraco); }
.carta-loja__comparacao .cmp-poder { font-weight: 700; margin-top: .1rem; }
.carta-loja__comparacao .cmp-delta { margin-left: auto; font-weight: 800; }
.carta-loja__comparacao .cmp-delta.pos { color: var(--sucesso); }
.carta-loja__comparacao .cmp-delta.neg { color: var(--hp); }
.carta-loja__comparacao .cmp-nota { font-size: .68rem; color: var(--texto-fraco); opacity: .8; }
.carta-loja__rodape {
margin-top: auto; padding-top: .5rem; display: flex; align-items: center;
justify-content: space-between; gap: .5rem; flex-wrap: wrap;
border-top: 1px solid var(--rar-borda);
}
.carta-loja__preco { color: var(--ouro); font-size: 1.05rem; font-weight: 800; text-shadow: 0 1px 6px rgba(255, 206, 71, .28); }
.carta-loja__acoes { display: flex; gap: .4rem; flex-wrap: wrap; }
/* Raridade define borda + brilho da carta inteira (tokens.css). */
.carta-loja.item-rar-comum { --rar-borda: var(--rar-comum-borda); --rar-glow: rgba(154, 160, 201, .14); }
.carta-loja.item-rar-raro { --rar-borda: var(--rar-raro-borda); --rar-glow: var(--rar-raro-glow); }
.carta-loja.item-rar-epico { --rar-borda: var(--rar-epico-borda); --rar-glow: var(--rar-epico-glow); }
.carta-loja.item-rar-lendario { --rar-borda: var(--rar-lendario-borda); --rar-glow: var(--rar-lendario-glow);
animation: itemLendario 2.2s ease-in-out infinite;
}
/* ---------- Inventário: cards verticais no idioma da Loja (.carta-loja) ----------
Grid auto-fit centralizado: 1 coluna no celular, vários no desktop; com poucos
itens as cartas ficam centradas (sem coluna estreita "perdida" à esquerda). */
.grade-inventario {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 210px));
gap: 1rem;
align-items: start;
justify-content: start;
margin-top: 1rem;
}
.titulo-grupo-inv { font-size: 1.15rem; margin-top: 1.6rem; }
/* Selo "Equipado" (canto sup. esq.) e quantidade (canto inf. dir.) sobre a arte. */
.carta-loja__equipado {
position: absolute; top: .5rem; left: .5rem; z-index: 2;
font-size: .62rem; font-weight: 800; letter-spacing: .3px;
color: var(--sucesso); background: rgba(7, 8, 15, .62);
padding: .14rem .42rem; border-radius: 6px; backdrop-filter: blur(2px);
box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
.carta-loja__qtd {
position: absolute; bottom: .5rem; right: .5rem; z-index: 2;
font-size: .74rem; font-weight: 800; color: #fff;
background: rgba(11, 12, 29, .72); border: 1px solid var(--rar-borda);
padding: .08rem .42rem; border-radius: 7px; backdrop-filter: blur(2px);
}
.carta-loja.carta-equipada { box-shadow: 0 8px 22px rgba(0, 0, 0, .42), 0 0 0 1px var(--sucesso) inset; }
/* Ações ocupam a largura do card: botões lado a lado e do mesmo tamanho. */
.grade-inventario .carta-loja__acoes { width: 100%; }
.grade-inventario .carta-loja__acoes form { flex: 1 1 0; min-width: 0; }
.grade-inventario .carta-loja__acoes .botao { width: 100%; }
/* Itens: animações sutis (hover, pulinho, brilho de raridade) tocam mesmo com
prefers-reduced-motion — são leves e disparadas por interação. As animações
fortes (shake/partículas de batalha, parallax de cena) seguem desligadas. */
/* ---------- Tabelas ---------- */
.tabela { width: 100%; border-collapse: collapse; }
.tabela th, .tabela td { padding: .7rem .8rem; text-align: left; border-bottom: 1px solid var(--borda); }
.tabela th { color: var(--texto-fraco); font-size: .82rem; text-transform: uppercase; letter-spacing: .5px; }
.tabela tr:hover td { background: rgba(124,92,255,.06); }
.tabela .destaque { background: rgba(255,206,71,.12); }
/* ---------- Página de erro ---------- */
.tela-erro { display: grid; place-items: center; min-height: 100vh; text-align: center; padding: 2rem; }
.erro-codigo { font-size: 6rem; font-weight: 900; color: var(--primaria); line-height: 1; }
.erro-box h1 { font-size: 1.4rem; }
/* ---------- Conquistas ---------- */
.conquista { display: flex; gap: .8rem; align-items: center; padding: .8rem; border-radius: 12px; background: var(--painel); border: 1px solid var(--borda); }
.conquista.bloqueada { opacity: .45; filter: grayscale(1); }
.conquista .medalha { width: 48px; height: 48px; flex-shrink: 0; }
.conquista .medalha svg { width: 48px; height: 48px; }
/* ---------- Estatísticas de perfil ---------- */
.barra-stat { margin-bottom: .7rem; }
.barra-stat .topo-stat { display: flex; justify-content: space-between; font-size: .85rem; margin-bottom: .25rem; }
.barra-stat .trilha { height: 10px; background: #0c0d1c; border-radius: 6px; overflow: hidden; }
.barra-stat .preenche { height: 100%; background: linear-gradient(90deg, var(--primaria-2), var(--xp)); }
/* ---------- Vitrine do herói no Perfil (moldura-status) ---------- */
.perfil-vitrine {
position: relative;
width: 100%; max-width: 680px; margin: 0 auto 1.7rem;
aspect-ratio: 1512 / 872;
background-size: 100% 100%; background-repeat: no-repeat;
container-type: inline-size;
filter: drop-shadow(0 14px 34px rgba(0,0,0,.5));
}
.perfil-vitrine > * { position: absolute; }
/* Avatar no círculo esquerdo (10.5%, 49.8%). */
.vitrine-avatar {
left: 10.5%; top: 49.8%; transform: translate(-50%, -50%);
width: 10.5%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
}
.vitrine-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 16%; }
/* Nome + classe + barras no miolo central (52%, 50%). */
.vitrine-centro {
left: 51.9%; top: 49.8%; transform: translate(-50%, -50%);
width: 60%; display: flex; flex-direction: column; align-items: center; gap: 2cqw;
text-align: center;
}
.vitrine-nome { font-family: var(--titulo); font-weight: 700; font-size: 5cqw; line-height: 1; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.75); }
.vitrine-classe { font-size: 2.6cqw; color: color-mix(in oklab, var(--hud-cor, var(--primaria-2)) 72%, #fff); font-weight: 700; }
.vitrine-barras { width: 96%; display: flex; flex-direction: column; gap: 1.2cqw; }
.vitrine-barras .barra { height: 3.4cqw; border-radius: 2cqw; }
.vitrine-barras .barra-label { font-size: 1.9cqw; }
/* Recursos nos 2 círculos da direita (90.7%, 37.2% e 62.2%). */
.vitrine-recurso {
display: flex; flex-direction: column; align-items: center; gap: .2cqw;
font-family: var(--hud); font-weight: 700; font-size: 2.4cqw; line-height: 1;
text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
.vitrine-recurso .ico { width: 3.4cqw; height: 3.4cqw; }
.vitrine-recurso .emoji { font-size: 3cqw; }
.vitrine-ouro { left: 90.7%; top: 37.2%; transform: translate(-50%, -50%); color: var(--ouro); }
.vitrine-rep { left: 90.7%; top: 62.2%; transform: translate(-50%, -50%); color: #fff; }
@media (max-width: 520px) { .perfil-vitrine { display: none; } }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 760px) {
.grid-2 { grid-template-columns: 1fr; }
.topo {
grid-template-columns: 1fr auto;
grid-template-areas:
"marca nav"
"hud hud";
padding: .5rem .75rem;
}
.marca { grid-area: marca; }
.topo-nav { grid-area: nav; }
.hud { grid-area: hud; width: 100%; justify-self: stretch; }
.hud-placa { width: 100%; }
.hud-recursos { flex-direction: row; gap: .65rem; border-left: none; padding-left: 0; padding-top: .25rem; }
.marca { max-width: none; }
.logo-marca-header { height: 36px; max-width: min(50vw, 210px); }
}
/* ============================================================
Cenários ambientais por bioma (compartilhado: mapa + arena)
Camada decorativa atrás do conteúdo. Tudo em CSS declarativo,
animando só transform/opacity (sem rAF, barato na GPU).
============================================================ */
.cena-ambiente {
position: absolute; inset: 0; pointer-events: none; z-index: 0;
overflow: hidden; border-radius: inherit;
}
.cena-ambiente::before, .cena-ambiente::after {
content: ""; position: absolute; inset: -20%; background-repeat: no-repeat;
}
/* Floresta das Estruturas — folhas caindo + balanço. */
.bioma-floresta .cena-ambiente::before {
background-image:
radial-gradient(3px 3px at 15% 10%, color-mix(in oklab, var(--sucesso) 80%, #fff), transparent),
radial-gradient(2px 2px at 45% 5%, color-mix(in oklab, var(--sucesso) 65%, transparent), transparent),
radial-gradient(3px 3px at 72% 8%, color-mix(in oklab, var(--xp) 55%, var(--sucesso)), transparent),
radial-gradient(2px 2px at 88% 12%, color-mix(in oklab, var(--sucesso) 70%, #fff), transparent);
background-size: 100% 100%; opacity: .55;
animation: ambFolhas 9s linear infinite;
}
@keyframes ambFolhas { from { transform: translateY(-12%) translateX(0); } to { transform: translateY(120%) translateX(18px); } }
/* Montanha do Cálculo — brasas subindo. */
.bioma-montanha .cena-ambiente::before {
background-image:
radial-gradient(2px 2px at 20% 90%, color-mix(in oklab, var(--aviso) 85%, #fff), transparent),
radial-gradient(3px 3px at 50% 95%, color-mix(in oklab, var(--hp) 70%, var(--aviso)), transparent),
radial-gradient(2px 2px at 76% 88%, color-mix(in oklab, var(--aviso) 80%, transparent), transparent),
radial-gradient(2px 2px at 90% 92%, color-mix(in oklab, var(--xp) 60%, var(--hp)), transparent);
opacity: .6; animation: ambBrasas 6s linear infinite;
}
@keyframes ambBrasas { from { transform: translateY(20%); opacity: .65; } to { transform: translateY(-120%); opacity: 0; } }
/* Torre das Conexões — pacotes/luz de rede subindo + linhas. */
.bioma-torre .cena-ambiente::before {
background-image:
radial-gradient(2px 2px at 25% 80%, color-mix(in oklab, var(--mp) 85%, #fff), transparent),
radial-gradient(3px 3px at 55% 70%, color-mix(in oklab, var(--mp) 70%, transparent), transparent),
radial-gradient(2px 2px at 80% 85%, color-mix(in oklab, var(--primaria-2) 70%, var(--mp)), transparent);
opacity: .6; animation: ambPacotes 5s linear infinite;
}
.bioma-torre .cena-ambiente::after {
background-image: repeating-linear-gradient(90deg, transparent 0 38px, color-mix(in oklab, var(--mp) 22%, transparent) 38px 39px);
opacity: .18; animation: ambRede 8s linear infinite;
}
@keyframes ambPacotes { from { transform: translateY(15%); opacity: .7; } to { transform: translateY(-120%); opacity: 0; } }
@keyframes ambRede { from { transform: translateX(0); } to { transform: translateX(39px); } }
/* Porto da Sintaxe — maresia/respingo deslizando. */
.bioma-porto .cena-ambiente::before {
background-image:
radial-gradient(2px 2px at 10% 60%, color-mix(in oklab, var(--mp) 60%, #fff), transparent),
radial-gradient(2px 2px at 50% 75%, color-mix(in oklab, var(--mp) 45%, transparent), transparent),
radial-gradient(3px 3px at 85% 65%, color-mix(in oklab, #fff 70%, var(--mp)), transparent);
opacity: .45; animation: ambMaresia 11s linear infinite;
}
@keyframes ambMaresia { from { transform: translateX(-8%) translateY(0); } to { transform: translateX(8%) translateY(-10px); } }
/* Cidadela dos Objetos — runas/motas arcanas flutuando. */
.bioma-cidadela .cena-ambiente::before {
background-image:
radial-gradient(2px 2px at 18% 70%, color-mix(in oklab, var(--primaria-2) 85%, #fff), transparent),
radial-gradient(3px 3px at 52% 60%, color-mix(in oklab, var(--primaria-2) 65%, transparent), transparent),
radial-gradient(2px 2px at 82% 75%, color-mix(in oklab, var(--xp) 50%, var(--primaria-2)), transparent);
opacity: .5; animation: ambRunas 8s ease-in-out infinite alternate;
}
@keyframes ambRunas { from { transform: translateY(6%); opacity: .4; } to { transform: translateY(-8%); opacity: .6; } }
/* Vila / Abismo / batalha genérica — motas suaves neutras. */
.bioma-vila .cena-ambiente::before, .bioma-batalha .cena-ambiente::before, .bioma-abismo .cena-ambiente::before {
background-image:
radial-gradient(2px 2px at 22% 65%, color-mix(in oklab, var(--primaria-2) 60%, #fff), transparent),
radial-gradient(2px 2px at 70% 72%, color-mix(in oklab, var(--xp) 40%, transparent), transparent);
opacity: .35; animation: ambRunas 10s ease-in-out infinite alternate;
}
/* Conteúdo da região/arena acima da camada ambiental. */
.regiao > .regiao-cabecalho, .regiao > .trilha { position: relative; z-index: 1; }
.campo-batalha .cena-ambiente { z-index: 1; }
.campo-batalha .combatente { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
.cena-ambiente::before, .cena-ambiente::after { animation: none !important; opacity: .25; }
}
/* ---------- Acessibilidade: movimento reduzido (global) ---------- */
/* Desliga só movimento ambiente/decorativo; o feedback essencial (cor/opacity)
é preservado nas regras específicas de cada componente. */
@media (prefers-reduced-motion: reduce) {
body::before { animation: none; } /* deriva de estrelas */
.toast { transition: opacity .2s; } /* sem deslize, só fade */
}
/* ---------- Arte ilustrada v2 (PNG) substituindo SVGs inline ---------- */
/* Imagens dimensionadas como os antigos