/* General Styling */
:root {
    --primary-font: 'Noto Nastaliq Urdu', serif;
    --header-color: #004d40;
    --border-color: #00796b;
    --target-box-glow: #26c6da;
    --score-color: #c62828;
    --progress-bar-color: #ffb300;
}
body { margin: 0; font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; direction: rtl; background: #eef2f3; }
.game-container { width: 90%; max-width: 900px; background-color: rgba(255, 255, 255, 0.95); border-radius: 20px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); padding: 20px; border: 5px solid rgba(255, 255, 255, 0.5); position: relative; }
.game-header { text-align: center; font-size: 1.6em; font-weight: bold; color: var(--header-color); padding-bottom: 15px; }
#game-area { width: 100%; height: 400px; border: 3px solid var(--border-color); border-radius: 8px; position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(3, 169, 244, 0.4), rgba(233, 30, 99, 0.4), rgba(255, 235, 59, 0.4)), url('background.jpg'); background-size: cover; background-position: center; }
.bubble { position: absolute; width: 80px; height: 80px; color: white; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-family: var(--primary-font); font-size: 45px; font-weight: 700; cursor: pointer; user-select: none; transition: transform 0.2s ease, box-shadow 0.2s; box-shadow: 0 5px 10px rgba(0,0,0,0.3); text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
.bubble:hover { transform: scale(1.1); box-shadow: 0 8px 15px rgba(0,0,0,0.4); }
@keyframes correctClick { 0% { transform: scale(1); } 50% { transform: scale(1.15); border-color: #ffeb3b; } 100% { transform: scale(1); } }
.flash-correct { animation: correctClick 0.4s ease; }

/* Updated Bottom Panel Styling */
.bottom-panel { display: flex; margin-top: 20px; gap: 20px; }
.panel-box { flex: 1; height: 150px; border-radius: 12px; display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 10px; box-sizing: border-box; }
.target-letter-box { background-color: #e0f7fa; border: 3px solid var(--target-box-glow); box-shadow: 0 0 15px var(--target-box-glow); }
/* Wrapper for target letter and counter */
#target-letter-wrapper { display: flex; align-items: center; justify-content: center; gap: 15px; }
#target-letter { font-family: var(--primary-font); font-size: 100px; color: var(--border-color); }
/* New Click Counter Style */
#click-counter {
    font-size: 1.8em;
    font-weight: bold;
    color: var(--header-color);
    background-color: #ffffff;
    padding: 5px 15px;
    border-radius: 10px;
    border: 2px solid var(--border-color);
}

/* --- Other Styles (No Changes) --- */
.score-box { background-color: #fffde7; border: 3px solid #fdd835; font-size: 1.4em; text-align: center; color: var(--score-color); }
.score-text { font-weight: bold; font-size: 1.5em; margin: 5px 0 0 0; }
.progress-container { width: 80%; margin: 25px auto; background-color: #e0e0e0; border-radius: 20px; height: 30px; overflow: hidden; border: 2px solid #bdbdbd; }
#progress-bar { width: 0%; height: 100%; background: var(--progress-bar-color); border-radius: 20px; transition: width 0.5s ease-in-out; }
.controls { text-align: center; margin-top: 15px; }
.btn { padding: 12px 35px; font-size: 1.2em; font-weight: bold; border: none; border-radius: 8px; cursor: pointer; margin: 0 10px; transition: all 0.2s ease; box-shadow: 0 3px 6px rgba(0,0,0,0.2); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.stop-btn { background-color: #f44336; color: white; }
.restart-btn { background-color: #4caf50; color: white; }
#win-screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); color: white; display: none; flex-direction: column; justify-content: center; align-items: center; text-align: center; z-index: 100; }
#win-screen h2 { font-family: var(--primary-font); font-size: 4rem; color: #ffeb3b; }
#win-screen p { font-size: 1.5rem; }
.final-score-win { font-size: 2rem !important; }
@media (max-width: 768px) { .bottom-panel { flex-direction: column; } .panel-box { width: 100%; } .game-header { font-size: 1.2em; } #target-letter { font-size: 80px; } #click-counter { font-size: 1.2em; } .bubble { width: 60px; height: 60px; font-size: 32px; } }