/* =========================================================
   WePoker 风格牌桌皮肤（青绿色绒布 + 圆形头像 + 筹码胶囊）
   作为覆盖样式在 style.css 之后加载。蜂花品牌的小蜜蜂与金色继续保留。
   ========================================================= */
:root {
  --w-felt-1: #2bb3aa;
  --w-felt-2: #1a9b93;
  --w-felt-3: #0f7e78;
  --w-felt-4: #0a5d59;
  --w-rail: #0d3a40;
  --w-pill: rgba(8, 30, 34, .82);
  --w-pill-border: rgba(255, 255, 255, .12);
  --w-gold: #ffd24a;
  --w-text: #eafcff;
  --w-red: #ff5a5f;
  --w-green: #3ddc84;
}

/* 牌桌：竖向椭圆绒布（与手机同方向），干净无多余浮动装饰 */
.poker-table {
  background: radial-gradient(ellipse at 50% 40%, var(--w-felt-1) 0%, var(--w-felt-2) 45%, var(--w-felt-3) 75%, var(--w-felt-4) 100%);
  border: 8px solid var(--w-rail);
  /* 竖向椭圆：高度大于宽度，圆角按高度方向取整 */
  border-radius: 42% / 50%;
  aspect-ratio: 76 / 100;
  height: 62vh;
  width: auto;
  min-height: 0;
  max-width: 86vw;
  margin: 0 auto;
  box-shadow: inset 0 0 60px rgba(0,0,0,.45), 0 12px 32px rgba(0,0,0,.6);
}
/* 删除桌布斜纹、水印等所有浮动装饰层 */
.poker-table::before,
.poker-table::after {
  content: none !important;
  display: none !important;
}

/* 顶部信息条 */
.table-info {
  background: rgba(0, 20, 24, .45);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--w-text);
  backdrop-filter: blur(6px);
}
.table-info .level-tag,
.table-info .tier-tag {
  background: var(--w-gold) !important;
  color: #1a2b2e !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.table-info .prize-pool { color: var(--w-gold); }

/* 中央底池：飘带 */
.pot-display {
  display: inline-block;
  position: relative;
  padding: 4px 22px;
  background: linear-gradient(180deg, rgba(10,30,34,.85), rgba(6,20,24,.9));
  color: var(--w-gold);
  font-size: 13px;
  letter-spacing: 4px;
  border-radius: 4px;
  border-top: 1px solid rgba(255,210,74,.35);
  border-bottom: 1px solid rgba(255,210,74,.35);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.pot-display::before,
.pot-display::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 14px; height: 18px;
  background: linear-gradient(180deg, rgba(10,30,34,.85), rgba(6,20,24,.9));
  transform: translateY(-50%);
}
.pot-display::before { left: -10px; clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.pot-display::after  { right: -10px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.pot-amount {
  font-size: 22px;
  color: #fff;
  font-weight: 800;
  text-shadow: 0 2px 8px rgba(0,0,0,.7), 0 0 14px rgba(255,210,74,.25);
}

/* 公共牌：贴在底池飘带下方 */
.table-center { gap: 4px; }
.community-row { min-height: 60px; }
.community-cards { gap: 6px; }
.card {
  width: 42px; height: 60px;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffffff, #f1f4f7);
  color: #111;
  box-shadow: 0 3px 8px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.06);
  border: none;
  font-weight: 800;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  padding: 3px 5px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}
.card.red { color: #e23b3b; }
.card .card-corner {
  line-height: 1;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 14px;
}
.card .card-corner.bottom {
  align-self: flex-end;
  transform: rotate(180deg);
}
.card .card-suit {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  line-height: 1;
  text-align: center;
  pointer-events: none;
}
.card.back {
  background: repeating-linear-gradient(45deg, #c8102e, #c8102e 6px, #8f0a20 6px, #8f0a20 12px);
  border: 2px solid var(--w-gold);
}
.card.back::after {
  content: "🐝";
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 20px; color: var(--w-gold);
  background: rgba(0,0,0,.15);
}
.card.winner {
  box-shadow: 0 0 16px 4px var(--w-gold), 0 4px 10px rgba(0,0,0,.55);
  transform: translateY(-4px);
}
.community-cards .card { width: 40px; height: 56px; }
.community-cards .card .card-suit { font-size: 18px; }
.dealer-status { color: rgba(255,255,255,.7); font-size: 11px; }

/* 玩家座位 */
.seat {
  width: 78px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  z-index: 5;
}
.seat .avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  margin: 0;
  background: linear-gradient(135deg, #2c4a55, #0f252b);
  border: 3px solid rgba(255,255,255,.35);
  box-shadow: 0 4px 10px rgba(0,0,0,.55), inset 0 -4px 8px rgba(0,0,0,.35);
  display: grid; place-items: center;
  font-size: 28px;
  position: relative;
  overflow: hidden;
}
.seat .avatar img, .seat .avatar .emoji { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.seat.folded .avatar {
  filter: grayscale(.85) brightness(.55);
  border-color: rgba(255,255,255,.15);
}
.seat.eliminated { opacity: .35; }
.seat.active .avatar {
  border-color: var(--w-gold);
  box-shadow: 0 0 0 3px rgba(255,210,74,.25), 0 0 18px rgba(255,210,74,.85), 0 4px 10px rgba(0,0,0,.55);
}
.seat.winner .avatar {
  border-color: var(--w-gold);
  box-shadow: 0 0 0 3px rgba(255,210,74,.25), 0 0 14px rgba(255,210,74,.7), 0 4px 10px rgba(0,0,0,.55);
}
@keyframes wpk-pulse-gold {
  0%,100% { box-shadow: 0 0 0 3px rgba(255,210,74,.25), 0 0 12px rgba(255,210,74,.6), 0 4px 10px rgba(0,0,0,.55); }
  50%     { box-shadow: 0 0 0 5px rgba(255,210,74,.35), 0 0 24px rgba(255,210,74,1),  0 4px 10px rgba(0,0,0,.55); }
}

/* 名字 */
.seat .name {
  font-size: 12px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
  max-width: 96px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.seat.folded .name { color: rgba(255,255,255,.55); }

/* 筹码胶囊（黑色圆角） */
.seat .chips {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--w-pill);
  border: 1px solid var(--w-pill-border);
  border-radius: 999px;
  padding: 3px 12px;
  min-width: 60px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.55);
  line-height: 1.2;
}
.seat .chips::before {
  content: "🍯 ";
  font-size: 11px;
  opacity: .9;
}

/* 下注金额胶囊 */
.seat .bet-badge {
  margin-top: 2px;
  padding: 3px 10px;
  background: var(--w-pill);
  border: 1px solid rgba(255,210,74,.5);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--w-gold);
  box-shadow: 0 2px 6px rgba(0,0,0,.55);
}

/* 动作标签（弃牌/跟注/全押）—— 圆头像中央覆盖 */
.seat .action-tag {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,.72);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  z-index: 6;
  letter-spacing: 1px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,.55);
}
.seat .action-tag.fold-tag { background: rgba(40,40,40,.85); color: #ddd; }
.seat .action-tag.check-tag { background: rgba(60,80,90,.85); }
.seat .action-tag.call-tag { background: rgba(30,120,200,.9); }
.seat .action-tag.raise-tag { background: linear-gradient(135deg, #ff5a5f, #c8102e); }
.seat .action-tag.allin-tag { background: #000; color: var(--w-gold); border: 1px solid var(--w-gold); }

/* 庄家 D 钮：头像右下小白圆 */
.seat .dealer-btn {
  position: absolute;
  right: -4px; bottom: 6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  color: #111;
  font-size: 12px;
  font-weight: 900;
  display: grid; place-items: center;
  border: 2px solid #1a2b2e;
  box-shadow: 0 2px 5px rgba(0,0,0,.6);
  z-index: 7;
}

/* 赢家飘字 +金额 在头像右上方 */
.seat .win-float {
  position: absolute;
  top: -8px; right: -14px;
  font-weight: 900;
  font-size: 18px;
  color: var(--w-gold);
  text-shadow: 0 2px 6px rgba(0,0,0,.8), 0 0 10px rgba(255,210,74,.6);
  animation: wpk-float-up 2.4s ease-out forwards;
  pointer-events: none;
  z-index: 8;
}
@keyframes wpk-float-up {
  0%   { opacity: 0; transform: translateY(8px) scale(.8); }
  15%  { opacity: 1; transform: translateY(0) scale(1.05); }
  80%  { opacity: 1; transform: translateY(-6px) scale(1); }
  100% { opacity: 0; transform: translateY(-22px) scale(1); }
}

/* 空座位：在 rebuy/lobby 阶段未加入的位置 */
.seat.empty .avatar {
  background: rgba(0,0,0,.25);
  border: 2px dashed rgba(255,255,255,.35);
  color: rgba(255,255,255,.55);
  font-size: 26px;
}
.seat.empty .chips,
.seat.empty .name,
.seat.empty .bet-badge { visibility: hidden; }

/* 赢家秀牌区：放在公共牌下方的正常文档流里，不再悬浮遮挡河牌 */
.showcase {
  position: static;
  transform: none;
  background: rgba(8, 30, 34, .9);
  border: 1px solid rgba(255,210,74,.5);
  border-radius: 12px;
  padding: 6px 12px;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0,0,0,.6);
  z-index: 9;
  animation: wpk-showcase-in .35s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes wpk-showcase-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.showcase-name { color: #fff; font-size: 12px; font-weight: 700; }
.showcase-cards { display: flex; gap: 3px; justify-content: center; margin: 3px 0; }
.showcase-cards .card { width: 28px; height: 40px; padding: 2px 3px; font-size: 11px; }
.showcase-cards .card .card-suit { font-size: 12px; }
.showcase-hand { color: var(--w-gold); font-size: 11px; }
.showcase-amount { color: var(--w-gold); font-weight: 800; font-size: 13px; margin-top: 2px; }

/* HUD 风格标签：弱化，放在名字旁小药丸 */
.hud-row {
  display: inline-flex;
  gap: 3px;
  justify-content: center;
  margin-top: 1px;
}
.hud-tag {
  font-size: 9px !important;
  padding: 1px 6px !important;
  border-radius: 8px;
  background: rgba(0,0,0,.55);
  color: #cfeef0;
  border: 1px solid rgba(255,255,255,.1);
}
.hud-tag.loose  { background: rgba(255,90,95,.3);  color: #ffd2d4; border-color: rgba(255,90,95,.5); }
.hud-tag.aggro  { background: rgba(255,160,50,.3); color: #ffe1b5; border-color: rgba(255,160,50,.5); }
.hud-tag.station{ background: rgba(80,160,255,.3); color: #cfe6ff; border-color: rgba(80,160,255,.5); }
.hud-tag.tight  { background: rgba(120,200,140,.3);color: #d4f5dc; border-color: rgba(120,200,140,.5); }
.hud-tag.nit    { background: rgba(120,120,120,.3);color: #ddd; border-color: rgba(255,255,255,.15); }
.hud-stats { font-size: 9px; color: rgba(255,255,255,.6); padding: 1px 4px; }

/* 自己底部手牌 */
.player-hand {
  margin: 10px 0 4px;
}
.player-hand .card {
  width: 58px; height: 82px;
  font-size: 18px;
  border-radius: 8px;
}
.player-hand .card .card-suit { font-size: 28px; }
/* 中央公共牌上的花色略小，避免溢出 */
.community-cards .card .card-suit { font-size: 17px; }
/* 小牌（座位/秀牌）：花色居中显示，不使用定位 */
.seat-cards .card,
.showcase-cards .card {
  justify-content: center;
  align-items: center;
  padding: 1px 2px;
}
.seat-cards .card .card-corner,
.showcase-cards .card .card-corner { display: none; }
.seat-cards .card .card-suit,
.showcase-cards .card .card-suit {
  position: static;
  transform: none;
  font-size: 12px;
  line-height: 1;
}
.player-hand-label {
  font-size: 13px;
  color: rgba(255,255,255,.85);
}
.win-rate {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.15);
}
.win-rate.good { color: #6ef0a3; border-color: rgba(110,240,163,.5); }
.win-rate.mid  { color: #ffd24a; border-color: rgba(255,210,74,.5); }
.win-rate.bad  { color: #ff7a7a; border-color: rgba(255,122,122,.5); }

/* 操作栏：深色圆角 */
.action-bar {
  background: linear-gradient(180deg, rgba(10,30,34,.85), rgba(4,15,18,.95));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 10px 12px;
  max-width: 760px;
  box-shadow: 0 -4px 18px rgba(0,0,0,.5);
}
.action-bar button {
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 10px 16px;
  box-shadow: 0 3px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-fold  { background: linear-gradient(180deg, #6a6a6a, #3d3d3d); }
.btn-check { background: linear-gradient(180deg, #5a7680, #37505a); }
.btn-call  { background: linear-gradient(180deg, #2a90ff, #0a5fbf); }
.btn-raise { background: linear-gradient(180deg, #ff7a3d, #d6371a); }
.btn-allin { background: linear-gradient(180deg, #ffb02e, #b5680f); color: #1a1100; }
.raise-amount {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,210,74,.5);
  color: var(--w-gold);
  border-radius: 999px;
}
.raise-presets button {
  background: rgba(255,210,74,.15);
  border: 1px solid rgba(255,210,74,.5);
  color: var(--w-gold);
  border-radius: 999px;
  padding: 5px 10px;
  box-shadow: none;
}

/* 倒计时圆环 */
.countdown-ring {
  position: absolute;
  top: -18px; left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}
.buy-time-btn {
  position: absolute;
  bottom: -26px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #ffd24a, #c79a1e);
  color: #1a1100;
  border: none;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.buy-time-btn.disabled { opacity: .5; }

/* 日志区 */
.game-log {
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  color: rgba(255,255,255,.7);
}

/* 手机端：竖向屏幕时把桌子改成更扁的横向椭圆 */
@media (max-width: 640px) {
  .poker-table {
    border-width: 7px;
    border-radius: 42% / 50%;
    aspect-ratio: 72 / 100;
    height: 56vh;
    width: auto;
    min-height: 0;
    max-width: 88vw;
  }
  .table-wrap { padding: 6px; }
  .table-info { font-size: 11px; padding: 6px 8px; }
  .seat { width: 72px; }
  .seat .avatar { width: 42px; height: 42px; font-size: 20px; border-width: 2px; }
  .seat .name { font-size: 10px; max-width: 72px; }
  .seat .chips { font-size: 11px; padding: 2px 8px; min-width: 48px; }
  .seat .bet-badge { font-size: 10px; padding: 2px 7px; }
  .seat .action-tag { font-size: 10px; padding: 2px 7px; }
  .seat .dealer-btn { width: 18px; height: 18px; font-size: 10px; right: -2px; bottom: 4px; }
  .seat .win-float { font-size: 15px; right: -6px; }
  .community-cards .card { width: 32px; height: 46px; }
  .card { font-size: 12px; padding: 2px 4px; }
  .card .card-suit { font-size: 14px; }
  .pot-amount { font-size: 17px; }
  .pot-display { font-size: 11px; padding: 3px 16px; letter-spacing: 3px; }
  .player-hand .card { width: 48px; height: 68px; font-size: 15px; }
  .player-hand .card .card-suit { font-size: 22px; }
  .player-hand-label { font-size: 11px; }
  .action-bar { padding: 8px; gap: 6px; }
  .action-bar button { padding: 8px 10px; font-size: 12px; min-width: 56px; }
  .raise-control input[type=range] { width: 90px; }
  .raise-amount { width: 70px; font-size: 12px; padding: 4px 6px; }
  .showcase { padding: 4px 8px; }
  .showcase-cards .card { width: 24px; height: 34px; }
  .showcase-name, .showcase-hand, .showcase-amount { font-size: 10px; }
}

/* 桌面端更紧凑的 9 人桌 */
@media (min-width: 900px) {
  .poker-table { height: 64vh; max-width: 520px; }
}

/* 对手牌桌上的小牌条：非摊牌阶段不显示（WePoker 风格）；
   摊牌/赢家时浮在头像上方 */
.seat-cards {
  position: absolute;
  top: -22px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 2px;
  z-index: 6;
}
.seat-cards .card {
  width: 22px; height: 30px; padding: 1px 2px; font-size: 9px;
  box-shadow: 0 2px 4px rgba(0,0,0,.5);
}
.seat-cards .card .card-suit { font-size: 9px; }
.seat-cards .card.back::after { font-size: 12px; }