/* Battle Coins Phase F render pipeline — equipped cosmetics styling.
 * Loaded site-wide for logged-in users (see cr-cosmetics-render.php).
 *
 * Sections:
 *   1. Tags          — 10 SKUs, common → mythic
 *   2. Badges        — Phase F-2 (placeholder slot reserved)
 *   3. Themes        — Phase F-3 (per-SKU body class skins)
 *   4. Effects       — Phase F-4 (cursor / position / XP / etc.)
 */


/* ════════════════════════════════════════════════════════════════════
 * 1. TAGS — appended after handle on profiles, leaderboards, PvP cards
 * ════════════════════════════════════════════════════════════════════
 *
 * Base: small uppercase pill that sits next to a display name.
 * Rarity is encoded in the SKU class:
 *   common    → tag_hodler, tag_alpha, tag_degen
 *   rare      → tag_chartwizard, tag_sniper
 *   epic      → tag_oracle, tag_apex
 *   legendary → tag_master, tag_legend
 *   mythic    → tag_founder
 */

.cr-tag {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 7px;
	border-radius: 6px;
	font-size: 0.62em;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1.2;
	vertical-align: middle;
	text-transform: uppercase;
	white-space: nowrap;
	border: 1px solid transparent;
	background: rgba(120, 130, 150, 0.15);
	color: #b8c2d4;
	transform: translateY(-1px);
}

/* — common — flat, muted */
.cr-tag-tag_hodler  { background: rgba(218, 165,  32, 0.18); color: #f0c674; border-color: rgba(218, 165, 32, 0.45); }
.cr-tag-tag_alpha   { background: rgba( 80, 200, 255, 0.15); color: #7ad7ff; border-color: rgba( 80, 200, 255, 0.45); }
.cr-tag-tag_degen   { background: rgba(255,  80, 200, 0.15); color: #ff9ad4; border-color: rgba(255,  80, 200, 0.45); }

/* — rare — gradient fill, brighter */
.cr-tag-tag_chartwizard {
	background: linear-gradient(135deg, #6b3fa0 0%, #2563eb 100%);
	color: #f4ecff;
	border-color: rgba(180, 120, 255, 0.6);
	box-shadow: 0 0 6px rgba(135, 90, 220, 0.4);
}
.cr-tag-tag_sniper {
	background: linear-gradient(135deg, #b91c1c 0%, #f97316 100%);
	color: #fff5ec;
	border-color: rgba(255, 140, 60, 0.7);
	box-shadow: 0 0 6px rgba(220, 80, 50, 0.4);
}

/* — epic — animated subtle glow */
.cr-tag-tag_oracle {
	background: linear-gradient(135deg, #4338ca 0%, #06b6d4 100%);
	color: #e9f7ff;
	border-color: rgba(140, 200, 255, 0.7);
	box-shadow: 0 0 8px rgba(80, 140, 255, 0.55);
	animation: cr-tag-pulse 2.4s ease-in-out infinite;
}
.cr-tag-tag_apex {
	background: linear-gradient(135deg, #7f1d1d 0%, #dc2626 50%, #f59e0b 100%);
	color: #fff5e6;
	border-color: rgba(255, 100, 60, 0.85);
	box-shadow: 0 0 8px rgba(255, 80, 60, 0.55);
	animation: cr-tag-pulse 2.4s ease-in-out infinite;
}

/* — legendary — rotating gradient */
.cr-tag-tag_master {
	background-image: linear-gradient(120deg, #b8860b 0%, #ffd54a 35%, #fff5b8 50%, #ffd54a 65%, #b8860b 100%);
	background-size: 280% 100%;
	color: #2a1a00;
	border-color: rgba(255, 215, 90, 0.9);
	box-shadow: 0 0 10px rgba(255, 200, 60, 0.55);
	animation: cr-tag-shine 3.6s linear infinite;
	font-weight: 900;
}
.cr-tag-tag_legend {
	background-image: linear-gradient(120deg, #d946ef 0%, #06b6d4 25%, #fde047 50%, #06b6d4 75%, #d946ef 100%);
	background-size: 320% 100%;
	color: #1a1030;
	border-color: rgba(255, 255, 255, 0.55);
	box-shadow: 0 0 12px rgba(217, 70, 239, 0.6);
	animation: cr-tag-shine 4.8s linear infinite;
	font-weight: 900;
}

/* — mythic — gold halo + permanent shimmer */
.cr-tag-tag_founder {
	background: linear-gradient(135deg, #6a4500 0%, #f0c14b 50%, #b8860b 100%);
	color: #1a0e00;
	border: 1px solid #fff0b8;
	box-shadow:
		0 0 0 1px rgba(255, 215, 100, 0.4),
		0 0 14px rgba(255, 200, 60, 0.7),
		0 0 28px rgba(255, 180, 40, 0.35);
	animation: cr-tag-halo 2.8s ease-in-out infinite;
	font-weight: 900;
	letter-spacing: 0.12em;
}

/* keyframes */
@keyframes cr-tag-pulse {
	0%, 100% { filter: brightness(1)   saturate(1); }
	50%      { filter: brightness(1.2) saturate(1.3); }
}
@keyframes cr-tag-shine {
	0%   { background-position:   0% 50%; }
	100% { background-position: 280% 50%; }
}
@keyframes cr-tag-halo {
	0%, 100% {
		box-shadow: 0 0 0 1px rgba(255,215,100,.4),  0 0 14px rgba(255,200,60,.7),  0 0 28px rgba(255,180,40,.35);
	}
	50% {
		box-shadow: 0 0 0 1px rgba(255,235,140,.6), 0 0 22px rgba(255,210,80,.95), 0 0 44px rgba(255,180,60,.55);
	}
}

/* honor users with reduced-motion preference — kill animations */
@media (prefers-reduced-motion: reduce) {
	.cr-tag-tag_oracle,
	.cr-tag-tag_apex,
	.cr-tag-tag_master,
	.cr-tag-tag_legend,
	.cr-tag-tag_founder { animation: none; }
}


/* ════════════════════════════════════════════════════════════════════
 * 2. BADGES — small circular emblems rendered next to display name
 * ════════════════════════════════════════════════════════════════════
 *
 * Renderer emits:
 *   <span class="cr-badge cr-badge-{rarity} cr-badge-{sku}" title="..">
 *     <span class="cr-badge-icon">{emoji}</span>
 *   </span>
 *
 * Rarity classes carry the visual tier (ring, glow, animation). Per-SKU
 * classes only hand-tune accent colors so each badge feels distinct.
 */

.cr-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.45em;
	height: 1.45em;
	margin-left: 6px;
	border-radius: 50%;
	font-size: 0.92em;
	line-height: 1;
	vertical-align: middle;
	background: rgba(120, 130, 150, 0.15);
	border: 1px solid rgba(160, 170, 190, 0.35);
	box-sizing: border-box;
	transform: translateY(-1px);
	color: #fff;
	overflow: visible;
	position: relative;
}
.cr-badge .cr-badge-icon {
	display: inline-block;
	font-size: 0.78em;
	line-height: 1;
	transform: translateY(0.5px);
	filter: drop-shadow(0 1px 1px rgba(0,0,0,.4));
}
/* Crafted SVG emblems (Phase F-2 v2) — sit inside the rarity ring + glow.
 * currentColor inherits from .cr-badge so each SKU's text color tints it. */
.cr-badge .cr-badge-svg {
	width: 78%;
	height: 78%;
	display: block;
	overflow: visible;
	filter: drop-shadow(0 1px 1px rgba(0,0,0,.45));
}
/* Mythic glyphs paint dark on gold/red — soften the shadow so it doesn't
 * smudge the emblem against the warm background. */
.cr-badge-mythic .cr-badge-svg {
	filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
}

/* — common — flat ring, subtle tint */
.cr-badge-common {
	background: rgba(140, 150, 175, 0.18);
	border-color: rgba(180, 190, 210, 0.5);
}
.cr-badge-badge_paper_hands   { background: rgba(220, 220, 220, 0.20); border-color: rgba(220,220,220,.55); }
.cr-badge-badge_first_blood   { background: rgba(190,  40,  40, 0.22); border-color: rgba(220, 70, 70,.65); }
.cr-badge-badge_diamond_hands { background: rgba( 80, 200, 240, 0.20); border-color: rgba(120, 220, 255,.60); }
.cr-badge-badge_moon_mission  { background: rgba(120,  80, 220, 0.22); border-color: rgba(160, 130, 240,.60); }

/* — rare — brighter ring + soft glow */
.cr-badge-rare {
	border-width: 1.5px;
	box-shadow: 0 0 6px rgba(120, 180, 255, 0.35);
}
.cr-badge-badge_sniper { background: linear-gradient(135deg, #b91c1c 0%, #f97316 100%); border-color: rgba(255,140,60,.75); box-shadow: 0 0 6px rgba(220, 80, 50, 0.45); }
.cr-badge-badge_whale  { background: linear-gradient(135deg, #1e3a8a 0%, #38bdf8 100%); border-color: rgba(120,200,255,.75); box-shadow: 0 0 6px rgba( 60,140,240,0.45); }
.cr-badge-badge_shark  { background: linear-gradient(135deg, #0f172a 0%, #475569 100%); border-color: rgba(180,200,220,.75); box-shadow: 0 0 6px rgba(140,160,200,0.40); }

/* — epic — gradient fill + animated pulse */
.cr-badge-epic {
	border-width: 1.5px;
	animation: cr-badge-pulse 2.4s ease-in-out infinite;
}
.cr-badge-badge_phoenix { background: linear-gradient(135deg, #7f1d1d 0%, #f59e0b 100%); border-color: rgba(255,160, 60,.85); box-shadow: 0 0  9px rgba(255,120, 40,0.55); }
.cr-badge-badge_dragon  { background: linear-gradient(135deg, #064e3b 0%, #10b981 100%); border-color: rgba(110,240,170,.85); box-shadow: 0 0  9px rgba( 40,200,120,0.55); }
.cr-badge-badge_legend  { background: linear-gradient(135deg, #6b3fa0 0%, #d946ef 100%); border-color: rgba(230,140,255,.85); box-shadow: 0 0  9px rgba(180, 80,220,0.55); }

/* — legendary — rotating shimmer ring */
.cr-badge-legendary {
	border: 1.5px solid transparent;
	background-clip: padding-box;
	animation: cr-badge-shine 3.6s linear infinite;
	background-size: 280% 100%;
	box-shadow: 0 0 11px rgba(255, 200, 60, 0.55);
}
.cr-badge-badge_void_walker {
	background-image: linear-gradient(120deg, #1e1b4b 0%, #6b21a8 30%, #c026d3 50%, #6b21a8 70%, #1e1b4b 100%);
	border-color: rgba(200,120,255,.85);
	box-shadow: 0 0 11px rgba(160, 80, 220, 0.65);
}
.cr-badge-badge_midas {
	background-image: linear-gradient(120deg, #b8860b 0%, #ffd54a 35%, #fff5b8 50%, #ffd54a 65%, #b8860b 100%);
	border-color: rgba(255,215, 90,.95);
	box-shadow: 0 0 12px rgba(255, 200, 60, 0.65);
}
.cr-badge-badge_oracle {
	background-image: linear-gradient(120deg, #4338ca 0%, #06b6d4 35%, #a5f3fc 50%, #06b6d4 65%, #4338ca 100%);
	border-color: rgba(140, 220, 255,.9);
	box-shadow: 0 0 11px rgba( 80, 180, 255, 0.65);
}

/* — mythic — pulsing halo + permanent shimmer */
.cr-badge-mythic {
	border: 1.5px solid #fff0b8;
	animation: cr-badge-halo 2.8s ease-in-out infinite;
	font-weight: 900;
}
.cr-badge-badge_genesis_holder {
	background: radial-gradient(circle at 30% 30%, #f0c14b 0%, #b8860b 60%, #4a2c00 100%);
	color: #1a0e00;
}
.cr-badge-badge_apex_predator {
	background: radial-gradient(circle at 35% 35%, #fef3c7 0%, #f59e0b 35%, #7f1d1d 100%);
	color: #1a0500;
}

/* keyframes (independent of tag animations so the timing curves can diverge) */
@keyframes cr-badge-pulse {
	0%, 100% { transform: translateY(-1px) scale(1);   filter: brightness(1); }
	50%      { transform: translateY(-1px) scale(1.08); filter: brightness(1.25); }
}
@keyframes cr-badge-shine {
	0%   { background-position:   0% 50%; }
	100% { background-position: 280% 50%; }
}
@keyframes cr-badge-halo {
	0%, 100% {
		box-shadow:
			0 0 0 1px rgba(255,215,100,.45),
			0 0 14px rgba(255,200, 60,.75),
			0 0 28px rgba(255,180, 40,.40);
	}
	50% {
		box-shadow:
			0 0 0 1px rgba(255,235,140,.65),
			0 0 22px rgba(255,210, 80, 1.0),
			0 0 44px rgba(255,180, 60,.60);
	}
}

/* honor reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
	.cr-badge-epic,
	.cr-badge-legendary,
	.cr-badge-mythic { animation: none; }
}


/* ════════════════════════════════════════════════════════════════════
 * 3. THEMES — site-wide palette skins applied via body class
 * ════════════════════════════════════════════════════════════════════
 *
 * The site's design tokens live in style.css under :root. Themes here
 * override those tokens on body.cr-theme-{sku} so accents recolor
 * automatically across every component that consumes them. Some themes
 * also paint an animated backdrop via ::before (fixed, z-index: -1,
 * pointer-events: none — never blocks clicks).
 *
 * Order: rare → epic → legendary → mythic.
 */

/* —— shared backdrop scaffold —— */
body[class*="cr-theme-theme_"]::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

/* ─── Neon Trader (rare) — cyan + magenta neon, sign hum + flicker ───
 * NOTE: the flicker effect lives on body::before only. Applying `filter`
 * to <body> creates a new containing block for position:fixed descendants,
 * which detaches the WordPress admin bar from the viewport and makes the
 * full UI dim during brightness dips. The atmosphere ::before layer can
 * dip its opacity safely without either side-effect.
 */
body.cr-theme-theme_neon {
	--cr-bg:           #07091F;
	--cr-bg-alt:       #110D2C;
	--cr-mint:         #00F0FF;
	--cr-cyan:         #00D9FF;
	--cr-indigo:       #C026D3;
	--cr-purple:       #FF2BD6;
	--cr-mint-glow:    rgba(0,240,255,0.40);
	--cr-cyan-glow:    rgba(0,217,255,0.40);
	--cr-indigo-glow:  rgba(192,38,211,0.40);
	--cr-purple-glow:  rgba(255,43,214,0.45);
	--cr-grad-brand:   linear-gradient(90deg, #00F0FF 0%, #00D9FF 35%, #C026D3 70%, #FF2BD6 100%);
	background-image:
		radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0,240,255,0.14) 0%, transparent 60%),
		radial-gradient(ellipse 60% 40% at 80% 100%, rgba(255,43,214,0.13) 0%, transparent 55%),
		radial-gradient(ellipse 50% 35% at 15% 60%, rgba(192,38,211,0.10) 0%, transparent 60%);
}
body.cr-theme-theme_neon::before {
	will-change: opacity;
	background:
		repeating-linear-gradient(90deg,
			transparent 0 90px,
			rgba(0,240,255,0.05) 90px 91px,
			transparent 91px 180px,
			rgba(255,43,214,0.05) 180px 181px),
		linear-gradient(180deg, rgba(0,240,255,0.04), transparent 30%, rgba(255,43,214,0.04));
	mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
	-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
	animation: cr-theme-neon-hum 4.2s ease-in-out infinite;
}

/* ─── Vaporwave (rare) — sunset + retro sun + perspective grid ───
 * NOTE: `background-attachment: fixed` is intentionally avoided — it forces
 * the browser to repaint the body backdrop on every scroll, which causes
 * visible jank on long pages. The gradient is laid out once and the natural
 * page background covers the visible area without it.
 */
body.cr-theme-theme_vapor {
	--cr-bg:           #1B0B2E;
	--cr-bg-alt:       #2A0F3F;
	--cr-mint:         #FF77E9;
	--cr-cyan:         #FFB86C;
	--cr-indigo:       #9D5CFF;
	--cr-purple:       #FF4F8B;
	--cr-grad-brand:   linear-gradient(90deg, #FF77E9 0%, #9D5CFF 50%, #FFB86C 100%);
	background-image:
		/* the sun (clipped circle on the horizon) */
		radial-gradient(circle 280px at 50% 78%,
			#FFCB6B 0%, #FF8FB1 35%, rgba(157,92,255,0.55) 65%, transparent 78%),
		/* horizon stripes through the sun */
		repeating-linear-gradient(180deg,
			transparent 0 calc(78% - 100px),
			rgba(27,11,46,0.55) calc(78% - 100px) calc(78% - 92px),
			transparent calc(78% - 92px) calc(78% - 60px),
			rgba(27,11,46,0.45) calc(78% - 60px) calc(78% - 54px),
			transparent calc(78% - 54px) calc(78% - 30px),
			rgba(27,11,46,0.35) calc(78% - 30px) calc(78% - 26px),
			transparent calc(78% - 26px) 78%),
		linear-gradient(180deg, rgba(255,119,233,0.14) 0%, transparent 50%),
		radial-gradient(ellipse 100% 60% at 50% 100%, rgba(157,92,255,0.22) 0%, transparent 70%);
}
body.cr-theme-theme_vapor::before {
	top: 60vh; bottom: -10vh;
	background-image:
		linear-gradient(rgba(255,119,233,0.20) 1px, transparent 1px),
		linear-gradient(90deg, rgba(157,92,255,0.20) 1px, transparent 1px);
	background-size: 60px 40px;
	transform: perspective(700px) rotateX(62deg) translateZ(0);
	transform-origin: 50% 0%;
	will-change: background-position;
	mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%);
	animation: cr-theme-vapor-roll 6s linear infinite;
}

/* ─── Gold Bull (epic) — black velvet + gold flecks + diagonal sheen ─── */
body.cr-theme-theme_gold {
	--cr-bg:           #0A0905;
	--cr-bg-alt:       #1A1408;
	--cr-mint:         #FFD23F;
	--cr-cyan:         #FFC847;
	--cr-indigo:       #C8902B;
	--cr-purple:       #F0B340;
	--cr-mint-glow:    rgba(255,210,63,0.45);
	--cr-cyan-glow:    rgba(255,200,71,0.45);
	--cr-grad-brand:   linear-gradient(90deg, #B8860B 0%, #FFD23F 50%, #FFF5B8 100%);
	--cr-border:       rgba(218,165,32,0.22);
	--cr-border-hi:    rgba(218,165,32,0.45);
	background-image:
		radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255,210,63,0.14) 0%, transparent 60%),
		radial-gradient(ellipse 60% 40% at 80% 100%, rgba(184,134,11,0.16) 0%, transparent 60%),
		radial-gradient(ellipse 70% 50% at 10% 70%, rgba(240,179,64,0.10) 0%, transparent 60%);
}
body.cr-theme-theme_gold::before {
	will-change: background-position;
	background-image:
		/* gold flecks — 4 layers (was 7); each layer carries multiple visual
		 * dots via radial-gradient stops, keeping density without paying for
		 * separate compositor layers. */
		radial-gradient(circle 1.5px at 18% 12%, rgba(255,215,80,0.85), transparent 3px),
		radial-gradient(circle 1.3px at 46% 6%,  rgba(255,225,110,0.78), transparent 2px),
		radial-gradient(circle 1.5px at 73% 14%, rgba(255,215,80,0.85), transparent 3px),
		radial-gradient(circle 1.2px at 90% 8%,  rgba(255,235,140,0.70), transparent 2px),
		/* sheen band */
		linear-gradient(115deg, transparent 40%, rgba(255,235,140,0.10) 49%, rgba(255,255,200,0.18) 50%, rgba(255,235,140,0.10) 51%, transparent 60%);
	background-size: 100% 200%, 100% 200%, 100% 200%, 100% 200%, 220% 100%;
	background-repeat: repeat-y;
	background-position: 0 -10%, 0 -10%, 0 -10%, 0 -10%, -110% 0;
	/* Single 26s timeline drives both effects so they cannot stomp each other
	 * (an earlier 2-animation setup had the 8s sheen hijacking the fleck
	 * positions on every browser). */
	animation: cr-theme-gold-atmo 26s linear infinite;
}

/* ─── Matrix Terminal (epic) — falling green rain + CRT scanline ─── */
body.cr-theme-theme_matrix {
	--cr-bg:           #000300;
	--cr-bg-alt:       #001208;
	--cr-mint:         #00FF66;
	--cr-cyan:         #33FF99;
	--cr-indigo:       #00B347;
	--cr-purple:       #66FFB2;
	--cr-text:         #B6FFD4;
	--cr-text-muted:   rgba(0,255,102,0.55);
	--cr-mint-glow:    rgba(0,255,102,0.45);
	--cr-grad-brand:   linear-gradient(90deg, #003D17 0%, #00FF66 50%, #B6FFD4 100%);
	--cr-border:       rgba(0,255,102,0.20);
	background-image:
		repeating-linear-gradient(0deg, rgba(0,255,102,0.045) 0px, rgba(0,255,102,0.045) 1px, transparent 1px, transparent 3px),
		radial-gradient(ellipse 60% 40% at 50% 100%, rgba(0,255,102,0.10) 0%, transparent 60%);
}
/* Falling code rain — six vertical streaks of green light. Each column is a
 * repeat-y gradient at 480px tile; animating background-position-y from 0 to
 * 480px completes exactly one tile = seamless loop. Different starting offsets
 * per column give parallax phasing. */
body.cr-theme-theme_matrix::before {
	background:
		linear-gradient(180deg,
			transparent 0%,
			rgba(0,255,102,0.0)  6%,
			rgba(0,255,102,0.45) 14%,
			rgba(0,255,102,0.95) 22%,
			rgba(182,255,212,1)  25%,
			rgba(0,255,102,0.55) 30%,
			rgba(0,255,102,0.18) 44%,
			transparent 64%) 7% 0 / 2px 480px repeat-y,
		linear-gradient(180deg,
			transparent 0%,
			rgba(0,255,102,0.4)  18%,
			rgba(0,255,102,0.9)  28%,
			rgba(182,255,212,0.95) 30%,
			rgba(0,255,102,0.4)  40%,
			transparent 60%) 22% -120px / 2px 480px repeat-y,
		linear-gradient(180deg,
			transparent 0%,
			rgba(0,255,102,0.35) 10%,
			rgba(0,255,102,0.85) 18%,
			rgba(182,255,212,0.9) 21%,
			rgba(0,255,102,0.3)  32%,
			transparent 56%) 38% -240px / 2px 480px repeat-y,
		linear-gradient(180deg,
			transparent 0%,
			rgba(0,255,102,0.45) 16%,
			rgba(0,255,102,0.95) 24%,
			rgba(182,255,212,1)  27%,
			rgba(0,255,102,0.45) 38%,
			transparent 60%) 56% -60px / 2px 480px repeat-y,
		linear-gradient(180deg,
			transparent 0%,
			rgba(0,255,102,0.3)  12%,
			rgba(0,255,102,0.8)  20%,
			rgba(182,255,212,0.9) 22%,
			rgba(0,255,102,0.3)  32%,
			transparent 54%) 71% -180px / 2px 480px repeat-y,
		linear-gradient(180deg,
			transparent 0%,
			rgba(0,255,102,0.4)  20%,
			rgba(0,255,102,0.9)  28%,
			rgba(182,255,212,0.95) 31%,
			rgba(0,255,102,0.35) 42%,
			transparent 64%) 88% -360px / 2px 480px repeat-y;
	background-repeat: repeat-y, repeat-y, repeat-y, repeat-y, repeat-y, repeat-y;
	will-change: background-position;
	animation: cr-theme-matrix-rain 4.4s linear infinite;
	mix-blend-mode: screen;
	opacity: 0.85;
}

/* ─── Obsidian (epic) — black velvet + slow platinum sheen + razor lines ─── */
body.cr-theme-theme_obsidian {
	--cr-bg:           #050608;
	--cr-bg-alt:       #0E1014;
	--cr-mint:         #E5E7EB;
	--cr-cyan:         #CBD5E1;
	--cr-indigo:       #94A3B8;
	--cr-purple:       #F1F5F9;
	--cr-text:         #F8FAFC;
	--cr-mint-glow:    rgba(229,231,235,0.30);
	--cr-cyan-glow:    rgba(203,213,225,0.30);
	--cr-grad-brand:   linear-gradient(90deg, #94A3B8 0%, #E5E7EB 50%, #F8FAFC 100%);
	--cr-border:       rgba(241,245,249,0.18);
	--cr-border-hi:    rgba(241,245,249,0.40);
	background-image:
		radial-gradient(ellipse 70% 40% at 50% 0%, rgba(241,245,249,0.04) 0%, transparent 60%),
		radial-gradient(ellipse 50% 30% at 100% 100%, rgba(148,163,184,0.06) 0%, transparent 60%),
		repeating-linear-gradient(115deg,
			transparent 0 80px,
			rgba(241,245,249,0.012) 80px 81px,
			transparent 81px 160px);
}
body.cr-theme-theme_obsidian::before {
	will-change: transform;
	background:
		linear-gradient(180deg, transparent 35%, rgba(241,245,249,0.06) 49%, rgba(255,255,255,0.10) 50%, rgba(241,245,249,0.06) 51%, transparent 65%);
	animation: cr-theme-obsidian-sheen 13s ease-in-out infinite;
}

/* ─── Sakura Drift (epic) — falling petals (multi-layer parallax) ─── */
body.cr-theme-theme_sakura {
	--cr-bg:           #1A1316;
	--cr-bg-alt:       #261A1F;
	--cr-mint:         #FF9EBA;
	--cr-cyan:         #FFD3DD;
	--cr-indigo:       #C5708F;
	--cr-purple:       #E892AE;
	--cr-grad-brand:   linear-gradient(90deg, #FFD3DD 0%, #FF9EBA 50%, #C5708F 100%);
	background-image:
		radial-gradient(ellipse 80% 50% at 30% 0%, rgba(255,158,186,0.16) 0%, transparent 60%),
		radial-gradient(ellipse 60% 40% at 80% 100%, rgba(232,146,174,0.13) 0%, transparent 60%);
}
body.cr-theme-theme_sakura::before {
	will-change: background-position;
	background:
		/* near-field petals (larger, more opaque, faster) — 4 layers (was 5) */
		radial-gradient(ellipse 3px 2px at 14% 6%,  rgba(255,200,220,0.85), transparent 4px),
		radial-gradient(ellipse 3px 2px at 42% 14%, rgba(255,210,225,0.80), transparent 4px),
		radial-gradient(ellipse 3px 2px at 68% 8%,  rgba(255,180,200,0.80), transparent 4px),
		radial-gradient(ellipse 3px 2px at 88% 16%, rgba(255,200,220,0.85), transparent 4px),
		/* far-field petals (smaller, drifting slower) — 2 layers (was 4) */
		radial-gradient(circle 1.5px at 26% 4%,  rgba(255,200,220,0.55), transparent 3px),
		radial-gradient(circle 1.5px at 76% 12%, rgba(255,180,200,0.50), transparent 3px);
	background-size: 100% 220%, 100% 220%, 100% 220%, 100% 220%, 100% 320%, 100% 320%;
	background-position: 0 -8%, 0 -8%, 0 -8%, 0 -8%, 0 -8%, 0 -8%;
	background-repeat: repeat;
	animation: cr-theme-sakura-drift 16s linear infinite;
}

/* ─── Cosmic Galaxy (legendary) — drifting nebula + twinkling stars + comet streak ───
 * The nebula drift used to live on <body> directly. Moving it to ::before
 * (alongside the twinkle/comet) keeps the body backdrop static so card
 * translucency doesn't churn through repaints every frame. */
body.cr-theme-theme_galaxy {
	--cr-bg:           #060418;
	--cr-bg-alt:       #0E0A28;
	--cr-mint:         #B794F4;
	--cr-cyan:         #7DD3FC;
	--cr-indigo:       #818CF8;
	--cr-purple:       #E879F9;
	--cr-grad-brand:   linear-gradient(90deg, #7DD3FC 0%, #818CF8 35%, #B794F4 70%, #E879F9 100%);
	background-image:
		radial-gradient(ellipse 80% 50% at 30% 20%, rgba(168,85,247,0.22) 0%, transparent 55%),
		radial-gradient(ellipse 70% 40% at 80% 70%, rgba(56,189,248,0.18) 0%, transparent 55%),
		radial-gradient(ellipse 50% 30% at 50% 50%, rgba(232,121,249,0.14) 0%, transparent 60%),
		radial-gradient(ellipse 60% 40% at 10% 90%, rgba(167,139,250,0.10) 0%, transparent 60%);
}
body.cr-theme-theme_galaxy::before {
	will-change: background-position, opacity;
	background:
		/* far stars (slow twinkle) — 8 layers (was 12) */
		radial-gradient(circle 1px at 12% 18%, #fff, transparent 2px),
		radial-gradient(circle 1px at 28% 72%, #fff, transparent 2px),
		radial-gradient(circle 1px at 41% 33%, #fff, transparent 2px),
		radial-gradient(circle 1px at 68% 15%, #fff, transparent 2px),
		radial-gradient(circle 1px at 79% 47%, #fff, transparent 2px),
		radial-gradient(circle 1px at 95% 28%, #fff, transparent 2px),
		radial-gradient(circle 1.5px at 18% 56%, rgba(125,211,252,0.85), transparent 3px),
		radial-gradient(circle 1.5px at 62% 62%, rgba(232,121,249,0.85), transparent 3px),
		/* comet streak (only visible during a slice of the loop) */
		linear-gradient(115deg,
			transparent 32%,
			rgba(255,255,255,0.0) 38%,
			rgba(255,255,255,0.4) 44%,
			rgba(255,255,255,0.95) 47%,
			rgba(125,211,252,0.85) 49%,
			transparent 54%);
	background-size:
		100% 100%, 100% 100%, 100% 100%, 100% 100%,
		100% 100%, 100% 100%, 100% 100%, 100% 100%,
		260% 260%;
	background-position:
		0 0, 0 0, 0 0, 0 0,
		0 0, 0 0, 0 0, 0 0,
		-180% 180%;
	opacity: 0.85;
	animation:
		cr-theme-twinkle 5s ease-in-out infinite,
		cr-theme-galaxy-comet 16s linear infinite;
}

/* ─── Aurora Borealis (legendary) — drifting aurora ribbons + faint stars ─── */
body.cr-theme-theme_aurora {
	--cr-bg:           #03121A;
	--cr-bg-alt:       #08222A;
	--cr-mint:         #5EEAD4;
	--cr-cyan:         #67E8F9;
	--cr-indigo:       #A78BFA;
	--cr-purple:       #C4B5FD;
	--cr-grad-brand:   linear-gradient(90deg, #5EEAD4 0%, #67E8F9 35%, #A78BFA 70%, #C4B5FD 100%);
	/* Faint static starfield baked into body so ribbons glide over it */
	background-image:
		radial-gradient(circle 1px at 8% 18%,  rgba(255,255,255,0.55), transparent 2px),
		radial-gradient(circle 1px at 22% 76%, rgba(255,255,255,0.45), transparent 2px),
		radial-gradient(circle 1px at 41% 12%, rgba(255,255,255,0.55), transparent 2px),
		radial-gradient(circle 1px at 58% 84%, rgba(255,255,255,0.45), transparent 2px),
		radial-gradient(circle 1px at 73% 28%, rgba(255,255,255,0.55), transparent 2px),
		radial-gradient(circle 1px at 86% 62%, rgba(255,255,255,0.45), transparent 2px),
		radial-gradient(circle 1px at 95% 8%,  rgba(255,255,255,0.55), transparent 2px),
		radial-gradient(ellipse 55% 35% at 30% 100%, rgba(94,234,212,0.10) 0%, transparent 60%),
		radial-gradient(ellipse 55% 35% at 70% 100%, rgba(167,139,250,0.10) 0%, transparent 60%);
}
/* Three overlapping ribbon layers that breathe + slide horizontally at different
 * cadences so the aurora appears to weave instead of pulse. */
body.cr-theme-theme_aurora::before {
	will-change: background-position;
	background:
		/* primary mint ribbon */
		radial-gradient(ellipse 70% 18% at 50% 30%,
			rgba(94,234,212,0.55) 0%,
			rgba(94,234,212,0.30) 30%,
			rgba(94,234,212,0)    65%),
		/* violet ribbon (slightly lower) */
		radial-gradient(ellipse 80% 14% at 50% 48%,
			rgba(167,139,250,0.45) 0%,
			rgba(167,139,250,0.22) 35%,
			rgba(167,139,250,0)    70%),
		/* cyan ribbon (lower, slimmer) */
		radial-gradient(ellipse 60% 10% at 50% 66%,
			rgba(103,232,249,0.40) 0%,
			rgba(103,232,249,0.18) 35%,
			rgba(103,232,249,0)    72%);
	background-size: 240% 100%, 280% 100%, 220% 100%;
	background-repeat: no-repeat;
	background-position: -70% 0, -20% 0, -50% 0;
	/* `blur(38px)` was the heaviest filter on the site — every animation
	 * frame asked the GPU to re-blur a full-viewport pseudo-element with a
	 * 38-pixel kernel. 22px is still soft enough for the ribbons to read as
	 * aurora and is roughly half the cost. */
	filter: blur(22px) saturate(1.12);
	mix-blend-mode: screen;
	animation: cr-theme-aurora-weave 26s ease-in-out infinite;
}

/* ─── Cyberpunk 2099 (legendary) — scanlines + neon flicker + glitch tear ───
 * Same body-filter caveat as Neon Trader — flicker lives on the ::before
 * atmosphere layer to avoid breaking position:fixed elements (admin bar etc.).
 */
body.cr-theme-theme_cyberpunk {
	--cr-bg:           #0A0414;
	--cr-bg-alt:       #14081E;
	--cr-mint:         #FCEE0A;
	--cr-cyan:         #00E5FF;
	--cr-indigo:       #FF003C;
	--cr-purple:       #FF2D95;
	--cr-mint-glow:    rgba(252,238,10,0.40);
	--cr-cyan-glow:    rgba(0,229,255,0.40);
	--cr-grad-brand:   linear-gradient(90deg, #FCEE0A 0%, #00E5FF 35%, #FF2D95 70%, #FF003C 100%);
	background-image:
		repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 3px),
		radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0,229,255,0.10) 0%, transparent 60%),
		radial-gradient(ellipse 60% 40% at 80% 100%, rgba(255,45,149,0.10) 0%, transparent 60%);
}
/* Layered atmosphere:
 *   1. yellow scan band (kept from original)
 *   2. magenta + cyan chromatic split bars that breathe
 *   3. periodic glitch tear — a thin RGB-split strip rips horizontally every 9s */
body.cr-theme-theme_cyberpunk::before {
	will-change: background-position;
	background:
		linear-gradient(180deg, transparent 0%, rgba(252,238,10,0.05) 50%, transparent 100%),
		linear-gradient(180deg,
			transparent 49.6%,
			rgba(255,45,149,0.16) 49.7%,
			rgba(255,45,149,0.16) 50.0%,
			rgba(0,229,255,0.16)  50.0%,
			rgba(0,229,255,0.16)  50.3%,
			transparent 50.4%);
	background-size: 100% 100%, 100% 220%;
	background-position: 0 0, 0 -110%;
	background-repeat: no-repeat, no-repeat;
	mix-blend-mode: screen;
	animation:
		cr-theme-cyberpunk-scan 5s linear infinite,
		cr-theme-cyberpunk-glitch 11s steps(1, end) infinite;
}

/* ─── Quantum Flux (mythic) — hue-shifting interference + orbiting particles ───
 * IMPORTANT: animations live on body::before only. Putting `filter` or
 * `animation: hue-rotate` on <body> forces a full-document repaint every
 * frame and creates a containing block for position:fixed children — both
 * cause noticeable lag. The atmosphere layer carries all motion. */
body.cr-theme-theme_quantum {
	--cr-bg:           #050816;
	--cr-bg-alt:       #0E1428;
	--cr-mint:         #00F5A0;
	--cr-cyan:         #00D9FF;
	--cr-indigo:       #6366F1;
	--cr-purple:       #A855F7;
	--cr-grad-brand:   linear-gradient(90deg, #00F5A0 0%, #00D9FF 35%, #6366F1 70%, #A855F7 100%);
	background-image:
		/* fine "quantum lattice" — diagonal cross-hatch of faint accent lines */
		repeating-linear-gradient(45deg, rgba(0,217,255,0.04) 0 1px, transparent 1px 32px),
		repeating-linear-gradient(-45deg, rgba(168,85,247,0.04) 0 1px, transparent 1px 32px),
		/* ambient field glows */
		radial-gradient(ellipse 70% 40% at 30% 20%, rgba(0,245,160,0.12) 0%, transparent 60%),
		radial-gradient(ellipse 60% 40% at 70% 80%, rgba(168,85,247,0.12) 0%, transparent 60%);
}
/* Two interfering quantum waves drift past each other plus a few "particles".
 * The hue-rotate runs on this layer (cheap — pseudo-element only repaints) so
 * the palette cycle no longer touches the rest of the document. */
body.cr-theme-theme_quantum::before {
	will-change: background-position, filter;
	background:
		/* particles — three bright dots (was six; the cost difference is real
		 * because each radial-gradient layer is rasterized + composited every
		 * frame the orbit animates background-position). */
		radial-gradient(circle 3px at 20% 30%, rgba(0,245,160,0.95), transparent 6px),
		radial-gradient(circle 3px at 80% 65%, rgba(0,217,255,0.95), transparent 6px),
		radial-gradient(circle 2px at 35% 78%, rgba(168,85,247,0.95), transparent 5px),
		/* interference wave A — cyan/mint band sweeping right */
		radial-gradient(ellipse 80% 35% at 25% 40%,
			rgba(0,245,160,0.28) 0%,
			rgba(0,217,255,0.18) 40%,
			transparent 70%),
		/* interference wave B — violet band sweeping left */
		radial-gradient(ellipse 70% 30% at 75% 60%,
			rgba(168,85,247,0.28) 0%,
			rgba(99,102,241,0.18) 40%,
			transparent 70%);
	background-size:
		260% 260%, 260% 260%, 220% 220%,
		200% 100%, 200% 100%;
	background-position:
		0% 0%, 0% 0%, 0% 0%,
		-50% 0, 50% 0;
	mix-blend-mode: screen;
	animation:
		cr-theme-quantum-orbit 28s linear infinite,
		cr-theme-quantum-shift 18s linear infinite;
}

/* ─── Genesis / Founders (mythic) — bronze + ivory + diagonal shimmer band ─── */
body.cr-theme-theme_genesis {
	--cr-bg:           #120A04;
	--cr-bg-alt:       #1F1308;
	--cr-mint:         #F0C14B;
	--cr-cyan:         #FCEABB;
	--cr-indigo:       #B8860B;
	--cr-purple:       #E8C97A;
	--cr-mint-glow:    rgba(240,193,75,0.45);
	--cr-grad-brand:   linear-gradient(90deg, #6A4500 0%, #B8860B 30%, #F0C14B 50%, #FCEABB 75%, #F0C14B 100%);
	--cr-border:       rgba(240,193,75,0.22);
	--cr-border-hi:    rgba(240,193,75,0.45);
	background-image:
		radial-gradient(ellipse 80% 50% at 50% -10%, rgba(240,193,75,0.14) 0%, transparent 60%),
		radial-gradient(ellipse 60% 40% at 80% 100%, rgba(184,134,11,0.14) 0%, transparent 60%),
		radial-gradient(ellipse 50% 30% at 20% 50%, rgba(252,234,187,0.06) 0%, transparent 60%);
}
body.cr-theme-theme_genesis::before {
	will-change: background-position, opacity;
	background:
		radial-gradient(ellipse 50% 40% at 50% 50%, rgba(240,193,75,0.10) 0%, transparent 70%),
		linear-gradient(115deg,
			transparent 38%,
			rgba(252,234,187,0.05) 46%,
			rgba(255,247,200,0.18) 49%,
			rgba(255,255,220,0.28) 50%,
			rgba(255,247,200,0.18) 51%,
			rgba(252,234,187,0.05) 54%,
			transparent 62%);
	background-size: 100% 100%, 240% 100%;
	background-position: 0 0, -120% 0;
	animation:
		cr-theme-genesis-shimmer 6s ease-in-out infinite,
		cr-theme-genesis-band 11s ease-in-out infinite;
}

/* —— theme keyframes —— */
@keyframes cr-theme-matrix-scan {
	0%   { transform: translateY(-100%); }
	100% { transform: translateY(100%); }
}
/* Drops one full 480px tile downward — repeat-y backgrounds loop seamlessly.
 * All six columns share the keyframe (CSS animations target one property at a
 * time across all comma-separated layers); the per-column starting offsets in
 * background-position above provide the parallax look. */
@keyframes cr-theme-matrix-rain {
	0%   {
		background-position:
			7% 0px, 22% -120px, 38% -240px, 56% -60px, 71% -180px, 88% -360px;
	}
	100% {
		background-position:
			7% 480px, 22% 360px, 38% 240px, 56% 420px, 71% 300px, 88% 120px;
	}
}
@keyframes cr-theme-cyberpunk-scan {
	0%   { transform: translateY(-100%); }
	100% { transform: translateY(100%); }
}
/* Glitch: scan band stays still 88% of the cycle, then a chromatic-split bar
 * tears across the screen vertically in one quick burst. Uses background-position
 * for the second layer (the magenta/cyan split bar). */
@keyframes cr-theme-cyberpunk-glitch {
	0%, 88%, 100% { background-position: 0 0, 0 -110%; }
	89%           { background-position: 0 0, 0 -55%;  }
	91%           { background-position: 0 0, 0  20%;  }
	93%           { background-position: 0 0, 0  60%;  }
	95%           { background-position: 0 0, 0 110%;  }
}
/* (Old whole-page flicker keyframes removed — they applied `filter` to <body>
 * which broke the WordPress admin bar's fixed positioning and dimmed the entire
 * UI. The neon-sign feel now lives in the ::before atmosphere via opacity
 * dips in cr-theme-neon-hum / cr-theme-cyberpunk-scan, which are visually
 * indistinguishable but layout-safe.) */
@keyframes cr-theme-twinkle {
	0%, 100% { opacity: 0.55; }
	50%      { opacity: 0.95; }
}
/* Aurora ribbons — three layers (mint/violet/cyan) slide horizontally at
 * different phases of the cycle so the three coloured bands appear to weave. */
@keyframes cr-theme-aurora-weave {
	0%, 100% { background-position: -70% 0,  -20% 0,  -50% 0; }
	25%      { background-position:  10% 0,  -50% 0,  -10% 0; }
	50%      { background-position:  40% 0,   30% 0,  -50% 0; }
	75%      { background-position:  -30% 0,  60% 0,   30% 0; }
}
@keyframes cr-theme-sakura-drift {
	0%   { background-position: 0%   0%; }
	100% { background-position: 30% 100%; }
}
@keyframes cr-theme-quantum-shift {
	0%, 100% { filter: hue-rotate(0deg); }
	50%      { filter: hue-rotate(30deg); }
}
/* Particles + waves — first three layers are particle dots that orbit, last
 * two are interference waves that drift in opposite directions. Reduced
 * keyframe count + smoother LERPs to keep this cheap on lower-end devices. */
@keyframes cr-theme-quantum-orbit {
	0% {
		background-position:
			0% 0%,    0% 0%,    0% 0%,
			-50% 0,   50% 0;
	}
	50% {
		background-position:
			16% 6%,  -16% -4%, -10% 10%,
			50% 0,   -50% 0;
	}
	100% {
		background-position:
			0% 0%,    0% 0%,    0% 0%,
			-50% 0,   50% 0;
	}
}
@keyframes cr-theme-genesis-shimmer {
	0%, 100% { opacity: 0.6; }
	50%      { opacity: 1.0; }
}
@keyframes cr-theme-genesis-band {
	0%        { background-position: 0 0, -120% 0; }
	100%      { background-position: 0 0, 240% 0; }
}
/* (cr-theme-neon-flicker removed — see note above re: body-filter side-effects.) */
@keyframes cr-theme-neon-hum {
	/* Sign-hum baseline pulse + a single brief brownout per cycle. The dip is
	 * confined to the ::before backdrop layer so the UI itself never dims. */
	0%, 100% { opacity: 0.85; }
	34%      { opacity: 0.92; }
	35%      { opacity: 0.55; }
	36%      { opacity: 0.92; }
	48%      { opacity: 1.00; }
	49%      { opacity: 0.65; }
	50%      { opacity: 1.00; }
}
@keyframes cr-theme-vapor-roll {
	0%   { background-position: 0 0; }
	100% { background-position: 0 40px; }
}
/* Single 26s timeline drives both fleck fall (layers 1-4, y axis) and
 * sheen drift (layer 5, x axis). One continuous keyframe pair so the
 * sheen takes the full 26 seconds to sweep diagonally across the page —
 * slow, ambient, "luxury watch" cadence. (An earlier 8s sheen kept
 * stomping the 26s fleck timeline; the merged keyframe avoids the
 * conflict by definition.) */
@keyframes cr-theme-gold-atmo {
	0%   { background-position: 0 -10%, 0 -10%, 0 -10%, 0 -10%, -110% 0; }
	100% { background-position: 0 110%, 0 110%, 0 110%, 0 110%,  220% 0; }
}
@keyframes cr-theme-obsidian-sheen {
	0%   { transform: translateY(-110%); }
	100% { transform: translateY(110%); }
}
/* (galaxy nebula drift removed — moved off <body> to keep the backdrop
 * static. The atmosphere ::before still carries twinkle + comet motion.) */
@keyframes cr-theme-galaxy-comet {
	0%, 18%, 100% {
		background-position:
			0 0, 0 0, 0 0, 0 0,
			0 0, 0 0, 0 0, 0 0,
			-180% 180%;
	}
	30% {
		background-position:
			0 0, 0 0, 0 0, 0 0,
			0 0, 0 0, 0 0, 0 0,
			180% -180%;
	}
}

/* honor reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
	body.cr-theme-theme_matrix::before,
	body.cr-theme-theme_cyberpunk,
	body.cr-theme-theme_cyberpunk::before,
	body.cr-theme-theme_galaxy,
	body.cr-theme-theme_galaxy::before,
	body.cr-theme-theme_aurora::before,
	body.cr-theme-theme_sakura::before,
	body.cr-theme-theme_quantum,
	body.cr-theme-theme_quantum::before,
	body.cr-theme-theme_genesis::before,
	body.cr-theme-theme_neon,
	body.cr-theme-theme_neon::before,
	body.cr-theme-theme_vapor::before,
	body.cr-theme-theme_gold::before,
	body.cr-theme-theme_obsidian::before { animation: none; }
}


/* ════════════════════════════════════════════════════════════════════
 * 4. EFFECTS — opt-in visual flourishes triggered by body.cr-effect-{sku}
 * ════════════════════════════════════════════════════════════════════
 *
 * Effects layer on top of the active theme. Themes use body::before for
 * their backdrops, so effects use body::after when they need a layer.
 *
 * 7 of the 10 are pure CSS and ship complete here. 3 use a companion JS
 * (cosmetics-effects.js):
 *   - effect_trail_neon  — spawns fading dots on mousemove
 *   - effect_confetti_pro — boosts canvas confetti via filter (CSS only)
 *   - effect_chrono_freeze — needs `cr-fx-freeze-active` body class set by
 *                            the existing TP-hit handler to trigger slow-mo;
 *                            CSS rules in place, JS trigger pending integration
 *                            with the simulator's TP celebration code.
 */

/* ─── Position Glow (common) — pulsing halo on open position cards ─── */
body.cr-effect-effect_card_glow .cr-sim-pos-card {
	animation: cr-fx-card-glow 2.4s ease-in-out infinite;
}
@keyframes cr-fx-card-glow {
	0%, 100% { box-shadow: 0 0 0 1px rgba(95,211,145,0.18), 0 0 12px rgba(95,211,145,0.18); }
	50%      { box-shadow: 0 0 0 1px rgba(95,211,145,0.35), 0 0 22px rgba(95,211,145,0.45); }
}
body.cr-effect-effect_card_glow .cr-sim-pos-card.lose {
	animation-name: cr-fx-card-glow-loss;
}
@keyframes cr-fx-card-glow-loss {
	0%, 100% { box-shadow: 0 0 0 1px rgba(255,107,129,0.18), 0 0 12px rgba(255,107,129,0.18); }
	50%      { box-shadow: 0 0 0 1px rgba(255,107,129,0.35), 0 0 22px rgba(255,107,129,0.45); }
}

/* ─── Neon Cursor Trail (common) — JS-driven; styles for spawned dots ─── */
.cr-trail-dot {
	position: fixed;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	pointer-events: none;
	z-index: 9999;
	background: radial-gradient(circle, var(--cr-cyan, #00D9FF) 0%, transparent 70%);
	box-shadow: 0 0 12px var(--cr-cyan, #00D9FF);
	transform: translate(-50%, -50%);
	animation: cr-fx-trail-fade 600ms linear forwards;
}
@keyframes cr-fx-trail-fade {
	0%   { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
	100% { opacity: 0;    transform: translate(-50%, -50%) scale(0.2); }
}

/* ─── Rainbow XP Bar (rare) — animated rainbow gradient on level fill ─── */
body.cr-effect-effect_xp_rainbow #cr-sim-xp-fill {
	background-image: linear-gradient(90deg, #ff0080 0%, #ff8c00 16%, #ffd23f 33%, #00ff66 50%, #00d9ff 66%, #6366f1 83%, #d946ef 100%) !important;
	background-size: 200% 100%;
	animation: cr-fx-rainbow-slide 3.5s linear infinite;
}
@keyframes cr-fx-rainbow-slide {
	0%   { background-position:   0% 50%; }
	100% { background-position: 200% 50%; }
}

/* ─── Pro Confetti (rare) — boost saturation/brightness of canvas confetti ─── */
body.cr-effect-effect_confetti_pro #cr-sim-confetti,
body.cr-effect-effect_confetti_pro .cr-sim-confetti {
	filter: saturate(1.5) brightness(1.15) drop-shadow(0 0 8px rgba(255,255,255,0.4));
}

/* ─── Liquid Metal Cards (epic) — animated mercury sheen on hover ─── */
body.cr-effect-effect_liquid_metal .cr-sim-pos-card {
	position: relative;
	overflow: hidden;
}
body.cr-effect-effect_liquid_metal .cr-sim-pos-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
	background-size: 250% 100%;
	background-position: 100% 50%;
	pointer-events: none;
	transition: background-position 800ms var(--cr-ease, cubic-bezier(0.16,1,0.3,1));
	mix-blend-mode: overlay;
}
body.cr-effect-effect_liquid_metal .cr-sim-pos-card:hover::after {
	background-position: 0% 50%;
}

/* ─── Holographic Cards (epic) — rainbow shimmer slides across cards ─── */
body.cr-effect-effect_holo_card .cr-sim-pos-card {
	position: relative;
	overflow: hidden;
}
body.cr-effect-effect_holo_card .cr-sim-pos-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg,
		transparent 20%,
		rgba(255,0,128,0.10) 35%,
		rgba(0,217,255,0.10) 45%,
		rgba(255,210,63,0.10) 55%,
		rgba(168,85,247,0.10) 65%,
		transparent 80%);
	background-size: 300% 100%;
	pointer-events: none;
	mix-blend-mode: overlay;
	animation: cr-fx-holo-slide 5s linear infinite;
}
@keyframes cr-fx-holo-slide {
	0%   { background-position: 100% 50%; }
	100% { background-position:   0% 50%; }
}

/* ─── Particle Storm (legendary) — drifting charged particles backdrop ─── */
body.cr-effect-effect_particle_storm::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(circle 1.5px at 12% 18%, rgba(0,217,255,0.65), transparent 3px),
		radial-gradient(circle 1.5px at 28% 72%, rgba(168,85,247,0.65), transparent 3px),
		radial-gradient(circle 1.5px at 41% 33%, rgba(0,245,160,0.65), transparent 3px),
		radial-gradient(circle 1.5px at 55% 82%, rgba(0,217,255,0.55), transparent 3px),
		radial-gradient(circle 1.5px at 68% 15%, rgba(217,70,239,0.60), transparent 3px),
		radial-gradient(circle 1.5px at 79% 47%, rgba(0,217,255,0.60), transparent 3px),
		radial-gradient(circle 1.5px at 88% 88%, rgba(168,85,247,0.55), transparent 3px),
		radial-gradient(circle 1.5px at  5% 88%, rgba(0,245,160,0.55), transparent 3px),
		radial-gradient(circle 1.5px at 95% 28%, rgba(217,70,239,0.55), transparent 3px),
		radial-gradient(circle 1.5px at 22% 50%, rgba(0,217,255,0.55), transparent 3px),
		radial-gradient(circle 1.5px at 73% 60%, rgba(0,245,160,0.50), transparent 3px);
	background-size: 100% 100%;
	animation: cr-fx-particle-drift 22s linear infinite;
}
@keyframes cr-fx-particle-drift {
	0%   { background-position: 0%   0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; }
	100% { background-position: 12% 100%, -8% 80%, 6% -10%, -10% 60%, 8% -5%, -6% 40%, 4% -7%, -9% 30%, 5% -12%, -7% 50%, 6% -10%; }
}

/* ─── Equity Aurora (legendary) — equity value pulses with aurora gradient ─── */
body.cr-effect-effect_equity_aurora #cr-sim-equity,
body.cr-effect-effect_equity_aurora .cr-sim-equity-val {
	background: linear-gradient(90deg, #5EEAD4 0%, #67E8F9 25%, #A78BFA 50%, #67E8F9 75%, #5EEAD4 100%);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	animation: cr-fx-aurora-flow 4s ease-in-out infinite;
}
@keyframes cr-fx-aurora-flow {
	0%, 100% { background-position:   0% 50%; filter: brightness(1); }
	50%      { background-position: 200% 50%; filter: brightness(1.15); }
}

/* ─── Market Pulse (mythic) — UI gently breathes via global brightness pulse ─── */
body.cr-effect-effect_market_pulse {
	animation: cr-fx-market-breath 5s ease-in-out infinite;
}
@keyframes cr-fx-market-breath {
	0%, 100% { filter: brightness(1)    saturate(1); }
	50%      { filter: brightness(1.04) saturate(1.06); }
}

/* ─── Chrono Freeze (mythic) — slow-mo overlay during cr-fx-freeze-active ─── */
/* Trigger: simulator TP-hit code calls
 *   document.body.classList.add('cr-fx-freeze-active');
 *   setTimeout(()=>document.body.classList.remove('cr-fx-freeze-active'), 500);
 * Without that hook the rules below stay dormant.
 */
body.cr-effect-effect_chrono_freeze.cr-fx-freeze-active::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9998;
	pointer-events: none;
	background: radial-gradient(ellipse at center, rgba(167,232,255,0.18) 0%, rgba(11,16,32,0.45) 100%);
	animation: cr-fx-freeze-flash 500ms ease-out forwards;
}
body.cr-effect-effect_chrono_freeze.cr-fx-freeze-active * {
	animation-duration: 2s !important;
	transition-duration: 1s !important;
}
@keyframes cr-fx-freeze-flash {
	0%   { opacity: 0; }
	30%  { opacity: 1; }
	100% { opacity: 0; }
}

/* honor reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
	body.cr-effect-effect_card_glow .cr-sim-pos-card,
	.cr-trail-dot,
	body.cr-effect-effect_xp_rainbow #cr-sim-xp-fill,
	body.cr-effect-effect_holo_card .cr-sim-pos-card::after,
	body.cr-effect-effect_particle_storm::after,
	body.cr-effect-effect_equity_aurora #cr-sim-equity,
	body.cr-effect-effect_equity_aurora .cr-sim-equity-val,
	body.cr-effect-effect_market_pulse { animation: none; }
}


/* ════════════════════════════════════════════════════════════════════
 * 5. THEMED-SURFACE GLASS — let the theme atmosphere show through.
 * ════════════════════════════════════════════════════════════════════
 *
 * When a theme is active, key card surfaces on the gameplay screens
 * (Dashboard, Simulator, Arena, PvP match, Leaderboards) drop their
 * solid fills and pick up a frosted-glass treatment instead. The
 * animated backdrops on body::before stay visible behind every panel
 * so a Vaporwave sun or Aurora ribbons aren't hidden by opaque cards.
 *
 * Targets are scoped via [class*="cr-theme-theme_"] so this layer is
 * inert on the rest of the site (and on logged-out users — the body
 * filter in cr-cosmetics-render.php already gates that).
 *
 * Inner micro-cards (stat tiles, action chips, position rows) stay
 * mostly opaque — they hold tabular data that needs contrast — but
 * the surrounding "frame" containers are made nearly transparent.
 */

/* ── Dashboard hub frame ──────────────────────────────────────────── */
body[class*="cr-theme-theme_"] .cr-hub {
	background: linear-gradient(160deg, rgba(0,245,160,0.05), rgba(124,107,255,0.08)),
		rgba(11,16,32,0.18) !important;
	backdrop-filter: blur(14px) saturate(120%);
	-webkit-backdrop-filter: blur(14px) saturate(120%);
}
body[class*="cr-theme-theme_"] .cr-hub-stat,
body[class*="cr-theme-theme_"] .cr-hub-action {
	background: rgba(7,12,31,0.32) !important;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
body[class*="cr-theme-theme_"] .cr-hub-action-primary {
	background: linear-gradient(135deg, rgba(0,245,160,0.16), rgba(124,107,255,0.14)),
		rgba(7,12,31,0.32) !important;
}

/* ── Dashboard widgets row ────────────────────────────────────────── */
body[class*="cr-theme-theme_"] .cr-dash-widget,
body[class*="cr-theme-theme_"] .cr-prof-card {
	background: rgba(20,27,45,0.28) !important;
	backdrop-filter: blur(12px) saturate(115%);
	-webkit-backdrop-filter: blur(12px) saturate(115%);
}
body[class*="cr-theme-theme_"] .cr-dash-widget-pvp {
	background: linear-gradient(160deg, rgba(168,85,247,0.10), rgba(20,27,45,0.28)) !important;
}
body[class*="cr-theme-theme_"] .cr-dash-pvp-row,
body[class*="cr-theme-theme_"] .cr-dash-pos-row,
body[class*="cr-theme-theme_"] .cr-dash-ach-tile {
	background: rgba(11,16,32,0.30) !important;
}

/* ── Simulator hero + panels ──────────────────────────────────────── */
body[class*="cr-theme-theme_"] .cr-sim-hero {
	background: rgba(11,16,32,0.28) !important;
	backdrop-filter: blur(14px) saturate(118%);
	-webkit-backdrop-filter: blur(14px) saturate(118%);
}
body[class*="cr-theme-theme_"] .cr-sim-streak {
	background: rgba(255,107,40,0.10) !important;
	backdrop-filter: blur(8px);
}
body[class*="cr-theme-theme_"] .cr-sim-equity {
	background: rgba(52,120,246,0.10) !important;
	backdrop-filter: blur(8px);
}
body[class*="cr-theme-theme_"] .cr-sim-pos-card,
body[class*="cr-theme-theme_"] .cr-sim-section,
body[class*="cr-theme-theme_"] .cr-sim-card,
body[class*="cr-theme-theme_"] .cr-sim-panel,
body[class*="cr-theme-theme_"] .cr-sim-quest-card,
body[class*="cr-theme-theme_"] .cr-sim-achv,
body[class*="cr-theme-theme_"] .cr-sim-leaderboard-row {
	background: rgba(11,16,32,0.32) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

/* ── Arena hub ────────────────────────────────────────────────────── */
body[class*="cr-theme-theme_"] .cr-arena-cta,
body[class*="cr-theme-theme_"] .cr-arena-action-card,
body[class*="cr-theme-theme_"] .cr-arena-match,
body[class*="cr-theme-theme_"] .cr-arena-incoming-row,
body[class*="cr-theme-theme_"] .cr-arena-friend-card,
body[class*="cr-theme-theme_"] .cr-arena-friends-card,
body[class*="cr-theme-theme_"] .cr-arena-stats-card {
	background: rgba(20,27,45,0.28) !important;
	backdrop-filter: blur(12px) saturate(115%);
	-webkit-backdrop-filter: blur(12px) saturate(115%);
}
body[class*="cr-theme-theme_"] .cr-arena-match.is-won {
	background: linear-gradient(90deg, rgba(0,245,160,0.14), rgba(20,27,45,0.28)) !important;
}
body[class*="cr-theme-theme_"] .cr-arena-match.is-lost {
	background: linear-gradient(90deg, rgba(255,77,109,0.14), rgba(20,27,45,0.28)) !important;
}

/* ── PvP battle / match screen ────────────────────────────────────── */
body[class*="cr-theme-theme_"] .cr-bm-card,
body[class*="cr-theme-theme_"] .cr-bm-side,
body[class*="cr-theme-theme_"] .cr-bm-stat,
body[class*="cr-theme-theme_"] .cr-bm-trade-row,
body[class*="cr-theme-theme_"] .cr-bm-feed,
body[class*="cr-theme-theme_"] .cr-bm-summary {
	background: rgba(20,27,45,0.28) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

/* ── Leaderboards ─────────────────────────────────────────────────── */
body[class*="cr-theme-theme_"] .cr-lb-board,
body[class*="cr-theme-theme_"] .cr-lb-card,
body[class*="cr-theme-theme_"] .cr-lb-row,
body[class*="cr-theme-theme_"] .cr-lb-podium-card,
body[class*="cr-theme-theme_"] .cr-lb-header {
	background: rgba(20,27,45,0.28) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

/* ── Glassy borders pick up the theme accent automatically ────────── */
body[class*="cr-theme-theme_"] .cr-hub,
body[class*="cr-theme-theme_"] .cr-dash-widget,
body[class*="cr-theme-theme_"] .cr-prof-card,
body[class*="cr-theme-theme_"] .cr-arena-action-card,
body[class*="cr-theme-theme_"] .cr-arena-match,
body[class*="cr-theme-theme_"] .cr-arena-friend-card,
body[class*="cr-theme-theme_"] .cr-bm-card,
body[class*="cr-theme-theme_"] .cr-sim-hero,
body[class*="cr-theme-theme_"] .cr-sim-pos-card,
body[class*="cr-theme-theme_"] .cr-lb-card,
body[class*="cr-theme-theme_"] .cr-lb-board {
	border-color: rgba(255,255,255,0.10);
}

/* ── Preview mode — same body class is set by the /coins/ shop while a
 *    preview modal is open. Intentionally NO animation override here:
 *    a previous version forced `animation-duration: 1.2s !important` on
 *    every atmosphere ::before in preview mode, which made each theme's
 *    animation cycle ~10–20× faster than its real cadence (gold sheen
 *    flashing every 1.2s instead of every 26s, matrix rain in <2s, etc).
 *    The atmosphere should run at the same speed in the preview as on
 *    the actual themed pages. ── */