/* Theme colours, page reset, full-screen overlay layers (vignette, scanlines, flashes, fade). */

:root {
    --blood: #ff2a2a;
    --blood-dark: #7a0a0a;
    --ember: #ff8a1f;
    --gold: #ffd54a;
    --ice: #6ff3ff;
    --bone: #f1e6cc;
    --ink: #07030a;
    --pad: max(12px, env(safe-area-inset-top));
    --u: min(1vw, 1vh * 1.2);           /* responsive unit used for all UI */
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
    margin: 0; width: 100%; height: 100%; overflow: hidden;
    background: var(--ink); color: var(--bone);
    font-family: 'Press Start 2P', 'Courier New', monospace;
    user-select: none; -webkit-user-select: none; touch-action: none;
}
#stage { position: fixed; inset: 0; }
#stage canvas { display: block; width: 100% !important; height: 100% !important; cursor: none; }
body.menu #stage canvas { cursor: default; }

/* ---------- screen-space overlays ---------- */
.overlay-fx { position: fixed; inset: 0; pointer-events: none; }
#vignette { background: radial-gradient(ellipse at 50% 55%, transparent 55%, rgba(0,0,0,.75) 100%); z-index: 2; }
/* CRT (Settings → CRT SCANLINES, off by default): scanlines, an RGB aperture grille, darker curved-glass edges, a faint
   flicker and a slow rolling bar. Above the menus (so the toggle shows at once), below the black fade. */
#scanlines {
    z-index: 44; overflow: hidden;
    background:
        repeating-linear-gradient(to bottom, rgba(0,0,0,.34) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(to right, rgba(255,40,40,.06) 0 1px, rgba(40,255,90,.04) 1px 2px, rgba(60,110,255,.06) 2px 3px);
    box-shadow: inset 0 0 14vmin rgba(0,0,0,.6), inset 0 0 3vmin rgba(0,0,0,.5);
    animation: crtFlicker .16s steps(2) infinite;
}
#scanlines::after {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 22vh;
    background: linear-gradient(to bottom, transparent, rgba(255,235,225,.045) 50%, transparent);
    animation: crtRoll 7s linear infinite;
}
body:not(.crt) #scanlines { display: none; }             /* off unless switched on in Settings */
#sandstorm { z-index: 5; opacity: 0; transition: opacity .8s; background:
    repeating-linear-gradient(100deg, rgba(210,150,80,.0) 0 18px, rgba(230,170,90,.35) 20px 22px, rgba(210,150,80,0) 26px 60px),
    radial-gradient(ellipse at 50% 50%, rgba(200,140,70,.55), rgba(150,90,40,.9)); background-size: 300px 100%, 100% 100%; }
body.sandstorm #sandstorm { opacity: .88; animation: sandBlow .35s linear infinite; }
@keyframes sandBlow { to { background-position: 300px 0, 0 0; } }
#flash { z-index: 4; background: #fff; opacity: 0; }
#damage { z-index: 4; opacity: 0; box-shadow: inset 0 0 calc(var(--u) * 18) rgba(255,0,0,.9); }
#fade { z-index: 45; background: #000; opacity: 0; transition: opacity .35s; }
#fade.on { opacity: 1; }