/* ═══════════════════════════════════════════════════════════════════════
   world-map-v2.css — THE HUD PASS'S MAP (GH #3069, slice S3).

   The angled painted minimap (a layer public/js/world-map-v2.js mounts into
   the map corner) and the near-full-screen Map window it opens. Markup in
   prototype/the-hall-3d/web/tpl-map-v2.html.

   INERT UNLESS BOTH ARE TRUE: `body.hud-v2` (only world-hud-v2.js adds it)
   and, for the minimap, `.mv2-on` on the corner (only world-map-v2.js adds
   it, in a room it has a painting for). Everywhere else the corner is the
   parchment diamond world-map-corner.css draws, untouched.

   ONE LAYER, `corners`: the minimap re-lays the corner that world-albion.css
   and world-map-corner.css place in that layer, and the window re-dresses
   the centred sheet world-skin.css draws in `skin`. This file loads after
   both corner sheets, so at equal specificity it wins inside the layer.

   ── THE CHROME PIXEL ────────────────────────────────────────────────────
   The minimap's box stays the corner's own (--an-map-w: 280, 120 on a
   phone) so the row of doors above it does not move. Its frame and ribbon
   draw at --mv2-k, a whole number: 2 on a desktop, 1 on a phone; its
   buttons at --mv2-kb, 1 (23px, the round art's own size). The v7 mock drew
   the frame at 4x with the map over most of it and its buttons at about
   1.3x (30px), neither a whole multiple here, so these are the nearest whole
   ones. The window draws at --hv-k like the rest of kit B. Glyphs are 6x6
   or 7x7 grids at a whole scale inside boxes chosen so the margin each side
   is whole: every icon sits on its own pixels (Wray's rule).
   ═══════════════════════════════════════════════════════════════════════ */
@layer base, module, skin, nerm, corners;

@layer corners {

/* ── THE MINIMAP ───────────────────────────────────────────────────────
   Box: the painting's window is --an-map-w square; the frame adds its rims
   (g-mapframe.png: 11 art rows above the opening, 6 each side, 5 below). */
body.hud-v2 .wt-panel.wt-map .mv2 { display: none; }

body.hud-v2 .wt-panel.wt-map.mv2-on {
  --mv2-k: 2;
  --mv2-g: 2;
  --mv2-kb: 1;
  --mv2-in: var(--an-map-w, 280px);
  position: relative;
  display: block;
  box-sizing: content-box;
  width: calc(var(--mv2-in) + 12 * var(--mv2-k) * 1px);
  height: calc(var(--mv2-in) + 16 * var(--mv2-k) * 1px);
  /* the ribbon hangs below the frame */
  margin-bottom: calc(12 * var(--mv2-k) * 1px);
  padding: 0;
  gap: 0;
  border: 0;
  background: none;
}

body.hud-v2 .wt-panel.wt-map.mv2-on .wt-paper {
  position: absolute;
  inset: 0;
  width: auto;
  display: block;
}

/* the parchment diamond, its strip and the CAM chip stand down (the v7 mock
   has no CAM chip; it is hidden here, not deleted, and comes back the moment
   the painted map does not own the room) */
body.hud-v2 .wt-panel.wt-map.mv2-on .wt-mapc,
body.hud-v2 .wt-panel.wt-map.mv2-on .wt-place,
body.hud-v2 .wt-panel.wt-map.mv2-on #w0cam { display: none; }

/* ⛔ONE LAYER FOR THE WHOLE CORNER, NOT ONE FOR ITS WINDOW (#3338 review).
   Chrome drawing without the GPU (hardware acceleration off, a blocklisted
   GPU, and every headless capture) drew a 280px BLACK SQUARE at the bottom
   right of a 1920x1080 screen: the painting's window, flipped top to bottom
   (1080 - 88 - 280 = 712). The window is composited on its own because it
   overlaps the world's canvas, and its clip (overflow: hidden) comes out
   flipped in the software compositor; `will-change: transform` on
   .mv2-pan made a second case of it. Compositing the whole corner as one
   layer clips the painting inside that layer's own paint instead, and both
   cases draw nothing there (measured in a real window with --disable-gpu,
   in headless SwiftShader, and on the Mac's GPU). The pan still moves on
   every step: it repaints this one 280px layer, not the world. */
body.hud-v2 .wt-panel.wt-map.mv2-on .mv2 {
  display: block;
  position: absolute;
  inset: 0;
  will-change: transform;
}

/* the square gold frame, drawn at the chrome pixel, no fill: the painting's
   window covers its inner parchment.
   ⭐NOTHING IN IT IS STRETCHED BUT PLAIN RAIL (#3091 review). The art's
   corner ornaments run 13 pixels in, so the slices are 13 (the old 8 cut
   them and stretched their tips along the rail), and its crest sat in the
   middle of the top edge, which a nine-slice stretches: 3.4 times wider
   than tall at 304px. g-mapframe-plain.png is the same frame with a plain
   rail where the crest was (promote.py plain_frame), and .mv2-crest draws
   the crest whole, at the same scale, from the untouched art. */
body.hud-v2 .mv2 .mv2-frame {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
  border-image: url('/assets/ui/kitb/g-mapframe-plain.png?v=2026-09-24a') 15 13 13 13 /
    calc(15 * var(--mv2-k) * 1px) calc(13 * var(--mv2-k) * 1px) calc(13 * var(--mv2-k) * 1px) calc(13 * var(--mv2-k) * 1px) stretch;
  image-rendering: pixelated;
  pointer-events: none;
}
/* the crest: columns 22-33, rows 0-10 of the art (the rows above the
   painting's window), centred on the frame. 12 wide, so its left edge is
   whole on the 304 and the 132 box alike. */
body.hud-v2 .mv2 .mv2-crest {
  position: absolute;
  top: 0;
  left: calc(50% - 6 * var(--mv2-k) * 1px);
  width: calc(12 * var(--mv2-k) * 1px);
  height: calc(11 * var(--mv2-k) * 1px);
  background: url('/assets/ui/kitb/g-mapframe.png?v=2026-09-24a') calc(-22 * var(--mv2-k) * 1px) 0 /
    calc(56 * var(--mv2-k) * 1px) calc(59 * var(--mv2-k) * 1px) no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
}

body.hud-v2 .mv2 .mv2-win {
  position: absolute;
  left: calc(6 * var(--mv2-k) * 1px);
  top: calc(11 * var(--mv2-k) * 1px);
  width: var(--mv2-in);
  height: var(--mv2-in);
  overflow: hidden;
  /* the black the painting was cut on, so the edge of the world is night */
  background: #000;
}

/* the painting, slid so you sit in the middle (world-map-v2.js sets the
   transform and the size); a smooth downscale, it is a painting.
   ⛔No `will-change` here: a layer of its own inside the window's clip is
   what drew the black square (see .mv2 above). */
body.hud-v2 .mv2 .mv2-pan {
  position: absolute;
  left: 0;
  top: 0;
}
body.hud-v2 .mv2 .mv2-img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  image-rendering: auto;
  user-select: none;
  pointer-events: none;
}

/* ── the chips both maps draw: a tone and a 6x6 glyph ─────────────────── */
/* the 6x6 glyph at --mv2-g with one clear pixel each side: 14px on a
   desktop, 8 on a phone. It was 20, and at the minimap's spans the camp's
   chips sat on each other (#3091 review); the Map window's are the same 14. */
body.hud-v2 .mv2-poi,
body.hud-v2 .mw-poi {
  box-sizing: border-box;
  width: calc((6 * var(--mv2-g, 2) + 2) * 1px);
  height: calc((6 * var(--mv2-g, 2) + 2) * 1px);
  background-color: #f0e2c6;
  background-position: center;
  background-repeat: no-repeat;
  background-size: calc(6 * var(--mv2-g, 2) * 1px) calc(6 * var(--mv2-g, 2) * 1px);
  box-shadow: 0 0 0 calc(var(--mv2-g, 2) * 1px) #07090d;
  image-rendering: pixelated;
}
body.hud-v2 .mv2-poi,
body.hud-v2 .mw-board .mw-poi {
  position: absolute;
  transform: translate(-50%, -50%);
}
/* a chip under one of the corner's buttons (world-map-v2.js paintMini) */
body.hud-v2 .mv2-poi[hidden] { display: none; }
/* on the Map window the camp's nine stations sit about 17px apart, so its
   chips are 14px: the 12px glyph with one clear pixel each side */
body.hud-v2 .mw-board .mw-poi {
  width: var(--mw-chip, 14px);
  height: var(--mw-chip, 14px);
}
body.hud-v2 .mv2-gather { background-color: #8fd0a0; }
body.hud-v2 .mv2-chest { background-color: #e3c07a; }
body.hud-v2 .mv2-nest { background-color: #e0493c; border-radius: 50%; }

body.hud-v2 [data-g='chest'].mv2-poi,
body.hud-v2 [data-g='chest'].mw-poi {
  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='%233a2410' d='M0 0h6v1h-6zM0 1h1v1h-1zM5 1h1v1h-1zM0 2h6v1h-6zM0 3h1v1h-1zM2 3h2v1h-2zM5 3h1v1h-1zM0 4h1v1h-1zM5 4h1v1h-1zM0 5h6v1h-6z'/%3E%3C/svg%3E");
}
body.hud-v2 [data-g='coin'].mv2-poi,
body.hud-v2 [data-g='coin'].mw-poi {
  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='%232a1d10' d='M1 0h4v1h-4zM0 1h1v1h-1zM2 1h2v1h-2zM5 1h1v1h-1zM0 2h1v1h-1zM2 2h1v1h-1zM5 2h1v1h-1zM0 3h1v1h-1zM3 3h1v1h-1zM5 3h1v1h-1zM0 4h1v1h-1zM2 4h2v1h-2zM5 4h1v1h-1zM1 5h4v1h-4z'/%3E%3C/svg%3E");
}
body.hud-v2 [data-g='anvil'].mv2-poi,
body.hud-v2 [data-g='anvil'].mw-poi {
  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='%232a1d10' d='M0 0h6v1h-6zM1 1h4v1h-4zM2 2h2v1h-2zM2 3h2v1h-2zM1 4h4v1h-4zM0 5h6v1h-6z'/%3E%3C/svg%3E");
}
body.hud-v2 [data-g='gear'].mv2-poi,
body.hud-v2 [data-g='gear'].mw-poi {
  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='%232a1d10' d='M1 0h1v1h-1zM4 0h1v1h-1zM0 1h6v1h-6zM1 2h1v1h-1zM4 2h1v1h-1zM1 3h1v1h-1zM4 3h1v1h-1zM0 4h6v1h-6zM1 5h1v1h-1zM4 5h1v1h-1z'/%3E%3C/svg%3E");
}
body.hud-v2 [data-g='pick'].mv2-poi,
body.hud-v2 [data-g='pick'].mw-poi {
  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='%2310301a' d='M0 0h4v1h-4zM3 1h2v1h-2zM3 2h1v1h-1zM5 2h1v1h-1zM2 3h1v1h-1zM5 3h1v1h-1zM1 4h1v1h-1zM0 5h1v1h-1z'/%3E%3C/svg%3E");
}
body.hud-v2 [data-g='paw'].mv2-poi,
body.hud-v2 [data-g='paw'].mw-poi {
  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='%232a0a08' d='M0 0h1v1h-1zM2 0h2v1h-2zM5 0h1v1h-1zM0 1h1v1h-1zM2 1h2v1h-2zM5 1h1v1h-1zM1 3h4v1h-4zM0 4h6v1h-6zM1 5h4v1h-4z'/%3E%3C/svg%3E");
}

/* the other cats in the room: a small gold dot (their names are on the world) */
body.hud-v2 .mv2-cat {
  position: absolute;
  width: calc(4 * var(--mv2-g, 2) * 1px);
  height: calc(4 * var(--mv2-g, 2) * 1px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #e7c77f;
  box-shadow: 0 0 0 calc(var(--mv2-g, 2) * 1px) #07090d;
}
body.hud-v2 .mv2-cat[hidden] { display: none; }
/* a member of your party (#2642 P4b, the P3 mock's mark): a square in the
   party's gold, a size up and over the other cats; drawn on your screen only */
body.hud-v2 .mv2-cat.is-mate {
  z-index: 1;
  width: calc(5 * var(--mv2-g, 2) * 1px);
  height: calc(5 * var(--mv2-g, 2) * 1px);
  border-radius: 0;
  background: #f0c75e;
}

/* YOU: the notched arrow world-target.js drew, turned by the cat's facing
   (the span turns; the <i> is the shape, the span's shadow its outline) */
body.hud-v2 .mv2-you,
body.hud-v2 .mw-you {
  position: absolute;
  width: calc(9 * var(--mv2-g, 2) * 1px);
  height: calc(10 * var(--mv2-g, 2) * 1px);
  margin: calc(-5 * var(--mv2-g, 2) * 1px) 0 0 calc(-4.5 * var(--mv2-g, 2) * 1px);
  /* a hard dark outline all round, so it reads over the cream chips */
  filter: drop-shadow(1px 0 0 #07090d) drop-shadow(-1px 0 0 #07090d)
    drop-shadow(0 1px 0 #07090d) drop-shadow(0 -1px 0 #07090d)
    drop-shadow(0 calc(var(--mv2-g, 2) * 1px) 0 rgba(0, 0, 0, .6));
  pointer-events: none;
  z-index: 2;
}
body.hud-v2 .mv2-you { left: 50%; top: 50%; }
body.hud-v2 .mv2-you > i,
body.hud-v2 .mw-you > i {
  position: absolute;
  inset: 0;
  background: #fff3d1;
  clip-path: polygon(50% 0, 100% 100%, 50% 72%, 0 100%);
}
body.hud-v2 .mw-you[hidden] { display: none; }

/* ── the buttons in the frame: the map's key (top left), Rooms (top right),
   the span's + and - (bottom right). round.png at the chrome pixel with a
   7x7 glyph, or the key letter in the bitmap face, centred on whole pixels. */
body.hud-v2 .mv2 .mv2-key {
  position: absolute;
  left: calc(9 * var(--mv2-k) * 1px);
  top: calc(14 * var(--mv2-k) * 1px);
  z-index: 3;
}
body.hud-v2 .mv2 .mv2-key:empty { display: none; }

body.hud-v2 .wt-panel.wt-map.mv2-on .wt-side {
  position: absolute;
  z-index: 3;
  top: calc(14 * var(--mv2-k) * 1px);
  right: calc(9 * var(--mv2-k) * 1px);
  bottom: calc(8 * var(--mv2-k) * 1px);
  width: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--mv2-k) * 1px);
}
body.hud-v2 .wt-panel.wt-map.mv2-on .wt-side .wt-coin-map {
  order: -1;
  margin-bottom: auto;
}

body.hud-v2 .mv2 .mv2-key,
body.hud-v2 .wt-panel.wt-map.mv2-on .wt-coin {
  box-sizing: border-box;
  width: calc(23 * var(--mv2-kb) * 1px);
  height: calc(23 * var(--mv2-kb) * 1px);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
  background: url('/assets/ui/kitb/round.png?v=2026-09-24a') 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
  cursor: pointer;
}
body.hud-v2 .mv2 .mv2-key {
  /* the key's letter: the 8px bitmap cell at the button's pixel, its 7x7
     glyph landing on the button's centre (23 = 8 + 7 + 8) */
  display: block;
  padding: calc(8 * var(--mv2-kb) * 1px) 0 0 calc(8 * var(--mv2-kb) * 1px);
  font-family: var(--hv-f-px, 'Press Start 2P', monospace);
  font-size: calc(8 * var(--mv2-kb) * 1px);
  line-height: calc(8 * var(--mv2-kb) * 1px);
  letter-spacing: 0;
  text-align: left;
  color: var(--hv-gold-hi, #e3c79a);
}
body.hud-v2 .wt-panel.wt-map.mv2-on .wt-coin {
  display: block;
  font-size: 0;
  color: transparent;
  background:
    var(--mv2-glyph) center / calc(7 * var(--mv2-kb) * 1px) calc(7 * var(--mv2-kb) * 1px) no-repeat,
    url('/assets/ui/kitb/round.png?v=2026-09-24a') 0 0 / 100% 100% no-repeat;
}
body.hud-v2 .wt-panel.wt-map.mv2-on .wt-coin .ws-ico { display: none; }
body.hud-v2 .wt-panel.wt-map.mv2-on .wt-coin[data-part='zoomin'] {
  --mv2-glyph: 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='M3 1h1v2h-1zM1 3h5v1h-5zM3 4h1v2h-1z'/%3E%3C/svg%3E");
}
body.hud-v2 .wt-panel.wt-map.mv2-on .wt-coin[data-part='zoomout'] {
  --mv2-glyph: 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='M1 3h5v1h-5z'/%3E%3C/svg%3E");
}
body.hud-v2 .wt-panel.wt-map.mv2-on .wt-coin[data-part='rooms'] {
  --mv2-glyph: 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='M3 0h1v1h-1zM2 1h1v1h-1zM4 1h1v1h-1zM1 2h1v1h-1zM5 2h1v1h-1zM0 3h7v1h-7zM1 4h1v1h-1zM5 4h1v1h-1zM1 5h1v2h-1zM3 5h1v2h-1zM5 5h1v2h-1z'/%3E%3C/svg%3E");
}
/* the compass coin (W18): the base rules are in world-map-corner.css */
body.hud-v2 .wt-panel.wt-map.mv2-on .wt-coin.wt-coin-compass { --mv2-glyph: none; }
body.hud-v2 .wt-panel.wt-map.mv2-on .wt-coin-compass .wt-north {
  width: calc(7 * var(--mv2-kb) * 1px); height: calc(7 * var(--mv2-kb) * 1px);
  margin: calc(-3.5 * var(--mv2-kb) * 1px) 0 0 calc(-3.5 * var(--mv2-kb) * 1px);
}
body.hud-v2 .mv2 .mv2-key:hover,
body.hud-v2 .wt-panel.wt-map.mv2-on .wt-coin:hover { filter: brightness(1.18); }
body.hud-v2 .mv2 .mv2-key:active,
body.hud-v2 .wt-panel.wt-map.mv2-on .wt-coin:active { transform: translateY(calc(var(--mv2-kb) * 1px)); }
body.hud-v2 .mv2 .mv2-key:focus-visible,
body.hud-v2 .wt-panel.wt-map.mv2-on .wt-coin:focus-visible {
  outline: 2px solid var(--hv-gold-hi, #e3c79a);
  outline-offset: 2px;
}

/* ── the ribbon under the frame: the zone, CALM or WILD, the clock ──────
   ribbon.png (68x19): its face is rows 2-12, so the content box is those
   rows and the swallowtails hang below.
   ⭐ON WHOLE PIXELS (#3091 review). `left: 50%` and translateX(-50%) put
   it on half pixels (a light seam where each tail met the fill, grey
   columns in the letters) and a centred ribbon wider than the frame ran a
   pixel off the screen's right edge. It hangs from the frame's right here,
   and world-map-v2.js (placeRibbon) centres it on a whole pixel when it
   reaches no more than 8px past the frame (the corner's margin is 12), and
   otherwise leaves it growing left. Its width is whole too: the face's 8px
   cells with no
   fractional letter-spacing. */
body.hud-v2 .mv2 .mv2-ribbon {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: calc(-11 * var(--mv2-k) * 1px);
  box-sizing: border-box;
  height: calc(19 * var(--mv2-k) * 1px);
  padding: calc(2 * var(--mv2-k) * 1px) calc(18 * var(--mv2-k) * 1px) calc(6 * var(--mv2-k) * 1px);
  display: flex;
  align-items: center;
  gap: calc(5 * var(--mv2-k) * 1px);
  white-space: nowrap;
  border-style: solid;
  border-width: 0;
  border-image: url('/assets/ui/kitb/ribbon.png?v=2026-09-24a') 2 16 6 16 fill /
    calc(2 * var(--mv2-k) * 1px) calc(16 * var(--mv2-k) * 1px) calc(6 * var(--mv2-k) * 1px) calc(16 * var(--mv2-k) * 1px) stretch;
  image-rendering: pixelated;
  font-family: var(--hv-f-px, 'Press Start 2P', monospace);
  font-size: 8px;
  line-height: 8px;
  letter-spacing: 0;
  pointer-events: none;
}
body.hud-v2 .mv2 .mv2-ribbon b { font-weight: normal; color: var(--hv-ink, #f0e2c6); }
body.hud-v2 .mv2 .mv2-short { display: none; }
body.hud-v2 .mv2 .mv2-tier {
  font-style: normal;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #e0a64a;
}
body.hud-v2 .mv2 .mv2-tier::before {
  content: '';
  width: 8px;
  height: 8px;
  background: currentColor;
}
body.hud-v2 .mv2 .mv2-tier:empty { display: none; }
body.hud-v2 .mv2 .mv2-tier[data-tier='calm'] { color: var(--hv-ok, #7fcf8f); }
body.hud-v2 .mv2 .mv2-clock { color: var(--hv-dim, #9d8a6d); font-variant-numeric: tabular-nums; }

/* a phone, and a phone held sideways (540 tall or less: its map is 120 too,
   world-albion.css), #3069 S10 audit PH-1 */
@media (max-width: 560px), (max-height: 540px) {
  body.hud-v2 .wt-panel.wt-map.mv2-on { --mv2-k: 1; --mv2-g: 1; }
  /* the buttons do not fit a 120px map: a tap on it opens the Map, whose
     legend carries Rooms */
  body.hud-v2 .wt-panel.wt-map.mv2-on .wt-side,
  body.hud-v2 .mv2 .mv2-key { display: none; }
  body.hud-v2 .mv2 .mv2-long,
  body.hud-v2 .mv2 .mv2-clock { display: none; }
  body.hud-v2 .mv2 .mv2-short { display: inline; }
  /* the phone's map sits on the screen's right edge, so the ribbon hangs
     from the frame's right and grows left rather than off the screen (it is
     wider than a 132px frame, so placeRibbon leaves this anchor alone) */
  body.hud-v2 .mv2 .mv2-ribbon { gap: 4px; right: -4px; }
  body.hud-v2 .mv2 .mv2-tier::before { width: 6px; height: 6px; }
}

/* ── THE MAP WINDOW ────────────────────────────────────────────────────
   A centred sheet, docked `map` (WorldShell.openSheet). Its shape is asked
   for here, on the sheet and its strips, the way every door asks
   (world-skin.css derives the size where it is declared). The centred
   window's dim and placement stay the skin's.

   ⭐IT COVERS THE WHOLE PICTURE ABOVE THE FOOT (#3091 review). Wray asked
   for it "almost to full screen". At 94% it started at y=40 and cut through
   everything in the top corners: the door row (y 12-56) and the hero plate
   (12-164) came out sliced in half, their top halves still taking clicks,
   and the minimap peeked out on the right. Now it runs 8px in from every
   edge, so each of those is under it whole (the window is above them and
   dims the room), and its title rides inside the top edge, the way the
   phone's already did. The foot bar stays below it, as the band keeps it. */
body.hud-v2 .ws-sheet[data-door='map'],
body.hud-v2 .ws-tabs[data-door='map'] {
  --sk-win-wpct: 1;
  --sk-win-hpct: 1;
  --sk-win-wmin: 560px;
  --sk-win-hmin: 360px;
  --sk-win-top: 8px;
}

/* the slate window, kit B's ruled material, at the chrome pixel */
body.hud-v2 .ws-sheet[data-door='map'] {
  box-sizing: border-box;
  border-style: solid;
  border-width: calc(18 * var(--hv-k, 2) * 1px);
  border-image: url('/assets/ui/kitb/slate-window.png?v=2026-09-24a') 18 fill / calc(18 * var(--hv-k, 2) * 1px) stretch;
  background: none;
  color: var(--hv-ink-slate, #d9cdb2);
  image-rendering: pixelated;
}

/* the title on kit B's red ribbon, riding the top edge: its top 2 chrome
   pixels inside the sheet's outer edge, so it covers the frame's rail and
   the strip below it keeps the map clear of its tails */
body.hud-v2 .ws-sheet[data-door='map'] .ws-sheet-top {
  position: static;
  height: calc(14 * var(--hv-k, 2) * 1px);
  padding: 0;
  border: 0;
}
body.hud-v2 .ws-sheet[data-door='map'] .ws-sheet-title {
  /* from the padding box: the 18-pixel frame less 2; the skin's own nudge
     (translate -30px) was for its 40px banner and would lift this off screen */
  top: calc(-16 * var(--hv-k, 2) * 1px);
  translate: -50% 0;
  height: calc(28 * var(--hv-k, 2) * 1px);
  min-width: calc(116 * var(--hv-k, 2) * 1px);
  max-width: 60%;
  box-sizing: border-box;
  padding: calc(2 * var(--hv-k, 2) * 1px) calc(28 * var(--hv-k, 2) * 1px) calc(9 * var(--hv-k, 2) * 1px);
  border-style: solid;
  border-width: 0;
  border-image: url('/assets/ui/kitb/title.png?v=2026-09-24a') 2 24 9 24 fill /
    calc(2 * var(--hv-k, 2) * 1px) calc(24 * var(--hv-k, 2) * 1px) calc(9 * var(--hv-k, 2) * 1px) calc(24 * var(--hv-k, 2) * 1px) stretch;
  font-family: var(--hv-f-tome, 'New Rocker', serif);
  font-size: calc(16 * var(--hv-k, 2) * 1px);
  line-height: 1;
  color: #f7e6c4;
  text-shadow: 0 calc(var(--hv-k, 2) * 1px) 0 #5e1414;
}
body.hud-v2 .ws-sheet[data-door='map'] .ws-sheet-title::first-letter {
  color: inherit;
  font-size: 1em;
}

/* the way out: kit B's close, whole, at the chrome pixel */
body.hud-v2 .ws-sheet[data-door='map'] .ws-sheet-top .wr-plank {
  position: absolute;
  z-index: 4;
  right: calc(-4 * var(--hv-k, 2) * 1px);
  top: calc(-6 * var(--hv-k, 2) * 1px);
  translate: none;
  margin: 0;
  width: calc(25 * var(--hv-k, 2) * 1px);
  min-width: 0;
  height: calc(27 * var(--hv-k, 2) * 1px);
  min-height: 0;
  padding: 0;
  border: 0;
  border-image: none;
  background: url('/assets/ui/kitb/close.png?v=2026-09-24a') center / calc(25 * var(--hv-k, 2) * 1px) calc(27 * var(--hv-k, 2) * 1px) no-repeat;
  box-shadow: none;
  color: transparent;
  font-size: 0;
  text-shadow: none;
  image-rendering: pixelated;
}
body.hud-v2 .ws-sheet[data-door='map'] .ws-sheet-top .wr-plank:hover {
  border-image: none;
  background: url('/assets/ui/kitb/close.png?v=2026-09-24a') center / calc(25 * var(--hv-k, 2) * 1px) calc(27 * var(--hv-k, 2) * 1px) no-repeat;
  filter: brightness(1.15);
}

body.hud-v2 .ws-sheet[data-door='map'] .ws-sheet-body {
  padding: calc(4 * var(--hv-k, 2) * 1px) calc(4 * var(--hv-k, 2) * 1px) 0;
  overflow: hidden;
}

/* ── the window's two columns: the map as large as fits, the legend ── */
body.hud-v2 .mw {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(220px, 17vw, 330px);
  gap: calc(9 * var(--hv-k, 2) * 1px);
  --mv2-g: 2;
}

/* a board bigger than its window scrolls (a phone pans it; a mouse drags);
   `margin: auto` centres a smaller one without clipping a larger one */
body.hud-v2 .mw-map {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #56472f transparent;
}
body.hud-v2 .mw-board {
  position: relative;
  flex: none;
  margin: auto;
}
body.hud-v2 .mw-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
body.hud-v2 .mw-art .mw-img {
  position: absolute;
  max-width: none;
  image-rendering: auto;
  user-select: none;
  pointer-events: none;
  /* the island's edge (the file is transparent round it, promote.py
     key_black): a hard dark outline and a soft drop, the way the mock set
     the map on its page */
  filter: drop-shadow(2px 0 0 #07090d) drop-shadow(-2px 0 0 #07090d)
    drop-shadow(0 2px 0 #07090d) drop-shadow(0 -2px 0 #07090d)
    drop-shadow(0 8px 10px rgba(0, 0, 0, .45));
}

body.hud-v2 .mw-lines {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
  pointer-events: none;
}
body.hud-v2 .mw-calm {
  fill: rgba(127, 207, 143, .12);
  stroke: #7fcf8f;
  stroke-width: 2;
  stroke-dasharray: 6 4;
}
body.hud-v2 .mw-lead-bg { stroke: #07090d; stroke-width: 4; stroke-linecap: square; }
body.hud-v2 .mw-lead { stroke: #e3c79a; stroke-width: 2; stroke-linecap: square; }

body.hud-v2 .mw-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
body.hud-v2 .mw-label {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  white-space: nowrap;
  font-family: var(--hv-f-vt, 'VT323', monospace);
  font-size: 18px;
  line-height: 1;
  padding: 1px 6px 2px;
  color: var(--hv-ink, #f0e2c6);
  background: rgba(10, 14, 20, .9);
  box-shadow: 0 0 0 2px #06080c, inset 0 0 0 1px rgba(162, 129, 85, .75);
}
/* ⭐A PHONE'S WHOLE FOREST IS MARKERS ONLY (S10 review; the mock's phone
   map): every name waits for a tap on its marker (world-map-v2.js
   nameChip), and the one named stands over the markers round it */
body.hud-v2 .mw.is-bare .mw-label:not(.is-named) { display: none; }
body.hud-v2 .mw.is-bare .mw-label.is-named { z-index: 2; }
body.hud-v2 .mw.is-bare .mw-board { cursor: pointer; }

/* ── the legend ─────────────────────────────────────────────────────── */
body.hud-v2 .mw-legend {
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* the top clears the close button in the corner above it */
  padding: calc(14 * var(--hv-k, 2) * 1px) 6px 8px 2px;
  scrollbar-width: thin;
  scrollbar-color: #56472f transparent;
}
body.hud-v2 .mw-zone {
  display: grid;
  gap: 6px;
  padding-bottom: 12px;
  border-bottom: 2px solid #56472f;
}
body.hud-v2 .mw-zone b {
  font-family: var(--hv-f-tome, 'New Rocker', serif);
  font-weight: normal;
  font-size: 30px;
  line-height: 1;
  color: #e8c89a;
}
body.hud-v2 .mw-zone span {
  font-family: var(--hv-f-vt, 'VT323', monospace);
  font-size: 19px;
  line-height: 1.05;
  color: #b6c0cc;
}
body.hud-v2 .mw-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
body.hud-v2 .mw-chip {
  font-family: var(--hv-f-px, 'Press Start 2P', monospace);
  font-size: 8px;
  line-height: 8px;
  padding: 6px 7px;
  /* whole cells: the haul chip then fits a 1366 legend on one line */
  letter-spacing: 0;
}
body.hud-v2 .mw-ok { background: #3d7a4c; color: #e7ffe9; }
body.hud-v2 .mw-warn { background: #b37b2c; color: #fff4dd; }
body.hud-v2 .mw-groups { display: grid; gap: 18px; }
body.hud-v2 .mw-group { display: grid; gap: 10px; }
body.hud-v2 .mw-h {
  font-family: var(--hv-f-px, 'Press Start 2P', monospace);
  font-size: 8px;
  line-height: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #caa982;
}
body.hud-v2 .mw-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--hv-f-vt, 'VT323', monospace);
  font-size: 20px;
  line-height: 1;
  color: #e6dcc6;
}
body.hud-v2 .mw-row .mw-poi { flex: none; margin-left: 2px; }

/* Rooms, re-homed off M: kit B's slate button */
body.hud-v2 .mw-rooms {
  margin-top: auto;
  align-self: flex-start;
  box-sizing: border-box;
  min-height: calc(18 * var(--hv-k, 2) * 1px);
  padding: calc(3 * var(--hv-k, 2) * 1px) calc(8 * var(--hv-k, 2) * 1px) calc(5 * var(--hv-k, 2) * 1px);
  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, 2) * 1px) calc(3 * var(--hv-k, 2) * 1px) calc(5 * var(--hv-k, 2) * 1px) calc(3 * var(--hv-k, 2) * 1px) stretch;
  background: none;
  image-rendering: pixelated;
  font-family: var(--hv-f-px, 'Press Start 2P', monospace);
  font-size: 8px;
  line-height: 8px;
  color: var(--hv-ink, #f0e2c6);
  cursor: pointer;
}
body.hud-v2 .mw-rooms:hover { filter: brightness(1.18); }
body.hud-v2 .mw-rooms:focus-visible { outline: 2px solid var(--hv-gold-hi, #e3c79a); outline-offset: 2px; }

/* ⭐A THUMB'S REACH ON EVERY TOUCH SCREEN (#3069 S10, audit PH-8 / C8). The
   minimap's M, + and - and Rooms are 23px on a tablet or a phone held
   sideways, and the Map's Rooms and friends button was 44 tall only under
   560 wide (about 16 on a tablet). The drawn size stays; a transparent box
   round each round button takes the press (as world-doors-v2.css does), and
   the legend's button is a thumb tall wherever the pointer is a finger. */
@media (pointer: coarse) {
  /* the key is already absolute; a coin sits in the side column's flow,
     and + and - stand a thumb apart so one's box never covers the other */
  body.hud-v2 .wt-panel.wt-map.mv2-on .wt-coin { position: relative; }
  body.hud-v2 .wt-panel.wt-map.mv2-on .wt-side { gap: calc(44px - 23 * var(--mv2-kb) * 1px); }
  body.hud-v2 .mv2 .mv2-key::before,
  body.hud-v2 .wt-panel.wt-map.mv2-on .wt-coin::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
  body.hud-v2 .mw-rooms { min-height: 44px; }
}

/* ON A PHONE the window IS the screen: the sheet fills the picture, the
   title rides inside the top edge, and the legend goes under the map */
@media (max-width: 560px) {
  body.hud-v2 .ws-sheet[data-door='map'] {
    left: var(--fx, 0px);
    top: var(--fy, 0px);
    width: var(--fw, 100vw);
    height: var(--fh, 100vh);
    border-width: calc(12px + var(--wf-safe-top, 0px)) 12px calc(12px + var(--wf-safe-bottom, 0px));
    border-image-width: 18px;
    padding: 0;
  }
  body.hud-v2 .ws-sheet[data-door='map'] .ws-sheet-top { height: 40px; }
  body.hud-v2 .ws-sheet[data-door='map'] .ws-sheet-title {
    top: -6px;
    height: 28px;
    min-width: 116px;
    padding: 2px 28px 9px;
    border-image-width: 2px 24px 9px 24px;
    font-size: 16px;
    text-shadow: 0 1px 0 #5e1414;
  }
  /* the close keeps its 25x27 art at 1x, centred in a 44px tap box (the
     thumb floor, #2490) */
  body.hud-v2 .ws-sheet[data-door='map'] .ws-sheet-top .wr-plank,
  body.hud-v2 .ws-sheet[data-door='map'] .ws-sheet-top .wr-plank:hover {
    right: -12px;
    top: -12px;
    width: 44px;
    height: 44px;
    background-size: 25px 27px;
  }
  body.hud-v2 .ws-sheet[data-door='map'] .ws-sheet-body { padding: 0; }
  body.hud-v2 .mw {
    --mv2-g: 1;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 10px;
  }
  body.hud-v2 .mw-legend { max-height: 36vh; gap: 12px; padding-top: 0; }
  /* ⭐ROOMS IS THE FIRST THING IN THE LEGEND, PINNED, A THUMB TALL (#3091
     review). The phone's minimap has no room for its Rooms button and the
     door row has no Rooms door, so this is the way to Rooms and Friends;
     at the foot of a scrolling legend it sat below the fold, 18px tall. */
  body.hud-v2 .mw-rooms {
    order: -1;
    position: sticky;
    top: 0;
    z-index: 1;
    margin-top: 0;
    align-self: stretch;
    min-height: 44px;
  }
  body.hud-v2 .mw-board { --mw-chip: 10px; }
  body.hud-v2 .mw-zone b { font-size: 22px; }
  body.hud-v2 .mw-zone span { font-size: 17px; }
  body.hud-v2 .mw-row { font-size: 17px; }
  body.hud-v2 .mw-label { font-size: 16px; padding: 0 4px 1px; }
}

/* ── THE ISLAND'S MAP WINDOW (#3709 S4b, world-map-island.js) ───────────
   The same sheet and legend as the forest's painted map; the board is two
   canvases the file draws (the island, its towns and names; then you and the
   cats on top), with the island's hard edge the painting has. */
body.hud-v2 .mwi .mwi-art,
body.hud-v2 .mwi .mwi-live {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
body.hud-v2 .mwi .mwi-art {
  box-shadow: 0 0 0 2px #07090d, 0 8px 10px rgba(0, 0, 0, .45);
}
/* the legend's marks, drawn as the board draws them */
body.hud-v2 .mwi .mwi-sw {
  flex: none;
  display: inline-block;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  margin-left: 2px;
}
body.hud-v2 .mwi .mwi-sw[data-k='main'] { background: #e6c07a; border: 2px solid #1a120a; transform: rotate(45deg) scale(.8); }
body.hud-v2 .mwi .mwi-sw[data-k='market'] { background: #f3e6c8; border: 2px solid #1a120a; border-radius: 50%; transform: scale(.7); }
body.hud-v2 .mwi .mwi-sw[data-k='camp'] { background: #e8873a; clip-path: polygon(50% 0, 100% 90%, 0 90%); }
body.hud-v2 .mwi .mwi-sw[data-k='hunt'] { background: rgba(217, 154, 43, .22); border: 2px dashed #d99a2b; }
/* #3838: a nest (world-map-island.js paintNest) */
body.hud-v2 .mwi .mwi-sw[data-k='nest'] { background: #c8473b; border: 2px solid #1a120a; border-radius: 50%; transform: scale(.6); }
body.hud-v2 .mwi .mwi-sw[data-k='you'] { background: #a4343a; clip-path: polygon(50% 0, 100% 100%, 50% 72%, 0 100%); }
body.hud-v2 .mwi .mwi-sw[data-k='cat'] { background: #2e2113; border: 2px solid #f3e6c8; border-radius: 50%; transform: scale(.7); }
/* the zones' key (#3709 S4c, FEATURE_WORLD_ESTUARY_ZONES): the tiers as the board tints them, a little stronger so a
   14px square reads; the mountains a stone wash, never a warning. Hidden until the tint has landed. */
body.hud-v2 .mwi .mw-group[hidden] { display: none; }
body.hud-v2 .mwi .mwi-sw[data-k='z-calm'] { background: rgba(79, 143, 90, .55); border: 2px solid #4f8f5a; }
body.hud-v2 .mwi .mwi-sw[data-k='z-wild'] { background: rgba(201, 147, 46, .55); border: 2px solid #c9932e; }
body.hud-v2 .mwi .mwi-sw[data-k='z-deep'] { background: rgba(164, 52, 58, .55); border: 2px solid #a4343a; }
body.hud-v2 .mwi .mwi-sw[data-k='z-rim'] { background: rgba(127, 91, 176, .55); border: 2px solid #7f5bb0; }
body.hud-v2 .mwi .mwi-sw[data-k='z-mountain'] { background: rgba(216, 206, 188, .6); border: 2px solid #b9ab90; }

}
/* end of @layer corners */