/* arabic */
@font-face {
	font-family: "Changa";
	font-style: normal;
	font-weight: 600;
	src: local("Changa SemiBold"), local("Changa-SemiBold"), url(8-mw6umTgtMSI5PXqVIDMRJtnKITppOI_IvcXXDNrsc.woff2) format("woff2");
	unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE80-FEFC;
}
/* latin-ext */
@font-face {
	font-family: "Changa";
	font-style: normal;
	font-weight: 600;
	src: local("Changa SemiBold"), local("Changa-SemiBold"), url(l9R1mHXzJ6oxjfw8BkQIThJtnKITppOI_IvcXXDNrsc.woff2) format("woff2");
	unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: "Changa";
	font-style: normal;
	font-weight: 600;
	src: local("Changa SemiBold"), local("Changa-SemiBold"), url(aXdbZDB08TCIBRKa7Qgu_FtXRa8TVwTICgirnJhmVJw.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
body, html {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	color: white;
	font-family: "Changa", "Sans Serif";
	user-select: none;
}
canvas {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
#begin, #wasted {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: linear-gradient(135deg, #0d1117 0%, #161b22 50%, #0d1117 100%);
	overflow: hidden;
}

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

/* Floating Territories */
.float-territory {
	position: absolute;
	border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
	opacity: 0.5;
	filter: blur(2px);
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
}

.float-territory.t1 {
	width: 320px;
	height: 280px;
	background: linear-gradient(135deg, #4CAF50 0%, #2d7d32 100%);
	top: -5%;
	left: 5%;
	animation: floatSpin1 20s ease-in-out infinite;
	border: 3px solid rgba(76, 175, 80, 0.6);
}

.float-territory.t2 {
	width: 260px;
	height: 240px;
	background: linear-gradient(135deg, #4CAF50 0%, #388e3c 100%);
	top: 55%;
	right: 3%;
	animation: floatSpin2 25s ease-in-out infinite reverse;
	border: 3px solid rgba(76, 175, 80, 0.6);
}

.float-territory.t3 {
	width: 200px;
	height: 180px;
	background: linear-gradient(135deg, #66bb6a 0%, #4CAF50 100%);
	bottom: 10%;
	left: 10%;
	animation: floatSpin3 18s ease-in-out infinite;
	border: 3px solid rgba(102, 187, 106, 0.6);
}

.float-territory.t4 {
	width: 180px;
	height: 160px;
	background: linear-gradient(135deg, #81c784 0%, #4CAF50 100%);
	top: 15%;
	right: 15%;
	animation: floatSpin1 30s ease-in-out infinite reverse;
	border: 3px solid rgba(129, 199, 132, 0.5);
}

.float-territory.t5 {
	width: 140px;
	height: 130px;
	background: linear-gradient(135deg, #a5d6a7 0%, #66bb6a 100%);
	top: 40%;
	left: 3%;
	animation: floatSpin2 22s ease-in-out infinite;
	border: 3px solid rgba(165, 214, 167, 0.5);
	opacity: 0.4;
}

.float-territory.t6 {
	width: 100px;
	height: 90px;
	background: linear-gradient(135deg, #c8e6c9 0%, #81c784 100%);
	top: 70%;
	left: 40%;
	animation: floatSpin3 15s ease-in-out infinite reverse;
	border: 2px solid rgba(200, 230, 201, 0.4);
	opacity: 0.35;
}

.float-territory.t7 {
	width: 120px;
	height: 100px;
	background: linear-gradient(135deg, #388e3c 0%, #1b5e20 100%);
	top: 25%;
	left: 55%;
	animation: floatSpin1 28s ease-in-out infinite;
	border: 2px solid rgba(56, 142, 60, 0.5);
	opacity: 0.35;
}

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

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

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

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

.float-player.p1 {
	background: radial-gradient(circle at 30% 30%, #ff9800, #e65100);
	top: 28%;
	left: 20%;
	animation: playerFloat1 16s ease-in-out infinite;
	box-shadow: 
		0 0 30px rgba(255, 152, 0, 0.6),
		inset 0 -5px 15px rgba(0,0,0,0.3);
	border: 2px solid rgba(255, 152, 0, 0.8);
}

.float-player.p2 {
	background: radial-gradient(circle at 30% 30%, #e91e63, #880e4f);
	top: 50%;
	right: 22%;
	animation: playerFloat2 20s ease-in-out infinite;
	box-shadow: 
		0 0 30px rgba(233, 30, 99, 0.6),
		inset 0 -5px 15px rgba(0,0,0,0.3);
	border: 2px solid rgba(233, 30, 99, 0.8);
}

.float-player.p3 {
	background: radial-gradient(circle at 30% 30%, #2196f3, #0d47a1);
	bottom: 20%;
	left: 55%;
	animation: playerFloat3 14s ease-in-out infinite;
	box-shadow: 
		0 0 30px rgba(33, 150, 243, 0.6),
		inset 0 -5px 15px rgba(0,0,0,0.3);
	border: 2px solid rgba(33, 150, 243, 0.8);
}

.float-player.p4 {
	background: radial-gradient(circle at 30% 30%, #9c27b0, #4a148c);
	top: 65%;
	left: 12%;
	width: 45px;
	height: 45px;
	animation: playerFloat4 18s ease-in-out infinite;
	box-shadow: 
		0 0 25px rgba(156, 39, 176, 0.6),
		inset 0 -5px 15px rgba(0,0,0,0.3);
	border: 2px solid rgba(156, 39, 176, 0.8);
}

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

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

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

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

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

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

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

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

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

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

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

/* Particles (XP orbs) */
.bg-particles {
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: 
		radial-gradient(4px 4px at 8% 15%, rgba(255, 215, 0, 0.9) 50%, transparent 50%),
		radial-gradient(3px 3px at 25% 65%, rgba(255, 215, 0, 0.8) 50%, transparent 50%),
		radial-gradient(4px 4px at 45% 25%, rgba(255, 215, 0, 0.9) 50%, transparent 50%),
		radial-gradient(3px 3px at 65% 75%, rgba(255, 215, 0, 0.7) 50%, transparent 50%),
		radial-gradient(4px 4px at 80% 35%, rgba(255, 215, 0, 0.85) 50%, transparent 50%),
		radial-gradient(3px 3px at 15% 85%, rgba(255, 215, 0, 0.75) 50%, transparent 50%),
		radial-gradient(4px 4px at 55% 10%, rgba(255, 215, 0, 0.9) 50%, transparent 50%),
		radial-gradient(3px 3px at 88% 55%, rgba(255, 215, 0, 0.8) 50%, transparent 50%),
		radial-gradient(4px 4px at 35% 45%, rgba(255, 215, 0, 0.85) 50%, transparent 50%),
		radial-gradient(3px 3px at 72% 20%, rgba(255, 215, 0, 0.7) 50%, transparent 50%),
		radial-gradient(4px 4px at 92% 80%, rgba(255, 215, 0, 0.8) 50%, transparent 50%),
		radial-gradient(3px 3px at 5% 50%, rgba(255, 215, 0, 0.75) 50%, transparent 50%),
		/* Green accents */
		radial-gradient(3px 3px at 18% 35%, rgba(76, 175, 80, 0.5) 50%, transparent 50%),
		radial-gradient(3px 3px at 78% 60%, rgba(76, 175, 80, 0.4) 50%, transparent 50%),
		/* Pink/red accents */
		radial-gradient(3px 3px at 42% 72%, rgba(233, 30, 99, 0.4) 50%, transparent 50%),
		radial-gradient(3px 3px at 62% 42%, rgba(255, 107, 107, 0.35) 50%, transparent 50%);
	animation: particleDrift 60s linear infinite;
}

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

/* Title */
.start-title {
	position: absolute;
	top: 12%;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	z-index: 10;
	width: 90%;
	max-width: 600px;
	padding: 0 10px;
	box-sizing: border-box;
}

.start-title h1 {
	font-family: "Changa", sans-serif;
	font-size: clamp(2rem, 8vw, 4rem);
	font-weight: 700;
	margin: 0;
	color: #4CAF50;
	text-shadow: 
		0 0 40px rgba(76, 175, 80, 0.6),
		0 4px 0 #2d7d32;
	letter-spacing: clamp(1px, 0.3vw, 2px);
	white-space: nowrap;
}

.start-title h1 span {
	color: #4CAF50;
}

.start-title h1 em {
	font-style: normal;
	color: #FFD700;
	text-shadow: 
		0 0 30px rgba(255, 215, 0, 0.6),
		0 4px 0 #b8860b;
}

.start-title p {
	font-family: "Changa", sans-serif;
	font-size: clamp(0.65rem, 2.5vw, 1.1rem);
	color: #7a8a7a;
	margin: clamp(8px, 2vw, 15px) 0 0;
	letter-spacing: clamp(3px, 1.5vw, 10px);
	text-transform: uppercase;
	text-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
	white-space: nowrap;
}

/* Start Panel */
.start-panel {
	position: absolute;
	top: 55%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(380px, 90vw);
	background: rgba(20, 24, 30, 0.9);
	border: 2px solid rgba(76, 175, 80, 0.4);
	padding: clamp(15px, 4vw, 30px);
	box-sizing: border-box;
	backdrop-filter: blur(10px);
	z-index: 10;
}

/* Responsive adjustments for small screens */
@media (max-width: 480px) {
	.start-title {
		top: 8%;
	}
	
	.start-title h1 {
		white-space: normal;
		line-height: 1.1;
	}
	
	.start-title p {
		white-space: normal;
	}
	
	.start-panel {
		top: 58%;
	}
	
	.start-btn {
		padding: 12px 16px;
		font-size: 1rem;
	}
	
	.input-group input {
		padding: 12px 14px;
		font-size: 0.9rem;
	}
}

@media (max-height: 500px) {
	.start-title {
		top: 2%;
	}
	
	.start-title h1 {
		font-size: clamp(1.5rem, 6vw, 2.5rem);
	}
	
	.start-title p {
		font-size: clamp(0.5rem, 2vw, 0.8rem);
		margin-top: 5px;
	}
	
	.start-panel {
		top: 55%;
		padding: 12px;
	}
	
	.input-group {
		margin-bottom: 10px;
	}
	
	.start-btn {
		padding: 10px 16px;
		font-size: 0.9rem;
	}
	
	.start-btn.primary {
		margin-bottom: 8px;
	}
}

@media (max-height: 450px) {
	.start-title {
		position: static;
		transform: none;
		padding: 8px 10px;
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
	}
	
	.start-title h1 {
		font-size: clamp(1.2rem, 5vw, 1.8rem);
	}
	
	.start-title p {
		font-size: clamp(0.45rem, 1.5vw, 0.65rem);
		letter-spacing: clamp(2px, 1vw, 5px);
		margin-top: 3px;
	}
	
	#begin {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}
	
	.start-panel {
		position: static;
		transform: none;
		margin-top: 5px;
		padding: 10px;
	}
	
	.input-group {
		margin-bottom: 8px;
	}
	
	.input-group input {
		padding: 8px 10px;
		font-size: 0.85rem;
	}
	
	.start-btn {
		padding: 8px 14px;
		font-size: 0.85rem;
	}
	
	.start-btn.primary {
		margin-bottom: 6px;
	}
	
	.start-footer {
		margin-top: 10px;
		padding-top: 8px;
	}
}

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

.input-group label {
	display: block;
	font-family: "Changa", sans-serif;
	font-size: 0.75rem;
	color: #4CAF50;
	letter-spacing: 3px;
	margin-bottom: 10px;
}

.input-group input {
	width: 100%;
	padding: 15px 18px;
	font-family: "Changa", sans-serif;
	font-size: 1rem;
	background: rgba(240, 240, 220, 0.95);
	border: none;
	border-left: 4px solid #4CAF50;
	color: #333;
	outline: none;
	transition: all 0.2s;
	box-sizing: border-box;
}

.input-group input:focus {
	background: #fff;
	border-left-color: #FFD700;
}

.input-group input::placeholder {
	color: #888;
}

.start-btn {
	width: 100%;
	padding: 16px 20px;
	font-family: "Changa", sans-serif;
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 3px;
	border: none;
	cursor: pointer;
	transition: all 0.15s;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.start-btn.primary {
	background: linear-gradient(180deg, #7bed4c 0%, #4CAF50 100%);
	border-bottom: 5px solid #2d7d32;
	color: #1a1a1a;
	margin-bottom: 12px;
	text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}

.start-btn.primary:hover:not(:disabled) {
	background: linear-gradient(180deg, #8efc5b 0%, #5bc960 100%);
	transform: translateY(-2px);
}

.start-btn.primary:active:not(:disabled) {
	transform: translateY(3px);
	border-bottom-width: 2px;
}

.start-btn.secondary {
	background: linear-gradient(180deg, #4a4a4a 0%, #3a3a3a 100%);
	border-bottom: 5px solid #252525;
	color: #4CAF50;
}

.start-btn.secondary:hover:not(:disabled) {
	background: linear-gradient(180deg, #5a5a5a 0%, #4a4a4a 100%);
	color: #7bed4c;
}

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

.start-footer {
	margin-top: 20px;
	padding-top: 15px;
	text-align: center;
	border-top: 1px solid rgba(76, 175, 80, 0.2);
}

.start-footer span {
	font-family: "Changa", sans-serif;
	font-size: 0.85rem;
}

#error {
	color: #4CAF50 !important;
}
#github svg {
	transition: all 1s;
	fill: #222;
	color: #fff;
	position: absolute;
	top: 0;
	left: 0;
	border: 0;
	width: 80px;
	height: 80px;
	transform: rotate(-90deg);
}
#github:hover svg {
	width: 160px;
	height: 160px;
}
.center {
	text-align: center;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.center img {
	display: block;
}
.scale {
	animation: scale 5s infinite ease-in-out;
}
@keyframes scale {
	0% {
		transform: scale(0.8);
	}
	50% {
		transform: scale(1);
	}
	100% {
		transform: scale(0.8);
	}
}
input, button {
	font-family: "Changa", "Sans Serif";
	font-size: 1.5rem;
	outline: none;
	border: 0;
	padding: .5rem 1rem;
	line-height: 2.5rem;
}
button {
	text-align: center;
	cursor: pointer;
}
button:active {
	transform: translateY(4px);
}
button:disabled {
	cursor: not-allowed;
}
#settings {
	background: #ededd1;
	border-bottom: 6px solid #a1a18d;
	color: #333;
}
#name::placeholder {
	color: #888;
	opacity: 1;
}
.yellow {
	background: #eaec4b;
	border-bottom: 6px solid #a1a130;
	color: #888a34;
}
.yellow:hover {
	background: #fafc5b;
}
.yellow:active {
	border-bottom: 2px solid #a1a130;
}
.orange {
	background: #FF972F;
	border-bottom: 6px solid #AE4E0D;
	color: #422100;
}
.orange:hover {
	background: #FFB76F;
}
.orange:active {
	border-bottom: 2px solid #AE4E0D;
}
.green {
	background: #7fed4c;
	border-bottom: 6px solid #56a130;
	color: #4f8a34;
}
.green:hover {
	background: #8efc5b;
}
.green:active {
	border-bottom: 2px solid #56a130;
}
span {
	color: red;
}
#wasted {
	display: none;
	justify-content: center;
	align-items: center;
}

/* Death Panel - Flat game style */
.death-panel {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #3a3a3a;
	border-bottom: 6px solid #252525;
	width: 320px;
	text-align: center;
}

.death-header {
	background: #c0392b;
	border-bottom: 4px solid #922b21;
	padding: 15px 20px;
}

.death-header h1 {
	margin: 0;
	font-size: 1.8rem;
	color: #fff;
	font-family: "Changa", sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
}

.death-header h1 i {
	margin-right: 8px;
}

.death-stats {
	display: flex;
	justify-content: space-around;
	padding: 15px 10px;
	background: #4a4a4a;
	border-bottom: 3px solid #333;
}

.death-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.stat-label {
	font-size: 0.75rem;
	color: #999;
	text-transform: uppercase;
	font-family: "Changa", sans-serif;
	margin-bottom: 4px;
}

.stat-value {
	font-size: 1.3rem;
	font-weight: bold;
	color: #FFD700;
	font-family: "Changa", sans-serif;
}

.death-killer {
	padding: 12px 20px;
	background: #333;
	border-bottom: 2px solid #222;
	font-family: "Changa", sans-serif;
}

.death-killer span {
	color: #888;
	font-size: 0.85rem;
}

.death-killer strong {
	display: block;
	color: #FF6B6B;
	font-size: 1.1rem;
	margin-top: 4px;
}

.death-buttons {
	padding: 15px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.death-buttons button {
	width: 100%;
	font-size: 1rem;
	padding: 12px 20px;
}

.death-buttons button i {
	margin-right: 8px;
}
.toggle {
	position: fixed;
	right: 10px;
	bottom: 10px;
	z-index: 100;
	padding: 10px 14px;
	font-size: 1.1rem;
}

/* Settings Panel - Flat game style */
#settings {
	position: fixed;
	right: 10px;
	bottom: 65px;
	width: 300px;
	max-height: calc(100vh - 80px);
	overflow-y: auto;
	background: #3a3a3a;
	border-bottom: 6px solid #252525;
	z-index: 99;
	padding: 0;
}

.settings-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 15px;
	background: #4a4a4a;
	border-bottom: 4px solid #333;
}

.settings-header h2 {
	margin: 0;
	font-size: 1.2rem;
	color: #FFD700;
	font-family: "Changa", sans-serif;
}

.settings-close {
	background: #FF6B6B;
	border: none;
	border-bottom: 3px solid #c44;
	color: white;
	font-size: 1rem;
	padding: 4px 10px;
	cursor: pointer;
	font-family: "Changa", sans-serif;
}

.settings-close:hover {
	background: #ff8888;
}

.settings-close:active {
	transform: translateY(2px);
	border-bottom: 1px solid #c44;
}

.settings-section {
	padding: 12px 15px;
	border-bottom: 2px solid #333;
}

.settings-section h3 {
	margin: 0 0 10px 0;
	font-size: 0.85rem;
	color: #98FB98;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-family: "Changa", sans-serif;
}

.setting-row {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	gap: 8px;
}

.setting-row label {
	flex: 0 0 100px;
	font-size: 0.85rem;
	color: #ccc;
	font-family: "Changa", sans-serif;
}

.setting-row input[type="range"] {
	flex: 1;
	height: 8px;
	-webkit-appearance: none;
	background: #555;
	border-bottom: 2px solid #333;
	outline: none;
}

.setting-row input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	background: #7fed4c;
	border-bottom: 3px solid #56a130;
	cursor: pointer;
}

.setting-row input[type="range"]::-webkit-slider-thumb:hover {
	background: #8efc5b;
}

.setting-row input[type="range"]::-moz-range-thumb {
	width: 16px;
	height: 16px;
	background: #7fed4c;
	border: none;
	border-bottom: 3px solid #56a130;
	cursor: pointer;
}

.vol-value {
	flex: 0 0 36px;
	text-align: right;
	font-size: 0.8rem;
	color: #7fed4c;
	font-weight: bold;
	font-family: "Changa", sans-serif;
}

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

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

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

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

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

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

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

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

.settings-nav {
	padding: 10px 15px;
}

.settings-nav button {
	width: 100%;
	font-size: 0.95rem;
}

/* Expandable section */
.expandable-header {
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	user-select: none;
}

.expandable-header:hover {
	color: #b0f090;
}

.expand-icon {
	font-size: 0.7rem;
	transition: transform 0.2s;
}

.expandable.open .expand-icon {
	transform: rotate(180deg);
}

.expandable-content {
	margin-top: 10px;
}

.settings-footer {
	padding: 10px 15px;
	text-align: center;
	font-size: 0.7rem;
	color: #666;
	background: #333;
	font-family: "Changa", sans-serif;
}