@font-face{font-family:'MirkoFont';src:url('MirkoFont.ttf') format('truetype');font-weight:normal}
html,body{margin:0;height:100%;overflow:hidden;background:#000;font-family:'MirkoFont',ui-monospace,Menlo,monospace}
canvas#gl{position:fixed;inset:0;width:100vw;height:100vh;display:block;image-rendering:pixelated}
canvas#crosshair{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;mix-blend-mode:difference;z-index:5}
canvas#hud{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;image-rendering:pixelated;z-index:6}
#debug{position:fixed;left:4px;top:4px;z-index:7;background:rgba(0,0,0,.45);color:#fff;font-size:11px;line-height:1.45;padding:4px 6px;pointer-events:none;white-space:pre-wrap}
#errbox{display:none;position:fixed;left:4px;bottom:4px;z-index:20;background:rgba(120,0,0,.8);color:#ffd7d7;font-size:11px;padding:4px 8px;max-width:70vw;white-space:pre-wrap}
#loading{position:fixed;inset:0;z-index:10;background:#000 url('../assets/mc/textures/block/dirt.png') repeat;background-size:64px 64px;display:flex;align-items:center;justify-content:center}
#loading::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.55)}
#loadspinner{width:64px;height:64px;margin:0 auto 18px;border-radius:0;background:url('../assets/mc/textures/item/golden_pickaxe.png') center/contain no-repeat, url('../assets/mc/textures/block/grass_block_side.png') center/cover;image-rendering:pixelated;animation:spinicon 2.4s linear infinite;box-shadow:0 0 0 4px #000 inset}
@keyframes spinicon{from{transform:rotate(-14deg) scale(1)}25%{transform:rotate(14deg) scale(1.06)}50%{transform:rotate(-14deg) scale(1)}75%{transform:rotate(14deg) scale(1.06)}to{transform:rotate(-14deg) scale(1)}}
#loadtip{color:#ffd94d;font:8px 'MirkoFont',monospace;text-shadow:1px 1px 0 #2a2a00;margin-top:10px}
#loadinner{position:relative;text-align:center}
image-rendering:pixelated;filter:drop-shadow(3px 3px 0 rgba(0,0,0,.6))}
#loadwrap{width:min(420px,60vw);height:12px;margin:26px auto 8px;border:2px solid #000;box-shadow:0 0 0 2px #6b6b6b;background:#2a2a2a}
#loadbar{height:100%;width:0%;background:#7bd83f;transition:width .5s}
#loadtext{color:#d8d8d8;font-size:12px;text-shadow:1px 1px 0 #3f3f3f}

/* ---- menus ---- */
#menu{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;font-family:'MirkoFont',ui-monospace,Menlo,monospace}
#menu.hidden{display:none}
.pano{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;image-rendering:pixelated;transition:opacity 2.2s ease;animation:panozoom 60s ease-in-out infinite alternate}
@keyframes panozoom{from{transform:scale(1)}to{transform:scale(1.08)}}
.scrim{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.screen{display:none;position:relative;flex-direction:column;align-items:center;width:min(480px,92vw)}
.screen.on{display:flex}
.logowrap{position:relative;margin-bottom:34px;text-align:center}
#melogo{width:min(380px,70vw);image-rendering:pixelated;filter:drop-shadow(4px 4px 0 rgba(0,0,0,.55))}
#splash{display:none;position:absolute;right:-12px;bottom:-14px;color:#ffff55;font-weight:700;font-size:14px;transform:rotate(-18deg);text-shadow:2px 2px 0 #3f3f00;animation:splashpulse .9s ease-in-out infinite alternate}
@keyframes splashpulse{from{transform:rotate(-18deg) scale(1)}to{transform:rotate(-18deg) scale(1.06)}}
h2{color:#fff;text-shadow:2px 2px 0 #3f3f3f;font-size:20px;margin:6px 0 18px;font-weight:600}
.btncol{display:flex;flex-direction:column;gap:8px;width:100%}
.mcbtn{appearance:none;font:inherit;font-size:15px;color:#e8e8e8;text-shadow:2px 2px 0 rgba(0,0,0,.65);padding:10px 14px;cursor:pointer;
  border:4px solid transparent;border-image-source:url(../assets/mc/textures/gui/sprites/widget/button.png);border-image-slice:3;border-image-repeat:stretch;
  background:#4f4f4f66 linear-gradient(rgba(255,255,255,.06),rgba(0,0,0,.18));image-rendering:pixelated}
.mcbtn:hover{border-image-source:url(../assets/mc/textures/gui/sprites/widget/button_highlighted.png);background-color:#6b7fbf88;color:#fff}
.mcbtn:active{filter:brightness(.8)}
.optrow{display:grid;grid-template-columns:1fr 1.4fr auto;align-items:center;gap:10px;color:#dcdcdc;font-size:13px;text-shadow:1px 1px 0 #2a2a2a}
.optrow input[type=range]{width:100%}
.optrow output{min-width:70px;text-align:right;color:#fff}
.footnote{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:#cfcfcf;font-size:11px;text-shadow:1px 1px 0 #000}
body.playing .footnote{display:none}   // keep gameplay pixel-clean like vanilla; the credit lives on the title screen only

.wslots{display:flex;flex-direction:column;gap:4px;width:100%;margin-bottom:10px;max-height:38vh;overflow-y:auto}
.wslot{text-align:left;padding:8px 12px;font-size:13px;color:#dcdcdc;background:rgba(0,0,0,.35);border:2px solid #555a;cursor:pointer;font-family:inherit}
.wslot:hover{background:rgba(90,110,180,.3)}
.wslot.sel{border-color:#a7b9ffcc;background:rgba(90,110,180,.45);color:#fff}
.wslot small{display:block;color:#aaa;font-size:11px}

#inv{position:fixed;inset:0;z-index:24;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.55)}
#inv.on{display:flex}
.invpanel{background:rgba(18,18,24,.92);border:2px solid #555;padding:16px 18px;max-width:min(640px,92vw)}
.invpanel h2{margin-top:0;text-align:center}
.invgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:4px;max-height:52vh;overflow-y:auto}
.invcell{width:40px;height:40px;background-color:rgba(0,0,0,.35);border:2px solid #4a4a55;cursor:pointer;image-rendering:pixelated}
.invcell:hover{border-color:#fff;background-color:rgba(120,140,220,.35)}
.invhint{color:#aaa;font-size:12px;text-align:center;margin-top:10px}

#redflash{position:fixed;inset:0;z-index:22;background:#c22;opacity:0;pointer-events:none;transition:opacity .35s ease-out}
#death{position:fixed;inset:0;z-index:28;display:none;align-items:center;justify-content:center;background:radial-gradient(ellipse at center, rgba(96,8,8,.35) 0%, rgba(72,0,0,.78) 100%)}
#death .dinner{text-align:center;font-family:'MirkoFont',ui-monospace,Menlo,monospace}
#death h1{color:#e8e8e8;text-shadow:3px 3px #3f3f3f,0 0 18px rgba(0,0,0,.6);font-size:44px;margin:0 0 6px;letter-spacing:2px}
#death .cause{color:#cfcfcf;text-shadow:2px 2px #2a2a2a;font-size:16px;margin:0 0 4px}
#death .dscore{color:#ffd94d;text-shadow:2px 2px #3a3a00;font-size:13px;margin:0 0 26px}
#death .mcbtn{display:block;width:320px;margin:6px auto;padding:10px;font-size:16px}
#death.on{display:flex}
.dinner{text-align:center;color:#fff;text-shadow:2px 2px 0 #300}
.dinner h1{font-size:44px;margin-bottom:6px}
.dinner button{margin-top:18px}

.dinner button{font:inherit;color:#e8e8e8;background:#737373;border:none;border-top:3px solid #aaa;border-left:3px solid #aaa;border-bottom:3px solid #2b2b2b;border-right:3px solid #2b2b2b;padding:8px 30px;cursor:pointer;text-shadow:1px 1px 0 #300}
.dinner button:hover{background:#8a8aff}

#adv{position:fixed;top:12px;right:12px;z-index:26;transform:translateX(120%);transition:transform .45s cubic-bezier(.2,.9,.3,1.2);background:#3f3f46;border:2px solid #8f8f97;padding:8px 14px;box-shadow:3px 3px 0 rgba(0,0,0,.5);max-width:300px}
#adv.on{transform:translateX(0)}
#adv .p{color:#ff8;font-size:12px;margin-bottom:2px}
#adv .t{color:#fff;font-size:15px}
#adv .s{color:#aaa;font-size:11px;margin-top:4px}
#adv .abody{display:flex;gap:8px;align-items:center}
#adv .ic{font-size:22px}

.createform{margin-top:4px;display:flex;flex-direction:column;gap:8px;max-width:460px;margin-left:auto;margin-right:auto}
.createform label{color:#e8e8e8;font-size:13px;text-shadow:1px 1px #3f3f3f;display:flex;justify-content:space-between;align-items:center;gap:10px}
.createform input{background:#000;border:2px solid #a8a8a8;color:#fff;font:13px 'MirkoFont',monospace;padding:4px 6px;width:220px}
.cfrow{display:flex;justify-content:space-between;align-items:center;gap:10px;color:#e8e8e8;font-size:13px;text-shadow:1px 1px #3f3f3f}
.cfopts{display:flex;gap:4px}
.cfopts .mcbtn{padding:5px 9px;font-size:11px;width:auto;background:#4a4a4a}
.cfopts .mcbtn.on{outline:2px solid #ffffff;background:#6b7fbf88}
#createform .mcbtn{padding:7px;font-size:13px}

#coords{position:fixed;left:6px;top:6px;z-index:6;color:#fff;font:11px 'MirkoFont',monospace;text-shadow:1px 1px 0 #000,0 0 3px #000;pointer-events:none;opacity:.92}

#logo{width:min(420px,60vw);image-rendering:pixelated;filter:drop-shadow(3px 3px 0 rgba(0,0,0,.6));margin-bottom:6px}

#bossbar{position:fixed;top:8px;left:50%;transform:translateX(-50%);z-index:6;color:#fff;font-family:MirkoFont,monospace;font-size:10px;text-align:center;pointer-events:none;text-shadow:1px 1px 0 #000}
#bossbarbg{width:300px;height:6px;background:#3a3a3a;border:1px solid #000;margin-top:2px}
#bossfill{height:100%;background:#c23bce;width:100%}

/* ---- vanilla-style inventory (E): real gui atlas ---- */
#inv{background:rgba(0,0,0,.42)}
.vpanel{position:relative;width:352px;height:332px;background:url(../assets/mc/textures/gui/inv_panel.png) no-repeat left top/352px 332px;image-rendering:pixelated;filter:drop-shadow(4px 6px 0 rgba(0,0,0,.35))}
.vslot{position:absolute;width:36px;height:36px;box-sizing:border-box;background-size:32px 32px;background-position:center;background-repeat:no-repeat;cursor:pointer;z-index:2;image-rendering:pixelated}
.vslot:hover{box-shadow:inset 0 0 0 2px #ffffff;z-index:3}
.vslot b{position:absolute;right:1px;bottom:0;color:#fff;text-shadow:1px 1px 0 #3f3f3f;font:9px/1 MirkoFont;font-weight:normal;pointer-events:none}
.vcraftbtn{position:absolute;left:180px;top:44px;width:116px;height:36px;cursor:pointer;z-index:2}
.vrecipebtn{position:absolute;left:304px;top:4px;width:40px;height:36px;cursor:pointer;z-index:2}
#vpreview{position:absolute;left:56px;top:32px;width:104px;height:136px;z-index:1;background:transparent}
#vcursor{position:fixed;width:32px;height:32px;z-index:60;pointer-events:none;background-size:85% 85%;background-position:center;background-repeat:no-repeat;filter:drop-shadow(2px 3px 2px rgba(0,0,0,.5))}
#vcursor b{position:absolute;right:0;bottom:0;color:#fff;text-shadow:1px 1px 0 #3f3f3f;font:10px MirkoFont;font-weight:normal}
/* ===== block GUIs (furnace / crafting table / enchanting / anvil) ===== */
#bguimodal{position:fixed;inset:0;z-index:26;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.5)}
#bguimodal.on{display:flex}
.bpanel{background:#c6c6c6;border:3px solid #000;box-shadow:inset 3px 3px 0 #fff,inset -3px -3px 0 #555;padding:14px 18px;font-family:MirkoFont,monospace;color:#404040;min-width:420px;image-rendering:pixelated}
.bpanel h3{margin:0 0 10px;font-size:14px;font-weight:normal;color:#3f3f3f;text-shadow:1px 1px 0 #fff}
.brow{display:flex;align-items:center;gap:14px;justify-content:center;margin:8px 0}
.bcol{display:flex;flex-direction:column;align-items:center;gap:4px}
.bslot{width:36px;height:36px;background:#8d8d8d;box-shadow:inset 2px 2px 0 #373737,inset -2px -2px 0 #fff;position:relative;background-size:80%;background-position:center;background-repeat:no-repeat;cursor:pointer}
.bslot b{position:absolute;right:2px;bottom:1px;color:#fff;text-shadow:1px 1px 0 #3f3f3f;font:10px/1 MirkoFont;font-weight:normal}
.bslot:hover{outline:2px solid #fff}
.bgrid3{display:grid;grid-template-columns:repeat(3,36px);gap:2px}
.barr3{font-size:20px;color:#5a5a5a}
.bflame{width:14px;height:14px;background:linear-gradient(to top,#ff9d00 var(--burn,0),#5a3b1a var(--burn,0));border:1px solid #373737}
.bprogress{width:24px;height:16px;background:#8d8d8d;border:1px solid #373737;position:relative}
.bprogress::after{content:'';position:absolute;inset:1px;width:calc(var(--cook,0)*100%);max-width:calc(100% - 2px);background:#fff}
.bhint{font-size:10px;margin-top:8px;text-align:center;line-height:1.5}
.bpack{display:grid;grid-template-columns:repeat(9,36px);gap:2px;margin-top:10px;justify-content:center}
.bpslot{width:36px;height:36px;background:#a0a0a0;box-shadow:inset 2px 2px 0 #555,inset -2px -2px 0 #ddd;position:relative;background-size:80%;background-position:center;background-repeat:no-repeat;cursor:pointer}
.bpslot.hb{background:#b8c8e0}
.bpslot b{position:absolute;right:2px;bottom:1px;color:#fff;text-shadow:1px 1px 0 #3f3f3f;font:10px/1 MirkoFont;font-weight:normal}
.benchbtn{display:block;width:100%;margin:6px 0;font-family:MirkoFont,monospace;font-size:11px;padding:6px;background:#6b6b6b;color:#e8e8e8;border:2px solid #000;box-shadow:inset 2px 2px 0 #9a9a9a,inset -2px -2px 0 #3c3c3c;cursor:pointer}
.benchbtn:hover{background:#7d8aa8;color:#fff}