:root {
		/* s&box identity: near-black + s&box's own royal-cobalt blue (#3273eb, from the official logo).
		   Note this is NOT Roblox's cyan-sky #00a2ff — different hue. White sits on the accent, like the logo. */
		--bg: #0b0d11;
		--bg2: #11141b;
		--card: #161a23;
		--card-hover: #1e2230;
		--text: #eef0f4;
		--muted: #ffffff;
		--muted2: #5c6475;
		--accent: #3273eb;
		--accent-hover: #2861d8;
		--accent-deep: #1f4fc0;
		--accent-soft: rgba(50,115,235,.14);
		--ink: #ffffff;            /* white sits on the s&box blue, as in the logo */
		--up: #2dd4a7;             /* online / positive / live */
		--down: #f2555a;
		--border: #232838;
		--radius: 14px;
		--mono: ui-monospace, "Cascadia Code", "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
		/* Stylized, rounded "gamey" face (Roblox-ish) used for game titles, ratings and player counts */
		--game: "Nunito", "Hanken Grotesk", system-ui, sans-serif;
	}
	/* ===== Light mode ===== Toggled via body.light (see the hamburger drawer switch). Dark is default. */
	body.light {
		--bg: #eef1f6;
		--bg2: #ffffff;
		--card: #ffffff;
		--card-hover: #e7ebf2;
		--text: #161a22;
		--muted: #3c4452;
		--muted2: #828b9c;
		--accent: #2f6fe6;
		--accent-hover: #285fc9;
		--accent-deep: #1f4fc0;
		--accent-soft: rgba(50,115,235,.12);
		--up: #0fa372;
		--down: #e03131;
		--border: #d6dce6;
	}
	/* Flip the hardcoded dark chrome + white-alpha hovers when light mode is on. */
	body.light header { background: rgba(255,255,255,.95); border-bottom: 1px solid var(--border); }
	/* Home: header floats over the 3D scene — no divider line, and force the button text black. */
	body.light.home-active header { border-bottom: none; }
	body.light.home-active .topnav .item,
	body.light.home-active .topnav .item.active,
	body.light.home-active .tbtn,
	body.light.home-active .ticon,
	body.light.home-active .hamburger { color: #000; }
	/* Keep the home search bar on its dark styling even in light mode (it sits over the 3D scene). */
	body.light.home-active .topsearch input { background: rgba(0,0,0,.38); border-color: rgba(255,255,255,.12); color: #eef0f4; }
	/* The Discover/Games view hardcodes a dark-blue --bg; give it a light surface in light mode. */
	body.light.discover-active { --bg: #eef1f6; background: linear-gradient(180deg, #d8e3f0 0%, #e4eaf4 20%, #eef1f6 50%); }
	/* Game-tile bits tuned for dark cards need flipping on light: white thumbs-up → dark,
	   and the bright-green player count → a darker green that reads on white. */
	body.light .gc-rating svg { fill: var(--text); }
	body.light .gc-players { color: #0a8f5e; }
	body.light .dh-players { color: #0a8f5e; background: rgba(15,163,114,.12); border-color: rgba(15,163,114,.35); }
	body.light .ham-menu { background: rgba(255,255,255,.97); border-right-color: var(--border); }
	body.light .lh-dock { background: rgba(255,255,255,.94); border-top-color: var(--border); }
	body.light .dock-btn { background: rgba(0,0,0,.04); border-color: var(--border); }
	body.light .dh-nav { background: rgba(255,255,255,.9); border-color: var(--border); color: var(--text); }
	body.light .topsearch input { background: rgba(0,0,0,.04); border-color: var(--border); }
	body.light .hamburger:hover,
	body.light .brand:hover,
	body.light .topnav .item:hover,
	body.light .tbtn:hover,
	body.light .ticon:hover,
	body.light .ham-item:hover,
	body.light.ham-open .hamburger { background: rgba(0,0,0,.06); }
	* { box-sizing: border-box; margin: 0; padding: 0; }
	/* Remove ALL native scrollbar UI site-wide (page, rails, dropdowns, inputs, everything).
	   Content stays fully scrollable via wheel / trackpad / drag — only the visual bar is gone. */
	*, *::before, *::after { scrollbar-width: none; -ms-overflow-style: none; }
	*::-webkit-scrollbar { width: 0; height: 0; display: none; }
	body { background: var(--bg); color: var(--text);
		font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
		min-height: 100vh; -webkit-font-smoothing: antialiased; }
	a { color: inherit; }
	img { display: block; }

	/* App shell: header on top, then [main | right friends] */
	.shell { display: grid; grid-template-columns: 1fr 290px; min-height: calc(100vh - 70px); }
	@media (max-width: 1200px) { .shell { grid-template-columns: 1fr; } .friends-rail { display: none; } }
	@media (max-width: 760px)  { .shell { grid-template-columns: 1fr; } }

	/* Left nav */
	.left-rail { background: var(--bg2); border-right: 1px solid var(--border); padding: 20px 10px; position: sticky; top: 68px;
		height: calc(100vh - 68px); overflow-y: auto; }
	.nav-item { display: flex; align-items: center; gap: 14px; padding: 11px 14px; border-radius: 10px; cursor: pointer;
		color: var(--muted); font-weight: 700; font-size: 14.5px; transition: background .1s, color .1s; position: relative; }
	.nav-item:hover { background: var(--card); color: var(--text); }
	.nav-item.active { background: var(--accent-soft); color: var(--accent); }
	.nav-item.active::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
		background: var(--accent); border-radius: 0 3px 3px 0; }
	.nav-item .ico { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
	.nav-sep { height: 1px; background: var(--border); margin: 14px 10px; }
	.nav-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted2); padding: 8px 14px 4px; font-weight: 800; }

	/* Right friends rail — a grouped roster (squared avatars, not Roblox circles) */
	.friends-rail { background: var(--bg2); border-left: 1px solid var(--border); padding: 20px 14px;
		position: sticky; top: 68px; height: calc(100vh - 68px); overflow-y: auto; }
	/* Detail view: drop the right rail and go full width. */
	body.detail-active .friends-rail { display: none; }
	body.detail-active .shell { grid-template-columns: 1fr; }
	/* Steam-style gradient: dark blue-grey at top fading to the base background */
	body.detail-active { background: linear-gradient(180deg, #1a2535 0%, #13192a 12%, #0e1220 28%, var(--bg) 55%); }

/* ---- analytics consent banner ---- */
.consent-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9000;
	display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between;
	background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px 18px;
	box-shadow: 0 10px 40px rgba(0,0,0,.5); max-width: 760px; margin: 0 auto; }
.consent-text { font-size: 13px; color: var(--text); line-height: 1.5; flex: 1; min-width: 240px; }
.consent-text a { color: var(--accent); text-decoration: underline; }
.consent-actions { display: flex; gap: 10px; flex: none; }
.consent-btn { cursor: pointer; border: 0; border-radius: 9px; padding: 9px 18px; font-size: 14px; font-weight: 700; }
.consent-btn.decline { background: var(--card-hover); color: var(--text); }
.consent-btn.accept { background: var(--accent); color: #fff; }
.consent-btn:hover { filter: brightness(1.08); }

/* ---- accessibility: skip link, keyboard focus, reduced motion ---- */
.skip-link { position: fixed; top: -120px; left: 12px; z-index: 10001; background: var(--accent); color: #fff;
	padding: 10px 18px; border-radius: 0 0 12px 12px; font-weight: 700; text-decoration: none; transition: top .15s ease; }
.skip-link:focus { top: 0; outline: 2px solid #fff; outline-offset: 2px; }
/* Visible focus ring for keyboard users only (mouse clicks don't trigger :focus-visible). */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important; animation-iteration-count: 1 !important;
		transition-duration: .001ms !important; scroll-behavior: auto !important;
	}
}