/* ==========================================================================
   Muse Club — feed styles
   --------------------------------------------------------------------------
   Aesthetic: quiet gallery. Image dominates, UI recedes.
   Mobile-first; the desktop breakpoint at 720px just caps the column width.

   Conventions:
   - All Muse Club selectors are .mc-* so we never collide with Blocksy.
   - All values come from CSS custom properties below — adjust the palette
     in one place rather than chasing hardcoded hex.
   ========================================================================== */

:root {
	/* Palette — every value carries a warm undertone. No pure white or black. */
	--mc-bg:           #f5f0e6;  /* Museum-cream — feels like a gallery wall, not a screen */
	--mc-surface:      #fefcf7;  /* Card surface — slightly warmer than pure white */
	--mc-header-bg:    #f5f0e6;  /* Menu/header bar — defaults to the page background */
	--mc-ink:          #1a1410;  /* Primary text — warm near-black */
	--mc-ink-on-bg:    var(--mc-ink);  /* Text/headings on --mc-bg (page titles, empty states) — split from --mc-ink so a dark page bg can keep readable headings while cards stay light */
	--mc-ink-muted:    #6b6256;  /* Secondary text — warm grey for meta */
	--mc-line:         #e8e1d4;  /* Subtle dividers and borders */
	--mc-accent:       #5e2129;  /* Deep wine — signal colour for active states */
	--mc-accent-soft:  rgba(94, 33, 41, 0.08);

	/* Typography */
	--mc-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--mc-font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--mc-font-label:   var(--mc-font-body);  /* meta lines, badges, counts, controls — follows body unless skinned */

	/* Layout — feed column is narrow on purpose. Reading-distance, not desktop-spread. */
	--mc-col-max:      560px;
	--mc-card-gap:     28px;     /* Space between cards */
	--mc-radius:       14px;
	--mc-header-h:     56px;
	--mc-shadow:       0 1px 0 var(--mc-line);
}

/* Label-role typography — meta lines, counts, badges, small UI labels. These
   all use the body font today, so with --mc-font-label defaulting to the body
   font this changes nothing until a deployment picks a distinct label font in
   Branding → Skin. */
.mc-card-meta,
.mc-action-count,
.mc-carousel-counter,
.mc-comment-meta,
.mc-comment-like-count,
.mc-rate-label,
.mc-tray-label,
.mc-info-meta,
.mc-info-section-label,
.mc-info-type-badge,
.mc-info-tag,
.mc-market-listed-label,
.mc-market-listed-tag {
	font-family: var(--mc-font-label);
}

/* ==========================================================================
   Page chrome — reset Blocksy on the feed page so the feed dominates.
   Blocksy adds its own container padding/headers around our content; we
   neutralise the immediate wrapper without touching Blocksy globally.
   ========================================================================== */

body.page-template-page-feed {
	background: var(--mc-bg);
	color: var(--mc-ink);
	font-family: var(--mc-font-body);
}

body.page-template-page-feed .ct-container,
body.page-template-page-feed .entry-content {
	max-width: none;
	margin: 0;
	padding: 0;
}

body.page-template-page-feed #main {
	padding: 0;
	background: var(--mc-bg);
}

body.page-template-page-feed .entry-header,
body.page-template-page-feed .post-navigation,
body.page-template-page-feed .entry-footer {
	display: none;
}

/* ==========================================================================
   Feed wrapper + sticky header
   ========================================================================== */

.mc-feed-wrap {
	min-height: 80vh;
}

.mc-feed-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--mc-header-bg, #f5f0e6) 92%, transparent);
	backdrop-filter: saturate(140%) blur(8px);
	-webkit-backdrop-filter: saturate(140%) blur(8px);
	border-bottom: 1px solid var(--mc-line);
	transition: transform 220ms ease;
	will-change: transform;
}

/* JS toggles this class to hide the header on scroll-down. */
.mc-feed-header.is-hidden {
	transform: translateY(-100%);
}

.mc-feed-header-inner {
	max-width: var(--mc-col-max);
	margin: 0 auto;
	height: var(--mc-header-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 12px;
}

.mc-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--mc-ink);
	text-decoration: none;
	letter-spacing: 0.01em;
}

.mc-brand-logo {
	height: 28px;
	width: auto;
	max-width: 180px;
	object-fit: contain;
	display: block;
}

.mc-brand-mark {
	font-family: var(--mc-font-display);
	font-weight: 700;
	font-size: 22px;
	line-height: 1;
}

.mc-brand-text {
	font-family: var(--mc-font-display);
	font-style: italic;
	font-weight: 500;
	font-size: 16px;
	line-height: 1;
	color: var(--mc-ink-muted);
}

/* ── Hamburger menu ─────────────────────────────────────────────── */
.mc-header-right {
	display: flex;
	align-items: center;
	gap: 0;
}

.mc-tray-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: var(--mc-ink);
	border-radius: 8px;
	transition: background 120ms ease;
}

.mc-tray-btn:hover {
	background: var(--mc-accent-soft);
}

/* Scrim — fades in behind the tray; captures taps to close. */
.mc-tray-scrim {
	position: fixed;
	inset: 0;
	background: rgba(26, 20, 16, 0.46);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 220ms ease;
	z-index: 800;
}

.mc-tray-scrim.is-open {
	opacity: 1;
	pointer-events: auto;
}

/* Tray — slides in from the right (menu button is right-aligned), over the feed column. */
.mc-tray {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(320px, 84vw);
	background: var(--mc-surface);
	border-left: 1px solid var(--mc-line);
	transform: translateX(100%);
	visibility: hidden;
	transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 260ms;
	z-index: 810;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding: calc(env(safe-area-inset-top, 0px) + 14px) 0 calc(env(safe-area-inset-bottom, 0px) + 20px);
}

.mc-tray.is-open {
	transform: translateX(0);
	visibility: visible;
	transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s;
}

.mc-tray-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4px 16px 14px;
	border-bottom: 1px solid var(--mc-line);
	margin-bottom: 6px;
}

.mc-tray-brand {
	font-family: var(--mc-font-display);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--mc-ink);
	line-height: 1;
}

.mc-tray-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-right: -6px;
	background: none;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	color: var(--mc-ink-muted);
	transition: background 120ms ease, color 120ms ease;
}

.mc-tray-close:hover {
	background: var(--mc-accent-soft);
	color: var(--mc-accent);
}

.mc-tray-label {
	font-family: var(--mc-font-body);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mc-ink-muted);
	padding: 14px 18px 6px;
	margin: 0;
}

.mc-tray-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 18px;
	font-family: var(--mc-font-body);
	font-size: 16px;
	font-weight: 500;
	color: var(--mc-ink);
	text-decoration: none;
	border-left: 3px solid transparent;
	transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.mc-tray-item:hover {
	background: var(--mc-accent-soft);
	color: var(--mc-accent);
}

.mc-tray-item svg {
	flex-shrink: 0;
	color: var(--mc-ink-muted);
	transition: color 120ms ease;
}

.mc-tray-item:hover svg {
	color: var(--mc-accent);
}

.mc-tray-item[aria-current="page"] {
	color: var(--mc-accent);
	border-left-color: var(--mc-accent);
	background: var(--mc-accent-soft);
}

.mc-tray-item[aria-current="page"] svg {
	color: var(--mc-accent);
}

/* Lock background scroll while the tray is open. */
html.mc-tray-locked,
html.mc-tray-locked body {
	overflow: hidden;
}

/* Desktop — the app is a centred column (--mc-col-max), so anchor the tray to
   the column's right edge instead of the viewport edge, matching how the rate
   and comments panels constrain themselves. The scrim stays full-viewport,
   same as the comments backdrop. */
@media (min-width: 720px) {
	.mc-tray {
		right: 50%;
		margin-right: calc(var(--mc-col-max) / -2);
		width: 320px;
	}
}

/* ==========================================================================
   Feed column
   ========================================================================== */

.mc-feed {
	max-width: var(--mc-col-max);
	margin: 0 auto;
	padding: 32px 12px 96px;
	display: flex;
	flex-direction: column;
	gap: var(--mc-card-gap);
}

/* Cards live inside this wrapper (so pull-to-refresh can swap them in place
   without disturbing the banner / PTR indicator). The wrapper carries the
   flex column the cards used to get directly from .mc-feed; inter-card
   spacing is provided by .mc-feed-separator's margins (see below). */
.mc-feed-cards {
	display: flex;
	flex-direction: column;
}

/* ==========================================================================
   Card
   ========================================================================== */

.mc-card {
	background: var(--mc-surface);
	border-radius: var(--mc-radius);
	overflow: hidden;
	box-shadow: var(--mc-shadow);
}

/* --- Header row --- */

.mc-card-header {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
}

/* Type letter mark — circular badge with the locked C/V/E letterform. */
.mc-type-mark {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--mc-font-display);
	font-weight: 600;
	font-size: 17px;
	line-height: 1;
	color: var(--mc-surface);
	background: var(--mc-ink);
	user-select: none;
	flex-shrink: 0;
}

/* Reserved for the future when type colour differentiation is decided.
   For now all types share the ink badge — restraint over loud variety. */
.mc-type-classic { background: var(--mc-ink); }
.mc-type-visions { background: var(--mc-ink); }
.mc-type-erotica { background: var(--mc-ink); }
.mc-type-pulse   { background: var(--mc-ink); }

.mc-card-meta {
	min-width: 0; /* Lets ellipsis work inside grid */
}

.mc-card-title {
	font-family: var(--mc-font-display);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.2;
	color: var(--mc-ink);
	margin: 0;

	/* One line, ellipsis if overflow — Foundation: "Truncates to one line". */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mc-card-secondary {
	font-family: var(--mc-font-body);
	font-size: 12px;
	line-height: 1.4;
	color: var(--mc-ink-muted);
	margin: 2px 0 0;
	font-feature-settings: 'tnum' 1; /* Tabular figures for edition counts */

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Info button anchored top-right of the card header — quieter than
   the card title beside it, but readable as a tap target. */
.mc-card-info {
	color: var(--mc-ink-muted);
}

.mc-card-info:hover {
	color: var(--mc-ink);
}

/* --- Image (variable aspect, dominant) --- */

/* The aspect ratio is chosen by the artist on upload — portrait, square,
   or landscape. Each card sets its own --aspect via the data-aspect
   attribute, and the image element renders in that frame. Ratios match
   camera output: 2:3 portrait and 3:2 landscape mean horizontal /
   vertical photographs need no crop. */
.mc-card[data-aspect="portrait"]  { --mc-card-aspect: 2 / 3; }
.mc-card[data-aspect="square"]    { --mc-card-aspect: 1 / 1; }
.mc-card[data-aspect="landscape"] { --mc-card-aspect: 3 / 2; }
.mc-card                          { --mc-card-aspect: 2 / 3; } /* fallback for missing data-aspect */

/* Acts as a button when there's an image (clicking opens the lightbox) and
   as a div when there isn't. Button defaults reset so it visually matches
   the original div treatment. */
.mc-card-image {
	position: relative;
	aspect-ratio: var(--mc-card-aspect);
	overflow: hidden;
	background: var(--mc-bg);
	display: block;
	width: 100%;

	/* Button reset */
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	color: inherit;
	cursor: zoom-in;
	text-align: left;
}

button.mc-card-image:focus-visible {
	outline: 2px solid var(--mc-accent);
	outline-offset: -2px;
}

.mc-card-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 280ms ease;
}

button.mc-card-image:hover img {
	transform: scale(1.012);
}

.mc-card-image-placeholder {
	width: 100%;
	height: 100%;
	background:
		linear-gradient(135deg, transparent 49.5%, var(--mc-line) 49.5%, var(--mc-line) 50.5%, transparent 50.5%),
		var(--mc-bg);
}

/* --- Action row --- */

/* Layout: two groups, separated by a flexible gap so engagement
   actions (left) sit at the start and reflection actions (right) sit
   at the end. The gap between them grows naturally with viewport
   width. Within each group, icons are evenly spaced. */
.mc-action-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 12px 14px;
}

.mc-action-group {
	display: flex;
	align-items: center;
	gap: 4px;
}

.mc-icon-btn {
	background: transparent;
	border: 0;
	padding: 8px;
	cursor: pointer;
	color: var(--mc-ink);
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: background 120ms ease, color 120ms ease, transform 120ms ease;
	font-family: inherit;
}

.mc-icon-btn:hover {
	background: var(--mc-accent-soft);
}

.mc-icon-btn:active {
	transform: scale(0.94);
}

/* Save button — outlined by default, fills with accent colour when saved. */
.mc-action-save [data-mc-save-fill] {
	opacity: 0;
	transition: opacity 140ms ease;
}

.mc-action-save [data-mc-save-outline] {
	transition: stroke 140ms ease;
}

.mc-action-save.is-saved {
	color: var(--mc-accent);
}

.mc-action-save.is-saved [data-mc-save-fill] {
	opacity: 1;
}

.mc-action-save.is-saved [data-mc-save-outline] {
	stroke: var(--mc-accent);
}

/* ==========================================================================
   Empty / signed-out states
   ========================================================================== */

.mc-empty {
	max-width: var(--mc-col-max);
	margin: 0 auto;
	padding: 96px 14px;
	text-align: center;
}

.mc-empty-eyebrow {
	font-family: var(--mc-font-body);
	font-size: 12px;
	font-weight: 500;
	color: var(--mc-ink-muted);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin: 0 0 12px;
}

.mc-empty-headline {
	font-family: var(--mc-font-display);
	font-style: italic;
	font-weight: 500;
	font-size: 38px;
	line-height: 1.15;
	color: var(--mc-ink-on-bg);
	margin: 0 0 14px;
	letter-spacing: -0.01em;
}

.mc-empty-body {
	font-size: 15px;
	color: var(--mc-ink-muted);
	margin: 0;
}

.mc-empty-body a {
	color: var(--mc-accent);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
}

/* ==========================================================================
   Desktop refinements
   ========================================================================== */

@media (min-width: 720px) {
	:root {
		--mc-card-gap: 36px;
	}

	.mc-feed {
		padding: 56px 20px 120px;
	}

	.mc-card-title {
		font-size: 20px;
	}

	.mc-card-header {
		padding: 16px 18px;
	}

	.mc-action-row {
		padding: 12px 14px 16px;
	}

	.mc-empty-headline {
		font-size: 48px;
	}
}

/* ==========================================================================
   Lightbox — fullscreen view of the uncropped artwork
   --------------------------------------------------------------------------
   Foundation: "Pieces that need a wider or narrower frame open in a
   fullscreen lightbox when tapped — the lightbox is the escape hatch for
   compositions that cannot live within 4:5."

   The element is injected once into <body> by feed.js and toggled via
   .is-open. Backdrop is near-black with a hint of warmth so the surround
   doesn't feel sterile. Image is constrained to viewport with object-fit
   so any aspect ratio renders properly.
   ========================================================================== */

.mc-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(15, 12, 10, 0.96);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 200ms ease, visibility 0s linear 200ms;
	padding: 16px;
	cursor: zoom-out;

	/* Disable browser-native pinch and double-tap zoom on the overlay.
	   Without this, iOS Safari interprets pinch as "zoom the visual
	   viewport" — which scales the whole page including the underlying
	   feed, leaving the lightbox stranded mid-air. JS swipe handlers
	   still fire normally because touch events themselves aren't blocked.
	   Custom image-zoom (zoom the image only, not the page) is deferred
	   to a later phase. */
	touch-action: none;
}

.mc-lightbox.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 200ms ease;
}

.mc-lightbox-img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	cursor: default;
	user-select: none;
	-webkit-user-drag: none;
	transform-origin: center center;
	will-change: transform;
}

/* Loading state — soft pulse on the image element while the full-res loads */
.mc-lightbox-img.is-loading {
	opacity: 0.4;
}

.mc-lightbox-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	border: 0;
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.92);
	border-radius: 50%;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: inherit;
	transition: background 140ms ease, transform 140ms ease;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.mc-lightbox-close:hover {
	background: rgba(255, 255, 255, 0.16);
}

.mc-lightbox-close:active {
	transform: scale(0.94);
}

.mc-lightbox-close:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.6);
	outline-offset: 2px;
}

/* Body scroll lock helper — toggled by JS while lightbox is open */
body.mc-lightbox-active {
	overflow: hidden;
}

@media (min-width: 720px) {
	.mc-lightbox {
		padding: 32px;
		cursor: zoom-in;
	}

	.mc-lightbox-close {
		top: 24px;
		right: 24px;
	}
}
}

/* ==========================================================================
   Rate panel — slide-up bottom sheet
   --------------------------------------------------------------------------
   Foundation: covers the lower 60-70% of the viewport, image stays
   partially visible above. No header. Three sections (Emotion, Intensity,
   Interest), each a single noun label and a row of options. Tapping
   toggles outline → filled. Image NOT dimmed — gallery aesthetic insists
   the work stays present.
   ========================================================================== */

.mc-rate-backdrop {
	position: fixed;
	inset: 0;
	z-index: 899;
	pointer-events: none;
	visibility: hidden;
}

.mc-rate-backdrop.is-open {
	pointer-events: auto;
	visibility: visible;
}

.mc-rate-panel {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 900;
	background: var(--mc-surface);
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.16);
	padding: 8px 16px calc(28px + env(safe-area-inset-bottom)) 16px;
	max-height: 70vh;
	overflow-y: auto;
	overscroll-behavior: contain;

	/* Slide-up animation — fast initial, gentle settle (iOS bottom-sheet feel). */
	transform: translateY(110%);
	transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1);

	visibility: hidden;
	will-change: transform;
}

.mc-rate-panel.is-open {
	transform: translateY(0);
	visibility: visible;
}

/* Drag-handle indicator — communicates dismissability. */
.mc-rate-grip {
	width: 36px;
	height: 4px;
	background: var(--mc-line);
	border-radius: 2px;
	margin: 6px auto 14px;
}

.mc-rate-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	border: 0;
	background: transparent;
	color: var(--mc-ink-muted);
	cursor: pointer;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 140ms ease, color 140ms ease;
}

.mc-rate-close:hover {
	background: var(--mc-accent-soft);
	color: var(--mc-ink);
}

.mc-rate-close:focus-visible {
	outline: 2px solid var(--mc-accent);
	outline-offset: 2px;
}

.mc-rate-section {
	margin-bottom: 22px;
}

.mc-rate-section:last-child {
	margin-bottom: 0;
}

.mc-rate-label {
	font-family: var(--mc-font-body);
	font-size: 11px;
	font-weight: 500;
	color: var(--mc-ink-muted);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin: 0 0 10px;
}

.mc-rate-options {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.mc-rate-options[hidden] {
	display: none;
}

.mc-rate-option {
	padding: 9px 14px;
	border-radius: 999px;
	border: 1px solid var(--mc-line);
	background: transparent;
	color: var(--mc-ink);
	font-family: var(--mc-font-body);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
	flex: 0 0 auto;
}

.mc-rate-option:hover {
	border-color: var(--mc-ink);
}

.mc-rate-option:focus-visible {
	outline: 2px solid var(--mc-accent);
	outline-offset: 2px;
}

.mc-rate-option.is-selected {
	background: var(--mc-accent);
	color: var(--mc-surface);
	border-color: var(--mc-accent);
}

body.mc-rate-active {
	overflow: hidden;
}

@media (min-width: 720px) {
	.mc-rate-panel {
		left: 50%;
		right: auto;
		width: 480px;
		bottom: 24px;
		border-radius: 20px;
		transform: translate(-50%, 110%);
	}

	.mc-rate-panel.is-open {
		transform: translate(-50%, 0);
	}
}

/* ==========================================================================
   Comments panel — slide-up bottom sheet for native WP comments
   --------------------------------------------------------------------------
   Same architecture as the Rate panel: invisible backdrop + fixed-position
   sheet that slides up from the bottom. Differences:
   - Larger (covers ~85vh) — comment threads need height to read
   - A small header showing the count, since "Comments (12)" is useful info
   - A scrollable list area
   - A sticky comment-input form pinned to the bottom of the sheet
   ========================================================================== */

.mc-comments-backdrop {
	position: fixed;
	inset: 0;
	z-index: 899;
	pointer-events: none;
	visibility: hidden;
}

.mc-comments-backdrop.is-open {
	pointer-events: auto;
	visibility: visible;
}

.mc-comments-panel {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 900;
	background: var(--mc-surface);
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.16);
	display: flex;
	flex-direction: column;
	max-height: 85vh;
	height: 85vh;

	transform: translateY(110%);
	transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
	visibility: hidden;
	will-change: transform;
}

.mc-comments-panel.is-open {
	transform: translateY(0);
	visibility: visible;
}

.mc-comments-grip {
	width: 36px;
	height: 4px;
	background: var(--mc-line);
	border-radius: 2px;
	margin: 6px auto 0;
	flex-shrink: 0;
}

.mc-comments-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 16px 8px;
	border-bottom: 1px solid var(--mc-line);
	flex-shrink: 0;
}

.mc-comments-title {
	font-family: var(--mc-font-display);
	font-size: 16px;
	font-weight: 500;
	color: var(--mc-ink);
	margin: 0;
}

.mc-comments-close {
	width: 32px;
	height: 32px;
	border: 0;
	background: transparent;
	color: var(--mc-ink-muted);
	cursor: pointer;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 140ms ease, color 140ms ease;
}

.mc-comments-close:hover {
	background: var(--mc-accent-soft);
	color: var(--mc-ink);
}

.mc-comments-close:focus-visible {
	outline: 2px solid var(--mc-accent);
	outline-offset: 2px;
}

/* Scrollable list takes the available middle height. */
.mc-comments-list {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 12px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.mc-comments-empty,
.mc-comments-loading {
	color: var(--mc-ink-muted);
	font-style: italic;
	font-size: 14px;
	text-align: center;
	padding: 24px 0;
}

/* Individual comment block. */
.mc-comment {
	display: grid;
	grid-template-columns: 36px 1fr;
	gap: 10px;
	align-items: start;
}

.mc-comment.is-pending {
	opacity: 0.55;
}

.mc-comment-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--mc-bg);
	overflow: hidden;
	flex-shrink: 0;
}

.mc-comment-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mc-comment-body {
	min-width: 0; /* allow truncation in nested flex contexts */
}

.mc-comment-meta {
	display: flex;
	gap: 8px;
	align-items: baseline;
	margin-bottom: 2px;
}

.mc-comment-author {
	font-family: var(--mc-font-body);
	font-weight: 600;
	font-size: 14px;
	color: var(--mc-ink);
}

.mc-comment-time {
	font-family: var(--mc-font-body);
	font-size: 12px;
	color: var(--mc-ink-muted);
}

.mc-comment-content {
	font-family: var(--mc-font-body);
	font-size: 14px;
	line-height: 1.5;
	color: var(--mc-ink);
	margin: 0;
	overflow-wrap: break-word;
}

.mc-comment-content p {
	margin: 0 0 8px;
}

.mc-comment-content p:last-child {
	margin-bottom: 0;
}

.mc-comment-actions {
	display: flex;
	gap: 14px;
	margin-top: 6px;
	align-items: center;
}

.mc-comment-like {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border: 0;
	background: transparent;
	padding: 4px 6px;
	margin: -4px -6px; /* negate to keep visual alignment */
	border-radius: 6px;
	color: var(--mc-ink-muted);
	font-family: var(--mc-font-body);
	font-size: 12px;
	cursor: pointer;
	transition: color 140ms ease, background 140ms ease;
}

.mc-comment-like:hover {
	background: var(--mc-accent-soft);
	color: var(--mc-ink);
}

.mc-comment-like.is-liked {
	color: var(--mc-accent);
}

.mc-comment-like svg {
	width: 14px;
	height: 14px;
	display: block;
}

.mc-comment-like-count {
	font-variant-numeric: tabular-nums;
}

/* Reply / Delete action links — text-only buttons in the comment
   meta row. Reserved for top-level comments (Reply) and the user's
   own comments (Delete); see the JS for visibility rules. */
.mc-comment-action {
	border: 0;
	background: transparent;
	padding: 4px 0;
	margin: -4px 0;
	color: var(--mc-ink-muted);
	font-family: var(--mc-font-body);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: color 140ms ease;
}

.mc-comment-action:hover {
	color: var(--mc-ink);
}

/* Two-tap delete confirm: first tap arms the button (turns red and
   says "Confirm?"), second tap deletes. Auto-disarms after 4s. */
.mc-comment-delete.is-confirming {
	color: var(--mc-accent);
}

/* Replies are visually indented under their parent. The left border is
   a subtle thread-line connecting reply to context — strong enough to
   read as "this belongs to the comment above," quiet enough not to
   interrupt the gallery aesthetic. */
.mc-comment.is-reply {
	margin-left: 32px;
	padding-left: 14px;
	border-left: 2px solid var(--mc-line);
}

/* Replying-to chip in the input form. Sits above the textarea when
   active, with a small × to cancel and revert to a plain new comment. */
.mc-comments-replying-to {
	display: none;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	margin: 0 0 6px;
	background: var(--mc-accent-soft);
	border-radius: 12px;
	font-family: var(--mc-font-body);
	font-size: 12px;
	color: var(--mc-ink);
}

.mc-comments-replying-to.is-active {
	display: inline-flex;
}

.mc-comments-replying-to-cancel {
	border: 0;
	background: transparent;
	color: var(--mc-ink-muted);
	cursor: pointer;
	padding: 0;
	width: 16px;
	height: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.mc-comments-replying-to-cancel:hover {
	color: var(--mc-ink);
}

/* Inline error message for failed comment posts (Akismet flagged,
   moderation held, network failure). Sits in the form column above the
   input row, fades in/out via the .is-visible class toggle. */
.mc-comments-error {
	display: none;
	padding: 8px 12px;
	background: rgba(94, 33, 41, 0.08);
	border: 1px solid rgba(94, 33, 41, 0.18);
	color: var(--mc-accent);
	border-radius: 12px;
	font-family: var(--mc-font-body);
	font-size: 12px;
	line-height: 1.4;
}

.mc-comments-error.is-visible {
	display: block;
}

/* Sticky input form pinned to the bottom of the panel.

   Structure:
     .mc-comments-form           ← column flex (chip on top, row beneath)
       .mc-comments-replying-to  ← optional chip, only shown when replying
       .mc-comments-form-row     ← row flex: textarea grows, Send pinned

   The earlier flat layout used flex-wrap on the form so the chip could
   take a full row above the input — but that wrap behaviour also
   triggered when the textarea + Send button got even slightly tight,
   making Send wrap below the textarea on mobile. The column-of-rows
   structure keeps Send beside the textarea unconditionally.

   The `env(safe-area-inset-bottom)` padding addition is the iOS
   home-indicator / curved-screen accommodation. */
.mc-comments-form {
	flex-shrink: 0;
	border-top: 1px solid var(--mc-line);
	padding: 10px 12px calc(14px + env(safe-area-inset-bottom)) 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: var(--mc-surface);
}

.mc-comments-form-row {
	display: flex;
	align-items: center;
	gap: 0;
	border: 1px solid var(--mc-line);
	border-radius: 22px;
	background: var(--mc-bg);
	transition: border-color 140ms ease;
	padding: 0 4px 0 2px;
}

.mc-comments-form-row:focus-within {
	border-color: var(--mc-ink-muted);
}

/* Emoji trigger — left inside the pill */
.mc-comments-emoji-btn {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	color: var(--mc-ink-muted);
	cursor: pointer;
	padding: 0;
	border-radius: 50%;
	transition: color 140ms;
	-webkit-tap-highlight-color: transparent;
}
.mc-comments-emoji-btn:hover { color: var(--mc-ink); }

.mc-comments-input {
	flex: 1 1 auto;
	min-height: 36px;
	max-height: 120px;
	padding: 8px 4px;
	border: none;
	border-radius: 0;
	background: transparent;
	color: var(--mc-ink);
	font-family: var(--mc-font-body);
	font-size: 16px; /* 16px — prevents iOS Safari auto-zoom on focus */
	line-height: 1.4;
	resize: none;
	outline: none;
	overflow-y: hidden;
}

.mc-comments-input::placeholder {
	color: var(--mc-ink-muted);
}

/* "Post" — plain text inside the pill, no box */
.mc-comments-submit {
	flex-shrink: 0;
	padding: 0 12px;
	border: none !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: #c9a84c !important; /* gold — visible on both light and dark pill bg */
	font-family: var(--mc-font-body);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 140ms ease;
	line-height: 36px;
	white-space: nowrap;
	min-height: unset;
}

.mc-comments-submit:disabled {
	opacity: 0.35;
	cursor: default;
}

/* Emoji button active state */
.mc-comments-emoji-btn.mc-active {
	color: #c9a84c;
}

body.mc-comments-active {
	overflow: hidden;
}

@media (min-width: 720px) {
	.mc-comments-panel {
		left: 50%;
		right: auto;
		width: 540px;
		bottom: 24px;
		max-height: 75vh;
		height: 75vh;
		border-radius: 20px;
		transform: translate(-50%, 110%);
	}

	.mc-comments-panel.is-open {
		transform: translate(-50%, 0);
	}
}

/* Comment-count badge next to the comment icon. */
.mc-action-count {
	font-family: var(--mc-font-body);
	font-size: 11px;
	font-weight: 600;
	color: var(--mc-ink);
	margin-left: 2px;
	font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
	.mc-feed-header,
	.mc-icon-btn,
	.mc-action-save [data-mc-save-fill],
	.mc-card-image img,
	.mc-lightbox,
	.mc-lightbox-close,
	.mc-rate-panel,
	.mc-rate-option,
	.mc-comments-panel,
	.mc-comments-close,
	.mc-comment-like,
	.mc-comments-input {
		transition: none;
	}
}

/* ======================================================================
   INFO PANE
   ====================================================================== */

/* Overlay */
.mc-info-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 800;
}
.mc-info-overlay.is-visible { display: block; }

/* Pane */
.mc-info-pane {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	max-height: 82vh;
	background: var(--mc-surface);
	border-radius: 16px 16px 0 0;
	z-index: 801;
	display: flex;
	flex-direction: column;
	transform: translateY(100%);
	transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
	overflow: hidden;
}
.mc-info-pane.is-open { transform: translateY(0); }

/* On wider screens constrain to the feed column width and centre */
@media (min-width: 600px) {
	.mc-info-pane {
		left: 50%;
		right: auto;
		width: 560px;
		transform: translateX(-50%) translateY(100%);
		border-radius: 16px 16px 0 0;
	}
	.mc-info-pane.is-open {
		transform: translateX(-50%) translateY(0);
	}
}

.mc-info-pane__drag-bar {
	width: 40px;
	height: 4px;
	background: var(--mc-line);
	border-radius: 2px;
	margin: 12px auto 0;
	flex-shrink: 0;
}

.mc-info-pane__header {
	display: flex;
	justify-content: flex-end;
	padding: 4px 16px 0;
	flex-shrink: 0;
}

.mc-info-pane__close {
	background: none;
	border: none;
	font-size: 22px;
	color: var(--mc-ink-muted);
	cursor: pointer;
	padding: 4px 8px;
	line-height: 1;
}

.mc-info-pane__body {
	flex: 1;
	min-height: 0;         /* critical — without this, flex child ignores parent max-height
	                          and the parent clips instead of the body scrolling */
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 0 0 40px;
	scrollbar-width: none;
}
.mc-info-pane__body::-webkit-scrollbar { display: none; }

/* Fade hint at bottom of pane body — indicates scrollable content below */
.mc-info-pane::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 48px;
	background: linear-gradient( to bottom, transparent, var(--mc-surface) );
	pointer-events: none;
	border-radius: 0 0 0 0;
	z-index: 1;
}

/* Loading */
.mc-info-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 0;
}
.mc-info-spinner {
	width: 28px;
	height: 28px;
	border: 2px solid var(--mc-line);
	border-top-color: var(--mc-accent);
	border-radius: 50%;
	animation: mc-spin 0.8s linear infinite;
}
@keyframes mc-spin { to { transform: rotate(360deg); } }

/* Sections */
.mc-info-section {
	padding: 16px 20px;
	border-bottom: 1px solid var(--mc-line);
}
.mc-info-section:last-child { border-bottom: none; }

.mc-info-section-label {
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--mc-ink-muted);
	margin: 0 0 12px;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Identity */
.mc-info-identity {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.mc-info-type-badge {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--mc-ink);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 2px;
}
.mc-info-title {
	font-family: 'Cormorant Garamond', serif;
	font-size: 22px;
	font-weight: 600;
	color: var(--mc-ink);
	margin: 0 0 4px;
	line-height: 1.2;
}
.mc-info-series {
	font-size: 12px;
	color: var(--mc-ink-muted);
	margin: 0;
}

/* Caption */
.mc-info-caption {
	font-size: 14px;
	color: var(--mc-ink);
	line-height: 1.65;
	margin: 0;
}

/* Hashtags */
.mc-info-hashtags { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-info-tag {
	font-size: 12px;
	color: var(--mc-accent);
	background: rgba(94, 33, 41, 0.07);
	padding: 3px 8px;
	border-radius: 20px;
}

/* Ratings */
.mc-info-rater-count {
	font-weight: 400;
	color: var(--mc-ink-muted);
	text-transform: none;
	letter-spacing: 0;
	font-size: 11px;
}

/* Descriptor grid — Character · Demand · Heat */
.mc-info-descriptors {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px 16px;
	padding: 10px 0 4px;
}

.mc-info-descriptor {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.mc-info-descriptor__label {
	font-size: 9px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--mc-ink-muted);
}

.mc-info-descriptor__value {
	font-family: 'Cormorant Garamond', serif;
	font-size: 19px;
	font-weight: 600;
	color: var(--mc-ink);
	line-height: 1.2;
}

/* Gated ratings — shown before member has rated */
.mc-info-ratings--gated .mc-info-rate-prompt {
	font-size: 14px;
	color: var(--mc-ink);
	margin: 0 0 6px;
}

.mc-info-ratings--gated .mc-info-rate-count {
	font-size: 12px;
	color: var(--mc-ink-muted);
	margin: 0;
}

.mc-info-signals {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.mc-info-signal {
	font-size: 12px;
	color: var(--mc-ink-muted);
	display: flex;
	align-items: center;
	gap: 6px;
}
.mc-info-signal strong { color: var(--mc-ink); }

.mc-info-interest-bar {
	display: inline-block;
	width: 60px;
	height: 4px;
	background: var(--mc-line);
	border-radius: 2px;
	overflow: hidden;
}
.mc-info-interest-bar__fill {
	display: block;
	height: 100%;
	background: var(--mc-accent);
	border-radius: 2px;
}

.mc-info-no-ratings {
	font-size: 13px;
	color: var(--mc-ink-muted);
	margin: 0;
}

/* Two-column editions grid — Prints left, Original right */
.mc-info-editions-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.mc-info-edition-col {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	text-align: center;
}

/* Subtle divider between columns */
.mc-info-edition-col--original {
	padding-left: 20px;
	border-left: 1px solid var(--mc-line);
}

/* On very narrow screens, stack instead of side-by-side */
@media (max-width: 340px) {
	.mc-info-editions-grid {
		grid-template-columns: 1fr;
	}
	.mc-info-edition-col--original {
		padding-left: 0;
		border-left: none;
		padding-top: 16px;
		border-top: 1px solid var(--mc-line);
	}
}

/* Acquire button inside a column — full width of its column */
.mc-info-edition-col .mc-info-acquire-btn {
	margin-bottom: 0;
	font-size: 13px;
	padding: 11px 12px;
}

/* Push all action buttons to the bottom of their column so both sides
   align regardless of how much content sits above (price vs owned badge). */
.mc-info-edition-col .mc-info-acquire-btn,
.mc-info-edition-col .mc-market-list-btn,
.mc-info-edition-col .mc-market-offer-btn,
.mc-info-edition-col .mc-market-cancel-btn,
.mc-info-edition-col .mc-market-withdraw-btn {
	margin-top: auto;
}

/* Print holders section — slightly tighter top padding */
.mc-info-section--print-holders {
	padding-top: 12px;
}
	font-weight: 400;
	font-size: 10px;
	color: var(--mc-ink-muted);
	text-transform: none;
	letter-spacing: 0;
}

.mc-info-price {
	font-family: 'Cormorant Garamond', serif;
	font-size: 28px;
	font-weight: 600;
	color: var(--mc-ink);
	margin-bottom: 12px;
}

.mc-info-balance-warn {
	font-size: 12px;
	color: var(--mc-accent);
	margin: 0 0 10px;
}

.mc-info-acquire-btn {
	display: block;
	width: 100%;
	padding: 13px 20px;
	background: var(--mc-accent);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s;
	margin-bottom: 16px;
}
.mc-info-acquire-btn:hover { background: #7a2b35; }
.mc-info-acquire-btn:disabled {
	background: var(--mc-line);
	color: var(--mc-ink-muted);
	cursor: not-allowed;
}

.mc-info-owned-badge {
	font-size: 13px;
	font-weight: 600;
	color: #2e7d3a;
	margin: 0 0 12px;
}
.mc-info-owner { font-size: 13px; color: var(--mc-ink-muted); margin: 0 0 12px; }
.mc-info-owner-link { color: var(--mc-accent); }
.mc-info-muted { font-size: 13px; color: var(--mc-ink-muted); margin: 0; }

.mc-info-sold-out {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mc-ink-muted);
	margin: 0;
}

.mc-info-last-acquired {
	font-size: 11px;
	color: var(--mc-ink-muted);
	margin: 4px 0 0;
	line-height: 1.4;
}

/* Print owner list */
.mc-info-print-list {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.mc-info-print-row {
	display: grid;
	grid-template-columns: 72px 1fr auto;
	align-items: center;
	gap: 8px;
	padding: 8px 0;
	border-bottom: 1px solid var(--mc-line);
	font-size: 13px;
}

.mc-info-print-row:last-child { border-bottom: none; }

.mc-info-print-row--available {
	grid-template-columns: 72px 1fr;
}

.mc-info-print-num {
	color: var(--mc-ink-muted);
	font-size: 11px;
	font-weight: 500;
	white-space: nowrap;
}

.mc-info-print-owner { min-width: 0; }

.mc-info-print-acq {
	font-size: 11px;
	color: var(--mc-ink-muted);
	text-align: right;
	white-space: nowrap;
}
.mc-info-copy-owner { color: var(--mc-accent); text-decoration: none; }
.mc-info-copy-owner:hover { text-decoration: underline; }
.mc-info-copy-available {
	font-size: 11px;
	color: #2e7d3a;
	font-weight: 500;
}

/* Provenance chain */
.mc-info-provenance {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}
.mc-info-prov-row {
	display: flex;
	gap: 8px;
	padding: 6px 0 6px 12px;
	border-left: 2px solid var(--mc-line);
	font-size: 12px;
	color: var(--mc-ink-muted);
	margin-bottom: 4px;
}
.mc-info-prov-type {
	color: var(--mc-ink-muted);
	min-width: 80px;
	flex-shrink: 0;
}
.mc-info-prov-to { color: var(--mc-ink); flex: 1; }
.mc-info-prov-date { color: var(--mc-ink-muted); font-size: 11px; white-space: nowrap; }

/* Process notes */
.mc-info-process-notes { font-size: 13px; color: var(--mc-ink-muted); margin: 0; line-height: 1.6; }

/* Meta line */
.mc-info-meta { font-size: 11px; color: var(--mc-ink-muted); text-align: center; padding: 16px 20px 0; }

/* Pulse note */
.mc-info-pulse-note p { font-size: 13px; color: var(--mc-ink-muted); margin: 0; }

/* ── Confirm state ── */
.mc-info-confirm {
	padding: 24px 20px;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.mc-info-confirm__heading {
	font-family: 'Cormorant Garamond', serif;
	font-size: 24px;
	font-weight: 600;
	color: var(--mc-ink);
	margin: 0 0 4px;
}
.mc-info-confirm__card-name {
	font-size: 13px;
	color: var(--mc-ink-muted);
	margin-bottom: 20px;
}
.mc-info-confirm__details {
	background: var(--mc-bg);
	border-radius: 10px;
	padding: 4px 0;
	margin-bottom: 20px;
}
.mc-info-confirm__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 16px;
	font-size: 14px;
	color: var(--mc-ink);
	border-bottom: 1px solid var(--mc-line);
}
.mc-info-confirm__row:last-child { border-bottom: none; }
.mc-info-confirm__row span { color: var(--mc-ink-muted); }
.mc-info-confirm__row--after strong { color: var(--mc-accent); }

.mc-info-confirm__yes {
	display: block;
	width: 100%;
	padding: 14px;
	background: var(--mc-accent);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	margin-bottom: 10px;
	transition: background 0.15s;
}
.mc-info-confirm__yes:hover { background: #7a2b35; }
.mc-info-confirm__yes:disabled { opacity: 0.6; cursor: not-allowed; }

.mc-info-confirm__cancel {
	display: block;
	width: 100%;
	padding: 12px;
	background: transparent;
	color: var(--mc-ink-muted);
	border: 1px solid var(--mc-line);
	border-radius: 8px;
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	cursor: pointer;
}

/* ── Success state ── */
.mc-info-success {
	padding: 40px 20px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.mc-info-success__icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(46, 125, 58, 0.12);
	color: #2e7d3a;
	font-size: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 8px;
}
.mc-info-success__heading {
	font-family: 'Cormorant Garamond', serif;
	font-size: 28px;
	font-weight: 600;
	color: var(--mc-ink);
	margin: 0;
}
.mc-info-success__detail { font-size: 14px; color: var(--mc-ink-muted); margin: 0; }
.mc-info-success__balance { font-size: 13px; color: var(--mc-ink-muted); margin: 0; }
.mc-info-success__close {
	margin-top: 20px;
	padding: 12px 32px;
	background: var(--mc-accent);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
}

/* ── Error state ── */
.mc-info-error {
	padding: 40px 20px;
	text-align: center;
}
.mc-info-error p { font-size: 14px; color: var(--mc-ink-muted); margin-bottom: 16px; }
.mc-info-error__retry {
	padding: 10px 24px;
	background: transparent;
	border: 1px solid var(--mc-line);
	border-radius: 8px;
	font-size: 13px;
	color: var(--mc-ink);
	cursor: pointer;
}

/* ======================================================================
   GAME CARD — feed chip
   ====================================================================== */

.mc-card-image--game {
	position: relative;
	cursor: pointer;
}

.mc-game-play-chip {
	position: absolute;
	bottom: 12px;
	left: 12px;
	background: rgba(10, 8, 7, 0.82);
	color: #f0ebe1;
	font-family: 'DM Sans', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	padding: 5px 10px;
	border-radius: 20px;
	backdrop-filter: blur(4px);
	pointer-events: none;
	white-space: nowrap;
}

.mc-game-play-chip--replayed {
	opacity: 0.55;
}

/* ======================================================================
   GAME VIEW — fullscreen overlay
   ====================================================================== */

:root {
	--mc-game-bg:          #0c0a09;
	--mc-game-surface:     #161210;
	--mc-game-tile-border: rgba(255, 255, 255, 0.1);
	--mc-game-text:        #f0ebe1;
	--mc-game-muted:       rgba(240, 235, 225, 0.55);
	--mc-game-accent:      #5e2129;
}

.mc-game-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	z-index: 999990;
}
.mc-game-overlay.is-visible { display: block; }

.mc-game-pane {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--mc-game-bg);
	z-index: 999991;
	display: flex;
	flex-direction: column;
	transform: translateY(100%);
	transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
	overflow: hidden;
	max-width: 100vw;
	overscroll-behavior: none;
	touch-action: pan-x pan-y; /* prevents pinch-zoom; none causes Safari instability on fullscreen elements */
}
.mc-game-pane.is-open { transform: translateY(0); }

.mc-game-close {
	position: absolute;
	top: 12px;
	right: 16px;
	background: none;
	border: none;
	color: var(--mc-game-muted);
	font-size: 24px;
	cursor: pointer;
	z-index: 10;
	padding: 4px 8px;
	line-height: 1;
}

/* ── Pre-play screen ── */
.mc-game-preplay {
	position: relative;
	height: 100%;
}

.mc-game-preplay-img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	opacity: 0.4;
	z-index: 0;
}

.mc-game-preplay-body {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
	padding: 28px 24px 40px;
	background: var(--mc-game-surface);
	max-height: 60vh;
	overflow-y: auto;
}

.mc-game-preplay-title {
	font-family: 'Cormorant Garamond', serif;
	font-size: 28px;
	font-weight: 600;
	color: var(--mc-game-text);
	margin: 0 0 8px;
}

.mc-game-preplay-earn {
	font-size: 14px;
	color: var(--mc-game-muted);
	margin: 0 0 20px;
}
.mc-game-preplay-earn strong { color: #c8a96e; }
.mc-game-preplay-earn--replayed { color: rgba(240, 235, 225, 0.3); }

.mc-game-preplay-choose {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--mc-game-muted);
	margin: 0 0 12px;
}

.mc-game-diff-list {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.mc-game-diff-btn {
	flex: 1;
	min-width: 80px;
	padding: 14px 12px;
	background: rgba(240, 235, 225, 0.06);
	border: 1px solid rgba(240, 235, 225, 0.12);
	border-radius: 10px;
	color: var(--mc-game-text);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	transition: background 0.15s, border-color 0.15s;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	outline: none;
}
@media (hover: hover) {
	.mc-game-diff-btn:hover {
		background: rgba(240, 235, 225, 0.12);
		border-color: rgba(240, 235, 225, 0.25);
	}
}
.mc-game-diff-btn strong {
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: var(--mc-game-text);
}
.mc-game-diff-btn span {
	font-size: 11px;
	color: var(--mc-game-muted);
}

/* ── Prevent text selection + iOS callout during gameplay ── */
.mc-game-pane,
.mc-game-hud,
.mc-panic-canvas-wrap {
	-webkit-user-select:   none;
	user-select:           none;
	-webkit-touch-callout: none;
}
.mc-panic-canvas-wrap canvas {
	touch-action: none; /* prevents scroll/zoom hijacking the drag gesture */
}

/* ── Game HUD ── */
.mc-game-hud {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	background: var(--mc-game-surface);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	flex-shrink: 0;
	touch-action: manipulation; /* prevents iOS double-tap zoom on HUD buttons */
}

.mc-game-hud-diff {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--mc-game-muted);
}

.mc-game-hud-earn {
	font-size: 11px;
	color: #c8a96e;
}

.mc-game-hud-fun {
	font-size: 11px;
	color: var(--mc-game-muted);
	font-style: italic;
}

.mc-game-hud-spacer { flex: 1; }

.mc-game-hud-moves,
.mc-game-hud-timer {
	font-size: 12px;
	color: var(--mc-game-muted);
	font-variant-numeric: tabular-nums;
}

.mc-game-hud-timer { margin-left: 4px; }

.mc-game-hud-close {
	background: none;
	border: none;
	color: var(--mc-game-muted);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	padding: 0 2px;
	margin-left: 6px;
	opacity: 0.7;
	transition: opacity 0.15s;
}
.mc-game-hud-close:hover { opacity: 1; }

/* ── Eye / ghost reference button ── */
.mc-game-hud-eye {
	background: none;
	border: none;
	color: var(--mc-game-muted);
	cursor: pointer;
	padding: 2px 4px;
	display: flex;
	align-items: center;
	opacity: 0.6;
	transition: opacity 0.15s, color 0.15s;
	-webkit-tap-highlight-color: transparent;
}
.mc-game-hud-eye:hover { opacity: 1; }
.mc-game-hud-eye.is-active {
	color: #c8a96e;
	opacity: 1;
}

/* ── Reference image view (eye toggle) ── */
.mc-game-reference {
	display: none;
	flex: 1;
	align-items: center;
	justify-content: center;
	background: var(--mc-game-bg);
	padding: 16px;
}
.mc-game-reference img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
}

/* ── Game surface ── */
.mc-game-surface {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--mc-game-bg);
	padding: 20px;
}

.mc-puzzle-container {
	position: relative;
}

.mc-puzzle-grid {
	display: grid;
	gap: 2px;
}
.mc-puzzle-grid--3 { grid-template-columns: repeat(3, 1fr); }
.mc-puzzle-grid--4 { grid-template-columns: repeat(4, 1fr); }
.mc-puzzle-grid--5 { grid-template-columns: repeat(5, 1fr); }

.mc-puzzle-tile {
	display: block;
	background-color: var(--mc-game-surface);
	border: 1px solid var(--mc-game-tile-border);
	border-radius: 2px;
	cursor: pointer;
	transition: transform 0.08s;
	background-repeat: no-repeat;
	padding: 0;
	-webkit-tap-highlight-color: transparent;
}
.mc-puzzle-tile:active { transform: scale(0.96); }
.mc-puzzle-tile--empty {
	background-color: rgba(255, 255, 255, 0.04) !important;
	cursor: default;
	border-color: rgba(255, 255, 255, 0.04);
}

/* ── Restored state ── */
.mc-game-restored {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 40px 24px;
	text-align: center;
	gap: 12px;
}

.mc-game-restored-mark {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(94, 33, 41, 0.2);
	color: #c8a96e;
	font-size: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 8px;
}

.mc-game-restored-heading {
	font-family: 'Cormorant Garamond', serif;
	font-size: 42px;
	font-weight: 600;
	color: var(--mc-game-text);
	margin: 0;
}

.mc-game-reward-amount {
	font-family: 'Cormorant Garamond', serif;
	font-size: 36px;
	font-weight: 600;
	color: #c8a96e;
	margin: 4px 0;
}
.mc-game-reward-amount span { font-size: 20px; }

.mc-game-reward-breakdown {
	font-size: 12px;
	color: var(--mc-game-muted);
	letter-spacing: 0.04em;
}

.mc-game-reward-balance {
	font-size: 12px;
	color: var(--mc-game-muted);
	margin-top: 4px;
}

.mc-game-reward-replay {
	font-size: 14px;
	color: var(--mc-game-muted);
	margin: 0;
	max-width: 260px;
}

.mc-game-restored-continue {
	margin-top: 24px;
	padding: 13px 40px;
	background: var(--mc-game-accent);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s;
}
.mc-game-restored-continue:hover { background: #7a2b35; }

/* ── Loading / error ── */
.mc-game-loading,
.mc-game-error {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	gap: 16px;
	color: var(--mc-game-muted);
	font-size: 14px;
}

.mc-game-spinner {
	width: 32px;
	height: 32px;
	border: 2px solid rgba(240, 235, 225, 0.15);
	border-top-color: var(--mc-game-accent);
	border-radius: 50%;
	animation: mc-spin 0.8s linear infinite;
}

/* desktop: cap puzzle width, pane stays fullscreen */
@media (min-width: 600px) {
	/* Cap the game pane at feed-column width. Overlay still covers full screen. */
	.mc-game-pane {
		left: 50%;
		right: auto;
		width: min(560px, 100vw);
		transform: translateX(-50%) translateY(100%);
	}
	.mc-game-pane.is-open {
		transform: translateX(-50%) translateY(0);
	}

	.mc-game-surface {
		max-width: 560px;
		margin: 0 auto;
		width: 100%;
	}
}

/* ======================================================================
   GAME CARDS ADMIN — inline styles for GameCardsPage
   ====================================================================== */

.mc-admin-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 4px;
	background: #1a1814;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	margin-right: 3px;
}

/* ── Resume button (pre-play screen) ── */
.mc-game-resume {
	margin-bottom: 16px;
}
.mc-game-resume-btn {
	width: 100%;
	padding: 14px 16px;
	background: rgba(94, 33, 41, 0.15);
	border: 1px solid rgba(94, 33, 41, 0.4);
	border-radius: 10px;
	color: var(--mc-game-text);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	text-align: left;
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	font-weight: 600;
	transition: background 0.15s;
}
.mc-game-resume-btn:hover { background: rgba(94, 33, 41, 0.25); }
.mc-game-resume-btn span {
	font-size: 11px;
	font-weight: 400;
	color: var(--mc-game-muted);
}

/* ── Confirm overlay ── */
.mc-game-confirm {
	position: absolute;
	inset: 0;
	background: rgba(12, 10, 9, 0.88);
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.mc-game-confirm-box {
	background: var(--mc-game-surface);
	border-radius: 14px;
	padding: 28px 24px;
	max-width: 320px;
	width: 100%;
	text-align: center;
}
.mc-game-confirm-box p {
	color: var(--mc-game-text);
	font-size: 15px;
	margin: 0 0 20px;
	line-height: 1.5;
}
.mc-game-confirm-actions {
	display: flex;
	gap: 10px;
}
.mc-game-confirm-ok,
.mc-game-confirm-cancel {
	flex: 1;
	padding: 12px;
	border: none;
	border-radius: 8px;
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
}
.mc-game-confirm-ok {
	background: rgba(240, 235, 225, 0.1);
	color: var(--mc-game-muted);
}
.mc-game-confirm-cancel {
	background: var(--mc-game-accent);
	color: #fff;
}

/* ── Info pane: game leaderboard ───────────────────────────────────── */

.mc-info-scores-empty {
	font-size: 13px;
	color: var(--mc-ink-muted);
	margin: 0;
}

.mc-info-score-diff {
	margin-bottom: 16px;
}
.mc-info-score-diff:last-child { margin-bottom: 0; }

.mc-info-score-diff-label {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--mc-ink-muted);
	margin: 0 0 8px;
}

.mc-info-score-row {
	display: grid;
	grid-template-columns: 20px 28px 1fr auto;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	border-bottom: 1px solid var(--mc-line);
}
.mc-info-score-row:last-child { border-bottom: none; }

.mc-info-score-medal {
	font-size: 14px;
	text-align: center;
}

.mc-info-score-avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: cover;
	background: rgba(0,0,0,0.06);
}

.mc-info-score-name {
	font-size: 13px;
	font-weight: 500;
	color: var(--mc-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mc-info-score-stats {
	font-size: 12px;
	color: var(--mc-ink-muted);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* ======================================================================
   FEED POST — carousel + like button
   ====================================================================== */

/* ── Carousel ─────────────────────────────────────────────────────── */
.mc-carousel {
	position: relative;
	overflow: hidden;
	width: 100%;
	cursor: grab;
	user-select: none;

	/* The carousel finishes its setup on a deferred frame after load — it
	   inserts clone slides into the track and applies the initial transform.
	   If the user has already scrolled past this card by then, that mutation
	   happens above the viewport and Chrome's scroll anchoring can latch onto
	   the shifting carousel content and jump the page back toward the top.
	   Excluding the carousel subtree from anchor selection prevents that; the
	   box is aspect-ratio locked so nothing here ever changes height anyway. */
	overflow-anchor: none;
}

.mc-carousel:active { cursor: grabbing; }

.mc-carousel-track {
	display: flex;
	width: 100%;
	height: 100%;
	/* No will-change:transform — it creates a stacking context that breaks
	   Chrome's overflow:hidden pointer-event clipping, causing clone slides
	   (outside the carousel bounds) to intercept clicks. The browser already
	   promotes this to a compositor layer automatically on the first transform
	   animation, so the hint is redundant and harmful here. */
	transition: transform 260ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mc-carousel-slide {
	flex: 0 0 100%;
	width: 100%;
	min-width: 0;
	cursor: pointer;
	/* Never display:none — all slides stay in the GPU compositing layer.
	   Visibility is handled by translateX on the track, not paint/layout. */
}

.mc-carousel-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
}

/* UI bar — dots + counter overlaid at bottom of image */
.mc-carousel-ui {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 11; /* above mc-feed-lock-overlay (z-index 10) */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 12px 8px;
	background: linear-gradient(transparent, rgba(0,0,0,0.35));
	pointer-events: none;
}

.mc-carousel-dots {
	display: flex;
	gap: 5px;
	align-items: center;
}

.mc-carousel-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255,255,255,0.5);
	transition: background 0.15s, transform 0.15s;
}

.mc-carousel-dot.is-active {
	background: #ffffff;
	transform: scale(1.2);
}

.mc-carousel-counter {
	position: absolute;
	right: 12px;
	font-family: var(--mc-font-ui);
	font-size: 11px;
	font-weight: 600;
	color: rgba(255,255,255,0.85);
	letter-spacing: 0.04em;
}

/* ── Like button ──────────────────────────────────────────────────── */
.mc-action-like [data-mc-like-fill] {
	display: none;
	color: #e0334c;
}

.mc-action-like [data-mc-like-outline] {
	display: block;
}

.mc-action-like.is-liked [data-mc-like-fill] {
	display: block;
}

.mc-action-like.is-liked [data-mc-like-outline] {
	display: none;
}

.mc-action-like.is-liked {
	color: #e0334c;
}

/* ── Vault / reward images button ──────────────────────────────── */

.mc-action-vault {
	color: var(--mc-ink-muted);
	transition: color 150ms ease;
	gap: 4px;
}

/* Locked state — muted, cursor shows it's not interactive */
.mc-action-vault:not(.is-unlocked) {
	cursor: default;
	opacity: 0.7;
}

/* Unlocked state — gold key, inviting tap */
.mc-action-vault.is-unlocked {
	color: #c9a84c;
}
.mc-action-vault.is-unlocked:hover {
	color: #e2c26a;
}

/* ── Feed type badge colour ─────────────────────────────────────── */
.mc-type-feed {
	/* same ink-black as all other type badges — F is not a warning */
}

/* ── GalleryLightbox — feed post full-screen image viewer ─────────── */
.mc-glb-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.95);
	z-index: 99999;
	align-items: center;
	justify-content: center;
}

.mc-glb-overlay.is-open {
	display: flex;
}

.mc-glb-img-wrap {
	max-width: 100vw;
	max-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mc-glb-img {
	max-width: 100vw;
	max-height: 100vh;
	object-fit: contain;
	display: block;
	transition: none !important; /* block Blocksy global transitions — resetZoom animating
	                                FROM a previous zoomed state shows as briefly-zoomed on open */
}

.mc-glb-close,
.mc-glb-prev,
.mc-glb-next {
	position: absolute;
	background: none;
	border: none;
	color: rgba(255,255,255,0.8);
	cursor: pointer;
	font-size: 28px;
	line-height: 1;
	padding: 12px;
	transition: color 0.15s;
	z-index: 1;
}

.mc-glb-close { top: 12px; right: 12px; font-size: 24px; }
.mc-glb-prev  { left: 8px;  top: 50%; transform: translateY(-50%); font-size: 40px; }
.mc-glb-next  { right: 8px; top: 50%; transform: translateY(-50%); font-size: 40px; }

.mc-glb-close:hover,
.mc-glb-prev:hover,
.mc-glb-next:hover { color: #fff; }

/* Position dots at the bottom-centre of the overlay */
.mc-glb-dots {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 6px;
	align-items: center;
	z-index: 1;
}

.mc-glb-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(255,255,255,0.35);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background 0.15s, transform 0.15s;
	flex-shrink: 0;
}

.mc-glb-dot.is-active {
	background: #fff;
	transform: scale(1.25);
}

/* ── Carousel desktop arrows ──────────────────────────────────────────── */
/* Hidden on touch devices; revealed only on hover-capable (mouse) screens. */

.mc-carousel-arrow {
	display: none; /* hidden on mobile / touch */
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0, 0, 0, 0.38);
	color: #fff;
	border: none;
	padding: 10px 14px;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	z-index: 3;
	border-radius: 6px;
	transition: background 0.15s;
	user-select: none;
	-webkit-user-select: none;
}

.mc-carousel-arrow-prev { left: 10px; }
.mc-carousel-arrow-next { right: 10px; }

/* Only show on devices that support hover (i.e. mouse/trackpad — not touch). */
@media (hover: hover) and (pointer: fine) {
	.mc-carousel:hover .mc-carousel-arrow {
		display: block;
	}
	.mc-carousel-arrow:hover {
		background: rgba(0, 0, 0, 0.62);
	}
}

/* ── Feed refresh banner ──────────────────────────────────────────────── */

.mc-feed-refresh-banner {
	display: none;
	position: sticky;
	top: 0;
	z-index: 50;
	text-align: center;
	padding: 0;
	pointer-events: none;
}

.mc-feed-refresh-banner.is-visible {
	display: block;
	pointer-events: auto;
}

.mc-feed-refresh-btn {
	display: inline-block;
	margin: 10px auto 0;
	background: var(--mc-crimson, #5e2129);
	color: #fff;
	border: none;
	border-radius: 20px;
	padding: 8px 20px;
	font-family: var(--mc-font-ui, 'DM Sans', sans-serif);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	box-shadow: 0 2px 12px rgba(0,0,0,0.18);
	letter-spacing: 0.02em;
	transition: background 0.15s, transform 0.15s;
	animation: mc-banner-drop 0.3s ease;
}

.mc-feed-refresh-btn:hover {
	background: #7a2933;
	transform: translateY(-1px);
}

@keyframes mc-banner-drop {
	from { opacity: 0; transform: translateY(-12px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── Pull-to-refresh indicator ────────────────────────────────────────── */

.mc-ptr-indicator {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%) translateY(0);
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	transition: opacity 0.15s;
}

.mc-ptr-indicator[aria-hidden="true"] { opacity: 0; }
.mc-ptr-indicator:not([aria-hidden])  { opacity: 1; }

.mc-ptr-spinner {
	width: 22px;
	height: 22px;
	border: 2px solid rgba(94,33,41,0.2);
	border-top-color: var(--mc-crimson, #5e2129);
	border-radius: 50%;
}

.mc-ptr-indicator.is-ready .mc-ptr-spinner {
	border-color: var(--mc-crimson, #5e2129);
}

.mc-ptr-indicator.is-loading .mc-ptr-spinner {
	animation: mc-ptr-spin 0.6s linear infinite;
}

/* Interaction blocker added the moment a pull-to-refresh commits, removed by the
   reload itself. Transparent (the spinner already signals loading); touch-action
   none + covering the viewport means a scroll can't start during the reload and
   race the navigation, which was snapping the view back to the top. */
.mc-ptr-veil {
	position: fixed;
	inset: 0;
	z-index: 9999;
	touch-action: none;
	background: transparent;
}

@keyframes mc-ptr-spin {
	to { transform: rotate(360deg); }
}

/* ── Card separator ───────────────────────────────────────────────────── */

.mc-feed-separator {
	width: 48%;
	height: 1px;
	background: rgba(0, 0, 0, 0.08);
	/* Half the card gap on each side so the hairline sits centered in the
	   gap and the total card-to-card spacing equals --mc-card-gap (flex
	   items don't collapse margins, so this is exact). */
	margin: calc(var(--mc-card-gap) / 2) auto;
	border: none;
	flex-shrink: 0;
}

/* ── Feed footer ──────────────────────────────────────────────────────── */

.mc-feed-footer {
	text-align: center;
	padding: 24px 16px 32px;
}

.mc-feed-footer-copy {
	font-family: var(--mc-font-ui);
	font-size: 12px;
	color: var(--mc-muted);
	margin: 0;
	letter-spacing: 0.02em;
}


/* =========================================================================
   Muse Panic — v0.24.0
   Teaser card, GameView canvas wrapper, HUD, D-pad, overlays.
   ========================================================================= */

/* ── Teaser card (feed) ──────────────────────────────────────────────────── */

.mc-panic-teaser {
    position: relative;
    width: 100%;
    aspect-ratio: var(--mc-card-ratio, 2/3);
    background: #0D0D0D;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

/* Shimmer sweep — left-to-right animation hinting at hidden art */
.mc-panic-teaser::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.04) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: mc-panic-shimmer 2.4s linear infinite;
    pointer-events: none;
}

@keyframes mc-panic-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

.mc-panic-teaser-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.35);
    position: relative;
    z-index: 1;
}

.mc-panic-teaser-icon svg {
    width: 32px;
    height: 32px;
}

.mc-panic-teaser-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    position: relative;
    z-index: 1;
}

/* ── Canvas wrapper (inside GameView pane) ───────────────────────────────── */

.mc-panic-canvas-wrap {
    position: relative;
    margin: 0 auto;
    flex-shrink: 0;
    /* width/height set by JS to fit the computed canvas dimensions */
}

.mc-panic-canvas-wrap canvas {
    display: block;
    image-rendering: pixelated;
    image-rendering: crisp-edges; /* Firefox */
}

/* ── HUD — overlaid on canvas top ───────────────────────────────────────── */

.mc-panic-hud {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 12px;
    background: rgba(0, 0, 0, 0.55);
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: #C9A84C;
    pointer-events: none;
    z-index: 2;
    box-sizing: border-box;
}

.mc-panic-lives {
    display: flex;
    gap: 4px;
    align-items: center;
}

.mc-panic-life {
    font-size: 15px;
    line-height: 1;
    transition: opacity 250ms;
}

.mc-panic-life.lost {
    opacity: 0.2;
}

/* ── D-pad — below canvas ────────────────────────────────────────────────── */

/* ── Controls bar (Panic only) ─────────────────────────────────────────── */

.mc-controls-bar {
    background: #0a0a0a;
    /* 34px = iPhone home indicator height. env(safe-area-inset-bottom) only
       works with viewport-fit=cover which we inject per-game via mc_lockGameUI.
       Use max() so when the env() value is available it takes over automatically,
       otherwise we get a safe 34px minimum clearance from the browser footer. */
    padding: 4px 14px max(34px, env(safe-area-inset-bottom));
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

/* T-pad layout: [ ← ↑ → ] / [ ↓ ] */
.mc-tpad {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.mc-tpad-row {
    display: flex;
    gap: 8px;
}

/* Split layout: 2fr 1fr 2fr so outer columns fit 2×64px buttons comfortably */
.mc-split {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;
    align-items: center;
}
.mc-split-left {
    grid-column: 1;
    justify-self: center;
    display: flex;
    flex-direction: column; /* ↑ stacked above ↓  (split-R) */
    gap: 8px;
}
.mc-split-right {
    grid-column: 3;
    justify-self: center;
    display: flex;
    flex-direction: row;    /* ← adjacent to →    (split-R) */
    gap: 8px;
    align-items: center;
}

/* Split-L: ←→ go to left hand (row), ↑↓ go to right hand (column) */
#mc-split-left-wrap .mc-split-left {
    flex-direction: row;    /* ← adjacent to → */
    align-items: center;
}
#mc-split-left-wrap .mc-split-right {
    flex-direction: column; /* ↑ stacked above ↓ */
}

/* Shared button — 72×64px: wider than tall for better thumb landing.
   Thumbs press sideways, horizontal coverage matters more than vertical. */
.mc-panic-btn {
    width: 72px;
    height: 64px;
    background: #1e1e1e;
    border: 0.5px solid #333;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #c4a882;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none; /* prevents iOS magnifier loupe on long press */
    touch-action: manipulation;
    transition: background 100ms, border-color 100ms, color 100ms;
    cursor: pointer;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
}
.mc-panic-btn:active,
.mc-panic-btn.mc-pressed {
    background: #3a0015;
    border-color: #F52493;
    color: #F52493;
}

/* HUD keyboard toggle button */
.mc-hud-kbd-btn {
    background: none;
    border: 0.5px solid #333;
    border-radius: 5px;
    padding: 4px 8px;
    color: #8E8E93;
    cursor: pointer;
    display: flex;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation; /* prevents double-tap zoom on the toggle */
    transition: border-color 150ms, background 150ms, color 150ms;
}
/* Split R active — green */
.mc-hud-kbd-btn.mc-active {
    border-color: #39d98a;
    background: #0d2b1a;
    color: #39d98a;
}
/* Split L active — slightly different green so L/R are visually distinct */
.mc-hud-kbd-btn.mc-active.mc-split-left {
    border-color: #5eead4;
    background: #0d2626;
    color: #5eead4;
}

/* ── Win / lose overlays ─────────────────────────────────────────────────── */

.mc-panic-overlay {
    position: absolute;
    inset: 0;
    background: rgba(13, 13, 13, 0.82);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms;
}

.mc-panic-overlay.mc-visible {
    opacity: 1;
    pointer-events: auto;
}

.mc-panic-overlay-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    color: #F0ECE3;
    letter-spacing: 0.06em;
    text-align: center;
    margin: 0;
}

.mc-panic-overlay-sub {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    color: #8E8E93;
    margin: 0;
}

.mc-panic-overlay-earn {
    font-family: 'DM Sans', sans-serif;
    font-size: 22px;
    color: #C9A84C;
    font-weight: 600;
    margin: 4px 0 0;
}

.mc-panic-overlay-btn {
    margin-top: 8px;
    padding: 10px 28px;
    background: transparent;
    border: 1.5px solid #3A3A3C;
    border-radius: 8px;
    color: #F0ECE3;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 150ms;
}

.mc-panic-overlay-btn:hover,
.mc-panic-overlay-btn:focus {
    border-color: #C9A84C;
    outline: none;
}

/* ── Panic pre-play modal ────────────────────────────────────────────────── */

.mc-panic-preplay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 24px 20px;
    box-sizing: border-box;
    gap: 8px;
}

.mc-panic-preplay-eye {
    font-size: 40px;
    line-height: 1;
    opacity: 0.7;
    margin-bottom: 4px;
}

.mc-panic-preplay-eye svg {
    width: 44px;
    height: 44px;
    color: #C9A84C;
}

.mc-panic-preplay-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 26px;
    color: #F0ECE3;
    letter-spacing: 0.08em;
    margin: 0;
    text-align: center;
}

.mc-panic-preplay-tagline {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    color: #8E8E93;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
}

.mc-panic-preplay-earn {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    color: #C9A84C;
    margin: 4px 0 8px;
    text-align: center;
}

.mc-panic-preplay-earn--replayed {
    color: #8E8E93;
}

.mc-panic-preplay-choose {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    color: #636366;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    margin: 4px 0 0;
}

.mc-panic-diff-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 280px;
    margin-top: 4px;
}

.mc-panic-diff-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 12px 16px;
    background: #1C1C1E;
    border: 1.5px solid #3A3A3C;
    border-radius: 8px;
    color: #F0ECE3;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: border-color 120ms;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    outline: none;
}

.mc-panic-diff-btn strong {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.mc-panic-diff-btn span {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    color: #8E8E93;
}

@media (hover: hover) {
    .mc-panic-diff-btn:hover {
        border-color: #C9A84C;
    }
}

/* ── Vignette flash on life lost ─────────────────────────────────────────── */

@keyframes mc-panic-vignette {
    0%   { opacity: 0.6; }
    100% { opacity: 0; }
}

.mc-panic-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(180, 20, 20, 0.7) 100%);
    pointer-events: none;
    z-index: 5;
    opacity: 0;
}

.mc-panic-vignette.mc-flash {
    animation: mc-panic-vignette 600ms ease-out forwards;
}

/* Muse Panic lives + % display inside the shared .mc-game-hud strip */
.mc-panic-hud-lives {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 14px;
    color: #C9A84C;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* ── Notification bell ───────────────────────────────────────────────────── */

.mc-bell {
	background: none;
	border: none;
	padding: 6px;
	cursor: pointer;
	color: var(--mc-ink, #f5f0e6);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-tap-highlight-color: transparent;
	flex-shrink: 0;
	opacity: 0.38;
	transition: opacity 200ms ease;
}

.mc-bell.has-unread {
	opacity: 1;
}

.mc-bell-badge {
	position: absolute;
	top: 0;
	right: 0;
	background: #e0334c;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	min-width: 16px;
	height: 16px;
	border-radius: 8px;
	padding: 0 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	pointer-events: none;
}
/* display:flex above beats the browser's [hidden]{display:none} — must override explicitly */
.mc-bell-badge[hidden] { display: none !important; }
	font-family: 'DM Sans', sans-serif;
}

/* ── Notification panel ──────────────────────────────────────────────────── */

.mc-notif-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 299;
	background: rgba(0, 0, 0, 0.45);
}

.mc-notif-backdrop.is-visible {
	display: block;
}

.mc-notif-panel {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	max-height: 72vh;
	z-index: 300;
	background: #111;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px 16px 0 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	transform: translateY(100%);
	transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
	display: block;
	padding-bottom: env(safe-area-inset-bottom, 0);
	/* Hide scrollbar — content still scrollable */
	scrollbar-width: none;
}
.mc-notif-panel::-webkit-scrollbar { display: none; }

.mc-notif-panel.is-open {
	transform: translateY(0);
}

@media (min-width: 720px) {
	.mc-notif-panel {
		inset: auto;
		left: 50%;
		bottom: 0;
		width: 560px;
		max-height: 72vh;
		border-radius: 16px 16px 0 0;
		transform: translateX(-50%) translateY(100%);
	}

	.mc-notif-panel.is-open {
		transform: translateX(-50%) translateY(0);
	}
}

/* ── Close button ───────────────────────────────────────────────────── */

.mc-notif-header-right {
	display: flex;
	align-items: center;
	gap: 12px;
}

.mc-notif-close {
	background: none;
	border: none;
	font-size: 20px;
	line-height: 1;
	color: rgba(255, 255, 255, 0.45);
	cursor: pointer;
	padding: 4px;
	-webkit-tap-highlight-color: transparent;
	transition: color 150ms;
}

.mc-notif-close:hover {
	color: rgba(255, 255, 255, 0.9);
}

.mc-notif-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	position: sticky;
	top: 0;
	background: #111;
	z-index: 1;
}

.mc-notif-title {
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	font-family: 'Cormorant Garamond', serif;
	letter-spacing: 0.02em;
}

.mc-notif-mark-all {
	background: none;
	border: none;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.45);
	cursor: pointer;
	padding: 4px 0;
	font-family: 'DM Sans', sans-serif;
	transition: color 150ms;
}

.mc-notif-mark-all:hover,
.mc-notif-mark-all:focus {
	color: rgba(255, 255, 255, 0.8);
}

.mc-notif-list {
	padding: 8px 0;
}

.mc-notif-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 20px;
	cursor: pointer;
	border-left: 3px solid transparent;
	transition: background 0.15s;
}

.mc-notif-item.is-unread {
	border-left-color: #c9a84c;
	background: rgba(201, 168, 76, 0.06);
}

.mc-notif-item:active {
	background: rgba(255, 255, 255, 0.06);
}

.mc-notif-icon {
	color: rgba(255, 255, 255, 0.4);
	margin-top: 2px;
	flex-shrink: 0;
}

.mc-notif-item.is-unread .mc-notif-icon {
	color: #c9a84c;
}

.mc-notif-text {
	flex: 1;
	min-width: 0;
}

.mc-notif-item-title {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.88);
	line-height: 1.45;
	margin-bottom: 3px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-family: 'DM Sans', sans-serif;
}

.mc-notif-item-time {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.32);
	font-family: 'DM Sans', sans-serif;
}

.mc-notif-empty,
.mc-notif-loading {
	padding: 40px 20px;
	text-align: center;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.32);
	font-family: 'DM Sans', sans-serif;
}

/* ── CardPreview — single-card slide-in panel ───────────────────────────── */

/* While the side viewer is open, lock the page behind it so the feed cannot
   scroll under/around the panel (the panel's own body still scrolls). */
html.mc-preview-open,
html.mc-preview-open body {
	overflow: hidden !important;
}

.mc-card-preview {
	position: fixed;
	inset: 0;
	z-index: 400;
	background: var(--mc-bg, #f5f0e6);
	transform: translateX(100%);
	transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.mc-card-preview.is-open {
	transform: translateX(0);
}

.mc-card-preview-header {
	display: flex;
	align-items: center;
	height: var(--mc-header-h, 52px);
	padding: 0 12px;
	background: var(--mc-bg, #f5f0e6);
	border-bottom: 1px solid var(--mc-line, rgba(0,0,0,0.08));
	flex-shrink: 0;
	position: sticky;
	top: 0;
	z-index: 1;
}

/* Heading is absolutely centred so it doesn't crowd the back button */
.mc-card-preview-heading--abs {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	font-size: 14px;
	font-weight: 600;
	color: var(--mc-ink-on-bg, #1a1008);
	font-family: 'DM Sans', sans-serif;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 55%;
	pointer-events: none;
}

.mc-card-preview-back {
	background: none;
	border: none;
	padding: 6px 8px 6px 0;
	cursor: pointer;
	color: var(--mc-ink-on-bg, #1a1008);
	display: flex;
	align-items: center;
	gap: 6px;
	-webkit-tap-highlight-color: transparent;
	font-size: 15px;
	font-family: 'DM Sans', sans-serif;
}

.mc-card-preview-back-label {
	font-size: 15px;
	color: var(--mc-ink-on-bg, #1a1008);
}

.mc-card-preview-body {
	/* Re-declare all feed CSS variables scoped to this container.
	   On non-feed pages (The Pass, Leaderboard) Blocksy or page-specific
	   stylesheets can override :root variables on body/html. Scoping them
	   here guarantees cards inside CardPreview always render with correct colours.
	   NOTE: when the muse-club plugin is active, the mc_skin <head> override
	   re-targets this same selector and replaces these values with the live
	   skin palette (so the viewer follows the skin). The values below are the
	   plugin-inactive fallback. */
	--mc-surface:      #fefcf7;
	--mc-bg:           #f5f0e6;
	--mc-ink:          #1a1410;
	--mc-ink-muted:    #6b6256;
	--mc-line:         #e8e1d4;
	--mc-accent:       #5e2129;
	--mc-accent-soft:  rgba(94, 33, 41, 0.08);
	--mc-radius:       14px;
	--mc-shadow:       0 1px 0 #e8e1d4;
	--mc-font-display: 'Cormorant Garamond', Georgia, serif;
	--mc-font-body:    'DM Sans', -apple-system, sans-serif;

	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	background: var(--mc-bg);
	padding: 16px 16px calc(32px + env(safe-area-inset-bottom, 0));
}

/* Card inside preview — match feed column width and give card its shadow space */
.mc-card-preview-body .mc-card {
	max-width: var(--mc-col-max);
	margin: 0 auto;
	display: block;
}

@media (min-width: 720px) {
	/* Desktop: centred bottom-sheet. top is set dynamically in JS by measuring
	   feedHeader.getBoundingClientRect().bottom — the only reliable way to sit
	   exactly below the feed header regardless of what else is above it. */
	.mc-card-preview {
		inset: auto;
		top: 0;        /* JS overrides this on open */
		left: 50%;
		bottom: 0;
		width: 560px;
		border-radius: 20px 20px 0 0;
		transform: translateX(-50%) translateY(100%);
		box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.18);
	}

	.mc-card-preview.is-open {
		transform: translateX(-50%) translateY(0);
	}

	.mc-card-preview-header {
		border-radius: 20px 20px 0 0;
	}

	.mc-card-preview-body {
		padding: 16px 20px env(safe-area-inset-bottom, 0);
	}
}

.mc-card-preview-loading {
	padding: 60px 20px;
	text-align: center;
	font-size: 14px;
	color: var(--mc-ink-muted, #8a7a60);
	font-family: 'DM Sans', sans-serif;
}

/* ── Muse Pinball ────────────────────────────────────────────────────── */

/* Canvas wrapper — fills the space between HUD and controls */
/* mc-pinball-canvas-wrap intentionally has no flex/sizing rules. */
/* MusePinball._buildCanvas sets explicit px on container+canvas, */
/* exactly like MusePanic._buildCanvas. No CSS sizing here. */
.mc-pinball-canvas-wrap {
	-webkit-user-select:   none;
	user-select:           none;
	-webkit-touch-callout: none;
}
.mc-pinball-canvas-wrap canvas {
	touch-action: none;
}

/* Controls bar — two full-width flipper buttons */
.mc-pinball-controls {
	display: flex;
	gap: 8px;
	padding: 4px 14px max(34px, env(safe-area-inset-bottom));
	background: rgba(6, 4, 14, 0.95);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.mc-pinball-flipper-btn {
	flex: 1;
	height: 64px;
	border-radius: 10px;
	border: 1.5px solid rgba(201, 168, 76, 0.30);
	background: rgba(20, 15, 32, 0.92);
	color: #c4a882;
	font-size: 17px;
	font-family: 'DM Sans', sans-serif;
	font-weight: 600;
	letter-spacing: 0.04em;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	cursor: pointer;
	transition: background 80ms, border-color 80ms, color 80ms;
}

.mc-pinball-flipper-btn:active,
.mc-pinball-flipper-btn[aria-pressed="true"] {
	background: #3a0015;
	color: #F52493;
	border-color: #F52493;
	box-shadow: 0 0 12px rgba(245, 36, 147, 0.4);
}

/* Launch button — narrower, centred, gold accent */
.mc-pinball-flipper-btn--launch {
	flex: 0 0 60px;
	font-size: 22px;
	border-color: rgba(201, 168, 76, 0.5);
	color: #c9a84c;
}
.mc-pinball-flipper-btn--launch:active {
	background: rgba(201, 168, 76, 0.12);
	color: #f0d080;
	border-color: #c9a84c;
	box-shadow: 0 0 10px rgba(201, 168, 76, 0.3);
}

/* HUD lives display */
.mc-pinball-hud-lives {
	letter-spacing: 3px;
	font-size: 13px;
	color: #c9a84c;
}

/* HUD reveal % */
.mc-pinball-hud-reveal {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: #c9a84c;
	min-width: 40px;
	text-align: right;
}

/* HUD score element */
.mc-pinball-hud-score {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: #c9a84c;
	min-width: 56px;
	text-align: right;
}

/* Preplay difficulty buttons — reuse mc-panic-diff-btn styles already defined */
.mc-preplay-diff-btn {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	width: 100%;
	padding: 12px 16px;
	border-radius: 8px;
	border: 1px solid rgba(201, 168, 76, 0.2);
	background: rgba(201, 168, 76, 0.06);
	color: #e0c8a8;
	cursor: pointer;
	transition: border-color 150ms, background 150ms;
	text-align: left;
	-webkit-tap-highlight-color: transparent; /* prevents sticky iOS tap highlight */
	touch-action: manipulation; /* prevents double-tap zoom on the buttons */
	outline: none; /* touch-only UI — focus ring is noise, not an a11y aid here */
}

@media (hover: hover) {
	.mc-preplay-diff-btn:hover {
		border-color: rgba(201, 168, 76, 0.5);
		background: rgba(201, 168, 76, 0.12);
	}
}

.mc-preplay-diff-btn strong {
	font-size: 15px;
	font-family: 'DM Sans', sans-serif;
}

.mc-preplay-diff-btn span {
	font-size: 12px;
	opacity: 0.65;
	font-family: 'DM Sans', sans-serif;
}

.mc-preplay-earn {
	font-size: 13px;
	color: #c9a84c;
	margin: 4px 0 12px;
	text-align: center;
}

.mc-preplay-earn--replayed {
	color: rgba(201, 168, 76, 0.5);
}

/* ── Mosaic Drop ─────────────────────────────────────────────────────────── */

/* Snap indicator in HUD — aligned status between stats and peek */
.mc-mosaic-snap-hud {
	font-size: 11px;
	font-weight: 600;
	color: #c9a84c;
	white-space: nowrap;
	min-width: 0;
}

/* Piece count + reveal% in HUD */
.mc-mosaic-hud-stat {
	font-size: 11px;
	font-weight: 600;
	color: #c9a84c;
}
.mc-mosaic-hud-sep {
	font-size: 11px;
	color: #333;
	margin: 0 2px;
}

/* Peek (eye) button in HUD */
.mc-mosaic-peek-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: none;
	border: 1px solid rgba(255,255,255,.15);
	border-radius: 6px;
	color: rgba(255,255,255,.45);
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	padding: 0;
	outline: none;
}
.mc-mosaic-peek-btn:active {
	border-color: #c9a84c;
	color: #c9a84c;
}

/* Target image reveal overlay — covers game area, pauses play */
.mc-mosaic-reveal-overlay {
	/* positioned dynamically over the image zone via JS */
	z-index: 10;
	padding: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	overflow: hidden;
}
.mc-mosaic-reveal-img {
	width: 100%;
	height: 100%;
	/* object-fit:cover matches _blit center-crop so image aligns 1:1 with the grid */
	object-fit: cover;
	object-position: center center;
	display: block;
}
.mc-mosaic-reveal-hint {
	position: absolute;
	bottom: 8px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 11px;
	color: rgba(255,255,255,.55);
	pointer-events: none;
	white-space: nowrap;
	background: rgba(0,0,0,.5);
	padding: 2px 8px;
	border-radius: 4px;
}
/* Retry button — hard mode only, appears after each piece locks */
.mc-mosaic-retry-btn {
	font-size: 16px;
	border-color: rgba(255,255,255,.2) !important;
	color: rgba(255,255,255,.5) !important;
}
.mc-mosaic-retry-btn:active {
	border-color: #c9a84c !important;
	color: #c9a84c !important;
}

/* Split layout rows — 2 rows, buttons at natural thumb positions */
.mc-mosaic-split-rows {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	/* Push groups inward — thumbs don't rest on the screen edge */
	padding: 0 20px;
	box-sizing: border-box;
}
.mc-mosaic-srow {
	display: flex;
	flex-direction: row;
	gap: 6px;
}
.mc-mosaic-srow--between { justify-content: space-between; }
.mc-mosaic-srow--start   { justify-content: flex-start; }
.mc-mosaic-srow--end     { justify-content: flex-end; }

/* ←→ pair: two buttons side by side */
.mc-mosaic-btn-pair {
	display: flex;
	flex-direction: row;
	gap: 6px;
}

/* T-pad row 2: spacer before ↓DROP so it sits dead below ↑ROT (centre column) */
.mc-mosaic-tpad-row2 {
	align-items: center;
}
.mc-mosaic-tpad-spacer {
	width: 72px; /* one button width */
	flex-shrink: 0;
}

/* ROT/DROP buttons: arrow + small label, smaller font than default 24px */
.mc-mosaic-rot-btn {
	font-size: 16px;
	line-height: 1.1;
	flex-direction: column;
	gap: 2px;
}
.mc-mosaic-rot-btn span {
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .04em;
	opacity: .7;
}

/* SLAM button modifier — gold accent to distinguish from directional buttons */
.mc-mosaic-slam-btn {
	color: #c9a84c !important;
	border-color: rgba(201,168,76,.45) !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
}
.mc-mosaic-slam-btn:active {
	background: #1a1200 !important;
	color: #ffd700 !important;
	border-color: #ffd700 !important;
}

.mc-mosaic-wrap {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 8px;
	padding: 8px 8px 4px;
	background: #0e0e0e;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}
.mc-mosaic-board-col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex-shrink: 0;
}
.mc-mosaic-hud {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding-bottom: 6px;
}
.mc-mosaic-diff-label {
	font-size: 11px;
	font-weight: 600;
	color: #c9a84c;
	letter-spacing: .06em;
	flex: 1;
}
.mc-mosaic-version {
	font-size: 9px;
	opacity: .45;
	font-weight: 400;
}
.mc-mosaic-snap {
	font-size: 11px;
	font-weight: 600;
	color: #c9a84c;
	min-height: 14px;
	flex: 1;
	text-align: center;
}
.mc-mosaic-side {
	width: 88px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-top: 26px; /* align below hud bar */
}
.mc-mosaic-side canvas {
	display: block;
	border: 1px solid #1e1e1e;
	border-radius: 4px;
}
.mc-mosaic-stat-label {
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: #444;
}
.mc-mosaic-stat-value {
	font-size: 18px;
	font-weight: 600;
	color: #ddd;
	line-height: 1.1;
	margin-bottom: 4px;
}
.mc-mosaic-snap-msg {
	font-size: 11px;
	font-weight: 600;
	color: #c9a84c;
	min-height: 16px;
	text-align: center;
	padding: 2px 0;
}
/* Controls bar */
.mc-mosaic-controls {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 6px 8px max(20px, env(safe-area-inset-bottom));
	background: #0e0e0e;
}
.mc-mosaic-dpad-row {
	display: flex;
	gap: 6px;
	justify-content: flex-start;
}
.mc-mosaic-btn {
	width: 72px;
	height: 56px;
	border: 1px solid #333;
	background: #111;
	border-radius: 10px;
	color: #c4a882;
	font-size: 18px;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
	-webkit-user-select: none;
	outline: none;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mc-mosaic-btn:active {
	background: #3a0015;
	color: #F52493;
	border-color: #F52493;
}
.mc-mosaic-btn--slam {
	width: 120px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	color: #c9a84c;
	border-color: rgba(201,168,76,.4);
}
.mc-mosaic-btn--slam:active {
	background: #1a1200;
	color: #ffd700;
	border-color: #ffd700;
}
/* Preplay */
.mc-mosaic-preplay {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 32px 24px;
	height: 100%;
}
.mc-mosaic-preplay-icon {
	font-size: 36px;
	line-height: 1;
	filter: hue-rotate(30deg);
}
.mc-mosaic-preplay-title {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 28px;
	font-weight: 600;
	color: #f0ece3;
	margin: 0;
}
.mc-mosaic-preplay-sub {
	font-size: 13px;
	color: #888;
	text-align: center;
	margin: 0;
}
.mc-mosaic-diff-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	max-width: 320px;
}
/* Diff buttons reuse mc-preplay-diff-btn — add mosaic-specific highlight suppression */
.mc-mosaic-diff-list .mc-preplay-diff-btn {
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	outline: none;
}
@media (hover: hover) {
	.mc-mosaic-diff-list .mc-preplay-diff-btn:hover {
		border-color: rgba(201, 168, 76, 0.5);
		background: rgba(201, 168, 76, 0.12);
	}
}

/* ── Secondary market ───────────────────────────────────────────────────── */

/* Badge variant: shows when secondary listings exist but artist stock gone */
.mc-info-edition-badge--market {
	background: rgba(201, 168, 76, 0.15);
	color: #8a6e1a;
	border: 1px solid rgba(201, 168, 76, 0.4);
}

/* List for sale button */
.mc-market-list-btn {
	display: block;
	width: 100%;
	padding: 9px 14px;
	background: transparent;
	color: var(--mc-accent);
	border: 1.5px solid var(--mc-accent);
	border-radius: 8px;
	font-family: 'DM Sans', sans-serif;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
	margin-top: 8px;
	text-align: center;
}
.mc-market-list-btn:hover {
	background: var(--mc-accent);
	color: #fff;
}

/* Offer / Make an offer button */
.mc-market-offer-btn {
	display: block;
	width: 100%;
	padding: 9px 14px;
	background: transparent;
	color: var(--mc-ink-muted);
	border: 1.5px solid var(--mc-line);
	border-radius: 8px;
	font-family: 'DM Sans', sans-serif;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s;
	margin-top: 8px;
	text-align: center;
}
.mc-market-offer-btn:hover {
	border-color: var(--mc-accent);
	color: var(--mc-accent);
}

/* Active listing label */
.mc-market-listed-label {
	font-size: 12px;
	font-weight: 600;
	color: #2e7d3a;
	margin: 4px 0 8px;
}

/* Cancel listing / withdraw offer — destructive ghost */
.mc-market-cancel-btn,
.mc-market-withdraw-btn {
	display: block;
	width: 100%;
	padding: 8px 12px;
	background: transparent;
	color: var(--mc-ink-muted);
	border: 1px solid var(--mc-line);
	border-radius: 6px;
	font-family: 'DM Sans', sans-serif;
	font-size: 12px;
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s;
	text-align: center;
}
.mc-market-cancel-btn:hover,
.mc-market-withdraw-btn:hover {
	border-color: #c0392b;
	color: #c0392b;
}

/* Secondary source + royalty notes */
.mc-market-source-note {
	font-size: 11px;
	color: var(--mc-ink-muted);
	margin: 0 0 6px;
	letter-spacing: 0.02em;
}
.mc-market-royalty-note {
	font-size: 11px;
	color: #8a6e1a;
	margin: 0 0 6px;
	letter-spacing: 0.02em;
}

/* Pending offer display */
.mc-market-offer-pending {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 6px 0 8px;
}
.mc-market-offer-pending__amount {
	font-size: 13px;
	font-weight: 600;
	color: var(--mc-ink);
}
.mc-market-offer-pending__expiry {
	font-size: 11px;
	color: var(--mc-ink-muted);
}

/* Listed tag on print holder list row */
.mc-market-listed-tag {
	font-size: 10px;
	font-weight: 600;
	color: #2e7d3a;
	background: rgba(46, 125, 58, 0.1);
	border-radius: 4px;
	padding: 2px 5px;
	white-space: nowrap;
}

/* Incoming offers section (sellers) */
.mc-market-incoming-offers {
	border-top: 1px solid var(--mc-line);
}
.mc-market-offer-list {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
}
.mc-market-offer-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--mc-line);
}
.mc-market-offer-row:last-child { border-bottom: none; }
.mc-market-offer-row__info {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px;
	min-width: 0;
}
.mc-market-offer-row__amount {
	font-size: 14px;
	font-weight: 600;
	color: var(--mc-ink);
}
.mc-market-offer-row__from {
	font-size: 12px;
	color: var(--mc-ink-muted);
}
.mc-market-offer-row__expiry {
	font-size: 11px;
	color: var(--mc-ink-muted);
}
.mc-market-accept-btn {
	flex-shrink: 0;
	padding: 7px 14px;
	background: #2e7d3a;
	color: #fff;
	border: none;
	border-radius: 6px;
	font-family: 'DM Sans', sans-serif;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s;
}
.mc-market-accept-btn:hover { background: #245f2d; }
.mc-market-accept-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Price picker panel ─────────────────────────────────────────────────── */

.mc-market-picker {
	padding: 24px 20px 16px;
}
.mc-market-picker__heading {
	font-family: 'Cormorant Garamond', serif;
	font-size: 22px;
	font-weight: 600;
	color: var(--mc-ink);
	margin: 0 0 4px;
}
.mc-market-picker__sub {
	font-size: 12px;
	color: var(--mc-ink-muted);
	margin: 0 0 14px;
}
.mc-market-picker-ref {
	font-size: 12px;
	color: var(--mc-ink-muted);
	margin: 0 0 14px;
	padding: 8px 10px;
	background: var(--mc-accent-soft);
	border-radius: 6px;
}

/* 4-across preset grid (7 buttons: 3+4 rows on mobile) */
.mc-market-presets {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
	margin: 0 0 16px;
}
.mc-market-preset-btn {
	padding: 8px 4px;
	background: var(--mc-surface);
	border: 1.5px solid var(--mc-line);
	border-radius: 8px;
	font-family: 'DM Sans', sans-serif;
	font-size: 11px;
	font-weight: 600;
	color: var(--mc-ink);
	cursor: pointer;
	text-align: center;
	line-height: 1.3;
	transition: border-color 0.12s, background 0.12s;
}
.mc-market-preset-btn:hover {
	border-color: var(--mc-accent);
	background: var(--mc-accent-soft);
}
.mc-market-preset-btn--active {
	border-color: var(--mc-accent);
	background: var(--mc-accent-soft);
	color: var(--mc-accent);
}
.mc-market-preset-price {
	font-size: 10px;
	font-weight: 400;
	color: var(--mc-ink-muted);
}
.mc-market-preset-btn--active .mc-market-preset-price {
	color: var(--mc-accent);
}

/* Custom amount input */
.mc-market-custom {
	margin: 0 0 20px;
}
.mc-market-custom__label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mc-ink-muted);
	margin-bottom: 8px;
}
.mc-market-custom__row {
	display: flex;
	align-items: center;
}
.mc-market-custom__input {
	width: 100%;
	flex: none;
	padding: 10px 12px;
	border: 1.5px solid var(--mc-line);
	border-radius: 8px;
	background: var(--mc-surface);
	color: var(--mc-ink);
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	-moz-appearance: textfield;
}
.mc-market-custom__input::-webkit-outer-spin-button,
.mc-market-custom__input::-webkit-inner-spin-button { -webkit-appearance: none; }
.mc-market-custom__input:focus {
	outline: none;
	border-color: var(--mc-accent);
}

/* ── Confirm extras ─────────────────────────────────────────────────────── */

/* Royalty row in acquire confirm */
.mc-market-confirm-royalty {
	background: rgba(201, 168, 76, 0.08);
	border-radius: 4px;
	padding: 6px 8px !important;
	margin: 2px 0 !important;
}
.mc-market-confirm-royalty span { color: #8a6e1a !important; }
.mc-market-confirm-royalty strong { color: #8a6e1a !important; }

/* Escrow note under confirm */
.mc-market-escrow-note {
	font-size: 11px;
	color: var(--mc-ink-muted);
	line-height: 1.5;
	margin: 0 0 16px;
	padding: 8px 10px;
	background: var(--mc-accent-soft);
	border-radius: 6px;
}

/* Offer row actions — Accept + Decline side by side */
.mc-market-offer-row__actions {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex-shrink: 0;
}

.mc-market-decline-btn {
	flex-shrink: 0;
	padding: 7px 14px;
	background: transparent;
	color: var(--mc-ink-muted);
	border: 1px solid var(--mc-line);
	border-radius: 6px;
	font-family: 'DM Sans', sans-serif;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s;
	text-align: center;
}
.mc-market-decline-btn:hover {
	border-color: #c0392b;
	color: #c0392b;
}
.mc-market-decline-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Blocked listing — offers pending notice */
.mc-market-offers-gate {
	font-size: 11px;
	color: var(--mc-ink-muted);
	font-style: italic;
	margin: 4px 0 0;
	line-height: 1.4;
}

/* ── Broadcast message view ─────────────────────────────────────────────── */

.mc-notif-header--msg {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mc-notif-back {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: transparent;
	border: none;
	color: rgba(255, 255, 255, 0.7);
	cursor: pointer;
	padding: 0;
	border-radius: 6px;
	transition: color 0.15s;
}
.mc-notif-back:hover { color: #fff; }

.mc-notif-message-body {
	padding: 24px 20px 32px;
}

.mc-notif-message-title {
	font-family: 'Cormorant Garamond', serif;
	font-size: 22px;
	font-weight: 600;
	color: #fff;
	margin: 0 0 6px;
	line-height: 1.2;
}

.mc-notif-message-time {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.4);
	margin: 0 0 20px;
	letter-spacing: 0.04em;
}

.mc-notif-message-text {
	font-size: 14px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
	white-space: pre-wrap;
}

/* Broadcast body preview line in notification list */
.mc-notif-item-preview {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.4);
	line-height: 1.4;
	margin: 1px 0 2px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width: 260px;
}

/* ── Paid feed post lock overlay ────────────────────────────────────────── */

.mc-feed-lock-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 10;
	background: linear-gradient( to bottom,
		rgba(26, 20, 16, 0) 0%,
		rgba(26, 20, 16, 0.72) 40%,
		rgba(26, 20, 16, 0.94) 100%
	);
	padding: 48px 20px 52px; /* extra bottom clears carousel dots + counter */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	pointer-events: none; /* informational only — purchase via action row lock button */
}
.mc-feed-lock-overlay svg {
	color: #c9a84c; /* gold — matches price */
}
.mc-feed-lock-overlay__label {
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	letter-spacing: 0.02em;
}
.mc-feed-lock-overlay__price {
	font-family: 'Cormorant Garamond', serif;
	font-size: 20px;
	font-weight: 600;
	color: #c9a84c;
}

/* ── Single-video feed posts ───────────────────────────────────────────────
   The container reuses .mc-card-image. In the LOCKED state it shows a poster
   <img>, so the inherited aspect-locked box is exactly right (covered by
   `.mc-card-image img`). When the PLAYER is showing (free or unlocked), drop
   the fixed card-aspect box and let Plyr size to the video's own ratio —
   otherwise a video whose ratio differs from the card leaves an empty gap
   below it, and the forced dimensions also break native fullscreen (the video
   is pushed past the viewport). Letting Plyr own its sizing fixes both. */
.mc-feed-video { cursor: default; }
.mc-feed-video:not(.mc-feed-locked) {
	aspect-ratio: auto;
	overflow: visible;
}
.mc-feed-video .plyr {
	width: 100%;
}
/* When Plyr does NOT initialise (dynamically-injected contexts like the
   CardPreview panel — the extension only inits on full page load), the raw
   <video> falls back to native controls. Without a width rule it renders at
   its intrinsic size, leaving big side-gaps in the panel. Fill the width so
   the native fallback looks clean; height:auto keeps the ratio. Harmless in
   the feed, where Plyr already sets the video to 100% width. */
.mc-feed-video video {
	width: 100%;
	height: auto;
	display: block;
}

/* Feed lock button — faded and non-interactive once unlocked */
[data-action="feed-lock"].is-unlocked {
	opacity: 0.3;
	pointer-events: none;
	cursor: default;
}
.mc-feed-lock-confirm-btn {
	padding: 8px 22px;
	border-radius: 8px;
	font-family: 'DM Sans', sans-serif;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	border: none;
	background: var(--mc-accent);
	color: #fff;
	transition: background 0.15s;
}
.mc-feed-lock-confirm-btn:hover { background: #7a2b35; }
.mc-feed-lock-confirm-btn--cancel {
	background: transparent;
	color: rgba(255, 255, 255, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.25);
}
.mc-feed-lock-confirm-btn--cancel:hover { color: #fff; border-color: rgba(255,255,255,0.6); background: transparent; }
.mc-feed-lock-confirm-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Feed lock confirm panel (bottom of card, same pattern as market confirm) */
.mc-feed-lock-confirm {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 600;
	padding: 20px 20px max(20px, env(safe-area-inset-bottom));
	background: var(--mc-surface);
	border-top: 1px solid var(--mc-line);
	border-radius: 16px 16px 0 0;
	box-shadow: 0 -4px 24px rgba(0,0,0,0.12);
	transform: translateY(100%);
	transition: transform 0.26s cubic-bezier(0.32, 0.72, 0, 1);
	display: block; /* always in DOM — motion handles visibility */
}
.mc-feed-lock-confirm.is-visible { transform: translateY(0); }

@media (min-width: 600px) {
	.mc-feed-lock-confirm {
		left: 50%;
		right: auto;
		width: 480px;
		transform: translateX(-50%) translateY(100%);
	}
	.mc-feed-lock-confirm.is-visible { transform: translateX(-50%) translateY(0); }
}

.mc-feed-lock-confirm__text {
	display: block;
	font-size: 15px;
	font-family: 'Cormorant Garamond', serif;
	color: var(--mc-ink);
	margin-bottom: 14px;
	text-align: center;
}
.mc-feed-lock-confirm__btns {
	display: flex;
	gap: 10px;
}
.mc-feed-lock-confirm__yes {
	flex: 1;
	padding: 11px 0;
	background: var(--mc-accent);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
.mc-feed-lock-confirm__yes:disabled { opacity: 0.6; cursor: not-allowed; }
.mc-feed-lock-confirm__no {
	flex: 1;
	padding: 11px 0;
	background: transparent;
	color: var(--mc-ink-muted);
	border: 1px solid var(--mc-line);
	border-radius: 8px;
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	cursor: pointer;
}

/* =========================================================================
   Saved toggle — shared across the browse surfaces (Gallery / Posts / Games).
   A bookmark pill in the head row; when active, the surface shows only the
   member's saved items (other filters still apply on top).
   ========================================================================= */
.mc-browse-headrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}
.mc-browse-headrow > h1 {
	margin-bottom: 0;
}

.mc-saved-toggle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 999px;
	border: 1px solid var(--mc-line);
	background: var(--mc-surface);
	color: var(--mc-ink-muted);
	cursor: pointer;
	transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.mc-saved-toggle:hover {
	border-color: var(--mc-ink-muted);
}
.mc-saved-toggle:focus-visible {
	outline: 2px solid var(--mc-accent);
	outline-offset: 2px;
}
.mc-saved-toggle svg {
	width: 19px;
	height: 19px;
	display: block;
}
.mc-saved-toggle.is-active {
	background: var(--mc-accent);
	border-color: var(--mc-accent);
	color: #fff;
}
.mc-saved-toggle.is-active svg {
	fill: currentColor;
}