:root {
    color-scheme: dark;
    --void: #07080a;
    --ink: #111318;
    --stone: #353640;
    --mortar: #70717a;
    --parchment: #d6c49c;
    --blood: #9f3038;
    --gold: #d1a64a;
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
}

body {
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--parchment);
    background:
        radial-gradient(circle at 50% 34%, rgba(75, 64, 74, 0.28), transparent 32rem),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 7px),
        linear-gradient(180deg, #111117, var(--void) 72%);
    font-family: "Fixedsys", "Terminal", "Lucida Console", "Courier New", monospace;
}

body::after {
    position: fixed;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    content: "";
    background: repeating-linear-gradient(
        to bottom,
        transparent 0 2px,
        rgba(0, 0, 0, 0.045) 3px 4px
    );
    mix-blend-mode: multiply;
}

#wrap {
    margin-top: 8px;
    text-align: center;
}

canvas {
    display: block;
    width: 384px;
    height: 216px;
    aspect-ratio: 16 / 9;
    border: 2px solid #777078;
    outline: 1px solid #1b1a20;
    background: #000;
    box-shadow:
        0 0 0 3px #0b0b0e,
        0 0 35px rgba(126, 84, 103, 0.24);
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    cursor: default;
}

canvas:focus-visible {
    border-color: var(--gold);
    outline: 2px solid rgba(209, 166, 74, 0.55);
}

.controls {
    max-width: 96vw;
    min-height: 1.2em;
    margin: 9px 0 0;
    color: #c7c1c8;
    font-size: clamp(10px, 1.2vw, 14px);
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.35;
    text-shadow: 1px 1px #000;
}

@media (max-height: 520px) {
    .controls {
        margin-top: 4px;
        font-size: 10px;
    }
}