/* Guardião da Floresta — página oficial. Paleta = src/art/Palette.js do jogo. */
@font-face { font-family: "Jersey 15"; src: url(../fonts/Jersey15.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url(../fonts/AtkinsonHyperlegible-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url(../fonts/AtkinsonHyperlegible-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "FP ja"; src: url(../fonts/FusionPixel-ja.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "FP zh"; src: url(../fonts/FusionPixel-zh.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "FP zht"; src: url(../fonts/FusionPixel-zht.woff2) format("woff2"); font-display: swap; }

:root {
  --ink: #1a1420; --night: #070d0b;
  --g0: #14261c; --g1: #1d3a26; --g2: #28522f; --g3: #356b37; --g4: #4a8a3f; --g6: #9ccf62;
  --t0: #10201f; --t1: #18342e; --t2: #22493c;
  --cream: #f4ecd6; --cream-2: rgba(244, 236, 214, 0.82); --cream-3: rgba(244, 236, 214, 0.62);
  --gold: #f2c14e; --goldhi: #f6dd8c; --straw: #e3c37e;
  --fire: #ff7a3c; --ice: #5cc8ff; --bolt: #c78cff; --wind: #7fd9bd; --rot: #ff7eb6; --danger: #e8434f;
  --display: "Jersey 15", "Atkinson Hyperlegible", monospace;
  --body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --px: 3px;                      /* 1 pixel de arte na UI = 3 px, como no jogo */
  --wrap: 1180px;
  --gutter: 16px;
  --outline: 0 -3px 0 var(--ink), 0 3px 0 var(--ink), -3px 0 0 var(--ink), 3px 0 0 var(--ink),
             -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink), 3px 3px 0 var(--ink),
             0 7px 0 var(--ink), -3px 7px 0 var(--ink), 3px 7px 0 var(--ink);
  --outline-sm: 0 -2px 0 var(--ink), 0 2px 0 var(--ink), -2px 0 0 var(--ink), 2px 0 0 var(--ink),
                -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink),
                0 4px 0 var(--ink);
  color-scheme: dark;
}
html.cjk[data-lang="ja"] { --display: "FP ja", "Jersey 15", sans-serif; --body: "Atkinson Hyperlegible", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif; }
html.cjk[data-lang="zh"] { --display: "FP zh", "Jersey 15", sans-serif; --body: "Atkinson Hyperlegible", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif; }
html.cjk[data-lang="zht"] { --display: "FP zht", "Jersey 15", sans-serif; --body: "Atkinson Hyperlegible", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; background: var(--night); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--cream); font: 400 18px/1.6 var(--body);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(53, 107, 55, 0.18), transparent 60%),
    radial-gradient(900px 700px at -10% 40%, rgba(34, 73, 60, 0.22), transparent 60%),
    var(--night);
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
a { color: var(--wind); text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.px-icon { image-rendering: pixelated; flex: none; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--gold); color: var(--ink); padding: 8px 14px; font-weight: 700; }
.skip:focus { left: 8px; }

/* ---------- tipografia de exibição (estilo das capturas da loja) ---------- */
.logo { margin: 0; display: flex; flex-direction: column; font-family: var(--display); font-weight: 400; line-height: 0.86; letter-spacing: 0.01em; -webkit-font-smoothing: none; }
.logo-big { color: var(--goldhi); font-size: clamp(64px, 13vw, 156px); text-shadow: var(--outline); }
.logo-small { color: var(--g6); font-size: clamp(32px, 6vw, 72px); text-shadow: var(--outline-sm); margin-left: 0.06em; }
.logo[data-order="big-first"] .logo-small { margin-top: 0.12em; }
.logo[data-order="small-first"] .logo-small { margin-bottom: 0.1em; }
html.cjk .logo-big { font-size: clamp(60px, 12vw, 144px); }
html.cjk .logo-small { font-size: clamp(36px, 6vw, 72px); }
.logo-sm .logo-big { font-size: 48px; text-shadow: var(--outline-sm); }
.logo-sm .logo-small { font-size: 26px; text-shadow: 0 2px 0 var(--ink), 0 -2px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink); }
html.cjk .logo-sm .logo-big { font-size: 48px; }
html.cjk .logo-sm .logo-small { font-size: 24px; }

.sec-head { margin: 0 0 32px; }
.sec-title {
  margin: 0; font: 400 clamp(44px, 7vw, 84px)/0.92 var(--display); color: var(--cream);
  text-shadow: var(--outline); letter-spacing: 0.01em; -webkit-font-smoothing: none; text-wrap: balance;
}
html.cjk .sec-title { font-size: clamp(36px, 6vw, 72px); line-height: 1.1; letter-spacing: 0.04em; }
.nobr { white-space: nowrap; }
.sec-bar { display: block; width: 120px; height: 9px; background: var(--accent); margin: 22px 0 18px 3px; box-shadow: 0 4px 0 var(--ink); }
.sec-sub { margin: 0; font-size: clamp(19px, 2.2vw, 24px); font-weight: 700; color: var(--cream); max-width: 40ch; text-wrap: pretty; text-shadow: 0 3px 0 var(--ink); }
html.cjk .sec-sub { max-width: 30em; }

/* ---------- painel do jogo: borda de 3 px, rebites nos cantos ---------- */
.panel {
  --accent: var(--g6);
  position: relative; background: linear-gradient(180deg, rgba(29, 58, 38, 0.92), rgba(16, 32, 31, 0.96));
  border: var(--px) solid var(--accent);
  box-shadow: 0 0 0 var(--px) var(--ink), 0 9px 0 var(--px) rgba(0, 0, 0, 0.45);
}
.panel::before {
  content: ""; position: absolute; inset: 6px; pointer-events: none; z-index: 2;
  background:
    linear-gradient(var(--accent), var(--accent)) top left / 4px 4px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top right / 4px 4px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom left / 4px 4px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom right / 4px 4px no-repeat;
  opacity: 0.9;
}

/* ---------- botões chanfrados ---------- */
.btn {
  --b: var(--g6); --bg: var(--g2); --fg: var(--cream);
  display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 26px;
  font: 400 26px/1 var(--display); letter-spacing: 0.03em; text-transform: uppercase; text-decoration: none;
  color: var(--fg); background: var(--bg); border: 0; cursor: pointer; position: relative;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 6px, 100% 6px,
    100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) 100%,
    6px 100%, 6px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 6px), 0 calc(100% - 6px), 0 6px, 3px 6px, 3px 3px, 6px 3px);
  box-shadow: inset 0 0 0 3px var(--b), inset 0 -6px 0 rgba(0, 0, 0, 0.28), inset 0 3px 0 6px rgba(255, 255, 255, 0.0);
  text-shadow: 0 3px 0 var(--ink);
  transition: transform 0.08s steps(2), filter 0.15s;
  -webkit-font-smoothing: none;
}
html.cjk .btn { font-size: 24px; letter-spacing: 0.06em; }
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(3px); }
.btn-primary { --b: var(--goldhi); --bg: linear-gradient(180deg, #3f7d3b, #28522f); font-size: 30px; min-height: 64px; padding: 0 30px; }
html.cjk .btn-primary { font-size: 24px; }
.btn-primary .px-icon { width: 24px; height: 24px; }
.btn-ghost { --b: var(--cream); --bg: rgba(16, 32, 31, 0.7); }
.btn-small { white-space: nowrap; min-height: 42px; padding: 0 16px; font-size: 20px; --b: var(--goldhi); --bg: var(--g2); }
html.cjk .btn-small { font-size: 18px; }

/* ---------- barra do topo ---------- */
.topbar { position: fixed; inset: 0 0 auto; z-index: 30; transition: background 0.25s, box-shadow 0.25s; }
.topbar.solid { background: rgba(7, 13, 11, 0.92); box-shadow: 0 3px 0 var(--ink), 0 6px 0 rgba(156, 207, 98, 0.12); backdrop-filter: blur(6px); }
.topbar-inner { display: flex; align-items: center; gap: 18px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--cream); text-decoration: none; font: 400 26px/1 var(--display); letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 3px 0 var(--ink); }
.brand img { image-rendering: pixelated; width: 36px; height: 36px; box-shadow: 0 0 0 3px var(--ink); }
html.cjk .brand { font-size: 22px; letter-spacing: 0.04em; }
.nav { display: none; gap: 18px; margin-left: auto; white-space: nowrap; }
.nav a { color: var(--cream-2); text-decoration: none; font: 400 21px/1 var(--display); letter-spacing: 0.03em; text-transform: uppercase; padding: 6px 0; border-bottom: 3px solid transparent; }
html.cjk .nav a { font-size: 18px; letter-spacing: 0.04em; }
.nav a:hover { color: var(--cream); border-bottom-color: var(--g6); }
.topbar .lang { margin-left: auto; }
.topbar .btn-small { display: none; }
@media (min-width: 1180px) { .nav { display: flex; } .topbar .lang { margin-left: 0; } .topbar .btn-small { display: inline-flex; } }
@media (max-width: 520px) { .brand span { display: none; } }

.lang { position: relative; }
.lang summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 12px; color: var(--cream); background: rgba(16, 32, 31, 0.7); box-shadow: inset 0 0 0 3px var(--t2); font: 700 15px/1 var(--body); white-space: nowrap; }
.lang summary::-webkit-details-marker { display: none; }
.lang[open] summary { box-shadow: inset 0 0 0 3px var(--g6); }
.lang ul { position: absolute; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: var(--t0); box-shadow: 0 0 0 3px var(--g6), 0 0 0 6px var(--ink), 0 12px 24px rgba(0, 0, 0, 0.5); min-width: 170px; z-index: 40; }
.lang a { display: block; padding: 10px 12px; color: var(--cream); text-decoration: none; font-size: 16px; }
.lang a:hover, .lang a:focus-visible { background: var(--g2); }
.lang a[aria-current] { color: var(--goldhi); }
.lang a[aria-current]::before { content: "▸ "; }

/* ---------- herói ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; padding: 112px 0 120px; isolation: isolate; overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: -2; background: var(--t0); }
.hero-media video { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.hero-scrim { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgba(7, 13, 11, 0.92) 0%, rgba(7, 13, 11, 0.7) 38%, rgba(7, 13, 11, 0.12) 72%),
  linear-gradient(0deg, rgba(7, 13, 11, 0.95) 0%, rgba(7, 13, 11, 0) 42%),
  linear-gradient(180deg, rgba(7, 13, 11, 0.7) 0%, rgba(7, 13, 11, 0) 22%); }
@media (max-width: 760px) { .hero-scrim { background: linear-gradient(0deg, rgba(7, 13, 11, 0.97) 8%, rgba(7, 13, 11, 0.7) 52%, rgba(7, 13, 11, 0.25) 78%, rgba(7, 13, 11, 0.6) 100%); } }
.hero-inner { width: 100%; position: relative; }
.kicker { margin: 0 0 18px; font: 700 15px/1.3 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--g6); text-shadow: 0 2px 0 var(--ink); }
html.cjk .kicker { letter-spacing: 0.08em; }
.lead { margin: 30px 0 8px; max-width: 30ch; font: 400 clamp(30px, 4vw, 44px)/1.05 var(--display); color: var(--cream); text-shadow: var(--outline-sm); letter-spacing: 0.01em; }
html.cjk .lead { font-size: clamp(24px, 3vw, 36px); line-height: 1.35; max-width: 22em; }
.hero-sub { margin: 0 0 30px; max-width: 46ch; color: var(--cream-2); font-size: 19px; text-shadow: 0 2px 0 var(--ink); }
html.cjk .hero-sub { max-width: 32em; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.cta-row.center { justify-content: center; }
.ios-note { margin: 16px 0 0; max-width: 46ch; padding: 10px 14px; background: rgba(7, 13, 11, 0.8); box-shadow: inset 3px 0 0 var(--gold); color: var(--cream); font-size: 16px; font-weight: 700; }
.join .ios-note { margin: 0 auto 18px; text-align: left; }
.stage-badge { display: inline-flex; align-items: center; gap: 10px; margin: 22px 0 0; padding: 7px 12px; background: rgba(7, 13, 11, 0.72); box-shadow: inset 0 0 0 2px var(--t2); font-size: 15px; font-weight: 700; color: var(--cream); }
.dot { width: 9px; height: 9px; background: var(--gold); box-shadow: 0 0 0 2px var(--ink); animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { background: var(--fire); } }
.facts { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; padding: 0; margin: 22px 0 0; }
.facts li { display: flex; align-items: center; gap: 8px; color: var(--cream-2); font-size: 16px; text-shadow: 0 2px 0 var(--ink); }
.scroll-hint { position: absolute; left: 50%; bottom: 46px; translate: -50% 0; z-index: 2; padding: 10px; animation: bob 1.6s steps(4) infinite; opacity: 0.8; }
@keyframes bob { 50% { transform: translateY(6px); } }
@media (max-width: 760px) { .scroll-hint { display: none; } }

.treeline { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(48px, 9vw, 120px); image-rendering: pixelated; pointer-events: none; z-index: 1; }
/* nas seções seguintes a mata "sobe" por cima do fim da seção anterior */
.sec > .treeline, .footer > .treeline { top: 1px; bottom: auto; transform: translateY(-100%); }

/* ---------- seções ---------- */
.sec { position: relative; padding: clamp(64px, 8vw, 104px) 0; }
.sec-howto { background: var(--t0); }
.sec-reactions { background: linear-gradient(180deg, var(--t0), #0b1716); }
.sec-legends { background: #0b1716; }
.sec-bosses { background: linear-gradient(180deg, #0b1716, #120d14); }
.sec-maps { background: linear-gradient(180deg, #120d14, #0d1512); }
.sec-clearing { background: var(--g1); padding-top: calc(clamp(64px, 8vw, 104px) + 24px); }
.sec-fair { background: linear-gradient(180deg, var(--g1), var(--t0)); }
.sec-trailer { background: var(--t0); }
.sec-join { background: var(--g0); padding-top: calc(clamp(64px, 8vw, 104px) + 24px); }
.sec-press { background: var(--night); }

.vid { position: relative; background: var(--t0); overflow: hidden; aspect-ratio: 1; }
.vid video, .vid img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.vid.shot { aspect-ratio: 16 / 9; }
.vid video:not([src]) { opacity: 0.85; }

/* como se joga */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { display: flex; flex-direction: column; }
.step .vid { aspect-ratio: 4 / 3; }
.step .vid.shot { aspect-ratio: 4 / 3; }
.step .vid.shot img { object-position: 50% 60%; }
.step-body { padding: 22px 22px 26px; position: relative; }
.step-n { position: absolute; top: -30px; left: 18px; width: 48px; height: 48px; display: grid; place-items: center; background: var(--accent); color: var(--ink); font: 400 34px/1 var(--display); box-shadow: 0 0 0 3px var(--ink), 0 6px 0 3px var(--ink); z-index: 3; }
.step h3, .boss h3, .map h3, .clearing-item h3, .fair h3 { margin: 10px 0 6px; font: 400 30px/1 var(--display); color: var(--cream); letter-spacing: 0.02em; text-transform: uppercase; text-shadow: 0 3px 0 var(--ink); }
html.cjk .step h3, html.cjk .boss h3, html.cjk .map h3, html.cjk .clearing-item h3, html.cjk .fair h3 { font-size: 24px; line-height: 1.2; letter-spacing: 0.04em; }
.step p, .boss p, .map p, .clearing-item p, .fair p { margin: 0; color: var(--cream-2); font-size: 17px; }

/* reações */
.react { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 920px) { .react { grid-template-columns: 5fr 6fr; } }
.react-pick { padding: 26px 22px; display: flex; flex-direction: column; }
.react-label { margin: 0 0 16px; font: 700 15px/1.2 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ice); }
.elements { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.el {
  --el: var(--fire);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 120px; padding: 16px 8px;
  background: rgba(7, 13, 11, 0.6); border: 0; cursor: pointer; box-shadow: inset 0 0 0 3px var(--t2);
  font: 400 26px/1 var(--display); letter-spacing: 0.03em; text-transform: uppercase; color: var(--cream-2);
  transition: transform 0.08s steps(2), background 0.15s;
}
html.cjk .el { font-size: 24px; }
.el .px-icon { width: 48px; height: 48px; transition: transform 0.2s steps(3); }
.el:hover { background: rgba(29, 58, 38, 0.8); color: var(--cream); }
.el:hover .px-icon { transform: translateY(-3px); }
.el[aria-pressed="true"] { background: color-mix(in srgb, var(--el) 22%, rgba(7, 13, 11, 0.8)); box-shadow: inset 0 0 0 3px var(--el), 0 0 0 3px var(--ink); color: var(--cream); }
.el[aria-pressed="true"] .px-icon { animation: hop 0.6s steps(3) infinite alternate; }
@keyframes hop { to { transform: translateY(-4px); } }
.el:active { transform: translateY(3px); }
.react-eq { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 24px 0 10px; min-height: 56px; font: 400 40px/1 var(--display); color: var(--cream-3); }
.react-eq .slot { min-width: 40px; display: flex; justify-content: center; }
.react-eq .slot .px-icon { width: 40px; height: 40px; }
.react-eq .slot:empty::before { content: ""; box-sizing: border-box; width: 40px; height: 40px; border: 3px dashed var(--cream-3); animation: hop 0.6s steps(3) infinite alternate; }
.react-eq .result.wait { color: var(--cream-3); }
.react-eq .result { font-size: 44px; color: var(--rc, var(--goldhi)); text-shadow: var(--outline-sm); letter-spacing: 0.02em; }
html.cjk .react-eq .result { font-size: 36px; }
.react-eq .result.pop { animation: pop 0.45s steps(5); }
@keyframes pop { 0% { transform: scale(0.4); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.react-hint { margin: auto 0 0; padding-top: 10px; font-size: 15px; color: var(--cream-3); text-align: center; }
.react-stage { padding: 0; display: flex; }
.react-card { margin: 0; display: flex; flex-direction: column; width: 100%; }
.react-card .vid { aspect-ratio: 16 / 11; flex: 1; }
.react-card figcaption { padding: 18px 22px 22px; display: grid; gap: 4px; }
.react-name { font: 400 44px/1 var(--display); color: var(--rc); text-shadow: var(--outline-sm); letter-spacing: 0.02em; }
html.cjk .react-name { font-size: 36px; }
.react-pair { font: 700 14px/1.2 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-3); }
.react-d { color: var(--cream-2); font-size: 17px; }
.react-all { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; cursor: pointer; border: 0; background: rgba(7, 13, 11, 0.6); box-shadow: inset 0 0 0 2px var(--t2); font: 400 22px/1 var(--display); color: var(--cream-2); letter-spacing: 0.03em; }
html.cjk .chip { font-size: 18px; }
.chip span { margin-left: 4px; }
.chip:hover, .chip[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--rc); color: var(--rc); }
.note { margin: 22px 0 0; color: var(--cream-3); font-size: 16px; max-width: 70ch; }

/* lendas */
.rule { display: flex; align-items: center; gap: 12px; margin: -6px 0 30px; padding: 12px 16px; background: rgba(156, 207, 98, 0.08); box-shadow: inset 3px 0 0 var(--g6); color: var(--cream); font-weight: 700; font-size: 17px; max-width: 760px; }
.sec-bosses .rule { background: rgba(232, 67, 79, 0.08); box-shadow: inset 3px 0 0 var(--danger); }
.legend-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 26px; }
@media (min-width: 760px) { .legend-tabs { grid-template-columns: repeat(7, 1fr); } }
.legend-tab { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 4px 12px; background: rgba(7, 13, 11, 0.55); border: 0; cursor: pointer; box-shadow: inset 0 0 0 3px var(--t1); transition: background 0.15s; }
.legend-tab:hover { background: rgba(29, 58, 38, 0.7); }
.legend-tab[aria-selected="true"] { background: color-mix(in srgb, var(--lc) 16%, rgba(7, 13, 11, 0.85)); box-shadow: inset 0 0 0 3px var(--lc), 0 0 0 3px var(--ink); }
.legend-tab-name { font: 400 20px/1 var(--display); letter-spacing: 0.02em; text-transform: uppercase; color: var(--cream-2); text-align: center; min-height: 2em; display: flex; align-items: center; }
html.cjk .legend-tab-name { font-size: 16px; letter-spacing: 0.02em; line-height: 1.15; }
.legend-tab[aria-selected="true"] .legend-tab-name { color: var(--goldhi); }

/* sprites (13 quadros de 24×28: 0–3 respira, 4 pisca, 5–12 anda) */
.sprite { --s: 3; display: block; width: calc(24px * var(--s)); height: calc(28px * var(--s)); background-repeat: no-repeat; background-size: calc(312px * var(--s)) calc(28px * var(--s)); image-rendering: pixelated; animation: idle 1.6s steps(4) infinite; }
.sprite.big { --s: 4; }
.legend-tab .sprite { --s: 2; }
@media (min-width: 560px) { .legend-tab .sprite { --s: 3; } }
@keyframes idle { from { background-position-x: 0; } to { background-position-x: calc(-96px * var(--s)); } }
@keyframes walk { from { background-position-x: calc(-120px * var(--s)); } to { background-position-x: calc(-312px * var(--s)); } }
.legend-tab[aria-selected="true"] .sprite, .legend-tab:hover .sprite, .sprite.walk { animation: walk 0.8s steps(8) infinite; }

.legend-panel { display: grid; grid-template-columns: 1fr; }
.legend-panel[hidden] { display: none; }
@media (min-width: 860px) { .legend-panel { grid-template-columns: 1fr 1fr; } }
.legend-panel .vid { aspect-ratio: 1; }
.legend-body { padding: 26px 24px 30px; align-self: center; }
.legend-name { margin: 0; font: 400 clamp(52px, 7vw, 80px)/0.92 var(--display); color: var(--goldhi); text-shadow: var(--outline); letter-spacing: 0.01em; text-transform: uppercase; }
html.cjk .legend-name { font-size: clamp(40px, 5vw, 60px); line-height: 1.15; }
.legend-role { margin: 18px 0 18px; font: 700 15px/1.3 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.legend-origin { margin: 0; color: var(--cream-2); font-size: 19px; max-width: 46ch; }
.tag { display: inline-block; margin-right: 6px; padding: 2px 8px; font: 700 12px/1.6 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); background: var(--accent); vertical-align: 2px; }

/* chefes, mapas */
.grid-3 { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.grid-2 { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.boss, .map { display: flex; flex-direction: column; }
.boss .vid { aspect-ratio: 1; }
.map .vid { aspect-ratio: 16 / 10; }
.boss-body, .map-body { padding: 18px 22px 24px; }
.boss-role { color: var(--accent) !important; font: 700 14px/1.35 var(--body) !important; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 10px !important; }
.boss-origin { font-size: 16px !important; }

/* clareira */
.clearing { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 980px) { .clearing { grid-template-columns: 7fr 5fr; align-items: start; } }
.clearing-hero .vid { aspect-ratio: 1; }
.clearing-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.clearing-item { display: grid; grid-template-columns: 104px 1fr; gap: 16px; padding: 12px 18px 12px 12px; align-items: center; }
.clearing-item .vid.mini { width: 104px; aspect-ratio: 1; }
.clearing-item h3 { margin-top: 0; }
.sprite-box { display: grid; place-items: center; background: var(--g2) !important; }

/* justo de verdade */
.fair { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px 34px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .fair { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .fair { grid-template-columns: repeat(3, 1fr); } }
.fair li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; }
.fair .px-icon { margin-top: 14px; width: 24px; height: 21px; }
.fair h3 { color: var(--goldhi) !important; }
.numbers { list-style: none; padding: 34px 0 0; margin: 56px 0 0; border-top: 3px dashed rgba(156, 207, 98, 0.25); display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 10px; }
@media (min-width: 860px) { .numbers { grid-template-columns: repeat(6, 1fr); } }
.numbers li { display: flex; flex-direction: column; align-items: center; text-align: center; }
.num { font: 400 clamp(56px, 7vw, 84px)/0.9 "Jersey 15", monospace; color: var(--goldhi); text-shadow: var(--outline-sm); }
.what { font: 700 14px/1.3 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-2); margin-top: 8px; }

/* trailer */
.trailer { aspect-ratio: 16 / 9; overflow: hidden; }
.trailer-video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.trailer-play { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border: 0; cursor: pointer; background: radial-gradient(circle at 50% 50%, rgba(7, 13, 11, 0.35), rgba(7, 13, 11, 0.75)); }
.trailer-play-icon { width: 104px; height: 104px; display: grid; place-items: center; padding-left: 8px; background: var(--danger); box-shadow: 0 0 0 4px var(--ink), 0 8px 0 4px var(--ink), inset 0 -6px 0 rgba(0, 0, 0, 0.25); transition: transform 0.1s steps(2); }
.trailer-play:hover .trailer-play-icon { transform: scale(1.08); }
.trailer-play-label { font: 400 34px/1 var(--display); color: var(--cream); text-shadow: var(--outline-sm); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 8px; }
html.cjk .trailer-play-label { font-size: 28px; }
.trailer-play-meta { font-weight: 700; font-size: 15px; color: var(--cream-2); text-shadow: 0 2px 0 var(--ink); }
.trailer.playing .trailer-play { display: none; }
.sec-trailer .sec-sub { font-weight: 400; font-size: 16px; color: var(--cream-3); text-shadow: none; }

/* entrar no teste */
.join { max-width: 880px; margin: 0 auto; padding: clamp(36px, 6vw, 60px) clamp(20px, 5vw, 56px) 40px; text-align: center; background: linear-gradient(180deg, rgba(40, 82, 47, 0.95), rgba(16, 32, 31, 0.98)); }
.join .sec-title { font-size: clamp(40px, 6vw, 72px); }
html.cjk .join .sec-title { font-size: clamp(32px, 5vw, 60px); }
.join-sprites { display: flex; justify-content: center; gap: 18px; margin: -96px 0 26px; }
.join-sprites .sprite { --s: 3; }
.join-sprites .sprite:nth-child(2) { animation-delay: -0.2s; }
.join-sprites .sprite:nth-child(3) { animation-delay: -0.4s; }
.join-sprites .sprite:nth-child(4) { animation-delay: -0.6s; }
.join-text { margin: 22px auto 8px; max-width: 54ch; font-size: 19px; color: var(--cream); }
.join-steps { counter-reset: s; list-style: none; padding: 0; margin: 26px auto 30px; max-width: 620px; text-align: left; display: grid; gap: 12px; }
.join-steps li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; color: var(--cream-2); font-size: 17px; }
.join-steps li::before { content: counter(s); width: 36px; height: 36px; display: grid; place-items: center; background: var(--gold); color: var(--ink); font: 400 26px/1 "Jersey 15", monospace; box-shadow: 0 0 0 3px var(--ink); }
.join-optin { margin: 18px 0 0; font-size: 16px; }
.fine { margin: 22px 0 0; font-size: 14px; color: var(--cream-3); }

/* imprensa */
.press { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 940px) { .press { grid-template-columns: 5fr 6fr; } }
.facts-table { margin: 0; padding: 10px 22px; }
.facts-table div { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 14px 0; border-bottom: 2px dashed rgba(244, 236, 214, 0.14); }
.facts-table div:last-child { border-bottom: 0; }
@media (min-width: 560px) { .facts-table div { grid-template-columns: 150px 1fr; gap: 16px; } }
.facts-table dt { font: 700 13px/1.6 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-3); }
.facts-table dd { margin: 0; color: var(--cream); font-size: 17px; }
.press-about { margin: 0 0 26px; color: var(--cream-2); font-size: 18px; }
.downloads { display: grid; gap: 12px; }
.dl { display: flex; align-items: center; gap: 16px; padding: 14px 18px; text-decoration: none; color: var(--cream); background: rgba(29, 58, 38, 0.55); box-shadow: inset 0 0 0 3px var(--t2); transition: background 0.15s, box-shadow 0.15s; }
.dl:hover { background: rgba(40, 82, 47, 0.75); box-shadow: inset 0 0 0 3px var(--g6); }
.dl span { display: grid; }
.dl strong { font: 400 26px/1.05 var(--display); letter-spacing: 0.02em; text-transform: uppercase; }
html.cjk .dl strong { font-size: 22px; }
.dl small { color: var(--cream-3); font-size: 14px; }

/* rodapé */
.footer { position: relative; background: var(--t0); padding: clamp(56px, 7vw, 88px) 0 40px; }
.footer-inner { display: grid; gap: 26px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .footer-inner { grid-template-columns: auto 1fr auto; align-items: center; } }
.footer-brand p { margin: 10px 0 0; color: var(--cream-3); font-size: 15px; }
.footer-brand .logo { margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.footer-links a { color: var(--cream-2); font-size: 15px; }
.footer-langs .lang ul { bottom: calc(100% + 6px); top: auto; }
.footer-small { grid-column: 1 / -1; margin: 6px 0 0; font-size: 13px; color: var(--cream-3); }

/* sugestão de idioma */
.suggest { position: fixed; z-index: 45; left: 50%; bottom: 16px; translate: -50% 0; display: flex; width: max-content; align-items: center; gap: 4px; max-width: calc(100% - 32px); background: var(--t0); box-shadow: 0 0 0 3px var(--gold), 0 0 0 6px var(--ink), 0 12px 30px rgba(0, 0, 0, 0.5); }
.suggest[hidden] { display: none; }
.suggest-link { padding: 12px 6px 12px 16px; color: var(--cream); font-weight: 700; font-size: 16px; text-decoration: none; }
.suggest-link:hover { text-decoration: underline; }
.suggest-close { background: none; border: 0; color: var(--cream-3); font-size: 26px; line-height: 1; padding: 8px 14px; cursor: pointer; }

/* movimento reduzido: nada anda sozinho */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.join-discord { margin: 22px 0 0; }
.join-discord a { display: inline-flex; align-items: center; gap: 12px; color: var(--cream); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.join-discord a:hover { color: var(--goldhi); }
.join-discord .px-icon { width: 33px; height: 24px; flex: none; }