*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-text-size-adjust:100%}body{margin:0;min-height:100vh;line-height:1.5}button{font-family:inherit;font-size:inherit;cursor:pointer}img,svg{max-width:100%;height:auto}:root{--primary-color: #8b5cf6;--primary-hover: #7c3aed;--primary-light: #c4b5fd;--success-color: #10b981;--success-light: #6ee7b7;--error-color: #f43f5e;--warning-color: #f59e0b;--bg-color: linear-gradient(135deg, #fef3c7 0%, #fce7f3 50%, #dbeafe 100%);--card-bg: #ffffff;--text-color: #1e293b;--text-muted: #64748b;--border-color: #e2e8f0;--pop-pink: #ec4899;--pop-purple: #8b5cf6;--pop-blue: #3b82f6;--pop-cyan: #06b6d4;--pop-green: #10b981;--pop-yellow: #fbbf24;--pop-orange: #f97316;--pop-red: #f43f5e}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100vh;height:100dvh;overflow:hidden}body{font-family:Hiragino Sans,Hiragino Kaku Gothic ProN,Noto Sans JP,sans-serif;background:var(--bg-color);color:var(--text-color);-webkit-font-smoothing:antialiased}.app{display:flex;flex-direction:column;height:100%;max-width:480px;margin:0 auto;padding:12px}.app.loading{justify-content:center;align-items:center}.loading-spinner{width:50px;height:50px;border:4px solid var(--primary-light);border-top-color:var(--primary-color);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.menu-screen{display:flex;flex-direction:column;gap:16px;padding-bottom:24px;overflow-y:auto;-webkit-overflow-scrolling:touch}.title{font-size:32px;font-weight:800;text-align:center;background:linear-gradient(135deg,var(--pop-pink),var(--pop-purple),var(--pop-blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:titlePulse 2s ease-in-out infinite;text-shadow:0 4px 20px rgba(139,92,246,.3)}@keyframes titlePulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.subtitle{font-size:14px;text-align:center;color:var(--text-muted);margin-top:-8px;display:flex;align-items:center;justify-content:center;gap:8px}.subtitle:before{content:"✨"}.subtitle:after{content:"✨"}.grade-list{display:flex;flex-direction:column;gap:12px}.grade-button{display:flex;flex-direction:column;gap:8px;padding:16px 18px;background:var(--card-bg);border:3px solid transparent;border-radius:16px;cursor:pointer;text-align:left;box-shadow:0 4px 15px #0000001a;transition:all .3s ease;position:relative;overflow:hidden}.grade-button:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--pop-pink),var(--pop-purple),var(--pop-blue),var(--pop-cyan))}.grade-button:nth-child(1):before{background:linear-gradient(90deg,#f472b6,#fb7185)}.grade-button:nth-child(2):before{background:linear-gradient(90deg,#a78bfa,#8b5cf6)}.grade-button:nth-child(3):before{background:linear-gradient(90deg,#60a5fa,#3b82f6)}.grade-button:nth-child(4):before{background:linear-gradient(90deg,#34d399,#10b981)}.grade-button:hover{transform:translateY(-2px);box-shadow:0 8px 25px #00000026}.grade-button:active{transform:scale(.98)}.grade-button.completed{border-color:var(--success-color);background:linear-gradient(135deg,#ecfdf5,#d1fae5)}.grade-button.completed:before{background:linear-gradient(90deg,var(--success-color),var(--success-light))}.grade-header{display:flex;justify-content:space-between;align-items:center}.grade-label{font-size:18px;font-weight:700;color:var(--text-color)}.complete-badge{font-size:24px;animation:bounce 1s ease infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.progress-info{display:flex;flex-direction:column;gap:4px}.progress-bar{height:8px;background:linear-gradient(90deg,#f1f5f9,#e2e8f0);border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--pop-purple),var(--pop-pink));border-radius:4px;transition:width .5s ease}.grade-button:nth-child(1) .progress-fill{background:linear-gradient(90deg,#f472b6,#fb7185)}.grade-button:nth-child(2) .progress-fill{background:linear-gradient(90deg,#a78bfa,#8b5cf6)}.grade-button:nth-child(3) .progress-fill{background:linear-gradient(90deg,#60a5fa,#3b82f6)}.grade-button:nth-child(4) .progress-fill{background:linear-gradient(90deg,#34d399,#10b981)}.progress-text{display:flex;justify-content:space-between;font-size:12px;color:var(--text-muted);font-weight:500}.progress-text .stars{color:var(--pop-yellow)}.info-box{background:var(--card-bg);border:none;border-radius:16px;padding:16px 18px;box-shadow:0 4px 15px #00000014;position:relative;overflow:hidden}.info-box:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--pop-yellow),var(--pop-orange))}.info-box h3{font-size:15px;font-weight:700;margin-bottom:10px;color:var(--text-color)}.info-box ul{font-size:13px;color:var(--text-muted);padding-left:0;list-style:none;display:flex;flex-direction:column;gap:6px}.info-box li{display:flex;align-items:center;gap:8px}.info-box li:before{content:"•";color:var(--pop-purple);font-weight:700;font-size:18px}.quiz-screen{display:grid;grid-template-rows:auto auto 1fr auto 35%;height:100%;overflow:hidden}.quiz-header{display:flex;justify-content:space-between;align-items:center;padding:4px 0}.quiz-progress{display:flex;align-items:center;gap:2vw}.review-badge{background:linear-gradient(135deg,var(--pop-orange),var(--pop-yellow));color:#fff;font-size:3vw;font-weight:700;padding:.5vh 2vw;border-radius:2vw;box-shadow:0 2px 10px #f59e0b66}.question-count{font-size:3.5vw;color:var(--text-muted);font-weight:600}.score{font-size:3.5vw;font-weight:700;background:linear-gradient(135deg,var(--pop-purple),var(--pop-pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.progress-indicator{height:6px;background:linear-gradient(90deg,#f1f5f9,#e2e8f0);border-radius:3px;overflow:hidden}.progress-bar-mini{height:100%;background:linear-gradient(90deg,var(--pop-purple),var(--pop-pink),var(--pop-orange));transition:width .3s ease}.kanji-display{display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden}.kanji-character{font-size:20vh;font-weight:500;line-height:1;color:var(--text-color);text-shadow:0 4px 20px rgba(0,0,0,.1);animation:kanjiAppear .4s ease-out}@keyframes kanjiAppear{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.kanji-info{display:flex;gap:2vw;margin-top:1vh;align-items:center}.correct-streak{display:flex;gap:1vw;font-size:4vw}.correct-streak .filled{color:var(--success-color);animation:starPop .3s ease}@keyframes starPop{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}.correct-streak .empty{color:#d1d5db}.attempt-count{font-size:3vw;color:var(--text-muted)}.star-count{font-size:3vw;color:var(--pop-yellow)}.question-text{font-size:4.5vw;font-weight:600;text-align:center;display:flex;align-items:center;justify-content:center;color:var(--text-color)}.choices{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3vw}.choice-button{font-size:5.5vw;font-weight:600;background:var(--card-bg);border:3px solid #e2e8f0;border-radius:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 15px #00000014;transition:all .2s ease}.choice-button:hover{transform:translateY(-2px);border-color:var(--pop-purple);box-shadow:0 6px 20px #8b5cf633}.choice-button:active{transform:scale(.97)}.choice-button.correct{border-color:var(--success-color);background:linear-gradient(135deg,#ecfdf5,#d1fae5);color:var(--success-color);animation:correctPulse .5s ease}@keyframes correctPulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.choice-button.incorrect{border-color:var(--error-color);background:linear-gradient(135deg,#fef2f2,#fee2e2);color:var(--error-color);animation:incorrectShake .4s ease}@keyframes incorrectShake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.choice-button:disabled{cursor:default}.result-overlay{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 40px;border-radius:20px;animation:overlayPop .3s ease;z-index:100;box-shadow:0 10px 40px #0003}@keyframes overlayPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.result-overlay.correct{background:linear-gradient(135deg,var(--success-color),var(--success-light));color:#fff}.result-overlay.incorrect{background:linear-gradient(135deg,var(--error-color),#fb7185);color:#fff}.result-icon{font-size:44px}.result-overlay .correct-answer{font-size:18px;font-weight:600}.review-screen{display:flex;flex-direction:column;height:100%;gap:14px}.review-title{font-size:22px;font-weight:800;text-align:center;background:linear-gradient(135deg,var(--pop-orange),var(--pop-yellow));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;flex-shrink:0}.review-description{font-size:14px;text-align:center;color:var(--text-muted);flex-shrink:0}.wrong-list{flex:1;display:flex;flex-direction:column;gap:10px;overflow-y:auto;min-height:0}.wrong-item{display:flex;align-items:center;gap:14px;padding:12px 14px;background:var(--card-bg);border:none;border-radius:14px;flex-shrink:0;box-shadow:0 3px 12px #00000014;border-left:4px solid var(--error-color)}.wrong-kanji{font-size:32px;width:44px;text-align:center;color:var(--text-color)}.wrong-details{flex:1;font-size:14px}.your-answer .incorrect{color:var(--error-color);font-weight:600}.wrong-details .correct-answer .correct{color:var(--success-color);font-weight:600}.review-buttons{display:flex;flex-direction:column;gap:10px;flex-shrink:0;padding-bottom:env(safe-area-inset-bottom,0)}.result-screen{display:flex;flex-direction:column;height:100%;gap:12px}.result-title{font-size:20px;font-weight:800;text-align:center;color:var(--text-color);flex-shrink:0}.result-grade{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px;border-radius:20px;flex-shrink:0;box-shadow:0 4px 20px #0000001a}.result-grade.perfect,.result-grade.excellent{background:linear-gradient(135deg,#fef3c7,#fde68a);border:3px solid var(--pop-yellow)}.result-grade.great{background:linear-gradient(135deg,#ede9fe,#ddd6fe);border:3px solid var(--pop-purple)}.result-grade.good{background:linear-gradient(135deg,#d1fae5,#a7f3d0);border:3px solid var(--success-color)}.result-grade.ok{background:linear-gradient(135deg,#f1f5f9,#e2e8f0);border:3px solid #94a3b8}.result-grade.needs-work{background:linear-gradient(135deg,#fee2e2,#fecaca);border:3px solid var(--error-color)}.result-emoji{font-size:48px;animation:emojiPop .5s ease}@keyframes emojiPop{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}.result-text{font-size:20px;font-weight:800}.result-stats{display:flex;justify-content:space-around;padding:14px;background:var(--card-bg);border:none;border-radius:16px;flex-shrink:0;box-shadow:0 3px 15px #00000014}.stat-item{display:flex;align-items:baseline;gap:2px}.stat-item.large{font-size:28px;font-weight:800;background:linear-gradient(135deg,var(--pop-purple),var(--pop-pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.stat-separator,.stat-total{color:var(--text-muted)}.stat-percentage{font-size:18px;font-weight:700;background:linear-gradient(135deg,var(--pop-blue),var(--pop-cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.completed-badge{text-align:center;padding:12px;background:linear-gradient(135deg,#fef3c7,#fde68a);border-radius:14px;font-size:15px;font-weight:700;flex-shrink:0;box-shadow:0 3px 15px #fbbf244d;border:2px solid var(--pop-yellow)}.completed-badge small{font-size:12px;font-weight:500;color:#92400e}.answer-list{flex:1;min-height:0;background:var(--card-bg);border:none;border-radius:14px;padding:12px;overflow-y:auto;box-shadow:0 3px 12px #0000000f}.answer-list h3{font-size:13px;margin-bottom:10px;color:var(--text-muted);font-weight:600}.answer-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.answer-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;border-radius:10px;transition:transform .2s ease}.answer-item:hover{transform:scale(1.05)}.answer-item.correct{background:linear-gradient(135deg,#d1fae5,#a7f3d0)}.answer-item.incorrect{background:linear-gradient(135deg,#fee2e2,#fecaca)}.answer-kanji{font-size:18px;font-weight:500}.answer-status{font-size:12px}.result-buttons{display:flex;gap:10px;flex-shrink:0;padding-bottom:env(safe-area-inset-bottom,0)}.result-buttons .primary-button,.result-buttons .secondary-button{flex:1}.primary-button{padding:14px 18px;font-size:16px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--pop-purple),var(--pop-pink));border:none;border-radius:14px;cursor:pointer;box-shadow:0 4px 15px #8b5cf666;transition:all .2s ease}.primary-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #8b5cf680}.primary-button:active{transform:scale(.98)}.secondary-button{padding:14px 18px;font-size:16px;font-weight:700;color:var(--text-color);background:var(--card-bg);border:3px solid #e2e8f0;border-radius:14px;cursor:pointer;box-shadow:0 4px 12px #00000014;transition:all .2s ease}.secondary-button:hover{transform:translateY(-2px);border-color:var(--pop-purple);box-shadow:0 6px 18px #8b5cf626}.secondary-button:active{transform:scale(.98)}