/* ============================================================
   多宝游戏 H5 · 设计系统
   基础 token 继承自 dn-h5（保持品牌一致），扩展多宝游戏语义色
   ============================================================ */

:root {
  /* --- 表面 --- */
  --bg: #0b1220;
  --bg2: #0f172a;
  --card: #17223a;
  --card2: #1e2c4a;
  --line: #2b3a5c;

  /* --- 文字 --- */
  --txt: #e6edf7;
  --sub: #8ba0bd;
  --dim: #5b6c88;

  /* --- 品牌 --- */
  --accent: #facc15;          /* 金黄主色（沿用 dn-h5） */
  --accent-ink: #1a1202;

  /* --- 语义 --- */
  --ok: #34d399;
  --err: #f87171;
  --warn: #fbbf24;
  --info: #38bdf8;
  --purple: #a78bfa;

  /* --- 盘口语义：国内习惯「红涨绿跌」，与桌面端一致 --- */
  --up: #ff4d4f;              /* 盈利 */
  --down: #16c784;            /* 亏损 */

  /* --- 爆点色阶（与桌面端 GetCrashColor 逐值一致） --- */
  --crash-1: #0b57d0;         /* >= 1.00x  蓝 */
  --crash-2: #c00000;         /* >= 2.00x  红 */
  --crash-5: #ff8c00;         /* >= 5.00x  橙 */
  --crash-10: #de25d1;        /* >= 10.0x  品红 */
  --crash-50: #800000;        /* >= 50.0x  深红 */
  --crash-0: #6b7280;         /* < 1.00x   灰 */

  /* --- 状态 --- */
  --st-betting: #fb923c;      /* 下注中 */
  --st-flying: #60a5fa;       /* 飞行中 */
  --st-crashed: #ef4444;      /* 已爆炸 */

  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 6px 20px rgba(0, 0, 0, .35);
  --bar-h: 56px;
  --max-w: 480px;
  --ccell-w: 48px;            /* 历史爆点单元格宽度（配合横向滑动） */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  background: radial-gradient(1200px 600px at 50% -10%, #14213c 0%, var(--bg) 55%) no-repeat, var(--bg);
  color: var(--txt);
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
#root {
  min-height: 100vh;
  padding: env(safe-area-inset-top) 12px calc(var(--bar-h) + 24px + env(safe-area-inset-bottom));
}
body[data-shell="off"] #root { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.hidden { display: none !important; }
button { font-family: inherit; }
.muted { color: var(--sub); }
.small { font-size: 12.5px; }
.tiny { font-size: 11.5px; }
.mono { font-family: ui-monospace, Consolas, "Courier New", monospace; }
.num { font-variant-numeric: tabular-nums; }
.up { color: var(--up); }
.down { color: var(--down); }
.center { text-align: center; }
.mt8 { margin-top: 8px; }
.mt12 { margin-top: 12px; }
.mt16 { margin-top: 16px; }

/* ---------------- 顶部栏 ---------------- */
/* 注意：这里刻意**不用 backdrop-filter** —— 部分安卓机在无 GPU 合成时会把
   模糊层渲染成一块纯黑；页面本来就不需要毛玻璃，去掉它最稳。 */
.app-header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 8px;
  height: 48px; padding: 6px 10px;
  background: var(--bg2);
  border-bottom: 1px solid var(--line);
}
.app-header.hidden { display: none !important; }
.app-title { flex: 1; font-weight: 700; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-right { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  width: 34px; height: 34px; border: 0; border-radius: 10px;
  background: var(--card); color: var(--txt); font-size: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.icon-btn:active { filter: brightness(1.2); }

/* ---------------- 底部导航 ---------------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; height: calc(var(--bar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--bg2);
  border-top: 1px solid var(--line);
}
@media (min-width: 520px) {
  .tabbar { left: 50%; right: auto; width: var(--max-w); transform: translateX(-50%); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
  .app-header { left: 50%; transform: translateX(-50%); width: var(--max-w); }
  #root { max-width: var(--max-w); margin: 0 auto; }
}
.tab {
  flex: 1; border: 0; background: transparent; color: var(--sub);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 11px; padding: 0;
}
.tab .tab-ico { font-size: 19px; line-height: 1; }
.tab.on { color: var(--accent); font-weight: 700; }
.tab:active { background: rgba(255, 255, 255, .04); }

/* ---------------- 卡片与排版 ---------------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}
.card.flat { box-shadow: none; background: var(--bg2); }
.h2 { font-size: 15px; font-weight: 700; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.h2::before { content: ''; width: 4px; height: 15px; border-radius: 2px; background: var(--accent); }
.h2 .h2-sub { font-weight: 400; font-size: 12px; color: var(--sub); margin-left: auto; }
.row { display: flex; align-items: center; gap: 8px; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.divider { height: 1px; background: var(--line); margin: 12px 0; }
.kv { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; gap: 10px; }
.kv > span:first-child { color: var(--sub); font-size: 13px; flex: none; }
.kv > span:last-child { text-align: right; min-width: 0; word-break: break-all; }
.empty { color: var(--dim); text-align: center; padding: 28px 10px; font-size: 13px; }

/* ---------------- 按钮 ---------------- */
.btn {
  border: 1px solid var(--line); background: var(--card2); color: var(--txt);
  border-radius: var(--radius-sm); padding: 10px 14px; font-size: 14px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn:active { filter: brightness(1.18); }
.btn:disabled { opacity: .45; }
.btn.primary { background: linear-gradient(135deg, #fde047, var(--accent)); color: var(--accent-ink); border-color: transparent; }
.btn.ok { background: rgba(52, 211, 153, .16); color: var(--ok); border-color: rgba(52, 211, 153, .45); }
.btn.danger { background: rgba(248, 113, 113, .16); color: var(--err); border-color: rgba(248, 113, 113, .45); }
.btn.ghost { background: transparent; }
.btn.sm { padding: 7px 11px; font-size: 12.5px; border-radius: 9px; }
.btn.block { width: 100%; }
.btn.lg { padding: 14px; font-size: 16px; }

/* ---------------- 表单 ---------------- */
.field { margin-bottom: 12px; }
.field > label { display: block; font-size: 12.5px; color: var(--sub); margin-bottom: 6px; }
.field input, .field select {
  width: 100%; padding: 12px; font-size: 15px;
  background: var(--bg2); color: var(--txt);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: inherit;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); }
.field input::placeholder { color: var(--dim); }
input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }

/* ---------------- 胶囊 / 徽标 ---------------- */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
  border: 1px solid transparent;
}
.pill.ok { background: rgba(52, 211, 153, .15); color: var(--ok); border-color: rgba(52, 211, 153, .4); }
.pill.err { background: rgba(248, 113, 113, .15); color: var(--err); border-color: rgba(248, 113, 113, .4); }
.pill.warn { background: rgba(251, 191, 36, .15); color: var(--warn); border-color: rgba(251, 191, 36, .4); }
.pill.info { background: rgba(56, 189, 248, .15); color: var(--info); border-color: rgba(56, 189, 248, .4); }
.pill.dim { background: rgba(139, 160, 189, .12); color: var(--sub); border-color: var(--line); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--line); background: var(--bg2); color: var(--sub);
  border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 600;
}
.chip.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; }

/* ---------------- 登录页 ---------------- */
.login-wrap { padding-top: 24px; }
.login-brand { text-align: center; margin-bottom: 20px; }
.login-brand h1 {
  margin: 0 0 6px; font-size: 26px; font-weight: 800; letter-spacing: .5px;
  background: linear-gradient(135deg, #fde047, #f59e0b 60%, #facc15);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.login-brand p { margin: 0; color: var(--sub); font-size: 13px; }
.auth-hint { min-height: 20px; font-size: 13px; margin-bottom: 10px; color: var(--sub); }
.auth-hint.good { color: var(--ok); }
.auth-hint.bad { color: var(--err); }
.auth-hint.wait { color: var(--warn); }
.gate-line { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sub); }
.gate-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); display: inline-block; }
.gate-dot.on { background: var(--ok); box-shadow: 0 0 7px var(--ok); }

/* ---------------- 大厅 ---------------- */
.hero {
  border-radius: var(--radius); padding: 14px; margin-bottom: 12px;
  background: linear-gradient(135deg, #17223a, #101b31);
  border: 1px solid var(--line);
}
.hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.hero-label { font-size: 12px; color: var(--sub); }
.hero-balance { font-size: 30px; font-weight: 800; color: var(--accent); letter-spacing: .5px; line-height: 1.15; }
.hero-pnl { font-size: 14px; font-weight: 700; }
.credit-box { text-align: right; }
.credit-val { font-size: 22px; font-weight: 800; }
.credit-val.ok { color: var(--ok); }
.credit-val.warn { color: var(--warn); }
.credit-val.bad { color: var(--err); }

.game-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.game-card {
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px; text-align: left; color: var(--txt);
  display: flex; flex-direction: column; gap: 6px; min-height: 118px;
}
.game-card:active { filter: brightness(1.15); }
.game-card .g-emoji { font-size: 22px; line-height: 1; }
.game-card .g-name { font-size: 15px; font-weight: 700; }
.game-card .g-meta { font-size: 11.5px; color: var(--sub); }
.game-card .g-tag {
  position: absolute; top: 10px; right: 10px;
  font-size: 10.5px; padding: 2px 7px; border-radius: 999px;
  background: rgba(139, 160, 189, .14); color: var(--sub);
}
.game-card::after {
  content: ''; position: absolute; right: -30px; bottom: -30px;
  width: 90px; height: 90px; border-radius: 50%;
  background: radial-gradient(circle, rgba(250, 204, 21, .13), transparent 70%);
}

/* ---------------- 状态点 ---------------- */
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--dim); }
.dot.on { background: var(--ok); animation: pulse 1.6s ease-in-out infinite; }
.dot.warn { background: var(--warn); }
.dot.err { background: var(--err); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------------- Toast / Modal ---------------- */
#toast-wrap {
  position: fixed; top: calc(env(safe-area-inset-top) + 14px); left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  z-index: 99; pointer-events: none; padding: 0 12px;
}
.toast {
  max-width: var(--max-w);
  background: rgba(23, 34, 58, .97); color: var(--txt);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 16px; font-size: 13.5px; box-shadow: var(--shadow);
  animation: rise .2s ease-out;
}
.toast.ok { border-color: rgba(52, 211, 153, .55); color: var(--ok); }
.toast.err { border-color: rgba(248, 113, 113, .55); color: var(--err); }
@keyframes rise { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }

#modal-root .mask {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .55);
  z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px;
}
#modal-root .sheet {
  width: 100%; max-width: calc(var(--max-w) - 40px);
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow);
}
#modal-root .sheet h3 { margin: 0 0 10px; font-size: 16px; }
.loading-ico {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--accent);
  animation: spin .8s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------- 里程碑占位 ---------------- */
.wip {
  border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 26px 16px; text-align: center; color: var(--sub); font-size: 13px;
}
.wip .wip-title { font-size: 15px; color: var(--txt); font-weight: 700; margin-bottom: 6px; }

/* ============================================================
   实况页（M5）
   ============================================================ */

/* ---------------- 状态盘 ---------------- */
.board {
  position: relative; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: linear-gradient(160deg, #17223a, #0e1830 70%);
  padding: 12px 14px 10px; margin-bottom: 12px;
  box-shadow: var(--shadow);
}
.board-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.board-mid { position: relative; display: flex; align-items: center; justify-content: center; padding: 6px 0 2px; }
.ring { width: 176px; height: 176px; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: rgba(43, 58, 92, .8); stroke-width: 7; }
.ring-fg {
  fill: none; stroke: var(--st-betting); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 326.7; stroke-dashoffset: 245;
  transition: stroke .3s, stroke-dashoffset .18s linear;
}
.board-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.mult {
  font-size: 42px; font-weight: 800; line-height: 1.05; letter-spacing: .5px;
  color: var(--txt);
  font-variant-numeric: tabular-nums;
  will-change: transform, color;
  transition: color .15s;
}
.mult.hot { color: var(--ok); text-shadow: 0 0 22px rgba(52, 211, 153, .45); }
.mult.crashed { color: var(--st-crashed); }
.mult.preparing { font-size: 26px; color: var(--st-betting); }
.mult-sub { font-size: 12.5px; color: var(--sub); margin-top: 2px; }
.board-foot {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 12px; color: var(--sub); padding-top: 8px;
  border-top: 1px solid var(--line);
}
.board-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }

/* ---------------- 分组切换 ---------------- */
.seg {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: 11px; padding: 4px; margin-bottom: 12px;
}
.seg-btn {
  flex: 0 0 auto; border: 0; background: transparent; color: var(--sub);
  padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 700;
}
.seg-btn.on { background: var(--accent); color: var(--accent-ink); }

/* ---------------- 玩家实况 ---------------- */
.betlist { max-height: 320px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.bethead, .betrow {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 58px 56px 56px 62px;
  gap: 4px; align-items: center;
  font-size: 12px; padding: 5px 2px;
  font-variant-numeric: tabular-nums;
}
.bethead { color: var(--dim); font-size: 11px; position: sticky; top: 0; background: var(--card); z-index: 1; border-bottom: 1px solid var(--line); }
.betrow { border-bottom: 1px solid rgba(43, 58, 92, .5); }
.betrow.mine { background: rgba(250, 204, 21, .08); box-shadow: inset 3px 0 0 var(--accent); }
.betrow .bi { color: var(--dim); text-align: center; }
.betrow .bu { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--txt); }
.betrow .ba { text-align: right; color: var(--txt); }
.betrow .bh, .betrow .bj, .betrow .bp { text-align: right; color: var(--sub); }
.betrow .bp { color: var(--up); }
.metag { font-style: normal; font-size: 10px; background: var(--accent); color: var(--accent-ink); border-radius: 4px; padding: 0 4px; margin-left: 4px; }

/* ---------------- 历史爆点网格 ---------------- */
.crash-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px;
}
.ccell {
  min-height: 26px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums;
  background: var(--crash-0);
  contain: layout paint;
}
.ccell.empty { background: rgba(43, 58, 92, .35); }

/* ---------------- 我的记录 ---------------- */
.reclist { max-height: 360px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.recrow {
  border: 1px solid var(--line); border-radius: 11px;
  padding: 8px 10px; margin-bottom: 7px; background: var(--bg2);
}
.rr-top { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.rr-mid { margin-top: 3px; line-height: 1.5; }
.rr-bot { margin-top: 2px; }

/* ---------------- 游戏卡片选中态 ---------------- */
.game-card.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }

/* ============================================================
   AI 页（M7）
   ============================================================ */

.pgroup {
  font-size: 11.5px; color: var(--dim); font-weight: 700;
  letter-spacing: .5px; margin: 12px 0 6px;
}
.pgroup:first-of-type { margin-top: 4px; }
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pgrid label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11.5px; color: var(--sub);
}
.pgrid input {
  width: 100%; padding: 9px 10px; font-size: 14px;
  background: var(--bg2); color: var(--txt);
  border: 1px solid var(--line); border-radius: 9px;
  font-variant-numeric: tabular-nums;
}
.pgrid input:focus { outline: none; border-color: var(--accent); }

.statusbox {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 11px;
  padding: 10px 12px; font-size: 13px; line-height: 1.5;
  font-variant-numeric: tabular-nums; word-break: break-all;
}
.sgrid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px;
}
.sgrid > div {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 9px;
  padding: 7px 6px; text-align: center; min-width: 0;
}
.sgrid span { display: block; font-size: 10.5px; color: var(--dim); }
.sgrid b {
  display: block; font-size: 13.5px; margin-top: 2px;
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chartwrap { margin-top: 10px; }
.chartwrap canvas { width: 100%; height: 120px; display: block; }

.logbox {
  background: #060b16; border: 1px solid var(--line); border-radius: 11px;
  padding: 8px 10px; height: 260px; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-family: ui-monospace, Consolas, "Courier New", monospace;
  font-size: 11.5px; line-height: 1.65;
}
.lgrow { display: flex; gap: 8px; }
.lgt { color: var(--dim); flex: none; }
.lgm { flex: 1; min-width: 0; word-break: break-word; color: var(--txt); }
.lg-win .lgm { color: var(--up); }
.lg-bet .lgm { color: var(--accent); }
.lg-lose .lgm { color: var(--sub); }
.lg-err .lgm { color: var(--err); }
.lg-warn .lgm { color: var(--warn); }
.lg-dim .lgm { color: var(--dim); }
.lg-sim .lgm { color: var(--info); }
.lg-info .lgm { color: var(--ok); }

/* ============================================================
   记录 / 爆点分析（M6）
   ============================================================ */

.daygroup { margin-bottom: 14px; }
.dayhead {
  font-size: 12.5px; color: var(--sub); font-weight: 700;
  padding: 4px 0 8px; border-bottom: 1px dashed var(--line); margin-bottom: 8px;
}

.tblwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* 遗漏表：全量行 + 左右/上下都能滑，前两列（#/爆点）钉住 */
.misstable {
  max-height: 62vh; overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: 10px;
}
.misstable .tbl { width: max-content; min-width: 100%; }
.misstable .tbl th.stick-l, .misstable .tbl td.stick-l {
  position: sticky; left: 0; z-index: 2; background: var(--card);
}
.misstable .tbl th.stick-l2, .misstable .tbl td.stick-l2 {
  position: sticky; left: 34px; z-index: 2; background: var(--card);
}
.misstable .tbl th.stick-l, .misstable .tbl th.stick-l2 { z-index: 4; }
.misstable::-webkit-scrollbar { width: 6px; height: 6px; }
.misstable::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.tbl td.hit-custom { background: rgba(250, 204, 21, .18); }
.tbl { border-collapse: collapse; font-size: 11.5px; width: 100%; }
.tbl th, .tbl td {
  padding: 4px 6px; text-align: center; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid rgba(43, 58, 92, .6);
}
.tbl th {
  color: var(--dim); font-weight: 600; font-size: 10.5px;
  position: sticky; top: 0; background: var(--card); z-index: 1;
}
.tbl td.hit { background: var(--crash-1); color: #fff; font-weight: 700; }
.crashdot {
  display: inline-block; min-width: 42px; padding: 1px 5px;
  border-radius: 5px; color: #fff; font-weight: 700; font-size: 10.5px;
}

.heat { display: flex; flex-wrap: wrap; gap: 2px; }
.heatcell {
  width: 11px; height: 20px; border-radius: 2px; display: inline-block;
}

/* ---------------- 模拟金（M8） ---------------- */
.simrow {
  border: 1px solid var(--line); border-radius: 11px;
  padding: 10px; margin-bottom: 8px; background: var(--bg2);
}
.tabbar .tab { font-size: 10.5px; }
.tabbar .tab .tab-ico { font-size: 17px; }

/* ============================================================
   实况页改版（首屏置顶 + 折叠面板 + 圆形倒计时）
   ============================================================ */

/* ---- 顶部：贴边置顶，紧凑横排，不遮挡内容 ---- */
body.page-live #root { padding-top: 0; }
.room-head { margin-bottom: 8px; }
.room-head .rh-name { font-size: 15px; }

.board {
  position: sticky; top: 0; z-index: 30;
  margin: 0 -12px 10px;
  padding: 10px 12px 12px;
  padding-top: calc(10px + env(safe-area-inset-top));
  border-radius: 0 0 16px 16px;
  background: linear-gradient(180deg, var(--bg2) 0%, var(--card) 100%);
  border: none; border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .85);
}
.board-top { margin-bottom: 8px; }
.board-mid { display: flex; align-items: center; justify-content: flex-start; gap: 14px; }
.board-right { flex: 1; min-width: 0; }

/* ---- 圆形倒计时（下注 8 秒动态圈） ---- */
.ringwrap {
  position: relative; width: 108px; height: 108px; flex: none;
}
.ring { width: 108px; height: 108px; display: block; }
.ring .ring-bg { stroke: rgba(120, 140, 180, .18); stroke-width: 9; }
.ring .ring-fg {
  stroke-width: 9; stroke-linecap: round; stroke-dasharray: 326.7;
  transition: stroke-dashoffset .12s linear, stroke .3s linear;
}
.ringtxt {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  font-size: 25px; font-weight: 800; line-height: 1;
  color: var(--txt);
  font-variant-numeric: tabular-nums;
  transition: color .2s, transform .2s;
}
.ringtxt.urgent {
  color: var(--st-crashed);
  animation: ringPulse .9s ease-in-out infinite;
}
.ringtxt.crashed { color: var(--st-crashed); }
@keyframes ringPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.14); }
}

/* ---- 右侧状态区 ---- */
.board-right .bstate {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  background: rgba(120, 140, 180, .16); color: var(--sub);
}
.board-right .mult {
  font-size: 38px; font-weight: 800; line-height: 1.05; margin: 4px 0 2px;
  font-variant-numeric: tabular-nums; letter-spacing: -.5px;
}
.board-right .mult.preparing { font-size: 28px; color: var(--st-betting); }
.board-right .mult.crashed { color: var(--st-crashed); }
.board-right .mult-sub { font-size: 11.5px; color: var(--sub); margin-top: 2px; line-height: 1.4; }
.board-right .bmeta {
  font-size: 11.5px; color: var(--sub); display: flex; gap: 10px; flex-wrap: wrap;
}
.board-right .bmeta b { color: var(--txt); font-weight: 700; }

/* ---- 折叠面板 ---- */
.sec {
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); margin-bottom: 9px; overflow: hidden;
}
.sec.card { padding: 0; }
.sec-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; margin: 0; cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.sec-head:active { background: var(--bg2); }
.sec-head .stitle { font-size: 13.5px; font-weight: 700; }
.sec-head .ssub { margin-left: auto; font-size: 11px; color: var(--dim); }
.sec-head .caret {
  font-style: normal; font-size: 11px; color: var(--sub);
  transition: transform .2s ease; transform: rotate(0deg);
}
.sec.collapsed .sec-head .caret { transform: rotate(-90deg); }
.sec.collapsed .sec-body { display: none; }
.sec-body { padding: 0 14px 14px; }

/* ---- 玩家实况：有多少人显示多少行，卡片自己长高，不出滚动条 ---- */
.betlist, .plist { max-height: none; overflow-y: visible; }
/* 有多少人显示多少行：卡片自己长高，不出滚动条 */
.plist { max-height: none; overflow-y: visible; }
.phead, .prow {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 52px 46px 48px 54px;
  gap: 4px; align-items: center;
  font-variant-numeric: tabular-nums;
}
.phead {
  font-size: 10.5px; color: var(--dim); font-weight: 600;
  padding: 4px 2px; position: sticky; top: 0; background: var(--card); z-index: 1;
}
.prow {
  font-size: 11.5px; padding: 6px 2px;
  border-bottom: 1px solid rgba(43, 58, 92, .5);
}
.prow:last-child { border-bottom: none; }
.phead > *, .prow > * { text-align: center; min-width: 0; }
.prow .pi { color: var(--dim); }
.prow .pu {
  color: var(--txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: center;
}
.prow .pa { color: var(--txt); }
.prow .pj { color: var(--sub); }
.prow .ph, .prow .pb { color: var(--sub); }
.prow.mine { background: rgba(250, 204, 21, .08); box-shadow: inset 3px 0 0 var(--accent); }

/* ---- 金额清空 / 步进按钮 ---- */
.amtrow { display: flex; align-items: center; gap: 8px; }
.amtrow .input { flex: 1; min-width: 0; }
.btn.clr {
  flex: none; padding: 10px 14px; font-size: 12.5px;
  background: var(--bg2); color: var(--sub); border: 1px solid var(--line);
}
.btn.stepper {
  flex: none; width: 46px; padding: 10px 0; font-size: 19px; font-weight: 700;
  line-height: 1; background: var(--bg2); color: var(--txt);
  border: 1px solid var(--line);
}
.btn.stepper:active { background: var(--line); }
/* 逃生按钮：不可用时只是变淡，仍然可点（点了会给出原因，绝不「没反应」） */
.btn.is-off { opacity: .55; }

/* ---- 近10局爆点横排色卡（实况页固定面板 / AI 页都用）
       10 格平分整行宽度，不出现横向滑动条 ---- */
.recent-strip {
  display: flex; align-items: center; gap: 4px;
  margin-top: 9px; padding-top: 9px;
  border-top: 1px dashed var(--line);
  overflow: hidden;
}
.recent-strip .rs-cell {
  flex: 1 1 0; min-width: 0; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: -.3px;
  color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden;
}
.recent-strip .rs-cell.latest { box-shadow: 0 0 0 2px var(--accent); }

/* ---- 历史爆点：固定列宽 + 横向滑动 ---- */
.crash-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
/* 列优先：每列固定 7 格，格子按时间顺序往下排，排满一列自动开下一列。
   「最新的在右下角」是这个排法的自然结果，不依赖任何列数计算。 */
.crash-scroll .crash-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 28px);
  grid-auto-columns: var(--ccell-w, 48px);
  gap: 4px;
  width: max-content;
  align-content: start;
}
.ccell {
  width: var(--ccell-w, 48px); min-width: var(--ccell-w, 48px);
  max-width: var(--ccell-w, 48px); height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: -.2px;
  white-space: nowrap; overflow: hidden;
  color: #fff; font-variant-numeric: tabular-nums;
}
.ccell.new { animation: cellIn .45s ease; }
.ccell.latest {
  box-shadow: 0 0 0 2px var(--accent), 0 0 10px rgba(250, 204, 21, .35);
}
@keyframes cellIn {
  from { transform: scale(.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.crash-scroll::-webkit-scrollbar { height: 5px; }
.crash-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }