:root{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:#29343a;background:#f4f8f5;font-synthesis:none}*{box-sizing:border-box}body{margin:0}.app{max-width:800px;margin:0 auto;padding:20px 16px 35px}header{text-align:center;margin:12px 0 22px}header h1{font-size:clamp(1.8rem,5vw,2.6rem);margin:8px 0;color:#1e6b58}header p{margin:0;color:#50615b}.eyebrow{font-size:.81rem;color:#477c6e}.panel{background:white;border:1px solid #dcebe2;border-radius:18px;box-shadow:0 5px 22px #153f2810;padding:clamp(16px,4vw,28px);margin:16px auto}.hidden{display:none!important}.field-label{display:block;font-weight:700;margin:0 0 9px}select,input[type=text]{width:100%;font:inherit;border:2px solid #aecbc0;border-radius:10px;padding:13px;background:white;color:#273732}input[type=text]{font-size:1.5rem}.checkbox{display:flex;gap:7px;align-items:center;font-size:.94rem}.checkbox input{width:20px;height:20px}.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px}.controls{margin:18px 0}.row button{flex:1}button{font:inherit;cursor:pointer;border:2px solid #afcbbf;background:white;color:#205d4c;border-radius:12px;padding:12px 16px;min-height:48px;font-weight:700}button:hover{background:#e8f6ef}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #e6a843;outline-offset:2px}.primary{background:#1d785f;border-color:#1d785f;color:white}.primary:hover{background:#155f4a}button:disabled{opacity:.55;cursor:not-allowed}.fine{font-size:.84rem;color:#62766c;line-height:1.65}.stats{display:flex;justify-content:space-between;gap:15px;font-size:.96rem}.track{height:10px;background:#e2eee8;border-radius:99px;overflow:hidden;margin:12px 0 24px}#progress{width:0;height:100%;background:#36a984;transition:width .2s}.instruction{font-size:1rem;font-weight:700;margin:0 0 10px;color:#457364}.question{background:#f1f8f4;border-radius:14px;padding:26px 16px;text-align:center;font-size:clamp(1.4rem,4.3vw,2rem);font-weight:700;line-height:1.75;overflow-wrap:anywhere}.target{color:#ad4b37;text-decoration:underline;text-underline-offset:5px}.mode-switch{display:flex;gap:8px;margin:20px 0}.mode-switch button{flex:1;font-size:.9rem;padding:10px 7px}.chosen{background:#d3f0e4;border-color:#1d785f}.canvas-wrap{border:2px solid #accdbb;border-radius:12px;overflow:hidden;background:linear-gradient(90deg,transparent calc(50% - .5px),#e6ede8 50%,transparent calc(50% + .5px)),linear-gradient(transparent calc(50% - .5px),#e6ede8 50%,transparent calc(50% + .5px));touch-action:none;width:min(100%,500px);margin:12px auto 0}canvas{display:block;width:100%;height:280px;touch-action:none;cursor:crosshair}.actions{margin-top:18px}.feedback{background:#f0f8ff;border-left:4px solid #467db9;padding:15px 18px;border-radius:8px;margin-top:16px;line-height:1.8;white-space:pre-line}.feedback strong{font-size:1.35rem}.secondary-actions{margin-top:25px}.secondary-actions button{border:0;font-weight:400;text-decoration:underline;color:#62766c}.finish-stats{padding:14px;background:#eff8f2;border-radius:12px;margin:16px 0}footer{font-size:.75rem;text-align:center;color:#718075;line-height:1.6;margin:22px auto}.easy .question{font-size:clamp(1.6rem,5vw,2.2rem)}.easy button{min-height:56px}.easy .instruction{font-size:1.2rem}@media(max-width:500px){.app{padding:10px}.panel{margin:9px auto}.row button{min-width:125px}canvas{height:240px}}

/* v0.2: grade-specific furigana and legibility */
.question ruby{ruby-position:over;white-space:nowrap} .question rt{font-size:.53em;line-height:1.5;font-weight:500;color:#476757} .reading-controls{margin:10px 0 -8px}.easy .feedback{font-size:1.06rem}.easy .fine{font-size:.94rem}.easy .target{font-weight:800}

/* v0.3: 学年別の操作UI */
.young-ui button{font-size:1.04rem;min-height:58px;line-height:1.45}.young-ui .fine{font-size:.99rem}.young-ui .instruction{font-size:1.16rem}.young-ui .secondary-actions button{text-decoration:underline}.young-ui .mode-switch button{font-size:1.02rem}

/* v0.5.5 handwriting-recognition experiment */
.recognition-zone{margin-top:12px;padding:14px;border-radius:12px;background:#f3f7fa;border:1px solid #d4e1e9}.recognize-button{width:100%;background:#e9f2fc;border-color:#9bbdd6;color:#205272}.recognition-zone .fine{margin:8px 0 0}#recognition-options button{min-width:70px;flex:0 1 auto}#recognition-options button.chosen{background:#d3f0e4;border-color:#1d785f}#recognition-confirm{margin-top:12px;width:100%}
/* v0.5.6 character-by-character Kanji Canvas */
.kc-canvas-wrap{margin:10px auto;max-width:266px;background:#fff;border:2px solid #aacbbc;border-radius:12px;padding:4px;touch-action:none}
#kc-ink{display:block;width:256px;max-width:100%;height:256px;margin:auto;touch-action:none;cursor:crosshair}
.kc-slots{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:12px 0}
.kc-slots button{min-width:55px;min-height:55px;font-size:1.55rem}
#recognition-confirm{margin-top:12px;width:100%}
#recognition-options{justify-content:center}
#recognition-options button{font-size:1.25rem}

/* v0.5.7: clear character editing */
#kc-slots button.chosen{outline:3px solid #e2a43d;outline-offset:2px;background:#e3f7ed}
#kc-prev,#kc-next{font-size:.92rem}
#kc-reset-word{width:100%;font-size:.9rem}
@media(max-width:420px){#kc-prev,#kc-next{min-width:110px}}

/* v0.5.8 学習状況と答え合わせの誘導 */
.learning-status{font-weight:700;background:#ecf8f1;border:1px solid #cee6d8;color:#225b48;padding:9px 12px;border-radius:10px;margin:-10px 0 20px;}
#recognition-confirm.ready-to-check{box-shadow:0 0 0 4px #c4ead6;font-size:1.08rem;}
#next-buttons button{min-width:min(100%,220px)}
@media(max-width:500px){.learning-status{line-height:1.8;font-size:.9rem}}

.kana-entry{padding:12px;border-radius:10px;background:#fffaf0;border:1px solid #e4ce9e;margin:10px 0;display:flex;gap:8px;flex-wrap:wrap;align-items:center}.kana-entry.hidden{display:none}.kana-entry label{flex-basis:100%;font-size:.94rem}.kana-entry input{font-size:1.35rem;width:88px;max-width:100%;padding:8px;border:1px solid #b5bab7;border-radius:8px;text-align:center}.kana-slot{border-style:dashed!important}#kc-canvas-area.hidden{display:none}

/* v0.6.2: one handwriting canvas and compact mobile learning flow */
.legacy-write{display:none!important}
#game{scroll-margin-top:6px}
#question{scroll-margin-top:12px}
#write-area .recognition-zone{margin-top:8px;padding:10px 12px}
#kc-panel .kc-slots{margin:6px 0}
#kc-panel #kc-position{margin:4px 0}
#kc-panel .kc-canvas-wrap{margin:6px auto}
#kc-canvas-area .row{margin-top:6px}
#kc-panel #kc-ink{width:min(100%,214px);height:214px}
#kc-panel .kc-canvas-wrap{max-width:226px}
#kc-panel .row button{min-height:43px}
#inline-write-actions{margin-top:10px}
#inline-write-actions button{font-size:.9rem}
#check{background:#fff;border-color:#a9c3b7;color:#205d4c}
#recognition-confirm{margin-top:8px}
#hint-box,#result-box{margin-top:8px}
.reading-controls{margin:4px 0}
.mode-switch{margin:9px 0}
#recognition-choices .fine{margin:5px 0}
#kc-slots button{min-width:51px;min-height:51px}
@media(max-width:500px){
 .app{padding:6px}.panel{padding:12px;margin:7px auto}.question{padding:12px 9px;font-size:1.32rem;line-height:1.65}
 .track{margin:7px 0 13px}.learning-status{margin:0 0 8px;padding:6px;font-size:.8rem}
 .instruction{font-size:.89rem;margin:0 0 5px}.stats{font-size:.84rem}
 #kc-panel #kc-ink{height:192px;width:192px}#kc-panel .kc-canvas-wrap{max-width:204px}
 #recognition-zone{padding:9px 8px}.recognition-zone .fine{font-size:.76rem;line-height:1.35}
 .row{gap:6px}.row button{min-width:0;flex:1;padding:9px 6px;font-size:.81rem;min-height:42px}
 #kc-prev,#kc-next{min-width:0}#kc-slots button{font-size:1.25rem;min-width:48px;min-height:48px}
 #game-ruby-label{font-size:.82rem}.mode-switch button{font-size:.82rem;min-height:42px}
 #recognition-options button{min-width:47px;min-height:47px}
 }

/* v0.6.3: character design edition */
body{background:linear-gradient(180deg,#f7fbf8 0%,#eef7f2 100%)}
header{margin-bottom:14px}
header h1{display:flex;justify-content:center;gap:8px;align-items:center}
.mascot-hero{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 auto 14px}
.mascot-card{background:#fff;border:1px solid #dcebe2;border-radius:18px;box-shadow:0 5px 22px #153f2810;padding:12px;display:flex;gap:10px;align-items:center}
.hero-mascot{width:80px;height:80px;object-fit:contain;flex:0 0 auto}
.speech strong{display:block;color:#1f6b58;margin-bottom:4px}
.speech p{margin:0;font-size:.9rem;line-height:1.6;color:#4b6258}
.mascot-guide{display:flex;gap:10px;align-items:center;background:#fffdf3;border:1px solid #edd48b;border-radius:14px;padding:10px 12px;margin:0 0 10px}
.guide-mascot{width:62px;height:62px;object-fit:contain;flex:0 0 auto}
.guide-name{font-weight:700;color:#1d785f;margin-bottom:2px}
.guide-text p{margin:0;color:#556a61;line-height:1.6;font-size:.92rem}
.feedback{position:relative;padding-left:18px}
.feedback.with-mascot{display:flex;gap:10px;align-items:flex-start}
.feedback.with-mascot img{width:56px;height:56px;object-fit:contain;flex:0 0 auto}
.feedback .feedback-copy{white-space:pre-line;line-height:1.8}
.finish-mascots{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:14px 0 6px}
.finish-mascots img{width:78px;height:78px;object-fit:contain;background:#f8fbf9;border:1px solid #dfebe4;border-radius:16px;padding:6px}
#finish-title{text-align:center;color:#1d785f;margin-top:0}
#finish-message{text-align:center;line-height:1.8}
@media(max-width:700px){
 .mascot-hero{grid-template-columns:1fr}
 .mascot-card{padding:10px}
}
@media(max-width:500px){
 .hero-mascot{width:62px;height:62px}
 .speech p{font-size:.84rem;line-height:1.45}
 .mascot-guide{padding:8px;margin-bottom:8px}
 .guide-mascot{width:54px;height:54px}
 .guide-text p{font-size:.84rem;line-height:1.45}
 .finish-mascots img{width:64px;height:64px}
}

/* v0.6.7: short, non-blocking correct reactions */
.celebration{margin:10px 0 4px;padding:12px;border:2px solid #96dcb7;border-radius:15px;background:linear-gradient(125deg,#edfff0,#fffdf0);color:#1c6a45;display:flex;gap:7px;flex-direction:column;align-items:center;text-align:center}
.celebration strong{font-size:clamp(1.25rem,5vw,1.8rem)}
.celebration-stars{font-size:1.4rem;color:#dfa63e;letter-spacing:.3em}
.celebration span:last-child{font-size:.9rem}
.celebration.milestone{border-color:#e8b95b;background:linear-gradient(125deg,#fff9e2,#f1faed)}
.celebration.pop{animation:celebrate-pop .48s cubic-bezier(.18,1.35,.4,1) both}
.finish-party{text-align:center;color:#d8a43b;font-size:2rem;letter-spacing:.4em}
.party-pop .finish-mascots img{animation:party-bounce .7s ease-out both}
.party-pop .finish-mascots img:nth-child(2){animation-delay:.12s}
.party-pop .finish-mascots img:nth-child(3){animation-delay:.24s}
@keyframes celebrate-pop{0%{opacity:.4;transform:scale(.93)}70%{opacity:1;transform:scale(1.025)}100%{transform:scale(1)}}
@keyframes party-bounce{0%{transform:translateY(12px);opacity:.5}60%{transform:translateY(-7px);opacity:1}100%{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.celebration.pop,.party-pop .finish-mascots img{animation:none!important}}

/* v0.6.8 learning pace + auto save */
.course-select{border:1px solid #d8e7dc;border-radius:14px;background:#f6fbf8;padding:14px;margin:14px 0}
.course-select .field-label{margin-bottom:8px}.course-select label{display:flex;align-items:center;gap:9px;line-height:1.6;padding:7px 0;cursor:pointer}.course-select input{width:20px;height:20px;flex:none;accent-color:#1d785f}
.resume-panel{border:2px solid #6cbaa0;border-radius:14px;background:#edf9f2;padding:14px;margin:14px 0}.resume-panel p{margin:0 0 8px;font-weight:700;line-height:1.65}
#start{width:100%}.break-panel{text-align:center}.break-panel h2{color:#1d785f}.break-panel p{line-height:1.8}.break-mascot{width:110px;height:110px;object-fit:contain}.break-panel .row{justify-content:center}
@media(max-width:500px){.course-select{padding:10px}.resume-panel{padding:10px}.break-panel .row button{flex-basis:100%}}