/* ─────────────────────────────────────────────────────────────────────────
   Interactive character stage. Variables (--ink, --parchment, --ivory, …)
   come from main.css :root.
   ───────────────────────────────────────────────────────────────────────── */

/* "Say Hi" button in the banner — mirrors the header nav's ivory hairline
   pills (the active rubber-stamp link), so it reads as part of the same chrome
   over the banner photograph. */
.home-banner-cta { margin-top: 30px; }
.ma-say-hi {
	font-family: var(--sans, 'Inter', sans-serif);
	font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
	color: var(--ivory, #F7F2EA); background: transparent;
	border: 1px solid rgba(247,242,234,.85);
	padding: 9px 22px; border-radius: 999px; cursor: pointer;
	transition: background .3s ease, color .3s ease, transform .2s ease;
}
.ma-say-hi:hover { background: rgba(255,255,255,.10); transform: translateY(-1px); }
.ma-say-hi:active { transform: translateY(0); }

/* Stage overlay. */
.ma-char-stage {
	position: fixed; inset: 0; z-index: 9000;
	opacity: 0; transition: opacity .38s ease;
}
.ma-char-stage.is-open { opacity: 1; }
.ma-char-stage[hidden] { display: none; }

/* Cinematic dim/spotlight layer (only lit during the intro beat). */
.ma-char-dim {
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: radial-gradient(circle 320px at 50% 54%,
		rgba(12,9,6,0) 0%, rgba(12,9,6,0) 24%, rgba(10,7,4,.97) 66%, rgba(8,5,3,.99) 100%);
	opacity: 0; transition: opacity 1.1s ease;
}
.ma-char-dim.is-lit { opacity: 1; }

/* WebGL canvas. width/height:100% is required — inset:0 alone does not
   stretch a <canvas> (replaced element keeps its intrinsic 300x150). */
.ma-char-canvas {
	position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2;
	display: block;
}

/* Corner-mascot hit-zone. Invisible. Only catches pointer events while the
   stage is in idle mode (the .is-idle class is set after the intro). Sized
   to comfortably overlap where the bottom-right corner mascot renders. */
.ma-char-hit {
	position: absolute; right: 0; bottom: 0; z-index: 6;
	width: clamp(140px, 22vw, 240px);
	height: clamp(200px, 32vh, 340px);
	cursor: pointer;
	pointer-events: none;             /* default: don't block */
}

/* In idle mode the stage shouldn't block scroll or clicks on the rest of
   the page. The container itself becomes transparent to pointer events, so
   clicks fall through to the homepage below. The close button and the
   bottom-right hit-zone explicitly opt back in so the mascot can still
   be clicked (opens the panel) and dismissed. */
.ma-char-stage.is-idle               { pointer-events: none; }
.ma-char-stage.is-idle .ma-char-close,
.ma-char-stage.is-idle .ma-char-hit  { pointer-events: auto; }

/* Close (×) for the whole stage. Positioned to float just above where the
   corner mascot renders so it reads as "close the character," not a generic
   page chrome button. Scales with viewport to track the character's height.
   z-index: 8 keeps it above the hit-zone (z-index 6) — otherwise clicks in
   the overlap area open the chat panel instead of closing the stage. */
.ma-char-close {
	position: absolute;
	right: clamp(16px, 3vw, 32px);
	bottom: clamp(220px, 30vh, 320px);
	z-index: 8;
	width: 36px; height: 36px; border-radius: 50%;
	border: 1px solid rgba(247,242,234,.4); background: rgba(28,22,16,.35);
	color: var(--ivory, #F7F2EA); font-size: 20px; line-height: 1; cursor: pointer;
	backdrop-filter: blur(4px); transition: background .2s ease, transform .2s ease, opacity .25s ease;
	opacity: 0;
	pointer-events: none;
}
/* While the stage is visible (intro or corner mascot), allow click. */
.ma-char-stage.is-open .ma-char-close,
.ma-char-stage.is-idle .ma-char-close { pointer-events: auto; }
/* The × should only be visible while the character is actually on screen
   (intro / idle modes). It's hidden during the toRight transition and
   when no panel is open until the stage is fully visible. */
.ma-char-stage.is-open .ma-char-close { opacity: .85; }
.ma-char-close:hover { background: rgba(28,22,16,.6); transform: rotate(90deg); opacity: 1; }

/* ── Comic-book speech bubble ─────────────────────────────────────────── */
.ma-char-bubble {
	position: absolute; z-index: 4;
	transform: translate(-50%, -118%) scale(.7) rotate(-1.2deg);
	transform-origin: 50% 120%;
	opacity: 0; transition: opacity .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
	max-width: min(340px, 76vw);
	background: var(--ivory, #F7F2EA); color: var(--ink, #43352D);
	border: 3px solid var(--ink, #43352D); border-radius: 22px;
	padding: 18px 22px;
	box-shadow: 5px 7px 0 rgba(67,53,45,.9);   /* hard comic drop-shadow */
	font-family: var(--serif, 'EB Garamond', Georgia, serif);
	font-size: 17px; line-height: 1.5; font-style: italic;
	pointer-events: none;
}
.ma-char-bubble.is-shown { opacity: 1; transform: translate(-50%, -118%) scale(1) rotate(-1.2deg); }
.ma-char-bubble-tail {
	position: absolute; left: 30px; bottom: -18px; width: 26px; height: 26px;
	background: var(--ivory, #F7F2EA);
	border-right: 3px solid var(--ink, #43352D);
	border-bottom: 3px solid var(--ink, #43352D);
	transform: rotate(45deg) skew(-6deg,-6deg);
}

/* "click to continue" nudge. */
.ma-char-hint {
	position: absolute; left: 50%; bottom: 46px; transform: translateX(-50%); z-index: 4;
	margin: 0; color: var(--ivory, #F7F2EA); opacity: .85;
	font-family: var(--mono, 'JetBrains Mono', monospace);
	font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
	animation: ma-hint-pulse 1.8s ease-in-out infinite; pointer-events: none;
}
@keyframes ma-hint-pulse { 0%,100%{opacity:.4} 50%{opacity:.95} }

/* ── Placeholder panel (future chat forum) ────────────────────────────── */
.ma-char-panel {
	position: absolute; top: 0; right: 0; bottom: 0; z-index: 6;
	width: min(420px, 92vw);
	background: var(--parchment, #EFE4D6);
	border-left: 1px solid rgba(67,53,45,.18);
	box-shadow: -24px 0 60px -30px rgba(67,53,45,.6);
	transform: translateX(100%); transition: transform .34s cubic-bezier(.4,0,.2,1);
	overflow-y: auto;
}
.ma-char-panel.is-open { transform: translateX(0); }
/* Top padding clears the front-end admin rail (.ma-rail, fixed at the top for
   logged-in editors) so the panel content isn't tucked behind it. */
.ma-char-panel-inner { padding: 96px 38px 40px; }
.ma-char-panel h2 {
	font-family: var(--display, var(--serif, Georgia), serif);
	font-size: 30px; line-height: 1.12; margin: 8px 0 16px; color: var(--ink);
}
.ma-char-panel p { color: var(--ink-soft, #5a4a40); line-height: 1.7; margin: 0 0 14px; }
.ma-char-panel .eyebrow {
	font-family: var(--mono, monospace); font-size: 11px; letter-spacing: .22em;
	text-transform: uppercase; color: var(--ink-mute, #8a7a6e);
}
.ma-char-panel-tag {
	display: inline-block; margin-top: 8px; padding: 5px 12px;
	border: 1px solid rgba(67,53,45,.3); border-radius: 999px;
	font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
	color: var(--ink-mute, #8a7a6e);
}
.ma-char-panel-close {
	position: absolute; top: 22px; right: 20px;
	width: 38px; height: 38px; border-radius: 50%;
	border: 1px solid rgba(67,53,45,.25); background: transparent;
	color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}
.ma-char-panel-close:hover { background: rgba(67,53,45,.08); transform: rotate(90deg); }
/* When the front-end admin rail is present, drop the close button below it. */
body.logged-in .ma-char-panel-close { top: 84px; }

/* ── The Reading Room (forum panel) ─────────────────────────────────────
   Editorial postcard aesthetic: each message is a small white card sitting
   on a vertical timeline. Dried-branch ornament in the header, feather +
   grid paper in the compose area. */
.ma-forum-panel {
	display: flex; flex-direction: column;
	overflow: hidden;
	background: #EFE4D6;
}

/* Fold toggle — slides the panel mostly off-screen, leaving a narrow strip
   so the page underneath is readable. Lives on the leftmost edge of the
   panel so it stays clickable when the panel is folded. */
.ma-forum-fold {
	position: absolute;
	top: 24px; left: 14px;
	z-index: 7;
	width: 32px; height: 32px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid rgba(67,53,45,.18);
	border-radius: 50%;
	background: rgba(248,242,229,.7);
	color: var(--ink-soft, #5a4a40);
	cursor: pointer;
	transition: background .2s ease, transform .2s ease, color .2s ease;
}
.ma-forum-fold:hover {
	background: rgba(248,242,229,.95);
	color: var(--ink, #2A2823);
}
.ma-forum-fold-icon { transition: transform .25s ease; }

/* ── Arcade cabinet — a pixel-art console dressed in the archive's own
   ink-and-parchment palette with aged-brass trim. Crisp square panels, brass
   piping, solid offset shadow. Opens on a COMPACT game-select menu; the tall
   2:3 screen only appears once a game is chosen. ── */
/* Sit above the character stage (z-index 9000) so the arcade opens on top of
   everything — including the reading room — from the header button anywhere. */
.ma-game-modal { z-index: 9500; }
.ma-arcade.ma-game-modal-card {
	--line:     #100f0c;   /* near-black outline */
	--ink:      #2a2823;   /* cabinet body (matches site --ink) */
	--ink-hi:   #423d34;   /* top edge highlight */
	--ink-lo:   #19170f;   /* bottom edge shade */
	--brass:    #c9961f;   /* aged-brass accent */
	--brass-lo: #8a6712;   /* brass trim/piping */
	--parch:    #f1e4c6;   /* marquee parchment */
	--parch-lo: #e3cfa3;
	--screen:   #14122a;   /* CRT */
	--scr-line: #322f4e;
	width: min(380px, 94vw);
	padding: 12px 12px 0;
	border: 0;
	border-radius: 0;
	background: var(--ink);
	image-rendering: pixelated;
	box-shadow:
		0 0 0 3px var(--line),        /* inner dark outline */
		0 0 0 5px var(--brass-lo),    /* brass piping around the whole cabinet */
		0 0 0 8px var(--line),        /* outer dark outline */
		inset 0 4px 0 0 var(--ink-hi),
		inset 0 -6px 0 0 var(--ink-lo),
		9px 12px 0 0 rgba(8,6,4,.45); /* solid pixel drop shadow */
	color: var(--parchment, #EFE4D6);
}
/* The shared .modal double-border doesn't belong on the cabinet. */
.ma-arcade.ma-game-modal-card::before { content: none; }
/* Close × — a brass-trimmed oxblood key, top-right. */
.ma-arcade .modal-x {
	top: 11px; right: 11px;
	width: 26px; height: 26px;
	display: flex; align-items: center; justify-content: center;
	z-index: 6;
	padding: 0;
	border: 0; border-radius: 0;
	background: #9e4636;
	color: #f7ead2;
	font-family: var(--mono, "JetBrains Mono", monospace);
	font-size: 16px; line-height: 1;
	box-shadow: 0 0 0 2px var(--line), 0 0 0 4px var(--brass-lo), inset 0 2px 0 0 #c06b56, inset 0 -3px 0 0 #6d2c20;
}
.ma-arcade .modal-x:hover { background: #b85542; color: #fff; }
.ma-arcade .modal-x:active { box-shadow: 0 0 0 2px var(--line), 0 0 0 4px var(--brass-lo), inset 0 3px 0 0 #6d2c20; }

/* Marquee — a brass-framed parchment plate carrying the serif italic title,
   kept from the archive's display type so the cabinet stays unmistakably ours. */
.ma-arcade-marquee {
	position: relative;
	margin: 10px 1px 11px;
	padding: 12px 18px;
	text-align: center;
	border: 0; border-radius: 0;
	background: linear-gradient(180deg, var(--parch) 0%, var(--parch-lo) 100%);
	box-shadow:
		0 0 0 2px var(--line),
		0 0 0 4px var(--brass-lo),
		inset 0 2px 0 #fff7e6,
		inset 0 -2px 0 #cbab79;
}
.ma-arcade-marquee-text {
	font-family: var(--display, "Cormorant Garamond", "EB Garamond", Georgia, serif);
	font-style: italic; font-weight: 600;
	font-size: 26px; line-height: 1;
	letter-spacing: .01em;
	color: #4a3a28;
	text-shadow: 1px 1px 0 #fff7e6;
}

/* Screen — a brass-framed black bezel that holds either the menu or a game.
   Its height follows the content: compact for the menu, tall 2:3 for a game. */
.ma-arcade-screen {
	position: relative;
	margin: 0 1px;
	padding: 8px;
	border: 0; border-radius: 0;
	background: #08070f;
	box-shadow:
		0 0 0 2px var(--line),
		0 0 0 4px var(--brass-lo),
		inset 0 0 0 2px #221f38;
}
/* Faint CRT scanlines (clicks pass straight through). */
.ma-arcade-screen::after {
	content: ""; position: absolute; inset: 8px; z-index: 4;
	pointer-events: none;
	background: repeating-linear-gradient(0deg, rgba(0,0,0,.1) 0 1px, transparent 1px 3px);
}
.ma-game-frame-wrap {
	position: relative;
	width: 100%;
	/* match the game canvas aspect ratio (2 : 3 portrait) */
	aspect-ratio: 2 / 3;
	max-height: 72vh;
	border: 0; border-radius: 0;
	overflow: hidden;
	background: var(--screen);
}
.ma-game-frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	image-rendering: pixelated;
}

/* Control deck — the cabinet base: a brass rail, a joystick, a centre coin
   slot, and three muted pixel buttons. Purely decorative. */
.ma-arcade-deck {
	position: relative;
	display: flex; align-items: center; justify-content: space-between;
	margin: 12px -12px 0;
	padding: 16px 22px 16px;
	border: 0;
	background: linear-gradient(180deg, #322e27 0 4px, #25221b 4px 100%);
	box-shadow: inset 0 -4px 0 0 #15130d;
}
/* Brass rail across the top of the deck, dividing screen from controls. */
.ma-arcade-deck::before {
	content: ""; position: absolute;
	left: 0; right: 0; top: 0; height: 3px;
	background: var(--brass-lo);
	box-shadow: 0 1px 0 #15130d;
}
/* Coin slot, dead centre. */
.ma-arcade-deck::after {
	content: ""; position: absolute;
	left: 50%; top: 52%; transform: translate(-50%, -50%);
	width: 7px; height: 22px;
	background: #0c0a06;
	box-shadow: 0 0 0 2px #15130d, 0 0 0 4px var(--brass-lo);
}
/* Joystick — square pixel base + round oxblood ball. */
.ma-arcade-stick {
	position: relative;
	width: 16px; height: 13px;
	background: #15110b;
	box-shadow: 0 0 0 2px #0c0a06, inset 0 2px 0 0 #2e271c;
}
.ma-arcade-stick::before {
	content: ""; position: absolute;
	top: -15px; left: 50%; transform: translateX(-50%);
	width: 18px; height: 18px; border-radius: 50%;
	background: #9e4636;
	box-shadow: 0 0 0 2px #0c0a06, inset 0 3px 0 0 #c06b56, inset 0 -4px 0 0 #6d2c20;
}
/* ── Functional touch keypad — arrows + enter, wired into the game iframe by
   game-modal.js so phones (and anyone without a keyboard) can play. It lives
   inside the play stage, so it only exists while a game is running, and is
   shown only where a real keyboard isn't the obvious input: touch pointers or
   narrow screens. On desktop with a mouse it stays hidden (use the keyboard). */
.ma-arcade-pad { display: none; }
@media (pointer: coarse), (max-width: 720px) {
	[data-ma-game-stage]:not([hidden]) .ma-arcade-pad {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		margin-top: 10px;
		padding: 6px 6px 2px;
	}
}
.ma-pad-dirs {
	display: grid;
	grid-template-columns: repeat(3, 46px);
	grid-template-rows: repeat(3, 46px);
	gap: 6px;
}
.ma-pad-up    { grid-area: 1 / 2; }
.ma-pad-left  { grid-area: 2 / 1; }
.ma-pad-right { grid-area: 2 / 3; }
.ma-pad-down  { grid-area: 3 / 2; }
.ma-pad-key {
	appearance: none;
	display: flex; align-items: center; justify-content: center;
	border: 0; border-radius: 0;
	font-size: 16px; line-height: 1;
	color: #f7ead2;
	background: #1b1930;
	cursor: pointer;
	touch-action: none;            /* we handle pointer input ourselves */
	user-select: none; -webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	box-shadow: 0 0 0 2px var(--line), 0 0 0 4px var(--brass-lo), inset 0 2px 0 0 #322f4e, inset 0 -3px 0 0 #121024;
	transition: transform .06s steps(2), box-shadow .06s, background .12s;
}
.ma-pad-key:active,
.ma-pad-key.is-down {
	background: #2a2746;
	transform: translateY(2px);
	box-shadow: 0 0 0 2px var(--line), 0 0 0 4px var(--brass), inset 0 3px 0 0 #121024;
	outline: none;
}
.ma-pad-enter {
	width: 66px; height: 66px;
	border-radius: 50%;
	font-size: 24px;
	color: #f7ead2;
	background: #9e4636;
	box-shadow: 0 0 0 2px var(--line), 0 0 0 4px var(--brass-lo), inset 0 3px 0 0 #c06b56, inset 0 -4px 0 0 #6d2c20;
}
.ma-pad-enter:active,
.ma-pad-enter.is-down {
	background: #b85542;
	transform: translateY(2px);
	box-shadow: 0 0 0 2px var(--line), 0 0 0 4px var(--brass), inset 0 3px 0 0 #6d2c20;
}

/* On phones the cabinet (tall game screen + the touch keypad) can be taller
   than the viewport. The overlay centres its card (place-items:center), so a
   too-tall cabinet spills off the top AND bottom with no way to scroll. Pin it
   to the top, let the overlay scroll, and trim the screen so the whole machine
   fits without scrolling in the common case. */
@media (max-width: 720px) {
	/* Center the cabinet vertically. The `safe` keyword keeps it centered while
	   it fits, but falls back to top-aligned (instead of clipping the top) if it
	   ever overflows a very short viewport; overflow-y:auto then allows scroll. */
	.ma-game-modal {
		align-items: safe center;
		justify-items: center;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 12px 0;
	}

	/* Menu view: a comfortable fixed width. Even padding on all four sides
	   (the decorative base that used to fill the bottom is hidden on mobile). */
	.ma-arcade.ma-game-modal-card { width: min(360px, 92vw); padding: 10px; }

	/* Compact marquee + side clearance so the centered title never collides with
	   the corner GAMES / ✕ buttons; drop the decorative base to reclaim height. */
	.ma-arcade-marquee { margin: 4px 1px 6px; padding: 6px 38px; }
	.ma-arcade-marquee-text { font-size: 16px; }
	.ma-arcade-back span { display: none; }   /* keep only the ‹ chevron on phones */
	.ma-arcade-deck { display: none; }

	/* PLAYING: shrink the cabinet to the game. The screen is sized from the
	   AVAILABLE HEIGHT (so the whole machine fits the viewport), and its width
	   follows the per-game aspect ratio — so the game fills the screen with no
	   side bars, and the cabinet wraps tightly around it (centered). */
	.ma-game-modal-card.ma-arcade-playing { width: auto; max-width: 94vw; }
	/* A visible CRT-black bezel around the game inside the brass frame. */
	.ma-arcade-playing .ma-arcade-screen { width: -moz-fit-content; width: fit-content; margin: 0 auto; padding: 13px; }
	.ma-arcade-playing .ma-game-frame-wrap {
		width: auto;
		height: max(160px, calc(90dvh - 232px)); /* a touch shorter; budget for marquee + keypad + bezel */
		max-width: 92vw;
		max-height: none;
	}

	/* Slightly smaller keypad so it sits comfortably under the narrow cabinet. */
	.ma-pad-dirs { grid-template-columns: repeat(3, 40px); grid-template-rows: repeat(3, 40px); gap: 5px; }
	.ma-pad-enter { width: 56px; height: 56px; }
}

/* Three muted pixel buttons — brass, sage, oxblood. */
.ma-arcade-buttons { display: inline-flex; gap: 11px; }
.ma-arcade-buttons i {
	width: 18px; height: 18px; border-radius: 50%;
}
.ma-arcade-buttons i:nth-child(1) { background: #c9961f; box-shadow: 0 0 0 2px #0c0a06, inset 0 3px 0 0 #e6c25e, inset 0 -4px 0 0 #8a6712; }
.ma-arcade-buttons i:nth-child(2) { background: #6f8f4a; box-shadow: 0 0 0 2px #0c0a06, inset 0 3px 0 0 #93b06a, inset 0 -4px 0 0 #4a6230; }
.ma-arcade-buttons i:nth-child(3) { background: #9e4636; box-shadow: 0 0 0 2px #0c0a06, inset 0 3px 0 0 #c06b56, inset 0 -4px 0 0 #6d2c20; }

/* Game-select list — COMPACT: its height follows the games, so the cabinet
   stays short on the menu and only grows to the 2:3 screen once a game runs. */
.ma-arcade-select {
	position: relative;
	width: 100%;
	max-height: 56vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: radial-gradient(130% 90% at 50% 0%, #1f1c34 0%, #100e22 72%);
	padding: 15px 12px;
	display: flex; flex-direction: column;
}
.ma-arcade-select-head {
	font-family: var(--mono, "JetBrains Mono", monospace);
	font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
	text-align: center;
	color: var(--brass);
	margin: 2px 0 14px;
	text-shadow: 0 0 6px rgba(201,150,31,.4);
}
.ma-arcade-list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: 10px;
}
/* Each game = a pixel plate that lifts and gains a brass edge on hover. */
.ma-arcade-game {
	width: 100%;
	display: flex; align-items: center; gap: 13px;
	padding: 13px 13px;
	text-align: left;
	border: 0; border-radius: 0;
	background: #1b1930;
	color: var(--parchment, #EFE4D6);
	cursor: pointer;
	box-shadow:
		0 0 0 2px var(--scr-line),
		inset 0 2px 0 0 #272445,
		inset 0 -3px 0 0 #121024;
	transition: transform .1s steps(2), box-shadow .1s, background .15s;
}
.ma-arcade-game:hover,
.ma-arcade-game:focus-visible {
	transform: translate(-1px, -2px);
	background: #24213c;
	box-shadow:
		0 0 0 2px var(--brass),
		inset 0 2px 0 0 #322f4e,
		inset 0 -3px 0 0 #15122a,
		4px 5px 0 0 rgba(6,5,14,.5);
	outline: none;
}
.ma-arcade-game:active { transform: translate(0, 0); box-shadow: 0 0 0 2px var(--brass), inset 0 3px 0 0 #121024; }
/* Square pixel status light. */
.ma-arcade-game-dot {
	flex: 0 0 auto;
	width: 11px; height: 11px;
	background: var(--brass);
	box-shadow: 0 0 0 2px #0c0a06, 0 0 7px rgba(201,150,31,.7);
	image-rendering: pixelated;
}
.ma-arcade-game:nth-child(odd) .ma-arcade-game-dot { background: #6f8f4a; box-shadow: 0 0 0 2px #0c0a06, 0 0 7px rgba(111,143,74,.6); }
.ma-arcade-game-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.ma-arcade-game-name {
	font-family: var(--display, "Cormorant Garamond", "EB Garamond", Georgia, serif);
	font-style: italic; font-weight: 600;
	font-size: 21px; line-height: 1.05;
	color: #f3e6c8;
}
.ma-arcade-game-tag {
	font-family: var(--sans, "Source Sans 3", system-ui, sans-serif);
	font-size: 12px; line-height: 1.3;
	color: rgba(241,228,198,.58);
}
.ma-arcade-game-go {
	flex: 0 0 auto;
	font-size: 11px;
	color: rgba(201,150,31,.5);
	transition: transform .1s steps(2), color .15s;
}
.ma-arcade-game:hover .ma-arcade-game-go,
.ma-arcade-game:focus-visible .ma-arcade-game-go { transform: translateX(3px); color: var(--brass); }

/* "‹ Games" back button — a brass-trimmed pixel plate top-left, shown only
   while a game is running. */
.ma-arcade-back {
	position: absolute;
	top: 11px; left: 11px;
	z-index: 6;
	display: inline-flex; align-items: center; gap: 5px;
	padding: 6px 10px 6px 8px;
	border: 0; border-radius: 0;
	background: #322f4e;
	color: #f1e4c6;
	font-family: var(--mono, "JetBrains Mono", monospace);
	font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 0 0 2px var(--line), 0 0 0 4px var(--brass-lo), inset 0 2px 0 0 #44406a, inset 0 -3px 0 0 #1e1b34;
}
.ma-arcade-back:hover { background: #3d395c; color: #fff; }
.ma-arcade-back:active { box-shadow: 0 0 0 2px var(--line), 0 0 0 4px var(--brass-lo), inset 0 3px 0 0 #1e1b34; }
.ma-arcade-back svg { display: block; }

/* Hide bug fix: the explicit display rules above beat the UA [hidden] rule, so
   the menu / frame / back-button never actually hide. Restore it explicitly. */
.ma-arcade-select[hidden],
.ma-game-frame-wrap[hidden],
.ma-arcade-back[hidden] { display: none !important; }

/* Lock the page behind the arcade modal so it can't scroll while you play
   (game-modal.js toggles this class). Removing it on close restores scroll. */
body.ma-game-open { overflow: hidden !important; }


/* Header — eyebrow, italic display heading, brush stroke, branch ornament. */
.ma-forum-head {
	position: relative;
	flex: 0 0 auto;
	padding: 84px 28px 22px 28px;
	background-image: url("../img/branchchatforum.png");
	background-repeat: no-repeat;
	background-position: top 24px right -10px;
	background-size: 130px auto;
}
body.logged-in .ma-forum-head { padding-top: 96px; }
.ma-forum-head .eyebrow {
	font-family: var(--mono, "JetBrains Mono", monospace);
	font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
	color: var(--ink-mute, #8a7a6e);
}
.ma-forum-head h2 {
	font-family: var(--display, "Cormorant Garamond", "EB Garamond", Georgia, serif);
	font-style: italic; font-weight: 400;
	font-size: 30px; line-height: 1.12;
	margin: 10px 0 0; color: var(--ink, #2A2823);
	max-width: 78%;
}
/* Brush-stroke underline under the heading. */
.ma-forum-head::after {
	content: ""; display: block;
	width: 64px; height: 3px; margin-top: 14px;
	background: linear-gradient(90deg, rgba(166,132,96,.55) 0%, rgba(166,132,96,.15) 70%, transparent 100%);
	border-radius: 2px;
}

/* The scrolling message feed with its vertical timeline rail. */
.ma-forum-feed {
	flex: 1 1 auto; min-height: 0;
	overflow-y: auto; overscroll-behavior: contain;
	padding: 22px 28px 18px 54px;     /* left padding hosts the timeline rail */
	position: relative;
	display: flex; flex-direction: column; gap: 22px;
}
/* The timeline — a hairline running from the first marker to the last. */
.ma-forum-feed::before {
	content: "";
	position: absolute;
	left: 30px; top: 30px; bottom: 30px;
	width: 1px;
	background: rgba(67,53,45,.18);
}

.ma-forum-empty {
	margin: 24px 0; padding: 16px;
	font-family: var(--serif, Georgia), serif; font-style: italic;
	color: var(--ink-mute, #8a7a6e); text-align: center;
	background: transparent;
}

/* One message — the article is the positioning anchor; the card lives
   inside so we can pin the timeline marker to the article. */
.ma-forum-msg {
	position: relative;
}
/* Timeline marker — a small open ring on the rail to the left. */
.ma-forum-msg::before {
	content: "";
	position: absolute;
	left: -24px; top: 18px;
	width: 8px; height: 8px;
	border-radius: 50%;
	border: 1px solid rgba(67,53,45,.4);
	background: #EFE4D6;
}

/* The card itself — white postcard with subtle shadow + faint tilt. */
.ma-forum-msg-card {
	position: relative;
	background: #FAF6EB;
	border: 1px solid rgba(67,53,45,.10);
	border-radius: 6px;
	padding: 14px 16px 12px;
	box-shadow:
		0 1px 0 rgba(255,255,255,.6) inset,
		0 6px 16px -10px rgba(67,53,45,.30);
}
/* Tiny irregular tilts for the postcard feel. */
.ma-forum-feed > .ma-forum-msg:nth-child(3n+1) .ma-forum-msg-card { transform: rotate(-.35deg); }
.ma-forum-feed > .ma-forum-msg:nth-child(3n+2) .ma-forum-msg-card { transform: rotate(.40deg); }
.ma-forum-feed > .ma-forum-msg:nth-child(3n)   .ma-forum-msg-card { transform: rotate(-.15deg); }

/* Decorative washi-tape strip on the very first message — purely visual. */
.ma-forum-feed > .ma-forum-msg:first-child .ma-forum-msg-card::before {
	content: "";
	position: absolute;
	top: -8px; right: 18px;
	width: 64px; height: 18px;
	background: linear-gradient(135deg, rgba(166,132,96,.45) 0%, rgba(166,132,96,.30) 60%, rgba(166,132,96,.15) 100%);
	border-radius: 1px;
	box-shadow: 0 1px 2px rgba(67,53,45,.10);
	transform: rotate(14deg);
}

/* Header row — identity on the left, time on the right. */
.ma-forum-msg-head {
	display: flex; align-items: flex-start; justify-content: space-between;
	gap: 12px; margin-bottom: 8px;
}
.ma-forum-msg-id {
	display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1;
}
.ma-forum-msg-avatar .avatar {
	width: 28px; height: 28px; border-radius: 50%;
	background: var(--ink, #2A2823); color: #F8F2E5;
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--serif, Georgia, serif); font-size: 12px;
	flex: 0 0 auto;
}
.ma-forum-msg-id-text {
	display: flex; align-items: baseline; gap: 6px; min-width: 0; flex-wrap: wrap;
}
.ma-forum-msg-name {
	font-family: var(--serif, Georgia, serif); font-weight: 500;
	color: var(--ink, #2A2823); font-size: 14px;
}
.ma-forum-msg-sep { color: var(--ink-mute, #8a7a6e); font-size: 12px; }
.ma-forum-msg-date {
	font-family: var(--mono, monospace); font-size: 10px;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--ink-mute, #8a7a6e);
}
.ma-forum-msg-time {
	font-family: var(--mono, monospace); font-size: 10px;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--ink-mute, #8a7a6e);
	flex: 0 0 auto;
	white-space: nowrap;
	padding-top: 6px;
}
.ma-forum-edited { font-style: italic; text-transform: none; letter-spacing: 0; }

.ma-forum-msg-body {
	color: var(--ink, #2A2823); line-height: 1.6; font-size: 14px;
	font-family: var(--serif, Georgia, serif);
	word-wrap: break-word; overflow-wrap: anywhere;
}
.ma-forum-msg-body p { margin: 0 0 8px; }
.ma-forum-msg-body p:last-child { margin-bottom: 0; }

/* @mention highlight — warm parchment-toned pill, no underline. */
.ma-forum-mention {
	display: inline;
	font-family: var(--mono, "JetBrains Mono", monospace);
	font-size: 12.5px;
	font-style: normal;
	color: #6F4F2A;
	background: rgba(166,132,96,.16);
	padding: 1px 6px;
	border-radius: 4px;
	white-space: nowrap;
}

/* Attachment chrome. */
.ma-forum-msg-attach {
	display: block; margin-top: 10px; max-width: 100%;
	border-radius: 4px; overflow: hidden;
}
.ma-forum-msg-attach.is-image img { display: block; max-width: 100%; height: auto; border-radius: 4px; }
.ma-forum-msg-attach.is-audio,
.ma-forum-msg-attach.is-video { width: 100%; }
.ma-forum-msg-attach.is-file {
	display: inline-block; padding: 8px 12px;
	border: 1px dashed rgba(67,53,45,.3); border-radius: 4px;
	font-family: var(--mono, monospace); font-size: 12px; color: var(--ink, #2A2823);
	text-decoration: none;
}

/* Per-message action row — Reply, Edit, Spam, Trash. */
.ma-forum-msg-actions {
	margin-top: 10px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
}
.ma-forum-action {
	display: inline-flex; align-items: center; gap: 5px;
	background: transparent; border: 0; padding: 0;
	font-family: var(--serif, Georgia, serif); font-size: 12px;
	color: var(--ink-mute, #8a7a6e); cursor: pointer;
}
.ma-forum-action:hover { color: var(--ink, #2A2823); }
.ma-forum-reply-icon { opacity: .7; transition: opacity .2s ease, transform .2s ease; }
.ma-forum-action:hover .ma-forum-reply-icon { opacity: 1; transform: translateX(-1px); }

/* Replies group with a dotted curve connector from the parent's marker. */
.ma-forum-replies {
	display: flex; flex-direction: column; gap: 18px;
	margin-left: 36px; margin-top: -4px;
	padding-top: 12px;
	position: relative;
}
/* Soft dotted vertical rail for the nested replies. */
.ma-forum-replies::before {
	content: "";
	position: absolute;
	left: -24px; top: 0; bottom: 0;
	width: 1px;
	background-image: linear-gradient(to bottom, rgba(67,53,45,.30) 50%, transparent 50%);
	background-size: 1px 5px;
	background-repeat: repeat-y;
}
/* Nested-reply markers get the same ring style. */
.ma-forum-replies .ma-forum-msg::before { left: -28px; }
/* Double-nested groups indent further (depth-2 replies). */
.ma-forum-replies .ma-forum-replies { margin-left: 28px; }

/* Inline edit mode. */
.ma-forum-edit-textarea {
	width: 100%; min-height: 80px; padding: 10px 12px; box-sizing: border-box;
	font-family: var(--serif, Georgia), serif; font-size: 14px; line-height: 1.5;
	color: var(--ink, #2A2823); background: rgba(248,242,229,.7);
	border: 1px solid rgba(67,53,45,.18); border-radius: 4px;
	resize: vertical;
}
.ma-forum-edit-actions { display: flex; gap: 8px; margin-top: 8px; }

/* Load-older button at the TOP of the feed (chat-app order). */
.ma-forum-load-older {
	flex: 0 0 auto; margin: 4px 28px 0 54px;
	align-self: center;
	background: transparent; border: 1px solid rgba(67,53,45,.2);
	padding: 6px 14px; border-radius: 999px;
	font-family: var(--mono, monospace); font-size: 10px; letter-spacing: .14em;
	text-transform: uppercase; color: var(--ink-mute, #8a7a6e); cursor: pointer;
}
.ma-forum-load-older:hover { background: rgba(67,53,45,.06); color: var(--ink, #2A2823); }
.ma-forum-load-older:disabled { opacity: .5; cursor: default; }

/* ── Compose ─────────────────────────────────────────────────────────── */
.ma-forum-compose {
	flex: 0 0 auto;
	padding: 18px 28px 24px;
	background: #EFE4D6;
	border-top: 1px solid rgba(67,53,45,.10);
	position: relative;
}
/* Small decorative asterisk in the corner above the compose. */
.ma-forum-compose::before {
	content: "✦";
	position: absolute;
	top: 4px; right: 24px;
	font-size: 12px; color: rgba(166,132,96,.5);
}

/* "Posting as" pill. */
.ma-forum-compose-as {
	display: inline-flex; align-items: center; gap: 8px;
	margin-bottom: 14px;
}
.ma-forum-compose-as-label {
	display: inline-block; padding: 5px 12px;
	background: rgba(67,53,45,.08);
	border-radius: 999px;
	font-family: var(--mono, monospace); font-size: 9px; letter-spacing: .22em;
	text-transform: uppercase; color: var(--ink-mute, #8a7a6e);
}
.ma-forum-compose-as-pill {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 4px 12px 4px 4px;
	background: #FAF6EB;
	border: 1px solid rgba(67,53,45,.14);
	border-radius: 999px;
	font-family: var(--serif, Georgia, serif); font-size: 13px;
	color: var(--ink, #2A2823);
}
.ma-forum-compose-as-pill .avatar {
	width: 24px; height: 24px; border-radius: 50%;
	background: var(--ink, #2A2823); color: #F8F2E5;
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--serif, Georgia, serif); font-size: 11px;
}
.ma-forum-compose-as-chev { font-size: 10px; color: var(--ink-mute); }

/* Replying-to chip. */
.ma-forum-replying-to {
	display: inline-flex; align-items: center; gap: 6px;
	margin-bottom: 10px; padding: 4px 10px;
	background: rgba(67,53,45,.08); border-radius: 999px;
	font-family: var(--mono, monospace); font-size: 10px; letter-spacing: .12em;
	text-transform: uppercase; color: var(--ink-mute, #8a7a6e);
}
.ma-forum-replying-to b { color: var(--ink, #2A2823); font-weight: 500; text-transform: none; letter-spacing: 0; }
.ma-forum-replying-cancel {
	background: transparent; border: 0; cursor: pointer;
	color: var(--ink-mute); font-size: 14px; line-height: 1; padding: 0 0 0 4px;
}
.ma-forum-replying-cancel:hover { color: var(--ink); }

/* The "paper" — a cream card with a faint grid background and a feather
   illustration in the bottom-right. The textarea sits on top, transparent. */
.ma-forum-compose-paper {
	position: relative;
	background: #F6EDDA;
	border: 1px solid rgba(67,53,45,.12);
	border-radius: 6px;
	padding: 18px 20px 14px;
	min-height: 110px;
	background-image:
		linear-gradient(to right,  rgba(67,53,45,.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(67,53,45,.05) 1px, transparent 1px),
		url("../img/featherchatforum.png");
	background-size: 16px 16px, 16px 16px, 90px auto;
	background-position: 0 0, 0 0, bottom -6px right 8px;
	background-repeat: repeat, repeat, no-repeat;
	box-shadow: 0 1px 0 rgba(255,255,255,.5) inset;
}
.ma-forum-compose-paper textarea {
	width: 100%; min-height: 78px; padding: 0; margin: 0;
	background: transparent !important;
	border: 0 !important;
	font-family: var(--serif, Georgia, serif);
	font-style: italic; font-size: 15px; line-height: 1.6;
	color: var(--ink, #2A2823);
	resize: vertical; outline: 0;
	display: block;
}
.ma-forum-compose-paper textarea::placeholder {
	color: var(--ink-mute, #8a7a6e); font-style: italic;
}

/* Footer row — paperclip (left) + dark "File the note" pill (right). */
.ma-forum-compose-foot {
	display: flex; align-items: center; gap: 10px; margin-top: 14px;
}
.ma-forum-attach-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px;
	border: 1px solid rgba(67,53,45,.18);
	border-radius: 50%;
	background: #FAF6EB;
	color: var(--ink-soft, #5a4a40);
	cursor: pointer;
	transition: background .2s ease, color .2s ease, transform .2s ease;
}
.ma-forum-attach-btn:hover {
	background: rgba(67,53,45,.06); color: var(--ink, #2A2823);
	transform: rotate(-8deg);
}
.ma-forum-attach-preview {
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--mono, monospace); font-size: 10px; color: var(--ink-mute);
}
.ma-forum-attach-preview img { width: 32px; height: 32px; object-fit: cover; border-radius: 2px; }
.ma-forum-attach-clear {
	background: transparent; border: 0; cursor: pointer; color: var(--ink-mute);
	font-size: 14px; line-height: 1; padding: 0 0 0 4px;
}
.ma-forum-attach-clear:hover { color: var(--ink); }
.ma-forum-submit {
	margin-left: auto;
	display: inline-flex; align-items: center; gap: 10px;
	padding: 11px 22px 11px 26px;
	background: var(--ink, #2A2823);
	color: #F8F2E5;
	border: 0; border-radius: 999px;
	font-family: var(--mono, "JetBrains Mono", monospace);
	font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
	cursor: pointer;
	transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.ma-forum-submit:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 18px -8px rgba(67,53,45,.45);
}
.ma-forum-submit:disabled { opacity: .6; cursor: default; transform: none; box-shadow: none; }
/* While the 1s submit delay runs, dim the button and pulse it gently so
   the user understands the message is being prepared, not lost. */
.ma-forum-submit.is-pending {
	animation: ma-forum-submit-pulse 1s ease-in-out;
}
@keyframes ma-forum-submit-pulse {
	0%   { opacity: .7; }
	50%  { opacity: 1;  }
	100% { opacity: .7; }
}
.ma-forum-submit svg { opacity: .85; }

.ma-forum-error {
	margin: 10px 0 0; padding: 0;
	font-family: var(--serif, Georgia), serif; font-size: 12px; font-style: italic;
	color: #b14a3a;
}

/* Guest sign-in prompt (when not logged in). */
.ma-forum-signin {
	flex: 0 0 auto;
	padding: 22px 28px 28px;
	border-top: 1px solid rgba(67,53,45,.10);
	font-family: var(--serif, Georgia), serif; color: var(--ink-soft, #5a4a40);
	text-align: center;
	font-style: italic;
}
.ma-forum-signin a {
	color: var(--ink, #2A2823); font-weight: 500; text-decoration: underline;
	font-style: normal;
}

@media (max-width: 480px) {
	.ma-forum-head { padding-left: 22px; padding-right: 22px; background-size: 100px auto; }
	.ma-forum-head h2 { font-size: 24px; max-width: 70%; }
	.ma-forum-feed { padding-left: 46px; padding-right: 22px; }
	.ma-forum-feed::before { left: 26px; }
	.ma-forum-msg::before { left: -22px; }
}

@media (max-width: 600px) {
	.ma-char-bubble { font-size: 15px; padding: 14px 18px; }
}
@media (prefers-reduced-motion: reduce) {
	.ma-char-stage, .ma-char-dim, .ma-char-bubble, .ma-char-panel { transition-duration: .01ms; }
	.ma-say-hi:hover .wave { animation: none; }
}