/* ═══════════════════════════════════════════════════════════════════════
   world-inventory-v2.css — THE INVENTORY IN LAYOUT A (GH #3069 S9, #3132)

   Wray ruled the v7 mock "build it" on 2026-09-24 and picked gear layout A
   for the Inventory: one window, the live 3D cat on a stage in the middle,
   head, chest and boots on its left, weapon, familiar and trinket on its
   right, a kit B gem on the inner corner of the four pieces that take a
   card, five stat tiles in the stat palette, and the bag in a dark well
   below. The mock is audit/ui-gen/2026-09-24-hud-pass/page.src.html
   (`dollA()`, `stats()`, `picker()`, `inventory()`).

   world-windows.js draws the window (`.ww-bagwrap.ww-inv2`) only under
   body.hud-v2; world-inventory-doll.js draws the cat into `.ww-stage`. This
   file dresses both, the socket picker that hangs off the window's left
   edge (`.ww-hover.is-v2pick`), and the faces in button six's window (the
   empty sixth's, #3689; the CARDS window and its row of tabs are retired).

   ── ONE BLOCK ──────────────────────────────────────────────────────────
   `corners`, and every selector in it sits under `body.hud-v2`, so with the
   flag off it matches nothing and ?hud=0 draws the old window exactly as
   main does. (A `skin` rule that honoured the OLD stats box's `hidden` was
   here, and it made that window jump by 73px when the read landed on a
   phone: #3153 review, regress 2. The old window is not this file's.)
   It loads BEFORE world-windows-v2.css
   (that sheet stays second to last, worldWindowsV2.test.js), so every rule
   here carries `.ww-inv2`, `.is-v2pick` or `.is-v2` and out-weighs that
   sheet's window-wide ones by specificity, not by order.

   ── THE SIZES ──────────────────────────────────────────────────────────
   The mock drew the doll at 508 x 404 at the chrome pixel of 2 (--hv-k,
   world-hud-v2.css): a 312 x 404 stage and 76px cells. Here the doll is that
   box as SHARES of its own width (every cell, the stage, the gems), and its
   width is the smallest of: the window's width, the mock's 508, and what
   the window's HEIGHT leaves once everything else in the stack and two rows
   of the bag are paid (--inv2-rest). world-windows.js MEASURES that sum
   (fitInv2) and writes it on the window, so a note that comes and goes
   shrinks the doll, never the bag; the figure here is only its first guess.
   The window is a size container for exactly that sum. (It was also capped
   at 254px per chrome pixel, which left a 1366 laptop's doll at 254 in a
   420 window with smaller gear cells than bag cells: #3153 review S2.)
   ═══════════════════════════════════════════════════════════════════════ */
@layer base, module, skin, nerm, corners;

@layer corners {

/* ── THE WINDOW: a fixed stack, and the bag's well is the one scroller ── */
/* ⭐A GRID OF NAMED ROWS, SO TWO PIECES CAN SHARE ONE (#3182, #3069 S14).
   The Inventory used to end on the foot of the screen, over the action bar,
   because its stack wanted about 600px (S12's exemption). It now ends above
   the bar like every other window, and the height it lost is won back from
   the stack's FIXED rows, never from the doll: Bank and Skills stand on the
   Sort and Find row (`foot ways`), POWER stands on the bag's own header row
   (`bhead who`: it is the bag's number, what the things in it grant), and
   the owner's name goes, because the plate above the screen already says
   whose cat this is. The DOM order is untouched (the drag engine and the
   suites read it); only where each piece is drawn moves. Every piece after
   the doll takes the gap as its own top margin, so a row with nothing in it
   (no note, no socket line) costs nothing.
   ⭐THREE COLUMNS, SO POWER AND THE WAYS DO NOT SHARE ONE (#3031, the
   footer pass). With two, `who` and `ways` sat in one auto column, sized by
   the wider of them: Appearance, Bank and Skills (262px at 1280, 280 at
   1920). So the bag's header row got 150px for the word, the count, the
   weight bar and the Obols whenever POWER showed. Now POWER has the last
   column to itself, the ways span the last two, and the header takes
   everything POWER does not.
   ⭐AND THEN THE STATS WENT THIN AND THE FOOT WENT INTO THE WELL (Wray's
   playtest, 2026-10-04: "the 5 stat lines on the inventory need changing,
   i think icons are overkill ... this lets the inventory have all slots on
   display and more room for the weight"). The five tiles are one strip of
   coloured numbers, and POWER, the sum of what you carry in those same
   stats, stands at its end (`stats stats who`), so the bag's header row is
   the word, the count, the weight bar and the Obols across the whole width.
   The foot row (the Bank and Skills tabs, the bag's Sort and Find) is drawn
   as the top of the well (`foot` above `bag`), and Appearance is on the
   doll's frame. What that frees is spent on the bag: fitInv2 now pays for
   every row of its floor before the doll takes the rest. */
body.hud-v2.skin-majesty .ww-bagwrap.ww-inv2 {
  --inv2-rest: calc(252px + 50px * var(--hv-k));
  --inv2-gap: calc(4px + 3px * var(--hv-k));
  container-type: size;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "doll doll doll"
    "stats stats who"
    "sock sock sock"
    "bhead bhead bhead"
    "note note note"
    "foot foot foot"
    "bag bag bag";
  grid-template-rows: auto auto auto auto auto auto minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 0;
  align-items: stretch;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: #efe3c8;
}
body.hud-v2.skin-majesty .ww-inv2 > * { flex: 0 0 auto; min-width: 0; margin-top: var(--inv2-gap); }

/* ⭐THE MOCK'S WINDOW, NOT THE LIST'S (Wray, 2026-09-28: "the item slots are
   much smaller and ... the windows ... come up a bit short"). Measured on
   the served page at 1920x1080 against the v7 mock, piece by piece:

                     mock        served before this
       window        560 x 962   520 x 838
       content       508         420   (26px from each edge, not 50)
       gear cell     76          63
       stage         312 x 404   258 x 334
       bag cell      56          45

   Three causes, three fixes. The window took the LIST shape (.24 of the
   picture, floored at 520) where the mock drew 560 of 1920 and 962 of 1080.
   Its body kept the 22px gutters every door has for ribbons tucked over its
   edges, so the content sat 50px in where the mock put it 26 (13 per chrome
   pixel, over the rim's inner half). And it stopped above the action bar,
   which world-windows-v2.css now lets a right dock pass when the bar is
   clear of it. Everything inside is a share of the content's width, so the
   cells and the stage follow on their own. On a laptop the share floors at
   520 as before; the body inset still gives it 48px more content. */
body.hud-v2.skin-majesty .ws-sheet[data-door='nine'],
body.hud-v2.skin-majesty .ws-tabs[data-door='nine'] {
  --sk-win-wpct: .2917;
  --sk-win-hpct: .89;
}
@media (min-width: 561px) and (min-height: 541px) {
  /* the sheet's own border is 28 (world-windows-v2.css --w2-bw): the body
     adds only what takes the content to the mock's 13 per chrome pixel, so
     0 at 1 and 2, 11 at 3, 24 at 4 */
  body.hud-v2.skin-majesty .ws-sheet[data-door='nine'] .ws-sheet-body {
    padding-left: max(0px, calc(13px * var(--hv-k) - 28px));
    padding-right: max(0px, calc(13px * var(--hv-k) - 28px));
  }
}
body.hud-v2.skin-majesty .ww-inv2 > .ww-inv2-who { grid-area: who; }
body.hud-v2.skin-majesty .ww-inv2 > .ww-dollbox { grid-area: doll; justify-self: center; }
body.hud-v2.skin-majesty .ww-inv2 > .ww-stats { grid-area: stats; }
body.hud-v2.skin-majesty .ww-inv2 > .ww-socknotes { grid-area: sock; }
body.hud-v2.skin-majesty .ww-inv2 > .ww-inv2-baghead { grid-area: bhead; }
body.hud-v2.skin-majesty .ww-inv2 > .ww-bagnote { grid-area: note; }
body.hud-v2.skin-majesty .ww-inv2 > .ww-bag1 { grid-area: bag; }
body.hud-v2.skin-majesty .ww-inv2 > .ww-footbar { grid-area: foot; }
/* with no POWER to say (a zero is not said, headV2) the stat strip takes the
   whole width, and the empty `who` piece is not drawn at all (an item with
   no area would open a new track) */
body.hud-v2.skin-majesty .ww-bagwrap.ww-inv2:has(> .ww-inv2-who .ww-bagpower[hidden]) {
  grid-template-areas:
    "doll doll doll"
    "stats stats stats"
    "sock sock sock"
    "bhead bhead bhead"
    "note note note"
    "foot foot foot"
    "bag bag bag";
}
body.hud-v2.skin-majesty .ww-inv2 > .ww-inv2-who:has(.ww-bagpower[hidden]) { display: none; }

/* ── 1. THE HEADER: whose it is, and POWER, one row (#3132 INV-8) ─────── */
body.hud-v2.skin-majesty .ww-inv2 .ww-inv2-who {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: auto;
  margin: var(--inv2-gap) 0 0;
  padding: 0 2px;
  border: 0;
}
/* the plate already names the cat: the window does not say it twice */
body.hud-v2.skin-majesty .ww-inv2 .ww-inv2-who .ww-bagowner { display: none; }
/* the name takes the row, wraps to two lines, and only then is cut */
body.hud-v2.skin-majesty .ww-inv2 .ww-bagowner {
  flex: 1 1 0;
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
  text-overflow: clip;
  font-family: var(--hv-f-vt, 'VT323', monospace);
  font-size: calc(14px + 4px * var(--hv-k));
  line-height: 1;
  color: #efe3c8;
}
body.hud-v2.skin-majesty .ww-inv2 .ww-bagpower {
  flex: none;
  display: block;
  font-family: var(--hv-f-px, 'Press Start 2P', monospace);
  font-size: calc(6px + 2px * var(--hv-k));
  /* the mock's #caa982 is 4.2:1 on the slate; this is its hue at 4.8:1 */
  color: #d4b48c;
  white-space: nowrap;
}
/* a zero is not said (world-windows.js headV2) */
body.hud-v2.skin-majesty .ww-inv2 .ww-bagpower[hidden] { display: none; }
body.hud-v2.skin-majesty .ww-inv2 .ww-bagpower i { font-style: normal; }
body.hud-v2.skin-majesty .ww-inv2 .ww-bagpower b { font-weight: 400; color: #efe3c8; margin-left: .6em; }

/* ── 2. THE DOLL: the stage well and six cells round it ──────────────── */
body.hud-v2.skin-majesty .ww-inv2 .ww-dollbox {
  /* a cell's width, as a share of the doll (the mock's 76 of 508); a phone
     floors it at 44px below. A share, so it resolves against the doll
     wherever it is used: the cells, the well between them, the extra cell */
  --cw: 14.9606%;
  position: relative;
  align-self: center;
  /* the floor keeps a gear cell at 32px (a short laptop, 1280x720, whose
     empty bag's note would otherwise take the doll to 176 and its cells to
     26): there a bag with nothing in it shows a row and a half, a bag with
     things in it two */
  /* the mock's 508 is its size at chrome pixel 2; above that it grows with
     the chrome (762 at 3), or a 2560 window's cells stayed the 1920 size in
     a wider window */
  width: min(100cqw, max(508px, calc(254px * var(--hv-k))), max(214px, calc((100cqh - var(--inv2-rest)) * 1.2574)));
  aspect-ratio: 508 / 404;
  /* room above the top row for its two labels */
  margin-top: calc(7px + 3px * var(--hv-k));
}
body.hud-v2.skin-majesty .ww-inv2 .ww-stagewell {
  position: absolute;
  /* its own stacking context, so its frame (::after, z 2) cannot paint over
     the labels the cells beside it hang over its edge */
  z-index: 0;
  /* the cells, and the mock's gap of 12 (2.3622%) either side of them */
  left: calc(4.3307% + var(--cw));
  width: calc(100% - 2 * (4.3307% + var(--cw)));
  top: 0;
  height: 100%;
  overflow: hidden;
  background: #1b243f;
}
/* the frame and the vignette OVER the canvas, so the render meets the rim */
body.hud-v2.skin-majesty .ww-inv2 .ww-stagewell::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow: inset 0 0 0 2px #07090d, inset 0 0 0 4px #4a3b28, inset 0 0 26px 8px rgba(5, 8, 14, .75);
}
body.hud-v2.skin-majesty .ww-inv2 .ww-stage {
  position: absolute;
  left: 4px;
  top: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  display: block;
  image-rendering: pixelated;
  pointer-events: none;
}

/* the six cells: shares of the doll's width, placed by side and row */
body.hud-v2.skin-majesty .ww-inv2 .ww-worn.ww-worn-a {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
  gap: 0;
  pointer-events: none;
}
body.hud-v2.skin-majesty .ww-inv2 .ww-worn-a .ww-wornc {
  position: absolute;
  width: var(--cw);
  height: auto;
  aspect-ratio: 1;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  overflow: visible;
  pointer-events: auto;
  container-type: inline-size;
  background: none;
  box-shadow: none;
  outline: 0;
  opacity: 1;
  border-style: solid;
  border-width: 0;
  border-image: url('/assets/ui/kitb/slate-equip.png?v=2026-09-24a') 8 fill / calc(8 * var(--hv-k) * 1px) stretch;
  image-rendering: pixelated;
  cursor: pointer;
}
body.hud-v2.skin-majesty .ww-inv2 .ww-worn-a .ww-wornc[data-side='l'] { left: 1.9685%; }
body.hud-v2.skin-majesty .ww-inv2 .ww-worn-a .ww-wornc[data-side='r'] { right: 1.9685%; }
body.hud-v2.skin-majesty .ww-inv2 .ww-worn-a .ww-wornc[data-row='0'] { top: 4.9505%; }
body.hud-v2.skin-majesty .ww-inv2 .ww-worn-a .ww-wornc[data-row='1'] { top: 37.1287%; }
body.hud-v2.skin-majesty .ww-inv2 .ww-worn-a .ww-wornc[data-row='2'] { top: 69.3069%; }
body.hud-v2.skin-majesty .ww-inv2 .ww-worn-a .ww-wornc:hover { filter: brightness(1.15); }
/* an empty cell with no starter piece opens nothing, so it offers nothing:
   no hand, no glow (#3153 review N5); it is still a drop target */
body.hud-v2.skin-majesty .ww-inv2 .ww-worn-a .ww-wornc.is-empty:not(.is-virtual) { cursor: default; }
body.hud-v2.skin-majesty .ww-inv2 .ww-worn-a .ww-wornc.is-empty:not(.is-virtual):hover { filter: none; }
/* THE SECOND TRINKET, only while two are worn (world-windows.js
   secondTrinketA): in the stage's bottom corner, beside the first */
body.hud-v2.skin-majesty .ww-inv2 .ww-worn-a .ww-wornc.is-extra[data-slot='trinket_2'] {
  right: auto;
  left: calc(100% - 4.3307% - 1.9685% - 2 * var(--cw));
  top: 69.3069%;
}
/* BUTTON SIX'S CELL (world-windows.js sixCellA, #4097): the mirror of the
   second trinket's corner, in the stage's bottom-left beside BOOTS. Empty
   or full it opens six's window, so it keeps the hand and the glow the
   empty gear cells give up; hidden until the build has landed. */
body.hud-v2.skin-majesty .ww-inv2 .ww-worn-a .ww-wornc.ww-sixc {
  left: calc(4.3307% + 1.9685% + var(--cw));
  top: 69.3069%;
}
body.hud-v2.skin-majesty .ww-inv2 .ww-worn-a .ww-wornc.ww-sixc[hidden] { display: none; }
/* THE GATHERING TOOL'S CELL, on the ladder only (world-windows.js
   syncToolCell, #3629): the stage's bottom-right corner beside TRINKET, the
   mirror of BUTTON 6's. Its height is its data-row's, the rules above: row 2,
   or row 1 (beside FAMILIAR) while the second trinket takes this corner.
   After the side rule, which it overrides, as the second trinket does. */
body.hud-v2.skin-majesty .ww-inv2 .ww-worn-a .ww-wornc[data-slot='tool'] {
  right: auto;
  left: calc(100% - 4.3307% - 1.9685% - 2 * var(--cw));
}
body.hud-v2.skin-majesty .ww-inv2 .ww-worn-a .ww-wornc.ww-sixc.is-empty { cursor: pointer; }
body.hud-v2.skin-majesty .ww-inv2 .ww-worn-a .ww-wornc.ww-sixc.is-empty:hover { filter: brightness(1.15); }
body.hud-v2.skin-majesty .ww-inv2 .ww-worn-a .ww-wornc:focus-visible { outline: 2px solid #e3c79a; outline-offset: 2px; }
/* the dark middle inside the frame, and a worn piece's rarity on its rim */
body.hud-v2.skin-majesty .ww-inv2 .ww-worn-a .ww-wornc::before {
  content: '';
  position: absolute;
  inset: 13%;
  z-index: 0;
  background: radial-gradient(circle at 50% 40%, #2d394b, #121821 75%);
  pointer-events: none;
}
body.hud-v2.skin-majesty .ww-inv2 .ww-worn-a .ww-wornc:not(.is-empty)::before {
  box-shadow: inset 0 0 0 2px var(--r, transparent);
}
/* its slot's name, over it */
body.hud-v2.skin-majesty .ww-inv2 .ww-worn-a .ww-wornc::after {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: calc(2px + 2px * var(--hv-k));
  font-family: var(--hv-f-px, 'Press Start 2P', monospace);
  /* whole px at every chrome pixel: a pixel font at 6.5px blurs (#3153 N2) */
  font-size: calc(4px + 2px * var(--hv-k));
  line-height: 1;
  letter-spacing: .06em;
  color: #d4b48c;
  white-space: nowrap;
  pointer-events: none;
}
/* the item, centred on its own pixels over the middle (and the card six
   holds, its icon painted inline by world-card-icon.js) */
body.hud-v2.skin-majesty .ww-inv2 .ww-worn-a .ww-wornc img,
body.hud-v2.skin-majesty .ww-inv2 .ww-worn-a .ww-wornc .ww-sixart {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 63%;
  height: 63%;
  transform: translate(-50%, -50%);
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}
/* ⛔A PIECE WITH NO ART KEEPS ITS LETTERS IN SIGHT (#3629). unknownArt
   draws a slot with no glyph column (the tool, the boots) as the item's
   first two letters, as the bag does. In flow, they painted UNDER the dark
   middle (::before, positioned), so a worn tool read as an empty cell: the
   ladder's tools have no art yet (#3609). Lifted over it, as a picture is. */
body.hud-v2.skin-majesty .ww-inv2 .ww-worn-a .ww-wornc .ww-abbr {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  font-size: max(15px, 26cqw);
  line-height: 1;
  color: #efe3c8;
  pointer-events: none;
}
/* a starter piece is yours but not a thing you carry: ghosted (L-B18) */
body.hud-v2.skin-majesty .ww-inv2 .ww-worn-a .ww-wornc.is-virtual { outline: 0; }
body.hud-v2.skin-majesty .ww-inv2 .ww-worn-a .ww-wornc.is-virtual img:not(.ww-bootglyph) { opacity: .55; filter: saturate(.5); }
/* the ghost of an empty slot: the grey glyph, sized to the cell */
body.hud-v2.skin-majesty .ww-inv2 .ww-worn-a .we-slot-k {
  z-index: 1;
  width: 42cqw;
  height: 42cqw;
  margin: -21cqw 0 0 -21cqw;
  background-size: calc(42cqw * 6) calc(42cqw * 2);
  background-position: calc(var(--gc, 0) * -42cqw) -42cqw;
  opacity: .6;
}
body.hud-v2.skin-majesty .ww-inv2 .ww-worn-a .ww-wornc img.ww-bootglyph {
  width: 42%;
  height: 42%;
  opacity: .6;
}

/* THE GEM: kit B's socket on the cell's inner-bottom corner (the one that
   faces the cat), empty while the piece's own ability fires, the card's
   painted subject inside the gold rim once one is in */
/* ⭐HALF THE CELL, NOT A THIRD (Wray, 2026-10-01: "Larger sockets on the
   player inventory slots"). At 38cqw the gem was 29px on a 76px cell and the
   card's painted subject inside its rim was 15px: you could see that a card
   was in, never which one. At 54cqw it is 41px and the subject 21px. It
   hangs two fifths of itself off the corner that faces the cat (it was a
   third), so it takes little more of the piece's own picture than before. */
body.hud-v2.skin-majesty .ww-inv2 .ww-worn-a .ww-sockmark {
  --gw: 54cqw;
  --go: calc(var(--gw) * -.4);
  top: auto;
  bottom: var(--go);
  width: var(--gw);
  height: calc(var(--gw) * 20 / 19);
  border: 0;
  box-shadow: none;
  background: url('/assets/ui/kitb/g-sock0.png?v=2026-09-24a') center / 100% 100% no-repeat;
  image-rendering: pixelated;
  z-index: 3;
}
body.hud-v2.skin-majesty .ww-inv2 .ww-worn-a .ww-wornc[data-side='l'] .ww-sockmark { right: var(--go); left: auto; }
body.hud-v2.skin-majesty .ww-inv2 .ww-worn-a .ww-wornc[data-side='r'] .ww-sockmark { left: var(--go); right: auto; }
body.hud-v2.skin-majesty .ww-inv2 .ww-worn-a .ww-sockmark.is-full {
  background-image: url('/assets/ui/kitb/g-sock1.png?v=2026-09-24a');
  box-shadow: none;
}
body.hud-v2.skin-majesty .ww-inv2 .ww-worn-a .ww-sockface {
  position: absolute;
  inset: 24%;
  border-radius: 50%;
  image-rendering: auto;
}

/* ── 3. THE STATS: one strip, each number in its stat's colour ────────── */
/* No frame and no icon (Wray's playtest, 2026-10-04: "icons are overkill,
   i want to go back to the 5 unique colours we have stuck with for each
   stat and just the numbers somewhere, they dont need to be so big"). Each
   is its short word and its total in the stat's own colour, the colour the
   tile's label wore (--stat-* lifted 22% toward white: the plain red read
   4.1:1 on the slate), and what the gear adds after it, small. One line; a
   window too narrow for five wraps whole stats, never a number.
   INV-C (Wray, 2026-10-04, #3734): the cards' style. Each total is a big
   embossed number in its colour, over its small word and what the gear
   adds, so the strip reads as one family with the card's stats row. */
body.hud-v2.skin-majesty .ww-inv2 .ww-stats.is-v2 {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-around;
  /* measured at 1600x900 (chrome pixel 2): five stats take 336 of the 366
     beside POWER at these gaps; at the 5 and 3 they had, 366 exactly, and
     LUCK went to a second line */
  gap: 2px calc(2px + 1px * var(--hv-k));
  margin: var(--inv2-gap) 0 0;
  padding: 0 2px;
}
body.hud-v2.skin-majesty .ww-inv2 .ww-stats.is-v2 .ww-stat {
  --sc: var(--stat-atk);
  display: inline-grid;
  grid-template-columns: auto auto;
  justify-items: center;
  gap: 3px 4px;
  flex: none;
  min-width: 0;
  padding: 0;
  border: 0;
  border-image: none;
  background: none;
  white-space: nowrap;
  font-size: inherit;
}
body.hud-v2.skin-majesty .ww-inv2 .ww-stats.is-v2 .ww-stat[data-k='hp'] { --sc: var(--stat-hp); }
body.hud-v2.skin-majesty .ww-inv2 .ww-stats.is-v2 .ww-stat[data-k='spd'] { --sc: var(--stat-spd); }
body.hud-v2.skin-majesty .ww-inv2 .ww-stats.is-v2 .ww-stat[data-k='def'] { --sc: var(--stat-def); }
body.hud-v2.skin-majesty .ww-inv2 .ww-stats.is-v2 .ww-stat[data-k='luck'] { --sc: var(--stat-luck); }
/* the word and the number in one colour, the one the tile's word wore */
body.hud-v2.skin-majesty .ww-inv2 .ww-stats.is-v2 :is(.ww-statk, .ww-statv) {
  color: var(--sc);
  color: color-mix(in srgb, var(--sc) 78%, #fff);
}
body.hud-v2.skin-majesty .ww-inv2 .ww-stats.is-v2 .ww-statk {
  grid-row: 2;
  grid-column: 1;
  flex: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .95);
  font-family: var(--hv-f-px, 'Press Start 2P', monospace);
  font-size: calc(4px + 2px * var(--hv-k));
  line-height: 1;
  letter-spacing: 0;
}
body.hud-v2.skin-majesty .ww-inv2 .ww-stats.is-v2 .ww-statv {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: center;
  flex: none;
  font-family: var(--hv-f-px, 'Press Start 2P', monospace);
  font-size: calc(8px + 4px * var(--hv-k));
  font-weight: 400;
  line-height: 1;
  color: var(--sc);
  /* embossed: a lit upper edge, a dark lower one, the drop under it */
  text-shadow: -1px -1px 0 color-mix(in srgb, var(--sc) 30%, #fff), 1px 1px 0 rgba(0, 0, 0, .65), 2px 2px 2px rgba(0, 0, 0, .9);
}
body.hud-v2.skin-majesty .ww-inv2 .ww-stats.is-v2 .ww-statb {
  grid-row: 2;
  grid-column: 2;
  flex: none;
  min-width: 0;
  font-family: var(--hv-f-px, 'Press Start 2P', monospace);
  /* whole px at every chrome pixel: a pixel font at a half px blurs */
  font-size: calc(4px + 2px * var(--hv-k));
  font-style: normal;
  line-height: 1;
  color: #b4bfcc;
}
body.hud-v2.skin-majesty .ww-inv2 .ww-stats.is-v2 .ww-statb:empty { display: none; }
body.hud-v2.skin-majesty .ww-inv2 .ww-stats.is-v2 .ww-stat.is-up .ww-statb { color: #8fd89a; }
body.hud-v2.skin-majesty .ww-inv2 .ww-stats.is-v2 .ww-stat.is-down .ww-statb { color: #f4a39c; }
/* POWER at the strip's end, level with it */
body.hud-v2.skin-majesty .ww-inv2 > .ww-inv2-who { align-self: end; }

/* the "stays with your piece" line under the tiles */
body.hud-v2.skin-majesty .ww-inv2 .ww-socknotes { width: auto; }
/* one row where it fits: the line, and the plank beside it rather than
   under it. The window's height budget counts this box (fitInv2), so every
   px it takes is a px of doll or bag (#3153 review, state 5) */
body.hud-v2.skin-majesty .ww-inv2 .ww-socknote {
  margin: 0;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 8px;
  font-size: 15px;
  line-height: 1.1;
  text-align: left;
  color: #efe3c8;
}
body.hud-v2.skin-majesty .ww-inv2 .ww-socknote p { flex: 1 1 0; min-width: 0; }
body.hud-v2.skin-majesty .ww-inv2 .ww-socknote .ww-socknote-go {
  flex: 0 1 auto;
  max-width: 55%;
  min-height: 28px;
  line-height: 1.4;
  white-space: normal;
}
@media (pointer: coarse) {
  body.hud-v2.skin-majesty .ww-inv2 .ww-socknote .ww-socknote-go { min-height: 44px; }
}

/* ── 4. THE BAG'S HEADER: the word, the weight, the Obols ─────────────── */
/* ⛔THE WEIGHT BAR IS THE ONE PIECE THAT GIVES (#3338 review). The count
   joined this row, and on a phone upright the bar went from 143px to 27px:
   its figure ("131 / 100") broke onto three lines over the bag. So the bar
   keeps a floor its figure fits in, the figure never wraps, the count shows
   only its number on a phone (the words stay for a screen reader), and if a
   huge Obols balance still leaves no room, the row wraps whole pieces onto a
   second line rather than squeezing one. */
body.hud-v2.skin-majesty .ww-inv2 .ww-inv2-baghead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px calc(6px + 2px * var(--hv-k));
}
body.hud-v2.skin-majesty .ww-inv2 .ww-inv2-h {
  flex: none;
  font-family: var(--hv-f-px, 'Press Start 2P', monospace);
  font-size: calc(6px + 1px * var(--hv-k));
  letter-spacing: .06em;
  text-transform: uppercase;
  /* 5.0:1 on the slate; #9aa6b6 was 3.8 (#3153 N1) */
  color: #b4bfcc;
}
body.hud-v2.skin-majesty .ww-inv2 .ww-inv2-baghead .ww-carry {
  position: relative;
  /* a basis of 0, so the row breaks on the floor below, never on whatever
     the bar's own content would ask for */
  flex: 1 1 0;
  width: auto;
  /* "999 / 999" in the figure's face (9 glyphs, a glyph is 1em wide), plus
     its 6px inset and 4px of bar showing to its left */
  min-width: calc(9 * (4px + 2px * var(--hv-k)) + 10px);
  max-width: none;
  gap: 0;
}
/* the bar says WEIGHT on its own row in the old window; here the row's word
   is Bag, so the bar's own word goes and its figure sits inside it */
body.hud-v2.skin-majesty .ww-inv2 .ww-inv2-baghead .ww-carry > span { display: none; }
body.hud-v2.skin-majesty .ww-inv2 .ww-inv2-baghead .ww-carry .ws-meter { height: calc(8px + 3px * var(--hv-k)); }
body.hud-v2.skin-majesty .ww-inv2 .ww-inv2-baghead .ww-carry > b {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--hv-f-px, 'Press Start 2P', monospace);
  font-size: calc(4px + 2px * var(--hv-k));
  white-space: nowrap;
  color: #fff;
  text-shadow: 0 2px 0 #000;
  pointer-events: none;
}
/* ⭐THE OBOLS READ AS MONEY, BESIDE THE WEIGHT (Wray's playtest,
   2026-10-04: "obols shown in the inventory window"). The number in the
   wallet's gold, after a rule that parts it from the bar. The chip carries
   `cur-obol`, the currency class world-hud-v2.css draws the Obol icon with
   (its ::before, in front of the number), so the icon is that file's and
   never a second copy here. */
body.hud-v2.skin-majesty .ww-inv2 .ww-obols {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  white-space: nowrap;
  padding-left: calc(4px + 2px * var(--hv-k));
  border-left: 2px solid rgba(232, 213, 169, .18);
  font-family: var(--hv-f-px, 'Press Start 2P', monospace);
  font-size: calc(6px + 2px * var(--hv-k));
  color: #d4b48c;
}
body.hud-v2.skin-majesty .ww-inv2 .ww-obols b { font-weight: 400; color: #f2cf73; }
body.hud-v2.skin-majesty .ww-inv2 .ww-obols i { font-style: normal; }

/* the "where is my gear" line, when the bag is empty */
body.hud-v2.skin-majesty .ww-inv2 .ww-bagnote { color: #d9cdb2; }

/* ── 5. THE WELL: eight across (six on a phone), the one thing that scrolls */
body.hud-v2.skin-majesty .ww-inv2 .ww-bag1 {
  flex: 1 1 0;
  min-height: 0;
  width: auto;
  max-width: none;
  box-sizing: border-box;
  display: grid;
  /* its own count, not --bc: world-windows.js writes --bc inline on the
     grid, and an inline value would beat the phone's six below */
  grid-template-columns: repeat(var(--inv2-cols, 8), minmax(0, 1fr));
  grid-auto-rows: auto;
  align-content: start;
  gap: calc(2px + 2px * var(--hv-k));
  padding: calc(5px + 2px * var(--hv-k));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #0e1319;
  background-image: none;
  box-shadow: inset 0 0 0 2px #07090d, inset 0 0 0 4px #4a3b28, inset 0 6px 10px rgba(0, 0, 0, .6);
}
body.hud-v2.skin-majesty .ww-inv2 .ww-bag1 .ww-slotc {
  width: auto;
  height: auto;
  aspect-ratio: 1;
  min-width: 0;
}
body.hud-v2.skin-majesty .ww-inv2 .ww-bag1 .ww-slotc:focus-visible {
  outline: 2px solid #e3c79a;
  outline-offset: 1px;
}
/* an empty socket is a dark square, not a dimmed frame */
body.hud-v2.skin-majesty .ww-inv2 .ww-bag1 .ww-slotc.ww-empty {
  opacity: 1;
  border-image: none;
  background: linear-gradient(145deg, #0a0e13, #161d26);
  box-shadow: inset 0 0 0 2px #1f2833, inset 2px 2px 0 2px #070a0e;
}
/* a material stack is a button now: it takes the cell's look, not the UA's */
body.hud-v2.skin-majesty .ww-inv2 .ww-bag1 button.ww-matc {
  font: inherit;
  color: inherit;
  padding: 0;
  cursor: pointer;
}

/* ── 6. THE WELL'S TOOL ROW: Bank and Skills tabs, then Sort and Find ─── */
/* ⭐THE FOOT IS THE TOP OF THE WELL NOW (Wray's playtest, 2026-10-04:
   "sort and find are within the inventory windows so the bag and bank both
   have sort features inside there"). The row stands directly on the cells
   (`foot` above `bag`), on the well's own dark ground, framed on its top and
   sides while the cells' box keeps the sides and the foot, so the two read
   as one well with its controls inside it, the way the Bank panel's Sort
   and Find sit inside the Bank. Bank and Skills lead it as tabs (they open
   the panel beside the bag, which carries the same pair over its slots);
   Sort keeps its word and Find takes what is left. */
body.hud-v2.skin-majesty .ww-inv2 .ww-footbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: calc(3px + 1px * var(--hv-k));
  margin: var(--inv2-gap) 0 0;
  padding: calc(5px + 2px * var(--hv-k)) calc(5px + 2px * var(--hv-k)) calc(2px + 1px * var(--hv-k));
  border-top: 0;
  background: #0e1319;
  box-shadow: inset 0 2px 0 #07090d, inset 2px 0 0 #07090d, inset -2px 0 0 #07090d,
    inset 0 4px 0 #4a3b28, inset 4px 0 0 #4a3b28, inset -4px 0 0 #4a3b28;
}
/* the cells' box: its sides and foot, the row above is its top (the row
   comes after the cells in the DOM, so this is keyed on the window's child,
   never a sibling combinator) */
body.hud-v2.skin-majesty .ww-inv2 > .ww-bag1 {
  margin-top: 0;
  box-shadow: inset 0 -2px 0 #07090d, inset 2px 0 0 #07090d, inset -2px 0 0 #07090d,
    inset 0 -4px 0 #4a3b28, inset 4px 0 0 #4a3b28, inset -4px 0 0 #4a3b28;
}
body.hud-v2.skin-majesty .ww-inv2 .ww-count { color: #b4bfcc; }
/* ⛔A <select> IS AS WIDE AS ITS WIDEST OPTION ("Sort: found", 105px), and
   it only ever SHOWS "Sort" (a pick sorts, then the control reads Sort
   again). Sized to that word. ⛔No percentage cap: 38% of a 132px column
   clipped it to "SOR" at 1920 */
body.hud-v2.skin-majesty .ww-inv2 .ww-sort { flex: 0 0 auto; width: calc(54px + 6px * var(--hv-k)); min-width: 0; max-width: none; }
body.hud-v2.skin-majesty .ww-inv2 .ww-find { flex: 1 1 0; min-width: 48px; }
/* the count in the header, beside the word Bag: "12 in the bag", or
   "2 of 12" while Find filters */
body.hud-v2.skin-majesty .ww-inv2 .ww-inv2-baghead .ww-count {
  flex: none;
  white-space: nowrap;
  font-family: var(--hv-f-px, 'Press Start 2P', monospace);
  /* the word Bag's own size beside it (#3338 review: it was a pixel smaller) */
  font-size: calc(6px + 1px * var(--hv-k));
}
/* a phone upright: the number beside the word Bag reads as the count, and
   the words go from sight only, not from a screen reader */
@container (max-width: 393px) {
  body.hud-v2.skin-majesty .ww-inv2 .ww-inv2-baghead .ww-count .ww-count-w {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
/* the tabs: the row's first piece, two small planks; pressed (red) while
   their panel is open, as the footer's buttons were */
body.hud-v2.skin-majesty .ww-inv2 .ww-footbar > .ww-ways.ww-inv2-ways {
  display: flex;
  flex: none;
  flex-wrap: nowrap;
  align-items: center;
  gap: calc(2px + 1px * var(--hv-k));
  width: auto;
  margin: 0 calc(2px + 2px * var(--hv-k)) 0 0;
}
body.hud-v2.skin-majesty .ww-inv2 .ww-inv2-ways .ww-way {
  text-transform: uppercase;
  min-height: 30px;
  padding-left: max(5px, calc(10px - 3px * var(--hv-k)));
  padding-right: max(5px, calc(10px - 3px * var(--hv-k)));
}
body.hud-v2.skin-majesty .ww-inv2 .ww-inv2-ways .ww-way[hidden] { display: none; }
/* ⭐APPEARANCE ON THE DOLL'S FRAME: the stage's top-left corner, opposite
   YOUR CARD (world-player-card.css), in the gold it wore in the footer */
body.hud-v2.skin-majesty .ww-inv2 .ww-dollbox > .ww-appearance {
  position: absolute;
  z-index: 3;
  top: 8px;
  left: calc(4.3307% + var(--cw) + 8px);
  margin: 0;
  min-height: 32px;
  padding-left: 8px;
  padding-right: 8px;
  text-transform: uppercase;
  white-space: nowrap;
  border-image-source: url('/assets/ui/kitb/btngold.png?v=2026-09-24a');
  color: #2a1c0c;
  text-shadow: none;
}
body.hud-v2.skin-majesty .ww-inv2 .ww-dollbox > .ww-appearance[hidden] { display: none; }
/* ⛔A NARROW DOLL HAS NO ROOM FOR BOTH ON ITS TOP EDGE: at 1280x720 the
   doll is 292 wide and its stage 179, and APPEARANCE ran under YOUR CARD.
   Under 380 (a stage of 233, what the two words need side by side at the
   chrome's own size) Appearance moves to the frame's lower rim, centred,
   under the cat's feet. The doll is its own size container for exactly this
   question; nothing inside it reads cqw from the window. */
body.hud-v2.skin-majesty .ww-inv2 .ww-dollbox { container: inv2doll / inline-size; }
@container inv2doll (max-width: 379px) {
  body.hud-v2.skin-majesty .ww-inv2 .ww-dollbox > .ww-appearance {
    top: auto;
    bottom: 6px;
    left: 50%;
    translate: -50% 0;
  }
}
/* ⭐THE ROW AND THE CELLS' MARKS GROW WITH THE CHROME (#3549). The well,
   its cells and every rim grow with --hv-k, and these stayed at their 1920
   size: at 3840x2160 the material icons were 32px in a 115px cell, Find's
   word 7px, and Sort's word had 4px of its 36 left inside a rim drawn at 4
   (12 over, 20 under), so it showed nothing at all. Each takes its 1920
   size (--hv-k 2) times --hv-k / 2 past that, as the item tooltip does
   (world-item-tip.css), and `max()` with what it had keeps a laptop or a
   phone (--hv-k 1) and 1920 exactly as they were.
       --hv-k        2     3     4
       words         8    12    16   (Find's 7: 7, 10.5, 14)
       Sort, Find   34    51    68   tall
       Sort         66    99   132   wide
   The icon and the marks are scaled, not resized: MatIcons draws its sprite
   at whole pixels (mat-icons.js `--mi-k`), and a scale moves no cell. */
body.hud-v2.skin-majesty .ww-inv2 .ww-inv2-ways .ww-way {
  font-size: max(8px, calc(4px * var(--hv-k)));
  min-height: max(30px, calc(15px * var(--hv-k)));
  padding-left: max(5px, calc(10px - 3px * var(--hv-k)), calc(2.5px * var(--hv-k)));
  padding-right: max(5px, calc(10px - 3px * var(--hv-k)), calc(2.5px * var(--hv-k)));
}
body.hud-v2.skin-majesty .ww-inv2 .ww-sort {
  font-size: max(8px, calc(4px * var(--hv-k)));
  height: max(34px, calc(17px * var(--hv-k)));
  width: max(calc(54px + 6px * var(--hv-k)), calc(33px * var(--hv-k)));
}
body.hud-v2.skin-majesty .ww-inv2 .ww-find {
  font-size: max(7px, calc(3.5px * var(--hv-k)));
  height: max(34px, calc(17px * var(--hv-k)));
  padding-left: max(8px, calc(4px * var(--hv-k)));
  padding-right: max(8px, calc(4px * var(--hv-k)));
}
body.hud-v2.skin-majesty .ww-inv2 .ww-bag1 .ww-matc > .mi {
  scale: max(1, calc(var(--hv-k) / 2));
}
/* the count keeps its corner and the NEW mark its own */
body.hud-v2.skin-majesty .ww-inv2 .ww-bag1 .ww-slotc .ww-stackn {
  scale: max(1, calc(var(--hv-k) / 2));
  transform-origin: 100% 100%;
}
body.hud-v2.skin-majesty .ww-inv2 .ww-bag1 .ww-slotc .ww-new {
  scale: max(1, calc(var(--hv-k) / 2));
  transform-origin: 0 0;
}
@media (pointer: coarse) {
  body.hud-v2.skin-majesty .ww-inv2 .ww-inv2-ways .ww-way { min-height: 44px; }
  body.hud-v2.skin-majesty .ww-inv2 .ww-dollbox > .ww-appearance { min-height: 44px; }
  /* Sort and Find are fingers' targets too (they were 34px, #3153 S4) */
  body.hud-v2.skin-majesty .ww-inv2 :is(.ww-sort, .ww-find) { min-height: 44px; }
}
/* ⭐THE PANEL'S OWN BANK AND SKILLS TABS (world-windows.js asideTabStrip):
   the same pair over the panel's slots, so one switches to the other in
   place. Kit B's tab, as the Bank's own place and filter rows draw it
   (world-bank.css section 1), and the one showing in its red. */
body.hud-v2.skin-majesty .ww-aside > .ww-asidetabs {
  display: flex;
  flex: none;
  gap: calc(2px + 1px * var(--hv-k));
  margin: 0 0 calc(4px + 1px * var(--hv-k));
}
body.hud-v2.skin-majesty .ww-aside > .ww-asidetabs > .ww-asidetab {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  min-height: 32px;
  padding: 0 9px;
  margin: 0;
  font-family: var(--hv-f-px, 'Press Start 2P', monospace);
  font-size: 8px;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  color: #d9cdb2;
  background: none;
  cursor: pointer;
  border-style: solid;
  border-image-source: url('/assets/ui/kitb/btn.png?v=2026-09-24a');
  border-image-slice: 3 3 5 3 fill;
  border-image-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-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-repeat: stretch;
  image-rendering: pixelated;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .5);
}
body.hud-v2.skin-majesty .ww-aside > .ww-asidetabs > .ww-asidetab:hover { color: #fff3d6; filter: brightness(1.18); }
body.hud-v2.skin-majesty .ww-aside > .ww-asidetabs > .ww-asidetab[aria-selected='true'] {
  border-image-source: url('/assets/ui/kitb/tab-on-red.png?v=2026-09-24a');
  border-image-slice: 6 fill;
  border-image-width: calc(6 * var(--hv-k) * 1px);
  border-width: calc(3 * var(--hv-k) * 1px);
  color: #f7e6c4;
  text-shadow: 0 2px 0 #5e1414;
  filter: none;
  cursor: default;
}
@media (pointer: coarse) {
  body.hud-v2.skin-majesty .ww-aside > .ww-asidetabs > .ww-asidetab { min-height: 44px; }
}

/* ⭐THE BAG'S COLUMNS COME FROM THE WINDOW'S WIDTH, with a 44px floor on a
   cell (#3153 review S4: six across drew 40px cells at 390 and 35px at
   360). The window is the size container, so these read its own width:
   eight across down to 394px, six down to 298px, then five with a tighter
   gap, then four. At --hv-k 1 each step keeps a cell at 44px or more. */
@container (max-width: 393px) {
  body.hud-v2.skin-majesty .ww-inv2 .ww-bag1 { --inv2-cols: 6; }
}
@container (max-width: 297px) {
  body.hud-v2.skin-majesty .ww-inv2 .ww-bag1 { --inv2-cols: 5; gap: 3px; padding: 5px; }
}
@container (max-width: 241px) {
  body.hud-v2.skin-majesty .ww-inv2 .ww-bag1 { --inv2-cols: 4; }
}

/* ── 7. A PHONE: the doll scaled by its width, not the pixel ───────────── */
@media (max-width: 560px) {
  body.hud-v2.skin-majesty .ww-inv2 .ww-worn-a .ww-wornc::after { font-size: 6px; }
  /* on a phone the doll is the window's full width: a word wider than its
     cell (FAMILIAR) grows toward the cat, never off the window's edge */
  body.hud-v2.skin-majesty .ww-inv2 .ww-worn-a .ww-wornc[data-side='l']::after { left: 0; transform: none; }
  body.hud-v2.skin-majesty .ww-inv2 .ww-worn-a .ww-wornc[data-side='r']::after { left: auto; right: 0; transform: none; }
  /* a gear cell is a finger's target: never under 44px, however narrow
     the doll (it was 41 at 390 and 37 at 360, #3153 S4). The stage well
     gives up the difference, keeping the mock's gap to the cells. */
  body.hud-v2.skin-majesty .ww-inv2 .ww-dollbox { --cw: max(44px, 14.9606%); }
}
/* ⭐A SHORT WINDOW TAKES ITS ROWS IN (#3182). Above the action bar a
   laptop's Inventory is 442px tall at 1366x768 and 394 at 1280x720, and the
   doll's floor (214 wide, 170 tall) plus two rows of the bag has to fit in
   that with everything else. So under 470px the fixed rows give first: the
   gap between rows is 4, the well's pad is 5, and the empty bag's line is
   one small line. (The stat tiles also put their icon beside the number
   here; since 2026-10-04 the stats are one thin strip at every size.) The doll is not touched: it takes what is left, as it
   always did (fitInv2). */
@container (max-height: 469px) {
  /* on the rows, not the window: a container query styles what is inside
     the container, never the container itself */
  body.hud-v2.skin-majesty .ww-inv2 > * { --inv2-gap: 4px; }
  body.hud-v2.skin-majesty .ww-inv2 .ww-bag1 { padding: 5px; }
  body.hud-v2.skin-majesty .ww-inv2 .ww-bagnote { font-size: 15px; line-height: 1; }
  body.hud-v2.skin-majesty .ww-inv2 .ww-bagnote p { margin: 0 0 2px; }
  body.hud-v2.skin-majesty .ww-inv2 .ww-bagnote .ww-bagnote-go { margin: 2px auto 0; }
}

/* ⭐AND A WINDOW TOO SHORT EVEN FOR THAT IS ONE SCROLL COLUMN (#3182). At
   1366x657 the window above the bar is 331px inside, and the doll's floor
   and two rows of the bag need about 400. world-windows.js (fitInv2)
   measures that sum and marks the window `is-scrollcol` when it cannot
   fit; then the WINDOW is the one scroller: the well stops scrolling on its
   own and is as tall as its rows, so nothing scrolls inside something that
   also scrolls, and the drag engine's edge step (world-equip.js
   scrollersOf) already steps the window when the well cannot move. The doll
   scrolls with it: the live doll is copied into its own canvas every frame,
   cut to what shows (world-inventory-doll.js visibleRect), so it cannot
   drift off its box. A phone on its side has its own layout, below. */
@media (min-height: 541px) {
  body.hud-v2.skin-majesty .ww-bagwrap.ww-inv2.is-scrollcol {
    grid-template-rows: auto;
    grid-auto-rows: auto;
    align-content: start;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: #7e6440 rgba(0, 0, 0, .3);
    padding-bottom: 4px;
  }
  /* as tall as its rows: a grid item's `min-height: auto` is its content,
     where the 0 the fixed stack uses would let the row squeeze it */
  body.hud-v2.skin-majesty .ww-inv2.is-scrollcol .ww-bag1 {
    overflow: visible;
    min-height: auto;
  }
  /* ⭐SORT, FIND, BANK AND SKILLS ARE THE TOP OF THE WELL (2026-10-04).
     Until then they were the column's last row, under the fold at 1366x657,
     and stuck to the window's foot so they stayed in view (review of #3198).
     They stand above the cells now, so the column reaches them before the
     bag and nothing needs sticking. fitInv2 still sets `is-fitting` for its
     one read; it is harmless with nothing keyed on it. */
}

/* ⭐A PHONE ON ITS SIDE: THE DOLL BESIDE THE BAG, AND ONE SCROLLER (#3153
   review S6; #3069 S14 PH-F4). The doll stands on the left, and the tiles,
   the bag and its controls on the right. The well is the one thing that
   scrolls: it takes the height the rest leaves, as the laptop's does, and
   its cells are capped at a portrait phone's size. At 844x390 the old rule
   gave the right column four columns of 137px cells and a window that
   scrolled round a well that also scrolled, with Sort, Bank and Skills 90px
   under the window's foot. */
@media (max-height: 540px) {
  body.hud-v2.skin-majesty .ww-bagwrap.ww-inv2 {
    --inv2-gap: 5px;
    container-type: size;
    overflow: hidden;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "doll stats stats who"
      "doll sock sock sock"
      "doll bhead bhead bhead"
      "doll note note note"
      "doll foot foot foot"
      "doll bag bag bag";
    grid-template-rows: auto auto auto auto auto minmax(0, 1fr);
    column-gap: 10px;
  }
  body.hud-v2.skin-majesty .ww-bagwrap.ww-inv2:has(> .ww-inv2-who .ww-bagpower[hidden]) {
    grid-template-areas:
      "doll stats stats stats"
      "doll sock sock sock"
      "doll bhead bhead bhead"
      "doll note note note"
      "doll foot foot foot"
      "doll bag bag bag";
  }
  body.hud-v2.skin-majesty .ww-inv2 > .ww-dollbox {
    align-self: start;
    justify-self: start;
    width: min(200px, 48cqw);
    /* a finger's 44px cells, and a box a little taller than the mock's, so
       the rows stay far enough apart for a label and the gem that hangs
       under the cell above it (at the mock's shape they covered "CHEST") */
    aspect-ratio: 508 / 470;
    --cw: max(44px, 14.9606%);
  }
  body.hud-v2.skin-majesty .ww-inv2 .ww-worn-a .ww-wornc::after { margin-bottom: 2px; }
  /* ⭐TWO SMALL CHIPS ON THE FRAME'S EDGES, NOT TWO BLOCKS OVER THE CAT
     (review of #3681 at 844x390). The stage is ~95 x 185 here, and YOUR
     CARD (44 tall, a finger's target) over its top with APPEARANCE (44
     tall) over its foot hid most of the cat. Each is now a 16px chip
     straddling an edge of the frame: YOUR CARD on the top edge, APPEARANCE
     on the bottom edge, so at most half of each lies over the picture, and
     that half over the frame's dark rim and the empty ground above the hat
     and below the feet. The finger's 44 is kept as an invisible hit area
     round each (::after), the way the Bank's close keeps its own. */
  body.hud-v2.skin-majesty .ww-bagwrap.ww-inv2 .ww-dollbox > :is(.ww-yourcard, .ww-appearance) {
    min-height: 0;
    height: 16px;
    padding: 0 4px;
    margin: 0;
    font-size: 6px;
    line-height: 1;
    letter-spacing: 0;
    border-width: 2px 2px 3px;
    border-image-width: 2px 2px 3px;
    left: 50%;
    right: auto;
    translate: -50% 0;
    overflow: visible;
  }
  body.hud-v2.skin-majesty .ww-bagwrap.ww-inv2 .ww-dollbox > .ww-yourcard { top: -8px; bottom: auto; }
  body.hud-v2.skin-majesty .ww-bagwrap.ww-inv2 .ww-dollbox > .ww-appearance { top: auto; bottom: -8px; }
  body.hud-v2.skin-majesty .ww-bagwrap.ww-inv2 .ww-dollbox > :is(.ww-yourcard, .ww-appearance)::after {
    content: '';
    position: absolute;
    left: -4px;
    right: -4px;
    top: -14px;
    bottom: -14px;
  }
  /* ⛔THE GEM OVER "FAMILIAR" (the same review). A gear cell is 44px here
     whatever the doll's width, and the rows are placed by shares of its
     height: at 508/470 the gap between two rows was 15px, where the label
     over a cell (8) and the gem hanging under the cell above it (10) need
     18, so the weapon's gem sat on "FAMILIAR"'s first letters (and the
     chest's on "BOOTS"). A taller box (508/540) gives the gap 25. */
  body.hud-v2.skin-majesty .ww-inv2 > .ww-dollbox { aspect-ratio: 508 / 540; }
  /* cells no bigger than an upright phone's: as many columns as fit, and
     what is left over split either side rather than all on the right (it
     was 28px there at 844x390, review of #3198) */
  body.hud-v2.skin-majesty .ww-inv2 .ww-bag1 {
    grid-template-columns: repeat(auto-fill, minmax(44px, 56px));
    justify-content: center;
    gap: 3px;
    padding: 5px;
  }
  body.hud-v2.skin-majesty .ww-inv2 .ww-bagnote { font-size: 15px; line-height: 1; }
  body.hud-v2.skin-majesty .ww-inv2 .ww-bagnote p { margin: 0 0 2px; }
  /* the picker's bottom sheet is 90% of 390: a face 84 wide fits whole
     under its lines */
  body.hud-v2.skin-majesty .ww-hover.is-v2pick.is-sheet .wk-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
  body.hud-v2.skin-majesty .ww-hover.is-v2pick.is-sheet .wk-grid > .wk-cell { max-width: 84px; }
}

/* ── 8. THE SOCKET PICKER, OFF THE WINDOW'S LEFT EDGE (#3132 INV-4) ────
   world-windows.js placePicker puts it there (or, with no room, at the foot
   of the screen) and writes the box inline; this is its slate. */
body.hud-v2.skin-majesty .ww-hover.has-socket.is-v2pick {
  box-sizing: border-box;
  min-width: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* the whole picker scrolls, never only its grid: at 1366 the piece's own
     lines left the grid one squashed row (measured) */
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px;
  border-style: solid;
  border-width: calc(14px + 4px * var(--hv-k));
  border-image-source: url('/assets/ui/kitb/slate-window.png?v=2026-09-24a');
  border-image-slice: 18 fill;
  border-image-width: calc(18 * var(--hv-k) * 1px);
  border-image-repeat: stretch;
  background: #3a4760;
  background-clip: padding-box;
  image-rendering: pixelated;
  color: #efe3c8;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
}
body.hud-v2.skin-majesty .ww-hover.is-v2pick > b { color: #e3c79a; }
body.hud-v2.skin-majesty .ww-hover.is-v2pick > i,
body.hud-v2.skin-majesty .ww-hover.is-v2pick p,
body.hud-v2.skin-majesty .ww-hover.is-v2pick .ww-piecebase p { color: #d9cdb2; }
body.hud-v2.skin-majesty .ww-hover.is-v2pick .ww-hover-stats b { color: #b4bfcc; }
body.hud-v2.skin-majesty .ww-hover.is-v2pick .ww-hover-stats i { color: #8fd89a; }
body.hud-v2.skin-majesty .ww-hover.is-v2pick :is(.ww-cmp, .ww-piecebase, .wk-pick) { border-top-color: rgba(232, 213, 169, .16); }
body.hud-v2.skin-majesty .ww-hover.is-v2pick :is(.ww-cmp-hint, .ww-piecehint) { color: #b4bfcc; }
body.hud-v2.skin-majesty .ww-hover.is-v2pick :is(.wk-pick, .wk-read b, .wk-nowtext b) { color: #efe3c8; }
body.hud-v2.skin-majesty .ww-hover.is-v2pick :is(.wk-head, .wk-nowtext i, .wk-read, .wk-note, .wk-none) { color: #d9cdb2; }
body.hud-v2.skin-majesty .ww-hover.is-v2pick .wk-head { color: #e3c79a; }
body.hud-v2.skin-majesty .ww-hover.is-v2pick .wk-nowtext .wk-flav { color: #b4bfcc; }
body.hud-v2.skin-majesty .ww-hover.is-v2pick :is(.wk-pick .wk-need, .wk-note.warn) { color: #f4a39c; }
body.hud-v2.skin-majesty .ww-hover.is-v2pick .wk-pick .vd-card { background: rgba(0, 0, 0, .25); }
body.hud-v2.skin-majesty .ww-hover.is-v2pick .wk-pick .vd-card.sel { outline: 2px solid #fff3cf; outline-offset: -1px; }
/* three faces across in a 390px column, each named under it; the grid is
   as tall as its faces, and the picker round it scrolls */
body.hud-v2.skin-majesty .ww-hover.is-v2pick :is(.wk-pick, .wk-grid) {
  flex: none;
  overflow: visible;
}
/* ⭐FACES AT A FIXED WIDTH (#3153 review S3, N3). Three `1fr` columns drew
   the 240x380 faces as wide as the picker let them, so a bottom sheet on a
   phone held one card taller than its screen, and a narrow column shrank
   them unevenly. Now 100 to 120 px each, as many as fit, centred. (The
   count is taken at the 100px floor: auto-fill with a fixed max counts at
   the MAX, which left one 120px card in a 240px column.) */
body.hud-v2.skin-majesty .ww-hover.is-v2pick .wk-grid {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  max-height: none;
  min-height: 0;
}
body.hud-v2.skin-majesty :is(.ww-hover.is-v2pick, .ws-sheet .wk-sheet) .wk-grid > .wk-cell {
  width: 100%;
  max-width: 120px;
  justify-self: center;
}
body.hud-v2.skin-majesty .ww-hover.is-v2pick .wk-pick .vd-card .vd-name {
  font-family: var(--hv-f-vt, 'VT323', monospace);
  font-size: 16px;
  line-height: 1;
  padding: 3px 2px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* a painted face carries its name on its own banner: the line under it said
   it twice. It stays for EMPTY, a base, and a face whose picture failed (the
   img removes itself on error) */
body.hud-v2.skin-majesty :is(.ww-hover.is-v2pick, .ws-sheet .wk-sheet) .wk-pick .vd-card:not(.base):has(> img) > .vd-name { display: none; }
/* shrunk to half, a face's small print survives smoothing and not nearest-
   pixel sampling (the rarity tag read "COMHDH") */
body.hud-v2.skin-majesty :is(.ww-hover.is-v2pick, .ws-sheet .wk-sheet) .wk-pick .vd-card > img { image-rendering: auto; }
body.hud-v2.skin-majesty .ww-hover.is-v2pick .ww-pickfoot {
  margin: 2px 0 0;
  font-family: var(--hv-f-vt, 'VT323', monospace);
  font-size: 17px;
  line-height: 1.1;
  color: #b4bfcc;
}
/* the plank and the close, in kit B */
body.hud-v2.skin-majesty .ww-hover.is-v2pick :is(.ww-hover-act, .wk-out) {
  border-image-source: url('/assets/ui/kitb/btn.png?v=2026-09-24a');
  border-image-slice: 3 3 5 3 fill;
  border-image-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-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);
  color: #efe3c8;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .5);
}
/* ⭐ONE LETTERING (#3069, point 5): every pinned card's plank, the picker's
   and the bag's Equip and Take off alike, takes the windows' three tokens
   (world-windows-v2.css section 21, stated once on the pass's body). The
   card hangs on <body>, outside every window, so that sheet's rule cannot
   reach it; this line only consumes the tokens, it never restates them. */
body.hud-v2.skin-majesty .ww-hover :is(.ww-hover-act, .wk-out) {
  font-family: var(--hv-act-font);
  text-transform: var(--hv-act-case);
  letter-spacing: var(--hv-act-track);
}
body.hud-v2.skin-majesty .ww-hover.is-v2pick .ww-hover-x {
  top: 2px;
  right: 2px;
  width: calc(20px + 5px * var(--hv-k));
  height: calc(22px + 5px * var(--hv-k));
  padding: 0;
  border: 0;
  border-image: none;
  background: url('/assets/ui/kitb/close.png?v=2026-09-24a') center / 100% 100% no-repeat;
  color: transparent;
  font-size: 0;
  z-index: 3;
}
@media (pointer: coarse) {
  body.hud-v2.skin-majesty .ww-hover.is-v2pick .ww-hover-x { width: 44px; height: 44px; }
}
/* the picker scrolls (61 faces is 30 rows), and its close scrolled away
   with the cards (#3153 review N6/N7): it sticks to the picker's top right
   instead, beside the window or as a phone's bottom sheet. Sticky in a
   column flex box, pulled back over the name with a negative margin so it
   costs no row of its own */
body.hud-v2.skin-majesty .ww-hover.is-v2pick .ww-hover-x {
  position: sticky;
  top: 0;
  align-self: flex-end;
  flex: none;
  margin: 0 0 calc(-22px - 5px * var(--hv-k));
}
@media (pointer: coarse) {
  body.hud-v2.skin-majesty .ww-hover.is-v2pick .ww-hover-x { margin-bottom: -44px; }
}
/* the pointer at the gem it is choosing for: a notch off the picker's
   right edge, level with the gem. FIXED, at the screen point placePicker
   works out (--pt-x, --pt-y), so the picker's own scrolling cannot clip it
   (a fixed box escapes an ancestor's overflow when nothing between them is
   transformed) */
body.hud-v2.skin-majesty .ww-hover.is-v2pick.is-side.has-pointer::after {
  content: '';
  position: fixed;
  left: var(--pt-x, 0px);
  top: calc(var(--pt-y, 0px) - 10px);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 12px;
  border-color: transparent transparent transparent #caa982;
  filter: drop-shadow(2px 0 0 #07090d);
  pointer-events: none;
}
/* the phone's bottom sheet: the box is inline, over everything */
body.hud-v2.skin-majesty .ww-hover.is-v2pick.is-sheet { z-index: 9500; }

/* ── THE BANK PANEL'S FRAMED PAGE (#3132 INV-11) ───────────────────────
   The light rectangle inside the Bank panel was not the page's: it is the
   browser's own 2px inset border on the <iframe> the panel frames it in,
   drawn in the window's ink (measured: the page itself paints no border).
   The sheet's body frames its pages borderless; the panel beside it now
   does too. */
body.hud-v2.skin-majesty .ww-aside iframe { border: 0; }

/* ── 9. BUTTON SIX'S WINDOW (#3689) ────────────────────────────────────
   The empty sixth's window: the bag's picker alone. The CARDS window's row
   of five tabs (#3132 INV-6, C10) went with that window. */
/* the candidates: two across, the whole card, its name under it (HD-10) */
body.hud-v2.skin-majesty .ws-sheet .wk-sheet .wk-grid {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 12px 10px;
}
body.hud-v2.skin-majesty .ws-sheet .wk-sheet .wk-pick .vd-card .vd-name {
  font-family: var(--hv-f-vt, 'VT323', monospace);
  font-size: 18px;
  line-height: 1;
  padding: 4px 2px 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

} /* end of @layer corners */