* { box-sizing: border-box; user-select: none; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; font-family: "Courier New", monospace; font-weight: bold; color: #fff; }
canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; }
[hidden] { display: none !important; }
#menu { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; }
#menu.dim { background: rgba(0, 0, 0, 0.55); }
#menu h1 { font-size: 64px; margin: 0 0 20px; letter-spacing: 4px; color: #ddd; text-shadow: 4px 4px 0 #333, 0 0 0 #000; }
.btn { width: 320px; padding: 10px; background: #8b8b8b; border: 3px solid; border-color: #d0d0d0 #373737 #373737 #d0d0d0; color: #fff; font: inherit; font-size: 18px; text-shadow: 2px 2px #3f3f3f; cursor: pointer; text-align: center; }
.btn:hover { background: #6f7fb8; }
.btn.small { width: 155px; }
.row { display: flex; gap: 10px; }
.panel { background: rgba(30, 30, 30, 0.88); border: 3px solid #555; padding: 16px; display: flex; flex-direction: column; gap: 8px; min-width: 360px; max-height: 80vh; overflow: auto; }
.panel label { display: flex; justify-content: space-between; gap: 12px; align-items: center; font-size: 15px; }
.panel input[type=text], .panel select { background: #000; color: #fff; border: 2px solid #aaa; padding: 6px; font: inherit; width: 190px; user-select: text; }
.world { background: #222; border: 2px solid #555; padding: 8px 12px; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; }
.world:hover, .world.sel { border-color: #fff; }
.world small { color: #aaa; display: block; }
#cross { position: fixed; left: 50%; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); mix-blend-mode: difference; }
#cross::before, #cross::after { content: ""; position: absolute; background: #fff; }
#cross::before { left: 9px; top: 0; width: 2px; height: 20px; } #cross::after { top: 9px; left: 0; height: 2px; width: 20px; }
#hotbar { position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; background: rgba(0, 0, 0, 0.5); border: 3px solid #333; }
.slot { width: 52px; height: 52px; border: 3px solid #666; display: flex; align-items: center; justify-content: center; position: relative; }
.slot.sel { border-color: #fff; background: rgba(255, 255, 255, 0.2); }
.slot canvas { width: 36px; height: 36px; image-rendering: pixelated; }
.slot span { position: absolute; right: 2px; bottom: 0; font-size: 13px; text-shadow: 1px 1px #000; }
#debug { position: fixed; top: 6px; left: 8px; font-size: 14px; background: rgba(0,0,0,.4); padding: 4px 6px; white-space: pre; line-height: 1.3; }
#chat { position: fixed; bottom: 80px; left: 10px; width: 60%; } #chat input { width: 100%; background: rgba(0,0,0,.6); color: #fff; border: 0; padding: 6px; font: inherit; outline: 0; user-select: text; }
#msg { position: fixed; bottom: 120px; left: 10px; font-size: 16px; text-shadow: 2px 2px #000; }
.grid { display: grid; grid-template-columns: repeat(5, 56px); gap: 6px; }
.grid .slot { background: #444; cursor: pointer; }
.hint { font-size: 12px; color: #bbb; }