@font-face {
	font-family: "Academy";
	src: url("./fonts/Academy.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Academy Filled 3D";
	src: url("./fonts/AcademyFilled3D.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Space Wham";
	src: url("./fonts/SpaceWham.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--mobile-safe-top: env(safe-area-inset-top, 0px);
	--mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
	--font-game: "Space Wham", "Academy Filled 3D", "Academy", Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; font-family: var(--font-game); }
html,body { height: 100%; margin: 0; overscroll-behavior: none; }
body { background: #000; }
body.boot-splash-open {
	overflow: hidden;
}

#bootSplash {
	position: fixed;
	inset: 0;
	z-index: 5000;
	background: #000;
	padding: clamp(10px, 3vw, 22px);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	opacity: 1;
	transition: opacity 380ms ease;
}

#bootSplash.is-hiding {
	opacity: 0;
	pointer-events: none;
}

#bootSplash.hidden {
	display: none;
}

#bootSplash .boot-splash-video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center center;
	background: #000;
	opacity: 0;
	transition: opacity 180ms ease;
	pointer-events: none;
}

#bootSplash .boot-splash-video.is-visible {
	opacity: 1;
}

#bootSplash .boot-splash-video::-webkit-media-controls,
#bootSplash .boot-splash-video::-webkit-media-controls-start-playback-button,
#bootSplash .boot-splash-video::-webkit-media-controls-play-button {
	display: none !important;
	-webkit-appearance: none;
}

@media (pointer: fine) and (min-width: 921px) {
	#bootSplash {
		display: none !important;
	}
}

/* Force the custom font through all UI layers, even where older selectors set specific fonts. */
body * {
	font-family: var(--font-game) !important;
}

#c { display: block; width: 100vw; height: calc(100vh - 80px); background: #000; touch-action: none; }
#ui { height: 80px; background: #111; color: #eee; padding: 8px; }
#topbar { display:flex; justify-content: space-between; align-items: center; }
/* When the wave timer is visible, nudge the left/right control groups down to avoid visual overlap */
#topbar.wave-active #playerInfo,
#topbar.wave-active #controls,
#topbar.wave-active #eventLog,
#topbar.wave-active #scoreboard,
#topbar.wave-active #timerActions,
#topbar.wave-active #matchTimer {
	transform: translateY(14px);
}
#topbar #playerInfo, #topbar #controls { transition: transform 160ms ease; }

/* left actions area for special buttons moved out of main control group */
.left-actions { display:flex; gap:8px; align-items:center; margin-right:12px }

#timerActions { flex-wrap: wrap; row-gap: 6px; }
#timerActions button.small { margin-left:6px }

#commanderActions {
	margin-top: 8px;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 6px;
}
#commanderActions .small {
	width: 100%;
	margin-left: 0;
	min-height: 34px;
	padding: 7px 8px;
	font-size: 12px;
	line-height: 1.1;
	white-space: normal;
	border-radius: 10px;
}
#commanderActions #reinforceBtn {
	background: linear-gradient(180deg, #2f8fdb, #1f6fb3);
}

#mpSocialDock {
	position: fixed;
	top: calc(var(--mobile-safe-top) + 6px);
	right: 60px;
	width: clamp(110px, 15vw, 170px);
	z-index: 2290;
	display: grid;
	gap: 8px;
}

#mpSocialDock.hidden {
	display: none !important;
}

#mpSocialToggle {
	width: 100%;
	min-height: 38px;
	padding: 6px 8px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px;
	border-radius: 12px;
	border: 1px solid rgba(167, 217, 255, 0.34);
	background: linear-gradient(180deg, rgba(15, 34, 56, 0.96), rgba(7, 18, 33, 0.98));
	box-shadow: inset 0 1px 0 rgba(230, 246, 255, 0.14), 0 14px 28px rgba(0,0,0,0.34);
	color: #eef7ff;
	text-align: left;
	transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

#mpSocialToggle:hover {
	transform: translateY(-1px);
	border-color: rgba(198, 233, 255, 0.6);
	box-shadow: inset 0 1px 0 rgba(230, 246, 255, 0.18), 0 16px 30px rgba(0,0,0,0.38);
}

#mpSocialDock.is-open #mpSocialToggle {
	border-color: rgba(138, 224, 255, 0.72);
	box-shadow: inset 0 1px 0 rgba(238, 250, 255, 0.18), 0 18px 34px rgba(0,0,0,0.42);
}

#mpSocialToggle .mp-social-toggle-label {
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #99d6ff;
	white-space: nowrap;
}

#mpSocialToggle .mp-social-toggle-summary {
	display: none;
}

#mpSocialToggle .mp-social-toggle-count {
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: rgba(87, 181, 255, 0.18);
	border: 1px solid rgba(156, 221, 255, 0.28);
	font-size: 10px;
	font-weight: 700;
	color: #e9f7ff;
}

#mpSocialControls {
	margin-top: 0;
	padding: 8px;
	border-radius: 14px;
	background: linear-gradient(180deg, rgba(8, 25, 40, 0.94), rgba(4, 14, 24, 0.96));
	border: 1px solid rgba(145, 209, 255, 0.24);
	box-shadow: inset 0 1px 0 rgba(230, 246, 255, 0.08), 0 18px 40px rgba(0,0,0,0.42);
	backdrop-filter: blur(12px);
}

#mpSocialControls .mp-social-roster {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 8px;
}

#mpSocialControls .mp-social-player {
	width: 34px;
	height: 34px;
	padding: 0;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border-radius: 999px;
	border: 1px solid rgba(135, 198, 240, 0.22);
	background: linear-gradient(180deg, rgba(18, 42, 68, 0.92), rgba(9, 22, 41, 0.94));
	color: #edf8ff;
}

#mpSocialControls .mp-social-player:hover {
	border-color: rgba(176, 226, 255, 0.42);
	background: linear-gradient(180deg, rgba(25, 56, 88, 0.96), rgba(12, 30, 53, 0.96));
}

#mpSocialControls .mp-social-player.is-selected {
	border-color: rgba(110, 222, 255, 0.78);
	background: linear-gradient(180deg, rgba(28, 70, 102, 0.98), rgba(12, 36, 61, 0.98));
	box-shadow: inset 0 1px 0 rgba(240, 249, 255, 0.16), 0 10px 20px rgba(0,0,0,0.24);
}

#mpSocialControls .mp-social-player-swatch {
	width: 18px;
	height: 18px;
	border-radius: 999px;
	box-shadow: 0 0 0 1px rgba(4, 12, 20, 0.7), 0 0 14px currentColor;
}

#mpSocialControls .mp-social-emotes {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 6px;
}

#mpSocialControls .mp-emote-btn {
	min-height: 34px;
	padding: 6px;
	font-size: 18px;
	line-height: 1;
	border-radius: 9px;
	background: linear-gradient(180deg, rgba(40, 82, 122, 0.95), rgba(20, 46, 75, 0.95));
	border: 1px solid rgba(172, 221, 255, 0.34);
	box-shadow: 0 8px 16px rgba(0,0,0,0.28), inset 0 1px 0 rgba(240, 249, 255, 0.14);
}

#mpSocialControls .mp-alliance-target {
	min-height: 34px;
	width: 100%;
	padding: 6px 8px;
	border-radius: 9px;
	background: rgba(8, 15, 26, 0.9);
	color: #eaf5ff;
	border: 1px solid rgba(157, 208, 245, 0.34);
	font-size: 12px;
	outline: none;
}

#mpSocialControls .mp-alliance-target.hidden {
	display: none;
}

#mpSocialControls #mpAllianceRequestBtn {
	min-height: 34px;
	width: 100%;
	margin-top: 8px;
	padding: 7px 10px;
	font-size: 12px;
	background: linear-gradient(180deg, #2f8fdb, #1f6fb3);
}

#socialEmoteToast {
	position: fixed;
	left: 50%;
	top: calc(var(--mobile-safe-top) + 56px);
	transform: translate(-50%, -10px) scale(0.96);
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: min(280px, calc(100vw - 24px));
	padding: 10px 14px;
	border-radius: 16px;
	border: 1px solid rgba(161, 218, 255, 0.34);
	background: linear-gradient(180deg, rgba(12, 31, 52, 0.96), rgba(5, 16, 29, 0.98));
	box-shadow: 0 16px 34px rgba(0,0,0,0.34), inset 0 1px 0 rgba(233, 246, 255, 0.14);
	backdrop-filter: blur(12px);
	color: #eef8ff;
	opacity: 0;
	pointer-events: none;
	z-index: 2288;
	transition: opacity 160ms ease, transform 160ms ease;
}

#socialEmoteToast.is-live {
	opacity: 1;
	transform: translate(-50%, 0) scale(1);
}

#socialEmoteToast .social-emote-toast-swatch {
	width: 12px;
	height: 12px;
	flex: 0 0 auto;
	border-radius: 999px;
	background: #7fd1ff;
	box-shadow: 0 0 0 1px rgba(8, 16, 27, 0.74), 0 0 12px currentColor;
}

#socialEmoteToast .social-emote-toast-emoji {
	font-size: 28px;
	line-height: 1;
	filter: drop-shadow(0 4px 10px rgba(0,0,0,0.26));
}

#socialEmoteToast .social-emote-toast-label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #a9defe;
}

/* Green electronic style (for alternate timer and left special buttons) */
.elec-green { background: linear-gradient(180deg,#003a00,#002200); border-radius:8px; padding:8px 12px; border: 1px solid rgba(0,140,0,0.16); box-shadow: 0 8px 22px rgba(0,0,0,0.6), inset 0 2px 8px rgba(0,160,60,0.04); }
.elec-green .digits { color: #ffd800; text-shadow: 0 0 10px rgba(255,216,0,0.9), 0 1px 0 rgba(0,0,0,0.6); font-family: 'Courier New', Courier, monospace; font-weight:900 }
.btn-elec-green {
	background: linear-gradient(180deg,#168f3a,#0f6e2a);
	color: #ffd800;
	font-family: 'Courier New', Courier, monospace;
	font-weight: 900;
	padding: 10px 14px;
	border-radius: 10px;
	text-shadow: 0 0 10px rgba(255,216,0,0.9), 0 3px 0 rgba(0,0,0,0.6);
	box-shadow: 0 10px 26px rgba(0,0,0,0.6), inset 0 3px 10px rgba(0,160,60,0.06);
	border: 1px solid rgba(80,255,120,0.12);
}
.btn-elec-green.small { padding:8px 10px; font-size:16px }

/* Red electronic button style matching the match timer look */
.btn-elec {
	background: linear-gradient(180deg,#5a0000,#340000);
	color: #ffd800;
	font-family: 'Courier New', Courier, monospace;
	font-weight: 900;
	padding: 10px 14px;
	border-radius: 10px;
	text-shadow: 0 0 10px rgba(255,216,0,0.9), 0 3px 0 rgba(0,0,0,0.6);
	box-shadow: 0 10px 26px rgba(0,0,0,0.6), inset 0 3px 10px rgba(255,120,80,0.06);
	border: 1px solid rgba(255,80,80,0.22);
}
.btn-elec.small { padding:8px 10px; font-size:16px }
.btn-elec:active { transform: translateY(1px) }
/* Wave timer centered in topbar */
#waveTimer { position: absolute; left: 50%; transform: translateX(-50%); top: 12px; color: #fff; z-index: 950 }
#instructions { margin-top:6px; color:#ccc; font-size:13px }
button { background:#1a73e8; color:white; border: none; padding:8px 10px; border-radius:4px; cursor:pointer }
button:active { transform: translateY(1px) }

@keyframes tutorial-guide-pulse {
	0% { box-shadow: 0 0 0 rgba(255, 225, 90, 0.0), 0 0 0 rgba(255, 112, 72, 0.0); filter: brightness(1); }
	50% { box-shadow: 0 0 14px rgba(255, 225, 90, 0.85), 0 0 28px rgba(255, 112, 72, 0.55); filter: brightness(1.16); }
	100% { box-shadow: 0 0 0 rgba(255, 225, 90, 0.0), 0 0 0 rgba(255, 112, 72, 0.0); filter: brightness(1); }
}

#specialAttackBtn.tutorial-guide-glow,
#fortifyBtn.tutorial-guide-glow,
#mortalAttackBtn.tutorial-guide-glow,
#removeNodeBtn.tutorial-guide-glow,
#mobileActionToggle.tutorial-guide-glow,
#mobileSendToggle.tutorial-guide-glow,
#reinforceBtn.tutorial-guide-glow {
	animation: tutorial-guide-pulse 1.1s ease-in-out infinite;
	border-color: rgba(255, 230, 132, 0.95) !important;
	z-index: 2;
}

#waveTimer {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 6px;
	min-height: 40px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: bold;
	color: #fff;
	pointer-events: none; /* avoid intercepting clicks */
}

.wt-panel {
	pointer-events: auto; /* allow interactions if needed */
	background: rgba(0,0,0,0.45);
	padding: 4px 12px;
	border-radius: 18px;
	display: flex;
	align-items: center;
	gap: 6px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.wt-line {
	font-size: 28px;
	font-weight: 900;
	color: #ffd800;
	opacity: 1;
	display: flex;
	align-items: flex-end;
	gap: 2px;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	text-shadow: 0 0 12px rgba(255,216,0,0.5);
}

.wt-next {
	min-width: 2ch;
	text-align: right;
}

.wt-suffix {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.1;
	opacity: 0.95;
}

/* Pulse animation when less than 5s left */
@keyframes wt-pulse {
	0% { box-shadow: 0 0 0 0 rgba(255,0,0,0.0); }
	50% { box-shadow: 0 0 12px 6px rgba(255,0,0,0.10); }
	100% { box-shadow: 0 0 0 0 rgba(255,0,0,0.0); }
}

.wt-pulse {
	animation: wt-pulse 1s infinite ease-in-out;
}

/* Match duration timer (topbar) */
#matchTimer { position: relative; display:inline-block; min-width:56px; text-align:center; padding:6px 8px; border-radius:8px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.03); box-shadow: 0 2px 8px rgba(0,0,0,0.35); }
@media (max-width:600px){ #matchTimer { font-size:12px; min-width:48px; padding:4px 6px } }

/* Electronic LED style for match timer */
/* larger electronic display */
#matchTimer.elec { background: linear-gradient(180deg,#4e0000,#2a0000); border-radius:10px; padding:14px 18px; box-shadow: 0 12px 42px rgba(0,0,0,0.75), inset 0 4px 14px rgba(255,120,80,0.08); border: 1px solid rgba(255,80,80,0.22); transform: translateY(-2px); }
#matchTimer.elec .digits { font-family: 'Courier New', Courier, monospace; font-weight: 900; color: #ffd800; letter-spacing: 4px; font-size: 30px; line-height: 1; text-shadow: 0 0 18px rgba(255,216,0,1), 0 4px 0 rgba(0,0,0,0.6); display:inline-block; min-width:110px }
#matchTimer.elec .colon { display:inline-block; width:12px; text-align:center; color:#ffd800; opacity:1; transition: opacity 150ms linear }
#matchTimer.elec.is-compact { padding: 10px 12px; border-radius: 9px; }
#matchTimer.elec.is-compact .digits { font-size: 22px; letter-spacing: 2px; min-width: 84px; }
#matchTimer.elec.is-compact .colon { width: 9px; }
#matchTimer.elec.is-tight { padding: 8px 10px; border-radius: 8px; }
#matchTimer.elec.is-tight .digits { font-size: 18px; letter-spacing: 1px; min-width: 68px; }
#matchTimer.elec.is-tight .colon { width: 8px; }
#matchTimer.elec .colon.blink { animation: blink-colon 1s steps(1,start) infinite }
@keyframes blink-colon { 0% { opacity:1 } 50% { opacity:0 } 100% { opacity:1 } }

/* 7-seg like look: use letter-spacing and heavier weight; scale down on small screens */
@media (max-width:1200px){ #matchTimer.elec { padding:12px 16px } #matchTimer.elec .digits { font-size:26px; letter-spacing:3px } #matchTimer.elec .colon { width:12px } }
@media (max-width:900px){ #matchTimer.elec { padding:10px 12px } #matchTimer.elec .digits { font-size:22px; letter-spacing:2px } #matchTimer.elec .colon { width:10px } }
@media (max-width:600px){ #matchTimer.elec { padding:8px 10px } #matchTimer.elec .digits { font-size:18px; letter-spacing:1px } #matchTimer.elec .colon { width:8px } }
/* Topbar small buttons: modernized look */
.small { padding:8px 12px; border-radius:10px; font-size:13px; background: linear-gradient(180deg,#2f80ff,#1a5fe0); color: #fff; box-shadow: 0 6px 18px rgba(26,95,224,0.16); border: 1px solid rgba(255,255,255,0.06); transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease; }
.small:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(26,95,224,0.22); }
.small:active { transform: translateY(0); box-shadow: 0 6px 18px rgba(26,95,224,0.14); }
.small:focus { outline: none; box-shadow: 0 0 0 4px rgba(42,127,255,0.12); }
.small.ghost { background: transparent; color: #cfe3ff; border: 1px solid rgba(255,255,255,0.06); box-shadow: none }
.small.danger, .small.btn-danger { background: linear-gradient(180deg,#d64545,#b32f2f); box-shadow: 0 8px 22px rgba(211,47,47,0.16); }
.small[disabled], .small:disabled { opacity: 0.45; cursor: default; transform: none; box-shadow: none }

/* End match button: keep danger intent, but match the game's modern neon language */
#endGameBtn {
	font-family: var(--font-game);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #fff2f5;
	background: linear-gradient(165deg, rgba(177, 41, 68, 0.96), rgba(123, 20, 42, 0.98));
	border: 1px solid rgba(255, 173, 188, 0.5);
	text-shadow: 0 1px 0 rgba(40, 6, 14, 0.42);
	box-shadow: 0 10px 24px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255, 221, 229, 0.24), inset 0 -10px 18px rgba(48, 6, 18, 0.24);
}

#endGameBtn:hover {
	transform: translateY(-1px);
	border-color: rgba(255, 198, 208, 0.75);
	box-shadow: 0 14px 28px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255, 236, 241, 0.28), inset 0 -12px 20px rgba(56, 8, 20, 0.24);
}

#endGameBtn:active {
	transform: translateY(0);
}

#endGameBtn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px rgba(226, 76, 108, 0.24), 0 12px 24px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255, 236, 241, 0.3);
}

label { margin-left:10px }

/* danger / active action styles */
.btn-danger { background: #d32f2f !important; }
.active-action { box-shadow: 0 0 8px rgba(211,47,47,0.6); }

/* overlay / modal */
.overlay { position: fixed; left:0; top:0; right:0; bottom:0; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,0.6); z-index:1000 }
.overlay .panel { background:#1b1b1b; color:#eee; padding:24px; border-radius:8px; min-width:320px; text-align:center; position: relative; z-index: 1005; }
.overlay .panel h1 { margin: 0 0 12px 0 }
.overlay .panel .buttons { display:flex; gap:12px; justify-content:center }
.hidden { display:none }

#leaveConfirmModal {
	z-index: 1750;
	background: radial-gradient(circle at 50% 30%, rgba(10, 28, 43, 0.72), rgba(0, 0, 0, 0.82));
	backdrop-filter: blur(7px);
}

#leaveConfirmModal .leave-confirm-panel {
	width: min(92vw, 430px);
	min-width: 0;
	padding: 22px 20px 18px;
	text-align: center;
	border-radius: 16px;
	border: 1px solid rgba(164, 220, 255, 0.22);
	background: linear-gradient(180deg, rgba(10, 24, 39, 0.97), rgba(5, 12, 24, 0.98));
	box-shadow: 0 22px 52px rgba(0,0,0,0.56), inset 0 1px 0 rgba(230, 246, 255, 0.09);
}

#leaveConfirmModal .leave-confirm-title {
	margin: 0 auto;
	font-size: 28px;
	letter-spacing: 0.04em;
	color: #f4fbff;
	text-shadow: 0 2px 14px rgba(110, 201, 255, 0.16);
	text-align: center;
}

#leaveConfirmModal .leave-confirm-text {
	margin: 10px 0 0;
	font-size: 15px;
	line-height: 1.45;
	color: #c8d8e9;
}

#leaveConfirmModal .leave-confirm-actions {
	margin-top: 16px;
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	flex-wrap: wrap;
}

#leaveConfirmModal .leave-confirm-actions .big {
	min-width: 114px;
	padding: 10px 16px;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	transition: transform 120ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

#leaveConfirmModal #leaveConfirmCancel {
	background: rgba(255,255,255,0.03);
	color: #d6e6f6;
	border: 1px solid rgba(162, 200, 232, 0.34);
	box-shadow: inset 0 1px 0 rgba(226, 244, 255, 0.08);
}

#leaveConfirmModal #leaveConfirmCancel:hover {
	transform: translateY(-1px);
	border-color: rgba(197, 224, 247, 0.56);
	box-shadow: inset 0 1px 0 rgba(226, 244, 255, 0.1), 0 8px 18px rgba(0,0,0,0.32);
}

#leaveConfirmModal #leaveConfirmOk {
	color: #fff3f5;
	background: linear-gradient(165deg, rgba(182, 39, 68, 0.98), rgba(124, 18, 42, 0.98));
	border: 1px solid rgba(255, 171, 188, 0.56);
	text-shadow: 0 1px 0 rgba(31, 5, 12, 0.42);
	box-shadow: 0 10px 22px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255, 228, 235, 0.24);
}

#leaveConfirmModal #leaveConfirmOk:hover {
	transform: translateY(-1px);
	border-color: rgba(255, 204, 215, 0.8);
	box-shadow: 0 12px 24px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255, 236, 241, 0.3);
}

#leaveConfirmModal .leave-confirm-actions .big:active {
	transform: translateY(0);
}

#leaveConfirmModal .leave-confirm-actions .big:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px rgba(117, 196, 255, 0.22);
}

@media (max-width: 640px) {
	#leaveConfirmModal .leave-confirm-panel {
		padding: 18px 14px 14px;
	}

	#leaveConfirmModal .leave-confirm-title {
		font-size: 22px;
	}

	#leaveConfirmModal .leave-confirm-text {
		font-size: 14px;
	}

	#leaveConfirmModal .leave-confirm-actions {
		justify-content: stretch;
	}

	#leaveConfirmModal .leave-confirm-actions .big {
		width: 100%;
	}
}

#allianceRequestModal,
#allianceResponseModal {
	z-index: 1780;
	align-items: flex-start;
	justify-content: flex-end;
	padding: calc(var(--mobile-safe-top) + 60px) 14px 14px;
	background: transparent;
	backdrop-filter: none;
	pointer-events: none;
}

#allianceRequestModal::before,
#allianceResponseModal::before {
	display: none;
}

#allianceRequestModal .alliance-request-panel,
#allianceResponseModal .alliance-request-panel {
	width: min(94vw, 380px);
	min-width: 0;
	padding: 18px 16px 14px;
	text-align: left;
	border-radius: 16px;
	border: 1px solid rgba(154, 215, 255, 0.26);
	background: linear-gradient(180deg, rgba(8, 24, 39, 0.97), rgba(6, 14, 27, 0.98));
	box-shadow: 0 20px 48px rgba(0,0,0,0.56), inset 0 1px 0 rgba(224, 244, 255, 0.1);
	pointer-events: auto;
}

#allianceRequestModal .alliance-request-head,
#allianceResponseModal .alliance-request-head {
	display: flex;
	align-items: center;
	gap: 12px;
}

#allianceRequestModal .alliance-request-avatar,
#allianceResponseModal .alliance-request-avatar {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	flex: 0 0 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	font-weight: 700;
	color: #f4faff;
	background: linear-gradient(180deg, rgba(60, 145, 212, 0.96), rgba(32, 95, 151, 0.98));
	border: 1px solid rgba(199, 234, 255, 0.52);
	box-shadow: 0 8px 18px rgba(0,0,0,0.34), inset 0 1px 0 rgba(247, 253, 255, 0.3);
}

#allianceRequestModal .alliance-request-copy,
#allianceResponseModal .alliance-request-copy {
	min-width: 0;
}

#allianceRequestModal .alliance-request-title,
#allianceResponseModal .alliance-request-title {
	margin: 0;
	font-size: 24px;
	letter-spacing: 0.04em;
	color: #f4fbff;
	text-shadow: 0 2px 12px rgba(100, 197, 255, 0.16);
}

#allianceRequestModal .alliance-request-text,
#allianceResponseModal .alliance-request-text {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.4;
	color: #c9daeb;
}

#allianceRequestModal .alliance-request-actions,
#allianceResponseModal .alliance-request-actions {
	margin-top: 14px;
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	flex-wrap: wrap;
}

#allianceRequestModal .alliance-request-actions .big,
#allianceResponseModal .alliance-request-actions .big {
	min-width: 118px;
	padding: 10px 14px;
	border-radius: 11px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

@media (max-width: 640px) {
	#allianceRequestModal,
	#allianceResponseModal {
		justify-content: center;
		padding: calc(var(--mobile-safe-top) + 72px) 10px 10px;
	}

	#allianceRequestModal .alliance-request-panel,
	#allianceResponseModal .alliance-request-panel {
		padding: 14px 12px 12px;
	}

	#allianceRequestModal .alliance-request-title,
	#allianceResponseModal .alliance-request-title {
		font-size: 20px;
	}

	#allianceRequestModal .alliance-request-actions,
	#allianceResponseModal .alliance-request-actions {
		justify-content: stretch;
	}

	#allianceRequestModal .alliance-request-actions .big,
	#allianceResponseModal .alliance-request-actions .big {
		width: 100%;
	}
}

/* Gamey main menu styles */
.game-menu { max-width:760px; width:90%; padding:28px; box-shadow: 0 12px 40px rgba(0,0,0,0.6); border-radius:12px; background: linear-gradient(180deg, rgba(24,24,28,0.95), rgba(12,12,16,0.95)); border: 1px solid rgba(255,255,255,0.03); }
.game-title { font-family: 'Segoe UI', Roboto, 'Press Start 2P', monospace; letter-spacing: 6px; font-size:48px; margin:0; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,0.6), 0 8px 32px rgba(30,144,255,0.06); }
.game-sub { color:#cfd8dc; margin-top:6px; font-size:14px }
.menu-top { text-align:center; margin-bottom:12px }
.menu-body { display:flex; flex-direction:column; gap:12px; align-items:center }
.form-row { width:100%; display:flex; gap:12px; justify-content:center; align-items:center }
.small-input { width:120px; padding:6px 8px; border-radius:6px; border:1px solid rgba(255,255,255,0.06); background:rgba(255,255,255,0.03); color:#fff }
.menu-footer { margin-top:10px; font-size:12px; color:#9aa0a6 }
.mobile-note { width:100%; padding:10px 12px; border-radius:10px; background: rgba(12,57,42,0.75); color:#d4f2e4; font-size:12px; text-align:center; border:1px solid rgba(132,255,205,0.12); }
.menu-section { width:100%; display:flex; flex-direction:column; gap:10px; padding:14px; border-radius:16px; background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.05); box-shadow: inset 0 1px 0 rgba(255,255,255,0.02); }
.section-label { font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:#8be0c0; font-weight:700; }
.compact-fields { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px; padding:0; background:none; border:none; box-shadow:none; }
.menu-field { margin:0; display:flex; flex-direction:column; gap:8px; padding:14px; border-radius:16px; background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.025)); border:1px solid rgba(255,255,255,0.05); }
.menu-field span { font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:#bdd8cd; }
.menu-field .small-input { width:100%; margin:0; height:42px; border-radius:12px; text-align:center; font-size:18px; font-weight:700; background: rgba(6,10,9,0.55); }
.chip-group { display:grid; gap:10px; }
.chip-group-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.buttons .big { padding:12px 20px; font-size:18px; border-radius:8px; background: linear-gradient(180deg,#2a7fff,#1a5fe0); box-shadow: 0 8px 24px rgba(26,95,224,0.28); border:none }
.buttons .big:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(26,95,224,0.32) }
.buttons .ghost { padding:10px 16px; background: transparent; color:#cfe3ff; border:1px solid rgba(255,255,255,0.06); border-radius:8px }

/* Main menu vertical layout */
.main-menu .menu-center { display:flex; flex-direction:row; gap:20px; align-items:center; justify-content:space-between }
.main-menu .big-buttons { display:flex; flex-direction:column; gap:14px; align-items:center; width:320px }
.main-menu .menu-secondary-buttons { display:flex; flex-direction:column; gap:14px; width:100%; }
.main-menu .big { width:320px; padding:16px 18px; font-size:20px; border-radius:12px; border:none }
.main-menu .big.primary { background: linear-gradient(180deg,#ff8a00,#ff5e00); box-shadow: 0 12px 30px rgba(255,94,0,0.28); color:#fff }
.main-menu .big.ghost { background: rgba(255,255,255,0.03); color:#dcecff; border:1px solid rgba(255,255,255,0.06) }
.main-menu .menu-controls { flex:1; display:flex; flex-direction:column; gap:12px; align-items:center }

/* Animated background accent for menu */
.overlay.main-menu::before { content: ''; position: absolute; left:0; right:0; top:0; bottom:0; /* subtle neon green glows */ background: radial-gradient(circle at 12% 28%, rgba(0,255,140,0.06), transparent 6%), radial-gradient(circle at 86% 72%, rgba(0,200,120,0.05), transparent 8%); pointer-events:none; z-index:995; }
.overlay.main-menu .panel { backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.04); }

@media (max-width:900px){ .main-menu .menu-center { flex-direction:column; } .main-menu .big-buttons { width:100% } .main-menu .big { width:100% } }

/* Decorative animated background for main menu */
.menu-bg { position: absolute; left:0; right:0; top:0; bottom:0; z-index:990; pointer-events:none; background: #000; mix-blend-mode: screen; }
.menu-bg::before { content: ''; position:absolute; left:-20%; top:-10%; width:60%; height:60%; background: radial-gradient(circle at 30% 30%, rgba(0,255,150,0.22), rgba(0,200,120,0.14) 40%, transparent 60%); filter: blur(40px); transform: translateZ(0); animation: blob-move 18s linear infinite; }
.menu-bg::after { content: ''; position:absolute; right:-20%; bottom:-10%; width:60%; height:60%; background: radial-gradient(circle at 70% 70%, rgba(0,255,120,0.18), rgba(0,200,100,0.12) 36%, transparent 60%); filter: blur(34px); transform: translateZ(0); animation: blob-move-rev 20s linear infinite; }
@keyframes blob-move { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(6%,4%) scale(1.06); } 100% { transform: translate(0,0) scale(1); } }
@keyframes blob-move-rev { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(-6%,-4%) scale(1.04); } 100% { transform: translate(0,0) scale(1); } }

/* floating node elements inside the menu background */
.menu-nodes { position: absolute; left:0; top:0; right:0; bottom:0; pointer-events: none; z-index: 960; }
.menu-nodes .mn { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(180,255,200,0.98), rgba(0,220,120,0.92)); box-shadow: 0 0 18px rgba(0,255,140,0.28), 0 0 36px rgba(0,200,100,0.18); opacity: 0.95; transform: translateZ(0); }
.menu-nodes .mn.small { width:8px; height:8px; box-shadow: 0 0 12px rgba(0,255,140,0.20); opacity:0.85 }
.menu-nodes .mn.medium { width:14px; height:14px; box-shadow: 0 0 20px rgba(0,255,140,0.30); }
.menu-nodes .mn.large { width:20px; height:20px; box-shadow: 0 0 30px rgba(0,255,140,0.36); }
.menu-nodes .mn.move { animation: float-bob 6s ease-in-out infinite; }
@keyframes float-bob { 0% { transform: translateY(0) translateX(0) scale(1); } 50% { transform: translateY(-18px) translateX(8px) scale(1.03); } 100% { transform: translateY(0) translateX(0) scale(1); } }

/* hide topbar actions while menu open (applied via .menu-open on body by JS) */
body.menu-open #ui { visibility: hidden; }
body.menu-open #c { visibility: hidden; }

/* chip style for radio/checkbox options in menu */
.hidden-input { display:none }
.chip { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:8px 12px; border-radius:999px; background: rgba(255,255,255,0.03); color:#e6f0ff; border:1px solid rgba(255,255,255,0.04); cursor:pointer; font-size:14px; text-align:center }
.chip:hover { background: rgba(255,255,255,0.05) }
.hidden-input:checked + .chip { background: linear-gradient(180deg,#46a4ff,#2a7fff); color: #fff; box-shadow: 0 8px 30px rgba(42,127,255,0.18) }
.map-mode-row { display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 12px; align-items: center; justify-items: center; width: 100%; }
/* ensure chips align nicely in the grid */
.map-mode-row .chip { width: 100%; text-align: center; padding: 10px 14px; }
@media (max-width:520px){ .map-mode-row { grid-template-columns: 1fr; gap: 8px } .map-mode-row .chip { width: auto } }

.leaderboard-menu { max-width: 700px; width: min(92vw, 700px); text-align: left; }
.leaderboard-title { margin: 0; font-size: 30px; letter-spacing: 0.04em; }
.leaderboard-sub { margin: 8px 0 0; color: #b9c9c2; font-size: 14px; }
.leaderboard-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.lb-mode-btn { min-height: 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); color: #e4edf8; font-size: 13px; padding: 8px 10px; }
.lb-mode-btn.active { background: linear-gradient(180deg,#46a4ff,#2a7fff); color: #fff; border-color: rgba(114,180,255,0.65); box-shadow: 0 8px 20px rgba(42,127,255,0.22); }
.leaderboard-current { margin-top: 12px; font-size: 12px; color: #8be0c0; letter-spacing: 0.08em; text-transform: uppercase; }
.leaderboard-table-wrap {
	margin-top: 10px;
	border: 1px solid rgba(255,255,255,0.07);
	border-radius: 14px;
	background: rgba(8,13,12,0.65);
	max-height: min(52dvh, 460px);
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-y;
}
.leaderboard-table { width: 100%; border-collapse: collapse; }
.leaderboard-table thead th { text-align: left; font-size: 12px; color: #b7d0c2; letter-spacing: 0.08em; text-transform: uppercase; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.leaderboard-table thead th:last-child { text-align: right; }
.leaderboard-table tbody td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.04); color: #ecf3ff; font-size: 14px; }
.leaderboard-table tbody tr:last-child td { border-bottom: none; }
.leaderboard-table tbody td:last-child { text-align: right; font-weight: 700; color: #9ce8c9; }
.leaderboard-rank { color: #9bb0bf; width: 44px; }
.leaderboard-empty { padding: 16px 14px; color: #98aaa2; font-size: 13px; }
.leaderboard-actions { margin-top: 14px; display: flex; justify-content: flex-end; }

.mp-color-lobby-menu {
	max-width: 560px;
	width: min(92vw, 560px);
	max-height: min(94dvh, 980px);
	text-align: left;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-y;
}
.mp-color-countdown { margin: 8px 0 12px; color: #9ce8c9; font-size: 22px; font-weight: 800; letter-spacing: 0.04em; }
.mp-color-choice-label,
.mp-color-player-label { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #b7d0c2; margin-bottom: 8px; }
.mp-color-player-label { margin-top: 8px; }
.mp-color-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.mp-lobby-select { width: 100%; min-height: 42px; margin-bottom: 4px; }
.mp-skin-choice-grid,
.mp-effect-choice-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 4px;
}
.mp-skin-choice-card,
.mp-effect-choice-card {
	padding: 10px 8px;
	border-radius: 12px;
	border: 1px solid rgba(188, 128, 248, 0.34);
	background: linear-gradient(180deg, rgba(28, 12, 49, 0.88), rgba(12, 6, 24, 0.95));
	display: grid;
	gap: 7px;
	justify-items: center;
	color: #f8eeff;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.mp-skin-choice-card:hover,
.mp-effect-choice-card:hover {
	transform: translateY(-1px);
	border-color: rgba(220, 178, 255, 0.6);
}
.mp-skin-choice-card.active,
.mp-effect-choice-card.active {
	border-color: rgba(238, 204, 255, 0.9);
	box-shadow: inset 0 1px 0 rgba(255, 234, 255, 0.26), 0 0 0 1px rgba(196, 120, 255, 0.3), 0 0 16px rgba(157, 81, 255, 0.32);
}
.mp-skin-choice-card.locked,
.mp-effect-choice-card.locked {
	border-color: rgba(206, 160, 255, 0.6);
	background: linear-gradient(180deg, rgba(30, 14, 48, 0.9), rgba(14, 7, 26, 0.96));
	box-shadow: inset 0 1px 0 rgba(244, 221, 255, 0.1), 0 0 0 1px rgba(179, 106, 255, 0.2), 0 0 12px rgba(126, 57, 212, 0.2);
	cursor: not-allowed;
}
.mp-skin-choice-card.locked .mp-skin-card-node,
.mp-effect-choice-card.locked .mp-effect-card-node {
	filter: saturate(0.5) brightness(0.82);
}
.mp-skin-card-node {
	--pers-color: #00D9FF;
	width: 74px;
	height: 74px;
	border-radius: 999px;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: radial-gradient(circle at 34% 30%, rgba(230, 248, 255, 0.92) 0%, var(--pers-color) 36%, rgba(3, 12, 28, 0.98) 84%);
	border: 1px solid rgba(242, 229, 255, 0.34);
	box-shadow: 0 0 0 1px rgba(226, 204, 255, 0.18), 0 0 18px rgba(134, 96, 255, 0.3), inset 0 1px 0 rgba(255, 248, 255, 0.42);
}
.mp-effect-card-node {
	--pers-color: #00D9FF;
	width: 74px;
	height: 74px;
	border-radius: 999px;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: radial-gradient(circle at 34% 30%, rgba(230, 248, 255, 0.92) 0%, var(--pers-color) 36%, rgba(3, 12, 28, 0.98) 84%);
	border: 1px solid rgba(242, 229, 255, 0.34);
	box-shadow: 0 0 0 1px rgba(226, 204, 255, 0.18), 0 0 18px rgba(134, 96, 255, 0.3), inset 0 1px 0 rgba(255, 248, 255, 0.42);
}
.mp-skin-card-node.pers-node-preview-canvas-host {
	background: transparent;
	border-color: rgba(242, 229, 255, 0.34);
}
.mp-effect-card-node.pers-node-preview-canvas-host {
	background: transparent;
	border-color: rgba(242, 229, 255, 0.34);
}
.mp-skin-card-node .pers-node-preview-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
}
.mp-effect-card-node .pers-node-preview-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
}
.mp-skin-choice-label {
	font-size: 11px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-align: center;
	color: rgba(246, 229, 255, 0.95);
}
.mp-skin-choice-tag {
	display: none;
	justify-self: stretch;
	padding: 4px 6px;
	border-radius: 8px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: center;
	pointer-events: none;
}
.mp-skin-choice-card.locked .mp-skin-choice-tag,
.mp-effect-choice-card.locked .mp-skin-choice-tag {
	display: block;
}
.mp-skin-choice-card.locked.locked-by-other .mp-skin-choice-tag,
.mp-effect-choice-card.locked.locked-by-other .mp-skin-choice-tag {
	border: 1px solid rgba(167, 255, 219, 0.56);
	background: linear-gradient(180deg, rgba(22, 129, 89, 0.9), rgba(10, 88, 56, 0.9));
	color: #d8fff1;
}
.mp-skin-choice-card.locked.locked-by-purchase .mp-skin-choice-tag,
.mp-effect-choice-card.locked.locked-by-purchase .mp-skin-choice-tag {
	border: 1px solid rgba(236, 197, 255, 0.68);
	background: linear-gradient(180deg, rgba(117, 53, 173, 0.94), rgba(74, 24, 126, 0.94));
	color: #fff3ff;
	box-shadow: 0 3px 10px rgba(50, 8, 92, 0.38);
}
.mp-color-option { width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; border: 2px solid rgba(255,255,255,0.24); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2); cursor: pointer; transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease; }
.mp-color-option:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.22); }
.mp-color-option.active { border-color: #ffffff; box-shadow: 0 0 0 3px rgba(140,255,215,0.32), 0 8px 16px rgba(0,0,0,0.28); }
.mp-color-option.locked,
.mp-color-option:disabled { opacity: 0.28; cursor: not-allowed; filter: grayscale(0.65); transform: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3); }
.mp-color-player-list { border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; background: rgba(8,13,12,0.65); max-height: 220px; overflow: auto; }
.mp-color-player-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.mp-color-player-row:last-child { border-bottom: none; }
.mp-color-swatch { width: 18px; height: 18px; border-radius: 5px; box-shadow: 0 0 0 1px rgba(0,0,0,0.45) inset; }
.mp-color-player-name { font-size: 15px; font-weight: 800; color: #f4fbff; text-shadow: 0 1px 8px rgba(0,0,0,0.4); }
.mp-color-player-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mp-color-player-cosmetics { font-size: 11px; color: #c6d8ff; letter-spacing: 0.02em; }
.mp-color-actions { margin-top: 16px; display: flex; justify-content: flex-end; }

@media (max-width: 700px){
	.leaderboard-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* small decorative animated background for overlay */
.overlay::before { content: ''; position: absolute; left:0; right:0; top:0; bottom:0; background: radial-gradient(circle at 20% 30%, rgba(0,230,120,0.04), transparent 8%), radial-gradient(circle at 80% 70%, rgba(0,200,110,0.03), transparent 8%); pointer-events:none; z-index:995; }

@media (max-width:600px){ .game-title { font-size:32px; letter-spacing:3px } .buttons .big { font-size:16px } .game-menu { padding:18px } }

body.mobile-ui .overlay.main-menu { align-items:center; justify-content:center; overflow:auto; overscroll-behavior:none; padding: calc(var(--mobile-safe-top) + 8px) 10px calc(var(--mobile-safe-bottom) + 10px); background: linear-gradient(180deg, rgba(4,10,8,0.9), rgba(0,0,0,0.95)); }
body.mobile-ui .overlay.main-menu::before { display:none; }
body.mobile-ui .overlay.main-menu .menu-bg { display:none; }
body.mobile-ui .overlay.main-menu .panel { backdrop-filter: blur(12px); }
body.mobile-ui .main-menu .game-menu { width:min(100%, 430px); max-width:none; height:auto; max-height:calc(100dvh - var(--mobile-safe-top) - var(--mobile-safe-bottom) - 18px); min-height:0; overflow-y:auto; margin:0 auto; padding: 14px 14px 16px; border-radius:24px; background: linear-gradient(180deg, rgba(19,24,23,0.96), rgba(10,13,12,0.98)); box-shadow: 0 24px 70px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04); display:flex; flex-direction:column; justify-content:flex-start; gap:12px; }
body.mobile-ui .main-menu .menu-top { margin-bottom:0; }
body.mobile-ui .main-menu .game-title { font-size: clamp(28px, 8.8vw, 38px); letter-spacing:3px; }
body.mobile-ui .main-menu .game-sub { max-width: 240px; margin: 6px auto 0; line-height: 1.25; font-size: 12px; color:#d6e5dd; }
body.mobile-ui .main-menu .menu-center { flex-direction:column; align-items:stretch; justify-content:flex-start; gap:12px; }
body.mobile-ui .main-menu .big-buttons { width:100%; gap:10px; }
body.mobile-ui .main-menu .menu-hero { width:100%; min-height:52px; font-size:20px; border-radius:18px; }
body.mobile-ui .main-menu .menu-secondary-buttons { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:8px; width:100%; }
body.mobile-ui .main-menu .big { width:100%; min-height:46px; padding:12px 10px; font-size:14px; line-height:1.15; border-radius:15px; white-space:normal; }
body.mobile-ui .main-menu .big.ghost { background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02)); }
body.mobile-ui .main-menu .menu-controls { gap:10px; align-items:stretch; flex:0 0 auto; }
body.mobile-ui .main-menu #mobilePresetNote { display:none !important; }
body.mobile-ui .main-menu .mobile-note { font-size:11px; line-height:1.25; border-radius:12px; padding:8px 10px; }
body.mobile-ui .main-menu .menu-section { gap:8px; padding:10px; border-radius:16px; }
body.mobile-ui .main-menu .section-label { font-size:10px; }
body.mobile-ui .main-menu .compact-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap:8px; }
body.mobile-ui .main-menu .menu-field { padding:10px; gap:6px; }
body.mobile-ui .main-menu .menu-field span { font-size:11px; }
body.mobile-ui .main-menu .menu-field .small-input { height:40px; font-size:18px; }
body.mobile-ui .main-menu .chip-group-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.mobile-ui .main-menu .chip { min-height:38px; border-radius:14px; font-size:12px; padding:8px 6px; }
body.mobile-ui .main-menu .map-mode-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap:8px; }
body.mobile-ui .main-menu .map-mode-row .chip { width:100%; min-height:44px; white-space:normal; line-height:1.15; }
body.mobile-ui .main-menu .menu-footer { display:none; }
body.mobile-ui .main-menu .leaderboard-menu { width:min(100%, 430px); }
body.mobile-ui .main-menu .leaderboard-title { font-size: 24px; }
body.mobile-ui .main-menu .leaderboard-sub { font-size: 12px; }
body.mobile-ui .main-menu .leaderboard-current { font-size: 11px; }
body.mobile-ui .main-menu .leaderboard-table thead th { font-size: 11px; padding: 9px 10px; }
body.mobile-ui .main-menu .leaderboard-table tbody td { font-size: 13px; padding: 9px 10px; }
body.mobile-ui .main-menu .mp-color-lobby-menu { width: min(100%, 430px); }
body.mobile-ui .main-menu .mp-color-countdown { font-size: 20px; margin: 6px 0 10px; }
body.mobile-ui .main-menu .mp-color-grid { gap: 8px; }
body.mobile-ui .main-menu .mp-skin-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
body.mobile-ui .main-menu .mp-effect-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
body.mobile-ui .main-menu .mp-skin-choice-card,
body.mobile-ui .main-menu .mp-effect-choice-card { padding: 8px 7px; border-radius: 11px; gap: 6px; }
body.mobile-ui .main-menu .mp-skin-card-node { width: 62px; height: 62px; }
body.mobile-ui .main-menu .mp-effect-card-node { width: 62px; height: 62px; }
body.mobile-ui .main-menu .mp-skin-choice-label { font-size: 10px; }
body.mobile-ui .main-menu .mp-lobby-select { min-height: 40px; }
body.mobile-ui .main-menu .mp-color-option { border-radius: 10px; }
body.mobile-ui .main-menu .mp-color-player-list { max-height: 190px; }
body.mobile-ui .main-menu .mp-color-player-row { padding: 9px 10px; }

@media (max-width:520px){
	body.mobile-ui .main-menu .game-menu { width:100%; }
	body.mobile-ui .main-menu .menu-secondary-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.mobile-ui .main-menu .compact-fields { grid-template-columns: 1fr 1fr; }
	body.mobile-ui .main-menu .chip-group-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	body.mobile-ui .main-menu .map-mode-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.mobile-ui .main-menu .leaderboard-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width:380px){
	body.mobile-ui .main-menu .game-title { font-size:26px; }
	body.mobile-ui .main-menu .big { font-size:13px; }
	body.mobile-ui .main-menu .chip { font-size:11px; }
}

/* Tutorial bubble (in-game) */
.tutorial-bubble { position: absolute; left: 24px; top: 60px; max-width: 460px; background: rgba(20,20,22,0.95); color: #fff; padding: 14px 14px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.06); box-shadow: 0 12px 40px rgba(0,0,0,0.6); z-index: 1200 }
.tutorial-bubble .t-header { display:flex; align-items:center; gap:10px; margin-bottom:8px }
.tutorial-bubble .t-avatar { width:68px; height:68px; flex: 0 0 68px; border-radius:50%; object-fit:cover; border:2px solid #6deaff; box-shadow: 0 0 16px rgba(0,217,255,0.38) }
.tutorial-bubble .t-head-copy { display:flex; flex-direction:column; min-width:0 }
.tutorial-bubble .t-title,
.tutorial-bubble .t-speaker,
.tutorial-bubble .t-body,
.tutorial-bubble .t-controls button { font-family: "Bahnschrift", "Segoe UI", "Trebuchet MS", sans-serif !important; letter-spacing: 0.2px }
.tutorial-bubble .t-title { font-weight:700; font-size:11px; line-height:1.25; opacity:.9 }
.tutorial-bubble .t-speaker { font-size:13px; font-weight:700; color:#eaf7ff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.tutorial-bubble .t-body-wrap { position:relative }
.tutorial-bubble .t-body { font-size:12px; line-height:1.45; color:#dfe7eb; background: rgba(12,19,33,0.86); border: 1px solid rgba(109,234,255,0.25); border-radius: 10px; padding: 10px 12px; position:relative; overflow-wrap: break-word }
.tutorial-bubble .t-body::before { content:''; position:absolute; left:-6px; top:14px; width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent; border-right:6px solid rgba(109,234,255,0.45) }
.tutorial-bubble .t-controls { display:flex; gap:8px; justify-content:flex-end; margin-top:10px }
.tutorial-bubble .t-controls button { padding:6px 10px; border-radius:8px; font-size:11px; min-height:30px }
.tutorial-bubble.speaker-boss .t-header { flex-direction:row-reverse }
.tutorial-bubble.speaker-boss .t-avatar { border-color:#ff7b93; box-shadow: 0 0 14px rgba(255,42,79,0.35) }
.tutorial-bubble.speaker-boss .t-head-copy { align-items:flex-end; text-align:right }
.tutorial-bubble.speaker-boss .t-body { border-color: rgba(255,123,147,0.32) }
.tutorial-bubble.speaker-boss .t-body::before { left:auto; right:-6px; border-right:none; border-left:6px solid rgba(255,123,147,0.45) }
.tutorial-bubble.hidden { display:none }

@media (max-width:700px){
	.tutorial-bubble { left: 12px; top: calc(var(--mobile-safe-top) + 58px); max-width: min(94vw, 460px); padding: 12px }
	.tutorial-bubble .t-avatar { width:58px; height:58px; flex: 0 0 58px }
	.tutorial-bubble .t-title { font-size: 10px }
	.tutorial-bubble .t-speaker { font-size: 12px }
	.tutorial-bubble .t-body { font-size: 11px }
	.tutorial-bubble .t-controls button { font-size: 10px; min-height: 28px }
}

/* Tutorial modal content scale-down */
#tutorialModal .tutorial-panel h2 { font-size: 22px; }
#tutorialModal #tutorialContent { font-size: 13px !important; line-height: 1.45; }
#tutorialModal #tutorialContent h3 { font-size: 15px; margin: 0 0 8px; }
#tutorialModal #tutorialContent p,
#tutorialModal #tutorialContent li { font-size: 13px; line-height: 1.45; }
#tutorialModal button { font-size: 12px; }

#resultModal .result-panel {
	width: min(94vw, 540px);
	max-width: 540px;
	padding: 16px 16px 14px;
	border-radius: 18px;
	text-align: left;
	background: linear-gradient(180deg, rgba(11, 26, 47, 0.94), rgba(6, 15, 31, 0.97));
	border: 1px solid rgba(130, 203, 255, 0.34);
	box-shadow: 0 16px 42px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(223, 244, 255, 0.1);
}

#resultModal .result-message {
	margin: 2px 0 12px;
	font-size: 34px;
	line-height: 1;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
}

#resultModal .result-message.result-victory {
	color: #43f2a1;
	text-shadow: 0 0 18px rgba(67, 242, 161, 0.34);
}

#resultModal .result-message.result-defeat {
	color: #ff5267;
	text-shadow: 0 0 18px rgba(255, 82, 103, 0.34);
}

#resultModal .result-stats {
	margin-top: 8px;
	padding: 10px;
	border-radius: 12px;
	background: rgba(8, 18, 33, 0.78);
	border: 1px solid rgba(145, 207, 255, 0.26);
	box-shadow: inset 0 1px 0 rgba(228, 246, 255, 0.08);
}

#resultModal .result-stats-title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: #9fdcff;
	margin-bottom: 8px;
	text-align: center;
}

#resultModal .result-stats-grid {
	display: grid;
	gap: 6px;
}

#resultModal .result-stat-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	padding: 7px 8px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.05);
	font-size: 13px;
	line-height: 1.25;
	color: #dbefff;
}

#resultModal .result-stat-row strong {
	font-size: 14px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: #8ef0c7;
	text-align: right;
	min-width: 48px;
}

#resultModal .result-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	margin-top: 12px;
}

#resultModal .result-reward-summary {
	margin-top: 10px;
	padding: 8px 10px;
	border-radius: 10px;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: #ffe9a8;
	background: rgba(255, 210, 94, 0.1);
	border: 1px solid rgba(255, 220, 128, 0.34);
	text-shadow: 0 0 10px rgba(255, 219, 107, 0.26);
}

@media (max-width: 640px) {
	#resultModal .result-panel {
		width: min(96vw, 430px);
		padding: 14px 10px 12px;
	}

	#resultModal .result-message {
		font-size: 26px;
		margin: 2px 0 10px;
	}

	#resultModal .result-stats {
		padding: 8px;
	}

	#resultModal .result-stat-row {
		font-size: 12px;
		padding: 6px 7px;
	}

	#resultModal .result-stat-row strong {
		font-size: 13px;
	}
}

/* Safety guard: never render the in-game tutorial bubble over the menu overlay. */
body.menu-open #tutorialBubble { display: none !important; }

/* Instructions panel */
.panel.instructions { max-width:760px; text-align:left; overflow:auto; max-height:80vh }
.instructions-body h3 { margin-top:8px; color:#e0e7ef }
.instructions-body p, .instructions-body li { color:#cfd8dc; font-size:14px }
.instructions-body ul { margin-left:18px }
.instructions .big { display:inline-block; margin-top:8px }

/* Scoreboard (left column) */
#scoreboard { position: fixed; left: 8px; top: 88px; width: 180px; max-height: calc(100vh - 120px); overflow-y: auto; background: rgba(16,16,16,0.88); border-radius: 6px; padding: 6px; color: #eee; z-index: 900; font-size:13px }
#scoreboard .row { display:flex; align-items:center; gap:6px; padding:4px 6px; border-bottom: 1px solid rgba(255,255,255,0.03) }
#scoreboard .swatch { width:14px; height:14px; border-radius:3px; box-shadow: 0 0 0 1px rgba(0,0,0,0.4) inset }
#scoreboard .meta { flex:1; font-size:12px }
#scoreboard .counts { text-align:right; font-variant-numeric: tabular-nums; min-width:60px; font-size:12px }
#scoreboard .header { font-weight:700; font-size:12px; padding:4px 6px; display:flex; gap:6px; align-items:center }
#scoreboard .header .meta { color:#ddd }

@media (max-width:900px){ #scoreboard { display:none } }

/* Event log (right column) */
#eventLog { position: fixed; right: 8px; top: 88px; width: 260px; max-height: calc(100vh - 120px); overflow-y: auto; background: rgba(16,16,16,0.9); border-radius: 6px; padding: 8px; color: #eee; z-index: 900; font-size:13px }
#eventLog .header { font-weight:700; font-size:13px; margin-bottom:6px }
#eventLog .events { display:flex; flex-direction:column; gap:6px }
.event-item { display:flex; gap:8px; align-items:center; padding:6px; border-radius:6px; background: rgba(255,255,255,0.02); color:#ddd }
.event-item .dot { width:12px; height:12px; border-radius:50%; box-shadow: 0 0 0 1px rgba(0,0,0,0.4) inset }
.event-item .text { flex:1; font-size:12px; line-height:1.1 }
.event-item .time { font-size:11px; color:#aaa; margin-left:6px }

@media (max-width:900px){ #eventLog { display:none } }

.mobile-hud { position: fixed; left: 12px; right: 12px; top: 88px; z-index: 980; display:flex; align-items:center; justify-content:flex-start; gap:12px; pointer-events:none; }
.mobile-pill { padding:10px 14px; border-radius:999px; background: rgba(10,18,15,0.82); color:#eef7f0; font-size:13px; border:1px solid rgba(255,255,255,0.08); box-shadow: 0 10px 28px rgba(0,0,0,0.28); backdrop-filter: blur(10px); }
.mobile-actions { display:none; gap:8px; pointer-events:auto; }
.mobile-territory-progress { display:none; --mtp-fill-percent: 0%; --mtp-danger: 0; --mtp-glow-alpha: 0.28; --mtp-spark-alpha: 0; }
.territory-milestone-toast { display:none; pointer-events:none; }

#globalMusicToggle {
	position: fixed;
	top: calc(var(--mobile-safe-top) + 6px);
	right: 10px;
	width: 42px;
	height: 42px;
	padding: 0;
	border-radius: 11px;
	border: 1px solid rgba(173, 220, 255, 0.44);
	background: linear-gradient(180deg, rgba(14, 32, 52, 0.96), rgba(8, 18, 33, 0.98));
	color: #eff8ff;
	font-size: 21px;
	font-weight: 700;
	line-height: 1;
	box-shadow: inset 0 1px 0 rgba(236, 248, 255, 0.15), 0 14px 28px rgba(0, 0, 0, 0.32);
	z-index: 2300;
	transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

#globalMusicToggle:hover {
	transform: translateY(-1px);
	border-color: rgba(196, 232, 255, 0.66);
	box-shadow: inset 0 1px 0 rgba(236, 248, 255, 0.2), 0 16px 30px rgba(0, 0, 0, 0.34);
}

#globalMusicToggle:active {
	transform: translateY(0);
}

#startOverlay:not(.hidden) ~ #globalMusicToggle {
	display: none;
}

#muteToggle {
	display: none !important;
}

@media (max-width: 760px) {
	#globalMusicToggle {
		width: 40px;
		height: 40px;
		font-size: 19px;
		right: 8px;
		top: calc(var(--mobile-safe-top) + 4px);
	}
	#mpSocialDock {
		right: 54px;
		width: min(320px, calc(100vw - 128px));
	}
}

body.mobile-ui { overflow: hidden; }
body.mobile-ui #c { height: 100dvh; }
body.mobile-ui #ui { height: 0; padding: 0; background: transparent; }
body.mobile-ui #topbar { position: fixed; left: 12px; right: 12px; top: calc(var(--mobile-safe-top) + 12px); z-index: 980; align-items: flex-start; pointer-events: none; }
body.mobile-ui #topbar > * { pointer-events: auto; }
body.mobile-ui #waveTimer { top: 0; }
body.mobile-ui #matchTimer { position: fixed; left: 12px; right: auto; top: calc(var(--mobile-safe-top) + 12px); margin-left: 0 !important; max-width: none; min-width: 88px; z-index: 1002; }
body.mobile-ui #matchTimer.elec { padding: 7px 10px; border-radius: 9px; transform: none; }
body.mobile-ui #matchTimer.elec .digits { font-size: 16px; letter-spacing: 1px; min-width: auto; }
body.mobile-ui #matchTimer.elec .colon { width: 7px; }
body.mobile-ui #timerActions { position: fixed; left: 12px; right: 12px; bottom: calc(var(--mobile-safe-bottom) + 128px); z-index: 982; display: none !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; background: linear-gradient(180deg, rgba(8, 20, 36, 0.94), rgba(4, 10, 22, 0.96)); border: 1px solid rgba(143, 206, 255, 0.22); border-radius: 16px; box-shadow: 0 16px 38px rgba(0,0,0,0.42), inset 0 1px 0 rgba(225, 243, 255, 0.08); backdrop-filter: blur(12px); }
body.mobile-ui.mobile-actions-open #timerActions { display: grid !important; }
body.mobile-ui #timerActions .small { min-height: 42px; margin-left: 0; padding: 8px 10px; font-size: 12px; line-height: 1.1; white-space: normal; }
body.mobile-ui #endGameBtn { grid-column: 1 / -1; }
body.mobile-ui #playerInfo,
body.mobile-ui #scoreboard,
body.mobile-ui #eventLog { display: none !important; }
body.mobile-ui #controls { position: fixed; left: 12px; right: 12px; bottom: calc(var(--mobile-safe-bottom) + 12px); z-index: 980; display: grid; grid-template-columns: 1fr; gap: 8px; padding: 10px; margin: 0; background: linear-gradient(180deg, rgba(7, 18, 33, 0.92), rgba(3, 8, 18, 0.95)); border: 1px solid rgba(134, 204, 255, 0.24); border-radius: 16px; box-shadow: 0 14px 36px rgba(0,0,0,0.42), inset 0 1px 0 rgba(221, 242, 255, 0.08); backdrop-filter: blur(14px); }
body.mobile-ui #controls > label:first-child { display: none; }
body.mobile-ui #controls > div { margin-left: 0 !important; min-width: 0; }
body.mobile-ui #controls input[type="range"] { width: 100% !important; }
body.mobile-ui #controls label { margin-left: 0; }
body.mobile-ui #mobileTerritoryProgress {
	order: 0;
	display: grid;
	gap: 0;
	padding: 9px 10px;
	border-radius: 12px;
	border: 1px solid rgba(255, 118, 86, 0.42);
	background: linear-gradient(180deg, rgba(58, 10, 12, 0.88), rgba(24, 3, 8, 0.93));
	box-shadow: 0 10px 22px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255, 198, 177, 0.14);
}
body.mobile-ui #mobileTerritoryProgress.hidden { display: none !important; }
body.mobile-ui #mobileTerritoryProgress .mtp-track {
	position: relative;
	height: 15px;
	border-radius: 999px;
	border: 1px solid rgba(255, 141, 112, 0.34);
	background: linear-gradient(180deg, rgba(53, 8, 9, 0.92), rgba(18, 3, 7, 0.96));
	overflow: hidden;
}
body.mobile-ui #mobileTerritoryProgress .mtp-fill {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 1;
	width: var(--mtp-fill-percent, 0%);
	background: linear-gradient(90deg, #7d0f0f 0%, #be1717 34%, #ff2c17 68%, #ff8f16 100%);
	box-shadow: 0 0 14px rgba(255, 72, 24, var(--mtp-glow-alpha, 0.3)), 0 0 28px rgba(255, 46, 18, calc(var(--mtp-glow-alpha, 0.3) * 0.75));
	filter: saturate(calc(1.05 + var(--mtp-danger, 0) * 0.9)) brightness(calc(0.9 + var(--mtp-danger, 0) * 0.35));
	transform-origin: left center;
	transition: width 220ms ease, filter 220ms ease, box-shadow 220ms ease, background 220ms ease;
}
body.mobile-ui #mobileTerritoryProgress .mtp-inline-value {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 3;
	transform: translate(-50%, -50%);
	font-size: 10px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: 0.03em;
	font-variant-numeric: tabular-nums;
	color: rgba(255, 248, 236, 0.98);
	text-shadow: 0 1px 0 rgba(28, 3, 3, 0.95), 0 0 6px rgba(0, 0, 0, 0.32);
	pointer-events: none;
	white-space: nowrap;
}
body.mobile-ui #mobileTerritoryProgress .mtp-fill::before {
	content: '';
	position: absolute;
	top: 1px;
	left: 2px;
	right: 8px;
	bottom: 1px;
	border-radius: 999px;
	background: repeating-linear-gradient(112deg, rgba(255, 240, 210, 0.08) 0 6px, rgba(255, 90, 48, 0.2) 6px 11px, rgba(255, 20, 20, 0.08) 11px 16px);
	mix-blend-mode: screen;
	animation: mtp-heat-scan 740ms linear infinite;
}
body.mobile-ui #mobileTerritoryProgress .mtp-fill::after {
	content: '';
	position: absolute;
	right: -7px;
	top: 50%;
	width: 20px;
	height: 20px;
	transform: translateY(-50%);
	border-radius: 999px;
	background: radial-gradient(circle, rgba(255, 251, 223, calc(var(--mtp-spark-alpha, 0) * 0.96)) 0%, rgba(255, 162, 73, calc(var(--mtp-spark-alpha, 0) * 0.88)) 34%, rgba(255, 52, 24, calc(var(--mtp-spark-alpha, 0) * 0.72)) 54%, rgba(255, 18, 12, 0) 74%);
	opacity: var(--mtp-spark-alpha, 0);
	filter: drop-shadow(0 0 8px rgba(255, 122, 48, 0.7));
	animation: mtp-tip-burst 860ms ease-in-out infinite, mtp-spark-flicker 260ms steps(2, end) infinite;
}
body.mobile-ui #mobileControlActions { order: 1; }
body.mobile-ui #sendControls { order: 2; display: none !important; gap: 8px; padding: 10px; border-radius: 12px; background: linear-gradient(180deg, rgba(10, 28, 47, 0.78), rgba(6, 16, 30, 0.84)); border: 1px solid rgba(146, 214, 255, 0.2); }
body.mobile-ui.mobile-send-open #sendControls { display: grid !important; }
body.mobile-ui #commanderActions { grid-template-columns: minmax(0, 1fr); gap: 8px; }
body.mobile-ui #commanderActions .small { min-height: 40px; font-size: 11px; padding: 8px 6px; }
body.mobile-ui #mpSocialDock { z-index: 1001; }
body.mobile-ui #mpSocialToggle { min-height: 38px; padding: 6px 9px; border-radius: 10px; }
body.mobile-ui #mpSocialToggle .mp-social-toggle-label { font-size: 10px; }
body.mobile-ui #mpSocialToggle .mp-social-toggle-summary { font-size: 12px; }
body.mobile-ui #mpSocialToggle .mp-social-toggle-count { min-width: 24px; height: 24px; font-size: 11px; }
body.mobile-ui #mpSocialControls { margin-top: 0; padding: 8px; border-radius: 12px; }
body.mobile-ui #mpSocialControls .mp-social-roster { max-height: 180px; }
body.mobile-ui #mpSocialControls .mp-social-player { padding: 8px 9px; gap: 8px; }
body.mobile-ui #mpSocialControls .mp-social-emotes { gap: 7px; }
body.mobile-ui #mpSocialControls .mp-emote-btn { min-height: 40px; font-size: 20px; }
body.mobile-ui #mpSocialControls #mpAllianceRequestBtn { width: 100%; }
body.mobile-ui #socialEmoteToast { top: calc(var(--mobile-safe-top) + 60px); padding: 9px 12px; border-radius: 14px; }
body.mobile-ui #socialEmoteToast .social-emote-toast-emoji { font-size: 26px; }
body.mobile-ui #socialEmoteToast .social-emote-toast-label { font-size: 10px; }
body.mobile-ui #mobileTerritoryMilestoneToast {
	position: fixed;
	left: 50%;
	right: auto;
	top: calc(var(--mobile-safe-top) + 58px);
	width: min(88vw, 540px);
	z-index: 1120;
	padding: 12px 14px;
	border-radius: 14px;
	border: 1px solid rgba(255, 185, 144, 0.82);
	background: linear-gradient(160deg, rgba(183, 34, 37, 0.98), rgba(126, 14, 24, 0.98));
	color: #fff8f4;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-align: center;
	box-shadow: 0 18px 36px rgba(80, 0, 0, 0.44), inset 0 1px 0 rgba(255, 224, 214, 0.26);
	text-shadow: 0 1px 0 rgba(40, 0, 0, 0.8);
}
body.mobile-ui #mobileTerritoryMilestoneToast.hidden { display: none !important; }
body.mobile-ui #mobileTerritoryMilestoneToast.show {
	display: block;
	animation: territory-milestone-toast-in 3000ms cubic-bezier(0.14, 0.88, 0.24, 1) both;
}
body.mobile-ui #audioControls { display: none !important; }
body.mobile-ui #audioControls label,
body.mobile-ui #audioControls input[type="range"] { display: none !important; }
body.mobile-ui #muteToggle.mobile-floating-audio { position: fixed !important; right: 12px !important; top: calc(var(--mobile-safe-top) + 12px) !important; left: auto !important; bottom: auto !important; z-index: 1018; pointer-events: auto; width: 40px !important; height: 34px !important; margin: 0 !important; padding: 2px 6px !important; border-radius: 9px; border: 1px solid rgba(176, 223, 255, 0.35); background: linear-gradient(180deg, rgba(20, 52, 84, 0.95), rgba(10, 27, 48, 0.95)); box-shadow: inset 0 1px 0 rgba(226, 245, 255, 0.16), 0 8px 16px rgba(0,0,0,0.3); }
body.menu-open #muteToggle.mobile-floating-audio { display: none !important; }
body.mobile-ui .mobile-hud.hidden { display:none; }
body.mobile-ui .mobile-hud { display:flex; top: calc(var(--mobile-safe-top) + 76px); flex-direction: column; align-items: stretch; gap: 8px; }
body.mobile-ui .mobile-pill { border-radius: 16px; font-size: 12px; line-height: 1.35; padding: 10px 12px; }
body.mobile-ui .mobile-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); position: static; left: auto; right: auto; bottom: auto; z-index: auto; justify-content: stretch; gap: 8px; }
body.mobile-ui .mobile-actions .small {
	position: relative;
	overflow: hidden;
	min-height: 46px;
	min-width: 0;
	width: 100%;
	padding: 10px 10px;
	border-radius: 13px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	border-width: 1px;
	border-style: solid;
	box-shadow: 0 8px 18px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -10px 18px rgba(0,0,0,0.12);
	transition: transform 140ms ease, box-shadow 180ms ease, border-color 180ms ease, filter 180ms ease;
}
body.mobile-ui .mobile-actions .small::before {
	content: '';
	position: absolute;
	inset: 1px;
	border-radius: 12px;
	pointer-events: none;
}
body.mobile-ui .mobile-actions .small::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 42%;
	left: -52%;
	border-radius: 12px;
	pointer-events: none;
	background: linear-gradient(115deg, rgba(255,255,255,0), rgba(255,255,255,0.26), rgba(255,255,255,0));
	transition: left 240ms ease;
}
body.mobile-ui #mobileSendToggle {
	color: #e7f6ff;
	background: linear-gradient(165deg, rgba(17, 48, 79, 0.95), rgba(8, 25, 43, 0.96));
	border-color: rgba(149, 213, 255, 0.42);
}
body.mobile-ui #mobileSendToggle::before {
	background: radial-gradient(circle at 18% 18%, rgba(164, 233, 255, 0.22), transparent 62%), linear-gradient(180deg, rgba(68, 151, 223, 0.26), rgba(16, 55, 93, 0.2));
}
body.mobile-ui #mobileActionToggle {
	min-width: 0;
	color: #f7fbff;
	background: linear-gradient(165deg, rgba(72, 146, 255, 0.98), rgba(41, 103, 233, 0.98));
	border-color: rgba(209, 232, 255, 0.86);
	text-shadow: 0 1px 0 rgba(9, 32, 71, 0.5);
}
body.mobile-ui #mobileActionToggle::before {
	background: radial-gradient(circle at 22% 16%, rgba(238, 247, 255, 0.4), transparent 62%), linear-gradient(180deg, rgba(130, 187, 255, 0.35), rgba(49, 109, 224, 0.2));
}
@media (hover:hover) and (pointer:fine){
	body.mobile-ui .mobile-actions .small:hover {
		transform: translateY(-1px);
		filter: brightness(1.06);
		box-shadow: 0 12px 24px rgba(0,0,0,0.36), 0 0 0 1px rgba(184, 224, 255, 0.32), inset 0 1px 0 rgba(255,255,255,0.16);
	}
	body.mobile-ui .mobile-actions .small:hover::after { left: 112%; }
}
body.mobile-ui .mobile-actions .small:active {
	transform: translateY(1px) scale(0.992);
	box-shadow: 0 6px 14px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.12);
}
body.mobile-ui .mobile-actions .small:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(168, 220, 255, 0.28), 0 12px 24px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.14);
}
body.mobile-ui.mobile-send-open #mobileSendToggle,
body.mobile-ui.mobile-actions-open #mobileActionToggle {
	transform: translateY(-1px);
	border-color: rgba(226, 242, 255, 0.98);
	box-shadow: 0 0 0 1px rgba(196, 233, 255, 0.45), 0 14px 28px rgba(8, 31, 61, 0.45), inset 0 1px 0 rgba(255,255,255,0.2);
}
body.mobile-ui.mobile-send-open #mobileSendToggle::after,
body.mobile-ui.mobile-actions-open #mobileActionToggle::after { left: 108%; }

@media (max-width:900px){
	.main-menu .game-menu { width: calc(100vw - 20px); padding: calc(var(--mobile-safe-top) + 18px) 14px calc(var(--mobile-safe-bottom) + 18px); }
	.form-row { flex-wrap: wrap; }
	.small-input { width: 96px; }
}

@media (max-width:720px){
	body.mobile-ui #matchTimer { left: 12px; right: auto; top: calc(var(--mobile-safe-top) + 12px); }
	body.mobile-ui #timerActions { bottom: calc(var(--mobile-safe-bottom) + 128px); }
	body.mobile-ui #mobileTerritoryMilestoneToast { top: calc(var(--mobile-safe-top) + 62px); }
	body.mobile-ui .mobile-hud { top: calc(var(--mobile-safe-top) + 92px); }
	body.mobile-ui .mobile-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.mobile-ui #commanderActions { grid-template-columns: minmax(0, 1fr); }
}

@keyframes territory-milestone-toast-in {
	0% { transform: translate(-170%, 0) scale(0.95); opacity: 0; filter: saturate(1.5); }
	16.7% { transform: translate(-50%, 0) scale(1); opacity: 1; }
	83.3% { transform: translate(-50%, 0) scale(1); opacity: 1; }
	100% { transform: translate(130%, 0) scale(0.98); opacity: 0; filter: saturate(1.12); }
}

@keyframes mtp-heat-scan {
	0% { transform: translateX(-16px); opacity: 0.8; }
	50% { opacity: 1; }
	100% { transform: translateX(16px); opacity: 0.78; }
}

@keyframes mtp-tip-burst {
	0% { transform: translateY(-50%) scale(0.72); }
	45% { transform: translateY(-50%) scale(1.2); }
	100% { transform: translateY(-50%) scale(0.84); }
}

@keyframes mtp-spark-flicker {
	0% { opacity: calc(var(--mtp-spark-alpha, 0) * 0.62); }
	50% { opacity: calc(var(--mtp-spark-alpha, 0) * 1); }
	100% { opacity: calc(var(--mtp-spark-alpha, 0) * 0.7); }
}

.net-debug-overlay {
	position: fixed;
	right: 10px;
	bottom: 10px;
	width: min(92vw, 460px);
	max-height: min(48vh, 420px);
	padding: 10px;
	border-radius: 12px;
	background: rgba(5, 8, 9, 0.94);
	border: 1px solid rgba(165, 255, 220, 0.35);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(8px);
	z-index: 1400;
	overflow: hidden;
}

.net-debug-overlay.is-bootstrap {
	border-color: rgba(255, 214, 113, 0.48);
	box-shadow: 0 0 0 1px rgba(255, 214, 113, 0.18), 0 16px 40px rgba(0, 0, 0, 0.45);
}

.net-debug-overlay.is-problem {
	border-color: rgba(255, 135, 135, 0.52);
	box-shadow: 0 0 0 1px rgba(255, 135, 135, 0.18), 0 16px 40px rgba(0, 0, 0, 0.5);
}

.net-debug-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #9ce8c9;
	margin-bottom: 8px;
}

.net-debug-actions {
	display: flex;
	align-items: center;
	gap: 6px;
}

.net-debug-header button {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #eefbf5;
	font-size: 11px;
	padding: 5px 9px;
	border-radius: 8px;
}

.net-debug-overlay.is-collapsed {
	width: min(92vw, 320px);
	max-height: none;
	padding-bottom: 8px;
}

.net-debug-overlay.is-collapsed .net-debug-header {
	margin-bottom: 0;
}

.net-debug-overlay.is-collapsed #netDebugText {
	display: none;
}

#netDebugText {
	margin: 0;
	white-space: pre-wrap;
	word-break: break-word;
	font-family: Consolas, "Courier New", monospace;
	font-size: 11px;
	line-height: 1.3;
	color: #dffcf0;
	max-height: calc(min(48vh, 420px) - 48px);
	overflow: auto;
}

body.mobile-ui .net-debug-overlay {
	left: 10px;
	right: 10px;
	top: calc(var(--mobile-safe-top) + 104px);
	bottom: auto;
	width: auto;
	max-height: min(42vh, 320px);
}

body.mobile-ui .net-debug-overlay.is-collapsed {
	max-height: none;
}

/* --- Start Menu Redesign (reference style) --- */
#startOverlay.main-menu {
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: clamp(8px, 2vh, 20px) 12px 14px;
	background: radial-gradient(circle at center, rgba(3, 12, 24, 0.42), rgba(0, 3, 8, 0.82));
}

#startOverlay .menu-bg,
#multiplayerPanel .menu-bg {
	background:
		radial-gradient(circle at 16% 26%, rgba(56, 172, 255, 0.25), transparent 40%),
		radial-gradient(circle at 84% 70%, rgba(255, 146, 58, 0.2), transparent 44%),
		linear-gradient(140deg, rgba(8, 28, 46, 0.9), rgba(3, 10, 20, 0.96));
	filter: saturate(1.1);
	mix-blend-mode: normal;
}

#startOverlay .menu-bg::before,
#multiplayerPanel .menu-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(18deg, rgba(92, 195, 255, 0.08) 0 1px, transparent 1px 84px),
		repeating-linear-gradient(-12deg, rgba(255, 154, 84, 0.06) 0 1px, transparent 1px 96px);
	opacity: 0.7;
	animation: star-grid-drift 24s linear infinite;
}

#startOverlay .menu-bg::after,
#multiplayerPanel .menu-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle, rgba(255, 255, 255, 0.45) 0 1px, transparent 1px),
		radial-gradient(circle, rgba(149, 224, 255, 0.35) 0 1px, transparent 1px),
		radial-gradient(circle, rgba(255, 177, 110, 0.3) 0 1px, transparent 1px);
	background-size: 140px 140px, 190px 190px, 240px 240px;
	background-position: 0 0, 40px 70px, 90px 30px;
	opacity: 0.5;
	animation: star-grid-drift-rev 28s linear infinite;
}

@keyframes star-grid-drift {
	0% { transform: translate3d(0, 0, 0); }
	100% { transform: translate3d(-24px, 14px, 0); }
}

@keyframes star-grid-drift-rev {
	0% { transform: translate3d(0, 0, 0); }
	100% { transform: translate3d(20px, -12px, 0); }
}

#startOverlay .menu-nodes .mn,
#multiplayerPanel .menu-nodes .mn {
	background: radial-gradient(circle at 28% 28%, rgba(197, 241, 255, 0.95), rgba(49, 191, 255, 0.92));
	box-shadow: 0 0 0 1px rgba(190, 240, 255, 0.28), 0 0 18px rgba(49, 191, 255, 0.56), 0 0 44px rgba(49, 191, 255, 0.34);
}

#startOverlay .menu-nodes .mn:nth-child(2n),
#multiplayerPanel .menu-nodes .mn:nth-child(2n) {
	background: radial-gradient(circle at 28% 28%, rgba(255, 228, 177, 0.95), rgba(255, 141, 50, 0.9));
	box-shadow: 0 0 0 1px rgba(255, 214, 158, 0.28), 0 0 18px rgba(255, 141, 50, 0.56), 0 0 44px rgba(255, 141, 50, 0.3);
}

#startOverlay .game-menu.menu-visual-v2 {
	width: min(96vw, 980px);
	max-width: 980px;
	margin: 0 auto;
	padding: 18px 26px 26px;
	border-radius: 30px;
	background: linear-gradient(180deg, rgba(7, 18, 35, 0.72), rgba(4, 9, 18, 0.86));
	border: 1px solid rgba(157, 212, 255, 0.24);
	box-shadow: 0 30px 90px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(220, 244, 255, 0.12);
	backdrop-filter: blur(10px);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

#startOverlay .menu-quick-row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	width: min(100%, 860px);
	margin: 0 auto;
}

#startOverlay .menu-quick-row .quick-btn {
	width: 100%;
	min-height: 52px;
	padding: 10px 12px;
	border-radius: 16px;
	border: 1px solid rgba(189, 226, 255, 0.2);
	background: linear-gradient(180deg, rgba(12, 26, 45, 0.86), rgba(7, 14, 26, 0.94));
	color: #e8f5ff;
	font-size: 18px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-shadow: inset 0 1px 0 rgba(236, 248, 255, 0.08), 0 12px 26px rgba(0, 0, 0, 0.25);
	transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

#startOverlay .menu-quick-row .quick-btn:hover {
	transform: translateY(-2px);
	box-shadow: inset 0 1px 0 rgba(236, 248, 255, 0.13), 0 14px 30px rgba(0, 0, 0, 0.3);
	border-color: rgba(171, 219, 255, 0.38);
}

#startOverlay .menu-quick-row .quick-btn:active {
	transform: translateY(0);
}

#startOverlay .menu-quick-row .quick-btn::before {
	display: inline-block;
	font-size: 18px;
	opacity: 0.92;
	line-height: 1;
}

#startOverlay #openMultiplayerMenu::before { content: '\1F465'; }
#startOverlay #openSettings::before { content: '\2699'; }
#startOverlay #playTutorial::before { content: '\25B6'; }
#startOverlay #openLeaderboardMenu::before { content: '\1F3C6'; }

#startOverlay .menu-top {
	text-align: center;
	margin-top: 0;
	margin-bottom: 4px;
}

#startOverlay .game-title {
	font-family: "Bahnschrift", "Arial Black", "Trebuchet MS", sans-serif;
	font-size: clamp(48px, 8vw, 72px);
	letter-spacing: 0.08em;
	font-weight: 800;
	margin: 0;
	color: #f2fbff;
	text-shadow: 0 0 18px rgba(114, 210, 255, 0.38), 0 6px 28px rgba(0, 0, 0, 0.45);
}

#startOverlay .game-sub {
	font-size: clamp(18px, 2.3vw, 30px);
	color: rgba(236, 245, 255, 0.9);
	letter-spacing: 0.01em;
	margin-top: 8px;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

#startOverlay #mobilePresetNote {
	margin: 0;
	background: rgba(10, 34, 49, 0.75);
	border: 1px solid rgba(145, 220, 255, 0.22);
	color: #d9f3ff;
	border-radius: 12px;
}

#startOverlay .menu-stats-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	padding: 0;
	background: none;
	border: none;
	box-shadow: none;
	margin-top: 2px;
}

#startOverlay .menu-stats-grid .menu-field {
	padding: 10px 12px 14px;
	border-radius: 20px;
	background: linear-gradient(180deg, rgba(18, 42, 64, 0.76), rgba(8, 20, 35, 0.88));
	border: 1px solid rgba(157, 212, 255, 0.2);
	box-shadow: inset 0 1px 0 rgba(226, 246, 255, 0.1), 0 18px 34px rgba(2, 8, 17, 0.3);
	gap: 8px;
}

#startOverlay .menu-stats-grid .menu-field span {
	text-align: center;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: #8fe6f5;
	text-transform: uppercase;
	text-shadow: 0 0 10px rgba(122, 232, 255, 0.26);
}

#startOverlay .menu-stats-grid .small-input {
	height: 72px;
	border-radius: 20px;
	font-size: 56px;
	font-weight: 800;
	line-height: 1;
	color: #f7fcff;
	background: linear-gradient(180deg, rgba(6, 14, 26, 0.95), rgba(3, 8, 15, 0.97));
	border: 1px solid rgba(143, 204, 255, 0.26);
	text-shadow: 0 0 16px rgba(134, 229, 255, 0.3);
	padding-top: 6px;
	padding-bottom: 6px;
	font-family: "Bahnschrift", "Arial Black", sans-serif;
}

#startOverlay .menu-mode-section,
#startOverlay .menu-ai-section {
	padding: 0;
	background: none;
	border: none;
	box-shadow: none;
	gap: 10px;
}

#startOverlay .menu-mode-section .section-label {
	position: relative;
	text-align: center;
	font-size: 34px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: #8ce2ef;
	text-shadow: 0 0 10px rgba(129, 236, 255, 0.22);
	padding: 2px 0;
}

#startOverlay .menu-mode-section .section-label::before,
#startOverlay .menu-mode-section .section-label::after {
	content: '';
	position: absolute;
	top: 50%;
	width: clamp(40px, 14vw, 130px);
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(157, 214, 255, 0.74), transparent);
	transform: translateY(-50%);
}

#startOverlay .menu-mode-section .section-label::before { left: 0; }
#startOverlay .menu-mode-section .section-label::after { right: 0; }

#startOverlay .map-mode-row {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	align-items: stretch;
	justify-items: stretch;
}

#startOverlay .map-mode-row .chip {
	width: 100%;
	min-height: 58px;
	border-radius: 16px;
	background: linear-gradient(180deg, rgba(15, 29, 49, 0.86), rgba(8, 17, 31, 0.9));
	border: 1px solid rgba(173, 220, 255, 0.2);
	color: #e8f4ff;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.15;
	padding: 10px 12px;
	text-align: center;
	box-shadow: inset 0 1px 0 rgba(223, 246, 255, 0.08), 0 12px 22px rgba(0, 0, 0, 0.24);
	transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

#startOverlay .map-mode-row .chip:hover {
	transform: translateY(-1px);
	border-color: rgba(183, 227, 255, 0.4);
}

#startOverlay .map-mode-row .hidden-input:checked + .chip {
	background: linear-gradient(180deg, #4b98ff, #2f6fff);
	color: #f6fbff;
	border-color: rgba(195, 227, 255, 0.78);
	box-shadow: inset 0 1px 0 rgba(245, 252, 255, 0.34), 0 14px 34px rgba(63, 131, 255, 0.36);
}

#startOverlay .menu-ai-section {
	margin-top: 2px;
}

#startOverlay .menu-ai-section .section-label {
	text-align: center;
	font-size: 12px;
	letter-spacing: 0.16em;
	color: rgba(173, 224, 255, 0.8);
	text-transform: uppercase;
	font-weight: 700;
}

#startOverlay .menu-ai-section .chip-group-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	width: 100%;
}

#startOverlay .menu-ai-section .chip {
	min-height: 44px;
	border-radius: 14px;
	font-size: 15px;
	font-weight: 600;
	background: linear-gradient(180deg, rgba(12, 27, 45, 0.8), rgba(7, 16, 29, 0.88));
	border: 1px solid rgba(148, 206, 255, 0.2);
	color: #deeeff;
	box-shadow: inset 0 1px 0 rgba(224, 246, 255, 0.08);
}

#startOverlay .menu-ai-section .hidden-input:checked + .chip {
	background: linear-gradient(180deg, rgba(67, 170, 255, 0.95), rgba(39, 109, 255, 0.95));
	border-color: rgba(197, 230, 255, 0.76);
	color: #f8fdff;
}

#startOverlay .menu-play-button {
	width: min(74%, 420px);
	margin: 8px auto 0;
	min-height: 74px;
	border-radius: 22px;
	background: linear-gradient(180deg, #ffad28 0%, #ff8708 52%, #ff6a00 100%);
	color: #fffef8;
	border: 1px solid rgba(255, 214, 142, 0.74);
	box-shadow: 0 18px 38px rgba(255, 123, 12, 0.44), inset 0 2px 0 rgba(255, 238, 204, 0.35);
	font-family: "Bahnschrift", "Arial Black", sans-serif;
	font-size: clamp(42px, 5.5vw, 56px);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-shadow: 0 2px 12px rgba(137, 63, 0, 0.5);
	transition: transform 140ms ease, box-shadow 140ms ease;
}

#startOverlay .menu-play-button:hover {
	transform: translateY(-2px) scale(1.01);
	box-shadow: 0 22px 44px rgba(255, 123, 12, 0.5), inset 0 2px 0 rgba(255, 238, 204, 0.4);
}

#startOverlay .menu-play-button:active {
	transform: translateY(0);
}

#startOverlay .menu-footer {
	margin-top: 4px;
	text-align: center;
	font-size: 12px;
	color: rgba(206, 224, 240, 0.7);
	letter-spacing: 0.03em;
}

#multiplayerPanel.main-menu {
	align-items: center;
	justify-content: flex-start;
 	overflow: hidden;
	overscroll-behavior: none;
	padding: clamp(8px, 2vh, 20px) 12px 14px;
	background: radial-gradient(circle at center, rgba(3, 12, 24, 0.42), rgba(0, 3, 8, 0.82));
}

#multiplayerPanel .game-menu.menu-visual-v2 {
	width: min(96vw, 760px);
	max-width: 760px;
	padding: 18px 20px 20px;
	border-radius: 28px;
	background: linear-gradient(180deg, rgba(7, 18, 35, 0.72), rgba(4, 9, 18, 0.9));
	border: 1px solid rgba(157, 212, 255, 0.24);
	box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(220, 244, 255, 0.12);
	backdrop-filter: blur(10px);
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: left;
}

#multiplayerPanel .mp-panel-title {
	margin: 0;
	text-align: center;
	font-size: clamp(28px, 3.8vw, 42px);
	letter-spacing: 0.05em;
	color: #f2fbff;
	text-shadow: 0 0 18px rgba(114, 210, 255, 0.32), 0 6px 20px rgba(0, 0, 0, 0.45);
}

#multiplayerPanel .mp-mode-block,
#multiplayerPanel .mp-elim-preset-wrap,
#multiplayerPanel .mp-private-card {
	padding: 12px;
	border-radius: 18px;
	background: linear-gradient(180deg, rgba(18, 42, 64, 0.72), rgba(8, 20, 35, 0.86));
	border: 1px solid rgba(157, 212, 255, 0.2);
	box-shadow: inset 0 1px 0 rgba(226, 246, 255, 0.09), 0 16px 30px rgba(2, 8, 17, 0.28);
	text-align: center;
}

#multiplayerPanel .mp-mode-label,
#multiplayerPanel .mp-private-title {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(188, 231, 255, 0.88);
}

#multiplayerPanel .mp-mode-row,
#multiplayerPanel .mp-elim-preset-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	width: 100%;
	align-items: stretch;
	justify-items: stretch;
}

#multiplayerPanel .chip {
	width: 100%;
	min-height: 48px;
	padding: 10px 8px;
	border-radius: 14px;
	border: 1px solid rgba(173, 220, 255, 0.2);
	background: linear-gradient(180deg, rgba(15, 29, 49, 0.86), rgba(8, 17, 31, 0.9));
	color: #e8f4ff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	box-shadow: inset 0 1px 0 rgba(223, 246, 255, 0.08), 0 10px 20px rgba(0, 0, 0, 0.22);
	transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

#multiplayerPanel .chip:hover {
	border-color: rgba(183, 227, 255, 0.4);
}

#multiplayerPanel .hidden-input:checked + .chip {
	background: linear-gradient(180deg, #4b98ff, #2f6fff);
	color: #f6fbff;
	border-color: rgba(195, 227, 255, 0.78);
	box-shadow: inset 0 1px 0 rgba(245, 252, 255, 0.34), 0 14px 34px rgba(63, 131, 255, 0.3);
}

#multiplayerPanel .mp-action-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	width: 100%;
	align-items: stretch;
}

#multiplayerPanel .mp-action-row .big {
	width: 100%;
	min-height: 54px;
	margin: 0;
	font-size: 18px;
	border-radius: 16px;
}

#multiplayerPanel .mp-private-create-row {
	justify-content: center;
	margin-bottom: 8px;
}

#multiplayerPanel .mp-private-join-row {
	gap: 8px;
	align-items: center;
	justify-content: center;
}

#multiplayerPanel .mp-invite-input {
	flex: 1;
	min-width: 0;
	padding: 8px 10px;
	border-radius: 10px;
	border: 1px solid rgba(143, 204, 255, 0.26);
	background: linear-gradient(180deg, rgba(6, 14, 26, 0.95), rgba(3, 8, 15, 0.97));
	color: #f7fcff;
	font-size: 14px;
	outline: none;
}

#multiplayerPanel .mp-invite-input:focus {
	border-color: rgba(179, 223, 255, 0.72);
	box-shadow: 0 0 0 3px rgba(68, 154, 255, 0.18);
}

#multiplayerPanel #mpJoinPrivateLobby {
	min-width: 88px;
	height: 40px;
	border-radius: 10px;
}

@media (max-width: 880px) {
	#startOverlay .game-menu.menu-visual-v2 {
		width: min(96vw, 760px);
		padding: 14px 16px 18px;
		border-radius: 24px;
		gap: 10px;
	}

	#startOverlay .menu-quick-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	#startOverlay .menu-quick-row .quick-btn {
		min-height: 48px;
		font-size: 16px;
	}

	#startOverlay .game-title {
		font-size: clamp(40px, 10vw, 56px);
	}

	#startOverlay .game-sub {
		font-size: clamp(16px, 3.4vw, 24px);
	}

	#startOverlay .menu-stats-grid .menu-field span {
		font-size: 24px;
	}

	#startOverlay .menu-stats-grid .small-input {
		height: 62px;
		font-size: 44px;
	}

	#startOverlay .menu-mode-section .section-label {
		font-size: 28px;
	}

	#startOverlay .map-mode-row .chip {
		min-height: 54px;
		font-size: 16px;
	}

	#startOverlay .menu-play-button {
		width: min(86%, 360px);
		min-height: 66px;
		font-size: clamp(34px, 8vw, 48px);
	}

	#multiplayerPanel .game-menu.menu-visual-v2 {
		width: min(96vw, 620px);
		padding: 14px;
		gap: 10px;
	}

	#multiplayerPanel .mp-mode-row,
	#multiplayerPanel .mp-elim-preset-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	#multiplayerPanel .mp-elim-preset-row label:last-of-type {
		grid-column: 1 / -1;
	}
}

body.mobile-ui #startOverlay.main-menu {
	align-items: center;
	justify-content: center;
	padding: calc(var(--mobile-safe-top) + 8px) 10px calc(var(--mobile-safe-bottom) + 10px);
	overflow: hidden;
}

body.mobile-ui #startOverlay .menu-bg,
body.mobile-ui #multiplayerPanel .menu-bg {
	display: block;
}

body.mobile-ui #startOverlay .game-menu.menu-visual-v2 {
	width: min(100%, 420px);
	max-height: calc(100dvh - var(--mobile-safe-top) - var(--mobile-safe-bottom) - 18px);
	overflow: hidden;
	padding: 12px 10px 12px;
	gap: 8px;
	border-radius: 22px;
	margin: 0 auto;
}

body.mobile-ui #startOverlay .menu-quick-row {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

body.mobile-ui #startOverlay .menu-quick-row .quick-btn {
	min-height: 42px;
	font-size: 13px;
	padding: 7px 6px;
	border-radius: 14px;
}

body.mobile-ui #startOverlay .menu-quick-row .quick-btn::before {
	font-size: 14px;
}

body.mobile-ui #startOverlay .game-title {
	font-size: clamp(30px, 10vw, 40px);
	letter-spacing: 0.07em;
	}

body.mobile-ui #startOverlay .game-sub {
	font-size: 15px;
	line-height: 1.25;
	}

body.mobile-ui #startOverlay .menu-stats-grid {
	gap: 8px;
	}

body.mobile-ui #startOverlay .menu-stats-grid .menu-field {
	padding: 8px 8px 10px;
	border-radius: 14px;
	}

body.mobile-ui #startOverlay .menu-stats-grid .menu-field span {
	font-size: 16px;
	letter-spacing: 0.08em;
	}

body.mobile-ui #startOverlay .menu-stats-grid .small-input {
	height: 44px;
	font-size: 28px;
	border-radius: 12px;
	}

body.mobile-ui #startOverlay .menu-mode-section .section-label {
	font-size: 18px;
	}

body.mobile-ui #startOverlay .map-mode-row {
	gap: 8px;
	}

body.mobile-ui #startOverlay .map-mode-row .chip {
	min-height: 42px;
	font-size: 13px;
	border-radius: 12px;
	padding: 6px 8px;
	}

body.mobile-ui #startOverlay .menu-ai-section .chip-group-3 {
	gap: 8px;
	}

body.mobile-ui #startOverlay .menu-ai-section .chip {
	min-height: 38px;
	font-size: 13px;
	border-radius: 12px;
	}

body.mobile-ui #startOverlay .menu-play-button {
	width: min(92%, 330px);
	min-height: 52px;
	font-size: clamp(26px, 9vw, 34px);
	border-radius: 16px;
	margin-top: 2px;
	}

body.mobile-ui #startOverlay .menu-footer {
	font-size: 10px;
	line-height: 1.2;
	}

body.mobile-ui #multiplayerPanel.main-menu {
	align-items: center;
	justify-content: flex-start;
	padding: calc(var(--mobile-safe-top) + 8px) 10px calc(var(--mobile-safe-bottom) + 10px);
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
}

body.mobile-ui #multiplayerPanel .game-menu.menu-visual-v2 {
	width: min(100%, 440px);
	max-height: calc(100dvh - var(--mobile-safe-top) - var(--mobile-safe-bottom) - 18px);
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-y;
	padding: 14px 12px 16px;
	gap: 9px;
	border-radius: 22px;
}

body.mobile-ui #multiplayerPanel .mp-panel-title {
	font-size: 30px;
}

body.mobile-ui #multiplayerPanel .mp-mode-row,
body.mobile-ui #multiplayerPanel .mp-elim-preset-row,
body.mobile-ui #multiplayerPanel .mp-action-row {
	grid-template-columns: 1fr;
	gap: 8px;
}

body.mobile-ui #multiplayerPanel .chip {
	min-height: 44px;
	font-size: 14px;
	border-radius: 12px;
	padding: 8px;
}

body.mobile-ui #multiplayerPanel .mp-action-row .big {
	min-height: 48px;
	font-size: 16px;
	border-radius: 14px;
}

#multiplayerPanel .multiplayer-menu-quick {
	width: min(96vw, 620px);
	max-width: 620px;
	text-align: center;
	gap: 12px;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 20px 22px 22px;
	border-radius: 28px;
	background:
		radial-gradient(120% 90% at 2% 12%, rgba(255, 110, 122, 0.34), transparent 58%),
		radial-gradient(110% 86% at 98% 8%, rgba(255, 172, 120, 0.28), transparent 54%),
		linear-gradient(180deg, rgba(42, 7, 14, 0.9), rgba(19, 2, 7, 0.96));
	border: 1px solid rgba(255, 138, 150, 0.44);
	box-shadow: 0 0 0 1px rgba(255, 110, 130, 0.22), 0 0 34px rgba(255, 54, 86, 0.34), 0 26px 52px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 222, 228, 0.15);
}

#multiplayerPanel .multiplayer-menu-quick::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 195, 204, 0.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 186, 196, 0.07) 1px, transparent 1px);
	background-size: 22px 22px;
	mix-blend-mode: screen;
	opacity: 0.32;
}

#multiplayerPanel .multiplayer-menu-quick > * {
	position: relative;
	z-index: 2;
}

#multiplayerPanel .multiplayer-menu-quick .mp-menu-view {
	display: grid;
	gap: 12px;
	width: 100%;
}

#multiplayerPanel .multiplayer-menu-quick .mp-menu-view.hidden {
	display: none;
}

#multiplayerPanel .multiplayer-menu-quick .mp-private-menu-view {
	gap: 14px;
}

#multiplayerPanel .multiplayer-menu-quick .mp-panel-title {
	position: relative;
	z-index: 2;
	margin: 0 0 6px;
	color: #fff2f4;
	text-shadow: 0 0 20px rgba(255, 125, 147, 0.42), 0 8px 22px rgba(0, 0, 0, 0.46);
}

#multiplayerPanel .multiplayer-menu-quick .mp-private-window-head {
	display: grid;
	gap: 6px;
	justify-items: center;
	text-align: center;
	padding: 2px 6px 0;
}

#multiplayerPanel .multiplayer-menu-quick .mp-private-window-hint {
	margin: 0;
	max-width: 470px;
	font-size: 13px;
	line-height: 1.4;
	color: rgba(224, 244, 255, 0.86);
	text-shadow: 0 0 12px rgba(59, 188, 255, 0.18);
}

#multiplayerPanel .multiplayer-menu-quick .mp-private-mode-block {
	width: 100%;
	max-width: 540px;
	margin: 0 auto;
	display: grid;
	gap: 10px;
	padding: 14px 14px 16px;
	border-radius: 18px;
	background: linear-gradient(180deg, rgba(8, 35, 60, 0.72), rgba(2, 14, 27, 0.9));
	border: 1px solid rgba(98, 212, 255, 0.32);
	box-shadow: inset 0 1px 0 rgba(201, 245, 255, 0.08), 0 14px 30px rgba(0, 8, 18, 0.34);
}

#multiplayerPanel .multiplayer-menu-quick .mp-private-mode-grid {
	max-width: none;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

#multiplayerPanel .multiplayer-menu-quick .mp-private-actions {
	width: 100%;
	max-width: 540px;
	margin: 0 auto;
	display: grid;
	gap: 10px;
}

#multiplayerPanel .multiplayer-menu-quick.is-private-view {
	background:
		radial-gradient(120% 90% at 2% 12%, rgba(76, 209, 255, 0.28), transparent 58%),
		radial-gradient(112% 90% at 98% 8%, rgba(93, 133, 255, 0.24), transparent 54%),
		linear-gradient(180deg, rgba(3, 25, 44, 0.92), rgba(1, 12, 24, 0.97));
	border: 1px solid rgba(109, 217, 255, 0.5);
	box-shadow: 0 0 0 1px rgba(101, 207, 255, 0.22), 0 0 34px rgba(34, 181, 255, 0.28), 0 26px 52px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(210, 244, 255, 0.16);
}

#multiplayerPanel.mp-private-view-active .overlay-pulsars-red .overlay-pulsar {
	background: radial-gradient(circle, rgba(128, 227, 255, 0.72) 0%, rgba(55, 176, 255, 0.34) 42%, rgba(12, 86, 158, 0.08) 70%, transparent 100%);
	box-shadow: 0 0 24px rgba(58, 189, 255, 0.24);
}

#multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-panel-title {
	color: #e8faff;
	text-shadow: 0 0 22px rgba(111, 223, 255, 0.34), 0 8px 22px rgba(0, 0, 0, 0.46);
}

#multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-private-config-title,
#multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-private-join-label {
	color: rgba(195, 240, 255, 0.92);
}

#multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-private-join-panel {
	background: linear-gradient(180deg, rgba(8, 34, 59, 0.82), rgba(1, 16, 30, 0.92));
	border: 1px solid rgba(96, 210, 255, 0.44);
	box-shadow: inset 0 1px 0 rgba(206, 245, 255, 0.12), 0 12px 24px rgba(0, 0, 0, 0.32), 0 0 24px rgba(34, 172, 255, 0.12);
}

#multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-private-join-row .mp-invite-input {
	border-color: rgba(111, 217, 255, 0.52);
	background: linear-gradient(180deg, rgba(6, 22, 39, 0.96), rgba(3, 15, 27, 0.98));
	box-shadow: inset 0 0 0 1px rgba(121, 222, 255, 0.08), 0 0 18px rgba(38, 182, 255, 0.08);
}

#multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-private-join-row .mp-invite-input:focus {
	border-color: rgba(165, 236, 255, 0.88);
	box-shadow: 0 0 0 3px rgba(79, 194, 255, 0.14), 0 0 24px rgba(55, 191, 255, 0.18);
}

#multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-private-join-btn,
#multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-private-create-btn {
	background: linear-gradient(180deg, #63d9ff 0%, #2b8dff 54%, #1252c4 100%);
	border: 1px solid rgba(213, 247, 255, 0.9);
	color: #f6fdff;
	box-shadow: inset 0 1px 0 rgba(241, 252, 255, 0.38), 0 0 0 1px rgba(96, 203, 255, 0.26), 0 0 26px rgba(44, 178, 255, 0.36), 0 14px 28px rgba(4, 44, 111, 0.42);
	text-shadow: 0 0 12px rgba(219, 248, 255, 0.24);
}

#multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-private-join-btn:hover,
#multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-private-create-btn:hover {
	box-shadow: inset 0 1px 0 rgba(246, 252, 255, 0.42), 0 0 0 1px rgba(122, 217, 255, 0.34), 0 0 32px rgba(58, 190, 255, 0.44), 0 18px 34px rgba(5, 47, 116, 0.5);
}

#multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-private-join-btn:disabled,
#multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-private-create-btn:disabled {
	opacity: 0.5;
	box-shadow: none;
}

#multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-private-counter-control {
	border: 1px solid rgba(104, 211, 255, 0.52);
	background: linear-gradient(180deg, rgba(10, 42, 71, 0.9), rgba(3, 18, 32, 0.94));
	box-shadow: inset 0 1px 0 rgba(214, 246, 255, 0.12), 0 10px 20px rgba(0, 0, 0, 0.28);
}

#multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-private-counter-step {
	background: rgba(22, 72, 128, 0.88);
	text-shadow: 0 0 8px rgba(195, 240, 255, 0.28);
}

#multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-private-counter-step:hover {
	background: rgba(30, 90, 154, 0.94);
	box-shadow: inset 0 0 0 1px rgba(183, 237, 255, 0.26);
}

#multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-private-counter-step:disabled {
	background: rgba(13, 40, 73, 0.72);
}

#multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-private-counter-value {
	border-left-color: rgba(143, 224, 255, 0.2);
	border-right-color: rgba(143, 224, 255, 0.2);
	color: #eefbff;
}

#multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-private-join-hint,
#multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-private-config-hint {
	color: rgba(207, 242, 255, 0.8);
}

#multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-quick-btn {
	border-color: rgba(117, 217, 255, 0.62);
	background: linear-gradient(180deg, rgba(10, 46, 77, 0.94), rgba(3, 18, 34, 0.98));
	color: #eafaff;
	text-shadow: 0 0 11px rgba(161, 234, 255, 0.3);
	box-shadow: inset 0 1px 0 rgba(226, 248, 255, 0.12), 0 0 0 1px rgba(83, 196, 255, 0.24), 0 0 22px rgba(40, 169, 255, 0.26), 0 14px 28px rgba(0, 0, 0, 0.34);
}

#multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-quick-btn:hover {
	border-color: rgba(186, 238, 255, 0.82);
	box-shadow: inset 0 1px 0 rgba(236, 251, 255, 0.18), 0 0 0 1px rgba(111, 211, 255, 0.32), 0 0 28px rgba(49, 181, 255, 0.34), 0 18px 32px rgba(0, 0, 0, 0.36);
}

#multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-quick-btn.active {
	background: linear-gradient(180deg, #85ecff, #38acff 58%, #145cca);
	border-color: rgba(229, 250, 255, 0.96);
	box-shadow: inset 0 1px 0 rgba(247, 253, 255, 0.4), 0 0 0 1px rgba(120, 215, 255, 0.36), 0 0 28px rgba(72, 200, 255, 0.44), 0 16px 34px rgba(7, 61, 145, 0.42);
}

#multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-private-create-btn {
	min-height: 66px;
	border-radius: 18px;
	font-size: clamp(28px, 4.3vw, 40px);
	font-family: "Bahnschrift", "Arial Black", sans-serif;
	font-weight: 800;
	letter-spacing: 0.03em;
}

#multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-private-view-back {
	min-height: 52px;
	border-radius: 15px;
	background: linear-gradient(180deg, rgba(8, 34, 60, 0.88), rgba(3, 15, 28, 0.95));
	border: 1px solid rgba(115, 219, 255, 0.46);
	color: #dff8ff;
	box-shadow: inset 0 1px 0 rgba(221, 247, 255, 0.12), 0 0 0 1px rgba(72, 184, 255, 0.18), 0 0 20px rgba(38, 175, 255, 0.18), 0 12px 24px rgba(0, 0, 0, 0.3);
}

#multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-private-view-back:hover {
	border-color: rgba(190, 239, 255, 0.7);
	box-shadow: inset 0 1px 0 rgba(230, 250, 255, 0.18), 0 0 0 1px rgba(102, 209, 255, 0.24), 0 0 26px rgba(55, 188, 255, 0.26), 0 16px 28px rgba(0, 0, 0, 0.34);
}

#multiplayerPanel .multiplayer-menu-quick .mp-quick-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	width: 100%;
	max-width: 540px;
	margin: 0 auto;
	align-items: stretch;
	position: relative;
	z-index: 2;
}

#multiplayerPanel .multiplayer-menu-quick .mp-quick-btn {
	min-height: 66px;
	border-radius: 18px;
	border: 1px solid rgba(255, 153, 166, 0.66);
	background: linear-gradient(180deg, rgba(68, 13, 23, 0.93), rgba(34, 4, 12, 0.97));
	color: #fff1f3;
	font-size: 24px;
	font-weight: 800;
	font-family: "Bahnschrift SemiBold", "Trebuchet MS", sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1.15;
	padding: 12px 14px;
	text-shadow: 0 0 11px rgba(255, 164, 179, 0.34);
	box-shadow: inset 0 1px 0 rgba(255, 224, 229, 0.16), 0 0 0 1px rgba(255, 91, 117, 0.3), 0 0 24px rgba(255, 71, 104, 0.34), 0 16px 32px rgba(0, 0, 0, 0.34);
	transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

#multiplayerPanel .multiplayer-menu-quick .mp-quick-btn:hover {
	transform: translateY(-2px);
	box-shadow: inset 0 1px 0 rgba(255, 236, 240, 0.24), 0 0 0 1px rgba(255, 120, 142, 0.42), 0 0 30px rgba(255, 89, 120, 0.46), 0 20px 38px rgba(0, 0, 0, 0.38);
	border-color: rgba(255, 201, 211, 0.8);
}

#multiplayerPanel .multiplayer-menu-quick .mp-quick-btn:active {
	transform: translateY(0);
}

#multiplayerPanel .multiplayer-menu-quick .mp-quick-btn.active {
	background: linear-gradient(180deg, #ff7588, #ff3f5a 58%, #cb1632);
	color: #fff8f9;
	border-color: rgba(255, 220, 226, 0.92);
	box-shadow: inset 0 1px 0 rgba(255, 240, 244, 0.42), 0 0 0 1px rgba(255, 136, 156, 0.44), 0 0 28px rgba(255, 96, 126, 0.54), 0 16px 34px rgba(163, 20, 56, 0.44);
}

#multiplayerPanel #mpModeEliminationBtn {
	font-size: 16px;
	letter-spacing: 0.015em;
	line-height: 1.08;
}

#multiplayerPanel .multiplayer-menu-quick .mp-quick-play {
	grid-column: 1 / -1;
	min-height: 74px;
	border-radius: 22px;
	background: linear-gradient(180deg, #ff8b9a 0%, #ff3a56 56%, #af112a 100%);
	color: #fff6f8;
	border: 1px solid rgba(255, 226, 232, 0.94);
	box-shadow: 0 0 0 1px rgba(255, 125, 148, 0.42), 0 0 36px rgba(255, 80, 113, 0.56), 0 22px 44px rgba(141, 14, 43, 0.52), inset 0 2px 0 rgba(255, 231, 236, 0.42);
	font-family: "Bahnschrift", "Arial Black", sans-serif;
	font-size: clamp(34px, 4.8vw, 48px);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-shadow: 0 0 16px rgba(255, 193, 205, 0.46), 0 2px 10px rgba(86, 8, 31, 0.52);
	transition: transform 140ms ease, box-shadow 140ms ease;
}

#multiplayerPanel .multiplayer-menu-quick .mp-quick-play:hover {
	transform: translateY(-2px);
	box-shadow: 0 0 0 1px rgba(255, 161, 179, 0.54), 0 0 42px rgba(255, 95, 127, 0.62), 0 26px 48px rgba(136, 12, 41, 0.58), inset 0 2px 0 rgba(255, 240, 244, 0.46);
}

#multiplayerPanel .multiplayer-menu-quick .mp-quick-play:active {
	transform: translateY(0);
}

#multiplayerPanel .multiplayer-menu-quick .mp-quick-back {
	grid-column: 1 / -1;
	min-height: 58px;
	border-radius: 16px;
	background: linear-gradient(180deg, rgba(72, 14, 24, 0.88), rgba(35, 4, 12, 0.95));
	border: 1px solid rgba(255, 161, 173, 0.64);
	color: #ffdbe1;
	font-family: "Bahnschrift", "Segoe UI", sans-serif;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-shadow: 0 0 10px rgba(255, 157, 172, 0.36);
	box-shadow: inset 0 1px 0 rgba(255, 225, 231, 0.14), 0 0 0 1px rgba(255, 106, 129, 0.24), 0 0 20px rgba(255, 73, 105, 0.22), 0 10px 22px rgba(0, 0, 0, 0.32);
	transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

#multiplayerPanel .multiplayer-menu-quick .mp-quick-back:hover {
	transform: translateY(-1px);
	border-color: rgba(255, 201, 211, 0.82);
	box-shadow: inset 0 1px 0 rgba(255, 236, 241, 0.2), 0 0 0 1px rgba(255, 136, 156, 0.34), 0 0 24px rgba(255, 93, 123, 0.32), 0 14px 24px rgba(0, 0, 0, 0.34);
}

#multiplayerPanel .multiplayer-menu-quick .mp-quick-back:active {
	transform: translateY(0);
}

#multiplayerPanel .multiplayer-menu-quick .mp-hidden-wiring {
	display: none;
}

#multiplayerPanel .multiplayer-menu-quick .mp-private-join-panel {
	width: 100%;
	max-width: 540px;
	margin: 0 auto;
	padding: 10px 12px 12px;
	border-radius: 14px;
	background: linear-gradient(180deg, rgba(72, 14, 24, 0.78), rgba(32, 5, 12, 0.9));
	border: 1px solid rgba(255, 156, 171, 0.46);
	box-shadow: inset 0 1px 0 rgba(255, 224, 231, 0.14), 0 10px 24px rgba(0, 0, 0, 0.28);
	position: relative;
	z-index: 2;
}

#multiplayerPanel .multiplayer-menu-quick .mp-private-join-label {
	display: block;
	margin: 0 0 7px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 220, 228, 0.88);
}

#multiplayerPanel .multiplayer-menu-quick .mp-private-join-row {
	display: flex;
	gap: 8px;
	align-items: center;
}

#multiplayerPanel .multiplayer-menu-quick .mp-private-join-row .mp-invite-input {
	flex: 1;
	height: 42px;
	border-radius: 11px;
	font-size: 15px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
}

#multiplayerPanel .multiplayer-menu-quick .mp-private-join-btn {
	min-width: 100px;
	height: 42px;
	border-radius: 11px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-left: 0;
}

#multiplayerPanel .multiplayer-menu-quick .mp-private-join-btn:disabled {
	opacity: 0.55;
	cursor: default;
	transform: none;
	box-shadow: none;
}

#multiplayerPanel .multiplayer-menu-quick .mp-private-join-hint {
	margin-top: 7px;
	font-size: 11px;
	line-height: 1.3;
	color: rgba(255, 226, 233, 0.82);
}

#multiplayerPanel .multiplayer-menu-quick .mp-private-config-panel {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px dashed rgba(255, 170, 184, 0.4);
	display: grid;
	gap: 8px;
}

#multiplayerPanel .multiplayer-menu-quick .mp-private-config-title {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 220, 228, 0.9);
}

#multiplayerPanel .multiplayer-menu-quick .mp-private-counter-control {
	min-height: 44px;
	border-radius: 11px;
	border: 1px solid rgba(255, 150, 166, 0.56);
	background: linear-gradient(180deg, rgba(78, 16, 28, 0.9), rgba(38, 6, 14, 0.94));
	box-shadow: inset 0 1px 0 rgba(255, 229, 234, 0.12), 0 8px 18px rgba(0, 0, 0, 0.26);
	overflow: hidden;
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr) 42px;
	align-items: stretch;
}

#multiplayerPanel .multiplayer-menu-quick .mp-private-counter-step {
	border: 0;
	margin: 0;
	padding: 0;
	background: rgba(97, 18, 35, 0.9);
	color: #fff2f5;
	font-size: 22px;
	font-weight: 800;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	text-shadow: 0 0 8px rgba(255, 177, 193, 0.32);
	transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

#multiplayerPanel .multiplayer-menu-quick .mp-private-counter-step:hover {
	background: rgba(122, 24, 45, 0.94);
	box-shadow: inset 0 0 0 1px rgba(255, 188, 201, 0.3);
}

#multiplayerPanel .multiplayer-menu-quick .mp-private-counter-step:active {
	background: rgba(108, 20, 40, 0.97);
}

#multiplayerPanel .multiplayer-menu-quick .mp-private-counter-step:disabled {
	opacity: 0.42;
	cursor: not-allowed;
	background: rgba(64, 13, 24, 0.74);
	box-shadow: none;
}

#multiplayerPanel .multiplayer-menu-quick .mp-private-counter-value {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 8px;
	border-left: 1px solid rgba(255, 176, 190, 0.24);
	border-right: 1px solid rgba(255, 176, 190, 0.24);
	font-size: 15px;
	font-weight: 700;
	color: #fff1f4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#multiplayerPanel .multiplayer-menu-quick .mp-private-counter-control.is-disabled .mp-private-counter-value {
	opacity: 0.58;
}

#multiplayerPanel .multiplayer-menu-quick .mp-private-config-hint {
	font-size: 10px;
	line-height: 1.3;
	color: rgba(255, 226, 233, 0.78);
}

@media (max-width: 760px) {
	#multiplayerPanel .multiplayer-menu-quick .mp-quick-btn {
		min-height: 56px;
		font-size: 18px;
		border-radius: 14px;
		padding: 10px 12px;
	}

	#multiplayerPanel #mpModeEliminationBtn {
		font-size: 14px;
	}

	#multiplayerPanel .multiplayer-menu-quick .mp-quick-play {
		min-height: 62px;
		font-size: clamp(30px, 9vw, 38px);
		border-radius: 16px;
	}

	#multiplayerPanel .multiplayer-menu-quick .mp-quick-back {
		min-height: 52px;
		font-size: 16px;
		border-radius: 14px;
	}

	#multiplayerPanel .multiplayer-menu-quick .mp-private-join-panel {
		padding: 8px 9px 10px;
		border-radius: 12px;
	}

	#multiplayerPanel .multiplayer-menu-quick .mp-private-join-row {
		gap: 6px;
	}

	#multiplayerPanel .multiplayer-menu-quick .mp-private-join-row .mp-invite-input {
		height: 38px;
		font-size: 14px;
	}

	#multiplayerPanel .multiplayer-menu-quick .mp-private-join-btn {
		min-width: 88px;
		height: 38px;
		font-size: 12px;
	}

	#multiplayerPanel .multiplayer-menu-quick .mp-private-join-hint {
		font-size: 10px;
	}

	#multiplayerPanel .multiplayer-menu-quick .mp-private-counter-control {
		min-height: 40px;
		grid-template-columns: 38px minmax(0, 1fr) 38px;
	}

	#multiplayerPanel .multiplayer-menu-quick .mp-private-counter-step {
		font-size: 20px;
	}

	#multiplayerPanel .multiplayer-menu-quick .mp-private-counter-value {
		font-size: 13px;
	}

	#multiplayerPanel .multiplayer-menu-quick .mp-private-mode-grid {
		grid-template-columns: 1fr;
	}

	#multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-private-create-btn {
		min-height: 60px;
		font-size: clamp(24px, 7vw, 32px);
		border-radius: 16px;
	}
}

body.mobile-ui #multiplayerPanel .multiplayer-menu-quick {
	width: min(100%, 420px);
	max-height: calc(100dvh - var(--mobile-safe-top) - var(--mobile-safe-bottom) - 18px);
	overflow-y: auto;
	padding: 14px 12px 14px;
	gap: 10px;
	border-radius: 22px;
}

body.mobile-ui #multiplayerPanel .multiplayer-menu-quick .mp-quick-grid {
	gap: 9px;
}

body.mobile-ui #multiplayerPanel .multiplayer-menu-quick .mp-quick-btn {
	min-height: 58px;
	font-size: 18px;
	padding: 10px 8px;
	border-radius: 14px;
}

body.mobile-ui #multiplayerPanel #mpModeEliminationBtn {
	font-size: 13px;
}

body.mobile-ui #multiplayerPanel .multiplayer-menu-quick .mp-quick-play {
	min-height: 66px;
	font-size: 34px;
	border-radius: 16px;
}

body.mobile-ui #multiplayerPanel .multiplayer-menu-quick .mp-quick-back {
	min-height: 54px;
	font-size: 15px;
	border-radius: 14px;
}

body.mobile-ui #multiplayerPanel .multiplayer-menu-quick .mp-private-join-panel {
	padding: 8px 9px 10px;
	border-radius: 12px;
}

body.mobile-ui #multiplayerPanel .multiplayer-menu-quick .mp-private-join-row .mp-invite-input {
	height: 38px;
	font-size: 14px;
}

body.mobile-ui #multiplayerPanel .multiplayer-menu-quick .mp-private-join-btn {
	min-width: 84px;
	height: 38px;
	font-size: 12px;
}

body.mobile-ui #multiplayerPanel .multiplayer-menu-quick .mp-private-counter-control {
	min-height: 40px;
	grid-template-columns: 36px minmax(0, 1fr) 36px;
}

body.mobile-ui #multiplayerPanel .multiplayer-menu-quick .mp-private-counter-step {
	font-size: 20px;
}

body.mobile-ui #multiplayerPanel .multiplayer-menu-quick .mp-private-counter-value {
	font-size: 13px;
	padding: 0 6px;
}

body.mobile-ui #multiplayerPanel .multiplayer-menu-quick .mp-private-window-hint {
	font-size: 12px;
	line-height: 1.32;
}

body.mobile-ui #multiplayerPanel .multiplayer-menu-quick .mp-private-mode-block {
	padding: 12px 10px 12px;
	border-radius: 15px;
}

body.mobile-ui #multiplayerPanel .multiplayer-menu-quick .mp-private-mode-grid {
	grid-template-columns: 1fr;
	gap: 8px;
}

body.mobile-ui #multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-private-create-btn {
	min-height: 62px;
	font-size: 30px;
	border-radius: 16px;
}

body.mobile-ui #multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-private-view-back {
	min-height: 50px;
	font-size: 15px;
	border-radius: 14px;
}

body.mobile-ui #multiplayerPanel .multiplayer-menu-quick.is-private-view {
	padding: 10px 10px 10px;
	gap: 7px;
}

body.mobile-ui #multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-panel-title {
	font-size: clamp(20px, 8.2vw, 34px);
	margin-bottom: 2px;
}

body.mobile-ui #multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-private-window-hint {
	font-size: 11px;
	line-height: 1.22;
}

body.mobile-ui #multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-private-mode-block {
	padding: 8px 8px 9px;
	gap: 7px;
}

body.mobile-ui #multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-private-mode-grid {
	gap: 6px;
}

body.mobile-ui #multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-private-mode-grid .mp-quick-btn {
	min-height: 48px;
	font-size: 15px;
	padding: 8px 7px;
	border-radius: 12px;
}

body.mobile-ui #multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-private-join-panel {
	padding: 6px 7px 7px;
	border-radius: 11px;
}

body.mobile-ui #multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-private-join-label {
	margin-bottom: 5px;
	font-size: 10px;
}

body.mobile-ui #multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-private-join-row .mp-invite-input {
	height: 34px;
	font-size: 12px;
}

body.mobile-ui #multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-private-join-btn {
	height: 34px;
	font-size: 11px;
	min-width: 76px;
}

body.mobile-ui #multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-private-join-hint {
	margin-top: 4px;
	font-size: 9px;
	line-height: 1.2;
}

body.mobile-ui #multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-private-config-panel {
	margin-top: 6px;
	padding-top: 6px;
	gap: 6px;
}

body.mobile-ui #multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-private-config-title {
	font-size: 10px;
}

body.mobile-ui #multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-private-counter-control {
	min-height: 34px;
	grid-template-columns: 30px minmax(0, 1fr) 30px;
	border-radius: 9px;
}

body.mobile-ui #multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-private-counter-step {
	font-size: 16px;
}

body.mobile-ui #multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-private-counter-value {
	font-size: 11px;
	padding: 0 4px;
}

body.mobile-ui #multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-private-config-hint {
	font-size: 9px;
	line-height: 1.2;
}

body.mobile-ui #multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-private-actions {
	gap: 7px;
}

body.mobile-ui #multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-private-create-btn {
	min-height: 52px;
	font-size: 24px;
	border-radius: 14px;
}

body.mobile-ui #multiplayerPanel .multiplayer-menu-quick.is-private-view .mp-private-view-back {
	min-height: 42px;
	font-size: 13px;
	border-radius: 12px;
}

@keyframes menu-pulsar-field-drift {
	0%,
	100% {
		transform: translate3d(0, 0, 0);
	}
	50% {
		transform: translate3d(10px, -8px, 0);
	}
}

@keyframes menu-pulsar-wave {
	0% {
		transform: scale(0.34);
		opacity: 0;
	}
	14% {
		opacity: 0.6;
	}
	62% {
		opacity: 0.23;
	}
	100% {
		transform: scale(1.52);
		opacity: 0;
	}
}

@keyframes menu-pulsar-core {
	0%,
	100% {
		transform: scale(0.94);
		opacity: 0.28;
	}
	50% {
		transform: scale(1.12);
		opacity: 0.52;
	}
}

#singlePlayerPanel .singleplayer-menu-v2,
#multiplayerPanel .multiplayer-menu-quick {
	isolation: isolate;
}

#singlePlayerPanel .overlay-pulsars,
#multiplayerPanel .overlay-pulsars {
	position: absolute;
	inset: -8%;
	pointer-events: none;
	overflow: hidden;
	z-index: 1001;
	mix-blend-mode: screen;
	animation: menu-pulsar-field-drift 9.4s ease-in-out infinite;
}

#singlePlayerPanel .overlay-pulsars .overlay-pulsar,
#multiplayerPanel .overlay-pulsars .overlay-pulsar {
	position: absolute;
	left: var(--pulse-x, 50%);
	top: var(--pulse-y, 50%);
	width: var(--pulse-size, 88px);
	aspect-ratio: 1;
	border-radius: 999px;
	transform: translate(-50%, -50%) scale(0.34);
	opacity: 0;
	will-change: transform, opacity;
	animation: menu-pulsar-wave var(--pulse-speed, 6.6s) ease-out infinite var(--pulse-delay, 0s), menu-pulsar-core 3.4s ease-in-out infinite var(--pulse-delay, 0s);
}

#singlePlayerPanel .overlay-pulsars-green .overlay-pulsar {
	background: radial-gradient(circle, rgba(201, 255, 235, 0.44) 0 9%, rgba(122, 255, 206, 0.24) 18%, rgba(82, 255, 191, 0.13) 34%, rgba(74, 255, 187, 0) 63%);
	box-shadow: 0 0 0 1px rgba(120, 255, 206, 0.46), 0 0 0 8px rgba(95, 255, 194, 0.15), 0 0 22px rgba(78, 255, 191, 0.28);
}

#singlePlayerPanel .overlay-pulsars-green .overlay-pulsar:nth-child(1) {
	--pulse-x: 4%;
	--pulse-y: 16%;
	--pulse-size: 86px;
	--pulse-delay: 0s;
}

#singlePlayerPanel .overlay-pulsars-green .overlay-pulsar:nth-child(2) {
	--pulse-x: 10%;
	--pulse-y: 74%;
	--pulse-size: 82px;
	--pulse-delay: 0.7s;
}

#singlePlayerPanel .overlay-pulsars-green .overlay-pulsar:nth-child(3) {
	--pulse-x: 24%;
	--pulse-y: 8%;
	--pulse-size: 76px;
	--pulse-delay: 1.4s;
}

#singlePlayerPanel .overlay-pulsars-green .overlay-pulsar:nth-child(4) {
	--pulse-x: 30%;
	--pulse-y: 90%;
	--pulse-size: 84px;
	--pulse-delay: 2.1s;
}

#singlePlayerPanel .overlay-pulsars-green .overlay-pulsar:nth-child(5) {
	--pulse-x: 70%;
	--pulse-y: 10%;
	--pulse-size: 80px;
	--pulse-delay: 2.8s;
}

#singlePlayerPanel .overlay-pulsars-green .overlay-pulsar:nth-child(6) {
	--pulse-x: 82%;
	--pulse-y: 88%;
	--pulse-size: 88px;
	--pulse-delay: 3.5s;
}

#singlePlayerPanel .overlay-pulsars-green .overlay-pulsar:nth-child(7) {
	--pulse-x: 94%;
	--pulse-y: 26%;
	--pulse-size: 84px;
	--pulse-delay: 4.2s;
}

#singlePlayerPanel .overlay-pulsars-green .overlay-pulsar:nth-child(8) {
	--pulse-x: 98%;
	--pulse-y: 68%;
	--pulse-size: 76px;
	--pulse-delay: 4.9s;
}

#multiplayerPanel .overlay-pulsars-red .overlay-pulsar {
	background: radial-gradient(circle, rgba(255, 222, 228, 0.42) 0 8%, rgba(255, 137, 160, 0.25) 17%, rgba(255, 88, 120, 0.13) 31%, rgba(255, 81, 115, 0) 63%);
	box-shadow: 0 0 0 1px rgba(255, 142, 163, 0.48), 0 0 0 8px rgba(255, 109, 137, 0.17), 0 0 24px rgba(255, 94, 127, 0.3);
}

#multiplayerPanel .overlay-pulsars-red .overlay-pulsar:nth-child(1) {
	--pulse-x: 3%;
	--pulse-y: 14%;
	--pulse-size: 84px;
	--pulse-delay: 0.1s;
}

#multiplayerPanel .overlay-pulsars-red .overlay-pulsar:nth-child(2) {
	--pulse-x: 8%;
	--pulse-y: 64%;
	--pulse-size: 80px;
	--pulse-delay: 0.9s;
}

#multiplayerPanel .overlay-pulsars-red .overlay-pulsar:nth-child(3) {
	--pulse-x: 18%;
	--pulse-y: 90%;
	--pulse-size: 76px;
	--pulse-delay: 1.6s;
}

#multiplayerPanel .overlay-pulsars-red .overlay-pulsar:nth-child(4) {
	--pulse-x: 28%;
	--pulse-y: 6%;
	--pulse-size: 82px;
	--pulse-delay: 2.3s;
}

#multiplayerPanel .overlay-pulsars-red .overlay-pulsar:nth-child(5) {
	--pulse-x: 72%;
	--pulse-y: 8%;
	--pulse-size: 80px;
	--pulse-delay: 3s;
}

#multiplayerPanel .overlay-pulsars-red .overlay-pulsar:nth-child(6) {
	--pulse-x: 84%;
	--pulse-y: 86%;
	--pulse-size: 88px;
	--pulse-delay: 3.7s;
}

#multiplayerPanel .overlay-pulsars-red .overlay-pulsar:nth-child(7) {
	--pulse-x: 94%;
	--pulse-y: 24%;
	--pulse-size: 84px;
	--pulse-delay: 4.4s;
}

#multiplayerPanel .overlay-pulsars-red .overlay-pulsar:nth-child(8) {
	--pulse-x: 98%;
	--pulse-y: 68%;
	--pulse-size: 76px;
	--pulse-delay: 5.1s;
}

body.mobile-ui #singlePlayerPanel .overlay-pulsars,
body.mobile-ui #multiplayerPanel .overlay-pulsars {
	inset: -14%;
	opacity: 0.9;
}

@media (prefers-reduced-motion: reduce) {
	#singlePlayerPanel .overlay-pulsars,
	#multiplayerPanel .overlay-pulsars {
		animation: none !important;
		transform: none !important;
	}

	#singlePlayerPanel .overlay-pulsars .overlay-pulsar,
	#multiplayerPanel .overlay-pulsars .overlay-pulsar {
		animation: none !important;
		opacity: 0.22;
		transform: translate(-50%, -50%) scale(0.9) !important;
	}
}

/* --- Clean main menu action layout (overrides) --- */
#startOverlay.main-menu {
	align-items: center;
	justify-content: center;
	padding: 8px;
	overflow: hidden;
	background:
		linear-gradient(180deg, rgba(3, 8, 16, 0.44), rgba(2, 6, 12, 0.62)),
		url("./Imagen assets/Backend.png") center/cover no-repeat;
}

#startOverlay .menu-bg {
	display: none !important;
}

#startOverlay .menu-nodes {
	display: none !important;
}

#startOverlay.main-menu::before {
	content: none !important;
}

#startOverlay .game-menu.menu-visual-v2 {
	width: min(96vw, 620px);
	max-width: 620px;
	height: min(96dvh, 940px);
	max-height: 96dvh;
	position: relative;
	padding: 20px 24px 22px;
	border-radius: 0;
	border: none;
	background: transparent;
	box-shadow: none;
	backdrop-filter: none;
	gap: 10px;
	overflow: visible;
	justify-content: center;
}

#startOverlay .game-menu.menu-visual-v2::before {
	content: none;
}

#startOverlay .game-menu.menu-visual-v2::after {
	content: none;
}

#startOverlay .game-menu.menu-visual-v2 > * {
	position: relative;
	z-index: 2;
}

#startOverlay .menu-top {
	position: static;
	text-align: center;
	width: min(100%, 560px);
	margin: 0 auto 4px;
	padding-top: 2px;
}

#startOverlay .menu-logo-wrap {
	width: 100%;
	height: clamp(78px, 13vh, 124px);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 4px auto 0;
	border-radius: 12px;
}

#startOverlay .menu-logo {
	display: block;
	width: 126%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	margin: 0;
	filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.4));
	user-select: none;
	-webkit-user-drag: none;
}

#startOverlay .menu-top-controls {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	align-items: center;
	gap: 10px;
	z-index: 2;
}

#startOverlay .menu-icon-btn {
	width: 46px;
	height: 46px;
	padding: 0;
	border-radius: 13px;
	border: 1px solid rgba(173, 220, 255, 0.34);
	background: linear-gradient(180deg, rgba(14, 32, 52, 0.9), rgba(8, 18, 33, 0.96));
	color: #eff8ff;
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	box-shadow: inset 0 1px 0 rgba(236, 248, 255, 0.15), 0 14px 28px rgba(0, 0, 0, 0.32);
	transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

#startOverlay .menu-icon-btn:hover {
	transform: translateY(-1px);
	border-color: rgba(196, 232, 255, 0.56);
	box-shadow: inset 0 1px 0 rgba(236, 248, 255, 0.18), 0 12px 24px rgba(0, 0, 0, 0.32);
}

#startOverlay .menu-icon-btn:active {
	transform: translateY(0);
}

#startOverlay .menu-top-controls #openSettings::before,
#startOverlay .menu-main-actions .menu-main-btn::before {
	content: none !important;
	display: none !important;
}

#startOverlay .menu-main-actions {
	width: min(100%, 560px);
	margin: 2px auto 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	flex: 0 0 auto;
	gap: 12px;
}

#startOverlay .menu-main-actions .menu-main-btn {
	width: 100%;
	min-height: 76px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 20px;
	font-size: 30px;
	font-weight: 800;
	font-family: "Bahnschrift SemiBold", "Trebuchet MS", sans-serif;
	text-transform: uppercase;
	line-height: 1;
	text-align: center;
	letter-spacing: 0.045em;
	padding: 14px 18px;
	text-shadow: 0 0 10px rgba(113, 207, 255, 0.3);
	box-shadow: inset 0 1px 0 rgba(236, 248, 255, 0.14), 0 0 0 1px rgba(58, 161, 255, 0.24), 0 0 24px rgba(45, 147, 255, 0.3), 0 18px 34px rgba(0, 0, 0, 0.38);
	border: 1px solid rgba(106, 198, 255, 0.58);
	background: linear-gradient(180deg, rgba(7, 30, 65, 0.92), rgba(3, 11, 30, 0.98));
	color: #eaf8ff;
	transition: transform 130ms ease, box-shadow 130ms ease, border-color 130ms ease;
}

#startOverlay .menu-main-actions .menu-main-btn:hover {
	transform: translateY(-2px);
	border-color: rgba(183, 234, 255, 0.86);
	box-shadow: inset 0 1px 0 rgba(236, 248, 255, 0.2), 0 0 0 1px rgba(106, 198, 255, 0.42), 0 0 32px rgba(55, 163, 255, 0.48), 0 22px 42px rgba(0, 0, 0, 0.42);
}

#startOverlay .menu-main-actions .menu-main-btn:active {
	transform: translateY(0);
}

#startOverlay .menu-main-actions .menu-main-btn.primary {
	background: linear-gradient(180deg, #53bbff 0%, #2f86ff 58%, #1450ce 100%);
	border-color: rgba(195, 227, 255, 0.72);
	color: #f3fbff;
	box-shadow: inset 0 1px 0 rgba(245, 252, 255, 0.42), 0 0 0 1px rgba(114, 205, 255, 0.46), 0 0 32px rgba(67, 172, 255, 0.56), 0 20px 38px rgba(20, 86, 206, 0.5);
}

#startOverlay .menu-main-actions .menu-main-btn.menu-main-btn-mp {
	background: linear-gradient(180deg, #60c8ff 0%, #3f93ff 58%, #1a5ad8 100%);
	border-color: rgba(195, 235, 255, 0.9);
	box-shadow: inset 0 1px 0 rgba(235, 248, 255, 0.44), 0 0 0 1px rgba(130, 212, 255, 0.5), 0 0 36px rgba(78, 179, 255, 0.62), 0 22px 40px rgba(27, 96, 214, 0.54);
	color: #f4fcff;
}

#startOverlay .menu-main-actions .menu-main-btn.menu-main-btn-customize {
	opacity: 1;
	border-style: solid;
	border-color: rgba(183, 219, 255, 0.9);
	background: linear-gradient(180deg, #89d6ff 0%, #4e95ff 56%, #2a57d8 100%);
	color: #f3f9ff;
	text-shadow: 0 0 14px rgba(174, 221, 255, 0.5), 0 2px 10px rgba(10, 45, 101, 0.45);
	box-shadow: inset 0 1px 0 rgba(232, 247, 255, 0.45), 0 0 0 1px rgba(143, 202, 255, 0.56), 0 0 34px rgba(87, 164, 255, 0.64), 0 22px 40px rgba(17, 67, 173, 0.5);
}

#startOverlay #openPersonalizationMenu {
	border-color: rgba(183, 219, 255, 0.9);
	background: linear-gradient(180deg, #89d6ff 0%, #4e95ff 56%, #2a57d8 100%);
	color: #f3f9ff;
	font-size: clamp(22px, 4.3vw, 30px);
	letter-spacing: 0.038em;
	text-shadow: 0 0 14px rgba(174, 221, 255, 0.5), 0 2px 10px rgba(10, 45, 101, 0.45);
	box-shadow: inset 0 1px 0 rgba(232, 247, 255, 0.45), 0 0 0 1px rgba(143, 202, 255, 0.56), 0 0 34px rgba(87, 164, 255, 0.64), 0 22px 40px rgba(17, 67, 173, 0.5);
}

#startOverlay #openSinglePlayerMenu {
	border-color: rgba(176, 255, 215, 0.86);
	background: linear-gradient(180deg, #73ffbd 0%, #32d982 56%, #14974e 100%);
	color: #f4fff8;
	text-shadow: 0 0 14px rgba(181, 255, 224, 0.44), 0 2px 10px rgba(13, 84, 45, 0.48);
	box-shadow: inset 0 1px 0 rgba(234, 255, 245, 0.42), 0 0 0 1px rgba(124, 255, 198, 0.5), 0 0 36px rgba(86, 255, 177, 0.62), 0 22px 40px rgba(13, 124, 68, 0.52);
}

#startOverlay #openMultiplayerMenu {
	border-color: rgba(255, 187, 198, 0.88);
	background: linear-gradient(180deg, #ff8fa2 0%, #ff4260 56%, #b90f2d 100%);
	color: #fff5f8;
	text-shadow: 0 0 14px rgba(255, 182, 196, 0.46), 0 2px 10px rgba(91, 10, 29, 0.52);
	box-shadow: inset 0 1px 0 rgba(255, 234, 239, 0.4), 0 0 0 1px rgba(255, 142, 162, 0.52), 0 0 36px rgba(255, 89, 118, 0.64), 0 22px 40px rgba(128, 14, 41, 0.54);
}

#startOverlay #openPersonalizationMenu:hover {
	border-color: rgba(205, 233, 255, 0.96);
	box-shadow: inset 0 1px 0 rgba(243, 252, 255, 0.52), 0 0 0 1px rgba(170, 219, 255, 0.62), 0 0 40px rgba(105, 181, 255, 0.74), 0 24px 44px rgba(17, 67, 173, 0.56);
}

#startOverlay #openSinglePlayerMenu:hover {
	border-color: rgba(197, 255, 229, 0.95);
	box-shadow: inset 0 1px 0 rgba(241, 255, 248, 0.5), 0 0 0 1px rgba(151, 255, 210, 0.58), 0 0 40px rgba(105, 255, 190, 0.72), 0 24px 44px rgba(14, 130, 73, 0.58);
}

#startOverlay #openMultiplayerMenu:hover {
	border-color: rgba(255, 211, 220, 0.96);
	box-shadow: inset 0 1px 0 rgba(255, 241, 245, 0.5), 0 0 0 1px rgba(255, 165, 181, 0.6), 0 0 40px rgba(255, 108, 136, 0.74), 0 24px 44px rgba(133, 15, 44, 0.6);
}

#startOverlay #mobilePresetNote,
#startOverlay .menu-stats-grid,
#startOverlay .menu-mode-section,
#startOverlay .menu-ai-section,
#startOverlay .menu-footer {
	display: none !important;
}

@media (max-width: 880px) {
	#startOverlay .game-menu.menu-visual-v2 {
		width: min(96vw, 520px);
		height: min(96dvh, 900px);
		max-height: 96dvh;
		padding: 16px 16px 18px;
		gap: 12px;
	}

	#startOverlay .menu-main-actions {
		width: 100%;
		gap: 10px;
	}

	#startOverlay .menu-main-actions .menu-main-btn {
		min-height: 66px;
		font-size: 24px;
		border-radius: 16px;
		padding: 11px 14px;
	}

	#startOverlay .menu-logo-wrap {
		height: clamp(72px, 12vh, 104px);
		margin: 4px auto 0;
	}

	#startOverlay .menu-logo {
		width: 130%;
		height: 100%;
		margin: 0;
	}

	#startOverlay .menu-icon-btn {
		width: 40px;
		height: 40px;
		font-size: 19px;
		border-radius: 11px;
	}
}

body.mobile-ui #startOverlay .game-menu.menu-visual-v2 {
	width: min(100%, 430px);
	max-width: 430px;
	height: calc(100dvh - var(--mobile-safe-top) - var(--mobile-safe-bottom) - 14px);
	max-height: calc(100dvh - var(--mobile-safe-top) - var(--mobile-safe-bottom) - 14px);
	padding: calc(var(--mobile-safe-top) + 54px) 14px calc(var(--mobile-safe-bottom) + 16px);
	gap: 10px;
	overflow: visible;
	border-radius: 0;
	border: none;
	background: transparent;
	box-shadow: none;
	backdrop-filter: none;
}

body.mobile-ui #startOverlay .menu-top {
	width: 100%;
	margin: 0 auto 2px;
}

body.mobile-ui #startOverlay .menu-logo-wrap {
	height: clamp(68px, 11vh, 94px);
	margin: 2px auto 0;
}

body.mobile-ui #startOverlay .menu-logo {
	width: 132%;
	height: 100%;
	margin: 0;
	filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.34));
}

body.mobile-ui #startOverlay .menu-top-controls {
	position: fixed;
	top: calc(var(--mobile-safe-top) + 4px);
	right: 8px;
	gap: 6px;
	z-index: 1305;
}

body.mobile-ui #startOverlay .menu-icon-btn {
	height: 40px;
	font-size: 19px;
	border-radius: 11px;
	padding: 0;
}

body.mobile-ui #startOverlay .menu-main-actions {
	width: 100%;
	flex: 0 0 auto;
	justify-content: flex-start;
	margin-top: 0;
	gap: 9px;
}

body.mobile-ui #startOverlay .menu-main-actions .menu-main-btn {
	min-height: 62px;
	font-size: 22px;
	padding: 11px 12px;
	border-radius: 15px;
	letter-spacing: 0.04em;
	line-height: 1.1;
	white-space: normal;
	box-shadow: inset 0 1px 0 rgba(236, 248, 255, 0.16), 0 0 0 1px rgba(85, 185, 255, 0.35), 0 0 24px rgba(57, 161, 255, 0.4), 0 16px 30px rgba(0, 0, 0, 0.36);
}

body.mobile-ui #startOverlay #openPersonalizationMenu {
	font-size: clamp(18px, 5.2vw, 21px);
	letter-spacing: 0.03em;
	padding-left: 10px;
	padding-right: 10px;
}

/* --- Leaderboard neon style overrides --- */
#leaderboardPanel.main-menu {
	align-items: center;
	justify-content: center;
	padding: 10px;
}

#leaderboardPanel .leaderboard-menu {
	width: min(96vw, 760px);
	max-width: 760px;
	max-height: 96dvh;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-y;
	padding: 17px 16px 15px;
	border-radius: 22px;
	border: 1px solid rgba(147, 206, 255, 0.34);
	background:
		radial-gradient(120% 90% at 0% 20%, rgba(98, 167, 255, 0.28), transparent 58%),
		radial-gradient(110% 85% at 100% 24%, rgba(255, 177, 108, 0.24), transparent 56%),
		radial-gradient(130% 120% at 50% 95%, rgba(8, 22, 44, 0.92), rgba(2, 8, 20, 0.98) 68%);
	box-shadow: 0 0 0 1px rgba(118, 189, 255, 0.2), 0 0 36px rgba(48, 139, 240, 0.3), 0 18px 44px rgba(0, 0, 0, 0.56);
	text-align: left;
}

#leaderboardPanel .leaderboard-title {
	margin: 0;
	font-size: clamp(30px, 4vw, 42px);
	letter-spacing: 0.05em;
	font-family: "Bahnschrift SemiBold", "Trebuchet MS", sans-serif;
	text-transform: uppercase;
	color: #eef8ff;
	text-shadow: 0 0 16px rgba(108, 205, 255, 0.34);
}

#leaderboardPanel .leaderboard-sub {
	margin: 8px 0 0;
	font-size: 14px;
	color: rgba(216, 236, 255, 0.86);
	line-height: 1.3;
}

#leaderboardPanel .leaderboard-modes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-top: 14px;
}

#leaderboardPanel .lb-mode-btn {
	min-height: 48px;
	padding: 10px 12px;
	border-radius: 14px;
	border: 1px solid rgba(109, 194, 255, 0.48);
	background: linear-gradient(180deg, rgba(8, 31, 66, 0.9), rgba(3, 11, 30, 0.96));
	color: #eaf8ff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	box-shadow: inset 0 1px 0 rgba(228, 247, 255, 0.12), 0 0 0 1px rgba(58, 161, 255, 0.2), 0 0 18px rgba(42, 146, 255, 0.25);
	transition: transform 130ms ease, border-color 130ms ease, box-shadow 130ms ease;
}

#leaderboardPanel .lb-mode-btn:hover {
	transform: translateY(-1px);
	border-color: rgba(176, 232, 255, 0.82);
	box-shadow: inset 0 1px 0 rgba(236, 248, 255, 0.2), 0 0 0 1px rgba(106, 198, 255, 0.36), 0 0 26px rgba(55, 163, 255, 0.4);
}

#leaderboardPanel .lb-mode-btn.active {
	background: linear-gradient(180deg, #53bbff 0%, #2f86ff 58%, #1450ce 100%);
	border-color: rgba(206, 239, 255, 0.92);
	color: #f4fbff;
	box-shadow: inset 0 1px 0 rgba(245, 252, 255, 0.4), 0 0 0 1px rgba(114, 205, 255, 0.42), 0 0 28px rgba(67, 172, 255, 0.52);
}

#leaderboardPanel .leaderboard-current {
	margin-top: 12px;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #9ed4ff;
}

#leaderboardPanel .leaderboard-table-wrap {
	margin-top: 10px;
	border-radius: 16px;
	border: 1px solid rgba(110, 190, 255, 0.3);
	background: linear-gradient(180deg, rgba(6, 18, 38, 0.9), rgba(4, 10, 24, 0.94));
	box-shadow: inset 0 1px 0 rgba(228, 246, 255, 0.08), 0 0 20px rgba(32, 122, 230, 0.24);
	max-height: min(56dvh, 500px);
	overflow-y: auto;
	overflow-x: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-y;
}

#leaderboardPanel .leaderboard-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

#leaderboardPanel .leaderboard-table th,
#leaderboardPanel .leaderboard-table td {
	box-sizing: border-box;
}

#leaderboardPanel .leaderboard-table thead th {
	padding: 8px 9px;
	font-size: 9px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: rgba(190, 228, 255, 0.94);
	background: linear-gradient(180deg, rgba(17, 48, 84, 0.66), rgba(8, 22, 44, 0.82));
	border-bottom: 1px solid rgba(118, 191, 255, 0.3);
	text-align: left;
	position: sticky;
	top: 0;
	z-index: 1;
}

#leaderboardPanel .leaderboard-table thead th:last-child {
	text-align: right;
}

#leaderboardPanel .leaderboard-table thead th:first-child,
#leaderboardPanel .leaderboard-table tbody td:first-child {
	width: 52px;
}

#leaderboardPanel .leaderboard-table thead th:nth-child(2),
#leaderboardPanel .leaderboard-table tbody td:nth-child(2) {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#leaderboardPanel .leaderboard-table thead th:last-child,
#leaderboardPanel .leaderboard-table tbody td:last-child {
	width: 86px;
	white-space: nowrap;
}

#leaderboardPanel .leaderboard-table tbody tr:nth-child(odd) {
	background: rgba(13, 37, 66, 0.34);
}

#leaderboardPanel .leaderboard-table tbody tr:nth-child(even) {
	background: rgba(7, 22, 43, 0.3);
}

#leaderboardPanel .leaderboard-table tbody td {
	padding: 7px 9px;
	font-size: 11px;
	color: #eaf7ff;
	border-bottom: 1px solid rgba(107, 177, 238, 0.14);
}

#leaderboardPanel .leaderboard-table tbody tr:last-child td {
	border-bottom: none;
}

#leaderboardPanel .leaderboard-table tbody td:last-child {
	text-align: right;
	font-weight: 700;
	color: #b9e4ff;
}

#leaderboardPanel .leaderboard-rank {
	color: rgba(184, 218, 245, 0.84);
	width: 44px;
}

#leaderboardPanel .leaderboard-empty {
	padding: 14px 12px;
	font-size: 13px;
	color: rgba(178, 211, 236, 0.88);
}

#leaderboardPanel .leaderboard-actions {
	margin-top: 14px;
	display: flex;
	justify-content: flex-end;
}

#leaderboardPanel #leaderboardBackBtn {
	min-height: 52px;
	padding: 10px 18px;
	border-radius: 14px;
	font-size: 18px;
	font-weight: 700;
	border: 1px solid rgba(111, 197, 255, 0.5);
	background: linear-gradient(180deg, rgba(8, 31, 66, 0.9), rgba(3, 11, 30, 0.96));
	color: #eaf8ff;
	box-shadow: inset 0 1px 0 rgba(236, 248, 255, 0.14), 0 0 0 1px rgba(58, 161, 255, 0.2), 0 0 18px rgba(42, 146, 255, 0.24);
}

#leaderboardPanel #leaderboardBackBtn:hover {
	transform: translateY(-1px);
	border-color: rgba(171, 232, 255, 0.82);
	box-shadow: inset 0 1px 0 rgba(236, 248, 255, 0.2), 0 0 0 1px rgba(106, 198, 255, 0.36), 0 0 24px rgba(55, 163, 255, 0.38);
}

@media (max-width: 760px) {
	#leaderboardPanel .leaderboard-menu {
		width: min(96vw, 420px);
		padding: 13px 10px 13px;
	}

	#leaderboardPanel .leaderboard-title {
		font-size: 27px;
	}

	#leaderboardPanel .leaderboard-sub {
		font-size: 12px;
	}

	#leaderboardPanel .leaderboard-modes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	#leaderboardPanel .lb-mode-btn {
		min-height: 42px;
		font-size: 13px;
		padding: 8px 9px;
	}

	#leaderboardPanel .leaderboard-current {
		font-size: 11px;
	}

	#leaderboardPanel .leaderboard-table-wrap {
		max-height: min(52dvh, 420px);
	}

	#leaderboardPanel .leaderboard-table thead th {
		font-size: 8px;
		padding: 6px 6px;
		letter-spacing: 0.01em;
	}

	#leaderboardPanel .leaderboard-table tbody td {
		font-size: 10px;
		padding: 6px 6px;
	}

	#leaderboardPanel .leaderboard-table thead th:first-child,
	#leaderboardPanel .leaderboard-table tbody td:first-child {
		width: 42px;
	}

	#leaderboardPanel .leaderboard-table thead th:last-child,
	#leaderboardPanel .leaderboard-table tbody td:last-child {
		width: 74px;
	}

	#leaderboardPanel .leaderboard-empty {
		font-size: 12px;
		padding: 12px 10px;
	}

	#leaderboardPanel #leaderboardBackBtn {
		min-height: 44px;
		font-size: 14px;
	}
}

@media (max-width: 420px) {
	#leaderboardPanel .leaderboard-menu {
		width: min(97vw, 360px);
		padding: 11px 8px 11px;
	}

	#leaderboardPanel .leaderboard-title {
		font-size: 24px;
	}

	#leaderboardPanel .leaderboard-sub {
		font-size: 11px;
	}

	#leaderboardPanel .lb-mode-btn {
		min-height: 38px;
		font-size: 12px;
		padding: 7px 6px;
	}

	#leaderboardPanel .leaderboard-current {
		font-size: 10px;
	}

	#leaderboardPanel .leaderboard-table-wrap {
		max-height: min(48dvh, 360px);
	}

	#leaderboardPanel .leaderboard-table thead th {
		font-size: 7px;
		padding: 5px 5px;
	}

	#leaderboardPanel .leaderboard-table tbody td {
		font-size: 9px;
		padding: 5px 5px;
	}

	#leaderboardPanel .leaderboard-table thead th:first-child,
	#leaderboardPanel .leaderboard-table tbody td:first-child {
		width: 38px;
	}

	#leaderboardPanel .leaderboard-table thead th:last-child,
	#leaderboardPanel .leaderboard-table tbody td:last-child {
		width: 68px;
	}

	#leaderboardPanel .leaderboard-empty {
		font-size: 11px;
		padding: 10px 8px;
	}

	#leaderboardPanel #leaderboardBackBtn {
		min-height: 40px;
		font-size: 13px;
		padding: 8px 14px;
	}
}

/* --- Config modal neon style --- */
#configModal.overlay {
	align-items: center;
	justify-content: center;
	padding: 10px;
	background: radial-gradient(130% 115% at 50% 0%, rgba(16, 45, 84, 0.54), rgba(1, 5, 14, 0.86));
}

#configModal .config-panel {
	width: min(96vw, 560px);
	max-width: 560px;
	max-height: 94dvh;
	overflow: auto;
	padding: 18px 18px 16px;
	border-radius: 20px;
	border: 1px solid rgba(143, 205, 255, 0.34);
	background:
		radial-gradient(120% 90% at 0% 20%, rgba(98, 167, 255, 0.24), transparent 58%),
		radial-gradient(110% 85% at 100% 24%, rgba(255, 177, 108, 0.2), transparent 56%),
		radial-gradient(130% 120% at 50% 95%, rgba(8, 22, 44, 0.92), rgba(2, 8, 20, 0.98) 68%);
	box-shadow: 0 0 0 1px rgba(118, 189, 255, 0.18), 0 0 28px rgba(48, 139, 240, 0.28), 0 16px 40px rgba(0, 0, 0, 0.56);
	text-align: left;
}

#configModal .config-panel h2 {
	margin: 0 0 14px;
	font-size: clamp(22px, 3.2vw, 30px);
	font-family: "Bahnschrift SemiBold", "Trebuchet MS", sans-serif;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #eef8ff;
	text-shadow: 0 0 14px rgba(105, 203, 255, 0.32);
	text-align: center;
}

#configModal .cfg-label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: rgba(192, 228, 255, 0.94);
}

#configModal .cfg-row {
	margin-top: 12px;
}

#configModal .cfg-text-input,
#configModal .cfg-select {
	width: 100%;
	box-sizing: border-box;
	margin-top: 6px;
	height: 42px;
	padding: 8px 11px;
	border-radius: 11px;
	border: 1px solid rgba(128, 197, 255, 0.36);
	background: linear-gradient(180deg, rgba(8, 24, 48, 0.92), rgba(4, 12, 27, 0.96));
	color: #f1f9ff;
	font-size: 14px;
	outline: none;
	box-shadow: inset 0 1px 0 rgba(234, 248, 255, 0.08), 0 0 0 1px rgba(62, 166, 255, 0.14);
}

#configModal .cfg-text-input:focus,
#configModal .cfg-select:focus {
	border-color: rgba(181, 234, 255, 0.86);
	box-shadow: 0 0 0 2px rgba(95, 182, 255, 0.22), 0 0 16px rgba(56, 160, 255, 0.3);
}

#configModal .cfg-text-input[readonly],
#configModal .cfg-text-input.is-locked {
	opacity: 0.9;
	cursor: not-allowed;
	border-color: rgba(126, 207, 255, 0.2);
	box-shadow: inset 0 1px 0 rgba(234, 248, 255, 0.04);
	background: linear-gradient(180deg, rgba(6, 16, 30, 0.95), rgba(4, 11, 23, 0.98));
	color: rgba(220, 239, 255, 0.9);
}

#configModal .cfg-lock-hint {
	margin-top: 7px;
	padding: 8px 10px;
	border-radius: 10px;
	border: 1px solid rgba(130, 201, 255, 0.24);
	background: linear-gradient(180deg, rgba(9, 29, 56, 0.74), rgba(6, 18, 38, 0.82));
	font-size: 12px;
	line-height: 1.3;
	color: rgba(206, 233, 255, 0.92);
}

#configModal .cfg-lock-hint.hidden {
	display: none;
}

#configModal .cfg-inline-check {
	display: flex;
	align-items: center;
	gap: 8px;
}

#configModal .cfg-inline-check input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: #4eb6ff;
	margin: 0;
}

#configModal .cfg-inline-check label {
	margin: 0;
	font-size: 13px;
	color: rgba(214, 236, 255, 0.92);
}

#configModal .cfg-inline-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

#configModal .cfg-volume-row .cfg-volume-label {
	margin-bottom: 6px;
}

#configModal .cfg-range {
	width: 100%;
	accent-color: #4db7ff;
	filter: drop-shadow(0 0 6px rgba(64, 170, 255, 0.28));
}

#configModal .cfg-assets-label {
	font-size: 13px;
	color: rgba(202, 231, 255, 0.94);
}

#configModal .cfg-assets-btn.small {
	min-height: 36px;
	min-width: 120px;
	border-radius: 11px;
	border: 1px solid rgba(120, 196, 255, 0.52);
	background: linear-gradient(180deg, rgba(9, 33, 70, 0.9), rgba(4, 13, 33, 0.96));
	color: #ecf8ff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.03em;
	box-shadow: inset 0 1px 0 rgba(236, 248, 255, 0.14), 0 0 0 1px rgba(62, 166, 255, 0.2), 0 0 16px rgba(42, 146, 255, 0.24);
}

#configModal .cfg-actions {
	margin-top: 14px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

#configModal .cfg-actions button {
	width: 100%;
	min-height: 52px;
	border-radius: 14px;
	font-size: 18px;
	font-weight: 700;
	font-family: "Bahnschrift SemiBold", "Trebuchet MS", sans-serif;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

#configModal #cfgSave {
	border: 1px solid rgba(206, 239, 255, 0.9);
	background: linear-gradient(180deg, #53bbff 0%, #2f86ff 58%, #1450ce 100%);
	color: #f4fbff;
	box-shadow: inset 0 1px 0 rgba(245, 252, 255, 0.4), 0 0 0 1px rgba(114, 205, 255, 0.42), 0 0 28px rgba(67, 172, 255, 0.5);
}

#configModal #cfgCancel {
	border: 1px solid rgba(111, 197, 255, 0.5);
	background: linear-gradient(180deg, rgba(8, 31, 66, 0.9), rgba(3, 11, 30, 0.96));
	color: #eaf8ff;
	box-shadow: inset 0 1px 0 rgba(236, 248, 255, 0.14), 0 0 0 1px rgba(58, 161, 255, 0.2), 0 0 16px rgba(42, 146, 255, 0.24);
}

#personalizationModal.overlay {
	align-items: center;
	justify-content: center;
	padding: 10px;
	background: radial-gradient(130% 115% at 50% 0%, rgba(46, 17, 68, 0.54), rgba(6, 2, 14, 0.9));
	z-index: 2500;
}

#personalizationModal .personalization-panel {
	width: min(96vw, 560px);
	max-width: 560px;
	max-height: 94dvh;
	overflow: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-y;
	padding: 18px 18px 16px;
	border-radius: 20px;
	border: 1px solid rgba(210, 146, 255, 0.36);
	background:
		radial-gradient(120% 90% at 0% 20%, rgba(124, 106, 255, 0.24), transparent 58%),
		radial-gradient(110% 85% at 100% 24%, rgba(255, 147, 90, 0.22), transparent 56%),
		radial-gradient(130% 120% at 50% 95%, rgba(21, 12, 44, 0.92), rgba(6, 4, 20, 0.98) 68%);
	box-shadow: 0 0 0 1px rgba(186, 112, 255, 0.2), 0 0 28px rgba(138, 73, 255, 0.3), 0 16px 40px rgba(0, 0, 0, 0.56);
	text-align: left;
}

#personalizationModal .personalization-panel h2 {
	margin: 0;
	font-size: clamp(22px, 3.2vw, 30px);
	font-family: "Bahnschrift SemiBold", "Trebuchet MS", sans-serif;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #f6ecff;
	text-shadow: 0 0 14px rgba(199, 132, 255, 0.38);
	text-align: center;
}

#personalizationModal .personalization-subtitle {
	margin: 8px 0 12px;
	text-align: center;
	font-size: 13px;
	line-height: 1.36;
	color: rgba(233, 216, 255, 0.92);
}

#personalizationModal .pers-economy-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 2px 0 8px;
}

#personalizationModal .pers-gold-balance {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #ffe28b;
	text-shadow: 0 0 10px rgba(255, 215, 106, 0.28);
	white-space: nowrap;
}

#personalizationModal .pers-unlock-hint {
	font-size: 11px;
	line-height: 1.25;
	color: rgba(236, 218, 255, 0.9);
	text-align: right;
	min-height: 14px;
}

#personalizationModal .pers-unlock-hint.is-error {
	color: #ffb8c6;
}

#personalizationModal .pers-unlock-hint.is-success {
	color: #9effcb;
}

#personalizationModal .pers-tabs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin: 10px 0 6px;
}

#personalizationModal .pers-tab-btn {
	min-height: 38px;
	padding: 8px 10px;
	border-radius: 11px;
	border: 1px solid rgba(180, 122, 243, 0.38);
	background: linear-gradient(180deg, rgba(28, 12, 49, 0.9), rgba(12, 6, 24, 0.95));
	color: rgba(237, 217, 255, 0.92);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-family: "Bahnschrift SemiBold", "Trebuchet MS", sans-serif;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

#personalizationModal .pers-tab-btn:hover {
	transform: translateY(-1px);
	border-color: rgba(214, 171, 255, 0.64);
}

#personalizationModal .pers-tab-btn.active {
	border-color: rgba(238, 204, 255, 0.9);
	background: linear-gradient(180deg, rgba(205, 127, 255, 0.46), rgba(119, 58, 255, 0.38));
	color: #fff6ff;
	box-shadow: inset 0 1px 0 rgba(255, 236, 255, 0.36), 0 0 0 1px rgba(205, 127, 255, 0.3), 0 0 16px rgba(157, 81, 255, 0.34);
}

#personalizationModal .pers-tab-panel {
	margin-top: 10px;
}

#personalizationModal .pers-tab-panel.hidden {
	display: none;
}

#personalizationModal .pers-daily-panel {
	display: grid;
	gap: 10px;
}

#personalizationModal .pers-daily-summary {
	padding: 10px 12px;
	border-radius: 11px;
	border: 1px solid rgba(188, 128, 248, 0.34);
	background: linear-gradient(180deg, rgba(28, 12, 49, 0.88), rgba(12, 6, 24, 0.95));
	color: rgba(246, 229, 255, 0.95);
	font-size: 12px;
	line-height: 1.3;
	text-align: center;
	font-weight: 700;
}

#personalizationModal .pers-daily-summary.completed {
	border-color: rgba(150, 255, 206, 0.56);
	box-shadow: inset 0 1px 0 rgba(216, 255, 234, 0.2), 0 0 0 1px rgba(150, 255, 206, 0.24), 0 0 14px rgba(110, 243, 177, 0.3);
	color: #b9ffd9;
}

#personalizationModal .pers-daily-list {
	display: grid;
	gap: 8px;
}

#personalizationModal .pers-daily-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 11px;
	border: 1px solid rgba(188, 128, 248, 0.34);
	background: linear-gradient(180deg, rgba(28, 12, 49, 0.88), rgba(12, 6, 24, 0.95));
}

#personalizationModal .pers-daily-item.is-complete {
	border-color: rgba(150, 255, 206, 0.56);
	box-shadow: inset 0 1px 0 rgba(216, 255, 234, 0.18), 0 0 0 1px rgba(150, 255, 206, 0.2);
}

#personalizationModal .pers-daily-item-copy {
	display: grid;
	gap: 3px;
	min-width: 0;
}

#personalizationModal .pers-daily-item-title {
	font-size: 12px;
	line-height: 1.25;
	font-weight: 700;
	color: rgba(246, 229, 255, 0.95);
}

#personalizationModal .pers-daily-item-progress {
	font-size: 11px;
	line-height: 1.2;
	color: rgba(233, 216, 255, 0.88);
	font-variant-numeric: tabular-nums;
}

#personalizationModal .pers-daily-item-check {
	font-size: 18px;
	line-height: 1;
	font-weight: 800;
	color: rgba(205, 169, 255, 0.86);
	flex: 0 0 auto;
}

#personalizationModal .pers-daily-item.is-complete .pers-daily-item-check {
	color: #99ffd0;
}

#personalizationModal .pers-daily-reset {
	font-size: 11px;
	line-height: 1.2;
	text-align: center;
	color: rgba(233, 216, 255, 0.72);
}

#personalizationModal .pers-preview-shell {
	display: grid;
	place-items: center;
	padding: 12px 0 8px;
}

#personalizationModal .pers-node-preview {
	--pers-color: #00D9FF;
	width: 116px;
	height: 116px;
	border-radius: 999px;
	position: relative;
	transform-origin: 50% 50%;
	background: radial-gradient(circle at 34% 30%, rgba(230, 248, 255, 0.92) 0%, var(--pers-color) 36%, rgba(3, 12, 28, 0.98) 84%);
	border: 1px solid rgba(242, 229, 255, 0.34);
	box-shadow: 0 0 0 1px rgba(226, 204, 255, 0.18), 0 0 28px rgba(134, 96, 255, 0.4), inset 0 1px 0 rgba(255, 248, 255, 0.42);
	overflow: hidden;
	isolation: isolate;
}

#personalizationModal .pers-skin-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

#personalizationModal .pers-tab-panel[data-pers-panel="skins"] .cfg-color-row {
	margin-top: 2px;
	margin-bottom: 10px;
}

#personalizationModal .pers-skin-card {
	padding: 10px 8px;
	border-radius: 12px;
	border: 1px solid rgba(188, 128, 248, 0.34);
	background: linear-gradient(180deg, rgba(28, 12, 49, 0.88), rgba(12, 6, 24, 0.95));
	position: relative;
	display: grid;
	gap: 7px;
	justify-items: center;
	color: #f8eeff;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

#personalizationModal .pers-skin-card:hover {
	transform: translateY(-1px);
	border-color: rgba(220, 178, 255, 0.6);
}

#personalizationModal .pers-skin-card.active {
	border-color: rgba(238, 204, 255, 0.9);
	box-shadow: inset 0 1px 0 rgba(255, 234, 255, 0.26), 0 0 0 1px rgba(196, 120, 255, 0.3), 0 0 16px rgba(157, 81, 255, 0.32);
}

#personalizationModal .pers-skin-card-node {
	width: 74px;
	height: 74px;
}

#personalizationModal .pers-skin-card-label {
	font-size: 11px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-align: center;
	color: rgba(246, 229, 255, 0.95);
}

#personalizationModal .pers-preview-shell-effects {
	padding-top: 4px;
	padding-bottom: 10px;
}

#personalizationModal .pers-preview-shell-effects .pers-node-preview {
	width: 132px;
	height: 132px;
}

#personalizationModal .pers-effect-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

#personalizationModal .pers-trail-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

#personalizationModal .pers-effect-card {
	padding: 10px 8px;
	border-radius: 12px;
	border: 1px solid rgba(188, 128, 248, 0.34);
	background: linear-gradient(180deg, rgba(28, 12, 49, 0.88), rgba(12, 6, 24, 0.95));
	position: relative;
	display: grid;
	gap: 7px;
	justify-items: center;
	color: #f8eeff;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

#personalizationModal .pers-effect-card:hover {
	transform: translateY(-1px);
	border-color: rgba(220, 178, 255, 0.6);
}

#personalizationModal .pers-effect-card.active {
	border-color: rgba(238, 204, 255, 0.9);
	box-shadow: inset 0 1px 0 rgba(255, 234, 255, 0.26), 0 0 0 1px rgba(196, 120, 255, 0.3), 0 0 16px rgba(157, 81, 255, 0.32);
}

#personalizationModal .pers-effect-card-node {
	width: 82px;
	height: 82px;
}

#personalizationModal .pers-effect-card-label {
	font-size: 11px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-align: center;
	color: rgba(246, 229, 255, 0.95);
}

#personalizationModal .pers-skin-card.locked,
#personalizationModal .pers-effect-card.locked {
	border-color: rgba(206, 160, 255, 0.6);
	background: linear-gradient(180deg, rgba(30, 14, 48, 0.9), rgba(14, 7, 26, 0.96));
	box-shadow: inset 0 1px 0 rgba(244, 221, 255, 0.1), 0 0 0 1px rgba(179, 106, 255, 0.2), 0 0 12px rgba(126, 57, 212, 0.2);
}

#personalizationModal .pers-skin-card.locked .pers-node-preview,
#personalizationModal .pers-effect-card.locked .pers-node-preview {
	filter: saturate(0.5) brightness(0.82);
}

#personalizationModal .pers-skin-card.locked::after,
#personalizationModal .pers-effect-card.locked::after {
	content: attr(data-lock-label);
	position: static;
	display: block;
	justify-self: stretch;
	margin-top: 2px;
	padding: 4px 6px;
	border-radius: 8px;
	border: 1px solid rgba(236, 197, 255, 0.68);
	background: linear-gradient(180deg, rgba(117, 53, 173, 0.94), rgba(74, 24, 126, 0.94));
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: center;
	color: #fff3ff;
	pointer-events: none;
	box-shadow: 0 3px 10px rgba(50, 8, 92, 0.38);
}

#personalizationModal .pers-hidden-selects {
	display: none;
}

#personalizationModal .pers-node-preview .pers-node-preview-core {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 38px;
	height: 38px;
	transform: translate(-50%, -50%);
	border-radius: 999px;
	background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, 0.96) 0%, rgba(236, 248, 255, 0.88) 34%, rgba(6, 22, 42, 0.9) 100%);
	box-shadow: 0 0 16px rgba(255, 255, 255, 0.42);
	z-index: 2;
}

#personalizationModal .pers-node-preview::before,
#personalizationModal .pers-node-preview::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
}

#personalizationModal .pers-node-preview::before {
	background: repeating-radial-gradient(circle at center, rgba(255, 255, 255, 0.14) 0 4px, transparent 5px 10px);
	opacity: 0.66;
	z-index: 1;
}

#personalizationModal .pers-node-preview::after {
	inset: 6px;
	border: 1px solid rgba(255, 255, 255, 0.24);
	z-index: 3;
}

#personalizationModal .pers-node-preview.skin-prism {
	background: conic-gradient(from 35deg, #ff5ea1, #5bc0ff, #7bffa3, #f8ff75, #ff5ea1);
	box-shadow: 0 0 0 1px rgba(255, 194, 244, 0.24), 0 0 30px rgba(153, 189, 255, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

#personalizationModal .pers-node-preview.skin-igneo {
	background: radial-gradient(circle at 45% 35%, #ffe9b8 0%, #ff9f4f 34%, #70200a 70%, #160904 100%);
}

#personalizationModal .pers-node-preview.skin-fire_halo {
	background: radial-gradient(circle at 48% 34%, #fff1cf 0%, #ffb467 32%, #ff6d32 60%, #24080a 100%);
	box-shadow: 0 0 0 1px rgba(255, 189, 129, 0.26), 0 0 30px rgba(255, 134, 72, 0.4), inset 0 1px 0 rgba(255, 240, 210, 0.36);
}

#personalizationModal .pers-node-preview.skin-ice {
	background: radial-gradient(circle at 40% 30%, #f5fdff 0%, #9edfff 36%, #2d6ea3 68%, #0b1b33 100%);
}

#personalizationModal .pers-node-preview.skin-bio {
	background: radial-gradient(circle at 42% 32%, #d5ffda 0%, #64d773 34%, #4a2b8b 68%, #140a29 100%);
}

#personalizationModal .pers-node-preview.skin-arcane {
	background: radial-gradient(circle at 48% 34%, #f3d7ff 0%, #be77ff 32%, #5926a5 66%, #17072f 100%);
}

#personalizationModal .pers-node-preview.skin-hex {
	background:
		linear-gradient(30deg, rgba(119, 243, 255, 0.14) 10%, transparent 11%, transparent 89%, rgba(119, 243, 255, 0.14) 90%),
		radial-gradient(circle at 42% 32%, #dcf9ff 0%, #72d4ee 34%, #1d4a66 66%, #0c1624 100%);
	background-size: 14px 24px, cover;
}

#personalizationModal .pers-node-preview.skin-spark_grid {
	background:
		linear-gradient(36deg, rgba(173, 236, 255, 0.18) 10%, transparent 12%, transparent 88%, rgba(173, 236, 255, 0.18) 90%),
		linear-gradient(144deg, rgba(132, 214, 255, 0.16) 10%, transparent 12%, transparent 88%, rgba(132, 214, 255, 0.16) 90%),
		radial-gradient(circle at 48% 33%, #ebfbff 0%, #8ee1ff 32%, #2a61b0 64%, #0a102f 100%);
	background-size: 12px 20px, 12px 20px, cover;
	box-shadow: 0 0 0 1px rgba(169, 223, 255, 0.26), 0 0 30px rgba(106, 190, 255, 0.42), inset 0 1px 0 rgba(235, 248, 255, 0.34);
}

#personalizationModal .pers-node-preview.skin-radiation {
	background: radial-gradient(circle at 46% 34%, #f2ffd4 0%, #b2ff5d 30%, #3a8e1f 64%, #0f2508 100%);
}

#personalizationModal .pers-node-preview.skin-coral {
	background: radial-gradient(circle at 44% 33%, #fff0df 0%, #ffb07b 34%, #ff6a63 64%, #3a1023 100%);
}

#personalizationModal .pers-node-preview.skin-chrono {
	background: conic-gradient(from 0deg, #7ef4ff, #78a8ff, #8dffbe, #f1ff99, #7ef4ff);
	box-shadow: 0 0 0 1px rgba(188, 240, 255, 0.24), 0 0 30px rgba(112, 225, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

#personalizationModal .pers-node-preview.effect-none {
	animation: none;
}

#personalizationModal .pers-node-preview.effect-pulse {
	animation: persPulse 2s ease-in-out infinite;
}

#personalizationModal .pers-node-preview.effect-ring::after {
	border-style: dashed;
	animation: persSpin 4.6s linear infinite;
}

#personalizationModal .pers-node-preview.effect-spark::before {
	background:
		radial-gradient(circle at 22% 24%, rgba(255, 255, 255, 0.82) 0 2px, transparent 3px),
		radial-gradient(circle at 70% 34%, rgba(255, 255, 255, 0.72) 0 1.8px, transparent 2.6px),
		radial-gradient(circle at 56% 78%, rgba(255, 255, 255, 0.7) 0 1.6px, transparent 2.2px),
		repeating-radial-gradient(circle at center, rgba(255, 255, 255, 0.12) 0 4px, transparent 5px 10px);
	animation: persSpark 2.2s ease-in-out infinite;
}

#personalizationModal .pers-node-preview.effect-circular_sparks::before {
	background:
		radial-gradient(circle at 14% 50%, rgba(255, 255, 255, 0.9) 0 2.1px, transparent 3px),
		radial-gradient(circle at 30% 20%, rgba(235, 248, 255, 0.86) 0 1.9px, transparent 2.6px),
		radial-gradient(circle at 70% 16%, rgba(225, 244, 255, 0.86) 0 1.8px, transparent 2.4px),
		radial-gradient(circle at 86% 50%, rgba(255, 255, 255, 0.9) 0 2.1px, transparent 3px),
		radial-gradient(circle at 69% 84%, rgba(225, 244, 255, 0.86) 0 1.8px, transparent 2.4px),
		radial-gradient(circle at 30% 80%, rgba(235, 248, 255, 0.86) 0 1.9px, transparent 2.6px),
		repeating-radial-gradient(circle at center, rgba(255, 255, 255, 0.13) 0 4px, transparent 5px 10px);
	animation: persSpark 1.8s ease-in-out infinite;
}

#personalizationModal .pers-node-preview.pers-node-preview-canvas-host {
	background: transparent;
	box-shadow: none;
}

#personalizationModal .pers-node-preview.pers-node-preview-canvas-host::before,
#personalizationModal .pers-node-preview.pers-node-preview-canvas-host::after,
#personalizationModal .pers-node-preview.pers-node-preview-canvas-host .pers-node-preview-core {
	display: none;
}

#personalizationModal .pers-node-preview .pers-node-preview-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 4;
}

#personalizationModal .pers-node-preview.pers-node-preview-canvas-host.effect-pulse {
	animation: none;
}

#personalizationModal .cfg-label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: rgba(230, 208, 255, 0.95);
}

#personalizationModal .cfg-row {
	margin-top: 12px;
}

#personalizationModal .cfg-inline-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

#personalizationModal .cfg-text-input,
#personalizationModal .cfg-select {
	width: 100%;
	box-sizing: border-box;
	margin-top: 6px;
	height: 42px;
	padding: 8px 11px;
	border-radius: 11px;
	border: 1px solid rgba(203, 146, 255, 0.36);
	background: linear-gradient(180deg, rgba(30, 14, 52, 0.92), rgba(14, 8, 26, 0.96));
	color: #f8f1ff;
	font-size: 14px;
	outline: none;
	box-shadow: inset 0 1px 0 rgba(255, 237, 255, 0.08), 0 0 0 1px rgba(177, 98, 255, 0.14);
}

#personalizationModal .cfg-text-input:focus,
#personalizationModal .cfg-select:focus {
	border-color: rgba(239, 212, 255, 0.86);
	box-shadow: 0 0 0 2px rgba(185, 112, 255, 0.24), 0 0 16px rgba(164, 84, 255, 0.32);
}

#personalizationModal .cfg-color-row #persPlayerColor {
	width: 54px;
	height: 34px;
	padding: 2px;
	border-radius: 10px;
	border: 1px solid rgba(203, 146, 255, 0.52);
	background: rgba(30, 14, 52, 0.92);
	cursor: pointer;
	margin-top: 0;
}

#personalizationModal .cfg-actions {
	margin-top: 14px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

#personalizationModal .cfg-actions button {
	width: 100%;
	min-height: 52px;
	border-radius: 14px;
	font-size: 18px;
	font-weight: 700;
	font-family: "Bahnschrift SemiBold", "Trebuchet MS", sans-serif;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

#personalizationModal #persSave {
	border: 1px solid rgba(244, 220, 255, 0.9);
	background: linear-gradient(180deg, #ca7dff 0%, #9d45ff 58%, #6420d7 100%);
	color: #fcf6ff;
	box-shadow: inset 0 1px 0 rgba(253, 237, 255, 0.38), 0 0 0 1px rgba(209, 130, 255, 0.42), 0 0 28px rgba(151, 61, 255, 0.52);
}

#personalizationModal #persCancel {
	border: 1px solid rgba(203, 146, 255, 0.5);
	background: linear-gradient(180deg, rgba(42, 19, 73, 0.9), rgba(15, 8, 31, 0.96));
	color: #f5ebff;
	box-shadow: inset 0 1px 0 rgba(255, 239, 255, 0.14), 0 0 0 1px rgba(177, 98, 255, 0.2), 0 0 16px rgba(154, 80, 255, 0.24);
}

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

@keyframes persSpin {
	to { transform: rotate(360deg); }
}

@keyframes persSpark {
	0%, 100% { opacity: 0.66; }
	50% { opacity: 1; }
}

#usernameClaimModal.overlay {
	align-items: center;
	justify-content: center;
	padding: 12px;
	background: radial-gradient(125% 110% at 50% 0%, rgba(58, 23, 8, 0.62), rgba(9, 3, 1, 0.92));
	z-index: 2600;
}

#usernameClaimModal .username-claim-panel {
	width: min(96vw, 520px);
	max-width: 520px;
	max-height: 94dvh;
	overflow: auto;
	padding: 18px 18px 16px;
	border-radius: 20px;
	border: 1px solid rgba(255, 176, 112, 0.44);
	background:
		radial-gradient(120% 90% at 0% 20%, rgba(255, 165, 88, 0.24), transparent 58%),
		radial-gradient(110% 85% at 100% 24%, rgba(255, 238, 162, 0.16), transparent 56%),
		radial-gradient(130% 120% at 50% 95%, rgba(34, 14, 5, 0.94), rgba(16, 7, 2, 0.98) 68%);
	box-shadow: 0 0 0 1px rgba(255, 190, 130, 0.2), 0 0 28px rgba(255, 137, 51, 0.26), 0 18px 42px rgba(0, 0, 0, 0.6);
	text-align: left;
	display: grid;
	gap: 10px;
}

#usernameClaimModal .username-claim-panel h2 {
	margin: 0;
	font-size: clamp(22px, 3.4vw, 30px);
	font-family: "Bahnschrift SemiBold", "Trebuchet MS", sans-serif;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #fff2e2;
	text-shadow: 0 0 14px rgba(255, 174, 94, 0.38);
	text-align: center;
}

#usernameClaimModal .username-claim-subtitle {
	margin: 0;
	font-size: 13px;
	line-height: 1.35;
	color: rgba(255, 229, 203, 0.92);
	text-align: center;
}

#usernameClaimModal .username-claim-error {
	padding: 9px 10px;
	border-radius: 10px;
	font-size: 12px;
	line-height: 1.3;
	border: 1px solid rgba(255, 136, 116, 0.5);
	background: linear-gradient(180deg, rgba(74, 17, 17, 0.88), rgba(49, 10, 10, 0.9));
	color: #ffd6d1;
}

#usernameClaimModal .username-claim-error.hidden {
	display: none;
}

#usernameClaimModal .username-claim-submit {
	width: 100%;
	min-height: 50px;
	margin-top: 4px;
	border-radius: 14px;
	font-size: 17px;
	font-weight: 700;
	font-family: "Bahnschrift SemiBold", "Trebuchet MS", sans-serif;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border: 1px solid rgba(255, 230, 194, 0.9);
	background: linear-gradient(180deg, #ffb55f 0%, #ff7d3b 58%, #d9501f 100%);
	color: #fff8f0;
	box-shadow: inset 0 1px 0 rgba(255, 248, 236, 0.46), 0 0 0 1px rgba(255, 190, 130, 0.34), 0 0 22px rgba(255, 136, 64, 0.4);
}

#usernameClaimModal .username-claim-submit:disabled {
	opacity: 0.7;
	cursor: wait;
}

@media (max-width: 760px) {
	#configModal .config-panel {
		width: min(96vw, 430px);
		padding: 14px 12px 14px;
	}

	#configModal .config-panel h2 {
		font-size: 22px;
	}

	#configModal .cfg-actions {
		grid-template-columns: 1fr;
	}

	#configModal .cfg-actions button {
		min-height: 46px;
		font-size: 15px;
	}

	#personalizationModal .personalization-panel {
		width: min(96vw, 430px);
		padding: 14px 12px 14px;
	}

	#personalizationModal .personalization-panel h2 {
		font-size: 22px;
	}

	#personalizationModal .pers-tabs {
		grid-template-columns: 1fr;
	}

	#personalizationModal .pers-tab-btn {
		min-height: 34px;
		font-size: 11px;
	}

	#personalizationModal .pers-skin-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	#personalizationModal .pers-trail-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	#personalizationModal .cfg-actions {
		grid-template-columns: 1fr;
	}

	#personalizationModal .cfg-actions button {
		min-height: 46px;
		font-size: 15px;
	}

	#usernameClaimModal .username-claim-panel {
		width: min(96vw, 420px);
		padding: 14px 12px 14px;
	}

	#usernameClaimModal .username-claim-panel h2 {
		font-size: 22px;
	}

	#usernameClaimModal .username-claim-submit {
		min-height: 46px;
		font-size: 15px;
	}
}

#singlePlayerPanel.main-menu {
	align-items: center;
	justify-content: center;
	overflow: hidden;
	overscroll-behavior: none;
	padding: 10px;
	background: radial-gradient(circle at center, rgba(4, 18, 16, 0.48), rgba(0, 5, 8, 0.88));
}

#singlePlayerPanel .game-menu.menu-visual-v2 {
	width: min(96vw, 640px);
	max-width: 640px;
	max-height: 95dvh;
	overflow: hidden;
	position: relative;
	padding: 18px 18px 16px;
	border-radius: 22px;
	border: 1px solid rgba(143, 255, 198, 0.34);
	background:
		radial-gradient(120% 90% at 0% 20%, rgba(72, 255, 180, 0.2), transparent 58%),
		radial-gradient(110% 85% at 100% 24%, rgba(103, 255, 217, 0.16), transparent 56%),
		radial-gradient(130% 120% at 50% 95%, rgba(6, 22, 24, 0.92), rgba(1, 10, 13, 0.98) 68%);
	box-shadow: 0 0 0 1px rgba(138, 255, 210, 0.2), 0 0 34px rgba(61, 255, 185, 0.22), 0 18px 42px rgba(0, 0, 0, 0.56);
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: center;
}

#singlePlayerPanel .game-menu.menu-visual-v2::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		radial-gradient(circle, rgba(255, 255, 255, 0.6) 0 1px, transparent 1.7px),
		radial-gradient(circle, rgba(186, 255, 232, 0.48) 0 0.9px, transparent 1.5px);
	background-size: 170px 170px, 130px 130px;
	background-position: 10px 12px, 72px 38px;
	opacity: 0.24;
	z-index: 0;
}

#singlePlayerPanel .game-menu.menu-visual-v2::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(70% 42% at 22% 34%, rgba(75, 255, 189, 0.18), transparent 72%),
		radial-gradient(66% 40% at 78% 28%, rgba(117, 255, 225, 0.14), transparent 72%);
	mix-blend-mode: screen;
	opacity: 0.62;
	z-index: 1;
}

#singlePlayerPanel .game-menu.menu-visual-v2 > * {
	position: relative;
	z-index: 2;
}

#singlePlayerPanel .single-menu-title {
	margin: 0;
	font-size: clamp(34px, 4.8vw, 48px);
	letter-spacing: 0.05em;
	font-family: "Bahnschrift SemiBold", "Trebuchet MS", sans-serif;
	text-transform: uppercase;
	color: #edfff9;
	text-shadow: 0 0 18px rgba(118, 255, 206, 0.34), 0 6px 20px rgba(0, 0, 0, 0.45);
}

#singlePlayerPanel .single-menu-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
}

#singlePlayerPanel .single-menu-btn {
	min-height: 68px;
	border-radius: 16px;
	border: 1px solid rgba(122, 255, 195, 0.52);
	background: linear-gradient(180deg, rgba(7, 35, 36, 0.9), rgba(3, 19, 24, 0.96));
	color: #ecfff7;
	font-size: 24px;
	font-weight: 800;
	font-family: "Bahnschrift SemiBold", "Trebuchet MS", sans-serif;
	letter-spacing: 0.03em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1.15;
	padding: 12px 12px;
	text-shadow: 0 0 10px rgba(133, 255, 208, 0.3);
	box-shadow: inset 0 1px 0 rgba(230, 255, 243, 0.12), 0 0 0 1px rgba(66, 218, 170, 0.24), 0 0 18px rgba(57, 227, 175, 0.24), 0 14px 28px rgba(0, 0, 0, 0.3);
	transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

#singlePlayerPanel .single-menu-btn:hover {
	transform: translateY(-2px);
	box-shadow: inset 0 1px 0 rgba(234, 255, 246, 0.16), 0 0 0 1px rgba(112, 255, 207, 0.35), 0 0 24px rgba(74, 250, 195, 0.34), 0 18px 34px rgba(0, 0, 0, 0.34);
	border-color: rgba(170, 255, 226, 0.74);
}

#singlePlayerPanel .single-menu-btn:active {
	transform: translateY(0);
}

#singlePlayerPanel .single-menu-btn.active {
	background: linear-gradient(180deg, #56ffb3 0%, #26d57e 58%, #139f58 100%);
	color: #f5fffa;
	border-color: rgba(205, 255, 232, 0.92);
	box-shadow: inset 0 1px 0 rgba(239, 255, 248, 0.4), 0 0 0 1px rgba(125, 255, 206, 0.42), 0 0 26px rgba(94, 253, 194, 0.48), 0 16px 34px rgba(13, 136, 73, 0.4);
}

#singlePlayerPanel #singleModeWaves {
	font-size: 16px;
	letter-spacing: 0.01em;
	line-height: 1.08;
}

#singlePlayerPanel #singleNodesControl,
#singlePlayerPanel #singlePlayersControl {
	grid-column: 1 / -1;
}

#singlePlayerPanel .single-counter-control {
	min-height: 62px;
	border-radius: 16px;
	border: 1px solid rgba(122, 255, 195, 0.52);
	background: linear-gradient(180deg, rgba(7, 35, 36, 0.9), rgba(3, 19, 24, 0.96));
	box-shadow: inset 0 1px 0 rgba(230, 255, 243, 0.12), 0 0 0 1px rgba(66, 218, 170, 0.2), 0 0 18px rgba(57, 227, 175, 0.2), 0 14px 28px rgba(0, 0, 0, 0.3);
	overflow: hidden;
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr) 62px;
	align-items: stretch;
}

#singlePlayerPanel .single-counter-step {
	border: 0;
	margin: 0;
	padding: 0;
	background: rgba(9, 46, 42, 0.84);
	color: #ebfff7;
	font-size: 32px;
	font-weight: 800;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	text-shadow: 0 0 10px rgba(126, 255, 208, 0.36);
	transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

#singlePlayerPanel .single-counter-step:hover {
	background: rgba(17, 72, 64, 0.9);
	box-shadow: inset 0 0 0 1px rgba(118, 255, 201, 0.34);
}

#singlePlayerPanel .single-counter-step:active {
	background: rgba(14, 59, 53, 0.94);
}

#singlePlayerPanel .single-counter-step:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	background: rgba(10, 31, 28, 0.72);
}

#singlePlayerPanel .single-counter-value {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	border-left: 1px solid rgba(129, 255, 206, 0.26);
	border-right: 1px solid rgba(129, 255, 206, 0.26);
	font-size: 20px;
	font-weight: 700;
	color: #ebfff7;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#singlePlayerPanel .single-counter-control.is-disabled .single-counter-value {
	opacity: 0.56;
}

#singlePlayerPanel .single-menu-play {
	grid-column: 1 / -1;
	min-height: 74px;
	border-radius: 20px;
	background: linear-gradient(180deg, #67ffc0 0%, #28d37d 58%, #149a54 100%);
	color: #f4fff9;
	border: 1px solid rgba(208, 255, 233, 0.9);
	box-shadow: 0 0 0 1px rgba(131, 255, 211, 0.44), 0 0 30px rgba(83, 255, 194, 0.5), 0 20px 40px rgba(15, 133, 73, 0.48), inset 0 2px 0 rgba(228, 255, 243, 0.4);
	font-family: "Bahnschrift", "Arial Black", sans-serif;
	font-size: clamp(36px, 5.2vw, 48px);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-shadow: 0 0 16px rgba(176, 255, 223, 0.46), 0 2px 10px rgba(16, 82, 45, 0.48);
	transition: transform 140ms ease, box-shadow 140ms ease;
}

#singlePlayerPanel .single-menu-play:hover {
	transform: translateY(-2px);
	box-shadow: 0 0 0 1px rgba(171, 255, 224, 0.56), 0 0 36px rgba(103, 255, 207, 0.62), 0 24px 44px rgba(16, 137, 77, 0.56), inset 0 2px 0 rgba(237, 255, 247, 0.46);
}

#singlePlayerPanel .single-menu-play:active {
	transform: translateY(0);
}

#singlePlayerPanel .single-menu-back {
	grid-column: 1 / -1;
	min-height: 58px;
	font-size: 22px;
	border-radius: 16px;
	background: linear-gradient(180deg, rgba(7, 35, 36, 0.92), rgba(3, 19, 24, 0.98));
	border: 1px solid rgba(122, 255, 195, 0.52);
	color: #e9fff6;
	box-shadow: inset 0 1px 0 rgba(230, 255, 243, 0.12), 0 0 0 1px rgba(66, 218, 170, 0.24), 0 0 16px rgba(57, 227, 175, 0.2), 0 12px 24px rgba(0, 0, 0, 0.28);
}

#singlePlayerPanel .single-menu-back:hover {
	box-shadow: inset 0 1px 0 rgba(234, 255, 246, 0.16), 0 0 0 1px rgba(112, 255, 207, 0.35), 0 0 22px rgba(74, 250, 195, 0.32), 0 16px 30px rgba(0, 0, 0, 0.32);
	border-color: rgba(170, 255, 226, 0.74);
}

@media (max-width: 760px) {
	#singlePlayerPanel .game-menu.menu-visual-v2 {
		width: min(96vw, 460px);
		padding: 14px 12px 14px;
		gap: 11px;
	}

	#singlePlayerPanel .single-menu-grid {
		gap: 9px;
	}

	#singlePlayerPanel .single-menu-btn {
		min-height: 56px;
		font-size: 18px;
		border-radius: 13px;
		padding: 10px 10px;
	}

	#singlePlayerPanel #singleModeWaves {
		font-size: 14px;
	}

	#singlePlayerPanel .single-counter-control {
		min-height: 54px;
		border-radius: 13px;
		grid-template-columns: 52px minmax(0, 1fr) 52px;
	}

	#singlePlayerPanel .single-counter-step {
		font-size: 28px;
	}

	#singlePlayerPanel .single-counter-value {
		font-size: 17px;
	}

	#singlePlayerPanel .single-menu-play {
		min-height: 62px;
		font-size: clamp(30px, 8.5vw, 38px);
		border-radius: 16px;
	}

	#singlePlayerPanel .single-menu-back {
		min-height: 50px;
		font-size: 16px;
	}
}

body.mobile-ui #singlePlayerPanel.main-menu {
	align-items: center;
	justify-content: center;
	padding: calc(var(--mobile-safe-top) + 8px) 10px calc(var(--mobile-safe-bottom) + 10px);
	overflow: hidden;
	overscroll-behavior: none;
}

body.mobile-ui #singlePlayerPanel .game-menu.menu-visual-v2 {
	width: min(100%, 430px);
	max-height: calc(100dvh - var(--mobile-safe-top) - var(--mobile-safe-bottom) - 18px);
	overflow-y: hidden;
	padding: 13px 11px 13px;
	gap: 10px;
	border-radius: 22px;
}

body.mobile-ui #singlePlayerPanel .single-menu-title {
	font-size: 34px;
	}

body.mobile-ui #singlePlayerPanel .single-menu-grid {
	gap: 8px;
	}

body.mobile-ui #singlePlayerPanel .single-menu-btn {
	min-height: 52px;
	font-size: 17px;
	padding: 8px 8px;
	border-radius: 12px;
	}

body.mobile-ui #singlePlayerPanel #singleModeWaves {
	font-size: 13px;
	}

body.mobile-ui #singlePlayerPanel .single-counter-control {
	min-height: 52px;
	border-radius: 12px;
	grid-template-columns: 46px minmax(0, 1fr) 46px;
	}

body.mobile-ui #singlePlayerPanel .single-counter-step {
	font-size: 26px;
	}

body.mobile-ui #singlePlayerPanel .single-counter-value {
	font-size: 16px;
	padding: 0 6px;
	}

body.mobile-ui #singlePlayerPanel .single-menu-play {
	min-height: 62px;
	font-size: 34px;
	border-radius: 16px;
	}

body.mobile-ui #singlePlayerPanel .single-menu-back {
	min-height: 46px;
	font-size: 15px;
	border-radius: 12px;
	}

body.mobile-ui #multiplayerPanel .mp-private-join-row {
	flex-direction: column;
	align-items: stretch;
}

body.mobile-ui #multiplayerPanel #mpJoinPrivateLobby,
body.mobile-ui #multiplayerPanel .mp-invite-input {
	width: 100%;
	min-width: 0;
}