:root{--bg:#fffdf6;--ink:#222326;--yellow:#f8d925;--ys:#fff1a8;--blue:#69aaf0;--bs:#dcebff;--green:#69cfa0;--gs:#dff7ea;--pink:#f3758f;--ps:#ffe1e7}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;user-select:none}button{font:inherit}.app{max-width:500px;min-height:100dvh;margin:0 auto;padding:14px 16px 22px;position:relative;overflow:hidden;background:linear-gradient(#fffef8,#fffdf5)}.screen{display:none;min-height:calc(100dvh - 36px)}.active{display:flex;flex-direction:column;align-items:center}.dec{position:absolute;font-weight:1000;opacity:.45;z-index:0;pointer-events:none}.a{left:8px;top:145px;color:var(--blue);font-size:58px;transform:rotate(-10deg)}.b{right:8px;top:145px;color:var(--green);font-size:58px;transform:rotate(10deg)}.s1{left:4px;top:270px;color:var(--pink);font-size:54px}.s2{right:4px;top:270px;color:var(--yellow);font-size:54px}.logo{z-index:1;width:min(185px,41vw);height:auto;margin:2px auto;display:block;border:0;box-shadow:none;filter:none}.title{text-align:center;font-weight:1000;line-height:1;margin:0 0 8px;z-index:1}.main{font-size:clamp(46px,10.5vw,66px);text-shadow:3px 4px 0 #0001}.sub{display:block;margin-top:6px;font-size:clamp(34px,8vw,48px);text-shadow:3px 4px 0 #0001}.c1{color:var(--pink)}.c2{color:var(--yellow)}.c3{color:var(--blue)}.c4{color:var(--green)}.status{margin:6px 0 0;font-size:24px;font-weight:1000;text-align:center}.substatus{font-size:19px;font-weight:900;text-align:center;margin:4px 0 0}.learnLabel{margin-top:16px;font-size:24px;font-weight:1000}.progressWrap{width:100%;height:34px;border:4px solid var(--ink);border-radius:999px;background:white;margin:8px 0 4px;overflow:hidden;box-shadow:0 4px 0 #0002}.progressBar{height:100%;width:0%;background:linear-gradient(90deg,var(--green),var(--yellow));border-radius:999px}.percent{font-size:28px;font-weight:1000;color:var(--pink);margin-bottom:4px}.btn{width:100%;min-height:62px;border:4px solid var(--ink);border-radius:24px;background:white;box-shadow:0 5px 0 #0002;display:flex;align-items:center;justify-content:center;gap:10px;font-size:24px;font-weight:1000;padding:10px 14px}.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #0002}.mainbtn{min-height:82px;margin:14px 0 10px;font-size:36px;border-radius:28px;background:linear-gradient(var(--ys),var(--yellow))}.green{background:var(--gs)}.blue{background:var(--bs)}.pink{background:var(--ps)}.yellow{background:var(--ys)}.small{min-height:58px;font-size:22px}.grid2{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:12px}.panel{width:100%;border:4px solid var(--ink);border-radius:30px;background:#fffffff7;padding:14px;box-shadow:0 6px 0 #0002;margin-top:12px}.label{text-align:center;font-size:24px;font-weight:1000;margin:4px 0 10px}.hide{display:none!important}.selected{background:var(--ys)!important;outline:5px solid var(--pink)}.qh{width:100%;display:grid;grid-template-columns:1fr 78px 1fr;gap:8px;align-items:center;margin:6px 0 12px}.pill{min-height:48px;border:3px solid var(--ink);border-radius:999px;background:var(--bs);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:1000}.timer{width:78px;height:78px;border-radius:50%;border:5px solid var(--ink);background:var(--ys);display:flex;align-items:center;justify-content:center;box-shadow:0 5px 0 #0002;font-size:34px;font-weight:1000}.wordcard{width:100%;min-height:245px;border:5px solid var(--ink);border-radius:34px;background:linear-gradient(#fff,var(--bs));box-shadow:0 6px 0 #0002;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 12px;margin-bottom:14px}.kana{font-size:clamp(34px,9vw,50px);font-weight:1000;color:var(--pink)}.word{font-size:clamp(60px,16vw,92px);font-weight:1000;line-height:1}.listen{margin-top:12px;width:auto;min-height:50px;padding:6px 22px;border-width:3px;border-radius:20px;font-size:22px;background:var(--gs)}.choices{width:100%;display:grid;gap:12px}.choice{min-height:74px;font-size:32px}.quit{position:static;align-self:flex-end;width:auto;min-width:112px;min-height:54px;margin:0 0 calc(10px + env(safe-area-inset-bottom));padding:8px 18px;border-radius:22px;font-size:22px;background:var(--ps);z-index:auto}.feedback{position:fixed;inset:0;background:#fffdf6f0;z-index:20;display:none;align-items:center;justify-content:center;flex-direction:column;padding:20px;text-align:center}.feedback.show{display:flex}.circle{font-size:clamp(110px,32vw,190px);font-weight:1000;color:var(--pink)}.bigemoji{font-size:clamp(80px,24vw,145px)}.fbtext{font-size:44px;font-weight:1000}.fbans{margin-top:8px;font-size:32px;font-weight:1000}.fbsmall{margin-top:4px;font-size:26px;font-weight:900;color:var(--blue)}.result{width:100%;border:5px solid var(--ink);border-radius:32px;background:linear-gradient(var(--ys),#fff);box-shadow:0 6px 0 #0002;text-align:center;padding:20px 14px;margin:16px 0 14px}.scorebig{font-size:64px;font-weight:1000;color:var(--pink);margin:6px 0}.stickerResult{width:min(280px,72vw);height:auto;margin:8px auto;border-radius:24px;display:block}.list{width:100%;display:flex;flex-direction:column;gap:10px;margin:12px 0}.row{width:100%;min-height:62px;border:4px solid var(--ink);border-radius:22px;background:white;box-shadow:0 4px 0 #0002;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;font-size:25px;font-weight:1000}.levelTabs{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0}.tab{min-height:48px;font-size:18px;border-width:3px;border-radius:18px}.sticker-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;width:100%;margin-top:12px}.sticker-cell{border:3px solid var(--ink);border-radius:18px;background:#fff;padding:6px;display:flex;align-items:center;justify-content:center;min-height:132px;overflow:hidden}.sticker-cell img{width:100%;height:auto;display:block;border-radius:14px}@media(max-height:760px){.logo{width:min(145px,32vw)}.main{font-size:clamp(38px,8.5vw,54px)}.sub{font-size:clamp(28px,7vw,38px)}.a,.b{top:120px}.s1,.s2{top:230px}}

.settingMini{width:72%;min-height:54px;margin:12px auto 0;font-size:24px;background:#fff}
.settingBlock{width:100%;margin:10px 0 14px}
.settingTitle{width:100%;min-height:48px;border:3px solid var(--ink);border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:1000;margin-bottom:8px}
.settingOptions{display:grid;gap:9px;width:100%}
.settingOption{min-height:58px;font-size:24px;justify-content:flex-start;padding-left:22px}
.settingOption .mark{width:34px;display:inline-flex;justify-content:center;margin-right:10px}
.settingOption.selectedSetting{background:var(--gs)!important;outline:4px solid var(--green)}

.loading{width:100%;margin-top:16px;text-align:center;font-size:24px;font-weight:1000}
.errorBox{width:100%;border:4px solid var(--ink);border-radius:24px;background:var(--ps);padding:14px;text-align:center;font-size:22px;font-weight:1000;line-height:1.5}
.choice[disabled]{opacity:.82}
@supports (-webkit-touch-callout:none){.btn{touch-action:manipulation}}

html,body{overflow-x:hidden}.app{width:100%}.grid2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.btn{min-width:0}.small{font-size:clamp(18px,5.2vw,22px)}
/* iPhone Safari: keep the quit button in the normal quiz layout below choices. */
#gameScreen{padding-bottom:calc(18px + env(safe-area-inset-bottom))}
.choices{margin-bottom:18px}
.quit{position:static;align-self:flex-end;width:auto;min-width:112px;min-height:54px;margin:0 0 calc(10px + env(safe-area-inset-bottom));padding:8px 18px;border-radius:22px;font-size:22px;background:var(--ps);z-index:auto}
@media(max-height:760px){.wordcard{min-height:210px}.choice{min-height:66px;font-size:28px}.choices{gap:10px;margin-bottom:16px}.quit{min-height:50px;font-size:20px}}


.supportStampSettings{margin-top:18px}
.supportNote{font-size:18px;font-weight:900;line-height:1.5;text-align:center;background:var(--bs);border:3px solid var(--ink);border-radius:18px;padding:10px;margin:8px 0 12px}
.supportPreview{width:100%;min-height:178px;border:3px dashed var(--green);border-radius:24px;background:#fff;display:flex;align-items:center;justify-content:center;padding:12px;margin-bottom:12px}
.supportEmptyPreview{font-size:22px;font-weight:1000;color:var(--green);text-align:center}
.fileInput{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.supportActions{display:grid;grid-template-columns:minmax(0,1fr) minmax(96px,.55fr);gap:10px;width:100%}
.supportChooseLabel,.supportDeleteBtn{min-height:58px;font-size:22px;text-align:center;cursor:pointer}
.supportDeleteBtn.disabledBtn{opacity:.45;transform:none;box-shadow:0 5px 0 #0002}
.supportStatus{min-height:30px;margin-top:8px;text-align:center;font-size:20px;font-weight:1000;color:var(--pink)}
.stickerResultWrap{width:min(300px,76vw);margin:8px auto;display:flex;align-items:center;justify-content:center}
.supportStamp{width:min(280px,72vw);min-height:214px;border:5px solid var(--ink);border-radius:34px;background:linear-gradient(160deg,#fff,var(--ps) 52%,var(--bs));box-shadow:0 8px 0 #0002;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 12px 18px;position:relative;overflow:hidden}
.supportStamp:before{content:"";position:absolute;inset:8px;border:4px solid #fff8;border-radius:28px;pointer-events:none}
.supportStampSpecial{background:linear-gradient(160deg,#fff8c8,var(--yellow) 52%,#fff4ac);border-color:#2a2510}
.supportPhoto{width:126px;height:126px;border-radius:50%;object-fit:cover;border:6px solid #fff;box-shadow:0 0 0 5px var(--green),0 6px 0 #0002;background:#fff;position:relative;z-index:1}
.supportStampSpecial .supportPhoto{box-shadow:0 0 0 5px #f0b90b,0 0 0 10px #fff5b8,0 6px 0 #0002}
.supportBubble{margin-top:12px;max-width:100%;border:4px solid var(--ink);border-radius:999px;background:#fff;padding:8px 14px;font-size:24px;font-weight:1000;line-height:1.2;text-align:center;position:relative;z-index:1}
.supportSparkle{position:absolute;inset:10px;display:flex;align-items:flex-start;justify-content:center;font-size:20px;font-weight:1000;color:#9a6d00;letter-spacing:0;z-index:0}
.supportSparkle:before,.supportSparkle:after{content:"★";position:absolute;font-size:46px;color:#fff2a6;text-shadow:0 3px 0 #0001}.supportSparkle:before{left:12px;top:46px}.supportSparkle:after{right:12px;bottom:46px}
.supportStampCompact{width:100%;min-height:128px;border-radius:20px;padding:10px 8px}.supportStampCompact .supportPhoto{width:72px;height:72px;border-width:4px;box-shadow:0 0 0 4px var(--green),0 4px 0 #0002}.supportStampCompact .supportBubble{font-size:18px;padding:6px 10px;border-width:3px;margin-top:8px}.supportStampPreviewStamp{width:min(240px,66vw);min-height:178px}.supportStampPreviewStamp .supportPhoto{width:102px;height:102px}.supportStampPreviewStamp .supportBubble{font-size:22px}
.support-sticker-cell{padding:8px}.support-sticker-cell .supportStamp{width:100%}
@media(max-width:380px){.supportActions{grid-template-columns:1fr}.supportBubble{font-size:22px}.supportStamp{min-height:204px}.supportPhoto{width:116px;height:116px}}