/* ============================================================
 *  om2gle — Arcade Sandbox (Boss Mode)
 *  Standalone stylesheet for the sandbox page. Self-contained
 *  so it can't bleed into the main app shell (which has its own
 *  cosmic chrome on shared class names). All selectors are
 *  scoped under .om2gle-sandbox-page to make that explicit.
 * ============================================================ */

/* page-fullscreen.php applies html.om2gle-fullscreen / body.om2gle-fullscreen.
   Mirrors the equivalent base in style.css so the sandbox page doesn't need
   the main app bundle just for body chrome. !important defends against host
   themes that load after us. */
html.om2gle-fullscreen,
body.om2gle-fullscreen {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
	overscroll-behavior: none;
}
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;
}
.grecaptcha-badge { visibility: hidden !important; }
/* Same SDUI neutralizer the main app uses — host theme pins a 400px panel and
   pushes body { margin-right: 400px } via localStorage. Kills it here too so
   the sandbox isn't shifted off-center. */
html.om2gle-fullscreen #sdui-panel-placeholder { display: none !important; }
html.om2gle-fullscreen.sdui-panel-open body,
html.om2gle-fullscreen.sdui-panel-open #wpcontent,
html.om2gle-fullscreen.sdui-panel-open #wpfooter { margin-right: 0 !important; }

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

.om2gle-sandbox-page {
	--bg-0:        #050403;
	--bg-1:        #0b0907;
	--gold:        #f4d191;
	--gold-warm:   #ffb15c;
	--gold-deep:   #c98a2c;
	--gold-soft:   rgba(244, 209, 145, 0.18);
	--cyan:        #79e8ff;
	--cyan-soft:   rgba(121, 232, 255, 0.18);
	--magenta:     #ff5ec8;
	--ink:         #f3e9d4;
	--ink-dim:     #a89a7b;
	--ink-faint:   #5d543f;
	--danger:      #ff4d6d;

	margin: 0;
	color: var(--ink);
	min-height: 100vh;
	font-family: -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
	font-feature-settings: "tnum", "ss01";
	background:
		radial-gradient(ellipse at 50% -10%, rgba(255, 177, 92, 0.18) 0%, transparent 45%),
		radial-gradient(ellipse at 10% 120%, rgba(255, 94, 200, 0.10) 0%, transparent 50%),
		radial-gradient(ellipse at 90% 120%, rgba(121, 232, 255, 0.10) 0%, transparent 50%),
		var(--bg-1);
	position: relative;
	overflow-x: hidden;
}
.om2gle-sandbox-page *, .om2gle-sandbox-page *::before, .om2gle-sandbox-page *::after { box-sizing: border-box; }

/* atmospherics */
.osbx-atmos {
	position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}
.osbx-aurora {
	position: absolute; inset: -25%;
	background:
		conic-gradient(from 0deg at 50% 50%,
			rgba(255, 177, 92, 0.12) 0deg,
			rgba(255, 94, 200, 0.08) 90deg,
			rgba(121, 232, 255, 0.10) 180deg,
			rgba(255, 177, 92, 0.08) 270deg,
			rgba(255, 177, 92, 0.12) 360deg);
	filter: blur(80px);
	animation: osbx-aurora-spin 60s linear infinite;
}
@keyframes osbx-aurora-spin { to { transform: rotate(360deg); } }
.osbx-grid {
	position: absolute; inset: 0;
	background-image:
		linear-gradient(to right, rgba(244, 209, 145, 0.06) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(244, 209, 145, 0.06) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 90%);
}
.osbx-scanlines {
	position: fixed; inset: 0; pointer-events: none; z-index: 50;
	background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,0.18) 3px, transparent 4px);
	mix-blend-mode: multiply;
}
.osbx-vignette {
	position: absolute; inset: 0;
	background: radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(0,0,0,0.55) 100%);
}

/* HUD */
.osbx-hud { position: relative; z-index: 5; padding: 22px 24px 14px; text-align: center; }
.osbx-hud-brand {
	font-size: 12px; letter-spacing: 0.42em; color: var(--gold);
	text-transform: uppercase; text-shadow: 0 0 14px rgba(255, 177, 92, 0.6);
}
.osbx-hud-title {
	font-size: clamp(28px, 5vw, 52px); font-weight: 900;
	letter-spacing: 0.16em; margin: 8px 0 4px;
	color: var(--gold);
	text-shadow: 0 0 30px rgba(255, 177, 92, 0.45), 0 0 60px rgba(201, 138, 44, 0.3);
	text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.osbx-hud-title em {
	font-style: normal;
	background: linear-gradient(180deg, #fff5d2 0%, #ffb15c 50%, #c98a2c 100%);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent;
}
.osbx-hud-tag {
	font-size: 11px; letter-spacing: 0.32em; color: var(--ink-dim); text-transform: uppercase;
}
.osbx-hud-tag .osbx-pill {
	display: inline-block; border: 1px solid rgba(244, 209, 145, 0.5);
	padding: 2px 8px; border-radius: 2px; color: var(--gold);
	margin-right: 6px; background: rgba(244, 209, 145, 0.05);
}

/* arena */
.osbx-arena {
	position: relative; z-index: 4;
	display: grid; grid-template-columns: 1fr auto 1fr;
	gap: 22px; align-items: stretch;
	padding: 18px 28px; max-width: 1280px; margin: 0 auto;
}
@media (max-width: 880px) { .osbx-arena { grid-template-columns: 1fr; gap: 14px; } }

/* slab — common */
.osbx-slab {
	position: relative; min-height: 460px;
	border: 1px solid var(--gold-soft);
	background:
		linear-gradient(180deg, rgba(244, 209, 145, 0.04) 0%, rgba(11, 9, 7, 0.7) 100%),
		var(--bg-1);
	padding: 18px 18px 24px;
	display: flex; flex-direction: column;
	transition: border-color 220ms, box-shadow 220ms, transform 220ms;
}
.osbx-slab-p1 {
	border-color: rgba(244, 209, 145, 0.42);
	box-shadow: 0 0 0 1px rgba(244, 209, 145, 0.08) inset, 0 18px 60px -30px rgba(255, 177, 92, 0.35);
}
.osbx-slab-p2 {
	border-color: rgba(121, 232, 255, 0.42);
	box-shadow: 0 0 0 1px rgba(121, 232, 255, 0.08) inset, 0 18px 60px -30px rgba(121, 232, 255, 0.35);
}
.osbx-slab.is-dragover { transform: scale(1.01); }
.osbx-slab-p1.is-dragover { box-shadow: 0 0 0 2px var(--gold), 0 0 80px rgba(255, 177, 92, 0.55); }
.osbx-slab-p2.is-dragover { box-shadow: 0 0 0 2px var(--cyan), 0 0 80px rgba(121, 232, 255, 0.55); }
.osbx-slab-p1.is-focused:not(.is-dragover) { box-shadow: inset 0 0 0 1px rgba(244, 209, 145, 0.35), 0 0 24px rgba(255, 177, 92, 0.18); }
.osbx-slab-p2.is-focused:not(.is-dragover) { box-shadow: inset 0 0 0 1px rgba(121, 232, 255, 0.35), 0 0 24px rgba(121, 232, 255, 0.18); }

.osbx-slab-corners i {
	position: absolute; width: 18px; height: 18px; border: 2px solid currentColor;
}
.osbx-slab-p1 .osbx-slab-corners i { color: var(--gold); }
.osbx-slab-p2 .osbx-slab-corners i { color: var(--cyan); }
.osbx-slab-corners i:nth-child(1) { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.osbx-slab-corners i:nth-child(2) { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.osbx-slab-corners i:nth-child(3) { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.osbx-slab-corners i:nth-child(4) { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.osbx-slab-eyebrow {
	font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase;
	color: var(--ink-dim); margin-bottom: 4px;
}
.osbx-slab-p1 .osbx-slab-eyebrow { color: var(--gold-deep); }
.osbx-slab-p2 .osbx-slab-eyebrow { color: var(--cyan); }
.osbx-slab-handle { font-size: 22px; font-weight: 800; letter-spacing: 0.02em; color: var(--ink); }
.osbx-slab-p1 .osbx-slab-handle { color: var(--gold); }
.osbx-slab-p2 .osbx-slab-handle { color: #b6f0ff; }

/* faces */
.osbx-slab-face { flex: 1; display: none; flex-direction: column; margin-top: 18px; position: relative; }
.osbx-slab[data-state="idle"]      .osbx-face-idle      { display: flex; }
.osbx-slab[data-state="analyzing"] .osbx-face-analyzing { display: flex; }
.osbx-slab[data-state="ready"]     .osbx-face-ready     { display: flex; }
.osbx-slab[data-state="locked"]    .osbx-face-locked    { display: flex; }
.osbx-slab[data-state="error"]     .osbx-face-error     { display: flex; }

.osbx-drop {
	flex: 1;
	border: 2px dashed rgba(244, 209, 145, 0.3);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 10px; cursor: pointer;
	transition: border-color 200ms, background 200ms;
	padding: 24px; text-align: center;
}
.osbx-slab-p2 .osbx-drop { border-color: rgba(121, 232, 255, 0.3); }
.osbx-slab.is-dragover .osbx-drop { border-style: solid; }
.osbx-slab-p1.is-dragover .osbx-drop { border-color: var(--gold); background: rgba(255, 177, 92, 0.06); }
.osbx-slab-p2.is-dragover .osbx-drop { border-color: var(--cyan); background: rgba(121, 232, 255, 0.06); }

.osbx-drop-icon {
	font-size: 38px; color: var(--gold);
	animation: osbx-bob 2.4s ease-in-out infinite;
	text-shadow: 0 0 24px rgba(255, 177, 92, 0.6);
}
.osbx-slab-p2 .osbx-drop-icon { color: var(--cyan); text-shadow: 0 0 24px rgba(121, 232, 255, 0.6); }
@keyframes osbx-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
.osbx-drop-headline {
	font-size: 22px; font-weight: 900; letter-spacing: 0.22em; text-transform: uppercase;
}
.osbx-slab-p1 .osbx-drop-headline { color: var(--gold); }
.osbx-slab-p2 .osbx-drop-headline { color: var(--cyan); }
.osbx-drop-sub {
	font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--ink-dim); line-height: 1.6;
}
.osbx-drop-sub strong { color: var(--ink); font-weight: 700; }

.osbx-face-analyzing { align-items: center; justify-content: center; gap: 14px; }
.osbx-spinner {
	width: 48px; height: 48px;
	border: 3px solid var(--gold-soft);
	border-top-color: var(--gold);
	border-radius: 50%;
	animation: osbx-spin 1s linear infinite;
}
.osbx-slab-p2 .osbx-spinner { border-color: var(--cyan-soft); border-top-color: var(--cyan); }
@keyframes osbx-spin { to { transform: rotate(360deg); } }
.osbx-analyzing-text {
	font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-dim);
}
.osbx-analyzing-text strong { color: var(--ink); }

.osbx-face-ready { gap: 14px; }
.osbx-waveform {
	position: relative; height: 110px;
	background: rgba(0,0,0,0.35);
	border: 1px solid rgba(244, 209, 145, 0.15);
	overflow: hidden; cursor: grab; touch-action: none;
}
.osbx-slab-p2 .osbx-waveform { border-color: rgba(121, 232, 255, 0.15); }
.osbx-waveform:active { cursor: grabbing; }
.osbx-waveform canvas { display: block; width: 100%; height: 100%; }
.osbx-waveform-window {
	position: absolute; top: 0; bottom: 0;
	background: rgba(255, 177, 92, 0.15);
	border-left: 2px solid var(--gold);
	border-right: 2px solid var(--gold);
	pointer-events: none;
	box-shadow: 0 0 24px rgba(255, 177, 92, 0.35) inset;
}
.osbx-slab-p2 .osbx-waveform-window {
	background: rgba(121, 232, 255, 0.15);
	border-color: var(--cyan);
	box-shadow: 0 0 24px rgba(121, 232, 255, 0.35) inset;
}
/* Edge handles — let the user extend the clip beyond the default 3s.
   Handles sit *inside* the window edges so they're always grabbable —
   the waveform container has overflow:hidden, so negative offsets would
   get clipped when the window touches the buffer extremes. */
.osbx-window-handle {
	position: absolute; top: 0; bottom: 0;
	width: 16px;
	pointer-events: auto;
	cursor: ew-resize;
	touch-action: none;
	display: flex; align-items: center;
	-webkit-tap-highlight-color: transparent;
}
.osbx-window-handle-l { left:  0; justify-content: flex-start; }
.osbx-window-handle-r { right: 0; justify-content: flex-end; }
.osbx-window-handle::before {
	content: ''; display: block;
	width: 4px; height: 38%;
	background: var(--gold);
	box-shadow: 0 0 10px rgba(255, 177, 92, 0.7);
	border-radius: 2px;
	transition: height 140ms ease, box-shadow 140ms ease, transform 80ms ease;
}
.osbx-window-handle-l::before { margin-left:  -2px; }
.osbx-window-handle-r::before { margin-right: -2px; }
.osbx-slab-p2 .osbx-window-handle::before {
	background: var(--cyan);
	box-shadow: 0 0 10px rgba(121, 232, 255, 0.7);
}
.osbx-window-handle:hover::before,
.osbx-window-handle.is-active::before {
	height: 64%;
	box-shadow: 0 0 16px rgba(255, 177, 92, 0.95);
}
.osbx-slab-p2 .osbx-window-handle:hover::before,
.osbx-slab-p2 .osbx-window-handle.is-active::before {
	box-shadow: 0 0 16px rgba(121, 232, 255, 0.95);
}
.osbx-window-handle.is-active::before { transform: scaleX(1.5); }
.osbx-waveform-playhead {
	position: absolute; top: 0; bottom: 0; width: 1px;
	background: var(--gold); box-shadow: 0 0 8px var(--gold); display: none;
}
.osbx-slab-p2 .osbx-waveform-playhead { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }

.osbx-window-info {
	display: flex; justify-content: space-between; align-items: center;
	font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-dim);
}
.osbx-window-info-time { color: var(--gold); }
.osbx-slab-p2 .osbx-window-info-time { color: var(--cyan); }

.osbx-actions { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 8px; }
.osbx-btn {
	background: transparent; border: 1px solid; font: inherit;
	font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
	padding: 11px 8px; cursor: pointer; color: inherit;
	transition: background 180ms, transform 80ms, box-shadow 180ms;
	white-space: nowrap;
}
.osbx-btn:active { transform: translateY(1px); }
.osbx-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.osbx-slab-p1 .osbx-btn { border-color: rgba(244, 209, 145, 0.4); color: var(--gold); }
.osbx-slab-p1 .osbx-btn:hover:not(:disabled) { background: rgba(244, 209, 145, 0.08); }
.osbx-slab-p1 .osbx-btn-lock { border-color: var(--gold); background: rgba(255, 177, 92, 0.18); box-shadow: 0 0 24px rgba(255, 177, 92, 0.35); }
.osbx-slab-p1 .osbx-btn-lock:hover:not(:disabled) { background: rgba(255, 177, 92, 0.32); }
.osbx-slab-p2 .osbx-btn { border-color: rgba(121, 232, 255, 0.4); color: var(--cyan); }
.osbx-slab-p2 .osbx-btn:hover:not(:disabled) { background: rgba(121, 232, 255, 0.08); }
.osbx-slab-p2 .osbx-btn-lock { border-color: var(--cyan); background: rgba(121, 232, 255, 0.18); box-shadow: 0 0 24px rgba(121, 232, 255, 0.35); }
.osbx-slab-p2 .osbx-btn-lock:hover:not(:disabled) { background: rgba(121, 232, 255, 0.32); }

.osbx-face-locked { gap: 14px; animation: osbx-locked-in 480ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes osbx-locked-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}
.osbx-locked-stamp {
	font-size: 32px; font-weight: 900; letter-spacing: 0.4em;
	text-align: center; padding: 18px 0; text-transform: uppercase;
	border-top: 1px solid currentColor; border-bottom: 1px solid currentColor;
	position: relative;
	animation: osbx-stamp-slam 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes osbx-stamp-slam {
	0%   { transform: scale(2.2); opacity: 0; letter-spacing: 1em; }
	60%  { transform: scale(0.92); }
	100% { transform: scale(1); opacity: 1; }
}
.osbx-slab-p1 .osbx-locked-stamp { color: var(--gold); text-shadow: 0 0 20px rgba(255, 177, 92, 0.6); }
.osbx-slab-p2 .osbx-locked-stamp { color: var(--cyan); text-shadow: 0 0 20px rgba(121, 232, 255, 0.6); }
.osbx-locked-meta { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-dim); text-align: center; }
.osbx-locked-filename {
	font-size: 11px; color: var(--ink); text-align: center;
	font-family: ui-monospace, monospace;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.osbx-locked-mini-wave {
	height: 36px; background: rgba(0,0,0,0.35);
	border: 1px solid rgba(244, 209, 145, 0.12);
}
.osbx-slab-p2 .osbx-locked-mini-wave { border-color: rgba(121, 232, 255, 0.12); }
.osbx-locked-mini-wave canvas { display: block; width: 100%; height: 100%; }
.osbx-locked-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.osbx-face-error { align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; }
.osbx-error-headline {
	font-size: 16px; font-weight: 900; color: var(--danger);
	letter-spacing: 0.18em; text-transform: uppercase;
}
.osbx-error-detail { font-size: 11px; color: var(--ink-dim); letter-spacing: 0.08em; line-height: 1.6; }

/* WAITING overlay */
.osbx-waiting-overlay {
	position: absolute; inset: 0;
	display: none;
	flex-direction: column; align-items: center; justify-content: center;
	gap: 14px;
	background: rgba(11, 9, 7, 0.85);
	backdrop-filter: blur(8px);
	z-index: 6;
	animation: osbx-waiting-fade 320ms ease-out;
}
@keyframes osbx-waiting-fade { from { opacity: 0; } to { opacity: 1; } }
.osbx-slab.is-awaiting .osbx-waiting-overlay { display: flex; }
.osbx-waiting-pulse {
	width: 64px; height: 64px;
	border: 2px solid currentColor;
	border-radius: 50%;
	position: relative;
	animation: osbx-pulse-ring 1.6s ease-out infinite;
}
.osbx-waiting-pulse::before,
.osbx-waiting-pulse::after {
	content: ""; position: absolute; inset: -10px;
	border: 2px solid currentColor; border-radius: 50%;
	opacity: 0; animation: osbx-pulse-ring 1.6s ease-out infinite;
}
.osbx-waiting-pulse::after { animation-delay: 0.6s; }
.osbx-slab-p1 .osbx-waiting-pulse,
.osbx-slab-p1 .osbx-waiting-pulse::before,
.osbx-slab-p1 .osbx-waiting-pulse::after { color: var(--gold); }
.osbx-slab-p2 .osbx-waiting-pulse,
.osbx-slab-p2 .osbx-waiting-pulse::before,
.osbx-slab-p2 .osbx-waiting-pulse::after { color: var(--cyan); }
@keyframes osbx-pulse-ring {
	0%   { opacity: 1; transform: scale(0.4); }
	100% { opacity: 0; transform: scale(1.4); }
}
.osbx-waiting-text {
	font-size: 13px; font-weight: 700;
	letter-spacing: 0.36em; text-transform: uppercase;
	text-align: center; color: var(--ink);
}
.osbx-waiting-text strong {
	display: block; font-size: 22px; margin-bottom: 6px; color: inherit;
}
.osbx-slab-p1.is-awaiting .osbx-waiting-text strong { color: var(--gold); }
.osbx-slab-p2.is-awaiting .osbx-waiting-text strong { color: var(--cyan); }
.osbx-waiting-sub {
	font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint);
}

/* VS orb */
.osbx-vs-orb {
	position: relative; width: 84px;
	display: flex; align-items: center; justify-content: center;
	align-self: center; flex-shrink: 0;
}
@media (max-width: 880px) { .osbx-vs-orb { width: 100%; height: 50px; } }
.osbx-vs-orb-core {
	width: 64px; height: 64px; border-radius: 50%;
	background: radial-gradient(circle, #1a1308 30%, #050403 75%);
	border: 2px solid var(--gold);
	display: flex; align-items: center; justify-content: center;
	font-weight: 900; letter-spacing: 0.12em; color: var(--gold); font-size: 18px;
	box-shadow: 0 0 30px rgba(255, 177, 92, 0.45), 0 0 60px rgba(255, 177, 92, 0.2);
	z-index: 2;
}
.osbx-vs-orb-ring, .osbx-vs-orb-ring-2 {
	position: absolute; width: 84px; height: 84px;
	border: 1px solid rgba(244, 209, 145, 0.5);
	border-radius: 50%;
	animation: osbx-orb-ring 2.4s ease-out infinite;
}
.osbx-vs-orb-ring-2 { animation-delay: 1.2s; }
@keyframes osbx-orb-ring {
	0%   { opacity: 1; transform: scale(0.7); }
	100% { opacity: 0; transform: scale(1.8); }
}

/* fight rail */
.osbx-fight-rail {
	position: relative; z-index: 4;
	display: flex; flex-direction: column; align-items: center;
	padding: 22px 28px 36px; gap: 8px;
}
.osbx-btn-fight {
	font: inherit;
	font-size: 22px; font-weight: 900;
	letter-spacing: 0.36em; text-transform: uppercase;
	color: var(--bg-0);
	background: linear-gradient(180deg, #fff5d2 0%, #ffb15c 55%, #c98a2c 100%);
	border: 1px solid var(--gold);
	padding: 18px 80px; cursor: pointer;
	box-shadow:
		0 0 0 1px rgba(255, 245, 210, 0.4) inset,
		0 0 40px rgba(255, 177, 92, 0.55),
		0 0 100px rgba(255, 177, 92, 0.3);
	transition: transform 120ms, box-shadow 220ms, filter 220ms;
	position: relative; overflow: hidden;
}
.osbx-btn-fight:disabled {
	background: rgba(244, 209, 145, 0.08);
	color: var(--ink-faint);
	border-color: rgba(244, 209, 145, 0.18);
	box-shadow: none; cursor: not-allowed; filter: grayscale(0.5);
}
.osbx-btn-fight:not(:disabled):hover { transform: scale(1.02); }
.osbx-btn-fight:not(:disabled)::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,0.6) 50%, transparent 65%);
	background-size: 200% 100%; background-position: 200% 0;
	animation: osbx-shine 2.4s linear infinite;
	pointer-events: none;
}
@keyframes osbx-shine { to { background-position: -50% 0; } }
.osbx-fight-rail-hint {
	font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--ink-faint);
}

/* THEATER */
.osbx-theater {
	position: fixed; inset: 0;
	display: none; z-index: 80;
	background: rgba(5, 4, 3, 0.96);
	backdrop-filter: blur(12px);
	flex-direction: column; align-items: center; justify-content: center;
}
.osbx-theater.is-open { display: flex; animation: osbx-fade-in 300ms ease-out; }
@keyframes osbx-fade-in { from { opacity: 0; } to { opacity: 1; } }
.osbx-theater-stage { width: min(960px, 94%); padding: 32px; position: relative; }
.osbx-theater-status {
	text-align: center;
	font-size: 13px; letter-spacing: 0.4em; text-transform: uppercase;
	color: var(--gold); margin-bottom: 22px; min-height: 22px;
	text-shadow: 0 0 14px rgba(255, 177, 92, 0.5);
}
.osbx-theater-status .osbx-dot {
	display: inline-block; width: 8px; height: 8px;
	background: var(--gold); border-radius: 50%;
	margin-right: 8px; vertical-align: middle;
	animation: osbx-dot-blink 1s ease-in-out infinite;
	box-shadow: 0 0 12px var(--gold);
}
@keyframes osbx-dot-blink {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.25; }
}
.osbx-theater-versus {
	display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: stretch;
}
@media (max-width: 700px) { .osbx-theater-versus { grid-template-columns: 1fr; } }

.osbx-theater-side {
	border: 1px solid var(--gold-soft);
	background: rgba(11, 9, 7, 0.7);
	padding: 20px; position: relative; overflow: hidden;
	transition: all 320ms;
}
.osbx-theater-side.is-p1 { border-color: rgba(244, 209, 145, 0.42); }
.osbx-theater-side.is-p2 { border-color: rgba(121, 232, 255, 0.42); }
.osbx-theater-side.is-winner {
	border-color: var(--gold);
	box-shadow: 0 0 50px rgba(255, 177, 92, 0.45), 0 0 0 1px var(--gold) inset;
	animation: osbx-winner-pulse 1.4s ease-out infinite;
}
.osbx-theater-side.is-loser { opacity: 0.62; border-color: rgba(255, 94, 200, 0.35); }
@keyframes osbx-winner-pulse {
	0%, 100% { box-shadow: 0 0 50px rgba(255, 177, 92, 0.4), 0 0 0 1px var(--gold) inset; }
	50%      { box-shadow: 0 0 70px rgba(255, 177, 92, 0.65), 0 0 0 1px var(--gold) inset; }
}
.osbx-theater-eyebrow {
	font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--ink-dim);
}
.osbx-theater-side.is-p1 .osbx-theater-eyebrow { color: var(--gold-deep); }
.osbx-theater-side.is-p2 .osbx-theater-eyebrow { color: var(--cyan); }
.osbx-theater-handle { font-size: 22px; font-weight: 800; margin: 2px 0 8px; }
.osbx-theater-side.is-p1 .osbx-theater-handle { color: var(--gold); }
.osbx-theater-side.is-p2 .osbx-theater-handle { color: #b6f0ff; }

.osbx-theater-score-row { display: flex; align-items: baseline; gap: 4px; margin-bottom: 16px; }
.osbx-theater-score {
	font-size: 64px; font-weight: 900; letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums; line-height: 1;
}
.osbx-theater-side.is-p1 .osbx-theater-score { color: var(--gold); text-shadow: 0 0 30px rgba(255, 177, 92, 0.5); }
.osbx-theater-side.is-p2 .osbx-theater-score { color: var(--cyan); text-shadow: 0 0 30px rgba(121, 232, 255, 0.5); }
.osbx-theater-score-denom { font-size: 22px; color: var(--ink-dim); font-weight: 700; }

.osbx-theater-bars { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.osbx-bar-row {
	display: grid; grid-template-columns: 60px 1fr 36px;
	gap: 10px; align-items: center;
	font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim);
}
.osbx-bar-track {
	height: 6px; background: rgba(244, 209, 145, 0.08);
	position: relative; overflow: hidden;
}
.osbx-bar-fill {
	position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
	transition: width 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.osbx-theater-side.is-p1 .osbx-bar-fill {
	background: linear-gradient(90deg, var(--gold-warm), var(--gold));
	box-shadow: 0 0 8px rgba(255, 177, 92, 0.5);
}
.osbx-theater-side.is-p2 .osbx-bar-fill {
	background: linear-gradient(90deg, var(--magenta), var(--cyan));
	box-shadow: 0 0 8px rgba(121, 232, 255, 0.5);
}
.osbx-bar-val { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }

.osbx-theater-audio {
	display: flex; align-items: center; gap: 10px;
	border: 1px solid rgba(244, 209, 145, 0.15);
	padding: 8px 12px; margin-bottom: 14px;
}
.osbx-theater-side.is-p2 .osbx-theater-audio { border-color: rgba(121, 232, 255, 0.15); }
.osbx-btn-play-mini {
	width: 28px; height: 28px;
	border: 1px solid currentColor; background: transparent;
	color: inherit; cursor: pointer;
	display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.osbx-theater-side.is-p1 .osbx-btn-play-mini { color: var(--gold); }
.osbx-theater-side.is-p2 .osbx-btn-play-mini { color: var(--cyan); }
.osbx-theater-audio-meta {
	font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-dim);
}

.osbx-outcome-stamp {
	position: absolute; inset: auto 0 0 0;
	padding: 12px; text-align: center;
	font-size: 26px; font-weight: 900;
	letter-spacing: 0.3em; text-transform: uppercase;
	color: var(--bg-0);
	background: linear-gradient(180deg, #fff5d2 0%, #ffb15c 50%, #c98a2c 100%);
	transform: translateY(100%);
	transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
}
.osbx-theater-side.is-winner .osbx-outcome-stamp { transform: translateY(0); }
.osbx-theater-side.is-loser .osbx-outcome-stamp {
	background: linear-gradient(180deg, #ff86d6 0%, #ff5ec8 50%, #b62a85 100%);
	transform: translateY(0);
	animation: osbx-m2gged-slam 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes osbx-m2gged-slam {
	0%   { transform: translateY(-100vh) rotate(-12deg) scale(2.2); }
	60%  { transform: translateY(0) rotate(-2deg) scale(0.95); }
	75%  { transform: translateY(0) rotate(2deg) scale(1.02); }
	100% { transform: translateY(0) rotate(0) scale(1); }
}

.osbx-theater-divider { display: flex; align-items: center; justify-content: center; width: 50px; }
.osbx-theater-divider .osbx-vs-orb-core { width: 50px; height: 50px; font-size: 14px; }
@media (max-width: 700px) { .osbx-theater-divider { width: 100%; height: 40px; } }

.osbx-theater-actions { margin-top: 28px; display: flex; justify-content: center; gap: 12px; }
.osbx-btn-rematch, .osbx-btn-close-theater {
	font: inherit; font-size: 13px; font-weight: 800;
	letter-spacing: 0.28em; text-transform: uppercase;
	background: transparent; padding: 14px 32px; cursor: pointer;
}
.osbx-btn-rematch { border: 1px solid var(--gold); color: var(--gold); }
.osbx-btn-rematch:hover { background: rgba(244, 209, 145, 0.08); }
.osbx-btn-close-theater { border: 1px solid var(--ink-faint); color: var(--ink-dim); }
.osbx-btn-close-theater:hover { color: var(--ink); border-color: var(--ink-dim); }

.osbx-credo {
	position: relative; z-index: 4; text-align: center;
	padding: 14px 24px 32px;
	font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-faint);
}
.osbx-credo strong { color: var(--gold-deep); }

.osbx-page-back {
	position: fixed; top: 16px; left: 16px; z-index: 60;
	font: inherit; font-size: 10px; font-weight: 700;
	letter-spacing: 0.28em; text-transform: uppercase;
	background: rgba(11,9,7,0.6); color: var(--gold);
	border: 1px solid rgba(244, 209, 145, 0.4);
	padding: 8px 14px; text-decoration: none;
	backdrop-filter: blur(8px);
}
.osbx-page-back:hover { background: rgba(244, 209, 145, 0.12); }

/* ≤520px: the fixed back chip collided with the centered "om2gle · boss
   mode" brand line, clipping the leading "B" behind the chip. Drop the
   chip into the flow and pad the HUD's top so the two sit on separate
   rows on phones. The clamp(28px, 5vw, 52px) title also ran past the
   viewport with 0.16em tracking at 390px; shrink the floor + cap and
   let the tag wrap freely. */
@media (max-width: 520px) {
	.osbx-page-back {
		position: relative; top: 0; left: 0; z-index: auto;
		display: inline-block; margin: 12px 0 0 12px;
	}
	.osbx-hud { padding: 6px 12px 12px; }
	.osbx-hud-title { font-size: clamp(20px, 7vw, 28px); letter-spacing: 0.10em; }
	.osbx-hud-tag { font-size: 10px; letter-spacing: 0.22em; line-height: 1.5; }
}

/* ============================================================
 *  PAYWALL — non-Boss-Mode users see this in place of the arena.
 * ============================================================ */
.osbx-paywall {
	position: relative; z-index: 4;
	max-width: 720px; margin: 18px auto 28px;
	padding: 28px 28px 32px;
	border: 1px solid rgba(244, 209, 145, 0.42);
	background:
		linear-gradient(180deg, rgba(244, 209, 145, 0.05) 0%, rgba(11, 9, 7, 0.85) 100%),
		var(--bg-1);
	text-align: center;
}
.osbx-paywall-eyebrow {
	font-size: 11px; letter-spacing: 0.42em; text-transform: uppercase;
	color: var(--gold);
	text-shadow: 0 0 14px rgba(255, 177, 92, 0.5);
}
.osbx-paywall-title {
	font-size: clamp(22px, 4vw, 32px); font-weight: 900;
	letter-spacing: 0.12em; text-transform: uppercase;
	margin: 10px 0 14px;
	background: linear-gradient(180deg, #fff5d2 0%, #ffb15c 50%, #c98a2c 100%);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent;
}
.osbx-paywall-blurb {
	font-size: 13px; color: var(--ink-dim); line-height: 1.7; max-width: 480px;
	margin: 0 auto 24px;
}
.osbx-paywall-blurb strong { color: var(--ink); }

.osbx-paywall-preview {
	position: relative;
	margin: 0 auto 28px;
	width: 100%; max-width: 560px;
	padding: 22px 18px 28px;
	border: 1px dashed rgba(244, 209, 145, 0.28);
	background: rgba(0,0,0,0.3);
	overflow: hidden;
}
.osbx-paywall-preview::after {
	content: ""; position: absolute; inset: 0;
	backdrop-filter: blur(2px);
	background: linear-gradient(180deg, transparent 0%, rgba(11, 9, 7, 0.55) 100%);
	pointer-events: none;
}
.osbx-paywall-preview-row {
	display: grid; grid-template-columns: 1fr 36px 1fr; gap: 12px;
	align-items: center; position: relative; z-index: 2;
	filter: blur(0);
}
.osbx-paywall-preview-cell {
	border: 1px solid var(--gold-soft);
	padding: 10px;
	text-align: center;
}
.osbx-paywall-preview-cell.is-p2 { border-color: var(--cyan-soft); }
.osbx-paywall-preview-label {
	font-size: 9px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-dim);
}
.osbx-paywall-preview-cell.is-p1 .osbx-paywall-preview-label { color: var(--gold-deep); }
.osbx-paywall-preview-cell.is-p2 .osbx-paywall-preview-label { color: var(--cyan); }
.osbx-paywall-preview-name { font-size: 13px; font-weight: 800; color: var(--ink); margin-top: 4px; }
.osbx-paywall-preview-vs {
	font-size: 12px; font-weight: 900; letter-spacing: 0.12em; color: var(--gold);
	border: 1px solid var(--gold); border-radius: 50%;
	width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
	background: var(--bg-0);
}
.osbx-paywall-lock {
	position: absolute; inset: 0; z-index: 3;
	display: flex; align-items: center; justify-content: center;
}
.osbx-paywall-lock-glyph {
	font-size: 38px; color: var(--gold);
	text-shadow: 0 0 24px rgba(255, 177, 92, 0.7), 0 0 48px rgba(255, 177, 92, 0.4);
}

.osbx-paywall-cta {
	font: inherit;
	font-size: 16px; font-weight: 900;
	letter-spacing: 0.32em; text-transform: uppercase;
	color: var(--bg-0);
	background: linear-gradient(180deg, #fff5d2 0%, #ffb15c 55%, #c98a2c 100%);
	border: 1px solid var(--gold);
	padding: 16px 56px; cursor: pointer;
	box-shadow:
		0 0 0 1px rgba(255, 245, 210, 0.4) inset,
		0 0 30px rgba(255, 177, 92, 0.55),
		0 0 80px rgba(255, 177, 92, 0.3);
	transition: transform 120ms;
	position: relative; overflow: hidden;
}
.osbx-paywall-cta:hover { transform: scale(1.02); }
.osbx-paywall-cta:disabled { opacity: 0.6; cursor: progress; }
.osbx-paywall-cta::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,0.6) 50%, transparent 65%);
	background-size: 200% 100%; background-position: 200% 0;
	animation: osbx-shine 2.4s linear infinite;
	pointer-events: none;
}
.osbx-paywall-fineprint {
	margin-top: 14px;
	font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint);
}
.osbx-paywall-fineprint a { color: var(--ink-dim); text-decoration: none; border-bottom: 1px dotted currentColor; }
.osbx-paywall-fineprint a:hover { color: var(--ink); }

.osbx-paywall-error {
	margin-top: 12px;
	font-size: 11px; color: var(--danger); letter-spacing: 0.12em;
	display: none;
}
.osbx-paywall.has-error .osbx-paywall-error { display: block; }

/* =========================================================================
   CABINET JUICE LAYER — additive only. All .osbx-cab-* classes are new;
   no existing .osbx-* rule is overridden except the .osbx-btn-fight hero
   treatment near the bottom (source-order specificity, no !important).
   Coin cold-open is gated by a sessionStorage flag in arcade-sandbox.js so
   the gate only fires once per session across cabinet modes.
   ========================================================================= */

/* CABINET WRAPPER — applied to .om2gle-sandbox-page when has_boss is true */
.om2gle-sandbox-page.osbx-cab {
	position: relative;
	box-shadow:
		inset 0 0 0 4px #0a0805,
		inset 0 0 0 5px rgba(244, 209, 145, 0.14),
		inset 0 0 0 6px #0a0805,
		inset 0 18px 60px rgba(0, 0, 0, 0.55),
		inset 0 -18px 60px rgba(0, 0, 0, 0.65);
}
.om2gle-sandbox-page.osbx-cab::before,
.om2gle-sandbox-page.osbx-cab::after {
	content: ""; position: absolute;
	width: 10px; height: 10px; border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, #ffe7a8 0%, #c39152 45%, #4a2f12 100%);
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.8), inset 0 1px 1px rgba(255, 255, 255, 0.4);
	z-index: 6; pointer-events: none;
}
.om2gle-sandbox-page.osbx-cab::before { top: 18px; left: 14px; }
.om2gle-sandbox-page.osbx-cab::after  { top: 18px; right: 14px; }

/* MARQUEE STRIP — chase bulbs + LED counters above the arena */
.osbx-cab-marquee-strip {
	position: relative; z-index: 5;
	padding: 14px 24px 12px;
	margin: 6px 18px 0;
	border: 1px solid rgba(244, 209, 145, 0.18);
	border-radius: 6px;
	background: linear-gradient(180deg, rgba(31, 24, 19, 0.55) 0%, rgba(11, 9, 7, 0.2) 100%);
}
.osbx-cab-leds {
	display: flex; justify-content: space-between; align-items: center;
	margin-bottom: 10px; gap: 10px; flex-wrap: wrap;
	font: 700 11px ui-monospace, monospace;
	letter-spacing: 0.18em; text-transform: uppercase;
}
.osbx-cab-led {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 4px 10px;
	background: rgba(0, 0, 0, 0.7);
	border: 1px solid rgba(244, 209, 145, 0.25);
	border-radius: 4px;
	box-shadow: inset 0 0 14px rgba(255, 184, 70, 0.12);
}
.osbx-cab-led-label { color: rgba(244, 209, 145, 0.55); font-size: 9px; }
.osbx-cab-led-value {
	color: #ffd84d;
	text-shadow: 0 0 8px rgba(255, 216, 77, 0.7), 0 0 16px rgba(255, 130, 50, 0.35);
	font-variant-numeric: tabular-nums;
	min-width: 4ch; text-align: right;
}
.osbx-cab-led-mode .osbx-cab-led-value {
	color: #ff9ad6;
	text-shadow: 0 0 8px rgba(255, 154, 214, 0.7);
}
@keyframes osbx-led-newbest-pulse {
	0%   { transform: scale(1);    color: #ffd84d; text-shadow: 0 0 8px rgba(255, 216, 77, 0.7), 0 0 16px rgba(255, 130, 50, 0.35); }
	28%  { transform: scale(1.22); color: #ffffff; text-shadow: 0 0 14px #ffffff, 0 0 28px #ffd84d, 0 0 44px #ff8a4d; }
	100% { transform: scale(1);    color: #ffd84d; text-shadow: 0 0 8px rgba(255, 216, 77, 0.7), 0 0 16px rgba(255, 130, 50, 0.35); }
}
.osbx-cab-led-value.is-newbest {
	animation: osbx-led-newbest-pulse 1.2s ease-out;
	transform-origin: center;
}
.osbx-cab-marquee {
	position: relative; text-align: center; padding: 2px 50px;
	font: 900 14px ui-monospace, monospace;
	letter-spacing: 0.36em; color: var(--gold);
	text-shadow:
		-1px 0 0 rgba(255, 90, 120, 0.5),
		 1px 0 0 rgba(121, 232, 255, 0.5),
		 0 0 16px rgba(244, 209, 145, 0.5);
	text-transform: uppercase;
}
.osbx-cab-marquee-bulbs {
	position: absolute; left: 24px; right: 24px;
	height: 6px;
	display: flex; justify-content: space-between;
	pointer-events: none;
}
.osbx-cab-marquee-bulbs-top    { top: -4px; }
.osbx-cab-marquee-bulbs-bottom { bottom: -8px; }
.osbx-cab-bulb {
	width: 5px; height: 5px; border-radius: 50%;
	background: rgba(244, 209, 145, 0.12);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
	animation: osbx-cab-bulb 1.4s steps(12) infinite;
}
@keyframes osbx-cab-bulb {
	0%, 100% { background: #ffd84d; box-shadow: 0 0 10px #ffb845, 0 0 0 1px rgba(0,0,0,0.6); }
	10%, 90% { background: rgba(244, 209, 145, 0.18); box-shadow: 0 0 0 1px rgba(0,0,0,0.6); }
}

/* CRT vsync roll across the whole viewport */
.osbx-cab-vsync {
	position: fixed; left: 0; right: 0;
	height: 18%; top: -20%;
	pointer-events: none; z-index: 52;
	background: linear-gradient(180deg,
		transparent 0%, rgba(244, 209, 145, 0.06) 50%, transparent 100%);
	animation: osbx-cab-vsync 7s linear infinite;
	mix-blend-mode: screen;
}
@keyframes osbx-cab-vsync {
	0%   { transform: translateY(0); }
	100% { transform: translateY(700vh); }
}

/* SCREEN FLASH overlay */
.osbx-cab-flash {
	position: fixed; inset: 0; z-index: 95;
	background: #ffe7a8; opacity: 0;
	pointer-events: none; mix-blend-mode: screen;
}
.osbx-cab-flash.is-flashing { animation: osbx-cab-flash 240ms ease-out; }
@keyframes osbx-cab-flash {
	0%   { opacity: 0; }
	8%   { opacity: 0.85; }
	100% { opacity: 0; }
}

/* CABINET SHAKE — fires on FIGHT press and M2GGED stamp */
.om2gle-sandbox-page.osbx-cab.osbx-cab-is-shaking {
	animation: osbx-cab-shake 240ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes osbx-cab-shake {
	0%, 100% { transform: translate(0, 0); }
	15% { transform: translate(-3px, 1px); }
	30% { transform: translate(2px, -2px); }
	45% { transform: translate(-2px, 0); }
	60% { transform: translate(2px, 1px); }
	75% { transform: translate(-1px, -1px); }
}

/* COLD-OPEN — INSERT COIN gate. Big neon title + animated arrow pointing
   at the coin. The dismiss artifact is the coin itself (lives below). */
.osbx-cab-coldopen {
	position: fixed; inset: 0; z-index: 92;
	display: flex; flex-direction: column;
	align-items: center; justify-content: space-between;
	padding: 8% 6% 12%;
	box-sizing: border-box;
	background: radial-gradient(60% 50% at 50% 50%, rgba(8, 6, 4, 0.55), rgba(0, 0, 0, 0.92) 80%);
	color: #ffd84d; cursor: pointer; user-select: none;
	transition: opacity 0.32s ease, visibility 0.32s ease;
}
.osbx-cab-coldopen.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
.osbx-cab-coldopen-top { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.osbx-cab-coldopen-title {
	font: 900 clamp(38px, 8.5vw, 104px)/1 ui-monospace, "Courier New", monospace;
	letter-spacing: 0.22em; color: #ffd84d;
	text-shadow:
		-2px 0 0 rgba(255, 90, 120, 0.55),
		 2px 0 0 rgba(121, 232, 255, 0.55),
		 0 0 22px rgba(255, 216, 77, 0.9),
		 0 0 44px rgba(255, 130, 50, 0.65),
		 0 0 80px rgba(255, 130, 50, 0.3);
	animation:
		osbx-cab-title-pulse 1.4s ease-in-out infinite,
		osbx-cab-title-in 0.55s cubic-bezier(0.25, 1.4, 0.5, 1) both;
}
.osbx-cab-coldopen-subtitle {
	font: 700 13px ui-monospace, monospace;
	letter-spacing: 0.4em; color: rgba(255, 117, 219, 0.85);
	text-transform: uppercase;
	text-shadow: 0 0 12px rgba(255, 117, 219, 0.6);
}
.osbx-cab-coldopen-blurb {
	font: 600 12px ui-monospace, monospace;
	letter-spacing: 0.18em; color: rgba(255, 232, 168, 0.7);
	text-transform: uppercase; margin-top: 8px; text-align: center;
}
@keyframes osbx-cab-title-pulse {
	0%, 100% {
		text-shadow:
			-2px 0 0 rgba(255, 90, 120, 0.55),
			 2px 0 0 rgba(121, 232, 255, 0.55),
			 0 0 22px rgba(255, 216, 77, 0.85),
			 0 0 44px rgba(255, 130, 50, 0.55),
			 0 0 80px rgba(255, 130, 50, 0.25);
	}
	50% {
		text-shadow:
			-2px 0 0 rgba(255, 90, 120, 0.75),
			 2px 0 0 rgba(121, 232, 255, 0.75),
			 0 0 32px rgba(255, 216, 77, 1),
			 0 0 60px rgba(255, 130, 50, 0.85),
			 0 0 120px rgba(255, 130, 50, 0.45);
	}
}
@keyframes osbx-cab-title-in {
	0% { opacity: 0; transform: scale(0.68); }
	60% { opacity: 1; transform: scale(1.09); }
	100% { opacity: 1; transform: scale(1); }
}
.osbx-cab-coldopen-bottom { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.osbx-cab-coldopen-arrow {
	font: 700 32px/1 ui-monospace, monospace; color: #ffd84d;
	text-shadow: 0 0 16px rgba(255, 216, 77, 0.85), 0 0 32px rgba(255, 184, 70, 0.5);
	animation: osbx-cab-arrow-up 1.1s ease-in-out infinite;
}
@keyframes osbx-cab-arrow-up {
	0%, 100% { transform: translateY(0); opacity: 1; }
	50% { transform: translateY(-10px); opacity: 0.45; }
}
.osbx-cab-coldopen-instruction {
	font: 700 14px ui-monospace, monospace;
	letter-spacing: 0.36em; color: #ffd84d;
	text-transform: uppercase;
	text-shadow: 0 0 12px rgba(255, 216, 77, 0.7);
}
.osbx-cab-coldopen-keyhint {
	font: 600 10px ui-monospace, monospace;
	letter-spacing: 0.3em; color: rgba(255, 216, 77, 0.55);
	text-transform: uppercase;
}
.osbx-cab-coldopen-keyhint kbd {
	display: inline-block; padding: 1px 6px; margin: 0 2px;
	border: 1px solid rgba(255, 216, 77, 0.6); border-radius: 3px;
	font: inherit; color: #ffd84d;
	box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.5), 0 0 8px rgba(255, 216, 77, 0.25);
}

/* THE COIN — floats over the viewport in cabinet-space so it can fly into
   the dock slot regardless of where the dock is rendered. */
.osbx-cab-coin-stage {
	position: fixed; inset: 0; z-index: 93;
	pointer-events: none;
	display: flex; align-items: center; justify-content: center;
	transition: opacity 0.4s ease;
}
.osbx-cab-coin-stage.is-gone { opacity: 0; pointer-events: none; }
.osbx-cab-coin {
	pointer-events: auto; position: relative;
	width: 84px; height: 84px;
	border: none; padding: 0; cursor: pointer;
	background: transparent; border-radius: 50%;
	transform-style: preserve-3d;
	animation: osbx-cab-coin-idle 2.6s ease-in-out infinite;
	filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.7))
		drop-shadow(0 0 22px rgba(255, 184, 70, 0.4));
}
.osbx-cab-coin:hover { animation-play-state: paused; }
.osbx-cab-coin:hover .osbx-cab-coin-face { transform: scale(1.06); }
.osbx-cab-coin-face {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 100%; border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fff3c2 0%, #ffd84d 25%, #d99225 65%, #7a4a12 100%);
	box-shadow:
		inset 0 0 0 3px rgba(255, 232, 168, 0.55),
		inset 0 -6px 14px rgba(80, 40, 5, 0.55),
		inset 0 6px 12px rgba(255, 240, 200, 0.45),
		inset 0 0 0 5px rgba(120, 70, 15, 0.4);
	font: 900 24px ui-monospace, monospace; letter-spacing: 0.04em;
	color: #5b2e08;
	text-shadow: 0 1px 0 rgba(255, 240, 200, 0.65), 0 -1px 0 rgba(80, 40, 5, 0.7);
	transition: transform 120ms ease-out;
}
@keyframes osbx-cab-coin-idle {
	0%   { transform: translateY(0)    rotateY(0deg); }
	50%  { transform: translateY(-7px) rotateY(180deg); }
	100% { transform: translateY(0)    rotateY(360deg); }
}
.osbx-cab-coin.is-flying {
	animation: osbx-cab-coin-fly 720ms cubic-bezier(0.45, -0.15, 0.55, 1.1) forwards;
	pointer-events: none;
}
@keyframes osbx-cab-coin-fly {
	0% { transform: translate(0, 0) rotateY(0) scale(1); opacity: 1; }
	40% { transform: translate(calc(var(--coin-dx, 0px) * 0.45),
		calc(var(--coin-dy, 0px) * 0.45 - 90px)) rotateY(720deg) scale(0.88); opacity: 1; }
	80% { transform: translate(calc(var(--coin-dx, 0px) * 0.9),
		calc(var(--coin-dy, 0px) * 0.9)) rotateY(1260deg) scale(0.4); opacity: 1; }
	100% { transform: translate(var(--coin-dx, 0px), var(--coin-dy, 0px))
		rotateY(1620deg) scale(0.12); opacity: 0; }
}

/* BOTTOM DOCK — coin slot (flight target) + center plate + 1UP */
.osbx-cab-dock {
	position: relative; z-index: 5;
	display: grid; grid-template-columns: auto 1fr auto;
	align-items: center; gap: 12px;
	padding: 14px 28px calc(14px + env(safe-area-inset-bottom));
	margin: 6px 18px 0;
	background: linear-gradient(180deg, rgba(11, 9, 7, 0) 0%, rgba(8, 6, 4, 0.5) 100%);
	border: 1px solid rgba(244, 209, 145, 0.2);
	border-radius: 6px;
	box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 232, 168, 0.08);
}
.osbx-cab-coinslot {
	display: flex; align-items: center; gap: 10px;
	font: 700 10px ui-monospace, monospace;
	letter-spacing: 0.22em; color: rgba(244, 209, 145, 0.55);
	text-transform: uppercase;
}
.osbx-cab-coinslot-mouth {
	width: 38px; height: 6px;
	background: #060503; border-radius: 3px;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.05);
}
.osbx-cab-coinslot-telegraphing .osbx-cab-coinslot-mouth {
	animation: osbx-cab-slot-telegraph 1.4s ease-in-out infinite;
}
.osbx-cab-coinslot.is-eating .osbx-cab-coinslot-mouth {
	animation: osbx-cab-slot-eat 260ms cubic-bezier(0.3, 1.5, 0.6, 1);
}
@keyframes osbx-cab-slot-telegraph {
	0%, 100% { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.9); }
	50% { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 18px rgba(255, 216, 77, 0.55); }
}
@keyframes osbx-cab-slot-eat {
	0% { transform: scaleY(1); box-shadow: inset 0 1px 2px rgba(0,0,0,0.9); }
	30% { transform: scaleY(2.4) scaleX(1.1);
		box-shadow: inset 0 4px 10px rgba(0,0,0,1), 0 0 22px rgba(255, 216, 77, 0.85); }
	100% { transform: scaleY(1); }
}
.osbx-cab-dock-center {
	text-align: center; font: 700 10px ui-monospace, monospace;
	letter-spacing: 0.32em; color: rgba(244, 209, 145, 0.45);
	text-transform: uppercase;
}
.osbx-cab-dock-pill {
	display: inline-block; padding: 2px 10px;
	border: 1px solid rgba(244, 209, 145, 0.35);
	border-radius: 999px;
	background: rgba(244, 209, 145, 0.04);
	color: var(--gold); margin-right: 6px;
}
.osbx-cab-dock-1up {
	font: 800 11px ui-monospace, monospace;
	letter-spacing: 0.22em; color: #ffd84d;
	text-shadow: 0 0 8px rgba(255, 216, 77, 0.6);
	animation: osbx-cab-1up 1.1s steps(2) infinite;
	text-transform: uppercase;
}
@keyframes osbx-cab-1up { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0.3; } }

/* FIGHT BUTTON HERO TREATMENT — appended AFTER the original .osbx-btn-fight
   rules so source order wins (no !important needed). Adds the amber-bevel
   chunky housing + 3D pressed state + LED ring chase when armed. Keeps the
   original shine via ::after; the new ring is on ::before. */
.osbx-btn-fight {
	font-size: 18px;
	padding: 16px 56px;
	background: linear-gradient(180deg, #f6c065 0%, #e09232 60%, #a8651a 100%);
	color: #2a1505;
	border: none;
	border-radius: 10px;
	box-shadow:
		inset 0 1px 0 rgba(255, 240, 210, 0.55),
		inset 0 -2px 4px rgba(0, 0, 0, 0.45),
		0 4px 0 #6b3d0d,
		0 0 0 1px rgba(0, 0, 0, 0.6),
		0 0 24px rgba(255, 184, 70, 0.45);
	text-shadow: 0 1px 0 rgba(255, 240, 210, 0.4);
}
.osbx-btn-fight:disabled {
	filter: saturate(0.4) brightness(0.55);
	box-shadow:
		inset 0 1px 0 rgba(255, 240, 210, 0.3),
		inset 0 -2px 4px rgba(0, 0, 0, 0.45),
		0 4px 0 #3a220a,
		0 0 0 1px rgba(0, 0, 0, 0.6);
}
.osbx-btn-fight:not(:disabled):active,
.osbx-btn-fight.osbx-btn-fight-is-pressed {
	transform: translateY(3px);
	box-shadow:
		inset 0 1px 0 rgba(255, 240, 210, 0.2),
		inset 0 -2px 4px rgba(0, 0, 0, 0.65),
		0 1px 0 #6b3d0d,
		0 0 0 1px rgba(0, 0, 0, 0.6);
}
.osbx-btn-fight::before {
	content: ""; position: absolute; inset: -8px;
	border-radius: 14px;
	border: 1px solid rgba(244, 209, 145, 0.45);
	pointer-events: none; opacity: 0;
	transition: opacity 200ms ease-out;
	box-shadow: 0 0 18px rgba(255, 184, 70, 0.4), inset 0 0 12px rgba(255, 184, 70, 0.2);
}
.osbx-btn-fight:not(:disabled)::before {
	opacity: 1;
	animation: osbx-cab-ring-chase 1.1s linear infinite;
}
@keyframes osbx-cab-ring-chase {
	0%   { box-shadow: 0 0 18px rgba(255, 184, 70, 0.4), inset 0 0 12px rgba(255, 184, 70, 0.25); }
	50%  { box-shadow: 0 0 32px rgba(255, 216, 77, 0.85), inset 0 0 18px rgba(255, 216, 77, 0.45); }
	100% { box-shadow: 0 0 18px rgba(255, 184, 70, 0.4), inset 0 0 12px rgba(255, 184, 70, 0.25); }
}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
	.osbx-cab-bulb,
	.osbx-cab-vsync,
	.osbx-cab-coldopen-title,
	.osbx-cab-coldopen-arrow,
	.osbx-cab-dock-1up,
	.osbx-cab-coin,
	.osbx-cab-coinslot-telegraphing .osbx-cab-coinslot-mouth,
	.osbx-btn-fight:not(:disabled)::before { animation: none !important; }
	.osbx-cab-coin.is-flying { animation-duration: 1ms !important; }
}