/* ==========================================================
   AIM ACCURACY TEST
========================================================== */

.aim-workspace{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:80vh;
    padding:40px 20px;
}

.aim-layout{
    width:100%;
    max-width:1150px;

    display:flex;
    flex-direction:column;
    gap:20px;
}


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

.aim-game-card{

    position:relative;

    background:#111;

    border-radius:18px;

    overflow:hidden;

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

    box-shadow:
        0 15px 40px rgba(0,0,0,.35);

}

.game-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 22px;

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

}

.game-status{

    font-size:14px;

    color:#999;

}



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

#gameArea{

    position:relative;

    width:100%;

    height:620px;

    overflow:hidden;

    cursor:crosshair;

    user-select:none;

    background:
        radial-gradient(circle at center,
        #181818,
        #0e0e0e);

}



/* subtle grid */

#gameArea::before{

    content:"";

    position:absolute;

    inset:0;

    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;

}


/* ==========================================================
   COUNTDOWN
========================================================== */

#countdownOverlay{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.55);

    backdrop-filter:blur(3px);

    z-index:50;

    opacity:0;

    visibility:hidden;

    transition:.3s;

}

#countdownOverlay.active{

    opacity:1;

    visibility:visible;

}

#countdownNumber{

    font-size:110px;

    font-weight:800;

    color:white;

    animation:pulse .8s infinite;

}


@keyframes pulse{

    0%{
        transform:scale(.7);
        opacity:.5;
    }

    100%{
        transform:scale(1.1);
        opacity:1;
    }

}


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

.target{

    position:absolute;

    width:60px;

    height:60px;

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

    animation:spawn .15s forwards;

    cursor:pointer;

    filter:
        drop-shadow(0 0 14px rgba(79,70,229,.4));

    transition:
        transform .08s,
        filter .15s;

    will-change: transform, left, top;

}

.target{

    animation:
        targetBreath 1.8s ease-in-out infinite;

}


.target:hover{

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

}


.target-outer{

    fill:#4f46e5;

}

.target-middle{

    fill:#7c73ff;

}

.target-inner{

    fill:#ffffff;

}



@keyframes spawn{

    from{

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

        opacity:0;

    }

    to{

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

        opacity:1;

    }

}



@keyframes hit{

    to{

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

        opacity:0;

    }

}



.target.hit{

    animation: targetDestroy .18s forwards;

}

@keyframes targetDestroy{

    0%{

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

        opacity:1;

    }

    60%{

        transform:
            translate(-50%, -50%)
            scale(.85);

    }

    100%{

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

        opacity:0;

    }

}

/* ==========================================================
   HIT EFFECT
========================================================== */

.hit-marker{

    position:absolute;

    width:18px;
    height:18px;

    border-radius:50%;

    border:2px solid white;

    pointer-events:none;

    transform:translate(-50%,-50%) scale(.2);

    opacity:1;

    animation:ripple .45s forwards;

}

@keyframes ripple{

    from{

        transform:
            translate(-50%,-50%)
            scale(.2);

        opacity:1;

    }

    to{

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

        opacity:0;

    }

}


@keyframes marker{

    from{

        opacity:1;

        transform:
            translate(-50%,-50%)
            scale(.2);

    }

    to{

        opacity:0;

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

    }

}



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

.stat-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:9px 0;

    border-bottom:1px solid rgba(255,255,255,.05);

}

.stat-row:last-child{

    border:none;

}

.stat-row span{

    color:#888;

}

.stat-row strong{

    font-size:17px;

    color:white;

}



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

.result-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:16px;

    margin-bottom:18px;

}

.result-grid div{

    background:#181818;

    border-radius:12px;

    padding:14px;

    text-align:center;

}

.result-grid span{

    display:block;

    color:#888;

    font-size:13px;

    margin-bottom:8px;

}

.result-grid strong{

    color:white;

    font-size:22px;

}



/* ==========================================================
   SETTINGS
========================================================== */

.control-box label{

    display:flex;

    flex-direction:column;

    gap:8px;

    margin-bottom:16px;

    font-size:14px;

    color:#aaa;

}

.control-box select{

    background:#1a1a1a;

    color:white;

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

    border-radius:10px;

    padding:11px;

    outline:none;

}

.control-box select:focus{

    border-color:#4f46e5;

}



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

#startBtn,
#restartBtn{

    width:100%;

    margin-top:8px;

}



/* ==========================================================
   BOTTOM GRID
========================================================== */

.aim-bottom-grid{

    display:grid;

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

    gap:18px;

}



/* ==========================================================
   SCORE POPUP
========================================================== */

.score-popup{

    position:absolute;

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

    color:#1db954;

    font-weight:700;

    pointer-events:none;

    animation:popup .7s forwards;

}


@keyframes popup{

    from{

        opacity:1;

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

    }

    to{

        opacity:0;

        transform:
            translate(-50%,-50%)
            translateY(-40px);

    }

}



/* ==========================================================
   GAME OVER FLASH
========================================================== */

.game-over{

    animation:flash .5s;

}


@keyframes flash{

    0%{

        box-shadow:
            0 0 0 rgba(255,255,255,0);

    }

    50%{

        box-shadow:
            0 0 50px rgba(79,70,229,.35);

    }

    100%{

        box-shadow:
            0 0 0 rgba(255,255,255,0);

    }

}



/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:900px){

    .aim-bottom-grid{

        grid-template-columns:1fr;

    }

    #gameArea{

        height:500px;

    }

}

@media (max-width:600px){

    #gameArea{

        height:420px;

    }

    #countdownNumber{

        font-size:72px;

    }

    .result-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================================================
   PARTICLES
========================================================== */

.particle{

    position:absolute;

    width:6px;
    height:6px;

    border-radius:50%;

    background:white;

    pointer-events:none;

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

    opacity:1;

    transition:
        transform .5s ease-out,
        opacity .5s ease-out;

}

#gameArea{

    cursor:none;

}

@keyframes targetBreath{

    0%{

        filter:brightness(1);

    }

    50%{

        filter:brightness(1.15);

    }

    100%{

        filter:brightness(1);

    }

}

.performance-grade{

    margin:22px 0;

    text-align:center;

}

#performanceGrade{

    font-size:58px;

    font-weight:900;

    line-height:1;

    color:#facc15;

    text-shadow:

        0 0 25px rgba(250,204,21,.35);

}

#performanceTitle{

    margin-top:6px;

    font-size:15px;

    color:#aaa;

    letter-spacing:1px;

    text-transform:uppercase;

}

.history-title{

    margin-top:22px;

    margin-bottom:12px;

    font-size:13px;

    color:#999;

    text-transform:uppercase;

    letter-spacing:1px;

}

.session-history{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.history-row{

    display:grid;

    grid-template-columns:

        1fr
        auto
        auto
        auto;

    gap:10px;

    align-items:center;

    padding:8px 10px;

    background:#181818;

    border-radius:10px;

    font-size:13px;

}

.history-row strong{

    color:#fff;

}

.history-empty{

    text-align:center;

    color:#666;

    padding:16px;

    font-size:13px;

}