/* map — this page's own styles; the tokens are tokens.css, the header, footer and buttons site.css */
/* ============ Tokens (shared with the public site) ============ */
/* past the map's edge: the colour of the game's rim clouds (scripts/build-map-tiles.mjs pads the edge tiles with it) */
:root { --map-ground: #2b2f2f; }
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--map-ground); color: var(--bone); font-family: var(--f-body); font-size: 1rem; line-height: 1.55; overflow: hidden; }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.15; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; border-radius: 2px; }
/* ============ Map stage ============ */
.map-stage { position: relative; height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); }
#map { position: absolute; inset: 0; background: var(--map-ground); }
.leaflet-container { font-family: var(--f-body); background: var(--map-ground); outline-offset: -3px; }
/* zoom control — the site's round buttons */
.leaflet-bar { border: 0 !important; box-shadow: none !important; display: flex; flex-direction: column; gap: 8px; }
.leaflet-bar a, .leaflet-bar a:hover { width: 44px !important; height: 44px !important; line-height: 42px !important; border-radius: 999px !important; border: 1px solid rgba(224, 191, 120, .5) !important; background: rgba(20, 18, 15, .88) !important; color: var(--on-dark) !important; font-family: var(--f-title); font-size: 1.375rem !important; font-weight: 700; backdrop-filter: blur(6px); }
.leaflet-bar a:hover { border-color: var(--gold-hi) !important; }
.leaflet-bar a.leaflet-disabled { opacity: .4; }
.leaflet-bottom.leaflet-right .leaflet-control { margin: 0 max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) 0; }
/* domain labels — lettered across each area once zoomed in far enough */
.domain-label { background: none; border: 0; }
.domain-label .lbl { display: flex; flex-direction: column; align-items: center; gap: 6px; transform: translate(-50%, -50%); pointer-events: none; transition: opacity var(--dur-m) var(--ease-out); }
.domain-label .t { display: block; white-space: nowrap; font-family: var(--f-hero); font-size: clamp(1.125rem, .85rem + 1vw, 1.75rem); line-height: 1; color: #f6eedb; letter-spacing: .02em; text-shadow: 0 0 2px rgba(0,0,0,.9), 0 2px 10px rgba(0,0,0,.75); }
/* coat of arms under the name — keeps the shield's own 380 × 512 proportions.
   Leaflet resets marker-pane images to width:auto, so this needs the higher specificity. */
.leaflet-container .leaflet-marker-pane .domain-label img.coa { display: block; width: clamp(36px, 2.4vw, 48px) !important; height: auto !important; aspect-ratio: 380 / 512; filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)); user-select: none; }
.domain-label.is-hidden .lbl { opacity: 0; }
.domain-label.small .t { font-size: clamp(.9375rem, .8rem + .5vw, 1.25rem); }
.leaflet-container .leaflet-marker-pane .domain-label.small img.coa { width: 27px !important; }
/* ============ Place names: the game map's own labels ============
   The game's parchment banner (assets/map/label, from scripts/import-map-labels.mjs) laid out as the game's map does
   it (ApseMap.gfx, MapLabel): every length is in the game's units times --u, the size on screen. map.js draws the
   banner into the canvas - the left end 277 wide, the middle 189 (stretched, repeated where long) and the right end
   310, all 349 tall - on whole screen pixels, so the parts meet without a seam. The band of parchment runs from 107
   to 194. The name is 50 high, on the band, 80 in from the banner's start, and the banner runs 320 past the name's
   end (min. both ends). The marker is the game's own label point, where the game puts the banner's corner at
   -79.75, -164.75 and the name 78 right of it (after a reputation icon the website doesn't have: the banner moves
   right with the name, so the name is where the game's is). */
.place-label { background: none; border: 0; }
.place {
  --u: .3125px;
  position: absolute; left: 0; top: 0; display: block; height: calc(349 * var(--u));
  transform: translate(calc(-1.75 * var(--u)), calc(-164.75 * var(--u)));
  pointer-events: none; user-select: none;
  /* hidden until the pointer is over its town (map.js reveal) */
  opacity: 0; visibility: hidden; transition: opacity var(--dur-m) var(--ease-out), visibility 0s linear var(--dur-m);
}
.place-label.is-near .place { opacity: 1; visibility: visible; transition: opacity var(--dur-m) var(--ease-out); }
.place canvas { display: block; height: 100%; }
.place .t {
  position: absolute; left: calc(79.75 * var(--u)); top: calc(106.5 * var(--u));
  height: calc(88 * var(--u)); line-height: calc(88 * var(--u));
  font-family: var(--f-hero); font-size: calc(50 * var(--u)); color: #24190f; white-space: nowrap;
}
/* ============ Domain card ============ */
.card { position: absolute; z-index: 900; left: max(16px, env(safe-area-inset-left)); bottom: max(24px, env(safe-area-inset-bottom)); width: 320px; background: var(--surface); color: var(--bone); border: 1px solid var(--border-hi); border-radius: 10px; overflow: hidden; box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .75); }
.card[hidden] { display: none; }
.card .band { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 8px 10px 16px; background: var(--btn-cloth), linear-gradient(135deg, var(--btn-red), var(--btn-red-deep)); }
.card .band::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--btn-rule-color), transparent); }
.card .band .lbl { flex: 1; font-family: var(--f-title); font-size: var(--t-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--btn-on-red); }
.card .x { width: 44px; height: 44px; flex: none; display: grid; place-items: center; background: none; border: 0; border-radius: 6px; cursor: pointer; color: var(--btn-on-red); }
.card .x svg { width: 18px; height: 18px; }
.card .body { padding: 16px 18px 18px; display: grid; gap: 4px; }
.card .name { font-family: var(--f-hero); font-weight: 400; font-size: 2rem; line-height: 1; color: var(--bone); }
.card .holder { font-family: var(--f-title); font-size: var(--t-sm); font-weight: 600; letter-spacing: .03em; color: var(--muted); }
.card .coa { display: block; width: 52px; height: auto; aspect-ratio: 380 / 512; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.card .coa[hidden] { display: none; }
.card.has-coa .body { grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; align-items: center; }
.card.has-coa .body .coa { grid-row: 1 / span 2; }
@media (prefers-reduced-motion: no-preference) {
  .card:not([hidden]) { animation: card-in 220ms var(--ease-out); }
  @keyframes card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}
/* ============ Mobile ============ */
@media (max-width: 767px) {
  /* card becomes a bottom sheet */
  .card { left: 0; right: 0; bottom: 0; width: auto; border-radius: 14px 14px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .card .body { align-content: center; padding: 12px 16px; }
  .card .name { font-size: 1.75rem; }
  .card .coa { width: 40px; }
  .card.has-coa .body { grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; }
  .leaflet-bottom.leaflet-right .leaflet-control { margin-bottom: max(24px, env(safe-area-inset-bottom)); }
  .card:not([hidden]) ~ #map .leaflet-bottom { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; }
}