/* Borda "pixel" do mundo: mesma forma retrô, cor da identidade (grafite rosado suave em vez de preto). */
:root { --mundo-pixel: var(--color-border-strong); --mundo-pixel-sombra: var(--color-primary-soft); }
/* Protótipo do mundo — complementa styles.css. Mobile-first, personagem no centro. */

/* --topo-hud: faixa do topo reservada para a HUD (hud.css, position: fixed). Tem a altura que a antiga
   nav "arquivo / início" ocupava (17px), para a cena e o Snoopy ficarem exatamente onde estavam. */
.mundo { --linha: var(--color-border-strong); --suave: var(--color-text-secondary); --pixel: 4px; --topo-hud: 17px; }
.mundo-main { max-width: 26rem; min-height: 100vh; margin: auto; padding: calc(22px + var(--topo-hud)) 6vw 2.5rem; display: flex; flex-direction: column; align-items: center; text-align: center; }

.pixel { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }

/* Céu com sol em pixel */
.ceu { height: 2.75rem; margin-top: .75rem; display: flex; justify-content: center; align-items: center; }
.sol { width: 36px; height: 36px; animation: brilhar 4s ease-in-out infinite; }

.saudacao { margin: 1rem 0 0; font: 400 clamp(1.9rem, 8vw, 2.4rem)/1.1 var(--font-serif); letter-spacing: -.02em; }

/* Cena do personagem: camadas de imagem empilhadas (assets/). O movimento (hoje desligado:
   ANIMAR_PERSONAGEM em config.js) vem de src/mundo/animacao.js, só translate no .personagem.
   Tamanho e posição do Snoopy: --snoopy-largura, --snoopy-x, --snoopy-y em .palco
   (ou ?largura=&x=&y= na URL; padrão 0 = centro). A altura segue a proporção do PNG (1230×1278).
   --snoopy-centro-x é calculado por src/mundo/palco.js: centraliza pelo desenho visível do PNG. */
.cena { position: relative; margin: .5rem 0 0; padding: 0 0 .5rem; display: flex; justify-content: center; }
.palco {
  --snoopy-largura: min(78vw, 300px);
  --snoopy-x: 0px;
  --snoopy-y: 0px;
  position: relative; width: var(--snoopy-largura); transform: translate(calc(var(--snoopy-centro-x, 0%) + var(--snoopy-x)), var(--snoopy-y));
}
.personagem { position: relative; width: 100%; aspect-ratio: 1230 / 1278; }
.camada { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.camada-base { opacity: 0; } /* troca seca: sem crossfade entre dois PNGs */
.camada-base.is-visivel { opacity: 1; }
.objeto { position: absolute; inset: 0; width: 100%; height: 100%; animation: aparecer .35s ease-out both; }

/* Chão: só a faixa "pixel" discreta, centrada na cena. Sem sombra sob o personagem. */
.chao { position: absolute; left: 50%; bottom: 14px; width: min(52vw, 206px); height: 12px; transform: translateX(-50%); }
.chao::after {
  content: ""; position: absolute; left: -12%; right: -12%; bottom: -12px; height: 6px;
  background-image: linear-gradient(90deg, rgb(var(--color-text-rgb) / .12) 50%, transparent 50%); background-size: 12px 6px;
}

/* Recompensa flutuante */
.recompensa { position: absolute; top: 2%; left: 30%; font: .8rem var(--font-mono); color: var(--accent); pointer-events: none; animation: subir 1.3s ease-out forwards; }

/* Progresso */
.progresso { width: 100%; max-width: 16rem; margin: 1.1rem 0 0; }
.nivel { margin: 0 0 .6rem; }
.barra-trilho { height: 10px; border: 2px solid var(--mundo-pixel); background: var(--color-surface); padding: 1px; }
.barra { height: 100%; width: 0; background: var(--accent); transition: width .5s ease-out; }
.xp { margin: .5rem 0 0; font: .68rem var(--font-mono); letter-spacing: .06em; color: var(--suave); }

.mensagem { min-height: 1.6rem; margin: 1rem 0 0; font: italic 400 1.15rem var(--font-serif); color: var(--suave); }

/* Ações: poucos botões, estilo de "botão de jogo" */
.acoes { width: 100%; margin-top: 1.25rem; display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.acao {
  display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .95rem .5rem .8rem;
  border: 2px solid var(--mundo-pixel); background: var(--color-surface); color: var(--ink); box-shadow: var(--pixel) var(--pixel) 0 var(--mundo-pixel-sombra);
  font: .7rem var(--font-mono); letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
  transition: transform .08s ease-out, box-shadow .08s ease-out;
}
.acao:hover { background: #fff; }
.acao:active { transform: translate(var(--pixel), var(--pixel)); box-shadow: 0 0 0 var(--mundo-pixel-sombra); }
.acao:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.acao-emoji { font-size: 1.6rem; line-height: 1; }
.acao-link { background: var(--paper); }

@keyframes aparecer { 0% { opacity: 0; transform: translateY(6px) scale(.9); } 100% { opacity: 1; transform: none; } }
@keyframes subir { 0% { opacity: 0; transform: translateY(8px); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-44px); } }
@keyframes brilhar { 0%, 100% { transform: scale(1); opacity: .95; } 50% { transform: scale(1.06); opacity: 1; } }

@media (min-width: 640px) { .mundo-main { padding-top: calc(28px + var(--topo-hud)); } .ceu { margin-top: 2.5rem; } .saudacao { margin-top: 1.5rem; } .palco { --snoopy-largura: 380px; } .acoes { margin-top: 2rem; } }
@media (prefers-reduced-motion: reduce) { .sol, .objeto { animation: none; } .recompensa { animation-duration: .01s; } .barra { transition: none; } }

/* Painel de teste da animação (só com ?teste=1) */
.painel-teste { width: 100%; margin-top: 1.5rem; padding: .75rem; border: 1px dashed var(--linha); text-align: left; font: .7rem var(--font-mono); }
.painel-teste .botoes { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }
.painel-teste button { font: inherit; padding: .3rem .6rem; border: 1px solid var(--ink); background: var(--color-surface-soft); cursor: pointer; }
.painel-teste button[aria-pressed="true"] { background: var(--ink); color: var(--color-surface-soft); }
.painel-teste pre { max-height: 12rem; overflow: auto; margin: .5rem 0 0; white-space: pre-wrap; }