/* Página inicial do Exori Idle (index.html). O jogo mora em jogo.html.

   O layout veio de um template de landing de jogo (nav flutuante, herói dividido em dois textos, seção de
   lore com duas lâminas flutuando, fileira de avatares com três cartões, chamada final e rodapé com a
   turma por cima). Daqui só se pegou a IDEIA do layout: a cor, a letra e a moldura são as do design
   system (design-system/tokens.css) — o chão e o ouro que os tokens disserem, fio de ouro, losango nos cantos, Cinzel nos
   títulos, Alegreya no texto — e toda imagem é sprite do jogo (sprites/), em tamanho inteiro e
   pixelated. Sem Tailwind, sem ícone de biblioteca: abre por dois cliques como o resto. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg-000); color: var(--ink); font: 400 18px/1.6 var(--font-serif);
  overflow-x: hidden; -webkit-font-smoothing: antialiased; opacity: 0; animation: surge 1s ease-out forwards; }
h1, h2, h3, h4, h5, .titulo { font-family: var(--font-display); margin: 0; }
a { color: inherit; text-decoration: none; }
img.spr { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
.miolo { width: min(100% - 32px, 1280px); margin: 0 auto; }
.fio { width: 48px; height: 3px; background: var(--gold); margin: 0 auto; }
.sec { color: var(--gold); font-weight: 700; letter-spacing: .10em; text-transform: uppercase; }

@keyframes surge { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.surge { opacity: 0; animation: surge 1s ease-out forwards; }
.tarde1 { animation-delay: .2s; } .tarde2 { animation-delay: .4s; }
@keyframes flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------------- painel do sistema: fundo, fio de ouro e losango nos quatro cantos ---------------- */
.painel { position: relative; background: rgba(10, 16, 32, .82); border-radius: var(--radius-md);
  box-shadow: var(--frame), var(--frame-inner); backdrop-filter: blur(6px); }
.painel::before, .painel::after, .painel > .losangos::before, .painel > .losangos::after {
  content: '\25C6'; position: absolute; font-size: 8px; line-height: 8px; color: var(--gold-line-bright); pointer-events: none; }
.painel::before { left: 4px; top: 3px; } .painel::after { right: 4px; top: 3px; }
.painel > .losangos::before { left: 4px; bottom: 3px; } .painel > .losangos::after { right: 4px; bottom: 3px; }

/* ---------------- botões ---------------- */
.bt-ouro { display: inline-block; padding: 18px 56px; border: 0; cursor: pointer; color: var(--on-bright);
  background: linear-gradient(90deg, var(--gold-bright), var(--gold) 45%, #c9932e); font: 700 22px/1 var(--font-display);
  letter-spacing: .18em; text-transform: uppercase; clip-path: polygon(15px 0, 100% 0, calc(100% - 15px) 100%, 0 100%);
  transition: transform .3s, filter .3s; }
.bt-ouro:hover { transform: scale(1.05); filter: brightness(1.1); }
.bt-mini { display: inline-block; padding: 10px 28px; color: var(--on-bright); background: var(--gold); font: 700 14px/1 var(--font-display);
  letter-spacing: .12em; text-transform: uppercase; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); transition: background .2s; }
.bt-mini:hover { background: var(--gold-bright); }

/* ---------------- navegação flutuante ---------------- */
nav.topo { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); z-index: 50; width: min(95%, 1280px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; }
nav.topo .marca { display: flex; align-items: center; }
/* a marca é o logo do dono (marca/): pixel art, então altura em múltiplo inteiro da arte e sem borrão */
img.logo { height: 40px; width: auto; } img.logo-v { width: min(440px, 80vw); height: auto; }
nav.topo .links { display: flex; align-items: center; gap: 32px; font: 700 14px/1 var(--font-display); letter-spacing: .10em; text-transform: uppercase; }
nav.topo .links a { color: var(--ink-muted); transition: color .2s; } nav.topo .links a:hover { color: var(--gold); }
nav.topo .links a.aqui { color: var(--ink); background: var(--bg-300); padding: 10px 20px; border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--gold-line); }

/* ---------------- herói: a cena com bichos andando no lugar do vídeo ---------------- */
header.heroi { position: relative; min-height: min(100vh, 1080px); overflow: hidden; display: flex; flex-direction: column; }   /* a tela inteira, mas com teto: em monitor 4K não vira um poço */
.cena { position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background: var(--bg-100) url('sprites/chao_caverna_0.png') repeat; background-size: 64px 64px; image-rendering: pixelated; }
.cena .veu { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(5, 8, 16, .55), rgba(5, 8, 16, .35) 40%, var(--bg-000) 100%); }
.cena .veu2 { position: absolute; inset: 0; background: linear-gradient(to right, rgba(5, 8, 16, .7), transparent 40%, transparent 60%, rgba(5, 8, 16, .6)); }
.cena .tocha { position: absolute; width: 60vw; height: 60vw; border-radius: 50%; left: 50%; top: 40%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 154, 46, .16), transparent); pointer-events: none; }
/* a cena viva (home.js) desenha num canvas por cima do chão e por baixo dos véus */
.cena canvas.palco { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .85; image-rendering: pixelated; }
.heroi .conteudo { position: relative; z-index: 10; flex: 1; display: flex; flex-direction: column; padding-top: 140px; padding-bottom: 60px; }
.heroi .dois { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; }
.heroi .esq { margin-top: 96px; }
.heroi .esq h2 { color: var(--ink); font-size: clamp(28px, 4vw, 48px); font-weight: 500; font-style: italic; text-transform: uppercase; letter-spacing: -.01em; text-shadow: 0 4px 10px rgba(0, 0, 0, .8); }
.heroi .esq h3 { color: var(--gold); font: 700 clamp(18px, 1.7vw, 22px)/1.35 var(--font-serif); max-width: 440px; margin: 16px 0 0; text-shadow: 0 2px 8px rgba(0, 0, 0, .8); }
.heroi .esq p { color: var(--ink-muted); max-width: 420px; margin: 12px 0 0; }
.heroi .dir { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.heroi h1 { line-height: 0; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .9)); }
.heroi .dir > p { color: var(--ink); font-size: clamp(20px, 2.2vw, 30px); margin: 24px 0 0; max-width: 520px; text-shadow: 0 4px 10px rgba(0, 0, 0, .8); }
.heroi .fichas { margin-top: 56px; display: flex; flex-direction: column; align-items: flex-end; gap: 24px; }
.heroi .ficha { text-align: center; padding: 14px 18px 12px; min-width: 176px; }
.heroi .ficha .fig { display: flex; justify-content: center; gap: 4px; margin-bottom: 8px; }
.heroi .ficha .rot { color: var(--ink-muted); font: 700 13px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; margin-top: 6px; }
.heroi .ficha .val { color: var(--ink); font-size: 18px; font-weight: 700; }
.heroi .ficha .val small { color: var(--ink-muted); font-weight: 400; font-size: 14px; }
.heroi .marcas { display: flex; gap: 6px; justify-content: center; margin: 6px 0 12px; }
.heroi .marcas i { width: 20px; height: 12px; background: var(--gold); transform: skewX(-20deg); }
.heroi .chamada { margin: auto auto 0; padding-top: 48px; text-align: center; }
.heroi .chamada small { display: block; color: var(--ink-muted); margin-top: 14px; font-size: 15px; }

/* ---------------- lore: texto em duas colunas, duas armas do acervo flutuando ---------------- */
section.lore { position: relative; padding: 128px 0; background: var(--bg-100) url('sprites/chao_cripta_0.png') repeat fixed; background-size: 64px 64px; image-rendering: pixelated; }
section.lore::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10, 16, 32, .9), rgba(10, 16, 32, .94)); }
.lore .laminas { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 48px; pointer-events: none; overflow: hidden; }
.lore .laminas img { width: 192px; height: 192px; opacity: .4; filter: drop-shadow(0 0 18px rgba(242, 196, 90, .25)); animation: flutua 6s ease-in-out infinite; }
.lore .laminas img + img { animation-delay: -3s; }
.lore .texto { position: relative; text-align: center; padding: 48px 0; max-width: 1000px; }
.lore h2 { color: var(--ink); font-size: clamp(30px, 4vw, 48px); font-weight: 500; text-transform: uppercase; margin-bottom: 24px; }
.lore .colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 96px; text-align: left; color: var(--ink-muted); font-size: 20px; margin-top: 64px; }
.lore .colunas p { margin: 0; } .lore .colunas p + p { margin-top: 24px; }
.lore .colunas .dirita { text-align: right; }
.lore b { color: var(--ink); font-weight: 700; }

/* ---------------- vocações: fileira de retratos e três cartões, o do meio em destaque ---------------- */
section.vocs { position: relative; padding: 128px 0; text-align: center; background: var(--bg-200); box-shadow: inset 0 1px 0 var(--gold-line); }
.vocs h3 { color: var(--ink-muted); font-size: 26px; font-weight: 500; font-style: italic; }
.vocs h2 { color: var(--gold); font-size: clamp(44px, 6vw, 76px); font-weight: 900; font-style: italic; text-transform: uppercase; margin: 4px 0 24px; }
.retratos { display: flex; justify-content: center; align-items: center; gap: 24px; margin: 80px auto 96px; padding: 16px 24px; overflow-x: auto; }
.retratos button { flex: none; width: 80px; height: 80px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; overflow: hidden;
  background: var(--bg-100); box-shadow: 0 0 0 1px var(--gold-line); filter: grayscale(1); transition: filter .3s, transform .3s, box-shadow .3s; display: grid; place-items: center; }
.retratos button:hover { filter: none; }
.retratos button.on { width: 112px; height: 112px; filter: none; transform: scale(1.1); box-shadow: 0 0 0 3px var(--gold), var(--glow-gold); }
/* o boneco fica no canto de baixo-direita do tile de 64px (centro em ~47,46): escala 2x/3x e desloca para o meio do círculo */
.retratos img { width: 128px; height: 128px; transform: translate(-30px, -28px); } .retratos button.on img { width: 192px; height: 192px; transform: translate(-45px, -42px); }
.cartoes { display: flex; align-items: center; justify-content: center; gap: 0; position: relative; }
.cartao { display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 440px; text-align: left; opacity: .9; transition: opacity .3s, transform .3s; }
.cartao:hover { opacity: 1; transform: translateY(-8px); }
.cartao.esq { margin-right: -48px; } .cartao.dir { margin-left: -48px; text-align: right; align-items: flex-end; }
.cartao .cab { display: flex; align-items: baseline; gap: 12px; padding: 0 16px; } .cartao.dir .cab { justify-content: flex-end; }
.cartao h4 { color: var(--ink); font-size: 30px; font-weight: 500; text-transform: uppercase; }
.cartao .cab span { color: var(--ink-muted); font-size: 18px; }
.cartao .fala { color: var(--ink); font-style: italic; font-weight: 700; padding: 0 16px; margin: 0; }
.cartao .poco { position: relative; width: 100%; height: 320px; overflow: hidden; display: grid; place-items: center;
  background: var(--bg-000) url('sprites/chao_floresta_0.png') repeat; background-size: 64px 64px; image-rendering: pixelated; box-shadow: var(--frame); }
.cartao .poco::before { content: ''; position: absolute; inset: 0; background: radial-gradient(closest-side, rgba(255, 154, 46, .18), rgba(5, 8, 16, .55)); }
.cartao .poco img { position: relative; width: 192px; height: 192px; transform: translate(-45px, -42px); }
.cartao .pe { padding: 0 16px; }
.cartao.meio { max-width: 620px; z-index: 2; transform: scale(1.05); opacity: 1; background: var(--bg-100); gap: 0; }
.cartao.meio:hover { transform: scale(1.05) translateY(-12px); }
.cartao.meio .poco { height: 400px; box-shadow: none; }
.cartao.meio .poco img { width: 256px; height: 256px; transform: translate(-60px, -56px); }
.cartao.meio .corpo { padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.cartao.meio .cab, .cartao.meio .fala, .cartao.meio .pe { padding: 0; }
.cartao.meio h4 { color: var(--gold); font-size: 40px; }
.cartao.meio .desc { color: var(--ink-muted); margin: 0; }
.cartao .magias { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cartao.dir .magias { justify-content: flex-end; }
.cartao .magias li { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; background: var(--bg-200); box-shadow: 0 0 0 1px var(--gold-line); font-size: 14px; color: var(--ink); }
.cartao .magias img { width: 24px; height: 24px; }

/* ---------------- PvP: três camadas, a do meio (emboscada) em destaque ---------------- */
section.pvp { position: relative; padding: 112px 0; text-align: center; background: var(--bg-000) url('sprites/chao_torre_0.png') repeat fixed; background-size: 64px 64px; image-rendering: pixelated; box-shadow: inset 0 1px 0 var(--gold-line); }
section.pvp::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(6, 10, 13, .9), rgba(6, 10, 13, .95)); }
section.pvp .miolo { position: relative; }
.pvp h3 { color: var(--ink-muted); font-size: 26px; font-weight: 500; font-style: italic; }
.pvp h2 { color: var(--gold); font-size: clamp(36px, 5vw, 64px); font-weight: 900; font-style: italic; text-transform: uppercase; margin: 4px 0 24px; }
.pvp .sub { color: var(--ink-muted); max-width: 760px; margin: 24px auto 0; }
.selo-dev { display: inline-block; margin-left: 8px; padding: 3px 10px; color: var(--gold); font: 700 11px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; background: var(--bg-100); box-shadow: 0 0 0 1px var(--gold-line); vertical-align: middle; }
.camadas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 56px; align-items: start; }
.camada { text-align: left; padding: 24px 24px 20px; }
.camada.destaque { box-shadow: var(--glow-gold), var(--frame-inner); transform: translateY(-12px); }
.cena-pvp { display: flex; justify-content: center; align-items: center; gap: 12px; height: 96px; margin-bottom: 16px; background: var(--bg-000); box-shadow: var(--well); image-rendering: pixelated; }
.cena-pvp img { width: 64px; height: 64px; } .cena-pvp img.vs { width: 28px; height: 28px; }
.camada .n { color: var(--ink-muted); font: 700 11px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; }
.camada h4 { color: var(--gold); font-size: 28px; font-weight: 700; margin: 6px 0 8px; }
.camada .lema { color: var(--ink); font-style: italic; font-weight: 700; margin: 0 0 12px; }
.camada ul { margin: 0; padding: 0; list-style: none; color: var(--ink-muted); font-size: 16px; }
.camada li { padding: 8px 0 8px 18px; position: relative; } .camada li + li { border-top: 1px solid rgba(168, 137, 79, .3); }
.camada li::before { content: '\25C6'; position: absolute; left: 0; top: 11px; font-size: 8px; color: var(--gold-line-bright); }
.camada li b { color: var(--ink); }

/* ---------------- hunts: dez tiles, o chão de cada uma e o chefe do fundo ---------------- */
section.hunts { padding: 112px 0; background: var(--bg-000); box-shadow: inset 0 1px 0 var(--gold-line); text-align: center; }
.hunts h2 { color: var(--ink); font-size: clamp(30px, 4vw, 48px); font-weight: 500; text-transform: uppercase; margin-bottom: 24px; }
.hunts .grade { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.hunts .tile { position: relative; padding: 16px 12px 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; overflow: hidden; }
.hunts .tile .chao { position: absolute; inset: 0; background-size: 64px 64px; image-rendering: pixelated; opacity: .25; }
.hunts .tile img { position: relative; width: 96px; height: 96px; }
.hunts .tile b { position: relative; color: var(--ink); font-size: 16px; line-height: 1.2; }
.hunts .tile span { position: relative; color: var(--gold); font: 700 12px/1 var(--font-display); letter-spacing: .10em; text-transform: uppercase; }
.hunts .tile em { position: relative; color: var(--ink-muted); font-size: 13px; }

/* ---------------- chamada final ---------------- */
section.chamada { padding: 128px 0 176px; text-align: center; background: linear-gradient(to bottom, var(--bg-100), var(--bg-200)); box-shadow: inset 0 1px 0 var(--gold-line); }
.chamada h3 { color: var(--ink-muted); font-size: 32px; font-weight: 500; }
.chamada h2 { color: var(--gold); font-size: clamp(56px, 8vw, 110px); font-weight: 900; font-style: italic; text-transform: uppercase; margin: 4px 0 28px; }
.chamada p { color: var(--ink); font-size: clamp(20px, 2.2vw, 28px); max-width: 880px; margin: 48px auto 64px; text-wrap: balance; }
.bt-janela { display: inline-flex; align-items: center; gap: 24px; padding: 18px 40px; background: var(--bg-000); color: var(--ink); border-radius: var(--radius-md);
  box-shadow: var(--frame), 0 12px 32px rgba(0, 0, 0, .6); transition: transform .3s, box-shadow .3s; }
.bt-janela:hover { transform: scale(1.05); box-shadow: var(--glow-gold), 0 12px 32px rgba(0, 0, 0, .6); }
.bt-janela img { width: 48px; height: 48px; }
.bt-janela .txt { text-align: left; border-left: 1px solid var(--gold-line); padding-left: 24px; }
.bt-janela .txt small { display: block; color: var(--ink-muted); font: 700 12px/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 6px; }
.bt-janela .txt b { display: block; font: 700 28px/1 var(--font-display); letter-spacing: .06em; color: var(--gold); }

/* ---------------- rodapé: a turma por cima, depois as colunas ---------------- */
footer { position: relative; background: var(--bg-000); padding: 176px 0 48px; box-shadow: inset 0 1px 0 rgba(140, 112, 64, .4); }
footer .turma { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: flex-end; justify-content: center; gap: 0; pointer-events: none; width: 100%; max-width: 1100px; }
footer .turma img { width: 128px; height: 128px; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .8)); }
footer .colunas { display: grid; grid-template-columns: 4fr 3fr 3fr 2fr; gap: 48px; padding: 64px 32px 0; margin-top: 32px; border-top: 1px solid var(--gold-line); color: var(--ink-muted); }
footer .marca { display: flex; align-items: center; } footer img.logo { height: 48px; }
footer .rot { color: var(--ink-muted); font: 700 12px/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 10px; }
footer h5 { color: var(--ink); font-size: 15px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 8px; }
footer .col { display: flex; flex-direction: column; gap: 12px; }
footer .col a { width: max-content; transition: color .2s; } footer .col a:hover { color: var(--gold); }
footer .fim { color: var(--ink-muted); font-size: 15px; margin-top: 24px; }
footer .selo { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius-md); background: var(--bg-100); box-shadow: 0 0 0 1px var(--gold-line); font: 700 13px/1 var(--font-display); letter-spacing: .1em; }

/* ---------------- responsivo: 1400, 900 e 375 são as larguras de teste ---------------- */
@media (max-width: 1100px) {
  .hunts .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .camadas { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-left: auto; margin-right: auto; } .camada.destaque { transform: none; }
  .cartoes { flex-direction: column; gap: 40px; }
  .cartao.esq, .cartao.dir { margin: 0; } .cartao.meio { transform: none; }
  .cartao.meio:hover { transform: translateY(-8px); }
}
@media (max-width: 1180px) { footer .turma img:nth-child(n+8) { display: none; } }   /* 9 × 128px não cabem: a turma vazava pelos dois lados */
@media (max-width: 980px) {
  nav.topo .links { display: none; }
  footer .turma img { width: 64px; height: 64px; }
  .heroi .dois { flex-direction: column; } .heroi .esq { margin-top: 32px; }
  .heroi .dir { align-items: flex-start; text-align: left; } .heroi .fichas { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
  .lore .colunas { grid-template-columns: minmax(0, 1fr); gap: 32px; } .lore .colunas .dirita { text-align: left; }
  .lore .laminas img { width: 96px; height: 96px; opacity: .3; }
  footer .colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}
@media (max-width: 700px) {
  body { font-size: 16px; }
  nav.topo { top: 12px; padding: 10px 14px; } img.logo { height: 30px; } footer img.logo { height: 40px; }
  header.heroi { min-height: 0; } .heroi .conteudo { padding-top: 96px; }
  .heroi .fichas { gap: 12px; margin-top: 32px; } .heroi .ficha { min-width: 0; flex: 1 1 140px; }
  .bt-ouro { padding: 16px 32px; font-size: 18px; }
  section.lore, section.vocs, section.pvp, section.hunts, section.chamada { padding: 72px 0; }
  .camada { padding: 16px; } .cena-pvp { height: 80px; }
  .lore .colunas { font-size: 17px; margin-top: 40px; }
  .retratos { margin: 40px auto 48px; gap: 12px; justify-content: flex-start; }
  .cartao.esq, .cartao.dir { display: none; }
  .cartao.meio .corpo { padding: 20px; } .cartao.meio h4 { font-size: 30px; } .cartao.meio .poco { height: 280px; }
  .hunts .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .hunts .tile img { width: 64px; height: 64px; }
  .chamada h2 { font-size: min(56px, 12vw); }   /* "ESPERANDO" em 56px passava da borda no celular */
  .bt-janela { padding: 14px 20px; gap: 14px; } .bt-janela .txt b { font-size: 20px; }
  .cena canvas.palco { opacity: .5; }
  footer { padding-top: 96px; } footer .turma img { width: 64px; height: 64px; } footer .turma img:nth-child(n+6) { display: none; }
  footer .colunas { grid-template-columns: minmax(0, 1fr); padding: 40px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  body, .surge { animation: none; opacity: 1; } .lore .laminas img { animation: none; } .cena canvas.palco { display: none; }
}