body {
    margin: 0;
    padding: 0;
    overflow: hidden; /* Don't allow scrolling */
    background-color: #000;
    /* Hide the default mouse cursor */
    cursor: none; 
}

#game-canvas {
    display: block;
    width: 100vw;
    height: 100vh;
}

/* The main overlay for the scope effect */
#scope-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Can click through it */

    /* --- REALISM UPDATES --- */
    border-radius: 50%;
    box-shadow: inset 0 0 25px 15px rgba(0,0,0,0.7), 
                0 0 0 100vmax rgba(0, 0, 0, 0.95);
    border: 3px solid #111; 
    filter: grayscale(100%) brightness(1.3) contrast(1.5) blur(0.4px);
}

/* --- SMALLER DUPLEX RETICLE --- */

/* These are the THIN center lines */
.crosshair-v, .crosshair-h {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #00ff00;
    box-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00;
    z-index: 10;
}

.crosshair-v {
    width: 2px;
    height: 40px; /* --- SMALLER --- */
}

.crosshair-h {
    width: 40px; /* --- SMALLER --- */
    height: 2px;
}

/* These pseudo-elements create the THICK outer lines */
.crosshair-v::before, .crosshair-v::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 5px; /* Thicker lines */
    height: 80px; /* Length of thick lines */
    background-color: #00ff00;
    opacity: 0.7;
    box-shadow: 0 0 5px #00ff00;
}

.crosshair-h::before, .crosshair-h::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 80px; /* Length of thick lines */
    height: 5px; /* Thicker lines */
    background-color: #00ff00;
    opacity: 0.7;
    box-shadow: 0 0 5px #00ff00;
}

/* Position the thick lines (20px gap from center) */
.crosshair-v::before { bottom: 20px; } /* --- SMALLER GAP --- */
.crosshair-v::after  { top: 20px; } 

.crosshair-h::before { right: 20px; } /* --- SMALLER GAP --- */
.crosshair-h::after  { left: 20px; }


/* --- NEW: UI STYLING --- */
#kill-count, #zoom-info {
    font-family: 'Courier New', Courier, monospace;
    color: #00ff00;
    font-size: 16px;
    font-weight: bold;
    text-shadow: 0 0 5px #00ff00;
    position: absolute;
}

#kill-count {
    top: 10%;
    right: 10%;
}

#zoom-info {
    bottom: 10%;
    left: 10%;
}