:root {
  --mc-font: "Minecraft", "Lucida Console", "Courier New", monospace;
  --shadow: 2px 2px 0 #3f3f3f;
  /* Pixel-art pointer so the game never shows the desktop arrow. Drawn on a
     16-unit grid at 2x with crisp edges; the hotspot is the tip at 2,2. */
  --cursor-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M1 1 L1 12 L4 9 L6 13 L8 12 L6 8 L10 8 Z' fill='%23ffffff' stroke='%23000000' stroke-width='1' stroke-linejoin='miter'/%3E%3C/svg%3E") 2 2, default;
}
html, body { cursor: var(--cursor-arrow); }
/* The UA stylesheet overrides the inherited cursor on form controls and links,
   so they are named explicitly: one pointer everywhere, like the real game. */
button, .btn, input, select, textarea, a, .slot, .wslot, .item, canvas, .list, .list .item, label, summary { cursor: var(--cursor-arrow); }
/* Catch-all for the overlay layers. Naming tags one by one missed the
   inventory's own containers, which fell back to the desktop arrow. */
#ui, #ui *, #hud, #hud *, #tooltip, #tooltip *, #cursor-item, #cursor-item * { cursor: var(--cursor-arrow); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; font-family: var(--mc-font); color: #fff; user-select: none; -webkit-user-select: none; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
.pixel { image-rendering: pixelated; image-rendering: crisp-edges; }

/* ---------- loading ---------- */
#loading { position: fixed; inset: 0; background: #1a1a1a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect width='16' height='16' fill='%23342816'/%3E%3Crect x='2' y='3' width='3' height='2' fill='%23413320'/%3E%3Crect x='9' y='8' width='4' height='3' fill='%232b2012'/%3E%3Crect x='5' y='11' width='2' height='2' fill='%23443622'/%3E%3C/svg%3E"); background-size: 64px; display: flex; align-items: center; justify-content: center; z-index: 50; }
.loading-box { text-align: center; }
.loading-title { font-size: 48px; font-weight: bold; letter-spacing: 4px; color: #fff; text-shadow: 4px 4px 0 #3f3f3f; margin-bottom: 20px; }
#loading-text { font-size: 16px; text-shadow: var(--shadow); margin-bottom: 10px; }
.loading-bar { width: 320px; height: 10px; border: 2px solid #fff; margin: 0 auto; background: #000; }
#loading-fill { height: 100%; width: 0; background: #7cd; transition: width .2s; }

/* ---------- menus ---------- */
#ui { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; pointer-events: none; }
#ui > .screen { pointer-events: auto; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 40px; overflow: auto; }
.screen.dirt { background: #3a2c1a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect width='16' height='16' fill='%23332618'/%3E%3Crect x='1' y='2' width='3' height='2' fill='%233f2f1e'/%3E%3Crect x='8' y='7' width='4' height='3' fill='%23291e10'/%3E%3Crect x='4' y='11' width='2' height='2' fill='%23443421'/%3E%3Crect x='12' y='1' width='2' height='2' fill='%2323190d'/%3E%3C/svg%3E"); background-size: 48px; image-rendering: pixelated; }
.screen.overlay { background: rgba(0,0,0,.6); }
.screen.title { justify-content: center; padding-top: 0; }
.logo { font-size: clamp(40px, 9vw, 96px); font-weight: bold; letter-spacing: .08em; color: #f2f2f2; text-shadow: 6px 6px 0 #3f3f3f; line-height: 1; margin-bottom: 8px; transform: perspective(600px) rotateX(8deg); }
.logo-sub { color: #ffff55; font-size: 20px; text-shadow: var(--shadow); transform: rotate(-12deg); position: relative; left: 210px; top: -18px; animation: splash 1s ease-in-out infinite alternate; }
@keyframes splash { from { transform: rotate(-12deg) scale(1); } to { transform: rotate(-12deg) scale(1.08); } }
.menu { display: flex; flex-direction: column; gap: 8px; align-items: center; width: 400px; max-width: 92vw; }
.row { display: flex; gap: 8px; width: 100%; }
.row > * { flex: 1; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; width: 100%; font-family: var(--mc-font); font-size: 16px; color: #e0e0e0; text-shadow: var(--shadow); background: linear-gradient(#8b8b8b, #6f6f6f); border: 2px solid #000; box-shadow: inset 2px 2px 0 #aaa, inset -2px -2px 0 #4c4c4c; cursor: pointer; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn:hover:not(:disabled) { background: linear-gradient(#a2a2ff, #7d7dcc); color: #ffffa0; box-shadow: inset 2px 2px 0 #c5c5ff, inset -2px -2px 0 #4c4c99; }
.btn:active:not(:disabled) { box-shadow: inset -2px -2px 0 #aaa, inset 2px 2px 0 #4c4c4c; }
.btn:disabled { color: #a0a0a0; background: #4a4a4a; cursor: default; box-shadow: none; }
.btn.small { height: 32px; font-size: 14px; }
.btn.danger:hover:not(:disabled) { background: linear-gradient(#ff8080, #cc5050); }
.title-h { font-size: 18px; text-shadow: var(--shadow); margin-bottom: 14px; color: #fff; }
.label { font-size: 13px; color: #a0a0a0; text-shadow: var(--shadow); margin: 6px 0 2px; }
input.text, select.text, textarea.text { width: 100%; height: 36px; background: #000; border: 2px solid #a0a0a0; color: #e0e0e0; font-family: var(--mc-font); font-size: 15px; padding: 0 8px; outline: none; }
input.text:focus { border-color: #fff; }
textarea.text { height: auto; padding: 6px 8px; resize: vertical; }
.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 40px; background: linear-gradient(#8b8b8b, #6f6f6f); border: 2px solid #000; box-shadow: inset 2px 2px 0 #aaa, inset -2px -2px 0 #4c4c4c; position: relative; }
.slider-wrap { position: relative; width: 100%; }
.slider-wrap .slider-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; font-size: 15px; text-shadow: var(--shadow); color: #e0e0e0; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 36px; background: linear-gradient(#c6c6c6, #8b8b8b); border: 2px solid #000; box-shadow: inset 1px 1px 0 #fff; cursor: pointer; }
.slider::-moz-range-thumb { width: 12px; height: 32px; background: #c6c6c6; border: 2px solid #000; cursor: pointer; border-radius: 0; }
.panel { background: rgba(0,0,0,.45); border: 2px solid #000; padding: 10px; width: 100%; }
.list { width: 100%; height: 260px; overflow: auto; background: rgba(0,0,0,.5); border: 1px solid #000; padding: 4px; }
.list .item { padding: 6px 8px; border: 1px solid transparent; cursor: pointer; display: flex; gap: 10px; align-items: center; }
.list .item.selected { border-color: #fff; background: rgba(255,255,255,.08); }
.list .item .name { font-size: 15px; text-shadow: var(--shadow); }
.list .item .sub { font-size: 12px; color: #999; text-shadow: var(--shadow); }
.list .item .status { margin-left: auto; font-size: 12px; text-shadow: var(--shadow); }
.list .item .status.online { color: #5f5; }
.list .item .status.offline { color: #f55; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; width: 100%; }
.msg { font-size: 14px; text-shadow: var(--shadow); color: #ff5555; min-height: 18px; text-align: center; }
.info { font-size: 13px; text-shadow: var(--shadow); color: #ccc; text-align: center; }
.footer-note { position: absolute; bottom: 8px; left: 8px; font-size: 12px; color: #ddd; text-shadow: var(--shadow); }
.footer-note.right { left: auto; right: 8px; }
.tabs { display: flex; gap: 4px; width: 100%; }
.tabs .btn { height: 30px; font-size: 13px; }
.tabs .btn.active { background: linear-gradient(#c6c6c6, #8b8b8b); color: #fff; }
.wide { width: 700px; }
.death { background: rgba(160,0,0,.5); }
.death .big { font-size: 40px; text-shadow: 4px 4px 0 #3f3f3f; margin-bottom: 8px; }
.death .score { color: #ffff55; margin-bottom: 30px; text-shadow: var(--shadow); }
.kbd { display: inline-block; padding: 0 6px; border: 1px solid #aaa; background: #333; border-radius: 3px; font-size: 12px; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#crosshair { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%); mix-blend-mode: difference; }
#crosshair::before, #crosshair::after { content: ""; position: absolute; background: #fff; }
#crosshair::before { left: 7px; top: 0; width: 4px; height: 18px; }
#crosshair::after { top: 7px; left: 0; width: 18px; height: 4px; }
#vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.35) 100%); }
#hurt-overlay { position: absolute; inset: 0; background: rgba(255,0,0,.35); opacity: 0; transition: opacity .1s; }
#water-overlay { position: absolute; inset: 0; background: rgba(20,60,190,.45); opacity: 0; }
#portal-overlay { position: absolute; inset: 0; background: rgba(140,40,220,.35); opacity: 0; }
#title-overlay { position: absolute; left: 0; right: 0; top: 30%; text-align: center; opacity: 0; transition: opacity .3s; }
#title-main { font-size: 44px; text-shadow: 4px 4px 0 #3f3f3f; }
#title-sub { font-size: 20px; text-shadow: var(--shadow); margin-top: 10px; }
#debug { position: absolute; left: 4px; top: 4px; font-size: 13px; line-height: 15px; text-shadow: var(--shadow); white-space: pre; background: rgba(0,0,0,.35); padding: 2px 4px; }
#chat { position: absolute; left: 4px; bottom: 62px; width: min(520px, 60vw); pointer-events: none; }
#chat-lines { display: flex; flex-direction: column; justify-content: flex-end; max-height: 200px; overflow: hidden; }
#chat-lines .line { font-size: 14px; line-height: 18px; text-shadow: var(--shadow); background: rgba(0,0,0,.35); padding: 0 4px; white-space: pre-wrap; word-break: break-word; opacity: 1; transition: opacity 1s; }
#chat-lines .line.faded { opacity: 0; }
#chat.open #chat-lines { max-height: 60vh; overflow-y: auto; }
#chat.open #chat-lines .line { opacity: 1; }
#chat-input { pointer-events: auto; width: 100%; height: 26px; margin-top: 4px; background: rgba(0,0,0,.5); border: none; color: #fff; font-family: var(--mc-font); font-size: 14px; padding: 0 4px; outline: none; }
#console { position: absolute; left: 0; right: 0; top: 0; height: 45vh; background: rgba(10,10,10,.92); border-bottom: 2px solid #555; pointer-events: auto; display: flex; flex-direction: column; font-size: 13px; }
#console-lines { flex: 1; overflow-y: auto; padding: 6px 8px; white-space: pre-wrap; color: #ddd; font-family: monospace; }
.console-input-row { display: flex; gap: 6px; padding: 4px 8px; background: #000; align-items: center; }
#console-input { flex: 1; background: transparent; border: none; color: #0f0; font-family: monospace; font-size: 14px; outline: none; }
#playerlist { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.55); padding: 8px 12px; min-width: 300px; text-align: center; }
#playerlist .hdr { font-size: 14px; text-shadow: var(--shadow); margin-bottom: 6px; color: #fff; }
#playerlist .row2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 2px; }
#playerlist .p { font-size: 13px; text-shadow: var(--shadow); background: rgba(255,255,255,.1); padding: 1px 6px; text-align: left; }
#playerlist .p.away { color: #999; }
#playerlist .p.op { color: #ff5; }
#bars { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); width: 364px; }
#status-row, #status-row2 { display: flex; justify-content: space-between; height: 20px; margin-bottom: 1px; }
.bar { display: flex; gap: 0; height: 18px; }
.bar.right { flex-direction: row-reverse; }
#food, #air { flex-direction: row-reverse; }
.icon { width: 18px; height: 18px; background-size: 18px 18px; background-repeat: no-repeat; image-rendering: pixelated; margin-right: -1px; }
.icon.shake { animation: shake .3s; }
@keyframes shake { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-3px); } 60% { transform: translateY(2px); } }
#xpbar { position: relative; height: 10px; background: #2c2c2c; border: 2px solid #000; margin: 2px 0 3px; }
#xpfill { height: 100%; background: #80ff20; width: 0; }
#xplevel { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); color: #80ff20; font-size: 15px; font-weight: bold; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
#hotbar { display: flex; height: 44px; background: rgba(0,0,0,.4); border: 2px solid #000; box-shadow: inset 0 0 0 2px #8b8b8b; }
.slot { position: relative; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.slot canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.slot .count { position: absolute; right: 3px; bottom: 1px; font-size: 14px; font-weight: bold; text-shadow: var(--shadow); }
.slot .dura { position: absolute; left: 5px; bottom: 4px; height: 3px; width: 30px; background: #000; }
.slot .dura i { display: block; height: 100%; background: #0f0; }
#hotbar .slot.selected::after { content: ""; position: absolute; inset: -4px; border: 4px solid #fff; box-shadow: 0 0 0 2px #000, inset 0 0 0 1px #000; pointer-events: none; }
#item-name { text-align: center; font-size: 15px; text-shadow: var(--shadow); height: 20px; margin-top: 2px; opacity: 0; transition: opacity .5s; }
#tooltip { position: fixed; background: rgba(16,0,16,.94); border: 2px solid #26005a; padding: 4px 8px; font-size: 14px; text-shadow: var(--shadow); pointer-events: none; z-index: 40; white-space: pre; }
#tooltip .sub { color: #999; font-size: 12px; }
/* Ingredient breakdown: name on the left, have/need on the right, short ones
   in red so the reason a recipe is greyed out is readable at a glance. */
/* Recipe shape preview. Cells are the resolved ingredients; blanks stay
   empty so the pattern is readable. */
#tooltip .recgrid { display: grid; gap: 2px; margin: 4px 0 6px; width: max-content; }
#tooltip .rc { width: 20px; height: 20px; background: #3b2a50; border: 1px solid #533c6e; }
#tooltip .rc.empty { background: #1e1428; border-color: #2e2038; }
#tooltip .rc img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
#tooltip .req { display: flex; justify-content: space-between; gap: 14px; font-size: 13px; color: #d8d8d8; }
#tooltip .req span { color: #7dd87d; }
#tooltip .req.short, #tooltip .req.short span { color: #ff7b7b; }

/* ---------- inventory windows ---------- */
.window { background: #c6c6c6; border: 3px solid; border-color: #fff #555 #555 #fff; box-shadow: 0 0 0 2px #000; padding: 30px 10px 10px; color: #404040; text-shadow: none; position: relative; }
/* Close control on every container window. Sits in the frame's top-right,
   above the slot grid, and is sized for a click rather than a pixel hunt. */
.wclose { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; line-height: 1; padding: 0;
  font-family: var(--mc-font); font-size: 13px; font-weight: bold; color: #4a4a4a; background: #c6c6c6;
  border: 2px solid; border-color: #fff #555 #555 #fff; cursor: var(--cursor-arrow); z-index: 2; }
.wclose:hover { background: #e0b0b0; color: #7a1010; border-color: #fff #8a5555 #8a5555 #fff; }
.wclose:active { border-color: #555 #fff #fff #555; }
.window .wtitle { font-size: 14px; margin: 0 0 6px 2px; color: #404040; }
.grid { display: grid; gap: 0; }
.wslot { width: 36px; height: 36px; background: #8b8b8b; border: 2px solid; border-color: #373737 #fff #fff #373737; display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; }
.wslot:hover { background: #bcbcbc; }
.wslot canvas { width: 32px; height: 32px; image-rendering: pixelated; pointer-events: none; }
.wslot .count { position: absolute; right: 2px; bottom: 0; font-size: 14px; font-weight: bold; color: #fff; text-shadow: var(--shadow); pointer-events: none; }
.wslot .dura { position: absolute; left: 3px; bottom: 3px; height: 3px; width: 26px; background: #000; }
.wslot .dura i { display: block; height: 100%; background: #0f0; }
.wslot.ghost canvas { opacity: .35; }
.wslot.armor::before { content: ""; position: absolute; inset: 4px; opacity: .3; background-size: contain; background-repeat: no-repeat; image-rendering: pixelated; }
.arrow { width: 44px; height: 30px; display: flex; align-items: center; justify-content: center; color: #8b8b8b; font-size: 24px; }
.arrow.progress { position: relative; }
.arrow.progress i { position: absolute; left: 6px; top: 12px; height: 6px; background: #fff; }
.flame { width: 20px; height: 20px; position: relative; background: #8b8b8b; clip-path: polygon(50% 0, 80% 40%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 20% 40%); }
.flame i { position: absolute; left: 0; right: 0; bottom: 0; background: #f80; }
#cursor-item { position: fixed; pointer-events: none; z-index: 45; width: 32px; height: 32px; transform: translate(-16px, -16px); }
#cursor-item canvas { width: 32px; height: 32px; image-rendering: pixelated; }
#cursor-item .count { position: absolute; right: -2px; bottom: -4px; font-size: 14px; font-weight: bold; color: #fff; text-shadow: var(--shadow); }
.player-preview { width: 100px; height: 140px; background: #000; border: 2px solid #373737; }
.creative-tabs { display: flex; gap: 2px; margin-bottom: 4px; }
.creative-tabs .btn { height: 28px; font-size: 12px; width: auto; padding: 0 8px; }
.creative-scroll { height: 220px; overflow-y: auto; }
.recipe-book { display: grid; grid-template-columns: repeat(6, 36px); gap: 2px; max-height: 260px; overflow-y: auto; margin-left: 8px; align-content: start; }
.recipe-book .wslot { cursor: pointer; }
.recipe-book .wslot.cant { opacity: .35; }

/* ---------- options ---------- */
.options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; width: 100%; }
.skin-preview { width: 128px; height: 128px; image-rendering: pixelated; background: #222; border: 2px solid #000; }

@media (max-width: 600px) {
  .wide { width: 96vw; }
  .logo { font-size: 42px; }
  .logo-sub { left: 90px; }
  #bars { width: 100%; }
}