/**
 * NTW Wiki — FALL layer ("Cool Button", 20th-anniversary season).
 *
 * A side-scroller skin: golden-hour sky, painted hills, a treeline in full
 * colour, maple leaves drifting down behind the page, and chunky rounded
 * "game window" chrome. Loads after portal.css (and the feature sheets) and
 * re-themes everything by overriding the --ntw-* tokens plus the handful of
 * hard-coded light literals — exactly the contract cyber.css uses.
 *
 * Contract with the JS (fall.js):
 *  - html.fa-motion      — master gate; every *animation* is behind it, so
 *                          no-JS / reduced-motion still gets a complete page.
 *  - .fa-world           — fixed backdrop (DOM injected by fall.js).
 *  - .fa-hud             — status bar + event tab (DOM injected by fall.js).
 *  - .fa-minimap         — small map window injected into the header.
 *  - .ntw-capy-peek-hat  — the peeker's party hat (capy.js renders it when
 *                          ntwCapy.hat is set).
 *  - GSAP owns opacity/transform on reveals (motion.js); nothing here
 *    animates those on reveal targets.
 *
 * The 20th anniversary is kept to four touches: the medal beside the logo,
 * the Lv. 20 badge on the status bar, the event tab on the right edge, and
 * the capybara's hat.
 */

/* ==========================================================================
   1. TOKENS — remap the portal palette, add the fall set
   ========================================================================== */
:root {
	/* Fall primitives. */
	--fa-sky-hi: #FFF3DC;
	--fa-sky: #FFD3A0;
	--fa-sky-lo: #F4955A;
	--fa-ember: #E4652C;
	--fa-ember-deep: #C24A1B;
	--fa-maple: #B4301F;
	--fa-gold: #F2B233;
	--fa-gold-hi: #FFD36B;
	--fa-bark: #4A2A12;
	--fa-bark-mid: #7A4E2A;
	--fa-bark-soft: #A67C52;
	--fa-cream: #FFF8EA;
	--fa-cream-2: #F7E9CF;
	--fa-moss: #6F8F3E;
	--fa-moss-deep: #4E6A2A;
	--fa-dirt: #8C5A2B;
	--fa-dirt-deep: #6B4220;
	--fa-navy: #22304C;
	--fa-plank: linear-gradient(180deg, #C1843A 0%, #A8672A 55%, #935A22 100%);
	--fa-button: linear-gradient(180deg, var(--fa-gold-hi) 0%, var(--fa-gold) 60%, #E39A1E 100%);
	--fa-font-display: 'Fredoka', 'Arial Rounded MT Bold', 'Segoe UI', sans-serif;
	--fa-font-body: 'Nunito', 'Segoe UI', sans-serif;
	--fa-font-pixel: 'Pixelify Sans', 'Courier New', monospace;
	--fa-line: rgba(74, 42, 18, .22);
	--fa-line-mid: rgba(74, 42, 18, .4);
	--fa-window-shadow: 0 4px 0 var(--fa-bark), 0 10px 22px rgba(74, 42, 18, .14);
	--fa-ease: cubic-bezier(.22, 1, .36, 1);
	/* z ladder: world 0 < capy sky 1 < #page 10 < hud 300 < hits 500 */
	--fa-z-hud: 300;
	--fa-z-hit: 500;

	/* Portal token overrides — most of the retheme happens right here. */
	--ntw-bg: #FFE9C4;
	--ntw-surface: var(--fa-cream);
	--ntw-border: var(--fa-line);
	--ntw-text: var(--fa-bark);
	--ntw-muted: var(--fa-bark-mid);
	--ntw-brand: var(--fa-ember);
	--ntw-brand-dark: var(--fa-ember-deep);
	--ntw-accent: var(--fa-maple);
	--ntw-info: #2E6FB5;
	--ntw-radius: 12px;
	--ntw-shadow: var(--fa-window-shadow);
	--ntw-glow: 0 0 0 3px rgba(242, 178, 51, .5);
	--ntw-accent-line: linear-gradient(90deg, var(--fa-gold), var(--fa-maple));
	--ntw-fx-rgb: 228, 101, 44; /* motion.js pulse/highlight color */
}

/* ==========================================================================
   2. BASE — body, type, links, selection
   ========================================================================== */
body {
	background: var(--ntw-bg);
	color: var(--fa-bark);
	font-family: var(--fa-font-body);
}

::selection {
	background: var(--fa-gold);
	color: var(--fa-bark);
}

html {
	scrollbar-color: var(--fa-bark-soft) var(--fa-cream-2);
}

a { color: var(--fa-ember-deep); }
a:visited { color: var(--fa-ember-deep); }
a:hover,
a:focus,
a:active { color: var(--fa-maple); }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--fa-font-display);
	font-weight: 600;
	color: var(--fa-bark);
}

pre {
	background: var(--fa-cream-2);
	border: 2px solid var(--fa-line);
}

code,
kbd,
tt { color: var(--fa-maple); }

mark,
ins {
	background: rgba(242, 178, 51, .35);
	color: var(--fa-bark);
}

hr { background-color: var(--fa-line-mid); }

.skip-link.screen-reader-text:focus {
	background: var(--fa-cream);
	color: var(--fa-bark);
	box-shadow: 0 0 0 2px var(--fa-bark);
}

/* Content rides above the world; the column itself is glass so the leaves
   and hills show through around the windows. */
#page.site {
	position: relative;
	z-index: 10;
	background: transparent;
}

/* ==========================================================================
   3. WORLD — fixed painted backdrop (DOM injected by fall.js)
   ========================================================================== */
.fa-world {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	background: linear-gradient(180deg, var(--fa-sky-hi) 0%, var(--fa-sky) 42%, #FFBE80 70%, var(--fa-sky-lo) 100%);
}

.fa-world__sun {
	position: absolute;
	left: 64%;
	top: 22vh;
	width: 30vmin;
	height: 30vmin;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 45%, #FFF6D2 0%, #FFE39A 58%, #FFD27A 100%);
	box-shadow: 0 0 40px 18px rgba(255, 226, 160, .7), 0 0 140px 70px rgba(255, 200, 120, .35);
}

.fa-world__layer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: block;
	width: 100%;
	height: auto;
}

.fa-world__layer--far { bottom: 22vh; opacity: .9; }
.fa-world__layer--mid { bottom: 10vh; }
.fa-world__layer--trees { bottom: 0; }

.fa-cloud {
	position: absolute;
	width: 180px;
	height: auto;
	opacity: .9;
}

html.fa-motion .fa-cloud {
	animation: fa-drift var(--dur, 90s) linear infinite;
	animation-delay: var(--delay, 0s);
}

@keyframes fa-drift {
	from { transform: translateX(-30vw); }
	to { transform: translateX(110vw); }
}

/* Leaves: spawned + tweened by fall.js. */
.fa-leaf {
	position: absolute;
	top: -48px;
	left: 0;
	width: 22px;
	height: 22px;
	will-change: transform;
}

.fa-leaf svg {
	display: block;
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 2px 1px rgba(74, 42, 18, .18));
}

/* ==========================================================================
   4. HUD — status bar (bottom), event tab (right edge), minimap (header)
   ========================================================================== */
.fa-hud {
	position: fixed;
	inset: 0;
	z-index: var(--fa-z-hud);
	pointer-events: none;
	font-family: var(--fa-font-display);
}

/* --- Status bar: Lv. 20 · name · HP / MP / EXP ------------------------------ */
.fa-status {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 7px 16px 7px 8px;
	background: rgba(34, 48, 76, .94);
	border: 2px solid var(--fa-bark);
	border-radius: 16px;
	box-shadow: 0 4px 0 var(--fa-bark), 0 10px 26px rgba(0, 0, 0, .3);
	color: var(--fa-cream);
	pointer-events: auto;
	white-space: nowrap;
}

.fa-status__lv {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 12px;
	background: var(--fa-button);
	border: 2px solid var(--fa-bark);
	color: var(--fa-bark);
	line-height: 1;
}

.fa-status__lv small {
	font-family: var(--fa-font-pixel);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
}

.fa-status__lv b {
	font-size: 22px;
	font-weight: 700;
	margin-top: 1px;
}

.fa-status__who {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 104px;
}

.fa-status__name {
	font-weight: 600;
	font-size: 15px;
}

.fa-status__job {
	font-family: var(--fa-font-pixel);
	font-size: 12px;
	color: #B9C6E2;
}

.fa-status__bars {
	display: grid;
	gap: 4px;
	min-width: 280px;
}

.fa-bar {
	display: grid;
	grid-template-columns: 30px 1fr 74px;
	align-items: center;
	gap: 7px;
	font-family: var(--fa-font-pixel);
	font-size: 12px;
	letter-spacing: .02em;
}

.fa-bar__label { color: #DCE4F5; }

.fa-bar__track {
	position: relative;
	height: 11px;
	border-radius: 6px;
	background: rgba(0, 0, 0, .5);
	border: 1px solid rgba(255, 255, 255, .16);
	overflow: hidden;
}

.fa-bar__fill {
	position: absolute;
	inset: 0;
	width: var(--pct, 100%);
	border-radius: 6px;
}

.fa-bar--hp .fa-bar__fill { background: linear-gradient(180deg, #FF8C7A, #E0392F 60%, #B82A22); }
.fa-bar--mp .fa-bar__fill { background: linear-gradient(180deg, #8CC3FF, #3C8DE0 60%, #2A6BB5); }
.fa-bar--exp .fa-bar__fill { background: linear-gradient(180deg, var(--fa-gold-hi), var(--fa-gold) 60%, #D8931A); }

.fa-bar__value {
	text-align: right;
	color: #DCE4F5;
	font-variant-numeric: tabular-nums;
}

/* The full EXP bar catches the light now and then — the one idle motion. */
html.fa-motion .fa-bar--exp .fa-bar__fill::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -40%;
	width: 30%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
	animation: fa-shine 4.5s ease-in-out infinite;
}

@keyframes fa-shine {
	0%, 60% { left: -40%; }
	100% { left: 120%; }
}

/* --- Event tab: pokes in from the right edge, slides out on hover ---------- */
.fa-event {
	position: absolute;
	right: 0;
	top: 100px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px 8px 10px;
	background: var(--fa-cream);
	border: 2px solid var(--fa-bark);
	border-right: 0;
	border-radius: 14px 0 0 14px;
	box-shadow: 0 3px 0 var(--fa-bark), 0 8px 18px rgba(74, 42, 18, .18);
	color: var(--fa-bark);
	pointer-events: auto;
	cursor: default;
	transform: translateX(calc(100% - 50px));
	transition: transform 320ms var(--fa-ease);
}

.fa-event:hover,
.fa-event:focus-within {
	transform: translateX(0);
}

.fa-event__leaf {
	width: 30px;
	height: 30px;
	flex: 0 0 auto;
}

.fa-event__text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.fa-event__title {
	font-weight: 700;
	font-size: 15px;
}

.fa-event__sub {
	font-family: var(--fa-font-body);
	font-weight: 600;
	font-size: 12.5px;
	color: var(--fa-bark-mid);
}

/* --- Anniversary medal: pinned beside the logo ------------------------------ */
.fa-medal {
	display: inline-block;
	width: 54px;
	height: 64px;
	margin-left: 18px;
	transform: rotate(-6deg);
	transform-origin: 50% 8%;
	filter: drop-shadow(0 3px 0 rgba(74, 42, 18, .35));
	cursor: default;
}

.fa-medal svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* --- Minimap: lives in the header next to the Cool Button ------------------ */
.fa-hud-top {
	display: flex;
	align-items: center;
	gap: 14px;
}

.fa-minimap {
	display: flex;
	flex-direction: column;
	width: 178px;
	border: 2px solid var(--fa-bark);
	border-radius: 10px;
	background: rgba(34, 48, 76, .92);
	color: var(--fa-cream);
	box-shadow: 0 3px 0 var(--fa-bark);
	overflow: hidden;
}

.fa-minimap__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	padding: 4px 9px 3px;
	background: rgba(0, 0, 0, .28);
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.fa-minimap__region {
	flex: 0 0 auto;
	font-family: var(--fa-font-pixel);
	font-size: 11px;
	white-space: nowrap;
	color: #B9C6E2;
}

.fa-minimap__name {
	font-family: var(--fa-font-display);
	font-weight: 600;
	font-size: 12.5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.fa-minimap__map {
	display: block;
	width: 100%;
	height: 40px;
}

html.fa-motion .fa-minimap__you {
	animation: fa-blink 1.2s steps(2, end) infinite;
}

@keyframes fa-blink {
	50% { opacity: .2; }
}

@media (max-width: 900px) {
	.fa-minimap { display: none; }
	.fa-medal { width: 44px; height: 52px; margin-left: 12px; }
	.fa-status__bars { display: none; }
	.fa-status { gap: 10px; padding-right: 14px; }
	.fa-event { top: auto; bottom: 88px; }
}

/* ==========================================================================
   5. SITE CHROME — header, Cool Button, sidebar, footer-as-ground
   ========================================================================== */
.site-header {
	background: rgba(255, 248, 234, .9);
	border-bottom: 2px solid var(--fa-bark);
	box-shadow: 0 4px 0 rgba(74, 42, 18, .14);
	backdrop-filter: blur(5px);
}

.site-title a,
.site-title a:visited { color: var(--fa-bark); }

.site-description {
	font-family: var(--fa-font-body);
	color: var(--fa-bark-mid);
}

/* The Cool Button, engaged: a proper game button. */
.ntw-view-toggle {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: .5rem 1.05rem .55rem;
	border: 2px solid var(--fa-bark);
	border-radius: 12px;
	background: var(--fa-button);
	font-family: var(--fa-font-display);
	font-size: .9rem;
	font-weight: 600;
	letter-spacing: .01em;
	text-transform: none;
	text-decoration: none;
	color: var(--fa-bark);
	box-shadow: 0 3px 0 var(--fa-bark), inset 0 2px 0 rgba(255, 255, 255, .55);
	transition: transform 120ms var(--fa-ease), box-shadow 120ms var(--fa-ease);
}

.ntw-view-toggle:hover,
.ntw-view-toggle:focus-visible {
	color: var(--fa-bark);
	border-color: var(--fa-bark);
	transform: translateY(-1px);
	box-shadow: 0 4px 0 var(--fa-bark), inset 0 2px 0 rgba(255, 255, 255, .55);
	outline: none;
}

.ntw-view-toggle:active {
	transform: translateY(2px);
	box-shadow: 0 1px 0 var(--fa-bark), inset 0 2px 0 rgba(255, 255, 255, .55);
}

.ntw-view-toggle:focus-visible {
	box-shadow: 0 4px 0 var(--fa-bark), 0 0 0 3px rgba(242, 178, 51, .6);
}

.site-sidebar {
	background: rgba(255, 248, 234, .93);
	border-right: 2px solid var(--fa-line-mid);
	backdrop-filter: blur(5px);
}

.site-sidebar-section + .site-sidebar-section {
	border-top: 2px dotted var(--fa-line-mid);
}

.site-sidebar-heading {
	display: flex;
	align-items: center;
	gap: .4rem;
	font-family: var(--fa-font-display);
	font-weight: 600;
	font-size: .84rem;
	letter-spacing: .02em;
	text-transform: none;
	color: var(--fa-bark-mid);
}

.site-sidebar-heading::before {
	content: "";
	width: 13px;
	height: 13px;
	flex: 0 0 auto;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 4 L58 30 L78 18 L70 42 L96 45 L74 58 L88 80 L62 70 L55 96 L50 78 L45 96 L38 70 L12 80 L26 58 L4 45 L30 42 L22 18 L42 30 Z' fill='%23E4652C' stroke='%234A2A12' stroke-width='6' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}

.main-navigation ul {
	font-family: var(--fa-font-body);
	font-weight: 700;
}

.main-navigation a {
	border-radius: 10px;
	color: var(--fa-bark-mid);
	transition: color 140ms var(--fa-ease), background 140ms var(--fa-ease);
}

.main-navigation a:hover {
	color: var(--fa-ember-deep);
	background: rgba(228, 101, 44, .12);
}

.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
	color: var(--fa-bark);
	background: rgba(242, 178, 51, .4);
	box-shadow: inset 0 0 0 2px rgba(74, 42, 18, .25);
}

.quick-link-ext { color: var(--fa-bark-soft); }
.quick-links-menu a:hover .quick-link-ext { color: var(--fa-ember-deep); }

.regional-sites-toggle {
	font-family: var(--fa-font-body);
	font-weight: 700;
	border-radius: 10px;
	color: var(--fa-bark-mid);
}

.regional-sites-toggle:hover,
.regional-sites-toggle:focus-visible {
	color: var(--fa-ember-deep);
	background: rgba(228, 101, 44, .12);
	box-shadow: none;
}

.regional-flyout {
	background: var(--fa-cream);
	border-right: 2px solid var(--fa-line-mid);
}

.regional-flyout-back { color: var(--fa-bark-mid); }

.regional-flyout-back:hover,
.regional-flyout-back:focus-visible {
	color: var(--fa-ember-deep);
	background: rgba(228, 101, 44, .12);
	box-shadow: none;
}

.regional-site-host {
	font-family: var(--fa-font-body);
	color: var(--fa-bark-soft);
}

.main-navigation .menu-toggle {
	background: var(--fa-button);
	border: 2px solid var(--fa-bark);
	border-radius: 10px;
	color: var(--fa-bark);
	font-family: var(--fa-font-display);
	font-weight: 600;
	box-shadow: 0 3px 0 var(--fa-bark);
}

@media (max-width: 900px) {
	.site-sidebar {
		border-right: 0;
		border-bottom: 2px solid var(--fa-line-mid);
	}
}

/* The footer is the ground: a dirt platform with a scalloped grass lip. The
   peeker rises from behind the grass. */
.site-footer {
	position: relative;
	margin-top: 4rem;
	padding-bottom: 76px; /* room for the status bar; the dirt runs under it */
	background: linear-gradient(180deg, var(--fa-dirt) 0%, var(--fa-dirt-deep) 100%);
	border-top: 8px solid var(--fa-moss);
	box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18);
}

.site-footer::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -20px;
	height: 14px;
	z-index: 2;
	background:
		radial-gradient(circle at 12px 14px, var(--fa-moss) 11px, transparent 12px) 0 0 / 24px 14px repeat-x,
		radial-gradient(circle at 12px 16px, var(--fa-moss-deep) 12px, transparent 13px) 12px 0 / 24px 14px repeat-x;
}

.site-footer .site-info {
	font-family: var(--fa-font-body);
	font-weight: 700;
	color: var(--fa-cream-2);
	text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}

/* ==========================================================================
   6. HERO — floating island, hanging sign
   ========================================================================== */
.ntw-hero {
	position: relative;
	padding: 1.4rem 0 2.4rem;
}

.ntw-hero-mascot {
	position: relative;
	z-index: 2;
	width: 176px;
	margin: 0 auto 46px; /* rope length */
	filter: drop-shadow(0 10px 8px rgba(74, 42, 18, .28));
	animation: none; /* the island bobs as one; see below */
}

/* The island under his feet: grass on top, dirt beneath. */
.ntw-hero::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 208px;
	z-index: 1;
	width: 250px;
	height: 44px;
	transform: translateX(-50%);
	border-radius: 50% / 40%;
	background: linear-gradient(180deg, var(--fa-moss) 0 14px, var(--fa-dirt) 14px 32px, var(--fa-dirt-deep) 32px);
	border: 2px solid var(--fa-bark);
	box-shadow: 0 8px 0 rgba(74, 42, 18, .22), inset 0 3px 0 rgba(255, 255, 255, .28);
}

html.fa-motion .ntw-hero-mascot,
html.fa-motion .ntw-hero::before {
	animation: fa-bob 5s ease-in-out infinite alternate;
}

@keyframes fa-bob {
	from { translate: 0 0; }
	to { translate: 0 -7px; }
}

/* ::before carries translateX(-50%) as a transform, so the bob uses the
   separate `translate` property and the two never fight. */

.ntw-hero-title {
	position: relative;
	display: inline-block;
	margin: 0 0 .9rem;
	padding: .45rem 1.7rem .6rem;
	font-family: var(--fa-font-display);
	font-weight: 700;
	font-size: 2.4rem;
	letter-spacing: .01em;
	color: var(--fa-cream);
	-webkit-text-stroke: 6px var(--fa-bark);
	paint-order: stroke fill;
	text-shadow: 0 3px 0 rgba(0, 0, 0, .2);
	background: var(--fa-plank);
	border: 2px solid var(--fa-bark);
	border-radius: 10px;
	box-shadow: 0 4px 0 var(--fa-bark), inset 0 2px 0 rgba(255, 255, 255, .3), inset 0 -3px 0 rgba(0, 0, 0, .15);
}

/* Ropes up to the island. */
.ntw-hero-title::before,
.ntw-hero-title::after {
	content: "";
	position: absolute;
	top: -46px;
	width: 5px;
	height: 46px;
	background: repeating-linear-gradient(180deg, #D9B06A 0 5px, #B9893E 5px 9px);
	border-left: 1px solid var(--fa-bark);
	border-right: 1px solid var(--fa-bark);
}

.ntw-hero-title::before { left: 26px; }
.ntw-hero-title::after { right: 26px; }

.ntw-hero-subtitle {
	font-family: var(--fa-font-body);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--fa-bark-mid);
}

/* ==========================================================================
   7. COMPONENTS — tiles, cards, buttons, group titles, announcements
   ========================================================================== */
.ntw-tile,
.ntw-card,
.ntw-dashboard-content {
	background: var(--fa-cream);
	border: 2px solid var(--fa-bark);
	border-radius: 14px;
	box-shadow: var(--fa-window-shadow);
}

/* Inner top highlight — the sticker/bevel read. */
.ntw-tile::before,
.ntw-card::before {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 10px;
	border-top: 2px solid rgba(255, 255, 255, .8);
	pointer-events: none;
}

.ntw-card { position: relative; }

.ntw-tile::after { height: 5px; }

.ntw-tile:hover {
	border-color: var(--fa-bark);
	box-shadow: 0 7px 0 var(--fa-bark), 0 16px 26px rgba(74, 42, 18, .18);
}

.ntw-tile:focus-visible {
	box-shadow: 0 4px 0 var(--fa-bark), 0 0 0 3px rgba(242, 178, 51, .7);
}

.ntw-tile-icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	margin-bottom: .35rem;
	font-size: 22px;
	border-radius: 11px;
	background: linear-gradient(180deg, #F27B45, var(--fa-ember) 60%, var(--fa-ember-deep));
	border: 2px solid var(--fa-bark);
	box-shadow: 0 2px 0 var(--fa-bark), inset 0 2px 0 rgba(255, 255, 255, .35);
	color: var(--fa-cream);
}

.ntw-tile-title,
.ntw-card-title {
	font-family: var(--fa-font-display);
	font-weight: 600;
	color: var(--fa-bark);
}

.ntw-tile-title { font-size: 1.18rem; }

.ntw-tile-desc,
.ntw-card-summary,
.ntw-card-meta {
	color: var(--fa-bark-mid);
	font-weight: 600;
}

.ntw-card-title a { text-decoration: none; }

/* Section titles become little wooden tags. */
.ntw-group-title {
	display: inline-block;
	padding: .3rem 1.1rem .4rem;
	font-family: var(--fa-font-display);
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--fa-cream);
	-webkit-text-stroke: 4px var(--fa-bark);
	paint-order: stroke fill;
	background: var(--fa-plank);
	border: 2px solid var(--fa-bark);
	border-bottom: 2px solid var(--fa-bark);
	border-radius: 9px;
	box-shadow: 0 3px 0 var(--fa-bark), inset 0 2px 0 rgba(255, 255, 255, .3);
}

.ntw-dashboard-content {
	border-left: 6px solid var(--fa-maple);
}

/* Buttons: game buttons, gold for the primary, cream for the ghost. */
.ntw-button,
.wp-block-button__link {
	background: var(--fa-button);
	border: 2px solid var(--fa-bark);
	border-radius: 10px;
	color: var(--fa-bark);
	font-family: var(--fa-font-display);
	font-weight: 600;
	box-shadow: 0 3px 0 var(--fa-bark), inset 0 2px 0 rgba(255, 255, 255, .55);
	transition: transform 120ms var(--fa-ease), box-shadow 120ms var(--fa-ease);
}

.ntw-button:hover,
.ntw-button:focus-visible,
.wp-block-button__link:hover {
	background: var(--fa-button);
	color: var(--fa-bark);
	transform: translateY(-1px);
	box-shadow: 0 4px 0 var(--fa-bark), inset 0 2px 0 rgba(255, 255, 255, .55);
}

.ntw-button:active {
	transform: translateY(2px);
	box-shadow: 0 1px 0 var(--fa-bark), inset 0 2px 0 rgba(255, 255, 255, .55);
}

.ntw-button--ghost {
	background: var(--fa-cream);
	color: var(--fa-bark-mid);
}

.ntw-button--ghost:hover,
.ntw-button--ghost:focus-visible {
	background: var(--fa-cream);
	color: var(--fa-bark);
}

/* Tables & pills (other templates). */
.ntw-table {
	background: var(--fa-cream);
	border: 2px solid var(--fa-bark);
	border-radius: 12px;
}

.ntw-table thead th {
	background: var(--fa-cream-2);
	color: var(--fa-bark);
	font-family: var(--fa-font-display);
	font-weight: 600;
	border-bottom: 2px solid var(--fa-line-mid);
}

.ntw-table tbody tr:hover { background: rgba(242, 178, 51, .18); }

.ntw-status {
	border-radius: 999px;
	border: 2px solid var(--fa-bark);
	font-family: var(--fa-font-display);
	font-weight: 600;
	box-shadow: 0 2px 0 var(--fa-bark);
}

/* ==========================================================================
   8. CAPY — hat, peeker, quip balloon, drifters
   ========================================================================== */
.ntw-capy-sky { z-index: 1; }

.ntw-capy-drifter {
	max-width: 130px; /* capy.js sizes them up to 200px; the world is busy enough */
	filter: drop-shadow(0 8px 10px rgba(74, 42, 18, .2)) saturate(1.05) opacity(.6);
}

/* The peek window grows upward to leave room for the hat; the rig keeps the
   photo where portal.css had it (head and shoulders showing). */
.ntw-capy-peek {
	width: 96px;
	height: 132px;
	z-index: 1;
}

.ntw-capy-peek-rig {
	position: absolute;
	left: 0;
	right: 0;
	top: 40px;
	will-change: transform;
}

.ntw-capy-peek-img { will-change: auto; }

.ntw-capy-peek-hat {
	position: absolute;
	top: -34px;
	right: 6px;
	width: 46px;
	height: auto;
	transform: rotate(16deg);
	transform-origin: 50% 100%;
	filter: drop-shadow(0 2px 2px rgba(74, 42, 18, .3));
	pointer-events: none;
}

.ntw-capy-quip {
	bottom: calc(100% + 120px);
	background: #fff;
	border: 2px solid var(--fa-bark);
	border-radius: 18px;
	border-bottom-right-radius: 4px;
	box-shadow: 0 4px 0 var(--fa-bark), 0 14px 30px rgba(74, 42, 18, .18);
	font-family: var(--fa-font-display);
	font-weight: 500;
	font-size: 1.45rem;
	color: var(--fa-bark);
}

.ntw-capy-quip::after {
	background: #fff;
	border-right: 2px solid var(--fa-bark);
	border-bottom: 2px solid var(--fa-bark);
}

.ntw-capy-empty-home { color: var(--fa-ember-deep); }

/* ==========================================================================
   9. HITS — anniversary cheers on click (spawned by fall.js)
   ========================================================================== */
.fa-hit {
	position: fixed;
	z-index: var(--fa-z-hit);
	pointer-events: none;
	font-family: var(--fa-font-display);
	font-weight: 700;
	font-size: 24px;
	line-height: 1;
	white-space: nowrap;
	color: var(--fa-gold-hi);
	-webkit-text-stroke: 5px var(--fa-bark);
	paint-order: stroke fill;
	letter-spacing: .02em;
	text-shadow: 0 3px 0 rgba(0, 0, 0, .25);
	will-change: transform, opacity;
}

.fa-hit--crit {
	font-size: 30px;
	color: #FF7A45;
}

/* ==========================================================================
   10. INNER PAGES — page-title signs, feature-sheet literals
   ========================================================================== */
.ntw-page-title {
	display: inline-block;
	padding: .35rem 1.3rem .45rem;
	font-family: var(--fa-font-display);
	font-weight: 700;
	font-size: 1.9rem;
	letter-spacing: .01em;
	color: var(--fa-cream);
	-webkit-text-stroke: 5px var(--fa-bark);
	paint-order: stroke fill;
	text-shadow: 0 3px 0 rgba(0, 0, 0, .2);
	background: var(--fa-plank);
	border: 2px solid var(--fa-bark);
	border-radius: 10px;
	box-shadow: 0 4px 0 var(--fa-bark), inset 0 2px 0 rgba(255, 255, 255, .3), inset 0 -3px 0 rgba(0, 0, 0, .15);
}

.ntw-page-subtitle {
	font-family: var(--fa-font-body);
	font-weight: 700;
	color: var(--fa-bark-mid);
}

.ntw-back-link a { color: var(--fa-bark-mid); }
.ntw-back-link a:hover { color: var(--fa-ember-deep); }

/* portal.css / requests.css / suggestions.css lean on a pale green tint
   (#eef4f0 / #cfe8c8) for hover, tabs and callouts; restate it in gold. */
.ntw-button--ghost:hover,
.ntw-button--ghost:focus-visible,
.regional-flyout-back:hover,
.ntw-req-tab:hover {
	background: rgba(242, 178, 51, .22);
}

.ntw-req-tab {
	border: 2px solid var(--fa-line-mid);
	border-radius: 10px;
	font-family: var(--fa-font-display);
	font-weight: 600;
	color: var(--fa-bark-mid);
}

.ntw-req-tab.is-active,
.ntw-req-tab[aria-selected="true"] {
	background: rgba(242, 178, 51, .4);
	border-color: var(--fa-bark);
	color: var(--fa-bark);
}

.ntw-req-guidance {
	background: var(--fa-cream);
	border: 2px solid var(--fa-bark);
	border-left: 6px solid var(--fa-maple);
	border-radius: 12px;
	color: var(--fa-bark);
}

.ntw-req-guidance p + p { color: var(--fa-bark-mid); }

.ntw-req-count {
	background: var(--fa-ember);
	color: var(--fa-cream);
	border: 1px solid var(--fa-bark);
}

.ntw-req-modal-panel,
.ntw-req-modal {
	background: var(--fa-cream);
	border: 2px solid var(--fa-bark);
	border-radius: 14px;
	box-shadow: 0 6px 0 var(--fa-bark), 0 30px 60px rgba(74, 42, 18, .35);
}

.ntw-req-modal-backdrop { background: rgba(74, 42, 18, .55); }

.ntw-sug-step-num {
	color: var(--fa-cream);
	font-family: var(--fa-font-display);
}

/* sales-map.css: keep the ocean readable on the warm field. */
#ntw-map { background: rgba(255, 248, 234, .55); border-radius: 12px; }

.ntw-map-zoombar,
.ntw-map-legend {
	background: var(--fa-cream);
	border: 2px solid var(--fa-bark);
	border-radius: 10px;
	color: var(--fa-bark);
}

/* The status bar parks bottom-centre of the viewport, right where the map
   keeps its zoom controls; slide them to the corner so Reset stays clickable. */
.ntw-map-zoombar {
	left: auto;
	right: 16px;
	transform: none;
}

.ntw-map-zb { color: var(--fa-bark-mid); }
.ntw-map-zb:hover { background: rgba(242, 178, 51, .3); color: var(--fa-bark); }

/* ==========================================================================
   11. LOGIN SCREEN (wp-login.php) — replaces the login.css literals
   ========================================================================== */
body.login {
	background: var(--ntw-bg);
	font-family: var(--fa-font-body);
}

/* wp-login has no #page wrapper; keep the form above the world (z 0) and
   the capy sky (z 1), like #page.site does on the front end. */
#login {
	position: relative;
	z-index: 10;
}

body.login::after {
	filter: saturate(1) drop-shadow(0 6px 6px rgba(74, 42, 18, .25));
	opacity: .2;
	bottom: 7vh;
}

.login h1 a {
	filter: drop-shadow(0 10px 8px rgba(74, 42, 18, .28));
}

.login form {
	background: var(--fa-cream);
	border: 2px solid var(--fa-bark);
	border-radius: 14px;
	box-shadow: var(--fa-window-shadow);
}

.login label {
	color: var(--fa-bark);
	font-family: var(--fa-font-display);
	font-weight: 600;
}

.login form .input,
.login input[type="text"],
.login input[type="password"] {
	background: #fff;
	border: 2px solid var(--fa-line-mid);
	border-radius: 10px;
	color: var(--fa-bark);
}

.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus {
	border-color: var(--fa-bark);
	box-shadow: 0 0 0 3px rgba(242, 178, 51, .5);
	outline: none;
}

.login .button.wp-hide-pw { color: var(--fa-bark-mid); }

.login .button.wp-hide-pw:focus {
	border-color: var(--fa-bark);
	box-shadow: 0 0 0 3px rgba(242, 178, 51, .5);
}

.wp-core-ui .button-primary {
	background: var(--fa-button);
	border: 2px solid var(--fa-bark);
	border-radius: 10px;
	color: var(--fa-bark);
	font-family: var(--fa-font-display);
	font-weight: 600;
	text-shadow: none;
	box-shadow: 0 3px 0 var(--fa-bark), inset 0 2px 0 rgba(255, 255, 255, .55);
}

.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus {
	background: var(--fa-button);
	border-color: var(--fa-bark);
	color: var(--fa-bark);
	box-shadow: 0 4px 0 var(--fa-bark), inset 0 2px 0 rgba(255, 255, 255, .55);
}

.login #nav a,
.login #backtoblog a { color: var(--fa-bark-mid); }

.login #nav a:hover,
.login #backtoblog a:hover { color: var(--fa-ember-deep); }

.login .message,
.login .notice,
.login .success {
	background: var(--fa-cream);
	border: 2px solid var(--fa-bark);
	border-left: 6px solid var(--fa-moss);
	border-radius: 10px;
	color: var(--fa-bark);
	box-shadow: 0 3px 0 var(--fa-bark);
}

.login #login_error {
	background: var(--fa-cream);
	border: 2px solid var(--fa-bark);
	border-left: 6px solid var(--fa-maple);
	border-radius: 10px;
	color: var(--fa-bark);
	box-shadow: 0 3px 0 var(--fa-bark);
}

/* Login-screen toggle: the .login-scoped pill in login.css outweighs the
   global rule above, so restate the game button here. Bottom-right, clear
   of the status bar. */
body.login .ntw-view-toggle {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 20;
	padding: .5rem 1.05rem .55rem;
	background: var(--fa-button);
	border: 2px solid var(--fa-bark);
	border-radius: 12px;
	font-family: var(--fa-font-display);
	font-size: .9rem;
	font-weight: 600;
	letter-spacing: .01em;
	text-transform: none;
	color: var(--fa-bark);
	box-shadow: 0 3px 0 var(--fa-bark), inset 0 2px 0 rgba(255, 255, 255, .55);
}

body.login .ntw-view-toggle:hover,
body.login .ntw-view-toggle:focus-visible {
	color: var(--fa-bark);
	border-color: var(--fa-bark);
	box-shadow: 0 4px 0 var(--fa-bark), 0 0 0 3px rgba(242, 178, 51, .6);
	outline: none;
}

@media (max-width: 900px) {
	body.login .ntw-view-toggle { bottom: 92px; }
}

/* ==========================================================================
   12. REDUCED MOTION — kill every animation this sheet adds
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.fa-cloud,
	.fa-bar--exp .fa-bar__fill::after,
	.fa-minimap__you,
	.ntw-hero-mascot,
	.ntw-hero::before {
		animation: none !important;
	}

	.fa-event { transition: none; }
}