/* Synthetic Vertical Simulator: o mapa de um jogo. Página clara, verde de grama e
   azul de céu, borda de pixel de 2px, pino como marcador de seção. Cor chapada em todo fundo. */
:root {
  --fundo: #f4f8ee; --sup: #ffffff; --sup2: #e6efd9; --tinta: #152318; --tinta2: #35473a; --fraco: #66756a;
  --linha: #152318; --cor: #2e8b3d; --cor-t: #ffffff; --cor2: #3aa0e6;
  --esc: #152318; --esc-t: #f4f8ee; --esc-f: rgba(244, 248, 238, .72);
  --raio: 0px; --raio-p: 0px; --sombra: 4px 4px 0 #152318;
  --f-tit: 'Pixelify Sans', 'Manrope', system-ui, sans-serif; --f-txt: 'Manrope', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace; --f-pix: 'Press Start 2P', 'JetBrains Mono', monospace;
  --tit-peso: 700; --tit-esp: 0;
  --grama: #5fbf4a; --grama2: #4ea63c; --areia: #eed48a; --agua: #4aa3df; --agua2: #2b7fc0; --trilha: #e0c27a;
  --gz: #3b82f6; --mi: #22c55e; --gx: #f59e0b; --bo: #ef4444;
}
/* Fundo com a malha de um mapa de tiles (SVG, cor chapada). */
body { background-color: var(--fundo); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Crect x='0' y='0' width='2' height='2' fill='%23152318' fill-opacity='.10'/%3E%3C/svg%3E"); }
h1, h2, h3 { letter-spacing: 0; font-variant-ligatures: none; }
h1 { font-size: clamp(1.7rem, 3vw, 2.7rem); line-height: 1.08; }
.heroi .sobre { line-height: 1.5; }
h2 { font-size: clamp(1.8rem, 3.6vw, 3rem); line-height: 1.04; }
h3 { font-size: 1.2rem; }
h1 em, h2 em { color: var(--cor); }
h1 em { background: var(--areia); color: var(--tinta); padding: 0 .1em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.heroi { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.lede { font-size: 1.08rem; }

/* Rótulos em fonte de fliperama, com um pino de pixel na frente. */
.sobre, .tag, .et b, .ps .n, .idiomas a { font-family: var(--f-pix); letter-spacing: .02em; }
.sobre { font-size: .58rem; display: flex; align-items: center; gap: 8px; }
.sobre::before { content: ""; width: 12px; height: 14px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 7' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='4' height='1' fill='%232e8b3d'/%3E%3Crect x='0' y='1' width='6' height='3' fill='%232e8b3d'/%3E%3Crect x='2' y='1' width='2' height='2' fill='%23f4f8ee'/%3E%3Crect x='1' y='4' width='4' height='1' fill='%232e8b3d'/%3E%3Crect x='2' y='5' width='2' height='1' fill='%232e8b3d'/%3E%3Crect x='2' y='6' width='2' height='1' fill='%23152318'/%3E%3C/svg%3E") center / contain no-repeat; }
.sec-esc .sobre::before { filter: brightness(1.5); }
.tag { font-size: .5rem; border-width: 2px; border-radius: 0; padding: 4px 6px; }
.et b { font-size: .56rem; }
.ps .n { font-size: .6rem; }
.idiomas a { font-size: .5rem; padding: 6px 8px; }
.prod { font: 700 1rem var(--f-tit); letter-spacing: 0; }
.prod b { color: var(--cor); }
.cassi { font-family: var(--f-txt); font-weight: 800; }
.topo { border-bottom: 2px solid var(--tinta); background: color-mix(in srgb, var(--fundo) 94%, transparent); }
.btn { border: 2px solid var(--tinta); box-shadow: 3px 3px 0 var(--tinta); font-weight: 800; }
.btn:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--tinta); }
.btn-p { background: var(--cor); border-color: var(--tinta); }
.btn-demo { background: var(--cor2); color: var(--tinta); }
.idiomas { border: 2px solid var(--tinta); }
.idiomas a[aria-current] { background: var(--tinta); color: var(--fundo); }

/* Cartões com borda de pixel */
.tcs, .pv, .cx, .fc { border: 2px solid var(--tinta); box-shadow: var(--sombra); }
.tc { border-right-width: 2px; }
.tc-cassi { background: var(--sup2); }
.rl, .rl:last-child, .fqs, .fq { border-color: var(--tinta); border-width: 2px; }
.rl:not(:first-child) { border-top-width: 1px; }
.fq { border-bottom-width: 1px; }
blockquote { border-left: 6px solid var(--cor2); font-style: normal; font-weight: 600; }
.ps { border: 2px solid rgba(244, 248, 238, .35); background: rgba(244, 248, 238, .06); }
.ps .gt { color: var(--areia) !important; }
.sec-esc .sobre { color: var(--areia); }
.pv b { font-family: var(--f-tit); font-size: clamp(2.4rem, 4vw, 3.6rem); }
.sim li::before { content: "▶"; font-size: .7rem; top: 4px; }
.fc input, .fc textarea { border: 2px solid var(--tinta); border-radius: 0; }
.fim { background: var(--sup2); max-width: none; border-top: 2px solid var(--tinta); }
.rodape { border-top: 2px solid var(--tinta); }
@media (max-width: 1080px) { .heroi { grid-template-columns: minmax(0, 1fr); } .tc:nth-child(2) { border-right-width: 0; } }
@media (max-width: 720px) { .tc { border-right-width: 0; } }

/* ---------- O palco: uma tela de jogo ---------- */
.palco { aspect-ratio: 16 / 11; border: 3px solid var(--tinta); box-shadow: 8px 8px 0 var(--tinta); background: #0f1a12; color: #eef3e6; border-radius: 0; }
.pc-abas { grid-template-columns: repeat(5, minmax(0, 1fr)); background: #0f1a12; border-bottom: 2px solid #2a3d2e; }
.pc-aba { color: #8fa393; border-radius: 0; align-items: center; padding: 5px 7px; }
.pc-aba b { font-family: var(--f-tit); font-weight: 700; font-size: .72rem; letter-spacing: 0; }
.pc-aba small { font-size: .52rem; }
.pc-aba[aria-selected="true"] { background: var(--grama); color: #0f1a12; }
.pc-aba[aria-selected="true"] small { opacity: 1; }
.pc-prog { background: var(--areia); height: 3px; }
.cena { padding: 0; font-family: var(--f-txt); }
.px-t { font: 400 .5rem var(--f-pix); letter-spacing: .04em; color: #8fa393; text-transform: uppercase; }
.px-cx { border: 2px solid #2a3d2e; background: #16241a; }
canvas.cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.spr { display: inline-block; background-repeat: no-repeat; flex: none; vertical-align: middle; }
.hud { position: absolute; background: rgba(15, 26, 18, .9); border: 2px solid #0f1a12; color: #eef3e6; padding: 6px 10px; z-index: 3; }
.hud-t { font: 700 .9rem var(--f-tit); }
.hud small { display: block; font: 400 .5rem var(--f-pix); color: #b8c9bd; margin-top: 3px; }
.cl0 { --c: var(--gz); } .cl1 { --c: var(--mi); } .cl2 { --c: var(--gx); } .cl3 { --c: var(--bo); }

/* Cena 1: o mapa geral */
.mapa { position: relative; height: 100%; overflow: hidden; }
.mapa .hud-c { left: 50%; top: 8px; transform: translateX(-50%); text-align: center; white-space: nowrap; }
.mapa .hud-d { right: 8px; bottom: 8px; display: grid; gap: 3px; }
.hud-d span { display: flex; justify-content: space-between; gap: 12px; font: 400 .5rem var(--f-pix); }
.hud-d b { color: var(--areia); }
.pino { position: absolute; transform: translate(-50%, -13px); z-index: 2; text-align: center; pointer-events: none; }
.pino i { display: block; width: 22px; height: 22px; margin: 0 auto 2px; background: #f5a524; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 2px 0 rgba(0, 0, 0, .35); position: relative; }
.pino i::after { content: "★"; position: absolute; inset: 0; color: #fff; font: 700 11px/16px sans-serif; text-align: center; }
.pino b { display: block; background: rgba(15, 26, 18, .9); color: #fff; font: 700 .68rem/1.2 var(--f-tit); padding: 2px 6px; white-space: nowrap; border-radius: 3px; }
.pino small { display: block; background: rgba(15, 26, 18, .9); color: #b8c9bd; font: 400 .42rem var(--f-pix); padding: 2px 6px 3px; white-space: nowrap; }
.pino em { display: none; background: var(--areia); color: #0f1a12; font: 400 .46rem var(--f-pix); font-style: normal; padding: 3px 6px; border: 2px solid #0f1a12; margin-top: 2px; }
.pino.on i { animation: pula .6s steps(2) infinite; }
.pino.on em { display: block; }
.toast { position: absolute; left: 50%; bottom: 10px; transform: translate(-50%, 10px); background: var(--areia); color: #0f1a12; font: 400 .5rem var(--f-pix); padding: 6px 9px; border: 2px solid #0f1a12; white-space: nowrap; opacity: 0; transition: opacity .2s steps(2), transform .2s steps(3); z-index: 4; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* Cenas 2 a 7: dentro de um mundo, o HUD do app */
.mundo { position: relative; height: 100%; overflow: hidden; }
.hud-topo { position: absolute; left: 0; right: 0; top: 0; height: 26px; background: rgba(8, 12, 9, .82); color: #d2dccf; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; font: 500 .62rem var(--f-mono); z-index: 3; }
.hud-topo b { font-weight: 600; color: #eef3e6; }
.hud-topo em { font-style: normal; color: #8fa393; }
.hud-topo .pin { display: inline-block; width: 7px; height: 7px; border: 2px solid #8fa393; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); margin: 0 7px 0 0; }
.hud-topo .trocar { font-size: .56rem; color: #8fa393; }
.chip { position: absolute; left: 8px; top: 34px; background: rgba(15, 26, 18, .92); border: 2px solid #3f5a45; color: #eef3e6; padding: 6px 10px; z-index: 3; }
.chip small { display: block; font: 400 .42rem var(--f-pix); color: #8fa393; margin-bottom: 4px; }
.chip b { font: 700 .82rem/1 var(--f-tit); }
.hud-k { left: 8px; bottom: 8px; padding: 6px 9px; }
.hud-k .px-t { margin-bottom: 4px; }
.hud-k div { display: flex; align-items: center; gap: 5px; font: 400 .44rem var(--f-pix); color: #eef3e6; margin-top: 3px; }
.hud-k kbd { font: 400 .42rem var(--f-pix); border: 1px solid #b8c9bd; padding: 3px 4px; min-width: 16px; text-align: center; }
.hud-a { right: 8px; bottom: 8px; display: grid; gap: 3px; }
.hud-a span { display: flex; justify-content: space-between; gap: 10px; font: 400 .44rem var(--f-pix); }
.hud-a b { color: var(--areia); }
.np { position: absolute; transform: translate(-50%, -100%); z-index: 2; text-align: center; pointer-events: none; white-space: nowrap; }
.np b { display: inline-block; background: rgba(15, 26, 18, .88); color: #fff; font: 700 .56rem/1 var(--f-tit); padding: 3px 5px; border-left: 3px solid var(--c, #fff); border-radius: 2px; }
.np.eu b { background: var(--areia); color: #0f1a12; border-left-color: #0f1a12; }
.bl { position: absolute; transform: translate(-50%, -100%); background: #fff; color: #0f1a12; border: 2px solid #0f1a12; box-shadow: 2px 2px 0 #0f1a12; font: 600 .6rem/1.3 var(--f-txt); padding: 4px 7px; max-width: 170px; z-index: 3; opacity: 0; transition: opacity .2s steps(2); pointer-events: none; }
.bl::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 6px; height: 6px; margin-left: -3px; background: #fff; border-right: 2px solid #0f1a12; border-bottom: 2px solid #0f1a12; transform: rotate(45deg); }
.bl.on { opacity: 1; }
.bl small { display: block; font: 400 .4rem var(--f-pix); color: var(--c, #35473a); margin-bottom: 2px; }
.ep { position: absolute; transform: translate(-50%, -100%); background: #f5a524; color: #0f1a12; border: 2px solid #0f1a12; font: 400 .46rem var(--f-pix); padding: 4px 7px; z-index: 4; opacity: 0; transition: opacity .15s steps(2); white-space: nowrap; pointer-events: none; }
.ep.on { opacity: 1; animation: pisca 1s steps(2) infinite; }

/* Cena 3: Persona Lab */
.lab { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; height: 100%; padding: 10px; }
.lab-f { padding: 8px; display: flex; flex-direction: column; gap: 5px; }
.lab-f .px-t { margin-bottom: 3px; }
.fl { font: 600 .58rem var(--f-mono); padding: 4px 6px; border: 1px solid transparent; color: #b8c9bd; display: flex; justify-content: space-between; align-items: center; transition: background .2s steps(2); }
.fl i { width: 6px; height: 6px; background: var(--c); }
.fl.on { background: #2a3d2e; color: #fff; border-color: #3f5a45; }
.lab-g { position: relative; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.lab-h { display: flex; justify-content: space-between; align-items: center; }
.lab-h .px-t { color: #eef3e6; }
.lab-h span:last-child { font: 400 .42rem var(--f-pix); background: var(--cor2); color: #0f1a12; padding: 4px 6px; border: 2px solid #0f1a12; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; flex: 1; min-height: 0; align-content: start; }
.card { padding: 7px 8px; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 3px 7px; align-items: center; opacity: 0; transform: translateY(6px); transition: opacity .25s steps(3), transform .25s steps(3), border-color .2s, background .2s; }
.card.on { opacity: 1; transform: none; }
.card.dim { opacity: .28; }
.card.sel { border-color: var(--areia); background: #1e2f22; }
.card .av-c1 { grid-row: 1 / 3; width: 44px; height: 56px; border: 1px solid #2a3d2e; background: #0f1a12; display: grid; place-items: center; overflow: hidden; }
.card b { font: 700 .74rem/1.1 var(--f-tit); color: #fff; }
.card b i { display: inline-block; font: 400 .38rem var(--f-pix); font-style: normal; background: var(--c); color: #0f1a12; padding: 2px 3px; margin-left: 5px; vertical-align: 2px; }
.card span { font: 400 .42rem var(--f-pix); color: #8fa393; }
.card p { grid-column: 1 / -1; font-size: .56rem; line-height: 1.3; color: #d2dccf; }
.card .acoes-c { grid-column: 1 / -1; display: flex; gap: 4px; }
.card .acoes-c span { font: 400 .36rem var(--f-pix); border: 1px solid #3f5a45; padding: 3px 4px; color: #b8c9bd; flex: 1; text-align: center; transition: background .2s, color .2s; }
.card .acoes-c span.on { background: var(--areia); color: #0f1a12; border-color: var(--areia); }
.ficha-p { position: absolute; inset: 0; background: #0f1a12; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 8px; opacity: 0; visibility: hidden; transition: opacity .3s steps(3); z-index: 3; }
.ficha-p.on { opacity: 1; visibility: visible; }
.fp { padding: 9px; display: flex; flex-direction: column; gap: 5px; min-height: 0; overflow: hidden; }
.fp-t { display: flex; gap: 8px; align-items: center; }
.fp-t .av-c2 { width: 66px; height: 84px; border: 2px solid #eef3e6; background: #0f1a12; flex: none; display: grid; place-items: center; overflow: hidden; }
.fp-t b { display: block; font: 700 .95rem var(--f-tit); color: var(--areia); }
.fp-t small { display: block; font: 600 .5rem/1.4 var(--f-mono); color: #b8c9bd; }
.fp ol { list-style: none; padding: 0; display: grid; gap: 2px; counter-reset: dr; }
.fp ol li { font-size: .56rem; line-height: 1.3; color: #eef3e6; opacity: 0; transition: opacity .2s; counter-increment: dr; }
.fp ol li::before { content: counter(dr, decimal-leading-zero) " "; font: 400 .4rem var(--f-pix); color: var(--cor2); }
.fp ol li.on { opacity: 1; }
.fp .ten { font-size: .56rem; color: #ffd6d6; border-left: 2px solid var(--bo); padding-left: 6px; }
.fp .fr { font-size: .58rem; font-style: italic; color: #d2dccf; }
.fp-b { margin-top: auto; display: flex; gap: 4px; }
.fp-b span { font: 400 .38rem var(--f-pix); border: 2px solid #3f5a45; padding: 4px; color: #b8c9bd; flex: 1; text-align: center; transition: background .2s, color .2s; }
.fp-b span.on { background: var(--areia); color: #0f1a12; border-color: var(--areia); }
.papo { display: flex; flex-direction: column; padding: 8px; min-height: 0; }
.papo-l { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.bo { max-width: 88%; padding: 6px 8px; border: 2px solid #2a3d2e; opacity: 0; transform: translateY(6px); transition: opacity .2s steps(2), transform .2s steps(2); }
.bo.on { opacity: 1; transform: none; }
.bo small { display: block; font: 400 .38rem var(--f-pix); color: #8fa393; margin-bottom: 3px; text-transform: uppercase; }
.bo p { font-size: .6rem; line-height: 1.35; min-height: 1.35em; }
.bo.eu { align-self: flex-end; background: var(--cor); border-color: #3fb054; color: #fff; }
.bo.eu small { color: #d6f5dc; }
.bo.ela { background: #0f1a12; border-color: var(--areia); display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; }
.bo.ela .spr { grid-row: 1 / 3; align-self: start; }
.bo.ela small { color: var(--areia); }
.papo-i { margin-top: 6px; border: 2px solid #2a3d2e; padding: 5px 6px; font-size: .54rem; color: #66756a; }
.st { font: 400 .4rem var(--f-pix); color: var(--areia); min-height: 1em; margin-top: 4px; }

/* Cena 4: Insights */
.ins { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 8px; height: 100%; padding: 10px; }
.feed { display: flex; flex-direction: column; min-height: 0; padding: 8px; }
.feed-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.feed-h .viva { color: #4fe36b; animation: pisca 1.2s steps(2) infinite; }
.feed-h small { font: 400 .42rem var(--f-pix); color: #8fa393; }
.feed-l { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 7px; }
.fl-l { display: grid; grid-template-columns: 52px 50px minmax(0, 1fr); gap: 6px; font-size: .66rem; line-height: 1.4; opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .2s; border-bottom: 1px solid #2a3d2e; padding-bottom: 5px; }
.fl-l.on { opacity: 1; transform: none; }
.fl-l time { font: 400 .42rem var(--f-mono); color: #8fa393; }
.fl-l b { font: 700 .58rem var(--f-tit); color: var(--c); display: flex; align-items: center; gap: 3px; }
.fl-l b .spr { margin-left: -4px; }
.lado { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.atv { padding: 8px; }
.atv-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-top: 5px; }
.atv-g div { border: 2px solid #2a3d2e; padding: 5px 7px; display: flex; justify-content: space-between; align-items: baseline; }
.atv-g span { font-size: .56rem; color: #d2dccf; }
.atv-g b { font: 700 .9rem var(--f-tit); color: var(--areia); }
.clu { padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.cb { display: grid; grid-template-columns: 58px minmax(0, 1fr) 24px; gap: 6px; align-items: center; font: 600 .52rem var(--f-mono); }
.cb div { height: 8px; background: #0f1a12; border: 1px solid #2a3d2e; }
.cb div i { display: block; height: 100%; width: 0; background: var(--c); transition: width .5s steps(8); }
.cb b { text-align: right; font: 400 .4rem var(--f-pix); color: #b8c9bd; }
.pad { margin-top: auto; padding: 8px; border: 2px solid var(--areia); background: #1e2f22; opacity: 0; transform: translateY(8px); transition: opacity .25s steps(3), transform .25s steps(3); }
.pad.on { opacity: 1; transform: none; }
.pad .px-t { color: var(--areia); }
.pad p { font-size: .6rem; line-height: 1.35; color: #fff; margin-top: 4px; }
.pad p + p { margin-top: 3px; opacity: 0; transition: opacity .3s; }
.pad p.on { opacity: 1; }

/* Cena 5: editor de avatar */
.av { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 8px; height: 100%; padding: 10px; }
.av-p { position: relative; display: flex; flex-direction: column; min-height: 0; padding: 8px; }
.av-p .px-t { color: #eef3e6; }
.av-c { flex: 1; min-height: 0; display: grid; place-items: center; }
.av-c canvas { width: min(100%, 150px); aspect-ratio: 88 / 112; image-rendering: pixelated; image-rendering: crisp-edges; border: 2px solid #2a3d2e; background: #0f1a12; border-radius: 50%; padding: 6px; }
.av-abas { display: flex; gap: 4px; border-bottom: 1px solid #2a3d2e; padding-bottom: 6px; }
.av-abas span { font: 600 .54rem var(--f-mono); padding: 3px 8px; color: #8fa393; border: 1px solid transparent; }
.av-abas span.on { color: var(--areia); border-color: var(--areia); }
.ch span { --c: #2a3d2e; }
.ch span::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--c); margin-right: 5px; vertical-align: -1px; }
.av-p .nota { font-size: .52rem; color: #8fa393; text-align: center; }
.av-o { display: flex; flex-direction: column; gap: 6px; padding: 8px; min-height: 0; overflow: hidden; }
.op-g { display: grid; gap: 3px; }
.sw { display: flex; gap: 4px; flex-wrap: wrap; }
.sw i { width: 18px; height: 18px; border: 2px solid #2a3d2e; background: var(--c); transition: border-color .2s; }
.sw i.on { border-color: #fff; outline: 2px solid var(--areia); }
.ch { display: flex; gap: 4px; flex-wrap: wrap; }
.ch span { font: 600 .52rem var(--f-mono); border: 2px solid #2a3d2e; padding: 3px 6px; color: #b8c9bd; transition: background .2s, color .2s; }
.ch span.on { background: var(--areia); color: #0f1a12; border-color: var(--areia); }
.av-s { margin-top: auto; text-align: center; font: 400 .5rem var(--f-pix); background: var(--areia); color: #0f1a12; padding: 8px; border: 2px solid #0f1a12; box-shadow: 3px 3px 0 #0f1a12; transition: transform .15s steps(2), box-shadow .15s steps(2), background .2s; }
.av-s.on { transform: translate(3px, 3px); box-shadow: 0 0 0 #0f1a12; background: var(--grama); }
.av-m { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .35s steps(3); z-index: 2; background: #0f1a12; }
.av-m.on { opacity: 1; visibility: visible; }

@keyframes pisca { 50% { opacity: .25; } }
@keyframes pula { 50% { transform: rotate(-45deg) translate(-2px, -2px); } }

@media (max-width: 720px) {
  .palco { aspect-ratio: auto; }
  .pc-abas { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; padding: 5px; }
  .pc-aba { padding: 5px 3px; }
  .pc-aba b { font-size: .5rem; line-height: 1.1; hyphens: manual; }
  .pc-aba small { display: none; }
  .hud-t { font-size: .78rem; }
  .mapa .hud-d { display: none; }
  .pino b { font-size: .56rem; }
  .pino small { display: none; }
  .hud-a, .hud-topo .trocar { display: none; }
  .hud-topo { font-size: .54rem; }
  .hud-topo em { display: none; }
  .chip { padding: 4px 8px; }
  .chip b { font-size: .72rem; }
  .hud-k div:last-child { display: none; }
  .bl { font-size: .56rem; max-width: 130px; }
  .np b { font-size: .5rem; }
  .lab { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); padding: 8px; }
  .lab-f { flex-direction: row; flex-wrap: wrap; gap: 3px; padding: 6px; }
  .lab-f .px-t { display: none; }
  .fl { font-size: .5rem; padding: 3px 5px; gap: 4px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card:nth-child(n+5) { display: none; }
  .card p { display: none; }
  .ficha-p { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .fp ol li:nth-child(n+4), .fp .fr, .fp .ten, .fp .px-t:nth-of-type(n+3) { display: none; }
  .fp { gap: 4px; padding: 7px; }
  .ins { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1.2fr) auto; padding: 8px; }
  .fl-l { grid-template-columns: 44px 40px minmax(0, 1fr); }
  .fl-l:nth-child(-n+3) { display: none; }
  .clu { display: none; }
  .av { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); padding: 8px; }
  .av-c canvas { width: 76px; }
  .av-abas { display: none; }
  .av-p { padding: 6px; }
  .av-p .nota { display: none; }
  .av-o { gap: 5px; padding: 7px; }
  .sw i { width: 16px; height: 16px; }
  .ch span { font-size: .48rem; padding: 2px 5px; }
}
@media (prefers-reduced-motion: reduce) { .feed-h .viva, .pino.on i, .ep.on { animation: none; } }

/* ---------- Seção Mundos: seis mapas reais e os novos mundos ---------- */
.mds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.md { display: flex; flex-direction: column; background: var(--sup); border: 2px solid var(--tinta); box-shadow: var(--sombra); }
.md-mapa { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: #0f1a12; border-bottom: 2px solid var(--tinta); }
.md-mapa img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%;
  transform: scale(1.12) translate(3%, 3%); animation: md-pan 14s linear infinite alternate; animation-play-state: paused; }
.md:hover .md-mapa img, .md:focus-within .md-mapa img { animation-play-state: running; }
@keyframes md-pan { from { transform: scale(1.12) translate(3%, 3%); } to { transform: scale(1.12) translate(-3%, -4%); } }
.md-chip { position: absolute; left: 10px; top: 10px; background: var(--areia); color: var(--tinta); border: 2px solid var(--tinta); box-shadow: 2px 2px 0 var(--tinta);
  font: 400 .46rem var(--f-pix); letter-spacing: .04em; padding: 5px 7px; z-index: 1; }
.md-corpo { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.md-corpo h3 { font: 700 1.5rem/1.1 var(--f-tit); }
.md-o { color: var(--tinta2); font-size: .98rem; margin-bottom: 6px; }
.md dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 9px 14px; margin: 0; border-top: 2px solid var(--sup2); padding-top: 14px; }
.md dt { font: 400 .46rem/1.6 var(--f-pix); letter-spacing: .02em; color: var(--cor); text-transform: uppercase; padding-top: 4px; }
.md dd { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--tinta2); }
.md dd:nth-of-type(3) { color: var(--tinta); font-weight: 600; }

/* Novos mundos: tiles de pixel, um ícone desenhado em SVG por ambiente */
.nv { margin-top: clamp(48px, 6vw, 84px); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 26px; align-items: stretch; }
.nv-cabeca { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(16px, 4vw, 64px); align-items: end; margin-bottom: 8px; }
.nv-cabeca h3 { font: 700 clamp(1.6rem, 3vw, 2.4rem)/1.05 var(--f-tit); }
.nv-grade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; }
.nv-grade li { display: grid; justify-items: center; align-content: center; gap: 10px; padding: 16px 10px 14px; min-height: 118px; text-align: center;
  background: var(--areia); border: 2px solid var(--tinta); box-shadow: 3px 3px 0 var(--tinta); transition: transform .15s steps(2), box-shadow .15s steps(2); }
.nv-grade li:nth-child(8n+2), .nv-grade li:nth-child(8n+4), .nv-grade li:nth-child(8n+5), .nv-grade li:nth-child(8n+7) { background: var(--sup2); }
.nv-grade li:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--tinta); }
.nv-grade svg { width: 44px; height: 44px; display: block; }
.nv-grade b { font: 400 .48rem/1.5 var(--f-pix); letter-spacing: .02em; color: var(--tinta); }
.nv-como { background: var(--esc); color: var(--esc-t); border: 2px solid var(--tinta); box-shadow: var(--sombra); padding: 24px 24px 26px; }
.nv-como .px-t { color: var(--areia); margin-bottom: 16px; font-size: .52rem; }
.nv-como ol { list-style: none; margin: 0 0 22px; padding: 0; counter-reset: passo; display: grid; gap: 14px; }
.nv-como li { counter-increment: passo; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 12px; }
.nv-como li::before { content: counter(passo, decimal-leading-zero); font: 400 .5rem/1.9 var(--f-pix); color: var(--areia); grid-row: 1 / span 2; }
.nv-como li b { font: 700 1.05rem/1.25 var(--f-tit); }
.nv-como li p { grid-column: 2; font-size: .9rem; line-height: 1.5; color: var(--esc-f); }
.nv-como .btn { display: inline-flex; box-shadow: 3px 3px 0 var(--areia); border-color: var(--areia); }
.nv-como .btn:hover { box-shadow: 1px 1px 0 var(--areia); }
@media (max-width: 1080px) {
  .mds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .nv { grid-template-columns: minmax(0, 1fr); }
  .nv-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .mds { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .md-corpo { padding: 16px 16px 20px; }
  .md dl { grid-template-columns: minmax(0, 1fr); gap: 4px 0; }
  .md dt { padding-top: 6px; }
  .nv-cabeca { grid-template-columns: minmax(0, 1fr); }
  .nv-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .nv-grade li { padding: 12px 6px 10px; min-height: 100px; gap: 8px; }
  .nv-grade svg { width: 36px; height: 36px; }
  .nv-grade b { font-size: .42rem; }
  .nv-como { padding: 18px 16px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .md-mapa img { animation: none; transform: scale(1.12); }
  .nv-grade li { transition: none; }
}