*, *::before, *::after { 
    box-sizing: border-box; 
}

body { 
    background: #020617; 
    color: #fff; 
    font-family: 'Inter', sans-serif; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    min-height: 100vh; 
    margin: 0; 
    overflow: hidden; 
    user-select: none; 
    cursor: crosshair; 
}

/* Navigation */
.back-home { 
    position: fixed; 
    top: 20px; 
    left: 24px; 
    font-size: 0.85rem; 
    color: #475569; 
    text-decoration: none; 
    transition: color 0.2s; 
    z-index: 10; 
    cursor: auto; 
}

.back-home:hover { 
    color: #fff; 
}

/* HUD */
.hud { 
    position: fixed; 
    top: 20px; 
    left: 50%; 
    transform: translateX(-50%); 
    z-index: 5; 
    display: flex; 
    gap: 20px; 
}

.hud-stat { 
    background: rgba(15,23,42,0.8); 
    border: 1px solid rgba(51,65,85,0.6); 
    border-radius: 12px; 
    padding: 8px 18px; 
    text-align: center; 
    backdrop-filter: blur(10px); 
}

.hud-val { 
    font-family: 'Syne', sans-serif; 
    font-size: 1.3rem; 
    font-weight: 900; 
    color: #f8fafc; 
}

.hud-label { 
    font-size: 0.65rem; 
    color: #475569; 
    text-transform: uppercase; 
    letter-spacing: 1.5px; 
}

/* Timer Bar */
.timer-bar-wrap { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    height: 4px; 
    z-index: 10; 
}

.timer-bar { 
    height: 100%; 
    background: #3b82f6; 
    transition: width 0.1s linear, background 0.3s; 
}

/* Target */
.target {
    position: fixed; 
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #f87171, #dc2626);
    border: 3px solid #991b1b;
    cursor: crosshair;
    transition: transform 0.08s ease;
    display: flex; 
    align-items: center; 
    justify-content: center;
}

.target::after { 
    content: ''; 
    width: 30%; 
    height: 30%; 
    background: rgba(255,255,255,0.3); 
    border-radius: 50%; 
}

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

/* Hit Flash & Miss Visuals */
.hit-flash { 
    position: fixed; 
    inset: 0; 
    background: rgba(255,255,255,0.05); 
    pointer-events: none; 
    opacity: 0; 
    transition: opacity 0.1s; 
    z-index: 20; 
}

.hit-flash.show { 
    opacity: 1; 
}

.miss-dot { 
    position: fixed; 
    width: 8px; 
    height: 8px; 
    border-radius: 50%; 
    background: rgba(239,68,68,0.4); 
    pointer-events: none; 
    transform: translate(-50%,-50%); 
    animation: missFade 0.5s ease forwards; 
    z-index: 15; 
}

@keyframes missFade { 
    to { 
        opacity: 0; 
        transform: translate(-50%,-50%) scale(2); 
    } 
}

/* Overlays */
.overlay { 
    position: fixed; 
    inset: 0; 
    background: rgba(2,6,23,0.92); 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    z-index: 50; 
    backdrop-filter: blur(8px); 
    opacity: 0; 
    pointer-events: none; 
    transition: opacity 0.3s; 
    cursor: auto; 
}

.overlay.show { 
    opacity: 1; 
    pointer-events: all; 
}

.ov-emoji { 
    font-size: 3.5rem; 
    margin-bottom: 12px; 
}

.ov-title { 
    font-family: 'Syne', sans-serif; 
    font-size: clamp(2rem,8vw,3rem); 
    font-weight: 900; 
    margin: 0 0 8px; 
}

.ov-desc {
    color: #64748b;
    font-size: 0.95rem;
    margin-bottom: 24px;
}

.ov-stats { 
    display: flex; 
    gap: 24px; 
    margin-bottom: 24px; 
}

.ov-stat { 
    text-align: center; 
}

.ov-stat-val { 
    font-family: 'Syne', sans-serif; 
    font-size: 1.6rem; 
    font-weight: 900; 
    color: #60a5fa; 
}

.ov-stat-label { 
    font-size: 0.72rem; 
    color: #475569; 
    text-transform: uppercase; 
    letter-spacing: 1.5px; 
}

.ov-btn { 
    padding: 13px 36px; 
    background: rgba(37,99,235,0.3); 
    border: 1.5px solid rgba(96,165,250,0.45); 
    border-radius: 999px; 
    color: #fff; 
    font-family: 'Syne', sans-serif; 
    font-size: 1rem; 
    font-weight: 700; 
    cursor: pointer; 
}

.ov-btn:hover { 
    background: rgba(37,99,235,0.5); 
}