.menu-buttons,h1{margin-bottom:30px}.btn,.container,.progress-bar{overflow:hidden;position:relative}.container,.footer,.input-field,.stat-item{text-align:center}#howto,.container{background:rgba(255,255,255,.95);max-width:750px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#667eea 0,#764ba2 100%);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.container{backdrop-filter:blur(10px);border-radius:20px;box-shadow:0 20px 40px rgba(0,0,0,.1);padding:30px;width:100%}.btn,.number-btn{border:none;color:#fff;font-weight:600;transition:.3s}.number-selector,.options{max-width:400px;gap:15px;margin:20px 0}.container::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(102,126,234,.1) 0,transparent 50%);animation:20s linear infinite rotate;z-index:-1}@keyframes rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}h1{color:#4a5568;font-size:2em;text-shadow:2px 2px 4px rgba(0,0,0,.1)}.menu-buttons{display:grid;gap:20px}.btn{background:linear-gradient(135deg,#667eea 0,#764ba2 100%);border-radius:15px;cursor:pointer;font-size:1.1em;padding:20px;box-shadow:0 8px 16px rgba(0,0,0,.1)}#howto,.content-area{padding:30px;margin-top:20px}.back-btn,.number-btn,.option-btn{cursor:pointer;box-shadow:0 4px 8px rgba(0,0,0,.1)}.btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.btn:hover::before{left:100%}.btn:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(0,0,0,.15)}.btn:active{transform:translateY(-1px)}.content-area{background:rgba(247,250,252,.8);border-radius:15px;min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center}.number-selector{display:grid;grid-template-columns:repeat(4,1fr)}.number-btn{background:linear-gradient(135deg,#4facfe 0,#00f2fe 100%);border-radius:10px;font-size:1.2em;height:60px;padding:15px 20px}.number-btn:hover{transform:scale(1.05);box-shadow:0 6px 12px rgba(0,0,0,.15)}.question{font-size:2.5em;font-weight:700;color:#2d3748;margin:20px 0;text-shadow:1px 1px 2px rgba(0,0,0,.1)}.options{display:grid;grid-template-columns:repeat(2,1fr)}.option-btn{background:linear-gradient(135deg,#a8edea 0,#fed6e3 100%);border:none;border-radius:10px;color:#2d3748;font-size:1.3em;font-weight:600;height:60px;transition:.3s}.back-btn:hover,.option-btn:hover{transform:translateY(-2px);box-shadow:0 6px 12px rgba(0,0,0,.15)}.option-btn.correct{background:linear-gradient(135deg,#84fab0 0,#8fd3f4 100%);animation:.5s pulse}.feedback-message.error,.option-btn.incorrect{background:linear-gradient(135deg,#ff9a9e 0,#fecfef 100%)}.option-btn.incorrect{animation:.5s shake}@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}.input-field{background:rgba(255,255,255,.9);border:2px solid #e2e8f0;border-radius:10px;font-size:1.5em;padding:15px;width:150px;margin:20px;transition:.3s}.input-field:focus{border-color:#667eea;box-shadow:0 0 0 3px rgba(102,126,234,.1);outline:0}.stats{background:rgba(255,255,255,.7);border-radius:15px;padding:20px;margin:20px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px}.stat-number{font-size:2em;font-weight:700;color:#667eea}.stat-label{color:#4a5568;font-weight:500}.progress-bar{background:rgba(226,232,240,.8);border-radius:10px;height:20px;margin:20px 0}.progress-fill{background:linear-gradient(135deg,#667eea 0,#764ba2 100%);height:100%;transition:width .5s;border-radius:10px}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-weight:600;font-size:.9em;text-shadow:1px 1px 2px rgba(0,0,0,.3)}.back-btn,.table-cell{font-weight:600;color:#2d3748}.back-btn{background:linear-gradient(135deg,#ffecd2 0,#fcb69f 100%);border:none;border-radius:10px;font-size:1em;padding:12px 24px;position:absolute;top:20px;left:20px;transition:.3s}.multiplication-table{display:grid;gap:5px;max-width:500px;margin:20px auto}.table-cell{background:rgba(255,255,255,.8);border-radius:5px;padding:10px;font-size:.9em}.faq-question,.streak,.timer{font-weight:700}.table-header{background:linear-gradient(135deg,#667eea 0,#764ba2 100%);color:#fff}.achievement{background:linear-gradient(135deg,#ffeaa7 0,#fab1a0 100%);border-radius:10px;padding:15px;margin:10px;display:inline-block;animation:.5s bounceIn}.feedback-message{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#84fab0 0,#8fd3f4 100%);color:#2d3748;padding:15px 30px;border-radius:10px;font-weight:700;z-index:1000;animation:.5s slideUp}@keyframes slideUp{from{transform:translateX(-50%) translateY(100px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}@keyframes bounceIn{0%{transform:scale(0)}50%{transform:scale(1.1)}100%{transform:scale(1)}}.hidden{display:none!important}.timer{font-size:1.5em;color:#e53e3e;margin:10px}.streak{background:linear-gradient(135deg,#ffeaa7 0,#fab1a0 100%);border-radius:20px;padding:10px 20px;color:#2d3748;display:inline-block;margin:10px;animation:2s ease-in-out infinite alternate glow}@keyframes glow{from{box-shadow:0 0 5px rgba(255,234,167,.5)}to{box-shadow:0 0 20px rgba(255,234,167,.8)}}.footer{background:rgba(74,85,104,.1);border-top:1px solid rgba(74,85,104,.2);padding:20px;margin-top:40px;font-size:.85em;color:#4a5568;position:relative;width:100%;clear:both;border-radius:15px}.footer-menu{display:flex;justify-content:center;gap:30px;margin-bottom:15px;flex-wrap:wrap}.footer-link{color:#667eea;text-decoration:none;font-size:.9em;padding:8px 15px;border-radius:20px;background:rgba(102,126,234,.1);transition:.3s;border:1px solid rgba(102,126,234,.2)}.footer-link:hover{background:rgba(102,126,234,.2);transform:translateY(-2px);box-shadow:0 4px 8px rgba(102,126,234,.2);color:#667eea}.footer p{margin:8px auto;font-size:.8em;color:#718096;line-height:1.4;max-width:600px}.footer p:first-of-type{font-weight:500;color:#4a5568}@media (max-width:768px){.container{padding:20px}.question,h1{font-size:2em}.menu-buttons,.options{grid-template-columns:1fr}.number-selector{grid-template-columns:repeat(2,1fr)}.multiplication-table{grid-template-columns:repeat(5,1fr);font-size:.8em}.footer{padding:15px 10px;font-size:.8em}.footer-menu{flex-direction:column;gap:10px;align-items:center}.footer-link{font-size:.85em;padding:6px 12px}.footer p{font-size:.75em;margin:6px 0}}#howto{border-radius:15px;text-align:left;color:#2d3748;box-shadow:0 10px 20px rgba(0,0,0,.05);margin-left:auto;margin-right:auto}#howto h3{color:#4a5568;margin-bottom:15px;font-size:1.5em}#howto p,.faq-item{margin-bottom:20px}#howto p{font-size:1em;line-height:1.6}.faq-item{border-left:4px solid #764ba2;padding-left:15px}.faq-question{color:#764ba2;margin-bottom:5px}.faq-answer{color:#2d3748;font-size:.95em}
