/* =========================================================
   REACTION TEST
   ========================================================= */

.reaction-hero {

    padding: 70px 0 90px;

    min-height: calc(100vh - 80px);

    background:
            radial-gradient(
                    circle at 50% 15%,
                    rgba(225, 6, 0, .12),
                    transparent 35%
            ),
            #0f1117;
}


/* =========================================================
   INTRO
   ========================================================= */

.reaction-intro {

    max-width: 800px;

    margin-bottom: 42px;
}


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

.reaction-game-card {

    max-width: 760px;

    padding: 34px;

    border-radius: 24px;

    background: #171b27;

    border: 1px solid
    rgba(255, 255, 255, .08);

    box-shadow:
            0 20px 60px
            rgba(0, 0, 0, .35);
}


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

.reaction-status {

    min-height: 30px;

    margin-bottom: 20px;

    text-align: center;

    font-weight: 700;

    color: #fff;
}


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

.reaction-area {

    width: 100%;

    min-height: 300px;

    padding: 40px 20px;

    border: 0;

    border-radius: 20px;

    background: #090b10;

    color: #fff;

    cursor: pointer;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 38px;

    touch-action: manipulation;

    user-select: none;

    -webkit-user-select: none;

    transition:
            background .15s ease,
            box-shadow .15s ease,
            transform .08s ease;
}


.reaction-area:hover {

    background: #0c0f15;
}


.reaction-area:active {

    transform: scale(.995);
}


/* =========================================================
   READY STATE
   ========================================================= */

.reaction-area.is-ready {

    background: #090b10;

    box-shadow: none;
}


/* =========================================================
   FALSE START STATE
   ========================================================= */

.reaction-area.is-false-start {

    background: #3b1111;

    box-shadow:
            inset 0 0 70px
            rgba(225, 6, 0, .15);
}


/* =========================================================
   RESULT STATE
   ========================================================= */

.reaction-area.is-result {

    background: #090b10;
}


/* =========================================================
   STARTING LIGHTS CONTAINER
   ========================================================= */

.starting-lights {

    display: flex;

    justify-content: center;

    gap: 14px;

    padding: 20px 26px;

    border-radius: 20px;

    background: #171b27;

    box-shadow:
            inset 0 0 0 1px
            rgba(255, 255, 255, .06);
}


/* =========================================================
   INDIVIDUAL LIGHT
   ========================================================= */

.starting-light {

    width: 54px;

    height: 54px;

    flex: 0 0 54px;

    border-radius: 50%;

    background: #21171a;

    border: 3px solid #352329;

    box-shadow:
            inset 0 0 15px
            rgba(0, 0, 0, .7);

    transition:
            background .08s ease,
            border-color .08s ease,
            box-shadow .08s ease;
}


/* =========================================================
   ACTIVE RED LIGHT
   ========================================================= */

.starting-light.is-on {

    background: #e10600;

    border-color: #ff4139;

    box-shadow:
            0 0 14px
            rgba(225, 6, 0, .95),

            0 0 35px
            rgba(225, 6, 0, .55),

            inset 0 0 12px
            rgba(255, 255, 255, .2);
}


/* =========================================================
   MAIN MESSAGE
   ========================================================= */

.reaction-message {

    font-size:
            clamp(1.7rem, 5vw, 3rem);

    font-weight: 800;

    line-height: 1;

    letter-spacing: .02em;

    text-align: center;
}


.reaction-area.is-ready
.reaction-message {

    color: #6cff88;
}


.reaction-area.is-false-start
.reaction-message {

    color: #ff6b63;
}


.reaction-area.is-result
.reaction-message {

    color: #fff;
}


/* =========================================================
   RESULTS
   ========================================================= */

.reaction-results {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    /*
     * Important:
     * the results must not touch the game area.
     */
    margin-top: 24px;
}


.reaction-stat {

    padding: 18px;

    text-align: center;

    border-radius: 14px;

    background: #0f1117;

    border: 1px solid
    rgba(255, 255, 255, .06);
}


.reaction-stat-label {

    display: block;

    margin-bottom: 5px;

    color: #9ca3af;

    font-size: .85rem;

    text-transform: uppercase;

    letter-spacing: .08em;
}


.reaction-stat strong {

    font-size: 1.5rem;

    line-height: 1.2;
}


/* =========================================================
   FALSE START MESSAGE
   ========================================================= */

.reaction-false-start {

    margin-top: 18px;

    padding: 12px 16px;

    border-radius: 10px;

    text-align: center;

    color: #ffb4b0;

    background:
            rgba(225, 6, 0, .12);

    border: 1px solid
    rgba(225, 6, 0, .25);
}


/* =========================================================
   HOW TO PLAY
   ========================================================= */

.reaction-howto {

    max-width: 760px;

    margin-top: 42px;

    padding: 28px 32px;

    border-radius: 18px;

    background: #171b27;

    border: 1px solid
    rgba(255, 255, 255, .06);
}


.reaction-howto ol {

    margin-bottom: 16px;

    padding-left: 1.3rem;

    color: #d1d5db;
}


.reaction-howto li {

    margin-bottom: .55rem;
}


.reaction-howto li:last-child {

    margin-bottom: 0;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575px) {

    .reaction-hero {

        padding: 45px 0 65px;
    }


    .reaction-intro {

        margin-bottom: 30px;
    }


    .reaction-game-card {

        padding: 18px;

        border-radius: 18px;
    }


    .reaction-area {

        min-height: 260px;

        padding: 25px 10px;

        gap: 30px;
    }


    .starting-lights {

        gap: 7px;

        padding: 15px 12px;
    }


    .starting-light {

        width: 43px;

        height: 43px;

        flex-basis: 43px;
    }


    .reaction-results {

        gap: 10px;

        margin-top: 18px;
    }


    .reaction-stat {

        padding: 15px 10px;
    }


    .reaction-stat strong {

        font-size: 1.25rem;
    }


    .reaction-howto {

        margin-top: 30px;

        padding: 24px 20px;
    }

}


.reaction-retry {
    margin-top: -22px;

    color: #9ca3af;

    font-size: .95rem;

    font-weight: 600;

    letter-spacing: .03em;
}

.reaction-retry[hidden] {
    display: none;
}

/* =========================================================
   NEW PERSONAL BEST
   ========================================================= */

.reaction-area.is-new-best {

    background: #123d1c;

    box-shadow:
            inset 0 0 70px
            rgba(40, 200, 80, .18);
}


.reaction-area.is-new-best
.reaction-message {

    color: #6cff88;
}


.reaction-area.is-new-best
.reaction-retry {

    color: #6cff88;
}