.play-section {
  width: min(1180px, calc(100% - 1rem));
  margin: clamp(2rem, 5vw, 4rem) auto;
}

.game-shell {
  overflow: hidden;
  border: 1px solid #4d704f;
  border-radius: 1rem;
  color: #f8f1df;
  background:
    radial-gradient(circle at 50% 45%, rgba(75, 134, 92, .7), transparent 46%),
    linear-gradient(145deg, #143b2c, #1e523a 58%, #123629);
  box-shadow: 0 24px 70px rgba(23, 49, 34, .25);
}

.game-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.14);
  background: rgba(8, 28, 20, .45);
}

.game-title { display: flex; align-items: center; gap: .7rem; }
.game-title-mark {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.75rem;
  border: 1px solid #d9bd75;
  border-radius: .3rem;
  color: #d9bd75;
  background: rgba(255,255,255,.08);
  font-family: var(--serif);
  font-weight: 700;
}
.game-title strong { display: block; font-family: var(--serif); font-size: 1.15rem; }
.game-title small { display: block; color: #c6d4c7; }

.game-btn {
  min-height: 42px;
  padding: .55rem .85rem;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: .4rem;
  color: #fff9eb;
  background: rgba(255,255,255,.1);
  font: 650 .9rem/1.2 var(--sans);
  cursor: pointer;
}
.game-btn:hover { background: rgba(255,255,255,.18); }
.game-btn.primary { border-color: #e2c77e; color: #163728; background: #e2c77e; }
.game-btn.primary:hover { background: #f0d992; }
.game-btn:disabled { cursor: not-allowed; opacity: .45; }

.game-setup {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4.5rem) clamp(1rem, 5vw, 3rem);
  text-align: center;
}
.game-setup h2 { margin: 0 0 .7rem; color: white; font-size: clamp(2rem, 5vw, 3.4rem); }
.game-setup > p { max-width: 690px; margin: 0 auto 1.8rem; color: #d7e0d7; }
.contract-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
.contract-choice {
  min-height: 158px;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: .65rem;
  color: white;
  background: rgba(255,255,255,.08);
  text-align: left;
  cursor: pointer;
}
.contract-choice:hover, .contract-choice[aria-pressed="true"] {
  border-color: #e2c77e;
  background: rgba(226,199,126,.16);
  transform: translateY(-2px);
}
.contract-choice strong { display: block; margin-bottom: .35rem; font-family: var(--serif); font-size: 1.28rem; }
.contract-choice span { color: #d5dfd5; font-size: .86rem; line-height: 1.45; }
.setup-options { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.2rem 0; text-align: left; }
.setup-box { padding: 1rem; border: 1px solid rgba(255,255,255,.16); border-radius: .55rem; background: rgba(8,28,20,.22); }
.setup-box legend, .setup-box label { color: #e7d7aa; font-size: .86rem; font-weight: 700; }
.suit-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; margin-top: .6rem; }
.suit-choice { padding: .55rem .25rem; background: rgba(8,28,20,.38); }
.suit-choice:hover { background: rgba(8,28,20,.26); }
.suit-choice[aria-pressed="true"] { border-color: #e2c77e; background: #e2c77e; color: #173a29; }
.suit-choice .red-suit { color: #ffc9c1; }
.suit-choice[aria-pressed="true"] .red-suit { color: #8f302c; }
.stake-select {
  width: 100%;
  margin-top: .6rem;
  padding: .62rem;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: .35rem;
  color: #173a29;
  background: #fffaf0;
  font: inherit;
}
.setup-note { margin-top: 1.4rem; color: #bdd0c0; font-size: .82rem; }
.setup-options.single { grid-template-columns: min(100%, 420px); justify-content: center; }
.blind-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; width: min(100%, 420px); margin: .7rem auto 0; }
.ledger-bar { display: grid; grid-template-columns: auto repeat(3, 1fr); gap: 1px; align-items: center; background: rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); }
.ledger-label { padding: .4rem .85rem; background: rgba(8,28,20,.5); font-size: .72rem; color: #aebfae; letter-spacing: .02em; }
.ledger-cell { padding: .4rem .85rem; background: rgba(8,28,20,.5); display: flex; align-items: baseline; gap: .4rem; }
.ledger-cell small { color: #aebfae; font-size: .72rem; }
.ledger-cell strong { font-size: .95rem; color: #fff8e7; font-variant-numeric: tabular-nums; }
.ledger-cell.plus strong { color: #9fd3ac; }
.ledger-cell.minus strong { color: #f0a9a3; }
.ledger-panel { margin: 1.2rem 0; text-align: left; }
.ledger-panel h3 { margin: 0 0 .5rem; font-size: 1rem; }
.ledger-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.ledger-table th, .ledger-table td { padding: .4rem .6rem; border-bottom: 1px solid rgba(255,255,255,.14); text-align: left; font-variant-numeric: tabular-nums; }
.ledger-table th { font-size: .72rem; color: #aebfae; font-weight: 500; }
.ledger-table td.plus { color: #9fd3ac; }
.ledger-table td.minus { color: #f0a9a3; }
.ledger-note { margin-top: .5rem; font-size: .8rem; color: #bdd0c0; }
.meld-btn { margin: .35rem .3rem .55rem 0; background: #e2c77e; border-color: #e2c77e; color: #173a29; font-weight: 700; }
.result-victor { font-size: 1.15rem; margin: .4rem 0 .6rem; }
.game-btn, .suit-choice, button.playing-card, .contract-choice { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

.game-board { min-height: 720px; }
.game-hud {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.12);
}
.hud-item { padding: .7rem .85rem; background: rgba(8,28,20,.54); }
.hud-item small { display: block; color: #aebfae; font-size: .72rem; text-transform: none; }
.hud-item strong { display: block; color: #fff8e7; font-size: .95rem; }

.table-area {
  position: relative;
  display: grid;
  grid-template: "left trick right" minmax(300px, 1fr) / minmax(130px, .7fr) minmax(300px, 1.7fr) minmax(130px, .7fr);
  align-items: center;
  gap: 1rem;
  min-height: 430px;
  padding: 1.3rem;
}
.opponent { display: grid; justify-items: center; gap: .65rem; }
.opponent.left { grid-area: left; }
.opponent.right { grid-area: right; }
.player-name {
  padding: .4rem .7rem;
  border-radius: 999px;
  color: #f9ecd0;
  background: rgba(8,28,20,.48);
  font-size: .86rem;
  text-align: center;
}
.player-name.active { box-shadow: 0 0 0 2px #e2c77e; }
.backs { display: flex; justify-content: center; padding-left: 1.4rem; }
.card-back {
  width: 48px;
  height: 68px;
  margin-left: -1.4rem;
  border: 3px solid #efe7d5;
  border-radius: .35rem;
  background:
    repeating-linear-gradient(45deg, transparent 0 5px, rgba(255,255,255,.15) 5px 7px),
    #8c342f;
  box-shadow: 2px 3px 8px rgba(0,0,0,.25);
}
.trick-zone {
  grid-area: trick;
  position: relative;
  min-height: 280px;
  border: 1px dashed rgba(255,255,255,.2);
  border-radius: 50%;
  background: rgba(5,30,20,.16);
}
.played-card { position: absolute; }
.played-card.p0 { left: 50%; bottom: 1rem; transform: translateX(-50%); }
.played-card.p1 { left: 1rem; top: 50%; transform: translateY(-50%) rotate(-7deg); }
.played-card.p2 { right: 1rem; top: 50%; transform: translateY(-50%) rotate(7deg); }
.trick-message {
  position: absolute;
  top: 50%; left: 50%;
  width: min(190px, 52%);
  transform: translate(-50%, -50%);
  color: #d8e4da;
  font-family: var(--serif);
  text-align: center;
}

.playing-card {
  position: relative;
  width: 78px;
  height: 112px;
  flex: 0 0 auto;
  padding: .35rem;
  border: 1px solid #d7ceba;
  border-radius: .48rem;
  color: #20221e;
  background: #fffdf7;
  box-shadow: 0 7px 15px rgba(0,0,0,.25);
  font: 700 1.15rem/1 var(--serif);
}
button.playing-card { cursor: pointer; transition: transform .15s ease, opacity .15s ease; }
button.playing-card:hover:not(:disabled) { transform: translateY(-13px); }
button.playing-card:disabled { cursor: not-allowed; opacity: .78; filter: brightness(.88); }
.playing-card.red { color: #a22d29; }
.playing-card .corner { position: absolute; top: .45rem; left: .45rem; display: grid; gap: .12rem; justify-items: center; }
.playing-card .pip { display: grid; height: 100%; place-items: center; font-size: 2.3rem; font-weight: 400; }
.playing-card .card-suit-name { position: absolute; right: .35rem; bottom: .35rem; color: #6c675c; font: 600 .59rem/1 var(--sans); }

.human-area { padding: .9rem 1rem 1.15rem; border-top: 1px solid rgba(255,255,255,.12); background: rgba(8,28,20,.28); }
.human-meta { display: flex; justify-content: space-between; gap: 1rem; align-items: center; max-width: 900px; margin: 0 auto .7rem; }
.human-meta strong { font-family: var(--serif); font-size: 1.05rem; }
.human-hand { display: flex; justify-content: center; min-height: 120px; padding: .6rem 0 0 1.8rem; }
.human-hand .playing-card { margin-left: -1.8rem; }
.human-hand .playing-card:first-child { margin-left: 0; }
.suit-options .warsaw-choice { grid-column: 1 / -1; }
.human-hand.first-four { justify-content: center; padding-left: 0; gap: .55rem; }
.human-hand.first-four .playing-card { margin-left: 0; }
.game-status { color: #e7d7aa; font-size: .9rem; text-align: right; }

.game-result {
  max-width: 680px;
  margin: 0 auto;
  padding: clamp(2rem, 7vw, 5rem) 1.2rem;
  text-align: center;
}
.game-result .result-symbol { font-family: var(--serif); font-size: 4.5rem; line-height: 1; }
.game-result h2 { margin: .5rem 0; color: white; font-size: clamp(2rem, 5vw, 3.4rem); }
.game-result p { color: #d5dfd5; }
.result-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; margin: 1.5rem 0; }
.result-stat { padding: .85rem; border: 1px solid rgba(255,255,255,.16); border-radius: .45rem; background: rgba(255,255,255,.08); }
.result-stat strong { display: block; color: #e7d7aa; font-family: var(--serif); font-size: 1.35rem; }
.result-stat span { color: #c8d6ca; font-size: .78rem; }
.game-attribution { margin: .85rem auto 0; color: var(--muted); font-size: .82rem; }
.game-attribution strong { color: var(--ink); }

@media (max-width: 820px) {
  .contract-grid { grid-template-columns: repeat(2, 1fr); }
  .table-area { grid-template: "left right" auto "trick trick" minmax(280px, 1fr) / 1fr 1fr; }
  /* Grid items default to min-width: auto, so the card fan used to force the
     column wider than the shell and .game-shell's overflow: hidden cut it off. */
  .table-area > * { min-width: 0; }
  .opponent { grid-auto-flow: column; align-items: center; justify-content: center; min-width: 0; }
  .backs { min-width: 0; padding-left: 0; }
  .card-back { width: 38px; height: 54px; }
  .card-back:first-child { margin-left: 0; }
  .game-board { min-height: 780px; }
}

@media (max-width: 560px) {
  .game-topbar { align-items: flex-start; }
  .game-title small { display: none; }
  .contract-grid, .setup-options { grid-template-columns: 1fr; }
  .suit-options { grid-template-columns: repeat(2, 1fr); }
  .game-hud { grid-template-columns: repeat(2, 1fr); }
  .table-area { padding: .8rem; }
  /* Side by side, the name pill plus the card fan no longer fit the half-width
     column, so stack them again below 560px. */
  .opponent { grid-auto-flow: row; }
  .card-back { width: 30px; height: 43px; margin-left: -1.1rem; }
  .card-back:first-child { margin-left: 0; }
  .trick-zone { min-height: 260px; min-width: 0; }
  .playing-card { width: 66px; height: 96px; font-size: 1rem; }
  .playing-card .pip { font-size: 1.9rem; }
  .human-hand { flex-wrap: wrap; justify-content: center; gap: .45rem; overflow: visible; padding-left: 0; }
  .human-hand .playing-card { margin-left: 0; width: 62px; height: 92px; }
  .human-hand .playing-card:first-child { margin-left: 0; }
  .human-meta { flex-direction: column; align-items: stretch; gap: .3rem; }
  .game-status { max-width: none; }
  .result-stats { grid-template-columns: 1fr; }
  .suit-choice { padding: .8rem .25rem; font-size: 1rem; }
  .blind-options { grid-template-columns: 1fr; width: 100%; }
  .game-btn.primary, #deal-button { width: 100%; padding: .85rem; font-size: 1.05rem; }
  .stake-select { padding: .8rem; }
  .game-board { min-height: 0; }
  .trick-zone { min-height: 210px; }
  .human-area { padding-bottom: max(1.15rem, env(safe-area-inset-bottom)); }
  .ledger-bar { grid-template-columns: 1fr 1fr 1fr; }
  .ledger-label { grid-column: 1 / -1; }

  /* Kolorystyka mobilna. Paleta ta sama co na desktopie, ale na waskim ekranie
     powloka zajmowala caly widok, radialny rozblysk zwijal sie w plame, a piec
     nalozonych przycieminien czytalo sie jako bloto. Tu: papier wraca jako rama,
     zielen podciagnieta do tej z reszty serwisu, rozblysk sciszony, przycieminienia
     zrownane. Desktop nietkniety. */
  .play-section { width: calc(100% - 2rem); margin: 1.6rem auto; }
  .game-shell {
    border-radius: .8rem;
    box-shadow: 0 10px 26px rgba(23, 49, 34, .18);
    background:
      radial-gradient(120% 60% at 50% 0%, rgba(86, 148, 104, .38), transparent 70%),
      linear-gradient(180deg, #24553e, #214d3a 60%, #1c4433);
  }
  .game-topbar { background: rgba(8, 28, 20, .30); }
  .hud-item { background: rgba(8, 28, 20, .34); }
  .table-area { background: rgba(8, 28, 20, .22); }
  .human-area { background: rgba(8, 28, 20, .18); }
  .setup-box { background: rgba(8, 28, 20, .16); }
  .suit-choice { background: rgba(8, 28, 20, .24); }
  .trick-zone { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .contract-choice, button.playing-card { transition: none; }
}

/* Stół gry jest ciemnozielony na każdym ustawieniu. Blok istnieje po to, żeby
   arkusz gry deklarował obsługę trybu ciemnego tak samo jak styles.css, bo
   inaczej Chrome na Androidzie przyciemnia algorytmicznie całą stronę razem
   z planszą. Pełne uzasadnienie w styles.css, na końcu pliku. */
@media (prefers-color-scheme: dark) {
  .game-shell { color: #f8f1df; }
  /* Lista rozwijana selecta rysowana jest przez przeglądarkę. Bez tego wiersz
     byłby ciemny na jasnym tle pola, które ustawiamy wprost wyżej. */
  .stake-select { color-scheme: light; }
}


/* ---------------------------------------------------------------------------
   Kontrast i zageszczenie, 2026-08-30, po zrzutach z telefonu Brunona.
   Dwa problemy: (1) na telefonie parametry gry wyjezdzaly poza ekran i trzeba
   bylo przewijac, (2) rejestr partii mial jasny tekst na jasnym tle.
   Przyczyna (2): wymuszony ciemny motyw w Chrome odwraca tlo elementow bez
   wlasnego koloru, a tekst zostawia jasny. Lekarstwo: zadeklarowac schemat
   kolorow dla planszy i dac tabeli wlasne, jawne tlo.
--------------------------------------------------------------------------- */

.game-shell { color-scheme: dark; }

.ledger-table { background: rgba(6, 26, 18, .55); border-radius: .4rem; overflow: hidden; }
.ledger-table th { background: rgba(6, 26, 18, .9); color: #cfe0d2; }
.ledger-table td { background: rgba(10, 38, 26, .78); color: #f3ece0; }
.ledger-table td.plus { color: #86e6a2; font-weight: 700; }
.ledger-table td.minus { color: #ff9d94; font-weight: 700; }
.ledger-table td strong { color: inherit; }
.ledger-note { color: #cddccf; }
.game-result p { color: #e2ebe2; }
.result-stat span { color: #d7e3d8; }
.result-stat strong { color: #f2dfa8; }

@media (max-width: 560px) {
  /* Wszystkie parametry gry maja miescic sie bez przewijania. */
  .game-board { min-height: 0; }
  .table-area { min-height: 0; padding: .55rem .6rem; gap: .5rem;
    grid-template: "left right" auto "trick trick" minmax(120px, auto) / 1fr 1fr; }
  .trick-zone { min-height: 132px; border-radius: 1.1rem; }
  .trick-message { width: min(150px, 62%); font-size: .82rem; }
  .played-card.p0 { bottom: .35rem; }
  .played-card.p1 { left: .35rem; }
  .played-card.p2 { right: .35rem; }
  .opponent { grid-auto-flow: row; gap: .3rem; }
  .player-name { padding: .2rem .5rem; font-size: .74rem; line-height: 1.25; }
  .card-back { width: 22px; height: 32px; margin-left: -.8rem; border-width: 2px; }
  .hud-item { padding: .35rem .5rem; }
  .hud-item small { font-size: .64rem; }
  .hud-item strong { font-size: .82rem; }
  .human-area { padding: .5rem .6rem .7rem; }
  .human-meta { margin-bottom: .35rem; gap: .5rem; }
  .human-meta strong { font-size: .84rem; padding: .2rem .5rem; }
  .game-status { font-size: .76rem; }
  .human-hand { min-height: 0; gap: .28rem; padding-top: .35rem; }
  .human-hand .playing-card { width: 52px; height: 76px; font-size: .86rem; }
  .human-hand .playing-card .pip { font-size: 1.45rem; }
  .human-hand .playing-card .card-suit-name { font-size: .5rem; }
  /* Ekran wyniku: dwie kolumny zamiast jednej, zeby nie bylo slupka kafli. */
  .result-stats { grid-template-columns: repeat(2, 1fr); gap: .4rem; margin: .8rem 0; }
  .result-stat { padding: .45rem .5rem; }
  .result-stat strong { font-size: 1.05rem; }
  .result-stat span { font-size: .68rem; }
  .game-result { padding: 1.1rem .8rem; }
  .game-result .result-symbol { font-size: 2.4rem; }
  .game-result h2 { font-size: 1.5rem; margin: .25rem 0; }
  .result-victor { font-size: .98rem; margin: .25rem 0 .4rem; }
  .ledger-panel { margin: .7rem 0; }
  .ledger-table { font-size: .82rem; }
  .ledger-table th, .ledger-table td { padding: .3rem .45rem; }
}

@media (max-width: 820px) and (min-width: 561px) {
  .game-board { min-height: 0; }
  .table-area { min-height: 0; }
  .trick-zone { min-height: 190px; }
  .result-stats { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 560px) {
  /* pasek parametrow w jednym rzedzie: cztery kafle zamiast dwoch rzedow */
  .game-hud { grid-template-columns: repeat(4, 1fr); }
  .hud-item { padding: .3rem .25rem; text-align: center; }
  .hud-item small { font-size: .58rem; letter-spacing: 0; }
  .hud-item strong { font-size: .74rem; }
}

/* Ekran wyniku nie mial wlasnego tla i dziedziczyl jasne tlo strony, wiec jasny
   tekst ladowal na jasnym. Dajemy mu wlasne, ciemne tlo, zeby kontrast nie
   zalezal od tego, co akurat jest wyzej w drzewie. */
.game-result { background: #0d2b1e; color: #f3ece0; border-radius: .5rem; }
.game-result h2 { color: #fff8e7; }
.result-stat { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22); }
.result-stat strong { color: #f7e7b4; }
.result-stat span { color: #dbe6dc; }
.ledger-note { color: #cddccf; }
.game-result .setup-note, .game-result p { color: #e2ebe2; }

@media (max-width: 560px) {
  /* Pasek tytulowy zabieral ~180px, bo tytul lamal sie na dwie linie. */
  .game-topbar { padding: .45rem .6rem; align-items: center; }
  .game-title strong { font-size: .95rem; line-height: 1.15; }
  .game-title-mark { width: 30px; height: 30px; font-size: .8rem; }
  .game-topbar .game-btn { padding: .35rem .6rem; font-size: .75rem; min-height: 0; }
  .trick-zone { min-height: 116px; }
}

/* Rozdanie, w ktorym czlowiek rozdaje: zamiast wlasnej reki widzi trzeciego
   gracza, zeby stol byl kompletny. Wyglad jak u pozostalych przeciwnikow. */
.rozdajacy-panel { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .6rem 0; }
.rozdajacy-panel .player-name { text-align: center; }