
.vm-empty { padding: clamp(12px, 3.6cqi, 22px); text-align: center; color: var(--vm-text-dim); font: 600 clamp(10px, 2.6cqi, 15px)/1.4 'Inter', sans-serif; }

.vm-chip { display: inline-flex; align-items: center; gap: clamp(4px, 1.2cqi, 8px); font: 600 clamp(10px, 2.6cqi, 15px)/1 'Inter', sans-serif; color: var(--vm-text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-dot { width: clamp(7px, 1.8cqi, 11px); height: clamp(7px, 1.8cqi, 11px); border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(0,0,0,.12) inset; }

.vm-rbadge { display: inline-flex; align-items: center; gap: clamp(4px, 1cqi, 6px); padding: clamp(2px, .6cqi, 4px) clamp(7px, 1.8cqi, 11px); border-radius: 999px; font: 700 clamp(9px, 2.2cqi, 13px)/1 'Inter', sans-serif; letter-spacing: .02em; }
.vm-rbadge.vm-live { background: var(--vm-live); color: #fff; }
.vm-rbadge.vm-done { background: var(--vm-gold); color: var(--vm-ink); }
.vm-rbadge.vm-up { background: var(--vm-chip-fill); color: var(--vm-text-dim); }
.vm-pulse { width: clamp(5px, 1.4cqi, 9px); height: clamp(5px, 1.4cqi, 9px); border-radius: 50%; background: #fff; animation: vm-pulse 1.1s infinite; }
@keyframes vm-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }

.vm-bracket { display: flex; flex-direction: column; gap: clamp(8px, 2.4cqi, 15px); padding: clamp(8px, 2.4cqi, 15px); font-family: 'Inter', sans-serif; color: var(--vm-text); }
.vm-bracket-head { display: flex; align-items: center; gap: clamp(6px, 1.6cqi, 10px); }
.vm-bracket-title { font: 800 clamp(12px, 3.2cqi, 20px)/1 'Inter', sans-serif; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.vm-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: clamp(7px, 2cqi, 12px); }
.vm-groups-solo { padding: clamp(8px, 2.4cqi, 15px); }
.vm-group { background: var(--vm-card-fill); border: 1px solid var(--vm-card-stroke); border-radius: 12px; padding: clamp(6px, 1.6cqi, 10px) clamp(7px, 2cqi, 12px); }
.vm-group-h { font: 800 clamp(9.5px, 2.4cqi, 14px)/1 'Inter', sans-serif; color: var(--vm-grass-2); margin-bottom: clamp(4px, 1.2cqi, 8px); letter-spacing: .03em; }
.vm-gtable { width: 100%; border-collapse: collapse; font: 600 clamp(9.5px, 2.4cqi, 14px)/1.3 'Inter', sans-serif; }
.vm-gtable th { font: 700 clamp(8px, 2cqi, 12px)/1 'Inter', sans-serif; color: var(--vm-text-dim); text-align: center; padding: 2px; }
.vm-gtable td { padding: clamp(2px, .6cqi, 4px) 2px; text-align: center; }
.vm-gtable .vm-gr-team { text-align: left; max-width: clamp(84px, 22cqi, 132px); }
.vm-gtable .vm-gr-rank { color: var(--vm-text-dim); width: clamp(12px, 3.2cqi, 20px); }
.vm-gtable .vm-gr-pts { font-weight: 800; }
.vm-gtable tr.vm-adv { background: linear-gradient(90deg, rgba(47,170,94,.14), transparent); }
.vm-gtable tr.vm-third { background: linear-gradient(90deg, rgba(201,162,39,.12), transparent); }
.vm-gr-gd { color: var(--vm-text-dim); }

.vm-ko { display: flex; gap: clamp(7px, 2cqi, 12px); overflow-x: auto; padding-bottom: clamp(3px, .8cqi, 5px); align-items: stretch; }
.vm-ko-col { display: flex; flex-direction: column; justify-content: center; gap: clamp(7px, 2cqi, 12px); flex: 0 0 clamp(140px, 36.8cqi, 230px); width: clamp(140px, 36.8cqi, 230px); }
.vm-ko-h { font: 800 clamp(9px, 2.2cqi, 13px)/1 'Inter', sans-serif; color: var(--vm-text-dim); text-transform: uppercase; letter-spacing: .04em; text-align: center; margin-bottom: 2px; }
.vm-ko-bronze .vm-ko-h { color: var(--vm-gold); }
.vm-ko-m { background: var(--vm-card-fill); border: 1px solid var(--vm-card-stroke); border-radius: 10px; padding: clamp(4px, 1.2cqi, 8px) clamp(6px, 1.6cqi, 10px); }

.vm-match { display: flex; align-items: center; gap: clamp(4px, 1cqi, 6px); }
.vm-match .vm-mt { flex: 1 1 0; min-width: 0; overflow: hidden; }
.vm-ko-m .vm-chip { max-width: clamp(54px, 14cqi, 86px); }
.vm-match .vm-right { justify-content: flex-end; display: flex; }
.vm-match .vm-win .vm-chip { font-weight: 800; }
.vm-match .vm-win { position: relative; }
.vm-score { font: 800 clamp(11px, 2.8cqi, 17px)/1 'Inter', sans-serif; color: var(--vm-text); white-space: nowrap; }
.vm-score i { color: var(--vm-text-dim); font-style: normal; margin: 0 2px; }
.vm-pen { font: 600 clamp(8px, 2cqi, 12px)/1 'Inter', sans-serif; color: var(--vm-text-dim); }
.vm-vs { color: var(--vm-text-dim); font: 600 clamp(9px, 2.2cqi, 13px)/1 'Inter', sans-serif; }
.vm-pending { opacity: .6; justify-content: center; }
.vm-bye .vm-byetag { font: 600 clamp(8px, 2cqi, 12px)/1 'Inter', sans-serif; color: var(--vm-text-dim); margin-left: auto; }

.vm-champ { text-align: center; padding: clamp(6px, 1.6cqi, 10px); border-radius: 12px; background: linear-gradient(90deg, rgba(201,162,39,.18), rgba(233,207,106,.10)); font: 700 clamp(11px, 2.8cqi, 17px)/1.2 'Inter', sans-serif; color: var(--vm-text); }

.vm-scoreboard { display: flex; flex-direction: column; gap: clamp(6px, 1.6cqi, 10px); padding: clamp(8px, 2.4cqi, 15px); font-family: 'Inter', sans-serif; }
.vm-sb-head { display: flex; align-items: center; gap: clamp(6px, 1.6cqi, 10px); }
.vm-sb-sub { color: var(--vm-text-dim); font: 700 clamp(9.5px, 2.4cqi, 14px)/1 'Inter', sans-serif; }
.vm-sb-card { background: var(--vm-card-fill); border: 1px solid var(--vm-card-stroke); border-radius: 12px; padding: clamp(7px, 2cqi, 12px) clamp(8px, 2.4cqi, 15px); }
.vm-sb-live { box-shadow: 0 0 0 2px rgba(224,57,43,.3); }

.vm-awards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: clamp(7px, 2cqi, 12px); padding: clamp(8px, 2.4cqi, 15px); }
.vm-award { background: var(--vm-card-fill); border: 1px solid var(--vm-card-stroke); border-radius: 14px; padding: clamp(7px, 2cqi, 12px) clamp(8px, 2.4cqi, 15px); }
.vm-award-h { display: flex; align-items: center; gap: clamp(6px, 1.6cqi, 10px); margin-bottom: clamp(6px, 1.6cqi, 10px); }
.vm-award-ic { display: inline-flex; }
.vm-award-name { font: 800 clamp(10px, 2.6cqi, 15px)/1.1 'Inter', sans-serif; color: var(--vm-text); }
.vm-award-empty { font: 600 clamp(9.5px, 2.4cqi, 14px)/1 'Inter', sans-serif; color: var(--vm-text-dim); padding: clamp(3px, .8cqi, 5px) 0; }
.vm-award-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(3px, .8cqi, 5px); }
.vm-award-list li { display: flex; align-items: center; gap: clamp(6px, 1.6cqi, 10px); font: 600 clamp(10px, 2.6cqi, 15px)/1.2 'Inter', sans-serif; color: var(--vm-text); }
.vm-aw-medal { flex: 0 0 auto; }
.vm-aw-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-aw-val { font-weight: 800; }
.vm-aw-1 { font-weight: 800; }

.vm-standings { display: flex; flex-direction: column; gap: clamp(4px, 1cqi, 6px); padding: clamp(8px, 2.4cqi, 15px); font-family: 'Inter', sans-serif; }
.vm-st-row { display: flex; align-items: center; gap: clamp(6px, 1.6cqi, 10px); }
.vm-st-rank { width: clamp(14px, 3.6cqi, 22px); text-align: center; font: 800 clamp(9.5px, 2.4cqi, 14px)/1 'Inter', sans-serif; color: var(--vm-text-dim); }
.vm-st-move { min-width: clamp(17px, 4.4cqi, 27px); text-align: center; font: 800 clamp(7.5px, 1.8cqi, 11px)/1 'Inter', sans-serif; letter-spacing: -.02em; }
.vm-st-move.is-up { color: #2faa5e; }
.vm-st-move.is-down { color: #e0566b; }
.vm-st-move.is-new { color: var(--vm-gold, #C9A227); font-size: clamp(7px, 1.6cqi, 10px); }
.vm-st-team { width: clamp(98px, 26cqi, 160px); flex: 0 0 auto; }
.vm-st-bar { flex: 1; height: clamp(7px, 1.8cqi, 11px); background: var(--vm-chip-fill); border-radius: 999px; overflow: hidden; }
.vm-st-bar i { display: block; height: 100%; border-radius: 999px; }
.vm-st-val { font: 800 clamp(9.5px, 2.4cqi, 14px)/1 'Inter', sans-serif; width: clamp(40px, 10.4cqi, 64px); text-align: right; }

.vm-finish { display: flex; flex-direction: column; gap: clamp(4px, 1cqi, 6px); padding: clamp(8px, 2.4cqi, 15px); font-family: 'Inter', sans-serif; }
.vm-finish-h { display: flex; align-items: center; gap: clamp(4px, 1.2cqi, 8px); font: 800 clamp(10px, 2.6cqi, 15px)/1 'Inter', sans-serif; color: var(--vm-text); margin-bottom: clamp(3px, .8cqi, 5px); }
.vm-fr-row { display: flex; align-items: center; gap: clamp(6px, 1.6cqi, 10px); font: 600 clamp(10px, 2.6cqi, 15px)/1.2 'Inter', sans-serif; color: var(--vm-text); }
.vm-fr-rank { width: clamp(14px, 3.6cqi, 22px); text-align: center; color: var(--vm-text-dim); font-weight: 800; }
.vm-fr-name { width: clamp(92px, 24cqi, 150px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-fr-prog { flex: 1; height: clamp(6px, 1.6cqi, 10px); background: var(--vm-chip-fill); border-radius: 999px; overflow: hidden; }
.vm-fr-prog i { display: block; height: 100%; background: var(--vm-grass-2); border-radius: 999px; }
.vm-fr-fin .vm-fr-prog i { background: var(--vm-gold); }
.vm-fr-gap { width: clamp(36px, 9.2cqi, 56px); text-align: right; font-weight: 800; }

.vm-ticker { overflow: hidden; background: var(--vm-card-fill); border: 1px solid var(--vm-card-stroke); border-radius: 10px; padding: clamp(5px, 1.4cqi, 9px) 0; }
.vm-ticker-track { display: inline-flex; gap: clamp(10px, 2.8cqi, 17px); white-space: nowrap; animation: vm-marquee 26s linear infinite; padding-left: 100%; }
.vm-tk { font: 600 clamp(10px, 2.6cqi, 15px)/1 'Inter', sans-serif; color: var(--vm-text); }
.vm-tk-sep { color: var(--vm-text-dim); }
@keyframes vm-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .vm-ticker-track { animation: none; padding-left: 8px; white-space: normal; flex-wrap: wrap; }
}

.vm-countdown { text-align: center; padding: clamp(11px, 3.2cqi, 20px) clamp(8px, 2.4cqi, 15px); font-family: 'Inter', sans-serif; }
.vm-cd-label { font: 700 clamp(9.5px, 2.4cqi, 14px)/1 'Inter', sans-serif; color: var(--vm-text-dim); text-transform: uppercase; letter-spacing: .05em; }
.vm-cd-big { font: 900 clamp(26px, 7.6cqi, 48px)/1 'Inter', sans-serif; color: var(--vm-text); margin: clamp(4px, 1.2cqi, 8px) 0; }
.vm-cd-big span { font-size: clamp(12px, 3.2cqi, 20px); font-weight: 700; color: var(--vm-text-dim); }
.vm-cd-round { margin-top: clamp(3px, .8cqi, 5px); }

.vm-comp-card { background: linear-gradient(120deg, #eaf6ee 0%, #f2efe0 55%, #f7f2e0 100%); border-color: rgba(31,138,76,.22) !important; }
[data-theme="dark"] .vm-comp-card { background: linear-gradient(120deg, #0f2a1c 0%, #163d27 55%, #2c3413 100%); }
.vm-comp-card:hover { box-shadow: 0 16px 34px -14px rgba(47,170,94,.55) !important; }
.vm-comp-card:focus-visible { outline: 2px solid #C9A227 !important; outline-offset: 2px; }
.vm-comp-card .tdf-comp-stripe { background: linear-gradient(180deg, #2faa5e 0%, #C9A227 100%) !important; }
.vm-comp-card .tdf-comp-jersey svg { filter: drop-shadow(0 3px 8px rgba(201,162,39,.45)); }
.vm-comp-card .tdf-comp-kicker { color: #1f8a4c; }
[data-theme="dark"] .vm-comp-card .tdf-comp-kicker { color: #6fe0a0; }
.vm-comp-card .tdf-comp-title { font-family: 'Inter', sans-serif !important; font-style: normal !important; font-weight: 900 !important; color: #143d27; letter-spacing: -.01em; }
[data-theme="dark"] .vm-comp-card .tdf-comp-title { color: #fff; }
.vm-comp-card .tdf-comp-desc { color: #4a5a4f; }
[data-theme="dark"] .vm-comp-card .tdf-comp-desc { color: rgba(255,255,255,.66); }
.vm-comp-card .tdf-comp-cta { color: #1f8a4c; }
[data-theme="dark"] .vm-comp-card .tdf-comp-cta { color: #C9A227; }

.vm-pitch-wrap { display: flex; flex-direction: column; height: 100%; gap: clamp(4px, 1.2cqi, 8px); container-type: inline-size; }
.vm-pitch-head { display: flex; align-items: center; gap: clamp(5px, 1.4cqi, 9px); flex: 0 0 auto; }
.vm-pitch-head svg { flex: 0 0 auto; }
.vm-pitch-title { font: 800 clamp(12px, 4cqi, 16px)/1 'Inter', sans-serif; color: var(--vm-text, #0c1024); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vm-pitch-field { position: relative; flex: 1 1 auto; min-height: 120px; border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 6px 18px rgba(0,0,0,.28); }
.vm-pitch-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vm-pitch-goal-label { position: absolute; right: 4px; top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; font: 900 clamp(7.5px, 1.8cqi, 11px)/1 'Inter', sans-serif; letter-spacing: .22em; color: rgba(255,255,255,.78); text-shadow: 0 1px 2px rgba(0,0,0,.5); pointer-events: none; }
.vm-pitch-runner { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 1px; transition: left .8s cubic-bezier(.3,.7,.3,1), top .8s ease; will-change: left, top; }
.vm-pitch-fig { line-height: 0; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.vm-pitch-runner.is-leader .vm-pitch-fig { filter: drop-shadow(0 0 7px var(--vmp-col, #C9A227)) drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.vm-pitch-chip { display: inline-flex; align-items: center; gap: clamp(3px, .8cqi, 5px); max-width: clamp(88px, 23.2cqi, 145px); padding: 1px clamp(4px, 1.2cqi, 8px); border-radius: 999px; background: rgba(12,16,36,.82); color: #fff; font: 700 clamp(8px, 1.9cqi, 11.5px)/1.4 'Inter', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 1px 4px rgba(0,0,0,.35); border-left: 3px solid var(--vmp-col, #C9A227); }
.vm-pitch-chip b { font-weight: 900; }
.vm-pitch-chip .vm-st-move { min-width: 0; }
.vm-pitch-runner.is-leader .vm-pitch-chip { background: var(--vmp-col, #C9A227); color: #0c1024; }
.vm-pitch-ball { position: absolute; transform: translate(-50%, -50%); line-height: 0; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); transition: left .8s cubic-bezier(.3,.7,.3,1); animation: vm-ball-spin 3s linear infinite; }
@keyframes vm-ball-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.vm-pitch-foot { flex: 0 0 auto; font: 700 clamp(9px, 2.2cqi, 13px)/1 'Inter', sans-serif; color: var(--vm-text-dim, #5a6270); }
.vm-pitch-foot b { color: var(--vm-text, #0c1024); }
@media (prefers-reduced-motion: reduce) { .vm-pitch-runner, .vm-pitch-ball { transition: none; } .vm-pitch-ball { animation: none; } }
