:root{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}body{margin:0;padding:0}#root{width:100%}*{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);justify-content:center;align-items:center;min-height:100vh;padding:20px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;display:flex}.app{background:#fff;border-radius:20px;width:100%;max-width:800px;min-height:500px;padding:40px;animation:.3s ease-out slideIn;box-shadow:0 20px 60px #0000004d}@media (width<=768px){body{align-items:flex-start;padding:10px}.app{border-radius:15px;min-height:auto;padding:25px 20px}}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}h1{color:#667eea;text-align:center;margin-bottom:30px;font-size:2.5rem}h2{color:#667eea;text-align:center;margin-bottom:30px;font-size:2rem}@media (width<=768px){h1{margin-bottom:20px;font-size:1.8rem}h2{margin-bottom:20px;font-size:1.5rem}}button{color:#fff;cursor:pointer;touch-action:manipulation;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:10px;min-height:50px;padding:15px 30px;font-size:1.1rem;font-weight:600;transition:transform .2s,box-shadow .2s}@media (width<=768px){button{width:100%;min-height:55px;padding:18px 30px;font-size:1.2rem}}button:hover{transform:translateY(-2px);box-shadow:0 10px 20px #667eea4d}button:active{transform:translateY(0)}button:disabled{opacity:.5;cursor:not-allowed}input[type=number]{text-align:center;border:2px solid #ddd;border-radius:8px;width:100%;min-height:50px;padding:12px;font-size:1.2rem;transition:border-color .3s}@media (width<=768px){input[type=number]{border-radius:12px;min-height:60px;padding:18px;font-size:1.5rem}}input[type=number]:focus{border-color:#667eea;outline:none}.error-feedback{animation:.5s shake;border-color:#ff4757!important}.success-feedback{animation:.5s pulse;border-color:#2ed573!important}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.user-selection-screen{background:linear-gradient(135deg,#e8f4f8 0%,#d4e8f0 50%,#c0dce8 100%);flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:2rem;display:flex}.app-branding{text-align:center;margin-bottom:2rem}.app-icon{border-radius:20px;width:200px;height:200px;margin-bottom:1rem;animation:2s ease-in-out infinite bounce;box-shadow:0 10px 30px #0003}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.app-branding h1{color:#2c3e50;text-shadow:2px 2px 4px #0000001a;margin:0;font-size:3rem;font-weight:700}.app-subtitle{color:#34495e;margin:.5rem 0 0;font-size:1.2rem}.user-prompt{color:#2c3e50;text-align:center;margin-bottom:1.5rem;font-size:1.5rem}.users-container{grid-template-columns:repeat(2,1fr);gap:1.5rem;width:100%;max-width:600px;display:grid}.user-button{color:#2c3e50;cursor:pointer;background:#fff;border:3px solid #3498db;border-radius:20px;flex-direction:column;align-items:center;gap:.5rem;padding:2rem 1rem;font-size:1.3rem;font-weight:700;transition:all .3s;display:flex;box-shadow:0 5px 15px #3498db33}.user-button:hover{color:#fff;background:linear-gradient(135deg,#3498db 0%,#2980b9 100%);border-color:#2980b9;transform:translateY(-5px);box-shadow:0 8px 20px #3498db4d}.user-button:active{transform:translateY(-2px)}.leaderboard-link{color:#3498db;cursor:pointer;background:#fff;border:2px solid #3498db;border-radius:50px;margin:3rem auto 0;padding:1rem 2rem;font-size:1.1rem;font-weight:700;transition:all .3s;display:block;box-shadow:0 3px 10px #3498db33}.leaderboard-link:hover{color:#fff;background:linear-gradient(135deg,#3498db 0%,#2980b9 100%);border-color:#2980b9;transform:translateY(-3px);box-shadow:0 5px 15px #3498db4d}@media (width<=768px){.user-selection-screen h1{margin-bottom:2rem;font-size:1.8rem}.users-container{gap:1rem}.user-button{min-height:100px;padding:1.5rem .5rem;font-size:1.2rem}}.config-screen{background:linear-gradient(135deg,#e8f4f8 0%,#d4e8f0 50%,#c0dce8 100%);flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:2rem;display:flex}.header-with-icon{align-items:center;gap:1rem;margin-bottom:3rem;display:flex}.dog-icon{border-radius:10px;width:80px;height:80px;animation:1s ease-in-out infinite wag}@keyframes wag{0%,to{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}.config-screen h1{color:#2c3e50;text-align:center;margin:0;font-size:2.5rem}.config-section{text-align:center}.config-section h3{color:#2c3e50;margin-bottom:15px;font-size:1.3rem}@media (width<=768px){.config-section h3{margin-bottom:12px;font-size:1.2rem}}.button-group{flex-wrap:wrap;justify-content:center;gap:15px;display:flex}@media (width<=768px){.button-group{gap:12px}}.button-group button{color:#2c3e50;cursor:pointer;background:#fff;border:2px solid #3498db;border-radius:10px;min-width:100px;padding:12px 25px;font-weight:700;transition:all .3s}@media (width<=768px){.button-group button{flex:1;min-width:85px;min-height:55px;font-size:1.1rem}}.button-group button.active{color:#fff;background:linear-gradient(135deg,#3498db 0%,#2980b9 100%);border-color:#2980b9;transform:scale(1.05);box-shadow:0 5px 15px #3498db66}.start-button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#3498db 0%,#2980b9 100%);border:3px solid #2980b9;border-radius:50px;align-self:center;margin-top:20px;padding:20px 40px;font-size:1.4rem;font-weight:700;transition:all .3s;box-shadow:0 5px 20px #3498db4d}.start-button:hover{transform:translateY(-3px);box-shadow:0 8px 25px #3498db66}@media (width<=768px){.start-button{width:100%;margin-top:15px;padding:22px 40px;font-size:1.5rem}}.exercise-screen{flex-direction:column;gap:30px;height:100%;display:flex}@media (width<=768px){.exercise-screen{gap:20px}}.header{flex-direction:column;gap:10px;display:flex}.progress-bar{background:#e0e0e0;border-radius:10px;width:100%;height:10px;overflow:hidden}@media (width<=768px){.progress-bar{height:12px}}.progress-fill{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);height:100%;transition:width .3s}.info-bar{color:#666;justify-content:space-between;font-size:.9rem;display:flex}@media (width<=768px){.info-bar{font-size:1rem}}.question-counter{font-weight:600}.timer{color:#764ba2;font-weight:600}.question-container{flex-direction:column;flex:1;justify-content:center;gap:30px;display:flex}@media (width<=768px){.question-container{gap:25px;padding:20px 0}}.question{color:#667eea;text-align:center;margin:0;font-size:3rem;line-height:1.2;animation:.3s fadeIn}@media (width<=768px){.question{font-size:2.5rem}}@media (width<=480px){.question{font-size:2rem}}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.question-container form{flex-direction:column;gap:20px;width:100%;max-width:300px;margin:0 auto;display:flex}@media (width<=768px){.question-container form{gap:18px;max-width:100%}}.encouragement{text-align:center;color:#764ba2;background:#f8f5ff;border-radius:10px;padding:15px;font-size:1.2rem;font-weight:600}@media (width<=768px){.encouragement{padding:12px;font-size:1.1rem}}.loading{text-align:center;color:#667eea;padding:50px;font-size:1.5rem}@media (width<=768px){.loading{padding:30px;font-size:1.3rem}}.results-screen{flex-direction:column;align-items:center;gap:25px;display:flex}@media (width<=768px){.results-screen{gap:20px}}.score-card{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:20px;padding:40px;box-shadow:0 10px 30px #667eea4d}@media (width<=768px){.score-card{width:100%;padding:35px 30px}}.score-circle{text-align:center;color:#fff}.score-value{margin-bottom:10px;font-size:4rem;font-weight:700;line-height:1}@media (width<=768px){.score-value{font-size:3.5rem}}.score-detail{opacity:.9;font-size:1.3rem}@media (width<=768px){.score-detail{font-size:1.2rem}}.time-info{color:#764ba2;background:#f8f5ff;border-radius:10px;padding:15px 30px;font-size:1.2rem;font-weight:600}@media (width<=768px){.time-info{text-align:center;width:100%;padding:12px 20px;font-size:1.1rem}}.cheat-warnings{text-align:center;background:#fff3cd;border:2px solid #ffc107;border-radius:10px;width:100%;padding:20px}.cheat-warnings h3{color:#856404;margin:0 0 15px;font-size:1.1rem}.warning-item{color:#856404;background:#fff;border-radius:5px;margin-bottom:8px;padding:8px;font-size:1rem;font-weight:600}.warning-item:last-child{margin-bottom:0}@media (width<=768px){.cheat-warnings{padding:15px}.cheat-warnings h3{font-size:1rem}.warning-item{font-size:.95rem}}.perfect-score{text-align:center;color:#fff;background:linear-gradient(135deg,#2ed573 0%,#26d07c 100%);border-radius:15px;width:100%;padding:30px}@media (width<=768px){.perfect-score{padding:25px 20px}}.perfect-score h2{color:#fff;margin-bottom:10px}.errors-section{width:100%}.errors-section h3{color:#764ba2;text-align:center;margin-bottom:20px}@media (width<=768px){.errors-section h3{margin-bottom:15px;font-size:1.1rem}}.errors-list{background:#f9f9f9;border-radius:10px;flex-direction:column;gap:15px;max-height:300px;padding:10px;display:flex;overflow-y:auto}@media (width<=768px){.errors-list{gap:12px;max-height:400px;padding:8px}}.error-item{background:#fff;border-left:4px solid #ff4757;border-radius:8px;flex-direction:column;gap:5px;padding:15px;display:flex;box-shadow:0 2px 5px #0000000d}@media (width<=768px){.error-item{padding:12px}}.error-question{color:#333;font-size:1.2rem;font-weight:700}@media (width<=768px){.error-question{font-size:1.1rem}}.error-user{color:#ff4757;font-size:.95rem}.error-correct{color:#2ed573;font-size:.95rem;font-weight:600}@media (width<=768px){.error-user,.error-correct{font-size:1rem}}.telegram-status{text-align:center;min-height:30px}.status-sending{color:#667eea;font-weight:600;animation:1.5s infinite pulse}.status-sent{color:#2ed573;font-weight:600}.status-error{color:#ff4757;font-weight:600}@media (width<=768px){.status-sending,.status-sent,.status-error{font-size:1rem}}.restart-button{margin-top:10px;padding:18px 40px;font-size:1.2rem}@media (width<=768px){.restart-button{width:100%;padding:20px 40px;font-size:1.3rem}}.leaderboard-screen{background:linear-gradient(135deg,#e8f4f8 0%,#d4e8f0 50%,#c0dce8 100%);min-height:100vh;padding:2rem}.leaderboard-screen h1{color:#2c3e50;text-align:center;margin-bottom:2rem;font-size:2.5rem}.leaderboard-container{max-width:800px;margin:0 auto 2rem}.leaderboard-item{background:#fff;border-radius:15px;align-items:center;gap:1rem;margin-bottom:1rem;padding:1.5rem;transition:transform .2s;display:flex;box-shadow:0 4px 10px #0000001a}.leaderboard-item:hover{transform:translateY(-3px);box-shadow:0 6px 15px #0003}.leaderboard-item.podium{background:linear-gradient(135deg,#fff9e6 0%,gold 100%);border:3px solid #3498db;font-weight:700}.rank{text-align:center;min-width:50px;font-size:2rem}.player-info{flex:1}.player-name{color:#2d3436;margin-bottom:.3rem;font-size:1.3rem;font-weight:700}.player-stats{color:#636e72;font-size:.9rem}.player-score{color:#3498db;flex-direction:column;align-items:center;font-size:2rem;font-weight:700;display:flex}.player-score .pts{color:#636e72;font-size:.8rem;font-weight:400}.info-box{background:#fff;border-radius:15px;max-width:800px;margin:2rem auto;padding:1.5rem;box-shadow:0 4px 10px #0000001a}.info-box h3{color:#2d3436;margin-bottom:1rem;font-size:1.3rem}.info-box ul{margin:0;padding:0;list-style:none}.info-box li{color:#2d3436;padding:.5rem 0;font-size:1rem}.info-box strong{color:#3498db}.back-button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#3498db 0%,#2980b9 100%);border:3px solid #2980b9;border-radius:50px;margin:2rem auto 0;padding:1rem 3rem;font-size:1.2rem;font-weight:700;transition:all .3s;display:block;box-shadow:0 5px 15px #3498db4d}.back-button:hover{transform:translateY(-3px);box-shadow:0 8px 20px #3498db66}.loading,.error,.no-data{color:#2c3e50;text-align:center;margin-top:3rem;font-size:1.2rem}.error{color:#e74c3c}@media (width<=768px){.leaderboard-screen{padding:1rem}.leaderboard-screen h1{margin-bottom:1.5rem;font-size:1.8rem}.leaderboard-item{gap:.5rem;padding:1rem}.rank{min-width:40px;font-size:1.5rem}.player-name{font-size:1.1rem}.player-stats{font-size:.8rem}.player-score{font-size:1.5rem}.info-box{padding:1rem}.info-box h3{font-size:1.1rem}.info-box li{font-size:.9rem}.back-button{padding:.8rem 2rem;font-size:1rem}}