*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#0a1630;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(10,30,80,.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(10,30,80,.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(10,30,80,.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,#ffb028,#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)}
body.touch #act{display:block;position:absolute;right:26px;bottom:34px;width:104px;height:104px;border-radius:50%;background:rgba(255,176,40,.85);border:3px solid #fff;color:#1a1200;font-size:22px;font-weight:900;pointer-events:auto}
body.touch #drop{display:block;position:absolute;right:140px;bottom:30px;width:64px;height:64px;border-radius:50%;background:rgba(10,30,80,.8);border:2px solid #fff;color:#fff;font-weight:800;pointer-events:auto}
.panel{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(5,14,40,.55);overflow:auto;padding:12px}
.box{background:rgba(10,26,70,.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:#bcd2ff}
#locs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.loc{flex:1 1 200px;background:#143a9a;border:2px solid #4f86ff;color:#fff;border-radius:14px;padding:12px;cursor:pointer;display:flex;flex-direction:column;gap:6px;font:inherit}
.loc:hover{background:#1c4cc4}.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:#d6e4ff}
.how{font-size:13px;color:#bcd2ff;margin:14px 0 8px;line-height:1.45}.fine{font-size:11px;color:#8da6dd;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:#ffb028;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}
