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 @@ - +