/* bbull.css — 抢庄牛牛（BULL 13）
   2026-10-26 01:0x 整体重做视觉，对齐德州那套：
     · 底色用德州的近黑 #07100C，不再是自己一块亮绿
     · 金色统一用德州的 --gold-2 #EFCB8B / --gold #D8A657
     · **座位全部去掉方框** —— 原来是 25 个半透明小方块，每个都带 border-radius + border，
       一堆框叠在屏幕上，既不高级也看不清人。现在座位只有：名字 / 牌 / 水位，
       靠位置和字色区分「我自己」和「庄家」，不靠框
     · 顶栏、操作区去掉黑色横条，直接压在桌面上
   只作用于 #bbullRoot 内部，一个选择器都不碰德州（.tb-*）。
   ========================================================= */

#bbullRoot{
  position:fixed; inset:0; z-index:60;
  background:#07100C;
  color:#F5F2EA;
  font-family:-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
/* 中心极淡的一层暖光，代替原来那整块绿色渐变 —— 有层次但不像贴纸 */
.bb-felt{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 78% 52% at 50% 40%, rgba(239,203,139,.055) 0%, rgba(239,203,139,0) 62%),
    radial-gradient(ellipse 120% 80% at 50% 120%, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 60%);
}

/* ---------------- 顶栏 ---------------- */
.bb-top{
  position:absolute; top:0; left:0; right:0; height:calc(46px + env(safe-area-inset-top,0px));
  display:flex; align-items:center; gap:10px;
  padding:env(safe-area-inset-top,0px) 14px 0;
  z-index:6; pointer-events:none;
}
.bb-back{
  pointer-events:auto; background:none; border:0; padding:4px 6px; cursor:pointer;
  color:rgba(245,242,234,.72); font-size:21px; line-height:1;
}
.bb-brand{font-size:15px; font-weight:650; letter-spacing:.4px; color:#F5F2EA}
.bb-brand i{
  display:block; font-style:normal; font-size:8.5px; font-weight:600;
  letter-spacing:2.6px; color:rgba(239,203,139,.55); margin-top:1px;
}
.bb-mode{
  margin-left:auto; font-size:11px; color:rgba(245,242,234,.5);
  letter-spacing:.2px; white-space:nowrap;
}

/* ---------------- 中央：倒计时 + 阶段 + 庄家 ---------------- */
.bb-center{
  position:absolute; top:calc(56px + env(safe-area-inset-top,0px)); left:50%;
  transform:translateX(-50%); text-align:center; z-index:5; pointer-events:none;
}
.bb-cd{
  font-size:26px; font-weight:700; line-height:1;
  color:#EFCB8B; text-shadow:0 2px 8px rgba(0,0,0,.6);
  font-variant-numeric:tabular-nums;
}
.bb-cd-txt{
  font-size:11px; color:rgba(245,242,234,.52); margin-top:5px; letter-spacing:.4px;
}
/* 庄家：一行字，不加胶囊不加底 */
.bb-banker-tag{
  margin-top:6px; font-size:11px; color:#EFCB8B; letter-spacing:.3px;
}

/* ---------------- 我的手牌 ---------------- */
.bb-myhand{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:calc(128px + env(safe-area-inset-bottom,0px));
  z-index:5; text-align:center; pointer-events:none;
}
.bb-myhand-lbl{
  font-size:10px; color:rgba(245,242,234,.35); letter-spacing:1.4px; margin-bottom:7px;
}
.bb-myhand-cards{display:flex; gap:6px; justify-content:center}
/* 我的注：跟着手牌下面一行小字，不用胶囊 */
.bb-mine{
  display:inline-block; margin-top:7px; font-size:11px;
  color:rgba(239,203,139,.85); letter-spacing:.3px;
}

/* ---------------- 25 人座位区 ----------------
   没有人在这里加底、加边、加圆角容器。座位就是「名字 + 牌 + 水位」三行。
   自己：名字金色；庄家：名字前面一个金色圆点；这两个都靠颜色，不靠框。 */
.bb-grid{
  position:absolute; top:calc(122px + env(safe-area-inset-top,0px));
  left:6px; right:6px;
  bottom:calc(218px + env(safe-area-inset-bottom,0px));
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:2px 4px; align-content:center;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  z-index:3; padding:2px 0;
}
.bb-grid::-webkit-scrollbar{width:0}

.bb-seat{
  position:relative; min-height:74px;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding:3px 1px; text-align:center;
  /* 注意：这里一个 background / border 都不能有 —— 25 个方框就是原来的病根 */
}
.bb-seat-tag{
  position:absolute; top:2px; left:50%; transform:translateX(-50%);
  font-size:9px; color:rgba(245,242,234,.28); letter-spacing:.5px;
}
.bb-seat-name{
  font-size:11px; font-weight:550; color:rgba(245,242,234,.82);
  max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  line-height:1.25;
}
/* 自己：金色名字 */
.bb-seat.bb-me .bb-seat-name{color:#EFCB8B; font-weight:650}
/* 庄家：名字前一个金点（用伪元素，不新增节点） */
.bb-seat.bb-banker .bb-seat-name::before{
  content:''; display:inline-block; width:4px; height:4px; border-radius:50%;
  background:#EFCB8B; margin-right:4px; vertical-align:middle;
}
.bb-seat-chips{
  font-size:10.5px; color:rgba(239,203,139,.62); line-height:1.3;
  font-variant-numeric:tabular-nums;
}
.bb-seat-cards{display:flex; gap:1px; justify-content:center; margin-top:3px; min-height:19px}
.bb-seat-foot{
  font-size:9.5px; line-height:1.5; margin-top:2px; min-height:14px;
  display:flex; align-items:center; gap:4px; justify-content:center; flex-wrap:wrap;
}
/* 牌型（牛九 / 没牛…）：金色小字，这是座位上最该看清的东西 */
.bb-seal{
  color:#EFCB8B; font-weight:650; letter-spacing:.2px;
}
.bb-seal i{font-style:normal; opacity:.62; margin-left:2px}
.bb-bet{color:rgba(245,242,234,.62); font-variant-numeric:tabular-nums}
.bb-grab{color:rgba(224,87,76,.9); font-weight:600}

/* ---------------- 扑克牌 ----------------
   材质跟德州 .pk 同一套：暖白渐变 + 金色细边 + Georgia 衬线。
   原来是一块纯白平涂，放在近黑底上像贴上去的。 */
.bb-card{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  width:19px; height:27px; flex:none;
  border-radius:2.4px; border:1px solid #C9A227;
  background:linear-gradient(163deg,#FFFEF8 0%,#FBF4E2 46%,#F2E6CB 100%);
  color:#1E1A14; font-family:Georgia,'Times New Roman',serif;
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.85), 0 1px 3px rgba(0,0,0,.5);
  overflow:hidden;
}
.bb-card .bb-r{font-size:10px; font-weight:700; line-height:1; letter-spacing:-.3px}
.bb-card .bb-s{font-size:9px; line-height:1; margin-top:.5px}
.bb-card.bb-red{color:#C63B2E}
/* 牌背：跟德州一致的红绒 + 金框，不用原来那套蓝条纹 */
.bb-card.bb-back{
  background:
    repeating-linear-gradient(45deg, rgba(239,203,139,.16) 0 1.5px, rgba(239,203,139,0) 1.5px 4px),
    linear-gradient(160deg,#5A1A23,#38101A 60%,#2A0C14);
  border-color:#8A6512;
}
/* 我的手牌用大一号 */
.bb-myhand-cards .bb-card{width:42px; height:59px; border-radius:5px}
.bb-myhand-cards .bb-card .bb-r{font-size:20px}
.bb-myhand-cards .bb-card .bb-s{font-size:15px; margin-top:1px}

/* ---------------- 操作区 ----------------
   不再是一条黑底横条：直接压在桌面上，靠按钮自己撑起层次。 */
.bb-actions{
  position:absolute; left:0; right:0; bottom:0;
  padding:10px 14px calc(14px + env(safe-area-inset-bottom,0px));
  z-index:7; text-align:center;
  background:linear-gradient(to top, rgba(7,16,12,.92) 0%, rgba(7,16,12,.72) 45%, rgba(7,16,12,0) 100%);
}
.bb-chips{display:flex; gap:7px; justify-content:center; margin-bottom:9px; flex-wrap:wrap}
/* 倍数按钮：没选是描边，选了才填金 —— 一眼能看出当前选了哪个 */
.bb-chip{
  border:1px solid rgba(239,203,139,.32); border-radius:16px;
  padding:8px 15px; background:transparent;
  color:rgba(245,242,234,.82); font-size:13.5px; font-weight:600;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background .12s, color .12s, border-color .12s;
}
.bb-chip.on{
  background:#EFCB8B; border-color:#EFCB8B; color:#3A2506; font-weight:700;
}
.bb-chip:active{transform:scale(.97)}
.bb-btns{display:flex; gap:9px; justify-content:center}
.bb-btn{
  border:0; border-radius:18px; padding:11px 24px;
  background:#EFCB8B; color:#3A2506; font-size:15px; font-weight:700;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.bb-btn:active{transform:scale(.98)}
/* 次要按钮：描边，不填色 */
.bb-btn.bb-soft{
  background:transparent; color:rgba(245,242,234,.78);
  box-shadow:inset 0 0 0 1px rgba(245,242,234,.22); font-weight:600;
}
.bb-tip{
  font-size:12px; color:rgba(245,242,234,.55); margin-bottom:10px; letter-spacing:.2px;
}

/* ---------------- 结算 ----------------
   原来是一个 42px 大字压在屏幕正中间，正好盖住五张公牌 —— 输赢看得到、牌看不到。
   现在挪到手牌上方，26px，一行。 */
.bb-result{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:calc(102px + env(safe-area-inset-bottom,0px));
  font-size:26px; font-weight:750; z-index:6;
  letter-spacing:.5px; text-shadow:0 2px 10px rgba(0,0,0,.7);
  font-variant-numeric:tabular-nums;
}
.bb-result.bb-win{color:#EFCB8B}
.bb-result.bb-lose{color:rgba(245,242,234,.45)}

/* ---------------- 等待 / 空态 ---------------- */
.bb-waitbox{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; z-index:5; padding:0 32px;
}
.bb-wait{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:rgba(245,242,234,.4); font-size:13px; z-index:5;
}
/* 房号：大号金色，等号数字用等宽，方便念给别人听 */
.bb-code{
  font-size:30px; font-weight:750; letter-spacing:5px; color:#EFCB8B;
  font-variant-numeric:tabular-nums; text-shadow:0 2px 12px rgba(239,203,139,.16);
}
.bb-waitline{
  font-size:12.5px; color:rgba(245,242,234,.5); line-height:1.7; text-align:center;
}
/* 等待态的模式标题 */
.bb-mode-t{font-size:13px; color:rgba(239,203,139,.8); letter-spacing:.5px}

/* ---------------- 窄屏兜底（≤360 宽） ---------------- */
@media (max-width:360px){
  .bb-grid{grid-template-columns:repeat(5,1fr); gap:1px 2px}
  .bb-card{width:17px; height:24px}
  .bb-myhand-cards .bb-card{width:38px; height:54px}
  .bb-seat-name{font-size:10px}
}
/* 矮屏（SE 之类，高≤700）：把座位区上移、手牌下压，保证按钮不被挤出去 */
@media (max-height:700px){
  .bb-grid{top:calc(112px + env(safe-area-inset-top,0px)); bottom:calc(196px + env(safe-area-inset-bottom,0px))}
  .bb-myhand{bottom:calc(112px + env(safe-area-inset-bottom,0px))}
  .bb-myhand-cards .bb-card{width:36px; height:51px}
  .bb-result{bottom:calc(174px + env(safe-area-inset-bottom,0px))}
}

/* 结算数字：赢金输灰，比倒计时大一号（它是这一刻的主角） */
.bb-cd.bb-net{font-size:34px; letter-spacing:.5px}
.bb-cd.bb-net.bb-win{color:#EFCB8B; text-shadow:0 2px 14px rgba(239,203,139,.22)}
.bb-cd.bb-net.bb-lose{color:rgba(245,242,234,.5)}