/* ============================================================
   德州扑克 · 好友房 — UI（严格参照 design.taskking.shop 设计稿）
   Telegram Mini App 手机端 375×812 · 深绿主题 · 零构建
   色板：底 #001b18 / 桌面径向 #08745c→#005447→#002f2b→#001d1b
   桌沿 #0e312b + 金内描边 / 荧光绿 #b6ff65→#6fe335 / 橙 #ffc244→#ff7b22
   仅表现层：所有 ID / 交互类名与 client JS 约定保持一致。
   ============================================================ */
500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap");

:root {
  --bg: #001b18;
  --game-bg: #002720;
  --appbar-0: #001c18;
  --appbar-1: #003228;
  --felt-0: #08745c; --felt-1: #005447; --felt-2: #002f2b; --felt-3: #001d1b;
  --rim: #0e312b;
  --rim-hi: #c49c4c55;
  --felt-line: #d0bb6750;
  --lime: #a3ef47; --lime-0: #b6ff65; --lime-1: #6fe335;
  --lime-ink: #113515;
  --lime-soft: #87ce41;
  --nav-active: #92ee45;
  --raise-0: #ffc244; --raise-1: #ff7b22; --raise-ink: #442000;
  --gold: #f3f6b9; --gold-2: #f8e14d; --gold-3: #c49c4c;
  --red: #db2730;
  --text: #f8ffff; --text-2: #c1d5cc; --text-3: #b4cbc5; --muted: #93b3a8;
  --actions-bg: #003b33;
  --nav-bg: #00251f;
  --card-red: #db2730; --card-ink: #07181c;
  --ease: cubic-bezier(.25, .8, .25, 1);
  --font: "Inter", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
.muted { color: var(--muted); font-size: 12px; }
button { font-family: var(--font); cursor: pointer; }
button:active { transform: scale(.97); }
button:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* ---------- 设备壳（375×812） ---------- */
.screen.device {
  position: relative;
  width: min(100vw, 375px);
  height: 100dvh;
  min-height: 640px;
  max-height: 812px;
  margin: auto;
  overflow: hidden;
  background: var(--bg);
  box-shadow: 0 12px 45px #001d1b25;
  display: flex;
  flex-direction: column;
}
@media (min-width: 600px) {
  body {
    display: grid;
    min-height: 100vh;
    place-items: center;
    background: radial-gradient(circle at 50% 25%, #dcecf1, #b9d2da);
  }
  .screen.device {
    height: 812px;
    border: 7px solid #102824;
    border-radius: 31px;
  }
}

/* ---------- iOS home 条 ---------- */
.home-bar {
  position: absolute;
  z-index: 10;
  bottom: 6px;
  left: calc(50% - 52px);
  width: 104px;
  height: 4px;
  border-radius: 5px;
  background: #fff;
  opacity: .9;
  pointer-events: none;
}

/* ---------- 顶栏 appbar（64px） ---------- */
.appbar {
  height: 64px;
  flex: 0 0 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px 5px;
  background: linear-gradient(180deg, var(--appbar-0), var(--appbar-1));
  z-index: 20;
}
.appbar .appbar-mid, .appbar > div { text-align: center; flex: 1; min-width: 0; }
.appbar strong {
  display: block;
  font-size: 13px;
  letter-spacing: -.2px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.appbar small {
  display: block;
  margin-top: 2px;
  min-height: 11px;
  color: var(--text-3);
  font-size: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#roomCode { color: var(--gold); letter-spacing: 2px; font-weight: 700; }
.icon-btn {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  color: #f4ffff;
  font-size: 26px;
  line-height: 1;
  min-width: 30px;
}
.icon-btn.text-btn { font-size: 12px; font-weight: 700; color: var(--text-2); }

/* ============================================================
   登录页（设计稿 Landing：旋转 ♠♥ 大卡 + Play·Win·Together）
   ============================================================ */
#auth.landing {
  padding: 18px 12px;
  text-align: center;
  background: radial-gradient(ellipse at 50% 34%, #075c4d, #002e29 48%, var(--bg) 78%);
  overflow-y: auto;
}
.landing-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-2);
}
.landing-top b { font-size: 11px; color: var(--text); letter-spacing: .5px; }
.landing-top span { display: inline-flex; align-items: center; gap: 4px; }
.landing-top i {
  display: inline-grid;
  width: 17px; height: 17px;
  place-items: center;
  margin-right: 4px;
  border-radius: 50%;
  background: #29a9e8;
  color: #fff;
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
}
.landing-visual {
  position: relative;
  flex: 1 1 auto;
  min-height: 240px;
  height: 62%;
}
.hero-cards {
  position: absolute;
  top: 38%;
  left: 50%;
  display: flex;
  transform: translate(-50%) rotate(-12deg);
}
.hero-cards b {
  display: grid;
  width: 76px; height: 108px;
  margin: -5px;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #fff, #d5e1e2);
  color: #061a1d;
  font-size: 55px;
  font-weight: 400;
  box-shadow: 0 10px 18px #0008;
}
.hero-cards b.red { transform: rotate(23deg); color: #e12b36; }
.float-chip {
  position: absolute;
  color: #aaf255;
  font-size: 45px;
  text-shadow: 0 0 10px #d5ff4c;
  animation: floatY 4s ease-in-out infinite;
}
.left-chip { top: 55%; left: 13%; }
.right-chip { top: 66%; right: 14%; animation-delay: -2s; }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.landing-copy h1 { margin: 6px 0 0; font-size: 21px; font-weight: 700; letter-spacing: .4px; }
.landing-copy p { margin: 7px 0 14px; font-size: 12px; color: var(--text-2); }

/* ============================================================
   大厅 / 战绩 / 管理（深绿卡片页）
   ============================================================ */
.lobby .page-scroll, .page .page-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 14px 30px;
  -webkit-overflow-scrolling: touch;
}
.lobby-card {
  background: linear-gradient(150deg, rgba(3, 50, 40, .92), rgba(1, 24, 19, .95));
  border: 1px solid rgba(163, 239, 71, .22);
  border-radius: 18px;
  padding: 15px 14px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .35);
  text-align: left;
}
#auth .lobby-card { text-align: left; }
.who {
  margin: 0 0 12px;
  padding: 10px 13px;
  border-radius: 14px;
  background: rgba(163, 239, 71, .08);
  border: 1px solid rgba(163, 239, 71, .25);
  color: var(--lime);
  font-size: 12px;
  font-weight: 700;
}
.bot-opts, .admin-sec, .stat-card, .read-card {
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 16px;
  padding: 13px;
}
.bot-title { font-size: 13px; font-weight: 700; color: var(--gold); }
.bot-opts .row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.bot-opts .row label { margin: 0; flex: 0 0 100px; }
.bot-opts .row.check { display: block; }
.bot-opts .row.check label { flex: 1; display: flex; gap: 9px; align-items: center; cursor: pointer; }
.bot-opts .row.check input[type="checkbox"], .bot-opts .row input[type="checkbox"] { width: auto; }

input, select {
  width: 100%;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(0, 0, 0, .25);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  outline: none;
}
input::placeholder { color: rgba(255, 255, 255, .32); }
input:focus, select:focus { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(163, 239, 71, .18); }
label { display: block; font-size: 12px; color: var(--muted); margin: 12px 0 6px; font-weight: 700; }
.tip { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 0 0 12px; }
.foot-tip { text-align: center; margin-top: 16px; }
.msg { color: #ffd9c9; font-size: 12px; min-height: 17px; margin-top: 10px; text-align: center; }

/* 主按钮（设计稿 enter / 荧光绿胶囊） */
.enter, .primary {
  width: 100%;
  height: 42px;
  border: 0;
  border-radius: 20px;
  background: linear-gradient(135deg, #c3ff9a, #63df44);
  color: #093418;
  font-size: 13px;
  font-weight: 700;
  margin-top: 10px;
  box-shadow: 0 6px 18px rgba(163, 239, 71, .25);
}
.ghost {
  width: 100%;
  padding: 11px;
  border-radius: 20px;
  border: 1px solid rgba(165, 195, 187, .5);
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 700;
  margin-top: 10px;
}
.danger {
  background: linear-gradient(180deg, #ff7a5c, #c73a1d);
  border: 0;
  color: #fff;
  border-radius: 20px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.mini {
  width: auto;
  margin: 0;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(255, 255, 255, .06);
  color: var(--text-2);
  border: 1px solid rgba(255, 255, 255, .16);
}
button.on { box-shadow: 0 0 0 2px var(--lime) inset, 0 0 14px rgba(163, 239, 71, .25); }

.divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 11px;
  margin: 16px 0 4px;
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .12); }
.join-row { display: flex; gap: 8px; }
.join-row input { flex: 1; letter-spacing: 4px; font-weight: 700; text-align: center; }
.join-row #joinBtn {
  flex: 0 0 auto;
  width: auto;
  padding: 0 18px;
  border-radius: 20px;
  border: 1px solid rgba(163, 239, 71, .4);
  color: var(--lime);
  background: rgba(163, 239, 71, .08);
  font-size: 13px;
  font-weight: 700;
}
#statsBtn, #adminBtn { margin-top: 10px; }

/* ============================================================
   游戏屏
   ============================================================ */
#game.game { background: var(--game-bg); }
.table-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 53%, var(--felt-0) 0, var(--felt-1) 45%, var(--felt-2) 71%, var(--felt-3) 100%);
}

/* 桌沿（设计稿 table-rim：11px 深绿沿 + 金色内描边） */
.table {
  position: absolute;
  top: 0; right: 5px; bottom: -50px; left: 5px;
  border: 11px solid var(--rim);
  border-radius: 48% 48% 46% 46% / 30% 30% 20% 20%;
  box-shadow: inset 0 0 0 2px var(--rim-hi), inset 0 0 18px #000;
}
.felt-line {
  position: absolute;
  top: 13px; right: 13px; bottom: 13px; left: 13px;
  border: 1px solid var(--felt-line);
  border-radius: inherit;
  pointer-events: none;
}

/* 底池胶囊（设计稿 pot：83×53） */
.pot-center {
  position: absolute;
  z-index: 2;
  top: 24%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
.pot {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 83px;
  min-height: 53px;
  justify-content: center;
  border-radius: 25px;
  background: #063d34d9;
  border: 1px solid #39a06d70;
  padding: 6px 14px 5px;
  color: #d3e2d9;
  font-size: 11px;
  line-height: 1.2;
}
.pot span { display: block; }
.pot strong, .pot b { display: block; padding-top: 2px; color: var(--gold); font-size: 14px; }

/* 公共牌（设计稿 community：34×50，gap 5） */
.board {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 13px;
  min-height: 50px;
}
.stage-label {
  margin-top: 8px;
  color: rgba(255, 255, 255, .78);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 0 1px 2px #001814;
}

/* ============================================================
   座位（设计稿 player：64 宽 / 40 头像 / 金边·me 荧光绿边）
   ============================================================ */
.seats { position: absolute; inset: 0; z-index: 3; }
.seat {
  position: absolute;
  width: 68px;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 10px;
  color: var(--text-2);
  text-shadow: 0 1px 2px #001814;
  z-index: 2;
}
.seat .avatar {
  width: 40px;
  height: 40px;
  margin: 0 auto 1px;
  display: grid;
  place-items: center;
  border: 2px solid #f7e6ca;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #c89065, #3e3028);
  font-size: 20px;
  color: #fff;
  box-shadow: 0 2px 5px #001c19;
  background-size: cover;
  background-position: center;
}
.seat.mine .avatar {
  border-color: var(--lime);
  box-shadow: 0 0 0 2px var(--lime-soft), 0 2px 5px #001c19;
}
.seat .seat-plate { padding: 0 2px; background: none; border: 0; }
.seat .name {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
  font-weight: 600;
  color: #fff;
  font-size: 10px;
  line-height: 13px;
  overflow: hidden;
  white-space: nowrap;
}
.seat .chips { display: block; color: #c1d5cc; font-size: 9px; line-height: 12px; }
.seat.mine .name, .seat.mine .chips { color: var(--gold); }
/* 下注胶囊（设计稿 player em） */
.seat .bet {
  display: inline-block;
  margin-top: 2px;
  min-height: 15px;
  padding: 2px 8px;
  border-radius: 8px;
  background: #123d38;
  color: #c3d7d0;
  font-size: 9px;
  font-weight: 700;
  line-height: 11px;
  text-shadow: none;
}
.seat.to-act .bet { background: linear-gradient(180deg, #adfc60, #69dd34); color: #123519; font-weight: 700; }
.seat .handname { color: var(--lime); font-size: 9px; font-weight: 700; min-height: 0; text-shadow: none; margin-top: 1px; }
/* 庄家钮 D（金色） */
.seat.button::after {
  content: "D";
  position: absolute;
  left: calc(50% + 16px);
  top: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--gold-2), #a9791a);
  color: #251706;
  font-weight: 900;
  font-size: 9px;
  border: 1.5px solid #fff3b0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
  z-index: 2;
}
/* 行动者呼吸光圈 */
.seat.to-act .avatar { animation: pulseLime 1.3s infinite; }
@keyframes pulseLime {
  0%, 100% { box-shadow: 0 0 0 2px var(--lime-1), 0 0 6px rgba(163, 239, 71, .4); }
  50% { box-shadow: 0 0 0 5px var(--lime), 0 0 22px rgba(163, 239, 71, .65); }
}
.seat.folded { opacity: .45; filter: grayscale(.6); }

/* 手牌：默认不摆对手的牌；自己的牌固定显示（36×49） */
.seat .cards {
  display: none;
  justify-content: center;
  gap: 2px;
  margin-top: 3px;
}
.seat.show-cards .cards { display: flex; }
.seat .cards .card { width: 24px; height: 34px; }
.seat.mine { width: 88px; }
.seat.mine .cards { display: flex; }
.seat.mine .cards .card, .seat .cards .card.big { width: 36px; height: 49px; }

/* 状态标签胶囊 */
.tag {
  font-size: 8px;
  padding: 1px 5px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .16);
  color: var(--text-2);
  font-weight: 700;
  white-space: nowrap;
  text-shadow: none;
}
.tag.bot { background: rgba(183, 139, 245, .3); color: #e4d4ff; }
.tag.ready { background: linear-gradient(180deg, #adfc60, #69dd34); color: #123519; }
.tag.allin { background: linear-gradient(180deg, #ff8f6b, #d0401e); color: #fff; }
.tag.offline, .tag.bust { background: rgba(255, 255, 255, .12); color: var(--muted); }
.rebuy-tag {
  font-size: 8px;
  color: #c6ecff;
  background: rgba(111, 211, 247, .15);
  border-radius: 8px;
  padding: 0 4px;
  text-shadow: none;
}
.threat-badge {
  display: inline-block;
  margin-top: 2px;
  background: linear-gradient(180deg, #ff6b6b, #c41e1e);
  border-radius: 8px;
  color: #fff;
  font-weight: 900;
  font-size: 8px;
  padding: 2px 6px;
  text-shadow: none;
}

/* ============================================================
   扑克牌（设计稿牌面：白渐变 / 红 #db2730 / 圆角 4）
   ============================================================ */
.card {
  position: relative;
  width: 34px;
  height: 50px;
  border-radius: 4px;
  background: linear-gradient(135deg, #fff, #dfe8e8);
  color: var(--card-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  box-shadow: 0 2px 5px #001b18aa;
  overflow: hidden;
  flex: 0 0 auto;
}
.card.red { color: var(--card-red); }
.card .c-suit { font-size: 17px; line-height: 1; }
.card .c-idx { position: absolute; font-size: 7px; line-height: 1.05; font-weight: 700; }
.card .c-idx.tl { top: 3px; left: 3px; text-align: center; }
.card .c-idx.br { bottom: 3px; right: 3px; text-align: center; transform: rotate(180deg); }
.board .card { width: 34px; height: 50px; }
.board .card .c-suit { font-size: 17px; }
.board .card .c-idx { font-size: 7px; }
.seat .cards .card.small { width: 24px; height: 34px; }
.seat .cards .card.small .c-suit { font-size: 12px; }
.seat .cards .card.small .c-idx { font-size: 5px; }
.card.big { width: 36px; height: 49px; }
.card.big .c-suit { font-size: 20px; }
.card.big .c-idx { font-size: 8px; }
.card.back {
  background: repeating-linear-gradient(45deg, #0c4d3a 0, #0c4d3a 5px, #0a6449 5px, #0a6449 10px);
  color: transparent;
  box-shadow: 0 2px 5px #001b18aa, inset 0 0 0 1.5px rgba(163, 239, 71, .45);
}
.card.back::after { content: ""; position: absolute; inset: 3px; border-radius: 3px; border: 1px solid rgba(255, 255, 255, .3); }
.card.deal { animation: deal .3s var(--ease); }
@keyframes deal { from { transform: translateY(-10px) rotate(-4deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* ============================================================
   操作栏（设计稿 actions：68px #003b33 / 弃牌暗 / 跟注绿 / 加注橙）
   ============================================================ */
.action-bar {
  flex: 0 0 auto;
  padding: 7px 16px calc(9px + env(safe-area-inset-bottom));
  background: var(--actions-bg);
  border-top: 1px solid rgba(58, 121, 102, .38);
  z-index: 30;
}
.turn-info {
  text-align: center;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 700;
  min-height: 15px;
  margin-bottom: 6px;
  line-height: 1.4;
}
.turn-info b { color: var(--nav-active); }
.controls {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 7px;
  min-height: 46px;
  align-items: stretch;
}
.controls .act {
  flex: 1;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 4px;
  min-height: 46px;
}
.controls .act.fold {
  border: 1px solid #718e88;
  background: linear-gradient(135deg, #264b4e, #102d31);
  color: #fff;
}
.controls .act.check, .controls .act.call {
  border: 0;
  background: linear-gradient(135deg, var(--lime-0), var(--lime-1));
  color: var(--lime-ink);
}
/* 下注面板（轮到自己时展开） */
.betbox {
  grid-column: 1 / -1;
  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  padding: 8px;
  display: none;
  gap: 7px;
}
body.my-turn .betbox { display: grid; }
.bet-head { display: flex; justify-content: space-between; align-items: center; }
.bet-cur { font-size: 13px; font-weight: 800; color: var(--gold); }
.bet-hint { font-size: 11px; color: var(--muted); }
.bet-range { width: 100%; accent-color: var(--lime); height: 18px; padding: 0; }
.chips-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.chip {
  width: 100%;
  margin: 0;
  padding: 6px 1px;
  font-size: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  color: var(--text-2);
  font-weight: 700;
}
.chip.max { background: linear-gradient(135deg, #ff9d5c, #d94f1e); border: 0; color: #fff; }
.bet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.bet-actions .act { width: 100%; margin: 0; min-height: 40px; font-size: 12px; }
.bet-actions .act.bet, #betRaiseBtn {
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--raise-0), var(--raise-1));
  color: var(--raise-ink);
  font-weight: 800;
}
#allinBtn {
  border-radius: 12px;
  background: linear-gradient(180deg, #7a1f2b, #3d0d14);
  border: 1px solid rgba(255, 107, 107, .5);
  color: #ffd9d0;
  font-weight: 800;
}
.act.coach-pick { outline: none; box-shadow: 0 0 0 3px rgba(163, 239, 71, .85), 0 0 18px rgba(163, 239, 71, .45); }

/* 房主快捷 / 房主栏 / 秀牌栏 */
.quick-host-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0 0 7px;
}
.quick-host-btn {
  min-height: 40px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
}
.quick-start { border: 0; background: linear-gradient(135deg, var(--lime-0), var(--lime-1)); color: var(--lime-ink); }
.quick-bot { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .2); color: var(--text); }
.host-bar, .reveal-bar { margin-top: 7px; display: flex; gap: 6px; overflow-x: auto; align-items: center; padding-bottom: 2px; }
.host-bar button, .reveal-btns .act {
  width: auto;
  flex: 0 0 auto;
  margin: 0;
  padding: 8px 12px;
  font-size: 11px;
  border-radius: 12px;
  white-space: nowrap;
  font-weight: 700;
}
.host-bar .primary { margin: 0; min-height: 0; height: 34px; padding: 0 14px; }
.host-bar .ghost { margin: 0; height: 34px; padding: 0 12px; display: inline-flex; align-items: center; }
.reveal-tip { flex: 0 0 auto; font-size: 11px; color: var(--text-2); white-space: nowrap; }
.reveal-status { font-size: 11px; color: var(--gold); white-space: nowrap; }
.reveal-btns { display: flex; gap: 6px; }
.reveal-btns .act.bet { border: 0; background: linear-gradient(135deg, var(--raise-0), var(--raise-1)); color: var(--raise-ink); }
.reveal-btns .act.ghost { border: 1px solid rgba(165, 195, 187, .5); background: transparent; color: var(--text-2); }
.rebuy-row { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; }
.rebuy-row input { width: 96px; padding: 7px 9px; }
.rebuy-row .primary, .rebuy-row .ghost { margin: 0; width: auto; height: 34px; padding: 0 12px; display: inline-flex; align-items: center; font-size: 11px; }

/* ---------- 底部导航（设计稿 nav：70px #00251f，激活 #92ee45） ---------- */
.bottom-nav {
  flex: 0 0 70px;
  height: 70px;
  display: flex;
  justify-content: space-around;
  background: var(--nav-bg);
  border-top: 1px solid #3a796660;
  padding-top: 8px;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 20;
}
.bottom-nav button {
  width: 25%;
  border: 0;
  background: transparent;
  color: #c5d5d0;
  font-size: 20px;
  line-height: 1;
  padding: 0;
}
.bottom-nav button span { display: block; }
.bottom-nav button small { display: block; margin-top: 4px; font-size: 10px; font-family: var(--font); }
.bottom-nav button.active { color: var(--nav-active); }

/* ============================================================
   断线重连弹窗（设计稿 disconnect）
   ============================================================ */
.modal-mask {
  position: absolute;
  z-index: 40;
  top: 64px; right: 0; bottom: 0; left: 0;
  background: #001b18ce;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.disconnect {
  position: absolute;
  top: 38%;
  left: 50%;
  width: 250px;
  text-align: center;
  transform: translate(-50%, -50%);
}
.disconnect .wifi {
  font-size: 58px;
  line-height: 46px;
  transform: rotate(180deg);
  color: #ff6060;
  font-style: normal;
}
.disconnect h2 { margin: 17px 0 9px; font-size: 16px; font-weight: 700; }
.disconnect p, .disconnect > small { color: #c2d1cd; font-size: 10px; }
.disconnect .spinner {
  width: 17px;
  height: 17px;
  margin: 12px auto;
  border: 2px solid #6ef27a;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.reconnect {
  width: 170px;
  height: 32px;
  margin: 3px 0 9px;
  border: 0;
  border-radius: 20px;
  background: linear-gradient(135deg, #c3ff9a, #63df44);
  color: #093418;
  font-size: 12px;
  font-weight: 700;
}

/* ============================================================
   右侧抽屉（设计稿 drawer：286px / 资料 + 菜单 + 退出）
   ============================================================ */
.drawer-backdrop {
  position: fixed;
  z-index: 98;
  top: 0; right: 0; bottom: 0; left: 0;
  background: #00171388;
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .26s var(--ease);
}
body.drawer-open .drawer-backdrop { opacity: 1; pointer-events: auto; }
.sidebar.drawer {
  position: fixed;
  z-index: 99;
  inset: 0 0 0 auto;
  width: 286px;
  max-width: 86vw;
  padding: 17px;
  background: linear-gradient(145deg, #003c32, #00271f);
  transform: translate(100%);
  transition: transform .28s ease;
  box-shadow: -18px 0 30px #0005;
  overflow: hidden auto;
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
}
body.drawer-open .sidebar.drawer { transform: translate(0); }
.sidebar .close {
  float: right;
  width: 34px; height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 22px;
  line-height: 1;
}
.profile { height: auto; min-height: 106px; padding: 20px 0 0 2px; overflow: hidden; }
.profile .avatar {
  float: left;
  width: 40px; height: 40px;
  margin-right: 11px;
  display: grid;
  place-items: center;
  border: 2px solid #f7e6ca;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #c89065, #3e3028);
  font-size: 20px;
}
.profile .avatar.me { border-color: var(--lime); box-shadow: 0 0 0 2px var(--lime-soft); }
.profile b, .profile small, .profile i { display: block; font-size: 12px; line-height: 18px; text-align: left; }
.profile b { color: var(--text); font-weight: 700; }
.profile small { color: #c6d8d2; font-size: 9px; }
.profile i { color: #63e377; font-size: 9px; font-style: normal; }
.drawer-menu {
  margin: 10px 0 0;
  padding: 7px 0;
  border-top: 1px solid #ffffff25;
  border-bottom: 1px solid #ffffff25;
  list-style: none;
}
.drawer-menu li {
  display: flex;
  align-items: center;
  gap: 13px;
  height: 42px;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}
.drawer-menu li span { font-size: 13px; }
.drawer-menu li strong { margin-left: auto; color: #75e77d; font-size: 11px; font-weight: 600; }
.logout {
  width: 100%;
  height: 33px;
  margin-top: 10px;
  border: 1px solid #a5c3bb;
  border-radius: 18px;
  background: transparent;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.drawer-panels { flex: 1; min-height: 0; overflow-y: auto; margin-top: 10px; padding-bottom: 16px; }
.coach-panel, .reads-panel, .log-panel { padding: 4px 2px 14px; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.coach-head, .reads-head {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--nav-active);
}
.coach-select { width: auto; padding: 5px 7px; font-size: 11px; border-radius: 8px; }
.coach-body, .reads-body, .log-panel li { font-size: 11px; color: var(--text-2); line-height: 1.55; }
.coach-hint, .reads-hint { color: var(--muted); font-size: 11px; }
.coach-rec, .coach-odds, .coach-concept, .read-card {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  padding: 9px;
  margin-bottom: 8px;
}
.coach-rec .rec-label { color: var(--muted); font-size: 10px; margin-right: 6px; }
.coach-rec .rec-act { font-size: 17px; color: var(--nav-active); font-weight: 900; }
.coach-rec .rec-amt { color: var(--gold-2); font-size: 12px; font-weight: 800; }
.coach-style { font-size: 10px; color: var(--muted); margin-bottom: 7px; }
.coach-facts { font-size: 10px; color: var(--text-2); margin: 7px 0 5px; }
.coach-facts b, .coach-odds b { color: var(--gold-2); }
.coach-strbar { margin-bottom: 7px; }
.csb-label { font-size: 10px; color: var(--muted); margin-bottom: 4px; }
.csb-track { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.csb-fill { height: 100%; border-radius: 999px; background: var(--lime); }
.coach-odds { color: #c6f5d0; }
.coach-concept b { color: var(--gold-2); }
.coach-reason { font-size: 10px; color: var(--text-2); margin-top: 6px; line-height: 1.5; }
.log-panel h3 { margin: 0 0 8px; color: var(--nav-active); font-size: 12px; }
.log-panel ul { list-style: none; margin: 0; padding: 0; }
.log-panel li { padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); }

/* ============================================================
   Toast / 胜者弹窗
   ============================================================ */
#uiToast {
  position: fixed;
  left: 50%;
  top: calc(74px + env(safe-area-inset-top));
  transform: translate(-50%, -8px);
  z-index: 9999;
  max-width: min(86vw, 340px);
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(2, 20, 16, .95);
  border: 1px solid rgba(163, 239, 71, .6);
  color: #d9ffb8;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
#uiToast.show { opacity: 1; transform: translate(-50%, 0); }

#winnerNotice {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transform: scale(.98);
  transition: opacity .18s ease, transform .18s ease;
}
#winnerNotice.show { opacity: 1; transform: scale(1); }
#winnerNotice .winner-card {
  pointer-events: auto;
  max-width: min(84vw, 340px);
  padding: 18px 18px 14px;
  border-radius: 22px;
  border: 1px solid rgba(173, 252, 96, .7);
  background: linear-gradient(170deg, rgba(4, 44, 35, .97), rgba(1, 20, 15, .98));
  box-shadow: 0 24px 80px rgba(0, 0, 0, .65);
  color: #eaffd9;
  text-align: center;
}
#winnerNotice .winner-title { font-size: 16px; line-height: 1.45; font-weight: 900; color: var(--nav-active); }
#winnerNotice .winner-close {
  margin-top: 12px;
  padding: 9px 26px;
  border: 0;
  border-radius: 20px;
  background: linear-gradient(135deg, #c3ff9a, #63df44);
  color: #093418;
  font-weight: 800;
  font-size: 12px;
}

/* ============================================================
   战绩 / 管理
   ============================================================ */
.stats-body h3 { margin: 2px 0 10px; font-size: 15px; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat-card { padding: 9px 6px; text-align: center; }
.sc-k { font-size: 10px; color: var(--muted); }
.sc-v { font-size: 16px; color: var(--nav-active); font-weight: 800; margin-top: 3px; }
.cat-line { margin: 12px 2px; font-size: 11px; color: var(--text-2); line-height: 1.6; }
.sugg { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; padding: 11px; }
.sugg h4 { margin: 0 0 7px; color: var(--gold-2); font-size: 12px; }
.sugg-item { font-size: 11px; color: var(--text-2); line-height: 1.6; padding: 3px 0; }
.summary { font-size: 11px; color: var(--text-2); line-height: 1.7; }
.summary b { color: var(--text); }
.summary .win { color: var(--nav-active); font-weight: 800; }
.summary .lose { color: #ff8f7a; font-weight: 800; }
.admin-sec { margin-bottom: 14px; }
.admin-sec h3 { margin: 0 0 8px; font-size: 13px; color: var(--gold-2); }
.admin-sec .row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.admin-sec .row input { flex: 1; min-width: 90px; }
.admin-sec .row .primary { width: auto; margin: 0; height: 38px; padding: 0 14px; display: inline-flex; align-items: center; font-size: 12px; }
.acct-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.acct-table th, .acct-table td { padding: 8px 6px; border-bottom: 1px solid rgba(255, 255, 255, .1); text-align: left; }
.acct-table th { color: var(--muted); font-size: 10px; }
.invite-code {
  margin-top: 10px;
  font-size: 24px;
  letter-spacing: 5px;
  color: var(--nav-active);
  font-weight: 900;
  text-align: center;
  padding: 12px;
  background: rgba(0, 0, 0, .3);
  border: 1px dashed rgba(163, 239, 71, .5);
  border-radius: 14px;
}
.admin-sec .mini { margin-top: 8px; }

/* ============================================================
   矮屏适配
   ============================================================ */
@media (max-height: 700px) {
  .appbar { height: 56px; flex-basis: 56px; padding-top: 8px; }
  .bottom-nav { flex-basis: 58px; height: 58px; }
  .landing-visual { min-height: 200px; }
  .pot-center { top: 21%; }
}