@font-face{font-family:'Chakra Petch';font-weight:600;font-style:normal;font-display:swap;src:url('/fonts/chakra-petch-600.woff2') format('woff2')}
@font-face{font-family:'Chakra Petch';font-weight:700;font-style:normal;font-display:swap;src:url('/fonts/chakra-petch-700.woff2') format('woff2')}
@font-face{font-family:'Lato';font-weight:400;font-style:normal;font-display:swap;src:url('/fonts/lato-400.woff2') format('woff2')}
@font-face{font-family:'Lato';font-weight:700;font-style:normal;font-display:swap;src:url('/fonts/lato-700.woff2') format('woff2')}
@font-face{font-family:'Share Tech Mono';font-weight:400;font-style:normal;font-display:swap;src:url('/fonts/share-tech-mono-400.woff2') format('woff2')}

/* ===== Visual "HUD tático" (docs/redesign-v2.md): cores e logos do kit da marca, cara de tela de jogo militar ===== */
:root{
  color-scheme:dark;
  --bg:#0A0D0B;--bg-2:#0f1411;--surface:#151b17;--surface-2:#1d2620;
  --line:#26312a;--line-2:#36453b;
  --fg:#F2F2F2;--muted:#a6b0a9;--faint:#8a958d;
  --accent:#0BAD4B;--accent-hi:#2ad46b;--accent-soft:rgba(11,173,75,.12);--accent-line:rgba(11,173,75,.5);
  --brand:#0F6B3A;--brand-hover:#138448;--signal:#e4572e;--ouro:#e8c15a;
  --brilho:0 0 14px rgba(42,212,107,.55);
  --display:'Chakra Petch','Arial Narrow',Impact,sans-serif;
  --body:'Lato','Segoe UI',system-ui,sans-serif;
  --mono:'Share Tech Mono',ui-monospace,Consolas,monospace;
  --ease:cubic-bezier(.32,.72,0,1);
  --gutter:clamp(18px,4vw,32px);
  --max:1180px;
  --c:16px; /* tamanho do canto cortado */
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:pan-x pan-y;scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--fg);font:400 1.0625rem/1.65 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* fundo tático do kit (fixo) e grão de filme por cima de tudo (só no PC) */
body::before{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(180deg,rgba(10,13,11,.5) 0%,rgba(10,13,11,.86) 38%,rgba(10,13,11,.97) 100%),url('/img/tatico-1254.webp') center top/cover no-repeat}
body::after{content:'';position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
img{max-width:100%;height:auto}
a{color:inherit}
::selection{background:var(--accent);color:#06140b}
:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px}

/* proteção: sem zoom por duplo toque, sem seleção, sem menu de toque longo */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
img,video{-webkit-user-drag:none;user-drag:none}
input,textarea,select,[contenteditable="true"],[data-allow-copy]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
@media print{body>*{display:none!important}body::before{content:"Green Team · War Dogs Brasil";display:block;position:static;padding:40px;font:16px sans-serif;color:#000;background:none}}

.skip{position:fixed;left:12px;top:-80px;z-index:100;padding:10px 16px;background:var(--brand);color:#fff;text-decoration:none;font-weight:700;transition:top .2s var(--ease)}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}

/* ===== tipografia ===== */
.display{font-family:var(--display);font-weight:700;line-height:1.04;letter-spacing:.005em;text-wrap:balance;margin:0}
h1.display{font-size:clamp(2.4rem,6.6vw,4.8rem)}
h2.display{font-size:clamp(1.85rem,4.4vw,3rem)}
h3.display{font-size:clamp(1.2rem,2.2vw,1.5rem);line-height:1.15}
.page-head .display,.sec-head .display,.caps{text-transform:uppercase;letter-spacing:.012em}
.lead{font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--muted);max-width:58ch;margin:0;text-wrap:pretty}
.sec{position:relative;padding-block:clamp(64px,8.5vw,112px)}
.sec-head{display:grid;gap:16px;max-width:48rem;margin-bottom:clamp(34px,5vw,58px)}
/* linha de setor no topo de cada seção e o número do setor ao fundo, como as divisões de um painel */
.sec+.sec::before{content:'';position:absolute;top:0;left:max(var(--gutter),calc((100% - var(--max))/2 + var(--gutter)));right:max(var(--gutter),calc((100% - var(--max))/2 + var(--gutter)));height:1px;background:linear-gradient(90deg,var(--accent-hi),var(--accent-line) 120px,var(--line) 260px,transparent)}
.setor{position:absolute;top:clamp(24px,4vw,56px);right:max(var(--gutter),calc((100% - var(--max))/2 + var(--gutter)));z-index:-1;font:700 clamp(6rem,15vw,12rem)/1 var(--display);color:transparent;-webkit-text-stroke:1px rgba(42,212,107,.16);pointer-events:none}
/* mapa topográfico do kit atrás da seção (o preto da imagem some na mistura) */
.sec.mapa::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('/img/topo-900.webp') center/900px;mix-blend-mode:screen;opacity:.1;-webkit-mask-image:linear-gradient(transparent,#000 20%,#000 80%,transparent);mask-image:linear-gradient(transparent,#000 20%,#000 80%,transparent)}
/* etiqueta de painel: [01] NOME — fonte mono, como leitura de HUD */
.hud-tag{display:inline-flex;align-items:center;gap:10px;margin:0;font:400 .8rem/1.2 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--accent-hi)}
.hud-tag b{font-weight:400;padding:3px 7px;border:1px solid var(--accent-line);background:var(--accent-soft);color:var(--fg);letter-spacing:.08em}
.hud-tag::after{content:'';width:44px;height:1px;background:linear-gradient(90deg,var(--accent-hi),transparent)}
.mono{font-family:var(--mono);letter-spacing:.06em}

/* ===== peças do HUD ===== */
/* cantos em L (marca dos banners da Green Team) */
.framed{position:relative;border:1px solid var(--line);background:linear-gradient(160deg,rgba(26,34,29,.9),rgba(15,20,17,.88))}
.framed::before,.framed::after{content:'';position:absolute;width:14px;height:14px;border:2px solid var(--accent);pointer-events:none}
.framed::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.framed::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
/* canto cortado (painel e botão de jogo). A borda fica nos lados retos */
.corte{clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
/* mira: quatro cantos que fecham no alvo ao passar o mouse ou focar */
.alvo{position:relative}
.alvo::after{content:'';position:absolute;inset:-9px;z-index:2;pointer-events:none;opacity:0;transition:opacity .25s var(--ease),inset .35s var(--ease);
  background:
    linear-gradient(var(--accent-hi),var(--accent-hi)) 0 0/16px 2px no-repeat,linear-gradient(var(--accent-hi),var(--accent-hi)) 0 0/2px 16px no-repeat,
    linear-gradient(var(--accent-hi),var(--accent-hi)) 100% 0/16px 2px no-repeat,linear-gradient(var(--accent-hi),var(--accent-hi)) 100% 0/2px 16px no-repeat,
    linear-gradient(var(--accent-hi),var(--accent-hi)) 0 100%/16px 2px no-repeat,linear-gradient(var(--accent-hi),var(--accent-hi)) 0 100%/2px 16px no-repeat,
    linear-gradient(var(--accent-hi),var(--accent-hi)) 100% 100%/16px 2px no-repeat,linear-gradient(var(--accent-hi),var(--accent-hi)) 100% 100%/2px 16px no-repeat}
.alvo:hover::after,.alvo:focus-within::after,.alvo.ativo::after{opacity:1;inset:-3px}
/* luz que segue o mouse (site.js põe --mx e --my) */
.luz{position:relative;isolation:isolate}
.luz::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .35s var(--ease);background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(42,212,107,.16),transparent 62%)}
.luz:hover::before{opacity:1}
/* luz de status piscando */
.led{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent-hi);box-shadow:var(--brilho);animation:piscar 1.8s ease-in-out infinite}
@keyframes piscar{50%{opacity:.3}}
/* ícones (sprite /img/icones-v1.svg) e insígnias */
.ic{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ins{width:1.6em;height:1.6em;flex:none;fill:currentColor}
.ins.t-pracas,.ins.t-graduados{color:var(--accent-hi)}
.ins.t-oficiais{color:#dfe5e1}
.ins.t-comando{color:var(--ouro)}
.tile{--c:10px;--b:var(--accent-line);--fill:radial-gradient(circle at 30% 25%,rgba(42,212,107,.3),rgba(11,173,75,.07) 72%);display:grid;place-items:center;flex:none;width:58px;height:58px;color:var(--accent-hi);clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)));transition:transform .45s var(--ease),background .3s var(--ease)}
.tile .ic{width:30px;height:30px}
.tile.p{--c:8px;width:44px;height:44px}
.tile.p .ic{width:22px;height:22px}

/* ===== botões: canto cortado, brilho que passa ao passar o mouse ===== */
.btn{--c:12px;position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:8px 8px 8px 24px;border:0;--b:rgba(42,212,107,.65);--fill:linear-gradient(180deg,#169150,#0F6B3A);color:#fff;font:700 .95rem/1 var(--display);letter-spacing:.09em;text-transform:uppercase;text-decoration:none;cursor:pointer;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)));transition:filter .3s var(--ease),transform .2s var(--ease)}
.btn::after{content:'';position:absolute;inset:0 auto 0 0;z-index:-1;width:60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:translateX(-130%) skewX(-18deg);transition:transform .7s var(--ease)}
.btn:hover{filter:brightness(1.15) saturate(1.1)}
.btn:hover::after{transform:translateX(230%) skewX(-18deg)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:0;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px var(--accent)}
.btn-i{display:grid;place-items:center;width:36px;height:36px;background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);transition:transform .35s var(--ease),background .3s var(--ease)}
.btn:hover .btn-i{transform:translateX(3px);background:rgba(0,0,0,.35)}
.btn-i svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.btn.ghost{--b:var(--line-2);--fill:rgba(10,13,11,.55);color:var(--fg)}
.btn.ghost:hover{--b:var(--accent-line);--fill:var(--accent-soft);filter:none}
.btn.ghost:focus-visible{box-shadow:inset 0 0 0 2px var(--accent-hi)}
.btn.small{--c:9px;min-height:44px;padding:5px 5px 5px 18px;font-size:.86rem}
.btn.small .btn-i{width:32px;height:32px}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.textlink{display:inline-flex;align-items:center;min-height:44px;color:var(--accent-hi);font:600 1rem var(--display);text-underline-offset:4px}

/* ===== menu do topo: barra de HUD ===== */
.nav{position:fixed;inset:0 0 auto;z-index:40;display:flex;align-items:center;gap:clamp(8px,1.6vw,18px);height:68px;padding:0 max(var(--gutter),calc((100% - 1300px)/2));background:linear-gradient(180deg,rgba(10,13,11,.94),rgba(10,13,11,.8));border-bottom:1px solid var(--line);transition:height .3s var(--ease),background .3s var(--ease)}
.nav::after{content:'';position:absolute;left:0;bottom:-1px;width:min(260px,40%);height:1px;background:linear-gradient(90deg,var(--accent-hi),transparent);box-shadow:var(--brilho);pointer-events:none}
.nav.rolou{height:58px;background:rgba(10,13,11,.96)}
.nav-brand{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none}
.nav-brand img{display:block;width:40px;height:auto}
.nav-brand span{display:grid;font:700 1.02rem/1.05 var(--display);letter-spacing:.05em;text-transform:uppercase}
.nav-brand small{font:400 .64rem var(--mono);letter-spacing:.24em;color:var(--accent-hi)}
.nav-links{display:flex;align-items:center;gap:2px;list-style:none;margin:0 0 0 clamp(6px,1.6vw,24px);padding:0}
.nav-links a{position:relative;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 12px;color:var(--muted);text-decoration:none;font:700 .86rem var(--display);letter-spacing:.08em;text-transform:uppercase;transition:color .25s var(--ease)}
.nav-links a b{font:400 .7rem var(--mono);letter-spacing:.04em;color:var(--faint);transition:color .25s var(--ease)}
.nav-links a::after{content:'';position:absolute;left:12px;right:12px;bottom:6px;height:2px;background:var(--accent-hi);box-shadow:var(--brilho);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav-links a:hover{color:var(--fg)}
.nav-links a:hover::after{transform:scaleX(.35)}
.nav-links a[aria-current="page"]{color:var(--fg)}
.nav-links a[aria-current="page"] b{color:var(--accent-hi)}
.nav-links a[aria-current="page"]::after{transform:none}
.nav-links svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
/* "Entrar" (membro ou staff): vira "Minha área" para quem já entrou pelo Discord (site.js) */
.nav-entrar{--c:9px;display:inline-flex;align-items:center;gap:7px;min-height:44px;margin-left:auto;padding:0 15px;--b:var(--line-2);--fill:rgba(10,13,11,.6);color:var(--fg);text-decoration:none;font:700 .86rem var(--display);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)));transition:box-shadow .25s var(--ease),background .25s var(--ease)}
.nav-entrar:hover{--b:var(--accent-line);--fill:var(--accent-soft)}
.nav-entrar .ic{width:18px;height:18px;color:var(--accent-hi)}
.nav-entrar.logado,.nav-entrar[aria-current="page"]{--b:var(--accent-line);--fill:var(--accent-soft)}
.menu-btn{--c:9px;--b:var(--line-2);--fill:rgba(10,13,11,.6);display:none;position:relative;width:44px;height:44px;border:0;color:var(--fg);cursor:pointer;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.menu-btn i{position:absolute;left:13px;right:13px;height:1.5px;background:currentColor;transition:transform .5s var(--ease),opacity .3s var(--ease)}
.menu-btn i:nth-child(1){top:16px}.menu-btn i:nth-child(2){top:21px;right:18px}.menu-btn i:nth-child(3){top:26px}
.menu-btn[aria-expanded="true"] i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] i:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
/* menu do celular: tela cheia, como o menu de um jogo */
.sheet{position:fixed;inset:0;z-index:39;display:grid;align-content:center;gap:4px;padding:90px var(--gutter) 40px;background:linear-gradient(180deg,rgba(10,13,11,.97),rgba(10,13,11,.99)),url('/img/topo-900.webp') center/cover;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility 0s linear .4s}
.sheet.open{opacity:1;visibility:visible;transition:opacity .4s var(--ease)}
.sheet a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:0 4px;border-bottom:1px solid var(--line);text-decoration:none;font:700 clamp(1.5rem,7vw,2.1rem) var(--display);letter-spacing:.04em;text-transform:uppercase;transform:translateX(-24px);opacity:0;transition:transform .55s var(--ease),opacity .45s var(--ease),color .2s}
.sheet a b{font:400 .85rem var(--mono);color:var(--accent-hi);letter-spacing:.1em}
.sheet.open a{transform:none;opacity:1}
.sheet.open a:nth-child(2){transition-delay:.05s}.sheet.open a:nth-child(3){transition-delay:.1s}.sheet.open a:nth-child(4){transition-delay:.15s}.sheet.open a:nth-child(5){transition-delay:.2s}.sheet.open a:nth-child(6){transition-delay:.25s}
.sheet a[aria-current="page"]{color:var(--accent-hi)}
.sheet small{font:400 .8rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
/* o menu completo só cabe a partir de 981px; abaixo disso vira o botão de três risquinhos (o "Entrar" continua à vista) */
@media (max-width:980px){
  .nav-links,.nav>.btn{display:none}
  .menu-btn{display:block}
}
@media (min-width:821px){.nav{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}}
@media (max-width:420px){
  .nav-brand small{display:none}
  .nav-entrar{gap:6px;padding:0 12px;font-size:.8rem}
}
@media (max-width:400px){
  .nav-entrar.logado [data-txt]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (max-width:380px){
  .nav-entrar [data-txt]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* ===== abertura da home: tela de início de jogo ===== */
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:100vh;min-height:100dvh;display:grid;align-items:center;padding-block:118px 84px}
.hero-fx{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero-fx>*{position:absolute}
.fx-base{inset:0;background:radial-gradient(ellipse 60% 55% at 74% 46%,rgba(11,173,75,.26),transparent 62%),linear-gradient(180deg,rgba(10,13,11,.2),rgba(10,13,11,.72) 78%,var(--bg)),url('/img/tatico-1254.webp') center/cover}
.fx-topo{inset:-12%;background:url('/img/topo-900.webp') center/860px repeat;mix-blend-mode:screen;opacity:.22;animation:deriva 70s linear infinite alternate}
@keyframes deriva{to{transform:translate3d(-5%,4%,0)}}
.fx-linhas{inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.3) 0 1px,transparent 1px 3px);opacity:.5}
.fx-varredura{left:0;right:0;top:-25%;height:25%;background:linear-gradient(180deg,transparent,rgba(42,212,107,.03) 70%,rgba(42,212,107,.085) 96%,transparent);animation:varrer 8s linear infinite}
@keyframes varrer{to{transform:translateY(520%)}}
.fx-vinheta{inset:0;background:radial-gradient(ellipse at 50% 45%,transparent 50%,rgba(0,0,0,.6))}
.fx-canto{width:28px;height:28px;border:2px solid var(--accent-line)}
.fx-canto.a{top:86px;left:var(--gutter);border-right:0;border-bottom:0}
.fx-canto.b{top:86px;right:var(--gutter);border-left:0;border-bottom:0}
.fx-canto.c{bottom:22px;left:var(--gutter);border-right:0;border-top:0}
.fx-canto.d{bottom:22px;right:var(--gutter);border-left:0;border-top:0}
.fx-leitura{display:flex;align-items:center;gap:10px;font:400 .7rem var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--faint)}
.fx-leitura.a{top:94px;left:calc(var(--gutter) + 40px)}
.fx-leitura.b{bottom:28px;right:calc(var(--gutter) + 40px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(24px,5vw,64px);align-items:center}
.hero-copy{display:grid;gap:24px;justify-items:start}
.hero-copy .lead{max-width:48ch}
.hero h1{display:grid;gap:14px}
.h1-marca{display:block;font-size:clamp(3.5rem,10.5vw,7.6rem);line-height:.86;letter-spacing:.01em;text-transform:uppercase}
.h1-marca .contorno{display:block;color:transparent;-webkit-text-stroke:2px var(--accent-hi);text-shadow:0 0 40px rgba(42,212,107,.25)}
.h1-sub{display:flex;align-items:center;gap:12px;font:600 clamp(1rem,2.1vw,1.35rem)/1.2 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--fg)}
.h1-sub::before{content:'';flex:none;width:34px;height:3px;background:var(--accent-hi);box-shadow:var(--brilho)}
/* falha de sinal no título: duas cópias deslocadas que piscam em fatias (ao abrir e ao passar o mouse) */
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{content:attr(data-texto);position:absolute;inset:0;pointer-events:none;opacity:0}
.glitch::before{color:var(--accent-hi);transform:translate(-3px,0);animation:falha 1.1s steps(2) .5s 1}
.glitch::after{color:#cfeedd;transform:translate(3px,0);animation:falha 1.1s steps(2) .62s 1 reverse}
.glitch:hover::before{animation:falha .7s steps(2) 1}
.glitch:hover::after{animation:falha .7s steps(2) .08s 1 reverse}
@keyframes falha{
  0%{opacity:.9;clip-path:inset(12% 0 70% 0)}
  20%{clip-path:inset(62% 0 18% 0)}
  40%{clip-path:inset(30% 0 48% 0)}
  60%{clip-path:inset(78% 0 6% 0)}
  80%{opacity:.9;clip-path:inset(4% 0 86% 0)}
  100%{opacity:0;clip-path:inset(40% 0 40% 0)}
}
/* números ao vivo (site.js lê /api/numeros) */
.hud-stats{display:flex;flex-wrap:wrap;gap:16px 0;margin:6px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.hud-stats>div{display:flex;flex-direction:column-reverse;gap:6px;padding:0 24px;border-left:1px solid var(--line)}
.hud-stats>div:first-child{padding-left:0;border-left:0}
.hud-stats dt{font:400 .7rem/1.2 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.hud-stats dd{margin:0;font:700 clamp(1.6rem,3vw,2.2rem)/1 var(--display);font-variant-numeric:tabular-nums;color:var(--fg)}
.hud-stats dd small{margin-left:4px;font-size:.5em;color:var(--accent-hi);letter-spacing:.06em}
/* emblema: escudo com radar, anéis de mira e as garras da marca */
.hero-emblema{position:relative;justify-self:center;display:grid;place-items:center;width:min(100%,440px);aspect-ratio:1}
.hero-emblema>*{grid-area:1/1}
.radar,.aneis,.mira-giro{position:absolute;left:50%;top:50%;z-index:-1;aspect-ratio:1;border-radius:50%;translate:-50% -50%;pointer-events:none}
.aneis{width:118%;background:repeating-radial-gradient(circle,transparent 0 16.6%,rgba(42,212,107,.22) 17% 17.6%)}
.radar{width:118%;background:conic-gradient(from 0deg,transparent 0 290deg,rgba(42,212,107,.12) 330deg,rgba(42,212,107,.4) 360deg);animation:girar 7s linear infinite}
.mira-giro{width:96%;border:1px dashed rgba(42,212,107,.4);animation:girar 50s linear infinite reverse}
@keyframes girar{to{transform:rotate(1turn)}}
.hero-emblema .garras{position:absolute;z-index:-1;width:120%;max-width:none;left:-16%;top:24%;opacity:.55;transform:rotate(-6deg)}
.hero-emblema .escudo{position:relative;width:74%;filter:drop-shadow(0 30px 50px rgba(0,0,0,.7)) drop-shadow(0 0 30px rgba(11,173,75,.25));animation:pousa 1.1s var(--ease) .05s both,flutua 6s ease-in-out 1.4s infinite}
@keyframes pousa{from{opacity:0;transform:translateY(-30px) scale(.94)}to{opacity:1;transform:none}}
@keyframes flutua{50%{transform:translateY(-12px)}}
.status-chip{--c:8px;position:absolute;left:50%;bottom:1%;translate:-50% 0;display:flex;align-items:center;gap:10px;margin:0;padding:9px 16px;--b:var(--accent-line);--fill:rgba(10,13,11,.88);font:400 .74rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
/* entrada da abertura: liga como um monitor */
@keyframes liga{0%{opacity:0;transform:translateY(22px)}40%{opacity:.6}55%{opacity:.25}100%{opacity:1;transform:none}}
@keyframes surge{from{opacity:0}}
.hero-copy>*{animation:liga .9s var(--ease) both}
.hero-copy>*:nth-child(1){animation-delay:.1s}.hero-copy>*:nth-child(2){animation-delay:.22s}.hero-copy>*:nth-child(3){animation-delay:.36s}.hero-copy>*:nth-child(4){animation-delay:.5s}.hero-copy>*:nth-child(5){animation-delay:.64s}
.rolar{position:absolute;left:50%;bottom:20px;translate:-50% 0;display:grid;justify-items:center;gap:6px;font:400 .66rem var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--faint);text-decoration:none}
.rolar i{display:block;width:2px;height:26px;background:linear-gradient(var(--accent-hi),transparent);animation:descer 1.8s ease-in-out infinite}
@keyframes descer{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}

/* ===== faixa de avisos correndo ===== */
.ticker{position:relative;overflow:hidden;border-block:1px solid var(--line);background:linear-gradient(90deg,rgba(11,173,75,.14),rgba(10,13,11,.78) 22%,rgba(10,13,11,.78) 78%,rgba(11,173,75,.14))}
.ticker::before,.ticker::after{content:'';position:absolute;top:0;bottom:0;z-index:1;width:60px;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.ticker::after{right:0;background:linear-gradient(-90deg,var(--bg),transparent)}
.ticker-trilho{display:flex;width:max-content;margin:0;padding:0;list-style:none;animation:correr 48s linear infinite}
.ticker:hover .ticker-trilho{animation-play-state:paused}
.ticker li{display:inline-flex;align-items:center;gap:18px;padding:13px 18px;font:400 .82rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.ticker li::after{content:'';width:7px;height:7px;background:var(--accent-hi);transform:rotate(45deg);box-shadow:var(--brilho)}
@keyframes correr{to{transform:translateX(-50%)}}

/* ===== briefing: quem somos ===== */
.brief-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,6vw,84px);align-items:start}
.brief-main{position:sticky;top:110px;display:grid;gap:18px}
.brief-main .lead{max-width:44ch}
.objetivos{display:grid;gap:12px;list-style:none;margin:0;padding:0}
.obj{--c:18px;display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:4px 18px;align-items:start;padding:22px 24px 24px 20px;background:linear-gradient(95deg,rgba(11,173,75,.12),rgba(21,27,23,.82) 42%);box-shadow:inset 3px 0 0 var(--accent);clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,0 100%)}
.obj-n{padding-top:6px;font:400 .82rem var(--mono);letter-spacing:.1em;color:var(--accent-hi)}
.obj .tile{width:50px;height:50px}
.obj .tile .ic{width:26px;height:26px}
.obj h3{margin:2px 0 6px;font:700 1.18rem var(--display);letter-spacing:.06em;text-transform:uppercase}
.obj p{margin:0;color:var(--muted)}
.obj:hover .tile{transform:rotate(-6deg) scale(1.06)}

/* ===== cadeia de comando: as patentes em linha, do Recruta ao Alto Comando ===== */
.escalada{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;list-style:none;margin:0;padding:0}
.escalada::before{content:'';position:absolute;left:6%;right:6%;top:39px;height:2px;background:linear-gradient(90deg,var(--accent-line),var(--accent-hi) 60%,var(--ouro));box-shadow:var(--brilho);transform-origin:left;transform:scaleX(0);transition:transform 1.6s var(--ease) .2s}
.escalada.in::before{transform:none}
.patente{display:grid;justify-items:center;gap:10px;padding:0 4px 16px;text-align:center}
/* hexágono com borda: o fundo é a cor da borda e o ::before, um pouco menor, é o recheio */
.pat-ins{position:relative;z-index:1;display:grid;place-items:center;width:80px;height:80px;background:var(--accent-line);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);transition:transform .45s var(--ease),background .3s var(--ease)}
.pat-ins::before{content:'';position:absolute;inset:1.5px;z-index:-1;background:radial-gradient(circle at 50% 30%,rgba(42,212,107,.28),#0b100d 70%);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.pat-ins .ins{width:40px;height:40px}
.patente b{font:700 1rem var(--display);letter-spacing:.06em;text-transform:uppercase}
.patente small{max-width:18ch;color:var(--muted);font-size:.88rem;line-height:1.4}
.patente:hover .pat-ins{transform:translateY(-6px);background:var(--accent-hi)}
.patente.topo .pat-ins{background:rgba(232,193,90,.6)}
.patente.topo .pat-ins::before{background:radial-gradient(circle at 50% 30%,rgba(232,193,90,.35),#0b100d 70%)}
.patente.topo:hover .pat-ins{background:var(--ouro)}
.grupos-escala{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin:8px 0 0;padding:0;list-style:none}
.grupos-escala li{position:relative;padding-top:12px;border-top:1px solid var(--line-2);text-align:center;font:400 .72rem var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.grupos-escala li::before,.grupos-escala li::after{content:'';position:absolute;top:-6px;width:1px;height:10px;background:var(--line-2)}
.grupos-escala li::before{left:0}.grupos-escala li::after{right:0}
.grupos-escala .g2{grid-column:span 2}
.grupos-escala .g-topo{color:var(--ouro)}
.subir{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:clamp(34px,5vw,52px) 0 0;padding:0;list-style:none}
.subir li{--c:12px;--b:var(--line);--fill:rgba(21,27,23,.8);display:flex;align-items:center;gap:12px;padding:14px 16px;font:700 .95rem/1.25 var(--display);clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,0 100%)}
.subir .ic{width:24px;height:24px;color:var(--accent-hi)}
.subir-nota{margin:16px 0 0;color:var(--muted);max-width:62ch}

/* ===== funções: seleção de classe, como no menu de um jogo ===== */
.classes{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(16px,3vw,32px);align-items:stretch}
.classes-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-content:start}
.classe-tab{--c:10px;--b:var(--line);--fill:rgba(21,27,23,.82);display:flex;align-items:center;gap:12px;min-height:58px;padding:10px 14px;border:0;color:var(--muted);font:700 .92rem/1.2 var(--display);letter-spacing:.04em;text-align:left;text-transform:uppercase;cursor:pointer;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,0 100%);transition:color .2s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease)}
.classe-tab .ic{width:26px;height:26px;color:var(--accent-hi)}
.classe-tab:hover{color:var(--fg);--fill:rgba(28,38,32,.92)}
.classe-tab[aria-selected="true"]{color:var(--fg);--b:var(--accent-line);--fill:linear-gradient(95deg,rgba(11,173,75,.28),rgba(21,27,23,.9) 70%);box-shadow:inset 3px 0 0 var(--accent-hi),inset 0 0 0 1px var(--b)}
.classe-tab:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--accent-hi)}
.classes-painel{display:grid}
.classe{--c:22px;position:relative;overflow:hidden;display:grid;align-content:end;gap:14px;min-height:340px;padding:clamp(24px,4vw,40px);--b:var(--accent-line);--fill:radial-gradient(circle at 78% 30%,rgba(11,173,75,.22),transparent 55%),linear-gradient(160deg,rgba(26,34,29,.94),rgba(12,16,14,.96));clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.classe+.classe{margin-top:10px}
.classes.js .classe+.classe{margin-top:0}
.classes.js .classe{grid-area:1/1;animation:surge .35s var(--ease)}
.classe-ic{position:absolute;right:-4%;top:-6%;width:62%;height:auto;color:rgba(42,212,107,.13);stroke-width:1.1}
.classe h3{margin:0;font-size:clamp(1.8rem,3.6vw,2.6rem);text-transform:uppercase;letter-spacing:.03em}
.classe>p:last-child{margin:0;max-width:40ch;color:var(--muted);font-size:1.08rem}
.classes-nota{margin:14px 0 0;color:var(--faint);font-size:.95rem}

/* ===== estilos de jogo (pesquisa) ===== */
.estilos-faixa{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:center;padding:clamp(24px,4vw,40px)}
.estilos-faixa h2{margin:14px 0 12px;font-size:clamp(1.6rem,3.4vw,2.4rem)}
.estilos-chips{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0;padding:0;list-style:none}
.estilos-chips li{--c:10px;--b:var(--line-2);--fill:rgba(10,13,11,.55);display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;align-items:center;padding:12px 16px 12px 12px;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,0 100%)}
.estilos-chips .tile{grid-row:1/span 2}
.estilos-chips b{font:700 1rem var(--display);letter-spacing:.06em;text-transform:uppercase}
.estilos-chips small{color:var(--muted);font-size:.88rem;max-width:30ch}

/* ===== chamada final: alistamento com camuflagem da marca ===== */
.alistar{--c:28px;position:relative;isolation:isolate;overflow:hidden;display:grid;gap:24px;justify-items:start;padding:clamp(32px,6vw,72px);--b:var(--accent-line);--fill:linear-gradient(100deg,rgba(10,13,11,.96) 30%,rgba(10,13,11,.62)),url('/img/camo-1200.webp') center/cover;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.alistar::after{content:'';position:absolute;right:-4%;top:50%;z-index:-1;width:min(46%,440px);aspect-ratio:520/504;translate:0 -50%;background:url('/img/marca-dagua-520.webp') center/contain no-repeat;opacity:.16;pointer-events:none}
.alistar h2{max-width:16ch}
.passos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:min(100%,760px);margin:0;padding:0;list-style:none}
.passos li{--c:12px;--b:var(--line-2);--fill:rgba(10,13,11,.72);display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 14px;align-items:center;padding:14px 16px;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,0 100%)}
.passos .tile{grid-row:1/span 2}
.passos b{font:700 1rem var(--display);letter-spacing:.04em;text-transform:uppercase}
.passos small{color:var(--muted);font:400 .78rem var(--mono);letter-spacing:.12em;text-transform:uppercase}

/* ===== selos curtos com ícone (no lugar de frases) ===== */
.fatos{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.fatos li{--c:8px;--b:var(--line-2);--fill:rgba(15,20,17,.78);display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 14px 6px 10px;font:600 .92rem var(--display);clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,0 100%)}
.fatos .ic{width:19px;height:19px;color:var(--accent-hi)}

/* ===== páginas internas ===== */
.page-head{position:relative;padding-block:136px clamp(40px,6vw,72px)}
.page-head .hud-tag{margin-bottom:18px}
.page-head .lead{margin-top:20px}
.note{margin:18px 0 0;color:var(--faint);font-size:.92rem}

/* passo a passo em linha do tempo (alistamento): a linha se desenha ao rolar */
.trilha{position:relative;display:grid;gap:clamp(26px,3.4vw,40px);list-style:none;margin:0;padding:0}
.trilha::before{content:'';position:absolute;left:31px;top:34px;bottom:34px;width:2px;background:linear-gradient(var(--accent-hi),var(--accent-line) 70%,transparent);box-shadow:var(--brilho);transform-origin:top;transform:scaleY(0);transition:transform 1.6s var(--ease) .2s}
.trilha.in::before{transform:none}
.trilha>li{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);gap:clamp(14px,3vw,28px);align-items:start}
.passo-ic{position:relative;z-index:1;display:grid;place-items:center;width:64px;height:64px;background:var(--accent);color:var(--accent-hi);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.passo-ic::before{content:'';position:absolute;inset:2px;z-index:-1;background:radial-gradient(circle at 50% 30%,rgba(42,212,107,.3),#0b100d 70%);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.passo-ic .ic{width:28px;height:28px}
.passo-ic b{position:absolute;right:6px;bottom:8px;display:grid;place-items:center;width:20px;height:20px;background:var(--accent);color:#06140b;font:700 .8rem var(--display)}
.io.in .passo-ic{animation:pop .7s var(--ease) calc(var(--d,0s) + .1s) backwards}
.trilha h3{margin:4px 0 12px;text-transform:uppercase;letter-spacing:.03em}
.trilha p{margin:12px 0 0;color:var(--muted);max-width:58ch}
.pede{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:12px 0 0;padding:0}
.pede li{padding:5px 12px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-2);font:400 .82rem var(--mono);letter-spacing:.08em;text-transform:uppercase}
.dica{display:flex;align-items:flex-start;gap:10px;max-width:60ch;margin:12px 0 0;padding:12px 14px;border-left:3px solid var(--ouro);background:rgba(232,193,90,.08)}
.dica .ic{width:20px;height:20px;margin-top:2px;color:var(--ouro)}
.reqs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.req{padding:22px 20px 24px;display:grid;gap:10px;align-content:start}
.req .tile{margin-bottom:4px}
.req:hover .tile{transform:translateY(-3px) rotate(-6deg)}
.req h3{margin:0;text-transform:uppercase;letter-spacing:.03em}
.req p{margin:0;color:var(--muted);font-size:.98rem}
@media (max-width:820px){.reqs{grid-template-columns:1fr}}

/* dog tag (tropa) */
.tags{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:34px 26px;list-style:none;margin:0;padding:8px 0 0}
.dogtag{position:relative;display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:150px;padding:16px 22px 16px 58px;border-radius:38px;background:linear-gradient(150deg,#e1e3db 0%,#aeb2a7 36%,#80857a 68%,#c3c6bd 100%);color:#23261f;box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -3px 8px rgba(0,0,0,.35),0 22px 40px rgba(0,0,0,.55);transform:rotate(-3deg);transition:transform .6s var(--ease)}
.tags li:nth-child(even) .dogtag{transform:rotate(2.5deg)}
.dogtag:hover{transform:rotate(0) translateY(-4px)}
.dogtag::before{content:'';position:absolute;left:20px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;background:var(--bg);box-shadow:inset 0 2px 4px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.6)}
.dogtag::after{content:'';position:absolute;inset:7px;border:1px solid rgba(0,0,0,.14);border-radius:31px;pointer-events:none}
.dogtag span{display:block;overflow-wrap:anywhere;text-shadow:0 1px 0 rgba(255,255,255,.55),0 -1px 0 rgba(0,0,0,.2)}
.dogtag .l1{font:700 1.3rem/1.1 var(--display);letter-spacing:.03em}
.dogtag .l2{font:700 .8rem/1.3 var(--display);letter-spacing:.06em}
.dogtag .l3{margin-top:6px;font:600 .66rem/1 var(--display);letter-spacing:.14em;opacity:.65}
.dogtag:has(.ins){padding-right:74px}
.dogtag .ins{position:absolute;top:50%;right:28px;width:36px;height:36px;margin-top:-18px;color:#373c33;opacity:.72;filter:drop-shadow(0 1px 0 rgba(255,255,255,.5))}
.dogtag:hover{animation:balanca .9s var(--ease)}
@keyframes balanca{25%{transform:rotate(4deg)}55%{transform:rotate(-3deg)}80%{transform:rotate(1.5deg)}100%{transform:rotate(0) translateY(-4px)}}
.dogtag.eu{box-shadow:0 0 0 3px var(--accent),0 0 26px rgba(42,212,107,.45),inset 0 2px 0 rgba(255,255,255,.6),inset 0 -3px 8px rgba(0,0,0,.35),0 22px 40px rgba(0,0,0,.55)}
.dogtag.eu .l3{opacity:1;color:var(--brand)}

/* entrada da área do time (/elenco e /manual): Discord em destaque, senha do time recolhida */
.gate{max-width:480px;padding:clamp(24px,4vw,36px);display:grid;gap:18px}
.gate h2{margin:0}
.gate p{margin:0;color:var(--muted)}
.gate-discord{display:grid;gap:18px}
.gate details{padding-top:14px;border-top:1px solid var(--line)}
.gate summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font:600 .98rem var(--display);color:var(--muted)}
.gate details[open] summary{color:var(--fg);margin-bottom:12px}
.gate-erro{padding:12px 14px;border-left:3px solid var(--signal);background:rgba(228,87,46,.1);color:var(--fg)}
.field{display:grid;gap:8px}
.field label{font:600 .98rem var(--display)}
.field input{width:100%;min-height:52px;padding:12px 14px;background:var(--surface);color:var(--fg);border:1px solid var(--line-2);border-radius:2px;font:500 1rem var(--body)}
.field input:focus{outline:2px solid var(--accent-hi);outline-offset:1px;border-color:var(--accent-line);box-shadow:0 0 0 4px rgba(42,212,107,.12)}
.msg{min-height:1.4em;margin:0;color:var(--signal);font-size:.95rem}
.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-bottom:clamp(24px,4vw,40px)}
.bar p{margin:0;color:var(--muted)}
.empty{padding:28px 24px;color:var(--muted)}

/* /entrar: um lugar só para o time (membro pelo Discord, staff pelo painel) */
.portas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:980px}
.porta{display:grid;gap:16px;align-content:start;padding:clamp(24px,4vw,36px)}
.porta.membro{border-color:var(--accent-line)}
.porta:hover .tile{transform:translateY(-3px) rotate(-6deg)}
.porta h2{margin:0;font-size:clamp(1.6rem,3vw,2.1rem);text-transform:uppercase;letter-spacing:.02em}
.porta-corpo{display:grid;gap:16px}
.porta-corpo>.btn{justify-self:start}
.porta.dentro .fatos{display:none}
.porta p{margin:0;color:var(--muted);max-width:44ch}
.porta .ola{color:var(--fg);font:600 1.05rem var(--display)}
.atalhos{display:grid;gap:10px}
.atalho{--c:12px;--b:var(--line-2);--fill:var(--surface);display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 14px;align-items:center;padding:12px 14px;color:inherit;text-decoration:none;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,0 100%);transition:box-shadow .3s var(--ease),transform .3s var(--ease),background .3s var(--ease)}
.atalho:hover{--b:var(--accent-line);--fill:var(--surface-2);box-shadow:inset 3px 0 0 var(--accent-hi),inset 0 0 0 1px var(--b);transform:translateX(4px)}
.atalho .tile{grid-row:1/span 2}
.atalho b{font:700 1.05rem var(--display);letter-spacing:.03em;text-transform:uppercase}
.atalho small{color:var(--muted);font-size:.9rem}

/* hierarquia da tropa: escada das patentes (pirâmide), "sua posição" e grupos com as dog tags */
.escada{display:grid;justify-items:center;gap:6px;list-style:none;margin:0 0 clamp(32px,5vw,56px);padding:0}
.degrau{--c:10px;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:8px 16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-2);font:600 .95rem var(--display);letter-spacing:.04em;text-transform:uppercase;clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% 50%,calc(100% - var(--c)) 100%,var(--c) 100%,0 50%)}
.degrau:hover{box-shadow:inset 0 0 0 1px var(--accent-line);transform:scale(1.02)}
.degrau strong{display:flex;align-items:center;gap:10px}
.degrau .ins{width:26px;height:26px}
.degrau span{min-width:2.2em;padding:2px 8px;background:var(--accent-soft);color:var(--accent-hi);text-align:center;font:400 .85rem var(--mono);font-variant-numeric:tabular-nums}
.degrau.g-comando{width:min(100%,380px);box-shadow:inset 0 0 0 1px rgba(232,193,90,.55)}
.degrau.g-oficiais{width:min(100%,520px)}
.degrau.g-graduados{width:min(100%,660px)}
.degrau.g-pracas{width:min(100%,800px)}
.voce{display:grid;gap:12px;max-width:800px;margin:0 auto clamp(40px,6vw,64px);padding:clamp(22px,4vw,32px)}
.voce h2{margin:0;font-size:1.4rem;text-transform:uppercase;letter-spacing:.04em}
.voce p{margin:0;color:var(--muted)}
.voce .v-eu{display:flex;align-items:center;gap:12px;color:var(--fg);font:700 1.25rem var(--display)}
.voce .v-eu .ins{width:44px;height:44px}
.voce .v-rep{display:flex;align-items:center;gap:10px}
.voce .v-rep .ic{width:22px;height:22px;color:var(--accent-hi)}
.voce .v-op{padding-top:12px;border-top:1px solid var(--line);font-size:.95rem}
.cadeia{display:flex;flex-wrap:wrap;align-items:center;gap:8px 4px;list-style:none;margin:0;padding:0}
.cadeia li{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;box-shadow:inset 0 0 0 1px var(--line-2);font:600 .9rem var(--display)}
.cadeia .ins{width:18px;height:18px}
.cadeia li+li::before{content:'›';margin:0 10px 0 -2px;color:var(--faint)}
.cadeia li+li{box-shadow:none;padding-left:0}
.cadeia .c-eu{box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent-hi)}
.hgrupo{padding-top:clamp(28px,4vw,40px);margin-top:clamp(28px,4vw,40px);border-top:1px solid var(--line)}
.hg-tit{display:flex;align-items:center;gap:12px;margin:0 0 6px;font-size:clamp(1.5rem,3vw,2rem);text-transform:uppercase;letter-spacing:.02em}
.hg-tit .ins{width:38px;height:38px}
.hg-txt{max-width:640px;margin:0 0 28px;color:var(--muted)}
/* "rumo à próxima patente" (cada um vê só o próprio, dentro de "Sua posição") */
.rumo{display:grid;gap:12px;padding-top:14px;border-top:1px solid var(--line);text-align:left}
.rumo h3{display:flex;align-items:center;gap:10px;margin:0;font:700 1.2rem var(--display);text-transform:uppercase;letter-spacing:.03em}
.rumo h3 .ins{width:30px;height:30px}
.voce .r-st{color:var(--fg);font:600 1rem var(--display)}
.voce .r-st.apto,.voce .r-st.indicacao{color:var(--accent-hi)}
.voce .r-nota{color:var(--faint);font-size:.85rem}
.rumo-top{display:flex;align-items:center;gap:16px}
.rumo-top>div{display:grid;gap:4px}
.check{display:grid;gap:14px;list-style:none;margin:0;padding:0}
.check li{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:6px 12px}
.check .ri{--c:8px;display:grid;place-items:center;width:38px;height:38px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--muted);clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.check .ri .ic{width:20px;height:20px}
.check .ok .ri{background:var(--accent);box-shadow:none;color:#06140b}
.check .pend .ri{box-shadow:inset 0 0 0 1px var(--ouro);color:var(--ouro)}
.check .nm{font:600 .95rem var(--display);color:var(--fg)}
.check .vl{color:var(--muted);font:400 .88rem var(--mono);text-align:right;font-variant-numeric:tabular-nums}
.check .ok .vl{color:var(--accent-hi)}
.check .barra{grid-column:2/4;height:6px}

/* ===== rodapé ===== */
.foot{position:relative;border-top:1px solid var(--line);padding-block:44px calc(40px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgba(10,13,11,.82),rgba(10,13,11,.96))}
.foot::before{content:'';position:absolute;left:0;top:-1px;width:min(260px,40%);height:1px;background:linear-gradient(90deg,var(--accent-hi),transparent);box-shadow:var(--brilho)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:32px;align-items:start}
.foot-brand{display:flex;align-items:center;gap:14px}
.foot-brand img{width:64px;height:auto}
.foot-brand strong{display:block;font:700 1.2rem var(--display);letter-spacing:.06em;text-transform:uppercase}
.foot-brand span{font:400 .72rem var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--accent-hi)}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 8px;justify-content:flex-end}
.foot nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--muted);text-decoration:none;font:700 .86rem var(--display);letter-spacing:.06em;text-transform:uppercase}
.foot nav a:hover{color:var(--fg)}
.sign{margin:28px 0 0;padding-top:20px;border-top:1px solid var(--line);color:var(--faint);font-size:.9rem}
.sign a{display:inline-block;padding:13px 6px;margin:-13px -6px;color:var(--muted);text-underline-offset:3px}
@media (max-width:700px){.foot-grid{grid-template-columns:1fr}.foot nav{justify-content:flex-start;margin-left:-12px}}

/* ===== QG do membro (/qg): ficha, missão, combate, medalhas, ranking e manual ===== */
.qg-sec{padding-bottom:clamp(72px,10vw,128px)}
.qg-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.qg-card{display:grid;gap:18px;align-content:start;padding:clamp(20px,3vw,30px)}
.qg-card>.hud-tag,.qg-card>.btn{justify-self:start}
.qg-ficha{grid-column:span 5}
.qg-missao{grid-column:span 7}
.qg-combate,.qg-medalhas,.qg-sala,.qg-cheio{grid-column:1/-1}
.qg-ranking{grid-column:span 7}
.qg-manual{grid-column:span 5}
.hud-conta{padding:3px 8px;background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line);color:var(--fg);letter-spacing:.08em}
.ficha-tag{min-height:168px;margin:8px 10px 4px;transform:rotate(-2deg)}
.ficha-tag .l1{font-size:1.65rem}
.ficha-tag .l2{font-size:.9rem}
.ficha-dados{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;margin:0}
.ficha-dados div{display:grid;gap:4px;padding-top:10px;border-top:1px solid var(--line)}
.ficha-dados dt{font:400 .7rem var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.ficha-dados dd{display:flex;align-items:center;gap:8px;margin:0;font:700 1rem/1.3 var(--display)}
.ficha-dados .ins{width:24px;height:24px}
.perto{display:grid;gap:10px;padding-top:14px;border-top:1px solid var(--line)}
.perto-tit{margin:0;font:400 .7rem var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--accent-hi)}
.perto-item{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:6px 12px}
.perto-item .m-hex{width:40px;height:40px;margin:0;opacity:1}
.perto-item .m-hex .ic{width:18px;height:18px}
.perto-item>div{display:grid;gap:6px}
.perto-item b{font:700 .85rem var(--display);letter-spacing:.04em;text-transform:uppercase}
.perto-item .barra{height:5px}
.perto-item .barra i{background:var(--cor);box-shadow:none}
.perto-item em{font:400 .74rem var(--mono);font-style:normal;color:var(--muted);white-space:nowrap}
.qg-missao .rumo{padding-top:0;border-top:0}
.qg-topo{margin:0;font:700 1.2rem var(--display)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.stat{--c:14px;--b:var(--line-2);--fill:linear-gradient(160deg,rgba(26,34,29,.92),rgba(12,16,14,.94));display:grid;gap:6px;align-content:start;padding:18px 18px 20px;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,0 100%)}
.stat .ic{width:26px;height:26px;color:var(--accent-hi)}
.stat b{font:700 clamp(2rem,4vw,2.8rem)/1 var(--display);font-variant-numeric:tabular-nums;text-shadow:0 0 24px rgba(42,212,107,.25)}
.stat b small{margin-left:4px;font-size:.45em;color:var(--accent-hi)}
.st-nome{font:700 .9rem var(--display);letter-spacing:.06em;text-transform:uppercase}
.stat em{font:400 .76rem/1.4 var(--mono);font-style:normal;letter-spacing:.04em;color:var(--muted)}
/* medalhas: hexágono com a cor do nível; as que faltam ficam apagadas, com a barra do quanto falta */
.medalhas{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;list-style:none;margin:0;padding:0}
.medalha{--cor:var(--faint);position:relative;display:grid;justify-items:center;align-content:start;gap:6px;padding:18px 12px 16px;text-align:center;background:rgba(15,20,17,.72);box-shadow:inset 0 0 0 1px var(--line)}
.m-bronze{--cor:#cd8a4e}.m-prata{--cor:#cfd7d3}.m-ouro{--cor:var(--ouro)}.m-elite{--cor:var(--accent-hi)}
.m-hex{position:relative;z-index:0;display:grid;place-items:center;width:64px;height:64px;margin-bottom:4px;background:var(--cor);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);opacity:.35;transition:transform .45s var(--ease)}
.m-hex::before{content:'';position:absolute;inset:2px;z-index:-1;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--cor) 38%,transparent),#0b100d 72%);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.m-hex .ic{width:28px;height:28px;color:var(--cor)}
.medalha b{font:700 .9rem/1.2 var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.medalha small{color:var(--faint);font-size:.8rem;line-height:1.35}
.medalha em{font:400 .72rem var(--mono);font-style:normal;color:var(--faint)}
.medalha .barra{width:82%;height:5px;margin-top:4px}
.medalha .barra i{background:var(--cor);box-shadow:none}
.medalha.ganhou{background:radial-gradient(circle at 50% 0,color-mix(in srgb,var(--cor) 18%,transparent),rgba(15,20,17,.8) 70%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cor) 55%,transparent)}
.medalha.ganhou .m-hex{opacity:1}
.medalha.ganhou b{color:var(--fg)}
.medalha.ganhou small{color:var(--muted)}
.medalha.ganhou:hover .m-hex{transform:translateY(-4px) rotate(-4deg)}
.medalha.nova::after{content:'Nova';position:absolute;top:8px;right:8px;padding:3px 7px;background:var(--accent);color:#06140b;font:700 .62rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;animation:piscar 1.4s ease-in-out 3}
/* ranking de horas de call (pódio em ouro, prata e bronze) */
.rank-abas{display:flex;gap:6px}
.rank-aba{--c:8px;--b:var(--line);--fill:rgba(21,27,23,.82);min-height:40px;padding:0 16px;border:0;color:var(--muted);font:700 .82rem var(--display);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,0 100%)}
.rank-aba[aria-selected="true"]{--b:var(--accent-line);--fill:linear-gradient(95deg,rgba(11,173,75,.28),rgba(21,27,23,.9));color:var(--fg)}
.rank-aba:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--accent-hi)}
.rank{display:grid;gap:6px;list-style:none;margin:0;padding:0}
.rank li{display:grid;grid-template-columns:30px 24px minmax(0,1fr) minmax(60px,.8fr) auto;align-items:center;gap:10px;padding:9px 12px;background:rgba(15,20,17,.72);box-shadow:inset 0 0 0 1px var(--line)}
.rank .r-pos{font:400 .9rem var(--mono);color:var(--faint)}
.rank .p1 .r-pos{color:var(--ouro)}.rank .p2 .r-pos{color:#cfd7d3}.rank .p3 .r-pos{color:#cd8a4e}
.rank .ins{width:22px;height:22px}
.r-nome{display:grid;font:700 .95rem/1.2 var(--display);overflow-wrap:anywhere}
.r-nome small{font:400 .7rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.rank .barra{height:6px}
.r-h{font:400 .9rem var(--mono);text-align:right;white-space:nowrap}
.rank li.eu{background:linear-gradient(90deg,rgba(11,173,75,.18),rgba(15,20,17,.8));box-shadow:inset 3px 0 0 var(--accent-hi),inset 0 0 0 1px var(--accent-line)}
.rank li.vazio{display:block;color:var(--muted)}
.rank-eu{margin:0;color:var(--muted)}
/* manual e Sala de Comando */
.manual-topo{display:flex;align-items:center;gap:18px}
.manual-topo>div{display:grid;gap:4px}
.manual-topo b{font:700 1.3rem var(--display)}
.manual-topo small{font:400 .8rem var(--mono);letter-spacing:.06em;color:var(--muted)}
.sala-corpo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.sala-corpo p{margin:0;max-width:60ch;color:var(--muted)}
@media (max-width:980px){
  .qg-ficha,.qg-missao,.qg-ranking,.qg-manual{grid-column:1/-1}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .qg-grid{grid-template-columns:1fr}
  .qg-card{justify-items:center;text-align:center}
  .qg-card>.hud-tag,.qg-card>.btn{justify-self:center}
  .ficha-dados,.stats,.rank,.rank-eu,.qg-missao .rumo{width:100%}
  .ficha-dados{text-align:left}
  .stat{justify-items:center;text-align:center}
  .rank li{grid-template-columns:28px 22px minmax(0,1fr) auto;text-align:left}
  .rank .barra{display:none}
  .manual-topo{flex-direction:column}
  .sala-corpo{justify-content:center}
  .medalhas{width:100%;grid-template-columns:repeat(2,minmax(0,1fr))}
  .medalha{padding:14px 8px 12px}
  .perto{width:100%;text-align:left}
}

/* ===== página não encontrada (404): "desaparecido em combate" ===== */
.mia{min-height:100dvh;display:grid;align-items:center;padding-block:120px 72px}
.mia .wrap{display:grid;gap:22px;justify-items:start}
.mia h1{display:grid;gap:16px}
.mia-num{display:block;font:700 clamp(5rem,22vw,13rem)/.85 var(--display);color:transparent;-webkit-text-stroke:2px var(--accent-hi);text-shadow:0 0 50px rgba(42,212,107,.25)}

/* ===== borda que acompanha o canto cortado: a sombra interna faz os lados retos e degradês desenham as diagonais.
   Cada peça define --b (cor da borda) e --fill (fundo). ===== */
.btn,.nav-entrar,.menu-btn,.status-chip,.tile,.classe,.alistar{background:
  linear-gradient(to top right,transparent calc(50% - 1px),var(--b) calc(50% - 1px) 50%,transparent 50%) 100% 0/var(--c) var(--c) no-repeat,
  linear-gradient(to top right,transparent 50%,var(--b) 50% calc(50% + 1px),transparent calc(50% + 1px)) 0 100%/var(--c) var(--c) no-repeat,
  var(--fill);box-shadow:inset 0 0 0 1px var(--b)}
.subir li,.classe-tab,.estilos-chips li,.passos li,.fatos li,.atalho,.stat,.rank-aba{background:
  linear-gradient(to top right,transparent calc(50% - 1px),var(--b) calc(50% - 1px) 50%,transparent 50%) 100% 0/var(--c) var(--c) no-repeat,
  var(--fill);box-shadow:inset 0 0 0 1px var(--b)}

/* ===== entrada ao rolar (uma vez): aparece e sobe. [data-cascata] faz os filhos entrarem um depois do outro (--d).
   A entrada usa "translate" e o passar do mouse usa "transform", então um não atrapalha o outro. ===== */
.io{opacity:0;translate:0 22px;transition:opacity .8s var(--ease) var(--d,0s),translate .8s var(--ease) var(--d,0s),transform .45s var(--ease),background-color .4s var(--ease),box-shadow .4s var(--ease)}
.io.in{opacity:1;translate:none}
.io.in .tile{animation:pop .7s var(--ease) calc(var(--d,0s) + .12s) backwards}
@keyframes pop{from{opacity:0;transform:scale(.55) rotate(-12deg)}70%{transform:scale(1.08)}}

/* anel de progresso (GT.anel): enche até --p (0 a 1) quando aparece */
.anel{position:relative;display:inline-grid;place-items:center;flex:none;width:64px;height:64px}
.anel svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.anel circle{fill:none;stroke-width:4;stroke-linecap:butt}
.anel .a-fundo{stroke:var(--surface-2);stroke-dasharray:3 2.65}
.anel .a-valor{stroke:var(--accent-hi);stroke-dasharray:113.1px;stroke-dashoffset:113.1px;filter:drop-shadow(0 0 4px rgba(42,212,107,.6));transition:stroke-dashoffset 1.3s var(--ease) .15s}
.anel.in .a-valor{stroke-dashoffset:calc(113.1px * (1 - var(--p,0)))}
.anel b{position:relative;font:700 .95rem/1 var(--display);font-variant-numeric:tabular-nums}
.anel.p{width:42px;height:42px}
.anel.p b{font-size:.7rem}
.anel.g{width:104px;height:104px}
.anel.g b{font-size:1.4rem}

/* barra de progresso segmentada (como munição): enche até --p (0 a 1) quando aparece */
.barra{position:relative;display:block;height:8px;background:var(--surface-2);overflow:hidden}
.barra i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--accent-hi));box-shadow:var(--brilho);transform-origin:left;transform:scaleX(0);transition:transform 1.1s var(--ease) .1s}
.barra::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 9px,var(--bg) 9px 11px)}
.barra.in i{transform:scaleX(var(--p,0))}

/* confete rápido (GT.festa): acertou tudo, aula estudada */
.festa{position:fixed;z-index:70;width:0;height:0;pointer-events:none}
.festa i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;animation:festa 1.1s var(--ease) forwards}
@keyframes festa{to{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}

/* ===== menos movimento (prefers-reduced-motion, ex.: "Efeitos de animação" desligado no Windows):
   some só o que se mexe pela tela (deslizar, girar, correr, flutuar). Luz, brilho, cor e barras continuam. ===== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .io{translate:none}
  .hero-copy>*{animation-name:surge}
  .hero-emblema .escudo{animation:surge .8s var(--ease) both}
  .fx-topo,.fx-varredura,.radar,.mira-giro,.ticker-trilho,.rolar i,.glitch::before,.glitch::after,.dogtag:hover,.io.in .tile,.io.in .passo-ic{animation:none}
  .btn::after{display:none}
  .sheet a{transform:none}
  .alvo::after{transition:opacity .25s var(--ease)}
  .dogtag,.dogtag:hover,.tags li:nth-child(even) .dogtag,.degrau:hover,.atalho:hover,.patente:hover .pat-ins,.obj:hover .tile,.req:hover .tile,.porta:hover .tile,.btn:hover .btn-i,.medalha.ganhou:hover .m-hex{transform:none}
  .ticker-trilho{flex-wrap:wrap;width:auto;justify-content:center}
  .ticker li[aria-hidden="true"]{display:none}
}

/* ===== celular e tablet (até 820px): tudo centralizado. No PC nada muda. ===== */
@media (max-width:980px){
  .escalada,.grupos-escala{grid-template-columns:repeat(4,minmax(0,1fr))}
  .escalada{row-gap:22px}
  .escalada::before{display:none}
  .grupos-escala{display:none}
  .subir{grid-template-columns:repeat(2,minmax(0,1fr))}
  .classes{grid-template-columns:1fr}
  .classe{min-height:260px}
}
@media (max-width:820px){
  .hero{padding-block:96px 76px;align-items:start}
  .hero-grid{grid-template-columns:1fr;gap:8px}
  .hero-emblema{order:-1;width:min(64vw,270px)}
  .hero-copy{justify-items:center;text-align:center}
  .hero h1{justify-items:center}
  .h1-sub{justify-content:center}
  .h1-sub::before{display:none}
  .hud-stats{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);width:100%}
  .hud-stats>div{padding:0 8px;align-items:center;text-align:center}
  .hud-stats>div:first-child{padding-left:8px}
  .hud-stats dt{letter-spacing:.12em}
  .rolar{display:none}
  .obj{position:relative;grid-template-columns:auto minmax(0,1fr)}
  .obj-n{position:absolute;top:14px;right:24px;padding:0}
  .fx-leitura,.fx-canto.b,.fx-canto.d{display:none}
  .fx-base{background-image:radial-gradient(ellipse 80% 45% at 50% 22%,rgba(11,173,75,.26),transparent 62%),linear-gradient(180deg,rgba(10,13,11,.2),rgba(10,13,11,.72) 78%,var(--bg)),url('/img/tatico-800.webp')}
  .fx-topo{animation:none;opacity:.14}
  .hero-copy .lead,.lead{margin-inline:auto}
  .actions{justify-content:center;width:100%}
  .actions .btn{width:min(100%,320px);justify-content:center}
  .sec-head{justify-items:center;text-align:center;margin-inline:auto}
  .brief-grid{grid-template-columns:1fr}
  .brief-main{position:static;justify-items:center;text-align:center}
  .obj{text-align:left}
  /* cadeia em trilha vertical: hexágono à esquerda e uma linha ligando as patentes */
  .escalada{grid-template-columns:1fr;gap:0;max-width:420px;margin-inline:auto}
  .escalada::before{display:block;left:31px;right:auto;top:32px;bottom:32px;width:2px;height:auto;background:linear-gradient(var(--accent-line),var(--accent-hi) 60%,var(--ouro));transform-origin:top;transform:scaleY(0)}
  .escalada.in::before{transform:none}
  .patente{grid-template-columns:64px minmax(0,1fr);align-items:center;justify-items:start;gap:2px 16px;padding:0 0 14px;text-align:left}
  .pat-ins{grid-row:1/span 2;width:64px;height:64px}
  .pat-ins .ins{width:32px;height:32px}
  .patente b{align-self:end}
  .patente small{align-self:start;max-width:none}
  .subir{grid-template-columns:1fr}
  .subir li{justify-content:center}
  .subir-nota{text-align:center;margin-inline:auto}
  .classes-lista{grid-template-columns:repeat(2,minmax(0,1fr))}
  .classe{justify-items:center;text-align:center}
  .classes-nota{text-align:center}
  .estilos-faixa{grid-template-columns:1fr;justify-items:center;text-align:center}
  .estilos-chips{justify-content:center}
  .estilos-chips li{text-align:left}
  .alistar{justify-items:center;text-align:center}
  .alistar h2{margin-inline:auto}
  .alistar::after{right:50%;translate:50% -50%;width:80%}
  .passos{grid-template-columns:1fr}
  .passos li{text-align:left}
  .fatos,.pede{justify-content:center}
  .portas{grid-template-columns:1fr;margin-inline:auto}
  .porta{justify-items:center;text-align:center}
  .porta-corpo{justify-items:center}
  .porta-corpo>.btn{justify-self:center}
  .porta p{margin-inline:auto}
  .atalhos{width:100%}
  .atalho{text-align:left}
  .note,.empty{text-align:center;margin-inline:auto}
  .trilha::before{display:none}
  .trilha>li{grid-template-columns:1fr;justify-items:center;text-align:center;gap:12px}
  .trilha p{margin-inline:auto}
  .dica{text-align:left}
  #t-passos,.page-head{text-align:center}
  .page-head .hud-tag{justify-content:center}
  .req{text-align:center;justify-items:center}
  .gate{margin-inline:auto;text-align:center}
  .gate .actions{justify-content:center}
  .bar{flex-direction:column;justify-content:center;text-align:center}
  .tags{justify-items:center}
  .tags li{width:min(100%,320px)}
  .dogtag{width:100%}
  .voce,.hgrupo{text-align:center}
  .hg-txt{margin-inline:auto}
  .cadeia{justify-content:center}
  .rumo h3,.voce .r-st,.voce .r-nota{text-align:center}
  .rumo-top{flex-direction:column}
  .voce .v-eu,.voce .v-rep,.hg-tit,.rumo h3{justify-content:center}
  .foot-grid{grid-template-columns:1fr;justify-items:center;text-align:center}
  .foot-brand{flex-direction:column;text-align:center;gap:8px}
  .foot nav{justify-content:center;margin-left:0}
  .sign{text-align:center}
  .sheet a{justify-content:space-between}
  .mia{text-align:center}

  /* leveza: sem desfoque em tela que rola, sem grão, mistura de camadas, sombra pesada nem fundo grande */
  body::after,.setor,.sec.mapa::after{display:none}
  .nav,.nav.rolou{-webkit-backdrop-filter:none;backdrop-filter:none;background:#0b0e0c}
  .hero-emblema .escudo{filter:drop-shadow(0 0 22px rgba(11,173,75,.25))}
  body::before{background-image:linear-gradient(180deg,rgba(10,13,11,.5) 0%,rgba(10,13,11,.86) 38%,rgba(10,13,11,.97) 100%),url('/img/tatico-800.webp')}
  .alistar{--fill:linear-gradient(100deg,rgba(10,13,11,.96) 30%,rgba(10,13,11,.7)),url('/img/camo-700.webp') center/cover}
}
@media (max-width:420px){
  .classes-lista{grid-template-columns:1fr}
  .hud-stats>div{padding:0 4px}
  .hud-stats dt{font-size:.62rem;letter-spacing:.08em}
  .h1-marca .contorno{-webkit-text-stroke-width:1.5px}
}