/* ==========================================================================
   WurmMaps — site theme (2026 redesign)
   --------------------------------------------------------------------------
   Every class is prefixed `wm-` so this file can be loaded next to the legacy
   stylesheets (app.css, custom-v208.css) without either one stepping on the
   other. Pages still built on the old classes opt in with WM_LEGACY
   (see /assets/layouts/header.php).

   THE FRAME
   The in-game window border used to need nine wrapper <div>s, negative margins
   and a fixed 80% width. It is now a single CSS `border-image`, built from the
   exact same pixels (see _tools/make_frames.py in the redesign bundle). Any
   element becomes an in-game window by adding one class:

       <section class="wm-panel"> ... </section>

   Because it is a real border, the panel is an ordinary block box: it sizes to
   its container, sits in grids and flex rows, nests, and never shifts the
   surrounding layout.

   Contents
     1. Fonts            6. Panels (the frame)     11. Tables
     2. Tokens           7. Buttons, chips, pips   12. Prose & changelog
     3. Base             8. Navigation             13. Footer
     4. Backdrop         9. Hero & atlas           14. Utilities
     5. Layout          10. Event feeds            15. Motion & print
   ========================================================================== */


/* 1. Fonts — self-hosted: the site CSP is `font-src 'self'` -------------- */

@font-face { font-family: "IM Fell English SC"; font-style: normal; font-weight: 400; font-display: swap;
	src: url("/assets/fonts/im-fell-english-sc-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IM Fell English"; font-style: normal; font-weight: 400; font-display: swap;
	src: url("/assets/fonts/im-fell-english-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IM Fell English"; font-style: italic; font-weight: 400; font-display: swap;
	src: url("/assets/fonts/im-fell-english-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 700; font-display: swap;   /* hero wordmark only */
	src: url("/assets/fonts/cinzel-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 400; font-display: swap;
	src: url("/assets/fonts/alegreya-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-style: italic; font-weight: 400; font-display: swap;
	src: url("/assets/fonts/alegreya-sans-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 500; font-display: swap;
	src: url("/assets/fonts/alegreya-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 700; font-display: swap;
	src: url("/assets/fonts/alegreya-sans-latin-700-normal.woff2") format("woff2"); }


/* 2. Tokens ---------------------------------------------------------------- */

:root {
	/* Timber — page, nav and footer */
	--wm-oak:        #1b140d;   /* charred oak: page base */
	--wm-walnut:     #261b12;   /* timber surfaces */
	--wm-walnut-2:   #33251a;   /* raised surfaces */
	--wm-walnut-3:   #4a3622;   /* buttons, hovers */

	/* Panels — the WurmMaps blue, carried over from the old site */
	--wm-deep:       #081018;   /* panel centre (darkest, behind text) */
	--wm-deep-2:     #101820;   /* panel edges (lighter) */
	/* Lighter at the edges, darkest through the middle where the text sits. */
	--wm-blue-fill:  linear-gradient(180deg, rgba(16, 24, 32, .94) 0%, rgba(8, 16, 24, .94) 33%, rgba(8, 16, 24, .94) 66%, rgba(16, 24, 32, .94) 100%);
	--wm-blue-solid: linear-gradient(180deg, #081018 0%, #102230 33%, #102230 66%, #081018 100%);   /* navbar, footer, menus, solid panels */

	/* Light — text and accents */
	--wm-parchment:  #f0ddb6;   /* body text */
	--wm-parchment-2:#c4ae89;   /* secondary text */
	--wm-lantern:    #f2c46d;   /* headings, focus, active */
	--wm-brass:      #c99a4e;   /* links, rules, borders */
	--wm-stone:      #a39d90;   /* muted, matches the frame's stone */
	--wm-slate:      #7fa3bd;   /* secondary, matches the blue frame corners */

	/* Signals */
	--wm-moss:       #8db860;   /* online, open, founded */
	--wm-amber:      #e9b949;   /* pending, spawned */
	--wm-ember:      #d9674a;   /* offline, cooldown, disbanded, PvP */

	/* Gods — sampled from the rite icons */
	--wm-fo:  #6fbf5a;
	--wm-lib: #c46ad0;
	--wm-mag: #e5813b;
	--wm-vyn: #5f93e6;

	/* Lines */
	--wm-line:        rgba(201, 154, 78, .26);
	--wm-line-strong: rgba(201, 154, 78, .55);
	--wm-inset:       rgba(0, 0, 0, .28);

	/* Type */
	--wm-font-display: "IM Fell English SC", "IM Fell English", Georgia, "Times New Roman", serif;
	--wm-font-title:   "IM Fell English", Georgia, "Times New Roman", serif;
	--wm-font-body:    "Alegreya Sans", "Segoe UI", system-ui, sans-serif;

	/* Scale (1.25, minor third-ish steps anchored on 17px body) */
	--wm-text-xs:  .875rem;
	--wm-text-sm:  .95rem;
	--wm-text-md:  1.0625rem;
	--wm-text-lg:  1.3rem;
	--wm-text-xl:  1.6rem;
	--wm-text-2xl: clamp(1.75rem, 1.2rem + 1.8vw, 2.45rem);
	--wm-text-hero: clamp(3.4rem, 1.6rem + 7vw, 7.25rem);

	/* Space */
	--wm-gap:      clamp(16px, 1.6vw, 24px);
	--wm-gutter:   16px;
	--wm-section:  clamp(48px, 7vw, 96px);
	--wm-nav-h:    68px;

	/* Frame */
	--wm-frame-gold: url("/assets/images/gridcontainer/frame-gold.png");
	--wm-frame-blue: url("/assets/images/gridcontainer/frame-blue.png");

	/* Hero scene. Swap for a larger image when one is ready (see notes). */
	--wm-scene: url("/assets/images/background.jpg");

	/* Wood grain: one inline SVG, no request. Stretched noise reads as grain. */
	--wm-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='720'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0035 0.11' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.032 0 0 0 0 0.015 0.9 0 0 0 -0.36'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

	color-scheme: dark;
}


/* 3. Base ------------------------------------------------------------------ */

:where(.wm:not(.wm--legacy)), :where(.wm:not(.wm--legacy)) :where(*, *::before, *::after) { box-sizing: border-box; }
/* Legacy pages (WM_LEGACY): only the new shell is border-box; page content keeps its own box model. */
.wm--legacy :is(.wm-nav, .wm-footer, .wm-skip), .wm--legacy :is(.wm-nav, .wm-footer) :is(*, *::before, *::after) { box-sizing: border-box; }

html:has(body.wm:not(.wm--legacy)) { font-size: 17px; scroll-behavior: smooth; scroll-padding-top: calc(var(--wm-nav-h) + 16px); }

body.wm:not(.wm--legacy) {
	position: relative;
	margin: 0;
	min-height: 100vh;
	/* Column: the main area grows, so on short pages the footer sits on the window's bottom edge. */
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
	font-family: var(--wm-font-body);
	font-size: 18px;
	line-height: 1.55;
	color: var(--wm-parchment);
	background-color: var(--wm-oak);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-variant-numeric: lining-nums;
	scrollbar-color: var(--wm-brass) var(--wm-oak);
}

:where(.wm:not(.wm--legacy)) img { max-width: 100%; height: auto; image-rendering: auto; }
:where(.wm) img.wm-pixel { image-rendering: pixelated; }   /* game icons at 1:1 / 2:1 */

:where(.wm:not(.wm--legacy)) :is(h1, h2, h3, h4) { margin: 0; font-weight: 400; line-height: 1.15; color: var(--wm-lantern); text-wrap: balance; }
:where(.wm:not(.wm--legacy)) h2 { font-family: var(--wm-font-display); font-size: var(--wm-text-2xl); letter-spacing: .01em; }
:where(.wm:not(.wm--legacy)) h3 { font-family: var(--wm-font-title);   font-size: var(--wm-text-xl); }
:where(.wm:not(.wm--legacy)) h4 { font-family: var(--wm-font-body);    font-size: var(--wm-text-md); font-weight: 700; color: var(--wm-parchment); }
:where(.wm:not(.wm--legacy)) p  { margin: 0; text-wrap: pretty; }
:where(.wm:not(.wm--legacy)) p + p { margin-top: .85em; }

:where(.wm:not(.wm--legacy)) a { color: var(--wm-lantern); text-decoration-color: color-mix(in srgb, var(--wm-lantern) 45%, transparent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
:where(.wm:not(.wm--legacy)) a:hover { color: #ffe0a0; text-decoration-color: currentColor; }

.wm :focus-visible { outline: 2px solid var(--wm-lantern); outline-offset: 3px; border-radius: 1px; }

.wm ::selection { background: rgba(242, 196, 109, .35); color: #fff6e3; }

.wm-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wm-skip { position: absolute; left: 16px; top: -100px; z-index: 1000; padding: 10px 16px; background: var(--wm-lantern); color: var(--wm-oak) !important; font-weight: 700; text-decoration: none; }
.wm-skip:focus { top: 12px; }


/* 4. Backdrop -------------------------------------------------------------
   The landscape sits behind the top of the page and dissolves into timber,
   so the hero, the first panels and the nav all share one continuous scene
   instead of stacking boxes on a fixed wallpaper.                         */

body.wm::before,
body.wm::after { content: ""; position: absolute; inset: 0 0 auto 0; pointer-events: none; z-index: -1; }

body.wm::before {                           /* scene */
	height: max(118vh, 900px);
	background:
		radial-gradient(120% 70% at 18% 38%, rgba(27, 20, 13, .82) 0%, rgba(27, 20, 13, .35) 55%, rgba(27, 20, 13, 0) 80%),
		linear-gradient(180deg, rgba(27, 20, 13, .25) 0%, rgba(27, 20, 13, .15) 30%, rgba(27, 20, 13, .7) 62%, var(--wm-oak) 100%),
		var(--wm-scene) center 30% / cover no-repeat;
}

body.wm::after {                            /* timber wall: grain + log seams, full page */
	inset: 0;
	z-index: -2;
	background:
		linear-gradient(90deg, rgba(10, 7, 4, .5), transparent 22%, transparent 78%, rgba(10, 7, 4, .5)),
		radial-gradient(90% 40% at 50% 100%, rgba(160, 95, 35, .14), transparent 70%),
		repeating-linear-gradient(180deg, transparent 0 178px, rgba(0, 0, 0, .32) 178px 180px, rgba(255, 222, 170, .035) 180px 181px, transparent 181px 182px),
		var(--wm-grain) 0 0 / 720px 720px,
		#271c12;
}

body.wm.wm--no-scene::before { display: none; }  /* opt out (e.g. full-screen map pages) */


/* 5. Layout ---------------------------------------------------------------- */

.wm-main { display: block; position: relative; flex: 1 0 auto; padding-bottom: var(--wm-section); }

.wm-container         { width: min(100% - 2 * var(--wm-gutter), 1240px); margin-inline: auto; }
.wm-container--wide   { width: min(100% - 2 * var(--wm-gutter), 1680px); }
.wm-container--prose  { width: min(100% - 2 * var(--wm-gutter), 780px); }
.wm-container--full   { width: 100%; }

.wm-section { margin-top: var(--wm-section); }
.wm-section--tight { margin-top: calc(var(--wm-section) * .5); }

/* Unframed section heading: sits directly on the backdrop, so panels below
   read as content rather than every heading being yet another box.        */
.wm-section__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 24px; margin-bottom: calc(var(--wm-gap) + 4px); }
.wm-section__head h2 { text-shadow: 0 2px 14px rgba(0, 0, 0, .7); }
.wm-section__lead { color: var(--wm-parchment-2); max-width: 62ch; }

/* Auto-fitting grid. Tune per use with --wm-min. */
.wm-grid { display: grid; gap: var(--wm-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--wm-min, 340px)), 1fr)); align-items: start; }
.wm-grid--stretch { align-items: stretch; }
.wm-span-full { grid-column: 1 / -1; }
@media (min-width: 820px) { .wm-span-2 { grid-column: span 2; } }
/* Two independent column stacks (panels of different heights pack without gaps). */
.wm-cols { display: grid; gap: var(--wm-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.wm-col  { display: grid; gap: var(--wm-gap); min-width: 0; }
@media (max-width: 979px) { .wm-cols { grid-template-columns: minmax(0, 1fr); } }

.wm-stack > * + * { margin-top: var(--wm-stack, 1rem); }
.wm-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wm-row-gap, 12px); }

/* Document layout: sticky index + long readout. Used by patch notes, and by
   any page that is "lots of text" (guides, API docs, policies).            */
.wm-doc { display: grid; gap: var(--wm-gap) calc(var(--wm-gap) * 1.5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) {
	.wm-doc { grid-template-columns: 210px minmax(0, 1fr); }
	.wm-doc__index { position: sticky; top: calc(var(--wm-nav-h) + 24px); align-self: start; max-height: calc(100vh - var(--wm-nav-h) - 48px); overflow: auto; }
}
.wm-doc__index h3 { font-size: var(--wm-text-lg); margin-bottom: .5rem; }
.wm-doc__index ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--wm-line); }
.wm-doc__index a { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0 4px 14px; margin-left: -1px; border-left: 2px solid transparent; color: var(--wm-parchment-2); text-decoration: none; font-size: var(--wm-text-sm); }
.wm-doc__index a:hover { color: var(--wm-lantern); border-left-color: var(--wm-brass); }
.wm-doc__index time { color: var(--wm-stone); font-variant-numeric: tabular-nums; }
@media (max-width: 979px) {
	.wm-doc__index ol { display: flex; flex-wrap: wrap; gap: 6px; border: 0; }
	.wm-doc__index a { padding: 3px 10px; border: 1px solid var(--wm-line); margin: 0; }
	.wm-doc__index time { display: none; }
}


/* 6. Panels — the in-game window frame ------------------------------------
   border-image slices the 692px sprite at 32px: 32px corners, 628px seamless
   edge tiles. The border itself is 12px (the visible frame); the image is
   drawn 32px wide so the corner triangles overlap into the padding, exactly
   like the game.                                                          */

.wm-panel {
	--wm-frame: var(--wm-frame-gold);
	--wm-fill: var(--wm-blue-fill);
	--wm-pad: clamp(18px, 2vw, 28px);

	position: relative;
	min-width: 0;
	border: 12px solid transparent;
	border-image: var(--wm-frame) 32 / 32px / 0 round;
	background: var(--wm-fill) padding-box;
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	padding: var(--wm-pad);
	color: var(--wm-parchment);
	box-shadow: 0 22px 40px -22px rgba(0, 0, 0, .85);
}

.wm-panel--blue   { --wm-frame: var(--wm-frame-blue); }
.wm-panel--solid  { --wm-fill: var(--wm-blue-solid); }  /* long reading: fully opaque */
.wm-panel--flush  { --wm-pad: 0; }                                                                     /* maps, canvases, tables */
.wm-panel--flush > .wm-panel__head { padding: 14px clamp(18px, 2vw, 28px); margin: 0; }
.wm-panel--compact { --wm-pad: 14px 16px; }

/* Head: title on the left, optional controls/meta on the right. */
.wm-panel__head {
	display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px;
	margin: 0 0 16px; padding-bottom: 10px;
	border-bottom: 1px solid var(--wm-line);
	box-shadow: 0 1px 0 rgba(0, 0, 0, .55);   /* carved: light line over a dark one */
}
.wm-panel__title.wm-panel__title--lg { font-size: var(--wm-text-xl); }
.wm-panel__title { font-family: var(--wm-font-title); font-size: var(--wm-text-lg); color: var(--wm-lantern); text-shadow: 0 1px 0 #000, 0 0 18px rgba(0, 0, 0, .6); }
.wm-panel__meta  { font-size: var(--wm-text-sm); color: var(--wm-parchment-2); }
.wm-panel__foot  { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--wm-line); font-size: var(--wm-text-sm); color: var(--wm-parchment-2); }

/* Panels that sit edge to edge (e.g. a toolbar on top of a map) can share
   one frame: wrap them in .wm-panel and separate with .wm-panel__split.    */
.wm-panel__split { height: 0; margin: var(--wm-pad) calc(var(--wm-pad) * -1); border-top: 1px solid var(--wm-line); box-shadow: 0 1px 0 rgba(0, 0, 0, .55); }

/* Recessed well inside a panel (inputs, chart areas, code). */
.wm-well { background: var(--wm-inset); border: 1px solid rgba(0, 0, 0, .45); box-shadow: inset 0 2px 10px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 235, 200, .04); padding: 12px; }


/* 7. Buttons, chips, status ------------------------------------------------ */

.wm-btn {
	--wm-btn-bg: linear-gradient(180deg, #4d3b28, #31241a);
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 42px; padding: 8px 18px;
	font: 500 var(--wm-text-md) / 1.1 var(--wm-font-body);
	color: var(--wm-parchment) !important; text-decoration: none !important;
	background: var(--wm-btn-bg);
	border: 1px solid #6e5637;
	box-shadow: inset 0 1px 0 rgba(255, 228, 175, .16), inset 0 -2px 0 rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .4);
	cursor: pointer;
	transition: border-color .15s, color .15s, background .15s;
}
.wm-btn:hover { border-color: var(--wm-lantern); color: var(--wm-lantern) !important; }
.wm-btn:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5); }
.wm-btn svg { width: 18px; height: 18px; flex: none; }

.wm-btn--primary {
	--wm-btn-bg: linear-gradient(180deg, #ecc274, #c08f3f 55%, #a87931);
	color: #2a1b0c !important; border-color: #f6d898;
	box-shadow: inset 0 1px 0 rgba(255, 248, 225, .6), inset 0 -2px 0 rgba(90, 55, 15, .45), 0 3px 10px rgba(0, 0, 0, .45);
	font-weight: 700;
}
.wm-btn--primary:hover { --wm-btn-bg: linear-gradient(180deg, #f6d184, #cf9d4a 55%, #b5843a); color: #1f1407 !important; border-color: #fff0c8; }

.wm-btn--ghost { --wm-btn-bg: rgba(27, 20, 13, .45); border-color: var(--wm-line-strong); }

/* Chip: compact link/label. */
.wm-chip {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 16px; min-height: 42px; font-size: 1.1rem; font-weight: 700;
	color: var(--wm-parchment) !important; text-decoration: none !important;
	background: rgba(0, 0, 0, .25); border: 1px solid var(--wm-line);
}
a.wm-chip:hover { border-color: var(--wm-lantern); color: var(--wm-lantern) !important; background: rgba(242, 196, 109, .07); }
.wm-chip small { color: var(--wm-parchment-2); font-size: var(--wm-text-sm); font-weight: 500; }

/* Tag: tiny inline classifier. */
.wm-tag { display: inline-block; padding: 0 6px; font-size: .8rem; font-weight: 700; line-height: 1.5; letter-spacing: .02em; color: var(--wm-ember); border: 1px solid color-mix(in srgb, var(--wm-ember) 55%, transparent); background: color-mix(in srgb, var(--wm-ember) 10%, transparent); }

/* Status pip: a lantern that is lit, out, or unknown. */
.wm-pip { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--wm-stone); opacity: .55; flex: none; }
.wm-pip[data-state="online"]  { background: var(--wm-moss);  opacity: 1; box-shadow: 0 0 0 2px rgba(141, 184, 96, .18), 0 0 8px rgba(141, 184, 96, .7); }
.wm-pip[data-state="offline"] { background: var(--wm-ember); opacity: 1; }

/* Status word with tone (Open / Spawned / Cooldown, Online / Offline). */
.wm-status { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: var(--wm-text-sm); }
.wm-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.wm-status[data-tone="good"] { color: var(--wm-moss); }
.wm-status[data-tone="warn"] { color: var(--wm-amber); }
.wm-status[data-tone="bad"]  { color: var(--wm-ember); }

/* Notice strip. */
.wm-notice { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; font-size: var(--wm-text-sm); color: var(--wm-parchment); background: rgba(27, 20, 13, .65); border: 1px solid var(--wm-line-strong); border-left: 3px solid var(--wm-lantern); }
.wm-notice svg { width: 18px; height: 18px; color: var(--wm-lantern); flex: none; }
.wm-notice--alert { padding: 10px 18px; font-size: var(--wm-text-md); font-weight: 500; color: #ffe6dc; background: rgba(140, 22, 16, .72); border: 1px solid #e0594a; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 6px 18px rgba(0, 0, 0, .5); }
.wm-notice--alert strong { color: #fff; }
.wm-notice--alert svg { color: #ff9b85; }

/* Form controls: themed on new pages. On WM_LEGACY pages the content keeps its own controls. */
:where(body.wm:not(.wm--legacy)) select, :where(body.wm:not(.wm--legacy)) input[type="text"], :where(body.wm:not(.wm--legacy)) input[type="search"], :where(body.wm:not(.wm--legacy)) input[type="email"], :where(body.wm:not(.wm--legacy)) input[type="password"], :where(body.wm:not(.wm--legacy)) input[type="number"], :where(body.wm:not(.wm--legacy)) textarea {
	font: inherit; font-size: var(--wm-text-sm); color: var(--wm-parchment);
	background: rgba(0, 0, 0, .35); border: 1px solid #5d4a33; border-radius: 0;
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5);
	padding: 7px 10px; min-height: 36px;
}
:where(body.wm:not(.wm--legacy)) select { appearance: none; padding-right: 32px; cursor: pointer; border-color: var(--wm-brass);
	/* Opaque colour first: browsers that draw their own list take its colours from the <select>. */
	background: var(--wm-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23f2c46d' stroke-width='1.7'/%3E%3C/svg%3E") right 11px center / 12px 8px no-repeat; }
:where(body.wm:not(.wm--legacy)) select:hover, :where(body.wm:not(.wm--legacy)) select:focus, :where(body.wm:not(.wm--legacy)) input:hover, :where(body.wm:not(.wm--legacy)) textarea:hover { border-color: var(--wm-lantern); }

/* Fallback list styling (Firefox, Safari, older Chrome): colours per row. */
:where(body.wm:not(.wm--legacy)) select option   { background-color: var(--wm-deep); color: var(--wm-parchment); font-weight: 500; padding: 4px 8px; }
:where(body.wm:not(.wm--legacy)) select optgroup { background-color: var(--wm-deep-2); color: var(--wm-lantern); font-weight: 700; font-style: normal; }
:where(body.wm:not(.wm--legacy)) select option:checked { background-color: #2c3d50; color: var(--wm-lantern); }
:where(body.wm:not(.wm--legacy)) select option:disabled { color: var(--wm-stone); }

/* Full list styling where the browser supports customizable selects
   (Chrome/Edge 135+): the open list becomes an in-game window. */
@supports (appearance: base-select) {
	:where(body.wm:not(.wm--legacy)) select, :where(body.wm:not(.wm--legacy)) select::picker(select) { appearance: base-select; }
	:where(body.wm:not(.wm--legacy)) select { display: inline-flex; align-items: center; }
	:where(body.wm:not(.wm--legacy)) select::picker-icon { display: none; }           /* we draw our own arrow */
	:where(body.wm:not(.wm--legacy)) select::picker(select) {
		margin-top: 4px; padding: 6px;
		max-height: min(70vh, 560px); overflow-y: auto;
		border: 12px solid transparent;
		border-image: var(--wm-frame-gold) 32 / 32px / 0 round;
		background: var(--wm-blue-solid) padding-box;
		box-shadow: 0 18px 34px rgba(0, 0, 0, .7);
		color: var(--wm-parchment);
		font-family: var(--wm-font-body);
		scrollbar-color: var(--wm-brass) var(--wm-deep);
		scrollbar-width: thin;
	}
	/* Group label = the optgroup's own text, so style the group and reset the options. */
	:where(body.wm:not(.wm--legacy)) select optgroup { background: none; padding: 4px 0 0; margin: 0; font-family: var(--wm-font-title); font-size: 1.1rem; font-weight: 400; color: var(--wm-lantern); }
	:where(body.wm:not(.wm--legacy)) select optgroup + optgroup, :where(body.wm:not(.wm--legacy)) select option + optgroup { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--wm-line); }
	:where(body.wm:not(.wm--legacy)) select optgroup::label { padding: 0 10px 2px; }   /* separate rule: ignored where unsupported */
	:where(body.wm:not(.wm--legacy)) select option {
		font-family: var(--wm-font-body);
		display: flex; align-items: center; gap: 8px;
		padding: 5px 12px 5px 22px; background: none; border: 1px solid transparent;
		font-size: var(--wm-text-md); font-weight: 500; color: var(--wm-parchment); cursor: pointer;
	}
	:where(body.wm:not(.wm--legacy)) select option::checkmark { content: ""; order: -1; width: 6px; height: 6px; margin-left: -14px; background: var(--wm-lantern); transform: rotate(45deg); }
	:where(body.wm:not(.wm--legacy)) select option:hover, :where(body.wm:not(.wm--legacy)) select option:focus-visible { background: rgba(242, 196, 109, .1); border-color: var(--wm-line-strong); color: var(--wm-lantern); outline: none; }
	:where(body.wm:not(.wm--legacy)) select option:checked { background: rgba(242, 196, 109, .06); color: var(--wm-lantern); font-weight: 700; }
}


/* The navbar's Jump-to select, pinned by id so no page-level `select` rule can restyle it. */
#wm-nav #navbar-page-quick-switch{
	font: inherit; font-size: var(--wm-text-sm); color: var(--wm-parchment);
	background: rgba(0, 0, 0, .35); border: 1px solid #5d4a33; border-radius: 0;
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5);
	padding: 7px 10px; min-height: 36px;
}
#wm-nav #navbar-page-quick-switch { appearance: none; padding-right: 32px; cursor: pointer; border-color: var(--wm-brass);
	/* Opaque colour first: browsers that draw their own list take its colours from the <select>. */
	background: var(--wm-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23f2c46d' stroke-width='1.7'/%3E%3C/svg%3E") right 11px center / 12px 8px no-repeat; }
#wm-nav #navbar-page-quick-switch:hover, #wm-nav #navbar-page-quick-switch:focus{ border-color: var(--wm-lantern); }

/* Fallback list styling (Firefox, Safari, older Chrome): colours per row. */
#wm-nav #navbar-page-quick-switch option   { background-color: var(--wm-deep); color: var(--wm-parchment); font-weight: 500; padding: 4px 8px; }
#wm-nav #navbar-page-quick-switch optgroup { background-color: var(--wm-deep-2); color: var(--wm-lantern); font-weight: 700; font-style: normal; }
#wm-nav #navbar-page-quick-switch option:checked { background-color: #2c3d50; color: var(--wm-lantern); }
#wm-nav #navbar-page-quick-switch option:disabled { color: var(--wm-stone); }

/* Full list styling where the browser supports customizable selects
   (Chrome/Edge 135+): the open list becomes an in-game window. */
@supports (appearance: base-select) {
	#wm-nav #navbar-page-quick-switch, #wm-nav #navbar-page-quick-switch::picker(select) { appearance: base-select; }
	#wm-nav #navbar-page-quick-switch { display: inline-flex; align-items: center; }
	#wm-nav #navbar-page-quick-switch::picker-icon { display: none; }           /* we draw our own arrow */
	#wm-nav #navbar-page-quick-switch::picker(select) {
		margin-top: 4px; padding: 6px;
		max-height: min(70vh, 560px); overflow-y: auto;
		border: 12px solid transparent;
		border-image: var(--wm-frame-gold) 32 / 32px / 0 round;
		background: var(--wm-blue-solid) padding-box;
		box-shadow: 0 18px 34px rgba(0, 0, 0, .7);
		color: var(--wm-parchment);
		font-family: var(--wm-font-body);
		scrollbar-color: var(--wm-brass) var(--wm-deep);
		scrollbar-width: thin;
	}
	/* Group label = the optgroup's own text, so style the group and reset the options. */
	#wm-nav #navbar-page-quick-switch optgroup { background: none; padding: 4px 0 0; margin: 0; font-family: var(--wm-font-title); font-size: 1.1rem; font-weight: 400; color: var(--wm-lantern); }
	#wm-nav #navbar-page-quick-switch optgroup + optgroup, #wm-nav #navbar-page-quick-switch option + optgroup { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--wm-line); }
	#wm-nav #navbar-page-quick-switch optgroup::label { padding: 0 10px 2px; }   /* separate rule: ignored where unsupported */
	#wm-nav #navbar-page-quick-switch option {
		font-family: var(--wm-font-body);
		display: flex; align-items: center; gap: 8px;
		padding: 5px 12px 5px 22px; background: none; border: 1px solid transparent;
		font-size: var(--wm-text-md); font-weight: 500; color: var(--wm-parchment); cursor: pointer;
	}
	#wm-nav #navbar-page-quick-switch option::checkmark { content: ""; order: -1; width: 6px; height: 6px; margin-left: -14px; background: var(--wm-lantern); transform: rotate(45deg); }
	#wm-nav #navbar-page-quick-switch option:hover, #wm-nav #navbar-page-quick-switch option:focus-visible { background: rgba(242, 196, 109, .1); border-color: var(--wm-line-strong); color: var(--wm-lantern); outline: none; }
	#wm-nav #navbar-page-quick-switch option:checked { background: rgba(242, 196, 109, .06); color: var(--wm-lantern); font-weight: 700; }
}


/* 8. Navigation -----------------------------------------------------------
   Same blue as the panels, framed on the left, right and bottom with the
   original in-game border pieces (gold bottom corners, as on the old navbar). */

.wm-nav {
	position: sticky; top: 0; z-index: 900;
	border: 12px solid transparent;
	border-top: 0;
	background:
		url("/assets/images/gridcontainer/border-corner-bottom-left2.png")  left bottom  / 32px 32px no-repeat border-box,
		url("/assets/images/gridcontainer/border-corner-bottom-right2.png") right bottom / 32px 32px no-repeat border-box,
		url("/assets/images/gridcontainer/border-left.png")   left top  / 12px auto repeat-y border-box,
		url("/assets/images/gridcontainer/border-right.png")  right top / 12px auto repeat-y border-box,
		url("/assets/images/gridcontainer/border-bottom.png") left bottom / auto 12px repeat-x border-box,
		var(--wm-blue-solid) padding-box;
	box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .9);
}
.wm-nav__inner { display: flex; align-items: center; gap: 24px; min-height: var(--wm-nav-h); width: min(100% - 2 * var(--wm-gutter), 1680px); margin-inline: auto; }

.wm-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none !important; color: var(--wm-lantern) !important; flex: none; }
.wm-brand img { width: 46px; height: auto; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7)); }
.wm-brand__name { font-family: var(--wm-font-display); font-size: 1.65rem; line-height: 1; letter-spacing: .01em; text-shadow: 0 1px 0 #000, 0 0 14px rgba(0, 0, 0, .6); }
.wm-brand:hover .wm-brand__name { color: #ffe0a0; }
.wm-brand .wm-wordmark__art.wm-brand__mark { width: 190px; height: auto; overflow: visible; }
.wm-brand:hover .wm-brand__mark { filter: brightness(1.12); }

.wm-nav__menu  { display: flex; align-items: center; justify-content: flex-end; gap: 20px; flex: 1; }

/* Quick-Switch: label above a slim select, as on the old navbar. */
.wm-jump { display: inline-flex; flex-direction: column; align-items: stretch; gap: 1px; font-size: var(--wm-text-sm); font-weight: 700; line-height: 1.15; color: var(--wm-parchment-2); }
#wm-nav .wm-jump #navbar-page-quick-switch { min-width: 200px; min-height: 0; padding-top: 3px; padding-bottom: 3px; font-size: var(--wm-text-md); font-weight: 500; line-height: 1.25; }

.wm-nav__account { display: flex; align-items: center; gap: 8px; }
.wm-nav__account .wm-btn { min-height: 42px; padding: 8px 18px; font-size: 1.1rem; font-weight: 700; }

.wm-profile { position: relative; }
.wm-profile__toggle { display: inline-flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; font: 700 var(--wm-text-md) var(--wm-font-body); color: var(--wm-parchment); background: rgba(0, 0, 0, .3); border: 1px solid var(--wm-line-strong); cursor: pointer; }
.wm-profile__toggle:hover, .wm-profile__toggle[aria-expanded="true"] { border-color: var(--wm-lantern); color: var(--wm-lantern); }
.wm-profile__toggle img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid var(--wm-brass); }
.wm-profile__menu {
	position: absolute; right: 0; top: calc(100% + 10px); min-width: 210px; z-index: 950;
	display: flex; flex-direction: column; padding: 8px;
	border: 12px solid transparent; border-image: var(--wm-frame-gold) 32 / 32px / 0 round;
	background: var(--wm-blue-solid) padding-box;
	box-shadow: 0 16px 30px rgba(0, 0, 0, .6);
}
.wm-profile__menu[hidden] { display: none; }
.wm-profile__menu a { padding: 9px 12px; color: var(--wm-parchment) !important; text-decoration: none !important; font-size: var(--wm-text-md); font-weight: 500; }
.wm-profile__menu a:hover { background: rgba(242, 196, 109, .08); color: var(--wm-lantern) !important; }

.wm-nav__toggle { display: none; margin-left: auto; width: 44px; height: 40px; align-items: center; justify-content: center; background: rgba(0, 0, 0, .3); border: 1px solid var(--wm-line-strong); color: var(--wm-lantern); cursor: pointer; }
.wm-nav__toggle svg { width: 22px; height: 22px; }

@media (max-width: 1020px) {
	.wm-nav__toggle { display: inline-flex; }
	.wm-nav__menu {
		display: none; position: absolute; left: -12px; right: -12px; top: 100%;
		flex-direction: column; align-items: stretch; gap: 16px;
		margin-top: 12px; padding: 18px var(--wm-gutter) 22px;
		background: var(--wm-blue-solid);
		border-bottom: 1px solid var(--wm-line-strong);
		box-shadow: 0 20px 30px rgba(0, 0, 0, .7);
	}
	.wm-nav[data-open="true"] .wm-nav__menu { display: flex; }
	.wm-jump { gap: 4px; }
	#wm-nav .wm-jump #navbar-page-quick-switch { width: 100%; }
	.wm-profile__menu { left: 0; right: auto; }
}


/* 9. Hero & atlas ---------------------------------------------------------- */

.wm-hero { padding-top: clamp(40px, 6vw, 88px); text-align: center; }
.wm-hero__inner { max-width: 1240px; }
.wm-hero__mark { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 28px); }
.wm-hero__mark img { width: clamp(84px, 9vw, 132px); filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .7)); }

/* The wordmark is the one loud thing on the page. Engraved-plate look:
   lantern gradient fill, a hard dark offset, and a soft glow behind.      */
/* Hero wordmark: bevelled chrome-and-champagne SVG (assets/layouts/wordmark.php).
   The heading's text is kept for screen readers and search; the SVG is the visual. */
.wm-wordmark { margin: 0; line-height: 0; min-width: 0; }
.wm-wordmark__art { display: block; width: clamp(220px, 52vw, 760px); height: auto; overflow: visible; }
.wm-masthead { padding: clamp(28px, 4vw, 56px) var(--wm-gutter) clamp(20px, 3vw, 36px); text-align: center; }   /* logo + wordmark above a page's content */
.wm-masthead .wm-hero__mark img { width: clamp(72px, 7vw, 110px); }
.wm-masthead .wm-wordmark__art { width: clamp(220px, 40vw, 600px); }
.wm-hero__lead { margin-top: 18px; font-family: var(--wm-font-title); font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem); line-height: 1.3; color: var(--wm-parchment); text-shadow: 0 2px 10px rgba(0, 0, 0, .85); }
.wm-hero__notice { margin-top: 26px; }

/* Event banner: a temporarily returning server, pinned to the top of the atlas.
   Ember-red plate with a gold rim so it reads before anything else in the panel. */
.wm-event {
	position: relative;
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 22px;
	margin-bottom: 22px; padding: 16px 22px;
	color: var(--wm-parchment) !important; text-decoration: none !important;
	background:
		radial-gradient(120% 140% at 0% 50%, rgba(242, 196, 109, .22), transparent 55%),
		linear-gradient(180deg, #6e1a12 0%, #4a0f0a 55%, #3a0b07 100%);
	border: 1px solid #f2c46d;
	box-shadow: inset 0 1px 0 rgba(255, 230, 180, .35), inset 0 0 24px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .6), 0 0 22px rgba(217, 103, 74, .35);
	transition: box-shadow .16s, transform .16s;
}
.wm-event:hover, .wm-event:focus-visible {
	box-shadow: inset 0 1px 0 rgba(255, 230, 180, .45), inset 0 0 24px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .6), 0 0 34px rgba(242, 160, 90, .6);
	transform: translateY(-1px);
}
.wm-event__flag {
	align-self: start;
	padding: 3px 10px; font: 700 .8rem/1.3 var(--wm-font-body); letter-spacing: .04em; text-transform: uppercase;
	color: #2a1500; background: linear-gradient(180deg, #ffe08a, #f2b440);
	border: 1px solid #fff0c0; box-shadow: 0 0 0 1px rgba(0, 0, 0, .55);
}
.wm-event__main { display: grid; gap: 2px; min-width: 0; }
.wm-event__name { font-family: var(--wm-font-display); font-size: clamp(2rem, 1.4rem + 1.6vw, 2.6rem); line-height: 1; color: var(--wm-lantern); text-shadow: 0 2px 0 #1a0402, 0 0 18px rgba(0, 0, 0, .6); }
.wm-event__when { display: inline-flex; align-items: center; gap: 9px; font-size: 1.15rem; font-weight: 700; color: #fff1dc; }
.wm-event__blurb { font-size: var(--wm-text-md); color: #f2d9c4; }
.wm-event__cta {
	padding: 10px 20px; font: 700 1.1rem/1.1 var(--wm-font-body); white-space: nowrap;
	color: #2a1b0c; background: linear-gradient(180deg, #ecc274, #c08f3f 55%, #a87931);
	border: 1px solid #f6d898; box-shadow: inset 0 1px 0 rgba(255, 248, 225, .6), inset 0 -2px 0 rgba(90, 55, 15, .45), 0 3px 10px rgba(0, 0, 0, .45);
}
.wm-event:hover .wm-event__cta { background: linear-gradient(180deg, #f6d184, #cf9d4a 55%, #b5843a); }
.wm-event .wm-pip[data-state="pending"] { background: var(--wm-amber); opacity: 1; box-shadow: 0 0 8px rgba(233, 185, 73, .8); }
.wm-event[data-state="live"] .wm-pip { animation: wm-beacon 1.8s ease-in-out infinite; }   /* the one looping motion: a live server */
@keyframes wm-beacon { 50% { box-shadow: 0 0 0 5px rgba(141, 184, 96, 0), 0 0 14px rgba(141, 184, 96, .9); } }
@media (max-width: 700px) {
	.wm-event { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; }
	.wm-event__flag { justify-self: start; }
	.wm-event__cta { justify-self: start; }
}

/* Atlas: the server directory. */
.wm-atlas { margin-top: clamp(36px, 5vw, 64px); }
.wm-atlas__clusters { display: grid; gap: 28px var(--wm-gap); grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 1060px) { .wm-atlas__clusters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .wm-cluster--south { grid-column: 1 / -1; } }
@media (max-width: 600px)  { .wm-atlas__clusters { grid-template-columns: minmax(0, 1fr); } }

.wm-cluster__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.wm-cluster__name { font-family: var(--wm-font-title); font-size: var(--wm-text-lg); color: var(--wm-lantern); }
.wm-cluster__note { font-size: var(--wm-text-sm); color: var(--wm-parchment-2); white-space: nowrap; }

.wm-servers { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
@media (min-width: 1061px) {
	.wm-servers { grid-template-columns: minmax(0, 1fr); }
	.wm-cluster--south .wm-servers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.wm-server {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px;
	padding: 10px 12px 10px 14px; min-height: 52px;
	color: var(--wm-parchment) !important; text-decoration: none !important;
	background: linear-gradient(180deg, rgba(255, 235, 200, .035), rgba(0, 0, 0, .2));
	border: 1px solid var(--wm-line);
	box-shadow: inset 0 1px 0 rgba(255, 235, 200, .05), 0 1px 0 rgba(0, 0, 0, .4);
	transition: border-color .14s, background-color .14s;
}
.wm-server__name { font-size: 1.2rem; font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-server__name small { font-weight: 400; font-size: var(--wm-text-xs); color: var(--wm-stone); margin-left: 4px; }
.wm-server__live { display: inline-flex; align-items: center; gap: 7px; font-size: var(--wm-text-sm); font-weight: 500; color: var(--wm-parchment-2); font-variant-numeric: tabular-nums; }
.wm-server__live:empty { display: none; }
.wm-server__name .wm-tag { margin-left: 7px; vertical-align: 2px; }
.wm-server:hover { border-color: var(--wm-lantern); background-color: rgba(242, 196, 109, .07); }
.wm-server:hover .wm-server__name { color: var(--wm-lantern); }

.wm-atlas__more { display: grid; gap: 20px var(--wm-gap); grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; }
@media (max-width: 1060px) { .wm-atlas__more { grid-template-columns: minmax(0, 1fr); } }
.wm-atlas__more .wm-cluster__head { margin-bottom: 8px; }
.wm-chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }

/* Tool shelf. */
.wm-tools { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }

/* Tool button: same raised, bevelled look as the game's buttons. */
.wm-tool {
	position: relative;
	display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 0 12px;
	height: 100%; padding: 9px 12px;
	color: var(--wm-parchment) !important; text-decoration: none !important;
	background: linear-gradient(180deg, #24384c 0%, #16263a 55%, #101d2c 100%);
	border: 1px solid #3f5770;
	box-shadow: inset 0 1px 0 rgba(200, 225, 255, .14), inset 0 -2px 0 rgba(0, 0, 0, .4), 0 2px 5px rgba(0, 0, 0, .45);
	transition: border-color .14s, box-shadow .14s, transform .14s, background .14s;
}
.wm-tool svg { grid-row: span 2; width: 26px; height: 26px; color: var(--wm-brass); transition: color .14s, filter .14s; }
.wm-tool__name { font-size: 1.1rem; font-weight: 700; line-height: 1.2; color: var(--wm-parchment); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-tool__desc { font-size: var(--wm-text-sm); line-height: 1.3; color: var(--wm-parchment-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-tool:hover, .wm-tool:focus-visible {
	background: linear-gradient(180deg, #2e4760 0%, #1d3249 55%, #15253a 100%);
	border-color: var(--wm-lantern);
	box-shadow: inset 0 1px 0 rgba(255, 236, 190, .25), inset 0 0 14px rgba(242, 196, 109, .12), 0 0 0 1px rgba(242, 196, 109, .35), 0 4px 14px rgba(0, 0, 0, .55);
	transform: translateY(-1px);
}
.wm-tool:hover .wm-tool__name, .wm-tool:focus-visible .wm-tool__name { color: var(--wm-lantern); }
.wm-tool:hover svg, .wm-tool:focus-visible svg { color: var(--wm-lantern); filter: drop-shadow(0 0 4px rgba(242, 196, 109, .55)); }
.wm-tool:active { transform: translateY(1px); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6); }

/* [NEW!] badge — pinned to the top-right corner of any tile, chip or button. */
.wm-new {
	position: absolute; top: -8px; right: 8px; z-index: 1;
	padding: 1px 6px;
	font: 700 .72rem/1.3 var(--wm-font-body); letter-spacing: .03em;
	color: #2a1500; background: linear-gradient(180deg, #ffe08a, #f2b440);
	border: 1px solid #fff0c0;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 0 10px rgba(242, 196, 109, .55);
	pointer-events: none;
}
.wm-new::before { content: "["; }
.wm-new::after  { content: "]"; }
.wm-server, .wm-chip { position: relative; }


/* 10. Event feeds ---------------------------------------------------------- */

.wm-feed { list-style: none; margin: 0; padding: 0; }

/* The original WurmMaps event rows: tinted like a highlighted in-game
   inventory entry, Arial as in the game client, one line per event. Tints
   are a little darker than before and brighten on hover.                 */
.wm-feed__item {
	--wm-row: 125, 125, 125;
	display: flex; align-items: baseline; gap: 12px;
	padding: 3px 6px;
	font: 13px/1.35 Arial, Helvetica, sans-serif;
	color: #FDA;
	white-space: nowrap;
	background: rgba(var(--wm-row), .14);
	border-top: 2px solid rgba(255, 255, 255, .22);
	border-bottom: 2px solid rgba(255, 255, 255, .22);
	cursor: default;
}
.wm-feed__item:hover { background: rgba(var(--wm-row), .32); border-color: rgba(255, 255, 255, .5); }
.wm-feed__time   { flex: none; font-weight: bold; color: #FDA; font-variant-numeric: tabular-nums; }
.wm-feed__server { flex: none; font-weight: bold; color: #FF3; }
.wm-feed__text   { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wm-feed__text b { color: #FFF; }
.wm-feed__item[data-tone="founded"]   { --wm-row: 0, 255, 0; }
.wm-feed__item[data-tone="disbanded"] { --wm-row: 255, 0, 0; }
.wm-feed__item[data-tone="fo"]        { --wm-row: 0, 185, 75; }
.wm-feed__item[data-tone="lib"]       { --wm-row: 150, 0, 150; }
.wm-feed__item[data-tone="mag"]       { --wm-row: 205, 55, 55; }
.wm-feed__item[data-tone="vyn"]       { --wm-row: 0, 75, 185; }
.wm-feed__item[data-tone="unique"]    { --wm-row: 125, 125, 125; }

/* Loading / empty / error text inside any live region. */
.wm-empty { padding: 14px 4px; color: var(--wm-stone); font-size: var(--wm-text-sm); }
.wm-empty--loading::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border: 2px solid var(--wm-brass); border-right-color: transparent; border-radius: 50%; vertical-align: -1px; animation: wm-spin .9s linear infinite; }
.wm-empty--error { color: var(--wm-ember); }

.wm-chart { position: relative; height: clamp(260px, 30vw, 360px); }
@media (max-width: 640px) { .wm-chart { height: 440px; } }  /* room for the 16-server key */

.wm-god { display: inline-flex; align-items: center; gap: 5px; }
.wm-god img { width: 20px; height: 20px; }


/* 11. Tables ---------------------------------------------------------------- */

.wm-table-wrap { overflow-x: auto; margin-inline: -4px; padding-inline: 4px; }
.wm-table { width: 100%; border-collapse: separate; border-spacing: 0 3px; font-size: var(--wm-text-sm); line-height: 1.35; font-variant-numeric: tabular-nums; }
.wm-table th, .wm-table td { padding: 7px 10px; text-align: left; vertical-align: middle; }
.wm-table thead th { font-weight: 500; color: var(--wm-parchment-2); font-size: var(--wm-text-xs); padding-top: 0; border-bottom: 1px solid var(--wm-line); }
.wm-table tbody tr { background: rgba(0, 0, 0, .22); }
.wm-table tbody tr:hover { background: rgba(242, 196, 109, .05); }
.wm-table tbody th { font-weight: 700; color: var(--wm-parchment); white-space: nowrap; }
.wm-table .wm-muted { color: var(--wm-stone); }
.wm-table time { white-space: nowrap; }

/* Rites: one column per god, tinted by god, lit when cast within 24h. */
.wm-rites { font-size: .85rem; line-height: 1.15; border-spacing: 0 2px; }
.wm-rites th, .wm-rites td { padding: 3px 5px; }
.wm-rites thead th { padding-bottom: 4px; }
.wm-rites tbody th { padding-right: 8px; }
/* Last resort on very narrow columns: let a date wrap rather than scroll. */
.wm-rites td time { white-space: normal; }
.wm-rites td { min-width: 0; border-top: 2px solid color-mix(in srgb, var(--wm-tone) 35%, transparent); background: color-mix(in srgb, var(--wm-tone) 7%, transparent); }
.wm-rites td.is-recent { background: color-mix(in srgb, var(--wm-tone) 22%, transparent); border-top-color: var(--wm-tone); }
.wm-rites td time { display: block; color: var(--wm-parchment); }
.wm-rites td span { display: block; font-size: .8rem; color: var(--wm-parchment-2); }
.wm-rites td.is-recent span { color: var(--wm-parchment); }
.wm-rites [data-god="fo"]  { --wm-tone: var(--wm-fo); }
.wm-rites [data-god="lib"] { --wm-tone: var(--wm-lib); }
.wm-rites [data-god="mag"] { --wm-tone: var(--wm-mag); }
.wm-rites [data-god="vyn"] { --wm-tone: var(--wm-vyn); }
@media (max-width: 520px) {   /* phones: icons only in the rites header; names stay for screen readers */
	.wm-god__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.wm-rites { font-size: .78rem; }
	.wm-rites th, .wm-rites td { padding: 2px 3px; }
	.wm-rites td span { font-size: .74rem; }
	.wm-rites tbody th { padding-right: 3px; }
}
.wm-legend { display: inline-flex; align-items: center; gap: 8px; }
.wm-legend i { width: 12px; height: 12px; display: inline-block; background: rgba(242, 196, 109, .3); box-shadow: inset 0 0 0 1px var(--wm-lantern); }


/* 12. Prose & changelog ---------------------------------------------------- */

.wm-prose { max-width: 68ch; font-size: 1.0625rem; line-height: 1.6; }
.wm-prose h3 { margin: 1.4em 0 .5em; }
.wm-prose ul, .wm-prose ol { padding-left: 1.3em; margin: .6em 0; }
.wm-prose li + li { margin-top: .3em; }
.wm-prose strong, .wm-prose b { color: #fbe7c0; font-weight: 700; }
.wm-prose code { font-size: .92em; padding: 1px 5px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(0, 0, 0, .4); }

/* Ornamented list: small brass diamonds instead of bullets. */
.wm-list { list-style: none; padding: 0; margin: 0; }
.wm-list li { position: relative; padding-left: 20px; }
.wm-list li + li { margin-top: .35em; }
.wm-list li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 6px; height: 6px; background: var(--wm-brass); transform: rotate(45deg); }
.wm-list--cols { columns: 2 220px; column-gap: 32px; }
.wm-list--cols li { break-inside: avoid; }

.wm-about { display: grid; gap: 28px 48px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
@media (max-width: 900px) { .wm-about { grid-template-columns: minmax(0, 1fr); } }
.wm-about__actions { margin-top: 24px; }

/* Changelog: a timeline, because releases genuinely are a sequence. */
.wm-changelog { position: relative; }
.wm-release { position: relative; padding-left: 28px; }
.wm-release::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 1px; background: var(--wm-line); }
.wm-release:first-child::before { top: 18px; }
.wm-release:last-child::before  { bottom: auto; height: 18px; }
.wm-release + .wm-release { margin-top: 6px; }

.wm-release__head { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 8px 0; }
.wm-release__head::-webkit-details-marker { display: none; }
.wm-release__head::before {          /* timeline node */
	content: ""; position: absolute; left: 2px; top: 17px; width: 9px; height: 9px;
	background: var(--wm-oak); border: 1px solid var(--wm-brass); transform: rotate(45deg);
}
.wm-release[open] > .wm-release__head::before { background: var(--wm-lantern); border-color: var(--wm-lantern); }
.wm-release__title { font-family: var(--wm-font-title); font-size: var(--wm-text-xl); color: var(--wm-lantern); line-height: 1.2; }
.wm-release__date  { color: var(--wm-parchment-2); font-size: var(--wm-text-sm); font-variant-numeric: tabular-nums; }
.wm-release__head::after { content: "Show"; margin-left: auto; font-size: var(--wm-text-xs); color: var(--wm-stone); }
.wm-release[open] > .wm-release__head::after { content: "Hide"; }
.wm-release__head:hover .wm-release__title { text-decoration: underline; text-decoration-color: var(--wm-brass); text-underline-offset: .18em; }

.wm-release__body { padding: 4px 0 26px; }
.wm-release__group + .wm-release__group { margin-top: 18px; }
.wm-release__group > h4 { margin-bottom: 6px; color: #fbe7c0; }
.wm-release__group ul { margin: 0; padding-left: 1.15em; font-size: var(--wm-text-md); line-height: 1.55; color: var(--wm-parchment); }
.wm-release__group li { padding-left: 2px; }
.wm-release__group li + li { margin-top: .4em; }
.wm-release__group li::marker { color: var(--wm-brass); }
.wm-release__group ul ul { margin-top: .4em; color: var(--wm-parchment-2); font-size: var(--wm-text-sm); }
.wm-release__group ul ul li::marker { content: "– "; }
.wm-release__group b { color: #fbe7c0; }


/* 13. Footer ---------------------------------------------------------------- */

.wm-footer {
	position: relative;
	margin-top: 0;
	flex: none;
	/* The navbar's frame, flipped: top corners, sides and top edge. */
	border: 12px solid transparent;
	border-bottom: 0;
	background:
		url("/assets/images/gridcontainer/border-corner-top-left2.png")  left top  / 32px 32px no-repeat border-box,
		url("/assets/images/gridcontainer/border-corner-top-right2.png") right top / 32px 32px no-repeat border-box,
		url("/assets/images/gridcontainer/border-left.png")  left top  / 12px auto repeat-y border-box,
		url("/assets/images/gridcontainer/border-right.png") right top / 12px auto repeat-y border-box,
		url("/assets/images/gridcontainer/border-top.png")   left top  / auto 12px repeat-x border-box,
		var(--wm-blue-solid) padding-box;
	box-shadow: 0 -10px 24px -12px rgba(0, 0, 0, .9);
	padding: 26px 0 24px;
	font-size: var(--wm-text-md);
	color: var(--wm-parchment-2);
}
.wm-footer a { color: var(--wm-parchment); text-decoration: none; }
.wm-footer a:hover { color: var(--wm-lantern); text-decoration: underline; }
.wm-footer__legal { font-size: var(--wm-text-xs); line-height: 0.95; color: var(--wm-stone); }
.wm-footer__legal b { color: var(--wm-parchment-2); font-weight: 500; }
.wm-footer__credit { margin-top: 14px; font-size: var(--wm-text-xs); color: var(--wm-stone); }


/* 13b. Knowledge base (wiki pages) -----------------------------------------
   Layout from assets/layouts/kb.php: a sticky sidebar (Knowledge Base
   links + generated Contents) beside one long article panel.             */

.wm-kb__layout { display: grid; gap: var(--wm-gap); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 980px) {
	.wm-kb__layout { grid-template-columns: 260px minmax(0, 1fr); }
	.wm-kb__side { position: sticky; top: calc(var(--wm-nav-h) + 24px); max-height: calc(100vh - var(--wm-nav-h) - 48px); overflow: auto; scrollbar-width: thin; }
}

.wm-kb__nav { --wm-pad: 14px 16px 16px; }
.wm-kb__brand { font-family: var(--wm-font-title); font-size: var(--wm-text-lg); color: var(--wm-lantern); margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--wm-line); box-shadow: 0 1px 0 rgba(0, 0, 0, .55); }
.wm-kb__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.wm-kb__nav a { display: block; padding: 6px 10px; font-weight: 700; color: var(--wm-parchment) !important; text-decoration: none !important; border-left: 3px solid transparent; }
.wm-kb__nav a:hover { color: var(--wm-lantern) !important; background: rgba(242, 196, 109, .07); }
.wm-kb__nav a[aria-current="page"] { color: var(--wm-lantern) !important; background: rgba(242, 196, 109, .1); border-left-color: var(--wm-lantern); }

.wm-kb__toc { margin-top: 18px; padding: 0 4px; }
.wm-kb__toc[hidden] { display: none; }
.wm-kb__toc h3 { font-family: var(--wm-font-title); font-size: var(--wm-text-lg); color: var(--wm-lantern); margin-bottom: 6px; text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.wm-kb__toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--wm-line); }
.wm-kb__toc a { display: block; padding: 4px 0 4px 14px; margin-left: -1px; border-left: 2px solid transparent; font-size: var(--wm-text-sm); line-height: 1.3; color: var(--wm-parchment-2) !important; text-decoration: none !important; text-shadow: 0 1px 6px rgba(0, 0, 0, .9); }
.wm-kb__toc a:hover { color: var(--wm-lantern) !important; border-left-color: var(--wm-brass); }
.wm-kb__toc a[aria-current="location"] { color: var(--wm-lantern) !important; border-left-color: var(--wm-lantern); }
.wm-kb__toc li.is-part a { font-weight: 700; color: var(--wm-parchment) !important; margin-top: 6px; }

/* Article typography: wiki-style section rules, readable measure. */
.wm-kb__article { --wm-pad: clamp(20px, 3vw, 40px); font-size: var(--wm-text-md); line-height: 1.65; }
.wm-kb__article > * { max-width: 82ch; }
.wm-kb__article > table, .wm-kb__article > ul.wm-kb-cards { max-width: none; }
.wm-kb__article :is(h1, h2, h3) { scroll-margin-top: calc(var(--wm-nav-h) + 20px); }
.wm-kb-title { font-family: var(--wm-font-title) !important; font-size: clamp(2rem, 1.5rem + 1.6vw, 2.8rem) !important; line-height: 1.1; color: var(--wm-lantern); padding-bottom: 12px; margin-bottom: 18px !important; border-bottom: 1px solid var(--wm-line-strong); box-shadow: 0 1px 0 rgba(0, 0, 0, .55); text-shadow: 0 2px 12px rgba(0, 0, 0, .7); }
.wm-kb__article h2 { font-family: var(--wm-font-title); font-size: var(--wm-text-xl); color: var(--wm-lantern); margin: 2.1em 0 .6em; padding-bottom: 6px; border-bottom: 1px solid var(--wm-line); }
.wm-kb__article h2.wm-kb-part { font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.4rem); margin-top: 2.6em; border-bottom-color: var(--wm-line-strong); }
.wm-kb__article h3 { font-family: var(--wm-font-body); font-size: var(--wm-text-lg); color: var(--wm-parchment); margin: 1.4em 0 .4em; }
.wm-kb__article p { margin: 0 0 .9em; }
.wm-kb__article b, .wm-kb__article strong { color: #fbe7c0; }
.wm-kb__article u { text-decoration-color: var(--wm-brass); text-underline-offset: .18em; }
.wm-kb__article ul { margin: .4em 0 1.1em; padding-left: 1.3em; }
.wm-kb__article li { margin: .3em 0; padding-left: 2px; }
.wm-kb__article li::marker { color: var(--wm-brass); }
.wm-kb__article ul ul { margin: .3em 0 .5em; color: var(--wm-parchment-2); }
.wm-kb__article code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .86em; padding: 1px 6px; color: #f4e7c4; background: rgba(0, 0, 0, .4); border: 1px solid rgba(201, 154, 78, .25); overflow-wrap: anywhere; }
.wm-kb-fineprint { margin: -.5em 0 1em; font-size: .7rem; font-style: italic; color: var(--wm-stone); }

/* Screenshots: framed "thumbs", never stretched. */
.wm-kb__article img { display: inline-block; vertical-align: top; max-width: 100%; height: auto; margin: 12px 12px 4px 0; padding: 4px; background: #05090d; border: 1px solid #3f5770; box-shadow: 0 6px 16px rgba(0, 0, 0, .5); }

/* Colour legend tables (tile / ore swatches). */
.wm-kb-legend { border-collapse: collapse; margin: .3em 0 1.4em; font-size: var(--wm-text-sm); background: rgba(0, 0, 0, .2); border: 1px solid var(--wm-line); }
.wm-kb-legend td { padding: 6px 12px; border-bottom: 1px solid rgba(201, 154, 78, .14); vertical-align: middle; }
.wm-kb-legend tr:nth-child(even) td { background: rgba(255, 235, 200, .03); }
.wm-kb-legend td:nth-child(2) { padding-right: 28px; border-right: 1px solid var(--wm-line); }
.wm-kb-legend .map-tile-square { width: 22px; height: 16px; margin: 0; border: 1px solid rgba(255, 255, 255, .35); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5); }

/* Data-type names as chips. */
.wm-kb-chips { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 6px; margin: .5em 0 .8em !important; }
.wm-kb-chips li { margin: 0; padding: 0; }

/* API reference cards. */
.wm-kb-cards { list-style: none; padding: 0 !important; display: grid; gap: 12px; }
.wm-kb-cards > li { margin: 0; padding: 14px 18px 8px; background: linear-gradient(180deg, rgba(36, 56, 76, .55), rgba(16, 29, 44, .55)); border: 1px solid #3f5770; box-shadow: inset 0 1px 0 rgba(200, 225, 255, .08); }
.wm-kb-card__title { font-size: var(--wm-text-lg); font-weight: 700; color: var(--wm-lantern); }
.wm-kb-sublead { margin: .7em 0 .1em !important; font-weight: 700; color: var(--wm-parchment-2); }

/* 13b2. Signature Finder (Tools/SigFinder.php) -----------------------------
   Top: index status beside search + results.
   Below: contribute (left, under the status) | about (720px, under the results). */

.wm-sig { padding-top: clamp(28px, 4vw, 48px); }
.wm-sig__head { margin-bottom: calc(var(--wm-gap) + 4px); }
.wm-sig__title { font-family: var(--wm-font-display); font-size: var(--wm-text-2xl); color: var(--wm-lantern); text-shadow: 0 2px 14px rgba(0, 0, 0, .7); }
.wm-sig__lead { margin-top: 4px; color: var(--wm-parchment-2); }

.wm-sig__layout { display: grid; gap: var(--wm-gap); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) { .wm-sig__layout { grid-template-columns: 360px minmax(0, 1fr); } }
.wm-sig__side, .wm-sig__main { display: grid; gap: var(--wm-gap); min-width: 0; }
@media (min-width: 1000px) { .wm-sig__main { order: 2; } .wm-sig__side { order: 1; } }
@media (max-width: 999px)  { .wm-sig__main { order: 1; } .wm-sig__side { order: 2; } }  /* search first on phones */
@media (min-width: 1000px) { .wm-sig__side { position: sticky; top: calc(var(--wm-nav-h) + 24px); } }  /* status stays in view beside long lists */

.wm-sig__lower { display: grid; gap: var(--wm-gap); margin-top: var(--wm-gap); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) { .wm-sig__lower { grid-template-columns: minmax(300px, 1fr) minmax(0, 720px); } }

.wm-sig__about p { font-size: var(--wm-text-sm); line-height: 1.55; color: var(--wm-parchment); }
.wm-sig__credit { color: var(--wm-stone) !important; font-style: italic; }
.wm-sig__hint { font-size: var(--wm-text-sm); color: var(--wm-parchment-2); margin-top: 10px !important; }
.wm-sig code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .9em; padding: 0 5px; color: #f4e7c4; background: rgba(0, 0, 0, .4); border: 1px solid rgba(201, 154, 78, .25); }

/* Index status */
.wm-sig__bignum { font-size: var(--wm-text-sm); color: var(--wm-parchment-2); margin-bottom: 12px !important; }
.wm-sig__bignum span { display: block; font-family: var(--wm-font-title); font-size: 2.3rem; line-height: 1.05; color: var(--wm-lantern); }
.wm-sig__stats { margin: 0; display: grid; gap: 7px; font-size: var(--wm-text-sm); }
.wm-sig__stats > div:not(.wm-sig__meter) { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid rgba(201, 154, 78, .14); }
.wm-sig__stats dt { color: var(--wm-parchment-2); }
.wm-sig__stats dd { margin: 0; font-weight: 700; color: var(--wm-parchment); text-align: right; }
.wm-sig__meter { height: 5px; margin: -2px 0 4px; background: rgba(0, 0, 0, .45); border: 1px solid rgba(0, 0, 0, .5); }
.wm-sig__meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--wm-brass), var(--wm-lantern)); }

/* Contribute */
.wm-sig__pick { width: 100%; margin-top: 12px; cursor: pointer; }
.wm-sig__pick span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-sig__upload:has(#fileInput:focus-visible) .wm-sig__pick { outline: 2px solid var(--wm-lantern); outline-offset: 3px; }
.wm-sig__msg:not(:empty) { margin-top: 10px; padding: 8px 12px; font-size: var(--wm-text-sm); background: rgba(0, 0, 0, .3); border-left: 3px solid var(--wm-brass); }
.wm-sig__msg[data-tone="good"] { border-left-color: var(--wm-moss); color: #d6efbd; }
.wm-sig__msg[data-tone="bad"]  { border-left-color: var(--wm-ember); color: #ffd2c4; }
.wm-sig__found { margin-top: 14px; }
.wm-sig__found[hidden] { display: none; }
.wm-sig__found-head { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: var(--wm-text-sm); font-weight: 700; color: var(--wm-parchment-2); }
:where(body.wm) .wm-sig__found-list { display: block; width: 100%; height: 160px; resize: vertical; font: 500 var(--wm-text-sm) / 1.45 var(--wm-font-body); }
.wm-sig__eta { margin-top: 8px !important; font-size: var(--wm-text-sm); }
.wm-sig__submit { width: 100%; margin-top: 12px; }
.wm-sig__submit:disabled { opacity: .5; cursor: not-allowed; }

/* Search */
.wm-sig__form { display: flex; flex-wrap: wrap; gap: 10px; }
:where(body.wm) .wm-sig__input { flex: 1 1 260px; min-height: 48px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1.25rem; letter-spacing: .08em; }
.wm-sig__form .wm-btn { min-height: 48px; padding-inline: 24px; }

/* Results — long lists scroll inside the panel */
.wm-sig__results .wm-panel__title code { font-size: .8em; }
.wm-sig__empty { padding: 20px clamp(18px, 2vw, 28px) 24px; color: var(--wm-parchment-2); }
.wm-sig__empty[hidden] { display: none; }
.wm-sig__tools { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 clamp(18px, 2vw, 28px) 12px; }
:where(body.wm) .wm-sig__filter { flex: 1 1 220px; }
.wm-sig__names {
	list-style: none; margin: 0; padding: 4px clamp(18px, 2vw, 28px) 20px;
	display: grid; gap: 4px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	max-height: min(62vh, 640px); overflow-y: auto; overscroll-behavior: contain;
	scrollbar-width: thin; scrollbar-color: var(--wm-brass) rgba(0, 0, 0, .3);
	border-top: 1px solid rgba(201, 154, 78, .14);
}
.wm-sig__names li {
	padding: 6px 10px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .95rem;
	color: var(--wm-parchment-2); background: rgba(0, 0, 0, .25); border: 1px solid rgba(201, 154, 78, .14);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wm-sig__names li[hidden] { display: none; }
@media (max-width: 600px) { .wm-sig__names { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } }
.wm-sig__names li b { color: var(--wm-lantern); font-weight: 700; }
.wm-sig__names li:hover { border-color: var(--wm-line-strong); color: var(--wm-parchment); }

/* 13c. Migrated legacy pages (define('WM_LEGACY', true)) -------------------
   These pages keep the legacy stylesheets and their own rules for page
   content; this layer only fits them into the new shell.                  */

/* Body: zero specificity, so a page's own `body {}` rules still win. Content
   inherits what it did before (Arial, 16px, normal line height), so in-game
   replicas such as marketplace items and tooltips are unchanged. */
:where(body.wm--legacy) {
	margin: 0;
	font-family: Arial;
	color: var(--wm-parchment);
	background-color: var(--wm-oak);
	scrollbar-color: var(--wm-brass) var(--wm-oak);
}
.wm--legacy :is(.wm-nav, .wm-footer) { font-family: var(--wm-font-body); font-size: 17px; line-height: 1.55; color: var(--wm-parchment); }
.wm--legacy .wm-main { display: contents; }        /* wrapper is layout-neutral */
/* Footer on the window's bottom edge for short pages, with a gap above it.
   The body is already the page's scroll box (app.css: height 100%); it
   becomes a column and the content wrapper takes the spare height. The
   wrapper stays position: static, so nothing inside positions against it.
   Full-screen tools (wm--app) have no footer and keep the wrapper neutral. */
body.wm--legacy:not(.wm--app) { display: flex; flex-direction: column; min-height: 100vh; }
body.wm--legacy:not(.wm--app) > * { flex-shrink: 0; }
.wm--legacy:not(.wm--app) .wm-main { display: block; position: static; flex: 1 0 auto; padding-bottom: 48px; }
body.wm--legacy::before, body.wm--legacy::after { position: fixed; }   /* backdrop, like the old landing-bg */
.wm--legacy .landing-bg { display: none; }
.wm--legacy .wm-brand img { image-rendering: auto; }
.wm--legacy :is(.wm-nav__toggle, .wm-profile__toggle) { border-radius: 0; }

/* Full-screen tools (WM_BODY_CLASS 'wm--app'): own background, 70px navbar
   in normal flow, exactly where the old one sat. */
body.wm--app::before, body.wm--app::after { display: none; }
.wm--app { --wm-nav-h: 58px; }
.wm--app .wm-nav { position: relative; z-index: auto; }
/* Navbar drop-downs open over full-screen content (Leaflet map controls sit at z-index 1000). */
.wm--app :is(.wm-profile__menu, .wm-nav__menu) { z-index: 1001; }
/* Tools that set their own root font size (HerdTracker: 13px) would shrink the rem-sized navbar. */
html:has(body.wm--app) { font-size: 16px; }
/* Page-level `label {}` rules (Cooking Simulator) must not restyle the Jump-to label. */
#wm-nav .wm-jump { text-transform: none; letter-spacing: normal; margin: 0; }

/* The old 9-div "grid-container" window: the eight border-piece divs are gone
   and the frame is drawn on the content cell itself. The container keeps its
   original grid, so the window still shrink-wraps its content and centres
   exactly as before. Not a containing block (no position / filter), so
   tooltips and overlays inside still position against the page.          */
body.wm .grid-container > .grid-item:not(.grid-container-content) { display: none; }   /* any old border pieces left */
body.wm .grid-container > .grid-container-content {
	margin: 0;
	border: 12px solid transparent;
	border-image: var(--wm-frame-gold) 32 / 32px / 0 round;
	background: var(--wm-blue-fill) padding-box;
	box-shadow: 0 22px 40px -22px rgba(0, 0, 0, .85);
}

/* Section titles used across the old pages, in the new title face. */
.wm--legacy :is(.map_selector_table_category, .map_selector_table_header) {
	font-family: var(--wm-font-title); font-weight: 400; color: var(--wm-lantern);
	text-shadow: 0 1px 0 #000, 0 0 18px rgba(0, 0, 0, .7);
}

/* 14. Utilities ------------------------------------------------------------ */

.wm-muted   { color: var(--wm-parchment-2); }
.wm-faint   { color: var(--wm-stone); }
.wm-small   { font-size: var(--wm-text-sm); }
.wm-nums    { font-variant-numeric: tabular-nums; }
.wm-center  { text-align: center; }
.wm-mt-0    { margin-top: 0 !important; }
.wm-hidden  { display: none !important; }


/* 15. Motion & print ------------------------------------------------------- */

/* One orchestrated moment: the hero settles in on load. Nothing else moves
   unless the visitor does something.                                      */
@keyframes wm-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes wm-spin { to { transform: rotate(360deg); } }
.wm-hero__mark    { animation: wm-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.wm-hero__lead    { animation: wm-rise .7s .12s cubic-bezier(.2, .7, .2, 1) both; }
.wm-hero__notice  { animation: wm-rise .7s .3s cubic-bezier(.2, .7, .2, 1) both; }

.wm-server__live { transition: opacity .4s; }
.wm-server__live[data-pending] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
	html:has(body.wm) { scroll-behavior: auto; }
	.wm *, .wm *::before, .wm *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}

@media print {
	body.wm::before, body.wm::after, .wm-nav { display: none; }
	body.wm { background: #fff; color: #000; }
	.wm-panel { border: 1px solid #999; border-image: none; background: none; box-shadow: none; backdrop-filter: none; }
	.wm h1, .wm h2, .wm h3, :where(.wm) a { color: #000; }
}