/* =========================================================
   REFLEX ARENA — styles
   All rules are scoped under .reflex-arena-root so the plugin
   never leaks into the surrounding theme.
   ========================================================= */

.reflex-arena-root {
	--ra-bg: #070b16;
	--ra-card: #111827;
	--ra-card-2: #161f32;
	--ra-border: rgba(148, 163, 184, 0.14);
	--ra-text: #f8fafc;
	--ra-text-dim: #94a3b8;
	--ra-cyan: #22d3ee;
	--ra-purple: #a78bfa;
	--ra-green: #34d399;
	--ra-yellow: #fbbf24;
	--ra-red: #f87171;
	--ra-blue: #60a5fa;
	--ra-radius: 18px;
	--ra-radius-sm: 12px;
	--ra-shadow: 0 20px 45px -20px rgba(0, 0, 0, 0.65);
	--ra-max-width: 1100px;
	--ra-transition: 180ms cubic-bezier(.2,.8,.2,1);

	all: initial;
	display: block;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--ra-text);
	background: var(--ra-bg);
	border-radius: var(--ra-radius);
	padding: clamp(16px, 4vw, 36px);
	max-width: var(--ra-max-width, 1100px);
	margin: 24px auto;
	position: relative;
	overflow: hidden;
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
}

.reflex-arena-root *,
.reflex-arena-root *::before,
.reflex-arena-root *::after {
	box-sizing: border-box;
	font-family: inherit;
}

.reflex-arena-root button {
	font: inherit;
	color: inherit;
	cursor: pointer;
}

.reflex-arena-root .ra-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.reflex-arena-noscript {
	color: #f8fafc;
	background: #111827;
	padding: 16px;
	border-radius: 12px;
}

/* ---------- layout shell ---------- */

.ra-shell {
	position: relative;
	z-index: 1;
}

.ra-hero {
	text-align: center;
	padding: 6px 0 22px;
}

.ra-hero__title {
	font-size: clamp(28px, 5vw, 40px);
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0 0 6px;
	background: linear-gradient(120deg, #f8fafc, var(--ra-cyan));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.ra-hero__tagline {
	color: var(--ra-text-dim);
	font-size: clamp(13px, 2vw, 16px);
	margin: 0;
}

/* ---------- records strip ---------- */

.ra-records {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px;
	margin: 18px 0 26px;
}

.ra-record-card {
	background: linear-gradient(180deg, var(--ra-card-2), var(--ra-card));
	border: 1px solid var(--ra-border);
	border-radius: var(--ra-radius-sm);
	padding: 14px 16px;
	text-align: center;
	box-shadow: var(--ra-shadow);
}

.ra-record-card__icon {
	font-size: 20px;
	display: block;
	margin-bottom: 6px;
}

.ra-record-card__value {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.ra-record-card__label {
	display: block;
	color: var(--ra-text-dim);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-top: 3px;
}

/* ---------- section headings ---------- */

.ra-section-title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ra-text-dim);
	margin: 26px 0 12px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.ra-section-title::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--ra-border);
}

/* ---------- mode grid ---------- */

.ra-mode-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 14px;
}

.ra-mode-card {
	position: relative;
	background: linear-gradient(160deg, var(--ra-card-2) 0%, var(--ra-card) 100%);
	border: 1px solid var(--ra-border);
	border-radius: var(--ra-radius);
	padding: 20px;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 148px;
	box-shadow: var(--ra-shadow);
	transition: transform var(--ra-transition), box-shadow var(--ra-transition), border-color var(--ra-transition);
}

.ra-mode-card:hover,
.ra-mode-card:focus-visible {
	transform: translateY(-4px);
	border-color: rgba(34, 211, 238, 0.45);
	box-shadow: 0 26px 50px -18px rgba(34, 211, 238, 0.25);
	outline: none;
}

.ra-mode-card:active {
	transform: translateY(-1px) scale(0.99);
}

.ra-mode-card__icon {
	font-size: 22px;
}

.ra-mode-card__title {
	font-size: 16px;
	font-weight: 800;
	margin: 0;
}

.ra-mode-card__desc {
	color: var(--ra-text-dim);
	font-size: 13px;
	margin: 0;
	flex: 1;
}

.ra-mode-card__cta {
	align-self: flex-start;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--ra-cyan);
	text-transform: uppercase;
}

.ra-mode-card__cta::after {
	content: " \2192";
}

/* accent bar per mode */
.ra-mode-card[data-accent="cyan"] { border-top: 3px solid var(--ra-cyan); }
.ra-mode-card[data-accent="purple"] { border-top: 3px solid var(--ra-purple); }
.ra-mode-card[data-accent="green"] { border-top: 3px solid var(--ra-green); }
.ra-mode-card[data-accent="yellow"] { border-top: 3px solid var(--ra-yellow); }
.ra-mode-card[data-accent="red"] { border-top: 3px solid var(--ra-red); }
.ra-mode-card[data-accent="blue"] { border-top: 3px solid var(--ra-blue); }

/* ---------- achievements ---------- */

.ra-achievements {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ra-badge {
	width: 64px;
	height: 64px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	background: var(--ra-card);
	border: 1px solid var(--ra-border);
	position: relative;
	filter: grayscale(1);
	opacity: 0.45;
	transition: all var(--ra-transition);
}

.ra-badge.is-unlocked {
	filter: none;
	opacity: 1;
	border-color: rgba(251, 191, 36, 0.5);
	box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.25), 0 10px 24px -12px rgba(251, 191, 36, 0.5);
}

.ra-badge__tooltip {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	background: #0b1120;
	border: 1px solid var(--ra-border);
	color: var(--ra-text);
	font-size: 11px;
	line-height: 1.3;
	padding: 8px 10px;
	border-radius: 8px;
	width: 170px;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--ra-transition);
	z-index: 5;
	text-align: center;
}

.ra-badge:hover .ra-badge__tooltip,
.ra-badge:focus-visible .ra-badge__tooltip {
	opacity: 1;
}

.ra-badge__tooltip b {
	display: block;
	color: var(--ra-yellow);
	margin-bottom: 2px;
}

/* ---------- daily challenge ---------- */

.ra-daily {
	background: linear-gradient(135deg, rgba(34, 211, 238, 0.14), rgba(167, 139, 250, 0.10));
	border: 1px solid var(--ra-border);
	border-radius: var(--ra-radius);
	padding: 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

.ra-daily__info h3 {
	margin: 0 0 4px;
	font-size: 16px;
}

.ra-daily__info p {
	margin: 0;
	color: var(--ra-text-dim);
	font-size: 13px;
}

/* ---------- buttons ---------- */

.ra-btn {
	border: none;
	border-radius: 12px;
	padding: 12px 20px;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.03em;
	background: var(--ra-card-2);
	border: 1px solid var(--ra-border);
	color: var(--ra-text);
	transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.ra-btn:hover { transform: translateY(-2px); }
.ra-btn:active { transform: translateY(0) scale(0.97); }

.ra-btn--primary {
	background: linear-gradient(135deg, var(--ra-cyan), #0ea5c8);
	color: #04121a;
	box-shadow: 0 12px 26px -10px rgba(34, 211, 238, 0.55);
}

.ra-btn--ghost {
	background: transparent;
}

.ra-btn--danger {
	background: rgba(248, 113, 113, 0.14);
	border-color: rgba(248, 113, 113, 0.4);
	color: #fecaca;
}

.ra-btn:focus-visible {
	outline: 2px solid var(--ra-cyan);
	outline-offset: 2px;
}

.ra-footer-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	margin-top: 28px;
	padding-top: 18px;
	border-top: 1px solid var(--ra-border);
}

.ra-footer-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/* ---------- GAME VIEW ---------- */

.ra-game {
	max-width: 850px;
	margin: 0 auto;
}

.ra-game__topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 14px;
}

.ra-game__brand {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.06em;
	color: var(--ra-text-dim);
	text-transform: uppercase;
}

.ra-game__mode-tag {
	font-size: 12px;
	font-weight: 700;
	color: var(--ra-cyan);
	background: rgba(34, 211, 238, 0.12);
	border: 1px solid rgba(34, 211, 238, 0.35);
	border-radius: 999px;
	padding: 5px 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.ra-stat-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-bottom: 16px;
}

.ra-stat {
	background: var(--ra-card);
	border: 1px solid var(--ra-border);
	border-radius: var(--ra-radius-sm);
	padding: 10px 12px;
	text-align: center;
}

.ra-stat__value {
	font-size: 18px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.ra-stat__label {
	display: block;
	font-size: 10px;
	color: var(--ra-text-dim);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-top: 2px;
}

/* rule banner (always visible — never hidden) */

.ra-rule-banner {
	text-align: center;
	background: var(--ra-card);
	border: 1px solid var(--ra-border);
	border-radius: var(--ra-radius-sm);
	padding: 10px 14px;
	margin-bottom: 14px;
	font-weight: 800;
	letter-spacing: 0.03em;
	font-size: 15px;
}

.ra-rule-banner .ra-rule-emoji { margin-right: 6px; }

.ra-rule-change-flash {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(7, 11, 22, 0.92);
	z-index: 6;
	font-size: 22px;
	font-weight: 800;
	color: var(--ra-yellow);
	letter-spacing: 0.04em;
	animation: ra-flash-in 620ms ease forwards;
	text-align: center;
	padding: 20px;
	border-radius: var(--ra-radius);
}

@keyframes ra-flash-in {
	0% { opacity: 0; transform: scale(0.9); }
	15% { opacity: 1; transform: scale(1.03); }
	25% { transform: scale(1); }
	80% { opacity: 1; }
	100% { opacity: 0; }
}

/* main arena */

.ra-arena {
	position: relative;
	background: radial-gradient(120% 120% at 50% 0%, #0e1524 0%, #070b16 70%);
	border: 1px solid var(--ra-border);
	border-radius: var(--ra-radius);
	min-height: min(58vh, 430px);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02), var(--ra-shadow);
	touch-action: manipulation;
	user-select: none;
	-webkit-user-select: none;
}

.ra-arena__inner {
	text-align: center;
	padding: 24px;
	width: 100%;
}

.ra-signal-copy {
	font-size: clamp(14px, 2.6vw, 18px);
	color: var(--ra-text-dim);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-bottom: 18px;
}

.ra-core {
	width: clamp(120px, 34vw, 190px);
	height: clamp(120px, 34vw, 190px);
	border-radius: 50%;
	margin: 0 auto 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(30px, 8vw, 46px);
	background: radial-gradient(circle at 35% 30%, #1c2740, #0b111f);
	border: 1px solid var(--ra-border);
	box-shadow: 0 0 0 1px rgba(255,255,255,0.03), 0 20px 50px -18px rgba(0,0,0,0.7);
	position: relative;
	color: var(--ra-text-dim);
}

.ra-core.ra-core--waiting {
	animation: ra-breathe 1.8s ease-in-out infinite;
}

@keyframes ra-breathe {
	0%, 100% { transform: scale(1); box-shadow: 0 0 0 1px rgba(255,255,255,0.03), 0 20px 50px -18px rgba(0,0,0,0.7); }
	50% { transform: scale(1.035); box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 20px 60px -14px rgba(0,0,0,0.75); }
}

.ra-core.ra-core--go {
	color: #04180f;
	animation: ra-pop 260ms cubic-bezier(.2,1.4,.4,1) both;
}

@keyframes ra-pop {
	0% { transform: scale(0.75); }
	60% { transform: scale(1.08); }
	100% { transform: scale(1); }
}

.ra-core[data-color="green"] { background: radial-gradient(circle at 35% 30%, #4ade80, #0f8a52); box-shadow: 0 0 40px 6px rgba(52,211,153,0.55); }
.ra-core[data-color="red"] { background: radial-gradient(circle at 35% 30%, #fb7185, #9f1239); box-shadow: 0 0 40px 6px rgba(248,113,113,0.5); }
.ra-core[data-color="blue"] { background: radial-gradient(circle at 35% 30%, #7dd3fc, #0369a1); box-shadow: 0 0 40px 6px rgba(96,165,250,0.5); }
.ra-core[data-color="yellow"] { background: radial-gradient(circle at 35% 30%, #fde68a, #b45309); box-shadow: 0 0 40px 6px rgba(251,191,36,0.5); }

.ra-core--tappable { cursor: pointer; }

.ra-core.ra-correct-flash {
	animation: ra-correct-pulse 320ms ease;
}
@keyframes ra-correct-pulse {
	0% { box-shadow: 0 0 0 0 rgba(52,211,153,0.6); }
	100% { box-shadow: 0 0 0 22px rgba(52,211,153,0); }
}

.ra-core.ra-wrong-shake {
	animation: ra-shake 380ms ease;
}
@keyframes ra-shake {
	10%, 90% { transform: translateX(-1px); }
	20%, 80% { transform: translateX(2px); }
	30%, 50%, 70% { transform: translateX(-5px); }
	40%, 60% { transform: translateX(5px); }
}

.ra-instruction {
	margin-top: 14px;
	color: var(--ra-text-dim);
	font-size: 13px;
}

.ra-feedback {
	font-size: 15px;
	font-weight: 800;
	min-height: 22px;
	margin-top: 8px;
}
.ra-feedback[data-kind="good"] { color: var(--ra-green); }
.ra-feedback[data-kind="bad"] { color: var(--ra-red); }
.ra-feedback[data-kind="warn"] { color: var(--ra-yellow); }

/* choice grid (target switch / master mode) */

.ra-choice-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
	gap: 12px;
	max-width: 480px;
	margin: 0 auto;
}

.ra-choice-btn {
	background: var(--ra-card);
	border: 1px solid var(--ra-border);
	border-radius: 14px;
	padding: 18px 8px;
	font-size: 22px;
	font-weight: 800;
	min-height: 78px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 120ms ease, box-shadow 120ms ease;
}
.ra-choice-btn:hover { transform: translateY(-2px); }
.ra-choice-btn:active { transform: scale(0.95); }
.ra-choice-btn:focus-visible { outline: 2px solid var(--ra-cyan); outline-offset: 2px; }

.ra-choice-btn[data-color="red"] { color: var(--ra-red); }
.ra-choice-btn[data-color="green"] { color: var(--ra-green); }
.ra-choice-btn[data-color="blue"] { color: var(--ra-blue); }
.ra-choice-btn[data-color="yellow"] { color: var(--ra-yellow); }

/* left / right response buttons */

.ra-lr-row {
	display: flex;
	gap: 14px;
	justify-content: center;
	margin-top: 6px;
}

.ra-lr-btn {
	background: var(--ra-card);
	border: 1px solid var(--ra-border);
	border-radius: 14px;
	padding: 16px 28px;
	font-size: 20px;
	font-weight: 800;
	min-width: 100px;
}
.ra-lr-btn:active { transform: scale(0.95); }

/* combo badge floating in arena */

.ra-combo-pop {
	position: absolute;
	top: 14px;
	right: 14px;
	background: rgba(251, 191, 36, 0.14);
	border: 1px solid rgba(251, 191, 36, 0.4);
	color: var(--ra-yellow);
	font-weight: 800;
	font-size: 13px;
	padding: 6px 12px;
	border-radius: 999px;
	animation: ra-combo-bump 220ms ease;
}
@keyframes ra-combo-bump {
	0% { transform: scale(0.8); opacity: 0.4; }
	100% { transform: scale(1); opacity: 1; }
}

/* ---------- result card ---------- */

.ra-result {
	max-width: 480px;
	margin: 10px auto 0;
	background: linear-gradient(180deg, var(--ra-card-2), var(--ra-card));
	border: 1px solid var(--ra-border);
	border-radius: var(--ra-radius);
	padding: 28px 24px;
	text-align: center;
	box-shadow: var(--ra-shadow);
	animation: ra-result-in 320ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes ra-result-in {
	0% { opacity: 0; transform: translateY(14px) scale(0.98); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

.ra-result__eyebrow {
	color: var(--ra-text-dim);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 10px;
}

.ra-result__headline {
	font-size: clamp(26px, 6vw, 34px);
	font-weight: 800;
	margin: 0 0 16px;
	color: var(--ra-cyan);
}

.ra-result__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	text-align: left;
	margin-bottom: 16px;
}

.ra-result__row {
	display: flex;
	justify-content: space-between;
	background: var(--ra-bg);
	border: 1px solid var(--ra-border);
	border-radius: 10px;
	padding: 8px 12px;
	font-size: 13px;
}

.ra-result__row b {
	font-variant-numeric: tabular-nums;
}

.ra-result__xp {
	font-weight: 800;
	color: var(--ra-purple);
	margin-bottom: 8px;
}

.ra-result__banner {
	font-weight: 800;
	margin-bottom: 16px;
	font-size: 14px;
}

.ra-pb-toast {
	position: fixed;
	left: 50%;
	bottom: 26px;
	transform: translate(-50%, 20px);
	background: linear-gradient(135deg, #fde68a, #f59e0b);
	color: #1c1305;
	font-weight: 800;
	padding: 14px 22px;
	border-radius: 14px;
	box-shadow: 0 20px 40px -14px rgba(245, 158, 11, 0.6);
	z-index: 999999;
	opacity: 0;
	pointer-events: none;
	transition: transform 320ms cubic-bezier(.2,.8,.2,1), opacity 320ms ease;
	text-align: center;
	font-size: 14px;
}

.ra-pb-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* ---------- settings row ---------- */

.ra-settings-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}

.ra-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--ra-text-dim);
}

.ra-confirm-overlay {
	position: fixed;
	inset: 0;
	background: rgba(3, 6, 14, 0.72);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999998;
	padding: 20px;
}

.ra-confirm-box {
	background: var(--ra-card);
	border: 1px solid var(--ra-border);
	border-radius: var(--ra-radius);
	padding: 22px;
	max-width: 360px;
	text-align: center;
	box-shadow: var(--ra-shadow);
	color: var(--ra-text);
}

.ra-confirm-box p {
	font-size: 14px;
	color: var(--ra-text-dim);
	margin: 8px 0 18px;
}

.ra-confirm-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.reflex-arena-root * {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/* ---------- responsive ---------- */

@media (max-width: 640px) {
	.reflex-arena-root {
		padding: 14px;
		margin: 12px auto;
		border-radius: 14px;
	}
	.ra-records { grid-template-columns: repeat(2, 1fr); }
	.ra-stat-row { grid-template-columns: repeat(3, 1fr); gap: 6px; }
	.ra-mode-grid { grid-template-columns: 1fr; }
	.ra-arena { min-height: 52vh; }
	.ra-result__grid { grid-template-columns: 1fr; }
	.ra-daily { flex-direction: column; align-items: stretch; text-align: center; }
	.ra-footer-row { flex-direction: column; align-items: stretch; }
	.ra-footer-actions { justify-content: center; }
}

@media (min-width: 641px) and (max-width: 1024px) {
	.ra-records { grid-template-columns: repeat(3, 1fr); }
}