/* ═══════════════════════════════════════════════════════════════════════
   world-smithy.css — THE SMITHY WINDOW (#3030 slice 2), what only the
   smithy draws on the bench grammar (world-bench.css).

   Wray's SMITHY 1A to 6A (2026-09-27): the families as tabs (weapons lit,
   the rest dim with their reason), the recipes grouped by weapon line with
   the bag's own icon and the type on each row, the five tier shields, the
   piece on the anvil cooling from white-hot to iron, the roll (item power
   counting up, then the marker on your band), the maker's iron stamp, the
   tray of this visit's pieces and the held piece with WEAR. The drawing is
   public/js/world-smithy.js. The window's size is world-skin.css's
   per-door ask, the Forge's shape (.43 x .71).

   ⛔ No rarity rim, pennant or word anywhere (C41). No gold for the best
   roll: its sparks and its banner are white (SMITHY 3A).

   `corners`, like world-bench.css; every selector starts at body.hud-v2.
   ═══════════════════════════════════════════════════════════════════════ */
@layer base, module, skin, nerm, corners;

@layer corners {

/* ── the list: a heading per weapon line, a row per piece ───────────────── */
body.hud-v2 .wsm .wsm-line {
  flex: none;
  padding: 6px 2px 2px;
  font: 400 calc(4px + 2 * var(--hv-k) * 1px) / 1 var(--hv-f-px);
  color: var(--hv-dim);
  letter-spacing: .04em;
}
body.hud-v2 .wsm .wsm-line:first-child { padding-top: 0; }
body.hud-v2 .wsm .wsm-cell {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(32px + 10 * var(--hv-k) * 1px);
  height: calc(32px + 10 * var(--hv-k) * 1px);
  box-sizing: border-box;
}
body.hud-v2 .wsm .wsm-icon,
body.hud-v2 .wsm .wsm-piece-img,
body.hud-v2 .wsm .wsm-insp-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
body.hud-v2 .wsm .wsm-abbr {
  font: 400 calc(4px + 2 * var(--hv-k) * 1px) / 1 var(--hv-f-px);
  color: var(--hv-dim);
}
/* struck before: a small tick in the cell's corner */
body.hud-v2 .wsm .wsm-check {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 10px;
  height: 6px;
  border-left: 3px solid #8fdc6a;
  border-bottom: 3px solid #8fdc6a;
  transform: rotate(-45deg);
  filter: drop-shadow(0 1px 0 #0b0f15);
}

/* ── the tier row: a shield per tier, the chosen one lit, a shut one greyed ─ */
body.hud-v2 .wsm .wsm-tiers { flex: none; display: flex; flex-direction: column; gap: 3px; }
/* eight shields on the ladder (#3615): they wrap rather than run out of the
   stage (how many sit on a row follows the window's width; §11.3's two rows
   of four is the landscape shape's, #3345) */
body.hud-v2 .wsm .wsm-tier-row { display: flex; flex-wrap: wrap; gap: calc(3 * var(--hv-k) * 1px); }
/* a 44 px touch target at every size (the review, should-fix 5): the button
   is at least 44 x 44 and the shield is drawn inside it at its own shape */
body.hud-v2 .wsm .wsm-tier {
  display: grid;
  place-items: center;
  width: max(44px, calc(24 * var(--hv-k) * 1px));
  height: max(44px, calc(29 * var(--hv-k) * 1px));
  padding: 0 0 calc(3 * var(--hv-k) * 1px);
  border: 0;
  box-sizing: border-box;
  background: url('/assets/ui/kitb/shield.png?v=2026-09-24a') center / contain no-repeat;
  image-rendering: pixelated;
  font: 400 calc(4px + 3 * var(--hv-k) * 1px) / 1 var(--hv-f-px);
  color: #fff3d6;
  text-shadow: 0 2px 0 #3a1406;
  cursor: pointer;
  opacity: .72;
}
body.hud-v2 .wsm .wsm-tier:hover { opacity: 1; }
body.hud-v2 .wsm .wsm-tier.is-on { opacity: 1; filter: drop-shadow(0 0 0 #fff0cc) drop-shadow(0 0 6px rgba(255, 220, 150, .9)); }
body.hud-v2 .wsm .wsm-tier.is-locked { filter: grayscale(.9) brightness(.7); }
body.hud-v2 .wsm .wsm-tier.is-locked.is-on { filter: grayscale(.9) brightness(.75) drop-shadow(0 0 6px rgba(255, 120, 100, .9)); }
/* the enchant row under the tiers (#3704, D21): Plain, then .1 to .4, each
   on kit B's slot in its enchant colour's rim, the bag's mapping (C44: .1
   green slot2, .2 blue slot3, .3 purple slot4, .4 gold slot5-gold), the
   level in its colour. Lit and greyed the way the tier shields are. A 44 px
   touch target at every size. */
body.hud-v2 .wsm .wsm-ench-row { display: flex; flex-wrap: wrap; gap: calc(3 * var(--hv-k) * 1px); }
body.hud-v2 .wsm .wsm-ench {
  display: grid;
  place-items: center;
  min-width: max(44px, calc(24 * var(--hv-k) * 1px));
  height: max(44px, calc(20 * var(--hv-k) * 1px));
  box-sizing: border-box;
  border-style: solid;
  background: none;
  font: 400 calc(4px + 3 * var(--hv-k) * 1px) / 1 var(--hv-f-px);
  color: var(--ench, #fff3d6);
  text-shadow: 0 2px 0 #0b0f15;
  cursor: pointer;
  opacity: .72;
}
body.hud-v2 .wsm .wsm-ench[data-ench="1"] { border-image-source: url('/assets/ui/kitb/slot2.png?v=2026-09-24a'); }
body.hud-v2 .wsm .wsm-ench[data-ench="2"] { border-image-source: url('/assets/ui/kitb/slot3.png?v=2026-09-24a'); }
body.hud-v2 .wsm .wsm-ench[data-ench="3"] { border-image-source: url('/assets/ui/kitb/slot4.png?v=2026-09-24a'); }
body.hud-v2 .wsm .wsm-ench[data-ench="4"] { border-image-source: url('/assets/ui/kitb/slot5-gold.png?v=2026-09-26a'); }
body.hud-v2 .wsm .wsm-ench:hover { opacity: 1; }
body.hud-v2 .wsm .wsm-ench.is-on { opacity: 1; filter: drop-shadow(0 0 0 #fff0cc) drop-shadow(0 0 6px var(--ench, rgba(255, 220, 150, .9))); }
body.hud-v2 .wsm .wsm-ench.is-locked { filter: grayscale(.9) brightness(.7); }
body.hud-v2 .wsm .wsm-ench.is-locked.is-on { filter: grayscale(.9) brightness(.75) drop-shadow(0 0 6px rgba(255, 120, 100, .9)); }
body.hud-v2 .wsm .wsm-gate { min-height: 1em; font-size: .85em; color: var(--hv-foe); }
body.hud-v2 .wsm .wsm-gate:empty { display: none; }

/* ── the piece on the anvil ────────────────────────────────────────────── */
body.hud-v2 .wsm .wsm-piece {
  width: 22%;
  aspect-ratio: 1;
  /* the cold ghost: iron, waiting to be struck */
  filter: grayscale(.55) brightness(.8) drop-shadow(0 6px 0 rgba(0, 0, 0, .45));
  transition: filter .12s;
}
body.hud-v2 .wsm .wb-scene.is-hot .wsm-piece {
  filter: grayscale(0) sepia(.5) saturate(2) brightness(1.2) drop-shadow(0 0 10px #ff8a2a);
}
/* COOL: it rises white-hot and cools to iron */
body.hud-v2 .wsm .wsm-piece.is-cooling { animation: wsm-cool .9s steps(9) forwards; }
@keyframes wsm-cool {
  0% { filter: brightness(3) saturate(0) drop-shadow(0 0 16px #fff); transform: translateX(-50%) translateY(-14px); }
  40% { filter: sepia(1) saturate(3) brightness(1.6) drop-shadow(0 0 12px #ff8a2a); transform: translateX(-50%) translateY(-8px); }
  100% { filter: grayscale(.2) brightness(.95) drop-shadow(0 6px 0 rgba(0, 0, 0, .45)); transform: translateX(-50%) translateY(0); }
}

/* ── ROLL: item power counting up, then the marker on your band ────────── */
body.hud-v2 .wsm .wsm-roll {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 22%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 8px;
  background: rgba(8, 10, 14, .82);
  box-shadow: 0 0 0 1px #7e6440;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .15s steps(3), transform .15s steps(3);
}
body.hud-v2 .wsm .wsm-roll.is-up { opacity: 1; transform: translateY(0); }
body.hud-v2 .wsm .wsm-ip { display: flex; align-items: baseline; gap: 8px; }
body.hud-v2 .wsm .wsm-ip-k {
  font: 400 calc(4px + 2 * var(--hv-k) * 1px) / 1 var(--hv-f-px);
  color: var(--hv-dim);
}
body.hud-v2 .wsm .wsm-ip-v {
  font: 400 calc(8px + 4 * var(--hv-k) * 1px) / 1 var(--hv-f-px);
  color: #fff3d6;
  font-weight: 400;
}
body.hud-v2 .wsm .wsm-band { display: flex; flex-direction: column; align-items: stretch; gap: 5px; width: 100%; max-width: 320px; }
body.hud-v2 .wsm .wsm-band-k {
  text-align: center;
  font: 400 calc(4px + 1.5 * var(--hv-k) * 1px) / 1.1 var(--hv-f-px);
  color: var(--hv-mute);
}
body.hud-v2 .wsm .wsm-band-track {
  position: relative;
  height: 8px;
  background: #1b2330;
  box-shadow: inset 0 0 0 1px #3a4760;
}
/* the marker lands LAST (3A): hidden until the count is done */
body.hud-v2 .wsm .wsm-band-mark {
  position: absolute;
  top: -5px;
  left: calc(var(--at, 0) * 100%);
  width: 4px;
  height: 18px;
  margin-left: -2px;
  background: #fff3c4;
  box-shadow: 0 0 0 1px #0b0f15, 0 0 8px #ffb347;
  opacity: 0;
  transform: translateY(-10px);
}
body.hud-v2 .wsm .wsm-band-mark span {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  font: 400 calc(4px + 2 * var(--hv-k) * 1px) / 1 var(--hv-f-px);
  color: #fff3d6;
}
body.hud-v2 .wsm .wsm-roll.is-landed .wsm-band-mark { opacity: 1; transform: translateY(0); transition: transform .18s steps(3), opacity .1s; }
body.hud-v2 .wsm .wsm-roll.is-landed { padding-bottom: 20px; }
/* the side column's band, before any strike: the column's own readable type
   (the pixel caps were 5.5 to 7 px here and pressed on the costs heading) */
body.hud-v2 .wsm .wsm-band-line {
  font-size: .85em;
  line-height: 1.1;
  color: var(--hv-mute);
}

/* ── STAMP: the maker's @handle in iron ─────────────────────────────────── */
body.hud-v2 .wsm .wsm-stamp {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 3;
  padding: calc(2 * var(--hv-k) * 1px + 2px) calc(4 * var(--hv-k) * 1px + 4px) calc(3 * var(--hv-k) * 1px + 2px);
  border-style: solid;
  border-image: url('/assets/ui/kitb/btn.png?v=2026-09-24a') 3 3 5 3 fill / calc(3 * var(--hv-k) * 1px) calc(3 * var(--hv-k) * 1px) calc(5 * var(--hv-k) * 1px) calc(3 * var(--hv-k) * 1px) stretch;
  border-width: calc(3 * var(--hv-k) * 1px) calc(3 * var(--hv-k) * 1px) calc(5 * var(--hv-k) * 1px) calc(3 * var(--hv-k) * 1px);
  image-rendering: pixelated;
  font: 400 calc(4px + 2 * var(--hv-k) * 1px) / 1 var(--hv-f-px);
  color: #d6dbe2;
  text-shadow: 0 2px 0 #0b0f15;
  opacity: 0;
  pointer-events: none;
}
body.hud-v2 .wsm .wsm-stamp:empty { display: none; }
body.hud-v2 .wsm .wsm-stamp.is-down { animation: wsm-stamp 3.4s steps(34) forwards; }
@keyframes wsm-stamp {
  0%, 28% { opacity: 0; transform: scale(2.2) rotate(-8deg); }
  32% { opacity: 1; transform: scale(.94) rotate(-3deg); }
  36%, 88% { opacity: 1; transform: scale(1) rotate(-3deg); }
  100% { opacity: 0; transform: scale(1) rotate(-3deg); }
}
/* the best roll's banner is white, never gold (3A) */
body.hud-v2 .wsm .wb-banner.is-best b { color: #ffffff; text-shadow: 0 2px 0 #2a3444; }

/* ── the tray: a cell per piece, its tier and its roll ──────────────────── */
body.hud-v2 .wsm .wsm-tray-cell {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: max(44px, calc(32px + 10 * var(--hv-k) * 1px));
  height: max(44px, calc(32px + 10 * var(--hv-k) * 1px));
  box-sizing: border-box;
  border: 0;
  background: none;
  cursor: pointer;
}
body.hud-v2 .wsm .wsm-tray-cell:hover,
body.hud-v2 .wsm .wsm-tray-cell:focus-visible { transform: translateY(-3px); outline: 2px solid var(--hv-gold-hi); outline-offset: 1px; }
body.hud-v2 .wsm .wsm-tray-cell .wsm-icon { width: 100%; height: 100%; }
body.hud-v2 .wsm .wsm-tray-tier,
body.hud-v2 .wsm .wsm-tray-roll {
  position: absolute;
  font: 400 calc(3px + 2 * var(--hv-k) * 1px) / 1 var(--hv-f-px);
  color: #fff3d6;
  text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000;
  pointer-events: none;
}
body.hud-v2 .wsm .wsm-tray-tier { left: 3px; top: 3px; }
body.hud-v2 .wsm .wsm-tray-roll { right: 3px; bottom: 3px; }
body.hud-v2 .wsm .wsm-tray-cell.is-new { visibility: hidden; }
body.hud-v2 .wsm .wsm-tray-cell.is-landed { animation: wsm-land .3s steps(4); }
@keyframes wsm-land { 0% { transform: translateY(-6px) scale(1.12); filter: brightness(1.8); } }
body.hud-v2 .wsm .wsm-tray-cell.is-worn { box-shadow: 0 0 0 2px var(--hv-gold); }
/* an enchanted piece in the tray (#3704): the bag's rim and glow (C44) */
body.hud-v2 .wsm .wsm-tray-cell.is-ench[data-ench="1"] { border-image-source: url('/assets/ui/kitb/slot2.png?v=2026-09-24a'); }
body.hud-v2 .wsm .wsm-tray-cell.is-ench[data-ench="2"] { border-image-source: url('/assets/ui/kitb/slot3.png?v=2026-09-24a'); }
body.hud-v2 .wsm .wsm-tray-cell.is-ench[data-ench="3"] { border-image-source: url('/assets/ui/kitb/slot4.png?v=2026-09-24a'); }
body.hud-v2 .wsm .wsm-tray-cell.is-ench[data-ench="4"] { border-image-source: url('/assets/ui/kitb/slot5-gold.png?v=2026-09-26a'); }
body.hud-v2 .wsm .wsm-tray-cell.is-ench > img { filter: drop-shadow(0 0 1.5px var(--ench)) drop-shadow(0 0 4px var(--ench)); }
body.hud-v2 .wsm .wsm-tray-tier .wsm-ench-n { font-style: normal; color: var(--ench); }
body.hud-v2 .wsm .wb-fly { width: 60px; height: 60px; }

/* ── inspect: the piece held up, its tooltip, WEAR and CLOSE ────────────── */
body.hud-v2 .wsm .wsm-insp { flex-wrap: wrap; justify-content: center; }
body.hud-v2 .wsm .wsm-insp-art {
  flex: none;
  display: grid;
  place-items: center;
  width: min(calc(96px + 40 * var(--hv-k) * 1px), 30cqw);
  aspect-ratio: 1;
  box-sizing: border-box;
}
body.hud-v2 .wsm .wsm-insp-tip { flex: none; min-width: 0; }
body.hud-v2 .wsm .wsm-insp-tip:not(.it3) { display: flex; flex-direction: column; gap: 6px; color: #fff3d6; }
body.hud-v2 .wsm .wsm-insp-name { font: 400 calc(6px + 4 * var(--hv-k) * 1px) / 1.1 var(--hv-f-px); color: var(--hv-gold-hi); }
body.hud-v2 .wsm .wsm-insp-btns { flex: 1 0 100%; display: flex; justify-content: center; gap: 8px; }
body.hud-v2 .wsm .wsm-insp-btns > button { flex: 0 0 auto; min-width: 120px; padding: 0 16px; }
body.hud-v2 .wsm .wsm-insp > .wb-status { flex: 1 0 100%; text-align: center; }

@container wb (max-width: 640px) {
  /* 4A in the sideways strip: each weapon line's name stands on end ahead
     of its pieces, a tag in the row (hiding the headings left 40 pieces
     with no grouping at a laptop's size and on a phone: the review) */
  body.hud-v2 .wsm .wsm-line {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 2px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    background: #121821;
    box-shadow: inset 0 0 0 1px #3a4760;
    letter-spacing: 0;
    color: var(--hv-gold-hi);
    white-space: nowrap;
  }
  body.hud-v2 .wsm .wsm-line:first-child { padding-top: 4px; }
  body.hud-v2 .wsm .wsm-tier { width: 44px; height: 44px; }
  /* the band before a strike: the roll shows it on every strike, and the
     laptop's and the phone's side column need the room for the costs and
     STRIKE (the review, should-fix 4) */
  body.hud-v2 .wsm .wsm-band-line { display: none; }
}
@container wb (max-width: 420px) {
  body.hud-v2 .wsm .wsm-piece { width: 30%; }
  body.hud-v2 .wsm .wsm-insp-art { width: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  body.hud-v2 .wsm .wsm-piece.is-cooling,
  body.hud-v2 .wsm .wsm-stamp.is-down,
  body.hud-v2 .wsm .wsm-tray-cell.is-landed { animation: none; }
  body.hud-v2 .wsm .wsm-stamp.is-down { opacity: 1; }
}

}
/* end of @layer corners */