/* race-ticker.css — shared results ticker, included by every race page.
 *
 * Two-line layout injected by /js/race-ticker.js:
 *   <div id="rhpTicker" class="rhp-ticker">
 *     <div class="rhp-ticker-row-results">
 *       <div id="rhpTickerTrack" class="rhp-ticker-track">...</div>
 *     </div>
 *     <div class="rhp-ticker-row-scratch">
 *       <div id="rhpTickerTrackScratch" class="rhp-ticker-track-scratch">...</div>
 *     </div>
 *   </div>
 *
 * Each row loops infinitely with no gap — the track contains two adjacent
 * copies of the content and the keyframe scrolls -50% of the track width,
 * landing copy B exactly on copy A's starting position.
 *
 * Line 1 — race results against the adjusted URIN top-3. Primary color,
 *          standard scroll speed.
 * Line 2 — scratch context. "R4: Solevo, Wish Man scratched from URIN lock."
 *          Subtler styling, slightly slower scroll, hidden when no race
 *          on the card has scratches.
 */

.rhp-ticker {
    overflow: hidden;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(212, 168, 83, 0.25);
    border-radius: 6px;
    padding: 0.5rem 0 0.4rem;
    margin: 0.5rem 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0.2px;
}

/* ---- Line 1: race results ---- */
.rhp-ticker-row-results {
    overflow: hidden;
}
.rhp-ticker-track {
    display: inline-block;
    white-space: nowrap;
    animation: rhp-ticker-scroll 20s linear infinite;
    will-change: transform;
}

/* ---- Line 2: scratch context ---- */
.rhp-ticker-row-scratch {
    overflow: hidden;
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.18px;
    font-weight: 500;
}
.rhp-ticker-row-scratch.tk-empty {
    display: none;
}
.rhp-ticker-track-scratch {
    display: inline-block;
    white-space: nowrap;
    animation: rhp-ticker-scroll-scratch 26s linear infinite;
    will-change: transform;
}

.rhp-ticker:hover .rhp-ticker-track,
.rhp-ticker:hover .rhp-ticker-track-scratch {
    animation-play-state: paused;
}

/* ---- Shared spans ---- */
.rhp-ticker .tk-sep         { color: rgba(212, 168, 83, 0.45); margin: 0 0.9rem; }
.rhp-ticker .tk-day         { color: #fbbf24; font-weight: 800; letter-spacing: 0.05em; margin-right: 0.4rem; }
.rhp-ticker .tk-win         { color: #86efac; font-weight: 700; }
.rhp-ticker .tk-tri         { color: #fbbf24; font-weight: 800; }
.rhp-ticker .tk-miss        { color: rgba(220, 220, 220, 0.72); }
.rhp-ticker .tk-placeholder { color: rgba(220, 220, 220, 0.6); font-style: italic; font-weight: 500; }
.rhp-ticker .tk-result-tag  { color: rgba(212, 168, 83, 0.85); font-weight: 700; letter-spacing: 0.04em; margin-right: 0.3rem; }
.rhp-ticker .tk-pos         { color: #d4a853; font-weight: 700; font-family: 'JetBrains Mono', monospace; }

/* ---- Line 2 spans ---- */
.rhp-ticker-row-scratch .tk-sep    { color: rgba(212, 168, 83, 0.30); margin: 0 0.7rem; }
.rhp-ticker-row-scratch .tk-day    { color: rgba(251, 191, 36, 0.85); font-weight: 700; letter-spacing: 0.05em; margin-right: 0.35rem; font-size: 0.95em; }
.rhp-ticker .tk-scratch-names      { color: rgba(252, 165, 165, 0.82); font-weight: 600; }
.rhp-ticker .tk-scratch-tag        { color: rgba(220, 220, 220, 0.45); font-size: 0.9em; font-weight: 500; letter-spacing: 0.4px; text-transform: uppercase; margin-left: 0.4rem; }

@keyframes rhp-ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes rhp-ticker-scroll-scratch {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

[dir="rtl"] .rhp-ticker-track,
[dir="rtl"] .rhp-ticker-track-scratch {
    animation-direction: reverse;
}

/* ---- Mobile responsive ---- */
@media (max-width: 720px) {
    .rhp-ticker             { font-size: 0.82rem; padding: 0.45rem 0 0.35rem; }
    .rhp-ticker-row-scratch { font-size: 0.68rem; margin-top: 0.3rem; padding-top: 0.3rem; }
    .rhp-ticker .tk-sep,
    .rhp-ticker-row-scratch .tk-sep { margin: 0 0.65rem; }
    .rhp-ticker .tk-scratch-tag     { font-size: 0.85em; letter-spacing: 0.3px; margin-left: 0.3rem; }
}
@media (max-width: 480px) {
    .rhp-ticker             { font-size: 0.76rem; }
    .rhp-ticker-row-scratch { font-size: 0.64rem; }
}