.live-event-score-slot:not([hidden]) {
  min-height: 44px;
}

.live-event-score {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  background: #0b0d10;
  color: #f4f7fa;
  border-bottom: 1px solid #1e2430;
  font-family: Manrope, Inter, ui-sans-serif, system-ui, sans-serif;
  overflow: hidden;
}

html[dir="rtl"] .live-event-score {
  font-family: "Tajawal", sans-serif;
}

.live-event-score__live {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 10px 16px;
  background: #000;
  border-right: 1px solid #222833;
  white-space: nowrap;
  z-index: 2;
}

html[dir="rtl"] .live-event-score__live {
  border-right: 0;
  border-left: 1px solid #222833;
}

.live-event-score__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e11d2e;
  box-shadow: 0 0 0 0 rgba(225, 29, 46, 0.55);
  animation: live-event-pulse 1.4s ease-out infinite;
}

@keyframes live-event-pulse {
  0% { box-shadow: 0 0 0 0 rgba(225, 29, 46, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(225, 29, 46, 0); }
  100% { box-shadow: 0 0 0 0 rgba(225, 29, 46, 0); }
}

.live-event-score__live strong {
  color: #ff3b4a;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.live-event-score__sep {
  display: none;
}

.live-event-score__event {
  font-size: 12px;
  font-weight: 750;
  color: #e8eef5;
  max-width: min(42vw, 360px);
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

a.live-event-score__event:hover {
  color: #fff;
  text-decoration: underline;
}

.live-event-score__track-wrap {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
}

.live-event-score__all {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-left: 1px solid #222833;
  color: #7dd3fc;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
  background: #000;
  z-index: 2;
}

html[dir="rtl"] .live-event-score__all {
  border-left: 0;
  border-right: 1px solid #222833;
}

.live-event-score__all:hover {
  color: #fff;
  text-decoration: underline;
}

.live-event-score__flag {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.live-event-score__flag .country-flag,
.live-event-score__flag .country-flag-img {
  width: 20px;
  height: 15px;
  border-radius: 2px;
  object-fit: cover;
}

html[dir="rtl"] .live-event-score__track-wrap {
  mask-image: linear-gradient(270deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
}

.live-event-score__track {
  --live-marquee-duration: 480s;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  padding: 8px 16px;
  animation: live-event-marquee var(--live-marquee-duration) linear infinite;
  will-change: transform;
}

html[dir="rtl"] .live-event-score__track {
  animation-name: live-event-marquee-rtl;
}

.live-event-score__track:hover {
  animation-play-state: paused;
}

@keyframes live-event-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes live-event-marquee-rtl {
  from { transform: translateX(0); }
  to { transform: translateX(50%); }
}

.live-event-score__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border: 1px solid #2a3342;
  border-radius: 999px;
  background: #141a22;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.live-event-score__chip .country-flag,
.live-event-score__chip img.country-flag {
  width: 18px;
  height: 13px;
  border-radius: 2px;
  object-fit: cover;
}

.live-event-score__name {
  color: #fff;
  font-weight: 800;
}

.live-event-score__name-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 2px;
}

.live-event-score__name-link:hover {
  text-decoration-color: #7dd3fc;
  color: #e0f2fe;
}

.live-event-score__meta {
  color: #a8b3c2;
  font-weight: 650;
}

.live-event-score__time {
  color: #7dd3fc;
  font-variant-numeric: tabular-nums;
  font-weight: 850;
}

.live-event-score__place {
  color: #fbbf24;
  font-weight: 850;
}

/* Official portraits and compact desktop race labels. */
.live-event-score__photo { width:24px; height:24px; flex:0 0 24px; border-radius:50%; object-fit:cover; background:#283241; }
.live-event-score__photo[hidden], .live-event-score__race--full, .live-event-score__nav { display:none; }
.live-event-score__all:focus-visible { outline:2px solid #7dd3fc; outline-offset:-4px; }

/* One readable result card on mobile, with controls outside the moving track. */
@media (max-width:720px) {
  .live-event-score { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; padding-bottom:8px; }
  .live-event-score__live { grid-column:1 / 3; grid-row:1; padding:10px 12px; gap:6px; border:0; max-width:calc(100vw - 154px); min-width:0; }
  html[dir="rtl"] .live-event-score__live { border:0; }
  .live-event-score__event { display:block; min-width:0; font-size:11px; }
  .live-event-score__all { grid-column:2 / 4; grid-row:1; justify-self:end; align-self:center; justify-content:center; gap:6px; box-sizing:border-box; min-height:44px; margin:5px 8px; padding:8px 10px; border:1px solid #247d9e; border-radius:8px; background:#0e5874; color:#f0faff; font-size:11px; }
  .live-event-score__all::after { content:"→"; font-size:16px; }
  html[dir="rtl"] .live-event-score__all { border:1px solid #247d9e; }
  html[dir="rtl"] .live-event-score__all::after { content:"←"; }
  .live-event-score__all:hover { background:#126b89; color:#fff; }
  .live-event-score__track-wrap { grid-column:2; grid-row:2; mask-image:none; }
  html[dir="rtl"] .live-event-score__track-wrap { mask-image:none; }
  .live-event-score__track { padding:0; gap:8px; animation:none; transition:transform .25s ease-out; }
  .live-event-score__chip { display:grid; grid-template-columns:56px minmax(0,1fr) auto; width:var(--live-card-width,calc(100vw - 88px)); box-sizing:border-box; flex:0 0 auto; gap:4px 8px; padding:8px 10px; border-radius:12px; white-space:normal; font-size:11px; }
  .live-event-score__photo { grid-column:1; grid-row:1 / 4; width:56px; height:56px; flex-basis:56px; align-self:center; }
  .live-event-score__flag { grid-column:1; grid-row:1 / 4; align-self:end; justify-self:end; z-index:1; padding:2px; border-radius:3px; background:#141a22; }
  .live-event-score__name { grid-column:2 / 4; grid-row:1; font-size:12px; line-height:1.35; white-space:normal; overflow-wrap:anywhere; }
  .live-event-score__race { grid-column:2 / 4; grid-row:2; line-height:1.35; min-height:2.7em; }
  .live-event-score__race--compact { display:none; }
  .live-event-score__race--full { display:block; }
  .live-event-score__time { grid-column:2; grid-row:3; font-size:15px; direction:ltr; unicode-bidi:isolate; text-align:start; }
  .live-event-score__place { grid-column:3; grid-row:3; text-align:end; }
  .live-event-score__nav { display:flex; align-items:center; justify-content:center; align-self:stretch; min-width:44px; min-height:44px; padding:0; border:0; border-radius:0; background:#0b0d10; color:#e8eef5; font-size:28px; cursor:pointer; box-shadow:none; }
  .live-event-score__nav--previous { grid-column:1; grid-row:2; }
  .live-event-score__nav--next { grid-column:3; grid-row:2; }
  html[dir="rtl"] .live-event-score__nav { transform:scaleX(-1); }
  .live-event-score__nav:focus-visible { outline:2px solid #7dd3fc; outline-offset:-4px; }
  .live-event-score__nav:disabled { opacity:.3; cursor:default; }
  .live-event-score button.live-event-score__nav:is(:hover,:focus,:active):not(:disabled):not(.primary) { background:#141a22; color:#e8eef5; border-color:transparent; box-shadow:none; }
}
@media (prefers-reduced-motion:reduce) {
  .live-event-score__track { animation:none; transition:none; }
  .live-event-score__pulse { animation:none; }
}