/* ============================================================================
   om2gle — fighter-game lobby redesign
   Scoped to .om2gle-app. Mascot styles live in mascot.css (unchanged).
============================================================================ */

/* Fullscreen body — applied via the page-fullscreen template. The stage is
   designed to fit a single viewport on desktop; mobile falls back to scroll. */
html.om2gle-fullscreen,
body.om2gle-fullscreen {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
	overscroll-behavior: none;
}
/* !important here defends against host-theme stylesheets that load after
   ours and paint a light body background on the production WordPress. */
html.om2gle-fullscreen { background: #060403 !important; }
body.om2gle-fullscreen {
	color: #f3e9d4;
	background: radial-gradient(ellipse at 50% 45%, #1a1410 0%, #0b0907 55%, #060403 100%) fixed !important;
}

/* Hide Google reCAPTCHA v3 floating badge. */
.grecaptcha-badge { visibility: hidden !important; }

@media (max-width: 900px) {
	html.om2gle-fullscreen,
	body.om2gle-fullscreen {
		height: auto;
		min-height: 100%;
		overflow-y: auto;
	}
}

/* ============================================================================
   Design tokens — scoped + legacy aliases so mascot.css and any leftover
   --om2-* refs keep resolving.
============================================================================ */
.om2gle-app {
	/* Core palette — warm cosmic stage, gold chrome, rose only as opp accent. */
	--bg:        #0b0907;
	--bg-elev:   #15110d;
	--bg-deep:   #060403;
	--ink:       #f3e9d4;
	--ink-2:     #c9bca0;
	--mute:      #6a6052;
	--mute-2:    #3a3530;
	--rule:      rgba(243, 233, 212, 0.07);
	--rule-2:    rgba(243, 233, 212, 0.14);
	--gold:      #e5a542;
	--gold-soft: #c98a2c;
	--gold-pale: #f4d191;
	--gold-glow: rgba(229, 165, 66, 0.18);
	--rose:      #d6638f;
	--rose-soft: rgba(214, 99, 143, 0.18);
	--coral:     #ff4d6d;
	--amber:     #ffb547;

	--serif: "Instrument Serif", "Times New Roman", Georgia, serif;
	--mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	--sans:  "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;

	/* Legacy aliases — keep mascot.css + any straggler references resolving. */
	--om2-bg:        var(--bg);
	--om2-panel:     var(--bg-elev);
	--om2-panel-2:   #1a1410;
	--om2-line:      var(--rule);
	--om2-line-2:    var(--rule-2);
	--om2-text:      var(--ink);
	--om2-muted:     var(--mute);
	--om2-neon:      var(--gold);
	--om2-neon-2:    var(--gold-pale);
	--om2-neon-deep: var(--gold-soft);
	--om2-neon-hot:  var(--amber);
	--om2-amber:     var(--amber);
	--om2-magenta:   var(--rose);
	--om2-coral:     var(--coral);
	--om2-mint:      var(--gold);
	--om2-mint-2:    var(--gold-pale);

	/* Mouse position for spotlight — written by JS. */
	--om2-mx: 50%;
	--om2-my: 40%;

	position: relative;
	min-height: 100vh;
	background: transparent;
	color: var(--ink);
	font: 14px/1.5 var(--sans);
	-webkit-font-smoothing: antialiased;
	text-rendering: geometricPrecision;
	overflow-x: hidden;
	isolation: isolate;
}

.om2gle-app *,
.om2gle-app *::before,
.om2gle-app *::after { box-sizing: border-box; }

.om2gle-app [hidden] { display: none !important; }

.om2gle-app button {
	font-family: inherit;
	color: inherit;
}

/* ============================================================================
   Atmosphere — minimal. The design wants the stage to recede, not shimmer.
   The decorative layers stay in the DOM so app.js keeps painting safely;
   we hide most of them and keep only the cursor spotlight + drifting motes.
============================================================================ */
.om2gle-atmos {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}
.om2gle-aurora,
.om2gle-grid,
.om2gle-vignette { display: none; }

.om2gle-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0.22;
	mix-blend-mode: screen;
	display: none;
}

.om2gle-motes {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0.45;
}

.om2gle-spotlight {
	position: absolute;
	inset: 0;
	background: radial-gradient(
		circle 520px at var(--om2-mx) var(--om2-my),
		rgba(229, 165, 66, 0.08),
		transparent 70%
	);
	mix-blend-mode: screen;
}

/* ============================================================================
   Stage container — top bar / main / (optional footer). All screens render
   inside .om2gle-main; the active one is unhidden.
============================================================================ */
.om2gle-app {
	display: grid;
	grid-template-rows: auto 1fr;
	gap: 18px;
	padding: 20px 48px 22px;
	max-width: 1440px;
	margin: 0 auto;
	height: 100vh;
	height: 100dvh;
}

@media (max-width: 900px) {
	.om2gle-app {
		padding: 22px 22px 28px;
		gap: 22px;
		height: auto;
		min-height: 100vh;
	}
}

/* ============================================================================
   Header — brand · round · user. Mono lettering, all-caps.
============================================================================ */
.om2gle-header {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mute);
}

.om2gle-brand {
	display: flex;
	align-items: center;
	gap: 14px;
	/* Render the wordmark as a button without native chrome so it can act as
	   the universal "return to baseline" affordance from any screen. */
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.om2gle-brand:hover .om2gle-wordmark { color: var(--gold); }
.om2gle-brand:focus { outline: none; }
.om2gle-brand:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 6px;
	border-radius: 6px;
}
.om2gle-mark {
	position: relative;
	width: 10px;
	height: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.om2gle-mark-core,
.om2gle-mark-ring {
	position: absolute;
	border-radius: 50%;
}
.om2gle-mark-core {
	width: 7px; height: 7px;
	background: var(--gold);
	box-shadow: 0 0 0 4px rgba(229, 165, 66, 0.12);
	animation: om2-blink 2.4s ease-in-out infinite;
}
.om2gle-mark-ring { display: none; }
@keyframes om2-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: .3; }
}

.om2gle-wordmark {
	color: var(--ink);
	font-weight: 500;
	letter-spacing: 0.06em;
}
.om2gle-brand-tagline {
	color: var(--mute);
	display: inline-flex;
	gap: 6px;
}
.om2gle-brand-tagline::before {
	content: "/";
	color: var(--mute-2);
	margin-right: 6px;
}

@media (max-width: 720px) {
	.om2gle-brand-tagline { display: none; }
}

.om2gle-round {
	justify-self: center;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--ink-2);
}
.om2gle-round-num {
	color: var(--gold);
	letter-spacing: 0.16em;
}
.om2gle-round-sep { color: var(--mute-2); }
.om2gle-round-state { color: var(--mute); }
@media (max-width: 720px) {
	.om2gle-round { display: none; }
}

.om2gle-header-right {
	justify-self: end;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: var(--ink-2);
}
.om2gle-handle {
	color: var(--ink);
	font-weight: 500;
	letter-spacing: 0.04em;
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;
	line-height: 1.15;
	gap: 1px;
	text-align: right;
	/* Long display_name values shouldn't shove the header layout — cap the
	   width and let single-line ellipsis kick in. The @handle subtitle has
	   a fixed shape (`@adj-noun-NNNN`) so it fits without truncation at
	   typical desktop widths. */
	max-width: 22ch;
}
.om2gle-handle:empty { display: none; }
.om2gle-handle-name {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.om2gle-handle-tag {
	font-family: var(--mono, ui-monospace, monospace);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.06em;
	color: var(--ink-2);
	opacity: 0.78;
}

/* News bell — restrained, monochrome. */
.om2gle-news-btn {
	appearance: none;
	background: transparent;
	border: 1px solid var(--rule-2);
	color: var(--ink-2);
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	position: relative;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.om2gle-news-btn:hover {
	border-color: var(--gold);
	color: var(--gold);
}
.om2gle-news-btn svg { width: 14px; height: 14px; }
.om2gle-news-badge {
	position: absolute;
	top: -6px; right: -6px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	background: var(--gold);
	color: #0b0907;
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	letter-spacing: 0;
}
.om2gle-news-badge.is-hidden { display: none; }

/* ============================================================================
   Duels pin — header chip that opens the ledger sheet. Visible to logged-out
   users too (rooms are token-based, not account-based), JS-toggled when the
   user has zero stored rooms.
============================================================================ */
.om2gle-duels-btn {
	appearance: none;
	background: transparent;
	border: 1px solid var(--rule-2);
	color: var(--ink-2);
	height: 32px;
	padding: 0 10px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	position: relative;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.om2gle-duels-btn[hidden] { display: none; }
.om2gle-duels-btn:hover {
	border-color: var(--gold);
	color: var(--gold);
}
.om2gle-duels-btn-badge {
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--gold);
	color: #0b0907;
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	letter-spacing: 0;
}
.om2gle-duels-btn-badge.is-hidden { display: none; }

/* ============================================================================
   Duels ledger — sheet list rendered inside #om2gle-duels-sheet. Same chrome
   as the news sheet. Each row: status badge + label/meta on the left, action
   buttons on the right.
============================================================================ */
.om2gle-duels-list { overflow-y: auto; flex: 1; }
.om2gle-duels-empty {
	padding: 32px 22px;
	color: var(--ink-2);
	text-align: center;
	font-family: var(--mono);
	font-size: 13px;
	line-height: 1.6;
}
.om2gle-duels-empty b { color: var(--gold-pale); font-weight: 600; }

.om2gle-duels-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 22px;
	border-bottom: 1px solid var(--rule);
}
.om2gle-duels-row-main {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}
.om2gle-duels-row-text { min-width: 0; flex: 1 1 auto; }
.om2gle-duels-row-label {
	color: var(--ink);
	font-size: 14px;
	line-height: 1.35;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.om2gle-duels-row-meta {
	color: var(--ink-2);
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	margin-top: 3px;
	text-transform: uppercase;
}
.om2gle-duels-row-actions {
	display: flex;
	gap: 6px;
	flex: 0 0 auto;
}
.om2gle-duels-row-actions .om2gle-btn {
	padding: 7px 12px;
	font-size: 11px;
}
.om2gle-duels-row-cancel { opacity: 0.75; }
.om2gle-duels-row-cancel:hover { opacity: 1; color: var(--coral); border-color: var(--coral); }

.om2gle-duels-row-badge {
	flex: 0 0 auto;
	min-width: 68px;
	padding: 4px 8px;
	border-radius: 2px;
	font-family: var(--mono);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-align: center;
	border: 1px solid var(--rule-2);
	color: var(--ink-2);
	text-transform: uppercase;
}
.om2gle-duels-row-badge.is-win     { color: #0b0907; background: var(--gold); border-color: var(--gold); }
.om2gle-duels-row-badge.is-loss    { color: var(--coral); border-color: var(--coral); }
.om2gle-duels-row-badge.is-tie     { color: var(--gold-pale); border-color: var(--gold-pale); }
.om2gle-duels-row-badge.is-seen    { color: var(--ink-2); border-color: var(--rule-2); }
.om2gle-duels-row-badge.is-pending { color: var(--amber); border-color: var(--amber); }
.om2gle-duels-row-badge.is-live    { color: var(--gold); border-color: var(--gold); }
.om2gle-duels-row-badge.is-offline { color: var(--mute); }

@media (max-width: 640px) {
	.om2gle-duels-row {
		flex-wrap: wrap;
		gap: 10px;
		padding: 12px 16px;
	}
	.om2gle-duels-row-main { flex: 1 1 100%; }
	.om2gle-duels-row-actions { flex: 1 1 100%; justify-content: flex-end; }
	.om2gle-duels-btn-label { display: none; }
	.om2gle-duels-btn { padding: 0 8px; }
}

/* ============================================================================
   Main + screen system
============================================================================ */
.om2gle-main {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.om2gle-screen {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
	animation: om2-fade-in .35s ease both;
}
.om2gle-screen[hidden] { display: none !important; }

@keyframes om2-fade-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.om2gle-stack-center {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 22px;
	text-align: center;
	width: 100%;
	max-width: 920px;
	margin: 0 auto;
}

/* Stage stack — fills the viewport, distributes arena + controls + util. */
.om2gle-screen-stage { min-height: 0; }
.om2gle-stage-stack {
	width: 100%;
	max-width: 1280px;
	height: 100%;
	display: grid;
	grid-template-rows: 1fr auto auto auto;
	justify-items: center;
	align-items: center;
	gap: 16px;
	margin: 0 auto;
}

/* Type system —------------------------------------------------------------- */
.om2gle-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--mute);
}
.om2gle-eyebrow-bar {
	display: inline-block;
	width: 22px;
	height: 1px;
	background: var(--rule-2);
}

.om2gle-title {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(40px, 6vw, 64px);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin: 0;
}
.om2gle-title-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}
.om2gle-title-line { display: block; }
.om2gle-title-line-accent {
	font-style: italic;
	color: var(--gold);
}

.om2gle-lede {
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.55;
	color: var(--ink-2);
	max-width: 520px;
	margin: 0;
}

/* ============================================================================
   Buttons
============================================================================ */
.om2gle-btn {
	appearance: none;
	border: 1px solid var(--rule-2);
	background: transparent;
	color: var(--ink);
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 14px 28px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.om2gle-btn:hover { border-color: var(--ink-2); }

.om2gle-btn-primary {
	background: var(--gold);
	color: #0b0907;
	border-color: var(--gold);
	font-weight: 600;
	box-shadow: 0 14px 36px -16px var(--gold-glow);
}
.om2gle-btn-primary:hover {
	background: var(--gold-pale);
	border-color: var(--gold-pale);
	color: #0b0907;
}
.om2gle-btn-primary:active { transform: translateY(1px); }

.om2gle-btn-ghost {
	background: transparent;
	border-color: transparent;
	color: var(--ink-2);
}
.om2gle-btn-ghost:hover {
	color: var(--gold);
	border-color: transparent;
}

.om2gle-btn-lg {
	padding: 16px 32px;
	font-size: 13px;
	letter-spacing: 0.22em;
}

.om2gle-btn-icon svg { width: 14px; height: 14px; }
.om2gle-btn-tail {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	color: rgba(11, 9, 7, 0.55);
	padding-left: 8px;
	border-left: 1px solid rgba(11, 9, 7, 0.18);
}
.om2gle-btn-ghost .om2gle-btn-tail { color: var(--mute); border-color: var(--rule); }

.om2gle-dot {
	display: inline-block;
	width: 7px; height: 7px;
	border-radius: 50%;
	background: currentColor;
	margin-right: 4px;
}

/* ============================================================================
   ARENA — the headline composition. Two character cards + VS column.
============================================================================ */
.om2gle-arena {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 0;
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	padding: 0;
}

.om2gle-arena-side {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.om2gle-side-label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--mute);
}
.om2gle-side-label-tag { color: var(--gold); }
.om2gle-arena-side.is-rival .om2gle-side-label-tag { color: var(--rose); }

/* Cards ——---------------------------------------------------------------- */
.om2gle-card {
	width: clamp(220px, 22vw, 280px);
	aspect-ratio: 3 / 4;
	max-height: min(360px, 42vh);
	position: relative;
	display: grid;
	place-items: center;
	background: linear-gradient(180deg, #15110c 0%, #0d0a07 100%);
	border: 1px solid var(--rule-2);
}
.om2gle-card .om2gle-corner {
	position: absolute;
	width: 18px;
	height: 18px;
	border: 1px solid var(--ink);
}
.om2gle-corner.tl { top: 10px; left: 10px;  border-right: none;  border-bottom: none; }
.om2gle-corner.tr { top: 10px; right: 10px; border-left:  none;  border-bottom: none; }
.om2gle-corner.bl { bottom: 10px; left: 10px; border-right: none; border-top:    none; }
.om2gle-corner.br { bottom: 10px; right: 10px; border-left: none; border-top:    none; }

.om2gle-card.is-you {
	border-color: var(--gold);
	box-shadow:
		0 0 0 1px var(--gold) inset,
		0 0 60px -10px var(--gold-glow),
		0 24px 80px -30px var(--gold-glow);
}
.om2gle-card.is-you::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 40%, var(--gold-glow), transparent 60%);
	pointer-events: none;
}
.om2gle-card.is-you .om2gle-corner { border-color: var(--gold); }

.om2gle-card.is-rival {
	border-color: var(--rule-2);
	border-style: dashed;
}
.om2gle-card.is-rival .om2gle-corner { border-color: var(--mute); }
.om2gle-card.is-rival::after {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		45deg,
		transparent 0 14px,
		rgba(243, 233, 212, 0.02) 14px 15px
	);
	pointer-events: none;
}

/* Note glyph inside cards */
.om2gle-glyph {
	font-family: var(--serif);
	color: var(--ink);
	line-height: 0.85;
	display: flex;
	align-items: flex-start;
	gap: 6px;
	position: relative;
	z-index: 1;
}
.om2gle-glyph-letter {
	font-size: clamp(140px, 16vw, 200px);
	font-weight: 400;
	letter-spacing: -0.04em;
}
.om2gle-glyph-octave {
	font-size: clamp(56px, 7vw, 76px);
	margin-top: 20px;
	font-style: italic;
	color: var(--gold);
}
.om2gle-card.is-rival .om2gle-glyph-letter {
	color: var(--mute);
	font-style: italic;
}

/* Card caption (bottom of card) */
.om2gle-card-caption {
	position: absolute;
	bottom: 24px;
	left: 0; right: 0;
	text-align: center;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--mute);
}
.om2gle-card.is-you .om2gle-card-caption { color: var(--gold-soft); }

.om2gle-pulse {
	display: inline-block;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--rose);
	margin-right: 6px;
	vertical-align: 1px;
	animation: om2-pulse 1.4s ease-in-out infinite;
}
@keyframes om2-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: .3; transform: scale(0.7); }
}

/* Readouts under each card */
.om2gle-readout {
	display: flex;
	gap: 40px;
	margin: 0;
	padding: 0;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.08em;
}
.om2gle-readout-row {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
.om2gle-readout dt {
	text-transform: uppercase;
	color: var(--mute);
	letter-spacing: 0.18em;
	font-size: 10px;
}
.om2gle-readout dd {
	margin: 0;
	color: var(--ink);
	font-weight: 500;
}
.om2gle-readout dd.is-muted { color: var(--mute); }
.om2gle-readout-unit { color: var(--mute); margin-left: 2px; }

/* VS column ——----------------------------------------------------------- */
.om2gle-vs {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 0 36px;
	color: var(--mute);
}
.om2gle-vs-rule {
	width: 1px;
	height: 48px;
	background: var(--rule-2);
}
.om2gle-vs-word {
	font-family: var(--serif);
	font-style: italic;
	font-size: 52px;
	line-height: 1;
	color: var(--ink);
	letter-spacing: -0.02em;
}
.om2gle-vs-tag {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--mute);
}

@media (max-width: 900px) {
	.om2gle-arena {
		grid-template-columns: 1fr;
		gap: 22px;
	}
	.om2gle-card { width: 260px; height: 340px; }
	.om2gle-glyph-letter { font-size: 180px; }
	.om2gle-glyph-octave { font-size: 64px; margin-top: 20px; }
	.om2gle-vs { padding: 0; flex-direction: row; gap: 14px; }
	.om2gle-vs-rule { width: 64px; height: 1px; }
	.om2gle-vs-word { font-size: 36px; }
}

/* ============================================================================
   Control band — single horizontal row holding the note picker, the central
   sing-button stack, and the mode dial. Sits directly below the arena so
   the whole stage fits one viewport.
============================================================================ */
.om2gle-controls {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 32px;
	width: 100%;
	max-width: 1080px;
}
.om2gle-controls-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.om2gle-controls-col.is-left  { justify-self: end; }
.om2gle-controls-col.is-right { justify-self: start; }
.om2gle-controls-col.is-center { justify-self: center; }

@media (max-width: 900px) {
	.om2gle-controls {
		/* minmax(0, 1fr) — without this the implicit `auto` minimum lets
		   any wide descendant (notes button intrinsic min-content, mode
		   sub labels) blow the column past the viewport. */
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}
	.om2gle-controls-col.is-left,
	.om2gle-controls-col.is-right { justify-self: center; }
}

/* ============================================================================
   Note picker — small horizontal strip. The active button mirrors the
   P1 card's gold glow.
============================================================================ */
.om2gle-notes {
	display: inline-flex;
	gap: 6px;
	padding: 5px;
	border: 1px solid var(--rule-2);
	background: #0e0b08;
}
.om2gle-note {
	appearance: none;
	background: transparent;
	border: 1px solid transparent;
	color: var(--ink-2);
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 8px 14px;
	cursor: pointer;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-width: 70px;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.om2gle-note:hover { color: var(--ink); }
.om2gle-note.is-active {
	background: rgba(229, 165, 66, 0.08);
	border-color: var(--gold);
	color: var(--ink);
}
.om2gle-note.is-active.is-pick-snap { animation: om2-pick-snap .55s ease both; }
@keyframes om2-pick-snap {
	0%   { transform: scale(1); }
	35%  { transform: scale(1.08); }
	100% { transform: scale(1); }
}
.om2gle-note-glyph {
	font-family: var(--serif);
	font-size: 22px;
	color: var(--ink);
	letter-spacing: -0.01em;
	display: inline-flex;
	align-items: flex-start;
	gap: 2px;
	line-height: 1;
}
.om2gle-note-letter { font-size: 22px; }
.om2gle-note-octave {
	font-size: 12px;
	font-style: italic;
	color: var(--gold);
	margin-top: 2px;
}
.om2gle-note-status,
.om2gle-note-wave,
.om2gle-note-tune { display: none; }
.om2gle-note-foot {
	display: inline-flex;
	gap: 6px;
	font-size: 10px;
	color: var(--mute);
	letter-spacing: 0.18em;
}
.om2gle-note-hz { color: inherit; }
.om2gle-note.is-active .om2gle-note-hz { color: var(--gold-soft); }

/* ============================================================================
   Scout strip — "Stage is open. Pick a note and sing." etc.
============================================================================ */
.om2gle-scout {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--mute);
}
.om2gle-scout-dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--gold);
	box-shadow: 0 0 0 3px rgba(229, 165, 66, 0.18);
	animation: om2-blink 2.4s ease-in-out infinite;
}
.om2gle-scout[data-state="searching"] .om2gle-scout-dot,
.om2gle-scout[data-mode="friend"] .om2gle-scout-dot {
	background: var(--rose);
	box-shadow: 0 0 0 3px var(--rose-soft);
}
.om2gle-scout-text { color: var(--ink-2); }

/* ============================================================================
   Mode dial (Anyone / A friend)
============================================================================ */
.om2gle-mode {
	display: inline-flex;
	gap: 0;
	border: 1px solid var(--rule-2);
	background: #0e0b08;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02) inset;
}
.om2gle-mode-opt {
	appearance: none;
	background: transparent;
	border: none;
	color: var(--ink-2);
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 11px 18px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease;
	border-right: 1px solid var(--rule-2);
	min-width: 118px;
	position: relative;
}
.om2gle-mode-opt:last-child { border-right: none; }
.om2gle-mode-opt:hover:not(.is-active) {
	color: var(--ink);
	background: rgba(229, 165, 66, 0.05);
}
.om2gle-mode-opt:active { transform: scale(0.985); }
.om2gle-mode-opt:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
	z-index: 1;
}
/* Active pill: solid gold gradient + ink-dark text so the switch is *obvious*.
   The old 8% tint was so subtle that clicking felt like nothing happened. */
.om2gle-mode-opt.is-active {
	background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep, #c98a2e) 100%);
	color: #0b0907;
	box-shadow:
		inset 0 1px 0 rgba(255, 240, 200, 0.45),
		inset 0 -1px 0 rgba(0, 0, 0, 0.22),
		0 0 18px -4px rgba(229, 165, 66, 0.55);
	z-index: 1;
}
.om2gle-mode-opt-label { color: inherit; font-weight: 700; }
.om2gle-mode-opt-sub {
	font-size: 9px;
	letter-spacing: 0.12em;
	text-transform: none;
	color: var(--mute);
}
.om2gle-mode-opt.is-active .om2gle-mode-opt-sub { color: rgba(11, 9, 7, 0.78); }

/* Click ping — radial flash from the pill center so the click registers as
   local feedback even when the real state change manifests on the far side
   of the screen (P2 arena card transformation). JS adds the class, removes
   it after the animation lands so the next click can replay. */
.om2gle-mode-opt.is-just-clicked::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: radial-gradient(circle at center, rgba(229, 165, 66, 0.55) 0%, rgba(229, 165, 66, 0) 70%);
	animation: om2-mode-ping 460ms cubic-bezier(.2,.8,.25,1);
}
@keyframes om2-mode-ping {
	0%   { opacity: 0;   transform: scale(0.6); }
	35%  { opacity: 0.9; transform: scale(1);   }
	100% { opacity: 0;   transform: scale(1.25); }
}

/* ============================================================================
   Friend share panel
============================================================================ */
.om2gle-friend-panel {
	width: 100%;
	max-width: 1080px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding-top: 10px;
	border-top: 1px solid var(--rule);
}
.om2gle-friend-panel > .om2gle-share-box { flex: 1 1 360px; min-width: 280px; }
.om2gle-friend-panel > .om2gle-friend-handles { flex: 0 0 auto; }
.om2gle-friend-panel[hidden] { display: none; }

.om2gle-duel-channel {
	font-family: var(--mono);
	color: var(--ink);
	font-weight: 500;
	letter-spacing: 0.06em;
}

.om2gle-share-box,
.om2gle-link {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: stretch;
	gap: 0;
	border: 1px solid var(--rule-2);
	background: #0e0b08;
}
.om2gle-share-url,
.om2gle-link-url {
	border: none;
	background: transparent;
	padding: 12px 16px;
	font-family: var(--mono);
	font-size: 13px;
	color: var(--ink-2);
	letter-spacing: 0.01em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	outline: none;
}
.om2gle-share-url::placeholder { color: var(--mute); }

.om2gle-share-box .om2gle-btn,
.om2gle-link button {
	border: none;
	border-left: 1px solid var(--rule-2);
	background: transparent;
	color: var(--ink);
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 0 20px;
	cursor: pointer;
	border-radius: 0;
}
.om2gle-share-box .om2gle-btn-primary {
	background: transparent;
	color: var(--ink);
	box-shadow: none;
	font-weight: 500;
}
.om2gle-share-box .om2gle-btn-primary:hover,
.om2gle-link button:hover {
	background: var(--gold);
	color: #0b0907;
}

.om2gle-friend-handles {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mute);
}
.om2gle-side-eyebrow {
	color: var(--gold);
	letter-spacing: 0.22em;
}
.om2gle-duel-handle {
	color: var(--ink);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: none;
}
.om2gle-duel-handle.is-pending { color: var(--mute); }
.om2gle-duel-handle.is-match-glow {
	color: var(--gold);
	animation: om2-match-glow 1.6s ease both;
}
@keyframes om2-match-glow {
	0%   { text-shadow: 0 0 0 transparent; }
	30%  { text-shadow: 0 0 22px var(--gold-glow); }
	100% { text-shadow: 0 0 0 transparent; }
}
.om2gle-versus-mini {
	font-family: var(--serif);
	font-style: italic;
	font-size: 18px;
	color: var(--ink-2);
}

.om2gle-friend-leave {
	align-self: center;
}

/* ============================================================================
   Privacy toggle
============================================================================ */
.om2gle-privacy {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--mute);
	cursor: pointer;
	user-select: none;
}
.om2gle-privacy-input {
	position: absolute;
	opacity: 0;
	width: 0; height: 0;
	pointer-events: none;
}
.om2gle-privacy-mark {
	width: 12px; height: 12px;
	border: 1px solid var(--mute);
	display: inline-block;
	position: relative;
}
.om2gle-privacy-input:checked + .om2gle-privacy-mark {
	background: var(--gold);
	border-color: var(--gold);
}
.om2gle-privacy-input:checked + .om2gle-privacy-mark::after {
	content: "";
	position: absolute;
	inset: 2px;
	background: #0b0907;
}
.om2gle-privacy-text { color: var(--ink-2); }

/* ============================================================================
   Stage secondary row (roster link / util)
============================================================================ */
.om2gle-stage-secondary {
	display: flex;
	gap: 22px;
	align-items: center;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--mute);
	padding-top: 4px;
}
.om2gle-stage-secondary .om2gle-btn {
	padding: 8px 14px;
	font-size: 10px;
}

/* Home pins (small badges) — used by app.js to surface unseen takes. */
.om2gle-home-pins {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
}
.om2gle-home-pins[hidden] { display: none; }
.om2gle-home-pin {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-2);
	padding: 6px 10px;
	border: 1px solid var(--rule-2);
	background: #0e0b08;
	cursor: pointer;
}
.om2gle-home-pin:hover { border-color: var(--gold); color: var(--gold); }

/* Take pin — rendered by app.js renderHomePins(). Same vibe as home-pin
   but composes note · PB · faced-count · W/L into a single chip. */
.om2gle-take-pin {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-2);
	padding: 6px 10px;
	border: 1px solid var(--rule-2);
	background: #0e0b08;
	cursor: pointer;
	border-radius: 0;
}
.om2gle-take-pin:hover { border-color: var(--gold); color: var(--gold); }
.om2gle-take-pin-note { color: var(--ink); }
.om2gle-take-pin-pb { color: var(--gold-pale); }
.om2gle-take-pin-faced { color: var(--mute); }
.om2gle-take-pin-sep { color: var(--mute-2); }
.om2gle-take-pin-wl { display: inline-flex; gap: 4px; align-items: center; }
.om2gle-take-pin-w { color: var(--gold); }
.om2gle-take-pin-l { color: var(--ink-2); }

/* ============================================================================
   Login wall — hero treatment with the same arena vibe.
============================================================================ */
.om2gle-hero-orb {
	width: 280px;
	height: 280px;
	position: relative;
	display: grid;
	place-items: center;
	border: 1px solid var(--gold);
	background: linear-gradient(180deg, #15110c 0%, #0d0a07 100%);
	box-shadow:
		0 0 0 1px var(--gold) inset,
		0 0 60px -10px var(--gold-glow),
		0 24px 80px -30px var(--gold-glow);
}
.om2gle-hero-orb::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 40%, var(--gold-glow), transparent 60%);
	pointer-events: none;
}
.om2gle-orb-canvas { display: none; }
.om2gle-orb-ring { display: none; }
.om2gle-orb-glyph {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
.om2gle-orb-readout {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
.om2gle-orb-readout-note {
	font-family: var(--serif);
	font-size: 132px;
	line-height: 0.85;
	color: var(--ink);
	letter-spacing: -0.03em;
}
.om2gle-orb-readout-hz {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--gold-soft);
}

.om2gle-hero-orb.om2gle-hero-orb-sm {
	width: 220px;
	height: 220px;
}
.om2gle-hero-orb-sm .om2gle-orb-readout-note { font-size: 96px; }

.om2gle-hero-orb.is-tune { animation: om2-pick-snap .55s ease both; }

/* ============================================================================
   Recording — countdown screen
============================================================================ */
.om2gle-screen-record .om2gle-record-stage {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 32px;
	position: relative;
}

.om2gle-record-status {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--gold);
}
.om2gle-mic-dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--gold);
	box-shadow: 0 0 0 4px rgba(229, 165, 66, 0.18);
	animation: om2-blink 1s ease-in-out infinite;
}

.om2gle-countdown {
	font-family: var(--serif);
	font-size: clamp(140px, 22vw, 280px);
	line-height: 0.85;
	color: var(--ink);
	letter-spacing: -0.04em;
	transition: color .2s ease, transform .2s ease;
}
.om2gle-countdown.is-small {
	font-size: clamp(80px, 12vw, 160px);
	color: var(--gold-soft);
}
.om2gle-countdown.is-sing {
	color: var(--gold);
	font-style: italic;
	animation: om2-pick-snap .6s ease both;
}

.om2gle-live-spectrum {
	width: min(680px, 90vw);
	height: 96px;
	display: block;
	border: 1px solid var(--rule);
	background: #0e0b08;
}

/* ============================================================================
   Recording — cinematic cue overlay ("Do your best YEAHHHHHH")
   Shown only during the LISTEN/TONE beat, dismissed at SING.
============================================================================ */
.om2gle-cue-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	z-index: 6;
	opacity: 0;
	visibility: hidden;
	transition: opacity .45s cubic-bezier(.2,.7,.2,1), visibility 0s linear .45s;
}
.om2gle-cue-overlay.is-show {
	opacity: 1;
	visibility: visible;
	transition: opacity .45s cubic-bezier(.2,.7,.2,1), visibility 0s linear 0s;
}
.om2gle-cue-overlay.is-hide {
	opacity: 0;
	visibility: hidden;
	transition: opacity .32s ease, visibility 0s linear .32s;
}

.om2gle-cue-scrim {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at center, rgba(229, 165, 66, 0.10) 0%, rgba(8, 6, 4, 0.0) 55%),
		radial-gradient(ellipse at center, rgba(8, 6, 4, 0.78) 0%, rgba(8, 6, 4, 0.35) 60%, rgba(8, 6, 4, 0.0) 90%);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.om2gle-cue-card {
	position: relative;
	text-align: center;
	transform: scale(0.94);
	opacity: 0;
	transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .45s ease;
	padding: 0 24px;
}
.om2gle-cue-overlay.is-show .om2gle-cue-card {
	transform: scale(1);
	opacity: 1;
}

.om2gle-cue-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.42em;
	color: var(--gold);
	text-transform: uppercase;
	margin-bottom: 18px;
	opacity: 0.92;
}
.om2gle-cue-bar {
	display: inline-block;
	width: 28px;
	height: 1px;
	background: var(--gold);
	box-shadow: 0 0 8px rgba(229, 165, 66, 0.5);
}

.om2gle-cue-line {
	font-family: var(--serif);
	font-size: clamp(38px, 6.4vw, 80px);
	line-height: 1.02;
	letter-spacing: -0.01em;
	color: var(--ink);
	filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.55));
}
.om2gle-cue-pre {
	display: block;
	font-style: italic;
	color: var(--ink);
	opacity: 0.94;
}
.om2gle-cue-yeah {
	display: inline-block;
	margin-top: 6px;
	font-weight: 700;
	font-style: italic;
	background: linear-gradient(180deg, #FFE7B0 0%, #FFB547 48%, #A87B3A 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: 0 0 28px rgba(229, 165, 66, 0.35);
}
.om2gle-cue-overlay.is-show .om2gle-cue-yeah {
	animation: om2-cue-yeah 2.2s cubic-bezier(.2,.7,.2,1) both;
}

@keyframes om2-cue-yeah {
	0%   { letter-spacing: -0.04em; transform: translateY(6px); opacity: 0; filter: blur(6px); }
	16%  { letter-spacing:  0.00em; transform: translateY(0);    opacity: 1; filter: blur(0); }
	60%  { letter-spacing:  0.14em; }
	100% { letter-spacing:  0.28em; transform: translateY(0);    opacity: 1; filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
	.om2gle-cue-overlay,
	.om2gle-cue-card,
	.om2gle-cue-yeah {
		transition: opacity .2s ease;
		animation: none;
	}
}

/* ============================================================================
   Roster — list of opponents to challenge
============================================================================ */
.om2gle-roster-header {
	width: 100%;
	max-width: 720px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
}
.om2gle-roster-sub {
	font-family: var(--sans);
	font-size: 14px;
	color: var(--ink-2);
	margin-top: 4px;
}

.om2gle-roster-filter {
	display: inline-flex;
	border: 1px solid var(--rule-2);
	background: #0e0b08;
}
.om2gle-roster-filter button {
	appearance: none;
	background: transparent;
	border: none;
	border-right: 1px solid var(--rule-2);
	color: var(--ink-2);
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 10px 16px;
	cursor: pointer;
}
.om2gle-roster-filter button:last-child { border-right: none; }
.om2gle-roster-filter button.is-active {
	background: rgba(229, 165, 66, 0.08);
	color: var(--gold);
}

.om2gle-roster-list {
	width: 100%;
	max-width: 720px;
	display: flex;
	flex-direction: column;
	gap: 0;
	border: 1px solid var(--rule-2);
	background: #0e0b08;
	max-height: 50vh;
	overflow-y: auto;
}
.om2gle-roster-row {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	gap: 16px;
	align-items: center;
	padding: 14px 18px;
	border-bottom: 1px solid var(--rule);
	font-family: var(--mono);
	font-size: 12px;
	color: var(--ink-2);
	letter-spacing: 0.06em;
}
.om2gle-roster-row:last-child { border-bottom: none; }
.om2gle-roster-row b { color: var(--ink); font-weight: 500; }
.om2gle-challenge-btn {
	appearance: none;
	background: transparent;
	border: 1px solid var(--rule-2);
	color: var(--ink);
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 8px 14px;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.om2gle-challenge-btn:hover {
	background: var(--gold);
	color: #0b0907;
	border-color: var(--gold);
}

/* ============================================================================
   Theater — face-off reveal: two cards + score bars.
============================================================================ */
.om2gle-theater {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 28px;
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
}

.om2gle-theater-status {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--gold);
}
.om2gle-dot-anim {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--gold);
	box-shadow: 0 0 0 4px rgba(229, 165, 66, 0.18);
	animation: om2-blink 1.2s ease-in-out infinite;
}

.om2gle-versus {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 0;
	align-items: stretch;
	width: 100%;
}
.om2gle-side {
	position: relative;
	background: linear-gradient(180deg, #15110c 0%, #0d0a07 100%);
	border: 1px solid var(--rule-2);
	padding: 26px 24px 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: center;
	min-height: 360px;
}
.om2gle-side .om2gle-side-eyebrow {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--mute);
}
#om2gle-side-you.om2gle-side .om2gle-side-eyebrow,
.om2gle-side-you .om2gle-side-eyebrow { color: var(--gold); }
#om2gle-side-opp .om2gle-side-eyebrow { color: var(--rose); }

.om2gle-side-handle {
	font-family: var(--serif);
	font-size: 28px;
	line-height: 1;
	color: var(--ink);
	letter-spacing: -0.01em;
}
.om2gle-side-handle.is-match-glow { color: var(--gold); animation: om2-match-glow 1.6s ease both; }

/* Anonymous chip — sits next to the handle for source='anon' opponents.
   Same visual as the legacy "audio private" treatment so the audience
   reads it identically to the retired synth/ghost UX. */
.om2gle-anon-chip {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 7px;
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--ink-dim, #8a8fa3);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 4px;
	vertical-align: middle;
	text-transform: uppercase;
}
.om2gle-roster-handle .om2gle-anon-chip {
	font-size: 9px;
	padding: 1px 5px;
	margin-left: 6px;
}

/* M2 Academy Method ownership badge — auto-detected via
   Om2gle_Membership::owns_method() (WC product history, active tier with
   Method course, or direct academy_enrolled). Warm-gold to match the
   primary chrome; the soft glow makes it pop next to the handle without
   competing with the magenta/cyan opponent-side accents. Tooltip carries
   the FOMO copy on hover. Sits inline next to every handle render — header,
   theater you/opp, news rows, roster rows. */
.om2gle-m2-badge {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 7px;
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--gold);
	background: linear-gradient(180deg, rgba(229,165,66,0.18) 0%, rgba(201,138,44,0.10) 100%);
	border: 1px solid rgba(229,165,66,0.55);
	border-radius: 4px;
	vertical-align: middle;
	text-transform: uppercase;
	box-shadow: 0 0 12px var(--gold-glow), inset 0 0 6px rgba(244,209,145,0.10);
	text-shadow: 0 0 8px rgba(229,165,66,0.55);
	cursor: help;
	user-select: none;
	white-space: nowrap;
}
/* Slightly smaller in the dense roster + news list contexts. */
.om2gle-roster-handle .om2gle-m2-badge,
.om2gle-news-handle .om2gle-m2-badge {
	font-size: 9px;
	padding: 1px 5px;
	margin-left: 6px;
	letter-spacing: 0.08em;
}
/* Header pill: the handle row is already tight, so trim padding + drop the
   glow to keep the chrome calm. */
.om2gle-handle .om2gle-m2-badge {
	font-size: 9px;
	padding: 1px 5px;
	margin-left: 6px;
	box-shadow: none;
	text-shadow: none;
}

.om2gle-side-score-row {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	font-family: var(--serif);
}
.om2gle-side-score-value {
	font-size: 88px;
	line-height: 0.85;
	color: var(--ink);
	letter-spacing: -0.02em;
}
.om2gle-side-score-denom {
	font-size: 22px;
	color: var(--mute);
}

#om2gle-side-you.is-winner .om2gle-side-score-value,
#om2gle-side-opp.is-winner .om2gle-side-score-value { color: var(--gold); }

.om2gle-side-bars {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 4px;
}
.om2gle-bar-row {
	display: grid;
	grid-template-columns: 90px 1fr 36px;
	gap: 12px;
	align-items: center;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mute);
}
.om2gle-bar-cat { color: var(--ink-2); }
.om2gle-bar-track {
	height: 4px;
	background: var(--rule);
	position: relative;
	overflow: hidden;
}
.om2gle-bar-fill {
	position: absolute;
	left: 0; top: 0;
	height: 100%;
	width: 0;
	background: var(--ink-2);
	transition: width .8s cubic-bezier(.2,.7,.3,1);
}
.om2gle-bar-val { color: var(--ink); text-align: right; }

.om2gle-bar-row.is-bar-win .om2gle-bar-fill { background: var(--gold); }
.om2gle-bar-row.is-bar-win .om2gle-bar-val  { color: var(--gold); }
.om2gle-bar-row.is-bar-loss .om2gle-bar-fill { background: var(--rose); }
.om2gle-bar-row.is-bar-loss .om2gle-bar-val  { color: var(--rose); }
.om2gle-bar-row.is-bar-tie .om2gle-bar-fill { background: var(--ink-2); }

.om2gle-audio-row {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 6px;
}
.om2gle-play-btn {
	appearance: none;
	background: transparent;
	border: 1px solid var(--rule-2);
	color: var(--ink);
	width: 32px; height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 12px;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.om2gle-play-btn:hover {
	background: var(--gold);
	color: #0b0907;
	border-color: var(--gold);
}
.om2gle-play-btn.is-playing {
	background: var(--gold);
	color: #0b0907;
	border-color: var(--gold);
}
.om2gle-play-btn.is-disabled {
	opacity: .35;
	pointer-events: none;
}
.om2gle-audio-wave {
	width: 80px;
	height: 16px;
	background: repeating-linear-gradient(
		90deg,
		var(--rule) 0 2px,
		transparent 2px 6px
	);
}
.om2gle-audio-meta {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	color: var(--mute);
}
.om2gle-audio-row.is-audio-private .om2gle-audio-wave {
	opacity: .25;
	background: repeating-linear-gradient(
		135deg,
		transparent 0 6px,
		var(--rule) 6px 8px
	);
}
.om2gle-audio-meta.is-audio-private { color: var(--mute-2); }

.om2gle-outcome-label {
	margin-top: 6px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--gold);
	padding: 6px 12px;
	border: 1px solid var(--gold);
}
.om2gle-outcome-label.is-loss { color: var(--rose); border-color: var(--rose); }
.om2gle-outcome-label.is-tie  { color: var(--ink-2); border-color: var(--rule-2); }

/* Versus middle column */
.om2gle-versus-divider {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0 24px;
	color: var(--mute);
	border-top: 1px solid var(--rule-2);
	border-bottom: 1px solid var(--rule-2);
	background: linear-gradient(180deg, #100c08 0%, #0a0805 100%);
}
.om2gle-versus-arc { display: none; }
.om2gle-versus-orb {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 90px;
	height: 90px;
}
.om2gle-versus-orb-core {
	font-family: var(--serif);
	font-style: italic;
	font-size: 56px;
	line-height: 1;
	color: var(--ink);
	letter-spacing: -0.02em;
}
.om2gle-versus-orb-ring,
.om2gle-versus-orb-ring-2 { display: none; }

#om2gle-side-opp.om2gle-side-shimmer .om2gle-side-handle::after {
	content: "";
}
.om2gle-side.om2gle-side-shimmer {
	border-style: dashed;
}
.om2gle-side.om2gle-side-shimmer::after {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		45deg,
		transparent 0 14px,
		rgba(243, 233, 212, 0.02) 14px 15px
	);
	pointer-events: none;
}

@media (max-width: 900px) {
	.om2gle-versus {
		grid-template-columns: 1fr;
	}
	.om2gle-versus-divider {
		border-left: 1px solid var(--rule-2);
		border-right: 1px solid var(--rule-2);
		padding: 16px;
	}
}

.om2gle-theater-actions {
	display: inline-flex;
	gap: 14px;
}
.om2gle-autonext {
	display: inline-flex;
	gap: 14px;
	align-items: center;
	animation: om2-autonext-rise 360ms cubic-bezier(.2,.7,.3,1) both;
}
.om2gle-autonext[hidden] { display: none; }
@keyframes om2-autonext-rise {
	0%   { opacity: 0; transform: translateY(10px); }
	100% { opacity: 1; transform: translateY(0); }
}
.om2gle-autonext-go {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.om2gle-autonext-countdown {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	padding-left: 8px;
	border-left: 1px solid rgba(11, 9, 7, 0.18);
	color: rgba(11, 9, 7, 0.55);
	transition: color 180ms ease;
}
/* Draining ring around the Next-now button. Stroke values are painted
   imperatively (paintAutoNextRing) so pause is just "stop updating" —
   no animation-play-state plumbing needed. */
.om2gle-autonext-ring {
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
	transform: rotate(-90deg);
	overflow: visible;
}
.om2gle-autonext-ring circle {
	fill: none;
	stroke-width: 3;
	stroke-linecap: round;
}
.om2gle-autonext-ring-bg {
	stroke: rgba(11, 9, 7, 0.18);
}
.om2gle-autonext-ring-fg {
	stroke: rgba(11, 9, 7, 0.78);
	transition: stroke-dashoffset 950ms linear, stroke 220ms ease;
}
.om2gle-autonext-hint {
	display: none;  /* desktop hover-only — see hover rule below */
	font-family: var(--mono);
	font-size: 9px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(11, 9, 7, 0.5);
	padding-left: 10px;
	border-left: 1px solid rgba(11, 9, 7, 0.18);
}
@media (hover: hover) and (pointer: fine) {
	.om2gle-autonext:hover .om2gle-autonext-hint,
	.om2gle-autonext.is-paused .om2gle-autonext-hint {
		display: inline;
	}
}
/* Paused: ring goes muted, label flips (via JS), countdown number softens.
   Adds a subtle pulse so the user reads "held, not stuck." */
.om2gle-autonext.is-paused .om2gle-autonext-ring-fg {
	stroke: rgba(11, 9, 7, 0.38);
	animation: om2-autonext-pulse 1400ms ease-in-out infinite;
}
.om2gle-autonext.is-paused .om2gle-autonext-countdown {
	color: rgba(11, 9, 7, 0.35);
}
@keyframes om2-autonext-pulse {
	0%, 100% { opacity: 0.45; }
	50%      { opacity: 1; }
}

/* ============================================================================
   Recheck (octave check)
============================================================================ */
.om2gle-recheck-title {
	font-family: var(--serif);
	font-size: 34px;
	line-height: 1.05;
	color: var(--ink);
	margin: 0;
}
.om2gle-recheck-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	width: 100%;
	max-width: 520px;
}
.om2gle-recheck-cell {
	border: 1px solid var(--rule-2);
	background: #0e0b08;
	padding: 22px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.om2gle-recheck-cell-eyebrow {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--mute);
}
.om2gle-recheck-cell-value {
	font-family: var(--serif);
	font-size: 64px;
	line-height: 0.85;
	color: var(--ink);
}
.om2gle-recheck-cell-value.is-target { color: var(--gold); }
.om2gle-recheck-lede { color: var(--ink-2); }
.om2gle-actions {
	display: inline-flex;
	gap: 14px;
	align-items: center;
}

/* ============================================================================
   Duel boot spinner
============================================================================ */
.om2gle-duel-spinner {
	width: 36px; height: 36px;
	border: 2px solid var(--rule-2);
	border-top-color: var(--gold);
	border-radius: 50%;
	animation: om2-spin .9s linear infinite;
}
@keyframes om2-spin {
	to { transform: rotate(360deg); }
}

/* ============================================================================
   News sheet (recent battles)
============================================================================ */
.om2gle-sheet-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.65);
	z-index: 200;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 80px 22px 22px;
}
.om2gle-sheet-backdrop[hidden] { display: none !important; }
.om2gle-sheet {
	background: var(--bg-elev);
	border: 1px solid var(--rule-2);
	width: 100%;
	max-width: 520px;
	max-height: 70vh;
	display: flex;
	flex-direction: column;
}
.om2gle-sheet-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 22px;
	border-bottom: 1px solid var(--rule);
}
.om2gle-sheet-title {
	font-family: var(--serif);
	font-size: 22px;
	color: var(--ink);
}
.om2gle-sheet-close {
	appearance: none;
	background: transparent;
	border: none;
	color: var(--mute);
	font-size: 16px;
	cursor: pointer;
	padding: 4px;
}
.om2gle-sheet-close:hover { color: var(--ink); }
.om2gle-news-list { overflow-y: auto; flex: 1; }

.om2gle-news-row {
	padding: 14px 22px;
	border-bottom: 1px solid var(--rule);
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.om2gle-news-row:last-child { border-bottom: none; }
.om2gle-news-row-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.om2gle-news-handle {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--ink);
	letter-spacing: 0.04em;
}
.om2gle-news-outcome {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	padding: 4px 8px;
	border: 1px solid var(--rule-2);
}
.om2gle-news-outcome.is-win  { color: var(--gold); border-color: var(--gold); }
.om2gle-news-outcome.is-loss { color: var(--rose); border-color: var(--rose); }
.om2gle-news-outcome.is-tie  { color: var(--ink-2); }
.om2gle-news-scoreline {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--ink-2);
}
.om2gle-news-scoreline .om2gle-v { color: var(--mute); margin: 0 6px; }
.om2gle-news-when {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	color: var(--mute);
}
.om2gle-news-empty {
	padding: 36px 22px;
	text-align: center;
	color: var(--mute);
}

/* ============================================================================
   Toasts
============================================================================ */
.om2gle-toast {
	position: fixed;
	bottom: 32px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--bg-elev);
	border: 1px solid var(--rule-2);
	color: var(--ink);
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	padding: 14px 22px;
	z-index: 300;
	animation: om2-toast-in .25s ease both;
}
.om2gle-toast.is-error {
	border-color: var(--coral);
	color: var(--coral);
}
/* Info variant — used for longer disclosures like the "how it stays
   anonymous" chip on Card A. Wider, wrappable, sentence-case body and a
   subtle gold accent so it reads as friendly disclosure rather than an
   error. Pairs with .is-dismissible (tap-to-close cursor + tap hint). */
.om2gle-toast.is-info {
	max-width: min(440px, calc(100vw - 32px));
	padding: 14px 18px;
	border-color: var(--gold);
	color: var(--ink);
	font-family: var(--sans, inherit);
	font-size: 13.5px;
	line-height: 1.5;
	letter-spacing: 0.01em;
	text-transform: none;
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--gold-glow);
	border-radius: 10px;
	text-align: left;
}
.om2gle-toast.is-dismissible {
	cursor: pointer;
}
.om2gle-toast.is-info.is-dismissible::after {
	content: 'tap to dismiss';
	display: block;
	margin-top: 8px;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold-pale);
	opacity: 0.7;
}
@keyframes om2-toast-in {
	from { opacity: 0; transform: translate(-50%, 12px); }
	to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ============================================================================
   Rehydrate banner — surfaces async-host return state. On boot, if a stored
   room has moved to `complete` (or sits in `host_pending` waiting on a friend)
   we float a banner over the stage with the right CTA. Two variants:
   `is-complete` (warm-gold, result-ready) and `is-pending` (subdued, still
   awaiting the friend).
============================================================================ */
.om2gle-rehydrate-banner {
	position: fixed;
	top: 18px;
	left: 50%;
	transform: translateX(-50%);
	max-width: min(720px, calc(100vw - 24px));
	width: max-content;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	background: var(--bg-elev);
	border: 1px solid var(--rule-2);
	border-radius: 999px;
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
	color: var(--ink);
	font-family: var(--mono);
	font-size: 12.5px;
	letter-spacing: 0.04em;
	z-index: 250;
	animation: om2-rehydrate-in .35s ease both;
}
.om2gle-rehydrate-banner.is-complete {
	border-color: var(--gold);
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--gold-glow);
}
.om2gle-rehydrate-banner-text { flex: 1 1 auto; min-width: 0; line-height: 1.45; }
.om2gle-rehydrate-banner-text b { color: var(--gold-pale); font-weight: 600; }
.om2gle-rehydrate-banner-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--gold);
	flex: 0 0 auto;
	box-shadow: 0 0 0 0 var(--gold-glow);
}
.om2gle-rehydrate-banner-dot.is-pulse {
	animation: om2-rehydrate-pulse 1.8s ease-in-out infinite;
}
.om2gle-rehydrate-banner .om2gle-btn { padding: 8px 14px; font-size: 11.5px; }
.om2gle-rehydrate-banner-close {
	background: transparent;
	border: 0;
	color: var(--ink-2);
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	padding: 6px 8px;
	border-radius: 999px;
	transition: background .15s ease, color .15s ease;
}
.om2gle-rehydrate-banner-close:hover { background: rgba(243, 233, 212, 0.06); color: var(--ink); }
@keyframes om2-rehydrate-in {
	from { opacity: 0; transform: translate(-50%, -10px); }
	to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes om2-rehydrate-pulse {
	0%, 100% { box-shadow: 0 0 0 0 var(--gold-glow); }
	50%      { box-shadow: 0 0 0 8px rgba(229, 165, 66, 0); }
}
@media (max-width: 640px) {
	.om2gle-rehydrate-banner {
		top: 8px;
		flex-wrap: wrap;
		border-radius: 14px;
		padding: 10px 12px;
		gap: 8px;
	}
	.om2gle-rehydrate-banner-text { flex: 1 1 100%; font-size: 12px; }
}

/* ============================================================================
   Footer/invite — bottom of the stage. Used in friend mode + always for util.
============================================================================ */
.om2gle-footer {
	width: 100%;
	max-width: 760px;
	margin: 28px auto 0;
	padding-top: 18px;
	border-top: 1px solid var(--rule);
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.om2gle-footer-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--mute);
}
.om2gle-footer-head b { color: var(--ink); font-weight: 500; }

.om2gle-alt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--mute);
}
.om2gle-alt .strand {
	flex: 1;
	height: 1px;
	background: var(--rule);
	margin: 0 20px;
}
.om2gle-alt a {
	color: var(--ink-2);
	text-decoration: none;
	border-bottom: 1px dashed var(--mute-2);
	padding-bottom: 2px;
	transition: color .15s ease, border-color .15s ease;
}
.om2gle-alt a:hover { color: var(--gold); border-color: var(--gold); }

.om2gle-util {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--mute);
	flex-wrap: wrap;
}
.om2gle-util a {
	color: var(--ink-2);
	text-decoration: none;
	cursor: pointer;
	border-bottom: 1px dashed var(--mute-2);
	padding-bottom: 2px;
	transition: color .15s ease, border-color .15s ease;
}
.om2gle-util a:hover {
	color: var(--gold);
	border-color: var(--gold);
}
.om2gle-util .sep { color: var(--mute-2); }
.om2gle-util .om2gle-privacy { font-size: inherit; }

/* ============================================================================
   Mascot FAB — small, monochrome circle bottom-right.
============================================================================ */
.om2gle-mascot-fab {
	position: fixed;
	right: 22px;
	bottom: 22px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid var(--gold);
	background: var(--bg-elev);
	color: var(--gold);
	font-size: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 90;
	box-shadow:
		0 0 0 1px var(--gold) inset,
		0 14px 36px -16px var(--gold-glow);
	transition: transform .15s ease;
}
.om2gle-mascot-fab[hidden] { display: none !important; }
.om2gle-mascot-fab:hover { transform: translateY(-1px); }

/* ============================================================================
   ████ MOBILE / PHONE-NATIVE PASS ████
   Reorganizes the stage for portrait + thumb-zone, anchors Sing in a fixed
   dock, flips the theater to a vertical face-off. Selectors use `.om2gle-app`
   prefix or composite forms to beat the desktop variant rules (the
   appended-rule cascade trap — base classes do NOT silently win over earlier
   compound-class variants once we drop into a media query of equal specificity).
============================================================================ */
@media (max-width: 720px) {

	/* ---- container + safe area ---- */
	html.om2gle-fullscreen,
	body.om2gle-fullscreen {
		height: auto;
		min-height: 100%;
		overflow-y: auto;
		-webkit-text-size-adjust: 100%;
	}
	.om2gle-app {
		padding: 14px 14px 0;
		gap: 14px;
		min-height: 100vh;
		min-height: 100dvh;
		height: auto;
	}

	/* Kill the cursor spotlight on touch — paint cost, no value */
	.om2gle-spotlight { display: none; }

	/* ---- header (compact) ---- */
	.om2gle-header {
		grid-template-columns: 1fr auto;
		font-size: 11px;
	}
	.om2gle-brand { gap: 10px; }
	.om2gle-wordmark { font-size: 13px; }
	.om2gle-header-right { gap: 10px; }
	.om2gle-news-btn { width: 40px; height: 40px; }
	.om2gle-news-btn svg { width: 16px; height: 16px; }
	.om2gle-handle { font-size: 11px; max-width: 18ch; }
	.om2gle-handle-tag { font-size: 9px; }

	/* ---- shared screen shell ----
	   Pull content toward the top instead of vertically centring in the
	   raw 100vh. Safari's URL chrome + bottom action bar eat ~150px from
	   100vh but `justify-content: center` doesn't know that, leaving a
	   visible empty void above the title. flex-start + a small top inset
	   makes the layout feel anchored to the device's actual visible area. */
	.om2gle-app .om2gle-stack-center {
		gap: 18px;
		padding: 0;
		justify-content: flex-start;
		padding-top: clamp(28px, 5vh, 56px);
	}

	/* ============================================================
	   LOGIN WALL — mode-picker splash (mobile)
	   Two cards stack vertically; the vs-teaser inside Card B is
	   reflowed from 3-col side-by-side to a vertical P1/VS/P2 stack
	   so it fits inside a phone-width card without being squashed.
	============================================================ */
	.om2gle-app .om2gle-title-hero { font-size: clamp(28px, 8vw, 40px); }
	.om2gle-app .om2gle-lede { font-size: 14px; padding: 0 4px; }

	/* Wrapper: tighten the gap so the two cards + boss strip + title fit
	   on a first viewport without scrolling on a 390x844 phone. */
	.om2gle-app .om2gle-modes-stack { gap: 14px; }

	/* Cards already stack via .om2gle-modes grid-template-columns:1fr
	   in the bottom @media block; here we tune the body + teaser inside. */
	.om2gle-app .om2gle-mode-card-body {
		padding: 12px 14px 16px;
		gap: 4px;
	}
	.om2gle-app .om2gle-mode-card-title { font-size: 22px; }
	.om2gle-app .om2gle-mode-card-sub { font-size: 13px; }
	/* CTA bar mobile — margins must match the mobile body padding above
	   (12px 14px 16px) exactly so the bar flushes to the card edges and
	   doesn't get clipped by the card's overflow:hidden. */
	.om2gle-app .om2gle-mode-card-cta {
		margin: 10px -14px -16px;
		padding: 12px 16px;
		font-size: 11px;
		letter-spacing: 0.22em;
	}

	/* Teaser shell — compress padding/gap inside a narrow phone card. */
	.om2gle-app .om2gle-mode-card .om2gle-teaser {
		padding: 12px 12px 10px;
		gap: 8px;
	}

	/* VS teaser: stack P1 / VS-badge / P2 vertically so the 3-column grid
	   doesn't get crushed. The VS column flips to a horizontal mini-row
	   that reads as a divider between the two sides. */
	.om2gle-app .om2gle-mode-card .om2gle-teaser-versus {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
		gap: 8px;
	}
	.om2gle-app .om2gle-mode-card .om2gle-teaser-side {
		padding: 10px 12px 12px;
		gap: 6px;
	}
	.om2gle-app .om2gle-mode-card .om2gle-teaser-vs {
		flex-direction: row;
		gap: 10px;
		padding: 6px 12px;
		border-left: 0;
		border-right: 0;
	}
	.om2gle-app .om2gle-mode-card .om2gle-teaser-vs-note { font-size: 22px; }
	.om2gle-app .om2gle-mode-card .om2gle-teaser-vs-word { font-size: 14px; }
	.om2gle-app .om2gle-mode-card .om2gle-teaser-handle {
		min-width: 0;
		font-size: 15px;
		height: 18px;
	}
	.om2gle-app .om2gle-mode-card .om2gle-teaser-stage {
		height: 64px;
	}
	.om2gle-app .om2gle-mode-card .om2gle-teaser-score-num { font-size: 26px; }
	.om2gle-app .om2gle-mode-card .om2gle-teaser-score-denom { font-size: 11px; }

	/* Solo teaser — slightly shorter so the card body sits higher. The note
	   anchor scales down with the stage so it doesn't crowd the wave band. */
	.om2gle-app .om2gle-mode-card .om2gle-teaser-solo-stage {
		height: 96px;
	}
	.om2gle-app .om2gle-mode-card .om2gle-teaser-solo-score-num {
		font-size: 44px;
	}
	.om2gle-app .om2gle-mode-card .om2gle-teaser-solo-note { top: 6px; }
	.om2gle-app .om2gle-mode-card .om2gle-teaser-solo-note-letter { font-size: 42px; }
	.om2gle-app .om2gle-mode-card .om2gle-teaser-solo-note-oct { font-size: 17px; margin-top: 4px; }
	.om2gle-app .om2gle-mode-card .om2gle-teaser-solo-hz { top: 52px; font-size: 8px; letter-spacing: 0.22em; }
	.om2gle-app .om2gle-mode-card .om2gle-teaser-solo-stage .om2gle-teaser-wave {
		inset: auto 16px 10px 16px;
		height: 22px;
	}
	.om2gle-app .om2gle-mode-card .om2gle-teaser-solo-head { gap: 4px; }
	.om2gle-app .om2gle-mode-card .om2gle-teaser-solo-head .om2gle-teaser-handle { font-size: 15px; height: 17px; }

	/* Boss strip — tighter padding, smaller title. */
	.om2gle-app .om2gle-mode-boss {
		padding: 12px 14px;
		gap: 12px;
	}
	.om2gle-app .om2gle-mode-boss-title { font-size: 15px; }
	.om2gle-app .om2gle-mode-boss-price { font-size: 13px; }

	/* Tap-prompt — compress lines + tighten spacing on phone widths. */
	.om2gle-app .om2gle-modes-prompt { gap: 10px; margin: 0 0 -4px; }
	.om2gle-app .om2gle-modes-prompt-line { flex-basis: 32px; }
	.om2gle-app .om2gle-modes-prompt-text { font-size: 10px; letter-spacing: 0.28em; gap: 8px; }
	.om2gle-app .om2gle-modes-prompt-arrow { font-size: 14px; }

	/* Ping rings — cards are stacked vertically now, so ping positions
	   flip from left/right (25% / 75%) to top/bottom of the stack. */
	.om2gle-app .om2gle-modes-ping {
		width: 92px;
		height: 92px;
	}
	.om2gle-app .om2gle-modes-ping.om2-ping-a {
		top: 25%;
		left: 50%;
	}
	.om2gle-app .om2gle-modes-ping.om2-ping-b {
		top: 75%;
		left: 50%;
	}

	/* ============================================================
	   STAGE — vertical, with OPP collapsed to a slab + sticky Sing dock
	============================================================ */
	.om2gle-app .om2gle-screen-stage .om2gle-stage-stack {
		/* Drop the desktop 1fr-arena grid that vertical-centers the locked-in
		   card. On a tall phone that leaves a ~250px gap above the C5 card.
		   Stack everything from the top instead. */
		display: flex;
		flex-direction: column;
		align-items: stretch;
		height: auto;
		min-height: 0;
		gap: 14px;
		/* Leave room for the fixed Sing dock at the bottom */
		padding-bottom: calc(120px + env(safe-area-inset-bottom));
	}
	/* Pull the stage screen's outer wrapper out of vertical-centering too —
	   otherwise the stack stays glued to the middle of the viewport. */
	.om2gle-app .om2gle-screen-stage .om2gle-stack-center {
		flex: 0 1 auto;
		justify-content: flex-start;
		align-items: stretch;
		gap: 14px;
	}
	/* Force the per-column wrappers to fill the 1fr column so the Mode dial
	   and Boss pill (which use width: 100% inside) actually clamp to the
	   viewport instead of growing to their content's natural width. Without
	   this the dial overflows 390px on a phone (each button's intrinsic
	   content is ~270px wide). */
	.om2gle-app .om2gle-screen-stage .om2gle-controls-col { width: 100%; }

	/* Arena: P1 stacks above a slim OPP slab */
	.om2gle-app .om2gle-arena {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
		gap: 10px;
		padding: 0;
	}
	.om2gle-app .om2gle-arena-side { gap: 10px; }
	.om2gle-app .om2gle-arena-side .om2gle-side-label { font-size: 10px; }

	/* P1 (you) card — compact, glyph fills it.
	   Sized to ~50vw / 200px max so the locked-in confirmation doesn't
	   dominate the viewport and the OPP slab + Mode dial + Sing dock all
	   land above the fold on a 390x844 phone. */
	.om2gle-app .om2gle-arena .om2gle-card.is-you {
		width: min(50vw, 200px);
		height: auto;
		max-height: none;
		aspect-ratio: 4 / 5;
	}
	.om2gle-app .om2gle-arena .om2gle-card.is-you .om2gle-glyph-letter {
		font-size: clamp(92px, 25vw, 132px);
	}
	.om2gle-app .om2gle-arena .om2gle-card.is-you .om2gle-glyph-octave {
		font-size: clamp(34px, 8vw, 46px);
		margin-top: 8px;
	}
	.om2gle-app .om2gle-arena .om2gle-card.is-you .om2gle-card-caption {
		bottom: 12px;
		font-size: 9px;
	}

	/* readout under P1 — compact mono row */
	.om2gle-app .om2gle-arena-side.is-you .om2gle-readout { gap: 22px; }
	.om2gle-app .om2gle-arena-side.is-you .om2gle-readout dt { font-size: 9px; }
	.om2gle-app .om2gle-arena-side.is-you .om2gle-readout dd { font-size: 11px; }

	/* VS — horizontal slim rule between cards */
	.om2gle-app .om2gle-arena .om2gle-vs {
		flex-direction: row;
		padding: 4px 0;
		gap: 12px;
	}
	.om2gle-app .om2gle-arena .om2gle-vs-rule { width: 40px; height: 1px; }
	.om2gle-app .om2gle-arena .om2gle-vs-word { font-size: 26px; }
	.om2gle-app .om2gle-arena .om2gle-vs-tag { font-size: 9px; letter-spacing: 0.22em; }

	/* OPP — collapse the card into a slab.
	   We keep the .om2gle-card structure; we just reshape it.
	   The challenger glyph "?" is preserved on the left, caption on the right. */
	.om2gle-app .om2gle-arena .om2gle-card.is-rival {
		width: 100%;
		height: auto;
		max-height: none;
		aspect-ratio: auto;
		min-height: 64px;
		display: grid;
		grid-template-columns: auto 1fr;
		place-items: center start;
		padding: 12px 18px;
		gap: 16px;
	}
	.om2gle-app .om2gle-arena .om2gle-card.is-rival .om2gle-glyph {
		justify-self: start;
	}
	.om2gle-app .om2gle-arena .om2gle-card.is-rival .om2gle-glyph-letter {
		font-size: 44px;
	}
	.om2gle-app .om2gle-arena .om2gle-card.is-rival .om2gle-card-caption {
		position: static;
		text-align: left;
		font-size: 10px;
		bottom: auto;
		justify-self: start;
	}
	/* Hide the diagonal hatch on the rival slab — too noisy at slab size */
	.om2gle-app .om2gle-arena .om2gle-card.is-rival::after { display: none; }
	.om2gle-app .om2gle-arena .om2gle-card.is-rival .om2gle-corner {
		width: 12px; height: 12px;
	}
	/* Flatten the .rival-empty wrapper so the slab actually stays slab-tall.
	   At the default state it's position:absolute with a 24/22px vertical
	   padding + grid that pushes the card back to ~140px on a phone. On mobile
	   we drop it into the card's grid as a normal row item and lay the "?"
	   glyph + caption out horizontally — the slab lands at ~70px. */
	.om2gle-app .om2gle-arena .om2gle-rival-empty {
		position: static;
		inset: auto;
		display: contents;
	}
	.om2gle-app .om2gle-arena .om2gle-rival-empty .om2gle-glyph { align-self: center; }

	/* readout under OPP — render inline, dimmed */
	.om2gle-app .om2gle-arena-side.is-rival .om2gle-readout {
		gap: 22px;
		opacity: 0.7;
	}
	.om2gle-app .om2gle-arena-side.is-rival .om2gle-readout dt { font-size: 9px; }
	.om2gle-app .om2gle-arena-side.is-rival .om2gle-readout dd { font-size: 11px; }

	/* Pick-a-note eyebrow + 3-col note grid */
	.om2gle-app .om2gle-eyebrow { font-size: 9px; letter-spacing: 0.28em; }
	.om2gle-app .om2gle-notes {
		display: grid;
		/* minmax(0, 1fr) instead of 1fr — without this the grid honors
		   each button's min-content (~130px) and overflows the 362px
		   viewport-padded width. */
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
		gap: 6px;
		width: 100%;
		box-sizing: border-box;
	}
	.om2gle-app .om2gle-note {
		min-width: 0;
		min-height: 64px;
		padding: 10px 8px;
		justify-content: center;
	}
	.om2gle-app .om2gle-note-glyph { font-size: 20px; }
	.om2gle-app .om2gle-note-letter { font-size: 22px; }
	.om2gle-app .om2gle-note-octave { font-size: 11px; }
	.om2gle-app .om2gle-note-foot { font-size: 9px; }

	/* Scout strip — single line, allow ellipsis */
	.om2gle-app .om2gle-scout {
		font-size: 10px;
		letter-spacing: 0.18em;
		width: 100%;
		justify-content: center;
		flex-wrap: nowrap;
	}
	.om2gle-app .om2gle-scout-text {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 100%;
	}

	/* Mode pill — bottom of scroll, just above the fixed Sing dock */
	.om2gle-app .om2gle-screen-stage .om2gle-mode {
		display: grid;
		/* minmax(0, 1fr) — without this each option's sub-label ("match
		   me with a stranger") sets a ~270px min-content per cell, which
		   overflows the 362px viewport-padded width. */
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		width: 100%;
		box-sizing: border-box;
	}
	.om2gle-app .om2gle-screen-stage .om2gle-mode-opt {
		min-width: 0;
		padding: 11px 10px;
		gap: 2px;
	}
	.om2gle-app .om2gle-screen-stage .om2gle-mode-opt-label { font-size: 11px; }
	.om2gle-app .om2gle-screen-stage .om2gle-mode-opt-sub { font-size: 9px; }

	/* BOSS MODE pill — demoted on mobile so it reads as a quiet "upgrade"
	   row beneath the Mode dial instead of a peer of the primary action.
	   Drops the animated glow, softens the border, tightens padding, and
	   lets the bundle copy ("1v1 invite-link duels · audio privacy")
	   breathe on a single line. */
	.om2gle-app .om2gle-screen-stage .om2gle-boss-pill {
		margin-top: 6px;
		padding: 7px 12px 7px;
		border-color: rgba(229, 165, 66, 0.22);
		background: linear-gradient(180deg, rgba(229, 165, 66, 0.05), rgba(229, 165, 66, 0));
		border-radius: 10px;
	}
	.om2gle-app .om2gle-screen-stage .om2gle-boss-pill-glow { display: none; }
	.om2gle-app .om2gle-screen-stage .om2gle-boss-pill-row {
		font-size: 10.5px;
		letter-spacing: 0.16em;
		gap: 6px;
	}
	.om2gle-app .om2gle-screen-stage .om2gle-boss-pill-price {
		padding: 2px 7px;
		font-size: 10px;
	}
	.om2gle-app .om2gle-screen-stage .om2gle-boss-pill-sub {
		font-size: 10.5px;
		line-height: 1.35;
		margin-top: 1px;
	}

	/* Friend share panel — vertical stack */
	.om2gle-app .om2gle-friend-panel {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}
	.om2gle-app .om2gle-friend-panel > .om2gle-share-box {
		flex: none;
		min-width: 0;
		width: 100%;
	}
	.om2gle-app .om2gle-share-url { font-size: 12px; padding: 12px 12px; }
	.om2gle-app .om2gle-share-box .om2gle-btn { padding: 0 14px; font-size: 10px; }
	.om2gle-app .om2gle-friend-handles {
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 8px;
		font-size: 11px;
	}

	/* Privacy + util — quiet, centered */
	.om2gle-app .om2gle-privacy { font-size: 10px; }
	.om2gle-app .om2gle-util { font-size: 9px; }

	/* ---- SING DOCK ---- a fixed thumb-zone CTA */
	.om2gle-app .om2gle-screen-stage .om2gle-btn-mic {
		position: fixed;
		left: 14px;
		right: 14px;
		bottom: calc(14px + env(safe-area-inset-bottom));
		width: auto;
		min-height: 60px;
		padding: 0 22px;
		font-size: 14px;
		letter-spacing: 0.18em;
		border-radius: 0;
		z-index: 80;
		justify-content: center;
		box-shadow:
			0 0 0 1px var(--gold) inset,
			0 -18px 32px -10px rgba(11, 9, 7, 0.85),
			0 12px 28px -10px var(--gold-glow);
	}
	.om2gle-app .om2gle-screen-stage .om2gle-btn-mic .om2gle-btn-icon svg {
		width: 18px; height: 18px;
	}

	/* ============================================================
	   DUEL BOOT
	============================================================ */
	.om2gle-app .om2gle-screen[data-screen="duel_boot"] .om2gle-lede {
		font-size: 14px;
		padding: 0 12px;
	}

	/* ============================================================
	   RECHECK (octave check)
	============================================================ */
	.om2gle-app .om2gle-recheck-title { font-size: 24px; line-height: 1.1; }
	.om2gle-app .om2gle-recheck-grid { gap: 10px; }
	.om2gle-app .om2gle-recheck-cell { padding: 16px 12px; }
	.om2gle-app .om2gle-recheck-cell-eyebrow { font-size: 9px; letter-spacing: 0.22em; }
	.om2gle-app .om2gle-recheck-cell-value { font-size: 44px; }
	.om2gle-app .om2gle-recheck-lede { font-size: 13px; padding: 0 6px; }
	.om2gle-app .om2gle-actions {
		flex-direction: column;
		width: 100%;
		gap: 10px;
	}
	.om2gle-app .om2gle-actions .om2gle-btn { width: 100%; padding: 14px 18px; }

	/* ============================================================
	   RECORDING — full-bleed countdown
	============================================================ */
	.om2gle-app .om2gle-screen-record { padding: 0; }
	.om2gle-app .om2gle-screen-record .om2gle-record-stage {
		min-height: calc(100vh - 80px);
		min-height: calc(100dvh - 80px);
		gap: 22px;
		padding: 22px 14px calc(28px + env(safe-area-inset-bottom));
	}
	.om2gle-app .om2gle-record-status { font-size: 10px; letter-spacing: 0.26em; }
	.om2gle-app .om2gle-countdown { font-size: clamp(120px, 42vw, 200px); }
	.om2gle-app .om2gle-countdown.is-small { font-size: clamp(72px, 22vw, 120px); }
	.om2gle-app .om2gle-live-spectrum {
		width: 100%;
		height: 80px;
	}

	/* ============================================================
	   ROSTER
	============================================================ */
	.om2gle-app .om2gle-roster-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	.om2gle-app .om2gle-roster-filter {
		align-self: stretch;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		width: 100%;
	}
	.om2gle-app .om2gle-roster-filter button { padding: 10px 8px; }
	.om2gle-app .om2gle-roster-list { max-height: none; }
	/* Mobile roster row:
	   [ rank ] [ handle / meta ] [ score ] [ Challenge ]
	   Reduce to: rank stays small, handle takes the space, score + button
	   sit together on the right. Inner meta row keeps note + time below the handle. */
	.om2gle-app .om2gle-roster-row {
		grid-template-columns: auto 1fr auto auto;
		gap: 10px;
		padding: 12px 12px;
		align-items: center;
	}
	.om2gle-app .om2gle-roster-rank { font-size: 11px; }
	.om2gle-app .om2gle-roster-handle { font-size: 13px; }
	.om2gle-app .om2gle-roster-meta { font-size: 10px; color: var(--mute); }
	.om2gle-app .om2gle-roster-score { font-size: 18px; }
	.om2gle-app .om2gle-roster-score small { font-size: 10px; }
	.om2gle-app .om2gle-challenge-btn { padding: 10px 12px; font-size: 9px; }

	/* ============================================================
	   THEATER — vertical face-off
	============================================================ */
	.om2gle-app .om2gle-screen[data-screen="theater"] .om2gle-stack-center,
	.om2gle-app .om2gle-theater {
		gap: 14px;
	}
	.om2gle-app .om2gle-theater-status { font-size: 10px; letter-spacing: 0.26em; }
	.om2gle-app .om2gle-theater {
		padding-bottom: calc(110px + env(safe-area-inset-bottom));
	}

	.om2gle-app .om2gle-versus {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
	}
	.om2gle-app .om2gle-side {
		min-height: 0;
		padding: 18px 18px 16px;
		gap: 10px;
	}
	.om2gle-app .om2gle-side .om2gle-side-eyebrow { font-size: 9px; }
	.om2gle-app .om2gle-side-handle { font-size: 22px; }
	.om2gle-app .om2gle-side-score-value { font-size: 68px; }
	.om2gle-app .om2gle-side-score-denom { font-size: 18px; }

	/* The middle divider becomes horizontal — orb sits on a baseline rule */
	.om2gle-app .om2gle-versus-divider {
		border-left: none;
		border-right: none;
		border-top: 1px solid var(--rule-2);
		border-bottom: 1px solid var(--rule-2);
		padding: 10px 0;
		justify-self: stretch;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.om2gle-app .om2gle-versus-orb {
		position: static;
	}
	.om2gle-app .om2gle-versus-orb-core { font-size: 22px; }

	/* audio rows — tap-friendly */
	.om2gle-app .om2gle-audio-row {
		width: 100%;
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: center;
		gap: 12px;
		margin-top: 4px;
	}
	.om2gle-app .om2gle-play-btn {
		width: 44px; height: 44px;
		min-width: 44px;
		font-size: 14px;
	}
	.om2gle-app .om2gle-audio-wave { width: auto; min-width: 0; }
	.om2gle-app .om2gle-audio-meta { font-size: 10px; letter-spacing: 0.08em; }

	/* sticky face-off-again dock */
	.om2gle-app .om2gle-theater-actions,
	.om2gle-app .om2gle-autonext {
		position: fixed;
		left: 14px;
		right: 14px;
		bottom: calc(14px + env(safe-area-inset-bottom));
		z-index: 80;
		flex-direction: row;
		gap: 10px;
		justify-content: stretch;
		background: linear-gradient(180deg, rgba(11, 9, 7, 0) 0%, rgba(11, 9, 7, 0.92) 30%);
		padding: 18px 0 0;
	}
	.om2gle-app .om2gle-theater-actions .om2gle-btn,
	.om2gle-app .om2gle-autonext .om2gle-btn {
		flex: 1;
		padding: 16px 18px;
		min-height: 56px;
	}
	.om2gle-app .om2gle-autonext-go { flex: 2; }
	/* Mobile: cursor: pointer on the OPP slab so the tap-to-pause gesture
	   reads as interactive while a chain is running. The slab is otherwise
	   purely passive — only flip the affordance during an active chain. */
	.om2gle-app .om2gle-autonext:not([hidden]) ~ * .om2gle-side-opp,
	body:has(.om2gle-autonext:not([hidden])) .om2gle-side-opp {
		cursor: pointer;
	}

	/* ============================================================
	   NEWS SHEET — full-screen bottom sheet w/ drag handle
	============================================================ */
	.om2gle-sheet-backdrop {
		padding: 0;
		align-items: flex-end;
	}
	.om2gle-sheet {
		max-width: none;
		max-height: 92vh;
		max-height: 92dvh;
		width: 100%;
		border-bottom: none;
		border-left: none;
		border-right: none;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
		padding-bottom: env(safe-area-inset-bottom);
		position: relative;
		animation: om2-sheet-up .26s cubic-bezier(0.16, 1, 0.3, 1) both;
	}
	.om2gle-sheet::before {
		content: "";
		position: absolute;
		top: 6px;
		left: 50%;
		transform: translateX(-50%);
		width: 44px;
		height: 4px;
		border-radius: 2px;
		background: var(--rule-2);
	}
	.om2gle-sheet-head { padding: 22px 18px 14px; }
	.om2gle-sheet-title { font-size: 18px; }
	.om2gle-sheet-close {
		width: 40px; height: 40px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 18px;
		margin: -8px -8px -8px 0;
	}
	.om2gle-news-row { padding: 14px 18px; }
	@keyframes om2-sheet-up {
		from { transform: translateY(16px); opacity: 0; }
		to   { transform: translateY(0); opacity: 1; }
	}

	/* ============================================================
	   TOASTS — clear of the Sing dock
	============================================================ */
	.om2gle-toast {
		left: 14px;
		right: 14px;
		transform: none;
		width: auto;
		bottom: calc(96px + env(safe-area-inset-bottom));
		text-align: center;
	}
	@keyframes om2-toast-in {
		from { opacity: 0; transform: translateY(12px); }
		to   { opacity: 1; transform: translateY(0); }
	}

	/* ============================================================
	   MASCOT FAB — keep clear of the Sing dock
	============================================================ */
	.om2gle-mascot-fab {
		right: 14px;
		bottom: calc(96px + env(safe-area-inset-bottom));
		width: 44px;
		height: 44px;
	}
}

/* Very narrow (iPhone SE-class) — squeeze a bit further */
@media (max-width: 360px) {
	.om2gle-app { padding: 12px 12px 0; }
	.om2gle-app .om2gle-arena .om2gle-card.is-you { width: 54vw; }
	.om2gle-app .om2gle-note { padding: 8px 4px; min-height: 58px; }
	.om2gle-app .om2gle-side-score-value { font-size: 56px; }
	.om2gle-app .om2gle-recheck-cell-value { font-size: 38px; }
}

/* Landscape phones — recording screen needs a different shape */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
	.om2gle-app .om2gle-screen-record .om2gle-record-stage {
		min-height: calc(100vh - 60px);
		min-height: calc(100dvh - 60px);
		flex-direction: row;
		justify-content: space-around;
		gap: 18px;
	}
	.om2gle-app .om2gle-countdown { font-size: clamp(90px, 22vh, 160px); }
	.om2gle-app .om2gle-live-spectrum { width: 50vw; height: 80px; }
}

/* ============================================================================
   Login wall — LIVE TEASER
   A self-running 9s loop that shows what a face-off actually looks like:
   mic prompt -> recording waveform -> analyzer sweep -> score reveal -> WIN.
   Six phases tile the timeline so each element animates in one shared cycle:
     0.00s  -> 0.90s  (10%)   warming  — mic icon prompts, panels dim
     0.90s  -> 1.40s  (15.6%) countdown collapses into mic
     1.40s  -> 3.80s  (42%)   recording — waveform dances, scores hidden
     3.80s  -> 5.20s  (58%)   analyzing — wave freezes, scan sweep, "—"
     5.20s  -> 7.80s  (87%)   reveal   — scores pop, bars fill, WIN stamp
     7.80s  -> 9.00s  (100%)  hold + soft fade -> loop
   Opponent side stays redacted until ~3.0s, then handle types in.
============================================================================ */
.om2gle-teaser {
	position: relative;
	width: min(620px, 100%);
	/* Padding + gap scale with viewport height so the whole login stack fits
	   without scrolling on laptops, ultrawides, and stubby external displays. */
	padding: clamp(12px, 2.2vh, 22px) clamp(14px, 2.2vw, 22px) clamp(10px, 1.6vh, 16px);
	display: flex;
	flex-direction: column;
	gap: clamp(10px, 1.6vh, 16px);
	border: 1px solid var(--gold);
	background: linear-gradient(180deg, #15110c 0%, #0d0a07 100%);
	box-shadow:
		0 0 0 1px var(--gold) inset,
		0 0 60px -10px var(--gold-glow),
		0 24px 80px -30px var(--gold-glow);
	overflow: hidden;
}
.om2gle-teaser::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 30%, var(--gold-glow), transparent 60%);
	pointer-events: none;
}
/* The .om2gle-corner base style only positions when inside a .om2gle-card,
   so duplicate the positioning rule for the teaser shell. */
.om2gle-teaser .om2gle-corner {
	position: absolute;
	width: 18px;
	height: 18px;
	border: 1px solid var(--gold);
	z-index: 2;
}

/* status row — phases stack and cross-fade */
.om2gle-teaser-status {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--gold);
	min-height: 14px;
}
.om2gle-teaser-dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--gold);
	box-shadow: 0 0 0 4px var(--gold-glow);
	animation: om2-teaser-dot 9s linear infinite;
}
.om2gle-teaser-phases {
	position: relative;
	display: inline-block;
	min-width: 120px;
	height: 14px;
}
.om2gle-teaser-phase {
	position: absolute;
	left: 0; top: 0;
	white-space: nowrap;
	opacity: 0;
	animation-duration: 9s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
}
.om2gle-teaser-phase.is-warming   { animation-name: om2-teaser-phase-warming; }
.om2gle-teaser-phase.is-recording { animation-name: om2-teaser-phase-recording; color: var(--gold); }
.om2gle-teaser-phase.is-analyzing { animation-name: om2-teaser-phase-analyzing; color: var(--gold-pale); }
.om2gle-teaser-phase.is-result    { animation-name: om2-teaser-phase-result; color: var(--gold); }

@keyframes om2-teaser-phase-warming {
	0% { opacity: 0; } 2%, 10% { opacity: 1; } 14%, 100% { opacity: 0; }
}
@keyframes om2-teaser-phase-recording {
	0%, 12% { opacity: 0; } 16%, 40% { opacity: 1; } 44%, 100% { opacity: 0; }
}
@keyframes om2-teaser-phase-analyzing {
	0%, 44% { opacity: 0; } 48%, 56% { opacity: 1; } 60%, 100% { opacity: 0; }
}
@keyframes om2-teaser-phase-result {
	0%, 58% { opacity: 0; } 62%, 92% { opacity: 1; } 96%, 100% { opacity: 0; }
}

/* recording dot pulses only during recording phase */
@keyframes om2-teaser-dot {
	0%, 14% { background: var(--gold-soft); box-shadow: 0 0 0 4px rgba(229,165,66,0.08); }
	16% { background: var(--gold); box-shadow: 0 0 0 4px rgba(229,165,66,0.34); }
	22% { background: var(--gold-soft); box-shadow: 0 0 0 4px rgba(229,165,66,0.08); }
	28% { background: var(--gold); box-shadow: 0 0 0 4px rgba(229,165,66,0.34); }
	34%, 42% { background: var(--gold-soft); box-shadow: 0 0 0 4px rgba(229,165,66,0.08); }
	48%, 56% { background: var(--gold-pale); box-shadow: 0 0 0 4px rgba(244,209,145,0.18); }
	62%, 92% { background: var(--gold); box-shadow: 0 0 0 4px var(--gold-glow); }
	100% { background: var(--gold-soft); box-shadow: 0 0 0 4px rgba(229,165,66,0.08); }
}

/* main versus grid */
.om2gle-teaser-versus {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 0;
	align-items: stretch;
}

.om2gle-teaser-side {
	position: relative;
	padding: clamp(10px, 1.4vh, 14px) clamp(10px, 1.4vw, 14px) clamp(12px, 1.6vh, 16px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(6px, 1vh, 10px);
	border: 1px solid var(--rule-2);
	background: linear-gradient(180deg, #100c08 0%, #0a0805 100%);
	min-height: 0;
}

.om2gle-teaser-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--mono);
	font-size: 9px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
}
.om2gle-teaser-side.is-you  .om2gle-teaser-eyebrow { color: var(--gold); }
.om2gle-teaser-side.is-opp  .om2gle-teaser-eyebrow { color: var(--rose); }
.om2gle-teaser-eyebrow-tag {
	padding: 2px 6px;
	border: 1px solid currentColor;
	font-size: 8px;
	letter-spacing: 0.18em;
}

.om2gle-teaser-handle {
	font-family: var(--serif);
	font-size: 20px;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--ink);
	height: 22px;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 140px;
}
.om2gle-teaser-side.is-opp .om2gle-teaser-handle-redacted,
.om2gle-teaser-side.is-opp .om2gle-teaser-handle-real {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	animation: 9s ease infinite;
}
.om2gle-teaser-side.is-opp .om2gle-teaser-handle-redacted {
	color: var(--mute);
	letter-spacing: 0.05em;
	animation-name: om2-teaser-handle-redacted;
}
.om2gle-teaser-side.is-opp .om2gle-teaser-handle-real {
	color: var(--ink);
	animation-name: om2-teaser-handle-real;
}
@keyframes om2-teaser-handle-redacted {
	0% { opacity: 0; } 4%, 32% { opacity: 1; } 36%, 100% { opacity: 0; }
}
@keyframes om2-teaser-handle-real {
	0%, 32% { opacity: 0; transform: translate(-50%, 4px); }
	38%, 92% { opacity: 1; transform: translate(-50%, 0); }
	98%, 100% { opacity: 0; transform: translate(-50%, 4px); }
}

/* central stage where the mic / waveform / scan / score all overlap */
.om2gle-teaser-stage {
	position: relative;
	width: 100%;
	height: clamp(68px, 10vh, 92px);
	border: 1px solid var(--rule-2);
	background: #0e0b08;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* mic icon — prompt in warming phase, then fades */
.om2gle-teaser-mic {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--gold);
	animation: om2-teaser-mic 9s ease infinite;
}
.om2gle-teaser-mic svg { width: 28px; height: 28px; }
.om2gle-teaser-mic.is-opp { color: var(--rose); animation-name: om2-teaser-mic-opp; }
@keyframes om2-teaser-mic {
	0% { opacity: 0; transform: scale(0.94); }
	3% { opacity: 1; transform: scale(1); }
	8% { opacity: 1; transform: scale(1.12); }
	14% { opacity: 0; transform: scale(.92); }
	100% { opacity: 0; }
}
@keyframes om2-teaser-mic-opp {
	0% { opacity: 0; transform: scale(0.94); }
	3%, 28% { opacity: 1; transform: scale(1); }
	34% { opacity: 1; transform: scale(1.12); }
	40% { opacity: 0; transform: scale(.92); }
	100% { opacity: 0; }
}

/* waveform — 20 vertical bars, scaleY animated; staggered via --i */
.om2gle-teaser-wave {
	position: absolute;
	inset: 14px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2px;
	opacity: 0;
	animation: om2-teaser-wave-visible 9s ease infinite;
}
.om2gle-teaser-wave span {
	flex: 1 1 0;
	display: block;
	height: 100%;
	background: var(--gold);
	transform-origin: center;
	transform: scaleY(0.08);
	border-radius: 1px;
	animation: om2-teaser-bar 0.7s ease-in-out infinite;
	animation-delay: calc(var(--i) * -0.08s);
}
.om2gle-teaser-wave.is-opp span { background: var(--rose); }
.om2gle-teaser-wave.is-opp { animation-name: om2-teaser-wave-visible-opp; }

@keyframes om2-teaser-wave-visible {
	0%, 12% { opacity: 0; } 16%, 58% { opacity: 1; } 62%, 100% { opacity: 0; }
}
@keyframes om2-teaser-wave-visible-opp {
	0%, 28% { opacity: 0; } 32%, 58% { opacity: 1; } 62%, 100% { opacity: 0; }
}

/* per-bar dance */
@keyframes om2-teaser-bar {
	0%   { transform: scaleY(0.18); }
	25%  { transform: scaleY(0.72); }
	50%  { transform: scaleY(0.34); }
	75%  { transform: scaleY(0.86); }
	100% { transform: scaleY(0.18); }
}
/* scan line — sweeps left to right during analysis */
.om2gle-teaser-scan {
	position: absolute;
	top: -10%;
	bottom: -10%;
	width: 2px;
	left: -10px;
	background: linear-gradient(180deg, transparent, var(--gold-pale) 30%, var(--gold-pale) 70%, transparent);
	box-shadow: 0 0 12px var(--gold-pale), 0 0 24px var(--gold-glow);
	opacity: 0;
	animation: om2-teaser-scan 9s ease infinite;
}
@keyframes om2-teaser-scan {
	0%, 44%   { opacity: 0; left: -10px; }
	46%       { opacity: 1; left: -10px; }
	58%       { opacity: 1; left: calc(100% + 10px); }
	60%, 100% { opacity: 0; left: calc(100% + 10px); }
}

/* score — hidden until reveal, then pops */
.om2gle-teaser-score {
	position: absolute;
	right: 12px;
	bottom: 8px;
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	font-family: var(--serif);
	color: var(--ink);
	opacity: 0;
	transform: translateY(6px);
	animation: om2-teaser-score 9s ease infinite;
}
.om2gle-teaser-side.is-opp .om2gle-teaser-score { animation-name: om2-teaser-score-opp; }
.om2gle-teaser-score-num {
	font-size: 38px;
	line-height: 0.85;
	letter-spacing: -0.02em;
}
.om2gle-teaser-score-denom {
	font-size: 13px;
	color: var(--mute);
}
.om2gle-teaser-side.is-you .om2gle-teaser-score-num {
	animation: om2-teaser-score-color-win 9s ease infinite;
}
.om2gle-teaser-side.is-opp .om2gle-teaser-score-num {
	color: var(--ink-2);
}
@keyframes om2-teaser-score {
	0%, 58% { opacity: 0; transform: translateY(6px) scale(0.94); }
	62% { opacity: 1; transform: translateY(0) scale(1.08); }
	66%, 92% { opacity: 1; transform: translateY(0) scale(1); }
	98%, 100% { opacity: 0; transform: translateY(6px) scale(0.94); }
}
@keyframes om2-teaser-score-opp {
	0%, 60% { opacity: 0; transform: translateY(6px) scale(0.94); }
	64% { opacity: 1; transform: translateY(0) scale(1.08); }
	68%, 92% { opacity: 1; transform: translateY(0) scale(1); }
	98%, 100% { opacity: 0; transform: translateY(6px) scale(0.94); }
}
@keyframes om2-teaser-score-color-win {
	0%, 66% { color: var(--ink); }
	72%, 92% { color: var(--gold); }
	100% { color: var(--ink); }
}

/* bar rows below the stage — fill from 0 -> --f during reveal */
.om2gle-teaser-bars {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 2px;
}
.om2gle-teaser-bar {
	display: grid;
	grid-template-columns: 56px 1fr;
	align-items: center;
	gap: 10px;
	font-family: var(--mono);
	font-size: 9px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.om2gle-teaser-bar-cat { color: var(--mute); }
.om2gle-teaser-bar-track {
	position: relative;
	display: block;
	height: 3px;
	background: var(--rule);
	overflow: hidden;
}
.om2gle-teaser-bar-fill {
	position: absolute;
	left: 0; top: 0;
	height: 100%;
	width: 0;
	background: var(--ink-2);
	animation: om2-teaser-bar-fill 9s cubic-bezier(.2,.7,.3,1) infinite;
}
.om2gle-teaser-side.is-you .om2gle-teaser-bar-fill { background: var(--gold); }
.om2gle-teaser-side.is-opp .om2gle-teaser-bar-fill { background: var(--rose); }
/* staggered fills — pitch first, then tone, then sustain */
.om2gle-teaser-side .om2gle-teaser-bar:nth-child(1) .om2gle-teaser-bar-fill { animation-name: om2-teaser-bar-fill-1; }
.om2gle-teaser-side .om2gle-teaser-bar:nth-child(2) .om2gle-teaser-bar-fill { animation-name: om2-teaser-bar-fill-2; }
.om2gle-teaser-side .om2gle-teaser-bar:nth-child(3) .om2gle-teaser-bar-fill { animation-name: om2-teaser-bar-fill-3; }
@keyframes om2-teaser-bar-fill-1 {
	0%, 60% { width: 0; }
	72%, 92% { width: var(--f); }
	100% { width: 0; }
}
@keyframes om2-teaser-bar-fill-2 {
	0%, 64% { width: 0; }
	76%, 92% { width: var(--f); }
	100% { width: 0; }
}
@keyframes om2-teaser-bar-fill-3 {
	0%, 68% { width: 0; }
	80%, 92% { width: var(--f); }
	100% { width: 0; }
}

/* WIN / LOSS stamp — appears at end of reveal */
.om2gle-teaser-stamp {
	margin-top: 4px;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	padding: 5px 10px;
	border: 1px solid currentColor;
	opacity: 0;
	transform: scale(0.85) rotate(-3deg);
	animation: om2-teaser-stamp 9s ease infinite;
}
.om2gle-teaser-stamp.is-win  { color: var(--gold); }
.om2gle-teaser-stamp.is-loss { color: var(--rose); }
@keyframes om2-teaser-stamp {
	0%, 76% { opacity: 0; transform: scale(0.85) rotate(-3deg); }
	80% { opacity: 1; transform: scale(1.1) rotate(-3deg); }
	84%, 92% { opacity: 1; transform: scale(1) rotate(-3deg); }
	100% { opacity: 0; transform: scale(0.85) rotate(-3deg); }
}

/* VS column */
.om2gle-teaser-vs {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0 14px;
	gap: 4px;
	border-top: 1px solid var(--rule-2);
	border-bottom: 1px solid var(--rule-2);
	background: linear-gradient(180deg, #100c08 0%, #0a0805 100%);
}
.om2gle-teaser-vs-note {
	font-family: var(--serif);
	font-size: 38px;
	line-height: 0.9;
	color: var(--gold-pale);
}
.om2gle-teaser-vs-word {
	font-family: var(--serif);
	font-style: italic;
	font-size: 18px;
	color: var(--mute);
	letter-spacing: 0.04em;
}
.om2gle-teaser-vs-hz {
	font-family: var(--mono);
	font-size: 9px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--mute);
}

/* Reduce motion: collapse the cycle into the final reveal state. */
@media (prefers-reduced-motion: reduce) {
	.om2gle-teaser *,
	.om2gle-teaser *::before,
	.om2gle-teaser *::after { animation: none !important; }
	.om2gle-teaser-mic { opacity: 0; }
	.om2gle-teaser-wave { opacity: 0; }
	.om2gle-teaser-scan { opacity: 0; }
	.om2gle-teaser-score { opacity: 1; transform: none; }
	.om2gle-teaser-side.is-you .om2gle-teaser-score-num { color: var(--gold); }
	.om2gle-teaser-side.is-opp .om2gle-teaser-handle-redacted { opacity: 0; }
	.om2gle-teaser-side.is-opp .om2gle-teaser-handle-real { opacity: 1; transform: translateX(-50%); }
	.om2gle-teaser-bar-fill { width: var(--f); }
	.om2gle-teaser-stamp { opacity: 1; transform: none; }
	.om2gle-teaser-phase { opacity: 0; }
	.om2gle-teaser-phase.is-result { opacity: 1; }
}

/* ============================================================================
   Login wall — fit the whole pitch in one viewport (no scroll).
   The teaser already shows what "sing one note" means and previews the result,
   so we drop the redundant eyebrow and let the stack breathe on tall screens
   while collapsing on shorter ones.
============================================================================ */
.om2gle-app .om2gle-screen[data-screen="login_wall"] .om2gle-stack-center {
	gap: clamp(10px, 2vh, 22px);
}
.om2gle-app .om2gle-screen[data-screen="login_wall"] .om2gle-eyebrow {
	display: none;
}
.om2gle-app .om2gle-screen[data-screen="login_wall"] .om2gle-title-hero {
	font-size: clamp(28px, 4.5vh, 48px);
	display: block;
	white-space: nowrap;
}
.om2gle-app .om2gle-screen[data-screen="login_wall"] .om2gle-lede {
	font-size: clamp(13px, 1.6vh, 15px);
	margin: 0;
}
.om2gle-app .om2gle-screen[data-screen="login_wall"] .om2gle-btn-lg {
	padding-top: clamp(12px, 1.6vh, 18px);
	padding-bottom: clamp(12px, 1.6vh, 18px);
}

/* Mobile — keep the side-by-side layout (it IS the demo) but shrink. */
@media (max-width: 720px) {
	.om2gle-app .om2gle-screen[data-screen="login_wall"] .om2gle-teaser {
		width: 100%;
		padding: 16px 12px 12px;
		gap: 12px;
	}
	.om2gle-app .om2gle-teaser-versus { gap: 0; }
	.om2gle-app .om2gle-teaser-side {
		padding: 10px 8px 12px;
		min-height: 0;
		gap: 8px;
	}
	.om2gle-app .om2gle-teaser-handle { font-size: 16px; min-width: 100px; }
	.om2gle-app .om2gle-teaser-stage { height: 76px; }
	.om2gle-app .om2gle-teaser-wave { inset: 10px 10px; }
	.om2gle-app .om2gle-teaser-score-num { font-size: 30px; }
	.om2gle-app .om2gle-teaser-score-denom { font-size: 11px; }
	.om2gle-app .om2gle-teaser-vs { padding: 0 8px; }
	.om2gle-app .om2gle-teaser-vs-note { font-size: 26px; }
	.om2gle-app .om2gle-teaser-vs-word { font-size: 14px; }
	.om2gle-app .om2gle-teaser-vs-hz { font-size: 8px; letter-spacing: 0.18em; }
	.om2gle-app .om2gle-teaser-bar { grid-template-columns: 44px 1fr; gap: 8px; }
	.om2gle-app .om2gle-teaser-eyebrow { font-size: 8px; letter-spacing: 0.22em; }
	.om2gle-app .om2gle-teaser-eyebrow-tag { font-size: 7px; padding: 1px 5px; }
}

/* ============================================================================
   Arena rework — handles on labels · in-card recruiter · two-line vs · util chips
   See ui-mockup-awaiting.html for the design intent. The P2 card hosts the
   share recruiter directly so the share-link IS the empty slot rather than a
   footnote below the arena. JS still toggles #om2gle-friend-panel via [hidden];
   visibility of [data-friend-only] / [data-auto-only] keys off that.
============================================================================ */

/* Mode-aware visibility. Modern :has() — the friend panel still lives in the DOM
   and toggles via [hidden] just like before, we just key sibling visibility off it. */
.om2gle-screen-stage [data-friend-only] { display: none; }
.om2gle-screen-stage:has(.om2gle-friend-panel:not([hidden])) [data-friend-only] { display: inline-flex; }
.om2gle-screen-stage:has(.om2gle-friend-panel:not([hidden])) [data-auto-only]   { display: none; }
/* The handle pill is the one friend-only that needs to be inline-flex so the dot baseline matches the label. */
.om2gle-screen-stage:has(.om2gle-friend-panel:not([hidden])) .om2gle-duel-handle[data-friend-only] { display: inline-flex; }

/* Side label row — keeps the P1/P2 chip tight to the handle so the empty slot's
   identity reads in one glance instead of being parked in a separate readout. */
.om2gle-side-label-row {
	display: flex;
	align-items: baseline;
	gap: 14px;
	min-height: 18px;
}
.om2gle-arena-side.is-you   .om2gle-side-label-row { justify-content: flex-start; padding-left: clamp(4px, 1vw, 14px); }
.om2gle-arena-side.is-rival .om2gle-side-label-row { justify-content: flex-start; padding-left: clamp(4px, 1vw, 14px); }
.om2gle-side-label-row .om2gle-duel-handle {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: none;
}
.om2gle-arena-side.is-you   .om2gle-side-label-row .om2gle-duel-handle { color: var(--gold-pale); }
.om2gle-arena-side.is-rival .om2gle-side-label-row .om2gle-duel-handle { color: var(--rose); opacity: 0.85; }
.om2gle-arena-side.is-rival .om2gle-side-label-row .om2gle-duel-handle.is-pending { color: var(--mute); }

/* Two-line vs-tag — gives the middle column a real job ("first to hit / wins the round"). */
.om2gle-vs-tag {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	line-height: 1.3;
	text-align: center;
}
.om2gle-vs-tag b {
	font-weight: 600;
	color: var(--gold);
	letter-spacing: 0.28em;
}

/* P1 card caption — frequency moved inline with "Locked in", so we widen it. */
.om2gle-card.is-you .om2gle-card-caption { letter-spacing: 0.22em; }

/* P2 card hosts the recruiter in friend mode. When the recruiter is visible
   the rival card stops being a dashed "empty" box and becomes the active CTA. */
.om2gle-card.is-rival:has(.om2gle-friend-panel:not([hidden])) {
	border-style: solid;
	border-color: var(--rose-soft);
	background: linear-gradient(180deg, #1a0d18 0%, #0e0a0d 100%);
	box-shadow:
		0 0 0 1px rgba(214, 99, 143, 0.25) inset,
		0 0 60px -10px rgba(214, 99, 143, 0.18),
		0 24px 80px -30px rgba(214, 99, 143, 0.18);
}
.om2gle-card.is-rival:has(.om2gle-friend-panel:not([hidden])) .om2gle-corner { border-color: var(--rose); opacity: 0.85; }
.om2gle-card.is-rival:has(.om2gle-friend-panel:not([hidden]))::after { display: none; }

/* Auto-mode empty slot — the "?" placeholder. Same as before, just wrapped. */
.om2gle-rival-empty {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	grid-template-rows: 1fr auto auto;
	padding: 24px 18px 22px;
	row-gap: 8px;
}
.om2gle-rival-empty .om2gle-glyph { align-self: end; }

/* Invite-a-friend CTA on the empty P2 card. Replaces the deleted mode dial
   — clicking transforms this whole card into the recruiter panel. Visually
   quiet (no solid bg) so it doesn't compete with the main Sing button, but
   the gold underline + arrow telegraph it as a real action. */
.om2gle-rival-invite {
	appearance: none;
	background: transparent;
	border: 0;
	margin: 4px 0 0;
	padding: 6px 10px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	color: var(--gold-soft);
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: lowercase;
	border-radius: 8px;
	transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}
.om2gle-rival-invite-text {
	border-bottom: 1px solid rgba(229, 165, 66, 0.35);
	padding-bottom: 1px;
	transition: border-color 160ms ease;
}
.om2gle-rival-invite-arrow {
	display: inline-block;
	font-size: 12px;
	transition: transform 200ms ease;
}
.om2gle-rival-invite:hover {
	color: var(--gold);
	background: rgba(229, 165, 66, 0.06);
	transform: translateY(-1px);
}
.om2gle-rival-invite:hover .om2gle-rival-invite-text { border-color: var(--gold); }
.om2gle-rival-invite:hover .om2gle-rival-invite-arrow { transform: translateX(2px); }
.om2gle-rival-invite:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

/* Recruiter — share-box + radar + copy, all inside the P2 card.
   Composite selector (.om2gle-friend-panel.om2gle-recruit) wins over the
   legacy .om2gle-friend-panel rule per the cascade-on-append guidance. */
.om2gle-friend-panel.om2gle-recruit {
	position: absolute;
	inset: 0;
	max-width: none;
	width: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	padding: 22px 18px;
	border-top: 0;
	overflow: hidden;
}
.om2gle-friend-panel.om2gle-recruit[hidden] { display: none; }

/* Radar — three rose rings emanating from the slot center. Honest "scanning"
   feel for the async invite without faking a match search. */
.om2gle-recruit-radar {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
}
.om2gle-recruit-ring {
	position: absolute;
	width: 60%;
	height: 60%;
	border-radius: 50%;
	border: 1px solid rgba(214, 99, 143, 0.35);
	animation: om2-recruit-ring 3.4s ease-out infinite;
}
.om2gle-recruit-ring:nth-child(2) { animation-delay: 1.1s; }
.om2gle-recruit-ring:nth-child(3) { animation-delay: 2.2s; }
@keyframes om2-recruit-ring {
	0%   { transform: scale(0.4); opacity: 0.9; border-color: rgba(214, 99, 143, 0.65); }
	100% { transform: scale(1.6); opacity: 0;   border-color: rgba(214, 99, 143, 0); }
}

.om2gle-recruit-eyebrow {
	position: relative;
	z-index: 1;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--rose);
	margin-bottom: 12px;
}
.om2gle-recruit-eyebrow .om2gle-pulse {
	background: var(--rose);
	margin-right: 8px;
}
.om2gle-recruit-title {
	position: relative;
	z-index: 1;
	font-family: var(--serif);
	font-size: clamp(22px, 2.4vw, 28px);
	line-height: 1.15;
	color: var(--ink);
	letter-spacing: 0.005em;
	text-align: center;
	margin: 0 0 6px;
}
.om2gle-recruit-sub {
	position: relative;
	z-index: 1;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var(--mute);
	margin-bottom: 18px;
	text-align: center;
}

/* In-recruiter share box overrides — the standalone bottom-row version was
   wide-and-flat; inside the card it's tight and the copy button is the accent. */
.om2gle-friend-panel.om2gle-recruit .om2gle-share-box {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 280px;
	min-width: 0;
	flex: none;
}
.om2gle-friend-panel.om2gle-recruit .om2gle-share-url {
	padding: 10px 12px;
	font-size: 11px;
	color: var(--rose);
}
.om2gle-friend-panel.om2gle-recruit .om2gle-share-box .om2gle-btn-primary {
	background: var(--rose);
	color: #1a0d12;
	font-weight: 700;
	letter-spacing: 0.2em;
	padding: 0 16px;
	border-left-color: var(--rose);
}
.om2gle-friend-panel.om2gle-recruit .om2gle-share-box .om2gle-btn-primary:hover {
	background: var(--gold);
	color: #0b0907;
}

/* Util row — picks up channel + leave room (relocated from the deleted bottom panel). */
.om2gle-util-channel {
	font-family: var(--mono);
	color: var(--mute);
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.om2gle-util-channel b {
	color: var(--ink);
	font-weight: 500;
	letter-spacing: 0.06em;
}
.om2gle-util-link {
	background: transparent;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--mute);
	cursor: pointer;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.om2gle-util-link:hover { color: var(--rose); }

/* Mobile — the desktop arena collapses to single column; keep the in-card
   recruiter intact (it's already vertical inside a fixed-aspect card). */
@media (max-width: 900px) {
	.om2gle-arena-side .om2gle-side-label-row { padding-left: 0; }
	.om2gle-vs-tag b { letter-spacing: 0.22em; }
}

/* =====================================================================
   BOSS MODE pill + self-contained cart drawer
   Scoped under #om2gle-app so theme styles never leak in. Visible only
   when WooCommerce is active (JS hides the pill otherwise).
   ===================================================================== */
#om2gle-app .om2gle-boss-pill {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
	margin-top: 10px;
	padding: 9px 14px 8px;
	background: linear-gradient(180deg, rgba(229, 165, 66, 0.08), rgba(229, 165, 66, 0.02));
	border: 1px solid rgba(229, 165, 66, 0.32);
	border-radius: 12px;
	color: var(--ink);
	font: inherit;
	cursor: pointer;
	text-align: left;
	overflow: hidden;
	transition: border-color 160ms ease, background 200ms ease, transform 160ms ease, box-shadow 200ms ease;
	box-shadow: 0 0 0 0 rgba(229, 165, 66, 0);
	-webkit-tap-highlight-color: transparent;
}
#om2gle-app .om2gle-boss-pill:hover {
	border-color: rgba(229, 165, 66, 0.6);
	background: linear-gradient(180deg, rgba(229, 165, 66, 0.14), rgba(229, 165, 66, 0.04));
	transform: translateY(-1px);
	box-shadow: 0 8px 24px -16px rgba(229, 165, 66, 0.6);
}
#om2gle-app .om2gle-boss-pill:active { transform: translateY(0); }
#om2gle-app .om2gle-boss-pill:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}
/* The slow gold glow sweep — only visible on the not-owned state to act as
   the "look at me" hook. Once owned it goes quiet. */
#om2gle-app .om2gle-boss-pill-glow {
	pointer-events: none;
	position: absolute;
	inset: -40% -10%;
	background: radial-gradient(
		ellipse at 30% 50%,
		rgba(229, 165, 66, 0.22) 0%,
		rgba(229, 165, 66, 0) 60%
	);
	opacity: 0.55;
	animation: om2gleBossGlow 4.5s ease-in-out infinite;
}
@keyframes om2gleBossGlow {
	0%, 100% { transform: translateX(-10%); opacity: 0.25; }
	50%       { transform: translateX(40%);  opacity: 0.65; }
}
#om2gle-app .om2gle-boss-pill[data-owned="1"] .om2gle-boss-pill-glow { display: none; }

#om2gle-app .om2gle-boss-pill-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--mono, ui-monospace, "JetBrains Mono", monospace);
	font-size: 11.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold-pale);
}
#om2gle-app .om2gle-boss-pill-tag {
	color: var(--gold-pale);
	font-weight: 600;
}
#om2gle-app .om2gle-boss-pill-price {
	margin-left: auto;
	padding: 3px 8px;
	background: rgba(229, 165, 66, 0.16);
	border: 1px solid rgba(229, 165, 66, 0.35);
	border-radius: 999px;
	color: var(--gold);
	font-weight: 600;
	letter-spacing: 0.1em;
}
#om2gle-app .om2gle-boss-pill-state {
	margin-left: auto;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 10.5px;
	letter-spacing: 0.18em;
	font-weight: 700;
}
#om2gle-app .om2gle-boss-pill[data-active="0"] .om2gle-boss-pill-state {
	background: rgba(106, 96, 82, 0.18);
	border: 1px solid rgba(106, 96, 82, 0.35);
	color: var(--mute);
}
#om2gle-app .om2gle-boss-pill[data-active="1"] .om2gle-boss-pill-state {
	background: var(--gold);
	border: 1px solid var(--gold-pale);
	color: #1a1107;
	box-shadow: 0 0 14px var(--gold-glow);
}
#om2gle-app .om2gle-boss-pill[data-active="1"] {
	border-color: rgba(229, 165, 66, 0.55);
	background: linear-gradient(180deg, rgba(229, 165, 66, 0.16), rgba(229, 165, 66, 0.05));
	box-shadow: 0 0 0 1px rgba(229, 165, 66, 0.18), 0 0 30px -10px var(--gold-glow);
}
#om2gle-app .om2gle-boss-pill-sub {
	color: var(--mute);
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: none;
	font-family: inherit;
}

/* ---------- cart drawer ---------- */
#om2gle-app ~ .om2gle-cart-backdrop,
.om2gle-cart-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(6, 4, 3, 0.55);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	z-index: 9000;
	opacity: 0;
	transition: opacity 220ms ease;
}
.om2gle-cart-backdrop.is-open { opacity: 1; }

.om2gle-cart-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(420px, 92vw);
	background: #100c08;
	border-left: 1px solid rgba(229, 165, 66, 0.18);
	box-shadow: -28px 0 60px -20px rgba(0, 0, 0, 0.7);
	z-index: 9001;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 240ms cubic-bezier(0.4, 0.0, 0.2, 1);
	color: var(--ink);
	font-family: var(--ui, inherit);
}
.om2gle-cart-drawer.is-open { transform: translateX(0); }

.om2gle-cart-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 22px 22px 16px;
	border-bottom: 1px solid rgba(229, 165, 66, 0.1);
}
.om2gle-cart-eyebrow {
	font-family: var(--mono, ui-monospace, monospace);
	font-size: 10.5px;
	letter-spacing: 0.28em;
	color: var(--mute);
	margin-bottom: 4px;
}
.om2gle-cart-title {
	margin: 0;
	font-family: var(--serif, "Instrument Serif", Georgia, serif);
	font-size: 28px;
	font-weight: 400;
	color: var(--gold-pale);
	letter-spacing: 0.01em;
}
.om2gle-cart-close {
	background: transparent;
	border: 1px solid rgba(229, 165, 66, 0.22);
	color: var(--ink-2);
	width: 32px; height: 32px;
	border-radius: 8px;
	font-size: 16px;
	cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.om2gle-cart-close:hover {
	border-color: rgba(229, 165, 66, 0.5);
	color: var(--gold);
	background: rgba(229, 165, 66, 0.06);
}

.om2gle-cart-body {
	flex: 1;
	overflow-y: auto;
	padding: 18px 22px;
}
.om2gle-cart-empty {
	text-align: center;
	color: var(--mute);
	padding: 60px 0;
	font-style: italic;
}
.om2gle-cart-item {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 14px;
	align-items: center;
	padding: 14px 0;
	border-bottom: 1px solid rgba(229, 165, 66, 0.06);
}
.om2gle-cart-item:last-child { border-bottom: 0; }
.om2gle-cart-item-name {
	color: var(--ink);
	font-weight: 500;
	letter-spacing: 0.01em;
	margin-bottom: 2px;
}
.om2gle-cart-item-sub {
	font-size: 12px;
	color: var(--mute);
}
.om2gle-cart-item-price {
	font-family: var(--mono, ui-monospace, monospace);
	font-variant-numeric: tabular-nums;
	color: var(--gold);
	font-weight: 600;
	letter-spacing: 0.04em;
}
.om2gle-cart-item-remove {
	background: transparent;
	border: 0;
	color: var(--mute);
	padding: 4px 6px;
	cursor: pointer;
	font-size: 14px;
	border-radius: 6px;
	transition: color 160ms ease, background 160ms ease;
}
.om2gle-cart-item-remove:hover {
	color: var(--rose);
	background: rgba(214, 99, 143, 0.06);
}

.om2gle-cart-foot {
	padding: 18px 22px 22px;
	border-top: 1px solid rgba(229, 165, 66, 0.1);
	background: linear-gradient(180deg, rgba(229, 165, 66, 0.04), rgba(0, 0, 0, 0));
}
.om2gle-cart-totals {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 14px;
	font-family: var(--mono, ui-monospace, monospace);
}
.om2gle-cart-totals-label {
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--mute);
}
.om2gle-cart-totals-value {
	font-size: 22px;
	color: var(--gold);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	font-weight: 600;
}
.om2gle-cart-checkout {
	display: block;
	width: 100%;
	text-align: center;
	text-decoration: none;
	margin-bottom: 10px;
}
.om2gle-cart-keep {
	background: transparent;
	border: 0;
	color: var(--mute);
	width: 100%;
	padding: 6px 0;
	font: inherit;
	cursor: pointer;
	letter-spacing: 0.16em;
	font-size: 11px;
	text-transform: uppercase;
}
.om2gle-cart-keep:hover { color: var(--gold); }

@media (max-width: 480px) {
	.om2gle-cart-drawer { width: 100vw; border-left: 0; }
	.om2gle-cart-head { padding: 18px 16px 12px; }
	.om2gle-cart-body { padding: 14px 16px; }
	.om2gle-cart-foot { padding: 14px 16px 18px; }
	#om2gle-app .om2gle-boss-pill-sub { font-size: 10.5px; }
}

/* ============================================================================
   YOU CARD — "Take locked" overlay (async-host come-back state).
   Replaces the note glyph with a score badge so the user returning to the
   lobby after recording sees a *visibly different* card instead of a near-
   identical screen with one line of copy changed. JS toggles [hidden] on
   #om2gle-you-locked when state.duel.youDone === true in friend mode.
============================================================================ */
.om2gle-you-locked {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 24px 18px;
	border-radius: inherit;
	background:
		radial-gradient(ellipse at 50% 38%, rgba(229, 165, 66, 0.22) 0%, rgba(229, 165, 66, 0) 60%),
		linear-gradient(180deg, #1a1208 0%, #0d0905 100%);
	z-index: 2;
	animation: om2-locked-flip 520ms cubic-bezier(.18,.9,.25,1) both;
	transform-origin: center;
}
.om2gle-you-locked[hidden] { display: none; }

/* When the locked overlay is showing, hide the underlying glyph + caption so
   they don't ghost through. Keeps the corners (gold brackets) and the orb
   canvas (subtle ambient ring) visible for continuity. */
.om2gle-card.is-you:has(.om2gle-you-locked:not([hidden])) .om2gle-orb-glyph { opacity: 0; }
.om2gle-card.is-you:has(.om2gle-you-locked:not([hidden])) .om2gle-card-caption { opacity: 0; }

.om2gle-you-locked-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: #0b0907;
	background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep, #c98a2e) 100%);
	padding: 5px 12px 4px;
	border-radius: 999px;
	box-shadow: 0 0 18px -4px rgba(229, 165, 66, 0.7);
}
.om2gle-you-locked-check {
	font-size: 11px;
	font-weight: 900;
	color: #0b0907;
}

.om2gle-you-locked-score {
	display: inline-flex;
	align-items: baseline;
	font-family: var(--serif);
	color: var(--gold-pale);
	line-height: 1;
	text-shadow: 0 0 24px rgba(229, 165, 66, 0.35);
}
.om2gle-you-locked-score-num {
	font-size: clamp(64px, 12vw, 110px);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--gold);
}
.om2gle-you-locked-score-denom {
	font-size: clamp(20px, 3vw, 28px);
	color: var(--gold-soft);
	margin-left: 4px;
	opacity: 0.7;
}

.om2gle-you-locked-bars {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: min(180px, 80%);
}
.om2gle-you-locked-bar {
	display: grid;
	grid-template-columns: 50px 1fr;
	align-items: center;
	gap: 10px;
	font-family: var(--mono);
	font-size: 9px;
	letter-spacing: 0.14em;
	text-transform: lowercase;
	color: var(--ink-2);
}
.om2gle-you-locked-bar-track {
	height: 4px;
	background: rgba(229, 165, 66, 0.1);
	border-radius: 2px;
	overflow: hidden;
}
.om2gle-you-locked-bar-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--gold-deep, #c98a2e), var(--gold));
	border-radius: 2px;
	transform-origin: left center;
	animation: om2-locked-bar-fill 700ms cubic-bezier(.2,.8,.25,1) both;
}

.om2gle-you-locked-foot {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ink-2);
	margin-top: 2px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.om2gle-you-locked-foot::before {
	content: '';
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--rose);
	box-shadow: 0 0 8px rgba(214, 99, 143, 0.7);
	animation: om2-locked-pulse 1.6s ease-in-out infinite;
}

@keyframes om2-locked-flip {
	0%   { opacity: 0; transform: rotateX(-70deg) scale(0.92); filter: blur(6px); }
	60%  { opacity: 1; transform: rotateX(8deg)   scale(1.02); filter: blur(0); }
	100% { opacity: 1; transform: rotateX(0)      scale(1);    filter: blur(0); }
}
@keyframes om2-locked-bar-fill {
	from { transform: scaleX(0); }
	to   { transform: scaleX(var(--f, 1)); }
}
@keyframes om2-locked-pulse {
	0%, 100% { transform: scale(0.85); opacity: 0.6; }
	50%      { transform: scale(1.2);  opacity: 1;   }
}

/* ============================================================================
   DUEL GUEST — the "you've been challenged" landing.
   Single-action screen: see the host, see the note, sing your take. No
   note picker (note is locked), no mode dial (you're not choosing a mode,
   you opened a link), no recruiter (you ARE the recruit).
   Visual treatment leans theatrical — rose accent for the host's name
   (they're the opponent from the guest's POV), gold for the note + CTA.
============================================================================ */
.om2gle-screen-guest {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 32px 20px;
}
.om2gle-guest {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	max-width: 480px;
	width: 100%;
	min-width: 0;
	text-align: center;
	animation: om2-guest-enter 580ms cubic-bezier(.2,.8,.25,1) both;
}

.om2gle-guest-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.36em;
	text-transform: uppercase;
	color: var(--rose);
	margin-bottom: 4px;
}
.om2gle-guest-tag {
	position: relative;
	padding: 0 4px;
}
.om2gle-guest-tag::before,
.om2gle-guest-tag::after {
	content: '⚔';
	font-size: 11px;
	margin: 0 8px;
	color: var(--rose);
	opacity: 0.7;
}
.om2gle-guest-tag::before { margin-right: 10px; }
.om2gle-guest-tag::after  { margin-left: 10px; }

.om2gle-guest-by {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: lowercase;
	color: var(--ink-2);
	margin-top: 8px;
}
.om2gle-guest-host {
	font-family: var(--serif);
	font-size: clamp(28px, 5vw, 40px);
	font-weight: 700;
	letter-spacing: 0.005em;
	color: var(--rose);
	text-shadow: 0 0 24px rgba(214, 99, 143, 0.35);
	line-height: 1;
	margin-top: 2px;
	max-width: 100%;
	overflow-wrap: anywhere;
	animation: om2-guest-host-glow 2.6s ease-in-out infinite;
}

.om2gle-guest-arena {
	margin-top: 14px;
	margin-bottom: 4px;
	display: flex;
	justify-content: center;
}
/* Subtle scale-up so the card lands as the hero element on this screen
   without re-doing all the .om2gle-card sizing — keeps it consistent with
   the stage's P1 card metaphor but bigger here since it stands alone. */
.om2gle-screen-guest .om2gle-card.is-you {
	width: clamp(260px, 32vw, 320px);
	max-height: 420px;
}

.om2gle-guest-rules {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: lowercase;
	color: var(--ink-2);
	margin: 6px 0 10px;
	max-width: 360px;
}

/* The Sing CTA — extra ceremony for the guest moment. Wider, more glow,
   a subtle ring-pulse to draw the eye since it's the only action on
   screen. */
.om2gle-guest-sing {
	position: relative;
	min-width: 260px;
	padding: 16px 26px;
}
.om2gle-guest-sing::after {
	content: '';
	position: absolute;
	inset: -6px;
	border-radius: 14px;
	border: 1px solid rgba(229, 165, 66, 0.32);
	pointer-events: none;
	animation: om2-guest-cta-pulse 2.2s ease-out infinite;
}
@keyframes om2-guest-cta-pulse {
	0%   { opacity: 0.9; transform: scale(1);    }
	100% { opacity: 0;   transform: scale(1.06); }
}

.om2gle-guest-foot {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--mute);
}
.om2gle-guest-privacy {
	font-family: var(--mono);
	font-size: 11px;
}
.om2gle-guest-foot-sep { color: var(--mute-2); }
.om2gle-guest-me { color: var(--ink-2); }
.om2gle-guest-me b {
	color: var(--gold-soft);
	font-weight: 600;
}
.om2gle-guest-leave {
	appearance: none;
	background: transparent;
	border: 0;
	padding: 4px 6px;
	color: var(--mute);
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	cursor: pointer;
	border-radius: 6px;
	transition: color 160ms ease, background 160ms ease;
}
.om2gle-guest-leave:hover {
	color: var(--rose);
	background: rgba(214, 99, 143, 0.06);
}

@keyframes om2-guest-enter {
	0%   { opacity: 0; transform: translateY(14px); filter: blur(6px); }
	100% { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
@keyframes om2-guest-host-glow {
	0%, 100% { text-shadow: 0 0 24px rgba(214, 99, 143, 0.35); }
	50%      { text-shadow: 0 0 36px rgba(214, 99, 143, 0.6),
	                       0 0 64px rgba(214, 99, 143, 0.25); }
}

/* Mobile: tighten everything to phone-native rhythm. */
@media (max-width: 720px) {
	.om2gle-screen-guest { padding: 24px 16px; }
	.om2gle-guest { gap: 14px; }
	.om2gle-guest-host { font-size: clamp(24px, 7vw, 32px); }
	.om2gle-screen-guest .om2gle-card.is-you { width: min(60vw, 240px); }
	.om2gle-guest-sing { width: 100%; min-width: 0; }
	.om2gle-guest-foot { flex-direction: column; gap: 8px; }
	.om2gle-guest-foot-sep { display: none; }
}

/* ============================================================================
   The M2GG'D Drop — share-clip button + modal
   ----------------------------------------------------------------------------
   Reveal-stage CTA that opens a fullscreen sheet, renders a 9:16 video into
   a hidden canvas via MediaRecorder, then surfaces it for native-share or
   save. The dock floats above both the standard reveal actions and the
   auto-next chain countdown so the share path survives chain mode (where
   theater-actions is hidden in favor of the autonext panel).
   Aesthetic: warm-gold spotlight on the win path, magenta-rivalry tint on
   the loss path; same cosmic backdrop as the rest of the stage.
============================================================================ */
.om2gle-drop-dock {
	display: flex;
	justify-content: center;
	margin: 18px auto 0;
	width: 100%;
	max-width: 720px;
	padding: 0 16px;
}
.om2gle-drop-dock[hidden] { display: none; }
@media (max-width: 480px) {
	.om2gle-drop-dock {
		position: sticky;
		bottom: env(safe-area-inset-bottom, 0px);
		margin-top: 16px;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
		background: linear-gradient(180deg, rgba(11, 9, 7, 0) 0%, rgba(11, 9, 7, 0.85) 35%, rgba(11, 9, 7, 0.95) 100%);
		z-index: 5;
	}
}

.om2gle-btn-drop {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-width: 220px;
	padding: 14px 28px;
	border-radius: 999px;
	background: linear-gradient(135deg, #f4d191 0%, #e5a542 50%, #c98a2c 100%);
	color: #0b0907;
	border: 1px solid var(--gold-pale);
	font-family: var(--sans);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow:
		0 18px 50px -18px rgba(229, 165, 66, 0.85),
		0 0 0 1px rgba(244, 209, 145, 0.4) inset;
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.om2gle-btn-drop::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%);
	transform: translateX(-100%);
	animation: om2gle-drop-shine 3.4s ease-in-out infinite;
	pointer-events: none;
	z-index: -1;
}
@keyframes om2gle-drop-shine {
	0%, 60% { transform: translateX(-100%); }
	75%     { transform: translateX(100%); }
	100%    { transform: translateX(100%); }
}
.om2gle-btn-drop:hover { transform: translateY(-1px); filter: saturate(1.1); }
.om2gle-btn-drop:active { transform: translateY(1px); }
.om2gle-btn-drop[disabled] { opacity: 0.7; cursor: progress; }
.om2gle-btn-drop.is-loss {
	background: linear-gradient(135deg, #ffd5e5 0%, #d6638f 55%, #b34c75 100%);
	border-color: #ffd5e5;
	box-shadow:
		0 18px 50px -18px rgba(214, 99, 143, 0.85),
		0 0 0 1px rgba(255, 213, 229, 0.4) inset;
}
.om2gle-btn-drop.is-tie {
	background: linear-gradient(135deg, #f3e9d4 0%, #c9bca0 60%, #8c7f6b 100%);
	border-color: #f3e9d4;
	box-shadow:
		0 18px 50px -18px rgba(201, 188, 160, 0.75),
		0 0 0 1px rgba(243, 233, 212, 0.4) inset;
}
.om2gle-btn-drop .om2gle-drop-icon {
	display: none;
}
.om2gle-btn-drop .om2gle-drop-label {
	font-size: 14px;
	letter-spacing: 0.22em;
	line-height: 1;
}
.om2gle-btn-drop .om2gle-drop-sub {
	font-family: var(--mono);
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.18em;
	opacity: 0.78;
	text-transform: uppercase;
	margin-top: 4px;
}

/* —— Drop modal —————————————————————————————————————— */
.om2gle-drop-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(4, 3, 2, 0.78);
	-webkit-backdrop-filter: blur(18px) saturate(1.05);
	backdrop-filter: blur(18px) saturate(1.05);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	overflow-y: auto;
	font-family: var(--sans);
	color: var(--ink);
	animation: om2gle-drop-fade .22s ease both;
}
@keyframes om2gle-drop-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
.om2gle-drop-backdrop[hidden] { display: none !important; }

.om2gle-drop-sheet {
	background: linear-gradient(180deg, #15110d 0%, #0b0907 100%);
	border: 1px solid var(--rule-2);
	border-radius: 28px;
	max-width: 480px;
	width: 100%;
	padding: 24px;
	position: relative;
	box-shadow:
		0 60px 120px -40px rgba(229, 165, 66, 0.35),
		0 0 0 1px rgba(229, 165, 66, 0.18) inset;
	animation: om2gle-drop-rise .28s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes om2gle-drop-rise {
	from { transform: translateY(18px) scale(0.98); opacity: 0; }
	to   { transform: translateY(0) scale(1); opacity: 1; }
}
.om2gle-drop-close {
	position: absolute;
	top: 16px;
	right: 16px;
	background: transparent;
	border: 1px solid var(--rule-2);
	color: var(--ink-2);
	width: 36px;
	height: 36px;
	border-radius: 999px;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.om2gle-drop-close:hover {
	color: var(--gold);
	border-color: var(--gold);
}

.om2gle-drop-head {
	text-align: center;
	margin-bottom: 18px;
}
.om2gle-drop-eyebrow {
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.28em;
	color: var(--gold);
	text-transform: uppercase;
	margin-bottom: 6px;
}
.om2gle-drop-title {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: 32px;
	line-height: 1.1;
	margin: 0;
	color: var(--ink);
}

.om2gle-drop-preview {
	position: relative;
	aspect-ratio: 9 / 16;
	width: 100%;
	border-radius: 18px;
	overflow: hidden;
	background: #060403;
	border: 1px solid var(--rule-2);
	box-shadow: 0 30px 60px -30px rgba(229, 165, 66, 0.35);
}
.om2gle-drop-canvas,
.om2gle-drop-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.om2gle-drop-video {
	background: #060403;
}
.om2gle-drop-canvas[hidden],
.om2gle-drop-video[hidden] { display: none; }

.om2gle-drop-overlay {
	position: absolute;
	inset: 0;
	background: rgba(6, 4, 3, 0.7);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 24px;
}
.om2gle-drop-overlay[hidden] { display: none; }
.om2gle-drop-spinner {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 3px solid rgba(229, 165, 66, 0.2);
	border-top-color: var(--gold);
	animation: om2gle-drop-spin 0.9s linear infinite;
}
@keyframes om2gle-drop-spin {
	to { transform: rotate(360deg); }
}
.om2gle-drop-status {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink);
	text-align: center;
}
.om2gle-drop-bar {
	width: 70%;
	height: 4px;
	background: rgba(243, 233, 212, 0.12);
	border-radius: 999px;
	overflow: hidden;
}
.om2gle-drop-bar-fill {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, var(--gold) 0%, var(--gold-pale) 100%);
	transition: width 0.15s ease;
	border-radius: 999px;
}

.om2gle-drop-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 18px;
}
.om2gle-drop-actions[hidden] { display: none; }
.om2gle-drop-actions .om2gle-btn {
	width: 100%;
	justify-content: center;
}
.om2gle-drop-actions .om2gle-btn-primary {
	padding: 16px 24px;
	font-size: 14px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.om2gle-drop-hint {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mute);
	text-align: center;
	margin-top: 14px;
	line-height: 1.5;
}

/* Phone-narrow tweaks — slightly tighter chrome so the preview stays the
   star of the sheet without the canvas getting cropped. */
@media (max-width: 480px) {
	.om2gle-drop-backdrop { padding: 0; }
	.om2gle-drop-sheet {
		border-radius: 0;
		max-width: 100%;
		min-height: 100dvh;
		padding: 20px 16px 24px;
	}
	.om2gle-drop-title { font-size: 28px; }
	.om2gle-btn-drop { min-width: 100%; }
}

/* ─────────────────────────────────────────────────────────────────────────
   WALK-OFF — 3s cinematic between reveal and auto-next.
   Driven by JS adding staged classes on .om2gle-side after reveal:
     .is-walkoff-stamp     stamp impact on the loser's outcome label   (t=0.0)
     .is-walkoff-drain     loser desaturates, faint cracks bloom       (t=0.4)
     .is-walkoff-dissolve  loser handle burns up + embers drift        (t=1.2)
     .is-walkoff-victor    winner gold-glows + scales up               (t=1.2)
     .is-walkoff-final     final pulse + chime moment                  (t=2.4)
   Audio + haptic are fired from JS; this file only handles visuals.
   ───────────────────────────────────────────────────────────────────────── */

/* Stamp impact — the M2GGED label punches in with overshoot + flash. */
.om2gle-outcome-label.is-loss.is-walkoff-stamp {
	animation: om2-walkoff-stamp 420ms cubic-bezier(.2,.9,.25,1.2) both;
	will-change: transform, box-shadow, opacity;
}
@keyframes om2-walkoff-stamp {
	0%   { transform: scale(2.4) rotate(-6deg); opacity: 0; box-shadow: 0 0 0 0 rgba(214, 99, 143, 0); letter-spacing: 0.6em; }
	35%  { transform: scale(0.86) rotate(-2deg); opacity: 1; box-shadow: 0 0 0 14px rgba(214, 99, 143, 0.28); letter-spacing: 0.32em; }
	60%  { transform: scale(1.08) rotate(-2deg); box-shadow: 0 0 0 22px rgba(214, 99, 143, 0); }
	100% { transform: scale(1) rotate(-2deg); opacity: 1; box-shadow: 0 0 0 0 rgba(214, 99, 143, 0); }
}

/* Loser drain — desaturate the side, cool the chrome, bloom hairline cracks. */
.om2gle-side.is-walkoff-drain {
	transition: filter 800ms ease, border-color 800ms ease, background 800ms ease;
	filter: saturate(0.18) brightness(0.78);
	border-color: rgba(243, 233, 212, 0.06);
}
.om2gle-side.is-walkoff-drain .om2gle-side-eyebrow,
.om2gle-side.is-walkoff-drain .om2gle-side-handle,
.om2gle-side.is-walkoff-drain .om2gle-side-score-value {
	transition: color 800ms ease;
	color: var(--mute-2);
}
.om2gle-side.is-walkoff-drain::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(118deg, transparent 0%, transparent 38%, rgba(243, 233, 212, 0.14) 38.2%, transparent 38.4%, transparent 62%, rgba(243, 233, 212, 0.08) 62.2%, transparent 62.4%, transparent 100%),
		linear-gradient(74deg, transparent 0%, transparent 51%, rgba(243, 233, 212, 0.10) 51.15%, transparent 51.3%, transparent 100%);
	opacity: 0;
	animation: om2-walkoff-crack 800ms ease-out forwards;
	mix-blend-mode: screen;
}
@keyframes om2-walkoff-crack {
	0%   { opacity: 0; }
	35%  { opacity: 1; }
	100% { opacity: 0.65; }
}

/* Loser dissolve — handle text burns upward, embers drift, slab tilts back. */
.om2gle-side.is-walkoff-dissolve {
	transition: transform 1200ms cubic-bezier(.4,.0,.7,.4), opacity 1200ms ease;
	transform: scale(0.96) translateY(4px);
}
.om2gle-side.is-walkoff-dissolve .om2gle-side-handle {
	animation: om2-walkoff-burn 1100ms cubic-bezier(.4,.0,.7,.4) both;
	will-change: transform, filter, opacity;
}
.om2gle-side.is-walkoff-dissolve .om2gle-side-score-value {
	transition: color 1000ms ease, opacity 1000ms ease;
	opacity: 0.35;
}
@keyframes om2-walkoff-burn {
	0%   { transform: translateY(0) scale(1); filter: blur(0) brightness(1); opacity: 1; }
	30%  { filter: blur(0.5px) brightness(1.4); color: var(--gold-pale); }
	100% { transform: translateY(-22px) scale(1.04); filter: blur(6px) brightness(0.6); opacity: 0; }
}

/* Embers — pseudo-element layer rising from the slab. */
.om2gle-side.is-walkoff-dissolve::after {
	content: "";
	position: absolute;
	left: 0; right: 0;
	top: 30%; bottom: 0;
	pointer-events: none;
	background:
		radial-gradient(circle 1.5px at 20% 80%,  rgba(244, 209, 145, 0.9) 0%, transparent 100%),
		radial-gradient(circle 1px   at 35% 65%,  rgba(229, 165, 66, 0.85) 0%, transparent 100%),
		radial-gradient(circle 2px   at 50% 90%,  rgba(244, 209, 145, 0.75) 0%, transparent 100%),
		radial-gradient(circle 1px   at 62% 55%,  rgba(214, 99, 143, 0.7)  0%, transparent 100%),
		radial-gradient(circle 1.5px at 78% 78%,  rgba(229, 165, 66, 0.9)  0%, transparent 100%),
		radial-gradient(circle 1px   at 88% 60%,  rgba(244, 209, 145, 0.8) 0%, transparent 100%),
		radial-gradient(circle 1px   at 12% 50%,  rgba(229, 165, 66, 0.7)  0%, transparent 100%),
		radial-gradient(circle 1.5px at 45% 40%,  rgba(244, 209, 145, 0.6) 0%, transparent 100%);
	animation: om2-walkoff-embers 1500ms cubic-bezier(.3,.7,.4,1) forwards;
	will-change: transform, opacity;
	mix-blend-mode: screen;
	filter: drop-shadow(0 0 3px rgba(229, 165, 66, 0.5));
}
@keyframes om2-walkoff-embers {
	0%   { opacity: 0; transform: translateY(20px) scale(0.9); }
	20%  { opacity: 1; }
	70%  { opacity: 0.85; }
	100% { opacity: 0; transform: translateY(-140%) scale(1.15); }
}

/* Winner — gold halo, scale up, score brightens, handle re-pulses. */
.om2gle-side.is-walkoff-victor {
	transition: transform 900ms cubic-bezier(.2,.8,.3,1), box-shadow 900ms ease, border-color 900ms ease;
	transform: scale(1.04);
	border-color: rgba(229, 165, 66, 0.55);
	box-shadow:
		0 0 0 1px rgba(229, 165, 66, 0.25),
		0 0 32px 0 rgba(229, 165, 66, 0.22),
		0 0 80px 0 rgba(229, 165, 66, 0.12);
	z-index: 2;
}
.om2gle-side.is-walkoff-victor .om2gle-side-handle {
	transition: color 700ms ease, text-shadow 700ms ease;
	color: var(--gold-pale);
	text-shadow: 0 0 18px rgba(229, 165, 66, 0.45);
}
.om2gle-side.is-walkoff-victor .om2gle-side-score-value {
	transition: color 700ms ease, text-shadow 700ms ease;
	color: var(--gold);
	text-shadow: 0 0 22px rgba(229, 165, 66, 0.4);
}

/* Final beat — winner handle pulses once with the chime. */
.om2gle-side.is-walkoff-final .om2gle-side-handle {
	animation: om2-walkoff-chime 520ms cubic-bezier(.2,.9,.25,1.1) both;
}
@keyframes om2-walkoff-chime {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.08); text-shadow: 0 0 28px rgba(229, 165, 66, 0.75); }
	100% { transform: scale(1); }
}

/* Reduced motion: skip the cinematic, just hold the reveal frame. */
@media (prefers-reduced-motion: reduce) {
	.om2gle-outcome-label.is-loss.is-walkoff-stamp,
	.om2gle-side.is-walkoff-drain,
	.om2gle-side.is-walkoff-dissolve,
	.om2gle-side.is-walkoff-dissolve .om2gle-side-handle,
	.om2gle-side.is-walkoff-dissolve::after,
	.om2gle-side.is-walkoff-victor,
	.om2gle-side.is-walkoff-final .om2gle-side-handle {
		animation: none !important;
		transition: none !important;
	}
	.om2gle-side.is-walkoff-dissolve::after { display: none; }
}

/* ============================================================================
   Mode-picker splash (login_wall) — two cards + Boss strip
   ----------------------------------------------------------------------------
   Each card is a single clickable surface (a <button>) wrapping the teaser
   slot and the body. The whole card is the tap target so users don't have
   to thread the CTA at the bottom. Cards lift on hover and the Boss strip
   sits beneath them as a tertiary, gold-treated row.
============================================================================ */
.om2gle-modes-stack {
	gap: clamp(16px, 2.4vh, 26px);
	width: 100%;
	/* Three-card splash needs more lateral room than the 920px default of
	   .om2gle-stack-center — at 1080px the Versus teaser's P1│VS│P2 inner
	   grid clipped its P2 column. 1280px gives each card ≈ 412px on a 3-up
	   row, which clears the 140px min-handle widths comfortably. */
	max-width: 1280px;
}

.om2gle-modes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(14px, 2vw, 22px);
	width: 100%;
	align-items: stretch;
	position: relative;  /* anchor for .om2gle-modes-ping ripples */
}

/* ---- "Tap a mode to play" prompt (directive above the cards) ----
   The teasers inside the cards loop on a 9s animation and read as
   "demos", not "buttons". This prompt + the bouncing arrows make it
   loud that the cards below are tap targets. Hidden when reduced motion. */
.om2gle-modes-prompt {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: 100%;
	margin: 2px 0 -6px;
}
.om2gle-modes-prompt-line {
	height: 1px;
	flex: 0 1 80px;
	background: linear-gradient(90deg, transparent, var(--gold));
}
.om2gle-modes-prompt-line:last-child {
	background: linear-gradient(-90deg, transparent, var(--gold));
}
.om2gle-modes-prompt-text {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--gold-pale);
	white-space: nowrap;
}
.om2gle-modes-prompt-label {
	text-shadow: 0 0 12px var(--gold-glow);
}
.om2gle-modes-prompt-arrow {
	display: inline-block;
	font-size: 16px;
	color: var(--gold);
	animation: om2-modes-prompt-bounce 1.3s ease-in-out infinite;
	line-height: 1;
}
.om2gle-modes-prompt-arrow:last-child { animation-delay: 0.18s; }
@keyframes om2-modes-prompt-bounce {
	0%, 100% { transform: translateY(-3px); opacity: 0.5; }
	50%      { transform: translateY(4px);  opacity: 1; }
}

/* ---- Tap-ping rings (alternating attention pulses) ----
   Sibling spans inside .om2gle-modes (not inside the card buttons) so the
   rings can ripple outward past the cards' overflow:hidden boxes. Card A
   pings at t=0, Card B at t=2s — they alternate every 2s on a 4s loop.
   pointer-events:none keeps the cards clickable through the rings. */
.om2gle-modes-ping {
	position: absolute;
	width: 110px;
	height: 110px;
	border: 2px solid var(--gold);
	border-radius: 50%;
	pointer-events: none;
	z-index: 5;
	opacity: 0;
	box-shadow: 0 0 24px var(--gold-glow), inset 0 0 12px var(--gold-glow);
	animation: om2-mode-ping 4s ease-out infinite;
}
.om2gle-modes-ping.om2-ping-a {
	top: 50%;
	left: 25%;
	transform: translate(-50%, -50%);
}
.om2gle-modes-ping.om2-ping-b {
	top: 50%;
	left: 75%;
	transform: translate(-50%, -50%);
	border-color: var(--rose);
	box-shadow: 0 0 24px rgba(214, 99, 143, 0.45), inset 0 0 12px rgba(214, 99, 143, 0.35);
	animation-delay: 2s;
}
@keyframes om2-mode-ping {
	0%   { opacity: 0;   transform: translate(-50%, -50%) scale(0.45); }
	8%   { opacity: 0.9; transform: translate(-50%, -50%) scale(0.7);  }
	45%  { opacity: 0;   transform: translate(-50%, -50%) scale(1.9);  }
	100% { opacity: 0;   transform: translate(-50%, -50%) scale(2.1);  }
}

@media (prefers-reduced-motion: reduce) {
	.om2gle-modes-prompt-arrow,
	.om2gle-modes-ping,
	.om2gle-mode-card-cta::before { animation: none; }
	.om2gle-modes-ping { display: none; }
}

.om2gle-mode-card {
	/* button reset — these are <button> elements but need to look like cards */
	all: unset;
	-webkit-tap-highlight-color: transparent;
	display: flex;
	flex-direction: column;
	cursor: pointer;
	border: 1px solid var(--gold);
	background: linear-gradient(180deg, #15110c 0%, #0d0a07 100%);
	overflow: hidden;
	box-sizing: border-box;
	transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
	box-shadow:
		0 0 0 1px var(--gold) inset,
		0 0 48px -16px var(--gold-glow),
		0 16px 50px -28px var(--gold-glow);
}
.om2gle-mode-card:hover,
.om2gle-mode-card:focus-visible {
	transform: translateY(-2px);
	border-color: var(--gold-pale);
	box-shadow:
		0 0 0 1px var(--gold-pale) inset,
		0 0 80px -10px var(--gold-glow),
		0 24px 80px -24px var(--gold-glow);
}
.om2gle-mode-card:focus-visible {
	outline: 2px solid var(--gold-pale);
	outline-offset: 2px;
}
.om2gle-mode-card:active {
	transform: translateY(0);
}

/* Teasers nested in a mode card should not duplicate the card's chrome —
   the card itself owns the border + glow. Padding stays so the teaser's
   internal layout (status, stage, bars) keeps its breathing room. */
.om2gle-mode-card-teaser {
	display: block;
	width: 100%;
}
.om2gle-mode-card .om2gle-teaser {
	width: 100%;
	border: none;
	box-shadow: none;
}
.om2gle-mode-card .om2gle-teaser::before { display: none; }

/* Body sits beneath the teaser, divided by a faint rule. Text is left-aligned
   so it reads as the card's signature, not a generic centered caption. The
   body flex-grows so when the parent card stretches (3-up grid with cards
   of different teaser heights — see Card C arcade), the CTA bar can ride
   to the bottom via margin-top: auto below instead of leaving dead space. */
.om2gle-mode-card-body {
	padding: clamp(14px, 2vh, 18px) clamp(14px, 2vw, 22px) clamp(16px, 2.4vh, 22px);
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 0 auto;
	border-top: 1px solid var(--rule-2);
	text-align: left;
	background: linear-gradient(180deg, rgba(229, 165, 66, 0.04), transparent 70%);
}
.om2gle-mode-card-eyebrow {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--gold);
}
.om2gle-mode-card-title {
	font-family: var(--serif);
	font-size: clamp(22px, 3vw, 30px);
	line-height: 1.05;
	color: var(--ink);
	letter-spacing: -0.01em;
}
.om2gle-mode-card-sub {
	font-size: 14px;
	color: var(--ink-2);
	line-height: 1.4;
}
/* Fine-print row under the subtitle on Card A. The row exists so anonymous
   self-eval is honest about seeding the opponent pool — see the inline
   comment in shell.php. Visually quiet by design: mono micro-text, dimmed
   ink, dotted underline + (i) icon on the chip to telegraph "hover for more".
   The disclosure text rides on the chip's native title= attribute, which
   escapes the card's overflow:hidden cleanly across browsers. The chip
   lives inside the card <button>, so clicks bubble up and still launch
   the self-eval flow — the disclosure is hover/long-press only. */
.om2gle-mode-card-fineprint {
	margin-top: 2px;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.04em;
	line-height: 1.45;
	color: rgba(243, 233, 212, 0.42);
}
.om2gle-fineprint-info {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	color: inherit;
	cursor: pointer;
	border-bottom: 1px dotted currentColor;
	padding-bottom: 1px;
	outline: none;
	transition: color .18s ease, border-color .18s ease;
}
.om2gle-fineprint-info:hover,
.om2gle-fineprint-info:focus-visible {
	color: var(--gold-pale);
	border-bottom-color: var(--gold);
}
.om2gle-fineprint-icon {
	font-size: 11px;
	transform: translateY(1px);
	opacity: 0.85;
}
.om2gle-fineprint-label {
	letter-spacing: 0.06em;
	text-transform: lowercase;
}
/* CTA bar — full-width filled "this is a real button" treatment.
   The card is the actual <button>; the bar is a span styled to LOOK like
   one so users scanning the page read "click this" before they parse the
   teaser animation as a demo. Negative margins extend the bar past the
   body's clamped padding so it reaches the card edges flush. An idle
   sheen sweeps across every 4s — quiet but persistent interaction tell.
   Card B (.is-versus) gets the rose variant via the .is-versus block. */
.om2gle-mode-card-cta {
	/* margin-top: auto pushes the bar to the bottom of the flex-fill body so
	   shorter teasers (Card C arcade) don't leave a dark band below the CTA.
	   Horizontal + bottom margins stay negative to flush the bar to the
	   card's edges past the body's clamped padding. */
	margin: auto
	        calc(-1 * clamp(14px, 2vw, 22px))
	        calc(-1 * clamp(16px, 2.4vh, 22px));
	padding: 14px 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-align: center;
	background: linear-gradient(180deg, rgba(229, 165, 66, 0.22) 0%, rgba(229, 165, 66, 0.12) 100%);
	border-top: 1px solid var(--gold);
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--gold-pale);
	position: relative;
	overflow: hidden;
	transition: background .25s ease, color .25s ease, letter-spacing .25s ease;
}
.om2gle-mode-card-cta::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.16) 50%, transparent 62%);
	transform: translateX(-110%);
	animation: om2-cta-sheen 4s ease-in-out infinite;
	pointer-events: none;
}
@keyframes om2-cta-sheen {
	0%, 78% { transform: translateX(-110%); }
	90% { transform: translateX(110%); }
	100% { transform: translateX(110%); }
}
.om2gle-mode-card:hover .om2gle-mode-card-cta,
.om2gle-mode-card:focus-visible .om2gle-mode-card-cta {
	background: linear-gradient(180deg, rgba(229, 165, 66, 0.42) 0%, rgba(229, 165, 66, 0.26) 100%);
	color: #fff;
	letter-spacing: 0.24em;
}

/* The standalone teaser's 140px handle min-width was sized for the wide
   solo lobby (Card A's old layout). Inside the 3-up mode picker each card
   is only ~380-410px wide, so the Versus teaser's P1│VS│P2 grid would
   clip its P2 column. Drop the min-width inside any mode card — the
   handle's font + serif rendering keeps the @ legible at narrower widths.
   The existing 720px mobile override already sets min-width:0, so this
   just extends the relaxed sizing up to desktop card contexts. */
.om2gle-mode-card .om2gle-teaser-handle { min-width: 0; }

/* ---- Card B variant (.is-versus) — rose-tinted rivalry ----
   The home picker is the one place the two-color visual code (gold-for-you /
   rose-for-rival) gets to telegraph the modes themselves: Card A stays pure
   warm gold (scout, introspective); Card B leans rose so the rivalry energy
   reads before the user even hovers. Specificity uses the compound form
   .om2gle-mode-card.is-versus so it beats the base .om2gle-mode-card rules
   that appear earlier in the cascade. */
.om2gle-mode-card.is-versus {
	border-color: var(--rose);
	box-shadow:
		0 0 0 1px var(--rose) inset,
		0 0 56px -14px rgba(214, 99, 143, 0.40),
		0 16px 50px -28px rgba(214, 99, 143, 0.28);
}
.om2gle-mode-card.is-versus:hover,
.om2gle-mode-card.is-versus:focus-visible {
	border-color: #f0a0c2;
	box-shadow:
		0 0 0 1px #f0a0c2 inset,
		0 0 90px -10px rgba(214, 99, 143, 0.55),
		0 24px 80px -22px rgba(214, 99, 143, 0.40);
}
.om2gle-mode-card.is-versus:focus-visible {
	outline-color: #f0a0c2;
}
.om2gle-mode-card.is-versus .om2gle-mode-card-eyebrow { color: var(--rose); }
.om2gle-mode-card.is-versus .om2gle-mode-card-body {
	border-top-color: rgba(214, 99, 143, 0.28);
	background: linear-gradient(180deg, rgba(214, 99, 143, 0.07), transparent 75%);
}
.om2gle-mode-card.is-versus .om2gle-mode-card-cta {
	background: linear-gradient(180deg, rgba(214, 99, 143, 0.24) 0%, rgba(214, 99, 143, 0.14) 100%);
	border-top-color: var(--rose);
	color: #f0a0c2;
}
.om2gle-mode-card.is-versus:hover .om2gle-mode-card-cta,
.om2gle-mode-card.is-versus:focus-visible .om2gle-mode-card-cta {
	background: linear-gradient(180deg, rgba(214, 99, 143, 0.46) 0%, rgba(214, 99, 143, 0.28) 100%);
	color: #fff;
}

/* M2GGED stamp blowup — Card B's viral payoff. The base stamp is a small
   badge under the bars; here we promote it to an absolute-positioned overlay
   centered on the OPP side that slams down from above at the reveal, ~2x
   larger, with a deep rose glow + scrim border so it reads as the climax
   even before the user processes the score numbers. The WIN stamp on the
   YOU side intentionally stays small — winning is quiet, getting M2GGED
   is loud. Parent .om2gle-teaser-side already has position:relative. */
.om2gle-mode-card.is-versus .om2gle-teaser-side.is-opp .om2gle-teaser-stamp.is-loss {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: 0;
	font-size: clamp(18px, 2.4vw, 24px);
	letter-spacing: 0.42em;
	padding: 10px 16px 9px 22px;
	background: rgba(13, 8, 11, 0.92);
	border: 1.5px solid var(--rose);
	color: var(--rose);
	text-shadow: 0 0 18px rgba(214, 99, 143, 0.6);
	box-shadow:
		0 0 36px -6px rgba(214, 99, 143, 0.6),
		0 0 0 4px rgba(13, 8, 11, 0.45);
	z-index: 5;
	pointer-events: none;
	animation-name: om2-teaser-stamp-m2gged;
	transform: translate(-50%, -50%) scale(0.95) rotate(-8deg);
}
@keyframes om2-teaser-stamp-m2gged {
	0%, 74%   { opacity: 0; transform: translate(-50%, calc(-50% - 38px)) scale(1.7) rotate(-15deg); }
	77%       { opacity: 1; transform: translate(-50%, -50%) scale(1.3)  rotate(-10deg); }
	80%       { opacity: 1; transform: translate(-50%, -50%) scale(0.96) rotate(-7deg); }
	83%, 94%  { opacity: 1; transform: translate(-50%, -50%) scale(1)    rotate(-8deg); }
	98%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.95) rotate(-8deg); }
}

/* ---- Solo teaser variant (Card A — self-evaluation) ----
   Reuses the existing .om2gle-teaser-status, .om2gle-teaser-mic,
   .om2gle-teaser-wave, .om2gle-teaser-scan keyframes — only the layout
   differs. The stage is anchored by a persistent C5 + 523.3 Hz glyph so it
   reads as an instrument card throughout the cycle (Card B has the
   "C5 / vs / 523.3 Hz" middle column doing the same job; without an anchor
   the solo stage felt chopped — just dancing bars in an empty box).

   Choreography across the shared 9s loop:
     0.0s–1.4s  warming   — mic pulses, note glyph fades in faint
     1.4s–5.2s  recording — bars dance in the lower band, glyph stays faint
     5.2s–6.2s  analyzing — scan sweeps, glyph brightens
     5.6s–8.3s  reveal    — 8.7 score scales in over the glyph, bars fill
*/
.om2gle-teaser.om2gle-teaser-solo {
	width: 100%;
}

/* Head row: "SCOUT · JUST YOU · @you" — mirrors Card B's per-side eyebrow
   so the two cards read as the same game in two configurations. */
.om2gle-teaser-solo-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding-bottom: 2px;
}
.om2gle-teaser-solo-head .om2gle-teaser-eyebrow {
	color: var(--gold);
}
.om2gle-teaser-solo-head .om2gle-teaser-handle {
	font-family: var(--serif);
	font-size: 18px;
	line-height: 1;
	color: var(--ink);
	min-width: 0;
	height: 20px;
}

.om2gle-teaser-solo-stage {
	position: relative;
	width: 100%;
	height: clamp(120px, 16vh, 160px);
	border: 1px solid var(--rule-2);
	background: #0e0b08;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Persistent C5 note anchor — sits in the upper-middle band, low opacity
   during recording, brighter during analyzing, dimmed during the reveal so
   the score number can own the center without competing. */
.om2gle-teaser-solo-note {
	position: absolute;
	top: 12px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 2px;
	font-family: var(--serif);
	color: var(--gold-pale);
	line-height: 0.85;
	text-shadow: 0 0 24px var(--gold-glow);
	opacity: 0;
	animation: om2-teaser-solo-note 9s ease infinite;
	z-index: 1;
	pointer-events: none;
}
.om2gle-teaser-solo-note-letter {
	font-size: clamp(54px, 7.5vh, 72px);
	letter-spacing: -0.02em;
}
.om2gle-teaser-solo-note-oct {
	font-size: clamp(22px, 3vh, 30px);
	font-style: italic;
	color: var(--gold);
	margin-top: 6px;
}
@keyframes om2-teaser-solo-note {
	0%        { opacity: 0; transform: scale(0.96); }
	8%, 44%   { opacity: 0.32; transform: scale(1); }
	48%, 56%  { opacity: 0.72; transform: scale(1.02); }
	58%       { opacity: 0.55; transform: scale(1); }
	62%, 92%  { opacity: 0.22; transform: scale(0.94); }
	98%, 100% { opacity: 0; transform: scale(0.96); }
}

/* Frequency caption under the note — small mono, persistent at low opacity. */
.om2gle-teaser-solo-hz {
	position: absolute;
	top: 88px;
	left: 0;
	right: 0;
	text-align: center;
	font-family: var(--mono);
	font-size: 9px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--mute);
	opacity: 0;
	animation: om2-teaser-solo-hz 9s ease infinite;
	pointer-events: none;
	z-index: 1;
}
@keyframes om2-teaser-solo-hz {
	0%        { opacity: 0; }
	10%, 56%  { opacity: 0.7; }
	62%, 92%  { opacity: 0.2; }
	98%, 100% { opacity: 0; }
}

/* Pull the wave bars down into a slim band at the bottom of the stage so
   the note glyph above stays uncluttered. Previously the bars filled the
   whole 120-160px stage, making the card look like a row of crude gold
   rectangles (the visual the user flagged as "chopped"). */
.om2gle-teaser-solo-stage .om2gle-teaser-wave {
	inset: auto 20px 18px 20px;
	height: clamp(32px, 5vh, 44px);
}

/* Score reveal — lands in the lower-center where the wave was, scales up
   with a soft gold glow, dims the note anchor above. */
.om2gle-teaser-solo-score {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	font-family: var(--serif);
	color: var(--gold-pale);
	opacity: 0;
	animation: om2-teaser-solo-score 9s ease infinite;
	text-shadow: 0 0 28px var(--gold-glow);
	z-index: 2;
}
.om2gle-teaser-solo-score-num {
	font-size: clamp(54px, 8vh, 76px);
	line-height: 0.85;
	letter-spacing: -0.02em;
}
.om2gle-teaser-solo-score-denom {
	font-size: 20px;
	color: var(--mute);
}
@keyframes om2-teaser-solo-score {
	0%, 58%   { opacity: 0; transform: scale(0.88); }
	62%       { opacity: 1; transform: scale(1.14); }
	68%, 92%  { opacity: 1; transform: scale(1); }
	98%, 100% { opacity: 0; transform: scale(0.88); }
}
.om2gle-teaser-solo-bars {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* Reduced motion: collapse the cycle into the reveal state. The note anchor
   stays dim, the score is shown, the bars are filled. */
@media (prefers-reduced-motion: reduce) {
	.om2gle-teaser-solo-note,
	.om2gle-teaser-solo-hz { opacity: 0.25; animation: none; }
	.om2gle-teaser-solo-score { opacity: 1; transform: none; animation: none; }
}

/* ---- Boss strip (1v1 by link upsell) ----
   Tertiary by design — sits beneath the two main cards as a single
   gold-treated row. Hidden when WC isn't active (paintBossPill toggles). */
.om2gle-mode-boss {
	all: unset;
	-webkit-tap-highlight-color: transparent;
	display: flex;
	align-items: center;
	gap: clamp(12px, 2vw, 18px);
	padding: clamp(12px, 1.8vh, 16px) clamp(16px, 2.4vw, 24px);
	border: 1px solid var(--gold);
	background: linear-gradient(135deg, rgba(229, 165, 66, 0.10) 0%, rgba(229, 165, 66, 0.02) 60%, transparent 100%);
	cursor: pointer;
	width: 100%;
	max-width: 760px;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
	box-shadow: 0 0 36px -20px var(--gold-glow);
	/* Extra breathing room above the boss strip so it reads as a tertiary
	   afterthought below the three main mode cards, not part of their row. */
	margin-top: clamp(12px, 2.2vh, 28px);
}
.om2gle-mode-boss:hover,
.om2gle-mode-boss:focus-visible {
	transform: translateY(-1px);
	border-color: var(--gold-pale);
	box-shadow: 0 0 60px -10px var(--gold-glow);
}
.om2gle-mode-boss:focus-visible {
	outline: 2px solid var(--gold-pale);
	outline-offset: 2px;
}
.om2gle-mode-boss-glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 0% 50%, var(--gold-glow), transparent 65%);
	opacity: 0.5;
	pointer-events: none;
}
.om2gle-mode-boss-icon {
	font-size: 26px;
	color: var(--gold);
	flex-shrink: 0;
	position: relative;
	line-height: 1;
}
.om2gle-mode-boss-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	position: relative;
	text-align: left;
	min-width: 0;
}
.om2gle-mode-boss-eyebrow {
	font-family: var(--mono);
	font-size: 9px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--gold);
}
.om2gle-mode-boss-title {
	font-family: var(--serif);
	font-size: 18px;
	color: var(--ink);
	line-height: 1.1;
}
.om2gle-mode-boss-sub {
	font-size: 12px;
	color: var(--ink-2);
	line-height: 1.3;
}
.om2gle-mode-boss-cta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	position: relative;
}
.om2gle-mode-boss-price {
	font-family: var(--mono);
	font-size: 14px;
	font-weight: 600;
	color: var(--gold-pale);
	letter-spacing: 0.04em;
}
.om2gle-mode-boss-arrow {
	font-family: var(--mono);
	font-size: 18px;
	color: var(--gold);
	transition: transform .2s ease;
}
.om2gle-mode-boss:hover .om2gle-mode-boss-arrow,
.om2gle-mode-boss:focus-visible .om2gle-mode-boss-arrow {
	transform: translateX(3px);
}

/* Phone breakpoint — stack the two cards, compress the Boss strip. */
@media (max-width: 720px) {
	.om2gle-modes {
		grid-template-columns: 1fr;
		gap: 14px;
	}
	.om2gle-mode-boss-sub {
		display: none;
	}
	.om2gle-mode-boss-icon {
		font-size: 22px;
	}
}


/* ============================================================================
   BOSS-MODE FOMO TEASER — interstitial that pops when a non-owner taps the
   1v1-by-link strip. Same staged-reveal vocabulary as the home-splash teasers
   so the buyer recognises the rhythm, but everything runs on a 12s loop with
   five phases (Link → Send → Joined → Sing → Reveal) and the twin sing fires
   IN SYNC (vs the staggered auto-match teaser — that synchronicity is the
   feature being sold). Composite-selector specificity (.om2gle-teaser-boss
   .om2gle-teaser-mic, etc.) is required because the base mic/wave/score/stamp
   keyframes from .om2gle-teaser are already wired to the 9s loop and would
   otherwise leak through. ([[feedback_css_cascade_appends]])
   ============================================================================ */

/* Backdrop + dialog scaffolding (mirrors the cart drawer pattern but centred). */
#om2gle-app ~ .om2gle-boss-teaser-backdrop,
.om2gle-boss-teaser-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(6, 4, 3, 0.72);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	z-index: 9100;
	opacity: 0;
	transition: opacity 240ms ease;
}
.om2gle-boss-teaser-backdrop.is-open { opacity: 1; }

#om2gle-app ~ .om2gle-boss-teaser-overlay,
.om2gle-boss-teaser-overlay {
	position: fixed;
	inset: 0;
	z-index: 9101;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(12px, 3vh, 32px) clamp(12px, 3vw, 28px);
	pointer-events: none;
	opacity: 0;
	transition: opacity 240ms ease;
	font-family: var(--ui, inherit);
	color: var(--ink);
}
.om2gle-boss-teaser-overlay.is-open { opacity: 1; pointer-events: auto; }

.om2gle-boss-teaser-dialog {
	position: relative;
	width: min(720px, 100%);
	max-height: calc(100vh - 24px);
	max-height: calc(100dvh - 24px);
	overflow-y: auto;
	padding: clamp(22px, 3vh, 32px) clamp(20px, 3vw, 32px) clamp(20px, 3vh, 28px);
	border: 1px solid var(--gold);
	background:
		radial-gradient(ellipse at 50% -10%, var(--gold-glow), transparent 55%),
		linear-gradient(180deg, #18130d 0%, #0c0907 100%);
	box-shadow:
		0 0 0 1px var(--gold) inset,
		0 0 120px -30px var(--gold-glow),
		0 40px 120px -40px rgba(0, 0, 0, 0.8);
	transform: translateY(14px) scale(0.97);
	transition: transform 280ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.om2gle-boss-teaser-overlay.is-open .om2gle-boss-teaser-dialog {
	transform: translateY(0) scale(1);
}

.om2gle-boss-teaser-close {
	position: absolute;
	top: 12px;
	right: 12px;
	background: transparent;
	border: 1px solid rgba(229, 165, 66, 0.22);
	color: var(--ink-2);
	width: 32px; height: 32px;
	border-radius: 8px;
	font-size: 15px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: border-color .16s ease, color .16s ease, background .16s ease;
	z-index: 3;
}
.om2gle-boss-teaser-close:hover {
	border-color: rgba(229, 165, 66, 0.5);
	color: var(--gold);
	background: rgba(229, 165, 66, 0.06);
}

.om2gle-boss-teaser-head {
	text-align: center;
	margin-bottom: clamp(14px, 2vh, 20px);
	padding: 0 8px;
}
.om2gle-boss-teaser-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 10px;
}
.om2gle-boss-teaser-lock { font-size: 11px; opacity: 0.85; }
.om2gle-boss-teaser-title {
	font-family: var(--serif);
	font-size: clamp(28px, 4.4vw, 40px);
	font-weight: 400;
	color: var(--ink);
	line-height: 1.05;
	letter-spacing: -0.01em;
	margin: 0 0 8px;
}
.om2gle-boss-teaser-title-accent {
	color: var(--gold-pale);
	font-style: italic;
}
.om2gle-boss-teaser-lede {
	margin: 0 auto;
	max-width: 52ch;
	color: var(--ink-2);
	font-size: clamp(13px, 1.5vw, 14.5px);
	line-height: 1.4;
}

/* ---------- the teaser shell, boss variant ---------- */
.om2gle-teaser.om2gle-teaser-boss {
	width: 100%;
	gap: clamp(8px, 1.4vh, 12px);
	padding: clamp(12px, 2vh, 18px) clamp(14px, 2vw, 20px);
}

/* Status row — phase labels cycle on the 12s loop, with a "live demo" cap. */
.om2gle-teaser-boss .om2gle-teaser-status { justify-content: space-between; gap: 12px; }
.om2gle-boss-dot { animation: om2-boss-dot 12s linear infinite !important; }
.om2gle-boss-phases {
	position: relative;
	flex: 1;
	min-width: 0;
	min-width: 130px;
	height: 14px;
	text-align: left;
}
.om2gle-boss-phase {
	position: absolute;
	left: 0; top: 0;
	white-space: nowrap;
	opacity: 0;
	animation-duration: 12s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
}
.om2gle-boss-phase.is-link   { animation-name: om2-boss-phase-link;   color: var(--gold); }
.om2gle-boss-phase.is-send   { animation-name: om2-boss-phase-send;   color: var(--gold-pale); }
.om2gle-boss-phase.is-joined { animation-name: om2-boss-phase-joined; color: var(--rose); }
.om2gle-boss-phase.is-sing   { animation-name: om2-boss-phase-sing;   color: var(--gold); }
.om2gle-boss-phase.is-reveal { animation-name: om2-boss-phase-reveal; color: var(--gold); }
@keyframes om2-boss-phase-link   { 0% { opacity: 0; } 2%, 14% { opacity: 1; } 18%, 100% { opacity: 0; } }
@keyframes om2-boss-phase-send   { 0%, 16% { opacity: 0; } 20%, 28% { opacity: 1; } 32%, 100% { opacity: 0; } }
@keyframes om2-boss-phase-joined { 0%, 30% { opacity: 0; } 34%, 42% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes om2-boss-phase-sing   { 0%, 44% { opacity: 0; } 48%, 62% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes om2-boss-phase-reveal { 0%, 64% { opacity: 0; } 68%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes om2-boss-dot {
	0%, 14% { background: var(--gold);      box-shadow: 0 0 0 4px var(--gold-glow); }
	16%, 28% { background: var(--gold-pale); box-shadow: 0 0 0 4px rgba(244,209,145,0.22); }
	30%, 42% { background: var(--rose);      box-shadow: 0 0 0 4px var(--rose-soft); }
	44%, 62% { background: var(--gold);      box-shadow: 0 0 0 4px rgba(229,165,66,0.30); }
	64%, 94% { background: var(--gold-pale); box-shadow: 0 0 0 4px var(--gold-glow); }
	100% { background: var(--gold); box-shadow: 0 0 0 4px var(--gold-glow); }
}
.om2gle-boss-phase-cap {
	font-family: var(--mono);
	font-size: 9px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--mute);
	border: 1px solid var(--rule-2);
	padding: 3px 8px;
	flex-shrink: 0;
}

/* ---------- Stage 1: faux address bar with the link materialising ---------- */
.om2gle-boss-link-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--rule-2);
	background: #0e0b08;
	font-family: var(--mono);
	font-size: 13px;
	color: var(--ink);
	overflow: hidden;
	animation: om2-boss-link-row 12s ease infinite;
	transform-origin: left center;
}
.om2gle-boss-link-icon { color: var(--gold); font-size: 14px; flex-shrink: 0; }
.om2gle-boss-link-url {
	flex: 1;
	display: inline-flex;
	align-items: baseline;
	gap: 0;
	white-space: nowrap;
	overflow: hidden;
	min-width: 0;
}
.om2gle-boss-link-host { color: var(--mute); }
.om2gle-boss-link-slug {
	color: var(--gold-pale);
	position: relative;
	display: inline-block;
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	vertical-align: bottom;
	animation: om2-boss-link-slug 12s steps(20, end) infinite;
}
.om2gle-boss-link-slug::before {
	content: "x7k-velvet";
}
.om2gle-boss-link-caret {
	display: inline-block;
	width: 7px;
	height: 14px;
	margin-left: 2px;
	background: var(--gold);
	vertical-align: middle;
	animation: om2-boss-link-caret 12s steps(2, end) infinite;
}
.om2gle-boss-link-pill {
	font-family: var(--mono);
	font-size: 9px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--gold);
	border: 1px solid var(--gold);
	padding: 3px 7px;
	background: rgba(229, 165, 66, 0.06);
	opacity: 0;
	animation: om2-boss-link-pill 12s ease infinite;
	flex-shrink: 0;
}
.om2gle-boss-link-copied {
	position: absolute;
	right: 12px;
	top: 50%;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold);
	background: #0e0b08;
	padding: 4px 8px;
	border: 1px solid var(--gold);
	transform: translateY(-50%) translateX(8px);
	opacity: 0;
	animation: om2-boss-link-copied 12s ease infinite;
}
@keyframes om2-boss-link-row {
	0% { opacity: 0; transform: translateY(-6px); }
	2%, 24% { opacity: 1; transform: translateY(0); }
	28% { opacity: 1; transform: translateX(120%); }
	30%, 100% { opacity: 0; transform: translateX(120%); }
}
@keyframes om2-boss-link-slug {
	0%, 4% { max-width: 0; }
	16%, 28% { max-width: 110px; }
	100% { max-width: 110px; }
}
@keyframes om2-boss-link-caret {
	0%, 4% { opacity: 0; }
	6%, 14% { opacity: 1; }
	16%, 100% { opacity: 0; }
}
@keyframes om2-boss-link-pill {
	0%, 6% { opacity: 0; transform: translateY(-2px); }
	10%, 24% { opacity: 1; transform: translateY(0); }
	28%, 100% { opacity: 0; }
}
@keyframes om2-boss-link-copied {
	0%, 14% { opacity: 0; transform: translate(8px, -50%); }
	18%, 24% { opacity: 1; transform: translate(0, -50%); }
	28%, 100% { opacity: 0; transform: translate(-8px, -50%); }
}

/* ---------- Stage 2 → 3: bubble swooshes out, friend joined chip lands ---------- */
.om2gle-boss-relay {
	position: relative;
	height: clamp(46px, 7vh, 60px);
	margin-top: -4px;
}
.om2gle-boss-bubble {
	position: absolute;
	left: 0;
	top: 0;
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 12px;
	background: linear-gradient(180deg, rgba(229, 165, 66, 0.16), rgba(229, 165, 66, 0.06));
	border: 1px solid var(--gold);
	border-radius: 12px 12px 12px 2px;
	font-size: 12.5px;
	color: var(--ink);
	opacity: 0;
	transform: translateX(-12px);
	animation: om2-boss-bubble 12s ease infinite;
}
.om2gle-boss-bubble-from {
	font-family: var(--mono);
	font-size: 9px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--gold);
}
.om2gle-boss-swoosh {
	position: absolute;
	top: 50%;
	left: 30%;
	width: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--gold), var(--gold-pale), transparent);
	box-shadow: 0 0 12px var(--gold-glow);
	transform: translateY(-50%);
	opacity: 0;
	animation: om2-boss-swoosh 12s ease infinite;
}
.om2gle-boss-joined {
	position: absolute;
	right: 0;
	top: 8px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 11px;
	border: 1px solid var(--rose);
	background: linear-gradient(180deg, rgba(214, 99, 143, 0.14), rgba(214, 99, 143, 0.04));
	font-size: 12px;
	color: var(--ink);
	opacity: 0;
	transform: translateX(8px);
	animation: om2-boss-joined 12s ease infinite;
}
.om2gle-boss-joined-ring {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--rose);
	box-shadow: 0 0 0 4px var(--rose-soft);
	animation: om2-boss-joined-ring 12s ease infinite;
}
.om2gle-boss-joined-handle {
	color: var(--rose);
	font-family: var(--serif);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.01em;
}
.om2gle-boss-joined-text { color: var(--ink-2); }
@keyframes om2-boss-bubble {
	0%, 16% { opacity: 0; transform: translate(-12px, 4px); }
	20%, 26% { opacity: 1; transform: translate(0, 0); }
	29% { opacity: 1; transform: translate(40px, 0); }
	31%, 100% { opacity: 0; transform: translate(140%, -6px) rotate(4deg); }
}
@keyframes om2-boss-swoosh {
	0%, 26% { opacity: 0; left: 30%; width: 0; }
	28% { opacity: 1; left: 30%; width: 0; }
	30% { opacity: 1; left: 30%; width: 60%; }
	32% { opacity: 0; left: 92%; width: 0; }
	33%, 100% { opacity: 0; }
}
@keyframes om2-boss-joined {
	0%, 32% { opacity: 0; transform: translateX(8px); }
	36%, 44% { opacity: 1; transform: translateX(0); }
	48%, 100% { opacity: 0; transform: translateX(0); }
}
@keyframes om2-boss-joined-ring {
	0%, 34% { box-shadow: 0 0 0 0 rgba(214, 99, 143, 0); }
	36% { box-shadow: 0 0 0 4px var(--rose-soft); }
	44% { box-shadow: 0 0 0 10px rgba(214, 99, 143, 0); }
	100% { box-shadow: 0 0 0 0 rgba(214, 99, 143, 0); }
}

/* ---------- Stage 4 → 5: twin sing IN SYNC + privacy chip ---------- */
.om2gle-teaser-boss .om2gle-teaser-versus {
	margin-top: 4px;
}
/* Both sides start hidden, fade in together when the friend joins, hold
   through reveal, fade out for the Drop. */
.om2gle-teaser-boss .om2gle-teaser-side {
	opacity: 0;
	animation: om2-boss-side 12s ease infinite;
}
@keyframes om2-boss-side {
	0%, 36% { opacity: 0; transform: translateY(6px); }
	42%, 78% { opacity: 1; transform: translateY(0); }
	84%, 100% { opacity: 0; transform: translateY(-4px); }
}

/* Friend handle: no redaction here — the link is BY-NAME, that's the pitch. */
.om2gle-teaser-boss .om2gle-teaser-side.is-opp .om2gle-teaser-handle { min-width: 140px; }
.om2gle-boss-opp-handle {
	display: inline-block;
	color: var(--rose);
	opacity: 0;
	animation: om2-boss-opp-handle 12s ease infinite;
}
@keyframes om2-boss-opp-handle {
	0%, 40% { opacity: 0; transform: translateY(4px); }
	46%, 78% { opacity: 1; transform: translateY(0); }
	84%, 100% { opacity: 0; }
}

/* Override the base 9s mic/wave/score animations so both sides fire on the
   12s boss timeline AT THE SAME TIME (in-sync is the selling point). */
.om2gle-teaser-boss .om2gle-teaser-mic,
.om2gle-teaser-boss .om2gle-teaser-mic.is-opp {
	animation: om2-boss-mic 12s ease infinite;
}
@keyframes om2-boss-mic {
	0%, 44% { opacity: 0; transform: scale(0.94); }
	46% { opacity: 1; transform: scale(1); }
	52% { opacity: 1; transform: scale(1.14); }
	58% { opacity: 0; transform: scale(0.92); }
	100% { opacity: 0; }
}

.om2gle-teaser-boss .om2gle-teaser-wave,
.om2gle-teaser-boss .om2gle-teaser-wave.is-opp {
	animation: om2-boss-wave 12s ease infinite;
}
@keyframes om2-boss-wave {
	0%, 46% { opacity: 0; }
	50%, 66% { opacity: 1; }
	70%, 100% { opacity: 0; }
}

.om2gle-teaser-boss .om2gle-teaser-score,
.om2gle-teaser-boss .om2gle-teaser-side.is-opp .om2gle-teaser-score {
	animation: om2-boss-score 12s ease infinite;
}
@keyframes om2-boss-score {
	0%, 66% { opacity: 0; transform: translateY(6px) scale(0.94); }
	70% { opacity: 1; transform: translateY(0) scale(1.1); }
	74%, 78% { opacity: 1; transform: translateY(0) scale(1); }
	84%, 100% { opacity: 0; transform: translateY(6px) scale(0.94); }
}
.om2gle-teaser-boss .om2gle-teaser-side.is-you .om2gle-teaser-score-num {
	animation: om2-boss-score-win 12s ease infinite;
}
@keyframes om2-boss-score-win {
	0%, 72% { color: var(--ink); }
	78%, 78% { color: var(--gold); }
	100% { color: var(--ink); }
}
.om2gle-teaser-boss .om2gle-teaser-side.is-opp .om2gle-teaser-score-num { color: var(--ink-2); }

.om2gle-teaser-boss .om2gle-teaser-stamp {
	animation: om2-boss-stamp 12s ease infinite;
}
@keyframes om2-boss-stamp {
	0%, 74% { opacity: 0; transform: scale(0.85) rotate(-3deg); }
	78% { opacity: 1; transform: scale(1.14) rotate(-3deg); }
	82%, 84% { opacity: 1; transform: scale(1) rotate(-3deg); }
	90%, 100% { opacity: 0; transform: scale(0.85) rotate(-3deg); }
}

/* VS column accents — privacy lock + "in sync" cue. */
.om2gle-boss-vs { position: relative; padding: 4px 10px; }
.om2gle-boss-privacy {
	font-family: var(--mono);
	font-size: 8.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--gold);
	border: 1px solid var(--gold);
	padding: 3px 6px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: rgba(229, 165, 66, 0.06);
	opacity: 0;
	animation: om2-boss-privacy 12s ease infinite;
}
@keyframes om2-boss-privacy {
	0%, 44% { opacity: 0; transform: translateY(-4px); }
	50%, 80% { opacity: 1; transform: translateY(0); }
	84%, 100% { opacity: 0; }
}
.om2gle-boss-sync {
	font-family: var(--mono);
	font-size: 8.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--rose);
	display: inline-flex;
	align-items: center;
	gap: 5px;
	opacity: 0;
	animation: om2-boss-sync 12s ease infinite;
}
.om2gle-boss-sync-dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--rose);
	box-shadow: 0 0 0 3px var(--rose-soft);
}
@keyframes om2-boss-sync {
	0%, 44% { opacity: 0; }
	50%, 66% { opacity: 1; }
	70%, 100% { opacity: 0; }
}

/* ---------- Stage 6: M2GG'D Drop preview ---------- */
.om2gle-boss-drop {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	min-height: clamp(120px, 16vh, 156px);
}
.om2gle-boss-drop-card {
	position: relative;
	width: clamp(140px, 18vw, 168px);
	aspect-ratio: 9 / 16;
	max-height: clamp(112px, 14vh, 140px);
	padding: 12px 10px 10px;
	border: 1.5px solid var(--gold);
	background:
		radial-gradient(ellipse at 50% 110%, rgba(214, 99, 143, 0.28), transparent 65%),
		linear-gradient(180deg, #1a130c, #0a0705);
	box-shadow:
		0 0 60px -10px var(--gold-glow),
		0 24px 60px -20px rgba(214, 99, 143, 0.45);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	overflow: hidden;
	opacity: 0;
	transform: translateY(20px) rotate(-3deg) scale(0.9);
	animation: om2-boss-drop-card 12s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
}
.om2gle-boss-drop-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(229, 165, 66, 0.08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(229, 165, 66, 0.08) 1px, transparent 1px);
	background-size: 14px 14px;
	pointer-events: none;
	mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
	-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
.om2gle-boss-drop-eyebrow {
	position: relative;
	font-family: var(--mono);
	font-size: 8px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--gold);
}
.om2gle-boss-drop-stamp {
	position: relative;
	font-family: var(--mono);
	font-size: clamp(18px, 2.6vw, 22px);
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--rose);
	border: 2px solid var(--rose);
	padding: 4px 10px;
	transform: rotate(-4deg);
	margin-top: 4px;
	text-shadow: 0 0 12px var(--rose-soft);
}
.om2gle-boss-drop-handle {
	position: relative;
	font-family: var(--serif);
	font-size: clamp(13px, 1.8vw, 16px);
	color: var(--ink);
	letter-spacing: -0.01em;
}
.om2gle-boss-drop-score {
	position: relative;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	color: var(--gold-pale);
}
.om2gle-boss-drop-score span { color: var(--mute); font-style: italic; padding: 0 3px; }
.om2gle-boss-drop-foot {
	position: relative;
	font-family: var(--mono);
	font-size: 7.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--mute);
}
.om2gle-boss-drop-label {
	font-family: var(--mono);
	font-size: 9px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ink-2);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	opacity: 0;
	animation: om2-boss-drop-label 12s ease infinite;
}
.om2gle-boss-drop-label-tag {
	font-family: var(--mono);
	font-size: 8px;
	color: var(--gold);
	border: 1px solid var(--gold);
	padding: 2px 6px;
	letter-spacing: 0.22em;
}
@keyframes om2-boss-drop-card {
	0%, 78% { opacity: 0; transform: translateY(20px) rotate(-3deg) scale(0.9); }
	82% { opacity: 1; transform: translateY(0) rotate(-2deg) scale(1.04); }
	86%, 94% { opacity: 1; transform: translateY(0) rotate(-2deg) scale(1); }
	98%, 100% { opacity: 0; transform: translateY(8px) rotate(-3deg) scale(0.95); }
}
@keyframes om2-boss-drop-label {
	0%, 84% { opacity: 0; transform: translateY(4px); }
	88%, 94% { opacity: 1; transform: translateY(0); }
	98%, 100% { opacity: 0; }
}

/* ---------- Bonus banner — "also unlocks Arcade bosses" ----------
   Sits inside .om2gle-boss-teaser-head, directly under the lede. Scoped
   tight to the teaser so the rest of the dialog (link-mode demo, perks,
   CTA, skip) is byte-identical. Gold-on-deep-amber per the warm-gold
   chrome aesthetic; the + sign reads as a "bonus this comes with",
   not a separate price. */
.om2gle-boss-teaser-bonus {
	margin-top: 14px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	border-radius: 4px;
	border: 1px solid rgba(255, 196, 96, 0.6);
	background:
		linear-gradient(180deg, rgba(255, 217, 132, 0.18), rgba(255, 168, 64, 0.10));
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.45),
		0 0 24px -6px rgba(255, 196, 96, 0.55),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.om2gle-boss-teaser-bonus-plus {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 3px;
	font-family: var(--mono);
	font-size: 18px;
	font-weight: 900;
	line-height: 1;
	color: #1a0c00;
	background: linear-gradient(180deg, #fff1be, #ffd065 55%, #d68b1c);
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.6),
		0 0 14px -4px rgba(255, 196, 96, 0.95),
		inset 0 1px 0 rgba(255, 255, 255, 0.55);
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.om2gle-boss-teaser-bonus-text {
	flex: 1 1 auto;
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: 0.06em;
	line-height: 1.45;
	color: var(--ink-1);
}
.om2gle-boss-teaser-bonus-text b {
	color: var(--gold);
	font-weight: 800;
	letter-spacing: 0.08em;
}
@media (max-width: 640px) {
	.om2gle-boss-teaser-bonus { margin-top: 12px; padding: 7px 10px; gap: 8px; }
	.om2gle-boss-teaser-bonus-plus { width: 22px; height: 22px; font-size: 15px; }
	.om2gle-boss-teaser-bonus-text { font-size: 11px; letter-spacing: 0.04em; }
}

/* ---------- Footer: perks + CTA + skip ---------- */
.om2gle-boss-teaser-foot {
	margin-top: clamp(16px, 2vh, 22px);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
}
.om2gle-boss-teaser-perks {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 14px;
	margin-bottom: 4px;
}
.om2gle-boss-teaser-perk {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-2);
}
.om2gle-boss-teaser-perk-i {
	color: var(--gold);
	font-size: 12px;
	line-height: 1;
}
.om2gle-boss-teaser-cta {
	width: 100%;
	justify-content: space-between;
	gap: 16px;
	position: relative;
}
.om2gle-boss-teaser-cta-label { flex: 1; text-align: left; }
.om2gle-boss-teaser-cta-price {
	font-family: var(--mono);
	font-size: 15px;
	letter-spacing: 0.08em;
	color: #0b0907;
	background: rgba(0, 0, 0, 0.16);
	padding: 4px 10px;
	border-radius: 3px;
	font-weight: 700;
}
.om2gle-boss-teaser-skip {
	background: transparent;
	border: 0;
	color: var(--mute);
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	cursor: pointer;
	padding: 6px 0 2px;
	transition: color .18s ease;
}
.om2gle-boss-teaser-skip:hover { color: var(--ink-2); }

/* ---------- Phone breakpoint: vertical-everything, sticky CTA. */
@media (max-width: 640px) {
	.om2gle-boss-teaser-overlay { align-items: stretch; padding: 0; }
	.om2gle-boss-teaser-dialog {
		width: 100%;
		max-height: 100vh;
		max-height: 100dvh;
		border-left: 0;
		border-right: 0;
		padding: 22px 18px 18px;
	}
	.om2gle-boss-teaser-title { font-size: 26px; }
	.om2gle-boss-teaser-lede { font-size: 12.5px; }
	.om2gle-teaser-boss .om2gle-teaser-versus {
		grid-template-columns: 1fr;
	}
	.om2gle-teaser-boss .om2gle-teaser-vs {
		flex-direction: row;
		justify-content: space-between;
		padding: 8px 12px;
		border-left: 0;
		border-right: 0;
	}
	.om2gle-boss-drop-card { aspect-ratio: 4 / 5; max-height: 132px; }
	.om2gle-boss-link-pill { display: none; }
	.om2gle-boss-teaser-perks { gap: 6px 10px; }
	.om2gle-boss-teaser-perk { font-size: 9.5px; letter-spacing: 0.14em; }
}

/* Reduced motion: kill the loop, freeze on the reveal+drop frame. */
@media (prefers-reduced-motion: reduce) {
	.om2gle-teaser-boss *,
	.om2gle-teaser-boss *::before,
	.om2gle-teaser-boss *::after,
	.om2gle-boss-drop *,
	.om2gle-boss-drop *::before,
	.om2gle-boss-drop *::after { animation: none !important; }
	.om2gle-boss-link-row { opacity: 0; }
	.om2gle-boss-bubble, .om2gle-boss-swoosh, .om2gle-boss-relay { opacity: 0; }
	.om2gle-teaser-boss .om2gle-teaser-side { opacity: 1; transform: none; }
	.om2gle-boss-opp-handle { opacity: 1; transform: none; }
	.om2gle-teaser-boss .om2gle-teaser-mic { opacity: 0; }
	.om2gle-teaser-boss .om2gle-teaser-wave { opacity: 0; }
	.om2gle-teaser-boss .om2gle-teaser-score { opacity: 1; transform: none; }
	.om2gle-teaser-boss .om2gle-teaser-side.is-you .om2gle-teaser-score-num { color: var(--gold); }
	.om2gle-teaser-boss .om2gle-teaser-stamp { opacity: 1; transform: rotate(-3deg); }
	.om2gle-boss-privacy, .om2gle-boss-sync { opacity: 1; transform: none; }
	.om2gle-boss-drop-card { opacity: 1; transform: rotate(-2deg); }
	.om2gle-boss-drop-label { opacity: 1; transform: none; }
	.om2gle-boss-phase { opacity: 0; }
	.om2gle-boss-phase.is-reveal { opacity: 1; }
}

/* ============================================================================
   SELF-EVAL STAGE — anonymous solo onramp (Card A on the splash). Strips the
   VS chrome (rival card, VS divider, P1 tag) and surfaces a centered hero
   card under a self-eval intro block. The flow is otherwise unchanged: the
   user picks a note, taps Sing, and lands in the theater where the anon
   branch already pitches sign-up. This is purely the lobby reframing.

   Variant scoped to .om2gle-screen-stage[data-stage-mode="self"] so the
   default arena layout (1fr auto 1fr · VS in the middle · rival on the
   right) keeps working for "auto" (matchmaking) and "friend" (1v1 link).

   Note on cascade: rules live at the end of the file so they reliably win
   over the base .om2gle-arena / .om2gle-side-label-row declarations earlier
   in the cascade (see feedback_css_cascade_appends).
============================================================================ */

/* Default: hide self-only chrome on every stage mode that isn't self. */
.om2gle-screen-stage [data-self-only] { display: none; }

/* Self mode — show the self-only intro, hide every versus-only element. */
.om2gle-screen-stage[data-stage-mode="self"] [data-self-only] { display: flex; }
.om2gle-screen-stage[data-stage-mode="self"] [data-versus-only] { display: none !important; }

/* Single-column arena: the YOU card stands alone and centers itself. */
.om2gle-screen-stage[data-stage-mode="self"] .om2gle-arena {
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	gap: 24px;
}
.om2gle-screen-stage[data-stage-mode="self"] .om2gle-arena-side.is-you {
	gap: 18px;
}

/* Belt-and-suspenders: the rival side and VS column don't take grid space. */
.om2gle-screen-stage[data-stage-mode="self"] .om2gle-arena-side.is-rival,
.om2gle-screen-stage[data-stage-mode="self"] .om2gle-vs {
	display: none !important;
}

/* Boss Mode pill (right-column upsell) has no business showing on a solo
   evaluation stage — it implies a face-off path that doesn't exist here. */
.om2gle-screen-stage[data-stage-mode="self"] .om2gle-boss-pill {
	display: none !important;
}

/* Collapse the 3-col control band (notes | sing | boss-pill) to a single
   centered column. In versus modes the 1fr | auto | 1fr grid centers SING
   between two populated rails; in self-eval the right rail is hidden, so the
   default grid leaves notes pinned to the left edge with an empty gutter on
   the right (looks like notes drifted off). Stacking them centered restores
   "pick a note, then sing" as a single vertical column under the hero. */
.om2gle-screen-stage[data-stage-mode="self"] .om2gle-controls {
	grid-template-columns: minmax(0, auto);
	justify-content: center;
	gap: 18px;
}
.om2gle-screen-stage[data-stage-mode="self"] .om2gle-controls-col.is-left,
.om2gle-screen-stage[data-stage-mode="self"] .om2gle-controls-col.is-center,
.om2gle-screen-stage[data-stage-mode="self"] .om2gle-controls-col.is-right {
	justify-self: center;
}

/* ---- Self-eval intro block (above the hero card) ------------------------ */
.om2gle-self-intro {
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
	max-width: 520px;
	margin: 0 auto;
	padding: 0 8px;
}
.om2gle-self-intro-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--gold-soft);
}
.om2gle-self-intro-bar {
	display: inline-block;
	width: 28px;
	height: 1px;
	background: rgba(229, 165, 66, 0.45);
}
.om2gle-self-intro-title {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(30px, 5vw, 44px);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin: 0;
}
.om2gle-self-intro-accent {
	font-style: italic;
	color: var(--gold);
}
.om2gle-self-intro-sub {
	font-family: var(--sans);
	font-size: 14px;
	line-height: 1.5;
	color: var(--ink-2);
	margin: 0;
	max-width: 440px;
}

/* Mobile: tighten the intro so the card still anchors the viewport. */
@media (max-width: 900px) {
	.om2gle-self-intro { gap: 8px; padding: 0 4px; }
	.om2gle-self-intro-eyebrow { font-size: 9.5px; letter-spacing: 0.28em; gap: 10px; }
	.om2gle-self-intro-bar { width: 22px; }
	.om2gle-self-intro-title { font-size: clamp(24px, 7vw, 32px); }
	.om2gle-self-intro-sub { font-size: 13px; }
}

/* ============================================================================
   THEATER · ANON STAGED REVEAL — "wowww I'm in a game"
   ----------------------------------------------------------------------------
   Replaces the dead "your matchup awaits" state with a live staged reveal:
   Scanning → Lock → Opponent Ready (blurred). The right side then SITS in the
   ready state pulsing; the user can still tap Drop, sing again, etc. The
   entire OPP card + the inline REVEAL OPPONENT button are the conversion
   gestures — no forced redirect, no auto-advance.

   States are driven by data-stage on the OPP side card:
     data-stage="scanning"  → rotating ghost handle + scanline counter
     data-stage="locking"   → glow-pulse + "match locked" flash
     data-stage="ready"     → blurred handle/score/bars, throbbing rose halo,
                              reveal CTA visible
   ========================================================================== */

/* Verdict line — sits between the YOU handle and the big score. Short stab
   of mono-uppercase copy ("S-TIER RESONANCE · STABILITY LOCKED") computed
   from parts at reveal time. Soft gold halo to feel like a verdict, not a
   chrome label. */
.om2gle-side-verdict {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--gold-pale);
	text-align: center;
	line-height: 1.4;
	padding: 4px 10px;
	border: 1px solid rgba(229,165,66,0.35);
	border-radius: 999px;
	background: linear-gradient(180deg, rgba(229,165,66,0.10) 0%, rgba(229,165,66,0.02) 100%);
	box-shadow: 0 0 18px rgba(229,165,66,0.18);
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	animation: om2-verdict-pop 700ms cubic-bezier(.2,.8,.2,1) both;
}
.om2gle-side-verdict[hidden] { display: none; }
@keyframes om2-verdict-pop {
	0%   { opacity: 0; transform: translateY(8px) scale(0.92); filter: blur(4px); }
	60%  { filter: blur(0); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Make the hero score even bigger when a verdict is present — pulls the
   eye to the number, not the bars. */
.om2gle-side-you .om2gle-side-verdict + .om2gle-side-score-row .om2gle-side-score-value {
	font-size: 104px;
	text-shadow: 0 0 36px rgba(229,165,66,0.32);
}

/* Weak-stat hook — sits BELOW the bars. "↘ harmonics — your leak". A soft
   amber pill that doubles as a future training CTA. */
.om2gle-side-weakhook {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold);
	padding: 6px 10px;
	border: 1px dashed rgba(229,165,66,0.42);
	border-radius: 999px;
	background: rgba(229,165,66,0.06);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 2px;
	cursor: default;
	animation: om2-weakhook-rise 600ms cubic-bezier(.2,.8,.2,1) 220ms both;
}
.om2gle-side-weakhook[hidden] { display: none; }
.om2gle-side-weakhook .om2gle-weakhook-arrow {
	color: var(--rose);
	font-weight: 700;
}
.om2gle-side-weakhook .om2gle-weakhook-pct {
	color: var(--ink-2);
	font-weight: 600;
}
@keyframes om2-weakhook-rise {
	0%   { opacity: 0; transform: translateY(6px); }
	100% { opacity: 1; transform: translateY(0); }
}

/* ---- OPP CARD STAGED-REVEAL CHROME ------------------------------------ */

/* Scanline (Scanning → Lock counter). Sits between handle slot and score. */
.om2gle-side-scanline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--rose);
	padding: 4px 12px;
	border: 1px solid rgba(214,99,143,0.35);
	border-radius: 999px;
	background: linear-gradient(180deg, rgba(214,99,143,0.10) 0%, rgba(214,99,143,0.02) 100%);
	box-shadow: 0 0 18px rgba(214,99,143,0.18);
}
.om2gle-side-scanline[hidden] { display: none; }
.om2gle-scan-pulse {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--rose);
	box-shadow: 0 0 0 4px rgba(214,99,143,0.18);
	animation: om2-scan-pulse 0.9s ease-in-out infinite;
}
@keyframes om2-scan-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.45; transform: scale(0.78); }
}

/* Locking flash — momentary white-gold sweep across the OPP card the
   instant the "match locked" beat lands. */
#om2gle-side-opp[data-stage="locking"]::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, transparent 0%, rgba(244,209,145,0.20) 50%, transparent 100%);
	animation: om2-stage-lock-sweep 720ms cubic-bezier(.2,.8,.2,1) both;
	pointer-events: none;
	z-index: 1;
}
@keyframes om2-stage-lock-sweep {
	0%   { transform: translateX(-100%); opacity: 0; }
	35%  { opacity: 1; }
	100% { transform: translateX(100%); opacity: 0; }
}

/* Opponent-ready state — handle/score/bars/audio all sit blurred + dimmed,
   the whole card throbs in rose to read "they're locked in, waiting on
   you". Card itself is clickable as the reveal gesture. */
#om2gle-side-opp[data-stage="ready"] {
	cursor: pointer;
	border-color: rgba(214,99,143,0.55);
	box-shadow:
		0 0 0 1px rgba(214,99,143,0.30) inset,
		0 0 80px -20px rgba(214,99,143,0.55);
	animation: om2-stage-ready-throb 2.6s ease-in-out infinite;
}
#om2gle-side-opp[data-stage="ready"]:hover {
	border-color: rgba(214,99,143,0.85);
	box-shadow:
		0 0 0 1px rgba(214,99,143,0.45) inset,
		0 0 100px -10px rgba(214,99,143,0.75);
	transform: translateY(-1px);
}
@keyframes om2-stage-ready-throb {
	0%, 100% {
		box-shadow:
			0 0 0 1px rgba(214,99,143,0.30) inset,
			0 0 60px -22px rgba(214,99,143,0.45);
	}
	50% {
		box-shadow:
			0 0 0 1px rgba(214,99,143,0.50) inset,
			0 0 100px -12px rgba(214,99,143,0.80);
	}
}
/* Override the dashed border + diagonal hatch from .om2gle-side-shimmer
   once we move into the ready state — different visual language. */
#om2gle-side-opp[data-stage="ready"].om2gle-side-shimmer {
	border-style: solid;
}
#om2gle-side-opp[data-stage="ready"].om2gle-side-shimmer::after {
	display: none;
}

/* Blurred handle text — the opponent's @ is "behind glass" until reveal.
   We mask it with dots + a heavy blur so it feels like an upcoming
   identity, not a missing one. */
#om2gle-side-opp[data-stage="ready"] .om2gle-side-handle {
	color: var(--rose);
	filter: blur(7px) saturate(1.2);
	letter-spacing: 0.18em;
	user-select: none;
	pointer-events: none;
	animation: om2-stage-blur-shift 4s ease-in-out infinite;
}
@keyframes om2-stage-blur-shift {
	0%, 100% { filter: blur(7px) saturate(1.2); }
	50%      { filter: blur(5px) saturate(1.4); }
}

/* Blurred score — "?.?/10". Big numeral stays so the visual rhythm of
   the YOU card is preserved on the OPP side; the blur sells the mystery. */
#om2gle-side-opp[data-stage="ready"] .om2gle-side-score-value,
#om2gle-side-opp[data-stage="ready"] .om2gle-side-score-denom {
	color: var(--rose);
	filter: blur(8px);
	opacity: 0.85;
	user-select: none;
	pointer-events: none;
	animation: om2-stage-blur-shift 4s ease-in-out infinite;
}

/* Bars + audio row stay ghosted in the ready state so the eye reads "they
   exist, you just can't see them yet" — different from the dead "—" empty
   state. */
#om2gle-side-opp[data-stage="ready"] .om2gle-side-bars,
#om2gle-side-opp[data-stage="ready"] .om2gle-audio-row {
	opacity: 0.5;
	filter: blur(2.5px);
	pointer-events: none;
}
#om2gle-side-opp[data-stage="ready"] .om2gle-bar-fill {
	background: var(--rose);
	animation: om2-stage-bars-flicker 2.4s ease-in-out infinite;
}
@keyframes om2-stage-bars-flicker {
	0%, 100% { width: 38% !important; opacity: 0.6; }
	25%      { width: 72% !important; opacity: 0.9; }
	50%      { width: 50% !important; opacity: 0.55; }
	75%      { width: 84% !important; opacity: 0.85; }
}

/* The reveal CTA — primary action sitting inside the OPP card. Magenta
   chrome to match the opponent-side accent palette, throbbing arrow to
   tease the FOMO. */
.om2gle-stage-reveal-cta {
	appearance: none;
	background: linear-gradient(135deg, #ffd5e5 0%, #d6638f 55%, #b34c75 100%);
	border: 1px solid #ffd5e5;
	color: #0b0907;
	font-family: var(--sans);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-size: 12px;
	padding: 12px 22px;
	border-radius: 999px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	box-shadow:
		0 16px 44px -16px rgba(214,99,143,0.85),
		0 0 0 1px rgba(255,213,229,0.45) inset;
	position: relative;
	overflow: hidden;
	z-index: 2;
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
	animation: om2-reveal-cta-rise 600ms cubic-bezier(.2,.8,.2,1) 480ms both;
}
.om2gle-stage-reveal-cta[hidden] { display: none; }
.om2gle-stage-reveal-cta:hover {
	transform: translateY(-1px);
	filter: saturate(1.12);
	box-shadow:
		0 22px 56px -18px rgba(214,99,143,0.95),
		0 0 0 1px rgba(255,213,229,0.65) inset;
}
.om2gle-stage-reveal-cta:active { transform: translateY(1px); }
.om2gle-stage-reveal-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
	transform: translateX(-100%);
	animation: om2-reveal-cta-shine 3.6s ease-in-out infinite;
	pointer-events: none;
}
@keyframes om2-reveal-cta-shine {
	0%, 55% { transform: translateX(-100%); }
	72%     { transform: translateX(100%); }
	100%    { transform: translateX(100%); }
}
@keyframes om2-reveal-cta-rise {
	0%   { opacity: 0; transform: translateY(10px) scale(0.92); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}
.om2gle-stage-reveal-cta .om2gle-stage-reveal-arrow {
	display: inline-block;
	font-family: var(--mono);
	font-size: 13px;
	font-weight: 700;
	animation: om2-reveal-arrow-nudge 1.4s ease-in-out infinite;
}
@keyframes om2-reveal-arrow-nudge {
	0%, 100% { transform: translateX(0); }
	50%      { transform: translateX(3px); }
}
.om2gle-stage-reveal-cta .om2gle-stage-reveal-sub {
	font-family: var(--mono);
	font-size: 9.5px;
	font-weight: 500;
	letter-spacing: 0.14em;
	opacity: 0.78;
	border-left: 1px solid rgba(11,9,7,0.35);
	padding-left: 10px;
	margin-left: 4px;
}

/* ---- DROP SHARE-CLIP PREVIEW TILE -------------------------------------- */

/* Mini 9:16 preview rendered next to the Drop button so the share asset
   feels tangible. Stylized — not the real clip render — but uses the
   user's actual score + handle so it reads as "this is yours". */
.om2gle-drop-dock {
	gap: 16px;
	align-items: center;
}
/* Scope the dock-mini-preview rules under .om2gle-drop-dock so they
   don't bleed into the share-clip MODAL's `.om2gle-drop-preview`
   (which needs to fill the sheet at 9:16, not shrink to 84px). */
.om2gle-drop-dock .om2gle-drop-preview {
	width: 84px;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	animation: om2-drop-preview-rise 700ms cubic-bezier(.2,.8,.2,1) 300ms both;
}
.om2gle-drop-dock .om2gle-drop-preview-frame {
	width: 100%;
	aspect-ratio: 9 / 16;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid rgba(229,165,66,0.42);
	background: linear-gradient(180deg, #15110d 0%, #0b0907 100%);
	box-shadow:
		0 0 0 1px rgba(229,165,66,0.20) inset,
		0 18px 36px -16px rgba(229,165,66,0.55);
	position: relative;
	transform: rotate(-3deg);
	transition: transform .25s ease, box-shadow .25s ease;
}
.om2gle-drop-dock .om2gle-drop-preview:hover .om2gle-drop-preview-frame {
	transform: rotate(-1deg) translateY(-2px);
	box-shadow:
		0 0 0 1px rgba(229,165,66,0.35) inset,
		0 24px 48px -18px rgba(229,165,66,0.75);
}
.om2gle-drop-dock .om2gle-drop-preview-stage {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 6px 4px;
	background:
		radial-gradient(circle at 50% 30%, rgba(229,165,66,0.32) 0%, transparent 60%),
		radial-gradient(circle at 50% 80%, rgba(214,99,143,0.20) 0%, transparent 50%),
		#0b0907;
}
.om2gle-drop-dock .om2gle-drop-preview-eyebrow {
	font-family: var(--mono);
	font-size: 6px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--gold);
	opacity: 0.85;
}
.om2gle-drop-dock .om2gle-drop-preview-score {
	font-family: var(--serif);
	font-size: 26px;
	line-height: 1;
	color: var(--ink);
	text-shadow: 0 0 10px rgba(229,165,66,0.55);
}
.om2gle-drop-dock .om2gle-drop-preview-handle {
	font-family: var(--mono);
	font-size: 7px;
	letter-spacing: 0.10em;
	color: var(--ink-2);
}
.om2gle-drop-dock .om2gle-drop-preview-stamp {
	margin-top: 4px;
	font-family: var(--mono);
	font-weight: 700;
	font-size: 7px;
	letter-spacing: 0.20em;
	color: var(--gold);
	padding: 2px 5px;
	border: 1px solid var(--gold);
	border-radius: 3px;
	transform: rotate(-4deg);
}
.om2gle-drop-dock .om2gle-drop-preview.is-loss .om2gle-drop-preview-stamp {
	color: var(--rose);
	border-color: var(--rose);
}
.om2gle-drop-dock .om2gle-drop-preview-caption {
	font-family: var(--mono);
	font-size: 8px;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--mute);
	text-align: center;
	width: 100%;
	white-space: nowrap;
	overflow: visible;
}
@keyframes om2-drop-preview-rise {
	0%   { opacity: 0; transform: translateY(12px) rotate(-6deg); }
	100% { opacity: 1; transform: translateY(0) rotate(0); }
}

/* "Sing another note" — when we demote it to a small secondary text link
   in the anon staged state, give it a subtle tertiary chrome instead of
   the standard ghost button look. */
#om2gle-theater-actions.is-anon-staged {
	visibility: visible !important;
	gap: 0;
	margin-top: 4px;
}
#om2gle-theater-actions.is-anon-staged #om2gle-again { display: none; }
#om2gle-theater-actions.is-anon-staged #om2gle-back-home {
	appearance: none;
	background: transparent;
	border: none;
	color: var(--mute);
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 6px 12px;
	cursor: pointer;
	transition: color .15s ease;
}
#om2gle-theater-actions.is-anon-staged #om2gle-back-home:hover {
	color: var(--ink-2);
}
#om2gle-theater-actions.is-anon-staged #om2gle-back-home::before {
	content: "↩  ";
	opacity: 0.5;
}

/* Cooldown state — composite selector beats the base anon-staged rules
   without altering them (per the appended-override cascade trap). The
   button stays a small secondary link but reads as "waiting", not
   "broken": a soft amber tick on the dot separator pulls the eye to the
   countdown numerals while the OPP-card "play an opponent" route stays
   the obvious next move. */
#om2gle-theater-actions.is-anon-staged #om2gle-back-home.is-cooldown {
	cursor: not-allowed;
	color: rgba(255, 255, 255, 0.42);
	letter-spacing: 0.14em;
	opacity: 0.85;
	animation: om2gle-cooldown-breathe 2.4s ease-in-out infinite;
}
#om2gle-theater-actions.is-anon-staged #om2gle-back-home.is-cooldown:hover {
	color: rgba(255, 255, 255, 0.42);
}
#om2gle-theater-actions.is-anon-staged #om2gle-back-home.is-cooldown::before {
	content: "◷  ";
	opacity: 0.7;
	color: var(--gold, #e5a542);
}
@keyframes om2gle-cooldown-breathe {
	0%, 100% { opacity: 0.62; }
	50%      { opacity: 0.95; }
}

/* ── Magic-login email-capture (anon self-eval onramp) ───────────────────
   Sits between the staged-reveal OPP card and the cooldown'd retake link.
   Warm-gold accent that reads as inviting, never competing with the
   throbbing OPP card's primary CTA chrome above it. Hidden by default;
   only the anon-staged branch unhides + armMagicLoginCapture() wires it. */
.om2gle-magic-capture {
	width: 100%;
	max-width: 520px;
	margin: 14px auto 0;
}
.om2gle-magic-capture[hidden] { display: none; }
.om2gle-magic-capture .om2gle-magic-capture-card {
	position: relative;
	background:
		linear-gradient(180deg, rgba(229,165,66,0.05) 0%, rgba(229,165,66,0.02) 100%),
		rgba(15, 12, 8, 0.55);
	border: 1px solid rgba(229,165,66,0.28);
	border-radius: 14px;
	padding: 18px 18px 14px;
	box-shadow:
		0 0 0 1px rgba(229,165,66,0.06) inset,
		0 12px 32px -16px rgba(229,165,66,0.18);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.om2gle-magic-capture .om2gle-magic-capture-eyebrow {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--gold, #e5a542);
	opacity: 0.85;
	margin-bottom: 6px;
}
.om2gle-magic-capture .om2gle-magic-capture-title {
	font-family: var(--ui, inherit);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.32;
	color: var(--ink-2, #c9bca0);
	margin-bottom: 4px;
}
.om2gle-magic-capture .om2gle-magic-capture-sub {
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--mute, #6a6052);
	margin-bottom: 12px;
}
.om2gle-magic-capture .om2gle-magic-capture-form {
	display: flex;
	gap: 8px;
	align-items: stretch;
	flex-wrap: wrap;
}
.om2gle-magic-capture .om2gle-magic-capture-field {
	flex: 1 1 220px;
	display: flex;
	flex-direction: column;
}
.om2gle-magic-capture .om2gle-magic-capture-label {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}
.om2gle-magic-capture .om2gle-magic-capture-email {
	appearance: none;
	background: rgba(0, 0, 0, 0.35);
	border: 1px solid rgba(229,165,66,0.22);
	border-radius: 10px;
	color: #fff;
	font-family: var(--ui, inherit);
	font-size: 14px;
	padding: 11px 13px;
	width: 100%;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.om2gle-magic-capture .om2gle-magic-capture-email:focus {
	outline: none;
	border-color: var(--gold, #e5a542);
	box-shadow: 0 0 0 3px rgba(229,165,66,0.16);
}
.om2gle-magic-capture .om2gle-magic-capture-email::placeholder {
	color: rgba(255,255,255,0.32);
}
.om2gle-magic-capture .om2gle-magic-capture-submit {
	appearance: none;
	border: none;
	cursor: pointer;
	background: linear-gradient(180deg, var(--gold-pale, #f4d191) 0%, var(--gold, #e5a542) 100%);
	color: #2a1c08;
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 11px 18px;
	border-radius: 10px;
	flex: 0 0 auto;
	transition: transform .12s ease, box-shadow .15s ease, opacity .15s ease;
	box-shadow: 0 8px 24px -10px rgba(229,165,66,0.55);
}
.om2gle-magic-capture .om2gle-magic-capture-submit:hover {
	box-shadow: 0 10px 30px -10px rgba(229,165,66,0.7);
	transform: translateY(-1px);
}
.om2gle-magic-capture .om2gle-magic-capture-submit:active { transform: translateY(0); }
.om2gle-magic-capture .om2gle-magic-capture-submit:disabled {
	opacity: 0.65;
	cursor: progress;
	transform: none;
}
.om2gle-magic-capture .om2gle-magic-capture-error {
	flex-basis: 100%;
	font-size: 12px;
	color: #ff8a7a;
	margin: 6px 0 0;
}
.om2gle-magic-capture .om2gle-magic-capture-success {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 4px;
	padding: 6px 0 4px;
}
.om2gle-magic-capture .om2gle-magic-capture-success-icon {
	width: 36px; height: 36px;
	border-radius: 50%;
	background: rgba(34,197,94,0.15);
	color: #4ade80;
	font-size: 20px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 4px;
	box-shadow: 0 0 0 1px rgba(74,222,128,0.35) inset;
}
.om2gle-magic-capture .om2gle-magic-capture-success-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--ink-2, #c9bca0);
}
.om2gle-magic-capture .om2gle-magic-capture-success-sub {
	font-size: 12px;
	color: var(--mute, #6a6052);
}
.om2gle-magic-capture .om2gle-magic-capture-fine {
	font-size: 10.5px;
	letter-spacing: 0.05em;
	color: rgba(255,255,255,0.34);
	margin: 10px 0 0;
	text-align: center;
}

/* Modal variant — used when the mascot's "Watch the free course" branch
   wants to capture an email without dropping the user out of the app.
   Wraps the same .om2gle-magic-capture card chrome in a centered backdrop
   overlay. Reuses every inner class so the card visuals stay in lockstep
   with the inline variant. */
.om2gle-magic-capture-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 9000;
	background: rgba(8, 6, 4, 0.78);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	transition: opacity .22s ease;
}
.om2gle-magic-capture-modal-overlay.is-open { opacity: 1; }
.om2gle-magic-capture-modal {
	position: relative;
	width: 100%;
	max-width: 460px;
	transform: translateY(8px) scale(0.985);
	transition: transform .28s cubic-bezier(.2,.7,.3,1);
}
.om2gle-magic-capture-modal-overlay.is-open .om2gle-magic-capture-modal {
	transform: translateY(0) scale(1);
}
/* Reuse the inline card chrome 1:1 — composite selector so it also
   matches when the .om2gle-magic-capture wrapper isn't present (modal
   markup doesn't include it). */
.om2gle-magic-capture-modal .om2gle-magic-capture-card {
	position: relative;
	background:
		linear-gradient(180deg, rgba(229,165,66,0.05) 0%, rgba(229,165,66,0.02) 100%),
		rgba(15, 12, 8, 0.92);
	border: 1px solid rgba(229,165,66,0.32);
	border-radius: 14px;
	padding: 22px 22px 16px;
	box-shadow:
		0 0 0 1px rgba(229,165,66,0.08) inset,
		0 24px 64px -20px rgba(0,0,0,0.7);
}
/* Apply the same inner styling rules to fields inside the modal card. */
.om2gle-magic-capture-modal .om2gle-magic-capture-eyebrow {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--gold, #e5a542);
	opacity: 0.9;
	margin-bottom: 6px;
}
.om2gle-magic-capture-modal .om2gle-magic-capture-title {
	font-family: var(--ui, inherit);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.32;
	color: var(--ink-2, #c9bca0);
	margin-bottom: 4px;
}
.om2gle-magic-capture-modal .om2gle-magic-capture-sub {
	font-size: 12.5px;
	letter-spacing: 0.04em;
	color: var(--mute, #6a6052);
	margin-bottom: 14px;
}
.om2gle-magic-capture-modal .om2gle-magic-capture-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.om2gle-magic-capture-modal .om2gle-magic-capture-label {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}
.om2gle-magic-capture-modal .om2gle-magic-capture-email {
	appearance: none;
	background: rgba(0, 0, 0, 0.4);
	border: 1px solid rgba(229,165,66,0.24);
	border-radius: 10px;
	color: #fff;
	font-family: var(--ui, inherit);
	font-size: 15px;
	padding: 13px 14px;
	width: 100%;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.om2gle-magic-capture-modal .om2gle-magic-capture-email:focus {
	outline: none;
	border-color: var(--gold, #e5a542);
	box-shadow: 0 0 0 3px rgba(229,165,66,0.18);
}
.om2gle-magic-capture-modal .om2gle-magic-capture-email::placeholder {
	color: rgba(255,255,255,0.34);
}
.om2gle-magic-capture-modal .om2gle-magic-capture-submit {
	appearance: none;
	border: none;
	cursor: pointer;
	background: linear-gradient(180deg, var(--gold-pale, #f4d191) 0%, var(--gold, #e5a542) 100%);
	color: #2a1c08;
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 13px 18px;
	border-radius: 10px;
	width: 100%;
	transition: transform .12s ease, box-shadow .15s ease, opacity .15s ease;
	box-shadow: 0 10px 28px -10px rgba(229,165,66,0.55);
}
.om2gle-magic-capture-modal .om2gle-magic-capture-submit:hover {
	box-shadow: 0 12px 32px -10px rgba(229,165,66,0.7);
	transform: translateY(-1px);
}
.om2gle-magic-capture-modal .om2gle-magic-capture-submit:active { transform: translateY(0); }
.om2gle-magic-capture-modal .om2gle-magic-capture-submit:disabled {
	opacity: 0.65;
	cursor: progress;
	transform: none;
}
.om2gle-magic-capture-modal .om2gle-magic-capture-error {
	font-size: 12px;
	color: #ff8a7a;
	margin: 0;
}
.om2gle-magic-capture-modal .om2gle-magic-capture-success {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 4px;
	padding: 8px 0 4px;
}
.om2gle-magic-capture-modal .om2gle-magic-capture-success-icon {
	width: 38px; height: 38px;
	border-radius: 50%;
	background: rgba(34,197,94,0.16);
	color: #4ade80;
	font-size: 22px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 4px;
	box-shadow: 0 0 0 1px rgba(74,222,128,0.4) inset;
}
.om2gle-magic-capture-modal .om2gle-magic-capture-success-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--ink-2, #c9bca0);
}
.om2gle-magic-capture-modal .om2gle-magic-capture-success-sub {
	font-size: 12.5px;
	color: var(--mute, #6a6052);
}
.om2gle-magic-capture-modal .om2gle-magic-capture-fine {
	font-size: 10.5px;
	letter-spacing: 0.05em;
	color: rgba(255,255,255,0.36);
	margin: 12px 0 0;
	text-align: center;
}
.om2gle-magic-capture-modal-close {
	position: absolute;
	top: -10px;
	right: -10px;
	width: 32px; height: 32px;
	border-radius: 50%;
	background: rgba(15,12,8,0.95);
	border: 1px solid rgba(229,165,66,0.3);
	color: var(--ink-2, #c9bca0);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .12s ease, color .12s ease;
	z-index: 1;
}
.om2gle-magic-capture-modal-close:hover {
	background: rgba(229,165,66,0.18);
	color: #fff;
}

/* Mobile: stack the preview ABOVE the drop button (not next to it) so the
   button stays full-width and tap-friendly. */
@media (max-width: 480px) {
	.om2gle-drop-dock {
		flex-direction: column;
		gap: 10px;
	}
	.om2gle-drop-dock .om2gle-drop-preview { width: 72px; }
	.om2gle-side-verdict { font-size: 9.5px; letter-spacing: 0.22em; }
	.om2gle-side-you .om2gle-side-verdict + .om2gle-side-score-row .om2gle-side-score-value {
		font-size: 78px;
	}
	.om2gle-side-weakhook { font-size: 9px; letter-spacing: 0.14em; padding: 5px 8px; }
	.om2gle-stage-reveal-cta {
		font-size: 11px;
		padding: 11px 18px;
		letter-spacing: 0.14em;
	}
	.om2gle-stage-reveal-cta .om2gle-stage-reveal-sub {
		display: none;
	}
}


/* ════════════════════════════════════════════════════════════════════
   ARCADE MODE — strictly additive section.
   Selectors are deliberately composite (.om2gle-modes.om2gle-modes-3up,
   .om2gle-mode-card.is-arcade, etc.) so they never bleed into the
   existing two-mode picker or the Versus/Solo card variants.
   ════════════════════════════════════════════════════════════════════ */

/* ── 3-up mode picker ───────────────────────────────────────────────
   With the third ARCADE card the desktop grid goes from 1fr 1fr to
   1fr 1fr 1fr. Mobile still stacks vertically. The base .om2gle-modes
   rule (above) handles the gap + position:relative for ripples — we
   only override the column count. */
.om2gle-modes.om2gle-modes-3up {
	grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 900px) {
	.om2gle-modes.om2gle-modes-3up {
		grid-template-columns: 1fr;
	}
}

/* Third attention ping. Cyan-tinted so the three pings cycle gold →
   rose → cyan, mapping to the three card identities. */
.om2gle-modes-ping.om2-ping-c {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-color: #79e8ff;
	box-shadow: 0 0 24px rgba(121, 232, 255, 0.45), inset 0 0 12px rgba(121, 232, 255, 0.35);
	animation-delay: 4s;
}
/* Restagger the original two so all three space evenly across the
   row instead of leaving the center empty. */
.om2gle-modes.om2gle-modes-3up .om2gle-modes-ping.om2-ping-a { left: 16.66%; }
.om2gle-modes.om2gle-modes-3up .om2gle-modes-ping.om2-ping-b { left: 50%;   }
.om2gle-modes.om2gle-modes-3up .om2gle-modes-ping.om2-ping-c { left: 83.33%; }
/* Stagger pings on a 6s cycle (was 4s) so all three pulse cleanly. */
.om2gle-modes.om2gle-modes-3up .om2gle-modes-ping {
	animation-duration: 6s;
}
.om2gle-modes.om2gle-modes-3up .om2gle-modes-ping.om2-ping-a { animation-delay: 0s; }
.om2gle-modes.om2gle-modes-3up .om2gle-modes-ping.om2-ping-b { animation-delay: 2s; }
.om2gle-modes.om2gle-modes-3up .om2gle-modes-ping.om2-ping-c { animation-delay: 4s; }

/* ── Card C (.is-arcade) — magenta+cyan rivalry chrome ─────────────
   Distinct from .is-versus's pure rose — arcade leans into the
   neon-fightgame palette. Uses composite selectors so the base
   .om2gle-mode-card rules can't override us. */
.om2gle-mode-card.is-arcade {
	border-color: #c450ff;
	box-shadow:
		0 0 0 1px #c450ff inset,
		0 0 56px -14px rgba(196, 80, 255, 0.42),
		0 16px 50px -28px rgba(121, 232, 255, 0.28);
}
.om2gle-mode-card.is-arcade:hover,
.om2gle-mode-card.is-arcade:focus-visible {
	border-color: #e69bff;
	box-shadow:
		0 0 0 1px #e69bff inset,
		0 0 90px -10px rgba(196, 80, 255, 0.55),
		0 24px 80px -22px rgba(121, 232, 255, 0.40);
}
.om2gle-mode-card.is-arcade:focus-visible {
	outline-color: #e69bff;
}
.om2gle-mode-card.is-arcade .om2gle-mode-card-eyebrow { color: #79e8ff; letter-spacing: 0.30em; }
.om2gle-mode-card.is-arcade .om2gle-mode-card-body {
	border-top-color: rgba(196, 80, 255, 0.28);
	background: linear-gradient(180deg, rgba(196, 80, 255, 0.08), transparent 75%);
}
.om2gle-mode-card.is-arcade .om2gle-mode-card-cta {
	background: linear-gradient(180deg, rgba(196, 80, 255, 0.22) 0%, rgba(121, 232, 255, 0.14) 100%);
	border-top-color: #c450ff;
	color: #e6c2ff;
}
.om2gle-mode-card.is-arcade:hover .om2gle-mode-card-cta,
.om2gle-mode-card.is-arcade:focus-visible .om2gle-mode-card-cta {
	background: linear-gradient(180deg, rgba(196, 80, 255, 0.45) 0%, rgba(121, 232, 255, 0.28) 100%);
	color: #fff;
}

/* On the 3-up desktop layout, the arcade lockup is intrinsically shorter
   than the scout/omegle teasers — its portraits + roster strip don't
   match the others' stage heights. The grid stretches all three cards
   equally, so by default the body absorbs ALL the slack and leaves a
   dark band above the teaser's footer rule. Letting the teaser absorb
   ALL the slack (first attempt) overshot in the opposite direction — the
   arcade teaser ended below the other two. So split it: teaser claims
   the lion's share via flex-grow:2 vs body's default flex-grow:1, body
   keeps its base flex behavior so the CTA's margin-top: auto still pins
   the bar to the card's bottom. Modest portrait bump because we now have
   the room. Mobile (≤900px) stacks vertically — rule is gated. */
@media (min-width: 901px) {
	.om2gle-mode-card.is-arcade .om2gle-mode-card-teaser {
		display: flex;
		flex-direction: column;
		flex: 2 1 auto;          /* 2x the body's grow share */
		min-height: 0;
	}
	.om2gle-mode-card.is-arcade .om2gle-teaser.om2gle-teaser-arcade {
		flex: 1 1 auto;
	}
	/* Body keeps the base .om2gle-mode-card-body's flex: 1 0 auto — no
	   override needed. It takes its 1 share of slack against the teaser's
	   2 share, so the teaser bottom rises close to the scout/omegle bottoms
	   without overshooting them. */
	.om2gle-mode-card.is-arcade .om2gle-arctease-port {
		max-width: 76px;
	}
	.om2gle-mode-card.is-arcade .om2gle-arctease-port-glyph {
		font-size: 36px;
	}
}

/* ── Arcade live teaser — 90s arcade cabinet (9s loop) ──────────────
   Mirrors the real /arcade_select stage in a tiny cabinet. Phase
   choreography over 9s:
     0–30%  SELECT  reticle hops the roster; P2 is "?", marquee
                    "SELECT YOUR FIGHTER", INSERT COIN blinking
     30–55% LOCK    reticle locks on slot 4; P2 morphs ? → V,
                    name reveals VELVET FINCH; marquee "FIGHTER LOCKED"
     55–72% CLASH   VS glyph throbs huge, screen flickers
     72–100% FIGHT  marquee snaps red "FIGHT!", FIGHT! stamp slams in
                    over the stage, scanline burst, then loops
   Selectors are scoped to .om2gle-teaser-arcade so they never bleed
   into Cards A/B or the real arcade_select chrome below. */

.om2gle-teaser.om2gle-teaser-arcade {
	position: relative;
	background:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px),
		radial-gradient(140% 90% at 50% 100%, rgba(196, 80, 255, 0.20), transparent 60%),
		linear-gradient(180deg, rgba(20, 8, 30, 0.96), rgba(8, 0, 18, 0.98));
	border-color: rgba(196, 80, 255, 0.32);
	box-shadow:
		0 0 0 1px rgba(196, 80, 255, 0.35) inset,
		0 0 60px -16px rgba(196, 80, 255, 0.5),
		0 24px 80px -28px rgba(121, 232, 255, 0.35);
	font-family: var(--mono, monospace);
	overflow: hidden;
}
/* Kill the default gold radial that the base .om2gle-teaser::before paints —
   arcade chrome owns its own atmosphere. */
.om2gle-teaser.om2gle-teaser-arcade::before { display: none; }

/* ── CRT scanline + screen flash overlays ───────────────────────── */
.om2gle-arctease-crt {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px),
		radial-gradient(120% 80% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
	mix-blend-mode: multiply;
	z-index: 4;
}
.om2gle-arctease-flash {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(255, 220, 120, 0.6), rgba(255, 90, 120, 0.4));
	opacity: 0;
	z-index: 5;
	animation: om2-arctease-flash 9s ease-out infinite;
}
@keyframes om2-arctease-flash {
	0%, 70%   { opacity: 0; }
	72%       { opacity: 0.55; }
	78%       { opacity: 0; }
	81%       { opacity: 0.3; }
	84%, 100% { opacity: 0; }
}

/* ── Marquee row (rotating phase labels with bracket frames) ────── */
.om2gle-arctease-marquee {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 4px 10px;
	border: 1px solid rgba(244, 209, 145, 0.5);
	background: linear-gradient(180deg, rgba(60, 32, 12, 0.6), rgba(28, 12, 4, 0.85));
	box-shadow:
		0 0 0 1px rgba(244, 209, 145, 0.15) inset,
		0 0 18px -6px rgba(244, 209, 145, 0.55);
	font-weight: 800;
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: #f4d191;
	align-self: stretch;
}
.om2gle-arctease-bracket {
	color: #ffd84d;
	text-shadow: 0 0 8px rgba(255, 216, 77, 0.7);
	font-size: 12px;
}
.om2gle-arctease-marquee-track {
	position: relative;
	flex: 1;
	height: 14px;
	text-align: center;
	overflow: hidden;
}
.om2gle-arctease-mtext {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	opacity: 0;
	animation-duration: 9s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
}
.om2gle-arctease-mtext.is-select { animation-name: om2-arctease-m-select; color: #f4d191; }
.om2gle-arctease-mtext.is-lock   { animation-name: om2-arctease-m-lock;   color: #c450ff; text-shadow: 0 0 10px rgba(196, 80, 255, 0.6); }
.om2gle-arctease-mtext.is-fight  { animation-name: om2-arctease-m-fight;  color: #ff5a78; text-shadow: 0 0 12px rgba(255, 90, 120, 0.75); }

@keyframes om2-arctease-m-select { 0% { opacity: 0; } 2%, 28% { opacity: 1; } 32%, 100% { opacity: 0; } }
@keyframes om2-arctease-m-lock   { 0%, 30% { opacity: 0; } 34%, 68% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes om2-arctease-m-fight  { 0%, 70% { opacity: 0; } 74%, 96% { opacity: 1; } 100% { opacity: 0; } }

/* INSERT COIN blinker — classic cabinet attract-mode tag. */
.om2gle-arctease-insert {
	position: relative;
	z-index: 2;
	text-align: center;
	font-size: 9px;
	letter-spacing: 0.32em;
	color: #c450ff;
	text-shadow: 0 0 8px rgba(196, 80, 255, 0.55);
	margin-top: 4px;
	animation: om2-arctease-insert-blink 1.4s steps(2) infinite, om2-arctease-insert-dim 9s ease infinite;
}
@keyframes om2-arctease-insert-blink {
	0%, 49%   { opacity: 1; }
	50%, 100% { opacity: 0.35; }
}
@keyframes om2-arctease-insert-dim {
	0%, 28%   { color: #c450ff; }
	34%, 100% { color: rgba(196, 80, 255, 0.25); text-shadow: none; }
}

/* ── P1 │ VS │ P2 stage ─────────────────────────────────────────── */
.om2gle-arctease-stage {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 8px;
	width: 100%;
	margin-top: 2px;
	animation: om2-arctease-stage-shake 9s ease-out infinite;
}
@keyframes om2-arctease-stage-shake {
	0%, 68%   { transform: translate3d(0, 0, 0); }
	70%       { transform: translate3d(-2px, 1px, 0); }
	72%       { transform: translate3d(3px, -1px, 0); }
	74%       { transform: translate3d(-2px, 0, 0); }
	76%, 100% { transform: translate3d(0, 0, 0); }
}
.om2gle-arctease-side {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 4px 4px 6px;
	background:
		repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 5px),
		linear-gradient(180deg, rgba(20, 8, 30, 0.7), rgba(8, 0, 18, 0.85));
	border: 1px solid rgba(244, 209, 145, 0.35);
	box-shadow: 0 0 18px -10px rgba(244, 209, 145, 0.4);
	min-width: 0;
}
.om2gle-arctease-p2 {
	border-color: rgba(121, 232, 255, 0.4);
	box-shadow: 0 0 18px -8px rgba(121, 232, 255, 0.5);
}
.om2gle-arctease-side-label {
	font-size: 9px;
	letter-spacing: 0.3em;
	font-weight: 800;
	color: #f4d191;
	padding: 1px 5px;
	border: 1px solid rgba(244, 209, 145, 0.5);
	background: rgba(0, 0, 0, 0.45);
	line-height: 1;
}
.om2gle-arctease-p2 .om2gle-arctease-side-label {
	color: #79e8ff;
	border-color: rgba(121, 232, 255, 0.55);
}

/* Portrait tile — square-ish, scanlined, corners bracketed. P1 stays gold,
   P2 stays cyan/magenta to match the real arcade_select stage. */
.om2gle-arctease-port {
	position: relative;
	width: 100%;
	max-width: 64px;
	aspect-ratio: 3 / 4;
	background:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px),
		linear-gradient(135deg, rgba(244, 209, 145, 0.22), rgba(196, 80, 255, 0.18));
	overflow: hidden;
}
.om2gle-arctease-p2 .om2gle-arctease-port {
	background:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px),
		linear-gradient(135deg, rgba(196, 80, 255, 0.22), rgba(121, 232, 255, 0.16));
}
.om2gle-arctease-port-glyph {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	font-size: 32px;
	line-height: 1;
	color: rgba(244, 209, 145, 0.85);
	text-shadow: 0 0 14px rgba(244, 209, 145, 0.55);
}
.om2gle-arctease-p2 .om2gle-arctease-port-glyph {
	color: rgba(121, 232, 255, 0.85);
	text-shadow: 0 0 14px rgba(121, 232, 255, 0.55);
}
/* P2 glyph swap: "?" during SELECT, fighter initial after LOCK. */
.om2gle-arctease-port-glyph.is-q {
	animation: om2-arctease-q-out 9s steps(1) infinite;
}
.om2gle-arctease-port-glyph.is-r {
	opacity: 0;
	color: #ffd84d;
	text-shadow: 0 0 16px rgba(255, 216, 77, 0.7), 0 0 28px rgba(196, 80, 255, 0.5);
	animation: om2-arctease-r-in 9s steps(1) infinite;
}
@keyframes om2-arctease-q-out { 0%, 30% { opacity: 1; } 32%, 100% { opacity: 0; } }
@keyframes om2-arctease-r-in  { 0%, 30% { opacity: 0; transform: scale(0.7); } 32% { opacity: 1; transform: scale(1.18); } 38%, 100% { opacity: 1; transform: scale(1); } }

/* Bracket corners (1px gold/cyan). */
.om2gle-arctease-corner {
	position: absolute;
	width: 7px;
	height: 7px;
	border-color: #f4d191;
	border-style: solid;
	border-width: 0;
	pointer-events: none;
}
.om2gle-arctease-p2 .om2gle-arctease-corner { border-color: #79e8ff; }
.om2gle-arctease-corner.is-tl { top: 2px;    left: 2px;   border-top-width: 1px; border-left-width: 1px; }
.om2gle-arctease-corner.is-tr { top: 2px;    right: 2px;  border-top-width: 1px; border-right-width: 1px; }
.om2gle-arctease-corner.is-bl { bottom: 2px; left: 2px;   border-bottom-width: 1px; border-left-width: 1px; }
.om2gle-arctease-corner.is-br { bottom: 2px; right: 2px;  border-bottom-width: 1px; border-right-width: 1px; }

.om2gle-arctease-portscan {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg,
		transparent 0%,
		rgba(255, 255, 255, 0.08) 48%,
		rgba(255, 255, 255, 0.16) 50%,
		rgba(255, 255, 255, 0.08) 52%,
		transparent 100%);
	background-size: 100% 200%;
	background-position: 0 -100%;
	animation: om2-arctease-portscan 2.4s linear infinite;
	mix-blend-mode: screen;
	opacity: 0.6;
}
@keyframes om2-arctease-portscan {
	0%   { background-position: 0 -100%; }
	100% { background-position: 0  200%; }
}

.om2gle-arctease-name {
	position: relative;
	font-weight: 800;
	font-size: 9px;
	letter-spacing: 0.18em;
	color: #fff;
	text-transform: uppercase;
	text-shadow: 0 0 8px rgba(244, 209, 145, 0.4);
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	min-height: 11px;
}
.om2gle-arctease-p2 .om2gle-arctease-name {
	text-shadow: 0 0 8px rgba(121, 232, 255, 0.45);
}
.om2gle-arctease-name-q,
.om2gle-arctease-name-r {
	display: inline-block;
	animation-duration: 9s;
	animation-timing-function: steps(1);
	animation-iteration-count: infinite;
}
.om2gle-arctease-name-q { animation-name: om2-arctease-nameq; }
.om2gle-arctease-name-r {
	opacity: 0;
	animation-name: om2-arctease-namer;
	color: #ffd84d;
}
@keyframes om2-arctease-nameq { 0%, 30% { opacity: 1; } 32%, 100% { opacity: 0; } }
@keyframes om2-arctease-namer { 0%, 30% { opacity: 0; } 32%, 100% { opacity: 1; } }

/* ── VS glyph — skewed yellow V + red S, throbs on CLASH ──────── */
.om2gle-arctease-vs {
	position: relative;
	font-weight: 900;
	font-size: 26px;
	line-height: 1;
	letter-spacing: -0.04em;
	color: #fff;
	transform: skewX(-8deg);
	user-select: none;
	padding: 0 2px;
	animation: om2-arctease-vs 9s ease-in-out infinite;
}
.om2gle-arctease-vs-v {
	color: #ffd84d;
	text-shadow:
		0 0 10px rgba(255, 216, 77, 0.85),
		0 0 20px rgba(244, 130, 32, 0.55);
}
.om2gle-arctease-vs-s {
	color: #ff5a78;
	margin-left: 2px;
	text-shadow:
		0 0 10px rgba(255, 90, 120, 0.85),
		0 0 20px rgba(196, 80, 255, 0.5);
}
@keyframes om2-arctease-vs {
	0%, 28% { transform: skewX(-8deg) scale(0.95); filter: drop-shadow(0 0 0 transparent); }
	32%     { transform: skewX(-8deg) scale(1.15); }
	55%     { transform: skewX(-8deg) scale(1.05); }
	62%     { transform: skewX(-8deg) scale(1.35); filter: drop-shadow(0 0 12px rgba(255, 216, 77, 0.6)); }
	72%     { transform: skewX(-8deg) scale(1.1);  filter: drop-shadow(0 0 8px rgba(255, 90, 120, 0.6)); }
	74%     { transform: skewX(-8deg) scale(0.9);  }
	100%    { transform: skewX(-8deg) scale(0.95); }
}

/* ── Roster strip (6 mini portraits, reticle hops then locks) ─── */
.om2gle-arctease-roster {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 4px;
	padding: 5px;
	background:
		repeating-linear-gradient(0deg, rgba(121, 232, 255, 0.04) 0 1px, transparent 1px 4px),
		linear-gradient(180deg, rgba(8, 0, 18, 0.7), rgba(20, 8, 30, 0.6));
	border: 1px solid rgba(121, 232, 255, 0.3);
	box-shadow: inset 0 0 0 1px rgba(121, 232, 255, 0.08);
	margin-top: 4px;
}
.om2gle-arctease-slot {
	position: relative;
	aspect-ratio: 1 / 1;
	border: 1px solid rgba(121, 232, 255, 0.22);
	background: linear-gradient(180deg, rgba(20, 8, 30, 0.9), rgba(8, 0, 18, 0.95));
	overflow: hidden;
}
.om2gle-arctease-mini {
	position: absolute;
	inset: 2px;
	background:
		radial-gradient(60% 50% at 50% 35%, rgba(255, 200, 220, 0.45), transparent 65%),
		radial-gradient(45% 30% at 50% 80%, rgba(196, 80, 255, 0.3), transparent 70%);
	filter: blur(0.5px) saturate(0.7);
}
.om2gle-arctease-slot.is-picked .om2gle-arctease-mini {
	background:
		radial-gradient(60% 50% at 50% 35%, rgba(255, 220, 180, 0.7), transparent 65%),
		radial-gradient(45% 30% at 50% 80%, rgba(255, 216, 77, 0.45), transparent 70%);
	animation: om2-arctease-mini-sharpen 9s linear infinite;
}
@keyframes om2-arctease-mini-sharpen {
	0%, 28%   { filter: blur(0.5px) saturate(0.7) brightness(0.9); }
	32%, 100% { filter: blur(0) saturate(1.3) brightness(1.25); }
}
.om2gle-arctease-slot:not(.is-picked) {
	animation: om2-arctease-slot-fade 9s linear infinite;
}
@keyframes om2-arctease-slot-fade {
	0%, 30% { opacity: 1; }
	34%, 100% { opacity: 0.35; }
}

/* Reticle hops s1→s2→s3→s4→s5→s6 then settles on s4 (picked).
   Math: 6 cols, gap 4px, padding 5px. Each cell width = (100% - 10px - 20px) / 6.
   Easier to express via percentages relative to the wrap: use calc on a
   single-cell stride. The wrap has `grid-template-columns: repeat(6, 1fr)`,
   so step in 1/6 increments of the wrap's inner width and account for
   the 4px gaps with a small fudge per index. */
.om2gle-arctease-reticle {
	position: absolute;
	top: 5px;
	left: 5px;
	width: calc((100% - 10px - 20px) / 6);
	aspect-ratio: 1 / 1;
	border: 1.5px solid #ffd84d;
	box-shadow:
		0 0 10px rgba(255, 216, 77, 0.7),
		inset 0 0 6px rgba(255, 216, 77, 0.5);
	pointer-events: none;
	z-index: 3;
	animation: om2-arctease-reticle 9s steps(1) infinite;
}
@keyframes om2-arctease-reticle {
	0%        { transform: translateX(0); }                                 /* s1 */
	5%        { transform: translateX(calc(100% + 4px)); }                  /* s2 */
	10%       { transform: translateX(calc(200% + 8px)); }                  /* s3 */
	15%       { transform: translateX(calc(300% + 12px)); }                 /* s4 */
	20%       { transform: translateX(calc(400% + 16px)); }                 /* s5 */
	25%       { transform: translateX(calc(500% + 20px)); }                 /* s6 */
	28%, 100% {                                                              /* lock on s4 */
		transform: translateX(calc(300% + 12px));
		border-color: #ff5a78;
		box-shadow: 0 0 16px rgba(255, 90, 120, 0.9), inset 0 0 10px rgba(255, 216, 77, 0.6);
	}
}

/* ── FIGHT! stamp — slams in over the stage on the final phase ── */
.om2gle-arctease-fight {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	transform: translateY(-50%);
}
.om2gle-arctease-fight-text {
	display: inline-block;
	padding: 6px 18px;
	font-weight: 900;
	font-size: 30px;
	letter-spacing: 0.04em;
	color: #fff;
	background: linear-gradient(180deg, #ffd84d 0%, #ff5a78 100%);
	border: 2px solid #fff;
	box-shadow:
		0 0 0 2px #ff5a78,
		0 0 24px rgba(255, 90, 120, 0.8),
		0 0 48px rgba(255, 216, 77, 0.55);
	text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
	transform: skewX(-10deg) scale(0);
	opacity: 0;
	animation: om2-arctease-fight 9s ease-out infinite;
}
@keyframes om2-arctease-fight {
	0%, 70%  { opacity: 0; transform: skewX(-10deg) scale(0); }
	72%      { opacity: 1; transform: skewX(-10deg) scale(1.4); }
	75%      { opacity: 1; transform: skewX(-10deg) scale(0.92); }
	78%      { opacity: 1; transform: skewX(-10deg) scale(1.05); }
	82%      { opacity: 1; transform: skewX(-10deg) scale(1); }
	93%      { opacity: 1; transform: skewX(-10deg) scale(1); }
	98%, 100% { opacity: 0; transform: skewX(-10deg) scale(1.2); }
}

/* Compress the cabinet inside the narrow phone card. */
@media (max-width: 720px) {
	.om2gle-app .om2gle-mode-card .om2gle-teaser.om2gle-teaser-arcade { padding: 10px 10px 12px; gap: 6px; }
	.om2gle-arctease-marquee { font-size: 10px; letter-spacing: 0.22em; padding: 3px 8px; }
	.om2gle-arctease-insert { font-size: 8px; letter-spacing: 0.28em; }
	.om2gle-arctease-port { max-width: 56px; }
	.om2gle-arctease-port-glyph { font-size: 26px; }
	.om2gle-arctease-vs { font-size: 22px; }
	.om2gle-arctease-fight-text { font-size: 24px; padding: 5px 14px; }
}

/* Honor reduced motion — kill the loop, hold on the LOCK frame. */
@media (prefers-reduced-motion: reduce) {
	.om2gle-arctease-flash,
	.om2gle-arctease-insert,
	.om2gle-arctease-stage,
	.om2gle-arctease-vs,
	.om2gle-arctease-fight-text,
	.om2gle-arctease-reticle,
	.om2gle-arctease-portscan,
	.om2gle-arctease-port-glyph.is-q,
	.om2gle-arctease-port-glyph.is-r,
	.om2gle-arctease-name-q,
	.om2gle-arctease-name-r,
	.om2gle-arctease-mtext,
	.om2gle-arctease-slot:not(.is-picked),
	.om2gle-arctease-slot.is-picked .om2gle-arctease-mini { animation: none; }
	.om2gle-arctease-port-glyph.is-q,
	.om2gle-arctease-name-q,
	.om2gle-arctease-fight-text { opacity: 0; }
	.om2gle-arctease-port-glyph.is-r,
	.om2gle-arctease-name-r,
	.om2gle-arctease-mtext.is-lock { opacity: 1; }
}

/* ── Arcade SELECT screen (Street-Fighter character grid) ───────────
   The grid is the centerpiece — 2 cols on phones, 3 on tablets, 4 on
   desktop. Each fighter card is 3:4 portrait with name + meta below. */
.om2gle-screen-arcade-select .om2gle-arcade-header {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.om2gle-screen-arcade-select .om2gle-arcade-title {
	margin: 0;
	font-size: clamp(22px, 3.4vw, 32px);
	letter-spacing: 0.02em;
	text-shadow: 0 0 24px rgba(196, 80, 255, 0.4);
}
.om2gle-screen-arcade-select .om2gle-arcade-sub {
	margin: 0;
	color: var(--ink-2);
	font-size: 14px;
	letter-spacing: 0.06em;
}

.om2gle-arcade-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(10px, 1.6vw, 18px);
	width: 100%;
	max-width: 920px;
}
@media (min-width: 640px)  { .om2gle-arcade-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px)  { .om2gle-arcade-grid { grid-template-columns: repeat(4, 1fr); } }

.om2gle-arcade-loading,
.om2gle-arcade-empty {
	width: 100%;
	text-align: center;
	color: var(--ink-2);
	padding: 24px 16px;
	font-family: var(--mono);
	letter-spacing: 0.08em;
}

.om2gle-fighter-card {
	all: unset;
	-webkit-tap-highlight-color: transparent;
	cursor: pointer;
	position: relative;
	display: flex;
	flex-direction: column;
	aspect-ratio: 3 / 4;
	background: linear-gradient(180deg, rgba(20, 8, 30, 0.92), rgba(8, 0, 18, 0.96));
	border: 1px solid rgba(196, 80, 255, 0.34);
	border-radius: 10px;
	overflow: hidden;
	transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
	box-shadow: 0 0 24px -10px rgba(196, 80, 255, 0.35);
}
.om2gle-fighter-card:hover,
.om2gle-fighter-card:focus-visible {
	transform: translateY(-2px);
	border-color: #e69bff;
	box-shadow: 0 0 36px -8px rgba(196, 80, 255, 0.55);
	outline: none;
}
.om2gle-fighter-card.is-locked {
	border-color: rgba(196, 80, 255, 0.55);
	cursor: pointer;
}
.om2gle-fighter-card.is-locked .om2gle-fighter-portrait {
	filter: grayscale(0.55) brightness(0.7);
}
.om2gle-fighter-card.is-locked:hover {
	border-color: #ffd84d;
	box-shadow: 0 0 36px -8px rgba(255, 200, 80, 0.5);
}
.om2gle-fighter-portrait {
	position: relative;
	width: 100%;
	flex: 1 1 auto;
	background: linear-gradient(135deg, rgba(196, 80, 255, 0.16), rgba(121, 232, 255, 0.10));
	overflow: hidden;
}
.om2gle-fighter-portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.om2gle-fighter-portrait-empty {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--mono);
	font-size: 48px;
	font-weight: 800;
	color: rgba(244, 209, 145, 0.5);
}
.om2gle-fighter-lock {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	z-index: 2;
	box-shadow: 0 0 12px rgba(255, 200, 80, 0.55);
}
.om2gle-fighter-name {
	padding: 8px 10px 2px;
	font-family: var(--mono);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink);
	text-align: center;
	min-height: 28px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.om2gle-fighter-meta {
	display: flex;
	justify-content: space-between;
	padding: 0 10px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	color: var(--ink-2);
}
.om2gle-fighter-note  { color: #79e8ff; }
.om2gle-fighter-score { color: #f4d191; font-weight: 700; }
.om2gle-fighter-beats {
	padding: 6px 10px 10px;
	font-size: 10px;
	letter-spacing: 0.04em;
	color: var(--ink-2);
	text-align: center;
	line-height: 1.3;
	min-height: 30px;
}
.om2gle-fighter-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	padding: 3px 7px;
	border-radius: 4px;
	font-family: var(--mono);
	font-size: 9px;
	letter-spacing: 0.18em;
	font-weight: 800;
	background: rgba(0, 0, 0, 0.65);
	color: #c450ff;
	z-index: 2;
}
.om2gle-fighter-badge.is-free {
	color: #6cd47a;
	background: rgba(0, 0, 0, 0.65);
}

/* ── Arcade DUEL screen (LISTEN UP stage) ──────────────────────────
   Portrait + name + meta on top, audio viz + status mid, big Sing
   button bottom. Vertical, phone-first. */
.om2gle-screen-arcade-duel .om2gle-arcade-duel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	padding: 18px 16px;
}
.om2gle-arcade-duel-eyebrow {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.32em;
	color: #c450ff;
	text-transform: uppercase;
	text-shadow: 0 0 12px rgba(196, 80, 255, 0.5);
}
.om2gle-arcade-duel-fighter {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.om2gle-arcade-duel-portrait-wrap {
	position: relative;
	width: 200px;
	height: 240px;
	border-radius: 12px;
	overflow: hidden;
	background: linear-gradient(135deg, rgba(196, 80, 255, 0.16), rgba(121, 232, 255, 0.10));
	box-shadow:
		0 0 0 1px rgba(196, 80, 255, 0.55) inset,
		0 0 60px -12px rgba(196, 80, 255, 0.55);
}
.om2gle-arcade-duel-portrait {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.om2gle-arcade-duel-portrait-frame {
	position: absolute;
	inset: 0;
	pointer-events: none;
	box-shadow: inset 0 0 0 2px rgba(121, 232, 255, 0.4);
	border-radius: 12px;
}
.om2gle-arcade-duel-meta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}
.om2gle-arcade-duel-name {
	font-family: var(--mono);
	font-weight: 800;
	font-size: clamp(20px, 3.2vw, 28px);
	letter-spacing: 0.14em;
	color: var(--ink);
	text-transform: uppercase;
	text-shadow: 0 0 14px rgba(244, 209, 145, 0.4);
}
.om2gle-arcade-duel-stat {
	display: flex;
	gap: 14px;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.16em;
}
.om2gle-arcade-duel-note  { color: #79e8ff; }
.om2gle-arcade-duel-score { color: #f4d191; font-weight: 700; }

.om2gle-arcade-duel-playback {
	width: 100%;
	display: flex;
	justify-content: center;
}
.om2gle-arcade-duel-viz {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 4px;
	height: 56px;
	width: 100%;
	max-width: 320px;
}
.om2gle-arcade-duel-viz span {
	width: 5px;
	border-radius: 2px;
	background: linear-gradient(180deg, rgba(121, 232, 255, 0.6), rgba(196, 80, 255, 0.5));
	height: 30%;
	transition: height 220ms ease;
}
.om2gle-arcade-duel-viz.is-playing span {
	animation: om2-arcade-duel-bar 0.7s ease-in-out infinite alternate;
	animation-delay: calc(var(--i, 0) * -0.05s);
}
@keyframes om2-arcade-duel-bar {
	0%   { height: 18%; }
	100% { height: 95%; }
}
.om2gle-arcade-duel-status {
	font-family: var(--mono);
	font-size: 13px;
	letter-spacing: 0.18em;
	color: var(--ink-2);
	text-transform: uppercase;
	min-height: 18px;
	text-align: center;
}
.om2gle-arcade-duel-status.is-tap-to-listen {
	color: #f4d191;
	cursor: pointer;
	text-shadow: 0 0 14px rgba(244, 209, 145, 0.6);
	animation: om2-arcade-tap-pulse 1.2s ease-in-out infinite;
}
@keyframes om2-arcade-tap-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.6; }
}
.om2gle-arcade-duel-sing.om2gle-btn.is-ready {
	box-shadow:
		0 0 0 1px var(--gold) inset,
		0 0 50px -10px rgba(229, 165, 66, 0.7),
		0 16px 60px -20px rgba(229, 165, 66, 0.55);
}
.om2gle-arcade-duel-sing.om2gle-btn[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Theater OPP card — arcade-eyebrow tint. Composite selector so it
   only fires when the side-opp slab is in arcade mode, never on
   regular face-offs. */
.om2gle-side.om2gle-side-opp.is-arcade .om2gle-side-eyebrow {
	color: #c450ff;
	text-shadow: 0 0 10px rgba(196, 80, 255, 0.55);
	letter-spacing: 0.22em;
}

/* Mobile narrow polish — phone-first, vertical theater per memory. */
@media (max-width: 720px) {
	.om2gle-screen-arcade-duel .om2gle-arcade-duel-portrait-wrap { width: 170px; height: 200px; }
	.om2gle-fighter-name { font-size: 11px; letter-spacing: 0.10em; }
	.om2gle-fighter-beats { font-size: 9px; }
}

/* ─────────────────────────────────────────────────────────────────────
   ARCADE SELECT — Street-Fighter P1 vs P2 lobby
   ────────────────────────────────────────────────────────────────────
   Three-zone stage: P1 (fixed = you) ─ VS glyph ─ P2 preview (focused
   roster cell). Below: small-portrait roster grid + FIGHT! commit
   button. Strictly additive — composes with the legacy
   .om2gle-fighter-card / .om2gle-arcade-grid rules via .om2gle-sf-cell
   and .om2gle-sf-grid composite selectors so duel chrome stays intact. */

.om2gle-sf-select {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(12px, 2vw, 18px);
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
	padding: 12px 12px 32px;
	font-family: var(--mono, monospace);
}

.om2gle-sf-marquee {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 18px;
	border: 1px solid rgba(244, 209, 145, 0.55);
	background: linear-gradient(180deg, rgba(60, 32, 12, 0.55), rgba(28, 12, 4, 0.85));
	box-shadow:
		0 0 0 1px rgba(244, 209, 145, 0.18) inset,
		0 0 28px -8px rgba(244, 209, 145, 0.45);
	text-transform: uppercase;
	letter-spacing: 0.32em;
	color: #f4d191;
	font-weight: 800;
	font-size: clamp(13px, 1.7vw, 16px);
}
.om2gle-sf-marquee-bracket {
	color: #ffd84d;
	text-shadow: 0 0 12px rgba(255, 216, 77, 0.7);
}
.om2gle-sf-insert {
	font-size: 12px;
	letter-spacing: 0.28em;
	color: #c450ff;
	text-shadow: 0 0 8px rgba(196, 80, 255, 0.5);
	animation: om2-sf-insert-blink 1.4s steps(2) infinite;
}
@keyframes om2-sf-insert-blink {
	0%, 49%   { opacity: 1; }
	50%, 100% { opacity: 0.35; }
}

/* ─── Stage row: P1 │ VS │ P2 ──────────────────────────────────── */
.om2gle-sf-stage {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: clamp(12px, 2vw, 24px);
	width: 100%;
}
.om2gle-sf-side {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 14px 12px;
	background:
		repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 5px),
		linear-gradient(180deg, rgba(20, 8, 30, 0.7), rgba(8, 0, 18, 0.85));
	border: 1px solid rgba(244, 209, 145, 0.35);
	border-radius: 6px;
	box-shadow: 0 0 28px -12px rgba(244, 209, 145, 0.4);
}
.om2gle-sf-side-p2 {
	border-color: rgba(196, 80, 255, 0.45);
	box-shadow: 0 0 28px -10px rgba(196, 80, 255, 0.45);
}
.om2gle-sf-side-p2[data-empty="true"] .om2gle-sf-portrait {
	filter: grayscale(0.6) brightness(0.6);
}
.om2gle-sf-side-label {
	font-size: 11px;
	letter-spacing: 0.32em;
	font-weight: 800;
	color: #f4d191;
	padding: 2px 8px;
	border: 1px solid rgba(244, 209, 145, 0.5);
	background: rgba(0, 0, 0, 0.45);
}
.om2gle-sf-side-p2 .om2gle-sf-side-label {
	color: #79e8ff;
	border-color: rgba(121, 232, 255, 0.55);
}

.om2gle-sf-portrait {
	position: relative;
	width: clamp(120px, 16vw, 180px);
	aspect-ratio: 3 / 4;
	background:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 3px),
		linear-gradient(135deg, rgba(196, 80, 255, 0.18), rgba(121, 232, 255, 0.12));
	overflow: hidden;
	border-radius: 2px;
}
.om2gle-sf-portrait-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.om2gle-sf-portrait-initial {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	font-size: clamp(48px, 6vw, 72px);
	color: rgba(244, 209, 145, 0.7);
	text-shadow: 0 0 18px rgba(244, 209, 145, 0.4);
}

/* SF select corner brackets — drawn with absolute positioned <i>s so
   they're crisp and don't fight box-shadow blur. */
.om2gle-sf-portrait-corners,
.om2gle-sf-cell-corners {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.om2gle-sf-corner {
	position: absolute;
	width: 14px;
	height: 14px;
	border-color: #f4d191;
	border-style: solid;
	border-width: 0;
}
.om2gle-sf-side-p2 .om2gle-sf-corner { border-color: #79e8ff; }
.om2gle-sf-corner.is-tl { top: 4px;    left: 4px;   border-top-width: 2px; border-left-width: 2px; }
.om2gle-sf-corner.is-tr { top: 4px;    right: 4px;  border-top-width: 2px; border-right-width: 2px; }
.om2gle-sf-corner.is-bl { bottom: 4px; left: 4px;   border-bottom-width: 2px; border-left-width: 2px; }
.om2gle-sf-corner.is-br { bottom: 4px; right: 4px;  border-bottom-width: 2px; border-right-width: 2px; }

/* CRT scan-line sweep on the focused portraits. */
.om2gle-sf-portrait-scan {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg,
		transparent 0%,
		rgba(255, 255, 255, 0.08) 48%,
		rgba(255, 255, 255, 0.16) 50%,
		rgba(255, 255, 255, 0.08) 52%,
		transparent 100%);
	background-size: 100% 200%;
	background-position: 0 -100%;
	animation: om2-sf-scan 2.6s linear infinite;
	mix-blend-mode: screen;
	opacity: 0.55;
}
@keyframes om2-sf-scan {
	0%   { background-position: 0 -100%; }
	100% { background-position: 0  200%; }
}
.om2gle-sf-side-p2[data-empty="true"] .om2gle-sf-portrait-scan { animation: none; opacity: 0.2; }

.om2gle-sf-name {
	font-weight: 800;
	font-size: clamp(13px, 1.6vw, 17px);
	letter-spacing: 0.18em;
	color: var(--ink, #fff);
	text-transform: uppercase;
	text-shadow: 0 0 14px rgba(244, 209, 145, 0.45);
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}
.om2gle-sf-side-p2 .om2gle-sf-name {
	text-shadow: 0 0 14px rgba(121, 232, 255, 0.45);
}
.om2gle-sf-tagline {
	font-size: 10px;
	letter-spacing: 0.28em;
	color: var(--ink-2, #b9a8d6);
	text-transform: uppercase;
}

/* VS glyph — sits between P1 and P2. Two staggered glyphs with a hot
   drop-shadow so it reads like classic arcade chrome. */
.om2gle-sf-vs {
	position: relative;
	font-weight: 900;
	font-size: clamp(40px, 6vw, 72px);
	letter-spacing: -0.04em;
	line-height: 1;
	color: #fff;
	text-shadow:
		0 0 18px rgba(255, 100, 100, 0.7),
		0 0 36px rgba(255, 60, 60, 0.55);
	transform: skewX(-8deg);
	animation: om2-sf-vs-throb 1.6s ease-in-out infinite;
	user-select: none;
}
.om2gle-sf-vs .om2gle-sf-vs-v {
	color: #ffd84d;
	text-shadow:
		0 0 14px rgba(255, 216, 77, 0.85),
		0 0 28px rgba(244, 130, 32, 0.55);
}
.om2gle-sf-vs .om2gle-sf-vs-s {
	color: #ff5a78;
	margin-left: 2px;
	text-shadow:
		0 0 14px rgba(255, 90, 120, 0.85),
		0 0 28px rgba(196, 80, 255, 0.5);
}
@keyframes om2-sf-vs-throb {
	0%, 100% { transform: skewX(-8deg) scale(1);    }
	50%      { transform: skewX(-8deg) scale(1.08); }
}

/* ─── Roster grid (small portrait tiles with reticles) ─────────── */
.om2gle-sf-grid-wrap {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.om2gle-sf-grid-frame {
	position: relative;
	width: 100%;
	padding: 14px;
	background:
		repeating-linear-gradient(0deg, rgba(121, 232, 255, 0.04) 0 1px, transparent 1px 4px),
		linear-gradient(180deg, rgba(8, 0, 18, 0.7), rgba(20, 8, 30, 0.65));
	border: 1px solid rgba(121, 232, 255, 0.28);
	box-shadow:
		inset 0 0 0 1px rgba(121, 232, 255, 0.08),
		0 0 32px -12px rgba(121, 232, 255, 0.35);
}
.om2gle-sf-grid-corner {
	position: absolute;
	width: 18px;
	height: 18px;
	border-color: #79e8ff;
	border-style: solid;
	border-width: 0;
}
.om2gle-sf-grid-corner.is-tl { top: -1px;    left: -1px;   border-top-width: 2px; border-left-width: 2px; }
.om2gle-sf-grid-corner.is-tr { top: -1px;    right: -1px;  border-top-width: 2px; border-right-width: 2px; }
.om2gle-sf-grid-corner.is-bl { bottom: -1px; left: -1px;   border-bottom-width: 2px; border-left-width: 2px; }
.om2gle-sf-grid-corner.is-br { bottom: -1px; right: -1px;  border-bottom-width: 2px; border-right-width: 2px; }

/* Override the legacy 2/3/4-col grid to a denser SF-style strip. */
.om2gle-arcade-grid.om2gle-sf-grid {
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	max-width: none;
}
@media (min-width: 640px) {
	.om2gle-arcade-grid.om2gle-sf-grid { grid-template-columns: repeat(6, 1fr); gap: 10px; }
}
@media (min-width: 960px) {
	.om2gle-arcade-grid.om2gle-sf-grid { grid-template-columns: repeat(8, 1fr); gap: 12px; }
}

/* SF cell: small square-ish portrait tile, no meta footer — the meta
   lives in the P2 preview panel instead. Composite selector keeps the
   legacy .om2gle-fighter-card chrome from leaking through. */
.om2gle-fighter-card.om2gle-sf-cell {
	aspect-ratio: 1 / 1;
	border-radius: 3px;
	border: 1px solid rgba(121, 232, 255, 0.28);
	background: linear-gradient(180deg, rgba(20, 8, 30, 0.85), rgba(8, 0, 18, 0.92));
	box-shadow: 0 0 14px -8px rgba(121, 232, 255, 0.4);
	padding: 0;
	overflow: hidden;
}
.om2gle-fighter-card.om2gle-sf-cell .om2gle-fighter-portrait {
	flex: 1 1 100%;
	height: 100%;
	width: 100%;
}
.om2gle-fighter-card.om2gle-sf-cell .om2gle-sf-cell-name {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 4px 4px 3px;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	color: #fff;
	background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.85) 60%);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	z-index: 3;
}
.om2gle-fighter-card.om2gle-sf-cell .om2gle-sf-cell-corners .om2gle-sf-corner {
	width: 8px; height: 8px;
	border-color: transparent;
}
.om2gle-fighter-card.om2gle-sf-cell:hover,
.om2gle-fighter-card.om2gle-sf-cell:focus-visible {
	border-color: rgba(121, 232, 255, 0.7);
	transform: none;
	box-shadow: 0 0 22px -6px rgba(121, 232, 255, 0.6);
}
.om2gle-fighter-card.om2gle-sf-cell.is-focused {
	border-color: #ffd84d;
	box-shadow:
		0 0 0 1px #ffd84d inset,
		0 0 26px -4px rgba(255, 216, 77, 0.75);
	z-index: 2;
}
.om2gle-fighter-card.om2gle-sf-cell.is-focused .om2gle-sf-cell-corners .om2gle-sf-corner {
	border-color: #ffd84d;
}
/* Brief on-focus flash so the eye locks onto the new selection, then
   the cell sits still. Continuous pulse fights the VS throb + FIGHT
   throb on small screens — three throbs at once reads as strobing. */
.om2gle-fighter-card.om2gle-sf-cell.is-focused {
	animation: om2-sf-focused-flash 0.55s ease-out 1;
}
@keyframes om2-sf-focused-flash {
	0%   { box-shadow: 0 0 0 1px #ffd84d inset, 0 0 12px -4px rgba(255, 216, 77, 0.4); }
	40%  { box-shadow: 0 0 0 1px #ffd84d inset, 0 0 44px  0px rgba(255, 216, 77, 1);   }
	100% { box-shadow: 0 0 0 1px #ffd84d inset, 0 0 26px -4px rgba(255, 216, 77, 0.75); }
}
.om2gle-fighter-card.om2gle-sf-cell.is-locked {
	border-color: rgba(196, 80, 255, 0.5);
}
/* Dim the portrait + name on locked cells, but NOT the cell itself —
   the score chip needs to stay at full gold intensity to land as the
   upsell hook (parent `filter` would otherwise rasterize the chip too). */
.om2gle-fighter-card.om2gle-sf-cell.is-locked .om2gle-fighter-portrait,
.om2gle-fighter-card.om2gle-sf-cell.is-locked .om2gle-sf-cell-name {
	filter: grayscale(0.4) brightness(0.75);
}
.om2gle-fighter-card.om2gle-sf-cell .om2gle-fighter-lock {
	top: 4px; right: 4px;
	width: 22px; height: 22px;
	font-size: 11px;
}
.om2gle-fighter-card.om2gle-sf-cell .om2gle-fighter-badge {
	/* Bottom-left so the new top-center rating badge has the prime real
	   estate; locked cells still get BOSS chrome, just below the rating. */
	top: auto; bottom: 18px; left: 4px;
	font-size: 8px;
	padding: 2px 4px;
	letter-spacing: 0.12em;
}

/* Rating badge — anchored TOP-CENTER inside the SF cell. The rating is
   the at-a-glance pick criterion (vocal line itself stays hidden until
   the duel), so this is a loud beveled arcade pill, not the apologetic
   bottom-corner chip it used to be. Locked bosses keep the badge too:
   a 9.x score next to a lock is the FOMO carrot toward Boss Mode. */
.om2gle-fighter-card.om2gle-sf-cell .om2gle-fighter-score {
	position: absolute;
	top: 5px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 7px 3px 6px;
	border-radius: 3px;
	font-family: var(--mono, "SF Mono", "JetBrains Mono", ui-monospace, Menlo, monospace);
	font-weight: 900;
	line-height: 1;
	color: #1a0c00;
	background:
		linear-gradient(180deg, #fff1be 0%, #ffd065 50%, #d68b1c 100%);
	border: 1px solid rgba(255, 233, 168, 0.95);
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.75),
		0 0 14px -2px rgba(255, 196, 96, 0.85),
		inset 0 1px 0 rgba(255, 255, 255, 0.55),
		inset 0 -1px 0 rgba(120, 60, 0, 0.45);
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
	white-space: nowrap;
	pointer-events: none;
}
.om2gle-fighter-card.om2gle-sf-cell .om2gle-fighter-score-star {
	font-size: 11px;
	line-height: 1;
	color: #6a2a00;
	text-shadow: 0 1px 0 rgba(255, 230, 150, 0.6);
}
.om2gle-fighter-card.om2gle-sf-cell .om2gle-fighter-score-num {
	font-size: 13px;
	letter-spacing: 0.02em;
}
.om2gle-fighter-card.om2gle-sf-cell.is-locked .om2gle-fighter-score {
	/* Boss badges pulse a touch brighter — the high score next to a lock
	   is the membership upsell hook, so it has to read at a glance. */
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.8),
		0 0 18px -2px rgba(255, 196, 96, 1),
		inset 0 1px 0 rgba(255, 255, 255, 0.6),
		inset 0 -1px 0 rgba(120, 60, 0, 0.5);
}
.om2gle-fighter-card.om2gle-sf-cell.is-focused .om2gle-fighter-score {
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.8),
		0 0 22px 0 rgba(255, 216, 77, 1),
		inset 0 1px 0 rgba(255, 255, 255, 0.65),
		inset 0 -1px 0 rgba(120, 60, 0, 0.5);
}
/* Phones — cells get tight; trim padding/font so the badge keeps fitting
   without spilling into the lock/BOSS chips. */
@media (max-width: 640px) {
	.om2gle-fighter-card.om2gle-sf-cell .om2gle-fighter-score {
		top: 4px;
		padding: 2px 5px 2px 4px;
		gap: 3px;
	}
	.om2gle-fighter-card.om2gle-sf-cell .om2gle-fighter-score-star { font-size: 9px; }
	.om2gle-fighter-card.om2gle-sf-cell .om2gle-fighter-score-num { font-size: 11px; }
}

/* ─── FIGHT! commit button ─────────────────────────────────────── */
.om2gle-sf-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
}
.om2gle-sf-fight.om2gle-btn {
	min-width: 240px;
	letter-spacing: 0.32em;
	font-weight: 900;
	font-size: 16px;
	text-transform: uppercase;
	box-shadow:
		0 0 0 1px var(--gold, #f4d191) inset,
		0 0 50px -10px rgba(229, 165, 66, 0.7),
		0 16px 60px -20px rgba(229, 165, 66, 0.55);
	transform: skewX(-6deg);
}
.om2gle-sf-fight.om2gle-btn .om2gle-btn-label {
	display: inline-block;
	transform: skewX(6deg);
}
.om2gle-sf-fight.om2gle-btn[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
	box-shadow: 0 0 0 1px rgba(244, 209, 145, 0.3) inset;
	transform: none;
}
.om2gle-sf-fight.om2gle-btn[disabled] .om2gle-btn-label {
	transform: none;
}
.om2gle-sf-fight.om2gle-btn:not([disabled]) {
	animation: om2-sf-fight-throb 1s ease-in-out infinite;
}
@keyframes om2-sf-fight-throb {
	0%, 100% { box-shadow: 0 0 0 1px var(--gold, #f4d191) inset, 0 0 30px -8px rgba(229, 165, 66, 0.6); }
	50%      { box-shadow: 0 0 0 1px var(--gold, #f4d191) inset, 0 0 60px -4px rgba(229, 165, 66, 0.95); }
}
.om2gle-sf-fight.om2gle-btn.is-locked {
	box-shadow:
		0 0 0 1px #c450ff inset,
		0 0 36px -8px rgba(196, 80, 255, 0.7);
	color: #fff;
}

/* ─────────────────────────────────────────────────────────────────────
   ARCADE THEATER — SF post-round chrome on the shared face-off screen
   ────────────────────────────────────────────────────────────────────
   Activated by .om2gle-theater.is-arcade-round (added in runTheater
   when state.arcade.fighter is set). Adds fighter portraits above each
   side slab, a giant K.O./WIN/DRAW stamp drop on reveal, and arcade-
   tinted status chrome. Strictly composes with the existing theater
   styles — non-arcade rounds get the original layout byte-identical. */

.om2gle-theater.is-arcade-round .om2gle-theater-status {
	color: #f4d191;
	letter-spacing: 0.28em;
	text-shadow: 0 0 14px rgba(244, 209, 145, 0.55);
	text-transform: uppercase;
	font-weight: 800;
}
.om2gle-theater.is-arcade-round.is-arcade-round .om2gle-theater-status .om2gle-dot-anim {
	background: #ffd84d;
}

/* Slab portrait strip (injected by paintArcadeSlabPortraits) */
.om2gle-arcade-slab-portrait {
	display: flex;
	justify-content: center;
	margin-bottom: 8px;
}
.om2gle-arcade-slab-frame {
	position: relative;
	width: clamp(64px, 7vw, 96px);
	aspect-ratio: 3 / 4;
	background:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 3px),
		linear-gradient(135deg, rgba(244, 209, 145, 0.18), rgba(196, 80, 255, 0.12));
	overflow: hidden;
	border-radius: 2px;
}
.om2gle-arcade-slab-portrait.is-opp .om2gle-arcade-slab-frame {
	background:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 3px),
		linear-gradient(135deg, rgba(196, 80, 255, 0.22), rgba(121, 232, 255, 0.12));
}
.om2gle-arcade-slab-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.om2gle-arcade-slab-initial {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--mono);
	font-weight: 900;
	font-size: clamp(28px, 3.6vw, 42px);
	color: rgba(244, 209, 145, 0.85);
	text-shadow: 0 0 14px rgba(244, 209, 145, 0.5);
}
.om2gle-arcade-slab-portrait.is-opp .om2gle-arcade-slab-initial {
	color: rgba(121, 232, 255, 0.85);
	text-shadow: 0 0 14px rgba(121, 232, 255, 0.5);
}
.om2gle-arcade-slab-portrait .om2gle-sf-corner {
	border-color: #f4d191;
}
.om2gle-arcade-slab-portrait.is-opp .om2gle-sf-corner {
	border-color: #79e8ff;
}

/* Bigger, skewed outcome labels in arcade mode — the side-card chip
   becomes a bold arcade stamp instead of a small badge. */
.om2gle-theater.is-arcade-round .om2gle-outcome-label {
	font-size: 18px;
	letter-spacing: 0.22em;
	font-weight: 900;
	padding: 8px 18px;
	margin-top: 12px;
	border-width: 2px;
	transform: skewX(-8deg);
	text-shadow: 0 0 12px currentColor;
	box-shadow: 0 0 28px -8px currentColor;
}
.om2gle-theater.is-arcade-round .om2gle-outcome-label.is-loss {
	box-shadow: 0 0 36px -6px rgba(214, 99, 143, 0.7);
}

/* ─── Giant K.O./WIN/DRAW stamp overlay ────────────────────────── */
.om2gle-arcade-stamp {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) skewX(-10deg) scale(0.3);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	pointer-events: none;
	z-index: 40;
	opacity: 0;
	animation: om2-arcade-stamp-drop 3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	user-select: none;
	white-space: nowrap;
}
.om2gle-theater {
	position: relative; /* anchor for the absolute stamp */
}
.om2gle-arcade-stamp-primary {
	font-weight: 900;
	font-size: clamp(72px, 14vw, 168px);
	line-height: 0.9;
	letter-spacing: -0.02em;
	color: #ffd84d;
	text-shadow:
		0 0 22px rgba(255, 216, 77, 0.95),
		0 0 44px rgba(255, 130, 60, 0.7),
		0 4px 0 rgba(0, 0, 0, 0.6);
	-webkit-text-stroke: 2px rgba(20, 8, 0, 0.85);
}
.om2gle-arcade-stamp-secondary {
	font-family: var(--mono);
	font-weight: 800;
	font-size: clamp(14px, 1.8vw, 20px);
	letter-spacing: 0.42em;
	color: #fff;
	text-shadow:
		0 0 12px rgba(255, 216, 77, 0.8),
		0 0 24px rgba(255, 130, 60, 0.55);
	transform: skewX(10deg);
}
.om2gle-arcade-stamp.is-loss .om2gle-arcade-stamp-primary {
	color: #ff5a78;
	text-shadow:
		0 0 22px rgba(255, 90, 120, 0.95),
		0 0 44px rgba(196, 80, 255, 0.7),
		0 4px 0 rgba(0, 0, 0, 0.6);
}
.om2gle-arcade-stamp.is-loss .om2gle-arcade-stamp-secondary {
	text-shadow:
		0 0 12px rgba(255, 90, 120, 0.85),
		0 0 24px rgba(196, 80, 255, 0.55);
}
.om2gle-arcade-stamp.is-tie .om2gle-arcade-stamp-primary {
	color: #79e8ff;
	text-shadow:
		0 0 22px rgba(121, 232, 255, 0.9),
		0 0 44px rgba(121, 232, 255, 0.5),
		0 4px 0 rgba(0, 0, 0, 0.6);
}
.om2gle-arcade-stamp.is-tie .om2gle-arcade-stamp-secondary {
	text-shadow: 0 0 12px rgba(121, 232, 255, 0.8);
}

/* FOMO ad — inline URL under the K.O. stamp. Reads like a caption a friend
   would screenshot: "omg where can I see this  →  m2.academy/om2gle". The
   eyebrow is hand-written-feel lowercase, the URL is the gold marquee. */
.om2gle-arcade-stamp-fomo {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	margin-top: 12px;
	padding: 8px 18px 9px;
	transform: skewX(10deg);
	background: linear-gradient(180deg, rgba(20, 12, 4, 0.78), rgba(20, 12, 4, 0.92));
	border: 2px solid rgba(255, 216, 77, 0.85);
	border-radius: 4px;
	box-shadow:
		0 0 0 1px rgba(11, 9, 7, 0.85) inset,
		0 0 22px rgba(255, 216, 77, 0.55),
		0 6px 0 rgba(0, 0, 0, 0.55);
}
.om2gle-arcade-stamp-fomo-eyebrow {
	font-family: var(--mono);
	font-weight: 600;
	font-size: clamp(11px, 1.25vw, 14px);
	letter-spacing: 0.16em;
	color: #f3e9d4;
	opacity: 0.85;
	text-transform: lowercase;
}
.om2gle-arcade-stamp-fomo-url {
	font-family: var(--mono);
	font-weight: 900;
	font-size: clamp(18px, 2.4vw, 28px);
	letter-spacing: 0.08em;
	color: #ffd84d;
	text-shadow:
		0 0 10px rgba(255, 216, 77, 0.9),
		0 0 22px rgba(255, 130, 60, 0.6),
		0 2px 0 rgba(0, 0, 0, 0.6);
	animation: om2-arcade-stamp-fomo-pulse 1.6s ease-in-out infinite;
}
.om2gle-arcade-stamp.is-loss .om2gle-arcade-stamp-fomo {
	border-color: rgba(255, 90, 120, 0.9);
	box-shadow:
		0 0 0 1px rgba(11, 9, 7, 0.85) inset,
		0 0 22px rgba(255, 90, 120, 0.55),
		0 6px 0 rgba(0, 0, 0, 0.55);
}
.om2gle-arcade-stamp.is-loss .om2gle-arcade-stamp-fomo-url {
	color: #ff8ab0;
	text-shadow:
		0 0 10px rgba(255, 90, 120, 0.95),
		0 0 22px rgba(196, 80, 255, 0.6),
		0 2px 0 rgba(0, 0, 0, 0.6);
}
.om2gle-arcade-stamp.is-tie .om2gle-arcade-stamp-fomo {
	border-color: rgba(121, 232, 255, 0.85);
	box-shadow:
		0 0 0 1px rgba(11, 9, 7, 0.85) inset,
		0 0 22px rgba(121, 232, 255, 0.5),
		0 6px 0 rgba(0, 0, 0, 0.55);
}
.om2gle-arcade-stamp.is-tie .om2gle-arcade-stamp-fomo-url {
	color: #b6f0ff;
	text-shadow:
		0 0 10px rgba(121, 232, 255, 0.9),
		0 2px 0 rgba(0, 0, 0, 0.6);
}
@keyframes om2-arcade-stamp-fomo-pulse {
	0%, 100% { filter: brightness(1); }
	50%      { filter: brightness(1.22); }
}
@media (prefers-reduced-motion: reduce) {
	.om2gle-arcade-stamp-fomo-url { animation: none; }
}
@keyframes om2-arcade-stamp-drop {
	0%   { transform: translate(-50%, -50%) skewX(-10deg) scale(0.3); opacity: 0; }
	14%  { transform: translate(-50%, -50%) skewX(-10deg) scale(1.18); opacity: 1; }
	22%  { transform: translate(-50%, -50%) skewX(-10deg) scale(1);    opacity: 1; }
	28%  { transform: translate(-50%, -50%) skewX(-10deg) scale(1.04); opacity: 1; }
	34%  { transform: translate(-50%, -50%) skewX(-10deg) scale(1);    opacity: 1; }
	75%  { transform: translate(-50%, -50%) skewX(-10deg) scale(1);    opacity: 1; }
	100% { transform: translate(-50%, -150%) skewX(-10deg) scale(0.85); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.om2gle-arcade-stamp {
		animation-duration: 0.6s;
		animation-timing-function: ease;
	}
	@keyframes om2-arcade-stamp-drop {
		0%   { transform: translate(-50%, -50%) skewX(-10deg) scale(1); opacity: 0; }
		20%  { opacity: 1; }
		80%  { opacity: 1; }
		100% { opacity: 0; }
	}
}

/* ─── Mobile: stack P1/VS/P2 vertically and shrink the stage ─── */
@media (max-width: 640px) {
	.om2gle-sf-stage {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto;
		gap: 10px;
	}
	.om2gle-sf-side-p1 { grid-column: 1; grid-row: 1; }
	.om2gle-sf-side-p2 { grid-column: 2; grid-row: 1; }
	.om2gle-sf-vs {
		grid-column: 1 / span 2;
		grid-row: 2;
		font-size: clamp(36px, 11vw, 56px);
		margin-top: -8px;
	}
	.om2gle-sf-portrait { width: 100%; max-width: 140px; }
	.om2gle-sf-marquee { font-size: 12px; padding: 5px 12px; letter-spacing: 0.22em; }
	.om2gle-sf-insert  { font-size: 10.5px; letter-spacing: 0.2em; }
	.om2gle-arcade-grid.om2gle-sf-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
	.om2gle-sf-fight.om2gle-btn { min-width: 200px; font-size: 14px; letter-spacing: 0.24em; }
}

/* ============================================================================
   MOBILE MODE TILES — 2×2 square grid that replaces the desktop 3-up cards
   ────────────────────────────────────────────────────────────────────────────
   Strictly scoped to ≤720px. Above that breakpoint the desktop 3-up grid +
   boss strip render exactly as before; the mini grid is `display:none`.

   Each tile is a 1:1 square showing the PUNCHLINE of its mode's teaser:
     - Scout  → pulsing 8.7/10 score
     - Versus → @you WIN stamp over @op M2GGED stamp
     - Arcade → FIGHT! slam-in with CRT scanlines
     - 1v1    → @you ←→ @friend dot-line connection animation

   Tiles are <button>s with data-proxy-mode pointing at the desktop card's
   id; the inline script in shell.php dispatches the desktop click so all
   of app.js's existing handlers fire without modification (additive).
   Composite selectors (.om2gle-app prefix) so we beat any earlier
   base-class rules (the appended-rule cascade trap).
============================================================================ */

/* Desktop default — mini grid is hidden. Lives outside the media query so
   the block doesn't paint on tablet/desktop widths. */
.om2gle-modes-mini { display: none; }

@media (max-width: 720px) {

	/* ──── Swap: hide the desktop tall cards + boss strip + tap-prompt,
	         then show the mini grid. The tap-prompt ("▾ TAP A MODE TO PLAY")
	         loses its purpose when the tiles read as buttons by shape. */
	.om2gle-app .om2gle-modes.om2gle-modes-3up { display: none !important; }
	.om2gle-app .om2gle-mode-boss { display: none !important; }
	.om2gle-app .om2gle-modes-prompt { display: none; }

	.om2gle-app .om2gle-modes-mini {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		width: 100%;
	}

	/* ──── Base tile chrome — square, deep cosmic background, identity
	         colours driven by CSS vars so a single breathing keyframe can
	         pulse each tile in its own colour. The breathing animation makes
	         the tile read as "active button" instead of a static panel —
	         subtle inner-border lighten + outer glow swell on a 5s cycle,
	         staggered per tile so the 2×2 doesn't pulse in unison. */
	.om2gle-app .om2gle-mini-tile {
		all: unset;
		-webkit-tap-highlight-color: transparent;
		position: relative;
		aspect-ratio: 1 / 1;
		cursor: pointer;
		display: flex;
		flex-direction: column;
		padding: 10px 12px 12px;
		box-sizing: border-box;
		background: linear-gradient(180deg, #15110c 0%, #0d0a07 100%);
		overflow: hidden;

		/* Identity-color vars — overridden per mode below. The base
		   (no .is-* class) defaults to Scout's gold. */
		--tile-color:      var(--gold);
		--tile-color-pale: var(--gold-pale);
		--tile-glow:       rgba(229, 165, 66, 0.38);
		--tile-glow-hot:   rgba(229, 165, 66, 0.55);

		border: 1px solid var(--tile-color);
		box-shadow:
			0 0 0 1px var(--tile-color) inset,
			0 0 32px -14px var(--tile-glow);
		transition: transform .18s ease;
		animation: om2-mini-tile-alive 5s ease-in-out infinite;
		will-change: box-shadow;
	}
	.om2gle-app .om2gle-mini-tile:active {
		transform: scale(0.97);
		animation-play-state: paused;
	}
	.om2gle-app .om2gle-mini-tile:focus-visible {
		outline: 2px solid var(--tile-color-pale);
		outline-offset: 2px;
	}

	/* Per-mode identity vars + staggered phase. Stagger so each tile
	   reads as its own button rather than the whole grid breathing
	   together. 5s cycle × 4 tiles = 1.25s apart. */
	.om2gle-app .om2gle-mini-tile.is-solo   { animation-delay:  0s; }
	.om2gle-app .om2gle-mini-tile.is-versus {
		--tile-color:      var(--rose);
		--tile-color-pale: #ffa1c6;
		--tile-glow:       rgba(214, 99, 143, 0.40);
		--tile-glow-hot:   rgba(214, 99, 143, 0.62);
		animation-delay: 1.25s;
	}
	.om2gle-app .om2gle-mini-tile.is-arcade {
		--tile-color:      #c450ff;
		--tile-color-pale: #e69bff;
		--tile-glow:       rgba(196, 80, 255, 0.42);
		--tile-glow-hot:   rgba(196, 80, 255, 0.62);
		animation-delay: 2.5s;
	}
	.om2gle-app .om2gle-mini-tile.is-1v1 {
		--tile-color:      var(--amber);
		--tile-color-pale: #ffd8a3;
		--tile-glow:       rgba(255, 181, 71, 0.40);
		--tile-glow-hot:   rgba(255, 181, 71, 0.62);
		animation-delay: 3.75s;
	}

	/* Breathing keyframe — drives inner-border lighten + outer glow swell.
	   At 50% the inset shadow shifts to the paler identity colour and
	   adds a second 1px ring for a "border highlights as you watch" beat;
	   the outer glow widens and brightens. Subtle (1px movement, opacity
	   delta ~0.2) so it reads as "alive" not "distracting". */
	@keyframes om2-mini-tile-alive {
		0%, 100% {
			box-shadow:
				0 0 0 1px var(--tile-color) inset,
				0 0 32px -14px var(--tile-glow);
		}
		50% {
			box-shadow:
				0 0 0 1px var(--tile-color-pale) inset,
				0 0 0 2px var(--tile-glow) inset,
				0 0 48px -8px var(--tile-glow-hot);
		}
	}

	/* Eyebrow / title / sub typography */
	.om2gle-app .om2gle-mini-eyebrow {
		font-family: var(--mono);
		font-size: 8.5px;
		letter-spacing: 0.26em;
		text-transform: uppercase;
		color: var(--gold-pale);
		opacity: 0.78;
		line-height: 1;
	}
	.om2gle-app .om2gle-mini-tile.is-versus .om2gle-mini-eyebrow { color: #ffc4d8; }
	.om2gle-app .om2gle-mini-tile.is-arcade .om2gle-mini-eyebrow { color: #e69bff; }
	.om2gle-app .om2gle-mini-tile.is-1v1    .om2gle-mini-eyebrow { color: #ffd8a3; }

	.om2gle-app .om2gle-mini-stage {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		margin: 4px 0;
		overflow: hidden;
	}

	.om2gle-app .om2gle-mini-title {
		font-family: var(--serif);
		font-style: italic;
		font-size: 15px;
		line-height: 1.05;
		color: var(--ink);
		margin-top: 1px;
	}
	.om2gle-app .om2gle-mini-sub {
		font-family: var(--mono);
		font-size: 8px;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: var(--mute);
		margin-top: 3px;
		line-height: 1;
	}

	/* Price/owned badge for the 1v1 tile (paintBossPill updates the text) */
	.om2gle-app .om2gle-mini-badge {
		position: absolute;
		top: 8px;
		right: 8px;
		font-family: var(--mono);
		font-size: 8.5px;
		font-weight: 600;
		letter-spacing: 0.12em;
		padding: 3px 6px 2px;
		border: 1px solid var(--amber);
		background: rgba(8, 6, 4, 0.6);
		color: var(--amber);
		border-radius: 2px;
		line-height: 1;
	}

	/* ──── SCOUT punchline — pulsing 8.7/10 score ─────────────────── */
	.om2gle-app .om2gle-mini-score {
		display: inline-flex;
		align-items: baseline;
		gap: 2px;
		color: var(--gold);
		font-family: var(--serif);
		font-style: italic;
		text-shadow: 0 0 22px rgba(229, 165, 66, 0.55);
		animation: om2-mini-score 4s ease-in-out infinite;
	}
	.om2gle-app .om2gle-mini-score-num  { font-size: 46px; line-height: 1; }
	.om2gle-app .om2gle-mini-score-denom { font-size: 13px; color: var(--gold-pale); opacity: 0.7; }
	@keyframes om2-mini-score {
		0%, 100% { transform: scale(1);    text-shadow: 0 0 22px rgba(229, 165, 66, 0.45); }
		48%      { transform: scale(1.10); text-shadow: 0 0 38px rgba(229, 165, 66, 0.85); }
		52%      { transform: scale(1.06); text-shadow: 0 0 34px rgba(229, 165, 66, 0.75); }
	}

	/* ──── VERSUS punchline — WIN over M2GGED stamps fade in ──────── */
	.om2gle-app .om2gle-mini-versus {
		display: flex;
		flex-direction: column;
		gap: 5px;
		width: 100%;
	}
	.om2gle-app .om2gle-mini-versus-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 6px;
	}
	.om2gle-app .om2gle-mini-versus-handle {
		font-family: var(--mono);
		font-size: 9.5px;
		color: var(--ink-2);
		letter-spacing: 0.03em;
	}
	.om2gle-app .om2gle-mini-versus-vs {
		text-align: center;
		font-family: var(--mono);
		font-size: 8.5px;
		letter-spacing: 0.42em;
		color: var(--rose);
		opacity: 0.55;
		line-height: 1;
	}
	.om2gle-app .om2gle-mini-stamp {
		font-family: var(--mono);
		font-size: 10px;
		font-weight: 700;
		letter-spacing: 0.10em;
		padding: 2.5px 6px 2px;
		border: 1px solid;
		line-height: 1;
		opacity: 0;
		transform: rotate(-6deg) scale(1.4);
	}
	.om2gle-app .om2gle-mini-stamp.is-win {
		color: var(--gold);
		border-color: var(--gold);
		animation: om2-mini-stamp-in 3.6s ease-out infinite;
		animation-delay: 0.6s;
	}
	.om2gle-app .om2gle-mini-stamp.is-loss {
		color: var(--rose);
		border-color: var(--rose);
		animation: om2-mini-stamp-in 3.6s ease-out infinite;
		animation-delay: 1.4s;
	}
	@keyframes om2-mini-stamp-in {
		0%, 8%   { opacity: 0; transform: rotate(-6deg) scale(1.5); }
		12%, 92% { opacity: 1; transform: rotate(-6deg) scale(1); }
		100%     { opacity: 0; transform: rotate(-6deg) scale(1); }
	}

	/* ──── ARCADE punchline — FIGHT! slam over CRT scanlines ──────── */
	.om2gle-app .om2gle-mini-stage.is-arcade::before {
		content: '';
		position: absolute;
		inset: -10px;
		background: repeating-linear-gradient(
			0deg,
			transparent 0,
			transparent 2px,
			rgba(196, 80, 255, 0.07) 2px,
			rgba(196, 80, 255, 0.07) 3px
		);
		pointer-events: none;
	}
	.om2gle-app .om2gle-mini-fight {
		font-family: var(--mono);
		font-weight: 800;
		font-size: 30px;
		letter-spacing: 0.04em;
		color: #fff;
		transform: skew(-8deg) scale(1);
		text-shadow:
			0 0 18px rgba(196, 80, 255, 0.9),
			2px 2px 0 #c450ff,
			-2px 2px 0 #79e8ff;
		animation: om2-mini-fight 3.2s ease-in-out infinite;
	}
	@keyframes om2-mini-fight {
		0%, 100% { opacity: 0.85; transform: skew(-8deg) scale(1); }
		48%      { opacity: 1;    transform: skew(-8deg) scale(1.14);
		           text-shadow:
		               0 0 30px rgba(196, 80, 255, 1),
		               3px 3px 0 #c450ff,
		               -3px 3px 0 #79e8ff; }
		56%      { opacity: 1;    transform: skew(-8deg) scale(1.08); }
	}

	/* ──── 1V1 punchline — @you ←→ @friend dot-and-line connection ─ */
	.om2gle-app .om2gle-mini-link {
		display: inline-flex;
		align-items: center;
		gap: 6px;
	}
	.om2gle-app .om2gle-mini-link-dot {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: var(--amber);
		box-shadow: 0 0 14px rgba(255, 181, 71, 0.75);
	}
	.om2gle-app .om2gle-mini-link-line {
		position: relative;
		width: 54px;
		height: 1px;
		background: linear-gradient(90deg,
			rgba(255, 181, 71, 0.9),
			rgba(255, 181, 71, 0.25),
			rgba(255, 181, 71, 0.9));
	}
	.om2gle-app .om2gle-mini-link-line::after {
		content: '';
		position: absolute;
		top: -2.5px;
		left: 0;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: var(--gold-pale);
		box-shadow: 0 0 12px var(--gold-pale);
		animation: om2-mini-link-travel 2.4s ease-in-out infinite;
	}
	@keyframes om2-mini-link-travel {
		0%, 100% { left: 0;    opacity: 0; }
		15%, 85% { opacity: 1; }
		50%      { left: 48px; opacity: 1; }
	}
}

/* ============================================================================
   SIM DUEL — content-engine sub-flow on top of arcade mode
   ============================================================================
   Pure client sim that pits two roster fighters against each other so the
   user can mass-produce vertical share clips. Two screens:

     1. arcade_sim_select  → slot picker (two big slots + horizontal roster)
     2. arcade_sim_theater → vertical 9:16 soul-crushing reveal

   The theater is the show. Everything is sized off `--sim-vh` (a custom
   property the JS sets to match the actual visible viewport, so iOS Safari's
   URL bar doesn't clip the FINAL CARD). The whole stage is locked to a
   9:16 column on desktop, full-bleed on phones — designed to be screen-
   recorded as-is. The aesthetic respects the memory: warm gold/amber as
   primary chrome, magenta+cyan only on the opp-side (B) for rivalry.
============================================================================ */

/* ── SIM DUEL entry chip on arcade_select ───────────────────────────────── */
.om2gle-btn.om2gle-sf-sim-entry {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	margin-top: 2px;
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: #f4d191;
	border: 1px dashed rgba(244, 209, 145, 0.55);
	background:
		repeating-linear-gradient(45deg, rgba(244, 209, 145, 0.04) 0 4px, transparent 4px 8px),
		rgba(20, 8, 30, 0.4);
	transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .12s ease;
}
.om2gle-btn.om2gle-sf-sim-entry:hover,
.om2gle-btn.om2gle-sf-sim-entry:focus-visible {
	border-color: #ffd84d;
	color: #ffd84d;
	background:
		repeating-linear-gradient(45deg, rgba(255, 216, 77, 0.08) 0 4px, transparent 4px 8px),
		rgba(40, 20, 60, 0.55);
}
.om2gle-sf-sim-entry-glyph {
	font-size: 9px;
	letter-spacing: 0.05em;
	color: #c450ff;
	text-shadow: 0 0 8px rgba(196, 80, 255, 0.6);
}
.om2gle-sf-sim-entry-label {
	font-weight: 800;
	letter-spacing: 0.32em;
}
.om2gle-sf-sim-entry-tail {
	font-size: 9px;
	letter-spacing: 0.18em;
	color: var(--mute, #7a6e58);
	padding-left: 8px;
	border-left: 1px solid rgba(244, 209, 145, 0.25);
}

/* ── SIM SELECT screen ──────────────────────────────────────────────────── */
.om2gle-sim-select {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(10px, 1.8vw, 16px);
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	padding: 12px 12px 28px;
	font-family: var(--mono, monospace);
}
.om2gle-sim-marquee {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 18px;
	border: 1px solid rgba(196, 80, 255, 0.55);
	background: linear-gradient(180deg, rgba(40, 12, 60, 0.55), rgba(16, 4, 28, 0.85));
	box-shadow:
		0 0 0 1px rgba(196, 80, 255, 0.2) inset,
		0 0 28px -8px rgba(196, 80, 255, 0.55);
	text-transform: uppercase;
	letter-spacing: 0.32em;
	color: #f4d191;
	font-weight: 800;
	font-size: clamp(13px, 1.7vw, 16px);
}
.om2gle-sim-marquee-bracket {
	color: #c450ff;
	text-shadow: 0 0 12px rgba(196, 80, 255, 0.8);
}
.om2gle-sim-insert {
	font-size: 10px;
	letter-spacing: 0.32em;
	color: #79e8ff;
	text-shadow: 0 0 8px rgba(121, 232, 255, 0.55);
	animation: om2-sf-insert-blink 1.4s steps(2) infinite;
}

.om2gle-sim-slots {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: clamp(8px, 1.6vw, 18px);
	width: 100%;
}
.om2gle-sim-slot-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	min-width: 0;
}
/* The vox player should match the slot's natural width so the EQ strip
   sits flush under the slot card instead of stretching to the grid column. */
.om2gle-sim-slot-col > .om2gle-sim-slot {
	align-self: center;
}
.om2gle-sim-slot-col > .om2gle-sim-vox {
	width: clamp(120px, 28vw, 180px);
	max-width: 100%;
}
.om2gle-sim-slot {
	all: unset;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 12px 10px;
	border: 1px solid rgba(244, 209, 145, 0.4);
	background: linear-gradient(180deg, rgba(20, 8, 30, 0.7), rgba(8, 0, 18, 0.9));
	box-shadow: 0 0 24px -12px rgba(244, 209, 145, 0.45);
	cursor: pointer;
	transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease;
	text-align: center;
}
.om2gle-sim-slot[data-slot="b"] {
	border-color: rgba(196, 80, 255, 0.45);
	box-shadow: 0 0 24px -10px rgba(196, 80, 255, 0.55);
}
.om2gle-sim-slot:hover,
.om2gle-sim-slot:focus-visible,
.om2gle-sim-slot.is-active {
	border-color: #ffd84d;
	box-shadow:
		0 0 0 1px #ffd84d inset,
		0 0 28px -4px rgba(255, 216, 77, 0.75);
}
.om2gle-sim-slot[data-slot="b"]:hover,
.om2gle-sim-slot[data-slot="b"]:focus-visible,
.om2gle-sim-slot[data-slot="b"].is-active {
	border-color: #79e8ff;
	box-shadow:
		0 0 0 1px #79e8ff inset,
		0 0 28px -4px rgba(121, 232, 255, 0.85);
}
.om2gle-sim-slot-label {
	font-size: 11px;
	letter-spacing: 0.32em;
	font-weight: 800;
	color: #f4d191;
	padding: 2px 8px;
	border: 1px solid rgba(244, 209, 145, 0.5);
	background: rgba(0, 0, 0, 0.45);
}
.om2gle-sim-slot[data-slot="b"] .om2gle-sim-slot-label {
	color: #79e8ff;
	border-color: rgba(121, 232, 255, 0.55);
}
.om2gle-sim-slot-portrait {
	position: relative;
	width: clamp(96px, 22vw, 140px);
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 3px),
		linear-gradient(135deg, rgba(196, 80, 255, 0.18), rgba(121, 232, 255, 0.12));
}
.om2gle-sim-slot-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.om2gle-sim-slot-initial {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	font-size: clamp(36px, 6vw, 56px);
	color: rgba(244, 209, 145, 0.7);
	text-shadow: 0 0 18px rgba(244, 209, 145, 0.4);
}
.om2gle-sim-slot[data-slot="b"] .om2gle-sim-slot-initial {
	color: rgba(121, 232, 255, 0.7);
	text-shadow: 0 0 18px rgba(121, 232, 255, 0.4);
}
.om2gle-sim-slot-name {
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}
.om2gle-sim-slot-meta {
	font-size: 9px;
	letter-spacing: 0.24em;
	color: var(--mute, #7a6e58);
	text-transform: uppercase;
}

/* ── Themed vocal-preview player (per slot) ─────────────────────────────────
   Sits below the slot button, picks up the slot's side accent (gold for A,
   cyan for B as opp-side rivalry). No native browser audio chrome — the EQ
   strip is driven by an AnalyserNode RAF in app.js writing --lvl on each bar.
   Progress sliver gets its width from --p. */
.om2gle-sim-vox {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: auto auto;
	column-gap: 8px;
	row-gap: 4px;
	align-items: center;
	padding: 6px 8px;
	border: 1px solid rgba(244, 209, 145, 0.35);
	background:
		repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px),
		linear-gradient(180deg, rgba(20, 8, 30, 0.92), rgba(8, 0, 18, 0.98));
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.45) inset,
		0 0 18px -8px rgba(244, 209, 145, 0.4);
}
.om2gle-sim-vox[hidden] { display: none; }
.om2gle-sim-vox[data-vox-side="b"] {
	border-color: rgba(121, 232, 255, 0.4);
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.45) inset,
		0 0 18px -8px rgba(121, 232, 255, 0.5);
}
.om2gle-sim-vox.is-playing {
	border-color: #ffd84d;
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.45) inset,
		0 0 22px -4px rgba(255, 216, 77, 0.7);
}
.om2gle-sim-vox[data-vox-side="b"].is-playing {
	border-color: #79e8ff;
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.45) inset,
		0 0 22px -4px rgba(121, 232, 255, 0.85);
}

.om2gle-sim-vox-play {
	all: unset;
	grid-row: 1 / 2;
	grid-column: 1 / 2;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: 1px solid #ffd84d;
	background: radial-gradient(circle at 30% 30%, rgba(255, 216, 77, 0.22), rgba(255, 216, 77, 0.04) 65%);
	color: #ffd84d;
	font-weight: 900;
	font-size: 11px;
	letter-spacing: 0;
	text-shadow: 0 0 8px rgba(255, 216, 77, 0.75);
	transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}
.om2gle-sim-vox-play:hover,
.om2gle-sim-vox-play:focus-visible {
	box-shadow: 0 0 14px -2px rgba(255, 216, 77, 0.8);
	transform: scale(1.03);
}
.om2gle-sim-vox[data-vox-side="b"] .om2gle-sim-vox-play {
	border-color: #79e8ff;
	background: radial-gradient(circle at 30% 30%, rgba(121, 232, 255, 0.24), rgba(121, 232, 255, 0.05) 65%);
	color: #79e8ff;
	text-shadow: 0 0 8px rgba(121, 232, 255, 0.8);
}
.om2gle-sim-vox[data-vox-side="b"] .om2gle-sim-vox-play:hover,
.om2gle-sim-vox[data-vox-side="b"] .om2gle-sim-vox-play:focus-visible {
	box-shadow: 0 0 14px -2px rgba(121, 232, 255, 0.9);
}
.om2gle-sim-vox.is-playing .om2gle-sim-vox-play {
	background: radial-gradient(circle at 30% 30%, rgba(255, 216, 77, 0.42), rgba(255, 216, 77, 0.08) 70%);
	animation: om2-sim-vox-pulse 1.1s ease-in-out infinite;
}
.om2gle-sim-vox[data-vox-side="b"].is-playing .om2gle-sim-vox-play {
	background: radial-gradient(circle at 30% 30%, rgba(121, 232, 255, 0.42), rgba(121, 232, 255, 0.08) 70%);
}
@keyframes om2-sim-vox-pulse {
	0%, 100% { box-shadow: 0 0 10px -2px rgba(255, 216, 77, 0.55); }
	50%      { box-shadow: 0 0 18px 0 rgba(255, 216, 77, 0.95); }
}

.om2gle-sim-vox-eq {
	grid-row: 1 / 2;
	grid-column: 2 / 3;
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 22px;
	padding: 0 2px;
	min-width: 0;
}
.om2gle-sim-vox-eq i {
	display: block;
	flex: 1 1 0;
	min-width: 2px;
	/* --lvl is written from the AnalyserNode RAF loop (0 .. 1). The 18%
	   floor keeps the bars from collapsing to nothing while playing. */
	height: calc(18% + (var(--lvl, 0) * 82%));
	background: linear-gradient(180deg, #ffd84d 0%, #f4a93a 60%, #c97818 100%);
	box-shadow: 0 0 6px -2px rgba(255, 216, 77, 0.85);
	transition: height 60ms linear;
}
.om2gle-sim-vox[data-vox-side="b"] .om2gle-sim-vox-eq i {
	background: linear-gradient(180deg, #79e8ff 0%, #38b9e6 60%, #1d6fa1 100%);
	box-shadow: 0 0 6px -2px rgba(121, 232, 255, 0.85);
}
.om2gle-sim-vox:not(.is-playing) .om2gle-sim-vox-eq i {
	opacity: 0.5;
}

.om2gle-sim-vox-time {
	grid-row: 1 / 2;
	grid-column: 3 / 4;
	font-family: var(--mono, monospace);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: #f4d191;
	text-shadow: 0 0 6px rgba(244, 209, 145, 0.55);
	min-width: 28px;
	text-align: right;
}
.om2gle-sim-vox[data-vox-side="b"] .om2gle-sim-vox-time {
	color: #c4f3ff;
	text-shadow: 0 0 6px rgba(121, 232, 255, 0.55);
}

.om2gle-sim-vox-progress {
	grid-row: 2 / 3;
	grid-column: 1 / 4;
	height: 2px;
	background: rgba(255, 255, 255, 0.07);
	overflow: hidden;
	position: relative;
}
.om2gle-sim-vox-progress-fill {
	position: absolute;
	inset: 0;
	width: var(--p, 0%);
	background: linear-gradient(90deg, #ffd84d, #f4a93a);
	box-shadow: 0 0 8px -2px rgba(255, 216, 77, 0.9);
	transition: width 120ms linear;
}
.om2gle-sim-vox[data-vox-side="b"] .om2gle-sim-vox-progress-fill {
	background: linear-gradient(90deg, #79e8ff, #38b9e6);
	box-shadow: 0 0 8px -2px rgba(121, 232, 255, 0.9);
}

.om2gle-sim-vs {
	font-weight: 900;
	font-size: clamp(28px, 5vw, 48px);
	letter-spacing: -0.04em;
	line-height: 1;
	transform: skewX(-8deg);
}
.om2gle-sim-vs .om2gle-sf-vs-v {
	color: #ffd84d;
	text-shadow: 0 0 12px rgba(255, 216, 77, 0.8);
}
.om2gle-sim-vs .om2gle-sf-vs-s {
	color: #ff5a78;
	margin-left: 2px;
	text-shadow: 0 0 12px rgba(255, 90, 120, 0.85);
}

.om2gle-sim-roster-wrap {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.om2gle-sim-roster-hint {
	font-size: 10px;
	letter-spacing: 0.32em;
	color: #ffd84d;
	text-transform: uppercase;
	text-align: center;
	text-shadow: 0 0 10px rgba(255, 216, 77, 0.55);
}
.om2gle-sim-roster {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	width: 100%;
	overflow-x: auto;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding: 8px;
	border: 1px solid rgba(121, 232, 255, 0.28);
	background:
		repeating-linear-gradient(0deg, rgba(121, 232, 255, 0.04) 0 1px, transparent 1px 4px),
		linear-gradient(180deg, rgba(8, 0, 18, 0.7), rgba(20, 8, 30, 0.65));
}
.om2gle-sim-roster::-webkit-scrollbar { height: 4px; }
.om2gle-sim-roster::-webkit-scrollbar-thumb {
	background: rgba(121, 232, 255, 0.4);
	border-radius: 2px;
}
.om2gle-sim-roster-cell {
	all: unset;
	flex: 0 0 auto;
	width: clamp(60px, 16vw, 84px);
	aspect-ratio: 1 / 1;
	position: relative;
	border: 1px solid rgba(121, 232, 255, 0.28);
	background: linear-gradient(180deg, rgba(20, 8, 30, 0.85), rgba(8, 0, 18, 0.92));
	overflow: hidden;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.om2gle-sim-roster-cell:hover,
.om2gle-sim-roster-cell:focus-visible {
	border-color: #ffd84d;
	box-shadow: 0 0 18px -4px rgba(255, 216, 77, 0.7);
	transform: translateY(-1px);
}
.om2gle-sim-roster-cell.is-used-a {
	border-color: #ffd84d;
	box-shadow: 0 0 0 1px #ffd84d inset, 0 0 18px -4px rgba(255, 216, 77, 0.7);
}
.om2gle-sim-roster-cell.is-used-b {
	border-color: #79e8ff;
	box-shadow: 0 0 0 1px #79e8ff inset, 0 0 18px -4px rgba(121, 232, 255, 0.7);
}
.om2gle-sim-roster-cell-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.om2gle-sim-roster-cell-initial {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	font-size: 22px;
	color: rgba(244, 209, 145, 0.7);
}
.om2gle-sim-roster-cell-name {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 2px 3px 3px;
	font-size: 8px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	color: #fff;
	background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.85) 60%);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.om2gle-sim-roster-cell-score {
	position: absolute;
	top: 2px;
	right: 2px;
	padding: 1px 4px;
	font-size: 8px;
	font-weight: 900;
	letter-spacing: 0.04em;
	background: rgba(0, 0, 0, 0.7);
	color: #ffd84d;
	border: 1px solid rgba(255, 216, 77, 0.6);
}
/* Locked (Boss-Mode) fighters are fully pickable inside SIM — the lock is
   a face-off paywall, not a sim paywall. Drop the grayscale dim and keep
   only a subtle amber ring so the cells still read as "premium". */
.om2gle-sim-roster-cell.is-locked {
	border-color: rgba(255, 216, 77, 0.45);
	box-shadow: 0 0 0 1px rgba(255, 216, 77, 0.15) inset;
}
.om2gle-sim-roster-cell.is-locked::after {
	content: 'BOSS';
	position: absolute;
	left: 2px;
	top: 2px;
	padding: 1px 3px;
	font-family: var(--mono, monospace);
	font-size: 7px;
	font-weight: 900;
	letter-spacing: 0.16em;
	color: #ffd84d;
	background: rgba(0, 0, 0, 0.7);
	border: 1px solid rgba(255, 216, 77, 0.55);
	pointer-events: none;
}

.om2gle-sim-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	width: 100%;
}
.om2gle-sim-actions-row {
	display: flex;
	gap: 12px;
	align-items: center;
}
.om2gle-btn.om2gle-sim-run {
	min-width: 220px;
	letter-spacing: 0.32em;
	font-weight: 900;
	font-size: 15px;
	transform: skewX(-6deg);
	box-shadow:
		0 0 0 1px var(--gold, #f4d191) inset,
		0 0 50px -10px rgba(229, 165, 66, 0.7);
}
.om2gle-btn.om2gle-sim-run .om2gle-btn-label {
	display: inline-block;
	transform: skewX(6deg);
}
.om2gle-btn.om2gle-sim-run[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
	transform: none;
	box-shadow: 0 0 0 1px rgba(244, 209, 145, 0.3) inset;
}
.om2gle-btn.om2gle-sim-run[disabled] .om2gle-btn-label {
	transform: none;
}
.om2gle-btn.om2gle-sim-run:not([disabled]) {
	animation: om2-sf-fight-throb 1s ease-in-out infinite;
}
.om2gle-btn.om2gle-sim-shuffle {
	font-size: 11px;
	letter-spacing: 0.24em;
	color: #c450ff;
	border-color: rgba(196, 80, 255, 0.5);
}
.om2gle-btn.om2gle-sim-shuffle:hover {
	border-color: #c450ff;
	color: #e3a8ff;
}

/* ── SIM THEATER — vertical 9:16 soul-crusher ───────────────────────────── */

.om2gle-screen-sim-theater {
	display: flex;
	align-items: center;
	justify-content: center;
}
.om2gle-screen-sim-theater[hidden] { display: none !important; }

.om2gle-sim-theater {
	/* Locked-aspect 9:16 column. The JS sets --sim-vh on the theater root
	   so iOS Safari's dynamic toolbar doesn't lop off the footer. */
	--sim-vh: 100vh;
	position: relative;
	width: min(96vw, calc(var(--sim-vh) * 9 / 16));
	height: var(--sim-vh);
	max-height: var(--sim-vh);
	overflow: hidden;
	background: radial-gradient(ellipse at 50% 55%, #18102a 0%, #0a0612 55%, #050309 100%);
	color: #f3e9d4;
	font-family: var(--mono, monospace);
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: clamp(4px, 0.8vh, 8px);
	padding: clamp(8px, 2.5vh, 20px) clamp(8px, 3vw, 18px);
}
.om2gle-sim-header  { flex: 0 0 auto; }
.om2gle-sim-roster-card  { flex: 0 1 auto; }
.om2gle-sim-mid          { flex: 1 1 0; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: clamp(4px, 1vh, 8px); position: relative; z-index: 2; min-height: 0; }
.om2gle-sim-footer       { flex: 0 0 auto; }
@media (min-width: 760px) {
	.om2gle-sim-theater {
		--sim-vh: min(100vh, 92vh);
		border: 1px solid rgba(244, 209, 145, 0.18);
		box-shadow:
			0 0 0 1px rgba(244, 209, 145, 0.08) inset,
			0 30px 90px -30px rgba(196, 80, 255, 0.4),
			0 -30px 90px -30px rgba(255, 216, 77, 0.3);
	}
}

.om2gle-sim-stage-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}
.om2gle-sim-bg-grid {
	position: absolute;
	inset: -10%;
	background-image:
		linear-gradient(rgba(244, 209, 145, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(196, 80, 255, 0.06) 1px, transparent 1px);
	background-size: 32px 32px, 32px 32px;
	transform: perspective(560px) rotateX(58deg) translateY(28%);
	mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
	opacity: 0.65;
	animation: om2-sim-grid-pan 14s linear infinite;
}
@keyframes om2-sim-grid-pan {
	0%   { background-position: 0 0, 0 0; }
	100% { background-position: 0 64px, 64px 0; }
}
.om2gle-sim-bg-rays {
	position: absolute;
	inset: 0;
	background: conic-gradient(from 90deg at 50% 50%,
		transparent 0deg,
		rgba(255, 216, 77, 0.08) 8deg, transparent 16deg,
		transparent 80deg,
		rgba(196, 80, 255, 0.08) 90deg, transparent 100deg,
		transparent 170deg,
		rgba(121, 232, 255, 0.06) 180deg, transparent 190deg,
		transparent 260deg,
		rgba(255, 216, 77, 0.05) 270deg, transparent 280deg,
		transparent 360deg);
	opacity: 0;
	mix-blend-mode: screen;
	animation: om2-sim-rays-spin 28s linear infinite;
}
@keyframes om2-sim-rays-spin {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
.om2gle-sim-bg-flash {
	position: absolute;
	inset: 0;
	background: #fff;
	opacity: 0;
	mix-blend-mode: screen;
}
.om2gle-sim-bg-flash.is-flash {
	animation: om2-sim-flash 280ms ease-out 1;
}
.om2gle-sim-bg-flash.is-impact {
	animation: om2-sim-impact-flash 520ms ease-out 1;
}
@keyframes om2-sim-flash {
	0%   { opacity: 0; }
	8%   { opacity: 0.85; }
	100% { opacity: 0; }
}
@keyframes om2-sim-impact-flash {
	0%   { opacity: 0; background: #fff; }
	6%   { opacity: 0.92; background: #fff; }
	18%  { opacity: 0.5; background: #c450ff; }
	36%  { opacity: 0.2; background: #ff5a78; }
	100% { opacity: 0; }
}

/* HEADER */
.om2gle-sim-header {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
.om2gle-sim-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 3px 10px;
	font-size: 9px;
	letter-spacing: 0.36em;
	color: #79e8ff;
	border: 1px solid rgba(121, 232, 255, 0.5);
	background: rgba(0, 0, 0, 0.5);
	text-transform: uppercase;
	font-weight: 800;
}
.om2gle-sim-eyebrow-dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: #ff5a78;
	box-shadow: 0 0 8px #ff5a78;
	animation: om2-sim-rec-blink 1.2s steps(2) infinite;
}
@keyframes om2-sim-rec-blink {
	0%, 49%   { opacity: 1; }
	50%, 100% { opacity: 0.2; }
}
.om2gle-sim-title {
	font-weight: 900;
	font-size: clamp(20px, 6vh, 36px);
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: #ffd84d;
	text-shadow:
		0 0 16px rgba(255, 216, 77, 0.55),
		0 0 36px rgba(196, 80, 255, 0.3);
	transform: scale(0.6);
	opacity: 0;
}
.om2gle-sim-theater[data-phase="intro"] .om2gle-sim-title,
.om2gle-sim-theater[data-phase="enter"] .om2gle-sim-title {
	animation: om2-sim-title-slam 600ms cubic-bezier(.2, 1.4, .4, 1) forwards;
}
.om2gle-sim-theater[data-phase="vs"] .om2gle-sim-title,
.om2gle-sim-theater[data-phase="stats"] .om2gle-sim-title,
.om2gle-sim-theater[data-phase="tally"] .om2gle-sim-title,
.om2gle-sim-theater[data-phase="impact"] .om2gle-sim-title,
.om2gle-sim-theater[data-phase="reveal"] .om2gle-sim-title,
.om2gle-sim-theater[data-phase="rest"] .om2gle-sim-title {
	opacity: 0;
	transform: scale(0.6);
}
@keyframes om2-sim-title-slam {
	0%   { transform: scale(1.4) rotate(-2deg); opacity: 0; filter: blur(8px); }
	60%  { transform: scale(0.95); opacity: 1; filter: blur(0); }
	100% { transform: scale(1) rotate(0); opacity: 1; filter: blur(0); }
}

/* ROSTER CARDS (the big two portraits) */
.om2gle-sim-roster-card {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"portrait name"
		"portrait score"
		"stamp    stamp";
	gap: 4px 14px;
	align-items: center;
	padding: clamp(6px, 1.6vh, 12px) clamp(8px, 2.4vw, 16px);
	border: 1px solid rgba(244, 209, 145, 0.35);
	background: linear-gradient(180deg, rgba(40, 18, 8, 0.55), rgba(12, 4, 18, 0.65));
	box-shadow: 0 0 30px -12px rgba(244, 209, 145, 0.5);
	opacity: 0;
	transform: translateX(-50px);
	min-height: 0;
}
.om2gle-sim-roster-card-b {
	border-color: rgba(196, 80, 255, 0.45);
	background: linear-gradient(180deg, rgba(40, 8, 60, 0.55), rgba(12, 0, 28, 0.65));
	box-shadow: 0 0 30px -12px rgba(196, 80, 255, 0.55);
	transform: translateX(50px);
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"name    portrait"
		"score   portrait"
		"stamp   stamp";
	text-align: right;
}
.om2gle-sim-theater[data-phase="enter"] .om2gle-sim-roster-card-a {
	animation: om2-sim-card-in-a 520ms cubic-bezier(.2, 1.2, .3, 1) 80ms forwards;
}
.om2gle-sim-theater[data-phase="enter"] .om2gle-sim-roster-card-b {
	animation: om2-sim-card-in-b 520ms cubic-bezier(.2, 1.2, .3, 1) 220ms forwards;
}
.om2gle-sim-theater[data-phase="vs"] .om2gle-sim-roster-card,
.om2gle-sim-theater[data-phase="stats"] .om2gle-sim-roster-card,
.om2gle-sim-theater[data-phase="tally"] .om2gle-sim-roster-card,
.om2gle-sim-theater[data-phase="impact"] .om2gle-sim-roster-card,
.om2gle-sim-theater[data-phase="reveal"] .om2gle-sim-roster-card,
.om2gle-sim-theater[data-phase="rest"] .om2gle-sim-roster-card {
	opacity: 1;
	transform: translateX(0);
}
@keyframes om2-sim-card-in-a {
	0%   { opacity: 0; transform: translateX(-60px) skewX(-6deg); }
	60%  { opacity: 1; transform: translateX(6px)  skewX(-2deg); }
	100% { opacity: 1; transform: translateX(0)    skewX(0);     }
}
@keyframes om2-sim-card-in-b {
	0%   { opacity: 0; transform: translateX(60px) skewX(6deg); }
	60%  { opacity: 1; transform: translateX(-6px) skewX(2deg); }
	100% { opacity: 1; transform: translateX(0)    skewX(0);    }
}

.om2gle-sim-card-portrait {
	grid-area: portrait;
	position: relative;
	width: clamp(96px, 26vw, 156px);
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 3px),
		linear-gradient(135deg, rgba(244, 209, 145, 0.18), rgba(196, 80, 255, 0.12));
	border: 1px solid rgba(244, 209, 145, 0.4);
}
.om2gle-sim-roster-card-b .om2gle-sim-card-portrait {
	border-color: rgba(196, 80, 255, 0.5);
}
.om2gle-sim-card-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.om2gle-sim-card-initial {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	font-size: clamp(40px, 8vw, 64px);
	color: rgba(244, 209, 145, 0.7);
	text-shadow: 0 0 18px rgba(244, 209, 145, 0.4);
}
.om2gle-sim-roster-card-b .om2gle-sim-card-initial {
	color: rgba(196, 130, 255, 0.7);
	text-shadow: 0 0 18px rgba(196, 80, 255, 0.4);
}

/* Loser crack overlay (clip-path shards) */
.om2gle-sim-card-crack {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(135deg, transparent 48%, rgba(0, 0, 0, 0.9) 49%, rgba(0, 0, 0, 0.9) 50%, transparent 51%) 0 0 / 100% 100%,
		linear-gradient(50deg,  transparent 28%, rgba(0, 0, 0, 0.7) 29%, rgba(0, 0, 0, 0.7) 30%, transparent 31%) 0 0 / 100% 100%,
		linear-gradient(95deg,  transparent 68%, rgba(0, 0, 0, 0.5) 69%, rgba(0, 0, 0, 0.5) 70%, transparent 71%) 0 0 / 100% 100%;
	opacity: 0;
	mix-blend-mode: multiply;
}
.om2gle-sim-roster-card[data-result="lose"] .om2gle-sim-card-crack {
	animation: om2-sim-crack 700ms ease-out forwards;
}
@keyframes om2-sim-crack {
	0%   { opacity: 0; transform: scale(1.05); }
	30%  { opacity: 0.95; transform: scale(1); }
	100% { opacity: 0.85; transform: scale(1); }
}
.om2gle-sim-roster-card[data-result="lose"] .om2gle-sim-card-portrait {
	animation: om2-sim-portrait-lose 900ms cubic-bezier(.4, 0, .8, 1) forwards;
}
@keyframes om2-sim-portrait-lose {
	0%   { filter: saturate(1) brightness(1); transform: translateY(0) rotate(0); }
	15%  { filter: saturate(0.2) brightness(0.7) blur(0); transform: translateY(0) translateX(-4px) rotate(-1.4deg); }
	30%  { filter: saturate(0.1) brightness(0.5) blur(0); transform: translateY(2px) translateX(4px) rotate(1.6deg); }
	60%  { filter: saturate(0.05) brightness(0.35); transform: translateY(8px) rotate(-0.6deg); }
	100% { filter: saturate(0) brightness(0.25); transform: translateY(14px) rotate(0); }
}

/* Winner halo */
.om2gle-sim-card-halo {
	position: absolute;
	inset: -8%;
	pointer-events: none;
	background: radial-gradient(ellipse at center, rgba(255, 216, 77, 0.55), rgba(255, 216, 77, 0.18) 45%, transparent 70%);
	mix-blend-mode: screen;
	opacity: 0;
}
.om2gle-sim-roster-card[data-result="win"] .om2gle-sim-card-halo {
	animation: om2-sim-halo 1.4s ease-out forwards;
}
.om2gle-sim-roster-card-b[data-result="win"] .om2gle-sim-card-halo {
	background: radial-gradient(ellipse at center, rgba(196, 80, 255, 0.55), rgba(121, 232, 255, 0.2) 45%, transparent 70%);
}
@keyframes om2-sim-halo {
	0%   { opacity: 0; transform: scale(0.6); }
	30%  { opacity: 1; transform: scale(1.05); }
	100% { opacity: 0.6; transform: scale(1); }
}
.om2gle-sim-roster-card[data-result="win"] .om2gle-sim-card-portrait {
	animation: om2-sim-portrait-win 900ms cubic-bezier(.2, 1.2, .3, 1) forwards;
}
@keyframes om2-sim-portrait-win {
	0%   { transform: scale(1); }
	35%  { transform: scale(1.08); }
	100% { transform: scale(1.05); }
}

.om2gle-sim-card-name {
	grid-area: name;
	font-weight: 800;
	font-size: clamp(14px, 2.6vh, 20px);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 0 14px rgba(244, 209, 145, 0.45);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}
.om2gle-sim-roster-card-b .om2gle-sim-card-name {
	text-shadow: 0 0 14px rgba(196, 80, 255, 0.45);
}
.om2gle-sim-card-score {
	grid-area: score;
	display: flex;
	align-items: baseline;
	gap: 6px;
}
.om2gle-sim-roster-card-b .om2gle-sim-card-score {
	justify-content: flex-end;
}
.om2gle-sim-card-score-num {
	font-weight: 900;
	font-size: clamp(28px, 6vh, 48px);
	letter-spacing: 0.04em;
	color: #ffd84d;
	text-shadow:
		0 0 12px rgba(255, 216, 77, 0.5),
		0 0 24px rgba(229, 165, 66, 0.35);
	font-variant-numeric: tabular-nums;
	transition: color .25s ease;
}
.om2gle-sim-roster-card-b .om2gle-sim-card-score-num {
	color: #c8a3ff;
	text-shadow:
		0 0 12px rgba(196, 80, 255, 0.55),
		0 0 24px rgba(121, 232, 255, 0.3);
}
.om2gle-sim-card-score-suffix {
	font-size: 9px;
	letter-spacing: 0.32em;
	color: var(--mute, #7a6e58);
	text-transform: uppercase;
}

/* Big WIN / M2GGED stamp (lands during impact phase) */
.om2gle-sim-card-stamp {
	grid-area: stamp;
	position: relative;
	height: 0;
	margin: 0;
	pointer-events: none;
}
.om2gle-sim-stamp-win,
.om2gle-sim-stamp-m2g {
	position: absolute;
	top: -100%;
	left: 0;
	right: 0;
	margin: auto;
	font-weight: 900;
	letter-spacing: 0.12em;
	text-align: center;
	width: max-content;
	left: 50%;
	transform: translate(-50%, -40%) rotate(-9deg) scale(2.4);
	opacity: 0;
	z-index: 5;
	pointer-events: none;
}
.om2gle-sim-stamp-win {
	font-size: clamp(40px, 9vw, 64px);
	color: #ffd84d;
	-webkit-text-stroke: 2px #ffd84d;
	text-shadow:
		0 0 20px rgba(255, 216, 77, 0.85),
		0 0 48px rgba(244, 130, 32, 0.6);
	padding: 2px 14px;
	border: 4px solid #ffd84d;
	background: rgba(40, 28, 8, 0.45);
}
.om2gle-sim-stamp-m2g {
	font-size: clamp(34px, 8vw, 56px);
	color: #ff5a78;
	-webkit-text-stroke: 2px #ff5a78;
	text-shadow:
		0 0 20px rgba(255, 90, 120, 0.9),
		0 0 48px rgba(196, 80, 255, 0.55);
	padding: 2px 12px;
	border: 4px solid #ff5a78;
	background: rgba(40, 8, 18, 0.5);
	transform: translate(-50%, -40%) rotate(8deg) scale(2.4);
}
.om2gle-sim-roster-card[data-result="win"] .om2gle-sim-stamp-win {
	animation: om2-sim-stamp 480ms cubic-bezier(.2, 1.4, .35, 1) forwards;
}
.om2gle-sim-roster-card[data-result="lose"] .om2gle-sim-stamp-m2g {
	animation: om2-sim-stamp-m2g 520ms cubic-bezier(.2, 1.4, .35, 1) 60ms forwards;
}
@keyframes om2-sim-stamp {
	0%   { opacity: 0; transform: translate(-50%, -40%) rotate(-9deg) scale(2.4); filter: blur(8px); }
	60%  { opacity: 1; transform: translate(-50%, -40%) rotate(-9deg) scale(0.92); filter: blur(0); }
	80%  { opacity: 1; transform: translate(-50%, -40%) rotate(-9deg) scale(1.08); }
	100% { opacity: 1; transform: translate(-50%, -40%) rotate(-9deg) scale(1); }
}
@keyframes om2-sim-stamp-m2g {
	0%   { opacity: 0; transform: translate(-50%, -40%) rotate(8deg) scale(2.4); filter: blur(8px); }
	60%  { opacity: 1; transform: translate(-50%, -40%) rotate(8deg) scale(0.94); filter: blur(0); }
	80%  { opacity: 1; transform: translate(-50%, -40%) rotate(8deg) scale(1.1); }
	100% { opacity: 1; transform: translate(-50%, -40%) rotate(8deg) scale(1); }
}

/* VS CLASH GLYPH — between the two cards during VS phase */
.om2gle-sim-vs-clash {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	font-size: clamp(56px, 14vh, 96px);
	letter-spacing: -0.04em;
	line-height: 1;
	color: #fff;
	text-shadow:
		0 0 24px rgba(255, 90, 120, 0.7),
		0 0 48px rgba(255, 60, 60, 0.5);
	transform: skewX(-8deg) scale(0.3);
	opacity: 0;
	pointer-events: none;
	user-select: none;
	height: 0;
	margin: 0;
}
.om2gle-sim-vs-clash .om2gle-sim-vs-v {
	color: #ffd84d;
	text-shadow:
		0 0 18px rgba(255, 216, 77, 0.9),
		0 0 36px rgba(244, 130, 32, 0.6);
}
.om2gle-sim-vs-clash .om2gle-sim-vs-s {
	color: #ff5a78;
	margin-left: 2px;
	text-shadow:
		0 0 18px rgba(255, 90, 120, 0.9),
		0 0 36px rgba(196, 80, 255, 0.55);
}
.om2gle-sim-vs-spark {
	position: absolute;
	width: 4px;
	height: 4px;
	background: #fff;
	border-radius: 50%;
	opacity: 0;
	box-shadow:
		0 0 12px 3px #ffd84d,
		0 0 24px 6px rgba(255, 216, 77, 0.45);
}
.om2gle-sim-theater[data-phase="vs"] .om2gle-sim-vs-clash {
	animation: om2-sim-vs-slam 700ms cubic-bezier(.18, 1.4, .3, 1) forwards;
}
.om2gle-sim-theater[data-phase="vs"] .om2gle-sim-vs-spark-1 {
	animation: om2-sim-vs-spark 600ms ease-out 220ms forwards;
	--sx: -40px; --sy: -20px;
}
.om2gle-sim-theater[data-phase="vs"] .om2gle-sim-vs-spark-2 {
	animation: om2-sim-vs-spark 600ms ease-out 260ms forwards;
	--sx: 36px;  --sy: -28px;
}
.om2gle-sim-theater[data-phase="vs"] .om2gle-sim-vs-spark-3 {
	animation: om2-sim-vs-spark 600ms ease-out 300ms forwards;
	--sx: 0;     --sy: 32px;
}
@keyframes om2-sim-vs-slam {
	0%   { opacity: 0; transform: skewX(-8deg) scale(2.4); filter: blur(12px); }
	50%  { opacity: 1; transform: skewX(-8deg) scale(0.92); filter: blur(0); }
	75%  { opacity: 1; transform: skewX(-8deg) scale(1.06); }
	100% { opacity: 1; transform: skewX(-8deg) scale(1); }
}
@keyframes om2-sim-vs-spark {
	0%   { opacity: 1; transform: translate(0, 0) scale(1); }
	100% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(0.2); }
}
.om2gle-sim-theater[data-phase="stats"] .om2gle-sim-vs-clash,
.om2gle-sim-theater[data-phase="tally"] .om2gle-sim-vs-clash,
.om2gle-sim-theater[data-phase="impact"] .om2gle-sim-vs-clash,
.om2gle-sim-theater[data-phase="reveal"] .om2gle-sim-vs-clash,
.om2gle-sim-theater[data-phase="rest"] .om2gle-sim-vs-clash {
	opacity: 0;
	transform: skewX(-8deg) scale(0);
}

/* STAT DUEL — six rows, each a side-by-side fill race */
.om2gle-sim-stats {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: clamp(3px, 0.8vh, 6px);
	padding: clamp(4px, 1.2vh, 8px) 0;
	opacity: 0;
	pointer-events: none;
}
.om2gle-sim-theater[data-phase="stats"] .om2gle-sim-stats,
.om2gle-sim-theater[data-phase="tally"] .om2gle-sim-stats,
.om2gle-sim-theater[data-phase="impact"] .om2gle-sim-stats,
.om2gle-sim-theater[data-phase="reveal"] .om2gle-sim-stats,
.om2gle-sim-theater[data-phase="rest"] .om2gle-sim-stats {
	opacity: 1;
}
.om2gle-sim-stat {
	display: grid;
	grid-template-columns: 1fr minmax(56px, 12%) 1fr;
	align-items: center;
	gap: 8px;
	height: clamp(18px, 3.4vh, 26px);
}
.om2gle-sim-stat-bar {
	position: relative;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	overflow: hidden;
	border: 1px solid rgba(244, 209, 145, 0.18);
}
.om2gle-sim-stat-fill {
	position: absolute;
	top: 0;
	bottom: 0;
	width: var(--fill, 0%);
	transition: width 480ms cubic-bezier(.3, 0.9, .4, 1);
}
.om2gle-sim-stat-bar[data-side="a"] {
	border-color: rgba(244, 209, 145, 0.4);
	transform: scaleX(-1);
	transform-origin: center;
}
.om2gle-sim-stat-bar[data-side="b"] {
	border-color: rgba(196, 80, 255, 0.45);
}
.om2gle-sim-stat-bar[data-side="a"] .om2gle-sim-stat-fill {
	background: linear-gradient(90deg,
		rgba(229, 165, 66, 0.4) 0%,
		#ffd84d 60%,
		#fff5c0 100%);
	box-shadow: 0 0 18px rgba(255, 216, 77, 0.6) inset;
}
.om2gle-sim-stat-bar[data-side="b"] .om2gle-sim-stat-fill {
	background: linear-gradient(90deg,
		rgba(121, 232, 255, 0.35) 0%,
		#c450ff 60%,
		#ff7ad6 100%);
	box-shadow: 0 0 18px rgba(196, 80, 255, 0.7) inset;
}
.om2gle-sim-stat-bar.is-won {
	border-color: #ffd84d;
}
.om2gle-sim-stat-bar[data-side="b"].is-won {
	border-color: #c450ff;
}
.om2gle-sim-stat-bar.is-lost .om2gle-sim-stat-fill {
	filter: saturate(0.3) brightness(0.55);
}
.om2gle-sim-stat-bar.is-won::after {
	content: "▶";
	position: absolute;
	top: 50%;
	right: 4px;
	transform: translateY(-50%);
	font-size: 10px;
	color: #ffd84d;
	text-shadow: 0 0 8px rgba(255, 216, 77, 0.8);
	animation: om2-sim-stat-flare 600ms ease-out 1;
}
.om2gle-sim-stat-bar[data-side="a"].is-won::after {
	right: auto;
	left: 4px;
	content: "◀";
	transform: translateY(-50%) scaleX(-1);
}
.om2gle-sim-stat-bar[data-side="b"].is-won::after {
	color: #c450ff;
	text-shadow: 0 0 8px rgba(196, 80, 255, 0.8);
}
@keyframes om2-sim-stat-flare {
	0%   { opacity: 0; transform: translateY(-50%) scale(0.4); }
	40%  { opacity: 1; transform: translateY(-50%) scale(1.3); }
	100% { opacity: 1; transform: translateY(-50%) scale(1); }
}
.om2gle-sim-stat-label {
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-align: center;
	color: rgba(243, 233, 212, 0.7);
	text-transform: uppercase;
}
.om2gle-sim-stat.is-active .om2gle-sim-stat-label {
	color: #fff;
	text-shadow: 0 0 8px rgba(255, 216, 77, 0.5);
}

/* TALLY (round count after stats settle) */
.om2gle-sim-tally {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	opacity: 0;
	transform: translateY(8px);
}
.om2gle-sim-theater[data-phase="tally"] .om2gle-sim-tally,
.om2gle-sim-theater[data-phase="impact"] .om2gle-sim-tally,
.om2gle-sim-theater[data-phase="reveal"] .om2gle-sim-tally,
.om2gle-sim-theater[data-phase="rest"] .om2gle-sim-tally {
	opacity: 1;
	transform: translateY(0);
	transition: opacity .35s ease, transform .35s ease;
}
.om2gle-sim-tally-row {
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 900;
	font-size: clamp(22px, 5vh, 36px);
	letter-spacing: 0.1em;
	font-variant-numeric: tabular-nums;
}
.om2gle-sim-tally-side {
	min-width: 1ch;
	text-align: center;
	color: #ffd84d;
	text-shadow: 0 0 14px rgba(255, 216, 77, 0.5);
}
.om2gle-sim-tally-row .om2gle-sim-tally-side:last-child {
	color: #c8a3ff;
	text-shadow: 0 0 14px rgba(196, 80, 255, 0.55);
}
.om2gle-sim-tally-sep {
	font-size: clamp(18px, 4vh, 28px);
	color: var(--mute, #7a6e58);
}
.om2gle-sim-tally-label {
	font-size: 9px;
	letter-spacing: 0.36em;
	color: var(--mute, #7a6e58);
	text-transform: uppercase;
}

/* MARGIN (final big "M2GGED BY X.XX PTS") */
.om2gle-sim-margin {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 6px;
	margin-top: 4px;
	opacity: 0;
	transform: translateY(8px) scale(0.92);
}
.om2gle-sim-theater[data-phase="reveal"] .om2gle-sim-margin,
.om2gle-sim-theater[data-phase="rest"] .om2gle-sim-margin {
	animation: om2-sim-margin-in 520ms cubic-bezier(.2, 1.4, .3, 1) forwards;
}
@keyframes om2-sim-margin-in {
	0%   { opacity: 0; transform: translateY(20px) scale(0.9); }
	60%  { opacity: 1; transform: translateY(-2px) scale(1.04); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}
.om2gle-sim-margin-pre,
.om2gle-sim-margin-suffix {
	font-size: 10px;
	letter-spacing: 0.36em;
	color: #ff8da6;
	text-transform: uppercase;
	font-weight: 800;
	text-shadow: 0 0 10px rgba(255, 90, 120, 0.5);
}
.om2gle-sim-margin-num {
	font-weight: 900;
	font-size: clamp(24px, 5vh, 38px);
	letter-spacing: 0.04em;
	color: #fff;
	font-variant-numeric: tabular-nums;
	text-shadow:
		0 0 14px rgba(255, 255, 255, 0.6),
		0 0 28px rgba(255, 90, 120, 0.5);
}
.om2gle-sim-margin[data-close="true"] .om2gle-sim-margin-num {
	font-size: clamp(20px, 4.2vh, 30px);
}

/* FOOTER (replay / new matchup / back) */
.om2gle-sim-footer {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
	padding-top: 6px;
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
}
.om2gle-sim-theater[data-phase="rest"] .om2gle-sim-footer {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
	transition: opacity .4s ease 0.2s, transform .4s ease 0.2s;
}
.om2gle-sim-footer .om2gle-btn {
	padding: 10px 16px;
	font-size: 11px;
	letter-spacing: 0.22em;
}
.om2gle-btn.om2gle-sim-replay {
	color: #f4d191;
	border-color: rgba(244, 209, 145, 0.4);
}
.om2gle-btn.om2gle-sim-replay:hover {
	color: #ffd84d;
	border-color: #ffd84d;
}

.om2gle-sim-watermark {
	position: absolute;
	right: clamp(8px, 2vw, 14px);
	bottom: clamp(8px, 1.4vh, 14px);
	z-index: 2;
	font-size: 8px;
	letter-spacing: 0.36em;
	color: rgba(244, 209, 145, 0.4);
	text-transform: uppercase;
	pointer-events: none;
	font-weight: 800;
}

/* IMPACT SHAKE — the whole stage shudders on the M2GG hit */
.om2gle-sim-theater[data-phase="impact"] {
	animation: om2-sim-shake 480ms ease-out 1;
}
@keyframes om2-sim-shake {
	0%, 100% { transform: translate(0, 0); }
	10%      { transform: translate(-6px, 2px); }
	20%      { transform: translate(5px, -3px); }
	30%      { transform: translate(-4px, 4px); }
	40%      { transform: translate(3px, -2px); }
	55%      { transform: translate(-2px, 1px); }
	75%      { transform: translate(1px, -1px); }
}

/* ============================================================================
   THIRD-PARTY CHAT WIDGET SUPPRESSION (Chatway)
   ----------------------------------------------------------------------------
   The om2gle page runs a fullscreen template that owns the viewport — the
   sticky Sing dock, mascot, and OPP slab all live in the same thumb-zone
   that a chat-bubble launcher targets. Site-wide widgets (Chatway in this
   case) collide with those controls and break the "this is a game, not a
   web page" framing.

   This stylesheet is only enqueued on the om2gle page (see
   Om2gle_Shortcode::maybe_enqueue), AND we scope every selector to
   body.om2gle-fullscreen to defend against the rare case where the
   shortcode is dropped onto a non-canonical page that still happens to
   pull the bundle in. Defensive id/class/src match covers the launcher
   iframe, the open-chat iframe, and the <chatway-widget> custom element.
============================================================================ */
body.om2gle-fullscreen [id*="chatway" i],
body.om2gle-fullscreen [class*="chatway" i],
body.om2gle-fullscreen iframe[src*="chatway"],
body.om2gle-fullscreen chatway-widget {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* ============================================================================
   SELF-EVAL · MOBILE COMPRESSION
   ----------------------------------------------------------------------------
   On a 390x844 phone the self-eval stack (intro + 4:5 YOU card + notes +
   scout + util + 120px sing-dock pad) overflowed the viewport by ~80px,
   forcing a scroll while leaving large gaps between blocks. This block
   packs everything for the solo case ONLY — boss-pill, VS divider, and
   rival slab are already hidden in self mode, so we can shrink the hero
   card to a 1:1 orb, drop the redundant scout strip, and pull the
   stage-stack bottom padding down (the only fixed thing left is the
   ~60px Sing dock — no boss-pill needs room here).

   Strictly scoped to @media (max-width: 900px) AND
   [data-stage-mode="self"] so the auto/friend layouts on the same
   breakpoint are untouched (see feedback_om2gle_additive_changes).
============================================================================ */
@media (max-width: 900px) {
	.om2gle-app .om2gle-screen-stage[data-stage-mode="self"] .om2gle-stage-stack {
		gap: 10px;
		padding-bottom: calc(96px + env(safe-area-inset-bottom));
	}
	.om2gle-app .om2gle-screen-stage[data-stage-mode="self"] .om2gle-stack-center {
		gap: 10px;
	}
	.om2gle-app .om2gle-screen-stage[data-stage-mode="self"] .om2gle-arena {
		gap: 12px;
	}
	.om2gle-app .om2gle-screen-stage[data-stage-mode="self"] .om2gle-arena-side.is-you {
		gap: 8px;
	}

	/* Intro: smaller title, tighter sub, shorter eyebrow — keeps the
	   "Self-evaluation · anonymous" framing without burning 110px. */
	.om2gle-app .om2gle-screen-stage[data-stage-mode="self"] .om2gle-self-intro {
		gap: 6px;
	}
	.om2gle-app .om2gle-screen-stage[data-stage-mode="self"] .om2gle-self-intro-title {
		font-size: clamp(22px, 6vw, 28px);
	}
	.om2gle-app .om2gle-screen-stage[data-stage-mode="self"] .om2gle-self-intro-sub {
		font-size: 12px;
		line-height: 1.4;
	}

	/* Solo card: no rival to mirror, so revert to a 1:1 orb and shrink
	   the footprint. Mobile base sets width: min(50vw, 200px) + 4:5
	   aspect → 195x244 on a 390 viewport. Self-mode reverts to ~164x164. */
	.om2gle-app .om2gle-screen-stage[data-stage-mode="self"] .om2gle-arena .om2gle-card.is-you {
		width: min(42vw, 168px);
		aspect-ratio: 1 / 1;
	}
	.om2gle-app .om2gle-screen-stage[data-stage-mode="self"] .om2gle-arena .om2gle-card.is-you .om2gle-glyph-letter {
		font-size: clamp(76px, 22vw, 108px);
	}
	.om2gle-app .om2gle-screen-stage[data-stage-mode="self"] .om2gle-arena .om2gle-card.is-you .om2gle-glyph-octave {
		font-size: clamp(28px, 7vw, 38px);
	}

	/* Scout strip says "Solo run · anonymous · tap Sing when ready" — the
	   intro block already says all three things and the Sing dock is
	   visible. Hide on mobile self-mode to claw back ~40px. */
	.om2gle-app .om2gle-screen-stage[data-stage-mode="self"] .om2gle-scout {
		display: none;
	}

	/* Controls: tighten the inter-row gap so notes hug the card and the
	   Sing dock doesn't feel detached. */
	.om2gle-app .om2gle-screen-stage[data-stage-mode="self"] .om2gle-controls {
		gap: 10px;
	}
}