*{box-sizing:border-box;margin:0;padding:0}body{font-family:Hiragino Kaku Gothic ProN,Hiragino Sans,Meiryo,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;display:flex;align-items:center;justify-content:center}.container{width:100%;max-width:480px;margin:0 auto;padding:24px 16px;text-align:center}.title{font-size:2.4rem;font-weight:700;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.3);margin-bottom:12px}.subtitle{font-size:1rem;color:rgba(255,255,255,.85);margin-bottom:40px}.mode-buttons{display:flex;flex-direction:column;gap:16px}.mode-btn{display:flex;align-items:center;justify-content:center;gap:16px;padding:24px 32px;border:none;border-radius:20px;font-size:1.6rem;font-weight:700;cursor:pointer;transition:transform .15s,box-shadow .15s;box-shadow:0 6px 20px rgba(0,0,0,.25);color:#fff}.mode-btn:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.3)}.mode-btn:active{transform:translateY(0)}.mode-btn.addition{background:linear-gradient(135deg,#f093fb,#f5576c)}.mode-btn.subtraction{background:linear-gradient(135deg,#4facfe,#00f2fe)}.mode-btn.multiplication{background:linear-gradient(135deg,#43e97b,#38f9d7)}.mode-icon{font-size:2rem}.mode-label{font-size:1.6rem}.game-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding:12px 20px;background:rgba(255,255,255,.2);border-radius:14px;color:#fff;font-size:1.3rem;font-weight:700}.timer-display{font-size:1.5rem}.timer-bar{width:100%;height:12px;background:rgba(255,255,255,.3);border-radius:6px;margin-bottom:32px;overflow:hidden}.timer-fill{height:100%;border-radius:6px;transition:width 1s linear,background-color .5s}.problem-area{background:#fff;border-radius:24px;padding:32px 24px;box-shadow:0 8px 32px rgba(0,0,0,.2)}.problem{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:24px;padding:16px;border-radius:16px;transition:background-color .3s}.problem.correct-flash{background:#dcfce7}.problem.wrong-flash{background:#fee2e2}.number{font-size:3.6rem;font-weight:700;color:#1e293b;min-width:2ch;text-align:center}.equals,.operator{font-size:3rem;font-weight:700;color:#6366f1}.question-mark{font-size:3.6rem;font-weight:700;color:#f59e0b}.feedback{font-size:1.6rem;font-weight:700;margin-bottom:16px;padding:10px;border-radius:12px;animation:fadeIn .2s ease}.feedback.correct{color:#16a34a;background:#dcfce7}.feedback.wrong{color:#dc2626;background:#fee2e2}@keyframes fadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.input-area{display:flex;gap:12px}.answer-input{flex:1 1;font-size:2rem;font-weight:700;text-align:center;padding:14px;border:3px solid #e2e8f0;border-radius:14px;outline:none;color:#1e293b;transition:border-color .2s;font-family:inherit}.answer-input:focus{border-color:#6366f1}.answer-input:disabled{background:#f8fafc}.answer-input::-webkit-inner-spin-button,.answer-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.submit-btn{padding:14px 20px;font-size:1.2rem;font-weight:700;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border:none;border-radius:14px;cursor:pointer;transition:transform .15s,opacity .2s;white-space:nowrap;font-family:inherit}.submit-btn:hover:not(:disabled){transform:translateY(-2px)}.submit-btn:disabled{opacity:.5;cursor:not-allowed}.result-card{background:#fff;border-radius:24px;padding:32px 24px;margin-bottom:24px;box-shadow:0 8px 32px rgba(0,0,0,.2)}.result-mode{font-size:1.2rem;color:#64748b;margin-bottom:8px}.result-score{font-size:3rem;font-weight:700;color:#6366f1;margin-bottom:8px}.result-wrong{font-size:1.2rem;color:#94a3b8;margin-bottom:16px}.result-stars{font-size:2.4rem;margin-bottom:12px}.result-message{font-size:1.4rem;font-weight:700;color:#1e293b}.result-buttons{display:flex;flex-direction:column;gap:12px}.play-again-btn{padding:18px;font-size:1.4rem;font-weight:700;background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff;border:none;border-radius:16px;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.2);transition:transform .15s;font-family:inherit}.play-again-btn:hover{transform:translateY(-2px)}.menu-btn{padding:14px;font-size:1.1rem;font-weight:700;background:rgba(255,255,255,.25);color:#fff;border:2px solid rgba(255,255,255,.5);border-radius:16px;cursor:pointer;transition:background .2s;font-family:inherit}.menu-btn:hover{background:rgba(255,255,255,.35)}