/* ===== Launcher Home (full-bleed 3D scene with floating overlays) ===== */
	/* When on Home, hide the side rails + footer and let the 3D scene fill the screen. */
	body.home-active .left-rail,
	body.home-active .friends-rail,
	body.home-active footer { display: none; }
	body.home-active .shell { grid-template-columns: 1fr; min-height: 0; }
	body.home-active main { padding: 0; }
	body.home-active { overflow: hidden; }   /* no page scroll on the launcher home */

	/* Discover hides the side rails too (full-width rows), but keeps normal scrolling */
	body.discover-active .left-rail,
	body.discover-active .friends-rail { display: none; }
	body.discover-active .shell { grid-template-columns: 1fr; }
	/* Discover-only background — Steam-style gradient from dark blue-grey at top to near-black. */
	body.discover-active { --bg: #1a2233; background: linear-gradient(180deg, #232f45 0%, #1d2839 12%, #1a2233 30%); }
	body.creators-active { background: linear-gradient(180deg, #2a3c4e 0%, #1f2d3a 40%, #0b0d11 100%); }
	/* The 3D character + video background belong to the Home view ONLY. Hide them on every
	   other view (Discover, Games, Detail), regardless of scene.js. scene.js keeps running;
	   we just don't display it. This survives a direct refresh on any non-home view. */
	#three-bg, #scene-bg-video { display: none; }
	body.home-active #three-bg, body.home-active #scene-bg-video,
	body.avatar-active #scene-bg-video { display: block; }
	/* Avatar page shows the character canvas (no warehouse video) over a theme-coloured backdrop. */
	body.avatar-active #three-bg { display: block; }
	/* min-width:0 lets the grid item shrink below its content on narrow viewports (no overflow). */
	body.discover-active main { min-width: 0; }

	/* The #home container becomes a full-viewport overlay layer.
	   Its children are position:fixed, so they pin to the screen over the 3D canvas.
	   Because #home is display:none on other views, these overlays auto-hide there. */
	.lh { position: fixed; inset: 58px 0 0 0; z-index: 5; pointer-events: none; }
	.lh * { pointer-events: auto; }

	/* "Latest Update" card — bottom-left */
	.lh-update { position: fixed; left: 24px; bottom: 80px; width: 430px; max-width: calc(100vw - 48px);
		background: rgba(13,16,24,.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.08);
		border-radius: 14px; overflow: hidden; cursor: pointer; display: flex; flex-direction: column;
		box-shadow: 0 16px 40px rgba(0,0,0,.5); transition: transform .14s, border-color .14s; }
	.lh-update:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.18); }
	.lh-update .lu-thumb { height: 150px; background: #0a0c12 center/cover no-repeat; }
	.lh-update .lu-body { padding: 14px 18px 18px; }
	.lh-update .lu-tag { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
		text-transform: uppercase; color: var(--muted); }
	.lh-update .lu-title { font-size: 20px; font-weight: 900; letter-spacing: -.3px; margin: 6px 0 6px; }
	.lh-update .lu-desc { font-size: 13.5px; line-height: 1.5; color: var(--muted); }

	/* Bottom dock bar */
	.lh-dock { position: fixed; left: 0; right: 0; bottom: 0; height: 56px; z-index: 6;
		background: rgba(13,16,24,.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid rgba(255,255,255,.07);
		display: flex; align-items: center; gap: 8px; padding: 0 14px; }
	.dock-btn { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
		background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); color: var(--muted);
		cursor: pointer; font-size: 17px; transition: background .12s, color .12s; }
	.dock-btn:hover { background: rgba(255,255,255,.12); color: var(--text); }
	.dock-friends { display: flex; align-items: center; gap: 8px; margin-left: 4px; overflow: hidden; }
	.dock-friend { position: relative; width: 40px; height: 40px; border-radius: 10px; overflow: hidden; flex: 0 0 auto;
		cursor: pointer; background: #0a0c12; border: 1px solid rgba(255,255,255,.08); transition: transform .12s; }
	.dock-friend:hover { transform: translateY(-2px); }
	.dock-friend img { width: 100%; height: 100%; object-fit: cover; }
	.dock-friend .pip { position: absolute; right: 2px; bottom: 2px; width: 9px; height: 9px; border-radius: 50%;
		border: 2px solid #0d1018; background: var(--muted2); }
	.dock-friend.online .pip { background: var(--accent); }
	.dock-friend.ingame .pip { background: var(--up); box-shadow: 0 0 5px var(--up); }
	.dock-add { width: 40px; height: 40px; border-radius: 10px; border: 1px dashed rgba(255,255,255,.2);
		background: none; color: var(--muted); font-size: 22px; font-weight: 300; cursor: pointer; flex: 0 0 auto;
		display: inline-flex; align-items: center; justify-content: center; }
	.dock-add:hover { border-color: var(--accent); color: var(--accent); }
	.dock-spacer { margin-left: auto; }
	.dock-hint { color: var(--muted2); font-size: 12px; margin-left: 10px; }

	/* Live "Now Playing" pill in the dock — reflects the real s&box client state. */
	.now-playing { display: none; align-items: center; gap: 9px; margin-left: 10px; padding: 5px 8px 5px 11px;
		border-radius: 11px; background: linear-gradient(135deg, rgba(45,212,167,.16), rgba(50,115,235,.10));
		border: 1px solid rgba(45,212,167,.35); max-width: 320px; min-width: 0; }
	.now-playing.show { display: inline-flex; }
	.now-playing .np-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--up); flex: 0 0 auto;
		box-shadow: 0 0 0 0 rgba(45,212,167,.6); animation: npPulse 1.8s ease-out infinite; }
	.now-playing.launching .np-dot { background: #f5b53f; animation: npPulse 1s ease-out infinite; }
	@keyframes npPulse { 0% { box-shadow: 0 0 0 0 rgba(45,212,167,.5); } 70% { box-shadow: 0 0 0 7px rgba(45,212,167,0); } 100% { box-shadow: 0 0 0 0 rgba(45,212,167,0); } }
	.now-playing .np-text { min-width: 0; line-height: 1.15; }
	.now-playing .np-label { font-size: 9.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--up); }
	.now-playing.launching .np-label { color: #f5b53f; }
	.now-playing .np-game { font-size: 12.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.now-playing .np-stop { width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto; border: none; cursor: pointer;
		background: rgba(242,85,90,.16); color: #f2555a; font-size: 12px; display: inline-flex; align-items: center; justify-content: center;
		transition: background .12s, transform .12s; }
	.now-playing .np-stop:hover { background: rgba(242,85,90,.32); transform: scale(1.08); }

	/* Toasts — transient launch feedback (errors, "already playing", etc.). */
	.toasts { position: fixed; left: 50%; bottom: 70px; transform: translateX(-50%); z-index: 60;
		display: flex; flex-direction: column-reverse; align-items: center; gap: 8px; pointer-events: none; }
	.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; max-width: 460px;
		padding: 11px 15px; border-radius: 11px; font-size: 13.5px; font-weight: 600; color: var(--text);
		background: rgba(20,24,33,.97); border: 1px solid var(--border); box-shadow: 0 10px 34px rgba(0,0,0,.5);
		animation: toastIn .22s cubic-bezier(.2,.9,.3,1.3); }
	.toast.out { animation: toastOut .25s ease forwards; }
	.toast.err { border-color: rgba(242,85,90,.5); }
	.toast.ok { border-color: rgba(45,212,167,.5); }
	.toast .t-ico { font-size: 15px; flex: 0 0 auto; }
	@keyframes toastIn { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
	@keyframes toastOut { to { opacity: 0; transform: translateY(8px) scale(.97); } }

	/* Picture-in-Picture floating mini-player (trailer keeps playing after you leave a game page). */
	.pip { position: fixed; right: 18px; bottom: 74px; width: 340px; max-width: 46vw; z-index: 58;
		background: #0a0c12; border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
		box-shadow: 0 18px 50px rgba(0,0,0,.62); display: none; }
	.pip.show { display: block; animation: pipIn .24s cubic-bezier(.2,.9,.3,1.25); }
	@keyframes pipIn { from { opacity: 0; transform: translateY(14px) scale(.95); } to { opacity: 1; transform: none; } }
	.pip-bar { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 11px;
		background: linear-gradient(to bottom, #2a3c4e 0%, #1f2d3a 100%); cursor: move; touch-action: none; }
	.pip-title { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--text);
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.pip-actions { display: flex; gap: 5px; flex: 0 0 auto; }
	.pip-btn { width: 26px; height: 26px; border: none; border-radius: 7px; cursor: pointer; font-size: 12px;
		background: rgba(255,255,255,.08); color: var(--text); display: inline-flex; align-items: center; justify-content: center;
		transition: background .12s, transform .12s; }
	.pip-btn:hover { background: rgba(255,255,255,.18); transform: scale(1.08); }
	.pip-btn.pip-close:hover { background: #cc2531; color: #fff; }
	.pip-video { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; }
	.pip-video video { width: 100%; height: 100%; object-fit: contain; display: block; }
	.pip-video img { width: 100%; height: 100%; object-fit: cover; display: block; }
	@media (max-width: 560px) { .pip { right: 10px; bottom: 70px; width: 70vw; } }
	/* Avatar outfit chips — bottom-right floating list of equipped items (home view only) */
	.lh-outfit { position: fixed; right: 24px; bottom: 134px; z-index: 6; display: none; flex-direction: column;
		align-items: flex-end; gap: 6px; pointer-events: auto; max-width: 320px; }
	body.home-active .lh-outfit { display: flex; }
	.lh-outfit .lo-head { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
		text-transform: uppercase; color: rgba(255,255,255,.45); }
	.lh-outfit .lo-chips { display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: 5px; }
	.lo-chip { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 8px;
		background: rgba(13,16,24,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.08);
		color: rgba(255,255,255,.55); white-space: nowrap; text-transform: capitalize; }
	.lo-chip.matched { color: var(--accent); border-color: rgba(50,115,235,.25); background: rgba(50,115,235,.12); }
	@media (max-width: 560px) { .lh-outfit { right: 18px; max-width: calc(100vw - 36px); } }

	/* Avatar debug panel — shown on home view when logged in, for testing */
	#avatarDebug { position: fixed; top: 72px; right: 14px; z-index: 7; display: none;
		background: rgba(13,16,24,.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.1);
		border-radius: 12px; padding: 12px 14px; max-width: 260px; font-size: 12px; line-height: 1.55; }
	body.home-active #avatarDebug { display: block; }
	#avatarDebug .ad-title { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
		text-transform: uppercase; color: var(--accent); margin-bottom: 7px; }
	#avatarDebug .ad-meta { color: rgba(255,255,255,.55); font-size: 11px; margin-bottom: 2px; }
	#avatarDebug .ad-meta b { color: rgba(255,255,255,.85); font-weight: 700; }
	#avatarDebug .ad-count { font-family: var(--mono); font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase;
		color: rgba(255,255,255,.35); margin: 8px 0 5px; }
	#avatarDebug .ad-item { color: rgba(255,255,255,.7); display: flex; align-items: center; gap: 7px; margin: 3px 0; }
	#avatarDebug .ad-item .ad-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
		background: var(--accent); box-shadow: 0 0 5px var(--accent); }
	#avatarDebug .ad-item .ad-dot.grey { background: rgba(255,255,255,.25); box-shadow: none; }
	#avatarDebug .ad-item .ad-nm { flex: 1; min-width: 0; text-transform: capitalize; white-space: nowrap;
		overflow: hidden; text-overflow: ellipsis; }
	#avatarDebug .ad-tag { font-family: var(--mono); font-size: 8.5px; letter-spacing: .5px; text-transform: uppercase;
		padding: 1px 5px; border-radius: 5px; flex: 0 0 auto; background: rgba(255,255,255,.08); color: rgba(255,255,255,.4); }
	#avatarDebug .ad-tag.builtin { background: rgba(50,115,235,.14); color: rgba(120,165,245,.8); }
	#avatarDebug .ad-empty { color: rgba(255,255,255,.35); font-style: italic; }

	@media (max-width: 560px) { .lh-update { width: calc(100vw - 36px); left: 18px; } }


/* Notched-phone safe areas (works with viewport-fit=cover). env() is 0 on devices without a
   notch/home-indicator, so desktop and normal phones are completely unaffected. */
@supports (padding: max(0px)) {
	.lh-dock { height: calc(56px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); }
}