* {
	box-sizing : border-box
}

body {
	margin:0;
	font-family: 'Poppins', Arial, sans-serif;
	color:#222;
	background-color:#fff;
	background-image:
		linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 90%),
		repeating-linear-gradient(0deg, rgba(0,0,0,0.03) 0 1px, transparent 1px 20px),
		repeating-linear-gradient(90deg, rgba(0,0,0,0.03) 0 1px, transparent 1px 20px);
	background-repeat: no-repeat, repeat, repeat;
	background-size: 100% 100%, auto, auto;
	transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark-mode {
	background-color:#000;
	color:#ddd;
	background-image:
		linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 90%),
		repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 20px),
		repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 20px);
}

.banner{
	width:100%;
	min-height:320px;
	background-image:
		repeating-linear-gradient(0deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 20px),
		repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 20px),
		linear-gradient(135deg, rgb(8, 154, 192, 0.8) 0%, rgb(0, 82, 102, 0.8) 100%),
		url('banner.jpg');
	position:relative;
	overflow:hidden;
	display:flex;
	align-items:flex-end;
}

.banner-buttons {
	position: absolute;
	top: 20px;
	right: 24px;
	display: flex;
	gap: 12px;
	z-index: 10;
}

.banner-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: 48px;
	padding: 0 12px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.15);
	border: 2px solid rgba(255, 255, 255, 0.3);
	cursor: pointer;
	transition: all 0.3s ease;
	text-decoration: none;
	backdrop-filter: blur(8px);
}

.banner-btn svg {
	height: 30px;
	width: auto;
	transition: transform 0.3s ease;
}

.banner-btn:hover {
	background: rgba(255, 255, 255, 0.25);
	border-color: rgba(255, 255, 255, 0.5);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.banner-btn:hover svg {
	transform: scale(1.1);
}

.banner-inner{
	display:flex;
	align-items:center;
	gap:24px;
	width:100%;
	max-width:1100px;
	margin:0 auto;
	padding:36px 24px;
	margin-bottom: 60px;
}

.logo{
	width:96px;
	height:96px;
	border-radius:18px;
	background:rgba(255,255,255,0.15);
	display:flex;
	align-items:center;
	justify-content:center;
	color:white;
	font-weight:700;
	font-size:28px;
	box-shadow:0 6px 18px rgba(0,0,0,0.12);
}

.banner-text h1{
	margin:0 0 8px 0;
	color:#fff;
	font-size:36px;
	line-height:1.05;
	text-shadow:0 6px 18px rgba(0,0,0,0.18);
}

.subtitle{
	margin:0 0 14px 0;
	color:rgba(255,255,255,0.9);
	font-size:16px;
}

.cta{
	display:inline-block;
	padding:10px 18px;
	background:rgba(255,255,255,0.95);
	color:var(--accent-2);
	font-weight:600;
	border-radius:12px;
	text-decoration:none;
	box-shadow:0 6px 18px rgba(0,0,0,0.12);
	transition:transform .15s ease, box-shadow .15s ease;
}

.cta:hover{transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,0.18)}

.banner-wave{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:80px;
	display:block;
}

.main-container{
	padding:28px 20px;
	max-width:1100px;
	margin:0 auto;
}

.leaderboard{
	margin-top:10px;
}

.leaderboard-header{
	display:flex;
	align-items:baseline;
	gap:16px;
	justify-content:space-between;
}

.leaderboard-header h2{
	margin:0;
	font-size:20px;
	color:#111;
}

body.dark-mode .leaderboard-header h2 {
	color:#fff;
}

.leaderboard-sub{
	margin:0;
	color:#666;
	font-size:13px;
}

body.dark-mode .leaderboard-sub {
	color:#aaa;
}

.leaderboard-list{
	list-style:none;
	padding:12px;
	margin:16px 0 0 0;
	display:flex;
	flex-direction:column;
	gap:12px;
	position: relative;
}

@keyframes glowPulse {
	0%, 100% {
		opacity: 0.6;
		transform: scale(1);
	}
	50% {
		opacity: 0.8;
		transform: scale(1.02);
	}
}

.entry{
	display:flex;
	align-items:center;
	gap:16px;
	padding:14px;
	border-radius:14px;
	background:linear-gradient(180deg,rgba(255,255,255,0.6),rgba(255,255,255,0.45));
	box-shadow:0 6px 18px rgba(2,6,23,0.06), 0 0 0 1px rgba(200, 200, 200, 0.2);
	backdrop-filter: blur(6px);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

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

.entry:hover::before {
	left: 100%;
}

.entry:hover {
	box-shadow: 0 8px 24px rgba(2,6,23,0.1), 0 0 0 2px rgba(200, 200, 200, 0.3);
	transform: translateY(-2px);
}

/* Top 1 - Or */
.entry.rank-1 {
	box-shadow: 0 6px 18px rgba(255, 215, 0, 0.15), 0 0 0 1px rgba(255, 215, 0, 0.3), 0 0 20px rgba(255, 215, 0, 0.2);
}

.entry.rank-1::before {
	background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.15), transparent);
}

.entry.rank-1:hover {
	box-shadow: 0 8px 24px rgba(255, 215, 0, 0.25), 0 0 0 2px rgba(255, 215, 0, 0.5), 0 0 30px rgba(255, 215, 0, 0.3);
}

/* Top 2 - Argent */
.entry.rank-2 {
	box-shadow: 0 6px 18px rgba(192, 192, 192, 0.15), 0 0 0 1px rgba(192, 192, 192, 0.3), 0 0 20px rgba(192, 192, 192, 0.2);
}

.entry.rank-2::before {
	background: linear-gradient(90deg, transparent, rgba(192, 192, 192, 0.15), transparent);
}

.entry.rank-2:hover {
	box-shadow: 0 8px 24px rgba(192, 192, 192, 0.25), 0 0 0 2px rgba(192, 192, 192, 0.5), 0 0 30px rgba(192, 192, 192, 0.3);
}

/* Top 3 - Bronze */
.entry.rank-3 {
	box-shadow: 0 6px 18px rgba(205, 127, 50, 0.15), 0 0 0 1px rgba(205, 127, 50, 0.3), 0 0 20px rgba(205, 127, 50, 0.2);
}

.entry.rank-3::before {
	background: linear-gradient(90deg, transparent, rgba(205, 127, 50, 0.15), transparent);
}

.entry.rank-3:hover {
	box-shadow: 0 8px 24px rgba(205, 127, 50, 0.25), 0 0 0 2px rgba(205, 127, 50, 0.5), 0 0 30px rgba(205, 127, 50, 0.3);
}

/* Dark mode - autres rangs */
body.dark-mode .entry:not(.rank-1):not(.rank-2):not(.rank-3) {
	box-shadow: 0 6px 18px rgba(255,255,255,0.03), 0 0 0 1px rgba(100, 100, 100, 0.3);
}

body.dark-mode .entry:not(.rank-1):not(.rank-2):not(.rank-3)::before {
	background: linear-gradient(90deg, transparent, rgba(100, 100, 100, 0.1), transparent);
}

body.dark-mode .entry:not(.rank-1):not(.rank-2):not(.rank-3):hover {
	box-shadow: 0 8px 24px rgba(255,255,255,0.05), 0 0 0 2px rgba(100, 100, 100, 0.4);
}

.entry:not(.rank-1):not(.rank-2):not(.rank-3):nth-child(odd){
	background:linear-gradient(180deg,rgba(255,255,255,0.9),rgba(250,250,250,0.85));
}

body.dark-mode .entry:nth-child(odd):not(.rank-1):not(.rank-2):not(.rank-3) {
	background:linear-gradient(180deg,rgba(40,40,40,0.9),rgba(35,35,35,0.85));
}

.entry:not(.rank-1):not(.rank-2):not(.rank-3):nth-child(even){
	background:linear-gradient(180deg,rgba(246,246,247,0.9),rgba(242,242,243,0.9));
}

body.dark-mode .entry:nth-child(even):not(.rank-1):not(.rank-2):not(.rank-3) {
	background:linear-gradient(180deg,rgba(35,35,35,0.9),rgba(30,30,30,0.9));
}

.rank{
	min-width:54px;
	min-height:54px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	font-weight:700;
	color:#111;
	box-shadow:0 6px 18px rgba(0,0,0,0.12);
	font-size:20px;
	position:relative;
	overflow:hidden;
	background:transparent;
}

body.dark-mode .rank {
	color:#fff;
}

.entry.rank-1 {
    background: linear-gradient(to right, rgba(255, 215, 0, 0.6), rgba(255, 215, 0, 0.3));
}

.entry.rank-2 {
    background: linear-gradient(to right, rgba(192, 192, 192, 0.6), rgba(192, 192, 192, 0.3));
}

.entry.rank-3 {
    background: linear-gradient(to right, rgba(205, 127, 50, 0.6), rgba(205, 127, 50, 0.3));
}

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

.entry:nth-child(1) .rank::before{
	content: '';
	position: absolute; left:0; top:0; height:100%; width:100%; z-index:0; pointer-events:none;
	background: linear-gradient(90deg, #ffde21 0%, #ad9821 100%);
	background-size: 200% 100%;
	background-repeat: no-repeat;
	animation: slideRight 3s linear infinite alternate;
}

.entry:nth-child(2) .rank::before{
	content: '';
	position: absolute; left:0; top:0; height:100%; width:100%; z-index:0; pointer-events:none;
	background: linear-gradient(90deg, #e6e6e6 0%, #8c8c8c 100%);
	background-size: 200% 100%;
	background-repeat: no-repeat;
	animation: slideRight 3s linear infinite alternate;
}

.entry:nth-child(3) .rank::before{
	content: '';
	position: absolute; left:0; top:0; height:100%; width:100%; z-index:0; pointer-events:none;
	background: linear-gradient(90deg, #d99a69 0%, #6d4d34 100%);
	background-size: 200% 100%;
	background-repeat: no-repeat;
	animation: slideRight 3s linear infinite alternate;
}

.rank .rank-num{
	position:relative;z-index:1}

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

.player-name {
	font-weight:700;
	color:#111;
	font-size:16px;
}

body.dark-mode .player-name {
	color:#fff;
}

.score {
	color: #c62828;
	text-shadow: 2px 2px 8px rgba(198, 40, 40, 0.5), 0 0 12px rgba(198, 40, 40, 0.7);
	font-weight: 800;
	margin-top: 4px;
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 18px;
	animation: pulseGlow 1.5s infinite;
}

@keyframes pulseGlow {
	0%, 100% {
		text-shadow: 2px 2px 8px rgba(198, 40, 40, 0.5), 0 0 12px rgba(198, 40, 40, 0.7);
	}
	50% {
		text-shadow: 2px 2px 12px rgba(198, 40, 40, 0.7), 0 0 20px rgba(198, 40, 40, 0.9);
	}
}

.score .tag {
	background:#fff3;
	color:#222;
	padding:2px 6px;
	border-radius:8px;
	font-weight:700;
	margin-left:8px;
	font-size:12px;
}

.score .wr-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 8px;
	background: linear-gradient(135deg, rgb(255, 215, 0) 0%, rgb(218, 165, 32) 100%);
	color: #1a1a1a;
	font-size: 10px;
	font-weight: 800;
	border-radius: 6px;
	border: 1px solid rgb(218, 165, 32);
	box-shadow: 0 2px 8px rgba(218, 165, 32, 0.6), 0 0 15px rgba(218, 165, 32, 0.4);
	letter-spacing: 0.5px;
	animation: wrPulse 2s infinite;
}

@keyframes wrPulse {
	0%, 100% {
		opacity: 1;
		box-shadow: 0 2px 8px rgba(218, 165, 32, 0.6), 0 0 15px rgba(218, 165, 32, 0.4);
	}
	50% {
		opacity: 1;
		box-shadow: 0 2px 12px rgba(218, 165, 32, 0.8), 0 0 25px rgba(218, 165, 32, 0.6);
	}
}

body.dark-mode .score .wr-tag {
	background: linear-gradient(135deg, rgb(255, 215, 0) 0%, rgb(218, 165, 32) 100%);
	box-shadow: 0 2px 12px rgba(218, 165, 32, 0.8), 0 0 20px rgba(218, 165, 32, 0.6);
}

/* Death Image Modal */
.death-image-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10000;
	align-items: center;
	justify-content: center;
}

.death-image-modal.active {
	display: flex;
}

.death-image-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.85);
	backdrop-filter: blur(8px);
	animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.death-image-container {
	position: relative;
	z-index: 10001;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
	from {
		transform: scale(0.8);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

.death-image {
	width: 95%;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	border: 3px solid rgba(8, 154, 192, 0.6);
	background: #000;
	cursor: pointer;
}

.death-image-close {
	position: fixed;
	top: 40px;
	right: 40px;
	background: rgba(255, 255, 255, 0.2);
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
	z-index: 10002;
}

.death-image-close:hover {
	background: rgba(255, 255, 255, 0.3);
	transform: rotate(90deg) scale(1.1);
}

.death-image-close svg {
	color: white;
}

.time-diff {
	color:#000000;
	font-size:16px;
	margin-top:4px;
	display: none;
	font-weight: 600;
}

body.dark-mode .time-diff {
	color:#ffffff;
}

body.show-time-diff .time-diff {
	display: block;
}

.mode {
	margin-left:12px;
	background:rgba(2,6,23,0.06);
	padding:8px 10px;
	border-radius:10px;
	font-weight:600;
	color:#0f172a;
	font-size:13px;
}

body.dark-mode .mode {
	background:rgba(255,255,255,0.1);
	color:#ddd;
}
.avatar{
	width:56px;
	height:56px;
	border-radius:10px;
	object-fit:cover;
	margin-left:12px;
	box-shadow:0 6px 18px rgba(2,6,23,0.08);
}

.leaderboard-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    margin-bottom: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 250, 250, 0.9) 100%);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.08);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

body.dark-mode .leaderboard-controls {
    background: linear-gradient(135deg, rgba(40, 40, 40, 0.95) 0%, rgba(30, 30, 30, 0.9) 100%);
    border-color: rgba(255, 255, 255, 0.1);
}

.mode-buttons {
    display: flex;
    gap: 8px;
}

.mode-btn {
    padding: 10px 18px;
    background: linear-gradient(135deg, rgba(231, 231, 231, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%);
    color: rgb(0, 0, 0);
    border: 2px solid #dcdcdc;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(210, 210, 210, 0.3);
    letter-spacing: 0.5px;
}

body.dark-mode .mode-btn {
    background: linear-gradient(135deg, rgba(50, 50, 50, 0.8) 0%, rgba(40, 40, 40, 0.8) 100%);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ddd;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.mode-btn:hover {
    background: linear-gradient(135deg, rgba(210, 210, 210, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(150, 150, 150, 0.3);
}

body.dark-mode .mode-btn:hover {
    background: linear-gradient(135deg, rgba(60, 60, 60, 0.9) 0%, rgba(50, 50, 50, 0.9) 100%);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
}

.mode-btn:active {
    transform: translateY(0);
}

.mode-btn.active {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.5) 0%, rgba(255, 183, 0, 0.5) 100%);
    border-color: #ffd700;
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.5);
    color: #333;
}

body.dark-mode .mode-btn.active {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.5) 0%, rgba(255, 183, 0, 0.5) 100%);
    border-color: #ffd700;
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.5);
    color: #333;
}

.mode-btn.active:hover {
    background: linear-gradient(135deg, rgba(255, 231, 0, 0.6) 0%, rgba(255, 199, 0, 0.6) 100%);
    border-color: #ffe700;
}

body.dark-mode .mode-btn.active:hover {
    background: linear-gradient(135deg, rgba(255, 231, 0, 0.6) 0%, rgba(255, 199, 0, 0.6) 100%);
    border-color: #ffe700;
}

.search-container {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input {
    padding: 11px 16px;
    border: 2px solid rgba(173, 173, 173, 0.2);
    border-radius: 8px;
    font-size: 14px;
    width: 220px;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.8);
    font-family: 'Poppins', Arial, sans-serif;
}

body.dark-mode .search-input {
    background: rgba(40, 40, 40, 0.8);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.search-input::placeholder {
    color: #999;
}

body.dark-mode .search-input::placeholder {
    color: #666;
}

.search-input:focus {
    outline: none;
    border-color: #ffd700;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
    background: white;
}

body.dark-mode .search-input:focus {
    background: rgba(50, 50, 50, 0.9);
    border-color: #ffd700;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
}

.settings-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.settings-modal.active {
    display: flex;
}

.settings-modal-content {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 250, 250, 0.95) 100%);
    border-radius: 16px;
    padding: 0;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideIn 0.3s ease;
}

body.dark-mode .settings-modal-content {
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.98) 0%, rgba(20, 20, 20, 0.95) 100%);
}

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

.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

body.dark-mode .settings-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.settings-header h2 {
    margin: 0;
    font-size: 24px;
    color: #111;
}

body.dark-mode .settings-header h2 {
    color: #fff;
}

.close-settings {
    background: none;
    border: none;
    font-size: 32px;
    cursor: pointer;
    color: #666;
    transition: color 0.3s ease;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-settings:hover {
    color: #333;
}

body.dark-mode .close-settings {
    color: #aaa;
}

body.dark-mode .close-settings:hover {
    color: #fff;
}

.settings-body {
    padding: 28px;
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
}

.setting-label {
    font-size: 16px;
    font-weight: 600;
    color: #222;
}

body.dark-mode .setting-label {
    color: #ddd;
}

.login-btn {
    padding: 10px 28px;
    background: linear-gradient(135deg, rgb(8, 154, 192) 0%, rgb(0, 82, 102) 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(8, 154, 192, 0.3);
}

.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(8, 154, 192, 0.4);
}

body.dark-mode .login-btn {
    background: linear-gradient(135deg, rgb(8, 154, 192) 0%, rgb(0, 82, 102) 100%);
    box-shadow: 0 4px 12px rgba(8, 154, 192, 0.5);
}

body.dark-mode .login-btn:hover {
    box-shadow: 0 6px 20px rgba(8, 154, 192, 0.6);
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 56px;
    height: 28px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 28px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
	background: linear-gradient(135deg, #32cd32 0%, #1a671a 100%);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(28px);
}

@media (max-width:720px){
	.entry{padding:12px;gap:12px}
	.rank{min-width:46px;min-height:46px;font-size:16px}
	.avatar{width:46px;height:46px}
	.mode{padding:6px 8px;font-size:12px}
	.leaderboard-header{flex-direction:column;align-items:flex-start;gap:6px}
	
	.leaderboard-controls {
		flex-direction: column;
		gap: 16px;
		padding: 16px;
	}
	
	.mode-buttons {
		width: 100%;
		flex-wrap: wrap;
		justify-content: center;
		gap: 6px;
	}
	
	.mode-btn {
		padding: 8px 14px;
		font-size: 12px;
		flex: 0 1 auto;
		white-space: nowrap;
	}
	
	.search-container {
		width: 100%;
	}
	
	.search-input {
		width: 100%;
	}
}

@media (max-width:720px){
	:root{--banner-height:260px}
	.banner-inner{flex-direction:row;gap:16px;padding:26px}
	.banner-text h1{font-size:22px}
	.logo{width:64px;height:64px;font-size:20px;border-radius:12px}
}