/* Tokens de design: cores, gradientes, fontes e áreas seguras. Mude aqui, vale para o jogo todo. */
:root {
  --color-ink: #0b1d33;
  --color-paper: #f6f8fb;
  --color-accent: #ffb52e;
  --color-danger: #ff4d4d;
  --color-flow-base: #7fd8ff;
  --color-flow-full: #ffd23f;
  --color-panel: rgba(8, 20, 38, 0.55);
  --gradient-posture: linear-gradient(90deg, #ffd23f, #ff6b2c);
  --gradient-stamina: linear-gradient(90deg, #b6f06a, #2fe0b0);
  --font-family: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --text-shadow-strong: 0 3px 0 rgba(0, 0, 0, 0.45);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* Altura da tábua de vida 3D do HUD (ART-09); a madeira, a moldura e os rosetões vêm dos modelos gerados. */
  --plank-height: 24px;
  /* Teatro nos menus: faixa de veludo dos títulos e o filete de ouro. */
  --velvet-band: linear-gradient(
    100deg,
    transparent,
    rgba(110, 14, 22, 0.88) 14%,
    rgba(52, 6, 12, 0.88) 86%,
    transparent
  );
  --gold-line: linear-gradient(90deg, transparent, #f2c55a 18%, #ffe39a 50%, #f2c55a 82%, transparent);
  --color-glow-gold: rgba(255, 220, 140, 0.9);
  /* Movimento das telas: entram pela direita inclinadas e se endireitam; saem pela esquerda (voltando, o contrário). */
  --enter-x: 72px;
  --leave-x: -96px;
  --enter-skew: -10deg;
  --leave-skew: 10deg;
  --ease-enter: cubic-bezier(0.18, 0.9, 0.24, 1.12);
  --ease-leave: cubic-bezier(0.55, 0, 0.9, 0.45);
}

#app[data-nav='back'] {
  --enter-x: -72px;
  --leave-x: 96px;
  --enter-skew: 10deg;
  --leave-skew: -10deg;
}