/* ── Reset & Base ──────────────────────────────────────── */
			*,
			*::before,
			*::after {
				box-sizing: border-box;
				margin: 0;
				padding: 0;
			}

			:root {
				--bg: #0a0a0f;
				--surface: #13131a;
				--surface2: #1c1c28;
				--border: rgba(255, 255, 255, 0.07);
				--accent: #7c5cfc;
				--accent2: #fc5c7d;
				--text: #e8e8f0;
				--muted: #6b6b80;
				--win: #4ade80;
				--radius: 12px;
				--font: 'Inter', system-ui, sans-serif;
			}

			@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap');

			html,
			body {
				height: 100%;
				background: var(--bg);
				color: var(--text);
				font-family: var(--font);
				overflow-x: hidden;
			}

			/* ── Layout ────────────────────────────────────────────── */
			#app {
				display: flex;
				flex-direction: column;
				min-height: 100vh;
			}

			nav {
				display: flex;
				align-items: center;
				gap: 0;
				padding: 0 24px;
				height: 56px;
				background: var(--surface);
				border-bottom: 1px solid var(--border);
				position: sticky;
				top: 0;
				z-index: 100;
				flex-shrink: 0;
			}

			.nav-brand {
				font-weight: 900;
				font-size: 18px;
				letter-spacing: -0.5px;
				background: linear-gradient(135deg, var(--accent), var(--accent2));
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				margin-right: auto;
			}

			.nav-tabs {
				display: flex;
				gap: 2px;
			}

			.tab-btn {
				background: none;
				border: none;
				color: var(--muted);
				font: 500 14px var(--font);
				padding: 8px 16px;
				border-radius: 8px;
				cursor: pointer;
				transition:
					color 0.15s,
					background 0.15s;
				white-space: nowrap;
			}

			.tab-btn:hover {
				color: var(--text);
				background: var(--surface2);
			}
			.tab-btn.active {
				color: var(--text);
				background: var(--surface2);
			}

			.page {
				display: none;
				flex: 1;
			}
			.page.active {
				display: flex;
				flex-direction: column;
			}

			/* ── Seed Banner ───────────────────────────────────────── */
			#seed-banner {
				background: linear-gradient(90deg, #2a1a5e, #1a2a5e);
				border: 1px solid rgba(124, 92, 252, 0.3);
				border-radius: var(--radius);
				padding: 20px 24px;
				margin: 24px auto;
				max-width: 600px;
				width: calc(100% - 48px);
				font-size: 14px;
				display: none;
			}

			#seed-banner h3 {
				font-size: 15px;
				margin-bottom: 8px;
				color: #a78bfa;
			}
			#seed-banner p {
				color: var(--muted);
				line-height: 1.5;
				margin-bottom: 12px;
			}
			#seed-banner code {
				background: rgba(0, 0, 0, 0.3);
				padding: 2px 6px;
				border-radius: 4px;
				font-size: 12px;
			}

			.seed-input-row {
				display: flex;
				gap: 8px;
			}

			#seed-url-input {
				flex: 1;
				background: rgba(0, 0, 0, 0.3);
				border: 1px solid var(--border);
				border-radius: 8px;
				padding: 8px 12px;
				color: var(--text);
				font: 13px var(--font);
				outline: none;
			}

			#seed-url-input:focus {
				border-color: var(--accent);
			}

			.seed-btn {
				background: var(--accent);
				border: none;
				border-radius: 8px;
				color: #fff;
				font: 600 13px var(--font);
				padding: 8px 14px;
				cursor: pointer;
				white-space: nowrap;
			}

			/* ── Battle Page ───────────────────────────────────────── */
			#battle-page {
				align-items: center;
				padding: 32px 24px;
				gap: 0;
			}

			.battle-header {
				text-align: center;
				margin-bottom: 32px;
			}

			.battle-header h1 {
				font-size: 28px;
				font-weight: 900;
				letter-spacing: -1px;
			}

			.battle-header p {
				color: var(--muted);
				margin-top: 6px;
				font-size: 14px;
			}

			.battle-arena {
				display: flex;
				gap: 24px;
				align-items: flex-start;
				width: 100%;
				max-width: 900px;
				justify-content: center;
			}

			.battle-card {
				flex: 1;
				max-width: 380px;
				background: var(--surface);
				border: 2px solid var(--border);
				border-radius: 16px;
				overflow: hidden;
				cursor: pointer;
				transition:
					border-color 0.1s,
					transform 0.1s,
					box-shadow 0.1s;
				position: relative;
				user-select: none;
			}

			.battle-card:hover {
				border-color: var(--accent);
				transform: translateY(-3px);
				box-shadow: 0 12px 40px rgba(124, 92, 252, 0.25);
			}

			.battle-card:active {
				transform: scale(0.98);
			}

			.battle-card.winner {
				border-color: var(--win);
				box-shadow: 0 0 40px rgba(74, 222, 128, 0.3);
				animation: winner-pulse 0.4s ease;
			}

			.battle-card.loser {
				opacity: 0.4;
			}

			@keyframes winner-pulse {
				0% {
					box-shadow: 0 0 0 rgba(74, 222, 128, 0);
				}
				50% {
					box-shadow: 0 0 60px rgba(74, 222, 128, 0.5);
				}
				100% {
					box-shadow: 0 0 40px rgba(74, 222, 128, 0.3);
				}
			}

			.battle-gif-wrap {
				position: relative;
				width: 100%;
				padding-top: 75%;
				background: #000;
				overflow: hidden;
			}

			.battle-gif-wrap img {
				position: absolute;
				inset: 0;
				width: 100%;
				height: 100%;
				object-fit: contain;
			}

			.battle-card-footer {
				padding: 14px 16px;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.battle-gif-name {
				font-size: 13px;
				color: var(--muted);
				font-weight: 500;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				max-width: 200px;
			}

			.battle-elo {
				font-size: 13px;
				font-weight: 700;
				color: var(--accent);
				letter-spacing: -0.3px;
			}

			.battle-vs {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 12px;
				flex-shrink: 0;
				padding-top: 30%;
			}

			.vs-text {
				font-size: 22px;
				font-weight: 900;
				color: var(--muted);
				letter-spacing: 2px;
			}

			.skip-btn {
				background: var(--surface2);
				border: 1px solid var(--border);
				border-radius: 8px;
				color: var(--muted);
				font: 500 12px var(--font);
				padding: 6px 12px;
				cursor: pointer;
				transition:
					color 0.15s,
					background 0.15s;
			}

			.skip-btn:hover {
				color: var(--text);
				background: var(--surface);
			}

			.battle-count {
				margin-top: 20px;
				font-size: 13px;
				color: var(--muted);
			}

			.battle-count span {
				color: var(--text);
				font-weight: 600;
			}

			/* keyboard hint */
			.key-hints {
				display: flex;
				gap: 16px;
				margin-top: 16px;
				font-size: 12px;
				color: var(--muted);
				align-items: center;
			}

			.key-hint {
				display: flex;
				align-items: center;
				gap: 6px;
			}

			kbd {
				background: var(--surface2);
				border: 1px solid var(--border);
				border-radius: 4px;
				padding: 2px 7px;
				font-size: 12px;
				font-family: monospace;
				color: var(--text);
			}

			/* ── Rate Page ─────────────────────────────────────────── */
			#rate-page {
				align-items: center;
				padding: 32px 24px;
			}

			.rate-header {
				text-align: center;
				margin-bottom: 32px;
			}

			.rate-header h1 {
				font-size: 28px;
				font-weight: 900;
				letter-spacing: -1px;
			}

			.rate-header p {
				color: var(--muted);
				margin-top: 6px;
				font-size: 14px;
			}

			.rate-card {
				background: var(--surface);
				border: 1px solid var(--border);
				border-radius: 16px;
				overflow: hidden;
				width: 100%;
				max-width: 500px;
			}

			.rate-gif-wrap {
				position: relative;
				width: 100%;
				padding-top: 75%;
				background: #000;
				overflow: hidden;
			}

			.rate-gif-wrap img {
				position: absolute;
				inset: 0;
				width: 100%;
				height: 100%;
				object-fit: contain;
			}

			.rate-controls {
				padding: 20px 24px;
			}

			.rate-gif-name {
				font-size: 14px;
				color: var(--muted);
				margin-bottom: 16px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.stars-row {
				display: flex;
				gap: 10px;
				justify-content: center;
				margin-bottom: 16px;
			}

			.star-btn {
				background: none;
				border: none;
				cursor: pointer;
				padding: 4px;
				transition: transform 0.1s;
				font-size: 36px;
				line-height: 1;
				filter: grayscale(1) opacity(0.35);
			}

			.star-btn:hover,
			.star-btn.lit {
				filter: none;
			}
			.star-btn:hover {
				transform: scale(1.15);
			}

			.star-btn:active {
				transform: scale(0.95);
			}

			.rate-meta {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 13px;
				color: var(--muted);
			}

			.avg-stars {
				color: var(--text);
				font-weight: 600;
			}

			.next-btn {
				background: none;
				border: 1px solid var(--border);
				border-radius: 8px;
				color: var(--muted);
				font: 500 13px var(--font);
				padding: 6px 14px;
				cursor: pointer;
				transition:
					color 0.15s,
					border-color 0.15s;
			}

			.next-btn:hover {
				color: var(--text);
				border-color: var(--accent);
			}

			.rate-count {
				margin-top: 20px;
				font-size: 13px;
				color: var(--muted);
				text-align: center;
			}

			.rate-count span {
				color: var(--text);
				font-weight: 600;
			}

			/* star rating keyboard hints */
			.rate-key-hints {
				display: flex;
				gap: 8px;
				justify-content: center;
				margin-top: 12px;
				font-size: 12px;
				color: var(--muted);
			}

			/* ── Leaderboard Page ──────────────────────────────────── */
			#leaderboard-page {
				padding: 32px 24px;
				align-items: center;
			}

			.lb-header {
				text-align: center;
				margin-bottom: 32px;
				width: 100%;
			}

			.lb-header h1 {
				font-size: 28px;
				font-weight: 900;
				letter-spacing: -1px;
			}

			.lb-header p {
				color: var(--muted);
				margin-top: 6px;
				font-size: 14px;
			}

			.lb-grid {
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
				gap: 16px;
				width: 100%;
				max-width: 1100px;
			}

			.lb-card {
				background: var(--surface);
				border: 1px solid var(--border);
				border-radius: var(--radius);
				overflow: hidden;
				transition:
					border-color 0.15s,
					transform 0.15s;
				cursor: default;
			}

			.lb-card:hover {
				border-color: rgba(124, 92, 252, 0.4);
				transform: translateY(-2px);
			}

			.lb-rank-badge {
				position: absolute;
				top: 8px;
				left: 8px;
				background: rgba(0, 0, 0, 0.7);
				backdrop-filter: blur(4px);
				border-radius: 6px;
				padding: 3px 8px;
				font-size: 12px;
				font-weight: 700;
				color: var(--muted);
				line-height: 1.4;
			}

			.rank-1 .lb-rank-badge {
				color: #fbbf24;
			}
			.rank-2 .lb-rank-badge {
				color: #94a3b8;
			}
			.rank-3 .lb-rank-badge {
				color: #b45309;
			}

			.lb-gif-wrap {
				position: relative;
				width: 100%;
				padding-top: 75%;
				background: #000;
				overflow: hidden;
			}

			.lb-gif-wrap img {
				position: absolute;
				inset: 0;
				width: 100%;
				height: 100%;
				object-fit: contain;
			}

			.lb-info {
				padding: 10px 12px;
			}

			.lb-name {
				font-size: 12px;
				color: var(--muted);
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-bottom: 6px;
			}

			.lb-stats {
				display: flex;
				gap: 8px;
				align-items: center;
			}

			.lb-elo {
				font-size: 14px;
				font-weight: 700;
				color: var(--accent);
				letter-spacing: -0.3px;
			}

			.lb-battles {
				font-size: 11px;
				color: var(--muted);
				margin-left: auto;
			}

			.lb-stars-mini {
				font-size: 11px;
				color: #fbbf24;
			}

			.lb-loading {
				text-align: center;
				padding: 60px 0;
				color: var(--muted);
				width: 100%;
			}

			.lb-empty {
				text-align: center;
				padding: 60px 0;
				color: var(--muted);
				width: 100%;
			}

			.lb-empty h3 {
				font-size: 18px;
				margin-bottom: 8px;
				color: var(--text);
			}

			/* ── Shared / Utility ──────────────────────────────────── */
			.spinner {
				width: 32px;
				height: 32px;
				border: 3px solid var(--border);
				border-top-color: var(--accent);
				border-radius: 50%;
				animation: spin 0.7s linear infinite;
				margin: 40px auto;
			}

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

			.toast {
				position: fixed;
				bottom: 24px;
				left: 50%;
				transform: translateX(-50%) translateY(20px);
				background: var(--surface2);
				border: 1px solid var(--border);
				border-radius: 10px;
				padding: 10px 20px;
				font-size: 14px;
				font-weight: 500;
				opacity: 0;
				transition:
					opacity 0.2s,
					transform 0.2s;
				pointer-events: none;
				z-index: 999;
				white-space: nowrap;
			}

			.toast.show {
				opacity: 1;
				transform: translateX(-50%) translateY(0);
			}

			/* Fade-in for cards */
			@keyframes fade-in-up {
				from {
					opacity: 0;
					transform: translateY(8px);
				}
				to {
					opacity: 1;
					transform: translateY(0);
				}
			}

			.fade-in {
				animation: fade-in-up 0.25s ease forwards;
			}

			/* Loading gif placeholder */
			.gif-placeholder {
				position: absolute;
				inset: 0;
				background: linear-gradient(90deg, var(--surface) 25%, var(--surface2) 50%, var(--surface) 75%);
				background-size: 200% 100%;
				animation: shimmer 1.2s infinite;
			}

			@keyframes shimmer {
				to {
					background-position: -200% 0;
				}
			}

			/* ── Mobile ────────────────────────────────────────────── */
			@media (max-width: 640px) {
				.battle-arena {
					flex-direction: column;
					align-items: center;
					gap: 12px;
				}
				.battle-vs {
					flex-direction: row;
					padding-top: 0;
				}
				.battle-card {
					max-width: 100%;
					width: 100%;
				}
				.key-hints {
					display: none;
				}
				.rate-key-hints {
					display: none;
				}
				.lb-grid {
					grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
					gap: 10px;
				}
			}