/* styles.css — Consumes design tokens via var(--color-*) etc.
   The @theme block itself lives inline in index.html — see CLAUDE.md §2 for why
   the Play CDN requires that split. Everything here is plain CSS: safe-area
   handling, touch rules, and the glass/glow/hex-cut vocabulary from DESIGN.md. */

html, body, #app {
  height: 100%;
  margin: 0;
  overscroll-behavior: none;
}

body {
  background: var(--color-void);
  font-family: var(--font-body);
  position: fixed;
  inset: 0;
  width: 100%;
}

/* Canvas is the game world; disable native touch gestures so drag-to-move
   never triggers scroll/zoom on mobile — see CLAUDE.md §3. */
#game-canvas {
  touch-action: none;
}

button, [data-action] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

/* ---------------------------------------------------------------------- */
/* Safe-area helpers (notches / gesture bars) — DESIGN.md §8               */
/* ---------------------------------------------------------------------- */
.safe-top    { padding-top: env(safe-area-inset-top); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }
.safe-left   { padding-left: env(safe-area-inset-left); }
.safe-right  { padding-right: env(safe-area-inset-right); }

/* ---------------------------------------------------------------------- */
/* Glassmorphism — DESIGN.md §3                                            */
/* ---------------------------------------------------------------------- */
.glass-panel {
  background: rgba(19, 26, 43, 0.55);
  border: 1px solid rgba(61, 225, 255, 0.25);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 24px rgba(0, 0, 0, 0.4);
}
.glass-panel-raised {
  background: rgba(28, 37, 64, 0.6);
  border: 1px solid rgba(61, 225, 255, 0.25);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* ---------------------------------------------------------------------- */
/* Neon glow filters — DESIGN.md §4                                        */
/* ---------------------------------------------------------------------- */
.glow-vanguard { filter: drop-shadow(0 0 4px var(--color-vanguard)) drop-shadow(0 0 14px rgba(61, 225, 255, 0.5)); }
.glow-kaiju    { filter: drop-shadow(0 0 4px var(--color-kaiju))    drop-shadow(0 0 14px rgba(255, 59, 92, 0.5)); }
.glow-warlord  { filter: drop-shadow(0 0 5px var(--color-warlord))  drop-shadow(0 0 18px rgba(255, 182, 39, 0.55)); }
.glow-flare    { filter: drop-shadow(0 0 6px var(--color-flare))    drop-shadow(0 0 22px rgba(180, 120, 255, 0.6)); }

/* ---------------------------------------------------------------------- */
/* Hex-cut HUD framing — DESIGN.md §1/§7                                   */
/* ---------------------------------------------------------------------- */
.hex-cut {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

/* ---------------------------------------------------------------------- */
/* Motion — DESIGN.md §6                                                   */
/* ---------------------------------------------------------------------- */
@keyframes pulse-flare {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.9; }
}
.transform-btn-idle {
  animation: pulse-flare 4s var(--ease-standard, ease-in-out) infinite;
}

@keyframes toast-in {
  from { transform: translate(-50%, -12px); opacity: 0; }
  to   { transform: translate(-50%, 0);      opacity: 1; }
}
.toast-enter {
  animation: toast-in var(--dur-med, 240ms) var(--ease-standard, ease-out) forwards;
}

/* Scrollbar cleanup for the level-select grid on WebKit */
.overflow-y-auto::-webkit-scrollbar { width: 4px; }
.overflow-y-auto::-webkit-scrollbar-thumb { background: var(--color-vanguard-dim); border-radius: 2px; }