:root {
  --ink: #14110d;
  --ink-2: #221d17;
  --panel: rgba(22, 19, 15, .9);
  --paper: #f1e9d8;
  --muted: #b5aa96;
  --gold: #f2c14e;
  --gold-deep: #a8791d;
  --stone: #8b8680;
  --danger: #d6523c;
  --slot: #2b251e;
  --slot-hi: #4a4036;
  --display: "Pixelify Sans", "Courier New", monospace;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --s: 44px;
  color-scheme: dark;
}
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: #0b1022; color: var(--paper); font-family: var(--mono); overflow: hidden; user-select: none; -webkit-user-select: none; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
kbd { font: 600 11px/1 var(--mono); padding: 4px 7px 3px; background: #2b251e; color: var(--paper); border: 2px solid #5a4e40; border-bottom-width: 4px; min-width: 1.2em; text-align: center; display: inline-block; }

/* ---------- Buttons & panels ---------- */
.btn {
  font: 700 18px/1 var(--display); padding: 12px 22px 14px; min-width: 140px;
  border: 3px solid var(--ink); background: var(--stone); color: var(--ink); cursor: pointer;
  box-shadow: inset 3px 3px 0 #b6b1aa, inset -3px -4px 0 #5d5954;
}
.btn.primary { background: var(--gold); box-shadow: inset 3px 3px 0 #ffe3a0, inset -3px -4px 0 var(--gold-deep); }
.btn.subtle { background: #5a544d; color: var(--paper); box-shadow: inset 3px 3px 0 #77716a, inset -3px -4px 0 #3b3632; }
.btn.danger { background: var(--danger); color: var(--ink); box-shadow: inset 3px 3px 0 #f08d7a, inset -3px -4px 0 #8e2f20; }
.btn:hover:not(:disabled) { filter: brightness(1.08); }
.btn:active:not(:disabled) { box-shadow: inset -3px -3px 0 #b6b1aa, inset 3px 4px 0 #5d5954; padding: 13px 22px; }
.btn.primary:active:not(:disabled) { box-shadow: inset -3px -3px 0 #ffe3a0, inset 3px 4px 0 var(--gold-deep); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:focus-visible, input:focus-visible, .world:focus-visible, .seg input:focus-visible + label { outline: 3px dashed var(--paper); outline-offset: 3px; }
.btn.wide { width: 100%; }
.panel { background: var(--panel); border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px #463b30; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.stack { display: grid; gap: 10px; }
.eyebrow { font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 0 0 16px; text-shadow: 1px 1px 0 var(--ink); }
.meta { margin: 14px 0 0; font: 12px/1.5 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- Menus ---------- */
.menu { position: fixed; inset: 0; overflow: auto; display: flex; flex-direction: column; padding-inline: clamp(16px, 5vw, 72px); padding-block: clamp(24px, 5vh, 56px); z-index: 20; }
#title { background: linear-gradient(180deg, rgba(12,10,8,0) 0%, rgba(12,10,8,.3) 40%, rgba(12,10,8,.88) 100%); }
.menu.center { align-items: center; justify-content: center; }
.menu.dim { background: rgba(10, 8, 6, .55); }
.menu-grid { margin-top: auto; width: 100%; max-width: 1180px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 72px); align-items: end; }
.wordmark { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(60px, 11vw, 136px); line-height: .84; letter-spacing: -.01em; display: flex; flex-direction: column; }
.wordmark span { color: var(--paper); text-shadow: 0 .06em 0 #4a3a28, 0 .12em 0 rgba(0,0,0,.35); }
.wordmark .step { color: var(--gold); text-shadow: 0 .06em 0 var(--gold-deep), 0 .12em 0 rgba(0,0,0,.35); padding-left: .5em; }
.tagline { max-width: 46ch; font: 400 15px/1.6 var(--mono); margin: 26px 0 20px; text-wrap: pretty; text-shadow: 1px 1px 0 rgba(0,0,0,.6); }
.world-list { display: grid; gap: 6px; margin-bottom: 16px; max-height: 220px; overflow: auto; max-width: 560px; }
.world { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 14px; background: rgba(20,17,13,.78); border: 2px solid #3a3128; cursor: pointer; text-align: left; color: var(--paper); font: inherit; }
.world:hover { border-color: #6a5b4a; }
.world[aria-selected="true"] { border-color: var(--gold); background: rgba(40, 32, 20, .92); }
.world b { font: 700 17px/1.2 var(--display); }
.world small { color: var(--muted); font-size: 12px; grid-column: 1 / -1; }
.world .mode { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--gold); align-self: center; }
.world-empty { color: var(--muted); font-size: 13px; padding: 10px 0; }
.controls { padding: 20px 22px; }
.controls h2 { font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.keys { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; align-items: center; }
.keys dt { display: flex; flex-wrap: wrap; gap: 4px; }
.keys dd { margin: 0; font-size: 13px; line-height: 1.4; }
@media (max-width: 880px) { .menu-grid { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .keys { grid-template-columns: 1fr; gap: 4px; } .keys dd { margin-bottom: 6px; } }

.dialog { width: min(460px, 100%); padding: 24px 26px; display: grid; gap: 14px; }
.dialog.bare { background: none; border: 0; box-shadow: none; text-align: center; }
.dialog-title { font: 700 26px/1 var(--display); margin: 0 0 4px; }
.field { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; font-size: 13px; }
.field > span, .field legend { color: var(--muted); padding: 0; }
.field em { font-style: normal; opacity: .7; }
.field input:not([type=range]):not([type=checkbox]):not([type=radio]) { font: 15px var(--mono); padding: 10px 12px; background: var(--ink); color: var(--paper); border: 2px solid #4a4036; }
.field.range span { display: flex; justify-content: space-between; }
.field.range output { color: var(--paper); font-variant-numeric: tabular-nums; }
.field input[type=range] { accent-color: var(--gold); width: 100%; }
.field.check { grid-template-columns: auto 1fr; align-items: center; }
.field.check input { accent-color: var(--gold); width: 18px; height: 18px; }
.seg { display: flex; flex-wrap: wrap; gap: 4px; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { padding: 8px 12px; background: var(--ink); border: 2px solid #4a4036; cursor: pointer; font-size: 13px; }
.seg input:checked + label { border-color: var(--gold); color: var(--gold); background: #2a2215; }
.loading-box { width: min(420px, 100%); text-align: center; }
.progress { height: 14px; border: 3px solid var(--ink); background: #2b251e; box-shadow: inset 0 0 0 2px #463b30; }
#loading-bar { height: 100%; width: 0; background: var(--gold); transition: width .15s; }
#loading { background: #0e0c0a; }
.death { background: rgba(120, 10, 10, .45); }
.death-title { font: 700 clamp(48px, 9vw, 84px)/1 var(--display); margin: 0; color: var(--paper); text-shadow: 0 5px 0 #4a1010; }
.death-msg { margin: 8px 0 24px; font-size: 15px; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.overlay { position: absolute; inset: 0; }
#overlay-water { background: rgba(20, 50, 140, .35); }
#overlay-fire { background: radial-gradient(ellipse at 50% 120%, rgba(255,120,20,.55), rgba(255,60,0,.1) 60%, transparent 80%); }
#overlay-hurt { background: radial-gradient(ellipse at center, transparent 45%, rgba(200, 0, 0, .55) 100%); opacity: 0; }
#overlay-sleep { background: #05070f; opacity: 0; }
.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: 8px; top: 0; width: 2px; height: 18px; }
.crosshair::after { top: 8px; left: 0; width: 18px; height: 2px; }
#debug { position: absolute; top: 12px; left: 12px; font: 12px/1.55 var(--mono); font-variant-numeric: tabular-nums; white-space: pre; }
#debug span { background: rgba(20,17,13,.6); padding: 1px 5px; }
#chatlog { position: absolute; left: 12px; bottom: 150px; width: min(520px, calc(100vw - 24px)); display: flex; flex-direction: column; gap: 2px; font: 13px/1.45 var(--mono); }
#chatlog div { background: rgba(10, 8, 6, .55); padding: 2px 8px; transition: opacity .6s; text-shadow: 1px 1px 0 #000; }
#chatlog div.fade { opacity: 0; }
#chatlog.open div { opacity: 1 !important; }
.hud-bottom { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding-inline: 16px; }
#hint { max-width: 60ch; background: var(--panel); padding: 8px 12px; font: 12px/1.5 var(--mono); text-align: center; margin-bottom: 6px; }
#heldname { font: 700 18px/1 var(--display); text-shadow: 2px 2px 0 #000; opacity: 0; transition: opacity .6s; min-height: 18px; margin-bottom: 4px; }
#heldname.show { opacity: 1; transition: none; }
.bars { width: calc(var(--s) * 9 + 8px * 2); max-width: 100%; display: flex; justify-content: space-between; align-items: flex-end; }
.bar-col { display: flex; flex-direction: column; gap: 1px; }
.icons { display: flex; gap: 0; height: 18px; }
.icons.rtl { flex-direction: row-reverse; }
.icons img { width: 18px; height: 18px; image-rendering: pixelated; }
.icons.shake img:nth-child(odd) { transform: translateY(-2px); }
#hotbar { display: flex; gap: 0; padding: 3px; background: rgba(20,17,13,.7); box-shadow: inset 0 0 0 2px #2a231b; pointer-events: auto; }
@media (max-width: 460px) { :root { --s: calc((100vw - 48px) / 9); } .icons img { width: 12px; height: 12px; } .icons { height: 12px; } }

/* ---------- Slots ---------- */
.slot {
  width: var(--s); height: var(--s); position: relative; display: grid; place-items: center;
  background: var(--slot); box-shadow: inset 2px 2px 0 rgba(0,0,0,.45), inset -2px -2px 0 rgba(255,255,255,.07);
}
.slot img { width: 74%; height: 74%; image-rendering: pixelated; pointer-events: none; }
.slot .count { position: absolute; right: 3px; bottom: 1px; font: 700 14px/1 var(--display); color: #fff; text-shadow: 2px 2px 0 #1b1712; pointer-events: none; }
.slot .dur { position: absolute; left: 5px; right: 5px; bottom: 4px; height: 3px; background: #000; pointer-events: none; }
.slot .dur i { display: block; height: 100%; }
.slot.sel { outline: 3px solid var(--paper); outline-offset: -1px; z-index: 1; }
#hotbar .slot { background: rgba(43,37,30,.55); }
.slot .ghost { position: absolute; inset: 20%; opacity: .18; image-rendering: pixelated; pointer-events: none; width: 60%; height: 60%; }

/* ---------- Inventory screens ---------- */
.screen { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(10, 8, 6, .5); z-index: 10; padding: 16px; overflow: auto; }
.inv-panel { padding: 14px 16px 16px; display: grid; gap: 10px; max-width: 100%; }
.inv-panel .slot { cursor: pointer; }
.inv-panel .slot:hover { box-shadow: inset 2px 2px 0 rgba(0,0,0,.45), inset -2px -2px 0 rgba(255,255,255,.07), inset 0 0 0 99px rgba(255,255,255,.12); }
.inv-title { font: 700 18px/1 var(--display); margin: 0; color: var(--paper); }
.inv-label { font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 4px 0 -4px; }
.grid { display: grid; gap: 2px; grid-template-columns: repeat(var(--cols), var(--s)); }
.row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.arrow { width: 40px; height: 22px; position: relative; background: #3a3128; clip-path: polygon(0 30%, 60% 30%, 60% 0, 100% 50%, 60% 100%, 60% 70%, 0 70%); }
.arrow i { position: absolute; inset: 0 auto 0 0; background: var(--paper); width: 0; }
.flame { width: 18px; height: 18px; position: relative; background: #3a3128; clip-path: polygon(50% 0, 80% 35%, 100% 70%, 80% 100%, 20% 100%, 0 70%, 20% 35%); }
.flame i { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(0deg, #ff6a00, #ffd15a); height: 0; }
.furnace-col { display: grid; gap: 6px; justify-items: center; }
.armor-col { display: grid; gap: 2px; }
.stats { font: 12px/1.6 var(--mono); color: var(--muted); }
.stats b { color: var(--paper); font-weight: 600; }
.creative-top { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.creative-top input { font: 13px var(--mono); padding: 7px 10px; background: var(--ink); color: var(--paper); border: 2px solid #4a4036; width: 200px; max-width: 50vw; }
.palette { max-height: calc(var(--s) * 6 + 12px); overflow-y: auto; overflow-x: hidden; padding-right: 4px; }
.trash { background: #3a1d18 !important; }
/* Recipe book */
.inv-panel.with-book { display: flex; gap: 16px; align-items: stretch; flex-wrap: wrap; max-height: calc(100vh - 32px); }
.inv-main { display: grid; gap: 10px; align-content: start; }
.recipe-book { display: flex; flex-direction: column; gap: 8px; width: 330px; max-width: 100%; min-height: 0; border-left: 2px solid #3a3128; padding-left: 16px; }
.book-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.book-filters { display: flex; gap: 4px; }
.book-filter { font: 600 11px/1 var(--mono); padding: 6px 8px; background: #2b251e; color: var(--muted); border: 2px solid #4a4036; cursor: pointer; }
.book-filter.on { background: var(--gold); color: var(--ink); border-color: var(--ink); }
.book-search { font: 13px var(--mono); padding: 7px 10px; background: var(--ink); color: var(--paper); border: 2px solid #4a4036; }
.book-note { font: 11px/1.4 var(--mono); color: var(--muted); margin: 0; }
.book-list { display: grid; gap: 4px; align-content: start; overflow-y: auto; max-height: min(430px, calc(100vh - 220px)); padding-right: 4px; }
.book-row { display: flex; gap: 10px; align-items: center; text-align: left; width: 100%; padding: 6px 8px; background: rgba(0,0,0,.25); border: 2px solid #3a3128; color: var(--paper); cursor: pointer; font: inherit; }
.book-row:hover { border-color: #6a5c4c; background: rgba(255,255,255,.06); }
.book-row.ready { border-color: #4f7a34; background: rgba(79,122,52,.18); }
.book-row.ready:hover { border-color: #7fbf52; }
.book-row.locked { opacity: .7; }
.book-out { position: relative; width: 36px; height: 36px; flex: none; display: grid; place-items: center; background: #1b1712; }
.book-out img { width: 30px; height: 30px; image-rendering: pixelated; }
.book-out .count { position: absolute; right: 1px; bottom: 0; font: 700 12px/1 var(--display); color: #fff; text-shadow: 1px 1px 0 #1b1712; }
.book-body { display: grid; gap: 3px; min-width: 0; }
.book-name { font: 600 13px/1.2 var(--mono); }
.book-ings { display: flex; flex-wrap: wrap; gap: 4px; }
.book-ing { display: inline-flex; align-items: center; gap: 3px; font: 600 11px/1 var(--mono); padding: 2px 5px 2px 2px; background: #1b1712; font-variant-numeric: tabular-nums; }
.book-ing img { width: 16px; height: 16px; image-rendering: pixelated; }
.book-ing.ok { color: #9fdc74; }
.book-ing.short { color: #f08d7a; }
.book-status { font: 11px/1.3 var(--mono); color: var(--muted); }
.book-row.ready .book-status { color: #9fdc74; }
.book-empty { font: 12px/1.5 var(--mono); color: var(--muted); margin: 8px 0; }
@media (max-width: 900px) { .recipe-book { border-left: 0; padding-left: 0; width: 100%; } .book-list { max-height: 260px; } }
.trades { display: grid; gap: 4px; max-height: calc(var(--s) * 4.6); overflow-y: auto; padding-right: 4px; }
.trade { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 3px 6px; background: rgba(0,0,0,.18); }
.trade-in { display: flex; gap: 2px; min-width: calc(var(--s) * 2 + 2px); }
.trade-slot { cursor: default !important; }
.trade .arrow { width: 28px; height: 16px; }
.trade-btn { padding: 6px 14px; font-size: 13px; margin-left: auto; }
.trade-btn:active:not(:disabled) { padding: 6px 14px; }
.trade-hint { font: 11px/1.4 var(--mono); color: var(--muted); margin: 0; }
.trash::after { content: "✕"; color: #b86a5c; font: 700 18px var(--display); }
#cursor-item { position: fixed; z-index: 30; pointer-events: none; width: var(--s); height: var(--s); display: grid; place-items: center; transform: translate(-50%, -50%); }
#cursor-item img { width: 74%; height: 74%; image-rendering: pixelated; }
#cursor-item span { position: absolute; right: 3px; bottom: 1px; font: 700 14px/1 var(--display); color: #fff; text-shadow: 2px 2px 0 #1b1712; }
#tooltip { position: fixed; z-index: 31; pointer-events: none; background: #1a0f24; border: 2px solid #3b1f5c; padding: 5px 9px; font: 13px/1.4 var(--mono); color: #fff; white-space: nowrap; }
#tooltip small { display: block; color: var(--muted); font-size: 11px; }
#chatform { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 12; }
#chatform input { width: 100%; box-sizing: border-box; font: 14px var(--mono); padding: 8px 10px; background: rgba(10,8,6,.8); color: #fff; border: 2px solid #4a4036; }
/* ---------- Multiplayer ---------- */
.btn.small { font-size: 14px; padding: 6px 12px 8px; min-width: 0; }
.btn.small:active:not(:disabled) { padding: 7px 12px 7px; }
.mp-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.mp-copy { display: flex; gap: 8px; }
.mp-copy input { flex: 1; min-width: 0; font: 13px var(--mono); padding: 10px 12px; background: var(--ink); color: var(--paper); border: 2px solid #4a4036; user-select: all; }
.mp-copy .btn { min-width: 0; }
.mp-h { margin: 4px 0 0; font: 700 16px/1 var(--display); color: var(--gold); }
.mp-list { display: grid; gap: 4px; }
.mp-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: rgba(0, 0, 0, .25); border: 2px solid #3a3128; }
.mp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.mp-status { margin: 0; min-height: 1.5em; color: var(--paper); }
#fr-code { color: var(--paper); letter-spacing: .08em; }
#jn-code { text-transform: uppercase; letter-spacing: .08em; }

@media (prefers-reduced-motion: reduce) { #heldname, #chatlog div, #loading-bar { transition: none; } }