/* ==========================================================================
   GLOBAL MATCH TICKER — visible across all pages
   ========================================================================== */
.hd-ticker{
  background:linear-gradient(90deg,
    #0c1f3a 0%,
    #0e2847 12%,
    #0a3048 25%,
    #0d2240 50%,
    #1a1040 75%,
    #0c1f3a 100%
  );
  border-top:2px solid;
  border-image:linear-gradient(90deg, #00C2CB 0%, #7B61FF 25%, #FF2D7B 50%, #FFB800 75%, #00C2CB 100%) 1;
  border-bottom:1px solid rgba(255,255,255,0.06);
  overflow:hidden;
  position:relative;
}
.hd-ticker::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    rgba(0,194,203,0.06) 0%,
    rgba(123,97,255,0.04) 25%,
    rgba(255,45,123,0.04) 50%,
    rgba(255,184,0,0.04) 75%,
    rgba(0,194,203,0.06) 100%
  );
  pointer-events:none;
}
.hd-ticker-inner{
  display:flex;
  gap:0;
  align-items:stretch;
  min-height:36px;
  position:relative;
  z-index:1;
  overflow:hidden;
}
.hd-ticker-inner::-webkit-scrollbar{display:none}
.hd-ticker-live{
  display:flex;
  flex-shrink:0;
  border-right:1px solid rgba(255,255,255,0.1);
  background:rgba(239,68,68,0.06);
}
.hd-ticker-scroll{
  display:flex;
  overflow:hidden;
  flex:1;
  min-width:0;
  position:relative;
}
.hd-ticker-scroll-track{
  display:flex;
  flex-shrink:0;
  animation:hd-ticker-slide 150s linear infinite;
  will-change:transform;
}
@media (hover:hover) and (pointer:fine){
  .hd-ticker-scroll-track:hover{animation-play-state:paused}
}
@keyframes hd-ticker-slide{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
@media (prefers-reduced-motion:reduce){
  .hd-ticker-scroll-track{
    animation:none;
    flex-wrap:wrap;
    justify-content:center;
  }
}
.hd-ticker-empty{
  padding:8px 16px;
  font-size:11px;
  color:rgba(255,255,255,0.5);
  white-space:nowrap;
}
.hd-tick{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 18px;
  border-right:1px solid rgba(255,255,255,0.06);
  text-decoration:none;
  white-space:nowrap;
  flex-shrink:0;
  transition:background .12s;
}
.hd-tick:last-child{border-right:none}
.hd-tick:hover{background:rgba(0,194,203,0.08)}
.hd-tick--live{background:rgba(255,45,123,0.06)}
.hd-tick-teams{
  display:flex;
  align-items:center;
  gap:5px;
  flex-shrink:0;
}
.hd-tick-team{
  font-size:11px;
  font-weight:700;
  color:#fff;
  max-width:70px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hd-tick-teams .hd-flag,
.hd-tick-teams .team-flag-img{
  width:16px;
  height:11px;
  border-radius:1px;
  object-fit:cover;
  flex-shrink:0;
}
.hd-tick-teams .team-flag-img--fallback{
  background:#152238;
  border:1px solid rgba(255,255,255,0.12);
}
.hd-tick-score{
  font-size:12px;
  font-weight:800;
  color:#00C2CB;
  padding:0 4px;
}
.hd-tick-live{
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
  color:#fff;
  background:linear-gradient(135deg, #FF2D7B, #ef4444);
  padding:2px 5px;
  border-radius:3px;
  text-transform:uppercase;
  box-shadow:0 0 6px rgba(255,45,123,0.4);
}
.hd-tick-comp{
  font-size:10px;
  color:rgba(255,255,255,0.4);
}

/* Mobile — compact ticks, seamless fill */
@media (max-width: 767px) {
  .hd-ticker {
    min-height: 34px;
  }

  .hd-ticker-inner {
    min-height: 34px;
  }

  .hd-ticker-scroll,
  .hd-ticker-scroll--solo {
    flex: 1 1 auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  .hd-ticker-scroll--solo .hd-ticker-scroll-track {
    animation-duration: 120s;
  }

  .hd-tick {
    gap: 6px;
    padding: 7px 14px;
    min-width: 96px;
  }

  .hd-ticker-live {
    display: flex;
    flex-shrink: 0;
    border-right: 1px solid rgba(255,255,255,0.1);
    background: rgba(239,68,68,0.06);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .hd-tick-team {
    display: block;
    max-width: 52px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.15;
  }

  .hd-tick-teams {
    gap: 4px;
  }

  .hd-tick-teams .hd-flag {
    width: 18px;
    height: 13px;
  }

  .hd-tick-score {
    font-size: 10px;
    font-weight: 800;
    padding: 0 3px;
    min-width: 28px;
    text-align: center;
    letter-spacing: -0.02em;
    flex-shrink: 0;
  }

  .hd-tick-live {
    font-size: 10px;
    padding: 2px 4px;
  }

  .hd-tick--live {
    box-shadow: inset 2px 0 0 #ef4444;
  }
}