/* ===== Avatar page ===== Character (3D scene) on the left over a theme backdrop; cosmetics
	   grid panel on the right. body background = var(--bg) so it's dark in dark mode, white in light. */
	.avatar-view { display: none; }
	body.avatar-active .left-rail, body.avatar-active .friends-rail, body.avatar-active footer { display: none; }
	body.avatar-active .shell { grid-template-columns: 1fr; min-height: 0; }
	body.avatar-active main { padding: 0; }
	/*body.avatar-active { overflow: hidden; background: var(--bg); }
	/* Full-bleed overlay below the header. Left side is transparent so the character shows through. */
	.av-wrap { position: fixed; inset: 58px 0 0 0; z-index: 5; pointer-events: none; }
	/* Drag surface over the character — captures pointer drags to spin it (see enableAvatarDrag). */
	.av-stage { position: absolute; top: 0; left: 0; bottom: 0; right: min(46%, 720px);
		pointer-events: auto; cursor: grab; touch-action: none; }
	.av-stage.dragging { cursor: grabbing; }
	.av-note { position: absolute; top: 40px; left: 0; right: 0; text-align: center; padding: 0 24px;
		font-size: clamp(22px, 3.4vw, 44px); font-weight: 900; letter-spacing: -.6px; line-height: 1.1;
		color: var(--text); opacity: .92; text-shadow: 0 2px 14px rgba(0,0,0,.35); pointer-events: none; }
	/* Bottom-centre block over the character: rotate hint + "edit real avatar" call-to-action. */
	.av-actions { position: absolute; left: 0; right: min(46%, 720px); bottom: 70px; z-index: 1;
		display: flex; flex-direction: column; align-items: center; gap: 14px; pointer-events: none; }
	.av-hint { font-size: 13px; font-weight: 600; letter-spacing: .4px; color: var(--muted); }
	.av-cta { display: flex; flex-direction: column; align-items: center; gap: 9px; pointer-events: auto; }
	.av-cta-text { font-size: 15px; font-weight: 700; color: var(--text); text-shadow: 0 1px 8px rgba(0,0,0,.3); }
	.av-cta-btn { text-decoration: none; background: var(--accent); color: var(--ink); font-weight: 800; font-size: 14px;
		padding: 11px 20px; border-radius: 10px; box-shadow: 0 8px 22px rgba(0,0,0,.35); transition: background .12s, transform .12s; }
	.av-cta-btn:hover { background: var(--accent-hover); transform: translateY(-1px); }
	.av-cosmetics { position: absolute; top: 0; right: 0; bottom: 0; width: min(46%, 720px);
		background: linear-gradient(180deg, #2a3c4e 0%, #1f2d3a 100%); border-left: 1px solid var(--border); pointer-events: auto;
		overflow-y: auto; padding: 24px 26px 72px; }   /* bottom clears the fixed 56px dock */
	.av-head h2 { font-size: 24px; font-weight: 900; letter-spacing: -.4px; }
	.av-head p { color: var(--muted); font-size: 13px; margin: 4px 0 18px; }
	.av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
	.av-item { cursor: pointer; position: relative; content-visibility: auto; contain-intrinsic-size: auto 168px; }   /* off-screen cosmetics skip painting */
	/* Corner badges over a cosmetic card (worn now / newly discovered) + the worn-item highlight ring. */
	.av-badge { position: absolute; top: 7px; left: 7px; z-index: 2; font-size: 10px; font-weight: 800;
		letter-spacing: .3px; text-transform: uppercase; padding: 3px 7px; border-radius: 999px;
		background: var(--accent); color: var(--ink); box-shadow: 0 2px 6px rgba(0,0,0,.4); }
	.av-badge.new { background: #2ecf6f; color: #06210f; }
	.av-item.is-worn .av-thumb { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
	/* Try-on (store catalogue) — checkmark + green ring when worn */
	.av-item.tryon.is-worn .av-thumb { border-color: #2bbd6b; box-shadow: 0 0 0 1px #2bbd6b; }
	.av-check { position: absolute; top: 7px; right: 7px; z-index: 2; width: 22px; height: 22px; border-radius: 50%;
		background: #2bbd6b; color: #07210f; font-size: 13px; font-weight: 900; display: flex; align-items: center; justify-content: center;
		box-shadow: 0 2px 6px rgba(0,0,0,.45); }
	.av-subhint { font-size: 12px; color: var(--muted); font-weight: 600; }
	.av-inv-loading { color: var(--muted); font-size: 13px; padding: 16px 4px; }
	.av-inv-loading::before { content: "⏳ "; }
	/* "Wear" / "Worn" / "Take off" / "Put on" action pill under each card */
	.av-wear { display: block; margin: 7px auto 0; width: fit-content; font-size: 11px; font-weight: 800; letter-spacing: .2px;
		padding: 4px 14px; border-radius: 999px; background: var(--accent); color: #fff; }
	.av-wear.on { background: #2bbd6b; color: #07210f; }
	.av-item:hover .av-wear { filter: brightness(1.08); }
	/* "Wearing in game" — its own highlighted section */
	.av-sub-game { color: #2bbd6b; }
	.av-grid-game { background: color-mix(in srgb, #2bbd6b 8%, transparent); border: 1px solid color-mix(in srgb, #2bbd6b 30%, var(--border));
		border-radius: 14px; padding: 14px; }
	.av-item.gameworn:not(.off) .av-thumb { border-color: #2bbd6b; box-shadow: 0 0 0 1px #2bbd6b; }
	.av-item.gameworn.off { opacity: .5; }
	.av-item.gameworn.off .av-wear { background: var(--card-hover); color: var(--muted); }
	.av-thumb { position: relative; aspect-ratio: 1/1; background: var(--card) center/cover no-repeat; border: 1px solid var(--border);
		border-radius: 12px; overflow: hidden; transition: transform .14s, border-color .14s, box-shadow .14s; }
	.av-item:hover .av-thumb { transform: translateY(-3px); border-color: var(--accent);
		box-shadow: 0 10px 22px rgba(0,0,0,.4), 0 0 0 1px rgba(50,115,235,.25); }
	.av-name { font-size: 12.5px; font-weight: 600; color: var(--text); margin: 7px 2px 0; line-height: 1.25;
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.av-item.skeleton { pointer-events: none; }
	.av-item.skeleton .av-thumb { background: var(--card); }
	/* Empty / private-inventory call-to-action (spans the whole cosmetics grid). */
	.av-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; text-align: center;
		gap: 12px; padding: 34px 18px; }
	.av-empty .ave-ic { font-size: 34px; line-height: 1; }
	.av-empty h3 { font-size: 17px; font-weight: 800; color: var(--text); }
	.av-empty p { font-size: 13px; color: var(--muted); line-height: 1.5; max-width: 340px; }
	.av-empty-actions { display: flex; flex-direction: column; gap: 9px; width: 100%; max-width: 280px; margin-top: 4px; }
	.av-empty-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
		text-decoration: none; padding: 11px 16px; border-radius: 11px; font-weight: 800; font-size: 13.5px;
		border: 1px solid var(--border); background: var(--card); color: var(--text); transition: border-color .12s, background .12s, transform .12s; }
	.av-empty-btn:hover { border-color: var(--accent); transform: translateY(-1px); }
	.av-empty-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--ink); }
	.av-empty-btn.primary:hover { background: var(--accent-hover); }
	.av-empty-hint { font-size: 12px; color: var(--muted); opacity: .85; }
	/* Section labels + worn-item placeholder + the slim "enable full inventory" callout. */
	.av-sub { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: var(--text);
		margin: 22px 0 12px; letter-spacing: -.2px; }
	.av-sub:first-child { margin-top: 4px; }
	.av-count { font-size: 11.5px; font-weight: 700; color: var(--muted); background: var(--card);
		border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; }
	.av-thumb.empty { display: flex; align-items: center; justify-content: center; font-size: 30px; opacity: .8; }
	.av-inv-callout { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px;
		background: color-mix(in srgb, var(--card) 70%, transparent); display: flex; flex-direction: column; gap: 4px; }
	.av-inv-callout h4 { font-size: 13.5px; font-weight: 800; color: var(--text); }
	.av-inv-callout p { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
	.av-inv-callout .av-inv-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 8px; }
	.av-inv-hint { font-size: 11.5px; color: var(--muted); opacity: .85; margin-top: 6px; }
	@media (max-width: 760px) { .av-cosmetics { width: 100%; max-width: none; border-left: none;
		background: color-mix(in srgb, var(--bg2) 92%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } }