* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    background-image:
        radial-gradient(900px 520px at 12% 10%, rgba(var(--special-color-rgb), 0.14), transparent 70%),
        radial-gradient(760px 480px at 88% 8%, rgba(var(--success-color-rgb), 0.12), transparent 70%),
        linear-gradient(160deg, #07111d 0%, #0d1a2b 55%, #06101a 100%);
    color: var(--text-color);
    font-family: 'IBM Plex Mono', 'VT323', 'Courier New', monospace;
    font-weight: 400;
    font-size: 1rem;
    overflow: hidden; /* Prevent body scroll, we handle sections */
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.play-grid {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(rgba(var(--special-color-rgb), 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--special-color-rgb), 0.05) 1px, transparent 1px);
    background-size: 56px 56px;
}

body.theme-green,
body.theme-amber,
body.theme-grayscale,
body.theme-cga {
    background-color: #000000;
    background-image: none;
}

body.theme-green .play-grid,
body.theme-amber .play-grid,
body.theme-grayscale .play-grid,
body.theme-cga .play-grid {
    display: none;
}