/* ===========================================================================
   TEMA GAMER — a casa do /monte-seu-pc desde 09/10/2026.
   ...........................................................................
   É o Passo a passo. A estrutura é a dele, regra por regra: formas, medidas,
   letras, ícones, botões e posição de tudo. Marcar um jogo troca só o "pacote
   de imagens" (pedido do dono): as cores, a arte de fundo e as animações. Nada
   muda de forma nem de lugar — nenhum canto, raio, borda, fonte ou tamanho
   depende da pele.
   ...........................................................................
   Como funciona: <body data-jogo="…">. "passo" é a base; cada jogo só
   redefine as CORES no body e escolhe as suas animações. Os tokens moram no
   body, não no :root, porque o pc-config.js grava as cores do /admin inline no
   <html>. As cores que o Passo a passo escrevia direto na regra (#fff dos
   cartões, o branco sobre o marinho, o vermelho do erro) viraram tokens aqui,
   com o mesmo valor na base — senão uma pele escura teria ilhas brancas.
   =========================================================================== */

body{
  --papel:#F5F7FA; --carta:#FFFFFF; --carta-2:#EEF1F6; --carta-3:#E4E9F1;
  --risco:#DFE5EE; --risco-forte:#C8D2E0;
  --marinho:#0B1B36; --sobre-marinho:#FFFFFF;
  --grafite:#16233C; --grafite-2:#5A6885; --grafite-3:#8B97AD;
  --marca:var(--brand,#A6E22E); --sobre-marca:var(--on-brand,#12200A);
  --confere:#1E9E6A; --aviso:#B4690E;
  --topo:var(--marinho); --topo-tinta:#FFFFFF;
  --escuro:var(--marinho); --escuro-tinta:#FFFFFF;
  --erro:#9B2C2C; --erro-fundo:#FDF2F2; --erro-borda:#F0B4B4; --erro-borda-2:#E0A0A0; --erro-tenue:#B08585;
  --malha:#0b1b3614;
  --r:12px; --r-g:18px;
  --e:cubic-bezier(.2,.7,.3,1);
  --sombra:0 1px 2px #0b1b3610,0 8px 24px -14px #0b1b3626;
  --sombra-forte:0 1px 2px #0b1b3610,0 14px 34px -18px #0b1b3633;
  --sombra-tipo:0 10px 22px #0f1b3a30;
  --arte-pos:50% 40%;
}

/* ---------------------------------------------------------------- as peles
   Só cor. Cada paleta sai da arte do tema — a arte é original, gerada para a
   Patoloco, sem logotipo, personagem nem nome de jogo. */

/* Nightly City (Cyberpunk): metrópole neon à noite */
body[data-jogo="nightly"]{
  --papel:#080A0D; --carta:#0E0E11; --carta-2:#16161A; --carta-3:#1E1E23;
  --risco:#FFFFFF1A; --risco-forte:#E8F52A4D;
  --marinho:#E8F52A; --sobre-marinho:#080A0D;
  --grafite:#EDEDF0; --grafite-2:#A9AAB5; --grafite-3:#8E909B;
  --marca:#E8F52A; --sobre-marca:#080A0D; --confere:#70E2A1; --aviso:#F2B45A;
  --topo:#050608; --escuro:#121216; --escuro-tinta:#EDEDF0;
  --erro:#FF8A73; --erro-fundo:#2A1210; --erro-borda:#FF694F; --erro-borda-2:#C9503B; --erro-tenue:#C98A7E;
  --sombra:0 18px 40px -26px #000; --sombra-forte:0 0 0 1px #E8F52A33,0 0 30px -12px #E8F52A66;
  --sombra-tipo:0 0 24px -6px #E8F52A88;
  --arte-pos:60% 40%;
}
/* Poeira do Deserto (Counter-Strike 2): ocre de deserto e aço */
body[data-jogo="cs2"]{
  --papel:#0D0F12; --carta:#14171C; --carta-2:#1B1F25; --carta-3:#232831;
  --risco:#FFFFFF14; --risco-forte:#E7A13F55;
  --marinho:#E7A13F; --sobre-marinho:#15100A;
  --grafite:#ECEFF3; --grafite-2:#AAB1BC; --grafite-3:#8D96A3;
  --marca:#E7A13F; --sobre-marca:#15100A; --confere:#7CCB8B; --aviso:#F2B45A;
  --topo:#0A0C0F; --escuro:#1A1E24; --escuro-tinta:#ECEFF3;
  --erro:#F08A7C; --erro-fundo:#2A1512; --erro-borda:#D9604F; --erro-borda-2:#B0503F; --erro-tenue:#C9928A;
  --sombra:0 16px 34px -24px #000; --sombra-forte:0 0 0 1px #E7A13F44,0 16px 34px -20px #000;
  --sombra-tipo:0 10px 24px -8px #E7A13F77;
  --arte-pos:55% 55%;
}
/* Protocolo Radiante (Valorant): osso, coral e marinho — a outra pele clara. Cinzas, verde e laranja mais
   escuros que o normal: o texto fica sobre vidro (seção "vidro", lá embaixo). */
body[data-jogo="valorant"]{
  --papel:#ECE8E1; --carta:#F7F5F1; --carta-2:#E4DFD6; --carta-3:#D9D3C8;
  --risco:rgba(15,25,35,.13); --risco-forte:#FF465588;
  --marinho:#0F1923; --sobre-marinho:#ECE8E1;
  --grafite:#0F1923; --grafite-2:#27313B; --grafite-3:#3A444E;
  --marca:#FF4655; --sobre-marca:#0F1923; --confere:#0F5C47; --aviso:#6E3800;
  --topo:#0F1923; --topo-tinta:#ECE8E1; --escuro:#0F1923; --escuro-tinta:#ECE8E1;
  --malha:#0F192310;
  --sombra:0 1px 0 #0F192314,0 10px 24px -18px #0F192344;
  --sombra-forte:inset 0 1px 0 rgba(255,255,255,.6),0 14px 30px -18px #FF465588;
  --sombra-tipo:0 10px 22px -6px #FF465577;
  --arte-pos:50% 45%;
}
/* Vale dos Invocadores (League of Legends): azul da meia-noite e ouro gravado */
body[data-jogo="lol"]{
  --papel:#010A13; --carta:#071425; --carta-2:#0B1C33; --carta-3:#112743;
  --risco:#C8AA6E26; --risco-forte:#C8AA6E80;
  --marinho:#C8AA6E; --sobre-marinho:#010A13;
  --grafite:#F0E6D2; --grafite-2:#B3AC9A; --grafite-3:#968F7E;
  --marca:#C8AA6E; --sobre-marca:#010A13; --confere:#0AC8B9; --aviso:#E9B862;
  --topo:#010A13; --escuro:#0A1A30; --escuro-tinta:#F0E6D2;
  --erro:#F0A39A; --erro-fundo:#24101A; --erro-borda:#C9534A; --erro-borda-2:#A2453E; --erro-tenue:#BF8F8A;
  --sombra:0 18px 40px -26px #000; --sombra-forte:0 0 0 1px #C8AA6E66,0 0 30px -10px #0AC8B955;
  --sombra-tipo:0 0 24px -6px #C8AA6E88;
  --arte-pos:50% 55%;
}
/* Ilha da Tempestade (Fortnite): céu azul e amarelo de destaque */
body[data-jogo="fortnite"]{
  --papel:#0E1748; --carta:#16226A; --carta-2:#1D2C80; --carta-3:#26389A;
  --risco:#FFFFFF24; --risco-forte:#FFE15A88;
  --marinho:#FFE15A; --sobre-marinho:#1A1446;
  --grafite:#FFFFFF; --grafite-2:#CFD7FF; --grafite-3:#AEB9F2;
  --marca:#FFE15A; --sobre-marca:#1A1446; --confere:#6EF0A6; --aviso:#FFC46B;
  --topo:#0A1038; --escuro:#1D2C80; --escuro-tinta:#FFFFFF;
  --erro:#FFB0A6; --erro-fundo:#3A1648; --erro-borda:#FF7A8A; --erro-borda-2:#D45D6E; --erro-tenue:#D9A2B5;
  --sombra:0 18px 40px -24px #050A2E; --sombra-forte:0 0 0 1px #FFE15A55,0 16px 30px -16px #050A2E;
  --sombra-tipo:0 10px 24px -6px #FFE15A88;
  --arte-pos:55% 45%;
}
/* Cidade dos Santos (GTA V): pôr do sol na cidade e verde do dinheiro */
body[data-jogo="gtav"]{
  --papel:#0A0B0A; --carta:#131513; --carta-2:#1A1D1A; --carta-3:#222622;
  --risco:#FFFFFF16; --risco-forte:#5ED17A66;
  --marinho:#5ED17A; --sobre-marinho:#08140C;
  --grafite:#F3F2EE; --grafite-2:#B8BBB2; --grafite-3:#999D93;
  --marca:#5ED17A; --sobre-marca:#08140C; --confere:#5ED17A; --aviso:#F5A54A;
  --topo:#000000; --escuro:#191C19; --escuro-tinta:#F3F2EE;
  --erro:#F59C7C; --erro-fundo:#2A1610; --erro-borda:#F5862A; --erro-borda-2:#C06A22; --erro-tenue:#C9997F;
  --sombra:0 18px 40px -26px #000; --sombra-forte:0 0 0 1px #5ED17A44,0 16px 34px -18px #000;
  --sombra-tipo:0 10px 24px -8px #5ED17A77;
  --arte-pos:50% 50%;
}
/* O Esperado da Década (GTA VI): beira-mar em neon, rosa e laranja de fim de tarde */
body[data-jogo="gta6"]{
  --papel:#11071D; --carta:#1A0C2B; --carta-2:#221137; --carta-3:#2C1747;
  --risco:#FF4FA324; --risco-forte:#FF4FA370;
  --marinho:#FF4FA3; --sobre-marinho:#16061F;
  --grafite:#FFF1F8; --grafite-2:#D7BDDB; --grafite-3:#B096B8;
  --marca:#FF4FA3; --sobre-marca:#16061F; --confere:#36E2D0; --aviso:#FFB25C;
  --topo:#0B0414; --escuro:#221137; --escuro-tinta:#FFF1F8;
  --erro:#FFB3A0; --erro-fundo:#2E0E22; --erro-borda:#FF9F43; --erro-borda-2:#C77A35; --erro-tenue:#D3A0A8;
  --sombra:0 18px 40px -26px #000; --sombra-forte:0 0 0 1px #FF4FA355,0 0 34px -12px #FF4FA388;
  --sombra-tipo:0 0 26px -6px #FF4FA399;
  --arte-pos:45% 50%;
}
/* Liguem os Foguetes (Rocket League): azul contra laranja */
body[data-jogo="rocketleague"]{
  --papel:#060C1A; --carta:#0C152E; --carta-2:#111E3D; --carta-3:#17284E;
  --risco:#4DA3FF24; --risco-forte:#2E8BFF77;
  --marinho:#2E8BFF; --sobre-marinho:#03101F;
  --grafite:#EAF2FF; --grafite-2:#ACBEDC; --grafite-3:#879DC0;
  --marca:#2E8BFF; --sobre-marca:#03101F; --confere:#FFD23F; --aviso:#FF9A3C;
  --topo:#040912; --escuro:#111E3D; --escuro-tinta:#EAF2FF;
  --erro:#FFB08A; --erro-fundo:#2A1608; --erro-borda:#FF8A1E; --erro-borda-2:#C76A17; --erro-tenue:#C99C83;
  --sombra:0 18px 40px -26px #000; --sombra-forte:0 0 0 1px #2E8BFF66,0 0 30px -8px #2E8BFF88;
  --sombra-tipo:0 10px 26px -6px #2E8BFF99;
  --arte-pos:60% 40%;
}
/* Predador do Ápice (Apex Legends): vermelho de alerta e metal escuro */
body[data-jogo="apex"]{
  --papel:#100F0F; --carta:#191818; --carta-2:#211F1F; --carta-3:#2A2727;
  --risco:#FFFFFF14; --risco-forte:#E2312F70;
  --marinho:#D02C2A; --sobre-marinho:#FFFFFF;
  --grafite:#F2EEE9; --grafite-2:#BBB4AC; --grafite-3:#9A938B;
  --marca:#D02C2A; --sobre-marca:#FFFFFF; --confere:#F4A13A; --aviso:#F4A13A;
  --topo:#0A0909; --escuro:#211F1F; --escuro-tinta:#F2EEE9;
  --erro:#FF9E8A; --erro-fundo:#2A1110; --erro-borda:#E2312F; --erro-borda-2:#B02725; --erro-tenue:#C9938A;
  --sombra:0 18px 40px -26px #000; --sombra-forte:0 0 0 1px #E2312F55,0 16px 30px -16px #E2312F66;
  --sombra-tipo:0 10px 24px -8px #E2312FAA;
  --arte-pos:50% 50%;
}
/* Zona Quente (Warzone): verde-oliva e amarelo tático */
body[data-jogo="warzone"]{
  --papel:#0C0E0A; --carta:#14170F; --carta-2:#1B1F15; --carta-3:#23281B;
  --risco:#D8E0C214; --risco-forte:#C8D44A55;
  --marinho:#C8D44A; --sobre-marinho:#0C0E0A;
  --grafite:#EEF0E6; --grafite-2:#B6BAA8; --grafite-3:#979C88;
  --marca:#C8D44A; --sobre-marca:#0C0E0A; --confere:#C8D44A; --aviso:#F0A84A;
  --topo:#080A06; --escuro:#1B1F15; --escuro-tinta:#EEF0E6;
  --erro:#F2A58C; --erro-fundo:#2A1410; --erro-borda:#E35B3B; --erro-borda-2:#B3492F; --erro-tenue:#C49787;
  --sombra:0 18px 40px -26px #000; --sombra-forte:0 0 0 1px #C8D44A44,0 16px 30px -18px #000;
  --sombra-tipo:0 10px 24px -8px #C8D44A88;
  --arte-pos:60% 45%;
}
/* Mundo de Blocos (Minecraft): terra, pedra e grama */
body[data-jogo="minecraft"]{
  --papel:#17140F; --carta:#26221C; --carta-2:#2F2A23; --carta-3:#3A342B;
  --risco:#FFFFFF14; --risco-forte:#7DBB3A99;
  --marinho:#7DBB3A; --sobre-marinho:#0E1608;
  --grafite:#F4F1E8; --grafite-2:#C7C0AE; --grafite-3:#A69E8B;
  --marca:#7DBB3A; --sobre-marca:#0E1608; --confere:#93D44E; --aviso:#E9B44C;
  --topo:#100D09; --escuro:#2F2A23; --escuro-tinta:#F4F1E8;
  --erro:#F2A58C; --erro-fundo:#2A1410; --erro-borda:#C0392B; --erro-borda-2:#962D22; --erro-tenue:#C49787;
  --sombra:0 18px 40px -26px #000; --sombra-forte:0 0 0 1px #7DBB3A55,0 16px 30px -18px #000;
  --sombra-tipo:0 10px 24px -8px #7DBB3A88;
  --arte-pos:50% 60%;
}
/* Dilera (pele avulsa, só por ?jogo=dilera): grafite quente, laranja de fogo e brasa. Texto sobre o laranja é ESCURO
   (5,6:1; branco daria 3,5:1). O turquesa dos banners entra só como acento (vistos e selos de conferido). */
body[data-jogo="dilera"]{
  --papel:#0C0A09; --carta:#161210; --carta-2:#1F1A16; --carta-3:#29221D;
  --risco:#FFFFFF14; --risco-forte:#F94B0466;
  --marinho:#F94B04; --sobre-marinho:#140A05;
  --grafite:#F7F2EC; --grafite-2:#BFB5AA; --grafite-3:#9F958B;
  --marca:#F94B04; --sobre-marca:#140A05; --confere:#2EE6D6; --aviso:#FEBD01;
  --topo:#080605; --escuro:#1D1713; --escuro-tinta:#F7F2EC;
  --erro:#FFA08A; --erro-fundo:#2C110C; --erro-borda:#E5483A; --erro-borda-2:#B83A2E; --erro-tenue:#C9958B;
  --sombra:0 18px 40px -26px #000; --sombra-forte:0 0 0 1px #F94B0466,0 0 30px -12px #F94B0488;
  --sombra-tipo:0 10px 26px -6px #F94B0099;
  --arte-pos:93% 55%;
}
/* Tela baixa (notebook 1280x720): a arte sobe e o rosto ficava atrás do cartão Montar; aqui ela desce um pouco. */
@media (max-height:740px) and (min-width:900px){
  body[data-jogo="dilera"]{--arte-pos:93% 20%}
}
/* A arte da Dilera tem a cena (o pato, ele e a CPU em chamas) no canto de baixo à direita, com céu escuro em volta.
   Do 4:3 ao 2:1 (inclui o 16:9 e a janela de navegador num monitor 16:9) o "cover" mostra a cena inteira. Fora disso
   ele corta: na tela larga (21:9, 32:9) recortava uma faixa do meio e a pessoa saía por baixo; no celular em pé, um
   pedaço estreito cortava o fogo e o pato. Nesses dois formatos a arte passa a ter o tamanho dela (sem recorte dos
   lados), presa no canto de baixo à direita, e a borda que fica dentro da tela some aos poucos no fundo da pele (a
   arte é quase preta ali). */
@media (min-aspect-ratio:2/1){
  /* tela larga: a arte cresce enquanto a pessoa couber num lugar livre: na margem à direita do conteúdo (o conteúdo
     tem 1.540 px no meio; a pessoa ocupa os 0,406 da altura da arte a partir da direita) ou, sem margem, abaixo dos
     cartões da lateral (com a conta de baixo, o topo da cabeça fica por volta dos 660 px, logo abaixo do cartão Montar;
     medido em 1920x947). Vai de 100% (a arte inteira) a 150% (corta só o céu de cima, sobre o fogo). */
  .g-fundo img[data-pele="dilera"]{inset:auto 0 0 auto;width:auto;max-width:none;
    height:clamp(100%,max(calc((50vw - 670px) * 2.46),calc((100% - 615px) * 3.16)),150%);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 45%);mask-image:linear-gradient(90deg,transparent 0,#000 45%)}
}
@media (max-aspect-ratio:4/5){
  /* em pé (celular, tablet): a cena cabe na largura, do cabelo do pato ao fogo; o topo esmaece */
  .g-fundo img[data-pele="dilera"]{inset:auto 0 0 auto;width:auto;max-width:none;height:min(100%,160vw);
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%);mask-image:linear-gradient(180deg,transparent 0,#000 30%)}
}

/* ===========================================================================
   A BASE — o CSS do Passo a passo, com as cores fixas trocadas por token.
   =========================================================================== */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--malha) 1px,transparent 1px),
    linear-gradient(90deg,var(--malha) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse 120% 90% at 50% 0%,#000 35%,transparent 88%);
  mask-image:radial-gradient(ellipse 120% 90% at 50% 0%,#000 35%,transparent 88%)}
body::after{content:"";position:fixed;top:-140px;left:50%;width:min(1100px,120vw);height:420px;
  transform:translateX(-50%);z-index:-1;pointer-events:none;opacity:.26;
  background:radial-gradient(50% 50% at 50% 50%,var(--marca),transparent 72%);
  filter:blur(110px)}
body{background:var(--papel);color:var(--grafite);
  font-family:var(--font-body,'Plus Jakarta Sans',system-ui,sans-serif);line-height:1.55;min-height:100dvh;
  -webkit-font-smoothing:antialiased}
.p-ord,.p-tit,.p-meta b,.p-most .v,.p-total .g,.p-montar,.p-aba,
.p-jogo-n,.p-peca-p{font-family:var(--font-display,'Archivo',system-ui,sans-serif)}
.p-jogo-n,.p-peca-p,.p-aba{font-weight:600}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--marinho);outline-offset:2px;border-radius:6px}
.p-tab{font-variant-numeric:tabular-nums}
.p-wrap{max-width:min(1240px,94vw);margin:0 auto}

/* ---------------------------------------------------------------- topo */
.p-topo{background:var(--topo);color:var(--topo-tinta)}
/* nowrap: o nome da pele mora na mesma linha do logo e não pode descer */
.p-topo .p-wrap{display:flex;align-items:center;gap:16px;min-height:62px;flex-wrap:nowrap}
.p-marca{display:flex;align-items:center;gap:10px;min-height:44px}
.p-marca img{height:26px;width:auto;display:block}
.p-marca span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:color-mix(in srgb,var(--topo-tinta) 55%,transparent);
  border-left:1px solid color-mix(in srgb,var(--topo-tinta) 18%,transparent);padding-left:10px;font-weight:700}
@media (max-width:560px){.p-marca span{display:none}}
/* o nome da pele, à direita do logo — largura fixa: o nome muda, a etiqueta não
   (cabe "Vale dos Invocadores", o mais largo) */
.g-chip{margin-left:auto;flex:0 1 auto;width:232px;min-width:0;display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 12px;
  font-size:12px;font-weight:600;white-space:nowrap;color:color-mix(in srgb,var(--topo-tinta) 75%,transparent);
  border:1px solid color-mix(in srgb,var(--topo-tinta) 22%,transparent);border-radius:999px}
.g-chip b{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--topo-tinta);font-weight:700}
.g-chip i{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--marca)}
@media (max-width:560px){.g-chip{width:172px;font-size:11px;padding:0 8px;gap:6px}.g-chip-rot{display:none}}
/* interruptor "Tema gamer" ao lado da etiqueta: o trilho acende com a cor da pele */
.g-interruptor{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 2px;margin:0;background:none;border:0;
  cursor:pointer;font:inherit;font-size:12px;font-weight:600;white-space:nowrap;color:color-mix(in srgb,var(--topo-tinta) 75%,transparent)}
.g-interruptor-trilho{position:relative;flex:0 0 auto;width:36px;height:20px;border-radius:999px;
  background:color-mix(in srgb,var(--topo-tinta) 24%,transparent);transition:background .2s ease}
.g-interruptor-bola{position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--topo-tinta);
  transition:transform .28s cubic-bezier(.3,1.4,.5,1),background .2s ease}
.g-interruptor[aria-checked="true"] .g-interruptor-trilho{background:var(--marca)}
.g-interruptor[aria-checked="true"] .g-interruptor-bola{transform:translateX(16px);background:var(--sobre-marca)}
.g-interruptor:hover{color:var(--topo-tinta)}
.g-interruptor:focus-visible{outline:2px solid var(--marca);outline-offset:3px;border-radius:8px}
@media (max-width:560px){.g-interruptor-rot{display:none}}
@media (prefers-reduced-motion:reduce){.g-interruptor-trilho,.g-interruptor-bola{transition:none}}

/* ---------------------------------------------------------------- abas */
.p-abas-linha{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:22px 0 18px}
.p-abas{display:flex;gap:4px;padding:5px;background:var(--carta-2);border:1px solid var(--risco);
  border-radius:14px}
.p-aba{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:10px;
  font-size:13.5px;font-weight:600;color:var(--grafite-2);transition:background .15s var(--e),color .15s var(--e)}
.p-aba:hover{color:var(--grafite)}
.p-aba[aria-pressed="true"]{background:var(--marinho);color:var(--sobre-marinho)}
.p-abas-nota{color:var(--grafite-2);font-size:13px;margin-left:auto}
@media (max-width:700px){.p-abas-nota{margin-left:0}}

/* ---------------------------------------------------------------- colunas */
.p-cols{display:grid;gap:20px;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start;
  padding-bottom:60px}
@media (max-width:940px){.p-cols{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- passos */
.p-passos{display:grid;gap:12px}
.p-passo{background:var(--carta);border:1px solid var(--risco);border-radius:var(--r-g);
  box-shadow:var(--sombra);overflow:hidden}
.p-passo.aberto{border-color:var(--risco-forte)}
.p-cab{position:relative}
.p-passo.aberto .p-cab::after{content:"";position:absolute;left:35px;bottom:-1px;width:2px;height:14px;
  background:linear-gradient(var(--marca),transparent)}
.p-cab{display:flex;align-items:center;gap:14px;width:100%;padding:16px 18px;text-align:left}
.p-ord{flex:0 0 auto;width:36px;height:36px;border-radius:10px;background:var(--marinho);color:var(--sobre-marinho);
  display:grid;place-items:center;font-weight:700;font-size:13px;letter-spacing:.02em}
.p-passo.aberto .p-ord{background:var(--marca);color:var(--sobre-marca);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--marca) 22%,transparent)}
@supports not (color:color-mix(in srgb,red,blue)){.p-passo.aberto .p-ord{box-shadow:none}}
.p-passo.aberto{box-shadow:var(--sombra-forte)}
.p-cab-tx{flex:1 1 auto;min-width:0}
.p-cab-tx b{display:block;font-size:15px;font-weight:700;line-height:1.25}
.p-cab-tx span{display:block;font-size:12.5px;color:var(--grafite-2);margin-top:1px}
.p-seta{flex:0 0 auto;width:18px;height:18px;color:var(--grafite-3);transition:transform .2s var(--e)}
.p-passo.aberto .p-seta{transform:rotate(180deg)}
.p-corpo{display:none;padding:0 18px 18px;border-top:1px solid var(--risco)}
.p-passo.aberto .p-corpo{display:block}
.p-diz{font-size:13px;color:var(--grafite-2);padding:14px 0 12px}

/* --- lista de jogos ------------------------------------------------------ */
.p-filtro{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.p-busca{flex:1 1 220px;position:relative;display:flex;align-items:center}
.p-busca svg{position:absolute;left:12px;width:16px;height:16px;color:var(--grafite-3);pointer-events:none}
.p-busca input{width:100%;min-height:44px;padding:10px 34px 10px 36px;font:inherit;font-size:14px;
  color:var(--grafite);background:var(--carta);border:1px solid var(--risco);border-radius:10px}
.p-busca input::placeholder{color:var(--grafite-3)}
.p-busca button{position:absolute;right:6px;width:28px;height:28px;border-radius:7px;color:var(--grafite-3);
  display:grid;place-items:center;font-size:16px;line-height:1}
.p-busca button:hover{background:var(--carta-2);color:var(--grafite)}
.p-tipos{display:flex;gap:4px;padding:4px;background:var(--carta-2);border:1px solid var(--risco);
  border-radius:11px}
.p-tipo{min-height:36px;padding:0 12px;display:inline-flex;align-items:center;border-radius:8px;
  font-size:12.5px;font-weight:600;color:var(--grafite-2)}
.p-tipo[aria-pressed="true"]{background:var(--marinho);color:var(--sobre-marinho)}
.p-tipos-destaque{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0 2px}
.p-tipos-destaque .p-tipos{flex:1 1 300px;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  gap:8px;padding:8px;border-radius:16px;background:var(--carta-2)}
.p-tipos-destaque .p-tipo{min-height:58px;padding:0 14px;justify-content:center;text-align:center;
  font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--grafite);background:var(--carta);
  border:1.5px solid var(--risco);border-radius:12px;
  transition:transform .18s var(--e),box-shadow .18s var(--e),background .18s var(--e),color .18s var(--e),border-color .18s var(--e)}
.p-tipos-destaque .p-tipo:hover{transform:translateY(-2px);box-shadow:var(--sombra);border-color:var(--marinho)}
.p-tipos-destaque .p-tipo[aria-pressed="true"]{background:var(--marinho);color:var(--sobre-marinho);border-color:var(--marinho);
  transform:translateY(-2px);box-shadow:var(--sombra-tipo);animation:p-tipo-entra .34s var(--e)}
.p-tipos-destaque .p-tipo[aria-pressed="true"]::after{content:"";position:absolute;left:14px;right:14px;
  bottom:7px;height:3px;border-radius:3px;background:color-mix(in srgb,var(--sobre-marinho) 80%,transparent);
  animation:p-tipo-risco .34s var(--e)}
.p-tipos-destaque .p-tipo{position:relative}
@keyframes p-tipo-entra{0%{transform:translateY(-2px) scale(.95)}55%{transform:translateY(-2px) scale(1.04)}100%{transform:translateY(-2px) scale(1)}}
@keyframes p-tipo-risco{0%{transform:scaleX(0);opacity:0}100%{transform:scaleX(1);opacity:1}}
.p-tipos-destaque .p-mudar{margin-left:0}
@media(max-width:560px){
  .p-tipos-destaque .p-tipos{grid-auto-flow:row;grid-auto-columns:auto}
  .p-tipos-destaque .p-tipo{min-height:52px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .p-tipos-destaque .p-tipo,.p-tipos-destaque .p-tipo:hover{transform:none;animation:none}
  .p-tipos-destaque .p-tipo[aria-pressed="true"]::after{animation:none}
}
.p-mudar{margin-left:auto;font-size:12.5px;color:var(--grafite-2);text-decoration:underline;
  min-height:36px;display:inline-flex;align-items:center}
.p-mudar:hover{color:var(--grafite)}
/* aqui não há pop-up de entrada pra reabrir */
.p-mudar[hidden]{display:none}
.p-vazio{grid-column:1/-1;padding:22px 4px;text-align:center;color:var(--grafite-3);font-size:13px}
.p-fonte{margin-top:10px;font-size:11.5px;color:var(--grafite-3);line-height:1.5}
.p-fonte b{color:var(--grafite-2);font-weight:600}
.p-jogos{display:grid;gap:9px;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));
  max-height:420px;overflow-y:auto;padding-right:6px}
.p-jogos::-webkit-scrollbar{width:8px}
.p-jogos::-webkit-scrollbar-thumb{background:var(--risco-forte);border-radius:4px}
.p-jogo{display:flex;align-items:center;gap:13px;min-height:74px;padding:10px 13px;text-align:left;
  background:var(--carta-2);border:1px solid transparent;border-radius:var(--r);
  transition:border-color .15s var(--e),background .15s var(--e)}
.p-jogo{transform:translateY(0)}
.p-jogo:hover{background:var(--carta-3);transform:translateY(-1px);box-shadow:var(--sombra)}
.p-jogo[aria-pressed="true"]{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.p-jogo,.p-jogo:hover{transform:none}}
.p-jogo[aria-pressed="true"]{background:var(--carta);border-color:var(--marinho);box-shadow:var(--sombra);
  position:relative;padding-left:19px}
.p-jogo[aria-pressed="true"]::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:4px;
  border-radius:0 4px 4px 0;background:var(--marca)}
.p-jogo[disabled]{opacity:.4;cursor:not-allowed}
.p-ic{flex:0 0 auto;width:54px;height:54px;border-radius:11px;display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:16px;letter-spacing:.01em;overflow:hidden;position:relative;
  box-shadow:inset 0 0 0 1px #0b1b3614}
.p-ic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.p-ic svg{width:26px;height:26px;color:#fff;position:relative}
.p-ic.marca svg{color:inherit}
.p-ic.marca svg{width:30px;height:30px}
.p-ic.prog{box-shadow:inset 0 0 0 1px #ffffff26}
/* foto de produto é sobre branco em toda pele: é assim que ela vem da loja */
.p-peca-img{flex:0 0 auto;width:42px;height:42px;border-radius:8px;background:#fff;
  border:1px solid var(--risco);object-fit:contain;padding:3px}
.p-jogo-tx{flex:1 1 auto;min-width:0}
.p-jogo-n{display:block;font-size:13.5px;font-weight:600;line-height:1.25;overflow-wrap:anywhere}
.p-jogo-f{display:block;font-size:11px;color:var(--grafite-3);margin-top:1px}
.p-jogo-f.aviso{color:var(--aviso)}
.p-jogo-f.porque{color:var(--grafite-2)}
.p-piso{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));margin-bottom:14px}
.p-piso-i{padding:11px 12px;background:var(--carta-2);border-radius:var(--r);border:1px solid transparent}
.p-piso-i.falta{border-color:var(--erro-borda);background:var(--erro-fundo)}
.p-piso-i .r{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--grafite-3);font-weight:700}
.p-piso-i .v{font-size:18px;font-weight:800;margin-top:2px}
.p-piso-i .o{font-size:11px;color:var(--grafite-2);margin-top:2px;line-height:1.35}
.p-cx{flex:0 0 auto;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--risco-forte);
  background:var(--carta);display:grid;place-items:center;color:transparent}
.p-jogo[aria-pressed="true"] .p-cx{background:var(--marinho);border-color:var(--marinho);color:var(--sobre-marinho)}
.p-cx svg{width:12px;height:12px}
/* botão "Tema" dos jogos que têm pele (temas.js): fica fora do chip (botão não vai dentro de botão), num invólucro
   que ocupa a casa do chip na grade; o chip reserva a faixa da direita para ele. Aceso = o tema que está na tela.
   Só cor muda com o estado e com a pele: tamanho, letra e lugar são os mesmos em todas. */
.g-com-tema{position:relative;display:grid;min-width:0}
.g-com-tema>.p-jogo{width:100%;padding-right:76px}
.g-tema-bt{position:absolute;top:8px;right:8px;bottom:8px;width:56px;min-height:44px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  border:1px solid var(--risco-forte);border-radius:9px;background:var(--carta);color:var(--grafite-2);
  font-family:var(--font-display,'Archivo',system-ui,sans-serif);font-size:11px;font-weight:700;line-height:1;letter-spacing:.02em;
  transition:background .15s var(--e),color .15s var(--e),border-color .15s var(--e)}
.g-tema-bt svg{width:18px;height:18px;flex:0 0 auto}
.g-tema-bt:hover{color:var(--grafite);border-color:var(--marinho);background:var(--carta-3)}
.g-tema-bt[aria-pressed="true"]{background:var(--marca);border-color:var(--marca);color:var(--sobre-marca)}

/* --- metas e opções ----------------------------------------------------- */
.p-metas{display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
#blocoJogo:not([hidden])~#escalas{margin-top:20px;padding-top:16px;
  border-top:1px solid var(--risco)}
#blocoJogo:not([hidden])~#escalas::before{content:"Escala do projeto — para os programas";
  grid-column:1/-1;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grafite-3);font-weight:700;margin-bottom:2px}
.p-corpo:has(#escalas:not([hidden])) #metas::before{content:"Meta de quadros — para os jogos";
  grid-column:1/-1;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grafite-3);font-weight:700;margin-bottom:2px}
.p-meta{padding:13px 14px;text-align:left;background:var(--carta-2);border:1px solid transparent;
  border-radius:var(--r);transition:border-color .15s var(--e),background .15s var(--e)}
.p-meta:hover{background:var(--carta-3)}
.p-meta{position:relative}
.p-meta[aria-pressed="true"]{background:var(--carta);border-color:var(--marinho);box-shadow:var(--sombra)}
.p-meta[aria-pressed="true"]::before{content:"";position:absolute;left:0;top:11px;bottom:11px;width:4px;
  border-radius:0 4px 4px 0;background:var(--marca)}
.p-meta b{display:block;font-size:17px;font-weight:800}
.p-meta span{display:block;font-size:12px;color:var(--grafite-2);margin-top:2px}
.p-campo{margin-top:16px}
.p-rot{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grafite-3);
  font-weight:700;margin-bottom:8px}
.p-ops{display:flex;gap:7px;flex-wrap:wrap}
.p-op{min-height:44px;padding:0 13px;display:inline-flex;align-items:center;font-size:13px;
  border:1px solid var(--risco);border-radius:9px;color:var(--grafite-2);background:var(--carta)}
.p-op:hover{border-color:var(--risco-forte);color:var(--grafite)}
.p-op[aria-pressed="true"]{border-color:var(--marinho);color:var(--marinho);font-weight:600;background:var(--carta)}
.p-txt{width:100%;max-width:360px;min-height:44px;padding:10px 13px;font:inherit;font-size:14px;
  color:var(--grafite);background:var(--carta);border:1px solid var(--risco);border-radius:9px}
.p-txt::placeholder{color:var(--grafite-3)}
.p-fps{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.p-fps input[type=range]{flex:1 1 200px;min-width:150px;accent-color:var(--marinho);height:44px}
.p-fps b{font-size:22px;font-weight:800}
.p-ajuda{margin-top:7px;font-size:12px;color:var(--grafite-3);max-width:58ch}

/* ---------------------------------------------------------------- direita */
.p-lado{display:grid;gap:14px;position:sticky;top:16px}
@media (max-width:940px){.p-lado{position:static}}
.p-cartao{background:var(--carta);border:1px solid var(--risco);border-radius:var(--r-g);padding:20px;
  box-shadow:var(--sombra)}
.p-cartao.escuro{background:var(--escuro);color:var(--escuro-tinta);border-color:transparent;
  position:relative;overflow:hidden}
.p-cartao.escuro::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--marca),transparent 65%)}
.p-cartao.escuro .p-sub{color:color-mix(in srgb,var(--escuro-tinta) 69%,transparent)}
.p-olho{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grafite-3);font-weight:700;
  display:flex;align-items:center;gap:8px}
.p-olho::before{content:"";width:14px;height:2px;border-radius:2px;background:var(--marca);flex:0 0 auto}
.p-cartao.escuro .p-olho{color:color-mix(in srgb,var(--escuro-tinta) 55%,transparent)}
.p-tit{font-size:21px;font-weight:800;line-height:1.2;margin-top:7px;letter-spacing:-.01em}
.p-sub{font-size:13.5px;color:var(--grafite-2);margin-top:9px}
.p-checks{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin-top:16px}
.p-check{display:flex;align-items:center;gap:8px;font-size:13px}
.p-check svg{flex:0 0 auto;width:15px;height:15px;color:var(--confere)}
.p-cartao.escuro .p-check svg{color:var(--marca)}
.p-montar{width:100%;min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--marca);color:var(--sobre-marca);font-weight:800;font-size:15px;border-radius:11px;
  transition:filter .15s var(--e)}
.p-montar{position:relative;overflow:hidden}
.p-montar:hover{filter:brightness(1.06)}
.p-montar::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-50%;
  background:linear-gradient(90deg,transparent,#ffffff5c,transparent);transform:skewX(-18deg)}
.p-montar:hover::after{animation:p-brilho .6s ease-out}
@keyframes p-brilho{to{left:130%}}
@media (prefers-reduced-motion:reduce){.p-montar:hover::after{animation:none}}
.p-montar[disabled]{opacity:.45;cursor:not-allowed;filter:none}
.p-resumo{font-size:12.5px;color:var(--grafite-2);margin-top:10px;text-align:center}

/* --- resultado ---------------------------------------------------------- */
.p-leitura{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));margin-bottom:14px}
.p-most{padding:13px 14px;background:var(--carta-2);border-radius:var(--r)}
.p-most .r{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--grafite-3);font-weight:700}
.p-most .v{font-size:24px;font-weight:800;margin-top:3px;line-height:1.1}
.p-most .o{font-size:11.5px;color:var(--grafite-2);margin-top:3px;line-height:1.4}
.p-most.bate .v{color:var(--confere)}
.p-most.bate{border:1px solid color-mix(in srgb,var(--confere) 35%,transparent);
  background:color-mix(in srgb,var(--confere) 7%,var(--carta-2))}
.p-most.bate .r::after{content:" ✓";color:var(--confere);font-weight:800}
.p-pecas{display:grid;gap:7px}
.p-peca{display:flex;align-items:center;gap:11px;padding:10px 12px;background:var(--carta-2);
  border-radius:10px;min-height:58px;transition:background .15s var(--e)}
a.p-peca:hover{background:var(--carta-3)}
.p-peca-t{flex:0 0 66px;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--grafite-3);
  font-weight:700}
.p-peca-n{flex:1 1 auto;min-width:0;font-size:12.5px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.p-peca-p{flex:0 0 auto;font-size:12.5px;font-weight:700;white-space:nowrap}
.p-total{margin-top:14px;padding:14px 16px;border-radius:var(--r);border:1px solid var(--risco);
  background:linear-gradient(180deg,var(--carta-2),var(--carta));position:relative;overflow:hidden}
.p-total::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--marca),transparent 70%)}
.p-total .g{font-size:26px;font-weight:800}
.p-total .pix{font-size:13px;color:var(--confere);font-weight:600}
.p-total .parc{font-size:12px;color:var(--grafite-2)}
.p-acoes{display:grid;gap:8px;margin-top:14px}
.p-bt{min-height:48px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;
  border:1px solid var(--risco-forte);font-size:14px;font-weight:600;background:var(--carta)}
.p-bt:hover{border-color:var(--marinho)}
.p-bt.forte{background:var(--marca);color:var(--sobre-marca);border-color:transparent}
.p-notas{display:grid;gap:6px;margin-top:12px}
.p-nota{font-size:12px;color:var(--grafite-2);padding-left:14px;position:relative;line-height:1.45}
.p-nota::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;
  background:var(--grafite-3)}
.p-erro{padding:14px 16px;border:1px solid var(--erro-borda);background:var(--erro-fundo);border-radius:var(--r);
  color:var(--erro);font-size:13.5px}
.p-erro-acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.p-erro-bt{min-height:44px;padding:0 14px;display:inline-flex;align-items:center;border-radius:9px;
  border:1px solid var(--erro-borda-2);font-size:13px;font-weight:600;color:var(--erro);background:var(--carta)}
.p-erro-por{margin-top:7px;font-size:11.5px;color:var(--erro-tenue)}
.p-video{display:none;width:100%;max-width:420px;margin:0 auto 14px;border-radius:var(--r-g);
  border:1px solid var(--risco);background:var(--carta-2)}
.p-video.aparece{display:block}
.p-palco{margin:14px 0;border-radius:var(--r-g);overflow:hidden;border:1px solid var(--risco)}
.p-carregando{display:flex;gap:10px;align-items:center;color:var(--grafite-2);font-size:13.5px;padding:16px 0}
.p-carregando.coluna{flex-direction:column;gap:14px;text-align:center}
.p-giro{width:17px;height:17px;border:2px solid var(--risco-forte);border-top-color:var(--marinho);
  border-radius:50%;animation:p-gira .8s linear infinite}
@keyframes p-gira{to{transform:rotate(360deg)}}
.p-esq{height:56px;border-radius:var(--r);background:linear-gradient(90deg,var(--carta-2),var(--carta-3),var(--carta-2));
  background-size:200% 100%;animation:p-brilha 1.3s ease-in-out infinite}
@keyframes p-brilha{to{background-position:-200% 0}}
.m1-cursor,.m1-progress,.m1-pageout,.m1-btt,.m1-particles,.m1-toast{display:none!important}

/* ------------------------------------------------- vistas de dentro e lateral */
#vistaSugeridos,#vistaKits{
  --bg:var(--papel); --surface:var(--carta); --surface-2:var(--carta-2); --surface-3:var(--carta-3);
  --text:var(--grafite); --text-2:var(--grafite-2); --text-3:var(--grafite-3);
  --border:var(--risco); --border-strong:var(--risco-forte);
  --brand:var(--marca); --brand-bright:var(--marca); --on-brand:var(--sobre-marca);
  --brand-border:var(--risco-forte); --brand-tint:color-mix(in srgb,var(--marinho) 4%,transparent);
  --brand-tint-soft:color-mix(in srgb,var(--marinho) 2.5%,transparent);
  --accent-2:var(--marinho);
  --radius:var(--r); --radius-sm:8px; --radius-lg:var(--r-g);
  --shadow:var(--sombra); --shadow-brand:var(--sombra);
  padding:22px 0 50px}
#vistaSugeridos .rp-card,#vistaKits .kitc{background:var(--carta);box-shadow:var(--sombra)}
#vistaSugeridos .pc3d-thumb{background:var(--carta-2)}
/* a lateral (atalhos.js) com as cores da pele; na base, as mesmas do Passo a passo */
body nav.pc-barra.pc-sidebar{--pc-panel:var(--carta);--pc-ink:var(--grafite);--pc-line:var(--risco);
  --pc-accent:var(--marca);--pc-on:var(--sobre-marca);box-shadow:var(--sombra)}
body[data-jogo="passo"] nav.pc-barra.pc-sidebar{--pc-panel:#fff;--pc-ink:#16233c;--pc-line:#dce3ed;--pc-on:#12200a}
.pc-at.aqui b{color:var(--sobre-marinho)}
.pc-rodape{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
  margin:34px auto 10px;padding-top:22px;border-top:1px solid var(--risco)}
.pc-rodape .pc-at{font-size:12.5px;color:var(--grafite-2);padding:8px 12px;transition:color .15s}
.pc-rodape .pc-at:hover{color:var(--marinho)}
.pc-rodape .pc-at b{font-weight:600}
.pc-rodape .pc-at span{display:none}
.p-pula{position:absolute;left:-9999px}
.p-pula:focus{left:12px;top:12px;position:fixed;z-index:60;background:var(--marinho);color:var(--sobre-marinho);
  padding:10px 14px;border-radius:9px;font-weight:700}

/* ===========================================================================
   O PACOTE DE IMAGENS — fundo, troca e animações. Nada daqui ocupa espaço.
   =========================================================================== */

/* nas peles, quem lê as cores do /admin (painel de comparar, 3D, janelas) passa a
   ler as da pele; na base fica como no Passo a passo */
body:not([data-jogo="passo"]){
  --bg:var(--papel); --surface:var(--carta); --surface-2:var(--carta-2); --surface-3:var(--carta-3);
  --text:var(--grafite); --text-2:var(--grafite-2); --text-3:var(--grafite-3);
  --border:var(--risco); --border-strong:var(--risco-forte);
  --brand:var(--marca); --brand-bright:var(--marca); --on-brand:var(--sobre-marca)}

/* nas peles a malha e o sopro de cor da base dão lugar à arte */
body:not([data-jogo="passo"])::before,body:not([data-jogo="passo"])::after{opacity:0}
body::before,body::after{transition:opacity .2s ease}

/* a arte: uma camada por pele, todas já na página (temas.js); o clique só acende
   a da pele nova — nada carrega, nada cresce, nada desliza */
.g-fundo{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:0;transition:opacity .2s ease}
body:not([data-jogo="passo"]) .g-fundo{opacity:1}
.g-fundo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--arte-pos);
  opacity:0;transition:opacity .2s ease}
.g-fundo img.ativa{opacity:1}
/* um véu leve do chão da pele, mais forte embaixo; quem dá leitura é o vidro dos painéis */
.g-fundo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 0,color-mix(in srgb,var(--papel) 14%,transparent) 420px,
    color-mix(in srgb,var(--papel) 30%,transparent) 100%)}
@supports not (color:color-mix(in srgb,red,blue)){.g-fundo::after{background:linear-gradient(180deg,transparent,var(--papel) 90%)}}
/* o pouco texto que fica direto sobre a arte (fora do vidro): letra clara e um halo largo escuro, que forma
   uma nuvem atrás das letras (no Protocolo Radiante também: ali a arte é escura onde esse texto mora) */
body:not([data-jogo="passo"]){--halo:var(--papel); --tinta-solta:var(--grafite)}
body[data-jogo="valorant"]{--halo:#0F1923; --tinta-solta:#F7F5F1}
body:not([data-jogo="passo"]) :is(.p-abas-nota,.pc-rodape .pc-at){color:var(--tinta-solta);
  text-shadow:0 0 1px var(--halo),0 0 3px var(--halo),0 0 6px var(--halo),0 0 10px var(--halo),0 0 16px var(--halo),0 0 24px var(--halo)}

/* Na troca a página vira inteira de uma vez (temas.js): nenhuma peça transiciona sozinha — senão o destaque
   mudava antes do fundo e a página passava por um meio-termo. A fusão das duas fotos da página (View Transition)
   dura 0,2 s; sem View Transition, é um corte seco. Fora da troca, cada peça mantém a transição dela. */
body.g-trocando,body.g-trocando *,body.g-trocando *::before,body.g-trocando *::after{transition:none!important}
::view-transition-old(root),::view-transition-new(root){animation-duration:.2s;animation-timing-function:ease}

/* ---------------------------------------------------------------- vidro (pedido do dono, 10/10)
   Em toda pele de jogo os painéis são vidro: transparentes, com a arte desfocada por trás. Só os painéis de
   fora desfocam; o que mora dentro deles leva um véu bem leve — vidro sobre vidro soma opacidade e a área
   fica fosca. Sem suporte a desfoque, as peles ficam com as cores sólidas lá de cima; quem pediu menos
   transparência no sistema recebe os mesmos painéis quase opacos. */
body[data-jogo="nightly"]{--vidro:14,14,17}
body[data-jogo="cs2"]{--vidro:20,23,28}
body[data-jogo="valorant"]{--vidro:247,245,241}
body[data-jogo="lol"]{--vidro:7,20,37}
body[data-jogo="fortnite"]{--vidro:22,34,106}
body[data-jogo="gtav"]{--vidro:19,21,19}
body[data-jogo="gta6"]{--vidro:26,12,43}
body[data-jogo="rocketleague"]{--vidro:12,21,46}
body[data-jogo="apex"]{--vidro:25,24,24}
body[data-jogo="warzone"]{--vidro:20,23,15}
body[data-jogo="minecraft"]{--vidro:38,34,28}
body[data-jogo="dilera"]{--vidro:22,18,15}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  /* Quem dá leitura é o FILTRO, não a tinta: ele desfoca a arte, aperta o contraste dela (contrast) e a põe
     num tom só (brightness) — a arte continua aparecendo, com cor e desenho, mas a letra lê em cima de qualquer
     pedaço dela. Por isso a tinta do vidro pode ser fina. Conferido pixel a pixel com contraste-peles.cjs.
     Peles escuras: vidro fumê, o fundo escurecido; letra secundária mais perto da principal. */
  body:not([data-jogo="passo"]){
    --a-painel:.28; --a-topo:.4; --a-escuro:.45; --vidro-blur:26px;
    --carta:rgba(var(--vidro),var(--a-painel)); --carta-2:rgba(255,255,255,.04); --carta-3:rgba(255,255,255,.1);
    --topo:rgba(var(--vidro),var(--a-topo)); --escuro:rgba(var(--vidro),var(--a-escuro));
    --grafite-2:color-mix(in srgb,var(--grafite) 92%,var(--papel)); --grafite-3:color-mix(in srgb,var(--grafite) 86%,var(--papel));
    --sombra:inset 0 1px 0 rgba(255,255,255,.09),0 24px 48px -30px rgba(0,0,0,.75);
    --filtro-vidro:blur(var(--vidro-blur)) saturate(160%) contrast(.6) brightness(.5);
    --filtro-escuro:var(--filtro-vidro)}
  /* Protocolo Radiante: vidro claro, o fundo clareado; topo e cartão escuro usam o filtro escuro */
  body[data-jogo="valorant"]{
    --a-painel:.38; --a-topo:.45; --a-escuro:.5;
    --carta-2:rgba(255,255,255,.22); --carta-3:rgba(255,255,255,.4);
    --topo:rgba(15,25,35,var(--a-topo)); --escuro:rgba(15,25,35,var(--a-escuro));
    --grafite-2:color-mix(in srgb,var(--grafite) 86%,var(--papel)); --grafite-3:color-mix(in srgb,var(--grafite) 82%,var(--papel));
    --confere:#0A4434; --aviso:#5C2E00;
    --sombra:inset 0 1px 0 rgba(255,255,255,.6),0 18px 40px -26px rgba(15,25,35,.45);
    --filtro-vidro:blur(var(--vidro-blur)) saturate(150%) contrast(.4) brightness(1.6);
    --filtro-escuro:blur(var(--vidro-blur)) saturate(150%) contrast(.6) brightness(.5)}
  @media (max-width:640px){body:not([data-jogo="passo"]){--vidro-blur:16px}}
  body:not([data-jogo="passo"]) :is(.p-abas,.p-passo,.p-cartao:not(.escuro),nav.pc-barra.pc-sidebar,#vistaSugeridos .rp-card,#vistaKits .kitc){
    -webkit-backdrop-filter:var(--filtro-vidro);backdrop-filter:var(--filtro-vidro)}
  body:not([data-jogo="passo"]) :is(.p-topo,.p-cartao.escuro){
    -webkit-backdrop-filter:var(--filtro-escuro);backdrop-filter:var(--filtro-escuro)}
  /* a barra das abas é painel de fora: leva a tinta do painel, não o véu de dentro */
  body:not([data-jogo="passo"]) .p-abas{background:var(--carta)}
  /* o desfoque prende position:fixed de dentro: o 3D em modo cinema (sem tela cheia nativa) ficaria preso no cartão */
  body:not([data-jogo="passo"]) .p-cartao:has(.pc3d.cinema){-webkit-backdrop-filter:none;backdrop-filter:none}
  /* o escolhido ganha um tom da cor da pele em vez de um vidro mais grosso */
  body:not([data-jogo="passo"]) :is(.p-jogo,.p-meta)[aria-pressed="true"]{background:color-mix(in srgb,var(--marca) 16%,transparent)}
  body:not([data-jogo="passo"]) .p-op[aria-pressed="true"]{background:color-mix(in srgb,var(--marca) 14%,transparent);color:var(--grafite)}
  body:not([data-jogo="passo"]) .p-cartao.escuro .p-olho{color:color-mix(in srgb,var(--escuro-tinta) 68%,transparent)}
}
@media (prefers-reduced-transparency:reduce){
  body:not([data-jogo="passo"]){--a-painel:.96; --a-topo:.97; --a-escuro:.97}
  body:not([data-jogo="passo"]) :is(.p-topo,.p-abas,.p-passo,.p-cartao,nav.pc-barra.pc-sidebar,#vistaSugeridos .rp-card,#vistaKits .kitc){
    -webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ---------------------------------------------------------------- movimento (estilo Apple)
   Mola no toque, revelação suave. É tudo passageiro: em repouso nada sai de forma nem de lugar. O "scale"
   e o "translate" soltos somam com o transform que a peça já tem, sem brigar com ele. */
body{--mola:cubic-bezier(.34,1.56,.64,1); --suave:cubic-bezier(.22,1,.36,1)}
body:not([data-jogo="passo"]) :is(.p-jogo,.p-meta,.p-op,.p-aba,.p-tipo,.p-bt,.p-montar,.p-erro-bt,.p-cab,
  nav.pc-sidebar .pc-bi,nav.pc-sidebar .pc-precos :is(a,button),.pc-review-tools button){
  transition:transform .45s var(--mola),scale .45s var(--mola),background-color .3s var(--suave),
    border-color .3s var(--suave),box-shadow .35s var(--suave),color .3s var(--suave),filter .2s var(--suave)}
/* passar por cima: cresce um tico; apertar: afunda e volta com mola */
body:not([data-jogo="passo"]) :is(.p-jogo,.p-meta):hover:not([disabled]){scale:1.015}
body:not([data-jogo="passo"]) .p-montar:hover:not([disabled]){scale:1.02}
body:not([data-jogo="passo"]) :is(.p-jogo,.p-meta,.p-op,.p-aba,.p-tipo,.p-bt,.p-montar,.p-erro-bt,
  nav.pc-sidebar .pc-bi,nav.pc-sidebar .pc-precos :is(a,button),.pc-review-tools button):active:not([disabled]){scale:.96;transition-duration:.12s}
body:not([data-jogo="passo"]) .p-cab:active{scale:.99;transition-duration:.12s}
body:not([data-jogo="passo"]) .g-tema-bt{transition:scale .45s var(--mola),background-color .3s var(--suave),
  border-color .3s var(--suave),color .3s var(--suave)}
body:not([data-jogo="passo"]) .g-tema-bt:active{scale:.94;transition-duration:.12s}
/* a etapa que abre desliza pra dentro; o resultado surge do desfoque. Valem em TODA pele, inclusive a base:
   se só valessem nas peles, a troca base→pele faria as etapas e o resultado entrarem de novo, e o clique no
   jogo pareceria recarregar a página (o dono quer a troca "como se já tivesse carregado antes"). Pelo mesmo
   motivo a troca de pele não tem animação própria: só as cores e a arte mudam. */
.p-passo.aberto .p-corpo{animation:g-abre .55s var(--suave)}
@keyframes g-abre{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}
#res:not([hidden]){animation:g-surge .8s var(--suave)}
@keyframes g-surge{from{opacity:0;translate:0 16px;filter:blur(10px)}to{opacity:1;translate:0 0;filter:none}}

/* ---------------------------------------------------------------- animações de cada pele
   Só movimento e luz, nas peças que já existem. Forma e lugar não mudam. */

/* Nightly City: o número da etapa aberta pisca como letreiro de neon */
body[data-jogo="nightly"] .p-passo.aberto .p-ord{animation:g-neon 4s steps(1) infinite}
@keyframes g-neon{0%,100%{opacity:1}92%{opacity:1}93%{opacity:.35}94%{opacity:1}96%{opacity:.5}97%{opacity:1}}
body[data-jogo="nightly"] .p-montar::after{background:linear-gradient(90deg,transparent,#ffffffa0,transparent)}

/* Poeira do Deserto: o fio do cartão de cima varre como mira de HUD */
body[data-jogo="cs2"] .p-cartao.escuro::before{background:linear-gradient(90deg,transparent,var(--marca),transparent);
  background-size:40% 100%;background-repeat:no-repeat;animation:g-mira 3.2s ease-in-out infinite}
@keyframes g-mira{0%,100%{background-position:0 0}50%{background-position:100% 0}}

/* Protocolo Radiante: no hover o marinho atravessa o botão da esquerda pra direita */
body[data-jogo="valorant"] .p-montar:not([disabled]){background:linear-gradient(90deg,var(--marinho) 50%,var(--marca) 50%);
  background-size:202% 100%;background-position:100% 0;transition:background-position .35s var(--e),color .35s var(--e)}
body[data-jogo="valorant"] .p-montar:not([disabled]):hover{background-position:0 0;color:var(--escuro-tinta);filter:none}
body[data-jogo="valorant"] .p-montar:hover::after{animation:none}

/* Vale dos Invocadores: o ouro do fio corre devagar, o botão acende em azul arcano */
body[data-jogo="lol"] .p-cartao.escuro::before{background:linear-gradient(90deg,transparent,#F0E6D2,var(--marca),transparent);
  background-size:50% 100%;background-repeat:no-repeat;animation:g-ouro 5s linear infinite}
@keyframes g-ouro{0%{background-position:-60% 0}100%{background-position:160% 0}}
body[data-jogo="lol"] .p-montar:not([disabled]):hover{filter:none;box-shadow:0 0 0 1px #0AC8B9,0 0 22px -4px #0AC8B9}
body[data-jogo="lol"] .p-montar{transition:filter .15s var(--e),box-shadow .25s var(--e)}

/* Ilha da Tempestade: tudo pula mais no toque, como em jogo de desenho */
body[data-jogo="fortnite"] .p-jogo:hover{transform:translateY(-3px)}
body[data-jogo="fortnite"] .p-montar:not([disabled]):hover{animation:g-mola .45s var(--e)}
@keyframes g-mola{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}}

/* Cidade dos Santos: o fio do cartão de cima ganha o pôr do sol */
body[data-jogo="gtav"] .p-cartao.escuro::before{background:linear-gradient(90deg,#F5862A,#F2C14E 45%,var(--marca) 70%,transparent)}
body[data-jogo="gtav"] .p-montar::after{background:linear-gradient(90deg,transparent,#F2C14E99,transparent)}

/* Cidade dos Santos: troca de personagem no botão Montar (temas.js). A cena (a cidade vista do alto, os
   três pinos, o clarão) fica atrás do texto; a rodinha de quatro fatias, à esquerda dele. Só existe nesta
   pele e não muda o tamanho do botão. */
.g-pers,.g-roda{position:absolute;pointer-events:none;display:none}
body[data-jogo="gtav"] .g-pers,body[data-jogo="gtav"] .g-roda{display:block}
.g-pers{inset:0;z-index:-1;overflow:hidden;border-radius:inherit;opacity:0}
.g-pers-lente{position:absolute;inset:0;overflow:hidden;background:#1C3A46}
.g-pers-lente::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 18px 2px #000000A6}
.g-pers-mapa{position:absolute;left:50%;top:50%;width:500%;aspect-ratio:5/1}
.g-pers-mapa svg{display:block;width:100%;height:100%}
.g-pers-pinos{position:absolute;inset:0}
.g-pers-pinos i{position:absolute;top:50%;left:82%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:var(--pino);box-shadow:0 0 0 1.5px #FFFFFF,0 1px 5px 1px #000000B3}
.g-pers-pinos i:nth-child(1){--pino:#5ED17A}.g-pers-pinos i:nth-child(2){--pino:#6CC4EA}.g-pers-pinos i:nth-child(3){--pino:#F5A54A}
.g-pers-pinos i.alvo{width:12px;height:12px;margin:-6px 0 0 -6px;animation:g-pino .35s ease-in-out infinite alternate}
@keyframes g-pino{to{box-shadow:0 0 0 2px #FFFFFF,0 0 16px 5px var(--pino)}}
.g-pers-clarao{position:absolute;inset:0;background:#FFFFFF;opacity:0}
.g-roda{left:12px;top:50%;width:26px;height:26px;margin-top:-13px}
.g-roda svg{display:block;width:100%;height:100%;overflow:visible}
.g-roda circle{fill:#0B0D0C;fill-opacity:.85}
.g-roda path{fill:none;stroke-width:3;stroke-linecap:round;stroke-opacity:.32;transition:stroke-opacity .25s ease,stroke-width .25s ease}
.g-roda .r-cima{stroke:#5ED17A}.g-roda .r-esq{stroke:#6CC4EA}.g-roda .r-dir{stroke:#F5A54A}.g-roda .r-baixo{stroke:#8C918A}
.g-roda[data-vez="r-cima"] .r-cima,.g-roda[data-vez="r-esq"] .r-esq,.g-roda[data-vez="r-dir"] .r-dir{stroke-opacity:1;stroke-width:3.8}
.g-roda.pulsa{animation:g-roda-pulso .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes g-roda-pulso{40%{transform:scale(1.2)}}
body[data-jogo="gtav"] .p-montar{isolation:isolate;--pers-cor:#5ED17A;transition:filter .15s var(--e),color .12s ease}
body[data-jogo="gtav"] .p-montar[data-pers="1"]{--pers-cor:#6CC4EA}
body[data-jogo="gtav"] .p-montar[data-pers="2"]{--pers-cor:#F5A54A}
body[data-jogo="gtav"] .p-montar:not([disabled]){color:#08140C;
  background:linear-gradient(100deg,color-mix(in srgb,var(--pers-cor) 80%,#FFFFFF) 0%,var(--pers-cor) 55%,color-mix(in srgb,var(--pers-cor) 78%,#000000) 100%)}
body[data-jogo="gtav"] .p-montar.g-voando{color:#F3F2EE;text-shadow:0 1px 3px #000000}
@media (prefers-reduced-motion:reduce){.g-roda.pulsa,.g-pers-pinos i.alvo{animation:none}}

/* O Esperado da Década: o botão vira um painel synth roxo-escuro, com borda neon que respira e ondas rosa
   neon correndo por dentro (temas.js desenha num canvas atrás do texto). Forma e tamanho não mudam. */
.g-ondas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s ease}
body[data-jogo="gta6"] .p-montar{isolation:isolate;color:#FFF1F8;text-shadow:0 0 10px #FF4FA3AA,0 0 2px #16061F;
  background:linear-gradient(100deg,#1B0730 0%,#2E0A45 48%,#3F0D3E 100%)}
body[data-jogo="gta6"] .g-ondas{opacity:1}
body[data-jogo="gta6"] .p-montar:not([disabled]){animation:g-respira 3.2s ease-in-out infinite}
@keyframes g-respira{0%,100%{box-shadow:0 0 0 1px #FF4FA366,0 0 18px -2px #FF4FA355}50%{box-shadow:0 0 0 1px #FF9F4388,0 0 30px -2px #FF9F4366}}
body[data-jogo="gta6"] .p-cartao.escuro::before{background:linear-gradient(90deg,var(--marca),#FF9F43 55%,transparent)}

/* Liguem os Foguetes: rastro de turbo passando pelo botão sem parar */
body[data-jogo="rocketleague"] .p-montar::after{background:linear-gradient(90deg,transparent,#FFD23F88,#FF8A1Ebb,transparent)}
body[data-jogo="rocketleague"] .p-montar:not([disabled])::after{animation:g-turbo 2.4s ease-in-out infinite}
@keyframes g-turbo{0%{left:-70%}55%,100%{left:130%}}
body[data-jogo="rocketleague"] .p-jogo[aria-pressed="true"]::before{background:linear-gradient(var(--marca),#FF8A1E)}

/* Predador do Ápice: o número da etapa aberta pulsa como alerta */
body[data-jogo="apex"] .p-passo.aberto .p-ord{animation:g-alerta 2.2s ease-in-out infinite}
@keyframes g-alerta{0%,100%{box-shadow:0 0 0 4px #E2312F38}50%{box-shadow:0 0 0 4px #E2312F38,0 0 18px 2px #E2312F88}}

/* Zona Quente: o traço do rótulo pisca como radar */
body[data-jogo="warzone"] .p-olho::before{animation:g-radar 1.8s ease-in-out infinite}
@keyframes g-radar{0%,100%{opacity:1}50%{opacity:.25}}
body[data-jogo="warzone"] .p-montar::after{background:linear-gradient(90deg,transparent,#ffffff40,transparent)}

/* Mundo de Blocos: o movimento anda em degraus, como em jogo de bloco */
body[data-jogo="minecraft"] .p-tipos-destaque .p-tipo[aria-pressed="true"]{animation:p-tipo-entra .4s steps(4)}
body[data-jogo="minecraft"] .p-tipos-destaque .p-tipo[aria-pressed="true"]::after{animation:p-tipo-risco .4s steps(4)}
body[data-jogo="minecraft"] .p-montar:hover::after{animation:p-brilho .6s steps(6)}
body[data-jogo="minecraft"] .p-seta{transition:transform .2s steps(3)}

/* Dilera: o fio do cartão de cima corre como uma faixa de brasa (âmbar a laranja), o número da etapa aberta
   respira como brasa acesa e o brilho do botão sai âmbar. Só fundo e sombra mexem: a caixa não muda. */
body[data-jogo="dilera"] .p-cartao.escuro::before{background:linear-gradient(90deg,transparent,#FEBD01,var(--marca) 60%,transparent);
  background-size:45% 100%;background-repeat:no-repeat;animation:g-brasa 4.4s ease-in-out infinite}
@keyframes g-brasa{0%,100%{background-position:0 0}50%{background-position:100% 0}}
body[data-jogo="dilera"] .p-passo.aberto .p-ord{animation:g-brasa-pulso 3.2s ease-in-out infinite}
@keyframes g-brasa-pulso{0%,100%{box-shadow:0 0 0 4px #F94B0438}50%{box-shadow:0 0 0 4px #F94B0438,0 0 18px 3px #FEBD0188}}
body[data-jogo="dilera"] .p-montar::after{background:linear-gradient(90deg,transparent,#FEBD0199,transparent)}
@media (prefers-reduced-motion:reduce){
  body[data-jogo="dilera"] .p-cartao.escuro::before,body[data-jogo="dilera"] .p-passo.aberto .p-ord{animation:none}
}
/* no lance do botão o texto troca de cor num instante, sem a transição de 0,3 s das outras peles: um fade passaria por um cinza ilegível sobre a cena escura */
body[data-jogo="dilera"] #montar.p-montar{transition:transform .45s var(--mola),scale .45s var(--mola),background-color .3s var(--suave),
  border-color .3s var(--suave),box-shadow .35s var(--suave),filter .2s var(--suave)}
/* o selo "Ventilação suficiente" (ventilacao.js) nasce com um verde fixo que não lê sobre o vidro quente: aqui ele usa o turquesa da pele */
body[data-jogo="dilera"] .pv-selo.ok{color:var(--confere)}

/* menos movimento: a troca de pele vira um corte simples e nada fica pulsando */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}