:root{--mint: #00C9A7;--mint-light: #E0FFF8;--mint-dark: #00A88A;--white: #FFFFFF;--gray-50: #F9FAFB;--gray-100: #F3F4F6;--gray-200: #E5E7EB;--gray-300: #D1D5DB;--gray-400: #9CA3AF;--gray-500: #6B7280;--gray-600: #4B5563;--gray-700: #374151;--gray-800: #1F2937;--green: #10B981;--red: #EF4444;--orange: #F59E0B;--blue: #3B82F6}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--gray-50);color:var(--gray-800);max-width:375px;margin:0 auto;min-height:100vh;-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none}#root{min-height:100vh;display:flex;flex-direction:column}button{cursor:pointer;border:none;outline:none;font-family:inherit}input{font-family:inherit;outline:none}.app{min-height:100vh;display:flex;flex-direction:column;background:var(--gray-50)}.screen{flex:1;display:flex;flex-direction:column;padding:16px}.top-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 0;margin-bottom:8px}.back-btn{background:none;font-size:20px;color:var(--gray-600);padding:4px 8px}.top-title{font-size:18px;font-weight:700;color:var(--gray-800)}.top-spacer{width:36px}.btn-primary{background:var(--mint);color:#fff;border-radius:12px;padding:14px 24px;font-size:16px;font-weight:600;width:100%;transition:background .2s}.btn-primary:active{background:var(--mint-dark)}.btn-secondary{background:var(--gray-100);color:var(--gray-700);border-radius:12px;padding:14px 24px;font-size:16px;font-weight:600;width:100%}.btn-secondary:active{background:var(--gray-200)}.btn-small{padding:8px 16px;font-size:13px;border-radius:8px}.card{background:#fff;border-radius:16px;padding:20px;box-shadow:0 1px 3px #0000000f}.home-header{text-align:center;padding:32px 0 24px}.home-emoji{font-size:56px;margin-bottom:12px}.home-title{font-size:28px;font-weight:800;color:var(--gray-800);margin-bottom:4px}.home-subtitle{font-size:14px;color:var(--gray-500)}.mode-list{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}.mode-card{background:#fff;border-radius:16px;padding:20px;display:flex;align-items:center;gap:16px;box-shadow:0 1px 3px #0000000f;cursor:pointer;transition:transform .15s}.mode-card:active{transform:scale(.98)}.mode-icon{font-size:36px;flex-shrink:0}.mode-info{flex:1}.mode-name{font-size:17px;font-weight:700;margin-bottom:4px}.mode-desc{font-size:13px;color:var(--gray-500);line-height:1.4}.mode-arrow{color:var(--gray-400);font-size:18px}.home-bottom{display:flex;gap:8px;margin-top:auto;padding-bottom:20px}.game-hud{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.hud-item{text-align:center}.hud-label{font-size:11px;color:var(--gray-500);margin-bottom:2px}.hud-value{font-size:20px;font-weight:700;color:var(--mint)}.hud-value.warning{color:var(--red)}.sentence-display{background:#fff;border-radius:16px;padding:24px 20px;margin-bottom:16px;min-height:120px;display:flex;align-items:center;box-shadow:0 1px 3px #0000000f}.sentence-text{font-size:20px;line-height:1.6;word-break:keep-all;letter-spacing:.3px}.char-correct{color:var(--green)}.char-current{background:var(--mint-light);border-bottom:2px solid var(--mint)}.char-wrong{color:var(--red);text-decoration:underline}.char-pending{color:var(--gray-400)}.typing-input{width:100%;padding:16px 20px;font-size:18px;border:2px solid var(--gray-200);border-radius:12px;background:#fff;transition:border-color .2s}.typing-input:focus{border-color:var(--mint)}.typing-input.error{border-color:var(--red)}.combo-display{text-align:center;margin:12px 0;font-size:14px;font-weight:600;color:var(--orange);min-height:20px}.progress-bar{height:4px;background:var(--gray-200);border-radius:2px;margin-bottom:16px;overflow:hidden}.progress-fill{height:100%;background:var(--mint);border-radius:2px;transition:width .3s}.bomb-canvas-container{flex:1;position:relative;background:#fff;border-radius:16px;overflow:hidden;margin-bottom:12px;box-shadow:0 1px 3px #0000000f}.bomb-canvas{width:100%;height:100%;display:block}.bomb-input-area{display:flex;gap:8px}.bomb-input{flex:1;padding:14px 16px;font-size:18px;border:2px solid var(--gray-200);border-radius:12px;background:#fff}.bomb-input:focus{border-color:var(--mint)}.dictation-card{background:#fff;border-radius:16px;padding:32px 20px;text-align:center;margin-bottom:16px;box-shadow:0 1px 3px #0000000f}.dictation-question{font-size:14px;color:var(--gray-500);margin-bottom:12px}.dictation-word{font-size:28px;font-weight:700;margin-bottom:8px}.dictation-hint{font-size:13px;color:var(--gray-400);margin-top:12px}.dictation-options{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}.dictation-option{padding:16px;border-radius:12px;font-size:18px;font-weight:600;background:#fff;border:2px solid var(--gray-200);transition:all .2s}.dictation-option:active{transform:scale(.98)}.dictation-option.correct{border-color:var(--green);background:#ecfdf5;color:var(--green)}.dictation-option.wrong{border-color:var(--red);background:#fef2f2;color:var(--red)}.dictation-progress{font-size:13px;color:var(--gray-500);text-align:center}.result-screen{flex:1;display:flex;flex-direction:column;padding:16px;text-align:center}.result-header{padding:24px 0}.result-emoji{font-size:64px;margin-bottom:12px}.result-title{font-size:24px;font-weight:800;margin-bottom:4px}.result-subtitle{font-size:14px;color:var(--gray-500)}.result-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}.stat-card{background:#fff;border-radius:12px;padding:16px;box-shadow:0 1px 3px #0000000f}.stat-value{font-size:28px;font-weight:800;color:var(--mint)}.stat-label{font-size:12px;color:var(--gray-500);margin-top:4px}.result-graph{background:#fff;border-radius:16px;padding:16px;margin-bottom:20px;box-shadow:0 1px 3px #0000000f}.result-graph canvas{width:100%;height:120px}.result-buttons{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-bottom:20px}.reward-btn{background:var(--orange);color:#fff;border-radius:12px;padding:14px;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px}.leaderboard-list{display:flex;flex-direction:column;gap:8px}.lb-item{background:#fff;border-radius:12px;padding:14px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 1px 3px #0000000f}.lb-rank{width:28px;height:28px;border-radius:50%;background:var(--gray-100);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--gray-600);flex-shrink:0}.lb-rank.gold{background:#fef3c7;color:#d97706}.lb-rank.silver{background:#f3f4f6;color:#6b7280}.lb-rank.bronze{background:#fed7aa;color:#ea580c}.lb-name{flex:1;font-size:15px;font-weight:600}.lb-score{font-size:16px;font-weight:700;color:var(--mint)}.ad-banner{background:var(--gray-100);border-radius:8px;padding:8px;text-align:center;font-size:11px;color:var(--gray-400);margin:8px 0}.countdown-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.countdown-number{font-size:80px;font-weight:800;color:#fff;animation:countPulse .5s ease}@keyframes countPulse{0%{transform:scale(.5);opacity:0}50%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}@keyframes explode{0%{transform:scale(1);opacity:1}to{transform:scale(2);opacity:0}}.word-explode{animation:explode .3s ease-out forwards}