/* ═══════════════════════════════════════════════════════════════════════
   world-doors-v2.css — THE V2 DOOR ROW (GH #3069, slice S7).

   The v7 mock's row of doors (audit/ui-gen/2026-09-24-hud-pass/page.src.html
   doors(), .door, .key, .pip, .tip), in kit B:

     - each tile in the gold door frame, kitb/door.png, a nine-slice at the
       chrome pixel; the door whose window is open right now in
       kitb/dooron.png, the same frame lit (world-shell.js markDoor writes
       aria-current on the tile, whichever way the door was opened)
     - the colour nav icon, centred, at a whole-number scale of its 16px art
     - a keycap in the corner and the Store's pip (world-doors-v2.js puts
       them there; the Inventory's pip is world-shell.js's, redrawn here)
     - kit B's tooltip, kitb/tip.png
     - the journal's "!" mark, the row's ninth control, in the same frame
       (the pass's "kit B throughout", #3069 2026-09-24): lit while the
       journal is open, the "!" in the pixel face, its dot on kit B's badge

   Every rule is under `body.nav-albion.hud-v2`: world-albion-nav.js adds
   `nav-albion` (the row) and world-hud-v2.js adds `hud-v2` (flag or
   ?hud=1), so with the flag off this file styles nothing and the row is
   the Majesty row every player has today.

   ── THE LAYER ───────────────────────────────────────────────────────────
   `corners`, the row's own layer (world-albion.css). Inside it this file
   loads after world-albion.css, and every rule carries one more class than
   the rule it replaces, so it wins by specificity and by order.

   ── SIZES, AND WHY THEY ARE WHOLE ───────────────────────────────────────
   The frame's rim is kit B's 8 art pixels at --hv-k (world-hud-v2.css: 1 on
   a phone or under 1440, 2 at 1920x1080, 3 and 4 above). The icon is
   nav-icons.png's 16px cell at max(2, --hv-k), so 32, 32, 48, 64. The tile
   is the icon plus one rim of gold each side, which the art draws in its
   outer 4 art pixels:

       --hv-k   1    2    3    4
       icon     32   32   48   64
       tile     40   48   72   96        (the mock: 48 at 1920)

   and the icon sits on whole pixels in every band: 4, 8, 12, 16 in. A
   phone narrower than 390 shrinks the tile, and the shrink is rounded DOWN
   to an even pixel (38 at 375, 36 at 360) so the icon stays centred on
   whole pixels there too. Unrounded, 375 drew a 38.33px tile with every
   icon a fraction off centre in its frame (the S7 look review, 2026-09-24).

   Press Start 2P is drawn on an 8px grid, so the row's pixel type (the
   keycaps, the pips, the tooltip's title and key) is 8px or 16px and
   nothing between: 8 up to --hv-k 3, 16 at 4, the same step as the pip
   (--an-px beside --an-pipk). `8 * k / 2` made 12px at --hv-k 3, and the
   "B" cap and "Key J" came out grey at the edges on a 2560 screen.

   ── THE PHONE, AND THE 44px RULE ────────────────────────────────────────
   Nine controls share one line (eight doors and the journal's mark, Wray
   2026-09-06: "never to go on two line"). A 44px target each is 396px with
   no gaps, wider than a 390 phone, so the drawn tile stays 40 and the TARGET
   is made up to the gap: each control's hit area runs across the gaps
   either side, so a 43px pitch gives every one a 43px wide area. That is
   the most a 390 screen can give nine controls, and the way
   scripts/tap-targets.js tests it: the points 21px either side of a
   control's centre still land on that control.

   ⛔NINE ACROSS CANNOT REACH 44 WIDE ON A SCREEN UNDER 396px, and nothing
   here pretends to: at 375 the pitch is 41, at 360 it is 39. HEIGHT costs
   nothing, so every phone gets 44 of it: the target reaches (44 - tile) / 2
   above and below the tile, never less than 2px (--an-hit-v). To buy the
   pitch the row runs out to 3px from each edge; the plate and the minimap
   stay where they are. No keycaps on a phone: there are no keys.
   ═══════════════════════════════════════════════════════════════════════ */
@layer base, module, skin, nerm, corners;

@layer corners {
body.nav-albion.hud-v2 {
  --an-ico: calc(16px * max(2, var(--hv-k, 2)));
  /* the mock's 6 at 1920 */
  --an-dgap: calc(3px * var(--hv-k, 2));
  /* the icon plus a rim of gold each side (--an-tile-max; a phone's is two
     pixels wider, below); never wider than EIGHT across the picture inside
     its 12px gutters (#3069 S11: the journal's ninth mark went into the
     Quests door), so a phone under 390 shrinks the tile instead of pushing
     the row off the screen (rounded to an even pixel below, where the
     browser has round()) */
  --an-tile-max: calc(var(--an-ico) + 8px * var(--hv-k, 2));
  --an-tile: min(
    var(--an-tile-max),
    calc((var(--fw, 100vw) - 24px - 7 * var(--an-dgap)) / 8)
  );
  /* each target's reach above and below its tile: whatever makes it 44
     tall, never under 2px (see the header). Declared beside --an-tile, so
     it reads the tile this element resolved, rounded or not. */
  --an-hit-v: max(2px, calc((44px - var(--an-tile)) / 2));
  /* one chrome pixel, for the type's black outline */
  --an-o: calc(1px * var(--hv-k, 2));
  /* the pip's scale and the row's pixel type (see the header) */
  --an-pipk: 1;
  --an-px: 8px;
  /* the mark's "!" nudge (below): half a glyph pixel, in whole pixels */
  --an-markpad: 2px;
  /* each target's reach into the gaps either side, whole pixels (below);
     the steps are world-hud-v2.css's --hv-k steps, so the gap is 3 x k */
  --an-hit-l: -1px;
  --an-hit-r: -2px;
}
/* ⭐A PHONE HELD SIDEWAYS GETS THE FULL 44 (#3481, the HUD audit's last
   sub-44 target, 2026-10-20). Landscape is the phone's orientation (Wray,
   2026-09-29), and at 844x390 the row is the laptop's: --hv-k 1, the kit's
   40px tile, a 3px gap, so each target was 43 wide (1 + 40 + 2) and 44 tall.
   The portrait rule below cannot help it (that is max-width 560), and the
   screen has width to spare, so on a touch screen past the phone's portrait
   width the GAP is 4px and each target takes 2 of it each side: 44 wide,
   neighbours still meeting on whole pixels and never overlapping. The tile
   stays 40, the art untouched; the row is 7px wider (eight doors and the
   mark at 844: 392 of 844). Bounded above by the --hv-k 2 step (1440x810),
   where the tile is 48 and the gap 6 already. */
@media (pointer: coarse) and (min-width: 561px) and (max-width: 1439px),
       (pointer: coarse) and (min-width: 561px) and (max-height: 809px) {
  body.nav-albion.hud-v2 { --an-dgap: 4px; --an-hit-l: -2px; --an-hit-r: -2px; }
}
@media (min-width: 1440px) and (min-height: 810px) {
  body.nav-albion.hud-v2 { --an-hit-l: -3px; --an-hit-r: -3px; }
}
@media (min-width: 2400px) and (min-height: 1350px) {
  body.nav-albion.hud-v2 { --an-hit-l: -4px; --an-hit-r: -5px; }
}
@media (min-width: 3360px) and (min-height: 1890px) {
  body.nav-albion.hud-v2 { --an-hit-l: -6px; --an-hit-r: -6px; --an-pipk: 2; --an-px: 16px; --an-markpad: 4px; }
}
/* the tile's even-pixel shrink, where the browser has round(). The
   unrounded value above stands in for one that does not: a fraction off
   centre, rather than a tile with no width (a custom property whose value
   fails to compute is dropped where it is used). */
@supports (width: round(down, 5px, 2px)) {
  body.nav-albion.hud-v2 {
    --an-tile: min(
      var(--an-tile-max),
      round(down, calc((var(--fw, 100vw) - 24px - 7 * var(--an-dgap)) / 8), 2px)
    );
  }
}
/* A PHONE'S DOORS ARE 42 (#3069 S11, PH-4): eight of them and seven 3px
   gaps are 357 of the 366 a 390 screen has inside its 12px gutters, so each
   tile takes two pixels more than the kit's 40 (the icon lands 5px in, still
   whole). Declared per element beside the formula above, which reads it. */
@media (max-width: 560px) {
  body.nav-albion.hud-v2 { --an-tile-max: calc(var(--an-ico) + 10px); }
}

body.nav-albion.hud-v2 .an-row {
  gap: var(--an-dgap);
  /* THE LIT DOOR'S GLOW CLEARS THE MAP. dooron.png draws 3 art pixels of
     glow outside the tile, and the minimap sits one --an-gap under the row
     (6px on most screens). At --hv-k 3 the glow is 9px, so a lit Play
     grazed the map's crest by 3px at 2560 (the S7 look review). The row
     takes whatever the glow needs beyond the gap: nothing at --hv-k 1 and 2,
     where 3 and 6 fit inside it. */
  margin-bottom: max(0px, calc(3px * var(--hv-k, 2) - var(--an-gap, 6px)));
}

/* ── the tile, and the journal's mark: kit B's door frame ─────────────── */
body.nav-albion.hud-v2 .an-mark,
body.nav-albion.hud-v2 .an-tile {
  position: relative;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: var(--an-tile);
  height: var(--an-tile);
  min-width: 0;
  min-height: 0;
  padding: 0;
  /* a paint-only nine-slice: the rim is drawn from border-image-width, and
     a real border would shrink the box the icon is centred in */
  border-style: solid;
  border-width: 0;
  border-image: url('/assets/ui/kitb/door.png?v=2026-09-24a') 8 fill / calc(8px * var(--hv-k, 2)) stretch;
  background: none;
  box-shadow: none;
  image-rendering: pixelated;
}
/* Kit B has no hover or press art: the frame brightens, and a press sinks
   one chrome pixel. The brightening only where a pointer can hover: a
   phone keeps :hover on the last tile tapped, so it would stay lit there. */
@media (hover: hover) {
  body.nav-albion.hud-v2 .an-mark:hover,
  body.nav-albion.hud-v2 .an-tile:hover { filter: brightness(1.15); }
}
body.nav-albion.hud-v2 .an-mark:active,
body.nav-albion.hud-v2 .an-tile:active { transform: translateY(var(--an-o)); }
/* Kit B has no focus art either, and the lit frame already means "open",
   so focus is the HUD pass's own ring: the action bar's slots, the map's
   keys and the chat's buttons draw the same 2px of --hv-gold-hi. */
body.nav-albion.hud-v2 .an-mark:focus-visible,
body.nav-albion.hud-v2 .an-tile:focus-visible {
  outline: 2px solid var(--hv-gold-hi, #e3c79a);
  outline-offset: 2px;
}

/* ⭐THE OPEN DOOR IS LIT. dooron.png is door.png plus a 3 art pixel glow all
   round, so its rim of 11 is drawn 3 outside the box and the gold lands
   where the unlit frame's did (world-hud-v2.css's .hv-frame.is-on). The
   journal's mark lights the same way while the journal is open. */
body.nav-albion.hud-v2 .an-mark[aria-expanded="true"],
body.nav-albion.hud-v2 .an-tile[aria-current="page"] {
  border-image: url('/assets/ui/kitb/dooron.png?v=2026-09-24a') 11 fill / calc(11px * var(--hv-k, 2)) / calc(3px * var(--hv-k, 2)) stretch;
  box-shadow: none;
}

/* the icon, centred on its own pixels at a whole-number scale */
body.nav-albion.hud-v2 .an-tile .ws-ico {
  flex: none;
  width: var(--an-ico);
  height: var(--an-ico);
}

/* the mark's "!" is its icon: Press Start 2P at the icon's own scale (its
   8px glyph at max(2, --hv-k), as the icon's 16px cell is), in the ink with
   the keycaps' outline, so it reads on the gold the way they do. The face
   draws "!" half a glyph pixel left of and above its cell's middle
   (measured at 390: ink 363-368 by 24-37 in a tile centred on 367,32), so
   the box pads 2px top and left and the "!" lands 1px right and down:
   centred at 16px, and still on whole pixels at every size. */
body.nav-albion.hud-v2 .an-mark {
  padding: var(--an-markpad) 0 0 var(--an-markpad);
  font: calc(8px * max(2, var(--hv-k, 2))) / 1 var(--hv-f-px);
  font-weight: 400;
  color: var(--hv-ink);
  text-shadow:
    var(--an-o) 0 0 var(--hv-black), calc(-1 * var(--an-o)) 0 0 var(--hv-black),
    0 var(--an-o) 0 var(--hv-black), 0 calc(-1 * var(--an-o)) 0 var(--hv-black);
}
/* its "something to read" dot on kit B's badge, where the doors' pips sit.
   A dot, not a count: the journal counts inside itself. */
body.nav-albion.hud-v2 .an-mark[data-has]::after {
  z-index: 3;
  top: -3px;
  right: -3px;
  width: calc(20px * var(--an-pipk));
  height: calc(21px * var(--an-pipk));
  background: url('/assets/ui/kitb/badge.png?v=2026-09-24a') center / 100% 100% no-repeat;
  box-shadow: none;
  image-rendering: pixelated;
  pointer-events: none;
}

/* ⭐THE TARGET, MADE UP TO THE GAP (see the header): transparent, no paint,
   hit only. ::before, because the mark's ::after is its dot. Under v2 the
   mark's border is paint only (0 wide), like a tile's, so one rule serves
   both.

   WHOLE PIXELS, AND THE GAP SPLIT UNEVENLY ON PURPOSE. The first cut ran
   half a gap each way (1.5px of a 3px gap); Chrome hit-tests the snapped
   box, so the half pixel went to the NEXT tile and a press 21px right of a
   door's centre opened its neighbour (measured at 390, 2026-09-24). So each
   target takes the whole pixels: 1 left and 2 right of a 3px gap, 3 and 3
   of a 6, 4 and 5 of a 9, 6 and 6 of a 12. Neighbours meet and never
   overlap. */
body.nav-albion.hud-v2 .an-mark::before,
body.nav-albion.hud-v2 .an-tile::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--an-hit-v));
  bottom: calc(-1 * var(--an-hit-v));
  left: var(--an-hit-l);
  right: var(--an-hit-r);
}

/* ── the keycap: the mock's corner label, from the bindings ───────────
   The mock drew it gold with a drop shadow; on the frame's gold rim that
   read as nothing (shot at 1920, 2026-09-24), so the letter is the ink and
   carries a black outline one chrome pixel wide, the way the mock's buff
   counts do. The mock's corner and inset: one chrome pixel in from the
   tile's edge, so at 1920 the cap overlaps the icon by 2px, not 4, and a
   three-letter cap (F10, SPC) covers only the icon's bottom 2px. */
body.nav-albion.hud-v2 .an-tile .an-key {
  position: absolute;
  z-index: 2;
  right: var(--an-o);
  bottom: var(--an-o);
  font: var(--an-px) / 1 var(--hv-f-px);
  font-weight: 400;
  color: var(--hv-ink);
  text-shadow:
    var(--an-o) 0 0 var(--hv-black), calc(-1 * var(--an-o)) 0 0 var(--hv-black),
    0 var(--an-o) 0 var(--hv-black), 0 calc(-1 * var(--an-o)) 0 var(--hv-black),
    var(--an-o) var(--an-o) 0 var(--hv-black);
  pointer-events: none;
}

/* ── the pips: the Inventory's drops (world-shell.js) and the Store's
   packs (world-doors-v2.js), on kit B's badge ───────────────────────────
   badge.png is a 20x21 disc whose red face is 12px across, and "9+" is
   16px of type, so a disc laid under it left the 9 and the + on the dark
   rim (the S7 look review). So the badge is a sideways three-slice: its
   left and right 9 columns are the ends and its middle 2 the run between,
   so one digit draws the disc exactly (9 + 2 + 9) and two stretch it into
   a pill with the same ends. The width is the type's plus 6 badge pixels a
   side. */
body.nav-albion.hud-v2 .an-tile .ws-doorpip {
  position: absolute;
  z-index: 3;
  top: -3px;
  right: -3px;
  box-sizing: border-box;
  width: auto;
  min-width: calc(20px * var(--an-pipk));
  height: calc(21px * var(--an-pipk));
  padding: 0 calc(6px * var(--an-pipk)) calc(1px * var(--an-pipk));
  display: grid;
  place-items: center;
  font: var(--an-px) / 1 var(--hv-f-px);
  font-weight: 400;
  white-space: nowrap;
  color: #fff;
  text-shadow: 0 calc(1px * var(--an-pipk)) 0 #5e1414;
  background: none;
  border-style: solid;
  border-width: 0;
  border-image: url('/assets/ui/kitb/badge.png?v=2026-09-24a') 0 9 fill / 0 calc(9px * var(--an-pipk)) stretch;
  box-shadow: none;
  image-rendering: pixelated;
  pointer-events: none;
}

/* ── the tooltip: kit B's tip.png, under the door ──────────────────── */
body.nav-albion.hud-v2 .an-tip {
  position: fixed;
  /* over every window: the sheet is 60 (world-shell.css), its side tabs and
     the character window 61, the profile card 62 and its tabs 63
     (world-skin.css). At 45 it sat under an open Inventory while the mouse
     went on to the next door (the S7 look review). */
  z-index: 64;
  left: 0;
  top: 0;
  box-sizing: border-box;
  width: max-content;
  max-width: min(calc(150px * var(--hv-k, 2)), calc(100vw - 16px));
  display: grid;
  gap: calc(3px * var(--hv-k, 2));
  padding: calc(7px * var(--hv-k, 2)) calc(8px * var(--hv-k, 2));
  border-style: solid;
  border-width: 0;
  border-image: url('/assets/ui/kitb/tip.png?v=2026-10-04a') 5 fill / calc(5px * var(--hv-k, 2)) stretch;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  image-rendering: pixelated;
  pointer-events: none;
  text-align: left;
}
/* the title in the pixel face at its own 8px grid; the mock's 11px would be
   1.375 screen pixels to the glyph pixel, the grey fringes above */
body.nav-albion.hud-v2 .an-tip b {
  font: var(--an-px) / 1.5 var(--hv-f-px);
  font-weight: 400;
  color: var(--hv-gold-2);
}
body.nav-albion.hud-v2 .an-tip span {
  font: max(16px, calc(10px * var(--hv-k, 2))) / 1.05 var(--hv-f-vt);
  color: var(--hv-ink);
}
body.nav-albion.hud-v2 .an-tip em {
  /* whole pixels in every band: 15, 17, 26, 35 (8.5 x k made 25.5 at 3) */
  font: normal max(15px, calc(9px * var(--hv-k, 2) - 1px)) / 1.1 var(--hv-f-vt);
  color: var(--hv-mute);
}
/* the key itself, a small cap in the pixel face (VT323 draws O like 0) */
body.nav-albion.hud-v2 .an-tip .an-tip-cap {
  display: inline-block;
  margin-left: calc(2px * var(--hv-k, 2));
  padding: calc(2px * var(--hv-k, 2)) calc(3px * var(--hv-k, 2));
  font: var(--an-px) / 1 var(--hv-f-px);
  color: var(--hv-ink);
  background: var(--hv-well);
  box-shadow: 0 0 0 calc(1px * var(--hv-k, 2)) #56472f;
  vertical-align: middle;
}
/* LAST in the tooltip's rules, so it beats their `display`: a part the
   painter hid stays hidden */
body.nav-albion.hud-v2 .an-tip[hidden],
body.nav-albion.hud-v2 .an-tip [hidden] { display: none; }

/* ── no keycaps where there are no keys ───────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  body.nav-albion.hud-v2 .an-tile .an-key { display: none; }
  /* ...and the tooltip a long press shows names no key either (#3069 S11) */
  body.nav-albion.hud-v2 .an-tip .an-tip-key { display: none; }
}

/* ── the phone: one line of eight, inside the corner's own 12px gutter ──
   (#3069 S11, PH-4.) Nine controls used to run the row out to 3px from each
   edge; eight fit where the plate and the map already stand. */
@media (max-width: 560px) {
  body.nav-albion.hud-v2 .an-tile .an-key { display: none; }
}

/* ── A TOUCH SCREEN'S HOLD IS ITS HOVER (#3069 S11, PH-9/C19) ─────────────
   A long press on a tile shows its tooltip (world-doors-v2.js), so the
   phone's own long-press callout and text selection stand aside. */
@media (hover: none) and (pointer: coarse) {
  body.nav-albion.hud-v2 .an-tile {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
}

/* ── THE DOOR TO GO THROUGH PULSES (#3069 S11, PH-10) ───────────────────
   While the tracker's lit goal happens behind a door, that door's tile
   carries .an-cue (world-tracker.js cue()). Only on a touch screen, where
   there is no keycap to say which door: two steps of brightness, never a
   tween. Under reduced motion it is lit and still. */
@keyframes an-cue {
  0%, 100% { filter: none; }
  50% { filter: brightness(1.45) drop-shadow(0 0 calc(2px * var(--hv-k, 1)) var(--hv-gold-hi, #e3c79a)); }
}
@media (hover: none) and (pointer: coarse) {
  body.nav-albion.hud-v2 .an-tile.an-cue { animation: an-cue 1.2s steps(1, end) infinite; }
}
@media (hover: none) and (pointer: coarse) and (prefers-reduced-motion: reduce) {
  body.nav-albion.hud-v2 .an-tile.an-cue {
    animation: none;
    filter: brightness(1.3);
  }
}
}
/* end of @layer corners */