:root {
    --primary: #ff9500;
    --secondary: #34c759;
    --danger: #ff3b30;
    --blue: #007aff;
    --bg-color: #f2f2f7;
    --card-bg: #ffffff;
    --text-color: #1c1c1e;
    --text-muted: #8e8e93;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Cairo', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Confetti overlay */
#confetti-canvas {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999;
}

.app-container { max-width: 800px; margin: 0 auto; padding: 20px; position: relative; z-index: 1;}

.screen { display: none; animation: fadeIn 0.5s ease; }
.screen.active-screen { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Main Menu */
.menu-header { text-align: center; margin-bottom: 40px; padding: 30px; background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%); border-radius: 20px; color: white; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.menu-header h1 { font-size: 3rem; font-weight: 900; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0,0,0,0.2); }
.menu-header p { font-size: 1.2rem; font-weight: bold; }
.lessons-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.lesson-card { background: var(--card-bg); border-radius: 20px; padding: 30px; text-align: center; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: all 0.3s ease; border: 3px solid transparent; }
.lesson-card:hover { transform: translateY(-5px); border-color: var(--primary); box-shadow: 0 8px 20px rgba(255, 149, 0, 0.2); }
.card-icon { font-size: 5rem; color: var(--primary); margin-bottom: 15px; line-height: 1; }
.lesson-card h3 { font-size: 1.8rem; color: var(--text-color); margin-bottom: 10px; }
.mascots { font-size: 2.5rem; }

/* Lesson Specific Styles */
.back-nav { margin-bottom: 20px; }
.back-btn { padding: 10px 20px; font-size: 1.2rem; font-family: 'Cairo', sans-serif; font-weight: bold; border: none; background: #e9ecef; color: var(--text-color); border-radius: 20px; cursor: pointer; transition: all 0.2s; }
.back-btn:hover { background: #dee2e6; transform: translateX(5px); }

.main-header { display: flex; justify-content: center; align-items: center; gap: 20px; margin-bottom: 30px; padding: 20px; border-radius: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: background 0.5s ease; }
.main-header h1 { font-size: 2.5rem; font-weight: 900; color: #fff; text-shadow: 2px 2px 4px rgba(0,0,0,0.2); }
.main-header h1 span { font-size: 3rem; color: var(--danger); background: #fff; padding: 0 15px; border-radius: 50%; display: inline-block; }
.character-mascot { font-size: 3rem; animation: bounce 2s infinite; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; }
.tab-btn { padding: 15px 30px; font-size: 1.2rem; font-weight: 700; font-family: 'Cairo', sans-serif; border: none; border-radius: 30px; background-color: var(--card-bg); color: var(--text-muted); cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.05); transition: all 0.3s ease; }
.tab-btn:hover { transform: translateY(-2px); }
.tab-btn.active { background-color: var(--primary); color: #fff; box-shadow: 0 4px 15px rgba(255, 149, 0, 0.4); }

.tab-content { display: none; animation: fadeIn 0.5s ease; }
.tab-content.active { display: block; }
.explanation-card { background: var(--card-bg); border-radius: 20px; padding: 40px 20px; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.audio-btn { background: var(--blue); color: white; border: none; padding: 15px 30px; font-size: 1.2rem; font-weight: bold; border-radius: 30px; cursor: pointer; margin-bottom: 30px; transition: transform 0.2s; font-family: 'Cairo', sans-serif; }
.audio-btn:active { transform: scale(0.95); }
.examples-container { display: flex; justify-content: center; gap: 30px; margin-bottom: 40px; }
.example-box { background: #f8f9fa; padding: 20px; border-radius: 20px; min-width: 200px; border: 3px solid #e9ecef; }
.emoji-display { font-size: 4rem; margin-bottom: 10px; }
.example-box p { font-size: 1.5rem; }
.example-box strong { color: var(--danger); }
.big-number-display { font-size: 2rem; font-weight: bold; }
.highlight-number { font-size: 5rem; color: var(--secondary); display: block; }

.whiteboard-container { background: var(--card-bg); border-radius: 20px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.tools-panel { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; flex-wrap: wrap; gap: 10px; }
.colors { display: flex; gap: 10px; }
.color-btn { width: 40px; height: 40px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; transition: transform 0.2s; }
.color-btn:hover { transform: scale(1.1); }
.color-btn.active { border-color: #000; transform: scale(1.1); }
.actions { display: flex; gap: 10px; }
.tool-btn { padding: 10px 20px; font-family: 'Cairo', sans-serif; font-weight: bold; border: none; border-radius: 20px; cursor: pointer; background: #e9ecef; transition: background 0.3s; }
.tool-btn.active { background: var(--primary); color: white; }
.tool-btn.danger { background: var(--danger); color: white; }
.canvas-wrapper { position: relative; width: 100%; height: 400px; border: 4px dashed #ccc; border-radius: 20px; background: #fff; overflow: hidden; }
.tracing-guide { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 20rem; font-weight: 900; color: rgba(0,0,0,0.05); pointer-events: none; user-select: none; white-space: nowrap; }
#whiteboard { width: 100%; height: 100%; cursor: crosshair; position: relative; z-index: 2; }

/* GAMES COMMON */
.games-menu { background: var(--card-bg); border-radius: 20px; padding: 30px; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.05); margin-bottom: 20px;}
.games-menu h3 { font-size: 1.8rem; margin-bottom: 20px; color: var(--text-color); }
.games-nav-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }
.game-nav-btn { background: var(--card-bg); border: 2px solid var(--primary); padding: 20px; border-radius: 15px; font-size: 1.2rem; font-family: 'Cairo', sans-serif; font-weight: bold; color: var(--primary); cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
.game-nav-btn:hover { background: var(--primary); color: white; transform: translateY(-3px); }
.game-header-actions { text-align: right; margin-bottom: 10px; }
.back-to-games-btn { background: #e9ecef; border: none; padding: 8px 15px; border-radius: 15px; font-family: 'Cairo', sans-serif; font-weight: bold; cursor: pointer; transition: 0.2s; }
.back-to-games-btn:hover { background: #dee2e6; }

.game-card { background: var(--card-bg); border-radius: 20px; padding: 30px; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); text-align: center; overflow: hidden; }
.game-card h3 { font-size: 1.8rem; color: var(--primary); margin-bottom: 10px; }
.game-card p { font-size: 1.2rem; margin-bottom: 20px; }
.game-feedback { margin-top: 15px; font-size: 1.5rem; font-weight: bold; min-height: 35px; }
.action-btn { background: var(--secondary); color: white; border: none; padding: 10px 20px; font-size: 1.2rem; font-weight: bold; border-radius: 20px; cursor: pointer; transition: 0.2s; font-family: 'Cairo'; }
.action-btn:hover { background: #28a745; transform: scale(1.05); }
.action-btn:active { transform: scale(0.95); }

/* Draggable & Dropzone Helpers */
.draggable { cursor: grab; }
.draggable:active { cursor: grabbing; }
.dropzone.dragover { background-color: rgba(52, 199, 89, 0.2); border: 3px dashed var(--secondary); transform: scale(1.02); }

/* 1. Whack-a-Number Game */
.whack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin: 20px auto; max-width: 400px; }
.mole-hole { background: #5c4033; border-radius: 50%; height: 80px; position: relative; overflow: hidden; border: 4px solid #3e2723; }
.mole { 
    position: absolute; bottom: -80px; left: 50%; transform: translateX(-50%); width: 60px; height: 60px; 
    background: #e9ecef; border-radius: 50%; display: flex; justify-content: center; align-items: center; 
    font-size: 2.5rem; font-weight: bold; font-family: 'Cairo', sans-serif !important; cursor: pointer; 
    transition: bottom 0.2s ease-out; box-shadow: inset 0 -5px 0 rgba(0,0,0,0.1); user-select: none;
}
.mole.up { bottom: 5px; }
.mole.hit { background: var(--secondary); color: white; pointer-events: none; }
.score-display { font-size: 1.5rem; font-weight: bold; color: var(--blue); }

/* 2. Gas Station Drag & Drop */
.gas-station-area { display: flex; justify-content: space-around; align-items: center; margin-top: 20px; padding: 20px; background: #e9ecef; border-radius: 20px;}
.energy-sources { display: flex; flex-direction: column; gap: 10px; }
.energy-item { font-size: 4rem; user-select: none; transition: transform 0.2s; z-index: 10;}
.vehicle-area { border: 4px dashed #999; border-radius: 20px; padding: 40px; min-width: 200px; transition: all 0.3s; position: relative; }
.rocket { font-size: 6rem; position: relative; z-index: 2; transition: transform 1s ease-in; }
.flame { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); font-size: 4rem; opacity: 0; transition: opacity 0.2s; z-index: 1;}
.vehicle-area.success { border-color: var(--secondary); background: rgba(52, 199, 89, 0.1); }
.rocket.shake { animation: shakeStrong 0.5s ease-in-out infinite; }
.rocket.fly { transform: translateY(-300px); }
.flame.active { opacity: 1; animation: flicker 0.1s infinite alternate; }
@keyframes shakeStrong { 0%, 100% { transform: translateX(0) translateY(0); } 25% { transform: translateX(-5px) translateY(5px); } 75% { transform: translateX(5px) translateY(-5px); } }
@keyframes flicker { 0% { transform: translateX(-50%) scale(1); } 100% { transform: translateX(-50%) scale(1.2); } }

/* 3. Drag & Drop Matching Game */
.drag-match-grid { display: flex; justify-content: center; gap: 20px; margin-bottom: 30px; flex-wrap: wrap; }
.match-group { background: #f8f9fa; border: 4px dashed #ccc; border-radius: 20px; padding: 20px; text-align: center; min-width: 150px; min-height: 150px; transition: all 0.3s; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.match-items { font-size: 3rem; margin-bottom: 10px; pointer-events: none;}
.drag-items-container { display: flex; justify-content: center; gap: 20px; padding: 20px; background: #e9ecef; border-radius: 20px; }
.number-drag { background: var(--blue); color: white; font-size: 2.5rem; font-weight: bold; width: 60px; height: 60px; border-radius: 15px; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 0 #0056b3; user-select: none; transition: transform 0.1s; }
.number-drag:active { transform: translateY(4px); box-shadow: none; }
.match-group.filled { border-style: solid; border-color: var(--secondary); background: rgba(52,199,89,0.1); }

/* 4. Shortest Path Game */
.path-game { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.path-container { position: relative; width: 100%; max-width: 400px; height: 250px; background: #cce5ff; border-radius: 15px; overflow: hidden; border: 4px solid var(--blue); }
.house-icon { position: absolute; top: 10px; right: 10px; font-size: 4rem; z-index: 1;}
.car-actor { position: absolute; bottom: 20px; left: 20px; font-size: 3rem; z-index: 10; transition: all 1s ease-in-out; }
.path { position: absolute; background: rgba(255, 255, 255, 0.5); cursor: pointer; border: 2px dashed #999; transition: background 0.3s; border-radius: 10px;}
.path:hover { background: rgba(255, 255, 255, 0.8); }
.path-long-1 { top: 180px; left: 50px; width: 100px; height: 30px; }
.path-long-2 { top: 50px; left: 120px; width: 30px; height: 160px; }
.path-long-3 { top: 50px; left: 120px; width: 150px; height: 30px; }
.path-short { bottom: 30px; left: 60px; width: 250px; height: 30px; transform: rotate(-15deg); transform-origin: left; }
.path.selected-wrong { background: var(--danger); border-color: var(--danger); border-style: solid; }

/* 5. Interactive Pirate Maze Game */
.maze-interactive-area { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.maze-grid { 
    display: grid; grid-template-columns: repeat(5, 50px); grid-template-rows: repeat(5, 50px); gap: 2px;
    background: #ccc; border: 5px solid #6c757d; border-radius: 10px; padding: 2px;
}
.maze-cell { width: 50px; height: 50px; background: #fff; display: flex; justify-content: center; align-items: center; font-size: 2rem; position: relative;}
.maze-cell.wall { background: #6c757d; }
.maze-cell.safe { background: #e2e3e5; }
.maze-actor { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 2; transition: all 0.2s ease;}

.d-pad { text-align: center; }
.d-pad-btn { width: 60px; height: 60px; font-size: 2rem; margin: 5px; border-radius: 10px; border: none; background: #e9ecef; cursor: pointer; box-shadow: 0 4px 0 #ccc; transition: 0.1s;}
.d-pad-btn:active { transform: translateY(4px); box-shadow: 0 0 0 #ccc; background: #ced4da; }

/* Straight font for numbers globally */
.card-icon, .highlight-number, .tracing-guide, .number-drag, .big-number-display, .energy-counter {
    font-family: 'Cairo', sans-serif !important;
}

/* TTS Speaker Icon */
.tts-speaker-icon { cursor: pointer; margin-left: 8px; font-size: 1.2rem; transition: transform 0.2s; display: inline-block; }
.tts-speaker-icon:hover { transform: scale(1.3); }

/* Keyframes for simple pop and shake */
@keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* --- NEW GAMES STYLES --- */

/* Balloon Pop */
.balloon-area { position: relative; height: 300px; width: 100%; background: #e0f7fa; border-radius: 20px; overflow: hidden; margin-top: 15px; border: 4px solid #b2ebf2; }
.balloon { position: absolute; width: 60px; height: 80px; background: #ff3b30; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; display: flex; justify-content: center; align-items: center; color: white; font-size: 2.5rem; font-weight: bold; cursor: crosshair; transition: transform 0.2s; user-select: none; }
.balloon::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 10px solid #cc2e26; }
.balloon:active { transform: scale(0.9); }

/* Star Catcher */
.star-catcher-area { position: relative; height: 300px; width: 100%; background: #1a237e; border-radius: 20px; overflow: hidden; margin-top: 15px; border: 4px solid #3949ab; }
.basket { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); font-size: 4rem; z-index: 10; transition: left 0.1s linear; }
.star { position: absolute; font-size: 2.5rem; display: flex; justify-content: center; align-items: center; font-weight: bold; color: #fff; text-shadow: 0 0 5px #ffd700; user-select: none; }
.d-pad-horizontal { display: flex; justify-content: center; margin-top: 10px; }

/* Bridge Builder */
.bridge-area { display: flex; align-items: flex-end; justify-content: space-around; height: 200px; background: #e0f2f1; border-bottom: 50px solid #81c784; position: relative; margin-top: 20px; overflow: hidden; }
.car-bridge { position: absolute; left: 10px; bottom: -10px; font-size: 4rem; z-index: 2; transition: left 2s ease-in-out; }
.bridge { display: flex; align-items: center; gap: 5px; margin-left: 100px; padding-bottom: 15px;}
.bridge-part { width: 60px; height: 20px; background: #8d6e63; border-radius: 5px; }
.bridge-gap { width: 120px; height: 30px; border: 3px dashed #ff9500; display: flex; justify-content: center; align-items: center; font-size: 1rem; color: #ff9500; border-radius: 5px; transition: all 0.3s;}
.wood-plank { font-size: 3.5rem; user-select: none; transition: transform 0.2s;}

/* Memory Game */
.memory-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 400px; margin: 20px auto; perspective: 1000px; }
.memory-card { width: 100%; aspect-ratio: 1; position: relative; cursor: pointer; transform-style: preserve-3d; transition: transform 0.5s; }
.memory-card.flip { transform: rotateY(180deg); }
.memory-card-inner { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; }
.memory-card-front, .memory-card-back { width: 100%; height: 100%; position: absolute; backface-visibility: hidden; border-radius: 10px; display: flex; justify-content: center; align-items: center; font-size: 3rem; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.memory-card-front { background: var(--blue); color: white; }
.memory-card-front::after { content: '?'; font-size: 2.5rem; font-family: 'Cairo'; }
.memory-card-back { background: white; transform: rotateY(180deg); border: 3px solid var(--blue); }

/* Feed Monkey */
.feed-area { display: flex; flex-direction: column; align-items: center; gap: 20px; background: #fff3e0; padding: 20px; border-radius: 20px; margin-top: 20px; }
.monkey-mouth { font-size: 6rem; width: 120px; height: 120px; border: 4px dashed #ff9800; border-radius: 50%; display: flex; justify-content: center; align-items: center; background: rgba(255,152,0,0.1); transition: transform 0.2s; }
.monkey-mouth.dragover { transform: scale(1.1); border-color: var(--secondary); background: rgba(52, 199, 89, 0.2); }
.bananas-container { display: flex; gap: 15px; flex-wrap: wrap; justify-content: center;}
.banana { font-size: 4rem; user-select: none; }

/* Number Train */
.train-area { display: flex; align-items: flex-end; justify-content: center; height: 150px; background: #e3f2fd; padding-bottom: 20px; border-bottom: 10px solid #607d8b; position: relative; transition: transform 2s ease-in;}
.train-locomotive { font-size: 5rem; margin-left: 10px; z-index: 2; }
.train-cart { width: 70px; height: 60px; border: 3px dashed var(--primary); background: rgba(255,149,0,0.1); border-radius: 10px; margin: 0 5px; display: flex; justify-content: center; align-items: center; font-size: 2.5rem; font-family: 'Cairo'; font-weight: bold;}
.train-cart.filled { border-style: solid; border-color: var(--secondary); background: #34c759; color: white; }
.train-area.drive { transform: translateX(-800px); }

/* --- LESSON 4 GAMES STYLES --- */
/* Find Number Grid */
.find-number-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 300px; margin: 20px auto; }
.find-num-cell { font-size: 3rem; background: #fff; border: 3px solid #dee2e6; border-radius: 50%; width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; cursor: pointer; user-select: none; transition: all 0.2s; font-family: 'Cairo'; }
.find-num-cell.found { border-color: var(--secondary); background: rgba(52, 199, 89, 0.2); color: var(--secondary); }
.find-num-cell.wrong { border-color: var(--danger); background: rgba(255, 59, 48, 0.2); color: var(--danger); animation: shake 0.3s; }

/* Paint Balloons */
.paint-area { display: flex; flex-direction: column; align-items: center; gap: 30px; margin-top: 20px;}
.balloons-to-paint { display: flex; gap: 20px; justify-content: center;}
.paint-balloon { width: 80px; height: 100px; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; border: 4px dashed #999; display: flex; justify-content: center; align-items: center; font-size: 2rem; font-weight: bold; color: #999; background: #f8f9fa; transition: all 0.3s;}
.paint-balloon.painted { border-style: solid; color: white !important; }
.paint-balloon.dragover { transform: scale(1.1); }
.brush { font-size: 2.5rem; width: 70px; height: 70px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: grab; transition: transform 0.2s; user-select: none; border: 4px solid #fff; box-shadow: 0 4px 8px rgba(0,0,0,0.2); }
.brush:active { cursor: grabbing; transform: scale(0.9) rotate(-15deg); }

/* Moving Turtles (L4) */
.turtles-area { position: relative; height: 250px; background: #e8f5e9; border: 4px solid #81c784; border-radius: 15px; overflow: hidden; margin-top: 20px;}
.turtle-sprite { position: absolute; font-size: 3.5rem; cursor: pointer; user-select: none; transition: transform 0.1s; }
.turtle-sprite:active { transform: scale(0.9); }
.turtle-label { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--blue); color: white; border-radius: 50%; width: 25px; height: 25px; font-size: 1.2rem; font-weight: bold; display: flex; justify-content: center; align-items: center;}

/* --- LESSON 5 GAMES STYLES --- */
/* Paint Flower */
.flower-to-paint { position: relative; width: 240px; height: 240px; margin: 0 auto; }
.flower-center { position: absolute; width: 60px; height: 60px; top: 90px; left: 90px; background: #fff9c4; border: 4px solid #fbc02d; border-radius: 50%; z-index: 2; display: flex; justify-content: center; align-items: center; font-size: 2rem; font-weight: bold; color: #fbc02d; font-family: 'Cairo';}
.flower-petal { position: absolute; width: 60px; height: 90px; top: 25px; left: 90px; background: #f5f5f5; border: 3px dashed #ccc; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; transform-origin: 30px 95px; transition: background 0.3s;}
.flower-petal.dragover { transform: scale(1.1); z-index: 3; }
.flower-petal.painted { border-style: solid; border-color: transparent; }
#pt-1 { transform: rotate(0deg); }
#pt-2 { transform: rotate(72deg); }
#pt-3 { transform: rotate(144deg); }
#pt-4 { transform: rotate(216deg); }
#pt-5 { transform: rotate(288deg); }

/* Moving Fish */
.fish-tank-area { position: relative; height: 300px; background: linear-gradient(180deg, #e0f7fa 0%, #80deea 100%); border: 4px solid #00acc1; border-radius: 15px; overflow: hidden; margin-top: 20px; }
.swimming-fish { position: absolute; font-size: 3rem; cursor: pointer; transition: transform 0.2s; animation: swim 6s linear infinite; }
@keyframes swim { 0% { transform: translateX(-50px) scaleX(1); } 49% { transform: translateX(calc(100vw - 100px)) scaleX(1); } 50% { transform: translateX(calc(100vw - 100px)) scaleX(-1); } 100% { transform: translateX(-50px) scaleX(-1); } }
.swimming-fish:hover { transform: scale(1.2) !important; }

/* Number Grid (Game 1 Hunter) */
.number-grid { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; margin-top: 20px; }
.find-number { width: 60px; height: 60px; background: #f0f0f0; border: 3px solid #ccc; border-radius: 15px; display: flex; justify-content: center; align-items: center; font-size: 2rem; font-weight: bold; cursor: pointer; transition: all 0.2s; user-select: none; }
.find-number:hover { transform: scale(1.1); background: #e0e0e0; border-color: #999; }
.find-number.found { background: #34c759; color: white; border-color: #248a3d; transform: scale(1.1); cursor: default; pointer-events: none; }

/* --- LESSON 6 GAMES STYLES (REVIEW) --- */
.quiz-btn { background: #fff; color: var(--primary); transition: all 0.2s; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.quiz-btn:hover { background: var(--primary); color: white; transform: translateY(-3px); }
.quiz-btn.correct { background: var(--secondary); border-color: var(--secondary); color: white; }
.quiz-btn.wrong { background: var(--danger); border-color: var(--danger); color: white; animation: shake 0.3s; }
.quiz-visuals { animation: pop 0.5s; }

.sort-zone { border: 3px dashed #bbb; background: #f8f9fa; border-radius: 10px; display: flex; justify-content: center; align-items: center; min-height: 120px; position: relative;}
.sort-zone.dragover { background: rgba(255, 152, 0, 0.2); border-color: #ff9800; transform: scale(1.05); z-index: 10; }
.sort-drag { cursor: grab; transition: transform 0.2s; text-shadow: 0 4px 8px rgba(0,0,0,0.2); }
.sort-drag:active { cursor: grabbing; transform: scale(0.9); }

.review-card { animation: pulse 2s infinite; }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } }

/* --- LESSON 10 GAMES STYLES --- */
.compare-select {
    font-size: 2rem;
    padding: 5px 10px;
    border: 3px solid var(--primary);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    font-weight: bold;
    color: #333;
    outline: none;
    transition: all 0.2s;
}
.compare-select:hover {
    box-shadow: 0 0 10px rgba(63, 81, 181, 0.3);
}

.seq-input-10, .order-asc-10, .order-desc-10 {
    outline: none;
    transition: all 0.2s;
    font-family: inherit;
    font-weight: bold;
}
.seq-input-10:focus, .order-asc-10:focus, .order-desc-10:focus {
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(0, 122, 255, 0.3);
}

@media (max-width: 600px) {
    .examples-container { flex-direction: column; align-items: center; }
    .gas-station-area { flex-direction: column; gap: 20px; }
    .energy-sources { flex-direction: row; }
    .drag-items-container { flex-wrap: wrap; }
}

.audio-highlight {
    box-shadow: 0 0 20px 5px #ffeb3b !important;
    transform: scale(1.05);
    border-color: #ffb300 !important;
    background-color: #fffde7 !important;
    z-index: 10;
    position: relative;
}