/* ═══════════════════════════════════════════════════════════════════════
   world-windows-v2.css — SLATE WINDOWS AND THE RED-AND-GOLD TAB (GH #3069,
   slice S8).

   Wray ruled the v7 mock "build it" on 2026-09-24, with windows in SLATE
   ("Windows: Slate. Parchment may still appear on smaller components") and
   one last note: "Settings tabs: the selected tab is red and gold". The
   build plan's default 7 carries that to every window's tab strip, so a
   selected tab looks one way everywhere, and default 8 puts the Inventory
   in slate too (overturning 2026-09-09's "parchment is YOUR STUFF"). This
   file is that pass, and only that: the Inventory keeps its layout (S9
   rebuilds it) and the native Settings panes are a later PR (default 10).

   ── WHAT IT DRESSES ─────────────────────────────────────────────────────
     1. every door window (.ws-sheet, docked left or right, or centred):
        kit B's slate window, the red title ribbon, the red close
     2. the two ribbon strips (.ws-tabs, .ws-tabs-r), the in-window tab row
        (.ws-paneltab) and the Leaderboard's period row (.ww-boardscope):
        slate tabs, the selected one red and gold
     3. the ink: every rule world-skin.css wrote as brown on paper, inside a
        window, restated as light ink on slate (the list is below, by door)
     4. the in-window buttons (btn / btngold), the Play window's cards (the
        mock's slate card), and the two companion windows that are windows
        in their own right: the Leaderboard's profile (.ww-profile) and the
        Inventory's Bank / Builds panel (.ww-aside)
   A framed page (Settings, Guild, the Store's packs) is dressed from
   INSIDE the frame by public/css/framed-v2.css, which world-windows-v2.js
   injects; this file only paints the window round it.

   ── WHY THE CORNERS LAYER, AND WHY IT IS A SEPARATE FILE ────────────────
   world-skin.css (the `skin` layer) draws today's windows and is being
   edited by the #3031 lane as this lands. A `corners` rule beats every
   `skin` rule WHATEVER its specificity (#2920), so nothing here has to
   mirror a skin selector to win, and nothing in world-skin.css has to move.
   The one thing a layer cannot beat is an !important in a LOWER layer
   (!important reverses the order), and world-skin.css has none on anything
   this file restyles (its seven are chat and journal fonts).

   ── WHAT IT LEAVES ALONE ────────────────────────────────────────────────
   - The Map window (S3, world-map-v2.css) already wears this material; every
     chrome rule here skips `[data-door='map']` so the two never race.
   - Every window's GEOMETRY. The sheet keeps its border-width per placement
     (28 page, 32 system, 36 centred, 16 the Play door) because every tuned
     offset is measured from it: the strip's 14px tuck, the full-bleed 28,
     and the bag's 108px of chrome (bagGridFits). kit B's frame is drawn at
     its own chrome pixel over that border, and the title and close are
     placed from the OUTER edge with --w2-bw, the border that placement has.
   - The item hover card (.ww-hover): a small part, and parchment stays for
     small parts. It is appended to <body>, outside every window, so the ink
     rules below (all scoped to a window) never reach it.
   - The podium rows (.ww-rank.is-top): gold, silver and bronze plates with
     their own dark ink, which reads on them as it always did.

   ── THE CHROME PIXEL ────────────────────────────────────────────────────
   --hv-k (world-hud-v2.css): 1 on a laptop or a phone, 2 at 1920x1080, 3
   and 4 above. Every kit piece is drawn at a whole multiple of it.

   Every selector starts at `body.hud-v2`, which only public/js/world-hud-v2.js
   adds, and then `.skin-majesty`, because these windows are the skin's: with
   the flag off this file matches nothing (worldWindowsV2.test.js).
   ═══════════════════════════════════════════════════════════════════════ */
@layer base, module, skin, nerm, corners;

@layer corners {

/* ── 0. THE WINDOW'S INKS ──────────────────────────────────────────────
   Declared ON each window, because a custom property resolves where it is
   declared and the strips are siblings of the sheet, not children. Every
   value is measured against the slate window's flat middle, #3a4760
   (slate-window.png), for WCAG AA at body size (4.5:1):

       --w2-ink    #efe3c8   7.3   what you read
       --w2-ink-2  #d9cdb2   5.9   the secondary line (was #5a4328 on paper)
       --w2-dim    #b4bfcc   5.0   the quiet line (the mock's #9aa6b6 is 3.8,
                                   under AA, so it is lifted to here)
       --w2-gold   #e3c79a   5.7   headings and prices
       --w2-red    #f4a39c   4.7   warnings, "you", a loss
       --w2-green  #8fd89a   5.5   a gain, a done
       --w2-amber  #f5b067   4.8   a warning short of red

   And --sk-ink / --sk-ink-dim, the skin's own two, so every rule that
   already reads them (the in-window tabs, a plank's label) goes light with
   no rule of its own. The system surface's --sk-ink-dim (#93a3b6) is 3.6 on
   this slate, so it is lifted with the rest. */
body.hud-v2.skin-majesty :where(.ws-sheet, .ws-tabs, .ww-profile, .ww-aside) {
  --w2-ink: #efe3c8;
  --w2-ink-2: #d9cdb2;
  --w2-dim: #b4bfcc;
  --w2-gold: #e3c79a;
  --w2-red: #f4a39c;
  --w2-green: #8fd89a;
  --w2-amber: #f5b067;
  --w2-rule: rgba(232, 213, 169, .16);
  --w2-rule-2: rgba(232, 213, 169, .28);
  --w2-slate: #3a4760;               /* slate-window.png's flat middle */
  --w2-card: #2a3345;                /* the mock's slate card */
  --w2-well: #1c2330;                /* an inset: an input, a trough */
  --sk-ink: #efe3c8;
  --sk-ink-dim: #b4bfcc;
  color: var(--w2-ink);
}

/* ── 1. THE WINDOW ─────────────────────────────────────────────────────
   kit B's slate window (141x94, rim 18: gold corner ornaments round a flat
   #3a4760 middle), nine-sliced at the chrome pixel. `fill` is safe where it
   was not on the paper (world-skin.css's note on banding): slate.py drew the
   middle flat, one colour, so a non-integer stretch has nothing to band.
   The colour under it is the floor if the art has not decoded, clipped to
   the padding box so no straight edge shows behind the ornaments.

   --w2-bw is the border this placement already has (see the header): the
   title and the close are placed from the OUTER edge with it, so they land
   in the same spot on every door whatever its border. The order below is
   the skin's own precedence, restated: the system surface over the page,
   the Play door's thinner edge only on the page, and centred over all. */
body.hud-v2.skin-majesty .ws-sheet:not([data-door='map']) {
  --w2-bw: 28px;
  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-outset: 0;
  border-image-repeat: stretch;
  background-image: none;
  background-color: var(--w2-slate);
  background-clip: padding-box;
  image-rendering: pixelated;
}
body.hud-v2.skin-majesty .ws-sheet[data-surface='system']:not([data-door='map']) { --w2-bw: 32px; }
body.hud-v2.skin-majesty .ws-sheet[data-door='arena']:not([data-surface='system']) { --w2-bw: 16px; }
body.hud-v2.skin-majesty .ws-sheet[data-side='centre']:not([data-door='map']) { --w2-bw: 36px; }

/* THE TOP ROW HOLDS NOTHING IN FLOW NOW. The title and the close are both
   placed against the sheet, so the row is static (the sheet, which is
   fixed, becomes their containing block) and keeps the 24px it has always
   taken (2 + 18 + 4: its padding and the old ribbon's in-flow height), so
   the page below it starts exactly where it did. */
body.hud-v2.skin-majesty .ws-sheet:not([data-door='map']) .ws-sheet-top {
  position: static;
  box-sizing: border-box;
  min-height: 24px;
}

/* THE TITLE, on kit B's red ribbon (title.png, 116x28: a plank on rows 2-19
   with its swallowtails on the bottom 9 rows). It straddles the top edge the
   way the mock's does: 11 chrome pixels above the outer edge, so the plank
   covers the frame's rail and its tails hang into the window. The padding
   keeps the words off the tails (24 art columns each side) and centres them
   on the plank, not on the box (S3's numbers, measured on the Map window).
   The tome is a 16px face: 16 at the chrome pixel is its whole step.
   ⛔THERE IS NO DROP CAP TO KEEP OR LOSE. world-skin.css writes a gold
   ::first-letter for this title, but the title is `display: flex`, and
   ::first-letter does not apply to a flex container: the first letter is
   the words' colour with the flag on AND off (measured on the served page).
   So this title and S3's Map title agree; nothing here changes the cap. */
body.hud-v2.skin-majesty .ws-sheet:not([data-door='map']) .ws-sheet-title {
  top: calc(-1 * var(--w2-bw, 28px) - 11 * var(--hv-k) * 1px);
  translate: -50% 0;
  height: calc(28 * var(--hv-k) * 1px);
  min-width: calc(116 * var(--hv-k) * 1px);
  max-width: 70%;
  box-sizing: border-box;
  padding: calc(2 * var(--hv-k) * 1px) calc(28 * var(--hv-k) * 1px) calc(9 * var(--hv-k) * 1px);
  border-style: solid;
  border-width: 0;
  border-image-source: url('/assets/ui/kitb/title.png?v=2026-09-24a');
  border-image-slice: 2 24 9 24 fill;
  border-image-width: calc(2 * var(--hv-k) * 1px) calc(24 * var(--hv-k) * 1px) calc(9 * var(--hv-k) * 1px) calc(24 * var(--hv-k) * 1px);
  border-image-repeat: stretch;
  font-family: var(--sk-tome);
  font-size: calc(16 * var(--hv-k) * 1px);
  line-height: 1;
  color: #f7e6c4;
  text-shadow: 0 calc(var(--hv-k) * 1px) 0 #5e1414;
}
/* ON WHOLE PIXELS. The ribbon is centred with `left: 50%; translate: -50%`,
   and its width is its words: an odd width (the Leaderboard's is 283) put it
   at x.5, and the nine-slice drew each slice on its own snapped edge, so the
   slate showed through both joins as purple lines down the red plank
   (measured at x108 and x296). Both halves are rounded to a pixel where the
   browser has round(); one without it keeps the plain -50% above. */
@supports (translate: round(-50%, 1px) 0) {
  body.hud-v2.skin-majesty .ws-sheet:not([data-door='map']) .ws-sheet-title {
    left: round(50%, 1px);
    translate: round(-50%, 1px) 0;
  }
}

/* THE CLOSE, kit B's red square (close.png, 25x27), whole at the chrome
   pixel, riding the top edge with the title: its top is the title's top (11
   chrome pixels above the outer edge) and it stands 9 inside the outer
   right edge, over the frame's corner ornament.
   ⛔NOT INSIDE THE CORNER, where the mock drew it. The mock's window had a
   header row that stopped short of the corner; ours run their content to
   the edge, and inside the corner the button sat on the Play window's first
   card and on Help's "not started", because the Play door's border is 16px
   and its page starts 40px down (measured at 1920x1080). On the edge, like
   the title, it clears every door's page.
   Its "X" is the art's, so the button's own label goes (its accessible name
   "Close" stays, world-shell.js). */
body.hud-v2.skin-majesty .ws-sheet:not([data-door='map']) .ws-sheet-top .wr-plank {
  position: absolute;
  z-index: 4;
  top: calc(-1 * var(--w2-bw, 28px) - 11 * var(--hv-k) * 1px);
  right: calc(-1 * var(--w2-bw, 28px) + 9 * var(--hv-k) * 1px);
  translate: none;
  margin: 0;
  width: calc(25 * var(--hv-k) * 1px);
  min-width: 0;
  height: calc(27 * var(--hv-k) * 1px);
  min-height: 0;
  padding: 0;
  border: 0;
  border-image: none;
  background: url('/assets/ui/kitb/close.png?v=2026-09-24a') center / 100% 100% no-repeat;
  box-shadow: none;
  color: transparent;
  font-size: 0;
  text-shadow: none;
  image-rendering: pixelated;
}
body.hud-v2.skin-majesty .ws-sheet:not([data-door='map']) .ws-sheet-top .wr-plank:hover {
  border-image: none;
  background: url('/assets/ui/kitb/close.png?v=2026-09-24a') center / 100% 100% no-repeat;
  color: transparent;
  filter: brightness(1.15);
}
body.hud-v2.skin-majesty .ws-sheet:not([data-door='map']) .ws-sheet-top .wr-plank:focus-visible {
  outline: 2px solid var(--w2-gold);
  outline-offset: 2px;
}
/* (The right dock's close used to be pulled in by the 28px bleed, because
   the dock ran 28px off the screen under full bleed. The docks stand inside
   the screen now, section 7, so the close sits on the corner like every
   other window's.) */
/* A THUMB gets the art at 2, never under the 44px tap floor (#2490). On a
   phone the window hangs 16px from the screen's top, so the edge-riding
   place would put the button's top off the screen; it comes down to 2px
   from the screen's top (the window's outer edge less 14) and ends at 40,
   where the phone's tab row starts (world-skin.css: top + 40). */
@media (pointer: coarse) {
  body.hud-v2.skin-majesty .ws-sheet:not([data-door='map']) .ws-sheet-top .wr-plank {
    width: 50px;
    height: 54px;
    top: calc(-1 * var(--w2-bw, 28px) - 14px);
    right: calc(-1 * var(--w2-bw, 28px) + 8px);
  }
}

/* ⛔AT --hv-k 3 AND 4 THE RISE WOULD LAND ON THE DOOR ROW. The window's top
   is a fixed 96px from the screen's top (world-skin.css --sk-win-top) while
   the door row grows with the chrome pixel (world-doors-v2.css: tiles 48, 72,
   96 from --an-edge down). Measured on the served page, Settings open:

       2560x1440 (k 3)  row ends at 84, the rise put the title and close at
                        63: the title took the clicks on the bottom 21px of
                        five doors, the close on the news mark's
       3840x2160 (k 4)  the row ends at 112, past the window's own top

   So above 2400x1350 the rise is whatever keeps them clear of the row and of
   the lit door's glow (3 chrome pixels under the tile): 11 chrome pixels at
   most, 3px at 2560, and at 3840 a DROP of 28 into the window, because
   there the row already reaches past the window's top. The top row then
   grows to hold what the ribbon hangs into the window, so the page starts
   under the ribbon's tails as it does at 1920 (the tails end 18px above it
   there). At 1920 and under nothing here applies: the row ends at 60 and the
   rise of 22 clears it by 14. The window's own top overlapping the row at
   3840 is the skin's geometry, not this file's (#3031). */
@media (min-width: 2400px) and (min-height: 1350px) {
  body.hud-v2.skin-majesty .ws-sheet:not([data-door='map']) {
    --w2-rise: min(
      calc(11px * var(--hv-k)),
      calc(var(--sk-win-top, 96px) - var(--an-edge, 12px) - var(--an-tile, 72px) - 3px * var(--hv-k))
    );
  }
  body.hud-v2.skin-majesty .ws-sheet:not([data-door='map']) .ws-sheet-title,
  body.hud-v2.skin-majesty .ws-sheet:not([data-door='map']) .ws-sheet-top .wr-plank {
    top: calc(-1 * var(--w2-bw, 28px) - var(--w2-rise, 0px));
  }
  body.hud-v2.skin-majesty .ws-sheet:not([data-door='map']) .ws-sheet-top {
    min-height: max(24px, calc(28px * var(--hv-k) - var(--w2-rise, 0px) - var(--w2-bw, 28px) + 4px));
  }
}

/* ── 2. THE TABS: SLATE, AND THE SELECTED ONE RED AND GOLD ─────────────
   Idle: slate-tab.png (23x57, a gold-edged slate plank), nine-sliced on a
   6-pixel rim, so it draws at any length. Selected: kit B's red and gold
   (Wray's note 2, default 7), in three shapes from one piece
   (promote.py red_tab / red_tabs):
     tab-side-on-red.png       arrow RIGHT: a strip on a window's LEFT edge
     tab-side-on-red-flip.png  arrow LEFT: a strip on a window's RIGHT edge
     tab-on-red.png            no arrow: a tab inside a window, or the
                               phone's row, where there is nothing beside
                               it to point at
   The run-out (104 idle, 122 hover, 156 chosen) and its stepped transition
   are the skin's and stay; only the art, the ink and the rim change. */
body.hud-v2.skin-majesty .ws-tabs .wr-plank {
  height: max(30px, calc(20 * var(--hv-k) * 1px));
  border-style: solid;
  border-width: 0;
  border-image-source: url('/assets/ui/kitb/slate-tab.png?v=2026-09-24a');
  border-image-slice: 6 fill;
  border-image-width: calc(6 * var(--hv-k) * 1px);
  border-image-repeat: stretch;
  padding-top: 0;
  padding-bottom: 0;
  color: var(--w2-ink-2);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .55);
}
body.hud-v2.skin-majesty .ws-tabs .wr-plank:hover {
  filter: brightness(1.15);
  color: var(--w2-ink);
}
body.hud-v2.skin-majesty .ws-tabs .wr-plank[aria-current='page'] {
  filter: none;
  color: #f7e6c4;
  text-shadow: 0 2px 0 #5e1414;
}

/* ⭐KEYED ON THE EDGE, NEVER ON WHICH STRIP (world-skin.css's own rule, "THE
   RIBBONS HANG OFF THE EDGE THAT FACES THE MIDDLE"). showSheet writes the
   same `data-edge` on BOTH strips, and syncStrips hangs both off that edge:
   a left dock's two strips off its right, a right or centred window's two
   off its left (world-shell.js). So `.ws-tabs-r` is not "the right-hand
   strip" and gets no rule of its own here; keyed on its class, its chosen
   tab would point away from a right dock and be pushed 28px under it.

   A STRIP ON A WINDOW'S LEFT EDGE (a right or centred window): the tabs run
   out to the left and point right, into the window. The words sit at the
   outer end, clear of the 12-pixel rim on that side; the other end is under
   the window. */
body.hud-v2.skin-majesty .ws-tabs[data-edge='left'] .wr-plank {
  padding-left: calc(6 * var(--hv-k) * 1px + 6px);
  padding-right: calc(10 * var(--hv-k) * 1px + 16px);
}
body.hud-v2.skin-majesty .ws-tabs[data-edge='left'] .wr-plank[aria-current='page'] {
  border-image-source: url('/assets/ui/kitb/tab-side-on-red.png?v=2026-09-24a');
  border-image-slice: 6 10 6 6 fill;
  border-image-width: calc(6 * var(--hv-k) * 1px) calc(10 * var(--hv-k) * 1px) calc(6 * var(--hv-k) * 1px) calc(6 * var(--hv-k) * 1px);
}

/* A STRIP ON A WINDOW'S RIGHT EDGE (a left dock: the Leaderboard's):
   mirrored, words at the outer (right) end, arrow pointing left into the
   window. */
body.hud-v2.skin-majesty .ws-tabs[data-edge='right'] .wr-plank {
  padding-left: calc(10 * var(--hv-k) * 1px + 16px);
  padding-right: calc(6 * var(--hv-k) * 1px + 6px);
}
body.hud-v2.skin-majesty .ws-tabs[data-edge='right'] .wr-plank[aria-current='page'] {
  border-image-source: url('/assets/ui/kitb/tab-side-on-red-flip.png?v=2026-09-24a');
  border-image-slice: 6 6 6 10 fill;
  border-image-width: calc(6 * var(--hv-k) * 1px) calc(6 * var(--hv-k) * 1px) calc(6 * var(--hv-k) * 1px) calc(10 * var(--hv-k) * 1px);
}

/* THE ARROW HAS TO BE SEEN. The strips tuck 14px behind the window (Wray,
   2026-09-04: behind, not on top), and the red tab's arrow is its last 7
   art pixels: 14px at the chrome pixel of 2, exactly the tuck, so it drew
   entirely under the frame. The strip moves out by the tuck, so the tabs
   meet the window's edge (still behind it, z 59 under 60) and the arrow
   touches the frame. syncStrips writes `left` inline every frame, so the
   move is a margin, which it never touches (worldDock pins its constants).
   Both strips on an edge are tucked the same 14 (syncStrips), so both move
   the same way. */
@media (min-width: 901px) {
  body.hud-v2.skin-majesty .ws-tabs[data-edge='left'] { margin-left: -14px; }
  body.hud-v2.skin-majesty .ws-tabs[data-edge='right'] { margin-left: 14px; }
}

/* ON A PHONE THE STRIP IS A ROW INSIDE THE WINDOW (#2557): no window beside
   it, so the chosen tab is the arrowless red and gold, and the row keeps its
   44px tap floor (the non-media rules above would otherwise out-weigh the
   skin's row, which is (0,4,1) in a lower layer anyway). */
@media (max-width: 900px) {
  body.hud-v2.skin-majesty .ws-tabs .wr-plank,
  body.hud-v2.skin-majesty .ws-tabs[data-edge] .wr-plank {
    height: 44px;
    padding-left: 12px;
    padding-right: 12px;
  }
  body.hud-v2.skin-majesty .ws-tabs[data-edge] .wr-plank[aria-current='page'] {
    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);
  }
}

/* THE TAB ROW INSIDE A WINDOW (the Store's, the Spellbook's, a station's) and
   the Leaderboard's period row: the same two pieces, arrowless. */
body.hud-v2.skin-majesty .ws-paneltab,
body.hud-v2.skin-majesty .ww-boardscope {
  border-style: solid;
  border-width: calc(6 * var(--hv-k) * 1px);
  border-image-source: url('/assets/ui/kitb/slate-tab.png?v=2026-09-24a');
  border-image-slice: 6 fill;
  border-image-width: calc(6 * var(--hv-k) * 1px);
  border-image-repeat: stretch;
  padding: 0 6px;
  color: var(--w2-ink-2);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .55);
}
body.hud-v2.skin-majesty .ws-paneltab:hover,
body.hud-v2.skin-majesty .ww-boardscope:hover {
  border-image-source: url('/assets/ui/kitb/slate-tab.png?v=2026-09-24a');
  filter: brightness(1.15);
  color: var(--w2-ink);
}
body.hud-v2.skin-majesty .ws-paneltab:active,
body.hud-v2.skin-majesty .ww-boardscope:active {
  border-image-source: url('/assets/ui/kitb/slate-tab.png?v=2026-09-24a');
}
body.hud-v2.skin-majesty .ws-paneltab[aria-current='page'],
body.hud-v2.skin-majesty span.ws-paneltab:hover,
body.hud-v2.skin-majesty span.ws-paneltab:active,
body.hud-v2.skin-majesty .ww-boardscope[aria-current='page'] {
  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;
}
/* the rule under the row, and under the Leaderboard's bar */
body.hud-v2.skin-majesty .ws-sheet .ws-panelnav,
body.hud-v2.skin-majesty .ws-sheet .ww-boardbar {
  border-bottom-color: var(--w2-rule);
}

/* ── 3. IN-WINDOW BUTTONS ─────────────────────────────────────────────
   kit B's slate button (btn.png, rim 3 3 5 3) for every plank a window
   draws in its body, and the gold one (btngold.png) for the one thing a
   window asks you to do. Border-width is the rim itself, so a button's
   label keeps clear of the drawn edge at any chrome pixel; the 44px tap
   floor (#2490) is the skin's and stays. */
body.hud-v2.skin-majesty :where(.ws-sheet-body, .ww-profile, .ww-aside) :is(.wr-plank, .ww-q-claim, .ww-help-go, .ww-house-cta, .ww-claim, .ww-way, .ww-sort) {
  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;
  color: var(--w2-ink);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .5);
}
body.hud-v2.skin-majesty :where(.ws-sheet-body, .ww-profile, .ww-aside) :is(.wr-plank, .ww-q-claim, .ww-help-go, .ww-house-cta, .ww-claim, .ww-way, .ww-sort):hover {
  border-image-source: url('/assets/ui/kitb/btn.png?v=2026-09-24a');
  color: #fff3d6;
  filter: brightness(1.18);
}
body.hud-v2.skin-majesty :where(.ws-sheet-body, .ww-profile, .ww-aside) :is(.wr-plank, .ww-q-claim, .ww-help-go, .ww-house-cta, .ww-claim, .ww-way, .ww-sort):active {
  border-image-source: url('/assets/ui/kitb/btn.png?v=2026-09-24a');
  filter: brightness(.92);
}
body.hud-v2.skin-majesty :where(.ws-sheet-body, .ww-profile, .ww-aside) :is(.wr-plank:is([aria-current='page'], [aria-pressed='true']), .ww-way[aria-expanded='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);
  color: #f7e6c4;
  text-shadow: 0 2px 0 #5e1414;
  filter: none;
}
/* the one thing a window asks of you: gold, ink on gold (btngold.png's flat
   face is #dda52c; #2a1c0c on it is 7.5:1) */
body.hud-v2.skin-majesty :where(.ws-sheet-body, .ww-profile, .ww-aside) :is(.ww-help-go, .ww-house-cta, .ww-claim, .ww-q-claim) {
  border-image-source: url('/assets/ui/kitb/btngold.png?v=2026-09-24a');
  color: #2a1c0c;
  text-shadow: none;
}
body.hud-v2.skin-majesty :where(.ws-sheet-body, .ww-profile, .ww-aside) :is(.ww-help-go, .ww-house-cta, .ww-claim, .ww-q-claim):hover {
  border-image-source: url('/assets/ui/kitb/btngold.png?v=2026-09-24a');
  color: #1d1406;
}
/* "YOU BELONG HERE" is the House tab's CTA disabled, and it is the one place
   the tab says the house is yours: a state, not a dead button. The skin draws
   it as the gold plank at .55, which on slate is 2.9:1 (measured on the
   served page); here it is the slate plank with the word in gold at full
   strength (6.7:1 on btn.png's #363d4f). */
body.hud-v2.skin-majesty .ws-sheet .ww-house-cta:disabled {
  border-image-source: url('/assets/ui/kitb/btn.png?v=2026-09-24a');
  color: var(--w2-gold);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .5);
  opacity: 1;
  filter: none;
}
body.hud-v2.skin-majesty :where(.ws-sheet-body, .ww-profile, .ww-aside) :is(.wr-plank, .ww-q-claim):is(:disabled, [aria-disabled='true']) {
  border-image-source: url('/assets/ui/kitb/btn.png?v=2026-09-24a');
  color: var(--w2-dim);
  filter: none;
}

/* ── 4. CARDS: the mock's slate card (.stage.slateW .card) ───────────────
   A darker slate panel with a black line, a gold line inside it and a gold
   lip along the top; its heading in gold. The Play window's mode cards are
   the cards a native window draws today; the Leaderboard profile's well is
   the same object. */
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-profile, .ww-aside) :is(.ww-mode, .ww-profwell) {
  background: var(--w2-card);
  border: 0;
  box-shadow: inset 0 0 0 2px #0b0f15, inset 0 0 0 4px #7e6440, inset 0 5px 0 2px #caa982;
}
body.hud-v2.skin-majesty .ws-sheet .ww-mode { padding: 12px 14px 12px; margin-bottom: 6px; }
body.hud-v2.skin-majesty .ws-sheet .ww-mode:hover { background: #313c51; }
body.hud-v2.skin-majesty .ws-sheet .ww-mode-t b,
body.hud-v2.skin-majesty .ww-profile .ww-profh { color: var(--w2-gold); }

/* ── 4b. THE SETTINGS DOOR, CENTRED (#3069 S13, SET-3 / C6) ────────────
   The mock's Settings is a slate window in the middle of the picture,
   860x700 at 1920x1080, with seven tabs down its left side (You, Game,
   Wallet, Links, Help, House, Credits: world-shell.js's record door under
   v2). The door keeps `side: 'right'`, so its ribbons hang off its LEFT
   edge like any right dock's, and world-shell.js pins them to the sheet's
   MEASURED rectangle every frame (syncStrips), wherever this puts it. So
   only the window's size and place are asked for here, and only where
   there is room for ribbons beside it: under 901px the strips are a row
   inside the window, and a phone's window is S12's.

       --hv-k 1 (a laptop)  700 x 560     --hv-k 2 (1920x1080)  860 x 700
       --hv-k 3             1020 x 840    --hv-k 4              1180 x 980

   Clamped under the door row (the skin's 96px window top) and above the
   action bar (--w0bar-h, the bar's measured height, published on the root
   by world-legacy-door.js; 110 when nothing has measured it), and centred
   in what is left, a little right of the middle so the ribbons and the
   window sit centred together (the mock's 30px at 2). The close rides the
   window's own corner, not a right dock's bled one (--w2-bleed-r). The
   :not(map) is this file's rule for every chrome selector (the Map window
   is world-map-v2.css's), redundant on a door named here.

   ⛔`.ws-sheet.ws-sheet` IS ON PURPOSE. The windows slice's dock rules
   (".frame-fill-desktop .ws-sheet[data-side='right']:not(map)", which put a
   right dock 12 chrome pixels in from the screen's edge) weigh exactly what
   this door's rule did, 0,6,1, and sit later in this file, so they won and
   docked Settings to the right at 1036 to 1896 instead of centring it
   (served with both slices merged, 2026-09-25). The doubled class lifts
   this door to 0,7,1 whatever order the two land in. The band stops 16px
   above the bar, the same clearance every other window keeps. */
@media (min-width: 901px) {
  body.hud-v2.skin-majesty .ws-sheet.ws-sheet[data-side='right'][data-door='record']:not([data-door='map']),
  body.hud-v2.skin-majesty .ws-tabs.ws-tabs[data-side='right'][data-door='record'] {
    --sk-win-w: calc(540px + 160px * var(--hv-k));
    --sk-win-h: calc(420px + 140px * var(--hv-k));
    --sk-win-band: calc(var(--fh, 100vh) - var(--w0bar-h, 110px) - 16px);
    --sk-win-top: max(96px, calc((var(--fh, 100vh) - var(--w0bar-h, 110px) - 16px - var(--sk-win-h)) / 2));
  }
  /* ...and never over the minimap. Centred, a 1280 laptop's 700px window
     ran 38px onto the map corner (served 2026-09-25), so its right edge
     stops short of the corner (--an-map-w, world-albion.css, plus the
     corner's side column and gutter), and the window moves left into the
     room the ribbons leave, never further than the ribbons' own width
     (the chosen one's run-out, below, and a gutter). At 1920 the centred
     place already clears the map. */
  body.hud-v2.skin-majesty .ws-sheet.ws-sheet[data-side='right'][data-door='record']:not([data-door='map']) {
    left: calc(var(--fx, 0px) + max(128px + 16px * var(--hv-k),
      min((var(--fw, 100vw) - var(--sk-win-cw)) / 2 + 15px * var(--hv-k),
        var(--fw, 100vw) - var(--sk-win-cw) - var(--an-map-w, 280px) - 72px)));
    --w2-bleed-r: 0px;
  }
  /* SEVEN TABS OF ONE LENGTH, the mock's column (.vtab 150, the chosen one
     164 and proud of the rest). The skin sizes a ribbon by its word, which
     is right for the bag's filters and left Wallet and Credits sticking out
     of this column like a ragged edge. One length for every idle tab (the
     longest word, Credits, with room), the skin's hover and chosen run-outs
     on top of it. */
  body.hud-v2.skin-majesty .ws-tabs[data-door='record'][data-edge='left'] .wr-plank {
    width: auto;
    min-width: calc(92px + 16px * var(--hv-k));
  }
  body.hud-v2.skin-majesty .ws-tabs[data-door='record'][data-edge='left'] .wr-plank:hover {
    min-width: calc(110px + 16px * var(--hv-k));
  }
  body.hud-v2.skin-majesty .ws-tabs[data-door='record'][data-edge='left'] .wr-plank[aria-current='page'] {
    min-width: calc(124px + 16px * var(--hv-k));
  }
}
/* ON A PHONE THE SEVEN TABS ARE A COMPACT ROW (#3069 S13, the review
   2026-09-25). Below 901px the ribbons become a row along the window's top
   (world-skin.css, "ON A PHONE THE STRIPS COME INSIDE"), each at least 88px,
   so this door's seven showed three and a half ("You Game Wallet Link...")
   and Help, House and Credits sat behind a swipe nothing hinted at. Sized
   to their words, the mock's compact phone tabs, six show whole and the
   seventh is cut at the edge, which is itself the sign the row scrolls. The
   tabs stay 44px tall (the thumb floor). */
@media (max-width: 900px) {
  body.hud-v2.skin-majesty .ws-tabs.ws-tabs[data-door='record'] { gap: 4px; }
  body.hud-v2.skin-majesty .ws-tabs.ws-tabs[data-door='record'] .wr-plank,
  body.hud-v2.skin-majesty .ws-tabs.ws-tabs[data-door='record'][data-edge] .wr-plank {
    min-width: 0;
    padding-left: 6px;
    padding-right: 6px;
    font-size: 8px;
  }
}

/* ── 5. THE INK, DOOR BY DOOR ──────────────────────────────────────────
   Every rule world-skin.css writes in a paper ink (#2e2113, #3a2412,
   #5a4328, #6b5233, #8a7355, #8a6420, #a4343a and their kin) inside a
   window, restated on slate. Scoped to a window, so the hover card and the
   rail are never touched; the podium plates are left out on purpose (see
   the header). The skin's system-surface counterparts (Help, House, the
   Spellbook, $9LV) are covered by the same lines, because the ink no longer
   depends on the surface: every window is slate. */

/* the window itself, and the framed page's waiting and failed panels */
body.hud-v2.skin-majesty .ws-sheet:not([data-door='map']),
body.hud-v2.skin-majesty .ws-sheet-body .ww-bag,
body.hud-v2.skin-majesty .ws-frame-state { color: var(--w2-ink); }
body.hud-v2.skin-majesty .ws-frame-head { color: var(--w2-gold); }

/* shared window words */
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-profile, .ww-aside) :is(.ww-h, .ww-bal-v) { color: var(--w2-ink); }
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-profile, .ww-aside) :is(.ww-k, .ww-count, .ww-none, .ww-state, .ww-foot, .ww-gap, .ww-note, .ww-spellsnote p) { color: var(--w2-ink-2); }
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-profile, .ww-aside) .ww-bal b { color: var(--w2-gold); }
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-profile, .ww-aside) .ww-more { color: var(--w2-red); }

/* Leaderboard (board, houses, guilds) */
/* ⛔NOT the podium: its plates are gold, silver and bronze, and a light name
   on the silver one was unreadable (measured on the first cut) */
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-profile) .ww-rank:not(.is-top) { color: var(--w2-ink); }
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-profile) .ww-rank:not(.is-top):not(.is-you):nth-child(even) { background-color: rgba(0, 0, 0, .14); }
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-profile) .ww-rank:not(.is-top) :is(.ww-rk, .ww-note, .ww-crest-t) { color: var(--w2-ink-2); }
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-profile) .ww-rank:not(.is-top) .ww-score { color: var(--w2-ink); }
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-profile) .ww-rank:not(.is-top) .ww-cap { color: var(--w2-red); }
/* the podium keeps its plate's own dark ink: the shared `.ww-note` line
   above would otherwise light "27 cats" on the gold plate */
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-profile) .ww-rank.is-top :is(.ww-note, .ww-rk, .ww-crest-t) { color: #4a3312; }
/* THE HOUSES LADDER COLOURS EACH INITIAL INLINE (world-windows.js writes
   `cap.style.color = r.colour`), and on slate Nighthollow's #7B2D8E is 1.2:1:
   the row read "ighthollow" (measured on the first cut). An inline colour
   beats any rule short of !important, and !important would reverse the layer
   order this file stands on, so the FILL is lifted instead: the text is
   painted in the house's colour mixed 40% toward white (`currentColor` is the
   inline colour), 4.6:1 or better for all nine houses, the hue kept. A
   browser without color-mix ignores the line and keeps today's colour. */
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-profile) .ww-rank:not(.is-top) .ww-cap[style] {
  -webkit-text-fill-color: color-mix(in srgb, currentColor 40%, #fff);
}
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-profile) .ww-move.is-up { color: var(--w2-green); }
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-profile) .ww-move.is-down { color: var(--w2-red); }
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-profile) .ww-rank.is-you {
  /* opaque, because it sticks over the rows it scrolls past (#3031, 2J) */
  background: linear-gradient(rgba(163, 52, 59, .34), rgba(163, 52, 59, .34)), var(--w2-slate);
  box-shadow: inset 3px 0 0 0 #e0535c;
}
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-profile) .ww-rank.is-you :is(.ww-score, .ww-rk) { color: #ffd2cc; }
/* on your own row's red the shared red initial is 4.48:1 (#f4a39c on
   #5e4153, measured), so it takes the row's light rose too, 6.5:1. Not on
   the podium, whose plate keeps its own ink; and a house's inline colour
   (the Houses ladder) keeps its lifted fill below, which paints over this. */
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-profile) .ww-rank.is-you:not(.is-top) .ww-cap { color: #ffd2cc; }
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-profile) .ww-rank.is-link:not(.is-you):not(.is-top):hover { background: rgba(255, 255, 255, .07); }
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-profile) .ww-rank.is-you.is-link:hover {
  background: linear-gradient(rgba(255, 255, 255, .07), rgba(255, 255, 255, .07)),
    linear-gradient(rgba(163, 52, 59, .34), rgba(163, 52, 59, .34)), var(--w2-slate);
}

/* Play (modes) */
body.hud-v2.skin-majesty .ws-sheet :is(.ww-mode, .ww-mode-t b) { color: var(--w2-ink); }
body.hud-v2.skin-majesty .ws-sheet .ww-mode-t b { color: var(--w2-gold); }
body.hud-v2.skin-majesty .ws-sheet :is(.ww-mode-t i, .ww-mode-none) { color: var(--w2-ink-2); }
body.hud-v2.skin-majesty .ws-sheet .ww-mode-go { color: var(--w2-gold); }
/* ⛔NOT THE ZONE MAP (Play > Zones). Its pins (.ww-poi) sit on .ww-mapsheet,
   which still draws map-sheet.png, the parchment map: a small part, and
   parchment stays for small parts. world-skin.css inks them for that paper
   (#3a2a18 on #e4d5aa, 9.45:1), and this file's light ink put "Sky Citadel"
   and every "held by" at 1.2 to 1.3:1 on the served page. So nothing here
   names a pin; the one rule that could reach one by inheritance (the
   window's own colour, section 0) cannot, because the skin gives .ww-poi and
   its tag's line their own colours (worldWindowsV2.test.js holds both). */

/* $9LV (the token window) */
body.hud-v2.skin-majesty .ws-sheet :is(.ww-token, .ww-token .ww-h, .ww-ca-addr, .ww-lock) { color: var(--w2-ink); }
body.hud-v2.skin-majesty .ws-sheet :is(.ww-ca-tag, .ww-check .ww-k, .ww-supply .ww-k, .ww-keyi i, .ww-lock i) { color: var(--w2-ink-2); }
body.hud-v2.skin-majesty .ws-sheet :is(.ww-ca-copy, .ww-lock-amt, .ww-check.is-warn .ww-v) { color: var(--w2-red); }
body.hud-v2.skin-majesty .ws-sheet .ww-check.is-ok .ww-v { color: var(--w2-green); }
body.hud-v2.skin-majesty .ws-sheet .ww-lock { border-left-color: #e0535c; }

/* Quests. A reward (.ww-q-chip) is a LABEL, not a plank (#3122: "reward
   chips look like buttons"): the ledger's gold, green once it has paid. The
   one control, CLAIM, is a button, and gold (section 3). */
body.hud-v2.skin-majesty .ws-sheet :is(.ww-q-head b, .ww-q-mark, .ww-q-pts, .ww-q-chip, .ww-q-notch .ww-q-rew, .ww-q-pack) { color: var(--w2-gold); }
body.hud-v2.skin-majesty .ws-sheet .ww-q-row.is-done .ww-q-chip { color: var(--w2-green); }
body.hud-v2.skin-majesty .ws-sheet :is(.ww-q-name, .ww-q-row .ww-q-mark, .ww-q-notch .ww-q-pack) { color: var(--w2-ink); }
body.hud-v2.skin-majesty .ws-sheet :is(.ww-q-count, .ww-q-desc, .ww-q-empty, .ww-q-reset) { color: var(--w2-ink-2); }
body.hud-v2.skin-majesty .ws-sheet :is(.ww-q-notch .ww-q-ndesc, .ww-q-row.is-done .ww-q-name, .ww-q-row.is-done .ww-q-desc) { color: var(--w2-dim); }
/* the week's log (.ww-q-past, also .is-done) is there to be read: it keeps
   the open quests' ink, not the faded done ink (world-skin.css, #3122) */
body.hud-v2.skin-majesty .ws-sheet .ww-q-row.ww-q-past .ww-q-name { color: var(--w2-ink); }
body.hud-v2.skin-majesty .ws-sheet .ww-q-row.ww-q-past .ww-q-desc { color: var(--w2-ink-2); }
body.hud-v2.skin-majesty .ws-sheet .ww-q-row { border-bottom-color: var(--w2-rule); }
/* a done mark sits on its own gold square; its ink is the square's */
body.hud-v2.skin-majesty .ws-sheet :is(.ww-q-row.is-done .ww-q-mark, .ww-q-notch.is-done .ww-q-nmark) { color: #2e2113; }
/* THE TROUGHS ARE SLATE WELLS, NOT BROWN PAPER ONES. The skin draws the
   day's bar, the week's bar and the bag's WEIGHT meter as a #3c2c18 well in
   a #33240f line, which on slate read as a strip of paper left behind. The
   mock's slate trough (#111620 in a black line) takes its place; the fills
   (gold, green when full, amber and red for weight) are the skin's and stay.
   A week's seal still to come is the same well; a done or claimed seal keeps
   its own gold or green square. */
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-aside) :is(.ww-q-meter, .ww-carry) .ws-meter {
  background: #111620;
  border-color: #07090d;
}
body.hud-v2.skin-majesty .ws-sheet .ww-q-notch:not(.is-done):not(.is-claimed) .ww-q-nmark {
  background: #111620;
  border-color: #07090d;
}

/* Help and House (Settings' other two tabs) */
body.hud-v2.skin-majesty .ws-sheet :is(.ww-help-head b, .ww-help-n, .ww-house-price, .ww-house-msg) { color: var(--w2-gold); }
body.hud-v2.skin-majesty .ws-sheet .ww-help-t { color: var(--w2-ink); }
body.hud-v2.skin-majesty .ws-sheet :is(.ww-help-state, .ww-help-sub, .ww-house-flav) { color: var(--w2-ink-2); }
body.hud-v2.skin-majesty .ws-sheet :is(.ww-house-sworn, .ww-house-note, .ww-help-row.is-done .ww-help-t, .ww-help-row.is-done .ww-help-n) { color: var(--w2-dim); }
body.hud-v2.skin-majesty .ws-sheet .ww-help-row { border-bottom-color: var(--w2-rule); }
/* A HOUSE'S OWN COLOUR, LIFTED TO READ ON SLATE. The House tab writes its
   words in the house's colour (--hc, house-map.js), and five of the nine are
   under AA on #3a4760 as they stand (Nighthollow's #7B2D8E is 1.2:1,
   Smoulders' #E03C31 2.2:1). Mixed toward white they keep their hue and
   clear the bar for every house, measured: the small labels at 40% of the
   house (Nighthollow, the lowest, 4.6:1), the 26px name at 55% (3.3:1, the
   large-text 3:1). The sigil's ring keeps the house's own colour: a line is
   not text. */
body.hud-v2.skin-majesty .ws-sheet :is(.ww-house-badge, .ww-house-role) {
  color: color-mix(in srgb, var(--hc, #e3c79a) 40%, #fff);
}
body.hud-v2.skin-majesty .ws-sheet .ww-house-name {
  color: color-mix(in srgb, var(--hc, #efe3c8) 55%, #fff);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .45);
}
body.hud-v2.skin-majesty .ws-sheet .ww-house-pip { background: rgba(0, 0, 0, .18); }
body.hud-v2.skin-majesty .ws-sheet .ww-house-pip.is-mine { background: rgba(227, 199, 154, .16); }

/* Rooms (the list of places, and a friend's name typed into it) */
body.hud-v2.skin-majesty .ws-sheet :is(.ws-nav-h, .ws-navrow) { color: var(--w2-ink); }
body.hud-v2.skin-majesty .ws-sheet :is(.ws-room-sum, .ws-room-sum i, .ws-room-who, .ws-nav-t i, .ws-nav-n) { color: var(--w2-ink-2); }
body.hud-v2.skin-majesty .ws-sheet .ws-room-sum b { color: var(--w2-gold); }
body.hud-v2.skin-majesty .ws-sheet .ws-nav-n b { color: var(--w2-amber); }
body.hud-v2.skin-majesty .ws-sheet .ws-nav-n i { color: var(--w2-red); }
body.hud-v2.skin-majesty .ws-sheet .ws-navrow { border-bottom-color: var(--w2-rule); }
body.hud-v2.skin-majesty .ws-sheet .ws-navrow:hover { background: rgba(255, 255, 255, .06); }
/* "YOU ARE HERE" IS A DARKER ROW WITH A GOLD EDGE, NOT A LIGHTER ONE. A gold
   tint lifted the ground to #465064, and on it the red "you are here" was
   4.08:1 and the amber count 4.36 (measured on the served page). A dark
   well pushes every ink up instead (red 5.8, amber 6.2, the dim line 6.9),
   and the gold edge is what says "this one", as the Leaderboard's "you" row
   says it with its red one. */
body.hud-v2.skin-majesty .ws-sheet .ws-navrow.is-here {
  background: rgba(0, 0, 0, .2);
  box-shadow: inset 3px 0 0 0 #caa982;
}
body.hud-v2.skin-majesty .ws-sheet .ws-friend-in { color: var(--w2-ink); background: var(--w2-well); box-shadow: inset 0 0 0 2px #56472f; }
body.hud-v2.skin-majesty .ws-sheet .ws-friend-in::placeholder { color: var(--w2-dim); }

/* button six's window (world-wave0.js openSixWindow, #3689; its rules are
   world-sockets.css, #3031's): the bag's picker drawn in a window. The same
   picker pinned in the bag's hover card is a small part and stays on
   parchment, which is why every line here is scoped to .ws-sheet. */
body.hud-v2.skin-majesty .ws-sheet :is(.wk-sheet, .wk-pick, .wk-read b) { color: var(--w2-ink); }
body.hud-v2.skin-majesty .ws-sheet :is(.wk-head, .wk-nowtext i, .wk-read, .wk-note, .wk-none) { color: var(--w2-ink-2); }
body.hud-v2.skin-majesty .ws-sheet .wk-nowtext .wk-flav { color: var(--w2-dim); }
body.hud-v2.skin-majesty .ws-sheet :is(.wk-pick .wk-need, .wk-note.warn) { color: var(--w2-red); }
body.hud-v2.skin-majesty .ws-sheet .wk-pick { border-top-color: var(--w2-rule); }
body.hud-v2.skin-majesty .ws-sheet .wk-pick .vd-card.base { background: rgba(0, 0, 0, .18); }

/* the arena build sheet ("Your build") */
body.hud-v2.skin-majesty .ws-sheet .wc-buildsay { color: var(--w2-red); }
body.hud-v2.skin-majesty .ws-sheet .wc-tocards { color: var(--w2-ink-2); }

/* The Inventory: slate, its words light, its layout untouched (S9's). The
   doll's cells and the bag grid keep their own tiles, which were always a
   dark well; only the text round them and the dividers move. */
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-aside) :is(.ww-bagtitle, .ww-carry b, .ww-socknote, .ww-bagnote, .ww-statv, .ww-find) { color: var(--w2-ink); }
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-aside) :is(.ww-bagowner, .ww-carry, .ww-stat, .ww-bagwrap .ww-foot, .wc-stat b) { color: var(--w2-ink-2); }
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-aside) :is(.ww-wornlab, .ww-wornword, .ww-statk, .ww-slotk) { color: var(--w2-dim); }
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-aside) .ww-bagpower { color: var(--w2-gold); }
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-aside) .ww-carry.is-warn b { color: var(--w2-amber); }
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-aside) .ww-carry.is-over b,
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-aside) .ww-stat.is-down .ww-statb { color: var(--w2-red); }
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-aside) .ww-stat.is-up .ww-statb { color: var(--w2-green); }
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-aside) :is(.ww-baghead, .ww-asidehead, .ww-profhead) { border-bottom-color: var(--w2-rule); }
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-aside) .ww-footbar { border-top-color: var(--w2-rule); }
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-aside) .ww-stat { border-bottom-color: var(--w2-rule); }
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-aside) .wc-stat > * { border-bottom-color: var(--w2-rule); }
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-aside) .ww-bagbust { border-color: #caa982; }
/* the find box and the sort: an inset well, light ink */
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-aside) .ww-find {
  background: var(--w2-well);
  box-shadow: inset 0 0 0 2px #56472f, inset 2px 2px 0 2px rgba(0, 0, 0, .35);
}
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-aside) .ww-find::placeholder { color: var(--w2-dim); }
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-aside) .ww-sort option { color: var(--w2-ink); background: var(--w2-well); }
/* an empty grid's ghost cells (.ww-none / .ww-state: an empty Spellbook, a
   bag still loading) are dashed in paper brown, which is invisible on
   slate: the same ghost in the slate's light rule, as on the guild page */
body.hud-v2.skin-majesty .ws-sheet .ww-cell.is-empty {
  background: rgba(0, 0, 0, .14);
  border-color: rgba(232, 213, 169, .38);
}
/* a worn slot with nothing in it, and a locked one: a dark well on slate */
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-aside) .ww-wornc.is-empty {
  background-color: rgba(0, 0, 0, .22);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .32);
}
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-aside) .ww-wornc.is-locked {
  background-color: rgba(0, 0, 0, .14);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .22);
}
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-aside) .ww-wornc.is-virtual { outline-color: rgba(232, 213, 169, .45); }
/* THE BAG'S SOCKETS: kit B's slot, not the parchment square. slot-holder.png
   is a tan square with red dashes (the paper kit's), and it was the last big
   piece of parchment in a slate window. A socket that holds something is
   kit B's item slot (slot1.png, rim 5) painted as a nine-slice at the chrome
   pixel, over no border, so the grid's cell pitch does not move by a pixel;
   the rarity rim (box-shadow) and the dark middle a filled socket draws are
   the skin's and stay. The empty sockets are not DOM (the well tiles them as
   its own background, world-skin.css explains why), so the tile is redrawn:
   slot1's four rings (outline, grey rim, outline, slate) as a vector square
   at the grid's own pitch, 48 in 51, which scales with --sk-cell. */
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-aside) .ww-slotc {
  background: none;
  border-style: solid;
  border-width: 0;
  border-image: url('/assets/ui/kitb/slot1.png?v=2026-09-24a') 5 fill / calc(5 * var(--hv-k) * 1px) stretch;
  color: var(--w2-ink);
}
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-aside) .ww-slotc:hover {
  border-image-source: url('/assets/ui/kitb/slot1.png?v=2026-09-24a');
  filter: brightness(1.2);
}
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-aside) .ww-slotc.ww-empty:hover {
  border-image-source: url('/assets/ui/kitb/slot1.png?v=2026-09-24a');
  filter: none;
}
/* AN ENCHANTED PIECE (C44, frame and glow; #3274): kit B's slot rims in the
   enchant colours, .1 green (slot2), .2 blue (slot3), .3 purple (slot4), .4
   gold (slot5-gold, slot5 recoloured for the mock), a soft glow inside, and
   the art glowing in the colour. cellFor sets data-ench and --ench. */
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-aside) .ww-slotc.is-ench[data-ench="1"] { border-image-source: url('/assets/ui/kitb/slot2.png?v=2026-09-24a'); }
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-aside) .ww-slotc.is-ench[data-ench="2"] { border-image-source: url('/assets/ui/kitb/slot3.png?v=2026-09-24a'); }
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-aside) .ww-slotc.is-ench[data-ench="3"] { border-image-source: url('/assets/ui/kitb/slot4.png?v=2026-09-24a'); }
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-aside) .ww-slotc.is-ench[data-ench="4"] { border-image-source: url('/assets/ui/kitb/slot5-gold.png?v=2026-09-26a'); }
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-aside) .ww-slotc.is-ench {
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--ench, transparent) 40%, transparent);
}
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-aside) .ww-slotc.is-ench > img {
  filter: drop-shadow(0 0 1.5px var(--ench)) drop-shadow(0 0 4px var(--ench));
}
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-aside) .ww-bag1 {
  background-color: rgba(0, 0, 0, .22);
  background-image:
    linear-gradient(rgba(16, 24, 34, .45), rgba(16, 24, 34, .45)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 51 51' shape-rendering='crispEdges'%3E%3Crect width='48' height='48' fill='%230a0e14'/%3E%3Crect x='1' y='1' width='46' height='46' fill='%239aa0a3'/%3E%3Crect x='2' y='2' width='44' height='44' fill='%230a0e14'/%3E%3Crect x='3' y='3' width='42' height='42' fill='%23242a37'/%3E%3C/svg%3E");
}

/* the skill tracks the Bank / Skills panel draws */
body.hud-v2.skin-majesty .ww-aside :is(.wc-track-head b, .wc-track-lv) { color: var(--w2-ink); }
body.hud-v2.skin-majesty .ww-aside :is(.wc-track-note, .wc-skills) { color: var(--w2-ink-2); }
body.hud-v2.skin-majesty .ww-aside .wc-track-bar { background: var(--w2-well); box-shadow: inset 0 0 0 1px #56472f; }

/* scrollbars: the slate's own, never the platform's white bar (#2682) */
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-profile, .ww-aside) :is(.ww-boardcontent, .ww-bag1, .ww-profbody, .ww-grid) {
  scrollbar-color: #7e6440 rgba(0, 0, 0, .3);
}
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-profile, .ww-aside) :is(.ww-boardcontent, .ww-bag1, .ww-profbody)::-webkit-scrollbar-track { background: rgba(0, 0, 0, .3); }
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-profile, .ww-aside) :is(.ww-boardcontent, .ww-bag1, .ww-profbody)::-webkit-scrollbar-thumb {
  background: #7e6440;
  border: 2px solid rgba(0, 0, 0, .35);
}
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-profile, .ww-aside) :is(.ww-boardcontent, .ww-bag1, .ww-profbody)::-webkit-scrollbar-thumb:hover { background: #caa982; }

/* ── 6. THE TWO COMPANION WINDOWS ──────────────────────────────────────
   The Leaderboard's player profile and the Inventory's Bank / Builds panel
   are windows of their own beside the door's (fixed, with their own paper
   frame, so no .ws-sheet rule reaches them). They take the same slate
   frame at the same chrome pixel, keeping their own border-width for the
   same reason the sheet does. */
body.hud-v2.skin-majesty :is(.ww-profile, .ww-aside) {
  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-image: none;
  background-color: var(--w2-slate);
  background-clip: padding-box;
  image-rendering: pixelated;
}
body.hud-v2.skin-majesty .ww-profile :is(.ww-profname, .ww-profrow, .ww-profv, .ww-profcastn, .ww-profile) { color: var(--w2-ink); }
body.hud-v2.skin-majesty .ww-profile :is(.ww-profsub, .ww-profk, .ww-profvia, .ww-profnote) { color: var(--w2-ink-2); }
body.hud-v2.skin-majesty .ww-profile :is(.ww-profx, .ww-profcastp) { color: var(--w2-red); }
body.hud-v2.skin-majesty .ww-profile .ww-profx:hover { color: var(--w2-ink); }
body.hud-v2.skin-majesty .ww-profile .ww-profbadge.is-earned .ww-profv { color: var(--w2-gold); }
body.hud-v2.skin-majesty .ww-profile :is(.ww-profh, .ww-profcast, .ww-profnote) { border-color: var(--w2-rule); }
body.hud-v2.skin-majesty .ww-profile .ww-profring { background: #2a3345; box-shadow: 0 0 0 3px #caa982, 0 0 0 5px rgba(0, 0, 0, .45); }
body.hud-v2.skin-majesty .ww-aside :is(.ww-asidetitle, .ww-asidex:hover) { color: var(--w2-ink); }
body.hud-v2.skin-majesty .ww-aside .ww-asidex { color: var(--w2-ink-2); }
/* A PANEL LAID OVER THE WINDOW (a phone, a tablet) GOES BACK BY A PLANK,
   not a 56x16 word (#3069 S14, PH-F3). The window's own ribbon and 44px
   close stay in view above it (world-windows.js asideClearTop); this is the
   way back to the bag, a finger's size, in kit B's slate button. */
body.hud-v2.skin-majesty .ww-aside.is-over-sheet .ww-asidex {
  min-width: 88px;
  min-height: 44px;
  padding: 0 12px;
  /* its face, case and spacing are the one lettering rule's (section 21) */
  font-size: 9px;
  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;
  color: var(--w2-ink);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .5);
}
body.hud-v2.skin-majesty .ww-aside.is-over-sheet .ww-asidex:hover { color: #fff3d6; filter: brightness(1.18); }

/* ══════════════════════════════════════════════════════════════════════
   S12: WHERE A WINDOW STANDS, AND WHAT IS IN FIVE OF THEM (#3069 S12)

   The six-lens audit of the live v2 world (2026-09-25) found the slate
   windows sitting in geometry drawn for the paper ones. Sections 7 to 9
   are that geometry; 10 to 16 are the Leaderboard, its profile, the
   Spellbook, Play, the Store's $9LV and Rooms. Every rule leads with
   `body.hud-v2`, so ?hud=0 draws the windows exactly as main does.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 7. THE DOCKS STAND INSIDE THE SCREEN (G1: HD-09, INV-7, WIN-2, WB-06,
   C3) ────────────────────────────────────────────────────────────────
   Under full bleed the skin pushes a docked window 28px past the screen's
   edge (world-skin.css "THE TORN EDGE GOES OFF THE SCREEN", Wray
   2026-09-12). That was for the parchment's torn edge, which read as the
   screen's own. Kit B's slate has a finished rim with gold ornaments in
   every corner, and the bleed cut the outer rail and both ornaments off
   every docked window (the Leaderboard at x -28, the Inventory to x 1948 at
   1920). The approved mock insets a window 24px at 1920: 12 chrome pixels,
   so 12px at a laptop's k 1 and 24 at 1920's k 2. The strips need no rule:
   syncStrips pins them to the measured sheet every frame; the right strip's
   first-paint value follows below, so a frozen frame agrees with a live
   one. The skin's 24px top-row pad (the bleed's compensation) goes.

   ⛔THE RIGHT DOCK'S PLACE IS ONE CLASS LIGHTER THAN A DOOR'S OWN. The
   `:where()` holds this rule at (0,5,1), under any rule that names a door
   ([data-side='right'][data-door='...'], (0,6,1)), so a door that places
   itself wins whichever order the two land in. Slice S13 centres Settings
   (the record door) that way; at equal weight this rule, appended later in
   the same layer, pinned Settings back to the right edge. Nothing else in
   the corners layer places a right dock, and the skin's bleed is a lower
   layer, so the lighter weight costs nothing. */
body.hud-v2.skin-majesty.frame-fill-desktop .ws-sheet[data-side='left']:not([data-door='map']) {
  left: calc(var(--fx, 0px) + 12 * var(--hv-k) * 1px);
}
body.hud-v2.skin-majesty.frame-fill-desktop .ws-sheet[data-side='right']:where(:not([data-door='map'])) {
  left: calc(var(--fx, 0px) + var(--fw, 100vw) - var(--sk-win-cw) - 12 * var(--hv-k) * 1px);
}
body.hud-v2.skin-majesty.frame-fill-desktop .ws-sheet[data-side='right']:not([data-door='map']) .ws-sheet-top {
  padding-right: 0;
}
body.hud-v2.skin-majesty.frame-fill-desktop .ws-tabs[data-side='right'] {
  right: calc(100vw - var(--fx, 0px) - var(--fw, 100vw) + var(--sk-win-cw) + 12 * var(--hv-k) * 1px - 14px);
}

/* ── 8. EVERY WINDOW ENDS ABOVE THE ACTION BAR (WB-16, WB-10) ──────────
   At 1366x768 the Spellbook ended at y641 across the bar that starts at
   630, and the right dock sat over BUILD and CARDS: neither a clean cover
   nor a clean clearance. The band a window hangs in now stops at the top
   of the bar, off the bar's own measured height (--w0bar-h, published on
   the root by world-legacy-door.js; 110 is its fallback), and the skin
   takes its usual 8 off the band, so a window ends 8px above the bar: the
   audit's own number. (It stopped 24px above in the first cut, which took
   16px a laptop's Store needed for its OPEN TEN.) The profile beside the
   Leaderboard is sized off the sheet (its height is the sheet's less 80),
   so it clears the bar with it.
   Desktop and tablet only: on a phone the window is the screen (section 9).

   ⛔NOT SHRINK-TO-FIT. A dock sized to its content was proposed (WB-15)
   and rejected: the window would change height between tabs. */
@media (min-width: 561px) and (min-height: 541px) {
  body.hud-v2.skin-majesty .ws-sheet:not([data-door='map']) {
    --sk-win-band: calc(var(--fh, 100vh) - var(--w0bar-h, 110px));
  }
  /* WHILE A RIGHT DOCK IS OPEN THE MINIMAP AND THE TRACKER STEP ASIDE: the
     minimap's rim peeked above the window's title at 1366 (WB-16). The door
     row stays; it is how you reach the next window. Not for Settings: slice
     S13 moves that window off the right edge and clear of the map corner,
     so the map stays up beside it. */
  body.hud-v2.skin-majesty:has(.ws-sheet[data-side='right']:not([hidden]):not([data-door='map']):not([data-door='record'])) :is(.an-tr .wt-map, .an-tr .wtk) {
    visibility: hidden;
  }
}
/* ⭐A RIGHT DOCK RUNS TO THE FOOT, OVER THE BAR IF IT MUST (Wray, 2026-09-28
   and 29). The mock's Inventory runs from 92 to 1054 at 1920x1080, down
   BESIDE the bar; stopping every window at the bar's top cost a right dock
   124px there, and on a laptop its slots with it. Where the bar does reach
   under the window, the window lies OVER it: "I dont think we have to hide
   the action bar just make the inventory overlay ontop of it ... id prefer
   it not to vanish". A sheet stands at z 60 and the bar at 42, so the
   window covers what it covers (BUILD and CARDS on a laptop, which open
   the window that is up or the card picker it already holds) and the rest
   of the bar stays where it was, live. 18 off the foot is the mock's own
   margin once the skin takes its 8 (a bottom edge 26px up).
   Where the carved rail is: from 1280 wide and above 540 tall. Under that
   the one-row bar is most of a tablet's width, and a window over it would
   bury it, so the bar's band above holds. Settings (record) is placed off
   the edge by S13 and the map is its own window: neither is a dock. The
   left docks keep the bar's band because the chat stands in their corner.
   (A first cut, #3391, ran the dock down only when it cleared the bar,
   off a measure of the bar's right end; the overlay makes that measure
   and its fallback unnecessary, and both are gone.) */
@media (min-width: 1280px) and (min-height: 541px) {
  body.hud-v2.skin-majesty .ws-sheet[data-side='right']:not([data-door='map']):not([data-door='record']),
  body.hud-v2.skin-majesty .ws-tabs[data-side='right']:not([data-door='map']):not([data-door='record']) {
    --sk-win-band: calc(var(--fh, 100vh) - 18px);
  }
}
/* (The Inventory ran to the foot under 860px tall, over the bar's right end,
   until #3182 fitted it above the bar: world-inventory-v2.css wins the
   height from its fixed rows and, at 1366x657, turns the window into one
   scroll column. Since 2026-09-29 every right dock runs to the foot again
   on a desktop, over the bar, by Wray's ruling above; the fitted rows
   still serve a short window.) */

/* A TABLET (561 to 900 wide) HAS ONE TOP TOO. The skin's 900px rule puts
   every sheet at 16px (#2560, "the sheet is the screen"), but the left and
   centred placements carry their own 96 one attribute heavier, so at
   768x1024 the Inventory opened over the door row at y16 and the
   Leaderboard at y96: two window shapes on one screen (WB-08). A tablet's
   window is not the screen, so every placement takes one top, clear of the
   row. 112, not the desktop's 96: at 768 wide a right dock (520) and the
   centred Store (560) both reach back under the plate, and at 96 the
   window's top-left ornament sat on the plate's corner, 16x7px (review of
   #3175, N9). A left dock hides the plate anyway. */
@media (min-width: 561px) and (max-width: 900px) and (min-height: 541px) {
  body.hud-v2.skin-majesty .ws-sheet[data-side]:not([data-door='map']),
  body.hud-v2.skin-majesty .ws-tabs[data-side] {
    --sk-win-top: 112px;
  }
  /* ...AND A FRAMED PAGE TAKES THE WINDOW'S WIDTH (#3069 S14, PH-F10). The
     body's 22px gutters clear ribbons that tuck over a desktop window's
     edges; on a tablet the ribbons are a row inside, so the gutters only
     cost width: Settings' 360 window framed its page in 260, which wrapped
     the handle, stranded "IN" on its own line and cut the gold button in
     two. The phone's 8, for a body that frames a page. */
  body.hud-v2.skin-majesty .ws-sheet:not([data-door='map']) .ws-sheet-body:has(> iframe.ws-frame) {
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* ── 9. ON A PHONE EVERY WINDOW IS THE SCREEN (PH-2, WB-08, WIN-3) ─────
   Measured at 390x844: centred windows opened at y96 and right docks at
   y16, so the same phone had two window shapes; the half of the plate and
   the minimap showing above a window still took taps (a tap on the plate
   swapped the Spellbook for the Inventory); a framed page got 258px of 390
   (a 36px border, 22px of padding, then the page's own). The mock's phone
   column is one box, and the Map window (world-map-v2.css) already is.

   So below 560 wide, or 540 tall (a phone held sideways), every window
   takes the same box: 8px in from each edge of the picture, over the door
   row. The slate rim draws at its own chrome pixel for every placement,
   centre included (18 at k 1), the body's side padding is 8, and the close
   sits in a 44px box inside the top-right corner (the thumb floor, #2490),
   its art at 1x. The strips' row (world-skin.css, pinned by syncStrips)
   and every in-panel row keep one line and scroll sideways, and both start
   at the body's inset so a tab row and the list under it share an edge.

   While a window is up (body.ws-sheet-open, world-shell.js) the HUD pieces
   it covers are hidden rather than left half-covered and live: the plate,
   the door row, the minimap, the tracker, the legacy plank and the action
   bar. The chat's own hiding is slice S11's (world-chat-v2.css). */
@media (max-width: 560px), (max-height: 540px) {
  /* `[data-side]` (every open sheet has one) lifts this over section 1's
     per-placement --w2-bw rules, which are one attribute heavier than the
     bare sheet: without it a centred window kept 36 and its title and
     close rode 18px off the top of the screen */
  body.hud-v2.skin-majesty .ws-sheet[data-side]:not([data-door='map']) {
    --sk-win-top: 8px;
    --sk-win-cw: calc(var(--fw, 100vw) - 16px);
    --sk-win-ch: calc(var(--fh, 100vh) - 16px);
    --w2-bw: calc(18 * var(--hv-k) * 1px);
    left: calc(var(--fx, 0px) + 8px);
    top: calc(var(--fy, 0px) + 8px);
    right: auto;
    bottom: auto;
    width: calc(var(--fw, 100vw) - 16px);
    height: calc(var(--fh, 100vh) - 16px);
    max-width: none;
    max-height: none;
    border-width: calc(18 * var(--hv-k) * 1px);
    border-image-width: calc(18 * var(--hv-k) * 1px);
    /* nothing is left around it to dim */
    box-shadow: 0 0 0 100vmax rgba(10, 8, 14, .55);
  }
  /* the title rides inside the top edge, as the Map window's does */
  body.hud-v2.skin-majesty .ws-sheet:not([data-door='map']) .ws-sheet-title {
    top: calc(-1 * var(--w2-bw) - 6px);
    max-width: calc(100% - 96px);
  }
  body.hud-v2.skin-majesty .ws-sheet:not([data-door='map']) .ws-sheet-top .wr-plank,
  body.hud-v2.skin-majesty .ws-sheet:not([data-door='map']) .ws-sheet-top .wr-plank:hover {
    top: calc(-1 * var(--w2-bw) - 6px);
    right: calc(-1 * var(--w2-bw) + 2px);
    width: 44px;
    height: 44px;
    background-size: 25px 27px;
  }
  body.hud-v2.skin-majesty .ws-sheet:not([data-door='map']) .ws-sheet-body {
    padding-left: 8px;
    padding-right: 8px;
  }
  /* the strips' row starts where the body's content does: the rim plus 8,
     not 10 in from the border box (world-shell.js pins its left there) */
  body.hud-v2.skin-majesty .ws-tabs:not([data-door='map']):not(.ww-proftabs) {
    margin-left: calc(18 * var(--hv-k) * 1px - 2px);
    width: calc(var(--fw, 100vw) - 16px - 2 * (18 * var(--hv-k) * 1px + 8px));
  }
  /* one row, never two: the Store's four tabs wrapped with $9LV alone on a
     second line (WB-08) */
  body.hud-v2.skin-majesty .ws-sheet .ws-panelnav {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  body.hud-v2.skin-majesty .ws-sheet .ws-panelnav > * { flex: 0 0 auto; }
  /* the Play door's cards start at the same inset as the row above them */
  body.hud-v2.skin-majesty .ws-sheet .ww-modes { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }

  body.hud-v2.skin-majesty.ws-sheet-open :is(.an-tl, .an-row, .an-tr .wt-map, .an-tr .wtk, .wld-door, #w0worldbar) {
    visibility: hidden;
  }
}

/* ── 10. THE PODIUM READS (#3128: HD-17, WB-05, C15) ───────────────────
   Measured on the served plates: the bronze row's ink on its darkest grain
   stripe was 3.96:1, its red initial 2.67:1, and on the Houses ladder the
   house-coloured initials all but vanished (Darktide's D on silver 1.81:1,
   Stonebark's S on bronze about 1.2:1, "tonebark"). Three changes:
     - every podium word is the plate's own ink, the initial included:
       -webkit-text-fill-color beats the Houses ladder's inline colour
       without !important (the crest still says which house)
     - bronze is lifted (#ecc08f / #cf9560 / #a8703c)
     - the grain's dark stripe is halved (.10 to .05)
   Computed across each plate's gradient where the words sit (25% to 80%
   down the row, on the dark stripe): gold 5.1 and up, silver 6.2 and up,
   bronze 4.5 and up, all in #2a1c0c. */
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-profile) .ww-rank.is-top :is(.ww-rk, .ww-note, .ww-crest-t, .ww-score, .ww-who),
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-profile) .ww-rank.is-top .ww-cap,
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-profile) .ww-rank.is-top .ww-cap[style] {
  color: #2a1c0c;
  -webkit-text-fill-color: #2a1c0c;
}
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-profile) .ww-rank.is-bronze {
  --pl-hi: #ecc08f;
  --pl-mid: #cf9560;
  --pl-lo: #a8703c;
}
body.hud-v2.skin-majesty :where(.ws-sheet, .ww-profile) .ww-rank.is-top {
  background-image:
    repeating-linear-gradient(160deg,
      rgba(255, 255, 255, .10) 0 1px,
      rgba(0, 0, 0, 0) 1px 3px,
      rgba(0, 0, 0, .05) 3px 4px,
      rgba(0, 0, 0, 0) 4px 8px),
    linear-gradient(180deg, var(--pl-hi), var(--pl-mid) 55%, var(--pl-lo));
}

/* ── 11. THE LADDERS (WB-19, WB-15) ──────────────────────────────────
   A score's unit, small after the figure (world-windows.js addUnit); the
   empty Guilds ladder's way in; the Rooms row's subtitle wraps instead of
   being cut ("the camp on the path . the wood . t..."). */
body.hud-v2.skin-majesty .ws-sheet .ww-score .ww-unit {
  font-style: normal;
  font-size: .72em;
  letter-spacing: .04em;
  opacity: .85;
}
/* on a podium plate the unit is the plate's full ink: at .85 it read 4.13:1
   on the bronze (review of #3175, N1) */
body.hud-v2.skin-majesty .ws-sheet .ww-rank.is-top .ww-score .ww-unit { opacity: 1; }
/* ⛔THE UNIT STAYS BESIDE ITS FIGURE (#3151, review of PR #3303). The score
   column was sized at 72px for "317260 GP". "Infamy" is four letters longer,
   so it wrapped under the figure and every row grew from 30px to 51px: the
   window showed about 13 players where it had shown 23. The figure and its
   unit never break now, and the column is one fixed width for every row so
   the columns still line up down the ladder (a max-content track would size
   each row's grid on its own). The widest figure on the ladder today,
   "317260 Infamy", is 78.5px of text plus the 12px the podium's stud needs
   (measured on the served window); 104px leaves room for a seventh digit.
   A 320px phone keeps 92px, because every pixel there comes out of the
   name: at 104 the name had 38px.
   ⭐Those widths are now only the fallback. world-windows.js
   fitScoreColumn measures the drawn ladder's widest figure and sets
   --ww-score-w on the table, so the names get back every pixel the figures
   do not use (the 104px cost "LeodardoAtLarge" its last four letters on the
   1366 dock; review of PR #3303). */
body.hud-v2.skin-majesty .ws-sheet .ww-score { white-space: nowrap; }
body.hud-v2.skin-majesty .ws-sheet .ww-rank { grid-template-columns: 40px 1fr auto auto var(--ww-score-w, 104px); }
@media (max-width: 359px) {
  body.hud-v2.skin-majesty .ws-sheet .ww-rank { grid-template-columns: 40px 1fr auto auto var(--ww-score-w, 92px); }
}
body.hud-v2.skin-majesty .ws-sheet .ww-board-cta {
  display: block;
  margin: 14px auto 0;
  min-height: 44px;
  padding-left: 16px;
  padding-right: 16px;
}
body.hud-v2.skin-majesty .ws-sheet .ws-nav-t i {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* ── 12. THE PROFILE WINDOW (WB-10) ───────────────────────────────────
   Square, slate, one type family. The 09-24 ruling put square frames in
   place of round portrait rings; the rows were a serif, a fourth face
   beside VT323, the pixel caps and the blackletter; the close was a bare
   "x" glyph beside every other window's red kit B close; the build chips
   wore bright 2px rarity outlines seen nowhere else. */
body.hud-v2.skin-majesty .ww-profile {
  font-family: var(--hv-f-vt, 'VT323', monospace);
}
body.hud-v2.skin-majesty .ww-profile .ww-profring {
  border-radius: 0;
  background: var(--w2-well, #1c2330);
  box-shadow:
    0 0 0 calc(2 * var(--hv-k) * 1px) #caa982,
    0 0 0 calc(3 * var(--hv-k) * 1px) #0b0f15;
}
body.hud-v2.skin-majesty .ww-profile :is(.ww-profrow, .ww-profcast, .ww-profnote, .ww-profk, .ww-profv) {
  font-family: var(--hv-f-vt, 'VT323', monospace);
}
body.hud-v2.skin-majesty .ww-profile .ww-profx,
body.hud-v2.skin-majesty .ww-profile .ww-profx:hover {
  box-sizing: border-box;
  width: calc(25 * var(--hv-k) * 1px);
  height: calc(27 * var(--hv-k) * 1px);
  padding: 0;
  border: 0;
  font-size: 0;
  color: transparent;
  background: url('/assets/ui/kitb/close.png?v=2026-09-24a') center / 100% 100% no-repeat;
  image-rendering: pixelated;
}
body.hud-v2.skin-majesty .ww-profile .ww-profx:hover { filter: brightness(1.15); }
body.hud-v2.skin-majesty .ww-profile .ww-profx:focus-visible { outline: 2px solid var(--w2-gold); outline-offset: 2px; }
@media (pointer: coarse) {
  body.hud-v2.skin-majesty .ww-profile .ww-profx,
  body.hud-v2.skin-majesty .ww-profile .ww-profx:hover {
    width: 44px;
    height: 44px;
    background-size: 25px 27px;
  }
}
/* a build chip is a slate chip: the well, a light rule, the rarity as a
   stripe down its left edge rather than a bright outline all round */
body.hud-v2.skin-majesty .ww-profile .ww-profcard {
  background: var(--w2-well, #1c2330);
  color: var(--w2-ink);
  box-shadow: inset 0 0 0 1px rgba(232, 213, 169, .28), inset 3px 0 0 0 var(--r, #caa982);
  padding-left: 10px;
}
/* ONE CLOSE AT A TIME WHERE THE PROFILE LIES ON THE LADDER (review of
   #3175, S3). Up to 900 wide the profile opens on top of the Leaderboard,
   24px down (world-windows.js profileCard, PROFILE_ROW_QUERY is this same
   900), and on a phone the Leaderboard's own close stayed tappable 6px
   above the profile's: a thumb aiming for the profile's shut both. While a
   profile is up the window's close steps out; the profile's own is the one
   to press, and the window's comes back with the profile gone. */
@media (max-width: 900px) {
  body.hud-v2.skin-majesty:has(.ww-profile) .ws-sheet:not([data-door='map']) .ws-sheet-top .wr-plank {
    visibility: hidden;
  }
}
/* ...and the same on a laptop where the profile had no room beside the
   ladder and stands over it (profileCard: `is-overladder`). There the
   Leaderboard's own ribbons (Leaders / Houses / Guilds) and its title step
   out too (review of #3198): they hung beside the card and still switched
   the ladder, but the ladder is under the card, so a pick changed nothing
   anyone could see. A control that goes nowhere is not drawn. Closing the
   profile brings all of them back. */
body.hud-v2.skin-majesty:has(.ww-profile.is-overladder) .ws-sheet:not([data-door='map']) .ws-sheet-top .wr-plank,
body.hud-v2.skin-majesty:has(.ww-profile.is-overladder) .ws-sheet:not([data-door='map']) .ws-sheet-title,
body.hud-v2.skin-majesty:has(.ww-profile.is-overladder) .ws-tabs:not(.ww-proftabs) {
  visibility: hidden;
}

/* ── 12b. THE PROFILE STAYS OFF THE HUD (#3069 S14, D2) ────────────────
   profileCard stops the card and its ribbons 12px short of the minimap and
   the tracker. Where the five ribbons then have no room beside the card
   (1280x720), they come INSIDE it as one row under the head band, as a
   phone's do, in the slate tab and the arrowless red and gold; the well
   starts under the row. The row is above the card (z 63 over its 62): a
   ribbon tucks under the card only while it hangs off its edge. */
@media (min-width: 901px) {
  body.hud-v2.skin-majesty .ws-tabs.ww-proftabs.is-row {
    z-index: 63;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    height: 34px;
    margin-left: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  body.hud-v2.skin-majesty .ws-tabs.ww-proftabs.is-row .wr-plank,
  body.hud-v2.skin-majesty .ws-tabs.ww-proftabs.is-row[data-edge] .wr-plank {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    height: 30px;
    min-height: 0;
    padding: 0 5px;
    font-size: 7px;
    transform: none;
    translate: none;
  }
  body.hud-v2.skin-majesty .ws-tabs.ww-proftabs.is-row[data-edge] .wr-plank[aria-current='page'] {
    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);
  }
  body.hud-v2.skin-majesty .ww-profile.is-rowtabs .ww-profwell { margin-top: 30px; }
  /* ⛔A FINGER'S 44 ON A TOUCH TABLET (review of #3198). A tablet held
     sideways is over 900 wide, so it always gets this row, and its tabs
     were 30px tall where the ribbons they replace were 44. The row scrolls
     sideways, so it clips anything hung outside it: the tabs themselves
     grow to 44 (the art is nine-sliced, so it stretches cleanly) and the
     well starts under the taller row. */
  @media (pointer: coarse) {
    body.hud-v2.skin-majesty .ws-tabs.ww-proftabs.is-row { height: 48px; }
    body.hud-v2.skin-majesty .ws-tabs.ww-proftabs.is-row .wr-plank,
    body.hud-v2.skin-majesty .ws-tabs.ww-proftabs.is-row[data-edge] .wr-plank {
      height: 44px;
      min-width: 44px;
    }
    body.hud-v2.skin-majesty .ww-profile.is-rowtabs .ww-profwell { margin-top: 44px; }
  }

  /* THE CLOSE IS THE WINDOWS' OWN: kit B's red square riding the frame's
     top-right corner, placed off the card's 28px border exactly as the
     sheet's is off its own (section 1), not an "x" in the head band */
  body.hud-v2.skin-majesty .ww-profile .ww-profx,
  body.hud-v2.skin-majesty .ww-profile .ww-profx:hover {
    position: absolute;
    z-index: 4;
    top: calc(-28px - 11 * var(--hv-k) * 1px);
    right: calc(-28px + 9 * var(--hv-k) * 1px);
    margin: 0;
    align-self: auto;
  }
}

/* ── 13. THE SPELLBOOK'S CARDS (WB-02) ─────────────────────────────────
   Cards big enough to be cards: 93 faces at 65x91 were unreadable. The
   floor is 110px (five or six a row at 1920), 96 on a phone (three). The
   card a cell opens is the painted face at its own size in the bag's
   parchment card (world-windows.js spellCardFor). */
body.hud-v2.skin-majesty .ws-sheet .ww-spells .ww-grid {
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}
@media (max-width: 560px) {
  body.hud-v2.skin-majesty .ws-sheet .ww-spells .ww-grid {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  }
}
body.hud-v2.skin-majesty .ws-sheet .ww-spells .ww-cell[data-readable] { cursor: pointer; }
body.hud-v2.skin-majesty .ws-sheet .ww-spellsnote .ww-spellshint {
  display: block;
  font-style: normal;
  color: var(--w2-dim);
}
/* LAYOUT ONLY, NO INK: the card stays the bag's parchment card (a small
   part); the face is sized to fit a short screen above the action bar,
   keeping its shape (the name and rule under it take about 120px). Sized
   off the whole screen it stood 150px down over the bar at 1366x768
   (review of #3175, N4); world-windows.js placeSpellCard keeps its foot
   above the bar's measured top. */
body.hud-v2.skin-majesty .ww-spellcard .ww-spellface {
  display: block;
  width: auto;
  height: min(380px, calc(var(--fh, 100vh) - var(--w0bar-h, 110px) - 150px));
  max-width: 240px;
  margin: 0 auto 6px;
  image-rendering: pixelated;
}

/* ── 14. PLAY: THE LEGACY ARENA AND THE ZONE LIST (PLY-1, PLY-2, C16) ──
   The map is a locator of numbered dots (no free text, nothing moved) and
   the list under it is the Play door's own mode row, one per zone, at the
   44px floor. The objective and event chips are the dots' legend. */
body.hud-v2.skin-majesty .ws-sheet .ww-mode-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 5px 2px;
  vertical-align: middle;
  font-family: var(--hv-f-px, 'Press Start 2P', monospace);
  font-size: 8px;
  line-height: 1;
  letter-spacing: .06em;
  color: #f7e6c4;
  background: #8a2a2e;
  box-shadow: inset 0 0 0 1px #caa982;
}
body.hud-v2.skin-majesty .ws-sheet .ww-map.ww-zones {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  height: 100%;
  overflow: hidden;
}
/* the locator is the map's own 162x130 sheet, capped so the list under it
   keeps most of the window: a quarter of the screen's height at most */
body.hud-v2.skin-majesty .ws-sheet .ww-zones .ww-locator {
  flex: 0 0 auto;
  align-self: center;
  height: min(260px, 26vh);
  width: auto;
  max-width: 100%;
  aspect-ratio: 162 / 130;
}
body.hud-v2.skin-majesty .ws-sheet .ww-zdot {
  position: absolute;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  font-family: var(--hv-f-px, 'Press Start 2P', monospace);
  font-size: 8px;
  line-height: 1;
  color: #f7e6c4;
  background: #a4343a;
  box-shadow: 0 0 0 2px rgba(58, 42, 24, .75), 0 2px 0 rgba(0, 0, 0, .35);
  cursor: pointer;
}
body.hud-v2.skin-majesty .ws-sheet .ww-zdot.is-objective,
body.hud-v2.skin-majesty .ws-sheet .ww-znum.is-objective { background: #d8a657; color: #2a1c0c; }
body.hud-v2.skin-majesty .ws-sheet .ww-zdot.is-event,
body.hud-v2.skin-majesty .ws-sheet .ww-znum.is-event { background: #8fb2ee; color: #0b0f15; }
body.hud-v2.skin-majesty .ws-sheet .ww-zdot.is-lit {
  z-index: 1;
  box-shadow: 0 0 0 2px #f7e6c4, 0 0 0 4px rgba(58, 42, 24, .75);
}
body.hud-v2.skin-majesty .ws-sheet .ww-zlegend {
  margin: 0;
  font-family: var(--hv-f-vt, 'VT323', monospace);
  font-size: 16px;
  color: var(--w2-dim);
  text-align: center;
}
body.hud-v2.skin-majesty .ws-sheet .ww-zonelist {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scrollbar-color: #7e6440 rgba(0, 0, 0, .3);
}
/* a row never shrinks under its words: the list scrolls instead */
body.hud-v2.skin-majesty .ws-sheet .ww-zonelist > * { flex: 0 0 auto; }
body.hud-v2.skin-majesty .ws-sheet .ww-mode.ww-zrow {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-bottom: 0;
  padding: 8px 12px;
}
body.hud-v2.skin-majesty .ws-sheet .ww-zrow .ww-mode-t { flex: 1 1 auto; }
body.hud-v2.skin-majesty .ws-sheet .ww-zrow .ww-mode-go { flex: 0 0 auto; }
body.hud-v2.skin-majesty .ws-sheet .ww-zrow.is-lit { box-shadow: inset 0 0 0 2px #0b0f15, inset 0 0 0 4px #f7e6c4; }
body.hud-v2.skin-majesty .ws-sheet .ww-znum {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-family: var(--hv-f-px, 'Press Start 2P', monospace);
  font-size: 10px;
  color: #f7e6c4;
  background: #a4343a;
  box-shadow: 0 0 0 2px #0b0f15;
}
body.hud-v2.skin-majesty .ws-sheet .ww-zline {
  display: flex;
  flex-wrap: nowrap;
  min-width: 0;
  align-items: center;
  gap: 2px 10px;
  font-family: var(--hv-f-vt, 'VT323', monospace);
  font-size: 18px;
  line-height: 1.1;
  color: var(--w2-ink-2);
}
body.hud-v2.skin-majesty .ws-sheet .ww-zheld {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body.hud-v2.skin-majesty .ws-sheet .ww-zsigil {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-right: -4px;
  image-rendering: pixelated;
}
body.hud-v2.skin-majesty .ws-sheet .ww-zchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
body.hud-v2.skin-majesty .ws-sheet .ww-zchip {
  padding: 3px 6px 2px;
  font-family: var(--hv-f-px, 'Press Start 2P', monospace);
  font-size: 8px;
  line-height: 1;
  letter-spacing: .04em;
}
body.hud-v2.skin-majesty .ws-sheet .ww-zchip.is-objective { background: #d8a657; color: #2a1c0c; }
body.hud-v2.skin-majesty .ws-sheet .ww-zchip.is-event { background: #8fb2ee; color: #0b0f15; }
/* a phone held sideways has no height for a map: the list is the window */
@media (max-height: 540px) {
  body.hud-v2.skin-majesty .ws-sheet .ww-zones :is(.ww-locator, .ww-zlegend) { display: none; }
}

/* ── 15. THE STORE'S $9LV: ONE ROW A LOCK (WB-13) ──────────────────────
   Name, amount and when it opens; the contract's own sentence and its link
   open under the row on a tap (world-windows.js lockRow). */
body.hud-v2.skin-majesty .ws-sheet .ww-locks.is-rows { gap: 4px; }
body.hud-v2.skin-majesty .ws-sheet .ww-lock.ww-lockrow {
  display: block;
  padding: 0;
  background: rgba(0, 0, 0, .14);
  box-shadow: none;
  border-left: 3px solid #e0535c;
}
body.hud-v2.skin-majesty .ws-sheet .ww-lockhead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--hv-f-vt, 'VT323', monospace);
  font-size: 18px;
  color: var(--w2-ink);
}
body.hud-v2.skin-majesty .ws-sheet .ww-lockhead:hover { background: rgba(255, 255, 255, .06); }
/* the row says it opens: a plus at its end, a minus while open (N5) */
body.hud-v2.skin-majesty .ws-sheet .ww-lockhead::after {
  content: '+';
  flex: 0 0 auto;
  width: 14px;
  text-align: center;
  font-family: var(--hv-f-px, 'Press Start 2P', monospace);
  font-size: 10px;
  line-height: 1;
  color: var(--w2-gold);
}
body.hud-v2.skin-majesty .ws-sheet .ww-lockhead[aria-expanded='true']::after { content: '-'; }
body.hud-v2.skin-majesty .ws-sheet .ww-lockhead:focus-visible { outline: 2px solid var(--w2-gold); outline-offset: -2px; }
body.hud-v2.skin-majesty .ws-sheet .ww-lockhead b { flex: 1 1 auto; font-weight: 400; }
body.hud-v2.skin-majesty .ws-sheet .ww-lockchip {
  padding: 3px 6px 2px;
  font-family: var(--hv-f-px, 'Press Start 2P', monospace);
  font-size: 8px;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--w2-gold);
  background: var(--w2-well);
  box-shadow: inset 0 0 0 1px rgba(227, 199, 154, .4);
}
body.hud-v2.skin-majesty .ws-sheet .ww-lockmore { padding: 0 10px 10px; }
body.hud-v2.skin-majesty .ws-sheet .ww-lockmore i {
  display: block;
  margin-bottom: 6px;
  font-style: normal;
  font-size: 16px;
  line-height: 1.3;
  color: var(--w2-ink-2);
}
body.hud-v2.skin-majesty .ws-sheet .ww-locklink { color: var(--w2-gold); font-size: 16px; }

/* ══════════════════════════════════════════════════════════════════════
   S14: THE WINDOWS FIT AND SCROLL (#3069 S14)
   ══════════════════════════════════════════════════════════════════════ */

/* ── 17. A NATIVE PANE THAT RUNS PAST ITS WINDOW SCROLLS (D1) ──────────
   The sheet's body hides its overflow (world-skin.css), and Settings'
   House and Help and the Play door draw straight into it, so at a laptop's
   height their foot was cut off and the wheel moved nothing: at 1366x657
   the house tiles sat at y578-630 under a body that ends at 463 (no house
   could be chosen at all), Help showed 3 of its 7 steps, and Party games
   was gone. Each pane's own root is now the inner scroll column the zone
   list and the quest content already are: a flex column that takes the
   body's height and scrolls in it, with the drawn scrollbar. */
body.hud-v2.skin-majesty .ws-sheet .ws-sheet-body :is(.ww-help, .ww-house, .ww-modes) {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #7e6440 rgba(0, 0, 0, .3);
}
/* a row never shrinks under its words: the column scrolls instead */
body.hud-v2.skin-majesty .ws-sheet .ws-sheet-body :is(.ww-help, .ww-house, .ww-modes) > * { flex-shrink: 0; }
body.hud-v2.skin-majesty .ws-sheet :is(.ww-help, .ww-house, .ww-modes, .ww-bagwrap.is-scrollcol)::-webkit-scrollbar { width: 8px; }
body.hud-v2.skin-majesty .ws-sheet :is(.ww-help, .ww-house, .ww-modes, .ww-bagwrap.is-scrollcol)::-webkit-scrollbar-track { background: rgba(0, 0, 0, .3); }
body.hud-v2.skin-majesty .ws-sheet :is(.ww-help, .ww-house, .ww-modes, .ww-bagwrap.is-scrollcol)::-webkit-scrollbar-thumb {
  background: #7e6440;
  border: 2px solid rgba(0, 0, 0, .35);
}

/* ── 18. A TAB ROW THAT RUNS PAST AN EDGE FADES ON THAT EDGE (PH-F5) ───
   Under 901px the ribbons are a row along the window's top, and Settings'
   seven are wider than a phone: Credits sat wholly past the right edge at
   390 with nothing to say the row moves. world-shell.js (tabEdgeCue) marks
   the side with more on it, and the row fades out there, so a cut tab reads
   as "more this way". The chosen tab is brought into view on open and on
   every pick (revealTab), so the fade never hides the one you are on. */
@media (max-width: 900px) {
  body.hud-v2.skin-majesty .ws-tabs.is-more-r {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  }
  body.hud-v2.skin-majesty .ws-tabs.is-more-l {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent);
  }
  body.hud-v2.skin-majesty .ws-tabs.is-more-l.is-more-r {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  }
}

/* ── 19. "ONE MOMENT." CAN BE READ (K10) ─────────────────────────────────
   The framed page's waiting line drew about 7px tall and at three
   quarters' strength under the gold head, on slate: there, but not read.
   In the window's own word face at a reading size, full strength, in the
   second ink the rest of a window's small print uses. */
body.hud-v2.skin-majesty .ws-frame-state .ws-frame-sub {
  font-family: var(--hv-f-vt, 'VT323', monospace);
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0;
  opacity: 1;
  color: var(--w2-ink-2);
}

/* ── 20. A THUMB'S REACH ON SMALL CONTROLS (PH-F9) ──────────────────────
   On a touch screen the Store's $9LV COPY (47x10) and a window's tab row
   (34 tall: the Store's, the Spellbook's, the Leaderboard's periods) were
   under a finger. Each gets a transparent 44px reach, and the art does not
   change. The door tiles are left alone: Wray's standing ruling is fewer
   tiles, not smaller ones. (The quest tracker's head and rows carry the
   same reach in world-tracker.css.) */
@media (pointer: coarse) {
  body.hud-v2.skin-majesty .ws-sheet .ww-ca-copy,
  body.hud-v2.skin-majesty .ws-sheet :is(.ws-paneltab, .ww-boardscope) { position: relative; }
  body.hud-v2.skin-majesty .ws-sheet .ww-ca-copy::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 44px);
    height: 44px;
    transform: translate(-50%, -50%);
  }
  /* ⛔A TAB'S REACH HANGS DOWN, NOT BOTH WAYS. The tabs sit flush with the
     top of the window's body, which hides its overflow, and a phone's row
     scrolls sideways, which clips too: a reach centred on the 34px tab lost
     its top 5px to both (measured at 390x844: a press 4px above the tab
     missed it). From the tab's own top down to 44 lands in the row's 8px
     foot and its rule, where nothing else is. */
  body.hud-v2.skin-majesty .ws-sheet :is(.ws-paneltab, .ww-boardscope)::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: max(100%, 44px);
    height: 44px;
    transform: translateX(-50%);
  }
  /* ...and a phone's row, which clips, keeps 10px of foot under its tabs
     (8 before), so 34 drawn and 10 below make the 44 */
  body.hud-v2.skin-majesty .ws-sheet .ws-panelnav { padding-bottom: 10px; }
}

/* ── 21. ONE LETTERING FOR EVERY ACTION BUTTON (#3069, point 5) ─────────
   Wray, 2026-09-26: "fix", to "button lettering differs between windows"
   (Settings said CONNECT WALLET, the Guild said Connect wallet, and the
   Inventory said Sort beside BANK). The rule is small capitals: the text in
   capitals at the button's OWN size, in the pixel face, spaced 1px apart,
   which is what Settings' CONNECT WALLET already was (measured on the served
   page: uppercase, Press Start 2P, 1px). Six spacings were in use (.32px to
   1px) across nineteen buttons.

   ⭐THE TOKENS ARE THE RULE. framed-v2.css states the same three for a
   framed page (another document, which cannot inherit these), and
   worldButtonLettering.test.js holds the two sets equal, so a framed button
   and a native one can never drift apart again.

   WHAT COUNTS AS AN ACTION BUTTON: a plank you press to DO something. A tab
   (role=tab, the profile's strip among them), a chip, a row you open (a mode, a zone, a room, a lock) and an
   input keep their own lettering. The Inventory's Sort is a <select>, but
   picking one sorts the bag and it goes back to reading Sort (#3031 PR 3):
   it is pressed like a button, sits in the button row, and wears the rule.
   So does the side panel's BACK where it is a plank (a phone, a tablet:
   section 6); on a laptop the same control is a bare close glyph. And so
   does the verb a Play row ends on (.ww-mode-go: Enter, Go to the pit,
   Deploy, Open the room list): the row is what you press and the verb is
   its lettering, the one action word the Play window has. It read "Deploy"
   while the Inventory beside it read BANK.

   ⛔THE INVENTORY'S PINNED CARD IS NOT IN THE WINDOW. Tap an item and its
   card (Equip, Take off, and the socket picker's Take out) is appended to
   <body>, and this sheet never reaches the parchment hover card
   (worldWindowsV2.test.js). Its planks take these same tokens in
   world-inventory-v2.css, beside that card's own v2 plank rule. It said
   "Equip" at .04em beside the bag's BANK.

   Scoped to the windows' bodies, as section 3's planks are; no size is
   set here, so a 9px button stays 9 and an 8px one 8. */
body.hud-v2.skin-majesty {
  --hv-act-font: 'Press Start 2P', monospace;
  --hv-act-case: uppercase;
  --hv-act-track: 1px;
}
body.hud-v2.skin-majesty :where(.ws-sheet-body, .ww-profile, .ww-aside) :is(.wr-plank, .ww-q-claim, .ww-help-go, .ww-house-cta, .ww-claim, .ww-way, .ww-sort, .ww-ca-copy, .ww-mode-go):not([role='tab']),
body.hud-v2.skin-majesty .ww-aside.is-over-sheet .ww-asidex {
  font-family: var(--hv-act-font);
  text-transform: var(--hv-act-case);
  letter-spacing: var(--hv-act-track);
}

/* ── 22. EVERY WINDOW STARTS UNDER THE DOOR ROW, AT EVERY --hv-k (#3131) ──
   A window's top was the skin's fixed 96 (world-skin.css --sk-win-top,
   four times), while the door row grows with the chrome pixel. Measured on
   the served page with the Inventory open:

       --hv-k 2 (1920x1080)   row ends at  60, window at 96: clear by 36
       --hv-k 3 (2560x1440)   row ends at  84, window at 96: clear by 12
       --hv-k 4 (3840x2160)   row ends at 112, window at 96: the window took
                              the clicks on the bottom 16px of all 8 doors
       --hv-k 3 (3440x1440)   row ends at  88 (the ultrawide's edge is 16),
                              window at 96: 1px inside a lit door's glow

   So the top is at least the row's REAL bottom (--ws-row-b: world-shell.js
   reads it off .an-row when a window opens and every frame one is up) plus
   a lit door's glow (3 chrome pixels under the tile, world-doors-v2.css)
   and one more chrome pixel. That is the gap --hv-k 3 already had, so at
   1920 and 2560 nothing moves (60 + 8 and 84 + 12 are both under 96), and
   at 3840 the window starts at 112 + 16 = 128. Section 1's rise follows on
   its own (it is worked out from --sk-win-top): 4px there, so the title and
   the close sit at 124, where they were, under the row's glow, and the
   window's box is below the doors. An ultrawide at --hv-k 3 (3440x1440)
   moves too, by 4px: 88 + 12 puts the window at 100, a docked window is
   4px shorter, and the title stays at 97 (the rise shrinks to 3), so the
   page inside starts where it did.

   --fy comes off because the measure is the viewport's and the skin adds
   --fy back (top: calc(var(--fy) + var(--sk-win-top))). Before anything has
   measured (no script, the first frame) it is the skin's 96.

   Every placement: the docks, the centred Store and Spellbook, and the
   centred Settings, whose own centring (section 4b) keeps this as its
   floor. Not the Map window, which covers the whole picture on purpose and
   dims the room (world-map-v2.css), and not a tablet or a phone: the tablet
   has its own 112 (section 8) and a phone's window is the screen with the
   row hidden (section 9). The Leaderboard's profile and the Inventory's
   Bank and Builds panel are placed off the open window's rectangle
   (world-windows.js), so they move with it.

   ⛔NOT ONLY A DOCKED WINDOW. A window opened with WorldShell.openSheet
   and no dock before any door has been opened carries no `data-side` (the
   dock is stamped by a door, or by openSheet's own `dock`), and the skin's
   bare .ws-sheet rule places it as a right dock at 96. Keyed on
   `[data-side]`, that window stayed at 96 and covered 48 of 48 samples on
   the doors at 3840x2160 (review of #3264: Mug's Bar, world-bar.js). The
   one heavier rule in this layer on a desktop window's top is the centred
   Settings' (section 4b, 0,7,1), which the rule below answers at its own
   weight, and the Map's is excluded by name, so the bare sheet changes
   which rule wins nowhere else. */
@media (min-width: 901px) and (min-height: 541px) {
  body.hud-v2.skin-majesty {
    --w2-win-top: max(96px, calc(var(--ws-row-b, 0px) - var(--fy, 0px) + 4px * var(--hv-k, 2)));
  }
  body.hud-v2.skin-majesty .ws-sheet:not([data-door='map']),
  body.hud-v2.skin-majesty .ws-tabs:not([data-door='map']) {
    --sk-win-top: var(--w2-win-top);
  }
  body.hud-v2.skin-majesty .ws-sheet.ws-sheet[data-side='right'][data-door='record']:not([data-door='map']),
  body.hud-v2.skin-majesty .ws-tabs.ws-tabs[data-side='right'][data-door='record'] {
    --sk-win-top: max(var(--w2-win-top), calc((var(--fh, 100vh) - var(--w0bar-h, 110px) - 16px - var(--sk-win-h)) / 2));
  }
}

/* ── 23. THE LEADERBOARD'S ROWS TAKE A THUMB (the HUD pass's final audit) ──
   A player's ranking row is a link to that player's profile, and it drew
   30 tall (world-skin.css: 5px padding round a 17px line), under the 44 a
   finger needs. The rows touch, so a transparent reach round each would
   overlap its neighbours' and give the press to whichever was painted last;
   on a touch screen the row itself is 44 tall instead, its words centred as
   before. A mouse keeps the 30px ladder (pointer: fine is untouched).

   ⛔ONLY A ROW THAT IS A LINK (`is-link`, which world-windows.js adds when
   the row has a player's handle). The Houses and Guilds ladders have no
   profile to open, so their rows take no press, and growing them 14px each
   only cost a phone its height (review of #3264). */
@media (pointer: coarse) {
  body.hud-v2.skin-majesty .ws-sheet .ww-rank.is-link {
    box-sizing: border-box;
    min-height: 44px;
  }
}

} /* end of @layer corners */