html,body{margin:0;height:100%;overflow:hidden;background:#87ceeb;font-family:monospace;-webkit-user-select:none;user-select:none}
body.playing{cursor:none}
body.inv-open{cursor:default}
#game{position:fixed;inset:0}

/* Menu */
#menu{position:fixed;inset:0;background:linear-gradient(#87ceeb,#5a9fd4);display:flex;align-items:center;justify-content:center;flex-direction:column;color:#fff;z-index:5;text-align:center;gap:10px;padding:20px;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y}
#menu h1{margin:0;font-size:42px;text-shadow:2px 2px 0 #365}
.tagline{margin:0 0 8px;opacity:.85;font-size:13px}
#menu input{font-family:monospace;font-size:16px;padding:10px 12px;border:2px solid #365;border-radius:6px;background:rgba(255,255,255,.92);width:220px;text-align:center;text-transform:uppercase}
#nameInput{text-transform:none}
.mbtn{font-family:monospace;font-size:17px;padding:12px 0;width:248px;border:2px solid #243;border-radius:6px;background:#5cab3c;color:#fff;cursor:pointer;text-shadow:1px 1px 0 #364}
.mbtn:active{transform:translateY(1px)}
#btnHost{background:#3c8bab}
.joinRow{display:flex;gap:8px}
.joinRow input{width:130px}
.joinRow .mbtn{width:96px;background:#8b6bab}
#menuStatus{min-height:16px;margin:0;font-size:13px}
#menuError{min-height:16px;margin:0;font-size:13px;color:#ffd2d2}
.hint{font-size:11px;opacity:.8;margin-top:6px;line-height:1.6}

#loading{position:fixed;inset:0;background:rgba(20,30,40,.9);display:none;align-items:center;justify-content:center;color:#fff;font-size:20px;z-index:5}

/* HUD */
#hud{position:fixed;top:10px;left:10px;color:#fff;text-shadow:1px 1px 2px #000;font-size:12px;pointer-events:none;z-index:2}
#banner{position:fixed;top:10px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.5);color:#fff;padding:6px 14px;border-radius:6px;font-size:13px;z-index:2;pointer-events:none}
#crosshair{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:20px;text-shadow:1px 1px 2px #000;pointer-events:none;z-index:2}
#mineBar{position:fixed;top:calc(50% + 22px);left:50%;transform:translateX(-50%);width:60px;height:6px;background:rgba(0,0,0,.5);border-radius:3px;z-index:2;display:none;pointer-events:none}
#mineBar div{height:100%;width:0;background:#fff;border-radius:3px}

/* Hotbar & tools */
#hotbar{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:2}
#tools{position:fixed;bottom:70px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:2}
.slot{position:relative;width:46px;height:46px;border:2px solid #333;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;flex-direction:column;color:#fff;font-size:9px;border-radius:4px}
.slot .sw{width:24px;height:24px;border-radius:2px;image-rendering:pixelated;background-size:cover}
.slot .num{position:absolute;top:1px;left:3px;opacity:.7}
.slot .cnt{position:absolute;bottom:1px;right:3px;font-weight:bold;font-size:10px}
.slot.active{border-color:#fff;background:rgba(255,255,255,.2)}
.slot.empty .sw{background:rgba(255,255,255,.06)}
.slot.zero .sw{opacity:.35}
.tool{width:40px;height:40px;font-size:18px}

/* Inventory */
#inv{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(20,20,20,.92);border:2px solid #555;border-radius:8px;padding:14px;color:#fff;z-index:4;display:none;min-width:280px;max-width:90vw}
#inv h3{margin:0 0 4px;font-size:14px}
#inv p{margin:0 0 10px;font-size:11px;opacity:.7}
#invGrid{display:flex;flex-wrap:wrap;gap:6px;min-height:52px}
#invClear{margin-top:10px;background:#444;color:#fff;border:1px solid #666;border-radius:4px;padding:6px 10px;font-family:monospace;cursor:pointer}
.invItem{width:46px;height:46px;border:2px solid #444;border-radius:4px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;position:relative;cursor:grab}
.invItem .sw{width:24px;height:24px;image-rendering:pixelated;background-size:cover;border-radius:2px}
.invItem .cnt{position:absolute;bottom:1px;right:3px;font-size:10px;font-weight:bold}
.empty-note{font-size:11px;opacity:.5;align-self:center}

/* Touch UI */
#touchUI{display:none;z-index:3}
#joyZone{position:fixed;left:0;bottom:0;width:45vw;height:45vh}
#joyBase{position:absolute;width:110px;height:110px;border:2px solid rgba(255,255,255,.4);border-radius:50%;background:rgba(0,0,0,.15);display:none}
#joyStick{position:absolute;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.5);display:none}
.tbtn{position:fixed;width:64px;height:64px;border-radius:50%;background:rgba(0,0,0,.4);border:2px solid rgba(255,255,255,.5);color:#fff;font-size:12px;font-family:monospace;display:flex;align-items:center;justify-content:center;z-index:3}
.tbtn:active{background:rgba(255,255,255,.3)}
#btnJump{right:20px;bottom:150px}
#btnMine{right:96px;bottom:80px}
#btnPlace{right:20px;bottom:80px}
#btnInv{position:fixed;top:10px;right:10px;width:44px;height:44px;border-radius:8px;background:rgba(0,0,0,.4);border:2px solid rgba(255,255,255,.5);color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center;z-index:3}

/* Rotate prompt (touch portrait only) */
#rotate{display:none;position:fixed;inset:0;background:#111;color:#fff;z-index:6;align-items:center;justify-content:center;text-align:center;font-size:18px;flex-direction:column}
@media (orientation:portrait){ body.touch #rotate{display:flex} }

/* v1.1 — compass, chat */
#compass{position:fixed;top:10px;left:50%;transform:translateX(-50%);width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.4);border:2px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;z-index:2;pointer-events:none}
#compassArrow{color:#ff6b5a;font-size:16px;display:block;transition:transform .1s linear}
#chatLog{position:fixed;left:10px;bottom:130px;z-index:2;pointer-events:none;max-width:46vw}
.chatMsg{background:rgba(0,0,0,.45);color:#fff;font-size:12px;padding:3px 8px;border-radius:4px;margin-top:3px;transition:opacity 1s;font-family:monospace;word-break:break-word}
.chatMsg.fade{opacity:0}
#chatRow{position:fixed;left:10px;bottom:96px;z-index:4;display:flex;gap:6px}
#chatRow input{font-family:monospace;font-size:14px;padding:8px 10px;border:2px solid #555;border-radius:6px;background:rgba(20,20,20,.9);color:#fff;width:min(52vw,280px)}
#chatRow button{font-size:14px;padding:0 14px;border:2px solid #555;border-radius:6px;background:#3c8bab;color:#fff;cursor:pointer}
#btnChat{position:fixed;top:10px;right:64px;width:44px;height:44px;border-radius:8px;background:rgba(0,0,0,.4);border:2px solid rgba(255,255,255,.5);color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center;z-index:3}

/* v1.2-pre — skins, quit, 10-slot hotbar, banner reposition, touch icons */
#skinRow{display:flex;gap:8px;margin:4px 0}
.skinBtn{width:44px;height:58px;border:2px solid #365;border-radius:6px;background:rgba(255,255,255,.85);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px}
.skinBtn.active{border-color:#fff;box-shadow:0 0 0 2px #5cab3c}
.skHead{width:16px;height:16px;border-radius:2px}
.skBody{width:20px;height:16px;border-radius:2px}
.skLegs{width:14px;height:12px;border-radius:2px}
#banner{left:10px;top:30px;transform:none;text-align:left;font-size:12px;padding:4px 10px}
#btnQuit{position:fixed;top:10px;right:118px;width:44px;height:44px;border-radius:8px;background:rgba(0,0,0,.4);border:2px solid rgba(255,255,255,.5);color:#fff;font-size:20px;display:none;align-items:center;justify-content:center;z-index:3;cursor:pointer}
body:not(.touch) #btnQuit{right:10px}
.slot .ticon{font-size:18px}
.tbtn{font-size:26px}
#invTools{display:flex;gap:6px;margin-bottom:8px}
.invLabel{font-size:10px;opacity:.6;margin:4px 0 4px;text-transform:uppercase;letter-spacing:1px}
.invItem .ticon{font-size:18px}
@media (max-width:860px){
  .slot{width:38px;height:38px}
  .slot .sw{width:20px;height:20px}
  .slot .ticon{font-size:15px}
  #hotbar{gap:4px;bottom:8px}
}

/* v1.1.6 — real character faces in picker */
.skinBtn{width:52px;height:74px}
.skFace{width:28px;height:28px;image-rendering:pixelated;border-radius:2px}
.skName{font-size:8px;color:#243;font-family:monospace}


/* v1.2 — survival */
#vitals{position:fixed;bottom:64px;left:50%;transform:translateX(-50%);display:none;gap:26px;z-index:2;pointer-events:none}
#hearts,#hungerBar{display:flex;gap:1px}
.vit{font-size:14px;text-shadow:1px 1px 1px #000}
.vit.half{opacity:.55}
.vit.off{opacity:.18;filter:grayscale(1)}
#goal{position:fixed;top:52px;left:50%;transform:translateX(-50%);color:#fff;text-shadow:1px 1px 2px #000;font-size:11px;font-family:monospace;z-index:2;pointer-events:none;display:none;background:rgba(0,0,0,.25);padding:3px 10px;border-radius:4px}
#vignette{position:fixed;inset:0;pointer-events:none;z-index:3;opacity:0;transition:opacity .25s;background:radial-gradient(ellipse at center, transparent 45%, rgba(180,20,20,.65) 100%)}
#toasts{position:fixed;top:80px;right:12px;z-index:4;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.toast{background:rgba(20,20,20,.85);border:1px solid #666;color:#ffd97a;font-family:monospace;font-size:12px;padding:8px 14px;border-radius:6px;transform:translateX(120%);transition:transform .35s}
.toast.show{transform:translateX(0)}
#deathScreen{position:fixed;inset:0;background:rgba(110,10,10,.55);display:none;align-items:center;justify-content:center;flex-direction:column;gap:16px;z-index:6;color:#fff;text-align:center;font-family:monospace}
#deathScreen h2{font-size:28px;text-shadow:2px 2px 0 #400}
@media (max-width:860px){ #vitals{bottom:52px} .vit{font-size:12px} }


/* version label */
#verLabel{font-size:10px;opacity:.6;margin:2px 0 0;font-family:monospace}


/* v1.2.5 — crafting */
#invTabs{display:flex;gap:6px;margin-bottom:10px}
.itab{flex:1;font-family:monospace;font-size:12px;padding:7px 0;background:#333;color:#bbb;border:1px solid #555;border-radius:5px;cursor:pointer}
.itab.active{background:#5cab3c;color:#fff;border-color:#7c4}
#inv{max-height:78vh;overflow-y:auto;min-width:320px}
.craftRow{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;border:1px solid #444;border-radius:6px;padding:8px 10px;margin-bottom:8px;background:rgba(255,255,255,.04)}
.craftRow.locked{opacity:.55}
.cOut{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:bold}
.cOut .sw,.cIng .sw{width:20px;height:20px;image-rendering:pixelated;background-size:cover;border-radius:2px;display:inline-block}
.cIns{grid-row:2;display:flex;align-items:center;gap:5px;font-size:10px}
.cIng{display:flex;align-items:center;gap:3px}
.cIng.miss b{color:#ff8a80}
.cIng b{color:#9ccc65}
.cPlus{opacity:.5}
.cBtn{grid-row:1/3;font-family:monospace;padding:8px 14px;background:#5cab3c;border:1px solid #7c4;color:#fff;border-radius:5px;cursor:pointer}
.cBtn:disabled{background:#444;border-color:#555;color:#888;cursor:default}
.cTip{grid-column:1/3;font-size:10px;opacity:.6}
.guideRow{display:flex;gap:10px;border-bottom:1px solid #3a3a3a;padding:8px 2px;align-items:flex-start}
.gIcon .sw{width:24px;height:24px;image-rendering:pixelated;background-size:cover;border-radius:3px;display:block}
.gIcon .ticon{font-size:20px}
.gText{display:flex;flex-direction:column;gap:2px;font-size:11px}
.gText b{font-size:12px;color:#ffd97a}
.gText span{opacity:.85}


/* v1.3 — 100 recipes */
#craftCats{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}
#craftCats .itab{flex:none;padding:5px 9px;font-size:10px}
#inv{min-width:340px;max-width:min(94vw,480px)}


/* v1.4 — horde intelligence */
#horde.iq1{color:#e8d34a}
#horde.iq2{color:#ff9c50}
#horde.iq3{color:#ff5a5a;text-shadow:0 0 6px #a00}


/* v1.4.5 — Forge / Nightfall modes */
#modeRow{display:flex;gap:8px;margin:2px 0}
.modeBtn{width:122px;padding:8px 4px;font-family:monospace;font-size:13px;border:2px solid #365;border-radius:6px;background:rgba(255,255,255,.85);cursor:pointer;color:#243;line-height:1.5}
.modeBtn small{font-size:9px;opacity:.7}
.modeBtn.active{border-color:#fff;box-shadow:0 0 0 2px #5cab3c;background:#eaf6e2}
#btnMode{position:fixed;top:10px;right:172px;width:44px;height:44px;border-radius:8px;background:rgba(0,0,0,.4);border:2px solid rgba(255,255,255,.5);color:#fff;font-size:20px;display:none;align-items:center;justify-content:center;z-index:3;cursor:pointer}
body:not(.touch) #btnMode{right:64px}



/* item info popup (inventory tap) */
#itemInfo{position:fixed;z-index:8;min-width:140px;max-width:220px;padding:8px 10px;background:rgba(15,15,18,.94);border:1px solid #666;border-radius:6px;color:#fff;font-family:monospace;font-size:11px;line-height:1.35;pointer-events:none;opacity:0;transition:opacity .15s;box-shadow:0 4px 14px rgba(0,0,0,.45)}
#itemInfo.show{opacity:1}
#itemInfo b{display:block;font-size:12px;color:#ffd97a;margin-bottom:3px}
#itemInfo span{opacity:.9}

/* v1.5 — world slots */
#worlds{display:flex;flex-direction:column;gap:8px;width:280px}
.worldCard{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.9);border:2px solid #365;border-radius:6px;padding:8px 10px;color:#243}
.worldCard.empty{background:rgba(255,255,255,.55);justify-content:center}
.wNew{background:none;border:none;font-family:monospace;font-size:14px;cursor:pointer;color:#243;line-height:1.6;padding:4px}
.wInfo{display:flex;flex-direction:column;text-align:left;gap:2px}
.wInfo b{font-size:13px}
.wInfo small{font-size:9px;opacity:.7}
.wBtns{display:flex;gap:4px}
.wBtns button{width:32px;height:32px;border:1px solid #587;border-radius:5px;background:#eaf6e2;cursor:pointer;font-size:14px}
.wBtns .wDel{background:#f6e2e2;border-color:#a66}
.linkBtn{background:none;border:none;color:#eaf6e2;font-family:monospace;font-size:11px;text-decoration:underline;cursor:pointer;margin-top:4px}
@media (max-height:760px){ #menu{gap:6px} #menu h1{font-size:30px} }


/* v1.5.6 — mobile menu scrolling & responsiveness */
#game,#touchUI,#joyZone,.tbtn{touch-action:none}
#inv{touch-action:pan-y}
#menu{padding:max(20px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom))}
@media (max-height:820px), (orientation:landscape) and (max-width:1000px){
  #menu{justify-content:flex-start}
}
@media (max-width:520px){
  #menu h1{font-size:30px}
  #menu{gap:7px}
  #worlds{width:min(92vw,300px)}
  .skinBtn{width:44px;height:64px}
  .skFace{width:22px;height:22px}
  .modeBtn{width:110px;font-size:12px;padding:6px 3px}
  #menu input{width:min(70vw,220px)}
  .joinRow input{width:120px}
}