/* ═══════════════════════════════════════════════════════
   TASK FORCE — LOBBY / MAIN MENU
   Military command center aesthetic
   ═══════════════════════════════════════════════════════ */

/* Hide game HUD while lobby is visible */
body.in-lobby .hud,
body.in-lobby #crosshair,
body.in-lobby #crosshair-dot {
	display: none !important;
}

/* ─── OVERLAY ─── */
#lobby-overlay {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 500;
	font-family: 'Rajdhani', 'Segoe UI', sans-serif;
	color: #c8d6e0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: linear-gradient(165deg, rgba(4, 10, 18, 0.92) 0%, rgba(8, 18, 32, 0.88) 40%, rgba(6, 14, 24, 0.85) 100%);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

#lobby-overlay.lobby-hidden {
	opacity: 0;
	pointer-events: none;
	transform: scale(1.02);
}

#lobby-overlay.lobby-visible {
	opacity: 1;
	pointer-events: auto;
	transform: scale(1);
}

/* ─── ATMOSPHERE OVERLAYS ─── */
.lobby-scanlines {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	pointer-events: none;
	z-index: 1;
	background: repeating-linear-gradient(
		0deg,
		transparent,
		transparent 2px,
		rgba(0, 0, 0, 0.03) 2px,
		rgba(0, 0, 0, 0.03) 4px
	);
}

.lobby-noise {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	pointer-events: none;
	z-index: 1;
	opacity: 0.015;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
	background-size: 256px 256px;
}

/* ─── CORNER DECORATIONS ─── */
.lobby-corner {
	position: absolute;
	width: 24px;
	height: 24px;
	z-index: 2;
	pointer-events: none;
}
.lobby-corner-tl {
	top: 8px; left: 8px;
	border-top: 2px solid rgba(0, 229, 255, 0.3);
	border-left: 2px solid rgba(0, 229, 255, 0.3);
}
.lobby-corner-tr {
	top: 8px; right: 8px;
	border-top: 2px solid rgba(0, 229, 255, 0.3);
	border-right: 2px solid rgba(0, 229, 255, 0.3);
}
.lobby-corner-bl {
	bottom: 8px; left: 8px;
	border-bottom: 2px solid rgba(0, 229, 255, 0.3);
	border-left: 2px solid rgba(0, 229, 255, 0.3);
}
.lobby-corner-br {
	bottom: 8px; right: 8px;
	border-bottom: 2px solid rgba(0, 229, 255, 0.3);
	border-right: 2px solid rgba(0, 229, 255, 0.3);
}

/* ═══════════════════════════════════════════
   TOP NAVIGATION BAR
   ═══════════════════════════════════════════ */
.lobby-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 24px;
	height: 52px;
	background: linear-gradient(180deg, rgba(4, 10, 18, 0.95), rgba(6, 14, 24, 0.8));
	border-bottom: 1px solid rgba(0, 229, 255, 0.12);
	position: relative;
	z-index: 10;
	flex-shrink: 0;
}

.lobby-topbar-left {
	display: flex;
	align-items: center;
	gap: 20px;
}

.lobby-logo {
	display: flex;
	align-items: center;
	gap: 10px;
}

.lobby-logo-icon {
	font-size: 18px;
	color: #00e5ff;
	text-shadow: 0 0 10px rgba(0, 229, 255, 0.6);
	animation: logo-pulse 3s ease-in-out infinite;
}

@keyframes logo-pulse {
	0%, 100% { text-shadow: 0 0 10px rgba(0, 229, 255, 0.6); }
	50% { text-shadow: 0 0 20px rgba(0, 229, 255, 0.9), 0 0 40px rgba(0, 229, 255, 0.3); }
}

.lobby-logo-text {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 4px;
	color: #e0e8ef;
	text-transform: uppercase;
}

.lobby-status {
	display: flex;
	align-items: center;
	gap: 6px;
}

.lobby-status-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #76ff03;
	box-shadow: 0 0 6px rgba(118, 255, 3, 0.6);
	animation: status-blink 2s ease-in-out infinite;
}

@keyframes status-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.4; }
}

.lobby-status-text {
	font-family: 'Share Tech Mono', monospace;
	font-size: 10px;
	color: #76ff03;
	letter-spacing: 2px;
}

/* Nav Buttons */
.lobby-topbar-nav {
	display: flex;
	gap: 2px;
}

.lobby-nav-btn {
	font-family: 'Rajdhani', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #546e7a;
	background: none;
	border: none;
	padding: 8px 20px;
	cursor: pointer;
	position: relative;
	transition: color 0.2s;
}

.lobby-nav-btn:hover {
	color: #b0bec5;
}

.lobby-nav-btn.active {
	color: #00e5ff;
}

.lobby-nav-btn.active::after {
	content: '';
	position: absolute;
	bottom: -1px;
	left: 20%;
	right: 20%;
	height: 2px;
	background: #00e5ff;
	box-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
}

/* Top-right currency + level */
.lobby-topbar-right {
	display: flex;
	align-items: center;
	gap: 16px;
}

.lobby-currency {
	display: flex;
	align-items: center;
	gap: 12px;
}

.currency-item {
	display: flex;
	align-items: center;
	gap: 5px;
}

.currency-icon {
	font-size: 12px;
}
.currency-icon.cp {
	color: #00e5ff;
	text-shadow: 0 0 4px rgba(0, 229, 255, 0.4);
}
.currency-icon.gold {
	color: #ffd740;
	text-shadow: 0 0 4px rgba(255, 215, 64, 0.4);
}

.currency-val {
	font-family: 'Share Tech Mono', monospace;
	font-size: 13px;
	color: #e0e8ef;
}

.currency-divider {
	width: 1px;
	height: 14px;
	background: rgba(255, 255, 255, 0.1);
}

.lobby-level-badge {
	width: 32px;
	height: 32px;
	border: 2px solid rgba(0, 229, 255, 0.4);
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 229, 255, 0.05);
	position: relative;
}

.lobby-level-badge::before {
	content: 'LVL';
	position: absolute;
	top: -7px;
	font-size: 7px;
	font-weight: 700;
	letter-spacing: 1px;
	color: rgba(0, 229, 255, 0.5);
}

.level-num {
	font-family: 'Share Tech Mono', monospace;
	font-size: 14px;
	font-weight: 700;
	color: #00e5ff;
}

/* ═══════════════════════════════════════════
   MAIN CONTENT AREA (3-column)
   ═══════════════════════════════════════════ */
.lobby-main {
	flex: 1;
	display: flex;
	padding: 16px;
	gap: 16px;
	position: relative;
	z-index: 5;
	overflow: hidden;
}

/* ─── PANEL BASE ─── */
.lobby-panel {
	background: linear-gradient(135deg, rgba(6, 14, 24, 0.85), rgba(10, 22, 36, 0.75));
	border: 1px solid rgba(0, 200, 220, 0.15);
	border-radius: 3px;
	overflow: hidden;
}

.panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px;
	background: rgba(0, 229, 255, 0.03);
	border-bottom: 1px solid rgba(0, 200, 220, 0.1);
}

.panel-header-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2.5px;
	color: rgba(0, 229, 255, 0.7);
	text-transform: uppercase;
}

.panel-header-count {
	font-family: 'Share Tech Mono', monospace;
	font-size: 10px;
	color: #546e7a;
}

/* ─── LEFT COLUMN ─── */
.lobby-left {
	width: 260px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex-shrink: 0;
}

/* Player Card */
.lobby-player-card .player-card-body {
	padding: 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.player-rank-badge {
	text-align: center;
}

.rank-icon {
	font-size: 28px;
	color: #ffd740;
	text-shadow: 0 0 12px rgba(255, 215, 64, 0.4);
	line-height: 1;
}

.rank-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 3px;
	color: #78909c;
	margin-top: 4px;
}

.player-name-row {
	width: 100%;
	position: relative;
}

.player-name-input {
	width: 100%;
	font-family: 'Rajdhani', sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 2px;
	text-align: center;
	text-transform: uppercase;
	color: #e0e8ef;
	background: none;
	border: none;
	border-bottom: 1px solid rgba(0, 229, 255, 0.2);
	padding: 6px 4px;
	outline: none;
	transition: border-color 0.2s;
	box-sizing: border-box;
}

.player-name-input::placeholder {
	color: #37474f;
	letter-spacing: 1px;
	font-size: 12px;
}

.player-name-input:focus {
	border-bottom-color: #00e5ff;
}

/* Stats Panel */
.lobby-stats-panel .stats-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: rgba(0, 200, 220, 0.05);
}

.stat-block {
	padding: 10px 12px;
	text-align: center;
	background: rgba(6, 14, 24, 0.8);
}

.stat-val {
	font-family: 'Share Tech Mono', monospace;
	font-size: 22px;
	font-weight: 700;
	color: #e0e8ef;
	line-height: 1.2;
}

.stat-val.accent {
	color: #00e5ff;
	text-shadow: 0 0 8px rgba(0, 229, 255, 0.3);
}

.stat-label {
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 2px;
	color: #546e7a;
	margin-top: 2px;
}

/* Party Panel */
.party-slots {
	display: flex;
	flex-direction: column;
}

.party-slot {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	border-bottom: 1px solid rgba(0, 200, 220, 0.06);
	transition: background 0.15s;
}

.party-slot:last-child {
	border-bottom: none;
}

.party-slot.filled:hover {
	background: rgba(0, 229, 255, 0.03);
}

.party-slot.empty {
	opacity: 0.4;
	cursor: pointer;
}

.party-slot.empty:hover {
	opacity: 0.7;
	background: rgba(0, 229, 255, 0.03);
}

.party-slot-indicator {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #37474f;
	flex-shrink: 0;
}

.party-slot-indicator.host {
	background: #00e5ff;
	box-shadow: 0 0 6px rgba(0, 229, 255, 0.5);
}

.party-slot-info {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
}

.party-slot-name {
	font-size: 12px;
	font-weight: 600;
	color: #e0e8ef;
	letter-spacing: 0.5px;
}

.party-slot-tag {
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 1.5px;
	color: #00e5ff;
	background: rgba(0, 229, 255, 0.1);
	padding: 1px 5px;
	border-radius: 2px;
}

.party-slot-status {
	font-family: 'Share Tech Mono', monospace;
	font-size: 9px;
	letter-spacing: 1px;
}

.party-slot-status.ready {
	color: #76ff03;
}

.party-slot-invite {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1px;
	color: #37474f;
}

/* Party Actions */
.party-actions {
	padding: 10px 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.party-btn {
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.15);
	color: #cfd8dc;
	padding: 8px 14px;
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.15s;
}
.party-btn:hover {
	background: rgba(255,255,255,0.15);
	color: #fff;
	border-color: rgba(255,255,255,0.3);
}
.party-btn-sm { padding: 6px 12px; }
.party-btn-xs { padding: 4px 8px; font-size: 10px; }
.party-btn-danger {
	border-color: rgba(244,67,54,0.3);
	color: #ef9a9a;
}
.party-btn-danger:hover {
	background: rgba(244,67,54,0.2);
	border-color: rgba(244,67,54,0.5);
	color: #f44336;
}

.party-join-row {
	display: flex;
	gap: 6px;
}

.party-code-input {
	flex: 1;
	background: rgba(0,0,0,0.3);
	border: 1px solid rgba(255,255,255,0.12);
	color: #fff;
	padding: 6px 10px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	text-align: center;
}
.party-code-input::placeholder {
	color: #455a64;
	letter-spacing: 3px;
}

.party-error {
	color: #f44336;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.5px;
	min-height: 14px;
}

.party-active {
	padding: 10px 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.party-code-display {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
}
.party-code-label {
	font-size: 10px;
	color: #78909c;
	font-weight: 600;
	letter-spacing: 1px;
}
.party-code-value {
	font-size: 16px;
	font-weight: 800;
	letter-spacing: 4px;
	color: #76ff03;
}

/* Social Feed */
.lobby-social-panel {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.social-feed {
	flex: 1;
	padding: 8px 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	overflow-y: auto;
	min-height: 60px;
}

.social-entry {
	display: flex;
	gap: 8px;
	font-size: 11px;
	line-height: 1.4;
}

.social-tag {
	font-family: 'Share Tech Mono', monospace;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 1px;
	padding: 1px 4px;
	border-radius: 2px;
	flex-shrink: 0;
	align-self: flex-start;
	margin-top: 1px;
}

.social-tag.sys {
	color: #00e5ff;
	background: rgba(0, 229, 255, 0.1);
}

.social-tag.info {
	color: #78909c;
	background: rgba(120, 144, 156, 0.1);
}

.social-msg {
	color: #78909c;
}

.social-input-row {
	padding: 6px 10px;
	border-top: 1px solid rgba(0, 200, 220, 0.08);
}

.social-input {
	width: 100%;
	font-family: 'Share Tech Mono', monospace;
	font-size: 11px;
	color: #546e7a;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(0, 200, 220, 0.08);
	border-radius: 2px;
	padding: 5px 8px;
	outline: none;
	box-sizing: border-box;
}

/* ─── CENTER COLUMN ─── */
.lobby-center {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	padding-bottom: 40px;
	position: relative;
}

.lobby-center-label {
	text-align: center;
	animation: center-fade-in 1s ease-out 0.3s both;
}

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

.center-title {
	font-size: 28px;
	font-weight: 700;
	letter-spacing: 8px;
	color: rgba(0, 229, 255, 0.25);
	text-transform: uppercase;
}

.center-sub {
	font-family: 'Share Tech Mono', monospace;
	font-size: 11px;
	letter-spacing: 4px;
	color: rgba(0, 229, 255, 0.15);
	margin-top: 6px;
}

/* ─── RIGHT COLUMN ─── */
.lobby-right {
	width: 240px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex-shrink: 0;
}

/* Loadout Panel */
.loadout-slots {
	display: flex;
	flex-direction: column;
}

.loadout-slot {
	padding: 10px 12px;
	border-bottom: 1px solid rgba(0, 200, 220, 0.06);
}

.loadout-slot:last-child {
	border-bottom: none;
}

.loadout-slot-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
}

.loadout-slot-key {
	font-family: 'Share Tech Mono', monospace;
	font-size: 10px;
	font-weight: 700;
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(0, 229, 255, 0.3);
	border-radius: 2px;
	color: #00e5ff;
	flex-shrink: 0;
}

.loadout-slot-type {
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 2px;
	color: #546e7a;
}

.loadout-slot-name {
	font-size: 13px;
	font-weight: 600;
	color: #e0e8ef;
	margin-bottom: 6px;
}

.loadout-count {
	font-size: 11px;
	color: #546e7a;
}

.loadout-slot-stats {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.loadout-stat-bar {
	display: flex;
	align-items: center;
	gap: 6px;
}

.loadout-stat-label {
	font-family: 'Share Tech Mono', monospace;
	font-size: 9px;
	color: #546e7a;
	width: 24px;
	flex-shrink: 0;
}

.loadout-bar-track {
	flex: 1;
	height: 3px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 1px;
	overflow: hidden;
}

.loadout-bar-fill {
	height: 100%;
	background: linear-gradient(90deg, #00e5ff, rgba(0, 229, 255, 0.4));
	border-radius: 1px;
	transition: width 0.4s ease;
}

/* Map Panel */
.map-preview {
	padding: 10px 12px;
}

.map-name {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 3px;
	color: #e0e8ef;
	margin-bottom: 10px;
}

.map-select-row {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.map-btn {
	font-family: 'Share Tech Mono', monospace;
	font-size: 9px;
	letter-spacing: 1px;
	color: #546e7a;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 2px;
	padding: 4px 8px;
	cursor: pointer;
	transition: all 0.15s;
}

.map-btn:hover {
	color: #b0bec5;
	border-color: rgba(255, 255, 255, 0.15);
}

.map-btn.active {
	color: #00e5ff;
	border-color: rgba(0, 229, 255, 0.4);
	background: rgba(0, 229, 255, 0.06);
}

/* Custom Map Upload */
.custom-map-section {
	margin-top: 8px;
}

.custom-map-divider {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.custom-map-divider::before,
.custom-map-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: rgba(255, 255, 255, 0.08);
}

.custom-map-divider span {
	font-family: 'Share Tech Mono', monospace;
	font-size: 8px;
	letter-spacing: 2px;
	color: rgba(200, 214, 224, 0.35);
}

.custom-map-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	padding: 7px 0;
	font-family: 'Share Tech Mono', monospace;
	font-size: 9px;
	letter-spacing: 1.5px;
	color: #ff6b35;
	background: rgba(255, 107, 53, 0.04);
	border: 1px dashed rgba(255, 107, 53, 0.3);
	border-radius: 2px;
	cursor: pointer;
	transition: all 0.2s;
}

.custom-map-btn:hover {
	color: #ff8c5a;
	background: rgba(255, 107, 53, 0.08);
	border-color: rgba(255, 107, 53, 0.5);
}

.custom-map-icon {
	font-size: 11px;
}

.custom-map-status {
	margin-top: 6px;
	font-family: 'Share Tech Mono', monospace;
	font-size: 8px;
	letter-spacing: 0.5px;
	line-height: 1.4;
	min-height: 12px;
}

.custom-map-status.success {
	color: #4caf50;
}

.custom-map-status.error {
	color: #ff5252;
}

/* ═══════════════════════════════════════════
   BOTTOM MATCHMAKING BAR
   ═══════════════════════════════════════════ */
.lobby-bottombar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 24px;
	height: 68px;
	background: linear-gradient(0deg, rgba(4, 10, 18, 0.95), rgba(6, 14, 24, 0.85));
	border-top: 1px solid rgba(0, 229, 255, 0.12);
	position: relative;
	z-index: 10;
	flex-shrink: 0;
}

.lobby-bottom-left {
	display: flex;
	align-items: center;
}

.matchmaking-section {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.mm-label {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 2.5px;
	color: rgba(0, 229, 255, 0.5);
}

.mm-mode-select {
	display: flex;
	gap: 3px;
}

.mm-mode-btn {
	font-family: 'Rajdhani', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1px;
	color: #546e7a;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 2px;
	padding: 4px 12px;
	cursor: pointer;
	transition: all 0.15s;
}

.mm-mode-btn:hover {
	color: #b0bec5;
	border-color: rgba(255, 255, 255, 0.15);
}

.mm-mode-btn.active {
	color: #e0e8ef;
	background: rgba(0, 229, 255, 0.08);
	border-color: rgba(0, 229, 255, 0.35);
}

.mm-bot-btn {
	font-family: 'Rajdhani', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1px;
	color: #546e7a;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 2px;
	padding: 4px 8px;
	cursor: pointer;
	transition: all 0.2s;
	min-width: 28px;
}
.mm-bot-btn:hover {
	color: #b0bec5;
	border-color: rgba(255, 255, 255, 0.15);
}
.mm-bot-btn.active {
	color: #e0e8ef;
	background: rgba(0, 229, 255, 0.08);
	border-color: rgba(0, 229, 255, 0.35);
}

/* Center info */
.lobby-bottom-center {
	display: flex;
	align-items: center;
}

.mm-info {
	display: flex;
	align-items: center;
	gap: 16px;
}

.mm-info-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.mm-info-label {
	font-size: 8px;
	font-weight: 600;
	letter-spacing: 2px;
	color: #37474f;
}

.mm-info-val {
	font-family: 'Share Tech Mono', monospace;
	font-size: 12px;
	color: #b0bec5;
}

.mm-info-divider {
	width: 1px;
	height: 24px;
	background: rgba(255, 255, 255, 0.06);
}

/* Right: queue + start button */
.lobby-bottom-right {
	display: flex;
	align-items: center;
	gap: 16px;
}

.queue-info {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 1px;
}

.queue-label {
	font-size: 8px;
	font-weight: 600;
	letter-spacing: 2px;
	color: #37474f;
}

.queue-time {
	font-family: 'Share Tech Mono', monospace;
	font-size: 13px;
	color: #546e7a;
}

/* ─── START MATCH BUTTON ─── */
.start-match-btn {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 32px;
	background: linear-gradient(135deg, rgba(0, 229, 255, 0.15), rgba(0, 180, 200, 0.1));
	border: 2px solid rgba(0, 229, 255, 0.5);
	border-radius: 3px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: all 0.2s;
}

.start-match-btn::before {
	content: '';
	position: absolute;
	top: 0; left: -100%;
	width: 100%; height: 100%;
	background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.1), transparent);
	transition: left 0.5s ease;
}

.start-match-btn:hover {
	background: linear-gradient(135deg, rgba(0, 229, 255, 0.25), rgba(0, 180, 200, 0.15));
	border-color: rgba(0, 229, 255, 0.7);
	box-shadow: 0 0 20px rgba(0, 229, 255, 0.2), inset 0 0 20px rgba(0, 229, 255, 0.05);
	transform: translateY(-1px);
}

.start-match-btn:hover::before {
	left: 100%;
}

.start-match-btn:active {
	transform: translateY(1px);
}

.start-match-text {
	font-family: 'Rajdhani', sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 3px;
	color: #00e5ff;
	text-shadow: 0 0 10px rgba(0, 229, 255, 0.4);
}

.start-match-arrow {
	font-size: 14px;
	color: #00e5ff;
	text-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
	animation: arrow-pulse 1.5s ease-in-out infinite;
}

@keyframes arrow-pulse {
	0%, 100% { transform: translateX(0); opacity: 1; }
	50% { transform: translateX(3px); opacity: 0.6; }
}

/* Launching state */
.start-match-btn.launching {
	border-color: #ff6b35;
	background: linear-gradient(135deg, rgba(255, 107, 53, 0.15), rgba(255, 80, 30, 0.1));
	pointer-events: none;
}

.start-match-btn.launching .start-match-text {
	color: #ff6b35;
	text-shadow: 0 0 10px rgba(255, 107, 53, 0.4);
	animation: deploy-flash 0.4s ease-in-out infinite;
}

.start-match-btn.launching .start-match-arrow {
	color: #ff6b35;
	animation: none;
}

@keyframes deploy-flash {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

/* ═══════════════════════════════════════════
   ENTRANCE ANIMATIONS
   ═══════════════════════════════════════════ */
.lobby-topbar {
	animation: slide-down 0.5s ease-out;
}

.lobby-bottombar {
	animation: slide-up 0.5s ease-out;
}

.lobby-left {
	animation: slide-right 0.6s ease-out 0.1s both;
}

.lobby-right {
	animation: slide-left 0.6s ease-out 0.1s both;
}

@keyframes slide-down {
	from { transform: translateY(-100%); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

@keyframes slide-up {
	from { transform: translateY(100%); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

@keyframes slide-right {
	from { transform: translateX(-40px); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}

@keyframes slide-left {
	from { transform: translateX(40px); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}

/* ═══════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════ */
.social-feed::-webkit-scrollbar {
	width: 3px;
}
.social-feed::-webkit-scrollbar-track {
	background: transparent;
}
.social-feed::-webkit-scrollbar-thumb {
	background: rgba(0, 229, 255, 0.15);
	border-radius: 2px;
}

/* ═══════════════════════════════════════════
   TAB CONTENT SWITCHING
   ═══════════════════════════════════════════ */
.lobby-tab-content {
	display: none;
	flex: 1;
	overflow: hidden;
}
.lobby-tab-content.active {
	display: flex;
	flex-direction: column;
}

/* ═══════════════════════════════════════════
   LOADOUT EDITOR TAB
   ═══════════════════════════════════════════ */
.loadout-editor {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Right sidebar: details + both slots */
.loadout-sidebar {
	width: 300px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.loadout-detail-panel {
	flex-shrink: 1;
	min-height: 0;
	overflow-y: auto;
}

.loadout-detail-panel::-webkit-scrollbar { width: 3px; }
.loadout-detail-panel::-webkit-scrollbar-thumb { background: rgba(0, 229, 255, 0.15); border-radius: 2px; }

/* 3D weapon preview in detail panel */
.weapon-detail-preview {
	width: 100%;
	height: 140px;
	position: relative;
	border-bottom: 1px solid rgba(0, 200, 220, 0.1);
	overflow: hidden;
	background: rgba(0, 0, 0, 0.3);
}

.weapon-detail-preview canvas {
	width: 100% !important;
	height: 100% !important;
	outline: none;
	display: block;
}

/* Equip slot cards */
.loadout-equip-slot {
	cursor: pointer;
	padding: 10px 14px;
	transition: all 0.15s;
	border-color: rgba(255, 255, 255, 0.06) !important;
}

.loadout-equip-slot:hover {
	border-color: rgba(0, 229, 255, 0.25) !important;
	background: linear-gradient(135deg, rgba(0, 229, 255, 0.03), rgba(6, 14, 24, 0.85));
}

.loadout-equip-slot.active {
	border-color: rgba(0, 229, 255, 0.5) !important;
	background: linear-gradient(135deg, rgba(0, 229, 255, 0.06), rgba(6, 14, 24, 0.85));
	box-shadow: 0 0 12px rgba(0, 229, 255, 0.08), inset 0 0 12px rgba(0, 229, 255, 0.02);
}

.equip-slot-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
}

.equip-slot-key {
	font-family: 'Share Tech Mono', monospace;
	font-size: 10px;
	font-weight: 700;
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(0, 229, 255, 0.3);
	border-radius: 2px;
	color: #00e5ff;
	flex-shrink: 0;
}

.equip-slot-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2.5px;
	color: rgba(0, 229, 255, 0.7);
	flex: 1;
}

.equip-slot-active-tag {
	font-family: 'Share Tech Mono', monospace;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 1.5px;
	color: #00e5ff;
	background: rgba(0, 229, 255, 0.1);
	padding: 2px 6px;
	border-radius: 2px;
	opacity: 0;
	transition: opacity 0.15s;
}

.loadout-equip-slot.active .equip-slot-active-tag {
	opacity: 1;
}

.equip-slot-name {
	font-size: 14px;
	font-weight: 600;
	color: #e0e8ef;
	margin-bottom: 4px;
}

.equip-slot-bars {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

/* Weapon Grid */
.weapon-grid {
	flex: 1;
	overflow-y: auto;
	padding: 12px 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-content: flex-start;
}

.weapon-grid::-webkit-scrollbar { width: 3px; }
.weapon-grid::-webkit-scrollbar-thumb { background: rgba(0, 229, 255, 0.15); border-radius: 2px; }

.weapon-grid-category {
	width: 100%;
	padding: 6px 0 2px;
}

.wgc-label {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 2.5px;
	color: rgba(0, 229, 255, 0.4);
}

.weapon-grid-item {
	padding: 8px 12px;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 3px;
	cursor: pointer;
	transition: all 0.15s;
	min-width: 140px;
}

.weapon-grid-item:hover {
	border-color: rgba(255, 255, 255, 0.15);
	background: rgba(255, 255, 255, 0.04);
}

.weapon-grid-item.selected {
	border-color: rgba(0, 229, 255, 0.5);
	background: rgba(0, 229, 255, 0.06);
}

.weapon-grid-item.equipped {
	border-color: rgba(0, 229, 255, 0.4);
	background: rgba(0, 229, 255, 0.04);
}

.weapon-grid-item.equipped::after {
	content: 'EQUIPPED';
	display: block;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 1.5px;
	color: #00e5ff;
	margin-top: 3px;
}

.weapon-grid-item.equipped-other {
	border-color: rgba(255, 107, 53, 0.3);
}

.weapon-grid-item.equipped-other::after {
	content: 'OTHER SLOT';
	display: block;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 1px;
	color: #78909c;
	margin-top: 3px;
}

.wgi-name {
	font-size: 13px;
	font-weight: 600;
	color: #e0e8ef;
}

.wgi-cat {
	font-size: 9px;
	color: #546e7a;
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* Weapon Detail Preview */

.weapon-detail-body {
	padding: 10px 12px;
}

.weapon-detail-name {
	font-size: 16px;
	font-weight: 700;
	color: #e0e8ef;
	letter-spacing: 1px;
}

.weapon-detail-cat {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 2px;
	color: #546e7a;
	margin-bottom: 8px;
}

.weapon-detail-stats {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-bottom: 10px;
}

.wd-stat {
	display: flex;
	align-items: center;
	gap: 8px;
}

.wd-stat-label {
	font-family: 'Share Tech Mono', monospace;
	font-size: 9px;
	color: #546e7a;
	width: 60px;
	flex-shrink: 0;
	letter-spacing: 1px;
}

.wd-bar-track {
	flex: 1;
	height: 4px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 2px;
	overflow: hidden;
}

.wd-bar-fill {
	height: 100%;
	background: linear-gradient(90deg, #00e5ff, rgba(0, 229, 255, 0.4));
	border-radius: 2px;
	transition: width 0.3s ease;
	width: 0%;
}

.wd-stat-num {
	font-family: 'Share Tech Mono', monospace;
	font-size: 10px;
	color: #78909c;
	min-width: 50px;
	text-align: right;
}

.weapon-equip-btn {
	width: 100%;
	font-family: 'Rajdhani', sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 3px;
	color: #00e5ff;
	background: rgba(0, 229, 255, 0.08);
	border: 1px solid rgba(0, 229, 255, 0.3);
	border-radius: 3px;
	padding: 10px;
	cursor: pointer;
	transition: all 0.15s;
}

.weapon-equip-btn:hover {
	background: rgba(0, 229, 255, 0.15);
	border-color: rgba(0, 229, 255, 0.5);
}

.weapon-equip-btn.equipped-flash {
	color: #76ff03;
	border-color: rgba(118, 255, 3, 0.5);
	background: rgba(118, 255, 3, 0.1);
}

/* ═══════════════════════════════════════════
   OPERATORS TAB (placeholder)
   ═══════════════════════════════════════════ */
.coming-soon-panel {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.coming-soon-icon {
	font-size: 48px;
	color: rgba(0, 229, 255, 0.15);
}

.coming-soon-text {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 6px;
	color: rgba(0, 229, 255, 0.2);
}

.coming-soon-sub {
	font-size: 12px;
	color: #37474f;
	letter-spacing: 2px;
}

/* ═══════════════════════════════════════════
   SETTINGS: RETURN TO LOBBY BUTTON
   ═══════════════════════════════════════════ */
#settings-return-lobby {
	font-family: 'Rajdhani', 'Segoe UI', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #ff6b35;
	background: rgba(255, 107, 53, 0.05);
	border: 1px solid rgba(255, 107, 53, 0.2);
	border-radius: 3px;
	padding: 6px 20px;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s, background 0.15s;
	margin-left: 10px;
}

#settings-return-lobby:hover {
	color: #ff8a50;
	border-color: rgba(255, 107, 53, 0.4);
	background: rgba(255, 107, 53, 0.1);
}

/* ═══════════════════════════════════════════
   MOBILE RESPONSIVE — LOBBY
   ═══════════════════════════════════════════ */
@media (max-width: 900px) {
	/* ─── TOPBAR ─── */
	.lobby-topbar {
		padding: 0 10px;
		height: 46px;
		flex-wrap: nowrap;
	}
	.lobby-topbar-left {
		gap: 8px;
	}
	.lobby-logo-text {
		font-size: 13px;
		letter-spacing: 2px;
	}
	.lobby-logo-icon { font-size: 14px; }
	.lobby-status { display: none; }

	.lobby-nav-btn {
		font-size: 10px;
		padding: 6px 10px;
		letter-spacing: 1px;
	}
	.lobby-topbar-right { display: none; }

	/* ─── MAIN CONTENT: stack vertically ─── */
	.lobby-main {
		flex-direction: column;
		padding: 8px;
		gap: 8px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.lobby-left,
	.lobby-right {
		width: 100%;
		flex-shrink: 0;
	}

	.lobby-center {
		display: none; /* hide the decorative center panel */
	}

	/* Collapse some panels on mobile to reduce scrolling */
	.lobby-social-panel { display: none; }
	.lobby-party-panel { display: none; }

	/* Stats grid: single row */
	.lobby-stats-panel .stats-grid {
		grid-template-columns: repeat(4, 1fr);
	}
	.stat-val { font-size: 16px; }

	/* Player card: horizontal layout */
	.lobby-player-card .player-card-body {
		flex-direction: row;
		align-items: center;
		padding: 8px 12px;
		gap: 12px;
	}
	.player-rank-badge { display: flex; align-items: center; gap: 6px; }
	.rank-icon { font-size: 20px; }
	.rank-label { margin-top: 0; }
	.player-name-row { flex: 1; }
	.player-name-input {
		font-size: 14px;
		text-align: left;
		padding: 8px 6px; /* bigger touch target */
	}

	/* Map buttons wrap */
	.map-select-row { flex-wrap: wrap; }
	.map-btn {
		padding: 6px 12px;
		font-size: 10px;
	}

	/* ─── BOTTOM BAR ─── */
	.lobby-bottombar {
		padding: 0 10px;
		height: auto;
		min-height: 56px;
		flex-wrap: wrap;
		gap: 6px;
		padding-top: 6px;
		padding-bottom: 6px;
	}
	.lobby-bottom-left { display: none; }
	.lobby-bottom-center {
		flex: 1;
		min-width: 0;
	}
	.mm-info { gap: 8px; flex-wrap: wrap; justify-content: center; }
	.mm-info-label { font-size: 7px; }
	.mm-info-val { font-size: 10px; }
	.mm-info-divider { height: 16px; }

	.start-match-btn {
		padding: 10px 20px;
	}
	.start-match-text {
		font-size: 13px;
		letter-spacing: 2px;
	}

	/* ─── LOADOUT TAB ─── */
	.lobby-tab-loadout .lobby-main {
		flex-direction: column;
	}
	.loadout-sidebar {
		width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 6px;
	}
	.loadout-equip-slot {
		flex: 1;
		min-width: 140px;
	}
	.loadout-detail-panel {
		width: 100%;
		order: -1;
	}
	.weapon-detail-preview { height: 100px; }

	.weapon-grid {
		padding: 8px;
		gap: 4px;
	}
	.weapon-grid-item {
		min-width: 120px;
		padding: 6px 10px;
	}
	.wgi-name { font-size: 12px; }
}

@media (max-width: 480px) {
	/* Extra-small phones */
	.lobby-topbar {
		height: 40px;
		padding: 0 6px;
	}
	.lobby-logo-text {
		font-size: 11px;
		letter-spacing: 1px;
	}
	.lobby-nav-btn {
		font-size: 9px;
		padding: 5px 6px;
		letter-spacing: 0.5px;
	}

	.lobby-main { padding: 4px; gap: 4px; }
	.panel-header { padding: 6px 8px; }
	.panel-header-label { font-size: 9px; letter-spacing: 1.5px; }

	.lobby-stats-panel .stats-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.loadout-sidebar { flex-direction: column; }
	.loadout-equip-slot { min-width: unset; }

	.start-match-btn {
		padding: 8px 14px;
		width: 100%;
		justify-content: center;
	}
	.lobby-bottom-right { width: 100%; }

	/* Bigger touch targets for inputs */
	.player-name-input { padding: 10px 8px; font-size: 16px; }
	.party-code-input { padding: 10px; font-size: 16px; }
	.party-btn { padding: 10px 14px; font-size: 12px; }
}