:root{--bg-primary:#1a1a2e;--bg-secondary:#16213e;--bg-card:#0f3460;--bg-card-light:#1a4a7a;--accent-yellow:#f5c518;--accent-yellow-dark:#d4a80a;--accent-blue:#4fc3f7;--accent-green:#66bb6a;--accent-red:#ef5350;--text-primary:#fff;--text-secondary:#b0bec5;--text-muted:#546e7a;--key-bg:#1e3a5f;--key-border:#2a5298;--key-active:#f5c518;--key-active-text:#1a1a2e;--shadow:0 4px 20px #00000080;--radius:12px}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-primary);color:var(--text-primary);min-height:100vh;font-family:Segoe UI,Noto Sans JP,sans-serif;overflow-x:hidden}#root{flex-direction:column;min-height:100vh;display:flex}button{cursor:pointer;border:none;outline:none;font-family:inherit}.start-screen{background:radial-gradient(#1a2a4a 0%,#1a1a2e 70%);flex-direction:column;justify-content:center;align-items:center;gap:32px;min-height:100vh;padding:24px;display:flex}.start-title{text-align:center}.start-title h1{color:var(--accent-yellow);text-shadow:0 0 20px #f5c51880;letter-spacing:4px;font-size:3rem;font-weight:900}.start-title p{color:var(--text-secondary);margin-top:8px;font-size:1.1rem}.start-card{background:var(--bg-card);border-radius:var(--radius);width:100%;max-width:480px;box-shadow:var(--shadow);flex-direction:column;gap:24px;padding:32px;display:flex}.time-selector label{color:var(--text-secondary);letter-spacing:1px;text-transform:uppercase;margin-bottom:12px;font-size:.9rem;display:block}.time-grid{grid-template-columns:repeat(5,1fr);gap:8px;display:grid}.time-btn{background:var(--key-bg);border:2px solid var(--key-border);color:var(--text-primary);border-radius:8px;padding:10px 4px;font-size:.9rem;font-weight:600;transition:all .15s}.time-btn:hover{background:var(--bg-card-light);border-color:var(--accent-blue)}.time-btn.selected{background:var(--accent-yellow);border-color:var(--accent-yellow);color:var(--bg-primary)}.start-btn{background:var(--accent-yellow);color:var(--bg-primary);letter-spacing:2px;border-radius:10px;padding:16px;font-size:1.2rem;font-weight:800;transition:all .15s;box-shadow:0 4px 15px #f5c51866}.start-btn:hover{background:var(--accent-yellow-dark);transform:translateY(-2px);box-shadow:0 6px 20px #f5c51880}.start-btn:active{transform:translateY(0)}.pokedex-nav-btn{color:var(--text-secondary);border:2px solid var(--key-border);letter-spacing:1px;background:0 0;border-radius:8px;padding:12px 24px;font-size:1rem;transition:all .15s}.pokedex-nav-btn:hover{border-color:var(--accent-blue);color:var(--accent-blue)}.game-screen{flex-direction:column;gap:12px;width:100%;max-width:900px;min-height:100vh;margin:0 auto;padding:16px;display:flex}.game-header{background:var(--bg-card);border-radius:10px;justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.timer{color:var(--accent-yellow);font-variant-numeric:tabular-nums;font-size:1.8rem;font-weight:800}.timer.urgent{color:var(--accent-red);animation:1s infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.score-info{color:var(--text-secondary);gap:16px;font-size:.85rem;display:flex}.score-info span{flex-direction:column;align-items:center;gap:2px;display:flex}.score-info .val{color:var(--text-primary);font-size:1.2rem;font-weight:700}.score-info .val.green{color:var(--accent-green)}.score-info .val.red{color:var(--accent-red)}.game-body{flex:1;gap:12px;display:flex}.pokemon-area{background:var(--bg-card);border-radius:var(--radius);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:12px;min-height:300px;padding:20px;display:flex;position:relative}.caught-badge{background:var(--accent-green);color:#fff;border-radius:20px;padding:4px 12px;font-size:.8rem;font-weight:700;animation:.3s pop;position:absolute;top:12px;right:12px}@keyframes pop{0%{transform:scale(0)}80%{transform:scale(1.2)}to{transform:scale(1)}}.pokemon-sprite{width:160px;height:160px;image-rendering:pixelated;filter:drop-shadow(0 4px 12px #00000080);transition:opacity .3s}.pokemon-sprite.loading{opacity:.3}.pokemon-name-ja{letter-spacing:4px;color:var(--text-primary);font-size:2rem;font-weight:800}.romaji-display{flex-wrap:wrap;justify-content:center;gap:2px;font-family:Courier New,monospace;font-size:1.5rem;font-weight:700;display:flex}.char-done{color:var(--accent-green)}.char-current{color:var(--accent-yellow);border-bottom:3px solid var(--accent-yellow);animation:.8s infinite blink}@keyframes blink{0%,to{opacity:1}50%{opacity:.4}}.char-wrong{color:var(--accent-red);border-bottom:3px solid var(--accent-red)}.char-pending{color:var(--text-muted)}.catch-count{background:var(--bg-secondary);border-radius:8px;align-items:center;gap:8px;padding:8px 16px;display:flex}.catch-count span{color:var(--text-secondary);font-size:.85rem}.catch-count strong{color:var(--accent-yellow);font-size:1.1rem}.keyboard-area{background:var(--bg-card);border-radius:var(--radius);padding:16px}.keyboard{flex-direction:column;align-items:center;gap:6px;display:flex}.key-row{gap:5px;display:flex}.key{background:var(--key-bg);border:2px solid var(--key-border);width:42px;height:42px;color:var(--text-secondary);-webkit-user-select:none;user-select:none;border-radius:6px;justify-content:center;align-items:center;font-size:.85rem;font-weight:700;transition:all .1s;display:flex;box-shadow:0 3px #0000004d}.key.active{background:var(--key-active);border-color:var(--key-active);color:var(--key-active-text);transform:translateY(-2px);box-shadow:0 0 12px #f5c51899,0 2px #0000004d}.key.pressed-correct{background:var(--accent-green);border-color:var(--accent-green);color:#fff}.key.pressed-wrong{background:var(--accent-red);border-color:var(--accent-red);color:#fff}.result-screen{flex-direction:column;align-items:center;gap:20px;width:100%;max-width:900px;min-height:100vh;margin:0 auto;padding:24px;display:flex}.result-title{color:var(--accent-yellow);letter-spacing:3px;font-size:2rem;font-weight:900}.stats-grid{grid-template-columns:repeat(2,1fr);gap:12px;width:100%;display:grid}.stat-card{background:var(--bg-card);border-radius:var(--radius);text-align:center;padding:20px}.stat-card .label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;font-size:.85rem}.stat-card .value{font-size:2.2rem;font-weight:900}.stat-card .value.green{color:var(--accent-green)}.stat-card .value.red{color:var(--accent-red)}.stat-card .value.yellow{color:var(--accent-yellow)}.stat-card .value.blue{color:var(--accent-blue)}.caught-section{background:var(--bg-card);border-radius:var(--radius);width:100%;padding:20px}.caught-section h3{color:var(--text-secondary);letter-spacing:1px;text-transform:uppercase;margin-bottom:16px;font-size:1.1rem}.caught-grid{flex-wrap:wrap;gap:8px;display:flex}.caught-item{background:var(--bg-secondary);border-radius:8px;flex-direction:column;align-items:center;gap:4px;width:80px;padding:8px;display:flex}.caught-item img{width:56px;height:56px;image-rendering:pixelated}.caught-item .name{color:var(--text-secondary);text-align:center;font-size:.65rem;line-height:1.2}.result-actions{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.btn-primary{background:var(--accent-yellow);color:var(--bg-primary);letter-spacing:1px;border-radius:10px;padding:14px 28px;font-size:1rem;font-weight:800;transition:all .15s}.btn-primary:hover{background:var(--accent-yellow-dark);transform:translateY(-2px)}.btn-secondary{color:var(--text-primary);border:2px solid var(--key-border);letter-spacing:1px;background:0 0;border-radius:10px;padding:14px 28px;font-size:1rem;font-weight:600;transition:all .15s}.btn-secondary:hover{border-color:var(--accent-blue);color:var(--accent-blue)}.btn-share{color:#fff;letter-spacing:1px;background:#1da1f2;border-radius:10px;padding:14px 28px;font-size:1rem;font-weight:700;transition:all .15s}.btn-share:hover{background:#1991db;transform:translateY(-2px)}.share-card{background:linear-gradient(135deg,#1a1a2e 0%,#0f3460 100%);border-radius:16px;width:600px;padding:32px;font-family:Segoe UI,sans-serif;position:fixed;top:0;left:-9999px}.share-card-title{text-align:center;margin-bottom:24px}.share-card-title h2{color:var(--accent-yellow);letter-spacing:3px;font-size:1.8rem;font-weight:900}.share-card-title p{color:var(--text-secondary);margin-top:4px;font-size:.9rem}.share-card-grid{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.share-item{background:#ffffff14;border-radius:8px;flex-direction:column;align-items:center;gap:4px;width:72px;padding:8px;display:flex}.share-item img{width:48px;height:48px;image-rendering:pixelated}.share-item .name{color:var(--text-secondary);text-align:center;font-size:.6rem}.share-card-footer{text-align:center;color:var(--text-muted);margin-top:20px;font-size:.75rem}.pokedex-screen{flex-direction:column;width:100%;max-width:1000px;min-height:100vh;margin:0 auto;padding:24px;display:flex}.pokedex-header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.pokedex-header h2{color:var(--accent-yellow);letter-spacing:2px;font-size:1.8rem;font-weight:900}.pokedex-stats{color:var(--text-secondary);font-size:.9rem}.pokedex-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px;display:grid}.dex-item{background:var(--bg-card);border:2px solid #0000;border-radius:10px;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;transition:all .15s;display:flex}.dex-item.caught{border-color:var(--accent-green)}.dex-item.caught:hover{transform:translateY(-2px);box-shadow:0 4px 12px #66bb6a4d}.dex-item img{width:64px;height:64px;image-rendering:pixelated}.dex-item.uncaught img{filter:brightness(0)invert(.1)}.dex-item .dex-id{color:var(--text-muted);font-size:.65rem}.dex-item .dex-name{color:var(--text-secondary);text-align:center;font-size:.65rem;line-height:1.2}.dex-item.uncaught .dex-name{color:var(--text-muted)}.loading-overlay{flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:100vh;display:flex}.pokeball-spinner{border:6px solid var(--key-border);border-top-color:var(--accent-yellow);border-radius:50%;width:64px;height:64px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.get-flash{pointer-events:none;z-index:100;background:#66bb6a26;justify-content:center;align-items:center;animation:.5s forwards flash;display:flex;position:fixed;inset:0}.get-flash-text{color:var(--accent-green);text-shadow:0 0 40px #66bb6acc;font-size:5rem;font-weight:900;animation:.5s forwards flashText}@keyframes flash{0%{opacity:1}to{opacity:0}}@keyframes flashText{0%{opacity:1;transform:scale(.5)}50%{opacity:1;transform:scale(1.3)}to{opacity:0;transform:scale(1)}}.gen-selector{flex-direction:column;gap:10px;display:flex}.gen-selector label{color:var(--text-secondary);letter-spacing:1px;text-transform:uppercase;font-size:.9rem}.gen-grid{grid-template-columns:repeat(5,1fr);gap:6px;display:grid}.gen-btn{background:var(--key-bg);border:2px solid var(--key-border);color:var(--text-primary);cursor:pointer;border-radius:8px;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;transition:all .15s;display:flex}.gen-btn:hover{border-color:var(--accent-blue)}.gen-btn.selected{background:var(--accent-yellow);border-color:var(--accent-yellow);color:var(--bg-primary)}.gen-short{font-size:.8rem;font-weight:700}.gen-long{opacity:.8;font-size:.6rem}.gen-note{color:var(--text-muted);text-align:center;font-size:.78rem}.loading-text{color:var(--text-primary);font-size:1.1rem;font-weight:700}.loading-pct{color:var(--accent-yellow);font-size:1.2rem;font-weight:800}.loading-note{color:var(--text-muted);text-align:center;max-width:280px;font-size:.8rem}.progress-bar-wrap{background:var(--key-border);border-radius:5px;width:280px;height:10px;overflow:hidden}.progress-bar{background:var(--accent-yellow);border-radius:5px;min-width:4px;height:100%;transition:width .25s}.dex-gen-tabs{flex-wrap:wrap;gap:4px;margin-bottom:16px;display:flex}.dex-tab{background:var(--key-bg);border:2px solid var(--key-border);color:var(--text-secondary);cursor:pointer;border-radius:6px;padding:6px 10px;font-size:.75rem;font-weight:600;transition:all .12s}.dex-tab:hover{border-color:var(--accent-blue);color:var(--accent-blue)}.dex-tab.active{background:var(--accent-yellow);border-color:var(--accent-yellow);color:var(--bg-primary)}.dex-load-note{color:var(--text-muted);text-align:center;margin-bottom:12px;font-size:.8rem}@media (width<=600px){.start-title h1{font-size:2rem}.time-grid{grid-template-columns:repeat(3,1fr)}.gen-grid{grid-template-columns:repeat(5,1fr)}.key{width:34px;height:34px;font-size:.75rem}.pokemon-sprite{width:120px;height:120px}.stats-grid{grid-template-columns:1fr 1fr}}