/* ==========================================================================
   World Map — /map.

   The site's own idiom, exactly as highscores.css set it out: parchment,
   brown Verdana, gold hairlines, keys you press, green stone caption bars.
   No rounded corners, no white cards, no drop shadows — Tibia's chrome is
   drawn with borders. The map itself is the one dark thing on the page and
   is mounted on the same black-outline / gold-bevel plaque the Achievement
   showcase, the Loyalty bar and the Highscores champion use, so the server's
   "look at this" frame stays one object across four pages.

   The behaviour lives in compendium-map.js and is untouched by this sheet.
   Every class the script creates (wm-hit, wm-pin, wm-card…) is styled here;
   the script never reads a class, it finds its parts by data-map-* attributes.

   Two site-wide constraints, the same ones highscores.css is written around:

   1. QUIRKS MODE. index.php emits no DOCTYPE, so a percentage height resolves
      against the viewport. Heights below are vh/clamp() or flex, never %,
      except inside the fixed overlay whose height is explicit.

   2. THE MOBILE LAYER. Below 900px mobile.css forces 13px on every
      #ContentColumn div/span/a/p, width:100% on search inputs and
      display:inline-block on labels, all !important. The media block at the
      foot disarms that inside .wm-shell and restates only what changes.
   ========================================================================== */

/* The map wants width: the right rail is hidden on this page only, the same
   choice the Compendium makes under the same Library menu, so the surface is
   ~980px instead of 790px. The left menu and the header stay: the page is
   still the site. */
body:has(.wm-shell) #ThemeboxesColumn { display: none; }
body:has(.wm-shell) #ContentColumn { margin-right: 15px; }

.wm-shell {
	--wm-ink: #33280f;
	--wm-brown: #5A2800;
	--wm-muted: #7a6a4c;
	--wm-faint: #8a7047;
	--wm-line: #d8c49a;
	--wm-gold: #9c7c43;
	--wm-gold-dark: #8a6f33;
	--wm-key-edge: #a8873a;
	--wm-paper: #fbf4e2;
	--wm-paper-2: #f2e6cb;
	--wm-channel: #efe6cc;
	--wm-link: #004294;
	--wm-outline: #1c1409;
	--wm-map: #0c120e;
	--wm-field: #fcf7ea;

	/* No surface of its own: the page sits on the theme's scroll, and the map
	   lives in one of the site's parchment tables (parchment.css). */
	margin: 0;
	color: var(--wm-ink);
	font-family: Verdana, Arial, sans-serif;
	font-size: 9pt;
	line-height: 1.4;
}
.wm-shell *, .wm-shell *::before, .wm-shell *::after { box-sizing: border-box; }
.wm-shell p { margin: 0; }
.wm-shell button, .wm-shell input, .wm-shell select { font-family: inherit; }
.wm-shell button { cursor: pointer; }
/* basic.css sets a global :focus { outline: dotted 1px } that fires on mouse
   click too. :focus-visible cannot beat it, so the mouse case is switched off
   and a gold ring is drawn for the keyboard. */
.wm-shell :focus:not(:focus-visible) { outline: none; }
.wm-shell :focus-visible { outline: 2px solid #d9b34e; outline-offset: 1px; }
.wm-sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* The script hides parts with the hidden attribute; several of them carry a
   display: flex rule of higher specificity, so this one has to win outright. */
.wm-shell [hidden] { display: none !important; }

/* ── The key ─────────────────────────────────────────────────────────────
   Every control is the Highscores key: parchment face, gold edge, a lit top
   line and a soft drop. Pressed IN (checked, current, active) it goes gold,
   the highlight moves to the bottom and the label shifts a pixel down. */
.wm-key,
.wm-layer,
.wm-select,
.wm-pin,
.wm-card-actions button,
.wm-card-actions a,
.wm-floor button,
.wm-zoom button,
.wm-close {
	border: 1px solid var(--wm-key-edge);
	background: #f3e6c6;
	background: linear-gradient(to bottom, #fdf6dc, #ecdcb6);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 0 rgba(90, 66, 26, .12), 0 1px 1px rgba(90, 66, 26, .22);
	color: var(--wm-brown);
	font-family: Verdana, Arial, sans-serif;
	font-size: 9pt;
	font-weight: bold;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color .12s ease, box-shadow .12s ease;
}
.wm-key:hover, .wm-layer:hover, .wm-select:hover, .wm-pin:hover,
.wm-card-actions button:hover, .wm-card-actions a:hover,
.wm-floor button:hover:not(:disabled), .wm-zoom button:hover, .wm-close:hover {
	background: linear-gradient(to bottom, #fffbe9, #f2e5c3);
	border-color: var(--wm-gold-dark);
	color: var(--wm-brown);
	text-decoration: none;
}
.wm-key:active, .wm-card-actions button:active, .wm-card-actions a:active,
.wm-floor button:active:not(:disabled), .wm-zoom button:active, .wm-close:active {
	box-shadow: inset 0 1px 3px rgba(90, 66, 26, .4);
}
/* Pressed: the gold key. Shared by a checked layer, a pinned card and the
   towns chooser while it points somewhere. */
.wm-layer:has(input:checked),
.wm-card-actions button.is-on,
.wm-select.is-current {
	border-color: var(--wm-gold-dark);
	background: #e8c257;
	background: linear-gradient(to bottom, #d9b34e, #f7e08c);
	box-shadow: inset 0 1px 3px rgba(90, 66, 26, .35);
	color: #4a3410;
}
.wm-key { padding: 3px 8px 4px; }

/* ── The tool line ───────────────────────────────────────────────────────
   ONE line on parchment, the Highscores navigation strip:

     [🔍 Find a creature or NPC      ] [✓ NPCs 791] [  Monsters 913] [Towns v] [Expand] [⛶] */
.wm-bar {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
	padding: 7px 8px;
	background: #d4c0a1;
}

/* The search box is a channel cut INTO the parchment — the same construction
   as the champion's portrait well and the Loyalty bar's track — so it reads
   as a place to type rather than a key to press. */
.wm-search { position: relative; flex: 1 1 220px; min-width: 0; }
.wm-search-field {
	display: flex; align-items: center; gap: 7px;
	height: 28px; padding: 0 9px;
	border: 1px solid var(--wm-key-edge);
	background: var(--wm-field);
	box-shadow: inset 0 1px 2px rgba(90, 66, 26, .16);
	transition: border-color .12s ease, box-shadow .12s ease;
}
.wm-search-field:focus-within { border-color: var(--wm-gold-dark); box-shadow: inset 0 1px 2px rgba(90, 66, 26, .16), 0 0 0 3px rgba(217, 179, 78, .35); }
.wm-search-field svg { flex: 0 0 auto; width: 15px; height: 15px; color: var(--wm-gold-dark); }
.wm-search-field input {
	flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0;
	background: none; color: var(--wm-brown); font-size: 10pt;
}
.wm-search-field input::placeholder { color: #9a8660; opacity: 1; }
.wm-search-field input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Results drop as a parchment sheet with a brown edge; rows are the Tibia
   table's two-tone idea, one hairline apart. */
.wm-results {
	position: absolute; z-index: 30; top: calc(100% + 3px); left: 0; right: 0;
	max-height: 320px; overflow-y: auto;
	border: 1px solid var(--wm-gold-dark);
	background: #fdf8ec;
	box-shadow: 0 3px 8px rgba(40, 25, 5, .35);
}
.wm-hit {
	display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: center;
	width: 100%; padding: 4px 7px;
	border: 0; border-bottom: 1px solid #ecdcb6;
	background: none; color: var(--wm-brown); font-size: 9pt; text-align: left;
}
.wm-hit:last-child { border-bottom: 0; }
.wm-hit:hover, .wm-hit.is-active { background: #e8d9b4; }
.wm-hit-art {
	display: grid; place-items: center; width: 34px; height: 34px;
	border: 1px solid var(--wm-line); background: var(--wm-channel);
}
.wm-hit b { display: block; font-size: 9pt; font-weight: bold; line-height: 1.25; }
.wm-hit small { display: block; color: var(--wm-muted); font-size: 8pt; }
.wm-results-empty { padding: 8px 10px; color: var(--wm-muted); font-size: 9pt; }
.wm-thumb { display: inline-block; background-repeat: no-repeat; }

/* Layers are keys with a small box in them, the way a Tibia option is a
   checkbox on parchment; the whole key goes gold when the layer is on. */
.wm-layers { display: flex; gap: 4px; }
.wm-layer {
	position: relative; display: inline-flex; align-items: center; gap: 6px;
	height: 28px; padding: 0 9px 0 8px;
	user-select: none; -webkit-user-select: none;
}
.wm-layer input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.wm-layer::before {
	content: ""; width: 11px; height: 11px;
	border: 1px solid var(--wm-gold-dark);
	background: var(--wm-paper);
	box-shadow: inset 0 1px 2px rgba(90, 66, 26, .3);
}
.wm-layer:has(input:checked)::before {
	background: #fdf6dc url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2l2.2 2.2L8.2 3' fill='none' stroke='%234a3410' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 9px;
}
.wm-layer:has(input:focus-visible) { outline: 2px solid #d9b34e; outline-offset: 1px; }
.wm-layer small { color: var(--wm-faint); font-size: 8pt; font-weight: normal; }
.wm-layer:has(input:checked) small { color: #6a5424; }

/* The towns chooser: `appearance: none` so it wears the key instead of the OS
   widget, with its own caret drawn inline. Copied from .hs-nav-select. */
.wm-select {
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	max-width: 100%; height: 28px; padding: 0 22px 0 9px;
	background-color: #f3e6c6;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M0 0h9L4.5 6z' fill='%235A2800'/%3E%3C/svg%3E"),
	                  linear-gradient(to bottom, #fdf6dc, #ecdcb6);
	background-repeat: no-repeat, repeat;
	background-position: right 7px center, 0 0;
}
.wm-select:hover {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M0 0h9L4.5 6z' fill='%235A2800'/%3E%3C/svg%3E"),
	                  linear-gradient(to bottom, #fffbe9, #f2e5c3);
}
.wm-towns { flex: 0 1 168px; min-width: 0; }
.wm-towns .wm-select { width: 100%; }
.wm-select option { background: #fdf8ec; color: var(--wm-brown); font-weight: normal; }

/* Expand is the site's green button — the sbutton_green sprite every form on
   this site submits with, drawn in CSS so it can hold an icon and stretch:
   green stone, black edge, gold letters with the eight-way black outline that
   .BigButtonText uses. */
.wm-expand {
	display: inline-flex; align-items: center; gap: 5px;
	height: 28px; padding: 0 12px 0 10px;
	border: 1px solid #14210f;
	background: #3f6a26;
	background: linear-gradient(to bottom, #7aa54a 0%, #4b7a2c 46%, #33591f 54%, #2a4a1b 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 1px 1px rgba(0, 0, 0, .35);
	color: #ffd18c; font-size: 11px; font-weight: bold; line-height: 1; white-space: nowrap;
	text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, 1px 0 0 #000,
	             1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000;
}
.wm-expand svg { width: 14px; height: 14px; filter: drop-shadow(0 1px 0 #000); }
.wm-expand:hover {
	background: linear-gradient(to bottom, #8cb85a 0%, #588c36 46%, #3d6826 54%, #325722 100%);
	color: #ffe0a8;
}
.wm-expand:active { box-shadow: inset 0 2px 3px rgba(0, 0, 0, .45); }
.wm-iconbtn { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; }
.wm-iconbtn svg { width: 15px; height: 15px; }

/* ── Pins ─────────────────────────────────────────────────────────────── */
.wm-pins {
	display: flex; flex-wrap: wrap; gap: 5px;
	padding: 6px 8px;
	background: #f1e0c6;
}
.wm-pin { display: inline-flex; align-items: stretch; padding: 0; }
.wm-pin-go {
	display: inline-flex; align-items: center; gap: 6px;
	height: 24px; padding: 0 8px 0 7px; border: 0; background: none;
	color: var(--wm-brown); font-size: 9pt; font-weight: bold; white-space: nowrap;
}
/* The pin's colour, as a swatch with a dark edge — the same colour the marker
   wears on the map, so the chip and the pin are visibly one thing. */
.wm-pin-go::before { content: ""; width: 9px; height: 9px; border: 1px solid rgba(0, 0, 0, .5); background: var(--pin, #d9b34e); }
.wm-pin-go small { color: var(--wm-faint); font-size: 8pt; font-weight: normal; }
.wm-pin-remove {
	width: 24px; padding: 0; border: 0; border-left: 1px solid var(--wm-line);
	background: none; color: var(--wm-gold-dark); font-size: 14px; font-weight: bold; line-height: 1;
}
.wm-pin-remove:hover { background: rgba(90, 66, 26, .08); color: #a2402f; }

/* ── The plaque and the map ──────────────────────────────────────────────
   Black outline, gold bevel, and the map set into it. Every value is the
   champion banner's (.hs-champ), which took it from the Achievement showcase
   and the Loyalty bar: if that plaque is ever retuned, retune this with it. */
.wm-frame {
	padding: 3px;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	background: #d0941c;
	background: linear-gradient(to bottom, #fcf55c, #d0941c);
}
.wm-stage {
	position: relative;
	height: clamp(440px, 70vh, 780px);
	overflow: hidden;
	border: 1px solid #5F4D41;
	background: var(--wm-map);
	cursor: grab; touch-action: none;
	user-select: none; -webkit-user-select: none;
}
.wm-stage.is-dragging { cursor: grabbing; }
/* The canvas is sized by CSS alone; the script sets only its backing store.
   A pixel width in its style leaked the expanded size into the theme's table
   layout and stretched the whole page after collapsing. */
.wm-stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.wm-stage:focus-visible { outline: 2px solid #d9b34e; outline-offset: -2px; }

/* On-map controls: stacks of keys with a black outline, so they hold their
   own on the dark ground the way the client's minimap buttons do. */
.wm-floor, .wm-zoom {
	position: absolute; display: flex; flex-direction: column;
	border: 1px solid var(--wm-outline);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.wm-floor { top: 10px; right: 10px; }
.wm-zoom { right: 10px; bottom: 10px; }
.wm-floor button, .wm-zoom button { display: grid; place-items: center; width: 34px; height: 28px; padding: 0; }
.wm-floor > * + *, .wm-zoom > * + * { border-top: 0; }
.wm-floor button svg, .wm-zoom button svg { width: 16px; height: 16px; }
.wm-floor button:disabled { background: #e6d6b3; color: #b7a27a; cursor: default; box-shadow: none; }
.wm-floor-label {
	display: flex; flex-direction: column; align-items: center;
	padding: 3px 4px 4px;
	border: 1px solid var(--wm-key-edge);
	background: var(--wm-channel);
	box-shadow: inset 0 1px 3px rgba(90, 66, 26, .28);
	color: var(--wm-brown); line-height: 1.1;
}
.wm-floor-label b { font-size: 15px; font-weight: bold; font-variant-numeric: tabular-nums; }
.wm-floor-label small { color: var(--wm-faint); font-size: 7px; font-weight: bold; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; }
.wm-coords {
	position: absolute; left: 10px; bottom: 10px;
	padding: 2px 7px;
	border: 1px solid var(--wm-outline);
	background: var(--wm-paper);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
	color: var(--wm-brown); font-size: 10px; line-height: 16px; font-variant-numeric: tabular-nums;
	pointer-events: none;
}
.wm-coords:empty { display: none; }
.wm-tip {
	position: absolute; z-index: 5;
	padding: 2px 7px;
	border: 1px solid var(--wm-outline);
	background: var(--wm-paper);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
	color: var(--wm-brown); font-size: 10px; font-weight: bold; line-height: 16px; white-space: nowrap;
	pointer-events: none;
	transform: translate(-50%, calc(-100% - 12px));
}

/* The creature card: a small plaque face. The sprite sits in a channel, the
   name is bold brown, the actions are keys. */
.wm-card {
	position: absolute; z-index: 6; top: 10px; left: 10px;
	width: min(324px, calc(100% - 20px));
	padding: 8px 8px 7px;
	border: 1px solid var(--wm-gold-dark);
	outline: 1px solid var(--wm-outline);
	background: #f6ecd2;
	background: linear-gradient(to bottom, #fdf6dc, #ecdcb6);
	box-shadow: inset 0 1px 3px rgba(90, 66, 26, .28), 0 2px 6px rgba(0, 0, 0, .5);
}
.wm-card-head { display: grid; grid-template-columns: 38px minmax(0, 1fr) 22px; gap: 8px; align-items: center; }
.wm-card-art {
	display: grid; place-items: center; width: 38px; height: 38px;
	border: 1px solid var(--wm-gold-dark); background: var(--wm-channel);
	box-shadow: inset 0 1px 3px rgba(90, 66, 26, .28);
}
.wm-card-head b { display: block; color: var(--wm-brown); font-size: 10pt; font-weight: bold; line-height: 1.2; }
.wm-card-head small { display: block; color: #6b5b41; font-size: 8pt; font-variant-numeric: tabular-nums; }
.wm-card-close { width: 22px; height: 22px; padding: 0; border: 0; background: none; color: var(--wm-gold-dark); font-size: 16px; font-weight: bold; line-height: 1; }
.wm-card-close:hover { color: #a2402f; }
.wm-card-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.wm-card-actions button, .wm-card-actions a { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; }
.wm-card-note { align-self: center; color: var(--wm-muted); font-size: 8pt; }

/* Loading, on the dark ground: the theme's gold letters with the black
   outline, and a small gold ring turning. */
.wm-loading {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
	color: #ffd18c; font-size: 11px; font-weight: bold;
	text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, 1px 0 0 #000,
	             1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000;
}
.wm-loading span { width: 20px; height: 20px; border: 2px solid rgba(255, 209, 140, .3); border-top-color: #ffd18c; border-radius: 50%; animation: wm-spin .8s linear infinite; }
.wm-loading b { font-size: 12px; }
.wm-loading small { font-size: 10px; font-weight: normal; }
@keyframes wm-spin { to { transform: rotate(360deg); } }

/* ── Foot ─────────────────────────────────────────────────────────────────
   The Highscores pager strip: how to drive the map on the left, the way to
   the Compendium on the right. */
.wm-foot {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 6px 8px;
	background: #d4c0a1;
	color: var(--wm-muted); font-size: 10px;
}
.wm-foot kbd {
	display: inline-block; padding: 0 4px;
	border: 1px solid var(--wm-key-edge);
	background: linear-gradient(to bottom, #fdf6dc, #ecdcb6);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 1px 0 rgba(90, 66, 26, .3);
	color: var(--wm-brown); font-family: Verdana, Arial, sans-serif; font-size: 9px; font-weight: bold; line-height: 14px;
}
.wm-foot a { color: var(--wm-link); font-size: 11px; font-weight: bold; white-space: nowrap; }
.wm-empty { padding: 28px 16px; color: var(--wm-brown); font-size: 10pt; text-align: center; }

/* ── Expand ───────────────────────────────────────────────────────────────
   The page dims and the map comes forward in one of the site's own content
   boxes: the dark side rails, the green stone caption bar with the Martel
   headline, the four riveted corners, the brown inner border and parchment.
   The same markup as on the page; only the box around it changes. */
.wm-panel-head, .wm-corner { display: none; }
/* The table's own caption gives way to the box's green bar. */
.wm-map.is-expanded .wm-cap, .wm-map.is-fullscreen .wm-cap { display: none; }
.wm-map.is-expanded .wm-inner, .wm-map.is-fullscreen .wm-inner { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; border: 0; background: none; }
.wm-map.is-expanded {
	position: fixed; inset: 0; z-index: 5000;
	display: flex; align-items: center; justify-content: center;
	margin: 0; padding: 24px;
	background: rgba(8, 12, 9, .7);
	backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
	animation: wm-dim .2s ease-out;
}
.wm-map.is-expanded .wm-panel {
	position: relative;
	display: flex; flex-direction: column;
	width: min(1680px, 100%); height: 100%;
	border-left: 2px solid #3a3738; border-right: 2px solid #3a3738;
	background: #debb9d;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
	animation: wm-rise .22s cubic-bezier(.2, .8, .2, 1);
}
/* border-1.gif is the theme's 6px riveted rail above and below every box. */
.wm-map.is-expanded .wm-panel::before, .wm-map.is-expanded .wm-panel::after { content: ""; flex: 0 0 auto; height: 6px; background: url(images/content/border-1.gif) repeat-x; }
.wm-map.is-expanded .wm-panel-head {
	display: flex; align-items: center; gap: 10px;
	flex: 0 0 auto; height: 24px; padding: 0 6px 0 8px;
	background: #2f4a2a url(images/content/title-background-green.gif) repeat-x;
}
.wm-panel-head b { color: #f0d1a4; font: 500 19px/24px Martel, Georgia, serif; text-shadow: 1px 1px 0 #162619; white-space: nowrap; }
.wm-panel-head small { color: #cfe0b8; font-size: 8pt; text-shadow: 1px 1px 0 #162619; white-space: nowrap; }
.wm-panel-head kbd { display: inline-block; padding: 0 4px; border: 1px solid #1c1409; background: linear-gradient(to bottom, #fdf6dc, #ecdcb6); color: var(--wm-brown); font-family: Verdana, Arial, sans-serif; font-size: 9px; font-weight: bold; line-height: 13px; text-shadow: none; }
.wm-close { display: grid; place-items: center; flex: 0 0 auto; width: 22px; height: 18px; margin-left: auto; padding: 0; }
.wm-close svg { width: 11px; height: 11px; }
.wm-map.is-expanded .wm-corner { display: block; position: absolute; z-index: 50; width: 17px; height: 17px; background-repeat: no-repeat; }
.wm-corner-tl { top: -4px; left: -5px; background-image: url(images/content/corner-tl.gif); }
.wm-corner-tr { top: -4px; right: -5px; background-image: url(images/content/corner-tr.gif); }
.wm-corner-bl { bottom: -4px; left: -6px; background-image: url(images/content/corner-bl.gif); }
.wm-corner-br { bottom: -4px; right: -6px; background-image: url(images/content/corner-br.gif); }
/* The box's inside: the brown Border_2 line, then the parchment scroll. */
.wm-map.is-expanded .wm-body {
	display: flex; flex-direction: column;
	flex: 1 1 auto; min-height: 0;
	margin: 4px; padding: 5px;
	border: 1px solid #793d03;
	background: #FFF2db url(images/content/scroll.gif);
}
.wm-map.is-expanded .wm-bar, .wm-map.is-expanded .wm-pins, .wm-map.is-expanded .wm-foot { flex: 0 0 auto; }
.wm-map.is-expanded .wm-bar { border: 1px solid var(--wm-gold); border-bottom-width: 2px; }
.wm-map.is-expanded .wm-pins { border-left: 1px solid var(--wm-gold); border-right: 1px solid var(--wm-gold); }
.wm-map.is-expanded .wm-frame { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.wm-map.is-expanded .wm-stage { flex: 1 1 auto; height: auto; min-height: 0; }
.wm-map.is-expanded .wm-foot { border: 1px solid var(--wm-gold); border-top: 0; }
.wm-map.is-expanded .wm-expand { display: none; }
body.wm-expanded { overflow: hidden; }
@keyframes wm-dim { from { opacity: 0; } to { opacity: 1; } }
@keyframes wm-rise { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }

/* The browser's own full screen (the icon), taken by .wm-map. On parchment,
   the map filling what is left. */
.wm-map.is-fullscreen { display: flex; flex-direction: column; padding: 6px; background: #FFF2db url(images/content/scroll.gif); }
.wm-map.is-fullscreen .wm-panel { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; border: 1px solid var(--wm-gold); margin: 0; }
.wm-map.is-fullscreen .wm-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; border: 0; padding: 0; background: none; }
.wm-map.is-fullscreen .wm-bar, .wm-map.is-fullscreen .wm-pins, .wm-map.is-fullscreen .wm-foot { flex: 0 0 auto; }
.wm-map.is-fullscreen .wm-frame { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.wm-map.is-fullscreen .wm-stage { flex: 1 1 auto; height: auto; min-height: 0; }
.wm-map.is-fullscreen.is-expanded { padding: 0; background: rgba(8, 12, 9, .7); }
.wm-map.is-fullscreen.is-expanded .wm-panel { border: 0; border-left: 2px solid #3a3738; border-right: 2px solid #3a3738; }

/* ── Mobile ──────────────────────────────────────────────────────────────
   The first rules disarm the mobile layer inside the shell; everything after
   them is ordinary CSS again, restating only what changes. */
@media (max-width: 900px) {
	#ContentColumn .wm-shell * { font-size: inherit !important; line-height: inherit !important; }
	#ContentColumn .wm-shell { font-size: 12px !important; line-height: 1.4 !important; }
	#ContentColumn .wm-shell label { display: inline-flex !important; }
	/* (1,2,1) beats the label rule above, or the field shrinks to its text. */
	#ContentColumn .wm-shell label.wm-search-field { display: flex !important; }
	#ContentColumn .wm-shell input[type=search] { width: 100% !important; padding: 0 !important; }
	/* 16px stops iOS zooming the viewport when the chooser is focused. */
	#ContentColumn .wm-select { font-size: 16px !important; }
	#ContentColumn .wm-layer small, #ContentColumn .wm-hit small, #ContentColumn .wm-pin-go small,
	#ContentColumn .wm-card-head small, #ContentColumn .wm-card-note { font-size: 11px !important; }
	#ContentColumn .wm-expand { font-size: 11px !important; line-height: 1 !important; }
	#ContentColumn .wm-floor-label b { font-size: 15px !important; line-height: 1.1 !important; }
	#ContentColumn .wm-floor-label small { font-size: 7px !important; line-height: 1.1 !important; }
	#ContentColumn .wm-coords, #ContentColumn .wm-tip { font-size: 10px !important; line-height: 16px !important; }
	#ContentColumn .wm-card-head b { font-size: 13px !important; line-height: 1.2 !important; }
	#ContentColumn .wm-loading { font-size: 11px !important; }
	#ContentColumn .wm-loading small { font-size: 10px !important; }
	#ContentColumn .wm-foot, #ContentColumn .wm-foot span { font-size: 10px !important; }
	#ContentColumn .wm-foot a { font-size: 11px !important; }
	#ContentColumn .wm-foot kbd, #ContentColumn .wm-panel-head kbd { font-size: 9px !important; line-height: 14px !important; }
	#ContentColumn .wm-panel-head b { font-size: 18px !important; line-height: 24px !important; }
	#ContentColumn .wm-pin-remove { font-size: 14px !important; line-height: 1 !important; }
	#ContentColumn .wm-card-close { font-size: 16px !important; line-height: 1 !important; }

	.wm-bar { gap: 6px; padding: 6px; }
	.wm-search { flex-basis: 100%; }
	.wm-search-field { height: 32px; }
	.wm-layers { flex: 1 1 auto; }
	.wm-layer { flex: 1 1 0; justify-content: center; height: 32px; padding: 0 6px; }
	.wm-towns { flex: 1 1 auto; }
	.wm-select { height: 32px; padding: 0 21px 0 9px; }
	.wm-expand { height: 32px; }
	.wm-iconbtn { width: 32px; height: 32px; }
	.wm-stage { height: min(70vh, 600px); }
	.wm-floor, .wm-zoom { right: 8px; }
	.wm-floor { top: 8px; }
	.wm-zoom { bottom: 8px; }
	.wm-floor button, .wm-zoom button { width: 36px; height: 32px; }
	.wm-coords { left: 8px; bottom: 8px; }
	.wm-card { top: auto; right: 8px; bottom: 8px; left: 8px; width: auto; }
	.wm-foot-hint { display: none; }
	.wm-pin-go small { display: none; }
	.wm-map.is-expanded { padding: 0; }
	.wm-map.is-expanded .wm-panel { border-left: 0; border-right: 0; }
	.wm-map.is-expanded .wm-corner { display: none; }
	.wm-map.is-expanded .wm-body { margin: 3px; padding: 3px; }
	.wm-panel-head small { display: none; }
}