@font-face{font-family:Arcade;src:local('Arial Black');font-display:swap}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#263f37;color:#fff8e8;font-family:Arial,Helvetica,sans-serif}button,a,input{touch-action:manipulation}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #f6c96a;outline-offset:5px}button:disabled{cursor:wait;opacity:.6}#app,#game{width:100%;height:100%;display:block}#game{outline:none;touch-action:none}.hidden{display:none!important}.shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(11,33,31,.91),rgba(13,34,29,.70) 26%,transparent 66%),linear-gradient(0deg,rgba(17,34,25,.7),transparent 23%,transparent 77%,rgba(14,33,28,.3));transition:background .4s}.playing .shade{background:linear-gradient(0deg,rgba(11,29,26,.82),transparent 22%,transparent 76%,rgba(11,29,26,.45))}.grain{pointer-events:none;position:absolute;inset:0;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.8' filter='url(%23n)'/%3E%3C/svg%3E")}#top{position:absolute;left:3.5%;right:3.5%;top:27px;display:flex;justify-content:space-between;align-items:center;z-index:4}.brand{color:inherit;text-decoration:none;display:flex;align-items:center;gap:11px;font-size:23px;line-height:.9;font-weight:950;letter-spacing:-1px}.brand-mark{font-size:42px;color:#f2c46e}.brand-run{font-weight:400;margin-left:4px}.brand small{display:block;font-size:8px;letter-spacing:3.2px;margin-top:9px;color:#d5dbbd}.top-right{display:flex;align-items:center;gap:8px}.top-right button{background:#16332d9c;border:1px solid #efe9c344;border-radius:4px;color:#e8ebd5;font-size:10px;font-weight:700;letter-spacing:1px;padding:10px 12px}.build-tag{font-size:9px;letter-spacing:2px;color:#e3e9c5;margin-right:10px}#pause{font-size:15px}#intro{position:absolute;top:20%;left:6%;max-width:580px;width:43%;z-index:3}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:#e8ca83;display:flex;align-items:center;gap:10px}.eyebrow i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#eec775;box-shadow:0 0 14px #efc976}h1{font-family:Arcade,'Arial Black',Impact,sans-serif;font-weight:950;letter-spacing:-3.5px;line-height:.98;font-size:clamp(45px,5.9vw,86px);margin:23px 0;color:#fff7df}h1 span{color:#f6c86d}#intro p{color:#d3d9c6;line-height:1.65;font-size:15px;margin:20px 0}.challenge{display:flex;align-items:center;gap:12px;margin:27px 0}.challenge b{font-size:39px;font-weight:900;letter-spacing:-2px;color:#f7e9c1}.challenge span{font-size:8px;letter-spacing:1.2px;line-height:1.6;color:#bccbad}.challenge-line{height:36px;width:1px;background:#a4b39955;margin:0 8px}.primary{border:0;background:#f4c66f;color:#20372d;padding:19px 22px;width:100%;max-width:394px;text-align:left;font-weight:900;font-size:12px;letter-spacing:.9px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 5px 0 #b58137;border-radius:3px;transition:transform .13s,filter .13s}.primary:hover{filter:brightness(1.08);transform:translateY(-2px)}.primary:active{transform:translateY(3px);box-shadow:0 2px 0 #b58137}.primary b{font-size:23px}.intro-controls{display:flex;gap:17px;margin-top:23px;font-size:10px;color:#c0cbae;align-items:center}.intro-controls span{display:flex;align-items:center;gap:6px}kbd{font-family:inherit;font-size:9px;letter-spacing:.3px;font-weight:700;padding:5px 6px;border:1px solid #c6cbb266;border-radius:3px;color:#edf0cf;background:#1a332d88}.intro-bottom{margin-top:30px;display:flex;justify-content:space-between;max-width:394px;align-items:center;border-top:1px solid #d2dab125;padding-top:18px}.intro-bottom>span{font-size:8px;letter-spacing:1.5px;color:#daca92}.intro-bottom small{font-size:8px;line-height:1.6;color:#a9baa2;text-align:right}#hud{position:absolute;top:100px;left:3.5%;right:3.5%;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}#hud small{display:block;font-size:9px;letter-spacing:2px;color:#e2e0bc;margin-bottom:6px}#hud strong{font-size:42px;font-weight:900;line-height:1;letter-spacing:-1px;text-shadow:0 2px 12px #15302780}.timerbox{text-align:center;position:absolute;left:50%;transform:translateX(-50%);min-width:130px}.timer-track{height:3px;margin-top:9px;background:#fff3}.timer-track i{height:100%;display:block;width:100%;background:#f2c36b;transform-origin:left}.savedbox{text-align:right}.savedbox em{font-size:19px;font-style:normal;color:#e4debc88;margin-left:6px}#chapter{position:absolute;top:208px;left:3.5%;border-left:2px solid #f2c36b;padding:4px 12px;font-size:9px;letter-spacing:1.6px;color:#f1e5b9}#chapter small{display:block;letter-spacing:.3px;margin-top:6px;color:#edeacc99}#combo{position:absolute;right:3.5%;top:216px;text-align:right;filter:drop-shadow(0 2px 8px #192a26)}#combo small{display:block;font-size:8px;letter-spacing:2px;color:#ede5b3}#combo strong{font-size:23px;font-style:italic;color:#ffdb78;display:block;margin:4px 0}#combo>div{height:3px;background:#fff2;float:right;width:130px}#combo i{display:block;background:#f5cb6e;width:100%;height:100%;transform-origin:left}#toast{position:absolute;left:50%;top:24%;transform:translateX(-50%) rotate(-4deg);font-family:Arcade,Impact,sans-serif;font-size:clamp(22px,3vw,44px);font-style:italic;text-align:center;text-shadow:0 4px 0 #265e47,0 0 30px #e7ca7655;color:#fff0aa;pointer-events:none;white-space:nowrap;opacity:0;transition:opacity .16s}#toast.show{opacity:1}.floating{position:absolute;color:#fff6b7;font-weight:900;font-style:italic;pointer-events:none;text-shadow:0 2px 4px #254b35;font-size:21px;transform:translate(-50%,-100%)}#map-wrap{position:absolute;right:3.5%;bottom:115px;width:146px;padding:10px;background:#142e27ba;border:1px solid #e4d5a544;border-radius:6px;backdrop-filter:blur(12px);pointer-events:none}#map-wrap>div{font-size:8px;font-weight:700;letter-spacing:2px;display:flex;justify-content:space-between;color:#e5ce90}#map{width:124px;height:124px;display:block;margin:5px 0}#map-wrap small{font-size:6px;letter-spacing:.8px;color:#c4cdae;display:flex;gap:5px;align-items:center}#map-wrap small i{width:4px;height:4px;background:#edc467;border-radius:50%}#bottom{position:absolute;left:3.5%;right:3.5%;bottom:30px;display:flex;align-items:center;justify-content:space-between;gap:20px}.ability{display:flex;gap:10px;align-items:center;width:200px}.key{padding:10px 12px;border:1px solid #c7d0ab66;border-radius:5px;color:#eddda3;font-weight:900}.ability>div{flex:1}.ability small{font-size:8px;letter-spacing:1.4px}.meter{height:5px;background:#e6e5bd25;margin:6px 0;width:130px;border-radius:2px;overflow:hidden}.meter i{display:block;height:100%;background:#f6cb71;width:0;transition:width .2s}.ability span:last-child{font-size:8px;color:#c2ccaa}#hint{display:flex;align-items:center;gap:10px;padding:10px 16px;background:#123f33b8;border:1px solid #efe1a144;border-radius:5px;backdrop-filter:blur(8px);font-size:12px;color:#f2e9bf}#hint.ready{border-color:#f1cf75;background:#1e6246d9;box-shadow:0 0 28px #ffdc7330}.keylegend{font-size:8px;letter-spacing:1px;color:#e2e7c5;display:flex;gap:7px;align-items:center}.modal{position:absolute;inset:0;background:#102e28d9;backdrop-filter:blur(14px);display:grid;place-items:center;z-index:8;text-align:center}.modal>div{max-width:590px;padding:30px}.modal .eyebrow{justify-content:center}.modal h2{font-family:Arcade,Impact,sans-serif;font-size:clamp(36px,4.5vw,62px);letter-spacing:-2px;line-height:1.05;margin:20px 0;color:#f7e8bd}.modal p{color:#cbd5b7;line-height:1.7;font-size:14px}.modal .primary{margin:24px auto}.text-button{background:none;border:0;color:#c9d5af;font-size:12px;padding:10px}.result-stats{display:flex;gap:30px;justify-content:center;margin:30px 0}.result-stats small{font-size:8px;letter-spacing:1.2px;color:#afc19d;display:block;margin-bottom:9px}.result-stats b{font-size:33px;color:#f4cd7a}.result-foot{font-size:10px;color:#a7bb9a}#loading{position:absolute;inset:0;display:flex;flex-direction:column;gap:14px;justify-content:center;align-items:center;background:#173a32;z-index:20}.loading-star{font-size:52px;color:#f4c66f;animation:spin 4s linear infinite}#loading b{font-size:12px;letter-spacing:3px}#loading small{color:#b3c29c;font-size:12px}@keyframes spin{to{transform:rotate(360deg)}}#mobile{display:none;position:absolute;inset:0;pointer-events:none;z-index:5}#stick{position:absolute;bottom:90px;left:26px;width:112px;height:112px;border:1px solid #fff8;border-radius:50%;background:#153d3266;pointer-events:auto;touch-action:none}#knob{display:block;position:absolute;left:35px;top:35px;width:40px;height:40px;border-radius:50%;background:#eaca85bb;border:2px solid #f2e0b1}.touch-actions{position:absolute;right:22px;bottom:100px;display:flex;gap:8px;align-items:flex-end;pointer-events:auto}.touch-actions button{border:1px solid #ffda8b99;background:#164436bb;color:#ffe6a1;border-radius:50%;width:52px;height:52px;font-size:9px;font-weight:900}.touch-actions #touch-save{width:75px;height:75px;background:#e2b261;color:#263e2a;font-size:14px}.urgent #timer{color:#ffbc76;animation:pulse .8s infinite alternate}@keyframes pulse{to{opacity:.6}}@media(pointer:coarse){.playing #mobile{display:block}.keylegend{display:none}#map-wrap{bottom:205px;width:110px}#map{width:88px;height:88px}.intro-controls{display:none}#bottom{bottom:22px}#hint{font-size:10px}.ability{width:155px}}@media(max-height:760px){#intro{top:17%}h1{font-size:clamp(42px,5.5vw,68px);margin:15px 0}#intro p{margin:13px 0}.challenge{margin:17px 0}.intro-bottom{margin-top:20px;padding-top:12px}.intro-controls{margin-top:18px}}@media(max-width:700px){#top{top:18px}.brand{font-size:19px}.brand-mark{font-size:34px}.build-tag,#quality{display:none}.top-right button{font-size:8px;padding:8px}#intro{top:18%;left:7%;width:85%;max-width:420px}h1{font-size:54px}.shade{background:linear-gradient(90deg,#102d29e8,#163b2b8c 70%,#163b2b44)}#intro p{font-size:13px}.challenge b{font-size:32px}#hud{top:90px}#hud strong{font-size:30px}#hud small{font-size:7px;letter-spacing:.8px}.timerbox{min-width:90px}.savedbox em{font-size:12px}#chapter{top:159px;font-size:7px}#combo{top:170px}#combo strong{font-size:16px}#combo small{font-size:6px}#map-wrap{display:none}#hint{max-width:190px}.keylegend{display:none}.modal>div{padding:25px}.result-stats{gap:20px}#toast{top:31%;font-size:24px}.ability{width:130px}.meter{width:88px}.intro-bottom{max-width:100%}}
#dialogue{position:absolute;bottom:112px;left:50%;transform:translateX(-50%);max-width:650px;width:max-content;background:#0e2424dd;border:1px solid #e3c77b55;padding:13px 22px;border-radius:5px;font-size:16px;color:#fff6d6;text-align:center;pointer-events:none;opacity:0;transition:opacity .15s}#dialogue.show{opacity:1}#reticle{display:none;position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);color:#fff6c999;font-size:14px;pointer-events:none;text-shadow:0 0 4px #153528}.playing #reticle{display:block}@media(max-width:700px){#dialogue{bottom:178px;max-width:88%;font-size:12px;padding:10px 13px}#intro h1{font-size:52px}#toast{white-space:normal;width:95%}}
/* Short phone landscapes need the start action inside the visible viewport. */
@media(pointer:coarse){#quality{display:inline-block}#top{left:max(3.5%,env(safe-area-inset-left));right:max(3.5%,env(safe-area-inset-right))}#stick{left:max(26px,env(safe-area-inset-left))}.touch-actions{right:max(22px,env(safe-area-inset-right))}}
@media(pointer:coarse) and (max-height:540px) and (min-width:540px){#intro{top:76px;left:5%;width:90%;max-width:none;display:grid;grid-template-columns:minmax(190px,.85fr) minmax(240px,1fr);gap:8px 26px;align-items:center}#intro .eyebrow{grid-column:1/-1;font-size:8px}#intro h1{grid-column:1;grid-row:2/5;font-size:clamp(35px,9vh,48px);margin:0}#intro p{grid-column:2;margin:0;font-size:11px;line-height:1.4}#intro .challenge{grid-column:2;margin:3px 0;gap:8px}#intro .challenge b{font-size:28px}#intro .challenge span{font-size:7px}#intro .primary{grid-column:2;padding:11px 14px;font-size:10px;max-width:none}#intro .intro-bottom{display:none}.playing #map-wrap,.playing #chapter{display:none}#stick{bottom:28px}.touch-actions{bottom:36px}#bottom{bottom:12px;pointer-events:none}.ability{display:none}#hint{margin:auto;font-size:9px;padding:6px 10px}#dialogue{bottom:123px;max-width:65%;font-size:12px;padding:8px 12px}}
#boss-hud{position:absolute;top:190px;right:3.5%;width:340px;padding:15px 18px;border:1px solid #cfa5df66;border-radius:5px;background:#211b35db;pointer-events:none;color:#f3e3ff}#boss-hud small{font-size:8px;letter-spacing:1.4px;display:block;color:#c5b4d3}#boss-hud strong{font-size:24px;display:block;margin:8px 0;letter-spacing:1px}.boss-track{height:5px;background:#ffffff20;margin:7px 0}.boss-track i{display:block;height:100%;background:#cb91dd;width:100%;transition:width .2s}#boss-tell{font-size:11px;color:#d3c5d9}.ultimate .meter i{background:#b6e5d8}#touch-contact{background:#354d4b;border:1px solid #a8ddc5;color:#edf8da}.touch-actions{display:grid!important;grid-template-columns:70px 78px;gap:10px!important}.touch-actions button{width:100%!important;min-height:52px!important;font-size:10px!important;line-height:1.2}.touch-actions #touch-save{grid-column:2;grid-row:2}#touch-contact:disabled{opacity:.35;cursor:default}body.controller .keylegend{font-size:9px}
@media(max-width:900px){.ultimate{display:none!important}#boss-hud{top:137px;right:3%;width:270px;padding:9px 12px}#boss-hud strong{font-size:17px;margin:4px 0}#boss-hud small{font-size:7px}#boss-tell{font-size:9px}}
@media(max-width:600px){#boss-hud{top:128px;width:64%;right:4%;background:#211b35d9}.playing:has(#boss-hud:not(.hidden)) #chapter{display:none}#boss-hud small{font-size:6px;letter-spacing:.5px}#boss-hud strong{font-size:15px}.touch-actions{right:14px!important;bottom:20px!important}}
#education{z-index:30;background:#102622ed}.lesson-panel{width:min(620px,92vw);max-height:90dvh;overflow-y:auto;text-align:left!important}.lesson-panel h2{font-size:clamp(26px,4vw,38px);letter-spacing:-1px;margin:16px 0}.lesson-panel p{font-size:17px;line-height:1.7}.lesson-panel .lesson-context{font-size:12px;color:#b3c6b3}.lesson-panel a{color:#f2ce89;font-size:12px;line-height:1.5}.lesson-nav{display:flex;align-items:center;justify-content:space-between;margin-top:18px}.lesson-nav span{font-size:11px;color:#adbea5}.lesson-note{display:block;color:#98b39f;font-size:10px;line-height:1.5}.education-open{display:block;margin:12px auto 0;font-size:10px!important}#intro .education-open{margin-left:0;padding-left:0}

/* Keep transient feedback separate from the encounter panel. */
#toast{max-width:88vw;width:max-content;white-space:normal;line-height:1.15;font-size:clamp(20px,2.4vw,34px)}
#app:has(#boss-hud:not(.hidden)) #combo{display:none}
#app:has(#boss-hud:not(.hidden)) #toast{top:330px;max-width:min(520px,80vw);font-size:24px}
.modal>div{max-height:calc(100dvh - 24px);overflow-y:auto}
.lesson-nav button{min-height:40px;min-width:76px}
.lesson-panel .primary{margin:18px auto}

/* Touch HUD: charge meters above the controls, with no keyboard prompt row. */
@media(pointer:coarse){
  #stick{bottom:max(18px,env(safe-area-inset-bottom))}
  .touch-actions{right:max(18px,env(safe-area-inset-right))!important;bottom:max(18px,env(safe-area-inset-bottom))!important}
  #bottom{left:max(26px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right));bottom:calc(max(18px,env(safe-area-inset-bottom)) + 146px);gap:24px;pointer-events:none}
  #bottom .ability,#bottom .ability.ultimate{display:flex!important;width:46%;max-width:160px;min-width:0;gap:0}
  #bottom .ability>div{min-width:0}
  #bottom .key,#bottom .keylegend,#bottom #hint,#bottom .ability span:last-child{display:none}
  #bottom .ability small{font-size:7px;letter-spacing:1px}
  #bottom .meter{width:100%;margin:5px 0 0;height:4px}
  #floaters{display:none}
  #combo{top:159px;right:4%;max-width:44%;pointer-events:none}
  #combo strong{font-size:16px}
  #toast{top:242px;max-width:86vw;font-size:22px}
  #boss-hud{top:138px;left:50%;right:auto;transform:translateX(-50%);width:min(340px,calc(100% - 36px));padding:9px 12px}
  #boss-hud strong{font-size:16px;margin:5px 0}
  #app:has(#boss-hud:not(.hidden)) #toast{top:246px;max-width:86vw;font-size:19px}
  #dialogue{bottom:calc(max(18px,env(safe-area-inset-bottom)) + 208px);width:max-content;max-width:90%;font-size:11px;line-height:1.4;padding:8px 10px}
  #intro .education-open{max-width:100%;text-align:left;line-height:1.4;padding-top:10px;padding-bottom:10px}
  .lesson-panel{padding:22px!important}
  .lesson-panel p{font-size:15px;line-height:1.6}
}

/* Short landscapes reserve the centre for messages and the corners for thumbs. */
@media(pointer:coarse) and (max-height:540px) and (min-width:540px){
  #top{top:14px}.brand{font-size:20px}.brand-mark{font-size:34px}.build-tag{display:none}
  #hud{top:68px}#hud strong{font-size:28px}#hud small{font-size:7px;letter-spacing:1px}.savedbox em{font-size:13px}.timerbox{min-width:100px}
  #intro{top:67px}
  #intro .education-open{grid-column:2;margin:0;padding:7px 0;line-height:1.3;font-size:9px!important}
  #combo{top:126px;right:3%;max-width:180px}#combo strong{font-size:16px}#combo small{font-size:6px}
  #bottom{left:26px;right:22px;bottom:calc(max(18px,env(safe-area-inset-bottom)) + 151px)}
  #bottom .ability{max-width:158px}
  #toast{top:128px;max-width:45vw;font-size:21px}
  #boss-hud{top:121px;width:min(360px,calc(100vw - 370px));padding:7px 11px}
  #boss-hud small{font-size:6px;letter-spacing:.7px}#boss-hud strong{font-size:15px;margin:4px 0}#boss-tell{font-size:9px;line-height:1.3}
  #app:has(#boss-hud:not(.hidden)) #toast{top:218px;max-width:min(46vw,calc(100vw - 370px));font-size:17px}
  #dialogue{bottom:max(14px,env(safe-area-inset-bottom));max-width:min(54vw,calc(100vw - 370px));font-size:11px;padding:7px 10px}
  .modal>div{padding:18px 24px}
  .modal h2{font-size:32px;margin:12px 0}
  .modal .primary{margin:16px auto;padding:13px 18px}
  .modal .education-open{margin:3px auto 0;padding:8px}
  .lesson-panel{padding:18px 24px!important}
  .lesson-panel h2{font-size:26px}.lesson-panel p{font-size:14px;line-height:1.5}
}

/* Practice instructions stay visible in short phone landscape layouts. */
.playing.practice #chapter{display:block;max-width:90%;background:#123c38ed;padding:10px 12px;z-index:4}
.playing.practice #chapter small{font-size:12px;line-height:1.45;color:#fff3d4}
#share-status{overflow-wrap:anywhere;user-select:all}
.floating{max-width:80vw;text-align:center}
@media(max-height:540px){.playing.practice #chapter{top:126px;max-width:65%;left:17.5%}.result-stats{margin:12px 0}.result-stats b{font-size:25px}}