/* Tale Forge — immersive, per-world themed player shell (Phase 12).
 *
 * The shell is full-screen and diegetic: when rendered in immersive mode the
 * Shortcode suppresses WordPress chrome (admin bar + theme header/footer via
 * the `taleforge-immersive` body class) and this stylesheet takes over the
 * viewport. Per-world theming is data-driven: app.js injects the selected
 * world's palette and fonts as the `--tf-*` custom properties declared below,
 * so colours and typography re-skin per world without any per-world CSS.
 *
 * Ambient motion (slow ember drift, settling ash) and scene fades are defined
 * at the foot of this file and are fully disabled under
 * `@media (prefers-reduced-motion: reduce)`. */

/* Belt-and-suspenders: if the logged-in admin bar still renders on a game page,
   keep it out of the immersive frame (the PHP show_admin_bar filter is the primary
   suppression; this covers any theme that prints it before the filter re-applies). */
body.taleforge-immersive #wpadminbar,
body.taleforge-fullscreen #wpadminbar {
	display: none !important;
}
body.taleforge-immersive,
body.taleforge-fullscreen {
	margin-top: 0 !important;
}

.taleforge-app {
	/* Per-world theme tokens. These defaults match the dark_fantasy palette and
	 * are overwritten at runtime by app.js (element.style.setProperty) from the
	 * selected world's theme.palette / theme.fonts. */
	--tf-bg: #14110f;
	--tf-surface: #241d17;
	--tf-ink: #ece5da;
	--tf-muted: #b8a98f;
	--tf-line: rgba( 169, 139, 98, 0.25 );
	--tf-ember: #c8612d;
	--tf-accent: #a98b62;
	--tf-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Cochin", "Hoefler Text", Georgia, serif;
	--tf-body: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
	--tf-ease: cubic-bezier( 0.32, 0.72, 0, 1 );

	max-width: 42rem;
	margin: 2rem auto;
	padding: 1.5rem;
	border: 1px solid rgba( 0, 0, 0, 0.12 );
	border-radius: 10px;
	background: var( --tf-bg );
	color: var( --tf-ink );
	font-family: var( --tf-body );
	line-height: 1.6;
}

/* Screen switching: the app shows exactly one screen at a time (intro, setup,
 * scene, milestone) by toggling the `hidden` attribute in app.js. Several panels
 * set their own `display` (flex/grid), which would override the browser's default
 * `[hidden] { display: none }` — so without this rule every screen renders stacked
 * at once. This guarantees a hidden element is truly hidden. */
.taleforge-app [hidden],
.taleforge-app[hidden] {
	display: none !important;
}

/* The in-scene Menu: a small, unobtrusive affordance that reveals the secondary
   controls (gods, save, timeline) so the reading view stays focused on the story. */
.taleforge-app__menu {
	font: inherit;
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	cursor: pointer;
	color: var( --tf-muted );
	background: transparent;
	border: 0;
	border-top: 1px solid var( --tf-line );
	width: 100%;
	text-align: left;
	padding: 0.9rem 0 0.3rem;
	margin-top: 1.5rem;
	transition: color 0.3s var( --tf-ease, ease );
}

.taleforge-app__menu:hover,
.taleforge-app__menu[aria-expanded="true"] {
	color: var( --tf-ember );
}

.taleforge-app__tools {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin-top: 0.6rem;
	padding-top: 0.2rem;
}

/* Immersive mode: a full-screen, diegetic surface. The Shortcode adds the
 * `taleforge-immersive` body class (and hides the admin bar + theme chrome),
 * and marks the mount with `data-taleforge-immersive`; the app then fills the
 * viewport with no card framing, so the world's art and type carry the scene. */
body.taleforge-immersive {
	margin: 0;
	background: var( --tf-bg, #14110f );
}

.taleforge-app.is-immersive {
	position: relative;
	max-width: none;
	min-height: 100vh;
	min-height: 100dvh;
	margin: 0;
	padding: clamp( 1.25rem, 5vw, 4rem ) clamp( 1rem, 6vw, 6rem );
	border: 0;
	border-radius: 0;
	box-sizing: border-box;
	overflow: hidden;
}

/* The readable content sits in a centred column over the full-bleed backdrop. */
.taleforge-app.is-immersive > * {
	position: relative;
	z-index: 1;
	max-width: 46rem;
	margin-left: auto;
	margin-right: auto;
}

/* Ambient backdrop layer: holds the drifting ember/ash motes (see keyframes
 * below). Sits behind the content and never intercepts pointer events. */
.taleforge-app__ambient {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

/* Display type (headings, the Begin button) uses the world's display font. */
.taleforge-app__start,
.taleforge-app__setup-title,
.taleforge-app__milestone-title {
	font-family: var( --tf-display );
}

/* ---------------------------------------------------------------------------
   The title hero (the landing / home page). A cinematic, art-directed entry:
   refined serif wordmark, eyebrow microtype, a single confident CTA, and the
   three worlds named beneath. Atmosphere comes from the vignette + grain + the
   ambient ember layer, not from gradients-as-decoration.
   --------------------------------------------------------------------------- */
.taleforge-app__intro {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 78vh;
	min-height: 78dvh;
	padding: 2rem 0;
	/* Admin-tunable: lift the title screen so the language picker + CTA stay visible on
	   shorter laptop screens (the immersive shell clips overflow). Default 100px. */
	margin-top: calc( -1 * var( --tf-landing-shift, 100px ) );
}

/* Admin-tunable: lift the setup + play screens by a smaller amount. Default 30px. */
.taleforge-app__setup,
.taleforge-app__scene {
	margin-top: calc( -1 * var( --tf-page-shift, 30px ) );
}

.taleforge-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 38rem;
	gap: 1.4rem;
}

.taleforge-hero__eyebrow {
	font-family: var( --tf-body );
	font-size: 0.72rem;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var( --tf-muted );
	padding-bottom: 0.2rem;
	border-bottom: 1px solid var( --tf-line );
}

.taleforge-hero__title {
	font-family: var( --tf-display );
	font-weight: 600;
	font-size: clamp( 3.4rem, 13vw, 7.5rem );
	line-height: 0.92;
	letter-spacing: -0.015em;
	margin: 0;
	color: var( --tf-ink );
}

.taleforge-hero__title-line {
	display: block;
}

/* The second word carries the ember accent — restrained, not a rainbow gradient. */
.taleforge-hero__title-line + .taleforge-hero__title-line {
	color: var( --tf-ember );
	font-style: italic;
}

.taleforge-hero__tagline {
	font-family: var( --tf-body );
	font-size: clamp( 1rem, 2.6vw, 1.2rem );
	line-height: 1.55;
	color: var( --tf-muted );
	margin: 0;
	max-width: 30rem;
	text-wrap: balance;
}

/* The CTA: a fully-rounded pill with the arrow nested in its own circle
   (button-in-button), magnetic hover, and a physical press. */
.taleforge-hero__enter {
	display: inline-flex;
	align-items: center;
	gap: 0.9rem;
	font-family: var( --tf-body );
	font-size: 1.02rem;
	letter-spacing: 0.01em;
	cursor: pointer;
	color: var( --tf-bg );
	background: var( --tf-ink );
	border: 0;
	padding: 0.7rem 0.7rem 0.7rem 1.6rem;
	margin-top: 0.4rem;
	border-radius: 999px;
	transition: transform 0.5s var( --tf-ease ), background 0.5s var( --tf-ease ), box-shadow 0.5s var( --tf-ease );
	box-shadow: 0 1px 0 rgba( 255, 255, 255, 0.18 ) inset, 0 10px 30px -12px rgba( 0, 0, 0, 0.7 );
}

.taleforge-hero__enter:hover {
	background: var( --tf-ember );
	color: #fff;
	transform: translateY( -2px );
}

.taleforge-hero__enter:active {
	transform: translateY( 0 ) scale( 0.985 );
}

.taleforge-hero__enter:focus-visible {
	outline: 2px solid var( --tf-ember );
	outline-offset: 3px;
}

.taleforge-hero__enter-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 999px;
	background: rgba( 0, 0, 0, 0.12 );
	font-size: 1.05rem;
	transition: transform 0.5s var( --tf-ease );
}

.taleforge-hero__enter:hover .taleforge-hero__enter-icon {
	background: rgba( 255, 255, 255, 0.18 );
	transform: translateX( 3px );
}

.taleforge-hero__worlds {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.4rem 1rem;
	margin: 0.8rem 0 0;
	padding: 0;
	font-size: 0.68rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var( --tf-muted );
}

.taleforge-hero__worlds li {
	position: relative;
}

.taleforge-hero__worlds li + li::before {
	content: "";
	position: absolute;
	left: -0.55rem;
	top: 50%;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var( --tf-accent );
	transform: translateY( -50% );
	opacity: 0.7;
}

/* Staggered, heavy fade-up entrance for the hero pieces (motion-safe). */
@media ( prefers-reduced-motion: no-preference ) {
	.taleforge-hero > * {
		opacity: 0;
		transform: translateY( 1.4rem );
		filter: blur( 6px );
		animation: taleforge-rise 0.9s var( --tf-ease ) forwards;
	}
	.taleforge-hero__eyebrow { animation-delay: 0.05s; }
	.taleforge-hero__title { animation-delay: 0.16s; }
	.taleforge-hero__tagline { animation-delay: 0.3s; }
	.taleforge-hero__enter { animation-delay: 0.44s; }
	.taleforge-hero__worlds { animation-delay: 0.58s; }
}

@keyframes taleforge-rise {
	to {
		opacity: 1;
		transform: translateY( 0 );
		filter: blur( 0 );
	}
}

/* Full-screen template document: no theme chrome, the canvas owns the viewport. */
body.taleforge-fullscreen-doc {
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	background: #14110f;
}

/* A cinematic vignette + fine film grain over the immersive backdrop. Both are
   non-interactive overlays; grain is a fixed, GPU-cheap pseudo-element. */
.taleforge-app.is-immersive::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient( 120% 80% at 50% 18%, transparent 40%, rgba( 0, 0, 0, 0.55 ) 100% );
}

body.taleforge-fullscreen-doc::after,
body.taleforge-immersive::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	opacity: 0.04;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E" );
}

.taleforge-app__start,
.taleforge-app__send,
.taleforge-app__choice {
	font: inherit;
	cursor: pointer;
	border: 1px solid var( --tf-accent );
	background: var( --tf-surface );
	color: var( --tf-ink );
	padding: 0.6rem 1.1rem;
	border-radius: 6px;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.16s var( --tf-ease-out );
}

.taleforge-app__start:hover,
.taleforge-app__send:hover,
.taleforge-app__choice:hover {
	background: var( --tf-surface );
	border-color: var( --tf-ember );
}

/* Press feedback: the choice scales down slightly so it feels like it heard the tap. */
.taleforge-app__choice:active {
	transform: scale( 0.985 );
}

.taleforge-app__start {
	font-size: 1.1rem;
	padding: 0.8rem 2rem;
}

.taleforge-app__narration {
	font-family: var( --tf-body );
	font-size: 1.1rem;
	line-height: 1.7;
	margin: 0 0 1.25rem;
	/* Scenes are now four-to-five paragraphs; pre-wrap renders the \n\n breaks the
	   model emits between them as real paragraph spacing. */
	white-space: pre-wrap;
}

.taleforge-app__choices {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.taleforge-app__choice {
	width: 100%;
	text-align: left;
}

/* Choices read uniformly — no per-kind colored accent (the kind class is still set on
   each button for data purposes, but it carries no visual treatment). */

/* Turn feedback: when a choice is taken, the picked option is highlighted, the others
   are greyed out, and while the next scene generates the unchosen ones are hidden so
   only the choice you made remains in view. render() rebuilds the list fresh after. */
.taleforge-app__choice.is-chosen {
	border-color: var( --tf-ember, #c2683a );
	box-shadow: 0 0 0 1px var( --tf-ember, #c2683a ), 0 0 18px rgba( 194, 104, 58, 0.35 );
	background: rgba( 194, 104, 58, 0.14 );
	color: #fff;
}

.taleforge-app__choice.is-dimmed {
	opacity: 0.35;
	pointer-events: none;
}

/* During a turn the whole narrative block fades and collapses together (see
   .is-thinking below), so the unchosen choices recede with it rather than snapping
   out — no instant list-height jump. */

/* ---------------------------------------------------------------------------
   Turn flow: pick a choice → it pins to the top, the rest of the scene fades
   away, "the storyteller is thinking…" shows, the prose streams in below, and
   the next choices lazy-load in a gentle stagger. A continuous downward flow.
   Strong ease-out (the built-in curves are too weak); transform/opacity only.
   --------------------------------------------------------------------------- */
.taleforge-app {
	--tf-ease-out: cubic-bezier( 0.23, 1, 0.32, 1 );
}

/* The action the player just took, pinned above the new scene. A small entrance delay
   lets it land just after the rest of the scene starts receding (no competing motion). */
.taleforge-app__action {
	margin: 0 0 1rem;
	padding: 0.5rem 0 0.75rem 0.9rem;
	border-left: 2px solid var( --tf-ember, #c2683a );
	font-family: var( --tf-body );
	font-style: italic;
	font-size: 1rem;
	color: #cfc8ba;
	opacity: 0;
	transform: translateY( -6px );
	transition: opacity 260ms var( --tf-ease-out ) 60ms, transform 260ms var( --tf-ease-out ) 60ms;
}

.taleforge-app__action.is-in {
	opacity: 1;
	transform: translateY( 0 );
}

.taleforge-app__action[hidden] {
	display: none;
}

/* While the next scene is written: fade the rest of the scene out of the way so the
   eye stays on the action + the writing area at the top. The 220ms fade finishes before
   the JS collapses the block from layout (240ms), so there is no height snap. */
.taleforge-app__scene.is-thinking .taleforge-app__narrative,
.taleforge-app__scene.is-thinking .taleforge-app__divine {
	opacity: 0;
	transform: translateY( 6px );
	pointer-events: none;
	transition: opacity 220ms var( --tf-ease-out ), transform 220ms var( --tf-ease-out );
}

/* "The storyteller is thinking…" placeholder: a soft, breathing prompt (a shallow pulse
   reads as calm anticipation, not a blink). */
.taleforge-app__narration.is-thinking-text {
	font-style: italic;
	color: #b8b1a3;
	animation: tfThink 1.6s ease-in-out infinite;
}

@keyframes tfThink {
	0%, 100% { opacity: 0.65; }
	50% { opacity: 1; }
}

/* Lazy-load entrance: each choice — and the free-text block that follows them — fades +
   lifts up just after the previous one, for a smooth cascading reveal. GPU-only. */
.taleforge-app .is-enter {
	opacity: 0;
	transform: translateY( 12px );
	animation: tfChoiceIn 360ms var( --tf-ease-out ) both;
}

@keyframes tfChoiceIn {
	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	/* Keep gentle opacity, drop all movement and the breathing pulse. */
	.taleforge-app__action,
	.taleforge-app__scene.is-thinking .taleforge-app__narrative,
	.taleforge-app__scene.is-thinking .taleforge-app__divine {
		transform: none;
		transition: opacity 200ms ease;
	}
	.taleforge-app__narration.is-thinking-text {
		animation: none;
	}
	.taleforge-app .is-enter {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

.taleforge-app__summary {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
	margin: 0 0 1rem;
	padding: 0 0 0.75rem;
	border-bottom: 1px solid rgba( 169, 139, 98, 0.25 );
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	color: #c9b89a;
}

.taleforge-app__summary:empty {
	display: none;
}

.taleforge-app__stat {
	white-space: nowrap;
}

/* Free-text alternative: lives just under the choices in the answers block. */
.taleforge-app__free-wrap {
	margin-top: 0.25rem;
}

/* "Or make your own choice" — a quiet divider between the offered choices and the box,
   with a hairline rule on each side so it reads as a separator, not another option. */
.taleforge-app__free-sep {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0.35rem 0 0.7rem;
	font-size: 0.82rem;
	font-style: italic;
	letter-spacing: 0.01em;
	color: #9a948a;
	text-align: center;
}

.taleforge-app__free-sep::before,
.taleforge-app__free-sep::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: rgba( 169, 139, 98, 0.22 );
}

.taleforge-app__free {
	display: flex;
	gap: 0.5rem;
}

.taleforge-app__input {
	flex: 1 1 auto;
	font: inherit;
	padding: 0.55rem 0.75rem;
	border-radius: 6px;
	border: 1px solid #6b5a45;
	background: #0e0c0a;
	color: #ece5da;
}

.taleforge-app__input::placeholder {
	color: #8c8073;
}

.taleforge-app__status {
	margin: 1rem 0 0;
	min-height: 1.2em;
	font-style: italic;
	color: #b8a98f;
}

/* --- Combat UI ----------------------------------------------------------- */

.taleforge-app__combat {
	margin: 0 0 1.25rem;
	padding: 1rem;
	border: 1px solid rgba( 168, 66, 58, 0.4 );
	border-radius: 8px;
	background: rgba( 40, 18, 14, 0.45 );
}

.taleforge-app__combatants {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin: 0 0 1rem;
}

.taleforge-app__bar {
	display: grid;
	grid-template-columns: 6rem 1fr auto;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.85rem;
	letter-spacing: 0.02em;
}

.taleforge-app__bar-label {
	color: #c9b89a;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.taleforge-app__bar-track {
	position: relative;
	height: 0.7rem;
	border-radius: 4px;
	background: #1c1612;
	border: 1px solid rgba( 169, 139, 98, 0.25 );
	overflow: hidden;
}

.taleforge-app__bar-fill {
	display: block;
	height: 100%;
	width: 100%;
	transition: width 0.35s ease;
}

.taleforge-app__bar--enemy .taleforge-app__bar-fill {
	background: linear-gradient( 90deg, #7a3b2e, #c8612d );
}

.taleforge-app__bar--player .taleforge-app__bar-fill {
	background: linear-gradient( 90deg, #4a8c6a, #7bbf97 );
}

.taleforge-app__bar-value {
	color: #ece5da;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.taleforge-app__bidform {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.75rem 1rem;
}

.taleforge-app__bidlabel {
	flex: 1 1 14rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	color: #e7e2d6;
	font-size: 0.9rem;
}

.taleforge-app__bidrange {
	width: 100%;
	accent-color: #c8612d;
}

.taleforge-app__castlabel {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	color: #c9b89a;
	font-size: 0.85rem;
}

.taleforge-app__cast {
	font: inherit;
	padding: 0.4rem 0.5rem;
	border-radius: 6px;
	border: 1px solid #6b5a45;
	background: #0e0c0a;
	color: #ece5da;
}

.taleforge-app__strike,
.taleforge-app__continue {
	font: inherit;
	cursor: pointer;
	border: 1px solid #a8423a;
	background: #3a1714;
	color: #f3ece1;
	padding: 0.6rem 1.4rem;
	border-radius: 6px;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.taleforge-app__strike:hover,
.taleforge-app__continue:hover {
	background: #511f1a;
	border-color: #c8612d;
}

.taleforge-app__continue {
	margin-top: 0.75rem;
	border-color: #a98b62;
	background: #241d17;
}

/* Spellbook (narrative casting). */
.taleforge-app__spellbook {
	margin: 0.75rem 0;
}

.taleforge-app__spellbook-toggle {
	font: inherit;
	cursor: pointer;
	border: 1px solid #6b5a45;
	background: #1b1611;
	color: #c9b89a;
	padding: 0.45rem 0.9rem;
	border-radius: 6px;
	letter-spacing: 0.02em;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.taleforge-app__spellbook-toggle:hover {
	border-color: #c8612d;
	color: #ece5da;
}

.taleforge-app__spells {
	list-style: none;
	margin: 0.6rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.taleforge-app__spell {
	font: inherit;
	cursor: pointer;
	border: 1px solid #5c4d8a;
	background: #181426;
	color: #d8d0ec;
	padding: 0.5rem 0.9rem;
	border-radius: 6px;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.taleforge-app__spell:hover {
	background: #221b38;
	border-color: #8a73c8;
}

.taleforge-app__spell--disabled,
.taleforge-app__spell:disabled {
	cursor: not-allowed;
	opacity: 0.45;
	border-color: #463c5a;
}

/* Gods / favor panel (Phase 6). The world's pantheon, current favor, devotion,
 * and the boons/curses the engine has triggered. Restrained to match the shell;
 * the full per-world sigil art arrives with the art manifest. */
.taleforge-app__gods {
	margin: 1rem 0 0;
	border-top: 1px solid rgba( 169, 139, 98, 0.25 );
	padding-top: 0.75rem;
}

.taleforge-app__gods-toggle {
	font: inherit;
	cursor: pointer;
	border: 1px solid #6b5a45;
	background: #1c1812;
	color: #e7ddcd;
	padding: 0.45rem 0.9rem;
	border-radius: 6px;
	letter-spacing: 0.04em;
}

.taleforge-app__gods-toggle:hover {
	background: #2a2218;
	border-color: #a98b62;
}

.taleforge-app__gods-body {
	margin-top: 0.75rem;
}

.taleforge-app__devotion {
	margin: 0 0 0.5rem;
	font-style: italic;
	color: #c8a86a;
}

.taleforge-app__god-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.taleforge-app__god {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	padding: 0.5rem 0.6rem;
	border: 1px solid rgba( 107, 90, 69, 0.5 );
	border-radius: 6px;
	background: #18130e;
}

.taleforge-app__god--devoted {
	border-color: #c8a86a;
	box-shadow: 0 0 0 1px rgba( 200, 168, 106, 0.3 );
}

.taleforge-app__god-sigil {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%;
	border: 1px solid #a98b62;
	background: #241d17;
	color: #e7ddcd;
	font-weight: bold;
}

.taleforge-app__god-name {
	font-variant: small-caps;
	letter-spacing: 0.03em;
	color: #ece5da;
}

.taleforge-app__god-favor {
	margin-left: auto;
	font-size: 0.9rem;
	color: #b8b5ae;
}

.taleforge-app__god-badge {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #14110f;
	background: #c8a86a;
	padding: 0.1rem 0.4rem;
	border-radius: 4px;
}

.taleforge-app__god-effects {
	list-style: none;
	margin: 0;
	padding: 0;
	flex-basis: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.taleforge-app__god-effect {
	font-size: 0.75rem;
	padding: 0.1rem 0.45rem;
	border-radius: 4px;
	border: 1px solid transparent;
}

.taleforge-app__god-effect--boon {
	color: #cfe6c2;
	background: rgba( 70, 110, 60, 0.25 );
	border-color: rgba( 120, 170, 100, 0.4 );
}

.taleforge-app__god-effect--curse {
	color: #e6c2c2;
	background: rgba( 122, 59, 46, 0.3 );
	border-color: rgba( 200, 97, 45, 0.45 );
}

/* Divine-intervention banner: a boon/curse triggered this turn. */
.taleforge-app__divine {
	margin: 0 0 0.75rem;
	padding: 0.5rem 0.75rem;
	border-radius: 6px;
	border: 1px solid rgba( 200, 168, 106, 0.4 );
	background: rgba( 36, 29, 23, 0.7 );
}

.taleforge-app__divine-line {
	margin: 0.15rem 0;
	font-style: italic;
}

.taleforge-app__divine-line--boon {
	color: #cfe6c2;
}

.taleforge-app__divine-line--curse {
	color: #e6c2c2;
}

/* Rewind timeline: a scrubber of prior turns; jumps to any earlier turn. */
.taleforge-app__timeline {
	margin: 0 0 0.75rem;
}

.taleforge-app__timeline-toggle {
	background: none;
	border: 1px solid rgba( 200, 168, 106, 0.4 );
	color: #d8c9a8;
	padding: 0.3rem 0.7rem;
	border-radius: 6px;
	cursor: pointer;
	font: inherit;
}

.taleforge-app__timeline-toggle:hover {
	background: rgba( 200, 168, 106, 0.12 );
}

.taleforge-app__timeline-list {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
	max-height: 16rem;
	overflow-y: auto;
	border: 1px solid rgba( 200, 168, 106, 0.2 );
	border-radius: 6px;
}

.taleforge-app__timeline-item {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid rgba( 200, 168, 106, 0.12 );
}

.taleforge-app__timeline-item:last-child {
	border-bottom: none;
}

.taleforge-app__timeline-item--checkpoint {
	border-left: 3px solid rgba( 200, 168, 106, 0.7 );
}

.taleforge-app__timeline-item--current {
	background: rgba( 200, 168, 106, 0.12 );
}

.taleforge-app__timeline-meta {
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #b7a079;
}

.taleforge-app__timeline-excerpt {
	font-size: 0.85rem;
	color: #cdbfa6;
	font-style: italic;
}

.taleforge-app__timeline-rewind {
	align-self: flex-start;
	margin-top: 0.2rem;
	background: none;
	border: 1px solid rgba( 200, 168, 106, 0.35 );
	color: #d8c9a8;
	padding: 0.15rem 0.55rem;
	border-radius: 5px;
	cursor: pointer;
	font-size: 0.78rem;
}

.taleforge-app__timeline-rewind:hover {
	background: rgba( 200, 168, 106, 0.15 );
}

.taleforge-app__timeline-empty {
	padding: 0.6rem 0.75rem;
	color: #9c8d70;
	font-style: italic;
}

/* -------------------------------------------------------------------------
 * Phase 8: setup flow (world -> story -> character), saves, milestone overlay.
 * Minimal per-world theming is applied inline by app.js (accent border);
 * the immersive shell arrives in Phase 12.
 * ------------------------------------------------------------------------- */

.taleforge-app__setup {
	margin: 0.5rem 0 1rem;
}

.taleforge-app__setup-title {
	margin: 0.4rem 0 0.8rem;
	font-size: 1.15rem;
	color: #e7e2d6;
}

/* Language picker: a small label + two pill buttons. Used on the landing and setup. */
.taleforge-app__lang-inner {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1rem;
	flex-wrap: wrap;
}

/* On the landing the picker is centred under the world list. */
.taleforge-hero__lang {
	display: flex;
	justify-content: center;
	margin-top: 0.875rem;
}

.taleforge-hero__lang .taleforge-app__lang-inner {
	margin: 0;
}

.taleforge-app__lang-label {
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #b8b5ae;
}

.taleforge-app__lang-btn {
	background: rgba( 255, 255, 255, 0.04 );
	border: 1px solid rgba( 255, 255, 255, 0.18 );
	color: #d8d4ca;
	border-radius: 999px;
	padding: 0.25rem 0.85rem;
	font: inherit;
	font-size: 0.9rem;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.taleforge-app__lang-btn:hover {
	border-color: var( --tf-ember, rgba( 255, 255, 255, 0.4 ) );
}

.taleforge-app__lang-btn.is-active {
	background: var( --tf-ember, #c2683a );
	border-color: var( --tf-ember, #c2683a );
	color: #1a1410;
	font-weight: 600;
}

.taleforge-app__setup-back {
	background: none;
	border: none;
	color: #b8b5ae;
	cursor: pointer;
	padding: 0.2rem 0;
	font-size: 0.85rem;
}

.taleforge-app__setup-back:hover {
	color: #e7e2d6;
}

.taleforge-app__world-grid,
.taleforge-app__story-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

.taleforge-app__world-grid {
	grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
	align-items: stretch;
}

/* Cards in a row share the tallest height: the grid item and its button both
   stretch, so uneven description lengths no longer make ragged card heights. */
.taleforge-app__world-card,
.taleforge-app__story-item {
	display: flex;
}

.taleforge-app__world-btn,
.taleforge-app__story-btn,
.taleforge-app__bg-btn {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	width: 100%;
	height: 100%;
	text-align: left;
	background: rgba( 20, 17, 14, 0.6 );
	border: 1px solid rgba( 200, 168, 106, 0.25 );
	border-radius: 8px;
	padding: 0.7rem 0.85rem;
	cursor: pointer;
	color: #e7e2d6;
}

.taleforge-app__world-btn:hover,
.taleforge-app__story-btn:hover,
.taleforge-app__bg-btn:hover,
.taleforge-app__bg-btn.is-selected {
	background: rgba( 200, 168, 106, 0.12 );
}

.taleforge-app__world-name,
.taleforge-app__story-title,
.taleforge-app__bg-name {
	font-weight: 600;
}

.taleforge-app__world-style,
.taleforge-app__story-premise,
.taleforge-app__bg-flavor {
	font-size: 0.85rem;
	color: #b8b5ae;
}

.taleforge-app__char {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	margin-top: 0.6rem;
}

.taleforge-app__char-field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.taleforge-app__char-name {
	padding: 0.45rem 0.6rem;
	border-radius: 6px;
	border: 1px solid rgba( 200, 168, 106, 0.3 );
	background: rgba( 20, 17, 14, 0.6 );
	color: #e7e2d6;
}

.taleforge-app__char-heading {
	font-weight: 600;
	color: #e7e2d6;
	margin-top: 0.3rem;
}

.taleforge-app__bg-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.taleforge-app__points {
	color: #b8b5ae;
	font-size: 0.9rem;
}

.taleforge-app__points.is-ready {
	color: #8fbf6a;
}

.taleforge-app__stat-row {
	display: grid;
	grid-template-columns: 6rem 1fr 2.5rem;
	align-items: center;
	gap: 0.6rem;
}

.taleforge-app__stat-name {
	color: #e7e2d6;
}

.taleforge-app__stat-value {
	text-align: right;
	font-variant-numeric: tabular-nums;
	color: #c8a86a;
}

.taleforge-app__char-begin,
.taleforge-app__save,
.taleforge-app__load {
	align-self: flex-start;
	background: rgba( 200, 97, 45, 0.18 );
	border: 1px solid rgba( 200, 97, 45, 0.5 );
	color: #e7e2d6;
	padding: 0.5rem 1rem;
	border-radius: 6px;
	cursor: pointer;
}

.taleforge-app__char-begin:hover,
.taleforge-app__save:hover,
.taleforge-app__load:hover {
	background: rgba( 200, 97, 45, 0.3 );
}

/* ---------------------------------------------------------------------------
   Load story: the saved-game list and the in-page login / create-account form.
   Styled to match the rest of the immersive surface (dark, ember accents).
   --------------------------------------------------------------------------- */
.taleforge-app__loadpanel {
	margin: 0.2rem 0 0.4rem;
	padding: 0.85rem;
	border: 1px solid rgba( 169, 139, 98, 0.28 );
	border-radius: 8px;
	background: rgba( 0, 0, 0, 0.25 );
}

.taleforge-app__loadpanel[hidden] {
	display: none;
}

.taleforge-app__loadhint {
	margin: 0 0 0.6rem;
	font-size: 0.85rem;
	color: #b8b1a3;
}

.taleforge-app__savelist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.taleforge-app__saveload {
	width: 100%;
	text-align: left;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.75rem;
	font: inherit;
	cursor: pointer;
	padding: 0.55rem 0.8rem;
	border-radius: 6px;
	border: 1px solid rgba( 169, 139, 98, 0.35 );
	background: rgba( 255, 255, 255, 0.03 );
	color: var( --tf-ink, #e7e2d6 );
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.16s var( --tf-ease-out );
}

.taleforge-app__saveload:hover {
	border-color: var( --tf-ember, #c2683a );
	background: rgba( 255, 255, 255, 0.06 );
}

.taleforge-app__saveload:active {
	transform: scale( 0.99 );
}

.taleforge-app__savemeta {
	flex: 0 0 auto;
	font-size: 0.8rem;
	color: #9a948a;
}

/* In-page auth form — same dark fields + ember submit as the rest of the game. */
.taleforge-app__auth {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.taleforge-app__auth-input {
	font: inherit;
	padding: 0.55rem 0.75rem;
	border-radius: 6px;
	border: 1px solid #6b5a45;
	background: #0e0c0a;
	color: var( --tf-ink, #e7e2d6 );
}

.taleforge-app__auth-input:focus {
	outline: none;
	border-color: var( --tf-ember, #c2683a );
}

.taleforge-app__auth-error {
	margin: 0;
	min-height: 1em;
	font-size: 0.82rem;
	color: #d98a7a;
}

.taleforge-app__auth-submit {
	align-self: flex-start;
	background: rgba( 200, 97, 45, 0.2 );
	border: 1px solid rgba( 200, 97, 45, 0.55 );
	color: #e7e2d6;
	padding: 0.5rem 1.2rem;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.16s var( --tf-ease-out );
}

.taleforge-app__auth-submit:hover {
	background: rgba( 200, 97, 45, 0.32 );
}

.taleforge-app__auth-submit:active {
	transform: scale( 0.985 );
}

.taleforge-app__auth-submit[disabled] {
	opacity: 0.6;
	cursor: default;
}

.taleforge-app__auth-toggle {
	align-self: flex-start;
	background: none;
	border: none;
	padding: 0.1rem 0;
	font: inherit;
	font-size: 0.82rem;
	color: #b8b1a3;
	text-decoration: underline;
	cursor: pointer;
}

.taleforge-app__auth-toggle:hover {
	color: var( --tf-ember, #c2683a );
}

/* Debug affordance under the auth form: a quiet link + a monospace detail block. */
.taleforge-app__auth-debug {
	align-self: flex-start;
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	font-size: 0.78rem;
	color: #8b857b;
	text-decoration: underline;
	cursor: pointer;
}

.taleforge-app__auth-debug[hidden] {
	display: none;
}

.taleforge-app__auth-debugdetail {
	margin: 0;
	max-height: 180px;
	overflow: auto;
	padding: 0.5rem 0.65rem;
	border: 1px solid rgba( 169, 139, 98, 0.28 );
	border-radius: 6px;
	background: #0c0a08;
	color: #c7c0b4;
	font-size: 0.72rem;
	line-height: 1.45;
	white-space: pre-wrap;
	word-break: break-word;
}

.taleforge-app__auth-debugdetail[hidden] {
	display: none;
}

/* Admin-only debug panel under the status line on a failed turn. */
.taleforge-app__debug {
	margin: 0.4rem 0 0;
}

.taleforge-app__debug[hidden] {
	display: none;
}

.taleforge-app__debug-toggle {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	font-size: 0.78rem;
	color: #8b857b;
	text-decoration: underline;
	cursor: pointer;
}

.taleforge-app__debug-detail {
	margin: 0.4rem 0 0;
	max-height: 200px;
	overflow: auto;
	padding: 0.5rem 0.65rem;
	border: 1px solid rgba( 169, 139, 98, 0.28 );
	border-radius: 6px;
	background: #0c0a08;
	color: #c7c0b4;
	font-size: 0.72rem;
	line-height: 1.45;
	white-space: pre-wrap;
	word-break: break-word;
}

.taleforge-app__debug-detail[hidden] {
	display: none;
}

/* Random-name roller next to the name field. */
.taleforge-app__name-row {
	display: flex;
	gap: 0.4rem;
	align-items: stretch;
}

.taleforge-app__name-row .taleforge-app__char-name {
	flex: 1 1 auto;
}

.taleforge-app__name-dice {
	flex: 0 0 auto;
	cursor: pointer;
	font-size: 1.05rem;
	line-height: 1;
	padding: 0 0.7rem;
	border-radius: 6px;
	border: 1px solid rgba( 169, 139, 98, 0.4 );
	background: rgba( 255, 255, 255, 0.04 );
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.16s var( --tf-ease-out );
}

.taleforge-app__name-dice:hover {
	border-color: var( --tf-ember, #c2683a );
	background: rgba( 255, 255, 255, 0.08 );
}

.taleforge-app__name-dice:active {
	transform: scale( 0.94 ) rotate( -8deg );
}

/* Home page: "Continue a saved story" secondary CTA + its load/auth panel. */
.taleforge-hero__continue {
	margin-top: 0.5rem;
	background: none;
	border: none;
	font: inherit;
	font-size: 0.95rem;
	color: #cfc8ba;
	letter-spacing: 0.01em;
	cursor: pointer;
	opacity: 0.85;
	transition: color 0.15s ease, opacity 0.15s ease;
}

.taleforge-hero__continue:hover {
	color: var( --tf-ember, #c2683a );
	opacity: 1;
}

.taleforge-hero__loadpanel {
	width: 100%;
	max-width: 24rem;
	margin: 0.9rem auto 0;
	text-align: left;
}

.taleforge-hero__loadpanel[hidden] {
	display: none;
}

/* Character actions row: Random roll beside Begin. */
.taleforge-app__char-actions {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
	align-items: center;
}

.taleforge-app__char-random {
	background: rgba( 255, 255, 255, 0.05 );
	border: 1px solid rgba( 255, 255, 255, 0.22 );
	color: #d8d4ca;
	padding: 0.5rem 1rem;
	border-radius: 6px;
	cursor: pointer;
}

.taleforge-app__char-random:hover {
	border-color: var( --tf-ember, rgba( 255, 255, 255, 0.45 ) );
	background: rgba( 255, 255, 255, 0.09 );
}

.taleforge-app__char-error {
	color: #d98a7a;
	font-size: 0.85rem;
	min-height: 1em;
}

.taleforge-app__saves-box {
	margin-top: 1.2rem;
	border-top: 1px solid rgba( 200, 168, 106, 0.2 );
	padding-top: 0.8rem;
}

.taleforge-app__saves-title {
	margin: 0 0 0.5rem;
	font-size: 0.95rem;
	color: #b8b5ae;
}

.taleforge-app__saves-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.35rem;
}

.taleforge-app__saves-label {
	color: #e7e2d6;
	font-size: 0.9rem;
}

/* Milestone overlay. */
.taleforge-app__milestone {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba( 10, 8, 6, 0.7 );
	z-index: 9999;
}

.taleforge-app__milestone-panel {
	background: #14110e;
	border: 1px solid rgba( 200, 168, 106, 0.4 );
	border-radius: 10px;
	padding: 1.2rem 1.4rem;
	max-width: 420px;
	width: calc( 100% - 2rem );
}

.taleforge-app__milestone-title {
	margin: 0 0 0.3rem;
	color: #e7e2d6;
}

.taleforge-app__milestone-hint {
	margin: 0 0 0.8rem;
	color: #b8b5ae;
	font-size: 0.9rem;
}

.taleforge-app__milestone-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.taleforge-app__milestone-btn {
	width: 100%;
	text-align: left;
	background: rgba( 20, 17, 14, 0.6 );
	border: 1px solid rgba( 200, 168, 106, 0.3 );
	border-radius: 6px;
	padding: 0.6rem 0.8rem;
	color: #e7e2d6;
	cursor: pointer;
}

.taleforge-app__milestone-btn:hover {
	background: rgba( 200, 168, 106, 0.15 );
}

.taleforge-app__milestone-btn--spell {
	border-color: rgba( 110, 140, 200, 0.4 );
}

.taleforge-app__milestone-btn--boon {
	border-color: rgba( 140, 200, 110, 0.4 );
}



/* -------------------------------------------------------------------------
 * Phase 12: scene transitions + per-world ambient motion.
 *
 * Each scene render gets a soft fade/rise as the narration changes, and the
 * immersive shell carries a slow ambient drift (the world's configured
 * "slow ember drift, faint settling ash"). The ambient layer is built by
 * app.js only when the world's theme.motion token calls for it, and every
 * animation here is disabled under prefers-reduced-motion (see the guard at
 * the foot of this file) so motion-sensitive players get a still scene.
 * ------------------------------------------------------------------------- */

@keyframes taleforge-scene-in {
	from {
		opacity: 0;
		transform: translateY( 0.5rem );
	}

	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

/* Applied (and re-applied) to the narration on each turn via a toggled class. */
.taleforge-app__narration.is-entering {
	animation: taleforge-scene-in 0.45s ease both;
}

/* A drifting mote (ember or ash). app.js seeds a handful into the ambient
 * layer with randomised positions, sizes and delays; the world palette tints
 * embers via --tf-ember. */
.taleforge-app__mote {
	position: absolute;
	bottom: -2rem;
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	opacity: 0;
	will-change: transform, opacity;
}

.taleforge-app__mote--ember {
	background: var( --tf-ember, #c8612d );
	box-shadow: 0 0 6px var( --tf-ember, #c8612d );
	animation: taleforge-ember-drift 14s linear infinite;
}

.taleforge-app__mote--ash {
	background: var( --tf-muted, #b8a98f );
	animation: taleforge-ash-settle 22s linear infinite;
}

/* Embers rise and waver upward, fading as they cool. */
@keyframes taleforge-ember-drift {
	0% {
		transform: translate3d( 0, 0, 0 );
		opacity: 0;
	}

	15% {
		opacity: 0.7;
	}

	50% {
		transform: translate3d( 1.2rem, -45vh, 0 );
	}

	85% {
		opacity: 0.5;
	}

	100% {
		transform: translate3d( -0.8rem, -95vh, 0 );
		opacity: 0;
	}
}

/* Ash drifts gently downward and sideways, like settling fallout. */
@keyframes taleforge-ash-settle {
	0% {
		transform: translate3d( 0, -90vh, 0 );
		opacity: 0;
	}

	20% {
		opacity: 0.4;
	}

	80% {
		opacity: 0.3;
	}

	100% {
		transform: translate3d( 2rem, 5vh, 0 );
		opacity: 0;
	}
}

/* Motion-sensitive players: hold every scene still — no fades, no drift. The
 * ambient motes simply never appear, and scene changes are instant. */
@media ( prefers-reduced-motion: reduce ) {
	.taleforge-app__narration.is-entering {
		animation: none;
	}

	.taleforge-app__mote {
		display: none;
		animation: none;
	}

	.taleforge-app__bar-fill {
		transition: none;
	}
}