/* ============================================================
   来玩风格主题 v3：浅色页面 + 绿色绒面桌 + 圆形操作键
   参考截图：h5.laiwan.life 德州扑克牌桌
   ============================================================ */

:root {
  --felt1: #1a8a60;
  --felt2: #07422e;
  --gold: #ffc20a;
  --ink: #22304a;
  --text: #22304a;
  --panel: rgba(255, 255, 255, .94);
  --line: rgba(34, 48, 74, .14);
}

body {
  color: var(--ink);
  background: linear-gradient(180deg, #eaf6fe 0%, #dcedf9 45%, #cfe6f6 100%);
}

/* ---------- 顶栏 ---------- */
#topbar > span {
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(34, 48, 74, .12);
  color: #33465f;
  box-shadow: 0 2px 8px rgba(34, 48, 74, .08);
}
#hand-info { color: #0b6b4c; font-weight: 800; }

/* ---------- 房主面板 ---------- */
#host-panel .settings { color: #4a5a74; }
#host-panel select {
  background: #fff;
  border-color: #cfe0ee;
  color: #22304a;
}
#host-panel button {
  background: linear-gradient(180deg, #ffd94a, #f5a400);
  color: #3a2600;
  box-shadow: 0 3px 0 #c47f00;
}
#host-panel .host-note { color: #4a5a74; }

/* ---------- 牌桌：绿色绒面圆角矩形 ---------- */
#table {
  border-radius: 44px;
  border: 2px solid #0a4a35;
  background:
    radial-gradient(ellipse at 50% 28%, rgba(255, 255, 255, .12), transparent 55%),
    radial-gradient(ellipse at 50% 45%, var(--felt1), #0e6347 52%, var(--felt2) 100%);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, .55),
    0 0 0 9px rgba(9, 60, 44, .18),
    0 20px 56px rgba(9, 60, 44, .42),
    inset 0 0 70px rgba(0, 0, 0, .38);
}
#table::after {
  border-color: rgba(255, 255, 255, .10);
  border-radius: 34px;
}
.felt-watermark {
  position: absolute;
  left: 50%;
  top: 57%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, .22);
  font-size: clamp(12px, 1.8vw, 20px);
  font-weight: 800;
  letter-spacing: .18em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  pointer-events: none;
  white-space: nowrap;
  z-index: 1;
}
#pot-label {
  color: #ffffff;
  font-weight: 700;
  font-size: clamp(12px, 1.5vw, 16px);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
#pot-label span { color: rgba(255, 255, 255, .85); font-size: .85em; margin-right: 4px; }

/* ---------- 牌面：左上大点数 + 中央大花色（简洁风） ---------- */
.card { position: relative; overflow: hidden; }
.card .rk {
  position: absolute;
  top: 5%;
  left: 9%;
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.03em;
}
.card .st {
  position: absolute;
  left: 50%;
  top: 64%;
  transform: translate(-50%, -50%);
  line-height: 1;
}
/* 关闭旧的四角样式与中央水印 */
.card .tl, .card .br, .card .c { display: none !important; }
.card::after { content: none !important; display: none !important; }
/* 各场景字号（花色整体调大 5px） */
.card .rk { font-size: clamp(12px, 1.9vw, 22px); }
.card .st { font-size: clamp(19px, 2.3vw, 32px); }
#board .card .rk { font-size: clamp(18px, 3vw, 32px); }
#board .card .st { font-size: clamp(26px, 3.6vw, 45px); }
.my-cards .card .rk { font-size: clamp(26px, 4vw, 44px); }
.my-cards .card .st { font-size: clamp(35px, 4.8vw, 59px); }
.seat .card .rk { font-size: clamp(12px, 1.9vw, 21px); }
.seat .card .st { font-size: clamp(19px, 2.3vw, 31px); }
.seat.showdown .card .rk { font-size: clamp(14px, 2.2vw, 25px); }
.seat.showdown .card .st { font-size: clamp(22px, 2.7vw, 35px); }
.hist-cards .card .rk { font-size: 10px; }
.hist-cards .card .st { font-size: 17px; }
.sd-cards .card .rk { font-size: 9px; }
.sd-cards .card .st { font-size: 16px; }
.cmp-cards .card .rk { font-size: clamp(13px, 1.8vw, 19px); }
.cmp-cards .card .st { font-size: clamp(21px, 2.2vw, 29px); }

/* ---------- 公共牌 ---------- */
#board { gap: clamp(4px, 1vw, 10px); }
.card {
  background: linear-gradient(170deg, #ffffff, #eef1f8);
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .35);
}
#board .card { width: clamp(36px, 6.2vw, 64px); }
#board .card .tl, #board .card .br { font-size: clamp(9px, 1.3vw, 14px); }
#board .card .c { font-size: clamp(16px, 2.6vw, 28px); }
.card.back {
  background: repeating-linear-gradient(45deg, #4a4fd6 0 5px, #383ca8 5px 10px);
  border: 2px solid #c5cbe6;
}
.card.back.slot {
  background: linear-gradient(160deg, #2b3752, #1b2539);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .4), inset 0 0 12px rgba(0, 0, 0, .35);
  opacity: .95;
}
.card.empty { border-color: rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .06); }
.card.best { outline: 2px solid #ffc20a; box-shadow: 0 0 8px rgba(255, 194, 10, .45); }
#deck-visual { opacity: .85; }
#deck-visual .card {
  background: linear-gradient(160deg, #2b3752, #1b2539);
  border: 1px solid rgba(255, 255, 255, .18);
}

/* ---------- 空位 ---------- */
.empty-seat {
  position: absolute;
  transform: translate(-50%, -50%);
  width: clamp(32px, 5vw, 46px);
  height: clamp(32px, 5vw, 46px);
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, .38);
  background: rgba(255, 255, 255, .06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .58);
  font-size: clamp(9px, 1vw, 12px);
  pointer-events: none;
}

/* ---------- 玩家座位（无边框，头像+昵称+筹码胶囊） ---------- */
.seat { width: auto; gap: 3px; }
.seat-info {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.avatar {
  width: clamp(32px, 5vw, 46px);
  height: clamp(32px, 5vw, 46px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: clamp(13px, 2vw, 18px);
  border: 2px solid rgba(255, 255, 255, .85);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .38);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.seat-name {
  background: rgba(0, 0, 0, .45);
  color: #fff;
  font-size: clamp(9px, 1.1vw, 12px);
  padding: 2px 9px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.seat-chips {
  background: rgba(16, 20, 32, .88);
  color: #ffd75e;
  font-weight: 800;
  font-size: clamp(10px, 1.2vw, 14px);
  padding: 2px 10px;
  border-radius: 999px;
}
.seat-bet {
  background: linear-gradient(180deg, #ffd94a, #f0a400);
  color: #3a2600;
  font-weight: 800;
  font-size: clamp(9px, 1.1vw, 12px);
  padding: 1px 9px;
  border-radius: 999px;
}
.seat-status {
  background: rgba(0, 0, 0, .38);
  color: #ffe08a;
  font-size: clamp(9px, 1.05vw, 12px);
  padding: 1px 9px;
  border-radius: 999px;
}
.seat.actor .avatar {
  border-color: #ffc20a;
  box-shadow: 0 0 0 3px rgba(255, 194, 10, .35), 0 0 20px rgba(255, 194, 10, .6);
}
.seat.me .avatar { border-color: #7ef0b0; }
/* 庄家头像：金色光圈 */
.seat.banker .avatar {
  border-color: #ffc20a;
  box-shadow: 0 0 0 3px rgba(255, 194, 10, .4), 0 0 16px 6px rgba(255, 194, 10, .55);
  animation: banker-glow 1.6s ease-in-out infinite;
}
@keyframes banker-glow {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255, 194, 10, .35), 0 0 12px 4px rgba(255, 194, 10, .45); }
  50% { box-shadow: 0 0 0 5px rgba(255, 194, 10, .6), 0 0 28px 12px rgba(255, 194, 10, .8); }
}
.seat.folded { opacity: .45; }
/* 摊牌时座位上的牌放大亮出 */
.seat.showdown .card { width: clamp(30px, 5.4vw, 54px); }
.seat.showdown .seat-status { color: #ffffff; background: rgba(0, 0, 0, .5); font-weight: 700; }

/* 赢家金额浮标（桌面摊牌，不弹面板） */
.win-float {
  position: absolute;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg, #ffd94a, #f0a400);
  color: #3a2600;
  font-weight: 900;
  font-size: clamp(12px, 1.6vw, 16px);
  padding: 3px 12px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(190, 130, 0, .45);
  z-index: 6;
  animation: win-rise .55s cubic-bezier(.2, .9, .3, 1.2) both;
  pointer-events: none;
  white-space: nowrap;
}
@keyframes win-rise {
  0% { transform: translate(-50%, 30%) scale(.55); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.badge { font-size: .85em; padding: 0 5px; border-radius: 6px; }
.badge.dealer { background: #ffc20a; color: #3a2600; }
.badge.sb { background: #10aefb; color: #fff; }
.badge.bb { background: #e73939; color: #fff; }
.badge.host { background: #5e5ce6; color: #fff; }
.badge.voice { background: #e0522f; color: #fff; }
.ring { top: -10px; right: -12px; }
.ring-num { background: rgba(16, 20, 34, .95); color: #ffc20a; font-weight: 900; }

/* ---------- 我的区域：位于桌下方（不再压住桌底） ---------- */
#my-area {
  margin: -8px auto 0;
  width: min(96vw, 900px);
  background: linear-gradient(180deg, rgba(8, 34, 24, .72), rgba(5, 24, 17, .92));
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 20px 20px 18px 18px;
  box-shadow: 0 18px 44px rgba(4, 26, 18, .38);
  backdrop-filter: blur(6px);
  color: #fff;
  position: relative;
  z-index: 5;
}
.my-cards .card { width: clamp(56px, 8.5vw, 84px); }
.my-cards .card .tl, .my-cards .card .br { font-size: clamp(12px, 1.6vw, 18px); }
.my-cards .card .c { font-size: clamp(22px, 3.2vw, 34px); }
.my-meta { color: #dfe8f5; min-width: 96px; }
.my-meta .my-chips { color: #ffd75e; font-weight: 800; }
.my-meta .my-bet { color: #8fd0ff; }
.my-hand { color: #cfe0ee; }
.my-hand b { color: #ffd75e; }
.my-equity { color: #cfe0ee; }
.my-equity b { color: #5fe39b; }
.turn-timer { color: #ffd75e; font-weight: 800; }
.stand-btn {
  align-self: flex-start;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #dfe8f5;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  margin-top: 2px;
}
.stand-btn:hover { background: rgba(255, 255, 255, .22); }
.waiting-note { color: #cfe0ee; }

/* ---------- 圆形操作按钮 ---------- */
/* 操作按钮整行铺满、均匀分布（弃牌左 → 加注 → 看牌 → 全下右） */
.action-bar {
  display: flex;
  gap: clamp(10px, 2vw, 26px);
  align-items: flex-start;
  justify-content: space-evenly;
  flex: 1 1 100%;
  margin-left: 0;
  margin-top: 10px;
  padding-bottom: 4px;
}
.act-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.act {
  border-radius: 50%;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  transition: filter .12s, transform .1s;
}
.act:active { transform: scale(.94); }
.act.fold {
  width: clamp(48px, 5.6vw, 62px);
  height: clamp(48px, 5.6vw, 62px);
  background: radial-gradient(circle at 35% 28%, #ff7a7a, #d92b2b);
  color: #fff;
  font-size: clamp(20px, 2.6vw, 26px);
  box-shadow: 0 6px 14px rgba(180, 20, 20, .4);
}
.act.raise {
  width: clamp(64px, 7.6vw, 84px);
  height: clamp(64px, 7.6vw, 84px);
  background: radial-gradient(circle at 35% 28%, #ffe066, #f2a900);
  color: #4a3200;
  font-size: clamp(13px, 1.7vw, 17px);
  box-shadow: 0 6px 16px rgba(200, 140, 0, .45);
}
.act.call {
  width: clamp(54px, 6.6vw, 70px);
  height: clamp(54px, 6.6vw, 70px);
  background: radial-gradient(circle at 35% 28%, #5fe39b, #16a34a);
  color: #fff;
  font-size: clamp(13px, 1.7vw, 17px);
  box-shadow: 0 6px 14px rgba(20, 140, 70, .4);
}
/* 三公坐庄按钮：与「下注」同尺寸，金色 */
.act.banker-big {
  width: clamp(64px, 7.6vw, 84px);
  height: clamp(64px, 7.6vw, 84px);
  background: radial-gradient(circle at 35% 28%, #ffd75e, #d99400);
  color: #3a2600;
  font-size: clamp(13px, 1.7vw, 17px);
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(200, 140, 0, .5);
}
.act.banker-big.on { background: radial-gradient(circle at 35% 28%, #c9b6ff, #6d4bd8); color: #fff; }
.act.banker-big.off {
  background: radial-gradient(circle at 35% 28%, #9aa7b8, #5c6878);
  color: #e8eef6;
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}
.act.allin {
  width: clamp(42px, 5vw, 54px);
  height: clamp(42px, 5vw, 54px);
  background: radial-gradient(circle at 35% 28%, #ffb45e, #e07b00);
  color: #fff;
  font-size: clamp(10px, 1.3vw, 13px);
  box-shadow: 0 6px 14px rgba(180, 100, 0, .4);
}
.act-label { color: #cfe0ee; font-size: clamp(10px, 1.2vw, 13px); font-weight: 700; }

/* ---------- 金色下注预设圆钮 ---------- */
.preset-row { display: flex; gap: clamp(6px, 1.4vw, 16px); align-items: flex-start; }
.preset { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; }
.preset-circle {
  width: clamp(36px, 4.4vw, 50px);
  height: clamp(36px, 4.4vw, 50px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #ffe066, #f2a900);
  color: #4a3200;
  font-weight: 900;
  font-size: clamp(8px, .95vw, 10px);
  line-height: 1.05;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 5px 12px rgba(190, 130, 0, .35);
  transition: filter .12s, transform .1s;
}
.preset:hover .preset-circle { filter: brightness(1.08); transform: translateY(-1px); }
.preset b { color: #fff; font-size: clamp(10px, 1.2vw, 13px); }

/* ---------- 底部导航栏 ---------- */
#bottom-btns {
  display: flex;
  justify-content: space-evenly;
  gap: 10px;
  margin: 12px auto 16px;
  background: linear-gradient(180deg, rgba(18, 28, 44, .94), rgba(10, 18, 30, .98));
  border-radius: 20px;
  padding: 8px 12px;
  width: min(96vw, 900px);
  box-shadow: 0 12px 32px rgba(8, 20, 34, .35);
}
.mini-btn {
  background: none;
  border: none;
  color: #a9b8cc;
  font-size: clamp(11px, 1.3vw, 13px);
  padding: 7px 14px;
  border-radius: 14px;
  box-shadow: none;
  white-space: nowrap;
}
.mini-btn:hover { background: rgba(255, 255, 255, .1); color: #fff; border: none; }
.mini-btn.on { background: #e0522f; color: #fff; }

/* ---------- 本手结果小弹窗（谁赢谁输） ---------- */
#result-toast {
  position: fixed;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 45;
  width: min(92vw, 320px);
  background: linear-gradient(180deg, rgba(16, 24, 38, .97), rgba(10, 16, 28, .97));
  border: 1px solid rgba(255, 194, 10, .45);
  border-radius: 16px;
  padding: 10px 14px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .45);
  color: #dfe8f5;
  animation: toast-in .35s cubic-bezier(.2, .9, .3, 1.2) both;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
#result-toast.dragging {
  cursor: grabbing;
  animation: none;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .55);
}
@keyframes toast-in {
  0% { transform: translate(-50%, -14px); opacity: 0; }
  100% { transform: translate(-50%, 0); opacity: 1; }
}
.toast-title {
  text-align: center;
  color: #ffc20a;
  font-weight: 800;
  font-size: 13px;
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.toast-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  font-size: 14px;
}
.toast-name { color: #f2f6fb; }
.toast-name i { color: #9fb0c6; font-style: normal; font-size: 12px; }
.toast-row b { margin-left: auto; font-weight: 900; }
.toast-row b.up { color: #5fe39b; }
.toast-row b.down { color: #ff7a7a; }
.toast-row b.flat { color: #9fb0c6; }
.toast-pairs { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .12); }
.toast-pair { font-size: 12px; color: #b9c6d8; padding: 2px 0; }

/* ---------- 结果横幅（深色玻璃卡片，来玩风格比牌面板） ---------- */
#result-banner {
  background: linear-gradient(180deg, rgba(14, 20, 33, .97), rgba(8, 12, 22, .98));
  border: 1px solid rgba(255, 194, 10, .5);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .7), inset 0 0 40px rgba(255, 194, 10, .05);
  color: #dfe8f5;
  border-radius: 20px;
}
.banner-title {
  color: #ffc20a;
  font-size: 19px;
  letter-spacing: 2px;
  margin-bottom: 4px;
}
.result-pot { text-align: center; color: #9fb0c6; font-size: 13px; margin-bottom: 12px; }
.result-pot b { color: #ffd75e; font-size: 20px; font-weight: 900; margin-left: 4px; }

.rank-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  margin-bottom: 6px;
  font-size: 14px;
  border: 1px solid transparent;
}
.rank-row .rank-no {
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #dfe8f5; font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rank-row span { color: #f2f6fb; }
.rank-row i { color: #9fb0c6; font-style: normal; font-size: 12px; }
.rank-row b { margin-left: auto; }

.cmp-row {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.cmp-head { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; flex-wrap: wrap; }
.cmp-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 13px;
  border: 1.5px solid rgba(255, 255, 255, .8);
  flex-shrink: 0;
}
.cmp-name { color: #f2f6fb; font-weight: 700; font-size: 14px; }
.cmp-hand {
  background: rgba(94, 92, 230, .35);
  color: #cdd2ff;
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 700;
}
.cmp-won { color: #f2f6fb; font-weight: 900; margin-left: auto; font-size: 15px; }
.cmp-cards { display: flex; gap: 3px; flex-wrap: wrap; }
.cmp-cards .card { width: clamp(30px, 5.4vw, 42px); border-radius: 5px; }
.cmp-cards .card .tl, .cmp-cards .card .br { font-size: 8px; }
.cmp-cards .card .c { font-size: 13px; }
.pot-row, .sd-title { color: #9fb0c6; font-size: 12px; }
.sd-title { margin: 10px 0 4px; }
#banner-close { color: #9fb0c6; }
#banner-close:hover { color: #fff; }

/* ---------- 斗牛配牌窗口 ---------- */
#niu-overlay {
  position: fixed;
  inset: 0;
  z-index: 57;
  background: rgba(0, 0, 0, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#niu-panel {
  width: min(94vw, 560px);
  background: #ffffff;
  border: 2px solid #e8a6b8;
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: 0 24px 70px rgba(20, 40, 70, .3);
}
.niu-title { color: #b02a4a; font-weight: 900; font-size: 18px; margin-bottom: 4px; }
.niu-hint { color: #8a98ab; font-size: 12px; margin-bottom: 12px; }
#niu-cards { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.niu-card-wrap {
  display: inline-flex;
  cursor: pointer;
  border-radius: 10px;
  padding: 3px;
  transition: transform .12s, box-shadow .12s, background .12s;
}
.niu-card-wrap:hover { transform: translateY(-3px); }
.niu-card-wrap.sel { background: #ffe9ef; box-shadow: inset 0 0 0 3px #e8a6b8; }
.niu-card-wrap .card { width: clamp(52px, 10vw, 72px); }
.niu-preview { text-align: center; color: #66768c; font-size: 13px; font-weight: 700; padding: 8px 4px 12px; }
.niu-preview.ok { color: #0b6b4c; }
.niu-preview.bad { color: #c0263f; }
.niu-btns { display: flex; gap: 10px; }
#niu-cancel, #niu-ok, #niu-noniu { flex: 1; padding: 11px; border-radius: 12px; font-size: 14px; font-weight: 800; cursor: pointer; }
#niu-cancel { border: 1px solid #dbe6f2; background: #f2f6fb; color: #22304a; }
#niu-noniu { border: 1px solid #e8a6b8; background: #fff2f5; color: #b02a4a; }
#niu-ok { border: none; background: linear-gradient(180deg, #ff9db4, #c0263f); color: #fff; }
#niu-ok.dim { opacity: .75; }
.niu-preview.shake { animation: niu-shake .3s; }
@keyframes niu-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
#niu-ok:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- 弹窗：白色卡片 ---------- */
#raise-panel, #stats-panel, #history-panel {
  background: #ffffff;
  border: 1px solid #e2ecf5;
  box-shadow: 0 24px 70px rgba(20, 40, 70, .22);
  color: #22304a;
}
#history-panel { border: 2px solid #cfd8ff; }

/* ---------- 结束后：亮牌 / 看未发出的牌 ---------- */
.end-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.end-btn {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #dfe8f5;
  font-size: clamp(12px, 1.4vw, 14px);
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
}
.end-btn:hover { background: rgba(255, 255, 255, .24); }
.end-note { color: #9fb0c6; font-size: 13px; }
#peek-overlay {
  position: fixed;
  inset: 0;
  z-index: 56;
  background: rgba(0, 0, 0, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#peek-panel {
  width: min(94vw, 560px);
  background: #ffffff;
  border: 2px solid #cfd8ff;
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: 0 24px 70px rgba(20, 40, 70, .25);
}
.peek-title { color: #5e5ce6; font-weight: 800; font-size: 17px; margin-bottom: 12px; }
#peek-cards { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-bottom: 12px; }
.peek-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.peek-label { color: #8a98ab; font-size: 12px; }
.peek-item .card { width: clamp(44px, 8vw, 64px); }
.peek-item .card .rk { font-size: clamp(16px, 2.4vw, 24px); }
.peek-item .card .st { font-size: clamp(22px, 3vw, 32px); }
.peek-empty { color: #8a98ab; font-size: 14px; padding: 12px 0; }
#peek-close {
  width: 100%;
  padding: 11px;
  border-radius: 10px;
  border: 1px solid #dbe6f2;
  background: #f2f6fb;
  color: #22304a;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
#peek-close:hover { border-color: #5e5ce6; }
.raise-title { color: #66768c; }
.raise-val { color: #b47800; }
#raise-range, #raise-slider { color: #66768c; }
#raise-slider { accent-color: #f2a900; }
.raise-range { color: #66768c; }
.raise-quick button {
  background: #f2f6fb;
  border-color: #dbe6f2;
  color: #22304a;
}
.raise-quick button:hover { border-color: #f2a900; }
#raise-cancel, #stats-close, #history-close {
  background: #f2f6fb;
  border-color: #dbe6f2;
  color: #22304a;
}
#raise-cancel:hover, #stats-close:hover, #history-close:hover { border-color: #f2a900; }
#raise-ok {
  background: linear-gradient(180deg, #ffd94a, #f5a400);
  color: #3a2600;
}
.stats-title { color: #0b6b4c; }
#stats-table th { color: #66768c; border-color: #e2ecf5; }
#stats-table td { color: #22304a; border-color: #eef3f9; }
#history-select {
  background: #f2f6fb;
  border-color: #dbe6f2;
  color: #22304a;
}
.hist-row { background: #f7fafd; border-color: #e6eef7; }
.hist-top { color: #66768c; }
.hist-top b { color: #5e5ce6; }
.hist-cards .card { border: 1px solid #e2ecf5; }
.hist-bot .hist-hand { color: #1a7fd4; }
.hist-bot span { color: #66768c; }
.hist-empty { color: #8a98ab; }

/* ---------- 牌局记录 / 聊天 ---------- */
#feed-panel {
  background: #ffffff;
  border-left: 1px solid #e2ecf5;
}
.feed-head { color: #0b6b4c; border-bottom-color: #e2ecf5; }
.log.sys { color: #66768c; }
.log.chat { color: #22304a; }
.log.chat b { color: #1a7fd4; }
#chat-input { background: #f2f6fb; border-color: #dbe6f2; color: #22304a; }
#chat-send { background: #5e5ce6; }

/* ---------- 登录/注册 ---------- */
.screen { min-height: 100vh; }
.join-card {
  background: rgba(255, 255, 255, .96);
  border: 1px solid #e2ecf5;
  box-shadow: 0 24px 70px rgba(20, 40, 70, .16);
}
.join-card h1 { color: #22304a; }
.join-card .sub, .join-card .hint { color: #66768c; }
.auth-tabs { background: #f2f6fb; }
.auth-tabs .tab { color: #66768c; }
.auth-tabs .tab.active { background: #5e5ce6; color: #fff; }
#name-input, #pass-input {
  background: #f7fafd;
  border-color: #dbe6f2;
  color: #22304a;
}
#name-input:focus, #pass-input:focus { border-color: #5e5ce6; }
#join-btn {
  background: linear-gradient(180deg, #ffd94a, #f5a400);
  color: #3a2600;
  box-shadow: 0 4px 0 #c47f00;
}
.watch-row { color: #66768c; }

/* ---------- 大厅 ---------- */
#lobby-screen { display: flex; justify-content: center; padding: 24px 16px 40px; min-height: 100vh; align-items: flex-start; }
.lobby-card {
  width: min(94vw, 560px);
  background: rgba(255, 255, 255, .96);
  border: 1px solid #e2ecf5;
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(20, 40, 70, .16);
  padding: 24px 22px;
}
.lobby-card h1 { font-size: 24px; color: #22304a; margin-bottom: 4px; }
.lobby-card .sub { color: #66768c; font-size: 13px; margin-bottom: 16px; }
.lobby-create {
  background: #f7fafd;
  border: 1px solid #e2ecf5;
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 18px;
}
.create-title { color: #0b6b4c; font-weight: 800; font-size: 14px; margin-bottom: 8px; }
#room-name-input {
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid #dbe6f2;
  background: #fff;
  color: #22304a;
  font-size: 14px;
  outline: none;
  margin-bottom: 8px;
}
#room-name-input:focus { border-color: #5e5ce6; }
.create-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.create-row select {
  flex: 1;
  min-width: 118px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #dbe6f2;
  background: #fff;
  color: #22304a;
  font-size: 13px;
}
#create-room-btn {
  width: 100%;
  padding: 11px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffd94a, #f5a400);
  color: #3a2600;
  font-weight: 800;
  font-size: 15px;
  box-shadow: 0 3px 0 #c47f00;
  cursor: pointer;
}
#create-room-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #c47f00; }
.lobby-rooms-title { color: #66768c; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
#lobby-rooms { max-height: 46vh; overflow-y: auto; }
.lobby-empty { color: #8a98ab; font-size: 13px; text-align: center; padding: 20px 0; }
.room-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f7fafd;
  border: 1px solid #e6eef7;
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.room-main { flex: 1; min-width: 0; }
.room-name { color: #22304a; font-weight: 800; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.room-mode {
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #e6eaff;
  color: #5e5ce6;
  font-weight: 700;
}
.room-mode.short { background: #ffeede; color: #b46100; }
.room-mode.sg { background: #e8f7ee; color: #0b6b4c; }
.room-mode.nn { background: #fdeef2; color: #b02a4a; }
.my-hint { color: #9fb0c6; font-size: 12px; }
.sg-count { color: #ffd75e; font-weight: 700; }
.banker-btn { border-color: #ffc20a !important; color: #ffd75e !important; }
.banker-btn.on { background: rgba(255, 194, 10, .22) !important; }
.badge.banker { background: #ffc20a; color: #3a2600; }

/* ---------- 筹码用完弹窗 ---------- */
#rebuy-overlay {
  position: fixed;
  inset: 0;
  z-index: 58;
  background: rgba(0, 0, 0, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#rebuy-panel {
  width: min(92vw, 360px);
  background: #ffffff;
  border: 2px solid #ffc20a;
  border-radius: 20px;
  padding: 22px 20px 18px;
  text-align: center;
  box-shadow: 0 24px 70px rgba(20, 40, 70, .3);
}
.rebuy-icon { font-size: 40px; line-height: 1; margin-bottom: 6px; }
.rebuy-title { color: #22304a; font-size: 20px; font-weight: 900; margin-bottom: 6px; }
.rebuy-sub { color: #66768c; font-size: 14px; margin-bottom: 16px; }
.rebuy-sub b { color: #b47800; }
#rebuy-ok {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffd94a, #f5a400);
  color: #3a2600;
  font-size: 16px;
  font-weight: 900;
  box-shadow: 0 3px 0 #c47f00;
  cursor: pointer;
  margin-bottom: 10px;
}
#rebuy-ok:active { transform: translateY(2px); box-shadow: 0 1px 0 #c47f00; }
#rebuy-later {
  width: 100%;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid #dbe6f2;
  background: #f2f6fb;
  color: #66768c;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
#rebuy-later:hover { border-color: #5e5ce6; }
#raise-input {
  width: 100%;
  margin: 8px 0;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #dbe6f2;
  background: #f7fafd;
  color: #22304a;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}
.sg-bet { font-size: 15px !important; }
.room-meta { color: #66768c; font-size: 12px; margin-top: 3px; }
.room-join {
  background: #5e5ce6;
  border: none;
  color: #fff;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
}
.room-join:hover { filter: brightness(1.1); }
#lobby-refresh {
  margin-top: 10px;
  width: 100%;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid #dbe6f2;
  background: #f2f6fb;
  color: #22304a;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
#lobby-refresh:hover { border-color: #5e5ce6; }
#games-btn {
  margin-top: 8px;
  width: 100%;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid #dbe6f2;
  background: #eef4ff;
  color: #22304a;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
#games-btn:hover { border-color: #5e5ce6; }
#games-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#games-panel {
  width: min(94vw, 560px);
  max-height: 86vh;
  overflow-y: auto;
  background: #fff;
  border: 2px solid #cfd8ff;
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: 0 24px 70px rgba(20, 40, 70, .3);
}
.games-title { color: #5e5ce6; font-weight: 900; font-size: 18px; margin-bottom: 12px; }
.games-empty { color: #8a98ab; font-size: 13px; text-align: center; padding: 20px 0; }
.game-card { background: #f7fafd; border: 1px solid #e6eef7; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.game-head { color: #66768c; font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.game-player { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 3px 0; color: #22304a; }
.game-player .gp-n { min-width: 70px; font-weight: 700; }
.game-player .gp-b, .game-player .gp-c { color: #8a98ab; font-size: 12px; }
.game-player b { margin-left: auto; font-weight: 900; }
.game-player b.up { color: #16a34a; }
.game-player b.down { color: #d92b2b; }
.game-player b.flat { color: #8a98ab; }
#games-close {
  width: 100%;
  padding: 11px;
  border-radius: 12px;
  border: 1px solid #dbe6f2;
  background: #f2f6fb;
  color: #22304a;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 6px;
}

/* ---------- 三公：公开下注情况 ---------- */
#bet-board {
  position: absolute;
  left: 50%;
  top: 22%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 82%;
  z-index: 4;
}
.bet-pill {
  background: rgba(0, 0, 0, .45);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #e8f0f8;
  font-size: clamp(11px, 1.3vw, 14px);
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.bet-pill.ok { border-color: #6fe3a3; color: #b8f5d0; background: rgba(10, 60, 35, .55); }
.bet-pill.wait { border-color: rgba(255, 255, 255, .25); color: #b9c6d8; }
.bet-pill.banker { border-color: #ffc20a; color: #ffe28a; background: rgba(90, 60, 0, .5); }
.seat-bet.wait-bet { color: #c8d4e2; background: rgba(0, 0, 0, .3); border-color: rgba(255, 255, 255, .2); }

/* ---------- 其他 ---------- */
#next-hand-note { color: #0b6b4c; font-weight: 800; }
.up { color: #16a34a !important; }
.down { color: #d92b2b !important; }

/* ============================================================
   PC 大屏适配：整体放大、铺满宽度、拉开间距
   ============================================================ */
@media (min-width: 1100px) {
  #topbar { padding: 14px 8px 6px; }
  #topbar > span { font-size: 15px; padding: 7px 18px; }
  #table-wrap { width: min(94vw, 1440px, calc((100vh - 250px) * 1.6)); }
  #my-area { width: min(94vw, 1440px, calc((100vh - 250px) * 1.6)); padding: 18px 26px; margin-top: -14px; }
  #bottom-btns { width: min(94vw, 1440px, calc((100vh - 250px) * 1.6)); padding: 12px 26px; gap: 16px; margin: 14px auto 22px; }
  .mini-btn { font-size: 15px; padding: 11px 26px; }
  #host-panel { width: min(94vw, 1440px, calc((100vh - 250px) * 1.6)); }
  #host-panel select { font-size: 14px; padding: 8px 10px; }
  #host-panel button { font-size: 15px; padding: 10px 24px; }
  .card { width: clamp(34px, 3.4vw, 58px); }
  #board .card { width: clamp(46px, 4.4vw, 74px); }
  .my-cards .card { width: clamp(66px, 6.2vw, 108px); }
  .my-cards .card .rk { font-size: clamp(26px, 2.4vw, 44px); }
  .my-cards .card .st { font-size: clamp(34px, 3vw, 58px); }
  .seat .card { width: clamp(34px, 3vw, 54px); }
  .seat.showdown .card { width: clamp(40px, 3.6vw, 64px); }
  #pot-label { font-size: 20px; }
  .felt-watermark { font-size: 26px; }
  .seat-info { font-size: 13px; }
  .seat-chips { font-size: 15px; }
  .avatar { width: 56px; height: 56px; font-size: 21px; }
  .act.fold { width: 80px; height: 80px; font-size: 30px; }
  .act.raise { width: 104px; height: 104px; font-size: 20px; }
  .act.banker-big { width: 104px; height: 104px; font-size: 20px; }
  .act.call { width: 88px; height: 88px; font-size: 20px; }
  .act.allin { width: 68px; height: 68px; font-size: 15px; }
  .act-label { font-size: 14px; }
  .preset-circle { width: 58px; height: 58px; font-size: 11px; }
  .preset b { font-size: 14px; }
  #deck-visual { width: 50px; }
}