:root{--ocean:#087fa8;--deep:#073b54;--sky:#ddf7ff;--sun:#ffd447;--coral:#ef4b43;--ink:#18313e;--ok:#159768}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:"BIZ UDPGothic","Yu Gothic",Meiryo,sans-serif;color:var(--ink);background:linear-gradient(180deg,#a9e8fb 0,#e9fbff 48%,#fff9d9 100%)}
body{min-height:100vh;overflow-x:hidden}button{font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}
.shell{width:min(1100px,100%);margin:auto;padding:18px 22px 28px}header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.brand{display:flex;align-items:center;gap:12px}.logo{width:80px;height:80px;object-fit:contain;border-radius:18px;filter:drop-shadow(0 4px 2px rgba(7,59,84,.2))}h1{font-size:clamp(1.25rem,3vw,2rem);line-height:1.2;margin:0;color:var(--deep);letter-spacing:.04em}.mini-note{font-size:.9rem;color:#46646e;margin-top:4px;font-weight:800}.settings-toggle{border:2px solid #fff;background:rgba(255,255,255,.78);color:#536f79;border-radius:999px;padding:9px 13px;font-weight:900;box-shadow:0 3px 0 rgba(7,59,84,.16)}
.settings-panel{background:rgba(255,255,255,.95);border:3px solid #fff;border-radius:20px;padding:14px 16px;margin-bottom:15px;box-shadow:0 8px 22px rgba(6,77,105,.13)}.settings-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.settings-heading strong{color:var(--deep)}.settings-heading span{color:#607b84;font-size:.9rem;font-weight:800}.settings-close{border:0;background:#e5f3f7;color:var(--deep);border-radius:999px;padding:7px 12px;font-weight:900}.setting-block+.setting-block{margin-top:12px}.setting-label{display:block;font-weight:900;color:#55717c;margin-bottom:7px}.setting-buttons{display:flex;gap:8px;flex-wrap:wrap}.setting{border:3px solid transparent;background:#eef8fa;color:var(--deep);border-radius:14px;padding:9px 13px;font-weight:900;box-shadow:0 3px 0 #c4d9df}.setting[aria-pressed="true"]{background:#fff4ba;border-color:var(--sun);box-shadow:0 3px 0 #d79a00}
main{background:rgba(255,255,255,.95);border:4px solid #fff;border-radius:30px;padding:clamp(18px,3vw,30px);box-shadow:0 12px 30px rgba(6,77,105,.16);min-height:650px;display:flex;flex-direction:column;align-items:center}.status{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px}.badge{background:var(--sky);color:var(--ocean);border-radius:999px;padding:7px 13px;font-weight:900}.step{color:#71878f;font-weight:900}
.progress-area{display:flex;align-items:center;justify-content:center;gap:12px;min-height:50px;margin:3px 0 2px}.progress-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:310px}.progress-dot{width:15px;height:15px;border:3px solid #d0dee2;border-radius:50%;background:#fff}.progress-dot.done{border-color:var(--coral);background:var(--coral);box-shadow:0 0 0 3px rgba(239,75,67,.12)}.finish-flag{font-size:2.25rem;display:inline-block;transform:translateY(18px) scale(.7);opacity:.22;filter:grayscale(1);transition:.45s cubic-bezier(.2,1.5,.5,1)}.finish-flag.up{transform:translateY(0) scale(1);opacity:1;filter:none;animation:wave .65s ease-out}@keyframes wave{0%{transform:translateY(18px) rotate(-10deg)}60%{transform:translateY(-4px) rotate(7deg)}100%{transform:translateY(0)}}
.prompt{text-align:center;margin:4px 0 6px}.instruction{font-size:clamp(1.15rem,3vw,1.55rem);font-weight:900;color:var(--deep);margin:0 0 9px}.prompt-word{font-size:clamp(2.2rem,8vw,4.3rem);font-weight:900;letter-spacing:.12em;color:var(--deep);line-height:1.15;margin:5px 0 12px}.listen{border:0;background:var(--ocean);color:#fff;border-radius:999px;padding:12px 24px;font-weight:900;font-size:1.15rem;box-shadow:0 5px 0 #075372}.listen:active{transform:translateY(3px);box-shadow:0 2px 0 #075372}.hint{min-height:28px;margin:9px 0 8px;color:#58727b;font-size:1rem;font-weight:900;text-align:center}
.cards{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch;max-width:900px}.cards.one{grid-template-columns:minmax(220px,430px);justify-content:center}.cards.two{grid-template-columns:repeat(2,minmax(220px,360px));justify-content:center}.card{position:relative;min-height:285px;border:4px solid #b8d3da;border-radius:24px;background:#fff;box-shadow:0 7px 0 #8ea8b2;padding:14px;overflow:hidden;transition:.15s transform,.15s border-color,.15s box-shadow}.card:hover{transform:translateY(-2px)}
.picture{width:100%;height:225px;background-repeat:no-repeat;background-position:center;background-size:contain}.picture.sheet{width:min(100%,225px);height:auto;aspect-ratio:1/1;margin-inline:auto;background-size:204% 204%}.picture.single,.picture.single-clean{background-size:contain;background-position:center}.picture.single-crop{background-size:auto 135%;background-position:center top}.word-label{font-size:clamp(1.45rem,4vw,2.2rem);font-weight:900;color:var(--deep);margin-top:2px;min-height:1.3em;display:grid;place-items:center}.card:not(.show-name) .word-label{visibility:hidden}.card.correct{border-color:#d99c00;background:#fff9cf;box-shadow:0 7px 0 #d99c00,0 0 0 7px rgba(255,212,71,.28)}.card.correct .word-label{visibility:visible;color:#604400}.card.hint-target{border-color:var(--sun);box-shadow:0 7px 0 #d99c00,0 0 0 7px rgba(255,212,71,.24)}.card.try-again,.choice-word.try-again,.kana-button.try-again{opacity:.48}
.result{min-height:58px;text-align:center;margin-top:16px}.result strong{display:block;color:var(--ok);font-size:1.8rem}.result span{font-size:1.3rem;font-weight:900}.star{display:inline-block;color:#ffb800;font-size:2rem;animation:pop .35s ease-out}@keyframes pop{from{transform:scale(.2) rotate(-15deg)}to{transform:scale(1)}}
.stage3-wrap,.stage4-wrap{width:100%;max-width:820px;display:flex;flex-direction:column;align-items:center}.question-picture{width:min(260px,62vw);height:min(240px,56vw);background-repeat:no-repeat;background-position:center;background-size:contain;margin:-4px auto 14px}.question-picture.sheet{background-size:204% 204%;aspect-ratio:1/1}.question-picture.single,.question-picture.single-clean{background-size:contain;background-position:center}.question-picture.single-crop{background-size:auto 135%;background-position:center top}.word-choices{display:grid;grid-template-columns:repeat(3,minmax(130px,220px));gap:14px;justify-content:center;width:100%}.word-choices.two{grid-template-columns:repeat(2,minmax(150px,240px))}.choice-word{border:4px solid #b8d3da;border-radius:20px;background:#fff;color:var(--deep);padding:19px 10px;font-size:clamp(1.55rem,5vw,2.3rem);font-weight:900;box-shadow:0 6px 0 #8ea8b2}.choice-word.correct{background:#fff4ba;border-color:#d99c00;box-shadow:0 6px 0 #d99c00}.choice-word.hint-target{border-color:var(--sun);box-shadow:0 6px 0 #d99c00,0 0 0 6px rgba(255,212,71,.24)}
.answer-slots{display:flex;justify-content:center;align-items:center;gap:8px;min-height:70px;margin:2px 0 13px;flex-wrap:wrap}.answer-slot{display:grid;place-items:center;min-width:60px;height:64px;border:4px dashed #aac4cd;border-radius:15px;background:#f5fbfc;color:var(--deep);font-size:2rem;font-weight:900}.answer-slot.filled{border-style:solid;border-color:#d99c00;background:#fff4ba;animation:pop .25s ease-out}.kana-bank{display:grid;grid-template-columns:repeat(5,minmax(54px,86px));gap:10px;justify-content:center}.kana-button{height:64px;border:3px solid #87b3c1;border-radius:16px;background:#fff;color:var(--deep);font-size:1.65rem;font-weight:900;box-shadow:0 5px 0 #6f97a3}.kana-button:active{transform:translateY(3px);box-shadow:0 2px 0 #6f97a3}.kana-button.used{visibility:hidden}
.clear-screen{position:relative;width:100%;min-height:545px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-radius:24px;background:radial-gradient(circle at 50% 35%,#fffef2 0,#fff7bd 48%,#dff8ff 100%)}.clear-screen h2{z-index:2;margin:8px 0 3px;color:var(--deep);font-size:clamp(2.2rem,8vw,4.8rem);animation:clearPop .7s .2s both cubic-bezier(.2,1.5,.5,1)}.clear-screen p{z-index:2;margin:0 0 22px;color:#147da0;font-size:clamp(1.25rem,4vw,2rem);font-weight:900}.clear-flag{z-index:2;font-size:clamp(6rem,20vw,10rem);line-height:1;filter:drop-shadow(0 9px 3px rgba(7,59,84,.18));transform-origin:bottom center;animation:flagRise .85s cubic-bezier(.17,1.45,.42,1),flagWiggle .8s .9s ease-in-out infinite alternate}.clear-sparkles{z-index:2;color:#ffb800;font-size:clamp(1.5rem,5vw,2.7rem);letter-spacing:.3em;animation:sparkle .7s ease-in-out infinite alternate}.again-button{z-index:2;border:0;border-radius:999px;background:var(--ocean);color:#fff;padding:13px 28px;font-size:1.1rem;font-weight:900;box-shadow:0 5px 0 #075372}.confetti{position:absolute;inset:0;pointer-events:none}.confetti i{position:absolute;left:var(--x);top:-30px;width:11px;height:20px;border-radius:3px;background:var(--color);animation:confettiFall var(--duration) var(--delay) linear infinite}@keyframes flagRise{0%{transform:translateY(260px) scale(.65)}70%{transform:translateY(-18px) scale(1.12)}100%{transform:translateY(0) scale(1)}}@keyframes flagWiggle{from{transform:rotate(-4deg)}to{transform:rotate(5deg)}}@keyframes clearPop{from{opacity:0;transform:scale(.35)}to{opacity:1;transform:scale(1)}}@keyframes sparkle{to{transform:scale(1.2);filter:brightness(1.2)}}@keyframes confettiFall{0%{transform:translate3d(0,-20px,0) rotate(0);opacity:1}100%{transform:translate3d(45px,620px,0) rotate(var(--turn));opacity:.85}}
.card:focus-visible,.listen:focus-visible,.settings-toggle:focus-visible,.setting:focus-visible,.settings-close:focus-visible,.choice-word:focus-visible,.kana-button:focus-visible{outline:5px solid rgba(255,107,94,.5);outline-offset:3px}
@media(max-width:760px){.shell{padding:12px}header{align-items:flex-start}.mini-note{display:none}.logo{width:62px;height:62px}main{padding:14px 10px;min-height:620px}.cards,.cards.two{gap:10px}.card{min-height:225px;padding:8px;border-radius:18px}.picture{height:175px}.word-label{font-size:1.6rem}.settings-heading{align-items:flex-start}.settings-heading span{display:block;margin-top:4px}.word-choices{gap:9px}.choice-word{padding:15px 7px}.kana-bank{gap:8px}.kana-button{height:58px}}
@media(max-width:430px){h1{font-size:1.18rem}.settings-toggle{font-size:.76rem;padding:7px 9px}.status{font-size:.84rem}.cards.two,.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.cards.three{grid-template-columns:repeat(2,minmax(0,1fr))}.cards.three .card:last-child{grid-column:1/-1;width:calc(50% - 5px);justify-self:center}.card{min-height:185px}.picture{height:140px}.word-label{font-size:1.35rem}.instruction{font-size:1.2rem}.listen{font-size:1rem;padding:10px 20px}.word-choices{grid-template-columns:repeat(2,minmax(0,1fr))}.word-choices.three .choice-word:last-child{grid-column:1/-1;width:calc(50% - 5px);justify-self:center}.choice-word{font-size:1.5rem}.kana-bank{grid-template-columns:repeat(5,minmax(45px,1fr));width:100%}.kana-button{height:54px;font-size:1.35rem}.answer-slot{min-width:50px;height:56px;font-size:1.65rem}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}