@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap";
.match{display:flex;flex-direction:column;min-width:100%;border-radius:10px;box-shadow:0 0 2px 0 #3030301a,0 4px 4px 0 #3030301a;margin-bottom:10px}
.team-wrapper .match{box-shadow:none;border-radius:0;background:none;}
.team-wrapper .grid-item{border:none}
.match .match-content h6{color:var(--color-text-primary);font-weight: 400;}
.match-content b{text-align:center;font-size:14px;font-weight:400;margin:10px 0;color:var(--white);background:#686BF4;background:linear-gradient(90deg, rgba(104, 107, 244, 0) 13%, rgba(70, 117, 212, 0.57) 36%, rgba(70, 117, 212, 0.57) 64%, rgba(104, 107, 244, 0) 87%);}
.match .live{background:var(--gradient);padding:10px 0 30px;border-radius:20px;overflow:hidden;}
.match .match-header{overflow:hidden;display:flex;width:100%;margin:0 auto;padding:5px;border-bottom:2px solid #3030301a;justify-content:space-between;align-items:center}
.match .live::before{position:absolute;content: "";width:250px;height:250px;top:-40px;left:50%;margin-left:-125px;background:url(../img/bg_circle_boom.jpg) no-repeat 0 0 / cover;mix-blend-mode:screen;opacity:.6;z-index:1}
.match .live .match-header,.match .live .border-b{border-bottom:1px solid #ffffff2e}
.match .match-header strong{color:#9e9e9e;font-weight:400;font-weight:300;font-size:14px}
.match .live .match-header strong{color:var(--whiteOpacity)}
.match .match-status{max-height:45px;opacity:1;background:var(--color-bg-alert);color:var(--color-text-alert);padding:8px 12px;border-radius:100px;left:10px;font-weight:600;font-size:14px;display:flex;align-items:center;line-height:1;margin-right:0;transition:max-height .35s ease,opacity .25s ease,padding .3s ease}
.match-status.is-hide{max-height:0;opacity:0;padding-top:0;padding-bottom:0;overflow:hidden;border:none!important}
.match .match-status{background:#ffffff91;color:var(--lightYellow);animation:livePulse 1s ease-in-out infinite}
@keyframes livePulse {
0%{background:#6187c6;box-shadow:0 0 0 #e11d4800;transform:scale(1);opacity:1}
45%{background:#dace93;box-shadow:0 0 18px #ffdeb3bf;transform:scale(1.04);opacity:1}
60%{opacity:.55}
100%{background:#ff6f2dbf;box-shadow:0 0 0 #ffac0100;transform:scale(1);opacity:1}
}
@media (prefers-reduced-motion: reduce) {
.match-status.flash{animation:none}
}
.match-status:before{content:"";display:block;width:6px;height:6px;background-color:currentcolor;border-radius:50%;margin-right:8px}
.match-tournament{display:flex;align-items:center;font-weight:600}
.match-tournament img{width:20px;margin-right:12px}
.match-actions{display:flex}
.btn-icon{border:none;background-color:transparent;color:var(--color-text-icon);display:flex;align-items:center;justify-content:center}
.column{padding:0 10px;display:flex;justify-content:center;align-items:stretch;width:100%}
.live .column{padding:0 21px}
.team{display:flex;flex-direction:column;align-items:center}
.match .team-logo{width:70px;height:70px;display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:var(--color-bg-primary);box-shadow:0 4px 4px 0 #30303026 0 0 0 15px var(--color-bg-secondary)}
.match .live .team-logo{background-color:#2ce19147}
.team-logo img{width:70px;position:relative;z-index:9}
.match h2.team-name{text-align:center;margin-top:20px;font-size:18px;font-weight:600}
.match h1{color:var(--theme);font-family:"Archivo Black",sans-serif}
.match .live h2.team-name{color:#fffc}
.match-details{display:flex;flex-direction:column;align-items:center}
.match.disable .match-details{position:relative}
.match.disable .match-time-lapsed{position:absolute;left:50%;bottom:10px;width:88px;margin-left:-44px;font-size:14px;font-weight:300;text-align:center}
.match.disable .match-time-lapsed strong{display:block;color:var(--color-text-primary)}
.team-wrapper .match .match-date{margin:10px 0;line-height:20px;color:var(--black)}
.match-date,.match-referee{font-size:16px;color:var(--color-text-secondary)}
.team-wrapper .match .match-date strong{font-size:22px}
.match-date strong,.match-referee strong{color:var(--color-text-primary)}
.match-date{text-align:center;margin:10px 0 0}
.match .live .match-date{color:var(--white)}
.match-score{margin-top:12px;display:flex;align-items:center}
.match .match-date strong{display:block;color:var(--white);font-weight:800;font-size:20px;font-family:"Archivo Black",sans-serif}
.match.disable .match-date strong,.match.disable .match-date,.match.disable h2.team-name,.match.disable .match-score-divider,.match.disable .match-time-lapsed{color:#c2bebe}
.match .live .opening::after{position:absolute;content:"开幕战";top:93%;width:50px;left:50%;margin-left:-25px;font-size:14px;background:#2f62cc;text-align:center;border-radius:5px;padding:0 3px;font-weight:400;color:var(--white)}
.match.disable .team-logo img,.match.disable .match-bet-place{opacity:.3}
.match .live .match-date strong{color:var(--white);font-size:24px}
.match.disable.grid-item{border:1px solid #eee}
.match .match-score-number{display:none;font-size:48px;font-weight:600;line-height:1;font-family:"Archivo Black",sans-serif;color:#ffffff96}
.match.disable .match-score-number{color:#b2b7bf}
.match.disable .match-score-number,.match .live .match-score-number{display:block}
.match .match-score-number--leading{color:var(--white)}
.match .live .match-score-number{color:#ffffff}
.match .live .match-score-number--leading{color:var(--white)}
.match .match-score-divider{font-size:28px;font-weight:700;line-height:1;color:var(--white);margin-left:10px;margin-right:10px;font-family:"Archivo Black",sans-serif}
.match .live .match-score-divider{color:var(--white)}
.match .match-time-lapsed{color:#ff8d64;font-size:26px;font-weight:600;margin-top:8px}
.match .live .match-time-lapsed{color:#fff10a}
.match-referee{margin-top:12px}
.match-bet-options{display:flex;margin-top:8px;padding-bottom:12px}
.match-bet-option{margin-left:4px;margin-right:4px;border:1px solid var(--color-text-icon);background-color:#F9F9F9;border-radius:2px;color:var(--color-text-secondary);font-size:14px;font-weight:600;padding:4px 8px}
.match .match-bet-place{border:none;width:95%;margin:0 auto;margin-bottom:10px;background:var(--color-theme-btn);border-radius:100px;padding:10px 9px;color:#ffffffe6;font-size:14px;box-shadow:0 4px 8px 0 #30303040;transform:scale(1);transition:.1s}
.match .match-bet-place:hover{background:#6f4bec}
.match .match-bet-place:active{transform:scale(.95)}
.match .live .match-bet-place{background:var(--color-theme-primary-live)}
#scoreNotice{display:none;opacity:0;transition:opacity .25s ease;pointer-events:none}
#scoreNotice.is-visible{display:flex;opacity:1;pointer-events:auto}
#scoreNotice.fixed{left:0;right:0;bottom:0;z-index:999}
#scoreNotice.absolute{left:0;right:0;bottom:0;z-index:1}
.circular-progress{position:absolute;width:var(--progress-bar-width);height:var(--progress-bar-height);border-radius:50%;display:flex;justify-content:center;align-items:center}
.inner-circle{position:absolute;width:calc(var(--progress-bar-width) - 10px);height:calc(var(--progress-bar-height) - 10px);border-radius:50%;background-color:#d3d3d3}
.percentage{position:relative;top:75%;font-size:var(--font-size);color:#000c}
@media screen and (max-width: 800px) {
:root{--progress-bar-width:70px;--progress-bar-height:70px;--font-size:1.2rem}
}
@media screen and (max-width: 500px) {
:root{--progress-bar-width:70px;--progress-bar-height:70px;--font-size:1.2rem}
	.team-wrapper .match{border-radius: 2.5rem;}
}