/* 红白金 · 小贵公子。保留原有结构、动作和状态，集中覆盖展示层。 */
:root {
  color-scheme: light;
  --ink: #faf7f1;
  --ink-2: #fffdf9;
  --card: #fffdfb;
  --card-2: #f5eee4;
  --bubble: #fffefd;
  --line: #e7d7bf;
  --line-strong: #c5a06b;
  --gold: #926024;
  --gold-deep: #a77a3d;
  --gold-soft: #f7eedf;
  --paper: #332b28;
  --mute: #736458;
  --red: #a62230;
  --red-deep: #811a26;
  --win: #39724b;
  --loss: #a62230;
  --num: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --brand: #941f29;
  --heading: #4c2225;
  --metal: #cfaa71;
  --shadow: 0 3px 12px #68401805, 0 1px 2px #68401808;
}
html { background: #ece5dc; }
body { max-width: 520px; margin: 0 auto; font-size: 16px; line-height: 1.5; }
button, input, a { touch-action: manipulation; }
button { min-height: 44px; }
button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid #b68743; outline-offset: 3px; }
input:focus-visible { outline: 2px solid #b68743; outline-offset: 2px; }
h1, h2, h3, h4 { color: var(--heading); letter-spacing: -.025em; }
.num, .end, .t-bal, .t-clock, .hb-amount, .delta { font-variant-numeric: tabular-nums; letter-spacing: -.035em; }
.page { padding: calc(18px + var(--safe-t)) 18px calc(96px + var(--safe-b)); }
.hint, .field span, .row .body small { font-size: 14px; }
.panel { padding: 18px; border-radius: 20px; box-shadow: var(--shadow); margin-bottom: 16px; }
.panel-head { font-size: 15px; margin: 0 0 12px; }
.row { padding: 16px 0; border-bottom-color: var(--line); gap: 12px; }
.row .body { overflow-wrap: anywhere; }
.row .body b { font-size: 16px; }
.row .end { font-size: 22px; }
.row .end small { font-size: 12px; }
.section-title { margin: 28px 0 14px; gap: 12px; }
.section-title h2 { font-size: 20px; padding-bottom: 0; }
.section-title h2::after { display: none; }
.section-title small { font-size: 13px; text-align: right; }
.btn { min-height: 48px; border-radius: 14px; padding: 13px 18px; font-size: 16px; }
.btn-gold, .btn-red { color: #fffaf0; background: linear-gradient(120deg, #a72534, #841c29); border: 1px solid #b88a51; box-shadow: inset 0 1px #ffe5b438, 0 3px 8px #6b222312; }
.btn-ghost { background: #fffdf9; color: var(--brand); border: 1px solid var(--line-strong); }
.btn:disabled { opacity: 1; color: #998b7a; border-color: #e4d9c9; background: #f2ede5; box-shadow: none; cursor: not-allowed; }
.btn-sm { min-height: 44px; font-size: 14px; }
.icon-btn { width: 44px; height: 44px; border: 1px solid var(--line); color: var(--gold); }
.link-btn { font-size: 14px; color: var(--brand); text-decoration: none; }
.pill { font-size: 12px; padding: 3px 10px; color: var(--brand); background: #f7e9e3; }
.field input { min-height: 48px; font-size: 16px; border-color: var(--line-strong); background: #fffdfa; }
.avatar { color: var(--brand); border: 1px solid var(--line-strong); background: linear-gradient(145deg, #fffdfa, #f0e2cc); overflow: hidden; }
.brand-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.brand-bar h1 { display: flex; align-items: baseline; gap: 3px; font-size: 27px; color: var(--brand); letter-spacing: -.04em; }
.brand-bar h1 span { font-size: 25px; font-weight: 600; letter-spacing: -.065em; }
.brand-bar .icon-btn { border: 0; }
.lobby-top { margin-bottom: 18px; }
.lobby-top .who { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.lobby-top .who b { overflow-wrap: anywhere; }
.lobby-top .pill { white-space: nowrap; min-height: 36px; background: none; color: var(--gold); }
.hero { border-color: #c7aa7f; border-radius: 18px; margin: 0 0 20px; padding: 24px 18px 18px; background-image: none; background-color: #f8ead4; box-shadow: inset 0 0 0 3px #fff8e5, var(--shadow); }
.hero.has-art::after { background: linear-gradient(90deg, #fffaf4d9 0%, #fffaf4b0 30%, #fffaf400 63%); }
.hero .tag { display: inline-flex; position: relative; top: auto; left: auto; color: #fff8e9; background: var(--brand); border: 1px solid var(--metal); font-size: 12px; padding: 3px 10px; }
.hero .title { color: var(--heading); font-size: 32px; line-height: 1.15; margin-top: 20px; letter-spacing: -.04em; max-width: 62%; }
.hero .title small { font-size: 14px; line-height: 1.5; color: var(--gold); letter-spacing: .08em; }
.hero .hero-sub { font-size: 14px; color: #765b45; line-height: 1.6; max-width: 54%; margin: 10px 0 20px; }
.lobby-hero { padding-top: 22px; background-size: auto 100%; background-position: 63% center; }
.lobby-hero .title { font-size: clamp(32px, 9vw, 42px); }
.lobby-hero .btn-row { margin-top: 32px; }
.lobby-hero .btn-row .btn:first-child { flex: 1.5; }
.hero .btn-row .btn { min-height: 46px; font-size: 15px; }
.balance-card { padding: 20px 18px 0; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 20px; }
.balance-card .label { font-size: 14px; }
.balance-card .amount { gap: 8px; margin: 0 0 12px; align-items: baseline; }
.balance-card .amount .num { min-width: 0; font-size: clamp(34px, 10vw, 46px); line-height: 1.25; color: var(--brand); overflow-wrap: anywhere; }
.balance-card .amount .cur { font-size: 14px; color: var(--mute); }
.balance-card .amount .icon-btn { margin-left: auto; flex: none; }
.wallet-actions { gap: 0; border-top: 1px solid var(--line); }
.wallet-actions button { background: none; border: 0; border-radius: 0; padding: 16px 4px; color: var(--brand); gap: 3px; font-size: 15px; }
.wallet-actions button + button { border-left: 1px solid var(--line); }
.wallet-actions button.is-off { color: #8f8374; }
.wallet-actions small { font-size: 12px; font-weight: 400; }
.nav { max-width: 520px; margin: 0 auto; background: #fffdf9f5; border-top: 1px solid var(--line); padding: 7px 12px calc(7px + var(--safe-b)); box-shadow: 0 -4px 16px #72441e05; }
.nav-btn { color: var(--mute); font-size: 14px; gap: 3px; min-height: 58px; position: relative; }
.nav-btn .ico { filter: none; font-size: 23px; }
.nav-btn.is-active { color: var(--brand); font-weight: 600; }
.nav-btn.is-active::after { content: ''; position: absolute; bottom: 0; width: 12px; height: 2px; border-radius: 2px; background: var(--metal); }
.sub { min-height: 100dvh; }
.sub-top { background: #fffdf9f5; padding: calc(12px + var(--safe-t)) 14px 12px; grid-template-columns: 44px minmax(0,1fr) 44px; }
.sub-top h2 { font-size: 19px; }
.sub-body { padding: 22px 18px calc(30px + var(--safe-b)); }
@media (min-width: 521px) { body { box-shadow: 0 0 60px #3b281016; } }
@media (max-width: 359px) { .page, .sub-body { padding-left: 14px; padding-right: 14px; } .lobby-top .who { align-items: flex-start; flex-direction: column; gap: 0; } }

/* Shared icons, page headers and illustration surfaces. */
.ui-icon { display: inline-block; width: 24px; height: 24px; flex: none; vertical-align: middle; }
.ico { display: inline-flex; align-items: center; justify-content: center; color: var(--gold); }
.nav-btn .ico { color: inherit; }
.nav-btn .ui-icon { width: 25px; height: 25px; }
.invite-action { display: inline-flex; align-items: center; gap: 6px; }
.invite-action .ui-icon, .balance-eye .ui-icon { width: 19px; height: 19px; }
.balance-eye { min-width: 44px; min-height: 44px; color: var(--mute); }
.page-heading { text-align: center; margin: 0 -18px 22px; padding: 0 18px 18px; border-bottom: 1px solid var(--line); }
.page-heading h1 { font-size: 21px; line-height: 1.5; color: #701f29; }
.hero.hero-sm { min-height: 230px; padding: 24px 18px; background-size: auto 100%; background-position: 62% center; }
.hero.hero-sm .title { margin-top: 14px; font-size: 30px; max-width: 52%; }
.hero.hero-sm .hero-sub { max-width: 48%; margin-bottom: 0; }
.hero.event-hero { min-height: 215px; background-position: center; background-size: cover; }
.hero.event-hero .title { font-size: 32px; margin-top: 28px; max-width: 35%; }
.hero.event-hero::after { background: linear-gradient(90deg, #fffaf490, #fffaf400 40%); }
.hero .packet-stack { display: none; }

/* Local / Telegram fallback entry. */
.login { min-height: 100dvh; padding: 20px 22px 32px; background: var(--ink); }
.login-card { max-width: 420px; padding-bottom: var(--safe-b); }
.login-art { height: 290px; margin: 0 -22px 24px; border-bottom: 1px solid var(--line); }
.login-title { font-size: 32px; color: var(--brand); }
.login .hint { font-size: 14px; margin-bottom: 28px; }
.login .field { margin: 18px 0; }
.login .field span { color: var(--heading); font-size: 16px; font-weight: 600; margin-bottom: 10px; }
.login-note { font-size: 13px; color: var(--mute); margin: 18px 0 0; }
.startup { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--brand); }
.startup b { font-size: 28px; }
.startup span { font-size: 14px; color: var(--mute); }
.support-art { height: 210px; border: 1px solid var(--line); border-radius: 18px; margin-bottom: 22px; }
.transfer-balance { font-size: 14px; color: var(--mute); margin: 18px 0 24px; }
.transfer-balance b { color: var(--brand); font-variant-numeric: tabular-nums; }

/* Events and progress. */
.checkin { margin: 20px 0; }
.checkin .track, .progress-bar { background: #eee5d8; height: 6px; }
.checkin .track i, .progress-bar i { background: linear-gradient(90deg, #b92c3a, #cc9d55); }
.milestone { padding: 16px 0; border-color: var(--line); font-size: 14px; }
.milestone .prize { font-size: 20px; }
.milestone .btn { min-height: 44px; font-size: 14px; }
.medal { background: #e5d8c2; color: #584631; }
.medal.m1 { background: linear-gradient(145deg, #f6e5b9, #c49852); }
.medal.m2 { background: linear-gradient(145deg, #f0efed, #b9b7b0); }
.medal.m3 { background: linear-gradient(145deg, #efdbc7, #b48964); }

/* Room selection uses real room names / online counts, not labels in an image. */
.room-grid { grid-template-columns: 1fr; gap: 14px; }
.room-card { display: flex; align-items: center; gap: 14px; padding: 16px; text-align: left; border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: var(--shadow); }
.room-card .art { width: 82px; height: 86px; flex: none; margin: 0; border-radius: 15px; border: 1px solid var(--metal); background: linear-gradient(145deg, #aa2432, #701923); box-shadow: inset 0 0 0 4px #fff1ce14; text-align: center; }
.room-card .art b { color: #f5dfb1; font-size: 27px; letter-spacing: -.05em; }
.room-card .art small { color: #fff5e4; font-size: 13px; }
.room-card .art .live { background: #9bb88b; box-shadow: none; }
.room-info { flex: 1; min-width: 0; }
.room-card .name { font-size: 17px; color: var(--heading); overflow-wrap: anywhere; }
.room-card .count { font-size: 18px; color: var(--brand); margin: 6px 0 2px; }
.room-card .count span { font-family: var(--body); font-size: 12px; color: var(--mute); font-weight: 400; letter-spacing: 0; }
.room-card .hint { font-size: 13px; }
.room-enter { font-size: 13px; color: var(--brand); white-space: nowrap; }
.room-card.is-closed { box-shadow: none; background: #f5f0e8; }
.room-card.is-closed .art { opacity: .45; box-shadow: none; }
.room-card.is-closed .room-enter { color: var(--mute); }

/* Profile: rich imagery above a restrained account surface. */
.profile-card { border: 1px solid #c7aa7f; border-radius: 18px; background: var(--card); overflow: hidden; box-shadow: var(--shadow); margin-bottom: 16px; }
.profile-cover { height: 160px; }
.profile-identity { padding: 0 16px; margin: -23px 0 0; align-items: center; display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 8px 12px; position: relative; }
.profile-identity .avatar { width: 58px; height: 58px; grid-row: 1 / 3; border: 4px solid var(--card); outline: 1px solid #cfaf78; }
.profile-identity .who { padding-top: 28px; }
.profile-identity .since { grid-column: 2; max-width: none; text-align: left; }
.profile-identity .who small { display: flex; align-items: center; gap: 4px; line-height: 1.5; }
.copy-uid { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; color: var(--gold); flex: none; }
.copy-uid .ui-icon { width: 17px; height: 17px; }
.profile-balance { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 14px 16px 0; padding: 14px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--mute); }
.profile-balance b { font-size: 28px; color: var(--brand); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; min-width: 0; }
.me-top .who { min-width: 0; flex: 1; }
.me-top .who b { overflow-wrap: anywhere; font-size: 20px; }
.me-top .who small { font-size: 13px; overflow-wrap: anywhere; }
.me-top .since { font-size: 12px; flex: none; max-width: 38%; }
.stat-grid { gap: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: var(--shadow); padding: 18px 0; }
.stat { padding: 0 8px; border: 0; border-radius: 0; background: none; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat b { font-size: 26px; color: var(--brand); margin-bottom: 8px; }
.stat small { font-size: 13px; }
.me-grid { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 10px 2px; box-shadow: var(--shadow); gap: 4px 0; }
.me-grid button { font-size: 14px; padding: 19px 4px; gap: 12px; }
.me-grid .ico { width: 44px; height: 40px; border-radius: 12px; background: linear-gradient(145deg, #faf2e4, #fffdf900); }
.me-grid .ui-icon { width: 28px; height: 28px; stroke-width: 1.5; }
.foot { font-size: 12px; letter-spacing: .08em; }
.mascot { width: 100%; max-width: 310px; height: 180px; object-fit: cover; object-position: 78% center; border-radius: 18px; margin-bottom: 22px; }
.mark { background: linear-gradient(145deg, #fff9ec, #e7c996); border: 1px solid var(--metal); color: var(--brand); }
.av.bot, .hb-avatar { overflow: hidden; position: relative; }
.av.bot img, .hb-avatar img { width: 250%; max-width: none; height: 150%; position: absolute; top: -10%; left: -135%; object-fit: cover; }

/* Subpages. */
.ledger .row { align-items: flex-start; }
.ledger .row .end { flex: none; max-width: 40%; overflow-wrap: anywhere; }
.summary > div, .summary-note, .inout, .inout > div:last-child, .rank-row, .rule-sec { border-color: var(--line); }
.summary b { font-size: clamp(19px, 5.8vw, 25px); color: var(--heading); }
.summary small, .summary-note, .inout small { font-size: 13px; }
.summary-note { line-height: 1.65; }
.empty-state { padding: 30px 12px; }
.empty-state h3 { font-size: 20px; }
.empty-state p { font-size: 14px; line-height: 1.7; }
.tabs { border: 1px solid var(--line); background: #f5ede1; padding: 4px; border-radius: 14px; gap: 4px; scrollbar-width: thin; }
.tabs button { min-height: 44px; border: 0; border-radius: 10px; padding: 10px 12px; flex: 1 0 auto; }
.tabs button.is-active { background: #fffefd; color: var(--brand); box-shadow: var(--shadow); }
.seg { display: flex; gap: 0; background: #f3ecdf; padding: 4px; border-radius: 14px; }
.seg button { flex: 1; border: 0; border-radius: 10px; padding: 10px 8px; }
.seg button.is-active { background: var(--card); color: var(--brand); box-shadow: var(--shadow); }
.rank-row { padding: 17px 2px; gap: 12px; }
.rank-row .bal { font-size: 20px; color: var(--brand); }
.rank-row.four { grid-template-columns: 26px 36px minmax(0,1fr) auto; }
.rank-row.four > div:nth-child(3) { overflow-wrap: anywhere; font-size: 15px; }
.rank-row .av { background: #f0e5d5; color: var(--gold); border: 1px solid var(--line); }
.rank-me { font-size: 14px; line-height: 1.7; padding: 12px 4px; }
.switch { width: 50px; height: 32px; }
.switch i { background: #e7e1d9; border: 1px solid #d9d0c3; }
.switch i::after { box-shadow: 0 1px 4px #53311220; }
.switch input:checked + i { background: var(--brand); border-color: var(--brand); }
.switch { width: 52px; height: 44px; }
.switch i { inset: 6px 1px; }
.switch input { inset: 0; width: 100%; height: 100%; z-index: 1; cursor: pointer; margin: 0; }
.invite-code { color: var(--brand); font-size: clamp(28px, 9vw, 42px); overflow-wrap: anywhere; }
.invite-code button { min-width: 44px; flex: none; }
.lvls > div { padding: 14px 5px; }
.lvls small, .lvls .p { font-size: 12px; }
.stepline .no, .step .no { color: #fff9ef; background: var(--brand); border: 1px solid var(--metal); }
.rule-body { padding: 0 0 16px 0; }
.rule-sec summary { min-height: 52px; padding: 16px 0; }
.rule { color: #746559; font-size: 14px; line-height: 1.8; }
.grid3 { gap: 8px; }
.cell { padding: 16px 6px 10px; background: var(--card); box-shadow: var(--shadow); }
.cell .ex { font-size: 26px; color: var(--brand); }
.cell .h, .cell .m { font-size: 12px; }
.step p { font-size: 14px; line-height: 1.7; }

/* Chat-based game table. Retains independent feed scrolling and live controls. */
.table { position: relative; min-height: 0; height: 100vh; height: 100dvh; }
.t-top { grid-template-columns: 44px minmax(0,1fr) 44px; padding: calc(12px + var(--safe-t)) 16px 12px; border-bottom: 1px solid var(--line); flex: none; }
.t-title { text-align: left; font-size: 18px; color: var(--heading); }
.t-online { font-size: 13px; margin-top: 2px; }
.t-phase { display: grid; grid-template-columns: 1fr auto; margin: 14px 14px 10px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: var(--shadow); gap: 12px; flex: none; }
.t-phase-main { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; overflow: visible; white-space: normal; }
.t-phase-name { justify-self: start; align-self: center; padding: 4px 10px; border: 1px solid var(--metal); border-radius: 6px; background: var(--brand); color: #fff8eb; font-size: 15px; }
.t-clock, .t-phase.is-betting .t-clock { font-size: 32px; color: var(--brand); }
.t-clock:empty { display: none; }
.t-phase-hint { grid-column: 1 / -1; font-size: 14px; white-space: normal; color: var(--heading); overflow-wrap: anywhere; }
.t-phase > .link-btn { justify-self: start; }
.t-phase > .btn { justify-self: end; grid-column: 2; min-width: 105px; }
.t-phase-track { bottom: 0; left: 10px; right: 10px; height: 3px; border-radius: 3px; overflow: hidden; }
.t-phase-fill, .t-phase.is-betting .t-phase-fill { background: var(--brand); }
.feed { min-height: 0; padding: 10px 14px 16px; gap: 14px; }
.feed > .packets, .feed > .card, .feed > .result { margin-right: 0; }
.msg { gap: 10px; grid-template-columns: 34px minmax(0,1fr); }
.msg .av { width: 34px; height: 34px; font-size: 14px; }
.msg .av.bot { background: var(--gold-soft); border: 1px solid var(--line-strong); }
.msg .name { font-size: 13px; gap: 8px; flex-wrap: wrap; overflow-wrap: anywhere; }
.msg .name time { font-size: 12px; }
.bubble, .m-system .bubble { border: 1px solid var(--line); background: #fffefd; box-shadow: 0 2px 4px #8b5a2505; border-radius: 4px 14px 14px; padding: 10px 13px; max-width: 100%; }
.bubble .t { font-size: 16px; }
.bubble.num .t { font-size: 24px; }
.m-system .bubble .t { font-size: 14px; line-height: 1.7; }
.msg.mine { grid-template-columns: minmax(0,1fr) 34px; }
.msg.mine .bubble { background: #f8e7e4; border: 1px solid #e5c5be; color: var(--heading); }
.msg.mine .bubble time { color: #8b605c; }
.effect { font-size: 12px; padding: 4px 8px; }
.effect.bet, .effect.showhand { background: #f7e5e1; color: var(--brand); }
.effect.unbet { background: #ede7dd; }
.card, .result { max-width: calc(100% - 44px); margin-left: 44px; padding: 16px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: var(--shadow); }
.card h4, .result h4 { color: var(--heading); font-size: 17px; flex-wrap: wrap; gap: 4px; }
.card .r { gap: 12px; padding: 6px 0; align-items: baseline; }
.card .r span:first-child { flex: 1; }
.card .r span:last-child { overflow-wrap: anywhere; min-width: 0; max-width: 65%; }
.banner { margin: 0 0 0 44px; min-height: 82px; padding: 16px 12px 16px 78px; border-radius: 12px; border: 1px solid var(--metal); background: linear-gradient(115deg, #f9f0dd, #fffdf9 60%); box-shadow: inset 0 0 0 3px #d4aa6e20, var(--shadow); }
.banner::before { font-family: var(--body); color: var(--brand); font-size: 14px; line-height: 1.5; left: 16px; }
.banner .t, .banner.stop_bid .t, .banner.redo .t { font-size: clamp(20px, 6vw, 28px); color: var(--brand); letter-spacing: .015em; text-shadow: none; }
.banner.has-art { min-height: 0; }
.banner.has-art img { display: block; width: 100%; height: auto; aspect-ratio: 3/1; object-fit: contain; border-radius: 12px; }
.t-side { position: static; flex: none; display: flex; flex-direction: row; justify-content: space-between; gap: 12px; padding: 8px 14px; background: var(--ink); }
.side-btn { flex-direction: row; gap: 6px; width: auto; min-height: 40px; padding: 8px 12px; font-size: 13px; color: var(--gold); background: #fffdf9; border-color: var(--line); border-radius: 10px; backdrop-filter: none; }
.side-btn .ui-icon { width: 19px; height: 19px; }
.side-btn.is-on { background: #f9e6e1; color: var(--brand); border-color: #d6aaa1; }
.t-chips { padding: 8px 14px; gap: 7px; background: var(--ink-2); flex: none; }
.t-chips button { min-height: 42px; padding: 8px 14px; font-size: 16px; background: #fffdf9; }
.t-chips button.sh { background: #fae9e4; color: var(--brand); border-color: #dec2b4; }
.t-input { flex: none; background: #fffdf9; border-top: 1px solid var(--line); padding: 8px 12px calc(12px + var(--safe-b)); }
.t-status { align-items: baseline; flex-wrap: wrap; gap: 5px; font-size: 12px; padding: 2px 2px 8px; }
.t-status > span:first-of-type { flex: 1; min-width: 130px; }
.t-status .t-bal { font-size: 16px; color: var(--gold); white-space: nowrap; }
.t-status .t-bal::before { content: ''; }
.t-status i { width: 6px; height: 6px; align-self: center; }
.t-form { gap: 8px; }
.t-form input { min-height: 48px; border-color: var(--line); background: var(--ink); padding: 12px 14px; }
.t-form .icon-btn { width: 44px; height: 44px; }
.t-form .send { border: 1px solid var(--metal); color: #fff9ef; background: var(--brand); }
.table-welcome { text-align: center; flex: 0 1 auto; padding: 8px 18px; min-height: 0; overflow: hidden; }
.welcome-art { height: clamp(100px, 24dvh, 210px); max-width: 340px; margin: 0 auto 12px; border-radius: 18px; }
.table-welcome h2 { font-size: 22px; }
.table-welcome p { font-size: 14px; margin: 6px 0; color: var(--mute); }
.res { border-top-color: var(--line); grid-template-columns: minmax(0,1fr) auto; padding: 15px 0; }
.res .who { font-size: 15px; overflow-wrap: anywhere; }
.res .what { font-size: 12px; line-height: 1.8; }
.res .delta { font-size: 24px; grid-column: 2; text-align: right; }
.res .who .tag { background: #f6e7d5; color: #985828; font-size: 11px; }
.res.is-me { background: #fbede8; margin: 0 -8px; padding: 15px 8px; }

/* Packet and detail surfaces. The card remains a live claim control. */
.hb-wrap { margin-left: 44px; max-width: calc(100% - 44px); }
.hb { border: 1px solid var(--metal); border-radius: 15px; box-shadow: var(--shadow); }
.hb-top { background: linear-gradient(135deg, #ad2634, #851c27); padding: 22px 16px; color: #fce5b8; }
.hb-icon { color: #fbe3ad; background: #f9e3b01a; border: 1px solid #efcb8138; }
.hb-foot { background: #f7ead6; color: #805b2b; font-size: 12px; padding: 10px 14px; }
.hb.is-done .hb-top { background: linear-gradient(135deg, #ad716c, #84544f); color: #fff0d5; }
.hb.is-done .hb-foot { background: #eee2d0; }
.hb.is-live::before { display: none; }
.hb.is-live .hb-top { animation: none; }
.hb-head { padding: 26px 18px; margin: 0 0 18px; background: linear-gradient(135deg, #ac2634, #7c1826); border: 1px solid var(--metal); border-radius: 16px; }
.hb-avatar { width: 72px; height: 72px; border: 2px solid #e3bf7c; }
.hb-amount { font-size: 48px; color: #ffedc7; margin-top: 16px; }
.hb-amount small { font-size: 14px; }
.hb-hand { color: #f5d293; margin-top: 6px; }
.hb-from { font-size: 15px; }
.hb-head .btn { background: #f8dfac; color: #78202a; border: 1px solid #ffe8b8; }
.hb-sum { font-size: 13px; padding: 14px; flex-wrap: wrap; gap: 6px; }
.hb-row { border-color: var(--line); padding: 18px 4px; }
.hb-row .body small { font-size: 12px; }
.hb-row .end b { font-size: 22px; color: var(--brand); }
.hb-row.is-banker { background: #f8ecd9; border-left-color: var(--metal); }
.crown { color: #7d4f20; background: #f3ddb5; }

/* Bottom sheets and comparison cards. */
.sheet { background: #241c1890; backdrop-filter: blur(3px); padding-top: calc(18px + var(--safe-t)); }
.sheet-card { display: flex; flex-direction: column; max-width: 520px; margin: 0 auto; padding: 0 20px calc(16px + var(--safe-b)); max-height: 92dvh; background: var(--ink-2); border: 1px solid var(--metal); border-bottom: 0; border-radius: 24px 24px 0 0; box-shadow: 0 -8px 50px #33201818; overflow: hidden; }
.sheet-card h3 { font-size: 23px; }
.sheet-card > .btn { min-height: 48px; margin-top: 14px; flex: none; }
.sheet-card .field { margin-top: 18px; }
.sheet-card .field span { color: var(--heading); font-size: 15px; }
.sheet-card .result { max-width: none; margin: 0; border: 0; padding: 0; box-shadow: none; }
.sheet-top { display: flex; align-items: center; justify-content: flex-end; position: relative; height: 50px; flex: none; }
.sheet-handle { position: absolute; top: 14px; left: calc(50% - 18px); width: 36px; height: 4px; border-radius: 4px; background: #ded1be; }
.sheet-close { width: 36px; height: 36px; min-height: 36px; border: 0; }
.sheet-close .ui-icon { width: 21px; height: 21px; }
#sheetBody { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding: 0 2px 4px; scrollbar-width: thin; }
html.sheet-open { overflow: hidden; }
.toast { background: #522f31; color: #fff8ec; border: 1px solid var(--metal); border-radius: 14px; padding: 12px 18px; box-shadow: 0 6px 24px #3b1c2328; font-size: 14px; }
.lang-list { margin-top: 20px; }
.lang-list button { padding: 17px 8px; gap: 14px; margin: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; min-height: 64px; }
.lang-list button.is-active { color: var(--brand); font-weight: 600; border-color: var(--line); }
.lang-list .flag { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; color: var(--gold); }
.lang-list button .chk { font-size: 13px; color: var(--mute); }
.lang-list button.is-active .chk { color: var(--brand); font-size: 20px; }
.cmp { border: 1px solid var(--line); background: #fffdfa; border-radius: 16px; margin: 14px 0; padding: 18px 14px; box-shadow: var(--shadow); }
.cmp-title { color: var(--heading); padding-right: 58px; font-size: 16px; }
.cmp-row { padding: 10px 0; border-top: 1px dashed var(--line); align-items: center; }
.cmp-row small { font-size: 13px; }
.cmp-row .mono { color: var(--gold); }
.cmp-ok { top: 17px; }
.cmp-ok.ok { background: #e9f1e7; }
.cmp-ok.bad { background: #f8e3e0; }
.card.fair .mono, .mono { font-size: 12px; }
html.big body { font-size: 18px; }
html.big .row .body b, html.big .bubble .t, html.big .btn, html.big .rule { font-size: 18px; }
html.big .t-clock { font-size: 38px; }

/* V2: consistent fine details across main pages, sheets and live state cards. */
.lobby-top .pill { font-size: 14px; }
.hero .title { text-wrap: balance; }
.hero.hero-sm .title { max-width: 52%; }
.hero.event-hero .title { max-width: 38%; }
.hero .hint { position: relative; z-index: 1; max-width: 55%; font-size: 13px; line-height: 1.6; }
.hero::before { content: ''; pointer-events: none; position: absolute; z-index: 2; inset: 4px; border: 1px solid #fff9e9a0; border-radius: 14px; }
.nav-btn.is-active .ico { background: #f6e6e1; border-radius: 10px; }
.nav-btn .ico { width: 42px; height: 30px; }
.nav-btn.is-active::after { display: none; }
.notice-list .row { align-items: flex-start; }
.notice-list .row .ico { margin-top: 3px; }
.notice-list .row .body b { font-size: 16px; margin-bottom: 5px; }
.notice-list .row .body small { display: block; line-height: 1.7; }
.checkin-gift { display: grid; place-items: center; width: 36px; height: 36px; background: #f6e8ce; border: 1px solid #d8bb89; border-radius: 10px; color: var(--gold); }
.checkin-caption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; color: var(--mute); margin: 12px 0 16px; }
.checkin-caption b { color: var(--heading); font-weight: 600; }
.support-cta { margin-bottom: 6px; gap: 10px; }
.support-cta .ui-icon { width: 21px; height: 21px; }
.safety-note { display: flex; gap: 10px; line-height: 1.8; }
.safety-note .ui-icon { width: 20px; height: 20px; margin-top: 3px; color: var(--gold); }
.room-card .count { display: flex; align-items: baseline; gap: 5px; }
.room-enter { display: inline-flex; align-items: center; min-height: 36px; border-left: 1px solid var(--line); padding-left: 12px; }
.room-card .art::after { display: none; }
.ledger-balance .amount { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 2px 0 18px; }
.ledger-balance .amount .num { min-width: 0; max-width: 100%; overflow-wrap: anywhere; font-size: clamp(30px, 10vw, 46px); line-height: 1.25; color: var(--brand); }
.ledger-balance .amount .cur { font-size: 14px; color: var(--mute); }
.inout > div, .summary > div { min-width: 0; overflow-wrap: anywhere; }
.inout b { font-size: clamp(18px, 5.5vw, 24px); }
.hb-row .body { overflow-wrap: anywhere; }
.hb-row .end { flex: none; max-width: 40%; overflow-wrap: anywhere; }
.hb-row .end b { font-size: 19px; }
.hb-row .body b { font-size: 14px; }
.hb-row .av { width: 32px; height: 32px; }
.hb-icon .ui-icon { width: 32px; height: 32px; }
.hb-foot { flex-wrap: wrap; gap: 5px; }
.hb-head .hb-meta { opacity: 1; color: #f2d4bf; font-size: 13px; }
.hb-head .hb-from { color: #fff7e9; }
.hb-amount.muted { font-size: 25px; line-height: 1.5; }
.crown { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.crown .ui-icon { width: 13px; height: 13px; }
.fair-line { line-height: 1.7; }
.fair-line .ui-icon { width: 14px; height: 14px; }
.fair-line .link-btn { display: inline-block; min-height: 36px; }
.t-phase > .link-btn { align-self: center; }
.t-phase > .btn { border-radius: 11px; }
.t-chips { scrollbar-width: none; }
.t-chips button { flex: none; }
.t-chips button:active, .room-card:active { background-color: #f5ead9; }
.rule-sec summary { line-height: 1.6; }
.foot { display: flex; align-items: center; justify-content: center; gap: 14px; }
.foot::before, .foot::after { content: ''; width: 26px; height: 1px; background: var(--line-strong); }
.me-top.profile-identity .since { max-width: none; text-align: left; margin-left: 0; }
.invite-code .ui-icon { width: 22px; height: 22px; }
.profile-identity .who small { overflow-wrap: anywhere; }
.row-action { width: 100%; text-align: left; color: var(--paper); }
.row-action:disabled { color: var(--mute); cursor: not-allowed; }
.row-action .body { min-width: 0; }
.row-action .avatar { width: 42px; height: 42px; }
.msg .av.bot, .hb-avatar, .avatar.regal-avatar { background: #1c1c1c; }
.av.bot img, .hb-avatar img { display: none; }
.t-phase-main { grid-column: 1; grid-row: 1; }
.t-phase > .btn { grid-row: 1; align-self: center; }
.t-phase > .link-btn { grid-row: 2; grid-column: 1 / -1; }
.t-form input { border-radius: 13px; }
@media (max-width: 359px) {
  .page-heading { margin-left: -14px; margin-right: -14px; }
  .room-card { padding: 12px; gap: 10px; }
  .room-card .art { width: 64px; height: 72px; }
  .room-card .name { font-size: 15px; }
  .room-enter { font-size: 12px; }
  .me-top { gap: 8px; flex-wrap: wrap; }
  .card, .result, .banner, .hb-wrap { margin-left: 0; max-width: 100%; }
  .res .delta { font-size: 21px; }
  .side-btn { padding: 8px; }
}
@media (max-height: 680px) {
  .t-phase { margin-top: 8px; padding: 10px 14px; gap: 8px; }
  .table-welcome { display: none; }
  .t-side { padding-top: 4px; padding-bottom: 4px; }
}
@media (max-height: 500px) {
  .table { height: auto; min-height: 100dvh; }
  .feed { flex: 0 0 auto; max-height: 40dvh; min-height: 120px; }
  .t-top { padding-top: calc(6px + var(--safe-t)); padding-bottom: 6px; }
  .t-phase { margin-top: 6px; margin-bottom: 6px; }
  .t-phase-main { gap: 5px 10px; }
  .t-phase-hint { font-size: 13px; }
  .t-clock { font-size: 26px; }
  .t-side { padding-top: 4px; padding-bottom: 4px; }
  .sheet-card { max-height: 94dvh; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* 成绩榜(照参考平台):徽章 + 名字 + 牌型 + 大字毛赢,下面小字「抢 x · 下 y」和「前 › 后」 */
.result h4 .ico, .result h4 svg { width: 18px; height: 18px; vertical-align: -3px; }
.res2 { padding: 12px 12px; margin: 8px 0; border-radius: 12px; background: var(--card-2, #fbf7f0); border: 1px solid var(--line); }
.res2.is-me { outline: 2px solid var(--gold, #c9a34a); }
.res2 .r1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.res2 .badge { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: #c8352e; }
.res2.is-loss .badge { background: #8a7a6a; }
.res2.is-push .badge { background: #b8902f; }
.res2 .badge.crown { background: transparent; color: #c9a34a; font-size: 18px; }
.res2 .badge.crown svg { width: 20px; height: 20px; }
.res2 .nm { font-weight: 700; font-size: 15px; padding: 2px 8px; border-radius: 8px; background: #f1e9dc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.res2.is-banker .nm { background: #f6e7b8; color: #6b4a00; }
.res2 .hd { color: var(--paper, #2b1d16); font-size: 14px; flex: none; }
.res2 .amt { margin-left: auto; font-family: var(--num, inherit); font-size: 20px; font-weight: 800; flex: none; }
.res2.is-win .amt { color: #1f8a4c; }
.res2.is-loss .amt { color: #c8352e; }
.res2.is-push .amt { color: var(--mute, #8a7a6a); font-size: 14px; font-weight: 600; }
.res2 .r2 { margin-top: 6px; font-size: 13px; color: #8a6a3a; }
.res2 .r2.trend { color: var(--mute, #8a7a6a); font-size: 12px; overflow-wrap: anywhere; }
.res2 .r3 { margin-top: 4px; font-size: 12px; color: var(--mute, #8a7a6a); font-family: var(--num, inherit); }
.res2 .r3 i { font-style: normal; margin: 0 4px; color: #b8902f; }
.res2 .run-w { color: #1f8a4c; font-weight: 700; }
.res2 .run-l { color: #c8352e; font-weight: 700; }
.res2 .dots { display: inline-flex; gap: 3px; vertical-align: middle; margin-left: 4px; }
.res2 .dots i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid #c8352e; }
.res2 .dots i.w { background: #1f8a4c; border-color: #1f8a4c; }

/* 后台模拟对比 */
.sim-grid { align-items: start; }
.sim-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sim-table th, .sim-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.sim-table th:first-child, .sim-table td:first-child { text-align: left; color: var(--mute, #8a7a6a); }
.sim-table th { font-weight: 700; color: var(--heading, #2b1d16); }
.sim-table small.up { color: #1f8a4c; margin-left: 4px; }
.sim-table small.down { color: #c8352e; margin-left: 4px; }
.sim-bp { white-space: nowrap; } .sim-bp i { font-style: normal; font-size: 11px; color: var(--mute, #8a7a6a); margin: 0 2px 0 6px; }

/* 提现流水进度条 */
.wd-bar { height: 8px; border-radius: 4px; background: #eee3d0; overflow: hidden; margin-top: 6px; }
.wd-bar i { display: block; height: 100%; background: linear-gradient(90deg, #f3d98a, #b8902f); }

/* ---------- 2026-09-10 牌桌收紧 ----------
   对照参考平台:一屏要能装下头部 + 横幅 + 信息卡 + 几条消息。
   之前信息卡 332px、成绩榜 453px、等待卡 289px,单条消息 95px,太占地方。
   注意:输入框字号保持 16px,小于 16px 时 iOS 一点输入框就会自动放大页面。 */
.t-top { padding: calc(8px + var(--safe-t)) 14px 8px; }
.t-title { font-size: 16px; }

/* 顶部状态卡:参考平台是一条细带,我们这张卡原本 154px,收到 110 左右 */
.t-phase { margin: 8px 12px 6px; padding: 10px 12px; border-radius: 14px; }
.t-phase-main { gap: 8px; }
.t-phase-name { padding: 3px 9px; font-size: 13px; }
.t-clock, .t-phase.is-betting .t-clock { font-size: 26px; }
.t-phase-hint { font-size: 12.5px; }
.t-phase > .btn { min-width: 92px; }
.t-phase .link-btn { font-size: 13px; }
.feed { padding: 8px 12px 12px; gap: 9px; }

/* 横幅:参考平台是一条居中的小条,不是通栏大图 */
.banner { margin: 2px auto; }
.banner.has-art { max-width: 236px; }
.banner.has-art img { border-radius: 10px; }

/* 信息卡 / 成绩榜 */
.card, .result { padding: 11px 12px; border-radius: 14px; font-size: 14px; line-height: 1.45; }
.card h4, .result h4 { font-size: 15px; }
.card .r { padding: 3px 0; gap: 10px; font-size: 13.5px; }

/* 聊天气泡 */
.msg { gap: 8px; grid-template-columns: 30px minmax(0, 1fr); }
.msg.mine { grid-template-columns: minmax(0, 1fr) 30px; }
.msg .av { width: 30px; height: 30px; font-size: 13px; }
.msg .name { font-size: 12px; }
.bubble, .m-system .bubble { padding: 8px 11px; font-size: 14.5px; line-height: 1.45; }
.bubble .t { font-size: 14.5px; line-height: 1.45; }
.msg .name { margin-bottom: 2px; }
.bubble.num .t { font-size: 20px; }

/* 成绩榜每一行 */
.res2 { padding: 8px 10px; margin: 5px 0; }
.res2 .nm { font-size: 14px; }
.res2 .hd { font-size: 13px; }
.res2 .amt { font-size: 18px; }
.res2 .r2 { font-size: 12px; margin-top: 4px; }
.res2 .r3 { font-size: 11.5px; }
.res2 .badge { width: 22px; height: 22px; }

/* 红包卡 */
.hb-top { padding: 16px 14px; }
.hb-head { padding: 18px 14px; margin: 0 0 12px; }
.hb-avatar { width: 54px; height: 54px; }
.hb-amount { font-size: 34px; margin-top: 10px; }
.hb-amount.muted { font-size: 20px; }
.hb-row { padding: 12px 4px; }
.hb-row .end b { font-size: 17px; }
.hb-sum { font-size: 12px; padding: 11px; }

/* 等待开局:图小一点,别占掉半屏 */
.table-welcome { padding: 6px 18px; }
.welcome-art { height: clamp(72px, 14dvh, 126px); max-width: 236px; margin: 0 auto 8px; border-radius: 14px; }
.table-welcome h2 { font-size: 18px; }
.table-welcome p { font-size: 13px; margin: 4px 0; }

/* 底部:两个按钮、快捷筹码、输入区 */
.t-side { padding: 6px 12px; gap: 10px; }
.side-btn { min-height: 34px; padding: 6px 10px; font-size: 12px; }
.side-btn .ui-icon { width: 16px; height: 16px; }
.t-chips { padding: 6px 12px; gap: 6px; }
.t-chips button { min-height: 36px; padding: 6px 12px; font-size: 15px; }
.t-input { padding: 6px 12px calc(10px + var(--safe-b)); }
.t-form input { min-height: 42px; padding: 10px 13px; }
.t-form .icon-btn { width: 40px; height: 40px; }
.t-status { font-size: 11.5px; padding: 2px 2px 6px; }
.t-status .t-bal { font-size: 15px; }

/* 迷牌:抢到之后自己的金额先盖住,按住往右拉开 */
.hb-veil-wrap { position: relative; overflow: hidden; border-radius: 12px; isolation: isolate; }
.hb-veil {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  /* 纯色打底再叠渐变:渐变万一没渲染出来也不会变成透明的 */
  background-color: #a8801f;
  background-image: linear-gradient(135deg, #c9a34a, #8d6a1f 55%, #b8902f);
  color: #fff6de; font-size: 15px; font-weight: 700; letter-spacing: .04em;
  cursor: grab; touch-action: none; user-select: none; opacity: 1;
  will-change: transform;
  /* 不留圆角:滑动时左边缘要是一条干净的直线,圆角会让金额从角上先漏出来 */
  border-radius: 0;
  box-shadow: inset 0 1px 0 #ffe9b955, inset 0 -2px 6px #00000022, 2px 0 10px #00000033;
}
.hb-veil:active { cursor: grabbing; }
.hb-veil i { font-style: normal; font-size: 22px; animation: veil-nudge 1.1s ease-in-out infinite; }
@keyframes veil-nudge { 0%, 100% { transform: translateX(0); opacity: .7; } 50% { transform: translateX(5px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hb-veil i { animation: none; } }
.hb-hidden { color: var(--gold, #c9a34a); letter-spacing: .06em; }
.side-btn.is-on { background: #f9e6e1; color: var(--brand); border-color: #d6aaa1; }

/* ---------- 称桶代理分成 ---------- */
.agent-formula-text { font-size: 13px; line-height: 1.6; margin: 2px 0 8px; color: var(--paper); }
.agent-sub { font-size: 12px; font-weight: 700; color: var(--gold); margin-top: 6px; }
.agent-period { font-size: 12px; color: var(--mute); margin-top: 2px; }
/* 每行都是「运算符 + 格子」× 3:运算符都落在 auto 列,6 个数字格都在 1fr 列,两行对齐 */
.agent-formula { display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr; align-items: start; gap: 8px 4px; margin: 10px 0 12px; }
.agent-f-item { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; }
.agent-f-item b { display: block; text-align: center; padding: 8px 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--card-2); font-size: 13px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.agent-f-item small { font-size: 11px; line-height: 1.3; text-align: center; color: var(--mute); overflow-wrap: anywhere; }
.agent-f-item.is-result b { color: var(--gold); border-color: var(--gold); font-weight: 800; }
.agent-f-op { align-self: center; margin-top: -16px; min-width: 8px; text-align: center; font-weight: 700; color: var(--mute); }
.agent-note-tag { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 6px; background: var(--card-2); color: var(--paper); font-size: 11px; font-weight: 700; }
.agent-row { flex-wrap: wrap; gap: 8px; }
.agent-row-edit { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.agent-row-edit input { width: 76px; }
.agent-row-edit small { min-width: 48px; text-align: right; color: var(--mute); }
.agent-preview-row.is-flag { background: rgba(224, 115, 106, 0.08); border-radius: 10px; }
.agent-flag { display: block; margin-top: 2px; color: var(--loss) !important; }
.agent-warn { margin: 6px 0; font-size: 13px; color: var(--loss); }
.agent-check { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
.agent-check input { width: auto; }

/* 大厅里的大话骰入口 */
.game-entry { display: flex; align-items: center; gap: 12px; width: 100%; margin: 12px 0 0; padding: 8px 12px 8px 8px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--card); color: inherit; text-align: left; }
.game-entry img { width: 64px; height: 64px; border-radius: 14px; flex: none; }
.game-entry .body { flex: 1; display: grid; gap: 2px; }
.game-entry .body small { opacity: .7; }

/* ---------- 大厅:游戏卡 ---------- */
/* 照品牌板:一行三个小方块,封面是 Scenario 出的图,名字放下面的金框条里(要翻译,不能画进图里)。
   游戏多了自动换行,不用改布局。 */
.game-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 4px; }
.game-card { display: grid; gap: 6px; width: 100%; padding: 0; background: none; border: 0; color: inherit; }
.game-card .cover { display: block; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid #d8bb8b; border-radius: 14px; background: #fbf1de; box-shadow: 0 4px 12px rgba(100, 51, 12, .1); }
.game-card .cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.game-card .body {
  display: flex; align-items: center; justify-content: center; min-height: 28px; padding: 3px 4px;
  border: 1px solid #e0c79a; border-radius: 9px; background: linear-gradient(180deg, #fffdf7, #f7ead2);
  font-size: 13px; font-weight: 600; color: var(--heading); line-height: 1.25; text-align: center; overflow-wrap: anywhere;
}
.game-card:active .cover { transform: translateY(1px); }
@media (hover: hover) { .game-card:hover .cover { border-color: #b8944f; box-shadow: 0 6px 16px rgba(100, 51, 12, .16); } }
@media (max-width: 340px) { .game-card .body { font-size: 12px; } }

/* ---------- 充值 ---------- */
/* 收款渠道全部来自后台配置,代码里不写死任何账号或二维码 */
.dep-amts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 12px; }
.dep-amt { padding: 11px 4px; border: 1px solid #d8bb8b; border-radius: 12px; background: linear-gradient(180deg,#fffdf7,#f7ead2); color: #5c3312; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dep-amt.is-on { border-color: #a3161a; color: #a3161a; background: linear-gradient(180deg,#fff6ef,#f8e2d6); box-shadow: inset 0 0 0 1px #a3161a33; }
.dep-chans { display: grid; gap: 8px; }
.dep-chan { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid #ddc196; border-radius: 14px; background: var(--card); color: inherit; text-align: left; }
.dep-chan.is-on { border-color: #a3161a; box-shadow: inset 0 0 0 1px #a3161a33; }
.dep-chan .ico { width: 36px; height: 36px; display: grid; place-items: center; font-size: 22px; }
.dep-chan .body { display: grid; gap: 1px; min-width: 0; }
.dep-chan .body b { font-size: 15px; }
.dep-chan .body small { color: var(--mute); font-size: 12px; }
.dep-detail { margin-top: 12px; text-align: center; }
.dep-detail .kv { justify-content: center; gap: 10px; }
.dep-copy { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.dep-qr { display: block; width: 190px; max-width: 70%; margin: 4px auto 10px; border-radius: 12px; }
.btn-ghost { margin-top: 8px; padding: 7px 18px; border: 1px solid #c7a779; border-radius: 999px; background: none; color: #8a5a21; font-size: 14px; font-weight: 600; }

/* 代理团队报表:每天一条横条,长度按区间内最大值等比。没有流水的那天也留着,断层看得出来。 */
.agent-range { flex-wrap: wrap; margin-bottom: 12px; }
.agent-bars { display: grid; gap: 4px; margin: 12px 0 4px; }
.agent-bar-row { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 8px; }
.agent-bar-day { color: var(--mute); font-size: 11px; font-variant-numeric: tabular-nums; }
.agent-bar-track { height: 8px; border-radius: 4px; background: var(--card-2); overflow: hidden; }
.agent-bar-track i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }
.agent-bar-val { font-size: 12px; font-variant-numeric: tabular-nums; min-width: 72px; text-align: right; }

/* 对账单(2026-10-11,2026-10-21 改版):日结和股东分红周结共用;导出 PDF 时另有一份白底样式在 app.js STATEMENT_PRINT_CSS,类名一样 */
.st { display: grid; gap: 10px; margin-top: 10px; }
.st-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.st-kpi { border: 1px solid var(--line, rgba(255,255,255,.1)); border-radius: 12px; padding: 8px 10px; }
.st-kpi small { display: block; color: var(--mute, #9a9a9a); font-size: 11px; }
.st-kpi b { font-size: 15px; font-variant-numeric: tabular-nums; }
.st-kpi.main { border-color: var(--neon, #e6ff3a); } .st-kpi.main b { color: var(--neon, #e6ff3a); }
.st-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px; }
.st-sec, .st-line { border: 1px solid var(--line, rgba(255,255,255,.1)); border-radius: 14px; padding: 10px 12px; overflow-x: auto; }
.st h4 { margin: 0 0 8px; font-size: 14px; } .st .st-h4-gap { margin-top: 12px; }
.st h5 { margin: 0 0 6px; font-size: 13px; display: flex; justify-content: space-between; gap: 8px; } .st h5 small { color: var(--mute, #9a9a9a); font-weight: 400; }
.st-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.st-table th { text-align: left; font-weight: 600; color: var(--mute, #9a9a9a); border-bottom: 1px solid rgba(255,255,255,.15); padding: 4px; font-size: 11.5px; }
.st-table td { padding: 4px; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: top; }
.st-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-table tfoot td { border-top: 1px solid rgba(255,255,255,.15); border-bottom: 0; color: var(--mute, #9a9a9a); }
.st-note-cell { color: var(--mute, #9a9a9a); font-size: 11px; text-align: right; }
.st .strong, .st-sum td { font-weight: 700; } .st-total td { border-top: 1px solid rgba(255,255,255,.35); font-weight: 700; }
.st-sub td:first-child { padding-left: 14px; } .st-sub td { color: var(--mute, #9a9a9a); }
.st-mute td { opacity: .55; } .st-bad td { color: var(--loss); }
.st-lh td { font-weight: 700; background: rgba(255,255,255,.04); }
.st-flag td { background: rgba(224,115,106,.08); }
.st-src { color: var(--mute, #9a9a9a); font-size: 11px; font-weight: 400; }
.st-tag { font-size: 10.5px; border: 1px solid rgba(255,255,255,.25); border-radius: 4px; padding: 0 4px; } .st-tag.warn { border-color: var(--loss); color: var(--loss); }
.st-split { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 6px; }
.st-split div { border-left: 3px solid var(--neon, #e6ff3a); padding-left: 8px; } .st-split small { display: block; color: var(--mute, #9a9a9a); font-size: 11px; } .st-split b { font-variant-numeric: tabular-nums; }
.st-note { color: var(--mute, #9a9a9a); font-size: 12px; margin: 4px 0 8px; line-height: 1.6; }
.st-foot { color: var(--mute, #9a9a9a); font-size: 11.5px; line-height: 1.6; } .st-foot p { margin: 2px 0; }