@media (max-width: 720px) {
	#side { top: calc(var(--hud) + 82px); }
	#toasts { top: calc(var(--hud) + 130px); }

	.day b { font-size: 1.1rem; }
}

/* ---------- Small screens ---------- */
@media (max-width: 959px) {
	#shop { left: 8px; right: 8px; width: auto; top: auto; bottom: calc(var(--tick) + 8px); height: min(64vh, 540px); z-index: 30; transform: translateY(calc(100% + 80px)); transition: transform .45s cubic-bezier(.2,1,.3,1); }
	#shop.open { transform: none; }
	#shop-toggle { display: inline-block; }
	#shop-close { display: grid; }
}
@media (max-width: 720px) {
	.hud { flex-wrap: wrap; padding: 8px 10px; gap: 8px; }
	.brand { flex: 1; font-size: 1.1rem; }
	.chips { order: 3; flex-basis: 100%; gap: 6px; }
	.chip { min-width: 0; flex: 1; padding: 6px 8px; border-radius: 12px; }
	.chip b { font-size: 1.02rem; }
	.chip .lbl { font-size: .52rem; letter-spacing: .1em; }
	.chip small { font-size: .6rem; }
	.chip small.dim { display: none; }
	.icon-btn { width: 36px; height: 36px; }
	.actionbar { gap: 6px; padding: 0 8px; }
	.btn { padding: 10px 12px; font-size: .85rem; }
	.btn small { font-size: .58rem; }
	.btn.gold { font-size: 1.15rem; padding: 9px 16px; }
	.btn .wide { display: none; }
	#toasts { top: calc(var(--hud) + 96px); }
}

@media (max-width: 959px) {
	#race { margin-left: 0; }
}
@media (max-width: 720px) {
	.race-row { grid-template-columns: 96px 1fr; }
}
@media (max-width: 720px) {
	.lv-badge { padding: 5px 8px; font-size: .8rem; }
	.lv-track { width: 40px; }
}
@media (max-width: 720px) {
	.rank-btn { height: 36px; padding: 0 9px; }
	.rank-btn span { display: none; }
}
@media (max-width: 480px) {
	.brand-txt { display: none; }
	.tools { gap: 4px; }
	.icon-btn { width: 34px; height: 34px; }
}