*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#0c1a2e;font-family:system-ui,Segoe UI,Roboto,sans-serif;color:#fff;touch-action:none;user-select:none}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
#hud{position:fixed;inset:0;pointer-events:none}
#htop{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:8px;align-items:center}
.pill{background:rgba(12,30,60,.78);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:6px 14px;font-size:15px;color:#fff;pointer-events:auto}
.pill b{color:#ffd23a;margin-left:4px}
#pausebtn{margin-left:auto;font-weight:800;cursor:pointer}
#goals{position:absolute;top:52px;left:10px;display:flex;flex-direction:column;gap:4px}
.g{background:rgba(12,30,60,.72);border-radius:10px;padding:4px 10px;font-size:13px}
.g b{color:#ffd23a;margin-left:6px}.g.ok b{color:#5df08a}.g.ok:after{content:" \2713";color:#5df08a}
#toasts{position:absolute;top:52px;right:10px;display:flex;flex-direction:column;gap:6px;align-items:flex-end;max-width:55%}
.tt{background:rgba(12,30,60,.85);border-left:4px solid #6fd0ff;padding:6px 12px;border-radius:8px;font-size:14px}
.tt.good{border-color:#3ad06a}.tt.bad{border-color:#ff7a3a}
#hint{position:absolute;left:0;right:0;bottom:22%;text-align:center;font-size:20px;font-weight:700;text-shadow:0 2px 6px #000}
#hbar{position:absolute;left:50%;bottom:17%;width:220px;height:14px;margin-left:-110px;background:rgba(0,0,0,.5);border-radius:8px;overflow:hidden;opacity:0;transition:opacity .15s}
#hbarf{height:100%;width:0;background:linear-gradient(90deg,#ff4a3a,#ffd23a)}
#stick,#act,#drop{display:none}
body.touch #stick{display:block;position:absolute;left:24px;bottom:24px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.3);pointer-events:auto}
body.touch #knob{position:absolute;left:35px;top:35px;width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.5)}
.panel{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(4,10,24,.55);overflow:auto;padding:12px}
.box{background:rgba(12,28,58,.92);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:22px;max-width:760px;width:100%;text-align:center}
h1{margin:0;font-size:34px;color:#ffd23a}h2{margin:0 0 8px;font-size:28px;color:#ffd23a}
.sub{margin:4px 0 14px;color:#c4dcff}
#locs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.loc{flex:1 1 200px;background:#1d4fb0;border:2px solid #6fb4ff;color:#fff;border-radius:14px;padding:12px;cursor:pointer;display:flex;flex-direction:column;gap:6px;font:inherit}
.loc:hover{background:#2a66d8}.loc.locked{opacity:.45;cursor:not-allowed}
.ln{font-size:20px;font-weight:800}.ls{color:#ffd23a;font-size:20px}.lb{font-size:13px;color:#e0ecff}
.how{font-size:13px;color:#c4dcff;margin:14px 0 8px;line-height:1.45}.fine{font-size:11px;color:#8fa8d8;margin:10px 0 0}
button{font:inherit;font-weight:700}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.row button,#qbtn{background:#ff4a3a;color:#1a1200;border:0;border-radius:12px;padding:10px 20px;font-size:16px;cursor:pointer}
.ghost{background:transparent!important;color:#fff!important;border:2px solid rgba(255,255,255,.4)!important}
#rstars{font-size:44px;color:#ffd23a;letter-spacing:6px}
#rstats{display:flex;flex-direction:column;gap:4px;font-size:16px;margin-top:8px}#rstats b{color:#ffd23a}
#fade{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;transition:opacity .35s}#fade.on{opacity:1}
#prog{position:absolute;top:46px;left:10px;right:10px;height:8px;background:rgba(0,0,0,.4);border-radius:5px;overflow:hidden}#progf{height:100%;width:0;background:linear-gradient(90deg,#ff4a3a,#ffd23a)}
body.touch #jump{display:block;position:absolute;right:26px;bottom:34px;width:104px;height:104px;border-radius:50%;background:rgba(255,74,58,.88);border:3px solid #fff;color:#fff;font-size:20px;font-weight:900;pointer-events:auto}
body.touch #slide{display:block;position:absolute;right:140px;bottom:30px;width:74px;height:74px;border-radius:50%;background:rgba(12,30,60,.85);border:2px solid #fff;color:#fff;font-weight:800;font-size:13px;pointer-events:auto}
#jump,#slide{display:none}

#chain{position:absolute;top:58px;left:10px;right:10px;height:4px;background:rgba(0,0,0,.3);border-radius:3px;overflow:hidden}#chainf{height:100%;width:0;background:#19d9f2}
#hint{opacity:0;transition:opacity .15s;color:#7ff0ff}
#hook{display:none}
body.touch #hook{display:block;position:absolute;right:26px;bottom:150px;width:96px;height:96px;border-radius:50%;background:rgba(25,217,242,.88);border:3px solid #fff;color:#04202a;font-size:19px;font-weight:900;pointer-events:auto}
#toasts{top:70px}