/* Reading Race — a clear course on top; the question stays the star. */
.dxg .rr { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: clamp(6px, 1.2vh, 12px); padding: clamp(8px, 1.4vh, 14px) clamp(10px, 2.4vw, 28px); }
.rr-course { position: relative; padding: 6px 0 2px; }
/* Track theme: left → right */
.rr--track .rr-road {
	--pad: 78px; position: relative; height: clamp(78px, 12vh, 104px); border-radius: 18px; background: #5E6B75;
	background-image: linear-gradient(transparent 46%, #F6D878 46%, #F6D878 54%, transparent 54%);
	background-size: 44px 100%; border: 4px solid #3E4A54; box-shadow: inset 0 -6px 0 rgba(0,0,0,.12);
}
.rr--track .rr-road::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; transform: translateY(-50%);
	background: repeating-linear-gradient(90deg, #F6D878 0 22px, transparent 22px 44px); }
.rr--track .rr-road { background-image: none; }
.rr--track .rr-tick { position: absolute; top: 4px; bottom: 4px; width: 2px; left: calc(var(--pad) + var(--p) * (100% - 2 * var(--pad))); background: rgba(255,255,255,.22); }
.rr--track .rr-tick--start, .rr--track .rr-tick--finish { width: 6px; background: #fff; }
.rr--track .rr-tick--finish { background: repeating-linear-gradient(0deg, #fff 0 8px, #1C2B3D 8px 16px); width: 12px; margin-left: -3px; }
.rr-label { position: absolute; font-family: var(--g-head); font-weight: 700; font-size: .72rem; letter-spacing: .08em; color: #fff; }
.rr--track .rr-label--start { left: 8px; top: 50%; transform: translateY(-50%) rotate(-90deg); }
.rr--track .rr-label--finish { right: 8px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 0; }
.rr-label--finish svg { width: 26px; height: 30px; }
.rr--track .rr-racer, .rr--track .rr-ghost {
	position: absolute; top: 50%; left: calc(var(--pad) + var(--p, 0) * (100% - 2 * var(--pad))); width: 84px; height: 50px; margin: -27px 0 0 -42px;
	transition: left .7s cubic-bezier(.3, 1.15, .45, 1); z-index: 2;
}
.rr-ghost { opacity: .35; filter: grayscale(1); z-index: 1; }
.rr-racer svg, .rr-ghost svg { width: 100%; height: 100%; }
.rr-racer.is-moving svg { animation: rr-zoom .7s ease-out; }
@keyframes rr-zoom { 30% { transform: translateX(6px) skewX(-8deg); } }
.rr-flame { position: absolute; left: -16px; top: 18px; width: 20px; height: 14px; border-radius: 50% 0 0 50%; opacity: 0;
	background: radial-gradient(circle at 80% 50%, #fff 0 20%, #F6D878 30%, #E8836F 70%, transparent 72%); }
.rr-racer.is-turbo .rr-flame { opacity: 1; animation: rr-flicker .12s linear infinite alternate; }
@keyframes rr-flicker { to { transform: scaleX(1.4); } }
.rr-turbo { position: absolute; left: 50%; top: -2px; transform: translateX(-50%) scale(.7); opacity: 0; pointer-events: none;
	padding: 2px 14px; border-radius: 999px; background: #E8836F; color: #fff; font-family: var(--g-head); font-weight: 700; letter-spacing: .08em; transition: opacity .2s, transform .2s; }
.rr-turbo.is-on { opacity: 1; transform: translateX(-50%) scale(1); }
.rr-course.is-finished .rr-racer svg { animation: rr-win .6s ease-out 2; }
@keyframes rr-win { 50% { transform: translateY(-8px) rotate(-4deg); } }

/* Climb theme: bottom → summit (same engine, different picture) */
.dxg .rr--climb { grid-template-rows: none; grid-template-columns: 190px minmax(0, 1fr); }
.rr--climb .rr-course { display: flex; flex-direction: column; }
.rr--climb .rr-turbo { top: auto; bottom: 30px; }
.rr--climb .rr-road {
	--pad: 48px; position: relative; flex: 1; min-height: 240px; width: 100%; border: 0;
	background: linear-gradient(#EAF6F2, #CFE9E0); clip-path: polygon(50% 0, 62% 12%, 100% 100%, 0 100%, 38% 12%);
}
.rr--climb .rr-tick { position: absolute; left: 30%; right: 30%; height: 3px; bottom: calc(var(--pad) + var(--p) * (100% - 2 * var(--pad))); background: rgba(23,112,111,.25); }
.rr--climb .rr-label { color: var(--g-navy); }
.rr--climb .rr-label--start { bottom: 6px; left: 50%; transform: translateX(-50%); }
.rr--climb .rr-label--finish { top: -4px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.rr--climb .rr-racer, .rr--climb .rr-ghost { position: absolute; left: 50%; bottom: calc(var(--pad) + var(--p, 0) * (100% - 2 * var(--pad))); width: 52px; height: 52px; margin: 0 0 -26px -26px; transition: bottom .7s cubic-bezier(.3, 1.15, .45, 1); z-index: 2; }
.rr--climb .rr-flame { display: none; }

.rr-main { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 0; }
.rr-top { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: center; }
.rr-skill { font-family: var(--g-head); font-size: .85rem; padding: 3px 12px; border-radius: 999px; background: #DDF2F0; color: #0E4A49; }
.rr-count { font-family: var(--g-head); color: var(--g-navy); font-size: 1rem; }
.rr-help { min-height: 34px; font-size: .85rem; padding: 0 12px; }
.rr-help__text { margin: 0; max-width: 640px; padding: 6px 12px; border-radius: 12px; background: #FFF6D6; font-size: .95rem; text-align: center; }
.rr-question { width: 100%; display: flex; justify-content: center; }
.rr-streak { position: absolute; top: 0; right: 0; padding: 3px 12px; border-radius: 999px; background: #FFF5D1; border: 2px solid #E9C85A;
	font-family: var(--g-head); font-weight: 600; font-size: .9rem; color: #5C4500; opacity: 0; transition: opacity .2s; }
.rr-streak.is-on { opacity: 1; }
.rr--calm .rr-racer, .rr--calm .rr-ghost { transition: none !important; }
.rr--calm .rr-racer svg { animation: none !important; }
@media (max-width: 599px) {
	.rr--track .rr-road { --pad: 56px; height: 64px; }
	.rr--track .rr-label--finish svg { display: none; }
	.rr--track .rr-label { font-size: .6rem; }
	.rr--track .rr-label--finish { right: 4px; }
	.rr--track .rr-racer { width: 58px; height: 36px; margin: -19px 0 0 -29px; }
	.rr-skill { display: none; }
	.rr-streak { position: static; }
	.dxg .rr--climb { grid-template-columns: 90px minmax(0, 1fr); }
}