:root{font-family:"Bahnschrift","Arial Narrow","Segoe UI",Arial,sans-serif}
*{box-sizing:border-box}
.timer-widget{position:relative;width:100%;height:100%;color:#f5f5f6;--accent:#facc15;--panel:rgba(13,14,19,.88);--panel-soft:rgba(41,43,51,.5);--border:rgba(255,255,255,.18);--inactive:#8f929b;--shadow:0 10px 28px rgba(0,0,0,.34);font-variant-numeric:tabular-nums;user-select:none}
.timer-shell{position:absolute;inset:0;overflow:hidden}
.timer-player{position:relative;min-width:0}.timer-name{position:relative;display:inline-block;max-width:100%;font-size:19px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:#9ea1aa;text-shadow:0 2px 7px rgba(0,0,0,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .12s ease,text-shadow .12s ease,font-size .12s ease,transform .16s ease}.timer-player.active .timer-name,.timer-player.running .timer-name{font-size:20px;color:#fff;text-shadow:0 0 4px rgba(255,255,255,.66),0 0 9px rgba(255,255,255,.22),0 2px 7px rgba(0,0,0,.72)}
.timer-time{position:relative;font-size:36px;line-height:1;font-weight:800;letter-spacing:-.35px;color:var(--inactive);text-shadow:0 2px 8px rgba(0,0,0,.5);transition:color .18s ease,text-shadow .18s ease,opacity .18s ease,transform .18s ease}.timer-player.active .timer-time,.timer-player.running .timer-time{color:color-mix(in srgb,var(--accent) 84%,white 16%);text-shadow:0 0 7px color-mix(in srgb,var(--accent) 84%,transparent),0 0 16px color-mix(in srgb,var(--accent) 48%,transparent),0 2px 8px #000b}
.active-mark{position:absolute;background:var(--accent);box-shadow:0 0 13px color-mix(in srgb,var(--accent) 52%,transparent);opacity:0;transition:opacity .12s ease}.timer-player.active .active-mark{opacity:1}
.score-wrap{display:flex;align-items:center;justify-content:center;min-width:0}.timer-score{display:flex;align-items:center;justify-content:center;gap:10px;font-size:39px;font-weight:800;letter-spacing:0;color:#fff;white-space:nowrap;text-shadow:0 0 8px rgba(255,255,255,.5),0 0 18px rgba(255,255,255,.18),0 2px 8px #000d}.timer-score .dash{color:#c8cad0;font-size:.68em;text-shadow:0 2px 7px #000c}
.zero-opacity .timer-player,.zero-opacity .timer-shell{background:transparent!important;border-color:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}.zero-opacity .timer-player:before,.zero-opacity .timer-shell:before,.zero-opacity .timer-shell:after{opacity:0!important}

/* Victory sequence: 10 seconds total.
   0–5s VICTORY centered directly under the winner name, 5–10s final timer.
   The animation uses transform/opacity only so it stays light while the game is running. */
.celebrating .timer-player.winner{z-index:8;overflow:visible}
.celebrating .timer-player.winner .timer-name{z-index:20;overflow:visible;color:#fff!important;text-shadow:0 0 7px #fff,0 0 18px color-mix(in srgb,var(--accent) 62%,transparent),0 2px 8px #000!important;transform-origin:center center;will-change:transform;animation:winner-name-pulse 1.6s ease-in-out infinite}
.celebrating .timer-player.loser .active-mark{opacity:0!important}
.celebrating .timer-player.loser .timer-name{font-size:20px!important;color:#868a93!important;text-shadow:0 2px 7px #000a!important}
.celebrating .timer-player.loser .timer-time{color:#868a93!important;text-shadow:0 2px 8px #000a!important}

/* Victory is anchored to the nickname, not the timer width. This keeps P1/P2 aligned
   identically even in the horizontal layouts where each side uses different alignment. */
.celebrating .timer-player.winner .timer-name:after{
  content:attr(data-victory-label);position:absolute;left:50%;top:calc(100% + 9px);z-index:30;
  white-space:nowrap;pointer-events:none;font-size:28px;line-height:1;font-weight:1000;letter-spacing:1.2px;
  color:color-mix(in srgb,var(--accent) 88%,white 12%);
  text-shadow:0 0 7px color-mix(in srgb,var(--accent) 96%,white),0 0 16px color-mix(in srgb,var(--accent) 66%,transparent),0 2px 7px #000;
  transform:translate3d(-50%,0,0) scale(.98);transform-origin:center center;opacity:0;
  will-change:transform,opacity;transition:opacity .52s ease,transform .52s cubic-bezier(.22,.8,.26,1);
}
.victory-label-phase .timer-player.winner .timer-name:after{opacity:1;animation:victory-label-pulse 1.6s ease-in-out infinite}

/* One lightweight burst. The dot pattern itself is static; only the whole layer scales/fades. */
.victory-label-phase .timer-player.winner .timer-name:before{
  content:'';position:absolute;left:50%;top:calc(100% + 20px);width:3px;height:3px;border-radius:50%;
  background:var(--accent);pointer-events:none;z-index:24;
  box-shadow:-36px -14px 0 var(--accent),-24px -26px 0 #fff,-5px -31px 0 var(--accent),15px -28px 0 #fff,31px -17px 0 var(--accent),36px 0 0 #fff,30px 18px 0 var(--accent),13px 28px 0 #fff,-8px 30px 0 var(--accent),-29px 20px 0 #fff;
  transform:translate3d(-50%,0,0) scale(.18);transform-origin:center center;opacity:0;will-change:transform,opacity;
  animation:victory-burst 1.5s ease-out 3 both;
}

/* The timer disappears cleanly during VICTORY. Underlines belong only to the timer. */
.victory-label-phase .timer-player.winner .timer-time{opacity:0!important;transform:scale(.96);color:transparent!important;text-shadow:none!important;filter:none!important;background:none!important;background-image:none!important;border:0!important;box-shadow:none!important;text-decoration:none!important}
.victory-label-phase .timer-player.winner .active-mark{display:none!important;opacity:0!important;box-shadow:none!important}
.victory-label-phase.style-2 .timer-player.winner .timer-time,.victory-label-phase.style-5 .timer-player.winner .timer-time{background:none!important;background-image:none!important}

/* Final timer phase: the saved time fades back in and pulses from its own center. */
.victory-timer-phase.celebrating .timer-player.winner .timer-name:after,
.victory-timer-phase.celebrating .timer-player.winner .timer-name:before{opacity:0!important;animation:none!important}
.victory-timer-phase.celebrating .timer-player.winner .timer-time{
  opacity:1;
  transition:opacity .52s ease,transform .52s cubic-bezier(.22,.8,.26,1),color .18s ease,text-shadow .18s ease;
  color:color-mix(in srgb,var(--accent) 88%,white 12%)!important;
  text-shadow:0 0 8px color-mix(in srgb,var(--accent) 92%,white),0 0 18px color-mix(in srgb,var(--accent) 60%,transparent),0 2px 8px #000!important;
  transform-origin:center center;will-change:transform;animation:winner-time-pulse 1.6s ease-in-out infinite
}

@keyframes winner-name-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes winner-time-pulse{0%,100%{transform:scale(.985)}50%{transform:scale(1.065)}}
@keyframes victory-label-pulse{0%,100%{transform:translate3d(-50%,0,0) scale(.985);opacity:1}50%{transform:translate3d(-50%,1px,0) scale(1.065);opacity:1}}
@keyframes victory-burst{0%{opacity:0;transform:translate3d(-50%,0,0) scale(.18)}18%{opacity:.95}100%{opacity:0;transform:translate3d(-50%,1px,0) scale(1.32)}}

/* 1 — Side Stack */
.style-0 .timer-shell{left:9px;right:9px;background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--panel) 92%,#fff 8%));border:1px solid var(--border);box-shadow:var(--shadow);clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,13px 100%,0 calc(100% - 13px));padding:13px 10px;display:grid;grid-template-rows:minmax(0,1fr) 54px minmax(0,1fr);gap:4px}.style-0 .timer-player{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4px 8px}.style-0 .timer-name{max-width:190px}.style-0 .timer-time{margin-top:3px;font-size:37px}.style-0 .active-mark{left:50%;transform:translateX(-50%);bottom:3px;width:88px;height:3px;border-radius:99px}.style-0 .timer-score{font-size:43px;gap:9px}.style-0 .score-wrap{justify-content:center;padding:0}.style-0 .score-wrap:before,.style-0 .score-wrap:after{content:'';height:1px;flex:1;max-width:28px;background:linear-gradient(90deg,transparent,#ffffff22)}.style-0 .score-wrap:after{transform:scaleX(-1)}
/* 2 — Split Tower */
.style-1 .timer-shell{background:transparent;border:0;box-shadow:none;padding:7px;display:grid;grid-template-rows:1fr 50px 1fr;gap:6px}.style-1 .timer-player{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:var(--panel);border:1px solid var(--border);box-shadow:none;border-radius:7px;padding:9px 8px}.style-1 .timer-time{margin-top:2px;font-size:36px}.style-1 .active-mark{left:26%;right:26%;height:3px;bottom:0;border-radius:4px 4px 0 0}.style-1 .p2 .active-mark{top:0;bottom:auto;border-radius:0 0 4px 4px}.style-1 .timer-score{font-size:40px;text-shadow:0 0 5px #000,0 0 12px #000,0 2px 6px #000,0 0 3px #fff8}
/* 3 — Center Beam */
.style-2 .timer-shell{background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow);clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,9px 100%,0 50%);padding:8px 13px;display:grid;grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr);align-items:center;gap:7px}.style-2 .timer-player{display:flex;flex-direction:column;justify-content:center}.style-2 .p1{align-items:flex-end;text-align:right;padding-right:12px}.style-2 .p2{align-items:flex-start;text-align:left;padding-left:12px}.style-2 .timer-name{display:block}.style-2 .timer-time{display:inline-block;font-size:36px;margin-top:1px;padding-bottom:6px}.style-2 .active-mark{display:none}.style-2 .timer-player.active .timer-time{background:linear-gradient(var(--accent),var(--accent)) left bottom/100% 3px no-repeat}.style-2 .timer-score{font-size:40px}
/* 4 — Corner Rail */
.style-3 .timer-shell{background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:4px;padding:7px 11px;display:grid;grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr);align-items:center;gap:7px;border-top:2px solid rgba(255,255,255,.16);border-bottom:2px solid rgba(255,255,255,.07)}.style-3 .timer-shell:before{content:'';position:absolute;left:12px;right:12px;top:6px;height:1px;background:linear-gradient(90deg,transparent,#ffffff2a,transparent)}.style-3 .p1{text-align:right;padding-right:12px}.style-3 .p2{text-align:left;padding-left:12px}.style-3 .timer-time{display:inline-block;font-size:36px;margin-top:1px;padding-bottom:5px}.style-3 .active-mark{display:none}.style-3 .timer-player.active .timer-time{background:linear-gradient(var(--accent),var(--accent)) center bottom/100% 3px no-repeat}.style-3 .timer-score{font-size:40px}
/* 5 — Glass Wings */
.style-4 .timer-shell{background:transparent;border:0;box-shadow:none;padding:5px 6px;display:grid;grid-template-columns:minmax(0,1fr) 90px minmax(0,1fr);align-items:center;gap:10px}.style-4 .timer-player{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:104px;padding:8px 10px;border:1px solid var(--border);box-shadow:none;background-clip:padding-box}.style-4 .p1{border-radius:18px 6px 6px 18px;background:linear-gradient(110deg,color-mix(in srgb,var(--panel) 86%,transparent),color-mix(in srgb,var(--panel-soft) 62%,transparent))}.style-4 .p2{border-radius:6px 18px 18px 6px;background:linear-gradient(250deg,color-mix(in srgb,var(--panel) 86%,transparent),color-mix(in srgb,var(--panel-soft) 62%,transparent))}.style-4 .timer-time{font-size:36px;margin-top:1px}.style-4 .active-mark{height:3px;bottom:7px;border-radius:99px;width:96px;left:50%;transform:translateX(-50%)}.style-4 .timer-score{font-size:40px;text-shadow:0 1px 3px rgba(0,0,0,.72),0 0 2px rgba(0,0,0,.55),0 0 3px rgba(255,255,255,.18)}
/* 6 — Glass Ribbon */
.style-5 .timer-shell{background:linear-gradient(90deg,color-mix(in srgb,var(--panel) 75%,transparent),color-mix(in srgb,var(--panel-soft) 58%,transparent),color-mix(in srgb,var(--panel) 75%,transparent));border:1px solid #ffffff20;box-shadow:var(--shadow);clip-path:polygon(11px 0,100% 0,calc(100% - 11px) 100%,0 100%);padding:7px 12px;display:grid;grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr);align-items:center;gap:7px}.style-5 .timer-shell:after{display:none!important;content:none!important}.style-5 .timer-player{display:flex;flex-direction:column;justify-content:center}.style-5 .p1{align-items:flex-end;text-align:right;padding-right:12px}.style-5 .p2{align-items:flex-start;text-align:left;padding-left:12px}.style-5 .timer-name{display:block}.style-5 .timer-time{display:inline-block;font-size:36px;margin-top:1px;padding-bottom:6px}.style-5 .active-mark{display:none}.style-5 .timer-player.active .timer-time{background:linear-gradient(var(--accent),var(--accent)) left bottom/100% 3px no-repeat}.style-5 .timer-score{font-size:40px}

/* Optional black text shadow slider. Active white/accent glow remains independent. */
.timer-name,.timer-time,.timer-score{filter:var(--text-shadow-filter,none)}


/* Beta 2.0.9 — center player content inside each side for Center Beam, Corner Rail and Glass Ribbon.
   Side padding keeps names/timers comfortably away from the center score. */
.style-2 .timer-player,.style-3 .timer-player,.style-5 .timer-player{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding-left:14px;padding-right:14px;
}
.style-2 .p1,.style-2 .p2,.style-3 .p1,.style-3 .p2,.style-5 .p1,.style-5 .p2{
  align-items:center;text-align:center;padding-left:14px;padding-right:14px;
}
.style-2 .timer-name,.style-3 .timer-name,.style-5 .timer-name{display:inline-block;text-align:center}

/* Keep winner name + winner timer on the same pulse cadence, without blinking. */
.celebrating .timer-player.winner .timer-name,
.victory-timer-phase.celebrating .timer-player.winner .timer-time{animation-duration:1.6s;animation-timing-function:ease-in-out}
.celebrating .timer-player.winner .timer-time{transition:opacity .52s ease,transform .52s cubic-bezier(.22,.8,.26,1)}

/* Beta 2.0.3 — overlay typography/time readout.
   Bahnschrift is a Windows system font; fallbacks keep OBS usable on systems where it is unavailable.
   Timers are centered by their player container, so switching from S.CC to M:SS.CC does not shift the layout. */
.timer-name,.timer-time,.timer-score,.timer-name:after{font-family:"Bahnschrift","Arial Narrow","Segoe UI",Arial,sans-serif}
.timer-time,.timer-score{font-variant-numeric:tabular-nums lining-nums}


/* Beta 2.0.4 — numeric sizing + Side Stack width + mirrored Glass Wings background. */


/* Beta 2.0.5 — micro positioning pass requested for styles 3–6. */
/* 3 — Center Beam: name 1px up, timer 2px down. */
.style-2 .timer-name{position:relative;top:-1px}
.style-2 .timer-time{position:relative;top:2px}

/* 4 — Corner Rail: name 1px up, timer 3px down. Accent line now lives directly under the timer. */
.style-3 .timer-name{position:relative;top:-1px}
.style-3 .timer-time{position:relative;top:3px}

/* 5 — Glass Wings: name 1px up, timer 3px down; active line stays where it was. */
.style-4 .timer-name{position:relative;top:-1px}
.style-4 .timer-time{position:relative;top:3px}

/* 6 — Glass Ribbon: name 1px up, timer/underline 3px down, plus +2px on name and timer only. */
.style-5 .timer-name{position:relative;top:-1px;font-size:21px}
.style-5 .timer-player.active .timer-name,.style-5 .timer-player.running .timer-name{font-size:22px}
.style-5 .timer-time{position:relative;top:3px;font-size:38px}


/* Beta 2.0.6 — Corner Rail underline + Glass Wings line spacing.
   Center Beam, Corner Rail and Glass Ribbon also gained 5px per side at the window level. */
.style-3 .timer-player.active .timer-time{background-position:center bottom}


/* Beta 2.0.7 — final width/readability pass for long player names. */
/* Give Center Beam, Corner Rail and Glass Ribbon a little more usable name room. */
.style-2 .timer-player,.style-3 .timer-player,.style-5 .timer-player{padding-left:10px;padding-right:10px}
.style-2 .p1,.style-2 .p2,.style-3 .p1,.style-3 .p2,.style-5 .p1,.style-5 .p2{padding-left:10px;padding-right:10px}

/* Slightly smaller names on the three horizontal styles that were truncating first. */
.style-2 .timer-name,.style-3 .timer-name,.style-5 .timer-name{font-size:18px}
.style-2 .timer-player.active .timer-name,.style-2 .timer-player.running .timer-name,
.style-3 .timer-player.active .timer-name,.style-3 .timer-player.running .timer-name,
.style-5 .timer-player.active .timer-name,.style-5 .timer-player.running .timer-name{font-size:19px}

/* Glass Ribbon: undo the previous oversized typography and keep it compact. */
.style-5 .timer-time{font-size:35px}
.style-5 .timer-score{font-size:38px}
.style-5 .timer-shell:after{display:none!important;content:none!important}

/* Glass styles use a white separator to match the score digits. */
.style-4 .timer-score .dash,.style-5 .timer-score .dash{color:#fff}

/* Teste 10: nomes maiores e espaço adicional abaixo do cronômetro. */
.timer-widget .timer-name{font-size:23px;-webkit-text-stroke:1px #090b10;paint-order:stroke fill;line-height:1.15}
.timer-widget .timer-player.active .timer-name,.timer-widget .timer-player.running .timer-name,.timer-widget.celebrating .timer-player.loser .timer-name{font-size:24px!important}
.timer-widget.style-0 .timer-time{margin-top:11px}.timer-widget.style-1 .timer-time{margin-top:10px}.timer-widget.style-2 .timer-time,.timer-widget.style-3 .timer-time,.timer-widget.style-4 .timer-time,.timer-widget.style-5 .timer-time{margin-top:9px}