/* Scoped styles for markets page match score */
#markets-match-score { position: relative; overflow: hidden; border-radius: 12px; margin-bottom: 1rem; background-size: cover; background-position: center; background-repeat: no-repeat; }
#markets-match-score::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.5) 100%); z-index:0; }
#markets-match-score .match-score { position: relative; z-index:1; backdrop-filter: saturate(140%) blur(0px); background: rgba(255,255,255,0.08); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }

/* Typography */
#markets-match-score .match-score__title { font-weight: 600; letter-spacing: .5px; color: #fff; }
#markets-match-score .match-score__team { color: #fff; opacity: .95; transition: opacity .2s ease-in-out; }
#markets-match-score .match-score__team:hover { opacity: 1; }
#markets-match-score .match-score__value { font-size: 1.35rem; font-weight: 700; color: #ffd166; text-shadow: 0 1px 2px rgba(0,0,0,.6); display:inline-block; min-width: 1.75rem; transition: transform .18s ease, color .18s ease; }
#markets-match-score .match-score__dash { color:#fff; opacity:.9; margin: 0 .35rem; }

/* Responsive scaling */
@media (min-width: 576px) { #markets-match-score .match-score__value { font-size:1.6rem; } #markets-match-score .match-score__title { font-size:1.15rem; } }
@media (min-width: 768px) { #markets-match-score .match-score__value { font-size:1.8rem; } #markets-match-score .match-score__title { font-size:1.25rem; } }
@media (min-width: 1200px) { #markets-match-score .match-score__value { font-size:2rem; } #markets-match-score .match-score__title { font-size:1.35rem; } }

/* Match status badge styles */
#markets-match-score .match-status { padding:.35rem .75rem; font-weight:600; border-radius: 999px; color:#fff; background: #6c757d; box-shadow: 0 4px 12px rgba(0,0,0,.22); transition: background-color .25s ease, transform .25s ease, opacity .25s ease; display:inline-block; }
#markets-match-score .match-status.is-live { background:#28a745; animation: pulseLive 1.2s infinite ease-in-out; }
#markets-match-score .match-status.is-finished { background:#343a40; }
#markets-match-score .match-status.is-pending { background:#6c757d; }
@keyframes pulseLive { 0% { transform: scale(1); box-shadow:0 0 0 0 rgba(40,167,69,.6);} 70% { transform: scale(1.05); box-shadow:0 0 0 12px rgba(40,167,69,0);} 100% { transform: scale(1); box-shadow:0 0 0 0 rgba(40,167,69,0);} }

/* Score pop animation for goal updates */
#markets-match-score .match-score__value.pop { animation: popScore .35s ease; }
@keyframes popScore { 0% { transform: scale(1); color:#ffd166; } 50% { transform: scale(1.25); color:#ffe27a; } 100% { transform: scale(1); color:#ffd166; } }

/* Structural improvements */
#markets-match-score .match-score { padding: 1rem 1.25rem; }
#markets-match-score { border: 1px solid rgba(255,255,255,.15); }

/* Box shadow optimization */
#markets-match-score .match-score { box-shadow: 0 8px 24px rgba(0,0,0,.18); }

/* Ensure isolation */
#markets-match-score * { z-index: 1; }
#markets-match-score::before { z-index:0; }

/* Grid layout ensuring perfect center alignment */
#markets-match-score { --side-width: clamp(120px, 22vw, 260px); }
#markets-match-score .match-score__grid { display: grid; grid-template-columns: var(--side-width) 1fr var(--side-width); align-items: center; gap: 0.5rem; }
#markets-match-score .match-score__side { display: flex; flex-direction: column; justify-content: center; }
#markets-match-score .match-score__home { align-items: flex-start; text-align: left; }
#markets-match-score .match-score__away { align-items: flex-end; text-align: right; }
#markets-match-score .match-score__center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .35rem; }

/* Title and team name hierarchy */
#markets-match-score .match-score__title-small { font-size: 0.8rem; color: rgba(255,255,255,0.75); font-style: italic; margin-bottom: 0.25rem; line-height: 1; }
#markets-match-score .match-score__team-name { font-size: 1.05rem; font-weight: 700; color: #fff; max-width: 100%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Score alignment */
#markets-match-score .match-score__values { display: flex; align-items: baseline; justify-content: center; gap: 0.35rem; }

/* Responsive adjustments */
@media (max-width: 576px) { 
  #markets-match-score { --side-width: clamp(100px, 30vw, 180px); }
  #markets-match-score .match-score__team-name { font-size: 0.95rem; }
  #markets-match-score .match-score__title-small { font-size: 0.75rem; }
}