/* v0.17 Trophy Road on Journey (public/js/trophy-road.js): an upward path of
   checkpoints, highest at the top, with "you are here" between them. */
.tr-road { display: grid; gap: .5rem; }
.tr-title { margin: 0; font-size: 1.05rem; }
.tr-rules { margin: 0; font-size: .9rem; line-height: 1.35; }
.tr-steps { list-style: none; margin: 0; padding: 0 0 0 1.1rem; position: relative; display: grid; gap: .35rem; }
.tr-steps::before { content: ""; position: absolute; left: .4rem; top: .4rem; bottom: .4rem; width: 2px; background: currentColor; opacity: .25; }
.tr-step, .tr-here { position: relative; display: flex; gap: .6rem; align-items: baseline; padding: .35rem .6rem; border-radius: .5rem; }
.tr-step::before, .tr-here::before { content: ""; position: absolute; left: -.95rem; top: .75rem; width: .6rem; height: .6rem; border-radius: 50%; background: currentColor; opacity: .35; }
.tr-at { min-width: 3.2rem; font-variant-numeric: tabular-nums; }
.tr-state { font-size: .88rem; }
.tr-step.is-claimed::before, .tr-step.is-legacy::before { opacity: .9; }
.tr-step.is-pending { outline: 2px solid var(--gold, #e8b949); outline-offset: -2px; }
.tr-step.is-pending::before { background: var(--gold, #e8b949); opacity: 1; }
.tr-step.is-locked { opacity: .72; }
.tr-step.is-unknown { opacity: .6; font-style: italic; }
.tr-here { background: rgba(232, 185, 73, .16); font-weight: 600; }
.tr-here::before { background: var(--gold, #e8b949); opacity: 1; width: .75rem; height: .75rem; left: -1.02rem; top: .68rem; }
.tr-road[data-state="loading"] .tr-steps, .tr-road[data-state="unavailable"] .tr-steps { display: none; }
.tr-note { margin: 0; }
@media (prefers-reduced-motion: no-preference) { .tr-here { transition: background-color .2s ease; } }