/*****************************
*      CRAFTING RECIPE UI    *
*                            *
*  To use your own resource  *
*  pack textures, drop PNGs  *
*  into /img/ui/ and update  *
*  the background-image      *
*  paths below.              *
*                            *
*  Textures needed:          *
*  ┌──────────────────────┐  *
*  │ crafting_bg.png      │  *
*  │   outer container    │  *
*  │                      │  *
*  │ crafting_grid.png    │  *
*  │   3×3 grid area      │  *
*  │                      │  *
*  │ inv_slot.png         │  *
*  │   single slot bg     │  *
*  │                      │  *
*  │ inv_slot_item.png    │  *
*  │   inner item cell    │  *
*  │                      │  *
*  │ crafting_arrow.png   │  *
*  │   result arrow       │  *
*  └──────────────────────┘  *
******************************/

.mc-recipe {
  display: inline-flex;
  flex-direction: column;
  gap: .4rem;
  margin: 1.25rem 0;
  user-select: none;
}

/* ── Texture container — sized to exactly match crafting_bg.png at 2× (116×64 native → 232×128) ── */
.mc-recipe-row {
  position: relative;
  width: 232px;
  height: 128px;
  flex-shrink: 0;
  background-image: url('/img/ui/crafting_bg.png');
  background-size: 100% 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* 3×3 crafting grid — absolutely positioned to align with texture slots
   Grid origin in texture at 2×: (10px, 10px). Each slot = 36×36px. */
.mc-grid {
  position: absolute;
  top: 10px;
  left: 10px;
  display: grid;
  grid-template-columns: repeat(3, 36px);
  grid-template-rows: repeat(3, 36px);
  gap: 0;
  padding: 0;
  background: transparent;
  border: none;
  flex-shrink: 0;
}

/* Inventory slot — transparent, texture draws the cell */
.invslot {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

/* Item cell — hover-able, tooltip-triggering */
.invslot-item {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  position: relative;
  overflow: hidden;
  background: transparent;
  border: none;
}

/* Clickable item — links to a wiki page */
a.invslot-link {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
a.invslot-link:hover::after {
  background: rgba(255,255,255,.35);
}

.invslot-item:hover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.22);
  pointer-events: none;
  z-index: 1;
}

/* Item image — pixelated scaling */
.invslot-item img {
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
}

/* Arrow — drawn by the texture, hide the HTML element */
.mc-arrow-wrap {
  display: none;
}

/* Result slot — absolutely positioned to align with the crafting texture
   (2×: top=38, left=170, size=52px). Scoped to .mc-recipe-row so the same
   item-slot include can be reused inside stat tables / infoboxes / inline
   contexts without breaking out of layout. */
.mc-recipe-row .mc-result-slot {
  position: absolute;
  top: 38px;
  left: 170px;
}

/* Default (non-crafting) usage — flow inline like a normal block. */
.mc-result-slot {
  position: relative;
  display: inline-block;
}

.mc-recipe-row .mc-result-slot .invslot {
  width: 52px;
  height: 52px;
  background: transparent;
}

.mc-recipe-row .mc-result-slot .invslot-item {
  width: 52px;
  height: 52px;
  background: transparent;
  border: none;
}

.mc-recipe-row .mc-result-slot .invslot-item img {
  width: 38px;
  height: 38px;
}

/* Stat-table & infobox use of the result slot — bigger than inline icons,
   smaller than the crafting hero. Sized so the row layout doesn't break. */
.stat-row-icon .mc-result-slot,
.stat-col-item .mc-result-slot,
.stat-cell-icon .mc-result-slot,
.infobox .mc-result-slot {
  position: relative;
  top: auto;
  left: auto;
  display: inline-block;
}
.stat-row-icon .mc-result-slot .invslot,
.stat-row-icon .mc-result-slot .invslot-item,
.stat-col-item .mc-result-slot .invslot,
.stat-col-item .mc-result-slot .invslot-item,
.stat-cell-icon .mc-result-slot .invslot,
.stat-cell-icon .mc-result-slot .invslot-item,
.infobox .mc-result-slot .invslot,
.infobox .mc-result-slot .invslot-item {
  width: 48px;
  height: 48px;
  background: transparent;
  border: none;
}
.stat-row-icon .mc-result-slot .invslot-item img,
.stat-col-item .mc-result-slot .invslot-item img,
.stat-cell-icon .mc-result-slot .invslot-item img,
.infobox .mc-result-slot .invslot-item img {
  width: 40px;
  height: 40px;
}

/* ── Item icons ──
 *  Drop your Minecraft textures into /img/items/ as PNGs.
 *  Use <img> tags inside .invslot-item elements:
 *    <img src="/img/items/leather.png" alt="Leather">
 *
 *  For infobox hero icons, use .mc-icon-lg:
 *    <img src="/img/items/backpack.png" alt="Backpack" class="mc-icon-lg">
 *
 *  All item images use pixelated rendering for that
 *  crisp Minecraft look at any size.
 */

.mc-icon-lg {
  width: 48px;
  height: 48px;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  flex-shrink: 0
}

/* Fallback coloured squares — shown while textures are missing */
.mc-icon-fallback {
  width: 28px;
  height: 28px;
  display: block;
  flex-shrink: 0;
  border-radius: 2px;
  border: 2px solid rgba(255,255,255,.12)
}

.mc-icon-fallback[data-item="leather"]     { background: #8B4513 }
.mc-icon-fallback[data-item="chest"]       { background: #96742A }
.mc-icon-fallback[data-item="iron_ingot"]  { background: #BEBEBE }
.mc-icon-fallback[data-item="string"]      { background: #DCDCDC }
.mc-icon-fallback[data-item="diamond"]     { background: #44E6E6 }
.mc-icon-fallback[data-item="stick"]       { background: #8B6914 }
.mc-icon-fallback[data-item="backpack"]    { background: #7A5230 }
.mc-icon-fallback[data-item="repair_kit"]  { background: #C8C8C8 }
.mc-icon-fallback[data-item="gold_ingot"]  { background: #FFD700 }
.mc-icon-fallback[data-item="planks"]      { background: #A0744E }
.mc-icon-fallback[data-item="stone"]       { background: #808080 }


/* Stack count badge — shown on result slot when result_count > 1 */
.invslot-count {
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-shadow: 1px 1px 0 #3f3f3f;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
  font-family: var(--font-mono);
}

/* Shapeless recipe badge */
.mc-recipe-shapeless {
  display: inline-block;
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: .1rem .35rem;
  margin-left: .5rem;
  vertical-align: middle;
  font-family: var(--font-body);
}

/* Crafting recipe: ensure it fits narrow screens */
@media (max-width:520px) {
  .mc-recipe { overflow-x: auto }
  /* 1.5× scale: 116×64 → 174×96 */
  .mc-recipe-row { width: 174px; height: 96px }
  /* Grid origin at 1.5×: 5×1.5=7.5→8px */
  .mc-grid { top: 8px; left: 8px }
  .mc-grid { grid-template-columns: repeat(3,27px); grid-template-rows: repeat(3,27px) }
  .invslot { width:27px; height:27px }
  .invslot-item { width:27px; height:27px }
  .invslot-item img { width:21px; height:21px }
  /* Result origin at 1.5×: x=85×1.5=128px, y=19×1.5=29px, size=26×1.5=39px */
  .mc-recipe-row .mc-result-slot { top:29px; left:128px }
  .mc-recipe-row .mc-result-slot .invslot,
  .mc-recipe-row .mc-result-slot .invslot-item { width:39px; height:39px }
  .mc-recipe-row .mc-result-slot .invslot-item img { width:28px; height:28px }
}

/*****************************
*        SHOP / CHEST GUI    *
*                            *
*  Used by shop-gui.html     *
*  Usage:                    *
*  {% include shop-gui.html  *
*     id="blacksmith" %}     *
******************************/

.mc-gui {
  display: inline-flex;
  flex-direction: column;
  margin: 1.25rem 0;
  user-select: none;
  max-width: 100%;
  overflow-x: auto;
}

.mc-gui-title {
  background: #c6c6c6;
  border: 2px solid #555;
  border-bottom: none;
  padding: .25rem .6rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 700;
  color: #333;
  letter-spacing: .01em;
}

/* 9-column chest grid — rows controlled by --gui-rows custom property */
.mc-gui-grid {
  display: grid;
  grid-template-columns: repeat(9, 36px);
  grid-template-rows: repeat(var(--gui-rows, 3), 36px);
  gap: 2px;
  background: #8b8b8b;
  border: 2px solid #555;
  padding: 6px;
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 #373737;
}

/* Each slot reuses the same .invslot / .invslot-item as the crafting grid */
.mc-gui .invslot {
  width: 36px;
  height: 36px;
  background: #8b8b8b;
  box-shadow:
    inset -1px -1px 0 #fff,
    inset 1px 1px 0 #373737;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mc-gui .invslot-item {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  position: relative;
  overflow: hidden;
}

.mc-gui .invslot-item:hover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.22);
  pointer-events: none;
  z-index: 1;
}

.mc-gui .invslot-item img {
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
}

/* ── Custom-textured GUI variant ──
 *  Set  texture: "/img/icons/gui/my_gui.png"  in shops.yml to use a
 *  256×256 Minecraft GUI texture instead of the default grey chest look.
 *
 *  The background-image is on the outer .mc-gui-textured container,
 *  rendered at native 256×256. The grid is overlaid with transparent
 *  slots positioned to match the texture's slot coordinates.
 *
 *  Configurable via CSS vars (set in shops.yml):
 *    --gui-slot       Slot size in 1x pixels (default 18px)
 *    --gui-grid-top   Grid Y offset (default 18px)
 *    --gui-grid-left  Grid X offset (default 8px)
 */
.mc-gui-textured {
  width: calc(var(--gui-width, 256) * 1px);
  height: calc(var(--gui-height, 256) * 1px);
  position: relative;
  background-size: calc(var(--gui-width, 256) * 1px) calc(var(--gui-height, 256) * 1px);
  background-repeat: no-repeat;
  background-position: top left;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  overflow: hidden;
  transform: scale(var(--gui-scale, 1));
  transform-origin: top left;
}

.mc-gui-textured .mc-gui-title {
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  text-align: center;
  background: transparent;
  border: none;
  color: #4a412a;
  z-index: 1;
  font-size: .6rem;
  padding: 0;
}

.mc-gui-grid-textured {
  position: absolute;
  top: var(--gui-grid-top, 18px);
  left: var(--gui-grid-left, 8px);
  display: grid;
  grid-template-columns: repeat(9, var(--gui-slot, 18px));
  grid-template-rows: repeat(var(--gui-rows, 3), var(--gui-slot, 18px));
  gap: 0;
  padding: 0;
  background: transparent !important;
  border: none;
  box-shadow: none;
}

.mc-gui-grid-textured .invslot {
  width: var(--gui-slot, 18px);
  height: var(--gui-slot, 18px);
  background: transparent;
  box-shadow: none;
}

.mc-gui-textured .invslot-item {
  width: calc(var(--gui-slot, 18px) - 2px);
  height: calc(var(--gui-slot, 18px) - 2px);
}

.mc-gui-textured .invslot-item img {
  width: calc(var(--gui-slot, 18px) - 4px);
  height: calc(var(--gui-slot, 18px) - 4px);
}

@media (max-width: 520px) {
  .mc-gui-grid {
    grid-template-columns: repeat(9, 28px);
    grid-template-rows: repeat(var(--gui-rows, 3), 28px);
    padding: 4px;
    gap: 1px;
  }
  .mc-gui .invslot { width: 28px; height: 28px; }
  .mc-gui .invslot-item { width: 24px; height: 24px; }
  .mc-gui .invslot-item img { width: 20px; height: 20px; }

  /* Textured GUI: scale down to 0.75× on mobile */
  .mc-gui-textured {
    transform: scale(calc(var(--gui-scale, 1) * 0.75));
  }
  .mc-gui-textured .mc-gui-title { font-size: .45rem; top: 4px; }
}

/* ── Inline item slot ──
   Used by mc-text.js when expanding {item:xxx} placeholders inline
   in prose, infobox values, table cells, etc. Sits on a text baseline
   like an icon — no big crafting-slot frame.

   Sized larger than text height so item textures stay readable when
   referenced in articles or stacked in infobox value rows. */
.invslot.inline-invslot {
  display: inline-flex;
  width: 32px;
  height: 32px;
  vertical-align: -10px;
  margin: 0 1px;
}
.inline-invslot .invslot-item {
  width: 32px;
  height: 32px;
}
.inline-invslot .invslot-item img {
  width: 28px;
  height: 28px;
}

/* ── Villager / trader GUI ──
   Different layout from chest GUIs:
     · Trade list down the LEFT side, one row per trade.
     · Top-middle preview shows input1, input2, output of selected trade.
   All positions are in 1× source pixels — the parent scales via
   --gui-scale, so positions stay aligned at any zoom level. */
.mc-gui-villager {
  position: relative;
  /* Texture sizing/scaling already handled by .mc-gui-textured. */
}

.villager-trade-list {
  position: absolute;
  top: 0;
  left: var(--tl-x, 5px);
  width: var(--tb-w, 88px); /* matches trade_button.png width */
  pointer-events: none;     /* let individual slots receive hover */
}

/* ── Villager trade row ──
   Each row paints /img/ui/trade_button.png as its own background, so the
   row is sized to that texture's native pixel dimensions (88×20 in 1×).
   Slot positions inside the button are absolute and match the slot bevels
   in trade_button.png:
     · input1 at  x=5,  y=2  (16×16)
     · input2 at  x=35, y=2  (16×16)
     · output at  x=68, y=2  (16×16)  ← far-right of the button area
*/
.villager-trade-row {
  position: absolute;
  left: 0;
  width: var(--tb-w, 88px);
  height: var(--tb-h, 20px);
  background-image: url('/img/ui/trade_button.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: auto;
}

/* Per-slot wrappers placed exactly on the button's slot bevels. */
.villager-trade-row .tb-slot {
  position: absolute;
  top: var(--tb-slot-top, 2px);
  width: var(--tb-slot-sz, 16px);
  height: var(--tb-slot-sz, 16px);
}
.villager-trade-row .tb-input1 { left: var(--tb-i1, 5px); }
.villager-trade-row .tb-input2 { left: var(--tb-i2, 35px); }
.villager-trade-row .tb-output { left: var(--tb-out, 68px); }

/* Villager trade rows reuse .invslot / .invslot-item but the texture
   already paints the slot bevel — strip the default .mc-gui slot
   background + bevel so items sit cleanly on the texture. */
.villager-trade-row .invslot,
.villager-trade-row .invslot-item {
  width: var(--tb-slot-sz, 16px);
  height: var(--tb-slot-sz, 16px);
  background: transparent;
  box-shadow: none;
  border: none;
}
.villager-trade-row .invslot-item img {
  width: var(--tb-slot-sz, 16px);
  height: var(--tb-slot-sz, 16px);
}

/* Hover indicator: white overlay on the item cell — same effect as
   chest GUIs, so clickable items in trade rows feel like links. */
.villager-trade-row .invslot-item {
  position: relative;
  overflow: hidden;
}
.villager-trade-row a.invslot-link {
  cursor: pointer;
}
.villager-trade-row .invslot-item:hover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.22);
  pointer-events: none;
  z-index: 2;
}
.villager-trade-row a.invslot-link:hover::after {
  background: rgba(255,255,255,.35);
}

.villager-trade-arrow {
  font-size: 10px;
  line-height: 1;
  color: rgba(0,0,0,.45);
  font-family: 'Minecraftia', monospace;
}

.villager-trade-row.active::before {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 1px;
  pointer-events: none;
}

.villager-preview-slot {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.villager-preview-slot .invslot,
.villager-preview-slot .invslot-item {
  width: 100%;
  height: 100%;
  background: transparent;
  box-shadow: none;
  border: none;
}

.villager-preview-slot .invslot-item img {
  width: calc(100% - 4px);
  height: calc(100% - 4px);
}

/* Preview slots also need the link/hover treatment so the top-middle
   slots of the villager menu feel just as clickable as the trade rows. */
.villager-preview-slot .invslot-item {
  position: relative;
  overflow: hidden;
}
.villager-preview-slot a.invslot-link {
  cursor: pointer;
}
.villager-preview-slot .invslot-item:hover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.22);
  pointer-events: none;
  z-index: 2;
}
.villager-preview-slot a.invslot-link:hover::after {
  background: rgba(255,255,255,.35);
}