/* ═══════════════════════════════════════════════════════════════════════
   world-target-plate.css — THE TARGET AS A SECOND PLATE (GH #3069, S2).

   Wray ruled the target "a second hero plate" on 2026-09-24 and shelved the
   turntable pane. world-target-plate.js mounts the same plate component a
   second time into the Albion corner, after yours, marked
   data-role="target", and paints it from WorldHud 'target'.

   EVERY RULE STARTS AT `body.nav-albion.hud-v2`, which only world-hud-v2.js
   can make true (FEATURE_WORLD_HUD_V2, or ?hud=1), so with the flag off this
   sheet matches nothing. It is `corners`, the plate's own layer, and loads
   after world-plate.css, so its `[data-role='target']` rules refine the v2
   hero rules in that file rather than racing them: the target is your plate
   (the same frame, name plate, bars and fonts at the same chrome pixel)
   with a smaller portrait, a narrower name plate, an X, and the actions.

   ── SIZES ──────────────────────────────────────────────────────────────
   The portrait well is HALF yours, so it is still a whole multiple of the
   bust: 28 at k 1 (a phone, a small window under 1280x700), 56 at k 2 and 3
   (the plate draws at k 2 from 1280x700 and at 2560, world-plate.css), 112
   at k 4. The mock's 68
   would be a fractional scale. world-target-plate.js composes the bust at 56,
   so it draws 1:1 at 1920. The name plate is 144 art pixels (the mock's
   290px at k 2), 118 on a phone (your plate's phone width).

   The level shield and the ruby are drawn at ONE art pixel per pixel below
   k 4 (--tp-s), not at the plate's k: at k 2 a 48x58 shield on an 84px
   frame covered most of its left side. At k 1 (a phone, a laptop) the frame
   is 42 wide and the shield (24) and the ruby (18) cannot both hang under
   it, so the ruby, which is decoration, goes and the level, which is data,
   stays.

   ── WHERE IT SITS ──────────────────────────────────────────────────────
   Beside yours from 1024px wide (the mock's desktop: yours at 24, the
   target at 512), under yours below that and on a phone (the mock's phone:
   yours at 12,58, the target at 12,140). Measured against the door row: at
   1024x768 the two plates end at x 447 and the row starts at 568; at 768
   the row starts at 312, which is why narrower screens stack.
   ═══════════════════════════════════════════════════════════════════════ */
@layer base, module, skin, nerm, corners;

@layer corners {

/* ── the corner: two plates in a row on a desktop ─────────────────────── */
@media (min-width: 1024px) {
  body.nav-albion.hud-v2 .an-tl {
    flex-direction: row;
    align-items: flex-start;
    gap: calc(11 * var(--hv-k) * 1px);
  }
}

/* ── the plate ─────────────────────────────────────────────────────────── */
body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'] {
  --pv-bust: 28px;
  --pv-body: 144;
  --tp-s: 1;              /* the shield's and the ruby's art pixel */
  --tp-paw: 2;            /* the paw glyph's art pixel (12x11 glyph) */
  --tp-glyph: 12px;       /* an action's 6x6 glyph, at 2 */
}

/* from 1280x700 the plates draw at k 2 (world-plate.css, #3069 S10), so the
   target's well is 56 there too, and the gap between the two plates is the
   mock's 22 rather than the page's k 1 */
@media (min-width: 1280px) and (min-height: 700px) {
  body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'] { --pv-bust: 56px; --tp-paw: 3; }
  body.nav-albion.hud-v2 .an-tl { gap: 22px; }
}
/* ...and at 1280 to 1299 wide that target ended at x 882 against the door
   row's 884 (S10 review), so it gives up 8 art pixels of body there: 16px,
   an 18px gap. From 1300 the row has moved right with the frame. */
@media (min-width: 1280px) and (max-width: 1299px) and (min-height: 700px) {
  body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'] { --pv-body: 136; }
}

@media (min-width: 3360px) and (min-height: 1890px) {
  body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'] { --pv-bust: 112px; --tp-s: 2; --tp-paw: 6; --tp-glyph: 24px; }
}

/* the plate's own display is flex (world-plate.css), which beats [hidden] */
body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'][hidden] { display: none; }

/* ⭐THE NAME, AND UNDER IT THE HOUSE OR THE TIER (#3069 S2 review). Your
   plate lets the house give way when it does not fit beside the name
   (world-plate.css, "the house gives way first"): on yours the house is
   already the frame's lit ground and the ruby. On the target it is the only
   place another cat's house or a creature's tier is written, and this name
   plate is narrower than yours, so beside the name it was clipped for every
   guest handle at 1920 and for "Fox spirit" + "Common" on every screen under
   1440x810. So it has a line of its own, always: the name keeps the band's
   width (clear of the X), the house the line under it, and neither cuts the
   other. The mock sets the two on one line; its names are short. */
body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'] .an-band {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: calc(2 * var(--hv-k) * 1px);
  max-height: none;
}

/* the name a size down from yours (the mock's 26 beside your 30 at k 2),
   stopped 2px short of the X, which hangs over the name line's right end
   and reaches 2k + 12 into the text column (.ws-close below) */
body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'] .ws-name {
  margin-right: calc((2 * var(--hv-k) + 14) * 1px);
}

body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'] .ws-name::after {
  font-size: calc((10 * var(--hv-k) + 6) * 1px);
}

/* on its own line the house needs no lift: the hero's rule raises it four
   art pixels onto the name's letters, which are no longer beside it */
body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'] .ws-house { top: 0; }

/* ...and it starts where the name does (#3069 S10, audit C22 / HD-11 /
   PH-15). The old centred rule the name plate inherits put "Dawnbringer"
   some 70px right of a left-aligned name, on every screen. */
body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'] .ws-house {
  align-self: flex-start;
  text-align: left;
}

/* an NPC with no house and no level: its line, in the dim ink, where a
   house would be (world-target-plate.js `quip`). Mixed case as written,
   in VT323, one line cut short rather than a plate that grows. */
body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'][data-quip] .ws-house {
  align-self: stretch;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--hv-f-vt);
  font-size: calc((6 * var(--hv-k) + 8) * 1px);
  line-height: 1;
  color: var(--hv-dim);
}
body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'][data-quip] .ws-house::first-letter { text-transform: none; }

/* ── the shield and the ruby at --tp-s ─────────────────────────────────── */
body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'] .ws-level {
  left: calc(-1 * var(--tp-s) * 1px);
  bottom: calc(-7 * var(--tp-s) * 1px);
  width: calc(24 * var(--tp-s) * 1px);
  height: calc(29 * var(--tp-s) * 1px);
  padding-bottom: calc(5 * var(--tp-s) * 1px);
}

body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'] .ws-level::after {
  font-size: calc((4 * var(--tp-s) + 4) * 1px);
}

/* ⭐AT k 1 THE SHIELD HANGS OFF THE FRAME'S CORNER (#3069 S10, audit
   PH-15). On a 42px frame (a 28 well) the 24x29 shield, drawn over the
   bottom-left of the frame, covered half the paw or the creature. Here its
   middle sits on the frame's bottom-left corner, so it covers the rim and a
   sliver of the well. The actions start at the text column now (below), so
   nothing else is under it. */
@media (max-width: 1279px), (max-height: 699px) {
  body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'] .ws-level {
    left: -12px;
    bottom: -15px;
  }
}

/* the ruby hangs 6 of its own pixels under the frame, as yours does. At
   k 1 the frame is 42 wide and the shield (24) and the ruby (18) cannot both
   hang under it (measured at 1366x768: the shield sat on the ruby), so the
   ruby, which is decoration, shows only from k 2; the level is data. */
body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'] .ws-nest::after {
  display: none;
  top: calc(var(--pv-bust) + (14 * var(--hv-k) - 14 * var(--tp-s)) * 1px);
  width: calc(18 * var(--tp-s) * 1px);
  height: calc(20 * var(--tp-s) * 1px);
}

@media (min-width: 1280px) and (min-height: 700px) {
  body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'] .ws-nest::after { display: block; }
}

/* ── the picture that is not a portrait ───────────────────────────────── */
body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'] .ws-bust[hidden] { display: none; }

/* a creature's icon: painted art, not pixel art, so smoothed, and whole */
body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'] .ws-pic {
  display: block;
  position: absolute;
  left: calc(7 * var(--hv-k) * 1px);
  top: calc(7 * var(--hv-k) * 1px);
  width: var(--pv-bust);
  height: var(--pv-bust);
  object-fit: contain;
  background: radial-gradient(circle at 50% 70%, #6e2a2a 0%, #2a1214 45%, #120d12 80%);
  image-rendering: auto;
}

body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'] .ws-pic[hidden] { display: none; }

/* THE PAW (ruled default 3: "an NPC with no player card a paw glyph in its
   frame"). A 12x11 pixel glyph on the house's lit ground, drawn from rects
   so every art pixel lands on a whole pixel at --tp-paw. It stands for "a
   cat, and no portrait of it here", which is true of an NPC and of a player
   whose kit did not arrive. */
body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'] .ws-nest[data-pic='paw']::before {
  content: '';
  position: absolute;
  left: calc(7 * var(--hv-k) * 1px);
  top: calc(7 * var(--hv-k) * 1px);
  width: var(--pv-bust);
  height: var(--pv-bust);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 11' shape-rendering='crispEdges'%3E%3Cpath fill='%23e7c77f' d='M3 0h2v3H3zM7 0h2v3H7zM0 3h2v3H0zM10 3h2v3h-2zM4 5h4v1H4zM3 6h6v1H3zM2 7h8v2H2zM3 9h6v1H3zM4 10h4v1H4z'/%3E%3C/svg%3E")
      center / calc(12 * var(--tp-paw) * 1px) calc(11 * var(--tp-paw) * 1px) no-repeat,
    radial-gradient(circle at 50% 70%,
      color-mix(in srgb, var(--house, #9d8a6d) 70%, transparent) 0%,
      color-mix(in srgb, var(--house, #9d8a6d) 45%, #1a0f10) 38%,
      #120d12 78%);
  image-rendering: pixelated;
  pointer-events: none;
}

/* ── a thing: its name, and nothing else ───────────────────────────────── */
body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'][data-kind='prop'] {
  width: calc(var(--pv-body) * var(--hv-k) * 1px);
}

body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'][data-kind='prop'] .an-idcol { display: none; }

body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'][data-kind='prop'] .ws-platetext { margin-left: 0; }

/* ── a creature: the foe's words ──────────────────────────────────────────
   The mock Wray picked (#world.b.fox.full.square: art B, square frames,
   slate) draws a creature in the SAME gold frame as yours, with the ruby
   under it; its `.fr.foe` red rim is overridden in that art set by
   `.artB .plate .pf.fr { box-shadow: none }` and the square frame's
   border-image (#3069 S2 review). So the frame stays gold, and what reads
   hostile is what the mock colours: the name and the word under it, in its
   #ff9a8a, beside the red health bar and the red ring on the ground. */
body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'].is-hostile .ws-name::after,
body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'].is-hostile .ws-house { color: #ff9a8a; }

/* ── the X ─────────────────────────────────────────────────────────────── */
body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'] .ws-close {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 2;
  top: calc((7 * var(--hv-k) - 3) * 1px);
  right: calc(4 * var(--hv-k) * 1px);
  box-sizing: border-box;
  width: calc((6 * var(--hv-k) + 12) * 1px);
  height: calc((6 * var(--hv-k) + 12) * 1px);
  margin: 0;
  padding: 0;
  border: calc(var(--hv-k) * 1px) solid var(--hv-gold);
  border-radius: 0;
  background: var(--hv-well);
  box-shadow: 0 0 0 calc(var(--hv-k) * 1px) var(--hv-black);
  font-family: var(--hv-f-px);
  font-size: calc((2 * var(--hv-k) + 5) * 1px);
  line-height: 1;
  color: var(--hv-dim);
  cursor: pointer;
}

body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'] .ws-close:hover,
body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'] .ws-close:focus-visible {
  color: var(--hv-ink);
  border-color: var(--hv-gold-2);
  outline: none;
}

body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'] .ws-close[hidden] { display: none; }

/* ── the actions: Profile, Add friend ─────────────────────────────────────
   The plate's own last line, as your buff row is. Only the buttons take a
   press, so the rest of the line is the world.

   ⭐SQUARE ICON BUTTONS, AS THE MOCK DRAWS THEM (#3069 S10, audit HD-11).
   They were two text planks ("Add friend", "Profile"), which at k 1 did
   not fit under the text column and had to start under the frame. Each is
   now kit B's slot (slot1.png, rim 5 at the chrome pixel) around a 6x6
   glyph at 2: 22px at k 1, 32 at k 2, whole pixels each side. The name is
   the button's aria-label and title (world-plate.js), and its text is kept
   for anything that reads it, drawn at size 0. Only live actions are ever
   drawn: world-target.js's table leaves Message and Trade out, so there is
   no button for them to be. The row starts where the name plate's text
   does, clear of the shield and the ruby, at every size. */
body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'] .ws-acts {
  order: 9;
  flex: 0 0 100%;
  display: flex;
  flex-wrap: nowrap;
  box-sizing: border-box;
  gap: calc(4 * var(--hv-k) * 1px);
  margin-top: calc(4 * var(--hv-k) * 1px);
  padding-left: calc(var(--pv-bust) + 9 * var(--hv-k) * 1px);
  min-width: 0;
  pointer-events: none;
}

body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'] .ws-acts[hidden] { display: none; }

body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'] .ws-act {
  pointer-events: auto;
  flex: none;
  position: relative;
  box-sizing: border-box;
  width: calc(10 * var(--hv-k) * 1px + var(--tp-glyph));
  height: calc(10 * var(--hv-k) * 1px + var(--tp-glyph));
  min-height: 0;
  margin: 0;
  padding: 0;
  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;
  background: none;
  font-size: 0;
  line-height: 0;
  color: transparent;
  text-shadow: none;
  image-rendering: pixelated;
  cursor: pointer;
}

/* the glyph, centred on whole pixels: (box - glyph) / 2 is 5k each side */
body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'] .ws-act::before {
  content: '';
  position: absolute;
  left: calc(5 * var(--hv-k) * 1px);
  top: calc(5 * var(--hv-k) * 1px);
  width: var(--tp-glyph);
  height: var(--tp-glyph);
  background: 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
}
/* Add friend: a plus */
body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'] .ws-act[data-act='add']::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='M2 0h2v6H2zM0 2h6v2H0z'/%3E%3C/svg%3E");
}
/* Profile: a head and shoulders */
body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'] .ws-act[data-act='profile']::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='M2 0h2v1H2zM1 1h4v1H1zM2 2h2v1H2zM1 4h4v1H1zM0 5h6v1H0z'/%3E%3C/svg%3E");
}

body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'] .ws-act:hover,
body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'] .ws-act:focus-visible {
  filter: brightness(1.2);
  outline: none;
}
body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'] .ws-act:focus-visible {
  box-shadow: 0 0 0 calc(var(--hv-k) * 1px) var(--hv-gold-hi);
}

/* ⭐A THUMB'S REACH (#3069 S10, audit PH-8 / C8): the X is 18 and each act
   22 at k 1, under the 44 a touch needs. A transparent box round each takes
   the press, as the door row's tiles do; the art is unchanged. (::after:
   an act's ::before is its glyph.) */
@media (pointer: coarse) {
  /* the acts stand a thumb apart, so one's box never covers the other */
  body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'] .ws-acts {
    position: relative;
    z-index: 2;
    gap: max(calc(4 * var(--hv-k) * 1px), calc(44px - 10 * var(--hv-k) * 1px - var(--tp-glyph)));
  }
  body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'] .ws-act::after,
  body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'] .ws-close::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
}

/* ── the phone (390x844): under your plate, compact ────────────────────── */
@media (max-width: 560px) {
  body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'] { --pv-body: 118; }
  /* round two's phone rule hides the house word on every plate in the
     corner (world-plate.css: beside the name it left the name no room). On
     the target it has its own line, so it shows: an NPC's or a prop's empty
     one stays gone. */
  body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'] .ws-house:not(:empty) { display: block; }
}
/* ...and on a narrow phone it stops short of the minimap's ribbon, which
   hangs left of the 132px map and, since your buff row's height is kept
   (world-plate.css, #3069 S10), sits level with this plate's name line: at
   360 wide a 118 plate ran 9px under the ribbon's left tail */
@media (max-width: 376px) {
  body.nav-albion.hud-v2 .an-tl .ws-plate[data-role='target'] { --pv-body: 104; }
}

/* ── the profile card, beside the target plate ─────────────────────────────
   It was stacked on the shelved pane (world-skin.css: fixed, right 0, 260
   above the foot). world-target.js placeCard() measures the target plate and
   hands the card its corner as two properties: beside the plate when there
   is room, under it when there is not. The width is its own: the skin's
   `var(--fx, 320px)` is the letterbox gutter, which is 0 under full bleed. */
body.nav-albion.hud-v2 .wt-card.wt-card-v2 {
  right: auto;
  bottom: auto;
  left: var(--wt-card-x, 12px);
  top: var(--wt-card-y, 12px);
  width: min(280px, calc(100vw - 24px));
  max-height: min(44vh, calc(100vh - var(--wt-card-y, 12px) - 12px));
}

}
/* end of @layer corners */