/* ==================== GoP3 风格主题 ==================== */
* { margin:0; padding:0; box-sizing:border-box; }
body {
  background: #000;
  color:#eee; font-family:'Segoe UI',Arial,sans-serif;
  overflow:hidden; height:100vh; width:100vw;
}

/* ==================== 牌桌 ==================== */
#table { position:relative; width:100vw; height:100vh; display:none; }

/* ============ 二层嵌套椭圆桌 ============ */
/* 外层 — 金色金属边框 (box-shadow 实现，比例固定) */
#table-rail {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:82vw; height:76vh;
  border-radius:44% / 48%;
  background: radial-gradient(
    ellipse at 50% 48%,
    #1e5a44 0%, #1a4a3a 15%, #12482e 35%,
    #0d3523 60%, #072215 85%, #041a10 100%
  );
  box-sizing:border-box;
  box-shadow:
    /* 内高光 */
    inset 0 0 60px rgba(0,0,0,0.3),
    /* 金边 - 固定像素，不随窗口缩放 */
    0 0 0 8px #6b4f1a,
    0 0 0 16px #c9a84c,
    0 0 0 24px #d4af37,
    0 0 0 32px #8b6914,
    0 0 0 36px #6b4f1a,
    /* 外发光 */
    0 0 20px rgba(0,0,0,0.4);
  z-index:1;
  pointer-events:none;
}

/* 内层 — 绿毡内容区 */
#table-bg {
  width:100%; height:100%;
  border-radius:44% / 48%;
}

/* 座位/筹码/底池等浮动元素统一以桌子区域为定位基准 */
#seats, #floats-container {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:82vw; height:76vh;
  max-width:none; max-height:none;
  pointer-events:none;
  overflow:visible;
  z-index:60;
}
#seats > *, #floats-container > * { pointer-events:auto; }

#community { position:absolute; top:55%; left:50%; transform:translate(-50%, -50%); display:flex; gap:8px; z-index:10; pointer-events:none; }

/* ==================== 游戏倒计时显示（公牌下方、手牌上方） ==================== */
#game-countdown {
  position:absolute; top:62%; left:50%; transform:translate(-50%, -50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  z-index:30; pointer-events:auto;
}
#game-countdown-text {
  font-size:48px; font-weight:900; color:#ff1744;
  text-shadow:0 0 20px rgba(255,23,68,0.5), 0 2px 4px rgba(0,0,0,0.8);
  line-height:1;
}
#game-extend-btn {
  padding:6px 18px; border:none; border-radius:20px;
  background:linear-gradient(135deg,#ff5252,#d32f2f);
  color:#fff; font-size:15px; font-weight:bold; cursor:pointer;
  box-shadow:0 2px 8px rgba(255,0,0,0.3);
  transition:all 0.2s;
}
#game-extend-btn:hover { transform:scale(1.05); box-shadow:0 4px 16px rgba(255,0,0,0.5); }
#game-extend-btn:disabled {
  background:#555; color:#999; cursor:not-allowed;
  box-shadow:none; transform:none;
}

/* ==================== 断线重连覆盖层 ==================== */
#reconnect-overlay {
  position:fixed; top:0; left:0; width:100vw; height:100vh;
  background:rgba(0,0,0,0.75); z-index:9999;
  display:flex; align-items:center; justify-content:center;
}
.reconnect-box {
  display:flex; flex-direction:column; align-items:center; gap:20px;
  background:rgba(20,20,20,0.95); border:2px solid rgba(255,255,255,0.15);
  border-radius:16px; padding:40px 50px;
  box-shadow:0 8px 32px rgba(0,0,0,0.6);
}
.reconnect-spinner {
  width:48px; height:48px; border:4px solid rgba(255,255,255,0.2);
  border-top-color:#ffd700; border-radius:50%;
  animation:reconnect-spin 0.8s linear infinite;
}
@keyframes reconnect-spin { to { transform:rotate(360deg); } }
.reconnect-text {
  font-size:18px; color:#ccc; font-weight:bold;
}
.reconnect-countdown {
  font-size:36px; font-weight:900; color:#ff5252;
  text-shadow:0 0 10px rgba(255,82,82,0.5);
}

.card-slot { width:76px; height:108px; border:2px dashed rgba(255,255,255,0.12); border-radius:8px; display:flex; align-items:center; justify-content:center; }

.card {
  width:72px; height:104px;
  background:linear-gradient(135deg, #fefefe 0%, #f5f0e8 30%, #faf6f0 60%, #f8f2ea 100%);
  border-radius:8px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  position:relative;
  box-shadow:0 2px 6px rgba(0,0,0,0.35), 0 8px 16px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.8), inset 0 -2px 3px rgba(0,0,0,0.06);
  border:1px solid rgba(0,0,0,0.08);
  transition:transform 0.25s ease, box-shadow 0.25s ease;
  user-select:none;
}
.card::before { content:''; position:absolute; inset:4px; border-radius:5px; border:1px solid rgba(0,0,0,0.04); pointer-events:none; }
.card:hover { transform:translateY(-4px) scale(1.04); box-shadow:0 6px 18px rgba(0,0,0,0.4), 0 12px 28px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.8), inset 0 -2px 3px rgba(0,0,0,0.06); }
/* 公共牌：左上角数字 + 右下角花色（与浮牌风格统一） */
.card .c-rank { position:absolute; top:4px; left:5px; font-size:34px; font-weight:900; line-height:1; letter-spacing:-1px; }
.card .c-suit-btm { position:absolute; bottom:3px; right:5px; font-size:36px; line-height:1; }
.card.red { color:#c62828; }
.card.black { color:#1a1a1a; }

.card-back {
  width:72px; height:104px; border-radius:8px;
  background:repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(255,255,255,0.03) 3px, rgba(255,255,255,0.03) 6px), linear-gradient(135deg, #1a3a6b 0%, #0d2240 40%, #122e54 100%);
  border:2px solid #1e4d8c;
  box-shadow:0 2px 6px rgba(0,0,0,0.35), 0 8px 16px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.1);
  position:relative;
}
.card-back::after { content:''; position:absolute; inset:5px; border-radius:5px; border:2px solid rgba(255,255,255,0.08); pointer-events:none; }

/* ==================== 牌堆（底池左侧，与底池数字水平对齐） ==================== */
#deck-pile {
  position:absolute; top:50%; left:50%;
  transform:translate(calc(-50% - 115px), -120px);
  width:62px; height:90px;
  z-index:9; pointer-events:none;
}
#deck-pile .deck-card {
  position:absolute; top:0; left:0;
  width:62px; height:90px; border-radius:7px;
  background:repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(255,255,255,0.03) 3px, rgba(255,255,255,0.03) 6px), linear-gradient(135deg, #1a3a6b 0%, #0d2240 40%, #122e54 100%);
  border:2px solid #1e4d8c;
  box-shadow:0 2px 6px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.1);
}
#deck-pile .deck-card::after { content:''; position:absolute; inset:6px; border-radius:5px; border:2px solid rgba(255,255,255,0.08); pointer-events:none; }
#deck-pile .deck-card-1 { transform:translate(0, 0); }
#deck-pile .deck-card-2 { transform:translate(3px, 3px); }
#deck-pile .deck-card-3 { transform:translate(6px, 6px); }
#deck-pile .deck-card-4 { transform:translate(9px, 9px); }

#pot-display { position:absolute; top: 50%; left:50%; transform:translate(-50%, -120%); text-align:center; z-index:25; pointer-events:none; }
#pot-display .pot-label, #pot-display .pot-amount { pointer-events:none; }
#pot-display .pot-chips { display:flex; justify-content:center; align-items:flex-end; margin-bottom:4px; gap:2px; height:36px; }
#pot-display .pot-chip-stack { width:20px; border-radius:50% 50% 3px 3px; box-shadow:0 1px 3px rgba(0,0,0,0.5); position:relative; }
#pot-display .pot-chip-stack::after { content:''; position:absolute; top:3px; left:3px; right:3px; bottom:3px; border-radius:50%; border:1px solid rgba(255,255,255,0.3); }
.pot-chip-1000 { background:linear-gradient(180deg,#ff9800,#e65100); }
.pot-chip-500  { background:linear-gradient(180deg,#ab47bc,#6a1b9a); }
.pot-chip-100  { background:linear-gradient(180deg,#424242,#212121); }
.pot-chip-25   { background:linear-gradient(180deg,#66bb6a,#2e7d32); }
.pot-chip-5    { background:linear-gradient(180deg,#ef5350,#b71c1c); }
.pot-chip-1    { background:linear-gradient(180deg,#e0e0e0,#9e9e9e); }
#pot-display .pot-label { font-size:11px; color:rgba(255,255,255,0.5); letter-spacing:1px; }
#pot-display .pot-amount { font-size:24px; color:#ffd700; font-weight:bold; text-shadow:0 0 12px rgba(255,215,0,0.6), 0 2px 4px rgba(0,0,0,0.8); transition:all 0.3s ease; }
#pot-display .pot-amount.pot-bump { transform:scale(1.15); color:#fff; text-shadow:0 0 20px rgba(255,215,0,0.9), 0 2px 4px rgba(0,0,0,0.8); }

/* ==================== 手牌下方信息条（手机端专用） ==================== */
.float-handinfo {
  position:absolute; z-index:15; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; gap:1px;
  text-align:center;
}
.float-handinfo .fhi-chips {
  font-size:10px; color:#ffcc80; font-weight:bold;
  text-shadow:0 1px 3px rgba(0,0,0,0.8);
}
.float-handinfo .fhi-action {
  font-size:9px; padding:1px 6px; border-radius:8px;
  background:rgba(0,0,0,0.6); color:#ffd700;
  text-shadow:0 1px 3px rgba(0,0,0,0.8); font-weight:bold;
  white-space:nowrap;
}
.float-handinfo .fhi-allin {
  font-size:9px; padding:1px 6px; border-radius:8px;
  background:linear-gradient(135deg,#ff1744,#d50000);
  color:#fff; font-weight:900; letter-spacing:1px;
  box-shadow:0 2px 4px rgba(0,0,0,0.5);
}

.seat { position:absolute; z-index:20; display:flex; align-items:center; white-space:nowrap; line-height:1.3; transform:translate(-50%,-50%); gap:14px; }
.seat.seat-info-right { flex-direction:row-reverse; }
.seat .seat-avatar-wrap { position:relative; flex-shrink:0; }
.seat .avatar {
  width:40px; height:40px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #5d4037, #3e2723);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; border:2px solid #8d6e63;
  box-shadow:0 2px 8px rgba(0,0,0,0.5);
  position:relative;
}
.seat.active .avatar {
  border-color:#ffd700;
  box-shadow:0 0 16px rgba(255,215,0,0.7), 0 2px 8px rgba(0,0,0,0.5);
  animation:glowPulse 1.2s infinite;
}
@keyframes glowPulse {
  0%,100% { box-shadow:0 0 12px rgba(255,215,0,0.5), 0 2px 8px rgba(0,0,0,0.5); }
  50% { box-shadow:0 0 24px rgba(255,215,0,0.9), 0 0 36px rgba(255,180,0,0.5), 0 2px 8px rgba(0,0,0,0.5); }
}
/* 轮到操作时的浮动箭头 */
.seat .action-arrow {
  display:none;
  position:absolute; top:-22px; left:50%; transform:translateX(-50%);
  width:0; height:0;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-top:14px solid #ffd700;
  filter:drop-shadow(0 0 6px rgba(255,215,0,0.7)) drop-shadow(0 -2px 3px rgba(0,0,0,0.4));
  z-index:25;
  pointer-events:none;
}
.seat.active .action-arrow {
  display:block;
  animation:arrowBounce 0.8s ease-in-out infinite;
}
@keyframes arrowBounce {
  0%,100% { top:-22px; }
  50% { top:-28px; }
}
/* .seat.folded — 已移除置灰效果，弃牌/无筹码玩家保持原样 */
.seat .seat-info {
  display:flex; flex-direction:column;
  gap:1px; align-items:flex-start;
}
.seat.seat-info-left .seat-info {
  align-items:flex-end; text-align:right;
}
.seat .name {
  font-size:11px; color:#d7ccc8; white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,0.8);
  font-weight:600;
}
.seat .chips-display {
  font-size:10px; color:#ffcc80;
  text-shadow:0 1px 3px rgba(0,0,0,0.8);
  font-weight:bold;
}
.seat .action-badge {
  display:none;
}
/* 座位号角标：相对于头像包装定位 */
.seat .seat-avatar-wrap .seat-num {
  position:absolute; top:-9px; left:-9px;
  width:22px; height:22px; border-radius:50%;
  background:rgba(0,0,0,0.80); border:1.5px solid rgba(255,215,0,0.6);
  color:#ffd700; font-size:11px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  z-index:6; pointer-events:none;
  box-shadow:0 1px 4px rgba(0,0,0,0.5);
}

/* 庄家按钮 D 标记 */
.dealer-badge {
  position:absolute; top:-8px; right:-8px;
  width:22px; height:22px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #ffd700, #b8860b);
  color:#1a1a1a; font-size:12px; font-weight:900;
  display:flex; align-items:center; justify-content:center;
  border:2px solid #fff;
  box-shadow:0 2px 6px rgba(0,0,0,0.5), 0 0 10px rgba(255,215,0,0.5);
  z-index:5;
  animation:dealerPulse 2s ease-in-out infinite;
}
@keyframes dealerPulse {
  0%,100% { box-shadow:0 2px 6px rgba(0,0,0,0.5), 0 0 10px rgba(255,215,0,0.5); }
  50% { box-shadow:0 2px 8px rgba(0,0,0,0.6), 0 0 18px rgba(255,215,0,0.8); }
}

/* 全下标记 */
.allin-badge {
  position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg,#ff1744,#d50000);
  color:#fff; font-size:9px; font-weight:900;
  padding:1px 6px; border-radius:6px;
  box-shadow:0 2px 4px rgba(0,0,0,0.5);
  letter-spacing:1px;
  z-index:5;
}

/* 等待中标记（游戏进行中加入，下一局自动参与） */
.sittingout-badge {
  position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg,#ffa726,#fb8c00);
  color:#fff; font-size:9px; font-weight:700;
  padding:1px 6px; border-radius:6px;
  box-shadow:0 2px 4px rgba(0,0,0,0.5);
  z-index:5;
}

/* ==================== 悬浮在牌桌上的玩家信息 ==================== */
.float-cards { position:absolute; z-index:15; display:flex; gap:3px; pointer-events:none; }
.float-cards .mini-card-sm {
  width:44px; height:62px;
  background:linear-gradient(135deg,#fefefe 0%,#f7f2ea 40%,#faf6f0 100%);
  border-radius:6px; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  position:relative;
  box-shadow:0 2px 6px rgba(0,0,0,0.35), 0 4px 10px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.8);
  border:1px solid rgba(0,0,0,0.08);
  pointer-events:auto;
}
/* 左上角：只显示数字（大） */
.float-cards .mini-card-sm .m-rank {
  position:absolute; top:1px; left:3px;
  font-size:30px; font-weight:900; line-height:1; letter-spacing:-0.5px;
}
/* 右下角：只显示花色 */
.float-cards .mini-card-sm .m-suit-btm {
  position:absolute; bottom:1px; right:3px;
  font-size:32px; line-height:1;
}
.float-cards .mini-card-sm.red { color:#d32f2f; }
.float-cards .mini-card-sm.black { color:#1a1a1a; }
.float-cards .card-back-sm {
  width:44px; height:62px; border-radius:6px;
  background:repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.04) 6px),
              linear-gradient(135deg, #1a3a6b 0%, #0d2240 100%);
  border:1px solid #1e4d8c;
  box-shadow:0 2px 6px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.1);
  pointer-events:auto;
}
.float-chips { position:absolute; z-index:15; font-size:14px; color:#ffe082; font-weight:bold; pointer-events:none; text-shadow:0 1px 4px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.5); white-space:nowrap; }
.float-bet { position:absolute; z-index:15; font-size:13px; color:#ffcc80; font-weight:bold; pointer-events:none; text-shadow:0 1px 4px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.5); white-space:nowrap; }

#actions {
  position:relative;
  background:rgba(20,10,5,0.92);
  backdrop-filter:blur(12px);
  border:2px solid rgba(139,105,20,0.6);
  border-radius:14px;
  padding:0; z-index:100; display:none;
  box-shadow:0 -2px 16px rgba(0,0,0,0.6), 0 0 20px rgba(0,0,0,0.4);
  min-width:320px; max-width:90vw; box-sizing:border-box;
  flex-direction:column;
  padding-bottom:4px;
  pointer-events:auto;
}
#actions-raise-wrapper { position:fixed; bottom:0; left:0; right:0; display:flex; justify-content:center; z-index:100; pointer-events:none; }
#action-info-row { display:flex; align-items:center; justify-content:center; gap:6px; padding:6px 6px 2px; flex-wrap:wrap; }
#bet-amount-display { font-size:16px; font-weight:bold; color:#ffd700; text-shadow:0 0 10px rgba(255,215,0,0.3), 0 1px 3px rgba(0,0,0,0.5); text-align:center; letter-spacing:1px; }
#timer-inline { font-size:16px; color:#ff5722; font-weight:bold; min-width:32px; text-align:center; display:none; }
#timer-inline.urgent { color:#ff1744; animation:timerPulse 0.5s infinite; }
@keyframes timerPulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.15); } }

#slider-area { display:none; position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); margin-bottom:6px; background:rgba(20,10,5,0.92); backdrop-filter:blur(12px); border:2px solid rgba(139,105,20,0.6); border-radius:14px; z-index:101; box-shadow:0 -2px 16px rgba(0,0,0,0.6), 0 0 20px rgba(0,0,0,0.4); padding:34px 10px 4px 10px; display:none; flex-direction:row; align-items:flex-start; gap:10px; min-width:180px; pointer-events:auto; }
#slider-area * { pointer-events:auto; }
#raise-slider-wrap { position:relative; width:30px; height:180px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.slider-track { width:4px; height:100%; background:linear-gradient(180deg,rgba(255,82,82,0.8) 0%,rgba(255,215,0,0.6) 50%,rgba(76,175,80,0.6) 100%); border-radius:2px; position:relative; }
.slider-track::after { content:''; position:absolute; left:50%; top:0; bottom:0; width:1px; background:rgba(255,255,255,0.15); transform:translateX(-50%); }
.slider-thumb { position:absolute; left:50%; width:22px; height:22px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#ff5252,#c62828); border:2px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,0.5),0 0 10px rgba(255,82,82,0.4); transform:translate(-50%,-50%); cursor:grab; transition:box-shadow 0.2s; z-index:10; }
.slider-thumb:hover { box-shadow:0 3px 14px rgba(0,0,0,0.6),0 0 18px rgba(255,82,82,0.6); }
.slider-thumb:active { cursor:grabbing; transform:translate(-50%,-50%) scale(1.15); }
.slider-tick { position:absolute; left:50%; width:12px; height:2px; background:rgba(255,255,255,0.25); border-radius:1px; transform:translate(-50%,-50%); }
.slider-tick.major { width:18px; background:rgba(255,255,255,0.4); }

/* 确认加注按钮 - 滑块正下方居中 */
.btn-confirm-raise { padding:6px 14px; border:none; border-radius:6px; font-size:13px; font-weight:bold; cursor:pointer; background:linear-gradient(180deg,#ff8f00,#e65100); color:#fff; box-shadow:0 2px 6px rgba(0,0,0,0.3); border-bottom:2px solid #bf360c; transition:all 0.15s; white-space:nowrap; z-index:12; margin-top:4px; width:100%; }
.btn-confirm-raise:hover { background:linear-gradient(180deg,#ffa726,#f57c00); }

/* 滑块窗口顶部金额显示 - 居中 */
#slider-amount-display { position:absolute; top:8px; left:50%; transform:translateX(-50%); font-size:16px; font-weight:bold; color:#ffd700; text-shadow:0 0 10px rgba(255,215,0,0.3), 0 1px 3px rgba(0,0,0,0.5); text-align:center; letter-spacing:1px; z-index:2; white-space:nowrap; }

#main-actions { display:flex; align-items:center; justify-content:center; gap:4px; padding:2px 6px 6px; flex-wrap:wrap; }
.action-btn { flex:0 1 auto; min-width:48px; padding:10px 12px; border:none; border-radius:8px; font-size:14px; font-weight:bold; cursor:pointer; transition:all 0.2s; letter-spacing:0.5px; box-shadow:0 2px 6px rgba(0,0,0,0.4); white-space:nowrap; }
.action-btn:disabled { opacity:0.25; cursor:not-allowed; filter:grayscale(0.5); }
.btn-fold { background:linear-gradient(180deg,#c62828 0%,#8b0000 100%); color:#fff; border-bottom:3px solid #5c0000; }
.btn-fold:hover:not(:disabled) { background:linear-gradient(180deg,#e53935 0%,#b71c1c 100%); transform:translateY(-2px); }
.btn-check { background:linear-gradient(180deg,#2e7d32 0%,#1b5e20 100%); color:#fff; border-bottom:3px solid #0d3311; }
.btn-check:hover:not(:disabled) { background:linear-gradient(180deg,#43a047 0%,#2e7d32 100%); transform:translateY(-2px); }
.btn-call { background:linear-gradient(180deg,#1565c0 0%,#0d47a1 100%); color:#fff; border-bottom:3px solid #072d6b; }
.btn-call:hover:not(:disabled) { background:linear-gradient(180deg,#1976d2 0%,#1155b8 100%); transform:translateY(-2px); }
.btn-raise { background:linear-gradient(180deg,#e65100 0%,#bf360c 100%); color:#fff; border-bottom:3px solid #7f2200; }
.btn-raise:hover:not(:disabled) { background:linear-gradient(180deg,#ff6d00 0%,#d84315 100%); transform:translateY(-2px); }
.btn-raise.active { background:linear-gradient(180deg,#ff8f00 0%,#e65100 100%); box-shadow:0 0 12px rgba(255,143,0,0.6); transform:scale(1.05); }
.btn-allin { background:linear-gradient(180deg,#6a1b9a 0%,#4a0072 100%); color:#ffd700; border-bottom:3px solid #2d004a; }
.btn-allin:hover:not(:disabled) { background:linear-gradient(180deg,#8e24aa 0%,#6a1b9a 100%); transform:translateY(-2px); }

/* 提前操作面板 — 现在是 #actions 容器内的子区域 */
#pre-actions { display:block; }
#pre-actions-content { display:flex; align-items:center; justify-content:center; gap:6px; padding:2px 6px 2px; flex-wrap:wrap; }
.pre-action-item { display:flex; align-items:center; gap:4px; cursor:pointer; padding:3px 5px; border-radius:8px; transition:background 0.15s; min-height:30px; }
.pre-action-item:hover { background:rgba(255,215,0,0.08); }
.pre-action-item input[type="radio"] { display:none; }
.pre-action-radio { width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,215,0,0.5); background:rgba(0,0,0,0.4); display:inline-flex; align-items:center; justify-content:center; transition:all 0.2s; flex-shrink:0; }
.pre-action-radio.checked { border-color:#ffd700; background:radial-gradient(circle,#ffd700 40%,rgba(0,0,0,0.4) 45%); box-shadow:0 0 8px rgba(255,215,0,0.6); }
.pre-action-label { font-size:12px; color:#ddd; font-weight:bold; white-space:nowrap; }
.pre-action-btn { padding:10px 18px; border:none; border-radius:10px; font-size:15px; font-weight:bold; cursor:pointer; transition:all 0.2s; letter-spacing:1px; box-shadow:0 2px 6px rgba(0,0,0,0.4); white-space:nowrap; min-height:40px; }
.pre-action-btn.btn-pre-foldcheck { background:linear-gradient(180deg,#c62828 0%,#8b0000 100%); color:#fff; border-bottom:3px solid #5c0000; min-width:100px; }
.pre-action-btn.btn-pre-foldcheck:hover { background:linear-gradient(180deg,#e53935 0%,#b71c1c 100%); transform:translateY(-2px); }
.pre-action-btn.btn-pre-callany { background:linear-gradient(180deg,#1565c0 0%,#0d47a1 100%); color:#fff; border-bottom:3px solid #072d6b; min-width:100px; }
.pre-action-btn.btn-pre-callany:hover { background:linear-gradient(180deg,#1976d2 0%,#1155b8 100%); transform:translateY(-2px); }
.pre-action-btn.selected { box-shadow:0 0 14px rgba(255,215,0,0.7); transform:scale(1.05); }

/* 分隔线 — 预操作区域和主按钮之间 */
#pre-actions-divider { display:block; width:80%; height:1px; margin:2px auto 0; background:linear-gradient(90deg,transparent,rgba(139,105,20,0.4),transparent); }

/* 加注快捷选项 - 在滑块左侧 */
#quick-raise-btns { display:flex; flex-direction:column; gap:4px; flex:1; z-index:102; }
.quick-raise-btn { padding:5px 12px; border:none; border-radius:6px; font-size:12px; font-weight:bold; cursor:pointer; background:rgba(30,15,8,0.9); color:#ffd700; border:1px solid rgba(139,105,20,0.5); white-space:nowrap; transition:all 0.15s; width:100%; text-align:center; }
.quick-raise-btn:hover { background:rgba(50,25,10,0.95); border-color:#ffd700; box-shadow:0 0 8px rgba(255,215,0,0.3); transform:scale(1.05); }
.quick-raise-btn:active { background:#ff8f00; color:#fff; border-color:#ff8f00; }
.quick-raise-btn.active { background:#ff8f00; color:#fff; border-color:#ff8f00; box-shadow:0 0 10px rgba(255,143,0,0.5); }

#info-bar {
  position:fixed; top:0; left:0; right:0;
  background:linear-gradient(180deg, rgba(30,15,8,0.95) 0%, rgba(20,10,5,0.9) 100%);
  padding:8px 150px 8px 16px; display:flex; justify-content:flex-start; align-items:center; gap:14px; flex-wrap:wrap;
  z-index:100; font-size:13px;
  border-bottom:2px solid rgba(139,105,20,0.6);
  box-shadow:0 2px 10px rgba(0,0,0,0.5);
}
#info-bar .hand-num { color:#8d6e63; }
#info-bar .phase { color:#ffd700; font-weight:bold; text-shadow:0 0 8px rgba(255,215,0,0.3); }
#info-bar .blind-info { color:#ffcc80; font-size:11px; font-weight:bold; }
#info-bar .room-id { color:#4fc3f7; font-size:12px; display:none; }

#room-score-btn {
  position:fixed; top:6px; right:82px;
  padding:5px 14px; border:none; border-radius:8px; min-width:60px; text-align:center;
  background:linear-gradient(180deg,#ffd700 0%,#ff8f00 100%);
  color:#fff; font-size:13px; font-weight:bold; cursor:pointer;
  z-index:99999; letter-spacing:2px;
  box-shadow:0 3px 8px rgba(0,0,0,0.5);
  border-bottom:3px solid #bf360c;
  transition:all 0.2s;
}
#room-score-btn:hover {
  background:linear-gradient(180deg,#ffe082 0%,#ffa000 100%);
  transform:translateY(-1px);
}
#room-score-btn:active { transform:translateY(1px); }
#room-exit-btn {
  position:fixed; top:6px; right:10px;
  padding:5px 14px; border:none; border-radius:8px; min-width:60px; text-align:center;
  background:linear-gradient(180deg,#c62828 0%,#8b0000 100%);
  color:#fff; font-size:13px; font-weight:bold; cursor:pointer;
  z-index:99999; letter-spacing:2px;
  box-shadow:0 3px 8px rgba(0,0,0,0.5);
  border-bottom:3px solid #5c0000;
  transition:all 0.2s;
}
#room-exit-btn:hover {
  background:linear-gradient(180deg,#e53935 0%,#b71c1c 100%);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,0.6);
}
#room-exit-btn:active { transform:translateY(1px); }

#setup-panel {
  position:fixed; top:0; left:0; right:0; bottom:0;
  background:radial-gradient(ellipse at center, rgba(30,15,8,0.95) 0%, rgba(10,5,2,0.98) 100%);
  z-index:200; display:none; align-items:center; justify-content:center;
}
#setup-panel .panel {
  background:linear-gradient(180deg, #3e2723 0%, #2c1810 100%);
  border:2px solid #8b6914;
  border-radius:16px; padding:32px;
  max-width:480px; width:90%;
  box-shadow:0 0 40px rgba(0,0,0,0.7), 0 0 0 8px rgba(139,105,20,0.15);
}
#setup-panel .brand-text {
  text-align:center; margin-bottom:2px;
  font-size:15px; font-weight:700;
  background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3, #54a0ff, #5f27cd, #01a3a4, #ff6b6b);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: brandFlow 4s linear infinite;
  letter-spacing:2px;
}
@keyframes brandFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}
#setup-panel .game-title {
  text-align:center; margin-bottom:16px;
  font-size:26px; font-weight:900;
  background: linear-gradient(90deg, #ffd700, #ffaa00, #ff8c00, #ffd700, #ffe066, #ffd700);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: titleShimmer 3s ease-in-out infinite;
  letter-spacing:3px;
  filter: drop-shadow(0 0 12px rgba(255,180,0,0.5));
}
@keyframes titleShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
#setup-panel label { display:block; color:#d7ccc8; margin:12px 0 4px; font-size:13px; font-weight:600; }
#setup-panel input, #setup-panel select {
  width:100%; padding:10px 12px;
  background:rgba(0,0,0,0.4); border:2px solid #5d4037;
  border-radius:8px; color:#eee; font-size:14px;
  transition:border-color 0.2s;
}
#setup-panel input:focus, #setup-panel select:focus {
  outline:none; border-color:#ffd700;
  box-shadow:0 0 8px rgba(255,215,0,0.2);
}
#setup-panel select option { background:#2c1810; color:#eee; }
#setup-panel .btn-row { display:flex; gap:10px; margin-top:20px; }
#setup-panel .btn-row button { flex:1; padding:12px; border:none; border-radius:8px; font-size:15px; font-weight:bold; cursor:pointer; transition:all 0.2s; }
#setup-panel .btn-primary {
  background:linear-gradient(180deg,#ffd700,#b8860b);
  color:#1a1a1a; border-bottom:3px solid #8b6914;
  box-shadow:0 3px 10px rgba(0,0,0,0.4);
}
#setup-panel .btn-primary:hover { background:linear-gradient(180deg,#ffe082,#ffd700); transform:translateY(-1px); }
#setup-panel .btn-secondary {
  background:transparent; color:#ffd700;
  border:2px solid #8b6914; border-radius:8px;
}
#setup-panel .btn-secondary:hover { background:rgba(255,215,0,0.1); border-color:#ffd700; }

/* ===== 用户信息面板 ===== */
#user-panel {
  position:fixed; top:46px; left:8px; z-index:210;
  width:220px;
}
#user-panel .panel-body {
  padding:10px;
  overflow:visible !important;
  max-height:none !important;
}
#user-panel-content { text-align:left; }
.user-header {
  display:flex; align-items:center; gap:10px;
  margin-bottom:8px;
}
.user-avatar { font-size:36px; line-height:1; }
.user-nick { color:#ffd700; font-size:15px; font-weight:700; word-break:break-all; }
.user-stats { margin-bottom:8px; }
.stat-row {
  display:flex; justify-content:space-between;
  padding:2px 0; font-size:11px;
  border-bottom:1px solid rgba(255,215,0,0.1);
  color:#bcaaa4;
}
.stat-row span:last-child { color:#ffe082; font-weight:600; }
.stat-positive { color:#4caf50 !important; }
.stat-negative { color:#ff5252 !important; }
.user-btns { display:flex; flex-direction:row; gap:4px; }
.user-btn {
  flex:1; padding:4px 1px; border:none; border-radius:4px;
  font-size:10px; font-weight:600; cursor:pointer;
  background:linear-gradient(180deg,#ffd700,#b8860b);
  color:#1a1a1a; transition:all 0.2s;
}
.user-btn:hover { background:linear-gradient(180deg,#ffe082,#ffd700); }
.user-btn-outline {
  background:transparent !important; color:#ff5252 !important;
  border:1px solid #ff5252 !important;
}
.user-btn-outline:hover { background:rgba(255,82,82,0.15) !important; }

/* ===== 房间大厅预览（用户面板内嵌） ===== */
.lobby-preview {
  margin-top:10px;
  border-top:1px solid rgba(255,215,0,0.15);
  padding-top:8px;
}
.lobby-preview-header {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:6px;
}
.lobby-preview-title {
  color:#ffd700; font-size:12px; font-weight:700;
}
.lobby-refresh-btn {
  background: linear-gradient(135deg, #ffd700, #ff8f00);
  color: #1a1a2e;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 14px;
  border-radius: 20px;
  border: none;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
  transition: all 0.2s ease;
}

.lobby-refresh-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
  opacity: 0.95;
}
.lobby-refresh-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(255, 215, 0, 0.3);
}
.lobby-preview-list {
  height:300px; overflow-y:auto;
  border:1px solid rgba(93,64,55,0.5); border-radius:6px;
  background:rgba(0,0,0,0.25);
}
.lobby-preview-list::-webkit-scrollbar { width:3px; }
.lobby-preview-list::-webkit-scrollbar-thumb { background:#555; border-radius:2px; }
.lobby-empty-hint {
  color:#666; text-align:center; padding:20px 0; font-size:11px;
}
/* 预览区房间条目 - 更紧凑 */
.lobby-preview-room {
  display:flex; align-items:center; gap:6px;
  padding:6px 8px; margin:2px 0;
  background:rgba(0,0,0,0.2); border:1px solid #3e2723;
  border-radius:5px; cursor:pointer; transition:all 0.15s;
  font-size:11px; flex-wrap:nowrap;
}
.lobby-preview-room:hover { border-color:#8b6914; background:rgba(255,215,0,0.06); }
.lobby-preview-room .lpr-name { color:#ffd700; font-weight:600; min-width:55px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lobby-preview-room .lpr-blind { color:#a1887f; font-size:9px; padding:1px 4px; background:rgba(255,215,0,0.08); border-radius:3px; white-space:nowrap; }
.lobby-preview-room .lpr-count { color:#bcaaa4; white-space:nowrap; font-size:10px; }
.lobby-preview-room .lpr-host { color:#ffe082; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:10px; }
.lobby-preview-room .lpr-lock { color:#ff5252; font-size:11px; white-space:nowrap; }
.lobby-preview-room .lpr-full { color:#ff5252; font-size:10px; white-space:nowrap; }

/* ===== 弹窗 ===== */
.modal-overlay {
  position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.7); backdrop-filter:blur(3px);
  z-index:300;
  display:flex; align-items:center; justify-content:center;
  animation:modalFadeIn 0.2s ease;
}
@keyframes modalFadeIn {
  from{opacity:0}
  to{opacity:1}
}
.modal-box {
  background:linear-gradient(180deg,#3e2723,#2c1810);
  border:2px solid #8b6914; border-radius:12px;
  padding:24px; max-width:380px; width:90%;
  box-shadow:0 0 40px rgba(0,0,0,0.7);
  animation:modalSlideIn 0.25s ease;
}
@keyframes modalSlideIn {
  from{opacity:0;transform:translateY(-10px) scale(0.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.modal-box h3 { color:#ffd700; text-align:center; margin-bottom:16px; font-size:18px; }
.modal-box input {
  width:100%; padding:10px; margin-bottom:10px;
  background:rgba(0,0,0,0.4); border:2px solid #5d4037;
  border-radius:8px; color:#eee; font-size:14px;
  box-sizing:border-box;
}
.modal-box input:focus { outline:none; border-color:#ffd700; }
.modal-box p { margin:0; }
.modal-box .remember-label {
  display:flex; align-items:center; gap:6px;
  margin-bottom:10px; color:#ccc; font-size:13px;
  cursor:pointer; user-select:none;
}
.modal-box .remember-label input[type="checkbox"] {
  width:auto; margin:0; accent-color:#ffd700;
}
.modal-btns { display:flex; gap:10px; }
.modal-btns button { flex:1; padding:10px; border:none; border-radius:8px; font-size:14px; font-weight:bold; cursor:pointer; }
.modal-btns .btn-primary { background:linear-gradient(180deg,#ffd700,#b8860b); color:#1a1a1a; }
.modal-btns .btn-secondary { background:transparent; color:#ffd700; border:2px solid #8b6914; }
.modal-wide { max-width:600px !important; }

/* ===== 头像选择弹窗 ===== */
.modal-content {
  background:linear-gradient(180deg,#3e2723,#2c1810);
  border:2px solid #8b6914; border-radius:14px;
  box-shadow:0 0 40px rgba(0,0,0,0.7);
  animation:modalSlideIn 0.25s ease;
  overflow:hidden;
}
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid rgba(139,105,20,0.3);
}
.modal-header h3 { color:#ffd700; font-size:16px; margin:0; }
.modal-close {
  background:none; border:none; color:#999; font-size:18px;
  cursor:pointer; padding:2px 6px; border-radius:4px;
  transition:all 0.15s;
}
.modal-close:hover { color:#fff; background:rgba(255,255,255,0.1); }
.modal-body { padding:16px; }

/* ===== 大厅房间列表 ===== */
.lobby-room {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; margin:4px 0;
  background:rgba(0,0,0,0.3); border:1px solid #5d4037;
  border-radius:8px; cursor:pointer; transition:all 0.2s;
  flex-wrap:wrap;
}
.lobby-room:hover { border-color:#ffd700; background:rgba(255,215,0,0.08); }
.lobby-room .room-name { color:#ffd700; font-weight:700; font-size:14px; min-width:80px; }
.lobby-room .room-players { color:#bcaaa4; font-size:13px; }
.lobby-room .room-blind { color:#a1887f; font-size:11px; padding:2px 6px; background:rgba(255,215,0,0.1); border-radius:4px; }
.lobby-room .room-host { color:#ffe082; font-size:13px; margin-left:auto; }
.lobby-room .room-btns { display:flex; gap:4px; }
.lobby-room .room-btn {
  padding:4px 10px; border:none; border-radius:4px;
  font-size:10px; font-weight:600; cursor:pointer;
  background:linear-gradient(180deg,#ffd700,#b8860b);
  color:#1a1a1a; transition:all 0.2s;
}
.lobby-room .room-btn:hover { background:linear-gradient(180deg,#ffe082,#ffd700); }
.lobby-room .room-btn.view { background:rgba(255,215,0,0.15); color:#ffd700; border:1px solid #8b6914; }
.lobby-room .room-btn.spectate { background:rgba(156,39,176,0.15); color:#ce93d8; border:1px solid #7b1fa2; }
.lobby-room .room-btn.spectate:hover { background:rgba(156,39,176,0.3); }
.lobby-room .room-lock { color:#ff5252; font-size:13px; }
.lobby-room .room-full { color:#ff5252; font-size:12px; }

/* ===== 座位关闭标记 ===== */
.seat-closed { opacity:0.3; filter:grayscale(0.8); }
.seat-closed-btn {
  position:absolute; top:-6px; right:-6px;
  width:16px; height:16px; border-radius:50%;
  background:#ff5252; color:#fff; font-size:10px;
  border:none; cursor:pointer; z-index:5;
  display:flex; align-items:center; justify-content:center;
  line-height:1;
}
.seat-open-btn {
  position:absolute; top:-6px; right:-6px;
  width:16px; height:16px; border-radius:50%;
  background:#4caf50; color:#fff; font-size:10px;
  border:none; cursor:pointer; z-index:5;
  display:flex; align-items:center; justify-content:center;
}
.kick-btn {
  position:absolute; top:-6px; left:-6px;
  width:16px; height:16px; border-radius:50%;
  background:#ff9800; color:#fff; font-size:10px;
  border:none; cursor:pointer; z-index:5;
  display:flex; align-items:center; justify-content:center;
  line-height:1;
}

#room-info { position:fixed; top:40px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,0.8); padding:6px 16px; border-radius:20px; z-index:90; font-size:12px; color:#4fc3f7; display:none; }
#waiting-msg { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(0,0,0,0.8); padding:20px 30px; border-radius:12px; z-index:90; text-align:center; display:none; }
#waiting-msg h3 { color:#ffd700; margin-bottom:8px; }
#waiting-msg p { color:#aaa; font-size:13px; margin-bottom:12px; }
#waiting-msg button { padding:8px 20px; background:#2e7d32; color:#fff; border:none; border-radius:6px; cursor:pointer; font-size:14px; }

#log { position:fixed; right:8px; top:40px; width:220px; max-height:45vh; overflow-y:auto; background:rgba(0,0,0,0.6); border-radius:8px; padding:8px; font-size:11px; color:#aaa; z-index:50; }
#log::-webkit-scrollbar { width:4px; }
#log::-webkit-scrollbar-thumb { background:#555; border-radius:2px; }
#log .log-entry { padding:2px 0; border-bottom:1px solid rgba(255,255,255,0.05); }
#log .log-entry.highlight { color:#ffd700; }

@keyframes dealCard { from { opacity:0; transform:translateY(-40px) scale(0.5); } to { opacity:1; transform:translateY(0) scale(1); } }
.deal-anim { animation:dealCard 0.4s ease-out; }

/* 发牌特效：从牌堆飞向玩家 */
.deal-fly-card {
  position:fixed; z-index:100; pointer-events:none;
  width:72px; height:104px; border-radius:8px;
  background:repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(255,255,255,0.03) 3px, rgba(255,255,255,0.03) 6px), linear-gradient(135deg, #1a3a6b 0%, #0d2240 40%, #122e54 100%);
  border:2px solid #1e4d8c;
  box-shadow:0 4px 12px rgba(0,0,0,0.5);
  will-change:transform, opacity;
}
.deal-fly-card::after { content:''; position:absolute; inset:5px; border-radius:5px; border:2px solid rgba(255,255,255,0.08); pointer-events:none; }

/* 弃牌特效：飞回牌堆 */
.fold-fly-card {
  position:fixed; z-index:100; pointer-events:none;
  border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,0.5);
  will-change:transform, opacity;
}
@keyframes chipGlow { 0%,100% { text-shadow:0 0 5px rgba(255,215,0,0.3); } 50% { text-shadow:0 0 15px rgba(255,215,0,0.8); } }
.chip-glow { animation:chipGlow 1s ease-in-out infinite; }

/* ==================== 等待阶段空座位样式 ==================== */
/* 空座位：桌子上的虚线圆圈，可点击 */
.seat-empty { position:absolute; z-index:20; text-align:center; transform:translate(-50%,-50%); }
.seat-empty .empty-circle {
  width:56px; height:56px; border-radius:50%;
  border:2px dashed rgba(255,255,255,0.18);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  margin:0 auto 2px; cursor:pointer; transition:all 0.2s;
  background:rgba(255,255,255,0.02);
  font-size:10px; color:rgba(255,255,255,0.25);
  gap:2px;
}
.seat-empty .empty-circle:hover { border-color:rgba(255,215,0,0.5); background:rgba(255,215,0,0.06); color:rgba(255,215,0,0.7); }
.seat-empty .seat-mini-btns { display:flex; gap:3px; justify-content:center; opacity:0; transition:opacity 0.15s; }
.seat-empty:hover .seat-mini-btns { opacity:1; }
.seat-mini-btn { padding:2px 4px; border:none; border-radius:4px; font-size:9px; cursor:pointer; font-weight:bold; transition:all 0.15s; line-height:1.4; width:36px; height:22px; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; }
.seat-mini-btn.sit { background:rgba(76,175,80,0.4); color:#a5d6a7; border:1px solid rgba(76,175,80,0.5); }
.seat-mini-btn.sit:hover { background:rgba(76,175,80,0.7); color:#fff; }
.seat-mini-btn.add-ai { background:rgba(156,39,176,0.4); color:#e1bee7; border:1px solid rgba(156,39,176,0.5); }
.seat-mini-btn.add-ai:hover { background:rgba(156,39,176,0.7); color:#fff; }
/* 座位编号角标（所有座位通用） */
.seat-num {
  position:absolute; top:-9px; left:-9px;
  width:22px; height:22px; border-radius:50%;
  background:rgba(0,0,0,0.80); border:1.5px solid rgba(255,215,0,0.6);
  color:#ffd700; font-size:11px; font-weight:800; font-family:'Segoe UI',Arial,sans-serif;
  display:flex; align-items:center; justify-content:center;
  z-index:6; pointer-events:none;
  box-shadow:0 1px 4px rgba(0,0,0,0.5);
}
.seat-empty .seat-num {
  position:static;
  margin-bottom:2px;
  background:transparent; border:none;
  color:rgba(255,255,255,0.35); font-size:11px;
  box-shadow:none;
  width:auto; height:auto;
}
.seat .seat-action-row { display:flex; gap:3px; justify-content:center; margin-top:2px; }
.seat-mini-btn.remove { background:rgba(244,67,54,0.35); color:#ef9a9a; border:1px solid rgba(244,67,54,0.4); }
.seat-mini-btn.remove:hover { background:rgba(244,67,54,0.6); color:#fff; }
.seat-mini-btn.move { background:rgba(33,150,243,0.35); color:#90caf9; border:1px solid rgba(33,150,243,0.4); }
.seat-mini-btn.move:hover { background:rgba(33,150,243,0.6); color:#fff; }
/* 等待阶段底部按钮栏 */
#waiting-bar { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); display:none; align-items:center; justify-content:center; gap:12px; padding:16px 28px; background:rgba(0,0,0,0.92); border:2px solid #ffd700; border-radius:16px; z-index:1000; flex-wrap:wrap; box-shadow:0 8px 32px rgba(0,0,0,0.8); }
#waiting-bar button { padding:9px 18px; border:none; border-radius:8px; font-size:13px; font-weight:bold; cursor:pointer; transition:all 0.2s; }
.wbar-ready { background:linear-gradient(180deg,#2e7d32,#1b5e20); color:#fff; border-bottom:2px solid #0d3311; }
.wbar-ready:hover { background:linear-gradient(180deg,#43a047,#2e7d32); }
.wbar-ready.is-ready { background:linear-gradient(180deg,#ff8f00,#e65100); border-bottom:2px solid #bf360c; }
.wbar-start { background:linear-gradient(135deg,#ffd700,#ff8f00); color:#000; }
.wbar-start:hover { opacity:0.9; }
.wbar-solo { background:rgba(33,150,243,0.35); color:#90caf9; border:1px solid rgba(33,150,243,0.4); }
.wbar-solo:hover { background:rgba(33,150,243,0.6); color:#fff; }
.wbar-leave { background:rgba(244,67,54,0.3); color:#ef9a9a; border:1px solid rgba(244,67,54,0.4); }
.wbar-leave:hover { background:rgba(244,67,54,0.5); color:#fff; }

@keyframes chipFlyIn { 0% { opacity:1; transform:translate(0,0) scale(1); } 15% { opacity:1; transform:translate(calc(var(--fly-x)*0.3),calc(var(--fly-y)*0.3 - 30px)) scale(1.3); } 40% { opacity:1; transform:translate(calc(var(--fly-x)*0.7),calc(var(--fly-y)*0.7 - 15px)) scale(1.1); } 80% { opacity:1; transform:translate(var(--fly-x),var(--fly-y)) scale(0.7); } 100% { opacity:0; transform:translate(var(--fly-x),var(--fly-y)) scale(0.2); } }
.flying-chip { position:fixed; width:24px; height:24px; border-radius:50%; pointer-events:none; z-index:150; animation:chipFlyIn 0.65s ease-out forwards; box-shadow:0 2px 6px rgba(0,0,0,0.5),inset 0 -2px 3px rgba(0,0,0,0.2),inset 0 2px 3px rgba(255,255,255,0.3); border:2px dashed rgba(255,255,255,0.25); }
.flying-chip::after { content:''; position:absolute; top:3px; left:3px; right:3px; bottom:3px; border-radius:50%; border:1px solid rgba(255,255,255,0.4); }

@keyframes chipWinFly { 0% { opacity:1; transform:translate(0,0) scale(1); box-shadow:0 0 8px rgba(255,215,0,0.5); } 40% { opacity:1; transform:translate(calc(var(--wx)*0.4),calc(var(--wy)*0.4)) scale(1.3); box-shadow:0 0 16px rgba(255,215,0,0.7); } 100% { opacity:0; transform:translate(var(--wx),var(--wy)) scale(0.3); box-shadow:0 0 4px rgba(255,215,0,0); } }
.win-chip { position:fixed; border-radius:50%; pointer-events:none; z-index:160; animation:chipWinFly 0.8s ease-in forwards; }
.win-chip.chip-val-1000 { background:radial-gradient(circle at 35% 35%,#ff9800,#e65100); border:2px solid #ffb74d; width:28px; height:28px; font-size:9px; color:#fff;display:flex;align-items:center;justify-content:center;font-weight:bold; }
.win-chip.chip-val-500  { background:radial-gradient(circle at 35% 35%,#9c27b0,#4a148c); border:2px solid #ce93d8; width:26px; height:26px; font-size:9px; color:#fff;display:flex;align-items:center;justify-content:center;font-weight:bold; }
.win-chip.chip-val-100  { background:radial-gradient(circle at 35% 35%,#212121,#000); border:2px solid #616161; width:24px; height:24px; font-size:9px; color:#fff;display:flex;align-items:center;justify-content:center;font-weight:bold; }
.win-chip.chip-val-25   { background:radial-gradient(circle at 35% 35%,#4caf50,#1b5e20); border:2px solid #69f0ae; width:22px; height:22px; font-size:9px; color:#fff;display:flex;align-items:center;justify-content:center;font-weight:bold; }
.win-chip.chip-val-5    { background:radial-gradient(circle at 35% 35%,#f44336,#b71c1c); border:2px solid #ff5252; width:20px; height:20px; font-size:8px; color:#fff;display:flex;align-items:center;justify-content:center;font-weight:bold; }
.win-chip.chip-val-1    { background:radial-gradient(circle at 35% 35%,#eee,#bbb); border:2px solid #fff; width:18px; height:18px; font-size:8px; color:#333;display:flex;align-items:center;justify-content:center;font-weight:bold; }

@keyframes chipLoseScatter { 0% { opacity:1; transform:translate(0,0) rotate(0deg) scale(1); } 60% { opacity:0.7; transform:translate(var(--sx),var(--sy)) rotate(var(--sr)) scale(0.8); } 100% { opacity:0; transform:translate(var(--sx2),var(--sy2)) rotate(var(--sr2)) scale(0.2); } }
.lose-chip { position:fixed; border-radius:50%; pointer-events:none; z-index:155; animation:chipLoseScatter 0.7s ease-out forwards; }

/* ==================== 响应式：平板 (600-900px) ==================== */
@media (max-width:900px) and (min-width:601px) {
  #table-rail { width:94vw; height:86vh; max-width:680px; max-height:600px; border-width:20px; }
  #table-bg, #seats, #floats-container { width:88vw; height:80vh; max-width:580px; max-height:500px; }
  .card { width:56px; height:80px; }
  .card .c-rank { font-size:26px; }
  .card .c-suit-btm { font-size:28px; }
  .card-slot { width:60px; height:84px; }
  .card-back { width:56px; height:80px; }
  .side-panel { max-width:200px; font-size:12px; }
  .side-panel .panel-body { max-height:200px; }
  .action-btn { padding:14px 10px; font-size:16px; max-width:none; min-width:0; flex:1 1 auto; }
  .seat .avatar { width:36px; height:36px; font-size:18px; }
  .dealer-badge { width:18px; height:18px; font-size:10px; top:-6px; right:-6px; }
  #actions { max-width:380px; }
}

/* ==================== 响应式：手机 (≤600px) ==================== */
@media (max-width:600px) {
  /* ---- 牌桌缩小（纯CSS 椭圆跑道桌）---- */
  #table-rail { width:96vw; height:78vh; max-width:none; max-height:none; top:45%; border-width:18px; }
  #table-bg, #seats, #floats-container { width:90vw; height:72vh; max-width:none; max-height:none; top:45%; }
  .card { width:40px; height:58px; }
  .card .c-rank { font-size:20px; top:2px; left:3px; }
  .card .c-suit-btm { font-size:22px; bottom:1px; right:3px; }
  .card-slot { width:44px; height:62px; }
  .card-back { width:40px; height:58px; }
  .float-cards .mini-card-sm { width:34px; height:48px; }
  .float-cards .mini-card-sm .m-rank { font-size:20px; }
  .float-cards .mini-card-sm .m-suit-btm { font-size:22px; }
  .float-cards .card-back-sm { width:34px; height:48px; }
  .seat .avatar { width:28px; height:28px; font-size:14px; }
  .seat .name { font-size:9px; }
  .seat .chips-display { font-size:8px; }
  .dealer-badge { width:16px; height:16px; font-size:9px; top:-5px; right:-5px; }
  .seat .seat-avatar-wrap .seat-num { display:none !important; }
  #deck-pile { width:44px; height:64px; transform:translate(calc(-50% - 78px), -108px); }
  #deck-pile .deck-card { width:44px; height:64px; }
  .deal-fly-card { width:40px !important; height:58px !important; }
  .fold-fly-card { width:34px !important; height:48px !important; }

  /* ---- 操作按钮：横向撑满 4/5 屏幕，按钮大号可轻松点按 ---- */
  #actions { width:90vw; max-width:90vw; min-width:0; }
  .action-btn { padding:14px 10px; font-size:16px; max-width:none; min-width:0; flex:1 1 auto; }
  #main-actions { gap:6px; padding:6px 6px 8px; }
  #action-info-row { padding:6px 10px 2px; gap:8px; }
  #bet-amount-display { font-size:16px; }
  #timer-inline { font-size:18px; }

  /* ---- 加注滑块 ---- */
  #slider-area { padding:24px 10px 4px 10px; min-width:220px; }
  #raise-slider-wrap { width:30px; height:150px; }
  .slider-thumb { width:28px; height:28px; }
  #slider-amount-display { font-size:17px; top:4px; }
  .btn-confirm-raise { padding:7px 14px; font-size:14px; bottom:6px; }

  /* ---- 顶部信息栏 ---- */
  #info-bar { padding:6px 130px 6px 10px; font-size:11px; gap:10px; }

  #info-bar .phase { font-size:12px; }
  #room-score-btn { top:3px; right:70px; padding:4px 10px; font-size:11px; }
  #room-exit-btn { top:3px; right:6px; padding:4px 10px; font-size:11px; }

  /* ---- 等待栏 ---- */
  #waiting-bar { padding:8px 6px; gap:5px; }
  #waiting-bar button { padding:9px 10px; font-size:13px; }

  /* ---- 侧边栏 ---- */
  .side-panel { max-width:160px; font-size:11px; }
  .side-panel .panel-body { max-height:140px; }
  #user-panel { max-width:200px !important; top:78px; left:42px; }
  #room-panel { top:36px; left:42px; max-width:160px; }
  #spectator-panel { top:36px; left:42px; max-width:160px; }
  #user-panel .panel-body.collapsed { display:none; }
  #user-panel .panel-header { cursor:pointer; }
  #mobile-panel-toggle { display:flex; }

  /* ---- 倒计时显示 ---- */
  #game-countdown-text { font-size:36px; }
  #game-extend-btn { padding:5px 14px; font-size:13px; }
  /* ---- 重连覆盖层 ---- */
  .reconnect-box { padding:30px 35px; }
  .reconnect-countdown { font-size:28px; }

  /* ---- 侧边栏内按钮 ---- */
  .user-btn { padding:5px; font-size:11px; }
  #setup-panel .btn-row button { padding:10px; font-size:14px; }
  .btn-lobby { font-size:13px !important; padding:6px 12px !important; }

  /* ---- 座位信息/手牌 ---- */
  .seat .seat-info { display:none !important; }
  .float-handinfo { display:flex !important; }
  .float-handinfo .fhi-chips { font-size:10px; }
  .float-handinfo .fhi-action { font-size:9px; }

  /* ---- 操作记录 ---- */
  #log { display:none; }

  /* ---- 弹窗 ---- */
  .modal-box { padding:16px; max-width:95vw; }
  .modal-box h3 { font-size:16px; margin-bottom:12px; }
  .modal-box input { padding:10px; font-size:15px; }
  .modal-btns button { padding:10px; font-size:14px; }

  /* ---- 结算弹窗 ---- */
  #settle-overlay { width:95vw; max-width:400px; padding:16px 12px; }
  #settle-overlay .settle-community-row { gap:4px; }
  #settle-overlay .settle-community-row .card { width:34px; height:48px; }
  #settle-overlay .settle-community-row .card .c-rank { font-size:16px; }
  #settle-overlay .settle-community-row .card .c-suit-btm { font-size:18px; }
  #settle-overlay .settle-player-row { padding:6px 8px; }
  #settle-overlay .settle-player-row .card { width:34px; height:48px; }
  #settle-overlay .settle-player-row .card .c-rank { font-size:16px; }
  #settle-overlay .settle-player-row .card .c-suit-btm { font-size:18px; }
  #settle-overlay .settle-player-row .settle-player-info { font-size:12px; }
  #settle-overlay .settle-countdown { font-size:12px; margin-top:10px; }
}

/* 可折叠侧面板 */
.side-panel { position:fixed; z-index:95; background:rgba(10,10,20,0.92); border:1px solid rgba(255,255,255,0.12); border-radius:8px; font-size:12px; color:#ccc; max-width:240px; backdrop-filter:blur(8px); }
.side-panel .panel-header { padding:6px 10px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; user-select:none; border-bottom:1px solid rgba(255,255,255,0.06); }
.side-panel .panel-header:hover { background:rgba(255,255,255,0.05); }
.side-panel .panel-arrow { font-size:10px; transition:transform 0.2s; }
.side-panel .panel-arrow.collapsed { transform:rotate(-90deg); }
.side-panel .panel-body { padding:6px 10px; max-height:300px; overflow-y:auto; }
.side-panel .panel-body.collapsed { display:none; }
.side-panel .panel-body::-webkit-scrollbar { width:3px; }
.side-panel .panel-body::-webkit-scrollbar-thumb { background:#555; border-radius:2px; }
#room-panel { top:36px; left:8px; }
#spectator-panel { top:36px; left:8px; }
#action-panel { top:82px; right:8px; }
#history-panel { top:36px; right:8px; }

/* 玩家底部手牌区 */
#my-hand-area { position:fixed; bottom:150px; left:50%; transform:translateX(-50%); z-index:90; display:flex; flex-direction:column; align-items:center; gap:4px; background:rgba(0,0,0,0.65); padding:6px 14px 8px; border-radius:10px; transition:bottom 0.25s ease; }
#my-hand-cards { display:flex; gap:6px; }
#my-hand-area .card { width:56px; height:82px; }
#my-hand-area .card .corner-top .rank { font-size:17px; }
#my-hand-area .card .center-suit { font-size:34px; }
#my-hand-info { font-size:14px; color:#ffd700; display:flex; gap:20px; align-items:center; padding:2px 0; }
#my-hand-status { color:#ff9800; font-weight:bold; font-size:14px; }
#my-hand-to-call { color:#ff5252; font-weight:bold; font-size:14px; display:none; }

/* 准备按钮 */
#ready-btn.ready { background:#4caf50 !important; }
#waiting-msg button { padding:8px 16px; border:none; border-radius:6px; color:#fff; font-size:13px; cursor:pointer; }

/* ==================== 手机端面板切换按钮 ==================== */
#mobile-panel-toggle {
  display:none;
  position:fixed; top:46px; left:6px; z-index:215;
  width:30px; height:30px; border-radius:50%;
  background:rgba(10,10,20,0.85); border:1px solid rgba(255,215,0,0.3);
  color:#ffd700; font-size:14px; cursor:pointer;
  align-items:center; justify-content:center;
  transition:all 0.2s; line-height:1; padding:0;
}
#mobile-panel-toggle:hover { background:rgba(255,215,0,0.2); border-color:#ffd700; }

/* ==================== 结算弹窗 ==================== */
#settle-overlay {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:10001; display:none; flex-direction:column; align-items:center;
  width:440px; max-height:85%;
  background:linear-gradient(145deg, rgba(30,20,10,0.96) 0%, rgba(15,8,4,0.98) 100%);
  border:2px solid rgba(255,215,0,0.25); border-radius:16px;
  box-shadow:0 8px 40px rgba(0,0,0,0.7), 0 0 60px rgba(255,215,0,0.08);
  padding:20px 18px 14px; overflow-y:auto;
  animation:settleIn 0.4s ease-out;
}
#settle-overlay.show { display:flex; }
@keyframes settleIn {
  from { opacity:0; transform:translate(-50%,-50%) scale(0.85); }
  to { opacity:1; transform:translate(-50%,-50%) scale(1); }
}
#settle-overlay .settle-title {
  font-size:22px; color:#ffd700; font-weight:bold;
  text-shadow:0 0 16px rgba(255,215,0,0.4);
  margin-bottom:12px; letter-spacing:3px; flex-shrink:0;
}
/* 公共牌行 */
#settle-overlay .settle-community-row {
  display:flex; gap:5px; margin-bottom:14px; justify-content:center;
  flex-shrink:0;
}
#settle-overlay .settle-community-row .card {
  width:44px; height:62px; border-radius:6px;
  background:linear-gradient(135deg,#1a3a6b 0%,#0d2240 40%,#122e54 100%);
  border:1.8px solid #2a4a7a; display:block;
  color:#fff; box-shadow:0 3px 8px rgba(0,0,0,0.55);
  text-shadow:0 1px 3px rgba(0,0,0,0.6); position:relative;
}
#settle-overlay .settle-community-row .card .c-rank {
  position:absolute; top:3px; left:4px; font-size:22px; font-weight:900;
  line-height:1; letter-spacing:-1px;
}
#settle-overlay .settle-community-row .card .c-suit-btm {
  position:absolute; bottom:2px; right:4px; font-size:24px; line-height:1;
}
#settle-overlay .settle-community-row .card.red { color:#e53935; }
/* 玩家列表 */
#settle-overlay .settle-players {
  display:flex; flex-direction:column; gap:8px;
  width:100%; flex-shrink:0;
}
#settle-overlay .settle-player-row {
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,0.05); border-radius:8px;
  padding:10px 12px; border:1px solid rgba(255,255,255,0.06);
}
#settle-overlay .settle-player-row.winner {
  background:rgba(255,215,0,0.07); border-color:rgba(255,215,0,0.2);
}
#settle-overlay .settle-player-row .settle-rank {
  width:24px; height:24px; border-radius:50%;
  background:rgba(255,215,0,0.2); color:#ffd700;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:bold; flex-shrink:0;
}
#settle-overlay .settle-player-row .settle-player-cards {
  display:flex; gap:5px; flex-shrink:0;
}
#settle-overlay .settle-player-row .settle-player-cards .card {
  width:44px; height:62px; border-radius:6px;
  background:linear-gradient(135deg,#1a3a6b 0%,#0d2240 40%,#122e54 100%);
  border:1.8px solid #2a4a7a; display:block;
  color:#fff; box-shadow:0 3px 8px rgba(0,0,0,0.45);
}
#settle-overlay .settle-player-row .settle-player-cards .card .c-rank {
  position:absolute; top:2px; left:4px; font-size:20px; font-weight:900;
  line-height:1; letter-spacing:-1px;
}
#settle-overlay .settle-player-row .settle-player-cards .card .c-suit-btm {
  position:absolute; bottom:2px; right:4px; font-size:22px; line-height:1;
}
#settle-overlay .settle-player-row .settle-player-cards .card.red { color:#e53935; }
#settle-overlay .settle-player-row .settle-player-info {
  display:flex; flex-direction:column; gap:1px; flex:1; min-width:0;
}
#settle-overlay .settle-player-row .settle-player-name {
  font-size:14px; color:#fff; font-weight:bold;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#settle-overlay .settle-player-row .settle-player-hand {
  font-size:12px; color:#aaa;
}
#settle-overlay .settle-player-row .settle-best-cards {
  display:flex; gap:3px; margin-top:4px; flex-wrap:wrap;
}
#settle-overlay .settle-player-row .best-card {
  width:22px; height:31px; border-radius:3px; background:linear-gradient(145deg,#fff,#e8e0d8);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-weight:bold; color:#222; line-height:1; position:relative;
  box-shadow:0 1px 3px rgba(0,0,0,0.3);
}
#settle-overlay .settle-player-row .best-card .c-rank {
  font-size:10px;
}
#settle-overlay .settle-player-row .best-card .c-suit-btm {
  font-size:10px;
}
#settle-overlay .settle-player-row .best-card.red { color:#e53935; }
#settle-overlay .settle-player-row .settle-player-amount {
  font-size:16px; color:#ffd700; font-weight:bold;
  flex-shrink:0; white-space:nowrap; overflow:visible; min-width:40px; text-align:right; text-shadow:0 0 8px rgba(255,215,0,0.4);
}
#settle-overlay .settle-countdown {
  font-size:13px; color:#aaa; margin-top:16px;
  flex-shrink:0;
}
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* ==================== 烟花 Canvas ==================== */
#firework-canvas { position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:300; pointer-events:none; }

/* 赢家金币飘落提示 */
.win-banner { position:fixed; z-index:250; pointer-events:none; font-size:24px; font-weight:bold; color:#ffd700; text-shadow:0 0 20px rgba(255,215,0,0.8), 0 0 40px rgba(255,165,0,0.6); animation:winBannerPop 3s ease-out forwards; white-space:nowrap; }
@keyframes winBannerPop {
  0% { transform:translate(-50%,-50%) scale(0.3); opacity:1; }
  30% { transform:translate(-50%,-50%) scale(1.2); opacity:1; }
  100% { transform:translate(-50%,-80%) scale(1); opacity:0; }
}

/* ==================== 世界聊天面板 ==================== */
#world-chat { position:fixed; bottom:120px; left:8px; right:auto; top:auto; z-index:310; }
#world-chat .panel-body { padding:0; display:flex; flex-direction:column; overflow:hidden; height:260px; }
#world-chat .panel-body.collapsed { display:none; }

#wc-messages { flex:1; overflow-y:auto; padding:4px 6px; display:flex; flex-direction:column; gap:3px; min-height:180px; }
#wc-messages::-webkit-scrollbar { width:3px; }
#wc-messages::-webkit-scrollbar-track { background:transparent; }
#wc-messages::-webkit-scrollbar-thumb { background:rgba(139,105,20,0.3); border-radius:2px; }

.wc-msg { display:flex; gap:4px; align-items:flex-start; font-size:11px; animation:wcFadeIn 0.2s ease; }
@keyframes wcFadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
.wc-msg .wc-name { color:#d4a843; font-weight:bold; white-space:nowrap; flex-shrink:0; font-size:10px; }
.wc-msg .wc-colon { color:#d4a843; opacity:0.7; margin-right:3px; font-size:10px; }
.wc-msg .wc-text { color:#ccc; word-break:break-word; line-height:1.3; }
.wc-msg .wc-time { color:#666; font-size:9px; white-space:nowrap; flex-shrink:0; margin-left:auto; }
.wc-msg.system { justify-content:center; }
.wc-msg.system .wc-text { color:#888; font-style:italic; font-size:10px; }

.wc-voice-btn { display:inline-flex; align-items:center; gap:3px; padding:1px 6px; background:rgba(52,152,219,0.2); border:1px solid rgba(52,152,219,0.4); border-radius:10px; color:#5dade2; font-size:10px; cursor:pointer; }
.wc-voice-btn:hover { background:rgba(52,152,219,0.35); }
.wc-voice-icon { font-size:12px; }

#wc-input-row { display:flex; gap:3px; padding:4px 6px; border-top:1px solid rgba(139,105,20,0.15); align-items:center; flex-shrink:0; }
#wc-input { flex:1; background:rgba(255,255,255,0.08); border:1px solid rgba(139,105,20,0.3); border-radius:4px; color:#eee; font-size:11px; padding:3px 5px; outline:none; min-width:0; }
#wc-input:focus { border-color:rgba(212,168,67,0.6); }
#wc-input::placeholder { color:#666; font-size:10px; }

.wc-btn { background:rgba(139,105,20,0.2); border:1px solid rgba(139,105,20,0.3); border-radius:4px; color:#d4a843; font-size:14px; cursor:pointer; width:24px; height:24px; display:flex; align-items:center; justify-content:center; flex-shrink:0; padding:0; transition:all 0.15s; }
.wc-btn:hover { background:rgba(139,105,20,0.4); }
.wc-btn.recording { background:rgba(231,76,60,0.3); border-color:#e74c3c; color:#e74c3c; animation:wcPulse 0.8s infinite; }
@keyframes wcPulse { 0%,100% { box-shadow:0 0 0 0 rgba(231,76,60,0.4); } 50% { box-shadow:0 0 0 4px rgba(231,76,60,0); } }
.wc-btn.send { background:rgba(212,168,67,0.25); border-color:rgba(212,168,67,0.5); }

#wc-emoji-panel { display:none; flex-wrap:wrap; gap:2px; padding:4px 6px; border-top:1px solid rgba(139,105,20,0.15); background:rgba(0,0,0,0.2); max-height:100px; overflow-y:auto; }
#wc-emoji-panel.show { display:flex; }
.wc-emoji { font-size:18px; cursor:pointer; padding:1px; border-radius:3px; transition:transform 0.1s; line-height:1; }
.wc-emoji:hover { transform:scale(1.3); background:rgba(255,255,255,0.1); }

@media (max-width:600px) {
  #world-chat { width:calc(100vw - 16px); left:8px; right:8px; }
}
/* ==================== 底部导航栏 ==================== */
#bottom-nav{position:fixed;bottom:0;left:0;right:0;height:72px;background:linear-gradient(180deg,rgba(30,15,8,0.96) 0%,rgba(20,10,5,0.98) 100%);border-top:2px solid rgba(139,105,20,0.5);display:flex;align-items:flex-end;justify-content:space-around;z-index:250;box-shadow:0 -4px 20px rgba(0,0,0,0.8);padding:0 4px 10px;box-sizing:border-box}
.tab-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:none;border:none;color:#8d6e63;cursor:pointer;padding:4px 8px;transition:all .2s;font-size:10px;min-width:52px;position:relative;outline:0;-webkit-tap-highlight-color:transparent;box-sizing:border-box}
.tab-btn .tab-icon{font-size:22px;line-height:1;transition:transform .2s}
.tab-btn .tab-label{font-size:10px;line-height:1;font-weight:500}
.tab-btn.active{color:#ffd700}
.tab-btn.active .tab-icon{transform:scale(1.1)}
.tab-btn.active::after{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:24px;height:3px;background:#ffd700;border-radius:2px;box-shadow:0 0 8px rgba(255,215,0,0.6)}
.tab-btn:active{transform:scale(0.92)}
.tab-btn-primary{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;background:linear-gradient(180deg,#ffd700 0%,#f0c000 30%,#b8860b 70%,#8b6914 100%);border:3px solid #ffe082;border-radius:50%;width:70px;height:70px;color:#1a0e08;cursor:pointer;font-weight:700;font-size:10px;box-shadow:0 0 24px rgba(255,215,0,0.5),0 -4px 16px rgba(255,215,0,0.2),0 4px 12px rgba(0,0,0,0.5);transition:all .25s;position:relative;margin-bottom:8px;flex-shrink:0;outline:0;-webkit-tap-highlight-color:transparent}
.tab-btn-primary:hover{transform:scale(1.1);box-shadow:0 0 36px rgba(255,215,0,0.7),0 -6px 24px rgba(255,215,0,0.3)}
.tab-btn-primary:active{transform:scale(0.93)}
.tab-btn-primary .tab-icon{font-size:28px;line-height:1}
.tab-btn-primary .tab-label{font-size:10px;color:#1a0e08;font-weight:700;letter-spacing:1px}
#pages-container{position:fixed;top:0;left:0;right:0;bottom:72px;overflow:hidden;z-index:1;-webkit-overflow-scrolling:touch}
#pages-container::-webkit-scrollbar{width:4px}
#pages-container::-webkit-scrollbar-thumb{background:rgba(255,215,0,0.2);border-radius:2px}
.page{display:none;min-height:100%;padding:20px 16px 100px}
@keyframes pageFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.page.active{display:block}
#page-start{display:none;flex-direction:column;align-items:center;justify-content:center;height:calc(100vh - 72px);padding:20px 16px;box-sizing:border-box;overflow-y:auto}
#page-start.active{display:flex}
body.in-game #bottom-nav{display:none}
body.in-game #pages-container{display:none}
body.in-game #setup-panel{display:none}
body.in-game #user-panel{display:none}
body.in-game #world-chat{display:none}
#setup-panel-new{width:100%;max-width:420px}
#setup-panel-new .panel{background:linear-gradient(180deg,rgba(62,39,35,0.92),rgba(44,24,16,0.95));border:2px solid rgba(139,105,20,0.5);border-radius:16px;padding:30px 24px;text-align:center;box-shadow:0 0 40px rgba(0,0,0,0.5),0 0 24px rgba(255,215,0,0.06);backdrop-filter:blur(12px)}
#setup-panel-new .brand-text{font-size:20px;background:linear-gradient(90deg,#ff6b6b,#feca57,#48dbfb,#ff9ff3,#54a0ff,#5f27cd,#01a3a4,#ff6b6b);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:brandFlow 4s linear infinite;letter-spacing:6px;text-transform:uppercase;margin-bottom:4px;font-weight:700}
#setup-panel-new .game-title{font-size:32px;font-weight:900;background:linear-gradient(90deg,#ffd700,#ffaa00,#ff8c00,#ffd700,#ffe066,#ffd700);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:titleShimmer 3s ease-in-out infinite;letter-spacing:2px;filter:drop-shadow(0 0 12px rgba(255,180,0,0.5));margin-bottom:20px}
#setup-panel-new label{display:block;color:#d7ccc8;margin:12px 0 4px;font-size:13px;font-weight:600;text-align:left}
#setup-panel-new input,#setup-panel-new select{width:100%;padding:12px;background:rgba(0,0,0,0.4);border:2px solid #5d4037;border-radius:8px;color:#eee;font-size:14px;box-sizing:border-box;transition:border-color .2s}
#setup-panel-new input:focus,#setup-panel-new select:focus{outline:none;border-color:#ffd700}
#setup-panel-new select option{background:#2c1810;color:#eee}
#setup-panel-new .btn-row{display:flex;gap:10px;margin-top:20px}
#setup-panel-new .btn-row button{flex:1;padding:12px;border:none;border-radius:8px;font-size:15px;font-weight:700;cursor:pointer;transition:all .2s}
#setup-panel-new .btn-primary{background:linear-gradient(180deg,#ffd700,#b8860b);color:#1a1a1a;border-bottom:3px solid #8b6914}
#setup-panel-new .btn-primary:hover{background:linear-gradient(180deg,#ffe082,#ffd700);transform:translateY(-1px)}
#setup-panel-new .btn-secondary{background:transparent;color:#ffd700;border:2px solid #8b6914}
#setup-panel-new .btn-secondary:hover{background:rgba(255,215,0,0.1);border-color:#ffd700}
#setup-panel-new .btn-lobby{background:rgba(212,168,67,0.1);color:#d4a843;border:1px solid rgba(212,168,67,0.3)}
#setup-panel-new .btn-lobby:hover{background:rgba(212,168,67,0.2);border-color:#d4a843}
.lobby-page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding:8px 12px;background:rgba(0,0,0,0.3);border-radius:10px;border:1px solid rgba(255,215,0,0.15)}
.lobby-page-title{color:#ffd700;font-size:18px;font-weight:700;display:flex;align-items:center;gap:8px}
.lobby-page-count{color:#d4a843;font-size:13px;background:rgba(255,215,0,0.1);padding:3px 10px;border-radius:12px}
#lobby-page-list{display:flex;flex-direction:column;gap:6px}
.lobby-page-room{display:flex;align-items:center;gap:10px;padding:12px 14px;background:rgba(0,0,0,0.35);border:1px solid #3e2723;border-radius:10px;cursor:pointer;transition:all .15s;font-size:13px;flex-wrap:wrap;backdrop-filter:blur(4px)}
.lobby-page-room:hover{border-color:#8b6914;background:rgba(255,215,0,0.06);transform:translateY(-1px)}
.lobby-page-room .lpr-name{color:#ffd700;font-weight:700;font-size:14px;min-width:60px}
.lobby-page-room .lpr-blind{color:#bcaaa4;font-size:11px;background:rgba(255,215,0,0.08);padding:2px 8px;border-radius:4px}
.lobby-page-room .lpr-count{color:#a1887f;font-size:12px}
.lobby-page-room .lpr-host{color:#ffe082;flex:1;font-size:12px;min-width:60px}
.lobby-page-room .lpr-lock{color:#ff5252;font-size:13px}
.lobby-page-room .lpr-full{color:#ff5252;font-size:12px;font-weight:700}
.lobby-page-room .lpr-phase{color:#81c784;font-size:10px;background:rgba(129,199,132,0.1);padding:1px 6px;border-radius:4px}
.lobby-page-btns{display:flex;gap:4px;margin-left:auto}
.lobby-page-btn{padding:5px 10px;border:none;border-radius:5px;font-size:11px;font-weight:700;cursor:pointer;transition:all .15s}
.lobby-page-btn.join{background:linear-gradient(180deg,#ffd700,#b8860b);color:#1a1a1a}
.lobby-page-btn.view{background:rgba(139,105,20,0.2);color:#d4a843;border:1px solid rgba(139,105,20,0.3)}
.lobby-page-btn.spectate{background:rgba(52,152,219,0.15);color:#5dade2;border:1px solid rgba(52,152,219,0.3)}
.lobby-page-empty{text-align:center;padding:40px 20px;color:#666;font-size:14px}
.lobby-page-empty .empty-icon{font-size:48px;margin-bottom:12px}
@media (max-width:600px){#bottom-nav{height:65px;padding:0 2px 8px}.tab-btn{min-width:44px;padding:2px 4px}.tab-btn .tab-icon{font-size:20px}.tab-btn .tab-label{font-size:9px}.tab-btn-primary{width:60px;height:60px}.tab-btn-primary .tab-icon{font-size:24px}.tab-btn-primary .tab-label{font-size:9px}#pages-container{bottom:65px}#setup-panel-new .panel{padding:20px 16px}#setup-panel-new .game-title{font-size:28px}.lobby-page-room{padding:8px 10px;gap:6px;flex-wrap:nowrap}.lobby-page-btns{flex-shrink:0;margin-left:0;justify-content:flex-end}}
/* ---- 底栏改造：隐藏旧的浮动面板，改用底部Tab ---- */
#world-chat{display:none !important}
#user-panel{display:none !important}
/* 聊天页面全屏优化 */
#page-chat{display:none; flex-direction:column; padding:0; background:#12121e; overflow:hidden; height:100%}
#page-chat.active{display:flex}
.chat-page-container{border-radius:0; border:none; flex:1; display:flex; flex-direction:column; overflow:hidden}
.chat-page-messages{flex:1; padding:12px 14px; gap:8px; overflow-y:auto}
.chat-page-header{font-size:17px; padding:14px 16px; flex-shrink:0}

/* 我的页面优化 */
#page-my{padding:20px;max-width:100%;box-sizing:border-box}
.my-page-btns{display:flex;gap:12px;margin-top:20px;width:100%}
.my-page-btn{padding:14px 32px;border-radius:12px;font-size:16px;cursor:pointer;border:none;transition:all 0.2s;flex:1;text-align:center;font-weight:600;min-height:48px;box-shadow:0 2px 8px rgba(0,0,0,0.3)}
.my-page-card{background:rgba(255,255,255,0.05);border:1px solid rgba(139,105,20,0.15);border-radius:16px;padding:24px;width:100%;box-sizing:border-box}
.my-page-login-hint{text-align:center;color:#888;font-size:16px;padding:48px 24px}
.my-page-login-hint .hint-icon{font-size:56px;margin-bottom:16px}
.my-page-header{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.my-page-avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#ffd700,#ff8f00);display:flex;align-items:center;justify-content:center;font-size:32px;box-shadow:0 2px 12px rgba(255,215,0,0.3)}
.my-page-nick{font-size:20px;font-weight:bold;color:#fff}
.my-page-username{font-size:13px;color:rgba(255,255,255,0.5);margin-top:4px}
.my-page-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.my-stat-row{background:rgba(255,255,255,0.06);border-radius:10px;padding:12px 16px;display:flex;justify-content:space-between;align-items:center}
.my-stat-label{font-size:13px;color:rgba(255,255,255,0.6)}
.my-stat-value{font-size:18px;font-weight:bold;color:#ffd700}
.my-stat-positive{color:#4caf50}
.my-stat-negative{color:#ef5350}

/* 非牌局状态：隐藏游戏相关元素（仅牌局中显示） */
#info-bar{display:none}
#room-exit-btn{display:none}
#room-score-btn{display:none}
#room-panel{display:none}
#history-panel{display:none}
#waiting-bar{display:none}
body.in-game #info-bar{display:flex}
body.in-game #tab-bar{display:none !important}
body.in-game #room-score-btn{display:block}
body.in-game #room-exit-btn{display:block}
body.in-game #room-panel{display:block}
body.in-game #history-panel{display:block}
body.in-game #waiting-bar{display:none}body.in-game .float-bet{display:none !important}
/* ========== Tab 页面聊天区样式 ========== */
.chat-page-input {
  flex: 1;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(139,105,20,0.25);
  border-radius: 20px;
  padding: 8px 14px;
  color: #fff;
  font-size: 14px;
  outline: none;
  min-width: 0;
}
.chat-page-input::placeholder { color: rgba(255,255,255,0.3); }
.chat-page-input:focus { border-color: #ffd700; }

.chat-page-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(139,105,20,0.25);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffd700;
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
}
.chat-page-btn:hover { background: rgba(255,215,0,0.15); border-color: #ffd700; }
.chat-page-btn.send { background: linear-gradient(135deg,#ffd700,#ff8f00); color: #1a1a2e; border: none; font-weight: bold; }
.chat-page-btn.send:hover { opacity: 0.9; }

/* 聊天语音按钮 */
.chat-page-btn.voice {
  background: rgba(52,152,219,0.2);
  border-color: rgba(52,152,219,0.4);
  color: #5dade2;
  font-size: 16px;
}
.chat-page-btn.voice:active { background: rgba(231,76,60,0.4); border-color: #e74c3c; color: #e74c3c; }

/* 表情面板 */
.chat-page-emoji-panel {
  display: none;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 10px;
  background: rgba(0,0,0,0.4);
  border-top: 1px solid rgba(139,105,20,0.2);
  max-height: 150px;
  overflow-y: auto;
  flex-shrink: 0;
}
.chat-page-emoji-panel.show { display: flex; }

.chat-page-emoji {
  font-size: 22px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background 0.15s;
  user-select: none;
}
.chat-page-emoji:hover { background: rgba(255,215,0,0.2); }

/* 输入行（内含按钮和输入框） */
.chat-page-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: rgba(0,0,0,0.3);
  border-top: 1px solid rgba(139,105,20,0.15);
  flex-shrink: 0;
}

/* ========== 排行页面样式 ========== */
#page-rank {
  padding: 0 0 90px 0;
  display: none;
  overflow-y: auto;
  height: 100%;
  box-sizing: border-box;
}
#page-rank.active { display: block; }

/* ===== 排行榜 ===== */
.rank-header {
  position: sticky; top: 0; z-index: 10;
  background: linear-gradient(180deg, #1a0e08, rgba(26,14,8,0.95));
  padding: 8px 0 4px;
}
.rank-cat-tabs {
  display: flex; gap: 4px; justify-content: center;
  margin-bottom: 6px;
}
.rank-cat-tab {
  padding: 8px 20px; border: none; border-radius: 10px;
  font-size: 15px; font-weight: 700; cursor: pointer;
  background: rgba(0,0,0,0.4); color: #aaa;
  transition: all 0.2s;
}
.rank-cat-tab.active {
  background: linear-gradient(180deg, #e65100, #bf360c);
  color: #fff; box-shadow: 0 0 12px rgba(230,81,0,0.4);
}
.rank-tabs {
  display: flex; gap: 4px;
  background: rgba(0,0,0,0.3); border-radius: 10px;
  padding: 3px; width: fit-content;
  margin: 0 auto;
}
.rank-tab {
  padding: 10px 24px; border: none; border-radius: 10px;
  font-size: 16px; font-weight: 700; cursor: pointer;
  background: transparent; color: #aaa;
  transition: all 0.2s;
}
.rank-tab.active {
  background: linear-gradient(180deg, #ffd700, #b8860b);
  color: #1a1a1a;
}

/* Podium: top 3 */
.rank-podium {
  display: flex; justify-content: center; align-items: flex-end;
  gap: 4px; padding: 16px 4px 0;
  min-height: 160px;
}
.rank-podium-item {
  text-align: center; flex: 1; max-width: 140px;
  position: relative;
}
.rank-podium-item .podium-avatar {
  font-size: 36px; margin-bottom: 2px;
}
.rank-podium-item.rank-1 .podium-avatar { font-size: 48px; }
.rank-podium-item .podium-nick {
  font-size: 12px; color: #ddd; font-weight: bold;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rank-podium-item .podium-amount {
  font-size: 13px; font-weight: bold; color: #ffd700;
}
.rank-podium-bar {
  height: 40px; border-radius: 6px 6px 0 0;
  margin-top: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: bold;
}
.rank-1 .rank-podium-bar {
  height: 70px; background: linear-gradient(180deg, #ffd700, #b8860b);
  color: #1a1a1a;
}
.rank-2 .rank-podium-bar {
  height: 55px; background: linear-gradient(180deg, #c0c0c0, #808080);
  color: #1a1a1a;
}
.rank-3 .rank-podium-bar {
  background: linear-gradient(180deg, #cd7f32, #8b4513);
  color: #fff;
}


/* Ranking list */
.rank-list-wrap { padding: 0 8px; }
.rank-list-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin: 2px 0;
  background: rgba(0,0,0,0.2); border-radius: 8px;
  font-size: 13px;
}
.rank-list-item .rank-num {
  width: 26px; text-align: center; font-weight: bold;
  color: #888; font-size: 12px;
}
.rank-list-item .rank-avatar { font-size: 20px; }
.rank-list-item .rank-nick { flex: 1; color: #ddd; }
.rank-list-item .rank-amount { color: #ffd700; font-weight: bold; }

/* My rank */
.rank-my {
  position: fixed; bottom: 70px; left: 8px; right: 8px;
  background: linear-gradient(0deg, rgba(10,5,3,0.98), rgba(10,5,3,0.9));
  padding: 10px 14px;
  border: 1px solid rgba(139,105,20,0.5);
  border-radius: 12px;
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; z-index: 20;
}
.rank-my .rank-num { width: 26px; text-align: center; font-weight: bold; color: #ffd700; }
.rank-my .rank-avatar { font-size: 20px; }
.rank-my .rank-nick { flex: 1; color: #ffd700; font-weight: bold; }
.rank-my .rank-amount { color: #ffd700; font-weight: bold; }

/* Loading */
.rank-loading { text-align: center; padding: 40px; color: #888; }
/* ========== 右侧世界聊天面板增强（桌面端适配） ========== */
@media (min-width: 768px) {
  /* 世界聊天面板整体放大 */
  #world-chat {
    width: 320px !important;
    max-height: 500px !important;
  }
  #world-chat .panel-header {
    padding: 10px 14px !important;
    font-size: 15px !important;
  }
  #wc-body {
    max-height: 460px !important;
  }
  #wc-messages {
    padding: 8px 10px !important;
    gap: 6px !important;
    min-height: 240px !important;
  }
  .wc-msg {
    font-size: 14px !important;
    gap: 6px !important;
  }
  .wc-msg .wc-name {
    font-size: 13px !important;
  }
  .wc-msg .wc-text {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
  .wc-msg .wc-time {
    font-size: 11px !important;
  }
  .wc-msg.system .wc-text {
    font-size: 12px !important;
  }

  /* 输入区域放大 */
  #wc-input-row {
    padding: 8px 10px !important;
    gap: 6px !important;
  }
  #wc-input {
    font-size: 14px !important;
    padding: 6px 10px !important;
    border-radius: 16px !important;
  }
  #wc-input::placeholder {
    font-size: 13px !important;
  }
  .wc-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 18px !important;
    border-radius: 50% !important;
  }
  .wc-voice-btn {
    padding: 4px 10px !important;
    font-size: 12px !important;
    border-radius: 12px !important;
  }
  .wc-voice-icon {
    font-size: 14px !important;
  }

  /* 表情面板 */
  #wc-emoji-panel {
    max-height: 160px !important;
    padding: 8px 10px !important;
  }
}

/* 小屏手机优化 */
@media (max-width: 400px) {
  .wc-msg {
    font-size: 10px !important;
    gap: 3px !important;
  }
  .wc-msg .wc-name {
    font-size: 9px !important;
  }
  .wc-msg .wc-text {
    font-size: 10px !important;
  }
  #wc-input {
    font-size: 10px !important;
    padding: 3px 6px !important;
  }
  .wc-btn {
    width: 22px !important;
    height: 22px !important;
    font-size: 12px !important;
  }
}

/* ========== Tab 聊天页面消息样式（cp-*） ========== */
.cp-msg {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  font-size: 14px;
  animation: wcFadeIn 0.2s ease;
  padding: 4px 2px;
}
.cp-msg .cp-name {
  color: #d4a843;
  font-weight: bold;
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 13px;
}
.cp-msg .cp-colon {
  color: #d4a843;
  opacity: 0.7;
  margin-right: 4px;
  font-size: 13px;
}
.cp-msg .cp-text {
  color: #ccc;
  word-break: break-word;
  line-height: 1.5;
  font-size: 14px;
}
.cp-msg .cp-time {
  color: #666;
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}
.cp-msg.system { justify-content: center; }
.cp-msg.system .cp-text { color: #888; font-style: italic; font-size: 13px; }
.cp-voice-btn {
  display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px;
  background: rgba(52,152,219,0.2); border: 1px solid rgba(52,152,219,0.4);
  border-radius: 10px; color: #5dade2; font-size: 12px; cursor: pointer;
}
.cp-voice-btn:hover { background: rgba(52,152,219,0.35); }
.cp-voice-icon { font-size: 14px; }

/* ========== 全局响应式字体和间距 ========== */
@media (min-width: 1200px) {
  .my-page-btn { padding: 16px 36px !important; font-size: 18px !important; min-height: 52px !important; }
  .my-page-nick { font-size: 24px !important; }
  .my-page-username { font-size: 14px !important; }
  .my-page-avatar { width: 80px !important; height: 80px !important; font-size: 40px !important; }
  .my-stat-label { font-size: 14px !important; }
  .my-stat-value { font-size: 20px !important; }
  .my-page-card { padding: 36px !important; }
  #page-my { padding: 32px !important; }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .my-page-btn { padding: 14px 28px !important; font-size: 16px !important; min-height: 48px !important; }
  .my-page-nick { font-size: 20px !important; }
  .my-page-avatar { width: 64px !important; height: 64px !important; font-size: 32px !important; }
  .my-page-card { padding: 24px !important; }
  #page-my { padding: 24px !important; }
  /* 聊天消息适配 */
  .cp-msg { gap: 8px; font-size: 15px; padding: 6px 4px; }
  .cp-msg .cp-name { font-size: 13px; }
  .cp-msg .cp-text { font-size: 15px; line-height: 1.6; }
  .cp-msg .cp-time { font-size: 12px; }
  .cp-voice-btn { font-size: 13px; padding: 4px 10px; border-radius: 12px; }
  .cp-voice-icon { font-size: 16px; }
  .chat-page-input { font-size: 15px; padding: 10px 16px; }
  .chat-page-btn { width: 44px; height: 44px; font-size: 20px; }
  .chat-page-input-row { padding: 10px 14px; gap: 8px; }
  .chat-page-emoji-panel { max-height: 200px; padding: 10px 14px; gap: 6px; }
  .chat-page-emoji { font-size: 26px; padding: 6px 8px; }
  .rank-page-header { font-size: 24px; }
  .rank-page-empty .empty-icon { font-size: 80px; }
  .rank-page-empty .empty-text { font-size: 18px; }
}

@media (min-width: 480px) and (max-width: 767px) {
  .my-page-btn { padding: 12px 22px !important; font-size: 15px !important; min-height: 46px !important; }
  .my-page-nick { font-size: 18px !important; }
  .my-page-avatar { width: 56px !important; height: 56px !important; font-size: 28px !important; }
  .my-page-card { padding: 20px !important; }
  #page-my { padding: 20px !important; }
}

@media (max-width: 479px) {
  .my-page-btn { padding: 10px 18px !important; font-size: 14px !important; min-height: 44px !important; }
  .my-page-nick { font-size: 16px !important; }
  .my-page-avatar { width: 48px !important; height: 48px !important; font-size: 24px !important; }
  .my-page-card { padding: 16px !important; }
  #page-my { padding: 16px !important; }
  /* 聊天消息小屏适配 */
  .cp-msg { gap: 4px; font-size: 12px; }
  .cp-msg .cp-name { font-size: 11px; }
  .cp-msg .cp-text { font-size: 12px; }
  .cp-msg .cp-time { font-size: 9px; }
  .chat-page-btn { width: 34px; height: 34px; font-size: 16px; }
  .chat-page-input { font-size: 13px; padding: 7px 10px; }
}

@media (max-width: 350px) {
  .my-page-btn { padding: 8px 14px !important; font-size: 12px !important; min-height: 40px !important; }
  .my-page-nick { font-size: 14px !important; }
  .my-page-avatar { width: 40px !important; height: 40px !important; font-size: 20px !important; }
}

/* my-page-btn 颜色样式 */
.my-page-btn.primary{background:linear-gradient(135deg,#ffd700,#ff8f00);color:#1a1a2e;font-weight:bold;border-radius:12px}
.my-page-btn.primary:hover{opacity:0.9; transform:translateY(-1px)}
.my-page-btn.outline{background:transparent;color:#ffd700;border:2px solid #8b6914;border-radius:12px}
.my-page-btn.outline:hover{border-color:#ffd700; background:rgba(255,215,0,0.08)}

/* ========== 自定义Toast弹窗 ========== */
.poker-toast {
  position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.7); backdrop-filter:blur(4px);
  z-index:10000; display:flex; align-items:center; justify-content:center;
  animation:toastFadeIn 0.25s ease;
}
@keyframes toastFadeIn {
  from{opacity:0;transform:scale(0.9)}
  to{opacity:1;transform:scale(1)}
}
.toast-box {
  background:linear-gradient(135deg,#1a1a2e,#16213e);
  border:2px solid rgba(255,215,0,0.4); border-radius:16px;
  padding:24px 28px; max-width:320px; width:85%;
  text-align:center; box-shadow:0 8px 32px rgba(0,0,0,0.6), 0 0 20px rgba(255,215,0,0.15);
}
.toast-icon { font-size:40px; margin-bottom:10px; display:block; }
.toast-msg {
  color:#e0d5c1; font-size:15px; line-height:1.6;
  margin-bottom:16px; word-break:break-word;
}
.toast-btn {
  background:linear-gradient(135deg,#ffd700,#ff8f00);
  color:#1a1a2e; border:none; padding:10px 40px; border-radius:24px;
  font-size:15px; font-weight:700; cursor:pointer;
  box-shadow:0 4px 12px rgba(255,215,0,0.3);
  transition:all 0.2s;
}
.toast-btn:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(255,215,0,0.4); }
.toast-btn:active { transform:translateY(0); }

/* Hand display in ranking */
.podium-hand-name { font-size: 12px; color: #ff8f00; font-weight: bold; margin: 2px 0; }
/* ranking mini cards */
.rank-mini-cards { display: flex; gap: 2px; flex-wrap: nowrap; justify-content: center; }
.rank-mini-card { width: 24px; height: 34px; border-radius: 3px; background: linear-gradient(145deg,#fff,#e8e0d8); display: inline-block; position: relative; box-shadow: 0 1px 3px rgba(0,0,0,0.3); flex-shrink: 0; }
.rank-mini-card .rmc-rank { position: absolute; top: 2px; left: 3px; font-size: 16px; font-weight: 900; color: #222; line-height: 1; }
.rank-mini-card .rmc-suit { position: absolute; bottom: 2px; right: 3px; font-size: 16px; line-height: 1; color: #222; }
.rank-mini-card.red .rmc-rank,
.rank-mini-card.red .rmc-suit { color: #e53935; }
.rank-list-item .rank-mini-cards { justify-content: flex-start; margin-left: 4px; }
.rank-my .rank-mini-cards { justify-content: flex-start; margin-left: 6px; }
.podium-hand-name { font-size: 14px; color: #ffd700; font-weight: bold; }
.rank-hand-info { color: #ff8f00; font-size: 12px; font-weight: bold; }


/* ===== 输光弹窗 ===== */
#bust-out-overlay {
  display:none; position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.8); z-index:10001;
  align-items:center; justify-content:center;
}
#bust-out-overlay.show { display:flex; }
.bust-out-box {
  background:linear-gradient(180deg,#2d1f0e,#1a1005);
  border:2px solid rgba(139,105,20,0.6); border-radius:16px;
  padding:28px 24px; text-align:center; min-width:280px;
  box-shadow:0 8px 32px rgba(0,0,0,0.6);
}
.bust-out-title { font-size:20px; color:#ff5252; font-weight:bold; margin-bottom:10px; }
.bust-out-msg { font-size:14px; color:#ccc; margin-bottom:20px; }
.bust-out-btns { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.bust-btn {
  padding:10px 20px; border:none; border-radius:10px; font-size:15px; font-weight:bold; cursor:pointer;
}
.bust-btn.buyin { background:linear-gradient(135deg,#4caf50,#2e7d32); color:#fff; }
.bust-btn.spectate { background:linear-gradient(135deg,#2196f3,#1565c0); color:#fff; }
.bust-btn.exit { background:rgba(255,255,255,0.15); color:#aaa; }

/* ===== 买入弹窗 ===== */
#buyin-overlay {
  display:none; position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.8); z-index:10002;
  align-items:center; justify-content:center;
}
#buyin-overlay.show { display:flex; }
.buyin-box {
  background:linear-gradient(180deg,#2d1f0e,#1a1005);
  border:2px solid rgba(139,105,20,0.6); border-radius:16px;
  padding:24px; text-align:center; min-width:280px;
  box-shadow:0 8px 32px rgba(0,0,0,0.6);
}
.buyin-title { font-size:20px; color:#ffd700; font-weight:bold; margin-bottom:8px; }
.buyin-info { font-size:13px; color:#a1887f; margin-bottom:16px; }
.buyin-select-row { display:flex; align-items:center; gap:8px; justify-content:center; margin-bottom:12px; }
.buyin-label { font-size:14px; color:#ccc; }
/* 买入手数按钮 */
.buyin-hand-btn {
  padding:10px 24px; font-size:15px; font-weight:bold; border-radius:10px;
  border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.1);
  color:#888; cursor:pointer; transition:all 0.2s;
}
.buyin-hand-btn:hover { border-color:rgba(255,215,0,0.4); color:#ccc; }
.buyin-hand-btn.active {
  background:linear-gradient(135deg,#ffd700,#ff8f00);
  color:#000; border-color:transparent;
}
.buyin-total { font-size:18px; color:#4caf50; font-weight:bold; margin-bottom:18px; }
.buyin-btns { display:flex; gap:10px; justify-content:center; }
.buyin-confirm {
  padding:10px 24px; border:none; border-radius:10px; font-size:15px; font-weight:bold; cursor:pointer;
  background:linear-gradient(135deg,#ffd700,#ff8f00); color:#000;
}
.buyin-cancel {
  padding:10px 24px; border:none; border-radius:10px; font-size:15px; cursor:pointer;
  background:rgba(255,255,255,0.1); color:#888;
}

/* ===== 确认弹窗 ===== */
#confirm-overlay {
  display:none; position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.7); z-index:200000;
  align-items:center; justify-content:center;
}
#confirm-overlay.show { display:flex; }
.confirm-box {
  background:linear-gradient(180deg,#2d1f0e,#1a1005);
  border:2px solid rgba(139,105,20,0.6); border-radius:16px;
  padding:24px; text-align:center; min-width:260px; max-width:320px;
  box-shadow:0 8px 32px rgba(0,0,0,0.6);
}
.confirm-msg { font-size:16px; color:#e0c080; margin-bottom:20px; line-height:1.5; }
.confirm-btns { display:flex; gap:10px; justify-content:center; }
.confirm-btn {
  padding:10px 28px; border:none; border-radius:10px; font-size:15px; font-weight:bold; cursor:pointer;
  transition:opacity 0.15s;
}
.confirm-btn:hover { opacity:0.85; }
.confirm-btn-yes { background:linear-gradient(135deg,#ffd700,#ff8f00); color:#000; }
.confirm-btn-no { background:rgba(255,255,255,0.1); color:#888; }

/* ===== 计分板弹窗 ===== */
#scoreboard-overlay {
  display:none; position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.8); z-index:10001;
  align-items:center; justify-content:center; overflow-y:auto;
}
#scoreboard-overlay.show { display:flex; }
.scoreboard-box {
  background:linear-gradient(180deg,#2d1f0e,#1a1005);
  border:2px solid rgba(139,105,20,0.6); border-radius:16px;
  padding:20px; max-width:95vw; max-height:80vh; overflow-y:auto;
  box-shadow:0 8px 32px rgba(0,0,0,0.6);
}
.scoreboard-title { font-size:18px; color:#ffd700; font-weight:bold; margin-bottom:12px; text-align:center; }
.scoreboard-table { min-width:400px; }
.scoreboard-table .sb-row {
  display:flex; border-bottom:1px solid rgba(255,255,255,0.06); padding:6px 0;
}
.scoreboard-table .sb-header { font-size:11px; color:#888; font-weight:bold; }
.scoreboard-table .sb-cell {
  flex:1; text-align:center; font-size:13px; color:#ccc; padding:4px 6px;
}
.scoreboard-table .sb-cell.name { color:#ffd700; font-weight:bold; }
.scoreboard-table .sb-cell.pool { border-left:2px solid rgba(255,215,0,0.3); background:rgba(255,215,0,0.04); }
.scoreboard-table .sb-cell.positive { color:#4caf50; }
.scoreboard-table .sb-cell.negative { color:#ff5252; }
.scoreboard-table .sb-cell.zero { color:#888; }
.scoreboard-close {
  display:block; margin:14px auto 0; padding:8px 20px;
  border:none; border-radius:8px; font-size:14px; cursor:pointer;
  background:rgba(255,255,255,0.1); color:#888;
}

/* 买入按钮（info-bar） */
#room-buyin-btn:hover { opacity:0.85; }

/* 买入步骤按钮 */
.buyin-step-btn {
  padding:6px 12px; border:1px solid rgba(255,215,0,0.3);
  border-radius:6px; background:rgba(255,255,255,0.05);
  color:#888; font-size:13px; font-weight:bold; cursor:pointer;
  transition:all 0.2s; min-width:40px; text-align:center;
}
.buyin-step-btn:hover { border-color:#ffd700; color:#ffd700; }
.buyin-step-btn.active {
  background:linear-gradient(135deg,#ffd700,#ff8f00);
  color:#000; border-color:#ffd700;
  box-shadow:0 0 10px rgba(255,215,0,0.3);
}