/* Plano Quest — game.css: HUD, palco e controles de toque */
#game{gap:8px;overflow:hidden;padding-bottom:0}
.hud{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.hud-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;min-width:0}
.hud-row-top{flex:1 1 auto}
.hud-row-tools{flex:0 1 auto;justify-content:flex-end}
.hud-l{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.hud-title{font-family:var(--f-pixel);color:var(--gold);font-size:.95rem;line-height:1.2}
.hud-pos{color:var(--muted);font-size:.9rem;font-variant-numeric:tabular-nums;line-height:1.2}
.hud-hearts{display:inline-flex;gap:3px;align-items:center;flex:none}
.hud-pause{flex:none}
.hud-tool{gap:6px}

/* ---------- palco: moldura de "console" + efeitos ---------- */
.stage{
  position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  background:#08101e;
  border:2px solid var(--line);border-radius:10px;overflow:hidden;
  box-shadow:0 0 0 3px #0b1425,0 0 0 4px #22355a,0 8px 24px rgba(0,0,0,.5),0 0 22px rgba(92,200,255,.10);
  isolation:isolate;
}
/* nada por cima da arte: o palco tem só moldura e sombra por fora.
   (as scanlines que eu tinha posto aqui apagavam as cores do jogo) */
.stage::after{content:none}
.stage::before{content:none}
/* flash de dano: só aparece por 160ms quando o jogador perde vida */
.stage.hit::before{
  background:radial-gradient(120% 100% at 50% 50%,rgba(255,60,60,0) 45%,rgba(255,60,60,.45) 100%);
  animation:pqHit .16s ease-out both;
}
@keyframes pqHit{from{opacity:1}to{opacity:0}}

/* o tamanho em CSS é definido pelo fitView (mesmo tamanho do bitmap),
   assim a moldura do palco fica igual em cima e embaixo, sem tarja preta */
/* no modo calmo o efeito de tela fica ainda mais discreto */
body.calm .stage::after{opacity:.4}
body.calm .stage{box-shadow:0 0 0 3px #0b1425,0 0 0 4px #22355a,0 6px 18px rgba(0,0,0,.45),inset 0 0 40px rgba(4,8,16,.9)}

#cv{display:block;image-rendering:pixelated;touch-action:none;position:relative;z-index:1;
  box-shadow:0 0 0 2px rgba(70,104,158,.55),0 0 22px rgba(0,0,0,.55);border-radius:4px}

/* ---------- controles de toque ---------- */
.touch{display:none;justify-content:space-between;align-items:center;gap:12px;padding-bottom:max(4px,env(safe-area-inset-bottom,0px));user-select:none;-webkit-user-select:none;touch-action:none}
@media (pointer:coarse){.touch{display:flex}}
.pad{display:flex;gap:12px}
.tbtn{width:78px;height:78px;border-radius:12px;border:3px solid var(--line);background:var(--panel2);display:grid;place-items:center;box-shadow:0 4px 0 rgba(0,0,0,.35);touch-action:none;transition:transform .06s,filter .06s}
.tbtn svg{width:32px;height:32px;fill:var(--text)}
.tbtn.big{width:120px;font-family:var(--f-pixel);font-size:1.05rem;background:var(--gold);border-color:#FFE07A;color:var(--ink)}
.tbtn.down{transform:translateY(3px);box-shadow:none;filter:brightness(1.2)}

/* ---------- escada: botões que só aparecem em cima dela ---------- */
.climb{display:none;flex-direction:column;gap:8px;flex:none}
@media (pointer:coarse){.climb:not([hidden]){display:flex}}
.climb .tbtn{width:60px;height:60px;animation:pqClimbIn .16s ease-out both}
.climb .tbtn svg{width:26px;height:26px}
@keyframes pqClimbIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.climb .tbtn{animation:none}}

/* chip de poder (cogumelo / perna de pau) */
#hudPower{border-color:var(--gold);color:var(--gold);gap:6px}
#hudPower .ic{width:15px;height:15px;fill:currentColor}
#hudPower b{font-variant-numeric:tabular-nums}

/* ---------- HUD: microanimações de feedback ---------- */
#hudCoins.bump{animation:pqCoinPop .34s ease-out}
@keyframes pqCoinPop{
  0%{color:var(--gold);transform:scale(1)}
  35%{color:#FFF0B8;transform:scale(1.14);border-color:var(--gold)}
  100%{transform:scale(1)}
}
#hudHearts.hurt{animation:pqHurt .38s ease-out}
@keyframes pqHurt{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-4px)}
  45%{transform:translateX(4px)}
  70%{transform:translateX(-2px)}
}
.hud-hearts .hrt{transition:fill .18s}

/* ---------- chips dos poderes (cogumelo, perna de pau, modo bobo) ---------- */
.chip.power{padding:2px 8px;gap:8px}
.chip.power .pw{display:inline-flex;align-items:center;gap:4px;font-weight:700;font-variant-numeric:tabular-nums}
.chip.power .pw .ic{width:16px;height:16px;color:var(--gold)}
.chip.power .pw-big .ic{color:#FF6B6B}
.chip.power .pw-stilt .ic{color:#C99A5B}
.chip.power .pw-fun .ic{color:#C489FF}
.chip.power .pw-fun{color:#E5CEFF}
.chip.power .pw b{font-size:.85rem}