/* Club and table views. Load after style.css; no remote assets are required. */
body[data-view="lobby"],
body[data-view="table"] {
  --club-green: #00ce8b;
  --club-green-dark: #087b59;
  --club-bg: #111214;
  --club-card: #202123;
  --club-border: #343638;
  --club-muted: #92989d;
  background: var(--club-bg);
}

body[data-view="lobby"] .app {
  max-width: 1160px;
  padding: 0 28px 32px;
}

#club-view {
  padding-bottom: 32px;
  min-width: 0;
}

.club-topbar {
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid #25272a;
  margin-bottom: 28px;
}

.club-topbar h1,
.club-topbar h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -.5px;
}

.club-topbar > :last-child {
  margin-left: auto;
}

.club-topbar button {
  border-color: #3c4143;
  background: transparent;
}

.club-profile {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 22px;
  min-width: 0;
}

.club-avatar {
  width: 104px;
  height: 104px;
  flex: 0 0 104px;
  display: grid;
  place-items: center;
  border-radius: 21px;
  background: radial-gradient(ellipse at 50% 25%, #1c654c 0, #0e342d 61%, #082a26 100%);
  border: 1px solid #397563;
  box-shadow: inset 0 0 0 5px #061d1a45;
  color: #c6f8df;
  font-size: 33px;
  font-weight: 750;
  letter-spacing: -2px;
}

.club-summary {
  flex: 1;
  min-width: 0;
}

.club-summary h1,
.club-summary h2 {
  font-size: 31px;
  margin: 0 0 8px;
  color: #eef3f0;
  overflow-wrap: anywhere;
  letter-spacing: -.8px;
}

.club-summary > p {
  color: var(--club-muted);
  font-size: 12px;
  margin: 0 0 12px;
  line-height: 1.7;
}

.club-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  color: var(--club-muted);
  font-size: 13px;
  margin: 9px 0 12px;
}

.club-stats strong {
  color: #e2e8e4;
  margin-right: 4px;
  font-weight: 650;
}

.wallet-chip {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 39px;
  min-width: 215px;
  padding: 7px 13px;
  border: 1px solid #373a3d;
  border-radius: 24px;
  background: #1a1b1e;
  color: #c8d0ca;
  font-size: 12px;
}

.wallet-chip::before {
  content: '';
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border: 4px dashed #e8e3da;
  outline: 2px solid #ba3145;
  outline-offset: -1px;
  border-radius: 50%;
  background: #a81e35;
}

.wallet-chip strong {
  color: #f2f3e5;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}

.club-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 22px;
  padding: 18px 0;
  margin-top: 18px;
  border-top: 1px solid #343638;
  color: #b7bdb9;
  font-size: 12px;
}

.club-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  min-height: 32px;
}

.club-filter input {
  width: 17px;
  height: 17px;
  accent-color: var(--club-green);
}

.club-toolbar select {
  background: #2a2c2e;
  border-color: #414446;
  min-width: 145px;
  margin-left: auto;
}

#create-table-button {
  display: block;
  width: 100%;
  min-height: 63px;
  margin: 2px 0 25px;
  border: 2px solid #00ad79;
  border-radius: 14px;
  background: #202325;
  color: var(--club-green);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.35px;
}

#create-table-button:hover:not(:disabled) {
  background: #173b30;
  border-color: #34e7ad;
}

#club-table-list {
  display: grid;
  gap: 16px;
}

.club-table-card {
  border: 1px solid #343638;
  border-radius: 15px;
  background: #202123;
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.club-table-card[data-expanded="true"] {
  border-color: #39816b;
  box-shadow: 0 0 0 1px #00b77c30;
}

.club-table-strip {
  display: grid;
  grid-template-columns: 34px 93px minmax(0, 1fr) 190px;
  width: 100%;
  gap: 0;
  padding: 0;
  min-height: 139px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #e4e8e7;
  text-align: left;
  align-items: center;
}

button.club-table-strip:hover:not(:disabled) {
  background: #252a29;
  transform: none;
}

.club-table-type {
  align-self: stretch;
  display: grid;
  place-items: center;
  padding: 12px 5px;
  background: linear-gradient(170deg, #0a9b6d, #076245);
  color: #f0fffa;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 1.7px;
  text-align: center;
}

.occupancy-ring {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  justify-self: center;
  border: 7px solid #4d5053;
  border-radius: 50%;
  color: #e2e6e7;
  font-size: 24px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.club-table-summary {
  padding: 18px 16px 18px 4px;
  min-width: 0;
}

.club-table-summary h3,
.club-table-summary .table-name {
  margin: 0 0 8px;
  color: #d6dbdc;
  font-size: 15px;
  font-weight: 550;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.club-table-summary p {
  margin: 8px 0 0;
  color: #a0a7aa;
  font-size: 11px;
  line-height: 1.6;
}

.club-table-limits {
  display: block;
  font-size: 25px;
  color: #f8f9f5;
  font-weight: 700;
  letter-spacing: -.55px;
  line-height: 1.25;
}

.club-table-buyin {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  padding: 22px 24px 22px 5px;
  font-size: 11px;
  color: #939b9e;
  min-width: 0;
}

.club-table-buyin strong {
  color: #f0f4ef;
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.club-table-details {
  display: grid;
  grid-template-columns: minmax(240px, .95fr) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  padding: 21px 26px 25px;
  background: #17191a;
  border-top: 1px solid #343b38;
}

.mini-table {
  position: relative;
  min-height: 182px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  isolation: isolate;
}

.mini-table::before {
  content: '';
  position: absolute;
  inset: 12px 5px;
  z-index: -1;
  border: 11px solid #161a19;
  border-radius: 48%;
  box-shadow: 0 8px 9px #0006, inset 0 0 18px #061c09a6, 0 0 0 1px #42443e;
  background: radial-gradient(ellipse, #286932 0, #165925 66%, #10471b 100%);
}

.mini-table::after {
  content: 'TRÍO Y PAR';
  position: absolute;
  top: 34px;
  color: #d6efbd24;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.8px;
  z-index: -1;
}

.mini-board {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 58px;
  margin-top: 15px;
}

.mini-board .card {
  width: 33px;
  height: 47px;
  font-size: 18px;
  border-radius: 4px;
}

.mini-board .card .card-suit {
  font-size: 11px;
  bottom: 4px;
  right: 4px;
}

.mini-table > p,
.mini-table > span {
  font-size: 10px;
  line-height: 1.5;
  color: #c5d6bb;
  margin: 0;
  max-width: 85%;
  text-align: center;
}

.rule-summary {
  min-width: 0;
  color: #a5afaa;
  font-size: 12px;
  line-height: 1.7;
}

.rule-summary h3,
.rule-summary h4 {
  font-size: 14px;
  color: #e4eae5;
  margin: 0 0 9px;
  font-weight: 650;
}

.rule-summary p {
  margin: 7px 0;
}

.rule-summary dl {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) minmax(0, 1fr);
  gap: 6px 15px;
  margin: 10px 0 15px;
  font-size: 11px;
}

.rule-summary dt {
  color: #8c9990;
}

.rule-summary dd {
  margin: 0;
  color: #d7e1d8;
  text-align: right;
}

.open-table-button {
  min-height: 42px;
  min-width: 180px;
  display: block;
  width: 100%;
  margin-top: 16px;
  border: 1px solid #0fb37c;
  border-radius: 8px;
  background: #068d62;
  color: #f2fff7;
  font-size: 15px;
  font-weight: 700;
}

.open-table-button:hover:not(:disabled) {
  background: #0ba878;
  border-color: #1edd9c;
}

body[data-view="table"] .app {
  max-width: none;
  min-height: 100dvh;
  padding: 0;
  background: #171c18;
}

body[data-view="table"] .app > .app-header {
  display: none;
}

#table-view {
  min-width: 0;
}

.table-navigation {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 55px;
  padding: 9px 20px;
  background: #0d1010ee;
  border-bottom: 1px solid #2d3430;
}

.table-nav-title {
  flex: 1;
  min-width: 0;
}

.table-nav-title h1,
.table-nav-title h2,
.table-nav-title strong {
  display: block;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 600;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-nav-title p,
.table-nav-title span {
  display: block;
  color: #8c9a90;
  font-size: 10px;
  margin: 3px 0 0;
  line-height: 1.5;
}

.table-nav-actions,
.table-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}

.table-navigation button,
.table-controls button {
  min-height: 33px;
  background: #252e28;
  border: 1px solid #434f45;
  color: #d8e0da;
  font-size: 11px;
}

.table-navigation button:hover:not(:disabled),
.table-controls button:hover:not(:disabled) {
  background: #334c3c;
  border-color: #5f8069;
}

body[data-view="table"] .workspace {
  display: block;
  margin: 0;
}

body[data-view="table"] .table-column {
  width: 100%;
}

body[data-view="table"] .table-stage {
  width: 100%;
  height: calc(100dvh - 215px);
  min-height: 510px;
  max-height: 970px;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(ellipse at 50% 45%, #38413022 0, #171d18cc 68%),
    repeating-linear-gradient(33deg, #20261d 0, #20261d 1px, #242a20 1px, #242a20 3px);
  overflow: hidden;
}

body[data-view="table"] .table-scene {
  inset: 15px 15px 27px;
}

body[data-view="table"] .felt {
  inset: 16% 8% 12%;
  border: 20px solid #171c1b;
  border-radius: 46%;
  background: radial-gradient(ellipse, #286c31 0, #1b622b 54%, #135020 87%, #0b3b16 100%);
  box-shadow: inset 0 3px 20px #041f0a8a, 0 17px 15px #0007, 0 0 0 2px #090e0d, inset 0 0 0 1px #29562e;
}

body[data-view="table"] .felt-inner {
  inset: 14px;
  border-radius: 46%;
  border: 1px solid #a4bb7c31;
}

body[data-view="table"] .table-watermark {
  top: 32%;
  color: #a3bc8230;
  font-size: clamp(35px, 5vw, 67px);
  line-height: .9;
  letter-spacing: -3px;
}

body[data-view="table"] .table-watermark span {
  font-size: clamp(9px, 1.15vw, 16px);
  color: #b5c89b35;
  letter-spacing: 3px;
  margin-top: 12px;
}

body[data-view="table"] .stage-status {
  top: 13px;
  left: 20px;
  right: 20px;
  font-size: 11px;
  color: #a2b6a4;
}

body[data-view="table"] .stage-count {
  color: #98aa9a;
}

body[data-view="table"] .board {
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(350px, 41vw);
}

body[data-view="table"] .board-label {
  color: #c0d3ad8c;
  font-size: 9px;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

body[data-view="table"] .board-cards {
  justify-content: center;
  gap: 8px;
}

body[data-view="table"] .board-cards .card {
  width: 67px;
  height: 93px;
  border-radius: 7px;
  font-size: 34px;
}

body[data-view="table"] .board-cards .card .card-suit {
  font-size: 24px;
  bottom: 8px;
  right: 8px;
}

body[data-view="table"] .board p {
  max-width: 350px;
  margin: 12px auto 0;
  color: #b6cda7;
  font-size: 10px;
  line-height: 1.5;
}

body[data-view="table"] .pot-label {
  display: inline-block;
  padding: 5px 13px;
  margin-top: 12px;
  border: 1px solid #80a2682b;
  border-radius: 16px;
  background: #0c321bce;
  color: #efd97d;
  font-size: 15px;
  box-shadow: 0 2px 5px #0b25103b;
}

body[data-view="table"] .table-stage .seat {
  width: 148px;
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  transform: translate(-50%, -50%);
  transition: left .24s ease, top .24s ease;
  z-index: 4;
}

body[data-view="table"] .seat[data-seat="0"] { left: 50%; top: 87%; }
body[data-view="table"] .seat[data-seat="1"] { left: 13%; top: 69%; }
body[data-view="table"] .seat[data-seat="2"] { left: 16%; top: 21%; }
body[data-view="table"] .seat[data-seat="3"] { left: 84%; top: 21%; }
body[data-view="table"] .seat[data-seat="4"] { left: 87%; top: 69%; }
body[data-view="table"] .seat[data-seat="5"] { left: 50%; top: 10%; }

body[data-view="table"] .seat .seat-name {
  width: 100%;
  max-width: 148px;
  min-height: 29px;
  margin-top: 5px;
  border: 1px solid #4b504e;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(#2c302f, #111615);
  color: #e0e7e1;
  font-size: 12px;
  padding: 5px 8px;
}

body[data-view="table"] .seat.selected .seat-name {
  background: linear-gradient(#244d37, #11271d);
  border-color: #69b284;
  color: #dcf6db;
}

body[data-view="table"] .seat-chips {
  display: inline-block;
  min-width: 90px;
  margin-top: 0;
  padding: 5px 8px;
  border: 1px solid #404941;
  border-top: 0;
  border-radius: 0 0 6px 6px;
  background: #101712eb;
  color: #83ddeb;
  font-size: 13px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

body[data-view="table"] .seat-bet {
  font-size: 10px;
  min-height: 13px;
  margin-top: 6px;
  color: #e8d391;
  text-shadow: 0 1px 3px #000;
}

body[data-view="table"] .seat.is-turn .seat-name {
  outline: 2px solid #e7cd76;
  outline-offset: 3px;
}

body[data-view="table"] .seat .seat-cards {
  gap: 3px;
}

body[data-view="table"] .seat .card {
  width: 42px;
  height: 59px;
  font-size: 24px;
  border-radius: 5px;
}

body[data-view="table"] .seat.selected .card {
  width: 52px;
  height: 73px;
  font-size: 29px;
}

body[data-view="table"] .seat .card .card-suit {
  font-size: 17px;
  right: 5px;
  bottom: 5px;
}

body[data-view="table"] .seat.open-seat {
  width: 99px;
  opacity: 1;
}

body[data-view="table"] .seat.open-seat .seat-cards,
body[data-view="table"] .seat.open-seat .seat-chips,
body[data-view="table"] .seat.open-seat .seat-bet,
body[data-view="table"] .seat.open-seat .seat-name {
  display: none;
}

.sit-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 88px;
  height: 88px;
  min-height: 88px;
  margin: auto;
  border: 2px solid #e4e7df;
  border-radius: 50%;
  background: #080d0cc4;
  box-shadow: 0 4px 12px #0005;
  color: #cad4cb;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.1;
  padding: 16px 10px 11px;
  white-space: normal;
  text-align: center;
}

.sit-button::before {
  content: '▼';
  font-size: 17px;
  color: #9ca99e;
  line-height: .8;
}

.sit-button:hover:not(:disabled) {
  border-color: #62e8a1;
  color: #ecfff0;
  background: #143c26e3;
  transform: translateY(-2px);
}

.sit-button:disabled {
  opacity: .45;
}

body[data-view="table"] .table-caption {
  padding: 8px 19px;
  color: #a4b4a6;
  border: 0;
  background: transparent;
  font-size: 10px;
  align-items: flex-end;
}

body[data-view="table"] .table-caption > span:first-child {
  max-width: 38%;
  white-space: normal;
  line-height: 1.5;
}

.spectator-note,
.waiting-note {
  color: #cfceaf;
  font-size: 12px;
  text-align: center;
  line-height: 1.7;
}

.game-bottom-bar {
  position: sticky;
  bottom: 0;
  z-index: 8;
  padding: 12px 20px max(12px, env(safe-area-inset-bottom));
  background: #111613f5;
  border-top: 1px solid #394437;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}

.game-bottom-bar > .table-controls {
  margin-right: auto;
}

body[data-view="table"] .betting-panel {
  width: min(820px, 100%);
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

body[data-view="table"] .betting-heading {
  font-size: 12px;
}

body[data-view="table"] .betting-heading > strong {
  font-size: 15px;
  color: #e4d29a;
}

body[data-view="table"] .betting-actions {
  gap: 7px;
  margin-top: 9px;
  flex-wrap: nowrap;
}

body[data-view="table"] .betting-actions button {
  min-height: 42px;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 15px;
  white-space: nowrap;
}

body[data-view="table"] .betting-actions .primary {
  background: linear-gradient(#0e9568, #067a52);
  border-color: #42b188;
}

body[data-view="table"] .betting-actions .fold-button {
  background: linear-gradient(#3d2527, #281b1e);
  border-color: #704c50;
  color: #ecbabd;
}

body[data-view="table"] #raise-button {
  background: linear-gradient(#ce3b43, #a72330);
  border-color: #e36a70;
  color: #fff3f1;
  min-width: 96px;
}

body[data-view="table"] .betting-actions input {
  min-height: 40px;
  width: 85px;
  background: #0d1810;
  border: 1px solid #596c4d;
  font-size: 14px;
}

body[data-view="table"] .bet-input-label {
  margin-left: auto;
  color: #a4b69b;
  font-size: 9px;
}

body[data-view="table"] .betting-panel p {
  font-size: 10px;
  margin: 8px 0 0;
  color: #8c9e86;
}

.bet-shortcuts {
  display: flex;
  gap: 5px;
}

.bet-shortcuts button {
  background: #353e37;
  border-color: #657066;
  font-size: 10px;
  min-height: 28px;
  padding: 5px 9px;
}

.table-rules-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  margin: 18px 0;
}

.table-rules-grid label,
.buyin-form > label {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  font-size: 12px;
  color: #becfc4;
}

.table-rules-grid input,
.table-rules-grid select,
.buyin-form input[type="number"],
.buyin-form input[type="text"] {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  color: #edf3e9;
  border: 1px solid #496552;
  border-radius: 6px;
  padding: 9px 11px;
  background: #16291c;
  font: inherit;
}

.table-rules-grid label:first-child:last-child,
.table-rules-grid .full-width {
  grid-column: 1 / -1;
}

.rule-help,
.creation-note {
  color: #a6b6a9;
  font-size: 11px;
  line-height: 1.7;
}

.creation-note {
  padding: 13px 14px;
  margin: 14px 0 18px;
  border: 1px solid #3f6a50;
  border-radius: 8px;
  background: #142c1c;
}

.creation-note strong {
  color: #d6f2d3;
}

.buyin-form {
  display: grid;
  gap: 16px;
}

.buyin-form input[type="range"] {
  width: 100%;
  accent-color: #12bf81;
  min-height: 24px;
}

.buyin-form .wallet-chip {
  width: 100%;
}

.buyin-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.buyin-presets button {
  background: #23372a;
  border-color: #4b6b52;
  color: #c4e6c8;
}

#chat-drawer {
  width: min(760px, calc(100vw - 28px));
  max-height: min(900px, 94dvh);
  padding: 0;
  overflow: hidden;
  border-color: #47745b;
  border-radius: 13px;
}

#chat-drawer .chat-panel {
  height: min(820px, 91dvh);
  min-height: 460px;
  max-height: none;
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
}

#chat-drawer .chat-header {
  background: #162c21;
  border-color: #304e39;
}

#chat-drawer .messages {
  min-height: 130px;
}

#chat-drawer .chat-footnote {
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}

body[data-view="table"] .detail-panel {
  margin: 0;
  border-radius: 0;
  border-color: #3a4d3c;
  background: #131c16;
}

body[data-view="table"] .app-footer {
  padding: 6px 20px;
  background: #0e1410;
  border-color: #29342b;
  color: #809680;
}

@media (max-width: 1080px) {
  .club-table-strip { grid-template-columns: 32px 88px minmax(0, 1fr) 165px; }
  .club-table-buyin { padding-right: 18px; }
  body[data-view="table"] .betting-actions button { padding: 8px 11px; font-size: 12px; }
  body[data-view="table"] .seat[data-seat="1"] { left: 12%; }
  body[data-view="table"] .seat[data-seat="4"] { left: 88%; }
  .game-bottom-bar { gap: 10px; padding-left: 15px; padding-right: 15px; }
  .game-bottom-bar > .table-controls { max-width: 160px; }
}

@media (max-width: 780px) {
  body[data-view="lobby"] .app { padding: 0 15px 20px; }
  .club-topbar { min-height: 56px; margin-bottom: 22px; }
  .club-topbar h1, .club-topbar h2 { font-size: 20px; }
  .club-profile { gap: 15px; align-items: flex-start; }
  .club-avatar { width: 83px; height: 83px; flex-basis: 83px; border-radius: 16px; font-size: 27px; }
  .club-summary h1, .club-summary h2 { font-size: 26px; margin-top: 2px; }
  .club-summary > p { font-size: 10px; margin-bottom: 8px; }
  .club-stats { gap: 8px 15px; font-size: 11px; margin: 7px 0 10px; }
  .wallet-chip { min-width: 0; min-height: 34px; padding: 6px 10px; font-size: 10px; gap: 10px; }
  .wallet-chip strong { font-size: 16px; }
  .wallet-chip::before { width: 16px; height: 16px; flex-basis: 16px; border-width: 3px; }
  .club-toolbar { gap: 8px 13px; padding: 13px 0; font-size: 10px; }
  .club-filter { gap: 6px; min-height: 27px; }
  .club-filter input { width: 15px; height: 15px; }
  .club-toolbar select { min-width: 110px; font-size: 10px; min-height: 31px; padding: 5px 8px; }
  #create-table-button { min-height: 54px; font-size: 19px; margin-bottom: 18px; border-radius: 11px; }
  #club-table-list { gap: 13px; }
  .club-table-strip { grid-template-columns: 27px 74px minmax(0, 1fr) 132px; min-height: 121px; }
  .club-table-type { font-size: 10px; letter-spacing: 1.1px; }
  .occupancy-ring { width: 57px; height: 57px; font-size: 20px; border-width: 6px; }
  .club-table-summary { padding: 15px 10px 15px 0; }
  .club-table-summary h3, .club-table-summary .table-name { font-size: 13px; margin-bottom: 6px; }
  .club-table-limits { font-size: 20px; }
  .club-table-summary p { font-size: 9px; margin-top: 6px; }
  .club-table-buyin { padding: 15px 15px 15px 0; font-size: 9px; gap: 7px; }
  .club-table-buyin strong { font-size: 20px; }
  .club-table-details { grid-template-columns: 1fr; padding: 16px 18px 20px; gap: 10px; }
  .mini-table { min-height: 182px; width: min(370px, 100%); margin: auto; }
  .rule-summary { font-size: 11px; }
  .rule-summary dl { font-size: 10px; }
  .open-table-button { min-height: 42px; margin-top: 12px; font-size: 15px; }
  .table-navigation { min-height: 52px; padding: 8px 10px; gap: 8px; flex-wrap: wrap; }
  .table-nav-title h1, .table-nav-title h2, .table-nav-title strong { font-size: 13px; }
  .table-nav-title p, .table-nav-title span { font-size: 9px; }
  .table-nav-actions { gap: 5px; }
  .table-navigation button, .table-controls button { font-size: 10px; min-height: 31px; padding: 6px 8px; }
  body[data-view="table"] .table-stage { height: calc(100dvh - 226px); min-height: 430px; max-height: 760px; }
  body[data-view="table"] .table-scene { inset: 15px 3px 28px; }
  body[data-view="table"] .felt { inset: 17% 7% 13%; border-width: 13px; border-radius: 46%; }
  body[data-view="table"] .felt-inner { inset: 8px; }
  body[data-view="table"] .table-watermark { top: 32%; font-size: 36px; letter-spacing: -2px; }
  body[data-view="table"] .table-watermark span { font-size: 8px; margin-top: 10px; letter-spacing: 1.7px; }
  body[data-view="table"] .stage-status { top: 10px; left: 13px; right: 13px; font-size: 9px; }
  body[data-view="table"] .stage-count { font-size: 9px; }
  body[data-view="table"] .board { top: 46%; width: 46vw; }
  body[data-view="table"] .board-label { font-size: 7px; letter-spacing: 1px; margin-bottom: 8px; }
  body[data-view="table"] .board-cards { gap: 5px; }
  body[data-view="table"] .board-cards .card { width: 42px; height: 60px; border-radius: 5px; font-size: 26px; }
  body[data-view="table"] .board-cards .card .card-suit { font-size: 16px; right: 5px; bottom: 5px; }
  body[data-view="table"] .board p { font-size: 8px; margin-top: 8px; line-height: 1.4; }
  body[data-view="table"] .pot-label { font-size: 11px; padding: 4px 8px; margin-top: 8px; }
  body[data-view="table"] .table-stage .seat { width: 89px; }
  body[data-view="table"] .seat[data-seat="0"] { left: 50%; top: 88%; }
  body[data-view="table"] .seat[data-seat="1"] { left: 14%; top: 68%; }
  body[data-view="table"] .seat[data-seat="2"] { left: 16%; top: 22%; }
  body[data-view="table"] .seat[data-seat="3"] { left: 84%; top: 22%; }
  body[data-view="table"] .seat[data-seat="4"] { left: 86%; top: 68%; }
  body[data-view="table"] .seat[data-seat="5"] { left: 50%; top: 10%; }
  body[data-view="table"] .seat .seat-name { max-width: 89px; min-height: 23px; padding: 4px 5px; font-size: 9px; margin-top: 4px; }
  body[data-view="table"] .seat-chips { min-width: 65px; padding: 3px 5px; font-size: 10px; }
  body[data-view="table"] .seat-bet { font-size: 8px; margin-top: 4px; min-height: 11px; }
  body[data-view="table"] .seat .seat-cards { gap: 2px; }
  body[data-view="table"] .seat .card { width: 28px; height: 40px; font-size: 18px; border-radius: 3px; }
  body[data-view="table"] .seat.selected .card { width: 36px; height: 51px; font-size: 22px; }
  body[data-view="table"] .seat .card .card-suit { font-size: 11px; right: 3px; bottom: 3px; }
  body[data-view="table"] .seat.open-seat { width: 72px; }
  .sit-button { width: 66px; height: 66px; min-height: 66px; border-width: 1.5px; padding: 11px 6px 8px; font-size: 10px; gap: 4px; }
  .sit-button::before { font-size: 13px; }
  body[data-view="table"] .table-caption { font-size: 8px; padding: 7px 10px; }
  body[data-view="table"] .table-caption > span:first-child { max-width: 40%; line-height: 1.4; }
  .game-bottom-bar { flex-direction: column; align-items: stretch; gap: 9px; padding: 9px 10px max(9px, env(safe-area-inset-bottom)); }
  .game-bottom-bar > .table-controls { max-width: none; margin-right: 0; justify-content: space-between; }
  body[data-view="table"] .betting-panel { width: 100%; }
  body[data-view="table"] .betting-heading { font-size: 10px; }
  body[data-view="table"] .betting-heading > strong { font-size: 12px; }
  body[data-view="table"] .betting-actions { gap: 5px; flex-wrap: wrap; margin-top: 7px; }
  body[data-view="table"] .betting-actions button { flex: 1; min-height: 37px; min-width: 0; padding: 7px 8px; font-size: 11px; }
  body[data-view="table"] #raise-button { min-width: 62px; }
  body[data-view="table"] .betting-actions input { width: 67px; min-height: 36px; font-size: 12px; padding: 6px; }
  body[data-view="table"] .bet-input-label { font-size: 8px; max-width: 38px; margin-left: 0; }
  body[data-view="table"] .betting-panel p { font-size: 8px; margin-top: 6px; line-height: 1.4; }
  .spectator-note, .waiting-note { font-size: 10px; margin: 4px 0; }
  .bet-shortcuts { flex-wrap: wrap; }
  .bet-shortcuts button { min-height: 26px; font-size: 9px; padding: 4px 7px; }
  .table-rules-grid { gap: 11px; }
  .table-rules-grid label, .buyin-form > label { font-size: 11px; }
  .table-rules-grid input, .table-rules-grid select { min-height: 38px; padding: 8px; }
  #chat-drawer { width: calc(100vw - 18px); max-height: 95dvh; }
  #chat-drawer .chat-panel { height: 92dvh; min-height: 390px; }
  body[data-view="table"] .app-footer { padding: 5px 10px; font-size: 8px; }
}

@media (max-width: 420px) {
  .club-topbar { margin-bottom: 17px; }
  .club-profile { gap: 12px; }
  .club-avatar { width: 72px; height: 72px; flex-basis: 72px; font-size: 24px; border-radius: 14px; }
  .club-summary h1, .club-summary h2 { font-size: 23px; }
  .club-summary > p { font-size: 9px; }
  .club-stats { font-size: 10px; gap: 7px 12px; }
  .club-table-strip { grid-template-columns: 24px 62px minmax(0, 1fr) 101px; min-height: 112px; }
  .occupancy-ring { width: 49px; height: 49px; font-size: 17px; border-width: 5px; }
  .club-table-type { font-size: 9px; letter-spacing: .8px; }
  .club-table-summary { padding-right: 6px; }
  .club-table-summary h3, .club-table-summary .table-name { font-size: 12px; }
  .club-table-limits { font-size: 17px; letter-spacing: -.3px; }
  .club-table-summary p { font-size: 8px; }
  .club-table-buyin { padding-right: 12px; font-size: 8px; }
  .club-table-buyin strong { font-size: 17px; }
  .club-toolbar { gap: 5px 11px; font-size: 9px; }
  .club-toolbar select { flex: 1; margin-left: 0; }
  .table-navigation { gap: 6px; }
  .table-nav-actions { gap: 4px; }
  .table-navigation button { padding: 6px; font-size: 9px; }
  body[data-view="table"] .table-stage { min-height: 420px; }
  body[data-view="table"] .seat[data-seat="1"] { left: 13%; }
  body[data-view="table"] .seat[data-seat="4"] { left: 87%; }
  body[data-view="table"] .board p { font-size: 7px; }
  .table-rules-grid { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .club-table-card,
  body[data-view="table"] .table-stage .seat,
  .sit-button {
    animation: none !important;
    transition: none !important;
  }
}

/* Exact structure of the club screen. */
.club-announcement{padding:17px 20px;margin:15px 0 24px;border:1px solid #303b34;border-radius:10px;background:#171c19;color:#d4dfd7}
.club-announcement>strong{font-size:13px}.club-announcement>p{font-size:12px;line-height:1.7;color:#99a89d;margin:7px 0 0}
.club-tabs{display:flex;align-items:center;gap:24px;border-bottom:1px solid #343638;margin-top:22px;color:#8e9891;font-size:12px}
.club-tab-active{display:inline-block;border-bottom:3px solid #00ce8b;padding:13px 5px;color:#e6f4eb;font-weight:650;font-size:17px}
.club-toolbar input[type="search"]{margin-left:auto;min-height:36px;min-width:140px;max-width:240px;flex:1;background:#222825;color:#e3ece6;border:1px solid #3e4941;border-radius:7px;padding:8px 11px;font:inherit}
.rule-summary>div{display:flex;justify-content:space-between;align-items:baseline;gap:18px;border-bottom:1px solid #2d3630;padding:6px 0}
.rule-summary>div>span{color:#8fa296;flex:1}.rule-summary>div>strong{color:#d5e6da;text-align:right;max-width:65%;font-weight:550}
.mini-table-brand{display:none}.table-status{display:block;color:#8d9d92;font-size:10px;margin-top:8px}
.table-name{display:block}.club-empty{padding:30px 10px;text-align:center;color:#9ca99f}.form-error{color:#f3aaa1;font-size:12px;line-height:1.6;min-height:16px}
.creation-note{font-size:11px;line-height:1.7;color:#98b39f;padding:12px;border:1px solid #334b3b;border-radius:8px;background:#17291c;margin:12px 0}
.buyin-limits{display:flex;justify-content:space-between;gap:14px;color:#a4c0ac;font-size:12px;margin:14px 0}
.table-rules-grid .full-field{grid-column:1/-1}.seat .sit-button{white-space:pre-line}
body[data-view="table"] .seat.player-seat>.sit-button{display:none}
.auth-card #account-fields label,.auth-card #verification-fields label{display:block;margin:18px 0 7px;font-size:12px}
.auth-card .field-help{display:block;font-size:10px;color:#7f9a8b;line-height:1.6;margin-top:6px}
.auth-card #auth-code{text-align:center;font-size:27px;letter-spacing:.24em;font-variant-numeric:tabular-nums;min-height:58px;padding-left:17px}
.verification-mail-icon{display:grid;place-items:center;width:60px;height:60px;background:#183b2b;border:1px solid #3d7d58;color:#9ee2b8;border-radius:50%;font-size:28px;margin:19px auto 12px}
.auth-card #verification-target{text-align:center;overflow-wrap:anywhere;color:#b7d6c1;font-size:12px}
.auth-card #verification-actions button{font-size:11px;min-height:32px;margin-top:8px}
.admin-first-notice{font-size:11px!important;line-height:1.65!important;padding:11px;border:1px solid #426244;border-radius:8px;background:#18311d;color:#a5d0ac!important}
.admin-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:15px 0}
.admin-stats>div{display:flex;flex-direction:column;gap:6px;padding:14px;border:1px solid #395744;border-radius:9px;background:#163023}
.admin-stats strong{font-size:25px;color:#bdeac8}.admin-stats span{font-size:11px;color:#8fad98}
.admin-users{display:flex;flex-direction:column;gap:8px}.admin-user-row{display:grid;gap:5px;border:1px solid #314d3a;border-radius:7px;padding:12px;font-size:12px;overflow-wrap:anywhere}.admin-user-row>span:first-child{font-weight:650;color:#d1ead8}.admin-user-row>span:last-child{font-size:10px;color:#84bd94}
body[data-view="table"] .table-watermark{top:65%;font-size:clamp(24px,3.5vw,45px);opacity:.65;letter-spacing:-1.5px}
body[data-view="table"] .table-watermark span{font-size:8px;letter-spacing:1.5px;margin-top:8px}
.table-game-info{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:7px 11px;max-width:280px;min-width:150px;font-size:11px;color:#a4bba9;line-height:1.5}
.table-game-info #analysis-title{color:#d1e2d1;font-weight:600}.table-game-info #analysis-detail{grid-column:1/-1;font-size:10px;color:#809787;overflow-wrap:anywhere}
.table-game-info>button{font-size:10px;min-height:29px;padding:5px 8px}.bet-shortcuts{margin-top:8px;justify-content:flex-end}
@media(max-width:780px){body[data-view="table"] .table-watermark{font-size:25px;top:68%}.table-game-info{max-width:none;display:flex;flex-wrap:wrap;font-size:10px;gap:5px 10px}.table-game-info #analysis-detail{font-size:9px}.bet-shortcuts{justify-content:flex-start}.bet-shortcuts button{min-height:25px;padding:4px 8px;font-size:9px}}
@media(max-width:780px){.club-tabs{gap:15px;font-size:9px}.club-tab-active{font-size:14px}.club-announcement{padding:13px;margin:14px 0}.club-announcement>p{font-size:10px}.club-toolbar input[type="search"]{max-width:none;flex-basis:100%;margin-left:0;font-size:11px}.rule-summary>div{gap:14px}.rule-summary>div>strong{max-width:61%}.table-status{font-size:8px}.creation-note{font-size:10px}}
.code-clipboard-actions{display:flex;gap:8px;margin-top:10px}.code-clipboard-actions>button{flex:1;min-width:0;min-height:40px;padding:8px 10px;font-size:12px}.auth-card .code-clipboard-status{min-height:18px;margin:6px 0 0;color:#a5d6c4;font-size:11px;line-height:1.6}