:root {
  --bg: #0f172a;
  --bg-2: #1e293b;
  --panel: #16281f;
  --felt: #1e293b;
  --felt-2: #243247;
  --felt-ring: #16202e;
  --accent: #22c55e;
  --accent-dark: #16a34a;
  --gold: #eab308;
  --red: #dc2626;
  --text: #f8fafc;
  --text-dim: #94a3b8;
  --card-bg: #ffffff;
  --card-black: #1f2937;
  --card-red: #dc2626;
  --danger: #ef4444;
  --radius: 14px;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;      /* iOS 长按不弹出选中/复制菜单 */
  -webkit-user-select: none !important;  /* 禁止文本选中（长按不再选中文字） */
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}
/* 输入框例外：保留输入与长按粘贴能力 */
input, textarea {
  -webkit-touch-callout: default;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.hidden { display: none !important; }

/* 版本号标识（登录页角落，便于确认客户端加载的代码版本） */
.ver-tag { text-align: center; margin-top: 10px; font-size: 11px; color: var(--text-dim); opacity: .6; }
/* 大厅页右下角版本号 */
.ver-tag-lobby { position: fixed; right: 12px; bottom: calc(8px + env(safe-area-inset-bottom)); font-size: 11px; color: var(--text-dim); opacity: .5; pointer-events: none; }

.view {
  position: absolute; inset: 0;
  overflow-y: auto;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

/* ---------------- 顶栏 ---------------- */
#topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  height: 52px; padding: 0 8px;
  background: var(--bg-2);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar-btns { display: flex; align-items: center; gap: 6px; }
.btn-col { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }

/* 牌桌页顶栏：最左侧小盲/大盲显示 + 比赛倒计时/游玩按钮 + 右侧操作按钮，各块尺寸对齐一致 */
.blind-info {
  display: flex; flex-direction: column; gap: 6px;
  margin-right: 8px; flex-shrink: 0; align-items: stretch;
}
.blind-cell {
  width: 66px; padding: 5px 8px; font-size: 13px; font-weight: 700; text-align: center;
  border: 1px solid transparent; border-radius: 10px;
  color: #fbbf24; background: rgba(0,0,0,.5);
  white-space: nowrap; line-height: 1.3; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: 3px;
}
.bc-label { font-size: 10px; font-weight: 600; color: var(--text-dim); }

/* 比赛-模式一：升盲倒计时 + 游玩/入池按钮（两个竖排块，与操作栏按钮尺寸对齐） */
.blind-box {
  display: flex; flex-direction: column; gap: 6px;
  margin-right: 8px; flex-shrink: 0; align-items: stretch;
}
.blind-timer {
  width: 66px; padding: 5px 8px; font-size: 13px; font-weight: 700; text-align: center;
  border: 1px solid transparent; border-radius: 10px;
  color: #fbbf24; background: rgba(0,0,0,.5);
  white-space: nowrap; line-height: 1.3; box-sizing: border-box;
}
.blind-pool-btn {
  width: 66px; padding: 5px 8px; font-size: 13px; font-weight: 700; text-align: center;
  border: 1px solid rgba(148,163,184,.38); border-radius: 10px; cursor: pointer;
  background: transparent; color: #cbd5e1; white-space: nowrap;
  line-height: 1.3; box-sizing: border-box;
}
.blind-pool-btn.pooled {
  background: rgba(251, 191, 36, .18); color: #fbbf24; border-color: rgba(251, 191, 36, .5);
}
.blind-pool-btn:disabled { opacity: .55; cursor: not-allowed; }

/* 牌桌页：顶栏透明悬浮，不遮挡桌面与顶部座位 */
#topbar.floating {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: auto;
  padding: 8px 10px;
  background: transparent;
  border-bottom: none;
  justify-content: flex-start;
  pointer-events: none;
}
#topbar.floating .topbar-btns,
#topbar.floating .blind-info,
#topbar.floating .blind-box { pointer-events: auto; }
#topbar.floating .topbar-btns { margin-left: auto; }
.hold-btn {
  background: transparent;
  border: 1px solid rgba(148, 163, 184, .38);  /* 淡灰蓝边框，不抢眼 */
  color: #cbd5e1;                               /* 柔和浅灰字 */
  border-radius: 10px; padding: 5px 8px; font-size: 13px; font-weight: 600; cursor: pointer;
  width: 66px; text-align: center; white-space: nowrap; flex-shrink: 0;
  line-height: 1.3; box-sizing: border-box;
}
.hold-btn:disabled { opacity: .4; }
.hold-btn.active { background: rgba(148, 163, 184, .22); color: #e2e8f0; }
.icon-btn {
  background: transparent; border: none; color: var(--text);
  font-size: 22px; width: 40px; height: 40px; cursor: pointer;
  border-radius: 10px;
}
.icon-btn:active { background: rgba(255,255,255,.1); }

/* ---------------- 按钮 ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--radius); cursor: pointer;
  font-size: 16px; font-weight: 600; padding: 12px 18px;
  transition: transform .05s, opacity .15s;
  color: var(--text);
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-primary { background: var(--accent-dark); color: #fff; }
.btn-outline { background: transparent; border: 1.5px solid var(--accent-dark); color: var(--accent); }
.btn-ghost { background: rgba(255,255,255,.1); color: var(--text); }
.btn-block { width: 100%; }
.btn-lg { font-size: 18px; padding: 15px; }
.btn-sm { padding: 8px 14px; font-size: 14px; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-fold { background: #7f1d1d; color: #fff; }
.btn-check { background: #1d4ed8; color: #fff; }
.btn-call { background: #15803d; color: #fff; }
.btn-raise { background: #b45309; color: #fff; }
.btn-allin { background: #7e22ce; color: #fff; }
.btn-round { width: 42px; height: 42px; border-radius: 50%; padding: 0; font-size: 22px; }

/* ---------------- 登录 ---------------- */
.login-box {
  max-width: 380px; margin: 8vh auto 0;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.logo { font-size: 56px; }
.app-title { font-size: 30px; margin: 0; letter-spacing: 2px; }
.form-row { width: 100%; }
.form-row input {
  width: 100%; padding: 14px 16px; font-size: 17px;
  border-radius: var(--radius); border: 1px solid rgba(255,255,255,.15);
  background: var(--bg-2); color: var(--text); outline: none;
}
.form-row input:focus { border-color: var(--accent); }
.code-row { display: flex; gap: 10px; }
.code-row input { flex: 1; }

/* ---------------- 大厅 ---------------- */
.lobby-head { margin-top: 8px; }
.me-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--panel); border-radius: var(--radius); padding: 16px;
}
.avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #0ea5e9);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0;
}
.me-info { flex: 1; }
.me-name { font-size: 18px; font-weight: 700; }
.me-stats { color: var(--text-dim); font-size: 13px; margin-top: 2px; }
.lobby-actions { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
/* 模式选择（普通 / 比赛-模式一） */
.mode-row { display: flex; align-items: center; gap: 12px; }
.mode-label { font-size: 16px; font-weight: 600; color: var(--text); flex-shrink: 0; }
.mode-select {
  flex: 1; min-width: 0; padding: 10px 14px; font-size: 14px;
  border-radius: var(--radius); border: 1px solid rgba(255,255,255,.15);
  background: var(--bg-2); color: var(--text); outline: none;
}
.mode-select option { background: var(--bg-2); color: var(--text); }
.join-row { display: flex; gap: 14px; }
.join-row input {
  flex: 1; min-width: 0; padding: 14px 16px; font-size: 18px; letter-spacing: 2px;
  border-radius: var(--radius); border: 1px solid rgba(255,255,255,.15);
  background: var(--bg-2); color: var(--text); outline: none; text-align: center;
}
.join-row .btn { flex-shrink: 0; }
.hint { color: var(--text-dim); font-size: 12px; text-align: center; line-height: 1.6; }

/* ---------------- 房间等待 ---------------- */
.room-code-card {
  background: var(--panel); border-radius: var(--radius);
  padding: 18px 16px; text-align: center; margin-top: 8px;
}
.room-code-label { color: var(--text-dim); font-size: 13px; }
.room-code { font-size: 40px; font-weight: 800; letter-spacing: 8px; margin: 6px 0; color: var(--gold); }

/* 牌局设置（小盲/大盲/初始筹码，内嵌于房间码卡片下方） */
.config-row { display: flex; gap: 10px; justify-content: center; }
.config-item { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; }
.config-item label { font-size: 12px; color: var(--text-dim); }
.config-item input {
  width: 100%; padding: 8px 6px; font-size: 16px; text-align: center;
  border-radius: 8px; border: 1px solid rgba(255,255,255,.15);
  background: var(--bg-2); color: var(--text); outline: none;
}
.config-item input:disabled { opacity: .6; }
.config-item input[type="checkbox"] { width: 24px; height: 24px; padding: 0; cursor: pointer; accent-color: var(--accent); }
/* 复制邀请 + 保存设置 并排 */
.room-code-actions { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }
.room-code-actions .btn { flex: 1; max-width: 160px; }

.player-list { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 20px; }
.player-chip {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 76px;
}
.player-chip .avatar { width: 56px; height: 56px; font-size: 22px; }
.player-chip .pname { font-size: 13px; max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.host-badge { font-size: 10px; color: var(--accent); }
.room-actions { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }

/* ---------------- 牌桌 ---------------- */
#view-table { padding: 0; display: flex; flex-direction: column; }
.table-wrap { flex: 1; padding: 6px; padding-top: 88px; padding-bottom: 10px; display: flex; align-items: center; justify-content: center; }
.table-felt {
  position: relative; width: 100%;
  height: 100%;          /* 长方形撑满可用空间，充分利用屏幕 */
  background: var(--felt);
  border: 4px solid #0b1220;
  border-radius: 14px;   /* 长方形 + 小圆角（不用椭圆，避免 GPU 上下半闪烁） */
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.table-center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 90%;
}
.center-top { display: flex; align-items: center; justify-content: center; gap: 10px; }
/* 底池 & 秒表：同款深色框，字体一致，始终占位不隐藏（避免布局跳动闪屏）。
   不用 clip-path（手机 GPU 合成易闪烁），改圆角矩形。 */
.pot-display, .turn-timer {
  display: flex; align-items: center; justify-content: center;
  min-height: 30px; padding: 5px 16px;
  font-size: 15px; font-weight: 800; line-height: 1;
  background: rgba(0,0,0,.55);
  border-radius: 8px;
  flex-shrink: 0;
}
.pot-display { color: var(--gold); width: 96px; }
.turn-timer { color: #fff; width: 64px; }
.turn-timer.danger { color: #fca5a5; }
.community-cards { display: flex; gap: 6px; min-height: 66px; justify-content: center; }
.community-cards .card {
  width: 48px; height: 66px; border-radius: 6px;
  font-size: 14px; background: var(--card-bg);
}
.phase-display { font-size: 13px; color: #d1fae5; background: rgba(0,0,0,.35); padding: 3px 12px; border-radius: 10px; }

.seats { position: absolute; inset: 0; }

/* 摊牌亮牌：在座位与公共牌之间的中点展示比牌方底牌（无框、紧凑） */
.reveal-layer { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.reveal-card {
  position: absolute; transform: translate(-50%,-50%);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.reveal-cards { display: flex; gap: 2px; }
.reveal-cards .card { width: 22px; height: 30px; font-size: 8px; border-radius: 3px; }
.reveal-hand { font-size: 10px; color: var(--gold); font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.9); }

/* 座位 */
.seat {
  position: absolute; transform: translate(-50%,-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 66px;
}
.seat .avatar {
  width: 40px; height: 40px; font-size: 10px;
  border: 2px solid transparent;
  padding: 0 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.seat.turn .avatar { border-color: var(--gold); }
.seat .sbadge {
  font-size: 10px; font-weight: 700; color: #fde68a;
  background: rgba(0,0,0,.55); padding: 1px 6px; border-radius: 8px; line-height: 1.3;
}
.seat.me .avatar { background: linear-gradient(135deg, #7c3aed, #a855f7); }
.avatar-row { display: flex; align-items: center; gap: 5px; }
.avatar-wrap { position: relative; display: flex; }
.ready-check {
  position: absolute; top: -4px; right: -4px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #22c55e; color: #fff;
  font-size: 11px; font-weight: 800; line-height: 16px; text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.5);
  z-index: 3;
}
.seat .seat-cards { display: flex; gap: 2px; }
.seat .seat-cards .card { width: 28px; height: 39px; font-size: 10px; border-radius: 4px; }
.saction {
  display: flex; flex-direction: column; align-items: center;
  line-height: 1.15;
}
.saction .sa-type { font-size: 10px; font-weight: 700; color: #fff; }
.saction .sa-amt { font-size: 12px; font-weight: 800; color: var(--gold); }
.seat.dealer::after {
  content: "D"; position: absolute; top: -6px; left: -6px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--gold); color: #000; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.seat .schips { font-size: 11px; color: var(--gold); font-weight: 700; line-height: 1.25; }
.seat.folded .avatar { opacity: .45; filter: grayscale(.7); }
.seat.busted .avatar { background: #475569; opacity: .45; filter: grayscale(1); }  /* 被清空：灰蓝色不显眼，与正常头像有区别 */

/* 扑克牌：点数在左上角（小），花色居中偏右下（大），互补协调 */
.card {
  background: var(--card-bg); color: var(--card-black);
  position: relative; border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
  flex-shrink: 0; overflow: hidden;
  font-size: 10px; line-height: 1; /* 基准字号，各尺寸卡片覆盖 */
}
.card b {
  position: absolute; top: 2px; left: 3px;
  font-size: 1.25em; font-weight: 800;
}
.card i {
  position: absolute; left: 54%; top: 55%; transform: translate(-50%,-50%);
  font-size: 2.4em; font-style: normal;
}
.card.red { color: var(--card-red); }
.card.back {
  background: linear-gradient(135deg, #7c3aed, #4c1d95); color: #fff;
}
.card.back .back-suit { font-size: 1.6em; }

/* ---------------- 底部操作区 ---------------- */
.action-bar {
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  background: var(--bg-2); border-top: 1px solid rgba(255,255,255,.08);
}
.action-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.6fr;
  gap: 6px;
  align-items: stretch;
}
.cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-height: 78px;
  background: rgba(255,255,255,.04); border-radius: 10px; padding: 6px 4px;
}
.action-buttons {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px; width: 100%;
}
.action-buttons .btn {
  padding: 11px 4px; font-size: 14px; border-radius: 8px; width: 100%;
}
.action-buttons .btn:disabled { opacity: .35; filter: grayscale(.85); cursor: not-allowed; }
/* 合并块上排：− / 输入框 / +（左） + 下注确认（右） */
.bet-top { display: flex; gap: 6px; align-items: center; width: 100%; }
.raise-control { display: flex; gap: 4px; align-items: center; flex: 1; min-width: 0; }
.raise-control input {
  flex: 1; min-width: 0; width: 100%; padding: 7px 4px; font-size: 15px; text-align: center;
  border-radius: 6px; border: 1px solid rgba(255,255,255,.2);
  background: var(--bg); color: var(--text); outline: none;
}
.raise-control input:disabled { opacity: .5; }
.btn-round {
  width: 30px; height: 32px; flex-shrink: 0; font-size: 18px; line-height: 1;
  border: 1px solid rgba(255,255,255,.2); border-radius: 6px;
  background: rgba(255,255,255,.06); color: var(--text); cursor: pointer;
}
.btn-round:disabled { opacity: .4; cursor: not-allowed; }
.btn-confirm {
  background: var(--accent-dark); color: #fff; border: none; border-radius: 8px;
  padding: 0 10px; height: 32px; font-size: 13px; font-weight: 700; cursor: pointer;
  flex-shrink: 0; white-space: nowrap;
}
.btn-confirm:disabled { opacity: .4; cursor: not-allowed; }

/* ---------------- 滑动筹码控制器（水平，横跨合并块） ---------------- */
.chip-slider {
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  width: 100%;
}
.slider-track {
  position: relative; width: 100%; height: 32px;
  background: rgba(255,255,255,.08); border-radius: 16px;
  touch-action: none; cursor: pointer;
}
.slider-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent));
  border-radius: 16px;
}
.slider-thumb {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; border: 3px solid var(--accent);
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
  pointer-events: none;
}
.slider-dots { position: absolute; inset: 0; pointer-events: none; }
.slider-dot {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); border: 1px solid rgba(0,0,0,.5);
}
.table-msg { text-align: center; font-size: 12px; color: var(--text-dim); margin-top: 5px; min-height: 16px; }

/* ---------------- 结算弹层（透明小卡片，不遮挡亮牌） ---------------- */
.overlay {
  position: fixed; inset: 0; z-index: 100;
  background: transparent;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  pointer-events: none;
}
.result-box {
  background: rgba(23, 31, 46, .92);
  border-radius: 14px; padding: 12px 14px;
  width: 100%; max-width: 300px;
  max-height: 46vh; overflow-y: auto;
  pointer-events: auto;
  box-shadow: 0 4px 20px rgba(0,0,0,.45);
}
.result-title { text-align: center; font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.result-body { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
/* 结算弹窗三个按钮之间留间隙 */
.result-box button + button { margin-top: 8px; }
.result-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel); border-radius: 8px; padding: 8px 10px;
}
.result-row .win { color: var(--gold); font-weight: 700; margin-left: auto; text-align: right; }
.result-row .win .profit { color: var(--accent); font-size: 12px; font-weight: 600; margin-top: 2px; }
.result-row .hand { color: var(--text-dim); font-size: 12px; }

/* ---------------- 盈利排行弹层 ---------------- */
#list-overlay { align-items: center; }
.list-box {
  background: rgba(23, 31, 46, .96);
  border-radius: 14px; padding: 14px 16px;
  width: 100%; max-width: 320px;
  max-height: 72vh; overflow-y: auto;
  pointer-events: auto;
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
}
.list-title { text-align: center; font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.list-body { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.list-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel); border-radius: 8px; padding: 7px 10px;
}
.list-divider {
  text-align: center; font-size: 12px; color: var(--text-dim);
  padding: 8px 0 2px; margin-top: 4px;
  border-top: 1px dashed rgba(148,163,184,.3);
}
/* 表头（列说明）：玩家 / 取筹 / 现筹 / 盈利 */
.list-header {
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px 6px;
  font-size: 11px; color: var(--text-dim);
}
.lh-name { flex: 1; }
.lh-num { width: 46px; text-align: right; flex-shrink: 0; }
.list-name { flex: 1; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-num { width: 46px; text-align: right; font-size: 13px; color: var(--text); font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.list-num.won { color: var(--gold); }

/* ---------------- 筹码卡片 / 补充 ---------------- */
.my-chips-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--panel); border-radius: var(--radius); padding: 14px 16px; margin-top: 18px;
}
.my-chips-info { display: flex; flex-direction: column; gap: 4px; }
.chips-line { display: flex; gap: 10px; align-items: baseline; }
.chips-label { color: var(--text-dim); font-size: 13px; }
.chips-value { color: var(--gold); font-weight: 800; font-size: 20px; }
.won-value { color: var(--accent); font-weight: 700; font-size: 15px; }
.rebuy-panel {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  background: var(--panel); border-radius: var(--radius); padding: 12px; margin-top: 10px;
}
.rebuy-label { color: var(--text-dim); font-size: 13px; }
.ready-badge { font-size: 10px; color: var(--accent); background: rgba(34,197,94,.15); padding: 2px 8px; border-radius: 8px; }
.offline-badge { font-size: 10px; color: var(--text-dim); background: rgba(148,163,184,.15); padding: 2px 8px; border-radius: 8px; }

/* ---------------- toast ---------------- */
.toast {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%);
  background: rgba(0,0,0,.85); color: #fff; padding: 10px 18px;
  border-radius: 20px; font-size: 14px; z-index: 200;
  opacity: 0; pointer-events: none; transition: opacity .2s;
  max-width: 86vw; text-align: center;
}
.toast.show { opacity: 1; }

@media (max-height: 640px) {
  .seat .avatar { width: 34px; height: 34px; font-size: 16px; }
  .community-cards .card { width: 32px; height: 44px; font-size: 10px; }
  .seat .seat-cards .card { width: 24px; height: 33px; font-size: 8px; }
}