.lesson-frame{background:var(--bg-main);min-height:100vh}.lesson-container{padding:var(--space-8)0;max-width:900px}.lesson-header{padding:var(--space-6);border-radius:var(--radius-xl);margin-bottom:var(--space-6);gap:var(--space-4);flex-direction:column;display:flex}.progress-wrapper{align-items:center;gap:var(--space-4);display:flex}.progress-bar-bg{background:var(--border);border-radius:6px;flex:1;height:12px;overflow:hidden}.progress-bar-fill{background:linear-gradient(90deg,var(--secondary),#34d399);height:100%;transition:width .5s cubic-bezier(.4,0,.2,1)}.progress-text{min-width:120px;color:var(--secondary);font-weight:700}.lesson-content{justify-content:center;align-items:center;min-height:400px;display:flex}.reward-unlock-overlay{z-index:1000;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.reward-modal{text-align:center;max-width:400px;animation:.5s cubic-bezier(.175,.885,.32,1.275) popIn}.reward-icon{margin-bottom:var(--space-4);font-size:5rem}@keyframes popIn{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
.game-container{gap:var(--space-8);flex-direction:column;width:100%;max-width:600px;display:flex}.canvas{aspect-ratio:16/9;border-radius:var(--radius-2xl);width:100%;transition:all .3s;position:relative;overflow:hidden}.canvas.correct{border-color:var(--success);background:#22c55e33}.canvas.wrong{border-color:var(--error);background:#ef444433;animation:.4s shake}.game-shape{width:60px;height:60px;transition:all .5s cubic-bezier(.175,.885,.32,1.275);position:absolute}.game-shape.circle{border-radius:50%}.game-shape.square{border-radius:12px}.game-shape.triangle{clip-path:polygon(50% 0%,0% 100%,100% 100%)}.options-grid{gap:var(--space-4);grid-template-columns:repeat(2,1fr);display:grid}.option-btn{border:4px solid var(--border);border-radius:var(--radius-xl);cursor:pointer;color:var(--text-main);box-shadow:var(--shadow-md);background:#fff;padding:1.5rem;font-size:2rem;font-weight:800;transition:all .2s}.option-btn:hover{border-color:var(--primary);box-shadow:var(--shadow-lg);transform:scale(1.05)}.option-btn:active{transform:scale(.95)}.feedback-overlay{color:var(--success);text-shadow:0 4px 10px #0000001a;justify-content:center;align-items:center;font-size:4rem;font-weight:900;animation:.5s ease-out popUp;display:flex;position:absolute;inset:0}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}@keyframes popUp{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
.animal-game{gap:var(--space-8);flex-direction:column;align-items:center;width:100%;display:flex}.target-banner{padding:var(--space-6)var(--space-12);border-radius:var(--radius-2xl);text-align:center;width:100%}.target-banner.correct{background:#22c55e33}.target-banner.wrong{background:#ef444433;animation:.4s shake}.target-banner h2 span{color:var(--primary);text-underline-offset:8px;text-decoration:underline}.animal-grid{gap:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(180px,1fr));width:100%;display:grid}.animal-card{aspect-ratio:1;cursor:pointer;justify-content:center;align-items:center;transition:all .3s cubic-bezier(.175,.885,.32,1.275);display:flex}.animal-card:hover{transform:translateY(-10px)scale(1.05)}.animal-emoji{font-size:5rem}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}