/* ============================================================
   Bixie pixel-art visual-design rules for this build:

   1. 16x16 ONLY. The constraint forces a unified style; any
      texture that can't read at 16 px is wrong.
   2. RESTRICTED PALETTE per material: start from a midtone,
      add ONE highlight + ONE shadow, then expand. No pure
      black, no full-saturation primaries; use hue-shift
      between ramp steps.
   3. LIGHT FROM TOP-LEFT: brights on top/front, shadows on
      bottom/back. Applies to items, ores, cobbles, end-grain.
   4. AVOID NOISE that "adds no information"; avoid banding,
      pillow-shading, and pancake-shading. Place clusters of
      intentional pixels rather than uniform per-pixel jitter.
   5. HAND-PAINTED character: rougher, crayola-like grain,
      WARM bias on dirt/wood, slight desaturation. The look is
      INTENTIONAL, not a limitation.

   Reference palette (documented for future texture work;
   the painters in blocks.js use these tones directly).
   ============================================================ */
:root {
  --bx-grass:      #5d9a3e;
  --bx-grass-tip:  #84b84c;
  --bx-dirt:       #76553a;
  --bx-dirt-dark:  #56381f;
  --bx-stone:      #828282;
  --bx-stone-dark: #626262;
  --bx-cobble:     #969696;
  --bx-mortar:     #302c2c;
  --bx-sand:       #dad19b;
  --bx-wood:       #b88c52;
  --bx-bark:       #6e4a26;
  --bx-leaves-oak: #4d8a3e;
  --bx-leaves-birch:#a6c870;
  --bx-leaves-spruce:#346646;
  /* HUD chrome */
  --bx-slot-bg:        #8b8b8b;
  --bx-slot-bg-hover:  #b6b6b6;
  --bx-slot-hi:        #ffffff;
  --bx-slot-lo:        #373737;
  --bx-select-outer:   #ffffff;
  --bx-select-inner:   #000000;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  background: #87ceeb;
  font-family: 'Inter', system-ui, sans-serif;
  user-select: none; -webkit-user-select: none;
  overflow: hidden; image-rendering: pixelated;
}
canvas { display: block; }

/* ============================================================
   Title-screen overlay — classic main-menu layout.
   Dirt-block textured background (kept from the previous build),
   centred logo with rotated yellow splash, vertical column of 4
   slab buttons, footer row.
   ============================================================ */
#overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  color: white; transition: opacity 0.3s;
  image-rendering: pixelated;
  background-color: #6a4a2c;
  background-image:
    radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.82) 75%, rgba(0,0,0,0.92) 100%),
    linear-gradient(rgba(0,0,0,0.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.55) 1px, transparent 1px),
    repeating-radial-gradient(circle at 23% 31%, #5a3a1f 0px 2px, transparent 2px 8px),
    repeating-radial-gradient(circle at 71% 67%, #7a5a3a 0px 2px, transparent 2px 9px),
    repeating-radial-gradient(circle at 47% 14%, #4a2f17 0px 1px, transparent 1px 6px),
    repeating-radial-gradient(circle at 89% 23%, #8a6a44 0px 1px, transparent 1px 7px);
  background-size:
    100% 100%,
    64px 64px,
    64px 64px,
    16px 16px,
    18px 18px,
    14px 14px,
    20px 20px;
}
#overlay.hidden { opacity: 0; pointer-events: none; }

#title-card {
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: 24px;
  padding: 32px;
}

/* ---- Logo + splash ---- */
.title-logo {
  position: relative;
  display: inline-block;
  margin-bottom: 4px;
}
.title-logo h1 {
  font-size: 92px;
  letter-spacing: 0.18em;
  margin: 0;
  font-weight: 900;
  font-family: 'Courier New', 'Press Start 2P', monospace;
  color: #e8e8e8;
  text-shadow:
    4px 4px 0 #2a2a2a,
    6px 6px 0 #1a1a1a;
  -webkit-text-stroke: 1px #1a1a1a;
  transform: rotate(-2deg);
  display: inline-block;
  line-height: 1;
}
/* Rotating yellow splash tag — content set live by menu.js. */
.splash {
  position: absolute;
  right: -32px; top: 30%;
  font-size: 18px;
  color: #ffcf2a;
  font-family: 'Courier New', monospace;
  font-weight: 700;
  letter-spacing: 0.04em;
  transform: rotate(-18deg);
  text-shadow:
    2px 2px 0 #5a3a00,
    0 0 8px rgba(255, 207, 42, 0.4);
  white-space: nowrap;
  pointer-events: none;
  animation: splash-pulse 1.4s ease-in-out infinite;
}
@keyframes splash-pulse {
  0%, 100% { transform: rotate(-18deg) scale(1); }
  50%      { transform: rotate(-18deg) scale(1.08); }
}

/* ---- Vertical column of slab buttons ---- */
.menu-buttons {
  display: flex; flex-direction: column;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

/* The shared blocky slab button. Used on title, pause, and inside
   the panels. Grey gradient body, black outline, white inner-outline,
   black drop-shadow that compresses on :active. */
.bx-btn {
  display: block;
  min-width: 320px;
  padding: 12px 32px;
  background: linear-gradient(180deg,
    #a0a0a0 0%, #a0a0a0 45%,
    #707070 50%, #707070 100%);
  color: #ffffff;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  font-size: 18px;
  letter-spacing: 0.04em;
  border: 3px solid #000000;
  outline: 1px solid #8a8a8a;
  outline-offset: -4px;
  border-radius: 0;
  box-shadow: 0 5px 0 #000000;
  text-shadow: 2px 2px 0 #3a3a3a;
  cursor: pointer;
  image-rendering: pixelated;
  transition: filter 0.08s;
}
.bx-btn:hover:not(.disabled):not(:disabled) {
  background: linear-gradient(180deg,
    #6c98d6 0%, #6c98d6 45%,
    #4a78b8 50%, #4a78b8 100%);
  outline-color: #b6ceea;
}
.bx-btn:active:not(.disabled):not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #000000;
}
.bx-btn.disabled, .bx-btn:disabled {
  cursor: not-allowed;
  filter: grayscale(0.5);
  color: rgba(255,255,255,0.45);
  text-shadow: 2px 2px 0 #2a2a2a;
}
.bx-btn.disabled:hover::after, .bx-btn:disabled:hover::after {
  content: '(coming soon)';
  display: block;
  font-size: 10px;
  margin-top: 4px;
  color: #ffaf3a;
  letter-spacing: 0.08em;
  text-shadow: 1px 1px 0 #000;
}
.bx-btn.narrow { min-width: 152px; padding: 10px 18px; font-size: 14px; }

/* Smaller secondary button (Back, etc.) */
.bx-btn.small {
  min-width: 200px;
  padding: 8px 18px;
  font-size: 14px;
}

/* ---- Footer row ---- */
.title-footer {
  margin-top: 16px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: rgba(232,232,232,0.85);
  letter-spacing: 0.06em;
  text-shadow: 1px 1px 0 #1a1a1a;
}
.title-footer .dot { margin: 0 6px; opacity: 0.5; }

/* ============================================================
   Underwater tint
   ============================================================ */
#underwater-tint {
  position: fixed; inset: 0;
  background: rgba(50, 110, 175, 0.55);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.25s;
}
#underwater-tint.visible { opacity: 1; }

/* ============================================================
   Crosshair — classic sprite. Subtractive blend so it inverts
   against the world.
   ============================================================ */
#crosshair {
  position: fixed; top: 50%; left: 50%; width: 18px; height: 18px;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 10;
  display: none; mix-blend-mode: difference;
  image-rendering: pixelated;
}
#crosshair.visible { display: block; }
#crosshair.bx-crosshair {
  /* Pixel-art "+" crosshair (own work). Wave 1 below paints a richer
     CSS cross with drop-shadow; this SVG is the underlying fallback. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><rect x='7' y='2' width='2' height='5' fill='%23e8e4d0'/><rect x='7' y='9' width='2' height='5' fill='%23e8e4d0'/><rect x='2' y='7' width='5' height='2' fill='%23e8e4d0'/><rect x='9' y='7' width='5' height='2' fill='%23e8e4d0'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* ============================================================
   Hotbar — pixel-perfect.
   Source sprite hud/hotbar.png is 182×22 px; we display it at
   2× = 364×44 px. The 9 slots are 20×20 source = 40×40 display,
   with a 2-px (4-px display) frame around each. Slot stride is
   20 source = 40 display, first slot starts at x=1 source = 2 display.
   The selected-slot highlight uses hud/hotbar_selection.png (24×23
   source → 48×46 display) overlaid centered on the active slot.
   ============================================================ */
#hotbar {
  position: fixed;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 364px;
  height: 44px;
  padding: 0 !important;
  margin: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  /* Background image removed — Wave 1 below paints the hotbar
     chrome via box-shadow bevels in --ui-bg-deep. */
  background-repeat: no-repeat;
  background-size: 364px 44px;
  background-position: 0 0;
  box-shadow: none !important;
  image-rendering: pixelated;
  display: flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0 !important;
  z-index: 20;
  box-sizing: border-box;
}

/* Each slot: 40×40 display, transparent (sprite paints frame),
   stride 40 px → first slot offset 2 px from the left.
   Inline width/height set by inventory.js are overridden with !important. */
#hotbar .slot {
  width: 40px !important;
  height: 40px !important;
  margin: 0 0 0 0;
  position: relative;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  outline-offset: 0 !important;
  image-rendering: pixelated;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 40px;
  transition: none;
  box-sizing: border-box;
}
#hotbar .slot:first-child { margin-left: 2px; }
#hotbar .slot:hover { transform: none; }

/* Selected slot: hide all of inventory.js's inline outline/box-shadow
   (forced via !important) and overlay the classic hotbar_selection sprite. */
#hotbar .slot.selected {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
#hotbar .slot.selected::before {
  content: '';
  position: absolute;
  /* 24×23 source → 48×46 display, centered on the 40×40 slot. */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 46px;
  /* Background image removed — Wave 1 disables this ::before overlay
     entirely (content: none) and paints the selection ring with a
     gold inset bevel directly on the slot. */
  background-size: 100% 100%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
  z-index: 1;
}
#hotbar .slot .icon {
  width: 32px !important;
  height: 32px !important;
  image-rendering: pixelated;
  display: block;
  pointer-events: none;
  position: relative;
  z-index: 2;
}
#hotbar .slot .count {
  position: absolute;
  right: 2px;
  bottom: 0;
  color: #ffffff;
  font-family: 'Press Start 2P', 'Courier New', monospace;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  /* the iconic 1-px right+down drop shadow. */
  text-shadow: 2px 2px 0 #3f3f3f;
  pointer-events: none;
  z-index: 3;
  letter-spacing: 0;
}

/* ============================================================
   Block-name label + break-progress
   ============================================================ */
#block-name {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.55); color: white;
  padding: 6px 16px; border-radius: 4px;
  font-size: 12px; letter-spacing: 0.05em;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
  pointer-events: none; z-index: 15; opacity: 0;
  transition: opacity 0.2s;
}
#block-name.visible { opacity: 1; }

#break-progress {
  position: fixed; left: 50%; bottom: 86px;
  transform: translateX(-50%);
  width: 120px; height: 6px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 2px;
  display: none; z-index: 20;
  overflow: hidden;
}
#break-progress.visible { display: block; }
#break-progress .break-fill {
  height: 100%; width: 0%; background: white;
  transition: width 0.05s linear;
}

/* ============================================================
   Loading screen
   ============================================================ */
#loading {
  position: fixed; inset: 0; z-index: 100; display: flex;
  align-items: center; justify-content: center;
  background: #0a1825; color: white;
  transition: opacity 0.4s;
}
#loading.hidden { opacity: 0; pointer-events: none; }
.loading-inner { text-align: center; }
.loading-inner h2 { font-size: 56px; letter-spacing: 0.2em; margin: 0 0 24px; }
.loading-bar {
  width: 240px; height: 4px;
  background: rgba(255,255,255,0.15); border-radius: 2px;
  overflow: hidden; margin: 0 auto;
}
.loading-fill { height: 100%; width: 0%; background: #4aa44a; transition: width 0.2s; }
.loading-inner p {
  margin-top: 16px; font-size: 12px;
  opacity: 0.6; letter-spacing: 0.1em;
}

/* ============================================================
   Mobile UI — touch overlay (joystick, look-drag, action buttons).
   Layout matches the touch HUD: joystick bottom-left, action
   cluster bottom-right, sprint/sneak toggles top-left, inventory top-
   right. All interactive clusters set pointer-events:auto on a root
   that is otherwise pointer-events:none, so the empty space in between
   passes touches through to the canvas for camera look-drag.
   ============================================================ */
#mobile-ui {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 30;
  /* iOS safe-area insets so the joystick doesn't sit under the home
     indicator and the top buttons don't disappear behind the notch. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  /* Disable text/element selection on touch — long-press shouldn't fire
     the iOS magnifier or context menu. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
#mobile-ui.hidden { display: none; }

/* ---------- Virtual joystick (bottom-left) ---------- */
#joystick-area {
  position: absolute;
  left: max(20px, env(safe-area-inset-left));
  bottom: max(20px, env(safe-area-inset-bottom));
  width: 140px; height: 140px;
  pointer-events: auto;
  touch-action: none;
  /* Slight outer halo so the pad is visible against bright skies. */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
#joystick-base {
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at center,
      rgba(255,255,255,0.10) 0%,
      rgba(255,255,255,0.06) 45%,
      rgba(0,0,0,0.25) 70%,
      rgba(0,0,0,0.40) 100%);
  border: 3px solid rgba(255,255,255,0.35);
  box-sizing: border-box;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
#joystick-knob {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%,
      rgba(255,255,255,0.95) 0%,
      rgba(225,225,230,0.90) 55%,
      rgba(180,180,190,0.85) 100%);
  border: 2px solid rgba(40,40,40,0.55);
  box-shadow:
    inset 0 -2px 4px rgba(0,0,0,0.3),
    0 2px 4px rgba(0,0,0,0.4);
  /* knob.style.transform overrides this — JS appends the offset. */
  pointer-events: none;
}

/* ---------- Action buttons ---------- */
.mobile-btn {
  display: flex;
  align-items: center; justify-content: center;
  background: rgba(255,255,255,0.18);
  color: #fff;
  border: 2px solid rgba(255,255,255,0.55);
  border-radius: 50%;
  font-family: inherit;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.05em;
  cursor: pointer;
  touch-action: none;
  pointer-events: auto;
  /* the touch HUD uses a sunken-tile-style highlight; here we ship a
     simple translucent fill that gets brighter when pressed/toggled. */
  text-shadow: 1px 1px 0 rgba(0,0,0,0.7);
  box-shadow:
    inset 0 -2px 0 rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 2px 5px rgba(0,0,0,0.45);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 80ms ease, border-color 80ms ease, transform 80ms ease;
  padding: 0;
  outline: 0;
}
.mobile-btn:active,
.mobile-btn.pressed {
  background: rgba(255, 230, 110, 0.55);
  border-color: rgba(255, 240, 150, 0.95);
  color: #1a1a1a;
  text-shadow: none;
  transform: scale(0.95);
}
.mobile-btn.toggled {
  background: rgba(80, 200, 120, 0.55);
  border-color: rgba(150, 240, 180, 0.95);
}
.mobile-btn.toggled:active {
  background: rgba(255, 230, 110, 0.65);
}

/* Bottom-right action cluster: JUMP on top, MINE + PLACE below. */
#mobile-actions {
  position: absolute;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center;
  gap: 10px;
  pointer-events: none; /* children turn it back on */
}
.mobile-actions-row {
  display: flex; flex-direction: row;
  gap: 14px;
}
.mobile-btn-jump  { width: 72px; height: 72px; font-size: 13px; }
.mobile-btn-mine  { width: 60px; height: 60px; font-size: 11px; }
.mobile-btn-place { width: 60px; height: 60px; font-size: 11px; }

/* Top-left modifier cluster: SPRINT / SNEAK. */
#mobile-modifiers {
  position: absolute;
  /* Below the title bar / notch on phones. Bump down so the hearts HUD
     never overlaps it. */
  top: max(72px, calc(env(safe-area-inset-top) + 64px));
  left: max(14px, env(safe-area-inset-left));
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
.mobile-btn-mod {
  width: 56px; height: 56px;
  font-size: 10px;
  border-radius: 12px;            /* slightly squarer to read as "toggle" */
}

/* Top-right inventory. */
#mobile-top-right {
  position: absolute;
  top: max(72px, calc(env(safe-area-inset-top) + 64px));
  right: max(14px, env(safe-area-inset-right));
  pointer-events: none;
}
.mobile-btn-inv {
  width: 56px; height: 56px;
  font-size: 11px;
  border-radius: 12px;
}

/* Hide the desktop crosshair-hint and pointer-lock prompt on mobile —
   touch devices can't pointer-lock and the crosshair stays visible via
   the existing #crosshair element regardless. */
html.is-mobile #hint {
  display: none !important;
}

/* On mobile we make hotbar slots a touch easier to tap. The slot click
   handler in inventory.js already fires on tap (synthetic click on
   touchend), so we just enlarge the hitboxes. */
html.is-mobile #hotbar .slot {
  /* nudge hotbar above the home-indicator on iPhones */
}

/* Make sure the crosshair (which uses pointer-events:none anyway) sits
   above the touch overlay so it remains visible when aiming. */
html.is-mobile #crosshair {
  z-index: 31;
}

/* Narrow phones (< 380px) — shave 10% off everything so the joystick
   doesn't crowd the action cluster on tiny screens. */
@media (max-width: 380px) {
  #joystick-area { width: 120px; height: 120px; }
  #joystick-knob { width: 48px; height: 48px; }
  .mobile-btn-jump { width: 64px; height: 64px; }
  .mobile-btn-mine, .mobile-btn-place { width: 54px; height: 54px; }
  .mobile-btn-mod, .mobile-btn-inv { width: 50px; height: 50px; font-size: 9px; }
}

/* Landscape phones — drop the SPRINT/SNEAK column tighter against the
   left edge to leave more visual canvas. */
@media (orientation: landscape) and (max-height: 500px) {
  #mobile-modifiers {
    top: max(14px, calc(env(safe-area-inset-top) + 6px));
  }
  #mobile-top-right {
    top: max(14px, calc(env(safe-area-inset-top) + 6px));
  }
}

/* ============================================================
   Post-FX polish — fallback CSS vignette below the HUD.
   ============================================================ */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(
    ellipse at center,
    rgba(0,0,0,0) 55%,
    rgba(0,0,0,0.18) 82%,
    rgba(0,0,0,0.42) 100%
  );
  mix-blend-mode: multiply;
}

/* ============================================================
   Generic in-game menu overlay (Pause / Settings / Inventory).
   z-index = 60 sits above hotbar (20) and mobile-ui (30) but below
   the title overlay (50) and loading screen (100).
   ============================================================ */
.menu-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.menu-overlay.hidden { display: none; }

/* Most panels share a dark base; the inventory has its own wood look. */
.menu-panel {
  background: rgba(20, 22, 30, 0.92);
  border: 3px solid #5a6478;
  border-radius: 4px;
  padding: 28px 36px;
  color: white;
  font-family: 'Courier New', monospace;
  min-width: 480px; max-width: 90vw; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.menu-panel.small { min-width: 360px; }
.menu-panel h2 {
  margin: 0 0 20px; font-size: 22px; letter-spacing: 0.12em;
  text-align: center; font-weight: 700;
  text-shadow: 2px 2px 0 #000;
  font-family: 'Courier New', monospace;
}

/* ============================================================
   Pause menu — small column of slab buttons.
   ============================================================ */
.pause-panel {
  background: rgba(0,0,0,0.0);
  border: none;
  box-shadow: none;
  padding: 0;
  min-width: 0;
  text-align: center;
}
.pause-panel h2 {
  font-size: 28px;
  margin-bottom: 28px;
  text-shadow: 3px 3px 0 #000;
}
.pause-panel .menu-buttons { gap: 6px; }

/* ============================================================
   Settings menu — scrollable category list.
   ============================================================ */
.settings-panel {
  width: 600px;
  max-width: 90vw;
  max-height: 84vh;
  padding: 20px 28px;
}
.settings-panel .settings-scroll {
  overflow-y: auto;
  padding-right: 6px;
  /* Cap so the panel itself can stay centered; back button stays pinned. */
  max-height: 60vh;
}
.settings-category {
  margin-bottom: 22px;
  padding: 14px 16px 6px;
  background: rgba(0,0,0,0.28);
  border: 2px solid #3a4250;
  border-radius: 3px;
}
.settings-category h3 {
  margin: 0 0 10px;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffcf2a;
  text-shadow: 2px 2px 0 #000;
  font-family: 'Courier New', monospace;
}
.settings-row {
  display: flex; align-items: center; gap: 12px;
  margin: 8px 0;
  font-size: 13px;
  font-family: 'Courier New', monospace;
}
.settings-row .label-text {
  flex: 0 0 160px;
  color: #e8e8e8;
}
.settings-row input[type="range"] {
  flex: 1;
  accent-color: #4aa44a;
}
.settings-row input[type="checkbox"] {
  accent-color: #4aa44a;
  width: 16px; height: 16px;
}
.settings-row .value-readout {
  flex: 0 0 64px;
  text-align: right;
  font-family: monospace;
  color: rgba(255,255,255,0.85);
  font-size: 12px;
}
.settings-back-row {
  display: flex; justify-content: center;
  margin-top: 16px;
}
.settings-kbd-list {
  font-size: 12px;
  line-height: 1.9;
  color: rgba(232,232,232,0.85);
  font-family: 'Courier New', monospace;
  padding: 0 4px;
}
.settings-kbd-list kbd {
  background: linear-gradient(180deg, #555 0%, #555 50%, #333 50%, #333 100%);
  padding: 2px 6px;
  border-radius: 0;
  border: 1px solid #000;
  outline: 1px solid #777;
  outline-offset: -2px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  margin: 0 2px;
  color: #fff;
  box-shadow: 0 2px 0 #000;
}

/* ============================================================
   HUD chrome — FPS / coords / hint / footer.
   ============================================================ */
#fps {
  position: fixed; top: 8px; right: 8px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(0,0,0,0.5); color: #cfc;
  padding: 3px 8px; border-radius: 3px;
  font-size: 11px; z-index: 15;
  pointer-events: none;
  letter-spacing: 0.06em;
}
#fps.hidden { display: none; }

/* Wave 1: season label — small pill below the FPS counter, matches the
   same monospace HUD aesthetic. Pointer-events disabled so it never
   blocks clicks. */
#season-label {
  position: fixed; top: 32px; right: 8px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(0,0,0,0.5); color: #ffe;
  padding: 3px 8px; border-radius: 3px;
  font-size: 11px; z-index: 15;
  pointer-events: none;
  letter-spacing: 0.06em;
}
body.zooming #season-label { display: none !important; }

#coords {
  position: fixed; bottom: 100px; left: 16px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(0,0,0,0.4); color: rgba(255,255,255,0.85);
  padding: 4px 10px; border-radius: 3px;
  font-size: 11px; z-index: 15;
  pointer-events: none;
  letter-spacing: 0.04em;
}

#hint {
  position: fixed; bottom: 90px; left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.55); color: white;
  padding: 6px 18px; border-radius: 4px;
  font-size: 13px; letter-spacing: 0.05em;
  z-index: 15; pointer-events: none;
  opacity: 0; transition: opacity 0.3s;
}
#hint.hidden { opacity: 0; }
#hint.visible { opacity: 1; }
.hint kbd {
  background: rgba(255,255,255,0.15); padding: 1px 6px;
  border-radius: 3px; border: 1px solid rgba(255,255,255,0.3);
  font-family: monospace; font-size: 11px; margin: 0 2px;
}

/* ============================================================
   Mobile-aware HUD
   ============================================================ */
@media (max-width: 720px) {
  #coords, #fps { display: none; }
  /* Hotbar keeps its 364×44 sprite at full size; the sprite already
     scales pixel-perfectly. Slot sizing is forced via !important above. */
  .title-logo h1 { font-size: 56px; letter-spacing: 0.14em; }
  .splash { font-size: 14px; right: -16px; }
  .bx-btn { min-width: 260px; font-size: 16px; padding: 10px 24px; }
}

/* ============================================================
   Inventory ("chest") — wood-coloured panel + recipe-book.
   Layout (desktop):
     [recipe-book 200px][inventory-panel 580px]
   ============================================================ */
.inv-overlay-row {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.recipe-book {
  width: 200px;
  margin-right: -3px;       /* overlap borders for the "attached" look */
  background:
    linear-gradient(180deg,
      #a07748 0%, #a07748 6%,
      #8b6233 6%, #8b6233 12%,
      #a07748 12%, #a07748 18%,
      #8b6233 18%, #8b6233 24%,
      #a07748 24%, #a07748 30%,
      #8b6233 30%, #8b6233 36%,
      #a07748 36%, #a07748 42%,
      #8b6233 42%, #8b6233 48%,
      #a07748 48%, #a07748 54%,
      #8b6233 54%, #8b6233 60%,
      #a07748 60%, #a07748 66%,
      #8b6233 66%, #8b6233 72%,
      #a07748 72%, #a07748 78%,
      #8b6233 78%, #8b6233 84%,
      #a07748 84%, #a07748 90%,
      #8b6233 90%);
  border: 2px solid #1a0e04;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px #d8a76a;
  padding: 10px 8px;
  display: flex; flex-direction: column;
  color: #1a0e04;
  font-family: 'Courier New', monospace;
}
.recipe-book-header {
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f4d8a0;
  text-shadow: 1px 1px 0 #1a0e04;
  margin-bottom: 6px;
}
.recipe-tabs {
  display: flex; gap: 2px;
  margin-bottom: 6px;
}
.recipe-tab {
  flex: 1;
  background: rgba(0,0,0,0.25);
  border: 2px solid #1a0e04;
  color: #f4d8a0;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  padding: 4px 2px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  text-shadow: 1px 1px 0 #1a0e04;
}
.recipe-tab.active {
  background: rgba(255,255,255,0.18);
  border-color: #f4d8a0;
}
.recipe-tab:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.recipe-list {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 36px);
  gap: 3px;
  overflow-y: auto;
  padding: 4px;
  background: rgba(0,0,0,0.18);
  border: 2px solid #1a0e04;
  border-radius: 2px;
  align-content: start;
  justify-content: center;
}
.recipe-entry {
  width: 36px; height: 36px;
  background: #8b8b8b;
  border-top: 2px solid #373737;
  border-left: 2px solid #373737;
  border-right: 2px solid #fefefe;
  border-bottom: 2px solid #fefefe;
  position: relative;
  cursor: pointer;
  image-rendering: pixelated;
  display: flex; align-items: center; justify-content: center;
}
.recipe-entry:hover {
  outline: 2px solid #ffd76a;
}
.recipe-entry.locked {
  filter: grayscale(0.9) brightness(0.45);
  cursor: not-allowed;
}
.recipe-entry img {
  width: 78%; height: 78%;
  image-rendering: pixelated;
  pointer-events: none;
}
.recipe-entry .item-placeholder {
  color: #ffd76a;
  font-size: 8px;
  font-weight: 700;
  text-shadow: 1px 1px 0 #000;
  text-align: center;
  line-height: 1;
}
.recipe-entry .count {
  position: absolute;
  right: 1px; bottom: -2px;
  color: white;
  font-size: 10px;
  font-weight: 700;
  font-family: monospace;
  text-shadow: 1px 1px 0 #000;
  pointer-events: none;
}
.recipe-book .recipe-empty {
  color: #f4d8a0;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 18px 4px;
  text-shadow: 1px 1px 0 #1a0e04;
}

/* ---- Inventory panel proper ---- */
.inv-panel {
  width: 580px;
  min-width: 580px;
  /* Wood plank background: horizontal stripes of alternating brown. */
  background:
    linear-gradient(180deg,
      #c89968 0%,  #c89968 4%,
      #a07748 4%,  #a07748 7%,
      #c89968 7%,  #c89968 11%,
      #a07748 11%, #a07748 14%,
      #c89968 14%, #c89968 18%,
      #a07748 18%, #a07748 21%,
      #c89968 21%, #c89968 25%,
      #a07748 25%, #a07748 28%,
      #c89968 28%, #c89968 32%,
      #a07748 32%, #a07748 35%,
      #c89968 35%, #c89968 39%,
      #a07748 39%, #a07748 42%,
      #c89968 42%, #c89968 46%,
      #a07748 46%, #a07748 49%,
      #c89968 49%, #c89968 53%,
      #a07748 53%, #a07748 56%,
      #c89968 56%, #c89968 60%,
      #a07748 60%, #a07748 63%,
      #c89968 63%, #c89968 67%,
      #a07748 67%, #a07748 70%,
      #c89968 70%, #c89968 74%,
      #a07748 74%, #a07748 77%,
      #c89968 77%, #c89968 81%,
      #a07748 81%, #a07748 84%,
      #c89968 84%, #c89968 88%,
      #a07748 88%, #a07748 91%,
      #c89968 91%, #c89968 95%,
      #a07748 95%);
  border: 2px solid #1a0e04;
  border-radius: 2px;
  box-shadow:
    inset 0 0 0 1px #d8a76a,
    0 20px 60px rgba(0,0,0,0.6);
  padding: 14px 18px 18px;
  color: #1a0e04;
  font-family: 'Courier New', monospace;
}

.inv-titlebar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.inv-titlebar h2 {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f4d8a0;
  text-shadow: 1px 1px 0 #1a0e04;
}

/* View toggle (creative only) — keep but restyle in wood. */
.inv-view-tabs { display: flex; gap: 4px; }
.inv-view-tabs .view-tab {
  display: inline-block; width: auto; margin: 0;
  padding: 4px 12px; font-size: 11px;
  background: rgba(0,0,0,0.25);
  border: 2px solid #1a0e04;
  color: #f4d8a0;
  box-shadow: none; cursor: pointer;
  border-radius: 2px; letter-spacing: 0.08em; text-transform: uppercase;
  font-family: 'Courier New', monospace;
  text-shadow: 1px 1px 0 #1a0e04;
}
.inv-view-tabs .view-tab.active {
  background: rgba(255,255,255,0.18);
  border-color: #f4d8a0;
}

.inv-label {
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f4d8a0;
  text-shadow: 1px 1px 0 #1a0e04;
  margin: 10px 0 4px;
  font-family: 'Courier New', monospace;
}

/* ---- Top row: crafting (left) + armor (right) ---- */
.inv-top-row {
  display: flex; align-items: flex-start;
  gap: 16px;
  margin-bottom: 4px;
}
.craft-region {
  flex: 1;
  padding: 6px 10px 10px;
}
.armor-region {
  padding: 6px 10px 10px;
}
.inv-spacer { flex: 1; }

.craft-row {
  display: flex; align-items: center; gap: 12px;
}
.craft-grid {
  display: grid;
  grid-template-columns: repeat(2, 36px);
  grid-template-rows:    repeat(2, 36px);
  gap: 3px;
}
.craft-arrow {
  font-size: 22px; color: #1a0e04;
  padding: 0 4px;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.25);
}
.craft-output {
  width: 36px !important; height: 36px !important;
}

/* ---- Armor column ---- */
.armor-col {
  display: grid; grid-template-rows: repeat(4, 36px); gap: 3px;
}
.armor-slot::before {
  content: ""; position: absolute; inset: 4px;
  border-radius: 1px;
  pointer-events: none;
  opacity: 0.35;
}
.armor-slot[data-armor-index="0"]::before { background: radial-gradient(circle, #aab 30%, transparent 65%); }
.armor-slot[data-armor-index="1"]::before { background: radial-gradient(circle, #c79 30%, transparent 65%); }
.armor-slot[data-armor-index="2"]::before { background: radial-gradient(circle, #ccb 30%, transparent 65%); }
.armor-slot[data-armor-index="3"]::before { background: radial-gradient(circle, #964 30%, transparent 65%); }

/* ---- Main 3x9 grid + hotbar row ---- */
.main-grid {
  display: grid;
  grid-template-columns: repeat(9, 36px);
  grid-template-rows:    repeat(3, 36px);
  gap: 3px;
}
.menu-panel .hotbar-row {
  display: grid; grid-template-columns: repeat(9, 36px); gap: 3px;
  margin-top: 10px;            /* visible gap between main and hotbar */
}

/* ---- The classic sunken-slot look. ---- */
.inv-slot {
  position: relative;
  width: 36px; height: 36px;
  background: #8b8b8b;
  border-top: 2px solid #373737;
  border-left: 2px solid #373737;
  border-right: 2px solid #fefefe;
  border-bottom: 2px solid #fefefe;
  border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  image-rendering: pixelated;
  box-sizing: border-box;
}
.inv-slot:hover {
  background: #b6b6b6;
}
.inv-slot img {
  width: 80%; height: 80%;
  pointer-events: none;
  image-rendering: pixelated;
}
.inv-slot .count {
  position: absolute; right: 0; bottom: -2px;
  color: white; font-size: 11px; font-weight: 700;
  font-family: monospace; text-shadow: 1px 1px 0 #000;
  pointer-events: none;
}

/* Tool / armor text placeholder if no atlas icon. */
.inv-slot .item-placeholder,
.held-item .item-placeholder {
  color: #ffd76a; font-size: 9px; font-weight: 700;
  text-shadow: 1px 1px 0 #000;
  text-align: center; line-height: 1;
  padding: 2px;
  pointer-events: none;
}
.inv-slot.item-tool  { background: #8a98a8; }
.inv-slot.item-armor { background: #a890b4; }

/* Floating "held item" follows the cursor. */
.held-item {
  position: fixed; pointer-events: none;
  width: 40px; height: 40px;
  z-index: 9999;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
}
.held-item img { width: 100%; height: 100%; image-rendering: pixelated; }
.held-item .count {
  position: absolute; right: -2px; bottom: -4px;
  color: white; font-size: 13px; font-weight: 700;
  font-family: monospace; text-shadow: 1px 1px 0 #000;
}

/* ---- Creative legacy view (still works in creative mode) ---- */
.creative-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.creative-tabs .tab {
  flex: 1; min-width: 80px; padding: 6px 10px; font-size: 12px;
  background: rgba(0,0,0,0.25); border: 2px solid #1a0e04;
  margin: 0; box-shadow: none; cursor: pointer;
  color: #f4d8a0;
  border-radius: 2px;
  letter-spacing: 0.06em; text-transform: uppercase;
  font-family: 'Courier New', monospace;
  text-shadow: 1px 1px 0 #1a0e04;
}
.creative-tabs .tab.active {
  background: rgba(255,255,255,0.18);
  border-color: #f4d8a0;
}
.creative-grid {
  display: grid; grid-template-columns: repeat(9, 36px); gap: 3px;
  max-height: 280px; overflow-y: auto; padding: 4px;
  background: rgba(0,0,0,0.18);
  border: 2px solid #1a0e04;
  border-radius: 2px;
}
.creative-grid .slot {
  width: 36px; height: 36px;
  background: #8b8b8b;
  border-top: 2px solid #373737;
  border-left: 2px solid #373737;
  border-right: 2px solid #fefefe;
  border-bottom: 2px solid #fefefe;
  display: flex; align-items: center; justify-content: center;
  cursor: grab; position: relative; image-rendering: pixelated;
}
.creative-grid .slot:hover { background: #b6b6b6; }
.creative-grid .slot img,
.hotbar-row .slot img {
  width: 80%; height: 80%; pointer-events: none;
  image-rendering: pixelated;
}

/* Mobile-shrink the inventory. */
@media (max-width: 920px) {
  .inv-overlay-row { flex-direction: column; align-items: center; }
  .recipe-book {
    width: 100%;
    max-width: 580px;
    margin-right: 0;
    margin-bottom: 8px;
  }
  .recipe-list { grid-template-columns: repeat(8, 36px); }
}
@media (max-width: 640px) {
  .inv-panel {
    width: 96vw; min-width: 0;
    padding: 10px 12px;
  }
  .main-grid { grid-template-columns: repeat(9, 30px); grid-template-rows: repeat(3, 30px); }
  .menu-panel .hotbar-row { grid-template-columns: repeat(9, 30px); }
  .inv-slot { width: 30px; height: 30px; }
  .craft-grid { grid-template-columns: repeat(2, 30px); grid-template-rows: repeat(2, 30px); }
  .armor-col  { grid-template-rows: repeat(4, 30px); }
}

/* ============================================================
   Health HUD — classic sprite hearts, hunger drumsticks, air
   bubbles, damage flash + red vignette.

   The the hotbar in vanilla is 182 px wide displayed at 2x → 364 px;
   our hotbar uses 48px slots × 9 + gaps ≈ 480 px. Hearts sit above
   the LEFT half (over slots 1-5), hunger sits above the RIGHT half
   (over slots 6-10), matching the mirrored layout.
   ============================================================ */
.hud-hearts {
  position: fixed;
  bottom: 78px;
  left: 50%;
  transform: translateX(-238px); /* over the LEFT half of the hotbar */
  display: flex;
  flex-direction: row;
  gap: 1px;
  z-index: 22;
  pointer-events: none;
}
.hud-hunger {
  position: fixed;
  bottom: 78px;
  left: 50%;
  transform: translateX(58px); /* over the RIGHT half of the hotbar */
  display: flex;
  flex-direction: row-reverse; /* fills right-to-left */
  gap: 1px;
  z-index: 22;
  pointer-events: none;
}
/* Shared sprite-cell layout: 9 px source scaled 2x = 18px on screen. */
.sprite-cell {
  position: relative;
  width: 18px; height: 18px;
  image-rendering: pixelated;
}
.sprite-cell .sprite-bg,
.sprite-cell .sprite-fg {
  position: absolute; inset: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}
.sprite-cell .sprite-fg.empty {
  background-image: none !important;
}
/* Air bubbles row floats above the hunger row when the player is underwater. */
.hud-air {
  position: fixed; left: 50%;
  bottom: 100px;
  transform: translateX(58px);
  display: none; gap: 1px;
  flex-direction: row-reverse;
  z-index: 22;
  pointer-events: none;
}
.hud-air.visible { display: flex; }
.hud-air .bubble {
  width: 18px; height: 18px;
  image-rendering: pixelated;
  /* Own pixel-art bubble: 6x6 cyan disc with a single white highlight. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'><rect x='2' y='1' width='4' height='6' fill='%236cb6e8'/><rect x='1' y='2' width='6' height='4' fill='%236cb6e8'/><rect x='2' y='2' width='2' height='2' fill='%23e8e4d0'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.hud-air .bubble.popped {
  /* Own pixel-art bursting bubble: broken ring of 4 dots. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'><rect x='1' y='1' width='2' height='2' fill='%236cb6e8'/><rect x='5' y='1' width='2' height='2' fill='%236cb6e8'/><rect x='1' y='5' width='2' height='2' fill='%236cb6e8'/><rect x='5' y='5' width='2' height='2' fill='%236cb6e8'/></svg>");
  opacity: 0.7;
}

.damage-flash {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 6;
  background: radial-gradient(ellipse at center, rgba(220,40,40,0) 60%, rgba(160,20,20,0.6) 110%);
  opacity: 0;
  transition: opacity 0.15s;
}
.damage-flash.flash { opacity: 1; transition: opacity 0.05s; }

/* A separate, slower-fading red vignette that lingers longer than
   the snap-flash, mirroring the damage feedback. */
.damage-vignette {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 7;
  background: radial-gradient(ellipse at center,
    rgba(180, 20, 20, 0.0) 35%,
    rgba(180, 20, 20, 0.15) 65%,
    rgba(160, 10, 10, 0.55) 105%);
  opacity: 0;
  transition: opacity 0.45s ease-out;
}
.damage-vignette.visible {
  opacity: 1;
  transition: opacity 0.08s linear;
}

/* Mob hurt flash — mob mesh tint (handled via material in JS). The CSS
   class here is for any DOM-side feedback we may add later. */
.mob-hurt-flash {
  animation: mob-hurt 0.15s ease-out;
}
@keyframes mob-hurt {
  0%   { filter: hue-rotate(0deg)  brightness(1.0); }
  50%  { filter: hue-rotate(-30deg) brightness(1.5); }
  100% { filter: hue-rotate(0deg)  brightness(1.0); }
}

/* ============================================================
   Quit / "thanks for playing" final overlay (when window.close fails).
   ============================================================ */
#quit-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.92);
  color: #fff;
  font-family: 'Courier New', monospace;
  flex-direction: column;
  gap: 14px;
  text-align: center;
}
#quit-overlay.hidden { display: none; }
#quit-overlay h2 {
  font-size: 28px;
  letter-spacing: 0.2em;
  margin: 0;
  text-shadow: 3px 3px 0 #000;
}
#quit-overlay p {
  font-size: 13px;
  opacity: 0.75;
  letter-spacing: 0.08em;
  margin: 0;
}

/* ============================================================
   Recipe Book — appears on the LEFT of the inventory panel.
   ============================================================ */
.inv-panel.inv-with-recipe-book {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 14px;
  align-items: stretch;
  min-width: 720px;
}
.inv-main-column { display: flex; flex-direction: column; gap: 6px; }
.recipe-book {
  display: flex; flex-direction: column;
  background: rgba(0, 0, 0, 0.32);
  border: 2px solid #2a2a2a;
  outline: 1px solid #7a6a44;
  outline-offset: -3px;
  padding: 8px 6px;
  min-height: 100%;
}
.recipe-book-title {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  color: #ffd76a;
  letter-spacing: 0.10em;
  text-shadow: 2px 2px 0 #1a1a1a;
  padding: 4px 0 8px;
  border-bottom: 1px solid rgba(122, 106, 68, 0.5);
  margin-bottom: 6px;
}
.recipe-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.recipe-tab {
  flex: 1;
  background: linear-gradient(180deg, #6a6a6a 0%, #6a6a6a 45%, #4a4a4a 50%, #4a4a4a 100%);
  color: #ffffff;
  border: 2px solid #000;
  outline: 1px solid #7a7a7a;
  outline-offset: -3px;
  padding: 4px 0;
  font-size: 10px;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-shadow: 1px 1px 0 #1a1a1a;
}
.recipe-tab.active {
  background: linear-gradient(180deg, #6c98d6 0%, #6c98d6 45%, #4a78b8 50%, #4a78b8 100%);
}
.recipe-list {
  flex: 1;
  display: flex; flex-direction: column;
  gap: 3px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 4px;
}
.recipe-list::-webkit-scrollbar { width: 8px; }
.recipe-list::-webkit-scrollbar-thumb { background: #5a3a1f; border-radius: 0; }
.recipe-list::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); }
.recipe-entry {
  display: flex; align-items: center; gap: 6px;
  background: rgba(40, 30, 18, 0.55);
  border: 2px solid #1a1a1a;
  outline: 1px solid #5a4a2a;
  outline-offset: -3px;
  padding: 4px 6px;
  cursor: pointer;
  position: relative;
  transition: background 0.1s;
}
.recipe-entry:hover { background: rgba(70, 50, 25, 0.85); }
.recipe-entry.locked { opacity: 0.32; cursor: not-allowed; filter: grayscale(0.5); }
.recipe-entry.locked:hover { background: rgba(40, 30, 18, 0.55); }
.recipe-icon {
  width: 28px; height: 28px;
  image-rendering: pixelated;
  flex-shrink: 0;
}
.recipe-name {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  color: #fff8e0;
  letter-spacing: 0.04em;
  text-shadow: 1px 1px 0 #2a1a0a;
  flex: 1;
}
.recipe-count {
  position: absolute;
  bottom: 2px; right: 2px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  font-weight: bold;
  color: #ffd76a;
  text-shadow: 1px 1px 0 #000;
  background: rgba(0,0,0,0.55);
  padding: 0 3px;
  border-radius: 2px;
}
.recipe-empty {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  color: rgba(255, 248, 224, 0.65);
  text-align: center;
  padding: 24px 6px;
  line-height: 1.6;
  font-style: italic;
}

@media (max-width: 900px) {
  .inv-panel.inv-with-recipe-book {
    grid-template-columns: 1fr;
    min-width: 380px;
  }
  .recipe-book { max-height: 180px; }
  .recipe-list { max-height: 140px; }
}

/* ============================================================
   CLASSIC HUD POLISH (additive overrides only).
   Applied at the end of the cascade so existing selectors keep
   their layout/positioning and only the chrome changes.
   Rules sourced from:
     - classic sunken-bevel inventory slot
     - hand-painted UI references (selected-slot
       outline is a 1px white outer + 2px black inner frame)
     - Generic chunky pixel typography conventions
   ============================================================ */

/* 1. SUNKEN-SLOT inventory pocket. The classic the inventory
      slot has light top-left + dark bottom-right when the slot
      is OPEN (recessed pocket), and the bevel INVERTS on hover
      (so hovered slots look "raised" / interactive). */
.inv-slot {
  border-top-color:    var(--bx-slot-lo);
  border-left-color:   var(--bx-slot-lo);
  border-right-color:  var(--bx-slot-hi);
  border-bottom-color: var(--bx-slot-hi);
  box-shadow:
    inset 1px 1px 0 rgba(0, 0, 0, 0.35),
    inset -1px -1px 0 rgba(255, 255, 255, 0.18);
}
.inv-slot:hover {
  /* Invert the bevel: light top-left, dark bottom-right => looks raised. */
  border-top-color:    var(--bx-slot-hi);
  border-left-color:   var(--bx-slot-hi);
  border-right-color:  var(--bx-slot-lo);
  border-bottom-color: var(--bx-slot-lo);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.35),
    inset -1px -1px 0 rgba(0, 0, 0, 0.30);
}

/* 2. HOTBAR selected-slot indicator: defined above using ::before
      with the classic hotbar_selection.png sprite. */

/* 3. pixel typography fallback. No external font fetch; rely
      on whatever monospace pixel font the system provides. */
.bx-typography,
#title-card h1,
.bx-btn,
.recipe-name,
.recipe-book-title {
  font-family: 'Press Start 2P', 'Courier New', 'VT323', monospace;
}

/* ============================================================
   AUTHENTIC PIXEL INVENTORY OVERRIDES.

   Final cascade pass: rewrites the wood-plank look on top of the
   original sprite-backed inv panel into our own pixel-bevel chrome.
   The inv panel layout retains the canonical survival arrangement:

     [armor 4x1] [crafting 2x2 → result]
                 [main 3x9 inventory]
                 [hotbar 1x9]

   The pixel-perfect dimensions are matched to the 176x166 source
   atlas scaled 2x = 352x332 displayed. We render each region with
   its own grid so the inventory.png background lines up cleanly
   underneath the slots.
   ============================================================ */

#inventory-menu .menu-panel.inv-panel.inv-with-recipe-book {
  /* Override the wood gradient + grid layout entirely. */
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  min-width: 0;
  color: white;
}

/* the inventory.png is 256x256 source; the relevant inventory frame
   is 176x166 in the top-left. We display the full atlas at 2× scale
   then position child slots over it. position:relative is critical so
   the absolutely-positioned slot groups inside anchor here. */
.inv-main-column {
  position: relative;
  width: 352px;   /* 176 × 2 */
  height: 332px;  /* 166 × 2 */
  display: block;
  flex-direction: initial;
  gap: 0;
  /* Background image removed — Wave 2 below repaints this whole panel
     using our pixel-bevel chrome (.inv-main-column @ #inventory-menu). */
  background-repeat: no-repeat;
  background-size: 512px 512px;
  background-position: 0 0;
  image-rendering: pixelated;
  border: none;
  padding: 0;
  font-family: 'Courier New', monospace;
}

/* Hide the now-redundant title row + labels — the inventory.png art
   has the title text and section labels baked in. */
.inv-main-column .inv-titlebar,
.inv-main-column .inv-label {
  display: none;
}

/* The survival layout becomes absolutely positioned over the
   inventory background. Coordinates are computed by doubling the
   original 176x166 source pixel offsets (the conventional slot
   positions in a classic survival GUI layout). */
.inv-main-column .inv-survival {
  position: absolute;
  inset: 0;
  padding: 0;
}

/* All sub-regions are absolute-positioned over the inventory background.
   Coordinates are derived from the canonical 176×166 source layout,
   doubled to render at 2× (and indented by 1px to center icons over the
   slot frames painted in the background). */
.inv-main-column .inv-top-row {
  position: static;   /* children are individually absolute-positioned */
  display: block;
}

/* Crafting region: 2x2 + arrow + output, upper-right of the frame.
   source: 2x2 starts at (97, 17), result at (153, 27). */
.inv-main-column .craft-region {
  position: absolute;
  inset: 0;
  padding: 0;
  display: block;
}
.inv-main-column .craft-row { display: block; position: static; }
.inv-main-column .craft-grid {
  position: absolute;
  left: 192px;   /* (97-1)*2 */
  top: 32px;     /* (17-1)*2 */
  display: grid;
  grid-template-columns: repeat(2, 36px);
  grid-template-rows:    repeat(2, 36px);
  gap: 0;
}
.inv-main-column .craft-grid .inv-slot {
  width: 36px !important; height: 36px !important; margin: 0;
}
.inv-main-column .craft-arrow {
  display: none;  /* the inventory.png background draws the arrow already */
}
.inv-main-column .craft-output {
  position: absolute;
  left: 304px;   /* (153-1)*2 */
  top: 52px;     /* (27-1)*2 */
  width: 36px !important;
  height: 36px !important;
}

/* Armor region: 4 vertical slots on the LEFT.
   source: armor at (7, 7), 18 px stride. */
.inv-main-column .armor-region {
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 0;
}
.inv-main-column .armor-col {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.inv-main-column .armor-col .inv-slot {
  width: 36px !important;
  height: 36px !important;
}

.inv-main-column .inv-spacer { display: none; }

/* Main 3x9 grid — source (7, 83). */
.inv-main-column .main-grid {
  position: absolute;
  left: 14px;
  top: 166px;
  display: grid;
  grid-template-columns: repeat(9, 36px);
  grid-template-rows:    repeat(3, 36px);
  gap: 0;
}
.inv-main-column .main-grid .inv-slot {
  width: 36px !important;
  height: 36px !important;
}

/* Hotbar row — source (7, 141). */
.inv-main-column .hotbar-row {
  position: absolute;
  left: 14px;
  top: 282px;
  display: grid !important;
  grid-template-columns: repeat(9, 36px);
  gap: 0;
  margin: 0 !important;
}
.inv-main-column .hotbar-row .inv-slot {
  width: 36px !important;
  height: 36px !important;
}

/* For slots overlaid on the inventory.png background, remove the
   sunken-bevel borders — the background already draws the slot
   shadows underneath. We keep them transparent and add a subtle
   highlight on hover. */
.inv-main-column .inv-slot {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.inv-main-column .inv-slot:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  border: none !important;
  box-shadow: none !important;
}
.inv-main-column .inv-slot img {
  width: 32px;
  height: 32px;
  position: absolute;
  left: 2px;
  top: 2px;
}
.inv-main-column .inv-slot .count {
  font-family: 'Courier New', monospace;
  font-weight: 700;
  font-size: 13px;
  color: white;
  text-shadow:
     1px  1px 0 #3a3a3a,
     1px  0   0 #3a3a3a,
     0    1px 0 #3a3a3a;
  position: absolute;
  right: 2px;
  bottom: 0;
}

/* Recipe book pinned to the LEFT of the inventory frame. */
#inventory-menu .menu-panel.inv-panel.inv-with-recipe-book > .recipe-book {
  align-self: stretch;
  width: 200px;
  background: rgba(20, 14, 4, 0.92);
  border: 2px solid #1a0e04;
  color: #fff;
  padding: 10px 8px;
}

/* Mobile: shrink the whole inventory to fit. */
@media (max-width: 720px) {
  .inv-main-column {
    transform: scale(0.86);
    transform-origin: top left;
  }
}

/* ============================================================
   Title-screen background. Slate base + radial vignette in the
   pixel-bevel theme. Wave 4 further enriches this with scanlines
   and a starfield (see bottom of file).
   ============================================================ */
#overlay.bx-title-overlay {
  /* Slate base with a dim radial vignette (own work). Wave 4 below
     overrides this with a richer scanline + starfield gradient. */
  background-color: #1a1c25;
  background-image:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  image-rendering: pixelated;
}

.title-footer {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 540px;
  margin-top: 16px;
  padding: 0 12px;
}
.title-footer .footer-left  { text-align: left; }
.title-footer .footer-right { text-align: right; }

/* ============================================================
   World-visible overlay: backdrop is a faint tint instead of a
   solid dark wash, so the game world keeps rendering behind any
   open menu (inventory / Game Menu / crafting table / furnace).
   ============================================================ */
.menu-overlay.world-visible {
  background: rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

/* ============================================================
   Game Menu (ESC pause) — the Game Menu screen layout.
   Centered title + four classic buttons, no panel background.
   The world stays visible behind a soft tint.
   ============================================================ */
.pause-panel {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  min-width: 0;
  text-align: center;
  color: #fff;
  font-family: 'Courier New', monospace;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.game-menu-title {
  font-size: 28px;
  letter-spacing: 0.14em;
  margin: 0 0 12px;
  text-shadow: 3px 3px 0 #000;
}
.pause-panel .menu-buttons {
  gap: 6px;
  align-items: center;
}
/* Two side-by-side half-buttons (Achievements / Statistics). */
.game-menu-row {
  display: flex;
  gap: 6px;
  justify-content: center;
}
.bx-btn.half {
  min-width: 158px;
  padding: 10px 16px;
  font-size: 14px;
}

/* ============================================================
   Crafting-table 3×3 panel — uses the real crafting_table.png
   sprite as the background.
   ============================================================ */
.craft3x3-panel {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #fff;
}
.craft3x3-frame {
  position: relative;
  width: 352px;   /* 176 × 2 — source frame size */
  height: 332px;  /* 166 × 2 */
  /* Background image removed — Wave 3 below repaints this frame
     with pixel-bevel chrome and a grid layout. */
  background-repeat: no-repeat;
  background-size: 512px 512px;
  background-position: 0 0;
  image-rendering: pixelated;
}
.craft3x3-title {
  display: none;  /* title is baked into the sprite */
}
/* Layout: 3x3 grid at (30, 17) in 1× px → (60, 34) in 2×, 18px stride → 36px. */
.craft3x3-grid {
  position: absolute;
  left: 58px;    /* (30-1)*2 */
  top: 32px;     /* (17-1)*2 */
  display: grid;
  grid-template-columns: repeat(3, 36px);
  grid-template-rows:    repeat(3, 36px);
  gap: 0;
}
/* Layout: output slot at (124, 35) in 1× px → (246, 68) in 2×. */
.craft3x3-output {
  position: absolute;
  left: 246px;
  top: 68px;
  width: 36px !important;
  height: 36px !important;
}
.craft3x3-frame .inv-slot {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.craft3x3-frame .inv-slot:hover {
  background: rgba(255, 255, 255, 0.20) !important;
}
.craft3x3-frame .inv-slot img {
  width: 32px; height: 32px;
  position: absolute;
  left: 2px; top: 2px;
}
.craft3x3-frame .inv-slot .count {
  position: absolute; right: 2px; bottom: 0;
  font-family: 'Courier New', monospace;
  font-weight: 700;
  color: #fff;
  text-shadow: 1px 1px 0 #3a3a3a;
}

/* Player-inventory strip below the crafting table / furnace frame. */
.table-player-inv,
.furnace-player-inv {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  background: rgba(198, 198, 198, 0.92);
  border: 3px solid #1a1a1a;
  outline: 1px solid #c6c6c6;
  outline-offset: -4px;
  padding: 8px;
}
.table-player-inv .inv-label,
.furnace-player-inv .inv-label {
  color: #404040;
  text-shadow: none;
  align-self: flex-start;
  margin: 0 0 2px 4px;
}
.table-player-inv .main-grid,
.furnace-player-inv .main-grid {
  display: grid;
  grid-template-columns: repeat(9, 36px);
  grid-template-rows: repeat(3, 36px);
  gap: 0;
}
.table-player-inv .hotbar-row,
.furnace-player-inv .hotbar-row {
  display: grid;
  grid-template-columns: repeat(9, 36px);
  gap: 0;
  margin-top: 6px;
}

/* ============================================================
   Furnace panel — uses the real furnace.png sprite.
   ============================================================ */
.furnace-panel {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #fff;
}
.furnace-frame {
  position: relative;
  width: 352px;   /* 176 × 2 */
  height: 332px;  /* 166 × 2 */
  /* Background image removed — Wave 3 below repaints this frame
     with pixel-bevel chrome and a grid layout. */
  background-repeat: no-repeat;
  background-size: 512px 512px;
  background-position: 0 0;
  image-rendering: pixelated;
}
.furnace-title { display: none; /* baked into sprite */ }

/* source coords (1× px → 2×): input (56,17)→(110,32); fuel (56,53)→(110,104);
   output (116,31)→(230,60). Slot is 18×18 → 36×36. */
.furnace-slot {
  position: absolute;
  width: 36px !important;
  height: 36px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.furnace-slot:hover { background: rgba(255, 255, 255, 0.20) !important; }
.furnace-slot-input  { left: 110px; top: 32px; }
.furnace-slot-fuel   { left: 110px; top: 104px; }
.furnace-slot-output { left: 230px; top: 60px; }
.furnace-slot img {
  width: 32px; height: 32px;
  position: absolute; left: 2px; top: 2px;
}
.furnace-slot .count {
  position: absolute; right: 2px; bottom: 0;
  font-family: 'Courier New', monospace;
  font-weight: 700;
  color: #fff;
  text-shadow: 1px 1px 0 #3a3a3a;
}

/* Animated arrow: progress bar overlaid on the sprite's arrow region.
   source arrow at (79, 35), 22×16 → at 2×: left 158, top 70, 44×32. */
.furnace-arrow {
  position: absolute;
  left: 158px;
  top: 70px;
  width: 44px;
  height: 32px;
  pointer-events: none;
  overflow: hidden;
}
.furnace-arrow-fill {
  width: 0%;
  height: 100%;
  /* Background image removed — Wave 3 below paints a solid gold-accent
     fill in --ui-accent for the progress bar. */
  background-size: 100% 100%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  transition: width 0.18s linear;
}

/* Animated flame — visible while burnTime > 0. source flame at
   (56, 36), 14×14 → at 2×: left 112, top 72, 28×28. We render it as
   a flickering gradient when no sprite is available; otherwise use
   the burn.png CDN sprite mask. */
.furnace-flame {
  position: absolute;
  left: 112px;
  top: 72px;
  width: 28px;
  height: 28px;
  pointer-events: none;
  /* Background image removed — Wave 3 below paints a procedural
     chunky-pixel flame via stacked linear-gradients. */
  background-size: 100% 100%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  opacity: 0;
  transform-origin: center bottom;
  transition: opacity 0.18s;
}
.furnace-flame.burning {
  opacity: calc(0.45 + 0.55 * var(--burn-frac, 1));
  animation: furnace-flicker 0.25s ease-in-out infinite alternate;
}
@keyframes furnace-flicker {
  from { transform: scale(1.0, calc(0.85 + var(--burn-frac, 1) * 0.20)); }
  to   { transform: scale(1.05, calc(0.95 + var(--burn-frac, 1) * 0.18)); }
}

/* ============================================================
   Furnace + table player-inventory slots — sunken pixel style.
   ============================================================ */
.table-player-inv .inv-slot,
.furnace-player-inv .inv-slot {
  width: 36px !important;
  height: 36px !important;
}

/* ============================================================
   RECIPE BOOK (new) — pinned to the LEFT EDGE of the inventory
   and crafting-table panels. Starts collapsed (just a "book"
   toggle button). When expanded, shows search + 5 category tabs
   down the left edge + a 6-per-row scrollable recipe grid +
   page nav, matching the recipe-book UI.
   Sprites pulled from gui/sprites/recipe_book/ on the 1.21.4 CDN.
   ============================================================ */
.recipe-book-host {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  align-self: stretch;
  z-index: 4;
}
.recipe-book-host.collapsed {
  width: 26px;
  min-width: 26px;
}
.recipe-book-host.expanded {
  /* Spec: 32-px result icons, 6 per row → 192 px of cells + tab col
     + body padding. The total expanded width is 26 (toggle) + 4 gap +
     236 (body). When the viewport is narrow, the body shrinks on the
     mobile breakpoint below. */
  width: 266px;
  min-width: 266px;
}

/* "Book" toggle — square button hugging the LEFT edge of the panel.
   Uses a recipe-book button sprite (20×18 source, 2× display). */
.recipe-book-toggle {
  width: 26px;
  height: 38px;
  padding: 0;
  margin: 4px 0 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  position: relative;
  align-self: flex-start;
  flex: 0 0 26px;
  image-rendering: pixelated;
}
.recipe-book-toggle .rbtoggle-icon {
  display: block;
  width: 40px;
  height: 36px;
  /* Own pixel-art "open book" glyph (gold pages on a slate spine). */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='18' shape-rendering='crispEdges'><rect x='2' y='3' width='7' height='12' fill='%23f0c060'/><rect x='11' y='3' width='7' height='12' fill='%23f0c060'/><rect x='9' y='2' width='2' height='14' fill='%231a1c25'/><rect x='4' y='6' width='3' height='1' fill='%231a1c25'/><rect x='4' y='9' width='3' height='1' fill='%231a1c25'/><rect x='13' y='6' width='3' height='1' fill='%231a1c25'/><rect x='13' y='9' width='3' height='1' fill='%231a1c25'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  /* Display at 2× and let it overflow slightly LEFTWARD off the
     inventory panel's edge for a tab-style look. */
  margin: 0 -6px 0 -8px;
  pointer-events: none;
}
.recipe-book-toggle:hover .rbtoggle-icon,
.recipe-book-toggle.open .rbtoggle-icon {
  /* Highlighted variant: brighter gold pages. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='18' shape-rendering='crispEdges'><rect x='2' y='3' width='7' height='12' fill='%23ffe39a'/><rect x='11' y='3' width='7' height='12' fill='%23ffe39a'/><rect x='9' y='2' width='2' height='14' fill='%231a1c25'/><rect x='4' y='6' width='3' height='1' fill='%231a1c25'/><rect x='4' y='9' width='3' height='1' fill='%231a1c25'/><rect x='13' y='6' width='3' height='1' fill='%231a1c25'/><rect x='13' y='9' width='3' height='1' fill='%231a1c25'/></svg>");
}

/* Body of the panel — hidden when collapsed. */
.recipe-book-body {
  display: flex;
  flex-direction: column;
  width: 236px;
  min-width: 236px;
  max-width: 236px;
  background: #c6c6c6;
  border: 4px solid;
  border-color: #ffffff #555555 #555555 #ffffff; /* sunken pocket */
  outline: 1px solid #000;
  outline-offset: 0;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35);
  padding: 6px 4px;
  margin-left: 0;
  gap: 4px;
  color: #1f1f1f;
  font-family: 'Press Start 2P', 'Courier New', monospace;
}
.recipe-book-host.collapsed .recipe-book-body { display: none; }

/* Search row */
.recipe-search-row {
  display: flex;
  align-items: center;
  padding: 2px 2px 2px 2px;
  background: rgba(60, 60, 60, 0.95);
  border: 2px solid;
  border-color: #2a2a2a #ffffff #ffffff #2a2a2a; /* raised pocket inverted */
  margin: 2px 2px 4px;
}
.recipe-search {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: #ffffff;
  font-family: 'Press Start 2P', 'Courier New', monospace;
  font-size: 9px;
  letter-spacing: 0.04em;
  padding: 4px 4px;
}
.recipe-search::placeholder {
  color: rgba(255, 255, 255, 0.55);
  font-style: normal;
}

/* The main row: tab column on the LEFT, grid + page-bar on the RIGHT. */
.recipe-main-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 2px;
  flex: 1;
  min-height: 0;
}
.recipe-tabs-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 28px;
  flex: 0 0 28px;
  padding-top: 4px;
}
.recipe-tab-btn {
  width: 28px;
  height: 26px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  image-rendering: pixelated;
  /* Pocket look matching the tab — light top-left / dark bottom-right. */
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #555555;
  border-bottom: 2px solid #555555;
  background-color: #c6c6c6;
  display: flex;
  align-items: center;
  justify-content: center;
}
.recipe-tab-btn.active {
  background-color: #8b8b8b;
  border-top-color: #555555;
  border-left-color: #555555;
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
}
.recipe-tab-btn:hover { background-color: #b6b6b6; }
.recipe-tab-btn.active:hover { background-color: #757575; }
.rbtab-glyph {
  display: block;
  width: 16px; height: 16px;
  image-rendering: pixelated;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}
/* All five tab glyphs are own-work 16×16 pixel-art SVGs in the
   theme's --ui-text off-white (#e8e4d0). Generic silhouettes —
   no third-party assets. */
.rbtab-glyph[data-icon="compass"] {
  /* 4-point pixel-art compass star. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'><rect x='7' y='2' width='2' height='5' fill='%23e8e4d0'/><rect x='7' y='9' width='2' height='5' fill='%23e8e4d0'/><rect x='2' y='7' width='5' height='2' fill='%23e8e4d0'/><rect x='9' y='7' width='5' height='2' fill='%23e8e4d0'/><rect x='6' y='6' width='4' height='4' fill='%23e8e4d0'/></svg>");
}
.rbtab-glyph[data-icon="pickaxe"] {
  /* Diagonal pickaxe silhouette: head on top-right, handle to bottom-left. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'><rect x='2' y='2' width='4' height='2' fill='%23e8e4d0'/><rect x='10' y='2' width='4' height='2' fill='%23e8e4d0'/><rect x='6' y='3' width='4' height='2' fill='%23e8e4d0'/><rect x='7' y='5' width='2' height='2' fill='%23e8e4d0'/><rect x='6' y='7' width='2' height='2' fill='%23e8e4d0'/><rect x='5' y='9' width='2' height='2' fill='%23e8e4d0'/><rect x='4' y='11' width='2' height='2' fill='%23e8e4d0'/><rect x='3' y='13' width='2' height='2' fill='%23e8e4d0'/></svg>");
}
.rbtab-glyph[data-icon="bricks"] {
  /* 2x3 brick grid (own work). */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'><rect x='2' y='3' width='5' height='3' fill='%23e8e4d0'/><rect x='9' y='3' width='5' height='3' fill='%23e8e4d0'/><rect x='2' y='7' width='3' height='3' fill='%23e8e4d0'/><rect x='7' y='7' width='5' height='3' fill='%23e8e4d0'/><rect x='2' y='11' width='5' height='3' fill='%23e8e4d0'/><rect x='9' y='11' width='5' height='3' fill='%23e8e4d0'/></svg>");
}
.rbtab-glyph[data-icon="redstone"] {
  /* 3x3 dot grid (small red pixel cluster). */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'><rect x='3' y='3' width='2' height='2' fill='%23e84a4a'/><rect x='7' y='3' width='2' height='2' fill='%23e84a4a'/><rect x='11' y='3' width='2' height='2' fill='%23e84a4a'/><rect x='3' y='7' width='2' height='2' fill='%23e84a4a'/><rect x='7' y='7' width='2' height='2' fill='%23e84a4a'/><rect x='11' y='7' width='2' height='2' fill='%23e84a4a'/><rect x='3' y='11' width='2' height='2' fill='%23e84a4a'/><rect x='7' y='11' width='2' height='2' fill='%23e84a4a'/><rect x='11' y='11' width='2' height='2' fill='%23e84a4a'/></svg>");
}
.rbtab-glyph[data-icon="apple"] {
  /* Round fruit silhouette with a 2px stem on top. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'><rect x='8' y='2' width='2' height='2' fill='%23e8e4d0'/><rect x='5' y='5' width='6' height='2' fill='%23e8e4d0'/><rect x='3' y='7' width='10' height='5' fill='%23e8e4d0'/><rect x='4' y='12' width='8' height='2' fill='%23e8e4d0'/></svg>");
}

/* Right column: recipe grid + page bar. */
.recipe-grid-col {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
}
.recipe-grid {
  display: grid;
  /* 6 columns × 32-px icon cells = 192 px (spec: 2× scale icons). */
  grid-template-columns: repeat(6, 32px);
  grid-auto-rows: 32px;
  gap: 2px;
  padding: 2px 0;
  overflow-y: auto;
  flex: 1;
  min-height: 100px;
  max-height: 320px;
  align-content: start;
  justify-content: center;
  scrollbar-width: thin;
}
.recipe-grid::-webkit-scrollbar { width: 6px; }
.recipe-grid::-webkit-scrollbar-thumb { background: #555; }
.recipe-grid::-webkit-scrollbar-track { background: #2a2a2a; }

.recipe-cell {
  width: 32px;
  height: 32px;
  /* Background image removed — Wave 2 below repaints this slot
     with a sunken pixel-bevel pocket in --ui-bg-mid. */
  background-size: 100% 100%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.recipe-cell.locked {
  /* Background image removed — Wave 2 below repaints the locked
     state with --ui-bg-deep + 0.55 opacity. */
  cursor: pointer;     /* still lets you click locked recipes to preview */
}
.recipe-cell:hover {
  outline: 2px solid #ffffff;
  outline-offset: -2px;
}
.recipe-cell-icon {
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
  pointer-events: none;
}
.recipe-cell.locked .recipe-cell-icon {
  filter: grayscale(0.85) brightness(0.55);
}
.recipe-cell-count {
  position: absolute;
  right: 1px;
  bottom: -2px;
  font-family: 'Press Start 2P', 'Courier New', monospace;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 1px 1px 0 #3f3f3f;
  pointer-events: none;
  z-index: 2;
}
.recipe-cell-empty {
  grid-column: 1 / -1;
  text-align: center;
  font-family: 'Press Start 2P', 'Courier New', monospace;
  font-size: 7px;
  letter-spacing: 0.02em;
  color: #3a3a3a;
  padding: 12px 4px;
  line-height: 1.4;
}

/* Page navigation row (prev / 1 / N / next). */
.recipe-page-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 2px;
  margin-top: 2px;
  gap: 2px;
}
.recipe-page-arrow {
  width: 18px;
  height: 10px;
  padding: 0;
  margin: 0;
  border: 0;
  background-color: transparent;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  cursor: pointer;
}
/* Own-work pixel-art chevron arrows for page navigation, 18x10. */
.recipe-page-arrow.prev {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='10' shape-rendering='crispEdges'><rect x='10' y='1' width='2' height='8' fill='%23e8e4d0'/><rect x='8' y='2' width='2' height='6' fill='%23e8e4d0'/><rect x='6' y='3' width='2' height='4' fill='%23e8e4d0'/><rect x='4' y='4' width='2' height='2' fill='%23e8e4d0'/></svg>");
}
.recipe-page-arrow.next {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='10' shape-rendering='crispEdges'><rect x='6' y='1' width='2' height='8' fill='%23e8e4d0'/><rect x='8' y='2' width='2' height='6' fill='%23e8e4d0'/><rect x='10' y='3' width='2' height='4' fill='%23e8e4d0'/><rect x='12' y='4' width='2' height='2' fill='%23e8e4d0'/></svg>");
}
.recipe-page-arrow.prev:hover {
  /* Hover variant: gold accent. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='10' shape-rendering='crispEdges'><rect x='10' y='1' width='2' height='8' fill='%23f0c060'/><rect x='8' y='2' width='2' height='6' fill='%23f0c060'/><rect x='6' y='3' width='2' height='4' fill='%23f0c060'/><rect x='4' y='4' width='2' height='2' fill='%23f0c060'/></svg>");
}
.recipe-page-arrow.next:hover {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='10' shape-rendering='crispEdges'><rect x='6' y='1' width='2' height='8' fill='%23f0c060'/><rect x='8' y='2' width='2' height='6' fill='%23f0c060'/><rect x='10' y='3' width='2' height='4' fill='%23f0c060'/><rect x='12' y='4' width='2' height='2' fill='%23f0c060'/></svg>");
}
.recipe-page-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.recipe-page-label {
  flex: 1;
  text-align: center;
  font-family: 'Press Start 2P', 'Courier New', monospace;
  font-size: 7px;
  color: #1f1f1f;
  letter-spacing: 0.04em;
}

/* Hover tooltip — pinned to body, follows the cursor. */
.recipe-tooltip {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  background: rgba(16, 0, 16, 0.94);
  border: 1px solid #2a0a2a;
  outline: 1px solid #5a3a5a;
  outline-offset: -2px;
  padding: 4px 6px;
  min-width: 80px;
  max-width: 220px;
  color: #ffffff;
  font-family: 'Press Start 2P', 'Courier New', monospace;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}
.recipe-tooltip.hidden { display: none; }
.recipe-tooltip-title {
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  text-shadow: 1px 1px 0 #2a0a2a;
  letter-spacing: 0.02em;
  margin-bottom: 3px;
}
.recipe-tooltip-sub {
  font-size: 7px;
  color: #b890c0;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.recipe-tooltip-ings {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px;
  padding-top: 2px;
  border-top: 1px solid rgba(184, 144, 192, 0.3);
}
.recipe-tooltip-ing {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 24px;
  position: relative;
}
.recipe-tooltip-ing img {
  width: 20px;
  height: 20px;
  image-rendering: pixelated;
}
.recipe-tooltip-ing .item-placeholder {
  width: 20px; height: 20px;
  font-family: 'Courier New', monospace;
  font-size: 9px;
  color: #ffd76a;
  display: flex; align-items: center; justify-content: center;
}
.recipe-tooltip-ing-count {
  font-family: 'Press Start 2P', 'Courier New', monospace;
  font-size: 7px;
  color: #ffffff;
  text-shadow: 1px 1px 0 #2a0a2a;
  margin-top: 1px;
}

/* Ingredient-cell highlight in the host crafting grid — pulsing yellow. */
.inv-slot.rb-ingredient {
  position: relative;
  outline: 2px solid #ffd76a !important;
  outline-offset: -2px !important;
  z-index: 1;
  animation: rb-ingredient-pulse 0.9s ease-in-out infinite alternate;
}
@keyframes rb-ingredient-pulse {
  from { box-shadow: 0 0 0 0 rgba(255, 215, 106, 0.0) inset; }
  to   { box-shadow: 0 0 8px 2px rgba(255, 215, 106, 0.55) inset; }
}

/* ============================================================
   Crafting-table 3×3 row: recipe-book LEFT of the frame.
   ============================================================ */
.craft3x3-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 4px;
}

/* Inventory panel with recipe book: ensure the row holds the
   collapsed book + the inventory frame side-by-side without
   compromising the 352×332 inventory.png alignment. */
#inventory-menu .menu-panel.inv-panel.inv-with-recipe-book {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 4px !important;
}
#inventory-menu .menu-panel.inv-panel.inv-with-recipe-book .recipe-book-host {
  align-self: flex-start;
  margin-top: 0;
}

/* Mobile shrink — let the recipe book go below the inventory if
   the viewport can't fit them side-by-side. */
@media (max-width: 720px) {
  #inventory-menu .menu-panel.inv-panel.inv-with-recipe-book {
    flex-direction: column !important;
    align-items: center !important;
  }
  .recipe-book-host.expanded {
    width: 230px;
    min-width: 230px;
  }
  .recipe-book-body {
    width: 200px;
    min-width: 200px;
    max-width: 200px;
  }
  .recipe-grid {
    /* 5 columns at 32 px = 160 + scrollbar = ~170, fits in 200. */
    grid-template-columns: repeat(5, 32px);
  }
}

/* ============================================================
   ============================================================
   ============   PIXEL UI REWRITE — WAVE 1   =================
   ============   (HUD: hotbar / hearts / hunger / air /
   ============    crosshair / break-progress / hint / fps)
   ============================================================
   This block is the FINAL pass in the cascade. It deliberately
   uses !important to defeat the older sprite-based chrome
   that the earlier rules layered in. Functional behaviour is
   untouched — every selector below targets the same DOM nodes
   that script.js, inventory.js and health.js already create.

   Visual language tokens live in ui_theme.css (loaded first).
   ============================================================ */

/* ---- Body / page background --------------------------------- */
body {
  font-family: var(--ui-font-body) !important;
  color: var(--ui-text);
}

/* ---- Crosshair --------------------------------------------- *
   Replace the sprite with a pure-CSS pixel "+" using two
   absolutely-positioned spans drawn by pseudo-elements. The
   sprite-based original is overridden by setting backgrounds
   to none and re-painting the cross with linear-gradients.    */
#crosshair.bx-crosshair {
  background-image: none !important;
  width: 14px !important;
  height: 14px !important;
  /* Two thin crossed bars, plus a 1-px dark outline via box-shadow
     so the mark stays legible on bright backgrounds. */
  background:
    linear-gradient(var(--ui-text), var(--ui-text)) center/2px 14px no-repeat,
    linear-gradient(var(--ui-text), var(--ui-text)) center/14px 2px no-repeat,
    transparent !important;
  filter: drop-shadow(1px 1px 0 var(--ui-text-shadow))
          drop-shadow(-1px 0 0 var(--ui-text-shadow))
          drop-shadow(0 -1px 0 var(--ui-text-shadow));
  mix-blend-mode: normal !important;
  image-rendering: pixelated;
}

/* ---- Hotbar — 9 slots of var(--slot-size) (44px) ---------- */
#hotbar {
  position: fixed !important;
  bottom: 8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  /* 9 slots × 44 + 8 gaps × 4 = 396 + 32 = 428 px. Add 8px panel
     padding both sides + 2px bevels = 444 px total. */
  width: calc(9 * var(--slot-size) + 8 * var(--slot-gap) + 24px) !important;
  height: calc(var(--slot-size) + 16px) !important;
  padding: 8px var(--slot-gap) !important;
  margin: 0;
  background-color: var(--ui-bg-deep) !important;
  background-image: none !important;
  background-repeat: no-repeat;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-light),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-dark) !important;
  image-rendering: pixelated;
  display: flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--slot-gap) !important;
  z-index: 20;
  box-sizing: border-box;
}

/* Hotbar slot — defeat inventory.js's inline width/height/outline. */
#hotbar .slot {
  width: var(--slot-size) !important;
  height: var(--slot-size) !important;
  margin: 0 !important;
  position: relative;
  background-color: var(--ui-bg-mid) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  /* Sunken pocket — dark top-left, light bottom-right. */
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-dark),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-light) !important;
  image-rendering: pixelated;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 var(--slot-size);
  transition: none;
  box-sizing: border-box;
}
#hotbar .slot:first-child { margin-left: 0 !important; }
#hotbar .slot:hover {
  background-color: var(--ui-bg-up) !important;
  transform: none;
}

/* Hotbar selected slot — gold inset bevel + 1-px gold ring.
   Overrides the previous ::before sprite-overlay AND the inline
   outline/box-shadow that inventory.js sets directly on the element. */
#hotbar .slot.selected {
  background-color: var(--ui-bg-up) !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  transform: none !important;
  box-shadow:
    inset 0 0 0 var(--bevel) var(--ui-accent),
    inset  var(--bevel)  var(--bevel) 0 var(--ui-accent-hi),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-accent-deep) !important;
}
#hotbar .slot.selected::before {
  /* Kill the sprite overlay from the original rule. */
  content: none !important;
  display: none !important;
  background-image: none !important;
}

#hotbar .slot .icon {
  width: calc(var(--slot-size) - 12px) !important;
  height: calc(var(--slot-size) - 12px) !important;
  image-rendering: pixelated;
  display: block;
  pointer-events: none;
  position: relative;
  z-index: 2;
}

#hotbar .slot .count {
  position: absolute;
  right: 3px;
  bottom: 1px;
  color: var(--ui-text);
  font-family: var(--ui-font-pixel);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-shadow:
     var(--pixel)  var(--pixel) 0 var(--ui-text-shadow),
     var(--pixel) 0            0 var(--ui-text-shadow),
     0            var(--pixel) 0 var(--ui-text-shadow);
  pointer-events: none;
  z-index: 3;
  letter-spacing: 0;
}

/* Drag-target highlight when something is being dragged onto a slot. */
#hotbar .slot.drop-target {
  background-color: var(--ui-bg-up-hover) !important;
  box-shadow:
    inset 0 0 0 var(--bevel) var(--ui-accent),
    inset  var(--bevel)  var(--bevel) 0 var(--ui-accent-hi),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-accent-deep) !important;
}

/* ---- Health row: hearts (left) + hunger (right) ------------
   Sit on a single horizontal strip directly above the hotbar.
   We re-anchor relative to the hotbar's new width (444 px).
   The container.png sprite is left intact (still shows the
   socket of each heart) — we paint our pixel frame AROUND it.
   The math: hotbar width = 444 → half = 222 → bands sit symmetrically. */
.hud-hearts {
  position: fixed;
  bottom: 72px;                  /* sits above the hotbar (60px box + 8px margin) */
  left: 50%;
  transform: translateX(-218px); /* hugs LEFT half of the hotbar */
  display: flex;
  flex-direction: row;
  gap: 2px;
  z-index: 22;
  pointer-events: none;
  padding: 2px;
  background: none;
  box-shadow: none;
  image-rendering: pixelated;
}
.hud-hunger {
  position: fixed;
  bottom: 72px;
  left: 50%;
  transform: translateX(42px);   /* hugs RIGHT half of the hotbar */
  display: flex;
  flex-direction: row-reverse;
  gap: 2px;
  z-index: 22;
  pointer-events: none;
  padding: 2px;
  background: none;
  box-shadow: none;
  image-rendering: pixelated;
}
/* Each sprite cell: 18×18, no change to inner sprite (sprite kept).
   The frame around the sprite row is the pixel chrome — the heart
   sprites themselves stay so we don't lose color recognition. */
.sprite-cell {
  position: relative;
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}

/* Air bubbles — re-style the row to match the hearts/hunger card. */
.hud-air {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(42px);
  display: none;
  gap: 2px;
  flex-direction: row-reverse;
  z-index: 22;
  pointer-events: none;
  padding: 2px;
  background: none;
  box-shadow: none;
}
.hud-air.visible { display: flex; }
.hud-air .bubble {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}

/* ---- XP / level indicator (placeholder bar — purely visual)
   We add a thin chrome strip between the health row and the
   hotbar. It will hook into a real XP system if/when one is
   added; right now it just shows a "Lv. 0" tag in pixel chrome
   so the layout reads as a complete HUD card.
   ============================================================ */
/* XP bar hidden — no XP gameplay system exists yet, so the bar would just
   show "Lv. 0" against empty chrome. Re-enable by removing `display: none`
   once an actual XP/leveling system lands. */
#xp-bar { display: none !important; }
#xp-bar.__keep {
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(9 * var(--slot-size) + 8 * var(--slot-gap) + 24px);
  height: 8px;
  z-index: 21;
  background-color: var(--ui-bg-deep);
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-dark),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-light);
  image-rendering: pixelated;
  pointer-events: none;
}
#xp-bar .xp-fill {
  height: 100%;
  width: 0%;
  background-color: var(--ui-success);
  box-shadow:
    inset 0 var(--pixel) 0 var(--ui-success-deep);
  transition: width 0.18s linear;
}
#xp-bar .xp-level {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--ui-font-pixel);
  font-size: 9px;
  color: var(--ui-text);
  text-shadow: 1px 1px 0 var(--ui-text-shadow);
  letter-spacing: 0.06em;
  line-height: 1;
  pointer-events: none;
}

/* ---- Block-name flash above the crosshair ------------------ */
#block-name {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--ui-bg-deep) !important;
  color: var(--ui-text) !important;
  padding: 6px 14px !important;
  border-radius: 0 !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  font-family: var(--ui-font-pixel) !important;
  font-weight: 400 !important;
  text-shadow: var(--pixel) var(--pixel) 0 var(--ui-text-shadow) !important;
  pointer-events: none;
  z-index: 15;
  opacity: 0;
  transition: opacity 0.18s;
  image-rendering: pixelated;
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-light),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-dark);
}
#block-name.visible,
#block-name.flash {
  opacity: 1;
}

/* ---- Break-progress bar (under crosshair) ------------------ */
#break-progress {
  position: fixed;
  left: 50%;
  bottom: 130px;
  transform: translateX(-50%);
  width: 140px;
  height: 10px;
  padding: 1px;
  background-color: var(--ui-bg-deep) !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: none;
  z-index: 20;
  overflow: hidden;
  image-rendering: pixelated;
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-dark),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-light);
}
#break-progress.visible { display: block; }
#break-progress .break-fill {
  height: 100%;
  width: 0%;
  background-color: var(--ui-accent);
  box-shadow: inset 0 var(--pixel) 0 var(--ui-accent-hi);
  transition: width 0.05s linear;
}

/* ---- FPS counter ------------------------------------------- */
#fps {
  position: fixed;
  top: 8px;
  right: 8px;
  font-family: var(--ui-font-pixel) !important;
  background-color: var(--ui-bg-deep) !important;
  color: var(--ui-success) !important;
  padding: 4px 8px !important;
  border-radius: 0 !important;
  font-size: 10px !important;
  letter-spacing: 0.06em !important;
  z-index: 15;
  pointer-events: none;
  text-shadow: 1px 1px 0 var(--ui-text-shadow);
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-light),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-dark);
}

/* ---- Hint banner ("Press E to open inventory") ------------- */
#hint {
  position: fixed;
  bottom: 140px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--ui-bg-deep) !important;
  color: var(--ui-text) !important;
  padding: 8px 14px !important;
  border-radius: 0 !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  font-family: var(--ui-font-pixel) !important;
  z-index: 15;
  pointer-events: none;
  text-shadow: var(--pixel) var(--pixel) 0 var(--ui-text-shadow);
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-light),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-dark);
  opacity: 0;
  transition: opacity 0.18s;
  image-rendering: pixelated;
}
#hint.hidden { opacity: 0; pointer-events: none; }
#hint.visible { opacity: 1; }
.hint kbd {
  display: inline-block;
  background-color: var(--ui-bg-up) !important;
  color: var(--ui-text) !important;
  padding: 2px 6px !important;
  border-radius: 0 !important;
  border: 0 !important;
  font-family: var(--ui-font-pixel) !important;
  font-size: 10px !important;
  margin: 0 2px !important;
  box-shadow:
    inset  1px  1px 0 var(--ui-bevel-light),
    inset -1px -1px 0 var(--ui-bevel-dark);
}

/* ---- Damage flash + vignette — re-tint to our danger color */
.damage-flash {
  background: radial-gradient(ellipse at center,
    rgba(232, 74, 74, 0) 55%,
    rgba(180, 30, 30, 0.55) 100%) !important;
}
.damage-vignette {
  background: radial-gradient(ellipse at center,
    rgba(232, 74, 74, 0.0) 35%,
    rgba(232, 74, 74, 0.18) 70%,
    rgba(160, 24, 24, 0.55) 105%) !important;
}

/* ---- Coords (bottom-left debug) — restyle to match HUD ----- */
#coords {
  background-color: var(--ui-bg-deep) !important;
  color: var(--ui-text-dim) !important;
  font-family: var(--ui-font-pixel) !important;
  padding: 4px 8px !important;
  border-radius: 0 !important;
  font-size: 10px !important;
  letter-spacing: 0.04em !important;
  text-shadow: 1px 1px 0 var(--ui-text-shadow);
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-light),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-dark);
}

/* ---- Underwater tint — keep blue, slightly cooler -------- */
#underwater-tint {
  background: rgba(54, 102, 170, 0.55) !important;
}

/* ---- Loading screen — restyle to pixel chrome ------------- */
#loading {
  background-color: var(--ui-bg-deep) !important;
  color: var(--ui-text) !important;
  font-family: var(--ui-font-pixel) !important;
}
.loading-inner h2 {
  font-family: var(--ui-font-pixel) !important;
  color: var(--ui-accent) !important;
  text-shadow: var(--pixel) var(--pixel) 0 var(--ui-text-shadow);
  letter-spacing: 0.18em !important;
}
.loading-bar {
  background-color: var(--ui-bg-mid) !important;
  border-radius: 0 !important;
  height: 12px !important;
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-dark),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-light);
}
.loading-fill {
  background-color: var(--ui-accent) !important;
  box-shadow: inset 0 var(--pixel) 0 var(--ui-accent-hi);
}
.loading-inner p {
  font-family: var(--ui-font-pixel) !important;
  color: var(--ui-text-dim) !important;
  letter-spacing: 0.12em !important;
}

/* ---- Mobile HUD shift: hotbar gets bigger so health rows
        need to sit a touch higher to clear the new chrome. */
@media (max-width: 720px) {
  .hud-hearts, .hud-hunger { bottom: 76px; }
  .hud-air { bottom: 100px; }
  #xp-bar { bottom: 64px; }
  #hint { bottom: 144px; }
}

/* ============   END PIXEL UI WAVE 1   ====================== */


/* ============================================================
   ============================================================
   ============   PIXEL UI REWRITE — WAVE 2   =================
   ============   (Inventory: grid + slots + search + tabs)
   ============================================================
   Strategy: defeat the inventory.png-overlay layout from the
   previous "authentic" pass. Everything gets re-anchored
   on a clean flex/grid using our pixel theme tokens. All
   selectors stay the same so menu.js's querySelectors still
   resolve (.inv-slot[data-slot-type=...], .tab, .view-tab,
   .creative-grid, .hotbar-row, .main-grid, etc.).
   ============================================================ */

/* ---- Backdrop overlay --------------------------------------- */
.menu-overlay {
  background-color: rgba(10, 11, 18, 0.62) !important;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}
.menu-overlay.world-visible {
  background-color: rgba(10, 11, 18, 0.32) !important;
}

/* ---- The inventory panel — kill wood gradient, paint pixel chrome. */
#inventory-menu .menu-panel.inv-panel,
#inventory-menu .menu-panel.inv-panel.inv-with-recipe-book {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 8px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-width: 0 !important;
  color: var(--ui-text) !important;
  font-family: var(--ui-font-pixel) !important;
}

/* ---- Main column — replaces the inventory.png-textured frame. */
#inventory-menu .inv-main-column {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: auto !important;
  height: auto !important;
  background: var(--ui-bg-mid) !important;
  background-image: none !important;
  padding: 14px !important;
  border: 0 !important;
  color: var(--ui-text) !important;
  font-family: var(--ui-font-pixel) !important;
  image-rendering: pixelated;
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-light),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-dark) !important;
}

/* Bring back the title bar + section labels (the old override had
   `display:none` because they were baked into the sprite). */
#inventory-menu .inv-main-column .inv-titlebar {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 4px 0;
  padding: 0;
}
#inventory-menu .inv-main-column .inv-titlebar h2 {
  margin: 0;
  font-family: var(--ui-font-pixel);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ui-accent);
  text-shadow: var(--pixel) var(--pixel) 0 var(--ui-text-shadow);
}
#inventory-menu .inv-main-column .inv-label {
  display: block !important;
  font-family: var(--ui-font-pixel);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ui-text-dim);
  text-shadow: 1px 1px 0 var(--ui-text-shadow);
  margin: 8px 0 2px 0;
  padding: 0;
}

/* ---- The survival layout: switch from absolute-positioned
        slot grid back to natural flex/grid flow. -------------- */
#inventory-menu .inv-main-column .inv-survival {
  position: static !important;
  inset: auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px;
}
#inventory-menu .inv-main-column .inv-top-row {
  position: static !important;
  display: flex !important;
  flex-direction: row;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 4px;
}
#inventory-menu .inv-main-column .craft-region,
#inventory-menu .inv-main-column .armor-region {
  position: static !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  padding: 8px !important;
  background: var(--ui-bg-deep);
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-dark),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-light);
}
#inventory-menu .inv-main-column .craft-region { flex: 1; }
#inventory-menu .inv-main-column .inv-spacer { display: block !important; flex: 0; }

#inventory-menu .inv-main-column .craft-row {
  display: flex !important;
  align-items: center;
  gap: 12px;
  position: static !important;
}
#inventory-menu .inv-main-column .craft-grid {
  position: static !important;
  left: auto !important;
  top: auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, var(--slot-size)) !important;
  grid-template-rows:    repeat(2, var(--slot-size)) !important;
  gap: var(--slot-gap) !important;
}
#inventory-menu .inv-main-column .craft-arrow {
  display: block !important;
  font-family: var(--ui-font-pixel);
  font-size: 18px;
  font-weight: bold;
  color: var(--ui-accent);
  padding: 0 4px;
  text-shadow: var(--pixel) var(--pixel) 0 var(--ui-text-shadow);
}
#inventory-menu .inv-main-column .craft-output {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: var(--slot-size) !important;
  height: var(--slot-size) !important;
}

#inventory-menu .inv-main-column .armor-col {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--slot-gap) !important;
}

#inventory-menu .inv-main-column .main-grid {
  position: static !important;
  left: auto !important;
  top: auto !important;
  display: grid !important;
  grid-template-columns: repeat(9, var(--slot-size)) !important;
  grid-template-rows:    repeat(3, var(--slot-size)) !important;
  gap: var(--slot-gap) !important;
  background: var(--ui-bg-deep);
  padding: var(--slot-gap);
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-dark),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-light);
}
#inventory-menu .inv-main-column .hotbar-row {
  position: static !important;
  left: auto !important;
  top: auto !important;
  display: grid !important;
  grid-template-columns: repeat(9, var(--slot-size)) !important;
  gap: var(--slot-gap) !important;
  margin: 4px 0 0 0 !important;
  background: var(--ui-bg-deep);
  padding: var(--slot-gap);
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-dark),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-light);
}

/* ---- The slot atom — replaces .inv-slot's grey bevel. ---- */
.inv-slot,
#inventory-menu .inv-main-column .inv-slot,
.craft3x3-frame .inv-slot,
.table-player-inv .inv-slot,
.furnace-player-inv .inv-slot {
  position: relative !important;
  width: var(--slot-size) !important;
  height: var(--slot-size) !important;
  background-color: var(--ui-bg-mid) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  image-rendering: pixelated;
  box-sizing: border-box;
  /* Sunken pocket — dark top-left, light bottom-right. */
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-dark),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-light) !important;
}
.inv-slot:hover,
#inventory-menu .inv-main-column .inv-slot:hover,
.craft3x3-frame .inv-slot:hover,
.table-player-inv .inv-slot:hover,
.furnace-player-inv .inv-slot:hover {
  background-color: var(--ui-bg-up) !important;
  border: 0 !important;
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-dark),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-light),
    inset 0 0 0 var(--bevel) rgba(240, 192, 96, 0.45) !important;
}
.inv-slot.item-tool   { background-color: var(--ui-bg-mid) !important; }
.inv-slot.item-armor  { background-color: var(--ui-bg-mid) !important; }

/* The 4 armor slot icons get a subtle tinted aura behind their item
   (so empty armor slots still hint at what goes in them). */
.armor-slot::before {
  content: "" !important;
  position: absolute;
  inset: 4px;
  border-radius: 0 !important;
  pointer-events: none;
  opacity: 0.25 !important;
}
.armor-slot[data-armor-index="0"]::before { background-color: rgba(154, 170, 200, 0.5) !important; background-image: none !important; }
.armor-slot[data-armor-index="1"]::before { background-color: rgba(220, 140, 90, 0.5) !important; background-image: none !important; }
.armor-slot[data-armor-index="2"]::before { background-color: rgba(220, 215, 170, 0.5) !important; background-image: none !important; }
.armor-slot[data-armor-index="3"]::before { background-color: rgba(160, 100, 60, 0.5) !important; background-image: none !important; }

/* Icon inside a slot — centered, sized at 30/44 of the slot. */
.inv-slot img,
#inventory-menu .inv-main-column .inv-slot img,
.craft3x3-frame .inv-slot img,
.table-player-inv .inv-slot img,
.furnace-player-inv .inv-slot img {
  width: 32px !important;
  height: 32px !important;
  position: absolute !important;
  left: 6px !important;
  top: 6px !important;
  image-rendering: pixelated;
  pointer-events: none;
}
.inv-slot .count,
#inventory-menu .inv-main-column .inv-slot .count {
  position: absolute !important;
  right: 3px !important;
  bottom: 0 !important;
  color: var(--ui-text) !important;
  font-family: var(--ui-font-pixel) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-shadow:
     var(--pixel)  var(--pixel) 0 var(--ui-text-shadow),
     var(--pixel) 0            0 var(--ui-text-shadow),
     0            var(--pixel) 0 var(--ui-text-shadow) !important;
  pointer-events: none;
  letter-spacing: 0;
}

/* Item-name placeholder (used for tools/armor without a rendered icon). */
.inv-slot .item-placeholder,
.held-item .item-placeholder {
  color: var(--ui-accent) !important;
  font-size: 8px !important;
  font-weight: 700;
  font-family: var(--ui-font-pixel) !important;
  text-shadow: 1px 1px 0 var(--ui-text-shadow) !important;
  text-align: center;
  line-height: 1.1;
  padding: 2px;
  pointer-events: none;
}

/* Drag-target highlight on inventory slots while holding an item. */
.inv-slot.drop-target {
  background-color: var(--ui-bg-up) !important;
  box-shadow:
    inset 0 0 0 var(--bevel) var(--ui-accent),
    inset  var(--bevel)  var(--bevel) 0 var(--ui-accent-hi),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-accent-deep) !important;
}

/* Held-item ghost. */
.held-item {
  position: fixed !important;
  pointer-events: none !important;
  width: 36px !important;
  height: 36px !important;
  z-index: 9999;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  image-rendering: pixelated;
}
.held-item img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.held-item .count {
  position: absolute;
  right: -3px;
  bottom: -3px;
  color: var(--ui-text);
  font-family: var(--ui-font-pixel);
  font-size: 12px;
  font-weight: 700;
  text-shadow:
     var(--pixel)  var(--pixel) 0 var(--ui-text-shadow),
     var(--pixel) 0            0 var(--ui-text-shadow),
     0            var(--pixel) 0 var(--ui-text-shadow);
}

/* ---- View tabs (Survival / Creative) ----------------------- */
.inv-view-tabs {
  display: flex !important;
  gap: var(--pixel) !important;
}
.inv-view-tabs .view-tab {
  background-color: var(--ui-bg-up) !important;
  color: var(--ui-text-dim) !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  font-family: var(--ui-font-pixel) !important;
  font-size: 10px !important;
  padding: 6px 12px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  text-shadow: 1px 1px 0 var(--ui-text-shadow) !important;
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-light),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-dark) !important;
}
.inv-view-tabs .view-tab:hover { color: var(--ui-text) !important; }
.inv-view-tabs .view-tab.active {
  background-color: var(--ui-accent-deep) !important;
  color: var(--ui-text) !important;
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-accent-hi),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-dark) !important;
}

/* ---- Creative tabs + search row ---------------------------- */
.creative-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px 0;
}
.creative-search {
  flex: 1;
  background-color: var(--ui-bg-deep) !important;
  color: var(--ui-text) !important;
  font-family: var(--ui-font-pixel) !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  image-rendering: pixelated;
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-dark),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-light) !important;
}
.creative-search::placeholder {
  color: var(--ui-text-dim);
}
.creative-search:focus {
  background-color: var(--ui-bg-mid) !important;
  box-shadow:
    inset 0 0 0 var(--bevel) var(--ui-accent),
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-dark),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-light) !important;
}

.creative-tabs {
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--pixel) !important;
  margin-bottom: 8px !important;
}
.creative-tabs .tab {
  flex: 1;
  min-width: 80px;
  padding: 6px 8px !important;
  font-family: var(--ui-font-pixel) !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  background-color: var(--ui-bg-up) !important;
  color: var(--ui-text-dim) !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  cursor: pointer;
  text-shadow: 1px 1px 0 var(--ui-text-shadow) !important;
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-light),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-dark) !important;
}
.creative-tabs .tab:hover { color: var(--ui-text) !important; }
.creative-tabs .tab.active {
  background-color: var(--ui-accent-deep) !important;
  color: var(--ui-text) !important;
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-accent-hi),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-dark) !important;
}

/* ---- Creative grid + slot ---------------------------------- */
.creative-grid {
  display: grid !important;
  grid-template-columns: repeat(9, var(--slot-size)) !important;
  gap: var(--slot-gap) !important;
  max-height: 360px !important;
  overflow-y: auto !important;
  padding: var(--slot-gap) !important;
  background-color: var(--ui-bg-deep) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-dark),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-light) !important;
}
.creative-grid::-webkit-scrollbar { width: 10px; }
.creative-grid::-webkit-scrollbar-thumb { background: var(--ui-bg-up); border-radius: 0; }
.creative-grid::-webkit-scrollbar-track { background: var(--ui-bg-mid); }

.creative-grid .slot {
  width: var(--slot-size) !important;
  height: var(--slot-size) !important;
  background-color: var(--ui-bg-mid) !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  image-rendering: pixelated;
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-dark),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-light) !important;
}
.creative-grid .slot:hover {
  background-color: var(--ui-bg-up) !important;
  box-shadow:
    inset 0 0 0 var(--bevel) var(--ui-accent),
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-dark),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-light) !important;
}
.creative-grid .slot img {
  width: 32px !important;
  height: 32px !important;
  position: absolute;
  left: 6px;
  top: 6px;
  pointer-events: none;
  image-rendering: pixelated;
}

/* "No items match" empty state shown when the search clears the grid. */
.creative-empty {
  grid-column: 1 / -1;
  text-align: center;
  font-family: var(--ui-font-pixel);
  font-size: 10px;
  color: var(--ui-text-dim);
  padding: 28px 8px;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

/* Creative-tab H3 ("Hotbar") subheader. */
.inv-creative h3 {
  font-family: var(--ui-font-pixel) !important;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ui-text-dim) !important;
  text-shadow: 1px 1px 0 var(--ui-text-shadow);
  margin: 8px 0 4px 0 !important;
}
.inv-creative .hotbar-row {
  display: grid !important;
  grid-template-columns: repeat(9, var(--slot-size)) !important;
  gap: var(--slot-gap) !important;
  margin: 0 !important;
  background: var(--ui-bg-deep);
  padding: var(--slot-gap);
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-dark),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-light);
}
.inv-creative .hotbar-row .slot {
  width: var(--slot-size) !important;
  height: var(--slot-size) !important;
  background-color: var(--ui-bg-mid) !important;
  border: 0 !important;
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-dark),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-light) !important;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inv-creative .hotbar-row .slot.selected {
  background-color: var(--ui-bg-up) !important;
  box-shadow:
    inset 0 0 0 var(--bevel) var(--ui-accent),
    inset  var(--bevel)  var(--bevel) 0 var(--ui-accent-hi),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-accent-deep) !important;
}
.inv-creative .hotbar-row .slot img {
  width: 32px !important;
  height: 32px !important;
  position: absolute;
  left: 6px; top: 6px;
}
.inv-creative .hotbar-row .slot .count {
  position: absolute;
  right: 3px; bottom: 0;
  color: var(--ui-text);
  font-family: var(--ui-font-pixel);
  font-size: 11px;
  font-weight: 700;
  text-shadow:
     var(--pixel)  var(--pixel) 0 var(--ui-text-shadow),
     var(--pixel) 0            0 var(--ui-text-shadow),
     0            var(--pixel) 0 var(--ui-text-shadow);
}

/* ---- Recipe book panel — fold into the pixel theme. -------- */
#inventory-menu .menu-panel.inv-panel.inv-with-recipe-book > .recipe-book-host {
  align-self: stretch !important;
}
.recipe-book-body {
  background-color: var(--ui-bg-mid) !important;
  border: 0 !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  color: var(--ui-text) !important;
  font-family: var(--ui-font-pixel) !important;
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-light),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-dark),
    4px 4px 0 rgba(0, 0, 0, 0.4) !important;
}
.recipe-search-row {
  background-color: var(--ui-bg-deep) !important;
  border: 0 !important;
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-dark),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-light) !important;
  padding: 2px 4px !important;
}
.recipe-search {
  color: var(--ui-text) !important;
  font-family: var(--ui-font-pixel) !important;
}
.recipe-search::placeholder { color: var(--ui-text-dim) !important; }

.recipe-tab-btn {
  background-color: var(--ui-bg-up) !important;
  border: 0 !important;
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-light),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-dark) !important;
}
.recipe-tab-btn.active {
  background-color: var(--ui-accent-deep) !important;
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-dark),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-accent-hi) !important;
}
.recipe-tab-btn:hover { background-color: var(--ui-bg-up-hover) !important; }
.recipe-tab-btn.active:hover { background-color: var(--ui-accent) !important; }

.recipe-cell {
  background-color: var(--ui-bg-mid) !important;
  background-image: none !important;
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-dark),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-light) !important;
}
.recipe-cell.locked {
  background-color: var(--ui-bg-deep) !important;
  background-image: none !important;
  opacity: 0.55;
}
.recipe-cell:hover {
  background-color: var(--ui-bg-up) !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow:
    inset 0 0 0 var(--bevel) var(--ui-accent),
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-dark),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-light) !important;
}
.recipe-cell-count {
  font-family: var(--ui-font-pixel) !important;
  color: var(--ui-text) !important;
  text-shadow:
     var(--pixel)  var(--pixel) 0 var(--ui-text-shadow),
     var(--pixel) 0            0 var(--ui-text-shadow),
     0            var(--pixel) 0 var(--ui-text-shadow) !important;
}
.recipe-cell-empty {
  font-family: var(--ui-font-pixel) !important;
  color: var(--ui-text-dim) !important;
}
.recipe-page-label {
  font-family: var(--ui-font-pixel) !important;
  color: var(--ui-text) !important;
  text-shadow: 1px 1px 0 var(--ui-text-shadow);
}

.recipe-tooltip {
  background-color: var(--ui-bg-deep) !important;
  border: 0 !important;
  outline: 0 !important;
  color: var(--ui-text) !important;
  font-family: var(--ui-font-pixel) !important;
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-light),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-dark),
    2px 2px 0 rgba(0, 0, 0, 0.4) !important;
}
.recipe-tooltip-title {
  font-family: var(--ui-font-pixel) !important;
  color: var(--ui-accent) !important;
  text-shadow: 1px 1px 0 var(--ui-text-shadow) !important;
}
.recipe-tooltip-sub {
  font-family: var(--ui-font-pixel) !important;
  color: var(--ui-text-dim) !important;
}
.recipe-tooltip-ings {
  border-top: 1px solid var(--ui-divider) !important;
}
.recipe-tooltip-ing-count {
  font-family: var(--ui-font-pixel) !important;
  color: var(--ui-text) !important;
  text-shadow: 1px 1px 0 var(--ui-text-shadow) !important;
}

/* Ingredient highlight in the host crafting grid (pulsing gold). */
.inv-slot.rb-ingredient {
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow:
    inset 0 0 0 var(--bevel) var(--ui-accent),
    inset  var(--bevel)  var(--bevel) 0 var(--ui-accent-hi),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-accent-deep) !important;
  animation: rb-ingredient-pulse-pixel 0.9s ease-in-out infinite alternate !important;
}
@keyframes rb-ingredient-pulse-pixel {
  from { filter: brightness(1.0); }
  to   { filter: brightness(1.35) saturate(1.2); }
}

/* ---- Mobile shrink (keep the inv panel readable on small screens). */
@media (max-width: 720px) {
  :root { --slot-size: 36px; }
  #inventory-menu .inv-main-column .inv-top-row { flex-direction: column; gap: 10px; }
  .creative-grid { grid-template-columns: repeat(7, var(--slot-size)) !important; }
  #inventory-menu .menu-panel.inv-panel.inv-with-recipe-book {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

/* ============   END PIXEL UI WAVE 2   ====================== */


/* ============================================================
   ============================================================
   ============   PIXEL UI REWRITE — WAVE 3   =================
   ============   (Crafting table + Furnace containers)
   ============================================================
   Replaces the sprite-frame containers with proper layouts
   built on our pixel theme. Crafting table gets a 3×3 grid +
   result slot with a centered arrow; furnace gets input/fuel/
   output positioned around an animated flame + progress bar.
   ============================================================ */

/* ---- Crafting table panel (3×3) ---------------------------- */
.craft3x3-panel {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--ui-text) !important;
  font-family: var(--ui-font-pixel) !important;
}
.craft3x3-row {
  display: flex !important;
  flex-direction: row;
  align-items: flex-start;
  gap: 6px;
}
.craft3x3-frame {
  position: relative !important;
  width: auto !important;
  height: auto !important;
  background: var(--ui-bg-mid) !important;
  background-image: none !important;
  background-repeat: no-repeat;
  padding: 16px 18px 18px 18px;
  display: grid;
  grid-template-areas:
    "title  title  title"
    "grid   arrow  out"
    "grid   arrow  out";
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto;
  gap: 10px;
  align-items: center;
  justify-items: center;
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-light),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-dark) !important;
  image-rendering: pixelated;
}
.craft3x3-title {
  display: block !important;
  grid-area: title;
  font-family: var(--ui-font-pixel);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ui-accent) !important;
  text-shadow: var(--pixel) var(--pixel) 0 var(--ui-text-shadow);
  margin: 0 0 4px 0;
  align-self: start;
  justify-self: start;
}
.craft3x3-frame::after {
  /* The crafting-arrow between the grid and the result slot. */
  content: '\2192';
  grid-area: arrow;
  display: block;
  font-family: var(--ui-font-pixel);
  font-size: 24px;
  font-weight: bold;
  color: var(--ui-accent);
  text-shadow: var(--pixel) var(--pixel) 0 var(--ui-text-shadow);
  line-height: 1;
  align-self: center;
  justify-self: center;
}
.craft3x3-grid {
  position: static !important;
  left: auto !important;
  top: auto !important;
  grid-area: grid;
  display: grid !important;
  grid-template-columns: repeat(3, var(--slot-size)) !important;
  grid-template-rows:    repeat(3, var(--slot-size)) !important;
  gap: var(--slot-gap) !important;
  background-color: var(--ui-bg-deep);
  padding: var(--slot-gap);
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-dark),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-light);
}
.craft3x3-output {
  position: static !important;
  left: auto !important;
  top: auto !important;
  grid-area: out;
  width: var(--slot-size) !important;
  height: var(--slot-size) !important;
  /* Slight gold tint to mark "result slot" so it reads as the special one. */
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-dark),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-light),
    inset 0 0 0 var(--bevel) rgba(240, 192, 96, 0.35) !important;
}
.craft3x3-output:hover {
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-dark),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-light),
    inset 0 0 0 var(--bevel) var(--ui-accent) !important;
}

/* ---- Player inventory strip (under crafting / furnace) ----- */
.table-player-inv,
.furnace-player-inv {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  align-items: stretch !important;
  background: var(--ui-bg-mid) !important;
  border: 0 !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  padding: 12px 14px !important;
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-light),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-dark) !important;
}
.table-player-inv .inv-label,
.furnace-player-inv .inv-label {
  display: block !important;
  font-family: var(--ui-font-pixel) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ui-text-dim) !important;
  text-shadow: 1px 1px 0 var(--ui-text-shadow) !important;
  margin: 0 0 2px 0 !important;
  align-self: flex-start !important;
}
.table-player-inv .main-grid,
.furnace-player-inv .main-grid {
  display: grid !important;
  grid-template-columns: repeat(9, var(--slot-size)) !important;
  grid-template-rows:    repeat(3, var(--slot-size)) !important;
  gap: var(--slot-gap) !important;
  background: var(--ui-bg-deep);
  padding: var(--slot-gap);
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-dark),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-light);
}
.table-player-inv .hotbar-row,
.furnace-player-inv .hotbar-row {
  display: grid !important;
  grid-template-columns: repeat(9, var(--slot-size)) !important;
  gap: var(--slot-gap) !important;
  margin-top: 4px !important;
  background: var(--ui-bg-deep);
  padding: var(--slot-gap);
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-dark),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-light);
}

/* ---- Furnace panel ---------------------------------------- */
.furnace-panel {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--ui-text) !important;
  font-family: var(--ui-font-pixel) !important;
}
.furnace-frame {
  position: relative !important;
  width: auto !important;
  height: auto !important;
  background: var(--ui-bg-mid) !important;
  background-image: none !important;
  background-repeat: no-repeat;
  padding: 16px 24px 18px 24px;
  display: grid;
  grid-template-areas:
    "title title title  title  title"
    "input arrow flame  arrow2 output"
    "fuel  arrow flame  arrow2 output";
  grid-template-columns:
    var(--slot-size) 28px 36px 28px var(--slot-size);
  grid-template-rows: auto var(--slot-size) var(--slot-size);
  column-gap: 6px;
  row-gap: var(--slot-gap);
  align-items: center;
  justify-items: center;
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-light),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-dark) !important;
  image-rendering: pixelated;
}
.furnace-title {
  display: block !important;
  grid-area: title;
  font-family: var(--ui-font-pixel);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ui-accent) !important;
  text-shadow: var(--pixel) var(--pixel) 0 var(--ui-text-shadow);
  margin: 0 0 4px 0;
  align-self: start;
  justify-self: start;
}
.furnace-frame::before {
  /* Vertical "arrow" / divider hinting at upflow from fuel to flame. */
  content: '';
  grid-area: arrow;
  display: block;
  width: 12px;
  height: 32px;
  background: linear-gradient(180deg,
    transparent 0%, transparent 40%,
    var(--ui-accent-deep) 40%, var(--ui-accent-deep) 50%,
    transparent 50%);
  align-self: center;
}
/* (no ::after on .furnace-frame — the arrow2 grid area is filled by
    the real .furnace-arrow element, which is the live progress bar.) */
/* Furnace slots — kill the absolute positioning, use grid areas. */
.furnace-slot {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: var(--slot-size) !important;
  height: var(--slot-size) !important;
  background-color: var(--ui-bg-mid) !important;
  border: 0 !important;
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-dark),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-light) !important;
}
.furnace-slot:hover {
  background-color: var(--ui-bg-up) !important;
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-dark),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-light),
    inset 0 0 0 var(--bevel) rgba(240, 192, 96, 0.45) !important;
}
.furnace-slot img {
  width: 32px !important;
  height: 32px !important;
  position: absolute !important;
  left: 6px !important;
  top: 6px !important;
  image-rendering: pixelated;
}
.furnace-slot .count {
  position: absolute !important;
  right: 3px !important;
  bottom: 0 !important;
  color: var(--ui-text) !important;
  font-family: var(--ui-font-pixel) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-shadow:
     var(--pixel)  var(--pixel) 0 var(--ui-text-shadow),
     var(--pixel) 0            0 var(--ui-text-shadow),
     0            var(--pixel) 0 var(--ui-text-shadow) !important;
}
.furnace-slot-input  { grid-area: input;  }
.furnace-slot-fuel   { grid-area: fuel;
  /* Fuel slot gets a warm tinted underglow so the player knows what
     goes here. Pure styling — no behavioral change. */
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-dark),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-light),
    inset 0 0 0 var(--bevel) rgba(232, 130, 60, 0.35) !important;
}
.furnace-slot-fuel:hover {
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-dark),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-light),
    inset 0 0 0 var(--bevel) rgba(232, 130, 60, 0.95) !important;
}
.furnace-slot-output { grid-area: output;
  /* Output slot gold tinted (matches the crafting result slot). */
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-dark),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-light),
    inset 0 0 0 var(--bevel) rgba(240, 192, 96, 0.35) !important;
}
.furnace-slot-output:hover {
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-dark),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-light),
    inset 0 0 0 var(--bevel) var(--ui-accent) !important;
}

/* ---- Furnace animations: flame + progress arrow ----------- */
.furnace-flame {
  position: static !important;
  left: auto !important;
  top: auto !important;
  grid-area: flame;
  width: 32px !important;
  height: 32px !important;
  background-image: none !important;
  /* Procedural chunky pixel flame: a stack of horizontal bands of
     decreasing width. Each band is its own linear-gradient layer
     so it stays sharp under image-rendering:pixelated. */
  background:
    linear-gradient(180deg, transparent 0%, transparent 18%,
                            #b04020   18%, #b04020   28%, transparent 28%) center / 24px 100% no-repeat,
    linear-gradient(180deg, transparent 0%, transparent 28%,
                            #e88030   28%, #e88030   50%, transparent 50%) center / 20px 100% no-repeat,
    linear-gradient(180deg, transparent 0%, transparent 50%,
                            #f0c060   50%, #f0c060   75%, transparent 75%) center / 14px 100% no-repeat,
    linear-gradient(180deg, transparent 0%, transparent 75%,
                            #ffe28a   75%, #ffe28a   95%, transparent 95%) center / 8px  100% no-repeat;
  background-color: transparent;
  image-rendering: pixelated;
  opacity: 0;
  pointer-events: none;
  transform-origin: center bottom;
  transition: opacity 0.18s;
}
.furnace-flame.burning {
  opacity: calc(0.5 + 0.5 * var(--burn-frac, 1));
  animation: furnace-pixel-flicker 0.22s steps(2) infinite alternate;
}
@keyframes furnace-pixel-flicker {
  from { transform: scale(1.0, calc(0.85 + var(--burn-frac, 1) * 0.20)); }
  to   { transform: scale(1.08, calc(0.95 + var(--burn-frac, 1) * 0.18)); }
}
/* Override the horizontal arrow with a real progress bar that fills
   left-to-right as the smelt runs. The sprite is replaced by a
   gold bar segment behind ::after's chevron. */
.furnace-arrow {
  position: static !important;
  left: auto !important;
  top: auto !important;
  grid-area: arrow2;
  width: 28px !important;
  height: 8px !important;
  align-self: center;
  overflow: hidden;
  background: var(--ui-bg-deep);
  background-image: none !important;
  box-shadow:
    inset 1px 1px 0 var(--ui-bevel-dark),
    inset -1px -1px 0 var(--ui-bevel-light);
}
.furnace-arrow-fill {
  background-image: none !important;
  background-color: var(--ui-accent);
  box-shadow: inset 0 1px 0 var(--ui-accent-hi);
}
/* Re-purpose ::after to draw a small "→" GLYPH below the progress bar.
   We disable the previous text arrow since it now lives inline as the
   ::after of the frame above (arrow2 area). */

/* ============   END PIXEL UI WAVE 3   ====================== */


/* ============================================================
   ============================================================
   ============   PIXEL UI REWRITE — WAVE 4   =================
   ============   (Title / Pause / Settings / Death)
   ============================================================
   Replaces the classic slab buttons with our pixel-bevel
   buttons, restyles the title-screen background (no more dirt
   tile), and adds a proper death screen.
   ============================================================ */

/* ---- Title screen background -------------------------------- */
#overlay,
#overlay.bx-title-overlay {
  background-color: var(--ui-bg-deep) !important;
  background-image:
    /* dim radial vignette */
    radial-gradient(ellipse at center, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 100%),
    /* horizontal pixel scanlines */
    repeating-linear-gradient(0deg,
      transparent 0px,
      transparent 3px,
      rgba(0,0,0,0.18) 3px,
      rgba(0,0,0,0.18) 4px),
    /* subtle starfield of darker dots */
    repeating-radial-gradient(circle at 17% 23%, rgba(0,0,0,0.4) 0px 1px, transparent 1px 60px),
    repeating-radial-gradient(circle at 73% 81%, rgba(0,0,0,0.4) 0px 1px, transparent 1px 80px),
    repeating-radial-gradient(circle at 47% 67%, rgba(0,0,0,0.3) 0px 1px, transparent 1px 70px) !important;
  background-size:
    100% 100%,
    100% 4px,
    100% 100%,
    100% 100%,
    100% 100% !important;
  background-repeat: no-repeat, repeat, repeat, repeat, repeat !important;
  image-rendering: pixelated;
}

/* ---- Title card --------------------------------------------- */
#title-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 32px;
  background-color: var(--ui-bg-mid);
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-light),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-dark);
  image-rendering: pixelated;
  /* Outer hard pixel drop shadow. */
  filter: drop-shadow(4px 4px 0 rgba(0, 0, 0, 0.5));
}

/* ---- Title logo --------------------------------------------- */
.title-logo {
  position: relative;
  display: inline-block;
  margin-bottom: 6px;
}
.title-logo h1 {
  font-family: var(--ui-font-pixel) !important;
  font-size: 78px !important;
  letter-spacing: 0.20em !important;
  margin: 0 !important;
  font-weight: 900 !important;
  color: var(--ui-accent) !important;
  -webkit-text-stroke: 0 !important;
  text-shadow:
    var(--pixel)  var(--pixel) 0 var(--ui-accent-deep),
    calc(2 * var(--pixel))  calc(2 * var(--pixel)) 0 var(--ui-text-shadow),
    calc(3 * var(--pixel))  calc(3 * var(--pixel)) 0 var(--ui-text-shadow) !important;
  transform: none !important;
  display: inline-block;
  line-height: 1 !important;
}
.splash {
  position: absolute;
  right: -36px;
  top: 28%;
  font-family: var(--ui-font-pixel) !important;
  font-size: 14px !important;
  color: var(--ui-accent-hi) !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  transform: rotate(-12deg);
  text-shadow:
    var(--pixel) var(--pixel) 0 var(--ui-text-shadow) !important;
  white-space: nowrap;
  pointer-events: none;
  animation: splash-pulse-pixel 1.0s steps(2) infinite alternate;
}
@keyframes splash-pulse-pixel {
  from { transform: rotate(-12deg) scale(1.00); }
  to   { transform: rotate(-12deg) scale(1.08); }
}

/* ---- Title-screen menu buttons ----------------------------- */
.menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}

/* The shared .bx-btn used on title + pause + settings — re-skinned
   into our pixel-bevel theme. We KEEP the class name so menu.js +
   index.html selectors don't have to change. */
.bx-btn {
  display: block !important;
  min-width: 280px !important;
  padding: 12px 24px !important;
  background-color: var(--ui-bg-up) !important;
  background-image: none !important;
  color: var(--ui-text) !important;
  font-family: var(--ui-font-pixel) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.10em !important;
  border: 0 !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  border-radius: 0 !important;
  text-shadow: var(--pixel) var(--pixel) 0 var(--ui-text-shadow) !important;
  cursor: pointer;
  image-rendering: pixelated;
  transition: none !important;
  /* Signature 4-color bevel — light TL, dark BR. */
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-light),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-dark) !important;
}
.bx-btn:hover:not(.disabled):not(:disabled) {
  background-color: var(--ui-bg-up-hover) !important;
  color: var(--ui-accent-hi) !important;
  background-image: none !important;
}
.bx-btn:active:not(.disabled):not(:disabled) {
  transform: none !important;
  background-color: var(--ui-bg-mid) !important;
  /* Inverted bevel — looks pressed. */
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-dark),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-light) !important;
}
.bx-btn.disabled, .bx-btn:disabled {
  cursor: not-allowed !important;
  filter: grayscale(0.7);
  opacity: 0.55;
  color: var(--ui-text-dim) !important;
  text-shadow: 1px 1px 0 var(--ui-text-shadow) !important;
}
.bx-btn.disabled:hover::after, .bx-btn:disabled:hover::after {
  content: '(coming soon)';
  display: block;
  font-family: var(--ui-font-pixel);
  font-size: 9px;
  margin-top: 4px;
  color: var(--ui-accent-deep);
  letter-spacing: 0.08em;
  text-shadow: 1px 1px 0 var(--ui-text-shadow);
}
.bx-btn.narrow { min-width: 152px !important; padding: 10px 16px !important; font-size: 12px !important; }
.bx-btn.small  { min-width: 200px !important; padding: 8px 16px !important;  font-size: 12px !important; }
.bx-btn.half   { min-width: 138px !important; padding: 10px 14px !important; font-size: 12px !important; }

/* ---- Title-screen footer ----------------------------------- */
.title-footer {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 480px;
  margin-top: 12px;
  padding: 0;
  font-family: var(--ui-font-pixel) !important;
  font-size: 10px !important;
  color: var(--ui-text-dim) !important;
  letter-spacing: 0.06em !important;
  text-shadow: 1px 1px 0 var(--ui-text-shadow) !important;
}
.title-footer .footer-left  { text-align: left; }
.title-footer .footer-right { text-align: right; }

/* ---- Pause / Game Menu ------------------------------------- */
.pause-panel {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-width: 0 !important;
  text-align: center;
  color: var(--ui-text) !important;
  font-family: var(--ui-font-pixel) !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.pause-panel .game-menu-title,
.pause-panel h2 {
  font-family: var(--ui-font-pixel) !important;
  font-size: 28px !important;
  letter-spacing: 0.14em !important;
  margin: 0 0 12px !important;
  color: var(--ui-accent) !important;
  text-shadow:
    var(--pixel)  var(--pixel) 0 var(--ui-text-shadow),
    calc(2 * var(--pixel))  calc(2 * var(--pixel)) 0 rgba(0, 0, 0, 0.5) !important;
}
.pause-panel .menu-buttons { gap: 6px; align-items: center; }
.game-menu-row {
  display: flex;
  gap: 6px;
  justify-content: center;
}

/* ---- Settings panel ---------------------------------------- */
#settings-menu .menu-panel,
.settings-panel {
  width: 580px !important;
  max-width: 92vw !important;
  max-height: 86vh !important;
  background-color: var(--ui-bg-mid) !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 24px 28px !important;
  color: var(--ui-text) !important;
  font-family: var(--ui-font-pixel) !important;
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-light),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-dark),
    4px 4px 0 rgba(0, 0, 0, 0.5) !important;
}
#settings-menu .menu-panel h2,
.settings-panel h2 {
  font-family: var(--ui-font-pixel) !important;
  font-size: 20px !important;
  letter-spacing: 0.14em !important;
  text-align: center !important;
  color: var(--ui-accent) !important;
  text-shadow: var(--pixel) var(--pixel) 0 var(--ui-text-shadow) !important;
  margin: 0 0 20px !important;
}

#settings-menu .menu-panel label {
  display: flex !important;
  align-items: center;
  gap: 12px;
  font-family: var(--ui-font-pixel) !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  color: var(--ui-text) !important;
  margin: 6px 0 !important;
  padding: 6px 10px !important;
  background: var(--ui-bg-deep);
  text-shadow: 1px 1px 0 var(--ui-text-shadow);
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-dark),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-light);
}
/* Range slider: chunky pixel thumb on a recessed track. */
#settings-menu input[type="range"],
.settings-panel input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 12px;
  background-color: var(--ui-bg-mid);
  background-image: none;
  border: 0;
  border-radius: 0;
  outline: 0;
  margin: 0 6px;
  padding: 0;
  cursor: pointer;
  image-rendering: pixelated;
  box-shadow:
    inset 1px 1px 0 var(--ui-bevel-dark),
    inset -1px -1px 0 var(--ui-bevel-light);
}
#settings-menu input[type="range"]::-webkit-slider-thumb,
.settings-panel input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 18px;
  background-color: var(--ui-accent);
  border: 0;
  border-radius: 0;
  cursor: pointer;
  box-shadow:
    inset  1px  1px 0 var(--ui-accent-hi),
    inset -1px -1px 0 var(--ui-accent-deep),
    1px 1px 0 var(--ui-text-shadow);
}
#settings-menu input[type="range"]::-moz-range-thumb,
.settings-panel input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 18px;
  background-color: var(--ui-accent);
  border: 0;
  border-radius: 0;
  cursor: pointer;
  box-shadow:
    inset  1px  1px 0 var(--ui-accent-hi),
    inset -1px -1px 0 var(--ui-accent-deep),
    1px 1px 0 var(--ui-text-shadow);
}
#settings-menu input[type="range"]::-moz-range-track,
.settings-panel input[type="range"]::-moz-range-track {
  background-color: var(--ui-bg-mid);
  height: 12px;
  border: 0;
}

/* Checkbox: chunky pixel toggle. */
#settings-menu input[type="checkbox"],
.settings-panel input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background-color: var(--ui-bg-deep);
  border: 0;
  border-radius: 0;
  outline: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  image-rendering: pixelated;
  box-shadow:
    inset 1px 1px 0 var(--ui-bevel-dark),
    inset -1px -1px 0 var(--ui-bevel-light);
}
#settings-menu input[type="checkbox"]:checked,
.settings-panel input[type="checkbox"]:checked {
  background-color: var(--ui-accent);
  box-shadow:
    inset 1px 1px 0 var(--ui-accent-hi),
    inset -1px -1px 0 var(--ui-accent-deep);
}
#settings-menu input[type="checkbox"]:checked::after,
.settings-panel input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 8px;
  width: 4px;
  height: 4px;
  background-color: var(--ui-bg-deep);
  box-shadow:
    4px -4px 0 var(--ui-bg-deep),
    -2px -2px 0 var(--ui-bg-deep);
}

/* Settings "Back" button picks up .bx-btn or wins through this rule. */
#settings-back {
  appearance: none;
  background-color: var(--ui-bg-up) !important;
  color: var(--ui-text) !important;
  font-family: var(--ui-font-pixel) !important;
  font-size: 13px !important;
  letter-spacing: 0.1em !important;
  padding: 10px 28px !important;
  margin: 14px auto 0 !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  cursor: pointer !important;
  text-shadow: var(--pixel) var(--pixel) 0 var(--ui-text-shadow) !important;
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-light),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-dark) !important;
}
#settings-back:hover {
  background-color: var(--ui-bg-up-hover) !important;
  color: var(--ui-accent-hi) !important;
}
#settings-back:active {
  background-color: var(--ui-bg-mid) !important;
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-dark),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-light) !important;
}

/* Value readouts (e.g. "73") — small monospace tag inside settings rows. */
#settings-menu .menu-panel label span,
.settings-panel label span {
  font-family: var(--ui-font-pixel);
  font-size: 11px;
  color: var(--ui-accent);
  text-shadow: 1px 1px 0 var(--ui-text-shadow);
  min-width: 36px;
  text-align: right;
}

/* ---- Death overlay ---------------------------------------- */
.death-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: rgba(60, 8, 8, 0.55);
  /* Pulsing dark vignette to drive the "you died" mood. */
  background-image: radial-gradient(ellipse at center,
    rgba(60, 8, 8, 0) 0%,
    rgba(60, 8, 8, 0) 30%,
    rgba(20, 4, 4, 0.85) 100%);
  pointer-events: none;
  font-family: var(--ui-font-pixel);
}
.death-overlay.visible {
  display: flex;
  pointer-events: auto;
  animation: death-fade-in 0.3s steps(3) both;
}
@keyframes death-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.death-panel {
  background-color: var(--ui-bg-deep);
  padding: 32px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  image-rendering: pixelated;
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-danger),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-danger-deep),
    6px 6px 0 rgba(0, 0, 0, 0.6);
}
.death-title {
  font-family: var(--ui-font-pixel);
  font-size: 56px;
  letter-spacing: 0.18em;
  margin: 0;
  color: var(--ui-danger);
  text-shadow:
    var(--pixel) var(--pixel) 0 var(--ui-danger-deep),
    calc(2 * var(--pixel)) calc(2 * var(--pixel)) 0 #000,
    calc(3 * var(--pixel)) calc(3 * var(--pixel)) 0 #000;
  line-height: 1;
  animation: death-title-shake 1.2s steps(3) infinite alternate;
}
@keyframes death-title-shake {
  from { transform: translateX(-1px); }
  to   { transform: translateX( 1px); }
}
.death-sub {
  font-family: var(--ui-font-pixel);
  font-size: 11px;
  margin: 0;
  color: var(--ui-text-dim);
  letter-spacing: 0.06em;
  text-shadow: 1px 1px 0 var(--ui-text-shadow);
}
.death-panel .ui-btn {
  font-size: 13px;
  padding: 10px 24px;
  letter-spacing: 0.08em;
  margin-top: 6px;
}

/* ---- Quit overlay ("thanks for playing") ------------------- */
#quit-overlay {
  background-color: var(--ui-bg-deep) !important;
  color: var(--ui-text) !important;
  font-family: var(--ui-font-pixel) !important;
}
#quit-overlay h2 {
  font-family: var(--ui-font-pixel) !important;
  font-size: 24px !important;
  letter-spacing: 0.16em !important;
  color: var(--ui-accent) !important;
  text-shadow: var(--pixel) var(--pixel) 0 var(--ui-text-shadow) !important;
}
#quit-overlay p {
  font-family: var(--ui-font-pixel) !important;
  font-size: 10px !important;
  color: var(--ui-text-dim) !important;
  letter-spacing: 0.08em !important;
}

/* ---- Mobile menu shrinks ---------------------------------- */
@media (max-width: 720px) {
  .title-logo h1 { font-size: 48px !important; letter-spacing: 0.16em !important; }
  .splash { font-size: 11px !important; right: -14px; }
  .bx-btn { min-width: 240px !important; font-size: 12px !important; padding: 10px 20px !important; }
  .death-title { font-size: 36px; }
  .death-panel { padding: 24px 28px; }
}

/* ============================================================
   Chat / command bar (chat.js).
   Hidden by default; chat.js adds .visible to fade it in. Sits
   centered above the hotbar with the standard slate-bevel chrome
   so it reads as part of the same UI family.
   ============================================================ */
#chat-overlay {
  position: fixed;
  left: 50%;
  bottom: 64px;                  /* above the 44px hotbar + breathing room */
  transform: translateX(-50%);
  width: 40%;
  min-width: 320px;
  max-width: 720px;
  z-index: 30;                   /* above hotbar(20), below menu overlays */
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;          /* hidden default — clicks pass through */
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease-out, visibility 0s linear 200ms;
  font-family: var(--ui-font-pixel);
  color: var(--ui-text);
  image-rendering: pixelated;
}
#chat-overlay.visible {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transition: opacity 80ms ease-in, visibility 0s linear 0s;
}

/* Scrolling log — shows the most recent command results above the input.
   Translucent dark backplate matches the slate panel chrome. */
#chat-overlay .chat-log {
  width: 100%;
  max-height: 96px;              /* ~4 lines of pixel text */
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 10px;
  background-color: rgba(26, 28, 37, 0.55);  /* --ui-bg-deep @ 55% */
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-light),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-dark);
  font-size: 12px;
  line-height: 1.4;
  color: var(--ui-text);
  scrollbar-width: thin;
  scrollbar-color: var(--ui-bevel-light) transparent;
}
#chat-overlay .chat-log:empty { display: none; }
#chat-overlay .chat-line {
  white-space: pre-wrap;
  word-break: break-word;
  text-shadow: 1px 1px 0 var(--ui-text-shadow);
  transition: opacity 0.4s linear;
}

/* Input row — slash prompt + the text field. Standard bevel. */
#chat-overlay #chat-input-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background-color: rgba(26, 28, 37, 0.78);  /* --ui-bg-deep, darker */
  box-shadow:
    inset  var(--bevel)  var(--bevel) 0 var(--ui-bevel-light),
    inset calc(-1 * var(--bevel)) calc(-1 * var(--bevel)) 0 var(--ui-bevel-dark);
}
#chat-overlay .chat-prompt {
  color: var(--ui-accent);
  font-family: var(--ui-font-pixel);
  font-size: 14px;
  text-shadow: 1px 1px 0 var(--ui-text-shadow);
  flex: 0 0 auto;
}
#chat-overlay #chat-input {
  flex: 1 1 auto;
  background: transparent;
  border: 0;
  outline: 0;
  color: #ffffff;
  font-family: var(--ui-font-pixel);
  font-size: 14px;
  padding: 4px 2px;
  text-shadow: 1px 1px 0 var(--ui-text-shadow);
  image-rendering: pixelated;
  caret-color: var(--ui-accent);
  width: 100%;
  min-width: 0;                  /* lets flex shrink below content width */
}
#chat-overlay #chat-input::selection {
  background-color: var(--ui-accent-deep);
  color: var(--ui-text);
}

@media (max-width: 720px) {
  #chat-overlay { width: 80%; bottom: 96px; }
  #chat-overlay .chat-log { max-height: 72px; font-size: 11px; }
  #chat-overlay #chat-input { font-size: 13px; }
}

/* ============   END PIXEL UI WAVE 4   ====================== */