* {
    box-sizing: border-box;
}


/* ==============================
   PAGINA
   ============================== */

body {
    margin: 0;
    min-height: 100vh;

    padding: 40px 25px;

    display: flex;
    justify-content: center;
    align-items: flex-start;

    gap: 70px;

    background-color: #0b0f0d;

    color: #d8e0dc;

    font-family: "Courier New", monospace;
}


/* subtiel grid op achtergrond */

body::before {
    content: "";

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(50, 200, 100, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(50, 200, 100, 0.025) 1px,
            transparent 1px
        );

    background-size: 30px 30px;
}


/* ==============================
   GAME
   ============================== */

.game {
    width: 560px;

    text-align: center;
}


.terminal-title {
    margin: 0 0 8px;

    color: #4dcc7c;

    font-size: 13px;

    letter-spacing: 3px;
}


h1 {
    margin: 0 0 20px;

    color: #e4ebe7;

    font-size: 55px;

    letter-spacing: 6px;
}


/* ==============================
   STATUS
   ============================== */

.info {
    width: 400px;

    margin: 0 auto 12px;

    padding: 10px 15px;

    display: flex;

    justify-content: space-between;

    background-color: #101713;

    border: 1px solid #294334;

    font-size: 14px;
}


.info b {
    color: #4dcc7c;
}


/* ==============================
   MELDING
   ============================== */

.melding {
    width: 400px;

    min-height: 30px;

    margin: 0 auto 20px;

    color: #79d99c;

    text-align: left;

    font-size: 14px;
}


/* ==============================
   SIMON SAYS CIRKEL
   ============================== */

.simon {
    width: 390px;
    height: 390px;

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;

    gap: 5px;

    overflow: hidden;

    border-radius: 50%;

    background-color: #111;

    box-shadow:
        0 0 0 7px #151b18,
        0 20px 40px rgba(0, 0, 0, 0.6);
}


/* alle vier kleurknoppen */

.simon button {
    border: none;
    outline: none;

    margin: 0;

    cursor: pointer;

    font-family: "Courier New", monospace;

    font-size: 16px;
    font-weight: bold;

    color: rgba(0, 0, 0, 0.7);

    transition:
        filter 0.15s,
        transform 0.15s;
}


/* ==============================
   KLEUREN
   ============================== */

.button-blauw {
    background-color: #1976a3;
}


.button-groen {
    background-color: #278c50;
}


.button-rood {
    background-color: #b53e3e;
}


.button-geel {
    background-color: #c6a52c;
}


/* hover */

.simon button:hover {
    filter: brightness(1.2);
}


/* klik */

.simon button:active {
    transform: scale(0.98);
}


/* ==============================
   START / RESTART
   ============================== */

.controls {
    margin-top: 27px;
}


.controls button {
    padding: 12px 22px;

    margin: 5px;

    border-radius: 3px;

    background-color: #101713;

    font-family: "Courier New", monospace;

    font-size: 14px;

    font-weight: bold;

    cursor: pointer;
}


/* start */

.start {
    color: #62d98f;

    border: 1px solid #356247;
}


.start:hover {
    background-color: #17251c;

    border-color: #62d98f;
}


/* restart */

.restart {
    color: #d2b95e;

    border: 1px solid #665a30;
}


.restart:hover {
    background-color: #242015;
}


/* ==============================
   LEADERBOARD
   ============================== */

.leaderboard {
    width: 340px;

    margin-top: 70px;

    padding: 20px;

    background-color: #0f1512;

    border: 1px solid #294334;

    box-shadow:
        8px 8px 0 rgba(0, 0, 0, 0.35);
}


.leaderboard-location {
    margin: 0;

    color: #4dcc7c;

    font-size: 12px;

    text-align: left;
}


.leaderboard h2 {
    margin: 10px 0 18px;

    padding-bottom: 12px;

    border-bottom: 1px solid #294334;

    color: #e0e7e3;

    font-size: 24px;

    letter-spacing: 2px;
}


/* ==============================
   SCORES
   ============================== */

.highscore-row {
    display: flex;

    justify-content: space-between;

    gap: 15px;

    padding: 12px 8px;

    border-bottom: 1px solid #1e3025;

    font-size: 14px;
}


/* nummer 1 */

.highscore-row:first-child {
    color: #ddc459;
}


/* nummer 2 */

.highscore-row:nth-child(2) {
    color: #b8c2bd;
}


/* nummer 3 */

.highscore-row:nth-child(3) {
    color: #c1855b;
}


/* nog geen scores */

.empty {
    padding: 20px 5px;

    color: #66736c;

    font-size: 14px;

    text-align: left;
}


/* ==============================
   LEADERBOARD RESET
   ============================== */

#resetLeaderboard {
    width: 100%;

    margin-top: 20px;

    padding: 10px;

    background-color: #151212;

    color: #c66b6b;

    border: 1px solid #583333;

    border-radius: 3px;

    font-family: "Courier New", monospace;

    cursor: pointer;
}


#resetLeaderboard:hover {
    background-color: #211515;

    border-color: #a84c4c;
}


/* ==============================
   DISABLED
   ============================== */

button:disabled {
    opacity: 0.4;

    cursor: not-allowed;
}


/* ==============================
   MOBIEL
   ============================== */

@media (max-width: 900px) {

    body {
        flex-direction: column;

        align-items: center;

        gap: 15px;
    }


    .game {
        width: 100%;
    }


    .leaderboard {
        width: 390px;

        max-width: 95%;

        margin-top: 20px;
    }
}


@media (max-width: 480px) {

    h1 {
        font-size: 37px;

        letter-spacing: 3px;
    }


    .info,
    .melding {
        width: 90%;
    }


    .simon {
        width: 315px;
        height: 315px;

        max-width: 90vw;
        max-height: 90vw;
    }
}