:root{--canvas-width: 1920;--canvas-height: 1080;--preview-scale: 1;--lime: #2f6feb;--amber: #f59e0b;--danger: #ef4444;--ink: #081a3a;--panel: rgba(8, 27, 63, .88);--line: rgba(96, 165, 250, .62);--muted: #cbd5e1}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;background:transparent;color:#f8fafc;font-family:Bahnschrift,DIN Alternate,Arial Narrow,PingFang SC,Microsoft YaHei,sans-serif}#overlay-canvas{position:absolute;width:calc(var(--canvas-width) * 1px);height:calc(var(--canvas-height) * 1px);left:50%;top:50%;overflow:hidden;transform:translate(-50%,-50%) scale(var(--preview-scale));transform-origin:center center}#overlay-canvas:before{content:none}#overlay-canvas:after{content:none}.component{position:absolute;transition:opacity .3s ease}.component.hidden{opacity:0;pointer-events:none}.component[data-locked=true]{cursor:default}#product-logo{top:140px;left:1740px;width:120px;height:120px;object-fit:contain;display:block;border:1px solid rgba(47,185,255,.55);box-shadow:0 0 18px #00e5ff38}.tactical-panel{background:var(--panel);border:1px solid rgba(174,184,160,.5);box-shadow:0 0 0 3px #0b0e09a3,inset 0 0 26px #00000047;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}.tf{--cut: 14px;--tf-dark: #062a52;--tf-edge: linear-gradient(135deg, #b8f3ff, #43c9ff 18%, #0a78ed 48%, #2fb9ff 78%, #d1fbff);--tf-panel: linear-gradient(180deg, #09294d, #061b39 28%, #03132d 64%, #082343);--tf-glow: rgba(40,170,255,.5);background:var(--tf-dark);filter:drop-shadow(0 0 6px var(--tf-glow));clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut))}.tf:before{content:"";position:absolute;top:2px;right:2px;bottom:2px;left:2px;z-index:0;background:var(--tf-edge);clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut))}.tf:after{content:"";position:absolute;top:4px;right:4px;bottom:4px;left:4px;z-index:0;background:repeating-linear-gradient(0deg,transparent 0 4px,rgba(73,200,255,.05) 4px 5px),var(--tf-panel);clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut))}.tf>*{position:relative;z-index:1}#stage-progress{top:30px;left:50%;transform:translate(-50%)}.prog{display:flex;align-items:center;width:1820px;height:210px;padding:30px 23px}.stg{--cut: 12px;position:relative;flex:0 0 310px;width:310px;height:150px;transition:filter .3s ease}.stage-copy{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;gap:18px;padding:0 26px}.stg .num{font:900 52px/1 SFMono-Regular,Consolas,monospace;color:#7dd3fc;text-shadow:0 0 12px rgba(69,200,255,.8)}.stg .info{display:flex;flex-direction:column;gap:6px;min-width:0}.stg .sn{font-size:26px;font-weight:800;font-style:italic;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:linear-gradient(180deg,#fff,#e8fbff 38%,#a8ecff 72%,#58cfff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 6px rgba(19,158,255,.6))}.stg .dn{font-size:18px;font-weight:800;color:#9fc7e8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.plink{flex:0 0 56px;width:56px;height:8px;background:linear-gradient(90deg,transparent,#2fb9ff 40%,#2fb9ff 60%,transparent);box-shadow:0 0 10px #2fb9ffb3}.stg.passed{--tf-dark: #4a2b08;--tf-glow: rgba(255,184,60,.55);--tf-edge: linear-gradient(135deg, #fff0b8, #ffc857 30%, #d88900 60%, #ffe29a);--tf-panel: linear-gradient(180deg, #4a2b08, #241606 40%, #3c2408)}.stg.passed .num{color:#ffd166;text-shadow:0 0 12px rgba(255,184,60,.75)}.stg.current{--tf-glow: rgba(69,200,255,.95);filter:drop-shadow(0 0 14px rgba(69,200,255,.9))}.stg.failed{--tf-dark: #4a121e;--tf-glow: rgba(255,80,70,.5);--tf-edge: linear-gradient(135deg, #ffd8c8, #ff6a52 30%, #e11f36 60%, #ffe0d1);--tf-panel: linear-gradient(180deg, #3a1220, #180a12 40%, #331019)}.stg.failed .num{color:#fda4af;text-shadow:0 0 12px rgba(255,90,80,.7)}.stg.failed .sn{background:linear-gradient(180deg,#fff,#ffe8e8 38%,#ffb0b0 72%,#ff6a6a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.stg.upcoming{--tf-glow: rgba(40,120,190,.3);opacity:.72}.bcard{position:absolute;display:block;width:740px;height:300px;transform-origin:top left;filter:drop-shadow(0 0 7px rgba(40,170,255,.5))}#current-challenger{left:410px;bottom:42px}#current-defender{right:42px;bottom:42px;left:auto}#current-reward{left:42px;bottom:42px}.bcard .seg{position:absolute;background-repeat:no-repeat;background-size:100% 100%}.bcard .seg-left{left:10px;top:75px;width:321px;height:150px;background-image:url(/components/card-left-blue.svg)}.bcard .seg-right{left:431px;top:75px;width:295px;height:150px;background-image:url(/components/card-right-blue.svg)}.bcard .mid{position:absolute;left:329px;top:75px;width:104px;height:112px;transform:scaleY(1.3392857143);transform-origin:top left;background:repeating-linear-gradient(0deg,transparent 0 4px,rgba(73,200,255,.05) 4px 5px) 0 16px / 100% 80px no-repeat,linear-gradient(180deg,#09294d,#061b39 28%,#03132d 64%,#082343) 0 16px / 100% 80px no-repeat}.bcard .mid:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(#052d5a,#052d5a) 0 16px / 100% 3px no-repeat,linear-gradient(90deg,#b8f3ff,#2fb9ff 40%,#43c9ff) 0 19px / 100% 3px no-repeat,linear-gradient(#0b3768,#0b3768) 0 22px / 100% 1.2px no-repeat,linear-gradient(#0b3768,#0b3768) 0 88.4px / 100% 1.2px no-repeat,linear-gradient(90deg,#b8f3ff,#2fb9ff 40%,#43c9ff) 0 90px / 100% 3px no-repeat,linear-gradient(#052d5a,#052d5a) 0 93px / 100% 3px no-repeat}.av-img,.av-ph{position:absolute;left:21px;top:19px;width:112px;height:112px;border:4px solid #43c9ff;border-radius:50%;z-index:2}.av-img{object-fit:cover}.av-ph{display:grid;place-items:center;background:#173d61;color:#bff5ff;font:900 46px/1 Bahnschrift,sans-serif;text-shadow:0 0 12px rgba(32,184,255,.9)}.bcard:not(.awaiting) .av-ph{display:none}.bcard.awaiting .av-img{display:none}.card-copy{position:absolute;top:0;right:0;bottom:0;left:0}.name{position:absolute;left:150px;top:128px;width:300px;z-index:1;display:flex;align-items:center;gap:6px;white-space:nowrap;line-height:1;overflow:hidden;color:#f7fdff;font-weight:900;font-size:38px;letter-spacing:.04em;text-shadow:0 0 5px rgba(255,255,255,.8),0 0 14px rgba(42,181,255,.75)}.name .pre{flex:0 0 auto;color:#9fd8ff;font-size:30px;font-weight:800}.name>:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}.stat{position:absolute;left:486px;top:120px;width:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;z-index:2}.stat .sub{font:800 20px/1 PingFang SC,Microsoft YaHei,sans-serif;color:#bfe0ff;letter-spacing:.08em;white-space:nowrap}.stat .val{font:900 30px/1 PingFang SC,Microsoft YaHei,sans-serif;color:#fff;white-space:nowrap;text-shadow:0 0 10px rgba(42,181,255,.7)}.bcard--red{width:640px;height:224px;filter:drop-shadow(0 0 7px rgba(240,80,60,.5))}.bcard--red .seg-left{left:8px;top:47px;width:279px;height:130px}.bcard--red .seg-right{left:382px;top:47px;width:255px;height:130px}.bcard--red .seg-left{background-image:url(/components/card-left-red.svg)}.bcard--red .seg-right{background-image:url(/components/card-right-red.svg)}.bcard--red .mid{left:285px;top:47px;width:99px;height:112px;transform:scaleY(1.1607142857);background:repeating-linear-gradient(0deg,transparent 0 4px,rgba(255,120,90,.05) 4px 5px) 0 16px / 100% 80px no-repeat,linear-gradient(180deg,#3a1220,#241019 30%,#180a12 66%,#331019) 0 16px / 100% 80px no-repeat}.bcard--red .mid:after{background:linear-gradient(#4a101d,#4a101d) 0 16px / 100% 3px no-repeat,linear-gradient(90deg,#ffd5c8,#ff6a52 40%,#ff3f4f) 0 19px / 100% 3px no-repeat,linear-gradient(#6b1b2a,#6b1b2a) 0 22px / 100% 1.2px no-repeat,linear-gradient(#6b1b2a,#6b1b2a) 0 88.4px / 100% 1.2px no-repeat,linear-gradient(90deg,#ffd5c8,#ff6a52 40%,#ff3f4f) 0 90px / 100% 3px no-repeat,linear-gradient(#4a101d,#4a101d) 0 93px / 100% 3px no-repeat}.bcard--red .av-img,.bcard--red .av-ph{left:18px;top:16px;width:98px;height:98px;border-color:#ff4b45}.bcard--red .av-ph{background:#291820;color:#ffd0d0;font-size:40px;text-shadow:0 0 12px rgba(255,67,82,.9)}.bcard--red .name{left:132px;top:92px;width:260px;font-size:34px}.bcard--red .name .pre{font-size:26px}.bcard--red .stat{left:430px;top:82px;width:200px;gap:4px}.bcard--red .stat .sub{font-size:19px}.bcard--red .stat .val{font-size:27px}.bcard--red .name{text-shadow:0 0 5px rgba(255,255,255,.8),0 0 14px rgba(255,80,70,.72)}.bcard--red .name .pre{color:#ffb09f}.bcard--red .stat .sub{color:#ffc7b8}.bcard--red .stat .val{text-shadow:0 0 10px rgba(255,90,70,.7)}.bcard--reward{width:740px;height:306px;filter:drop-shadow(0 0 7px rgba(40,170,255,.5))}.bcard--reward .seg-left{left:10px;top:63px;width:321px;height:180px;background-image:url(/components/card-left-reward.svg)}.bcard--reward .seg-right{left:473px;top:63px;width:257px;height:180px;background-image:url(/components/card-right-reward.svg)}.bcard--reward .mid{left:329px;top:63px;width:146px;height:140px;transform:scaleY(1.2857142857);background:repeating-linear-gradient(0deg,transparent 0 4px,rgba(73,200,255,.05) 4px 5px) 0 26px / 100% 88px no-repeat,linear-gradient(180deg,#09294d,#061b39 28%,#03132d 64%,#082343) 0 26px / 100% 88px no-repeat}.bcard--reward .mid:after{background:linear-gradient(#052d5a,#052d5a) 0 26px / 100% 3px no-repeat,linear-gradient(90deg,#b8f3ff,#2fb9ff 40%,#43c9ff) 0 29px / 100% 3px no-repeat,linear-gradient(#0b3768,#0b3768) 0 32px / 100% 1.2px no-repeat,linear-gradient(#0b3768,#0b3768) 0 106.4px / 100% 1.2px no-repeat,linear-gradient(90deg,#b8f3ff,#2fb9ff 40%,#43c9ff) 0 108px / 100% 3px no-repeat,linear-gradient(#052d5a,#052d5a) 0 111px / 100% 3px no-repeat}.rwcopy{position:absolute;left:170px;top:108px;width:400px;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;white-space:nowrap}.rwlabel{font:800 24px/1 PingFang SC,Microsoft YaHei,sans-serif;color:#ffdb7a;letter-spacing:.14em;text-shadow:0 0 8px rgba(255,190,50,.55)}.rwval{font:900 52px/1.05 PingFang SC,Microsoft YaHei,sans-serif;color:#f7fdff;text-shadow:0 0 5px rgba(255,255,255,.82),0 0 15px rgba(42,181,255,.72)}.ttl{top:42px;left:260px;width:1400px;height:128px}.title-frame{--cut: 16px;position:absolute;left:20px;top:10px;width:1360px;height:108px}.title-copy{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;gap:26px}.tname{font-size:43px;font-weight:900;letter-spacing:.04em;white-space:nowrap;color:#f7fdff;text-shadow:0 0 5px rgba(255,255,255,.8),0 0 14px rgba(42,181,255,.75)}.vsep{width:2px;height:44px;background:linear-gradient(180deg,transparent,#3a7fd0,transparent);box-shadow:0 0 6px #50b4ff99}.tstage{font-size:34px;font-weight:800;letter-spacing:.06em;white-space:nowrap;color:#cfe6ff;text-shadow:0 0 10px rgba(42,181,255,.6)}.tstatus{display:inline-flex;align-items:center;gap:10px;font-size:30px;font-weight:800;color:#ffd166;white-space:nowrap;text-shadow:0 0 10px rgba(255,184,60,.65)}.livedot{width:12px;height:12px;border-radius:50%;background:#ffb020;box-shadow:0 0 10px #ffb020}.stage-copy,.card-copy,.bcard .rwcopy,.title-copy,.timer-copy{transform:translate(var(--text-offset-x, 0),var(--text-offset-y, 0)) scale(var(--text-scale, 1));transform-origin:top left}.tmr{top:42px;right:42px;width:480px;height:200px}.timer-frame{--cut: 18px;position:absolute;left:20px;top:10px;width:440px;height:180px}.timer-copy{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.tmr-label{font-size:26px;font-weight:800;letter-spacing:.16em;color:#bfe0ff;text-shadow:0 0 10px rgba(42,181,255,.6)}.tmr-val{font:900 72px/1 SFMono-Regular,Consolas,monospace;letter-spacing:.04em;color:#fff;text-shadow:0 0 6px rgba(255,255,255,.7),0 0 20px rgba(42,181,255,.75)}:root[data-orientation=portrait] .prog{flex-direction:column;align-items:center;width:320px;height:940px;padding:20px 10px}:root[data-orientation=portrait] .stg{width:300px;height:148px;flex:0 0 148px}:root[data-orientation=portrait] .stage-copy{gap:18px;padding:0 30px}:root[data-orientation=portrait] .plink{width:8px;height:40px;margin:0 auto;flex:0 0 40px;background:linear-gradient(180deg,transparent,#2fb9ff 40%,#2fb9ff 60%,transparent);box-shadow:0 0 10px #2fb9ffb3}:root[data-orientation=portrait] .stg .sn{font-size:27px}:root[data-orientation=portrait] .stg .dn{font-size:19px}.connection-status{display:none;position:absolute;top:12px;right:13px;align-items:center;gap:7px;padding:6px 9px;border:1px solid rgba(148,163,184,.5);background:#0f172abd;color:#cbd5e1;font:800 10px/1 monospace;letter-spacing:.05em;z-index:9999}.status-dot{width:7px;height:7px;background:var(--danger);box-shadow:0 0 7px #ff7770cc}.status-dot.connected{background:#38bdf8;box-shadow:0 0 7px #38bdf8cc}.status-dot.connecting{background:var(--amber);animation:pulse 1s infinite}.challenge-notification{position:absolute;left:960px;top:500px;min-width:430px;padding:25px 34px;transform:translate(-50%,-20px);text-align:center;font-size:31px;font-weight:900;letter-spacing:.04em;border:2px solid #ffe29a;box-shadow:0 0 0 5px #0f172abf,0 13px 35px #00000080;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);opacity:0;transition:opacity .3s ease,transform .3s ease;z-index:10000}.challenge-notification.success{color:#2b1700;background:#ffc147f5}.challenge-notification.failure{color:#410e0d;background:#ffb4aef5;border-color:#ffd0ca}@keyframes pulse{50%{opacity:.35}}@keyframes pulse-scale{50%{transform:scale(1.08)}}@keyframes stage-highlight{50%{transform:translateY(-3px);box-shadow:0 0 29px #2fb9ffa6}}@keyframes stage-success{50%{transform:scale(1.07)}}@keyframes stage-failed{25%,75%{transform:translate(-5px)}50%{transform:translate(5px)}}@keyframes fadeInUp{0%{opacity:0}to{opacity:1}}.fade-in{animation:fadeInUp .5s ease-out}.slide-in{animation:fadeInUp .6s ease-out}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.settlement-panel{display:none;position:absolute;top:0;right:0;bottom:0;left:0;color:#0f172a;align-items:center;justify-content:center;flex-direction:column}.settlement-kicker{color:#1557d5;background:#dbeafe;border:1px solid #93c5fd;border-radius:999px;padding:10px 24px;font-weight:900;letter-spacing:.08em}.settlement-grid{display:grid;grid-template-columns:320px 520px 300px;gap:16px;margin-top:34px}.settlement-card{min-height:300px;padding:34px;display:flex;flex-direction:column;justify-content:center;background:#fffffff5;border:1px solid rgba(203,213,225,.96);border-radius:12px;box-shadow:0 20px 50px #0f172a2e}.settlement-card span{color:#64748b;font-size:18px;font-weight:800}.settlement-card strong{color:#1557d5;font-size:58px;margin-top:14px}.settlement-card small{color:#475569;font-size:18px;margin-top:48px}.settlement-card.profile{align-items:center;text-align:center}.settlement-card.profile img{width:112px;height:112px;border-radius:56px;border:4px solid #2563eb;object-fit:cover;margin-bottom:18px}.settlement-card.profile strong{font-size:30px}.settlement-card.prize{color:#fff;background:linear-gradient(145deg,#2563eb,#0d47c5);border-color:#1d4ed8}.settlement-card.prize span,.settlement-card.prize strong{color:#fff}.settlement-card.prize strong{font-size:64px}.settlement-footer{color:#475569;font-weight:800;margin-top:28px}#overlay-canvas[data-preset=settlement]>.component{opacity:0!important}#overlay-canvas[data-preset=settlement] .settlement-panel{display:flex}html[data-widget],html[data-widget] body{background:transparent!important}html[data-widget] #overlay-canvas{position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:0!important;width:calc(var(--canvas-width) * 1px)!important;height:calc(var(--canvas-height) * 1px)!important;overflow:hidden!important;transform:none!important}html[data-widget] #overlay-canvas:before,html[data-widget] #overlay-canvas:after,html[data-widget] #overlay-canvas>*,html[data-widget] .connection-status{display:none!important}html[data-widget=stage-progress] body #overlay-canvas #stage-progress.component.prog{display:flex!important;background-color:transparent!important}html[data-widget=current-challenger] body #overlay-canvas #current-challenger,html[data-widget=current-defender] body #overlay-canvas #current-defender,html[data-widget=current-reward] body #overlay-canvas #current-reward,html[data-widget=match-title] body #overlay-canvas #match-title,html[data-widget=timer] body #overlay-canvas #timer{display:block!important;background-color:transparent!important}
