/* ===== Responsive header — compresses gracefully from large desktop down to Steam Deck (1280px) ===== */
	/* 1600px+: scale up buttons and search bar to fill the gap */
	@media (min-width: 1600px) {
		.topsearch { max-width: 860px; }
		.tbtn { height: 46px; padding: 0 22px; font-size: 16px; gap: 10px; }
		.tbtn svg { width: 22px; height: 22px; }
		.topnav .item { padding: 0 20px; font-size: 16px; height: 46px; }
		.topnav .item.item-lg { font-size: 18px; height: 50px; padding: 0 24px; }
		#navTopCreators, #navTopCommunity, #navTopAvatar, #navTopStore { height: 48px; padding: 0 21px; font-size: 16.5px; gap: 10px; }
		#navTopCreators svg, #navTopCommunity svg, #navTopAvatar svg, #navTopStore svg { width: 23px; height: 23px; }
		#navTopCreators .tbtn-icon-img, #navTopCommunity .tbtn-icon-img, #navTopAvatar .tbtn-icon-img, #navTopStore .tbtn-icon-img { width: 26px; height: 26px; }
	}
	/* 1400px: start pulling in the search margins */
	@media (max-width: 1400px) {
		.topsearch { max-width: 480px; }
	}
	/* 1280px (Steam Deck / smaller laptops): tighter button padding, smaller text */
	@media (max-width: 1280px) {
		.tbtn { padding: 0 8px; font-size: 12.5px; gap: 5px; }
		.steam-login { padding: 0 12px; font-size: 12px; }
		.topnav .item { padding: 0 10px; font-size: 13px; gap: 6px; }
		.topnav .item.item-lg { padding: 0 12px; font-size: 14px; height: 40px; }
	}
	/* 1100px: further compress */
	@media (max-width: 1100px) {
		.topsearch { max-width: 300px; }
		.tbtn { padding: 0 7px; font-size: 12px; gap: 4px; }
	}
	/* ≤900px (phones + small tablets): the top-bar primary nav can't fit a narrow header, so it
	   moves into the hamburger drawer (.ham-nav-primary). The bar keeps only brand + a flexible
	   search + auth. The drawer is an OVERLAY here (closed by default — see the inline script and
	   preference.js outside-click handler) and never shoves the header. */
	@media (max-width: 900px) {
		.topnav { display: none; }
		#navTopCreators, #navTopCommunity, #navTopAvatar, #navTopStore { display: none; }
		.ham-nav-primary { display: flex; flex-direction: column; gap: 3px; }
		.topsearch { max-width: none; flex: 1 1 auto; min-width: 0; }
		header { padding: 0 10px 0 60px; gap: 6px; }
		body.ham-open header { padding-left: 60px; }   /* overlay, don't push */
		main { padding: 18px 14px 64px; }
		.ham-menu { width: min(86vw, 300px); }
		.ham-item { padding: 11px 12px; font-size: 14px; gap: 12px; }
		.ham-header { height: 56px; padding-left: 60px; }
		.ham-brand { font-size: 17px; }
		.ham-title { font-size: 13px; }
		/* Dim the page behind the open drawer; tapping outside closes it (preference.js). */
		body.ham-open::before { content: ""; position: fixed; inset: 0; z-index: 44; background: rgba(0,0,0,.5); pointer-events: none; }
	}
	/* Extra-small phones: tighten the search so brand + search + auth always fit. */
	@media (max-width: 420px) {
		.topsearch { font-size: 13px; }
		main { padding: 14px 10px 60px; }
	}

	/* Recently-played dropdown shown when the empty search bar is focused */
	.search-pop { position: absolute; top: 46px; left: 0; right: 0; z-index: 60; display: none; padding: 8px;
		background: var(--card); border: 1px solid var(--border); border-radius: 12px;
		box-shadow: 0 18px 44px rgba(0,0,0,.5); max-height: min(80vh, 600px); overflow-y: auto; }
	.search-pop.open { display: block; }
	.sp-head { font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
		color: var(--muted2); padding: 6px 8px 8px; }
	.sp-item { display: flex; align-items: center; gap: 11px; padding: 7px 8px; border-radius: 9px; cursor: pointer; }
	.sp-item:hover { background: var(--card-hover); }
	.sp-thumb { width: 52px; height: 30px; border-radius: 6px; background: #0a0c12 center/cover no-repeat;
		flex: 0 0 auto; border: 1px solid var(--border); }
	.sp-title { font-family: var(--game); font-weight: 800; font-size: 14px; color: var(--text);
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	/* Friend rows in the search dropdown: round avatar + presence pip + status line. */
	.sp-av { position: relative; width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
		flex: 0 0 auto; background: var(--bg); border: 1px solid var(--border); }
	.sp-av img { width: 100%; height: 100%; object-fit: cover; }
	.sp-pip { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%;
		border: 2px solid var(--card); background: var(--muted2); }
	.sp-friend.online .sp-pip { background: #3ba55d; }
	.sp-friend.ingame .sp-pip { background: var(--up, #4ade80); box-shadow: 0 0 6px var(--up, #4ade80); }
	.sp-fbody { min-width: 0; }
	.sp-fst { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.sp-friend.ingame .sp-fst { color: var(--up, #4ade80); }
	.sp-empty { font-size: 13px; color: var(--muted2); padding: 6px 8px 10px; }
	/* Right cluster */
	.topright { display: flex; align-items: center; gap: 4px; margin-left: auto; }
	.tbtn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border-radius: 9px;
		color: var(--muted); font-weight: 700; font-size: 13.5px; cursor: pointer; background: none; border: none;
		white-space: nowrap; position: relative; transition: color .12s, transform .2s cubic-bezier(.34,1.56,.64,1); text-decoration: none; }
	.tbtn::after { content: ''; position: absolute; bottom: 3px; left: 57%; width: 50%;
		height: 3px; background: var(--accent); border-radius: 0;
		transform: translateX(-50%) scaleX(0); transition: transform .2s cubic-bezier(.34,1.56,.64,1); }
	.tbtn:hover { color: var(--text); background: none; transform: scale(1.08); }
	#navTopCreators:hover, #navTopCommunity:hover, #navTopAvatar:hover, #navTopStore:hover { color: #fff; }
	.tbtn:hover::after { transform: translateX(-50%) scaleX(1); }
	.tbtn.power::after { display: none; }
	.tbtn svg { width: 18px; height: 18px; }
	.tbtn-icon-img { width: 22px; height: 22px; object-fit: contain; flex: 0 0 auto; opacity: 1; filter: saturate(1); transition: opacity .12s, filter .12s; }
	.tbtn:hover .tbtn-icon-img { opacity: 1; filter: saturate(1); }
	.tbtn .dotblue { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-left: 2px; }
	.ticon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px;
		color: var(--muted); cursor: pointer; background: none; border: none; font-size: 16px; transition: background .12s, color .12s; }
	.ticon svg { width: 19px; height: 19px; }
	.ticon:hover { color: var(--text); background: rgba(255,255,255,.06); }
	.ticon.power, .tbtn.power { background: #b3202b; color: #fff; }
	.ticon.power:hover, .tbtn.power:hover { background: #cc2531; color: #fff; }
	.ticon.avatar { padding: 0; overflow: hidden; }
	.ticon.avatar img { width: 100%; height: 100%; object-fit: cover; }
	/* s&box-style mark: flat royal-blue rounded square + white wordmark (mirrors the official logo) */
	.brand-mark { width: 38px; height: 38px; border-radius: 11px; background: var(--accent);
		display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800;
		font-size: 19px; letter-spacing: -1px; line-height: 1; box-shadow: 0 4px 14px rgba(50,115,235,.32);
		font-family: "Hanken Grotesk", sans-serif; }
	.brand-text { display: flex; flex-direction: column; line-height: 1; }
	.brand-name { font-size: 20px; font-weight: 900; letter-spacing: -.5px; color: var(--text); }
	.brand-name b { color: var(--accent); }
	.brand-sub { font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: 2px; margin-top: 4px; }
	.controls { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
	.auth { display: flex; align-items: center; gap: 10px; margin-left: 4px; min-height: 38px; }
	.steam-login, .logout { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
		text-decoration: none; border: 1px solid transparent; border-radius: 10px; font-weight: 750;
		font-size: 13px; height: 38px; padding: 0 16px; white-space: nowrap; transition: filter .12s, background .12s; }
	.steam-login { background: var(--accent); color: var(--ink); border-color: var(--accent); box-shadow: 0 4px 12px rgba(50,115,235,.28); }
	.steam-login:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
	.logout { background: var(--card); color: var(--muted); border-color: var(--border); }
	.logout:hover { background: var(--card-hover); color: var(--text); }
	.user-pill { display: inline-flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--border);
		border-radius: 999px; padding: 4px 12px 4px 4px; max-width: 280px; min-width: 0; }
	.user-pill img { width: 30px; height: 30px; border-radius: 50%; background: #000; flex: 0 0 auto; }
	.user-copy { min-width: 0; line-height: 1.1; }
	.user-name { font-size: 13px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.user-own { font-size: 11px; color: var(--muted); margin-top: 2px; }
	.user-own.ok { color: var(--accent); }
	.user-own.no { color: var(--down); }
	input, select { background: var(--card); border: 1px solid var(--border); color: var(--text);
		padding: 9px 14px; border-radius: 10px; font-size: 14px; outline: none; transition: border-color .12s, box-shadow .12s; }
	input { width: 240px; }
	input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
	.chip-filter { display: inline-flex; align-items: center; gap: 7px; background: var(--accent); color: var(--ink);
		font-weight: 800; font-size: 13px; padding: 7px 14px; border-radius: 20px; cursor: pointer; }
	.chip-filter .x { font-weight: 900; }
	/* ⭐ WORKED EXAMPLE button (see DEVELOPING.md) */
	.surprise-btn { background: var(--panel, #fff); color: var(--text, #2d2f31); border: 1px solid var(--border, #d6d6d6);
		font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
	.surprise-btn:hover { background: var(--panel-alt, #f2f2f2); }
	.surprise-btn:disabled { opacity: .6; cursor: default; }

	main { padding: 28px 36px 70px; min-width: 0; }