/* Integração (10/10/2026): Bangers e Chakra Petch 600 apontam para os arquivos que o projeto
   já tinha (bangers-latin-400-normal.woff2, da Mentoria, e chakra-600.woff2, do hero). São
   idênticos byte a byte aos que vieram no pacote, então não foram duplicados. */
/* ==========================================================================
   PORTFÓLIO — Dom Calais · tela de jogo
   Tudo é prefixado com .pf / .pf- para não colidir com o resto do site.
   ========================================================================== */

/* ---------- Fontes (self-hosted, só o subset latin: cobre ç ã é õ etc.) --- */
@font-face{font-family:"Bangers";src:url(../assets/fonts/bangers-latin-400-normal.woff2?v=2bc90bd8) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Chakra Petch";src:url(../assets/fonts/chakra-600.woff2?v=cd2df683) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Chakra Petch";src:url(../assets/fonts/chakra-petch-700-latin.woff2?v=d09f6c28) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Patrick Hand SC";src:url(../assets/fonts/patrick-hand-sc-latin.woff2?v=c9ba1cd6) format("woff2");font-weight:400;font-display:swap}

/* ---------- Tokens --------------------------------------------------------- */
.pf{
  --ouro:#FFC21A;
  --ouro-claro:#FFE27A;
  --ouro-esc:#E08E0B;
  --tinta:#0B1233;          /* contorno / navy quase preto */
  --azul:#13307A;
  --creme:#FFF4D6;
  --texto-fala:#1D1A2B;
  --verde:#2FB64A;
  --vermelho:#E0342A;

  --f-titulo:"Bangers",Impact,"Arial Black",sans-serif;
  --f-ui:"Chakra Petch",system-ui,sans-serif;
  --f-fala:"Patrick Hand SC","Comic Sans MS",cursive;

  /* Unidade da "tela de jogo": 1u = 1% da altura de uma tela 16:9 que cabe no
     viewport. Em telas mais estreitas que 16:9 ela passa a seguir a largura,
     então nada sai da tela em 16:10, 4:3 etc. */
  --u:min(1vh,.5625vw);

  /* medidas principais (desktop) */
  --card-h:47;
  --card-w:calc(var(--card-h) * var(--u) * .713);
  --dlg-h:calc(24 * var(--u));
  /* caixa de diálogo (arte dialogo-desktop, 1338x420): as pontas ficam no tamanho natural, a
     esquerda (Vegeta e a quina do trilho) com 573 px e a direita (esfera) com 290 px */
  --esq-w:calc(var(--dlg-h) * 573 / 420);
  --dir-w:calc(var(--dlg-h) * 290 / 420);

  position:relative;
  isolation:isolate;
  overflow:hidden;
  box-sizing:border-box;
  width:auto;max-width:none;margin:0;padding:0;border:0;   /* ignora section{padding/max-width} do site */
  height:100vh;
  min-height:560px;
  color:var(--creme);
  background:#3d8fd8;
  -webkit-tap-highlight-color:transparent;
}
@supports (height:1svh){
  .pf{--u:min(1svh,.5625vw);height:100svh}
}
/* Blindagem contra o CSS global do site (img{…}, button{…}, section{…}, li{…}…).
   ".pf :where(x)" pesa (0,1,0): ganha de regras de elemento do site e empata com as
   classes abaixo, que vêm depois no arquivo e por isso prevalecem. */
.pf :where(*),.pf :where(*)::before,.pf :where(*)::after{box-sizing:border-box}
.pf :where(img){
  display:block;max-width:none;max-height:none;height:auto;
  margin:0;padding:0;border:0;border-radius:0;box-shadow:none;
  filter:none;opacity:1;transition:none;object-fit:fill;
  -webkit-user-drag:none;user-select:none;
}
.pf :where(button){
  -webkit-appearance:none;appearance:none;
  font:inherit;color:inherit;letter-spacing:inherit;text-transform:none;text-align:inherit;line-height:inherit;
  background:none;border:0;border-radius:0;box-shadow:none;
  padding:0;margin:0;min-width:0;min-height:0;width:auto;height:auto;
  transition:none;cursor:pointer;
}
.pf :where(ul,li){margin:0;padding:0;list-style:none}
.pf :where(p,h2,figure,figcaption){margin:0;padding:0;max-width:none;text-align:left;text-indent:0}
.pf :where(h2)::before,.pf :where(h2)::after{content:none}
.pf :where(svg){width:auto;height:auto}
.pf :where(button:focus-visible){outline:3px solid var(--ouro-claro);outline-offset:3px;border-radius:6px}

/* ---------- Cenário -------------------------------------------------------- */
.pf__bg{
  position:absolute;inset:0;z-index:-1;
  background:url(../assets/img/portfolio/cenario.webp?v=d69d7c13) center 42%/cover no-repeat;
}

/* ---------- Grade da tela -------------------------------------------------- */
.pf__tela{
  position:absolute;inset:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto auto auto;
  justify-items:center;
}

/* ---------- Título (canto superior esquerdo) ------------------------------ */
.pf__titulo{
  position:absolute;z-index:5;
  top:calc(2 * var(--u));left:calc(2.2 * var(--u));
  width:calc(46 * var(--u));
  margin:0;font-size:0;line-height:0;
}
.pf__titulo img{width:100%;height:auto;animation:pf-flutua 4.2s ease-in-out infinite}

/* ---------- HUD (canto superior direito) ----------------------------------- */
.pf__hud{
  position:absolute;z-index:5;
  top:calc(3.4 * var(--u));right:calc(3 * var(--u));
  display:flex;align-items:center;gap:calc(1.2 * var(--u));
  height:calc(4.6 * var(--u));
  padding:0 calc(1.4 * var(--u)) 0 calc(.9 * var(--u));
  border-radius:999px;
  background:linear-gradient(180deg,#1B3C8F,#0C1B4C);
  border:calc(.35 * var(--u)) solid var(--ouro);
  box-shadow:0 0 0 calc(.28 * var(--u)) var(--tinta),0 calc(.5 * var(--u)) calc(1.2 * var(--u)) rgba(5,12,40,.35);
}
.pf__hud-trilho{
  position:relative;overflow:hidden;
  width:calc(17 * var(--u));height:calc(1.7 * var(--u));
  border-radius:999px;background:#050C27;
  box-shadow:inset 0 0 0 calc(.2 * var(--u)) rgba(255,255,255,.12);
}
.pf__hud-fill{
  position:absolute;inset:0 auto 0 0;width:12.5%;
  border-radius:inherit;
  background:linear-gradient(180deg,#BDEBFF 0%,#5BB8FF 45%,#2C6DE0 100%);
  transition:width .45s cubic-bezier(.2,.8,.2,1);
}
.pf__hud-num{
  font:400 calc(3.1 * var(--u))/1 var(--f-titulo);
  letter-spacing:.04em;color:var(--ouro);
  text-shadow:0 calc(.25 * var(--u)) 0 var(--tinta);
  min-width:4.2ch;text-align:right;
}
.pf__hud-num small{font-size:.62em;color:var(--creme);opacity:.85}

/* ---------- Faixa "Trabalhos em destaque" --------------------------------- */
.pf__faixa{
  position:relative;z-index:3;
  width:calc(70 * var(--u));
  margin-top:calc(8.5 * var(--u));
}
.pf__faixa img{width:100%;height:auto}
.pf__faixa-txt{
  /* área escura medida no PNG: 19,2% → 80,9% (x) · 27,1% → 65,8% (y) */
  position:absolute;left:19.2%;right:19.1%;top:27.1%;bottom:34.2%;
  display:flex;align-items:center;justify-content:center;
  margin:0;padding-top:.08em;
  font:400 calc(3.5 * var(--u))/1 var(--f-titulo);
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  color:var(--creme);
  text-shadow:0 calc(.3 * var(--u)) 0 #000,0 0 calc(.8 * var(--u)) rgba(0,0,0,.4);
}

/* ---------- Palco (carrossel) --------------------------------------------- */
.pf__palco{
  position:relative;z-index:2;
  width:100%;
  min-height:calc((var(--card-h) + 2) * var(--u));
  touch-action:pan-y;
}
.pf__cards{
  position:absolute;inset:0;
  margin:0;padding:0;list-style:none;
}
.pf-card{
  /* posição controlada por data-pos (JS) → variáveis abaixo */
  --x:0;--s:1;--ry:0deg;--rz:0deg;--op:1;--dim:0;
  position:absolute;left:50%;top:50%;z-index:5;
  width:var(--card-w);
  aspect-ratio:800/1122;
  transform:
    translate(-50%,-50%)
    translateX(calc(var(--x) * var(--card-w)))
    perspective(1400px) rotateY(var(--ry)) rotate(var(--rz))
    scale(var(--s));
  opacity:var(--op);
  transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .35s ease;
}
.pf-card[data-pos="-1"]{--x:-.84;--s:.8;--ry:12deg;--rz:-3deg;--dim:.22;z-index:4}
.pf-card[data-pos="1"] {--x:.84; --s:.8;--ry:-12deg;--rz:3deg; --dim:.22;z-index:4}
.pf-card[data-pos="-2"]{--x:-1.5;--s:.64;--ry:18deg;--rz:-5deg;--dim:.4;z-index:3}
.pf-card[data-pos="2"] {--x:1.5; --s:.64;--ry:-18deg;--rz:5deg; --dim:.4;z-index:3}
.pf-card[data-pos="-3"]{--x:-2.1;--s:.5;--ry:22deg;--op:0;--dim:.5;z-index:1;pointer-events:none}
.pf-card[data-pos="3"] {--x:2.1; --s:.5;--ry:-22deg;--op:0;--dim:.5;z-index:1;pointer-events:none}

.pf-card__corpo{
  position:relative;display:block;
  width:100%;height:100%;
  container-type:inline-size;
  filter:drop-shadow(0 calc(1.2 * var(--u)) calc(1.3 * var(--u)) rgba(6,16,52,.38));
}
.pf-card[data-pos="0"] .pf-card__corpo{animation:pf-flutua 3.6s ease-in-out infinite}
.pf[data-entrada="ponteiro"] .pf-card__corpo:focus-visible{outline:none}   /* anel de foco só para quem usa Tab */

/* janela da moldura medida no PNG: 11,1% → 88,8% (x) · 14,2% → 87,9% (y).
   A foto entra um pouco por baixo da borda para não sobrar fresta. */
.pf-card__foto{
  position:absolute;left:10.6%;right:10.6%;top:13.6%;bottom:11.6%;
  overflow:hidden;background:var(--tinta);
}
.pf-card__foto img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:var(--foco,50% 40%);
  transform:scale(var(--zoom,1));
  transform-origin:var(--foco,50% 40%);
}
.pf-card__foto::after{               /* escurece os cards laterais */
  content:"";position:absolute;inset:0;
  background:var(--tinta);opacity:var(--dim);
  transition:opacity .4s ease;
}
.pf-card__moldura{position:absolute;inset:0;width:100%;height:100%}
.pf-card__plate{
  /* plaquinha medida no PNG: 25% → 74% (x) · 88,9% → 95,4% (y) */
  position:absolute;left:26%;right:26%;top:88.9%;height:6.5%;
  display:flex;align-items:center;justify-content:center;
  padding-top:.1em;
  font:400 7.4cqw/1 var(--f-titulo);
  letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
  color:var(--tinta);
}

/* setas */
.pf__seta{
  position:absolute;top:50%;z-index:6;
  width:calc(4.8 * var(--u));height:calc(7.6 * var(--u));
  transform:translateY(-50%);
  transition:transform .18s ease;
}
.pf__seta svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 calc(.4 * var(--u)) 0 rgba(6,16,52,.35))}
.pf__seta--ant{left:calc(50% - 71 * var(--u))}
.pf__seta--prox{right:calc(50% - 71 * var(--u))}
.pf__seta--ant:hover{transform:translateY(-50%) translateX(calc(-.6 * var(--u)))}
.pf__seta--prox:hover{transform:translateY(-50%) translateX(calc(.6 * var(--u)))}
.pf__seta:active{transform:translateY(-50%) scale(.92)}

/* ---------- Dots ------------------------------------------------------------ */
/* integração (12/10): com a caixa nova (do Vegeta) os dots entram no trilho azul do alto dela,
   como no celular, na mesma célula do grid. Trilho medido na arte: 22,56% a 28,41% da altura,
   de 97,7% da ponta esquerda até 45,9% da direita (o meio estica junto) */
.pf__dots{
  position:relative;z-index:4;
  grid-row:4;grid-column:1;align-self:start;justify-self:stretch;
  display:flex;align-items:center;justify-content:center;gap:calc(1.1 * var(--u));
  height:calc(var(--dlg-h) * .0584);min-height:0;
  margin:calc(-8.5 * var(--u) + var(--dlg-h) * .2256) calc(var(--dir-w) * .459 + 2 * var(--u)) 0 calc(var(--esq-w) * .977 + 2 * var(--u));
}
.pf__dot{
  width:calc(var(--dlg-h) * .073);height:calc(var(--dlg-h) * .073);
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#8DB3FF,#2F5FD6 55%,#10297A);
  box-shadow:0 0 0 calc(.2 * var(--u)) #03081C,inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .25s ease,background-color .25s ease;
}
.pf__dot[aria-current="true"]{
  background:radial-gradient(circle at 35% 30%,var(--ouro-claro),var(--ouro) 45%,var(--ouro-esc));
  transform:scale(1.35);
}
.pf__dot:hover{transform:scale(1.2)}
.pf__dot[aria-current="true"]:hover{transform:scale(1.35)}

/* ---------- Caixa de diálogo (uma arte; o meio estica) ---------------------
   Integração (12/10): a caixa do Vegeta, arte do cliente, numa imagem só. É o border-image do
   fio do hero: as pontas ficam inteiras e só a faixa do meio (que na arte é igual coluna a
   coluna: pergaminho, borda e trilho) estica com a largura da tela. Sem emenda, sem fatias */
.pf__dialogo{
  position:relative;z-index:3;
  grid-row:4;grid-column:1;
  justify-self:stretch;
  height:var(--dlg-h);
  margin-top:calc(-8.5 * var(--u));
  pointer-events:none;
}
.pf__dialogo-mob{display:none}
.pf__dialogo-arte{
  position:absolute;inset:0;
  border-style:solid;border-color:transparent;
  border-width:0 var(--dir-w) 0 var(--esq-w);
  border-image-source:url(../assets/img/portfolio/dialogo-desktop.webp?v=1387fb67);
  border-image-slice:0 290 0 573 fill;
  border-image-repeat:stretch;
}
.pf__fala{
  /* área livre do pergaminho, medida na arte: de 80% da ponta esquerda (depois dos raios) até
     90% da direita (antes das linhas de velocidade e da esfera), 33% a 84% da altura */
  position:absolute;z-index:3;
  left:calc(var(--esq-w) * .8);
  right:calc(var(--dir-w) * .9);
  top:33%;bottom:16%;
  display:flex;align-items:center;
  margin:0;padding:0 calc(1 * var(--u));
  font:400 calc(2.9 * var(--u))/1.28 var(--f-fala);
  letter-spacing:.02em;
  color:var(--texto-fala);
  white-space:pre-line;
}
.pf__fala-resto{visibility:hidden}
.pf__fala-in::after{                   /* ▼ "continuar" clássico de RPG, no fim do texto */
  content:"";display:inline-block;vertical-align:-.05em;margin-left:.45em;
  border:.3em solid transparent;border-top:.42em solid #B8322A;border-bottom:0;
  opacity:0;
}
.pf.is-fala-fim .pf__fala-in::after{animation:pf-pisca 1s steps(2,jump-none) infinite}

/* ---------- Barra de comandos (estilo legenda de controle) ----------------- */
.pf__comandos{
  grid-row:5;
  position:relative;z-index:4;
  justify-self:stretch;
  display:flex;align-items:center;gap:calc(3.6 * var(--u));
  height:max(36px,calc(4.6 * var(--u)));
  padding:0 calc(3 * var(--u));
  background:linear-gradient(180deg,#14306F 0%,#0C1D4B 55%,#081338 100%);
  border-top:calc(.35 * var(--u)) solid var(--ouro-esc);
  box-shadow:0 calc(-.3 * var(--u)) 0 var(--tinta);
}
.pf__cmd{
  display:inline-flex;align-items:center;gap:calc(.9 * var(--u));
  font:600 max(13px,calc(1.9 * var(--u)))/1 var(--f-ui);
  letter-spacing:.02em;color:#fff;
  text-rendering:geometricPrecision;   /* evita o "Volt ar" (arredondamento de avanço da Chakra Petch) */
  text-shadow:0 1px 0 rgba(0,0,0,.6);
  transition:opacity .2s ease;
}
.pf__cmd:hover{opacity:.82}
.pf-btn{
  display:inline-grid;place-items:center;flex:none;
  width:max(20px,calc(2.8 * var(--u)));height:max(20px,calc(2.8 * var(--u)));
  border-radius:50%;
  font:700 max(11px,calc(1.6 * var(--u)))/1 var(--f-ui);color:#fff;
  box-shadow:0 0 0 max(1.5px,calc(.2 * var(--u))) #03081C,inset 0 max(2px,calc(.3 * var(--u))) 0 rgba(255,255,255,.35);
  text-shadow:0 1px 0 rgba(0,0,0,.45);
}
.pf-btn--a{background:radial-gradient(circle at 40% 30%,#7BE58A,var(--verde) 55%,#15792A)}
.pf-btn--b{background:radial-gradient(circle at 40% 30%,#FF8A7A,var(--vermelho) 55%,#8F1811)}
.pf-btn--dpad{background:radial-gradient(circle at 40% 30%,var(--ouro-claro),var(--ouro) 55%,var(--ouro-esc))}
.pf-btn--dpad svg{width:66%;height:66%}

/* texto só para leitor de tela */
.pf-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Lightbox ("Ver imagem") ---------------------------------------- */
.pf-lb{
  width:100%;height:100%;max-width:none;max-height:none;
  margin:0;padding:0;border:0;
  background:transparent;color:var(--creme);
  overflow:hidden;
}
.pf-lb[open]{display:grid;place-items:center;animation:pf-lb-in .25s ease-out}
.pf-lb::backdrop{background:rgba(4,9,30,.9)}
html:has(.pf-lb[open]){overflow:hidden}
.pf-lb__fig{
  display:flex;flex-direction:column;align-items:center;gap:calc(1.8 * var(--u));
  margin:0;
}
.pf-lb__quadro{
  background:var(--tinta);
  border:calc(.6 * var(--u)) solid var(--ouro);
  box-shadow:0 0 0 calc(.4 * var(--u)) var(--tinta),0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(0,0,0,.55);
  border-radius:calc(.6 * var(--u));
  overflow:hidden;
}
.pf-lb__img{
  width:auto;height:auto;
  max-width:min(86vw,1100px);
  max-height:calc(100vh - 21 * var(--u) - 90px);
  object-fit:contain;
}
@supports (height:1svh){.pf-lb__img{max-height:calc(100svh - 21 * var(--u) - 90px)}}
.pf-lb__cap{
  display:flex;align-items:center;gap:1em;
  padding:.45em 1.4em .35em;
  font:400 max(20px,calc(3.2 * var(--u)))/1 var(--f-titulo);
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinta);
  background:linear-gradient(180deg,var(--ouro-claro),var(--ouro) 60%,var(--ouro-esc));
  clip-path:polygon(1em 0,calc(100% - 1em) 0,100% 50%,calc(100% - 1em) 100%,1em 100%,0 50%);
}
.pf-lb__num{font-size:.7em;opacity:.7}
.pf-lb__seta{
  position:fixed;top:50%;
  width:max(34px,calc(4.8 * var(--u)));height:max(54px,calc(7.6 * var(--u)));
  transform:translateY(-50%);
}
.pf-lb__seta svg{width:100%;height:100%;overflow:visible}
.pf-lb__seta--ant{left:max(12px,calc(4 * var(--u)))}
.pf-lb__seta--prox{right:max(12px,calc(4 * var(--u)))}
.pf-lb__comandos{
  position:fixed;left:0;right:0;bottom:0;
  display:flex;align-items:center;justify-content:center;gap:calc(3.6 * var(--u));
  height:max(36px,calc(4.6 * var(--u)));
  background:linear-gradient(180deg,#14306F 0%,#0C1D4B 55%,#081338 100%);
  border-top:calc(.35 * var(--u)) solid var(--ouro-esc);
  box-shadow:0 calc(-.3 * var(--u)) 0 var(--tinta);
}

/* ---------- Entrada (uma vez, quando a seção aparece) ---------------------- */
.pf--js .pf__titulo,.pf--js .pf__hud,.pf--js .pf__faixa,.pf--js .pf__palco,
.pf--js .pf__dots,.pf--js .pf__dialogo,.pf--js .pf__comandos{
  transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1);
}
.pf--js:not(.is-visivel) .pf__titulo{opacity:0;transform:translateX(calc(-6 * var(--u)))}
.pf--js:not(.is-visivel) .pf__hud{opacity:0;transform:translateX(calc(6 * var(--u)))}
.pf--js:not(.is-visivel) .pf__faixa{opacity:0;transform:translateY(calc(-4 * var(--u)))}
.pf--js:not(.is-visivel) .pf__palco{opacity:0;transform:scale(.94)}
.pf--js:not(.is-visivel) .pf__dots,
.pf--js:not(.is-visivel) .pf__dialogo{opacity:0;transform:translateY(calc(8 * var(--u)))}
.pf--js:not(.is-visivel) .pf__comandos{opacity:0;transform:translateY(100%)}
.pf--js.is-visivel .pf__faixa{transition-delay:.08s}
.pf--js.is-visivel .pf__palco{transition-delay:.16s}
.pf--js.is-visivel .pf__dots,.pf--js.is-visivel .pf__dialogo{transition-delay:.24s}
.pf--js.is-visivel .pf__comandos{transition-delay:.3s}

/* ---------- Keyframes -------------------------------------------------------- */
@keyframes pf-flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(-.7 * var(--u)))}}
@keyframes pf-pisca{0%{opacity:1}100%{opacity:0}}
@keyframes pf-lb-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}

/* ==========================================================================
   MOBILE / RETRATO — a tela vira coluna; unidade passa a ser --m (1% da largura)
   ========================================================================== */
@media (max-width:760px),(max-aspect-ratio:1/1){
  .pf{
    --m:min(1vw,.52vh);
    --u:var(--m);
    --card-w:calc(56 * var(--m));
    --dw:min(100cqw,600px);          /* largura da caixa de diálogo mobile (cqw = largura da tela da seção) */
    height:auto;min-height:100vh;
  }
  @supports (height:1svh){.pf{--m:min(1vw,.52svh);min-height:100svh}}
  .pf__bg{background-image:url(../assets/img/portfolio/cenario-1280.webp?v=c0c16718);background-position:50% 30%}
  /* integração (12/10): em tela bem em pé o fundo só mostra uma faixa do meio: o recorte dela
     (600x719 do cenario-1280, centrado) tem 83 KB em vez de 186 */
  @media (max-aspect-ratio:5/6){ .pf__bg{background-image:url(../assets/img/portfolio/cenario-retrato.webp?v=f4f929ce)} }

  .pf__tela{
    position:relative;inset:auto;
    min-height:inherit;
    container-type:inline-size;
    grid-template-rows:auto auto minmax(0,1fr) auto auto;
    padding-top:calc(3.5 * var(--m));
  }
  /* título no canto superior esquerdo e HUD à direita, como no desktop */
  .pf__titulo{
    position:relative;top:auto;left:auto;
    grid-row:1;grid-column:1;justify-self:start;align-self:center;
    width:calc(58 * var(--m));margin-left:calc(2.5 * var(--m));
  }
  .pf__hud{
    position:relative;top:auto;right:auto;
    grid-row:1;grid-column:1;justify-self:end;align-self:center;
    margin-right:calc(3 * var(--m));
    height:calc(7 * var(--m));gap:calc(1.6 * var(--m));
    padding:0 calc(2 * var(--m)) 0 calc(1.4 * var(--m));
    border-width:calc(.55 * var(--m));
    box-shadow:0 0 0 calc(.45 * var(--m)) var(--tinta),0 calc(.8 * var(--m)) calc(1.6 * var(--m)) rgba(5,12,40,.35);
  }
  .pf__hud-trilho{width:calc(11 * var(--m));height:calc(2.4 * var(--m))}
  .pf__hud-num{font-size:calc(4.6 * var(--m));text-shadow:0 calc(.4 * var(--m)) 0 var(--tinta)}
  .pf__faixa{width:calc(96 * var(--m));margin-top:calc(1.5 * var(--m));grid-row:2}
  .pf__faixa-txt{font-size:calc(4.4 * var(--m))}

  .pf__palco{min-height:calc(var(--card-w) * 1.402 + 8 * var(--m));margin-top:calc(1 * var(--m));grid-row:3}
  .pf-card[data-pos="-1"]{--x:-.8;--s:.78;--ry:10deg;--rz:-3deg}
  .pf-card[data-pos="1"] {--x:.8; --s:.78;--ry:-10deg;--rz:3deg}
  .pf-card[data-pos="-2"],.pf-card[data-pos="2"]{--op:0;pointer-events:none}
  .pf-card[data-pos="-2"]{--x:-1.4;--s:.6}
  .pf-card[data-pos="2"] {--x:1.4;--s:.6}

  .pf__seta{width:calc(8 * var(--m));height:calc(12.5 * var(--m))}
  .pf__seta--ant{left:calc(2 * var(--m))}
  .pf__seta--prox{right:calc(2 * var(--m))}

  /* diálogo mobile: arte própria (a do Vegeta, 12/10; ~2,46:1) com o retrato inteiro.
     Medidas tiradas da arte: pergaminho 27,9%→89,4% (y); área livre dele (depois dos raios,
     antes da esfera) 36,4%→79,9% (x); trilho 45,2%→89,6% (x) · 20,8%→26,1% (y). */
  .pf__dialogo{
    grid-row:4;grid-column:1;
    justify-self:center;
    width:var(--dw);height:auto;aspect-ratio:1200/488;
    margin-top:calc(2 * var(--m));
  }
  .pf__dialogo-arte{display:none}
  .pf__dialogo-mob{display:block;position:absolute;inset:0;width:100%;height:100%}
  /* o texto segue a LARGURA da caixa (--dw), não a altura da tela — antes, em
     celular com barra do navegador ou janela baixa, ele encolhia junto com o resto */
  .pf__fala{
    /* a esfera e a borda inclinada só entram no pergaminho embaixo: parando em 82% da altura, o
       texto vai até 83,5% da largura (medido na arte). Letra um pouco menor que na caixa antiga
       (.045), cujo pergaminho era mais alto: assim a fala mais longa cabe em 4 linhas */
    left:37%;right:16.5%;top:29%;bottom:18%;
    padding:0;
    font-size:clamp(14px,calc(var(--dw) * .043),23px);line-height:1.12;
  }

  /* os dots saem da linha própria e entram no trilho da arte
     (mesma célula do grid que o diálogo; % de margem = % da largura) */
  .pf__dots{
    grid-row:4;grid-column:1;
    align-self:start;justify-self:center;
    position:relative;left:calc(var(--dw) * .174);z-index:5;
    width:calc(var(--dw) * .42);height:calc(var(--dw) * .0215);min-height:0;
    margin:calc(2 * var(--m) + var(--dw) * .0844) 0 0;
    justify-content:space-evenly;gap:0;
  }
  .pf__dot{
    width:calc(var(--dw) * .026);height:calc(var(--dw) * .026);
    box-shadow:0 0 0 1px #03081C,inset 0 1px 0 rgba(255,255,255,.3);
  }
  .pf__dot[aria-current="true"]{transform:scale(1.25)}
  .pf__dot[aria-current="true"]:hover{transform:scale(1.25)}

  .pf__comandos{grid-row:5}

  .pf__comandos{
    height:calc(11 * var(--m));
    justify-content:center;
    gap:calc(5 * var(--m));
    /* à direita, o lugar do botão de som fixo (css/pagina.css), que fica no canto de baixo */
    padding:0 max(calc(3 * var(--m)), 58px) 0 calc(3 * var(--m));
  }
  .pf__cmd{font-size:max(13px,calc(3.4 * var(--m)));gap:max(6px,calc(1.6 * var(--m)))}
  .pf-btn{width:max(22px,calc(5.4 * var(--m)));height:max(22px,calc(5.4 * var(--m)));font-size:max(12px,calc(3 * var(--m)))}

  .pf-lb__img{max-width:92vw}
  .pf-lb__comandos{height:calc(11 * var(--m));gap:calc(5 * var(--m))}
  .pf-lb__seta{display:none}
}

/* ---------- Movimento reduzido --------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .pf *,.pf *::before,.pf *::after{animation:none!important;transition-duration:.01ms!important}
  .pf.is-fala-fim .pf__fala-in::after{opacity:1}
}