/* ═══════════════════════════════════════════════════════════════════════
   world-legacy-door.css — THE FLOATING PLAY ARENA PLANK'S CSS, in one file
   (GH #2967 step 4; the component convention of #2920 step 3b).

   The component is public/js/world-legacy-door.js, markup in
   prototype/the-hall-3d/web/tpl-legacy-door.html. It sits in the one corner
   the Albion layout leaves free: the doors are top-right, the plate
   top-left, the map corner bottom-right. Bottom-LEFT, lifted above the
   six-button bar's reach, so it never sits on a button. Temporary by
   design (G11): the flag, the plank and the page go at the wipe.
   ═══════════════════════════════════════════════════════════════════════ */
@layer base, module, skin, nerm, corners;

@layer corners {
/* ABOVE THE BAR, IN BOTH SENSES. The six-button bar (#w0worldbar, z 42) is
   fixed bottom-centre and on a phone wraps to two rows plus the HP row,
   spanning x 8..382 and ~180px up: a plank at z 6 and bottom 118 sat inside
   that rectangle, painted under it and untappable (the reached-in-reality
   pass, 2026-09-23). world-wave0.js publishes the bar's measured height as
   --w0bar-h on the root; the plank stands 12px above it and one layer over.
   Nerm's beat panel (z 60) still covers it while a beat shows; transient. */
.wld-door {
  position: fixed;
  left: 12px;
  bottom: calc(var(--w0bar-h, 96px) + 12px);
  z-index: 44;
  pointer-events: auto;
}
.wld-plank {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 9px;
  font: 400 8px/1 var(--pk, 'Press Start 2P', monospace);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.wld-tag {
  font: 400 6px/1 var(--pk, 'Press Start 2P', monospace);
  letter-spacing: 0.1em;
  padding: 3px 5px 4px;
  border: 1px solid currentColor;
  opacity: 0.75;
}
/* ⭐A HELD TARGET TAKES THE PLANK'S PLACE ON A SHORT SCREEN (#3069 S10,
   audit PH-5). On a phone held sideways the corner's column (your plate, the
   buff row, the target plate and its Add friend and Profile) reaches the
   plank's height, and the plank (z 44) covered the target's buttons.
   world-target-plate.js puts `has-target` on <body> while something is held,
   under the HUD pass only; the plank stands down until you let go. */
@media (max-height: 540px) {
  body.hud-v2.has-target .wld-door { display: none; }
}
/* full-bleed phones: the bar is wider and lower, keep clear of it */
@media (max-width: 480px) {
  .wld-door { left: 8px; }
  .wld-plank { padding: 7px 9px 8px; font-size: 7px; }
}

/* ⭐KIT B UNDER THE HUD PASS (#3069 S10, audit HD-13). The plank was the one
   v1 piece left in the bottom-left corner: the old leather `.wr-plank` with
   a 1px outlined LEGACY tag, above the kit B chat and beside the kit B BUILD
   and CARDS. Under `body.hud-v2` it is kit B's slate button (btn.png, rim
   3 3 5 3, at the chrome pixel, as the Map's Rooms button is), in the gold
   pixel ink, and LEGACY is a small parchment chip. The markup is the same;
   the flag-off plank above is untouched. */
body.hud-v2 .wld-plank {
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  gap: calc(5 * var(--hv-k) * 1px);
  padding: calc(5 * var(--hv-k) * 1px) calc(8 * var(--hv-k) * 1px) calc(7 * var(--hv-k) * 1px);
  border-style: solid;
  border-width: 0;
  border-radius: 0;
  border-image: url('/assets/ui/kitb/btn.png?v=2026-09-24a') 3 3 5 3 fill /
    calc(3 * var(--hv-k) * 1px) calc(3 * var(--hv-k) * 1px) calc(5 * var(--hv-k) * 1px) calc(3 * var(--hv-k) * 1px) stretch;
  background: none;
  box-shadow: none;
  font: 400 calc((2 * var(--hv-k) + 6) * 1px)/1 var(--hv-f-px);
  letter-spacing: 0.04em;
  color: var(--hv-ink);
  text-shadow: 0 calc(var(--hv-k) * 1px) 0 #000;
  image-rendering: pixelated;
}
/* ...at the plates' own scale from a 1280x700 laptop (world-plate.css): the
   page's --hv-k is 1 until 1440x810, and there the plank drew at 148x25
   with 8px letters beside a full-size bar and k 2 plates (S10 review) */
@media (min-width: 1280px) and (min-height: 700px) {
  body.hud-v2 .wld-plank { --hv-k: 2; }
}
body.hud-v2 .wld-plank:hover,
body.hud-v2 .wld-plank:focus-visible { filter: brightness(1.18); }
body.hud-v2 .wld-plank:focus-visible { outline: 2px solid var(--hv-gold-hi); outline-offset: 2px; }
body.hud-v2 .wld-tag {
  padding: calc(2 * var(--hv-k) * 1px) calc(3 * var(--hv-k) * 1px);
  border: 0;
  font: 400 calc((1 * var(--hv-k) + 5) * 1px)/1 var(--hv-f-px);
  letter-spacing: 0.06em;
  color: #3a2a14;
  text-shadow: none;
  background: #e2cfa4;
  box-shadow: 0 0 0 calc(var(--hv-k) * 1px) var(--hv-black), inset 0 calc(-1 * var(--hv-k) * 1px) 0 #b89c6a;
  opacity: 1;
}

/* ⭐A THUMB'S REACH ON A TOUCH SCREEN (the HUD pass's final audit). On a
   phone the plank draws 148x22 (the chrome pixel is 1 there), and a press
   3px above its art landed on the corner's own box and did nothing. A
   transparent box takes the press, 44 tall, and the art is unchanged; a
   mouse keeps the plank's own box.

   ⛔IT REACHES UP, NOT BOTH WAYS. Under the plank are the chat's tabs, and
   their own reach already runs UP to 44 from the tabs' foot
   (world-chat-v2.css, #3069 S11): at 390x844 it starts 3px under the plank,
   and at 768x1024 it already runs under the plank's foot. A reach centred
   on the plank ended 11px down, and the plank, one layer over the chat,
   took 8px of the tabs' reach there. Upward is the world, and the guide's
   bubble when it talks, which stands over everything (z 3000) and keeps
   its own box. The same shape as the chat tabs', mirrored.

   ⛔NOT WHERE IT WOULD REACH YOUR PLATE. Under 708 wide the bar is
   centred and the plank stands 260px above the screen's foot, so its
   reach starts 282 above it. The plate over it opens your Inventory, and
   its buff icons are refused by every reader of a press (world-plate.js);
   the plank is one layer over both, so wherever the reach met them a press
   meant for your plate or a buff left the world for the legacy arena. What
   the reach must clear is the plate's LOWEST pressable pixel in the
   plank's columns, which is a buff's foot whenever one is showing (the
   buff row is reserved on a phone and on any screen 540 tall or less,
   world-plate.css), measured on the served page with five buffs up:
     - 561 to 707 wide: the plate's text ends at y101, a buff at y125, so
       the reach needs 408 tall (1px short at 640x407; 24px at 640x384);
     - 560 wide and under, where the plate is the phone's (world-plate.css
       max-width 560): the text ends at y138 and a buff at y161 (y157 at
       364 wide), so it needs 444 (1px short at 400x443; the review of
       #3264 found 19px of the plate itself at 400x384 and 10px at 457x411);
     - 708 wide and over the bar is not centred, the plank stands 140 up
       and reaches from 162: 310 tall clears the buffs' y125 (900x320 has
       11px to spare).
   Under those the plank keeps its own box. A held target's plate hangs
   under yours only above 540 tall (the has-target rule near the top of
   this file stands the plank down on a shorter screen), and it ends at
   y230, under
   the reach's 259 at 541. (At 640x360 and 568x320 the plank's own art
   already sits on the plate; that is the corner's crowding, not this
   reach.)

   ⛔NOT WHERE THE TOP-RIGHT COLUMN HANGS INTO IT. On a phone upright the
   reach starts 282px above the screen's foot (the plank stands 260 up and
   reaches 22 higher) and ends at x158.4. The column (the minimap, and the
   quest tracker under it) is z 38, under the plank's z 44, so wherever
   the two meet a press meant for the Map or a quest left the world for the
   legacy arena. The column has two shapes, measured at 320 to 390 wide:
     - the painted map (world-map-v2.js owns the corner): the tracker is
       the lowest, its left edge at the width less 188 and its foot at
       y256 to 284;
     - the parchment map, which is what the corner shows before the painted
       one takes over and in any room without one (owns() in
       world-map-v2.js): the room strip under it hangs left to the width
       less 204, down to y247 to 255, and the tracker drops below it to
       y305 to 333.
   So under 364 wide the strip reaches into it (at 362 by one pixel
   column), and under 346 the tracker does too. Measured with the reach on:
   238 samples of the tracker's head at 320x480 (painted), 153 at 320x568
   and 176 of the strip at 346x520 (parchment). Between 346 and 363 only
   the strip can meet it, and from 540 tall the reach starts under the
   strip's foot, so 360x640 keeps it. Under 346 the parchment tracker's foot would need the
   screen 640 tall or more, and a tracker is as tall as its quest's words,
   so the reach is simply off there and the plank keeps its own box. */
@media (pointer: coarse) and (min-width: 708px) and (min-height: 310px), (pointer: coarse) and (min-width: 561px) and (min-height: 408px), (pointer: coarse) and (min-width: 364px) and (min-height: 444px), (pointer: coarse) and (min-width: 346px) and (min-height: 540px) {
  body.hud-v2 .wld-plank { position: relative; }
  body.hud-v2 .wld-plank::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translateX(-50%);
  }
}
}
/* end of @layer corners */