/* ==========================================================================
   Pet Snake Adventure — app shell
   --------------------------------------------------------------------------
   Loaded AFTER the page's inline <style> block so it wins on equal specificity
   without needing !important. Owns: full-bleed viewport layout, the table
   backdrop, the title/setup/run screens, and the game HUD bars.

   Screens are driven by [data-screen] on [data-adventure-widget]
   (see engine/screen-router.js). Run state stays on [data-game-state].
   ========================================================================== */

:root {
	--shell-table-deep: #1c110c;
	--shell-table: #2e1c14;
	--shell-wood: #4a2f22;
	--shell-wood-lit: #6b452f;
	--shell-brass: #d9a441;
	--shell-brass-deep: #a97722;
	--shell-parchment: #f6ecd4;
	--shell-parchment-dim: #d9c9a3;
	--shell-ink: #3a241c;
	--shell-heart: #e04a4a;
	--shell-good: #79c47e;
	--shell-bad: #e0674a;

	/* Fixed bar heights keep the mat sizing formula exact — if the bars could
	   grow, the square mat computed against them would overflow the column. */
	--shell-hud-top-h: clamp(42px, 6.5svh, 58px);
	--shell-hud-bottom-h: clamp(52px, 9svh, 78px);
	--shell-hud-gap: clamp(6px, 1.4svh, 14px);

	/* Coded board frame. --frame-thickness is load-bearing in two ways: it is the
	   arena's padding (so the scaler subtracts it when sizing cells) AND the
	   paper's padding (so the frame drawn around the grid is exactly that wide). */
	--frame-thickness: clamp(10px, 2.4vmin, 26px);
	/* Breathing room outside the frame, and cover for its box-shadow lip. */
	--arena-gutter: clamp(4px, 1vmin, 14px);
	--frame-radius: clamp(8px, 1.6vmin, 16px);
	--frame-lip: 3px;
	--frame-tack: clamp(5px, 1vmin, 9px);
	--frame-paper: #f2e5c6;
	--board-inner-radius: clamp(4px, 0.9vmin, 9px);
	--shell-pad-x: max(8px, env(safe-area-inset-left), env(safe-area-inset-right));
	--shell-pad-top: max(8px, env(safe-area-inset-top));
	--shell-pad-bottom: max(8px, env(safe-area-inset-bottom));

	--shell-radius: 12px;
	--shell-plate: linear-gradient(180deg, var(--shell-wood-lit) 0%, var(--shell-wood) 55%, #38231a 100%);
	--shell-plate-edge: 0 1px 0 rgba(255, 224, 178, 0.18) inset, 0 -2px 0 rgba(0, 0, 0, 0.35) inset;
}

/* --------------------------------------------------------------------------
   1. Full-bleed viewport — the page stops being a document
   -------------------------------------------------------------------------- */

html,
body.adventure-page {
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	overscroll-behavior: none;
	background: var(--shell-table-deep);
}

body.adventure-page .site-shell {
	display: flex;
	flex-direction: column;
	height: 100dvh;
	max-height: 100dvh;
	min-height: 0;
	padding: 0;
	margin: 0;
	max-width: none;
	overflow: hidden;
}

body.adventure-page .site-main {
	flex: 1 1 auto;
	display: block;
	min-height: 0;
	/* The inline block reserves shell padding here; the shell needs all of it. */
	height: 100%;
	max-height: none;
	width: 100%;
	max-width: none;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

body.adventure-page .section#adventure-mode {
	height: 100%;
	min-height: 0;
	padding: 0;
	margin: 0;
	border: none;
}

/* Strip every trace of "card on a page" from the game container. */
body.adventure-page .adventure-game.cat-snake-widget--adventure {
	position: relative;
	display: block;
	height: 100%;
	min-height: 0;
	max-height: none;
	width: 100%;
	max-width: none;
	padding: 0;
	gap: 0;
	border: none;
	border-radius: 0;
	box-shadow: none;
	background: none;
	overflow: hidden;
}

/* The 2-column sidebar grid is dead. One cell, full bleed. */
body.adventure-page .adventure-game__body,
body.adventure-page .adventure-game__body.adventure-grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
	gap: 0;
	height: 100%;
	min-height: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   2. The table — layered CSS only, no new image payload
   -------------------------------------------------------------------------- */

body.adventure-page .adventure-game.cat-snake-widget--adventure::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		/* vignette */
		radial-gradient(ellipse 120% 90% at 50% 42%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.55) 78%, rgba(0, 0, 0, 0.82) 100%),
		/* plank seams */
		repeating-linear-gradient(
			90deg,
			rgba(0, 0, 0, 0.22) 0px,
			rgba(0, 0, 0, 0.22) 1px,
			rgba(0, 0, 0, 0) 1px,
			rgba(0, 0, 0, 0) 148px
		),
		/* grain */
		repeating-linear-gradient(
			92deg,
			rgba(255, 214, 160, 0.045) 0px,
			rgba(255, 214, 160, 0.045) 2px,
			rgba(0, 0, 0, 0.05) 2px,
			rgba(0, 0, 0, 0.05) 6px
		),
		/* base stain */
		linear-gradient(165deg, #4a2f22 0%, #35211a 45%, #24150f 100%);
}

/* Warm pool of light behind the mat so the board is the focal point. */
body.adventure-page .cat-snake__play::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(circle at 50% 46%, rgba(255, 208, 138, 0.16) 0%, rgba(255, 208, 138, 0) 62%);
}

/* --------------------------------------------------------------------------
   3. Play column — HUD bar / mat / HUD bar
   The mat is square, so on tall or wide viewports the leftover space is where
   the HUD lives. That is what actually makes the board fill the screen.
   -------------------------------------------------------------------------- */

body.adventure-page .cat-snake__play {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--shell-hud-gap);
	height: 100%;
	min-height: 0;
	min-width: 0;
	/* Top strip is reserved for the floating nav / fullscreen controls so they
	   never sit on top of the HUD. */
	padding: calc(var(--shell-pad-top) + 44px) var(--shell-pad-x) calc(var(--shell-pad-bottom) + 2px);
	background: none;
	border-radius: 0;
	container-type: size;
	container-name: playmat;
}

/* --------------------------------------------------------------------------
   3b. The board frame — coded, not a raster
   --------------------------------------------------------------------------
   The old frame was parchment-frame.png: a fixed 1:1 image with the table, the
   paper and its inner hole all baked in. The grid was a separate layer pinned
   over it by hardcoded percentage insets, so the two could never actually line
   up and ~23% of the mat was spent on frame.

   This inverts the relationship. The arena is the available box; its padding is
   the frame's thickness, so the scaler sizes cells to the space that is really
   left. The frame is then drawn around whatever grid comes out — it hugs the
   board exactly, at any size, on any aspect ratio.
   -------------------------------------------------------------------------- */

body.adventure-page .board-arena {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-width: 0;
	min-height: 0;
	/* ResponsiveBoardScaler measures this element's CONTENT box and sizes the
	   grid to fill it, so the padding must reserve the frame's own thickness
	   (which the paper adds back around the grid) plus the outer gutter.
	   Get this wrong and the frame is counted twice or not at all. */
	padding: calc(var(--frame-thickness) + var(--arena-gutter));
	touch-action: none;
	overscroll-behavior: contain;
}

body.adventure-page .cat-snake__board-wrap.adventure-panel {
	position: relative;
	/* max-content, not fit-content: the grid is sized to the arena's CONTENT box,
	   so the frame's own padding necessarily pushes past it. fit-content would
	   clamp to that content box and let the board overhang the frame by exactly
	   the frame thickness. The arena's gutter absorbs the difference. */
	width: max-content;
	height: max-content;
	flex: 0 0 auto;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: var(--frame-thickness);
	aspect-ratio: auto;
	border: none;
	border-radius: var(--frame-radius);
	/* Aged paper: warm base, uneven wash, soft edge burn. */
	background-color: var(--frame-paper);
	background-image:
		radial-gradient(ellipse 70% 55% at 22% 18%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 60%),
		radial-gradient(ellipse 60% 50% at 82% 84%, rgba(139, 105, 62, 0.16) 0%, rgba(139, 105, 62, 0) 62%),
		radial-gradient(ellipse 120% 120% at 50% 50%, rgba(255, 251, 238, 0) 52%, rgba(122, 88, 48, 0.2) 100%),
		repeating-linear-gradient(
			101deg,
			rgba(139, 105, 62, 0.05) 0px,
			rgba(139, 105, 62, 0.05) 1px,
			rgba(255, 255, 255, 0) 1px,
			rgba(255, 255, 255, 0) 7px
		),
		linear-gradient(168deg, #f7ecd0 0%, #efe0bd 52%, #e2cfa5 100%);
	background-repeat: no-repeat, no-repeat, no-repeat, repeat, no-repeat;
	box-shadow:
		/* deckled paper lip */
		0 0 0 1px rgba(120, 86, 48, 0.45),
		0 0 0 var(--frame-lip) rgba(247, 238, 214, 0.75),
		0 0 0 calc(var(--frame-lip) + 1px) rgba(96, 66, 38, 0.5),
		/* the paper lifting off the table */
		0 2px 0 rgba(255, 255, 255, 0.4) inset,
		0 18px 44px rgba(0, 0, 0, 0.5),
		0 44px 90px rgba(0, 0, 0, 0.35);
}

/* Hand-inked rule just inside the paper edge — the "drawn map" cue that the
   old PNG carried, now scale-independent. */
body.adventure-page .cat-snake__board-wrap.adventure-panel::before {
	content: "";
	position: absolute;
	inset: calc(var(--frame-thickness) * 0.34);
	border: 1px solid rgba(109, 76, 42, 0.42);
	border-radius: calc(var(--frame-radius) * 0.6);
	pointer-events: none;
}

/* Corner tacks holding the sheet down. */
body.adventure-page .cat-snake__board-wrap.adventure-panel::after {
	content: "";
	position: absolute;
	inset: calc(var(--frame-thickness) * 0.18);
	pointer-events: none;
	background-image:
		radial-gradient(circle, rgba(146, 104, 56, 0.75) 0 34%, rgba(146, 104, 56, 0) 62%),
		radial-gradient(circle, rgba(146, 104, 56, 0.75) 0 34%, rgba(146, 104, 56, 0) 62%),
		radial-gradient(circle, rgba(146, 104, 56, 0.75) 0 34%, rgba(146, 104, 56, 0) 62%),
		radial-gradient(circle, rgba(146, 104, 56, 0.75) 0 34%, rgba(146, 104, 56, 0) 62%);
	background-repeat: no-repeat;
	background-size: var(--frame-tack) var(--frame-tack);
	background-position: left top, right top, left bottom, right bottom;
}

body.adventure-page .board-stage {
	position: relative;
	width: fit-content;
	height: fit-content;
	/* adventure-hud.css sets container-type: size here, which applies SIZE
	   CONTAINMENT - the element then renders as if it had no contents and
	   fit-content collapses to zero. The frame needs to measure its board. */
	container-type: normal;
}

/* The play hole is now simply "wherever the grid is" — no percentage insets. */
body.adventure-page .board-stage__play {
	position: relative;
	inset: auto;
	display: block;
	width: fit-content;
	height: fit-content;
	padding: 0;
	border-radius: var(--board-inner-radius);
	background: none;
	box-shadow: none;
	clip-path: none;
	overflow: visible;
	touch-action: none;
	overscroll-behavior: contain;
}

/* The field sits in a pressed well in the paper. */
body.adventure-page .cat-snake__board-wrap.adventure-panel .cat-snake__board {
	position: relative;
	z-index: 2;
	display: grid;
	max-width: none;
	max-height: none;
	/* ResponsiveBoardScaler sizes the grid as cellSize x N with no allowance for
	   padding on this element, so any padding here overflows the frame. The
	   breathing room comes from the frame instead. */
	padding: 0;
	border-radius: var(--board-inner-radius);
	box-shadow:
		0 0 0 2px rgba(74, 48, 24, 0.55),
		0 0 0 5px rgba(217, 198, 152, 0.55),
		0 0 0 6px rgba(74, 48, 24, 0.35),
		0 3px 10px rgba(58, 36, 18, 0.35) inset;
}

/* --------------------------------------------------------------------------
   4. HUD bars — lifted out of the mat into the surrounding space
   -------------------------------------------------------------------------- */

body.adventure-page .board-hud {
	position: static;
	left: auto;
	right: auto;
	top: auto;
	bottom: auto;
	z-index: 2;
	flex: 0 0 auto;
	order: 0;
	width: 100%;
	pointer-events: auto;
	box-sizing: border-box;
	padding: 6px clamp(10px, 2.4cqw, 20px);
	border: 1px solid rgba(0, 0, 0, 0.45);
	border-radius: var(--shell-radius);
	background: var(--shell-plate);
	box-shadow: var(--shell-plate-edge), 0 6px 18px rgba(0, 0, 0, 0.4);
	color: var(--shell-parchment);
	font-family: Georgia, 'Times New Roman', serif;
}

body.adventure-page .board-hud--top {
	order: -1;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: clamp(8px, 2cqw, 18px);
	height: var(--shell-hud-top-h);
}

body.adventure-page .board-hud--bottom {
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	gap: 4px;
	height: var(--shell-hud-bottom-h);
	overflow: hidden;
}

body.adventure-page .board-hud--top,
body.adventure-page .board-hud--bottom {
	overflow: hidden;
}

body.adventure-page .board-hud__vitals {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: clamp(10px, 2.6cqw, 24px);
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

body.adventure-page .hud-chip__icon {
	color: var(--shell-brass);
	font-size: 1.05em;
	line-height: 1;
	opacity: 0.9;
}

body.adventure-page .hud-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	padding: 0;
	background: none;
	border: none;
	color: var(--shell-parchment);
	font-family: Georgia, 'Times New Roman', serif;
	font-size: clamp(0.82rem, 2.1cqw, 1.05rem);
	font-weight: 700;
	line-height: 1;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
	white-space: nowrap;
}

body.adventure-page .board-hud .adventure-hearts {
	color: var(--shell-heart);
	font-size: clamp(1rem, 2.8cqw, 1.5rem);
	letter-spacing: 0.08em;
	line-height: 1;
	text-shadow: 0 0 10px rgba(224, 74, 74, 0.55), 0 1px 0 rgba(0, 0, 0, 0.7);
}

body.adventure-page .board-hud #adventure-score,
body.adventure-page .board-hud #adventure-coins,
body.adventure-page .board-hud #adventure-floor {
	color: var(--shell-brass);
	font-variant-numeric: tabular-nums;
	font-size: clamp(0.9rem, 2.3cqw, 1.15rem);
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75);
}

body.adventure-page .hud-chip--floor {
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
}

body.adventure-page .board-hud .hud-progress {
	appearance: none;
	-webkit-appearance: none;
	display: block;
	width: clamp(48px, 9cqw, 96px);
	height: 5px;
	border: none;
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.5);
	overflow: hidden;
}

body.adventure-page .board-hud .hud-progress::-webkit-progress-bar {
	background: rgba(0, 0, 0, 0.5);
	border-radius: 3px;
}

body.adventure-page .board-hud .hud-progress::-webkit-progress-value {
	background: linear-gradient(90deg, var(--shell-brass-deep), var(--shell-brass));
	border-radius: 3px;
}

body.adventure-page .board-hud .hud-progress::-moz-progress-bar {
	background: linear-gradient(90deg, var(--shell-brass-deep), var(--shell-brass));
	border-radius: 3px;
}

/* HUD action buttons — icon-first, thumb sized */
body.adventure-page .board-hud__actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
}

body.adventure-page .board-hud__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 34px;
	padding: 0 10px;
	border: 1px solid rgba(0, 0, 0, 0.5);
	border-radius: 8px;
	background: linear-gradient(180deg, rgba(255, 226, 175, 0.16), rgba(0, 0, 0, 0.22));
	color: var(--shell-parchment);
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 140ms ease, transform 120ms ease;
}

body.adventure-page .board-hud__toggle[aria-expanded="true"] {
	background: linear-gradient(180deg, var(--shell-brass), var(--shell-brass-deep));
	color: #2b1a10;
}

/* Every :hover below is guarded. On a touch screen an unguarded :hover sticks
   after the tap until you press something else - the theme copy already fixed
   this for the older buttons, and the new chrome needs the same treatment. */
@media (hover: hover) and (pointer: fine) {
	body.adventure-page .board-hud__toggle:hover {
		background: linear-gradient(180deg, var(--shell-brass), var(--shell-brass-deep));
		color: #2b1a10;
	}
}

body.adventure-page .board-hud__toggle:active {
	transform: translateY(1px);
}

/* Objective banner */
body.adventure-page .board-hud__objective-row {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

body.adventure-page .board-hud__goal {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	color: var(--shell-parchment);
	font-size: clamp(0.78rem, 2cqw, 0.98rem);
	line-height: 1.25;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

body.adventure-page .board-hud--bottom .hud-progress--goal {
	flex: 0 0 auto;
	width: clamp(60px, 14cqw, 140px);
}

body.adventure-page .board-hud__grace {
	height: 4px;
	border-radius: 2px;
	background: rgba(0, 0, 0, 0.45);
	overflow: hidden;
}

body.adventure-page .board-hud__grace > div {
	height: 100%;
	background: linear-gradient(90deg, var(--shell-good), #b8e6b8);
	transition: width 120ms linear;
}

body.adventure-page .board-hud__status,
body.adventure-page .board-hud__live {
	margin: 0;
	color: var(--shell-parchment-dim);
	font-size: clamp(0.7rem, 1.7cqw, 0.85rem);
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

body.adventure-page .board-hud__status-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

body.adventure-page .board-hud__status-tags .adventure-tag {
	padding: 2px 8px;
	border: 1px solid rgba(217, 164, 65, 0.45);
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.28);
	color: var(--shell-brass);
	font-size: clamp(0.62rem, 1.5cqw, 0.74rem);
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

/* The in-run start/stop CTA that repositionStartButton() drops into the HUD.
   It is the widest thing in the bar, so it is the first to give up space. */
body.adventure-page .board-hud__actions .board-run-cta--hud {
	flex: 0 1 auto;
	min-width: 0;
	min-height: 34px;
	max-width: 130px;
	padding: 0 10px;
	border-radius: 8px;
	font-size: 0.74rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 620px) {
	/* On a phone bar the icon alone is enough - the label is the first casualty. */
	body.adventure-page .board-hud__actions .board-run-cta--hud span:last-child {
		display: none;
	}

	body.adventure-page .board-hud__actions .board-run-cta--hud {
		max-width: 44px;
		padding: 0 8px;
	}

	/* Drawer toggles go icon-only so the whole bar fits a 360px phone.
	   The accessible name still comes from title/aria-controls. */
	body.adventure-page .board-hud__toggle {
		min-width: 36px;
		padding: 0 6px;
		font-size: 0;
	}

	body.adventure-page .board-hud__toggle::before {
		font-size: 1rem;
		line-height: 1;
	}

	/* Scoped to the HUD bar: [data-hud-toggle] is also used by buttons on the
	   title and setup screens, which keep their text labels. */
	body.adventure-page .board-hud__toggle[data-hud-toggle="kit"]::before { content: "\002756"; }
	body.adventure-page .board-hud__toggle[data-hud-toggle="log"]::before { content: "\002261"; }
	body.adventure-page .board-hud__toggle[data-hud-toggle="settings"]::before { content: "\002699"; }

	body.adventure-page .board-hud__vitals {
		gap: 12px;
		flex: 0 1 auto;
	}

	body.adventure-page .board-hud__actions {
		flex: 0 0 auto;
	}

	/* adventure-hud.css wraps this bar below 768px. Rather than clip the second
	   row, let it be two rows - portrait has vertical space to spare. */
	body.adventure-page .board-hud--top {
		height: auto;
		min-height: var(--shell-hud-top-h);
		flex-wrap: wrap;
		align-items: center;
		row-gap: 6px;
		padding-top: 7px;
		padding-bottom: 7px;
	}
}

/* --------------------------------------------------------------------------
   5. Floating chrome — nav, fullscreen, watermark
   -------------------------------------------------------------------------- */

body.adventure-page .adventure-nav {
	position: fixed;
	top: var(--shell-pad-top);
	left: var(--shell-pad-x);
	z-index: 60;
	display: flex;
	gap: 6px;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
}

body.adventure-page .adventure-toolbar {
	position: fixed;
	top: var(--shell-pad-top);
	right: var(--shell-pad-x);
	z-index: 60;
	display: flex;
	align-items: center;
	gap: 6px;
	width: auto;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	box-shadow: none;
}

/* The title screen carries the wordmark; the bar does not need to repeat it. */
body.adventure-page .adventure-toolbar__title {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

body.adventure-page .adventure-nav__home,
body.adventure-page .adventure-nav__menu-btn,
body.adventure-page .adventure-fullscreen-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, 0.5);
	border-radius: 10px;
	background: var(--shell-plate);
	box-shadow: var(--shell-plate-edge);
	color: var(--shell-parchment);
	font-size: 1.05rem;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	opacity: 0.75;
	transition: opacity 140ms ease, transform 120ms ease;
}

@media (hover: hover) and (pointer: fine) {
	body.adventure-page .adventure-nav__home:hover,
	body.adventure-page .adventure-nav__menu-btn:hover,
	body.adventure-page .adventure-fullscreen-btn:hover {
		opacity: 1;
		transform: translateY(-1px);
	}
}

/* During play the chrome recedes so nothing competes with the board. */
body.adventure-page [data-screen="run"] .adventure-nav,
body.adventure-page [data-screen="run"] .adventure-toolbar {
	opacity: 0.35;
}

@media (hover: hover) and (pointer: fine) {
	body.adventure-page [data-screen="run"] .adventure-nav:hover,
	body.adventure-page [data-screen="run"] .adventure-toolbar:hover {
		opacity: 1;
	}
}

body.adventure-page .adventure-watermark {
	position: fixed;
	right: var(--shell-pad-x);
	bottom: var(--shell-pad-bottom);
	z-index: 5;
	margin: 0;
	padding: 0;
	color: rgba(246, 236, 212, 0.16);
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 0.62rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	pointer-events: none;
}

body.adventure-page [data-screen="run"] .adventure-watermark {
	opacity: 0;
}

/* --------------------------------------------------------------------------
   6. Screens
   -------------------------------------------------------------------------- */

body.adventure-page .screen {
	position: absolute;
	inset: 0;
	z-index: 40;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(12px, 2.6svh, 26px);
	padding: calc(var(--shell-pad-top) + 48px) var(--shell-pad-x) calc(var(--shell-pad-bottom) + 16px);
	overflow-y: auto;
	overscroll-behavior: contain;
	text-align: center;
	background:
		radial-gradient(ellipse 90% 70% at 50% 40%, rgba(74, 47, 34, 0.55) 0%, rgba(20, 12, 9, 0.92) 72%),
		rgba(16, 10, 7, 0.72);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

body.adventure-page [data-screen="title"] .screen--title,
body.adventure-page [data-screen="setup"] .screen--setup {
	display: flex;
}

/* Shared screen buttons */
body.adventure-page .screen-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: min(280px, 78vw);
	min-height: 52px;
	padding: 0 24px;
	border: 1px solid rgba(0, 0, 0, 0.5);
	border-radius: 12px;
	background: var(--shell-plate);
	box-shadow: var(--shell-plate-edge), 0 8px 20px rgba(0, 0, 0, 0.4);
	color: var(--shell-parchment);
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform 130ms ease, filter 130ms ease;
}

@media (hover: hover) and (pointer: fine) {
	body.adventure-page .screen-btn:hover {
		transform: translateY(-2px);
		filter: brightness(1.12);
	}
}

body.adventure-page .screen-btn:active {
	transform: translateY(1px);
}

body.adventure-page .screen-btn--primary {
	min-height: 62px;
	border-color: rgba(0, 0, 0, 0.55);
	background: linear-gradient(180deg, #f0c261 0%, var(--shell-brass) 45%, var(--shell-brass-deep) 100%);
	color: #2b1a10;
	font-size: 1.18rem;
	box-shadow: 0 1px 0 rgba(255, 245, 210, 0.5) inset, 0 -2px 0 rgba(0, 0, 0, 0.28) inset, 0 10px 26px rgba(0, 0, 0, 0.45);
}

body.adventure-page .screen-btn--ghost {
	min-height: 44px;
	background: rgba(0, 0, 0, 0.3);
	box-shadow: none;
	font-size: 0.86rem;
	opacity: 0.85;
}

body.adventure-page .screen__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 100%;
}

/* --------------------------------------------------------------------------
   7. Title screen
   -------------------------------------------------------------------------- */

body.adventure-page .title-mark {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

body.adventure-page .title-mark__mascot {
	width: clamp(84px, 20svh, 168px);
	height: auto;
	margin-bottom: clamp(4px, 1.5svh, 14px);
	filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.6));
	animation: title-bob 5.5s ease-in-out infinite;
}

body.adventure-page .title-mark__small {
	margin: 0;
	color: var(--shell-parchment-dim);
	font-family: Georgia, 'Times New Roman', serif;
	font-size: clamp(0.82rem, 2.6vw, 1.05rem);
	font-weight: 400;
	letter-spacing: 0.42em;
	text-indent: 0.42em;
	text-transform: uppercase;
}

body.adventure-page .title-mark__big {
	margin: 0;
	color: var(--shell-brass);
	font-family: Georgia, 'Times New Roman', serif;
	font-size: clamp(2.4rem, 11vw, 5.2rem);
	font-weight: 700;
	line-height: 0.95;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-shadow:
		0 2px 0 rgba(0, 0, 0, 0.55),
		0 0 34px rgba(217, 164, 65, 0.35);
}

body.adventure-page .title-mark__rule {
	width: min(340px, 72vw);
	height: 2px;
	margin-top: 10px;
	border: none;
	background: linear-gradient(90deg, transparent, rgba(217, 164, 65, 0.7), transparent);
}

body.adventure-page .title-stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(10px, 3vw, 26px);
	margin: 0;
	padding: 0;
	list-style: none;
}

body.adventure-page .title-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-width: 76px;
}

body.adventure-page .title-stat__label {
	color: rgba(246, 236, 212, 0.5);
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 0.62rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

body.adventure-page .title-stat__value {
	color: var(--shell-parchment);
	font-family: Georgia, 'Times New Roman', serif;
	font-size: clamp(1.05rem, 3.4vw, 1.4rem);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

body.adventure-page .title-hint {
	margin: 0;
	color: rgba(246, 236, 212, 0.42);
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 0.76rem;
	letter-spacing: 0.05em;
}

@keyframes title-bob {
	0%, 100% { transform: translateY(0) rotate(-1.5deg); }
	50% { transform: translateY(-9px) rotate(1.5deg); }
}

/* --------------------------------------------------------------------------
   8. Setup screen — a game menu, not a form
   -------------------------------------------------------------------------- */

body.adventure-page .screen--setup {
	justify-content: flex-start;
	gap: clamp(10px, 2svh, 18px);
}

body.adventure-page .setup__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	flex: 0 0 auto;
}

body.adventure-page .setup__eyebrow {
	margin: 0;
	color: rgba(246, 236, 212, 0.45);
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 0.66rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
}

body.adventure-page .setup__title {
	margin: 0;
	color: var(--shell-brass);
	font-family: Georgia, 'Times New Roman', serif;
	font-size: clamp(1.5rem, 6vw, 2.3rem);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}

body.adventure-page .setup__body {
	display: flex;
	flex-direction: column;
	gap: clamp(12px, 2.4svh, 22px);
	width: min(920px, 100%);
	/* Without this the modifier carousel's min-content width (5 cards abreast)
	   pushes this column wider than the screen. */
	min-width: 0;
	max-width: 100%;
	margin: 0 auto;
}

body.adventure-page .setup-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: none;
	text-align: left;
}

body.adventure-page .setup-group__title,
body.adventure-page .setup-group .sidebar-section__title {
	margin: 0;
	padding: 0 2px;
	color: rgba(246, 236, 212, 0.62);
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-align: left;
	border: none;
	background: none;
}

/* Modifier cards. renderModifierButtons() still builds .adventure-modifier__btn
   into #adventure-modifier-list — only the look changes. */
body.adventure-page .screen--setup .adventure-modifiers__list {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(190px, 1fr);
	gap: 10px;
	padding: 4px 2px 10px;
	min-width: 0;
	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

body.adventure-page .screen--setup .adventure-modifier__btn {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 6px;
	min-height: 92px;
	width: 100%;
	max-width: none;
	padding: 14px 16px;
	scroll-snap-align: start;
	border: 1px solid rgba(0, 0, 0, 0.5);
	border-radius: 12px;
	background: var(--shell-plate);
	box-shadow: var(--shell-plate-edge);
	color: var(--shell-parchment);
	font-family: Georgia, 'Times New Roman', serif;
	text-align: left;
	cursor: pointer;
	transition: transform 130ms ease, box-shadow 130ms ease, filter 130ms ease;
}

@media (hover: hover) and (pointer: fine) {
	body.adventure-page .screen--setup .adventure-modifier__btn:hover:not(.is-locked):not(.is-active) {
		transform: translateY(-2px);
		filter: brightness(1.12);
	}
}

body.adventure-page .screen--setup .adventure-modifier__btn.is-active {
	border-color: var(--shell-brass);
	background: linear-gradient(180deg, #6d4a2c 0%, #4a2f22 100%);
	box-shadow: 0 0 0 2px rgba(217, 164, 65, 0.6), 0 8px 20px rgba(0, 0, 0, 0.45);
}

body.adventure-page .screen--setup .adventure-modifier__btn.is-locked {
	opacity: 0.45;
	cursor: not-allowed;
	filter: grayscale(0.6);
}

body.adventure-page .screen--setup .adventure-modifier__name {
	color: var(--shell-parchment);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

body.adventure-page .screen--setup .adventure-modifier__btn.is-active .adventure-modifier__name {
	color: var(--shell-brass);
}

body.adventure-page .screen--setup .adventure-modifier__pill {
	display: inline-block;
	padding: 3px 8px;
	border: 1px solid rgba(217, 164, 65, 0.35);
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.3);
	color: var(--shell-parchment-dim);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: normal;
}

body.adventure-page .screen--setup .adventure-modifier-desc {
	margin: 0;
	padding: 10px 12px;
	border-left: 2px solid rgba(217, 164, 65, 0.5);
	background: rgba(0, 0, 0, 0.28);
	border-radius: 0 8px 8px 0;
	color: var(--shell-parchment-dim);
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 0.85rem;
	line-height: 1.45;
	text-align: left;
}

/* Run briefing — board size is dictated per floor by the run plan, so this
   reports the expedition instead of pretending to configure it. */
body.adventure-page .setup-brief {
	justify-content: flex-start;
	gap: clamp(14px, 4vw, 34px);
	padding: 12px 14px;
	border: 1px solid rgba(0, 0, 0, 0.45);
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.28);
}

body.adventure-page .setup-brief .title-stat {
	align-items: flex-start;
}

/* Setup footer — repositionStartButton() targets .board-setup-card__footer,
   so the class name is load-bearing. Do not rename. */
body.adventure-page .screen--setup .board-setup-card__footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: min(920px, 100%);
	padding: clamp(8px, 2svh, 16px) 0 0;
	border: none;
	background: none;
}

body.adventure-page .screen--setup .board-run-cta--setup {
	width: auto;
	align-self: center;
	min-width: min(320px, 82vw);
	min-height: 62px;
	padding: 0 26px;
	border: 1px solid rgba(0, 0, 0, 0.55);
	border-radius: 12px;
	background: linear-gradient(180deg, #f0c261 0%, var(--shell-brass) 45%, var(--shell-brass-deep) 100%);
	box-shadow: 0 1px 0 rgba(255, 245, 210, 0.5) inset, 0 -2px 0 rgba(0, 0, 0, 0.28) inset, 0 10px 26px rgba(0, 0, 0, 0.45);
	color: #2b1a10;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.18rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

body.adventure-page .screen--setup .board-setup-card__music-btn {
	min-height: 40px;
	padding: 0 18px;
	border: 1px solid rgba(0, 0, 0, 0.45);
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.3);
	color: var(--shell-parchment-dim);
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 0.82rem;
	letter-spacing: 0.05em;
	cursor: pointer;
}

/* The old in-mat setup overlay is fully replaced by .screen--setup. */
body.adventure-page .board-setup-overlay {
	display: none;
}

/* --------------------------------------------------------------------------
   9. Drawers and modals sit above the screens
   -------------------------------------------------------------------------- */

body.adventure-page .board-drawers {
	position: absolute;
	inset: 0;
	z-index: 70;
	pointer-events: none;
}

/* Drawers used to be anchored to the parchment mat's inset percentages. They
   now live outside the mat, so those custom properties no longer resolve —
   anchor them to the viewport instead. */
body.adventure-page .board-drawer {
	position: absolute;
	top: auto;
	bottom: auto;
	left: auto;
	right: max(10px, env(safe-area-inset-right));
	width: min(320px, 84vw);
	max-height: min(66%, 420px);
	padding: 12px 14px;
	border: 1px solid rgba(0, 0, 0, 0.5);
	border-radius: 12px;
	background: linear-gradient(180deg, #f8f1dd 0%, #e7d9b8 100%);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
	color: var(--shell-ink);
	overflow: auto;
	overscroll-behavior: contain;
	pointer-events: auto;
}

body.adventure-page .board-drawer--kit,
body.adventure-page .board-drawer--settings {
	top: calc(var(--shell-pad-top) + var(--shell-hud-top-h) + 12px);
}

body.adventure-page .board-drawer--log {
	top: auto;
	bottom: calc(var(--shell-pad-bottom) + var(--shell-hud-bottom-h) + 12px);
}

body.adventure-page .board-mat-modal {
	z-index: 80;
}

/* Keep the HUD bars laid out while idle so starting a run does not pop the
   board to a new size — dim them instead of removing them. */
body.adventure-page [data-game-state="idle"] .board-hud {
	opacity: 0.5;
}

body.adventure-page [data-game-state="idle"] .board-hud--bottom,
body.adventure-page [data-game-state="idle"] .board-hud__vitals {
	display: flex;
}

body.adventure-page [data-game-state="idle"] .board-hud__toggle {
	display: inline-flex;
}

/* --------------------------------------------------------------------------
   10. Responsive
   -------------------------------------------------------------------------- */

/* Landscape phones: vertical space is precious, so shrink the HUD bars. */
@media (orientation: landscape) and (max-height: 560px) {
	:root {
		--shell-hud-top-h: 36px;
		--shell-hud-bottom-h: 40px;
		--shell-hud-gap: 5px;
	}

	body.adventure-page .board-hud--bottom .board-hud__status-tags,
	body.adventure-page .board-hud__status {
		display: none;
	}

	body.adventure-page .screen {
		padding-top: calc(var(--shell-pad-top) + 8px);
		gap: 8px;
	}

	body.adventure-page .title-mark__mascot {
		display: none;
	}
}

/* Wide landscape: a square board can never fill a 16:9 screen, so the HUD
   moves into the side gutters and the mat takes the full height. That buys the
   board roughly 25% more area than stacking bars above and below it. */
@media (min-width: 900px) and (orientation: landscape) {
	:root {
		--shell-rail-w: clamp(190px, 17vw, 260px);
		--shell-rail-gap: clamp(10px, 1.6vw, 26px);
	}

	body.adventure-page .cat-snake__play {
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: var(--shell-rail-gap);
	}

	/* Rails hug their content and sit beside the board; a full-height panel of
	   mostly empty wood reads as an unfinished sidebar. */
	body.adventure-page .board-hud {
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: clamp(12px, 2.4svh, 22px);
		flex: 0 0 var(--shell-rail-w);
		width: var(--shell-rail-w);
		height: auto;
		max-height: 100%;
		align-self: center;
		padding: clamp(14px, 2.4svh, 22px) 16px;
		overflow: hidden;
	}

	body.adventure-page .board-hud--bottom {
		order: 1;
	}

	body.adventure-page .board-hud__vitals {
		flex: 0 0 auto;
	}

	/* Labels only make sense once the chips are stacked in a column. */
	body.adventure-page .hud-chip::before {
		flex: 1 1 auto;
		color: rgba(246, 236, 212, 0.55);
		font-size: 0.62rem;
		font-weight: 700;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		text-align: left;
	}

	body.adventure-page .hud-chip--hearts::before { content: "Lives"; }
	body.adventure-page .hud-chip--floor::before { content: "Floor"; }
	body.adventure-page .hud-chip--score::before { content: "Score"; }
	body.adventure-page .hud-chip--coins::before { content: "Coins"; }

	body.adventure-page .hud-chip--floor {
		align-items: stretch;
		gap: 5px;
	}

	body.adventure-page .hud-chip--floor #adventure-floor {
		text-align: right;
	}

	body.adventure-page .board-hud__vitals {
		flex-direction: column;
		align-items: stretch;
		gap: clamp(10px, 2svh, 18px);
	}

	body.adventure-page .hud-chip {
		justify-content: space-between;
		font-size: 0.94rem;
	}

	body.adventure-page .board-hud .adventure-hearts {
		font-size: 1.4rem;
	}

	body.adventure-page .hud-chip--floor {
		align-items: stretch;
	}

	body.adventure-page .board-hud .hud-progress {
		width: 100%;
	}

	/* A grid, not wrapped flex: the run CTA takes a full row and the three
	   drawer toggles share the next one, at equal widths, every time. */
	body.adventure-page .board-hud__actions {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 6px;
		width: 100%;
	}

	body.adventure-page .board-hud__toggle {
		min-width: 0;
		width: 100%;
	}

	body.adventure-page .board-hud__actions .board-run-cta--hud {
		grid-column: 1 / -1;
		width: 100%;
		max-width: none;
		min-height: 38px;
		font-size: 0.8rem;
	}

	body.adventure-page .board-hud__goal {
		white-space: normal;
		overflow: visible;
		font-size: 0.92rem;
	}

	body.adventure-page .board-hud__objective-row {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	body.adventure-page .board-hud--bottom .hud-progress--goal {
		width: 100%;
	}

	body.adventure-page .board-hud__status,
	body.adventure-page .board-hud__live {
		white-space: normal;
	}

	body.adventure-page .board-arena {
		height: 100%;
	}

	/* Drawers open beside their rail rather than over the board. */
	body.adventure-page .board-drawer--kit,
	body.adventure-page .board-drawer--settings,
	body.adventure-page .board-drawer--log {
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
		max-height: 78%;
	}
}

/* Wide screens: modifier cards fit without scrolling. */
@media (min-width: 880px) {
	body.adventure-page .screen--setup .adventure-modifiers__list {
		grid-auto-flow: row;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		overflow-x: visible;
	}
}

@media (min-width: 560px) and (max-width: 879px) {
	body.adventure-page .screen--setup .adventure-modifiers__list {
		grid-auto-flow: row;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		overflow-x: visible;
	}
}

/* Very small phones: recover every pixel we can for the board. */
@media (max-width: 400px) {
	:root {
		--shell-hud-top-h: 40px;
		--shell-hud-bottom-h: 52px;
	}

	body.adventure-page .board-hud__toggle {
		min-width: 34px;
		padding: 0 6px;
		font-size: 0.68rem;
	}

	body.adventure-page .screen-btn {
		min-width: min(300px, 88vw);
	}
}

/* Embed mode already runs edge to edge; just drop the outer padding. */
html.humane-embed body.adventure-page .cat-snake__play {
	padding-left: max(4px, env(safe-area-inset-left));
	padding-right: max(4px, env(safe-area-inset-right));
}

/* --------------------------------------------------------------------------
   11. Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	body.adventure-page .title-mark__mascot {
		animation: none;
	}

	body.adventure-page .screen-btn,
	body.adventure-page .screen--setup .adventure-modifier__btn,
	body.adventure-page .setup-segment__btn,
	body.adventure-page .adventure-nav__home,
	body.adventure-page .adventure-nav__menu-btn,
	body.adventure-page .adventure-fullscreen-btn {
		transition: none;
	}

	body.adventure-page .screen-btn:hover,
	body.adventure-page .screen--setup .adventure-modifier__btn:hover,
	body.adventure-page .setup-segment__btn:hover {
		transform: none;
	}
}

body.reduce-motion .title-mark__mascot {
	animation: none;
}