/* Landing v2 do Hide & Troll: "uma rodada inteira, do dia à noite".
 * Desenho: maquetes do Codex por seção em assets/_source/concept/lote-landing-v2/ (s01…s12, p01, m01); cores amostradas com PIL.
 * Peças: kit "bronze fino" do jogo (assets/textures/ui, 9 fatias do pecas-ui.json) + peças novas do Codex (img/ui: placas,
 * selo, divisor, louros, losango, alça, escudo VS, pedestal, plaquinha, medalhões, régua). Nenhuma moldura desenhada em CSS
 * onde existe peça; CSS só posiciona, escreve o texto e anima.
 * 9 FATIAS: sempre border-width = largura visual da moldura (border-image-width fica no padrão 1). Sem isso a moldura
 *  invade o texto (10/10: "+2.048 de ouro" estourava a placa).
 *
 * ESCALA (lição do Mateus, 09/10: "cuidado pra não ficar tudo grande com zoom"):
 *  - conteúdo num miolo de até 1240 px (barra, topo e diorama até 1600 px); só cena de fundo vai de ponta a ponta;
 *  - toda fonte é clamp(mínimo em rem, rem + vw, máximo em rem) com teto (corpo 16–19 px);
 *  - nenhuma altura ou imagem cresce só com vw: sempre há um máximo em px.
 * TRANSIÇÕES: um fundo único que muda do dia para a noite ao longo da página (body); cada seção só tem uma cena com
 *  máscara nas pontas, que se sobrepõe às vizinhas, e névoa por cima das emendas. Nenhuma seção tem caixa.
 * RECORTES (lição do Mateus, cobrada de novo em 10/10): prédio/personagem recortado nunca direto sobre cena nítida:
 *  pedestal, sombra de contato, brilho atrás, cartão escuro ou cena escurecida atrás. E TEXTO/ÍCONE/PRINT também nunca
 *  vai direto na cena pintada: painel de vidro com moldura (.painel-elfo / .painel-troll), placa ou cartão do kit.
 * CASA NO PEDESTAL: o lote isométrico (losango) tem o centro em --cy % da altura do arquivo (medidas-losango.json);
 *  o pedestal alto (pedestal-alto.webp, Codex 10/10) tem a grama centrada em 37,5% da altura; o lote tem sempre 76% da
 *  largura do pedestal (ponta da frente dentro da grama em todos os níveis; a casa cresce para cima).
 * SAFARI: nada de filter:drop-shadow em <img> nem em texto com background-clip (pinta bloco preto no WebKit). */

@font-face{font-family:"Grenze Gotisch";src:url(fonts/grenze-gotisch-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Grenze Gotisch";src:url(fonts/grenze-gotisch-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Signika;src:url(fonts/signika-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Signika;src:url(fonts/signika-600.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  /* amostradas da maquete s01 (PIL) */
  --ouro:#f2d18f;            /* título: #f7dc99 no alto, #efc680 embaixo */
  --ouro-claro:#fbf0c4;
  --ouro-botao:#f7e27a;      /* texto da placa */
  --bronze:#e3b96f;          /* aro da placa */
  --bronze-fio:#9a7440;
  --texto:#ece8de;           /* #eae8e4 na maquete */
  --texto-2:#d6cdb9;
  --ok:#7ddf8c;
  --erro:#ff9b8a;
  /* raridades do jogo (src/client/ui/dados/raridade.json) */
  --r-comum:#a3a3a3;--r-incomum:#3ed160;--r-raro:#3d8dff;--r-epico:#b05cff;--r-lendario:#ff9a1f;

  --t-titulo:"Grenze Gotisch",Georgia,serif;
  --t-corpo:Signika,"Segoe UI",Roboto,Arial,sans-serif;

  --larg:1280px;
  --larg-topo:1600px;
  --gutter:clamp(16px,4vw,40px);
  --sec-pad:clamp(72px,5vw + 40px,128px);
  --fs-corpo:clamp(1rem,.95rem + .2vw,1.125rem);      /* 16 → 18 */
  --fs-lead:clamp(1.0625rem,.98rem + .3vw,1.1875rem);  /* 17 → 19 */
  --fs-peq:clamp(.875rem,.85rem + .1vw,.9375rem);      /* 14 → 15 */
  --fs-h1:clamp(2.625rem,1.2rem + 4.1vw,5.125rem);     /* 42 → 82; a altura também limita */
  --fs-h2:clamp(2.125rem,1.35rem + 2.3vw,3.5rem);      /* 34 → 56 */
  --fs-h3:clamp(1.375rem,1.1rem + .8vw,1.875rem);      /* 22 → 30 */
  --fs-nome:clamp(2.5rem,1.6rem + 2.6vw,4rem);         /* Elfo/Troll, Anjo/Lobo: 40 → 64 */
  --fs-btn:clamp(1.125rem,1rem + .35vw,1.375rem);      /* 18 → 22 */
  --saida:cubic-bezier(.22,1,.36,1);                   /* ease-out-quint */
  --sombra-texto:0 1px 2px rgba(0,0,0,.95),0 0 14px rgba(0,0,0,.7);
  --z-cena:0;--z-conteudo:2;--z-barra:40;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{
  margin:0;color:var(--texto);font:400 var(--fs-corpo)/1.6 var(--t-corpo);overflow-x:hidden;
  /* O FUNDO ÚNICO da página: uma rodada do dia à noite. As cenas das seções se fundem nele. */
  background:#090b16 linear-gradient(180deg,
    #15200f 0%, #1a2213 8%, #222114 17%, #2a1f13 26%, #321c12 34%, #2d1719 41%,
    #23162a 48%, #1a1731 55%, #121633 62%, #0e1229 72%, #0b0e1f 85%, #080a14 100%);
}
img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit}
a{color:var(--ouro)}
:focus-visible{outline:2px solid var(--ouro-claro);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{text-wrap:balance;margin:0}
p,li,dd,summary{text-wrap:pretty}
p{margin:0}
.nb{white-space:nowrap}
.pular{position:absolute;left:12px;top:-60px;z-index:100;background:#1d170f;color:var(--ouro);padding:10px 16px;border-radius:6px}
.pular:focus{top:12px}
.wrap{width:min(var(--larg),100% - 2*var(--gutter));margin-inline:auto;position:relative;z-index:var(--z-conteudo)}
.wrap--estreito{width:min(900px,100% - 2*var(--gutter))}
/* filhos de grade podem encolher (o padrão min-width:auto deixa a coluna crescer até o conteúdo mais largo) */
.loja-vitrine,.loja-grade > *,.build-grade > *,.link-grade > *,.hora-bloco > *{min-width:0}
/* peças em 9 fatias: a borda é sólida e transparente, a imagem pinta por cima */
.fatias{border-style:solid;border-color:transparent}
/* painéis de vidro do kit (78% opacos, escuros): o fundo de todo texto e ícone que fica sobre cena pintada */
.painel-elfo{border-style:solid;border-color:transparent;border-width:22px 20px 20px 25px;border-image:url(img/ui/painel_elfo_vidro.webp) 59 54 55 69 fill stretch}
.painel-troll{border-style:solid;border-color:transparent;border-width:22px 21px 21px 19px;border-image:url(img/ui/painel_troll_vidro.webp) 80 76 78 70 fill stretch}
/* cabeçalho em painel (cenas claras ou movimentadas): abraça título e apoio, só do tamanho do texto; os fios encurtam */
.sec-cabeca--painel{width:fit-content;max-width:min(100%,1140px);margin-inline:auto;padding:clamp(2px,.5vw,8px) clamp(10px,2.4vw,34px) clamp(8px,1vw,14px)}
/* título que não cabe numa linha nem a 1140 px (Anjo/Lobo): teto menor para o painel abraçar as 2 linhas em vez de ir de ponta a ponta */
.sec-cabeca--2l{max-width:min(100%,900px)}
/* fios de largura FIXA: com flex-shrink o Chromium subestima a largura intrínseca do h2 e o painel fit-content
   encolhia até quebrar o título em 2 linhas (sonda 10/10: h2 max-content = 482 px para um texto de 430 px + fios) */
.sec-cabeca--painel .h2--fios::before,.sec-cabeca--painel .h2--fios::after{flex:none;width:clamp(22px,5vw,84px)}
.sec-cabeca--painel .sec-apoio{margin-top:10px}
/* chão dos personagens recortados: pedestal de pedra atrás dos pés (sobe --chao-sobe para o pé cair no centro da grama)
   e sombra de contato por cima da grama; o halo escuro atrás é o ::before da figura */
.chao{position:relative;display:block;width:var(--chao-l,92%);margin:var(--chao-sobe,-16%) auto 0;z-index:0;pointer-events:none}
.chao img{width:100%}
.chao::after{content:"";position:absolute;left:12%;right:12%;top:16%;height:24%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.74),rgba(0,0,0,.36) 55%,transparent)}
.halo::before{content:"";position:absolute;inset:-6% -16% 2%;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side at 50% 44%,rgba(255,214,140,.2),transparent 58%),radial-gradient(closest-side,rgba(6,5,3,.88),rgba(6,5,3,.62) 52%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  -webkit-mask-image:radial-gradient(closest-side,#000 56%,transparent);mask-image:radial-gradient(closest-side,#000 56%,transparent)}

/* ===================== tipografia compartilhada ===================== */
.h1,.h2,.h3,.lado-nome{font-family:var(--t-titulo);font-weight:800;color:var(--ouro);letter-spacing:.005em}
.h1{font-size:min(var(--fs-h1),9.4vh + .5rem);line-height:1.02;
  text-shadow:0 2px 0 #6a4718,0 4px 2px rgba(0,0,0,.45),0 6px 22px rgba(0,0,0,.7)}
.h2{font-size:var(--fs-h2);line-height:1.06;text-align:center;text-shadow:0 2px 0 #5f3f15,0 3px 16px rgba(0,0,0,.85)}
.h3{font-size:var(--fs-h3);line-height:1.12;text-shadow:0 2px 0 #5f3f15,0 2px 12px rgba(0,0,0,.85)}
/* título com fios de bronze dos lados (maquetes): linha fina + losango na ponta de fora */
.h2--fios{display:flex;align-items:center;justify-content:center;gap:clamp(12px,2vw,28px)}
.h2--fios::before,.h2--fios::after{content:"";flex:0 1 clamp(28px,11vw,190px);height:14px;
  background:url(img/ui/losango.webp) no-repeat left center/14px 14px,
    linear-gradient(90deg,transparent,var(--bronze-fio) 18%,#e7c27d 85%,transparent) no-repeat 0 50%/100% 1.5px}
.h2--fios::after{transform:scaleX(-1)}
.sec-cabeca{text-align:center;margin-bottom:clamp(28px,3vw,48px)}
.sec-apoio{font-size:var(--fs-lead);color:var(--texto);max-width:64ch;margin:14px auto 0;text-shadow:var(--sombra-texto)}
.nota{display:flex;align-items:center;justify-content:center;gap:10px;width:fit-content;max-width:100%;margin:clamp(24px,2.4vw,40px) auto 0;
  padding:0 10px;color:var(--texto);font-size:var(--fs-peq);text-align:center;text-shadow:var(--sombra-texto);
  border-style:solid;border-color:transparent;border-width:12px 26px;border-image:url(img/ui/placa-pergunta.webp) 40 70 40 70 fill stretch}
.nota img{width:28px;height:28px;flex:none}

/* ===================== botões ===================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;background:none;
  text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent;position:relative;
  transition:transform .14s var(--saida),filter .2s ease}
/* placa de madeira com bronze (peça Codex k01) */
.btn--placa{border-style:solid;border-color:transparent;border-width:14px 36px;
  border-image:url(img/ui/placa-grande.webp) 36 96 36 96 fill stretch;
  font-family:var(--t-titulo);font-weight:600;color:var(--ouro-botao);letter-spacing:.01em;
  text-shadow:0 1px 0 #2a1405,0 0 12px rgba(0,0,0,.6)}
/* placa dourada (botão primário do jogo): a chamada mais forte, nas seções de noite */
.btn--ouro{border-width:16px 52px 8px 52px;border-image:url(img/ui/botao_primario_elfo.webp) 50 163 22 163 fill stretch;color:#2a1405;font-weight:800;
  text-shadow:0 1px 0 rgba(255,240,190,.55)}
.btn--grande{font-size:var(--fs-btn);min-height:64px;padding:0 18px 2px;min-width:min(330px,100%)}
.btn--ouro.btn--grande{padding:0 16px 2px;min-height:66px}
.btn--pequeno{font-size:1.0625rem;min-height:46px;padding:0 6px 2px;border-width:11px 26px}
.btn--largo{width:100%}
.btn:hover,.btn:focus-visible{filter:brightness(1.12) saturate(1.05) drop-shadow(0 0 12px rgba(255,200,110,.55))}
.btn:active{transform:translateY(1px) scale(.985);filter:brightness(.96)}
.btn[disabled]{cursor:wait;filter:grayscale(.3) brightness(.85)}
.link-seta{color:#ead58c;font-weight:600;text-decoration:none;border-bottom:1.5px solid rgba(234,213,140,.55);padding:2px 0;
  text-shadow:var(--sombra-texto);transition:color .2s ease,border-color .2s ease}
.link-seta::after{content:"";display:inline-block;width:.45em;height:.45em;margin-left:.55em;border:solid currentColor;
  border-width:2px 2px 0 0;transform:translateY(-.1em) rotate(45deg)}
.link-seta:hover{color:var(--ouro-claro);border-color:var(--ouro-claro)}

/* ===================== barra do topo (maquete s01) ===================== */
.barra{position:fixed;inset:0 0 auto;z-index:var(--z-barra);
  background:linear-gradient(180deg,rgba(28,24,19,.86),rgba(28,24,19,.7));
  -webkit-backdrop-filter:blur(10px) saturate(1.15);backdrop-filter:blur(10px) saturate(1.15);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.barra-miolo{width:min(var(--larg-topo),100% - 2*var(--gutter));margin-inline:auto;height:64px;display:flex;align-items:center;gap:24px}
.marca{position:relative;display:block;width:clamp(150px,13vw,212px);flex:none;align-self:flex-start;margin-top:4px;text-decoration:none}
/* o nome vai por código dentro da faixa escura do emblema (pecas-ui.json: caixaTitulo x0 .129 y0 .415 x1 .863 y1 .663) */
.marca-nome{position:absolute;left:12.9%;right:13.7%;top:41.5%;bottom:33.7%;display:flex;align-items:center;justify-content:center;
  font:800 clamp(.95rem,.6rem + .9vw,1.3rem)/1 var(--t-titulo);color:var(--ouro);text-shadow:0 1px 0 #3b2208,0 0 8px rgba(0,0,0,.8);white-space:nowrap}
.barra-nav{display:flex;gap:clamp(14px,2vw,34px);margin-inline:auto}
.barra-nav a{color:#ece6d4;text-decoration:none;font-weight:600;font-size:1rem;padding:8px 2px;border-bottom:1.5px solid transparent;transition:color .2s ease,border-color .2s ease}
.barra-nav a:hover,.barra-nav a[aria-current="true"]{color:var(--ouro-claro);border-bottom-color:var(--bronze)}
.barra .btn--pequeno{margin-left:auto}
.barra-nav ~ .btn--pequeno{margin-left:0}
.barra-hora{position:relative;height:2px;width:100%}
.barra-hora-trilho{position:absolute;inset:0;background:linear-gradient(90deg,rgba(227,185,111,.15),rgba(227,185,111,.65) 45%,rgba(150,160,230,.55))}
.barra-hora-astro{position:absolute;top:-11px;left:calc(var(--rodada,0) * (100% - 24px));width:24px;height:24px}
.barra-hora-astro img{position:absolute;inset:0;width:24px;height:24px;transition:opacity .4s ease}
.astro-lua{opacity:var(--noite,0)}
.astro-sol{opacity:calc(1 - var(--noite,0))}

/* ===================== seções e cenas (transição contínua) ===================== */
.sec{position:relative;isolation:isolate;padding-block:var(--sec-pad);overflow-x:clip}
.cena{position:absolute;inset:-12vh 0;z-index:var(--z-cena);pointer-events:none;
  background:var(--cena,none) center/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 80%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 80%,transparent 100%)}
/* a névoa passa por cima de cada emenda (peça Codex k03, já com transparência: modo de mistura não atravessa a seção isolada) */
.sec + .sec::before{--nevoa-h:clamp(180px,24vh,320px);content:"";position:absolute;left:0;right:0;top:0;height:var(--nevoa-h);transform:translateY(-50%);z-index:1;pointer-events:none;
  background:url(img/fx/nevoa.webp) repeat-x 0 50%/auto 100%;opacity:.3;animation:nevoa-corre 90s linear infinite;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 38%,#000 62%,transparent);mask-image:linear-gradient(180deg,transparent,#000 38%,#000 62%,transparent)}
/* a faixa da névoa tem 3:1 (2172x724): um ciclo anda exatamente uma faixa, então a volta não dá salto */
@keyframes nevoa-corre{from{background-position:0 50%}to{background-position:calc(var(--nevoa-h) * -3) 50%}}
:is(html:not(.js),.perto) .cena--rodada{--cena:url(img/cenas/f02_rodada-1672.webp)}
:is(html:not(.js),.perto) .cena--lados{--cena:url(img/cenas/f03_lados-1672.webp)}
:is(html:not(.js),.perto) .cena--troca{--cena:url(img/cenas/f04_troca-1672.webp)}
:is(html:not(.js),.perto) .cena--casa{--cena:url(img/cenas/f06_casa-1672.webp)}
:is(html:not(.js),.perto) .cena--defesa{--cena:url(img/cenas/f07_defesa-1672.webp)}
:is(html:not(.js),.perto) .cena--loja{--cena:url(img/cenas/f08_loja-1672.webp)}
:is(html:not(.js),.perto) .cena--build{--cena:url(img/cenas/f08b_build-1672.webp)}
:is(html:not(.js),.perto) .cena--link{--cena:url(img/cenas/f09_link-1672.webp)}
:is(html:not(.js),.perto) .cena--quando{--cena:url(img/cenas/f10_quando-1672.webp)}
:is(html:not(.js),.perto) .cena--perguntas{--cena:url(img/cenas/f11_perguntas-1672.webp)}
@media (max-width:900px){
  :is(html:not(.js),.perto) .cena--rodada{--cena:url(img/cenas/f02_rodada-900.webp)}:is(html:not(.js),.perto) .cena--lados{--cena:url(img/cenas/f03_lados-900.webp)}
  :is(html:not(.js),.perto) .cena--troca{--cena:url(img/cenas/f04_troca-900.webp)}:is(html:not(.js),.perto) .cena--casa{--cena:url(img/cenas/f06_casa-900.webp)}
  :is(html:not(.js),.perto) .cena--defesa{--cena:url(img/cenas/f07_defesa-900.webp)}:is(html:not(.js),.perto) .cena--loja{--cena:url(img/cenas/f08_loja-900.webp)}
  :is(html:not(.js),.perto) .cena--build{--cena:url(img/cenas/f08b_build-900.webp)}:is(html:not(.js),.perto) .cena--link{--cena:url(img/cenas/f09_link-900.webp)}
  :is(html:not(.js),.perto) .cena--quando{--cena:url(img/cenas/f10_quando-900.webp)}:is(html:not(.js),.perto) .cena--perguntas{--cena:url(img/cenas/f11_perguntas-900.webp)}
}
/* véu escuro no meio da cena: o texto lê bem e o recorte não se camufla na pintura */
.cena::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 62% 56% at 50% 52%,rgba(8,7,5,.5),rgba(8,7,5,.16) 70%,transparent)}

/* ===================== S1 · topo ===================== */
.topo{min-height:clamp(520px,100svh,1000px);padding:0;display:flex;align-items:center}
.topo-cena{position:absolute;inset:0 0 -12vh;z-index:var(--z-cena);overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 80%,transparent);mask-image:linear-gradient(180deg,#000 80%,transparent)}
.topo-arte{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%;
  transform-origin:65% 45%;animation:topo-respira 26s ease-in-out infinite alternate}
@keyframes topo-respira{from{transform:scale(1.02)}to{transform:scale(1.07) translate(-.6%,-.4%)}}
/* o 3º degradê é um véu local atrás do bloco de texto: a linha de apoio nunca cruza o porrete do Troll sem fundo escuro */
.topo-veu{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(ellipse 36% 24% at 19% 62%,rgba(12,9,5,.66),rgba(12,9,5,.34) 55%,transparent),
  linear-gradient(90deg,rgba(12,9,5,.82) 0%,rgba(12,9,5,.62) 26%,rgba(12,9,5,.18) 48%,transparent 62%),
  linear-gradient(180deg,rgba(10,8,5,.55) 0,transparent 14%,transparent 66%,rgba(14,18,10,.9) 100%)}
.topo-conteudo{position:relative;z-index:var(--z-conteudo);width:min(var(--larg-topo),100% - 2*var(--gutter));margin-inline:auto;
  padding:clamp(78px,13vh,150px) 0 clamp(40px,8vh,120px)}
.topo-conteudo > *{max-width:min(620px,100%)}
.selo{display:inline-flex;align-items:center;min-height:42px;padding:0 16px 1px 20px;margin-bottom:clamp(14px,2.2vh,24px);
  border-style:solid;border-color:transparent;border-width:11px 18px 11px 34px;border-image:url(img/ui/selo-verde.webp) 30 44 30 80 fill stretch;
  color:#efeedd;font-weight:600;font-size:clamp(.9375rem,.88rem + .2vw,1.0625rem);text-shadow:0 1px 2px rgba(0,0,0,.8)}
.h1{position:relative}
.h1 span{display:block}
.h1-louro{position:absolute;left:-.95em;top:26%;width:clamp(58px,4.6vw,84px);transform:rotate(-88deg) scaleY(-1);pointer-events:none}
/* o louro fica à esquerda do h1 (-.95em ≈ 78 px): só cabe na tela quando a margem do miolo de 1600 px passa disso, ou seja,
   de 1750 px para cima (estouro.mjs 10/10: em 1500 ele saía pela esquerda) */
@media (max-width:1749px) and (min-width:561px){.h1-louro{display:none}}
.h1-louro--dir{display:none}
/* 420 px: a linha termina antes do porrete do Troll da key art (bola de espinhos em x ≈ 31% da arte; em 1752 começa em x 540) */
.topo-apoio{margin-top:clamp(14px,2.4vh,26px);font-size:var(--fs-lead);line-height:1.55;color:var(--texto);text-shadow:var(--sombra-texto);max-width:min(420px,100%)}
@media (max-width:1500px) and (min-width:561px){.topo-apoio{max-width:min(380px,100%)}}
.topo-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px;margin-top:clamp(22px,3.6vh,38px)}
.fx{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.fx img{position:absolute;will-change:transform,opacity}
/* partículas de brilho já vêm com transparência na imagem (tools/landing-v2/particulas_alfa.py): sem modo de mistura */
.fx-vagalumes{top:auto;height:42%}

/* ===================== S2 · rodada ===================== */
/* os 4 momentos dentro de um painel de vidro (título e texto não ficam direto na floresta) */
.linha-tempo{list-style:none;margin:0;padding:clamp(10px,1.4vw,20px) clamp(6px,1.2vw,16px) clamp(12px,1.4vw,22px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.2vw,32px);position:relative}
.momento{position:relative;text-align:center;z-index:1}
.moldura-bronze{position:relative;margin:0;border-radius:6px;padding:4px;
  background:linear-gradient(160deg,#f3d48f,#9a6a2c 40%,#e9c27c 60%,#6e4719);box-shadow:0 10px 30px rgba(0,0,0,.55)}
.moldura-bronze img{border-radius:3px;width:100%;aspect-ratio:3/2;object-fit:cover}
.etiqueta{position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);width:max-content;min-width:96px;white-space:nowrap;
  padding:0 4px 1px;border-style:solid;border-color:transparent;border-width:9px 18px;
  border-image:url(img/ui/placa-pequena.webp) 34 70 34 70 fill stretch;
  font:600 1.0625rem/1.1 var(--t-titulo);color:var(--ouro-claro);text-shadow:0 1px 0 #2a1405}
.momento h3{margin-top:34px;font:600 var(--fs-h3)/1.15 var(--t-titulo);color:var(--ouro);text-shadow:0 2px 10px rgba(0,0,0,.85)}
.momento p{margin:8px auto 0;max-width:30ch;color:var(--texto);text-shadow:var(--sombra-texto)}
.hora-bloco{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(18px,2.4vw,34px);align-items:center;margin-top:clamp(56px,6vw,88px)}
.comparador{position:relative;aspect-ratio:1011/739;max-height:540px;width:100%;border-radius:8px;overflow:hidden;
  box-shadow:0 0 0 2px #b88b4a,0 0 0 4px #2a1a0b,0 18px 40px rgba(0,0,0,.6);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.comparador > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.comparador-noite{clip-path:inset(0 0 0 var(--corte));-webkit-clip-path:inset(0 0 0 var(--corte))}
.comparador-alca{position:absolute;top:0;bottom:0;left:var(--corte);width:0;pointer-events:none}
.comparador-linha{position:absolute;top:0;bottom:0;left:-1.5px;width:3px;background:linear-gradient(180deg,#f6dc9c,#b07e3c);box-shadow:0 0 12px rgba(255,210,130,.6)}
.comparador-alca img{position:absolute;top:50%;left:0;width:70px;height:auto;transform:translate(-50%,-50%)}
.comparador-faixa{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.comparador:focus-within{box-shadow:0 0 0 2px var(--ouro-claro),0 0 0 4px #2a1a0b,0 18px 40px rgba(0,0,0,.6)}
.comparador-rotulo{position:absolute;top:12px;display:flex;align-items:center;gap:6px;padding:4px 12px;border-radius:6px;background:rgba(10,8,5,.62);
  font-weight:600;font-size:.875rem;color:#f3ead2;pointer-events:none}
.comparador-rotulo img{width:20px;height:20px;flex:none}
.comparador-rotulo--dia{left:12px}.comparador-rotulo--noite{right:12px}
.hora-painel{position:relative;padding:clamp(6px,1vw + 2px,20px);text-align:center;
  border-style:solid;border-color:transparent;border-width:22px 20px 20px 25px;border-image:url(img/ui/painel_elfo_vidro.webp) 59 54 55 69 fill stretch}
.hora-divisor{width:min(260px,80%);margin:10px auto 14px}
.hora-painel p{color:var(--texto);text-shadow:var(--sombra-texto)}
.dica-arraste{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px!important;color:var(--ouro)!important;font-weight:600}
.dica-arraste img{width:26px;height:26px}

/* ===================== S3 · lados (maquete s03) ===================== */
/* personagem (fora do painel, no pedestal, com halo escuro atrás) + painel de vidro com nome, texto e poderes.
   A figura passa do miolo para a margem da página (--sobra), como na maquete */
.lados-grade{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(4px,1vw,16px);align-items:stretch}
.lado{position:relative;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-areas:"heroi painel";gap:4px clamp(10px,1.4vw,20px);align-items:end}
.lado--troll{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);grid-template-areas:"painel heroi"}
.lado-figura{grid-area:heroi;position:relative;margin:0;z-index:0;display:grid;justify-items:center;
  --sobra:min(46%, max(0px, (100vw - min(var(--larg), 100vw - 2 * var(--gutter))) / 2 - 6px));width:calc(100% + var(--sobra))}
.lado--elfo .lado-figura{justify-self:end}
.lado--troll .lado-figura{justify-self:start}
.lado--troll .lado-figura::before{background:radial-gradient(closest-side at 50% 44%,rgba(255,170,110,.18),transparent 58%),radial-gradient(closest-side,rgba(6,5,3,.88),rgba(6,5,3,.62) 52%,transparent)}
.lado-heroi{width:100%;max-width:470px;position:relative;z-index:1}
/* os dois painéis (Elfo e Troll) esticam até a altura do lado mais alto: mesmo topo e mesma base */
.lado-painel{grid-area:painel;align-self:stretch;display:grid;grid-template-areas:"texto" "poderes";align-content:start;gap:4px;min-width:0;
  padding:clamp(6px,.8vw,12px) clamp(6px,1vw,14px) clamp(8px,1vw,14px)}
.lado-texto{grid-area:texto;position:relative;z-index:1}
.lado-nome{font-size:var(--fs-nome);line-height:1;text-shadow:0 2px 0 #5f3f15,0 3px 16px rgba(0,0,0,.85)}
.lado-fio{width:min(230px,80%);margin:8px 0 12px}
.lado-texto p,.volta p{color:var(--texto);text-shadow:var(--sombra-texto);max-width:34ch}
.lados-vs{width:clamp(96px,8.6vw,150px);align-self:center}
.poderes{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px 8px}
.lado .poderes{grid-area:poderes}
.poder{position:relative;display:grid;justify-items:center;align-content:start;gap:6px;text-align:center;cursor:help;border-radius:8px;padding:4px;outline-offset:2px}
.poder img{width:clamp(56px,5vw,80px);height:auto;transition:transform .2s var(--saida)}
.poder:hover img,.poder:focus-visible img,.poder.aberto img{transform:translateY(-3px) scale(1.06)}
.poder-nome{font-weight:600;font-size:var(--fs-peq);color:#f1ead8;text-shadow:var(--sombra-texto);line-height:1.2}
/* a dica só existe quando aberta (display): escondida por opacidade ela ainda alargaria a página no celular */
.poder-dica{display:none;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);width:max-content;max-width:min(220px,70vw);
  padding:0 3px;border-style:solid;border-color:transparent;border-width:12px 11px 12px 14px;border-image:url(img/ui/dica_elfo_vidro.webp) 48 44 47 54 fill stretch;
  color:var(--texto);font-size:.9375rem;line-height:1.35;pointer-events:none;z-index:5;animation:dica-entra .18s var(--saida)}
.poder:nth-child(3n+1) .poder-dica{left:0;transform:none}
.poder:nth-child(3n) .poder-dica{left:auto;right:0;transform:none}
.poder:hover .poder-dica,.poder:focus-visible .poder-dica,.poder.aberto .poder-dica{display:block}
@keyframes dica-entra{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
/* magia na mão da Elfa (partícula do jogo, modo tela) */
.magia{position:absolute;width:30%;aspect-ratio:1;pointer-events:none;animation:magia-pulsa 2.4s ease-in-out infinite}
.magia img{width:100%;height:100%}
.lado--elfo .magia{right:-8%;top:22%}
@keyframes magia-pulsa{50%{transform:scale(1.18) rotate(12deg);opacity:.75}}

/* ===================== S4 · troca (maquete s04) ===================== */
/* Anjo e Lobo em painéis (Elfo e Troll); a ilustração do centro com o aro de bronze das outras ilustrações, sem máscara */
.troca-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr);gap:clamp(12px,2vw,28px);align-items:stretch}
.troca-arte{margin:0;align-self:center;border-radius:8px;overflow:hidden;box-shadow:0 0 0 2px #b88b4a,0 0 0 4px #2a1a0b,0 18px 40px rgba(0,0,0,.6)}
.troca-arte img{width:100%}
.volta{display:grid;justify-items:start;align-content:center;gap:4px;padding:clamp(6px,.8vw,12px) clamp(6px,1vw,14px) clamp(8px,1vw,14px)}
.volta--lobo{justify-items:end;text-align:right}
.volta--lobo .lado-fio{transform:scaleX(-1)}
.volta--lobo p{margin-left:auto}
.volta-papel{font:600 1.5rem/1.2 var(--t-titulo);color:var(--ouro-claro);margin-bottom:6px;text-shadow:var(--sombra-texto)}
.volta .poderes{width:100%;max-width:330px;margin-top:14px}
.volta--lobo .poderes{margin-left:auto}

/* ===================== S5 · economia (maquete s05: diorama com texto por cima) ===================== */
.economia{padding-block:clamp(40px,4vw,72px)}
/* a mesma cena, desfocada e escura, de ponta a ponta atrás do diorama: as laterais continuam a pintura em vez de virar moldura */
:is(html:not(.js),.perto).economia::after{background-image:url(img/cenas/f05_economia-900.webp)}
.economia::after{content:"";position:absolute;inset:-6vh 0;z-index:-1;pointer-events:none;background:center/cover no-repeat;
  filter:blur(26px) brightness(.42) saturate(1.15);-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)}
.eco-palco{position:relative;width:min(1600px,100%);margin:0 auto;aspect-ratio:1672/941;max-height:900px}
.eco-diorama{position:absolute;inset:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}
.eco-arte{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.eco-camada{position:absolute;inset:0;pointer-events:none}
.eco-cabeca{margin-bottom:clamp(18px,2.4vw,32px)}
.eco-blocos{list-style:none;margin:0;padding:0;position:absolute;inset:0;pointer-events:none;z-index:2}
/* cada bloco é um painel de vidro (fundo escuro com moldura) nas faixas vazias da cena (≥ 1500 px; abaixo, empilhados):
   topo-esquerda e topo-centro (céu e copa), meio-direita abaixo da casa (lampião), pé-centro (chão escuro).
   Folgas entre painéis ≥ 20 px em 1500 e ≥ 44 px em 1600+ (largura do painel = 340 px) */
.eco-bloco{position:absolute;pointer-events:auto;width:min(340px,23%);padding:2px 8px 8px 10px;text-shadow:var(--sombra-texto)}
.eco-bloco h3{font:800 clamp(1.5rem,1rem + 1.2vw,2.125rem)/1.05 var(--t-titulo);color:var(--ouro);text-shadow:0 2px 0 #5f3f15,0 3px 14px rgba(0,0,0,.9)}
.eco-bloco .eco-fio{width:min(210px,92%);margin:6px 0}
.eco-sub{font:600 1.25rem/1.2 var(--t-titulo);color:var(--ouro-claro)}
.eco-bloco p:last-child{margin-top:6px;color:#f6f1e6;font-size:var(--fs-peq);line-height:1.45}
.eco-bloco--lenhador{left:3%;top:3%}
.eco-bloco--minas{left:27%;top:3%}
.eco-bloco--casa{right:3%;top:49%}
.eco-bloco--mercado{right:27%;top:73%}
.eco-contadores{position:absolute;left:3%;bottom:4%;display:flex;gap:14px;flex-wrap:wrap;z-index:2}
.contador{display:flex;align-items:center;gap:10px;padding:0 4px 0 0;
  border-style:solid;border-color:transparent;border-width:12px 26px;border-image:url(img/ui/placa-pequena.webp) 34 70 34 70 fill stretch;font-size:var(--fs-peq);color:#f3ead2}
.contador img{width:52px;height:52px;flex:none;margin:-10px 0 -10px -20px}
.contador b{font:800 clamp(1.5rem,1.1rem + 1vw,2.125rem)/1 var(--t-titulo);color:var(--ouro);letter-spacing:.01em;display:inline-block}
.contador--madeira b{color:#efc58f}
.contador{position:relative}
.contador b.pulsa{animation:conta-pulsa .5s var(--saida)}
.tique{position:absolute;left:50%;top:-6px;font:800 1.25rem/1 var(--t-titulo);color:var(--ouro-claro);text-shadow:0 2px 6px rgba(0,0,0,.9);pointer-events:none;white-space:nowrap}
.tique--madeira{color:#f3cf9c}
@keyframes conta-pulsa{40%{transform:scale(1.12);color:#fff3c4}}
.eco-pe{margin-top:clamp(16px,1.8vw,26px)}
/* espíritos andando pelo caminho (peça Codex k04, 4 quadros) */
.espirito-anda{position:absolute;width:clamp(56px,6vw,96px);aspect-ratio:1;background:url(img/fx/espirito-anda.webp) 0 0/400% 100% no-repeat;
  animation:anda-quadros .6s steps(4) infinite,anda-caminho var(--dur,14s) linear infinite;animation-delay:0s,var(--atraso,0s)}
@keyframes anda-quadros{to{background-position:133.333% 0}}
@keyframes anda-caminho{0%{offset-distance:0%;opacity:0}6%{opacity:1}94%{opacity:1}100%{offset-distance:100%;opacity:0}}
.eco-faisca{position:absolute;width:30px;height:30px;pointer-events:none}

/* ===================== S6 · a casa (maquete s06) ===================== */
.casa-seletor{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-areas:"palco info" "regua regua";gap:10px clamp(20px,3vw,56px);align-items:center}
/* palco: o pedestal fica no fluxo (a altura do chão vem dele) e a casa é posicionada em % DO PEDESTAL: centro do losango
   (--cy % da altura do arquivo) sobre o centro da grama (37,5% da altura do pedestal), largura do lote = 76% do pedestal.
   O padding-top reserva o que o nível mais alto (9, 900x1068) passa acima do pedestal: 0,363 da largura dele */
.casa-palco{grid-area:palco;position:relative;margin:0;display:grid;justify-items:center;align-content:end;padding-top:min(168px,35%)}
.casa-palco::before{content:"";position:absolute;left:10%;right:10%;top:0;bottom:28%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,200,120,.28),rgba(255,170,90,.08) 60%,transparent)}
.casa-chao{position:relative;display:block;width:min(460px,96%)}
.casa-pedestal,.marco-pedestal{width:100%;display:block}
.casa-img,.marco-casa{position:absolute;left:50%;top:37.5%;width:76%;max-width:none;height:auto;transform:translate(-50%,calc(var(--cy,72.75) * -1%))}
.casa-img{transition:opacity .22s ease,transform .3s var(--saida)}
.casa-img.troca{opacity:0;transform:translate(-50%,calc(var(--cy,72.75) * -1%)) translateY(8px) scale(.97)}
.casa-info{grid-area:info;display:grid;gap:14px;justify-items:start}
.casa-nivel{display:inline-flex;align-items:center;justify-content:center;min-height:76px;padding:0 20px 2px;
  border-style:solid;border-color:transparent;border-width:16px 34px;border-image:url(img/ui/plaquinha.webp) 40 80 40 80 fill stretch;
  font:800 clamp(2rem,1.4rem + 1.6vw,3rem)/1 var(--t-titulo);color:var(--ouro);text-shadow:0 2px 0 #5f3f15,0 3px 14px rgba(0,0,0,.8)}
.casa-dados{margin:0;display:grid;gap:12px;width:min(470px,100%)}
.casa-dado{position:relative;display:block;padding:0 4px 0 62px;min-height:52px;
  border-style:solid;border-color:transparent;border-width:12px 24px;border-image:url(img/ui/placa-pergunta.webp) 40 70 40 70 fill stretch}
.casa-dado::before{content:"";position:absolute;left:-14px;top:50%;width:66px;height:66px;transform:translateY(-50%);background:center/contain no-repeat}
.casa-dado--renda::before{background-image:url(img/ui/medalhao-moeda.webp)}
.casa-dado--custo::before{background-image:url(img/ui/medalhao-toras.webp)}
.casa-dado dt{font:800 1.5rem/1 var(--t-titulo);color:var(--ouro)}
.casa-dado dd{margin:4px 0 0;font-size:var(--fs-lead);color:#f6efdc}
/* a régua (trilho e números) numa faixa de vidro: os números não ficam direto na cena */
.casa-regua{grid-area:regua;position:relative;--pad:14px;padding:var(--pad) 12px 6px;margin-top:4px}
.regua-trilho{position:relative;height:30px;margin:0 15px}
.regua-trilho::before{content:"";position:absolute;left:0;right:0;top:50%;height:4px;transform:translateY(-50%);border-radius:3px;
  background:linear-gradient(180deg,#f6dc9c,#b07e3c);box-shadow:0 0 10px rgba(255,200,110,.35)}
.regua-ponto{position:absolute;top:50%;width:18px;height:18px;transform:translate(-50%,-50%);background:url(img/ui/regua-ponto.webp) center/contain no-repeat}
.regua-orbe{position:absolute;top:50%;width:46px;height:46px;transform:translate(-50%,-50%);background:url(img/ui/regua-orbe.webp) center/contain no-repeat;
  transition:left .25s var(--saida);pointer-events:none;animation:orbe-brilha 2.4s ease-in-out infinite}
@keyframes orbe-brilha{50%{filter:brightness(1.25)}}
.casa-regua input{position:absolute;left:0;right:0;top:var(--pad);width:100%;height:30px;margin:0;opacity:0;cursor:pointer;z-index:1}
.casa-regua input:focus-visible + .regua-trilho{outline:2px solid var(--ouro-claro);outline-offset:6px;border-radius:8px}
.casa-numeros{list-style:none;margin:6px 15px 0;padding:0;position:relative;height:28px;font:800 1.25rem/1 var(--t-titulo);color:#f1e3c2}
.casa-numeros li{position:absolute;transform:translateX(-50%);text-shadow:var(--sombra-texto);transition:transform .2s var(--saida),color .2s ease}
.casa-numeros li.atual{color:var(--ouro);transform:translateX(-50%) scale(1.22)}
/* marcos: cada um num cartão escuro do kit (ferro; o nível ativo usa o cartão dourado aceso), casa no mesmo pedestal alto */
.casa-marcos{list-style:none;margin:clamp(22px,3vw,40px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,2vw,24px);align-items:stretch}
.casa-marcos li{display:grid}
.casa-marcos button{position:relative;width:100%;display:grid;justify-items:center;align-content:start;gap:4px;padding:0 0 2px;cursor:pointer;background:none;
  border-style:solid;border-color:transparent;border-width:34px;border-image:url(img/ui/cartao_papel_troll.webp) 76 fill stretch;
  transition:transform .18s var(--saida),filter .2s ease}
.casa-marcos button[aria-pressed="true"]{border-image-source:url(img/ui/cartao_papel_elfo_sel.webp)}
.marco-palco{position:relative;display:grid;justify-items:center;align-content:end;width:100%;padding-top:min(64px,26%)}
.marco-palco .casa-chao{width:82%}
.casa-marcos button:hover{transform:translateY(-4px);filter:brightness(1.12)}
.casa-marcos button[aria-pressed="true"] .marco-nome{filter:brightness(1.25) drop-shadow(0 0 8px rgba(255,200,110,.45))}
.marco-nome{display:inline-block;margin-top:2px;padding:0 6px 2px;position:relative;z-index:2;max-width:100%;
  border-style:solid;border-color:transparent;border-width:10px 22px;border-image:url(img/ui/plaquinha.webp) 40 80 40 80 fill stretch;
  font:800 1.25rem/1.1 var(--t-titulo);color:var(--ouro);white-space:nowrap}
.marco-renda{font-size:var(--fs-peq);color:#f1ead8;text-shadow:var(--sombra-texto)}

/* ===================== S7 · defesa (maquete s07) ===================== */
.defesa-grupos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.18fr);gap:clamp(14px,2vw,28px);align-items:stretch}
.grupo{display:flex;flex-direction:column;padding:clamp(4px,1vw,16px);text-align:center;
  border-style:solid;border-color:transparent;border-width:22px 21px 21px 19px;border-image:url(img/ui/painel_troll_vidro.webp) 80 76 78 70 fill stretch}
.grupo .h3{font-size:clamp(1.75rem,1.2rem + 1.4vw,2.625rem)}
.grupo > p{color:var(--texto);margin:10px auto 18px;max-width:46ch;text-shadow:var(--sombra-texto)}
.muro-etapas{list-style:none;margin:auto 0;padding:0;display:grid;grid-template-columns:1fr 22px 1fr 22px 1fr;align-items:center;gap:4px}
.muro-etapa{display:grid;justify-items:center;gap:6px}
.muro-seta-li{display:grid;place-items:center;align-self:start;height:clamp(170px,15vw,240px)}
.muro-seta-li::before{content:"";width:12px;height:12px;border:solid var(--bronze);border-width:3px 3px 0 0;transform:rotate(45deg);filter:drop-shadow(0 0 4px rgba(0,0,0,.8))}
.etapa-palco{position:relative;display:block;width:100%;height:clamp(170px,15vw,240px)}
.etapa-palco::after{content:"";position:absolute;left:14%;right:14%;bottom:2%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.7),transparent)}
.etapa-pedestal{display:none}
.etapa-predio{position:absolute;left:50%;bottom:4%;height:90%;width:auto;max-width:96%;object-fit:contain;transform:translateX(-50%);z-index:1}
.etapa-nivel{display:grid;gap:6px;justify-items:center;padding:0 2px 2px;min-width:86%;
  border-style:solid;border-color:transparent;border-width:10px 16px;border-image:url(img/ui/placa-pergunta.webp) 40 70 40 70 fill stretch}
.etapa-nivel b{font:800 1.5rem/1 var(--t-titulo);color:var(--ouro)}
.vida{display:block;width:100%;height:10px;border-radius:5px;background:#1c140d;box-shadow:inset 0 0 0 1px #8a5d2c;overflow:hidden}
.vida i{display:block;height:100%;width:0;background:linear-gradient(180deg,#8bf07a,#2fae3e);transition:width 1s var(--saida)}
.muro-etapa.cheia .vida i{width:var(--v)}
.etapa-nome{font:800 1.375rem/1.1 var(--t-titulo);color:var(--ouro-claro);text-shadow:var(--sombra-texto)}
.muro-etapa.acesa .etapa-predio{animation:sobe-nivel .7s var(--saida)}
@keyframes sobe-nivel{30%{transform:translateX(-50%) translateY(-8px) scale(1.04);filter:brightness(1.35)}}
.torres{list-style:none;margin:auto 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1vw,14px);text-align:center}
.torre{display:grid;justify-items:center;align-content:start;gap:6px}
.torre h4{display:inline-block;padding:0 4px 1px;margin-top:-4px;position:relative;z-index:2;
  border-style:solid;border-color:transparent;border-width:9px 18px;border-image:url(img/ui/plaquinha.webp) 40 80 40 80 fill stretch;
  font:800 1.3rem/1.1 var(--t-titulo);color:var(--ouro);white-space:nowrap}
.torre-icone{width:48px;height:48px;animation:icone-flutua 3s ease-in-out infinite}
.torre:nth-child(2) .torre-icone{animation-delay:-.7s}.torre:nth-child(3) .torre-icone{animation-delay:-1.4s}.torre:nth-child(4) .torre-icone{animation-delay:-2.1s}
@keyframes icone-flutua{50%{transform:translateY(-4px)}}
.torre p{font-size:var(--fs-peq);color:var(--texto);line-height:1.4;text-shadow:var(--sombra-texto)}
.torres-extra{margin-top:16px;color:var(--texto-2);font-size:var(--fs-peq)}

/* ===================== S8 · loja (maquete s08) ===================== */
/* a ilustração do golpe tem a altura da vitrine (imagem absoluta, cover): as duas colunas terminam juntas */
.loja-grade{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.55fr);gap:clamp(18px,2.6vw,40px);align-items:stretch}
.golpe{position:relative;margin:0;min-height:420px;border-radius:8px;overflow:hidden;box-shadow:0 0 0 2px #b88b4a,0 0 0 4px #2a1a0b,0 18px 40px rgba(0,0,0,.6)}
/* só a ilustração (filho direto): ".golpe img" pegava também o ícone da placa e as moedas que saltam (10/10: o ícone cobria o "+") */
.golpe > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 50%}
.golpe-moedas{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.golpe-moedas img{position:absolute;width:32px;height:32px}
.golpe-conta{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);width:max-content;display:flex;align-items:center;gap:8px;padding:0 4px 0 0;white-space:nowrap;
  border-style:solid;border-color:transparent;border-width:12px 26px;border-image:url(img/ui/placa-pequena.webp) 34 70 34 70 fill stretch;font-weight:600;color:#f3ead2}
.golpe-conta img{width:46px;height:46px;margin:-10px 0 -10px -20px}
.golpe-conta b{font:800 clamp(1.6rem,1.2rem + 1vw,2.25rem)/1 var(--t-titulo);color:var(--ouro)}
/* a vitrine: abas, legenda e itens num painel de ferro; o detalhe é outro painel de altura fixa; a legenda das raridades numa placa */
.loja-prateleira{padding:clamp(6px,.8vw,12px) clamp(4px,.8vw,10px) clamp(10px,1vw,14px)}
.loja-abas{display:flex;flex-wrap:wrap;gap:8px}
.loja-aba{display:inline-flex;align-items:center;gap:8px;padding:0 2px 2px 0;cursor:pointer;background:none;color:#eadfc6;font:600 1.0625rem/1.1 var(--t-titulo);
  border-style:solid;border-color:transparent;border-width:10px 16px;border-image:url(img/ui/placa-pergunta.webp) 40 70 40 70 fill stretch;transition:filter .2s ease}
.loja-aba img{width:32px;height:32px;margin-left:-6px}
.loja-aba:hover{filter:brightness(1.18)}
.loja-aba[aria-selected="true"]{color:var(--ouro-claro);filter:brightness(1.25) drop-shadow(0 0 10px rgba(255,190,90,.45))}
.loja-legenda{margin:12px 0 16px;color:var(--texto-2);font-size:var(--fs-peq)}
/* a escada fecha as linhas: o JS diz quantas colunas (--cols) e a última linha fica centralizada */
.loja-escada{--gap-esc:10px;display:flex;flex-wrap:wrap;justify-content:center;gap:14px var(--gap-esc)}
.loja-escada .item{flex:0 0 calc((100% - (var(--cols,6) - 1) * var(--gap-esc)) / var(--cols,6))}
/* item: ícone do jogo sobre o fundo escuro da raridade, com a moldura ornamentada por cima */
.item{position:relative;display:grid;justify-items:center;align-content:start;gap:6px;text-align:center;padding:2px;border:0;background:none;color:inherit;
  border-radius:10px;cursor:pointer;outline-offset:3px;-webkit-tap-highlight-color:transparent}
.item-icone{position:relative;width:clamp(74px,6.6vw,104px);aspect-ratio:1;display:grid;place-items:center;
  background:var(--fundo-r) center/88% no-repeat;transition:transform .18s var(--saida),filter .2s ease}
.item-icone::after{content:"";position:absolute;inset:0;background:var(--moldura-r) center/100% 100% no-repeat;pointer-events:none}
.item-icone img{width:74%;height:74%;object-fit:contain;position:relative}
.item:hover .item-icone,.item:focus-visible .item-icone{transform:translateY(-3px);filter:brightness(1.12)}
.item[aria-pressed="true"] .item-icone{transform:translateY(-3px);filter:brightness(1.18) drop-shadow(0 0 10px var(--cor-r))}
.item--epico .item-icone,.item--lendario .item-icone{animation:brilho-raro 2.8s ease-in-out infinite}
@keyframes brilho-raro{50%{filter:drop-shadow(0 0 9px var(--cor-r))}}
/* nome do item com 2 linhas reservadas: toda aba tem a mesma altura (nomes de 2 linhas não empurram nada) */
.item-nome{font-weight:600;font-size:.8125rem;line-height:1.2;min-height:2.4em;color:#efe6d0;text-shadow:var(--sombra-texto)}
.loja-escada.entra .item{animation:item-entra .42s var(--saida) both;animation-delay:calc(var(--k,0) * 35ms)}
@keyframes item-entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* detalhe: altura FIXA em qualquer largura. O fantasma (item sintético com o nome e o efeito mais longos da loja, invisível)
   ocupa a mesma célula da grade que o item vivo: a altura do painel é sempre a do fantasma, e a seção nunca pula (10/10:
   pulava 44 px entre itens e o cenário dava zoom junto) */
.item-detalhe{display:grid;margin-top:14px;padding:2px 6px}
.item-detalhe > *{grid-area:1/1;display:flex;align-items:center;gap:18px;min-width:0}
.detalhe-fantasma{visibility:hidden}
.item-icone--grande{width:96px;flex:none}
.detalhe-nome{font:800 1.25rem/1.1 var(--t-titulo);color:var(--cor-r)}
.detalhe-raridade{font-weight:600;font-size:.875rem;color:var(--cor-r);margin:2px 0 4px}
.detalhe-efeito{color:var(--texto);font-size:1rem;line-height:1.45}
.detalhe-preco{display:flex;align-items:center;gap:6px;margin-top:5px;color:var(--ouro);font-weight:600;font-size:1rem}
.detalhe-preco img{width:22px;height:22px}
.raridades{list-style:none;margin:14px auto 0;padding:0 12px 2px;width:fit-content;max-width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;
  border-style:solid;border-color:transparent;border-width:12px 26px;border-image:url(img/ui/placa-pergunta.webp) 40 70 40 70 fill stretch}
.raridades li{display:flex;align-items:center;gap:8px;font:600 1.0625rem/1 var(--t-titulo)}
.raridades li::before{content:"";width:26px;height:26px;background:var(--m) center/contain no-repeat}
.r-comum{--m:url(img/ui/moldura-comum.webp)}.r-incomum{--m:url(img/ui/moldura-incomum.webp)}.r-raro{--m:url(img/ui/moldura-raro.webp)}
.r-epico{--m:url(img/ui/moldura-epico.webp)}.r-lendario{--m:url(img/ui/moldura-lendario.webp)}

/* ===================== S8b · monte o seu Troll (maquete s08b) ===================== */
.build-grade{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr) minmax(0,.9fr);gap:clamp(16px,2.4vw,36px);align-items:center}
.build-escolha{display:grid;gap:14px}
.build-opcao{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;text-align:left;padding:0 6px;cursor:pointer;background:none;
  border-style:solid;border-color:transparent;border-width:16px 15px 15px 14px;border-image:url(img/ui/painel_troll_vidro.webp) 80 76 78 70 fill stretch;transition:filter .2s ease,transform .15s var(--saida)}
.build-opcao img{grid-row:1/3;width:46px;height:46px}
.build-opcao b{font:800 1.625rem/1.05 var(--t-titulo);color:var(--ouro)}
.build-opcao span{color:var(--texto-2);font-size:var(--fs-peq)}
.build-opcao:hover{filter:brightness(1.15)}
.build-opcao[aria-checked="true"]{filter:brightness(1.3) drop-shadow(0 0 12px rgba(255,190,90,.45))}
/* o Troll de frente no pedestal, com halo escuro atrás (mesmo chão dos personagens da seção 3) */
.build-troll{--esp:clamp(100px,8vw,124px);position:relative;margin:0;display:grid;justify-items:center;align-content:end;min-height:clamp(460px,38vw,600px)}
/* o palco do Troll nunca entra nas colunas dos itens (--esp de cada lado + 12 px de folga): as mãos não cobrem moldura */
.build-palco{position:relative;display:grid;justify-items:center;width:min(380px,calc(100% - 2 * var(--esp) - 12px))}
.build-palco .chao{--chao-l:100%;--chao-sobe:-15%}
.build-heroi{width:100%;position:relative;z-index:1}
.build-espacos{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.build-espacos li{position:absolute;display:grid;justify-items:center;width:var(--esp)}
.build-espacos li:nth-child(1){left:0;top:2%}.build-espacos li:nth-child(2){left:0;top:35%}.build-espacos li:nth-child(3){left:0;top:68%}
.build-espacos li:nth-child(4){right:0;top:2%}.build-espacos li:nth-child(5){right:0;top:35%}.build-espacos li:nth-child(6){right:0;top:68%}
.build-espacos .item-icone{width:clamp(84px,7vw,110px)}
.build-espacos .item-nome{padding:0 0 1px;white-space:nowrap;font:600 .9375rem/1.1 var(--t-titulo);color:var(--ouro-claro);
  border-style:solid;border-color:transparent;border-width:8px 14px;border-image:url(img/ui/plaquinha.webp) 40 80 40 80 fill stretch}
.build-espacos.entra li{animation:espaco-entra .45s var(--saida) both;animation-delay:calc(var(--i) * 70ms)}
@keyframes espaco-entra{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
.build-barras{padding:clamp(4px,.6vw,12px);border-style:solid;border-color:transparent;border-width:18px 17px 17px 16px;border-image:url(img/ui/painel_troll_vidro.webp) 80 76 78 70 fill stretch}
.barras{display:grid;gap:16px}
.barra-attr{display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center}
.barra-attr img{grid-row:1/3;width:40px;height:40px}
.barra-attr span{font:600 1.25rem/1.1 var(--t-titulo);color:#f3ead2}
.barra-attr i{height:14px;border-radius:7px;background:#20160e;box-shadow:inset 0 0 0 1px #7b5226;overflow:hidden;position:relative}
.barra-attr i::after{content:"";position:absolute;inset:0;width:var(--v,0%);background:linear-gradient(180deg,#ffe08a,#c98a2e);transition:width .7s var(--saida)}
.build-frase{margin-top:18px;padding-top:14px;border-top:1px solid rgba(227,185,111,.3);color:var(--texto)}
.tomos{display:flex;align-items:center;gap:18px;margin:clamp(28px,3vw,44px) auto 0;max-width:900px;padding:0 8px 0 0;
  border-style:solid;border-color:transparent;border-width:14px 26px;border-image:url(img/ui/placa-pergunta.webp) 40 70 40 70 fill stretch}
.tomos img{width:78px;height:78px;flex:none;margin:-14px 0 -14px -8px;animation:tomo-brilha 3s ease-in-out infinite}
@keyframes tomo-brilha{50%{transform:translateY(-3px) rotate(-3deg);filter:brightness(1.2)}}
.tomos p{color:var(--texto)}

/* ===================== S9 · link (maquete s09) ===================== */
.link-grade{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(18px,3vw,44px);align-items:center}
.navegador{margin:0;border-radius:10px;overflow:hidden;background:#15120e;box-shadow:0 0 0 1.5px #8a6a3e,0 22px 50px rgba(0,0,0,.65)}
.navegador-barra{display:flex;align-items:center;gap:8px;height:34px;padding:0 12px;background:linear-gradient(180deg,#2a241c,#1d1913)}
.navegador-barra i{width:11px;height:11px;border-radius:50%;background:#e0574f}
.navegador-barra i:nth-child(2){background:#e5b13d}.navegador-barra i:nth-child(3){background:#58b85a}
.navegador-barra span{margin-left:14px;flex:1;height:20px;border-radius:10px;background:#120f0b;box-shadow:inset 0 0 0 1px #3a3026}
.passos{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.passos li{display:flex;gap:16px;align-items:center;padding:0 4px 0 0;
  border-style:solid;border-color:transparent;border-width:12px 24px;border-image:url(img/ui/placa-pergunta.webp) 40 70 40 70 fill stretch}
.passo-num{position:relative;flex:none;width:76px;height:76px;margin:-6px 0 -6px -14px;display:grid;place-items:center;background:url(img/ui/medalhao-numero.webp) center/contain no-repeat;
  font:800 2.25rem/1 var(--t-titulo);color:var(--ouro);text-shadow:0 2px 0 #3b2208}
.passos h3{font:800 1.625rem/1.05 var(--t-titulo);color:var(--ouro)}
.passos p{color:var(--texto);margin-top:4px}

/* ===================== S10 · quando sai (maquete s10) ===================== */
/* contador e linha do tempo dentro de um painel (sem a ampulheta: tirada a pedido do Mateus, 10/10) */
.quando-painel{max-width:940px;margin-inline:auto;padding:clamp(10px,1.6vw,22px) clamp(8px,1.6vw,22px) clamp(14px,1.6vw,22px);display:grid;gap:clamp(18px,2.4vw,32px)}
.quando-miolo{display:flex;justify-content:center}
.contador-grande{display:flex;align-items:center;gap:clamp(10px,1.6vw,22px)}
.contador-grande b{font:800 clamp(5rem,3.6rem + 4vw,8.5rem)/.9 var(--t-titulo);color:var(--ouro);text-shadow:0 3px 0 #6a4718,0 8px 30px rgba(0,0,0,.85)}
.contador-grande span{font:800 clamp(1.75rem,1.2rem + 1.3vw,2.75rem)/1.05 var(--t-titulo);color:var(--ouro-claro);max-width:7ch;text-shadow:var(--sombra-texto)}
.marcos-tempo{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:center;position:relative}
.marcos-tempo::before{content:"";position:absolute;left:16%;right:16%;top:38px;height:2px;background:linear-gradient(90deg,transparent,#c99a52 10%,#c99a52 90%,transparent)}
.marcos-tempo li{position:relative;display:grid;justify-items:center;gap:6px}
.marco-icone{width:76px;height:76px;display:grid;place-items:center;background:url(img/ui/medalhao-numero.webp) center/contain no-repeat}
.marco-icone img{width:42px;height:42px}
.marco-quando{font:800 1.625rem/1.1 var(--t-titulo);color:var(--ouro)}
.marco-o-que{color:var(--texto);max-width:24ch;text-shadow:var(--sombra-texto)}
.acao-central{display:flex;justify-content:center;margin-top:clamp(28px,3vw,44px)}

/* ===================== S11 · perguntas (maquete s11) ===================== */
.faq{display:grid;gap:12px}
.faq details{position:relative;border-style:solid;border-color:transparent;border-width:14px 26px;border-image:url(img/ui/placa-pergunta.webp) 40 70 40 70 fill stretch}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:2px 4px;
  font:600 clamp(1.25rem,1rem + .7vw,1.625rem)/1.2 var(--t-titulo);color:#f3ead2;transition:color .2s ease}
.faq summary:hover{color:var(--ouro-claro)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:26px;height:26px;flex:none;background:url(img/icones/mais.webp) center/contain no-repeat;transition:transform .25s var(--saida)}
.faq details[open] summary{color:var(--ouro)}
.faq details[open] summary::after{background-image:url(img/icones/menos.webp)}
.faq details p{margin:10px 4px 2px;padding-top:10px;border-top:1px solid rgba(227,185,111,.3);color:var(--texto)}
.faq details[open] p{animation:resposta-abre .3s var(--saida)}
@keyframes resposta-abre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ===================== S12 · fechamento + rodapé (maquete s12): a mesma cena do topo, à noite ===================== */
.fim{min-height:clamp(620px,96svh,960px);padding:0;display:grid;align-items:center}
.fim-cena{position:absolute;inset:-10vh 0 0;z-index:var(--z-cena);overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%);mask-image:linear-gradient(180deg,transparent,#000 22%)}
.fim-cena img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:56% 50%}
/* o fechamento repete o desenho do topo (texto à esquerda, cena à direita): a mesma cena, agora à noite */
.fim-cena::after{content:"";position:absolute;inset:0;background:
  radial-gradient(ellipse 36% 24% at 19% 56%,rgba(6,7,14,.66),rgba(6,7,14,.34) 55%,transparent),
  linear-gradient(90deg,rgba(6,7,14,.86) 0%,rgba(6,7,14,.66) 26%,rgba(6,7,14,.2) 48%,transparent 62%),
  linear-gradient(180deg,transparent 60%,rgba(6,7,14,.9))}
.fim-miolo{display:grid;justify-items:start;gap:18px;text-align:left;width:min(var(--larg-topo),100% - 2*var(--gutter));
  padding:clamp(120px,16vh,180px) 0 clamp(150px,20vh,220px)}
.fim-miolo > *{max-width:min(600px,100%)}
.fim .h2{font-size:clamp(2.375rem,1.4rem + 3vw,4.25rem);text-align:left}
.fim .sec-apoio{margin:0;max-width:min(480px,100%)}
.fx-brasas{z-index:1}
.rodape{position:relative;z-index:2;margin-top:clamp(-150px,-15vh,-110px);padding:0 0 36px;text-align:center;color:var(--texto-2);font-size:var(--fs-peq)}
.rodape-miolo{display:grid;justify-items:center;gap:8px}
.rodape-emblema{position:relative;width:clamp(180px,14vw,230px)}
.rodape-emblema img{width:100%}
.rodape-emblema span{position:absolute;left:12.9%;right:13.7%;top:41.5%;bottom:33.7%;display:flex;align-items:center;justify-content:center;
  font:800 clamp(1.05rem,.8rem + .6vw,1.35rem)/1 var(--t-titulo);color:var(--ouro);text-shadow:0 1px 0 #3b2208}
.rodape-linha{color:#e6dcc6}
.rodape-legal{max-width:70ch;color:#c9bfa9;font-size:.8125rem}

/* ===================== popup do formulário (maquete p01) ===================== */
html.popup-aberto{overflow:hidden}
.popup{border:0;padding:56px 0 0;background:transparent;color:var(--texto);width:min(560px,100% - 20px);max-height:min(96svh,1000px);overflow:visible}
.popup::backdrop{background:rgba(6,5,3,.74);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.popup[open]{animation:popup-entra .34s var(--saida)}
.popup[open]::backdrop{animation:fundo-entra .34s ease}
@keyframes popup-entra{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes fundo-entra{from{opacity:0}to{opacity:1}}
.popup-caixa{position:relative;max-height:calc(min(96svh,1000px) - 56px);overflow:auto;padding:30px clamp(2px,2vw,16px) clamp(2px,1vw,8px);
  border-style:solid;border-color:transparent;border-width:26px 24px 24px 30px;border-image:url(img/ui/painel_elfo_vidro.webp) 59 54 55 69 fill stretch;
  -webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1);background:rgba(14,11,7,.35);background-clip:padding-box;
  scrollbar-width:thin;scrollbar-color:#8a6a3e transparent}
.popup-emblema{position:absolute;left:50%;top:0;width:110px;transform:translateX(-50%);z-index:3;pointer-events:none}
.popup-fecha{position:absolute;top:-8px;right:-6px;width:44px;height:44px;border:0;cursor:pointer;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle,#2a1d10 58%,#c9984f 60%,#6b4718 66%,transparent 68%);transition:transform .15s var(--saida),filter .2s ease;z-index:2}
.popup-fecha img{width:26px;height:26px}
.popup-fecha:hover{filter:brightness(1.3);transform:rotate(8deg)}
.popup-titulo{font:800 clamp(1.875rem,1.4rem + 1.4vw,2.5rem)/1.05 var(--t-titulo);color:var(--ouro);text-align:center;text-shadow:0 2px 0 #5f3f15,0 3px 14px rgba(0,0,0,.7)}
.popup-apoio{text-align:center;color:var(--texto);margin:8px 0 18px}
.form{display:grid;gap:12px}
.campo{display:grid;gap:6px;border:0;margin:0;padding:0;min-width:0}
.campo label,.campo legend{font-weight:600;color:#efe6d0;font-size:var(--fs-peq);padding:0}
.opcional{font-weight:400;color:var(--texto-2)}
.campo input[type=text],.campo input[type=email]{width:100%;min-height:52px;padding:0 8px;color:#f6eedb;font:400 1.0625rem/1.2 var(--t-corpo);
  background:transparent;border-style:solid;border-color:transparent;border-width:12px 10px;border-image:url(img/ui/campo_texto_elfo.webp) 40 31 38 30 fill stretch;
  outline:none;transition:filter .2s ease;border-radius:0}
.campo input:focus{filter:brightness(1.3)}
.campo input.ok{box-shadow:inset 0 -2px 0 var(--ok)}
.campo input.erro{box-shadow:inset 0 -2px 0 var(--erro)}
.lados-escolha{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.lados-escolha legend{grid-column:1/-1;margin-bottom:6px}
.lado-opcao{position:relative;cursor:pointer}
.lado-opcao input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.lado-cartao{position:relative;display:grid;justify-items:center;gap:6px;transition:filter .2s ease,transform .15s var(--saida)}
.lado-moldura{position:relative;display:grid;place-items:center;width:min(100%,104px);aspect-ratio:1;background:url(img/ui/cartao_papel_troll.webp) center/100% 100% no-repeat}
.lado-moldura img{width:66%;height:66%;object-fit:contain}
.lado-rotulo{font:800 1.125rem/1 var(--t-titulo);color:#efe6d0}
.lado-opcao:hover .lado-cartao{filter:brightness(1.15);transform:translateY(-2px)}
.lado-opcao input:checked + .lado-cartao .lado-moldura{background-image:url(img/ui/cartao_papel_elfo_sel.webp)}
.lado-opcao input:checked + .lado-cartao .lado-rotulo{color:var(--ouro-claro)}
.lado-opcao input:checked + .lado-cartao .lado-moldura::after{content:"";position:absolute;top:-6px;right:-6px;width:28px;height:28px;background:url(img/icones/pronto.webp) center/contain no-repeat}
.lado-opcao input:focus-visible + .lado-cartao{outline:2px solid var(--ouro-claro);outline-offset:2px}
.aceite{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-peq);color:var(--texto-2);cursor:pointer;line-height:1.45}
.aceite input{width:22px;height:22px;margin:1px 0 0;flex:none;accent-color:#d9a85a;cursor:pointer}
.pote{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-erro{color:var(--erro);font-weight:600;font-size:var(--fs-peq);text-align:center}
.form-pe{text-align:center;font-size:.875rem;color:var(--texto-2)}
.btn.enviando{pointer-events:none}
.btn.enviando::before{content:"";width:18px;height:18px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.form-ok{text-align:center;display:grid;justify-items:center;gap:10px;outline:none}
.form-ok > img{width:72px;height:72px}
.form-ok-titulo{font:800 2rem/1.1 var(--t-titulo);color:var(--ouro)}
.form-copiado{color:var(--ok);font-weight:600}

/* ===================== responsivo ===================== */
@media (max-width:1100px){
  .barra-nav{display:none}
  .linha-tempo{grid-template-columns:repeat(2,1fr);row-gap:clamp(40px,5vw,56px)}
  /* minmax(0,1fr): sem isso a coluna cresce até o conteúdo mais largo (a faixa de abas que rola de lado) e a seção passa da tela */
  .hora-bloco,.loja-grade,.link-grade,.defesa-grupos,.casa-seletor,.build-grade,.troca-grade{grid-template-columns:minmax(0,1fr)}
  .casa-seletor{grid-template-areas:"palco" "info" "regua"}
  .casa-info{justify-items:center}
  .lados-grade{grid-template-columns:minmax(0,1fr)}
  .lados-vs{justify-self:center}
  .troca-arte{order:-1;max-width:640px;margin-inline:auto}
  .volta,.volta--lobo{justify-items:center;text-align:center}
  .volta p,.volta--lobo p{margin-inline:auto}
  .volta .poderes{margin-inline:auto}
  .golpe{min-height:0}
  .golpe > img{position:static;height:auto;aspect-ratio:3/2}
  .build-escolha{grid-template-columns:repeat(3,1fr)}
  .eco-blocos{grid-template-columns:repeat(2,1fr);gap:18px}
}
/* economia abaixo de 1500 px: o diorama vira faixa inteira e os 4 blocos descem para uma linha embaixo dele (entre 1100 e
   1500 os painéis sobrepostos colidiam entre si e com o título: revisão de 10/10) */
@media (max-width:1500px){
  .eco-palco{aspect-ratio:auto;max-height:none;width:100%}
  .eco-diorama{position:relative;inset:auto;width:100%;aspect-ratio:1672/941}
  .eco-blocos{position:static;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;width:min(var(--larg),100% - 2*var(--gutter));margin:20px auto 0}
  .eco-bloco{position:static;width:auto;max-width:none}
  .eco-contadores{position:static;justify-content:center;margin:16px auto 0;padding-inline:var(--gutter)}
}
/* marcos em 2 colunas abaixo de 1040 px: cada cartão tem no mínimo 219 px (plaquinha "Casa nível 13" sem quebra + 68 px de
   moldura) e 4 deles só cabem a partir de ~1016 px (estouro.mjs 10/10: de 761 a 950 o 4º cartão saía da tela) */
@media (max-width:1040px){
  .casa-marcos{grid-template-columns:repeat(2,1fr);row-gap:14px}
  .marco-palco .casa-chao{width:min(82%,260px)}
}
@media (max-width:760px){
  /* no celular o lado inteiro vira o painel (personagem no pedestal dentro do vidro, ao lado do nome; poderes embaixo) */
  .lado,.lado--troll{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);grid-template-areas:"heroi texto" "poderes poderes";align-items:center;padding:4px 2px 8px;
    border-style:solid;border-color:transparent;border-width:22px 20px 20px 25px;border-image:url(img/ui/painel_elfo_vidro.webp) 59 54 55 69 fill stretch}
  .lado--troll{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);grid-template-areas:"texto heroi" "poderes poderes";
    border-width:22px 21px 21px 19px;border-image:url(img/ui/painel_troll_vidro.webp) 80 76 78 70 fill stretch}
  .lado-painel{display:contents}
  .lado-figura{width:100%}
  .lado-figura::before{display:none}
  .torres{grid-template-columns:repeat(2,1fr);row-gap:22px}
  .casa-marcos button{border-width:22px}
  .marco-nome{font-size:1.0625rem;border-width:8px 16px}
  .marcos-tempo{grid-template-columns:1fr;gap:22px}
  .marcos-tempo::before{display:none}
  .build-escolha{grid-template-columns:1fr}
  .eco-blocos{grid-template-columns:1fr}
}
@media (max-width:560px){
  .barra-miolo{height:56px;gap:12px}
  .btn--pequeno{font-size:1rem;min-height:42px}
  /* topo no celular (maquete m01): a arte em cima, o texto centralizado embaixo */
  .topo{display:block;min-height:0}
  .topo-cena{position:relative;inset:auto;height:min(58svh,480px);-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
  .topo-arte{object-position:70% 40%}
  .topo-veu{background:linear-gradient(180deg,rgba(10,8,5,.45) 0,transparent 22%,transparent 70%,rgba(14,18,10,.6) 100%)}
  .topo-conteudo{margin-top:-64px;padding:0 0 40px;text-align:center;display:grid;justify-items:center}
  .topo-conteudo > *{max-width:100%}
  .h1{font-size:clamp(2.5rem,11vw,3.25rem)}
  .h1-louro{left:-8px;top:38%;width:42px;transform:rotate(-80deg) scaleY(-1)}
  .h1-louro--dir{display:block;left:auto;right:-8px;transform:rotate(80deg)}
  .topo-acoes{justify-content:center;flex-direction:column}
  .linha-tempo{grid-template-columns:1fr}
  .btn--grande{width:100%}
  .lados-escolha{gap:6px}
  /* popup compacto no celular: com a mensagem de erro o botão continua na tela */
  .popup{padding-top:42px}
  .popup-emblema{width:84px}
  .popup-caixa{padding-top:22px;max-height:calc(100svh - 52px)}
  .popup-titulo{font-size:1.75rem}
  .popup-apoio{margin:6px 0 12px;font-size:.9375rem}
  .form{gap:9px}
  .campo{gap:4px}
  .campo input[type=text],.campo input[type=email]{min-height:46px}
  .lado-moldura{width:min(100%,80px)}
  .aceite{font-size:.8125rem;line-height:1.35}
  .form-pe{font-size:.8125rem}
  .h2--fios::before,.h2--fios::after{flex-basis:22px}
  .muro-etapas{grid-template-columns:repeat(3,1fr)}
  .muro-seta-li{display:none}
  .etapa-palco,.muro-seta-li{height:150px}
  .casa-nivel{min-height:64px}
  .build-espacos li{width:84px}
  .build-espacos .item-icone{width:70px}
  .build-espacos .item-nome{font-size:.8125rem}
  .poder img{width:56px}
  .lado,.lado--troll{border-width:18px 16px 16px 20px}
}

/* ===================== ajustes do celular (fotos de 10/10) ===================== */
@media (max-width:760px){
  /* build: os 6 espaços numa grade embaixo do Troll (em volta dele os nomes passavam da tela) */
  .build-troll{min-height:0;display:block}
  .build-palco{width:min(260px,66%);margin:0 auto}
  .build-espacos{position:static;display:grid;grid-template-columns:repeat(3,1fr);gap:14px 8px;margin-top:14px}
  .build-espacos li{position:static;width:auto}
  .build-espacos .item-nome{white-space:normal;font-size:.875rem;line-height:1.15;text-align:center}
  /* loja: as abas numa faixa que rola de lado (5 linhas de abas empurravam os itens para longe), dentro da prateleira */
  .loja-prateleira{padding-inline:6px}
  .loja-abas{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-6px;padding:4px 12px 10px;
    scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent)}
  /* 3 ou 4 colunas (app.js), ícone escalando com a tela e 3 linhas reservadas para o nome: toda loja tem a mesma altura
     (em células de 69 px "Escudo de Casco Velho" vai a 3 linhas; sem reserva a seção pulava 31 px entre abas) */
  .loja-escada{--gap-esc:6px}
  .loja-escada .item-icone{width:clamp(58px,16vw,90px)}  /* 360 px: célula de 64,5 px, ícone 58 + 2 de padding */
  .loja-escada .item{padding:1px}
  .loja-escada .item-nome{min-height:3.6em}
  .loja-abas::-webkit-scrollbar{display:none}
  .loja-aba{flex:none;scroll-snap-align:start}
}
@media (max-width:560px){
  /* fechamento: o Troll e os Elfos em cima, o texto embaixo (como o topo no celular) */
  .fim{align-items:end;min-height:max(680px,96svh)}
  .fim-cena img{object-position:64% 24%}
  .fim-cena::after{background:linear-gradient(180deg,transparent 30%,rgba(6,7,14,.7) 55%,rgba(6,7,14,.92) 80%)}
  .fim-miolo{padding:0 0 clamp(150px,22vh,200px);justify-items:center;text-align:center}
  .fim .h2{text-align:center}
}

/* ===================== movimento reduzido ===================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .build-espacos.entra li,.loja-escada.entra .item{animation:none!important}
  .fx,.espirito-anda,.eco-camada{display:none}
  .topo-arte{animation:none;transform:none}
  .muro-etapa .vida i{width:var(--v)}
}