/* Integração (11/10/2026), mudanças em relação ao pacote:
   - seletores sem escopo (.card, .arrow, .dialog, .toast…) ganharam ":where(.sobre) " na frente.
     :where() não soma especificidade, então a cascata interna não mudou — conferido elemento a
     elemento (481 propriedades computadas, desktop e celular): zero diferença. O que mudou é que
     nada daqui alcança o hero nem as outras seções;
   - .hud virou .sobre__hud: o hero tem um .hud próprio, sem escopo, e os dois se atropelariam;
   - resets globais da página de teste (html, body, cor de fundo) saíram; o box-sizing e o
     [hidden] ficaram, restritos à seção;
   - imagens em ../assets/img/sobre/. */
/* =====================================================================
   SOBRE MIM · Dom Calais · seleção de personagem (estética video game)
   Vanilla CSS · sem dependências
   ===================================================================== */

@font-face{font-family:"M PLUS Rounded 1c";src:url(../assets/fonts/m-plus-rounded-1c-latin-500-normal.woff2?v=a26ed712) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"M PLUS Rounded 1c";src:url(../assets/fonts/m-plus-rounded-1c-latin-700-normal.woff2?v=c5768ebc) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Press Start 2P";src:url(../assets/fonts/press-start-2p-latin-400-normal.woff2?v=87ab8daa) format("woff2");font-weight:400;font-display:swap}

:where(.sobre),:where(.sobre)::before,:where(.sobre)::after,:where(.sobre) *,:where(.sobre) *::before,:where(.sobre) *::after{box-sizing:border-box}
.sobre [hidden]{display:none!important}

.sobre{
  --sky:#1d44b8; --ink:#26160a;
  --gold-50:#ffe9a8; --gold-100:#ffd971; --gold-300:#f5a623; --gold-500:#d97b06; --gold-700:#a35405;
  --paper-1:#fdf6e2; --paper-2:#f0e3c3; --paper-3:#dcc9a1; --paper-ink:#2b2317;
  --navy:#122a63; --navy-d:#0a1840;
  --text:#eef3ff;
  --f-display:"M PLUS Rounded 1c",system-ui,sans-serif;              /* textos grandes */
  --f-arcade:"Press Start 2P","M PLUS Rounded 1c",system-ui,sans-serif;  /* placas e labels miúdos */
  --f-ui:"M PLUS Rounded 1c",system-ui,sans-serif;
  --f-body:"M PLUS Rounded 1c",system-ui,-apple-system,sans-serif;
  --charge:0;
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-back:cubic-bezier(.2,1.35,.35,1);
  --corner-unused:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2056%2056%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffd971%22%2F%3E%3Cstop%20offset%3D%22.45%22%20stop-color%3D%22%23f5a623%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23c97405%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22%2326160a%22%20stroke%3D%22%2326160a%22%20stroke-width%3D%225%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%228%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2216%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2224%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2232%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2240%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2248%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%220%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%220%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2216%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2224%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2232%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2240%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2248%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%220%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%2216%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%2232%22%20y%3D%220%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%2232%22%20y%3D%2216%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%2232%22%20y%3D%2232%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%2240%22%20y%3D%220%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%2240%22%20y%3D%2216%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%2248%22%20y%3D%220%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%2248%22%20y%3D%2216%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22url%28%23g%29%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%228%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2216%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2224%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2232%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2240%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2248%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%220%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%220%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2216%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2224%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2232%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2240%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2248%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%220%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%2216%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%2232%22%20y%3D%220%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%2232%22%20y%3D%2216%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%2232%22%20y%3D%2232%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%2240%22%20y%3D%220%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%2240%22%20y%3D%2216%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%2248%22%20y%3D%220%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%2248%22%20y%3D%2216%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");

  position:relative;isolation:isolate;overflow:hidden;
  min-height:100vh;min-height:100svh;
  background:var(--sky);color:var(--text);font-family:var(--f-body);font-size:16px;line-height:1.5
}
.sobre button{font:inherit;color:inherit}

/* ---------- FUNDO ---------- */
.sobre__bg{position:absolute;inset:0;z-index:0;overflow:hidden;transition:transform 1.5s var(--ease-out),filter 1.2s ease}
.sobre__bg-img{position:absolute;inset:-5%;background:var(--sky) url(../assets/img/sobre/cenario-capsule.webp?v=c5e78c29) 50% 45%/cover no-repeat;scale:1.04;will-change:translate}
.sobre__vignette{position:absolute;inset:0;background:
  radial-gradient(125% 95% at 50% 42%,transparent 52%,rgba(8,26,70,.5) 100%),
  linear-gradient(180deg,rgba(10,30,80,.3) 0%,transparent 14%,transparent 62%,rgba(8,24,66,.55) 100%)}
.sobre__edge{position:absolute;top:0;bottom:0;z-index:22;pointer-events:none;
  width:clamp(26px,2.9vw,54px);background-repeat:repeat-y;background-size:100% auto}
.sobre__edge--l{left:0;background-image:url(../assets/img/sobre/faixa-esquerda-tile.webp?v=d8520412);background-position:0 0}
.sobre__edge--r{right:0;background-image:url(../assets/img/sobre/faixa-direita-tile.webp?v=85f92c30);background-position:100% 0}
.sobre__fx{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen}
.sobre__fx--front{z-index:24}
.sobre::after{content:"";position:absolute;inset:0;z-index:23;pointer-events:none;opacity:var(--charge);
  background:radial-gradient(ellipse at 50% 45%,transparent 55%,rgba(255,176,30,.42) 100%)}
.sobre__flash{position:absolute;inset:0;z-index:25;pointer-events:none;opacity:0;
  background:radial-gradient(circle at var(--fx,50%) var(--fy,50%),rgba(255,252,230,.95),rgba(255,214,90,.55) 22%,rgba(255,170,0,0) 62%)}
.sobre__flash.is-on{animation:flash .55s ease-out}
@keyframes flash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}

/* ---------- STAGE ---------- */
.sobre__stage{position:relative;z-index:2;display:grid;min-height:100vh;min-height:100svh;max-width:1680px;margin-inline:auto;
  grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;
  grid-template-areas:"select" "scroll";
  gap:clamp(4px,.8vh,12px);padding:clamp(20px,3vh,36px) clamp(46px,5.4vw,96px) clamp(10px,1.3vh,16px)}
.sobre__stage.is-shaking{animation:shake .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(4px,-2px)}30%,50%,70%{transform:translate(-7px,3px)}40%,60%{transform:translate(7px,-3px)}}

.sobre__head{position:absolute;z-index:6;top:clamp(6px,1.2vh,16px);left:clamp(46px,5.4vw,96px)}
.sobre__title{margin:0;line-height:0;animation:floatTitulo 4.6s ease-in-out infinite}
@keyframes floatTitulo{50%{transform:translateY(-7px) rotate(-.4deg)}}
.sobre__title img{display:block;width:clamp(290px,31.5vw,560px);height:auto;filter:drop-shadow(0 8px 14px rgba(0,20,60,.4))}

/* ---------- BARRA DE ENERGIA + SISTEMA ---------- */
.sobre__hud{position:absolute;z-index:6;top:clamp(6px,1.2vh,16px);right:clamp(46px,5.4vw,96px);display:flex;flex-direction:column;align-items:flex-end;gap:10px}
:where(.sobre) .power{position:relative;width:clamp(205px,23vw,380px);line-height:0;animation:floatBarra 5.4s ease-in-out infinite;filter:drop-shadow(0 6px 12px rgba(0,20,60,.4))}
:where(.sobre) .power__img{width:100%;height:auto;display:block}
:where(.sobre) .power__glow{position:absolute;left:4%;right:22%;top:26%;bottom:26%;border-radius:999px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(190,245,255,.95),rgba(90,200,255,.35) 60%,transparent 75%);
  opacity:calc(.25 + var(--charge) * .75);mix-blend-mode:screen;animation:powerPulse 2.6s ease-in-out infinite}
@keyframes powerPulse{50%{opacity:.5}}
@keyframes floatBarra{50%{transform:translateY(-6px)}}
:where(.sobre) .power__shine{position:absolute;left:4%;right:22%;top:26%;bottom:26%;border-radius:999px;overflow:hidden;pointer-events:none}
:where(.sobre) .power__shine::before{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%) -60% 0/55% 100% no-repeat;
  animation:powerShine 3.4s linear infinite}
@keyframes powerShine{0%,40%{background-position:-60% 0}100%{background-position:200% 0}}

/* ---------- SELEÇÃO DE PERSONAGEM ---------- */
:where(.sobre) .select{grid-area:select;z-index:4;align-self:stretch;justify-self:center;display:flex;align-items:center;justify-content:center;
  gap:clamp(4px,1.2vw,30px);width:100%;height:100%;min-height:0;padding:2px 0}
:where(.sobre) .fan{--fan-k:2.06;position:relative;flex:none;height:min(calc(100% + 42px),880px);aspect-ratio:2353 / 1378;width:auto;isolation:isolate}

:where(.sobre) .card{position:absolute;top:0;bottom:0;left:50%;width:calc(100% / var(--fan-k));display:block;padding:0;margin:0;border:0;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  transform-origin:50% 92%;
  transition:transform .5s var(--ease-out),filter .4s ease,opacity .4s ease}
:where(.sobre) .card__inner{position:absolute;inset:0;display:block}
:where(.sobre) .card__art--bg{filter:none!important}
:where(.sobre) .card__art{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;
  filter:drop-shadow(0 0 calc(4px + var(--glow,0) * 16px) rgba(255,204,50,calc(.3 + var(--glow,0) * .55))) drop-shadow(0 18px 22px rgba(0,20,60,.45))}
:where(.sobre) .card__photo{position:absolute;inset:0;display:block;overflow:hidden;background:#0b1024;
  -webkit-mask:url(../assets/img/sobre/card-mascara.png?v=aca0365f) 0 0/100% 100% no-repeat;mask:url(../assets/img/sobre/card-mascara.png?v=aca0365f) 0 0/100% 100% no-repeat}
:where(.sobre) .card__photo img{position:absolute;left:15.5%;top:11.5%;width:69%;height:75.5%;object-fit:cover;object-position:50% 25%;transform:scale(1.02);transform-origin:50% 30%}
:where(.sobre) .card__shade{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(255,170,40,.16),transparent 22%,transparent 78%,rgba(70,130,255,.2)),
  linear-gradient(180deg,rgba(8,16,40,0) 58%,rgba(8,16,40,.62) 86%),
  radial-gradient(120% 70% at 50% 34%,transparent 56%,rgba(4,8,24,.55) 100%)}
:where(.sobre) .card__plate{position:absolute;left:28%;right:28%;top:85.8%;height:7.2%;display:flex;align-items:center;justify-content:center;
  font:400 4.4cqw/1 var(--f-arcade);letter-spacing:0;text-transform:uppercase;color:var(--ink);white-space:nowrap;
  text-shadow:0 1px 0 rgba(255,255,255,.55);padding-top:.12em}
:where(.sobre) .card--locked .card__plate{font-size:6cqw;letter-spacing:.12em}

/* posições do leque (o padrão vale também sem JS) */
:where(.sobre) .card{container-type:inline-size;z-index:1}
html:not(.js) :where(.sobre) .fan>.card:nth-child(1){transform:translateX(-112%) translateY(-2%) rotate(-9deg) scale(.6);filter:brightness(.6) saturate(.72);z-index:1}
html:not(.js) :where(.sobre) .fan>.card:nth-child(2){transform:translateX(-50%);z-index:3}
html:not(.js) :where(.sobre) .fan>.card:nth-child(3){transform:translateX(12%) translateY(-2%) rotate(9deg) scale(.6);filter:brightness(.6) saturate(.72);z-index:1}
:where(.sobre) .card.is-pos-left{transform:translateX(-112%) translateY(-2%) rotate(-9deg) scale(.6);filter:brightness(.6) saturate(.72);z-index:1}
:where(.sobre) .card.is-pos-right{transform:translateX(12%) translateY(-2%) rotate(9deg) scale(.6);filter:brightness(.6) saturate(.72);z-index:1}
:where(.sobre) .card.is-pos-center{transform:translateX(-50%);filter:none;z-index:3;--glow:1}
:where(.sobre) .card.is-pos-left:hover,:where(.sobre) .card.is-pos-right:hover{filter:brightness(.85) saturate(.9)}
:where(.sobre) .card.no-anim{transition:none!important}
:where(.sobre) .card.is-pos-center .card__inner{animation:cardFloat 5.5s ease-in-out infinite}
@keyframes cardFloat{50%{transform:translateY(-10px)}}
:where(.sobre) .card.is-pos-center::before{content:"";position:absolute;left:50%;top:48%;width:190%;aspect-ratio:1;border-radius:50%;z-index:-1;pointer-events:none;
  transform:translate(-50%,-50%) scale(calc(.78 + var(--charge) * .4));
  background:radial-gradient(circle,rgba(255,240,170,calc(.34 + var(--charge) * .5)) 0%,rgba(255,196,40,calc(.18 + var(--charge) * .5)) 30%,rgba(255,150,0,0) 62%);
  filter:blur(8px);mix-blend-mode:screen;animation:aura 2.8s ease-in-out infinite}
@keyframes aura{50%{opacity:.72}}
.sobre.is-charging .card.is-pos-center .card__inner{animation:jitter .07s linear infinite}
@keyframes jitter{0%{transform:translate(1px,-1px)}25%{transform:translate(-1px,1px)}50%{transform:translate(1.5px,.5px)}75%{transform:translate(-1px,-1.5px)}}

:where(.sobre) .roster{display:none}

/* setas pixeladas */
:where(.sobre) .arrow{flex:none;display:grid;place-items:center;width:clamp(46px,5vw,84px);padding:0;border:0;background:none;cursor:pointer;
  transition:transform .18s var(--ease-back),filter .18s}
:where(.sobre) .arrow svg{width:100%;height:auto;display:block;
  filter:drop-shadow(3px 0 0 var(--ink)) drop-shadow(-3px 0 0 var(--ink)) drop-shadow(0 3px 0 var(--ink)) drop-shadow(0 -3px 0 var(--ink)) drop-shadow(0 6px 10px rgba(0,20,60,.5))}
:where(.sobre) .arrow--prev svg{transform:scaleX(-1)}
:where(.sobre) .arrow:hover{transform:scale(1.12)}
:where(.sobre) .arrow:active{transform:scale(.94)}
:where(.sobre) .arrow[disabled]{opacity:.35;cursor:default;transform:none}

/* ---------- PERGAMINHO / JANELA DE DIÁLOGO ---------- */
:where(.sobre) .scroll-box{grid-area:scroll;z-index:2;position:relative;width:min(100%,1320px);margin-inline:auto;
  --tw:0;
  border:clamp(14px,1.45vw,24px) solid transparent;
  border-image:url(../assets/img/sobre/moldura-9slice.png?v=cab9629d) 96 round;
  border-radius:4px;
  /* trilho dourado externo + contorno escuro + sombra projetada */
  box-shadow:
    0 0 0 2px var(--ink),
    0 0 0 7px var(--gold-300),
    0 0 0 8px var(--gold-700),
    0 0 0 10px var(--ink),
    0 14px 26px rgba(0,16,54,.5)}

/* rebites de canto */
:where(.sobre) .scroll-box::before{content:"";position:absolute;inset:-9px;border-radius:5px;pointer-events:none;z-index:3;
  --stud:radial-gradient(circle at 50% 42%,#fff6cf 0 18%,var(--gold-100) 30%,var(--gold-300) 58%,var(--gold-700) 78%,var(--ink) 80% 100%,transparent 100%);
  background:var(--stud),var(--stud),var(--stud),var(--stud);
  background-size:11px 11px;background-repeat:no-repeat;
  background-position:0 0,100% 0,0 100%,100% 100%}

:where(.sobre) .scroll__paper{position:relative;overflow:hidden;margin:-1px;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(12px,1.5vh,20px) clamp(16px,1.7vw,28px) clamp(12px,1.3vh,18px);
  background:
    url(../assets/img/sobre/papel-textura.png?v=ed22034a) repeat,
    radial-gradient(62% 100% at 24% 6%,rgba(255,255,255,.58),transparent 56%),
    radial-gradient(120% 150% at 50% 120%,rgba(150,106,44,.2),transparent 52%),
    radial-gradient(135% 120% at 50% 50%,transparent 52%,rgba(122,86,36,.2)),
    linear-gradient(168deg,var(--paper-1),var(--paper-2) 58%,var(--paper-3));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.55),
    inset 0 0 0 2px rgba(74,48,16,.35),
    inset 0 2px 0 rgba(255,255,255,.5),
    inset 0 0 50px rgba(120,86,38,.28)}

/* régua dupla interna */
:where(.sobre) .scroll__paper::before{content:"";position:absolute;inset:6px;pointer-events:none;z-index:1;
  border:1px solid rgba(74,48,16,.28);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}

/* brilho único quando o texto termina de digitar */
:where(.sobre) .scroll__paper::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-40%;width:34%;pointer-events:none;z-index:2;opacity:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.72) 45%,rgba(255,240,190,.5) 60%,transparent);
  transform:skewX(-14deg)}
:where(.sobre) .scroll-box.is-done .scroll__paper::after{animation:paperSheen .95s cubic-bezier(.3,.6,.3,1)}
@keyframes paperSheen{0%{opacity:0;left:-40%}18%{opacity:1}100%{opacity:0;left:118%}}

/* trilha de progresso da digitação, na base da caixa */
:where(.sobre) .scroll-box::after{content:"";position:absolute;left:8px;right:8px;bottom:5px;height:3px;z-index:4;pointer-events:none;
  background:linear-gradient(90deg,var(--gold-500),var(--gold-100) 55%,#fff6cf);
  transform:scaleX(var(--tw));transform-origin:0 50%;
  box-shadow:0 0 7px rgba(255,190,50,.85);
  opacity:0;transition:opacity .35s ease}
:where(.sobre) .scroll-box.is-typing::after{opacity:.95}

/* ---------- PLACA DE NOME DO PERSONAGEM ---------- */
:where(.sobre) .namebar{position:absolute;z-index:6;left:clamp(10px,3.2vw,58px);top:0;transform:translateY(-50%);
  display:flex;align-items:center;gap:clamp(4px,.6vw,9px);pointer-events:none;
  filter:drop-shadow(0 4px 9px rgba(0,16,54,.55))}
:where(.sobre) .namebar__orb{width:clamp(26px,2.6vw,42px);height:auto;display:block;position:relative;z-index:2;
  animation:orbFloat 3.8s ease-in-out infinite}
@keyframes orbFloat{50%{transform:translateY(-3px) rotate(6deg)}}

:where(.sobre) .tag{--cut:13px;display:block;margin-left:calc(clamp(26px,2.6vw,42px) / -2.1);padding:3px;
  background:linear-gradient(180deg,#fff2c0,var(--gold-300) 52%,var(--gold-700));
  clip-path:polygon(0 50%,var(--cut) 0,calc(100% - var(--cut)) 0,100% 50%,calc(100% - var(--cut)) 100%,var(--cut) 100%)}
:where(.sobre) .tag__in{display:block;padding:3px;background:linear-gradient(180deg,var(--navy),var(--navy-d));
  clip-path:polygon(0 50%,var(--cut) 0,calc(100% - var(--cut)) 0,100% 50%,calc(100% - var(--cut)) 100%,var(--cut) 100%)}
:where(.sobre) .tag__t{display:block;padding:.62em 1.5em .52em calc(1.5em + clamp(10px,1.1vw,18px));
  background:linear-gradient(180deg,#ffe9a2,#f6c13c 46%,#e09a12);
  clip-path:polygon(0 50%,var(--cut) 0,calc(100% - var(--cut)) 0,100% 50%,calc(100% - var(--cut)) 100%,var(--cut) 100%);
  font:400 clamp(9px,.78vw,13px)/1 var(--f-arcade);letter-spacing:.06em;text-transform:uppercase;
  color:#3b2204;text-shadow:0 1px 0 rgba(255,255,255,.5);white-space:nowrap}
:where(.sobre) .namebar.is-pop{animation:tagPop .42s var(--ease-back)}
@keyframes tagPop{0%{transform:translateY(-50%) scale(.82)}60%{transform:translateY(-50%) scale(1.06)}100%{transform:translateY(-50%) scale(1)}}

/* ---------- TEXTO ---------- */
:where(.sobre) .dialog{position:relative;z-index:1;font-family:var(--f-body);font-weight:500;font-size:clamp(16px,.5vw + .85vh + 4px,23px);line-height:1.5;letter-spacing:.005em;
  color:var(--paper-ink);cursor:default;columns:2;column-gap:clamp(26px,3.2vw,56px);column-fill:balance;
  column-rule:1px solid rgba(150,104,28,.3);
  padding:clamp(4px,.6vh,10px) clamp(2px,.4vw,8px) 0}
:where(.sobre) .dialog p{margin:0 0 .72em}
:where(.sobre) .dialog__h{margin:0 0 .5em;padding:0 0 .42em;font:400 .8em/1.35 var(--f-arcade);letter-spacing:.02em;color:#8a4f04;
  text-transform:uppercase;text-shadow:0 1px 0 rgba(255,255,255,.6);break-after:avoid;
  background-image:linear-gradient(90deg,rgba(185,126,16,.7),rgba(185,126,16,0) 82%);
  background-size:100% 2px;background-repeat:no-repeat;background-position:0 100%}
:where(.sobre) .dialog__h.is-empty{background-image:none}
:where(.sobre) .dialog__h.is-empty::before{opacity:0}
:where(.sobre) .dialog__h::before{content:"";display:inline-block;width:.5em;height:.5em;margin-right:.6em;
  transition:opacity .2s ease;
  transform:rotate(45deg) translateY(-.08em);
  background:linear-gradient(135deg,var(--gold-100),var(--gold-500));box-shadow:0 0 0 1px rgba(74,48,16,.5)}
:where(.sobre) .dialog__h+p{margin-bottom:1.15em}
:where(.sobre) .dialog p:last-child{margin-bottom:0}

/* termos em destaque — o realce acompanha a digitação (só a parte já escrita) */
:where(.sobre) .dialog .hl{font-weight:700}
:where(.sobre) .dialog .hl .tw-on,html:not(.js) :where(.sobre) .dialog b{color:#5a2f04;font-weight:700;
  background-image:linear-gradient(transparent 56%,rgba(247,183,39,.6) 56%,rgba(247,183,39,.22) 93%,transparent 93%);
  box-decoration-break:clone;-webkit-box-decoration-break:clone}

:where(.sobre) .tw-off{color:transparent;text-shadow:none}
:where(.sobre) .dialog.is-typing{cursor:pointer}
:where(.sobre) .dialog.is-typing .is-caret .tw-on::after{content:"";display:inline-block;width:0;height:1em;vertical-align:-2px;
  box-shadow:.3em 0 0 .22em var(--gold-500);animation:blink .6s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

:where(.sobre) .dialog__next{position:absolute;right:14px;bottom:10px;z-index:3;width:34px;height:30px;display:grid;place-items:center;border:0;background:none;cursor:pointer;animation:bob .9s ease-in-out infinite}
:where(.sobre) .tri{width:4px;height:4px;background:var(--gold-300);
  box-shadow:
    -8px -4px 0 0 var(--gold-100),-4px -4px 0 0 var(--gold-100),0 -4px 0 0 var(--gold-100),4px -4px 0 0 var(--gold-100),8px -4px 0 0 var(--gold-100),
    -4px 0 0 0 var(--gold-300),4px 0 0 0 var(--gold-300),
    0 4px 0 0 var(--gold-500);
  filter:drop-shadow(1px 1px 0 var(--ink)) drop-shadow(-1px 0 0 var(--ink)) drop-shadow(0 -1px 0 var(--ink)) drop-shadow(0 0 4px rgba(255,190,40,.7))}
@keyframes bob{50%{transform:translateY(4px)}}

/* ---------- CURSOR DE SELEÇÃO ---------- */
:where(.sobre) .select-cursor{position:absolute;left:0;top:0;z-index:30;pointer-events:none;opacity:0;--c:#ffe36e;
  width:var(--w,0);height:var(--h,0);transform:translate(var(--x,0),var(--y,0));
  transition:transform .2s cubic-bezier(.3,1.4,.5,1),width .2s,height .2s,opacity .15s;
  background:
    linear-gradient(var(--c),var(--c)) left top/15px 3px,linear-gradient(var(--c),var(--c)) left top/3px 15px,
    linear-gradient(var(--c),var(--c)) right top/15px 3px,linear-gradient(var(--c),var(--c)) right top/3px 15px,
    linear-gradient(var(--c),var(--c)) left bottom/15px 3px,linear-gradient(var(--c),var(--c)) left bottom/3px 15px,
    linear-gradient(var(--c),var(--c)) right bottom/15px 3px,linear-gradient(var(--c),var(--c)) right bottom/3px 15px;
  background-repeat:no-repeat;filter:drop-shadow(0 0 4px rgba(255,200,40,.95)) drop-shadow(0 0 1px #000)}
:where(.sobre) .select-cursor.is-on{opacity:1;animation:cursorPulse .9s ease-in-out infinite}
@keyframes cursorPulse{50%{scale:1.035}}
.js .sobre [data-nav]:focus-visible{outline:none}
.sobre :focus-visible{outline:2px solid var(--gold-300);outline-offset:3px}

/* ---------- TOAST / TESTER ---------- */
:where(.sobre) .toast{position:fixed;top:18px;left:50%;z-index:70;display:flex;align-items:center;gap:12px;max-width:min(92vw,460px);
  padding:12px 22px 12px 14px;transform:translate(-50%,-160%);transition:transform .45s cubic-bezier(.2,1.3,.4,1);pointer-events:none;
  background:linear-gradient(180deg,#15306a,#07122b);border:2px solid var(--gold-300);
  box-shadow:0 0 0 2px #000,0 12px 30px rgba(0,0,0,.5),0 0 22px rgba(255,190,40,.35)}
:where(.sobre) .toast.is-on{transform:translate(-50%,0)}
:where(.sobre) .toast__icon{flex:none;width:36px;height:36px;display:grid;place-items:center;font-size:20px;line-height:1;border-radius:50%;background:#040a1a;box-shadow:0 0 0 2px var(--gold-500);color:var(--gold-300)}
:where(.sobre) .toast__body{display:flex;flex-direction:column;gap:3px}
:where(.sobre) .toast__body b{font:400 13px/1.3 var(--f-arcade);letter-spacing:.02em;text-transform:uppercase;color:var(--gold-300)}
:where(.sobre) .toast__body span{font:400 17px/1.25 var(--f-body);color:#e1e8ff}
:where(.sobre) .tester{position:fixed;top:64px;right:16px;z-index:60;width:244px;padding:14px 14px 12px;
  font:400 17px/1.25 var(--f-ui);letter-spacing:.04em;color:#e6ecff;background:rgba(5,12,30,.94);border:1px solid var(--gold-500);
  box-shadow:0 0 0 1px #000,0 16px 36px rgba(0,0,0,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
:where(.sobre) .tester__title{margin:0 0 10px;font:400 12px/1 var(--f-arcade);letter-spacing:.04em;text-transform:uppercase;color:var(--gold-300)}
:where(.sobre) .tester label{display:flex;align-items:center;gap:8px;padding:4px 0;cursor:pointer}
:where(.sobre) .tester input{accent-color:#ffc21a;width:16px;height:16px}
:where(.sobre) .tester__hint{margin:0 0 10px;font:400 9px/1.5 var(--f-arcade);letter-spacing:.02em;color:#8fb4ff}
:where(.sobre) .tester__btns{display:grid;gap:6px;margin-top:10px}
:where(.sobre) .tester__btns button{cursor:pointer;padding:8px 10px;text-align:left;font:400 16px/1.15 var(--f-ui)!important;letter-spacing:.02em;text-transform:uppercase;
  color:var(--gold-50)!important;background:#0e1f48;border:1px solid rgba(255,213,74,.45);border-radius:3px}
:where(.sobre) .tester__btns button:hover{background:#17337a}
:where(.sobre) .tester__meta{margin:10px 0 0;font:400 9px/1.4 var(--f-arcade);letter-spacing:.04em;text-transform:uppercase;color:#8fb4ff}

/* ---------- ENTRADA ----------
   integração (12/10): atrasos em ~60% do original (hud e leque .5s, setas 1s, pergaminho 1,05s,
   placa do nome 1,45s), junto com os tempos do sobre.js: a seção parecia demorar a carregar */
.js .sobre[data-state="idle"] .sobre__bg{transform:scale(1.14);filter:brightness(.5) blur(6px)}
.sobre__title img{transition:transform .65s cubic-bezier(.2,1.5,.35,1) .15s,opacity .3s .15s}
.js .sobre[data-state="idle"] .sobre__title img{opacity:0;transform:translateX(-60%) rotate(-8deg) scale(1.1)}
.sobre__hud{transition:opacity .45s ease .3s,transform .7s var(--ease-back) .3s}
.js .sobre[data-state="idle"] .sobre__hud{opacity:0;transform:translateX(70px)}
:where(.sobre) .fan{transition:opacity .5s ease .3s,transform .8s cubic-bezier(.2,1.3,.3,1) .3s}
.js .sobre[data-state="idle"] .fan{opacity:0;transform:translateY(-60px) scale(.85)}
:where(.sobre) .arrow{transition:opacity .4s ease .6s,transform .18s var(--ease-back),filter .18s}
.js .sobre[data-state="idle"] .arrow{opacity:0}
:where(.sobre) .scroll-box{transform-origin:50% 0;transition:opacity .45s ease .6s,transform .6s var(--ease-back) .6s}
.js .sobre[data-state="idle"] .scroll-box{opacity:0;transform:scaleY(.4)}
:where(.sobre) .namebar{transition:opacity .35s ease .85s,transform .5s var(--ease-back) .85s}
.js .sobre[data-state="idle"] .namebar{opacity:0;transform:translateY(-50%) scale(.7)}
.sobre.no-anim,.sobre.no-anim *{transition:none!important}

/* ---------- MOBILE (conceito provisório) ---------- */
@media (max-width:899.98px){
  /* --- modo leve: sem canvas, blend, blur ou sombra pesada --- */
  .sobre__fx{display:none}
  .sobre::after{display:none}
  :where(.sobre) .card__art{filter:none}
  :where(.sobre) .card.is-pos-center::before{display:none}
  :where(.sobre) .power__shine{display:none}
  .sobre__edge{width:clamp(13px,3.6vw,22px)}
  /* a cena fica no topo (horizonte na altura do card) e o chão continua num degradê */
  .sobre__bg-img{inset:0;scale:1;
    background-image:url(../assets/img/sobre/cenario-mobile.webp?v=692b9a86),linear-gradient(180deg,#76be54 0%,#5a9a3c 45%,#3f7530 100%);
    background-size:100% auto,100% 100%;
    background-position:50% 0,50% 0;
    background-repeat:no-repeat,no-repeat}

  /* --- layout --- */
  .sobre__stage{display:flex;flex-direction:column;align-items:center;min-height:0;
    gap:clamp(8px,1.6vh,14px);padding:clamp(12px,2vh,18px) clamp(24px,6.5vw,40px) clamp(18px,3vh,26px)}
  .sobre__head{position:static;order:1;line-height:0}
  .sobre__title img{width:min(80vw,366px);margin-inline:auto}
  .sobre__hud{position:static;order:2;align-items:center}
  :where(.sobre) .power{width:min(50vw,230px);margin-inline:auto}

  :where(.sobre) .select{order:3;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:none;
    align-items:center;justify-content:center;gap:clamp(4px,1.5vw,10px);width:100%;height:auto;padding:0}
  :where(.sobre) .fan{--fan-k:1;height:auto;width:100%;max-width:min(72vw,330px);aspect-ratio:1142 / 1378;justify-self:center}
  :where(.sobre) .card:not(.is-pos-center){display:none}
  :where(.sobre) .card.is-pos-center{transform:translateX(-50%);animation:cardFloatMob 6s ease-in-out infinite}
  @keyframes cardFloatMob{50%{transform:translateX(-50%) translateY(-6px)}}
  :where(.sobre) .card.is-pos-center .card__inner{animation:none}
  :where(.sobre) .arrow{width:clamp(26px,7.5vw,38px);padding:8px 0}

  /* --- elenco em miniatura --- */
  :where(.sobre) .roster{order:4;display:flex;justify-content:center;align-items:center;gap:clamp(8px,3vw,14px);margin-top:2px}
  :where(.sobre) .mini{position:relative;width:clamp(42px,12.5vw,56px);aspect-ratio:1142 / 1378;padding:0;border:0;background:#0b1a3d;
    cursor:pointer;overflow:hidden;-webkit-tap-highlight-color:transparent;
    box-shadow:0 0 0 2px #26160a,0 0 0 4px rgba(247,183,39,.7);
    filter:brightness(.5) saturate(.65);transition:filter .25s,transform .25s,box-shadow .25s}
  :where(.sobre) .mini img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
  :where(.sobre) .mini.is-on{filter:none;transform:translateY(-3px) scale(1.06);
    box-shadow:0 0 0 2px #26160a,0 0 0 4px #ffe98f,0 6px 14px rgba(0,20,60,.5)}

  :where(.sobre) .scroll-box{order:5;width:100%;border-width:clamp(13px,4vw,22px);margin-top:clamp(14px,3.2vw,22px);
    box-shadow:0 0 0 2px var(--ink),0 0 0 6px var(--gold-300),0 0 0 7px var(--gold-700),0 0 0 9px var(--ink),0 10px 18px rgba(0,16,54,.45)}
  :where(.sobre) .scroll-box::before{inset:-8px}
  :where(.sobre) .scroll__paper{padding:12px 13px 16px}
  :where(.sobre) .scroll__paper::before{inset:5px}
  :where(.sobre) .scroll__paper::after{display:none}            /* sem brilho no mobile (lite) */
  :where(.sobre) .namebar{left:50%;transform:translate(-50%,-52%)}
  :where(.sobre) .namebar.is-pop{animation:tagPopMob .42s var(--ease-back)}
  @keyframes tagPopMob{0%{transform:translate(-50%,-52%) scale(.82)}60%{transform:translate(-50%,-52%) scale(1.06)}100%{transform:translate(-50%,-52%) scale(1)}}
  :where(.sobre) .namebar__orb{width:clamp(24px,7vw,32px)}
  :where(.sobre) .tag{--cut:11px;margin-left:calc(clamp(24px,7vw,32px) / -2.1)}
  :where(.sobre) .tag__t{font-size:clamp(8px,2.5vw,10px);padding:.6em 1.15em .5em calc(1.15em + clamp(9px,2.6vw,13px))}
  :where(.sobre) .dialog{columns:1;column-rule:none;font-size:clamp(15px,4.1vw,18px);line-height:1.5;padding:2px 2px 0}
  :where(.sobre) .dialog p{margin:0 0 .62em}
  :where(.sobre) .dialog__h{font-size:.76em}
  :where(.sobre) .dialog__next{right:8px;bottom:4px}
  :where(.sobre) .scroll-box::after{left:6px;right:6px;bottom:4px;height:3px}
  :where(.sobre) .toast{top:10px;padding:10px 16px 10px 12px}
  :where(.sobre) .tester{left:10px;right:10px;bottom:10px;top:auto;width:auto}
}
@media (min-width:900px) and (max-height:800px){
  .sobre__title img{width:clamp(252px,29vw,452px)}
  :where(.sobre) .power{width:clamp(190px,21vw,310px)}
  :where(.sobre) .scroll__paper{padding:10px 18px 12px}
  :where(.sobre) .namebar__orb{width:clamp(24px,2.2vw,34px)}
  :where(.sobre) .tag{--cut:11px;margin-left:calc(clamp(24px,2.2vw,34px) / -2.1)}
  :where(.sobre) .tag__t{font-size:clamp(8px,.68vw,11px);padding:.58em 1.25em .48em calc(1.25em + clamp(9px,.95vw,15px))}
}

@media (prefers-reduced-motion:reduce){
  .sobre *,.sobre *::before,.sobre *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
}
.sobre[data-reduced="true"] *,.sobre[data-reduced="true"] *::before,.sobre[data-reduced="true"] *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}