diff --git a/web/public/js/replay-canvas.js b/web/public/js/replay-canvas.js
index 3438bd7..78bdd43 100644
--- a/web/public/js/replay-canvas.js
+++ b/web/public/js/replay-canvas.js
@@ -769,8 +769,10 @@ class ReplayCanvas {
this._tkLoseFill.style.width = (100 - wPct).toFixed(1) + '%';
this._tkWinVal.textContent = w;
this._tkLoseVal.textContent = l;
- // Game over (loser bled out) → glow the winning side.
- this.ticketsBar.classList.toggle('rc-tk-finished', l <= 0);
+ // Game over (loser bled out) → glow the winning side (bar, number, and
+ // the winning team panel). Class goes on the shared container so the CSS
+ // can reach both the bar and the side panel.
+ this.container.classList.toggle('rc-game-over', l <= 0);
}
async _loadEntityIcons() {
diff --git a/web/views/game-detail.ejs b/web/views/game-detail.ejs
index 9310d80..e98478c 100644
--- a/web/views/game-detail.ejs
+++ b/web/views/game-detail.ejs
@@ -512,16 +512,18 @@
.rc-tk-fill { height: 100%; transition: width 0.1s linear; }
.rc-tk-fill-win { background: #2a8f2a; }
.rc-tk-fill-lose { background: #b22020; }
- /* Winner glow once the loser has bled out (game over) */
- .rc-tickets.rc-tk-finished .rc-tk-track { animation: rcTkGlow 1.2s ease-in-out infinite; }
- .rc-tickets.rc-tk-finished .rc-tk-val-win { animation: rcTkTextGlow 1.2s ease-in-out infinite; }
+ /* Game over (loser bled out): softly glow the winning side — bar,
+ ticket number, and the winning team name in the side panel. */
+ .rc-game-over .rc-tk-track { animation: rcTkGlow 1.4s ease-in-out infinite; }
+ .rc-game-over .rc-tk-val-win,
+ .rc-game-over .rc-panel-win .rc-panel-label { animation: rcTkTextGlow 1.4s ease-in-out infinite; }
@keyframes rcTkGlow {
- 0%, 100% { box-shadow: 0 0 4px 0 rgba(92,223,92,0.5); }
- 50% { box-shadow: 0 0 13px 3px rgba(92,223,92,0.95); }
+ 0%, 100% { box-shadow: 0 0 2px 0 rgba(92,223,92,0.25); }
+ 50% { box-shadow: 0 0 7px 1px rgba(92,223,92,0.55); }
}
@keyframes rcTkTextGlow {
- 0%, 100% { text-shadow: 0 0 4px rgba(92,223,92,0.45); }
- 50% { text-shadow: 0 0 11px rgba(92,223,92,0.95); }
+ 0%, 100% { text-shadow: 0 0 3px rgba(92,223,92,0.35); }
+ 50% { text-shadow: 0 0 9px rgba(92,223,92,0.85); }
}
.rc-controls {
display: flex;
@@ -747,7 +749,7 @@
-
+