/* ═══════════════════════════════════════════════════════════════════════
   world-spellbook.css — THE SPELLBOOK, almost the whole screen.

   Wray, 2026-10-01: "Players want the codex to be larger where the cards
   can be much more closely looked at so we should make the spellbook window
   almost full screen ... the new one should be a complete rebuild, and no
   need for the builds tab anymore there."

   One window, no tabs. A bar of filters over a WALL of card faces at the
   size they were drawn (240 x 380, so every name and rule is readable in the
   grid), and a CLOSE LOOK that holds one card up at twice that with its
   numbers and every copy you hold. The drawing is public/js/world-spellbook.js.

   ⭐ THE FOURTH SHAPE. #2751 ruled three (dock .24 x .88, centred .43 x .71,
   and the list), and this door was the centred one. His ruling above makes
   it the one near-full-screen window: section 0 asks for it, and the skin's
   own clamp (world-skin.css .ws-sheet) still keeps it inside the picture and
   under the door row, so nothing here can push it off screen.

   Kit B throughout, at the chrome pixel --hv-k (world-hud-v2.css): the chips
   are the shell's tab pieces (slate-tab.png, tab-on-red.png), the planks
   btn.png and btngold.png, the stat icons the Inventory's own strip
   (stat-icons.png).

   Every selector starts at `body.hud-v2`, so ?hud=0 never meets it (the old
   grid draws there, world-spellbook.js mount).

   ── THE LAYER ────────────────────────────────────────────────────────────
   `corners`, like world-forge.css: window content inside the slate window,
   answering the skin by layer, never by specificity
   (__tests__/worldCssLayers.test.js).
   ═══════════════════════════════════════════════════════════════════════ */
@layer base, module, skin, nerm, corners;

@layer corners {

/* ── 0. THE WINDOW'S SHAPE: the ask. The sheet AND its strips, or they
   disagree about how wide the window is (the rule every door's size obeys). */
body.hud-v2.skin-majesty .ws-sheet[data-door='spellbook'],
body.hud-v2.skin-majesty .ws-tabs[data-door='spellbook'] {
  --sk-win-wpct: .99;
  --sk-win-hpct: .95;
  --sk-win-wmin: 560px;
}
/* ⭐IT RUNS TO THE FOOT, OVER THE ACTION BAR. Every window's band stops at
   the bar's top (world-windows-v2.css, the audit's WB-15), which on a
   1512 x 870 laptop left this window 654 tall: not one whole card and its
   stats. The right docks already run to the foot and lie over the bar by
   Wray's ruling of 2026-09-28 ("just make the inventory overlay ontop of
   it"); a window that is nearly the whole screen and dims the room is the
   same case. 18 off the foot is that rule's own margin. Where the carved
   rail is (1280 wide and taller than a phone), as there.
   ⛔`.ws-sheet.ws-sheet`, as the Settings window does and for its reason:
   the band rule it answers weighs the same and sits later in the page. */
@media (min-width: 1280px) and (min-height: 541px) {
  body.hud-v2.skin-majesty .ws-sheet.ws-sheet[data-door='spellbook'],
  body.hud-v2.skin-majesty .ws-tabs.ws-tabs[data-door='spellbook'] {
    --sk-win-band: calc(var(--fh, 100vh) - 18px);
  }
}

/* ── 1. THE BODY: the bar over the wall ───────────────────────────────── */
body.hud-v2 .wsb {
  --r-common: #cfd6df;
  --r-uncommon: #5fe04a;
  --r-rare: #4d9dff;
  --r-epic: #c07af5;
  --r-legendary: #ff9a2e;
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: calc(4px + 2 * var(--hv-k) * 1px);
  color: var(--hv-ink-slate);
  font: 400 calc(16px + 2 * var(--hv-k) * 1px) / 1.1 var(--hv-f-vt);
  container: wsb / inline-size;
}
body.hud-v2 .wsb-note {
  margin: auto;
  padding: 24px;
  text-align: center;
  color: var(--hv-dim);
}

/* ── 2. THE BAR ───────────────────────────────────────────────────────── */
body.hud-v2 .wsb .wsb-bar {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(4px + 2 * var(--hv-k) * 1px) calc(8px + 4 * var(--hv-k) * 1px);
  padding-bottom: calc(3px + 2 * var(--hv-k) * 1px);
  border-bottom: 1px solid rgba(232, 213, 169, .16);
}
body.hud-v2 .wsb :is(.wsb-houses, .wsb-seg, .wsb-tools) {
  display: flex;
  align-items: center;
  gap: calc(2px + 1 * var(--hv-k) * 1px);
  min-width: 0;
}
body.hud-v2 .wsb .wsb-seg-k {
  margin-right: 2px;
  font: 400 calc(4px + 2 * var(--hv-k) * 1px) / 1 var(--hv-f-px);
  font-style: normal;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hv-dim);
}
/* a chip: the shell's in-window tab pieces, lit red when chosen */
body.hud-v2 .wsb .wsb-chip {
  box-sizing: border-box;
  min-height: max(28px, calc(12px + 8 * var(--hv-k) * 1px));
  margin: 0;
  padding: 0 calc(3px + 2 * var(--hv-k) * 1px);
  border-style: solid;
  border-width: calc(6 * var(--hv-k) * 1px);
  border-image: url('/assets/ui/kitb/slate-tab.png?v=2026-09-24a') 6 fill / calc(6 * var(--hv-k) * 1px) stretch;
  image-rendering: pixelated;
  background: none;
  font: 400 calc(4px + 2 * var(--hv-k) * 1px) / 1 var(--hv-f-px);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #d9cdb2;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .55);
  cursor: pointer;
}
body.hud-v2 .wsb .wsb-chip:hover { filter: brightness(1.15); color: #efe3c8; }
body.hud-v2 .wsb .wsb-chip[aria-pressed='true'] {
  border-image-source: url('/assets/ui/kitb/tab-on-red.png?v=2026-09-24a');
  filter: none;
  color: #f7e6c4;
  text-shadow: 0 2px 0 #5e1414;
}
/* a house: its crest. All are lit until one is chosen; then the rest dim. */
body.hud-v2 .wsb .wsb-house {
  flex: none;
  box-sizing: border-box;
  width: calc(16px + 10 * var(--hv-k) * 1px);
  height: calc(16px + 10 * var(--hv-k) * 1px);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: opacity .12s, transform .12s;
}
body.hud-v2 .wsb .wsb-house img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .6));
  pointer-events: none;
}
body.hud-v2 .wsb .wsb-house.is-word {
  width: auto;
  padding: 0 calc(2px + 2 * var(--hv-k) * 1px);
  font: 400 calc(4px + 2 * var(--hv-k) * 1px) / 1 var(--hv-f-px);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #d9cdb2;
}
body.hud-v2 .wsb .wsb-house:hover { transform: translateY(-1px); }
body.hud-v2 .wsb .wsb-houses:has(.wsb-house[aria-pressed='true']) .wsb-house:not([aria-pressed='true']) { opacity: .38; }
body.hud-v2 .wsb .wsb-house[aria-pressed='true'] img { filter: drop-shadow(0 0 5px var(--hv-gold-hi)) drop-shadow(0 1px 0 rgba(0, 0, 0, .6)); }
body.hud-v2 .wsb .wsb-house.is-word[aria-pressed='true'] { color: #f7e6c4; text-shadow: 0 0 6px var(--hv-gold-hi); }
body.hud-v2 .wsb :is(.wsb-chip, .wsb-house, .wsb-size, .wsb-card, .wsb-copy, .wsb-step, .wsb-slot):focus-visible {
  outline: 2px solid var(--hv-gold-hi);
  outline-offset: 2px;
}

/* the count and the tools keep to the right, as one group */
body.hud-v2 .wsb .wsb-right {
  display: flex;
  align-items: center;
  gap: calc(6px + 4 * var(--hv-k) * 1px);
  min-width: 0;
  margin-left: auto;
}
body.hud-v2 .wsb :is(.wsb-sort, .wsb-find) {
  box-sizing: border-box;
  height: max(28px, calc(12px + 8 * var(--hv-k) * 1px));
  margin: 0;
  padding: 0 8px;
  border: 1px solid #55607a;
  border-radius: 0;
  background: #1c2330;
  font: 400 calc(14px + 2 * var(--hv-k) * 1px) / 1 var(--hv-f-vt);
  color: #efe3c8;
}
body.hud-v2 .wsb .wsb-find { width: clamp(110px, 14cqw, 220px); }
body.hud-v2 .wsb .wsb-find::placeholder { color: #9aa6b6; }
body.hud-v2 .wsb .wsb-size {
  box-sizing: border-box;
  width: max(28px, calc(12px + 8 * var(--hv-k) * 1px));
  height: max(28px, calc(12px + 8 * var(--hv-k) * 1px));
  margin: 0;
  padding: 0;
  border: 1px solid #55607a;
  background: #1c2330;
  font: 400 calc(16px + 2 * var(--hv-k) * 1px) / 1 var(--hv-f-vt);
  color: #efe3c8;
  cursor: pointer;
}
body.hud-v2 .wsb .wsb-size:disabled { opacity: .35; cursor: default; }
body.hud-v2 .wsb .wsb-count {
  flex: 0 1 auto;
  text-align: right;
  font: 400 calc(4px + 2 * var(--hv-k) * 1px) / 1.3 var(--hv-f-px);
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: pre-wrap;
  color: var(--hv-dim);
}

/* ── 2b. THE LOADOUT (#4261 B17b, FEATURE_WORLD_SPELLBOOK_LOADOUT) ─────
   A strip under the bar: four spells on buttons 2 to 5, four instincts that
   are always on, a line that says what happened, and Take out for a chosen
   slot that holds a card. A slot's card is the WALL's own face (.wsb-face,
   the painter and the png under it), only smaller; an empty slot is a dark,
   card-shaped hole in the card's frame (BD8: it does nothing). Drawn only
   with the flag on (world-spellbook.js), so off it never meets a page. */
body.hud-v2 .wsb .wsb-lo {
  /* a slot's width: 68 at --hv-k 1, 80 at 2 */
  --wsb-sw: calc(56px + 12 * var(--hv-k) * 1px);
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: calc(8px + 6 * var(--hv-k) * 1px);
  min-width: 0;
  padding-bottom: calc(3px + 2 * var(--hv-k) * 1px);
  border-bottom: 1px solid rgba(232, 213, 169, .16);
}
body.hud-v2 .wsb .wsb-lo-set {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: calc(3px + 2 * var(--hv-k) * 1px);
}
body.hud-v2 .wsb .wsb-lo-k {
  align-self: center;
  margin-right: 2px;
  font: 400 calc(4px + 2 * var(--hv-k) * 1px) / 1 var(--hv-f-px);
  font-style: normal;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hv-dim);
}
body.hud-v2 .wsb .wsb-slot {
  --rc: var(--r-common);
  position: relative;
  flex: none;
  box-sizing: border-box;
  width: var(--wsb-sw);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
body.hud-v2 .wsb .wsb-slot[data-rarity='uncommon'] { --rc: var(--r-uncommon); }
body.hud-v2 .wsb .wsb-slot[data-rarity='rare'] { --rc: var(--r-rare); }
body.hud-v2 .wsb .wsb-slot[data-rarity='epic'] { --rc: var(--r-epic); }
body.hud-v2 .wsb .wsb-slot[data-rarity='legendary'] { --rc: var(--r-legendary); }
body.hud-v2 .wsb .wsb-slot:is(:hover, :focus-visible) .wsb-face {
  transform: translateY(-2px);
  filter: drop-shadow(0 0 5px var(--rc)) drop-shadow(0 4px 4px rgba(0, 0, 0, .5));
}
/* the slot a card goes in next */
body.hud-v2 .wsb .wsb-slot[aria-pressed='true'] .wsb-face {
  transform: translateY(-3px);
  filter: drop-shadow(0 0 2px var(--hv-gold-hi)) drop-shadow(0 0 7px var(--hv-gold-hi));
}
/* the hole: the card's frame inside its bounds (240 of 292 wide, as the
   wall's foot is inset), dark, and plainly empty */
body.hud-v2 .wsb .wsb-face.is-hole::before {
  content: '';
  position: absolute;
  inset: 1.2% 8.9%;
  border-radius: 7% / 5%;
  background: #0b0f16;
  box-shadow: inset 0 0 0 1px rgba(232, 213, 169, .2), inset 0 6px 14px rgba(0, 0, 0, .75);
}
body.hud-v2 .wsb .wsb-slot[data-kind='instinct'] .wsb-face.is-hole::before {
  box-shadow: inset 0 0 0 1px rgba(201, 166, 255, .22), inset 0 6px 14px rgba(0, 0, 0, .75);
}
/* the button it is on, in the frame's bottom-right corner, as a keycap */
body.hud-v2 .wsb .wsb-key {
  position: absolute;
  right: 11%;
  bottom: 3%;
  min-width: calc(8px + 4 * var(--hv-k) * 1px);
  padding: 2px 3px;
  background: rgba(11, 15, 22, .88);
  border: 1px solid rgba(232, 213, 169, .3);
  font: 400 calc(4px + 2 * var(--hv-k) * 1px) / 1 var(--hv-f-px);
  text-align: center;
  color: #efe3c8;
  pointer-events: none;
}
/* the Sigil your house lends (A21), on its slot and on its tile */
body.hud-v2 .wsb .wsb-slot .wsb-lent {
  position: absolute;
  left: 50%;
  top: 2%;
  transform: translateX(-50%);
  padding: 2px 3px;
  pointer-events: none;
}
body.hud-v2 .wsb .wsb-lent {
  font: 400 calc(3px + 2 * var(--hv-k) * 1px) / 1 var(--hv-f-px);
  font-style: normal;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: #6b5320;
  color: #f7e6c4;
}
body.hud-v2 .wsb .wsb-foot .wsb-lent { padding: 2px 3px; }
body.hud-v2 .wsb .wsb-lo-side {
  flex: 1 1 auto;
  min-width: 0;
  align-self: center;
  display: flex;
  align-items: center;
  gap: calc(4px + 3 * var(--hv-k) * 1px);
}
body.hud-v2 .wsb .wsb-lo-note {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--hv-dim);
}
body.hud-v2 .wsb .wsb-lo-out { flex: none; }
/* the close look's row: the four buttons, the one it is on pressed */
body.hud-v2 .wsb .wsb-insp-lo { display: flex; flex-direction: column; gap: calc(2px + 2 * var(--hv-k) * 1px); }
body.hud-v2 .wsb .wsb-insp-lo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(3px + 2 * var(--hv-k) * 1px);
}
body.hud-v2 .wsb .wsb-insp-lo-row .wsb-chip { min-width: max(36px, calc(16px + 8 * var(--hv-k) * 1px)); }
body.hud-v2 .wsb .wsb-insp-lo .wsb-lo-note:empty { display: none; }

/* ── 3. THE WALL ──────────────────────────────────────────────────────── */
/* the narrowest a tile may be at each step of the size buttons
   (world-spellbook.js SIZES, held equal by the suite). The row shares out
   the rest, so at 1920 the middle step is six across at 292, the width the
   card's whole bounds were drawn at, and on a 1512 laptop five across with
   a whole card and its stats in view. */
body.hud-v2 .wsb .wsb-wall[data-size='0'] { --wsb-cw: 200px; }
body.hud-v2 .wsb .wsb-wall[data-size='2'] { --wsb-cw: 380px; }
body.hud-v2 .wsb .wsb-wall {
  --wsb-cw: 260px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 2px calc(4px + 2 * var(--hv-k) * 1px) 16px 2px;
  scrollbar-color: #7d6a45 #1c2330;
  scrollbar-width: thin;
}
body.hud-v2 .wsb .wsb-sec {
  display: flex;
  align-items: center;
  gap: calc(3px + 2 * var(--hv-k) * 1px);
  margin: calc(6px + 4 * var(--hv-k) * 1px) 0 calc(4px + 2 * var(--hv-k) * 1px);
  padding-bottom: calc(2px + 1 * var(--hv-k) * 1px);
  border-bottom: 1px solid rgba(232, 213, 169, .16);
  font: 400 calc(18px + 4 * var(--hv-k) * 1px) / 1 var(--hv-f-tome);
  letter-spacing: .02em;
  color: var(--hv-gold-hi);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .5);
}
body.hud-v2 .wsb .wsb-sec:first-child { margin-top: 2px; }
body.hud-v2 .wsb .wsb-sec img {
  width: calc(14px + 6 * var(--hv-k) * 1px);
  height: calc(14px + 6 * var(--hv-k) * 1px);
  object-fit: contain;
  image-rendering: auto;
}
body.hud-v2 .wsb .wsb-sec i {
  margin-left: auto;
  font: 400 calc(4px + 2 * var(--hv-k) * 1px) / 1 var(--hv-f-px);
  font-style: normal;
  color: var(--hv-dim);
  text-shadow: none;
}
/* the tracks share the row (1fr): the card is PAINTED at whatever width its
   tile lands on, so its pixels are whole at any of them */
body.hud-v2 .wsb .wsb-grid {
  display: grid;
  /* never narrower than the step asks, unless the wall is too short for a
     card that wide: then the fit decides (--wsb-fit, world-spellbook.js) */
  grid-template-columns: repeat(auto-fill, minmax(min(var(--wsb-cw), var(--wsb-fit, 9999px)), 1fr));
  gap: calc(8px + 4 * var(--hv-k) * 1px) calc(6px + 2 * var(--hv-k) * 1px);
}
body.hud-v2 .wsb .wsb-card {
  --rc: var(--r-common);
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--wsb-fit, none);
  justify-self: center;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  display: flex;
  flex-direction: column;
  gap: calc(2px + 1 * var(--hv-k) * 1px);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
body.hud-v2 .wsb .wsb-card[data-rarity='uncommon'] { --rc: var(--r-uncommon); }
body.hud-v2 .wsb .wsb-card[data-rarity='rare'] { --rc: var(--r-rare); }
body.hud-v2 .wsb .wsb-card[data-rarity='epic'] { --rc: var(--r-epic); }
body.hud-v2 .wsb .wsb-card[data-rarity='legendary'] { --rc: var(--r-legendary); }
body.hud-v2 .wsb .wsb-face {
  position: relative;
  display: block;
  width: 100%;
  /* the card's whole bounds (world-spellbook.js BOX), ribbon tails and all */
  aspect-ratio: 292 / 389;
  transition: transform .12s ease-out, filter .12s ease-out;
}
body.hud-v2 .wsb .wsb-face > :is(.wsb-img, .wsb-cv) {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  pointer-events: none;
}
/* the png is a 240 x 380 thumbnail with the card's bounds fitted across it
   (make-web-thumbs.py), so `cover` in this box shows exactly the bounds the
   canvas paints: the stand-in and the card lie on the same pixels */
body.hud-v2 .wsb .wsb-face .wsb-img { object-fit: cover; image-rendering: auto; }
body.hud-v2 .wsb .wsb-face .wsb-cv { opacity: 0; }
body.hud-v2 .wsb .wsb-face .wsb-cv.is-painted { opacity: 1; }
body.hud-v2 .wsb .wsb-face.is-painted .wsb-img { visibility: hidden; }
/* a card with no face yet (a held card, #4310, or a face that failed): its
   name stands in, on the wall, in a slot and held up */
body.hud-v2 .wsb :is(.wsb-face, .wsb-insp-card).is-noart {
  display: grid;
  place-items: center;
  border: 1px dashed #55607a;
}
body.hud-v2 .wsb .wsb-noart {
  padding: 8px;
  font: 400 calc(14px + 4 * var(--hv-k) * 1px) / 1.1 var(--hv-f-tome);
  text-align: center;
  color: var(--hv-dim);
}
body.hud-v2 .wsb .wsb-slot .wsb-noart {
  padding: 2px;
  font-size: calc(7px + 2 * var(--hv-k) * 1px);
  overflow-wrap: anywhere;
}
/* lifted, with its rarity's colour behind it: a drop-shadow follows the
   card's own outline, ribbon tails and all, where a box-shadow would draw
   the tile's rectangle */
body.hud-v2 .wsb .wsb-card:is(:hover, :focus-visible) .wsb-face {
  transform: translateY(-3px);
  filter: drop-shadow(0 0 6px var(--rc)) drop-shadow(0 6px 6px rgba(0, 0, 0, .5));
}
/* a card you do not hold: there, and plainly not yours */
body.hud-v2 .wsb .wsb-card.is-unheld .wsb-face > * { filter: grayscale(.85) brightness(.5); }
body.hud-v2 .wsb .wsb-card.is-unheld:is(:hover, :focus-visible) .wsb-face > * { filter: grayscale(.5) brightness(.75); }

/* under the face: its rarity, how many you hold, the best copy's roll */
body.hud-v2 .wsb .wsb-foot {
  display: flex;
  align-items: center;
  gap: calc(2px + 2 * var(--hv-k) * 1px);
  min-height: calc(10px + 5 * var(--hv-k) * 1px);
  min-width: 0;
  /* under the card's FRAME, not under its ribbon tails: the frame is 240 of
     the tile's 292, so 26 of 292 comes off each side */
  padding: 0 8.9%;
}
body.hud-v2 .wsb .wsb-gem {
  flex: none;
  width: calc(4px + 3 * var(--hv-k) * 1px);
  height: calc(4px + 3 * var(--hv-k) * 1px);
  background: var(--r-common);
  transform: rotate(45deg);
  box-shadow: 0 0 0 1px #0b0f16, 0 0 6px var(--gc, transparent);
}
body.hud-v2 .wsb .wsb-gem[data-r='uncommon'] { background: var(--r-uncommon); --gc: var(--r-uncommon); }
body.hud-v2 .wsb .wsb-gem[data-r='rare'] { background: var(--r-rare); --gc: var(--r-rare); }
body.hud-v2 .wsb .wsb-gem[data-r='epic'] { background: var(--r-epic); --gc: var(--r-epic); }
body.hud-v2 .wsb .wsb-gem[data-r='legendary'] { background: var(--r-legendary); --gc: var(--r-legendary); }
body.hud-v2 .wsb .wsb-n {
  flex: none;
  font: 400 calc(14px + 2 * var(--hv-k) * 1px) / 1 var(--hv-f-vt);
  color: #efe3c8;
}
body.hud-v2 .wsb .wsb-roll {
  display: flex;
  align-items: center;
  gap: calc(2px + 2 * var(--hv-k) * 1px);
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
}
body.hud-v2 .wsb .wsb-stat {
  --sc: var(--stat-atk);
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
body.hud-v2 .wsb .wsb-stat[data-k='hp'] { --sc: var(--stat-hp); }
body.hud-v2 .wsb .wsb-stat[data-k='spd'] { --sc: var(--stat-spd); }
body.hud-v2 .wsb .wsb-stat[data-k='def'] { --sc: var(--stat-def); }
body.hud-v2 .wsb .wsb-stat[data-k='luck'] { --sc: var(--stat-luck); }
/* the Raven Attributes icons, one strip of five, the Inventory's own */
body.hud-v2 .wsb .wsb-stat-i {
  display: block;
  width: calc(8px + 4 * var(--hv-k) * 1px);
  height: calc(8px + 4 * var(--hv-k) * 1px);
  background: url('/assets/ui/stat-icons.png?v=2026-09-25a') 0 0 / 500% 100% no-repeat;
  image-rendering: pixelated;
}
body.hud-v2 .wsb .wsb-stat[data-k='hp'] .wsb-stat-i { background-position-x: 25%; }
body.hud-v2 .wsb .wsb-stat[data-k='spd'] .wsb-stat-i { background-position-x: 50%; }
body.hud-v2 .wsb .wsb-stat[data-k='def'] .wsb-stat-i { background-position-x: 75%; }
body.hud-v2 .wsb .wsb-stat[data-k='luck'] .wsb-stat-i { background-position-x: 100%; }
body.hud-v2 .wsb .wsb-stat b {
  font: 400 calc(14px + 2 * var(--hv-k) * 1px) / 1 var(--hv-f-vt);
  color: color-mix(in srgb, var(--sc) 70%, #fff);
}
body.hud-v2 .wsb :is(.wsb-inuse, .wsb-unheld) {
  flex: none;
  font: 400 calc(3px + 2 * var(--hv-k) * 1px) / 1 var(--hv-f-px);
  font-style: normal;
  letter-spacing: .05em;
  text-transform: uppercase;
}
body.hud-v2 .wsb .wsb-inuse { padding: 2px 3px; background: #2f6b3d; color: #dff5e3; }
body.hud-v2 .wsb .wsb-unheld { color: #9aa6b6; }
/* at the small size the foot keeps the count and drops the roll's detail */
body.hud-v2 .wsb .wsb-wall[data-size='0'] .wsb-inuse { display: none; }

body.hud-v2 .wsb .wsb-none {
  margin: 12vh auto 0;
  display: grid;
  justify-items: center;
  gap: 12px;
  color: var(--hv-dim);
}
body.hud-v2 .wsb .wsb-none p { margin: 0; }

/* ── 4. THE CLOSE LOOK: one card held up, over the wall ───────────────── */
body.hud-v2 .wsb .wsb-insp {
  position: absolute;
  inset: 0;
  z-index: 5;
  /* ONE row and it is the overlay's own height: an auto row would grow to
     the tallest column (a long list of copies) and take the card with it,
     off the bottom of a short window */
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  justify-items: center;
  background: rgba(8, 11, 17, .93);
}
body.hud-v2 .wsb .wsb-insp[hidden] { display: none; }
body.hud-v2 .wsb .wsb-insp-panel {
  box-sizing: border-box;
  max-width: 100%;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: auto minmax(260px, 440px);
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  gap: calc(10px + 8 * var(--hv-k) * 1px);
  padding: calc(4px + 4 * var(--hv-k) * 1px);
}
body.hud-v2 .wsb .wsb-insp-stage {
  display: flex;
  align-items: center;
  gap: calc(4px + 3 * var(--hv-k) * 1px);
  min-height: 0;
  height: 100%;
}
/* THE CARD, HELD UP: as tall as the window lets it be, up to twice the size
   it was drawn (389 x 2). The box is the card's whole bounds, the same box a
   tile on the wall is, so the flat stand-in and the painted copy lie on the
   same pixels. */
body.hud-v2 .wsb .wsb-insp-card {
  position: relative;
  flex: none;
  height: 100%;
  max-height: 778px;
  aspect-ratio: 292 / 389;
}
body.hud-v2 .wsb .wsb-insp-card > :is(.wsb-insp-img, .wsb-insp-cv) {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
body.hud-v2 .wsb .wsb-insp-img { object-fit: cover; image-rendering: auto; }
/* the held card turns (TILT-A, #3734), and a turn grows the near edge, so
   its canvas reaches past the card's box by world-spellbook.js TURN_PAD
   (0.16: 8% each side) and the card in it stays exactly where it was */
body.hud-v2 .wsb .wsb-insp-card > .wsb-insp-cv { inset: -8%; width: 116%; height: 116%; }
body.hud-v2 .wsb .wsb-insp-cv { image-rendering: pixelated; opacity: 0; }
body.hud-v2 .wsb .wsb-insp-card.is-painted .wsb-insp-cv { opacity: 1; }
body.hud-v2 .wsb .wsb-insp-card.is-painted .wsb-insp-img { visibility: hidden; }
body.hud-v2 .wsb .wsb-insp-card.is-unheld > * { filter: grayscale(.7) brightness(.7); }
body.hud-v2 .wsb .wsb-step {
  flex: none;
  box-sizing: border-box;
  width: max(44px, calc(20px + 10 * var(--hv-k) * 1px));
  height: max(64px, calc(30px + 20 * var(--hv-k) * 1px));
  margin: 0;
  padding: 0 0 4px;
  border: 1px solid #55607a;
  background: rgba(28, 35, 48, .9);
  font: 400 calc(26px + 6 * var(--hv-k) * 1px) / 1 var(--hv-f-vt);
  color: #efe3c8;
  cursor: pointer;
}
body.hud-v2 .wsb .wsb-step:hover { background: #2a3345; color: var(--hv-gold-hi); }

body.hud-v2 .wsb .wsb-insp-info {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: calc(4px + 3 * var(--hv-k) * 1px);
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-color: #7d6a45 #1c2330;
  scrollbar-width: thin;
}
body.hud-v2 .wsb .wsb-insp-head { display: flex; align-items: center; gap: calc(4px + 3 * var(--hv-k) * 1px); }
body.hud-v2 .wsb .wsb-insp-crest {
  flex: none;
  width: calc(20px + 12 * var(--hv-k) * 1px);
  height: calc(20px + 12 * var(--hv-k) * 1px);
  object-fit: contain;
  image-rendering: auto;
}
body.hud-v2 .wsb .wsb-insp-name {
  font: 400 calc(26px + 8 * var(--hv-k) * 1px) / 1 var(--hv-f-tome);
  color: #f7e6c4;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .55);
}
body.hud-v2 .wsb .wsb-insp-rules {
  margin: 0;
  font: 400 calc(18px + 3 * var(--hv-k) * 1px) / 1.15 var(--hv-f-vt);
  color: #efe3c8;
}
body.hud-v2 .wsb .wsb-insp-flavour { margin: 0; font-style: italic; color: var(--hv-dim); }
body.hud-v2 .wsb .wsb-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(1px + 1 * var(--hv-k) * 1px) calc(8px + 4 * var(--hv-k) * 1px);
  margin: 0;
  padding: calc(4px + 2 * var(--hv-k) * 1px) calc(5px + 3 * var(--hv-k) * 1px);
  background: #2a3345;
  border: 1px solid rgba(232, 213, 169, .16);
}
body.hud-v2 .wsb .wsb-facts dt {
  align-self: center;
  font: 400 calc(4px + 2 * var(--hv-k) * 1px) / 1.2 var(--hv-f-px);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--hv-dim);
}
body.hud-v2 .wsb .wsb-facts dd { margin: 0; color: #efe3c8; }
body.hud-v2 .wsb .wsb-insp-sock {
  margin: 0;
  padding: 3px 6px;
  align-self: flex-start;
  background: #2f6b3d;
  font: 400 calc(4px + 2 * var(--hv-k) * 1px) / 1.3 var(--hv-f-px);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #dff5e3;
}
body.hud-v2 .wsb .wsb-insp-h {
  margin: calc(2px + 2 * var(--hv-k) * 1px) 0 0;
  font: 400 calc(4px + 2 * var(--hv-k) * 1px) / 1.2 var(--hv-f-px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hv-gold-hi);
}
body.hud-v2 .wsb .wsb-copies { display: flex; flex-direction: column; gap: calc(1px + 1 * var(--hv-k) * 1px); }
body.hud-v2 .wsb .wsb-copy {
  --rc: var(--r-common);
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: calc(2px + 2 * var(--hv-k) * 1px) calc(4px + 2 * var(--hv-k) * 1px);
  display: flex;
  align-items: center;
  gap: calc(4px + 2 * var(--hv-k) * 1px);
  border: 1px solid rgba(232, 213, 169, .16);
  border-left: 3px solid var(--rc);
  background: #2a3345;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
body.hud-v2 .wsb .wsb-copy[data-rarity='uncommon'] { --rc: var(--r-uncommon); }
body.hud-v2 .wsb .wsb-copy[data-rarity='rare'] { --rc: var(--r-rare); }
body.hud-v2 .wsb .wsb-copy[data-rarity='epic'] { --rc: var(--r-epic); }
body.hud-v2 .wsb .wsb-copy[data-rarity='legendary'] { --rc: var(--r-legendary); }
body.hud-v2 .wsb .wsb-copy:hover { background: #323d52; }
body.hud-v2 .wsb .wsb-copy[aria-pressed='true'] { background: #38445c; border-color: var(--rc); }
body.hud-v2 .wsb .wsb-copy-w { display: flex; flex-direction: column; min-width: 0; }
body.hud-v2 .wsb .wsb-copy-w b { font-weight: 400; color: color-mix(in srgb, var(--rc) 75%, #fff); }
body.hud-v2 .wsb .wsb-copy-w i {
  font: 400 calc(14px + 1 * var(--hv-k) * 1px) / 1 var(--hv-f-vt);
  font-style: normal;
  color: var(--hv-dim);
}
body.hud-v2 .wsb .wsb-roll.is-wide { gap: calc(4px + 3 * var(--hv-k) * 1px); }
body.hud-v2 .wsb .wsb-roll.is-wide .wsb-stat-i {
  width: calc(10px + 5 * var(--hv-k) * 1px);
  height: calc(10px + 5 * var(--hv-k) * 1px);
}
body.hud-v2 .wsb .wsb-roll.is-wide .wsb-stat b { font-size: calc(18px + 3 * var(--hv-k) * 1px); }
body.hud-v2 .wsb .wsb-roll-none { margin-left: auto; color: var(--hv-dim); }
body.hud-v2 .wsb .wsb-insp-unheld { margin: 0; color: var(--hv-dim); }
/* the way out stays in reach however long the list of copies is */
body.hud-v2 .wsb .wsb-insp-foot {
  position: sticky;
  bottom: 0;
  background: #0b0f16;
  margin-top: auto;
  padding-top: calc(4px + 3 * var(--hv-k) * 1px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: calc(4px + 2 * var(--hv-k) * 1px);
}
body.hud-v2 .wsb .wsb-insp-hint { flex: 1 1 100%; color: var(--hv-dim); }
/* the window's own plank: kit B's btn.png (69x18, rim 3 3 5 3), gold for the
   one thing the close look asks of you. ⛔ NOT `.hv-btn`: that primitive is
   the Pit's, promoted for a page with no .ws-sheet, and no world script may
   carry it (__tests__/venueUi2.test.js, "INERT IN THE WORLD"). */
body.hud-v2 .wsb .wsb-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: max(44px, calc(18 * var(--hv-k) * 1px));
  padding: 0 calc(5 * var(--hv-k) * 1px);
  border-style: solid;
  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);
  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;
  image-rendering: pixelated;
  background: none;
  font: 400 8px/1 var(--hv-f-px);
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--hv-ink);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
  cursor: pointer;
}
body.hud-v2 .wsb .wsb-btn:hover { filter: brightness(1.18); }
body.hud-v2 .wsb .wsb-btn:focus-visible { outline: 2px solid var(--hv-gold-hi); outline-offset: 2px; }
body.hud-v2 .wsb .wsb-btn.is-gold {
  border-image-source: url('/assets/ui/kitb/btngold.png?v=2026-09-24a');
  color: #2a1c0c;
  text-shadow: none;
}

/* ── 5. A NARROW OR SHORT WINDOW (a phone, landscape first) ───────────── */
@container wsb (max-width: 760px) {
  body.hud-v2 .wsb .wsb-right { margin-left: 0; }
  body.hud-v2 .wsb .wsb-insp-panel { grid-template-columns: minmax(0, 1fr); overflow-y: auto; align-content: start; }
  body.hud-v2 .wsb .wsb-insp-stage { justify-content: center; }
  body.hud-v2 .wsb .wsb-insp-info { overflow: visible; }
}
/* A LANDSCAPE PHONE (the phone's orientation, Wray 2026-09-29): 390 tall.
   The bar is one row that slides sideways instead of two that take a third
   of the window, and the close look is the card beside its words. The cards
   are four across, never under 175 wide: that is the floor for a card that
   carries a description (Wray, 2026-10-02: "anything under 175 wide is kind
   of pointless"; card-numbers.js READ_MIN). It was five across at about 150,
   which fitted a whole card in the wall and could not be read. */
/* ── THE LONG PULL (#4292 B28; FEATURE_PACKS_LONG_PULL) ─────────────────
   world-spellbook.js marks these only with the flag on, so off nothing here
   matches. A foil wears the foil look's colours round the card's own
   outline (a drop-shadow follows the ribbon tails, as the lift's does). */
body.hud-v2 .wsb .wsb-card.is-foil .wsb-face {
  filter: drop-shadow(0 0 1px #fff3c4) drop-shadow(0 0 4px #f2c23a) drop-shadow(0 0 6px #2fb3a6);
}
body.hud-v2 .wsb .wsb-card.is-foil:is(:hover, :focus-visible) .wsb-face {
  filter: drop-shadow(0 0 2px #fff3c4) drop-shadow(0 0 6px #f2c23a) drop-shadow(0 0 9px #8b3fc0) drop-shadow(0 6px 6px rgba(0, 0, 0, .5));
}
/* the dust in the bar: the balance, or the target and its bar */
body.hud-v2 .wsb .wsb-dust { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
body.hud-v2 .wsb .wsb-dust[hidden] { display: none; }
body.hud-v2 .wsb .wsb-dust-w {
  min-width: 0;
  max-width: 30cqw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 400 calc(4px + 2 * var(--hv-k) * 1px) / 1.3 var(--hv-f-px);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #e9d9b8;
}
body.hud-v2 .wsb .wsb-dust-t {
  position: relative;
  flex: none;
  width: calc(40px + 20 * var(--hv-k) * 1px);
  height: 6px;
  overflow: hidden;
  background: #1c2330;
  box-shadow: inset 0 0 0 1px #55607a;
}
body.hud-v2 .wsb .wsb-dust-t[hidden] { display: none; }
body.hud-v2 .wsb .wsb-dust-t i { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: #b9ab8c; }
/* the close look's dust row: what dust can do for this card */
body.hud-v2 .wsb .wsb-insp-dust { display: flex; flex-direction: column; gap: calc(2px + 2 * var(--hv-k) * 1px); }
body.hud-v2 .wsb .wsb-insp-dust-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(3px + 2 * var(--hv-k) * 1px);
}
body.hud-v2 .wsb .wsb-insp-dust .wsb-btn:disabled { opacity: .45; cursor: default; }
body.hud-v2 .wsb .wsb-dust-note:empty { display: none; }

@media (max-height: 540px) {
  body.hud-v2 .wsb .wsb-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  body.hud-v2 .wsb .wsb-bar::-webkit-scrollbar { display: none; }
  body.hud-v2 .wsb .wsb-bar > * { flex: none; }
  body.hud-v2 .wsb :is(.wsb-chip, .wsb-sort, .wsb-find) { min-height: 44px; height: 44px; }
  body.hud-v2 .wsb .wsb-house:not(.is-word) { width: 40px; height: 44px; }
  body.hud-v2 .wsb .wsb-house.is-word { height: 44px; }
  body.hud-v2 .wsb .wsb-wall:is([data-size='0'], [data-size='1'], [data-size='2']) { --wsb-cw: 175px; }
  body.hud-v2 .wsb .wsb-size { display: none; }
  body.hud-v2 .wsb :is(.wsb-count, .wsb-inuse) { display: none; }
  body.hud-v2 .wsb .wsb-sec { margin-top: 4px; }
  body.hud-v2 .wsb .wsb-insp-panel { grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 4px; }
  body.hud-v2 .wsb .wsb-step { width: 44px; height: 44px; }
  /* the loadout: one short row that slides sideways, a thumb's width a
     slot (44 wide is 59 tall), the labels left to the slots' own names */
  body.hud-v2 .wsb .wsb-lo {
    --wsb-sw: 44px;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  body.hud-v2 .wsb .wsb-lo::-webkit-scrollbar { display: none; }
  body.hud-v2 .wsb .wsb-lo-k { display: none; }
  body.hud-v2 .wsb .wsb-lo-side { flex: 1 0 200px; }
  body.hud-v2 .wsb .wsb-lo-note { font-size: 15px; line-height: 1.05; }
  body.hud-v2 .wsb .wsb-insp-lo-row .wsb-chip { min-width: 44px; }
  /* the Long Pull's dust: a thumb's height, and the bar's words short */
  body.hud-v2 .wsb .wsb-insp-dust .wsb-btn { min-height: 44px; }
  body.hud-v2 .wsb .wsb-dust-w { max-width: 160px; }
}
/* A FINGER, ON A SCREEN TALLER THAN A PHONE (a tablet, a touch laptop): the
   bar's controls are a thumb's height. The phone rule above already is. */
@media (pointer: coarse) {
  body.hud-v2 .wsb :is(.wsb-chip, .wsb-sort, .wsb-find, .wsb-size) { min-height: 44px; height: 44px; }
  body.hud-v2 .wsb .wsb-size { width: 44px; }
  body.hud-v2 .wsb .wsb-house:not(.is-word) { width: 44px; height: 44px; }
  body.hud-v2 .wsb .wsb-house.is-word { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  body.hud-v2 .wsb :is(.wsb-face, .wsb-house) { transition: none; }
}

} /* end of @layer corners */