/*!
 * Mystwood Studios — Games tier layer (assets/css/games.css)
 *
 * Topic 27 BRAND-WP4 Iter 4 — the bespoke cinematic language for the games
 * pages (Clear the Skies, Games hub, Griffin Roost Manager) that the closed
 * inc/sections/* library cannot express. Ports the Claude Design `games.css`
 * treatments (rider trio, siege gallery, chapter/montage heroes, roost
 * showcase, concept markers) into the classic theme. Enqueued conditionally on
 * the three games templates only (see functions.php).
 *
 * Band backgrounds + light text are already painted by _studio.css's
 * `.mw-section--brand-studio[data-bg-token]` rules — this layer only styles the
 * bespoke inner components. Missing DS tokens degrade via var(--token, fallback).
 *
 * Iter 4a wired the Clear the Skies subset (markers, hero seal/pixel, rider
 * trio + siege). The ghero / chapter / roost / gcard-art treatments arrive with
 * the Games hub (4b) and Griffin Roost Manager (4c).
 *
 * @package Mystwood_Studios_AB
 * @since   Topic 27 BRAND-WP4 Iter 4a
 */

/* Crisp pixel art (Clear the Skies is genuine low-res pixel art). */
.px {
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}

/* Games-tier hero: keep the pixel key-art crisp behind the scrim. */
.mw-page-clear-the-skies .mw-section--hero .mw-section__bg img {
	image-rendering: pixelated;
	image-rendering: crisp-edges;
	object-position: center 40%;
}

/* Keep the Clear the Skies key art crisp in the premise media-text split too. */
.mw-page-clear-the-skies .mw-section--media-text .mw-section__media img {
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}

/* ---- Concept-art markers (so nothing reads as final) --------------------- */
.concept-note {
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 0.78rem;
	letter-spacing: 0.03em;
	color: rgba(255, 255, 255, 0.5);
	margin: 1.1rem 0 0;
	text-align: center;
}

.concept-note--light {
	color: #5d4a2c;
}

/* Hero concept-art seal chip (hero.php `seal` slot). */
.mw-hero__seal {
	margin: 0 0 0.9rem;
}

.mw-hero__seal-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(4, 3, 16, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.2);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.mw-hero__seal-chip::before {
	content: "\25C7"; /* ◇ */
	opacity: 0.85;
}

/* Gold hero badge chip (Claude Design `mw-chip--gold`) — the games-tier
 * "Demo soon" status pill. Overrides the base badge-chip colours only. */
.mw-hero__badge-chip--gold {
	background: var(--kw-gold, #f4c430);
	color: #2a1e05;
	border-color: transparent;
}

/* ============================================================================
 * RIDER SECTION — "choose your rider" / "face the Darkening"
 * (inc/games/rider-section.php)
 * ========================================================================== */
.mw-section--riders,
.mw-section--bosses {
	padding-block: clamp(3rem, 7vw, 6rem);
}

.mw-section--riders .mw-section__inner,
.mw-section--bosses .mw-section__inner {
	max-width: var(--mw-content-width, 72rem);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
	text-align: center;
}

.mw-section--riders .mw-section__intro,
.mw-section--bosses .mw-section__intro {
	margin-inline: auto;
}

/* Topic 33 FIX-WP5 R8 — owner-ratified SECOND G9-freeze deviation (alongside
   the Elder Giant accent): the mockup's "FACE THE DARKENING" eyebrow is a
   saturated rose (#F87C90 sampled), not the plain-white eyebrow every other
   band inherits. Reuse the Malakar accent hex rather than a third rose hex.
   Scoped to .mw-section--bosses ONLY — no other band's eyebrow moves. */
.mw-section--bosses .mw-section__eyebrow {
	color: #f2897f;
}

/* Rider trio (transparent hero/boss sprites over a soft radial glow disc). */
.riders {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 2.4vw, 1.75rem);
	margin-top: 2.75rem;
}

.riders--cols-2 {
	grid-template-columns: repeat(2, 1fr);
	max-width: 48rem;
	margin-inline: auto;
}

.rider {
	position: relative;
	overflow: hidden;
	text-align: center;
	border: 1px solid var(--mw-border-hairline, rgba(255, 255, 255, 0.12));
	border-radius: var(--mw-radius-soft, 8px);
	padding: 1.75rem 1.25rem 1.5rem;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
	transition: transform var(--mw-dur-base, 0.2s) var(--mw-ease, ease),
		border-color var(--mw-dur-base, 0.2s) var(--mw-ease, ease);
}

.rider:hover {
	transform: var(--mw-lift, translateY(-4px));
	border-color: var(--mw-border-soft, rgba(255, 255, 255, 0.24));
}

.rider__disc {
	position: absolute;
	top: 1.25rem;
	left: 50%;
	width: clamp(140px, 15vw, 190px);
	height: clamp(140px, 15vw, 190px);
	transform: translateX(-50%);
	border-radius: 50%;
	filter: blur(34px);
	opacity: 0.5;
	z-index: 0;
	background: var(--rider-glow, radial-gradient(circle, rgba(63, 167, 214, 0.5), transparent 70%));
}

.rider__art {
	position: relative;
	z-index: 1;
	display: block;
	width: clamp(128px, 15vw, 180px);
	height: auto;
	margin: 0 auto 0.9rem;
	filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.5));
}

.rider__class {
	position: relative;
	z-index: 1;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin: 0 0 0.35rem;
	color: var(--rider-color, #8fd6f2);
}

.rider__name {
	position: relative;
	z-index: 1;
	font-family: var(--mw-font-display, system-ui, sans-serif);
	font-weight: 400;
	font-size: 1.5rem;
	color: #fff;
	margin: 0 0 0.55rem;
}

.rider__desc {
	position: relative;
	z-index: 1;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--mw-color-text-secondary, #b8b4da);
	margin: 0;
}

/* ---- Siege gallery — pixel-art environment strip ------------------------- */
.siege {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(0.6rem, 1.2vw, 1rem);
	margin-top: 2.5rem;
}

.siege figure {
	position: relative;
	margin: 0;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--mw-border-hairline, rgba(255, 255, 255, 0.12));
	aspect-ratio: 16 / 10;
	background: #05040f;
}

.siege img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--mw-dur-slow, 0.4s) var(--mw-ease, ease);
}

.siege figure:hover img {
	transform: scale(1.05);
}

.siege figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1.4rem 0.8rem 0.6rem;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 0.72rem;
	letter-spacing: 0.03em;
	color: rgba(255, 255, 255, 0.9);
	background: linear-gradient(0deg, rgba(3, 3, 18, 0.85), transparent);
}

/* ============================================================================
 * RESPONSIVE
 * ========================================================================== */
@media (max-width: 900px) {
	.siege {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 620px) {
	.riders {
		grid-template-columns: 1fr;
		max-width: 22rem;
		margin-inline: auto;
	}
}

/* ============================================================================
 * ITER 4b — GAMES HUB: montage hero, flagship chapter, roost showcase, tower
 *
 * Ports the Claude Design `.ghero` / `.chapter` / `.roost` treatments + chip
 * markers. The montage hero restores the prototype's
 * `margin-top: calc(-1 * --mw-header-h)` bleed so the siege art reaches the top
 * of the viewport under the transparent sticky header (Topic 27 fix — a sticky
 * header bleeds under a negative top margin just as well as a fixed one; the
 * earlier "dropped because sticky" note was wrong). Missing DS tokens degrade
 * via var(--token, fallback), matching the Iter 4a subset above.
 * ========================================================================== */

/* ---- Chips + concept marker (chapter tags) ------------------------------- */
.mw-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--mw-font-display, system-ui, sans-serif);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.9);
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.2);
	white-space: nowrap;
}

.mw-chip--gold {
	background: var(--kw-gold, #f4c430);
	color: #2a1e05;
	border-color: transparent;
}

.concept-tag {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
	padding: 5px 11px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.18);
	white-space: nowrap;
}

.concept-tag::before {
	content: "\25C7"; /* diamond */
	opacity: 0.85;
}

/* ============================================================================
 * MONTAGE HERO — full-bleed siege scene + Prince Adam (inc/games/montage-hero)
 * ========================================================================== */
.ghero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: clamp(560px, 82vh, 900px);
	display: flex;
	align-items: flex-end;
	background: #050310;
	/* Full-bleed up under the transparent sticky header (Claude Design .ghero).
	 * Content sits at flex-end so it never collides with the menu; the two
	 * top-anchored elements (concept seal + roost inset) are offset by the
	 * header height below so they clear it. */
	margin-block-start: calc(-1 * var(--mw-header-h));
}

.ghero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.ghero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
}

.ghero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(8deg, rgba(4, 3, 16, 0.96) 6%, rgba(4, 3, 16, 0.66) 30%, rgba(4, 3, 16, 0.12) 60%, rgba(4, 3, 16, 0.5) 100%),
		linear-gradient(90deg, rgba(4, 3, 16, 0.88) 0%, rgba(4, 3, 16, 0.44) 38%, transparent 66%),
		radial-gradient(130% 90% at 50% -8%, transparent 52%, rgba(4, 3, 16, 0.55) 100%);
}

/* Prince Adam — foreground hero figure. */
.ghero__hero-fig {
	position: absolute;
	z-index: 2;
	right: 2.5%;
	bottom: 5%;
	width: clamp(210px, 30vw, 448px);
	height: auto;
	filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.62));
}

/* Second-game nod — small framed roost inset (clearly secondary). */
.ghero__inset {
	position: absolute;
	z-index: 3;
	right: 3.5%;
	top: calc(var(--mw-header-h) + 1.5rem);
	width: clamp(118px, 13vw, 168px);
	margin: 0;
	overflow: hidden;
	border-radius: 12px;
	border: 2px solid rgba(255, 255, 255, 0.5);
	box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.7);
	transform: rotate(3deg);
}

.ghero__inset img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: 52% 15%;
}

.ghero__inset figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1rem 0.45rem 0.38rem;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 9.5px;
	letter-spacing: 0.03em;
	text-align: center;
	color: #fff;
	background: linear-gradient(0deg, rgba(4, 3, 16, 0.92), transparent);
}

/* Concept-art seal (top-left). */
.ghero__concept {
	position: absolute;
	z-index: 4;
	left: max(var(--mw-gutter, clamp(1rem, 4vw, 2rem)), 4%);
	top: calc(var(--mw-header-h) + 1.5rem);
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(4, 3, 16, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.2);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.ghero__concept::before {
	content: "\25C7"; /* diamond */
	opacity: 0.85;
}

.ghero__inner {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: var(--mw-content-width, 72rem);
	margin-inline: auto;
	/* Reserve the top band occupied by the sticky header + the absolutely
	 * positioned concept-art seal (top: header-h + 1.5rem). The copy stack is
	 * flex-end aligned, so without this reserve it rises up under the seal on
	 * shorter viewports where the copy nearly fills the hero. With the reserve
	 * the hero grows (min-height permitting) and the eyebrow/title always clear
	 * the seal. */
	padding-block: calc(var(--mw-header-h) + 4.5rem) clamp(2.75rem, 6vw, 5rem);
	padding-inline: var(--mw-gutter, clamp(1rem, 4vw, 2rem));
}

.ghero__copy {
	max-width: 40rem;
}

.ghero__eyebrow {
	font-family: var(--mw-font-display, system-ui, sans-serif);
	font-size: clamp(0.8rem, 1vw, 0.92rem);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #8fd6f2;
	margin: 0 0 1rem;
}

.ghero__title {
	font-family: var(--mw-font-display, system-ui, sans-serif);
	font-weight: 400;
	color: #fff;
	font-size: clamp(3rem, 8vw, 6.4rem);
	line-height: 0.94;
	margin: 0;
	text-shadow: 0 12px 44px rgba(2, 2, 18, 0.7);
}

.ghero__sub {
	font-size: clamp(1.05rem, 1.5vw, 1.3rem);
	line-height: 1.55;
	color: rgba(250, 248, 255, 0.9);
	max-width: 33rem;
	margin: 1.4rem 0 0;
	text-shadow: 0 2px 14px rgba(2, 2, 18, 0.5);
}

.ghero__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-top: clamp(1.75rem, 3vw, 2.4rem);
}

.ghero__meta {
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 0.76rem;
	letter-spacing: 0.04em;
	color: rgba(250, 248, 255, 0.62);
	margin: 1.75rem 0 0;
}

@media (prefers-reduced-motion: no-preference) {
	.ghero__hero-fig {
		animation: mw-gfloat-hero 6.5s ease-in-out infinite;
	}

	.ghero__inset {
		animation: mw-gfloat-inset 8s ease-in-out infinite;
	}
}

@keyframes mw-gfloat-hero {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-13px); }
}

@keyframes mw-gfloat-inset {
	0%, 100% { transform: rotate(3deg) translateY(0); }
	50% { transform: rotate(3deg) translateY(-8px); }
}

/* ============================================================================
 * CHAPTER — full-bleed cinematic game band (inc/games/chapter)
 * ========================================================================== */
.chapter {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: clamp(520px, 74vh, 820px);
	display: flex;
	align-items: flex-end;
	background: #050310;
}

.chapter__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.chapter__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 38%;
}

.chapter__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, #050310 0%, rgba(5, 3, 16, 0) 20%),
		linear-gradient(6deg, rgba(3, 3, 20, 0.96) 4%, rgba(3, 3, 20, 0.6) 34%, rgba(3, 3, 20, 0.15) 66%, rgba(3, 3, 20, 0.4) 100%),
		radial-gradient(80% 60% at 22% 78%, rgba(11, 17, 64, 0.5), transparent 70%);
}

.chapter__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--mw-content-width, 72rem);
	margin-inline: auto;
	padding: clamp(3rem, 8vw, 6rem) var(--mw-gutter, clamp(1rem, 4vw, 2rem)) clamp(2.5rem, 6vw, 5rem);
}

.chapter__logo {
	display: block;
	width: clamp(200px, 26vw, 320px);
	height: auto;
	margin: 0 0 1.4rem -0.35rem;
	filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.6));
}

.chapter__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem;
}

.chapter__title {
	font-family: var(--mw-font-display, system-ui, sans-serif);
	font-weight: 400;
	color: #fff;
	font-size: clamp(2.2rem, 5vw, 4rem);
	line-height: 1;
	margin: 1rem 0 0;
	max-width: 20ch;
	text-shadow: 0 8px 30px rgba(2, 2, 18, 0.55);
}

.chapter__sub {
	font-size: clamp(1.05rem, 1.5vw, 1.3rem);
	line-height: 1.55;
	color: rgba(250, 248, 255, 0.88);
	max-width: 44rem;
	margin: 1.25rem 0 0;
}

.chapter__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 2rem;
}

/* ============================================================================
 * SEAM — hero → flagship "angled cut, art to art"  (Topic 33 FIX-WP21)
 *
 * Ported from the designer handoff, accepted option 1d:
 *   Mystwood Studios Design System_AngledCut/design_handoff_games_seam/SNIPPET.css
 *
 * The montage hero and the flagship chapter are both dark pixel-art siege
 * scenes. Stacked with straight edges and matching near-black gradients they
 * read as one long image, so the flagship arrived with no announcement. This
 * clips the hero's bottom on a shallow diagonal, starts the flagship on that
 * same diagonal, and rides a 3px gilt line along the shared cut — no black gap
 * and no horizontal edge anywhere.
 *
 * Three alternates were rejected in the prototype; do not resurrect them:
 * 1a rampart horizon, 1b chapter rail, 1c angled cut over a black gap.
 *
 * GEOMETRY IS LOAD-BEARING. The cut only reads correctly while the hero clip,
 * the gilt line and the flagship clip share ONE shear value and ONE box origin.
 * If the gilt line ever tapers instead of holding a constant thickness end to
 * end, those three have drifted apart. The numbers are the designer's, verbatim.
 *
 * The negative pull assumes .seam--angle-bleed stays a SELF-COLLAPSING box:
 * height 0 with no padding or border, so its own margins collapse through and
 * the flagship's margin measures from the hero's bottom border edge, while the
 * seam's own border edges stay pinned there — which is what the ::after anchors
 * its `bottom: 0` to. Giving .seam padding, a border, a min-height or a margin
 * silently shifts the gilt line by up to a full shear.
 *
 * This is a clip-path art-to-art seam, NOT a torn-paper .mw-divider. The games
 * tier's "no dividers" ruling still stands (see templates/template-page-games.php),
 * and FIX-WP19's site-wide bleeding-divider rule explicitly excludes this seam.
 * ========================================================================== */
.ghero--angled-bottom,
.seam--angle-bleed,
.chapter--angled-bleed {
	--seam-shear: 54px;
}

/* Shallower diagonal on phones. Keep adjacent to the declaration above — the
 * three selectors must always be edited as one set. */
@media (max-width: 620px) {
	.ghero--angled-bottom,
	.seam--angle-bleed,
	.chapter--angled-bleed {
		--seam-shear: 30px;
	}
}

/* 1 · Hero — its bottom edge becomes the diagonal, rising to the right. */
.ghero--angled-bottom {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--seam-shear)), 0 100%);
}

/* Hero copy clears the rising cut — without this the monospace meta line
 * collides with it. Overrides only the end value of .ghero__inner's
 * `padding-block` shorthand (two classes beat one); the start value, which
 * reserves the sticky header + concept seal band, survives untouched. */
.ghero--angled-bottom .ghero__inner {
	padding-bottom: calc(var(--seam-shear) + 1.5rem);
}

/* 2 · Zero-height rail carrying the 3px gilt line above both scenes. */
.seam--angle-bleed {
	position: relative;
	height: 0;
	z-index: 7;
}

.seam--angle-bleed::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: calc(var(--seam-shear) + 3px);
	/* Gold fading out at both ends, brightest just right of centre, so it reads
	 * as firelight rather than a UI rule. Literal rgba rather than the kw-gold
	 * token because the alpha stops cannot consume a hex custom property. */
	background: linear-gradient(92deg, rgba(244, 196, 48, 0) 3%, rgba(244, 196, 48, 0.7) 34%, rgba(255, 232, 160, 0.95) 58%, rgba(244, 196, 48, 0.4) 84%, rgba(244, 196, 48, 0) 97%);
	clip-path: polygon(0 var(--seam-shear), 100% 0, 100% 3px, 0 100%);
}

/* 3 · Flagship — same diagonal, pulled up so its clipped top edge IS the
 * hero's bottom edge. */
.chapter--angled-bleed {
	position: relative;
	z-index: 2;
	margin-top: calc(-1 * var(--seam-shear));
	clip-path: polygon(0 var(--seam-shear), 100% 0, 100% 100%, 0 100%);
}

.chapter--angled-bleed .chapter__inner {
	padding-top: clamp(4rem, 9vw, 7rem);
}

/* 4 · Drop the flagship's own black top fade so its art starts bright directly
 * under the seam — that value jump does half the separation work. The dropped
 * layer was `linear-gradient(180deg, #050310 0%, rgba(5,3,16,0) 20%)`; the two
 * below are .chapter__scrim's surviving layers, unchanged. */
.chapter--no-topfade .chapter__scrim {
	background:
		linear-gradient(6deg, rgba(3, 3, 20, 0.96) 4%, rgba(3, 3, 20, 0.6) 34%, rgba(3, 3, 20, 0.15) 66%, rgba(3, 3, 20, 0.4) 100%),
		radial-gradient(80% 60% at 22% 78%, rgba(11, 17, 64, 0.5), transparent 70%);
}

/* 5 · Flagship BOTTOM bleed (Topic 33 FIX-WP27).
 *
 * The owner's 2026-08-01 note — "make the image bleed/fade out into the
 * background" — pointed at this section. Measured before building: the art
 * (.chapter__bg img, object-fit: cover) runs the full 891px of the section and
 * ends at bottomOffsetFromRoot 0, i.e. it stops dead on a straight horizontal
 * line. .chapter__scrim is NOT a bottom fade — it is a 6deg directional scrim
 * for headline legibility, plus a radial. And FIX-WP21's clip-path shears the
 * TOP only (polygon(0 shear, 100% 0, 100% 100%, 0 100%)); the bottom is square.
 *
 * The band below (.mw-section--riders) is studio-dark, the SAME colour the page
 * already paints — so nothing changes tone here. What reads as a hard cut is the
 * pixel art meeting flat colour with no transition. This ramps the art out into
 * that band so the two become one surface.
 *
 * Smoothstep, not a 2-stop linear ramp: a 2-stop gradient is steepest AT its
 * endpoint by construction, so it always terminates on a corner the eye reads as
 * a line (a Mach band). s(t) = t^2(3-2t) has zero slope at both ends. Same
 * 11-stop table as sections/_hero.css — kept identical on purpose so the two
 * bleed surfaces stay one mechanism.
 *
 * z-index 1 puts it above .chapter__bg (0) and, being the generated last child,
 * above .chapter__scrim (also 1) — while staying below .chapter__inner (2), so
 * the headline and CTAs are never washed. .chapter's own overflow:hidden and
 * isolation:isolate keep it contained.
 *
 * TOP EDGE IS OUT OF SCOPE. FIX-WP21 ported the designer's angled cut verbatim
 * and measured its gilt line at a constant 3px end to end. Do not touch it. */
.chapter--angled-bleed::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	block-size: clamp(120px, 20%, 260px);
	z-index: 1;
	pointer-events: none;
	/* Fallback for engines without color-mix() — degrades to the plain ramp
	 * rather than losing the bleed entirely. Never use background-color +
	 * mask-image here: that degrades to an OPAQUE SLAB if the mask drops. */
	background-image: linear-gradient(to bottom, transparent, var(--mw-bleed-tone, #0E0841));
	background-image: linear-gradient(
		to bottom,
		color-mix(in srgb, var(--mw-bleed-tone, #0E0841) 0%,    transparent)   0%,
		color-mix(in srgb, var(--mw-bleed-tone, #0E0841) 2.8%,  transparent)  10%,
		color-mix(in srgb, var(--mw-bleed-tone, #0E0841) 10.4%, transparent)  20%,
		color-mix(in srgb, var(--mw-bleed-tone, #0E0841) 21.6%, transparent)  30%,
		color-mix(in srgb, var(--mw-bleed-tone, #0E0841) 35.2%, transparent)  40%,
		color-mix(in srgb, var(--mw-bleed-tone, #0E0841) 50%,   transparent)  50%,
		color-mix(in srgb, var(--mw-bleed-tone, #0E0841) 64.8%, transparent)  60%,
		color-mix(in srgb, var(--mw-bleed-tone, #0E0841) 78.4%, transparent)  70%,
		color-mix(in srgb, var(--mw-bleed-tone, #0E0841) 89.6%, transparent)  80%,
		color-mix(in srgb, var(--mw-bleed-tone, #0E0841) 97.2%, transparent)  90%,
		var(--mw-bleed-tone, #0E0841) 100%
	);
}

/* The tone is the band the flagship leads INTO, not its own #050310 backdrop —
 * the same outgoing/incoming rule the divider system and FIX-WP25's Clear the
 * Skies terminus both follow. */
.chapter--angled-bleed {
	--mw-bleed-tone: var(--studio-dark);
}

/* ============================================================================
 * ROOST SHOWCASE — cozy bright storybook band (inc/games/roost-showcase)
 * kw-cream is painted per-section-type in the theme, so paint .mw-section--roost
 * here (the generic .mw-section--brand-studio[data-bg-token] painter is studio-tier only).
 * ========================================================================== */
.mw-section--roost[data-bg-token="kw-cream"] {
	background-color: var(--kw-cream, #fff1d6);
	color: #040420;
}

.mw-section--roost {
	padding-block: clamp(3rem, 7vw, 6rem);
}

.mw-section--roost .mw-section__inner {
	max-width: var(--mw-content-width, 72rem);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

.roost {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.roost__eyebrow {
	font-family: var(--mw-font-display, system-ui, sans-serif);
	font-size: 0.9rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--kw-ink, #3a2c14);
	margin: 0 0 0.8rem;
}

.roost__title {
	font-family: var(--mw-font-display, system-ui, sans-serif);
	font-weight: 400;
	font-size: var(--mw-clamp-h2, clamp(1.9rem, 4vw, 3rem));
	line-height: 1.08;
	margin: 0 0 1.1rem;
	color: var(--kw-ink, #3a2c14);
}

.roost__body {
	font-size: 1.075rem;
	line-height: 1.7;
	color: #5d4a2c;
	margin: 0;
	max-width: 34rem;
}

.roost__body p {
	margin: 0 0 1rem;
}

.roost__feats {
	list-style: none;
	margin: 1.4rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

.roost__feats li {
	position: relative;
	padding-left: 1.7rem;
	font-size: 1rem;
	line-height: 1.5;
	color: #5d4a2c;
}

.roost__feats li::before {
	content: "\2726"; /* star */
	position: absolute;
	left: 0;
	top: -0.05em;
	color: var(--kw-gold, #f4c430);
	font-size: 1.05rem;
}

.roost__cta {
	margin-top: 1.9rem;
}

.roost__art {
	position: relative;
	min-height: clamp(360px, 40vw, 480px);
}

.roost__plate {
	display: block;
	width: 78%;
	border-radius: 20px;
	border: 4px solid #fff;
	box-shadow: 0 30px 60px -22px rgba(90, 60, 20, 0.5);
}

.roost__phone {
	position: absolute;
	right: 0;
	bottom: -6%;
	width: 40%;
	height: auto;
	filter: drop-shadow(0 22px 32px rgba(90, 60, 20, 0.42));
}

.roost__thumbs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(0.9rem, 2vw, 1.4rem);
	margin: clamp(2.25rem, 4vw, 3.25rem) auto 0;
	max-width: 720px;
}

.roost__thumbs figure {
	margin: 0;
}

.roost__thumbs img {
	width: 100%;
	aspect-ratio: 9 / 16;
	object-fit: cover;
	object-position: top;
	border-radius: 16px;
	border: 4px solid #fff;
	box-shadow: 0 14px 26px -12px rgba(90, 60, 20, 0.42);
	display: block;
}

.roost__thumbs figcaption {
	text-align: center;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 0.72rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: #4a3a1e;
	margin-top: 0.6rem;
}

/* ============================================================================
 * TOWER TEASER — narrow centred dark band + "art in progress" placeholder
 * (rendered inline in template-page-games.php)
 * ========================================================================== */
.mw-section--tower {
	padding-block: clamp(3rem, 7vw, 6rem);
}

.mw-section--tower .mw-section__inner {
	max-width: 48rem;
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
	text-align: center;
}

.tower__eyebrow {
	font-family: var(--mw-font-display, system-ui, sans-serif);
	font-size: clamp(0.8rem, 1vw, 0.92rem);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #8fd6f2;
	margin: 0 0 1rem;
}

.tower__title {
	font-family: var(--mw-font-display, system-ui, sans-serif);
	font-weight: 400;
	color: #fff;
	font-size: clamp(2rem, 5vw, 3.5rem);
	line-height: 1.05;
	margin: 0 0 1.1rem;
}

.tower__lead {
	font-size: clamp(1.02rem, 1.4vw, 1.2rem);
	line-height: 1.7;
	color: var(--mw-color-text-secondary, #b8b4da);
	margin: 0 auto;
	max-width: 42rem;
}

.tower__wip {
	position: relative;
	height: 200px;
	max-width: 640px;
	margin: 2rem auto 0;
	border-radius: var(--mw-radius-soft, 8px);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		radial-gradient(80% 90% at 50% 18%, rgba(103, 101, 232, 0.34), transparent 62%),
		linear-gradient(165deg, #14113f, #08061f);
}

.tower__wip::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.045) 0 2px, transparent 2px 14px);
}

.tower__wip-glyph {
	position: absolute;
	z-index: 0;
	font-size: 6rem;
	line-height: 1;
	color: rgba(168, 167, 255, 0.14);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -62%);
}

.tower__wiptag {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0 1rem;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	text-align: center;
}

.tower__wiptag::before {
	content: "\25C7"; /* diamond */
	opacity: 0.8;
}

/* ---- Iter 4b responsive -------------------------------------------------- */
@media (max-width: 900px) {
	.ghero__hero-fig {
		width: clamp(150px, 36vw, 250px);
		right: -1%;
	}

	.ghero__inset {
		display: none;
	}

	.ghero__copy {
		max-width: none;
	}

	.roost {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.roost__art {
		min-height: clamp(320px, 76vw, 460px);
		max-width: 520px;
	}
}

@media (max-width: 620px) {
	.ghero__hero-fig {
		width: 42vw;
		right: -3%;
		bottom: 2%;
		opacity: 0.85;
	}

	.roost__thumbs {
		max-width: 420px;
	}
}

/* ============================================================================
 * ITER 4c — GRIFFIN ROOST MANAGER detail page (cozy k-world game tier)
 *
 * Reuses the hero / roost-showcase / gallery / cta-band partials + torn-paper
 * dividers; adds a sky hero chip, the bespoke `.trirow` (how-it-works) and
 * `.griffin-duo` (meet-the-griffins) treatments, and a GRM-scoped hero-crop +
 * phone-tile framing for the reused gallery partial. Ports the Claude Design
 * `GriffinRoostManager.jsx` + `.trirow` / `.griffin-duo` from `games.css`.
 * ========================================================================== */

/* Sky hero status chip (Claude Design `mw-chip--sky`) — GRM "In development". */
.mw-hero__badge-chip--sky {
	background: var(--kw-sky, #3fa7d6);
	color: #04121b;
	border-color: transparent;
}

/* GRM hero: the loading-screen key art is portrait — frame its upper third
 * (the Archon + griffin + castle) the way the prototype does. */
.mw-page-griffin-roost-manager .mw-section--hero[data-has-image] .mw-section__bg img {
	object-position: center 34%;
}

/* ---- Shared dark bands (how-it-works + meet-the-griffins) ---------------- */
.mw-section--trirow[data-bg-token="studio-dark"],
.mw-section--griffins[data-bg-token="studio-dark"] {
	background-color: var(--studio-dark, #0e0841);
	color: #e1e8f9;
}

.mw-section--trirow,
.mw-section--griffins {
	padding-block: clamp(3rem, 7vw, 6rem);
}

.mw-section--trirow .mw-section__inner,
.mw-section--griffins .mw-section__inner {
	max-width: var(--mw-content-width, 72rem);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
	text-align: center;
}

.mw-section--trirow .mw-section__eyebrow,
.mw-section--griffins .mw-section__eyebrow {
	font-family: var(--mw-font-display, system-ui, sans-serif);
	font-size: 0.9rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mw-text-accent); /* Topic 33 FIX-WP1 — retires off-system #8fd6f2 */
	margin: 0 0 0.8rem;
}

.mw-section--trirow .mw-section__headline,
.mw-section--griffins .mw-section__headline {
	font-family: var(--mw-font-display, system-ui, sans-serif);
	font-weight: 400;
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	line-height: 1.1;
	color: #fff;
	margin: 0 0 1rem;
}

.mw-section--trirow .mw-section__intro,
.mw-section--griffins .mw-section__intro {
	font-size: clamp(1rem, 1.4vw, 1.15rem);
	line-height: 1.6;
	color: var(--mw-color-text-secondary, #b8b4da);
	margin: 0 auto;
	max-width: 40rem;
}

/* How it works — plain three-column text row (no card chrome). */
.trirow {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.5rem, 3vw, 2.75rem);
	margin-top: 2.5rem;
	text-align: left;
}

.trirow__col h3 {
	font-family: var(--mw-font-display, system-ui, sans-serif);
	font-weight: 400;
	font-size: 1.4rem;
	color: #fff;
	margin: 0 0 0.6rem;
}

.trirow__col p {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--mw-color-text-secondary, #b8b4da);
	margin: 0;
}

/* Meet the griffins — self-contained white study cards on the dark band. */
.griffin-duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	margin-top: 2.5rem;
	text-align: left;
}

.griffin-duo figure {
	margin: 0;
	text-align: center;
	background: #fff;
	border-radius: 20px;
	padding: 1.5rem 1.5rem 1.75rem;
	box-shadow: 0 26px 48px -22px rgba(6, 4, 30, 0.5);
}

.griffin-duo img {
	width: 100%;
	max-width: 320px;
	height: auto;
	display: block;
	margin: 0 auto;
}

.griffin-duo figcaption {
	font-family: var(--mw-font-display, system-ui, sans-serif);
	font-size: 1.4rem;
	color: var(--kw-ink, #3a2c14);
	margin-top: 1rem;
}

.griffin-duo .griffin-role {
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 0.74rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #8a7452;
	display: block;
	margin-top: 0.35rem;
}

.griffin-duo .griffin-note {
	font-size: 0.98rem;
	line-height: 1.55;
	color: #5d4a2c;
	margin: 0.8rem auto 0;
	max-width: 30ch;
}

/* Screens — phone-tile framing for the reused gallery partial (9:16, white
 * frame), GRM-scoped so other gallery callers are unaffected. */
.mw-page-griffin-roost-manager .mw-section--gallery .mw-gallery__figure img {
	aspect-ratio: 9 / 16;
	object-fit: cover;
	object-position: top;
	border-radius: 16px;
	border: 4px solid #fff;
	box-shadow: 0 16px 30px -14px rgba(6, 4, 30, 0.45);
}

.mw-page-griffin-roost-manager .mw-section--gallery .mw-gallery__caption {
	text-align: center;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 0.74rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ---- Iter 4c responsive -------------------------------------------------- */
@media (max-width: 900px) {
	.trirow {
		grid-template-columns: 1fr;
		gap: 1.75rem;
		max-width: 34rem;
		margin-inline: auto;
	}

	.griffin-duo {
		gap: 1.5rem;
	}
}

@media (max-width: 620px) {
	.griffin-duo {
		grid-template-columns: 1fr;
		max-width: 24rem;
		margin-inline: auto;
	}
}

/* ============================================================================
 * Inline demo/waitlist signup form — the [mw-leadcapture] inline Newsletter
 * form embedded under a cta-band heading (Clear the Skies "Demo coming", and
 * the sibling product pages). Constrain + centre so it reads as one compact
 * form beneath the copy, matching the Claude Design demo-signup block, rather
 * than a full-width sprawl.
 * ========================================================================== */
.mw-page-clear-the-skies__signup-form {
	max-width: 34rem;
	margin-inline: auto;
	margin-block-start: 1.5rem;
}

/* ============================================================================
 * RIDER BENTO — Topic 33 FIX-WP3
 *
 * Additive variant of the `.rider` / `.siege` treatment above (L110-232).
 * `.riders--bento` is opt-in via `variant => 'bento'` on inc/games/rider-section
 * — currently only the Clear the Skies "Choose your rider" call. Nothing in
 * L110-232 is edited or removed; the Games hub keeps rendering those rules
 * unchanged. Appended at end of file deliberately: the legacy responsive block
 * above (@media max-width:620px .riders) ties `.riders--bento` at (0,1,0), and
 * that tie is decided by source order alone — see the WP file for the full
 * account. Do not move this block earlier in the file.
 * ========================================================================== */

.riders--bento {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(.85rem, 1.6vw, 1.3rem);
	margin-top: clamp(2rem, 3.4vw, 3rem);
}

.rider--bento {
	--rider-color: var(--mw-color-primary-glow);
	--rider-soft: rgba(168, 167, 255, .24);
	position: relative; overflow: hidden; isolation: isolate; text-align: left;
	display: flex; flex-direction: column;
	min-height: clamp(330px, 30vw, 430px);
	border: 1px solid var(--rider-soft);
	border-radius: 20px;
	padding: 0;
	background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
	transition: transform var(--mw-dur-base, 0.2s) var(--mw-ease, ease),
	            border-color var(--mw-dur-base, 0.2s) var(--mw-ease, ease),
	            box-shadow var(--mw-dur-base, 0.2s) var(--mw-ease, ease);
}

.rider--bento:hover {
	transform: translateY(-4px);
	border-color: var(--rider-color);
	box-shadow: 0 28px 52px -30px rgba(0, 0, 0, .9);
}

.rider--bento .rider__disc {
	position: absolute; z-index: 0;
	top: -16%; left: 50%; width: 98%; aspect-ratio: 1;
	height: auto;
	transform: translateX(-50%);
	border-radius: 50%;
	filter: blur(44px);
	opacity: .55;
}

.rider--bento .rider__stage { position: relative; z-index: 1; flex: 1 1 auto; aspect-ratio: 1 / .72; }

.rider--bento .rider__art {
	position: absolute; inset: 0; box-sizing: border-box;
	width: 100%; height: 100%; margin: 0;
	padding: clamp(.9rem, 1.5vw, 1.4rem) clamp(.9rem, 1.5vw, 1.4rem) 0;
	object-fit: contain;
	filter: drop-shadow(0 20px 26px rgba(0, 0, 0, .55));
}

.rider--bento .rider__body {
	position: relative; z-index: 2;
	padding: clamp(.9rem, 1.5vw, 1.25rem) clamp(1.05rem, 1.7vw, 1.5rem) clamp(1.1rem, 1.8vw, 1.55rem);
	background: linear-gradient(180deg, rgba(4, 3, 36, 0), rgba(4, 3, 36, .6) 46%);
}

.rider--bento .rider__meta { display: flex; align-items: center; gap: .6rem; margin: 0 0 .4rem; }

.rider--bento .rider__sigil {
	display: grid; place-items: center; flex: none;
	width: 30px; height: 30px; border-radius: 9px;
	border: 1px solid var(--rider-soft);
	background: rgba(255, 255, 255, .05);
	color: var(--rider-color);
	line-height: 1;
}

/* The sigil is an inlined SVG with fill="currentColor" — it takes its colour from the
   chip's `color` above. Size it here; FIX-WP4 ships the files with no width/height. */
.rider--bento .rider__sigil svg { width: 15px; height: 15px; display: block; }

.rider--bento .rider__class { margin: 0; color: var(--rider-color); }
.rider--bento .rider__name  { font-size: clamp(1.5rem, 2vw, 1.85rem); line-height: 1.1; margin: 0 0 .4rem; }
.rider--bento .rider__desc  { font-size: .93rem; line-height: 1.55; color: rgba(255, 255, 255, .76); margin: 0; }

/* ---- Environment tiles (siege gallery bento) ------------------------------ */
.siege--bento { grid-template-columns: repeat(4, 1fr); gap: clamp(.6rem, 1.1vw, .95rem); margin-top: clamp(.85rem, 1.6vw, 1.3rem); }

.siege--bento figure {
	--tile-accent: var(--mw-color-primary-glow);
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, .07);
}

.siege--bento figure::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0;
	height: 3px; background: var(--tile-accent); opacity: .9;
}

.siege--bento figcaption {
	padding: 2.1rem .95rem .75rem;
	font-family: var(--mw-font-display);
	font-size: clamp(.95rem, 1.15vw, 1.1rem);
	letter-spacing: normal;
	text-transform: none;
	color: #fff;
	background: linear-gradient(0deg, rgba(3, 3, 18, .92) 14%, rgba(3, 3, 18, .5) 56%, transparent);
}

/* ---- Responsive: riders 3→1 at 900px (not 3→2→1); tiles 4→2→1 ------------- */
@media (max-width: 900px) {
	.riders--bento { grid-template-columns: 1fr; max-width: 26rem; margin-inline: auto; }
	.rider--bento  { min-height: 0; }
	.siege--bento  { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) { .siege--bento { grid-template-columns: 1fr; } }

/* ============================================================================
 * BOSS SECTION — "Face the Darkening" zone bosses
 * (inc/games/boss-section.php)
 * Topic 33 FIX-WP5 — replaces the old rider-shell boss cards. A screen-filling
 * boss must not look like a playable hero: full-bleed tinted environment art,
 * the sprite anchored at scale overlapping the frame, copy held left over a
 * directional scrim. See reference/figma/task4-make-it-like.png (designer
 * handoff bundle) — this block is an image-only spec, hi-fi values below are
 * final.
 * ========================================================================== */

.bosses { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(.9rem, 1.7vw, 1.4rem); margin-top: clamp(2rem, 3.4vw, 3rem); }

.boss {
	--boss-color: var(--mw-color-primary-glow);
	--boss-soft:  rgba(168, 167, 255, .24);
	--boss-tint:  rgba(168, 167, 255, .18);
	position: relative; display: flex; overflow: hidden; isolation: isolate;
	min-height: clamp(400px, 34vw, 520px);
	border: 1px solid var(--boss-soft);
	border-radius: 20px;
	transition: transform var(--mw-dur-base, 0.2s) var(--mw-ease, ease),
	            border-color var(--mw-dur-base, 0.2s) var(--mw-ease, ease);
}

.boss:hover { transform: translateY(-4px); border-color: var(--boss-color); }

.boss__scene { position: absolute; inset: 0; z-index: 0; }
.boss__scene img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .6; }

.boss__scene::after {
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(96deg, rgba(5,4,24,.95) 0%, rgba(5,4,24,.86) 34%, rgba(5,4,24,.44) 66%, rgba(5,4,24,.66) 100%),
		radial-gradient(72% 60% at 78% 46%, var(--boss-tint), transparent 70%);
}

.boss__fig {
	position: absolute; z-index: 1; right: -1%; bottom: 0;
	height: 84%; width: auto; max-width: 60%;
	object-fit: contain; object-position: bottom right;
	filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .6));
}

.boss__body {
	position: relative; z-index: 2;
	display: flex; flex-direction: column; gap: .7rem;
	max-width: 58%;
	padding: clamp(1.3rem, 2.1vw, 1.9rem);
	/* R1 — .mw-section--riders .mw-section__inner sets text-align: center and
	   .boss__body is a descendant of it (via the selector extension above);
	   the mockup holds this copy column left. Scoped to .boss__body only —
	   the eyebrow/headline/intro/.concept-note stay centred. */
	text-align: left;
}

.boss__badge {
	align-self: flex-start; margin: 0;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
	color: var(--boss-color);
	border: 1px solid var(--boss-soft);
	background: rgba(255, 255, 255, .05);
	padding: .42rem .8rem; border-radius: 999px;
}

.boss__name { font-family: var(--mw-font-display, system-ui, sans-serif); font-weight: 400; font-size: clamp(1.75rem, 2.9vw, 2.4rem); line-height: 1.05; color: #fff; margin: 0; }
.boss__desc { font-size: .96rem; line-height: 1.6; color: rgba(255,255,255,.8); margin: 0; max-width: 32ch; }

.boss__tells { list-style: none; display: grid; gap: .5rem; margin: auto 0 0; padding: 0; }
.boss__tells li { display: flex; align-items: center; gap: .7rem; font-size: .9rem; color: rgba(255,255,255,.86); }

.boss__tells i {
	display: grid; place-items: center; flex: none;
	width: 30px; height: 30px; border-radius: 9px;
	border: 1px solid var(--boss-soft);
	background: rgba(255, 255, 255, .05);
	color: var(--boss-color);
	font-style: normal;
}

.boss__tells i svg { width: 15px; height: 15px; display: block; }

/* FIX-WP10: untokenized boss accents — #f2897f (Malakar) / #8fd6f2 (Elder
   Giant) plus their soft/tint rgba values are designer-specified verbatim
   (handoff README:464-465) and not yet DS tokens. Grep this file for both
   hexes when the contrast-remediation topic tokenizes the games tier. */

@media (max-width: 900px) {
	.bosses { grid-template-columns: 1fr; }
	.boss { min-height: clamp(360px, 52vw, 460px); }
	.boss__body { max-width: 62%; }
}

@media (max-width: 620px) {
	.boss { flex-direction: column; min-height: 0; }
	.boss__fig { position: relative; right: auto; height: clamp(190px, 46vw, 260px); max-width: 82%; margin: 1.3rem auto -.6rem; }
	.boss__body { max-width: none; }
	.boss__desc { max-width: none; }
}