/* Sidepot — table features shared by both layouts (see features.js). */

/* Bet-row buttons that aren't option pickers get the same quiet outline as an unpicked option. */
.bet { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); color: var(--muted); }

/* ---------- four-colour deck ---------- */
body.four-color .card.suit-d { color: #1f5fb4; }
body.four-color .card.suit-c { color: #1d7a45; }

/* ---------- small table buttons ---------- */
.top-btn, .react-btn {
  width: 30px;
  height: 30px;
  flex: none;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.04);
  color: var(--cream-3);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.top-btn:hover, .react-btn:hover { border-color: var(--gold-deep); }
.top-btn--push { margin-left: auto; }

.react-picker {
  display: flex;
  gap: 2px;
  padding: 5px;
  border-radius: 12px;
  background: #241a15;
  border: 1px solid var(--line-2);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  animation: fade 0.15s ease both;
}
.react-picker--phone { position: absolute; right: 12px; top: 50px; z-index: 9; }
.react-picker--wide { margin: 10px 22px 0; justify-content: space-between; }
.react-picker__e { width: 36px; height: 36px; border: none; border-radius: 8px; background: none; cursor: pointer; font-size: 20px; padding: 0; }
.react-picker__e:hover { background: rgba(255, 255, 255, 0.08); }

.float-react {
  position: fixed;
  z-index: 60;
  font-size: 30px;
  line-height: 1;
  pointer-events: none;
  animation: floatUp 2.3s ease-out forwards;
}
@keyframes floatUp {
  0% { opacity: 0; transform: translate(-50%, 0) scale(0.6); }
  12% { opacity: 1; transform: translate(-50%, -45%) scale(1.15); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -170%) scale(1); }
}

.pause-banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 18;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 7px;
  background: rgba(36, 26, 21, 0.97);
  border-bottom: 1px solid var(--gold-deep);
  color: var(--gold);
  font-size: 12.5px;
  font-weight: 700;
}
.pause-banner button {
  height: 26px;
  padding: 0 12px;
  border: none;
  border-radius: 6px;
  background: var(--gold-grad);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

/* ---------- table centre ---------- */
.card--rabbit { opacity: 0.6; box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.7), 0 5px 12px rgba(0, 0, 0, 0.5); }
.joker-line { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: rgba(243, 236, 224, 0.72); }
.joker-line .card--mini { flex: none; }
.level-line { font-family: var(--narrow); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-soft); text-align: center; font-variant-numeric: tabular-nums; }

.standings {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
  max-width: calc(100% - 40px);
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(16, 12, 10, 0.86);
  border: 1px solid var(--line-3);
}
.standings__title { font-family: var(--serif); font-size: 19px; color: var(--cream); text-align: center; margin-bottom: 4px; }
.standings__row { display: flex; gap: 12px; font-size: 13px; color: var(--cream-3); }
.standings__row--me { color: var(--gold); font-weight: 600; }
.standings__place { width: 36px; color: var(--muted); }
.standings__again { margin-top: 8px; height: 40px; border-radius: 9px; font-size: 13.5px; }
.standings__note { font-size: 11.5px; color: var(--muted-2); text-align: center; margin-top: 6px; }

/* Omaha: four hole cards fanned so they fit beside the hand name. */
.hole--four { gap: 0; }
.hole--four .card--hole { width: 42px; height: 60px; }
.hole--four .card--hole + .card--hole { margin-left: -9px; }
.hole--four .card--hole .card__r { left: 5px; top: 4px; font-size: 14px; }
.hole--four .card--hole .card__s { right: 4px; bottom: 4px; font-size: 16px; }
.card--hole.deal.deal--4 { animation-delay: 0.46s; }
.d-hole--four { gap: 0; }
.d-hole--four .d-card-hole + .d-card-hole { margin-left: -14px; }
.d-deal-hole.d-deal--4 { animation-delay: 0.46s; }

.bet--pre { font-size: 11px; }
/* Four hole cards leave less room beside them; keep the stack on one line. */
.hand-bar__stack { white-space: nowrap; }
.hand-bar__turn { min-width: 0; text-align: right; }

/* ---------- ledger ---------- */
.ledger { display: flex; flex-direction: column; }
.ledger__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 62px 62px 66px;
  gap: 8px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid #231a15;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--cream-3);
}
.ledger__row span:not(:first-child) { text-align: right; }
.ledger__row--head { font-family: var(--narrow); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #6f6156; }
.ledger__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger__name em { font-style: normal; font-size: 10.5px; color: var(--muted-2); margin-left: 3px; }
.ledger__note { font-size: 11.5px; line-height: 1.45; color: #6f6156; padding-top: 8px; }
.is-up { color: #8fd1a8; }
.is-down { color: #eab7ba; }

/* ---------- table menu ---------- */
.menu-overlay { z-index: 12; }
.menu-backdrop { position: absolute; inset: 0; }
.menu-sheet, .menu-modal { position: relative; z-index: 1; overflow: hidden; }
.menu-sheet { max-height: 88%; gap: 14px; }
.menu-modal { width: 580px; max-height: calc(100% - 64px); padding: 24px 26px; gap: 16px; }
.menu-head { display: flex; align-items: center; gap: 12px; }
.menu-head__title { font-family: var(--serif); font-size: 21px; color: var(--cream); }
.menu-back { background: none; border: none; padding: 0; color: var(--gold); cursor: pointer; font-size: 13px; }
.menu-body { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 18px; padding-bottom: 4px; }
.menu-sec { display: flex; flex-direction: column; gap: 8px; }
.menu-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--cream-2);
  cursor: pointer;
}
.menu-row:hover { border-color: var(--line-3); }
.menu-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.menu-row__text b { font-size: 14px; font-weight: 600; }
.menu-row__text span { font-size: 12px; color: var(--muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switch { position: relative; flex: none; width: 38px; height: 22px; border-radius: 11px; background: var(--line-2); transition: background 0.15s; }
.switch span { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--cream-3); transition: transform 0.15s; }
.switch--on { background: var(--gold-deep); }
.switch--on span { transform: translateX(16px); background: var(--cream); }
.menu-confirm { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid #6a2731; border-radius: 10px; background: rgba(106, 39, 49, 0.18); }
.menu-confirm span { flex: 1; font-size: 12.5px; line-height: 1.45; color: #eab7ba; }
.menu-confirm .bet, .menu-player .bet { flex: none; padding: 0 12px; }
.bet.bet--danger { border: 1px solid #6a2731; background: rgba(106, 39, 49, 0.3); color: #eab7ba; }
.menu-player { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #2c211b; }
.menu-player__av { flex: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--ink); }
.menu-player__who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.menu-player__who b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-player__who span { font-size: 11.5px; color: var(--muted-2); }
.menu-settings { display: flex; flex-direction: column; gap: 12px; }
.menu-sub { margin-top: 4px; }
.setting__note { font-size: 11.5px; line-height: 1.45; color: var(--muted-2); }

/* ---------- hand history ---------- */
.hist { border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, 0.02); }
.hist--open { border-color: var(--line-3); }
.hist__row { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 13px; background: none; border: none; color: var(--cream-2); cursor: pointer; text-align: left; }
.hist__no { flex: none; font-family: var(--narrow); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-soft); }
.hist__sum { flex: 1; min-width: 0; font-size: 12.5px; color: var(--cream-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist__pot { flex: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.hist__detail { padding: 0 13px 13px; display: flex; flex-direction: column; gap: 10px; }
.hist__meta { font-size: 11.5px; color: var(--muted-2); }
.hist__cards { display: flex; gap: 3px; }
.hist__player { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.hist__pname { flex: 1; min-width: 0; color: var(--cream-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist__hidden { font-size: 11px; color: #6f6156; }
.hist__delta { flex: none; width: 76px; text-align: right; font-variant-numeric: tabular-nums; }
.hist__log { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid #2c211b; }

/* ---------- wide rail tools ---------- */
.d-rail__tools { display: flex; gap: 8px; padding: 12px 22px 0; }
.d-tool { flex: 1; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); color: var(--muted-3); font-size: 12.5px; cursor: pointer; }
.d-tool:hover { border-color: var(--gold-deep); }
.react-btn.d-tool--react { flex: none; width: 44px; height: 34px; font-size: 16px; }
.d-keys { font-size: 11px; color: #6f6156; text-align: right; }