/*
 * =======================================================
 * GAME-SPECIFIC CSS: CLICK THE BEACH BALL
 * =======================================================
 */

/* General Styles for the Game Container (Play Area) */
.game-container {
    /* CRITICAL: Must be relative for absolute positioning of the ball */
    position: relative;
    /* Define a large play area height */
    height: 350px;
    overflow: hidden; /* Keep the ball inside the boundaries */
    user-select: none; /* Prevent selection of elements during play */
    cursor: crosshair; /* Hint that this is an interactive area */
}

/* Styles for the moving beach ball target */
#beach-ball {
    width: 60px;
    height: 60px;
    cursor: pointer;
    border-radius: 50%; /* Makes the placeholder look like a ball */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    
    /* --- FIX: position must be relative or absolute for positioning, and relative for ::after to work. */
    position: relative;
    
    /* Positioning for movement (starts hidden off-screen) */
    top: -100px;
    left: -100px;
    visibility: hidden; /* Initially hide the ball (JS will control this) */

    /* Smooth movement transition */
    transition: all 0.2s ease-out;
    z-index: 11; /* Set high z-index to be above the click area */
}

/* NEW: The Invisible Clickable Target Area (MUST be a separate block) */
#beach-ball::after {
    content: ''; /* Required for pseudo-elements */
    position: absolute;
    
    /* This defines the larger clickable area */
    /* It extends 20 pixels beyond the visual edge of the 60x60 ball */
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    
    /* Ensure the target uses the same cursor */
    cursor: pointer; 
    
    /* CRITICAL: Must be below the ball layer (11) but still on top of the game container */
    z-index: 10;
}

/* 1. New Control Panel Layout */
.game-controls {
    /* Use flexbox to put items side-by-side */
    display: flex;
    justify-content: space-around; /* Distribute space evenly between items */
    align-items: center;
    padding: 10px 0;
    margin: 10px 0 2px 0; /* Space above and below controls */
    border-bottom: 1px solid var(--border-color);
}

/* 2. Styles for the Score and Timer displays (now using .control-item) */
.control-item {
    font-size: 1.2rem;
    font-weight: bold;
    padding: 5px 15px;
    background-color: var(--button-hover); /* Give them a subtle background */
    border-radius: 5px;
    min-width: 120px; /* Ensure they have a minimum width */
    text-align: center;
}

/* Start Button Styles */
/* 3. Start Button Styles */
#start-button {
    padding: 10px 20px;
    font-size: 1.1rem;
    background-color: var(--accent-color);
    color: var(--primary-light);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#start-button:hover {
    background-color: #2980b9; /* Slightly darker accent */
}

/* Disabled state */
#start-button:disabled {
    background-color: #95a5a6; /* Grayed out when game is active */
    cursor: not-allowed;
}

/* Dark Theme Adjustments for Game Elements */
body.dark-theme .game-container {
    background-color: var(--dark-card);
}

/* Dark Theme Adjustments for Control Panel */
body.dark-theme .game-controls {
    border-bottom-color: var(--dark-border);
}

body.dark-theme .control-item {
    background-color: var(--dark-secondary);
}