/* ═══════════════════════════════════════════════════════════════════════
   world-player-card.css — THE PLAYER CARD, INSPECTED (#3146)

   Wray ruled CARD 1C 2B 3A on 2026-09-26: the target plate first, with icon
   buttons (add friend, inspect, message), and Inspect opens the player's
   card in a centred window. public/js/world-player-card.js draws both; this
   sheet dresses them in kit B (slate window, red title ribbon, slot1 cells,
   btn / btngold, the well).

   EVERY RULE STARTS AT `body.hud-v2`: the card only opens under the HUD
   pass, and the plate's buttons change only under `body.hud-v2.wpc-on`,
   which world-player-card.js sets once FEATURE_WORLD_PLAYER_CARD answers
   yes. With the flag off this sheet matches nothing.

   One `corners` block, after world-target-plate.css, so the plate's act
   rules refine that sheet's by layer and order, never by a specificity race.

   ── SIZES ─────────────────────────────────────────────────────────────
   --wpc-s is the card's scale, set by the module from the screen: 1.25 on a
   desktop (the mock's 300x475), less on a short screen, about 1.07 on a
   390-wide phone. The card is CardPaint's 240x380 art units times that; the
   art window is 16,16 208x200 of it (door.js). Chrome is drawn at the HUD's
   own --hv-k (1 on a laptop or phone, 2 at 1920x1080).
   ═══════════════════════════════════════════════════════════════════════ */
@layer base, module, skin, nerm, corners;

@layer corners {

/* CardPaint's black face asks for 'New Rocker' (its FONTS.black), the
   same family the world's chrome uses (pack-reveal.js injects the same
   declaration). */
@font-face {
  font-family: 'New Rocker';
  src: url('/assets/fonts/NewRocker-Regular.ttf?v=2026-10-04a') format('truetype');
  font-display: swap;
}

/* ── the plate's row (CARD 1C) ─────────────────────────────────────────
   Bigger icons than S10's 6x6 at 2: the same glyph at 4, so the button is
   10k + 24: 44 at k 2 (the ruling's 44px), 34 at k 1 with the 44px press
   box world-target-plate.css already hangs round each act on a finger. */
body.nav-albion.hud-v2.wpc-on .an-tl .ws-plate[data-role='target'] { --tp-glyph: 24px; }
@media (min-width: 3360px) and (min-height: 1890px) {
  body.nav-albion.hud-v2.wpc-on .an-tl .ws-plate[data-role='target'] { --tp-glyph: 48px; }
}
/* Inspect: a card with a Nine in its window */
body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'] .ws-act[data-act='inspect']::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cpath fill='%23e3c79a' d='M1 0h4v1H1zM1 5h4v1H1zM1 1h1v4H1zM4 1h1v4H4zM2 2h2v2H2z'/%3E%3C/svg%3E");
}
/* Message: a letter */
body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'] .ws-act[data-act='message']::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cpath fill='%23e3c79a' d='M0 1h6v1H0zM0 4h6v1H0zM0 2h1v2H0zM5 2h1v2H5zM2 2h2v1H2z'/%3E%3C/svg%3E");
}

/* ── the room, dimmed, and the window on it ────────────────────────────── */
body.hud-v2 .wpc {
  --wpc-s: 1.25;
  --wpc-house: #8a8a8a;
  --wpc-cell: max(44px, calc(22 * var(--hv-k, 1) * 1px));
  --wpc-ink: #efe6d2;
  --wpc-dim: #bdb29a;
  position: fixed;
  inset: 0;
  z-index: 9000;                       /* over every window, under a tooltip (9400) */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 8, 14, .55);
}

body.hud-v2 .wpc-win {
  position: relative;
  box-sizing: border-box;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  padding: calc(14 * var(--hv-k, 1) * 1px) calc(8 * var(--hv-k, 1) * 1px) calc(8 * var(--hv-k, 1) * 1px);
  border-style: solid;
  border-width: calc(18 * var(--hv-k, 1) * 1px);
  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, 1) * 1px);
  border-image-repeat: stretch;
  background: #3a4760 padding-box;
  image-rendering: pixelated;
  color: var(--wpc-ink);
  font-family: 'VT323', monospace;
  box-shadow: 0 8px 0 rgba(0, 0, 0, .45);
}

/* the title on kit B's red ribbon, riding the top edge (world-windows-v2.css) */
body.hud-v2 .wpc-title {
  position: absolute;
  left: 50%;
  top: calc(-18 * var(--hv-k, 1) * 1px - 11 * var(--hv-k, 1) * 1px);
  translate: -50% 0;
  height: calc(28 * var(--hv-k, 1) * 1px);
  min-width: calc(116 * var(--hv-k, 1) * 1px);
  box-sizing: border-box;
  padding: calc(2 * var(--hv-k, 1) * 1px) calc(28 * var(--hv-k, 1) * 1px) calc(9 * var(--hv-k, 1) * 1px);
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  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, 1) * 1px) calc(24 * var(--hv-k, 1) * 1px) calc(9 * var(--hv-k, 1) * 1px) calc(24 * var(--hv-k, 1) * 1px);
  border-image-repeat: stretch;
  font-family: 'New Rocker', 'Press Start 2P', monospace;
  font-size: calc(16 * var(--hv-k, 1) * 1px);
  line-height: 1;
  color: #f7e6c4;
  text-shadow: 0 calc(var(--hv-k, 1) * 1px) 0 #5e1414;
}
@supports (translate: round(-50%, 1px) 0) {
  body.hud-v2 .wpc-title { left: round(50%, 1px); translate: round(-50%, 1px) 0; }
}

/* the close, kit B's red square, whole, on the top edge; a 44px press box */
body.hud-v2 .wpc-x {
  position: absolute;
  right: calc(-9 * var(--hv-k, 1) * 1px);
  top: calc(-18 * var(--hv-k, 1) * 1px - 11 * var(--hv-k, 1) * 1px);
  width: calc(25 * var(--hv-k, 1) * 1px);
  height: calc(27 * var(--hv-k, 1) * 1px);
  margin: 0;
  padding: 0;
  border: 0;
  background: url('/assets/ui/kitb/close.png?v=2026-09-24a') center / 100% 100% no-repeat;
  image-rendering: pixelated;
  font-size: 0;
  color: transparent;
  cursor: pointer;
  z-index: 3;
}
body.hud-v2 .wpc-x::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}
body.hud-v2 .wpc-x:hover, body.hud-v2 .wpc-x:focus-visible { filter: brightness(1.2); outline: none; }

/* ── the body: the card beside what it adds up to ──────────────────────── */
body.hud-v2 .wpc-body {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  max-height: calc(100vh - 32px - 36 * var(--hv-k, 1) * 1px - 22 * var(--hv-k, 1) * 1px);
  overflow: auto;
}

body.hud-v2 .wpc-cardcol {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  flex: none;
}

/* ⭐THE SLOTS DOWN THE CARD'S LEFT SIDE (Wray's addition, 2026-09-26), in
   the Inventory's order, beside the art window; kit B's slot1 cell, a
   thumb's 44 at the least. The ribbon's swallowtail hangs 24 art units
   past the card's left edge, so the card stands that far off the column. */
body.hud-v2 .wpc-slots {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: calc(16px * var(--wpc-s));
}
body.hud-v2 .wpc-slot {
  position: relative;
  box-sizing: border-box;
  width: var(--wpc-cell);
  height: var(--wpc-cell);
  margin: 0;
  padding: calc(5 * var(--hv-k, 1) * 1px);
  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, 1) * 1px) stretch;
  background: none;
  image-rendering: pixelated;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* an enchanted piece in its enchant rim (C44: .1 green .2 blue .3 purple .4 gold) */
body.hud-v2 .wpc-slot[data-e='1'] { border-image-source: url('/assets/ui/kitb/slot2.png?v=2026-09-24a'); }
body.hud-v2 .wpc-slot[data-e='2'] { border-image-source: url('/assets/ui/kitb/slot3.png?v=2026-09-24a'); }
body.hud-v2 .wpc-slot[data-e='3'] { border-image-source: url('/assets/ui/kitb/slot4.png?v=2026-09-24a'); }
body.hud-v2 .wpc-slot[data-e='4'] { border-image-source: url('/assets/ui/kitb/slot5-gold.png?v=2026-09-26a'); }
body.hud-v2 .wpc-slot.is-empty { cursor: default; opacity: .8; }
/* a starter piece (L-B18: never minted, worn where nothing else is) drawn
   ghosted, as the Inventory's doll draws it */
body.hud-v2 .wpc-slot.is-starter .wpc-slot-i,
body.hud-v2 .wpc-slot.is-starter .wpc-ghost { opacity: .6; }
body.hud-v2 .wpc-slot:not(.is-empty):hover,
body.hud-v2 .wpc-slot:not(.is-empty):focus-visible { filter: brightness(1.2); outline: none; }
body.hud-v2 .wpc-slot-i {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}
/* the ghost of the slot's kind: grey when empty, colour when a piece is
   there but its art is not (slot-icons.png, 16px cells, colour row over
   grey), drawn at 2 */
body.hud-v2 .wpc-ghost {
  display: block;
  width: 32px;
  height: 32px;
  background-image: url('/assets/ui/slot-icons.png?v=2026-08-30a');
  background-size: 192px 64px;
  background-position: calc(-32px * var(--wpc-ghost-x, 0)) -32px;
  image-rendering: pixelated;
  opacity: .55;
}
body.hud-v2 .wpc-ghost.is-colour { background-position-y: 0; opacity: .9; }
body.hud-v2 .wpc-ghost.is-boots { background-size: 100% 100%; background-position: 0 0; }

/* ── the card ──────────────────────────────────────────────────────────── */
/* ⛔ THE MARGINS ARE THE FACE'S OVERHANG, EXACTLY (the #3326 review: the
   window scrolled 9px on every desktop and dragged 4px sideways on a phone).
   CardPaint draws the face in its bounds, x -26 to 266 and y -2 to 387 of
   the 240x380 card: the ribbon's swallowtails hang 26 units out either side
   and the frame's shadow 7 below, so the card keeps that room round it and
   the body never has anything to scroll to. */
body.hud-v2 .wpc-card {
  position: relative;
  flex: none;
  width: calc(240px * var(--wpc-s));
  height: calc(380px * var(--wpc-s));
  margin: calc(2px * var(--wpc-s)) calc(26px * var(--wpc-s)) calc(8px * var(--wpc-s));
}
/* the art window: their ground, and on it their rig or their portrait */
body.hud-v2 .wpc-stage {
  position: absolute;
  left: calc(16px * var(--wpc-s));
  top: calc(16px * var(--wpc-s));
  width: calc(208px * var(--wpc-s));
  height: calc(200px * var(--wpc-s));
  overflow: hidden;
  background: #111820;
  background-image: radial-gradient(ellipse at 50% 78%, color-mix(in srgb, var(--wpc-house) 36%, transparent) 0, transparent 62%);
}
body.hud-v2 .wpc-stage > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}
body.hud-v2 .wpc-stage > canvas.wpc-portrait { object-fit: contain; }
/* the face, with the art window cut out of it, over the stage */
body.hud-v2 .wpc-face {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  image-rendering: pixelated;
}
/* ⭐THE GUILD LOGO SLOT (Wray's addition): a framed square at the art
   window's top left, opposite the house sigil, "No guild" when there is none */
body.hud-v2 .wpc-logo {
  position: absolute;
  z-index: 2;
  left: calc(24px * var(--wpc-s));
  top: calc(24px * var(--wpc-s));
  width: calc(54px * var(--wpc-s));
  height: calc(54px * var(--wpc-s));
  box-sizing: border-box;
  padding: 6px;
  border-style: solid;
  border-width: 0;
  border-image: url('/assets/ui/kitb/slate-equip.png?v=2026-09-24a') 8 fill / 8px stretch;
  image-rendering: pixelated;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
body.hud-v2 .wpc-logo img { max-width: 100%; max-height: 100%; object-fit: contain; image-rendering: auto; }
body.hud-v2 .wpc-logo-t {
  font-family: 'VT323', monospace;
  font-size: calc(14px * var(--wpc-s));
  line-height: .95;
  text-align: center;
  color: var(--wpc-dim);
  overflow-wrap: anywhere;
}
/* why the window shows a portrait and not their live rig.
   ⛔ HELD BY ITS BOTTOM TO THE ART WINDOW'S BOTTOM, and sized with the card
   (the #3326 review): hung from a fixed 30px above that edge in a fixed
   15px font, it ran to two and three lines and down over the ribbon and the
   name. Now it grows UP into the window's ground, whatever it wraps to. */
body.hud-v2 .wpc-note {
  position: absolute;
  z-index: 2;
  left: calc(16px * var(--wpc-s));
  width: calc(208px * var(--wpc-s));
  top: auto;
  bottom: calc(164px * var(--wpc-s));    /* 380 - 216: the art window's bottom edge */
  max-height: calc(80px * var(--wpc-s));
  overflow: hidden;
  box-sizing: border-box;
  padding: 2px 6px;
  font-family: 'VT323', monospace;
  font-size: max(11px, calc(12px * var(--wpc-s)));
  line-height: 1.05;
  color: var(--wpc-ink);
  background: rgba(8, 10, 16, .72);
}
body.hud-v2 .wpc-note[hidden] { display: none; }

/* ── beside the card ───────────────────────────────────────────────────── */
body.hud-v2 .wpc-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 300px;
  min-width: 0;
}
body.hud-v2 .wpc-name {
  font-family: 'New Rocker', 'Press Start 2P', monospace;
  font-size: calc(16 * var(--hv-k, 1) * 1px);
  line-height: 1.1;
  color: #f7e6c4;
  overflow-wrap: anywhere;
}
/* "online · <place>" under the name (#2783 slice 3, §5.6): the side's own
   reading face, in the dim of the labels, and gone when there is no mark */
body.hud-v2 .wpc-online {
  margin-top: -8px;
  font-family: 'VT323', monospace;
  font-size: 20px;
  line-height: 1.1;
  color: var(--wpc-dim);
  overflow-wrap: anywhere;
}
body.hud-v2 .wpc-online[hidden] { display: none; }
body.hud-v2 .wpc-well {
  box-sizing: border-box;
  padding: 14px 16px;
  border-style: solid;
  border-width: 10px;
  border-image: url('/assets/ui/kitb/well.png?v=2026-09-24a') 10 fill / 10px stretch;
  image-rendering: pixelated;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.hud-v2 .wpc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
body.hud-v2 .wpc-k { font-family: 'VT323', monospace; font-size: 20px; color: var(--wpc-dim); }
body.hud-v2 .wpc-v { font-family: 'Press Start 2P', monospace; font-size: 12px; font-weight: 400; color: var(--wpc-ink); white-space: nowrap; }
body.hud-v2 .wpc-spark { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
body.hud-v2 .wpc-spark svg { display: block; image-rendering: pixelated; }
/* the player's line whole, when the card had to cut it with an ellipsis */
body.hud-v2 .wpc-quote {
  font-family: 'VT323', monospace;
  font-size: 20px;
  line-height: 1.1;
  color: #d9cdb2;
  overflow-wrap: anywhere;
}
body.hud-v2 .wpc-quote[hidden] { display: none; }
/* on your own card, why there is no EDIT CARD (the chat's speak rule) */
body.hud-v2 .wpc-why { font-family: 'VT323', monospace; font-size: 20px; line-height: 1.1; color: var(--wpc-dim); }
body.hud-v2 .wpc-msg { font-family: 'VT323', monospace; font-size: 20px; line-height: 1.1; color: var(--wpc-ink); min-height: 0; }
body.hud-v2 .wpc-msg[hidden] { display: none; }
body.hud-v2 .wpc-msg[data-kind='err'] { color: #ff9a8a; }
body.hud-v2 .wpc-msg[data-kind='ok'] { color: #a8e6a0; }
body.hud-v2 .wpc-msg[data-kind='wait'] { color: var(--wpc-dim); }

body.hud-v2 .wpc-acts { display: flex; flex-wrap: wrap; gap: 8px; }
body.hud-v2 .wpc-acts[hidden] { display: none; }
/* the friendship the card knows (#4166), in Add friend's place: a line of
   its own above the buttons, in the side's reading face */
body.hud-v2 .wpc-fr {
  flex: 1 1 100%;
  font-family: 'VT323', monospace;
  font-size: 20px;
  line-height: 1.1;
  color: var(--wpc-dim);
}
body.hud-v2 .wpc-btn {
  box-sizing: border-box;
  min-height: 44px;
  min-width: 132px;
  margin: 0;
  padding: 6px 14px 8px;
  border-style: solid;
  border-width: 0;
  border-image: url('/assets/ui/kitb/btn.png?v=2026-09-24a') 3 3 5 3 fill / calc(3 * var(--hv-k, 1) * 1px) calc(3 * var(--hv-k, 1) * 1px) calc(5 * var(--hv-k, 1) * 1px) calc(3 * var(--hv-k, 1) * 1px) stretch;
  background: none;
  image-rendering: pixelated;
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--wpc-ink);
  cursor: pointer;
}
body.hud-v2 .wpc-btn.is-gold {
  border-image-source: url('/assets/ui/kitb/btngold.png?v=2026-09-24a');
  color: #2a1a08;
}
body.hud-v2 .wpc-btn:hover, body.hud-v2 .wpc-btn:focus-visible { filter: brightness(1.15); outline: none; }
body.hud-v2 .wpc-btn:disabled { opacity: .6; cursor: default; }

/* EDIT CARD: your line (CARD 2B) */
body.hud-v2 .wpc-edit { display: flex; flex-direction: column; gap: 6px; }
body.hud-v2 .wpc-edit[hidden] { display: none; }
body.hud-v2 .wpc-edit-l { display: flex; flex-direction: column; gap: 4px; font-size: 20px; color: var(--wpc-dim); }
body.hud-v2 .wpc-edit-in {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 6px 10px;
  border-style: solid;
  border-width: 4px;
  border-image: url('/assets/ui/kitb/chat-input.png?v=2026-09-24a') 4 fill / 4px stretch;
  background: none;
  font-family: 'VT323', monospace;
  font-size: 22px;
  color: var(--wpc-ink);
  outline: none;
}
body.hud-v2 .wpc-edit-in:focus-visible { box-shadow: 0 0 0 2px #e3c79a; }
body.hud-v2 .wpc-edit-hint { font-size: 17px; color: var(--wpc-dim); }
body.hud-v2 .wpc-edit-n { font-family: 'Press Start 2P', monospace; font-size: 10px; color: var(--wpc-dim); text-align: right; }
body.hud-v2 .wpc-edit-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* SHARE CARD (CARD 5A): the link, Post on X, Copy link, under the buttons */
body.hud-v2 .wpc-share { display: flex; flex-direction: column; gap: 6px; }
body.hud-v2 .wpc-share-l { font-family: 'VT323', monospace; font-size: 19px; line-height: 1.05; color: var(--wpc-dim); }
body.hud-v2 .wpc-share-in {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 6px 10px;
  border-style: solid;
  border-width: 4px;
  border-image: url('/assets/ui/kitb/chat-input.png?v=2026-09-24a') 4 fill / 4px stretch;
  background: none;
  font-family: 'VT323', monospace;
  font-size: 20px;
  color: var(--wpc-ink);
  outline: none;
}
body.hud-v2 .wpc-share-in:focus-visible { box-shadow: 0 0 0 2px #e3c79a; }
body.hud-v2 .wpc-share-row { display: flex; gap: 8px; flex-wrap: wrap; }
body.hud-v2 a.wpc-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* ── the Inventory's YOUR CARD button (world-windows.js, flag on only) ────
   ⛔ ON THE DOLL, NOT IN THE FOOTER (the #3326 review). A third way in the
   footer's right cell squeezed Sort, Find and the count onto three lines
   (at 1920x1080 the footer went from one 34px row to 89px), and giving the
   ways a row of their own cost the bag a row of cells at 1280x720 (97px of
   grid down to 61). So the button sits in the top right corner of the
   doll's well, which is empty ground, and costs the bag nothing: the well
   is the stage world-inventory-v2.css places between the two columns of
   cells (left 4.3307% + one cell, the same inset on the right). */
body.hud-v2.skin-majesty .ww-inv2 .ww-dollbox > .ww-yourcard {
  position: absolute;
  z-index: 3;
  top: 8px;
  right: calc(4.3307% + var(--cw) + 8px);
  margin: 0;
  min-height: 32px;
  padding-left: 8px;
  padding-right: 8px;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (pointer: coarse) {
  body.hud-v2.skin-majesty .ww-inv2 .ww-dollbox > .ww-yourcard { min-height: 44px; }
}

/* ── opened from the Leaderboard: BESIDE it, not over it ─────────────────
   Wray's #2020 ruling for the profile this card replaces. The room is not
   dimmed and a press outside the window goes through to whatever is there,
   so the next ladder row is one press away and switches the card. With room
   to the ladder's right the module places the window there (.is-placed,
   left/top from world-player-card.js placeBeside); without it, the centre. */
body.hud-v2 .wpc.is-beside { background: none; pointer-events: none; }
body.hud-v2 .wpc.is-beside .wpc-win { pointer-events: auto; }
body.hud-v2 .wpc.is-beside.is-placed { display: block; }
body.hud-v2 .wpc.is-beside.is-placed .wpc-win { position: absolute; }

/* ── a short screen (a phone on its side): the slots in two columns ────────
   Six 44px cells stood taller than a card scaled to 390px of height, so the
   trinket fell below the fold (the #3326 review at 844x390). Two columns of
   three keep every cell a thumb's 44 and beside the art window. */
@media (max-height: 480px) and (min-width: 601px) {
  body.hud-v2 .wpc-slots {
    display: grid;
    grid-template-columns: repeat(2, var(--wpc-cell));
    grid-auto-rows: var(--wpc-cell);
    gap: 4px;
    align-content: start;
  }
}

/* ── a phone: the whole screen (S12's rule for windows) ─────────────────── */
@media (max-width: 600px) {
  body.hud-v2 .wpc { align-items: stretch; justify-content: stretch; background: none; }
  body.hud-v2 .wpc-win {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    padding: 34px 0 0;
    display: flex;
    flex-direction: column;
  }
  body.hud-v2 .wpc-title { top: 0; }
  body.hud-v2 .wpc-x { top: 0; right: 0; }
  body.hud-v2 .wpc-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 8px 4px 16px;               /* the 4px either side is PHONE.PAD in the module's sum */
    box-sizing: border-box;
  }
  body.hud-v2 .wpc-side { width: 100%; max-width: 360px; padding: 0 4px; box-sizing: border-box; }
  body.hud-v2 .wpc-acts .wpc-btn { flex: 1 1 140px; }
}

}
/* end of @layer corners */