*{box-sizing:border-box}html{background:#f8f5ea;color:#243c37;font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}body{margin:0}button,select{font:inherit;color:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:2px solid #c7d7cd;border-radius:14px;background:#fffdf6;min-height:44px;padding:8px 16px;touch-action:manipulation}button:disabled{cursor:default;opacity:.55}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #225bde;outline-offset:3px}main{max-width:1050px;margin:auto;padding:20px 26px}header{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px}a{color:#2b6256}header button{min-width:86px}.intro{display:flex;align-items:center;justify-content:space-between;margin:14px 0 10px}.eyebrow{font-size:13px;letter-spacing:.1em;color:#4b7162}h1{font-size:clamp(23px,4vw,38px);margin:5px 0 12px}.intro p{line-height:1.65}.mascot{width:128px;height:128px;object-fit:contain}.settings{display:flex;gap:14px;flex-wrap:wrap;padding:13px 18px;background:#eaf0e7;border-radius:18px;font-size:13px}.settings label{display:flex;align-items:center;gap:6px}select{max-width:260px;border:1px solid #c6d8ce;background:#fffdf6;border-radius:9px;padding:8px;min-height:44px}.playfield{position:relative;border:2px solid #d6e0ca;border-radius:26px;margin:14px 0;background:#e8f1df url('assets/background.webp') center 55%/cover;overflow:hidden;padding:16px 24px}.round{display:flex;justify-content:space-between;font-size:13px;font-weight:bold;background:#fffdf3e8;padding:7px 13px;border-radius:14px}.cue{display:flex;align-items:center;justify-content:center;gap:20px;height:174px}.cue img{width:125px;height:125px;object-fit:contain;transition:transform .12s}.cue img.jump{transform:translateY(-16px) rotate(-7deg)}.cue>div{text-align:center}#hint{margin:6px 0;font-weight:bold;background:#fffdf2ed;padding:5px 10px;border-radius:10px;font-size:15px}#target{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:110px;min-height:110px;border:3px solid #2e7964;background:#fffdf2;box-shadow:0 5px 0 #a8c9ac;opacity:1}#letter{font-size:48px;font-weight:800;line-height:1.05}#ipa{font-size:20px;margin-top:4px;font-family:"Hiragino Kaku Gothic ProN",sans-serif}.beat-track{height:26px;background:#fffcf3;position:relative;border:2px solid #6b9471;border-radius:20px;overflow:hidden;margin:5px 0}#progress{width:0;height:100%;background:#a2ccb6}.beat-target{position:absolute;left:75%;top:0;font-size:14px;font-weight:bold;height:100%;border-left:3px solid #a94721;padding-left:6px}#feedback{text-align:center;min-height:28px;background:#fffdf3ed;border-radius:15px;padding:8px;margin:10px 0 0;font-weight:bold}.keyboard{max-width:880px;margin:0 auto}.key-row{display:flex;justify-content:center;gap:7px;margin:7px 0}.key{width:8.8%;max-width:72px;min-height:66px;padding:4px;border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 3px 0 #d1d9cc}.key .key-letter{font-size:24px;font-weight:bold}.key small{font-size:12px;line-height:1.5}.key.outside{background:#eceee7;color:#63756b}.key.cued{border:3px solid #1e775d;background:#ffe3a0;transform:translateY(-2px);box-shadow:0 5px 0 #8baa86}.key.pressed{background:#d0efdb;transform:translateY(2px);box-shadow:none}.actions{display:flex;gap:10px;justify-content:center;margin:19px 0 9px}.actions button{min-width:115px}.primary{background:#2d715d;color:#fffdf4;border-color:#2d715d}.actions button:disabled{opacity:.5}#audioStatus{text-align:center;font-size:12px;min-height:20px}details{font-size:13px;line-height:1.8;border-top:1px solid #cdd8ca;padding-top:13px}summary{cursor:pointer;min-height:44px;padding-top:8px}footer{text-align:center;font-size:12px;color:#5e7467;margin:15px 0}@media(max-width:600px){main{padding:12px}.intro{margin:12px 0 8px}.intro p{font-size:13px;margin-bottom:6px}.eyebrow{font-size:10px!important}.mascot{width:75px;height:90px}h1{font-size:23px;margin:4px 0 8px}.settings{gap:5px;padding:8px;font-size:11px}.settings label:first-child{width:100%}select{font-size:12px;padding:6px}.playfield{padding:10px 12px;border-radius:18px}.cue{height:150px;gap:8px}.cue img{width:85px;height:100px}#hint{font-size:12px;padding:4px 8px}#target{min-width:90px;min-height:90px}#letter{font-size:39px}#ipa{font-size:17px}#feedback{font-size:13px;padding:6px}.key-row{gap:3px;margin:6px 0}.key{width:9.4%;padding:2px;min-height:49px;border-radius:7px}.key .key-letter{font-size:18px}.key small{font-size:10px}.actions{gap:6px;margin-top:14px}.actions button{min-width:0;flex:1;font-size:13px;padding:8px}header{font-size:11px}.round{font-size:11px}}@media(max-height:500px) and (orientation:landscape){main{max-width:1000px}.intro{margin:4px 0}.intro p,.eyebrow,.mascot{display:none}h1{font-size:23px;margin:4px 0}.settings{padding:4px 10px}.playfield{margin:7px 0;padding:8px 12px}.cue{height:92px}.cue img{height:70px;width:80px}#target{min-width:68px;min-height:65px}#letter{font-size:31px}#ipa{font-size:14px}#hint{font-size:12px}.key{min-height:45px}.actions{margin:10px 0}.beat-track{height:22px}#feedback{margin:4px 0;font-size:12px;padding:4px}}@media(prefers-reduced-motion:reduce){.cue img{transition:none}.cue img.jump{transform:none}.key.cued{transform:none}}
/* One viewport game: controls remain visible; long explanation is a dialog. */
html,body{height:100%;overflow:hidden}main{height:100dvh;max-width:1120px;padding:10px 20px;display:grid;grid-template-rows:40px 38px 48px minmax(120px,1fr) minmax(130px,23vh) 44px 18px;gap:7px;overflow:hidden}header{grid-row:1}.intro{grid-row:2;margin:0;display:block}.intro h1{font-size:23px;line-height:1.3;margin:0}.intro .eyebrow,.intro p,.mascot{display:none}.settings{grid-row:3;padding:4px 10px;gap:10px;justify-content:center;align-items:center;flex-wrap:nowrap}.settings label{font-size:11px;gap:3px;white-space:nowrap}.settings select{min-height:32px;max-width:170px;padding:3px;font-size:12px}.playfield{grid-row:4;margin:0;padding:10px 18px;display:grid;grid-template-rows:25px minmax(55px,1fr) 24px 20px 28px;gap:4px}.cue{height:auto;min-height:0;gap:16px}.cue img{height:100%;max-height:120px;width:100px}#target{min-height:62px;min-width:80px;padding:4px}#letter{font-size:36px}#ipa{font-size:18px}#hint{font-size:13px;margin:3px 0;padding:2px 8px}.beat-lights{display:flex;justify-content:center;gap:12px}.beat-lights b{font-size:13px;padding:2px 18px;border-radius:20px;background:#fffdf1b8;color:#335b4e}.beat-lights .active{background:#f6c459;box-shadow:0 0 0 3px #fff7d5}#bird.pulse{animation:pulse .22s ease-out}@keyframes pulse{50%{transform:translateY(-12px) rotate(-5deg)}}.beat-track{height:20px;margin:0}#feedback{min-height:0;font-size:13px;padding:4px;margin:0;white-space:nowrap;overflow:hidden}.keyboard{grid-row:5;display:flex;flex-direction:column;justify-content:center;width:100%;min-height:0}.key-row{flex:1;min-height:0;margin:3px 0}.key{height:100%;min-height:0;max-width:80px;width:9%;padding:2px}.key .key-letter{font-size:clamp(18px,3vh,30px)}.key small{font-size:clamp(10px,1.4vh,14px)}.actions{grid-row:6;margin:0}.actions button{min-height:40px;padding:4px 12px}.help-button{position:absolute;right:22px;top:53px;font-size:12px;min-height:28px;padding:3px 10px}#audioStatus{grid-row:7;margin:0;font-size:11px;min-height:0;white-space:nowrap;overflow:hidden}footer{display:none}dialog{width:min(650px,92vw);max-height:85dvh;border:2px solid #749787;border-radius:18px;background:#fffdf6;color:#243c37;line-height:1.7;padding:18px;overflow:auto}dialog::backdrop{background:#153b3080}dialog #closeHelp{float:right}
@media(max-width:600px){main{padding:8px;gap:5px;grid-template-rows:36px 32px 72px minmax(100px,1fr) minmax(126px,25vh) 42px 16px}.intro h1{font-size:20px}.settings{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:4px 7px}.settings label:first-child{width:auto}.settings label{min-width:0;justify-content:space-between}.settings select{font-size:10px;width:100%;max-width:120px;min-height:28px}.playfield{padding:7px 8px;grid-template-rows:20px minmax(50px,1fr) 22px 18px 23px;gap:2px;border-radius:16px}.cue{gap:6px}.cue img{width:75px;max-height:80px}#target{min-width:65px;min-height:50px;border-radius:10px}#letter{font-size:28px}#ipa{font-size:14px}#hint{font-size:11px}#feedback{font-size:11px;padding:2px}.beat-lights{gap:6px}.beat-lights b{font-size:11px;padding:2px 13px}.key-row{gap:3px}.key{width:9.5%;border-radius:7px}.key small{font-size:9px}.key .key-letter{font-size:20px}.help-button{right:8px;top:48px;font-size:10px}.actions button{font-size:12px;min-width:0}#audioStatus{font-size:10px}}
@media(max-height:500px) and (orientation:landscape){main{max-width:1050px;padding:6px 12px;grid-template-columns:1fr 1fr;grid-template-rows:32px 32px 44px minmax(80px,1fr) 40px 16px;gap:5px}header{grid-column:1/-1}.intro{grid-column:1/-1;grid-row:2}.intro h1{font-size:19px}.help-button{top:41px;right:12px}.settings{grid-column:1/-1;grid-row:3;padding:3px}.playfield{grid-column:1;grid-row:4/6;grid-template-rows:20px minmax(30px,1fr) 22px 18px 25px;padding:6px 8px}.cue img{width:70px;max-height:80px}.cue{height:auto}#target{min-height:50px;min-width:55px}#letter{font-size:25px}#ipa{font-size:12px}#hint{font-size:11px}.keyboard{grid-column:2;grid-row:4}.key{min-height:0}.key .key-letter{font-size:20px}.key small{font-size:10px}.actions{grid-column:2;grid-row:5;margin:0;gap:4px}.actions button{min-width:0;font-size:11px;padding:3px 6px}#audioStatus{grid-column:1/-1;grid-row:6;font-size:10px}}
@media(prefers-reduced-motion:reduce){#bird.pulse{animation:none}}
@media(max-width:600px){#hint{display:none}.cue>div{height:100%;display:flex;align-items:center}.cue #target{height:min(100%,76px);min-height:45px;box-shadow:0 3px 0 #a8c9ac}.cue img{height:90%}.beat-lights{position:relative;z-index:1}}

/* The shaded interval is the exact timing tolerance; the dot shows the current time. */
.beat-track{isolation:isolate;overflow:hidden}
#progress{background:#d8e4d8;position:relative;z-index:0}
.beat-target{left:0;width:0;top:0;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-left:2px solid #397959;border-right:2px solid #397959;background:#b2d4ae;color:#203b2b;font-size:11px;line-height:1;white-space:nowrap;z-index:1}
.beat-target.in-window{background:#eac75c;color:#263b29}
#playhead{position:absolute;left:0;top:50%;width:12px;height:12px;transform:translate(-50%,-50%);border:2px solid #fff;background:#244c3d;border-radius:50%;box-shadow:0 0 0 1px #244c3d;z-index:2;pointer-events:none}
@media(max-width:600px){.beat-target{font-size:9px}#playhead{width:10px;height:10px}}