:root {
    /* color-scheme: light dark; */
    --background: #e5e2d8;
    /* --surface: #efede7; */
    --surface: #fbfaf8;
    --text: #202020;
    --border: #5d5d5d;
    --accent: #4a5042;
    --focus: #031224;
    --body-font: Georgia, "Times New Roman", serif;
    --mono-font: Consolas, "Courier New", monospace;
}

/* @media (prefers-color-scheme: dark) {
    :root {
        --background: #1b1b1a;
        --surface: #242522;
        --text: #ebe7dc;
        --border: #777;
        --accent: #adb397;
        --focus: #7db8ff;
    }
} */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 100%;
}

body {
    margin: 0;
    padding: 2rem;
    background: var(--background);
    color: var(--text);
    font-family: var(--body-font);
    line-height: 1.6;
}

/* main {
    44rem too narrow    
} */

main {
    max-width: 64rem;
    margin-inline: auto;
    background: var(--surface);
    /* border: 2px solid var(--border); */
    padding: 2rem;
    position: relative;
    /* --surface: #f7f4ea; */
    --surface: #fbfaf8;
    --text: #202020;
    --border: #8a8575;
    border-top: none;
    border-bottom: none;
    padding-block: 3rem;
}

.torn-edge {
    position: absolute;
    left: 0;
    right: 0;
    height: 1.5rem;
    line-height: 0;
    pointer-events: none;
}

.torn-edge svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* svg's <path> */
.torn-edge path {
    fill: var(--background);
}

.torn-edge--bottom {
    bottom: 0;
}

.torn-edge--top {
    top: 0;
}

h1 {
    margin: 0;
    text-align: center;
    font-size: clamp(2.5rem, 8vw, 4rem);
    letter-spacing: .08em;
}

.heading {
    border-bottom: 2px solid var(--border);
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
}

.tagline {
    margin: .75rem 0 0;
    text-align: center;
    color: var(--accent);
    font-size: 1.5rem;
    letter-spacing: .25em;
}

section+section {
    margin-top: 2rem;
}

p {
    margin-block: .75rem;
    font-size: 1.25rem;
}

ol {
    font-size: 1.25rem;
    margin-block: .75rem;
    padding-left: 1.75rem;
}

.hud {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    margin-block: 2rem;
    /* padding-block: .75rem; */
    /* border-top: 2px solid var(--border); */
    /* border-bottom: 2px solid var(--border); */
    font-family: var(--mono-font);
    font-size: 1.05rem;
}

.hud p {
    margin: 0;
}

label {
    display: block;
    margin-bottom: .5rem;
    font-weight: bold;
    font-size: 1.25rem;
}

input {
    width: 100%;
    max-width: 24rem;
    font: inherit;
    font-size: 1.35rem;
    padding: .75rem;
    border: 2px solid var(--border);
    background: var(--background);
    color: inherit;
}

button {
    margin-top: 1.5rem;
    padding: .75rem 1.5rem;
    font-size: 1.5rem;
    background: transparent;
    color: inherit;
    border: 2px solid var(--border);
    cursor: pointer;
    transition:
        background-color .15s,
        color .15s;
}

button:hover, 
button:focus-visible {
    background: var(--text);
    color: var(--surface);
}

button:active {
    transform: translateY(1px);
}

:focus-visible {
    outline: 5px groove var(--focus);
    outline-offset: 3px;
}

[tabindex="-1"]:focus-visible {
    outline: transparent;
}

#game-input, #gameover {
    text-align: center;
}

#wave-break {
    margin-block: 2rem;
    padding: 1rem;
    border: 2px solid var(--border);
    text-align: center;
}

#highscore,
#score,
#wave,
#final {
    font-family: var(--mono-font);
}

.skip-link {
    position: absolute;
    left: -999rem;
    font-size: 1.5rem;
}

.skip-link:focus {
    left: 1rem;
    top: 1rem;
    background: var(--surface);
    border: 2px solid var(--border);
    padding: .5rem .75rem;
    z-index: 1000;
}

[hidden] {
    display: none;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 40rem) {
    body {
        padding: 1rem;
    }

    main {
        padding: 1.25rem;
        padding-block: 2.25rem;
    }

    .hud {
        flex-direction: column;
        gap: .5rem;
    }

    input {
        max-width: none;
    }
}

/* settings and preview buttons */
h2 {
    margin-block: 1.5rem .5rem;
    font-size: 1.65rem;
}

fieldset {
    margin: 1.5rem 0 0;
    padding: .75rem 1rem 1rem;
    border: 2px solid var(--border);
}

legend {
    padding: 0 .4rem;
    font-weight: bold;
    font-size: 1.1rem;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .75rem;
}

.button-row button {
    margin-top: 0;
}

.sound-preview-list {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .75rem;
}

.sound-preview-list button {
    margin-top: 0;
}