/* Cartoon Arcade Racer page: small additions to site.css */

/* Subtitle under the game name in the hero h1 */
.racer-sub {
	display: block;
	margin-top: .35em;
	font-size: .4em;
	line-height: 1.25;
	color: var(--accent);
}

.game-hero-art img { background: #16110C; }

/* "Oh no…" → "Yes!" quote in the pitch */
.racer-quote {
	font-family: var(--display);
	font-size: clamp(1.2rem, 2.4vw, 1.55rem);
	line-height: 1.25;
	color: var(--accent-2);
	border-left: 4px solid var(--accent);
	padding: 4px 0 4px 16px;
	margin: 0 0 1.2em;
}

/* ---------- drift tier ladder: <ol class="drift-ladder"><li class="tier tier-1">… */
.drift-ladder {
	list-style: none; padding: 0; margin: 0 auto 18px; max-width: 980px;
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: end;
}
.tier {
	--c: #FFC531;
	position: relative;
	display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
	padding: 18px 18px 20px;
	border-radius: var(--radius);
	background: linear-gradient(180deg, color-mix(in srgb, var(--c) 26%, var(--surface)), var(--surface) 75%);
	border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
	box-shadow: 0 16px 40px -22px var(--c);
}
.tier-1 { --c: #FFC531; min-height: 160px; }
.tier-2 { --c: #FF8A1F; min-height: 200px; }
.tier-3 { --c: #FF4B2B; min-height: 240px; }
.tier-4 { --c: #E83A8C; min-height: 280px; }
.tier-name {
	font-family: var(--display); font-weight: 400;
	font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1;
	color: var(--c);
	transform: skewX(-8deg); transform-origin: left bottom;
	text-shadow: 0 3px 0 rgba(0, 0, 0, .45);
}
.tier-desc { color: var(--muted); font-size: .95rem; line-height: 1.4; }
.tier-mult {
	position: absolute; top: 14px; right: 14px;
	font: 800 .85rem/1 var(--body);
	padding: 6px 10px; border-radius: 999px;
	background: var(--c); color: #1A1200;
}
/* arrow between tiers */
.tier:not(:last-child)::after {
	content: "›"; position: absolute; right: -13px; bottom: 28px; z-index: 1;
	width: 24px; height: 24px; display: grid; place-items: center;
	font: 900 1.1rem/1 var(--body); color: var(--text);
	background: var(--bg-2); border: 1px solid var(--line); border-radius: 50%;
}
.racer-steps { margin-top: clamp(28px, 4vw, 44px); }

@media (max-width: 760px) {
	.drift-ladder { grid-template-columns: 1fr; gap: 10px; }
	.tier { min-height: 0; padding-right: 70px; }
	.tier-1 { width: 76%; }
	.tier-2 { width: 84%; }
	.tier-3 { width: 92%; }
	.tier-4 { width: 100%; }
	.tier:not(:last-child)::after { display: none; }
}

/* ---------- roadmap callout under the modes */
.racer-roadmap { margin-top: 24px; }
.racer-roadmap h3 { margin-bottom: .35em; }
.racer-roadmap p { color: var(--muted); }

/* ---------- garage */
.garage {
	list-style: none; padding: 0; margin: 0;
	display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}
.garage li {
	background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
	padding: 18px 18px 20px; transition: transform .2s, border-color .2s;
}
.garage li:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.ride-ico { display: block; font-size: 2rem; line-height: 1; margin-bottom: 10px; }
.garage h3 { font-size: 1.15rem; margin-bottom: .3em; }
.garage p { color: var(--muted); font-size: .95rem; line-height: 1.45; margin: 0; }
.garage .ride-gold {
	border-color: color-mix(in srgb, var(--gold) 60%, transparent);
	background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 18%, var(--surface)), var(--surface));
}
.garage .ride-gold h3 { color: var(--gold); }

.racer-circuits { margin-top: clamp(32px, 5vw, 52px); }
.racer-circuits h3 { margin-bottom: .7em; }
.racer-circuits .gallery-note { margin-top: 12px; }