:root {
      /* =====================================================================
       * EXACT DESIGN TOKENS FROM TYSIĄC (tysiac.pages.dev v2.3)
       * ===================================================================== */
      --felt-center: #0d482f;
      --felt-mid: #083824;
      --felt-edge: #062b1b;
      --ui-container: rgba(12, 46, 33, 0.88);
      --ui-container-solid: #0c2e21;
      --ui-surface-hover: rgba(20, 68, 49, 0.92);
      --gold-primary: #d4af37;
      --gold-bright: #f0d376;
      --gold-mid: #e5c158;
      --gold-border: rgba(212, 175, 55, 0.42);
      --gold-soft: rgba(212, 175, 55, 0.16);
      --green-border-soft: rgba(167, 243, 208, 0.18);
      --text-cream: #f8f5ec;
      --text-muted: #b7e4c7;

      /* Playing Card Surface & Suits */
      --card-cream-top: #fffdf9;
      --card-cream-bot: #f5efe2;
      --card-border: #d6cebf;
      --suit-red: #c81e1e;
      --suit-black: #111827;
      --suit-club: #111827;
      --suit-diamond: #c81e1e;

      /* Default Card Back: Wycinanka (Rich Crimson #7b1113 + Gold #d4af37) */
      --rewers-bg-1: #8c1417;
      --rewers-bg-2: #630c0e;
      --rewers-gold: #d4af37;
      --rewers-accent: #f0d376;

      /* Font Stacks matching Tysiąc */
      --font-serif: Georgia, "Playfair Display", "Times New Roman", Times, serif;
      --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

      /* Responsive Card Geometry (Galaxy Tab A11+ & Desktop Default) */
      --board-max-w: 1120px;
      --col-gap: clamp(6px, 1.3vw, 15px);
      --card-w: clamp(50px, min(12vw, 13.2vh), 122px);
      --card-h: calc(var(--card-w) * 1.41);
      --card-r: clamp(8px, 1vw, 12px);
      --stack-down: clamp(10px, 1.5vh, 16px);
      --stack-up: clamp(25px, 3.6vh, 35px);
      --pip-scale: 1.15; /* Duży druk (Large Print) default */
    }

    /* Table Themes (Stół) from Tysiąc */
    body[data-table="noc"] {
      --felt-center: #162844;
      --felt-mid: #0f1c30;
      --felt-edge: #070e1a;
      --ui-container: rgba(13, 25, 43, 0.88);
      --ui-container-solid: #0d192b;
      --text-muted: #93c5fd;
    }

    body[data-table="czeresnia"] {
      --felt-center: #4f161e;
      --felt-mid: #380e14;
      --felt-edge: #1f060a;
      --ui-container: rgba(48, 12, 18, 0.88);
      --ui-container-solid: #300c12;
      --text-muted: #fde68a;
    }

    body[data-table="sosna"] {
      --felt-center: #422f22;
      --felt-mid: #2e2017;
      --felt-edge: #1a110c;
      --ui-container: rgba(42, 29, 20, 0.88);
      --ui-container-solid: #2a1d14;
      --text-muted: #fcd34d;
    }

    body[data-table="kawiarnia"] {
      --felt-center: #33302c;
      --felt-mid: #24211e;
      --felt-edge: #141210;
      --ui-container: rgba(34, 31, 28, 0.88);
      --ui-container-solid: #221f1c;
      --text-muted: #e5e7eb;
    }

    /* Card Back Styles (Rewers) from Tysiąc */
    body[data-rewers="krakow"] {
      --rewers-bg-1: #1e3a8a;
      --rewers-bg-2: #0f172a;
      --rewers-gold: #e5c158;
      --rewers-accent: #f0d376;
    }

    body[data-rewers="lowicz"] {
      --rewers-bg-1: #14532d;
      --rewers-bg-2: #062b1b;
      --rewers-gold: #f59e0b;
      --rewers-accent: #ef4444;
    }

    body[data-rewers="gilosz"] {
      --rewers-bg-1: #31102f;
      --rewers-bg-2: #170616;
      --rewers-gold: #d4af37;
      --rewers-accent: #f0d376;
    }

    /* Card Deck Style (Karty) */
    body[data-deck="nowoczesne"] {
      --pip-scale: 0.95;
    }

    body[data-four-color="true"] {
      --suit-club: #15803d;
      --suit-diamond: #1d4ed8;
    }

    * {
      box-sizing: border-box;
      user-select: none;
      -webkit-user-select: none;
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: transparent;
    }

    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      font-family: var(--font-sans);
      background: radial-gradient(circle at 50% 42%, var(--felt-center) 0%, var(--felt-mid) 55%, var(--felt-edge) 100%);
      color: var(--text-cream);
      touch-action: none;
      overscroll-behavior: none;
    }

    /* Subtle Sukno felt texture */
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: 0.04;
      background-image:
        radial-gradient(#ffffff 0.75px, transparent 0.75px),
        radial-gradient(#000000 0.75px, transparent 0.75px);
      background-size: 12px 12px;
      background-position: 0 0, 6px 6px;
      z-index: 0;
    }

    .game-shell {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      max-width: var(--board-max-w);
      margin: 0 auto;
      padding:
        max(8px, env(safe-area-inset-top))
        max(10px, env(safe-area-inset-right))
        max(10px, env(safe-area-inset-bottom))
        max(10px, env(safe-area-inset-left));
    }

    /* =========================================================================
     * 1. TOP BAR / HUD (Exact Tysiąc 3-Part Capsule Layout)
     * Left: Hamburger + "Menu" pill | Center: 3-Column Scoreboard | Right: Mode/Tabelka pill
     * ========================================================================= */
    .tysiac-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 4px 0 10px 0;
      width: 100%;
    }

    .pill-capsule-btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 8px 15px;
      border-radius: 9999px;
      background: var(--ui-container);
      border: 1px solid var(--gold-border);
      color: var(--text-cream);
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease;
      white-space: nowrap;
    }

    .pill-capsule-btn:hover {
      background: var(--ui-surface-hover);
      border-color: var(--gold-bright);
    }

    .pill-capsule-btn:active {
      transform: scale(0.95);
    }

    .pill-capsule-btn svg {
      width: 16px;
      height: 16px;
      stroke: var(--gold-mid);
      fill: none;
      stroke-width: 2.2;
      stroke-linecap: round;
    }

    /* Center 3-Column Scoreboard HUD Capsule (like Serwacy | Gracz | Ewa in Tysiąc) */
    .center-scoreboard-hud {
      display: grid;
      grid-template-columns: repeat(3, auto);
      align-items: center;
      gap: 4px;
      padding: 4px;
      border-radius: 9999px;
      background: var(--ui-container);
      border: 1px solid var(--green-border-soft);
      box-shadow: 0 8px 22px rgba(0, 0, 0, 0.38);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .hud-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 3px 14px;
      border-radius: 9999px;
      border: 1px solid transparent;
      min-width: 68px;
    }

    /* Active gold border pill highlight just like Tysiąc */
    .hud-col.active-gold-pill {
      border-color: var(--gold-primary);
      background: rgba(212, 175, 55, 0.13);
    }

    .hud-col-name {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-muted);
      line-height: 1.1;
    }

    .hud-col-val {
      font-size: clamp(13px, 1.5vw, 15px);
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      color: var(--text-cream);
      line-height: 1.2;
    }

    .top-right-pills {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .atu-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 13px;
      border-radius: 9999px;
      background: var(--ui-container);
      border: 1px solid var(--gold-border);
      color: var(--gold-bright);
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
      white-space: nowrap;
    }

    /* =========================================================================
     * 2. KLONDIKE PLAYFIELD & RECESSED CARD SLOTS
     * ========================================================================= */
    .playfield {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: clamp(12px, 2.1vh, 22px);
      position: relative;
      width: 100%;
    }

    .top-deck-row, .tableau-grid {
      display: grid;
      grid-template-columns: repeat(7, var(--card-w));
      justify-content: space-between;
      gap: var(--col-gap);
      width: 100%;
    }

    body[data-left-handed="true"] .top-deck-row {
      direction: rtl;
    }
    body[data-left-handed="true"] .top-deck-row > * {
      direction: ltr;
    }

    .tableau-grid {
      flex: 1;
      align-items: start;
    }

    .slot-well {
      width: var(--card-w);
      height: var(--card-h);
      border-radius: var(--card-r);
      background: rgba(0, 0, 0, 0.22);
      border: 1.5px solid rgba(212, 175, 55, 0.28);
      box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.45);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .slot-suit-watermark {
      font-size: calc(var(--card-w) * 0.38);
      color: var(--gold-primary);
      opacity: 0.25;
      pointer-events: none;
    }

    .stock-well {
      cursor: pointer;
    }

    .stock-redeal-icon {
      color: var(--gold-bright);
      opacity: 0.78;
      font-size: calc(var(--card-w) * 0.34);
      pointer-events: none;
    }

    .stock-badge {
      position: absolute;
      bottom: -7px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--ui-container-solid);
      color: var(--gold-bright);
      border: 1px solid var(--gold-primary);
      border-radius: 9999px;
      font-size: 10px;
      font-weight: 800;
      padding: 1px 7px;
      z-index: 25;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
      pointer-events: none;
    }

    .spacer-well {
      visibility: hidden;
      pointer-events: none;
    }

    .tableau-col {
      width: var(--card-w);
      min-height: var(--card-h);
      height: 100%;
      position: relative;
    }

    .tableau-well {
      width: var(--card-w);
      height: var(--card-h);
      border-radius: var(--card-r);
      background: rgba(0, 0, 0, 0.18);
      border: 1.5px dashed rgba(212, 175, 55, 0.24);
      position: absolute;
      top: 0;
      left: 0;
      display: grid;
      place-items: center;
    }

    .tableau-well span {
      font-family: var(--font-serif);
      font-size: calc(var(--card-w) * 0.28);
      font-weight: 700;
      color: var(--gold-primary);
      opacity: 0.16;
    }

    @keyframes wellRipple {
      0% { box-shadow: inset 0 3px 8px rgba(0,0,0,0.45), 0 0 0 0 rgba(212, 175, 55, 0.75); }
      100% { box-shadow: inset 0 3px 8px rgba(0,0,0,0.45), 0 0 0 18px rgba(212, 175, 55, 0); }
    }
    .slot-well.ripple {
      animation: wellRipple 0.55s ease-out;
    }

    /* =========================================================================
     * 3. PLAYING CARDS & "WYCINANKA" CRIMSON-AND-GOLD ROSETTE CARD BACK
     * ========================================================================= */
    .card {
      width: var(--card-w);
      height: var(--card-h);
      border-radius: var(--card-r);
      position: absolute;
      top: 0;
      left: 0;
      background: linear-gradient(170deg, var(--card-cream-top) 0%, var(--card-cream-bot) 100%);
      border: 1px solid var(--card-border);
      box-shadow:
        0 4px 11px rgba(0, 0, 0, 0.34),
        0 1px 2px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 #ffffff;
      cursor: pointer;
      transition: box-shadow 0.15s ease, filter 0.15s ease;
      overflow: hidden;
      backface-visibility: hidden;
    }

    /* Buried cards in a stack vs Top card of a stack */
    .card.stack-buried.face-down {
      filter: brightness(0.86);
    }
    .card.stack-buried:not(.face-down) {
      filter: brightness(0.94);
    }
    .card.stack-top-card:not(.face-down) {
      background: linear-gradient(170deg, #ffffff 0%, #fbf8f1 100%);
      border: 1.5px solid #d4af37;
      box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.50),
        0 2px 5px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 #ffffff;
    }

    /* Face-Down Card Back (Rewers: Wycinanka default) */
    .card.face-down {
      background: radial-gradient(circle at 50% 50%, var(--rewers-bg-1) 0%, var(--rewers-bg-2) 100%);
      border: 2px solid #f8f5ec;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.42);
      cursor: default;
    }

    .card.face-down.stock-top {
      cursor: pointer;
    }

    .wycinanka-back-svg {
      width: 100%;
      height: 100%;
      display: block;
      pointer-events: none;
    }

    /* Suit Colors */
    .card[data-suit="♠"] { color: var(--suit-black); }
    .card[data-suit="♣"] { color: var(--suit-club); }
    .card[data-suit="♥"] { color: var(--suit-red); }
    .card[data-suit="♦"] { color: var(--suit-diamond); }

    /* Dual-Corner & Header Card Face */
    .card-top-strip {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      padding: 4px 6px 0 6px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      z-index: 3;
    }

    .corner-tl {
      display: flex;
      flex-direction: column;
      align-items: center;
      line-height: 0.88;
    }

    .rank-num {
      font-size: calc(var(--card-w) * 0.22 * var(--pip-scale));
      font-weight: 900;
      letter-spacing: -0.04em;
    }

    .suit-mini {
      font-size: calc(var(--card-w) * 0.16 * var(--pip-scale));
      margin-top: 1px;
    }

    .suit-tr-helper {
      font-size: calc(var(--card-w) * 0.18 * var(--pip-scale));
      line-height: 1;
      opacity: 0.9;
    }

    .corner-br {
      position: absolute;
      bottom: 4px;
      right: 6px;
      transform: rotate(180deg);
      display: flex;
      flex-direction: column;
      align-items: center;
      line-height: 0.88;
      z-index: 3;
    }

    .card-center-art {
      position: absolute;
      inset: 28% 14% 22% 14%;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      z-index: 2;
      border: none;
      background: transparent;
    }

    .card.is-royal .card-center-art,
    .card.is-ace .card-center-art {
      border: none;
      background: transparent;
      box-shadow: none;
    }

    @keyframes dealCardCascade {
      0% {
        opacity: 0;
        transform: translate3d(-30px, -24px, 0) scale(0.88);
      }
      100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
      }
    }

    .card.deal-anim {
      animation: dealCardCascade 0.28s cubic-bezier(0.2, 0.85, 0.25, 1) backwards;
    }

    .stuck-banner-pill {
      position: fixed;
      bottom: 78px;
      left: 50%;
      transform: translateX(-50%) translateY(16px);
      opacity: 0;
      pointer-events: none;
      z-index: 790;
      background: rgba(18, 48, 35, 0.97);
      border: 2px solid var(--gold-bright);
      color: var(--text-cream);
      padding: 10px 14px 10px 20px;
      border-radius: 9999px;
      font-size: 15px;
      font-weight: 700;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65);
      transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.2, 0.85, 0.25, 1);
      display: flex;
      align-items: center;
      gap: 14px;
      white-space: nowrap;
    }

    .stuck-newgame-btn {
      padding: 8px 16px;
      border-radius: 9999px;
      background: linear-gradient(135deg, #f3d87d 0%, #d4af37 100%);
      color: #062b1b;
      font-size: 14px;
      font-weight: 900;
      border: 1px solid #ffffff;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    }

    .stuck-banner-pill.visible {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
      pointer-events: auto;
    }

    .center-big-suit {
      font-size: calc(var(--card-w) * 0.44 * var(--pip-scale));
      line-height: 1;
    }

    .royal-svg {
      width: 84%;
      height: 84%;
    }

    .card.dragging {
      transition: none !important;
      z-index: 9999 !important;
      box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55) !important;
      transform: scale(1.05) rotate(1.2deg);
      pointer-events: none;
    }

    .card.hint-glow, .slot-well.hint-glow {
      box-shadow: 0 0 0 3px var(--gold-bright), 0 0 24px var(--gold-primary) !important;
    }

    .hint-ghost-card {
      position: fixed;
      width: var(--card-w);
      height: var(--card-h);
      border-radius: var(--card-r);
      background: rgba(240, 211, 118, 0.26);
      border: 2px solid var(--gold-bright);
      box-shadow: 0 0 24px var(--gold-primary);
      pointer-events: none;
      z-index: 9500;
      display: grid;
      place-items: center;
      font-weight: 900;
      font-size: calc(var(--card-w) * 0.28);
      color: #ffffff;
      text-shadow: 0 2px 6px rgba(0,0,0,0.65);
    }

    .score-floater {
      position: fixed;
      pointer-events: none;
      z-index: 9600;
      font-family: var(--font-serif);
      font-size: 17px;
      font-weight: 900;
      color: var(--gold-bright);
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
      animation: floatScoreUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    @keyframes floatScoreUp {
      0% { opacity: 0; transform: translate(-50%, 6px) scale(0.8); }
      20% { opacity: 1; transform: translate(-50%, -4px) scale(1.08); }
      100% { opacity: 0; transform: translate(-50%, -32px) scale(0.95); }
    }

    /* =========================================================================
     * 4. BOTTOM CONTROLS BAR (Matching Tysiąc Bidding / Action Pill Bar)
     * ========================================================================= */
    .tysiac-bottom-bar {
      margin-top: auto;
      padding: 8px 12px;
      border-radius: 9999px;
      background: var(--ui-container);
      border: 1px solid var(--gold-border);
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      width: 100%;
      max-width: 560px;
      align-self: center;
    }

    .tysiac-pill-btn {
      flex: 1;
      padding: 10px 14px;
      border-radius: 9999px;
      background: rgba(6, 43, 27, 0.85);
      border: 1px solid var(--gold-border);
      color: var(--text-cream);
      font-size: 13px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      cursor: pointer;
      transition: transform 0.12s ease, background 0.15s ease, opacity 0.15s ease;
      white-space: nowrap;
    }

    .tysiac-pill-btn:hover:not(:disabled) {
      border-color: var(--gold-bright);
      background: rgba(14, 62, 42, 0.95);
    }

    .tysiac-pill-btn:active:not(:disabled) {
      transform: scale(0.95);
    }

    .tysiac-pill-btn:disabled {
      opacity: 0.38;
      cursor: not-allowed;
    }

    /* Main Gold Action Pill (Like "Kontynuuj" / "Licytuję 120" in Tysiąc) */
    .tysiac-gold-pill {
      flex: 1.35;
      padding: 11px 18px;
      border-radius: 9999px;
      background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold-mid) 50%, var(--gold-primary) 100%);
      border: 1px solid #ffffff;
      color: #062b1b;
      font-size: 13.5px;
      font-weight: 900;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      cursor: pointer;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
      transition: transform 0.12s ease, filter 0.15s ease;
      white-space: nowrap;
    }

    .tysiac-gold-pill:active {
      transform: scale(0.95);
    }

    /* Auto-Complete Floating Gold Pill */
    .autocomplete-wrap {
      position: fixed;
      bottom: 78px;
      left: 50%;
      transform: translateX(-50%) translateY(20px);
      opacity: 0;
      pointer-events: none;
      z-index: 800;
      transition: all 0.24s ease;
    }

    .autocomplete-wrap.visible {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
      pointer-events: auto;
    }

    /* =========================================================================
     * 5. TYSIĄC MODALS:
     *    - Landing Screen ("Pasjans" Serif Title + Gold Badge + Kontynuuj Card + Pill Stack)
     *    - Split In-Game Menu Modal (#0c2e21 + Left Quick Toggles + Right Links)
     *    - "Tabelka" Paper Notepad Scoreboard (Cream paper + Blue grid + Red margin line)
     *    - "Wygląd" Appearance Customizer (Stół, Rewers, Karty)
     * ========================================================================= */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(4, 22, 14, 0.78);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 3000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }

    .modal-overlay.open {
      display: flex;
    }

    .tysiac-modal-card {
      width: 100%;
      max-width: 480px;
      max-height: 90vh;
      overflow-y: auto;
      background: var(--ui-container-solid);
      border: 1.5px solid var(--gold-primary);
      border-radius: 24px;
      padding: 22px;
      box-shadow: 0 16px 42px rgba(0, 0, 0, 0.55);
      color: var(--text-cream);
      position: relative;
    }

    .modal-top-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(212, 175, 55, 0.25);
    }

    .modal-top-row h2 {
      margin: 0;
      font-family: var(--font-serif);
      font-size: 22px;
      font-weight: 700;
      color: var(--gold-bright);
    }

    .close-circle-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid var(--gold-border);
      color: var(--text-cream);
      font-size: 15px;
      cursor: pointer;
      display: grid;
      place-items: center;
    }

    /* Split In-Game Menu Modal (Exact Tysiąc Structure) */
    .menu-match-summary {
      text-align: center;
      font-size: 12.5px;
      font-weight: 700;
      color: var(--gold-bright);
      background: rgba(0, 0, 0, 0.25);
      border: 1px solid rgba(212, 175, 55, 0.22);
      border-radius: 9999px;
      padding: 6px 14px;
      margin-bottom: 8px;
    }

    .menu-split-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .menu-col {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .menu-col-header {
      font-size: 10.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-muted);
      margin-bottom: 2px;
      padding-left: 6px;
    }

    .menu-pill-item {
      width: 100%;
      padding: 11px 14px;
      border-radius: 9999px;
      background: rgba(6, 43, 27, 0.9);
      border: 1px solid var(--gold-border);
      color: var(--text-cream);
      font-size: 13px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      transition: background 0.15s ease, border-color 0.15s ease;
    }

    .menu-pill-item:hover {
      background: var(--ui-surface-hover);
      border-color: var(--gold-bright);
    }

    .menu-pill-item.gold-cta {
      background: linear-gradient(135deg, var(--gold-bright), var(--gold-primary));
      color: #062b1b;
      font-weight: 900;
      border-color: #ffffff;
    }

    .pill-status-tag {
      font-size: 11px;
      font-weight: 800;
      color: var(--gold-bright);
    }

    /* Landing / Main Title Screen Modal (Exact Tysiąc Landing Layout) */
    .landing-card {
      text-align: center;
      max-width: 420px;
    }

    .landing-serif-logo {
      font-family: var(--font-serif);
      font-size: 42px;
      font-weight: 700;
      color: var(--text-cream);
      margin: 4px 0 6px 0;
      letter-spacing: -0.02em;
      text-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    }

    .wersja-badge {
      display: inline-block;
      padding: 3px 12px;
      border-radius: 9999px;
      background: var(--gold-soft);
      border: 1px solid var(--gold-primary);
      color: var(--gold-bright);
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 16px;
    }

    .rozdanie-summary-card {
      background: rgba(6, 43, 27, 0.78);
      border: 1px solid var(--gold-border);
      border-radius: 18px;
      padding: 14px 16px;
      margin-bottom: 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .rozdanie-summary-stats {
      display: flex;
      justify-content: space-around;
      font-size: 13px;
      color: var(--text-muted);
    }

    .rozdanie-summary-stats strong {
      display: block;
      font-size: 17px;
      color: var(--text-cream);
      margin-top: 2px;
    }

    .landing-pill-stack {
      display: flex;
      flex-direction: column;
      gap: 9px;
    }

    /* =========================================================================
     * 6. "TABELKA" PAPER NOTEPAD MODAL (Cream Paper + Blue Grid + Red Margin Line)
     * ========================================================================= */
    .tabelka-notepad {
      width: 100%;
      max-width: 460px;
      max-height: 88vh;
      overflow-y: auto;
      background-color: #fcf9f0;
      background-image:
        linear-gradient(90deg, transparent 42px, #ef4444 42px, #ef4444 44px, transparent 44px),
        linear-gradient(#dbeafe 1px, transparent 1px),
        linear-gradient(90deg, #e0f2fe 1px, transparent 1px);
      background-size: 100% 100%, 100% 28px, 28px 100%;
      border-radius: 18px;
      border: 2px solid #d4af37;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
      padding: 20px 20px 20px 54px;
      color: #1e293b;
      font-family: var(--font-serif);
      position: relative;
    }

    .tabelka-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 2px solid #1e293b;
      padding-bottom: 8px;
      margin-bottom: 12px;
    }

    .tabelka-header h2 {
      margin: 0;
      font-family: var(--font-serif);
      font-size: 26px;
      font-weight: 700;
      color: #0f172a;
      letter-spacing: -0.01em;
    }

    .tabelka-close {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 1px solid #94a3b8;
      background: #ffffff;
      color: #0f172a;
      font-size: 14px;
      cursor: pointer;
    }

    .tabelka-summary-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
      margin-bottom: 14px;
      text-align: center;
      font-family: var(--font-sans);
    }

    .tabelka-stat-box {
      background: rgba(255, 255, 255, 0.75);
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 4px;
    }

    .tabelka-stat-box .v {
      font-family: var(--font-serif);
      font-size: 18px;
      font-weight: 700;
      color: #7b1113;
    }

    .tabelka-stat-box .l {
      font-size: 10px;
      text-transform: uppercase;
      color: #475569;
      font-weight: 700;
    }

    .tabelka-table {
      width: 100%;
      border-collapse: collapse;
      font-family: var(--font-serif);
      font-size: 14px;
      margin-bottom: 14px;
    }

    .tabelka-table th {
      text-align: left;
      border-bottom: 1.5px solid #334155;
      padding: 4px 6px;
      font-size: 12px;
      text-transform: uppercase;
      color: #475569;
    }

    .tabelka-table td {
      padding: 5px 6px;
      border-bottom: 1px solid rgba(148, 163, 184, 0.35);
      color: #0f172a;
      font-variant-numeric: tabular-nums;
    }

    /* =========================================================================
     * 7. APPEARANCE MODAL ("Wygląd": Stół, Rewers, Karty)
     * ========================================================================= */
    .wyglad-section-title {
      font-family: var(--font-serif);
      font-size: 15px;
      font-weight: 700;
      color: var(--gold-bright);
      margin: 12px 0 8px 0;
    }

    .wyglad-pills-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

    .wyglad-choice-pill {
      padding: 9px 10px;
      border-radius: 9999px;
      background: rgba(6, 43, 27, 0.85);
      border: 1px solid var(--gold-border);
      color: var(--text-cream);
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      text-align: center;
    }

    .wyglad-choice-pill.active {
      background: linear-gradient(135deg, var(--gold-bright), var(--gold-primary));
      color: #062b1b;
      border-color: #ffffff;
      font-weight: 900;
    }

    .swatch-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: 1px solid #ffffff;
      flex-shrink: 0;
    }

    #celebration-canvas {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 2500;
    }

    /* =========================================================================
     * PIXEL 11 PRO PORTRAIT OPTIMIZATION (<= 640px)
     * ========================================================================= */
    @media (max-width: 640px) {
      :root {
        --col-gap: 4px;
        --card-w: calc((100vw - 16px - (6 * 4px)) / 7);
        --card-h: calc(var(--card-w) * 1.46);
        --card-r: 7px;
        --stack-down: 11px;
        --stack-up: 26px;
      }

      .game-shell {
        padding:
          max(6px, env(safe-area-inset-top))
          8px
          max(8px, env(safe-area-inset-bottom))
          8px;
      }

      .pill-capsule-btn {
        padding: 7px 11px;
        font-size: 12px;
      }

      .hud-col {
        padding: 2px 9px;
        min-width: 52px;
      }

      .hud-col-name {
        font-size: 9px;
      }

      .hud-col-val {
        font-size: 12.5px;
      }

      .atu-pill {
        padding: 7px 10px;
        font-size: 11px;
      }

      .corner-br, .suit-mini {
        display: none;
      }

      .card-top-strip {
        padding: 3px 4px 0 4px;
      }

      .rank-num {
        font-size: calc(var(--card-w) * 0.33 * var(--pip-scale));
      }

      .suit-tr-helper {
        font-size: calc(var(--card-w) * 0.27 * var(--pip-scale));
      }

      .card-center-art {
        inset: 33% 10% 8% 10%;
      }

      .center-big-suit {
        font-size: calc(var(--card-w) * 0.46 * var(--pip-scale));
      }

      .menu-split-grid {
        grid-template-columns: 1fr;
      }
    }
  
    /* =========================================================================
     * v2.6 SENIOR-ERGONOMIC MENU & TOGGLE SLIDER SWITCHES
     * ========================================================================= */
    #modal-menu .tysiac-modal-card,
    #modal-wyglad .tysiac-modal-card {
      max-width: 560px;
      width: 94vw;
      padding: 15px 18px;
      max-height: 95dvh;
      overflow-y: auto;
      scrollbar-width: none;
    }
    #modal-menu .tysiac-modal-card::-webkit-scrollbar,
    #modal-wyglad .tysiac-modal-card::-webkit-scrollbar {
      display: none;
    }

    #modal-menu .modal-top-row h2,
    #modal-wyglad .modal-top-row h2 {
      font-size: 26px;
      letter-spacing: 0.02em;
    }

    #modal-menu .close-circle-btn,
    #modal-wyglad .close-circle-btn {
      width: 42px;
      height: 42px;
      font-size: 18px;
    }

    .menu-hero-newdeal {
      width: 100%;
      min-height: 44px;
      padding: 8px 16px;
      border-radius: 16px;
      background: linear-gradient(135deg, #f3d87d 0%, #d4af37 100%);
      color: #062b1b;
      font-size: 17.5px;
      font-weight: 900;
      border: 1.5px solid #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      cursor: pointer;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
      margin-bottom: 8px;
      transition: transform 0.14s ease, filter 0.14s ease;
    }

    .menu-hero-newdeal:active {
      transform: scale(0.98);
    }

    .menu-section-label {
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.09em;
      color: var(--gold-bright);
      margin: 6px 0 4px 4px;
    }

    .menu-settings-list {
      display: flex;
      flex-direction: column;
      gap: 5px;
      margin-bottom: 6px;
    }

    .menu-setting-row {
      width: 100%;
      min-height: 41px;
      padding: 6px 14px;
      border-radius: 15px;
      background: rgba(6, 43, 27, 0.92);
      border: 1.5px solid rgba(212, 175, 55, 0.38);
      color: var(--text-cream);
      font-size: 16.5px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      cursor: pointer;
      text-align: left;
      transition: background 0.15s ease, border-color 0.15s ease;
    }

    .menu-setting-row:hover {
      background: rgba(14, 68, 45, 0.95);
      border-color: var(--gold-bright);
    }

    .menu-row-left {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    .menu-row-icon {
      font-size: 21px;
      line-height: 1;
      flex-shrink: 0;
      width: 26px;
      text-align: center;
    }

    .menu-row-title {
      font-size: 16.5px;
      font-weight: 700;
      color: #fdfbf7;
      line-height: 1.25;
    }

    /* Animated iOS/Android Toggle Switch Slider */
    .tysiac-switch {
      position: relative;
      width: 54px;
      height: 30px;
      border-radius: 9999px;
      background: rgba(4, 24, 15, 0.95);
      border: 1.5px solid rgba(212, 175, 55, 0.48);
      flex-shrink: 0;
      transition: background 0.22s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.22s ease;
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.45);
    }

    .tysiac-switch-knob {
      position: absolute;
      top: 2px;
      left: 2px;
      width: 23px;
      height: 23px;
      border-radius: 50%;
      background: #e2e8f0;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
      transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), background 0.22s ease;
    }

    .tysiac-switch.on {
      background: linear-gradient(135deg, #22c55e 0%, #15803d 100%);
      border-color: #f0d376;
    }

    .tysiac-switch.on .tysiac-switch-knob {
      transform: translateX(24px);
      background: #ffffff;
    }

    /* Segmented Pill Slider for Draw 1/3 and PL/EN */
    .segmented-pill {
      display: inline-flex;
      align-items: center;
      background: rgba(4, 24, 15, 0.95);
      border: 1.5px solid rgba(212, 175, 55, 0.45);
      border-radius: 9999px;
      padding: 3px;
      gap: 2px;
      flex-shrink: 0;
    }

    .seg-opt {
      padding: 5px 12px;
      border-radius: 9999px;
      font-size: 13.5px;
      font-weight: 800;
      color: var(--text-muted);
      transition: background 0.18s ease, color 0.18s ease;
    }

    .seg-opt.active {
      background: linear-gradient(135deg, var(--gold-bright), var(--gold-primary));
      color: #062b1b;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    }

    /* Large 2x2 Navigation Grid */
    .menu-nav-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .menu-nav-card {
      min-height: 43px;
      padding: 8px 14px;
      border-radius: 15px;
      background: rgba(6, 43, 27, 0.92);
      border: 1.5px solid rgba(212, 175, 55, 0.38);
      color: #fdfbf7;
      font-size: 16.5px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 11px;
      cursor: pointer;
      transition: background 0.15s ease, border-color 0.15s ease;
    }

    .menu-nav-card:hover {
      background: rgba(14, 68, 45, 0.95);
      border-color: var(--gold-bright);
    }

    .menu-nav-card.full-span {
      grid-column: span 2;
      justify-content: center;
      background: rgba(212, 175, 55, 0.16);
      border-color: var(--gold-bright);
      color: var(--gold-bright);
    }

    @media (max-width: 420px) {
      .menu-nav-grid {
        grid-template-columns: 1fr;
      }
      .menu-nav-card.full-span {
        grid-column: span 1;
      }
    }