@font-face {
	font-family: "Comfortaa";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("fonts/comfortaa.woff2") format("woff2");
}

:root {
	--violet: #8b5cf6;
	--violet-soft: #a78bfa;
	--violet-deep: #6d28d9;
	--cornflower: #6495ed;
	--cornflower-soft: #8fb4f5;
	--text: #eceaf6;
	--muted: #9a92c4;
	--surface: rgba(255, 255, 255, 0.045);
	--surface-2: rgba(255, 255, 255, 0.07);
	--border: rgba(139, 109, 230, 0.28);
	--border-focus: rgba(var(--aur-2), 0.75);
	--danger: #ff8095;
	--font: "Comfortaa", "Segoe UI", system-ui, -apple-system, "Helvetica Neue",
		Arial, sans-serif;
	--mono: ui-monospace, "Cascadia Code", "SF Mono", "Courier New", monospace;

	/* Themeable background: two accent-tint radials over a 3-stop base gradient. */
	--bg-a: #140d2c;
	--bg-b: #180f31;
	--bg-c: #0b0817;
	--bg-r1: rgba(var(--aur-2), 0.22);
	--bg-r2: rgba(var(--aur-0), 0.28);

	/* Themeable aurora colours (r,g,b) read by bg.js. */
	--aur-0: 124, 58, 237;
	--aur-1: 139, 92, 246;
	--aur-2: 100, 149, 237;
	--aur-3: 143, 180, 245;
	--aur-4: 167, 139, 250;
}

/* ---- Themes: each overrides the accent + background + aurora variables. ---- */
:root[data-theme="ocean"] {
	--violet: #3b82f6;
	--violet-soft: #60a5fa;
	--violet-deep: #1d4ed8;
	--cornflower: #22d3ee;
	--cornflower-soft: #67e8f9;
	--border: rgba(56, 189, 248, 0.28);
	--border-focus: rgba(34, 211, 238, 0.75);
	--bg-a: #07172e;
	--bg-b: #0a2033;
	--bg-c: #04101c;
	--bg-r1: rgba(34, 211, 238, 0.16);
	--bg-r2: rgba(59, 130, 246, 0.24);
	--aur-0: 59, 130, 246;
	--aur-1: 14, 165, 233;
	--aur-2: 34, 211, 238;
	--aur-3: 103, 232, 249;
	--aur-4: 96, 165, 250;
}

:root[data-theme="emerald"] {
	--violet: #10b981;
	--violet-soft: #34d399;
	--violet-deep: #047857;
	--cornflower: #a3e635;
	--cornflower-soft: #bef264;
	--border: rgba(52, 211, 153, 0.28);
	--border-focus: rgba(163, 230, 53, 0.7);
	--bg-a: #062017;
	--bg-b: #08271c;
	--bg-c: #03130d;
	--bg-r1: rgba(163, 230, 53, 0.14);
	--bg-r2: rgba(16, 185, 129, 0.26);
	--aur-0: 16, 185, 129;
	--aur-1: 5, 150, 105;
	--aur-2: 52, 211, 153;
	--aur-3: 163, 230, 53;
	--aur-4: 110, 231, 183;
}

:root[data-theme="crimson"] {
	--violet: #f43f5e;
	--violet-soft: #fb7185;
	--violet-deep: #be123c;
	--cornflower: #f97316;
	--cornflower-soft: #fdba74;
	--border: rgba(251, 113, 133, 0.28);
	--border-focus: rgba(244, 63, 94, 0.7);
	--bg-a: #2a0a12;
	--bg-b: #310d14;
	--bg-c: #170509;
	--bg-r1: rgba(249, 115, 22, 0.14);
	--bg-r2: rgba(244, 63, 94, 0.26);
	--aur-0: 244, 63, 94;
	--aur-1: 225, 29, 72;
	--aur-2: 251, 113, 133;
	--aur-3: 249, 115, 22;
	--aur-4: 253, 164, 175;
}

:root[data-theme="amber"] {
	--violet: #f59e0b;
	--violet-soft: #fbbf24;
	--violet-deep: #b45309;
	--cornflower: #fde047;
	--cornflower-soft: #fef08a;
	--border: rgba(251, 191, 36, 0.3);
	--border-focus: rgba(245, 158, 11, 0.75);
	--bg-a: #241605;
	--bg-b: #2a1a06;
	--bg-c: #140b02;
	--bg-r1: rgba(253, 224, 71, 0.14);
	--bg-r2: rgba(245, 158, 11, 0.24);
	--aur-0: 245, 158, 11;
	--aur-1: 217, 119, 6;
	--aur-2: 251, 191, 36;
	--aur-3: 253, 224, 71;
	--aur-4: 252, 211, 77;
}

:root[data-theme="rose"] {
	--violet: #ec4899;
	--violet-soft: #f472b6;
	--violet-deep: #be185d;
	--cornflower: #a855f7;
	--cornflower-soft: #c084fc;
	--border: rgba(244, 114, 182, 0.28);
	--border-focus: rgba(232, 72, 153, 0.7);
	--bg-a: #280a1e;
	--bg-b: #2f0d24;
	--bg-c: #160511;
	--bg-r1: rgba(168, 85, 247, 0.16);
	--bg-r2: rgba(236, 72, 153, 0.26);
	--aur-0: 236, 72, 153;
	--aur-1: 219, 39, 119;
	--aur-2: 168, 85, 247;
	--aur-3: 192, 132, 252;
	--aur-4: 244, 114, 182;
}

:root[data-theme="mono"] {
	--violet: #9ca3af;
	--violet-soft: #d1d5db;
	--violet-deep: #6b7280;
	--cornflower: #e5e7eb;
	--cornflower-soft: #f3f4f6;
	--border: rgba(209, 213, 219, 0.24);
	--border-focus: rgba(229, 231, 235, 0.6);
	--bg-a: #141417;
	--bg-b: #1a1a1f;
	--bg-c: #0a0a0c;
	--bg-r1: rgba(229, 231, 235, 0.08);
	--bg-r2: rgba(156, 163, 175, 0.14);
	--aur-0: 156, 163, 175;
	--aur-1: 107, 114, 128;
	--aur-2: 209, 213, 219;
	--aur-3: 229, 231, 235;
	--aur-4: 180, 185, 195;
}

:root[data-theme="sunset"] {
	--violet: #dd6375;
	--violet-soft: #fb7185;
	--violet-deep: #ab4d5a;
	--cornflower: #f59e0b;
	--cornflower-soft: #f7ad30;
	--border: rgba(251, 113, 133, 0.28);
	--border-focus: rgba(245, 158, 11, 0.72);
	--bg-a: #2a1410;
	--bg-b: #37221e;
	--bg-c: #170b09;
	--bg-r1: rgba(245, 158, 11, 0.16);
	--bg-r2: rgba(251, 113, 133, 0.26);
	--aur-0: 251, 113, 133;
	--aur-1: 213, 96, 113;
	--aur-2: 245, 158, 11;
	--aur-3: 247, 177, 60;
	--aur-4: 252, 139, 155;
}

:root[data-theme="cyber"] {
	--violet: #bf3ed2;
	--violet-soft: #d946ef;
	--violet-deep: #9430a3;
	--cornflower: #06b6d4;
	--cornflower-soft: #2bc1da;
	--border: rgba(217, 70, 239, 0.28);
	--border-focus: rgba(6, 182, 212, 0.72);
	--bg-a: #120a1e;
	--bg-b: #20192c;
	--bg-c: #0a0611;
	--bg-r1: rgba(6, 182, 212, 0.16);
	--bg-r2: rgba(217, 70, 239, 0.26);
	--aur-0: 217, 70, 239;
	--aur-1: 184, 60, 203;
	--aur-2: 6, 182, 212;
	--aur-3: 56, 197, 221;
	--aur-4: 224, 103, 242;
}

:root[data-theme="grape"] {
	--violet: #944bd9;
	--violet-soft: #a855f7;
	--violet-deep: #723aa8;
	--cornflower: #7c3aed;
	--cornflower-soft: #9058f0;
	--border: rgba(168, 85, 247, 0.28);
	--border-focus: rgba(var(--aur-0), 0.72);
	--bg-a: #150a24;
	--bg-b: #231931;
	--bg-c: #0c0614;
	--bg-r1: rgba(var(--aur-0), 0.16);
	--bg-r2: rgba(168, 85, 247, 0.26);
	--aur-0: 168, 85, 247;
	--aur-1: 143, 72, 210;
	--aur-2: 124, 58, 237;
	--aur-3: 150, 97, 241;
	--aur-4: 184, 116, 248;
}

:root[data-theme="slate"] {
	--violet: #828fa2;
	--violet-soft: #94a3b8;
	--violet-deep: #656f7d;
	--cornflower: #38bdf8;
	--cornflower-soft: #56c7f9;
	--border: rgba(148, 163, 184, 0.28);
	--border-focus: rgba(56, 189, 248, 0.72);
	--bg-a: #0f172a;
	--bg-b: #1d2537;
	--bg-c: #080d17;
	--bg-r1: rgba(56, 189, 248, 0.16);
	--bg-r2: rgba(148, 163, 184, 0.26);
	--aur-0: 148, 163, 184;
	--aur-1: 126, 139, 156;
	--aur-2: 56, 189, 248;
	--aur-3: 96, 202, 249;
	--aur-4: 167, 180, 197;
}

:root[data-theme="mint"] {
	--violet: #28bba8;
	--violet-soft: #2dd4bf;
	--violet-deep: #1f9082;
	--cornflower: #4ade80;
	--cornflower-soft: #65e393;
	--border: rgba(45, 212, 191, 0.28);
	--border-focus: rgba(74, 222, 128, 0.72);
	--bg-a: #06201c;
	--bg-b: #152d2a;
	--bg-c: #03120f;
	--bg-r1: rgba(74, 222, 128, 0.16);
	--bg-r2: rgba(45, 212, 191, 0.26);
	--aur-0: 45, 212, 191;
	--aur-1: 38, 180, 162;
	--aur-2: 74, 222, 128;
	--aur-3: 110, 229, 153;
	--aur-4: 83, 220, 203;
}

:root[data-theme="blood"] {
	--violet: #d23c3c;
	--violet-soft: #ef4444;
	--violet-deep: #a32e2e;
	--cornflower: #b91c1c;
	--cornflower-soft: #c43e3e;
	--border: rgba(239, 68, 68, 0.28);
	--border-focus: rgba(185, 28, 28, 0.72);
	--bg-a: #1a0606;
	--bg-b: #281515;
	--bg-c: #0e0303;
	--bg-r1: rgba(185, 28, 28, 0.16);
	--bg-r2: rgba(239, 68, 68, 0.26);
	--aur-0: 239, 68, 68;
	--aur-1: 203, 58, 58;
	--aur-2: 185, 28, 28;
	--aur-3: 199, 73, 73;
	--aur-4: 242, 102, 102;
}

:root[data-theme="ice"] {
	--violet: #6ebade;
	--violet-soft: #7dd3fc;
	--violet-deep: #558fab;
	--cornflower: #bae6fd;
	--cornflower-soft: #c4eafd;
	--border: rgba(125, 211, 252, 0.28);
	--border-focus: rgba(186, 230, 253, 0.72);
	--bg-a: #0a1626;
	--bg-b: #192433;
	--bg-c: #060c15;
	--bg-r1: rgba(186, 230, 253, 0.16);
	--bg-r2: rgba(125, 211, 252, 0.26);
	--aur-0: 125, 211, 252;
	--aur-1: 106, 179, 214;
	--aur-2: 186, 230, 253;
	--aur-3: 200, 235, 253;
	--aur-4: 148, 219, 253;
}

:root[data-theme="lava"] {
	--violet: #db6513;
	--violet-soft: #f97316;
	--violet-deep: #a94e0f;
	--cornflower: #ef4444;
	--cornflower-soft: #f16060;
	--border: rgba(249, 115, 22, 0.28);
	--border-focus: rgba(239, 68, 68, 0.72);
	--bg-a: #1c0d05;
	--bg-b: #2a1c14;
	--bg-c: #0f0703;
	--bg-r1: rgba(239, 68, 68, 0.16);
	--bg-r2: rgba(249, 115, 22, 0.26);
	--aur-0: 249, 115, 22;
	--aur-1: 212, 98, 19;
	--aur-2: 239, 68, 68;
	--aur-3: 242, 105, 105;
	--aur-4: 250, 140, 64;
}

:root[data-theme="forest"] {
	--violet: #1ead53;
	--violet-soft: #22c55e;
	--violet-deep: #178640;
	--cornflower: #84cc16;
	--cornflower-soft: #96d439;
	--border: rgba(34, 197, 94, 0.28);
	--border-focus: rgba(132, 204, 22, 0.72);
	--bg-a: #08160c;
	--bg-b: #17241b;
	--bg-c: #040c07;
	--bg-r1: rgba(132, 204, 22, 0.16);
	--bg-r2: rgba(34, 197, 94, 0.26);
	--aur-0: 34, 197, 94;
	--aur-1: 29, 167, 80;
	--aur-2: 132, 204, 22;
	--aur-3: 157, 214, 69;
	--aur-4: 74, 207, 123;
}

:root[data-theme="bubblegum"] {
	--violet: #d764a0;
	--violet-soft: #f472b6;
	--violet-deep: #a64e7c;
	--cornflower: #60a5fa;
	--cornflower-soft: #78b3fb;
	--border: rgba(244, 114, 182, 0.28);
	--border-focus: rgba(96, 165, 250, 0.72);
	--bg-a: #1c1030;
	--bg-b: #2a1e3c;
	--bg-c: #0f091a;
	--bg-r1: rgba(96, 165, 250, 0.16);
	--bg-r2: rgba(244, 114, 182, 0.26);
	--aur-0: 244, 114, 182;
	--aur-1: 207, 97, 155;
	--aur-2: 96, 165, 250;
	--aur-3: 128, 183, 251;
	--aur-4: 246, 139, 195;
}

:root[data-theme="midnight"] {
	--violet: #575ad4;
	--violet-soft: #6366f1;
	--violet-deep: #4345a4;
	--cornflower: #818cf8;
	--cornflower-soft: #949df9;
	--border: rgba(99, 102, 241, 0.28);
	--border-focus: rgba(129, 140, 248, 0.72);
	--bg-a: #0a0f24;
	--bg-b: #191d31;
	--bg-c: #060814;
	--bg-r1: rgba(129, 140, 248, 0.16);
	--bg-r2: rgba(99, 102, 241, 0.26);
	--aur-0: 99, 102, 241;
	--aur-1: 84, 87, 205;
	--aur-2: 129, 140, 248;
	--aur-3: 154, 163, 249;
	--aur-4: 127, 130, 244;
}

:root[data-theme="toxic"] {
	--violet: #8fca2f;
	--violet-soft: #a3e635;
	--violet-deep: #6f9c24;
	--cornflower: #22c55e;
	--cornflower-soft: #43ce76;
	--border: rgba(163, 230, 53, 0.28);
	--border-focus: rgba(34, 197, 94, 0.72);
	--bg-a: #12180a;
	--bg-b: #202619;
	--bg-c: #0a0d06;
	--bg-r1: rgba(34, 197, 94, 0.16);
	--bg-r2: rgba(163, 230, 53, 0.26);
	--aur-0: 163, 230, 53;
	--aur-1: 139, 196, 45;
	--aur-2: 34, 197, 94;
	--aur-3: 78, 209, 126;
	--aur-4: 180, 235, 89;
}

:root[data-theme="sunflower"] {
	--violet: #dcb412;
	--violet-soft: #facc15;
	--violet-deep: #aa8b0e;
	--cornflower: #fb923c;
	--cornflower-soft: #fca259;
	--border: rgba(250, 204, 21, 0.28);
	--border-focus: rgba(251, 146, 60, 0.72);
	--bg-a: #221803;
	--bg-b: #2f2612;
	--bg-c: #130d02;
	--bg-r1: rgba(251, 146, 60, 0.16);
	--bg-r2: rgba(250, 204, 21, 0.26);
	--aur-0: 250, 204, 21;
	--aur-1: 213, 173, 18;
	--aur-2: 251, 146, 60;
	--aur-3: 252, 168, 99;
	--aur-4: 251, 213, 63;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	min-height: 100%;
}

body {
	font-family: var(--font);
	color: var(--text);
	background:
		radial-gradient(1100px 620px at 12% -12%, var(--bg-r1), transparent 60%),
		radial-gradient(1000px 720px at 92% 112%, var(--bg-r2), transparent 62%),
		linear-gradient(158deg, var(--bg-a) 0%, var(--bg-b) 44%, var(--bg-c) 100%);
	background-attachment: fixed;
	transition: background 0.4s ease;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

/* Icon-preload indicator (preload.js): a small non-blocking chip at the bottom.
   The site is fully usable while it warms game icons in the background. */
#preloader {
	position: fixed;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	z-index: 1000;
	max-width: calc(100vw - 32px);
	transition:
		opacity 0.4s ease,
		visibility 0.4s ease,
		transform 0.4s ease;
}

#preloader.done {
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 8px);
	pointer-events: none;
}

.pl-inner {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px 8px 14px;
	border-radius: 999px;
	background: rgba(13, 10, 30, 0.82);
	border: 1px solid var(--border);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.pl-bar {
	width: 90px;
	height: 6px;
	border-radius: 999px;
	background: var(--surface-2);
	overflow: hidden;
	flex: none;
}

.pl-fill {
	width: 0%;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--violet-soft), var(--cornflower-soft));
	transition: width 0.2s ease;
}

.pl-status {
	font-size: 12px;
	color: var(--muted);
	max-width: 46vw;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pl-skip {
	font: inherit;
	font-size: 15px;
	line-height: 1;
	color: var(--muted);
	background: transparent;
	border: 0;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	cursor: pointer;
	flex: none;
	transition:
		background 0.15s ease,
		color 0.15s ease;
}

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

/* Animated aurora canvas behind the content (drawn by bg.js) */
#bg {
	position: fixed;
	inset: 0;
	z-index: -1;
	display: block;
	pointer-events: none;
}

.hero {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 48px 20px;
	gap: 4px;
}

.mark {
	filter: drop-shadow(0 14px 34px rgba(var(--aur-2), 0.4))
		drop-shadow(0 6px 18px rgba(var(--aur-0), 0.45));
	animation: float 6s ease-in-out infinite;
}

/* Logo gradients follow the theme accent (overrides the inline stop-color). */
.mark stop:first-child,
.vbrand stop:first-child {
	stop-color: var(--violet-soft);
}
.mark stop:last-child,
.vbrand stop:last-child {
	stop-color: var(--cornflower-soft);
}

@keyframes float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-7px);
	}
}

.wordmark {
	margin: 18px 0 0;
	font-size: clamp(38px, 8vw, 62px);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	background: linear-gradient(
		120deg,
		var(--violet-soft) 0%,
		var(--cornflower-soft) 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.tagline {
	margin: 14px 0 0;
	max-width: 30ch;
	color: var(--muted);
	font-size: clamp(14px, 2.4vw, 16px);
	line-height: 1.55;
}

/* Search bar */
.search {
	margin-top: 34px;
	display: flex;
	align-items: center;
	gap: 12px;
	width: min(560px, 92vw);
	height: 62px;
	padding: 0 18px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 16px;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.04) inset,
		0 20px 50px -28px rgba(var(--aur-2), 0.5);
	transition:
		border-color 0.2s ease,
		box-shadow 0.25s ease,
		background 0.2s ease,
		transform 0.2s ease;
}

.search:focus-within {
	background: var(--surface-2);
	border-color: var(--border-focus);
	transform: translateY(-1px);
	box-shadow:
		0 0 0 4px rgba(var(--aur-2), 0.16),
		0 24px 60px -26px rgba(var(--aur-0), 0.6);
}

.search-icon {
	color: var(--muted);
	flex: 0 0 auto;
	transition: color 0.2s ease;
}

.search:focus-within .search-icon {
	color: var(--cornflower-soft);
}

#sj-address {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	background: none;
	border: none;
	outline: none;
	color: var(--text);
	font-family: inherit;
	font-size: 16px;
	letter-spacing: 0.01em;
}

#sj-address::placeholder {
	color: rgba(154, 146, 196, 0.7);
}

.enter-hint {
	flex: 0 0 auto;
	font-family: var(--mono);
	font-size: 13px;
	color: var(--muted);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 7px;
	padding: 3px 8px;
	opacity: 0;
	transform: scale(0.9);
	transition:
		opacity 0.2s ease,
		transform 0.2s ease;
}

.search:focus-within .enter-hint {
	opacity: 1;
	transform: scale(1);
}

/* Games button under the search bar */
.games-btn {
	margin-top: 16px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: inherit;
	font-size: 14px;
	color: var(--cornflower-soft);
	background: var(--surface);
	border: 1px solid var(--border);
	padding: 9px 18px;
	border-radius: 12px;
	cursor: pointer;
	transition:
		background 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease,
		transform 0.1s ease;
}

.games-btn:hover {
	background: var(--surface-2);
	border-color: var(--border-focus);
	color: var(--text);
	transform: translateY(-1px);
}

.games-btn:active {
	transform: scale(0.97);
}

/* Status / errors */
.status {
	margin-top: 18px;
	min-height: 20px;
	max-width: min(560px, 92vw);
}

#sj-error {
	margin: 0;
	color: var(--danger);
	font-size: 14px;
	white-space: pre-wrap;
}

#sj-error-code {
	margin: 8px 0 0;
	font-family: var(--mono);
	font-size: 12px;
	color: rgba(255, 128, 149, 0.75);
	white-space: pre-wrap;
	word-break: break-word;
}

/* Footer */
footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 22px 16px 26px;
	font-size: 13px;
	flex-wrap: wrap;
}

.muted {
	color: var(--muted);
}

.pulse {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--cornflower-soft);
	box-shadow: 0 0 0 0 rgba(143, 180, 245, 0.6);
	animation: pulse 2.4s ease-out infinite;
}

@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(143, 180, 245, 0.55);
	}
	70% {
		box-shadow: 0 0 0 9px rgba(143, 180, 245, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(143, 180, 245, 0);
	}
}

footer a {
	color: var(--cornflower-soft);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease;
}

footer a:hover {
	border-bottom-color: var(--cornflower-soft);
}

/* ---------- in-proxy browser shell (tab bar + address bar) ---------- */
#vbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	display: none;
	flex-direction: column;
	background: rgba(18, 12, 38, 0.86);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--border);
	box-shadow: 0 10px 34px -20px rgba(0, 0, 0, 0.85);
}

#vbar.show {
	display: flex;
}

.vrow {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 10px;
}

.vrow-tabs {
	height: 42px;
	padding-top: 6px;
}

.vrow-tools {
	height: 50px;
}

.vbrand {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	filter: drop-shadow(0 3px 10px rgba(var(--aur-2), 0.5));
}

.vtabs {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	flex: 1;
	overflow-x: auto;
	scrollbar-width: none;
}

.vtabs::-webkit-scrollbar {
	display: none;
}

.vtab {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 190px;
	min-width: 92px;
	height: 34px;
	padding: 0 6px 0 12px;
	border: 1px solid transparent;
	border-radius: 11px 11px 0 0;
	background: rgba(255, 255, 255, 0.04);
	color: var(--muted);
	font-family: inherit;
	font-size: 13px;
	cursor: pointer;
	white-space: nowrap;
	transition:
		background 0.15s ease,
		color 0.15s ease;
}

.vtab:hover {
	background: rgba(255, 255, 255, 0.09);
	color: var(--text);
}

.vtab.active {
	background: rgba(var(--aur-2), 0.18);
	color: var(--text);
	border-color: var(--border);
}

.vtab-label {
	overflow: hidden;
	text-overflow: ellipsis;
}

.vtab-close {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	line-height: 16px;
	text-align: center;
	border-radius: 6px;
	font-size: 15px;
}

.vtab-close:hover {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
}

.vbtn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--border);
	color: var(--text);
	font-family: inherit;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	transition:
		background 0.15s ease,
		border-color 0.15s ease,
		transform 0.1s ease;
}

.vbtn:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: var(--border-focus);
}

.vbtn:active {
	transform: scale(0.94);
}

.vnew {
	font-size: 20px;
}

.vurl {
	flex: 1;
	display: flex;
}

#vurl {
	flex: 1;
	min-width: 0;
	height: 38px;
	padding: 0 16px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 12px;
	color: var(--text);
	font-family: inherit;
	font-size: 14px;
	outline: none;
	transition:
		border-color 0.15s ease,
		background 0.15s ease;
}

#vurl:focus {
	border-color: var(--border-focus);
	background: var(--surface-2);
}

#vurl::placeholder {
	color: rgba(154, 146, 196, 0.7);
}

#vframes {
	position: fixed;
	left: 0;
	right: 0;
	top: 92px;
	bottom: 0;
	z-index: 90;
	display: none;
	background: #0b0817;
}

#vframes.show {
	display: block;
}

.vframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: none;
	background: #0b0817;
}

.vframe.active {
	display: block;
}

body.proxying .hero,
body.proxying > footer,
body.proxying #bg {
	display: none;
}

/* ---------- games ---------- */
.panel {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: none;
	flex-direction: column;
	padding: 28px 20px 44px;
	background: rgba(13, 9, 28, 0.93);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	overflow-y: auto;
}

.panel.show {
	display: flex;
}

.panel-head {
	width: 100%;
	max-width: 900px;
	margin: 0 auto 22px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.panel-head h2 {
	margin: 0;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.02em;
	background: linear-gradient(
		120deg,
		var(--violet-soft),
		var(--cornflower-soft)
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.games-toolbar {
	width: 100%;
	max-width: 900px;
	margin: 0 auto 18px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.games-search {
	flex: 1 1 220px;
	min-width: 0;
	height: 40px;
	padding: 0 14px;
	font: inherit;
	font-size: 14px;
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 12px;
	outline: none;
	transition:
		border-color 0.15s ease,
		background 0.15s ease;
}

.games-search::placeholder {
	color: var(--cornflower-soft);
	opacity: 0.6;
}

.games-search:focus {
	border-color: var(--border-focus);
	background: var(--surface-2);
}

.games-random {
	flex: none;
	font: inherit;
	font-size: 13px;
	color: var(--cornflower-soft);
	background: var(--surface);
	border: 1px solid var(--border);
	padding: 0 16px;
	height: 40px;
	border-radius: 12px;
	cursor: pointer;
	white-space: nowrap;
	transition:
		background 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease;
}

.games-random:hover {
	background: var(--surface-2);
	border-color: var(--border-focus);
	color: var(--text);
}

.games-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.game-filter {
	font: inherit;
	font-size: 13px;
	color: var(--cornflower-soft);
	background: var(--surface);
	border: 1px solid var(--border);
	padding: 8px 14px;
	border-radius: 999px;
	cursor: pointer;
	transition:
		background 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease;
}

.game-filter:hover {
	background: var(--surface-2);
	border-color: var(--border-focus);
	color: var(--text);
}

.game-filter.on {
	color: #fff;
	background: linear-gradient(
		120deg,
		var(--violet-soft),
		var(--cornflower-soft)
	);
	border-color: transparent;
}

.game-loadmore {
	grid-column: 1 / -1;
	justify-self: center;
	margin-top: 6px;
	font: inherit;
	font-size: 14px;
	color: var(--cornflower-soft);
	background: var(--surface);
	border: 1px solid var(--border);
	padding: 10px 22px;
	border-radius: 12px;
	cursor: pointer;
	transition:
		background 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease;
}

.game-loadmore:hover {
	background: var(--surface-2);
	border-color: var(--border-focus);
	color: var(--text);
}

.games-grid {
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
	gap: 14px;
}

.game-card {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	background: var(--surface);
	border: 1px solid var(--border);
	transition:
		border-color 0.15s ease,
		transform 0.1s ease,
		box-shadow 0.15s ease;
}

.game-card:hover {
	border-color: var(--border-focus);
	transform: translateY(-2px);
	box-shadow:
		0 16px 34px -22px rgba(var(--aur-2), 0.7),
		0 0 20px -2px rgba(var(--aur-2), 0.45);
}

.game-play {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 0;
	background: none;
	border: 0;
	color: var(--text);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}

.game-cover {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: linear-gradient(135deg, var(--violet-deep), var(--cornflower));
	overflow: hidden;
}

.game-cover-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	image-rendering: pixelated;
}

.game-cover.noimg::after {
	content: "\25B6";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	color: rgba(255, 255, 255, 0.9);
}

.game-name {
	display: block;
	padding: 9px 10px;
	font-size: 13px;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.game-actions {
	position: absolute;
	top: 6px;
	right: 6px;
	display: flex;
	gap: 4px;
}

.game-fav,
.game-dl {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(13, 9, 28, 0.55);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	cursor: pointer;
	text-decoration: none;
	font-family: inherit;
	transition: background 0.15s ease;
}

.game-fav:hover,
.game-dl:hover {
	background: rgba(var(--aur-2), 0.55);
}

.game-fav.on {
	color: #ffd36b;
}

.games-empty {
	width: 100%;
	max-width: 900px;
	margin: 34px auto 0;
	text-align: center;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.7;
}

.games-empty code {
	background: rgba(255, 255, 255, 0.06);
	padding: 2px 6px;
	border-radius: 6px;
	font-family: var(--mono);
	font-size: 13px;
}

/* fullscreen game player */
#game-view {
	position: fixed;
	inset: 0;
	z-index: 130;
	display: none;
	flex-direction: column;
	background: #0b0817;
}

#game-view.show {
	display: flex;
}

.gv-bar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	height: 52px;
	padding: 0 12px;
	background: rgba(18, 12, 38, 0.9);
	border-bottom: 1px solid var(--border);
}

.gv-title {
	flex: 1;
	font-size: 15px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#gv-fav.on {
	color: #ffd36b;
	border-color: rgba(255, 211, 107, 0.4);
}

#gv-frame {
	flex: 1;
	width: 100%;
	border: 0;
	background: #0b0817;
}

@media (prefers-reduced-motion: reduce) {
	.mark,
	.pulse {
		animation: none;
	}
}

@media (max-width: 480px) {
	.search {
		height: 56px;
	}
	.tagline {
		padding: 0 8px;
	}
}

/* Hero action buttons (Games / Settings) sit in a centered row. */
.hero-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

/* Settings panel (reuses .panel). */
.settings-body {
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
}

.settings-section {
	margin-bottom: 28px;
}

.settings-label {
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--muted);
}

.theme-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 12px;
}

.theme-swatch {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	font: inherit;
	font-size: 14px;
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 12px;
	cursor: pointer;
	transition:
		background 0.15s ease,
		border-color 0.15s ease,
		transform 0.1s ease;
}

.theme-swatch:hover {
	background: var(--surface-2);
	border-color: var(--border-focus);
}

.theme-swatch.on {
	border-color: var(--border-focus);
	box-shadow: 0 0 0 2px var(--border-focus);
}

.theme-chip {
	width: 26px;
	height: 26px;
	border-radius: 8px;
	flex: none;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.theme-name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---- Themed glow across the UI (scales with the active theme's accent). ---- */
.wordmark {
	filter: drop-shadow(0 0 24px rgba(var(--aur-2), 0.4));
}

.tagline {
	text-shadow: 0 0 18px rgba(var(--aur-2), 0.25);
}

.panel-head h2 {
	filter: drop-shadow(0 0 14px rgba(var(--aur-2), 0.32));
}

.search {
	filter: drop-shadow(0 0 16px rgba(var(--aur-2), 0.2));
	transition: filter 0.2s ease;
}
.search:focus-within {
	filter: drop-shadow(0 0 30px rgba(var(--aur-2), 0.42));
}

.games-btn {
	filter: drop-shadow(0 0 7px rgba(var(--aur-2), 0.18));
	transition:
		background 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease,
		transform 0.1s ease,
		filter 0.15s ease;
}
.games-btn:hover,
.games-random:hover,
.game-loadmore:hover {
	filter: drop-shadow(0 0 15px rgba(var(--aur-2), 0.42));
}

.theme-swatch.on {
	filter: drop-shadow(0 0 12px rgba(var(--aur-2), 0.5));
}

.pl-fill {
	box-shadow: 0 0 10px rgba(var(--aur-2), 0.6);
}

/* ---- Chat panel ---- */
.chat-body {
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	flex: 1;
}

.chat-setup {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 420px;
}

.chat-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
	color: var(--muted);
}

.chat-field input,
.chat-code-row input {
	height: 42px;
	padding: 0 14px;
	font: inherit;
	font-size: 15px;
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 12px;
	outline: none;
	transition:
		border-color 0.15s ease,
		background 0.15s ease;
}

.chat-field input:focus,
.chat-code-row input:focus {
	border-color: var(--border-focus);
	background: var(--surface-2);
}

.chat-rooms {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.chat-code-row {
	display: flex;
	gap: 8px;
}
.chat-code-row input {
	flex: 1;
	min-width: 0;
}

.chat-btn {
	font: inherit;
	font-size: 14px;
	color: #fff;
	background: linear-gradient(
		120deg,
		var(--violet-soft),
		var(--cornflower-soft)
	);
	border: 0;
	padding: 0 18px;
	height: 42px;
	border-radius: 12px;
	cursor: pointer;
	white-space: nowrap;
	transition:
		filter 0.15s ease,
		transform 0.1s ease;
}
.chat-btn:hover {
	filter: brightness(1.08) drop-shadow(0 0 14px rgba(var(--aur-2), 0.5));
}
.chat-btn:active {
	transform: scale(0.98);
}
.chat-btn.small {
	background: var(--surface);
	color: var(--cornflower-soft);
	border: 1px solid var(--border);
	height: 34px;
	padding: 0 12px;
	font-size: 13px;
}

.chat-note {
	font-size: 12px;
	color: var(--muted);
	line-height: 1.5;
	margin: 0;
}

.chat-conv {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	width: 100%;
}

.chat-conv-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.chat-room-name {
	font-size: 16px;
	font-weight: 600;
	color: var(--text);
}

.chat-status {
	margin-left: auto;
	font-size: 12px;
	color: var(--muted);
}

.chat-log {
	flex: 1;
	min-height: 240px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 14px;
}

.chat-line {
	font-size: 14px;
	line-height: 1.45;
	color: var(--text);
	word-break: break-word;
}
.chat-line.system {
	font-size: 12px;
	color: var(--muted);
	font-style: italic;
	text-align: center;
}
.chat-who {
	font-weight: 700;
	color: var(--cornflower-soft);
	margin-right: 8px;
}

.chat-composer {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}
.chat-composer input {
	flex: 1;
	min-width: 0;
	height: 44px;
	padding: 0 16px;
	font: inherit;
	font-size: 15px;
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 12px;
	outline: none;
	transition:
		border-color 0.15s ease,
		background 0.15s ease;
}
.chat-composer input:focus {
	border-color: var(--border-focus);
	background: var(--surface-2);
}

/* Chat: login error, roster (who's online + mute), timestamps. */
.chat-error {
	margin: 0;
	font-size: 13px;
	color: var(--danger);
	min-height: 1em;
}

.chat-roster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}

.chat-roster-title {
	font-size: 12px;
	color: var(--muted);
	margin-right: 2px;
}

.chat-user {
	font: inherit;
	font-size: 12px;
	color: var(--cornflower-soft);
	background: var(--surface);
	border: 1px solid var(--border);
	padding: 3px 10px;
	border-radius: 999px;
	cursor: pointer;
	transition:
		background 0.15s ease,
		color 0.15s ease,
		border-color 0.15s ease;
}
.chat-user::before {
	content: "● ";
	color: #4ade80;
	font-size: 9px;
}
.chat-user:hover {
	border-color: var(--border-focus);
}
.chat-user.muted {
	color: var(--muted);
	text-decoration: line-through;
	opacity: 0.6;
}
.chat-user.muted::before {
	content: "✕ ";
	color: var(--muted);
}

.chat-who {
	cursor: pointer;
}
.chat-who:hover {
	text-decoration: underline;
}

.chat-time {
	margin-left: 8px;
	font-size: 11px;
	color: var(--muted);
	opacity: 0.7;
}