/* Podstawowe tło strony */
body{
  margin:0; padding:16px; background:#0a3d18; color:#fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Stół */
#board{
  position: relative;
  background: linear-gradient(145deg,#2e7d32,#388e3c);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  width: 72vw;   /* zostanie nadpisane z wizard2 */
  height: 72vh;  /* zostanie nadpisane z wizard2 */
  margin: 0 auto;
}

/* Wrappery rąk — pozycjonowane absolutnie (top/left z wizard2) */
.hand-wrapper{
  position: absolute;
}
#north-wrapper, #south-wrapper { left:50%; transform: translateX(-50%); }
#east-wrapper,  #west-wrapper  { top:50%;  transform: translateY(-50%); }

/* Właściwe ręce wypełniają wrappery */
.hand{
  position: relative;
  width: 100%; height: 100%;
  display: flex;
}
#north, #south{ flex-direction: row;  justify-content: center; align-items: center; }
#east,  #west { flex-direction: column; align-items: center; justify-content: center; }
#east, #west { overflow: visible; }

/* Mini karty (podgląd) — tylko wizualne, rozmiar automatyczny */
.card{
  position:relative; width: clamp(22px, 4.6vw, 42px); aspect-ratio: 5/7;
  background:#fff; color:#000; border:1px solid #000; border-radius:6px;
  display:flex; align-items:flex-start; justify-content:flex-start; overflow:hidden;
  font-size: clamp(12px, 2.2vw, 18px);
}
.card span{ font-weight:800; padding:4px 6px; }
.card.red{ color:#d32f2f }

/* Nakładanie (podgląd) */
#north .card, #south .card { margin-left: -10px; }
#east  .card, #west  .card  { margin-top:  -28px; }
/* Rozmiar kart jest identyczny dla wszystkich rąk – już jest w .card (vw),
   ale na wszelki wypadek zablokujemy skalowanie przez flex */
#north .card, #south .card, #east .card, #west .card { flex: 0 0 auto; }
#north, #south { margin: 0 auto; }

/* Środek stołu, gdyby kiedyś był potrzebny */
#table-center{ position:absolute; inset:0; pointer-events:auto; }
.played-card{
  position:absolute; width: clamp(36px, 7.5%, 64px); aspect-ratio:5/7;
  background: rgba(255,255,255,.92); color:#000; border:1px solid #000; border-radius:6px;
  display:flex; align-items:center; justify-content:center; font-weight:700; z-index: 50;
}
#kartaN{ left:50%; transform: translateX(-50%); top:25% }
#kartaS{ left:50%; transform: translateX(-50%); top:75% }
#kartaW{ top:50%;  transform: translateY(-50%); left:25% }
#kartaE{ top:50%;  transform: translateY(-50%); left:75% }
.hand { overflow: hidden; }
#north .card, #south .card { margin-left: var(--stack-overlap-x, -10px); }
#east  .card, #west  .card  { margin-top:  var(--stack-overlap-y, -28px); }
#north .card, #south .card, #east .card, #west .card { flex: 0 0 auto; }

#rulingPanel button { padding:4px 8px; border:1px solid #fff; background:#0b722d; color:#fff; border-radius:8px; cursor:pointer; }
.button { background:#0b722d; color:#fff; }
.button { color:#fff !important; }
/* Moduł otwarć: ukryj miejsca na zagrane karty */
#table-center .played-card { display: none !important; }
/* Panel werdyktu ma być klikalny */
#rulingPanel{ pointer-events:auto; z-index: 200; }
/* Panel werdyktu ma być klikalny i nad stołem */
#table-center{ position:absolute; inset:0; pointer-events:auto; }


/* Ukryj sloty kart na stole dla N/W/E, ale zostaw S jako HUD */
#kartaN, #kartaW, #kartaE { display: none !important; }

/* HUD punktów S — widoczny i czytelny */

#kartaS.played-card{
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  background: rgba(0,0,0,.75);
  color: #fff;
  border: 1px solid #fff;
  border-radius: 8px;
  width: auto !important;
  height: auto !important;
  aspect-ratio: auto !important;    /* <- to gasi poprzednie 5/7 */
  font-weight: 700;
  z-index: 180;
  pointer-events: none;             /* HUD nie przechwytuje klików */
}



/* NS: pierwsza karta bez ucinania (zerujemy negatywny margines na pierwszej) */
#north .card:first-child, #south .card:first-child { margin-left: 0; }

/* NS: podpis pionowy po lewej krawędzi karty (lepsza czytelność na tel.) */
#north .card span, #south .card span {
  writing-mode: vertical-rl;
  text-orientation: upright;   /* <- kluczowa zmiana */
  -webkit-text-orientation: upright; /* dla części przeglądarek mobilnych */
  padding: 4px 2px;
  align-self: stretch;
  line-height: 1;              /* ciaśniej */
  letter-spacing: 1px;         /* odrobina oddechu między znakami */
}

/* N/S: nie pokazuj starego span, zamiast tego użyjemy ::before/::after */
#north .card span, #south .card span {
  display: none !important;
  writing-mode: initial !important;
  text-orientation: initial !important;
}

/* N/S: odznaka w lewym górnym rogu – RANK nad SUIT */
#north .card, #south .card { position: relative; }
#north .card::before, #south .card::before {
  content: attr(data-rank);
  position: absolute;
  top: 3px; left: 4px;
  font-weight: 800;
  line-height: 1;
}
#north .card::after, #south .card::after {
  content: attr(data-suit);
  position: absolute;
  top: calc(3px + 1.05em); left: 4px;
  line-height: 1;
}

/* N/S: pierwsza karta bez ucinania krawędzi */
#north .card:first-child, #south .card:first-child { margin-left: 0; }

/* Tytuł na środku */
h1 { text-align: center; margin: 12px 0 16px; }

/* Wspólny styl przycisków (tak jak "Powrót") */
.kk-btn,
.kk-btn:link,
.kk-btn:visited {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid #fff;
  border-radius: 8px;
  background: #0b722d;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  font-weight: 600;
}
.kk-btn:hover { filter: brightness(1.1); }

/* Ułożenie dwóch wierszy akcji */
.controls { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.controls-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* Ukryj UI PBN i "losuj z celem" w tym module treningowym */
#pbn-controls, #target-controls { display: block !important; }

/* Tryb treningu otwarć: skupiamy się na ręce S – zakryj N/E/W */
body.opening-training #north .card,
body.opening-training #east .card,
body.opening-training #west .card {
  opacity: .12; filter: blur(2px);
pointer-events: none;
 /* zachowuje rozkład, ale kart nie widać */
}
#chosenBid { text-align: center; }
/* Czerwone kolory w dymku */
#rulingPanel .suit-red { color: #ff5252; }

/* Moduł "odpowiedzi": ręce mają własną wysokość (nie 100% nieistniejącego wrappera) */
body.response-training #north,
body.response-training #south,
body.response-training #east,
body.response-training #west {
  height: auto !important;
}

/* (dla pewności) pokaż karty N/E/W rozmyte, nie ukryte */
body.response-training #north .card,
body.response-training #east  .card,
body.response-training #west  .card {
  visibility: visible !important;
  opacity: .16;
  filter: blur(2px);
  pointer-events: none;
}

/* Przełącznik: Odkryj/Zakryj N */
body.response-training.reveal-north #north .card {
  opacity: 1;
  filter: none;
  pointer-events: auto;
}

/* ===== TABELKA LICYTACJI ===== */
.bidding-table{
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  min-width: clamp(300px, 60%, 680px);
  background: rgba(0,0,0,.55);
  border: 1px solid #fff;
  border-radius: 12px;
  padding: 8px 10px;
  z-index: 180;
}

.bgrid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.bcell{
  text-align:center;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 8px;
  min-height: 32px;
  background: rgba(255,255,255,.08);
  position: relative;
  font-weight: 600;
  color: #fff;
}

.bcell.header{
  background: rgba(255,255,255,.15);
  font-weight: 700;
}

/* podświetlenie po werdykcie */
.bcell.good{ outline: 2px solid #2e7d32; }
.bcell.bad { outline: 2px solid #c62828; }

/* proste tooltipy */
.bcell .tip{
  display:none;
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  bottom: calc(100% + 8px);
  background:#fff;
  color:#000;
  border-radius:8px;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
  padding: 6px 8px;
  width: max-content;
  max-width: 280px;
  text-align:left;
  z-index: 300;
}
.bcell:hover .tip{ display:block; }

/* kolory ♥ ♦ w tabelce */
.bidding-table .suit-red{ color:#ff5252; }
#openingBanner { display: none !important; }

/* === Tabelka licytacji – kompaktowa (~50%) tylko w module odpowiedzi === */
body.response-training .bidding-table{
  min-width: clamp(180px, 30%, 340px); /* było: clamp(300px, 60%, 680px) */
  padding: 4px 6px;                    /* było: 8px 10px */
  border-radius: 8px;                  /* było: 12px */
}

body.response-training .bgrid{ gap: 3px; } /* było: 6px */

body.response-training .bcell{
  padding: 3px 4px;       /* było: 6px 8px */
  min-height: 18px;       /* było: 32px */
  border-radius: 6px;     /* było: 8px */
  font-size: 0.85rem;     /* mniejsza czcionka w komórkach */
}

body.response-training .bcell.header{
  font-size: 0.9rem;      /* nagłówki też ciut mniejsze */
}

body.response-training .bcell .tip{
  padding: 4px 6px;       /* było: 6px 8px */
  max-width: 200px;       /* było: 280px */
  bottom: calc(100% + 6px); /* było: + 8px */
}


/* Panel licytacji (jak w modułach otwarć/odpowiedzi) */
#declaration-panel { display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:12px; }
.bid-buttons { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.bid-buttons button{
  padding:6px 10px;
  border:1px solid #fff;
  background:#0b722d;
  color:#fff;
  border-radius:8px;
  cursor:pointer;
}
.bid-buttons button.suit-red{ color:#ff5252; background:#0b5a26; }
.selected{ background:#ffd600 !important; color:#000 !important; }

/* Wspólny styl przycisków (jak „Powrót”) */
.kk-btn,
.kk-btn:link,
.kk-btn:visited {
  display:inline-block; padding:8px 12px; border:1px solid #fff; border-radius:8px;
  background:#0b722d; color:#fff; text-decoration:none; cursor:pointer; font-weight:600;
}
.kk-btn:hover{ filter:brightness(1.1); }

/* Hover kart + żeby overlay nie blokował hoverów */
.card{ transition: transform .12s ease; }
.card:hover{ transform: translateY(-5px); z-index:20; }
#table-center{ pointer-events:none; }  /* hover przechodzi do kart */

/* Komórki w tabelce licytacji */
#biddingTable .bid-cell{
  border:1px solid rgba(255,255,255,.35);
  border-radius:8px;
  padding:.35rem .5rem;
  transition: box-shadow .2s ease, border-color .2s ease;
}

/* Natychmiastowy werdykt dla S */
#biddingTable .bid-cell.ok{
  border-color:#2ecc71;
  box-shadow:0 0 0 2px rgba(46,204,113,.5) inset;
}
#biddingTable .bid-cell.bad{
  border-color:#ff5252;
  box-shadow:0 0 0 2px rgba(255,82,82,.5) inset;
}
/* Komórki tabeli licytacji kolorowane natychmiast */
.bidding-table .bid-cell.ok  { border-color:#2ecc71 !important; box-shadow:0 0 0 2px rgba(46,204,113,.35) inset; }
.bidding-table .bid-cell.bad { border-color:#e74c3c !important; box-shadow:0 0 0 2px rgba(231,76,60,.35) inset; }
/* ——— Bidding table: bazowe komórki ——— */


/* zielony/czerwony po „Zatwierdź” (instant judge) */
#biddingTable .bcell.ok,
#biddingTable .bcell.good{ /* wspieramy oba warianty klas */
  border-color:#2ecc71 !important;
  box-shadow: inset 0 0 0 2px rgba(46,204,113,.35);
}
#biddingTable .bcell.bad{
  border-color:#e74c3c !important;
  box-shadow: inset 0 0 0 2px rgba(231,76,60,.35);
}
/* Tabelka licytacji */
#biddingTable { position:absolute; z-index:180; }
#biddingTable .bgrid{
  display:grid; grid-template-columns: repeat(4, minmax(64px, 1fr));
  gap: 6px; background:rgba(0,0,0,.65); border:1px solid #fff; border-radius:10px; padding:8px;
}
#biddingTable .bcell{ 
  min-height: 32px; display:flex; align-items:center; justify-content:center; 
  padding:4px 6px; border-radius:6px; border:1px solid rgba(255,255,255,.25);
}
#biddingTable .header{ font-weight:700; background:rgba(255,255,255,.08); }
#biddingTable .tip{ margin-top:4px; font-size:.9em; opacity:.9; }

#biddingTable .bgrid-head .header{
  text-align: center;
  font-weight: 700;
  opacity: .9;
  padding: 2px 4px;
}

#biddingTable .bid-row .bid-cell,
#biddingTable .bcell{
  min-height: 24px;
  padding: 4px 6px;
  text-align: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 6px;
  font-weight: 600;
}

/* tooltip/uzasadnienie w komórce */
#biddingTable .tip{
  margin-top: 2px;
  font-size: .82em;
  opacity: .85;
}

/* Kolorowanie komórki S po zatwierdzeniu */
#biddingTable .bid-cell.ok,
#biddingTable .bid-cell.good{
  outline: 2px solid #1ec561;
  background: rgba(30,197,97,.14);
}
#biddingTable .bid-cell.bad{
  outline: 2px solid #e53935;
  background: rgba(229,57,53,.12);
}

/* Czerwone symbole */
#biddingTable .suit-red{ color:#ff5252; }

 /* ==== [NADPISANIA dla modułu otwarć] ==== */

/* 1) Skasuj rozmycie N narzucone przez .opening-training – E/W zostają rozmyte */
body.opening-training #north .card{
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
  visibility: visible !important;  /* na wypadek gdyby jakiś styl ukrywał */
}

/* 2) Domyślnie pokazuj N jako „plecki” (szare karty) gdy klasa kk-hide-north jest w <body> */
body.kk-hide-north #north .card{
  background: #bdbdbd !important;          /* szare plecki */
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 6px, rgba(0,0,0,.05) 6px 12px);
  color: transparent !important;            /* ukryj kolor frontu */
  border-color: #666 !important;
}

/* 3) Przy „pleckach” wyłączaj nadruk rangi/symbolu (pseudo-elementy frontu) */
body.kk-hide-north #north .card::before,
body.kk-hide-north #north .card::after{
  content: '' !important;
}

/* 4) Po odkryciu (bez kk-hide-north) wracają standardowe fronty (nic nie trzeba dopisywać) */
/* Tooltip w tabelce nad wszystkim */
/* 🔧 Odblokuj hovery na tabelce mimo #table-center { pointer-events:none } */
#biddingTable,
#biddingTable * {
  pointer-events: auto !important;
}

/* Na wszelki wypadek dopnij jeszcze raz reguły tooltips z mocniejszą specyficznością */
#biddingTable .bcell { position: relative; }
#biddingTable .bcell .tip{
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 8px);
  background: #fff;
  color: #000;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
  padding: 6px 8px;
  width: max-content;
  max-width: 280px;
  z-index: 999;        /* ponad overlayami */
  white-space: normal; /* zawijaj długie powody */
  pointer-events: none;/* dymek nie przechwytuje kursora */
}
#biddingTable .bcell:hover .tip{ display: block; }
/* Stan „info mode” przycisku */
#btn-next-round.info-mode{
  background:#0b5a26;
  border-color:#9be2b9;
}

/* Pulsujące wyróżnienie komórki N po kliknięciu „Zobacz” */
#biddingTable .bcell.n-flash{
  outline: 2px solid #1ec561;
  box-shadow: inset 0 0 0 2px rgba(30,197,97,.22);
  animation: kk-n-flash 1.2s ease-in-out 4; /* ~4.8 s pulsowania */
}

@keyframes kk-n-flash{
  0%   { box-shadow: inset 0 0 0 2px rgba(30,197,97,.22), 0 0 0 0 rgba(30,197,97,0.0); }
  50%  { box-shadow: inset 0 0 0 2px rgba(30,197,97,.55), 0 0 10px 3px rgba(30,197,97,.35); }
  100% { box-shadow: inset 0 0 0 2px rgba(30,197,97,.22), 0 0 0 0 rgba(30,197,97,0.0); }
}

/* (opcjonalnie) uszanowanie prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  #biddingTable .bcell.n-flash{ animation: none; }
}

/* =============================
   PATCH: Senior-friendly bez ruszania tabelki
   ============================= */

/* 1) PRZYWRÓĆ zachowanie tabelki licytacji (bez rozszerzania na 100%) */
#biddingTable {
  width: auto !important;              /* cofa "width:100%" z poprzednich stylów */
  border-collapse: separate !important;/* unikaj globalnego collapse */
  font-size: inherit !important;       /* zostaw rozmiar bazowy jak był */
}
#biddingTable td,
#biddingTable th {
  padding: initial !important;         /* nie wymuszaj przez senior styl */
}

/* 2) POWIĘKSZ TYLKO PRZYCISKI LICYTACJI (nie globalnie wszystkie buttony) */
.bid-buttons button {
  /* rozmiar treści (cyferki i symbole) */
  font-size: clamp(18px, 2.4vw, 24px) !important;
  line-height: 1.05 !important;

  /* większy, wygodny obszar kliku */
  min-height: 44px !important;
  min-width: 44px !important;
  padding: 8px 14px !important;

  border-radius: 10px !important;
  border: 1px solid #ffffff !important;

  /* bazowy zielony jak w module */
  background: #0b722d !important;
  color: #ffffff !important;

  /* szybka reakcja, bez rozciągania */
  transition: background-color .12s ease, box-shadow .12s ease !important;
}

/* popraw kontrast hover — ciemniej zamiast jaśniej */
.bid-buttons button:hover:not(.selected) {
  background: #0a5a26 !important;   /* ciemniejsza zieleń, tekst zostaje biały */
  color: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}

/* aktywny/wybrany */
.bid-buttons button.selected {
  background: #ffd600 !important;
  color: #000 !important;
}

/* czerwone suity — tylko w stanie normalnym; na hover zostaw biały tekst dla czytelności */
.bid-buttons button.suit-red {
  color: #ff5252 !important;
  background: #0b5a26 !important; /* ciemniejsza bazowa, lepszy kontrast dla czerwieni */
}
.bid-buttons button.suit-red:hover:not(.selected) {
  background: #094a20 !important;  /* jeszcze odrobinę ciemniej na hover */
  color: #ffffff !important;       /* zachowaj czytelność przy najechaniu */
}

/* 3) PRZYCISKI AKCJI (Powrót / Zatwierdź / Licytuj dalej) — większe, ale spójne */
.kk-btn,
.kk-btn:link,
.kk-btn:visited {
  font-size: clamp(16px, 2vw, 20px) !important;
  min-height: 44px !important;
  padding: 10px 16px !important;
  border-radius: 10px !important;
}
.kk-btn:hover {
  filter: none !important;
  background: #0a5a26 !important;
}

/* 4) CZYTELNY FOCUS dla klawiatury */
.bid-buttons button:focus-visible,
.kk-btn:focus-visible {
  outline: 3px solid #9be2b9 !important;
  outline-offset: 2px !important;
}

/* 5) NIE ZMIENIAJ rozmiaru „bidding-table” w wersji odpowiedzi (zostaw sprawdzony layout) */
body.response-training .bidding-table {
  min-width: clamp(180px, 30%, 340px) !important; /* jak u Ciebie (sprawdzone) */
  padding: 4px 6px !important;
  border-radius: 8px !important;
}
body.response-training .bgrid { gap: 3px !important; }
body.response-training .bcell {
  padding: 3px 4px !important;
  min-height: 18px !important;
  border-radius: 6px !important;
  font-size: 0.85rem !important;
}
body.response-training .bcell.header { font-size: 0.9rem !important; }

/* 6) DROBNE: nie powiększaj kart przez „senior” – zostaw ich rozmiar z modułu */
.card span { font-size: inherit !important; padding: 4px !important; }

/* --- Fix: wymuś żółte podświetlenie również dla czerwonych (♦/♥) --- */
.bid-buttons button.suit-red.selected,
.bid-buttons button.suit-red.selected:hover {
  background: #ffd600 !important;
  color: #000 !important;
}