/* One coordinate system for the arena seal, its timer and turn announcements. */
#arena-turn-controls{
 --seal-accent:#9aba82;--seal-title:#d6e6c2;--seal-muted:#a8b69a;--seal-bright:#e5f5cf;--seal-rgb:32,55,39;
 position:absolute;left:50%;top:50%;width:24%;height:24%;transform:translate(-50%,-50%);
 z-index:4;container-type:inline-size;text-align:center;border-radius:50%;
 color:var(--seal-title);background:radial-gradient(circle,rgba(var(--seal-rgb),1) 0%,rgba(var(--seal-rgb),.94) 61%,rgba(var(--seal-rgb),.6) 70%,transparent 71%);
 isolation:isolate;
}
/* Match the green player slots and warm earth rival slots. Announcements take priority. */
#arena-turn-controls[data-state=rival],#arena-turn-controls:has(.turn-effect-rival){--seal-accent:#c59c7a;--seal-title:#ecd2b9;--seal-muted:#c1ac98;--seal-bright:#ffe4c9;--seal-rgb:53,43,34}
#arena-turn-controls:has(.turn-effect-own){--seal-accent:#9aba82;--seal-title:#d6e6c2;--seal-muted:#a8b69a;--seal-bright:#e5f5cf;--seal-rgb:32,55,39}
#arena-turn-controls [hidden]{display:none!important}
#arena-turn-controls .turn-ribbon{display:none}
#arena-turn-controls .arena-turn-progress{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;transform:rotate(-90deg)}
.arena-turn-progress circle,.arena-turn-progress path{fill:none;vector-effect:non-scaling-stroke}
.arena-turn-progress .turn-track{stroke:var(--seal-accent);stroke-opacity:.55;stroke-width:1.2}
.arena-turn-progress .turn-inlay{stroke:var(--seal-accent);stroke-opacity:.22;stroke-width:.8}
.arena-turn-progress .turn-engraving{stroke:var(--seal-accent);stroke-width:1.3}
#turn-time-ring{vector-effect:none;stroke:var(--seal-accent);stroke-width:.9;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--arena-turn-progress,0)*100);transition:stroke-dashoffset .1s linear}
#arena-turn-controls[data-state=rival] #turn-time-ring{stroke:var(--seal-accent);stroke-dasharray:9 91;stroke-dashoffset:0;transform-origin:50px 50px;animation:arena-orbit 8s linear infinite}
#arena-turn-controls[data-state=finished] #turn-time-ring{opacity:0}
.arena-match-status{position:absolute;top:17%;left:15%;width:70%;display:flex;justify-content:center;align-items:center;gap:7px;color:var(--seal-muted);font:500 clamp(7px,4.3cqw,11px)/1.3 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:.4px}
.arena-match-status time{border-left:1px solid color-mix(in srgb,var(--seal-accent) 28%,transparent);padding-left:7px;color:var(--seal-muted)}
#arena-turn-controls #end-turn,#arena-turn-controls #rival-turn-status{
 position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:76%;height:46%;
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
 min-width:0;min-height:0;max-width:none;padding:0;margin:0;aspect-ratio:auto;
 border:0;border-radius:5px;background:none;box-shadow:none;animation:none;opacity:1;
 color:var(--seal-title);line-height:1.1;text-align:center;
}
#arena-turn-controls #end-turn{cursor:pointer;transition:color .2s,filter .2s}
#arena-turn-controls #end-turn:before,#arena-turn-controls #end-turn:after{display:none!important}
#arena-turn-controls #end-turn:hover:not(:disabled){color:var(--seal-bright);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--seal-accent) 40%,transparent))}
#arena-turn-controls #end-turn:focus-visible{outline:1px solid var(--seal-bright);outline-offset:3px}
#arena-turn-controls #end-turn:disabled{color:#a7b29e;cursor:wait}
#arena-turn-controls .turn-action-title{font:600 clamp(13px,10cqw,26px)/1.06 var(--serif);max-width:100%;text-wrap:balance}
#arena-turn-controls #rival-turn-status{color:var(--seal-title)}
#arena-turn-controls #end-turn small,#rival-turn-status small{font:400 clamp(7px,4.5cqw,11px)/1.3 var(--sans);color:var(--seal-muted);letter-spacing:.2px}
.turn-emblem{display:block;flex:none;width:14cqw;height:14cqw;max-width:34px;max-height:34px;color:var(--seal-accent)}
.turn-emblem svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
#arena-turn-controls #turn-seconds{position:absolute;top:72%;left:12%;width:76%;font:500 clamp(7px,4.8cqw,12px)/1.2 var(--sans);font-variant-numeric:tabular-nums;color:var(--seal-accent)}
#arena-turn-controls #surrender{position:absolute;top:82%;left:50%;transform:translateX(-50%);padding:0 4px;font:400 clamp(7px,4.1cqw,10px)/1.4 var(--sans);white-space:nowrap;color:var(--seal-muted)}
#arena-turn-controls #surrender:hover:not(:disabled){color:var(--seal-bright)}
#arena-turn-controls.suggest-pass #turn-time-ring{animation:arena-invite 3.6s ease-in-out infinite}
#arena-turn-controls.suggest-pass #end-turn{color:var(--seal-bright)}
#arena-turn-controls #turn-effect{position:absolute;inset:0;z-index:5;border-radius:50%;cursor:pointer}
.turn-effect-seal{position:absolute;inset:0;color:var(--seal-title)}
.turn-announcement-progress{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none}
.turn-announcement-progress circle{fill:none;stroke:var(--seal-accent);stroke-width:.9;stroke-dasharray:100;stroke-linecap:round}
.turn-transition-label{position:absolute;top:18%;left:10%;width:80%;font:500 clamp(7px,4cqw,10px)/1.4 var(--sans);letter-spacing:1.3px;color:var(--seal-muted)}
.turn-announcement-copy{position:absolute;left:12%;top:28%;width:76%;height:43%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;animation:arena-copy-enter .35s ease-out both}
.turn-announcement-copy strong{font:600 clamp(14px,11cqw,28px)/1.05 var(--serif);text-wrap:balance}
.turn-announcement-copy small{font:400 clamp(7px,4.4cqw,11px)/1.3 var(--sans);color:var(--seal-muted)}
.turn-effect-rival .turn-announcement-copy strong{color:var(--seal-title)}
.turn-dismiss-hint{position:absolute;top:81%;left:15%;width:70%;font:400 clamp(6px,3.6cqw,9px)/1.3 var(--sans);color:var(--seal-muted)}
#arena-turn-controls:has(#turn-effect)>.arena-match-status,#arena-turn-controls:has(#turn-effect)>#end-turn,#arena-turn-controls:has(#turn-effect)>#rival-turn-status,#arena-turn-controls:has(#turn-effect)>#turn-seconds,#arena-turn-controls:has(#turn-effect)>#surrender{visibility:hidden}
#arena-turn-controls:has(#turn-effect) #turn-time-ring{visibility:hidden}
@keyframes arena-orbit{to{transform:rotate(360deg)}}
@keyframes arena-invite{50%{stroke:var(--seal-bright);stroke-width:1.2}}
@keyframes arena-copy-enter{from{opacity:0;translate:0 3px}to{opacity:1;translate:0 0}}
@media(max-width:760px){#arena-turn-controls{width:30%;height:30%}.arena-match-status{gap:4px;letter-spacing:0}.arena-match-status time{padding-left:4px}#arena-turn-controls #end-turn,#arena-turn-controls #rival-turn-status,.turn-announcement-copy{gap:3px}.turn-transition-label{letter-spacing:.4px}}
@media(prefers-reduced-motion:reduce){#arena-turn-controls #turn-time-ring,.turn-announcement-copy{animation:none;transition:none}}