/* ⭐CASCADE LAYERS (#2920, 2026-09-22): this file is the `corners` layer. The
   order is declared once, below, and repeated inline by build-web.js so
   the world page fixes it before any stylesheet loads. Inside a layer,
   load order and specificity still decide between THIS file's rules;
   between files, the layer decides, always. */
@layer base, module, skin, nerm, corners;
@layer corners {
/* ══════════════════════════════════════════════════════════════════════
   THE ALBION SHELL (GH #2519, reshaped for #2557) — the layout half of
   world-albion-nav.js.

   Loaded on every world page but INERT unless <body> carries `.nav-albion`,
   which only world-albion-nav.js adds and only behind FEATURE_WORLD_ALBION_NAV.

   ── THE SHAPE, AND WHY IT CHANGED ON 2026-09-06 ───────────────────────
   The first Albion pass put the doors in a bar of four at the bottom and
   the map top-right. Wray then put Albion's own screens beside ours and
   the two positions were SWAPPED against the thing being copied:

       Albion    top-right: a row of panel buttons   bottom-right: minimap
       ours      top-right: the map                  bottom-mid:   the doors

   Wray, 2026-09-06: "we should try copy the albion layout/navigation as
   much as possible." So:

       top-left      WHO YOU ARE     the hero plate
       top-right     THE ROW         every door, and the wallet chip
       bottom-right  THE CORNER      the selector over the map
       bottom-mid    RESERVED        the cast bar the free-movement arc
                                     (#2231) needs, and nothing else
       bottom-left   chat and Nerm   world-presence.js, unchanged

   The bottom bar and the MENU grid are gone. A row that holds every door
   does not need a second map of the same doors behind a button.

   ⭐THE ROW IS A CLOSED SET, exactly as the bar was. A new feature never
   earns a tile; it gets a station in the world (#2283, #2287) or a tab
   inside a door. Arena and Store are in the row today only because their
   in-world entrances are not built yet: Albion reaches both by walking to
   the arena master and the market, which is the selector's job here
   (world-stations.js already routes the auctioneer to Store / Bazaar).
   When those stations exist, those two tiles leave the row. Rooms already
   left, because the map IS how you move (#2521).

   ── EVERY SIZE IS A CHROME PIXEL, NOT A CSS PIXEL ────────────────────
   `--fs` is the render's own whole-number upscale, published by the engine
   (#2507). The chrome is bitmap art baked one canvas pixel per chrome
   pixel, so a control measured in CSS pixels holds a different amount of
   art on every screen — the #2206 lesson.

   ⭐BUT A TAP TARGET HAS A FLOOR THAT IS NOT NEGOTIABLE. `--fs` is 2 on a
   phone, so a purely proportional tile would be 32px there — under the 44px
   minimum the #2490 sweep spent a PR fixing. Every interactive size below
   is `max(44px, <proportional>)`.
   ══════════════════════════════════════════════════════════════════════ */

body.nav-albion {
  /* ⭐ONE TILE, SIZED SO NINE OF THEM FIT ON ONE LINE.
     ─────────────────────────────────────────────────────────────────
     Wray, 2026-09-06: "Top right nav buttons never to go on two line the new
     button needs to be on the same row." Eight doors plus the journal mark.

     The row used to wrap, and on a phone it had to: eight tiles at the 44px
     tap floor with seven gaps is 394px, and a 390px screen minus its edges
     gives 366. Nine is further over. So one line means the TILE gives way,
     and the middle term below is the arithmetic that makes it fit -- the
     picture's width, less both edges and the eight gaps, over nine.

     ⛔AND ON A PHONE THAT LANDS UNDER 44px (about 35). That floor was won by
     a whole PR (#2535) and this spends part of it, deliberately and only
     where the alternatives are worse: wrapping is what he just ruled out, and
     a row you have to swipe hides doors. Said out loud rather than buried:
     if the phone matters more than the single line, the fix is fewer tiles in
     the row, not a smaller number here. The 32px floor is a guard for absurd
     widths, not a target. */
  --an-tile: clamp(
    32px,
    calc((var(--fw, 100vw) - 2 * var(--an-edge) - 8 * var(--an-gap)) / 9),
    max(44px, calc(var(--fs, 3) * 17px))
  );
  --an-gap: max(6px, calc(var(--fs, 3) * 2px));
  --an-edge: max(12px, calc(var(--fs, 3) * 4px));
  --an-ink: var(--wc-ink-on-leather, var(--wc-ink, #f0dcae));
  --an-gold: #d8ab3e;
  --an-head: var(--wc-head, 'Press Start 2P', 'Courier New', monospace);

  /* ⭐WHAT IS ALREADY AT THE EDGES, MEASURED RATHER THAN GUESSED.
     The corners are not empty. Measured on the live page at 1920x937:

       #wt-foot          0,899,1920,38    the world's own foot bar, full width
       section.wt-nerm   12,849,320,46    Nerm's speech box, bottom-left

     The first build anchored to `--fb`, which is 0 under full bleed, and
     drew straight through the foot bar. Cleared here, in one place, because
     a magic number repeated at two anchor points is how they drift. */
  --an-foot: var(--sk-foot, 38px);
  /* ZERO NOW. This cleared "#wt-rail 1896,0,24,325 -- a 24px icon column on
     the right edge", which was never a column: it was the map rail collapsed
     to its padding by the --fx bug, measured before it was understood. The
     rail lives in the corner below and nothing else hugs the right edge. The
     token stays so a future right-edge fixture has one place to declare
     itself, and both corners keep reading it. */
  --an-rightcol: 0px;
  --an-bottom: calc(var(--fb, var(--fy, 0px)) + var(--an-foot) + var(--an-edge));

  /* The bottom-right corner: the map, with the selector over it. A chrome-
     pixel proportion with a floor, so the minimap stays readable on a phone.

     ⭐THE FLOOR IS 228 BECAUSE THE PROPORTION MOVED UNDER IT (#2540). This
     was `max(190px, --fs * 76)`, tuned when `--fs` was 3. Then #2523 raised
     the render ceiling to 960, which took the upscale to 2, which took this
     to its floor — the corner shrank by 38px with nobody touching it. The
     floor now holds the width Wray actually approved. */
  --an-side: max(228px, calc(var(--fs, 3) * 76px));
}

/* ── THE RAIL STANDS DOWN ─────────────────────────────────────────────
   Not `display:none` on the notices rail: world-target.js and paintNotices
   both reach into it and read its child count, and a hidden-but-present node
   answers those honestly. It is MOVED into the top-right corner by the JS,
   so all it needs here is to stop being a fixed full-height rail. */
body.nav-albion .ws-rail[data-edge="left"] { display: none; }
body.nav-albion .ws-menu { display: none; }

body.nav-albion .ws-rail.ws-notices {
  position: static;
  width: auto;
  height: auto;
  max-width: min(34vw, 340px);
  background: none;
  padding: 0;
  margin-top: var(--an-gap);
}

/* ── the corners ──────────────────────────────────────────────────── */
body.nav-albion .an-tl,
body.nav-albion .an-tr,
body.nav-albion .an-br {
  position: fixed;
  z-index: 38;
  display: flex;
  flex-direction: column;
  gap: var(--an-gap);
  pointer-events: none;
}
body.nav-albion .an-tl > *,
body.nav-albion .an-tr > *,
body.nav-albion .an-br > * { pointer-events: auto; }

/* ⭐THE FONTS ARE COMPONENT-SCOPED TO `.ws-rail`, AND MOVING A NODE OUT OF IT
   ORPHANS THEM. world-shell.css declares `--ws-head`, `--ws-body` and
   `--ws-ink` on `.ws-rail` itself (deliberately, so a global bitmap-type seam
   can define them later without fighting that file). The hero plate reads all
   three by inheritance.

   Re-parenting it into a corner therefore silently dropped Press Start 2P and
   VT323: the name, house and level fell back to the page serif and the plate
   rendered as squashed mixed-case type on parchment. Nothing errored, and it
   is invisible in either file. Restated here for the containers that now
   hold those nodes. */
body.nav-albion .an-tl,
body.nav-albion .an-tr,
body.nav-albion .an-br {
  --ws-head: var(--wc-head, 'Press Start 2P', 'Courier New', monospace);
  --ws-body: var(--wc-body, 'VT323', 'Courier New', monospace);
  --ws-ink: var(--wc-ink-on-leather, var(--wc-ink, #e6c88a));
  font-family: var(--ws-body);
}

body.nav-albion .an-tl {
  top: calc(var(--fy, 0px) + var(--an-edge));
  left: calc(var(--fx, 0px) + var(--an-edge));
  align-items: flex-start;
}
body.nav-albion .an-tr {
  top: calc(var(--fy, 0px) + var(--an-edge));
  /* clears the world's own right-edge icon column */
  right: calc(var(--fx, 0px) + var(--an-edge) + var(--an-rightcol));
  align-items: flex-end;
  max-width: min(64vw, 560px);
  /* the row, the status line, the journal when it is open, and the map --
     which came back up here on 2026-09-06. Tall enough for the map, and it
     is anchored to the TOP, so a short viewport crops the bottom of the
     column rather than pushing the map off the screen the way the bottom
     corner did. */
  max-height: 88vh;
}
body.nav-albion .an-br {
  bottom: var(--an-bottom);
  right: calc(var(--fx, 0px) + var(--an-edge) + var(--an-rightcol));
  align-items: flex-end;
  width: var(--an-side);
  max-height: 58vh;
}

/* ── THE ROW ──────────────────────────────────────────────────────────
   Albion's top-right strip: one square per panel, icon only, the label on
   hover and for a screen reader. Wraps at the corner's max-width rather
   than overflowing it, which is what turns eight into two rows of four on
   a phone without a second layout. */
body.nav-albion .an-row {
  display: flex;
  /* ⭐ONE LINE, ALWAYS (Wray, 2026-09-06: "Top right nav buttons never to go
     on two line"). It wrapped, and `--an-tile` now shrinks to whatever nine
     controls need, so there is nothing left to wrap. See the token. */
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: var(--an-gap);
  /* ⛔AND IT IS BOUNDED BY THE PICTURE, NOT BY ITS PARENT. `.an-tr` is a flex
     column with `align-items: flex-end`, so its children are sized to their
     CONTENT: a nowrap row simply took its 435px max-content width and hung
     out of the 159px corner, and the tiles never shrank because they had all
     the room they wanted. Measured at 390 before this line: the row started
     at x=-57. Bounded here, the tiles shrink to their min-width and the row
     ends where the picture does. */
  max-width: calc(var(--fw, 100vw) - 2 * var(--an-edge));
}

/* THE TILE WEARS THE MAJESTY PLANK. Wray, 2026-09-06: "the navigation
   pieces and all the kits/ribbons should be using majestic or comfy." Same
   nine-slice and the same scaled frame as `.wr-plank` in world-skin.css
   (one art pixel per chrome pixel, floor of 2), restated here because a
   tile is a <button> the shell builds without that class and the two
   files must not disagree about what a button is. */
body.nav-albion .an-tile,
body.nav-albion .an-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--an-tile);
  min-height: var(--an-tile);
  padding: 0;
  cursor: pointer;
  border-style: solid;
  border-image-repeat: repeat;
  border-image-source: url('/assets/ui/btn-idle.png?v=2026-08-29a');
  border-image-slice: 4 5 5 5 fill;
  border-image-width: calc(4px * var(--sk-btn-k, 2)) calc(5px * var(--sk-btn-k, 2)) calc(5px * var(--sk-btn-k, 2)) calc(5px * var(--sk-btn-k, 2));
  border-width: calc(4px * var(--sk-btn-k, 2)) calc(5px * var(--sk-btn-k, 2)) calc(5px * var(--sk-btn-k, 2)) calc(5px * var(--sk-btn-k, 2));
  background: transparent;
  box-shadow: none;
  color: var(--an-ink);
  /* the drawn sources are baked one canvas pixel per chrome pixel */
  image-rendering: pixelated;
}
body.nav-albion .an-tile:hover,
body.nav-albion .an-mark:hover,
body.nav-albion .an-mark[aria-expanded="true"] {
  border-image-source: url('/assets/ui/btn-on.png?v=2026-08-29a');
}
body.nav-albion .an-tile:active,
body.nav-albion .an-mark:active {
  border-image-source: url('/assets/ui/btn-press.png?v=2026-08-29a');
}
body.nav-albion .an-tile:focus-visible,
body.nav-albion .an-mark:focus-visible { outline: 2px solid var(--an-gold); outline-offset: 2px; }

/* ⭐A SELECTED TILE IS NOT A HOVERED TILE (Wray, 2026-09-06: "the top right
   buttons need to be highlighted when selected and the window is open").
   `aria-current` used to share the hover plate, so the tile you were IN and
   the tile your mouse happened to be over looked identical, and on a phone --
   where nothing hovers -- the row had no selected state at all. The open door
   takes the BRIGHT plate, which is this project's own "the one that acts"
   face (world chat's send button, the bazaar's Buy), and a gold ring so it
   still reads with the plate art swapped out.

   Nothing here decides WHICH tile: world-shell.js's markDoor writes the
   attribute for every door with a sheet and world-character.js signals its
   own window, so this rule lights whatever is open however it was opened. */
body.nav-albion .an-tile[aria-current="page"] {
  border-image-source: url('/assets/ui/btn-bright.png?v=2026-08-29a');
  box-shadow: 0 0 0 2px var(--an-gold);
}

/* ── DOOR ICONS ON THE TILES ──────────────────────────────────────────
   Two bugs lived here, and together they are why the bar read as dead
   furniture rather than as our art.

   1. THE ART WAS NEVER SHOWN IN COLOUR. `nav-icons.png` is two rows:
      colour on top, a grey "disabled" row underneath. world-skin.css draws
      the grey row by default and flips to colour on `.ws-tile:hover` /
      `[aria-current]` -- but `.ws-tile` is the OLD rail's class. The Albion
      tiles use `.an-tile`, which that rule never matches, so every icon
      sat on the grey row in every state. The colour art had never once
      been on screen.

   2. THE CELL WAS CROPPED, NOT SCALED. The base rule sizes the sheet in
      PIXELS (128x32) for a 16px icon. These tiles draw the icon at 24px+,
      and nothing rescaled the sheet -- so each icon showed its own 16px
      cell plus 8px of the NEXT cell bleeding in on the right and bottom.

   Sizing the sheet in PERCENTAGES fixes both at once and keeps working at
   any tile size. TEN columns and 2 rows means 1000% 200%, and a column's
   offset is (index / 9) * 100%. (Eight and /7 until 2026-09-06, when
   Character and Guild got glyphs of their own -- see world-skin.css.) */
body.nav-albion .an-tile .ws-ico {
  width: max(24px, calc(var(--fs, 3) * 9px));
  height: max(24px, calc(var(--fs, 3) * 9px));
  background-size: 1000% 200%;
  background-position-y: 0;          /* the colour row, always */
}
body.nav-albion .an-tile .ws-ico[data-door='rooms']     { background-position-x: 0%; }
body.nav-albion .an-tile .ws-ico[data-door='arena']     { background-position-x: 11.1111%; }
body.nav-albion .an-tile .ws-ico[data-door='board']     { background-position-x: 22.2222%; }
body.nav-albion .an-tile .ws-ico[data-door='stall']     { background-position-x: 33.3333%; }
body.nav-albion .an-tile .ws-ico[data-door='nine']      { background-position-x: 44.4444%; }
body.nav-albion .an-tile .ws-ico[data-door='record']    { background-position-x: 55.5556%; }
body.nav-albion .an-tile .ws-ico[data-door='spellbook'] { background-position-x: 66.6667%; }
/* ⭐COLUMN 7 IS THE RETIRED "?", AND THE QUEST LOG EARNS IT (2026-09-07).
   It was skipped when Character and Guild got real glyphs -- a "?" is the
   wrong face for a door whose contents you already know. It is the RIGHT face
   for this one: `!` and `?` are the two quest glyphs every game of this kind
   uses, and the journal mark beside this row is already the `!`. So the
   tracker wears the bang and the log wears the query, which is the convention
   rather than a coincidence, and no new art was needed for either. */
body.nav-albion .an-tile .ws-ico[data-door='quests']    { background-position-x: 77.7778%; }
body.nav-albion .an-tile .ws-ico[data-door='character'] { background-position-x: 88.8889%; }
body.nav-albion .an-tile .ws-ico[data-door='guild']     { background-position-x: 100%; }

/* ══════════════════════════════════════════════════════════════════════
   THE STATUS LINE, THE MARK, AND THE MAP COMING BACK UP (2026-09-06)

   Wray, with a screenshot of the corner: "what happens to the news window,
   do we move it behind some kind of ! button at the top?" and "the map has
   gone and can live in the top right below the menu buttons."

   So the top-right column reads, down the corner:

     the row        eight doors, a closed set
     the status     the wallet chip, then the journal mark
     the journal    QUESTS / NEWS, shut until the mark is pressed
     the map        under the buttons, where he asked for it

   and the bottom-right keeps the selector, Nerm and whatever else the
   target column carries -- the things that talk about what you clicked, over
   the picture, rather than a stack of panels against the bottom edge.
   ══════════════════════════════════════════════════════════════════════ */
/* ⭐THE ORDER IS DECLARED, NOT THE ORDER THINGS ARRIVED IN. Four different
   modules put nodes in this corner and two of them mount seconds late, so
   append order is a race. It also has to be THIS order for a reason: the map
   goes directly under the buttons because that is where Wray put it, and a
   journal opening above it would push it down the screen -- which is exactly
   how it went missing in the first place. Whether the news is open must not
   move the map. */
body.nav-albion .an-tr .an-row     { order: 1; }
body.nav-albion .an-tr .wt-journal { order: 4; }
body.nav-albion .an-tr .ws-notices { order: 5; }

/* the mark is a plank like a tile (the plate art is shared above); what it
   carries is type, not an icon, because "!" IS the drawn thing */
body.nav-albion .an-mark {
  position: relative;
  font-family: var(--an-head);
  font-size: max(10px, calc(var(--fs, 3) * 4px));
  line-height: 1;
  color: var(--an-ink);
  text-shadow: 0 2px 0 #000;
}
body.nav-albion .an-markglyph { font-style: normal; }
/* THE DOT IS THE WHOLE POINT OF HIDING THE PANEL. A shut journal that never
   says it has something in it is a journal nobody opens again. Set by the
   nav from the shell's own `.ws-note` elements, observed rather than counted
   once, because the shell rebuilds them whenever the counts refresh. */
body.nav-albion .an-mark[data-has]::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  background: #e03c31;
  box-shadow: 0 0 0 2px #2a1a10;
}

/* ⭐THE MAP AND THE JOURNAL NEED A WIDTH IN HERE. `.an-tr` is a flex column
   with `align-items: flex-end`, so a child with no width shrink-wraps -- and
   both of these size their own insides off their container (the map canvas is
   `min(--sk-map, 100%)`), which resolves to nothing when the container is
   resolving to them. The row's own width is the honest measure: the corner
   reads as one column when the map is exactly as wide as the doors above it. */
body.nav-albion .an-tr .wt-journal {
  width: 100%;
  box-sizing: border-box;
}
/* ⭐THE MAP AND ITS BANNER COME DOWN A FIFTH (Wray, 2026-09-06: "The map
   ribbon banner and map need to be smaller reduce both by about 20%"). One
   factor drives both, so they stay in proportion with each other and there is
   one number to turn when he wants another notch. It is applied to the width
   the map would otherwise take (the row's, so it lined up under the doors) and
   to the banner's height. */
body.nav-albion { --an-mapk: .8; }
/* ⭐280 EXPLICITLY (Wray, 2026-09-07: "lets try the map at 280 px"). It used
   to be `100% * --an-mapk`, which is the CORNER's width times a factor -- and
   the corner is as wide as the row of nine tiles, so the map measured 355 and
   would have moved again the day a tile was added or the tile size changed.
   A number he asked for should not be a side effect of the row. --an-mapk
   still scales the banner's height, which is what it was doing besides. */
body.nav-albion { --an-map-w: 280px; }
/* ⭐THE JOURNAL CARRIES A -20px TUCK, and it is wrong up here. world-skin.css
   pulls it up so it sits under the map's banner in the old column; measured in
   this corner that put its top edge at y=92 inside the status line's own box
   at y=62..106, so the panel opened over the mark that opens it. It is not
   under anything's banner here. */
body.nav-albion .an-tr .wt-journal { translate: none; }
body.nav-albion .an-tr .wt-journal[hidden] { display: none; }

/* ⛔A LEFT DOCK CROSSES THE PLATE. The docked sheets hang from y96 and the
   plate is 150 tall now, so Rooms, Play, Leaderboard and Guild opened with
   their title ribbon through the name band (measured on every left door,
   2026-09-22). Albion's bank simply covers its plate; ours steps aside while
   a left sheet is open, on the class the shell already publishes for Nerm. */
body.nav-albion.ws-left-open .an-tl { visibility: hidden; }

/* THE PLATE CARRIES A THIRD CHILD. world-equip.js mounts the world's spell
   slots (`.we-slotwrap`, #2414) INTO the plate after the text column, and in
   a flex row it asked for its full 317px and starved the text column to its
   padding -- measured: the name at 0px wide while the house and GP showed.
   It takes the whole second line instead, under the portrait and the name,
   which is where an action strip belongs on a compact plate. */
body.nav-albion .an-tl .ws-plate > .we-slotwrap {
  flex: 0 0 100%;
  order: 9;
  min-width: 0;
}

body.nav-albion .an-tl .ws-lives > span:first-child { display: none; }
body.nav-albion .an-tl .ws-tag > * { color: var(--an-ink); }
body.nav-albion .an-tl .ws-tag > :first-child { color: var(--an-gold); font-size: 7px; }

/* ══════════════════════════════════════════════════════════════════════
   THE MAP AND THE SELECTOR (#2521), IN THE BOTTOM-RIGHT CORNER

   Wray, 2026-09-06: "the only elements i want to keep are the selection,
   the map slab." Both are world-target.js's since #2020 and both size
   themselves off `--fx`, the LETTERBOX GUTTER:

       body.skin-majesty #wt-rail   { width: var(--fx, 320px) }
       body.skin-majesty #wt-target { width: var(--fx, 320px) }

   Under full bleed `--fx` is 0, so both collapsed to their padding and were
   invisible rather than absent — the same failure the ribbon rail had
   (#2507). ⭐IF ANOTHER WORLD SURFACE GOES MISSING UNDER FULL BLEED, GREP
   FOR `var(--fx` FIRST.

   These rules give each a width of its own and put both in the corner
   Albion keeps its minimap in. They rely on load ORDER to beat the skin's —
   same specificity, and world-albion.css is registered last in build-web.js,
   which a test pins.
   ══════════════════════════════════════════════════════════════════════ */

/* the map column lives in .an-br's flow, under the selector */
body.nav-albion #wt-rail {
  position: static;
  right: auto;
  top: auto;
  width: var(--an-side);
  /* MEASURED, NOT GUESSED: the map panel is 286 tall and the journal 210, so
     a 46vh cap (359 at 780) scroll-clipped the journal to its ribbon and the
     QUESTS list was invisible on a desktop that had 500px of room for it.
     64vh seats both at 780 and leaves the column scrolling on anything
     shorter, which is what the cap is for. */
  max-height: 64vh;
  padding: 0;
}

/* THE SELECTOR SITS OVER THE MAP. Wray, in world-skin.css's own note: "that
   target should always be there in the bottom right" — it keeps the corner,
   and now stacks on the map rather than floating at a fixed offset from a
   button that no longer exists. Still hidden until something is selected;
   that behaviour is world-target.js's and is already right. */
body.nav-albion #wt-target {
  position: static;
  right: auto;
  bottom: auto;
  width: var(--an-side);
}

/* ── phone ────────────────────────────────────────────────────────
   The SAME layout, which is the whole reason this shape was picked. The
   row wraps to two rows of four because the corner is narrower, the plate
   gives up width so the two can share the top edge, and the map corner
   takes a smaller floor so the picture is still the biggest thing. */
@media (max-width: 560px) {
  body.nav-albion {
    --an-side: max(168px, calc(var(--fs, 3) * 56px));
    /* Nerm's speech box, measured at 390: x12 y576 320x46. It spans most of
       a phone, so the corner column has to sit ABOVE it rather than beside
       it; the height is the skin's and this is the one place it is read. */
    --an-nerm: 46px;
  }
  /* the corner clears Nerm; on a desktop the two never meet */
  body.nav-albion .an-br {
    bottom: calc(var(--an-bottom) + var(--an-nerm) + var(--an-gap));
  }
  /* ⭐NINE ACROSS, NOT FOUR AND FOUR. This was `* 4 + * 3` -- the corner sized
     for the row WRAPPING to two rows of four, which is the shape Wray ruled
     out. Nine tiles and eight gaps is 366 at a 390 screen, which is the
     picture less both 12px edges exactly, and `--an-tile` shrank to make that
     true. Left at four, the corner clamped to 159px and the row overflowed it
     to x=-57, off the left of the screen. */
  body.nav-albion .an-tr {
    max-width: calc(var(--an-tile) * 9 + var(--an-gap) * 8);
  }
  /* ...and a row that wide leaves no top line for the hero plate, which is
     150-330px of it. The plate drops BELOW the row rather than fighting it:
     one full-width strip of doors, identity under it. On a desktop the two
     have their own corners and never meet. */
  body.nav-albion .an-tl {
    top: calc(var(--fy, 0px) + var(--an-edge) + var(--an-tile) + var(--an-gap));
  }
  /* ...and the map stops taking the whole corner, or it lands ON the plate it
     now sits beside. At 390: the plate is 156 and this is 168, which is 324 of
     the 366 the row spans -- they share the line under the row with room
     between them. On a desktop the corner is its own column and the 20%
     rule above governs. */
  /* the paper shrinks to leave the coin column its 48; measured at 390 with
     the paper at 280 inside a 168 panel, the map was drawn over the plate */
  body.nav-albion { --an-map-w: 120px; }
                              body.nav-albion .ws-rail.ws-notices { max-width: 46vw; }
}
/* ⭐A PHONE HELD SIDEWAYS TAKES THE PHONE'S MAP (#3069 S10, audit PH-1). At
   844x390 the painted minimap kept its desktop 280, 304x312 with its frame:
   80% of the screen's height, the action bar across its lower third, CARDS
   on the camp's markers and the ribbon off the foot. A screen 540 tall or
   less gets the 120 a portrait phone has (world-map-v2.css takes the phone
   treatment on the same line). Under the HUD pass only: the old corner's map
   is the old corner's. */
@media (max-height: 540px) {
  body.nav-albion.hud-v2 { --an-map-w: 120px; }
}

body.nav-albion .an-tr .wt-place .wt-tier[data-tier='1'] i:nth-child(-n+1),
body.nav-albion .an-tr .wt-place .wt-tier[data-tier='2'] i:nth-child(-n+2),
body.nav-albion .an-tr .wt-place .wt-tier[data-tier='3'] i:nth-child(-n+3),
body.nav-albion .an-tr .wt-place .wt-tier[data-tier='4'] i:nth-child(-n+3) { background: currentColor; border-color: currentColor; }
body.nav-albion .an-tr .wt-coin .ws-ico { width: 22px; height: 22px; }
/* the foot strip's zoom pad stands down: the same two presses live beside
   the map now, and one control on screen twice is a mistake, not a choice */
body.nav-albion .wcs-frame.wcs-in-foot { display: none; }
/* ⛔TWO HEALTH BARS. world-wave0.js draws its own thin green pool bar over
   the cast bar (`#w0hp`); the plate carries the pool now, so the second one
   goes. The fill element stays in the DOM because renderHud writes to it. */
body.nav-albion #w0hp { display: none; }
/* ⛔THE CAMERA CHIP SAT ON THE DOOR ROW. wave0's `#w0cam` is fixed at
   right:14px top:14px inline, which is exactly where the last two door
   tiles are. world-albion-nav.js adopts it under the map's strip; the inline
   position is overridden here because it is inline. Styled as the small
   plank every chip in the corner wears. */
body.nav-albion #w0cam {
  position: static !important;
  align-self: flex-end;
  margin-top: 6px;
  padding: 3px 8px 5px !important;
  font-family: var(--an-head) !important;
  font-size: 7px !important;
  letter-spacing: 0 !important;
  color: var(--an-ink) !important;
  text-shadow: 0 2px 0 #000;
  border-style: solid !important;
  border-color: transparent !important;
  border-image-repeat: repeat;
  border-image-source: url('/assets/ui/btn-idle.png?v=2026-08-29a');
  border-image-slice: 4 5 5 5 fill;
  border-image-width: calc(4px * var(--sk-btn-k, 2)) calc(5px * var(--sk-btn-k, 2)) calc(5px * var(--sk-btn-k, 2)) calc(5px * var(--sk-btn-k, 2));
  border-width: calc(4px * var(--sk-btn-k, 2)) calc(5px * var(--sk-btn-k, 2)) calc(5px * var(--sk-btn-k, 2)) calc(5px * var(--sk-btn-k, 2)) !important;
  background: transparent !important;
  image-rendering: pixelated;
}
/* ── phone, the map corner's round two ────────────────────────────────
   AFTER the coin and strip rules above, or the earlier phone block loses to
   them on order (same specificity, later wins). The coins shrink to 32 so
   the column ends above the paper's foot, and the strip then takes the
   whole panel under both columns, which is what lets the room's name fit
   (measured: "FOREST" read "FORE..." at 120). */
@media (max-width: 560px) {
      body.nav-albion .an-tr .wt-coin .ws-ico { width: 18px; height: 18px; }
      body.nav-albion #w0cam { font-size: 6px !important; }
}
}
/* end of @layer corners */