:root{--color-bg: #1a1a2e;--color-bg-overlay: rgba(26, 26, 46, .98);--color-surface: rgba(255, 255, 255, .05);--color-primary: #667eea;--color-primary-dark: #764ba2;--color-accent: #4ecdc4;--color-text: #ffffff;--color-text-muted: #aaa;--color-success: #4caf50;--color-error: #f44336;--color-warning: #ff9800;--font-sans: "Inter", "Segoe UI", system-ui, sans-serif;--font-bengali: "Noto Sans Bengali", "Inter", sans-serif;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 15px;--radius-full: 25px;--shadow-sm: 0 4px 15px rgba(0, 0, 0, .2);--shadow-md: 0 10px 30px rgba(0, 0, 0, .3);--space-xs: .5rem;--space-sm: 1rem;--space-md: 1.5rem;--space-lg: 2rem;--transition: .3s ease}*{margin:0;padding:0;box-sizing:border-box}html[lang=bn] body{font-family:var(--font-bengali)}body{font-family:var(--font-sans);background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);min-height:100vh;overflow-x:hidden;color:var(--color-text)}.skip-link{position:absolute;top:-100px;left:1rem;background:var(--color-primary);color:#fff;padding:.5rem 1rem;border-radius:var(--radius-sm);z-index:9999;text-decoration:none}.skip-link:focus{top:1rem}*:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}#app-container{position:relative;width:100vw;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.language-toggle{position:fixed;top:20px;right:20px;z-index:1000}.court-3d-container{margin:2rem 0;padding:1rem;background:#1a1a2e80;border-radius:15px;border:1px solid rgba(255,255,255,.1)}.court-3d-container canvas{border-radius:10px;cursor:grab}.court-3d-container canvas:active{cursor:grabbing}.btn-lang{background:#667eeae6;border:2px solid rgba(255,255,255,.3);color:#fff;padding:.7rem 1.5rem;border-radius:25px;cursor:pointer;font-size:1rem;font-weight:600;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 15px #0003}.btn-lang:hover{background:#667eea;transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.btn-lang:active{transform:translateY(0)}.screen{position:absolute;top:0;left:0;width:100%;min-height:100vh;display:none;flex-direction:column;background:#1a1a2ef2;z-index:10;padding:20px}.screen.active{display:flex}.screen.overlay{background:#1a1a2efa;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.screen-content{max-width:1200px;width:100%;margin:0 auto;text-align:center;color:#fff;padding:2rem}.screen-content h1{font-size:3rem;margin-bottom:1rem;text-shadow:2px 2px 4px rgba(0,0,0,.5);animation:fadeInDown .8s ease}.screen-content h2{font-size:2.5rem;margin-bottom:2rem;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.subtitle{font-size:1.5rem;margin-bottom:1rem;color:#ccc}.description{font-size:1.1rem;margin-bottom:2rem;color:#aaa;line-height:1.6}.button-group{display:flex;flex-direction:column;gap:1rem;margin-top:2rem;align-items:center}.btn{padding:1rem 2rem;font-size:1.1rem;border:none;border-radius:8px;cursor:pointer;transition:all .3s ease;font-weight:600;text-transform:uppercase;letter-spacing:1px;min-width:200px}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 15px #667eea66}.btn-secondary{background:#ffffff1a;color:#fff;border:2px solid rgba(255,255,255,.3)}.btn-secondary:hover:not(:disabled){background:#fff3;transform:translateY(-2px)}.btn:disabled{opacity:.5;cursor:not-allowed}#tutorial-screen{background:#1a1a2e}.tutorial-header{width:100%;max-width:1200px;margin:0 auto;padding:1rem 2rem}.progress-bar{width:100%;height:8px;background:#ffffff1a;border-radius:4px;overflow:hidden;margin-bottom:1rem}.progress-fill{height:100%;background:linear-gradient(90deg,#667eea,#764ba2);transition:width .5s ease;width:0%;box-shadow:0 0 10px #667eea80}.lesson-info{display:flex;justify-content:space-between;align-items:center;color:#fff}.btn-menu{background:#ffffff1a;border:2px solid rgba(255,255,255,.3);color:#fff;padding:.5rem 1rem;border-radius:6px;cursor:pointer;font-size:1rem;transition:all .3s ease}.btn-menu:hover{background:#fff3}.tutorial-content-area{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:2rem;display:flex;flex-direction:column}.lesson-content{flex:1;background:#ffffff0d;border-radius:15px;padding:2rem;margin-bottom:2rem;color:#fff;overflow-y:auto;animation:fadeIn .5s ease}.lesson-content h2{color:#667eea;margin-bottom:1.5rem;font-size:2rem;text-align:center}.lesson-content h3{color:#4ecdc4;margin-top:1.5rem;margin-bottom:1rem;font-size:1.5rem}.lesson-content p{line-height:1.8;margin-bottom:1rem;font-size:1.1rem}.lesson-content ul,.lesson-content ol{margin-left:2rem;margin-bottom:1rem;line-height:1.8}.lesson-content li{margin-bottom:.5rem}.lesson-content strong{color:#4ecdc4}.visual-section{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin:2rem 0;align-items:start}.visual-demo{background:#ffffff0d;border-radius:15px;padding:2rem;text-align:center;display:flex;flex-direction:column;height:100%}.visual-text{text-align:left}@media(max-width:968px){.visual-section{grid-template-columns:1fr}}.court-diagram{width:100%;max-width:700px;margin:2rem auto;background:#2a2a3e;border:3px solid #fff;border-radius:10px;padding:1rem;position:relative;animation:scaleIn .6s ease}.court-diagram svg{width:100%;height:auto}.court-label{position:absolute;background:#667eeae6;color:#fff;padding:.3rem .6rem;border-radius:4px;font-size:.9rem;pointer-events:none;animation:pulse 2s infinite}.animated-ball svg{transform-origin:center bottom;display:block}.animated-ball:nth-child(1) svg{animation:realisticBounce 3s cubic-bezier(.68,-.55,.265,1.55) infinite;animation-delay:0s}.animated-ball:nth-child(2) svg{animation:realisticBounce 3s cubic-bezier(.68,-.55,.265,1.55) infinite;animation-delay:.6s}.animated-ball:nth-child(3) svg{animation:realisticBounce 3s cubic-bezier(.68,-.55,.265,1.55) infinite;animation-delay:1.2s}.animated-ball:nth-child(4) svg{animation:realisticBounce 3s cubic-bezier(.68,-.55,.265,1.55) infinite;animation-delay:1.8s}.animated-ball:nth-child(5) svg{animation:realisticBounce 3s cubic-bezier(.68,-.55,.265,1.55) infinite;animation-delay:2.4s}@keyframes realisticBounce{0%{transform:translateY(0) scaleY(1)}8%{transform:translateY(-25px) scaleY(.95)}12%{transform:translateY(-28px) scaleY(.9)}25%{transform:translateY(-15px) scaleY(1.05)}30%{transform:translateY(0) scaleY(.85)}32%{transform:translateY(-8px) scaleY(.95)}35%{transform:translateY(0) scaleY(1)}to{transform:translateY(0) scaleY(1)}}.animated-player{animation:movePlayer 3s infinite}@keyframes movePlayer{0%,to{transform:translate(0)}50%{transform:translate(50px)}}.interactive-box{background:#667eea33;border:2px solid #667eea;border-radius:10px;padding:1.5rem;margin:1.5rem 0;cursor:pointer;transition:all .3s ease;animation:slideInLeft .6s ease}.interactive-box:hover{background:#667eea4d;transform:translate(5px) scale(1.02);box-shadow:0 5px 20px #667eea66}.interactive-box.active{background:#667eea66;border-color:#4ecdc4}.info-box{background:#4ecdc433;border-left:4px solid #4ecdc4;padding:1rem;margin:1rem 0;border-radius:5px;animation:slideInRight .6s ease}.warning-box{background:#ffc10733;border-left:4px solid #ffc107;padding:1rem;margin:1rem 0;border-radius:5px;animation:slideInRight .6s ease}.rule-box{background:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:1.5rem;margin:1rem 0;animation:fadeInUp .6s ease}.rule-box h4{color:#667eea;margin-bottom:.5rem}.icon-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.5rem;margin:2rem 0}.icon-item{background:#ffffff1a;border-radius:10px;padding:1.5rem;text-align:center;transition:all .3s ease;animation:fadeInUp .6s ease}.icon-item:hover{transform:translateY(-5px);background:#667eea33;box-shadow:0 5px 15px #667eea4d}.icon-item .icon{font-size:3rem;margin-bottom:.5rem;display:block}.icon-item .label{font-size:.9rem;color:#ccc}.number-display{display:inline-block;font-size:3rem;font-weight:700;color:#4ecdc4;margin:0 .5rem;animation:countUp 1s ease}.comparison-box{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:2rem 0}.comparison-item{background:#ffffff0d;border-radius:10px;padding:1.5rem;text-align:center;animation:fadeIn .6s ease}.comparison-item.correct{border:2px solid #4caf50}.comparison-item.incorrect{border:2px solid #f44336}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-50px)}to{opacity:1;transform:translate(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(50px)}to{opacity:1;transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}@keyframes countUp{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}#quiz-screen{background:#1a1a2e}.quiz-container{max-width:800px;width:100%;margin:0 auto;padding:2rem;color:#fff}.quiz-content{background:#ffffff0d;border-radius:15px;padding:2rem;margin-bottom:2rem;min-height:300px}.quiz-question{font-size:1.3rem;margin-bottom:2rem;color:#4ecdc4;font-weight:600}.quiz-options{display:flex;flex-direction:column;gap:1rem}.quiz-option{display:flex;align-items:center;gap:var(--space-sm);width:100%;min-height:44px;background:#ffffff1a;border:2px solid rgba(255,255,255,.3);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);cursor:pointer;transition:var(--transition);text-align:left;color:#fff;font-size:1rem;font-family:inherit;animation:fadeInUp .4s ease}.quiz-option:hover:not(:disabled){background:#ffffff26;border-color:var(--color-primary)}.quiz-option-letter{font-weight:700;color:var(--color-accent);min-width:1.5rem}.quiz-option.selected{background:#667eea4d;border-color:#667eea}.quiz-option.correct{background:#4caf504d;border-color:#4caf50}.quiz-option.incorrect{background:#f443364d;border-color:#f44336}.quiz-feedback{margin-top:1.5rem;padding:1rem;border-radius:8px;font-size:1.1rem;animation:fadeInUp .5s ease}.quiz-feedback.correct{background:#4caf5033;border:2px solid #4caf50;color:#4caf50}.quiz-feedback.incorrect{background:#f4433633;border:2px solid #f44336;color:#f44336}.quiz-navigation{display:flex;justify-content:center;gap:1rem}.menu-list{display:flex;flex-direction:column;gap:.5rem;margin:2rem 0;text-align:left}.menu-item{background:#ffffff1a;border:2px solid rgba(255,255,255,.3);border-radius:8px;padding:1rem 1.5rem;color:#fff;cursor:pointer;transition:all .3s ease;font-size:1rem;text-align:left}.menu-item:hover{background:#fff3;transform:translate(5px);border-color:#667eea}.menu-item.completed{border-color:#4caf50;background:#4caf501a}.completion-stats{background:#ffffff1a;border-radius:10px;padding:2rem;margin:2rem 0;text-align:left}.completion-stats p{margin:.5rem 0;font-size:1.1rem}@media(max-width:768px){.screen-content h1{font-size:2rem}.screen-content h2{font-size:1.8rem}.lesson-content{padding:1rem}.tutorial-navigation{flex-direction:column}.tutorial-navigation .btn{width:100%}}.tutorial-navigation{display:flex;justify-content:space-between;gap:1rem;padding:1rem 0}.tutorial-navigation .btn{min-width:150px}.achievement-notification{position:fixed;top:100px;right:20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:1.5rem;border-radius:15px;box-shadow:0 10px 30px #0000004d;z-index:2000;transform:translate(400px);opacity:0;transition:all .3s ease;max-width:350px}.achievement-notification.show{transform:translate(0);opacity:1}.achievement-content{display:flex;align-items:center;gap:1rem}.achievement-icon{font-size:3rem;animation:bounce .6s ease}.achievement-text{flex:1}.achievement-text strong{display:block;font-size:1.1rem;margin-bottom:.3rem}.achievement-text p{margin:0;font-size:.9rem;opacity:.9}@media print{.top-controls,.tutorial-header,.tutorial-navigation,.btn,.screen:not(.active){display:none!important}.screen.active{position:static;display:block;background:#fff;color:#000;padding:0}.lesson-content{background:#fff;color:#000;padding:1rem}.court-diagram{page-break-inside:avoid}a{text-decoration:underline;color:#00f}}.welcome-hero .hero-icon{display:flex;justify-content:center;margin-bottom:var(--space-md);color:var(--color-accent)}.completion-icon{color:var(--color-success);display:flex;justify-content:center;margin-bottom:var(--space-sm)}.btn-menu{display:inline-flex;align-items:center;gap:.4rem}.lesson-loading{text-align:center;padding:var(--space-lg);color:var(--color-text-muted)}.quiz-progress{text-align:center;color:var(--color-text-muted);margin-bottom:var(--space-md)}.menu-item.mastered{border-color:var(--color-accent);background:#4ecdc426}.toast-container{position:fixed;bottom:1.5rem;right:1.5rem;z-index:3000;display:flex;flex-direction:column;gap:.5rem}.toast{background:var(--color-bg);color:#fff;padding:.85rem 1.25rem;border-radius:var(--radius-md);box-shadow:var(--shadow-md);border-left:4px solid var(--color-primary);transform:translate(120%);opacity:0;transition:var(--transition);max-width:320px}.toast.show{transform:translate(0);opacity:1}.toast-success{border-left-color:var(--color-success)}.toast-warning{border-left-color:var(--color-warning)}.toast-error{border-left-color:var(--color-error)}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:4000;display:none;align-items:center;justify-content:center}.modal.active{display:flex}.modal-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#0009}.modal-content{position:relative;background:var(--color-bg);padding:var(--space-lg);border-radius:var(--radius-lg);max-width:420px;width:90%;box-shadow:var(--shadow-md);z-index:1}.modal-actions{display:flex;gap:var(--space-sm);justify-content:flex-end;margin-top:var(--space-md)}.serve-steps{display:flex;flex-direction:column;gap:var(--space-sm);margin-bottom:var(--space-md)}.serve-step{display:flex;gap:var(--space-sm);align-items:flex-start;background:var(--color-surface);padding:var(--space-sm);border-radius:var(--radius-md);border-left:4px solid var(--color-primary)}.serve-step-num{background:var(--color-primary);color:#fff;width:2rem;height:2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}.serve-diagram,.out-court-diagram{margin:var(--space-md) 0;text-align:center}.court-svg{max-width:100%;height:auto;border-radius:var(--radius-md)}.serve-ball{animation:realisticBounce 1.5s ease-in-out infinite}.let-stroke-compare .panel-icon{width:3rem;height:3rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.25rem;margin:0 auto var(--space-xs)}.let-icon{background:#667eea4d;color:var(--color-primary)}.stroke-icon{background:#f443364d;color:var(--color-error)}.panel-subtitle{color:var(--color-text-muted);font-size:.9rem;margin-bottom:var(--space-xs)}.scenario-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm);margin:var(--space-md) 0}.scenario-card{background:var(--color-surface);padding:var(--space-sm);border-radius:var(--radius-md)}.scenario-label{display:inline-block;padding:.2rem .6rem;border-radius:var(--radius-full);font-size:.8rem;font-weight:600;margin-bottom:var(--space-xs)}.let-label{background:#667eea4d;color:var(--color-primary)}.stroke-label{background:#f443364d;color:var(--color-error)}.match-timeline{margin:var(--space-md) 0;padding-left:var(--space-md);border-left:3px solid var(--color-primary)}.timeline-item{position:relative;padding-bottom:var(--space-md);padding-left:var(--space-md)}.timeline-dot{position:absolute;left:calc(-1 * var(--space-md) - 6px);top:4px;width:12px;height:12px;background:var(--color-accent);border-radius:50%;border:2px solid var(--color-bg)}.timeline-content span{display:block;color:var(--color-accent);font-size:.9rem;margin:.2rem 0}.practice-container{max-width:700px;margin:0 auto;padding:var(--space-lg);text-align:center;color:#fff}.practice-prompt{font-size:1.2rem;margin-bottom:var(--space-sm)}.practice-score{color:var(--color-text-muted);margin-bottom:var(--space-md)}.practice-court-svg{width:100%;max-width:500px;cursor:crosshair;border-radius:var(--radius-md)}.practice-zone{cursor:pointer;transition:fill var(--transition)}.practice-zone:hover{fill:#667eea66!important}.practice-feedback{margin-top:var(--space-sm);min-height:1.5rem}.practice-feedback.success{color:var(--color-success)}.practice-feedback.error{color:var(--color-error)}@media(max-width:768px){.scenario-grid{grid-template-columns:1fr}.toast-container{left:1rem;right:1rem}.toast{max-width:none}}