Trik: zmetanie po kazdom stichu, ovalne meno, dohrata hra mizne z lobby

Zmetacia animacia doteraz dobehla len na konci kola/serie (dlha pauza) --
mid-round ju hned prerusila dalsia zahrata karta, lebo `finishing` zavisela
na activeCards === 0. Teraz drzi kopku v strede az do konca animacie a
zablokuje hranie karty, kym sa nezmetie; boot-guard zabrani falosnej
animacii pri reconnecte na uz rozohratu hru.

PlayerCircle: ovalne oramovanie mena teraz rastie s dlzkou mena
(fit-content + strop + ellipsis) namiesto pevnej sirky.

api: hra dohrata do konca (4 serie) sa hned vytrati z lobby zoznamu,
namiesto toho aby visela navzdy ako "Začatá"/"Pokračovať" aj ked uz ma
v DB ended_at.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/components/PlayerCircle.tsx

@@ -12,25 +12,34 @@ interface Props {
 export default function PlayerCircle({ name, won, guess, active, size = 52 }: Props) {
   const nameFont = Math.max(9, Math.round(size * 0.17));
   const valueFont = Math.round(size * 0.32);
-  // Oval: width = size, height a touch shorter so it reads as an ellipse.
+  // Oval: height a touch shorter than size so it reads as an ellipse. Width
+  // starts at `size` (a circle for short names) but grows with the name via
+  // fit-content + padding, up to a cap beyond which the name is ellipsised
+  // rather than wrapping (wrapping would break the fixed height/oval shape).
   const height = Math.round(size * 0.78);
+  const hPad = Math.round(size * 0.16);
+  const maxWidth = Math.round(size * 2);
 
   return (
     <div
       // Only the active player is highlighted (gold ring + glow) — colors come
       // from the velvet-table palette tokens (tailwind.config.js), not literals.
-      className={`flex flex-col items-center justify-center rounded-[50%] ${
+      className={`flex flex-col items-center justify-center rounded-full ${
         active ? 'bg-circle-active border-2 border-gold' : 'bg-circle border-[1.5px] border-gold/20'
       }`}
       style={{
-        width: size,
+        width: 'fit-content',
+        minWidth: size,
+        maxWidth,
         height,
+        paddingLeft: hPad,
+        paddingRight: hPad,
         boxShadow: '0 2px 10px rgba(0,0,0,.45)',
         animation: active ? 'ar 2.2s ease-in-out infinite' : undefined,
       }}
     >
       <span
-        className={`uppercase leading-tight text-center ${active ? 'text-gold' : 'text-green-circle'}`}
+        className={`uppercase leading-tight text-center overflow-hidden text-ellipsis whitespace-nowrap max-w-full ${active ? 'text-gold' : 'text-green-circle'}`}
         style={{
           fontFamily: '"DM Sans",sans-serif',
           fontSize: nameFont,