:root {
    --screen: #101510;
    --panel: #202820;
    --panel-soft: #2c362c;
    --grid: #4b5a4b;
    --text: #d6f5c4;
    --green: #78ff5a;
    --grey: #a6afa6;
    --yellow: #ffde59;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    background: var(--screen);
    font-family: Consolas, "Courier New", monospace;
}

.game-shell {
    display: grid;
    gap: 1rem;
    width: min(1120px, calc(100vw - 2rem));
    margin: 0 auto;
    padding: 1rem 0;
}

.hud {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto auto;
    gap: 0.75rem;
    align-items: stretch;
}

.hud div,
button {
    border: 3px solid var(--grid);
    border-radius: 0;
    padding: 0.7rem;
    background: var(--panel);
    box-shadow: 4px 4px 0 #050805;
}

.hud span {
    display: block;
    color: var(--grey);
    font-size: 0.76rem;
    text-transform: uppercase;
}

.hud strong {
    color: var(--green);
    font-size: 1.2rem;
}

button {
    color: #102010;
    background: var(--green);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

button:hover,
button:focus {
    background: var(--yellow);
}

.stage-wrap {
    position: relative;
}

canvas {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 4px solid var(--grid);
    border-radius: 0;
    background: #182018;
    box-shadow: 6px 6px 0 #050805;
    image-rendering: pixelated;
}

.overlay {
    position: absolute;
    inset: 4px;
    display: grid;
    place-content: center;
    gap: 1rem;
    padding: 2rem;
    text-align: center;
    background: rgba(16, 21, 16, 0.9);
}

.overlay.hidden {
    display: none;
}

.overlay h1 {
    margin: 0;
    color: var(--green);
    font-size: clamp(2rem, 7vw, 5rem);
    text-transform: uppercase;
}

.overlay p {
    max-width: 720px;
    margin: 0 auto;
    font-size: 1.1rem;
}

.controls {
    color: var(--yellow);
}

@media (max-width: 820px) {
    .hud {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}