/* =========================================================
   REACTION LIGHTS
   ========================================================= */

.reaction-lights-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-lights-intro {

    max-width: 800px;

    margin-bottom: 42px;
}


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

.reaction-lights-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-lights-status {

    min-height: 30px;

    margin-bottom: 20px;

    text-align: center;

    font-weight: 700;

    color: #fff;
}


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

.reaction-lights-area {

    position: relative;

    width: 100%;

    aspect-ratio: 1.7 / 1;

    min-height: 390px;

    border: 0;

    border-radius: 20px;

    background: #090b10;

    color: #fff;

    cursor: pointer;

    overflow: hidden;

    touch-action: manipulation;

    user-select: none;

    -webkit-user-select: none;

    outline: none;

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


.reaction-lights-area:hover {

    background: #0c0f15;
}


.reaction-lights-area:active {

    transform: scale(.995);
}


/* =========================================================
   BOARD INNER BORDER
   ========================================================= */

.reaction-lights-area::before {

    content: "";

    position: absolute;

    inset: 10px;

    border-radius: 14px;

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

    pointer-events: none;
}


/* =========================================================
   REACTION LIGHTS
   ========================================================= */

.reaction-target {

    position: absolute;

    width: 62px;

    height: 62px;

    padding: 0;

    border-radius: 50%;

    border: 4px solid #352329;

    background: #21171a;

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

            0 3px 8px
            rgba(0, 0, 0, .35);

    transform:
            translate(-50%, -50%);

    cursor: pointer;

    touch-action: manipulation;

    -webkit-tap-highlight-color:
            transparent;

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


/*
 * Invisible extra touch area.
 */

.reaction-target::after {

    content: "";

    position: absolute;

    inset: -10px;

    border-radius: 50%;
}


/* =========================================================
   LIGHT POSITIONS - 7 LIGHTS
   ========================================================= */


/*
 * TOP
 *
 *       ●                 ●
 */

.reaction-target-1 {

    left: 25%;

    top: 25%;
}


.reaction-target-2 {

    left: 75%;

    top: 25%;
}


/*
 * MIDDLE
 *
 * ●          ●          ●
 */

.reaction-target-3 {

    left: 12%;

    top: 50%;
}


.reaction-target-4 {

    left: 50%;

    top: 50%;
}


.reaction-target-5 {

    left: 88%;

    top: 50%;
}


/*
 * BOTTOM
 *
 *       ●                 ●
 */

.reaction-target-6 {

    left: 25%;

    top: 75%;
}


.reaction-target-7 {

    left: 75%;

    top: 75%;
}


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

.reaction-target.is-active {

    background:
            radial-gradient(
                    circle at 35% 30%,
                    #ff7770 0%,
                    #e10600 35%,
                    #a40000 75%,
                    #5e0000 100%
            );

    border-color: #ff4139;

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

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

            0 0 60px
            rgba(225, 6, 0, .25),

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

    transform:
            translate(-50%, -50%)
            scale(1.06);
}


/* =========================================================
   HIT LIGHT
   ========================================================= */

.reaction-target.is-hit {

    background:
            radial-gradient(
                    circle,
                    #353a42,
                    #15181d
            );

    border-color: #59616a;

    box-shadow:
            inset 0 0 12px
            rgba(255, 255, 255, .08);
}


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

.reaction-lights-message {

    position: absolute;

    left: 50%;

    top: 50%;

    transform:
            translate(-50%, -50%);

    /*
     * IMPORTANT:
     * The message itself receives pointer events.
     * This fixes tapping START directly on mobile.
     */

    pointer-events: auto;

    cursor: pointer;

    color: #fff;

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

    font-weight: 800;

    line-height: 1;

    letter-spacing: .02em;

    text-align: center;

    text-shadow:
            0 2px 10px
            rgba(0, 0, 0, .65);

    -webkit-tap-highlight-color:
            transparent;
}


/*
 * During active play there is no center text.
 */

.reaction-lights-area.is-playing
.reaction-lights-message {

    opacity: 0;

    pointer-events: none;

    cursor: default;
}


/* =========================================================
   RETRY
   ========================================================= */

.reaction-lights-retry {

    position: absolute;

    left: 50%;

    top: calc(50% + 42px);

    transform:
            translateX(-50%);

    pointer-events: none;

    color: #9ca3af;

    font-size: .95rem;

    font-weight: 600;

    letter-spacing: .03em;

    white-space: nowrap;
}


.reaction-lights-retry[hidden] {

    display: none;
}


/* =========================================================
   ERROR
   ========================================================= */

.reaction-lights-area.is-error {

    background: #3b1111;

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

    animation:
            reactionLightsError .16s ease;
}


@keyframes reactionLightsError {

    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    50% {
        transform: translateX(5px);
    }

    75% {
        transform: translateX(-3px);
    }

    100% {
        transform: translateX(0);
    }

}


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

.reaction-lights-area.is-result {

    background: #090b10;
}


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

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

    background: #123d1c;

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


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

    color: #6cff88;
}


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

    color: #6cff88;
}


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

.reaction-lights-results {

    display: grid;

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

    gap: 14px;

    margin-top: 24px;
}


.reaction-lights-stat {

    padding: 18px;

    text-align: center;

    border-radius: 14px;

    background: #0f1117;

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


.reaction-lights-stat-label {

    display: block;

    margin-bottom: 5px;

    color: #9ca3af;

    font-size: .85rem;

    text-transform: uppercase;

    letter-spacing: .08em;
}


.reaction-lights-stat strong {

    font-size: 1.35rem;

    line-height: 1.2;
}


/* =========================================================
   SPLITS
   ========================================================= */

.reaction-lights-splits {

    margin-top: 18px;

    padding: 18px;

    border-radius: 14px;

    background: #0f1117;

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


.reaction-lights-splits[hidden] {

    display: none;
}


.reaction-lights-splits-title {

    margin-bottom: 12px;

    color: #d1d5db;

    font-size: .85rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .08em;
}


.reaction-lights-splits-grid {

    display: grid;

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

    gap: 8px;
}


.reaction-lights-split {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 8px;

    padding: 8px 10px;

    border-radius: 8px;

    background: #171b27;
}


.reaction-lights-split-number {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 24px;

    height: 24px;

    flex: 0 0 24px;

    border-radius: 50%;

    background: #2a2f38;

    color: #d1d5db;

    font-size: .75rem;
}


.reaction-lights-split strong {

    color: #fff;

    font-size: .85rem;
}


/* =========================================================
   RESULT MESSAGE
   ========================================================= */

.reaction-lights-result {

    margin-top: 18px;

    text-align: center;

    color: #9ca3af;

    font-size: .95rem;

    font-weight: 600;
}


.reaction-lights-result[hidden] {

    display: none;
}


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

.reaction-lights-howto {

    max-width: 760px;

    margin-top: 42px;

    padding: 28px 32px;

    border-radius: 18px;

    background: #171b27;

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


.reaction-lights-howto ol {

    margin-bottom: 16px;

    padding-left: 1.3rem;

    color: #d1d5db;
}


.reaction-lights-howto li {

    margin-bottom: .55rem;
}


.reaction-lights-howto li:last-child {

    margin-bottom: 0;
}


/* =========================================================
   MAIN REACTION LINK
   ========================================================= */

.reaction-lights-main-link {

    margin-top: 28px;
}


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

@media (max-width: 575px) {

    .reaction-lights-hero {

        padding: 45px 0 65px;
    }


    .reaction-lights-intro {

        margin-bottom: 30px;
    }


    .reaction-lights-game-card {

        padding: 18px;

        border-radius: 18px;
    }


    /*
     * Portrait board.
     */

    .reaction-lights-area {

        aspect-ratio: .78 / 1;

        min-height: 460px;

        border-radius: 18px;
    }


    /*
     * Keep targets large enough for touch.
     */

    .reaction-target {

        width: 56px;

        height: 56px;

        border-width: 3px;
    }


    /*
     * Portrait positions:
     *
     *       ●                 ●
     *
     *   ●        ●        ●
     *
     *       ●                 ●
     */

    .reaction-target-1 {

        left: 27%;

        top: 20%;
    }


    .reaction-target-2 {

        left: 73%;

        top: 20%;
    }


    .reaction-target-3 {

        left: 10%;

        top: 50%;
    }


    .reaction-target-4 {

        left: 50%;

        top: 50%;
    }


    .reaction-target-5 {

        left: 90%;

        top: 50%;
    }


    .reaction-target-6 {

        left: 27%;

        top: 80%;
    }


    .reaction-target-7 {

        left: 73%;

        top: 80%;
    }


    /*
     * Make START easy to tap on a phone.
     */

    .reaction-lights-message {

        min-width: 130px;

        min-height: 60px;

        display: flex;

        align-items: center;

        justify-content: center;
    }


    .reaction-lights-results {

        gap: 8px;

        margin-top: 18px;
    }


    .reaction-lights-stat {

        padding: 15px 7px;
    }


    .reaction-lights-stat-label {

        font-size: .72rem;
    }


    .reaction-lights-stat strong {

        font-size: 1.05rem;
    }


    .reaction-lights-splits {

        padding: 15px;
    }


    .reaction-lights-splits-grid {

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


    .reaction-lights-howto {

        margin-top: 30px;

        padding: 24px 20px;
    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 360px) {

    .reaction-lights-area {

        min-height: 430px;
    }


    .reaction-target {

        width: 51px;

        height: 51px;
    }


    .reaction-lights-message {

        min-width: 115px;

        min-height: 55px;
    }


    .reaction-lights-stat {

        padding: 13px 4px;
    }


    .reaction-lights-stat strong {

        font-size: .9rem;
    }

}