*{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#0b1d33;font-family:system-ui,sans-serif;color:#fff;touch-action:none}
canvas{display:block}
.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;background:radial-gradient(circle at 50% 30%,rgba(20,120,180,.7),rgba(5,20,40,.92));z-index:10}
.screen.hide{display:none}
h1{font-size:clamp(34px,8vw,72px);margin:0 0 6px;letter-spacing:2px;text-shadow:0 4px 20px #000}
p{opacity:.85;margin:6px 0}
button.big{margin-top:22px;padding:16px 46px;font-size:22px;font-weight:700;border:0;border-radius:40px;background:linear-gradient(#ffd54a,#ff9800);color:#331;cursor:pointer;box-shadow:0 6px 24px rgba(0,0,0,.5)}
button.big:active{transform:scale(.96)}
.help{margin-top:18px;font-size:14px;line-height:1.7;background:rgba(0,0,0,.35);padding:12px 18px;border-radius:12px}
#hud{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));left:12px;z-index:5;display:none}
#hbar{width:min(260px,55vw);height:20px;border:2px solid #fff;border-radius:12px;background:rgba(0,0,0,.5);overflow:hidden}
#hfill{height:100%;width:100%;background:#2a2;transition:width .1s}
#hmsg{font-size:13px;margin-top:4px;color:#ff8080;min-height:18px;text-shadow:0 1px 3px #000}
#flash{position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle,rgba(255,0,0,0) 40%,rgba(255,0,0,.6));opacity:0;z-index:4;transition:opacity .15s}
#touch{display:none;position:fixed;inset:0;z-index:6;pointer-events:none}
#stick{position:absolute;left:calc(24px + env(safe-area-inset-left,0px));bottom:calc(28px + env(safe-area-inset-bottom,0px));width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.15);border:2px solid rgba(255,255,255,.4);pointer-events:auto}
#knob{position:absolute;left:35px;top:35px;width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.55)}
#jump{position:absolute;right:calc(28px + env(safe-area-inset-right,0px));bottom:calc(40px + env(safe-area-inset-bottom,0px));width:84px;height:84px;border-radius:50%;background:rgba(255,200,60,.45);border:2px solid rgba(255,255,255,.6);font-weight:700;display:flex;align-items:center;justify-content:center;pointer-events:auto}

/* ---- chest + inventory ---- */
#chestBtn{position:fixed;left:50%;bottom:calc(150px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:7;padding:14px 26px;font-size:18px;font-weight:700;border:2px solid rgba(255,255,255,.6);border-radius:30px;background:linear-gradient(#ffd54a,#ff9800);color:#331;box-shadow:0 6px 20px rgba(0,0,0,.5);cursor:pointer}
#chestBtn:active{transform:translateX(-50%) scale(.96)}
#chestBtn.hide,#inv.hide{display:none}
#inv{position:fixed;inset:0;z-index:12;display:flex;align-items:center;justify-content:center;background:rgba(0,10,25,.6);padding:16px}
.panel{width:min(420px,100%);background:linear-gradient(#5a3b21,#3a2412);border:3px solid #c99a55;border-radius:16px;padding:16px;box-shadow:0 12px 40px rgba(0,0,0,.8)}
.ptitle{display:flex;justify-content:space-between;align-items:center;font-size:20px;font-weight:700;margin-bottom:12px}
#invClose{width:36px;height:36px;border-radius:50%;border:2px solid #c99a55;background:rgba(0,0,0,.35);color:#fff;font-size:16px;cursor:pointer}
#slots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.slot{aspect-ratio:1;min-height:76px;border-radius:12px;background:rgba(0,0,0,.35);border:2px solid #8a6a3c;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}
.slot.full{background:rgba(255,213,74,.16);border-color:#ffd54a}
.slot:active{transform:scale(.96)}
.slot .ic{font-size:36px;line-height:1}
.slot .nm{font-size:11px;margin-top:4px;opacity:.9}
.handrow{display:flex;align-items:center;gap:12px;margin-top:14px;font-weight:700}
#handSlot{width:84px;flex:none}
.tip{font-size:12px;opacity:.8;margin:10px 0 0}
#toast{position:fixed;top:18%;left:50%;transform:translateX(-50%);z-index:13;background:rgba(0,0,0,.72);padding:10px 18px;border-radius:20px;opacity:0;transition:opacity .25s;pointer-events:none;font-weight:600;white-space:nowrap}
#toast.show{opacity:1}
#hhand{font-size:13px;margin-top:4px;text-shadow:0 1px 3px #000}

/* ---- inventory v2: hotbar, use button, bag ---- */
.slot{position:relative;aspect-ratio:auto;min-height:64px}
#slots,#bagslots{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:8px}
.panel{max-height:94vh;overflow:auto}
.sub{font-weight:700;margin:14px 0 8px}
.cnt{position:absolute;right:5px;bottom:3px;font-size:12px;font-weight:700;text-shadow:0 1px 2px #000}
#hotbar{display:none;position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:5;gap:4px}
.hs{position:relative;width:min(50px,9.5vw);height:min(50px,9.5vw);border-radius:8px;background:rgba(0,0,0,.45);border:2px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;cursor:pointer}
.hs.sel{border-color:#ffd54a;background:rgba(255,213,74,.25);transform:translateY(-4px)}
.hs .ic{font-size:min(26px,5.5vw)}
.hs .k{position:absolute;left:3px;top:0;font-size:10px;opacity:.75}
#selname{display:none;position:fixed;left:50%;bottom:calc(74px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:5;font-size:14px;font-weight:600;text-shadow:0 1px 4px #000;white-space:nowrap;pointer-events:none}
#useBtn{position:absolute;right:calc(28px + env(safe-area-inset-right,0px));bottom:calc(140px + env(safe-area-inset-bottom,0px));width:84px;height:84px;border-radius:50%;background:rgba(80,200,255,.45);border:2px solid rgba(255,255,255,.6);font-weight:700;display:flex;align-items:center;justify-content:center;pointer-events:auto}
#chestBtn{bottom:calc(110px + env(safe-area-inset-bottom,0px))}
@media (pointer:coarse){
  #hotbar{bottom:auto;top:calc(72px + env(safe-area-inset-top,0px));left:12px;transform:none}
  #selname{bottom:auto;top:calc(72px + 12vw + env(safe-area-inset-top,0px));left:12px;transform:none;font-size:12px}
  .hs{width:min(40px,9vw);height:min(40px,9vw)}
}

/* ---- crafting, build, crosshair ---- */
#craft{position:fixed;inset:0;z-index:12;display:flex;align-items:center;justify-content:center;background:rgba(0,10,25,.6);padding:16px}
#craft.hide,#craftBtn.hide{display:none}
#craftBtn{position:fixed;left:50%;bottom:calc(110px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:7;padding:14px 26px;font-size:18px;font-weight:700;border:2px solid rgba(255,255,255,.6);border-radius:30px;background:linear-gradient(#7fe0ff,#2a9df4);color:#012;box-shadow:0 6px 20px rgba(0,0,0,.5);cursor:pointer}
#craftClose{width:36px;height:36px;border-radius:50%;border:2px solid #c99a55;background:rgba(0,0,0,.35);color:#fff;font-size:16px;cursor:pointer}
.recipe{display:flex;align-items:center;gap:12px;background:rgba(0,0,0,.35);border:2px solid #8a6a3c;border-radius:12px;padding:10px;margin-bottom:8px}
.recipe .ic{font-size:34px}.recipe .info{flex:1;font-size:13px}.recipe .info b{font-size:16px;display:block}
.recipe button{padding:10px 16px;border:0;border-radius:20px;font-weight:700;background:linear-gradient(#ffd54a,#ff9800);color:#331;cursor:pointer}
.recipe button:disabled{opacity:.35;cursor:default}
#cross{display:none;position:fixed;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:rgba(255,255,255,.8);border:1px solid rgba(0,0,0,.6);z-index:5;pointer-events:none}
#aimtxt{position:fixed;left:50%;top:calc(50% + 18px);transform:translateX(-50%);z-index:5;font-size:13px;text-shadow:0 1px 4px #000;pointer-events:none;white-space:nowrap}
#breakBtn{position:absolute;right:calc(124px + env(safe-area-inset-right,0px));bottom:calc(60px + env(safe-area-inset-bottom,0px));width:70px;height:70px;border-radius:50%;background:rgba(255,90,90,.45);border:2px solid rgba(255,255,255,.6);font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;pointer-events:auto}

#coords{display:none;position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:12px;z-index:5;font:600 13px/1.2 ui-monospace,monospace;background:rgba(0,0,0,.45);padding:6px 10px;border-radius:10px;text-shadow:0 1px 3px #000;pointer-events:none}

#trade{position:fixed;inset:0;z-index:12;display:flex;align-items:center;justify-content:center;background:rgba(0,10,25,.6);padding:16px}
#trade.hide,#tradeBtn.hide,#ferryBtn.hide,#feedBtn.hide{display:none}
#tradeBtn,#ferryBtn,#feedBtn{position:fixed;left:50%;bottom:calc(110px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:7;padding:14px 26px;font-size:18px;font-weight:700;border:2px solid rgba(255,255,255,.6);border-radius:30px;background:linear-gradient(#ffe27a,#f59e0b);color:#331;box-shadow:0 6px 20px rgba(0,0,0,.5);cursor:pointer}
#tradeClose{width:36px;height:36px;border-radius:50%;border:2px solid #c99a55;background:rgba(0,0,0,.35);color:#fff;font-size:16px;cursor:pointer}
#tinfo{position:fixed;top:calc(48px + env(safe-area-inset-top,0px));right:12px;z-index:5;font-size:12px;font-weight:600;background:rgba(0,0,0,.45);padding:4px 10px;border-radius:10px;pointer-events:none;text-shadow:0 1px 3px #000}
#tinfo:empty{display:none}

/* ---- bridge + continue ---- */
#bridgeBtn{position:fixed;left:50%;bottom:calc(110px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:7;padding:14px 26px;font-size:18px;font-weight:700;border:2px solid rgba(255,255,255,.6);border-radius:30px;background:linear-gradient(#b6f28a,#3fae3f);color:#012;box-shadow:0 6px 20px rgba(0,0,0,.5);cursor:pointer}
#bridgeBtn.hide{display:none}
button.big#contBtn{margin-top:12px;background:linear-gradient(#7fe0ff,#2a9df4);color:#012}

/* ---- Mauua dialog ---- */
#talk{position:fixed;inset:0;z-index:12;display:flex;align-items:center;justify-content:center;background:rgba(0,10,25,.6);padding:16px}
#talk.hide,#talkBtn.hide{display:none}
#talkBtn{position:fixed;left:50%;bottom:calc(110px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:7;padding:14px 26px;font-size:18px;font-weight:700;border:2px solid rgba(255,255,255,.6);border-radius:30px;background:linear-gradient(#c6f7d0,#33b46b);color:#012;box-shadow:0 6px 20px rgba(0,0,0,.5);cursor:pointer;white-space:nowrap}
#talkClose{width:36px;height:36px;border-radius:50%;border:2px solid #c99a55;background:rgba(0,0,0,.35);color:#fff;font-size:16px;cursor:pointer}
.says{background:rgba(0,0,0,.35);border:2px solid #8a6a3c;border-radius:12px;padding:12px;font-size:15px;line-height:1.5;margin-bottom:10px;min-height:64px}
.talkopt{display:block;width:100%;margin-bottom:8px;padding:12px;border:0;border-radius:20px;font-weight:700;font-size:15px;background:linear-gradient(#ffd54a,#ff9800);color:#331;cursor:pointer}

/* ---- multiplayer lobby + room pill ---- */
input{-webkit-user-select:text;user-select:text;touch-action:manipulation}
.screen{overflow-y:auto;justify-content:flex-start;touch-action:pan-y}
.screen>:first-child{margin-top:auto}.screen>:last-child{margin-bottom:auto}.screen>*{flex-shrink:0}
#lobby{margin-top:16px;width:min(360px,100%);background:rgba(0,0,0,.4);border:2px solid rgba(255,255,255,.25);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px}
#lobby .ltitle{font-weight:700;letter-spacing:1px}
#lobby input{width:100%;padding:12px 14px;font-size:17px;font-weight:600;border:2px solid #c99a55;border-radius:14px;background:rgba(0,0,0,.45);color:#fff;outline:0;text-align:center}
#lobby input#codeIn{text-transform:uppercase;letter-spacing:4px}
#lobby .lrow{display:flex;gap:8px}
#lobby .lrow input{flex:1;min-width:0}
button.big.sm{margin:0;padding:12px 20px;font-size:17px}
button.big#createBtn{background:linear-gradient(#b6f28a,#3fae3f);color:#012}
button.big#joinBtn{background:linear-gradient(#7fe0ff,#2a9df4);color:#012}
#lobbyMsg{font-size:13px;min-height:16px;line-height:1.4}#lobbyMsg.err{color:#ff9a8a}
#room{position:fixed;top:calc(80px + env(safe-area-inset-top,0px));right:12px;z-index:5;display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.5);padding:5px 8px;border-radius:12px;font-size:12px;font-weight:600;text-shadow:0 1px 3px #000}
#room.hide{display:none}
#room button{padding:4px 8px;border:0;border-radius:10px;font-weight:700;font-size:12px;background:linear-gradient(#ffd54a,#ff9800);color:#331;cursor:pointer}

/* ===== v3: icon buttons, rotation / landscape, phone perf ===== */
canvas{position:fixed;inset:0;width:100%;height:100%;display:block}
html,body{height:100dvh}
.ibtn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;cursor:pointer;background:linear-gradient(#ffd54a,#ff9800);color:#331;box-shadow:0 6px 20px rgba(0,0,0,.5);font-size:30px;line-height:1;padding:0}
.ibtn:active{transform:scale(.93)}
.ibtn.xl{width:92px;height:92px;font-size:44px}.ibtn.md{width:64px;height:64px;font-size:30px;flex:none}.ibtn.sm{width:50px;height:50px;font-size:22px}
.ibtn.green{background:linear-gradient(#b6f28a,#3fae3f)}.ibtn.blue{background:linear-gradient(#7fe0ff,#2a9df4)}
#createBtn{font-size:24px}
#start .row{display:flex;gap:16px;align-items:center;justify-content:center;margin-top:18px}
.help{display:none}.help.show{display:block}
#fsBtn{position:fixed;left:50%;top:calc(8px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:11;width:38px;height:38px;padding:0;border-radius:50%;border:2px solid rgba(255,255,255,.5);background:rgba(0,0,0,.4);color:#fff;font-size:18px;cursor:pointer}
#lobby{flex-direction:column}
/* context buttons: sirf icon */
#chestBtn,#craftBtn,#tradeBtn,#ferryBtn,#feedBtn,#bridgeBtn,#talkBtn{padding:0;width:68px;height:68px;border-radius:50%;font-size:32px;display:flex;align-items:center;justify-content:center}
#chestBtn.hide,#craftBtn.hide,#tradeBtn.hide,#ferryBtn.hide,#feedBtn.hide,#bridgeBtn.hide,#talkBtn.hide{display:none}
@media (pointer:fine){
  #chestBtn::after,#craftBtn::after,#tradeBtn::after,#ferryBtn::after,#feedBtn::after,#talkBtn::after{content:'E';position:absolute;right:-2px;top:-2px;width:22px;height:22px;border-radius:50%;background:#000a;color:#fff;font:700 12px/22px system-ui;text-align:center}
  #bridgeBtn::after{content:'🖱';position:absolute;right:-4px;top:-4px;font-size:16px}
}
@media (pointer:coarse){
  #chestBtn,#craftBtn,#tradeBtn,#ferryBtn,#feedBtn,#bridgeBtn,#talkBtn{bottom:calc(185px + env(safe-area-inset-bottom,0px))}
}
#jump svg{width:40px;height:40px}#useBtn{font-size:34px}#breakBtn{font-size:30px}
.recipe button{width:46px;height:46px;padding:0;border-radius:50%;font-size:22px}
#talkOpts{display:flex;gap:10px}.talkopt{flex:1;width:auto;margin:0;padding:10px;font-size:28px;border-radius:16px}
#room button{width:32px;height:32px;padding:0;border-radius:50%;font-size:16px}
.tip{display:none}
/* phone landscape */
@media (orientation:landscape) and (max-height:520px){
  .screen{padding:8px}#start h1{font-size:28px;margin:0}#start .row{margin-top:8px}.ibtn.xl{width:72px;height:72px;font-size:34px}
  #lobby{margin-top:8px;padding:8px;gap:6px}#lobby input{padding:8px}
  .panel{width:min(560px,100%);max-height:90vh;padding:10px}.ptitle{margin-bottom:6px;font-size:17px}
  .slot{min-height:54px}#slots,#bagslots{grid-template-columns:repeat(auto-fill,minmax(58px,1fr))}.slot .ic{font-size:28px}
  #stick{width:112px;height:112px;bottom:calc(14px + env(safe-area-inset-bottom,0px))}#knob{left:26px;top:26px}
  #jump{width:74px;height:74px;bottom:calc(18px + env(safe-area-inset-bottom,0px))}
  #useBtn{width:74px;height:74px;bottom:calc(100px + env(safe-area-inset-bottom,0px))}
  #breakBtn{width:62px;height:62px;right:calc(108px + env(safe-area-inset-right,0px));bottom:calc(28px + env(safe-area-inset-bottom,0px))}
  #chestBtn,#craftBtn,#tradeBtn,#ferryBtn,#feedBtn,#bridgeBtn,#talkBtn{bottom:calc(20px + env(safe-area-inset-bottom,0px))}
  #hbar{height:16px}.hs{width:min(36px,8vw);height:min(36px,8vw)}
}

/* ===== v4: full-screen edge-to-edge (upar tak), first person, hold-to-build ===== */
html,body{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;overflow:hidden;overscroll-behavior:none}
@supports (height:100dvh){html,body{height:100dvh}}
canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;margin:0;padding:0;z-index:0}
.screen,#inv,#craft,#trade,#talk{top:0;left:0;right:0;bottom:0}
#cross{width:10px;height:10px;margin:-5px 0 0 -5px;background:rgba(255,255,255,.35);border:2px solid rgba(255,255,255,.95);box-shadow:0 0 3px #000}

.rcat{font-weight:700;font-size:14px;margin:10px 2px 6px;opacity:.95;letter-spacing:.5px}
#recipes{max-height:70vh;overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y}
#recipes .recipe{margin-bottom:6px}
.hs{width:min(46px,7.6vw);height:min(46px,7.6vw)}

/* ===== v6: armor (gear) HUD, crafting notes ===== */
#gear{position:absolute;left:calc(min(260px,55vw) + 10px);top:-3px;display:flex;gap:4px;pointer-events:auto}
#gear span{width:28px;height:28px;border-radius:8px;background:rgba(0,0,0,.5);border:2px solid #9aa1a8;display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer}
.rnote{font-size:12px;opacity:.85;margin:0 2px 8px;padding:6px 8px;border-radius:8px;background:rgba(255,160,40,.12);border:1px dashed rgba(255,190,90,.5)}

/* ===== Pirate ===== */
#pirate{position:fixed;inset:0;z-index:12;display:flex;align-items:center;justify-content:center;background:rgba(0,10,25,.6);padding:16px}
#pirate.hide,#pirateBtn.hide{display:none}
#pirateBtn{position:fixed;left:50%;bottom:calc(110px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:7;border:2px solid rgba(255,255,255,.6);background:linear-gradient(#5b5b66,#15151c);color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.5);cursor:pointer;padding:0;width:68px;height:68px;border-radius:50%;font-size:32px;display:flex;align-items:center;justify-content:center}
#pirateBtn.hide{display:none}
#pirateClose{width:36px;height:36px;border-radius:50%;border:2px solid #c99a55;background:rgba(0,0,0,.35);color:#fff;font-size:16px;cursor:pointer}
#pOpts{display:flex;gap:10px;flex-wrap:wrap}
#pinfo{position:fixed;top:calc(80px + env(safe-area-inset-top,0px));right:12px;z-index:5;font-size:12px;font-weight:600;background:rgba(0,0,0,.45);padding:4px 10px;border-radius:10px;pointer-events:none;text-shadow:0 1px 3px #000}
#pinfo:empty{display:none}
@media (pointer:fine){#pirateBtn::after{content:'E';position:absolute;right:-2px;top:-2px;width:22px;height:22px;border-radius:50%;background:#000a;color:#fff;font:700 12px/22px system-ui;text-align:center}}
@media (pointer:coarse){#pirateBtn{bottom:calc(185px + env(safe-area-inset-bottom,0px))}}
@media (orientation:landscape) and (max-height:520px){#pirateBtn{bottom:calc(20px + env(safe-area-inset-bottom,0px))}}

/* ---- v12: backpack ---- */
#packBtn{display:none;position:fixed;transform:translateX(-50%);left:calc(50% + 30px);top:calc(8px + env(safe-area-inset-top,0px));z-index:11;width:38px;height:38px;padding:0;border-radius:50%;border:2px solid rgba(255,255,255,.5);background:rgba(0,0,0,.4);color:#fff;font-size:18px;cursor:pointer}
#fsBtn{left:calc(50% - 30px)}
#pack{position:fixed;inset:0;z-index:12;display:flex;align-items:center;justify-content:center;background:rgba(0,10,25,.6);padding:16px}
#pack.hide{display:none}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;margin-bottom:10px}
#packClose{width:36px;height:36px;border-radius:50%;border:2px solid #c99a55;background:rgba(0,0,0,.35);color:#fff;font-size:16px;cursor:pointer}

/* ---- v13: 5 slot hotbar, bottom-middle (mobile bhi) ---- */
#packBtn.nopack{display:none!important}
#hotbar,#selname{left:50%!important;transform:translateX(-50%)!important}
.hs{width:min(46px,12vw);height:min(46px,12vw)}
.hs.sel{transform:translateY(-4px)}
@media (pointer:coarse){
  #hotbar{top:auto!important;bottom:calc(10px + env(safe-area-inset-bottom,0px))!important}
  #selname{top:auto!important;bottom:calc(60px + env(safe-area-inset-bottom,0px))!important;font-size:13px}
  .hs{width:min(44px,12vw);height:min(44px,12vw)}
}
@media (pointer:coarse) and (orientation:portrait){
  #stick{bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  #jump{bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  #useBtn{bottom:calc(172px + env(safe-area-inset-bottom,0px))}
  #breakBtn{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
}
@media (orientation:landscape) and (max-height:520px){
  #hotbar{bottom:calc(6px + env(safe-area-inset-bottom,0px))!important}
  #selname{bottom:calc(50px + env(safe-area-inset-bottom,0px))!important}
  .hs{width:min(38px,8vw);height:min(38px,8vw)}
  #chestBtn,#craftBtn,#tradeBtn,#ferryBtn,#feedBtn,#bridgeBtn,#talkBtn,#pirateBtn{bottom:calc(80px + env(safe-area-inset-bottom,0px))}
}

/* ---- v13: naya multiplayer home (tabs, public list, public/private) ---- */
#lobby{width:min(420px,100%);gap:10px;background:rgba(5,20,40,.55);border:2px solid rgba(255,255,255,.28);border-radius:20px;padding:14px;box-shadow:0 10px 40px rgba(0,0,0,.45)}
#lobby .ltitle{font-size:14px;opacity:.9}
#lobby input{font-size:16px}
.ltabs{display:flex;gap:6px;background:rgba(0,0,0,.35);padding:4px;border-radius:14px}
.ltabs button{flex:1;padding:10px 4px;border:0;border-radius:10px;background:transparent;color:#fff;font-size:14px;font-weight:700;cursor:pointer}
.ltabs button.on{background:linear-gradient(#ffd54a,#ff9800);color:#331}
.lpane{display:flex;flex-direction:column;gap:10px;text-align:left}.lpane.hide{display:none}
.lhead{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:14px}
.lhead button{width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.4);background:rgba(0,0,0,.35);color:#fff;cursor:pointer;font-size:15px;padding:0}
#pubList{display:flex;flex-direction:column;gap:8px;max-height:230px;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y}
.lempty,.lnote{text-align:center;font-size:13px;opacity:.85;padding:12px 4px}
.srv{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2)}
.srv .si{flex:1;min-width:0}.srv b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srv span{font-size:12px;opacity:.85}
.srv button{padding:10px 16px;border:0;border-radius:12px;background:linear-gradient(#7fe0ff,#2a9df4);color:#012;font-weight:800;cursor:pointer}
.srv button:disabled{background:#555;color:#bbb;cursor:default}
.lvis{display:flex;gap:8px}
.lvis button{flex:1;padding:10px 6px;border-radius:14px;border:2px solid rgba(255,255,255,.3);background:rgba(0,0,0,.35);color:#fff;font-size:15px;font-weight:700;cursor:pointer}
.lvis button small{display:block;font-size:11px;font-weight:500;opacity:.8;margin-top:2px}
.lvis button.on{border-color:#ffd54a;background:rgba(255,213,74,.22)}
.lcreate{padding:14px;border:0;border-radius:16px;background:linear-gradient(#b6f28a,#3fae3f);color:#012;font-size:18px;font-weight:800;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.lcreate:active,.srv button:active{transform:scale(.97)}
#lobby #srvIn{text-align:center}
@media (orientation:landscape) and (max-height:520px){#pubList{max-height:110px}.ltabs button{padding:6px 4px}}