@font-face{font-family: 'Archivo';font-style: normal;font-weight: 400 900;font-stretch: 62% 125%;font-display: swap;src: url(/fontes/archivo-latin-ext-0.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family: 'Archivo';font-style: normal;font-weight: 400 900;font-stretch: 62% 125%;font-display: swap;src: url(/fontes/archivo-latin-1.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family: 'Manrope';font-style: normal;font-weight: 400;font-display: swap;src: url(/fontes/manrope-latin-ext-0.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family: 'Manrope';font-style: normal;font-weight: 400;font-display: swap;src: url(/fontes/manrope-latin-1.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family: 'Manrope';font-style: normal;font-weight: 600;font-display: swap;src: url(/fontes/manrope-latin-ext-0.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family: 'Manrope';font-style: normal;font-weight: 600;font-display: swap;src: url(/fontes/manrope-latin-1.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family: 'Manrope';font-style: normal;font-weight: 700;font-display: swap;src: url(/fontes/manrope-latin-ext-0.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family: 'Manrope';font-style: normal;font-weight: 700;font-display: swap;src: url(/fontes/manrope-latin-1.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family: 'Silkscreen';font-style: normal;font-weight: 400;font-display: swap;src: url(/fontes/silkscreen-latin-ext-0.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family: 'Silkscreen';font-style: normal;font-weight: 400;font-display: swap;src: url(/fontes/silkscreen-latin-1.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family: 'Silkscreen';font-style: normal;font-weight: 700;font-display: swap;src: url(/fontes/silkscreen-latin-ext-1.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family: 'Silkscreen';font-style: normal;font-weight: 700;font-display: swap;src: url(/fontes/silkscreen-latin-3.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* IDENTI SOLUÇÕES (site do estúdio): fliperama à noite. Página preta, um dourado só, letra grande e moderna.
   O pixel fica nos detalhes (rótulos, brasão, barras) e nos sprites DE VERDADE dos jogos.
   Um visual só, de propósito: a página é escura em qualquer tema do aparelho. */
:root{
  --preto:#060608; --chapa:#0f0f14; --chapa-2:#17171e; --linha:#2a2a35; --texto:#f3efe6; --suave:#a09cab;
  --ouro:#ffc53d; --ouro-claro:#ffe9a0; --ouro-escuro:#a8770f; --ouro-fundo:#231a05; --fosforo:#7dffb0; --perigo:#ff5a5f; --frio:#4b4b5e;
  --titulo:"Archivo","Arial Narrow",Impact,sans-serif; --corpo:"Manrope",system-ui,sans-serif; --pixel:"Silkscreen","Courier New",monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:64px}
body{margin:0;background:var(--preto);color:var(--texto);font:17px/1.6 var(--corpo);overflow-x:hidden}
img{max-width:100%}
[hidden]{display:none!important}
/* fundo */
.poeira{position:fixed;inset:0;z-index:0;pointer-events:none;background-repeat:repeat;will-change:background-position}
#poeira-2{opacity:.55}
.luz{position:fixed;left:50%;top:-30vh;width:120vw;height:80vh;transform:translateX(-50%);z-index:0;pointer-events:none;background:radial-gradient(closest-side,rgba(255,197,61,.13),rgba(255,197,61,0))}
/* painel */
.painel{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;gap:9px;padding:calc(9px + env(safe-area-inset-top,0px)) 14px 9px;background:rgba(6,6,8,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--linha);font:400 11px/1 var(--pixel);letter-spacing:.06em;color:var(--suave)}
.painel-brasao{flex:none;background:none;border:0;padding:0;cursor:pointer;line-height:0}
.painel-brasao img{display:block;width:26px;height:26px}
.painel-nome{color:var(--texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.segmentos{display:flex;gap:2px;margin-left:auto;flex:none}
.segmentos i{width:6px;height:9px;background:var(--linha);transition:background .3s}
.segmentos i.on{background:var(--ouro)}
.xp{white-space:nowrap;flex:none}.xp b{color:var(--ouro);font-weight:400;display:inline-block}
.xp b.pulo{animation:pulo .35s steps(4)}
@keyframes pulo{50%{transform:translateY(-4px) scale(1.25)}}
@media (max-width:420px){.painel-nome{font-size:9px}.segmentos i{width:4px}}
/* avisos de conquista */
.avisos{position:fixed;top:calc(54px + env(safe-area-inset-top,0px));right:12px;z-index:40;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none}
.aviso{font:400 10px/1.5 var(--pixel);letter-spacing:.06em;color:var(--texto);background:var(--chapa);border:1px solid var(--ouro);padding:9px 11px;max-width:260px;animation:aviso 3.4s ease forwards;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.aviso b{display:block;color:var(--ouro);font-weight:400;margin-bottom:3px}
@keyframes aviso{0%{opacity:0;transform:translateX(30px)}10%,82%{opacity:1;transform:none}100%{opacity:0;transform:translateX(30px)}}
/* estrutura */
main{position:relative;z-index:5;max-width:46rem;margin:0 auto;padding-inline:16px;padding-top:52px}
.tela{position:relative;padding-block:54px}
.inicio{padding-top:26px;padding-bottom:40px}
.inicio .marca{margin-bottom:24px}
.tela>*{min-width:0}
.trancada #fase,.trancada .rodape{display:none}
.fantasma{position:absolute;right:-8px;top:34px;z-index:-1;font:900 150px/0.8 var(--titulo);font-stretch:62%;color:transparent;-webkit-text-stroke:1px var(--linha);pointer-events:none;user-select:none}
.rotulo{display:flex;align-items:center;gap:8px;font:400 11px/1.3 var(--pixel);letter-spacing:.1em;color:var(--ouro);margin:0 0 16px}
.rotulo::before{content:"";flex:none;width:8px;height:8px;background:var(--ouro)}
h1,h2,h3{margin:0;text-wrap:balance}
h1{font:900 46px/0.95 var(--titulo);font-stretch:68%;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:18px}
h1.menor{font-size:34px;line-height:1}
h1 em,.frase em{font-style:normal;color:var(--ouro)}
h3.frase{margin-bottom:12px}
.fundador{display:inline-block;font:400 9px/1 var(--pixel);letter-spacing:.1em;color:var(--preto);background:var(--ouro);padding:6px 8px 5px;margin:0 0 12px}
.mapa li.vivo{counter-increment:none;margin-top:8px}
.mapa li.vivo::before{content:"AO VIVO";width:auto;height:auto;left:0;top:-14px;padding:4px 5px 3px;font:400 7px/1 var(--pixel);letter-spacing:.08em;background:var(--perigo);border-color:var(--perigo);color:#fff}
.mapa li.vivo{padding-left:54px;padding-top:6px}
h2{font:900 34px/1 var(--titulo);font-stretch:70%;text-transform:uppercase;margin-bottom:18px}
h3{font:800 20px/1.2 var(--titulo);font-stretch:88%;margin-bottom:6px}
h3.sub{font-size:24px;margin:44px 0 16px;text-transform:uppercase;font-stretch:74%}
p{margin:0 0 16px}
.apoio{font-size:19px;color:var(--suave);max-width:34rem}
.apoio strong{color:var(--texto)}
.nota{font-size:14px;color:var(--suave)}
.dica{font:400 10px/1.5 var(--pixel);letter-spacing:.08em;color:var(--suave);margin:0 0 8px}
.frase{font:900 26px/1.1 var(--titulo);font-stretch:74%;text-transform:uppercase;margin:34px 0 0}
/* entrada das seções: tudo visível sem script; com script, o que está abaixo sobe ao aparecer */
.pre{opacity:0;transform:translateY(22px)}
.revela{transition:opacity .6s ease,transform .6s ease}
/* marca */
.marca{display:flex;align-items:center;gap:14px;margin-bottom:34px}
.marca img{width:64px;height:64px;flex:none}
.marca-nome{font:900 22px/1 var(--titulo);font-stretch:75%;text-transform:uppercase;letter-spacing:.02em;margin:0}
.marca-nome small{display:block;font:400 8px/1.5 var(--pixel);letter-spacing:.03em;color:var(--suave);margin-top:6px}
/* botão */
.botao{position:relative;display:inline-block;overflow:hidden;font:900 17px/1 var(--titulo);font-stretch:85%;text-transform:uppercase;letter-spacing:.04em;color:var(--preto);background:var(--ouro);text-decoration:none;border:0;cursor:pointer;padding:19px 26px;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);transition:transform .12s,filter .12s}
.botao::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));animation:brilho 3.6s ease-in-out infinite}
@keyframes brilho{0%,62%{left:-60%}100%{left:130%}}
.botao.grande{display:block;text-align:center;font-size:20px;padding:23px 26px}
.botao:hover{filter:brightness(1.08)}
.botao:active{transform:translateY(3px) scale(.985)}
.botao-halo{display:inline-block;filter:drop-shadow(0 0 22px rgba(255,197,61,.35))}
.preco-caixa .botao-halo,.fim .botao-halo{display:block}
.botao:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid var(--texto);outline-offset:4px}
.aperte{font:400 10px/1 var(--pixel);letter-spacing:.14em;color:var(--suave);margin:26px 0 0;animation:pisca 1.2s steps(2) infinite}
@keyframes pisca{50%{opacity:.25}}
/* o título do início entra em três tempos */
.entra{font-size:clamp(25px,8.1vw,46px);line-height:1}
.entra span{display:block}
@keyframes entra{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.entra span{animation:entra .7s cubic-bezier(.2,.8,.2,1) both}.entra span:nth-child(2){animation-delay:.14s}.entra span:nth-child(3){animation-delay:.28s}.entra span:nth-child(4){animation-delay:.42s}
.inicio .apoio{animation:entra .7s .58s cubic-bezier(.2,.8,.2,1) both}.inicio .botao-halo{animation:entra .7s .72s cubic-bezier(.2,.8,.2,1) both}
/* depois da entrada, a animação sai de cena: o texto fica no estado natural e não depende mais dela para aparecer */
.inicio.entrou .entra span,.inicio.entrou .apoio,.inicio.entrou .botao-halo{animation:none}
/* a vitrine: os seis jogos passando em fita */
.vitrine-rotulo{font:400 8px/1 var(--pixel);letter-spacing:.1em;color:var(--suave);margin:22px 0 0}
.vitrine{display:block;overflow:hidden;margin:8px -16px 0;padding:6px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.vitrine-fita{display:flex;gap:10px;width:max-content;animation:fita 32s linear infinite}
.vitrine img{width:68px;height:68px;flex:none;border:1px solid var(--linha);display:block}
@keyframes fita{to{transform:translateX(calc(-50% - 5px))}}
/* placar */
.placar{display:grid;grid-template-columns:repeat(3,1fr);margin:30px 0 0;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.placar div{padding:18px 8px 16px;text-align:center;min-width:0}
.placar div+div{border-left:1px solid var(--linha)}
.placar b{display:block;font:900 44px/1 var(--titulo);font-stretch:70%;color:var(--ouro);font-variant-numeric:tabular-nums}
.placar span{display:block;font:400 9px/1.4 var(--pixel);letter-spacing:.08em;color:var(--suave);text-transform:uppercase;margin-top:6px}
.placar.tres{margin:22px 0 0}.placar.tres b{font-size:36px}.placar.tres span{font:400 12px/1.35 var(--corpo);letter-spacing:0;text-transform:none}
/* televisão do vídeo */
.tv{margin:6px 0 26px}
.tv-tela{aspect-ratio:16/9;max-width:100%;background:#000;border:2px solid var(--linha);box-shadow:0 0 0 6px var(--chapa-2),0 0 50px rgba(255,197,61,.12);display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;font:400 10px/1.7 var(--pixel);letter-spacing:.06em;color:var(--suave)}
.tv-base{display:flex;align-items:center;gap:8px;padding:12px 6px 0;font:400 9px/1 var(--pixel);letter-spacing:.1em;color:var(--suave)}
.tv-base i{width:10px;height:10px;background:var(--ouro)}.tv-base i+i{background:var(--linha)}.tv-base span{margin-left:auto}
/* portão */
.portao{position:relative;z-index:5;max-width:46rem;margin:0 auto;padding:44px 16px 90px;text-align:center}
.portao::before{content:"";display:block;height:14px;margin-bottom:34px;background:repeating-linear-gradient(90deg,var(--linha) 0 14px,transparent 14px 22px)}
.portao canvas{width:96px;height:108px;image-rendering:pixelated;animation:balanca 2.4s ease-in-out infinite}
@keyframes balanca{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.portao-texto{font:400 14px/1.4 var(--pixel);letter-spacing:.16em;color:var(--ouro);margin:18px 0 6px}
.portao-nota{font-size:14px;color:var(--suave)}
.botao-teste{font:400 9px/1.4 var(--pixel);letter-spacing:.06em;padding:9px 11px;background:none;border:1px dashed var(--frio);color:var(--suave);cursor:pointer;margin-top:10px}
.portao.abrindo canvas{animation:quebra .7s ease forwards}
@keyframes quebra{30%{transform:scale(1.25) rotate(8deg)}100%{transform:scale(.2) translateY(-60px) rotate(40deg);opacity:0}}
/* chapa */
.chapa{background:var(--chapa);border:1px solid var(--linha);padding:22px 20px;margin-bottom:18px;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.chapa p:last-child{margin-bottom:0}
.trio{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:22px 0}
.trio .chapa{margin:0}.trio p{font-size:15px;color:var(--suave)}
/* os três defeitos do jogo de uma frase, em linhas */
.defeitos{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--linha)}
.defeitos li{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--linha);cursor:pointer}
.defeitos b{font:900 18px/1.1 var(--titulo);font-stretch:76%;text-transform:uppercase;color:var(--perigo)}
.defeitos span{color:var(--suave);font-size:15px}
/* os três jeitos de ganhar: o monte de moedas ao lado do texto */
.ganhos{display:grid;gap:12px;margin:18px 0}
.ganhos .chapa{margin:0;display:grid;grid-template-columns:76px 1fr;gap:14px;align-items:end;padding:18px 18px 18px 16px}
.ganhos .pilha{margin:0}
.ganhos p{font-size:15px;color:var(--suave);margin:0}
/* antes e depois */
.compara{position:relative;margin:26px 0 12px;border:1px solid var(--linha);background:#000;overflow:hidden;touch-action:pan-y;user-select:none;--p:50%}
.compara-depois{display:block;width:100%;height:auto}
.compara-antes{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.compara-antes canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
.compara-barra{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:var(--ouro);pointer-events:none}
.compara-barra i{position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;background:var(--ouro);clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px)}
.compara-barra i::before{content:"◄ ►";position:absolute;inset:0;font:700 9px/34px var(--corpo);text-align:center;color:var(--preto)}
.compara input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.compara-etiqueta{position:absolute;top:8px;font:400 9px/1 var(--pixel);letter-spacing:.08em;padding:5px 6px;background:rgba(6,6,8,.8);pointer-events:none}
.compara-etiqueta.e1{left:8px;color:var(--suave)}.compara-etiqueta.e2{right:8px;color:var(--ouro)}
/* escolha o seu jogo: na primeira vez os seis acendem em fila; depois os apagados se revezam pulando, pedindo o toque */
.toque{font:400 10px/1 var(--pixel);letter-spacing:.12em;color:var(--ouro);margin:0 0 12px;animation:pisca 1.2s steps(2) infinite}
.toque.visto{animation:none;color:var(--suave)}
.carta.acesa{border-color:var(--ouro);box-shadow:0 0 0 1px var(--ouro),0 0 26px rgba(255,197,61,.28);transform:translateY(-6px) scale(1.04)}
.carta.acesa img{filter:none}
.grade.chama .carta[aria-pressed="false"]{animation:chamar 4.8s ease-in-out infinite}
.grade.chama .carta:nth-child(2){animation-delay:0s}.grade.chama .carta:nth-child(3){animation-delay:.8s}.grade.chama .carta:nth-child(4){animation-delay:1.6s}.grade.chama .carta:nth-child(5){animation-delay:2.4s}.grade.chama .carta:nth-child(6){animation-delay:3.2s}.grade.chama .carta:nth-child(1){animation-delay:4s}
@keyframes chamar{0%,12%,100%{transform:none;border-color:var(--linha)}2%{transform:translateY(-8px) rotate(-3deg);border-color:var(--ouro)}5%{transform:translateY(0) rotate(3deg);border-color:var(--ouro)}8%{transform:translateY(-4px) rotate(-2deg);border-color:var(--ouro)}10%{transform:none}}
.grade.chama .carta[aria-pressed="false"] img{animation:espiar 4.8s ease-in-out infinite;animation-delay:inherit}
@keyframes espiar{0%,13%,100%{filter:grayscale(1) brightness(.5)}3%,9%{filter:grayscale(.2) brightness(.95)}}
/* (as regras de base das cartas) */
.grade{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.carta{appearance:none;position:relative;border:1px solid var(--linha);background:var(--chapa);padding:0;cursor:pointer;aspect-ratio:1;min-width:0;overflow:hidden;transition:border-color .2s,transform .2s}
.carta img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.5);transition:filter .25s}
.carta[aria-pressed="true"]{border-color:var(--ouro);box-shadow:0 0 0 1px var(--ouro),0 0 26px rgba(255,197,61,.28);transform:translateY(-3px)}
.carta[aria-pressed="true"] img{filter:none}
.carta span{position:absolute;left:0;top:0;font:400 9px/1 var(--pixel);padding:5px 6px;background:var(--ouro);color:var(--preto);opacity:0}
.carta[aria-pressed="true"] span{opacity:1}
.ficha-jogo h3{font:900 28px/1 var(--titulo);font-stretch:72%;text-transform:uppercase;color:var(--ouro);margin-bottom:10px}
.ficha-jogo.troca{animation:troca .3s ease}
@keyframes troca{0%{opacity:.2;transform:translateX(-10px)}100%{opacity:1;transform:none}}
/* terminal */
.terminal{font:13px/1.75 ui-monospace,Menlo,Consolas,monospace;background:#000;border:1px solid var(--linha);margin-bottom:10px;overflow:hidden}
.terminal-topo{display:flex;justify-content:space-between;gap:10px;padding:9px 14px;border-bottom:1px solid var(--linha);font:400 10px/1 var(--pixel);letter-spacing:.08em;color:var(--suave)}
.terminal-topo b{color:var(--fosforo);font-weight:400;animation:pisca 1.6s steps(2) infinite}
.terminal ol{list-style:none;margin:0;padding:14px;min-height:190px}
.terminal li{overflow-wrap:anywhere;transition:opacity .5s,transform .5s}
.terminal li.espera{opacity:0;transform:translateY(6px)}
.terminal .h{color:var(--suave)}.terminal .eu{color:var(--ouro)}.terminal .ia{color:var(--fosforo)}
.onde{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px;padding:0}
.onde li{font:400 10px/1 var(--pixel);letter-spacing:.06em;padding:9px 10px;border:1px solid var(--linha);color:var(--texto);background:var(--chapa)}
/* mercado */
.barras{margin:26px 0 10px;display:grid;gap:12px}
.barra-linha{display:grid;grid-template-columns:92px 1fr auto;gap:10px;align-items:center;font-size:14px;color:var(--suave)}
.barra-linha b{font:800 16px/1 var(--titulo);color:var(--texto);font-variant-numeric:tabular-nums;white-space:nowrap}
.barra-trilho{height:20px;background:var(--chapa);border:1px solid var(--linha);min-width:0}
.barra-trilho i{display:block;height:100%;width:var(--v);background:repeating-linear-gradient(90deg,var(--ouro) 0 8px,var(--ouro-escuro) 8px 10px);transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
.barra-trilho i.fria{background:repeating-linear-gradient(90deg,var(--frio) 0 8px,var(--linha) 8px 10px)}
.pre .barra-trilho i,.pre.barra-trilho i,.pre .trilho i{width:0}
/* as pilhas de moedas: cada moeda cai conforme a pessoa rola a página, e o monte vai subindo */
.pilha{position:relative;width:70px;height:calc(26px + var(--n,5)*8px);margin:6px 0 18px}
.pilha i{position:absolute;left:0;bottom:calc(var(--k)*8px);width:58px;height:22px;border-radius:50%;background:radial-gradient(ellipse at 38% 30%,var(--ouro-claro) 0 18%,var(--ouro) 46%,#e0a21c 100%);box-shadow:0 6px 0 var(--ouro-escuro),0 7px 0 #5a3f08,0 9px 6px rgba(0,0,0,.45);opacity:0;transform:translateY(-150px) rotate(-18deg);transition:transform .5s cubic-bezier(.3,1.5,.5,1),opacity .12s}
.pilha i::before{content:"";position:absolute;inset:3px 6px;border-radius:50%;border:1px solid rgba(168,119,15,.75)}
.pilha i.caiu{opacity:1;transform:none}
.pilha i.topo::after{content:"$";position:absolute;inset:0;font:700 12px/21px var(--pixel);text-align:center;color:var(--ouro-escuro)}
.pilha i:nth-child(odd){left:3px}.pilha i:nth-child(3n){left:-2px}
.pilha.t-pilha i.caiu{animation:quica .45s cubic-bezier(.3,1.7,.5,1)}
@keyframes quica{35%{transform:translateY(-14px)}100%{transform:none}}
.caso{margin-top:34px;padding:24px 20px;border:1px solid var(--ouro-escuro);background:linear-gradient(var(--ouro-fundo),var(--chapa) 70%);clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.caso h3{font:900 30px/1 var(--titulo);font-stretch:72%;text-transform:uppercase;margin-bottom:10px}
.caso-numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin:20px 0 18px}
.caso-numeros b{display:block;font:900 30px/1 var(--titulo);font-stretch:72%;color:var(--ouro);margin-bottom:6px;font-variant-numeric:tabular-nums}
.caso-numeros div>span{display:block;font-size:13px;color:var(--suave)}
/* o joguinho de exemplo, dentro do caso */
.mini{position:relative;margin:18px 0 10px;border:2px solid var(--linha);background:#000;cursor:pointer;line-height:0}
.mini canvas{display:block;width:100%;height:auto;image-rendering:pixelated}
.mini-dica{position:absolute;right:8px;top:8px;font:400 8px/1 var(--pixel);letter-spacing:.1em;color:var(--ouro);background:rgba(6,6,8,.7);padding:4px 5px;animation:pisca 1.2s steps(2) infinite}
.caso a{color:var(--ouro)}
.porque{margin-top:34px;padding:24px 20px}
.pronto{margin:34px 0 0;padding:24px 20px;border-color:var(--ouro-escuro)}
.pronto h3{font:900 26px/1.05 var(--titulo);font-stretch:72%;text-transform:uppercase;margin:0 0 12px}
.pronto p+p{margin-top:12px}
.pronto+.porque{margin-top:14px}
.porque h3{font:900 30px/1 var(--titulo);font-stretch:72%;text-transform:uppercase;margin:8px 0 12px}
.porque p+p{margin-top:12px}
.terminal.loja{margin-top:22px}
.rotulo.oque{margin-bottom:12px}
.fim .rotulo,.portao .rotulo{justify-content:center}
.resumo-oferta{margin:16px 0 0;font-size:14px;line-height:1.5;color:var(--suave)}
.resumo-oferta b{display:block;color:var(--texto);font-weight:700}
.terminal .cai{color:var(--ouro);font-weight:700}
.terminal .oculto{visibility:hidden}
.terminal .cursor{position:relative;display:inline-block;width:0;height:1em;vertical-align:-2px}
.terminal .cursor::after{content:"";position:absolute;left:1px;top:0;width:.55em;height:1em;background:var(--fosforo);animation:pisca 1s steps(2) infinite}
.frase em{font-style:normal;color:var(--ouro)}
.solos{list-style:none;padding:0;margin:22px 0 16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.solos li{min-width:0;background:var(--chapa);border:1px solid var(--linha);padding:18px 18px 16px;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.solos b{display:block;font:900 24px/1 var(--titulo);font-stretch:72%;text-transform:uppercase}
.solos-quem{display:block;font:400 9px/1.4 var(--pixel);letter-spacing:.08em;text-transform:uppercase;color:var(--suave);margin:6px 0 14px}
.solos strong{display:block;font:900 36px/1 var(--titulo);font-stretch:70%;color:var(--ouro);font-variant-numeric:tabular-nums}
.solos li>span:last-child{display:block;font-size:14px;color:var(--suave);margin-top:6px}
/* poderes: cada bloco de interrogação solta um item e o cartão cresce */
.poderes{display:grid;gap:14px;margin-top:28px}
.poder{position:relative;display:flex;gap:16px;align-items:flex-start;text-align:left;width:100%;background:var(--chapa);border:1px solid var(--linha);color:var(--texto);padding:18px 16px;cursor:pointer;font:inherit;transition:border-color .25s,background .25s,transform .25s,box-shadow .25s}
.poder-n{flex:none;width:44px;height:44px;font:700 20px/44px var(--pixel);text-align:center;color:var(--preto);background:var(--ouro);box-shadow:inset -4px -4px 0 var(--ouro-escuro),inset 4px 4px 0 var(--ouro-claro);animation:bloco 2.6s ease-in-out infinite}
.poder:nth-child(2) .poder-n{animation-delay:.35s}.poder:nth-child(3) .poder-n{animation-delay:.7s}.poder:nth-child(4) .poder-n{animation-delay:1.05s}.poder:nth-child(5) .poder-n{animation-delay:1.4s}
@keyframes bloco{0%,70%,100%{transform:translateY(0)}78%{transform:translateY(-9px)}86%{transform:translateY(0)}92%{transform:translateY(-4px)}}
.poder-corpo{display:block;flex:1;min-width:0}
.poder-num{display:block;font:400 9px/1 var(--pixel);letter-spacing:.1em;color:var(--suave);margin-bottom:7px}
.poder-nome{display:block;font:800 20px/1.2 var(--titulo);font-stretch:88%}
.poder-texto{display:block;color:var(--suave);font-size:15px;max-height:0;overflow:hidden;opacity:0;transition:max-height .45s ease,opacity .45s ease .1s,margin .45s}
.poder-item{position:absolute;left:20px;top:22px;width:36px;height:36px;image-rendering:pixelated;opacity:0;pointer-events:none}
.poder::after{content:var(--t-toque,"TOQUE");position:absolute;right:12px;top:12px;font:400 8px/1 var(--pixel);letter-spacing:.1em;color:var(--ouro);animation:pisca 1.2s steps(2) infinite}
.poder:hover{border-color:var(--ouro-escuro)}
.poder[aria-expanded="true"]{border-color:var(--ouro);background:linear-gradient(var(--ouro-fundo),var(--chapa));box-shadow:0 0 34px rgba(255,197,61,.16);padding-top:26px;padding-bottom:24px}
.poder[aria-expanded="true"]::after{content:var(--t-liberado,"LIBERADO");color:var(--suave);animation:none}
.poder[aria-expanded="true"] .poder-n{animation:none;color:transparent;background:#3a2a0c;box-shadow:inset -4px -4px 0 #231a05,inset 4px 4px 0 #57401a}
.poder[aria-expanded="true"] .poder-num{color:var(--ouro)}
.poder[aria-expanded="true"] .poder-nome{font-size:24px;color:var(--ouro)}
.poder[aria-expanded="true"] .poder-texto{max-height:200px;opacity:1;margin-top:10px;color:var(--texto)}
.poder[aria-expanded="true"] .poder-item{opacity:1;transform:translateY(-46px)}
.poder.batida .poder-n{animation:batida .3s steps(4)}
@keyframes batida{50%{transform:translateY(-12px)}}
.poder.batida .poder-item{animation:sai .7s cubic-bezier(.3,1.5,.5,1) forwards}
@keyframes sai{0%{opacity:1;transform:translateY(0) scale(.3)}45%{opacity:1;transform:translateY(-64px) scale(1.25)}100%{opacity:1;transform:translateY(-46px) scale(1)}}
.poder.cresce{animation:cresce .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes cresce{0%{transform:scale(1)}35%{transform:scale(1.06)}60%{transform:scale(.985)}100%{transform:scale(1)}}
.poder[aria-expanded="true"] .poder-item{animation:flutua 2.4s ease-in-out infinite .7s}
.poder.batida[aria-expanded="true"] .poder-item{animation:sai .7s cubic-bezier(.3,1.5,.5,1) forwards}
@keyframes flutua{0%,100%{transform:translateY(-46px)}50%{transform:translateY(-52px)}}
.poderes{padding-top:26px}
/* mapa de aulas */
.mapa{list-style:none;margin:28px 0 0;padding:0;counter-reset:fase;position:relative}
.mapa::before{content:"";position:absolute;left:17px;top:10px;bottom:10px;width:2px;background:repeating-linear-gradient(var(--ouro-escuro) 0 6px,transparent 6px 12px)}
.mapa li{counter-increment:fase;position:relative;padding:0 0 24px 54px}
.mapa li::before{content:counter(fase,decimal-leading-zero);position:absolute;left:0;top:0;width:36px;height:36px;background:var(--chapa);border:1px solid var(--ouro-escuro);color:var(--ouro);font:400 11px/34px var(--pixel);text-align:center}
.mapa li.chefe::before{background:var(--ouro);color:var(--preto);border-color:var(--ouro)}
/* só a primeira parada chama o toque; depois do primeiro toque, as outras ficam subentendidas */
.mapa:not(.tocado) li:first-child::before{animation:bloco 2.6s ease-in-out infinite;background:var(--ouro);color:var(--preto);border-color:var(--ouro);box-shadow:0 0 18px rgba(255,197,61,.45)}
.mapa:not(.tocado) li:first-child::after{content:"◄ TOQUE";position:absolute;left:44px;top:-13px;font:400 8px/1 var(--pixel);letter-spacing:.1em;color:var(--ouro);animation:pisca 1.2s steps(2) infinite}
.mapa b{display:block;font:800 19px/1.25 var(--titulo);font-stretch:88%;padding-top:6px}
.mapa span{display:block;color:var(--suave);font-size:15px;margin-top:2px}
/* o baú: a sequência é a do jogo Rolê (cai, chama, treme, abre); os quatro quadros da tampa abrindo são novos */
.bau-palco{position:relative;height:330px;margin:8px 0 6px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.bau-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.bau{position:relative;background:none;border:0;padding:0;cursor:pointer;line-height:0;transform-origin:50% 100%}
.bau-quadro{display:block;width:186px;height:220px;background-repeat:no-repeat;background-size:400% 100%;background-position:0 0}
.bau[data-q="1"] .bau-quadro{background-position:33.333% 0}.bau[data-q="2"] .bau-quadro{background-position:66.667% 0}.bau[data-q="3"] .bau-quadro{background-position:100% 0}
.bau.fora{opacity:0}
.bau.cai{animation:cai .78s cubic-bezier(.5,0,1,1) forwards}
@keyframes cai{0%{transform:translateY(-320px) scale(.86,1.18);opacity:1}54%{transform:translateY(0) scale(.86,1.18)}62%{transform:scale(1.22,.78)}75%{transform:scale(.94,1.08)}86%{transform:scale(1.04,.97)}100%{transform:none}}
.bau.chama{animation:chama 1.6s ease-in-out infinite}
@keyframes chama{0%,64%,100%{transform:rotate(0)}70%{transform:rotate(-5deg)}78%{transform:rotate(5deg)}86%{transform:rotate(-3deg)}94%{transform:rotate(2deg)}}
.bau.treme{animation:treme .66s linear forwards}
@keyframes treme{0%{transform:rotate(0)}8%{transform:rotate(-6deg)}20%{transform:rotate(6deg)}28%{transform:rotate(0)}36%{transform:rotate(-9deg)}48%{transform:rotate(9deg)}56%{transform:rotate(0)}64%{transform:rotate(-12deg)}76%{transform:rotate(12deg)}84%{transform:rotate(0)}100%{transform:scale(1.12,.86)}}
.bau.abre{animation:abre .34s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes abre{0%{transform:scale(.9,1.16)}100%{transform:none}}
.bau-dica{font:400 11px/1 var(--pixel);letter-spacing:.14em;color:var(--ouro);margin:16px 0 0;height:12px;animation:pisca 1.2s steps(2) infinite}
.bau-dica.fim{animation:none;color:var(--suave)}
.premios{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.premios li{background:var(--chapa);border:1px solid var(--linha);padding:18px;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.premios li.raro{border-color:var(--ouro);background:linear-gradient(var(--ouro-fundo),var(--chapa))}
.premios.fechado{display:none}
.premios li{animation:premio .6s cubic-bezier(.3,1.5,.5,1) both}
.premios li:nth-child(2){animation-delay:.16s}.premios li:nth-child(3){animation-delay:.32s}.premios li:nth-child(4){animation-delay:.48s}.premios li:nth-child(5){animation-delay:.64s}
@keyframes premio{from{opacity:0;transform:translateY(-70px) scale(.5) rotate(-8deg)}to{opacity:1;transform:none}}
.depois-bau{text-align:center;margin:26px 0 0;animation:entra .6s .9s both}
.premio-n{display:inline-block;font:400 9px/1 var(--pixel);letter-spacing:.1em;color:var(--preto);background:var(--ouro);padding:5px 6px;margin-bottom:12px}
.premios p{color:var(--suave);font-size:15px;margin:0}
/* ficha do personagem */
.ficha{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start}
.retrato{flex:none;width:150px;text-align:center}
.retrato img{display:block;width:150px;height:161px;object-fit:cover;border:2px solid var(--ouro);box-shadow:0 0 0 4px var(--chapa-2),0 0 26px rgba(255,197,61,.2);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.retrato span{display:block;font:400 8px/1.5 var(--pixel);letter-spacing:.08em;color:var(--ouro);margin-top:10px}
.ficha-dados{flex:1;min-width:210px}
.ficha-dados h3{font:900 30px/1 var(--titulo);font-stretch:72%;text-transform:uppercase;margin-bottom:16px}
.atributos{margin:0;display:grid;gap:10px}
.atributos div{display:grid;grid-template-columns:104px 1fr;gap:4px 10px;align-items:center}
.atributos dt{font:400 9px/1.2 var(--pixel);letter-spacing:.06em;color:var(--suave);text-transform:uppercase}
.atributos dd{margin:0}
.atributos .trilho{height:10px;background:var(--chapa-2);border:1px solid var(--linha)}
.atributos .trilho i{display:block;height:100%;width:var(--v);background:var(--ouro);transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.atributos .trilho i.zero{background:var(--perigo)}
.atributos .valor{grid-column:2;font-size:13px;color:var(--texto)}
/* classes */
.classes{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-top:24px}
.classe{text-align:left;background:var(--chapa);border:1px solid var(--linha);color:var(--texto);padding:18px;cursor:pointer;font:inherit;transition:border-color .2s,transform .2s,background .2s}
.classe b{display:block;font:900 22px/1 var(--titulo);font-stretch:74%;text-transform:uppercase;margin-bottom:8px}
.classe span{color:var(--suave);font-size:15px}
.classe[aria-pressed="true"]{border-color:var(--ouro);background:var(--ouro-fundo);transform:translateY(-3px)}
.classe[aria-pressed="true"] b{color:var(--ouro)}
.fala{font:400 11px/1.6 var(--pixel);letter-spacing:.06em;color:var(--ouro);min-height:36px;margin:16px 0 22px}
/* itens e preço */
.itens{list-style:none;margin:0 0 6px;padding:0}
.itens li{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--linha)}
.itens li::before{content:"+";flex:none;font:700 12px/1.9 var(--pixel);color:var(--ouro)}
.preco-caixa{border:1px solid var(--ouro-escuro);background:linear-gradient(var(--ouro-fundo),var(--chapa) 62%);padding:28px 20px;margin-top:24px;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.preco{font:900 86px/0.9 var(--titulo);font-stretch:66%;color:var(--ouro);margin:6px 0 8px;font-variant-numeric:tabular-nums}
.preco sup{font-size:.34em;vertical-align:top;position:relative;top:.35em;margin-right:6px;color:var(--texto)}
.preco-nota{font:400 10px/1.6 var(--pixel);letter-spacing:.08em;color:var(--suave);text-transform:uppercase;margin-bottom:22px}
.preco-caixa .itens{margin-bottom:26px}
.preco-compara{font:800 17px/1.3 var(--titulo);font-stretch:88%;color:var(--texto);margin:-8px 0 22px}
.selos{list-style:none;display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center;margin:16px 0 0;padding:0;font:400 9px/1.4 var(--pixel);letter-spacing:.08em;color:var(--suave);text-transform:uppercase}
.selos li{display:flex;align-items:center;gap:6px}.selos li::before{content:"";width:6px;height:6px;background:var(--fosforo)}
.vida{display:flex;gap:16px;align-items:center;margin-top:24px}
.vida canvas{width:54px;height:54px;flex:none;image-rendering:pixelated;animation:bate 1.3s ease-in-out infinite}
@keyframes bate{0%,60%,100%{transform:scale(1)}30%{transform:scale(1.16)}}
/* perguntas */
details{border-top:1px solid var(--linha)}
details:last-of-type{border-bottom:1px solid var(--linha)}
summary{list-style:none;cursor:pointer;display:flex;gap:14px;align-items:center;padding:18px 0;font:800 19px/1.25 var(--titulo);font-stretch:88%}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";margin-left:auto;flex:none;width:30px;height:30px;border:1px solid var(--linha);font:700 13px/28px var(--pixel);text-align:center;color:var(--ouro)}
details[open] summary::after{content:"-";background:var(--ouro);color:var(--preto);border-color:var(--ouro)}
details p{color:var(--suave);padding-bottom:18px;margin:0;max-width:36rem}
/* fim */
.fim{text-align:center;padding-bottom:40px}
.fim h2{font-size:30px;margin-bottom:28px}
.placar-final{font:400 10px/1.7 var(--pixel);letter-spacing:.08em;color:var(--suave);margin:26px 0 0;min-height:18px}
/* a pista do skate: baixa, fixa no pé da tela, e some quando a skatista sai de cena */
.pista{position:fixed;left:0;right:0;bottom:0;z-index:20;pointer-events:none;padding-bottom:env(safe-area-inset-bottom,0px);background:linear-gradient(rgba(6,6,8,0) 45%,rgba(6,6,8,.9) 78%,var(--preto));transition:opacity .7s,transform .7s}
.pista canvas{display:block;width:100%}
.pista.some{opacity:0;transform:translateY(40px)}
.trancada .pista{display:none}
/* o rodapé: o caminhão do Frete Extremo passando sozinho */
.rodape{position:relative;z-index:5;margin-top:10px;border-top:1px solid var(--linha)}
.rodape canvas{display:block;width:100%}
.rodape-texto{max-width:46rem;margin:0 auto;padding:22px 16px 40px;text-align:center;font-size:13px;line-height:1.8;color:var(--suave)}
.rodape-texto b{display:block;font:400 10px/1.6 var(--pixel);letter-spacing:.1em;color:var(--ouro);margin-bottom:8px}
.rodape-texto small{display:block;margin-top:8px;opacity:.8}
/* TUDO RESPONDE AO TOQUE: a camada das partículas e os movimentos de cada tipo de elemento */
body{-webkit-tap-highlight-color:transparent}
.fx{position:fixed;inset:0;z-index:45;pointer-events:none;overflow:hidden}
.fx i{position:absolute;display:block;animation:voa .75s cubic-bezier(.2,.7,.4,1) forwards}
.fx .faisca{width:6px;height:6px;margin:-3px;background:var(--ouro)}
.fx .faisca.b{background:var(--texto);width:4px;height:4px}
.fx .moeda{width:14px;height:14px;margin:-7px;border-radius:50%;background:var(--ouro);box-shadow:inset -3px -3px 0 var(--ouro-escuro),inset 2px 2px 0 var(--ouro-claro);animation-duration:1s}
.fx .nota{width:34px;height:18px;margin:-9px -17px;background:#7dffb0;border:2px solid #2f9a63;color:#0d3d26;font:700 9px/14px var(--pixel);text-align:center;font-style:normal;animation:nota 1.25s cubic-bezier(.2,.7,.4,1) forwards}
.fx .texto{font:400 11px/1 var(--pixel);letter-spacing:.08em;color:var(--ouro);font-style:normal;white-space:nowrap;transform:translate(-50%,0);animation:sobe 1.1s ease-out forwards;text-shadow:2px 2px 0 var(--preto)}
@keyframes voa{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.4) rotate(var(--r));opacity:0}}
@keyframes nota{0%{transform:translate(0,0) rotate(0);opacity:1}35%{transform:translate(calc(var(--dx)*.6),calc(var(--dy) - 60px)) rotate(var(--r));opacity:1}100%{transform:translate(var(--dx),calc(var(--dy) + 150px)) rotate(calc(var(--r)*-2));opacity:0}}
@keyframes sobe{0%{opacity:0;transform:translate(-50%,6px)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-54px)}}
.t-sacode{animation:sacode .42s steps(6)}
@keyframes sacode{0%,100%{transform:none}20%{transform:translate(-3px,1px) rotate(-.6deg)}40%{transform:translate(3px,-1px) rotate(.6deg);color:var(--ouro)}60%{transform:translate(-2px,0)}80%{transform:translate(2px,1px)}}
.t-aperta{animation:aperta .3s ease}
@keyframes aperta{40%{transform:scale(.965)}100%{transform:none}}
.t-pula{animation:tpula .45s cubic-bezier(.3,1.7,.5,1)}
@keyframes tpula{30%{transform:translateY(-12px) scale(1.12)}100%{transform:none}}
.t-gira{animation:tgira .6s cubic-bezier(.3,1.4,.5,1)}
@keyframes tgira{to{transform:rotate(360deg)}}
.itens li::before,summary::after,.rotulo::before{transition:transform .2s}
.itens li.t-item::before{animation:tgira .55s cubic-bezier(.3,1.4,.5,1)}
.itens li.t-item{animation:brilha .55s ease}
@keyframes brilha{40%{color:var(--ouro);padding-left:8px}100%{padding-left:0}}
.rotulo.t-rot::before{animation:tgira .5s linear}
.mapa li.t-fase::before{animation:vira .5s ease;background:var(--ouro);color:var(--preto);border-color:var(--ouro)}
.mapa li.feita::before{background:var(--ouro);color:var(--preto);border-color:var(--ouro)}
@keyframes vira{50%{transform:rotateY(90deg) scale(1.2)}100%{transform:none}}
.onde li.t-on{background:var(--ouro);color:var(--preto);border-color:var(--ouro);transform:translateY(-3px)}
.onde li{transition:background .2s,color .2s,transform .2s;cursor:pointer}
.preco.t-paga{animation:paga .5s cubic-bezier(.3,1.7,.5,1)}
@keyframes paga{30%{transform:scale(1.12) rotate(-2deg)}60%{transform:scale(.97) rotate(1deg)}100%{transform:none}}
.preco,.placar div,.caso-numeros div,.vida,.marca,.terminal li,.mapa li,.barra-linha,.chapa,.itens li,h1,h2,h3,.frase,.rotulo,.retrato,.atributos div,.tv,.premios li{cursor:pointer}
.terminal li.t-linha{background:rgba(125,255,176,.12)}
.premios li.t-premio{animation:aperta .3s ease;border-color:var(--ouro)}
/* chuva dourada do segredo */
.gota{position:fixed;top:-20px;width:8px;height:8px;background:var(--ouro);z-index:35;pointer-events:none;animation:gota linear forwards}
@keyframes gota{to{transform:translateY(110vh) rotate(360deg);opacity:.2}}
@media (min-width:720px){h1{font-size:76px}.entra{font-size:64px}.marca-nome small{font-size:9px;letter-spacing:.08em}h1.menor{font-size:52px}h2{font-size:52px}.grade{grid-template-columns:repeat(6,1fr)}.placar b{font-size:64px}.fantasma{font-size:260px}.preco{font-size:130px}.tela{padding-block:104px}.frase{font-size:38px}.fim h2{font-size:44px}.bau-quadro{width:254px;height:300px}.bau-palco{height:420px}}
@media (min-width:720px){.ganhos{grid-template-columns:repeat(3,1fr)}.ganhos .chapa{grid-template-columns:1fr;align-items:start}.vitrine img{width:92px;height:92px}.inicio{padding-bottom:56px}.defeitos li{grid-template-columns:140px 1fr}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.vitrine-fita{animation:none}html{scroll-behavior:auto}.pre{opacity:1;transform:none}.pilha i{opacity:1;transform:none}}

/* o vídeo do jogo, na ficha dos jogos */
.ficha-video{margin:0 0 14px;background:#000;border:1px solid var(--linha);display:flex;justify-content:center}
.ficha-video video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#000}
.ficha-video[data-formato="v"] video{width:auto;max-width:100%;height:min(62vh,520px);aspect-ratio:9/16}

/* ---------- IDENTI SOLUÇÕES: o que é só do site do estúdio ---------- */
.marca img,.painel-brasao img{image-rendering:pixelated}
.marca img{filter:drop-shadow(0 0 18px rgba(255,197,61,.35))}
/* a ficha do jogo: destaques, estado e as duas lojas (ainda fechadas) */
.destaques{margin:14px 0 0}
.status{font:400 10px/1.5 var(--pixel);letter-spacing:.08em;color:var(--fosforo);margin:18px 0 10px}
.lojas{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.loja{position:relative;text-align:left;font:900 18px/1.1 var(--titulo);font-stretch:80%;text-transform:uppercase;color:var(--texto);background:var(--chapa-2);border:1px dashed var(--ouro-escuro);padding:12px 14px 12px 44px;cursor:pointer;min-width:0;transition:border-color .2s,background .2s}
.loja small{display:block;font:400 8px/1 var(--pixel);letter-spacing:.1em;color:var(--ouro);margin-bottom:5px}
.loja::before{content:"";position:absolute;left:14px;top:50%;width:18px;height:18px;margin-top:-9px;background:var(--ouro);clip-path:polygon(0 0,100% 50%,0 100%);opacity:.9}
.loja:hover{border-color:var(--ouro);background:var(--ouro-fundo)}
@media (max-width:420px){.loja{font-size:15px;padding-left:38px}.loja::before{left:11px;width:15px;height:15px;margin-top:-7px}}
/* a classe escolhida aponta um jogo */
#ir-jogo{margin:-8px 0 0;color:var(--ouro);border-color:var(--ouro-escuro);font-size:10px;padding:11px 13px}
.fundador-ficha{margin-top:34px}
/* o mapa: o ponto onde os jogos estão hoje */
.mapa li.aqui::before{background:var(--fosforo);border-color:var(--fosforo);color:var(--preto);box-shadow:0 0 18px rgba(125,255,176,.45);animation:bloco 2.6s ease-in-out infinite}
.mapa li.aqui b::after{content:var(--t-aqui,"VOCÊ ESTÁ AQUI");display:inline-block;vertical-align:middle;margin-left:10px;font:400 8px/1 var(--pixel);letter-spacing:.08em;color:var(--preto);background:var(--fosforo);padding:4px 5px 3px}
.mapa:not(.tocado) li:first-child::after{content:none}
.mapa:not(.tocado) li:first-child::before{animation:none;box-shadow:none}
.mapa li.pronta::before{background:var(--ouro);color:var(--preto);border-color:var(--ouro)}
/* os três idiomas, no painel */
.idiomas{display:flex;gap:2px;flex:none}
.idiomas a{font:400 10px/1 var(--pixel);letter-spacing:.04em;color:var(--suave);text-decoration:none;padding:6px 5px 5px;border:1px solid transparent}
.idiomas a:hover{color:var(--texto)}
.idiomas a[aria-current="true"]{color:var(--preto);background:var(--ouro)}
.idiomas a:focus-visible{outline:2px solid var(--texto);outline-offset:2px}
.segmentos{margin-left:auto}.idiomas+.xp{margin-left:2px}
@media (max-width:520px){.painel-nome{display:none}.segmentos{margin-left:0}.idiomas{margin-left:auto}}
/* o catálogo: os seis jogos em texto, lado a lado */
.catalogo{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.catalogo li{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:start;min-width:0;background:var(--chapa);border:1px solid var(--linha);padding:16px;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.catalogo img{display:block;width:64px;height:64px;border:1px solid var(--linha)}
.catalogo h3{font:900 22px/1 var(--titulo);font-stretch:74%;text-transform:uppercase;color:var(--ouro);margin:0 0 6px}
.catalogo .dica{margin:0 0 8px}
.catalogo p{font-size:15px;color:var(--suave);margin:0}
.catalogo .cat-meta{font:400 9px/1.5 var(--pixel);letter-spacing:.08em;color:var(--fosforo);margin-top:10px;text-transform:uppercase}
@media (min-width:720px){.catalogo{grid-template-columns:1fr 1fr}}