/**
 * Forty Years — presentation.
 *
 * Bronze-age desert at dusk, not a cartoon. One palette lives on :root and
 * nothing outside it is hardcoded — sand and stone by day, the gold of the
 * pillar of fire and a dried-blood red for grumbling and danger, deep indigo
 * at the edges where the trail scene fades into night. #stage is the trail
 * canvas and never moves; every screen, the HUD and every panel are layered
 * over it on a fixed, commented z-index scale so the canvas is always the
 * floor the game stands on.
 */

:root {
	/* ---- palette: limestone, tent cloth, linen, bronze, fire, blood, night */
	--sand: #d8c39c;        /* undyed linen — secondary text, borders */
	--stone: #96896c;       /* weathered limestone — muted text */
	--cloth: #241f18;       /* black goat-hair cloth — card/opt surfaces */
	--ink: #12100c;         /* base background */
	--paper: #efe6d3;       /* bright linen — primary text */
	--dim: #6f6550;         /* the dimmest label ink gets */

	--gold: #d2a53c;        /* the pillar of fire — faith, good, primary */
	--gold-hi: #f2ce6c;     /* fire at its brightest — hover/emphasis */
	--gold-dim: #a8791f;    /* fire banked low — gradient shadow ends */
	--gold-ink: #241a08;    /* text set on top of gold surfaces */
	--ember: #b5652c;       /* low coal — secondary warm accent */
	--bronze: #7c5a34;      /* oxidised bronze — hardware, dividers */
	--bronze-hi: #96702f;   /* bronze catching the light — hover edges */
	--bronze-dark: #5f4319; /* bronze in shadow — button bevels */
	--blood: #7a2c24;       /* dried blood — grumbling, danger, death */
	--blood-hi: #ab4030;    /* fresh blood — emphasis on the same */
	--blood-dark: #431410;  /* blood dried black — gradient starts */
	--indigo: #181c34;      /* night at the horizon */
	--indigo-deep: #0a0c18; /* night overhead */

	--scrim: rgba(19, 15, 11, 0.94);          /* opaque panel/sheet backing */
	--scrim-soft: rgba(19, 15, 11, 0.62);     /* toast, result boxes */
	--line: rgba(216, 195, 156, 0.16);        /* quiet hairline */
	--line-strong: rgba(216, 195, 156, 0.32); /* a border meant to be seen */

	--print-bg: #fff;    /* journal printed on paper, not linen */
	--print-ink: #000;   /* printed record reads in plain black */
	--print-line: #999;  /* printed rules between journal entries */

	--safe-t: env(safe-area-inset-top, 0px);
	--safe-r: env(safe-area-inset-right, 0px);
	--safe-b: env(safe-area-inset-bottom, 0px);
	--safe-l: env(safe-area-inset-left, 0px);

	/* ---- z-index scale: stage < screens < hud < panels < toast */
	--z-stage: 0;   /* the trail canvas, always the floor */
	--z-screen: 10; /* title, menus, tribes/journal sheets, end card */
	--z-hud: 20;    /* the play HUD, sits above screens */
	--z-panel: 30;  /* turn/event/minigame panels, above the HUD */
	--z-toast: 40;  /* toasts, always on top */
}

/* ---- reset & base */

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
	margin: 0;
	padding: 0;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	background: var(--ink);
	color: var(--paper);
	font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
	overscroll-behavior: none;
	touch-action: none;
}

body { max-width: 100%; overflow-x: hidden; }
h1, h2, h3 { margin: 0; font-weight: 750; letter-spacing: -0.01em; color: var(--paper); }
p { margin: 0 0 10px; }
button { touch-action: manipulation; }

/* ---- stage */

#stage {
	position: fixed;
	inset: 0;
	z-index: var(--z-stage);
	display: block;
	width: 100%;
	height: 100%;
	background: var(--indigo-deep);
	touch-action: none;
}

/* ---- entrance keyframes (screens, panels, toast) */

@keyframes screenin { from { opacity: 0; } }
@keyframes sheetrise { from { transform: translateY(22px); opacity: 0; } }
@keyframes sheetrise-center {
	from { transform: translate(-50%, -46%); opacity: 0; }
	to { transform: translate(-50%, -50%); opacity: 1; }
}
@keyframes toastin { from { opacity: 0; transform: translateX(-50%) translateY(-10px); } }

/* ---- buttons */

.btn {
	appearance: none;
	border: 1px solid var(--bronze);
	border-radius: 8px;
	background: linear-gradient(180deg, var(--gold-hi), var(--gold) 58%, var(--gold-dim));
	color: var(--gold-ink);
	font: inherit;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 12px 22px;
	min-height: 44px;
	cursor: pointer;
	box-shadow: 0 2px 0 var(--bronze-dark), 0 5px 12px rgba(0, 0, 0, 0.4);
	transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s ease, border-color 0.15s ease;
}

.btn:hover:not(:disabled) { filter: brightness(1.08); border-color: var(--bronze-hi); }
.btn:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }

.btn:active:not(:disabled) {
	transform: translateY(2px);
	box-shadow: 0 0 0 var(--bronze-dark), 0 2px 6px rgba(0, 0, 0, 0.4);
	filter: brightness(0.97);
}

.btn:disabled { opacity: 0.4; cursor: default; box-shadow: none; filter: grayscale(0.35); }
.btn--lg { font-size: 18px; padding: 16px 30px; min-height: 54px; border-radius: 10px; }

.btn--ghost {
	background: rgba(239, 230, 211, 0.05);
	border-color: var(--line-strong);
	color: var(--sand);
	box-shadow: none;
	font-weight: 600;
}

.btn--ghost:hover:not(:disabled) { background: rgba(239, 230, 211, 0.09); border-color: var(--gold); color: var(--paper); filter: none; }
.btn--ghost:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }

.iconbtn {
	appearance: none;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	border: 1px solid var(--line-strong);
	background: rgba(12, 10, 8, 0.68);
	color: var(--sand);
	font-size: 15px;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, transform 0.08s ease;
}

.iconbtn:hover { border-color: var(--gold); color: var(--gold-hi); }
.iconbtn:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.iconbtn:active { transform: translateY(1px); }

/* ---- list-item buttons: .opt, .choice, .card */

.opt, .choice, .card {
	position: relative;
	appearance: none;
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 12px;
	row-gap: 4px;
	align-items: baseline;
	width: 100%;
	text-align: left;
	font: inherit;
	color: var(--paper);
	background: linear-gradient(180deg, rgba(64, 52, 38, 0.55), rgba(28, 22, 16, 0.72));
	border: 1px solid var(--line);
	border-left: 3px solid var(--bronze);
	border-radius: 10px;
	padding: 12px 14px;
	min-height: 44px;
	cursor: pointer;
	transition: transform 0.08s ease, border-color 0.15s ease, background 0.15s ease;
}

.opt:hover:not([disabled]), .choice:hover:not([disabled]), .card:hover:not(.is-picked) {
	border-color: var(--gold);
	background: linear-gradient(180deg, rgba(90, 70, 42, 0.55), rgba(28, 22, 16, 0.78));
}

.opt:focus-visible, .choice:focus-visible, .card:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.opt:active:not([disabled]), .choice:active:not([disabled]), .card:active { transform: translateY(1px); }

.opt__name, .choice__name { grid-column: 1; font-weight: 650; font-size: 14.5px; }
.opt__cost, .choice__cost { grid-column: 2; align-self: start; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--gold); text-align: right; white-space: nowrap; }
.opt__desc, .choice__desc { grid-column: 1 / -1; color: var(--stone); font-size: 13px; line-height: 1.4; }

.opt--bold { border-left-color: var(--gold); background: linear-gradient(180deg, rgba(210, 165, 60, 0.2), rgba(28, 22, 16, 0.8)); }
.opt--bold .opt__name { color: var(--gold-hi); }

.opt[disabled], .choice[disabled] {
	opacity: 0.45;
	cursor: default;
	filter: grayscale(0.5);
	border-left-color: var(--stone);
	transform: none;
}

.opt[disabled] .opt__cost, .choice[disabled] .choice__cost { color: var(--stone); }

/* ---- calling card (.card variant of the list-item button) */

.card__name { grid-column: 1; font-weight: 750; font-size: 15px; text-transform: uppercase; letter-spacing: 0.02em; }
.card__diff { grid-column: 2; align-self: start; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ember); text-align: right; }
.card__blurb { grid-column: 1 / -1; color: var(--stone); font-size: 13px; line-height: 1.45; }
.card__stats { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 4px 0 0; padding: 0; }
.card__stats li { font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sand); background: rgba(0, 0, 0, 0.32); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; }

.card.is-picked {
	border-color: var(--gold);
	border-left-color: var(--gold);
	background: linear-gradient(180deg, rgba(210, 165, 60, 0.26), rgba(28, 22, 16, 0.85));
	box-shadow: 0 0 0 2px rgba(210, 165, 60, 0.4) inset, 0 0 18px rgba(210, 165, 60, 0.22);
}

.card.is-picked .card__name { color: var(--gold-hi); }

/* Pinned to the top-left rather than the top-right, because the difficulty
   label already lives in the right-hand grid column and the two badges sat
   on top of each other. */
.card.is-picked::after {
	content: "Chosen";
	position: absolute;
	top: -9px;
	left: 12px;
	background: var(--gold);
	color: var(--gold-ink);
	font-size: 10px;
	font-weight: 750;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: 999px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* ---- screens */

.screen { position: fixed; inset: 0; z-index: var(--z-screen); display: flex; flex-direction: column; }

.screen--title, .screen--menu, .screen--end {
	background:
		radial-gradient(1100px 640px at 50% -8%, var(--indigo) 0%, transparent 65%),
		linear-gradient(180deg, var(--ink) 0%, var(--indigo-deep) 100%);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-y;
	align-items: center;
	animation: screenin 0.22s ease-out;
}

.screen--title, .screen--end { justify-content: center; text-align: center; }
.screen--title { padding: calc(28px + var(--safe-t)) calc(20px + var(--safe-r)) calc(28px + var(--safe-b)) calc(20px + var(--safe-l)); }
.screen--title > * { max-width: 520px; width: 100%; margin-left: auto; margin-right: auto; }

/* ---- title screen */

.title__mark {
	font-size: clamp(46px, 14vw, 82px);
	line-height: 1;
	font-weight: 800;
	letter-spacing: -0.02em;
	background: linear-gradient(180deg, var(--gold-hi), var(--ember));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.title__sub { margin: 10px 0 0; font-size: 12.5px; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; color: var(--stone); }
.lede { color: var(--sand); font-size: 15px; margin: 18px auto 26px; max-width: 36ch; }
.stack { display: flex; flex-direction: column; gap: 12px; max-width: 320px; margin: 0 auto; }
.best { color: var(--gold); font-size: 13px; margin: 22px 0 2px; min-height: 1em; font-variant-numeric: tabular-nums; }
.controls { color: rgba(150, 137, 108, 0.75); font-size: 12px; margin: 18px auto 0; max-width: 40ch; }

/* ---- menu screens (callings, how to survive) */

.menu {
	width: min(720px, 100%);
	margin: 0 auto;
	padding: calc(20px + var(--safe-t)) calc(16px + var(--safe-r)) calc(20px + var(--safe-b)) calc(16px + var(--safe-l));
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

.menu__title { font-size: 23px; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 4px; }
.menu__note { color: var(--stone); font-size: 13px; margin: 0 0 16px; }
.cards { display: grid; gap: 10px; margin-bottom: 8px; }
@media (min-width: 560px) { .cards { grid-template-columns: 1fr 1fr; } }

.rules { display: grid; gap: 14px; margin-bottom: 8px; }
.rules h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); margin-bottom: 4px; }
.rules p { margin: 0; color: var(--sand); font-size: 14px; line-height: 1.5; }

.menu__foot { margin-top: auto; padding-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.menu__foot .btn { flex: 1; min-width: 140px; }

/* ---- hud */

.hud {
	position: fixed;
	inset: 0;
	z-index: var(--z-hud);
	pointer-events: none;
	padding: calc(10px + var(--safe-t)) calc(10px + var(--safe-r)) calc(10px + var(--safe-b)) calc(10px + var(--safe-l));
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-variant-numeric: tabular-nums;
}

.hud button { pointer-events: auto; }
.hud__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.hud__day, .hud__place { display: flex; flex-direction: column; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); }
.hud__place { flex: 1; text-align: center; }
#dayLine { font-size: 15px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.04em; color: var(--paper); }
#dateLine { font-size: 11px; color: var(--sand); opacity: 0.8; margin-top: 2px; }
#stationLine { font-size: 13px; font-weight: 600; color: var(--sand); }
#milesLine { font-size: 11px; color: var(--stone); margin-top: 2px; }
.hud__btns { display: flex; gap: 8px; }

/* ---- meters */

.hud__meters { display: flex; flex-direction: column; gap: 6px; width: min(380px, 100%); }
.meter { display: flex; align-items: center; gap: 8px; }
.meter__label { flex: 0 0 auto; width: 78px; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sand); text-shadow: 0 1px 5px rgba(0, 0, 0, 0.7); }
.meter__track { flex: 1; height: 10px; border-radius: 6px; background: rgba(9, 7, 5, 0.75); border: 1px solid var(--line); box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.65); overflow: hidden; }
.meter__fill { display: block; height: 100%; width: 0; transition: width 0.25s ease; }
.meter--faith .meter__fill { background: linear-gradient(90deg, var(--ember), var(--gold) 45%, var(--gold-hi) 90%); background-size: 220% 100%; animation: faithshimmer 2.6s linear infinite; }
.meter--grumble .meter__fill { background: linear-gradient(90deg, var(--blood-dark), var(--blood) 55%, var(--blood-hi)); }

@keyframes faithshimmer {
	from { background-position: 0% 0; }
	to { background-position: 220% 0; }
}

#faithNum, #grumbleNum { flex: 0 0 auto; width: 28px; text-align: right; font-size: 12px; font-weight: 600; color: var(--sand); text-shadow: 0 1px 5px rgba(0, 0, 0, 0.7); }

/* ---- resource chips */

.hud__res { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 5px 10px; border-radius: 8px; background: rgba(15, 12, 9, 0.72); border: 1px solid var(--line); font-size: 12px; color: var(--sand); }
.chip__icon { font-size: 14px; line-height: 1; }
.chip__num { font-weight: 700; color: var(--paper); }
.chip--low { border-color: rgba(171, 64, 48, 0.6); color: var(--blood-hi); animation: chippulse 1.1s ease-in-out infinite; }
.chip--low .chip__num { color: var(--blood-hi); }

@keyframes chippulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(171, 64, 48, 0); background: rgba(15, 12, 9, 0.72); }
	50% { box-shadow: 0 0 0 5px rgba(171, 64, 48, 0.3); background: rgba(122, 44, 36, 0.35); }
}

.chip--up { animation: chipup 0.6s ease-out; }
.chip--down { animation: chipdown 0.6s ease-out; }

@keyframes chipup {
	0% { box-shadow: 0 0 0 0 rgba(210, 165, 60, 0); background: rgba(15, 12, 9, 0.72); }
	30% { box-shadow: 0 0 0 4px rgba(210, 165, 60, 0.4); background: rgba(210, 165, 60, 0.28); }
	100% { box-shadow: 0 0 0 0 rgba(210, 165, 60, 0); background: rgba(15, 12, 9, 0.72); }
}

@keyframes chipdown {
	0% { box-shadow: 0 0 0 0 rgba(122, 44, 36, 0); background: rgba(15, 12, 9, 0.72); }
	30% { box-shadow: 0 0 0 4px rgba(122, 44, 36, 0.4); background: rgba(122, 44, 36, 0.3); }
	100% { box-shadow: 0 0 0 0 rgba(122, 44, 36, 0); background: rgba(15, 12, 9, 0.72); }
}

/* ---- leg progress */

.hud__leg { display: flex; align-items: center; gap: 8px; }
.legbar { flex: 1; height: 6px; border-radius: 4px; background: rgba(9, 7, 5, 0.7); border: 1px solid var(--line); overflow: hidden; }
.legbar__fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--bronze), var(--gold)); transition: width 0.3s ease; }
#legLabel { flex: 0 0 auto; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); white-space: nowrap; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.7); }

/* ---- scripture reference aside */

.ref { display: block; font-style: italic; font-size: 12.5px; letter-spacing: 0.03em; color: var(--stone); opacity: 0.9; margin: 0 0 4px; }

/* ---- panels: bottom sheet under ~700px, centred card above it */

.panel {
	position: fixed;
	z-index: var(--z-panel);
	left: 0;
	right: 0;
	bottom: 0;
	top: auto;
	/* Leaves the top of the screen to the HUD, which sits above screens in
	   the z-stack and would otherwise be printed over by a tall panel. The
	   turn panel is the tall one — four march orders and nine camp actions —
	   and it is meant to scroll rather than to grow.

	   This has to be the HUD's measured height and not a percentage. The HUD's
	   top cluster is a fixed pixel block, so a percentage only clears it on a
	   tall screen: 78dvh opened the sheet straight through the resource chips
	   on anything shorter than about 820px, which is an iPhone SE, a budget
	   Android, or any phone held sideways. ui.js publishes --hud-room from the
	   live layout on every HUD refresh; the fallback below is the tallest that
	   block gets at 320px, covering the frame before the first refresh. */
	max-height: calc(100vh - var(--hud-room, 224px) - 12px);
	max-height: calc(100dvh - var(--hud-room, 224px) - 12px);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-y;
	padding: 18px calc(16px + var(--safe-r)) calc(18px + var(--safe-b)) calc(16px + var(--safe-l));
	background: var(--scrim);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-top: 1px solid var(--line-strong);
	border-radius: 18px 18px 0 0;
	box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.55);
	animation: sheetrise 0.2s ease-out;
}

@media (min-width: 700px) {
	.panel {
		left: 50%;
		right: auto;
		bottom: auto;
		top: 50%;
		transform: translate(-50%, -50%);
		width: min(640px, 92vw);
		max-height: 88vh;
		max-height: 88dvh;
		border: 1px solid var(--line-strong);
		border-radius: 16px;
		animation: sheetrise-center 0.2s ease-out;
	}
}

.panel__head { margin-bottom: 12px; }
.panel__head h2 { font-size: 19px; text-transform: uppercase; letter-spacing: 0.02em; }
.panel__body { display: grid; gap: 8px; }
.panel__foot { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.panel__foot .btn { min-width: 120px; }
.cloud { color: var(--stone); font-size: 13px; font-style: italic; margin: 3px 0 0; }

/* ---- event panel */

.eventart {
	display: block;
	width: 100%;
	max-width: 320px;
	height: auto;
	aspect-ratio: 320 / 120;
	margin: 8px auto;
	background: var(--indigo-deep);
	border: 1px solid var(--line);
	border-radius: 6px;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
}

.eventtext { color: var(--sand); font-size: 14px; line-height: 1.6; margin: 10px 0; }
.choices { display: grid; gap: 8px; margin-top: 6px; }
.result { margin-top: 12px; padding: 11px 13px; border-radius: 8px; background: var(--scrim-soft); border: 1px solid var(--line); color: var(--sand); font-size: 13px; line-height: 1.5; }

/* ---- the day's consequences

   One line per thing that happened, in the panel body or inside .result.
   The rule down the left is the whole visual grammar of the game in three
   colours: gold for a mercy, blood for a cost, bone for a sign. */

.result__line {
	margin: 0 0 8px;
	padding-left: 11px;
	border-left: 2px solid var(--line-strong);
	color: var(--sand);
	font-size: 14px;
	line-height: 1.55;
}

.result__line:last-child { margin-bottom: 0; }
.result__line--good { border-left-color: var(--gold); color: var(--paper); }
.result__line--death { border-left-color: var(--blood); color: var(--blood-hi); }
.result__line--sign {
	border-left-color: var(--paper);
	color: var(--paper);
	font-style: italic;
}

/* ---- minigame panel */

.hint { color: var(--stone); font-size: 12px; margin: 2px 0 12px; }

.minicanvas {
	display: block;
	width: 100%;
	max-width: 420px;
	height: auto;
	aspect-ratio: 1 / 1;
	margin: 0 auto;
	background: var(--indigo-deep);
	border: 1px solid var(--line);
	border-radius: 8px;
	touch-action: none;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
}

.panel--mini .panel__foot { justify-content: space-between; align-items: center; }
.score { font-size: 14px; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }

/* ---- sheets: tribes, journal */

.screen--sheet { align-items: stretch; justify-content: flex-end; }

.sheet {
	width: 100%;
	max-height: 88vh;
	max-height: 88dvh;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-y;
	padding: 20px calc(16px + var(--safe-r)) calc(20px + var(--safe-b)) calc(16px + var(--safe-l));
	background: var(--scrim);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-top: 1px solid var(--line-strong);
	border-radius: 18px 18px 0 0;
	box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.55);
	animation: sheetrise 0.2s ease-out;
}

@media (min-width: 700px) {
	.screen--sheet { align-items: center; justify-content: center; }

	.sheet {
		width: min(640px, 92vw);
		max-height: 82vh;
		max-height: 82dvh;
		border: 1px solid var(--line-strong);
		border-radius: 16px;
		animation: sheetrise-center 0.2s ease-out;
	}
}

.sheet__title { font-size: 20px; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 14px; }
.sheet__foot { margin-top: 16px; }
.sheet__foot .btn { width: 100%; }

/* ---- tribes grid */

.tribes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 460px) { .tribes { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px) { .tribes { grid-template-columns: repeat(4, 1fr); } }

.tribe {
	position: relative;
	padding: 11px 11px 11px 16px;
	border-radius: 8px;
	background: rgba(22, 18, 13, 0.65);
	border: 1px solid var(--line);
	overflow: hidden;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.tribe__banner { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--banner, var(--bronze)); }
.tribe__name { display: block; font-size: 12.5px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.02em; }
.tribe__pop { display: block; font-size: 12px; color: var(--sand); font-variant-numeric: tabular-nums; margin-top: 3px; }
.tribe__trait { display: block; font-size: 11px; font-style: italic; color: var(--stone); margin-top: 4px; line-height: 1.35; }
.tribe__blurb { display: block; font-size: 11px; color: var(--stone); margin-top: 5px; line-height: 1.4; }

/* The mood bar is a track with a fill inside it, not a single sized element,
   so a tribe at zero still shows the trough it has fallen out of. */
.tribe__mood { display: block; height: 4px; margin-top: 8px; border-radius: 3px; background: rgba(9, 7, 5, 0.8); box-shadow: 0 0 0 1px var(--line) inset; overflow: hidden; }
.tribe__mood-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--bronze), var(--gold)); transition: width 0.25s ease; }
.tribe.is-lost, .tribe.is-lost * { text-decoration: line-through; text-decoration-color: var(--blood-hi); }
.tribe.is-lost { filter: grayscale(0.85) brightness(0.72); opacity: 0.62; }

/* ---- journal */

.journal { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
/* The day column has to hold "Year 12, day 5" once the wandering starts,
   not just "Day 41", so it is sized for the long form and allowed to wrap. */
.entry { display: grid; grid-template-columns: 74px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.entry:last-child { border-bottom: 0; }
.entry__day { grid-column: 1; font-size: 11.5px; font-weight: 700; text-align: right; padding-right: 9px; border-right: 1px solid var(--line); color: var(--stone); font-variant-numeric: tabular-nums; line-height: 1.4; }
.entry__text { grid-column: 2; color: var(--sand); line-height: 1.55; }
.entry__ref { grid-column: 2; display: block; margin-top: 3px; font-style: italic; font-size: 11.5px; letter-spacing: 0.02em; color: var(--stone); opacity: 0.85; }
.entry--death .entry__day, .entry--death .entry__text { color: var(--blood-hi); }
.entry--good .entry__day { color: var(--gold); }
.entry--good .entry__text { color: var(--gold-hi); }
.entry--sign .entry__text { font-style: italic; letter-spacing: 0.01em; }

/* ---- end card */

.endcard {
	width: min(560px, 100%);
	margin: 0 auto;
	padding: calc(28px + var(--safe-t)) calc(20px + var(--safe-r)) calc(28px + var(--safe-b)) calc(20px + var(--safe-l));
	text-align: center;
}

#endTitle { font-size: 28px; text-transform: uppercase; letter-spacing: 0.02em; margin: 6px 0 12px; }
#endText { color: var(--sand); font-size: 14.5px; line-height: 1.6; margin: 0 0 18px; }
.stats { display: grid; grid-template-columns: 1fr auto; gap: 7px 14px; text-align: left; margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: rgba(22, 18, 13, 0.5); }
.stats dt { margin: 0; color: var(--stone); font-size: 13px; align-self: center; }
.stats dd { margin: 0; font-weight: 700; color: var(--paper); font-variant-numeric: tabular-nums; text-align: right; }
.award { color: var(--gold); font-size: 13.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 24px; }

/* ---- toast */

/* Anchored to the top, not the bottom: every panel in this game is a bottom
   sheet, and a toast down there lands on the Continue button the player is
   already reaching for. */
#toast {
	position: fixed;
	left: 50%;
	top: calc(14px + var(--safe-t));
	transform: translateX(-50%);
	z-index: var(--z-toast);
	max-width: min(90vw, 420px);
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--scrim);
	border: 1px solid var(--line-strong);
	color: var(--paper);
	font-size: 13px;
	text-align: center;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
	pointer-events: none;
	animation: toastin 0.22s ease-out;
}

/* ---- reduced motion */

@media (prefers-reduced-motion: reduce) {
	.meter--faith .meter__fill, .chip--low { animation: none; }

	.screen, .screen--title, .screen--menu, .screen--end,
	.panel, .sheet, #toast, .chip--up, .chip--down {
		animation-duration: 0.01s;
	}

	.btn, .btn--ghost, .iconbtn, .opt, .choice, .card, .tribe {
		transition-duration: 0.01s;
	}
}

/* ---- higher contrast */

@media (prefers-contrast: more) {
	:root {
		--line: rgba(216, 195, 156, 0.42);
		--line-strong: rgba(216, 195, 156, 0.65);
		--stone: #c9bd9d;
	}

	.btn, .btn--ghost, .iconbtn,
	.opt, .choice, .card,
	.chip, .meter__track,
	.panel, .sheet, #toast,
	.tribe, .entry {
		border-width: 2px;
	}

	.opt__desc, .choice__desc, .card__blurb, .cloud, .hint, .entry__ref, .ref {
		color: var(--sand);
	}
}

/* ---- print: keep the record, drop everything else */

@media print {
	#stage, #title, #callings, #how, #hud, #turn, #event, #mini, #tribes, #end, #toast {
		display: none !important;
	}

	html, body { height: auto; overflow: visible; background: var(--print-bg); color: var(--print-ink); }
	#journal, #journal[hidden] { display: block !important; position: static; }
	.screen--sheet { position: static; inset: auto; background: none; }

	#journal .sheet {
		position: static;
		max-height: none;
		overflow: visible;
		background: var(--print-bg);
		border: 0;
		box-shadow: none;
		backdrop-filter: none;
		animation: none;
		padding: 0;
		color: var(--print-ink);
	}

	#journal .sheet__title { color: var(--print-ink); }
	#journal .sheet__foot { display: none; }
	.entry, .entry__day, .entry__text, .entry__ref { color: var(--print-ink) !important; }
	.entry { border-bottom-color: var(--print-line); }
}