/* ═══ polish.css — app shell: touch behaviour, header, mobile dock, buttons ═══════════════════════════════════
   Loaded last. Motion tokens follow the rest of the site: ease-out for entrances, ≤ 200 ms for UI. */

:root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); }
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
body { overscroll-behavior: none; }
button, a, [role='button'], select, summary, label.btn, .dock-tab { touch-action: manipulation; }
button, .btn, .hdr-btn, .dock-tab { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
@media (pointer: coarse) { input, textarea, select { font-size: 16px; } }
.screen.active { min-height: 100dvh; }

/* every pressable thing answers the finger immediately */
.btn { transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, opacity 140ms ease, box-shadow 140ms ease, transform 140ms var(--ease-out); }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { cursor: not-allowed; }

/* ── header ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.game-header { gap: 10px; min-height: 52px; padding-block: 8px; padding-top: max(8px, var(--safe-t)); padding-inline: max(14px, env(safe-area-inset-left, 0px)) max(14px, env(safe-area-inset-right, 0px)); }
.game-header-left { min-width: 0; flex: 1 1 auto; gap: 10px; }
.game-header-left h2 { font-size: 16px; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-header-right { position: relative; flex: 0 0 auto; align-items: center; gap: 6px; }
.turn-indicator { white-space: nowrap; flex: 0 0 auto; transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease; }
.hdr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--nx-border); background: transparent; color: var(--nx-text); font: inherit; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap; transition: background-color 140ms ease, border-color 140ms ease, transform 140ms var(--ease-out); }
.hdr-btn .i { width: 17px; height: 17px; }
.hdr-btn.icon-only { width: 34px; padding: 0; }
.hdr-btn:active { transform: scale(0.95); }
.hdr-btn:focus-visible { outline: none; box-shadow: var(--nx-ring); }
.hdr-danger { color: var(--nx-danger); }
.hdr-more { display: none; }
.hdr-menu { display: contents; }
@media (hover: hover) and (pointer: fine) { .hdr-btn:hover { background: var(--nx-hover); border-color: var(--nx-border-strong); } }

/* ── phones and narrow windows ──────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  #game-screen.active { height: 100dvh; }
  .game-header { padding-block: 6px; min-height: 48px; }
  #game-help-btn .lbl { display: none; }
  #game-help-btn { width: 34px; padding: 0; }
  .hdr-more { display: inline-flex; }
  .hdr-menu { display: none; position: absolute; top: calc(100% + 8px); inset-inline-end: 0; min-width: 190px; flex-direction: column; gap: 2px; padding: 6px; border: 1px solid var(--nx-border-strong); border-radius: 14px; background: var(--nx-surface); box-shadow: var(--nx-shadow-lg); z-index: 200; transform-origin: top right; }
  [dir='rtl'] .hdr-menu { transform-origin: top left; }
  .hdr-menu.open { display: flex; animation: hdr-in 170ms var(--ease-out); }
  .hdr-item { width: 100%; justify-content: flex-start; height: 44px; border: 0; border-radius: 9px; padding: 0 12px; font-size: 14px; }
  .turn-indicator { max-width: 44vw; overflow: hidden; text-overflow: ellipsis; }

  /* the three side panels become a bottom dock: tabs always visible, one panel slides up on demand */
  .game-layout { position: relative; flex-direction: column; overflow: hidden; }
  .board-wrapper { flex: 1 1 auto; min-height: 0; padding: 10px 10px calc(62px + var(--safe-b)); }
  .game-sidebar { position: fixed; inset-inline: 0; bottom: 0; width: 100%; z-index: 80; display: flex; flex-direction: column; max-height: 64dvh; border: 0; border-top: 1px solid var(--nx-border-strong); background: var(--nx-surface); padding-bottom: var(--safe-b); overflow: hidden; }
  .dock-tabs { order: 2; display: flex; flex: 0 0 auto; background: var(--nx-surface); }
  .game-sidebar > section { order: 1; display: none; overflow-y: auto; border: 0; padding: 12px 16px; max-height: calc(64dvh - 66px); overscroll-behavior: contain; }
  .game-sidebar[data-tab='players'] .players-section,
  .game-sidebar[data-tab='action'] .action-section,
  .game-sidebar[data-tab='log'] .log-section,
  .game-sidebar[data-tab='chat'] .chat-section { display: block; animation: sheet-in 200ms var(--ease-out); }
  .game-sidebar .game-log { max-height: 36dvh; }
  .game-sidebar .chat-messages { max-height: 30dvh; }
  .dock-tab { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 54px; padding: 6px 4px; border: 0; background: transparent; color: var(--nx-text-2); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; transition: color 140ms ease, background-color 140ms ease; }
  .dock-tab .i { width: 20px; height: 20px; }
  .dock-tab[aria-pressed='true'] { color: var(--nx-brand); background: var(--nx-brand-bg); }
  .dock-tab:active { background: var(--nx-hover); }
  .dock-badge { position: absolute; top: 5px; inset-inline-start: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--nx-danger); color: #fff; font-size: 10px; font-style: normal; font-weight: 700; line-height: 16px; text-align: center; animation: badge-in 200ms var(--ease-out); }
  .dock-badge[hidden] { display: none; }
  .game-sidebar.has-actions .dock-tab[data-tab='action']:not([hidden])::after { content: ''; position: absolute; top: 8px; inset-inline-start: calc(50% + 8px); width: 8px; height: 8px; border-radius: 50%; background: var(--nx-warning); }
}
@media (min-width: 761px) { .dock-tabs { display: none; } }
@media (max-height: 520px) and (orientation: landscape) {
  .game-header { min-height: 40px; padding-block: 4px; }
  .dock-tab { min-height: 44px; flex-direction: row; gap: 6px; font-size: 12px; }
  .board-wrapper { padding-bottom: calc(50px + var(--safe-b)); }
}
@keyframes hdr-in { from { opacity: 0; transform: scale(0.96) translateY(-4px); } }
@keyframes sheet-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes badge-in { from { transform: scale(0.6); opacity: 0; } }

/* ── game-over, waiting room and lobby touches ───────────────────────────────────────────────────────────────── */
.modal.show .modal-content, .modal[style*='display: flex'] .modal-content, .modal[style*='display:flex'] .modal-content { animation: modal-in 200ms var(--ease-out); }
@keyframes modal-in { from { opacity: 0; transform: scale(0.96) translateY(6px); } }
.modal-footer { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
@media (max-width: 560px) { .modal-footer .btn { flex: 1 1 100%; } }

@media (prefers-reduced-motion: reduce) {
  .hdr-menu.open, .game-sidebar section, .dock-badge, .modal-content { animation: none !important; }
  .btn, .hdr-btn { transition: none; }
}
.dock-tab[hidden] { display: none !important; }

/* ── poker ───────────────────────────────────────────────────────────────────────────────────────────────────── */
.pk-chip { border-radius: 50%; background: radial-gradient(circle at 30% 30%, #ffe082, #f9a825); border: 3px dashed rgba(255, 255, 255, 0.55); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
.pk-info { transition: border-color 160ms ease, box-shadow 160ms ease; }
@media (max-width: 760px) {
  .board-wrapper:has(.pk-wrap) { align-items: flex-start; }
  .pk-wrap { --th: clamp(280px, min(calc(var(--tw) * 1.05), calc(100dvh - 400px)), 540px); min-height: 100%; justify-content: space-between; }
  .pk-actions { flex-direction: column; flex-wrap: nowrap; gap: 8px; width: 100%; padding: 0 2px; }
  .pk-row { width: 100%; flex-wrap: nowrap; }
  .pk-row .btn { flex: 1 1 0; min-height: 44px; }
  .pk-bet-row { width: 100%; display: grid; grid-template-columns: 1fr; gap: 8px; }
  .pk-quick { display: flex; width: 100%; gap: 6px; }
  .pk-quick .btn { flex: 1 1 0; min-height: 38px; }
  .pk-slider { width: 100%; }
  .pk-amount { display: none; }
  .pk-bet-row > .btn-primary { min-height: 46px; width: 100%; }
}

/* ── lobby, waiting room, game-over ──────────────────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn .i { width: 16px; height: 16px; flex: none; vertical-align: 0; }
.lobby-header { flex-wrap: nowrap; gap: 10px; padding-top: max(10px, var(--safe-t)); padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }
.header-user { display: flex; align-items: center; gap: 6px; min-width: 0; }
#header-username { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--nx-text-2); font-size: 13px; margin-inline-end: 4px; }
.game-card { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.game-card-info { flex: 1 1 220px; min-width: 0; }
.game-card-info h4 { overflow-wrap: anywhere; }
.game-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-inline-start: auto; }
.collapsible-btn { display: flex; align-items: center; gap: 6px; }
.collapsible-btn .chev { transition: transform 160ms var(--ease-out); }
.collapsible-btn[aria-expanded='true'] .chev { transform: rotate(90deg); }
[dir='rtl'] .collapsible-btn .chev { transform: scaleX(-1); }
[dir='rtl'] .collapsible-btn[aria-expanded='true'] .chev { transform: scaleX(-1) rotate(90deg); }
.waiting-card { width: min(460px, calc(100% - 24px)); }
.waiting-card .btn-primary#start-game-btn { width: 100%; min-height: 46px; margin-top: 12px; }
.bot-controls { display: flex; justify-content: center; margin-top: 8px; }
#waiting-screen .game-header { gap: 10px; }

@media (max-width: 760px) {
  .hdr-user { display: none; }
  #waiting-screen .game-header-right { gap: 4px; }
}
@media (max-width: 560px) {
  .lobby-header .brand-sub { display: none; }
  #header-username { display: none; }
  .header-user .lbl { display: none; }
  .header-user .btn-sm { min-width: 36px; height: 36px; padding: 0 10px; }
  .game-card-info { flex: 1 1 55%; }
  .game-card-actions { width: 100%; margin: 0; }
  .game-card-actions .btn { flex: 1 1 0; min-height: 40px; }
  .section-header .btn .i + span { display: none; }
  .waiting-body { padding: 12px; }
}

/* ── board area: never clip wide content, header never wraps ─────────────────────────────────────────────────── */
.board-wrapper { justify-content: safe center; align-items: safe center; }
.game-header, .game-header-right { flex-wrap: nowrap; }
@media (max-width: 560px) {
  .yz-sheet .yz-hint, .yz-sheet .yz-hint-col { display: none; }
  .yz-sheet th, .yz-sheet td { padding-inline: 8px; }
}
@media (max-width: 560px) {
  .yz-sheet-wrap { justify-content: flex-start; }
  .yz-sheet { min-width: 0; width: 100%; font-size: 12px; }
  .yz-sheet th, .yz-sheet td { padding: 6px 6px; }
}