:root {
  /* Stone GUI palette - light inventory grays with dark pixel outlines */
  --bg: #b4b4b4;          /* page background */
  --bg-2: #c6c6c6;        /* raised panels (topbar, cards, buttons) */
  --bg-3: #8c8c8c;        /* recessed slots / inputs */
  --bg-light: #dcdcdc;    /* lighter-than-panel fill (search box, inline code chips) */
  --border: #232323;      /* dark pixel outline */
  --text: #232323;        /* dark text */
  --muted: #4d4d4d;       /* secondary text */
  --accent: #5aa23a;      /* MC green (panels / badges / selected) */
  --accent-dark: #34701f; /* darker green for link text on gray */
  --accent-ink: #0c2208;  /* dark ink for text on a green button */
  --gold: #8a5e00;        /* amber, darkened to read on light gray */
  --px: 3px;              /* pixel corner-cut size */
  --cut: polygon(var(--px) 0, calc(100% - var(--px)) 0, calc(100% - var(--px)) var(--px), 100% var(--px), 100% calc(100% - var(--px)), calc(100% - var(--px)) calc(100% - var(--px)), calc(100% - var(--px)) 100%, var(--px) 100%, var(--px) calc(100% - var(--px)), 0 calc(100% - var(--px)), 0 var(--px), var(--px) var(--px));
}

* { box-sizing: border-box; }
/* Pixel-perfect Minecraft scaling for all bitmap UI assets. Applies nearest-neighbor
   to anything inside the topbar, grids, recipe areas, and 3D model containers. */
img,
canvas,
.brand-logo,
.tile, .tile-icon, .tile-icon img,
.cell, .cell img, .cell .mini,
.craft-cell, .craft-cell img,
.craft-grid, .craft-result, .craft-arrow,
.recipe-grid, .recipe-arrow, .recipe-result .cell.big,
.mini-grid, .mini-cell,
.palette-item, .palette-item img,
.target-3d, .item-3d, .item-3d-large, .item-3d-large canvas,
.suggest-icon img,
.grid.small, .grid.small > .tile, .grid.small > .tile img {
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code {
  background: var(--bg-3);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.9em;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: var(--bg-2);
  border-bottom: 2px solid var(--border);
}
.brand { display: inline-flex; align-items: center; }
.brand:hover { text-decoration: none; }
.brand-logo {
  height: 48px;
  width: auto;
  image-rendering: pixelated;
  display: block;
}
.search-wrap {
  flex: 1;
  max-width: 480px;
  margin-left: auto;
  position: relative;
}
#search {
  width: 100%;
  padding: 8px 14px;
  background: var(--bg-3);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
}
#search:focus { outline: none; border-color: var(--accent); }

.search-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg-2);
  border: 1px solid var(--accent);
  border-radius: 6px;
  max-height: 60vh;
  overflow-y: auto;
  z-index: 50;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.suggest-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.suggest-item:last-child { border-bottom: none; }
.suggest-item:hover, .suggest-item.active { background: var(--bg-3); text-decoration: none; }
.suggest-icon {
  width: 64px; height: 64px;
  background: var(--bg-3);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.suggest-icon img { width: 100%; height: 100%; image-rendering: pixelated; object-fit: contain; }
.suggest-icon .fallback {
  font-family: "Courier New", monospace;
  font-weight: 700;
  font-size: 22px;
  color: var(--accent);
}
.suggest-name { font-size: 14px; }
.suggest-sub { font-size: 11px; color: var(--muted); font-family: "Courier New", monospace; }
.suggest-empty { padding: 16px; color: var(--muted); text-align: center; }

main { max-width: 1080px; margin: 0 auto; padding: 24px; }

.hero { margin-bottom: 24px; }
.hero h1 { margin: 0 0 8px; font-size: 28px; }
.hero p { color: var(--muted); margin: 0; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.grid.small {
  /* 9-slice frame: nineslice.png is 34×34 with 9px corners. Rendered at 6× → 54px borders.
     `round` repeat mode keeps tile counts whole; combined with image-rendering: pixelated
     it ensures every source pixel maps to an integer block of output pixels. Inner padding
     = scaled 1px margin from inner edge; gap=0 so cells touch. */
  grid-template-columns: repeat(auto-fill, 144px);
  gap: 0;
  padding: 6px;
  border: 54px solid transparent;
  border-image: url(/images/nineslice.png) 9 fill / 54px / 0 round;
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;
  justify-content: center;
}
.grid.small > .tile {
  background: url(/images/cell.png) center/100% 100% no-repeat;
  image-rendering: pixelated;
  border: none;
  border-radius: 0;
  padding: 8px 8px 12px;
  width: 144px;
  height: 144px;
  justify-content: center;
  position: relative;
}
.grid.small > .tile:hover {
  background-image: url(/images/cell.png), linear-gradient(rgba(108,192,74,0.45), rgba(108,192,74,0.45));
  background-size: 100% 100%, 100% 100%;
  background-blend-mode: normal, multiply;
  transform: none;
  border: none;
}
.grid.small > .tile .tile-icon {
  width: 76px;
  height: 76px;
  border: none;
  background: transparent;
  margin: 0 0 4px;
}
.grid.small > .tile .tile-name {
  font-size: 0;
  position: absolute;
  inset: auto 0 -28px 0;
  pointer-events: none;
}
.grid.small > .tile:hover .tile-name {
  font-size: 13px;
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 3px;
  padding: 3px 8px;
  z-index: 5;
  white-space: nowrap;
  display: inline-block;
  width: max-content;
  left: 50%;
  transform: translateX(-50%);
}
.grid.small > .tile .tile-sub {
  position: absolute;
  bottom: 4px;
  right: 6px;
  font-size: 12px;
  color: var(--gold);
  text-shadow: 1px 1px 0 var(--bg);
  margin: 0;
}

.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 8px;
  text-align: center;
  color: var(--text);
  transition: transform 0.08s, border-color 0.08s, background 0.08s;
}
.tile:hover {
  text-decoration: none;
  border-color: var(--accent);
  background: var(--bg-3);
  transform: translateY(-2px);
}
.tile-icon {
  width: 112px;
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-3);
  border: 2px solid var(--border);
  border-radius: 4px;
  margin-bottom: 10px;
  overflow: hidden;
}
.tile-icon img,
.big-icon img,
.cell img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  object-fit: contain;
}
.tile-icon .fallback,
.big-icon .fallback {
  font-family: "Courier New", monospace;
  font-weight: 700;
  font-size: 32px;
  color: var(--accent);
}
.big-icon .fallback { font-size: 48px; }
.tile-name {
  font-size: 13px;
  word-break: break-word;
}
.tile-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}

.crumbs { margin-bottom: 16px; }

.item-header {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 24px;
}
.big-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-3);
  border: 3px solid var(--accent);
  border-radius: 6px;
  flex-shrink: 0;
  overflow: hidden;
}
.item-header h1 { margin: 0; font-size: 32px; }
.muted { color: var(--muted); }
.muted code { color: var(--text); }

section { margin-bottom: 32px; }
section h2 {
  font-size: 20px;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.count-pill {
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 400;
}

.recipes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
  gap: 16px;
  align-items: start;
}
.recipe {
  background: var(--bg-2);
  border: 0;
  box-shadow: inset 0 0 0 2px var(--border),
              inset 4px 4px 0 0 rgba(255,255,255,.42),
              inset -4px -4px 0 0 rgba(0,0,0,.28);
  clip-path: var(--cut);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
}
.recipe-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.recipe-ingredients {
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.ingredient-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 10px;
}
.ingredient-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ingredient-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  transition: border-color 0.08s, background 0.08s;
}
.ingredient-chip:hover {
  text-decoration: none;
  border-color: var(--accent);
  background: var(--bg-3);
}
.ingredient-slot {
  width: 64px;
  height: 64px;
  background: url(/images/cell.png) center/100% 100% no-repeat;
  image-rendering: pixelated;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.ingredient-slot img {
  width: 48px;
  height: 48px;
  image-rendering: pixelated;
  object-fit: contain;
}
.ingredient-slot .mini {
  font-family: "Courier New", monospace;
  font-weight: 700;
  font-size: 16px;
  color: var(--accent);
}
.ingredient-count {
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}
.ingredient-name {
  font-weight: 600;
}
.recipe-grid {
  display: grid;
  grid-template-columns: repeat(3, 72px);
  grid-template-rows: repeat(3, 72px);
  gap: 0;
  width: 304px;
  height: 304px;
  padding: 45px 44px 43px 44px;
  background: url(/images/craftingtable.png) center/100% 100% no-repeat;
  image-rendering: pixelated;
  border: none;
  border-radius: 0;
}
.cell {
  background: transparent;
  border: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cell.empty { background: transparent; }
.cell.filled {
  cursor: pointer;
  transition: background 0.08s;
}
.cell.filled:hover { background: rgba(108, 192, 74, 0.25); text-decoration: none; }
.cell .mini {
  font-family: "Courier New", monospace;
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
}
.cell { overflow: hidden; padding: 4px; }
.recipe-result { position: relative; }
.recipe-arrow {
  width: 44px;
  height: 44px;
  flex: none;
  background: url(/images/arrow.png) center/contain no-repeat;
  image-rendering: pixelated;
  font-size: 0;
  color: transparent;
}
.recipe-result .cell.big {
  width: 96px;
  height: 96px;
  padding: 16px;
  background: url(/images/output.png) center/100% 100% no-repeat;
  image-rendering: pixelated;
}
.recipe-result .cell.big > * {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.recipe-result .cell.big .mini { font-size: 28px; }
.recipe-result .count {
  position: absolute;
  bottom: -4px;
  right: -4px;
  font-size: 16px;
  color: var(--gold);
  font-weight: 700;
  text-shadow: 1px 1px 0 var(--bg), -1px -1px 0 var(--bg), 1px -1px 0 var(--bg), -1px 1px 0 var(--bg);
  background: var(--bg-2);
  padding: 2px 8px;
  border-radius: 3px;
}
/* SHAPED/SHAPELESS pill + explainer sit in a header row at the TOP of the card (above the grid),
   so the note is clearly under the pill and never overlaps the recipe grid. */
.recipe-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.recipe-type-tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text);
  padding: 5px 12px;
}
.recipe-type-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
  text-align: right;
}
/* Dynamic SEO sentence above each recipe grid ("You can make a brown bed by using ...") */
.recipe-intro {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
}

.empty-state { text-align: center; padding: 60px 20px; }
.empty-state h1 { margin: 0 0 12px; }

footer {
  text-align: center;
  padding: 24px;
  color: var(--muted);
  font-size: 12px;
  border-top: 1px solid var(--border);
  margin-top: 40px;
}
footer a { color: var(--muted); }
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: center;
  margin-bottom: 14px;
}
.footer-nav a {
  color: var(--text, #e6e8eb);
  text-decoration: none;
  font-size: 13px;
}
.footer-nav a:hover { color: var(--accent, #6cc04a); text-decoration: underline; }

.tile.hidden { display: none; }

/* topbar nav link */
.nav-link {
  padding: 8px 14px;
  border-radius: 5px;
  font-weight: 600;
  color: var(--text);
  font-size: 14px;
}
.nav-link:hover { background: var(--bg-3); text-decoration: none; color: var(--accent); }
.nav-cta {
  background: var(--accent);
  color: var(--bg);
}
.nav-cta:hover { background: #7dd456; color: var(--bg); }

.hero-cta {
  display: inline-block;
  margin-top: 14px;
  padding: 12px 24px;
  background: var(--accent);
  color: var(--bg);
  font-weight: 700;
  font-size: 16px;
  border-radius: 6px;
  transition: background 0.1s, transform 0.1s;
}
.hero-cta:hover {
  background: #7dd456;
  text-decoration: none;
  transform: translateY(-1px);
}

/* ---------- quiz ---------- */
.quiz-root { max-width: 760px; margin: 0 auto; }
/* Quiz target line: just the name + accepted-variants, right above the crafting grid (the item icon
   is already shown in the result slot, so no separate "Craft this" header). */
.quiz-target-line { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0 0 14px; }
.quiz-target-line h2 { margin: 0 0 2px; font-size: 30px; text-align: center; }
.quiz-target-line .small { text-align: center; }
.card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 28px;
  text-align: center;
}
.card h1 { margin: 0 0 8px; }
.card h3 { margin: 24px 0 12px; font-weight: 500; color: var(--muted); }
.count-picker {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 24px;
}
.count-picker button {
  background: var(--bg-3);
  color: var(--text);
  border: 2px solid var(--border);
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  min-width: 60px;
}
.count-picker button:hover { border-color: var(--accent); }
.count-picker button.selected { background: var(--accent); color: var(--bg); border-color: var(--accent); }

.primary, .ghost, .button-link {
  background: var(--accent);
  color: var(--bg);
  border: none;
  padding: 10px 24px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: inline-block;
}
/* The `display: inline-block` above (and other component display rules) override the UA
   `[hidden] { display: none }`, which silently breaks the `hidden` attribute on toggled buttons
   (e.g. the quiz Next button showing on load). Force `hidden` to win. */
[hidden] { display: none !important; }
.primary:hover { background: #7dd456; }
.primary:disabled { opacity: 0.5; cursor: wait; }
.ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.ghost:hover { background: var(--bg-3); border-color: var(--accent); }
.button-link { text-decoration: none; }
.button-link:hover { text-decoration: none; background: var(--bg-3); }

/* Quiz top: question count + score + a progress bar */
.quiz-head {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 18px;
}
.quiz-progress-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 9px;
}
.quiz-progress-top strong { font-size: 18px; color: var(--text); }
.quiz-score strong { color: var(--accent-dark); }
.quiz-progress-bar {
  height: 10px;
  background: var(--bg-3);
  box-shadow: inset 0 0 0 2px var(--border);
  overflow: hidden;
}
.quiz-progress-fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width .25s ease;
}

.target {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-2);
  border: 2px solid var(--accent);
  border-radius: 8px;
  padding: 18px;
  margin-bottom: 18px;
}
.target-3d, .item-3d {
  background: transparent;
  border: none;
  flex-shrink: 0;
  position: relative;
  overflow: visible;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35));
}
.target-3d { width: 140px; height: 140px; }
.item-3d { width: 140px; height: 140px; }
.target-3d canvas, .item-3d canvas { display: block; image-rendering: pixelated; background: transparent; }
.target h2 { margin: 4px 0 6px; font-size: 26px; }
.target .small { font-size: 12px; }

.craft-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 16px;
}
.craft-row { display: flex; align-items: center; justify-content: center; gap: 18px; }
.craft-grid {
  display: grid;
  grid-template-columns: repeat(3, 104px);
  grid-template-rows: repeat(3, 104px);
  gap: 3px;
  width: 456px;
  height: 456px;
  flex: none;
  padding: 69px;
  background: url(/images/craftingtable.png) center/100% 100% no-repeat;
  image-rendering: pixelated;
  border: none;
  border-radius: 0;
}
.craft-cell {
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.08s, box-shadow 0.08s;
}
.craft-cell:hover { background: rgba(108, 192, 74, 0.20); }
.craft-cell.filled { cursor: grab; }
.craft-cell.dragging { opacity: 0.4; }
.craft-cell.drag-over {
  background: rgba(108, 192, 74, 0.30);
  box-shadow: 0 0 0 2px var(--accent) inset;
}
.craft-cell img { pointer-events: none; }
.palette-item { cursor: grab; }
.palette-item.dragging { opacity: 0.4; }
.palette-item img { pointer-events: none; }
.palette.palette-drop-clear {
  outline: 2px dashed #d65454;
  outline-offset: 6px;
  border-radius: 6px;
}
.craft-cell img { width: 100%; height: 100%; image-rendering: pixelated; object-fit: contain; }
.craft-cell .fallback {
  font-family: "Courier New", monospace;
  font-weight: 700;
  font-size: 13px;
  color: var(--accent);
}
.craft-arrow {
  width: 56px;
  height: 56px;
  flex: none;
  background: url(/images/arrow.png) center/contain no-repeat;
  image-rendering: pixelated;
  font-size: 0;
  color: transparent;
}
.craft-result {
  width: 144px;
  height: 144px;
  flex: none;
  padding: 22px;
  background: url(/images/output.png) center/100% 100% no-repeat;
  image-rendering: pixelated;
  display: flex;
  align-items: center;
  justify-content: center;
}
.craft-result img { width: 100%; height: 100%; image-rendering: pixelated; object-fit: contain; }
.craft-result .fallback { font-family: "Courier New", monospace; font-weight: 700; color: var(--accent); }

.palette-wrap {
  width: 100%;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.palette-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
  text-align: center;
}
.palette {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.palette-item {
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  padding: 10px 14px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--text);
  min-width: 120px;
  transition: border-color 0.08s, background 0.08s, transform 0.08s;
}
.palette-item:hover { border-color: var(--accent); background: var(--bg-3); }
.palette-item.selected {
  border-color: var(--accent);
  background: rgba(108, 192, 74, 0.18);
  transform: translateY(-2px);
  box-shadow: 0 0 0 2px var(--accent) inset;
}
.palette-item img { image-rendering: pixelated; }
.palette-item .fallback {
  font-family: "Courier New", monospace;
  font-weight: 700;
  font-size: 22px;
  color: var(--accent);
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-3);
  border-radius: 4px;
}
.palette-item img {
  width: 88px;
  height: 88px;
}
.palette-name {
  font-size: 13px;
  text-align: center;
  word-break: break-word;
  max-width: 110px;
}

/* Quiz bottom: all actions in one footer row (skip / clear / reveal / submit / next) */
.quiz-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 2px solid var(--border);
}
.quiz-actions .primary { min-width: 150px; padding: 11px 28px; font-size: 16px; }
.quiz-actions .ghost { padding: 11px 18px; }

.feedback {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 16px;
  text-align: center;
}
.feedback.correct { border-color: var(--accent); background: rgba(108, 192, 74, 0.1); }
.feedback.wrong { border-color: #d65454; background: rgba(214, 84, 84, 0.1); }
.feedback.revealed { border-color: var(--gold); background: rgba(245, 185, 66, 0.08); }
.reveal-recipe { margin-top: 12px; display: flex; justify-content: center; }

.mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 55px);
  grid-template-rows: repeat(3, 55px);
  gap: 0px;
  width: 228px;
  height: 228px;
  padding: 33px 30px 30px 33px;
  background: url(/images/craftingtable.png) center/100% 100% no-repeat;
  image-rendering: pixelated;
  border: none;
  border-radius: 0;
}
.mini-cell {
  background: transparent;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
}
.mini-cell img { width: 100%; height: 100%; image-rendering: pixelated; object-fit: contain; }
.mini-cell .fallback { font-family: "Courier New", monospace; font-weight: 700; font-size: 10px; color: var(--accent); }

#quiz-results .big-score {
  font-size: 48px;
  font-weight: 800;
  color: var(--accent);
  margin: 16px 0 24px;
}
.result-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 24px 0;
  text-align: left;
}
.result-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: 6px;
  padding: 10px 14px;
}
.result-row.ok { border-left-color: var(--accent); }
.result-row.fail { border-left-color: #d65454; }
.result-row.skipped { border-left-color: var(--muted); }
.result-icon {
  width: 80px;
  height: 80px;
  background: var(--bg-3);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.result-icon img { width: 100%; height: 100%; image-rendering: pixelated; object-fit: contain; }
.result-icon .fallback { font-family: "Courier New", monospace; font-weight: 700; color: var(--accent); }
.small { font-size: 12px; }

.picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 24px;
}
.picker {
  background: var(--bg-2);
  border: 2px solid var(--accent);
  border-radius: 8px;
  width: 100%;
  max-width: 720px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.picker header {
  display: flex;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid var(--border);
}
.picker header input {
  flex: 1;
  padding: 8px 14px;
  background: var(--bg-3);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
}
.picker header input:focus { outline: none; border-color: var(--accent); }
.picker-grid {
  overflow-y: auto;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}
.picker-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--text);
  font-size: 11px;
  text-align: center;
  word-break: break-word;
}
.picker-item:hover { border-color: var(--accent); background: var(--bg-3); }
.picker-item img { image-rendering: pixelated; }
.picker-item .fallback {
  font-family: "Courier New", monospace;
  font-weight: 700;
  font-size: 14px;
  color: var(--accent);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-3);
  border-radius: 3px;
}
.picker-more { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 12px; font-size: 13px; }

/* ---------- mob detail: stats / behavior / spawning / drops ---------- */
.mob-tags {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px;
}
.mob-tag {
  background: var(--bg-3); color: var(--muted);
  border: 1px solid var(--border);
  padding: 2px 10px; border-radius: 999px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.stat-cell {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 18px;
}
.stat-val {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin-top: 4px;
}
.behav-list {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 18px;
}
.behav-list .meta-label { display: inline-block; min-width: 120px; }
.inline-item {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  padding: 3px 10px 3px 3px;
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  margin-right: 4px;
}
.inline-item:hover { border-color: var(--accent); text-decoration: none; }
.inline-item-slot {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: url(/images/cell.png) center/100% 100% no-repeat;
  image-rendering: pixelated;
  flex-shrink: 0;
}
.inline-item-slot img { width: 22px; height: 22px; image-rendering: pixelated; }
.inline-item-slot .mini { font-family: "Courier New", monospace; font-size: 9px; font-weight: 700; color: var(--accent); }

.spawn-list { display: flex; flex-direction: column; gap: 10px; }
.spawn-condition {
  display: flex; flex-wrap: wrap; gap: 6px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}
.spawn-chip {
  background: var(--bg-3);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
}

.drop-condition {
  margin: 16px 0 8px;
  padding: 6px 12px;
  background: var(--bg-3);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  font-size: 13px;
  color: var(--muted);
}
.drop-condition strong { color: var(--gold); }
.drop-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.drop-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px 8px 8px;
  color: var(--text);
}
.drop-row:hover { border-color: var(--accent); text-decoration: none; }
.drop-slot {
  width: 56px; height: 56px;
  background: url(/images/cell.png) center/100% 100% no-repeat;
  image-rendering: pixelated;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.drop-slot img { width: 44px; height: 44px; image-rendering: pixelated; }
.drop-meta { font-size: 14px; }
.drop-note { color: var(--muted); font-size: 12px; }

/* ---------- mob viewer portrait ---------- */
.mob-portrait {
  width: 280px;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,0.45));
}
.mob-portrait img {
  width: 75%;
  height: 75%;
  object-fit: contain;
  image-rendering: pixelated;
}
.mob-portrait .fallback {
  font-family: "Courier New", monospace;
  font-weight: 700;
  font-size: 80px;
  color: var(--accent);
}
.mob-tile .tile-sub {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
}
.mob-mini-3d {
  position: relative;
  background: transparent;
  border: none;
  overflow: visible;
}
.mob-mini-3d .mob-mini-snapshot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}
.mob-mini-3d .mob-mini-fallback {
  position: relative;
  z-index: 1;
}

/* ---------- related items, grouped by shared ingredient ---------- */
.related-buckets {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.related-bucket-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.related-bucket-ingredient {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 14px 6px 6px;
  background: var(--bg-2);
  border: 2px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 16px;
  transition: border-color 0.08s, background 0.08s;
}
.related-bucket-ingredient:hover {
  text-decoration: none;
  border-color: var(--accent);
  background: var(--bg-3);
}
.related-bucket-ingredient .ingredient-slot {
  width: 56px;
  height: 56px;
}
.related-bucket-ingredient .ingredient-slot img {
  width: 40px;
  height: 40px;
}
.related-bucket-name strong {
  color: var(--accent);
}

/* ---------- universal item hover zoom ----------
   Sprites inside any slot/tile/chip scale up smoothly on hover. The slot frame
   stays put; the sprite grows out of it (parents that previously clipped have
   their overflow set to visible so the zoomed image is fully shown). */
.tile-icon img,
.cell img,
.craft-cell img,
.mini-cell img,
.palette-item img,
.ingredient-slot img,
.suggest-icon img,
.result-icon img,
.craft-result img,
.recipe-result .cell.big img,
.grid.small > .tile .tile-icon img {
  transition: transform 0.18s ease-out;
  transform-origin: center center;
  will-change: transform;
}

.tile:hover .tile-icon img,
.cell.filled:hover img,
.craft-cell:hover img,
.palette-item:hover img,
.ingredient-chip:hover .ingredient-slot img,
.suggest-item:hover .suggest-icon img,
.recipe-result:hover .cell.big img,
.craft-result:hover img {
  transform: scale(1.35);
}

/* lift the hovered tile to make room for the zoomed sprite without clipping */
.tile:hover .tile-icon,
.grid.small > .tile:hover .tile-icon { overflow: visible; }
.tile, .grid.small > .tile, .ingredient-chip, .palette-item { position: relative; }
.tile:hover, .grid.small > .tile:hover, .ingredient-chip:hover, .palette-item:hover { z-index: 4; }

/* ---------- item hero ---------- */
.item-hero {
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: var(--bg-2);
  border: 0;
  box-shadow: inset 0 0 0 2px var(--border),
              inset 4px 4px 0 0 rgba(255,255,255,.42),
              inset -4px -4px 0 0 rgba(0,0,0,.28);
  clip-path: var(--cut);
  padding: 28px;
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
}
/* Raised stone hero - the green tint/glow was removed by request. */
.item-hero::before { display: none; }
.item-hero-main {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 28px;
  align-items: start;
}
/* Item ID + Smelting nest INSIDE the info column (no separate cards), split by a divider. */
.item-hero-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  border-top: 2px solid var(--border);
  margin-top: 18px;
  padding-top: 18px;
}
.item-hero-facts.single { grid-template-columns: 1fr; }
.hero-fact h2 { margin-top: 0; margin-bottom: 8px; }
.hero-fact > p { margin-top: 0; }
.item-hero-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.item-3d-large {
  width: 320px;
  height: 320px;
  background: transparent;
  border: none;
  border-radius: 0;
  position: relative;
  overflow: visible;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,0.45));
}
.item-3d-large canvas {
  display: block;
  image-rendering: pixelated;
  background: transparent;
}
.item-hero-hint {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.item-hero-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  z-index: 1;
}
.item-hero-tag {
  display: inline-block;
  align-self: flex-start;
  background: var(--accent);
  color: var(--bg);
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
.item-hero-title {
  font-size: 44px;
  margin: 0;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.item-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 14px;
  color: var(--text);
  margin-top: 4px;
}
.item-hero-meta .meta-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  margin-bottom: 2px;
}
.item-hero-meta code {
  background: var(--bg-3);
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 13px;
}
@media (max-width: 720px) {
  .item-hero { padding: 20px; gap: 18px; }
  .item-hero-main { grid-template-columns: 1fr; }
  .item-hero-facts { grid-template-columns: 1fr; }
  /* 3D render ~60% bigger on mobile (was 320x280): fill the column + taller. */
  .item-3d-large { width: 100%; max-width: 520px; height: 448px; margin: 0 auto; }
  .item-hero-title { font-size: 32px; }
}

/* Phones: the How-to-craft card row (grid + arrow + result) is ~460px wide and overflows. Scale
   the whole row down with zoom so the tuned crafting-table cell alignment is preserved exactly,
   and force the cards into a single column. */
@media (max-width: 540px) {
  .recipes { grid-template-columns: 1fr; }
  .recipe-row { zoom: 0.62; }
}

/* ---------- data tables (enchantments, food) ---------- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  font-size: 14px;
}
.data-table th, .data-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.data-table thead th {
  background: var(--bg-3);
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--bg-3); }
.th-sortable { cursor: pointer; user-select: none; }
.th-sortable:hover { color: var(--accent); }
.th-sortable[data-sort-dir="asc"]::after { content: " ▲"; color: var(--accent); }
.th-sortable[data-sort-dir="desc"]::after { content: " ▼"; color: var(--accent); }
.ench-link, .data-table .ench-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text); text-decoration: none;
}
.ench-link:hover { color: var(--accent); }
.ench-link img { width: 24px; height: 24px; image-rendering: pixelated; }

/* ---------- chips & enchantment cards ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-link {
  display: inline-block; padding: 6px 12px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 999px;
  color: var(--text); text-decoration: none; font-size: 13px;
}
a.chip-link:hover { border-color: var(--accent); color: var(--accent); }
.ench-card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px;
}
.ench-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; background: var(--bg-2);
  border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); text-decoration: none;
}
.ench-card:hover { border-color: var(--accent); }
.ench-card .ingredient-slot img { width: 32px; height: 32px; image-rendering: pixelated; }
.ench-hero-icon img { width: 96px; height: 96px; image-rendering: pixelated; }

/* ---------- smelting + fuel (item page) ---------- */
.smelt-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 16px; }
.smelt-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 14px;
}
.smelt-method {
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--gold); border: 1px solid var(--border); border-radius: 4px;
  padding: 2px 8px; white-space: nowrap;
}
.smelt-io { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; flex: 1; }
.smelt-arrow { color: var(--muted); font-weight: 700; }
.fuel-badge {
  display: inline-block; background: rgba(245,185,66,0.12);
  border: 1px solid var(--gold); border-radius: 8px;
  padding: 8px 14px; margin-bottom: 12px; font-size: 14px;
}

/* ---------- home hub ---------- */
.hub-hero { text-align: center; padding: 40px 16px 28px; }
.hub-hero h1 { margin: 0 0 10px; font-size: 40px; letter-spacing: .5px; }
.hub-hero p { color: var(--muted); max-width: 640px; margin: 0 auto 18px; font-size: 16px; }
.hub-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px;
}
.hub-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 18px; color: var(--text); transition: border-color .1s, transform .08s, background .1s;
}
.hub-card:hover { text-decoration: none; border-color: var(--accent); background: var(--bg-3); transform: translateY(-2px); }
/* Custom hub icons are 36x36 - display at an exact 2x (72px) so every source pixel maps to a
   clean 2x2 block (pixel perfect). Avoid non-integer sizes like 56px, which scale unevenly. */
.hub-icon { width: 72px; height: 72px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.hub-icon img { width: 72px; height: 72px; image-rendering: pixelated; object-fit: contain; }
.hub-icon .fallback { font-family: "Courier New", monospace; font-weight: 700; color: var(--accent); }
.hub-card-body h2 { margin: 0 0 4px; font-size: 18px; }
.hub-card-body p { margin: 0; color: var(--muted); font-size: 13px; }

/* ---------- recipe browser facets (left sidebar) ---------- */
.recipes-layout { display: grid; grid-template-columns: 252px 1fr; gap: 20px; align-items: start; }
.recipe-controls {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 16px;
  position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto;
}
.facet-group { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.facet-label { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.facet-chips { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 760px) {
  .recipes-layout { grid-template-columns: 1fr; }
  .recipe-controls { position: static; max-height: none; }
}
.facet-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-3); color: var(--text); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 11px; font-size: 13px; cursor: pointer;
  font-family: inherit; line-height: 1.4;
}
.facet-chip:hover { border-color: var(--accent); }
.facet-chip.selected { background: var(--accent); border-color: var(--accent); color: #10260a; font-weight: 600; }
.facet-chip.selected .facet-count { color: #10260a; }
.facet-count { font-size: 11px; color: var(--muted); }
.color-swatch { width: 13px; height: 13px; border-radius: 3px; border: 1px solid rgba(0,0,0,.4); display: inline-block; }
.facet-bar { display: flex; flex-direction: column; align-items: stretch; gap: 8px; border-bottom: 1px solid var(--border); padding-bottom: 14px; }
.facet-sort { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.facet-clear {
  background: none; border: 1px solid var(--border); color: var(--muted);
  border-radius: 999px; padding: 4px 11px; font-size: 13px; cursor: pointer; font-family: inherit;
}
.facet-clear:hover { border-color: var(--accent); color: var(--accent); }
.facet-result { color: var(--muted); font-size: 13px; }
.facet-clear { align-self: flex-start; }

/* ============================================================================
   STONE GUI THEME - layered on top of the gray palette above. Square pixel
   corners (clip-path notch via --cut), hard 2px dark outlines + chunky bevels:
   panels/cards/buttons sit RAISED, slots/inputs are pressed IN like real
   inventory cells. Sprites keep image-rendering: pixelated (rules near top,
   left untouched). Site's own fonts kept (system sans + Courier New accents).
   ========================================================================== */

/* flat stone-gray page (no texture) - base body already uses var(--bg) */

/* links readable on light gray */
a { color: var(--accent-dark); }

/* square the rounded UI chrome */
.topbar, #search, .search-suggest, .suggest-icon, .hero-cta, .tile, .grid.small > .tile,
.tile-icon, .big-icon, .cell, .recipe-grid, .recipe-result .cell.big, .card, .count-picker button,
.primary, .ghost, .button-link, .nav-cta, .craft-grid, .craft-cell, .craft-result, .palette,
.palette-item, .mini-grid, .mini-cell, .picker, .picker header input, .stat-cell, .ingredient-chip,
.ingredient-slot, .inline-item-slot, .drop-slot, .result-icon, .mob-portrait, .data-table,
.item-hero, .item-hero-stage, .hub-card, .recipe-controls, .facet-chip, .facet-clear, .chip-link,
.mob-tag, .spawn-chip, .count-pill, .recipe-type-tag, .fuel-badge, .color-swatch, .item-hero-tag {
  border-radius: 0;
}

/* ---- RAISED stone (panels, cards, tiles, buttons, chips, grid frames) ---- */
.tile, .grid.small > .tile, .card, .hub-card, .recipe-controls, .stat-cell, .picker,
.mob-portrait, .recipe-grid, .craft-grid, .mini-grid, .palette, .data-table, .primary,
.button-link, .nav-cta, .hero-cta, .count-picker button, .facet-chip, .ingredient-chip,
.chip-link, .mob-tag, .spawn-chip, .count-pill, .recipe-type-tag, .fuel-badge {
  border: 0;
  background: var(--bg-2);
  box-shadow: inset 0 0 0 2px var(--border),
              inset 4px 4px 0 0 rgba(255,255,255,.42),
              inset -4px -4px 0 0 rgba(0,0,0,.28);
  clip-path: var(--cut);
}

/* ---- PRESSED-in slots / inputs (inventory cells) ---- */
#search, .picker header input, .tile-icon, .big-icon, .suggest-icon, .cell, .craft-cell,
.mini-cell, .ingredient-slot, .inline-item-slot, .drop-slot, .result-icon {
  border: 0;
  background: var(--bg-3);
  box-shadow: inset 0 0 0 2px var(--border),
              inset 4px 4px 0 0 rgba(0,0,0,.30),
              inset -4px -4px 0 0 rgba(255,255,255,.24);
  clip-path: var(--cut);
}

/* Palette items sit directly in the craft area - no nested stone card (outline + inner bevel) around them. */
.palette { background: transparent; box-shadow: none; clip-path: none; }

/* dark ink on green buttons / selected states */
.primary, .button-link, .nav-cta, .nav-cta:hover, .hero-cta, .hero-cta:hover,
.count-picker button.selected { color: var(--accent-ink); }
.primary, .nav-cta, .hero-cta, .count-picker button.selected { background: var(--accent); }

/* result slots: raised with a green pixel frame */
.craft-result, .recipe-result .cell.big {
  border: 0;
  background: var(--bg-2);
  box-shadow: inset 0 0 0 3px var(--accent),
              inset 4px 4px 0 0 rgba(255,255,255,.32),
              inset -4px -4px 0 0 rgba(0,0,0,.26);
  clip-path: var(--cut);
}

/* item-hero tag -> readable green pill */
.item-hero-tag {
  background: var(--accent); color: var(--accent-ink); border: 0;
  box-shadow: inset 0 0 0 2px var(--border); clip-path: var(--cut);
}

/* ghost button: subtle square outline */
.ghost { background: transparent; color: var(--text);
  box-shadow: inset 0 0 0 2px var(--border); clip-path: var(--cut); }

/* headings: flat, no shadow/decoration */

/* topbar: full-width raised stone bar that scrolls with the page (NOT sticky/fixed).
   Contents are constrained to the same 1080px column as <main> (padding grows on wide
   screens to centre them, floors at 24px). NOT clipped, so the search dropdown isn't cut. */
.topbar {
  position: static;
  background: var(--bg-2);
  border-bottom: 3px solid var(--border);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.18);
  padding-inline: max(24px, calc((100% - 1080px) / 2 + 24px));
}

/* ---- homepage hero: vendored Minecraft key-art banner + global search + CTAs ----
   Full-bleed: breaks out of <main>'s 1080px column to span the whole viewport, and a
   negative top margin cancels main's top padding so it sits flush against the fixed menu. */
.home-hero {
  margin: -24px calc(50% - 50vw) 26px;   /* top: touch the header; left/right: full-bleed */
  padding: 56px 28px;
  text-align: center;
  color: #fff;
  background:
    linear-gradient(rgba(12,16,10,.55), rgba(12,16,10,.78)),
    url(/images/hero-keyart.webp) center/cover no-repeat;
  image-rendering: auto;   /* key art is a photo, not pixel art */
  border-bottom: 3px solid var(--border);
}
.home-hero-inner { max-width: 600px; margin: 0 auto; }
.home-hero-title {
  margin: 0 0 10px; font-size: 54px; line-height: 1.05; color: #fff;
  letter-spacing: 5px; text-transform: uppercase;
}
.home-hero-tagline {
  margin: 0 0 22px; font-size: 16px; color: #eef2f0;
  text-shadow: 1px 1px 2px rgba(0,0,0,.8);
}
.home-hero-search { max-width: 540px; margin: 0 auto 20px; flex: none; }
.home-hero-search input {
  width: 100%; padding: 13px 16px; font-size: 15px; font-family: inherit;
  background: var(--bg-2); color: var(--text); border: 0;
  box-shadow: inset 0 0 0 2px var(--border),
              inset 4px 4px 0 0 rgba(0,0,0,.26),
              inset -4px -4px 0 0 rgba(255,255,255,.5);
  clip-path: var(--cut);
}
.home-hero-search input::placeholder { color: var(--muted); }
.home-hero-search input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--accent),
              inset 4px 4px 0 0 rgba(0,0,0,.26),
              inset -4px -4px 0 0 rgba(255,255,255,.5);
}
.home-hero-search .search-suggest { text-align: left; }
.home-hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.home-hero-cta .hero-btn { padding: 11px 24px; font-size: 15px; text-decoration: none; }
.home-hero-cta .ghost { background: var(--bg-2); color: var(--text); }

/* ---- homepage: Recipes showcase (sprite art + SEO copy) ---- */
.home-feature, .home-quiz {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
}
.home-feature-art { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.showcase-item {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 1; padding: 10px;
  background: var(--bg-2); border: 0;
  box-shadow: inset 0 0 0 2px var(--border), inset 4px 4px 0 0 rgba(255,255,255,.42), inset -4px -4px 0 0 rgba(0,0,0,.28);
  clip-path: var(--cut); transition: transform .08s;
}
.showcase-item:hover { transform: translateY(-2px); }
.showcase-icon, .showcase-icon img { width: 100%; height: 100%; }
.showcase-icon img { image-rendering: pixelated; object-fit: contain; }
.home-feature-text h2, .home-quiz-text h2 { margin: 0 0 12px; font-size: 26px; text-align: center; }
/* Test Your Crafting: text on the LEFT, animation on the RIGHT (reverse of the feature row) */
.home-quiz .home-quiz-text { order: 1; }
.home-quiz .home-quiz-sim { order: 2; }
.home-feature-text p, .home-quiz-text p { margin: 0 0 18px; color: var(--text); line-height: 1.6; }
.home-feature-text .hero-btn, .home-quiz-text .hero-btn { text-decoration: none; }

/* ---- homepage: Quiz simulation (compact real recipe) + CTA ---- */
.home-quiz-sim { display: flex; align-items: center; justify-content: center; gap: 8px; }
/* Pixel-perfect 3x scale. Native textures: craftingtable.png 76px, arrow.png 20px,
   output.png 32px, sprites 16px. Every size below is an exact integer multiple so each
   source pixel maps to a whole NxN block (no blurry sub-pixel scaling).
   Grid: 76 x 3 = 228 = padding 42*2 + cells (16*3=48) *3 = 84 + 144 = 228. */
.home-quiz-sim .recipe-grid {
  width: 228px; height: 228px; padding: 38px;
  grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(3, 48px); gap: 5px;
}
.home-quiz-sim .recipe-arrow { width: 60px; height: 60px; }   /* 20px arrow x3 */
.home-quiz-sim .recipe-result .cell.big { width: 96px; height: 96px; padding: 24px; } /* 32px output x3 */
/* Sprites are 16x16 native: grid sprite 48px = 3x (fills the 48px cell like a real recipe),
   result sprite 48px = 3x (fits the 96px output slot centered). Fixed sizes, not 100%,
   so the displayed size stays an exact integer multiple of the source. */
.home-quiz-sim .cell img { width: 48px; height: 48px; object-fit: contain; image-rendering: pixelated; }
.home-quiz-sim .recipe-result .cell.big img { width: 48px; height: 48px; object-fit: contain; image-rendering: pixelated; }

/* Mobile: size the interactive quiz to match the homepage quiz preview - the same pixel-perfect 3x
   scale (228px grid / 60px arrow / 96px result). The full-size 456px grid overflows phones. Stack
   the area as a column (grid -> arrow -> result) with the arrow rotated 90deg to point DOWN. */
@media (max-width: 768px) {
  .craft-area { gap: 14px; padding: 14px; }
  .craft-row { flex-direction: column; gap: 10px; }
  .craft-grid {
    width: 228px; height: 228px; padding: 38px;
    grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(3, 48px); gap: 5px;
  }
  .craft-cell { padding: 2px; }
  .craft-arrow { width: 60px; height: 60px; transform: rotate(90deg); }
  .craft-result { width: 96px; height: 96px; padding: 24px; }
}

/* full-width section bands with alternating colours - the colour change IS the division.
   Each band bleeds edge-to-edge; its inner wrapper keeps content in the 1080px column. */
.home-band {
  margin: 0 calc(50% - 50vw);   /* top/bottom 0 overrides the global `section` margin so bands are flush */
  padding: 54px 0;
  border-top: 3px solid var(--border);
}
.home-band-inner { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.band-feature { background: #c6c6c6; }                                  /* lighter stone */
.band-quiz { background: #a6a6a6; margin-bottom: -24px; padding-bottom: 60px; }  /* darker; meets footer */
.qd-caption { font-size: 13px; color: var(--muted); margin: 0 0 12px; min-height: 1.2em; }
.qd-caption strong { color: var(--accent-dark); }

/* animation: ingredient pops into a grid cell */
@keyframes qd-pop { 0% { transform: scale(.2); opacity: 0; } 60% { transform: scale(1.18); } 100% { transform: scale(1); opacity: 1; } }
.home-quiz-sim .cell.qd-pop img { animation: qd-pop .28s ease-out; }
/* animation: crafted result reveal (pop + spin) */
@keyframes qd-reveal { 0% { transform: scale(.35) rotate(-10deg); opacity: 0; } 70% { transform: scale(1.2) rotate(4deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.home-quiz-sim .cell.big.qd-reveal img { animation: qd-reveal .5s cubic-bezier(.2,.85,.3,1.3); }
/* animation: green glow flash on reveal (outer only, so it doesn't fight the output.png frame) */
@keyframes qd-glow { 0% { box-shadow: 0 0 0 0 rgba(90,162,58,0); } 45% { box-shadow: 0 0 22px 7px rgba(90,162,58,.6); } 100% { box-shadow: 0 0 0 0 rgba(90,162,58,0); } }
.home-quiz-sim .cell.big.qd-reveal { animation: qd-glow .75s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .home-quiz-sim .cell.qd-pop img, .home-quiz-sim .cell.big.qd-reveal img, .home-quiz-sim .cell.big.qd-reveal { animation: none; }
}

@media (max-width: 760px) {
  .home-feature, .home-quiz { grid-template-columns: 1fr; }
}

/* ---- dark footer ---- */
.site-footer {
  background: #14161b;
  border-top: 3px solid #000;
  color: #8a93a3;
  margin-top: 0;
  padding: 52px 24px 0;
}
.site-footer .footer-inner { max-width: 1080px; margin: 0 auto; }

/* 4 columns, all left-aligned: a wider brand column (logo + description) + 3 menu columns */
.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 38px;
  text-align: left;
}
.footer-brand { max-width: 300px; }
.footer-brand .footer-logo { height: 58px; width: auto; image-rendering: pixelated; display: block; margin-bottom: 14px; }
.footer-title { color: #c2cad4; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.6px; margin: 0 0 10px; }
.footer-desc { color: #6c757f; font-size: 12px; line-height: 1.65; margin: 0; }

.footer-col-title { color: #b6bec9; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.6px; margin: 0 0 14px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.footer-col ul a { color: #98a1ae; font-size: 12px; transition: color .12s ease; }
.footer-col ul a:hover { color: #fff; text-decoration: none; }

/* bottom bar */
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 24px;
  border-top: 1px solid #20242b; padding: 18px 0 24px;
}
.footer-legal, .footer-disclaimer { margin: 0; font-size: 11.5px; color: #5c646e; }

@media (max-width: 820px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .footer-brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---- topbar: ONE line - logo left, search fills the middle, compact icon nav on the right ---- */
.topbar { gap: 14px; flex-wrap: nowrap; }
.topbar .brand { flex-shrink: 0; }
.topbar .search-wrap { flex: 1 1 auto; min-width: 90px; width: auto; max-width: none; margin: 0 6px; }
.topnav { display: flex; align-items: center; gap: 2px; flex-shrink: 0; flex-wrap: nowrap; justify-content: flex-end; }
.topnav .nav-link {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: 'Jersey 25', "Courier New", monospace;
  font-size: 16px; line-height: 1; letter-spacing: .5px;
  padding: 6px 9px;
}
/* menu text turns white on hover */
.topnav .nav-link:hover { color: #fff; }
.topnav .nav-cta:hover { background: var(--accent-dark); color: #fff; }
/* nav icons are 36x36 shown at 18px (a 2:1 reduction) - use smooth (bicubic) downscaling,
   NOT the global nearest-neighbor, so the reduced pixel art stays sharp instead of aliased */
.topnav .nav-icon {
  width: 18px; height: 18px; flex-shrink: 0; display: block;
  image-rendering: auto;
  image-rendering: smooth;
  image-rendering: high-quality;
}
@media (max-width: 880px) {
  .topnav .nav-link { font-size: 15px; padding: 5px 7px; gap: 4px; }
  .topnav .nav-icon { width: 16px; height: 16px; }
}
/* mobile: collapse the nav into a burger so it stops overflowing */
.nav-toggle { display: none; }
@media (max-width: 768px) {
  /* Mobile: bolder body text for readability on small screens (request). */
  body { font-weight: 700; }
  .topbar { position: relative; }
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 44px; height: 40px; flex-shrink: 0; padding: 9px 9px;
    background: var(--bg-2); color: var(--text); border: 0;
    box-shadow: inset 0 0 0 2px var(--border); clip-path: var(--cut); cursor: pointer;
  }
  .nav-toggle span { display: block; width: 100%; height: 3px; background: currentColor; }
  .nav-toggle[aria-expanded="true"] { background: var(--accent); color: var(--accent-ink); }
  .topnav {
    display: none;
    position: absolute; top: calc(100% + 5px); right: 24px; left: auto;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--bg-2); border: 0; padding: 8px;
    box-shadow: inset 0 0 0 2px var(--border), 0 10px 28px rgba(0,0,0,.35);
    clip-path: var(--cut); z-index: 60; min-width: 210px; max-width: calc(100vw - 48px);
  }
  .topnav.open { display: flex; }
  .topnav .nav-link { width: 100%; font-size: 16px; padding: 9px 11px; gap: 8px; }
  .topnav .nav-icon { width: 18px; height: 18px; }
  /* smaller logo so the search gets real width; bigger search + readable suggestions */
  .brand-logo { height: 30px; }
  .topbar .search-wrap { min-width: 130px; margin: 0 5px; }
  #search { font-size: 16px; padding: 9px 12px; }
  .suggest-icon { width: 38px; height: 38px; }
  .suggest-item { gap: 8px; padding: 8px 10px; }
  .suggest-name { flex: 1; min-width: 0; }
}

/* ---- /minecraft-recipes filters: collapsible on mobile ---- */
.facet-panel { display: flex; flex-direction: column; gap: 16px; }
.filters-toggle { display: none; }
@media (max-width: 760px) {
  .filters-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
    padding: 11px 14px; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer;
    background: var(--bg-2); color: var(--text); border: 0;
    box-shadow: inset 0 0 0 2px var(--border), inset 4px 4px 0 0 rgba(255,255,255,.42), inset -4px -4px 0 0 rgba(0,0,0,.28);
    clip-path: var(--cut);
  }
  .filters-toggle::after { content: "▾"; font-size: 11px; transition: transform .15s; }
  .filters-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
  .facet-panel { display: none; }
  .facet-panel.open { display: flex; margin-top: 12px; }
}

/* ---- recipes page: search + sort toolbar above the grid, + pagination ---- */
.recipes-main { min-width: 0; }
.recipes-toolbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px;
  margin-bottom: 16px;
}
.recipes-toolbar .facet-result { color: var(--muted); font-size: 13px; }
.recipes-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-left: auto; }
.recipe-search {
  width: 220px; max-width: 100%; padding: 8px 12px; font-size: 14px; font-family: inherit;
  background: var(--bg-2); color: var(--text); border: 0;
  box-shadow: inset 0 0 0 2px var(--border), inset 4px 4px 0 0 rgba(0,0,0,.26), inset -4px -4px 0 0 rgba(255,255,255,.5);
  clip-path: var(--cut);
}
.recipe-search::placeholder { color: var(--muted); }
.recipe-search:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--accent), inset 4px 4px 0 0 rgba(0,0,0,.26), inset -4px -4px 0 0 rgba(255,255,255,.5);
}
.recipe-controls .facet-clear { margin-top: 4px; }

.recipes-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 24px; }
.page-btn {
  min-width: 38px; padding: 7px 11px; font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer;
  background: var(--bg-2); color: var(--text); border: 0;
  box-shadow: inset 0 0 0 2px var(--border), inset 4px 4px 0 0 rgba(255,255,255,.42), inset -4px -4px 0 0 rgba(0,0,0,.28);
  clip-path: var(--cut);
}
.page-btn:hover:not(:disabled):not(.active) { background: var(--bg-3); }
.page-btn.active { background: var(--accent); color: var(--accent-ink); }
.page-btn:disabled { opacity: .45; cursor: default; }
.page-gap { padding: 0 4px; color: var(--muted); }

/* on hover the ICON enlarges and spills OVER its dark bg area + above neighbouring cards.
   The card itself does not resize. */
.recipes-main .tile { position: relative; }
.recipes-main .tile-icon img { transition: transform .1s ease; }
/* on hover drop the pixel clip-path on the tile + icon box (clip-path crops even with overflow
   visible), let the icon overflow, scale it up, and lift it above neighbours */
.recipes-main .tile:hover { z-index: 50; clip-path: none; }
.recipes-main .tile:hover .tile-icon { overflow: visible; clip-path: none; }
.recipes-main .tile:hover .tile-icon img { transform: scale(1.22); }

/* /mobs grid: same hover pop-out as the Recipes grid - the mob image scales beyond its square */
.mob-tile { position: relative; }
.mob-tile .mob-mini-img img { transition: transform .12s ease; }
.mob-tile:hover { z-index: 50; clip-path: none; }
.mob-tile:hover .tile-icon { overflow: visible; clip-path: none; }
.mob-tile:hover .mob-mini-img img { transform: scale(1.4); }

/* ---- Jersey 25 (Google pixel font, hotlinked in app/layout.js <head>) for H1/H2 ---- */
h1, h2 { font-family: 'Jersey 25', "Courier New", monospace; letter-spacing: 2px; text-shadow: none; }

/* ---- RESTORE the shipped Minecraft pixel-art textures ----
   The crafting grid, arrow, output, item slots and grid tiles are real images, not CSS
   panels, so the Stone bevels above must NOT cover them. Reset background to the texture
   and drop the inset bevel + clip-path. (Plain panels like .card/.tile keep the bevel.) */
.grid.small > .tile {
  background: url(/images/cell.png) center/100% 100% no-repeat;
  box-shadow: none; clip-path: none; border: 0;
}
.grid.small > .tile:hover {
  background-image: url(/images/cell.png), linear-gradient(rgba(108,192,74,0.45), rgba(108,192,74,0.45));
  background-size: 100% 100%, 100% 100%;
  background-blend-mode: normal, multiply;
  box-shadow: none; clip-path: none;
}
.ingredient-slot, .inline-item-slot, .drop-slot {
  background: url(/images/cell.png) center/100% 100% no-repeat;
  box-shadow: none; clip-path: none; border: 0;
}
.recipe-grid, .craft-grid, .mini-grid {
  background: url(/images/craftingtable.png) center/100% 100% no-repeat;
  box-shadow: none; clip-path: none; border: 0;
}
.cell, .craft-cell, .mini-cell {
  background: transparent; box-shadow: none; clip-path: none; border: 0;
}
.recipe-result .cell.big, .craft-result {
  background: url(/images/output.png) center/100% 100% no-repeat;
  box-shadow: none; clip-path: none; border: 0;
}
.recipe-arrow, .craft-arrow {
  background: url(/images/arrow.png) center/contain no-repeat;
  box-shadow: none; clip-path: none;
}

/* ---- Copy-to-clipboard button (namespaced minecraft:<name> id on item/mob pages) ---- */
.meta-id { display: inline-flex; align-items: center; gap: 6px; }
.meta-id code { word-break: break-all; }
.copy-id {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex: none; padding: 0; margin-left: 2px;
  border: 0; cursor: pointer; color: var(--text);
  background: var(--bg-2);
  box-shadow: inset 0 0 0 2px var(--border),
              inset 2px 2px 0 0 rgba(255,255,255,.42),
              inset -2px -2px 0 0 rgba(0,0,0,.28);
}
.copy-id:hover { color: var(--accent-dark); }
.copy-id:active {
  box-shadow: inset 0 0 0 2px var(--border),
              inset 2px 2px 0 0 rgba(0,0,0,.28);
}
.copy-id svg { display: block; }
.copy-id.copied { color: var(--accent-dark); }
.copy-id.copied::after {
  content: "Copied"; position: absolute; bottom: 132%; left: 50%;
  transform: translateX(-50%);
  background: var(--text); color: var(--bg-2);
  font-size: 10px; line-height: 1; padding: 3px 6px; white-space: nowrap;
  pointer-events: none; z-index: 5;
}

/* Item-ID row (the `minecraft:<name>` code + copy) */
.id-row { font-size: 15px; margin-top: 6px; }
.id-row code { font-size: 15px; }

/* Smelting fuel line: plain text, no card (box/bevel removed by request) */
.hero-fact .fuel-badge {
  margin-bottom: 12px;
  background: none;
  box-shadow: none;
  clip-path: none;
  padding: 0;
}

/* Lighter fill than the panel bg for the search box + inline code chips (minecraft:<id>, /give) */
#search { background: var(--bg-light); }
code { background: var(--bg-light); }

/* Related items + Used to craft: keep the outer pixel-art card (.tile, raised stone), but remove the
   inner slot background that sits directly behind each item (.tile-icon) - by request. */
.related-buckets .tile-icon,
.uses-grid .tile-icon {
  background: none;
  box-shadow: none;
  clip-path: none;
}

/* Related: jump menu (anchor chips) so shared-ingredient buckets are reachable at a glance */
.related-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.related-jump a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; font-size: 13px; color: var(--text); background: var(--bg-2);
  box-shadow: inset 0 0 0 2px var(--border),
              inset 2px 2px 0 0 rgba(255,255,255,.42),
              inset -2px -2px 0 0 rgba(0,0,0,.28);
}
.related-jump a:hover { background: var(--bg-3); color: var(--accent-dark); text-decoration: none; }
.related-jump .jump-count { font-size: 11px; color: var(--muted); }
.related-bucket { scroll-margin-top: 16px; }

/* Texture Lab (private dev tool at /lab) */
.lab { display: grid; grid-template-columns: 340px 1fr; gap: 24px; align-items: start; }
.lab-controls { display: flex; flex-direction: column; gap: 12px; }
.lab-controls label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.lab-controls input, .lab-controls select, .lab-controls textarea {
  font-family: inherit; font-size: 13px; padding: 6px 8px;
  background: var(--bg-light); border: 2px solid var(--border); color: var(--text);
}
.lab-controls input[type="range"] { padding: 0; }
.lab-controls textarea { font-family: "Courier New", monospace; white-space: pre; }
/* minmax(0,1fr) (not 1fr) lets the columns shrink below their content so the steppers never
   overflow the 340px controls panel and slide under the 3D stage. */
.lab-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.lab-controls .lab-row > label { min-width: 0; }
.lab-gallery-wrap { margin-top: 32px; }
.lab-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 12px; }
.lab-gallery figure { margin: 0; cursor: pointer; border: 2px solid var(--border); background: var(--bg-2); padding: 6px; text-align: center; }
.lab-gallery figure:hover { border-color: var(--accent); }
.lab-gallery img { width: 100%; aspect-ratio: 1; object-fit: contain; image-rendering: pixelated;
  background: repeating-conic-gradient(#cfcfcf 0% 25%, #e6e6e6 0% 50%) 50% / 16px 16px; }
.lab-gallery figcaption { font-size: 12px; font-weight: 700; margin-top: 4px; word-break: break-word; }
.lab-controls label.lab-check { flex-direction: row; align-items: center; gap: 8px; }
.lab-controls label.lab-check input { width: auto; }
.lab-row label.lab-check { grid-column: span 2; }
.stepper { display: flex; align-items: stretch; gap: 0; min-width: 0; }
.stepper input { flex: 1 1 0; min-width: 0; width: auto; text-align: center; border-radius: 0; }
.stepper .step { width: 30px; flex: 0 0 30px; border: 2px solid var(--border); background: var(--bg-3); font-weight: 700; font-size: 16px; line-height: 1; cursor: pointer; }
.stepper .step:active { background: var(--accent); color: var(--accent-ink); }
.lab-controls .status { font-weight: 700; min-height: 18px; font-size: 13px; }
.lab-controls .status.ok { color: #2e7d32; }
.lab-controls .status.err { color: #c62828; }
.lab-stage { background: var(--bg-2); padding: 20px; box-shadow: inset 0 0 0 2px var(--border); }
#lab-3d { width: 100%; height: 440px; }
@media (max-width: 760px) { .lab { grid-template-columns: 1fr; } }

/* Mobs: wiki art (Publitio-hosted) replaces the 3D viewer. Detail-page portrait + grid tile images. */
.mob-portrait-stage { display: flex; align-items: center; justify-content: center; min-height: 300px; padding: 10px; }
.mob-portrait-img { max-width: 100%; max-height: 340px; width: auto; height: auto; image-rendering: auto; }
.mob-portrait-fallback { font-family: "Courier New", monospace; font-weight: 700; font-size: 72px; color: var(--accent); }
.mob-mini-img img { width: 100%; height: 100%; object-fit: contain; image-rendering: auto; }

/* /mobs filter toolbar (type chips + search + sort) */
.mobs-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; }
.mob-types { display: flex; flex-wrap: wrap; gap: 8px; }
.mobs-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-left: auto; }
.mobs-toolbar .facet-result { font-size: 13px; color: var(--muted); }
@media (max-width: 760px) { .mobs-tools { margin-left: 0; width: 100%; } }