/* ============================================
   VETUU — Base Styles
   Global typography & page layout primitives
   ============================================ */

/* ============================================
   ANIMATION & TRANSFORM RULES
   ============================================
   
   ALL motion, animation, and transitions MUST use CSS.
   JavaScript should only set final positions/states.
   
   REQUIRED: Use 3D transforms for GPU acceleration:
   - translate3d(x, y, 0) instead of translate(x, y)
   - scale3d(x, y, 1) instead of scale(x) or scale(x, y)  
   - rotate3d(0, 0, 1, angle) instead of rotate(angle)
   
   AVOID these expensive properties:
   - filter: blur() - extremely expensive, use opacity/gradients
   - filter: drop-shadow() - use box-shadow instead
   - will-change - only use on continuously animated elements
     (player, enemies, world camera), animations auto-promote
   - Never transition/animate filter properties
   
   This ensures all animations run on the GPU compositor
   thread, not the main thread, for smooth 60fps motion.
   
   ============================================ */

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-body);
  background: var(--black);
  color: var(--text-primary);
  min-height: 100vh;
  overflow: hidden;
  /* Prevent orphans/widows (mainly paged/column media) */
  orphans: 2;
  widows: 2;
  /* Modern text wrapping to avoid single-word orphans */
  text-wrap: pretty;
}

/* Balance line lengths for headings */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/* Trim text box whitespace for precise vertical alignment */
* {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* ---------- Game Container ---------- */
#game {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}