/* css/main.css — the game shell's canvas stack + theme tokens (WP-226; 06 § Canvas stack,
   12 § Theme tokens).

   WP-227 extends this file in M3 with layout/letterboxing/HUD; css/components.css and
   css/screens.css arrive there too. This file owns only what the renderer needs to attach. */

:root {
    /* The palette block is GENERATED from 13 § Palette's UI_TOKENS table by artgen/build.js
       (WP-041), which stamps a paletteHash so drift between 13 and this CSS is caught at build.
       UI code and hand-written CSS reference the semantic tokens only, never hex values.

       NOTE: these are the dedicated UI-chrome palette, deliberately SEPARATE from the 48-color
       sprite palette — UI chrome legitimately needs parchment/ink/gold tones outside the sprite
       ramps, and UI tokens are not required to be members of the 48 (12 § Theme tokens). */
    /* @palette-begin (generated by artgen/build.js — do not edit) */
    --ui-ink: #2a1f1a;            /* darkest ramp color; text, outlines */
    --ui-parchment: #e8d5a8;      /* panel fill */
    --ui-parchment-dark: #cbb27f; /* panel shading, dividers */
    --ui-wood: #7a4f2c;           /* frames, title bars */
    --ui-wood-dark: #4d3018;
    --ui-iron: #5a5f66;           /* destructive accents, combat */
    --ui-gold: #d9a441;           /* selection, focus, primary CTA */
    --ui-blood: #8c2f2b;          /* damage, warnings */
    --ui-need-food: #c9862f;      /* amber */
    --ui-need-rest: #4f6f9e;      /* blue */
    --ui-need-warmth: #b5482a;    /* ember red */
    /* @palette-end */
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--ui-ink);
    overflow: hidden; /* the world letterboxes inside the viewport; the page itself never scrolls */
}

#game-viewport {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* All four canvases share the viewport rect. `image-rendering: pixelated` is what keeps the art
   crisp at integer zoom — without it the browser smooths every sprite. */
#game-viewport canvas {
    position: absolute;
    inset: 0;
    image-rendering: pixelated;
}

/* The lighting layer multiplies against the world beneath it; weather composites normally, which
   is exactly why D-T02's overlay is two elements rather than one (06). */
#canvas-light {
    mix-blend-mode: multiply;
}

/* World-anchored speech bubbles: above the canvas, below the UI (z 5, 12 § DOM roots). */
#bubble-root {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none; /* bubbles never steal clicks from the world */
}

/* Portal + DeathScreen darken (06-owned). Above the world, below the UI. */
#fade-veil {
    position: absolute;
    inset: 0;
    z-index: 6;
    background: var(--ui-ink);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease-in-out;
}

/* The wrapper holding 12's eight UI roots. It must not swallow world clicks itself — each root
   re-enables pointer events for its own content. */
#ui-root {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

#ui-root > * {
    position: absolute;
    inset: 0;
}

#hud-root { z-index: 10; }
#panel-root { z-index: 20; }
#menu-root { z-index: 30; }
#context-root { z-index: 40; }
#notification-root { z-index: 50; }
#screen-root { z-index: 60; }
#dialog-root { z-index: 70; }
#viewport-warning { z-index: 80; }

/* Dev-only layers. Hidden unless main.js opts them in via ?debug=1 / ?profile=1, so a normal
   session never renders them (20 § gating). */
#debug-overlay,
#profiler-overlay {
    position: absolute;
    inset: 0;
    z-index: 90;
    display: none;
    pointer-events: none;
}

#debug-overlay[data-active="1"],
#profiler-overlay[data-active="1"] {
    display: block;
}