Frontend: prepinac vzhladu kariet (znaky vs suit-icon)

Toggle v hlavicke prepina znaky farieb medzi textovymi glyfmi a suit-icon obrazkami; volba perzistuje v localStorage. Gula ma v icon rezime hnedy popis, stredove ikonky srdca/gule/listu jemne zmensene aby sa neprekryvali s rohmi.

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

frontend/src/pages/GameTable.tsx

@@ -8,12 +8,14 @@ import { computeTotal } from '../lib/standings';
 import { displayName } from '../lib/names';
 import { useIsDesktop } from '../lib/useIsDesktop';
 import { useFitScale } from '../lib/useFitScale';
+import { SEAT_SIZE, TOTALS_FONT } from '../lib/boardTheme';
 import Hand from '../components/Hand';
 import GuessControls from '../components/GuessControls';
 import Trick from '../components/Trick';
 import Standings from '../components/Standings';
 import PlayerCircle from '../components/PlayerCircle';
 import FaceDownCards from '../components/FaceDownCards';
+import CardSkinToggle from '../components/CardSkinToggle';
 import GameOver from './GameOver';
 import type { Hand as HandCards, PlayerInfo, StashData } from '../types';
 
@@ -205,19 +207,19 @@ export default function GameTable() {
     <div className="flex items-center justify-between gap-2">
       {opponents.map((p) => (
         <div key={p.order} className="text-center">
-          <div className="uppercase tracking-[.1em] text-green-dim mb-0.5" style={{ fontSize: 11 }}>
+          <div className="uppercase tracking-[.1em] text-green-dim mb-0.5" style={{ fontSize: TOTALS_FONT.label }}>
             {displayName(p.name)}
           </div>
-          <div className="font-serif text-green-score leading-none" style={{ fontSize: compact ? 16 : 20 }}>
+          <div className="font-serif text-green-score leading-none" style={{ fontSize: compact ? TOTALS_FONT.valueDesktop : TOTALS_FONT.valueMobile }}>
             {computeTotal(standings, p.order)}
           </div>
         </div>
       ))}
       <div className="text-center rounded-lg px-3 py-1 bg-gold/[.06] border border-gold/[.15]">
-        <div className="uppercase tracking-[.1em] text-gold mb-0.5" style={{ fontSize: 11 }}>
+        <div className="uppercase tracking-[.1em] text-gold mb-0.5" style={{ fontSize: TOTALS_FONT.label }}>
           {myPlayer.name}
         </div>
-        <div className="font-serif font-semibold text-gold-dim leading-none" style={{ fontSize: compact ? 16 : 20 }}>
+        <div className="font-serif font-semibold text-gold-dim leading-none" style={{ fontSize: compact ? TOTALS_FONT.valueDesktop : TOTALS_FONT.valueMobile }}>
           {computeTotal(standings, myOrder)}
         </div>
       </div>
@@ -241,27 +243,30 @@ export default function GameTable() {
         myOrder={myOrder}
         activePlayer={active_player}
         activePlayerName={activePlayerName}
+        desktop={desktop}
       />
     ) : null
   );
 
+  const seatSize = desktop ? SEAT_SIZE.desktop : SEAT_SIZE.mobile;
+
   const topSeat = (
     <div className="flex flex-col items-center gap-1.5">
-      <PlayerCircle name={displayName(topP?.name) || '—'} {...seatProps(topP?.order)} size={desktop ? 64 : 52} />
+      <PlayerCircle name={displayName(topP?.name) || '—'} {...seatProps(topP?.order)} size={seatSize.top} />
       <FaceDownCards count={cardsInHandOf(topP?.order)} direction="row" desktop={desktop} />
     </div>
   );
 
   const sideSeat = (p?: PlayerInfo) => (
     <div className="flex flex-col items-center gap-1.5">
-      <PlayerCircle name={displayName(p?.name) || '—'} {...seatProps(p?.order)} size={desktop ? 60 : 48} />
+      <PlayerCircle name={displayName(p?.name) || '—'} {...seatProps(p?.order)} size={seatSize.side} />
       <FaceDownCards count={cardsInHandOf(p?.order)} direction="col" desktop={desktop} />
     </div>
   );
 
   const meSeat = (
     <div className="flex justify-center">
-      <PlayerCircle name={myPlayer.name} {...seatProps(myOrder)} size={desktop ? 70 : 58} />
+      <PlayerCircle name={myPlayer.name} {...seatProps(myOrder)} size={seatSize.me} />
     </div>
   );
 
@@ -283,22 +288,23 @@ export default function GameTable() {
           <div className="flex-1 min-w-0 flex flex-col">
             {/* header */}
             <div className="shrink-0 h-[58px] bg-header flex items-center gap-4 px-6 border-b border-[#14221a]">
-              <span className="font-serif uppercase tracking-[.14em] text-[15px] text-gold whitespace-nowrap">
+              <span className="font-serif uppercase tracking-[.14em] text-[18px] text-gold whitespace-nowrap">
                 Bridžik
               </span>
               <div className="w-px h-[22px] bg-[#1a3a22]" />
-              <span className="font-serif text-[12px] text-green-dim tracking-[.06em] whitespace-nowrap">
+              <span className="font-serif text-[14px] text-green-dim tracking-[.06em] whitespace-nowrap">
                 Séria {series_number + 1} · Kolo {round_number + 1}
               </span>
               <div className="flex-1 flex items-center justify-center">{banner}</div>
               {totalsRow(true)}
               <div className="w-px h-[22px] bg-[#1a3a22]" />
+              <CardSkinToggle />
               {canEnd && (
-                <button onClick={handleEnd} className="text-[11px] text-[#8a8064] hover:text-gold whitespace-nowrap">
+                <button onClick={handleEnd} className="text-[13px] text-[#8a8064] hover:text-gold whitespace-nowrap">
                   Ukončiť
                 </button>
               )}
-              <button onClick={handleLeave} className="text-[11px] text-[#7a7058] hover:text-gold whitespace-nowrap">
+              <button onClick={handleLeave} className="text-[13px] text-[#7a7058] hover:text-gold whitespace-nowrap">
                 Odísť
               </button>
             </div>
@@ -344,16 +350,17 @@ export default function GameTable() {
       {/* header */}
       <div className="bg-header px-[18px] pt-[14px] pb-3 border-b border-[#14221a]">
         <div className="flex items-center justify-between mb-2.5">
-          <span className="font-serif uppercase tracking-[.1em] text-[11px] text-gold">
+          <span className="font-serif uppercase tracking-[.1em] text-[12px] text-gold">
             Séria {series_number + 1} · Kolo {round_number + 1}
           </span>
           <div className="flex items-center gap-3">
+            <CardSkinToggle />
             {canEnd && (
-              <button onClick={handleEnd} className="text-[11px] text-[#6a3030] hover:text-red-400">
+              <button onClick={handleEnd} className="text-[13px] text-[#6a3030] hover:text-red-400">
                 Ukončiť
               </button>
             )}
-            <button onClick={handleLeave} className="text-[11px] text-[#7a7058] hover:text-gold">
+            <button onClick={handleLeave} className="text-[13px] text-[#7a7058] hover:text-gold">
               Odísť
             </button>
           </div>