/* ══════════════════════════════════════════════════════════════════════
   world-party.css: the party on the HUD (#2642 P4, world-party-plates.js)
   From the ruled P3 mock (audit/ui-gen/2026-09-29-party-p3/stage.js, PARTY
   P3 1A 2A 3A 4C, then 4A on 2026-10-14): kit B art only (tip, slot1, slate-window), the world's
   own fonts and inks, sized by the HUD pass's --hv-k.
   Every rule hangs off body.hud-v2: with the pass off nothing here draws.
   ══════════════════════════════════════════════════════════════════════ */

@layer base, module, skin, nerm, corners;

@layer corners {

/* the Invite act on the target plate's row: a flag */
body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'] .ws-act[data-act='invite']::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 0h1v6H0zM1 0h4v1H1zM1 1h5v1H1zM1 2h4v1H1z'/%3E%3C/svg%3E");
}

/* the legacy PLAY ARENA plank shares the corner on a phone: it stands down
   while you are in a party, as it does while a target is held (P3 ruling) */
body.hud-v2.wpp-in-party .wld-door { display: none; }

/* ⭐PTY2 A AND P3-1 A (Wray, 2026-09-29, on #2642): "member plates sit under
   yours on a landscape phone ... with the target plate beside yours", and the
   same on a computer. Below 1024 wide the corner is a column
   (world-albion.css), so a held target's plate went UNDER yours, which is
   where the member plates stack (world-party-plates.js place(), measured off
   your plate): at 844x390, and in a laptop window snapped to half the screen
   (1008x1160 at Wray's 75% zoom), the two drew on top of each other, at x 12
   y 118 both. In a party the corner is a row at every width under 1024, as it
   already is from 1024 (world-target-plate.css) and as the ruled mock draws it
   on a phone (audit/ui-gen/2026-09-29-party-p3/stage.js). A portrait phone
   (560 and under) keeps its corner: not a design target, 2026-09-29. One
   rule: the gap, the sizes and the corner out of a party are untouched. */
@media (min-width: 561px) and (max-width: 1023px) {
  body.nav-albion.hud-v2.wpp-in-party .an-tl {
    flex-direction: row;
    align-items: flex-start;
  }
}

/* ── the member plates, stacked under yours (P3-1 A) ──────────────────── */
body.hud-v2 .wpp-stack {
  position: fixed;
  z-index: 39;
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--hv-k, 1) * 1px);
  pointer-events: none;
  font-family: var(--hv-f-px, monospace);
  color: #efe3c8;
}
body.hud-v2 .wpp-stack[hidden] { display: none; }
body.hud-v2 .wpp-mem {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(3 * var(--hv-k, 1) * 1px) calc(4 * var(--hv-k, 1) * 1px);
  align-items: center;
  box-sizing: border-box;
  width: calc(118 * var(--hv-k, 1) * 1px);
  border-style: solid;
  border-width: calc(5 * var(--hv-k, 1) * 1px);
  border-image: url('/assets/ui/kitb/tip.png?v=2026-09-24a') 5 fill / calc(5 * var(--hv-k, 1) * 1px) stretch;
  image-rendering: pixelated;
}
body.hud-v2 .wpp-mem.is-away { filter: saturate(.35) brightness(.75); }
body.hud-v2 .wpp-pic {
  grid-row: 1 / 4;
  position: relative;
  overflow: hidden;
  width: calc(24 * var(--hv-k, 1) * 1px);
  height: calc(24 * var(--hv-k, 1) * 1px);
  box-sizing: border-box;
  border-style: solid;
  border-width: calc(3 * var(--hv-k, 1) * 1px);
  border-image: url('/assets/ui/kitb/slot1.png?v=2026-09-24a') 5 fill / calc(3 * var(--hv-k, 1) * 1px) stretch;
  image-rendering: pixelated;
  background: #1b243f;
}
body.hud-v2 .wpp-pic canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
body.hud-v2 .wpp-name {
  display: flex;
  gap: 4px;
  align-items: center;
  font-size: 8px;
  line-height: 1;
  letter-spacing: .5px;
  white-space: nowrap;
  overflow: hidden;
}
/* a handle longer than the plate ends in an ellipsis, so a cut name never
   reads as a whole one (#2642: "sootwhis" on a landscape phone, where the
   name's column is 80 px); the plate keeps its size */
body.hud-v2 .wpp-handle {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.hud-v2 .wpp-lead {
  display: none;
  flex: none;
  width: 8px;
  height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cpath fill='%23f0c75e' d='M0 0h6v4H5v1H4v1H2V5H1V4H0zM2 1v2h2V1z'/%3E%3C/svg%3E") 0 0 / 100% 100%;
  image-rendering: pixelated;
}
body.hud-v2 .wpp-mem.is-lead .wpp-lead { display: block; }
body.hud-v2 .wpp-bar {
  position: relative;
  height: calc(4 * var(--hv-k, 1) * 1px);
  background: #1a0f10;
  box-shadow: inset 0 0 0 1px #07090d;
}
body.hud-v2 .wpp-bar[hidden] { display: none; }
body.hud-v2 .wpp-bar i { position: absolute; left: 1px; top: 1px; bottom: 1px; background: linear-gradient(#e2594f 0 50%, #b23a33 50%); }
body.hud-v2 .wpp-mem.is-low .wpp-bar i { background: linear-gradient(#f39a4a 0 50%, #c8662a 50%); }
body.hud-v2 .wpp-state { grid-column: 2; font-size: 7px; line-height: 1; color: #b4bfcc; }
body.hud-v2 .wpp-mem.is-down .wpp-state { color: #e2594f; }

/* ── the crest on your plate, and the party card it opens (P3-3 A) ────── */
body.hud-v2 .wpp-crest {
  position: fixed;
  z-index: 41;
  width: calc(12 * var(--hv-k, 1) * 1px);
  height: calc(12 * var(--hv-k, 1) * 1px);
  min-width: 22px;
  min-height: 22px;
  padding: 0;
  box-sizing: border-box;
  cursor: pointer;
  border-style: solid;
  border-width: calc(3 * var(--hv-k, 1) * 1px);
  border-image: url('/assets/ui/kitb/slot1.png?v=2026-09-24a') 5 fill / calc(3 * var(--hv-k, 1) * 1px) stretch;
  image-rendering: pixelated;
  background: transparent;
}
body.hud-v2 .wpp-crest::before {
  content: '';
  position: absolute;
  inset: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cpath fill='%23f0c75e' d='M0 0h6v4H5v1H4v1H2V5H1V4H0zM2 1v2h2V1z'/%3E%3C/svg%3E") 0 0 / 100% 100%;
  image-rendering: pixelated;
}
/* a thumb's press box round the crest on a phone (44 px) */
body.hud-v2 .wpp-crest::after { content: ''; position: absolute; inset: -11px; }
body.hud-v2 .wpp-crest[hidden] { display: none; }

body.hud-v2 .wpp-menu,
body.hud-v2 .wpp-card {
  position: fixed;
  z-index: 42;
  display: grid;
  gap: calc(5 * var(--hv-k, 1) * 1px);
  box-sizing: border-box;
  width: calc(150 * var(--hv-k, 1) * 1px);
  max-width: calc(100vw - 32px);
  padding: calc(4 * var(--hv-k, 1) * 1px) calc(6 * var(--hv-k, 1) * 1px);
  border-style: solid;
  border-width: calc(6 * var(--hv-k, 1) * 1px);
  border-image: url('/assets/ui/kitb/slate-window.png?v=2026-09-24a') 18 fill / calc(9 * var(--hv-k, 1) * 1px) stretch;
  image-rendering: pixelated;
  font-family: var(--hv-f-px, monospace);
  font-size: 8px;
  line-height: 1.3;
  color: #efe3c8;
}
body.hud-v2 .wpp-menu[hidden],
body.hud-v2 .wpp-card[hidden] { display: none; }
body.hud-v2 .wpp-menu b { color: #e3c79a; font-weight: 400; }
body.hud-v2 .wpp-menu-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
body.hud-v2 .wpp-menu-row .is-lead { color: #f0c75e; }
body.hud-v2 .wpp-btns { display: flex; flex-wrap: wrap; gap: calc(4 * var(--hv-k, 1) * 1px); }
/* the kit's button (btn.png 3 3 5 3, btngold.png for the one ask), drawn here
   under its own name: the world's scripts never carry the `hv-*` primitives
   (venueUi2.test.js, INERT IN THE WORLD). A 44 px press box on a phone. */
body.hud-v2 .wpp-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  min-height: calc(18 * var(--hv-k, 1) * 1px);
  border-style: solid;
  border-width: 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);
  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;
  image-rendering: pixelated;
  background: none;
  padding: 0 calc(5 * var(--hv-k, 1) * 1px);
  font: 400 8px/1 var(--hv-f-px, monospace);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #efe3c8;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
  white-space: nowrap;
  cursor: pointer;
}
body.hud-v2 .wpp-btn::after { content: ''; position: absolute; inset: -6px; }
body.hud-v2 .wpp-btn.is-gold {
  border-image-source: url('/assets/ui/kitb/btngold.png?v=2026-09-24a');
  color: #2a1c0c;
  text-shadow: none;
}
body.hud-v2 .wpp-btn:hover,
body.hud-v2 .wpp-btn:focus-visible { filter: brightness(1.18); }

/* ── the invite card, near the top, centred (P3-4 A) ─────────────────── */
body.hud-v2 .wpp-card { transform: translateX(-50%); }
body.hud-v2 .wpp-clock { height: 3px; background: #1c2330; }
body.hud-v2 .wpp-clock i { display: block; height: 100%; width: 100%; background: #e3c79a; }
} /* end of @layer corners */