*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh}body.bg-correct{background:linear-gradient(135deg,#38d9a9,#12b886)}body.bg-incorrect{background:linear-gradient(135deg,#ff6b6b,#fa5252)}#root{max-width:1280px;margin:0 auto;padding:1rem;text-align:center;min-height:100vh;display:flex;flex-direction:column}.app{display:flex;flex-direction:column;min-height:100vh;max-width:800px;margin:0 auto;width:100%}.header{margin-bottom:1rem}.header h1{color:#fff;font-size:2.5rem;font-weight:700;margin-bottom:1rem;text-shadow:0 2px 4px rgba(0,0,0,.3)}.header-controls{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.score-board{display:flex;justify-content:center;gap:2rem;margin-bottom:1rem}.score,.attempts{background:#fff3;color:#fff;padding:.5rem 1rem;border-radius:25px;font-weight:600;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3)}.main{flex:1;display:flex;flex-direction:column;align-items:center;gap:2rem}.flash-card{background:transparent;border-radius:20px;width:320px;height:420px;perspective:1000px}.card-inner{position:relative;width:100%;height:100%;transition:transform .7s ease;transform-style:preserve-3d}.flash-card.flipped .card-inner{transform:rotateY(180deg)}.card-face{position:absolute;inset:0;background:#fff;border-radius:20px;padding:2.5rem 2rem;box-shadow:0 20px 40px #0000001a;border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;align-items:center;justify-content:center}.card-back{transform:rotateY(180deg)}.problem{display:flex;align-items:center;justify-content:center;gap:1rem;font-size:3rem;font-weight:700;color:#333}.problem.vertical{flex-direction:column;gap:.5rem}.multiplicand,.multiplier{color:#667eea;min-width:60px;text-align:center}.operator{color:#764ba2;font-weight:800}.equals{color:#333;font-weight:600}.question-mark{color:#ff6b6b;font-weight:800;font-size:3.5rem}.answer{color:#40c057;font-weight:800;font-size:3.5rem}.answer-section{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;justify-content:center}.answer-input{padding:1rem 1.5rem;border:2px solid #e1e5e9;border-radius:15px;font-size:1.2rem;width:200px;text-align:center;transition:all .3s ease;background:#fff}.answer-input::-webkit-outer-spin-button,.answer-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.answer-input[type=number]{-moz-appearance:textfield}.answer-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;transform:scale(1.02)}.answer-input::placeholder{color:#999}.mode-selection{display:flex;flex-direction:column;align-items:center;gap:2rem;max-width:600px;margin:0 auto}.mode-selection h2{color:#fff;font-size:2rem;font-weight:600;text-shadow:0 2px 4px rgba(0,0,0,.3)}.mode-buttons{display:grid;gap:2rem;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}.mode-button{background:#fff;border:none;border-radius:20px;padding:2rem;cursor:pointer;transition:all .3s ease;box-shadow:0 10px 30px #0000001a;width:100%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1rem}.mode-button:hover{transform:translateY(-5px);box-shadow:0 20px 40px #00000026}.mode-icon{font-size:3rem}.mode-title{font-size:1.5rem;font-weight:700;color:#333}.mode-description{font-size:1rem;color:#666;line-height:1.4}.game-mode:hover{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.game-mode:hover .mode-title,.game-mode:hover .mode-description{color:#fff}.study-mode:hover{background:linear-gradient(135deg,#51cf66,#40c057);color:#fff}.study-mode:hover .mode-title,.study-mode:hover .mode-description{color:#fff}.mode-switch-button{background:#fff3;color:#fff;border:1px solid rgba(255,255,255,.3);padding:.5rem 1rem;border-radius:25px;font-weight:600;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:.9rem}.mode-switch-button:hover{background:#ffffff4d;transform:translateY(-2px)}.study-mode-label{color:#fff;padding:.5rem 1rem;font-size:.9rem;font-weight:600;text-align:center;cursor:default}.check-button,.new-card-button,.reveal-button{padding:1rem 2rem;border:none;border-radius:15px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px}.check-button:disabled,.reveal-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.check-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.check-button:hover{transform:translateY(-2px);box-shadow:0 10px 20px #667eea4d}.new-card-button{background:linear-gradient(135deg,#ff6b6b,#ee5a24);color:#fff}.new-card-button:hover{transform:translateY(-2px);box-shadow:0 10px 20px #ff6b6b4d}.reveal-button{background:linear-gradient(135deg,#51cf66,#40c057);color:#fff}.reveal-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 20px #51cf664d}.feedback{padding:1rem 2rem;border-radius:15px;font-weight:600;font-size:1.1rem;animation:slideIn .3s ease;max-width:500px;text-align:center}.feedback.correct{background:linear-gradient(135deg,#51cf66,#40c057);color:#fff}.feedback.incorrect{background:linear-gradient(135deg,#ff6b6b,#ee5a24);color:#fff}.feedback-content{display:flex;align-items:center;gap:.5rem;justify-content:center}.feedback-icon{font-size:1.5rem}.loading{color:#fff;font-size:1.5rem;text-align:center;margin-top:2rem}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){#root{padding:1rem}.header h1{font-size:2rem}.header-controls,.score-board{flex-direction:column;gap:1rem}.mode-buttons{display:grid;grid-template-columns:1fr;gap:1rem}.mode-button{width:100%}.flash-card{width:280px;height:380px}.problem{font-size:2.5rem;gap:.5rem}.multiplicand,.multiplier{min-width:50px}.answer-section{flex-direction:column;gap:1rem}.answer-input,.check-button,.new-card-button,.reveal-button{width:100%;max-width:300px}}@media (max-width: 480px){.problem{font-size:2rem}.flash-card{width:250px;height:340px}}.number-selection{text-align:center;max-width:600px;margin:0 auto}.number-selection h2{color:#2c3e50;margin-bottom:.5rem;font-size:2rem}.number-selection p{color:#7f8c8d;margin-bottom:2rem;font-size:1.1rem}.mode-section{margin-bottom:2rem}.mode-section h3{color:#2c3e50;margin-bottom:1rem;font-size:1.3rem;font-weight:600}.number-grid{display:grid;gap:.8rem;margin-bottom:1rem;margin-left:auto;margin-right:auto}.basic-grid,.advanced-grid{grid-template-columns:repeat(auto-fit,minmax(50px,1fr));max-width:500px}.number-button{width:50px;height:50px;border:2px solid #3498db;background:#fff;color:#3498db;border-radius:50%;font-size:1.3rem;font-weight:700;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.number-button:hover{background:#3498db;color:#fff;transform:scale(1.1)}.number-button.selected{background:#e74c3c;border-color:#e74c3c;color:#fff;transform:scale(1.1)}.number-button.selected:hover{background:#c0392b;border-color:#c0392b}.number-button.advanced{border-color:#9b59b6;color:#9b59b6}.number-button.advanced:hover{background:#9b59b6;color:#fff}.number-button.advanced.selected{background:#8e44ad;border-color:#8e44ad;color:#fff}.number-button.advanced.selected:hover{background:#7d3c98;border-color:#7d3c98}.selection-actions{margin-top:2rem}.start-button{background:#27ae60;color:#fff;border:none;padding:1rem 2rem;font-size:1.2rem;font-weight:700;border-radius:8px;cursor:pointer;transition:all .3s ease;min-width:200px}.start-button:hover:not(:disabled){background:#229954;transform:translateY(-2px)}.start-button:disabled{background:#bdc3c7;cursor:not-allowed;transform:none}@media (max-width: 768px){.basic-grid,.advanced-grid{grid-template-columns:repeat(4,1fr);gap:.6rem}.number-button{width:45px;height:45px;font-size:1.1rem}.number-selection h2{font-size:1.5rem}.mode-section h3{font-size:1.1rem}}.emoji{position:absolute;font-size:28px;line-height:1;-webkit-user-select:none;user-select:none;pointer-events:none;will-change:transform,top,left;opacity:0;animation:fadeInEmoji .3s ease-in forwards}@keyframes fadeInEmoji{0%{opacity:0}to{opacity:1}}