*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--yamanote-green: #9acd32;--yamanote-dark: #7cb518;--bg-primary: #0a0f1c;--bg-secondary: #141b2d;--bg-card: #1a2238;--text-primary: #f0f4f8;--text-secondary: #94a3b8;--accent-correct: #22c55e;--accent-wrong: #ef4444;--accent-hover: #b8e055;--shadow-glow: 0 0 30px rgba(154, 205, 50, .3);font-family:Noto Sans JP,Hiragino Sans,Hiragino Kaku Gothic ProN,Yu Gothic,Meiryo,sans-serif;line-height:1.6;font-weight:400;color:var(--text-primary);background:var(--bg-primary);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{min-height:100vh;background:radial-gradient(ellipse at 20% 0%,rgba(154,205,50,.1) 0%,transparent 50%),radial-gradient(ellipse at 80% 100%,rgba(124,181,24,.08) 0%,transparent 50%),linear-gradient(180deg,var(--bg-primary) 0%,var(--bg-secondary) 100%);background-attachment:fixed}.app{min-height:100vh;display:flex;flex-direction:column}.header{padding:1.5rem 2rem;text-align:center;border-bottom:1px solid rgba(154,205,50,.2);background:#0a0f1ccc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:sticky;top:0;z-index:100}.title{font-size:1.8rem;font-weight:700;color:var(--yamanote-green);display:flex;align-items:center;justify-content:center;gap:.5rem;letter-spacing:.05em;text-shadow:0 0 20px rgba(154,205,50,.5)}.title-icon{font-size:2rem;animation:train-move 3s ease-in-out infinite}@keyframes train-move{0%,to{transform:translate(0)}50%{transform:translate(5px)}}.title-sub{font-size:.9rem;font-weight:400;color:var(--text-secondary);margin-left:.5rem}.main{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem}.footer{padding:1rem 2rem;text-align:center;color:var(--text-secondary);font-size:.85rem;border-top:1px solid rgba(154,205,50,.1)}.loading{font-size:1.2rem;color:var(--text-secondary);animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.quiz-container{width:100%;max-width:600px}.progress{margin-bottom:2rem}.progress-text{display:block;text-align:center;margin-bottom:.5rem;color:var(--text-secondary);font-size:.95rem}.progress-bar{height:8px;background:var(--bg-card);border-radius:4px;overflow:hidden;box-shadow:inset 0 2px 4px #0000004d}.progress-fill{height:100%;background:linear-gradient(90deg,var(--yamanote-dark),var(--yamanote-green));border-radius:4px;transition:width .3s ease;box-shadow:0 0 10px var(--yamanote-green)}.question-card{background:var(--bg-card);border-radius:20px;padding:2.5rem;box-shadow:0 10px 40px #0006,var(--shadow-glow);border:1px solid rgba(154,205,50,.2)}.prompt{font-size:1.5rem;font-weight:600;text-align:center;margin-bottom:2rem;color:var(--text-primary);line-height:1.6}.station-name{font-weight:700}.station-kana{font-size:.7em;font-weight:400;color:var(--text-secondary)}.choices{display:grid;gap:1rem}.choice-button{padding:1.2rem 1.5rem;font-size:1.2rem;font-weight:500;border:2px solid rgba(154,205,50,.3);border-radius:12px;background:#9acd320d;color:var(--text-primary);cursor:pointer;transition:all .2s ease;font-family:inherit}.choice-button:hover:not(:disabled){background:#9acd3226;border-color:var(--yamanote-green);transform:translateY(-2px);box-shadow:0 5px 20px #9acd3233}.choice-button:active:not(:disabled){transform:translateY(0)}.choice-button:disabled{cursor:not-allowed;opacity:.7}.choice-button.correct{background:#22c55e33;border-color:var(--accent-correct);color:var(--accent-correct);box-shadow:0 0 20px #22c55e4d}.choice-button.wrong{background:#ef444433;border-color:var(--accent-wrong);color:var(--accent-wrong);box-shadow:0 0 20px #ef44444d}.choice-name{font-weight:600}.choice-kana{font-size:.7em;font-weight:400;color:var(--text-secondary);margin-left:.3em}.feedback{text-align:center;margin-top:1.5rem;padding:1rem;border-radius:12px;font-size:1.5rem;font-weight:700;animation:feedback-pop .3s ease-out}@keyframes feedback-pop{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.feedback-correct{background:#22c55e33;border:2px solid var(--accent-correct);color:var(--accent-correct)}.feedback-wrong{background:#ef444433;border:2px solid var(--accent-wrong);color:var(--accent-wrong)}.score-display{text-align:center;margin-top:1.5rem;color:var(--text-secondary);font-size:.95rem}.result-container{width:100%;max-width:600px}.result-card{background:var(--bg-card);border-radius:20px;padding:2.5rem;box-shadow:0 10px 40px #0006,var(--shadow-glow);border:1px solid rgba(154,205,50,.2);text-align:center}.result-title{font-size:1.8rem;font-weight:700;color:var(--yamanote-green);margin-bottom:2rem}.result-score{font-size:4rem;font-weight:700;display:flex;align-items:baseline;justify-content:center;gap:.3rem}.score-number{color:var(--yamanote-green);text-shadow:0 0 30px rgba(154,205,50,.5)}.score-divider,.score-total{color:var(--text-secondary);font-size:2.5rem}.result-percentage{font-size:1.5rem;color:var(--text-secondary);margin:.5rem 0 1rem}.result-message{font-size:1.8rem;margin-bottom:2rem}.wrong-answers{margin-top:2rem;text-align:left;border-top:1px solid rgba(154,205,50,.2);padding-top:1.5rem}.wrong-title{font-size:1.2rem;font-weight:600;color:var(--text-primary);margin-bottom:1rem}.wrong-list{list-style:none}.wrong-item{background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:10px;padding:1rem;margin-bottom:.75rem}.wrong-prompt{font-weight:500;margin-bottom:.5rem;color:var(--text-primary)}.wrong-details{display:flex;flex-direction:column;gap:.25rem;font-size:.9rem}.wrong-chosen{color:var(--accent-wrong)}.wrong-correct{color:var(--accent-correct)}.yamanote-circle-container{margin:2rem 0;padding:1rem 0;background:#9acd320d;border:1px solid rgba(154,205,50,.2);border-radius:16px}.yamanote-circle-title{text-align:center;font-size:1.1rem;font-weight:600;color:var(--yamanote-green);margin-bottom:1rem}.yamanote-circle-svg{width:100%;max-width:450px;height:auto;margin:0 auto;display:block}.station-label{font-family:Noto Sans JP,sans-serif;pointer-events:none}.station-label.wrong,.station-label.correct{font-weight:700}.yamanote-legend{display:flex;justify-content:center;gap:1.5rem;margin-top:1rem;font-size:.85rem;color:var(--text-secondary)}.legend-item{display:flex;align-items:center;gap:.4rem}.legend-dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--bg-primary)}.legend-dot.correct{background:var(--accent-correct)}.legend-dot.wrong{background:var(--accent-wrong)}.retry-button{margin-top:2rem;padding:1rem 3rem;font-size:1.1rem;font-weight:600;border:none;border-radius:12px;background:linear-gradient(135deg,var(--yamanote-dark),var(--yamanote-green));color:var(--bg-primary);cursor:pointer;transition:all .2s ease;font-family:inherit;box-shadow:0 5px 20px #9acd324d}.retry-button:hover{transform:translateY(-2px);box-shadow:0 8px 30px #9acd3266}.retry-button:active{transform:translateY(0)}@media(max-width:640px){.header{padding:1rem}.title{font-size:1.4rem}.title-sub{display:none}.main{padding:1rem}.question-card,.result-card{padding:1.5rem;border-radius:16px}.prompt{font-size:1.25rem}.choice-button{padding:1rem;font-size:1.1rem}.result-score{font-size:3rem}.score-divider,.score-total{font-size:2rem}.line-select-container{padding:0 1rem}.operator-button{padding:.8rem 1rem}.line-button{padding:.6rem 1rem}}.line-select-container{width:100%;max-width:600px}.line-select-header{text-align:center;margin-bottom:2rem}.line-select-title{font-size:1.5rem;font-weight:700;color:var(--yamanote-green);margin-bottom:.5rem}.line-select-subtitle{color:var(--text-secondary);font-size:.95rem}.operator-list{display:flex;flex-direction:column;gap:.5rem}.operator-group{border-radius:12px;overflow:hidden}.operator-button{width:100%;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;background:var(--bg-card);border:1px solid rgba(154,205,50,.2);border-radius:12px;color:var(--text-primary);font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;font-family:inherit}.operator-button:hover{background:#9acd321a;border-color:var(--yamanote-green)}.operator-button.expanded{border-radius:12px 12px 0 0;border-bottom:none;background:#9acd3226;border-color:var(--yamanote-green)}.operator-name{flex:1;text-align:left}.operator-count{color:var(--text-secondary);font-size:.85rem;font-weight:400;margin-right:1rem}.operator-arrow{color:var(--yamanote-green);font-size:.8rem;transition:transform .2s ease}.operator-arrow.expanded{transform:rotate(180deg)}.line-list{display:flex;flex-direction:column;background:#1a223880;border:1px solid rgba(154,205,50,.2);border-top:none;border-radius:0 0 12px 12px;overflow:hidden}.line-button{width:100%;padding:.8rem 1.5rem;display:flex;align-items:center;justify-content:space-between;background:transparent;border:none;border-bottom:1px solid rgba(154,205,50,.1);color:var(--text-primary);font-size:.95rem;cursor:pointer;transition:all .2s ease;font-family:inherit}.line-button:last-child{border-bottom:none}.line-button:hover:not(.disabled){background:#9acd321a}.line-button.disabled{opacity:.4;cursor:not-allowed}.line-name{text-align:left}.station-count{color:var(--text-secondary);font-size:.85rem}.result-line-name{text-align:center;color:var(--text-secondary);font-size:1rem;margin-bottom:1rem}.result-buttons{display:flex;flex-direction:column;gap:.75rem;margin-top:2rem}.back-button{padding:.8rem 2rem;font-size:1rem;font-weight:500;border:2px solid rgba(154,205,50,.3);border-radius:12px;background:transparent;color:var(--text-primary);cursor:pointer;transition:all .2s ease;font-family:inherit}.back-button:hover{background:#9acd321a;border-color:var(--yamanote-green)}.back-to-select-button{margin-top:1.5rem;padding:.6rem 1.2rem;font-size:.9rem;font-weight:400;border:1px solid rgba(148,163,184,.3);border-radius:8px;background:transparent;color:var(--text-secondary);cursor:pointer;transition:all .2s ease;font-family:inherit}.back-to-select-button:hover{background:#94a3b81a;border-color:var(--text-secondary);color:var(--text-primary)}.line-map-container{margin:1.5rem 0;padding:1rem 0;border-top:1px solid rgba(154,205,50,.2);border-bottom:1px solid rgba(154,205,50,.2)}.line-map-title{text-align:center;color:var(--yamanote-green);font-size:1rem;font-weight:600;margin-bottom:1rem}.line-map-scroll{max-height:350px;overflow-y:auto;padding:0 1rem;scrollbar-width:thin;scrollbar-color:var(--yamanote-green) rgba(154,205,50,.1)}.line-map-scroll::-webkit-scrollbar{width:6px}.line-map-scroll::-webkit-scrollbar-track{background:#9acd321a;border-radius:3px}.line-map-scroll::-webkit-scrollbar-thumb{background:var(--yamanote-green);border-radius:3px}.line-map-svg{width:100%;max-width:200px;margin:0 auto;display:block}.line-map-legend{display:flex;justify-content:center;gap:1.5rem;margin-top:1rem;font-size:.8rem;color:var(--text-secondary)}.home-container{width:100%;max-width:600px}.home-header{text-align:center;margin-bottom:2rem}.home-title{font-size:1.5rem;font-weight:700;color:var(--yamanote-green);margin-bottom:.5rem}.home-subtitle{color:var(--text-secondary);font-size:.95rem}.mode-buttons{display:flex;flex-direction:column;gap:1rem}.mode-button{display:flex;flex-direction:column;align-items:center;padding:1.5rem;background:var(--bg-card);border:2px solid rgba(154,205,50,.2);border-radius:16px;cursor:pointer;transition:all .2s ease;font-family:inherit}.mode-button:hover{transform:translateY(-3px);box-shadow:0 8px 30px #9acd3233}.mode-button.station-mode{border-color:#9acd3266}.mode-button.station-mode:hover{background:#9acd321a;border-color:var(--yamanote-green)}.mode-button.station-input-mode{border-color:#22c55e66}.mode-button.station-input-mode:hover{background:#22c55e1a;border-color:#22c55e}.mode-button.station-kanji-mode{border-color:#fb923c66}.mode-button.station-kanji-mode:hover{background:#fb923c1a;border-color:#fb923c}.mode-button.koban-mode{border-color:#3b82f666}.mode-button.koban-mode:hover{background:#3b82f61a;border-color:#3b82f6}.mode-button.place-mode{border-color:#a855f766}.mode-button.place-mode:hover{background:#a855f71a;border-color:#a855f7}.mode-icon{font-size:2.5rem;margin-bottom:.5rem}.mode-name{font-size:1.3rem;font-weight:700;color:var(--text-primary);margin-bottom:.3rem}.mode-description{font-size:.9rem;color:var(--text-secondary)}.extra-quiz-container{width:100%;max-width:600px}.extra-question-card{padding-bottom:1rem}.extra-quiz-instruction{text-align:center;color:var(--text-secondary);font-size:.9rem;margin-bottom:.5rem}.extra-quiz-prompt{font-size:2rem;font-weight:700;text-align:center;margin-bottom:1.5rem;color:var(--yamanote-green);text-shadow:0 0 20px rgba(154,205,50,.3)}.correct-answer{display:block;margin-top:.5rem;font-size:1.1rem;color:var(--accent-correct)}.hiragana-keyboard{user-select:none;-webkit-user-select:none;touch-action:none}.keyboard-input-display{background:#0a0f1ccc;border:2px solid rgba(154,205,50,.3);border-radius:12px;padding:.8rem 1rem;margin-bottom:.75rem;min-height:2.5rem;display:flex;align-items:center;justify-content:center}.input-text{font-size:1.4rem;font-weight:600;color:var(--text-primary);letter-spacing:.1em}.input-cursor{color:var(--yamanote-green);animation:cursor-blink 1s step-end infinite;margin-left:2px}@keyframes cursor-blink{0%,to{opacity:1}50%{opacity:0}}.keyboard-grid-3x4{display:flex;flex-direction:column;gap:6px;margin-bottom:.5rem}.keyboard-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.keyboard-key{position:relative;aspect-ratio:1.2;display:flex;align-items:center;justify-content:center;background:#9acd321a;border:1px solid rgba(154,205,50,.3);border-radius:10px;cursor:pointer;transition:all .1s ease;font-family:inherit}.keyboard-key:hover{background:#9acd3233;border-color:var(--yamanote-green)}.keyboard-key:active,.keyboard-key.active{background:#9acd324d;transform:scale(.97)}.key-main{font-size:1.6rem;font-weight:600;color:var(--text-primary)}.key-sub{font-size:1rem;font-weight:500;color:var(--text-secondary)}.control-key-inline{background:#94a3b81a;border-color:#94a3b84d}.control-key-inline:hover{background:#94a3b833}.control-key-inline.delete{background:#ef44441a;border-color:#ef44444d}.control-key-inline.delete .key-main{color:var(--accent-wrong)}.flick-preview{position:absolute;width:220%;height:220%;display:grid;grid-template-areas:". up ." "left center right" ". down .";grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;z-index:100;pointer-events:none}.flick-char{display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:600;color:var(--text-secondary);background:#1a2238fa;border:1px solid rgba(154,205,50,.3);border-radius:8px;transition:all .08s ease}.flick-char.up{grid-area:up}.flick-char.left{grid-area:left}.flick-char.center{grid-area:center}.flick-char.right{grid-area:right}.flick-char.down{grid-area:down}.flick-char.active{background:#9acd3280;color:var(--text-primary);border-color:var(--yamanote-green);transform:scale(1.1);z-index:1;box-shadow:0 0 15px #9acd3266}.keyboard-bottom-controls{display:flex;margin-top:.75rem}.submit-button{flex:1;padding:.8rem 1rem;font-size:1.1rem;font-weight:700;background:linear-gradient(135deg,var(--yamanote-dark),var(--yamanote-green));border:none;border-radius:10px;color:var(--bg-primary);cursor:pointer;transition:all .1s ease;font-family:inherit}.submit-button:hover{box-shadow:0 4px 15px #9acd3266}.submit-button:active{transform:scale(.97)}.submit-button.full-width{width:100%}.error-message{text-align:center;padding:2rem;color:var(--accent-wrong);background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:12px;margin-bottom:1rem}.prompt-kana{display:block;font-size:.7em;font-weight:400;color:var(--text-secondary);margin-top:.3rem}@media(min-width:768px){.keyboard-grid-3x4,.keyboard-bottom-controls{max-width:320px;margin-left:auto;margin-right:auto}.keyboard-key{aspect-ratio:1.5;min-height:55px}.key-main{font-size:1.8rem}}@media(max-width:640px){.keyboard-grid-3x4{gap:4px;max-width:280px;margin:0 auto}.keyboard-row{gap:4px}.keyboard-key{aspect-ratio:1.3;min-height:48px}.key-main{font-size:1.2rem}.key-sub{font-size:.8rem}.keyboard-input-display{padding:.6rem .8rem;min-height:2rem}.input-text{font-size:1.1rem}.keyboard-bottom-controls{max-width:280px;margin:.5rem auto 0}.submit-button{padding:.7rem;font-size:1rem}.extra-quiz-prompt{font-size:1.6rem}.mode-button{padding:1.2rem}.mode-icon{font-size:2rem}.mode-name{font-size:1.1rem}.flick-preview{width:200%;height:200%}.flick-char{font-size:1.1rem}}.kanji-input-container{display:flex;flex-direction:column;gap:.75rem}.kanji-input{width:100%;padding:1rem 1.2rem;font-size:1.3rem;font-weight:500;background:#0a0f1ccc;border:2px solid rgba(154,205,50,.3);border-radius:12px;color:var(--text-primary);font-family:inherit;text-align:center;transition:all .2s ease}.kanji-input:focus{outline:none;border-color:var(--yamanote-green);box-shadow:0 0 15px #9acd324d}.kanji-input::placeholder{color:var(--text-secondary);opacity:.6}.kanji-submit-button{padding:.8rem 1.5rem;font-size:1.1rem;font-weight:700;background:linear-gradient(135deg,var(--yamanote-dark),var(--yamanote-green));border:none;border-radius:10px;color:var(--bg-primary);cursor:pointer;transition:all .15s ease;font-family:inherit}.kanji-submit-button:hover:not(:disabled){box-shadow:0 4px 15px #9acd3266}.kanji-submit-button:active:not(:disabled){transform:scale(.97)}.kanji-submit-button:disabled{opacity:.5;cursor:not-allowed}