/* v0.68: temporizador fluido con velo sincronizado por color y pulso rojo final. */
@property --timer-pct{syntax:"<number>";inherits:false;initial-value:0;}
.seat{--timer-duration:30000ms;--timer-elapsed:0ms;}
.seat .avatar{
 position:relative;isolation:isolate;overflow:visible;
 --timer-color:#24ff39;
 --timer-rgb:36,255,57;
}
.seat.timer-active .avatar{
 box-shadow:0 0 0 3px #172b3d,0 0 0 5px rgba(var(--timer-rgb),.28),0 0 22px rgba(var(--timer-rgb),.22);
 animation:dmTimerPalette var(--timer-duration) steps(1,end) var(--timer-elapsed) both,
           dmTimerAvatarGlow var(--timer-duration) linear var(--timer-elapsed) both;
}
.seat .avatar::before{
 content:"";position:absolute;inset:-10px;border-radius:50%;opacity:0;pointer-events:none;
 background:conic-gradient(from -90deg,var(--timer-color) 0 calc(var(--timer-pct)*1%),rgba(35,63,43,.24) calc(var(--timer-pct)*1%) 100%);
 -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));
 mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));
 filter:drop-shadow(0 0 7px rgba(var(--timer-rgb),.34));
}
.seat.timer-active .avatar::before{
 opacity:1;
 animation:dmTimerDrain var(--timer-duration) linear var(--timer-elapsed) both,
           dmTimerPalette var(--timer-duration) steps(1,end) var(--timer-elapsed) both,
           dmTimerRingGlow var(--timer-duration) linear var(--timer-elapsed) both;
}
.seat .avatar::after{
 content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;border-radius:50%;opacity:0;pointer-events:none;
 background:radial-gradient(circle,#fffde8 0%,#ffe08c 32%,#ffbc35 62%,rgba(255,178,32,0) 76%);
 transform:translate(-50%,-50%) rotate(calc(var(--timer-pct)*3.6deg - 90deg)) translateY(-50px);
 box-shadow:0 0 8px rgba(255,232,147,.85),0 0 14px rgba(255,198,73,.55);
}
.seat.timer-active .avatar::after{
 opacity:1;
 animation:dmTimerDrain var(--timer-duration) linear var(--timer-elapsed) both,
           dmTimerPalette var(--timer-duration) steps(1,end) var(--timer-elapsed) both,
           dmTimerMarkerColor var(--timer-duration) steps(1,end) var(--timer-elapsed) both;
}
@keyframes dmTimerDrain {from{--timer-pct:100}to{--timer-pct:0}}
@keyframes dmTimerPalette{
 0%,49.99%{--timer-color:#24ff39;--timer-rgb:36,255,57}
 50%,74.99%{--timer-color:#ffd348;--timer-rgb:255,211,72}
 75%,100%{--timer-color:#ff5a5a;--timer-rgb:255,90,90}
}
@keyframes dmTimerRingGlow{
 0%,74.99%{filter:drop-shadow(0 0 7px rgba(var(--timer-rgb),.34))}
 75%,80%{filter:drop-shadow(0 0 8px rgba(255,90,90,.50)) drop-shadow(0 0 16px rgba(255,90,90,.26))}
 80.01%,85%{filter:drop-shadow(0 0 5px rgba(255,90,90,.20))}
 85.01%,90%{filter:drop-shadow(0 0 9px rgba(255,90,90,.56)) drop-shadow(0 0 18px rgba(255,90,90,.30))}
 90.01%,95%{filter:drop-shadow(0 0 5px rgba(255,90,90,.22))}
 95.01%,100%{filter:drop-shadow(0 0 11px rgba(255,90,90,.62)) drop-shadow(0 0 20px rgba(255,90,90,.36))}
}
@keyframes dmTimerAvatarGlow{
 0%,49.99%{box-shadow:0 0 0 3px #172b3d,0 0 0 5px rgba(36,255,57,.28),0 0 22px rgba(36,255,57,.22)}
 50%,74.99%{box-shadow:0 0 0 3px #172b3d,0 0 0 5px rgba(255,211,72,.28),0 0 22px rgba(255,211,72,.22)}
 75%,80%{box-shadow:0 0 0 3px #172b3d,0 0 0 7px rgba(255,90,90,.32),0 0 18px rgba(255,90,90,.28),0 0 30px rgba(255,90,90,.18)}
 80.01%,85%{box-shadow:0 0 0 3px #172b3d,0 0 0 5px rgba(255,90,90,.18),0 0 10px rgba(255,90,90,.10)}
 85.01%,90%{box-shadow:0 0 0 3px #172b3d,0 0 0 8px rgba(255,90,90,.38),0 0 24px rgba(255,90,90,.30),0 0 36px rgba(255,90,90,.22)}
 90.01%,95%{box-shadow:0 0 0 3px #172b3d,0 0 0 5px rgba(255,90,90,.18),0 0 10px rgba(255,90,90,.10)}
 95.01%,100%{box-shadow:0 0 0 3px #172b3d,0 0 0 9px rgba(255,90,90,.44),0 0 26px rgba(255,90,90,.34),0 0 40px rgba(255,90,90,.24)}
}
@keyframes dmTimerMarkerColor{
 0%,49.99%{box-shadow:0 0 8px rgba(74,255,164,.85),0 0 14px rgba(36,255,57,.40)}
 50%,74.99%{box-shadow:0 0 8px rgba(255,230,130,.88),0 0 14px rgba(255,211,72,.46)}
 75%,100%{box-shadow:0 0 8px rgba(255,180,180,.92),0 0 14px rgba(255,90,90,.54)}
}
@media(prefers-reduced-motion:reduce){.seat.timer-active .avatar::after{display:none}}

/* Velo radial sobre el retrato, usando exactamente la misma paleta que el anillo. */
#stage .seat .avatar > .dm-time-veil {
 position:absolute;inset:0;border-radius:50%;z-index:2;pointer-events:none;opacity:0;
 background:
  radial-gradient(circle at 50% 50%,rgba(var(--timer-rgb),.24) 0 45%,rgba(var(--timer-rgb),.12) 58%,rgba(var(--timer-rgb),.02) 78%,transparent 100%),
  conic-gradient(from -90deg,rgba(var(--timer-rgb),.42) 0 calc(var(--timer-pct)*1%),transparent calc(var(--timer-pct)*1%) 100%);
 box-shadow:inset 0 0 14px rgba(var(--timer-rgb),.30);
}
#stage .seat.timer-active .avatar > .dm-time-veil {
 opacity:1;
 animation:dmTimerDrain var(--timer-duration) linear var(--timer-elapsed) both,
           dmTimerPalette var(--timer-duration) steps(1,end) var(--timer-elapsed) both;
}
@media (prefers-reduced-motion:reduce){
 #stage .seat.timer-active .avatar > .dm-time-veil {animation:dmTimerDrain var(--timer-duration) linear var(--timer-elapsed) both,dmTimerPalette var(--timer-duration) steps(1,end) var(--timer-elapsed) both;}
}