/* ZKLMvaders - Styles
 *
 * The canvas is the whole game: a fixed 256x224 framebuffer, scaled to an
 * INTEGER multiple by JavaScript (Game.applyDisplayScale) and centred in black
 * space. Nothing here may stretch the image non-uniformly.
 */

html, body {
    background-color: #000;   /* image centred on pure black (spec) */
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

.site-back {
    position: fixed;
    top: 0.7rem;
    left: 0.8rem;
    z-index: 20;
    color: #c8c8c8;
    font: 14px/1.2 sans-serif;
    letter-spacing: 0.06em;
    text-decoration: none;
}

.site-back:hover,
.site-back:focus-visible {
    color: #fff;
}

/* MUST stay positioned: #crt-overlay is absolutely positioned inside it, and
 * without this the overlay falls back to the viewport and tints the whole
 * window instead of the playfield (code review A5). */
#game-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 0;            /* no inline-box gap under the canvas */
}

canvas {
    /* Pixelated rendering as per requirements */
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    display: block;
    background-color: #000;
}

/* Title screen logo, positioned in the canvas's 256x224 logical coordinate
 * space as percentages of #game-container (which hugs the canvas exactly,
 * see #game-container above) — stays pixel-aligned at any integer scale.
 * Box must match Game.render()'s title layout: x=58 y=4 w=140 h=41.
 * display:none by default; Game.render() shows it only in the TITLE state. */
#title-logo {
    display: none;
    position: absolute;
    left: 22.66%;
    top: 1.79%;
    width: 54.69%;
    height: 18.30%;
    /* logo.png's background is transparent, not opaque white — without this
     * the black wordmark/border vanish into the canvas's black background. */
    background-color: #F2F2F2;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    pointer-events: none;
}

/* CRT scanline + vignette overlay, sized to the canvas. Toggled by the C key
 * (Game.toggleCRT adds body.crt-off). */
#crt-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background:
        /* horizontal scanlines */
        repeating-linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0)    0px,
            rgba(0, 0, 0, 0)    2px,
            rgba(0, 0, 0, 0.30) 3px,
            rgba(0, 0, 0, 0.30) 4px
        ),
        /* soft vignette */
        radial-gradient(
            ellipse at center,
            rgba(0, 0, 0, 0)    60%,
            rgba(0, 0, 0, 0.40) 100%
        );
    mix-blend-mode: multiply;
}

body.crt-off #crt-overlay {
    display: none;
}