/* ====================================================================
   Shared marketing nav — dropdown / sidecar / game-preview styles.
   Extracted verbatim from extensions/index_new/home_new_test.php
   (the homepage nav) on 2026-05-24 so the logged-out marketing nav can
   be reused on Browse Collections / Browse Verses (and any redesign
   page) via extensions/header/marketing_nav_test.php. The base .nav
   / .nav-links / .nav-bell / .nav-avatar rules already live in
   index_new/styles.css; this file adds only the dropdown layer.
   ==================================================================== */

	.mv-root {
		--dd-shadow-light:
			0 0 0 1px rgba(11,20,38,0.06),
			0 2px 4px -1px rgba(11,20,38,0.06),
			0 14px 28px -10px rgba(11,20,38,0.18),
			0 40px 80px -20px rgba(11,20,38,0.28);
		--dd-shadow-dark:
			0 0 0 1px rgba(0,0,0,0.4),
			0 2px 4px -1px rgba(0,0,0,0.3),
			0 16px 32px -8px rgba(0,0,0,0.45),
			0 48px 80px -24px rgba(0,0,0,0.55);
		--dd-shadow: var(--dd-shadow-light);
	}
	.mv-root.theme-dark { --dd-shadow: var(--dd-shadow-dark); }

	.mv-root .nav-link-wrap { position: relative; display: inline-flex; }
	.mv-root .mvr-nav-dropdown {
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%) translateY(4px);
		width: 580px;
		background: var(--surface);
		border: 1px solid var(--border-strong);
		border-radius: 18px;
		box-shadow: var(--dd-shadow);
		margin-top: 16px;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
		z-index: 9999;
		display: grid;
		grid-template-columns: 1fr 1.05fr;
		overflow: hidden;
	}
	.mv-root .mvr-nav-dropdown.w620 { width: 620px; }
	.mv-root .mvr-nav-dropdown.w520 { width: 520px; }
	.mv-root .mvr-nav-dropdown.w720 { width: 720px; }
	.mv-root .nav-link-wrap:hover > .mvr-nav-dropdown,
	.mv-root .nav-link-wrap.mvr-open > .mvr-nav-dropdown {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateX(-50%) translateY(0);
		transition: opacity .15s ease, transform .15s ease, visibility 0s;
	}
	/* invisible bridge so the cursor can drift from trigger to popover */
	.mv-root .nav-link-wrap::before {
		content: ''; position: absolute;
		top: 100%; left: 50%; transform: translateX(-50%);
		width: 100%; min-width: 100px; height: 22px;
	}

	/* Account menu (logged-out) — small right-aligned dropdown hung off the
	   person icon: Log in / Create account. Reuses the hover + .mvr-open
	   tap-toggle mechanics from the center mega-menus. */
	.mv-root .mvr-acct-wrap { position: relative; display: inline-flex; }
	.mv-root .mvr-acct-trigger { border: 1px solid var(--border); cursor: pointer; padding: 0; }
	.mv-root .mvr-acct-menu {
		position: absolute;
		top: 100%; right: 0;
		transform: translateY(4px);
		min-width: 248px;
		background: var(--surface);
		border: 1px solid var(--border-strong);
		border-radius: 16px;
		box-shadow: var(--dd-shadow);
		margin-top: 14px;
		padding: 10px;
		opacity: 0; visibility: hidden; pointer-events: none;
		transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
		z-index: 9999;
	}
	.mv-root .mvr-acct-wrap:hover > .mvr-acct-menu,
	.mv-root .mvr-acct-wrap.mvr-open > .mvr-acct-menu {
		opacity: 1; visibility: visible; pointer-events: auto;
		transform: translateY(0);
		transition: opacity .15s ease, transform .15s ease, visibility 0s;
	}
	/* invisible bridge from the icon down to the menu */
	.mv-root .mvr-acct-wrap::before {
		content: ''; position: absolute;
		top: 100%; right: 0; width: 100%; height: 20px;
	}
	/* Mono "● ACCOUNT" label — same vocabulary as the dropdown sidecars. */
	.mv-root .mvr-acct-label { padding: 6px 10px 8px; }
	.mv-root .mvr-acct-item {
		display: flex; align-items: center; gap: 12px;
		padding: 9px 10px;
		border-radius: 12px;
		text-decoration: none;
		transition: background .12s;
	}
	.mv-root .mvr-acct-item + .mvr-acct-item { margin-top: 4px; }
	.mv-root .mvr-acct-item:hover { background: var(--surface-2); }
	.mv-root .mvr-acct-ic {
		display: inline-flex; align-items: center; justify-content: center;
		width: 36px; height: 36px; flex-shrink: 0;
		border-radius: 10px;
		background: var(--surface-2);
		color: var(--text-2);
	}
	.mv-root .mvr-acct-text { display: flex; flex-direction: column; min-width: 0; }
	.mv-root .mvr-acct-title {
		font-size: 14px; font-weight: 600;
		color: var(--text-1); letter-spacing: -0.005em;
	}
	.mv-root .mvr-acct-desc {
		font-size: 11.5px; color: var(--text-3);
		line-height: 1.4; margin-top: 1px;
	}

	/* Primary row (Create account) — highlighted accent-soft panel with a
	   solid accent icon tile. Icon color tracks --surface so it stays
	   readable in both light (white on slate) and dark (dark on light). */
	.mv-root .mvr-acct-item-primary,
	.mv-root .mvr-acct-item-primary:hover { background: var(--accent-soft); }
	.mv-root .mvr-acct-item-primary .mvr-acct-ic { background: var(--accent); color: var(--surface); }
	.mv-root .mvr-acct-item-primary .mvr-acct-title { color: var(--accent); }

	/* Notification bell — signed-in only. Wraps the trigger button + the
	   AJAX-filled feed dropdown. The popover surface, caret, 372px width and
	   feed rows all come from dropdowns_redesign.css's .mvdd-* rules (unlocked
	   by the js-site-top-bar class on .nav-right); this block only supplies the
	   wrapper positioning context, the unread-count badge, and the open/close
	   toggle — mirroring the .mvr-acct-menu mechanics above. */
	.mv-root .mvr-bell-wrap { position: relative; display: inline-flex; }
	.mv-root .nav-bell.js-notification-bell-trigger { position: relative; }
	.mv-root .mvr-bell-badge {
		position: absolute; top: -2px; right: -2px;
		min-width: 16px; height: 16px; padding: 0 4px;
		display: flex; align-items: center; justify-content: center;
		font-size: 11px; font-weight: 700; line-height: 1;
		border-radius: 8px;
		background: var(--brand); color: #fff;
		box-sizing: border-box;
	}
	.mv-root .mvr-bell-badge-hidden { display: none; }
	.mv-root .mvr-bell-menu {
		position: absolute;
		top: 100%; right: 0;
		margin-top: 14px;
		opacity: 0; visibility: hidden; pointer-events: none;
		transform: translateY(4px);
		transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
		z-index: 9999;
	}
	.mv-root .mvr-bell-menu.mvr-open {
		opacity: 1; visibility: visible; pointer-events: auto;
		transform: translateY(0);
		transition: opacity .15s ease, transform .15s ease, visibility 0s;
	}
	/* Phones / tablets — the bell stays in the bar while the center links fold
	   into the burger, so the dropdown becomes a fixed full-width sheet. This
	   matches the same-breakpoint rule in dropdowns_redesign.css (which sets
	   width:100% + square top + hidden caret); without position:fixed here the
	   width:100% would resolve against the ~40px wrap instead of the viewport.
	   ~80px clears the phone nav (40px control + 20px top/bottom padding). */
	@media only screen and (max-device-width: 1180px) {
		.mv-root .mvr-bell-menu {
			position: fixed;
			top: 80px; left: 0; right: 0;
			margin-top: 0;
		}
	}

	/* Signed-in account menu — the avatar becomes a dropdown trigger that opens
	   the rich account popover (profile header + family switcher + Account /
	   Sign Out): the SAME .mvdd-acct card the in-app top_row renders. The popover
	   surface, caret, 320px width and card chrome all come from
	   dropdowns_redesign.css's .mvdd-* rules (unlocked by the js-site-top-bar
	   class on .nav-right); this block only supplies the wrapper positioning +
	   open/close, mirroring the .mvr-acct-menu mechanics (hover on desktop,
	   .mvr-open tap-toggle on touch). */
	.mv-root .mvr-user-wrap { position: relative; display: inline-flex; }
	.mv-root .mvr-user-wrap .nav-avatar { cursor: pointer; }
	.mv-root .mvr-user-menu {
		position: absolute;
		top: 100%; right: 0;
		margin-top: 14px;
		opacity: 0; visibility: hidden; pointer-events: none;
		transform: translateY(4px);
		transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
		z-index: 9999;
	}
	.mv-root .mvr-user-wrap:hover > .mvr-user-menu,
	.mv-root .mvr-user-wrap.mvr-open > .mvr-user-menu {
		opacity: 1; visibility: visible; pointer-events: auto;
		transform: translateY(0);
		transition: opacity .15s ease, transform .15s ease, visibility 0s;
	}
	/* invisible bridge from the avatar down to the menu so the cursor can drift */
	.mv-root .mvr-user-wrap::before {
		content: ''; position: absolute;
		top: 100%; right: 0; width: 100%; height: 20px;
	}
	/* Phones / tablets — full-width fixed sheet, matching the bell + the
	   max-device-width:1180px rule in dropdowns_redesign.css that squares the
	   .mvdd-pop-acct corners and hides the caret. */
	@media only screen and (max-device-width: 1180px) {
		.mv-root .mvr-user-menu {
			position: fixed;
			top: 80px; left: 0; right: 0;
			margin-top: 0;
		}
	}

	/* Left list column — v2 bumped outer padding 10→14px, row padding
	   10/12 → 12/14, title 13 → 13.5px, desc 11 → 11.5px. Gives each
	   row a bit more breathing room and pulls the title size closer
	   to the sidecar copy weight so the two columns balance. */
	.mv-root .mvr-nav-listcol { padding: 14px; }
	.mv-root .mvr-nav-listrow {
		display: block;
		padding: 12px 14px;
		border-radius: 10px;
		text-decoration: none;
		transition: background .12s;
	}
	.mv-root .mvr-nav-listrow:hover { background: var(--surface-2); }
	.mv-root .mvr-nav-listrow.active { background: var(--accent-soft); }
	.mv-root .mvr-nav-listrow.active .mvr-nav-row-title { color: var(--accent); }
	.mv-root .mvr-nav-row-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
	.mv-root .mvr-nav-row-title { font-size: 13.5px; font-weight: 600; color: var(--text-1); }
	.mv-root .mvr-nav-row-desc { font-size: 11.5px; color: var(--text-3); line-height: 1.45; margin-top: 2px; }
	.mv-root .mvr-nav-row-tag {
		font-size: 9px; font-weight: 700;
		letter-spacing: 0.08em; text-transform: uppercase;
		padding: 2px 6px;
		border-radius: 4px;
		background: var(--accent-soft);
		color: var(--accent);
	}

	/* Right sidecar column — v2 padding 18 → 22, gap 12 → 14. */
	.mv-root .mvr-nav-sidecar {
		padding: 22px;
		background: var(--surface-2);
		border-left: 1px solid var(--border);
		display: flex;
		flex-direction: column;
		gap: 14px;
		position: relative;
	}
	.mv-root .mvr-nav-sidecar::before {
		content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
		background: linear-gradient(90deg, transparent, var(--accent), transparent);
		opacity: 0.5;
	}
	.mv-root .mvr-nav-sidecar.cyan::before {
		background: linear-gradient(90deg, transparent, var(--brand), transparent);
	}

	.mv-root .mvr-sc-label {
		display: inline-flex; align-items: center; gap: 6px;
		font-size: 10px; font-weight: 700;
		letter-spacing: .12em; text-transform: uppercase;
		font-family: var(--font-mono);
		color: var(--accent);
	}
	.mv-root .mvr-sc-label::before {
		content: ''; width: 5px; height: 5px;
		border-radius: 999px;
		background: currentColor;
	}
	.mv-root .mvr-nav-sidecar.cyan .mvr-sc-label { color: var(--brand); }

	.mv-root .mvr-sc-ref {
		font-family: var(--font-mono);
		font-size: 11px;
		color: var(--accent);
	}
	.mv-root .mvr-sc-verse {
		font-family: var(--font-serif);
		font-size: 17px;
		font-weight: 500;
		font-style: italic;
		line-height: 1.3;
		color: var(--text-1);
		letter-spacing: -0.01em;
		text-wrap: balance;
		margin: 0;
	}
	.mv-root .mvr-sc-btn {
		margin-top: auto;
		padding: 9px 14px;
		border-radius: 999px;
		background: var(--accent);
		color: #FFFFFF;
		font-size: 12px;
		font-weight: 600;
		text-align: center;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		text-decoration: none;
		border: none;
		cursor: pointer;
		transition: filter .12s, transform .12s;
	}
	.mv-root .mvr-sc-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
	.mv-root .mvr-nav-sidecar.cyan .mvr-sc-btn { background: var(--brand); color: var(--brand-fg); }

	/* Verses sidecar — word chips */
	.mv-root .mvr-sc-words { display: flex; flex-wrap: wrap; gap: 3px; }
	.mv-root .mvr-sc-word {
		font-family: var(--font-mono);
		font-size: 10px;
		font-weight: 600;
		padding: 2px 6px;
		border-radius: 4px;
	}
	.mv-root .mvr-sc-word.done { background: var(--success-soft); color: var(--success); }
	.mv-root .mvr-sc-word.cur  { background: var(--accent-soft); color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
	.mv-root .mvr-sc-progrow {
		display: flex; align-items: center; gap: 8px;
		font-size: 11px; color: var(--text-3);
	}
	.mv-root .mvr-sc-progbar {
		flex: 1; height: 4px;
		background: var(--surface);
		border-radius: 999px; overflow: hidden;
	}
	.mv-root .mvr-sc-progbar > span {
		display: block; height: 100%;
		background: var(--success);
	}
	.mv-root .mvr-sc-progpct {
		font-family: var(--font-mono);
		color: var(--success);
		font-weight: 600;
	}

	/* Plans sidecar — week strip + streak */
	.mv-root .mvr-sc-plan-name {
		font-family: var(--font-serif);
		font-size: 18px;
		font-weight: 600;
		line-height: 1.15;
		letter-spacing: -0.01em;
		color: var(--text-1);
	}
	.mv-root .mvr-sc-plan-sub { font-size: 12px; color: var(--text-2); }
	.mv-root .mvr-sc-plan-sub strong { color: var(--text-1); }
	.mv-root .mvr-sc-weekstrip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-top: 2px; }
	.mv-root .mvr-sc-day {
		aspect-ratio: 1;
		display: flex; align-items: center; justify-content: center;
		font-family: var(--font-mono);
		font-size: 10px; font-weight: 700;
		border-radius: 6px;
		background: var(--surface);
		color: var(--text-muted);
		border: 1px solid var(--border);
	}
	.mv-root .mvr-sc-day.done   { background: var(--success-soft); color: var(--success); border-color: var(--success); }
	.mv-root .mvr-sc-day.today  { background: var(--accent-soft);  color: var(--accent);  border-color: var(--accent); }
	.mv-root .mvr-sc-streak {
		display: flex; align-items: center; gap: 8px;
		padding: 8px 10px;
		border-radius: 8px;
		background: var(--surface);
		border: 1px solid var(--border);
	}
	.mv-root .mvr-sc-streak .flame { color: var(--warning); display: inline-flex; }
	.mv-root .mvr-sc-streak .txt { font-size: 11px; color: var(--text-2); }
	.mv-root .mvr-sc-streak .txt strong { color: var(--text-1); font-size: 12px; }
	.mv-root .mvr-sc-streak .ms { margin-left: auto; font-size: 10px; color: var(--text-3); font-family: var(--font-mono); }

	/* Crossword + Scriptle previews stay at 240px so the daily-puzzle
	   feel is compact. Beat the Thorns and everything below it (Assoc,
	   Striker, Match, All) get 272px — a touch larger so the more
	   illustrative previews have a bit more room. */
	.mv-root .mvr-game-pane > .mvr-sc-xword,
	.mv-root .mvr-game-pane > .mvr-game-scriptle {
		width: 100%;
		max-width: 240px;
		margin-left: auto;
		margin-right: auto;
	}
	.mv-root .mvr-game-pane > .mvr-game-thorns,
	.mv-root .mvr-game-pane > .mvr-game-assoc,
	.mv-root .mvr-game-pane > .mvr-game-striker,
	.mv-root .mvr-game-pane > .mvr-game-match,
	.mv-root .mvr-game-pane > .mvr-game-all {
		width: 100%;
		max-width: 272px;
		margin-left: auto;
		margin-right: auto;
	}

	/* Games sidecar — mini crossword. Empty 5x5 puzzle template:
	   white cells with hairline borders, black blocker squares on
	   the corners, no letters or clue numbers. */
	.mv-root .mvr-sc-xword {
		display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px;
		padding: 12px;
		background: var(--surface);
		border-radius: 12px;
		border: 1px solid var(--border-strong);
	}
	.mv-root .mvr-sc-xcell {
		aspect-ratio: 1;
		background: var(--surface-2);
		border: 1px solid var(--border-strong);
		border-radius: 3px;
	}
	.mv-root .mvr-sc-xcell.blocked {
		background: var(--text-1);
		border-color: var(--text-1);
	}

	/* Games sidecar — swappable preview panes. Sidecar reserves a stable
	   min-height so hovering between games doesn't make the dropdown
	   resize. Only one .mvr-game-pane carries .visible at a time. */
	.mv-root .mvr-games-sidecar { min-height: 340px; }
	.mv-root .mvr-game-pane { display: none; flex-direction: column; gap: 14px; flex: 1; }
	.mv-root .mvr-game-pane.visible { display: flex; }

	/* Scriptle: 6-row Wordle-style guess board, partial green/yellow/grey. */
	.mv-root .mvr-game-scriptle { display: flex; flex-direction: column; gap: 4px; align-items: center; padding: 4px 0; }
	.mv-root .scriptle-row { display: flex; gap: 4px; }
	.mv-root .scriptle-tile {
		width: 42px; height: 42px;
		display: inline-flex; align-items: center; justify-content: center;
		font-family: var(--font-serif);
		font-size: 18px; font-weight: 700;
		border: 1.5px solid var(--border-strong);
		background: var(--surface);
		color: var(--text-1);
		border-radius: 4px;
	}
	.mv-root .scriptle-tile.hit { background: #16A34A; color: #FFF; border-color: #16A34A; }
	.mv-root .scriptle-tile.partial { background: #CA8A04; color: #FFF; border-color: #CA8A04; }
	.mv-root .scriptle-tile.miss { background: #6B7280; color: #FFF; border-color: #6B7280; }

	/* Beat the Thorns: capped first letters + a thorny vine. */
	.mv-root .mvr-game-thorns { display: flex; flex-direction: column; gap: 8px; padding: 8px 4px; }
	.mv-root .thorns-words { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
	.mv-root .thorns-cap {
		width: 22px; height: 26px;
		display: inline-flex; align-items: center; justify-content: center;
		font-family: var(--font-mono);
		font-size: 12px; font-weight: 700;
		border-radius: 4px;
		border: 1.5px solid var(--border-strong);
		background: var(--surface);
		color: var(--text-2);
	}
	.mv-root .thorns-cap.done    { background: #DCFCE7; color: #15803D; border-color: #16A34A; }
	.mv-root .thorns-cap.active  { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
	.mv-root .thorns-cap.pending { color: var(--text-muted); }
	.mv-root .thorns-vine { width: 100%; height: 36px; display: block; }

	/* Associations: 4x4 colored category grid w/ solved rows + selection */
	.mv-root .mvr-game-assoc { display: flex; flex-direction: column; gap: 3px; }
	.mv-root .assoc-row { display: flex; gap: 3px; }
	.mv-root .assoc-row span, .mv-root .assoc-tile {
		flex: 1;
		padding: 7px 4px;
		text-align: center;
		font-size: 10px;
		font-weight: 600;
		border-radius: 5px;
		font-family: var(--font-sans);
		background: var(--surface);
		border: 1px solid var(--border-strong);
		color: var(--text-2);
	}
	.mv-root .assoc-row.solved.yellow span { background: #FEF3C7; color: #92400E; border-color: #FCD34D; }
	.mv-root .assoc-row.solved.blue   span { background: #DBEAFE; color: #1E40AF; border-color: #93C5FD; }
	.mv-root .assoc-tile.selected {
		background: var(--accent-soft);
		border-color: var(--accent);
		color: var(--accent);
	}

	/* Scripture Striker — real spaceship + asteroid + starfield bg. */
	.mv-root .mvr-game-striker { display: flex; align-items: center; justify-content: center; }
	.mv-root .striker-scene {
		position: relative;
		width: 100%;
		height: 150px;
		/* background-image is set inline on the .striker-scene element in
		   marketing_nav_test.php — PHP isn't processed in this static .css,
		   so $url must resolve in the (PHP) partial markup instead. */
		background-size: cover;
		background-position: center;
		border-radius: 10px;
		border: 1px solid var(--border-strong);
		overflow: hidden;
	}
	.mv-root .striker-ship {
		position: absolute;
		left: 8%;
		bottom: 18%;
		width: 56px;
		height: auto;
		transform: rotate(-12deg);
		filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
	}
	.mv-root .striker-asteroid {
		position: absolute;
		right: 10%;
		top: 14%;
		width: 56px;
		height: auto;
		filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
	}
	.mv-root .striker-asteroid-2 {
		right: auto;
		left: 52%;
		top: auto;
		bottom: 10%;
		width: 32px;
		opacity: 0.85;
	}
	.mv-root .striker-verse {
		position: absolute;
		bottom: 50%;
		left: 32%;
		transform: translateY(50%);
		color: #C7D2FE;
		font-family: var(--font-serif);
		font-style: italic;
		font-size: 12px;
		text-shadow: 0 1px 4px rgba(0,0,0,0.6);
	}

	/* Memory Match — the real game UX: a scripture text with a
	   "which reference matches?" prompt and 2 multiple-choice
	   reference buttons (one of them shown as correct). */
	.mv-root .mvr-game-match { display: flex; flex-direction: column; gap: 8px; }
	.mv-root .match-scripture {
		background: var(--surface);
		border: 1px solid var(--border-strong);
		border-radius: 10px;
		padding: 12px 14px;
	}
	.mv-root .match-question-row {
		display: flex; align-items: center; justify-content: space-between;
		margin-bottom: 6px;
	}
	.mv-root .match-question {
		font-size: 10px;
		font-weight: 600;
		color: var(--text-3);
		letter-spacing: 0.04em;
	}
	.mv-root .match-translation {
		font-family: var(--font-mono);
		font-size: 10px;
		font-weight: 600;
		color: var(--text-3);
		background: var(--surface-2);
		padding: 2px 8px;
		border-radius: 999px;
	}
	.mv-root .match-text {
		font-family: var(--font-serif);
		font-size: 14px;
		line-height: 1.4;
		color: var(--text-1);
		margin: 0;
	}
	.mv-root .match-options { display: flex; gap: 6px; }
	.mv-root .match-option {
		flex: 1;
		padding: 10px 12px;
		border-radius: 8px;
		background: var(--surface);
		border: 1px solid var(--border-strong);
		color: var(--text-1);
		font-family: var(--font-sans);
		font-size: 12px;
		font-weight: 600;
		text-align: left;
		display: inline-flex;
		align-items: center;
		justify-content: space-between;
		gap: 6px;
		cursor: pointer;
	}
	.mv-root .match-option.correct {
		background: #DCFCE7;
		color: #15803D;
		border-color: #16A34A;
	}
	.mv-root .match-option .check {
		color: #15803D;
		font-weight: 800;
	}

	/* All games: 3x2 grid of mini gradient tiles, each links to a game */
	.mv-root .mvr-game-all {
		display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
	}
	.mv-root .all-tile {
		aspect-ratio: 1.2;
		display: flex; align-items: center; justify-content: center;
		border-radius: 8px;
		border: 1px solid var(--border);
		transition: transform .15s, box-shadow .15s;
	}
	.mv-root .all-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 16px -8px rgba(0,0,0,0.25); }
	.mv-root .all-tile svg { width: 28px; height: 28px; }
	.mv-root .mvr-sc-stats {
		display: flex; align-items: baseline; justify-content: space-between;
		font-size: 12px; color: var(--text-2);
	}
	.mv-root .mvr-sc-stats strong { color: var(--text-1); }
	.mv-root .mvr-sc-stats .meta { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--success); text-transform: uppercase; }
	.mv-root .mvr-sc-players { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-3); }
	.mv-root .mvr-sc-avstack { display: flex; }
	.mv-root .mvr-sc-avstack > * {
		width: 18px; height: 18px;
		border-radius: 999px;
		border: 2px solid var(--surface-2);
		margin-left: -5px;
		background-size: cover; background-position: center;
	}
	.mv-root .mvr-sc-avstack > *:first-child { margin-left: 0; }
	.mv-root .mvr-sc-players strong { color: var(--text-2); }

	/* Churches sidecar — pastor + verse + congregation panel */
	.mv-root .mvr-sc-pastor { display: flex; align-items: center; gap: 8px; }
	.mv-root .mvr-sc-pastor .av {
		width: 28px; height: 28px;
		border-radius: 999px;
		background-size: cover; background-position: center;
		overflow: hidden;
		display: inline-flex; align-items: center; justify-content: center;
		color: #FFFFFF;
		font-size: 11px;
		font-weight: 700;
		flex-shrink: 0;
	}
	.mv-root .mvr-sc-pastor .info { line-height: 1.2; }
	.mv-root .mvr-sc-pastor .name { font-size: 12px; font-weight: 600; color: var(--text-1); }
	.mv-root .mvr-sc-pastor .role { font-size: 10px; color: var(--text-3); }
	.mv-root .mvr-sc-congregation {
		display: flex; align-items: center; gap: 12px;
		padding: 10px 12px;
		background: var(--surface);
		border-radius: 8px;
		border: 1px solid var(--border);
	}
	.mv-root .mvr-sc-cong-num {
		font-family: var(--font-serif);
		font-size: 22px; font-weight: 600;
		line-height: 1; color: var(--text-1);
	}
	.mv-root .mvr-sc-cong-num .total { font-size: 13px; color: var(--text-3); }
	.mv-root .mvr-sc-cong-label {
		font-size: 10px; color: var(--text-3);
		letter-spacing: .06em; text-transform: uppercase;
		margin-top: 2px;
	}
	.mv-root .mvr-sc-cong-bar {
		height: 4px;
		background: var(--surface-2);
		border-radius: 999px;
		overflow: hidden;
	}
	.mv-root .mvr-sc-cong-bar > span { display: block; height: 100%; background: var(--accent); }
	.mv-root .mvr-sc-cong-meta {
		font-size: 10px; color: var(--text-3);
		margin-top: 4px;
		font-family: var(--font-mono);
	}

	/* Friends sidecar — feed rows */
	.mv-root .mvr-sc-feed-row {
		display: flex; align-items: center; gap: 10px;
		padding: 8px 0;
		border-bottom: 1px solid var(--border);
	}
	.mv-root .mvr-sc-feed-row:last-of-type { border-bottom: none; }
	.mv-root .mvr-sc-feed-av {
		position: relative; flex-shrink: 0;
		width: 32px; height: 32px;
	}
	.mv-root .mvr-sc-feed-av img {
		width: 32px; height: 32px;
		border-radius: 999px;
		object-fit: cover;
		display: block;
	}
	.mv-root .mvr-sc-feed-initials {
		width: 32px; height: 32px;
		border-radius: 999px;
		display: flex; align-items: center; justify-content: center;
		color: #FFFFFF;
		font-size: 11px;
		font-weight: 700;
	}
	.mv-root .mvr-sc-feed-av::after {
		content: ''; position: absolute; bottom: -1px; right: -1px;
		width: 10px; height: 10px;
		border-radius: 999px;
		background: var(--success);
		border: 2px solid var(--surface-2);
	}
	.mv-root .mvr-sc-feed-line { font-size: 12px; color: var(--text-1); line-height: 1.3; }
	.mv-root .mvr-sc-feed-line .meta { color: var(--text-3); }
	.mv-root .mvr-sc-feed-line .v-success { color: var(--success); font-weight: 600; }
	.mv-root .mvr-sc-feed-line .v-accent  { color: var(--accent);  font-weight: 600; }
	.mv-root .mvr-sc-feed-line .v-warning { color: var(--warning); font-weight: 600; }
	.mv-root .mvr-sc-feed-time {
		font-family: var(--font-mono);
		font-size: 10px;
		color: var(--text-muted);
		margin-top: 1px;
	}