:root{color-scheme:light;--ink:#244c49;--mint:#d8ebe0;--cream:#fffaf0;--coral:#e78569}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif}main{max-width:1000px;margin:auto;padding:18px}button,a{touch-action:manipulation}button{border:2px solid #728d7e;background:white;color:var(--ink);font:inherit;font-weight:700;border-radius:16px;padding:12px 18px;min-height:48px;cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:4px solid #254eae;outline-offset:4px}button:disabled{opacity:.45;cursor:default}header,.playtop,.footer{display:flex;align-items:center;justify-content:space-between;gap:10px}header{margin-bottom:14px}header a{color:var(--ink)}h1{font-size:clamp(23px,4vw,34px);margin:8px 0}p{line-height:1.7}.hero{display:block;width:100%;max-height:380px;object-fit:cover;border-radius:28px}.intro{text-align:center;padding:18px}.intro img{float:none;border-radius:16px}.primary{background:#21675b;color:white;border-color:#21675b;padding:16px 45px;font-size:24px}.playtop h1{font-size:24px}.scene{position:relative;margin:14px 0;height:190px;border-radius:24px;overflow:hidden}.scene img{width:100%;height:100%;object-fit:cover;object-position:center 62%}#bubble{position:absolute;top:12px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#fffaf0ee;border-radius:24px;padding:10px 24px;font-weight:700}.groups{display:flex;gap:7px;flex-wrap:wrap;margin:18px 0}.groups button{padding:8px 12px;min-width:60px;flex:1;border-radius:12px}.groups [aria-pressed=true]{background:var(--ink);color:white}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.card{min-height:185px;padding:16px 8px;border:3px solid #658775;background:#fff;border-bottom-width:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;position:relative}.letter{font-size:68px;line-height:1.1;font-family:system-ui,sans-serif}.ipa{font:26px system-ui,sans-serif}.word{font:18px system-ui,sans-serif}.card:nth-child(2n){background:#fff2c9}.card:nth-child(3n){background:#dff1ef}.card.active{background:#f9bd9f;transform:translateY(3px);border-bottom-width:5px}.card.heard:after{content:'きいたよ';position:absolute;top:7px;right:8px;font-size:11px;background:#e0f0dd;padding:3px 6px;border-radius:8px}.hint{font-size:14px;text-align:center}.footer{flex-wrap:wrap;justify-content:center}#status{min-height:26px;text-align:center}#rest{text-align:center;padding:80px 10px}#rest button{display:block;margin:20px auto}details{margin-top:24px;font-size:14px;border-top:1px solid #a4bbad;padding:14px 0}summary{cursor:pointer;padding:8px}#sound[aria-pressed=false]{background:#eee}[hidden]{display:none!important}@media(max-width:550px){main{padding:12px}.cards{grid-template-columns:repeat(2,1fr);gap:12px}.card{min-height:155px}.letter{font-size:60px}.scene{height:135px}.groups{gap:5px;margin:12px 0}.groups button{min-width:42px;padding:8px 6px;font-size:13px}#bubble{font-size:14px;padding:8px 12px}.footer button{padding:10px 14px}.intro{padding:12px}.hero{max-height:240px}.playtop h1{font-size:20px}}@media(max-height:500px) and (min-width:600px){.scene{height:100px}.card{min-height:130px}.letter{font-size:46px}.groups{margin:10px 0}main{padding:10px}.hint{margin:8px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}.card.active{transform:none}}

/* ONE_SCREEN_PHONICS */
html,body{height:100%;overflow:hidden}main{height:100dvh;max-width:1100px;padding:12px;display:flex;flex-direction:column;gap:8px}header{flex:none;margin:0}button{min-height:40px;padding:8px 12px}#welcome{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center}.hero{flex:1;min-height:0;max-height:45dvh;width:100%;object-fit:cover}.intro{padding:6px}.intro img{display:none}.intro p{margin:6px}#play{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px}.playtop{flex:none}.playtop h1{margin:0}.scene{flex:1;min-height:65px;max-height:23dvh;margin:0}.view-switch{display:flex;justify-content:center;gap:10px}.view-switch [aria-pressed=true]{background:#244c49;color:white}.groups{flex:none;margin:0;flex-wrap:nowrap}.groups button{min-width:0;padding:6px 2px;font-size:12px}.cards{flex:2;min-height:0;grid-template-rows:1fr}.card{min-height:0;padding:8px;gap:3px}.letter{font-size:clamp(30px,7dvh,65px)}.ipa{font-size:clamp(18px,3dvh,26px)}.word{font-size:16px}.hint{margin:0;font-size:12px}.footer{flex:none;flex-wrap:nowrap}#status{margin:0;min-height:18px;font-size:12px}.about-open{align-self:center;flex:none;font-size:12px;padding:3px 10px;min-height:28px;border:0;background:transparent}dialog{max-width:700px;width:90vw;max-height:80dvh;overflow:auto;border:1px solid #658775;border-radius:18px;background:var(--cream);color:var(--ink)}dialog::backdrop{background:#244c4980}dialog details{margin:0;border:0}.keyboard{flex:2;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:10px}.key-row{display:flex;justify-content:center;gap:6px}.key{width:calc((100% - 54px)/10);max-width:88px;min-width:0;height:clamp(48px,12dvh,95px);padding:3px;border-radius:10px;border-bottom-width:5px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:clamp(18px,3.5vw,32px)}.key small{font:clamp(10px,1.7vw,18px) system-ui,sans-serif}.key-row:nth-child(2){padding:0 3%}.key-row:nth-child(3){padding:0 8%}.key.active{background:#f9bd9f;transform:translateY(2px)}.key.heard{background:#d8ebe0}#rest{flex:1;min-height:0;padding:10px;display:flex;flex-direction:column;justify-content:center;align-items:center}#rest button{margin:8px}
@media(max-width:550px){.cards{grid-template-rows:repeat(2,1fr);gap:8px}.scene{max-height:17dvh}.key-row{gap:3px}.key{width:calc((100% - 27px)/10);font-size:19px;border-radius:6px}.key small{font-size:10px}.playtop h1{font-size:20px}.hint{font-size:11px}}
@media(max-height:500px){main{padding:6px;gap:4px}#play{gap:4px}header button,.playtop button,.view-switch button,.footer button{min-height:30px;padding:3px 10px}.scene{display:none}.cards{grid-template-columns:repeat(4,1fr);grid-template-rows:1fr}.letter{font-size:38px}.card.heard:after{display:none}.hint{font-size:11px}.keyboard{gap:4px}.key{height:clamp(35px,13dvh,60px)}h1{font-size:22px}.intro{padding:0}.hero{max-height:40dvh}.primary{min-height:38px;padding:6px 30px}.intro p{margin:3px}}

@media(max-height:650px) and (orientation:portrait){.scene{display:none}.letter{font-size:38px}.ipa{font-size:20px}.card{overflow:hidden}.card.heard:after{display:none}#play{gap:5px}.hint{font-size:10px}.groups button{min-height:30px}.view-switch button{min-height:34px}}

.footer button{white-space:nowrap;min-width:0;padding:6px 8px;font-size:13px}.footer #progress{white-space:nowrap;font-size:12px}.cards{grid-template-rows:minmax(0,1fr)}@media(max-width:550px){.cards{grid-template-rows:repeat(2,minmax(0,1fr))}}@media(max-height:500px){.cards{grid-template-rows:minmax(0,1fr)}}

.key[data-letter=q],.key[data-letter=a],.key[data-letter=z],.key[data-letter=p]{background:#dfebf3}.key[data-letter=w],.key[data-letter=s],.key[data-letter=x],.key[data-letter=o],.key[data-letter=l]{background:#f2edda}.key[data-letter=e],.key[data-letter=d],.key[data-letter=c],.key[data-letter=i],.key[data-letter=k]{background:#fff0ca}.key[data-letter=r],.key[data-letter=t],.key[data-letter=f],.key[data-letter=g],.key[data-letter=v],.key[data-letter=b]{background:#e9e0ef}.key[data-letter=y],.key[data-letter=u],.key[data-letter=h],.key[data-letter=j],.key[data-letter=n],.key[data-letter=m]{background:#f7e0d2}.key.home-key>span{text-decoration:underline;text-underline-offset:5px}.key.active{background:#f9bd9f!important}.key.heard{border-color:#317461}

.welcome-choices{display:flex;justify-content:center;gap:12px;margin:12px 0 0}.welcome-choices .primary{font-size:clamp(16px,2.5vw,24px);min-width:0;padding:12px 24px;border-radius:16px;white-space:nowrap}
@media(max-width:550px){.welcome-choices{gap:8px;margin-top:8px}.welcome-choices .primary{font-size:16px;padding:12px 18px}}
@media(max-height:500px){.welcome-choices{margin-top:4px}.welcome-choices .primary{min-height:36px;padding:6px 18px}}