* {
    box-sizing: border-box;
}

body {
    font-family: "Orbitron", Arial, sans-serif;
    background: linear-gradient(180deg, #f4f7fb 0%, #dfeaf7 100%);
    color: #101820;
    font-size: 0.8em;
    margin: 0;
}

button {
    font-family: "Orbitron", Arial, sans-serif;
}

#page {
    min-height: 100vh;
    padding: 16px;
    padding-top: 0;
}

.column {
    border: dashed;
    padding: 1vw;
}

#options {
    border: 2px dashed #1a2a3a;
    background: rgba(255, 255, 255, 0.35);
    display: grid;
    grid-template-columns: minmax(0, 20vw) minmax(0, 20vw) minmax(0, 20vw) minmax(0, 20vw) minmax(0, 20vw);
    grid-template-rows: minmax(80px, 5vh) minmax(35px, 15vh) minmax(35px, 15vh) minmax(35px, 15vh) minmax(35px, 15vh) minmax(35px, 15vh);
    gap: 1vw;
    padding: 1vw;
    padding-top: 0;
}

#options h3 {
    font-family: inherit;
    text-align: center;
    font-size: 1.5rem;
    color: #102030;
}

#options button {
    font-family: inherit;
    align-items: center;
    border: 2px solid #1a2a3a;
    background: linear-gradient(180deg, #d7e6f5 0%, #b8cfe6 100%);
    color: #102030;
    font-size: 1.05rem;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* can't use: muted border/background, text stays readable */
#options button:disabled {
    border-color: #0d1824;
    background: linear-gradient(180deg, #0f1c2a 0%, #0a141d 100%);
    color: #dfeaf7;
    cursor: not-allowed;
    box-shadow: none;
    outline: none;
}