diff --git a/JoshHeaps.Net/wwwroot/css/casino/holdem.css b/JoshHeaps.Net/wwwroot/css/casino/holdem.css index d6ee36f..b413bb0 100644 --- a/JoshHeaps.Net/wwwroot/css/casino/holdem.css +++ b/JoshHeaps.Net/wwwroot/css/casino/holdem.css @@ -2029,12 +2029,50 @@ body.hasActionBar #holdemSidebar { color: #f0d9a8; } -/* Whose turn it is, shown on the table itself as well as in the bar. */ +/* Whose turn it is, shown on the table itself as well as in the bar. + + Dealers say the biggest single time sink at a home table isn't how fast the cards + come out — it's players not noticing the action is on them. So this is the one + state that has to be unmistakable from across a table at a glance, and it was + distinguished only by a rim colour: a gold border and a 2px ring where a live seat + has a green border and a 1px one. Same fill, same size, nothing moving. + + It now reads as lit rather than merely outlined: a solid ring at full strength, a + warm glow that separates it from the felt, and a lift of its own. The seat's + `transform` positions it around the table, so the lift is box-shadow rather than + translate — setting transform here would throw the seat off its spot. */ .seat.seatActing { - border-color: #d8b46a; + border-color: #f0cd85; + background: linear-gradient(160deg, #3a3222, #241f16); box-shadow: - 0 0 0 2px rgba(216, 180, 106, 0.45), - 0 4px 16px rgba(0, 0, 0, 0.55); + 0 0 0 3px rgba(216, 180, 106, 0.9), + 0 0 18px 2px rgba(216, 180, 106, 0.35), + 0 6px 20px rgba(0, 0, 0, 0.6); + z-index: 4; +} + +/* A slow breath, so a dealer glancing up finds it without hunting. Deliberately + gentle and deliberately optional — the ring above carries the whole job on its own + for anyone who'd rather nothing moved. */ +@media (prefers-reduced-motion: no-preference) { + .seat.seatActing { + animation: seatActingPulse 2.4s ease-in-out infinite; + } + + @keyframes seatActingPulse { + 0%, 100% { + box-shadow: + 0 0 0 3px rgba(216, 180, 106, 0.9), + 0 0 18px 2px rgba(216, 180, 106, 0.35), + 0 6px 20px rgba(0, 0, 0, 0.6); + } + 50% { + box-shadow: + 0 0 0 3px rgba(216, 180, 106, 0.65), + 0 0 26px 5px rgba(216, 180, 106, 0.5), + 0 6px 20px rgba(0, 0, 0, 0.6); + } + } } .seatPuckStack {