/* RESET & BASE STYLES */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Fredoka', sans-serif;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    min-height: 100vh;
    overflow: hidden;
    cursor: default;
}

/* BACKGROUND STARS */
.background-stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.background-stars::before,
.background-stars::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    box-shadow: 
 100px 200px white,
 300px 100px white,
 500px 300px white,
 700px 150px white,
 900px 400px white,
 200px 500px white,
 600px 600px white,
 400px 350px white,
 800px 250px white,
 150px 450px white,
 650px 200px white,
 350px 550px white,
 750px 500px white,
 250px 150px white,
 550px 450px white,
 950px 350px white,
 120px 280px rgba(255, 255, 255, 0.6),
 420px 180px rgba(255, 255, 255, 0.6),
 680px 380px rgba(255, 255, 255, 0.6),
 880px 120px rgba(255, 255, 255, 0.6);
    animation: twinkle 3s infinite ease-in-out;
}

.background-stars::after {
    animation-delay: 1.5s;
    box-shadow: 
 150px 120px white,
 380px 280px white,
 580px 180px white,
 780px 380px white,
 920px 220px white,
 220px 420px white,
 520px 520px white,
 720px 320px white,
 180px 80px white,
 480px 480px white,
 620px 280px white,
 820px 580px white,
 280px 320px white,
 580px 120px white,
 780px 420px white,
 980px 180px rgba(255, 255, 255, 0.6),
 140px 480px rgba(255, 255, 255, 0.6),
 440px 220px rgba(255, 255, 255, 0.6),
 740px 480px rgba(255, 255, 255, 0.6);
}

@keyframes twinkle {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* UI CONTAINER */
.ui-container {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* HEADER */
header {
    text-align: center;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

h1 {
    color: #ffd700;
    font-size: 3rem;
    font-weight: 600;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    margin-bottom: 1rem;
    letter-spacing: 2px;
}

.stats-bar {
    display: flex;
    justify-content: center;
    gap: 3rem;
}

.stat-box {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 1rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-width: 120px;
}

.stat-box .label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stat-box .value {
    color: #ffd700;
    font-size: 2.5rem;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

/* GAME AREA */
#game-area {
    flex: 1;
    position: relative;
    cursor: crosshair;
}

/* TARGETS (STAR & EMOJIS) */
.target {
 position: absolute;
 width: 60px;
 height: 60px;
 cursor: pointer;
 transition: transform 0.1s ease;
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 50px;
 z-index: 10;
}

.target svg {
 width: 100%;
 height: 100%;
 color: #ffd700;
 filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.6));
}

.target:hover {
 transform: scale(1.2);
}

.target:hover svg {
 filter: drop-shadow(0 0 25px rgba(255, 215, 0, 0.9));
}

.target:active {
 transform: scale(0.9);
}

.target.hidden {
 display: none;
}

@keyframes float {
 0%, 100% { transform: translateY(0); }
 50% { transform: translateY(-10px); }
}

.target:not(.hidden) {
 animation: float 2s ease-in-out infinite;
}
    50% { transform: translateY(-10px); }
}

/* OVERLAY & MODAL */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    cursor: default;
}

.overlay.hidden {
    display: none;
}

.modal {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 30px;
    padding: 3rem;
    text-align: center;
    color: white;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    animation: modalAppear 0.3s ease-out;
}

@keyframes modalAppear {
    from {
 opacity: 0;
 transform: scale(0.8) translateY(20px);
    }
    to {
 opacity: 1;
 transform: scale(1) translateY(0);
    }
}

.modal h2 {
    font-size: 2.5rem;
    color: #ffd700;
    margin-bottom: 1rem;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

.modal p {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    opacity: 0.9;
}

.big-score {
    font-size: 5rem;
    color: #ffd700;
    font-weight: 600;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
    margin: 2rem 0;
    animation: scorePop 0.5s ease-out;
}

@keyframes scorePop {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* BUTTONS */
.btn-primary {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    color: #1a1a2e;
    border: none;
    border-radius: 50px;
    padding: 1rem 3rem;
    font-size: 1.3rem;
    font-weight: 600;
    font-family: 'Fredoka', sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.3);
    margin-top: 1.5rem;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(255, 215, 0, 0.5);
}

.btn-primary:active {
    transform: translateY(-1px);
    box-shadow: 0 5px 20px rgba(255, 215, 0, 0.3);
}

/* RESPONSIVE */
@media (max-width: 600px) {
    h1 {
 font-size: 2rem;
    }
    
    .stats-bar {
 gap: 1.5rem;
    }
    
    .stat-box {
 min-width: 100px;
 padding: 0.8rem 1.5rem;
    }
    
    .stat-box .value {
 font-size: 2rem;
    }
    
    .modal {
 padding: 2rem;
 margin: 1rem;
    }
    
    .big-score {
 font-size: 4rem;
    }
}