@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@800;900&display=swap');
*{box-sizing:border-box}html,body{margin:0;padding:0;background:transparent!important;color-scheme:normal;width:100%;height:100%;overflow:hidden}.overlay-page{display:grid;place-items:center}.scoreboard{position:relative;width:min(100vw,179.2717vh);aspect-ratio:1280/714;container-type:inline-size;isolation:isolate;overflow:hidden;background:transparent}.artwork{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}.source-video{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.live-name{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;font-family:Cairo,Tahoma,sans-serif;font-weight:900;color:#fff;line-height:1.3;text-shadow:0 .18cqw .25cqw #30004e;overflow-wrap:anywhere;overflow:hidden;padding:0 1.5%;font-size:2.55cqw}.name-right{left:70%;top:26.7%;width:22%;height:16.5%;transform:skew(-1deg)}.name-left{left:7%;top:75.2%;width:23%;height:15%}.live-score{position:absolute;top:46%;height:25%;display:flex;align-items:center;justify-content:center;font-family:Impact,'Arial Black',sans-serif;font-size:6cqw;line-height:1;color:#fff;letter-spacing:.01em;text-shadow:.18cqw .3cqw 0 #49016d;white-space:nowrap;transform-origin:center}.score-right{left:68.5%;width:22%}.score-left{left:8.5%;width:22%}
.score-effect{position:absolute;top:46%;width:22%;height:25%;pointer-events:none;--accent:#ffe779}.effect-right{left:68.5%}.effect-left{left:8.5%}.score-effect.negative{--accent:#ffa7b9}.points-change{position:absolute;top:80%;left:0;width:100%;text-align:center;direction:ltr;color:var(--accent);font-family:Cairo,Tahoma,sans-serif;font-size:1.9cqw;font-weight:900;line-height:1;text-shadow:0 .15cqw .35cqw #28003e;animation:points-rise 1s ease-out both}.score-ring{position:absolute;left:15%;top:12%;width:70%;height:76%;border:.18cqw solid var(--accent);border-radius:50%;box-shadow:0 0 1.5cqw var(--accent);animation:score-ring .65s ease-out both}.score-particle{position:absolute;left:50%;top:50%;width:.55cqw;height:.55cqw;background:var(--accent);box-shadow:0 0 .6cqw var(--accent);animation:score-spark .8s ease-out both}.score-up{animation:score-hit .6s cubic-bezier(.2,.8,.3,1)}.score-down{animation:score-loss .45s ease-out}@keyframes score-hit{0%{transform:scale(.92)}35%{transform:scale(1.2) rotate(-3deg);color:#ffe779;text-shadow:0 0 1.5cqw #ffe779}70%{transform:scale(.98) rotate(1deg)}100%{transform:none}}@keyframes score-loss{25%{transform:translateX(-.5cqw);color:#ffa7b9}50%{transform:translateX(.5cqw)}100%{transform:none}}@keyframes points-rise{0%{opacity:0;transform:translateY(.5cqw)}20%{opacity:1}100%{opacity:0;transform:translateY(-2cqw)}}@keyframes score-ring{from{opacity:.85;transform:scale(.4)}to{opacity:0;transform:scale(1.45)}}@keyframes score-spark{from{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(45deg)}to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2) rotate(160deg)}}@media(prefers-reduced-motion:reduce){html:not([data-motion=on]) *,html:not([data-motion=on]) *:before,html:not([data-motion=on]) *:after{animation:none!important;transition:none!important}html:not([data-motion=on]) .score-effect{display:none}}
.score-digit{position:absolute;display:block;transform-origin:50% 60%;will-change:transform,opacity}.score-old{animation:old-score-out .24s cubic-bezier(.4,0,1,1) both}.score-new{animation:new-score-in .52s .18s cubic-bezier(.16,1,.3,1) both}.score-new::after{content:attr(data-score);position:absolute;inset:0;color:transparent;text-shadow:none;background:linear-gradient(110deg,transparent 35%,#ffe879 44%,#fff 50%,#ffe879 56%,transparent 65%);background-size:300% 100%;background-position:150% 0;background-clip:text;-webkit-background-clip:text;animation:score-shine .65s .65s ease-in-out both;pointer-events:none}@keyframes old-score-out{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.15)}}@keyframes new-score-in{0%{opacity:0;transform:scale(.2)}65%{opacity:1;transform:scale(1.17)}100%{opacity:1;transform:scale(1)}}@keyframes score-shine{0%{opacity:0;background-position:150% 0}15%{opacity:1}85%{opacity:1}100%{opacity:0;background-position:-50% 0}}
/* The visible gold glow is JS-driven; the sweep enhances it where text clipping works. */
.score-new::after{animation:none;background-position:var(--shine-x,150%) 0;opacity:var(--shine-opacity,0);-webkit-text-fill-color:transparent}
.live-name{font-size:3.4cqw;line-height:1.12;text-shadow:0 .13cqw .12cqw #30004e,0 .08cqw .28cqw #30004e}.live-score{font-size:8.2cqw}