/* Hall of Fame Red Jacket: a 3D jacket that turns slowly with a red glow, plus the HOF card, race list and moment. */
.jk { --s: 170px; position: relative; flex: none; width: var(--s); height: calc(var(--s) * 1.15); perspective: 900px; }
.jk-glow { position: absolute; inset: -22%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,46,46,.55) 0%, rgba(220,20,30,.22) 38%, transparent 68%); animation: jk-pulse 3.2s ease-in-out infinite; }
.jk-floor { position: absolute; left: 22%; right: 22%; bottom: -5%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.65), transparent); animation: jk-floor 12s linear infinite; }
.jk-spin { position: absolute; inset: 0; transform-style: preserve-3d; animation: jk-spin 12s linear infinite; }
.jk-spin > svg { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.jk-spin > .jk-front { transform: translateZ(5px); }
.jk-spin > .jk-back { transform: rotateY(180deg) translateZ(5px); }
.jk-spin > .jk-mid { transform: translateZ(var(--z)); backface-visibility: visible; -webkit-backface-visibility: visible; }
@keyframes jk-spin { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
@keyframes jk-floor { 0%, 50%, 100% { transform: scaleX(1); } 25%, 75% { transform: scaleX(.6); } }
@keyframes jk-pulse { 50% { transform: scale(1.08); opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .jk-spin { animation: none; transform: rotateY(-20deg); } .jk-glow, .jk-floor { animation: none; } }
.jk-mini { display: inline-block; width: 15px; height: 17px; vertical-align: -3px; margin-left: 6px; filter: drop-shadow(0 0 4px rgba(255,40,40,.55)); }

/* Analytics: Hall of Fame card */
.hof { --red: #ff3b3b; position: relative; overflow: hidden; display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); margin-bottom: 14px; padding: 24px clamp(18px, 2.4vw, 32px);
  border-radius: var(--r-lg); border: 1px solid rgba(255,59,59,.28); background: radial-gradient(60% 120% at 100% 50%, rgba(220,20,30,.18), transparent 60%), var(--surface); }
.hof.done { border-color: rgba(255,59,59,.6); box-shadow: 0 0 40px -12px rgba(255,40,40,.55); }
.hof-main { flex: 1; min-width: 0; }
.hof-h { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 6px; font-size: 16px; font-weight: 650; }
.hof-h .ico { color: var(--red); }
.hof-yr { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-400); }
.hof-earned { padding: 3px 10px; border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: linear-gradient(115deg, #b40d17, #ff3b3b); }
.hof-amt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 10px 0 16px; }
.hof-amt b { font-family: var(--font-display); font-weight: 900; font-variant-numeric: tabular-nums; font-size: clamp(38px, 5vw, 60px); line-height: 1; }
.hof.done .hof-amt b { background: linear-gradient(180deg, #ffd0d0, #ff3b3b 55%, #9a0a12); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hof-amt span { font-size: clamp(16px, 2vw, 22px); font-weight: 650; color: var(--ink-300); }
.hof-track { position: relative; height: 12px; border-radius: 999px; background: rgba(255,255,255,.06); }
.hof-track i { position: absolute; left: 0; top: 0; bottom: 0; min-width: 12px; border-radius: inherit; background: linear-gradient(90deg, #7a0710, #e0262f 70%, #ff5a5a); box-shadow: 0 0 16px rgba(255,40,40,.55); transition: width 1.2s var(--ease-out); }
.hof-track i::after { content: ''; position: absolute; right: -2px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 0 4px rgba(255,59,59,.25), 0 0 14px rgba(255,59,59,.8); }
.hof-ticks { display: flex; justify-content: space-between; margin-top: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-400); }
.hof-ticks span:last-child { color: var(--red); font-weight: 600; }
.hof-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; font-size: 13.5px; color: var(--ink-300); }
.hof-stats b { color: var(--ink-100); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .hof { flex-direction: column-reverse; align-items: stretch; } .hof .jk { --s: 130px; align-self: center; } }

/* Admin: Hall of Fame race */
.hof-race { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hof-race li { display: grid; grid-template-columns: 28px minmax(0, 1.2fr) minmax(0, 2fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line); }
.hof-race li.done { border-color: rgba(255,59,59,.45); background: linear-gradient(100deg, rgba(220,20,30,.14), transparent 60%); }
.hof-race .n { font-family: var(--font-mono); color: var(--ink-400); }
.hof-race b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hof-race .hof-track { height: 8px; } .hof-race .hof-track i::after { width: 12px; height: 12px; margin-top: -6px; }
.hof-race .v { text-align: right; font-variant-numeric: tabular-nums; font-size: 13.5px; } .hof-race .v small { display: block; color: var(--ink-400); font-size: 11.5px; }
@media (max-width: 640px) { .hof-race li { grid-template-columns: 24px 1fr auto; } .hof-race .hof-track { grid-column: 2 / -1; grid-row: 2; } }

/* the one-time Hall of Fame moment */
.hof-moment { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; overflow: hidden; text-align: center; padding: 24px;
  background: radial-gradient(60% 60% at 50% 45%, #3a0508, #0a0203 70%); animation: hofm-in .6s ease both; }
.hof-moment.out { animation: hofm-out .5s ease forwards; }
@keyframes hofm-in { from { opacity: 0; } } @keyframes hofm-out { to { opacity: 0; } }
.hof-moment .rays { position: absolute; left: 50%; top: 45%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; opacity: .55; pointer-events: none;
  background: repeating-conic-gradient(rgba(255,60,60,.16) 0deg 6deg, transparent 6deg 18deg); -webkit-mask-image: radial-gradient(closest-side, #000 8%, transparent 70%); mask-image: radial-gradient(closest-side, #000 8%, transparent 70%); animation: hofm-spin 40s linear infinite; }
@keyframes hofm-spin { to { transform: rotate(360deg); } }
.hof-moment canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hof-moment .in { position: relative; display: flex; flex-direction: column; align-items: center; }
.hof-moment .k { font-family: var(--font-mono); letter-spacing: .5em; text-transform: uppercase; color: #ffb3b3; font-size: clamp(12px, 2vh, 20px); animation: hofm-rise .7s ease .1s both; }
.hof-moment .jk { --s: clamp(160px, 32vh, 320px); margin: clamp(14px, 3vh, 34px) 0; animation: hofm-pop 1s cubic-bezier(.2, 1.5, .4, 1) .2s both; }
.hof-moment h2 { margin: 0; font-family: var(--font-display); font-weight: 900; font-variation-settings: 'wdth' 118; text-transform: uppercase; line-height: .95; font-size: clamp(36px, 8vh, 96px);
  background: linear-gradient(180deg, #fff, #ffb0b0 40%, #ff3b3b); -webkit-background-clip: text; background-clip: text; color: transparent; animation: hofm-rise .7s ease .35s both; }
.hof-moment .who { margin-top: 12px; font-size: clamp(18px, 3.4vh, 38px); font-weight: 700; color: #fff; animation: hofm-rise .7s ease .5s both; }
.hof-moment .sub { margin-top: 6px; font-size: clamp(14px, 2vh, 20px); color: #ffc9c9; animation: hofm-rise .7s ease .6s both; }
.hof-moment .btn { margin-top: 24px; animation: hofm-rise .7s ease .8s both; }
@keyframes hofm-rise { from { opacity: 0; transform: translateY(20px); } }
@keyframes hofm-pop { from { opacity: 0; transform: scale(.3); } }