/* Site do [GAD]: link da bio do @gadegrade.mkt em clima de fase 16-bit.
   Fontes de fonts/ (subconjunto em ../fontes), cenário desenhado por ferramentas/gerar_assets.py. */

@font-face { font-family: "Unbounded"; src: url("../fontes/unbounded.woff2") format("woff2"); font-weight: 500 800; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fontes/satoshi.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url("../fontes/silkscreen.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url("../fontes/silkscreen-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --tinta-0: #05080F;
  --tinta-1: #0A0F1F;
  --tinta-2: #0E1530;
  --aco-1: #141E42;
  --aco-2: #22305E;
  --aco-3: #3A4F8E;
  --texto: #EEF2FF;
  --texto-2: #B8C3E6;
  --texto-3: #8D9AC4;
  --lima: #8BE762;
  --lima-claro: #D7F5B8;
  --lima-escura: #4F8F35;
  --verde-noite: #132A0D;
  --chefao: #FF5A6E;
  --f-titulo: "Unbounded", "Satoshi", system-ui, sans-serif;
  --f-texto: "Satoshi", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-pixel: "Silkscreen", "Satoshi", system-ui, sans-serif;
  --hud: 60px;
  --secao: clamp(72px, 9vw, 128px);
  --chanfro: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  --chanfro-dentro: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hud) + 12px); }
body {
  margin: 0;
  background: var(--tinta-1);
  color: var(--texto);
  font: 400 1rem/1.6 var(--f-texto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (min-width: 640px) { body { font-size: 1.0625rem; } }
img { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
:focus-visible { outline: 3px solid var(--lima); outline-offset: 3px; }
::selection { background: var(--lima); color: var(--tinta-1); }

.caixa { width: min(100% - 32px, 1160px); margin-inline: auto; }
.lima { color: var(--lima); }
.ic { width: 1.25em; height: 1.25em; flex: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pular {
  position: absolute; left: 16px; top: -60px; z-index: 50; padding: 10px 14px;
  background: var(--lima); color: var(--tinta-1); font: 700 1rem/1 var(--f-pixel); text-decoration: none;
}
.pular:focus { top: 12px; }

/* ---------- botões com canto de pixel ---------- */
.botao {
  --c: var(--lima);
  --t: var(--tinta-1);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; margin: 4px; padding: 0 20px;
  font: 700 1rem/1 var(--f-pixel); text-transform: uppercase; text-decoration: none; letter-spacing: .02em;
  color: var(--t); background: var(--c);
  border: 0; cursor: pointer;
  box-shadow:
    0 -4px 0 0 var(--c), 0 4px 0 0 var(--c), -4px 0 0 0 var(--c), 4px 0 0 0 var(--c),
    inset 0 -4px 0 0 rgb(0 0 0 / .22), inset 0 3px 0 0 rgb(255 255 255 / .28);
  transition: filter .15s, transform .1s steps(2);
}
.botao:hover { filter: brightness(1.1); }
.botao:active { transform: translateY(2px); }
.botao:focus-visible { outline: 3px solid var(--texto); outline-offset: 8px; }
.botao .ic { width: 20px; height: 20px; }
.botao--aco { --c: var(--aco-2); --t: var(--texto); }
.botao--escuro { --c: var(--tinta-1); --t: var(--texto); }
.botao__tecla {
  padding: 3px 6px; border: 2px solid currentColor; font-size: 1rem;
}
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin: -4px; }

/* ---------- HUD (topo) ---------- */
.hud { position: sticky; top: 0; z-index: 30; background: var(--tinta-1); border-bottom: 2px solid var(--aco-1); }
.hud__linha { height: var(--hud); display: flex; align-items: center; gap: 24px; }
.hud__logo { display: block; flex: none; }
.hud__logo img { height: 36px; width: auto; }
.hud__nav { display: none; gap: 28px; margin-left: auto; }
.hud__nav a {
  padding: 10px 0; font: 400 1rem/1 var(--f-pixel); text-transform: uppercase; text-decoration: none; color: var(--texto-2);
}
.hud__nav a:hover { color: var(--lima); }
.botao--hud { margin-left: 4px; min-height: 36px; padding: 0 12px; }
.hud__som {
  display: inline-flex; align-items: center; gap: 8px; margin-left: auto; min-height: 40px; padding: 0 10px;
  font: 400 1rem/1 var(--f-pixel); text-transform: uppercase; color: var(--texto-2);
  background: var(--tinta-0); border: 2px solid var(--aco-2); cursor: pointer;
}
.hud__som:hover { color: var(--texto); border-color: var(--aco-3); }
.hud__som[aria-expanded="true"] { color: var(--lima); border-color: var(--lima); }
.hud__som .ic { width: 18px; height: 18px; }
@media (max-width: 479px) {
  .hud__som span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 860px) {
  .hud__nav { display: flex; }
  .hud__nav + .hud__som { margin-left: 12px; }
}

/* ---------- trilha: player da playlist HYPERFOCUS (só carrega quando a pessoa abre) ---------- */
.trilha {
  position: fixed; left: 16px; bottom: 16px; z-index: 40; width: min(392px, calc(100vw - 32px));
  background: var(--tinta-0); border: 4px solid var(--aco-2); box-shadow: 0 14px 34px rgb(3 5 12 / .55);
}
.trilha[hidden] { display: none; }
.trilha__barra {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 6px 6px 12px;
  font: 400 1rem/1 var(--f-pixel); color: var(--texto); background: var(--aco-2);
}
.trilha__nome { display: inline-flex; align-items: center; gap: 8px; }
.trilha__nome .ic { width: 18px; height: 18px; color: var(--lima); }
.trilha__botoes { display: flex; gap: 6px; }
.trilha__botoes button {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  color: var(--texto); background: var(--aco-1); border: 0; cursor: pointer;
}
.trilha__botoes button:hover { color: var(--lima); }
.trilha__botoes .ic { width: 16px; height: 16px; }
.trilha__tela { aspect-ratio: 16 / 9; min-height: 200px; background: #000; }
.trilha__tela iframe { display: block; width: 100%; height: 100%; border: 0; }
.trilha__nota { padding: 10px 12px 12px; font-size: .875rem; line-height: 1.45; color: var(--texto-2); }
.trilha__nota a { color: var(--lima); text-underline-offset: 3px; }
.trilha.minimizada { width: auto; }
.trilha.minimizada .trilha__barra { cursor: pointer; }
.trilha.minimizada .trilha__tela { height: 0; min-height: 0; aspect-ratio: auto; overflow: hidden; visibility: hidden; }
.trilha.minimizada .trilha__nota { display: none; }

/* ---------- barra de vida (progresso da rolagem) ---------- */
.vida { display: none; }
@supports (animation-timeline: scroll()) {
  @media (min-width: 1300px) {
    .vida {
      position: fixed; left: 22px; top: calc(var(--hud) + 36px); z-index: 25;
      display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none;
    }
    .vida__barra { position: relative; width: 18px; height: 168px; background: var(--tinta-0); border: 3px solid var(--aco-2); }
    .vida__fill {
      position: absolute; inset: 2px;
      background: repeating-linear-gradient(180deg, var(--lima) 0 4px, var(--lima-escura) 4px 6px);
      transform-origin: 50% 100%;
      animation: encher linear both; animation-timeline: scroll(root block);
    }
    .vida__icone {
      display: grid; place-items: center; width: 28px; height: 28px;
      font: 700 1rem/1 var(--f-pixel); color: var(--tinta-1); background: var(--lima);
    }
  }
}
@keyframes encher { from { transform: scaleY(.05); } to { transform: scaleY(1); } }

/* ---------- abertura: a fase ---------- */
.abertura {
  --s: 2;
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: calc(100svh - var(--hud));
  background: var(--tinta-0);
}
@media (min-width: 640px) { .abertura { --s: 3; } }
@media (min-width: 1100px) { .abertura { --s: 4; min-height: min(calc(100svh - var(--hud)), 900px); } }

.cena {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, #03050B 0%, #091027 46%, #16234B 100%);
  image-rendering: pixelated;
}
.cena > * { position: absolute; }
.cena__estrelas {
  inset: 0 0 calc(56px * var(--s)) 0;
  background: url("../img/estrelas.png") 0 0 / calc(128px * var(--s)) auto repeat;
}
.cena__lua { top: calc(14px * var(--s)); right: 9%; width: calc(22px * var(--s)); height: auto; }
.cena__camada {
  left: 0; right: 0;
  background-repeat: repeat-x; background-position: 0 0; background-size: auto 100%;
  animation-name: rolar; animation-iteration-count: infinite; animation-delay: 1.5s;
}
.cena__longe {
  --lw: 320; bottom: calc(18px * var(--s)); height: calc(64px * var(--s));
  background-image: url("../img/cidade-longe.png");
  animation-duration: 40s; animation-timing-function: steps(320);
}
.cena__perto {
  /* começa com as Três Caixas d'Água atrás do Gad (centro delas no x 234 da faixa) */
  --x0: calc(64vw + 17px * var(--s) - 234px * var(--s));
  bottom: calc(24px * var(--s)); height: calc(84px * var(--s));
  background-image: url("../img/cidade-perto.png");
  background-position-x: var(--x0);
  animation-duration: 24s; animation-timing-function: steps(480);
}
.cena__pista {
  --lw: 32; bottom: 0; height: calc(24px * var(--s));
  background-image: url("../img/pista.png");
  animation-duration: .5s; animation-timing-function: steps(32);
}
@keyframes rolar { to { background-position-x: calc(var(--lw) * var(--s) * -1px); } }
.cena__perto { animation-name: rolar-perto; }
@keyframes rolar-perto {
  from { background-position-x: var(--x0); }
  to { background-position-x: calc(var(--x0) - 480px * var(--s)); }
}

.cena__gad {
  left: 64%; bottom: calc(22px * var(--s));
  width: calc(35px * var(--s)); height: calc(35px * var(--s));
}
.gad-sprite {
  position: absolute; inset: 0;
  background: url("../img/gad-corre.png") 0 0 / auto 100% no-repeat;
  animation: surgir .9s steps(1, end) both, correr .84s steps(10) 1.5s infinite;
}
@keyframes correr { to { background-position-x: calc(35px * var(--s) * -10); } }
/* golpes com o pinxel (o site troca os quadros; ferramentas/gad_poses.py desenha):
   tiro correndo em 58x37, um quadro para cada quadro da corrida, com o corpo em x 0;
   combo de 3 golpes em 74x49 com o corpo em x 7. No combo a cena para, como no jogo. */
.gad-acao { position: absolute; bottom: 0; display: none; background-repeat: no-repeat; }
.gad-acao--tiro {
  left: 0; width: calc(58px * var(--s)); height: calc(37px * var(--s));
  background-image: url("../img/gad-tiro.png"); background-size: calc(580px * var(--s)) 100%;
}
.gad-acao--corte {
  left: calc(-7px * var(--s)); width: calc(74px * var(--s)); height: calc(49px * var(--s));
  background-image: url("../img/gad-corte.png"); background-size: calc(962px * var(--s)) 100%;
}
.cena__gad.agindo .gad-sprite { visibility: hidden; }
.cena__gad.agindo .gad-acao { display: block; }
.abertura.golpe .cena__camada { animation-play-state: paused; }
/* tinta digital: 3 tons de verde-limão (--v = 0, 1 ou 2); colunas: clarão, bolha, bolha, respingo, respingo */
.tinta {
  width: calc(8px * var(--s)); height: calc(8px * var(--s));
  background: url("../img/tinta.png") 0 0 / calc(40px * var(--s)) auto no-repeat;
  background-position-y: calc(var(--v, 0) * -8px * var(--s));
  animation: sair .06s steps(1, end), tremer .2s steps(1, end) .06s infinite;
}
@keyframes sair { from, to { background-position-x: 0; } }
@keyframes tremer {
  0% { background-position-x: calc(-8px * var(--s)); }
  50% { background-position-x: calc(-16px * var(--s)); }
}
.tinta.respinga { animation: respingar .24s steps(1, end) forwards; }
@keyframes respingar {
  0% { background-position-x: calc(-24px * var(--s)); }
  50% { background-position-x: calc(-32px * var(--s)); }
  100% { background-position-x: calc(-40px * var(--s)); }
}
@keyframes surgir {
  0%, 56% { opacity: 0; }
  60% { opacity: 1; }
  68% { opacity: 0; }
  76%, 100% { opacity: 1; }
}
.raio {
  position: absolute; left: 50%; bottom: calc(2px * var(--s)); translate: -50% 0;
  width: calc(6px * var(--s)); height: 140svh;
  background: linear-gradient(180deg, rgb(215 245 184 / 0), var(--lima-claro) 40%, var(--lima));
  transform-origin: 50% 100%;
  animation: raio .9s steps(9, end) both;
}
@keyframes raio {
  0% { transform: translateY(-100%); opacity: 1; }
  45% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(0) scaleX(1); opacity: 1; }
  100% { transform: translateY(0) scaleX(0); opacity: 0; }
}
.cena__ready {
  left: calc(64% + 17.5px * var(--s)); bottom: calc(66px * var(--s)); translate: -50% 0;
  font: 700 calc(8px * var(--s)) / 1 var(--f-pixel); text-transform: uppercase; letter-spacing: .14em;
  color: var(--lima-claro); opacity: 0;
  animation: ready 1.3s steps(1, end) .6s both;
}
@keyframes ready {
  0% { opacity: 1; } 16% { opacity: 0; } 32% { opacity: 1; } 48% { opacity: 0; } 64% { opacity: 1; } 84%, 100% { opacity: 0; }
}

.abertura.parada .cena *, .abertura.fora .cena * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .abertura:not(.animar) .cena * { animation: none !important; }
  .abertura:not(.animar) .raio, .abertura:not(.animar) .cena__ready { display: none; }
}

.abertura__texto { position: relative; padding-block: clamp(36px, 7vh, 96px) calc(84px * var(--s)); }
.abertura h1 {
  max-width: 11.5em;
  font: 700 clamp(2.25rem, 1.15rem + 4.4vw, 4.75rem) / 1.03 var(--f-titulo);
  letter-spacing: -.035em;
}
.abertura__sub { max-width: 50ch; margin: 22px 0 30px; color: var(--texto-2); font-size: 1.0625rem; }
@media (min-width: 640px) { .abertura__sub { font-size: 1.1875rem; } }
.abertura__insta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; min-height: 44px;
  color: var(--texto-2); text-decoration: none; font-size: 1rem;
}
.abertura__insta:hover span { text-decoration: underline; text-underline-offset: 4px; }
.abertura__insta .ic { width: 22px; height: 22px; }

.cena__controle {
  position: absolute; right: 12px; bottom: calc(4px * var(--s)); z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px;
  font: 400 1rem/1 var(--f-pixel); text-transform: uppercase; color: var(--texto-2);
  background: var(--tinta-0); border: 2px solid var(--aco-2); cursor: pointer;
}
.cena__controle:hover { color: var(--texto); border-color: var(--aco-3); }
.cena__icone { display: inline-flex; }
.cena__icone[hidden] { display: none; }
.cena__icone .ic { width: 18px; height: 18px; }
@media (max-width: 639px) { .cena__controle-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
/* atalho de jogo: só aparece em computador com mouse (Z tiro, X combo) */
.cena__teclas {
  position: absolute; left: 12px; bottom: calc(4px * var(--s)); z-index: 2;
  display: none; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px;
  font: 400 1rem/1 var(--f-pixel); text-transform: uppercase; color: var(--texto-2);
  background: var(--tinta-0); border: 2px solid var(--aco-2);
}
.cena__teclas kbd {
  display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 4px;
  font: 700 1rem/1 var(--f-pixel); color: var(--tinta-1); background: var(--lima);
}
.cena__teclas span + kbd { margin-left: 6px; }
@media (hover: hover) and (pointer: fine) and (min-width: 900px) { .cena__teclas { display: inline-flex; } }

/* ---------- player 1 ---------- */
.player { background: var(--tinta-2); padding-block: var(--secao); }
.player__grade { display: grid; gap: 28px; grid-template-areas: "titulo" "foto" "info"; }
.player__titulo { grid-area: titulo; }
.retrato { grid-area: foto; }
.player__info { grid-area: info; }
@media (min-width: 900px) {
  .player__grade {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr;
    grid-template-areas: "foto titulo" "foto info"; gap: 0 64px; align-items: start;
  }
}
/* título de seção: o nome claro em Unbounded e o nome de jogo entre colchetes, em pixel */
.titulo { font: 700 clamp(2rem, 1.25rem + 2.8vw, 3.4rem) / 1.04 var(--f-titulo); letter-spacing: -.035em; }
.titulo__tag {
  display: inline-block; margin-left: .15em; vertical-align: .3em;
  font: 700 clamp(1rem, .75rem + .7vw, 1.5rem) / 1 var(--f-pixel); letter-spacing: .02em; text-transform: uppercase;
  color: var(--lima); white-space: nowrap;
}

.retrato { --zp: 4; position: relative; margin: 0; width: min(100% - 40px, 300px); justify-self: center; }
@media (min-width: 900px) { .retrato { --zp: 5; width: min(100% - 40px, 380px); } }
.retrato__tela {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  background: var(--tinta-0); border: 4px solid var(--aco-2);
}
.retrato__tela img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* enfeites em pixel em volta da foto: dois adesivos do rosto do Gad (emotes 16x16) e três brilhos que cintilam */
.retrato__adesivo, .retrato__brilho { position: absolute; z-index: 2; pointer-events: none; image-rendering: pixelated; background-repeat: no-repeat; }
.retrato__adesivo {
  width: calc(18px * var(--zp)); height: calc(18px * var(--zp));
  background-image: url("../img/adesivos-gad.png"); background-size: calc(72px * var(--zp)) 100%;
  filter: drop-shadow(0 calc(1px * var(--zp)) 0 rgb(5 8 15 / .55));
}
.retrato__adesivo--sorriso {
  left: calc(-7px * var(--zp)); top: calc(14px * var(--zp)); rotate: -8deg;
  animation: piscar-adesivo 4.6s steps(1, end) infinite, boiar 2.4s steps(2, end) infinite;
}
.retrato__adesivo--nerd {
  right: calc(-7px * var(--zp)); bottom: calc(22px * var(--zp)); rotate: 7deg; background-position-x: calc(-36px * var(--zp));
  animation: falar-adesivo 3.4s steps(1, end) infinite, boiar 2.4s steps(2, end) .8s infinite;
}
@keyframes piscar-adesivo {
  0%, 90%, 100% { background-position-x: 0; }
  92%, 96% { background-position-x: calc(-18px * var(--zp)); }
  94% { background-position-x: 0; }
}
@keyframes falar-adesivo {
  0%, 64%, 100% { background-position-x: calc(-36px * var(--zp)); }
  68%, 76%, 84% { background-position-x: calc(-54px * var(--zp)); }
  72%, 80% { background-position-x: calc(-36px * var(--zp)); }
}
@keyframes boiar { 50% { translate: 0 calc(-1px * var(--zp)); } }
.retrato__brilho {
  width: calc(7px * var(--zp)); height: calc(7px * var(--zp));
  background-image: url("../img/brilho.png"); background-size: calc(28px * var(--zp)) 100%; background-position-x: 0;
  animation: cintilar 2.6s steps(1, end) infinite;
}
.retrato__brilho--1 { right: calc(-4px * var(--zp)); top: calc(-4px * var(--zp)); }
.retrato__brilho--2 { left: calc(-5px * var(--zp)); bottom: calc(34px * var(--zp)); animation-delay: .9s; }
.retrato__brilho--3 { right: calc(14px * var(--zp)); bottom: calc(-4px * var(--zp)); animation-delay: 1.7s; }
@keyframes cintilar {
  0%, 52%, 100% { background-position-x: 0; }
  56%, 80% { background-position-x: calc(-7px * var(--zp)); }
  60%, 74% { background-position-x: calc(-14px * var(--zp)); }
  64%, 70% { background-position-x: calc(-21px * var(--zp)); }
}
@media (prefers-reduced-motion: reduce) {
  .retrato__adesivo, .retrato__brilho { animation: none !important; }
  .retrato__brilho { background-position-x: calc(-21px * var(--zp)); }
}
.retrato__tela::after {
  content: ""; position: absolute; inset: 10px; pointer-events: none; --c: var(--lima);
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / 22px 4px, linear-gradient(var(--c), var(--c)) 0 0 / 4px 22px,
    linear-gradient(var(--c), var(--c)) 100% 0 / 22px 4px, linear-gradient(var(--c), var(--c)) 100% 0 / 4px 22px,
    linear-gradient(var(--c), var(--c)) 0 100% / 22px 4px, linear-gradient(var(--c), var(--c)) 0 100% / 4px 22px,
    linear-gradient(var(--c), var(--c)) 100% 100% / 22px 4px, linear-gradient(var(--c), var(--c)) 100% 100% / 4px 22px;
  background-repeat: no-repeat;
}

.dialogo {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 16px;
  margin: 28px 0 36px; padding: 18px 18px 22px;
  background: var(--tinta-0); border: 4px solid var(--aco-2);
  box-shadow: inset 0 0 0 3px var(--tinta-0), inset 0 0 0 5px var(--aco-1);
  cursor: pointer;
}
.dialogo__rosto {
  width: 64px; height: 64px; image-rendering: pixelated;
  background: #1B2B17; border: 3px solid var(--aco-2); box-sizing: content-box;
}
@media (min-width: 640px) { .dialogo__rosto { width: 80px; height: 80px; } .dialogo { padding: 22px 22px 26px; gap: 20px; } }
.dialogo__nome { margin-bottom: 8px; font: 700 1rem/1 var(--f-pixel); text-transform: uppercase; letter-spacing: .06em; color: var(--lima); }
.fala { font-weight: 500; font-size: 1.0625rem; line-height: 1.55; color: var(--lima-claro); }
@media (min-width: 640px) { .fala { font-size: 1.1875rem; } }
.fala + .fala { margin-top: 12px; }
.dialogo__proxima { display: none; }
.js .dialogo__falas { display: grid; }
.js .fala { position: relative; grid-area: 1 / 1; margin: 0; visibility: hidden; }
.js .fala.atual { visibility: visible; }
.fala .reserva { visibility: hidden; }
.fala .digitado { position: absolute; inset: 0; }
.js .dialogo { padding-bottom: 46px; }
.js .dialogo__proxima {
  position: absolute; right: 8px; bottom: 2px;
  display: grid; place-items: center; width: 44px; height: 44px;
  color: var(--lima); background: none; border: 0; cursor: pointer;
}
.dialogo__proxima .ic { width: 22px; height: 22px; }
.dialogo__proxima.piscando .ic { animation: piscar .9s steps(1, end) 4; }
@keyframes piscar { 50% { opacity: 0; } }

/* ficha em tela de status: nível, dados, atributos em barra de energia e equipamento */
.status {
  padding: 20px 18px 22px; background: var(--tinta-0); border: 4px solid var(--aco-2);
  box-shadow: inset 0 0 0 3px var(--tinta-0), inset 0 0 0 5px var(--aco-1);
}
@media (min-width: 640px) { .status { padding: 24px 26px 26px; } }
.status__topo { display: flex; align-items: center; gap: 18px; padding-bottom: 18px; border-bottom: 2px dotted var(--aco-2); }
.status__nivel {
  display: grid; place-items: center; align-content: center; gap: 4px; flex: none; width: 72px; height: 72px; margin: 4px;
  font: 700 2rem/1 var(--f-pixel); text-transform: uppercase; color: var(--tinta-1); background: var(--lima);
  box-shadow: 0 -4px 0 0 var(--lima), 0 4px 0 0 var(--lima), -4px 0 0 0 var(--lima), 4px 0 0 0 var(--lima), inset 0 -4px 0 0 rgb(0 0 0 / .2);
}
.status__nivel span[aria-hidden] { font-size: 1rem; }
.status__nome { font: 700 1.5rem/1 var(--f-pixel); text-transform: uppercase; letter-spacing: .04em; }
.status__classe { margin-top: 8px; color: var(--texto-2); }
.status__dados { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 16px 0 0; }
.status__dados dt { font: 400 1rem/1 var(--f-pixel); text-transform: uppercase; color: var(--lima); }
.status__dados dd { margin: 6px 0 0; font-size: .9375rem; line-height: 1.35; }
@media (max-width: 479px) {
  .status__dados { grid-template-columns: 1fr; gap: 8px; }
  .status__dados div { display: flex; align-items: baseline; gap: 12px; }
  .status__dados dt { min-width: 4.5em; }
  .status__dados dd { margin: 0; }
}
.status__rotulo { margin: 22px 0 12px; font: 700 1rem/1 var(--f-pixel); text-transform: uppercase; color: var(--lima-claro); }
.atributos, .equip { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.atributos li { display: grid; grid-template-columns: minmax(0, 10.5em) 1fr; align-items: center; gap: 12px; }
@media (max-width: 479px) { .atributos li { grid-template-columns: 1fr; gap: 6px; } }
.atributo { display: inline-flex; align-items: center; gap: 8px; font-size: .9375rem; }
.atributo .ic { width: 18px; height: 18px; color: var(--lima); }
.barra { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; height: 18px; padding: 2px; background: #04060C; border: 2px solid var(--aco-2); }
.barra i { background: var(--aco-1); }
.barra i.on { background: var(--lima); box-shadow: inset 0 -3px 0 0 var(--lima-escura); }
@media (min-width: 640px) { .equip { grid-template-columns: 1fr 1fr; gap: 12px 18px; } }
.equip li { display: flex; align-items: flex-start; gap: 12px; }
.equip__slot {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px;
  color: var(--lima-claro); background: var(--tinta-2); border: 2px solid var(--aco-2); box-shadow: inset 0 0 0 2px var(--tinta-0);
}
.equip__slot .ic { width: 22px; height: 22px; }
.equip__slot--fraco { color: var(--chefao); }
.equip__texto { font-size: .9375rem; line-height: 1.4; }
.equip__texto b { display: block; margin-bottom: 5px; font: 400 1rem/1 var(--f-pixel); text-transform: uppercase; color: var(--lima); }

/* ---------- escolha sua fase ---------- */
.fases { background: var(--tinta-1); padding-block: var(--secao); }
.fases__intro { max-width: 56ch; margin: 18px 0 40px; color: var(--texto-2); }
.fases__jogo { display: grid; gap: 28px; }
@media (min-width: 1024px) {
  .fases__jogo { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); gap: 40px; align-items: start; }
}
.seletor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .seletor { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }

.fase {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: 12px; padding: 10px 10px 14px;
  font: inherit; text-align: left; color: var(--texto); background: none; border: 0; cursor: pointer;
}
.fase::before, .fase::after { content: ""; position: absolute; pointer-events: none; }
.fase::before { inset: 0; z-index: -2; background: var(--aco-2); clip-path: var(--chanfro); transition: background .12s steps(2); }
.fase::after { inset: 3px; z-index: -1; background: var(--aco-1); clip-path: var(--chanfro-dentro); }
.fase__tela {
  display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden;
  background: repeating-linear-gradient(180deg, rgb(255 255 255 / .035) 0 2px, transparent 2px 4px), var(--tinta-0);
}
/* escala do pixel no quadro: chefões (24 px) e o rosto do Gad (16 px) sempre com o mesmo tamanho de pixel */
/* chefões em 40x40 (escala --z) e o rosto do Gad em 16x16 (escala --zr, o dobro) */
.seletor { --z: 2; --zr: 4; }
@media (min-width: 640px) { .seletor { --z: 3; --zr: 6; } }
@media (min-width: 1024px) and (max-width: 1199px) { .seletor { --z: 2; --zr: 4; } }
.chefe {
  display: block; width: calc(40px * var(--z)); height: calc(40px * var(--z));
  background: url("../img/chefoes.png") calc(var(--i) * -40px * var(--z)) 0 / calc(320px * var(--z)) auto no-repeat;
  image-rendering: pixelated;
}
button.fase:hover .chefe { transform: translateY(calc(-1px * var(--z))); }
.fase[aria-pressed="true"] .chefe { animation: respirar .5s steps(1, end) 6; }
@keyframes respirar { 50% { transform: translateY(calc(-1px * var(--z))); } }
.rosto {
  --ox: 0; --oy: 1;
  position: relative; display: block; width: calc(16px * var(--zr)); height: calc(16px * var(--zr));
  background: url("../img/gad-rosto-olhos.png") 0 0 / 100% 100% no-repeat; image-rendering: pixelated;
}
.rosto__pupila {
  position: absolute; top: calc(8px * var(--zr)); width: calc(2px * var(--zr)); height: calc(2px * var(--zr)); background: #000;
  transform: translate(calc(var(--ox) * 1px * var(--zr)), calc(var(--oy) * 1px * var(--zr)));
}
.rosto__pupila--e { left: calc(4px * var(--zr)); }
.rosto__pupila--d { left: calc(10px * var(--zr)); }
.rosto.pisca { background-image: url("../img/gad-rosto-pisca.png"); }
.rosto.bravo { background-image: url("../img/gad-rosto-bravo.png"); }
.rosto.pisca .rosto__pupila, .rosto.bravo .rosto__pupila { display: none; }
.fase__placa { display: block; padding-inline: 2px; }
.fase__num { display: block; font: 400 1rem/1 var(--f-pixel); text-transform: uppercase; color: var(--texto-3); }
.fase__nome { display: block; margin-top: 8px; font: 600 .9375rem/1.25 var(--f-titulo); letter-spacing: -.015em; }
button.fase:hover::before { background: var(--aco-3); }
.fase[aria-pressed="true"]::before { background: var(--lima); }
.fase[aria-pressed="true"] .fase__num { color: var(--lima); }
.fase:focus-visible { outline: 3px solid var(--texto); outline-offset: 4px; }

.fase--p1 { grid-column: 1 / -1; order: -1; flex-direction: row; align-items: center; cursor: default; }
.fase--p1::before { background: var(--lima-escura); }
.fase--p1 .fase__tela { width: 112px; flex: none; aspect-ratio: 1; }
.fase--p1 .fase__num { color: var(--lima); }
@media (min-width: 640px) {
  .fase--p1 { grid-column: auto; order: 0; flex-direction: column; align-items: stretch; }
  .fase--p1 .fase__tela { width: auto; aspect-ratio: 4 / 3; }
}

.painel {
  position: relative; padding: 22px 20px 24px; scroll-margin-top: calc(var(--hud) + 16px);
  background: var(--tinta-0); border: 4px solid var(--aco-2);
  box-shadow: inset 0 0 0 3px var(--tinta-0), inset 0 0 0 5px var(--aco-1);
}
@media (min-width: 640px) { .painel { padding: 28px 28px 30px; } }
@media (min-width: 1024px) { .painel { position: sticky; top: calc(var(--hud) + 24px); } }
.js .painel__fase { display: none; }
.js .painel__fase.ativa { display: block; }
.painel__fase + .painel__fase { margin-top: 36px; padding-top: 36px; border-top: 2px dotted var(--aco-2); }
.js .painel__fase + .painel__fase { margin-top: 0; padding-top: 0; border-top: 0; }
.painel { --z: 2; }
@media (min-width: 640px) { .painel { --z: 3; } }
.painel__topo { position: relative; display: flex; align-items: center; gap: 16px; }
@media (min-width: 640px) { .painel__topo { padding-right: 56px; } }
.painel__chefe {
  display: grid; place-items: center; flex: none; padding: 6px;
  background: repeating-linear-gradient(180deg, rgb(255 255 255 / .035) 0 2px, transparent 2px 4px), var(--tinta-2);
  border: 2px solid rgb(255 90 110 / .55);
}
.painel__nome { font: 700 clamp(1.375rem, 1.05rem + 1.1vw, 1.875rem) / 1.12 var(--f-titulo); letter-spacing: -.03em; }
.painel__contador { display: none; position: absolute; top: 0; right: 0; font: 400 1rem/1 var(--f-pixel); color: var(--texto-3); }
@media (min-width: 640px) { .painel__contador { display: block; } }
.chefao { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; }
.chefao__tag { padding: 5px 8px 4px; font: 700 1rem/1 var(--f-pixel); text-transform: uppercase; color: var(--tinta-0); background: var(--chefao); }
.chefao__nome { font: 600 1rem/1.3 var(--f-titulo); letter-spacing: -.01em; color: #FFD5DB; }
.chefao__fala {
  margin-top: 18px; padding: 10px 14px; font-weight: 500; color: #FFE3E7;
  background: rgb(255 90 110 / .08); border: 2px solid rgb(255 90 110 / .5);
}
.painel__problema { color: var(--texto-2); }
.painel__rotulo { margin: 22px 0 10px; font: 700 1rem/1 var(--f-pixel); text-transform: uppercase; color: var(--lima); }
.painel__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.painel__lista li { position: relative; padding-left: 26px; }
.painel__lista li::before {
  content: ""; position: absolute; left: 1px; top: .32em; width: 14px; height: 14px; background: var(--lima);
  -webkit-mask: url("../img/estrela-4.svg") center / contain no-repeat; mask: url("../img/estrela-4.svg") center / contain no-repeat;
}
.painel__arma { margin: 22px 0 22px; padding: 14px 16px; background: var(--tinta-2); border: 2px solid var(--aco-2); }
.painel__arma b { display: block; margin-bottom: 8px; font: 700 1rem/1 var(--f-pixel); text-transform: uppercase; color: var(--lima-claro); }
.painel__voltar {
  display: none; align-items: center; gap: 8px; margin-top: 18px; min-height: 44px;
  color: var(--texto-2); text-decoration: none; font: 400 1rem/1 var(--f-pixel); text-transform: uppercase;
}
.painel__voltar .ic { width: 18px; height: 18px; }
@media (max-width: 1023px) { .js .painel__voltar { display: flex; } }
.painel__fase.entrando .chefao__fala { animation: alerta .6s steps(1, end); }
.painel__fase.entrando .painel__nome { animation: entrar .3s steps(6, end); }
@keyframes alerta {
  0% { background: rgb(255 90 110 / .5); } 25% { background: rgb(255 90 110 / .08); }
  50% { background: rgb(255 90 110 / .4); } 75%, 100% { background: rgb(255 90 110 / .08); }
}
@keyframes entrar { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- patch notes ---------- */
/* ---------- trabalhos: portfólio em cartões, com filtros e a janela de cada peça ---------- */
.portfolio { background: var(--tinta-2); padding-block: var(--secao); }
.portfolio__cabeca p { max-width: 52ch; margin-top: 18px; color: var(--texto-2); }
.filtros { display: flex; flex-wrap: wrap; gap: 10px; margin: 32px 0 4px; }
.filtro {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px;
  font: 400 1rem/1 var(--f-pixel); text-transform: uppercase; color: var(--texto-2);
  background: var(--tinta-1); border: 2px solid var(--aco-2); cursor: pointer;
}
.filtro:hover { color: var(--texto); border-color: var(--aco-3); }
.filtro[aria-pressed="true"] { color: var(--tinta-1); background: var(--lima); border-color: var(--lima); }
.filtro__n { color: var(--texto-3); }
.filtro[aria-pressed="true"] .filtro__n { color: var(--tinta-1); }
.pecas__grupo { margin-top: 36px; }
.pecas__grupo[hidden] { display: none; }
.pecas__titulo {
  display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
  font: 400 1rem/1 var(--f-pixel); text-transform: uppercase; color: var(--lima);
}
.pecas__titulo::after { content: ""; flex: 1; border-top: 2px dotted var(--aco-2); }
.pecas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 760px) { .pecas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1100px) { .pecas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* o cartão é o li (moldura com chanfro); dentro dele, o botão que abre a peça e o link do Instagram da empresa */
.peca { position: relative; isolation: isolate; display: flex; flex-direction: column; }
.peca[hidden] { display: none; }
.peca::before, .peca::after { content: ""; position: absolute; pointer-events: none; }
.peca::before { inset: 0; z-index: -2; background: var(--aco-2); clip-path: var(--chanfro); transition: background .12s steps(2); }
.peca::after { inset: 3px; z-index: -1; background: var(--aco-1); clip-path: var(--chanfro-dentro); }
.peca:hover::before, .peca:focus-within::before { background: var(--lima); }
.peca__botao {
  display: flex; flex-direction: column; gap: 12px; flex: 1; width: 100%; padding: 7px 7px 14px;
  font: inherit; text-align: left; color: var(--texto); background: none; border: 0; cursor: pointer;
}
.peca__botao:focus-visible { outline: 3px solid var(--texto); outline-offset: 4px; }
.peca__insta {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; max-width: calc(100% - 20px); min-height: 32px; margin: -6px 10px 12px;
  font: 600 .875rem/1.2 var(--f-texto); color: var(--texto-2); text-decoration: none; white-space: nowrap;
}
.peca__insta span { overflow: hidden; text-overflow: ellipsis; }
.peca__insta:hover { color: var(--lima); text-decoration: underline; text-underline-offset: 3px; }
.peca__insta .ic { width: 18px; height: 18px; }
@media (max-width: 759px) { .peca__insta { gap: 6px; font-size: .8125rem; } .peca__insta .ic { width: 16px; height: 16px; } }
.peca__capa { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--tinta-0); }
.peca__capa img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s steps(6); }
.peca__botao:hover .peca__capa img { transform: scale(1.05); }
.peca__ano, .peca__autoral {
  position: absolute; top: 6px; display: inline-flex; align-items: center; padding: 5px 7px 4px;
  font: 400 1rem/1 var(--f-pixel); text-transform: uppercase;
}
.peca__ano { left: 6px; color: var(--texto); background: var(--tinta-0); }
.peca__autoral { right: 6px; color: var(--tinta-1); background: var(--lima-claro); }
@media (max-width: 759px) { .peca__rot, .peca__autoral { display: none; } }
.peca__texto { display: grid; gap: 4px; padding-inline: 3px; }
.peca__cliente { font: 700 .9375rem/1.3 var(--f-texto); color: var(--texto-2); }
.peca__titulo { font: 600 1rem/1.25 var(--f-titulo); letter-spacing: -.015em; }
@media (min-width: 760px) { .peca__titulo { font-size: 1.0625rem; } }
.peca__linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 6px; }
.peca__tags { font: 400 1rem/1.25 var(--f-pixel); text-transform: uppercase; color: var(--lima); }
.peca__conta { display: inline-flex; align-items: center; gap: 6px; font: 400 1rem/1 var(--f-pixel); text-transform: uppercase; color: var(--texto-3); }
.peca__conta b { font-weight: 400; color: var(--texto-2); }
.peca__conta .ic { width: 16px; height: 16px; }

.vitrine {
  width: min(100% - 32px, 1160px); max-width: none; height: min(100% - 40px, 820px); max-height: none;
  margin: auto; padding: 0; color: var(--texto); background: var(--tinta-0); border: 4px solid var(--aco-2);
}
.vitrine[open] { display: flex; flex-direction: column; }
.vitrine::backdrop { background: rgb(5 8 15 / .92); }
.vitrine__barra {
  flex: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 6px 6px 14px;
  font: 400 1rem/1 var(--f-pixel); color: var(--texto); background: var(--aco-2);
}
.vitrine__fechar {
  display: grid; place-items: center; width: 44px; height: 44px;
  color: var(--texto); background: var(--aco-1); border: 0; cursor: pointer;
}
.vitrine__fechar:hover { color: var(--tinta-1); background: var(--lima); }
.vitrine__fechar .ic { width: 22px; height: 22px; }
.vitrine__corpo { flex: 1; min-height: 0; display: grid; grid-template-rows: minmax(0, 58fr) minmax(0, 42fr); }
@media (min-width: 900px) {
  .vitrine__corpo { grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); grid-template-rows: minmax(0, 1fr); }
}
.vitrine__palco {
  position: relative; min-height: 0;
  background: repeating-linear-gradient(180deg, rgb(255 255 255 / .03) 0 2px, transparent 2px 4px), var(--tinta-0);
}
.vitrine__trilho {
  list-style: none; margin: 0; padding: 0; height: 100%;
  display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.vitrine__trilho::-webkit-scrollbar { display: none; }
.vitrine__slide {
  flex: 0 0 100%; min-width: 0; height: 100%; padding: 14px 56px; scroll-snap-align: center;
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 899px) { .vitrine__slide { padding: 10px 12px 60px; } }
/* a mídia cabe inteira no palco e nunca é ampliada além do tamanho dela (token pequeno não fica borrado) */
.vitrine__slide img, .vitrine__slide video {
  display: block; flex: none; min-width: 0; min-height: 0; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain;
}
.vitrine__seta {
  position: absolute; top: 50%; translate: 0 -50%;
  display: grid; place-items: center; width: 44px; height: 44px;
  color: var(--texto); background: var(--aco-2); border: 0; cursor: pointer;
}
.vitrine__seta--ant { left: 6px; }
.vitrine__seta--prox { right: 6px; }
.vitrine__seta:hover:not([disabled]) { color: var(--tinta-1); background: var(--lima); }
.vitrine__seta[disabled] { opacity: .3; cursor: default; }
.vitrine__seta[hidden] { display: none; }
.vitrine__seta .ic { width: 22px; height: 22px; }
@media (max-width: 899px) { .vitrine__seta { top: auto; bottom: 8px; translate: none; } }
.vitrine__info { min-height: 0; overflow-y: auto; padding: 20px 18px 24px; border-top: 4px solid var(--aco-2); }
@media (min-width: 900px) { .vitrine__info { padding: 32px 28px; border-top: 0; border-left: 4px solid var(--aco-2); } }
.vitrine__cliente { font: 700 1rem/1.3 var(--f-texto); color: var(--texto-2); }
.vitrine__titulo { margin-top: 6px; font: 700 clamp(1.375rem, 1.1rem + 1vw, 1.875rem) / 1.1 var(--f-titulo); letter-spacing: -.03em; }
.vitrine__meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; font: 400 1rem/1 var(--f-pixel); text-transform: uppercase; color: var(--lima); }
.vitrine__contador { color: var(--texto-3); }
.vitrine__legenda { margin-top: 16px; padding: 10px 12px; font-size: .9375rem; color: var(--lima-claro); background: var(--aco-1); }
.vitrine__legenda:empty { display: none; }
.vitrine__texto { display: grid; gap: 12px; margin: 18px 0 26px; color: var(--texto-2); }
.vitrine__insta {
  display: flex; align-items: center; gap: 10px; width: fit-content; min-height: 44px; margin-top: 14px;
  font: 600 1rem/1.2 var(--f-texto); color: var(--texto-2); text-decoration: none;
}
.vitrine__insta:hover { color: var(--lima); text-decoration: underline; text-underline-offset: 4px; }
.vitrine__insta[hidden] { display: none; }
.vitrine__insta .ic { width: 22px; height: 22px; }
@media (max-width: 899px) { .vitrine { width: 100%; height: 100%; max-height: 100dvh; border: 0; } }

.patch { background: var(--tinta-1); padding-block: var(--secao); }
.patch__grade { display: grid; gap: 32px; }
@media (min-width: 960px) { .patch__grade { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; align-items: start; } }
.patch__cabeca p { max-width: 42ch; margin-top: 18px; color: var(--texto-2); }
.patch__cabeca .patch__rodape { color: var(--texto-3); }
.patch__rodape a { color: var(--lima); text-underline-offset: 4px; }
.janela { background: var(--tinta-0); border: 4px solid var(--aco-2); }
.janela__barra {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 8px 8px 14px;
  font: 400 1rem/1 var(--f-pixel); color: var(--texto); background: var(--aco-2);
}
.janela__botoes { display: flex; gap: 6px; }
.janela__botoes > span { display: grid; place-items: center; width: 26px; height: 26px; color: var(--texto-3); background: var(--aco-1); }
.janela__botoes .ic { width: 14px; height: 14px; }
.janela__corpo { padding: 4px 18px 6px; }
@media (min-width: 640px) { .janela__corpo { padding: 6px 26px 10px; } }
.nota { padding-block: 20px; border-bottom: 2px dotted var(--aco-2); }
.nota:last-child { border-bottom: 0; }
.nota h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 14px; font: 600 1.125rem/1.3 var(--f-titulo); letter-spacing: -.015em; }
.nota__versao { font: 400 1rem/1 var(--f-pixel); text-transform: uppercase; color: var(--lima); }
.nota ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.nota li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; color: var(--texto-2); }
.tag { display: grid; place-items: center; width: 28px; height: 26px; margin-top: 1px; font: 700 1rem/1 var(--f-pixel); color: var(--tinta-0); background: var(--lima); }
.tag--ajuste { color: var(--texto); background: var(--aco-3); }
.notas-antigas summary {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding-block: 14px; cursor: pointer; list-style: none;
  font: 400 1rem/1.2 var(--f-pixel); text-transform: uppercase; color: var(--lima);
}
.notas-antigas summary::-webkit-details-marker { display: none; }
.notas-antigas summary:hover span { text-decoration: underline; text-underline-offset: 4px; }
.notas-antigas summary .ic { width: 18px; height: 18px; flex: none; transition: transform .15s steps(2); }
.notas-antigas[open] summary { border-bottom: 2px dotted var(--aco-2); }
.notas-antigas[open] summary .ic { transform: rotate(180deg); }

/* ---------- como a gente joga ---------- */
.como { background: var(--tinta-2); padding-block: var(--secao); }
.mapa { position: relative; list-style: none; margin: 44px 0 0; padding: 0; display: grid; gap: 30px; }
.mapa::before {
  content: ""; position: absolute; left: 22px; top: 24px; bottom: 24px; width: 4px;
  background: repeating-linear-gradient(180deg, var(--aco-3) 0 8px, transparent 8px 16px);
}
.mapa li { position: relative; padding-left: 74px; }
.mapa__marca {
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 48px; height: 48px;
  font: 700 1.5rem/1 var(--f-pixel); color: var(--tinta-1); background: var(--lima);
  box-shadow: 0 -4px 0 0 var(--lima), 0 4px 0 0 var(--lima), -4px 0 0 0 var(--lima), 4px 0 0 0 var(--lima), inset 0 -4px 0 0 rgb(0 0 0 / .2);
}
.mapa h3 { margin: 6px 0 8px; font: 600 1.1875rem/1.25 var(--f-titulo); letter-spacing: -.015em; }
.mapa p { max-width: 34ch; color: var(--texto-2); }
@media (min-width: 900px) {
  .mapa { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .mapa::before {
    left: 28px; right: 28px; top: 22px; bottom: auto; width: auto; height: 4px;
    background: repeating-linear-gradient(90deg, var(--aco-3) 0 8px, transparent 8px 16px);
  }
  .mapa li { padding-left: 0; }
  .mapa__marca { position: relative; }
  .mapa h3 { margin-top: 22px; }
}

/* ---------- continue? ---------- */
.continue {
  padding-block: var(--secao);
  background: var(--verde-noite) url("../img/camuflado.png") 0 0 / 288px auto repeat;
  image-rendering: pixelated;
}
.continue__titulo {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .35em;
  font: 700 clamp(3rem, 1.4rem + 7vw, 6rem) / 1 var(--f-pixel); text-transform: uppercase; letter-spacing: .02em;
  color: var(--lima-claro);
}
.continue__conta { min-width: 1ch; color: var(--lima); }
.continue p { max-width: 44ch; margin: 22px 0 34px; font-size: 1.125rem; color: #E5F4D9; }
@media (min-width: 640px) { .continue p { font-size: 1.25rem; } }

/* ---------- rodapé ---------- */
.rodape { padding-block: 56px 28px; background: var(--tinta-0); color: var(--texto-2); }
.rodape__grade { display: grid; gap: 28px; align-items: center; }
@media (min-width: 820px) { .rodape__grade { grid-template-columns: auto 1fr auto; gap: 44px; } }
.rodape__logo { width: 148px; height: auto; }
.rodape__nome { margin-bottom: 6px; font: 600 1rem/1.3 var(--f-titulo); color: var(--texto); }
.rodape__grade p + p { margin-top: 4px; }
.rodape__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.rodape__links a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font: 400 1rem/1 var(--f-pixel); text-transform: uppercase; text-decoration: none; color: var(--texto);
}
.rodape__links a:hover { color: var(--lima); }
.rodape__links .ic { width: 22px; height: 22px; }
.rodape__fim { margin-top: 36px; padding-top: 20px; border-top: 2px dotted var(--aco-1); font-size: .875rem; color: var(--texto-3); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; }
  .painel__fase.entrando .chefao__fala, .painel__fase.entrando .painel__nome, .fase[aria-pressed="true"] .chefe,
  .dialogo__proxima.piscando .ic { animation: none !important; }
}