/* WERSJA: v1.0 | ZMIANA: 2026-10-18: Stół Kierek wypełnia dostępny ekran w pionie i poziomie. */
html { height: 100%; overflow: hidden; }
body { height: 100dvh; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.topbar { flex: none; padding: calc(6px + env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) 6px max(8px, env(safe-area-inset-left, 0px)); }
main { flex: 1; min-height: 0; width: 100%; max-width: none; margin: 0; padding: 4px max(4px, env(safe-area-inset-right, 0px)) max(4px, env(safe-area-inset-bottom, 0px)) max(4px, env(safe-area-inset-left, 0px)); display: flex; }
#game { flex: 1; min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 4px; }
.gamebar { margin: 0; align-items: center; gap: 4px; }
.gamebar #roomLabel { min-width: 0; white-space: nowrap; font-size: 11px; }
.gamebar > div { flex-wrap: nowrap; gap: 4px; }
.gamebar button { padding: 6px; font-size: 11px; }
#waiting { min-height: 0; overflow: auto; margin: 0; }
#game[data-phase="waiting"] { grid-template-rows: auto minmax(0, 1fr); }
#game[data-phase="waiting"] .table-drawers { display: none; }
#table {
  min-height: 0; min-width: 0; margin: 0; border-radius: 12px;
  container-type: size;
  --hand-card-w: clamp(54px, 16vw, 84px);
  --hand-card-h: calc(var(--hand-card-w) * 1.4);
  --hand-block: calc(var(--hand-card-h) + 62px);
  --trick-card-w: clamp(36px, 10cqh, 64px);
}
#table .seat { min-width: 68px; max-width: min(23%, 160px); padding: 5px; font-size: 11px; }
#table .seat small { margin-top: 2px; font-size: 10px; }
#table .seat strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#table .seat button { position: absolute; right: 2px; bottom: 2px; width: 24px; height: 24px; margin: 0; padding: 0; font-size: 16px; }
#table .seat:has(button) small { padding-right: 23px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#table .seat-2 { top: 6px; min-width: 150px; max-width: 45%; }
#table .seat-1 { left: 5px; top: 40%; }
#table .seat-3 { right: 5px; top: 40%; }
#table .seat-0 { bottom: var(--hand-block); min-width: 150px; max-width: 50%; }
#table .center { position: absolute; inset: 72px 4px calc(var(--hand-block) + 66px); min-height: 0; padding: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 3px; }
#table #roundLabel { font-size: 10px; letter-spacing: 1px; }
#table #status { margin: 0 65px; min-height: 0; font-size: 12px; line-height: 1.25; max-height: 100%; overflow: auto; }
#table .trick { width: min(210px, calc(100% - 145px)); height: 100%; min-height: 0; margin: 0 auto; }
#table .played .card { width: var(--trick-card-w); height: calc(var(--trick-card-w) * 1.4); padding: 4px; }
#table .played small { font-size: 9px; }
#table #actions { position: static; margin: 0; font-size: 12px; z-index: 3; }
#table #actions button { padding: 7px 10px; font-size: 12px; max-width: 100%; }
#table .hand-area { left: 4px; right: 4px; bottom: 0; }
#table .hand-label { margin: 0 6px 0; min-height: 26px; gap: 4px; }
#table .hand { min-height: 0; height: calc(var(--hand-card-h) + 36px); padding: 26px 4px 10px; }
#table .hand .card { width: var(--hand-card-w); height: var(--hand-card-h); padding: 5px; }
#table .hand .card + .card { margin-left: min(0px, calc((100cqw - 24px - 13 * var(--hand-card-w)) / 12)); }
.table-drawers { display: flex; gap: 4px; position: relative; min-width: 0; }
.table-drawers > details.panel { flex: 1; min-width: 0; margin: 0; padding: 0; border-radius: 8px; }
.table-drawers summary { padding: 7px; font-size: 11px; white-space: nowrap; }
.table-drawers > details > div { position: absolute; bottom: calc(100% + 4px); left: 0; right: 0; max-height: 65dvh; overflow: auto; padding: 12px; border: 1px solid #f3c66388; border-radius: 12px; background: #072911fa; z-index: 15; box-shadow: 0 -5px 25px #0008; }
@media (max-height: 650px) and (orientation: portrait) {
  #table { --hand-card-w: 54px; --trick-card-w: clamp(32px, 9cqh, 46px); }
  #table .center { top: 62px; bottom: calc(var(--hand-block) + 60px); }
  #table .seat { font-size: 10px; padding: 4px; }
  #table .seat small { font-size: 9px; }
  #table #roundLabel { letter-spacing: 0; }
  #table #status { font-size: 11px; }
}
@media (orientation: landscape) and (max-height: 600px) {
  .topbar { padding-top: max(3px, env(safe-area-inset-top, 0px)); padding-bottom: 3px; }
  .topbar button, .shared-game-menu > summary { height: 30px; padding: 4px 8px; }
  .topbar > a { font-size: 12px; }
  .topbar > a::before { display: none; }
  .gamebar button { padding: 4px 7px; }
  .table-drawers summary { padding: 4px 7px; }
  #table { --hand-card-w: clamp(44px, 15cqh, 62px); --trick-card-w: clamp(30px, 14cqh, 48px); --hand-block: calc(var(--hand-card-h) + 50px); }
  #table .seat { top: 4px; font-size: 10px; max-width: 22%; }
  #table .seat small { display: inline; font-size: 9px; }
  #table .seat small + small::before { content: ' · '; }
  #table .seat-0 { top: auto; bottom: 5px; left: 5px; transform: none; max-width: 120px; }
  #table .center { inset: 46px 8px var(--hand-block); grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-items: center; gap: 2px 12px; }
  #table #roundLabel { grid-area: 1 / 1; }
  #table #status { grid-area: 2 / 1; margin: 0; font-size: 11px; }
  #table .trick { grid-area: 1 / 2 / 3; width: 150px; }
  #table #actions { grid-area: 1 / 3 / 3; }
  #table .hand-area { left: 130px; }
  #table .hand { height: calc(var(--hand-card-h) + 27px); padding-top: 22px; padding-bottom: 5px; }
  #table .hand-label { min-height: 23px; font-size: 10px; }
  #table .hand .card + .card { margin-left: min(0px, calc((100cqw - 150px - 13 * var(--hand-card-w)) / 12)); }
}
@media (max-height: 650px) {
  #table .played .card > span:first-child, #table .played .card .bottom { font-size: 16px; }
  #table .played .card .corner-suit { font-size: 11px; }
  #table .played .card .pip { font-size: 20px; }
  #table .hand .card > span:first-child, #table .hand .card .bottom { font-size: 19px; }
  #table .hand .card .corner-suit { font-size: 13px; }
}
@media (orientation: landscape) and (max-height: 600px) {
  #table .seat-0, #table .seat-2 { min-width: 0; max-width: 22%; }
  #table .seat { width: 22%; padding: 3px; line-height: 1.1; }
  #table .seat-0 { width: 120px; max-width: 120px; }
  #table .seat small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.1; margin-top: 1px; }
  #table .seat small + small::before { content: none; }
  #table .hand .card { padding: 3px; }
  #table .hand .card > span:first-child, #table .hand .card .bottom { font-size: 16px; }
  #table .hand .card .corner-suit { font-size: 11px; }
  #table .hand .card .pip { font-size: 20px; }
}
@media (orientation: landscape) and (max-height: 350px) {
  #table { --trick-card-w: 26px; }
  #table .center { top: 56px; }
  #table .played small, #table .played .card .bottom { display: none; }
  #table .played .card { padding: 2px; }
  #table .played .card > span:first-child { font-size: 14px; }
  #table .played .card .corner-suit { font-size: 10px; }
  #table .played .card .pip { font-size: 16px; }
  #table .hand-label > span { font-size: 0; }
  #table .hand-label > span::after { content: 'Twoje karty'; font-size: 10px; }
}