html,body{margin:0;height:100%;overflow:hidden;background:#111;overscroll-behavior:none;touch-action:none;user-select:none;-webkit-user-select:none;font-family:system-ui,sans-serif}
#c{display:block;width:100%;height:100%}
#hud{position:fixed;top:max(8px,env(safe-area-inset-top));left:8px;display:flex;gap:8px;align-items:center;background:#0008;color:#fff;padding:6px 10px;border-radius:12px;font-size:15px}
#hud button{background:none;border:0;color:#fff;font-size:18px;cursor:pointer;padding:0}
#joy{display:none;position:fixed;left:max(20px,env(safe-area-inset-left));bottom:max(24px,env(safe-area-inset-bottom));width:120px;height:120px;border-radius:50%;background:#fff3;border:2px solid #fff6}
#stick{position:absolute;left:40px;top:40px;width:40px;height:40px;border-radius:50%;background:#fffc;pointer-events:none}
@media (pointer:coarse){#joy{display:block}}
#hbw{position:fixed;left:50%;transform:translateX(-50%);bottom:max(8px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:4px;max-width:94vw}
#hotbar{display:flex;gap:4px}
.sl{position:relative;width:44px;height:44px;background:#0009;border:2px solid #fff4;border-radius:10px;color:#fff;font-size:22px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.sl.on{border-color:#ffd54a;background:#000c}
.sl b{position:absolute;right:3px;bottom:0;font-size:11px}
.sl.sd::after{content:'🌱';position:absolute;left:1px;top:-2px;font-size:11px}
#act{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(30px,env(safe-area-inset-bottom));width:84px;height:84px;border-radius:50%;border:2px solid #fff6;background:#2e7d3299;font-size:34px;color:#fff;cursor:pointer}
#toast{position:fixed;top:60px;left:50%;transform:translateX(-50%);background:#000a;color:#fff;padding:6px 12px;border-radius:10px;font-size:14px;opacity:0;transition:opacity .2s;pointer-events:none}
#toast.on{opacity:1}
#panel{position:fixed;inset:0;margin:auto;width:min(92vw,360px);height:fit-content;max-height:80vh;overflow:auto;background:#1c1f26f2;color:#fff;border-radius:16px;padding:14px;box-sizing:border-box}
#panel h3{margin:10px 0 6px;font-size:15px}
.rw{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:14px}
.rw span{flex:1}
#panel button{background:#3a8f3f;color:#fff;border:0;border-radius:8px;padding:6px 10px;font-size:13px;cursor:pointer}
#panel button[data-x]{background:#555;width:100%;margin-top:10px}
#hotbar{max-width:100%;overflow-x:auto;scrollbar-width:none;touch-action:pan-x}
.sl{flex:none}
#binfo{background:#000a;color:#fff;font-size:13px;padding:4px 10px;border-radius:8px;white-space:nowrap;pointer-events:none;max-width:100%;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis}
#hud button.on{background:#ffd54a66;border-radius:6px}
#hpb{position:fixed;top:calc(max(8px,env(safe-area-inset-top)) + 40px);left:8px;width:150px;height:18px;background:#0008;border-radius:9px;overflow:hidden}
#hpf{position:absolute;left:0;top:0;bottom:0;background:#e53935;width:100%}
#hpt{position:relative;display:block;text-align:center;color:#fff;font-size:12px;line-height:18px}
#atk{position:fixed;right:max(112px,env(safe-area-inset-right));bottom:max(40px,env(safe-area-inset-bottom));width:64px;height:64px;border-radius:50%;border:2px solid #fff6;background:#c6282899;font-size:26px;color:#fff;cursor:pointer}
#toast{top:90px}
#dead{position:fixed;inset:0;background:#000b;display:flex;align-items:center;justify-content:center;color:#fff;text-align:center}
#dead[hidden]{display:none}
#dead div{background:#1c1f26;padding:20px;border-radius:16px;max-width:300px}
#dead button{background:#3a8f3f;color:#fff;border:0;border-radius:10px;padding:10px 16px;font-size:15px;margin-top:8px;cursor:pointer}
#mpb{position:fixed;top:calc(max(8px,env(safe-area-inset-top)) + 62px);left:8px;width:150px;height:14px;background:#0008;border-radius:7px;overflow:hidden}
#mpf{position:absolute;left:0;top:0;bottom:0;background:#1e88e5;width:100%}
#mpt{position:relative;display:block;text-align:center;color:#fff;font-size:11px;line-height:14px}
#skbar{position:fixed;right:12px;bottom:128px;display:flex;flex-direction:column-reverse;gap:6px}
@media (pointer:coarse) and (orientation:landscape){#hbw{max-width:calc(100vw - 340px)}#skbar{bottom:124px}}
@media (pointer:coarse) and (orientation:portrait){#hbw{bottom:168px}#skbar{bottom:232px}}
.sk{position:relative;width:48px;height:48px;border-radius:50%;background:#1565c0cc;border:2px solid #fff6;color:#fff;font-size:22px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.sk span{position:absolute;inset:0;border-radius:50%;background:#000a;font-size:16px;display:flex;align-items:center;justify-content:center}
.sk span:empty{display:none}
#hud{flex-wrap:wrap;max-width:calc(100vw - 24px)}
#toast{top:112px}

/* tab panel tas */
#panel .tabs{display:flex;gap:6px;margin-bottom:8px}
#panel .tabs button{flex:1;background:#2b303a;padding:8px 4px}
#panel .tabs button.on{background:#3a8f3f}
/* mode atur tata letak */
#layb{position:fixed;top:max(8px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;gap:8px;align-items:center;background:#000d;color:#fff;padding:6px 10px;border-radius:12px;font-size:13px;z-index:20}
#layb[hidden]{display:none}
#layb button{background:#3a8f3f;color:#fff;border:0;border-radius:8px;padding:6px 10px;font-size:13px;cursor:pointer}
#layb #layr{background:#555}
body.lay .mv{outline:2px dashed #ffd54a;outline-offset:3px;touch-action:none!important;cursor:move}
body.lay .mv *{pointer-events:none}
body.lay #joy{display:block}
body.lay #skbar{min-width:48px;min-height:48px;background:#ffd54a33;border-radius:12px}