/* ---------- Base layout ---------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    background: #1a1a24;
    color: #e8e8f0;
    font-family: "Segoe UI", Roboto, system-ui, sans-serif;
    /* Lock the page down on mobile so the game can own the viewport. */
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* The game owns the full viewport. No letterboxing, no chrome. */
.game-wrapper {
    position: fixed;
    inset: 0;
}

/* ---------- Canvas ----------
   Fills the full viewport on any device. The canvas's *internal*
   resolution is sized by JS on resize to match the viewport's aspect
   ratio, so drawing at 1:1 with the CSS size produces no distortion
   and no letterbox bars even in portrait. All game math (world size,
   HUD positions) reads VIEW_W/VIEW_H which are updated on every
   resize, so the HUD reflows automatically. */
#game {
    display: block;
    background: #2a2a38;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    width: 100vw;
    height: 100vh;
    /* Respect iPhone notch / home indicator */
    width: 100dvw;
    height: 100dvh;
    touch-action: none;
}