/* ═══════════════════════════════════════════════════════════════════════
   world-pit.css — THE PIT OVER THE WORLD (#3282 / #3053, PIT-A).

   The component is public/js/world-pit.js: a full-picture layer holding the
   venue in a frame, over a world that stays loaded underneath (L23: the cat
   stays where it stands). Every rule here matches nothing until that module
   puts `#world-pit` in the page and `pit-open` on <body>, which it does only
   behind FEATURE_WORLD_PIT.

   Two layers, and the split is the point:
     module  — the layer, its loading plate, the close and BACK TO THE WORLD.
     corners — the LIFTS: the door row and the chat stand over the layer
               (PIT 1A: the world's doors, chat and close stay on top). They
               have to be `corners`, the last layer, or they lose to the
               row's and the chat's own corner rules.

   What is NOT lifted is covered by the layer's z, not hidden: the plates,
   the minimap, the action bar, the tracker, the legacy plank and Nerm's
   panel all stay exactly where they are, so nothing re-lays out when the
   Pit closes.

   z: the layer is 50, over every corner (38 to 44) and under every sheet
   (60), so a door opened from the Pit's own row shows over it. The row's
   corner and the chat go to 52.
   ═══════════════════════════════════════════════════════════════════════ */
@layer base, module, skin, nerm, corners;

@layer module {
#world-pit {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #0b0f15;
  /* the frame stops at the chat's top when the chat would land on the
     venue: a phone, a short screen, a thumb, or a desktop where the chat
     meets the venue's board, build strip or a sheet (world-pit.js) */
  --pit-inset: 0px;
  /* ⛔THE PIT'S OWN PIXEL SCALE, NEVER UNDER 2 (review of PR #3333). The
     HUD's --hv-k is 1 on every screen under 1440x810, every phone
     included, and at 1 the plate's type drew at 6px and BACK's arrow at
     7px in a 44px ring. The door row draws its icons at max(2, k) for the
     same reason (world-doors-v2.css --an-ico); the Pit follows it. */
  --wp-k: max(2, var(--hv-k, 2));
}
#world-pit .wp-frame {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% - var(--pit-inset));
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
  background: #0b0f15;
  /* shown once it has loaded and been dressed, so the venue's own page
     never flashes its standalone chrome under the world's */
  visibility: hidden;
}
#world-pit.wp-ready .wp-frame { visibility: visible; }

/* ── the plate, while the frame loads (kit B's slate window) ───────── */
#world-pit .wp-plate {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  min-width: min(320px, calc(100vw - 32px));
  display: grid;
  gap: 10px;
  justify-items: center;
  padding: 6px 14px;
  border-style: solid;
  border-width: calc(18 * var(--wp-k) * 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(--wp-k) * 1px);
  border-image-repeat: stretch;
  background: none;
  image-rendering: pixelated;
  text-align: center;
}
#world-pit.wp-ready .wp-plate { display: none; }
#world-pit .wp-plate-h {
  font: 400 calc(6px * var(--wp-k)) / 1.4 var(--hv-f-px, 'Press Start 2P', monospace);
  letter-spacing: 0.06em;
  color: var(--hv-gold-hi, #e3c79a);
}
#world-pit .wp-plate-s {
  font: 400 calc(10px * var(--wp-k)) / 1.1 var(--hv-f-vt, 'VT323', monospace);
  color: var(--hv-ink-slate, #d9cdb2);
}

/* ── the close: a desktop, at the right end of the door row ────────── */
/* The row moves one tile left to make room (the corners block below), so
   the close sits where the row's last tile was, on the same line and at
   the same size: the mock's A. The art fills the tile (contain), as the
   mock draws it (44x47 beside 48px doors): at a whole-pixel scale of the
   HUD's k it drew 25x27 in a 40px slot under 1440, visibly smaller than
   the doors beside it. */
#world-pit .wp-close {
  position: fixed;
  z-index: 3;
  top: calc(var(--fy, 0px) + var(--an-edge, 12px));
  right: calc(var(--fx, 0px) + var(--an-edge, 12px) + var(--an-rightcol, 0px));
  box-sizing: border-box;
  width: var(--an-tile, 48px);
  height: var(--an-tile, 48px);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: url('/assets/ui/kitb/close.png?v=2026-09-24a') center / contain no-repeat;
  image-rendering: pixelated;
  cursor: pointer;
}
#world-pit .wp-close:hover { filter: brightness(1.15); }
#world-pit .wp-close:focus-visible,
#world-pit .wp-back:focus-visible {
  outline: 2px solid var(--hv-gold-hi, #e3c79a);
  outline-offset: 2px;
}

/* ── BACK TO THE WORLD: a phone, where the row folds away ──────────── */
/* kit B's round button with a back arrow, top right, where the venue's own
   Leave chip stood (the embed hides it), as the mock's A draws it. The top
   LEFT is the venue's Results chip on a phone. 46px at --wp-k 2, never
   under the 44px thumb floor, and the arrow at three times its 7 art
   pixels (the mock draws it at 18 in 44). */
#world-pit .wp-back {
  display: none;
  position: fixed;
  z-index: 3;
  top: calc(var(--fy, 0px) + 4px);
  right: 8px;
  box-sizing: border-box;
  width: max(44px, calc(23 * var(--wp-k) * 1px));
  height: max(44px, calc(23 * var(--wp-k) * 1px));
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23e3c79a' d='M2 1h1v1h-1zM1 2h2v1h-2zM0 3h7v1h-7zM1 4h2v1h-2zM2 5h1v1h-1z'/%3E%3C/svg%3E") center / calc(7 * (var(--wp-k) + 1) * 1px) calc(7 * (var(--wp-k) + 1) * 1px) no-repeat,
    url('/assets/ui/kitb/round.png?v=2026-09-24a') 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
  cursor: pointer;
}
/* ⛔A PHONE, OR A SHORT SCREEN (a phone on its side): world-pit.js
   PHONE_QUERY, the same query, held equal by the suite */
@media (max-width: 700px), (max-height: 500px) {
  #world-pit .wp-close { display: none; }
  #world-pit .wp-back { display: block; }
}
/* a thumb on a wider screen (a tablet) keeps the close at 44 */
@media (pointer: coarse) {
  #world-pit .wp-close {
    width: max(44px, var(--an-tile, 48px));
    height: max(44px, var(--an-tile, 48px));
  }
}

/* ── the chat's tray: the band under a frame that stops above the chat ─ */
/* Kit B's inset well, so the strip beside the chat reads as the chat's
   own tray and not as a hole in the picture (review of PR #3333). */
#world-pit.wp-inset::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--pit-inset);
  box-sizing: border-box;
  border-style: solid;
  border-width: calc(10px * var(--wp-k));
  border-image: url('/assets/ui/kitb/well.png?v=2026-09-24a') 10 fill / calc(10px * var(--wp-k)) stretch;
  image-rendering: pixelated;
  pointer-events: none;
}
}

@layer corners {
/* the world is still there, and still ticking (the cat stays put and its
   presence stays up); only its picture is not drawn behind the Pit */
body.pit-open #view { visibility: hidden; }

/* THE CHAT STANDS OVER THE PIT, at rest where it always rests */
body.hud-v2.pit-open #world-chat-panel { z-index: 52; }

/* THE DOOR ROW STANDS OVER THE PIT (a desktop). Its corner is one stacking
   context holding the row, the journal, the notices and the minimap, so the
   corner is lifted and everything in it but the row stops being drawn or
   pressed. Opacity as well as visibility: a descendant that declares
   `visibility: visible` would otherwise come back. The row moves one tile
   left for the close. */
@media (min-width: 701px) and (min-height: 501px) {
  body.nav-albion.pit-open .an-tr {
    z-index: 52;
    margin-right: calc(var(--an-tile, 48px) + var(--an-dgap, var(--an-gap, 6px)));
  }
  body.nav-albion.pit-open .an-tr > :not(.an-row) {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
}
@media (min-width: 701px) and (min-height: 501px) and (pointer: coarse) {
  body.nav-albion.pit-open .an-tr {
    margin-right: calc(max(44px, var(--an-tile, 48px)) + var(--an-dgap, var(--an-gap, 6px)));
  }
}

/* A PHONE: the row folds away (BACK TO THE WORLD is the way out), and the
   chat drops to the foot, because the six-button bar it stands on is under
   the Pit. The frame stops at the chat's top (world-pit.js), so nothing the
   venue draws is ever under it.
   ⭐700, NOT THE ROW'S OWN 560: the fold follows the page being SHOWN. The
   venue lays itself out as a phone up to 700px (its Leave chip top right,
   its clock top centre), and between 561 and 700 a lifted row of eight
   would sit over that clock. At 700 and under, BACK takes Leave's place.
   A SHORT screen folds the same way (the phone on its side, 844x390):
   the row, the venue's top pieces and the chat would share 390px. */
@media (max-width: 700px), (max-height: 500px) {
  body.nav-albion.pit-open .an-row { visibility: hidden; }
  body.hud-v2.pit-open { --chat-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}

/* THE CHAT FOLDED TO ITS TAB ROW while the Pit is up on a phone held
   sideways, under the Pit's UI pass (#3346 batch 4). world-pit.js puts
   `wp-chat-fold` on <body> and takes it off when the Pit closes; the frame
   then stops at the tab row instead of at 121px of rest panel. Only AT
   REST: an open chat is the whole chat, as ever. The log is hidden, never
   cleared, and the lines that land meanwhile count on the chosen tab
   (.wp-chat-unread, in the tabs' own badge art). The tab row's height is
   the chat's own fold (world-chat-v2.css --chat-h-fold, which the guide's
   bubble folds it to). It folds only on a phone held sideways, where the
   HUD's --hv-k is always 1, so the badge's lengths are that k's (the
   chat's own badge rule, world-chat-v2.css .wc2-badge) and this sheet
   still reads no --hv-k but --wp-k's. */
body.hud-v2.pit-open.wp-chat-fold #world-chat-panel[data-state='rest'] {
  height: var(--chat-h-fold, 20px);
  max-height: none;
}
body.hud-v2.pit-open.wp-chat-fold #world-chat-panel[data-state='rest'] .wc2-body { display: none; }
body.hud-v2.pit-open.wp-chat-fold #world-chat-panel .wp-chan:has(.wp-chat-unread) {
  padding-right: max(7px, calc(22px * var(--chat-bk, 1) - 1px));
  margin-right: 3px;
}
body.hud-v2 #world-chat-panel .wp-chat-unread {
  position: absolute;
  right: -3px;
  top: -3px;
  width: calc(22px * var(--chat-bk, 1));
  height: calc(22px * var(--chat-bk, 1));
  display: grid;
  place-items: center;
  background: url('/assets/ui/kitb/chat-badge.png?v=2026-09-24a') 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
  font: 400 calc(8px * var(--chat-bk, 1)) / 1 var(--hv-f-px);
  color: #fff;
  pointer-events: none;
}
/* unfolded (the Pit closed, or the chat opened) the count has no job */
body:not(.wp-chat-fold) #world-chat-panel .wp-chat-unread { display: none; }
}
/* end of @layer corners */