/* 旺旺牛 Mini App —— 移动端竖屏，深色金调 */
:root {
  --bg: #100c08;
  --bg2: #1b1610;
  --plate: #241d14;
  --line: rgba(255,255,255,.08);
  --gold: #f2c34c;
  --gold-dim: rgba(242,195,76,.35);
  --text: #f4ead8;
  --sub: #9b9081;
  --win: #4ecb7d;
  --lose: #ef5b5b;
  --draw: #8fa0b8;
  --accent: #c0392b;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 14px/1.5 "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  overscroll-behavior: none;
}
#app { display: flex; justify-content: center; height: 100%; }
.frame {
  position: relative; width: 100%; max-width: 430px; height: 100%;
  display: flex; flex-direction: column; overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(242,195,76,.13) 0%, transparent 62%),
    radial-gradient(circle at 50% 100%, rgba(80,40,110,.35) 0%, transparent 70%),
    var(--bg);
}
.boot { margin: auto; text-align: center; color: var(--sub); }
.boot-logo { font-size: 44px; }
.boot-text { margin-top: 8px; }

/* ---------- 通用 ---------- */
main { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 14px 14px; }
.hd { display: flex; align-items: center; gap: 10px; padding: 12px 14px 10px; }
.hd .back { font-size: 20px; color: var(--gold); padding: 2px 6px; margin-left: -6px; }
.hd h1 { flex: 1; margin: 0; font-size: 17px; font-weight: 700; }
.hd .right { color: var(--sub); font-size: 13px; }
.plate { background: linear-gradient(180deg, #2b2318, #1d1710); border: 1px solid var(--gold-dim); border-radius: 16px; }
.card { background: var(--plate); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 12px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sub { color: var(--sub); font-size: 12.5px; }
.gold { color: var(--gold); }
.win { color: var(--win); } .lose { color: var(--lose); } .draw { color: var(--draw); }
.big { font-size: 26px; font-weight: 800; letter-spacing: .5px; }
.mono { font-variant-numeric: tabular-nums; }
.hr { height: 1px; background: var(--line); margin: 12px 0; }
.tag { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; background: rgba(242,195,76,.14); color: var(--gold); }
.empty { text-align: center; color: var(--sub); padding: 40px 10px; }

button, .btn {
  appearance: none; border: 0; font: inherit; color: #2a1c06; cursor: pointer;
  background: linear-gradient(180deg, #f6d377, #e0a92c);
  border-radius: 12px; padding: 12px 16px; font-weight: 700; width: 100%;
}
button:disabled { opacity: .4; }
.btn-ghost { background: transparent; border: 1px solid var(--gold-dim); color: var(--gold); }
.btn-line { background: transparent; border: 1px solid var(--line); color: var(--text); }
.btn-sm { padding: 7px 12px; width: auto; border-radius: 10px; font-size: 13px; }
.btns { display: flex; gap: 10px; }

input, textarea {
  appearance: none; width: 100%; background: rgba(0,0,0,.28); color: var(--text);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font: inherit;
}
input::placeholder { color: #6b6257; }
label.field { display: block; margin-bottom: 12px; }
label.field > span { display: block; color: var(--sub); font-size: 12.5px; margin-bottom: 6px; }

/* ---------- 底部 Tab ---------- */
nav.tabs {
  display: flex; border-top: 1px solid var(--line); background: rgba(16,12,8,.96);
  padding-bottom: var(--safe-bottom);
}
nav.tabs a {
  flex: 1; text-align: center; padding: 9px 0 7px; color: var(--sub);
  text-decoration: none; font-size: 11px;
}
nav.tabs a .ic { display: block; font-size: 19px; line-height: 1.1; }
nav.tabs a.on { color: var(--gold); }

/* ---------- 大厅 ---------- */
.marquee { display: flex; gap: 8px; align-items: center; padding: 8px 12px; margin-bottom: 12px;
  background: rgba(0,0,0,.3); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.marquee .txt { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; color: #d9cdb6; }
.balcard { padding: 16px; margin-bottom: 12px; }
.balcard .amt { display: flex; align-items: baseline; gap: 6px; }
.balcard .amt .cur { color: var(--sub); font-size: 13px; }
.quick { display: flex; gap: 10px; margin-top: 14px; }
.quick a { flex: 1; text-align: center; padding: 10px 0; border-radius: 12px; border: 1px solid var(--gold-dim);
  color: var(--gold); text-decoration: none; font-size: 13px; font-weight: 600; }
.banner { display: block; padding: 14px; margin-bottom: 12px; text-decoration: none; color: inherit; }
.banner .t { font-weight: 700; margin: 4px 0 3px; }
.entry { display: flex; align-items: center; gap: 12px; padding: 14px; text-decoration: none; color: inherit; }
.entry .ic { font-size: 22px; }
.entry .g { flex: 1; }
.entry .t { font-weight: 700; }
.entry .arrow { color: var(--gold); }

/* ---------- 房间列表 ---------- */
.roomcard { display: flex; gap: 12px; align-items: center; padding: 14px; margin-bottom: 12px; text-decoration: none; color: inherit; }
.roomcard .avatar { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(160deg, #c9a24a, #8a6b23); color: #241a06; font-weight: 800; font-size: 17px; }
.roomcard .g { flex: 1; min-width: 0; }
.roomcard .t { font-weight: 700; display: flex; align-items: center; gap: 6px; }
.roomcard .n { color: var(--sub); font-size: 12px; }
.soon { opacity: .45; }

/* ---------- 牌桌 ---------- */
.table { display: flex; flex-direction: column; height: 100%; }
.tbar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.tbar .back { color: var(--gold); font-size: 19px; }
.tbar .name { font-weight: 700; font-size: 15px; }
.tbar .bal { margin-left: auto; font-size: 13px; color: var(--gold); }
.stage { padding: 12px 14px; border-bottom: 1px solid var(--line); background: rgba(0,0,0,.22); }
.stage .line1 { display: flex; align-items: center; gap: 8px; }
.phase { font-weight: 800; letter-spacing: .5px; }
.phase.bidding { color: #ffd76a; } .phase.betting { color: #7fd9a2; }
.phase.grabbing, .phase.dice { color: #ff9d5c; } .phase.settling { color: #b79af5; }
.phase.waiting { color: var(--sub); }
.clock { margin-left: auto; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.clock.hurry { color: var(--lose); }
.stage .line2 { display: flex; gap: 14px; margin-top: 8px; font-size: 12.5px; color: var(--sub); flex-wrap: wrap; }
.stage .line2 b { color: var(--text); font-weight: 600; }
.trend { letter-spacing: 2px; color: var(--gold); }

.chat { flex: 1; overflow-y: auto; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 86%; }
.msg .who { font-size: 11.5px; color: var(--sub); margin-bottom: 2px; }
.msg .bub { display: inline-block; padding: 7px 11px; border-radius: 12px; background: #241d14;
  border: 1px solid var(--line); white-space: pre-wrap; word-break: break-word; font-size: 13px; }
.msg.mine { align-self: flex-end; text-align: right; }
.msg.mine .bub { background: #3a2d16; border-color: var(--gold-dim); }
.msg.bot { align-self: stretch; max-width: 100%; }
.msg.bot .bub { display: block; background: rgba(0,0,0,.3); border-color: rgba(242,195,76,.18);
  color: #e4d8bf; font-size: 12.5px; }
.msg.bot .bub.hl { border-color: var(--gold-dim); color: var(--gold); }

.packet { align-self: center; width: 100%; }
.packet .p {
  display: flex; align-items: center; gap: 12px; padding: 14px;
  background: linear-gradient(150deg, #c0392b, #8e2b20); border-radius: 16px; color: #ffeccf;
}
.packet .p .ic { font-size: 28px; }
.packet .p .g { flex: 1; }
.packet .p .t { font-weight: 800; }
.packet .p button { width: auto; padding: 9px 16px; background: #ffe6b0; }
.grabbed { text-align: center; padding: 10px; }
.grabbed .amt { font-size: 30px; font-weight: 800; color: var(--gold); }

.bar { border-top: 1px solid var(--line); padding: 8px 10px calc(8px + var(--safe-bottom)); background: rgba(16,12,8,.96); }
.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; }
.chips button { width: auto; flex: 0 0 auto; padding: 7px 13px; border-radius: 999px; font-size: 13px;
  background: rgba(242,195,76,.13); color: var(--gold); border: 1px solid var(--gold-dim); font-weight: 600; }
.chips button.sh { background: rgba(192,57,43,.2); color: #ff9a8b; border-color: rgba(239,91,91,.4); }
.sendline { display: flex; gap: 8px; align-items: center; }
.sendline input { flex: 1; padding: 10px 13px; }
.sendline button { width: auto; padding: 10px 15px; }
.hint { font-size: 11.5px; color: var(--sub); padding: 0 2px 6px; }

/* 结算弹层 */
.sheet { position: absolute; inset: 0; background: rgba(0,0,0,.7); display: flex; align-items: flex-end; z-index: 50; }
.sheet .inner { width: 100%; max-height: 82%; overflow-y: auto; background: var(--bg2);
  border-radius: 20px 20px 0 0; padding: 16px 16px calc(18px + var(--safe-bottom)); }
.sheet h3 { margin: 0 0 12px; font-size: 16px; }
.sr { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; align-items: center; }
.sr .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr .hd2 { color: var(--sub); font-size: 12px; }
.sr .num { font-variant-numeric: tabular-nums; font-weight: 700; }

/* 玩法说明 */
.rules h2 { font-size: 15px; margin: 18px 0 8px; }
.handtab { width: 100%; border-collapse: collapse; font-size: 13px; }
.handtab td, .handtab th { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; }
.handtab th { color: var(--sub); font-weight: 600; font-size: 12px; }
.handtab .m { color: var(--gold); font-weight: 700; text-align: right; }

/* onboarding */
.step { text-align: center; padding: 26px 4px 10px; }
.step .no { color: var(--gold); font-size: 12px; letter-spacing: 2px; }
.step h2 { margin: 8px 0 6px; font-size: 20px; }
.step p { color: var(--sub); margin: 0 0 18px; font-size: 13px; }
.pin { display: flex; gap: 10px; justify-content: center; margin: 18px 0 22px; }
.pin i { width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--gold-dim); display: block; }
.pin i.on { background: var(--gold); border-color: var(--gold); }
.keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.keys button { padding: 15px 0; font-size: 20px; background: #241d14; color: var(--text); border: 1px solid var(--line); }

.toast { position: absolute; left: 50%; bottom: 86px; transform: translateX(-50%);
  background: rgba(0,0,0,.86); color: #fff; padding: 10px 16px; border-radius: 12px;
  font-size: 13px; z-index: 99; max-width: 88%; text-align: center; }


/* ---------- 对齐原版的补充样式 ---------- */
.lobbysub { color: var(--sub); font-size: 11px; letter-spacing: 3px; margin: -4px 0 12px 2px; }
.grp { color: var(--sub); font-size: 12.5px; margin: 16px 0 8px 2px; }
.grp:first-of-type { margin-top: 4px; }
.roomcard .online { color: var(--sub); font-size: 12px; font-variant-numeric: tabular-nums; }
.packet .sub2 { font-size: 11.5px; opacity: .82; margin-top: 3px; }
.sheet-inline { }