/* Concept 10: isolated illustrated frame, live numerals and a real elapsed-time fill. */
#arena .arena-center>.clock{
 position:relative;display:block!important;width:min(700px,96vw);min-width:0!important;
 aspect-ratio:2172/724;height:auto;margin:0 auto!important;padding:0!important;
 border:0!important;border-image:none!important;border-radius:0!important;
 background:url('assets/clock-ten-frame.webp') center/100% 100% no-repeat!important;
 box-shadow:none!important;isolation:isolate;overflow:visible;
 font-family:Georgia,'Times New Roman',serif!important;font-weight:800;letter-spacing:.04em!important;
 filter:drop-shadow(0 10px 17px #000d);
}
#arena .arena-center>.clock::after{content:none!important}
#arena .arena-center>.clock::before{
 content:'';position:absolute;inset:24% 16% 37%;z-index:0;pointer-events:none;
 background:linear-gradient(180deg,#ff633b88,#a70b18aa 55%,#4e031084);
 clip-path:polygon(0 calc(100% - var(--fill,0%) + 2px),15% calc(100% - var(--fill,0%) - 1px),32% calc(100% - var(--fill,0%) + 2px),50% calc(100% - var(--fill,0%) - 2px),69% calc(100% - var(--fill,0%) + 1px),84% calc(100% - var(--fill,0%) - 2px),100% calc(100% - var(--fill,0%) + 2px),100% 100%,0 100%);
 opacity:.53;mix-blend-mode:screen;
}
#arena .clock-digits{
 position:absolute!important;z-index:2;left:50%;top:44%;transform:translate(-50%,-50%);
 display:block!important;margin:0;white-space:nowrap;line-height:1!important;
 font-family:Georgia,'Times New Roman',serif!important;font-size:clamp(55px,7.4vw,108px)!important;
 font-weight:800;letter-spacing:.035em!important;font-variant-numeric:tabular-nums;
 color:#ffd887!important;-webkit-text-stroke:1px #e24718!important;
 text-shadow:0 0 5px #ffdc78,0 0 17px #ed430f,0 3px 2px #36060a!important;
}
#arena .clock-digits::after{
 color:#e92528!important;background:linear-gradient(180deg,#ffd395 0%,#ff6636 16%,#e52327 55%,#9a0713 100%)!important;
 -webkit-background-clip:text!important;background-clip:text!important;
 -webkit-text-fill-color:transparent;-webkit-text-stroke:.5px #ffb45c!important;
 filter:drop-shadow(0 0 7px #fd3a18)!important;
}
#arena .clock-labels{position:absolute;z-index:2;left:24%;right:24%;top:73%;transform:translateY(-50%);display:flex;justify-content:space-around;pointer-events:none;color:#ffbc70;text-shadow:0 1px 3px #000,0 0 5px #e04919;font:800 clamp(8px,1.3vw,13px)/1 Georgia,serif;letter-spacing:.12em}
#arena .clock-labels span{flex:1;text-align:center}
#arena.clock-smoking .clock,#arena.clock-sparking .clock{box-shadow:none!important}
#arena.clock-smoking .clock{filter:drop-shadow(0 9px 16px #000e) drop-shadow(0 0 12px #ae3d2388)}
#arena.clock-sparking .clock{filter:drop-shadow(0 9px 16px #000e) drop-shadow(0 0 16px #ef3c2177)}
#arena .milestones{width:min(700px,96vw)!important;margin-top:0!important}
@media(max-width:700px){
 #arena .arena-center>.clock{width:min(96vw,520px)}
 #arena .clock-digits{font-size:clamp(44px,13.8vw,72px)!important;-webkit-text-stroke:.6px #d34b24!important}
 #arena .clock-labels{font-size:clamp(7px,1.9vw,10px);letter-spacing:.04em}
 #arena .milestones{width:min(96vw,520px)!important}
}
@media(max-width:370px){#arena .clock-digits{font-size:clamp(41px,13.4vw,50px)!important}#arena .clock-labels{font-size:7px}}
@media(prefers-reduced-motion:reduce){#arena .arena-center>.clock{filter:drop-shadow(0 8px 13px #000d)}}