body {
    /* Base body styles from base.html template are assumed */
    /* Add any game-specific overrides or additions here */
    font-family: 'Press Start 2P', cursive; /* Ensure pixel font */
    
}

/* Ensure game container takes space and centers content */
#game-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Center canvas vertically if needed */
    position: relative; /* Crucial for positioning UI elements */
}

/* Canvas styling */
#gameCanvas {
    background-color: #1a2035; /* Darker blue game area */
    display: block;
    border: 4px solid #4a5a7e; /* Border color */
    border-radius: 8px; /* Rounded corners for canvas */
    image-rendering: pixelated; /* Crisp pixels */
    width: 100%;
    height: auto;
    max-width: 900px; /* Limit max width */
    aspect-ratio: 16 / 9; /* Maintain aspect ratio */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); /* Subtle shadow */
    cursor: crosshair; /* Indicate interactable canvas */
}

/* UI element positioning */
.ui-element {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 8px 12px;
    border-radius: 6px; /* Rounded corners */
    font-size: 0.8rem;
    color: #e2e8f0; /* Lighter text color */
    text-shadow: 1px 1px #000;
    pointer-events: none; /* Prevent UI elements blocking clicks */
}
#score-display { top: 10px; right: 10px; }
#lives-display { top: 10px; left: 10px; }
#wave-display {
     top: 10px;
     left: 150px; /* Adjust position */
     color: #f87171; /* Red color */
 }
#wpm-display {
    top: 40px; /* Position below wave */
    left: 50%;
    transform: translateX(-50%);
    color: #a7f3d0; /* Mint green */
    white-space: nowrap; /* Prevent wrapping */
 }
 #accuracy-display {
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
     color: #e0e7ff; /* Light lavender */
     white-space: nowrap; /* Prevent wrapping */
 }

/* Typing bar container styles */
#word-display-container {
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.7);
    border: 2px solid #4a5a7e;
    border-radius: 6px;
    padding: 8px;
    pointer-events: none; /* UPDATE: Prevent this from blocking clicks */
}
/* Target word/paragraph display */
#target-word-display {
    font-size: 1.2rem;
    color: #fde047; /* Yellow */
    margin-bottom: 5px;
    min-height: 1.5em; /* Ensure space even when empty */
    text-align: center;
    word-break: break-all; /* Allow long words to wrap */
}
/* Current user input display */
#current-input-display {
    font-size: 1.2rem;
    color: #93c5fd; /* Light blue */
    min-height: 1.5em; /* Ensure space even when empty */
    text-align: center;
    border-top: 1px dashed #4a5a7e;
    padding-top: 5px;
    width: 100%;
     word-break: break-all; /* Allow long words to wrap */
}

/* Overlay styles */
.overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.85); /* Slightly more opaque */
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1.5rem; /* Adjusted base size */
    border-radius: 8px; /* Match canvas */
    z-index: 10; /* Ensure overlay is on top */
    padding: 20px; /* Add padding */
}
.overlay div:first-child { /* Style the main title */
     font-size: 2rem; /* Larger title */
     margin-bottom: 15px;
     color: #fde047; /* Yellow title */
}
.overlay p {
    font-size: 0.8rem; /* Smaller paragraph text */
    margin-top: 15px;
    line-height: 1.6;
    max-width: 80%;
}
 .overlay .quote { /* Specific style for quotes */
     font-size: 1rem;
     font-style: italic;
     color: #a7f3d0; /* Mint green */
     margin-top: 20px;
     margin-bottom: 10px;
     max-width: 70%;
 }
 .overlay .author {
     font-size: 0.7rem;
     color: #9ca3af; /* Gray */
     margin-bottom: 25px;
 }
.overlay button {
    /* Inherits .btn styles from base template */
    font-family: 'Press Start 2P', cursive;
    margin-top: 20px;
}

/* Style for text comparison within the typing bar */
.correct-char { color: #4ade80; } /* Green */
.incorrect-char { color: #f87171; text-decoration: line-through; } /* Red with strike */

/* Error flash for incorrect key press */
#current-input-display.error-flash {
    animation: flash-red 0.1s linear;
}
@keyframes flash-red {
    0%, 100% { color: #93c5fd; } /* Original blue */
    50% { color: #f87171; } /* Flash red */
}

/* Utility class */
.hidden { display: none !important; }

/* Styles from base.html that might be needed if base.html changes */
/* (e.g., game control buttons, fullscreen modal) */
.game-control-btn {
    position: absolute;
    background: #161b22;
    border: 3px solid #30363d;
    border-radius: 8px;
    height: 40px;
    padding: 0 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    z-index: 5; /* Below overlays but above canvas */
    color: #c9d1d9;
    font-size: 0.7rem;
    text-transform: uppercase;
    text-shadow: 1px 1px #000;
    line-height: 1;
    text-decoration: none;
    font-family: 'Press Start 2P', cursive; /* Ensure font */
}
.game-control-btn:hover {
    background: #30363d;
}

.custom-modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000; /* Ensure it's on top */
}
.custom-modal-content {
    background-color: #161b22;
    border: 4px solid #30363d;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    max-width: 90%;
    width: 400px;
}
.custom-modal-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}
.custom-modal-buttons .btn { /* Ensure buttons inside modal use pixel font */
     font-family: 'Press Start 2P', cursive;
}


/* --- Mobile / Small Screen Optimizations --- */
@media (max-width: 768px) {
    #game-container {
        padding: 5px;
        margin-top: 0;
        justify-content: center; /* Center vertically on phone */
    }

    #gameCanvas {
        border-width: 2px;
    }

    /* Shrink HUD elements */
    .ui-element {
        padding: 4px 8px;
        font-size: 0.6rem;
        background-color: rgba(0, 0, 0, 0.7);
    }

    #score-display { top: 10px; right: 10px; }
    #lives-display { top: 10px; left: 10px; }
    #wave-display { top: 10px; font-size: 0.65rem; }
    
    #wpm-display {
        top: 35px; /* Tighter spacing */
        font-size: 0.55rem;
    }
    
    #accuracy-display {
        top: 55px; /* Tighter spacing */
        font-size: 0.55rem;
    }
    
    #powerup-display {
        top: 60px;
    }

    /* Enhance Typing Area for Small Screens */
    #word-display-container {
        margin-top: 10px;
        padding: 10px;
        border-width: 1px;

        /* Reset absolute positioning from .ui-element class */
        position: relative !important; 
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;

        /* Flex Item Styling */
        width: 100%;
        max-width: 700px; /* Match canvas max-width */
        
    
    }

    #target-word-display {
        font-size: 1rem; /* Smaller text to fit long words */
        margin-bottom: 4px;
    }

    #current-input-display {
        font-size: 1.1rem;
        padding-top: 4px;
    }
    
    /* Hide non-essential controls text on mobile to save space */
    #controls-display {
        display: none;
    }

    /* Adjust Overlay Text */
    .overlay h2 { font-size: 1.2rem; }
    .overlay p { font-size: 0.7rem; }
    .overlay .btn { padding: 10px 20px; font-size: 0.8rem; }
}

/* Very small screens (Landscape phones) */
@media (max-height: 500px) {
    #game-container {
        flex-direction: row; /* Side by side for landscape? */
        flex-wrap: wrap;
    }
    #word-display-container {
        margin-top: 5px;
        padding: 5px;
    }
}