/* ═══════════════════════════════════════════════════════════════════════
   world-map-corner.css — THE MINIMAP CORNER'S CSS, in one file (GH #2920, step 3b).

   The corner is a component (public/js/world-map-corner.js, markup in
   prototype/the-hall-3d/web/tpl-map-corner.html): the map paper, the strip
   beneath it, the round coins and the tools strip. Its rules used to sit
   in world-skin.css (skin) and world-albion.css (corners); they are all
   here now, EACH STILL IN ITS LAYER and in its original order, moved
   mechanically on 2026-09-22 with the comments that introduced them. See
   world-plate.css for the rules of the move and the proof.
   ═══════════════════════════════════════════════════════════════════════ */
@layer base, module, skin, nerm, corners;

@layer skin {
/* ROUND, because the map is round. Wray: "The minimap shouldnt be in a
   square unless the map itself" — it draws a radius, so a square crop was
   the frame disagreeing with the drawing. */
/* NO SQUARE AROUND A CIRCLE. Wray: "if its going ot be a circle then it
   shouldnt live in a square frame, do we have anything in the texture packs?"
   Nothing in Majesty, Cozy or the RPG pack has a round frame — I looked — so
   rather than draw one, the SQUARE goes: the banner and the disc sit straight
   on the rail with no panel behind them. The circle is its own frame. */
body.skin-majesty .wt-panel.wt-map {
  border: 0;
  background: none;
  padding: 0;
  gap: 4px;
  /* EDGE TO EDGE (Wray, 2026-09-04): "make the slab itself big enough to
     touch the sides of the rail." 100% was the panel's content box, which
     stops at the rail's 12px padding -- so growing --sk-map widened the
     clamp, not the slab. The panel sheds the padding; the banner stays
     centred and unmoved because it is min-width, not full-width. */
  margin-inline: -12px;
}

/* NO CIRCLE, NO RING, NO GROUND. The slab draws its own edge and its own
   lip, so the border-radius, the two ring shadows and the flat navy fill
   behind it are all drawing a frame around something that is already
   finished — which was the complaint that started this. The canvas is now
   just the space the slab is drawn in. */
/* the same lamplight the selector pane carries, so the slab sits in a pool
   rather than floating on flat black (Wray, 2026-09-04: "a soft glow behind
   the map tile like the selector to give it a bit more depth") */
body.skin-majesty .wt-panel.wt-map {
  background: radial-gradient(ellipse 75% 60% at 50% 55%,
    rgba(202, 169, 130, .16), rgba(10, 14, 19, 0) 70%);
}

body.skin-majesty .wt-mapc {
  /* MUCH BIGGER, AND HONEST ABOUT THE CEILING (Wray, 2026-09-04: "its too
     small, needs to be much much bigger"). The slab now fills whatever the
     rail gives it, clamped by min() so the lab's px knob still wins when
     dragged smaller. The rail IS the ceiling: it is exactly the letterbox
     gutter (--fx), 216 usable px at a x3 window, near 300 at x4 -- so on big
     screens this is much bigger, and on a x3 window "bigger than the rail"
     would mean drawing over the render, which is a different decision. */
  width: min(var(--sk-map, 280px), 100%);
  /* 1:1 since 2026-09-13: the slab is a true diamond now (world-target.js
     drawMap), and a diamond's corners reach the middle of every edge of a
     square. The old 100/62 box was the 2:1 isometric lozenge's shape and
     would clip the top and bottom points. Wray: "stay as a diamond without
     squashing". */
  aspect-ratio: 1 / 1;
  height: auto;
  align-self: center;
  image-rendering: pixelated;
  background: none;
  border-radius: 0;
  box-shadow: none;
}

/* the room's name on Majesty's own banner, above the map */
body.skin-majesty .wt-place {
  align-self: center;
  /* 240x60, his pin (`.wt-place`, same save). The art is 107x16, so this is
     no longer a whole multiple of it -- a banner stretched to a chosen size
     rather than a sprite shown at a scale, which is the right trade for the
     one piece of chrome that has to hold a room's whole name. */
  min-width: 240px;
  height: 60px;
  margin-bottom: 2px;
  /* NINE-SLICED, NOT STRETCHED. As a background at 100% 100% the art's
     decorated ends scaled WITH the banner: profiled, banner.png is 107
     columns of which roughly 0-12 and 84-106 are cap, so at 254px wide the
     decoration ate ~100px and the room name sat under it whatever the
     padding said. As a border-image the caps draw at a fixed width and only
     the plank between them stretches, which is the whole reason the window
     titles are sliced too. */
  border-style: solid;
  border-image-source: url('/assets/ui/banner.png?v=2026-08-29a');
  border-image-slice: 0 23 0 13 fill;
  border-image-width: 0 23px 0 13px;
  border-width: 0 23px 0 13px;
  border-image-repeat: stretch;
  background: none;
  image-rendering: pixelated;
  display: flex;
  align-items: center;
  justify-content: center;
  /* THE MENU FACE (Wray, 2026-09-04): "text needs to match same font as the
     menu titles, and centering." Tome at 16 -- the face's own grid, the same
     face the rail ribbons wear. Centring was the same fault as every ribbon:
     banner.png's face is rows 1-8 of 16 (row 9 is the dark edge, 10-11 the
     shadow lip, 12-15 the swallowtail), so box-centred text sat low. The
     bottom padding is the height/6-shaped correction for THIS art: centre of
     face 4.5 vs box 8 at 16px art = 7px at x2. Colour stays neutral; the
     open-world idea (banner tinted by whose zone you stand in) is parked on
     the issue, not painted here. */
  font-family: var(--sk-tome);
  /* 32 fills the 60px band the way 16 filled 32. The lift scales with it:
     the art's face is rows 1-8 of 16, so the correction is height*3.5/16,
     which is 13 here and was 7 at 32px. */
  font-size: 32px;
  letter-spacing: 0;
  color: #3a2412;
  text-align: center;
  /* the caps are borders now, so this is breathing room inside the plank
     rather than a guess at where the decoration ends */
  padding: 0 6px 13px;
  white-space: nowrap;
  overflow: hidden;
  /* a long room name ellipsises rather than being cut mid-letter */
  text-overflow: ellipsis;
}

/* THE WALLET AND THE WAY OUT, MOVED OFF THE LEFT RAIL (#2020)
   ──────────────────────────────────────────────────────────────────────
   Wray, 2026-08-29: "wallet connect button and logout both need moving to an
   icon around the minimap space and free up room on the left."

   They keep being the shell's own buttons, so the label they were built with
   is still in there; it becomes the tooltip and the accessible name while the
   face shows a glyph. Two square plates under the map, which is where a
   person looks for account chrome in every MMO that has ever shipped. */
body.skin-majesty .wt-tools {
  display: flex;
  flex-wrap: wrap;           /* four plates, and Rooms and Settings joined */
  gap: 6px;
  justify-content: center;
  /* CENTRE, not the flex default. One of the two is wrapped in `.ws-wallet`
     and the other is a bare button, so `stretch` gave them different heights
     and sat them ten pixels out of line with each other. */
  align-items: center;
  margin-top: 8px;
}

body.skin-majesty .wt-tools:empty { display: none; }

body.skin-majesty .wt-tools .wrt-plate b { display: none; }

/* the compass coin (W18): its needle turns with the view, pointing where the
   home view's top is (--wt-north, written by world-camera-chase.js) */
.wt-coin.wt-coin-compass[hidden] { display: none !important; }
.wt-coin-compass { position: relative; }
.wt-coin-compass .wt-north {
  position: absolute; left: 50%; top: 50%;
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  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='%23ef5646' d='M3 0h1v1h-1zM2 1h3v1h-3zM2 2h3v1h-3z'/%3E%3Cpath fill='%23e3c79a' d='M3 3h1v4h-1z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  image-rendering: pixelated;
  transform: rotate(var(--wt-north, 0deg));
  pointer-events: none;
}
}
/* end of @layer skin */

@layer corners {
body.nav-albion .an-tr .wt-map     { order: 3; }

/* ⭐THE THREE PLATES UNDER THE MAP ARE GONE (Wray, 2026-09-06: "the three
   buttons under the map can be removed"). world-rail-tabs.js stands down
   under this nav, so nothing fills the strip any more; `:empty` already hides
   it, and this is the belt for a build order that fills it anyway. */
body.nav-albion .wt-tools { display: none; }

/* the map is the way into the Rooms door (#2514), so it says so on hover the
   way every other control in this corner does */
body.nav-albion .an-tr .wt-map { cursor: pointer; }

body.nav-albion .an-tr .wt-map:focus-visible {
  outline: 2px solid var(--sk-gold, #e6c88a);
  outline-offset: 2px;
}

body.nav-albion .an-tr .wt-map {
  width: var(--an-map-w);
  align-self: flex-end;
  box-sizing: border-box;
  /* the banner is a CHILD of this panel, not a sibling in the corner, so
     moving it below the canvas is an order change inside here */
  display: flex;
  flex-direction: column;
}

/* THE BANNER UNDER THE MAP became THE STRIP under the map on 2026-09-21
   (#2557 round two); its rules live in one block further down, "THE STRIP
   UNDER THE MAP", so that one element is described once in this file. */
/* the map panel sheds its rail padding with a negative margin (world-skin's
   "edge to edge" rule); out of the rail that just pushes it off the corner */
body.nav-albion .an-tr .wt-map { margin-inline: 0; }

/* and the canvas fills the column, so the map's edges line up with the row of
   doors above it rather than sitting in from them */
body.nav-albion .an-tr .wt-mapc { width: 100%; }

@media (max-width: 560px) {
body.nav-albion .an-tr .wt-map { width: var(--an-side); }

/* the strip is 168px on a phone and the phone has a clock of its own; the
     room's name is what the cell is for (measured: "EVERFAST" read "E..") */
  body.nav-albion .an-tr .wt-place .wt-clock { display: none; }

/* ...and at 120px the count goes too: pips and the room's name are the
     strip on a phone (measured: "2 cats" left "FOREST" no room at all) */
  body.nav-albion .an-tr .wt-place .wt-here { display: none; }

body.nav-albion .an-tr .wt-place { gap: 6px; padding: 6px 8px; font-size: 8px; }

} /* end of @media (max-width: 560px) */
/* ══════════════════════════════════════════════════════════════════════
   ⭐THE STRIP UNDER THE MAP (#2557, Wray 2026-09-21: "albion strip"). The
   banner that named the room is a row now: who is here, the zone mark, the
   room's name, the clock. Parchment, the head face, dark ink. world-target.js
   builds the four cells; world-skin.css's banner rule (border-image, the
   tome at 32) is undone here because this corner is where the row lives.
   ══════════════════════════════════════════════════════════════════════ */
body.nav-albion .an-tr .wt-map .wt-place {
  order: 2;
  margin-top: 10px;
  position: relative;
  z-index: 2;
  min-width: 0;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  border: 2px solid #4a3a24;
  border-image: none;
  background: linear-gradient(#e8d6ad, #d6b991);
  box-shadow: 0 2px 0 #000;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--an-head);
  font-size: 9px;
  line-height: 1;
  color: #2e2113;
  text-shadow: none;
  letter-spacing: 0;
}

body.nav-albion .an-tr .wt-place .wt-here { flex: none; color: #5a4328; white-space: nowrap; }

body.nav-albion .an-tr .wt-place .wt-here:empty { display: none; }

/* THE TIER PIPS: three small diamonds, filled to the room's risk tier and
   coloured by it (Calm green, Wild amber, Deep red, and on the island the
   guild rim in the zone map's purple, its three pips filled like deep:
   world-albion.css holds the fill). world-target.js sets `data-tier` on the
   span; an unset span shows three empty pips. */
body.nav-albion .an-tr .wt-place .wt-tier {
  flex: none;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 0 2px;
}

body.nav-albion .an-tr .wt-place .wt-tier i {
  display: block;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  border: 2px solid #5a4328;
  background: transparent;
  transform: rotate(45deg);
}

body.nav-albion .an-tr .wt-place .wt-tier[data-tier='1'] { color: #4f8f5a; }

body.nav-albion .an-tr .wt-place .wt-tier[data-tier='2'] { color: #c9932e; }

body.nav-albion .an-tr .wt-place .wt-tier[data-tier='3'] { color: #a4343a; }

body.nav-albion .an-tr .wt-place .wt-tier[data-tier='4'] { color: #7f5bb0; }

/* THE PAPER COLUMN AND THE COIN COLUMN. The map panel is two columns now:
   the paper (canvas over strip) and, to its right, the round buttons Albion
   keeps beside its minimap. The panel grows by the coin column so the paper
   keeps its 280. */
body.nav-albion .an-tr .wt-map {
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  width: calc(var(--an-map-w) + 48px);
}

body.nav-albion .an-tr .wt-map .wt-paper {
  flex: none;
  width: var(--an-map-w);
  display: flex;
  flex-direction: column;
}

body.nav-albion .an-tr .wt-map .wt-side {
  flex: none;
  width: 40px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 18px;
}

/* a coin: iron face, brass rim, the same drop the ring carries; the glyph
   in the head face, gold like the corner's accents */
body.nav-albion .an-tr .wt-coin {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 3px solid #3a3f4a;
  background: radial-gradient(circle at 40% 35%, #55606e, #1c2028);
  box-shadow: 0 0 0 2px #caa982, 0 3px 0 2px rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--an-head);
  font-size: 12px;
  line-height: 1;
  color: var(--an-gold);
  text-shadow: 0 2px 0 #000;
  cursor: pointer;
  box-sizing: border-box;
}

body.nav-albion .an-tr .wt-coin:hover { background: radial-gradient(circle at 40% 35%, #6a7686, #262c36); }

body.nav-albion .an-tr .wt-coin:active { transform: translateY(2px); box-shadow: 0 0 0 2px #caa982, 0 1px 0 2px rgba(0, 0, 0, .5); }

body.nav-albion .an-tr .wt-coin:focus-visible { outline: 2px solid var(--an-gold); outline-offset: 3px; }

/* and the paper column's strip keeps the panel's width, not the whole row's */
body.nav-albion .an-tr .wt-paper .wt-place { width: 100%; }

body.nav-albion .an-tr .wt-place .wt-placename {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.nav-albion .an-tr .wt-place .wt-clock { flex: none; color: #5a4328; font-variant-numeric: tabular-nums; }

/* ON THE ISLAND THE NAME TAKES A ROW OF ITS OWN (#3709 S4b). The place reads
   the island and its nearest town ("ESTUARY · NEAR EVERFAST",
   world-map-island.js), 207px in the head face at 9px against the 98px the
   name's cell keeps between the pips and the clock: so the strip wraps, the
   count, pips and clock keep the first row (the clock pushed right) and the
   name runs the strip's whole width beneath them. world-map-island.js sets
   `wt-isle` on the panel only while the corner is the island's. Not on a
   phone, upright or sideways (the 120px map, world-albion.css): its strip is
   the pips alone, and wrapping stacked four rows over the world (measured at
   844x390). */
@media (min-width: 561px) and (min-height: 541px) {
body.nav-albion .an-tr .wt-map.wt-isle .wt-place { flex-wrap: wrap; row-gap: 6px; }

body.nav-albion .an-tr .wt-map.wt-isle .wt-place .wt-clock { margin-left: auto; }

body.nav-albion .an-tr .wt-map.wt-isle .wt-place .wt-placename { order: 9; flex: 1 0 100%; }

} /* end of @media (min-width: 561px) and (min-height: 541px) */

/* the map panel used to draw a lamplight pool behind the slab; the paper
   carries its own rim now and the pool read as a smudge under a page */
body.nav-albion .an-tr .wt-panel.wt-map { background: none; }

@media (max-width: 560px) {
body.nav-albion .an-tr .wt-map .wt-side { padding-top: 6px; gap: 6px; width: 32px; }

body.nav-albion .an-tr .wt-coin { width: 32px; height: 32px; font-size: 10px; }

body.nav-albion .an-tr .wt-paper .wt-place { width: var(--an-side); }

body.nav-albion .an-tr .wt-map { overflow: visible; }

} /* end of @media (max-width: 560px) */
}
/* end of @layer corners */