/* ============================================================================
   LOADING SCREEN (must render before JS loads)
   ============================================================================ */

#loading-screen {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: linear-gradient(160deg, #020810 0%, #051020 40%, #030815 100%);
	font-family: "Changa", "Segoe UI", sans-serif;
	transition: opacity 0.5s ease;
}
#loading-screen.fade-out {
	opacity: 0;
	pointer-events: none;
}
#loading-title {
	font-size: clamp(2rem, 8vw, 3.5rem);
	font-weight: 700;
	letter-spacing: clamp(2px, 0.5vw, 4px);
	margin-bottom: 32px;
	background: linear-gradient(105deg, #80ffff 0%, #00e5ff 20%, #00bcd4 45%, #b388ff 65%, #00e5ff 85%, #64ffda 100%);
	background-size: 250% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: loadTitleSweep 4s ease-in-out infinite;
	filter: drop-shadow(0 2px 12px rgba(0, 220, 255, 0.4));
}
@keyframes loadTitleSweep {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}
#loading-bar-track {
	width: min(320px, 70vw);
	height: 6px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 3px;
	overflow: hidden;
	border: 1px solid rgba(0, 180, 220, 0.2);
}
#loading-bar-fill {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, #00e5ff, #64ffda);
	border-radius: 3px;
	transition: width 0.3s ease-out;
	box-shadow: 0 0 8px rgba(0, 220, 255, 0.5);
}
#loading-status {
	margin-top: 14px;
	font-size: 0.8rem;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: rgba(200, 220, 255, 0.5);
}

/* ============================================================================
   SWARMBLITZ DESIGN SYSTEM - AAA UI TOKENS
   ============================================================================ */

:root {
	/* === BRAND COLORS === */
	--color-primary: #4CAF50;
	--color-primary-light: #7bed4c;
	--color-primary-dark: #2d7d32;
	--color-primary-glow: rgba(76, 175, 80, 0.4);
	
	--color-accent: #FFD700;
	--color-accent-light: #FFEB3B;
	--color-accent-dark: #B8860B;
	--color-accent-glow: rgba(255, 215, 0, 0.35);
	
	/* === SEMANTIC COLORS === */
	--color-success: #4CAF50;
	--color-danger: #f44336;
	--color-danger-dark: #c62828;
	--color-warning: #FF9800;
	--color-info: #2196F3;
	--color-info-dark: #1565C0;
	
	/* === UI SURFACE COLORS === */
	--surface-base: #0d1117;
	--surface-elevated: #161b22;
	--surface-panel: rgba(20, 24, 30, 0.95);
	--surface-card: rgba(28, 32, 40, 0.98);
	--surface-card-hover: rgba(40, 44, 54, 0.98);
	--surface-overlay: rgba(10, 10, 10, 0.92);
	
	/* === FLAT GAME UI SURFACES (3D beveled style) === */
	--flat-bg: #3a3a3a;
	--flat-bg-light: #4a4a4a;
	--flat-bg-dark: #2f2f2f;
	--flat-shadow: #252525;
	--flat-shadow-deep: #1f1f1f;
	--flat-border: #333333;
	
	/* === TEXT COLORS === */
	--text-primary: #ffffff;
	--text-secondary: rgba(255, 255, 255, 0.85);
	--text-muted: rgba(255, 255, 255, 0.6);
	--text-disabled: rgba(255, 255, 255, 0.35);
	--text-inverse: #1a1a1a;
	
	/* === STAT COLORS (HUD) === */
	--stat-score: #FFD700;
	--stat-kills: #FF6B6B;
	--stat-drones: #88CCFF;
	--stat-hp-high: #44ff44;
	--stat-hp-mid: #ffcc00;
	--stat-hp-low: #ff4444;
	--stat-xp: #9C27B0;
	
	/* === RARITY COLORS === */
	--rarity-basic: #9E9E9E;
	--rarity-rare: #2196F3;
	--rarity-legendary: #FFD700;
	--rarity-unique: #00BFFF;
	
	/* === TYPOGRAPHY === */
	--font-family: "Changa", "Segoe UI", sans-serif;
	--font-size-xs: 0.7rem;
	--font-size-sm: 0.8rem;
	--font-size-base: 0.9rem;
	--font-size-md: 1rem;
	--font-size-lg: 1.2rem;
	--font-size-xl: 1.4rem;
	--font-size-2xl: 1.8rem;
	--font-size-3xl: 2.2rem;
	--font-weight-normal: 400;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--letter-spacing-tight: 0.5px;
	--letter-spacing-normal: 1px;
	--letter-spacing-wide: 2px;
	--letter-spacing-wider: 3px;
	
	/* === SPACING === */
	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 12px;
	--space-lg: 16px;
	--space-xl: 20px;
	--space-2xl: 24px;
	--space-3xl: 32px;
	
	/* === BORDERS & RADII === */
	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 10px;
	--radius-xl: 16px;
	--radius-pill: 9999px;
	--border-width: 2px;
	--border-color: rgba(255, 255, 255, 0.12);
	--border-color-hover: rgba(255, 255, 255, 0.25);
	
	/* === SHADOWS & DEPTH === */
	--shadow-btn: 0 4px 0;
	--shadow-btn-sm: 0 3px 0;
	--shadow-panel: 0 8px 32px rgba(0, 0, 0, 0.4);
	--shadow-glow: 0 0 20px;
	--shadow-inset: inset 0 -3px 6px rgba(0, 0, 0, 0.2);
	
	/* === TRANSITIONS === */
	--transition-fast: 0.1s ease;
	--transition-normal: 0.2s ease;
	--transition-slow: 0.35s ease;
	--transition-bounce: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ============================================================================
   SVG ICONS (FontAwesome replacement)
   ============================================================================ */

.icon {
	width: 1em;
	height: 1em;
	fill: currentColor;
	vertical-align: -0.125em;
	display: inline-block;
}

/* ============================================================================
   FONTS
   ============================================================================ */

/* arabic */
@font-face {
	font-family: "Changa";
	font-style: normal;
	font-weight: 600;
	src: local("Changa SemiBold"), local("Changa-SemiBold"), url(8-mw6umTgtMSI5PXqVIDMRJtnKITppOI_IvcXXDNrsc.woff2) format("woff2");
	unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE80-FEFC;
}
/* latin-ext */
@font-face {
	font-family: "Changa";
	font-style: normal;
	font-weight: 600;
	src: local("Changa SemiBold"), local("Changa-SemiBold"), url(l9R1mHXzJ6oxjfw8BkQIThJtnKITppOI_IvcXXDNrsc.woff2) format("woff2");
	unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: "Changa";
	font-style: normal;
	font-weight: 600;
	src: local("Changa SemiBold"), local("Changa-SemiBold"), url(aXdbZDB08TCIBRKa7Qgu_FtXRa8TVwTICgirnJhmVJw.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* ============================================================================
   BASE STYLES
   ============================================================================ */

body, html {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	color: var(--text-primary);
	font-family: var(--font-family);
	user-select: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overscroll-behavior: none;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

canvas {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	touch-action: none;
	cursor: url("../image/game-cursor.svg") 24 24, crosshair;
	/* Opaque background prevents extra compositing pass in iframe embeds */
	background: #040810;
}

/* ============================================================================
   MAIN MENU & DEATH SCREEN BACKGROUNDS
   ============================================================================ */

#begin, #wasted {
	position: fixed;
	width: 100%;
	height: 100%;
	height: 100dvh;
	top: 0;
	left: 0;
	background:
		radial-gradient(ellipse 80% 50% at 20% 20%, rgba(0, 180, 220, 0.12), transparent 50%),
		radial-gradient(ellipse 60% 40% at 85% 25%, rgba(100, 50, 200, 0.08), transparent 45%),
		radial-gradient(ellipse 70% 50% at 75% 80%, rgba(0, 200, 255, 0.06), transparent 50%),
		radial-gradient(ellipse 50% 30% at 10% 70%, rgba(180, 100, 255, 0.06), transparent 40%),
		linear-gradient(160deg, #020810 0%, #051020 40%, #030815 100%);
	background-attachment: fixed;
	overflow: hidden;
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
	box-sizing: border-box;
}

/* Background Scene with floating elements */
.bg-scene {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.bg-scene::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(0, 180, 220, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 180, 220, 0.06) 1px, transparent 1px);
	background-size: 64px 64px;
	opacity: 0.5;
	mix-blend-mode: screen;
	pointer-events: none;
}

/* Floating Territories - Space Nebula Style */
.float-territory {
	position: absolute;
	border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
	opacity: 0.4;
	filter: blur(3px);
	box-shadow: 0 0 60px rgba(0, 200, 255, 0.15);
}

.float-territory.t1 {
	width: 320px;
	height: 280px;
	background: linear-gradient(135deg, rgba(0, 180, 220, 0.4) 0%, rgba(0, 100, 150, 0.3) 100%);
	top: -5%;
	left: 5%;
	animation: floatSpin1 20s ease-in-out infinite;
	border: 2px solid rgba(0, 200, 255, 0.3);
}

.float-territory.t2 {
	width: 260px;
	height: 240px;
	background: linear-gradient(135deg, rgba(100, 50, 180, 0.35) 0%, rgba(60, 30, 120, 0.25) 100%);
	top: 55%;
	right: 3%;
	animation: floatSpin2 25s ease-in-out infinite reverse;
	border: 2px solid rgba(150, 100, 255, 0.25);
}

.float-territory.t3 {
	width: 200px;
	height: 180px;
	background: linear-gradient(135deg, rgba(0, 220, 180, 0.3) 0%, rgba(0, 150, 130, 0.2) 100%);
	bottom: 10%;
	left: 10%;
	animation: floatSpin3 18s ease-in-out infinite;
	border: 2px solid rgba(0, 255, 200, 0.25);
}

.float-territory.t4 {
	width: 180px;
	height: 160px;
	background: linear-gradient(135deg, rgba(0, 150, 255, 0.3) 0%, rgba(0, 100, 180, 0.2) 100%);
	top: 15%;
	right: 15%;
	animation: floatSpin1 30s ease-in-out infinite reverse;
	border: 2px solid rgba(0, 180, 255, 0.2);
}

.float-territory.t5 {
	width: 140px;
	height: 130px;
	background: linear-gradient(135deg, rgba(180, 100, 255, 0.25) 0%, rgba(120, 60, 200, 0.15) 100%);
	top: 40%;
	left: 3%;
	animation: floatSpin2 22s ease-in-out infinite;
	border: 2px solid rgba(200, 150, 255, 0.2);
	opacity: 0.35;
}

.float-territory.t6 {
	width: 100px;
	height: 90px;
	background: linear-gradient(135deg, rgba(0, 255, 220, 0.2) 0%, rgba(0, 180, 160, 0.15) 100%);
	top: 70%;
	left: 40%;
	animation: floatSpin3 15s ease-in-out infinite reverse;
	border: 2px solid rgba(0, 255, 220, 0.15);
	opacity: 0.3;
}

.float-territory.t7 {
	width: 120px;
	height: 100px;
	background: linear-gradient(135deg, rgba(0, 100, 180, 0.3) 0%, rgba(0, 60, 120, 0.2) 100%);
	top: 25%;
	left: 55%;
	animation: floatSpin1 28s ease-in-out infinite;
	border: 2px solid rgba(0, 150, 220, 0.2);
	opacity: 0.3;
}

@keyframes floatSpin1 {
	0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
	25% { transform: translate(40px, -30px) rotate(90deg) scale(1.08); }
	50% { transform: translate(15px, 40px) rotate(180deg) scale(0.92); }
	75% { transform: translate(-30px, 15px) rotate(270deg) scale(1.04); }
}

@keyframes floatSpin2 {
	0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
	25% { transform: translate(-35px, 45px) rotate(-90deg) scale(1.1); }
	50% { transform: translate(25px, -20px) rotate(-180deg) scale(0.88); }
	75% { transform: translate(20px, 35px) rotate(-270deg) scale(1.05); }
}

@keyframes floatSpin3 {
	0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
	33% { transform: translate(50px, 30px) rotate(120deg) scale(1.12); }
	66% { transform: translate(-40px, -35px) rotate(240deg) scale(0.88); }
}

/* Floating Players - Space Orb Style */
.float-player {
	position: absolute;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	opacity: 0.7;
}

.float-player.p1 {
	background: radial-gradient(circle at 30% 30%, #00e5ff, #006080);
	top: 28%;
	left: 20%;
	animation: playerFloat1 16s ease-in-out infinite;
	box-shadow: 
		0 0 35px rgba(0, 220, 255, 0.5),
		inset 0 -5px 15px rgba(0,0,0,0.4);
	border: 2px solid rgba(0, 220, 255, 0.6);
}

.float-player.p2 {
	background: radial-gradient(circle at 30% 30%, #b388ff, #5e35b1);
	top: 50%;
	right: 22%;
	animation: playerFloat2 20s ease-in-out infinite;
	box-shadow: 
		0 0 35px rgba(180, 140, 255, 0.5),
		inset 0 -5px 15px rgba(0,0,0,0.4);
	border: 2px solid rgba(180, 140, 255, 0.6);
}

.float-player.p3 {
	background: radial-gradient(circle at 30% 30%, #64ffda, #00897b);
	bottom: 20%;
	left: 55%;
	animation: playerFloat3 14s ease-in-out infinite;
	box-shadow: 
		0 0 35px rgba(100, 255, 220, 0.5),
		inset 0 -5px 15px rgba(0,0,0,0.4);
	border: 2px solid rgba(100, 255, 220, 0.6);
}

.float-player.p4 {
	background: radial-gradient(circle at 30% 30%, #ff80ab, #c2185b);
	top: 65%;
	left: 12%;
	width: 45px;
	height: 45px;
	animation: playerFloat4 18s ease-in-out infinite;
	box-shadow: 
		0 0 30px rgba(255, 130, 170, 0.5),
		inset 0 -5px 15px rgba(0,0,0,0.4);
	border: 2px solid rgba(255, 130, 170, 0.6);
}

.player-drone {
	position: absolute;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: inherit;
	filter: brightness(1.4);
	top: 50%;
	left: 50%;
	margin: -7px 0 0 -7px;
}

.player-drone.d1 {
	animation: droneOrbit1 2.5s linear infinite;
}

.player-drone.d2 {
	animation: droneOrbit2 2.5s linear infinite;
}

.player-drone.d3 {
	animation: droneOrbit3 2.5s linear infinite;
}

@keyframes droneOrbit1 {
	0% { transform: rotate(0deg) translateX(30px) rotate(0deg); }
	100% { transform: rotate(360deg) translateX(30px) rotate(-360deg); }
}

@keyframes droneOrbit2 {
	0% { transform: rotate(120deg) translateX(30px) rotate(-120deg); }
	100% { transform: rotate(480deg) translateX(30px) rotate(-480deg); }
}

@keyframes droneOrbit3 {
	0% { transform: rotate(240deg) translateX(30px) rotate(-240deg); }
	100% { transform: rotate(600deg) translateX(30px) rotate(-600deg); }
}

@keyframes playerFloat1 {
	0%, 100% { transform: translate(0, 0) rotate(0deg); }
	25% { transform: translate(100px, 50px) rotate(10deg); }
	50% { transform: translate(50px, -80px) rotate(-5deg); }
	75% { transform: translate(-50px, 30px) rotate(8deg); }
}

@keyframes playerFloat2 {
	0%, 100% { transform: translate(0, 0) rotate(0deg); }
	25% { transform: translate(-80px, -40px) rotate(-8deg); }
	50% { transform: translate(40px, 70px) rotate(12deg); }
	75% { transform: translate(70px, -50px) rotate(-6deg); }
}

@keyframes playerFloat3 {
	0%, 100% { transform: translate(0, 0) rotate(0deg); }
	33% { transform: translate(-70px, 80px) rotate(15deg); }
	66% { transform: translate(90px, 40px) rotate(-10deg); }
}

@keyframes playerFloat4 {
	0%, 100% { transform: translate(0, 0) rotate(0deg); }
	20% { transform: translate(60px, -30px) rotate(-12deg); }
	40% { transform: translate(30px, 60px) rotate(8deg); }
	60% { transform: translate(-40px, 40px) rotate(-5deg); }
	80% { transform: translate(-20px, -50px) rotate(10deg); }
}

/* Particles (Stars) - Space Theme */
.bg-particles {
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: 
		/* Bright stars */
		radial-gradient(2px 2px at 8% 15%, rgba(255, 255, 255, 0.9) 50%, transparent 50%),
		radial-gradient(2px 2px at 25% 65%, rgba(255, 255, 255, 0.8) 50%, transparent 50%),
		radial-gradient(3px 3px at 45% 25%, rgba(200, 230, 255, 0.9) 50%, transparent 50%),
		radial-gradient(2px 2px at 65% 75%, rgba(255, 255, 255, 0.7) 50%, transparent 50%),
		radial-gradient(2px 2px at 80% 35%, rgba(220, 240, 255, 0.85) 50%, transparent 50%),
		radial-gradient(2px 2px at 15% 85%, rgba(255, 255, 255, 0.75) 50%, transparent 50%),
		radial-gradient(3px 3px at 55% 10%, rgba(180, 220, 255, 0.9) 50%, transparent 50%),
		radial-gradient(2px 2px at 88% 55%, rgba(255, 255, 255, 0.8) 50%, transparent 50%),
		radial-gradient(2px 2px at 35% 45%, rgba(200, 240, 255, 0.85) 50%, transparent 50%),
		radial-gradient(2px 2px at 72% 20%, rgba(255, 255, 255, 0.7) 50%, transparent 50%),
		radial-gradient(3px 3px at 92% 80%, rgba(180, 200, 255, 0.8) 50%, transparent 50%),
		radial-gradient(2px 2px at 5% 50%, rgba(255, 255, 255, 0.75) 50%, transparent 50%),
		/* Cyan accents */
		radial-gradient(2px 2px at 18% 35%, rgba(0, 220, 255, 0.5) 50%, transparent 50%),
		radial-gradient(2px 2px at 78% 60%, rgba(0, 200, 255, 0.4) 50%, transparent 50%),
		/* Purple accents */
		radial-gradient(2px 2px at 42% 72%, rgba(180, 140, 255, 0.4) 50%, transparent 50%),
		radial-gradient(2px 2px at 62% 42%, rgba(150, 100, 255, 0.35) 50%, transparent 50%);
	animation: particleDrift 120s linear infinite;
}

@keyframes particleDrift {
	0% { transform: translate(0, 0); opacity: 1; }
	50% { opacity: 0.8; }
	100% { transform: translate(-40px, -25px); opacity: 1; }
}

/* ============================================================================
   TITLE & BRANDING - SPACE THEME
   ============================================================================ */

.start-panel-title {
	margin-bottom: clamp(8px, 2vw, 16px);
	text-align: center;
}

.start-panel-title h1 {
	font-family: var(--font-family);
	font-size: clamp(1.8rem, 7vw, 3.2rem);
	font-weight: var(--font-weight-bold);
	margin: 0;
	position: relative;
	display: inline-block;
	background: linear-gradient(
		105deg, 
		#80ffff 0%, 
		#00e5ff 20%, 
		#00bcd4 45%,
		#b388ff 65%,
		#00e5ff 85%,
		#64ffda 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	letter-spacing: clamp(2px, 0.5vw, 4px);
	white-space: nowrap;
	background-size: 250% 100%;
	animation: titleSweep 6s ease-in-out infinite, titleFloat 3s ease-in-out infinite;
	text-shadow: 0 0 40px rgba(0, 220, 255, 0.4);
	filter: drop-shadow(0 2px 8px rgba(0, 220, 255, 0.3));
}

.start-panel-tagline {
	margin: var(--space-sm) 0 0;
	font-size: clamp(0.75rem, 2.5vw, 1.05rem);
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
	color: rgba(200, 220, 255, 0.8);
	animation: taglineFade 5s ease-in-out infinite;
	font-weight: var(--font-weight-semibold);
}

.start-panel-tagline span {
	color: #00e5ff;
	text-shadow: 0 0 12px rgba(0, 220, 255, 0.5);
}

.start-panel-tagline .tagline-break {
	display: block;
}

@keyframes titleSweep {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

@keyframes titleFloat {
	0%, 100% { transform: translateY(0) scale(1); }
	50% { transform: translateY(-4px) scale(1.01); }
}

@keyframes taglineFade {
	0%, 100% { opacity: 0.7; transform: translateY(0); }
	50% { opacity: 1; transform: translateY(-2px); }
}

/* ============================================================================
   START PANEL (Main Menu Card) - SPACE THEME
   ============================================================================ */

.start-panel {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(400px, 92vw);
	max-height: 90vh;
	max-height: 90dvh;
	background: linear-gradient(180deg, 
		rgba(8, 18, 35, 0.95) 0%, 
		rgba(6, 14, 28, 0.98) 50%, 
		rgba(10, 20, 38, 0.95) 100%);
	border: 1px solid rgba(0, 180, 220, 0.35);
	border-radius: 10px;
	padding: clamp(16px, 4vw, 28px);
	padding-bottom: clamp(18px, 4vw, 26px);
	box-sizing: border-box;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	z-index: 10;
	overflow-y: auto;
	box-shadow: 
		0 0 0 1px rgba(0, 220, 255, 0.08) inset,
		0 0 50px rgba(0, 200, 255, 0.12),
		0 8px 32px rgba(0, 0, 0, 0.5);
}

/* Tech corner brackets for start panel */
.start-panel::before,
.start-panel::after {
	content: '';
	position: absolute;
	width: 25px;
	height: 25px;
	border-color: rgba(0, 200, 255, 0.4);
	border-style: solid;
	z-index: 1;
	pointer-events: none;
}

.start-panel::before {
	top: 6px;
	left: 6px;
	border-width: 2px 0 0 2px;
}

.start-panel::after {
	top: 6px;
	right: 6px;
	border-width: 2px 2px 0 0;
}

/* Responsive adjustments for small screens (mobile portrait) */
@media (max-width: 480px) {
	.start-panel {
		top: 50%;
		width: 92vw;
		max-height: 85dvh;
		padding: clamp(10px, 3vw, 18px);
	}
	
	.start-btn {
		padding: 14px 16px;
		font-size: 1rem;
	}
	
	.input-group input {
		padding: 12px 14px;
		font-size: 0.9rem;
	}
	
	/* Hide decorative floating elements on small screens */
	.float-territory,
	.float-player,
	.float-particle {
		display: none;
	}
}

@media (max-height: 500px) {
	.start-panel {
		top: 50%;
		padding: 10px;
		padding-bottom: 14px;
		max-height: 92dvh;
	}

	.input-group {
		margin-bottom: 8px;
	}

	.start-btn {
		padding: 10px 16px;
		font-size: 0.9rem;
	}

	.start-btn.primary {
		margin-bottom: 6px;
	}

	.play-row {
		margin-bottom: 6px;
	}
	
	/* Hide decorative elements on short screens (landscape mobile) */
	.float-territory,
	.float-player,
	.float-particle {
		display: none;
	}
}

@media (max-height: 450px) {
	#begin {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 5px;
	}
	
	.start-panel {
		position: relative;
		top: auto;
		left: auto;
		transform: none;
		margin: 0;
		padding: 8px 12px;
		padding-bottom: 12px;
		max-height: 95dvh;
		width: min(380px, 95vw);
	}
	
	.input-group {
		margin-bottom: 6px;
	}
	
	.input-group input {
		padding: 8px 10px;
		font-size: 0.85rem;
	}
	
	.start-btn {
		padding: 10px 14px;
		font-size: 0.85rem;
	}
	
	.start-btn.primary {
		margin-bottom: 5px;
	}
	
	.start-footer {
		margin-top: 5px;
	}
}

.input-group {
	margin-bottom: 20px;
}

.input-group label {
	display: block;
	font-family: "Changa", sans-serif;
	font-size: 0.75rem;
	color: #00e5ff;
	letter-spacing: 3px;
	margin-bottom: 10px;
	text-shadow: 0 0 8px rgba(0, 220, 255, 0.3);
}

.input-group input {
	width: 100%;
	padding: 15px 18px;
	font-family: "Changa", sans-serif;
	font-size: 1rem;
	background: rgba(10, 25, 45, 0.9);
	border: 1px solid rgba(0, 180, 220, 0.3);
	border-left: 4px solid rgba(0, 200, 255, 0.6);
	border-radius: 4px;
	color: #fff;
	outline: none;
	transition: all 0.2s;
	box-sizing: border-box;
}

.input-group input:focus {
	background: rgba(15, 35, 60, 0.95);
	border-color: rgba(0, 220, 255, 0.5);
	border-left-color: #00e5ff;
	box-shadow: 0 0 15px rgba(0, 200, 255, 0.2);
}

.input-group input::placeholder {
	color: rgba(150, 180, 200, 0.6);
}

/* ============================================================================
   BUTTON SYSTEM - SPACE THEME
   ============================================================================ */

.start-btn {
	width: 100%;
	padding: var(--space-lg) var(--space-xl);
	font-family: var(--font-family);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-wide);
	border: 1px solid transparent;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	position: relative;
	text-transform: uppercase;
	overflow: hidden;
}

.start-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: rgba(255, 255, 255, 0.2);
}

.start-btn i {
	font-size: 1em;
	transition: transform 0.2s ease;
}

.start-btn:hover:not(:disabled) i {
	transform: scale(1.15);
}

/* Primary Button (Play) - Cyan glow */
.start-btn.primary {
	background: linear-gradient(180deg, rgba(0, 180, 220, 0.9) 0%, rgba(0, 140, 180, 0.95) 100%);
	border-color: rgba(0, 220, 255, 0.5);
	color: #fff;
	margin-bottom: var(--space-md);
	text-shadow: 0 1px 2px rgba(0,0,0,0.3);
	box-shadow: 
		0 0 25px rgba(0, 200, 255, 0.3),
		inset 0 1px 0 rgba(255,255,255,0.15);
}

.start-btn.primary:hover:not(:disabled) {
	background: linear-gradient(180deg, rgba(0, 200, 240, 0.95) 0%, rgba(0, 160, 200, 0.98) 100%);
	transform: translateY(-2px);
	box-shadow: 
		0 0 35px rgba(0, 220, 255, 0.4),
		0 4px 15px rgba(0,0,0,0.3),
		inset 0 1px 0 rgba(255,255,255,0.2);
}

.start-btn.primary:active:not(:disabled) {
	transform: translateY(2px);
	box-shadow: 0 0 20px rgba(0, 200, 255, 0.3);
}

/* Play Row - Play button (66%) + Modifiers button (33%) */
.play-row {
	display: flex;
	gap: var(--space-md);
	margin-bottom: var(--space-md);
}

.play-row .start-btn.primary {
	flex: 2 1 0;
	min-width: 0;
	margin-bottom: 0;
	position: relative;
}

/* Auto-level button alongside vault */
.auto-level-btn {
	padding: 10px 12px;
	font-size: 0.75rem !important;
	flex-direction: column;
	gap: 4px;
	line-height: 1;
	align-items: center;
	justify-content: center;
	background: linear-gradient(180deg, rgba(60, 140, 255, 0.2), rgba(40, 100, 200, 0.15)) !important;
	border-color: rgba(100, 180, 255, 0.3) !important;
	color: rgba(180, 220, 255, 0.9) !important;
}
.auto-level-btn:hover {
	border-color: rgba(100, 180, 255, 0.5) !important;
	background: linear-gradient(180deg, rgba(60, 140, 255, 0.3), rgba(40, 100, 200, 0.25)) !important;
}

.play-modifiers-text {
	text-align: left;
	font-size: 10px;
	font-weight: 500;
	color: rgba(180, 220, 255, 0.7);
	letter-spacing: 0.5px;
	padding: 0;
}

.play-modifiers-text:empty {
	display: none;
}

/* Modifier lock overlay */
.mod-lock-overlay {
	position: absolute;
	inset: 0;
	background: rgba(5, 10, 20, 0.8);
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	cursor: default;
	color: rgba(255, 255, 255, 0.5);
}

.mod-lock-overlay .icon {
	width: 18px;
	height: 18px;
}

.mod-lock-overlay[hidden] {
	display: none;
}

/* Modifier on/off toggle */
.mod-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 16px;
	cursor: pointer;
}

.mod-toggle-label {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: rgba(255, 255, 255, 0.6);
}

.mod-toggle input:checked ~ .mod-toggle-label,
.mod-toggle:has(input:checked) .mod-toggle-label {
	color: #00d4ff;
}

.mod-toggle input {
	opacity: 0;
	width: 0;
	height: 0;
	position: absolute;
}

.mod-toggle-slider {
	position: relative;
	width: 32px;
	height: 16px;
	flex-shrink: 0;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 8px;
	transition: background 0.2s;
}

.mod-toggle-slider::before {
	content: '';
	position: absolute;
	width: 12px;
	height: 12px;
	left: 2px;
	bottom: 2px;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	transition: transform 0.2s, background 0.2s;
}

.mod-toggle input:checked + .mod-toggle-slider {
	background: rgba(0, 200, 255, 0.4);
}

.mod-toggle input:checked + .mod-toggle-slider::before {
	transform: translateX(16px);
	background: #00d4ff;
}

/* Secondary Button (Unlocks) - Cyan/Teal Space Theme */
.start-btn.secondary {
	background: linear-gradient(180deg, rgba(15, 30, 50, 0.95) 0%, rgba(10, 22, 40, 0.98) 100%);
	border: 1px solid rgba(0, 180, 220, 0.4);
	color: #00d4ff;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.03),
		0 0 10px rgba(0, 180, 220, 0.1);
}

.start-btn.secondary:hover:not(:disabled) {
	background: linear-gradient(180deg, rgba(20, 40, 65, 0.95) 0%, rgba(15, 30, 50, 0.98) 100%);
	color: #40e8ff;
	border-color: rgba(0, 220, 255, 0.6);
	box-shadow:
		0 0 20px rgba(0, 180, 220, 0.3),
		inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Tertiary Button (Leaderboard) - Gold Space Theme */
.start-btn.tertiary {
	background: linear-gradient(180deg, rgba(25, 22, 15, 0.95) 0%, rgba(18, 16, 10, 0.98) 100%);
	border: 1px solid rgba(255, 200, 80, 0.4);
	color: #ffc850;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.03),
		0 0 10px rgba(255, 200, 80, 0.1);
}

.start-btn.tertiary:hover:not(:disabled) {
	background: linear-gradient(180deg, rgba(35, 30, 18, 0.95) 0%, rgba(25, 22, 12, 0.98) 100%);
	color: #ffd870;
	border-color: rgba(255, 220, 100, 0.6);
	box-shadow:
		0 0 20px rgba(255, 200, 80, 0.3),
		inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Quaternary Button (Skin) - Purple */
.start-btn.quaternary {
	background: linear-gradient(180deg, rgba(45, 30, 55, 0.9) 0%, rgba(35, 22, 45, 0.95) 100%);
	border-color: rgba(180, 100, 220, 0.4);
	color: #CC88FF;
	margin-top: var(--space-sm);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.start-btn.quaternary:hover:not(:disabled) {
	background: linear-gradient(180deg, rgba(55, 35, 65, 0.95) 0%, rgba(45, 28, 55, 0.98) 100%);
	color: #DD99FF;
	border-color: rgba(200, 130, 255, 0.6);
	box-shadow:
		0 0 20px rgba(180, 100, 220, 0.25),
		inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Legacy button row - now handled by .menu-grid */

.start-btn.half {
	flex: 1 1 0;
	min-width: 0;
	padding: var(--space-md) var(--space-lg);
	font-size: var(--font-size-sm);
	letter-spacing: var(--letter-spacing-normal);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	height: 48px;
	margin-top: 0;
}

/* Unlocks button takes 2/3 width when paired with Daily */
.daily-reward-btn {
	background: linear-gradient(180deg, rgba(30, 22, 10, 0.95) 0%, rgba(20, 15, 8, 0.98) 100%);
	border: 1px solid rgba(255, 200, 50, 0.4);
	color: #FFD700;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.03),
		0 0 10px rgba(255, 200, 50, 0.1);
}

.daily-reward-btn:hover:not(:disabled) {
	background: linear-gradient(180deg, rgba(40, 30, 12, 0.95) 0%, rgba(25, 20, 10, 0.98) 100%);
	color: #ffe44d;
	border-color: rgba(255, 215, 0, 0.6);
	box-shadow: 0 0 20px rgba(255, 200, 50, 0.3);
}

.daily-reward-btn:active:not(:disabled) {
	transform: translateY(2px);
	box-shadow: 0 0 10px rgba(255, 200, 50, 0.2);
}

.daily-reward-btn .icon {
	fill: #FFD700;
}

/* ============================================================================
   MODE SELECTOR - SPACE THEME
   ============================================================================ */

.mode-selector {
	margin-bottom: var(--space-md);
	padding: var(--space-md) var(--space-lg);
	background: rgba(10, 20, 38, 0.8);
	border: 1px solid rgba(180, 100, 255, 0.25);
	border-left: 4px solid rgba(180, 100, 255, 0.6);
	border-radius: 6px;
	transition: all 0.2s ease;
}

.mode-selector:hover {
	border-color: rgba(180, 100, 255, 0.4);
	box-shadow: 0 0 20px rgba(180, 100, 255, 0.1);
}

.mode-selector label {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-family: var(--font-family);
	font-size: var(--font-size-xs);
	color: #bb88ff;
	letter-spacing: var(--letter-spacing-wide);
	margin-bottom: var(--space-sm);
	text-transform: uppercase;
	font-weight: var(--font-weight-semibold);
	text-shadow: 0 0 8px rgba(180, 100, 255, 0.3);
}

.mode-selector label i {
	font-size: 0.9em;
	filter: drop-shadow(0 0 4px rgba(180, 100, 255, 0.4));
}

.mode-selector select {
	width: 100%;
	padding: var(--space-md) var(--space-md);
	padding-right: 40px;
	font-family: var(--font-family);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	background: rgba(8, 16, 32, 0.95);
	border: 2px solid rgba(180, 100, 255, 0.3);
	border-radius: 4px;
	color: #bb88ff;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23bb88ff' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	transition: all 0.2s ease;
}

.mode-selector select:hover {
	border-color: rgba(180, 100, 255, 0.5);
	box-shadow: 0 0 15px rgba(180, 100, 255, 0.15);
}

.mode-selector select:focus {
	outline: none;
	border-color: rgba(180, 100, 255, 0.6);
	box-shadow: 0 0 20px rgba(180, 100, 255, 0.2);
}

.mode-selector select option {
	background: rgba(8, 16, 32, 0.98);
	color: #bb88ff;
	padding: var(--space-sm);
}

/* ============================================================================
   DIFFICULTY SELECTOR - SPACE THEME
   ============================================================================ */

.menu-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--space-md);
}
.menu-grid .difficulty-selector {
	margin-bottom: 0;
}

.modifier-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: var(--space-sm);
	background: linear-gradient(180deg, rgba(60, 140, 255, 0.15), rgba(40, 100, 200, 0.1));
	border: 1px solid rgba(100, 180, 255, 0.25);
	border-radius: var(--radius-md);
	cursor: pointer;
	position: relative;
}
.modifier-box:hover {
	border-color: rgba(100, 180, 255, 0.45);
	background: linear-gradient(180deg, rgba(60, 140, 255, 0.25), rgba(40, 100, 200, 0.18));
}
.modifier-box-label {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: rgba(180, 220, 255, 0.8);
}
.modifier-box .play-modifiers-text {
	font-size: 9px;
	color: rgba(180, 220, 255, 0.5);
	text-align: center;
	margin-top: 2px;
}


.difficulty-selector {
	padding: var(--space-sm) var(--space-lg);
	background: rgba(10, 20, 38, 0.8);
	border: 1px solid rgba(0, 180, 220, 0.25);
	border-left: 4px solid rgba(0, 200, 255, 0.6);
	border-radius: 6px;
	transition: all 0.2s ease;
}

.difficulty-selector:hover {
	border-color: rgba(0, 200, 255, 0.4);
	box-shadow: 0 0 20px rgba(0, 200, 255, 0.1);
}

.difficulty-selector label {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-family: var(--font-family);
	font-size: var(--font-size-xs);
	color: #00e5ff;
	letter-spacing: var(--letter-spacing-wide);
	margin-bottom: var(--space-sm);
	text-transform: uppercase;
	font-weight: var(--font-weight-semibold);
	text-shadow: 0 0 8px rgba(0, 220, 255, 0.3);
}

.difficulty-selector label i {
	font-size: 0.9em;
	filter: drop-shadow(0 0 4px rgba(0, 220, 255, 0.4));
}

/* Custom difficulty dropdown */
.diff-dropdown {
	position: relative;
	width: 100%;
	font-family: var(--font-family);
	border: 1px solid rgba(0, 180, 220, 0.35);
	border-radius: 4px;
	background: rgba(8, 16, 32, 0.95);
	cursor: pointer;
	transition: all 0.2s ease;
}
.diff-dropdown:hover {
	border-color: rgba(0, 220, 255, 0.5);
	box-shadow: 0 0 15px rgba(0, 200, 255, 0.15);
}

.diff-selected {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-xs) var(--space-md);
}
.diff-selected-text {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	color: #00e5ff;
}
.diff-chevron {
	width: 16px;
	height: 16px;
	fill: rgba(0, 220, 255, 0.6);
	transition: transform 0.2s ease;
	transform: rotate(180deg);
}
.diff-dropdown.open .diff-chevron {
	transform: rotate(0deg);
}

/* Dropdown panel - opens upward to avoid clipping by .start-panel overflow */
.diff-options {
	display: none;
	position: absolute;
	bottom: 100%;
	left: -1px;
	right: -1px;
	z-index: 50;
	background: rgba(8, 16, 32, 0.98);
	border: 1px solid rgba(0, 180, 220, 0.35);
	border-bottom: none;
	border-radius: 4px 4px 0 0;
	max-height: 240px;
	overflow-y: auto;
}
.diff-dropdown.open .diff-options {
	display: block;
}

/* Individual options */
.diff-option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px var(--space-md);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	transition: background 0.15s ease;
}
.diff-option:not(.locked):hover {
	background: rgba(0, 200, 255, 0.1);
}
.diff-option.active {
	background: rgba(0, 200, 255, 0.15);
}

/* Locked options - greyed out */
.diff-option.locked {
	color: #3a4558;
	cursor: default;
	font-style: italic;
}
.diff-option.locked .diff-option-name {
	color: #3a4558;
}
.diff-lock-icon {
	width: 12px;
	height: 12px;
	fill: #3a4558;
	flex-shrink: 0;
}

.start-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.start-footer {
	margin-top: 8px;
	padding-top: 0;
	text-align: right;
	border-top: none;
}

.start-footer span {
	font-family: "Changa", sans-serif;
	font-size: 0.8rem;
	color: rgba(150, 180, 200, 0.6);
}

#error {
	color: #00e5ff !important;
}
#github svg {
	transition: all 1s;
	fill: #222;
	color: #fff;
	position: absolute;
	top: 0;
	left: 0;
	border: 0;
	width: 80px;
	height: 80px;
	transform: rotate(-90deg);
}
#github:hover svg {
	width: 160px;
	height: 160px;
}
.center {
	text-align: center;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.center img {
	display: block;
}
.scale {
	animation: scale 5s infinite ease-in-out;
}
@keyframes scale {
	0% {
		transform: scale(0.8);
	}
	50% {
		transform: scale(1);
	}
	100% {
		transform: scale(0.8);
	}
}
input, button {
	font-family: "Changa", "Sans Serif";
	font-size: 1.5rem;
	outline: none;
	border: 0;
	padding: .5rem 1rem;
	line-height: 2.5rem;
}
button {
	text-align: center;
	cursor: pointer;
}
button:active {
	transform: translateY(4px);
}
button:disabled {
	cursor: not-allowed;
}
#settings {
	background: #ededd1;
	border-bottom: 6px solid #a1a18d;
	color: #333;
}
#name::placeholder {
	color: #888;
	opacity: 1;
}
/* ============================================================================
   COLOR BUTTON VARIANTS
   ============================================================================ */

.yellow {
	background: linear-gradient(180deg, #f0f255 0%, #e0e240 100%);
	border-bottom: 5px solid #a1a130;
	color: #5a5c20;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
}
.yellow:hover:not(:disabled) {
	background: linear-gradient(180deg, #f8fa65 0%, #eef050 100%);
	box-shadow: 0 0 15px rgba(240, 240, 80, 0.3), inset 0 1px 0 rgba(255,255,255,0.4);
}
.yellow:active:not(:disabled) {
	border-bottom: 2px solid #a1a130;
	transform: translateY(3px);
}

.orange {
	background: linear-gradient(180deg, #FFA040 0%, #FF8C20 100%);
	border-bottom: 5px solid #AE4E0D;
	color: #422100;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.orange:hover:not(:disabled) {
	background: linear-gradient(180deg, #FFB060 0%, #FF9C30 100%);
	box-shadow: 0 0 15px rgba(255, 152, 0, 0.35), inset 0 1px 0 rgba(255,255,255,0.3);
}
.orange:active:not(:disabled) {
	border-bottom: 2px solid #AE4E0D;
	transform: translateY(3px);
}

.green {
	background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
	border-bottom: 5px solid var(--color-primary-dark);
	color: #2a5a1a;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.green:hover:not(:disabled) {
	background: linear-gradient(180deg, #95ff60 0%, var(--color-primary-light) 100%);
	box-shadow: 0 0 15px var(--color-primary-glow), inset 0 1px 0 rgba(255,255,255,0.3);
}
.green:active:not(:disabled) {
	border-bottom: 2px solid var(--color-primary-dark);
	transform: translateY(3px);
}

.blue {
	background: linear-gradient(180deg, #42A5F5 0%, var(--color-info) 100%);
	border-bottom: 5px solid var(--color-info-dark);
	color: var(--text-primary);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.blue:hover:not(:disabled) {
	background: linear-gradient(180deg, #5CB8FF 0%, #42A5F5 100%);
	box-shadow: 0 0 15px rgba(33, 150, 243, 0.35), inset 0 1px 0 rgba(255,255,255,0.25);
}
.blue:active:not(:disabled) {
	border-bottom: 2px solid var(--color-info-dark);
	transform: translateY(3px);
}
span {
	color: red;
}
/* ============================================================================
   DEATH SCREEN - SPACE THEME
   ============================================================================ */

#wasted {
	display: none;
	justify-content: center;
	align-items: center;
}

.death-panel {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: linear-gradient(180deg, 
		rgba(8, 18, 35, 0.98) 0%, 
		rgba(6, 14, 28, 0.99) 50%, 
		rgba(10, 20, 38, 0.98) 100%);
	border-radius: 8px;
	border: 1px solid rgba(0, 180, 220, 0.3);
	width: min(380px, 92vw);
	text-align: center;
	overflow: hidden;
	box-shadow: 
		0 0 40px rgba(0, 200, 255, 0.15),
		0 8px 32px rgba(0, 0, 0, 0.6),
		inset 0 1px 0 rgba(0, 220, 255, 0.1);
}

/* Tech corner brackets for death panel */
.death-panel::before,
.death-panel::after {
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	border-color: rgba(0, 200, 255, 0.5);
	border-style: solid;
	z-index: 10;
}

.death-panel::before {
	top: 4px;
	left: 4px;
	border-width: 2px 0 0 2px;
}

.death-panel::after {
	top: 4px;
	right: 4px;
	border-width: 2px 2px 0 0;
}

.death-header {
	background: linear-gradient(180deg, 
		rgba(220, 50, 80, 0.25) 0%, 
		rgba(180, 40, 60, 0.15) 100%);
	border-bottom: 1px solid rgba(255, 80, 100, 0.3);
	padding: var(--space-lg) var(--space-xl);
	position: relative;
}

/* Top accent bar */
.death-header::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, 
		transparent 0%, 
		rgba(255, 80, 100, 0.8) 20%, 
		rgba(255, 100, 120, 1) 50%, 
		rgba(255, 80, 100, 0.8) 80%, 
		transparent 100%);
	box-shadow: 0 0 15px rgba(255, 80, 100, 0.5);
}

/* Scan line overlay */
.death-header::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: repeating-linear-gradient(
		0deg,
		transparent,
		transparent 2px,
		rgba(0, 0, 0, 0.03) 2px,
		rgba(0, 0, 0, 0.03) 4px
	);
	pointer-events: none;
}

.death-header h1 {
	margin: 0;
	font-size: var(--font-size-2xl);
	color: #ff6b7a;
	font-family: var(--font-family);
	text-transform: uppercase;
	letter-spacing: 4px;
	text-shadow: 
		0 0 20px rgba(255, 80, 100, 0.8),
		0 0 40px rgba(255, 80, 100, 0.4),
		0 2px 4px rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	position: relative;
	z-index: 1;
}

.death-header h1 i,
.death-header h1 .icon {
	color: #ff8090;
	filter: drop-shadow(0 0 8px rgba(255, 80, 100, 0.6));
}

/* ── Dynamic death header variants ── */

/* NEW RECORD - gold celebration */
.death-header.header-record {
	background: linear-gradient(180deg,
		rgba(255, 200, 0, 0.25) 0%,
		rgba(200, 160, 0, 0.12) 100%);
	border-bottom-color: rgba(255, 215, 0, 0.4);
}
.death-header.header-record::before {
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(255, 215, 0, 0.8) 20%,
		rgba(255, 230, 80, 1) 50%,
		rgba(255, 215, 0, 0.8) 80%,
		transparent 100%);
	box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}
.death-header.header-record h1 {
	color: #FFD700;
	text-shadow:
		0 0 20px rgba(255, 215, 0, 0.8),
		0 0 40px rgba(255, 215, 0, 0.4),
		0 2px 4px rgba(0, 0, 0, 0.5);
}
.death-header.header-record h1 .icon {
	color: #FFD700;
	filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
}

/* SO CLOSE - orange motivational */
.death-header.header-soclose {
	background: linear-gradient(180deg,
		rgba(255, 160, 30, 0.25) 0%,
		rgba(200, 120, 20, 0.12) 100%);
	border-bottom-color: rgba(255, 180, 50, 0.4);
}
.death-header.header-soclose::before {
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(255, 180, 50, 0.8) 20%,
		rgba(255, 200, 80, 1) 50%,
		rgba(255, 180, 50, 0.8) 80%,
		transparent 100%);
	box-shadow: 0 0 15px rgba(255, 180, 50, 0.5);
}
.death-header.header-soclose h1 {
	color: #ffb347;
	text-shadow:
		0 0 20px rgba(255, 180, 50, 0.8),
		0 0 40px rgba(255, 180, 50, 0.4),
		0 2px 4px rgba(0, 0, 0, 0.5);
}
.death-header.header-soclose h1 .icon {
	color: #ffb347;
	filter: drop-shadow(0 0 8px rgba(255, 180, 50, 0.6));
}

/* GREAT RUN - cyan positive */
.death-header.header-great {
	background: linear-gradient(180deg,
		rgba(0, 200, 255, 0.2) 0%,
		rgba(0, 160, 200, 0.1) 100%);
	border-bottom-color: rgba(0, 220, 255, 0.4);
}
.death-header.header-great::before {
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(0, 200, 255, 0.8) 20%,
		rgba(0, 230, 255, 1) 50%,
		rgba(0, 200, 255, 0.8) 80%,
		transparent 100%);
	box-shadow: 0 0 15px rgba(0, 200, 255, 0.5);
}
.death-header.header-great h1 {
	color: #00e5ff;
	text-shadow:
		0 0 20px rgba(0, 220, 255, 0.8),
		0 0 40px rgba(0, 220, 255, 0.4),
		0 2px 4px rgba(0, 0, 0, 0.5);
}
.death-header.header-great h1 .icon {
	color: #00e5ff;
	filter: drop-shadow(0 0 8px rgba(0, 220, 255, 0.6));
}

.death-archetype {
	padding: var(--space-sm) var(--space-xl);
	text-align: center;
	background: rgba(12, 24, 45, 0.5);
	border-bottom: 1px solid rgba(0, 180, 220, 0.15);
}

.archetype-name {
	display: block;
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 2px;
}

.archetype-tagline {
	display: block;
	font-size: var(--font-size-xs);
	color: rgba(200, 220, 255, 0.5);
	font-style: italic;
	margin-top: 2px;
	letter-spacing: 0.5px;
}

.death-stats {
	display: flex;
	justify-content: space-around;
	padding: var(--space-lg) var(--space-md);
	background: rgba(12, 24, 45, 0.6);
	border-bottom: 1px solid rgba(0, 180, 220, 0.2);
	position: relative;
}

/* Scan lines for stats */
.death-stats::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: repeating-linear-gradient(
		0deg,
		transparent,
		transparent 2px,
		rgba(0, 200, 255, 0.01) 2px,
		rgba(0, 200, 255, 0.01) 4px
	);
	pointer-events: none;
}

.death-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xs);
	position: relative;
	z-index: 1;
}

.stat-label {
	font-size: var(--font-size-xs);
	color: rgba(0, 200, 255, 0.7);
	text-transform: uppercase;
	font-family: var(--font-family);
	letter-spacing: 1px;
	font-weight: var(--font-weight-semibold);
}

.stat-value {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	color: #00e5ff;
	font-family: var(--font-family);
	text-shadow: 0 0 10px rgba(0, 220, 255, 0.5);
}

.death-highlight {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: var(--space-sm) var(--space-xl);
	background: rgba(255, 200, 50, 0.08);
	border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.death-highlight .highlight-label {
	color: #ffc832;
	font-family: var(--font-family);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-shadow: 0 0 10px rgba(255, 200, 50, 0.4);
}

.death-highlight .highlight-value {
	color: rgba(255, 255, 255, 0.95);
	font-family: var(--font-family);
	font-size: var(--font-size-base);
	text-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
}

.death-currency {
	padding: var(--space-md) var(--space-xl);
	background: rgba(8, 18, 35, 0.8);
	border-bottom: 1px solid rgba(0, 180, 220, 0.15);
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--space-md);
}

.death-currency-earned {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	color: #FFD700;
	font-family: var(--font-family);
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	text-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
}

.death-currency-earned .icon {
	filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.5));
}

.death-currency-divider {
	color: rgba(0, 180, 220, 0.3);
	font-size: var(--font-size-md);
}

.death-currency-total {
	font-size: var(--font-size-sm);
	color: rgba(200, 220, 255, 0.6);
	font-family: var(--font-family);
	display: flex;
	align-items: center;
	gap: var(--space-xs);
}

.death-currency-total .icon {
	fill: #FFD700;
}

.death-currency-total span {
	color: #FFD700;
	font-weight: var(--font-weight-bold);
}

/* Soul Shards styling (replaces gold coins) */
.soul-shards .death-currency-earned {
	color: #b088ff;
	text-shadow: 0 0 15px rgba(160, 100, 255, 0.6);
}

.soul-shards .death-currency-earned .icon {
	filter: drop-shadow(0 0 6px rgba(160, 100, 255, 0.6));
}

.soul-shards .death-currency-total .icon {
	fill: #b088ff;
}

.soul-shards .death-currency-total span {
	color: #b088ff;
}

.death-killer {
	padding: var(--space-md) var(--space-xl);
	background: rgba(180, 40, 60, 0.15);
	border-bottom: 1px solid rgba(255, 80, 100, 0.2);
	font-family: var(--font-family);
}

.death-killer span {
	color: rgba(255, 180, 190, 0.6);
	font-size: var(--font-size-sm);
}

.death-killer strong {
	display: block;
	color: #ff6b7a;
	font-size: var(--font-size-md);
	margin-top: var(--space-xs);
	text-shadow: 0 0 10px rgba(255, 80, 100, 0.4);
}

.death-nearmiss {
	padding: var(--space-md) var(--space-xl);
	text-align: center;
	font-family: var(--font-family);
	border-bottom: 1px solid rgba(255, 200, 50, 0.2);
	background: rgba(255, 200, 50, 0.08);
	animation: nearMissGlow 2s ease-in-out infinite;
}

.death-nearmiss span {
	color: #ffc832;
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-bold);
	text-shadow: 0 0 12px rgba(255, 200, 50, 0.5);
}

/* Near-miss progress bar */
.nearmiss-bar-track {
	width: 80%;
	max-width: 260px;
	height: 6px;
	margin: var(--space-sm) auto 0;
	background: rgba(255, 200, 50, 0.12);
	border-radius: 3px;
	overflow: hidden;
	border: 1px solid rgba(255, 200, 50, 0.15);
}

.nearmiss-bar-fill {
	height: 100%;
	background: linear-gradient(90deg, #ffc832, #ffdd57);
	border-radius: 3px;
	box-shadow: 0 0 8px rgba(255, 200, 50, 0.5);
	transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	width: 0%;
}

@keyframes nearMissGlow {
	0%, 100% {
		background: rgba(255, 200, 50, 0.06);
		box-shadow: inset 0 0 0 rgba(255, 200, 50, 0);
	}
	50% {
		background: rgba(255, 200, 50, 0.12);
		box-shadow: inset 0 0 20px rgba(255, 200, 50, 0.06);
	}
}

.death-tip {
	padding: var(--space-sm) var(--space-xl);
	text-align: center;
	font-family: var(--font-family);
	border-bottom: 1px solid rgba(100, 180, 255, 0.2);
	background: rgba(100, 180, 255, 0.08);
}

.death-tip span {
	color: rgba(150, 210, 255, 0.9);
	font-size: var(--font-size-sm);
	line-height: 1.4;
}

.death-buttons {
	padding: var(--space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	background: rgba(6, 14, 28, 0.9);
	position: relative;
}

/* Bottom tech corners */
.death-buttons::before,
.death-buttons::after {
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	border-color: rgba(0, 200, 255, 0.5);
	border-style: solid;
}

.death-buttons::before {
	bottom: 4px;
	left: 4px;
	border-width: 0 0 2px 2px;
}

.death-buttons::after {
	bottom: 4px;
	right: 4px;
	border-width: 0 2px 2px 0;
}

.death-btn-row {
	display: flex;
	gap: var(--space-md);
	position: relative;
	z-index: 1;
}

.death-buttons button {
	font-family: var(--font-family);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: var(--space-md) var(--space-md);
	border-radius: 4px;
	background: linear-gradient(180deg, rgba(20, 40, 70, 0.9) 0%, rgba(15, 30, 55, 0.95) 100%);
	border: 1px solid rgba(0, 180, 220, 0.3);
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	transition: all 0.2s ease;
	position: relative;
	overflow: hidden;
	cursor: pointer;
}

.death-buttons button::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: rgba(0, 220, 255, 0.3);
}

.death-buttons button:hover {
	background: linear-gradient(180deg, rgba(30, 60, 100, 0.95) 0%, rgba(20, 45, 80, 0.98) 100%);
	border-color: rgba(0, 200, 255, 0.5);
	box-shadow: 0 0 20px rgba(0, 200, 255, 0.2);
}

.death-buttons button.orange {
	border-color: rgba(255, 150, 50, 0.4);
	background: linear-gradient(180deg, rgba(80, 50, 20, 0.9) 0%, rgba(60, 35, 15, 0.95) 100%);
	color: #ffb347;
	text-shadow: 0 0 8px rgba(255, 150, 50, 0.4);
}

.death-buttons button.orange i {
	color: #ff9933;
	filter: drop-shadow(0 0 4px rgba(255, 150, 50, 0.6));
}

.death-buttons button.orange::before {
	background: rgba(255, 180, 80, 0.3);
}

.death-buttons button.orange:hover {
	border-color: rgba(255, 180, 80, 0.6);
	box-shadow: 0 0 20px rgba(255, 150, 50, 0.25);
	color: #ffc570;
}

/* Again button attention pulse */
@keyframes againPulse {
	0%, 100% {
		box-shadow: 0 0 0 rgba(255, 150, 50, 0);
		border-color: rgba(255, 150, 50, 0.4);
	}
	50% {
		box-shadow: 0 0 18px rgba(255, 150, 50, 0.35);
		border-color: rgba(255, 180, 80, 0.7);
	}
}

.death-buttons button.orange.again-pulse:not(:disabled) {
	animation: againPulse 2s ease-in-out infinite;
}

.death-buttons button.orange.again-pulse:hover {
	animation: none;
}

.death-buttons button.yellow {
	border-color: rgba(255, 220, 100, 0.4);
	background: linear-gradient(180deg, rgba(70, 60, 20, 0.9) 0%, rgba(50, 45, 15, 0.95) 100%);
	color: #ffd54f;
	text-shadow: 0 0 8px rgba(255, 200, 80, 0.4);
}

.death-buttons button.yellow i {
	color: #ffcc00;
	filter: drop-shadow(0 0 4px rgba(255, 200, 80, 0.6));
}

.death-buttons button.yellow::before {
	background: rgba(255, 230, 120, 0.3);
}

.death-buttons button.yellow:hover {
	border-color: rgba(255, 230, 120, 0.6);
	box-shadow: 0 0 20px rgba(255, 220, 100, 0.25);
	color: #ffe082;
}

.death-buttons button.green {
	border-color: rgba(80, 200, 120, 0.4);
	background: linear-gradient(180deg, rgba(20, 60, 40, 0.9) 0%, rgba(15, 45, 30, 0.95) 100%);
	color: #69f0ae;
	text-shadow: 0 0 8px rgba(80, 200, 120, 0.4);
}

.death-buttons button.green i {
	color: #00e676;
	filter: drop-shadow(0 0 4px rgba(80, 200, 120, 0.6));
}

.death-buttons button.green::before {
	background: rgba(100, 220, 140, 0.3);
}

.death-buttons button.green:hover {
	border-color: rgba(100, 220, 140, 0.6);
	box-shadow: 0 0 20px rgba(80, 200, 120, 0.25);
	color: #b9f6ca;
}

.death-buttons button.blue {
	border-color: rgba(80, 150, 255, 0.4);
	background: linear-gradient(180deg, rgba(20, 40, 80, 0.9) 0%, rgba(15, 30, 60, 0.95) 100%);
	color: #82b1ff;
	text-shadow: 0 0 8px rgba(80, 150, 255, 0.4);
}

.death-buttons button.blue i {
	color: #448aff;
	filter: drop-shadow(0 0 4px rgba(80, 150, 255, 0.6));
}

.death-buttons button.blue::before {
	background: rgba(100, 180, 255, 0.3);
}

.death-buttons button.blue:hover {
	border-color: rgba(100, 180, 255, 0.6);
	box-shadow: 0 0 20px rgba(80, 150, 255, 0.25);
	color: #b3d4ff;
}

.death-buttons button.half {
	flex: 1;
}

/* Death Rank Badge */
.death-rank {
	display: inline-block;
	font-size: 1.2rem;
	font-weight: bold;
	font-family: "Changa", sans-serif;
	margin-left: 10px;
	padding: 2px 10px;
	background: rgba(0, 180, 220, 0.15);
	border: 1px solid rgba(0, 200, 255, 0.3);
	border-radius: 4px;
	color: #00e5ff;
	text-shadow: 0 0 8px rgba(0, 220, 255, 0.5);
}

/* Score stat highlight */
.death-stat.score-stat .stat-value {
	font-size: 1.5rem;
	color: #00e5ff;
	text-shadow: 0 0 15px rgba(0, 220, 255, 0.6);
}

/* Personal best score celebration */
.death-stat.score-stat.is-new-best .stat-value {
	color: #FFD700;
	text-shadow:
		0 0 15px rgba(255, 215, 0, 0.7),
		0 0 30px rgba(255, 215, 0, 0.3);
}

.death-stat.score-stat.is-new-best .stat-label {
	color: rgba(255, 215, 0, 0.8);
}

.new-best-badge {
	display: inline-block;
	font-size: 0.55rem;
	font-weight: 700;
	font-family: var(--font-family);
	color: #fff;
	background: linear-gradient(135deg, #FFD700, #FFA000);
	padding: 1px 6px;
	border-radius: 4px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	margin-left: 4px;
	vertical-align: middle;
	animation: badgePulse 1.5s ease-in-out infinite;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Death Leaderboard */
.death-leaderboard {
	padding: 10px 15px;
	background: #2a2a2a;
	border-bottom: 2px solid #222;
	max-height: 180px;
	overflow-y: auto;
}

.leaderboard-header {
	font-size: 0.85rem;
	color: #888;
	text-transform: uppercase;
	font-family: "Changa", sans-serif;
	margin-bottom: 8px;
	letter-spacing: 1px;
}

.leaderboard-empty {
	color: #666;
	font-style: italic;
	font-size: 0.85rem;
	font-family: "Changa", sans-serif;
}

.leaderboard-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.leaderboard-entry {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 8px;
	background: #333;
	border-radius: 3px;
	font-family: "Changa", sans-serif;
	font-size: 0.8rem;
}

.leaderboard-entry.top-entry {
	background: linear-gradient(90deg, rgba(255, 215, 0, 0.15), transparent);
	border-left: 2px solid #FFD700;
}

.lb-rank {
	font-weight: bold;
	min-width: 24px;
}

.lb-score {
	font-weight: bold;
	color: #00BFFF;
	min-width: 60px;
}

.lb-details {
	color: #999;
	flex: 1;
	font-size: 0.7rem;
}

.lb-diff {
	color: #666;
	font-size: 0.65rem;
	text-transform: uppercase;
}

/* ============================================================================
   LEADERBOARD PANEL - SPACE THEME
   ============================================================================ */

.leaderboard-panel-body {
	flex: 1;
	overflow-y: auto;
	padding: var(--space-lg);
	background: rgba(6, 14, 28, 0.5);
}

/* Scrollbar for leaderboard */
.leaderboard-panel-body::-webkit-scrollbar {
	width: 6px;
}

.leaderboard-panel-body::-webkit-scrollbar-track {
	background: rgba(0, 20, 40, 0.5);
}

.leaderboard-panel-body::-webkit-scrollbar-thumb {
	background: rgba(255, 200, 50, 0.4);
	border-radius: 3px;
}

.leaderboard-table-header {
	display: flex;
	padding: var(--space-md) var(--space-lg);
	background: rgba(15, 28, 50, 0.8);
	border: 1px solid rgba(0, 180, 220, 0.15);
	border-radius: 6px;
	margin-bottom: var(--space-md);
	font-family: var(--font-family);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	color: rgba(0, 200, 255, 0.6);
	text-transform: uppercase;
	letter-spacing: 1px;
}

.leaderboard-table-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.lbt-row {
	display: flex;
	padding: var(--space-md) var(--space-lg);
	background: rgba(15, 28, 50, 0.6);
	border: 1px solid rgba(0, 180, 220, 0.1);
	border-radius: 6px;
	font-family: var(--font-family);
	align-items: center;
	transition: all 0.2s ease;
}

.lbt-row:hover {
	background: rgba(20, 35, 60, 0.8);
	border-color: rgba(0, 200, 255, 0.2);
	transform: translateX(3px);
}

.lbt-row.gold {
	background: linear-gradient(90deg, rgba(255, 215, 0, 0.15), rgba(15, 28, 50, 0.6));
	border-left: 3px solid #FFD700;
	box-shadow: 0 0 20px rgba(255, 215, 0, 0.1);
}

.lbt-row.silver {
	background: linear-gradient(90deg, rgba(192, 192, 192, 0.1), rgba(15, 28, 50, 0.6));
	border-left: 3px solid #C0C0C0;
}

.lbt-row.bronze {
	background: linear-gradient(90deg, rgba(205, 127, 50, 0.1), rgba(15, 28, 50, 0.6));
	border-left: 3px solid #CD7F32;
}

.lbt-rank {
	width: 50px;
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-md);
	color: rgba(200, 220, 255, 0.9);
}

.lbt-score {
	width: 100px;
	font-weight: var(--font-weight-bold);
	color: #00e5ff;
	font-size: var(--font-size-md);
	text-shadow: 0 0 8px rgba(0, 220, 255, 0.4);
}

.lbt-level {
	width: 60px;
	color: rgba(200, 220, 255, 0.8);
}

.lbt-kills {
	width: 70px;
	color: #ff6b7a;
}

.lbt-territory {
	width: 80px;
	color: #64ffda;
}

.lbt-diff {
	width: 90px;
	color: rgba(150, 180, 200, 0.6);
	font-size: var(--font-size-sm);
}

.lbt-date {
	flex: 1;
	color: rgba(100, 130, 150, 0.5);
	font-size: var(--font-size-xs);
	text-align: right;
}

.leaderboard-empty-state {
	text-align: center;
	padding: var(--space-3xl) var(--space-xl);
	color: rgba(150, 180, 200, 0.6);
	font-family: var(--font-family);
}

.leaderboard-empty-state i {
	font-size: 3rem;
	color: rgba(0, 180, 220, 0.3);
	margin-bottom: var(--space-lg);
	display: block;
}

.leaderboard-panel-footer {
	padding: var(--space-lg) var(--space-xl);
	background: rgba(8, 16, 32, 0.8);
	border-top: 1px solid rgba(255, 215, 0, 0.15);
	display: flex;
	justify-content: flex-end;
}

.leaderboard-clear {
	padding: var(--space-sm) var(--space-lg);
	font-family: var(--font-family);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	cursor: pointer;
	border: 1px solid rgba(255, 80, 100, 0.4);
	border-radius: 4px;
	background: linear-gradient(180deg, rgba(80, 30, 40, 0.9) 0%, rgba(60, 20, 30, 0.95) 100%);
	color: #ff6b7a;
	transition: all 0.2s ease;
}

.leaderboard-clear:hover {
	border-color: rgba(255, 100, 120, 0.6);
	box-shadow: 0 0 15px rgba(255, 80, 100, 0.2);
}

/* Red/Danger button */
.red {
	background: linear-gradient(180deg, #e57373 0%, var(--color-danger) 100%);
	border-bottom: 4px solid var(--color-danger-dark);
	color: var(--text-primary);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}

.red:hover:not(:disabled) {
	background: linear-gradient(180deg, #ef9a9a 0%, #e57373 100%);
	box-shadow: 0 0 15px rgba(244, 67, 54, 0.35), inset 0 1px 0 rgba(255,255,255,0.25);
}

.red:active:not(:disabled) {
	border-bottom: 2px solid var(--color-danger-dark);
	transform: translateY(2px);
}

/* Responsive leaderboard */
@media (max-width: 600px) {
	.lbt-diff, .lbt-date {
		display: none;
	}
	
	.lbt-rank { width: 40px; }
	.lbt-score { width: 80px; }
	.lbt-level { width: 50px; }
	.lbt-kills { width: 50px; }
	.lbt-territory { width: 60px; }
}

@media (max-width: 400px) {
	.lbt-rank { width: 30px; }
	.lbt-score { width: 65px; }
	.lbt-level { width: 40px; }
	.lbt-kills { width: 40px; }
	.lbt-territory { width: 50px; }

	.leaderboard-table-header,
	.lbt-row {
		padding: var(--space-sm) var(--space-md);
		font-size: var(--font-size-xs);
	}
}

.death-buttons button i {
	margin-right: 8px;
	font-size: 1.1em;
	transition: transform 0.2s ease, filter 0.2s ease;
}

.death-buttons button:hover i {
	transform: scale(1.15);
}
/* ============================================================================
   TOGGLE BUTTON (Settings gear)
   ============================================================================ */

.toggle {
	position: fixed;
	right: 10px;
	bottom: 10px;
	z-index: 100;
	padding: var(--space-md) var(--space-md);
	font-size: var(--font-size-lg);
	border-radius: 6px;
	transition: all 0.2s ease;
	background: linear-gradient(180deg, rgba(15, 30, 55, 0.95) 0%, rgba(10, 22, 42, 0.98) 100%);
	border: 1px solid rgba(0, 180, 220, 0.4);
	color: #00e5ff;
	box-shadow: 
		0 0 15px rgba(0, 200, 255, 0.15),
		0 4px 12px rgba(0, 0, 0, 0.4);
}

.toggle:hover {
	transform: rotate(15deg);
	border-color: rgba(0, 220, 255, 0.6);
	box-shadow: 
		0 0 25px rgba(0, 200, 255, 0.25),
		0 4px 16px rgba(0, 0, 0, 0.5);
}

.toggle i {
	filter: drop-shadow(0 0 6px rgba(0, 220, 255, 0.5));
}

/* ============================================================================
   SETTINGS PANEL - SPACE THEME
   ============================================================================ */

#settings {
	position: fixed;
	left: calc(300px + (100vw - 300px) / 2);
	top: 50%;
	transform: translate(-50%, -50%);
	/* Scale with viewport: min 400px, preferred 45vw, max 800px */
	width: clamp(400px, 45vw, 800px);
	max-height: calc(100vh - 80px);
	overflow-x: hidden;
	overflow-y: auto;
	background: linear-gradient(180deg,
		rgba(8, 18, 35, 0.98) 0%,
		rgba(6, 14, 28, 0.99) 50%,
		rgba(10, 20, 38, 0.98) 100%);
	border-radius: clamp(10px, 1vw, 16px);
	border: 1px solid rgba(0, 180, 220, 0.35);
	z-index: 1001;
	padding: 0;
	will-change: transform;
	box-shadow:
		0 0 60px rgba(0, 200, 255, 0.15),
		0 0 100px rgba(0, 200, 255, 0.08),
		0 12px 40px rgba(0, 0, 0, 0.5),
		inset 0 1px 0 rgba(0, 220, 255, 0.1);
	/* Scale font size with viewport */
	font-size: clamp(14px, 1.1vw, 18px);
}

/* Scrollbar styling for settings */
#settings::-webkit-scrollbar {
	width: 6px;
}

#settings::-webkit-scrollbar-track {
	background: rgba(0, 20, 40, 0.5);
}

#settings::-webkit-scrollbar-thumb {
	background: rgba(0, 180, 220, 0.4);
	border-radius: 3px;
}

#settings::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 200, 255, 0.6);
}

.settings-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-md) var(--space-lg);
	background: rgba(12, 24, 45, 0.6);
	border-bottom: 1px solid rgba(0, 180, 220, 0.2);
	border-radius: 8px 8px 0 0;
	position: relative;
}

/* Top accent bar */
.settings-header::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, 
		transparent 0%, 
		rgba(0, 180, 220, 0.6) 20%, 
		rgba(0, 220, 255, 0.8) 50%, 
		rgba(0, 180, 220, 0.6) 80%, 
		transparent 100%);
	border-radius: 8px 8px 0 0;
}

.settings-header h2 {
	margin: 0;
	font-size: var(--font-size-lg);
	color: #00e5ff;
	font-family: var(--font-family);
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	text-shadow: 0 0 12px rgba(0, 220, 255, 0.5);
}

.settings-header h2 i {
	filter: drop-shadow(0 0 6px rgba(0, 220, 255, 0.4));
}

.settings-close {
	background: linear-gradient(180deg, rgba(80, 30, 40, 0.9) 0%, rgba(60, 20, 30, 0.95) 100%);
	border: 1px solid rgba(255, 80, 100, 0.4);
	border-radius: 4px;
	color: #ff6b7a;
	font-size: var(--font-size-md);
	padding: var(--space-xs) var(--space-md);
	cursor: pointer;
	font-family: var(--font-family);
	transition: all 0.2s ease;
	position: relative;
}

.settings-close:hover {
	background: linear-gradient(180deg, rgba(100, 40, 50, 0.95) 0%, rgba(80, 30, 40, 0.98) 100%);
	border-color: rgba(255, 100, 120, 0.6);
	box-shadow: 0 0 15px rgba(255, 80, 100, 0.25);
}

.settings-close:active {
	transform: translateY(1px);
}

.settings-header-buttons {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
}

.settings-menu-btn {
	background: linear-gradient(180deg, rgba(30, 70, 50, 0.9) 0%, rgba(20, 50, 35, 0.95) 100%);
	border: 1px solid rgba(80, 200, 120, 0.4);
	border-radius: 4px;
	color: #50d890;
	font-size: var(--font-size-sm);
	padding: var(--space-xs) var(--space-lg);
	min-width: 120px;
	cursor: pointer;
	font-family: var(--font-family);
	transition: all 0.2s ease;
}

.settings-menu-btn:hover {
	background: linear-gradient(180deg, rgba(40, 90, 60, 0.95) 0%, rgba(30, 70, 45, 0.98) 100%);
	border-color: rgba(100, 220, 140, 0.6);
	box-shadow: 0 0 15px rgba(80, 200, 120, 0.25);
}

.settings-menu-btn:active {
	transform: translateY(1px);
}

#settings-reset-btn {
	background: linear-gradient(180deg, rgba(90, 60, 30, 0.9) 0%, rgba(70, 45, 20, 0.95) 100%);
	border: 1px solid rgba(220, 150, 60, 0.4);
	color: #e8a840;
}

#settings-reset-btn:hover {
	background: linear-gradient(180deg, rgba(110, 75, 35, 0.95) 0%, rgba(90, 60, 25, 0.98) 100%);
	border-color: rgba(240, 180, 80, 0.6);
	box-shadow: 0 0 15px rgba(220, 150, 60, 0.25);
}

.settings-body {
	padding: var(--space-md);
	background: rgba(6, 14, 28, 0.5);
}

.settings-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-md);
}

/* Reorder cards: Audio (1), Quality (2), Controls & Tips (3), Display (4) */
.settings-card:nth-child(1) { order: 1; } /* Audio - top left */
.settings-card:nth-child(2) { order: 4; grid-column: 1 / -1; } /* Display - bottom, full width */
.settings-card:nth-child(3) { order: 2; } /* Quality - top right */
.settings-card:nth-child(4) { order: 3; grid-column: 1 / -1; } /* Controls & Tips - full width */

/* Force all settings cards to always be open */
.settings-card .expandable-content {
	display: block !important;
	margin-top: var(--space-md);
}

/* Hide expand/collapse icons since all sections are always open */
.settings-card .expand-icon {
	display: none;
}

/* Remove pointer cursor from headers since they're not clickable */
.settings-card .expandable-header {
	cursor: default;
}

.settings-card {
	background: linear-gradient(180deg, 
		rgba(15, 28, 50, 0.8) 0%, 
		rgba(10, 22, 42, 0.85) 100%);
	border: 1px solid rgba(0, 180, 220, 0.2);
	border-radius: 6px;
	padding: var(--space-md);
	position: relative;
	overflow: hidden;
}

/* Tech corner accents for cards */
.settings-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, 
		rgba(0, 180, 220, 0.5) 0%, 
		rgba(0, 180, 220, 0.1) 100%);
}

.settings-card h3 {
	margin: 0;
	font-size: var(--font-size-sm);
	color: #00e5ff;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-family: var(--font-family);
	font-weight: var(--font-weight-semibold);
	text-shadow: 0 0 8px rgba(0, 220, 255, 0.4);
}

.settings-card h3 i {
	color: #00d4ff;
	filter: drop-shadow(0 0 4px rgba(0, 200, 255, 0.4));
}

/* Display panel two-column layout - must be more specific than .settings-card .expandable-content */
.settings-card .expandable-content.display-columns {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	gap: var(--space-lg);
}

.display-column {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.display-column .setting-row {
	margin-bottom: 0;
}

.setting-row {
	display: flex;
	align-items: center;
	margin-bottom: var(--space-md);
	gap: var(--space-sm);
}

.setting-row label {
	flex: 1;
	min-width: 0;
	font-size: var(--font-size-sm);
	color: rgba(200, 220, 255, 0.85);
	font-family: var(--font-family);
}

.setting-row input[type="range"] {
	flex: 1;
	min-width: 0;
	height: 6px;
	-webkit-appearance: none;
	background: rgba(0, 40, 60, 0.8);
	border-radius: 3px;
	border: 1px solid rgba(0, 180, 220, 0.2);
	outline: none;
}

.setting-row input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	background: linear-gradient(180deg, #00d4ff 0%, #0088aa 100%);
	border-radius: 3px;
	border: 1px solid rgba(0, 220, 255, 0.5);
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 0 8px rgba(0, 200, 255, 0.4);
}

.setting-row input[type="range"]::-webkit-slider-thumb:hover {
	background: linear-gradient(180deg, #40e8ff 0%, #00bbdd 100%);
	box-shadow: 0 0 15px rgba(0, 220, 255, 0.6);
}

.setting-row input[type="range"]::-moz-range-thumb {
	width: 16px;
	height: 16px;
	background: linear-gradient(180deg, #00d4ff 0%, #0088aa 100%);
	border: 1px solid rgba(0, 220, 255, 0.5);
	border-radius: 3px;
	cursor: pointer;
	box-shadow: 0 0 8px rgba(0, 200, 255, 0.4);
}

.vol-value {
	flex: 0 0 42px;
	text-align: right;
	font-size: var(--font-size-sm);
	color: #00e5ff;
	font-weight: var(--font-weight-bold);
	font-family: var(--font-family);
	text-shadow: 0 0 6px rgba(0, 220, 255, 0.4);
}

/* Checkbox styling */
.checkbox-row {
	justify-content: space-between;
}

.checkbox-row label {
	flex: 1;
}

.setting-row input[type="checkbox"] {
	width: 22px;
	height: 22px;
	accent-color: #00d4ff;
	cursor: pointer;
	flex-shrink: 0;
	border-radius: 3px;
	background: rgba(0, 40, 60, 0.8);
	border: 1px solid rgba(0, 180, 220, 0.3);
}

/* Cursor color dropdown - Space theme */
.cursor-color-dropdown {
	flex: 1;
	max-width: 130px;
	padding: var(--space-sm) var(--space-md);
	background: rgba(0, 40, 60, 0.8);
	border: 1px solid rgba(0, 180, 220, 0.3);
	border-radius: 4px;
	color: rgba(200, 220, 255, 0.9);
	font-family: var(--font-family);
	font-size: var(--font-size-sm);
	cursor: pointer;
	outline: none;
	transition: all 0.2s ease;
}

.cursor-color-dropdown:hover {
	border-color: rgba(0, 220, 255, 0.5);
	background: rgba(0, 50, 70, 0.9);
}

.cursor-color-dropdown:focus {
	border-color: rgba(0, 220, 255, 0.6);
	box-shadow: 0 0 10px rgba(0, 180, 220, 0.3);
}

.cursor-color-dropdown option {
	background: rgba(10, 25, 45, 0.98);
	color: rgba(200, 220, 255, 0.9);
}

/* Resolution dropdown */
.resolution-dropdown {
	flex: 1;
	max-width: 130px;
	padding: var(--space-sm) var(--space-md);
	background: var(--flat-border);
	border: var(--border-width) solid #555;
	border-bottom: 3px solid #444;
	border-radius: var(--radius-sm);
	color: var(--text-primary);
	font-family: var(--font-family);
	font-size: var(--font-size-sm);
	cursor: pointer;
	outline: none;
}

.resolution-dropdown:hover {
	border-color: #666;
}

.resolution-dropdown:focus {
	border-color: var(--color-primary-light);
	box-shadow: 0 0 8px var(--color-primary-glow);
}

.resolution-dropdown option {
	background: var(--flat-border);
	color: var(--text-primary);
}

.controls-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.control-item {
	background: #555;
	border-bottom: 3px solid #333;
	padding: 8px;
	text-align: center;
}

.control-key {
	display: block;
	font-size: 0.95rem;
	font-weight: bold;
	color: #FFD700;
	margin-bottom: 2px;
	font-family: "Changa", sans-serif;
}

.control-desc {
	font-size: 0.7rem;
	color: #999;
	font-family: "Changa", sans-serif;
}

.how-to-play {
	list-style: none;
	padding: 0;
	margin: 0;
}

.how-to-play li {
	padding: 5px 0;
	font-size: 0.8rem;
	color: #ccc;
	border-bottom: 1px solid #444;
	font-family: "Changa", sans-serif;
}

.how-to-play li:last-child {
	border-bottom: none;
}

.how-to-play strong {
	color: #7fed4c;
}

/* ============================================================================
   SETTINGS NAVIGATION & EXPANDABLE SECTIONS - SPACE THEME
   ============================================================================ */

.settings-nav {
	padding: var(--space-md);
	background: rgba(8, 16, 32, 0.6);
}

.settings-nav-top {
	border-bottom: 1px solid rgba(0, 180, 220, 0.15);
}

.settings-nav-bottom {
	border-top: 1px solid rgba(0, 180, 220, 0.15);
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.settings-nav .menu {
	width: 100%;
	font-size: var(--font-size-sm);
	border-radius: 4px;
	background: linear-gradient(180deg, rgba(60, 50, 20, 0.9) 0%, rgba(45, 38, 15, 0.95) 100%);
	border: 1px solid rgba(255, 200, 80, 0.4);
	color: #ffd54f;
	transition: all 0.2s ease;
}

.settings-nav .menu:hover {
	border-color: rgba(255, 220, 100, 0.6);
	box-shadow: 0 0 15px rgba(255, 200, 80, 0.25);
}

.settings-nav .menu i {
	filter: drop-shadow(0 0 4px rgba(255, 200, 80, 0.4));
}

.settings-hint {
	font-size: var(--font-size-xs);
	color: var(--text-muted);
	margin: var(--space-sm) 0 var(--space-sm);
	font-style: italic;
}

/* Controls & Tips card styles */
.controls-tips-content {
	display: flex !important;
	flex-direction: column !important;
	gap: var(--space-md);
}

.tips-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.tips-group-label {
	font-size: var(--font-size-xs);
	color: #00e5ff;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: var(--font-weight-semibold);
	margin-bottom: var(--space-xs);
	padding-bottom: var(--space-xs);
	border-bottom: 1px solid rgba(0, 180, 220, 0.15);
}

.tip-item {
	font-size: var(--font-size-sm);
	color: rgba(200, 220, 255, 0.85);
	line-height: 1.4;
	padding: var(--space-xs) 0;
}

.tip-key {
	display: inline-block;
	background: rgba(0, 180, 220, 0.15);
	border: 1px solid rgba(0, 180, 220, 0.3);
	border-radius: 3px;
	padding: 1px 6px;
	font-size: var(--font-size-xs);
	color: #00e5ff;
	font-family: var(--font-family);
	font-weight: var(--font-weight-semibold);
	margin-right: var(--space-xs);
	min-width: 60px;
	text-align: center;
}

/* Keybinding UI */
.keybind-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-sm);
	margin-bottom: var(--space-sm);
}

.keybind-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-xs) var(--space-sm);
	background: rgba(0, 30, 50, 0.4);
	border-radius: 4px;
	border: 1px solid rgba(0, 180, 220, 0.1);
}

.keybind-action {
	font-size: var(--font-size-sm);
	color: rgba(200, 220, 255, 0.85);
	font-family: var(--font-family);
}

.keybind-key {
	min-width: 56px;
	padding: var(--space-xs) var(--space-sm);
	background: rgba(0, 40, 60, 0.8);
	border: 1px solid rgba(0, 180, 220, 0.3);
	border-radius: 4px;
	color: #00e5ff;
	font-family: var(--font-family);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	text-align: center;
	cursor: pointer;
	transition: all 0.2s ease;
	text-shadow: 0 0 6px rgba(0, 220, 255, 0.4);
}

.keybind-key:hover {
	border-color: rgba(0, 220, 255, 0.5);
	background: rgba(0, 50, 70, 0.9);
	box-shadow: 0 0 10px rgba(0, 180, 220, 0.3);
}

.keybind-key.listening {
	border-color: rgba(255, 200, 80, 0.6);
	background: rgba(60, 40, 10, 0.8);
	color: #ffd54f;
	animation: keybind-pulse 1s ease-in-out infinite;
	text-shadow: 0 0 8px rgba(255, 200, 80, 0.5);
}

.keybind-key.keybind-error {
	border-color: rgba(255, 80, 100, 0.6);
	color: #ff6b7a;
	text-shadow: 0 0 8px rgba(255, 80, 100, 0.4);
}

@keyframes keybind-pulse {
	0%, 100% { box-shadow: 0 0 8px rgba(255, 200, 80, 0.3); }
	50% { box-shadow: 0 0 16px rgba(255, 200, 80, 0.6); }
}

.keybind-reset {
	width: 100%;
	padding: var(--space-xs) var(--space-md);
	margin-bottom: var(--space-md);
	background: linear-gradient(180deg, rgba(60, 50, 20, 0.7) 0%, rgba(45, 38, 15, 0.8) 100%);
	border: 1px solid rgba(255, 200, 80, 0.3);
	border-radius: 4px;
	color: #ffd54f;
	font-family: var(--font-family);
	font-size: var(--font-size-sm);
	cursor: pointer;
	transition: all 0.2s ease;
}

.keybind-reset:hover {
	background: linear-gradient(180deg, rgba(80, 65, 25, 0.8) 0%, rgba(60, 50, 20, 0.9) 100%);
	border-color: rgba(255, 200, 80, 0.5);
	box-shadow: 0 0 12px rgba(255, 200, 80, 0.2);
}

.quality-options {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-sm);
}

.quality-options .setting-row {
	margin-bottom: 0;
}

/* Expandable sections - Space theme */
.expandable-header {
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	user-select: none;
	padding: var(--space-xs) 0;
	transition: all 0.2s ease;
}

.expandable-header:hover {
	color: #40e8ff;
}

.expandable-header:hover h3 {
	text-shadow: 0 0 12px rgba(0, 220, 255, 0.6);
}

.expandable-header h3 {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.expand-icon {
	font-size: var(--font-size-xs);
	transition: transform 0.2s ease;
	color: rgba(0, 200, 255, 0.5);
}

.expandable.open .expand-icon {
	transform: rotate(180deg);
	color: #00e5ff;
	filter: drop-shadow(0 0 4px rgba(0, 220, 255, 0.5));
}

.expandable-content {
	margin-top: var(--space-md);
	animation: fadeSlideIn 0.2s ease-out;
}

@keyframes fadeSlideIn {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.expandable:not(.open) .expandable-content {
	display: none;
}

.settings-footer {
	padding: var(--space-sm) var(--space-sm) 0;
	text-align: center;
	font-size: var(--font-size-xs);
	color: var(--text-disabled);
	background: transparent;
	font-family: var(--font-family);
}

/* ============================================================================
   SETTINGS PANEL - MOBILE RESPONSIVE
   ============================================================================ */

@media (max-width: 700px) {
	#settings {
		left: 50%;
	}
}

@media (max-width: 600px) {
	#settings {
		width: calc(100vw - 20px);
		right: auto;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		max-height: calc(100vh - 60px);
		font-size: 16px;
	}

	.settings-header {
		padding: var(--space-md) var(--space-lg);
	}

	.settings-header h2 {
		font-size: 18px;
	}

	.settings-card h3 {
		font-size: 14px;
	}

	.settings-body {
		padding: var(--space-sm);
	}

	.settings-grid {
		grid-template-columns: 1fr;
		gap: var(--space-sm);
	}

	/* Reset card ordering on mobile - stack naturally */
	.settings-card:nth-child(1),
	.settings-card:nth-child(2),
	.settings-card:nth-child(3),
	.settings-card:nth-child(4) {
		order: unset;
		grid-column: auto;
	}

	.settings-card {
		padding: var(--space-sm);
	}

	/* Stack display columns vertically on mobile */
	.display-columns {
		flex-direction: column;
		gap: var(--space-sm);
	}

	.setting-row {
		flex-wrap: wrap;
		gap: var(--space-xs);
		padding: var(--space-sm) 0;
	}

	.setting-row label {
		font-size: 14px;
		flex: 1 0 100%;
		margin-bottom: var(--space-xs);
	}

	.setting-row input[type="range"] {
		flex: 1 1 auto;
		min-width: 100px;
		height: 8px;
	}

	.setting-row input[type="checkbox"] {
		width: 20px;
		height: 20px;
	}

	.vol-value {
		flex: 0 0 auto;
		min-width: 42px;
	}

	.checkbox-row label {
		flex: 1;
	}

	.cursor-color-dropdown {
		max-width: none;
		flex: 1;
	}

	.settings-nav {
		padding: var(--space-sm);
	}

	.settings-nav .menu {
		font-size: var(--font-size-xs);
		padding: var(--space-sm) var(--space-md);
	}
}

@media (max-width: 400px) {
	#settings {
		width: calc(100vw - 10px);
		font-size: 15px;
	}

	.settings-header h2 {
		font-size: 16px;
	}

	.settings-card h3 {
		font-size: 13px;
	}

	.setting-row label {
		font-size: 13px;
	}

	.setting-row input[type="checkbox"] {
		width: 18px;
		height: 18px;
	}
}

@media (max-height: 500px) {
	#settings {
		max-height: calc(100vh - 40px);
	}

	.settings-card {
		padding: var(--space-xs);
	}

	.settings-body {
		padding: var(--space-xs);
	}

	.settings-nav {
		padding: var(--space-xs);
	}
}

/* Large screens / fullscreen scaling */
@media (min-width: 1400px) {
	#settings {
		width: clamp(600px, 40vw, 900px);
		font-size: clamp(16px, 1.2vw, 22px);
		border-radius: clamp(12px, 1.2vw, 20px);
	}

	.settings-header {
		padding: clamp(16px, 1.5vw, 28px) clamp(20px, 2vw, 36px);
	}

	.settings-header h2 {
		font-size: clamp(20px, 1.8vw, 32px);
	}

	.settings-body {
		padding: clamp(16px, 1.5vw, 28px);
	}

	.settings-card {
		padding: clamp(14px, 1.2vw, 24px);
		border-radius: clamp(8px, 0.8vw, 14px);
	}

	.settings-card h3 {
		font-size: clamp(14px, 1.1vw, 20px);
	}

	.setting-row label {
		font-size: clamp(14px, 1vw, 18px);
	}

	.settings-close {
		font-size: clamp(16px, 1.2vw, 24px);
		padding: clamp(6px, 0.5vw, 12px) clamp(12px, 1vw, 20px);
	}

	.settings-menu-btn {
		font-size: clamp(14px, 1vw, 18px);
		padding: clamp(6px, 0.5vw, 12px) clamp(16px, 1.2vw, 28px);
		min-width: clamp(120px, 10vw, 180px);
	}

	#settings-upgrades-panel {
		width: clamp(280px, 20vw, 420px);
		font-size: clamp(14px, 1.1vw, 20px);
		border-radius: clamp(8px, 0.8vw, 14px);
		left: clamp(15px, 1.5vw, 30px);
		bottom: clamp(60px, 6vh, 100px);
	}

	.settings-upgrades-header {
		padding: clamp(14px, 1.2vw, 24px);
	}

	.settings-upgrades-header h3 {
		font-size: clamp(12px, 1vw, 18px);
	}

	.settings-upgrades-list {
		padding: clamp(14px, 1.2vw, 24px);
		gap: clamp(10px, 0.8vw, 16px);
	}

	.upgrade-item {
		padding: clamp(10px, 0.8vw, 18px);
		border-radius: clamp(6px, 0.5vw, 10px);
	}

	.upgrade-item-icon {
		font-size: clamp(16px, 1.2vw, 24px);
	}

	.upgrade-item-name {
		font-size: clamp(12px, 0.9vw, 16px);
	}

	.upgrade-item-tier {
		font-size: clamp(10px, 0.7vw, 14px);
	}
}

/* Extra large screens / 4K displays */
@media (min-width: 2000px) {
	#settings {
		width: clamp(800px, 35vw, 1100px);
		font-size: clamp(18px, 1vw, 24px);
	}

	#settings-upgrades-panel {
		width: clamp(350px, 18vw, 500px);
		font-size: clamp(16px, 0.9vw, 22px);
	}
}

/* ============================================================================
   IN-GAME UPGRADES PANEL (left side) - SPACE THEME
   ============================================================================ */

#settings-upgrades-panel {
	position: fixed;
	left: clamp(10px, 1vw, 20px);
	bottom: clamp(50px, 5vh, 80px);
	/* Scale with viewport: min 220px, preferred 18vw, max 360px */
	width: clamp(220px, 18vw, 360px);
	max-height: calc(100vh - 80px);
	overflow-y: auto;
	background: linear-gradient(180deg,
		rgba(8, 18, 35, 0.95) 0%,
		rgba(6, 14, 28, 0.98) 100%);
	border-radius: clamp(6px, 0.6vw, 12px);
	border: 1px solid rgba(0, 180, 220, 0.3);
	z-index: 99;
	padding: 0;
	box-shadow:
		0 0 25px rgba(0, 200, 255, 0.1),
		0 8px 24px rgba(0, 0, 0, 0.4);
	/* Scale font size with viewport */
	font-size: clamp(12px, 1vw, 16px);
}

/* Scrollbar for upgrades panel */
#settings-upgrades-panel::-webkit-scrollbar {
	width: 5px;
}

#settings-upgrades-panel::-webkit-scrollbar-track {
	background: rgba(0, 20, 40, 0.5);
}

#settings-upgrades-panel::-webkit-scrollbar-thumb {
	background: rgba(0, 180, 220, 0.4);
	border-radius: 3px;
}

.settings-upgrades-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-md) var(--space-md);
	background: rgba(12, 24, 45, 0.6);
	border-bottom: 1px solid rgba(0, 180, 220, 0.2);
	border-radius: 8px 8px 0 0;
	position: relative;
}

/* Top accent bar */
.settings-upgrades-header::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, 
		rgba(0, 180, 220, 0.5) 0%, 
		rgba(0, 220, 255, 0.7) 50%, 
		rgba(0, 180, 220, 0.5) 100%);
	border-radius: 8px 8px 0 0;
}

.settings-upgrades-header h3 {
	margin: 0;
	font-size: var(--font-size-sm);
	color: #00e5ff;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-family: var(--font-family);
	font-weight: var(--font-weight-semibold);
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	text-shadow: 0 0 10px rgba(0, 220, 255, 0.4);
}

.settings-upgrades-header h3 i {
	filter: drop-shadow(0 0 4px rgba(0, 220, 255, 0.5));
}

.settings-upgrades-list {
	padding: var(--space-md);
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	background: rgba(6, 14, 28, 0.5);
}

.settings-upgrades-empty {
	color: rgba(0, 200, 255, 0.5);
	font-size: var(--font-size-sm);
	text-align: center;
	padding: var(--space-sm) 0;
}

.upgrade-item {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	background: rgba(15, 28, 50, 0.7);
	border: 1px solid rgba(0, 180, 220, 0.15);
	border-radius: 6px;
	padding: var(--space-sm) var(--space-md);
	cursor: default;
	transition: all 0.2s ease;
	position: relative;
}

/* Left accent line */
.upgrade-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 4px;
	width: 2px;
	background: rgba(0, 200, 255, 0.4);
	border-radius: 1px;
}

.upgrade-item:hover {
	background: rgba(20, 35, 60, 0.8);
	border-color: rgba(0, 200, 255, 0.3);
	box-shadow: 0 0 12px rgba(0, 200, 255, 0.1);
}

.upgrade-item:hover::before {
	background: rgba(0, 220, 255, 0.6);
}

.upgrade-item .upgrade-icon {
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
	background: rgba(0, 40, 60, 0.6);
	border: 1px solid rgba(0, 180, 220, 0.2);
	border-radius: 4px;
}

.upgrade-item .upgrade-name {
	flex: 1;
	font-size: var(--font-size-sm);
	color: rgba(200, 220, 255, 0.9);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.upgrade-item .upgrade-stacks {
	font-size: var(--font-size-xs);
	color: #00e5ff;
	font-weight: var(--font-weight-semibold);
	text-shadow: 0 0 6px rgba(0, 220, 255, 0.4);
}

/* ============================================================================
   AUXILIARY PANELS - MOBILE RESPONSIVE
   ============================================================================ */

@media (max-width: 600px) {
	/* Hide upgrades panel on mobile - it overlaps with settings */
	#settings-upgrades-panel {
		display: none !important;
	}
}

/* ============================================================================
   STORE MODAL - SPACE COMMAND CENTER THEME
   ============================================================================ */

.store-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(5, 10, 20, 0.85);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.store-panel {
	background: linear-gradient(180deg, 
		rgba(12, 20, 35, 0.98) 0%, 
		rgba(8, 15, 28, 0.99) 100%);
	border-radius: 12px;
	border: 1px solid rgba(180, 140, 255, 0.35);
	width: 90%;
	max-width: 680px;
	max-height: 85vh;
	display: flex;
	flex-direction: column;
	box-shadow: 
		0 0 60px rgba(140, 100, 220, 0.2),
		0 0 100px rgba(140, 100, 220, 0.1),
		0 15px 40px rgba(0, 0, 0, 0.5),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
	overflow: hidden;
	position: relative;
}

/* Animated corner brackets */
.store-panel::before,
.store-panel::after {
	content: '';
	position: absolute;
	width: 30px;
	height: 30px;
	border: 2px solid rgba(180, 140, 255, 0.4);
	pointer-events: none;
	z-index: 10;
}

.store-panel::before {
	top: 8px;
	left: 8px;
	border-right: none;
	border-bottom: none;
	border-radius: 4px 0 0 0;
}

.store-panel::after {
	bottom: 8px;
	right: 8px;
	border-left: none;
	border-top: none;
	border-radius: 0 0 4px 0;
}

.store-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px 24px;
	background: rgba(15, 25, 45, 0.8);
	border-bottom: 1px solid rgba(180, 140, 255, 0.25);
	position: relative;
}

/* Top accent glow bar */
.store-header::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, 
		transparent 0%, 
		rgba(180, 140, 255, 0.6) 20%, 
		rgba(220, 180, 255, 0.9) 50%, 
		rgba(180, 140, 255, 0.6) 80%, 
		transparent 100%);
	border-radius: 12px 12px 0 0;
}

.store-header h2 {
	margin: 0;
	font-size: 1.3rem;
	color: #d4a8ff;
	font-family: var(--font-family);
	text-transform: uppercase;
	letter-spacing: 2px;
	display: flex;
	align-items: center;
	gap: 12px;
	text-shadow: 0 0 20px rgba(180, 140, 255, 0.7);
}

.store-header h2 i {
	filter: drop-shadow(0 0 8px rgba(180, 140, 255, 0.8));
}

.store-currency {
	display: flex;
	align-items: center;
	gap: 10px;
	background: rgba(30, 25, 15, 0.8);
	padding: 10px 18px;
	border-radius: 8px;
	border: 1px solid rgba(255, 215, 0, 0.35);
	box-shadow: 
		0 0 15px rgba(255, 215, 0, 0.15),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.store-currency i {
	color: #FFD700;
	font-size: 1.2rem;
	filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
	animation: coinPulse 2s ease-in-out infinite;
}

@keyframes coinPulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.1); }
}

.store-currency span {
	color: #FFD700;
	font-size: 1.2rem;
	font-weight: 700;
	font-family: var(--font-family);
	text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* Soul Shards styling for store */
.store-currency.soul-shards {
	background: rgba(25, 15, 35, 0.8);
	border: 1px solid rgba(160, 100, 255, 0.35);
	box-shadow:
		0 0 15px rgba(160, 100, 255, 0.15),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.store-currency.soul-shards .icon {
	fill: #b088ff;
	filter: drop-shadow(0 0 8px rgba(160, 100, 255, 0.6));
	animation: soulPulse 2s ease-in-out infinite;
}

@keyframes soulPulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.1); opacity: 0.8; }
}

.store-currency.soul-shards span {
	color: #b088ff;
	text-shadow: 0 0 10px rgba(160, 100, 255, 0.5);
}

.store-close {
	background: linear-gradient(180deg, rgba(255, 80, 100, 0.9) 0%, rgba(200, 50, 70, 0.9) 100%);
	border: 1px solid rgba(255, 100, 120, 0.5);
	border-radius: 6px;
	color: #fff;
	font-size: 1rem;
	padding: 8px 14px;
	cursor: pointer;
	font-family: var(--font-family);
	transition: all 0.2s ease;
	box-shadow: 0 0 10px rgba(255, 80, 100, 0.3);
}

.store-close:hover {
	background: linear-gradient(180deg, rgba(255, 100, 120, 1) 0%, rgba(255, 80, 100, 1) 100%);
	box-shadow: 0 0 20px rgba(255, 80, 100, 0.5);
	transform: scale(1.05);
}

.store-close:active {
	transform: scale(0.98);
}

.store-tabs {
	display: flex;
	background: rgba(10, 18, 30, 0.6);
	border-bottom: 1px solid rgba(180, 140, 255, 0.15);
	padding: 0 10px;
}

.store-tab {
	flex: 1;
	padding: 14px 10px;
	background: transparent;
	border: none;
	border-bottom: 3px solid transparent;
	color: rgba(180, 160, 220, 0.6);
	font-size: 0.85rem;
	font-family: var(--font-family);
	font-weight: 600;
	cursor: pointer;
	transition: all 0.25s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	position: relative;
	white-space: nowrap;
}

.store-tab i {
	font-size: 1rem;
}

.store-tab:hover {
	color: rgba(220, 200, 255, 0.9);
	background: rgba(180, 140, 255, 0.08);
}

.store-tab.active {
	color: #d4a8ff;
	border-bottom-color: #d4a8ff;
	background: rgba(180, 140, 255, 0.12);
	text-shadow: 0 0 10px rgba(180, 140, 255, 0.5);
}

.store-tab.active i {
	filter: drop-shadow(0 0 6px rgba(180, 140, 255, 0.6));
}

/* Tab-specific colors */
.store-tab[data-tab="upgrades-page"].active {
	color: #b388ff;
	border-bottom-color: #b388ff;
}

.store-tab[data-tab="skins"].active {
	color: #88CCFF;
	border-bottom-color: #88CCFF;
}

.store-tab[data-tab="daily"].active {
	color: #FFD700;
	border-bottom-color: #FFD700;
}

.store-tab[data-tab="achievements"].active {
	color: #FFC107;
	border-bottom-color: #FFC107;
}

.store-tab[data-tab="leaderboard"].active {
	color: #FF9800;
	border-bottom-color: #FF9800;
}

/* Filter pills inside Upgrades page */
.store-filters {
	display: flex;
	gap: 6px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}

.store-filter {
	padding: 6px 14px;
	background: rgba(30, 40, 60, 0.5);
	border: 1px solid rgba(180, 140, 255, 0.15);
	border-radius: 20px;
	color: rgba(180, 160, 220, 0.6);
	font-size: 0.75rem;
	font-family: var(--font-family);
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.store-filter:hover {
	color: rgba(220, 200, 255, 0.9);
	background: rgba(180, 140, 255, 0.1);
	border-color: rgba(180, 140, 255, 0.3);
}

.store-filter.active {
	color: #d4a8ff;
	background: rgba(180, 140, 255, 0.15);
	border-color: rgba(180, 140, 255, 0.5);
	box-shadow: 0 0 8px rgba(180, 140, 255, 0.15);
}

.store-tab[data-tab="leaderboard"].active {
	color: #FF9800;
	border-bottom-color: #FF9800;
}

.store-tab[data-tab="achievements"].active {
	color: #FFC107;
	border-bottom-color: #FFC107;
}

.store-content {
	flex: 1;
	overflow-y: auto;
	padding: 20px;
	background: rgba(6, 12, 22, 0.6);
}

/* Custom scrollbar */
.store-content::-webkit-scrollbar {
	width: 6px;
}

.store-content::-webkit-scrollbar-track {
	background: rgba(20, 15, 40, 0.5);
}

.store-content::-webkit-scrollbar-thumb {
	background: rgba(180, 140, 255, 0.4);
	border-radius: 3px;
}

.store-content::-webkit-scrollbar-thumb:hover {
	background: rgba(180, 140, 255, 0.6);
}

.store-section {
	display: none;
}

.store-section.active {
	display: block;
	animation: fadeInSection 0.3s ease;
}

@keyframes fadeInSection {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

.store-items {
	gap: 8px;
}

/* Unified grid layout for all store items */
#store-all-items {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}

#store-all-items .store-item {
	display: grid;
	grid-template-columns: 48px 1fr auto;
	grid-template-rows: auto auto auto;
	grid-template-areas:
		"icon name action"
		"icon desc action"
		"icon level action";
	padding: 10px;
	min-height: 60px;
	gap: 0 10px;
	align-content: center;
	cursor: pointer;
}

#store-all-items .store-item::before {
	display: none;
}

#store-all-items .store-item:hover {
	transform: translateY(-2px);
}

#store-all-items .store-item-icon {
	grid-area: icon;
	width: 48px;
	height: 48px;
	align-self: center;
}

#store-all-items .store-item-info {
	display: contents;
}

#store-all-items .store-item-name {
	grid-area: name;
	font-size: 0.9rem;
	margin-bottom: 0;
	text-align: left;
	align-self: end;
}

#store-all-items .store-item-desc {
	grid-area: desc;
	display: block;
	font-size: 0.65rem;
	line-height: 1.3;
	text-align: left;
	color: rgba(255, 255, 255, 0.6);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-height: 1.3em;
	align-self: start;
}

#store-all-items .store-item-level {
	grid-area: level;
	font-size: 0.7rem;
	opacity: 0.7;
	text-align: left;
}

#store-all-items .store-item-action {
	grid-area: action;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	align-self: center;
	margin-top: 0;
	padding-top: 0;
	gap: 4px;
}

#store-all-items .store-buy-btn {
	padding: 4px 10px;
	font-size: 0.8rem;
	display: flex;
	align-items: center;
	gap: 4px;
}

#store-all-items .store-buy-btn .icon {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

#store-all-items .store-item-cost {
	font-size: 0.75rem;
}

#store-all-items .store-collection-divider {
	grid-column: 1 / -1;
}

#store-all-items .store-empty {
	grid-column: 1 / -1;
}

.store-activate-btn {
	padding: 4px 10px;
	border: 1px solid rgba(76, 175, 80, 0.5);
	border-radius: 6px;
	background: rgba(76, 175, 80, 0.1);
	color: #4CAF50;
	font-family: var(--font-family);
	font-size: 0.7rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.store-activate-btn:hover {
	background: rgba(76, 175, 80, 0.25);
	border-color: rgba(76, 175, 80, 0.8);
}

.store-activate-btn.activated {
	background: rgba(76, 175, 80, 0.3);
	border-color: #4CAF50;
	color: #81C784;
	box-shadow: 0 0 8px rgba(76, 175, 80, 0.3);
}

.store-activate-btn:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.store-item-icon.consumable-icon {
	background: rgba(76, 175, 80, 0.1);
	border: 2px solid rgba(76, 175, 80, 0.4);
	color: #4CAF50;
	box-shadow: 0 0 10px rgba(76, 175, 80, 0.15);
}

/* Active buffs indicator near PLAY button */
.active-buffs-indicator {
	text-align: center;
	margin-top: 4px;
	margin-bottom: -4px;
	font-size: 0.7rem;
	color: rgba(76, 175, 80, 0.9);
	font-family: var(--font-family);
}

.active-buffs-list {
	font-weight: 600;
}

.store-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	background: rgba(18, 25, 45, 0.8);
	border-radius: 10px;
	border: 1px solid rgba(180, 140, 255, 0.15);
	transition: all 0.25s ease;
	position: relative;
	overflow: hidden;
}

/* Left accent line */
.store-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 8px;
	bottom: 8px;
	width: 3px;
	background: linear-gradient(180deg, rgba(180, 140, 255, 0.6) 0%, rgba(140, 100, 220, 0.3) 100%);
	border-radius: 0 2px 2px 0;
	transition: all 0.25s ease;
}

.store-item:hover {
	background: rgba(25, 35, 60, 0.9);
	border-color: rgba(180, 140, 255, 0.35);
	transform: translateX(4px);
	box-shadow: 0 0 20px rgba(180, 140, 255, 0.1);
}

.store-item:hover::before {
	background: linear-gradient(180deg, rgba(220, 180, 255, 0.9) 0%, rgba(180, 140, 255, 0.6) 100%);
	box-shadow: 0 0 8px rgba(180, 140, 255, 0.5);
}

.store-item-icon {
	width: 44px;
	height: 44px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	flex-shrink: 0;
	position: relative;
}

.store-item-icon.drone {
	background: rgba(140, 100, 220, 0.15);
	box-shadow: 0 0 15px rgba(180, 140, 255, 0.2);
	overflow: hidden;
}

/* Border overlay on top of canvas */
.store-item-icon.drone::after {
	content: '';
	position: absolute;
	inset: 0;
	border: 2px solid;
	border-color: inherit;
	border-radius: 8px;
	pointer-events: none;
}

.drone-icon-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 6px;
}

.store-item-icon.upgrade {
	background: rgba(0, 180, 220, 0.1);
	overflow: hidden;
}

.store-item-icon.upgrade.basic {
	border: 2px solid rgba(158, 158, 158, 0.5);
	color: #bdbdbd;
}

.store-item-icon.upgrade.rare {
	border: 2px solid rgba(33, 150, 243, 0.6);
	color: #64b5f6;
	box-shadow: 0 0 15px rgba(33, 150, 243, 0.25);
}

.store-item-icon.upgrade.legendary {
	border: 2px solid rgba(255, 215, 0, 0.6);
	color: #FFD700;
	box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

.store-item-icon.reroll {
	background: rgba(255, 215, 0, 0.1);
	border: 2px solid rgba(255, 215, 0, 0.4);
	color: #ffd740;
	box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
}

.store-item-icon.boost {
	background: rgba(255, 100, 50, 0.1);
	border: 2px solid rgba(255, 100, 50, 0.5);
	color: #ff7043;
	box-shadow: 0 0 15px rgba(255, 100, 50, 0.2);
}

.store-separator {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px 0;
	margin: 8px 0;
	color: rgba(180, 160, 220, 0.6);
	font-size: 0.75rem;
	font-family: var(--font-family);
	text-transform: uppercase;
	letter-spacing: 2px;
}

.store-separator::before,
.store-separator::after {
	content: '';
	flex: 1;
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(180, 140, 255, 0.3), transparent);
	margin: 0 16px;
}

.store-separator span {
	color: #d4a8ff;
	font-weight: 600;
	text-shadow: 0 0 10px rgba(180, 140, 255, 0.4);
}

.store-upgrade-icon {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 6px;
}

.store-item-info {
	flex: 1;
	min-width: 0;
}

.store-item-name {
	font-size: 1rem;
	font-weight: 700;
	color: rgba(230, 220, 255, 0.95);
	font-family: var(--font-family);
	margin-bottom: 4px;
	text-shadow: 0 0 10px rgba(180, 140, 255, 0.2);
}

.store-item-desc {
	font-size: 0.8rem;
	color: rgba(180, 170, 210, 0.7);
	font-family: var(--font-family);
	white-space: pre-line;
	line-height: 1.5;
}

.store-item-level {
	font-size: 0.75rem;
	color: #69f0ae;
	font-family: var(--font-family);
	font-weight: 600;
	margin-top: 6px;
	text-shadow: 0 0 8px rgba(105, 240, 174, 0.4);
}

.store-item-action {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	flex-shrink: 0;
}

.store-item-cost {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #FFD700;
	font-size: 0.95rem;
	font-family: var(--font-family);
	font-weight: 700;
	text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.store-item-cost i {
	font-size: 0.85em;
	filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.5));
}

.store-buy-btn {
	padding: 10px 20px;
	font-size: 0.85rem;
	font-family: var(--font-family);
	font-weight: 700;
	cursor: pointer;
	border: none;
	border-radius: 8px;
	text-transform: uppercase;
	letter-spacing: 1px;
	transition: all 0.2s ease;
	position: relative;
	overflow: hidden;
}

.store-buy-btn.buy {
	background: linear-gradient(180deg, rgba(0, 200, 140, 0.9) 0%, rgba(0, 160, 110, 0.9) 100%);
	border: 1px solid rgba(0, 255, 180, 0.4);
	color: #fff;
	box-shadow: 0 0 15px rgba(0, 200, 140, 0.3);
}

.store-buy-btn.buy:hover {
	background: linear-gradient(180deg, rgba(0, 230, 160, 1) 0%, rgba(0, 200, 140, 1) 100%);
	box-shadow: 0 0 25px rgba(0, 255, 180, 0.5);
	transform: scale(1.05);
}

.store-buy-btn.buy:active {
	transform: scale(0.98);
}

.store-buy-btn.buy:disabled {
	background: rgba(60, 60, 80, 0.6);
	border-color: rgba(100, 100, 120, 0.3);
	color: rgba(150, 150, 170, 0.5);
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
}

.store-buy-btn.owned {
	background: rgba(30, 35, 50, 0.8);
	border: 1px solid rgba(105, 240, 174, 0.4);
	color: #69f0ae;
	cursor: default;
	text-shadow: 0 0 8px rgba(105, 240, 174, 0.4);
}

.store-buy-btn.maxed {
	background: rgba(255, 215, 0, 0.15);
	border: 1px solid rgba(255, 215, 0, 0.4);
	color: #ffd740;
	cursor: default;
	text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.store-empty {
	text-align: center;
	color: rgba(180, 160, 220, 0.5);
	padding: 60px 20px;
	font-family: var(--font-family);
	font-size: 1rem;
}

/* Collection divider */
.store-collection-divider {
	width: 100%;
	display: flex;
	align-items: center;
	margin: 24px 0 16px 0;
	padding: 0 8px;
}

.store-collection-divider::before,
.store-collection-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(140, 120, 180, 0.4), transparent);
}

.store-collection-divider span {
	padding: 0 16px;
	color: rgba(180, 160, 220, 0.7);
	font-size: 0.85rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1px;
	white-space: nowrap;
}

/* Collection items - owned items styling */
.store-item.collection-item {
	background: rgba(18, 25, 45, 0.5);
	border-color: rgba(80, 70, 120, 0.3);
	opacity: 0.85;
}

.store-item.collection-item:hover {
	background: rgba(25, 32, 55, 0.6);
	opacity: 1;
}

.store-item.collection-item::before {
	background: linear-gradient(135deg, rgba(80, 70, 120, 0.15) 0%, transparent 50%);
}

/* Collection badge */
.store-collection-badge {
	display: inline-block;
	padding: 4px 12px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-radius: 4px;
	background: rgba(200, 200, 210, 0.12);
	color: rgba(200, 200, 220, 0.8);
	border: 1px solid rgba(180, 180, 200, 0.25);
}

/* Store unlock button variant - Space themed purple */
.store.start-btn {
	background: linear-gradient(180deg, rgba(160, 100, 220, 0.95) 0%, rgba(120, 70, 180, 0.95) 100%);
	border: 1px solid rgba(180, 140, 255, 0.5);
	border-bottom: 4px solid rgba(90, 50, 140, 0.8);
	color: #fff;
	box-shadow: 0 0 20px rgba(140, 100, 220, 0.3);
}

.store.start-btn:hover:not(:disabled) {
	background: linear-gradient(180deg, rgba(180, 120, 240, 1) 0%, rgba(160, 100, 220, 1) 100%);
	box-shadow: 0 0 30px rgba(180, 140, 255, 0.5);
}

.store.start-btn:active:not(:disabled) {
	border-bottom: 2px solid rgba(90, 50, 140, 0.8);
	transform: translateY(2px);
}

/* NEW badge on store buttons when player can afford items */
#store-btn.has-new,
#death-store-btn.has-new {
	overflow: visible;
}

#store-btn.has-new::after,
#death-store-btn.has-new::after {
	content: 'NEW';
	position: absolute;
	top: -8px;
	right: -8px;
	background: #FF4444;
	color: #fff;
	font-size: 0.6rem;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 8px;
	letter-spacing: 0.5px;
	animation: badgePulse 1.5s ease-in-out infinite;
	z-index: 1;
	pointer-events: none;
}

@keyframes badgePulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.15); opacity: 0.85; }
}

/* ===== STORE DOPAMINE ENHANCEMENTS ===== */

/* Purchase pop animation */
@keyframes purchasePop {
	0% { transform: scale(1); }
	30% { transform: scale(1.08); }
	60% { transform: scale(0.98); }
	100% { transform: scale(1); }
}

@keyframes purchaseFlash {
	0% { background: rgba(105, 240, 174, 0.4); }
	100% { background: rgba(18, 25, 45, 0.8); }
}

.store-item.just-purchased {
	animation: purchasePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), purchaseFlash 0.5s ease-out;
}

/* Rarity glow system - continuous subtle animations */
@keyframes legendaryGlow {
	0%, 100% {
		box-shadow: 0 0 20px rgba(255, 215, 0, 0.3), inset 0 0 15px rgba(255, 215, 0, 0.05);
		border-color: rgba(255, 215, 0, 0.5);
	}
	50% {
		box-shadow: 0 0 35px rgba(255, 215, 0, 0.5), inset 0 0 20px rgba(255, 215, 0, 0.1);
		border-color: rgba(255, 215, 0, 0.8);
	}
}

@keyframes rareGlow {
	0%, 100% {
		box-shadow: 0 0 15px rgba(33, 150, 243, 0.25);
		border-color: rgba(33, 150, 243, 0.4);
	}
	50% {
		box-shadow: 0 0 25px rgba(33, 150, 243, 0.4);
		border-color: rgba(33, 150, 243, 0.7);
	}
}

.store-item[data-rarity="legendary"] {
	animation: legendaryGlow 2s ease-in-out infinite;
	border-color: rgba(255, 215, 0, 0.5);
}

.store-item[data-rarity="legendary"]::before {
	background: linear-gradient(180deg, rgba(255, 215, 0, 0.8) 0%, rgba(255, 180, 0, 0.4) 100%);
}

.store-item[data-rarity="rare"] {
	animation: rareGlow 2.5s ease-in-out infinite;
	border-color: rgba(33, 150, 243, 0.4);
}

.store-item[data-rarity="rare"]::before {
	background: linear-gradient(180deg, rgba(33, 150, 243, 0.7) 0%, rgba(33, 100, 200, 0.3) 100%);
}

/* Buy button pulse on hover */
@keyframes buttonPulse {
	0%, 100% { transform: scale(1.05); }
	50% { transform: scale(1.08); }
}

.store-buy-btn.buy:hover:not(:disabled) {
	animation: buttonPulse 0.8s ease-in-out infinite;
}

/* Locked item styling */
.store-item.locked {
	opacity: 0.7;
}

.store-item.locked .store-item-desc {
	color: rgba(150, 140, 180, 0.5);
	font-style: italic;
}

.store-item.locked .store-item-name::after {
	content: ' (Locked)';
	font-size: 0.7em;
	color: rgba(150, 140, 180, 0.6);
	font-weight: 400;
}

/* Currency animation support */
@keyframes currencyPop {
	0% { transform: scale(1); }
	50% { transform: scale(1.2); color: #69f0ae; }
	100% { transform: scale(1); }
}

#store-currency-value.animating {
	animation: currencyPop 0.3s ease-out;
}

/* Floating cost deduction */
@keyframes floatUp {
	0% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
	100% {
		opacity: 0;
		transform: translateY(-30px) scale(0.8);
	}
}

.currency-deduct {
	position: absolute;
	color: #ff6b6b;
	font-weight: 700;
	font-family: var(--font-family);
	pointer-events: none;
	animation: floatUp 0.8s ease-out forwards;
	text-shadow: 0 0 10px rgba(255, 100, 100, 0.5);
}

/* ===== STORE DETAIL POPUP ===== */
.store-detail-popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10001;
	display: flex;
	align-items: center;
	justify-content: center;
}

.store-detail-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(4px);
}

.store-detail-card {
	position: relative;
	width: min(280px, 90vw);
	background: linear-gradient(180deg, rgba(30, 20, 50, 0.98) 0%, rgba(20, 15, 35, 0.98) 100%);
	border-radius: 16px;
	border: 2px solid rgba(180, 140, 255, 0.4);
	padding: clamp(16px, 5vw, 24px) clamp(14px, 4vw, 20px);
	text-align: center;
	box-shadow: 0 0 40px rgba(140, 100, 220, 0.4), inset 0 0 30px rgba(100, 60, 180, 0.1);
	animation: popIn 0.25s ease-out;
}

@keyframes popIn {
	0% { transform: scale(0.8); opacity: 0; }
	100% { transform: scale(1); opacity: 1; }
}

.store-detail-close {
	position: absolute;
	top: 10px;
	right: 10px;
	background: none;
	border: none;
	color: rgba(200, 180, 255, 0.6);
	font-size: 24px;
	cursor: pointer;
	line-height: 1;
	padding: 4px 8px;
	transition: color 0.2s;
}

.store-detail-close:hover {
	color: #fff;
}

.store-detail-icon {
	position: relative;
	width: clamp(72px, 20vw, 96px);
	height: clamp(72px, 20vw, 96px);
	margin: 0 auto 16px;
	border-radius: 50%;
	border: 2px solid rgba(180, 140, 255, 0.3);
	overflow: hidden;
}

.store-detail-icon canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	border-radius: 50%;
}

.store-detail-icon .icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 56px;
	height: 56px;
	fill: currentColor;
}

.store-detail-name {
	font-size: 1.3rem;
	font-weight: 700;
	color: #fff;
	margin-bottom: 4px;
	text-shadow: 0 0 10px rgba(180, 140, 255, 0.5);
}

.store-detail-rarity {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 16px;
	opacity: 0.9;
}

.store-detail-desc {
	font-size: 0.85rem;
	color: rgba(220, 210, 255, 0.85);
	line-height: 1.5;
	margin-bottom: 20px;
	white-space: pre-line;
}

.store-detail-action {
	display: flex;
	justify-content: center;
}

.store-detail-buy {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 24px;
	font-size: 1rem;
	font-weight: 700;
	font-family: var(--font-family);
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.2s ease;
	background: linear-gradient(180deg, rgba(105, 240, 174, 0.9) 0%, rgba(70, 200, 140, 0.9) 100%);
	border: 1px solid rgba(105, 240, 174, 0.6);
	color: #1a2a1a;
	box-shadow: 0 0 15px rgba(105, 240, 174, 0.3);
}

.store-detail-buy:hover:not(:disabled) {
	transform: scale(1.05);
	box-shadow: 0 0 25px rgba(105, 240, 174, 0.5);
}

.store-detail-buy:disabled {
	background: rgba(60, 60, 80, 0.6);
	border-color: rgba(100, 100, 120, 0.3);
	color: rgba(150, 150, 170, 0.5);
	cursor: not-allowed;
	box-shadow: none;
}

.store-detail-buy .icon {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.store-detail-buy.owned {
	background: rgba(30, 35, 50, 0.8);
	border: 1px solid rgba(105, 240, 174, 0.4);
	color: #69f0ae;
	cursor: default;
}

/* Rarity-specific card borders */
.store-detail-card.rarity-basic {
	border-color: rgba(158, 158, 158, 0.5);
}

.store-detail-card.rarity-rare {
	border-color: rgba(33, 150, 243, 0.6);
	box-shadow: 0 0 40px rgba(33, 150, 243, 0.3), inset 0 0 30px rgba(33, 150, 243, 0.1);
}

.store-detail-card.rarity-legendary {
	border-color: rgba(255, 215, 0, 0.6);
	box-shadow: 0 0 40px rgba(255, 215, 0, 0.3), inset 0 0 30px rgba(255, 215, 0, 0.1);
}

/* Responsive store */
@media (max-width: 500px) {
	.store-panel {
		width: 95%;
		max-height: 90vh;
		border-radius: 10px;
	}
	
	.store-panel::before,
	.store-panel::after {
		width: 20px;
		height: 20px;
	}
	
	.store-header {
		flex-wrap: wrap;
		gap: 12px;
		padding: 14px 16px;
	}
	
	.store-header h2 {
		font-size: 1.1rem;
	}
	
	.store-tab {
		font-size: 0.8rem;
		padding: 12px 8px;
	}
	
	.store-tab i {
		font-size: 0.9rem;
	}
	
	.store-item {
		flex-wrap: wrap;
		padding: 14px 16px;
	}
	
	.store-item-icon {
		width: 44px;
		height: 44px;
		font-size: 1.2rem;
	}
	
	.store-item-action {
		width: 100%;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 12px;
		padding-top: 12px;
		border-top: 1px solid rgba(180, 140, 255, 0.1);
	}

	/* Single column grid on mobile */
	#store-all-items {
		grid-template-columns: 1fr;
	}

	#store-all-items .store-item {
		min-height: auto;
		padding: 12px;
	}
}

@media (max-width: 380px) {
	.store-header {
		padding: 10px 12px;
		gap: 8px;
	}

	.store-content {
		padding: 12px;
	}

	.store-currency {
		padding: 6px 10px;
	}

	.store-tab {
		padding: 10px 6px;
		font-size: 0.75rem;
	}
}

/* ============================================================================
   SKIN SELECTOR - SPACE THEME
   ============================================================================ */

/* Skin select button - fixed to bottom left corner (like settings toggle on right) */
.skin-select-btn {
	position: fixed;
	left: 10px;
	bottom: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	background: linear-gradient(180deg, rgba(15, 30, 55, 0.95) 0%, rgba(10, 22, 42, 0.98) 100%);
	border: 1px solid rgba(100, 140, 220, 0.4);
	border-radius: 6px;
	color: #88CCFF;
	font-family: var(--font-family);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 1px;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow:
		0 0 15px rgba(100, 140, 220, 0.15),
		0 4px 12px rgba(0, 0, 0, 0.4);
	z-index: 100;
}

.skin-select-btn:hover {
	border-color: rgba(120, 160, 240, 0.6);
	box-shadow:
		0 0 25px rgba(100, 140, 220, 0.25),
		0 4px 16px rgba(0, 0, 0, 0.5);
	transform: scale(1.05);
}

.skin-select-btn:active {
	transform: scale(0.98);
}

.skin-preview-container {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(20, 30, 50, 0.8);
	border: 1px solid rgba(80, 120, 200, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.skin-preview-circle {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: linear-gradient(135deg, #4CAF50 0%, #2d7d32 100%);
	background-size: cover;
	background-position: center;
}

.skin-preview-circle.has-image {
	background: none;
}

.skin-preview-circle.has-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

/* ============================================================================
   RUN MODIFIERS MODAL
   ============================================================================ */

.modifier-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(5, 10, 20, 0.85);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.modifier-panel {
	background: linear-gradient(180deg, rgba(12, 20, 35, 0.98) 0%, rgba(8, 15, 28, 0.99) 100%);
	border-radius: 12px;
	border: 1px solid rgba(100, 180, 255, 0.3);
	width: 90%;
	max-width: 620px;
	max-height: 85vh;
	display: flex;
	flex-direction: column;
	box-shadow: 0 0 60px rgba(60, 140, 255, 0.15), 0 15px 40px rgba(0, 0, 0, 0.5);
	overflow: hidden;
	position: relative;
}

.modifier-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	border-bottom: 1px solid rgba(100, 180, 255, 0.15);
	background: rgba(60, 140, 255, 0.05);
}

.modifier-header h2 {
	font-size: 16px;
	font-weight: 700;
	color: #e0e8f0;
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
}

.modifier-header h2 .icon {
	width: 16px;
	height: 16px;
	fill: rgba(100, 180, 255, 0.8);
}

.modifier-header-right {
	display: flex;
	align-items: center;
	gap: 12px;
}

.modifier-shard-bonus {
	font-size: 12px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 10px;
	background: rgba(100, 180, 255, 0.15);
	color: rgba(100, 200, 255, 0.9);
}

.modifier-currency {
	font-size: 12px;
	color: rgba(200, 160, 255, 0.8);
	display: flex;
	align-items: center;
	gap: 3px;
}

.modifier-currency .icon {
	width: 12px;
	height: 12px;
	fill: rgba(200, 160, 255, 0.7);
}

.modifier-close {
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.5);
	font-size: 22px;
	cursor: pointer;
	padding: 0 4px;
	line-height: 1;
}

.modifier-close:hover {
	color: rgba(255, 255, 255, 0.9);
}

/* Daily Challenge Section */
.modifier-daily-section {
	padding: 10px 18px;
	border-bottom: 1px solid rgba(100, 180, 255, 0.1);
}

.modifier-daily-card {
	background: linear-gradient(135deg, rgba(255, 180, 50, 0.1) 0%, rgba(255, 120, 50, 0.08) 100%);
	border: 1px solid rgba(255, 180, 50, 0.25);
	border-radius: 8px;
	padding: 10px 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.modifier-daily-info {
	flex: 1;
}

.modifier-daily-title {
	font-size: 13px;
	font-weight: 700;
	color: #FFB832;
	margin-bottom: 3px;
}

.modifier-daily-desc {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.6);
	line-height: 1.3;
}

.modifier-daily-completed {
	font-size: 11px;
	color: rgba(100, 255, 100, 0.8);
	font-weight: 600;
}

.modifier-daily-play {
	background: linear-gradient(180deg, #FFB832, #E6952B);
	color: #1a1a2e;
	border: none;
	border-radius: 6px;
	padding: 6px 14px;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	text-transform: uppercase;
	white-space: nowrap;
}

.modifier-daily-play:hover {
	filter: brightness(1.15);
}

.modifier-daily-play:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Modifier Grid */
.modifier-grid {
	padding: 14px 18px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	overflow-y: auto;
	max-height: 50vh;
}

.modifier-grid::-webkit-scrollbar {
	width: 4px;
}

.modifier-grid::-webkit-scrollbar-thumb {
	background: rgba(100, 180, 255, 0.2);
	border-radius: 2px;
}

.modifier-card {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	padding: 10px;
	cursor: pointer;
	transition: all 0.15s;
	position: relative;
}

.modifier-card:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.15);
}

.modifier-card.active {
	border-color: rgba(100, 220, 255, 0.6);
	background: rgba(100, 220, 255, 0.08);
	box-shadow: 0 0 12px rgba(100, 220, 255, 0.15), inset 0 0 20px rgba(100, 220, 255, 0.05);
}

.modifier-card.locked {
	opacity: 0.45;
	cursor: default;
}

.modifier-card.locked:hover {
	background: rgba(255, 255, 255, 0.03);
	border-color: rgba(255, 255, 255, 0.08);
}

.modifier-card-top {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 4px;
}

.modifier-card .modifier-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.modifier-card .modifier-icon .icon {
	width: 18px;
	height: 18px;
}

.modifier-card .modifier-name {
	font-size: 12px;
	font-weight: 600;
	color: #e0e8f0;
	flex: 1;
}

.modifier-card .modifier-desc {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.5);
	line-height: 1.3;
	margin-bottom: 4px;
}

.modifier-card .modifier-bonus {
	font-size: 10px;
	font-weight: 600;
	padding: 1px 6px;
	border-radius: 8px;
	display: inline-block;
}

.modifier-card .modifier-bonus.positive {
	background: rgba(100, 255, 100, 0.12);
	color: rgba(100, 255, 100, 0.85);
}

.modifier-card .modifier-bonus.negative {
	background: rgba(255, 100, 100, 0.12);
	color: rgba(255, 150, 100, 0.85);
}

.modifier-card .modifier-lock {
	font-size: 10px;
	color: rgba(255, 200, 100, 0.7);
	margin-top: 4px;
}

.modifier-card .modifier-buy-btn {
	background: linear-gradient(180deg, rgba(180, 140, 255, 0.3), rgba(140, 100, 220, 0.3));
	border: 1px solid rgba(180, 140, 255, 0.3);
	color: rgba(220, 200, 255, 0.9);
	border-radius: 4px;
	padding: 2px 8px;
	font-size: 10px;
	font-weight: 600;
	cursor: pointer;
	margin-top: 4px;
}

.modifier-card .modifier-buy-btn:hover {
	filter: brightness(1.2);
}

.modifier-card .modifier-buy-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Footer */
.modifier-footer {
	padding: 10px 18px;
	border-top: 1px solid rgba(100, 180, 255, 0.1);
	text-align: center;
}

.modifier-count {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
}

/* Active modifiers indicator on main menu */
.active-modifiers-indicator {
	text-align: center;
	padding: 4px 0;
	font-size: 11px;
	color: rgba(100, 200, 255, 0.7);
}

.active-modifiers-list {
	display: inline;
}

/* Death screen modifiers */
.death-modifiers {
	text-align: center;
	padding: 4px 0;
	font-size: 11px;
	color: rgba(100, 200, 255, 0.7);
}

/* Modifier button style */
.modifier-btn {
	background: linear-gradient(180deg, rgba(60, 140, 255, 0.2), rgba(40, 100, 200, 0.15)) !important;
	border-color: rgba(100, 180, 255, 0.3) !important;
	color: rgba(180, 220, 255, 0.9) !important;
}

.modifier-btn:hover {
	border-color: rgba(100, 180, 255, 0.5) !important;
	background: linear-gradient(180deg, rgba(60, 140, 255, 0.3), rgba(40, 100, 200, 0.25)) !important;
}

@media (max-width: 480px) {
	.modifier-grid {
		grid-template-columns: 1fr;
	}
	.modifier-panel {
		max-height: 90vh;
	}
}

/* Skin selector modal */
/* Skins tab inside store */
#store-skins {
	padding: var(--space-md);
}

.skin-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 16px;
}

.skin-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 16px 12px;
	background: rgba(30, 40, 60, 0.6);
	border: 2px solid rgba(80, 100, 140, 0.3);
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.skin-item:hover {
	background: rgba(40, 55, 80, 0.8);
	border-color: rgba(100, 140, 220, 0.5);
	transform: translateY(-2px);
	box-shadow: 0 4px 15px rgba(100, 140, 220, 0.2);
}

.skin-item.selected {
	background: rgba(76, 175, 80, 0.2);
	border-color: rgba(76, 175, 80, 0.6);
	box-shadow: 0 0 20px rgba(76, 175, 80, 0.3);
}

.skin-item.selected::after {
	content: '\f00c';
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	position: absolute;
	top: 8px;
	right: 8px;
	color: #4CAF50;
	font-size: 0.9rem;
	text-shadow: 0 0 8px rgba(76, 175, 80, 0.5);
}

.skin-item {
	position: relative;
}

.skin-item-preview {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: rgba(20, 30, 50, 0.8);
	border: 2px solid rgba(80, 120, 200, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
	margin-top: 20px;
}

.skin-item-preview.default {
	background: linear-gradient(135deg, #4CAF50 0%, #2d7d32 100%);
}

.skin-item-preview img {
	/* Scale to match in-game sizing (3.7x radius = ~185% of circle diameter) */
	width: 185%;
	height: 185%;
	object-fit: contain;
}

.skin-item-name {
	font-family: var(--font-family);
	font-size: 0.85rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.9);
	text-align: center;
	letter-spacing: 0.5px;
}

/* Locked skin overlay */
.skin-item.locked {
	opacity: 0.6;
}

.skin-item.locked:hover {
	opacity: 0.85;
}

.skin-item-cost {
	font-family: var(--font-family);
	font-size: 0.7rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.7);
	display: flex;
	align-items: center;
	gap: 4px;
}

.skin-item-cost .icon {
	width: 12px;
	height: 12px;
	fill: currentColor;
}

.skin-item-cost.cant-afford {
	color: rgba(255, 80, 80, 0.7);
}

/* Color skin preview circle */
.skin-item-preview.color-skin {
	border-width: 3px;
}


.skin-section-label {
	font-family: var(--font-family);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: rgba(255, 255, 255, 0.4);
	margin-bottom: 10px;
}

/* Trail grid */
.trail-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 12px;
}

.trail-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 14px 10px;
	background: rgba(30, 40, 60, 0.6);
	border: 2px solid rgba(80, 100, 140, 0.3);
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.2s ease;
	position: relative;
}

.trail-item:hover {
	background: rgba(40, 55, 80, 0.8);
	border-color: rgba(100, 140, 220, 0.5);
	transform: translateY(-2px);
	box-shadow: 0 4px 15px rgba(100, 140, 220, 0.2);
}

.trail-item.selected {
	background: rgba(76, 175, 80, 0.2);
	border-color: rgba(76, 175, 80, 0.6);
	box-shadow: 0 0 20px rgba(76, 175, 80, 0.3);
}

.trail-item.locked {
	opacity: 0.6;
}

.trail-item.locked:hover {
	opacity: 0.85;
}

.trail-item-preview {
	width: 50px;
	height: 8px;
	border-radius: 4px;
}

.trail-item-name {
	font-family: var(--font-family);
	font-size: 0.8rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.9);
	text-align: center;
}

.trail-item-cost {
	font-family: var(--font-family);
	font-size: 0.7rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.7);
	display: flex;
	align-items: center;
	gap: 4px;
}

.trail-item-cost .icon {
	width: 12px;
	height: 12px;
	fill: currentColor;
}

.trail-item-cost.cant-afford {
	color: rgba(255, 80, 80, 0.7);
}

/* Mobile responsive */
@media (max-width: 768px) {
	.skin-select-btn {
		left: 8px;
		bottom: 8px;
		padding: 8px 10px;
		font-size: 0.7rem;
	}

	.skin-preview-container {
		width: 32px;
		height: 32px;
	}

	.skin-preview-circle {
		width: 26px;
		height: 26px;
	}

	.skin-grid, .trail-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 400px) {

	.skin-grid, .trail-grid {
		gap: 10px;
	}

	.skin-item {
		padding: 12px 8px;
	}

	.skin-item-preview {
		width: 48px;
		height: 48px;
	}
}

/* Loading spinner for Play button during dynamic module import */
.play-spinner {
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 3px solid rgba(255, 255, 255, 0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: play-spin 0.6s linear infinite;
	vertical-align: middle;
	margin-right: 6px;
}

@keyframes play-spin {
	to { transform: rotate(360deg); }
}

/* ── Rotate-to-landscape overlay (mobile portrait) ── */
#rotate-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(5, 10, 20, 0.95);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	justify-content: center;
	align-items: center;
	text-align: center;
	color: #fff;
	font-family: 'Segoe UI', Arial, sans-serif;
	flex-direction: column;
}

.rotate-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.rotate-icon {
	animation: rotate-nudge 2s ease-in-out infinite;
}

.rotate-icon svg {
	filter: drop-shadow(0 0 12px rgba(100, 180, 255, 0.5));
	color: #7eb8ff;
}

#rotate-overlay p {
	font-size: 18px;
	margin: 0;
	letter-spacing: 0.5px;
	opacity: 0.9;
}

@keyframes rotate-nudge {
	0%       { transform: rotate(0deg); }
	40%      { transform: rotate(90deg); }
	70%      { transform: rotate(90deg); }
	70.01%   { transform: rotate(0deg); }
	100%     { transform: rotate(0deg); }
}

@media (orientation: portrait) and (max-width: 1024px) {
	#rotate-overlay {
		display: flex;
	}
}

/* ===== DAILY LOGIN REWARD ===== */
/* Daily tab inside store */
#store-daily {
	padding: var(--space-lg) var(--space-md);
	text-align: center;
}

.daily-tab-header {
	margin-bottom: 4px;
}

.daily-reward-icon {
	width: 36px;
	height: 36px;
	fill: #FFD700;
	filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.6));
	animation: dailyGiftPulse 2s ease-in-out infinite;
	margin-bottom: 4px;
}

@keyframes dailyGiftPulse {
	0%, 100% { transform: scale(1) rotate(0deg); }
	25% { transform: scale(1.1) rotate(-5deg); }
	50% { transform: scale(1) rotate(0deg); }
	75% { transform: scale(1.1) rotate(5deg); }
}

.daily-tab-header h3 {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	color: #FFD700;
	text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
	margin: 0;
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
}

/* Subtitle (streak count or comeback message) */
.daily-reward-subtitle {
	font-size: var(--font-size-sm);
	color: rgba(255, 200, 100, 0.8);
	margin-bottom: 14px;
}

/* 7-Day Grid */
.daily-reward-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
	margin-bottom: 14px;
}

.daily-day-cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 8px 2px 10px;
	border-radius: 8px;
	border: 1px solid rgba(100, 120, 160, 0.2);
	background: rgba(20, 25, 40, 0.6);
	position: relative;
	transition: all 0.2s ease;
}

.daily-day-cell .day-label {
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: rgba(150, 170, 200, 0.6);
	margin-bottom: 4px;
	font-weight: var(--font-weight-bold);
}

.daily-day-cell .day-reward {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	color: rgba(180, 200, 230, 0.8);
	display: flex;
	align-items: center;
	gap: 2px;
}

.daily-day-cell .day-reward .icon {
	width: 12px;
	height: 12px;
	fill: rgba(180, 200, 230, 0.6);
}

.daily-day-cell .day-reward .day-reward-2x {
	font-size: var(--font-size-sm);
	color: rgba(200, 200, 200, 0.7);
}

.daily-day-cell .day-reward.day-reward-shards {
	font-size: 0.65rem;
	margin-top: -1px;
}

.daily-day-cell .day-check {
	position: absolute;
	top: -4px;
	right: -2px;
	font-size: 10px;
	color: #4CAF50;
	background: rgba(10, 10, 20, 0.9);
	border-radius: 50%;
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(76, 175, 80, 0.5);
}

/* Claimed days (past) */
.daily-day-cell.claimed {
	background: rgba(76, 175, 80, 0.08);
	border-color: rgba(76, 175, 80, 0.2);
	opacity: 0.65;
}

.daily-day-cell.claimed .day-label {
	color: rgba(76, 175, 80, 0.6);
}

.daily-day-cell.claimed .day-reward {
	color: rgba(76, 175, 80, 0.7);
}

.daily-day-cell.claimed .day-reward .icon {
	fill: rgba(76, 175, 80, 0.6);
}

.daily-day-cell.claimed .day-reward .day-reward-2x {
	color: rgba(76, 175, 80, 0.7);
}

/* Current day (highlighted) */
.daily-day-cell.current {
	background: rgba(255, 215, 0, 0.12);
	border-color: rgba(255, 215, 0, 0.6);
	box-shadow: 0 0 16px rgba(255, 215, 0, 0.2), inset 0 0 12px rgba(255, 215, 0, 0.06);
	transform: scale(1.05);
}

.daily-day-cell.current .day-label {
	color: #FFD700;
}

.daily-day-cell.current .day-reward {
	color: #FFD700;
}

.daily-day-cell.current .day-reward .icon {
	fill: #FFD700;
}

.daily-day-cell.current .day-reward .day-reward-2x {
	color: #FFD700;
}

/* Future days */
.daily-day-cell.future {
	opacity: 0.45;
}

/* Multiplier banner */
.daily-reward-multiplier {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: var(--radius-md);
	margin-bottom: 14px;
	font-size: var(--font-size-sm);
}

.daily-reward-multiplier .icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.daily-reward-multiplier.active {
	background: rgba(255, 215, 0, 0.1);
	border: 1px solid rgba(255, 215, 0, 0.3);
	color: #FFD700;
}

.daily-reward-multiplier.active .icon {
	fill: #FFD700;
}

.daily-reward-multiplier.used {
	background: rgba(100, 120, 140, 0.08);
	border: 1px solid rgba(100, 120, 140, 0.15);
	color: rgba(150, 160, 180, 0.5);
}

.daily-reward-multiplier.used .icon {
	fill: rgba(150, 160, 180, 0.4);
}

/* Claim button */
.daily-reward-claim {
	width: 100%;
	padding: 11px 20px;
	font-family: var(--font-family);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-bold);
	color: #fff;
	background: linear-gradient(180deg, #4CAF50, #2d7d32);
	border: none;
	border-radius: var(--radius-md);
	cursor: pointer;
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	box-shadow: 0 4px 0 #1b5e20, 0 0 20px rgba(76, 175, 80, 0.3);
	transition: transform 0.1s, box-shadow 0.1s;
}

.daily-reward-claim:hover {
	transform: translateY(-1px);
	box-shadow: 0 5px 0 #1b5e20, 0 0 30px rgba(76, 175, 80, 0.4);
}

.daily-reward-claim:active {
	transform: translateY(2px);
	box-shadow: 0 2px 0 #1b5e20;
}

/* ============================================================================
   ACHIEVEMENT SYSTEM
   ============================================================================ */

/* Achievement button in menu */
.start-btn.achievement-btn {
	background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 152, 0, 0.1) 100%);
	border: 1px solid rgba(255, 193, 7, 0.4);
	color: #FFC107;
	text-shadow: 0 0 8px rgba(255, 193, 7, 0.4);
}

.start-btn.achievement-btn:hover {
	background: linear-gradient(135deg, rgba(255, 193, 7, 0.25) 0%, rgba(255, 152, 0, 0.2) 100%);
	border-color: rgba(255, 193, 7, 0.6);
	box-shadow: 0 0 15px rgba(255, 193, 7, 0.2);
}

.start-btn.full {
	width: 100%;
	padding: var(--space-md) var(--space-lg);
}

/* Achievement Panel */
.achievements-progress-bar {
	text-align: right;
	padding: 4px 12px;
}

.achievements-progress {
	font-size: 0.85rem;
	color: #FFC107;
	text-shadow: 0 0 6px rgba(255, 193, 7, 0.3);
	font-weight: 600;
}

/* Tabs */
.achievements-panel-tabs {
	display: flex;
	gap: 2px;
	padding: 8px 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	overflow-x: auto;
}

.ach-tab {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: #888;
	padding: 6px 14px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	transition: all 0.15s;
	white-space: nowrap;
}

.ach-tab:hover {
	background: rgba(255, 193, 7, 0.08);
	border-color: rgba(255, 193, 7, 0.2);
	color: #ccc;
}

.ach-tab.active {
	background: rgba(255, 193, 7, 0.15);
	border-color: rgba(255, 193, 7, 0.4);
	color: #FFC107;
	text-shadow: 0 0 6px rgba(255, 193, 7, 0.3);
}

/* Achievement List */
.achievements-panel-body {
	flex: 1;
	overflow-y: auto;
	padding: 10px 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.achievements-panel-body::-webkit-scrollbar {
	width: 4px;
}

.achievements-panel-body::-webkit-scrollbar-thumb {
	background: rgba(255, 193, 7, 0.2);
	border-radius: 2px;
}

/* Achievement Card */
.achievement-card {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 8px;
	transition: all 0.15s;
}

.achievement-card.unlocked {
	background: rgba(255, 193, 7, 0.06);
	border-color: rgba(255, 193, 7, 0.25);
}

.achievement-card.locked {
	opacity: 0.55;
}

.achievement-card.locked.hidden-ach {
	opacity: 0.35;
}

.achievement-icon {
	width: 36px;
	height: 36px;
	min-width: 36px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.achievement-card.unlocked .achievement-icon {
	background: rgba(255, 193, 7, 0.15);
	border-color: rgba(255, 193, 7, 0.35);
}

.achievement-icon .icon {
	width: 18px;
	height: 18px;
	fill: #888;
}

.achievement-card.unlocked .achievement-icon .icon {
	fill: #FFC107;
}

.achievement-info {
	flex: 1;
	min-width: 0;
}

.achievement-name {
	font-size: 0.8rem;
	font-weight: 600;
	color: #ddd;
	line-height: 1.2;
}

.achievement-card.unlocked .achievement-name {
	color: #FFC107;
	text-shadow: 0 0 6px rgba(255, 193, 7, 0.2);
}

.achievement-desc {
	font-size: 0.7rem;
	color: #777;
	margin-top: 2px;
	line-height: 1.3;
}

/* Progress bar */
.achievement-progress {
	margin-top: 4px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.ach-progress-bar {
	flex: 1;
	height: 4px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 2px;
	overflow: hidden;
}

.ach-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #FFC107, #FF9800);
	border-radius: 2px;
	transition: width 0.3s ease;
}

.ach-progress-text {
	font-size: 0.6rem;
	color: #888;
	white-space: nowrap;
}

/* Reward badge */
.achievement-reward {
	display: flex;
	align-items: center;
	gap: 3px;
	font-size: 0.7rem;
	color: #999;
	white-space: nowrap;
	padding-left: 6px;
}

.achievement-card.unlocked .achievement-reward {
	color: #4CAF50;
}

.achievement-reward .icon {
	width: 12px;
	height: 12px;
	fill: currentColor;
}

/* Category label */
.achievement-category {
	font-size: 0.55rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 1px 5px;
	border-radius: 3px;
	font-weight: 600;
	display: inline-block;
	margin-top: 2px;
}

/* ── Achievement Toast (in-game notification) ── */
#achievement-toast-container {
	position: fixed;
	top: 60px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	pointer-events: none;
}

.achievement-toast {
	background: linear-gradient(135deg, rgba(20, 15, 30, 0.95), rgba(15, 10, 25, 0.95));
	border: 1px solid rgba(255, 193, 7, 0.5);
	border-radius: 10px;
	padding: 10px 18px;
	display: flex;
	align-items: center;
	gap: 10px;
	box-shadow: 0 0 25px rgba(255, 193, 7, 0.3), 0 4px 15px rgba(0, 0, 0, 0.5);
	animation: achievementSlideIn 0.4s ease-out, achievementFadeOut 0.4s ease-in 3.6s forwards;
	max-width: 360px;
}

.achievement-toast .toast-icon {
	width: 28px;
	height: 28px;
	fill: #FFC107;
	flex-shrink: 0;
}

.achievement-toast .toast-text {
	display: flex;
	flex-direction: column;
}

.achievement-toast .toast-label {
	font-size: 0.6rem;
	color: #FFC107;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
}

.achievement-toast .toast-name {
	font-size: 0.85rem;
	color: #fff;
	font-weight: 600;
}

.achievement-toast .toast-reward {
	font-size: 0.7rem;
	color: #4CAF50;
	display: flex;
	align-items: center;
	gap: 3px;
	margin-left: auto;
	padding-left: 10px;
}

.achievement-toast .toast-reward .icon {
	width: 12px;
	height: 12px;
	fill: #4CAF50;
}

@keyframes achievementSlideIn {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes achievementFadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
		transform: translateY(-10px);
	}
}

/* ── Death Screen Achievements ── */
.death-achievements {
	margin: 8px 0;
	max-height: 120px;
	overflow-y: auto;
	border: 1px solid rgba(255, 193, 7, 0.15);
	border-radius: 8px;
	padding: 6px;
	background: rgba(255, 193, 7, 0.03);
}

.death-achievements::-webkit-scrollbar {
	width: 3px;
}

.death-achievements::-webkit-scrollbar-thumb {
	background: rgba(255, 193, 7, 0.25);
	border-radius: 2px;
}

.death-achievements-header {
	font-size: 0.65rem;
	color: #FFC107;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 700;
	margin-bottom: 4px;
	display: flex;
	align-items: center;
	gap: 4px;
}

.death-achievements-header .icon {
	width: 12px;
	height: 12px;
	fill: #FFC107;
}

.death-achievements-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.death-ach-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	background: rgba(255, 193, 7, 0.08);
	border: 1px solid rgba(255, 193, 7, 0.25);
	border-radius: 6px;
	animation: popIn 0.3s ease-out;
}

.death-ach-item .icon {
	width: 16px;
	height: 16px;
	fill: #FFC107;
	flex-shrink: 0;
}

.death-ach-name {
	font-size: 0.75rem;
	color: #FFC107;
	font-weight: 600;
	flex: 1;
}

.death-ach-reward {
	font-size: 0.7rem;
	color: #4CAF50;
	display: flex;
	align-items: center;
	gap: 3px;
}

.death-ach-reward .icon {
	width: 11px;
	height: 11px;
	fill: #4CAF50;
}