@font-face{font-family:'MC';src:local('Courier New');font-weight:bold}
*{margin:0;padding:0;box-sizing:border-box}
body{overflow:hidden;background:#000;font-family:'MC',monospace;color:#fff;user-select:none}
#game-canvas{position:fixed;top:0;left:0;width:100%;height:100%}

/* Menu */
#menu-screen{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(0,0,0,.85);z-index:100}
#menu-screen h1{font-size:64px;text-shadow:4px 4px 0 #333,0 0 20px rgba(100,200,100,.5);margin-bottom:8px;letter-spacing:4px;color:#6d6}
#menu-screen p{font-size:16px;color:#888;margin-bottom:20px}
.menu-seed{margin-bottom:16px}
.menu-seed label{color:#aaa;font-size:14px}
.menu-seed input{background:#333;border:2px solid #555;color:#fff;padding:4px 10px;font-size:14px;width:120px;text-align:center;font-family:'MC',monospace}
#play-btn,#respawn-btn{padding:12px 50px;font-size:20px;background:#4a4;color:#fff;border:3px solid #6c6;cursor:pointer;font-weight:bold;letter-spacing:2px;transition:all .15s;image-rendering:pixelated}
#play-btn:hover,#respawn-btn:hover{background:#5b5;transform:scale(1.03)}
.controls-info{margin-top:24px;background:rgba(255,255,255,.04);padding:16px 30px;border:1px solid rgba(255,255,255,.08);max-width:500px}
.controls-info h3{margin-bottom:8px;color:#6d6;font-size:13px}
.controls-info ul{list-style:none}
.controls-info li{margin:3px 0;color:#aaa;font-size:12px}

/* HUD */
#hud{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}
#crosshair{position:absolute;top:50%;left:50%;width:24px;height:24px;transform:translate(-50%,-50%)}
#crosshair::before,#crosshair::after{content:'';position:absolute;background:rgba(255,255,255,.8)}
#crosshair::before{width:2px;height:24px;left:11px;top:0}
#crosshair::after{width:24px;height:2px;top:11px;left:0}
#hotbar{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);display:flex;gap:0;background:#000;padding:2px;border:2px solid #444}
.hotbar-slot{width:44px;height:44px;border:1px solid #222;background:#555;display:flex;align-items:center;justify-content:center;position:relative;border-top:2px solid #8b8b8b;border-left:2px solid #8b8b8b;border-right:2px solid #373737;border-bottom:2px solid #373737}
.hotbar-slot.selected{border:2px solid #fff;outline:1px solid #aaa}
.hotbar-slot canvas{width:30px;height:30px;image-rendering:pixelated}
.hotbar-slot .slot-number{position:absolute;top:0;left:2px;font-size:8px;color:rgba(255,255,255,.4)}
.hotbar-slot .slot-count{position:absolute;bottom:0;right:1px;font-size:10px;color:#fff;text-shadow:1px 1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000;font-weight:bold}
#debug-info{position:absolute;top:4px;left:4px;font-size:11px;color:#fff;text-shadow:1px 1px 0 #000;line-height:1.4;font-family:'MC',monospace}

/* Bars */
#health-bar{position:absolute;bottom:56px;left:50%;transform:translateX(-50%);display:flex;gap:0;margin-left:-92px}
#hunger-bar{position:absolute;bottom:56px;left:50%;transform:translateX(-50%);display:flex;gap:0;margin-left:92px;flex-direction:row-reverse}
.heart,.hunger{width:9px;height:9px;image-rendering:pixelated;margin:0}
#xp-bar{position:absolute;bottom:48px;left:50%;transform:translateX(-50%);width:364px;height:5px;background:#111;border:1px solid #222}
#xp-fill{height:100%;background:#6eb349;width:0%;transition:width .2s}
#xp-level{position:absolute;top:-14px;left:50%;transform:translateX(-50%);font-size:10px;color:#6eb349;text-shadow:1px 1px 0 #000}
#break-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) translateY(20px);width:50px;height:4px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.2);display:none}
#break-progress{height:100%;background:#ddd;width:0%}
#damage-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(255,0,0,0);pointer-events:none;transition:background .2s}
#item-tooltip{position:absolute;bottom:60px;left:50%;transform:translateX(-50%);font-size:13px;color:#fff;text-shadow:1px 1px 0 #000;background:rgba(0,0,0,.6);padding:3px 12px;border-radius:2px;opacity:0;transition:opacity .3s;white-space:nowrap}
#item-tooltip.show{opacity:1}

/* First person hand */
#hand-canvas{position:fixed;bottom:0;right:0;width:200px;height:200px;pointer-events:none;z-index:9;image-rendering:pixelated}

/* Inventory */
#inventory-screen,#furnace-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.65);z-index:50;display:flex;align-items:center;justify-content:center}
#inventory-panel,#furnace-panel{background:#c6c6c6;border:4px solid #555;padding:10px;box-shadow:inset 2px 2px 0 #fff,inset -2px -2px 0 #888,0 0 40px rgba(0,0,0,.5)}
#inventory-panel h3,#furnace-panel h3{margin:8px 0 4px;color:#404040;font-size:11px}
#inv-top-area{display:flex;gap:16px;margin-bottom:6px}
#armor-section{display:flex;flex-direction:column;gap:2px}
#armor-slots{display:flex;flex-direction:column;gap:2px}
#craft-section{display:flex;flex-direction:column;align-items:center}
#craft-title{color:#404040;font-size:11px;margin-bottom:4px}
#craft-area{display:flex;align-items:center;gap:8px}
#craft-grid{display:grid;gap:1px}
#craft-grid.grid-2x2{grid-template-columns:repeat(2,40px)}
#craft-grid.grid-3x3{grid-template-columns:repeat(3,40px)}
#craft-arrow,#furnace-arrow{font-size:24px;color:#404040}
.inv-grid{display:grid;grid-template-columns:repeat(9,40px);gap:1px;justify-content:center}
.inv-slot{width:40px;height:40px;background:#8b8b8b;border:2px solid;border-color:#373737 #fff #fff #373737;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative}
.inv-slot:hover{background:#a0a0cc}
.inv-slot canvas{width:28px;height:28px;image-rendering:pixelated;pointer-events:none}
.inv-slot .inv-count{position:absolute;bottom:-1px;right:1px;font-size:10px;color:#fff;text-shadow:1px 1px 0 #000;font-weight:bold;pointer-events:none}
#craft-result-slot{border-color:#aa8800 #665500 #665500 #aa8800}
#craft-result-slot.has-result{background:#aa9}

/* Furnace */
#furnace-area{display:flex;align-items:center;gap:8px;justify-content:center;margin:8px 0}
#furnace-fire{font-size:18px;opacity:.3}
#furnace-fire.burning{opacity:1;animation:flicker .5s infinite alternate}
@keyframes flicker{from{opacity:.8}to{opacity:1}}
#furnace-progress-bar{width:180px;height:4px;background:#555;margin:4px auto;border:1px solid #666}
#furnace-progress-fill{height:100%;background:#6a6;width:0%}

/* Cursor */
#cursor-item{position:fixed;pointer-events:none;z-index:200;display:none;transform:translate(-50%,-50%)}
#cursor-item canvas{width:32px;height:32px;image-rendering:pixelated}
#cursor-item .cursor-count{position:absolute;bottom:-2px;right:-2px;font-size:10px;color:#fff;text-shadow:1px 1px 0 #000;font-weight:bold}

/* Death */
#death-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(200,0,0,.6);z-index:150;display:flex;flex-direction:column;align-items:center;justify-content:center}
#death-screen h1{font-size:42px;margin-bottom:10px;text-shadow:2px 2px 0 #400}
#death-screen p{font-size:16px;margin-bottom:24px;color:#faa}

/* Armor slot backgrounds */
.armor-bg{background-image:none;background-size:24px;background-position:center;background-repeat:no-repeat;opacity:.5}