/* ============================================================================
   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);
}

/* ============================================================================
   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;
}

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;
	}
	
	/* 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);
}

/* 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);
}

/* Button Row (side-by-side) */
.start-btn-row {
	display: flex;
	gap: var(--space-md);
	margin-top: var(--space-md);
}

.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;
}

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

.difficulty-selector {
	margin-bottom: var(--space-md);
	padding: var(--space-md) 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));
}

.difficulty-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: 1px solid rgba(0, 180, 220, 0.35);
	border-radius: 4px;
	color: #00e5ff;
	cursor: pointer;
	outline: none;
	transition: all 0.2s ease;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300e5ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 18px;
}

.difficulty-selector select:hover {
	border-color: rgba(0, 220, 255, 0.5);
	background-color: rgba(12, 24, 45, 0.95);
	box-shadow: 0 0 15px rgba(0, 200, 255, 0.15);
}

.difficulty-selector select:focus {
	border-color: rgba(0, 220, 255, 0.6);
	box-shadow: 0 0 20px rgba(0, 200, 255, 0.2);
}

.difficulty-selector select option {
	background: #0a1420;
	color: #00e5ff;
	padding: var(--space-sm);
}

.difficulty-selector select option:disabled {
	color: rgba(100, 130, 150, 0.5);
}

/* Difficulty level color variants */
.difficulty-selector select[data-level="1"] { color: #00e5ff; }
.difficulty-selector select[data-level="2"] { color: #FFC107; border-color: rgba(255, 193, 7, 0.4); }
.difficulty-selector select[data-level="3"] { color: #FF9800; border-color: rgba(255, 152, 0, 0.4); }
.difficulty-selector select[data-level="4"] { color: #f44336; border-color: rgba(244, 67, 54, 0.4); }
.difficulty-selector select[data-level="5"] { color: #b388ff; border-color: rgba(180, 140, 255, 0.4); }
.difficulty-selector select[data-level="6"] { color: #ff80ab; border-color: rgba(255, 130, 170, 0.4); }

.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 {
	color: #ff8090;
	filter: drop-shadow(0 0 8px rgba(255, 80, 100, 0.6));
}

.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-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 i {
	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 i {
	color: #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 i {
	filter: drop-shadow(0 0 6px rgba(160, 100, 255, 0.6));
}

.soul-shards .death-currency-total i,
.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-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;
}

.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);
}

/* 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 {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(5, 10, 20, 0.9);
	z-index: 2000;
	display: flex;
	justify-content: center;
	align-items: center;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.leaderboard-panel-content {
	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: 10px;
	border: 1px solid rgba(255, 215, 0, 0.3);
	width: 90%;
	max-width: 720px;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	box-shadow: 
		0 0 50px rgba(255, 215, 0, 0.15),
		0 8px 32px rgba(0, 0, 0, 0.5),
		inset 0 1px 0 rgba(255, 220, 100, 0.1);
	overflow: hidden;
}

.leaderboard-panel-header {
	background: rgba(12, 24, 45, 0.6);
	padding: var(--space-lg) var(--space-xl);
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid rgba(255, 215, 0, 0.2);
	position: relative;
}

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

.leaderboard-panel-header h2 {
	margin: 0;
	font-size: var(--font-size-lg);
	color: #FFD700;
	font-family: var(--font-family);
	text-transform: uppercase;
	letter-spacing: 2px;
	display: flex;
	align-items: center;
	gap: var(--space-md);
	text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.leaderboard-panel-header h2 i {
	filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.5));
}

.leaderboard-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;
	width: 38px;
	height: 38px;
	cursor: pointer;
	font-size: var(--font-size-lg);
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.leaderboard-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);
}

.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-md) var(--space-xl);
	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) {
	.leaderboard-panel-content {
		width: 95%;
		max-height: 90vh;
	}
	
	.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; }
}

.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: 99;
	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-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), Display (3 - full width) */
.settings-card:nth-child(1) { order: 1; } /* Audio - top left */
.settings-card:nth-child(2) { order: 3; grid-column: 1 / -1; } /* Display - bottom, full width */
.settings-card:nth-child(3) { order: 2; } /* Quality - top right */

/* 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;
}

.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: 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) {
		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 i {
	color: #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 12px;
	background: transparent;
	border: none;
	border-bottom: 3px solid transparent;
	color: rgba(180, 160, 220, 0.6);
	font-size: 0.9rem;
	font-family: var(--font-family);
	font-weight: 600;
	cursor: pointer;
	transition: all 0.25s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	position: relative;
}

.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="drones"].active {
	color: #b388ff;
	border-bottom-color: #b388ff;
}

.store-tab[data-tab="upgrades"].active {
	color: #00e5ff;
	border-bottom-color: #00e5ff;
}

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

.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 {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.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);
	border: 2px solid rgba(180, 140, 255, 0.4);
	box-shadow: 0 0 15px rgba(180, 140, 255, 0.2);
}

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

.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: static;
	width: 32px;
	height: 32px;
	display: block;
}

.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;
}

/* 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);
}

/* 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);
	}
}