.match-timeline{--timeline-size:24px;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:5px;margin:0;padding:0;list-style:none}.match-timeline.eighteen{grid-template-columns:repeat(9,minmax(0,1fr));row-gap:7px}.match-timeline li{position:relative;display:grid;place-items:center;min-width:0;aspect-ratio:1;border:2px solid #5f7180;border-radius:50%;background:transparent;color:#91a1ad;font:800 9px/1 system-ui,sans-serif}.match-timeline li.red{border-color:#f34a5a;background:#c72034;color:#fff}.match-timeline li.blue{border-color:#45a9ee;background:#147ac2;color:#fff}.match-timeline li.half{border-color:#a6b0b7;background:#5d6871;color:#fff}.match-timeline li.provisional:after{content:"";position:absolute;inset:-4px;border:2px dotted #f4cf75;border-radius:50%}.match-timeline li.conflict{border-color:#f0b84e;background:repeating-linear-gradient(135deg,#711727 0 4px,#07568f 4px 8px);color:#fff}.match-timeline li.conflict:after{content:"!";position:absolute;right:-3px;top:-6px;width:13px;height:13px;border-radius:50%;background:#f0b84e;color:#111;text-align:center;font:900 9px/13px system-ui}.match-timeline.compact{gap:4px}.match-timeline.compact li{font-size:8px}
@media(min-width:700px){.match-timeline.eighteen{grid-template-columns:repeat(18,minmax(0,1fr))}.match-timeline li{font-size:10px}}