.ticker {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  overflow: hidden;
  position: relative;
}

.ticker__label {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 4px 10px;
  background: var(--accent);
  color: var(--ink-on-accent);
  border-radius: var(--r-xs);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
}

.ticker__viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.ticker__track {
  display: flex;
  gap: var(--s-6);
  width: max-content;
  animation: ticker-scroll 60s linear infinite;
}

.ticker:hover .ticker__track { animation-play-state: paused; }

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--ink-2);
  white-space: nowrap;
}

.ticker__item__match { color: var(--ink-1); font-weight: 600; }
.ticker__item__market { color: var(--ink-3); font-size: var(--t-xs); }
.ticker__item__odds {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--accent);
  padding: 2px 8px;
  background: var(--accent-soft);
  border-radius: var(--r-xs);
}

.ticker__item__sep { color: var(--ink-mute); }

@media (max-width: 480px) {
  .ticker { padding: var(--s-2) var(--s-3); gap: var(--s-3); }
  .ticker__label { padding: 3px 8px; font-size: var(--t-2xs); }
}