*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#0b1f10;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(14,50,24,.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(14,50,24,.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(14,50,24,.85);border-left:4px solid #8ee070;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,#f2a43a,#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(14,50,24,.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(4,20,8,.55);overflow:auto;padding:12px}
.box{background:rgba(14,44,22,.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:#c8e8b8}
#locs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.loc{flex:1 1 200px;background:#2a6a30;border:2px solid #7ed36a;color:#fff;border-radius:14px;padding:12px;cursor:pointer;display:flex;flex-direction:column;gap:6px;font:inherit}
.loc:hover{background:#358a3c}.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:#dff4d0}
.how{font-size:13px;color:#c8e8b8;margin:14px 0 8px;line-height:1.45}.fine{font-size:11px;color:#9bc08a;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:#f2a43a;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}
#flash{position:fixed;inset:0;background:radial-gradient(circle,rgba(150,255,140,.5),rgba(40,200,80,0) 70%);opacity:0;pointer-events:none;transition:opacity .5s}#flash.on{opacity:1;transition:none}
#pwr{position:absolute;top:52px;left:50%;margin-left:-80px;width:160px;height:16px;background:rgba(0,0,0,.5);border-radius:9px;overflow:hidden;font-size:11px;text-align:center;line-height:16px}
#pwrf{position:absolute;left:0;top:0;height:100%;width:0;background:linear-gradient(90deg,#3ad06a,#b8ff5a)}#pwr span{position:relative}
#basket{position:absolute;left:10px;bottom:170px;background:rgba(20,50,20,.78);border-radius:10px;padding:4px 10px;font-size:13px;max-width:60%}
body.touch #gt{display:block;position:absolute;right:30px;bottom:150px;width:64px;height:64px;border-radius:50%;background:rgba(40,110,50,.85);border:2px solid #fff;color:#fff;font-size:28px;pointer-events:auto}
body.touch #gt.ready{background:#3ad06a;box-shadow:0 0 18px #8dff8a}
.mascot{width:96px;height:96px;border-radius:50%;object-fit:cover;border:3px solid #7ed36a;display:block;margin:0 auto 6px}.guide{font-size:13px;color:#c8e8b8;margin:0 0 12px}.guide a{color:#f2a43a}

body{background:#21172d} .box{background:linear-gradient(135deg,#30243f,#4b344a)!important;color:#fff1de!important;border-color:#c7a164!important}h1{color:#f3d6a1!important}.sub,.guide,.how,.fine{color:#ecdaed!important}.crest{font-size:52px;color:#efcc8b}#gl{touch-action:none}#powers{position:absolute;right:10px;top:125px;display:flex;flex-direction:column;gap:6px;pointer-events:auto}#powers button{font-size:13px;padding:10px;background:#382247;color:#fff1ce;border:1px solid #c9a168;border-radius:12px}.panel{overflow-y:auto} @media(max-width:600px){#powers{top:160px}#powers button{font-size:11px;padding:8px}.box{max-height:90dvh;overflow:auto}}