Frontend: rozmery a farby dosky centralizovane do boardTheme

Sizing konstanty (seat/standings/guess/totals) presunute do boardTheme.ts a farebne odlisenie tipu v PlayerCircle (nad tip = terakota).

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

frontend/src/components/GuessControls.tsx

@@ -1,5 +1,6 @@
 import { emit } from '../lib/socket';
 import { forbiddenGuess } from '../lib/gameRules';
+import { GUESS_BUTTON } from '../lib/boardTheme';
 
 interface Props {
   cardsInRound: number;
@@ -7,15 +8,16 @@ interface Props {
   myOrder: number;
   activePlayer: number;
   activePlayerName: string;
+  desktop?: boolean;
 }
 
-export default function GuessControls({ cardsInRound, guesses, myOrder, activePlayer, activePlayerName }: Props) {
+export default function GuessControls({ cardsInRound, guesses, myOrder, activePlayer, activePlayerName, desktop = true }: Props) {
   const isMyTurn = activePlayer === myOrder;
   const forbidden = forbiddenGuess(cardsInRound, guesses);
 
   if (!isMyTurn) {
     return (
-      <p className="text-center text-sm text-green-dim py-3">
+      <p className="text-center text-[14px] text-green-dim py-3">
         Čaká sa na tip:{' '}
         <span className="font-serif text-gold">{activePlayerName}</span>
       </p>
@@ -23,6 +25,7 @@ export default function GuessControls({ cardsInRound, guesses, myOrder, activePl
   }
 
   const options = Array.from({ length: cardsInRound + 1 }, (_, i) => i);
+  const btn = desktop ? GUESS_BUTTON.desktop : GUESS_BUTTON.mobile;
 
   return (
     <div className="flex flex-col items-center gap-3 py-3">
@@ -36,8 +39,9 @@ export default function GuessControls({ cardsInRound, guesses, myOrder, activePl
               disabled={isForbidden}
               onClick={() => emit.addGuess(n)}
               title={isForbidden ? 'Zakázaná hodnota (súčet = počet kopiek)' : undefined}
+              style={{ width: btn.size, height: btn.size, fontSize: btn.font }}
               className={[
-                'w-11 h-11 rounded-full font-serif text-lg border-2 transition-colors',
+                'rounded-full font-serif border-2 transition-colors',
                 isForbidden
                   ? 'border-[#5a2a2a] text-[#7a4040] opacity-40 cursor-not-allowed'
                   : 'border-gold/50 text-gold hover:bg-gold hover:text-table hover:border-gold active:scale-95',

frontend/src/components/PlayerCircle.tsx

@@ -12,6 +12,11 @@ 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);
+  // Bid status at a glance: terracotta once the player has taken more tricks
+  // than bid (the bid is already lost), gold while exactly on target, cream
+  // while still chasing. Scoring: exact match = 10 + bid, anything else = 0.
+  const guessColor =
+    guess === null ? '#d8cba6' : won > guess ? '#e08066' : won === guess ? '#e8c14a' : '#d8cba6';
   // 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
@@ -58,7 +63,10 @@ export default function PlayerCircle({ name, won, guess, active, size = 52 }: Pr
         }}
       >
         {won}
-        <span style={{ fontSize: valueFont * 0.6, color: '#b0a585' }}>/{guess ?? '?'}</span>
+        {/* The bid matters as much as the tricks won — keep it nearly as big
+            and in readable cream; only the slash separator stays muted. */}
+        <span style={{ fontSize: valueFont * 0.7, color: '#b0a585' }}>/</span>
+        <span style={{ fontSize: valueFont , color: guessColor }}>{guess ?? '?'}</span>
       </span>
     </div>
   );

frontend/src/components/Standings.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import type { PlayerInfo } from '../types';
 import { computeTotal } from '../lib/standings';
 import { displayName } from '../lib/names';
+import { STANDINGS_FONT } from '../lib/boardTheme';
 
 interface Props {
   standings: number[][][];
@@ -40,14 +41,8 @@ export default function Standings({ standings, guesses = [], players, myOrder, d
   const ROUNDS_PER_SERIES = 8;
 
   // Bigger, more legible type on the wide desktop sidebar; compact on mobile.
-  const fz = {
-    head: desktop ? 11 : 10,
-    idx: desktop ? 13 : 9,
-    cell: desktop ? 19 : 14,
-    dot: desktop ? 18 : 13,
-    sigma: desktop ? 13 : 9,
-    total: desktop ? 20 : 18,
-  };
+  // Sizes live in one place (boardTheme.ts) alongside the rest of the board.
+  const fz = desktop ? STANDINGS_FONT.desktop : STANDINGS_FONT.mobile;
 
   const gridCols = { gridTemplateColumns: `28px repeat(${cols.length}, 1fr)` };