/* Fundraiser: tracker page, home strip, detail block.
   Styled after the No Fuss flyer: royal blue, sky-blue bands, condensed
   uppercase headings, heart outlines, star badges, dotted dividers, a comet
   that rides the bar. Brand vars come from rt-site-vars. */

.rt-fr-tracker, .rt-fr-banner, .rt-fr-detail {
	--fr-ink: var(--rt-ink, #1d497c);
	--fr-primary: var(--rt-primary, #2566b6);
	--fr-bright: var(--rt-primary-bright, #229ce0);
	--fr-sky: color-mix(in srgb, var(--fr-bright) 18%, #fff);
	--fr-gold: var(--rt-neutral, #c4ccd2); /* silver: the old Cox gold is retired (Principal Kelly, 8-28) */
	--fr-silver: #9aa3ad;
	--fr-paper: var(--rt-paper, #fff);
	--fr-display: var(--rt-font-display, "RT Display", "Arial Narrow", sans-serif);
}

/* ---- Type ---- */
.rt-fr-h2 { display: flex; align-items: center; justify-content: center; gap: .45em; margin: 2.4rem 0 1.1rem; font-family: var(--fr-display); font-weight: var(--rt-font-display-weight, 700); font-size: clamp(1.7rem, 3.4vw, 2.4rem); letter-spacing: .04em; text-transform: uppercase; color: var(--fr-primary); }
.rt-fr-h2 i { color: var(--fr-gold); font-size: .8em; }
.rt-fr-h2--ribbon { position: relative; }
.rt-fr-h2--ribbon span { display: inline-block; padding: .25em 1.2em; background: var(--fr-primary); color: #fff; border-radius: 6px; transform: rotate(-1.5deg); box-shadow: 0 6px 16px rgba(37,102,182,.3); }
.rt-fr-h2--ribbon i { color: #fff; }

/* ---- Head ---- */
.rt-fr-head { text-align: center; padding: .5rem 0 1.2rem; }
.rt-fr-tagline-band { display: inline-flex; align-items: center; gap: .6em; margin: 0 0 1.2rem; padding: .35em 1.2em; background: var(--fr-sky); color: var(--fr-primary); font-family: var(--fr-display); font-weight: var(--rt-font-display-weight, 700); font-size: clamp(1.05rem, 2.2vw, 1.45rem); letter-spacing: .08em; text-transform: uppercase; clip-path: polygon(0 0, 100% 0, 97% 100%, 3% 100%); }
.rt-fr-tagline-band i { color: var(--fr-primary); }

/* ---- Progress ---- */
.rt-fr-progress { position: relative; }
.rt-fr-numbers { display: flex; align-items: baseline; justify-content: center; gap: .5em; flex-wrap: wrap; margin: 0 0 .4rem; }
.rt-fr-raised { font-family: var(--fr-display); font-size: clamp(2.6rem, 7vw, 4.6rem); font-weight: var(--rt-font-display-weight, 700); line-height: 1; letter-spacing: .01em; color: var(--fr-primary); }
.rt-fr-raised-word { font-size: .3em; letter-spacing: .14em; color: var(--fr-ink); opacity: .8; }
.rt-fr-goal { font-size: 1.05rem; font-weight: 700; color: var(--fr-ink); opacity: .85; }
.rt-fr-bar { position: relative; height: 30px; border-radius: 999px; background: var(--fr-sky); overflow: visible; margin: 1rem 0 5.2rem; box-shadow: inset 0 2px 4px rgba(29,73,124,.18); }
.rt-fr-fill { position: relative; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--fr-ink), var(--fr-primary) 60%, var(--fr-bright)); transition: width 2.2s cubic-bezier(.22,1,.36,1); box-shadow: 0 0 18px rgba(34,156,224,.5); }
.rt-fr-fill::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, transparent 0, rgba(255,255,255,.35) 50%, transparent 100%); background-size: 200% 100%; animation: rt-fr-shine 2.6s linear infinite; }
.rt-fr-comet { position: absolute; right: -10px; top: 50%; width: 34px; height: 34px; margin-top: -17px; }
.rt-fr-comet::after { content: "\2605"; position: absolute; inset: 0; font-size: 30px; line-height: 34px; text-align: center; color: var(--fr-gold); text-shadow: 0 0 10px rgba(160,170,178,.9), 0 0 22px rgba(255,255,255,.8); animation: rt-fr-twinkle 1.6s ease-in-out infinite; }
.rt-fr-comet::before { content: ""; position: absolute; right: 22px; top: 11px; width: 110px; height: 12px; border-radius: 999px; background: linear-gradient(270deg, rgba(255,255,255,.95), rgba(160,170,178,.6) 40%, transparent); filter: blur(.5px); }
.rt-fr-mark { position: absolute; top: 100%; transform: translateX(-50%); margin-top: 8px; text-align: center; line-height: 1; color: var(--fr-ink); opacity: .45; transition: opacity .4s, transform .4s; width: 6.5em; }
.rt-fr-mark i { display: block; font-size: 1.15rem; margin: 0 auto 4px; color: var(--fr-silver); }
.rt-fr-mark b { display: block; font-family: var(--fr-display); font-weight: var(--rt-font-display-weight, 700); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.rt-fr-mark small { display: block; font-size: .62rem; font-weight: 700; opacity: .8; margin-top: 2px; }
.rt-fr-mark.is-hit { opacity: 1; color: var(--fr-primary); }
/* Reached: the icon grows and takes the brand color so it no longer matches
   the unreached ones (Furi, 9-6: Liftoff looked like nothing happened). */
.rt-fr-mark.is-hit i { color: var(--fr-primary); font-size: 1.7rem; margin-bottom: 2px; filter: drop-shadow(0 0 6px rgba(160,170,178,.7)); }
.rt-fr-mark.is-hit b { font-size: .88rem; }
/* The latest milestone earned wears a glowing ring behind its icon. */
.rt-fr-mark.is-latest i { position: relative; z-index: 1; }
.rt-fr-mark.is-latest b { margin-top: .5rem; }
.rt-fr-mark.is-latest::before { content: ""; position: absolute; left: 50%; top: -.35rem; width: 2.5rem; height: 2.5rem; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,.35) 55%, transparent 72%); box-shadow: 0 0 0 3px var(--fr-primary), 0 0 18px var(--fr-primary); animation: rt-fr-ring 2.4s ease-in-out infinite; }
@keyframes rt-fr-ring { 0%, 100% { box-shadow: 0 0 0 3px var(--fr-primary), 0 0 14px var(--fr-primary); } 50% { box-shadow: 0 0 0 4px var(--fr-primary), 0 0 26px var(--fr-primary); } }
.rt-fr-progress--compact .rt-fr-mark.is-hit i { font-size: 1.15rem; }
.rt-fr-progress--compact .rt-fr-mark.is-latest::before { width: 1.9rem; height: 1.9rem; top: -.3rem; }
.rt-fr-banner .rt-fr-mark.is-hit i { color: #fff; filter: drop-shadow(0 0 8px rgba(255,255,255,.8)); }
.rt-fr-banner .rt-fr-mark.is-latest::before { box-shadow: 0 0 0 3px #fff, 0 0 18px #fff; animation: none; }
.rt-fr-mark.is-hit.is-fresh { animation: rt-fr-pop .8s cubic-bezier(.34,1.56,.64,1); }
/* The milestone moment: dim the page, land the badge big in the middle. */
.rt-fr-hero-dim { position: fixed; inset: 0; z-index: 9700; background: rgba(15,28,54,.72); opacity: 0; transition: opacity .35s; }
.rt-fr-hero-dim.is-on { opacity: 1; }
.rt-fr-hero { position: fixed; left: 50%; top: 50%; z-index: 9701; transform: translate(-50%,-50%) scale(.6); opacity: 0; display: grid; justify-items: center; gap: .8rem; text-align: center; padding: 0 1rem; max-width: 92vw; transition: transform .5s cubic-bezier(.22,1.2,.36,1), opacity .35s; }
.rt-fr-hero.is-on { transform: translate(-50%,-50%) scale(1); opacity: 1; }
.rt-fr-hero-icon { width: clamp(124px, 22vw, 168px); height: clamp(124px, 22vw, 168px); border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--fr-primary); font-size: clamp(3.4rem, 10vw, 4.6rem); box-shadow: 0 0 0 6px var(--fr-primary), 0 0 40px var(--fr-primary); }
.rt-fr-hero b { color: #fff; font-family: var(--fr-display); font-weight: var(--rt-font-display-weight, 700); font-size: clamp(1.7rem, 5vw, 2.4rem); line-height: 1.1; letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.rt-fr-hero b span { display: block; }
.rt-fr-hero b .rt-fr-hero-pct { color: var(--fr-gold, #c4ccd2); }
.rt-fr-hero small { color: #fff; font-size: clamp(1rem, 2.6vw, 1.2rem); font-weight: 600; opacity: .95; }
@media (prefers-reduced-motion: reduce) { .rt-fr-mark.is-latest::before { animation: none; } }
.rt-fr-togo { margin: 0; font-family: var(--fr-display); font-weight: var(--rt-font-display-weight, 700); font-size: 1.25rem; letter-spacing: .05em; text-transform: uppercase; color: var(--fr-primary); }
.rt-fr-togo em { font-style: normal; color: var(--fr-ink); }
@keyframes rt-fr-shine { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes rt-fr-pop { 0% { transform: translateX(-50%) scale(.5) rotate(-20deg); } 60% { transform: translateX(-50%) scale(1.4) rotate(8deg); } 100% { transform: translateX(-50%) scale(1) rotate(0); } }
@keyframes rt-fr-twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.18) rotate(18deg); } }

/* compact (strip, slider) */
.rt-fr-progress--compact .rt-fr-numbers { justify-content: flex-start; }
.rt-fr-progress--compact .rt-fr-raised { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.rt-fr-progress--compact .rt-fr-bar { height: 16px; margin: .5rem 0 2rem; }
.rt-fr-progress--compact .rt-fr-comet { width: 22px; height: 22px; margin-top: -11px; right: -6px; }
.rt-fr-progress--compact .rt-fr-comet::after { font-size: 20px; line-height: 22px; }
.rt-fr-progress--compact .rt-fr-comet::before { width: 60px; height: 8px; top: 7px; right: 14px; }
.rt-fr-progress--compact .rt-fr-mark { width: 5em; margin-top: 5px; }
.rt-fr-progress--compact .rt-fr-mark i { font-size: .8rem; margin-bottom: 2px; }
.rt-fr-progress--compact .rt-fr-mark b { font-size: .62rem; }
.rt-fr-progress--compact .rt-fr-mark small { display: none; }

/* ---- Stats, countdown, ctas ---- */
.rt-fr-stats { list-style: none; display: flex; justify-content: center; gap: 2rem; padding: 0; margin: .2rem 0 .8rem; flex-wrap: wrap; color: var(--fr-ink); font-weight: 700; }
.rt-fr-stats b { display: block; font-family: var(--fr-display); font-size: 1.9rem; line-height: 1; color: var(--fr-primary); }
.rt-fr-countdown { display: inline-flex; align-items: center; gap: .45em; margin: .4rem 0; padding: .4em 1.1em; border-radius: 999px; font-family: var(--fr-display); font-weight: var(--rt-font-display-weight, 700); letter-spacing: .06em; text-transform: uppercase; font-size: 1rem; background: var(--fr-gold); color: var(--fr-ink); }
.rt-fr-countdown.is-soon { background: var(--fr-ink); color: #fff; }
.rt-fr-countdown.is-now { background: #d63c2f; color: #fff; animation: rt-fr-pulse 1.4s ease-in-out infinite; }
.rt-fr-countdown.is-upcoming { background: var(--fr-ink); color: #fff; }
.rt-fr-countdown.is-over { background: var(--fr-sky); color: var(--fr-ink); }
@keyframes rt-fr-pulse { 50% { transform: scale(1.04); } }
.rt-fr-ctas { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; margin: .8rem 0 0; }
/* The Donate button is the one thing on this page we want pressed, so it
   carries the brand blue and the only motion. The countdown above it steps
   back to silver rather than competing (Furi, 9-1). */
.rt-fr-btn--give { position: relative; overflow: hidden; isolation: isolate; background: var(--fr-primary) !important; color: #fff !important; border-color: var(--fr-primary) !important; box-shadow: 0 6px 18px rgba(37,102,182,.38); font-weight: 800; }
.rt-fr-btn--give:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 10px 24px rgba(37,102,182,.45); }
/* A light crossing the face: long pause, quick sweep, nothing that flashes. */
.rt-fr-btn--give::after { content: ""; position: absolute; top: -60%; left: -40%; width: 26%; height: 220%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform: rotate(18deg); pointer-events: none; animation: rt-fr-sparkle 4.5s ease-in-out infinite; }
@keyframes rt-fr-sparkle { 0%, 62% { left: -40%; opacity: 0; } 66% { opacity: 1; } 92%, 100% { left: 116%; opacity: 0; } }
/* Bigger than every other button on the page: it is the one thing we want
   pressed (Furi, 9-1). Pill shape, one size up, full width on a phone. */
.rt-fr-ctas .rt-fr-btn--give { font-size: 1.3rem; padding: 18px 46px; border-radius: 999px; letter-spacing: .03em; }
.rt-fr-ctas .rt-fr-btn--give i { margin-right: .3em; }
.rt-fr-btn--give.is-pressed { transform: translateY(1px) scale(.98); }
/* Glints: small four-point stars that twinkle at the edges of the face, each
   on its own beat, so the button sparkles as well as shines. */
.rt-fr-glint { position: absolute; z-index: 1; width: 10px; height: 10px; pointer-events: none; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 4px #fff); opacity: 0; animation: rt-fr-twinkle 2.6s ease-in-out infinite; }
.rt-fr-glint:nth-of-type(1) { top: 12%; right: 8%; }
.rt-fr-glint:nth-of-type(2) { bottom: 14%; left: 10%; width: 8px; height: 8px; animation-delay: .9s; }
.rt-fr-glint:nth-of-type(3) { top: 20%; left: 33%; width: 6px; height: 6px; animation-delay: 1.7s; }
.rt-fr-glint:nth-of-type(4) { bottom: 18%; right: 30%; width: 7px; height: 7px; animation-delay: 2.1s; }
@keyframes rt-fr-twinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 50% { opacity: 1; transform: scale(1.25) rotate(45deg); } }
@media (max-width: 720px) { .rt-fr-ctas .rt-fr-btn--give { width: 100%; text-align: center; font-size: 1.2rem; padding: 16px 24px; } }

/* ---- Comet moments (what a gift funds) ---- */
.rt-fr-moments { margin: 2rem auto 0; max-width: 760px; padding: 1.2rem 1.4rem 1rem; border: 3px solid var(--fr-primary); border-radius: 18px; background: var(--fr-paper); }
.rt-fr-moments-title { margin: 0 0 .6rem; text-align: center; font-family: var(--fr-display); font-weight: var(--rt-font-display-weight, 700); font-size: clamp(1.2rem, 2.4vw, 1.6rem); letter-spacing: .05em; text-transform: uppercase; color: var(--fr-primary); }
.rt-fr-moments-title i { color: var(--fr-primary); margin-left: .3em; }
.rt-fr-moments ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1.5rem; }
.rt-fr-moments li { display: flex; align-items: center; gap: .8em; padding: .55rem .2rem; border-bottom: 2px dotted var(--fr-primary); font-weight: 600; color: var(--fr-ink); }
.rt-fr-moments li i { font-size: 1.5rem; width: 1.4em; text-align: center; color: var(--fr-primary); }
.rt-fr-moments li:nth-child(4n+1) i { color: #e0433a; } .rt-fr-moments li:nth-child(4n+2) i { color: #f28c28; } .rt-fr-moments li:nth-child(4n+3) i { color: var(--fr-bright); } .rt-fr-moments li:nth-child(4n) i { color: var(--fr-gold); }

/* ---- Prizes (flyer cards: star badge, uppercase title, dotted rules) ---- */
.rt-fr-prize-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.rt-fr-prize { position: relative; background: var(--fr-paper); border-radius: 18px; padding: 1rem 1.1rem 1.1rem; box-shadow: 0 10px 28px rgba(29,73,124,.14); transition: transform .25s; display: grid; grid-template-columns: 64px 1fr; gap: .2rem .9rem; align-items: start; }
.rt-fr-prize:hover { transform: translateY(-4px) rotate(-.4deg); }
.rt-fr-prize.has-leader { border: 3px solid var(--fr-gold); }
.rt-fr-prize-badge { grid-row: 1 / span 3; position: relative; width: 64px; height: 64px; display: grid; place-items: center; color: #fff; font-family: var(--fr-display); font-weight: var(--rt-font-display-weight, 700); font-size: 1rem; letter-spacing: .02em; }
.rt-fr-prize-badge::before { content: ""; position: absolute; inset: 0; background: var(--fr-primary); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); filter: drop-shadow(0 3px 4px rgba(0,0,0,.2)); }
.rt-fr-prize-badge span { position: relative; z-index: 1; padding-top: 6px; }
.rt-fr-prize--student_2 .rt-fr-prize-badge::before, .rt-fr-prize--class_1 .rt-fr-prize-badge::before { background: var(--fr-silver); }
.rt-fr-prize--unique_donors .rt-fr-prize-badge::before { background: var(--fr-bright); }
.rt-fr-prize-head { margin: .1rem 0 0; font-family: var(--fr-display); font-weight: var(--rt-font-display-weight, 700); font-size: 1.3rem; letter-spacing: .05em; text-transform: uppercase; color: var(--fr-primary); line-height: 1.05; }
.rt-fr-prize-what { margin: 0; font-family: var(--fr-display); font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; color: var(--fr-ink); line-height: 1.15; }
.rt-fr-prize-lead-word { grid-column: 1 / -1; margin: .6rem 0 0; padding-top: .6rem; border-top: 2px dotted var(--fr-primary); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--fr-primary); }
.rt-fr-prize-lead-word.is-open { color: var(--fr-silver); }
.rt-fr-prize-leaders { grid-column: 1 / -1; list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .4rem; }
.rt-fr-prize-leaders li { display: grid; grid-template-columns: 1fr auto; gap: 0 .5rem; align-items: center; padding: .5rem .7rem; border-radius: 12px; background: var(--fr-sky); }
.rt-fr-prize-leaders li b { grid-column: 1; color: var(--fr-ink); }
.rt-fr-prize-leaders li span { grid-column: 1; font-size: .8rem; opacity: .8; }
.rt-fr-prize-leaders li em { grid-column: 2; grid-row: 1 / span 2; font-style: normal; font-family: var(--fr-display); font-size: 1.2rem; color: var(--fr-primary); }
.rt-fr-tie-note { margin: .9rem 0 0; font-size: .85rem; opacity: .75; text-align: center; }

/* ---- Leaderboards ---- */
.rt-fr-boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 2.5rem; }
.rt-fr-list { list-style: none; margin: 0; padding: 0; }
.rt-fr-row { display: grid; grid-template-columns: 4.4em 1fr auto; gap: .8rem; align-items: center; padding: .6rem .5rem; border-bottom: 2px dotted color-mix(in srgb, var(--fr-primary) 45%, transparent); }
.rt-fr-row.is-top { background: var(--fr-sky); border-radius: 12px; border-bottom-color: transparent; margin-bottom: 2px; }
.rt-fr-rank { display: flex; align-items: center; gap: .3em; font-family: var(--fr-display); font-weight: var(--rt-font-display-weight, 700); font-size: 1.05rem; letter-spacing: .04em; color: var(--fr-ink); }
.rt-fr-rank i { font-size: 1.1rem; }
.rt-fr-rank small { font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.is-top-1 .rt-fr-rank i { color: var(--fr-gold); } .is-top-2 .rt-fr-rank i { color: var(--fr-silver); } .is-top-3 .rt-fr-rank i { color: #c47a3d; }
.rt-fr-who { display: grid; }
.rt-fr-who b { color: var(--fr-ink); }
.rt-fr-who span { font-size: .8rem; opacity: .75; }
.rt-fr-sum { font-family: var(--fr-display); font-size: 1.25rem; color: var(--fr-primary); }
.rt-fr-more, .rt-fr-fresh, .rt-fr-empty { text-align: center; opacity: .75; font-size: .9rem; }
.rt-fr-fresh { margin-top: 2rem; }
.rt-fr-thanks { margin: 2.5rem 0 0; text-align: center; font-family: var(--fr-display); font-weight: var(--rt-font-display-weight, 700); font-size: clamp(1.3rem, 3vw, 2rem); letter-spacing: .06em; text-transform: uppercase; color: var(--fr-primary); }
.rt-fr-thanks i { margin-left: .3em; }

/* ---- Home strip ---- */
.rt-fr-banner { background: linear-gradient(120deg, var(--fr-ink), var(--fr-primary) 55%, var(--fr-bright)); color: #fff; }
.rt-fr-banner--home { position: relative; z-index: 2; }
.rt-fr-banner-inner { max-width: min(1440px, 94vw); margin: 0 auto; padding: .9rem 0; display: grid; grid-template-columns: minmax(200px, 1fr) minmax(260px, 1.4fr) auto; gap: 1rem 2rem; align-items: center; }
.rt-fr-banner .rt-fr-kicker { display: block; font-family: var(--fr-display); font-weight: var(--rt-font-display-weight, 700); font-size: 1.5rem; letter-spacing: .05em; text-transform: uppercase; line-height: 1; }
.rt-fr-banner .rt-fr-tagline { display: block; opacity: .92; font-size: .9rem; margin-top: .3rem; }
.rt-fr-banner .rt-fr-countdown { background: rgba(255,255,255,.18); color: #fff; margin-top: .5rem; font-size: .75rem; padding: .3em .9em; }
.rt-fr-banner .rt-fr-countdown.is-soon { background: var(--fr-gold); color: #1a1a1a; }
.rt-fr-banner .rt-fr-countdown.is-now { background: #d63c2f; }
.rt-fr-banner .rt-fr-raised, .rt-fr-banner .rt-fr-raised-word, .rt-fr-banner .rt-fr-goal, .rt-fr-banner .rt-fr-mark, .rt-fr-banner .rt-fr-mark.is-hit { color: #fff; }
.rt-fr-banner .rt-fr-bar { background: rgba(255,255,255,.22); box-shadow: none; }
.rt-fr-banner .rt-fr-fill { background: linear-gradient(90deg, #fff, var(--fr-gold)); box-shadow: 0 0 16px rgba(160,170,178,.5); }
.rt-fr-banner .rt-fr-ctas { margin: 0; justify-content: flex-end; }
.rt-fr-banner .rt-btn--ghost { color: #fff; border-color: rgba(255,255,255,.7); }
@media (max-width: 860px) { .rt-fr-banner-inner { grid-template-columns: 1fr; text-align: center; gap: .6rem; padding: 1rem 0; } .rt-fr-banner .rt-fr-numbers, .rt-fr-progress--compact .rt-fr-numbers, .rt-fr-banner .rt-fr-ctas { justify-content: center; } }
/* On the blue banner the give button inverts: a white pill with brand text
   and blue glints, so it is not blue on blue (Furi, 9-1). */
.rt-fr-banner .rt-fr-btn--give { background: #fff !important; color: var(--fr-primary) !important; border-color: #fff !important; box-shadow: 0 8px 22px rgba(0,0,0,.28); }
.rt-fr-banner .rt-fr-btn--give:hover { background: var(--fr-sky) !important; }
.rt-fr-banner .rt-fr-btn--give i { color: var(--fr-primary); }
.rt-fr-banner .rt-fr-btn--give::after { background: linear-gradient(100deg, transparent, rgba(37,102,182,.3), transparent); }
.rt-fr-banner .rt-fr-glint { background: var(--fr-bright); filter: drop-shadow(0 0 4px var(--fr-bright)); }
/* Phones: the banner runs edge to edge (no white arch slivers beside it), the
   bar keeps room for its end labels, and the two buttons stack at one width. */
@media (max-width: 768px) {
  .rt-fr-banner--home { width: 100vw; margin-left: calc(50% - 50vw); }
  .rt-fr-banner-inner { max-width: none; padding: 1.1rem 5vw 1.2rem; gap: .5rem; }
  .rt-fr-banner .rt-fr-kicker { font-size: 1.35rem; }
  .rt-fr-banner .rt-fr-tagline { font-size: .88rem; line-height: 1.35; }
  .rt-fr-progress--compact .rt-fr-bar { margin: .5rem 2.4em 1.9rem; }
  .rt-fr-progress--compact .rt-fr-mark { width: 4.6em; }
  .rt-fr-progress--compact .rt-fr-mark b { font-size: .56rem; letter-spacing: .04em; }
  .rt-fr-banner .rt-fr-ctas { flex-direction: column; align-items: center; gap: .6rem; margin-top: .2rem; }
  .rt-fr-banner .rt-fr-ctas .rt-btn, .rt-fr-banner .rt-fr-ctas .rt-fr-btn--give { width: min(100%, 320px); text-align: center; font-size: 1.05rem; padding: 14px 24px; }
  .rt-fr-bar { margin-left: 2.6em; margin-right: 2.6em; }
  .rt-fr-mark { width: 5em; }
  .rt-fr-mark b { font-size: .68rem; }
}

/* ---- Tracker page shell ---- */
.rt-fr-tracker { max-width: min(1200px, 94vw); margin: 0 auto; }

/* ---- Detail block ---- */
.rt-fr-detail { margin: 1rem 0 1.5rem; padding: 1.2rem 1.4rem; border-radius: 18px; background: var(--fr-sky); text-align: center; }

/* ---- Celebration canvas ---- */
@media (prefers-reduced-motion: reduce) { .rt-fr-fill { transition: none; } .rt-fr-fill::after, .rt-fr-countdown.is-now, .rt-fr-mark.is-fresh, .rt-fr-comet::after, .rt-fr-btn--give::after, .rt-fr-glint { animation: none; } }

/* The record to beat, under the raised/goal numbers. */
.rt-fr-record { margin: .15rem 0 .6rem; font-size: .95rem; font-weight: 700; letter-spacing: .02em; color: var(--rt-gray, #6b6b6b); }
.rt-fr-record i { color: var(--rt-primary-bright, #229ce0); margin-right: .25rem; }
.rt-fr-record.is-broken { color: var(--rt-primary-bright, #229ce0); font-size: 1.15rem; animation: rt-fr-pop .6s ease-out; }
.rt-fr-record.is-broken span { display: block; font-size: .8rem; font-weight: 600; color: var(--rt-gray, #6b6b6b); }

/* A prize every student can earn, not a race for one. */
.rt-fr-everyone {
  margin: 14px 0 0;
  padding: 10px 16px;
  border: 2px dashed var(--rt-primary, #2566b6);
  border-radius: var(--rt-radius, 10px);
  text-align: center;
  font-weight: 700;
}
.rt-fr-everyone i { margin-right: .4em; color: var(--rt-primary, #2566b6); }

/* The questions families ask, folded so the page stays scannable. */
.rt-fr-faq { margin: 26px 0 0; }
.rt-fr-faq-item {
  border: 1px solid var(--rt-line, #e2e8f0);
  border-radius: var(--rt-radius, 10px);
  padding: 10px 16px;
  margin: 0 0 8px;
  background: var(--rt-paper, #fff);
}
.rt-fr-faq-item summary { font-weight: 700; cursor: pointer; }
.rt-fr-faq-item p { margin: 8px 0 0; }

/* ---- The everyone prize and its treasure chest ----
   Under the ranked prizes: the line every student can cross, how many have
   crossed it, and a mobile-game style chest that hands out a pretend
   mystery prize for fun (the real one needs the real gift; the fine print
   says so). The chest is HTML, not SVG, so the lid can swing in 3D. */
.rt-fr-everyone-wrap { margin: 14px 0 0; }
.rt-fr-everyone-wrap .rt-fr-everyone { margin: 0; }
.rt-fr-everyone-count { margin: .5rem 0 0; text-align: center; font-family: var(--fr-display); font-weight: var(--rt-font-display-weight, 700); font-size: clamp(1.15rem, 2.4vw, 1.5rem); letter-spacing: .04em; text-transform: uppercase; color: var(--fr-primary); }
.rt-fr-everyone-count b { display: inline-block; min-width: 1.6em; padding: 0 .35em; border-radius: 8px; background: var(--fr-primary); color: #fff; }
.rt-fr-everyone-count.is-open { color: var(--fr-ink); font-size: 1rem; letter-spacing: .03em; }

.rt-fr-chest { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: .6rem 1.2rem; align-items: center; max-width: 640px; margin: 14px auto 0; padding: 14px 18px 12px; border-radius: var(--rt-radius, 10px); background: var(--fr-sky); }
.rt-fr-chest-btn { position: relative; display: grid; justify-items: center; gap: .5rem; padding: .5rem .2rem .2rem; border: 0; background: none; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rt-fr-chest-scene { position: relative; display: block; width: 150px; height: 118px; perspective: 520px; transition: transform .2s ease; }
.rt-fr-chest-btn:hover .rt-fr-chest-scene, .rt-fr-chest-btn:focus-visible .rt-fr-chest-scene { transform: translateY(-3px); }
.rt-fr-chest:not(.is-open) .rt-fr-chest-scene { animation: rt-fr-chest-wiggle 5s ease-in-out infinite; }
@keyframes rt-fr-chest-wiggle { 0%, 86%, 100% { transform: rotate(0); } 89% { transform: rotate(-3deg); } 92% { transform: rotate(3deg); } 95% { transform: rotate(-2deg); } 98% { transform: rotate(1deg); } }
.rt-fr-chest-body, .rt-fr-chest-lid { position: absolute; left: 0; right: 0; display: block; }
.rt-fr-chest-body { bottom: 0; height: 68px; border-radius: 4px 4px 14px 14px; background: linear-gradient(180deg, var(--fr-primary) 0%, var(--fr-ink) 100%); border-top: 3px solid rgba(0,0,0,.28); box-shadow: inset 0 -7px 0 rgba(0,0,0,.2), inset 0 3px 0 rgba(255,255,255,.1), 0 10px 20px rgba(0,0,0,.22); z-index: 3; }
.rt-fr-chest-lid { top: 10px; height: 48px; border-radius: 44px 44px 4px 4px / 34px 34px 4px 4px; background: linear-gradient(180deg, #fff 0%, var(--fr-bright) 4%, var(--fr-bright) 45%, var(--fr-primary) 100%); box-shadow: inset 0 4px 0 rgba(255,255,255,.28), inset 0 -5px 0 rgba(0,0,0,.16), 0 3px 8px rgba(0,0,0,.25); transform-origin: 50% 100%; transform: rotateX(0); transition: transform .6s cubic-bezier(.2, .9, .3, 1.15); z-index: 2; }
/* Silver bands on the lid and the body. */
.rt-fr-chest-body::before, .rt-fr-chest-body::after, .rt-fr-chest-lid::before, .rt-fr-chest-lid::after { content: ""; position: absolute; top: 0; bottom: 0; width: 15px; background: linear-gradient(90deg, #9aa3ad, #eef2f5 50%, #9aa3ad); box-shadow: 0 0 0 1px rgba(0,0,0,.14); }
.rt-fr-chest-body::before, .rt-fr-chest-lid::before { left: 24px; }
.rt-fr-chest-body::after, .rt-fr-chest-lid::after { right: 24px; }
.rt-fr-chest-lid::before, .rt-fr-chest-lid::after { top: 2px; border-radius: 6px 6px 0 0; }
.rt-fr-chest-lock { position: absolute; left: 50%; top: -16px; z-index: 4; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; transform: translateX(-50%); background: radial-gradient(circle at 35% 32%, #f7f9fb, #a9b2ba 72%); color: var(--fr-primary); font-size: 18px; box-shadow: 0 2px 6px rgba(0,0,0,.32), inset 0 -2px 0 rgba(0,0,0,.12); }
.rt-fr-chest-glow { position: absolute; left: 14px; right: 14px; top: 26px; height: 54px; z-index: 1; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255,240,170,.98), rgba(255,220,110,.45) 55%, transparent 74%); opacity: 0; transform: scaleY(.25); filter: blur(2px); transition: opacity .35s .25s ease, transform .5s .25s ease; }
.rt-fr-chest.is-open .rt-fr-chest-lid { transform: rotateX(112deg); }
.rt-fr-chest.is-open .rt-fr-chest-glow { opacity: 1; transform: scaleY(1); }
.rt-fr-chest-glint { position: absolute; z-index: 5; width: 10px; height: 10px; pointer-events: none; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 4px #fff); opacity: 0; animation: rt-fr-twinkle 2.4s ease-in-out infinite; }
.rt-fr-chest-glint:nth-child(1) { top: 6px; right: 18px; }
.rt-fr-chest-glint:nth-child(2) { top: 40px; left: 4px; width: 8px; height: 8px; animation-delay: .8s; }
.rt-fr-chest-glint:nth-child(3) { bottom: 10px; right: 6px; width: 7px; height: 7px; animation-delay: 1.5s; }
.rt-fr-chest.is-open .rt-fr-chest-glint { width: 14px; height: 14px; animation-duration: 1.2s; }
.rt-fr-chest-cta { font-family: var(--fr-display); font-weight: var(--rt-font-display-weight, 700); font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fr-primary); }
.rt-fr-chest-wait { margin: 0; text-align: center; font-weight: 700; color: var(--fr-ink); opacity: .85; }
.rt-fr-chest-prize { display: grid; justify-items: center; gap: .35rem; text-align: center; animation: rt-fr-chest-pop .55s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes rt-fr-chest-pop { 0% { opacity: 0; transform: translateY(24px) scale(.6); } 100% { opacity: 1; transform: none; } }
.rt-fr-chest-prize-art { display: grid; place-items: center; width: 124px; height: 124px; overflow: hidden; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px var(--fr-primary), 0 0 0 9px #fff, 0 10px 24px rgba(0,0,0,.16); color: var(--fr-primary); font-size: 3rem; }
.rt-fr-chest-prize-art img { width: 100%; height: 100%; object-fit: cover; }
.rt-fr-chest-prize b { font-family: var(--fr-display); font-weight: var(--rt-font-display-weight, 700); font-size: 1.3rem; letter-spacing: .04em; text-transform: uppercase; color: var(--fr-ink); }
.rt-fr-chest-again { font-size: .8rem; opacity: .75; }
.rt-fr-chest-fine { grid-column: 1 / -1; margin: .2rem 0 0; padding-top: .6rem; border-top: 1px dashed rgba(0,0,0,.15); font-size: .82rem; line-height: 1.45; text-align: center; opacity: .9; }
@media (max-width: 640px) {
  .rt-fr-chest { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 12px 14px 10px; }
  .rt-fr-chest-prize-art { width: 104px; height: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  .rt-fr-chest:not(.is-open) .rt-fr-chest-scene, .rt-fr-chest-glint { animation: none; }
  .rt-fr-chest-lid, .rt-fr-chest-glow { transition: none; }
  .rt-fr-chest-prize { animation: none; }
}

/* ---- Tracker pages: a sky band up top, alternating sections below ----
   The head becomes a brand band (primary into ink over the site's sky, the
   band background from Announcements, when it has one) with a few twinkle
   points; the numbers, bar and marks go white. Each section after it takes
   turns: a white card, then a light blue tint, so the page reads in bands
   instead of one long white sheet. Ink stays dark on every light section. */
.rt-fr-tracker > .rt-fr-head, .rt-mb-tracker > .rt-fr-head { position: relative; overflow: hidden; margin: 0 0 1.4rem; padding: 1.5rem 1.4rem 1.3rem; border-radius: 18px; color: #fff; background-color: var(--fr-ink); background-image: linear-gradient(135deg, color-mix(in srgb, var(--fr-primary) 74%, transparent), color-mix(in srgb, var(--fr-ink) 84%, transparent)), var(--rt-sky, none); background-size: auto, cover; background-position: center; box-shadow: 0 12px 34px rgba(0,0,0,.22); }
.rt-fr-tracker > .rt-fr-head::before, .rt-mb-tracker > .rt-fr-head::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(circle, #fff 0 1.6px, rgba(255,255,255,0) 2.6px), radial-gradient(circle, #fff 0 1.1px, rgba(255,255,255,0) 2px), radial-gradient(circle, #fff 0 2px, rgba(255,255,255,0) 3.2px), radial-gradient(circle, #fff 0 1.2px, rgba(255,255,255,0) 2.2px), radial-gradient(circle, #fff 0 1.5px, rgba(255,255,255,0) 2.6px), radial-gradient(circle, #fff 0 1px, rgba(255,255,255,0) 2px);
  background-repeat: no-repeat; background-position: 5% 22%, 12% 78%, 24% 14%, 76% 82%, 88% 18%, 95% 66%; animation: rt-fr-sky-twinkle 3s ease-in-out infinite; }
@keyframes rt-fr-sky-twinkle { 0%, 100% { opacity: .3; } 50% { opacity: .7; } }
.rt-fr-tracker > .rt-fr-head > *, .rt-mb-tracker > .rt-fr-head > * { position: relative; z-index: 1; }
.rt-fr-tracker > .rt-fr-head .rt-fr-tagline-band, .rt-mb-tracker > .rt-fr-head .rt-fr-tagline-band { background: rgba(255,255,255,.95); color: var(--fr-primary); }
.rt-fr-tracker > .rt-fr-head .rt-fr-raised, .rt-fr-tracker > .rt-fr-head .rt-fr-raised-word, .rt-fr-tracker > .rt-fr-head .rt-fr-goal, .rt-fr-tracker > .rt-fr-head .rt-fr-togo, .rt-fr-tracker > .rt-fr-head .rt-fr-mark, .rt-fr-tracker > .rt-fr-head .rt-fr-mark.is-hit, .rt-fr-tracker > .rt-fr-head .rt-fr-mark b, .rt-fr-tracker > .rt-fr-head .rt-fr-mark small, .rt-fr-tracker > .rt-fr-head .rt-fr-mark i, .rt-fr-tracker > .rt-fr-head .rt-fr-mark.is-hit i, .rt-fr-tracker > .rt-fr-head .rt-fr-togo em, .rt-fr-tracker > .rt-fr-head .rt-fr-stats li, .rt-fr-tracker > .rt-fr-head .rt-fr-stats b, .rt-fr-tracker > .rt-fr-head .rt-fr-record, .rt-fr-tracker > .rt-fr-head .rt-fr-record i, .rt-fr-tracker > .rt-fr-head .rt-fr-record.is-broken span, .rt-mb-tracker > .rt-fr-head .rt-fr-togo em, .rt-mb-tracker > .rt-fr-head .rt-fr-record, .rt-mb-tracker > .rt-fr-head .rt-fr-record i,
.rt-mb-tracker > .rt-fr-head .rt-fr-raised, .rt-mb-tracker > .rt-fr-head .rt-fr-raised-word, .rt-mb-tracker > .rt-fr-head .rt-fr-goal, .rt-mb-tracker > .rt-fr-head .rt-fr-togo, .rt-mb-tracker > .rt-fr-head .rt-fr-mark, .rt-mb-tracker > .rt-fr-head .rt-fr-mark.is-hit, .rt-mb-tracker > .rt-fr-head .rt-fr-mark b, .rt-mb-tracker > .rt-fr-head .rt-fr-mark small, .rt-mb-tracker > .rt-fr-head .rt-fr-mark i, .rt-mb-tracker > .rt-fr-head .rt-fr-mark.is-hit i, .rt-mb-tracker > .rt-fr-head .rt-fr-stats li, .rt-mb-tracker > .rt-fr-head .rt-fr-stats b, .rt-mb-tracker > .rt-fr-head .rt-mb-vs { color: #fff; opacity: 1; }
.rt-fr-tracker > .rt-fr-head .rt-fr-raised, .rt-mb-tracker > .rt-fr-head .rt-fr-raised { text-shadow: 0 2px 10px rgba(0,0,0,.25); }
.rt-fr-tracker > .rt-fr-head .rt-fr-mark:not(.is-hit), .rt-mb-tracker > .rt-fr-head .rt-fr-mark:not(.is-hit) { opacity: .6; }
.rt-fr-tracker > .rt-fr-head .rt-fr-mark.is-hit i, .rt-mb-tracker > .rt-fr-head .rt-fr-mark.is-hit i { filter: drop-shadow(0 0 8px rgba(255,255,255,.8)); }
.rt-fr-tracker > .rt-fr-head .rt-fr-mark.is-latest::before, .rt-mb-tracker > .rt-fr-head .rt-fr-mark.is-latest::before { box-shadow: 0 0 0 3px #fff, 0 0 18px #fff; animation: none; }
.rt-fr-tracker > .rt-fr-head .rt-fr-bar, .rt-mb-tracker > .rt-fr-head .rt-fr-bar { background: rgba(255,255,255,.22); box-shadow: none; }
.rt-fr-tracker > .rt-fr-head .rt-fr-fill, .rt-mb-tracker > .rt-fr-head .rt-fr-fill { background: linear-gradient(90deg, #fff, var(--fr-gold)); box-shadow: 0 0 16px rgba(255,255,255,.5); }
.rt-fr-tracker > .rt-fr-head .rt-fr-countdown, .rt-mb-tracker > .rt-fr-head .rt-fr-countdown { background: rgba(255,255,255,.18); color: #fff; }
.rt-fr-tracker > .rt-fr-head .rt-fr-countdown.is-soon, .rt-mb-tracker > .rt-fr-head .rt-fr-countdown.is-soon { background: var(--fr-gold); color: #1a1a1a; }
.rt-fr-tracker > .rt-fr-head .rt-fr-btn--give, .rt-mb-tracker > .rt-fr-head .rt-fr-btn--give { background: #fff !important; color: var(--fr-primary) !important; border-color: #fff !important; box-shadow: 0 8px 22px rgba(0,0,0,.28) !important; }
.rt-fr-tracker > .rt-fr-head .rt-fr-btn--give i, .rt-mb-tracker > .rt-fr-head .rt-fr-btn--give i { color: var(--fr-primary); }
.rt-fr-tracker > .rt-fr-head .rt-btn--ghost, .rt-mb-tracker > .rt-fr-head .rt-btn--ghost { color: #fff; border-color: rgba(255,255,255,.7); }
.rt-fr-tracker > .rt-fr-head .rt-fr-stats li, .rt-mb-tracker > .rt-fr-head .rt-fr-stats li { background: rgba(255,255,255,.14); border-radius: 999px; padding: .35rem .9rem; }
.rt-fr-tracker > .rt-fr-head .rt-fr-record, .rt-mb-tracker > .rt-fr-head .rt-fr-record { opacity: .88; }
/* The sections take turns. */
.rt-fr-tracker > :is(section, .rt-fr-boards), .rt-mb-tracker > section { margin: 1.2rem 0 0; padding: 1.2rem 1.3rem 1.6rem; border-radius: 18px; border: 1px solid var(--rt-line, #dcddde); background: #fff; }
.rt-fr-tracker > :is(section, .rt-fr-boards):nth-child(odd), .rt-mb-tracker > section:nth-child(odd) { background: linear-gradient(180deg, color-mix(in srgb, var(--fr-primary) 10%, #fff), color-mix(in srgb, var(--fr-primary) 4%, #fff)); border-color: color-mix(in srgb, var(--fr-primary) 22%, #fff); }
.rt-fr-tracker > :is(section, .rt-fr-boards) > .rt-fr-h2:first-child, .rt-mb-tracker > section > .rt-fr-h2:first-child { margin-top: .3rem; }
@media (max-width: 640px) { .rt-fr-tracker > .rt-fr-head, .rt-mb-tracker > .rt-fr-head { padding: 1.1rem .9rem 1rem; border-radius: 14px; } .rt-fr-tracker > :is(section, .rt-fr-boards), .rt-mb-tracker > section { padding: 1rem .8rem 1.2rem; border-radius: 14px; } }
@media (prefers-reduced-motion: reduce) { .rt-fr-tracker > .rt-fr-head::before, .rt-mb-tracker > .rt-fr-head::before { animation: none; } }

/* ---- Leaderboard podium: gold, silver, bronze that actually shine ----
   The top three rows wear metal: a brushed gradient that drifts, a light
   sweep that crosses every few seconds, and a few twinkle points. Ink stays
   dark on all three so names and totals read; the medal icon takes the
   deep metal tone with a soft glow. Gold here is the medal, not a brand color. */
.rt-fr-row.is-top { position: relative; overflow: hidden; isolation: isolate; border: 1px solid transparent; background-size: 220% 100%; animation: rt-fr-metal 6s ease-in-out infinite; }
.rt-fr-row.is-top > * { position: relative; z-index: 2; }
.rt-fr-row.is-top-1 { background-image: linear-gradient(110deg, #f3d55b 0%, #fff4b8 22%, #e2b52e 45%, #fff7c9 62%, #ecc84a 80%, #fbe58a 100%); border-color: #d2a52a; box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 4px 16px rgba(210,165,42,.4); }
.rt-fr-row.is-top-2 { background-image: linear-gradient(110deg, #d9dde2 0%, #ffffff 22%, #bfc5cc 45%, #f9fafb 62%, #cdd2d8 80%, #eef0f2 100%); border-color: #aab1b9; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 16px rgba(120,130,140,.3); }
.rt-fr-row.is-top-3 { background-image: linear-gradient(110deg, #e0a068 0%, #f8dcbd 22%, #c9803f 45%, #f6d5b0 62%, #d99457 80%, #f0c391 100%); border-color: #b5702f; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 4px 16px rgba(181,112,47,.35); }
@keyframes rt-fr-metal { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
/* The light sweep. */
.rt-fr-row.is-top::before { content: ""; position: absolute; z-index: 1; top: -40%; bottom: -40%; left: -30%; width: 22%; transform: skewX(-22deg) translateX(-120%); background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.75) 50%, rgba(255,255,255,0) 100%); animation: rt-fr-sweep 3.6s ease-in-out infinite; pointer-events: none; }
.rt-fr-row.is-top-2::before { animation-delay: .6s; }
.rt-fr-row.is-top-3::before { animation-delay: 1.2s; }
@keyframes rt-fr-sweep { 0% { transform: skewX(-22deg) translateX(-120%); } 45%, 100% { transform: skewX(-22deg) translateX(620%); } }
/* Twinkle points. */
.rt-fr-row.is-top::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, #fff 0 1.4px, rgba(255,255,255,0) 2.4px), radial-gradient(circle, #fff 0 1px, rgba(255,255,255,0) 2px), radial-gradient(circle, #fff 0 1.8px, rgba(255,255,255,0) 3px), radial-gradient(circle, #fff 0 1.1px, rgba(255,255,255,0) 2px), radial-gradient(circle, #fff 0 1.3px, rgba(255,255,255,0) 2.4px);
  background-repeat: no-repeat; background-position: 6% 30%, 14% 78%, 52% 18%, 78% 72%, 94% 36%; animation: rt-fr-twinkle 2.2s ease-in-out infinite; }
.rt-fr-row.is-top-2::after { animation-delay: .7s; }
.rt-fr-row.is-top-3::after { animation-delay: 1.4s; }
@keyframes rt-fr-twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
/* The medal: deep metal tone with a glow, so it stands off its own background. */
.rt-fr-row.is-top .rt-fr-rank i { font-size: 1.35rem; filter: drop-shadow(0 0 4px rgba(255,255,255,.9)); }
.rt-fr-row.is-top-1 .rt-fr-rank i { color: #a87d0c; }
.rt-fr-row.is-top-2 .rt-fr-rank i { color: #6f7880; }
.rt-fr-row.is-top-3 .rt-fr-rank i { color: #8a4f1c; }
.rt-fr-row.is-top .rt-fr-rank, .rt-fr-row.is-top .rt-fr-who b, .rt-fr-row.is-top .rt-fr-sum { color: #1f2430; }
.rt-fr-row.is-top .rt-fr-who span { color: #2f3540; opacity: .85; }
@media (prefers-reduced-motion: reduce) { .rt-fr-row.is-top, .rt-fr-row.is-top::before, .rt-fr-row.is-top::after { animation: none; } .rt-fr-row.is-top::before { display: none; } }