/* General Styling */
:root {
    --number-font: Arial, sans-serif; /* Numbers ke liye alag font */
    --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 for numbers */
    font-family: var(--number-font);
    font-size: 48px; 
    font-weight: bold; 
    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; }
.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); }
#target-letter-wrapper { display: flex; align-items: center; justify-content: center; gap: 15px; }
#target-number { /* Changed from #target-letter */
    font-family: var(--number-font); 
    font-size: 110px;
    font-weight: bold;
    color: var(--border-color);
}
#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); }
.score-box { background-color: #fffde7; border: 3px solid #fdd835; font-size: 1.4em; text-align: center; color: var(--score-color); }
/* Urdu instructions ke liye primary font */
.score-box p { font-family: var(--primary-font); } 
.score-text { font-weight: bold; font-size: 1.5em; margin: 5px 0 0 0; font-family: var(--number-font); }
.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, #win-screen p { font-family: var(--primary-font); }
#win-screen h2 { 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-number { font-size: 80px; } #click-counter { font-size: 1.2em; } .bubble { width: 60px; height: 60px; font-size: 36px; } }```

---