/* =========================================================
   REFLEX RUSH
   ========================================================= */

* {
    box-sizing: border-box;
}

.reflex-page {
    min-height: calc(100vh - 120px);
    padding: 32px 18px 55px;
    background: radial-gradient(circle at 15% 10%, rgba(0, 210, 255, .13), transparent 28%), radial-gradient(circle at 85% 65%, rgba(120, 75, 255, .13), transparent 32%), #070a13;
    color: #ffffff;
}

.reflex-container {
    width: min(100%, 920px);
    margin: 0 auto;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.reflex-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.back-button {
    display: inline-flex;
    align-items: center;
    padding: 10px 15px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    background: rgba(255,255,255,.045);
    color: #aeb6d1;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    transition: .2s ease;
}

    .back-button:hover {
        color: #ffffff;
        background: rgba(255,255,255,.09);
        transform: translateX(-2px);
    }

.sound-button {
    width: 43px;
    height: 43px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 13px;
    background: rgba(255,255,255,.05);
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
    transition: .2s ease;
}

    .sound-button:hover {
        background: rgba(255,255,255,.1);
        transform: translateY(-2px);
    }


/* =========================================================
   HEADING
   ========================================================= */

.reflex-heading {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 23px;
}

.reflex-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 20px;
    background: linear-gradient(135deg, #0bcfff, #6357ff);
    box-shadow: 0 18px 45px rgba(0,170,255,.22), inset 0 1px 0 rgba(255,255,255,.25);
    font-size: 31px;
}

.eyebrow {
    margin-bottom: 5px;
    color: #6edfff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.6px;
}

.reflex-heading h1 {
    margin: 0;
    font-size: clamp(29px, 5vw, 43px);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -1.2px;
}

.reflex-heading p {
    margin: 7px 0 0;
    color: #7f88a4;
    font-size: 14px;
}


/* =========================================================
   STATS
   ========================================================= */

.reflex-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.reflex-stat {
    padding: 13px 8px;
    text-align: center;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 15px;
    background: rgba(255,255,255,.045);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

    .reflex-stat span {
        display: block;
        margin-bottom: 3px;
        color: #6f7897;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 1.2px;
    }

    .reflex-stat strong {
        font-size: 22px;
        font-weight: 900;
    }

#timer {
    color: #55dfff;
}


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

.reflex-game-card {
    position: relative;
    padding: 24px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 26px;
    background: linear-gradient( 145deg, rgba(255,255,255,.075), rgba(255,255,255,.025) );
    box-shadow: 0 30px 90px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.035);
}

    .reflex-game-card::before {
        content: "";
        position: absolute;
        width: 450px;
        height: 450px;
        top: -360px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 50%;
        background: rgba(0,205,255,.08);
        filter: blur(55px);
        pointer-events: none;
    }


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

.game-status {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 14px;
}

.status-label {
    color: #64dcff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.game-status h2 {
    margin: 5px 0 0;
    font-size: 18px;
    font-weight: 800;
}

.reaction-display {
    min-width: 120px;
    padding: 9px 14px;
    text-align: center;
    border-radius: 14px;
    background: rgba(255,255,255,.045);
}

    .reaction-display span {
        display: block;
        color: #707995;
        font-size: 8px;
        font-weight: 900;
        letter-spacing: 1px;
    }

    .reaction-display strong {
        display: block;
        margin-top: 2px;
        color: #ffffff;
        font-size: 20px;
    }


/* =========================================================
   TIMER BAR
   ========================================================= */

.timer-track {
    position: relative;
    z-index: 2;
    height: 5px;
    margin-bottom: 18px;
    overflow: hidden;
    border-radius: 10px;
    background: rgba(255,255,255,.06);
}

.timer-progress {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #12d7ff, #675aff);
    transform-origin: left center;
    transition: width 1s linear;
}


/* =========================================================
   PLAY AREA
   ========================================================= */

.play-area {
    position: relative;
    z-index: 2;
    width: 100%;
    height: min(57vh, 520px);
    min-height: 360px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 20px;
    background: radial-gradient( circle at center, rgba(60,73,125,.16), transparent 50% ), #090c18;
    box-shadow: inset 0 0 80px rgba(0,0,0,.3);
}


    /* =========================================================
   GRID EFFECT
   ========================================================= */

    .play-area::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: .24;
        background-image: linear-gradient( rgba(255,255,255,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px );
        background-size: 40px 40px;
        pointer-events: none;
    }


/* =========================================================
   WAITING MESSAGE
   ========================================================= */

.waiting-message {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: min(90%, 360px);
    transform: translate(-50%, -50%);
    text-align: center;
}

.waiting-icon {
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    margin: 0 auto 15px;
    border: 1px solid rgba(72,215,255,.2);
    border-radius: 23px;
    background: rgba(0,190,255,.08);
    box-shadow: 0 0 40px rgba(0,200,255,.08);
    font-size: 35px;
    animation: idlePulse 2s ease-in-out infinite;
}

@keyframes idlePulse {

    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }
}

.waiting-message h3 {
    margin: 0;
    font-size: 23px;
    font-weight: 900;
}

.waiting-message p {
    margin: 8px 0 0;
    color: #747d99;
    font-size: 12px;
}


/* =========================================================
   TARGET
   ========================================================= */

.reaction-target {
    position: absolute;
    z-index: 10;
    width: 88px;
    height: 88px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    background: radial-gradient( circle, #ffffff 0 12%, #35f4a1 13% 31%, #0dcf85 32% 57%, rgba(0,205,130,.16) 58% 100% );
    box-shadow: 0 0 0 8px rgba(46,235,150,.08), 0 0 35px rgba(33,239,150,.65), 0 0 90px rgba(33,239,150,.28);
    transform: translate(-50%, -50%);
    animation: targetAppear .18s ease-out, targetPulse 1.1s ease-in-out infinite;
    -webkit-tap-highlight-color: transparent;
}

    .reaction-target::after {
        content: "";
        position: absolute;
        inset: -12px;
        border: 2px solid rgba(70,255,174,.2);
        border-radius: 50%;
        animation: targetRing 1.1s linear infinite;
    }

    .reaction-target:hover {
        filter: brightness(1.12);
    }

    .reaction-target:active {
        transform: translate(-50%, -50%) scale(.88);
    }

@keyframes targetAppear {

    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.2);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes targetPulse {

    0%, 100% {
        box-shadow: 0 0 0 8px rgba(46,235,150,.08), 0 0 35px rgba(33,239,150,.65), 0 0 90px rgba(33,239,150,.28);
    }

    50% {
        box-shadow: 0 0 0 12px rgba(46,235,150,.06), 0 0 50px rgba(33,239,150,.8), 0 0 110px rgba(33,239,150,.34);
    }
}

@keyframes targetRing {

    from {
        transform: scale(.8);
        opacity: .7;
    }

    to {
        transform: scale(1.4);
        opacity: 0;
    }
}


/* =========================================================
   FALSE TARGET
   ========================================================= */

.false-target {
    position: absolute;
    z-index: 10;
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    border: 2px solid rgba(255,76,111,.55);
    border-radius: 50%;
    background: rgba(255,55,90,.1);
    color: #ff5d7c;
    font-size: 32px;
    box-shadow: 0 0 45px rgba(255,60,100,.22);
}


/* =========================================================
   HIDDEN
   ========================================================= */

.hidden {
    display: none !important;
}


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

.game-hint {
    position: relative;
    z-index: 2;
    min-height: 22px;
    margin-top: 13px;
    color: #737c98;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
}


/* =========================================================
   OVERLAY
   ========================================================= */

.game-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(4,6,13,.84);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.overlay-card {
    width: min(100%, 470px);
    padding: 34px;
    text-align: center;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 27px;
    background: linear-gradient( 145deg, rgba(27,31,55,.98), rgba(11,14,28,.98) );
    box-shadow: 0 40px 100px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.07);
    animation: overlayIn .35s ease;
}

.small-overlay {
    max-width: 400px;
}

@keyframes overlayIn {

    from {
        opacity: 0;
        transform: translateY(18px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.overlay-icon,
.result-icon {
    width: 82px;
    height: 82px;
    display: grid;
    place-items: center;
    margin: 0 auto 18px;
    border-radius: 25px;
    background: linear-gradient(135deg, #0acfff, #6656ff);
    box-shadow: 0 20px 55px rgba(0,180,255,.22), inset 0 1px 0 rgba(255,255,255,.2);
    font-size: 38px;
}

.result-icon {
    background: linear-gradient(135deg, #20ca89, #38e0a1);
}

    .result-icon.danger {
        background: linear-gradient(135deg, #ff4e72, #ff795e);
    }

.overlay-label {
    margin-bottom: 7px;
    color: #65ddff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
}

.overlay-card h2 {
    margin: 0;
    font-size: 32px;
    font-weight: 900;
    letter-spacing: -.8px;
}

.overlay-card > p {
    max-width: 360px;
    margin: 10px auto 25px;
    color: #858da7;
    font-size: 13px;
    line-height: 1.6;
}


/* =========================================================
   RULES
   ========================================================= */

.rules {
    display: grid;
    gap: 8px;
    margin-bottom: 24px;
    text-align: left;
}

.rule {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 14px;
    background: rgba(255,255,255,.035);
}

    .rule > span {
        width: 37px;
        height: 37px;
        display: grid;
        place-items: center;
        flex-shrink: 0;
        border-radius: 11px;
        background: rgba(0,205,255,.08);
        font-size: 18px;
    }

    .rule strong {
        display: block;
        font-size: 12px;
    }

    .rule small {
        display: block;
        margin-top: 2px;
        color: #737b98;
        font-size: 10px;
    }


/* =========================================================
   BUTTON
   ========================================================= */

.start-button {
    width: 100%;
    min-height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, #08cfff, #6557ff);
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .8px;
    cursor: pointer;
    box-shadow: 0 15px 40px rgba(0,160,255,.22);
    transition: .2s ease;
}

    .start-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 20px 50px rgba(0,160,255,.34);
    }

    .start-button:active {
        transform: scale(.97);
    }


/* =========================================================
   PENALTY
   ========================================================= */

.penalty-box {
    margin: 20px 0;
    padding: 17px;
    border: 1px solid rgba(255,80,110,.12);
    border-radius: 16px;
    background: rgba(255,60,90,.055);
}

    .penalty-box span {
        display: block;
        color: #777f99;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 1.4px;
    }

    .penalty-box strong {
        display: block;
        margin-top: 5px;
        color: #ff6b85;
        font-size: 22px;
    }


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

.final-score {
    margin: 20px 0 13px;
    padding: 17px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 17px;
    background: rgba(255,255,255,.045);
}

    .final-score span {
        display: block;
        color: #777f9b;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 1.4px;
    }

    .final-score strong {
        display: block;
        margin-top: 4px;
        font-size: 45px;
        font-weight: 900;
    }

.result-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-bottom: 18px;
}

    .result-stats div {
        padding: 12px;
        border-radius: 14px;
        background: rgba(255,255,255,.04);
    }

    .result-stats span {
        display: block;
        color: #737b97;
        font-size: 8px;
        font-weight: 900;
        letter-spacing: 1px;
    }

    .result-stats strong {
        display: block;
        margin-top: 4px;
        font-size: 18px;
    }

.games-link {
    display: inline-block;
    margin-top: 18px;
    color: #69dcff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
}

    .games-link:hover {
        color: #ffffff;
    }


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

@media (max-width: 700px) {

    .reflex-page {
        min-height: calc(100vh - 80px);
        padding: 20px 10px 35px;
    }

    .reflex-heading {
        gap: 11px;
        margin-bottom: 17px;
    }

    .reflex-icon {
        width: 50px;
        height: 50px;
        border-radius: 15px;
        font-size: 24px;
    }

    .reflex-heading h1 {
        font-size: 28px;
    }

    .reflex-heading p {
        margin-top: 5px;
        font-size: 11px;
    }

    .reflex-stats {
        gap: 6px;
    }

    .reflex-stat {
        padding: 9px 4px;
        border-radius: 12px;
    }

        .reflex-stat span {
            font-size: 8px;
        }

        .reflex-stat strong {
            font-size: 18px;
        }

    .reflex-game-card {
        padding: 13px;
        border-radius: 20px;
    }

    .game-status {
        gap: 8px;
    }

        .game-status h2 {
            font-size: 14px;
        }

    .reaction-display {
        min-width: 90px;
        padding: 7px 9px;
    }

        .reaction-display strong {
            font-size: 17px;
        }

    .play-area {
        height: 55vh;
        min-height: 350px;
        border-radius: 16px;
    }

    .reaction-target {
        width: 72px;
        height: 72px;
    }

    .false-target {
        width: 76px;
        height: 76px;
    }

    .waiting-icon {
        width: 64px;
        height: 64px;
        font-size: 29px;
    }

    .overlay-card {
        padding: 25px 18px;
        border-radius: 23px;
    }

    .overlay-icon,
    .result-icon {
        width: 68px;
        height: 68px;
        border-radius: 20px;
        font-size: 31px;
    }

    .overlay-card h2 {
        font-size: 27px;
    }
}


@media (max-width: 400px) {

    .reflex-page {
        padding-left: 7px;
        padding-right: 7px;
    }

    .reflex-game-card {
        padding: 10px;
    }

    .play-area {
        min-height: 320px;
    }

    .reaction-target {
        width: 65px;
        height: 65px;
    }

    .game-status h2 {
        font-size: 12px;
    }

    .reaction-display {
        min-width: 76px;
    }

        .reaction-display span {
            font-size: 7px;
        }

        .reaction-display strong {
            font-size: 15px;
        }
}