:root{--mc-font: "Press Start 2P", "Courier New", monospace;--dirt: #5a3a1a;--dirt2: #3e2810;--stone: #6b6b6b;--btn: #7a7a7a;--btn-border-light: #ffffff55;--btn-border-dark: #00000088;--green-sel: #7cfc00;--slot: #8b8b8b;--inv-bg: #c6c6c6}*{box-sizing:border-box;margin:0;padding:0}html,body,#app{width:100%;height:100%;overflow:hidden;background:#000}#game{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}.hidden{display:none!important}#crosshair{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;font-size:22px;font-weight:700;pointer-events:none;text-shadow:1px 1px 0 #000;z-index:5;font-family:var(--mc-font);opacity:0;mix-blend-mode:difference}#crosshair.visible{opacity:.9}.panel-screen{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(#00000073,#0000008c),repeating-linear-gradient(0deg,#5a3a1a 0,#5a3a1a 8px,#4a2e12 8px,#4a2e12 16px),repeating-linear-gradient(90deg,#5a3a1a 0,#5a3a1a 8px,#4a2e12 8px,#4a2e12 16px);background-size:auto,64px 64px,64px 64px;font-family:var(--mc-font);color:#fff;image-rendering:pixelated}.mc-title{font-size:clamp(18px,4vw,36px);color:#fff;text-shadow:3px 3px 0 #3f3f3f,0 0 12px #000;margin-bottom:8px;letter-spacing:2px}.mc-subtitle{font-size:10px;color:#ff5;margin-bottom:28px;text-shadow:2px 2px 0 #000}.mc-panel{background:linear-gradient(180deg,#c6c6c6,#8b8b8b);border:3px solid #000;box-shadow:inset 2px 2px #fff8,inset -2px -2px #0006,4px 4px #0005;padding:16px;width:min(480px,92vw)}.mc-label{font-size:10px;color:#3f3f3f;margin:8px 0 4px;text-shadow:1px 1px 0 #fff}.mc-input{width:100%;padding:10px;font-family:var(--mc-font);font-size:10px;background:#000;color:#fff;border:2px solid #a0a0a0;outline:none}.mc-input:focus{border-color:#fff}.mc-btn{font-family:var(--mc-font);font-size:10px;color:#fff;background:linear-gradient(180deg,#8b8b8b,#5a5a5a);border:2px solid #000;box-shadow:inset 2px 2px #fff5,inset -2px -2px #0008;padding:12px 16px;cursor:pointer;margin-top:10px;width:100%;text-shadow:2px 2px 0 #000}.mc-btn:hover{background:linear-gradient(180deg,#9b9b9b,#6a6a6a)}.mc-btn:active{box-shadow:inset -2px -2px #fff3,inset 2px 2px #0008}.mc-btn.primary{background:linear-gradient(180deg,#5a8a3a,#3d6b28)}.mc-btn.primary:hover{background:linear-gradient(180deg,#6a9a4a,#4d7b38)}.mc-btn.danger{background:linear-gradient(180deg,#8a3a3a,#5a2828)}.room-list{max-height:180px;overflow-y:auto;margin-top:10px;background:#0008;border:2px solid #000;padding:4px}.room-row{display:flex;justify-content:space-between;align-items:center;padding:8px;font-size:8px;color:#fff;cursor:pointer;border:1px solid transparent}.room-row:hover{background:#fff2;border-color:#ff5}.room-row .meta{color:#aaa}.row{display:flex;gap:8px}.row>*{flex:1}#hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:10;font-family:var(--mc-font)}.hotbar{position:absolute;bottom:18px;left:50%;transform:translate(-50%);display:flex;gap:0;background:#0008;border:4px solid #000;box-shadow:inset 2px 2px #fff3,0 4px 12px #0008;image-rendering:pixelated}.slot{width:60px;height:60px;border:3px solid #373737;background:#8b8b8b55;position:relative;image-rendering:pixelated}.slot.selected{border:3px solid var(--green-sel);box-shadow:0 0 0 1px #000,inset 0 0 6px #7cfc0044;z-index:1}.slot-count{position:absolute;right:4px;bottom:3px;font-size:12px;color:#fff;text-shadow:2px 2px 0 #000}.slot-icon{width:40px;height:40px;margin:8px auto;display:block;image-rendering:pixelated}.bars{position:absolute;bottom:92px;left:50%;transform:translate(-50%);display:flex;gap:48px;align-items:flex-end;width:min(560px,92vw);justify-content:space-between}.hearts,.hunger{display:flex;gap:2px}.pip{width:22px;height:22px;image-rendering:pixelated;font-size:18px;line-height:22px;text-shadow:2px 2px 0 #000}.heart{color:#e03030}.hunger-pip{color:#c07030}.debug{position:absolute;top:10px;left:10px;font-size:10px;color:#fff;text-shadow:2px 2px 0 #000;opacity:.85}#inventory{position:absolute;top:0;right:0;bottom:0;left:0;z-index:30;display:flex;align-items:center;justify-content:center;background:#0008;font-family:var(--mc-font)}.inv-panel{background:#c6c6c6;border:4px solid #000;box-shadow:inset 3px 3px #fff,inset -3px -3px #555;padding:16px 20px;min-width:360px}.inv-title{font-size:10px;color:#3f3f3f;margin-bottom:10px;text-shadow:1px 1px 0 #fff}.inv-grid{display:grid;gap:2px;margin-bottom:12px}.inv-grid.g9{grid-template-columns:repeat(9,40px)}.inv-grid.g3{grid-template-columns:repeat(3,40px)}.inv-grid.g2{grid-template-columns:repeat(2,40px)}.inv-slot{width:40px;height:40px;background:#8b8b8b;border:2px solid;border-color:#373737 #fff #fff #373737;position:relative;cursor:pointer}.inv-slot:hover{outline:1px solid #ffff55}.craft-row{display:flex;align-items:center;gap:12px;margin-bottom:16px}.craft-arrow{font-size:16px;color:#3f3f3f}.result-slot{width:48px;height:48px;background:#8b8b8b;border:2px solid;border-color:#373737 #fff #fff #373737;position:relative;cursor:pointer}#pause{position:absolute;top:0;right:0;bottom:0;left:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000a;font-family:var(--mc-font);gap:8px}#pause h2{color:#fff;font-size:16px;margin-bottom:16px;text-shadow:2px 2px 0 #000}#pause .mc-btn{width:280px}#chat{position:absolute;bottom:140px;left:12px;width:min(420px,70vw);font-family:var(--mc-font);font-size:10px;color:#fff;text-shadow:1px 1px 0 #000;pointer-events:none;z-index:12}#chat div{background:#0006;padding:2px 4px;margin-top:2px}.toast{position:absolute;top:20%;left:50%;transform:translate(-50%);font-family:var(--mc-font);font-size:10px;color:#ff5;text-shadow:2px 2px 0 #000;z-index:50;pointer-events:none}