:root { color-scheme: dark; font-family: "Trebuchet MS", "Segoe UI", sans-serif; --gold: #f0d38a; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #132014; color: #f6f0dc; }
#game { display: block; width: 100vw; height: 100vh; }
#hurtVignette { box-shadow: inset 0 0 120px 40px rgba(140, 12, 8, 0.72); inset: 0; opacity: 0; pointer-events: none; position: fixed; z-index: 3; }
#waterOverlay { box-shadow: inset 0 0 160px 60px rgba(8, 64, 140, 0.78); inset: 0; opacity: 0; pointer-events: none; position: fixed; z-index: 3; transition: opacity 0.15s linear; }
#hud { inset: 0; opacity: 0; pointer-events: none; position: fixed; z-index: 2; }
#hud.playing { opacity: 1; }
#topHud, #bottomHud { display: flex; gap: 16px; left: 50%; position: absolute; transform: translateX(-50%); }
#topHud { align-items: stretch; top: 18px; width: min(720px, calc(100vw - 24px)); }
#questBox, #statusBox, #compass { background: linear-gradient(180deg, rgba(28, 18, 10, 0.78), rgba(16, 10, 6, 0.72)); border: 3px solid #2a1b10; }
#questBox { flex: 1; padding: 10px 14px; }
#questBox span, .inventorySection span { color: var(--gold); display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
#questBox strong { display: block; font-size: 16px; margin-top: 4px; }
#statusBox { min-width: 128px; padding: 10px 12px; text-align: right; }
#timeLabel { color: var(--gold); font-weight: 800; }
#coords { color: #d9c7a2; font-size: 13px; margin-top: 4px; }
#fpsHud {
  background: linear-gradient(180deg, rgba(28, 18, 10, 0.78), rgba(16, 10, 6, 0.72));
  border: 3px solid #2a1b10;
  color: #f0d38a;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  padding: 6px 10px;
  pointer-events: none;
  position: fixed;
  right: 12px;
  top: 12px;
  z-index: 6;
}
#compass { height: 72px; position: relative; width: 72px; }
#compass b { color: #ffd978; font-size: 12px; left: 50%; position: absolute; top: 6px; transform: translateX(-50%); }
#compassNeedle { background: linear-gradient(180deg, #e23b2e, #f2d27a 52%, #d9d9d9); clip-path: polygon(50% 8%, 62% 55%, 50% 92%, 38% 55%); height: 44px; left: 50%; position: absolute; top: 18px; transform: translateX(-50%); transform-origin: 50% 50%; width: 16px; }
#crosshair { height: 18px; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 18px; }
#crosshair::before, #crosshair::after { background: #f7f1de; box-shadow: 0 0 0 1px #111; content: ""; position: absolute; }
#crosshair::before { height: 2px; left: 0; top: 8px; width: 18px; }
#crosshair::after { height: 18px; left: 8px; top: 0; width: 2px; }
#blockLabel { color: #f4ead2; font-size: 14px; font-weight: 800; left: 50%; position: absolute; text-shadow: 0 2px 0 #111; top: calc(50% + 28px); transform: translateX(-50%); }
#toast { background: rgba(20, 12, 6, 0.82); border: 2px solid #d6b06c; left: 50%; opacity: 0; padding: 8px 14px; position: absolute; top: 110px; transform: translateX(-50%); }
#toast.show { opacity: 1; }
#hint { bottom: 102px; color: #efe3c4; font-size: 13px; font-weight: 700; left: 50%; position: absolute; text-align: center; text-shadow: 0 2px 8px #000; transform: translateX(-50%); width: min(760px, calc(100vw - 24px)); }
#bottomHud { align-items: center; bottom: 18px; flex-direction: column; }
#armorHud { color: #d8dde6; font-size: 13px; font-weight: 800; margin-bottom: 4px; text-shadow: 0 2px 0 #111; }
#hearts { display: flex; gap: 4px; margin-bottom: 8px; }
.heart { background: #3a2424; clip-path: polygon(50% 92%, 6% 48%, 6% 28%, 24% 12%, 40% 18%, 50% 32%, 60% 18%, 76% 12%, 94% 28%, 94% 48%); height: 18px; width: 20px; }
.heart.full { background: #e23b2e; }
#hotbarWrap { align-items: center; display: flex; gap: 10px; pointer-events: auto; }
#hotbar { display: flex; gap: 4px; }
.offhandHud { box-shadow: inset 3px 3px 0 #120a06, inset -2px -2px 0 #8a6a3a, 0 0 0 2px #6a4a22; }
.slot {
  background-color: #2a1a10;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 44px 44px;
  border: 2px solid #120a06;
  box-shadow: inset 3px 3px 0 #120a06, inset -2px -2px 0 #6e4a30;
  height: 58px;
  image-rendering: pixelated;
  padding: 0;
  position: relative;
  width: 58px;
}
.slot span { bottom: 2px; color: #fff; font-size: 12px; font-weight: 800; pointer-events: none; position: absolute; right: 4px; text-shadow: 0 1px 0 #000; }
.slot.selected { box-shadow: inset 3px 3px 0 #120a06, inset -2px -2px 0 #f3e7c2, 0 0 0 2px #f3e7c2; transform: translateY(-2px); }
.slot.empty { background-image: none; }
.slot:hover, .slot.hot, .craftBtn:hover, .craftBtn.hot {
  background-color: #6e4828;
  box-shadow: inset 2px 2px 0 #ffe7a8, inset -2px -2px 0 #fffdf2, 0 0 0 3px #ffe27a;
  filter: none;
  outline: 2px solid #24150c;
  z-index: 2;
}
#inventoryPanel { align-items: center; background: rgba(8, 10, 6, 0.62); display: flex; inset: 0; justify-content: center; position: fixed; z-index: 5; }
#inventoryPanel[hidden] { display: none; }
.inventoryCard {
  background-color: #8a562c;
  background-image: var(--inv-wood);
  background-size: 96px 96px;
  border: 6px solid #24150c;
  box-shadow: inset 0 0 0 4px #e0b87a, 0 18px 0 #1a1008;
  image-rendering: pixelated;
  max-height: min(90vh, 860px);
  max-width: min(620px, calc(100vw - 28px));
  overflow: auto;
  padding: 22px;
  pointer-events: auto;
  width: 100%;
}
.inventoryCard.station { max-width: min(760px, calc(100vw - 20px)); }
.craftBench { align-items: center; display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin: 10px 0 14px; }
.craftGrid3 { display: grid; gap: 8px; grid-template-columns: repeat(3, 72px); justify-content: center; }
.craftGrid3 .slot, .craftResult, .furnaceBench .slot { background-size: 58px 58px; height: 72px; width: 72px; }
.craftResult { height: 84px; width: 84px; }
#craftArrow, #smeltArrow { background: #24150c; border: 3px solid #d6b06c; height: 16px; overflow: hidden; position: relative; width: 84px; }
#craftArrow::after { background: #f0d38a; clip-path: polygon(0 20%, 55% 20%, 55% 0, 100% 50%, 55% 100%, 55% 80%, 0 80%); content: ""; display: block; height: 100%; width: 100%; }
.tableRecipes { display: grid; gap: 6px; grid-template-columns: 1fr 1fr; isolation: isolate; max-height: 220px; overflow: auto; }
.furnaceBench { align-items: center; display: flex; flex-direction: column; gap: 10px; margin: 8px 0; }
#invTip {
  background: #100010;
  border: 2px solid #2a0a6a;
  box-shadow: 2px 2px 0 #000;
  color: #fff8e6;
  font-size: 13px;
  font-weight: 800;
  left: 0;
  padding: 4px 8px;
  pointer-events: none;
  position: fixed;
  top: 0;
  z-index: 12;
}
#invTip[hidden] { display: none; }
#airHud { color: #9ad7ff; font-size: 14px; font-weight: 800; margin-bottom: 6px; text-shadow: 0 2px 0 #111; }
#craftHint { color: #efe3c4; font-size: 13px; font-weight: 600; margin: 6px 0 8px; }
#craftList { display: grid; gap: 6px; grid-template-columns: 1fr; max-height: 160px; overflow: auto; }
.equipRow { align-items: flex-end; display: flex; gap: 12px; justify-content: center; margin-top: 8px; }
.armorGrid { display: grid; gap: 4px; grid-template-columns: repeat(4, 58px); justify-content: center; margin-top: 0; }
#offhandSlot { height: 58px; width: 58px; }
.furnaceRow { align-items: center; display: flex; gap: 12px; margin: 8px 0; }
#furnaceHint, #tableHint, #armorHint { color: #efe3c4; font-size: 13px; font-weight: 600; margin: 6px 0 8px; }
.armorGrid button { height: 58px; padding: 0; width: 58px; }
#smeltFill { background: linear-gradient(90deg, #e08a28, #f0d38a); display: block; height: 100%; width: 0; }
.craftBtn {
  align-items: flex-start;
  background-color: #2a1a10;
  background-position: 8px 8px;
  background-repeat: no-repeat;
  background-size: 32px 32px;
  border: 2px solid #120a06;
  box-shadow: inset 2px 2px 0 #120a06, inset -2px -2px 0 #6e4a30;
  color: #fff8e6;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  font-weight: 800;
  gap: 4px;
  image-rendering: pixelated;
  padding: 8px 8px 8px 48px;
  text-align: left;
  text-shadow: 0 1px 0 #120a06;
  width: 100%;
}
.craftBtn.locked { opacity: 0.72; }
.craftNeed { display: flex; flex-wrap: wrap; gap: 4px; }
.craftNeed b {
  background-color: #1a1008;
  background-position: 3px center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
  color: #efe3c4;
  font-size: 11px;
  font-weight: 800;
  image-rendering: pixelated;
  padding: 2px 6px 2px 20px;
}
.craftNeed b.ok { color: #b6e07a; }
.craftNeed b.miss { color: #ffb4a0; }
.inventoryCard header h2 { font-size: 34px; margin: 0 0 6px; text-shadow: 0 2px 0 #24150c; }
.inventoryCard header p { color: #fff4d8; margin: 0 0 16px; text-shadow: 0 2px 0 #24150c; }
#questBox span, .inventorySection span { text-shadow: 0 1px 0 #24150c; }
.inventoryCard kbd { background: #24150c; border: 2px solid #d6b06c; color: #fff8e6; padding: 0 6px; }
.inventorySection { margin-top: 12px; }
.inventorySection[hidden] { display: none; }
.slotGrid.bag, .slotGrid.hotbarGrid { display: grid; gap: 4px; grid-template-columns: repeat(9, 58px); justify-content: center; margin-top: 8px; }
#heldCursor { background-position: center; background-repeat: no-repeat; background-size: 40px 40px; height: 48px; image-rendering: pixelated; pointer-events: none; position: fixed; width: 48px; z-index: 8; }
#heldCursor span { bottom: 0; color: #fff; font-size: 13px; font-weight: 800; position: absolute; right: 2px; text-shadow: 0 1px 0 #000; }
#startPanel, #pausePanel, #endPanel { align-items: center; display: flex; inset: 0; justify-content: center; position: fixed; z-index: 4; }
#startPanel[hidden], #pausePanel[hidden], #endPanel[hidden] { display: none; }
#startPanel { background: radial-gradient(circle at 50% 18%, rgba(255, 220, 140, 0.18), transparent 28%), linear-gradient(180deg, #6fb7ea 0%, #8ec5ff 28%, #7bb24a 52%, #3d6a28 100%); }
#pausePanel, #endPanel { background: rgba(8, 10, 6, 0.55); }
.menuCard { background: linear-gradient(180deg, #5a3a22, #3a2416); border: 6px solid #24150c; box-shadow: 0 18px 0 #1a1008; max-width: min(560px, calc(100vw - 28px)); padding: 28px 28px 22px; }
.kicker { color: var(--gold); font-size: 13px; font-weight: 800; letter-spacing: 0.14em; margin: 0 0 8px; text-transform: uppercase; }
.menuCard h1, .menuCard h2 { font-size: clamp(34px, 6vw, 54px); line-height: 0.95; margin: 0 0 12px; }
.menuCard p { color: #f0e2c4; line-height: 1.45; margin: 0 0 16px; }
.seedRow { color: #f0d38a; display: grid; font-size: 13px; font-weight: 800; gap: 6px; margin-bottom: 14px; }
#seedInput { background: #24150c; border: 3px solid #d6b06c; color: #fff8e6; font: inherit; padding: 8px 10px; }
button { cursor: pointer; font: inherit; }
.menuCard button {
  background: linear-gradient(180deg, #7dbf46, #3f8a28);
  border: 4px solid #1f3d12;
  color: #f7ffe8;
  font-size: 20px;
  font-weight: 800;
  padding: 10px 18px;
  text-shadow: 0 2px 0 #255016;
  width: 100%;
}
.menuCard button:hover { filter: brightness(1.08); }
.slotGrid button, #hotbar button { width: 58px; }
.menuCard dl { display: grid; gap: 6px 14px; grid-template-columns: 1fr 1fr; margin: 18px 0 0; }
.menuCard dl div { display: grid; gap: 8px; grid-template-columns: 92px 1fr; }
.menuCard dt { color: var(--gold); font-weight: 800; }
.menuCard dd { color: #efe3c4; margin: 0; }
@media (max-width: 700px) {
  .menuCard dl, .slotGrid.bag, .slotGrid.hotbarGrid, .armorGrid { grid-template-columns: repeat(auto-fit, 48px); }
  .slot, .slotGrid button, #hotbar button { height: 48px; width: 48px; }
  #topHud { flex-wrap: wrap; }
}