/* 18.2 视觉方向：深蓝灰背景、深绿桌面、白色卡牌、暖金主按钮；身份用文字+图标区分 */
:root {
  --bg: #0F172A;
  --bg-2: #162033;
  --bg-3: #1E293B;
  --table: #14532D;
  --table-2: #166534;
  --gold: #D6A547;
  --gold-ink: #1A1205;
  --text: #F8FAFC;
  --text-2: #CBD5E1;
  --muted: #94A3B8;
  --error: #F87171;
  --good: #4ADE80;
  --card: #FFFFFF;
  --card-red: #C81E1E;
  --card-black: #111827;
  --line: rgba(203, 213, 225, 0.14);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --vh: 100vh;
  --radius: 12px;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif; font-size: 15px; line-height: 1.45; }
body { overscroll-behavior: none; -webkit-user-select: none; user-select: none; }
#app { height: var(--vh); max-width: 1200px; margin: 0 auto; }
button { font: inherit; color: inherit; }
.muted { color: var(--text-2); }
.small { font-size: 13px; }
.center { text-align: center; }
.right { margin-left: auto; }

/* ---------- 通用 ---------- */
.screen { min-height: var(--vh); padding: calc(var(--safe-top)) calc(12px + var(--safe-right)) calc(12px + var(--safe-bottom)) calc(12px + var(--safe-left)); display: flex; flex-direction: column; gap: 12px; }
.screen.center { align-items: center; justify-content: center; gap: 16px; }
.logo { font-size: 34px; font-weight: 800; letter-spacing: 4px; color: var(--gold); }
.topbar { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.top-title { flex: 1; font-weight: 600; font-size: 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.icon-btn { min-width: 44px; min-height: 44px; border: 0; border-radius: 10px; background: transparent; font-size: 22px; cursor: pointer; }
.icon-btn:active { background: var(--bg-3); }
.icon-spacer { width: 44px; }
.btn { min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid transparent; font-weight: 600; cursor: pointer; transition: transform .08s, opacity .15s; }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--gold); color: var(--gold-ink); }
.btn.ghost { background: var(--bg-3); border-color: var(--line); color: var(--text); }
.btn.danger { background: var(--error); color: #2A0606; }
.btn.big { min-height: 52px; font-size: 17px; width: 100%; }
.btn.small { min-height: 34px; padding: 0 12px; font-size: 13px; }
.btn-col { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.btn-row { display: flex; gap: 10px; justify-content: center; }
.btn-row.wrap { flex-wrap: wrap; }
.chip { min-height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg-3); font-size: 13px; cursor: pointer; }
.chip.on { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.link { background: none; border: 0; color: var(--gold); padding: 0 4px; cursor: pointer; }
.notice { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.notice.warn { border-color: rgba(248, 113, 113, .5); }
.notice.good { border-color: rgba(214, 165, 71, .6); }
.card-box { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.empty { color: var(--muted); text-align: center; padding: 32px 0; }
.spinner { width: 36px; height: 36px; border: 3px solid var(--bg-3); border-top-color: var(--gold); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.avatar { border-radius: 50%; overflow: hidden; background: var(--bg-3); flex: none; display: flex; align-items: center; justify-content: center; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-fallback { font-weight: 700; color: var(--gold); }
.tabs { display: flex; gap: 6px; background: var(--bg-2); padding: 4px; border-radius: 12px; }
.tab { flex: 1; min-height: 40px; border: 0; border-radius: 9px; background: transparent; color: var(--text-2); cursor: pointer; }
.tab.on { background: var(--bg-3); color: var(--text); font-weight: 600; }
.list { display: flex; flex-direction: column; gap: 6px; }
.list-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; text-align: left; cursor: pointer; min-height: 56px; }
.list-item.static { cursor: default; }
.li-main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.li-side { text-align: right; flex: none; }
.delta { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 16px; }
.delta.pos { color: var(--good); }
.delta.neg { color: var(--error); }
.outcome { font-weight: 700; padding: 0 6px; border-radius: 6px; background: var(--bg-3); }
.outcome.win { color: var(--good); }
.outcome.lose { color: var(--error); }
.flag { font-size: 12px; padding: 1px 6px; border-radius: 6px; background: rgba(214, 165, 71, .18); color: var(--gold); }
.flag.off { background: rgba(248, 113, 113, .18); color: var(--error); }
.toast { position: fixed; left: 50%; bottom: calc(24px + var(--safe-bottom)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: #0B1222; border: 1px solid var(--line); padding: 10px 16px; border-radius: 12px; max-width: 90vw; z-index: 100; transition: all .2s; font-size: 14px; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { border-color: var(--error); }
.modal-backdrop, .blocking { position: fixed; inset: 0; background: rgba(2, 6, 23, .7); display: flex; align-items: center; justify-content: center; z-index: 90; padding: 16px; }
.modal { background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: 18px; width: min(420px, 100%); max-height: 85vh; overflow: auto; }
.modal h2 { margin: 0 0 10px; font-size: 18px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
.form { display: flex; flex-direction: column; gap: 10px; }
.form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--text-2); }
select, textarea { font: inherit; color: var(--text); background: var(--bg-3); border: 1px solid var(--line); border-radius: 8px; padding: 8px; min-height: 40px; }
textarea { resize: vertical; -webkit-user-select: text; user-select: text; }
.phrase-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
details summary { cursor: pointer; min-height: 32px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.fineprint { color: var(--muted); font-size: 12px; text-align: center; }

/* ---------- 大厅 ---------- */
.lobby-head { display: flex; align-items: center; gap: 12px; padding-top: 8px; }
.lobby-user { flex: 1; min-width: 0; }
.lobby-user .name { font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.level { font-size: 12px; color: var(--gold); border: 1px solid rgba(214,165,71,.5); border-radius: 6px; padding: 0 5px; }
.points .total { font-weight: 700; font-variant-numeric: tabular-nums; }
.points { font-size: 14px; }
.lobby-main { display: flex; flex-direction: column; gap: 12px; }
.mode-card { background: linear-gradient(160deg, var(--table) 0%, #0F3D22 100%); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 6px; border: 1px solid rgba(255,255,255,.08); }
.mode-card.alt { background: var(--bg-2); border-color: var(--line); }
.mode-title { font-size: 20px; font-weight: 800; }
.mode-sub { font-size: 14px; }
.mode-card .btn { margin-top: 8px; }
.lobby-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.nav-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 64px; justify-content: center; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); cursor: pointer; font-size: 13px; }
.nav-icon { font-size: 20px; }
.game-start-screen { position: relative; isolation: isolate; width: min(100%, calc(var(--vh) * 941 / 1672)); height: var(--vh); min-height: var(--vh); margin: 0 auto; padding: 0; gap: 0; overflow: hidden; background: #071326; }
.game-start-art { position: absolute; inset: 0; z-index: 0; background: url("./game-start-background.png") center top / 100% 100% no-repeat; pointer-events: none; }
.lobby-image-action { position: absolute; left: 50%; z-index: 3; display: block; padding: 0; border: 0; background-color: transparent; background-repeat: no-repeat; background-size: 100% auto; cursor: pointer; transform: translateX(-50%); transform-origin: center; transition: transform .1s ease, filter .15s ease, opacity .15s ease; }
.lobby-image-action.quick { top: 50.6%; width: 86%; aspect-ratio: 4.5 / 1; background-image: url("./quick-start-button.png"); background-position: center center; }
.lobby-image-action.practice { top: 59.5%; width: 82%; aspect-ratio: 3.45 / 1; background-image: url("./friend-practice-button.png"); background-position: center center; }
.lobby-image-action:active:not(:disabled) { transform: translateX(-50%) scale(.97); filter: brightness(1.08); }
.lobby-image-action:disabled { cursor: default; filter: grayscale(.55); opacity: .62; }
.lobby-action-state { position: absolute; right: 7%; bottom: 6%; padding: 2px 8px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px; background: rgba(7, 19, 38, .86); color: #fff; font-size: clamp(10px, 2.8vw, 14px); line-height: 1.5; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); white-space: nowrap; }
.lobby-hotspot { position: absolute; z-index: 2; padding: 0; border: 0; border-radius: 14px; background: transparent; color: transparent; cursor: pointer; }
.lobby-hotspot:active { background: rgba(255, 199, 74, .12); }
.lobby-hotspot:focus-visible { outline: 3px solid #ffe08a; outline-offset: -3px; }
.hotspot-history { left: 3.8%; top: 72.3%; width: 29.5%; height: 15.5%; }
.hotspot-rules { left: 35.2%; top: 72.3%; width: 29.5%; height: 15.5%; }
.hotspot-wallet { left: 66.7%; top: 72.3%; width: 29.5%; height: 15.5%; }
.hotspot-hub { left: 0; bottom: 0; width: 33.33%; height: 11.2%; border-radius: 0; }
.hotspot-leaderboard { left: 33.33%; bottom: 0; width: 33.34%; height: 11.2%; border-radius: 0; }
.hotspot-profile { right: 0; bottom: 0; width: 33.33%; height: 11.2%; border-radius: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.intro-poster-screen { align-items: center; gap: 12px; overflow-y: auto; background: #2b120a; }
.intro-poster { width: min(100%, 540px); aspect-ratio: 1086 / 1448; flex: 0 0 auto; border-radius: 14px; background: url("./ddz-rules-poster.png") center / contain no-repeat; box-shadow: 0 10px 32px rgba(0, 0, 0, .35); }
.intro-poster-actions { width: min(100%, 540px); flex: 0 0 auto; margin: 0; padding-bottom: 2px; }

/* ---------- 匹配与房间 ---------- */
.matching-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.big-timer { font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--gold); }
.room-seats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.room-seat { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-height: 170px; }
.room-seat.ready { border-color: var(--good); }
.room-seat .name { font-weight: 600; font-size: 14px; word-break: break-all; }
.room-seat.empty { border-style: dashed; justify-content: center; }
.empty-avatar { width: 56px; height: 56px; border-radius: 50%; border: 2px dashed var(--line); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 24px; }
.tag { display: block; font-size: 11px; color: var(--gold); }
.ready-tag { font-size: 13px; color: var(--muted); }
.ready-tag.on { color: var(--good); font-weight: 700; }

/* ---------- 卡牌 ---------- */
.card { position: absolute; width: 54px; height: 76px; background: var(--card); border-radius: 7px; border: 1px solid #CBD5E1; box-shadow: -2px 0 4px rgba(0,0,0,.18); transition: top .12s ease, transform .12s ease, opacity .15s; color: var(--card-black); }
.card.red { color: var(--card-red); }
.card .c-rank { position: absolute; top: 3px; left: 4px; font-weight: 800; font-size: 18px; line-height: 1; letter-spacing: -1px; }
.card .c-suit { position: absolute; top: 22px; left: 5px; font-size: 14px; line-height: 1; }
.card .c-center { position: absolute; right: 5px; bottom: 4px; font-size: 24px; line-height: 1; opacity: .9; }
.card.joker .c-joker { position: absolute; top: 4px; left: 3px; writing-mode: vertical-rl; font-size: 12px; font-weight: 800; letter-spacing: 0; line-height: 1.05; }
.card.joker .c-center { font-size: 18px; font-weight: 800; }
.card.back { background: repeating-linear-gradient(45deg, #1E3A8A 0 6px, #1E40AF 6px 12px); border-color: #3B82F6; position: relative; }
.card.selected { transform: translateY(-14px); box-shadow: 0 0 0 2px var(--gold), -2px 0 4px rgba(0,0,0,.2); }
.card.submitting { opacity: .5; }
.card-row { display: flex; align-items: flex-end; }
.card-row .card { position: relative; flex: none; }
.card-row .card + .card { margin-left: -36px; }
.card-row.small .card, .card.small { width: 36px; height: 50px; border-radius: 5px; }
.card-row.small .card + .card { margin-left: -20px; }
.card-row.small .card .c-rank, .card.small .c-rank { font-size: 13px; top: 2px; left: 3px; }
.card-row.small .card .c-suit, .card.small .c-suit { font-size: 10px; top: 16px; left: 3px; }
.card-row.small .card .c-center, .card.small .c-center { font-size: 14px; }
.card-row.small .card.joker .c-joker { font-size: 9px; }
.card-row.fresh { animation: pop .22s ease-out; }
@keyframes pop { from { transform: scale(.85); opacity: .3; } to { transform: scale(1); opacity: 1; } }

/* ---------- 牌桌：竖屏主布局（参考 390×844，按可用视口计算） ---------- */
.table-screen { height: var(--vh); min-height: 0; gap: 0; padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); background: radial-gradient(ellipse at 50% 45%, var(--table-2) 0%, var(--table) 55%, #0E3B20 100%); overflow: hidden; position: relative; }
.table-screen .topbar { padding: 0 6px; min-height: 42px; background: rgba(15, 23, 42, .55); }
.net-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--good); flex: none; }
.net-dot.offline, .net-dot.connecting { background: var(--error); }
.banner { display: none; background: rgba(248, 113, 113, .92); color: #2A0606; font-size: 13px; padding: 6px 10px; text-align: center; font-weight: 600; }
.banner.show { display: block; }
.opponents { display: flex; justify-content: space-between; padding: 6px 10px 0; min-height: 84px; }
.seat { display: flex; gap: 8px; align-items: flex-start; position: relative; max-width: 48%; }
.seat-right { flex-direction: row-reverse; text-align: right; }
.seat-avatar { position: relative; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; flex: none; }
.ring-wrap { position: absolute; inset: 0; pointer-events: none; }
.timer-ring { width: 48px; height: 48px; transform: rotate(-90deg); }
.timer-ring .ring-bg { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 3; }
.timer-ring .ring-fg { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; transition: stroke-dasharray .2s linear; }
.timer-ring .ring-fg.urgent { stroke: var(--error); }
.role-badge { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 10px; padding: 0 5px; border-radius: 8px; font-weight: 700; }
.role-badge.inline { position: static; transform: none; font-size: 12px; }
.role-badge.landlord { background: var(--gold); color: var(--gold-ink); }
.role-badge.farmer { background: #E2E8F0; color: #0F172A; }
.seat-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.seat-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat-count { font-size: 14px; font-variant-numeric: tabular-nums; }
.seat-count.warn { color: #FDE68A; font-weight: 800; }
.warn-text { font-size: 12px; }
.seat-flags { display: flex; gap: 4px; flex-wrap: wrap; }
.seat.acting .seat-name { color: var(--gold); }
.bubble { position: absolute; top: 52px; background: #F8FAFC; color: #0F172A; padding: 4px 8px; border-radius: 10px; font-size: 13px; white-space: nowrap; z-index: 5; }
.seat-right .bubble { right: 0; }
.table-info { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 52px; padding: 0 10px; }
.mult-box { display: flex; flex-direction: column; align-items: flex-start; font-size: 13px; }
.mult { font-size: 18px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.mult .cap { font-size: 12px; font-weight: 600; }
.board { flex: 1; min-height: 120px; position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; padding: 4px 10px; }
.zone { display: flex; flex-direction: column; gap: 4px; min-height: 60px; }
.zone-left { align-items: flex-start; }
.zone-right { align-items: flex-end; grid-column: 2; }
.zone-me { grid-column: 1 / span 2; align-items: center; justify-content: flex-end; }
.action-text { font-size: 18px; font-weight: 700; color: var(--text-2); padding: 4px 10px; background: rgba(15,23,42,.35); border-radius: 10px; }
.combo-name { font-size: 12px; color: var(--text-2); }
.thinking { font-size: 12px; color: var(--gold); }
.center-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-2); font-size: 15px; pointer-events: none; text-align: center; padding: 0 20px; }
.center-msg.big { font-size: 20px; font-weight: 800; color: var(--gold); }
.actions { min-height: 60px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 10px; flex-wrap: nowrap; }
.actions .btn { flex: 0 1 auto; min-width: 54px; min-height: 48px; padding: 0 12px; }
@media (max-width: 360px) { .actions { gap: 6px; padding: 6px 6px; } .actions .btn { padding: 0 8px; } .my-timer { min-width: 28px; font-size: 16px; } }
.hint-text { color: var(--text-2); font-size: 14px; }
.hint-text.strong { color: #FDE68A; font-weight: 800; font-size: 16px; }
.my-timer { font-weight: 800; font-size: 18px; min-width: 36px; text-align: center; color: var(--gold); font-variant-numeric: tabular-nums; }
.my-timer.urgent { color: var(--error); }
.hand { position: relative; margin: 0 10px; height: 170px; touch-action: none; flex: none; }
.hand.disabled .card { cursor: default; }
.hand .card { cursor: pointer; }
.magnifier { position: absolute; top: -90px; width: 70px; height: 96px; pointer-events: none; display: none; z-index: 60; }
.magnifier.show { display: block; }
.magnifier .card { transform: scale(1.25); transform-origin: top left; left: 0; top: 0; box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.mystatus { display: flex; align-items: center; gap: 8px; padding: 6px 12px 8px; font-size: 13px; min-height: 40px; background: rgba(15, 23, 42, .45); }
.me-name { font-weight: 600; }
.overlay-host:empty { display: none; }
.overlay-host { position: absolute; inset: 0; background: rgba(2, 6, 23, .62); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 50; }
.result-panel { width: min(460px, 100%); max-height: 92%; overflow: auto; background: var(--bg-2); border: 1px solid var(--line); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.result-panel h2 { margin: 0; font-size: 22px; }
.result-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.result-me { font-weight: 800; font-size: 16px; }
.result-me.win { color: var(--good); }
.result-me.lose { color: var(--error); }
.spring { color: var(--gold); font-weight: 800; }
.practice-note { background: rgba(214,165,71,.15); color: var(--gold); padding: 6px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; }
.result-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.result-col { background: var(--bg-3); border-radius: 12px; padding: 10px 6px; text-align: center; display: flex; flex-direction: column; gap: 3px; align-items: center; min-width: 0; }
.result-col.me { outline: 2px solid var(--gold); }
.result-col .name { font-weight: 600; font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.left-cards { margin-top: 4px; max-width: 100%; overflow: hidden; }
.formula p { margin: 6px 0; font-size: 13px; color: var(--text-2); }
.pending-note { text-align: center; color: var(--gold); font-weight: 600; padding: 8px; }
.next-row { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.flash { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 56px; font-weight: 900; color: #FDE68A; text-shadow: 0 0 24px #F59E0B; pointer-events: none; animation: flash .8s ease-out forwards; z-index: 40; }
.flash.rocket { color: #FCA5A5; text-shadow: 0 0 28px #EF4444; }
@keyframes flash { 0% { opacity: 0; transform: scale(.6); } 25% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.3); } }
.rules-mini p { font-size: 14px; color: var(--text-2); }

/* 关闭动画 */
.no-anim *, .no-anim *::before, .no-anim *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* 布局缩小：先减少桌面空白和动画空间，再缩小对手头像 */
@media (max-height: 700px) {
  .opponents { min-height: 70px; }
  .table-info { min-height: 44px; }
  .board { min-height: 90px; }
}
@media (max-height: 600px) and (orientation: portrait) {
  .seat-avatar, .timer-ring { width: 40px; height: 40px; }
  .actions { min-height: 54px; }
}

/* 横屏：左上/右上对手，中央出牌，底部手牌（空间足够时单行） */
@media (orientation: landscape) and (max-height: 520px) {
  .table-screen .topbar { min-height: 38px; }
  .opponents { min-height: 56px; padding-top: 2px; }
  .table-info { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); min-height: 52px; z-index: 2; }
  .board { min-height: 60px; }
  .actions { min-height: 52px; padding: 2px 10px; }
  .hand { height: 100px; }
  .mystatus { min-height: 30px; padding: 3px 12px; }
}
@media (min-width: 700px) {
  .table-screen .board { padding: 10px 40px; }
  .hand { margin: 0 40px; }
}

/* ---------- 战绩、回放、验证 ---------- */
.match-detail { display: flex; flex-direction: column; gap: 12px; }
.verify { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.verify.ok h3 { color: var(--good); }
.verify.bad h3 { color: var(--error); }
.verify ul { list-style: none; padding: 0; margin: 4px 0 10px; }
.verify li.ok { color: var(--good); }
.verify li.bad { color: var(--error); }
.replay { background: var(--table); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.rb { display: flex; flex-direction: column; gap: 8px; }
.rb-info { display: flex; align-items: center; gap: 8px; min-height: 52px; }
.rb-seat { background: rgba(15,23,42,.35); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.rb-seat.acting { outline: 1px solid var(--gold); }
.rb-action { min-height: 50px; display: flex; align-items: center; color: var(--text-2); font-weight: 600; }
.rb-hand { overflow-x: auto; padding-top: 4px; }
.replay-caption { min-height: 24px; font-weight: 600; text-align: center; }
.replay-ctrl { display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap; }

/* ---------- 规则、积分、排行、设置 ---------- */
.rules-body h3 { color: var(--gold); margin: 18px 0 6px; font-size: 16px; }
.rules-body p { margin: 6px 0; font-size: 14px; color: var(--text-2); }
.rule-ex { background: var(--bg-2); border-radius: 10px; padding: 8px 10px; margin: 6px 0; }
.rule-ex-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.big-num { font-size: 32px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.wallet-body, .lb-body, .settings-body { display: flex; flex-direction: column; gap: 10px; }
.wallet-body h3 { margin: 10px 0 0; font-size: 15px; }
.lb-row { display: flex; align-items: center; gap: 8px; background: var(--bg-2); border-radius: 10px; padding: 8px 10px; min-height: 48px; }
.lb-row.me { outline: 1px solid var(--gold); }
.lb-row .rank { width: 28px; text-align: center; font-weight: 800; color: var(--gold); }
.lb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.setting { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--bg-2); padding: 12px; border-radius: 10px; min-height: 56px; cursor: pointer; }
.setting input { width: 46px; height: 26px; accent-color: var(--gold); flex: none; }
.settings-body h3 { margin: 12px 0 0; font-size: 15px; }
.settings-body p { margin: 0; }

/* ================= 多游戏大厅 ================= */
.game-cards { display: flex; flex-direction: column; gap: 12px; }
.game-card { display: flex; align-items: center; gap: 14px; text-align: left; padding: 16px; min-height: 96px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(135deg, var(--bg-3), var(--bg-2)); cursor: pointer; }
.game-card.holdem { background: linear-gradient(135deg, #123524, var(--bg-2)); }
.game-card.busy { opacity: .6; }
.gc-icon { width: 56px; height: 56px; border-radius: 14px; background-color: rgba(214,165,71,.15); background-position: center 45%; background-repeat: no-repeat; background-size: 165%; box-shadow: 0 5px 14px rgba(0,0,0,.3); display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.game-card.ddz .gc-icon { background-image: url("./game-icon-ddz.png"); }
.game-card.holdem .gc-icon { background-image: url("./game-icon-holdem.png"); }
.game-card.baccarat .gc-icon { background-image: url("./game-icon-baccarat.png"); }
.game-card.mahjong .gc-icon { background-image: url("./game-icon-mahjong.png"); }
.gc-title { font-size: 19px; font-weight: 800; display: flex; gap: 8px; align-items: center; }
.gc-sub { font-size: 13px; margin-top: 2px; }
.lobby-head .icon-btn:first-child { margin-right: -4px; }

/* ================= 德州牌桌 ================= */
.htable-screen { height: var(--vh); min-height: 0; gap: 0; padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); background: radial-gradient(ellipse at 50% 40%, var(--table-2) 0%, var(--table) 55%, #0E3B20 100%); overflow: hidden; position: relative; }
.htable-screen .topbar { padding: 0 6px; min-height: 42px; background: rgba(15, 23, 42, .55); }
.htable-screen .top-title { flex: 1; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip { min-height: 32px; padding: 0 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg-3); font-size: 13px; cursor: pointer; }
.chip.on { background: var(--gold); color: var(--gold-ink); }
.felt { flex: 1; position: relative; min-height: 0; margin: 4px 6px 0; }
.hseat { position: absolute; width: 92px; display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; font-size: 12px; }
.hseat.a-top { left: 50%; top: 0; transform: translateX(-50%); }
.hseat.a-l-top { left: 0; top: 13%; }
.hseat.a-r-top { right: 0; top: 13%; }
.hseat.a-l-mid { left: 0; top: 56%; }
.hseat.a-r-mid { right: 0; top: 56%; }
.hseat.folded { opacity: .5; }
.hseat.acting .hs-name { color: var(--gold); }
.hseat.empty .empty-seat { width: 44px; height: 44px; border-radius: 50%; border: 1px dashed var(--line); color: var(--muted); display: flex; align-items: center; justify-content: center; font-size: 11px; margin: 0 auto; }
.hs-ava { position: relative; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }
.hs-name { max-width: 92px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; font-size: 12px; }
.hs-stack { font-variant-numeric: tabular-nums; font-weight: 700; color: #FDE68A; }
.hs-status { font-size: 11px; padding: 0 6px; border-radius: 6px; background: rgba(15,23,42,.6); }
.hs-status.allin { background: var(--error); color: #2A0606; font-weight: 800; }
.hs-flags { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; }
.hs-flags .flag { font-size: 10px; padding: 0 4px; }
.hs-hole { display: flex; gap: 2px; margin-top: 2px; }
.hs-bet { margin-top: 2px; padding: 1px 8px; border-radius: 10px; background: rgba(2,6,23,.55); border: 1px solid rgba(214,165,71,.6); color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; }
.hs-bet.fresh { animation: pop .22s ease-out; }
.hs-last { font-size: 11px; color: var(--text-2); white-space: nowrap; }
.pos-badge { position: absolute; right: -10px; bottom: -2px; background: #F8FAFC; color: #0F172A; font-size: 10px; font-weight: 800; border-radius: 8px; padding: 0 4px; line-height: 15px; }
.pos-badge.inline { position: static; margin-left: 6px; display: inline-block; }
.hseat .bubble { top: 0; left: 50%; transform: translate(-50%, -100%); }
.felt-center { position: absolute; left: 50%; top: 35%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; pointer-events: none; }
.pot { background: rgba(2,6,23,.45); border-radius: 12px; padding: 2px 12px; font-size: 13px; font-variant-numeric: tabular-nums; }
.pot b { color: var(--gold); font-size: 15px; }
.hboard { display: flex; gap: 4px; justify-content: center; }
.hcard { width: 40px; height: 56px; border-radius: 6px; background: var(--card); color: var(--card-black); border: 1px solid #CBD5E1; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; font-weight: 800; flex: none; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.hcard.red { color: var(--card-red); }
.hcard .hc-rank { font-size: 19px; letter-spacing: -1px; }
.hcard .hc-suit { font-size: 17px; margin-top: 2px; }
.hcard.sm { width: 28px; height: 38px; border-radius: 4px; }
.hcard.sm .hc-rank { font-size: 13px; }
.hcard.sm .hc-suit { font-size: 12px; margin-top: 1px; }
.hcard.lg { width: 54px; height: 76px; border-radius: 8px; }
.hcard.lg .hc-rank { font-size: 26px; }
.hcard.lg .hc-suit { font-size: 22px; }
.hcard.back { background: repeating-linear-gradient(45deg, #1E3A8A 0 6px, #1E40AF 6px 12px); border-color: #3B82F6; }
.hcard.back.ghost { opacity: .25; }
.hcard.slot { background: rgba(255,255,255,.06); border: 1px dashed rgba(255,255,255,.22); box-shadow: none; }
.no-anim .hs-bet.fresh { animation: none; }
.h-mine { display: flex; align-items: center; gap: 12px; padding: 6px 12px; min-height: 88px; background: rgba(2,6,23,.35); }
.h-hole { display: flex; gap: 4px; align-items: center; }
.h-meinfo { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.h-mestack { font-size: 14px; font-variant-numeric: tabular-nums; }
.h-mestack b { color: #FDE68A; font-size: 16px; }
.h-desc { color: var(--gold); font-weight: 700; font-size: 14px; }
.h-line { font-size: 13px; color: var(--text-2); }
.htable-screen .my-timer { font-weight: 800; color: #FDE68A; font-size: 14px; }
.htable-screen .my-timer.urgent { color: var(--error); }
.h-actions { min-height: 64px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 10px 8px; flex-wrap: wrap; background: rgba(15,23,42,.55); }
.h-actions .btn { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 0 8px; white-space: nowrap; }
.h-actions .hint-text { flex: 1 1 100%; text-align: center; }
.h-actions .hint-text.block { font-size: 12px; }
.h-actions .hint-text.small { flex: 0 1 auto; font-size: 12px; }
.amount-panel { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.amt-head { display: flex; align-items: center; gap: 8px; }
.amt-label { flex: 1; font-size: 15px; }
.amt-label b { color: var(--gold); font-size: 20px; font-variant-numeric: tabular-nums; }
.amt-input { width: 110px; min-height: 40px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--text); padding: 0 10px; font-size: 16px; font-variant-numeric: tabular-nums; }
.form .amt-input, .form select { width: 100%; }
.amount-panel input[type=range], .form input[type=range] { width: 100%; accent-color: var(--gold); min-height: 32px; }
.amt-err { color: var(--error); min-height: 16px; }
.amt-quick { display: flex; gap: 6px; }
.amt-quick .btn { flex: 1; padding: 0 4px; }
.amt-row { display: flex; gap: 8px; }
.amt-row .btn { flex: 1; }
.h-result .h-result-head { text-align: center; display: flex; flex-direction: column; gap: 2px; }
.h-net { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.h-net.pos { color: var(--good); }
.h-net.neg { color: var(--error); }
.small-board { justify-content: center; }
.h-res-rows { display: flex; flex-direction: column; gap: 6px; }
.h-res-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 4px 6px; border-radius: 8px; background: rgba(255,255,255,.03); }
.h-res-row.me { outline: 1px solid rgba(214,165,71,.6); }
.h-res-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.h-res-cards { display: flex; gap: 2px; }
.h-res-hand { color: var(--gold); text-align: right; }
.warn-text { color: #FDE68A; }
.pos { color: var(--good); } .neg { color: var(--error); }
.kv { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; word-break: break-all; -webkit-user-select: text; user-select: text; }
.replay-text { font-weight: 700; font-size: 15px; }
.replay-stage { display: flex; flex-direction: column; gap: 6px; }
.lb-rank { width: 28px; text-align: center; font-weight: 800; color: var(--gold); }
.lb-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.rules-sec h3 { margin: 12px 0 4px; }
.rules-sec ul { margin: 0; padding-left: 20px; }
.rules-sec li { margin: 3px 0; }
@media (max-width: 360px) {
  .hseat { width: 78px; }
  .hs-name { max-width: 78px; }
  .hs-ava { width: 42px; height: 42px; }
  .hcard { width: 34px; height: 48px; }
  .hcard .hc-rank { font-size: 16px; } .hcard .hc-suit { font-size: 14px; }
  .hcard.lg { width: 46px; height: 64px; }
  .hcard.lg .hc-rank { font-size: 22px; } .hcard.lg .hc-suit { font-size: 18px; }
  .h-mine { min-height: 74px; padding: 4px 10px; }
  .h-actions .btn { min-height: 44px; font-size: 14px; }
}
@media (max-height: 640px) and (orientation: portrait) {
  .hseat.a-l-top, .hseat.a-r-top { top: 11%; }
  .hseat.a-l-mid, .hseat.a-r-mid { top: 54%; }
  .hs-last { display: none; }
  .felt-center { top: 33%; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .htable-screen { display: grid; grid-template-columns: 1fr 300px; grid-template-rows: auto auto 1fr auto; }
  .htable-screen .topbar, .htable-screen .banner { grid-column: 1 / -1; }
  .felt { grid-column: 1; grid-row: 3 / 5; }
  .h-mine { grid-column: 2; grid-row: 3; }
  .h-actions { grid-column: 2; grid-row: 4; }
  .hseat.a-l-top, .hseat.a-r-top { top: 4%; }
  .hseat.a-l-mid, .hseat.a-r-mid { top: 52%; }
  .hseat.a-top { top: 0; }
  .felt-center { top: 30%; }
}
.h-actions .hint-text.small.block { flex: 1 1 100%; }
.htable-screen.amt-open .h-mine { min-height: 0; padding: 4px 10px; }
.htable-screen.amt-open .h-mine .hcard.lg { width: 40px; height: 56px; }
.htable-screen.amt-open .h-mine .hcard.lg .hc-rank { font-size: 19px; }
.htable-screen.amt-open .h-mine .hcard.lg .hc-suit { font-size: 16px; }
.htable-screen.amt-open .h-line { display: none; }
.htable-screen.amt-open .hs-last { display: none; }
@media (max-height: 640px) { .amount-panel { gap: 4px; } .amount-panel input[type=range] { min-height: 24px; } .amt-quick .btn { min-height: 36px; } .amt-row .btn { min-height: 44px; } }

/* ================= 百家乐（79、80 章） ================= */
:root { --bac-player: #3B82F6; --bac-banker: #EF4444; --bac-tie: #22C55E; }
.game-card.baccarat { background: linear-gradient(135deg, #3A1420, var(--bg-2)); }
.game-card.pending { opacity: .55; cursor: default; border-style: dashed; }
.btable-screen { height: var(--vh); min-height: 0; gap: 0; padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); background: radial-gradient(ellipse at 50% 30%, var(--table-2) 0%, var(--table) 60%, #0E3B20 100%); overflow: hidden; position: relative; display: flex; flex-direction: column; }
.btable-screen .topbar { padding: 0 6px; min-height: 42px; background: rgba(15, 23, 42, .55); }
.btable-screen .top-title { flex: 1; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-status { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 12px; min-height: 36px; background: rgba(2,6,23,.3); }
.b-status .phase { font-weight: 700; padding: 2px 10px; border-radius: 12px; background: rgba(2,6,23,.5); white-space: nowrap; }
.b-status .phase.open { color: var(--good); }
.b-status .phase.urgent { color: #FDE68A; background: rgba(239,68,68,.35); }
.b-status .phase.closed { color: var(--text-2); }
.b-status .phase.warn { color: #FDE68A; }
.b-status .phase.res.banker { color: #FCA5A5; } .b-status .phase.res.player { color: #93C5FD; } .b-status .phase.res.tie { color: #86EFAC; }
.b-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 10px 4px; flex: 1 1 auto; min-height: 128px; align-content: start; }
.b-hand { border-radius: 12px; padding: 6px 8px 8px; background: rgba(2,6,23,.28); border: 2px solid transparent; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.b-hand.player { border-color: rgba(59,130,246,.45); } .b-hand.banker { border-color: rgba(239,68,68,.45); }
.b-hand.win.player { box-shadow: 0 0 0 2px var(--bac-player), 0 0 16px rgba(59,130,246,.5); }
.b-hand.win.banker { box-shadow: 0 0 0 2px var(--bac-banker), 0 0 16px rgba(239,68,68,.5); }
.b-hand-head { display: flex; align-items: center; gap: 6px; }
.b-side { font-weight: 800; font-size: 14px; }
.b-hand.player .b-side, .b-side.player { color: #93C5FD; } .b-hand.banker .b-side, .b-side.banker { color: #FCA5A5; }
.b-total { margin-left: auto; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 28px; text-align: center; background: rgba(2,6,23,.55); border-radius: 8px; }
.tag-pair { font-size: 11px; padding: 0 6px; border-radius: 6px; background: var(--gold); color: var(--gold-ink); font-weight: 700; }
.b-slots { display: flex; gap: 4px; justify-content: center; }
.b-slots .hcard.third { opacity: .5; transform: rotate(90deg) scale(.9); }
.b-note { color: #FDE68A; text-align: center; }
.b-res-line { grid-column: 1 / -1; text-align: center; font-weight: 700; }
.b-road { padding: 2px 10px 4px; background: rgba(2,6,23,.22); }
.b-road-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.tabs.mini { padding: 2px; gap: 2px; } .tabs.mini .tab { min-height: 28px; padding: 0 10px; font-size: 12px; }
.road-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding: 4px 0; }
.road-grid { display: grid; grid-template-rows: repeat(6, var(--cell)); grid-auto-columns: var(--cell); gap: 1px; background: rgba(255,255,255,.06); width: max-content; }
.road-empty { padding: 8px 0; }
.bead { width: var(--cell); height: var(--cell); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #fff; position: relative; }
.bead.banker { background: var(--bac-banker); } .bead.player { background: var(--bac-player); } .bead.tie { background: var(--bac-tie); }
.ring { width: var(--cell); height: var(--cell); border-radius: 50%; border: 2px solid; position: relative; box-sizing: border-box; }
.ring.banker { border-color: var(--bac-banker); } .ring.player { border-color: var(--bac-player); }
.tie-mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 9px; color: var(--bac-tie); }
.tie-mark::before { content: ''; position: absolute; width: 140%; height: 2px; background: var(--bac-tie); transform: rotate(-45deg); }
.pair { position: absolute; width: 5px; height: 5px; border-radius: 50%; border: 1px solid #fff; }
.pair.bp { top: -1px; left: -1px; background: var(--bac-banker); } .pair.pp { bottom: -1px; right: -1px; background: var(--bac-player); }
.tiny { font-size: 11px; }
.b-board { display: flex; flex-direction: column; gap: 6px; padding: 6px 10px; }
.b-row { display: grid; gap: 6px; }
.b-row.main { grid-template-columns: 1fr .8fr 1fr; }
.b-row.pairs { grid-template-columns: 1fr 1fr; }
.b-area { border-radius: 12px; border: 2px solid rgba(255,255,255,.15); background: rgba(2,6,23,.35); color: var(--text); min-height: 64px; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer; font: inherit; }
.b-area.big { min-height: 96px; }
.b-area.player { border-color: rgba(59,130,246,.7); } .b-area.banker { border-color: rgba(239,68,68,.7); } .b-area.tie { border-color: rgba(34,197,94,.7); }
.b-area.locked { opacity: .82; }
.b-area.hit { background: rgba(214,165,71,.22); border-color: var(--gold); }
.b-area-name { font-size: 18px; font-weight: 800; }
.b-area.player .b-area-name { color: #93C5FD; } .b-area.banker .b-area-name { color: #FCA5A5; } .b-area.tie .b-area-name { color: #86EFAC; }
.b-row.pairs .b-area-name { font-size: 15px; }
.b-area-odds { font-size: 12px; color: var(--text-2); }
.b-area-conf { font-size: 13px; font-weight: 700; color: #FDE68A; font-variant-numeric: tabular-nums; }
.b-area-draft { font-size: 12px; border: 1px dashed rgba(253,230,138,.8); border-radius: 6px; padding: 0 4px; color: #FDE68A; }
.b-area-res { font-size: 12px; font-weight: 700; } .b-area-res.win { color: var(--good); } .b-area-res.lose { color: var(--error); } .b-area-res.push { color: var(--text-2); }
.b-chips { display: flex; gap: 6px; padding: 4px 10px; justify-content: center; }
.chipbtn { min-width: 48px; min-height: 44px; border-radius: 22px; border: 2px dashed rgba(255,255,255,.4); background: #1F2937; color: var(--text); font-weight: 800; font-size: 13px; cursor: pointer; padding: 0 8px; }
.chipbtn.on { border-style: solid; border-color: var(--gold); background: var(--gold); color: var(--gold-ink); }
.chipbtn.minus.on { background: var(--error); border-color: var(--error); color: #2A0606; }
.b-actions { display: flex; gap: 6px; padding: 4px 10px; align-items: center; justify-content: center; flex-wrap: wrap; min-height: 56px; }
.b-actions .btn { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 0 6px; white-space: nowrap; }
.b-actions .hint-text { flex: 1 1 100%; text-align: center; }
.b-actions .hint-text.small { flex: 0 1 auto; }
.b-assets { padding: 4px 12px 8px; font-size: 13px; text-align: center; background: rgba(15,23,42,.55); font-variant-numeric: tabular-nums; }
.b-assets b { color: #FDE68A; }
.practice-chip { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 6px; background: rgba(214,165,71,.2); color: var(--gold); font-weight: 700; }
.b-pay { width: 100%; border-collapse: collapse; font-size: 13px; }
.b-pay th, .b-pay td { padding: 4px; border-bottom: 1px solid var(--line); text-align: right; }
.b-pay th:first-child, .b-pay td:first-child { text-align: left; }
.b-pay td.win { color: var(--good); } .b-pay td.lose { color: var(--error); } .b-pay td.push { color: var(--text-2); }
.b-result .h-net { text-align: center; }
.b-result > .muted { text-align: center; }
.b-paytable { width: 100%; border-collapse: collapse; font-size: 13px; margin: 6px 0; }
.b-paytable th, .b-paytable td { padding: 4px 6px; border-bottom: 1px solid var(--line); text-align: center; }
.b-paytable caption { caption-side: bottom; text-align: left; padding-top: 4px; }
.b-detail-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.row-cards { display: flex; gap: 3px; margin-top: 4px; }
.notice.good { background: rgba(74,222,128,.15); color: var(--good); }
@media (max-height: 700px) {
  .b-area.big { min-height: 76px; } .b-area { min-height: 54px; }
  .b-cards { min-height: 112px; padding-top: 4px; }
  .btable-screen .hcard.md { width: 34px; height: 48px; } .btable-screen .hcard.md .hc-rank { font-size: 16px; } .btable-screen .hcard.md .hc-suit { font-size: 14px; }
  .b-road .tiny { display: none; }
}
@media (max-width: 360px) {
  .b-area-name { font-size: 16px; } .chipbtn { min-width: 44px; padding: 0 4px; }
  .btable-screen .hcard.md { width: 32px; height: 46px; }
  .b-actions .btn { font-size: 14px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .btable-screen { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto 1fr auto auto auto; }
  .btable-screen .topbar, .btable-screen .banner, .b-status { grid-column: 1 / -1; }
  .b-cards { grid-column: 1; grid-row: 4 / 6; }
  .b-road { grid-column: 1; grid-row: 6 / 8; }
  .b-board { grid-column: 2; grid-row: 4; }
  .b-chips { grid-column: 2; grid-row: 5; }
  .b-actions { grid-column: 2; grid-row: 6; }
  .b-assets { grid-column: 2; grid-row: 7; }
  .b-area.big { min-height: 64px; }
}
.b-cards { flex: 0 0 auto; }
.b-road { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; }
.tabs.mini .tab { white-space: nowrap; }
.b-pay th { white-space: nowrap; font-weight: 600; color: var(--text-2); }
.b-road { overflow: hidden; }
.road-open-btn { display: none; min-height: 32px; }
@media (max-height: 640px) and (orientation: portrait) {
  .b-road { flex: 0 0 auto; padding-top: 4px; padding-bottom: 4px; }
  .b-road .road-scroll, .b-road .tiny, .b-road .tabs { display: none; }
  .road-open-btn { display: inline-flex; align-items: center; }
  .b-cards { min-height: 0; }
  .b-hand { padding: 4px 6px 6px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .b-road .tiny { display: none; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .b-road { flex: 0 0 auto; }
  .b-road .road-scroll, .b-road .tabs { display: none; }
  .road-open-btn { display: inline-flex; align-items: center; }
}

/* ======================================================== 推倒胡麻将（129—130） */
.game-card.mahjong .gc-icon { color: #f8fafc; }
.mjt { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(#ffffff, #eef2f7); color: #111827; border: 1px solid #cbd5e1; border-bottom-width: 3px; border-radius: 6px; line-height: 1; padding: 0; position: relative; flex: none; font-family: "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", serif; }
.mjt .mjt-a { font-weight: 800; }
.mjt .mjt-b { font-weight: 700; margin-top: 2px; }
.mjt.lg { width: 44px; height: 60px; font-size: 21px; }
.mjt.lg .mjt-b { font-size: 13px; }
.mjt.md { width: 36px; height: 50px; font-size: 18px; }
.mjt.md .mjt-b { font-size: 11px; }
.mjt.sm { width: 26px; height: 36px; font-size: 14px; border-radius: 4px; }
.mjt.sm .mjt-b { font-size: 9px; margin-top: 1px; }
.mjt.xs { width: 18px; height: 25px; font-size: 10px; border-radius: 3px; border-bottom-width: 2px; }
.mjt.xs .mjt-b { font-size: 7px; margin-top: 0; }
.mjt.s-wan .mjt-b { color: #b91c1c; }
.mjt.s-tong .mjt-b { color: #1d4ed8; }
.mjt.s-tiao .mjt-b { color: #15803d; }
.mjt.z-red .mjt-a { color: #c81e1e; }
.mjt.z-green .mjt-a { color: #15803d; }
.mjt.z-white .mjt-a { color: #1e3a8a; border: 1.5px solid #1e3a8a; border-radius: 3px; padding: 1px 2px; font-size: .8em; }
.mjt.back { background: repeating-linear-gradient(45deg, #1f6f45, #1f6f45 4px, #237a4c 4px, #237a4c 8px); border-color: #14532d; }
.mjt.taken { opacity: .35; outline: 1px dashed var(--muted); }
.mjt.taken::after { content: '↗'; position: absolute; top: -4px; right: -3px; font-size: 9px; color: var(--gold); }
button.mjt { cursor: pointer; transition: transform .12s; }
button.mjt.sel { transform: translateY(-14px); box-shadow: 0 0 0 2px var(--gold); }
button.mjt:disabled { cursor: default; }
.mjt.drawn { margin-left: 8px; }
.mjt.drawn::before { content: ''; position: absolute; left: -6px; top: 20%; bottom: 20%; width: 2px; background: var(--gold); border-radius: 1px; opacity: .7; }
.mjt-row { display: flex; flex-wrap: wrap; gap: 2px; align-items: flex-end; }
.mjt-row .sep { width: 8px; }
.mjt-meld { display: inline-flex; gap: 1px; align-items: flex-end; padding: 2px 3px 2px 2px; border-radius: 5px; background: rgba(255,255,255,.06); position: relative; }
.mjt-meld .meld-tag { font-size: 9px; color: var(--text-2); margin-left: 2px; align-self: center; writing-mode: horizontal-tb; white-space: nowrap; }
.mj-op-melds .mjt-meld { flex-wrap: wrap; }
.mjt-meld.mj-pair { background: rgba(214,165,71,.12); }

.mtable-screen { padding: calc(var(--safe-top)) calc(6px + var(--safe-right)) calc(6px + var(--safe-bottom)) calc(6px + var(--safe-left)); gap: 4px; background: radial-gradient(ellipse at center, var(--table-2), var(--table) 70%); height: var(--vh); overflow: hidden; }
.mj-top { min-height: 40px; }
.net-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--good); }
.net-dot.offline, .net-dot.connecting { background: var(--error); }
.mtable-screen .banner { display: none; font-size: 13px; text-align: center; background: rgba(15,23,42,.6); border-radius: 8px; padding: 4px 8px; }
.mtable-screen .banner.show { display: block; }
.mj-op { display: flex; justify-content: center; }
.mj-op-box { background: rgba(15,23,42,.45); border-radius: 10px; padding: 4px 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0; border: 1px solid transparent; }
.mj-op-box.actor { border-color: var(--gold); box-shadow: 0 0 10px rgba(214,165,71,.35); }
.mj-op-head { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 12px; }
.mj-op-name { font-weight: 600; display: flex; align-items: center; gap: 3px; min-width: 0; flex-wrap: wrap; }
.mj-op-name .nm { min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wind { font-size: 11px; color: var(--text-2); border: 1px solid var(--line); border-radius: 4px; padding: 0 3px; }
.dealer { font-size: 11px; background: var(--gold); color: var(--gold-ink); border-radius: 4px; padding: 0 3px; font-weight: 700; }
.tag.gold { background: var(--gold); color: var(--gold-ink); }
.tag.warn { background: #7c2d12; color: #fed7aa; }
.mj-op-hand { display: flex; align-items: center; gap: 3px; font-size: 11px; color: var(--text-2); }
.mj-op-hand .backs { display: flex; gap: 1px; }
.mj-op-melds { display: flex; flex-wrap: wrap; gap: 2px; }
.mj-mid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(64px, 84px) 1fr minmax(64px, 84px); gap: 4px; align-items: center; }
.mj-op.left .mj-op-box, .mj-op.right .mj-op-box { width: 100%; }
.mj-op.left .mj-op-hand .backs, .mj-op.right .mj-op-hand .backs { display: none; }
.mj-board { min-width: 0; height: 100%; display: flex; align-items: center; justify-content: center; }
.mj-board-grid { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto auto; grid-template-areas: ". top ." "left c right" ". bottom ."; gap: 4px; align-items: center; justify-items: center; width: 100%; }
.mj-board-grid .rv.top { grid-area: top; } .mj-board-grid .rv.left { grid-area: left; } .mj-board-grid .rv.right { grid-area: right; } .mj-board-grid .rv.bottom { grid-area: bottom; }
.mj-board-grid .mj-compass { grid-area: c; }
.mj-river { display: grid; grid-template-columns: repeat(6, 18px); gap: 1px; min-height: 26px; position: relative; cursor: zoom-in; }
.mj-river .more { position: absolute; top: -12px; right: 0; font-size: 10px; color: var(--text-2); }
/* 129.3：左右两家牌河竖排（2 列），避免压住两侧玩家信息；上下两家横排 */
.mj-board-grid .rv.left .mj-river, .mj-board-grid .rv.right .mj-river { grid-template-columns: repeat(2, 18px); }
.mj-board-grid .rv.left .mj-river .more, .mj-board-grid .rv.right .mj-river .more { top: -13px; }
/* 牌桌上的提示放到顶部，不遮手牌与出牌按钮（M-U02） */
body:has(.mtable-screen) .toast { bottom: auto; top: calc(52px + var(--safe-top)); transform: translate(-50%, -12px); }
body:has(.mtable-screen) .toast.show { transform: translate(-50%, 0); }
.mj-compass { position: relative; min-width: 112px; min-height: 112px; padding: 20px 20px 24px; box-sizing: border-box; border-radius: 14px; background: rgba(15,23,42,.6); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.mj-compass .cw { position: absolute; font-size: 12px; color: var(--text-2); }
.mj-compass .cw.on { color: var(--gold); font-weight: 800; font-size: 14px; }
.mj-compass .c0 { bottom: 3px; left: 50%; transform: translateX(-50%); } .mj-compass .c1 { right: 4px; top: 50%; transform: translateY(-50%); }
.mj-compass .c2 { top: 3px; left: 50%; transform: translateX(-50%); } .mj-compass .c3 { left: 4px; top: 50%; transform: translateY(-50%); }
.mj-cinfo { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mj-timer { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; min-height: 24px; line-height: 24px; }
.mj-timer.urgent { color: var(--error); }
.mj-target { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.mj-target.dim { opacity: .75; }
.mj-mymelds { display: flex; flex-wrap: wrap; gap: 4px; min-height: 30px; align-items: center; }
.mj-hints { display: flex; }
.mj-hint-box { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; background: rgba(15,23,42,.6); border-radius: 8px; padding: 4px 6px; }
.mj-actions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; min-height: 56px; }
.mj-act { min-height: 48px; min-width: 56px; font-size: 16px; }
.mj-act.small { font-size: 13px; min-width: 0; padding: 0 10px; }
.mj-act.hu { background: #b91c1c; color: #fff; font-size: 18px; min-width: 72px; }
.mj-hand { display: flex; flex-direction: column; gap: 4px; align-items: center; padding-top: 14px; min-height: 150px; }
.mj-hand-row { display: flex; gap: 2px; align-items: flex-end; }
.mj-overlay:empty { display: none; }
.mj-overlay { position: fixed; inset: 0; background: rgba(2,6,23,.7); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 30; }
.mj-result { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 14px; max-width: 420px; width: 100%; display: flex; flex-direction: column; gap: 8px; max-height: calc(var(--vh) - 32px); overflow: auto; }
.mj-result h2 { margin: 0; font-size: 19px; }
.mj-reveal-tiles { display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-end; }
.mj-win-tile { display: inline-flex; align-items: center; gap: 3px; padding: 2px 4px; border-radius: 5px; border: 1px dashed var(--gold); }
.mj-deltas { width: 100%; border-collapse: collapse; font-size: 14px; }
.mj-deltas td { padding: 4px 6px; border-bottom: 1px solid var(--line); }
.mj-deltas td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.mj-deltas tr.me td { font-weight: 700; }
.mj-deltas .good, .li-side.good { color: var(--good); } .mj-deltas .bad, .li-side.bad { color: var(--error); }
.mj-myline { font-size: 14px; }
.mj-result-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mj-kong-choices { display: flex; flex-direction: column; gap: 8px; }
.mj-kong-opt { display: flex; align-items: center; gap: 8px; justify-content: flex-start; }
.mj-river-full { display: flex; flex-wrap: wrap; gap: 6px; }
.mj-river-full .rf { display: flex; flex-direction: column; align-items: center; }
.mj-seats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mj-seat { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mj-seat.me { border-color: var(--gold); }
.mj-guide { display: grid; gap: 8px; }
.guide-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px; font-size: 14px; }
.guide-card p { margin: 6px 0 0; }
.mj-replay-stage { display: flex; flex-direction: column; gap: 8px; }
.mj-rp-seat { background: rgba(20,83,45,.5); border-radius: 10px; padding: 6px; }
.mj-rp-seat.me { border: 1px solid var(--gold); }
.mono.wrap { word-break: break-all; font-size: 12px; }
@media (max-width: 360px) {
  .mjt.lg { width: 40px; height: 56px; font-size: 19px; }
  .mj-mid { grid-template-columns: 60px 1fr 60px; }
  .mj-compass { min-width: 92px; min-height: 92px; padding: 18px 14px 24px; }
  .mj-river { grid-template-columns: repeat(5, 18px); }
}
@media (orientation: landscape) and (min-width: 700px) {
  .mj-mid { grid-template-columns: 140px 1fr 140px; }
  .mj-river { grid-template-columns: repeat(10, 18px); }
  .mj-board-grid .rv.left .mj-river, .mj-board-grid .rv.right .mj-river { grid-template-columns: repeat(4, 18px); }
  .mj-hand { min-height: 80px; }
}
@media (prefers-reduced-motion: reduce) { button.mjt { transition: none; } }

/* ---- styles/index.css ---- */
/* 样式模块清单：build.ts 按此处顺序把各模块内联到 styles.css 之后（同一份输出文件，页面无需额外请求）。
   规则：
   - 每个游戏一个目录，类名带游戏前缀（斗地主 .ddz-*、百家乐 .bac-*、德州 .hol-*、推倒胡 .tdh-*），避免与其他游戏或旧样式同名冲突；
   - game/ 是百家乐起新游戏共用的场景层（.g-*）：厅堂背景、顶栏、按钮、面板、弹层，与斗地主同一套视觉；
   - 公共界面（第一阶段）类名前缀 .c-*；
   - 新增模块只需在这里加一行 @import，顺序即层叠顺序。 */
/* ---- styles/common/base.css ---- */
/* 公共界面（界面 UI 第一阶段 COM-01—COM-14）：色板、页面骨架、按钮、列表、状态块、动效。由 build.ts 按 styles/index.css 顺序打包到 styles.css 之后。 */
/* ======================================================================
   界面 UI 第一阶段：公共界面（COM-01—COM-14）
   深海蓝 #0F172A · 墨绿 #14532D · 暖金 #D6A547 · 柔白 #F8FAFC；蓝金玻璃面板、暖金主按钮、深蓝珐琅次按钮
   ====================================================================== */
:root {
  --c-gold-hi: #F0CB7A; --c-gold: #D6A547; --c-gold-lo: #A97B2A; --c-ink: #1A1205;
  --c-enamel: #1B3354; --c-enamel-hi: #24446E; --c-glass: rgba(22, 32, 51, .78); --c-glass-edge: rgba(214, 165, 71, .26);
  --c-warn: #F59E0B; --c-ok: #4ADE80; --c-bad: #F87171;
}
.c-screen { display: flex; flex-direction: column; height: var(--vh); min-height: 0; padding: var(--safe-top) var(--safe-right) 0 var(--safe-left); gap: 0; overflow: hidden;
  background: radial-gradient(ellipse 70% 40% at 20% 8%, rgba(214,165,71,.10), transparent 70%), radial-gradient(ellipse 60% 35% at 85% 0%, rgba(59,130,246,.10), transparent 70%), linear-gradient(180deg, #0F172A 0%, #0B1222 100%); }
.c-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.c-screen.with-nav .c-body { padding-bottom: 12px; }
.c-body > * { flex-shrink: 0; }
.c-header { display: flex; align-items: center; gap: 4px; min-height: 52px; padding: 4px 8px; flex: 0 0 auto; }
.c-title { flex: 1; margin: 0; text-align: center; font-size: 17px; font-weight: 700; letter-spacing: .5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-icon-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 12px; background: transparent; color: var(--text); cursor: pointer; flex: 0 0 auto; }
.c-icon-btn:active { background: rgba(255,255,255,.06); }
.c-icon-spacer { width: 44px; flex: 0 0 auto; }
.c-panel { background: linear-gradient(160deg, rgba(30,41,59,.88), rgba(15,23,42,.88)); border: 1px solid var(--c-glass-edge); border-radius: 14px; padding: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 18px rgba(0,0,0,.25); }
.c-panel.c-felt { background: linear-gradient(160deg, #17603A, #0F3D24); border-color: rgba(214,165,71,.38); }
.c-section-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.c-section-title h2 { margin: 0; font-size: 15px; font-weight: 700; color: var(--c-gold-hi); letter-spacing: .5px; }
.c-btn { min-height: 48px; min-width: 44px; padding: 0 18px; border-radius: 12px; border: 1px solid transparent; font-size: 16px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: transform .08s ease, filter .15s ease; position: relative; overflow: hidden; }
.c-btn:active:not(:disabled) { transform: translateY(1px) scale(.99); }
.c-btn.primary { color: var(--c-ink); background: linear-gradient(180deg, var(--c-gold-hi), var(--c-gold) 55%, var(--c-gold-lo)); border-color: rgba(255,230,170,.6); box-shadow: 0 4px 12px rgba(214,165,71,.25), inset 0 1px 0 rgba(255,255,255,.45); }
.c-btn.ghost { color: var(--text); background: linear-gradient(180deg, var(--c-enamel-hi), var(--c-enamel)); border-color: rgba(148,163,184,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.c-btn.danger { color: #fff; background: linear-gradient(180deg, #B93838, #8F2525); }
.c-btn:disabled { cursor: default; filter: grayscale(.6) brightness(.8); opacity: .7; }
.c-btn.small { min-height: 44px; font-size: 14px; padding: 0 12px; }
.c-btn.block { width: 100%; }
.c-btn.sweep::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-120%); animation: c-sweep 900ms ease-out 400ms 1 both; pointer-events: none; }
.c-link { background: none; border: 0; color: var(--c-gold-hi); font: inherit; font-size: 14px; cursor: pointer; padding: 10px 4px; min-height: 44px; }
.c-row { display: flex; align-items: center; gap: 10px; }
.c-row.between { justify-content: space-between; }
.c-muted { color: var(--text-2); }
.c-small { font-size: 13px; }
.c-note { color: var(--muted); font-size: 13px; line-height: 1.55; margin: 0; }
.c-num { font-variant-numeric: tabular-nums; font-weight: 700; }
.c-pos { color: var(--c-ok); } .c-neg { color: var(--c-bad); }
.c-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 12px; font-weight: 600; border: 1px solid rgba(214,165,71,.5); color: var(--c-gold-hi); background: rgba(214,165,71,.1); white-space: nowrap; }
.c-tag.warn { border-color: rgba(245,158,11,.6); color: #FCD34D; background: rgba(245,158,11,.12); }
.c-tag.mute { border-color: rgba(148,163,184,.4); color: var(--text-2); background: rgba(148,163,184,.08); }
.c-tag.ok { border-color: rgba(74,222,128,.5); color: #86EFAC; background: rgba(74,222,128,.08); }
/* 底部导航 */
.c-bottom-nav { flex: 0 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); padding: 4px 4px calc(4px + var(--safe-bottom)); background: linear-gradient(180deg, rgba(15,23,42,.92), #0A1020); border-top: 1px solid rgba(214,165,71,.22); }
.c-nav-item { min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; position: relative; }
.c-nav-item.on { color: var(--c-gold-hi); }
.c-nav-item.on::after { content: ''; position: absolute; bottom: 2px; width: 22px; height: 3px; border-radius: 2px; background: var(--c-gold); }
.c-nav-ico { position: relative; display: inline-flex; }
.c-nav-dot { position: absolute; top: -4px; right: -10px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--c-gold); color: var(--c-ink); font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; }
/* 状态块 */
.c-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 28px 12px; text-align: center; color: var(--text-2); }
.c-state p { margin: 0; font-size: 14px; }
.c-state-error p, .c-state-forbidden p { color: #FCA5A5; }
.c-state-expired p { color: var(--muted); }
.c-spinner { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(214,165,71,.25); border-top-color: var(--c-gold); animation: c-spin .9s linear infinite; }
/* 列表 */
.c-list { display: flex; flex-direction: column; gap: 8px; }
.c-item { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 12px; border-radius: 12px; background: rgba(30,41,59,.72); border: 1px solid var(--line); text-align: left; color: var(--text); width: 100%; font: inherit; }
button.c-item { cursor: pointer; }
button.c-item:active { background: rgba(36,68,110,.6); }
.c-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.c-item-title { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-item-sub { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: 0 0 auto; }
.c-group-label { font-size: 13px; color: var(--muted); margin: 6px 2px 0; }
/* 分段标签 */
.c-tabs { display: flex; gap: 6px; padding: 4px; border-radius: 12px; background: rgba(15,23,42,.6); border: 1px solid var(--line); }
.c-tab { flex: 1; min-height: 40px; border: 0; border-radius: 9px; background: transparent; color: var(--text-2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.c-tab.on { color: var(--c-ink); background: linear-gradient(180deg, var(--c-gold-hi), var(--c-gold)); }
.c-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.c-chips::-webkit-scrollbar { display: none; }
.c-chip { flex: 0 0 auto; min-height: 36px; padding: 0 12px; border-radius: 18px; border: 1px solid rgba(148,163,184,.3); background: rgba(30,41,59,.7); color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer; }
.c-chip.on { border-color: var(--c-gold); color: var(--c-gold-hi); background: rgba(214,165,71,.12); }
.c-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.c-field select, .c-field input, .c-field textarea, .c-input { width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(148,163,184,.3); background: #0B1324; color: var(--text); font: inherit; font-size: 15px; -webkit-user-select: text; user-select: text; }
.c-field textarea { min-height: 112px; resize: vertical; line-height: 1.5; }
.c-counter { align-self: flex-end; font-size: 12px; color: var(--muted); }
.c-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.c-switch:last-child { border-bottom: 0; }
.c-switch input { appearance: none; -webkit-appearance: none; width: 50px; height: 30px; border-radius: 15px; background: #334155; position: relative; cursor: pointer; flex: 0 0 auto; transition: background .12s ease; margin: 0; }
.c-switch input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #F8FAFC; transition: transform .12s ease; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.c-switch input:checked { background: var(--c-gold); }
.c-switch input:checked::after { transform: translateX(20px); }
.c-switch input:disabled { opacity: .5; }
.c-switch-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.c-switch-text b { font-size: 15px; font-weight: 600; }
/* 动效 */
@keyframes c-spin { to { transform: rotate(360deg); } }
@keyframes c-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes c-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes c-sweep { to { transform: translateX(120%); } }
@keyframes c-breath { 0%, 100% { box-shadow: 0 0 18px rgba(214,165,71,.25), inset 0 0 0 2px rgba(240,203,122,.5); } 50% { box-shadow: 0 0 34px rgba(214,165,71,.5), inset 0 0 0 2px rgba(240,203,122,.8); } }
@keyframes c-flash { 0% { color: var(--c-gold-hi); text-shadow: 0 0 12px rgba(240,203,122,.8); } 100% { color: inherit; text-shadow: none; } }
@keyframes c-dot-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
.c-rise { animation: c-rise 160ms ease-out both; }
.c-fade-in { animation: c-fade 240ms ease-out both; }
.c-flash { animation: c-flash 1.2s ease-out 1; }
html.reduce-motion .c-rise, html.reduce-motion .c-flash, html.reduce-motion .c-badge, html.reduce-motion .c-btn.sweep::after, html.reduce-motion .c-hall-card.active { animation: none !important; }
html.reduce-motion .c-rise { animation: c-fade 200ms ease-out 1 both !important; }
html.reduce-motion .c-btn, html.reduce-motion .c-switch input, html.reduce-motion .c-switch input::after { transition: none; }
@media (prefers-reduced-motion: reduce) { .c-rise { animation: c-fade 200ms ease-out 1 both; } .c-badge, .c-flash, .c-btn.sweep::after { animation: none; } }

/* ---- styles/common/screens.css ---- */
/* 公共界面（界面 UI 第一阶段 COM-01—COM-14）：各页面专用样式。由 build.ts 按 styles/index.css 顺序打包到 styles.css 之后。 */
/* ---------- COM-01 启动与身份认证 ---------- */
.c-boot { align-items: center; justify-content: space-between; text-align: center; padding-bottom: calc(24px + var(--safe-bottom)); }
.c-boot-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; width: 100%; padding: 0 28px; }
.c-badge { width: 168px; height: 168px; border-radius: 50%; position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; padding: 26px;
  background: radial-gradient(circle at 35% 30%, #2A3B5C, #111A2E 70%); border: 3px solid transparent; background-clip: padding-box; animation: c-breath 3.2s ease-in-out infinite; }
.c-badge::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; background: conic-gradient(from 30deg, #F0CB7A, #A97B2A, #F5DFA6, #9C7024, #F0CB7A); z-index: -1; }
.c-badge-ico { background-size: cover; background-position: center; border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,.45); }
.c-badge-ico.ddz { background-image: url("./game-icon-ddz.png"); } .c-badge-ico.holdem { background-image: url("./game-icon-holdem.png"); }
.c-badge-ico.baccarat { background-image: url("./game-icon-baccarat.png"); } .c-badge-ico.mahjong { background-image: url("./game-icon-mahjong.png"); }
.c-boot-title { font-size: 22px; font-weight: 800; letter-spacing: 2px; color: var(--c-gold-hi); margin: 0; }
.c-progress { width: min(280px, 100%); height: 8px; border-radius: 4px; background: rgba(148,163,184,.18); overflow: hidden; }
.c-progress > div { height: 100%; background: linear-gradient(90deg, var(--c-gold-lo), var(--c-gold-hi)); border-radius: 4px; transition: width .35s ease; }
.c-boot-status { font-size: 15px; color: var(--text); min-height: 22px; margin: 0; }
.c-boot-foot { width: 100%; padding: 0 24px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.c-boot-error { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; background: rgba(127,29,29,.25); border: 1px solid rgba(248,113,113,.35); }
.c-boot-error h2 { margin: 0; font-size: 16px; color: #FCA5A5; }
.c-boot-error p { margin: 0; font-size: 14px; color: var(--text-2); }
.c-boot.leaving { animation: c-fade 300ms ease-in reverse both; }

/* ---------- COM-02 首次进入规则确认 ---------- */
.c-welcome .c-body { gap: 14px; }
.c-welcome-badge { width: 84px; height: 84px; padding: 13px; gap: 4px; margin: 6px auto 0; animation: none; box-shadow: 0 0 20px rgba(214,165,71,.3); }
.c-welcome-badge::before { inset: -4px; }
.c-welcome h1 { margin: 0; text-align: center; font-size: 22px; font-weight: 800; color: var(--c-gold-hi); letter-spacing: 1px; }
.c-welcome-gift { text-align: center; font-size: 16px; color: var(--text); margin: 0; }
.c-welcome-gift b { color: var(--c-gold-hi); font-size: 18px; }
.c-intro-card { display: flex; gap: 12px; align-items: flex-start; }
.c-intro-no { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--c-ink); background: linear-gradient(180deg, var(--c-gold-hi), var(--c-gold-lo)); }
.c-intro-card h3 { margin: 0 0 4px; font-size: 16px; }
.c-intro-card p { margin: 0; font-size: 14px; color: var(--text-2); line-height: 1.55; }
.c-welcome-actions { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; padding: 10px 16px calc(12px + var(--safe-bottom)); background: linear-gradient(180deg, transparent, rgba(11,18,34,.95) 30%); }

/* ---------- COM-03 四游戏总大厅 ---------- */
.c-hall-top { display: flex; align-items: center; gap: 12px; padding: 8px 16px 4px; flex: 0 0 auto; }
.c-hall-user { flex: 1; min-width: 0; }
.c-hall-name { display: flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 700; min-width: 0; }
.c-hall-name span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-hall-account { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.c-metric { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.c-metric small { font-size: 12px; color: var(--muted); }
.c-metric b { font-size: 17px; font-variant-numeric: tabular-nums; }
.c-metric.lead b { font-size: 24px; color: var(--c-gold-hi); }
.c-metric.lead { grid-column: 1 / -1; }
.c-resume { display: flex; align-items: center; gap: 10px; }
.c-resume .c-btn { flex: 0 0 auto; }
.c-hall-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.c-hall-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px 12px; min-height: 152px; border-radius: 16px; cursor: pointer; text-align: center; color: var(--text); font: inherit;
  background: linear-gradient(170deg, rgba(36,52,82,.95), rgba(17,26,46,.95)); border: 1px solid rgba(214,165,71,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 6px 14px rgba(0,0,0,.3); transition: transform .08s ease; }
.c-hall-card:active { transform: translateY(2px); }
.c-hall-card.off { cursor: default; }
.c-hall-card.off .c-hall-icon { filter: grayscale(.7) brightness(.7); }
.c-hall-card.active { border-color: var(--c-gold); box-shadow: 0 0 0 2px rgba(240,203,122,.55), 0 6px 14px rgba(0,0,0,.3); }
.c-hall-icon { width: 72px; height: 72px; border-radius: 16px; background-size: cover; background-position: center; box-shadow: 0 4px 10px rgba(0,0,0,.45); }
.c-hall-icon.ddz { background-image: url("./game-icon-ddz.png"); } .c-hall-icon.holdem { background-image: url("./game-icon-holdem.png"); }
.c-hall-icon.baccarat { background-image: url("./game-icon-baccarat.png"); } .c-hall-icon.mahjong { background-image: url("./game-icon-mahjong.png"); }
.c-hall-card h3 { margin: 0; font-size: 16px; font-weight: 800; }
.c-hall-card .c-tag { position: absolute; top: 8px; right: 8px; }
.c-hall-sub { font-size: 12px; color: var(--text-2); line-height: 1.35; min-height: 32px; }
.c-hall-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.c-quick { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; border-radius: 12px; border: 1px solid var(--line); background: rgba(30,41,59,.7); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
.c-quick svg { color: var(--c-gold-hi); }

/* ---------- COM-04 公告 / COM-05 我的 / COM-06 补助 / COM-07 流水 ---------- */
.c-msg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-gold); flex: 0 0 auto; animation: c-dot-in .3s ease-out both; }
.c-article { white-space: pre-wrap; word-break: break-word; font-size: 15px; line-height: 1.7; margin: 0; -webkit-user-select: text; user-select: text; }
.c-profile { display: flex; align-items: center; gap: 14px; }
.c-level { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 12px; font-size: 12px; font-weight: 800; color: var(--c-ink); background: linear-gradient(180deg, var(--c-gold-hi), var(--c-gold-lo)); box-shadow: 0 0 0 1px rgba(255,230,170,.6); }
.c-name-btn { background: none; border: 0; color: var(--text); font: inherit; font-size: 18px; font-weight: 800; padding: 0; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.c-name-btn.full { white-space: normal; word-break: break-all; }
.c-metrics3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.c-daily-card { text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.c-daily-amount { font-size: 34px; font-weight: 800; color: var(--c-gold-hi); font-variant-numeric: tabular-nums; }
.c-check { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.c-check:last-child { border-bottom: 0; }
.c-check-ico { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.c-check-ico.ok { background: rgba(74,222,128,.15); color: var(--c-ok); } .c-check-ico.no { background: rgba(248,113,113,.15); color: var(--c-bad); }
.c-check-text { display: flex; flex-direction: column; gap: 2px; }
.c-check-text small { color: var(--muted); font-size: 12px; }
.c-filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.c-filter-row label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); min-width: 0; }
.c-ledger-ico { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(214,165,71,.12); color: var(--c-gold-hi); flex: 0 0 auto; }
.c-ledger-ico.unlock { background: rgba(74,222,128,.1); color: var(--c-ok); }

/* ---------- COM-08 排行榜 ---------- */
.c-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 8px; align-items: end; }
.c-podium-col { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 14px; background: rgba(30,41,59,.72); border: 1px solid var(--line); min-width: 0; }
.c-podium-col.r1 { padding-top: 16px; border-color: rgba(240,203,122,.6); background: linear-gradient(180deg, rgba(214,165,71,.18), rgba(30,41,59,.72)); }
.c-medal { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; color: var(--c-ink); box-shadow: 0 0 10px rgba(240,203,122,.35); }
.c-medal.m1 { background: linear-gradient(180deg, #FDE68A, #D6A547); } .c-medal.m2 { background: linear-gradient(180deg, #E5E7EB, #9CA3AF); } .c-medal.m3 { background: linear-gradient(180deg, #F3C49B, #B0703C); }
.c-podium-name { font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-rank-row { display: grid; grid-template-columns: 34px 32px 1fr auto; align-items: center; gap: 8px; min-height: 48px; padding: 6px 10px; border-radius: 10px; background: rgba(30,41,59,.6); }
.c-rank-row .rk { text-align: center; color: var(--muted); font-weight: 700; }
.c-rank-row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.c-rank-row .val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.c-rank-mine { flex: 0 0 auto; padding: 8px 16px calc(8px + var(--safe-bottom)); border-top: 1px solid rgba(214,165,71,.3); background: #0B1222; }
.c-rank-mine .c-rank-row { background: rgba(214,165,71,.12); border: 1px solid rgba(214,165,71,.35); }

/* ---------- COM-10 帮助 / COM-11 举报 / COM-12 工单 ---------- */
.c-faq details { border-bottom: 1px solid var(--line); }
.c-faq details:last-child { border-bottom: 0; }
.c-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; cursor: pointer; font-size: 15px; font-weight: 600; }
.c-faq summary::-webkit-details-marker { display: none; }
.c-faq summary svg { transition: transform .15s ease; flex: 0 0 auto; color: var(--muted); }
.c-faq details[open] summary svg { transform: rotate(90deg); }
.c-faq details p { margin: 0 0 12px; font-size: 14px; color: var(--text-2); line-height: 1.65; }
.c-search { position: relative; }
.c-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.c-search input { padding-left: 38px; }
.c-ctx { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 14px; }
.c-ctx dt { color: var(--muted); } .c-ctx dd { margin: 0; overflow-wrap: anywhere; }
.c-ticket-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; -webkit-user-select: text; user-select: text; }
.c-timeline { list-style: none; margin: 0; padding: 0 0 0 4px; display: flex; flex-direction: column; }
.c-timeline li { position: relative; padding: 0 0 14px 22px; font-size: 14px; animation: c-fade .3s ease-out both; }
.c-timeline li::before { content: ''; position: absolute; left: 0; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--c-gold); box-shadow: 0 0 0 3px rgba(214,165,71,.2); }
.c-timeline li::after { content: ''; position: absolute; left: 4px; top: 16px; bottom: 0; width: 2px; background: rgba(214,165,71,.25); }
.c-timeline li:last-child::after { display: none; }
.c-timeline small { display: block; color: var(--muted); font-size: 12px; }
.c-note-bubble { padding: 10px 12px; border-radius: 10px; background: rgba(30,41,59,.8); border: 1px solid var(--line); font-size: 14px; white-space: pre-wrap; word-break: break-word; }

/* ---------- COM-13 网络异常与操作权接管 ---------- */
.c-netbar { position: fixed; z-index: 60; top: 0; left: 0; right: 0; min-height: 34px; padding: calc(4px + var(--safe-top)) 12px 4px; display: flex; align-items: center; justify-content: center; gap: 8px; background: #9A5B0B; color: #FFF7ED; font-size: 13px; box-shadow: 0 2px 10px rgba(0,0,0,.4); }
.c-netbar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.net-down .c-screen { padding-top: calc(var(--safe-top) + 34px); }
.c-netlayer { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: rgba(11,18,34,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.c-netcard { width: min(360px, 100%); display: flex; flex-direction: column; gap: 12px; padding: 18px 16px; border-radius: 16px; background: linear-gradient(160deg, rgba(30,41,59,.97), rgba(15,23,42,.97)); border: 1px solid var(--c-glass-edge); box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.c-netcard h2 { margin: 0; font-size: 18px; display: flex; align-items: center; gap: 8px; }
.c-netcard .c-status-strip { height: 4px; border-radius: 2px; background: var(--c-warn); }
.c-netcard .c-status-strip.replaced { background: var(--c-bad); }

/* ---------- COM-14 维护与功能暂未开放 ---------- */
.c-closed { text-align: center; align-items: center; }
.c-closed .c-hall-icon { width: 88px; height: 88px; margin: 8px auto 0; filter: grayscale(.4); }
.c-closed h2 { margin: 6px 0 0; font-size: 20px; }
.c-closed-reason { font-size: 16px; color: var(--text); margin: 0; }

@media (max-width: 340px) {
  .c-hall-card { min-height: 140px; padding: 12px 6px 10px; }
  .c-hall-icon { width: 60px; height: 60px; }
  .c-metric.lead b { font-size: 21px; }
  .c-quick { font-size: 11px; }
  .c-badge { width: 140px; height: 140px; padding: 22px; }
}
@media (max-height: 600px) {
  .c-badge { width: 120px; height: 120px; padding: 18px; }
  .c-boot-center { gap: 14px; }
}

/* ---- styles/ddz/index.css ---- */
/* 斗地主（界面 UI 第二阶段 DDZ-01—DDZ-24）样式模块。全部选择器带 .ddz- 前缀，只作用于斗地主页面。
   tokens   色板与尺寸变量
   scene    厅堂背景、顶栏、按钮、面板、绿桌金边、头像与角色、牌背、倍数面板、底部入口
   cards    斗地主内的牌面外观（覆盖全局 .card 的视觉，不改命中尺寸）
   lobby    DDZ-01 大厅
   rules    DDZ-02 规则
   room     DDZ-03 匹配、DDZ-04 创建练习房、DDZ-05 邀请确认、DDZ-06 准备
   table    DDZ-07—DDZ-18 牌桌各阶段
   result   DDZ-19—DDZ-21 结算、处理中、作废
   records  DDZ-22—DDZ-24 战绩、回放、发牌验证
   effects  动效与“减少动态效果” */
/* ---- styles/ddz/tokens.css ---- */
/* 斗地主色板：深海蓝 #0F172A、墨绿绒布 #14532D、暖金 #D6A547、柔白 #F8FAFC */
.ddz-screen {
  --ddz-navy: #0F172A; --ddz-navy-2: #0B1328; --ddz-navy-3: #16233F;
  --ddz-felt: #14532D; --ddz-felt-hi: #1F7A46; --ddz-felt-lo: #0C3A21;
  --ddz-gold: #D6A547; --ddz-gold-hi: #F6D88A; --ddz-gold-lo: #9C6F22; --ddz-gold-ink: #2A1B05;
  --ddz-white: #F8FAFC; --ddz-text-2: #CBD5E1; --ddz-muted: #94A3B8;
  --ddz-enamel: #1B3354; --ddz-enamel-hi: #2C4A78; --ddz-farmer: #2563EB;
  --ddz-pos: #4ADE80; --ddz-neg: #F87171; --ddz-warn: #FBBF24;
  --ddz-radius: 14px; --ddz-btn-h: 52px;
  --ddz-glass: linear-gradient(160deg, rgba(31, 46, 78, .92), rgba(13, 22, 42, .92));
  --ddz-gold-edge: rgba(214, 165, 71, .55);
}

/* ---- styles/ddz/scene.css ---- */
/* 斗地主共用场景：厅堂背景、顶栏、按钮、面板、绿桌金边、头像与角色、牌背、倍数面板、底部入口 */
.ddz-screen { position: relative; isolation: isolate; display: flex; flex-direction: column; height: var(--vh); min-height: 0; overflow: hidden;
  padding: var(--safe-top) var(--safe-right) 0 var(--safe-left); color: var(--ddz-white); background: var(--ddz-navy); }
.ddz-hall { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 22% 14% at 6% 16%, rgba(255, 186, 92, .22), transparent 70%),
    radial-gradient(ellipse 22% 14% at 94% 14%, rgba(255, 186, 92, .2), transparent 70%),
    radial-gradient(ellipse 70% 26% at 50% -2%, rgba(214, 165, 71, .2), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(255, 255, 255, .025) 46px 48px, transparent 48px 96px),
    linear-gradient(180deg, #0C1834 0%, #0F172A 40%, #0A1124 75%, #070D1C 100%); }
.ddz-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 12px; padding: 4px 16px 16px; }
.ddz-body > * { flex-shrink: 0; }
.ddz-body.center { justify-content: flex-start; }
.ddz-loading { margin: auto; color: var(--ddz-text-2); }
.ddz-fine { margin: 0; font-size: 12px; line-height: 1.55; color: var(--ddz-muted); }
.ddz-fine.center { text-align: center; }
.ddz-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; -webkit-user-select: text; user-select: text; }
.ddz-mono.wrap { overflow-wrap: anywhere; font-size: 12px; }
.ddz-row { display: flex; align-items: center; gap: 10px; }
.ddz-row.tight { gap: 6px; flex-wrap: wrap; }
.ddz-row.wrap { flex-wrap: wrap; }
.ddz-row.two > * { flex: 1 1 0; min-width: 0; }
.ddz-row.links { justify-content: center; gap: 4px 14px; flex-wrap: wrap; }
.ddz-link { background: none; border: 0; padding: 8px 4px; min-height: 44px; color: var(--ddz-gold-hi); font: inherit; font-size: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ddz-sub { font-size: 12px; color: var(--ddz-muted); }
.ddz-warn { margin: 0; color: var(--ddz-warn); font-size: 14px; }
.ddz-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 10px; font-size: 12px; color: var(--ddz-text-2); border: 1px solid rgba(148, 163, 184, .45); white-space: nowrap; }
.ddz-tag.gold { color: var(--ddz-gold-hi); border-color: var(--ddz-gold-edge); background: rgba(214, 165, 71, .1); }
.ddz-pill { margin: 0; display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-size: 13px; color: var(--ddz-gold-hi); background: rgba(10, 18, 36, .72); border: 1px solid var(--ddz-gold-edge); }

/* 顶栏 */
.ddz-top { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; min-height: 56px; padding: 6px 10px; }
.ddz-top-title { flex: 1; min-width: 0; text-align: center; }
.ddz-top-title h1 { margin: 0; font-size: 19px; font-weight: 900; letter-spacing: 1px; color: transparent; background: linear-gradient(180deg, #FFF4D2, var(--ddz-gold-hi) 45%, var(--ddz-gold)); -webkit-background-clip: text; background-clip: text; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ddz-top-title p { margin: 1px 0 0; font-size: 12px; color: var(--ddz-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; justify-content: center; align-items: center; gap: 8px; }
.ddz-top-right { display: flex; gap: 4px; flex: 0 0 auto; }
.ddz-icon-btn { width: 44px; height: 44px; flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0; border-radius: 12px; cursor: pointer;
  color: var(--ddz-white); background: linear-gradient(180deg, rgba(44, 74, 120, .75), rgba(20, 34, 62, .85)); border: 1px solid rgba(214, 165, 71, .4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.ddz-icon-btn.with-text { width: 52px; height: 48px; font-size: 11px; }
.ddz-icon-btn.gold { color: var(--ddz-gold-ink); background: linear-gradient(180deg, var(--ddz-gold-hi), var(--ddz-gold) 60%, var(--ddz-gold-lo)); }
.ddz-icon-btn:active { transform: translateY(1px); }
.ddz-icon-spacer { width: 44px; flex: 0 0 auto; }
.ddz-net { display: inline-flex; align-items: center; gap: 4px; color: #86EFAC; }
.ddz-net i { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 6px #22C55E; }
.ddz-net:not(.online) { color: #FCD34D; }
.ddz-net:not(.online) i { background: #F59E0B; box-shadow: 0 0 6px #F59E0B; }

/* 按钮：暖金主按钮、深蓝珐琅次按钮 */
.ddz-btn { min-height: var(--ddz-btn-h); min-width: 44px; padding: 0 16px; border-radius: var(--ddz-radius); font-size: 18px; font-weight: 800; letter-spacing: 1px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; position: relative; overflow: hidden; transition: transform .08s ease, filter .15s ease; white-space: nowrap; }
.ddz-btn.gold { color: var(--ddz-gold-ink); background: linear-gradient(180deg, #FFF0C2 0%, var(--ddz-gold-hi) 22%, var(--ddz-gold) 62%, var(--ddz-gold-lo) 100%); border: 1px solid rgba(255, 232, 170, .8); box-shadow: 0 6px 16px rgba(214, 165, 71, .28), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(120, 80, 20, .35); }
.ddz-btn.blue { color: var(--ddz-white); background: linear-gradient(180deg, var(--ddz-enamel-hi), var(--ddz-enamel)); border: 1px solid rgba(148, 163, 184, .4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 4px 10px rgba(0, 0, 0, .3); }
.ddz-btn.ghost { color: var(--ddz-text-2); background: rgba(15, 23, 42, .5); border: 1px solid rgba(148, 163, 184, .35); font-size: 16px; }
.ddz-btn.big { min-height: 56px; width: 100%; font-size: 20px; letter-spacing: 3px; }
.ddz-btn:active:not(:disabled) { transform: translateY(1px) scale(.99); }
.ddz-btn:disabled { cursor: default; filter: grayscale(.65) brightness(.75); opacity: .72; }
.ddz-btn.busy { filter: none; opacity: .85; }
.ddz-btn.gold.sheen::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); transform: translateX(-120%); animation: ddz-sheen 1.1s ease-out .3s 1 both; pointer-events: none; }

/* 面板 */
.ddz-panel { background: var(--ddz-glass); border: 1px solid var(--ddz-gold-edge); border-radius: 16px; padding: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 22px rgba(0, 0, 0, .35); }
.ddz-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.ddz-sec-head h3 { margin: 0; font-size: 17px; color: var(--ddz-gold-hi); font-weight: 800; }
.ddz-sec-head small { color: var(--ddz-muted); font-size: 12px; }
.ddz-notice { padding: 10px 14px; border-radius: 14px; background: rgba(15, 26, 50, .78); border: 1px solid rgba(148, 163, 184, .3); display: flex; flex-direction: column; gap: 8px; }
.ddz-notice p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ddz-text-2); }
.ddz-notice.warn { border-color: rgba(251, 191, 36, .55); background: rgba(68, 44, 8, .55); }
.ddz-notice.warn p { color: #FDE68A; }
.ddz-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.ddz-kv dt { color: var(--ddz-muted); }
.ddz-kv dd { margin: 0; min-width: 0; }
.ddz-chip { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ddz-chip-ico { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ddz-gold-hi); background: radial-gradient(circle at 35% 30%, rgba(214, 165, 71, .35), rgba(214, 165, 71, .08)); border: 1px solid var(--ddz-gold-edge); }
.ddz-chip small { display: block; font-size: 12px; color: var(--ddz-text-2); white-space: nowrap; }
.ddz-chip > div { min-width: 0; }
.ddz-chip b { display: block; font-size: 16px; color: var(--ddz-gold-hi); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; line-height: 1.3; }
.ddz-tabs { flex: 0 0 auto; display: flex; gap: 6px; margin: 0 16px 8px; padding: 4px; border-radius: 14px; background: rgba(10, 18, 36, .75); border: 1px solid var(--ddz-gold-edge); }
.ddz-tab { flex: 1; min-height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--ddz-text-2); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.ddz-tab.on { color: var(--ddz-gold-ink); background: linear-gradient(180deg, var(--ddz-gold-hi), var(--ddz-gold)); box-shadow: 0 2px 8px rgba(214, 165, 71, .3); }
.ddz-seg { display: inline-flex; padding: 3px; gap: 3px; border-radius: 12px; background: rgba(10, 18, 36, .75); border: 1px solid rgba(148, 163, 184, .3); }
.ddz-seg button { min-width: 44px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--ddz-text-2); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.ddz-seg button.on { background: linear-gradient(180deg, var(--ddz-gold-hi), var(--ddz-gold)); color: var(--ddz-gold-ink); }
.ddz-foot { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; align-items: stretch; padding: 10px 16px calc(12px + var(--safe-bottom)); background: linear-gradient(180deg, transparent, rgba(7, 13, 28, .92) 35%); }
.ddz-foot > small { text-align: center; font-size: 12px; color: var(--ddz-muted); display: flex; align-items: center; justify-content: center; gap: 4px; }

/* 绿桌金边 */
.ddz-rim { position: relative; border-radius: 50%; padding: 7px; background: linear-gradient(160deg, #FFE7A8 0%, #C9993E 22%, #7A5414 48%, #E8C46C 70%, #8C6420 100%);
  box-shadow: 0 0 0 1px rgba(255, 240, 200, .35), 0 14px 34px rgba(0, 0, 0, .55), 0 0 40px rgba(214, 165, 71, .18); }
.ddz-felt { position: relative; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(ellipse 70% 60% at 50% 42%, var(--ddz-felt-hi) 0%, var(--ddz-felt) 55%, var(--ddz-felt-lo) 100%);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35), inset 0 10px 30px rgba(0, 0, 0, .45), inset 0 -8px 24px rgba(0, 0, 0, .4); }
.ddz-felt-mark { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); width: 34%; aspect-ratio: 1; opacity: .09; pointer-events: none;
  background: radial-gradient(circle at 30% 42%, #E6F4EA 0 24%, transparent 25%), radial-gradient(circle at 70% 42%, #E6F4EA 0 24%, transparent 25%), conic-gradient(from 135deg at 50% 18%, #E6F4EA 0 90deg, transparent 0); clip-path: polygon(50% 0, 100% 52%, 72% 78%, 58% 72%, 66% 100%, 34% 100%, 42% 72%, 28% 78%, 0 52%); }

/* 头像与角色 */
.ddz-avatar { position: relative; flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #34507F, #12203B); border: 2px solid var(--ddz-gold); box-shadow: 0 0 0 2px rgba(10, 18, 36, .9), 0 0 14px rgba(214, 165, 71, .35); }
.ddz-avatar .avatar { border-radius: 50%; }
.ddz-avatar.empty { border-color: rgba(214, 165, 71, .55); color: rgba(203, 213, 225, .55); }
.ddz-avatar-empty { display: flex; }
.ddz-avatar.ready { box-shadow: 0 0 0 2px rgba(10, 18, 36, .9), 0 0 18px rgba(240, 203, 122, .75); }
.ddz-avatar.auto { border-color: #60A5FA; box-shadow: 0 0 0 2px rgba(10, 18, 36, .9), 0 0 14px rgba(96, 165, 250, .55); }
.ddz-ring { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); transform: rotate(-90deg); pointer-events: none; overflow: visible; }
.ddz-ring circle { fill: none; stroke-width: 3; }
.ddz-ring .bg { stroke: rgba(255, 255, 255, .14); }
.ddz-ring .fg { stroke: var(--ddz-gold-hi); stroke-linecap: round; transition: stroke-dasharray .2s linear; filter: drop-shadow(0 0 3px rgba(246, 216, 138, .8)); }
.ddz-ring .fg.urgent { stroke: var(--ddz-neg); filter: drop-shadow(0 0 3px rgba(248, 113, 113, .8)); }
.ddz-avatar.auto .ddz-ring .fg { stroke: #60A5FA; }
.ddz-role { display: inline-flex; align-items: center; gap: 3px; height: 26px; padding: 0 10px; border-radius: 13px; font-size: 14px; font-weight: 800; white-space: nowrap; flex: 0 0 auto; }
.ddz-role.small { height: 22px; padding: 0 8px; font-size: 12px; }
.ddz-role.landlord { color: var(--ddz-gold-ink); background: linear-gradient(180deg, #FFF0C2, var(--ddz-gold) 70%, var(--ddz-gold-lo)); box-shadow: 0 0 0 1px rgba(255, 232, 170, .7), 0 0 10px rgba(214, 165, 71, .4); }
.ddz-role.farmer { color: #fff; background: linear-gradient(180deg, #3B82F6, #1D4ED8); box-shadow: 0 0 0 1px rgba(147, 197, 253, .6); }
.ddz-role.none { color: var(--ddz-muted); border: 1px solid rgba(148, 163, 184, .4); }
.ddz-crown { width: 14px; height: 10px; background: currentColor; clip-path: polygon(0 100%, 0 20%, 25% 55%, 50% 0, 75% 55%, 100% 20%, 100% 100%); }

/* 牌背 */
.ddz-back { display: inline-block; width: 26px; height: 38px; border-radius: 4px; flex: 0 0 auto;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .28) 0 3px, transparent 4px), repeating-linear-gradient(45deg, #2747A8 0 4px, #1E3A8A 4px 8px);
  border: 2px solid #F1F5F9; box-shadow: 0 2px 4px rgba(0, 0, 0, .45); }
.ddz-back.solo { width: 36px; height: 50px; border-radius: 6px; }
.ddz-fan { display: flex; }
.ddz-fan .ddz-back + .ddz-back { margin-left: -18px; }
.ddz-fan.right { flex-direction: row-reverse; }
.ddz-fan.right .ddz-back + .ddz-back { margin-left: 0; margin-right: -18px; }

/* 倍数面板 */
.ddz-mult { display: grid; grid-template-columns: repeat(3, 1fr); padding: 6px 4px; border-radius: 12px; background: rgba(8, 16, 32, .82); border: 1px solid var(--ddz-gold-edge); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); position: relative; }
.ddz-mult > div { display: flex; flex-direction: column; align-items: center; min-width: 0; position: relative; }
.ddz-mult > div + div { border-left: 1px solid rgba(214, 165, 71, .3); }
.ddz-mult small { font-size: 11px; color: var(--ddz-text-2); }
.ddz-mult b { font-size: 16px; letter-spacing: -.3px; color: var(--ddz-gold-hi); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ddz-mult.capped { border-color: var(--ddz-gold-hi); }
.ddz-mult-bump { position: absolute; bottom: -24px; z-index: 2; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 800; color: var(--ddz-gold-ink); background: var(--ddz-gold-hi); box-shadow: 0 0 12px rgba(246, 216, 138, .8); }

/* 斗地主底部入口 */
.ddz-dock { flex: 0 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px 6px calc(6px + var(--safe-bottom)); background: linear-gradient(180deg, rgba(12, 22, 44, .95), #070D1C); border-top: 1px solid var(--ddz-gold-edge); }
.ddz-dock-item { min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; background: transparent; color: var(--ddz-text-2); font: inherit; font-size: 12px; cursor: pointer; }
.ddz-dock-item svg { color: var(--ddz-gold-hi); }
.ddz-dock-ico { position: relative; display: inline-flex; }
.ddz-dot { position: absolute; top: -2px; right: -6px; width: 9px; height: 9px; border-radius: 50%; background: #F87171; box-shadow: 0 0 6px #F87171; }
.ddz-practice-flag { align-self: center; padding: 4px 14px; border-radius: 999px; font-size: 13px; font-weight: 800; color: #E0F2FE; background: linear-gradient(180deg, #2563EB, #1E40AF); border: 1px solid rgba(147, 197, 253, .6); box-shadow: 0 0 12px rgba(37, 99, 235, .45); }
.ddz-practice-flag.fixed { position: absolute; top: calc(var(--safe-top) + 58px); left: 50%; transform: translateX(-50%); z-index: 5; }
.ddz-bubble { display: inline-flex; align-items: center; padding: 5px 14px; border-radius: 999px; font-size: 15px; font-weight: 800; color: var(--ddz-white); background: rgba(15, 26, 50, .9); border: 1px solid rgba(214, 165, 71, .55); box-shadow: 0 4px 10px rgba(0, 0, 0, .35); white-space: nowrap; }
.ddz-bubble.gold { color: var(--ddz-gold-ink); background: linear-gradient(180deg, var(--ddz-gold-hi), var(--ddz-gold)); }
.ddz-bubble.chat { position: absolute; top: 58px; font-size: 13px; font-weight: 600; z-index: 4; }

/* ---- styles/ddz/cards.css ---- */
/* 斗地主牌面：象牙白牌面、衬线大字点数、大花色；只改外观，手牌的命中与排布尺寸仍由 HandView 计算（54×76） */
.ddz-screen .card { background: linear-gradient(180deg, #FFFFFF 0%, #FBF8F1 100%); border: 1px solid #D6CFC0; border-radius: 7px; box-shadow: -2px 1px 4px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(255, 255, 255, .7); color: #111827; }
.ddz-screen .card.red { color: #D21F2D; }
.ddz-screen .card .c-rank { top: 3px; left: 4px; font-family: Georgia, "Times New Roman", "Noto Serif SC", serif; font-size: 22px; font-weight: 700; letter-spacing: -1.5px; }
.ddz-screen .card .c-suit { top: 26px; left: 5px; font-size: 15px; }
.ddz-screen .card .c-center { right: 4px; bottom: 3px; font-size: 27px; opacity: 1; }
.ddz-screen .card.joker .c-joker { top: 5px; left: 5px; font-size: 13px; font-weight: 900; }
.ddz-screen .card.joker .c-center { font-size: 22px; right: 6px; bottom: 6px; }
.ddz-screen .card.joker:not(.red) { color: #1F2937; }
.ddz-screen .card.back { background: radial-gradient(circle, rgba(255, 255, 255, .3) 0 3px, transparent 4px), repeating-linear-gradient(45deg, #2747A8 0 5px, #1E3A8A 5px 10px); border: 2px solid #F1F5F9; }
/* 小牌（出牌区、底牌、牌型示例） */
.ddz-screen .card-row.small .card, .ddz-screen .card.small { width: 36px; height: 50px; border-radius: 5px; }
.ddz-screen .card-row.small .card .c-rank, .ddz-screen .card.small .c-rank { font-size: 15px; top: 2px; left: 3px; letter-spacing: -1px; }
.ddz-screen .card-row.small .card .c-suit, .ddz-screen .card.small .c-suit { font-size: 11px; top: 18px; left: 3px; }
.ddz-screen .card-row.small .card .c-center, .ddz-screen .card.small .c-center { font-size: 16px; right: 3px; bottom: 2px; }
.ddz-screen .card-row.small .card.joker .c-joker, .ddz-screen .card.small.joker .c-joker { font-size: 9px; top: 3px; left: 3px; }
.ddz-screen .card-row.small .card.joker .c-center, .ddz-screen .card.small.joker .c-center { font-size: 13px; }
.ddz-screen .card-row.small .card + .card { margin-left: -18px; }
/* 出牌区的牌稍大，便于读牌 */
.ddz-screen .ddz-played .card { width: 42px; height: 59px; }
.ddz-screen .ddz-played .card + .card { margin-left: -20px; }
.ddz-screen .ddz-played .card .c-rank { font-size: 18px; }
.ddz-screen .ddz-played .card .c-suit { font-size: 12px; top: 21px; }
.ddz-screen .ddz-played .card .c-center { font-size: 20px; }
/* 手牌：选中上抬并描金；提交中半透明；跟牌已选时其他牌淡化 */
.ddz-screen .ddz-hand .card.selected { transform: translateY(-14px); box-shadow: 0 0 0 2px var(--ddz-gold-hi), 0 0 14px rgba(246, 216, 138, .75), -2px 1px 4px rgba(0, 0, 0, .3); }
.ddz-screen .ddz-hand .card.submitting { opacity: .5; }
.ddz-screen .ddz-hand.has-sel .card:not(.selected) { filter: brightness(.8) saturate(.85); }
.ddz-screen .ddz-hand.disabled .card { cursor: default; }

/* ---- styles/ddz/lobby.css ---- */
/* DDZ-01 大厅 */
.ddz-lobby .announcements:empty { display: none; }
.ddz-hero { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.ddz-rim.ddz-mini { width: min(78%, 300px); aspect-ratio: 2.1 / 1; }
.ddz-mini-cards { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); display: flex; }
.ddz-mini-cards .card { position: relative; flex: none; }
.ddz-mini-cards .card:nth-child(1) { transform: rotate(-12deg) translate(6px, 4px); }
.ddz-mini-cards .card:nth-child(3) { transform: rotate(12deg) translate(-6px, 4px); }
.ddz-hero-text h2 { margin: 0; font-size: 20px; font-weight: 900; color: var(--ddz-gold-hi); letter-spacing: 1px; }
.ddz-hero-text p { margin: 4px 0 0; font-size: 14px; color: var(--ddz-text-2); }
.ddz-stats { display: flex; flex-direction: column; gap: 10px; }
.ddz-stats-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ddz-stats-row .ddz-chip { flex-direction: column; text-align: center; gap: 4px; }
.ddz-stats-row .ddz-chip:nth-child(n + 2) { border-left: 1px solid rgba(214, 165, 71, .25); }
.ddz-stats-time { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 16px; padding-top: 8px; border-top: 1px solid rgba(214, 165, 71, .2); font-size: 14px; color: var(--ddz-text-2); }
.ddz-stats-time span { display: inline-flex; align-items: center; gap: 4px; }
.ddz-wallet { display: flex; align-items: center; gap: 12px; }
.ddz-coin { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF2C4, #E3B653 45%, #9C6F22 100%); box-shadow: inset 0 -3px 0 rgba(120, 80, 20, .6), 0 0 12px rgba(214, 165, 71, .45); }
.ddz-wallet-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ddz-wallet-main small { font-size: 13px; color: var(--ddz-text-2); }
.ddz-wallet-main b { font-size: 26px; color: var(--ddz-gold-hi); font-variant-numeric: tabular-nums; line-height: 1.15; }
.ddz-wallet-gap { flex: 0 0 auto; max-width: 46%; display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-size: 13px; color: #FCA5A5; }
.ddz-wallet-gap.ok { color: #86EFAC; }
.ddz-wallet-gap.note { color: var(--ddz-text-2); }
.ddz-wallet-gap .ddz-link { min-height: 32px; padding: 2px 0; }
.ddz-actions-col { display: flex; flex-direction: column; gap: 10px; }

/* ---- styles/ddz/rules.css ---- */
/* DDZ-02 新手操作与规则 */
.ddz-rules-hero { flex: 0 0 auto; margin: 0 16px 10px; padding: 12px 14px; text-align: center; border-radius: 16px; background: linear-gradient(180deg, rgba(31, 46, 78, .9), rgba(13, 22, 42, .9)); border: 1px solid var(--ddz-gold-edge); }
.ddz-rules-hero h2 { margin: 0; font-size: 21px; font-weight: 900; color: var(--ddz-gold-hi); letter-spacing: 1px; }
.ddz-rules-hero p { margin: 4px 0 0; font-size: 13px; color: var(--ddz-text-2); }
.ddz-rules-body { display: flex; flex-direction: column; gap: 12px; }
.ddz-ex-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ddz-ex { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 108px; padding: 8px 6px; border-radius: 12px; cursor: pointer; text-align: center; font: inherit; color: var(--ddz-white); background: rgba(10, 18, 36, .6); border: 1px solid rgba(214, 165, 71, .3); }
.ddz-ex b { font-size: 15px; color: var(--ddz-gold-hi); }
.ddz-ex small { font-size: 12px; line-height: 1.4; color: var(--ddz-text-2); }
.ddz-ex .card-row { min-height: 50px; }
.ddz-ex:focus-visible { outline: 2px solid var(--ddz-gold-hi); outline-offset: 2px; }
.ddz-steps { list-style: none; counter-reset: ddz-step; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ddz-steps li { counter-increment: ddz-step; position: relative; padding: 12px 14px 12px 52px; border-radius: 14px; background: var(--ddz-glass); border: 1px solid rgba(214, 165, 71, .35); }
.ddz-steps li::before { content: counter(ddz-step); position: absolute; left: 12px; top: 12px; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; color: var(--ddz-gold-ink); background: linear-gradient(180deg, var(--ddz-gold-hi), var(--ddz-gold-lo)); }
.ddz-steps b { font-size: 16px; color: var(--ddz-gold-hi); }
.ddz-steps p { margin: 4px 0 0; font-size: 14px; line-height: 1.6; color: var(--ddz-text-2); }
.ddz-key-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ddz-key-grid .ddz-chip { padding: 10px; border-radius: 12px; background: var(--ddz-glass); border: 1px solid rgba(214, 165, 71, .35); }
.ddz-prose h3 { margin: 4px 0 6px; font-size: 16px; color: var(--ddz-gold-hi); }
.ddz-prose p { margin: 0 0 10px; font-size: 14px; line-height: 1.65; color: var(--ddz-text-2); }
.ddz-modal-text p { margin: 0 0 8px; line-height: 1.6; }

/* ---- styles/ddz/room.css ---- */
/* DDZ-03 匹配等待、DDZ-04 创建练习房、DDZ-05 邀请确认、DDZ-06 准备与等待开局：椭圆绿桌，三席，本人固定在下方 */
.ddz-rim.ddz-wait-table, .ddz-rim.ddz-create-table, .ddz-rim.ddz-room-table { width: 100%; aspect-ratio: 1.42 / 1; margin: 34px 0 46px; flex-shrink: 0; }
.ddz-slot { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 72px; }
.ddz-slot.left { left: 2%; top: -14%; }
.ddz-slot.right { right: 2%; top: -14%; }
.ddz-slot.me { left: 50%; bottom: -22%; transform: translateX(-50%); }
.ddz-slot-tag { margin-top: -8px; padding: 3px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--ddz-white); background: rgba(10, 18, 36, .92); border: 1px solid var(--ddz-gold-edge); white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.ddz-slot-tag.me { color: var(--ddz-gold-hi); }
.ddz-slot-tag.ready { border-color: var(--ddz-gold-hi); }
.ddz-ready { font-size: 12px; padding: 1px 8px; border-radius: 8px; color: var(--ddz-text-2); background: rgba(15, 23, 42, .75); }
.ddz-ready.on { color: var(--ddz-gold-ink); background: var(--ddz-gold-hi); font-weight: 800; }
.ddz-owner, .ddz-offline { font-size: 11px; color: var(--ddz-muted); }
.ddz-offline { color: #FCA5A5; }
.ddz-kick { min-height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid rgba(248, 113, 113, .5); background: rgba(127, 29, 29, .4); color: #FECACA; font: inherit; font-size: 12px; cursor: pointer; }
.ddz-wait-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%); width: 78%; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.ddz-wait-center h2 { margin: 0; font-size: 21px; font-weight: 900; color: var(--ddz-gold-hi); text-shadow: 0 2px 8px rgba(0, 0, 0, .55); letter-spacing: 1px; }
.ddz-wait-center p { margin: 0; display: inline-flex; align-items: center; gap: 4px; font-size: 15px; color: var(--ddz-white); }
.ddz-wait-center small { font-size: 12px; color: #D1FAE5; opacity: .85; }
.ddz-wait-num { font-size: 22px; color: var(--ddz-gold-hi); font-variant-numeric: tabular-nums; }
.ddz-count { color: #fff; font-variant-numeric: tabular-nums; }
.ddz-matching .ddz-slot:not(.me) .ddz-avatar { animation: ddz-seek 2.4s ease-in-out infinite; }
.ddz-matching .ddz-slot.right .ddz-avatar { animation-delay: 1.2s; }
.ddz-create-table.created .ddz-felt { animation: ddz-ring-open .2s ease-out 1 both; }
.ddz-invite-box { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.ddz-invite-card { display: flex; flex-direction: column; gap: 12px; align-items: stretch; text-align: left; border-width: 2px; }
.ddz-invite-card h2 { margin: 0; font-size: 20px; color: var(--ddz-gold-hi); }
.ddz-invite-card p { margin: 0; color: var(--ddz-text-2); }
.ddz-invite-card.bad { border-color: rgba(248, 113, 113, .55); }
.ddz-invite-card.bad h2 { color: #FCA5A5; }
.ddz-invite-box .ddz-foot { background: none; padding: 0; }
@media (max-width: 360px) {
  .ddz-rim.ddz-wait-table, .ddz-rim.ddz-create-table, .ddz-rim.ddz-room-table { margin: 30px 0 40px; }
  .ddz-wait-center h2 { font-size: 18px; }
  .ddz-slot { min-width: 64px; }
}

/* ---- styles/ddz/table.css ---- */
/* DDZ-07—DDZ-18 牌桌：上家左、下家右固定；中间底牌与倍数；出牌区；阶段说明与计时；操作按钮；本人两行手牌；本人信息条 */
.ddz-table .ddz-top { min-height: 52px; position: relative; z-index: 4; }
.ddz-table .ddz-top-right { gap: 2px; }
.ddz-area { flex: 1; min-height: 0; position: relative; margin: 0 4px; }
.ddz-area-rim { position: absolute; left: -18%; right: -18%; top: 6px; bottom: -70px; z-index: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 50% 45%, var(--ddz-felt-hi) 0%, var(--ddz-felt) 55%, var(--ddz-felt-lo) 100%);
  box-shadow: 0 0 0 5px #C99A3E, 0 0 0 7px #6E4B12, 0 0 0 9px rgba(240, 203, 122, .55), 0 0 0 11px rgba(10, 18, 36, .8), 0 18px 40px rgba(0, 0, 0, .6), inset 0 12px 40px rgba(0, 0, 0, .45); }
.ddz-area-rim::after { content: ''; position: absolute; left: 50%; top: 52%; width: 92px; height: 92px; transform: translate(-50%, -50%); opacity: .08;
  background: radial-gradient(circle at 30% 42%, #E6F4EA 0 24%, transparent 25%), radial-gradient(circle at 70% 42%, #E6F4EA 0 24%, transparent 25%), conic-gradient(from 135deg at 50% 18%, #E6F4EA 0 90deg, transparent 0); clip-path: polygon(50% 0, 100% 52%, 72% 78%, 58% 72%, 66% 100%, 34% 100%, 42% 72%, 28% 78%, 0 52%); }

/* 对手 */
.ddz-opps { position: absolute; z-index: 2; top: 16px; left: 8px; right: 8px; }
.ddz-opp { position: absolute; top: 0; width: calc(50% - 72px); display: flex; flex-direction: column; gap: 6px; }
.ddz-opp.left { left: 0; align-items: flex-start; }
.ddz-opp.right { right: 0; align-items: flex-end; }
.ddz-opp-id { display: flex; gap: 8px; align-items: flex-start; max-width: 100%; }
.ddz-opp.right .ddz-opp-id { flex-direction: row-reverse; }
.ddz-opp-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; align-items: flex-start; }
.ddz-opp.right .ddz-opp-meta { align-items: flex-end; }
.ddz-name { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ddz-count { font-size: 13px; color: var(--ddz-text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ddz-count.warn { color: var(--ddz-warn); font-weight: 900; }
.ddz-flags { display: flex; gap: 4px; }
.ddz-flags:empty { display: none; }
.ddz-flags i { font-style: normal; font-size: 11px; padding: 1px 6px; border-radius: 6px; background: rgba(37, 99, 235, .3); color: #BFDBFE; }
.ddz-flags i.off { background: rgba(127, 29, 29, .5); color: #FECACA; }
.ddz-opp.acting .ddz-name { color: var(--ddz-gold-hi); }
.ddz-opp-open .card-row.small .card + .card { margin-left: -24px; }

/* 中间：底牌与倍数 */
.ddz-midinfo { position: absolute; z-index: 1; top: 14px; left: 50%; transform: translateX(-50%); width: 132px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ddz-bottom { display: flex; gap: 4px; justify-content: center; }
.ddz-bottom .card { position: relative; flex: none; }
.ddz-midinfo .ddz-mult { width: 100%; }
.ddz-capnote { padding: 3px 8px; border-radius: 8px; font-size: 12px; text-align: center; color: var(--ddz-gold-ink); background: var(--ddz-gold-hi); }

/* 出牌区 */
.ddz-zones { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ddz-zone { position: absolute; display: flex; flex-direction: column; gap: 4px; max-width: calc(50% - 8px); }
.ddz-zone.left { left: 10px; top: 150px; align-items: flex-start; }
.ddz-zone.right { right: 10px; top: 150px; align-items: flex-end; }
.ddz-zone.me { left: 50%; top: 214px; transform: translateX(-50%); align-items: center; max-width: 92%; }
.ddz-combo { padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 800; color: var(--ddz-gold-hi); background: rgba(10, 18, 36, .85); border: 1px solid var(--ddz-gold-edge); white-space: nowrap; }
.ddz-combo.hot { color: var(--ddz-gold-ink); background: linear-gradient(180deg, var(--ddz-gold-hi), var(--ddz-gold)); }

/* 阶段说明与计时 */
.ddz-center { position: absolute; z-index: 2; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; pointer-events: none; }
.ddz-stage { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; max-width: 92%; }
.ddz-stage > small { font-size: 13px; color: var(--ddz-text-2); text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.ddz-stage.cannot > small { color: #FDE68A; font-size: 14px; font-weight: 700; padding: 4px 12px; border-radius: 10px; background: rgba(60, 45, 10, .65); border: 1px solid rgba(214, 165, 71, .45); }
.ddz-turn-label { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 900; letter-spacing: 2px; color: var(--ddz-gold-hi); text-shadow: 0 2px 10px rgba(0, 0, 0, .6); white-space: nowrap; }
.ddz-turn-label::before, .ddz-turn-label::after { content: ''; width: 46px; height: 2px; background: linear-gradient(90deg, transparent, var(--ddz-gold)); }
.ddz-turn-label::after { transform: scaleX(-1); }
.ddz-turn-label.dim { font-size: 17px; color: var(--ddz-white); letter-spacing: 1px; }
.ddz-timer { --frac: 1; width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: conic-gradient(var(--ddz-gold-hi) calc(var(--frac) * 360deg), rgba(255, 255, 255, .12) 0); box-shadow: 0 0 16px rgba(214, 165, 71, .45); }
.ddz-timer b { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 900; color: var(--ddz-white); background: radial-gradient(circle at 40% 35%, #1E2D4D, #0B1328); font-variant-numeric: tabular-nums; }
.ddz-timer.small { width: 42px; height: 42px; }
.ddz-timer.small b { width: 34px; height: 34px; font-size: 16px; }
.ddz-timer.urgent { background: conic-gradient(var(--ddz-neg) calc(var(--frac) * 360deg), rgba(255, 255, 255, .12) 0); box-shadow: 0 0 16px rgba(248, 113, 113, .5); }
.ddz-plaque { padding: 10px 22px; border-radius: 16px; text-align: center; background: linear-gradient(180deg, rgba(31, 46, 78, .95), rgba(13, 22, 42, .95)); border: 2px solid var(--ddz-gold); box-shadow: 0 8px 24px rgba(0, 0, 0, .5), 0 0 20px rgba(214, 165, 71, .25); }
.ddz-plaque h2 { margin: 0; font-size: 22px; font-weight: 900; color: var(--ddz-gold-hi); letter-spacing: 1px; }
.ddz-plaque p { margin: 4px 0 0; font-size: 15px; color: var(--ddz-white); }
.ddz-plaque.safe { border-color: #60A5FA; }
.ddz-plaque.safe h2 { color: #BFDBFE; }
.ddz-deck { position: relative; width: 60px; height: 56px; }
.ddz-deck .ddz-back { position: absolute; left: 12px; top: 3px; }
.ddz-deck .ddz-back:nth-child(2) { transform: rotate(-14deg); }
.ddz-deck .ddz-back:nth-child(3) { transform: rotate(14deg); }

/* 操作按钮 */
.ddz-acts { flex: 0 0 auto; position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; padding: 6px 12px; }
.ddz-acts .ddz-btn { flex: 1 1 0; max-width: 170px; padding: 0 8px; }
.ddz-acts .ddz-btn.ghost { max-width: 120px; }
.ddz-acts-note { margin: 0; display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--ddz-text-2); text-align: center; }
.ddz-acts.auto { flex-direction: column; gap: 6px; padding-top: 4px; }
.ddz-acts.auto .ddz-btn { width: 100%; max-width: 280px; flex: 0 0 auto; }
.ddz-acts .ddz-link { position: absolute; right: 8px; top: -30px; min-height: 32px; font-size: 13px; }

/* 本人手牌与信息条 */
/* 手牌区固定按两行高度预留（18 + 2×68 + 8），一行时按钮位置不跳动 */
.ddz-hand { position: relative; z-index: 3; margin: 0 8px; flex: none; touch-action: none; min-height: 162px; }
.ddz-mebar { flex: 0 0 auto; position: relative; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 8px 12px calc(8px + var(--safe-bottom)); background: linear-gradient(180deg, rgba(14, 24, 48, .96), #070D1C); border-top: 1px solid var(--ddz-gold-edge); }
.ddz-me-id { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.ddz-me-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ddz-me-meta b { font-size: 16px; }
.ddz-me-pts { font-size: 13px; color: var(--ddz-text-2); white-space: nowrap; }
.ddz-me-pts b { font-size: 18px; color: var(--ddz-gold-hi); font-variant-numeric: tabular-nums; }
.ddz-me-count { font-size: 12px; color: var(--ddz-muted); white-space: nowrap; }
.ddz-auto-tag { display: inline-flex; align-items: center; gap: 2px; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 12px; font-weight: 700; color: #DBEAFE; background: rgba(37, 99, 235, .45); border: 1px solid rgba(147, 197, 253, .6); }
.ddz-auto-btn { flex: 0 0 auto; min-height: 48px; min-width: 76px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; border-radius: 14px; cursor: pointer; font: inherit; font-size: 16px; font-weight: 800; color: var(--ddz-white);
  background: linear-gradient(180deg, rgba(44, 74, 120, .8), rgba(20, 34, 62, .9)); border: 1px solid rgba(148, 163, 184, .45); }
.ddz-auto-btn:disabled { opacity: .6; }
.ddz-robot { position: relative; width: 22px; height: 16px; border-radius: 5px; border: 2px solid currentColor; }
.ddz-robot::before { content: ''; position: absolute; left: 3px; right: 3px; top: 4px; height: 4px; background: radial-gradient(circle at 25% 50%, currentColor 0 2px, transparent 2.5px), radial-gradient(circle at 75% 50%, currentColor 0 2px, transparent 2.5px); }
.ddz-robot::after { content: ''; position: absolute; left: 50%; top: -7px; width: 2px; height: 5px; background: currentColor; transform: translateX(-50%); }
.ddz-me-id.auto .ddz-avatar { border-color: #60A5FA; }
.ddz-robot.sm { width: 14px; height: 11px; border-width: 1.5px; border-radius: 3px; margin-right: 3px; }
.ddz-robot.sm::before { left: 2px; right: 2px; top: 2px; height: 3px; background: radial-gradient(circle at 25% 50%, currentColor 0 1.2px, transparent 1.6px), radial-gradient(circle at 75% 50%, currentColor 0 1.2px, transparent 1.6px); }
.ddz-robot.sm::after { top: -5px; height: 3px; width: 1.5px; }

/* 矮屏（≤700 高）：收起牌背扇、缩小间距，优先保证手牌和主操作 */
@media (max-height: 700px) {
  .ddz-table .ddz-top { min-height: 46px; padding: 2px 8px; }
  .ddz-table .ddz-top-title h1 { font-size: 16px; }
  .ddz-opps { top: 10px; }
  .ddz-opp .ddz-fan { display: none; }
  .ddz-midinfo { top: 6px; gap: 4px; width: 124px; }
  .ddz-mult { padding: 3px 2px; }
  .ddz-mult b { font-size: 14px; }
  .ddz-zone.left, .ddz-zone.right { top: 92px; }
  .ddz-zone.me { top: 100px; }
  .ddz-center { bottom: 4px; }
  .ddz-stage { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 10px; }
  .ddz-stage > small { flex-basis: 100%; }
  .ddz-turn-label { font-size: 18px; }
  .ddz-turn-label::before, .ddz-turn-label::after { width: 22px; }
  .ddz-timer { width: 44px; height: 44px; }
  .ddz-timer b { width: 36px; height: 36px; font-size: 17px; }
  .ddz-plaque { padding: 6px 14px; }
  .ddz-plaque h2 { font-size: 18px; }
  .ddz-acts { min-height: 56px; padding: 4px 10px; }
  .ddz-acts .ddz-btn { min-height: 48px; font-size: 17px; }
  .ddz-mebar { padding-top: 5px; padding-bottom: calc(5px + var(--safe-bottom)); }
  .ddz-me-count { display: none; }
}
@media (max-width: 360px) {
  .ddz-table .ddz-top { padding: 4px 6px; gap: 4px; }
  .ddz-sub-mode, .ddz-net-text { display: none; }
  .ddz-opp { width: calc(50% - 54px); }
  .ddz-opp-id { gap: 5px; }
  .ddz-midinfo { width: 100px; }
  .ddz-bottom { gap: 2px; }
  .ddz-bottom .card.small { width: 30px; height: 42px; }
  .ddz-bottom .card.small .c-rank { font-size: 13px; }
  .ddz-bottom .card.small .c-suit { top: 15px; font-size: 10px; }
  .ddz-bottom .card.small .c-center { font-size: 13px; }
  .ddz-bottom .ddz-back.solo { width: 30px; height: 42px; }
  .ddz-mult small { font-size: 10px; }
  .ddz-mult b { font-size: 13px; }
  .ddz-name { font-size: 13px; }
  .ddz-count { font-size: 12px; }
  .ddz-role.small { padding: 0 6px; }
  .ddz-acts { gap: 8px; padding: 6px 8px; }
  .ddz-acts .ddz-btn { font-size: 16px; letter-spacing: 0; }
}

/* ---- styles/ddz/result.css ---- */
/* DDZ-19 结算处理中、DDZ-20 正常结算与春天、DDZ-21 作废与释放冻结：底部弹层，不遮挡顶部倍数 */
.ddz-overlay-host:empty { display: none; }
.ddz-sheet-back { position: absolute; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center; background: rgba(5, 10, 22, .55); padding: 12px 10px calc(10px + var(--safe-bottom)); }
.ddz-sheet { width: min(100%, 440px); max-height: calc(100% - 60px); overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 16px 14px 14px; border-radius: 20px;
  background: linear-gradient(170deg, rgba(31, 46, 78, .98), rgba(10, 17, 34, .98)); border: 2px solid var(--ddz-gold); box-shadow: 0 -6px 30px rgba(0, 0, 0, .55), 0 0 30px rgba(214, 165, 71, .2); }
.ddz-sheet.lose { border-color: rgba(148, 163, 184, .6); }
.ddz-sheet.neutral, .ddz-sheet.pending { border-color: #60A5FA; }
.ddz-sheet-head { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ddz-sheet-head h2 { margin: 0; font-size: 26px; font-weight: 900; letter-spacing: 2px; color: var(--ddz-gold-hi); }
.ddz-sheet.lose .ddz-sheet-head h2 { color: #E2E8F0; }
.ddz-sheet.neutral .ddz-sheet-head h2 { color: #BFDBFE; }
.ddz-sheet-head p { margin: 0; font-size: 15px; color: var(--ddz-text-2); }
.ddz-res-me b { font-size: 24px; font-variant-numeric: tabular-nums; }
.ddz-spring { position: absolute; right: 0; top: 0; padding: 3px 10px; border-radius: 10px; font-size: 14px; font-weight: 900; color: var(--ddz-gold-ink); background: linear-gradient(180deg, #FFE4E6, #FDA4AF); box-shadow: 0 0 12px rgba(253, 164, 175, .6); }
.ddz-lock-open { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #BFDBFE; background: rgba(37, 99, 235, .2); border: 1px solid rgba(147, 197, 253, .5); }
.ddz-res-rows { display: flex; flex-direction: column; gap: 6px; }
.ddz-res-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 10px; padding: 8px 10px; border-radius: 12px; background: rgba(10, 18, 36, .6); border: 1px solid rgba(148, 163, 184, .2); }
.ddz-res-row.me { border-color: var(--ddz-gold-edge); background: rgba(214, 165, 71, .08); }
.ddz-res-who { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.ddz-res-who b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ddz-res-num { display: flex; flex-direction: column; align-items: flex-end; }
.ddz-res-num b { font-size: 18px; font-variant-numeric: tabular-nums; }
.ddz-res-num small { font-size: 12px; color: var(--ddz-muted); }
.ddz-res-left { grid-column: 1 / -1; }
.ddz-res-left .card-row.small .card + .card { margin-left: -24px; }
.ddz-screen b.pos { color: var(--ddz-pos); }
.ddz-screen b.neg { color: var(--ddz-neg); }
.ddz-formula { border-radius: 12px; padding: 8px 12px; background: rgba(10, 18, 36, .55); border: 1px solid rgba(214, 165, 71, .3); }
.ddz-formula summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; font-size: 14px; font-weight: 700; color: var(--ddz-gold-hi); }
.ddz-formula p { margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: var(--ddz-text-2); }
.ddz-pending { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.ddz-pending p { margin: 0; font-size: 15px; color: #BFDBFE; }
.ddz-pending .ddz-row { width: 100%; }
.ddz-next { display: flex; flex-direction: column; gap: 8px; }
.ddz-next > .ddz-fine { text-align: center; }

/* ---- styles/ddz/records.css ---- */
/* DDZ-22 战绩列表、DDZ-23 详情与逐手回放、DDZ-24 发牌承诺与验证 */
.ddz-list { display: flex; flex-direction: column; gap: 8px; }
.ddz-rec { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; width: 100%; min-height: 64px; padding: 10px 12px; border-radius: 14px; text-align: left; cursor: pointer; font: inherit; color: var(--ddz-white);
  background: var(--ddz-glass); border: 1px solid rgba(214, 165, 71, .3); animation: ddz-fade .25s ease-out both; }
.ddz-rec:active { background: rgba(44, 74, 120, .6); }
.ddz-rec.pending { border-color: #60A5FA; }
.ddz-rec-badge { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 900; color: var(--ddz-text-2); background: rgba(148, 163, 184, .18); border: 1px solid rgba(148, 163, 184, .4); }
.ddz-rec-badge.win { color: var(--ddz-gold-ink); background: linear-gradient(180deg, var(--ddz-gold-hi), var(--ddz-gold)); border-color: transparent; }
.ddz-rec-badge.lose { color: #E2E8F0; background: rgba(71, 85, 105, .7); }
.ddz-rec-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ddz-rec-main b { font-size: 15px; white-space: nowrap; }
.ddz-rec-main small { font-size: 12px; color: var(--ddz-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ddz-rec-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ddz-rec-side b { font-size: 18px; font-variant-numeric: tabular-nums; }
.ddz-status { font-size: 12px; color: var(--ddz-muted); }
.ddz-status.pending { color: #93C5FD; }
.ddz-status.aborted { color: #CBD5E1; }
.ddz-records .ddz-tabs { margin-top: 2px; }
.ddz-detail { display: flex; flex-direction: column; gap: 12px; }
.ddz-detail .ddz-kv { margin-bottom: 10px; }
.ddz-replay { display: flex; flex-direction: column; gap: 10px; }
.ddz-rim.ddz-rp-table { width: 100%; border-radius: 28px; }
.ddz-rp-table .ddz-felt { border-radius: 22px; height: auto; min-height: 260px; }
.ddz-rp-board { position: relative; }
.ddz-rp-board.step { animation: ddz-fade .15s ease-out 1; }
.ddz-rp-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "mid mid" "left right" "me me"; gap: 10px 8px; padding: 12px 10px; }
.ddz-rp-grid.full { grid-template-areas: "mid mid" "left left" "right right" "me me"; }
.ddz-rp-mid { grid-area: mid; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; }
.ddz-rp-seat { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 6px 8px; border-radius: 12px; background: rgba(5, 30, 18, .35); }
.ddz-rp-seat.left { grid-area: left; align-items: flex-start; }
.ddz-rp-seat.right { grid-area: right; align-items: flex-end; text-align: right; }
.ddz-rp-grid.full .ddz-rp-seat.right { align-items: flex-start; text-align: left; }
.ddz-rp-seat.me { grid-area: me; align-items: center; }
.ddz-rp-seat b { font-size: 14px; }
.ddz-rp-seat small { font-size: 12px; color: var(--ddz-text-2); }
.ddz-rp-seat.acting { box-shadow: inset 0 0 0 1px var(--ddz-gold-hi); }
.ddz-rp-seat.acting b { color: var(--ddz-gold-hi); }
.ddz-rp-act { min-height: 50px; display: flex; align-items: center; }
.ddz-rp-hand { max-width: 100%; overflow: hidden; }
.ddz-rp-hand .card-row.small .card + .card { margin-left: -24px; }
.ddz-rp-seat .ddz-fan .ddz-back { width: 18px; height: 26px; }
.ddz-rp-seat .ddz-fan .ddz-back + .ddz-back { margin-left: -12px; }
.ddz-rp-seat .ddz-fan.right .ddz-back + .ddz-back { margin-left: 0; margin-right: -12px; }
.ddz-rp-cap { margin: 0; min-height: 22px; text-align: center; font-size: 15px; font-weight: 700; color: var(--ddz-gold-hi); }
.ddz-rp-line { display: flex; align-items: center; gap: 10px; }
.ddz-rp-line input { flex: 1; accent-color: var(--ddz-gold); min-height: 32px; }
.ddz-rp-pos { font-size: 12px; color: var(--ddz-text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ddz-rp-ctrl { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.ddz-flip { display: inline-flex; transform: scaleX(-1); }
.ddz-pause { width: 14px; height: 16px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.ddz-verify-deal { padding: 8px 0; border-top: 1px solid rgba(148, 163, 184, .2); }
.ddz-verify-deal b { font-size: 14px; }
.ddz-verify-deal ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ddz-verify-deal li { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; color: var(--ddz-text-2); flex-wrap: wrap; }
.ddz-verify-deal li small { flex-basis: 100%; padding-left: 26px; color: #FCA5A5; }
.ddz-vmark { width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.ddz-verify-deal li.ok .ddz-vmark { color: var(--ddz-pos); background: rgba(74, 222, 128, .15); }
.ddz-verify-deal li.bad .ddz-vmark { color: var(--ddz-neg); background: rgba(248, 113, 113, .15); }
.ddz-verify h3 { margin: 0 0 6px; font-size: 16px; }
.ddz-verify.ok h3 { color: var(--ddz-pos); }
.ddz-verify.bad { border-color: rgba(248, 113, 113, .6); }
.ddz-verify.bad h3 { color: #FCA5A5; }
.ddz-proof .ddz-panel > .ddz-btn.big { margin-top: 12px; }

/* ---- styles/ddz/effects.css ---- */
/* 斗地主动效：只在服务器事件后触发；“减少动态效果”时只保留文字、轮廓与一次淡入 */
@keyframes ddz-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ddz-sheen { to { transform: translateX(120%); } }
@keyframes ddz-seek { 0%, 100% { box-shadow: 0 0 0 2px rgba(10, 18, 36, .9), 0 0 8px rgba(214, 165, 71, .2); } 50% { box-shadow: 0 0 0 2px rgba(10, 18, 36, .9), 0 0 22px rgba(240, 203, 122, .65); } }
@keyframes ddz-ring-open { from { box-shadow: inset 0 0 0 0 rgba(246, 216, 138, .9); } to { box-shadow: inset 0 0 0 40px rgba(246, 216, 138, 0); } }
@keyframes ddz-spin { to { transform: rotate(360deg); } }
@keyframes ddz-pop { 0% { transform: translateY(14px) scale(.92); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes ddz-flipin { 0% { transform: rotateY(90deg); } 100% { transform: rotateY(0); } }
@keyframes ddz-burst { 0% { transform: translate(-50%, -50%) scale(.3); opacity: .95; } 100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; } }
@keyframes ddz-stamp { 0% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; } 25% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ddz-win { 0% { transform: scaleX(.2); opacity: 0; } 100% { transform: scaleX(1); opacity: 1; } }
@keyframes ddz-dim { from { opacity: 0; filter: saturate(.3); } to { opacity: 1; filter: saturate(.75); } }
@keyframes ddz-fly-l { 0% { transform: translate(0, 0) scale(.8); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(-38vw, -24vh) scale(.6); opacity: 0; } }
@keyframes ddz-fly-r { 0% { transform: translate(0, 0) scale(.8); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(38vw, -24vh) scale(.6); opacity: 0; } }
@keyframes ddz-fly-m { 0% { transform: translate(0, 0) scale(.8); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(0, 30vh) scale(1); opacity: 0; } }
@keyframes ddz-bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); color: #fff; } 100% { transform: scale(1); } }
@keyframes ddz-demo { 0% { transform: none; } 30% { transform: translateY(-14px); } 60% { transform: translateY(-14px); opacity: 1; } 80% { transform: translateY(-40px) scale(.9); opacity: 0; } 100% { transform: none; opacity: 1; } }

.ddz-screen .card-row.fresh { animation: ddz-pop .18s ease-out 1; }
.ddz-bottom.flip .card { animation: ddz-flipin .35s ease-out both; }
.ddz-bottom.flip .card:nth-child(2) { animation-delay: .3s; }
.ddz-bottom.flip .card:nth-child(3) { animation-delay: .6s; }
.ddz-mult b.bump { animation: ddz-bump .5s ease-out 1; }
.ddz-deck.spin { animation: ddz-spin 1.2s linear infinite; }
.ddz-ex.demo .card-row { animation: ddz-demo .9s ease-in-out 1; }
.ddz-ex.demo-still { outline: 2px solid var(--ddz-gold-hi); }
.ddz-fx { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ddz-deal { position: absolute; left: 50%; top: 42%; }
.ddz-back.fly { position: absolute; left: -13px; top: -19px; opacity: 0; animation-duration: .7s; animation-timing-function: ease-in; animation-fill-mode: both; }
.ddz-back.fly.to-l { animation-name: ddz-fly-l; }
.ddz-back.fly.to-r { animation-name: ddz-fly-r; }
.ddz-back.fly.to-m { animation-name: ddz-fly-m; }
.ddz-flash { position: absolute; left: 50%; top: 46%; width: 0; height: 0; }
.ddz-flash .ring { position: absolute; left: 0; top: 0; width: 120px; height: 120px; border-radius: 50%; border: 6px solid var(--ddz-gold-hi); box-shadow: 0 0 30px rgba(246, 216, 138, .9), inset 0 0 20px rgba(246, 216, 138, .6); animation: ddz-burst .8s ease-out 1 both; }
.ddz-flash b { position: absolute; left: 0; top: 0; white-space: nowrap; font-size: 44px; font-weight: 900; letter-spacing: 4px; color: transparent; background: linear-gradient(180deg, #FFF7DD, var(--ddz-gold-hi) 45%, var(--ddz-gold-lo)); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .7)); animation: ddz-stamp .8s ease-out 1 both; }
.ddz-flash.rocket .ring { border-color: #FCA5A5; box-shadow: 0 0 30px rgba(248, 113, 113, .8), inset 0 0 20px rgba(246, 216, 138, .6); }
.ddz-sheet.anim-win .ddz-sheet-head::before { content: ''; position: absolute; left: -14px; right: -14px; top: 6px; height: 34px; z-index: -1; background: linear-gradient(90deg, transparent, rgba(214, 165, 71, .45), transparent); transform-origin: center; animation: ddz-win .6s ease-out 1 both; }
.ddz-sheet.anim-lose { animation: ddz-dim .5s ease-out 1 both; }
.ddz-sheet-back { animation: ddz-fade .2s ease-out 1 both; }

/* 减少动态效果（设置开关或系统偏好）：不播放飞牌、冲击、翻牌、轮转光，只保留一次淡入 */
html.reduce-motion .ddz-screen *, .ddz-table.reduce * { animation: none !important; transition: none !important; }
html.reduce-motion .ddz-sheet, .ddz-table.reduce .ddz-sheet, html.reduce-motion .ddz-rec { animation: ddz-fade .2s ease-out 1 both !important; }
html.reduce-motion .ddz-fx, .ddz-table.reduce .ddz-fx { display: none; }
@media (prefers-reduced-motion: reduce) {
  .ddz-screen *, .ddz-screen *::before, .ddz-screen *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
  .ddz-fx { display: none; }
}

/* ---- styles/game/tokens.css ---- */
/* 游戏公共色板：深海蓝 #0F172A、墨绿绒布 #14532D、暖金 #D6A547、柔白 #F8FAFC */
.g-screen {
  --g-navy: #0F172A; --g-navy-2: #0B1328; --g-navy-3: #16233F;
  --g-felt: #14532D; --g-felt-hi: #1F7A46; --g-felt-lo: #0C3A21;
  --g-gold: #D6A547; --g-gold-hi: #F6D88A; --g-gold-lo: #9C6F22; --g-gold-ink: #2A1B05;
  --g-white: #F8FAFC; --g-text-2: #CBD5E1; --g-muted: #94A3B8;
  --g-enamel: #1B3354; --g-enamel-hi: #2C4A78; --g-farmer: #2563EB;
  --g-pos: #4ADE80; --g-neg: #F87171; --g-warn: #FBBF24;
  --g-radius: 14px; --g-btn-h: 52px;
  --g-glass: linear-gradient(160deg, rgba(31, 46, 78, .92), rgba(13, 22, 42, .92));
  --g-gold-edge: rgba(214, 165, 71, .55);
}

/* ---- styles/game/scene.css ---- */
.g-screen { position: relative; isolation: isolate; display: flex; flex-direction: column; height: var(--vh); min-height: 0; overflow: hidden;
  padding: var(--safe-top) var(--safe-right) 0 var(--safe-left); color: var(--g-white); background: var(--g-navy); }
.g-hall { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 22% 14% at 6% 16%, rgba(255, 186, 92, .22), transparent 70%),
    radial-gradient(ellipse 22% 14% at 94% 14%, rgba(255, 186, 92, .2), transparent 70%),
    radial-gradient(ellipse 70% 26% at 50% -2%, rgba(214, 165, 71, .2), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(255, 255, 255, .025) 46px 48px, transparent 48px 96px),
    linear-gradient(180deg, #0C1834 0%, #0F172A 40%, #0A1124 75%, #070D1C 100%); }
.g-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 12px; padding: 4px 16px 16px; }
.g-body > * { flex-shrink: 0; }
.g-body.center { justify-content: flex-start; }
.g-loading { margin: auto; color: var(--g-text-2); }
.g-fine { margin: 0; font-size: 12px; line-height: 1.55; color: var(--g-muted); }
.g-fine.center { text-align: center; }
.g-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; -webkit-user-select: text; user-select: text; }
.g-mono.wrap { overflow-wrap: anywhere; font-size: 12px; }
.g-row { display: flex; align-items: center; gap: 10px; }
.g-row.tight { gap: 6px; flex-wrap: wrap; }
.g-row.wrap { flex-wrap: wrap; }
.g-row.two > * { flex: 1 1 0; min-width: 0; }
.g-row.links { justify-content: center; gap: 4px 14px; flex-wrap: wrap; }
.g-link { background: none; border: 0; padding: 8px 4px; min-height: 44px; color: var(--g-gold-hi); font: inherit; font-size: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.g-sub { font-size: 12px; color: var(--g-muted); }
.g-warn { margin: 0; color: var(--g-warn); font-size: 14px; }
.g-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 10px; font-size: 12px; color: var(--g-text-2); border: 1px solid rgba(148, 163, 184, .45); white-space: nowrap; }
.g-tag.gold { color: var(--g-gold-hi); border-color: var(--g-gold-edge); background: rgba(214, 165, 71, .1); }
.g-pill { margin: 0; display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-size: 13px; color: var(--g-gold-hi); background: rgba(10, 18, 36, .72); border: 1px solid var(--g-gold-edge); }

/* 顶栏 */
.g-top { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; min-height: 56px; padding: 6px 10px; }
.g-top-title { flex: 1; min-width: 0; text-align: center; }
.g-top-title h1 { margin: 0; font-size: 19px; font-weight: 900; letter-spacing: 1px; color: transparent; background: linear-gradient(180deg, #FFF4D2, var(--g-gold-hi) 45%, var(--g-gold)); -webkit-background-clip: text; background-clip: text; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-top-title p { margin: 1px 0 0; font-size: 12px; color: var(--g-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; justify-content: center; align-items: center; gap: 8px; }
.g-top-right { display: flex; gap: 4px; flex: 0 0 auto; }
.g-icon-btn { width: 44px; height: 44px; flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0; border-radius: 12px; cursor: pointer;
  color: var(--g-white); background: linear-gradient(180deg, rgba(44, 74, 120, .75), rgba(20, 34, 62, .85)); border: 1px solid rgba(214, 165, 71, .4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.g-icon-btn.with-text { width: 52px; height: 48px; font-size: 11px; }
.g-icon-btn.gold { color: var(--g-gold-ink); background: linear-gradient(180deg, var(--g-gold-hi), var(--g-gold) 60%, var(--g-gold-lo)); }
.g-icon-btn:active { transform: translateY(1px); }
.g-icon-spacer { width: 44px; flex: 0 0 auto; }
.g-net { display: inline-flex; align-items: center; gap: 4px; color: #86EFAC; }
.g-net i { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 6px #22C55E; }
.g-net:not(.online) { color: #FCD34D; }
.g-net:not(.online) i { background: #F59E0B; box-shadow: 0 0 6px #F59E0B; }

/* 按钮：暖金主按钮、深蓝珐琅次按钮 */
.g-btn { min-height: var(--g-btn-h); min-width: 44px; padding: 0 16px; border-radius: var(--g-radius); font-size: 18px; font-weight: 800; letter-spacing: 1px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; position: relative; overflow: hidden; transition: transform .08s ease, filter .15s ease; white-space: nowrap; }
.g-btn.gold { color: var(--g-gold-ink); background: linear-gradient(180deg, #FFF0C2 0%, var(--g-gold-hi) 22%, var(--g-gold) 62%, var(--g-gold-lo) 100%); border: 1px solid rgba(255, 232, 170, .8); box-shadow: 0 6px 16px rgba(214, 165, 71, .28), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(120, 80, 20, .35); }
.g-btn.blue { color: var(--g-white); background: linear-gradient(180deg, var(--g-enamel-hi), var(--g-enamel)); border: 1px solid rgba(148, 163, 184, .4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 4px 10px rgba(0, 0, 0, .3); }
.g-btn.ghost { color: var(--g-text-2); background: rgba(15, 23, 42, .5); border: 1px solid rgba(148, 163, 184, .35); font-size: 16px; }
.g-btn.big { min-height: 56px; width: 100%; font-size: 20px; letter-spacing: 3px; }
.g-btn:active:not(:disabled) { transform: translateY(1px) scale(.99); }
.g-btn:disabled { cursor: default; filter: grayscale(.65) brightness(.75); opacity: .72; }
.g-btn.busy { filter: none; opacity: .85; }
.g-btn.gold.sheen::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); transform: translateX(-120%); animation: g-sheen 1.1s ease-out .3s 1 both; pointer-events: none; }

/* 面板 */
.g-panel { background: var(--g-glass); border: 1px solid var(--g-gold-edge); border-radius: 16px; padding: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 22px rgba(0, 0, 0, .35); }
.g-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.g-sec-head h2, .g-sec-head h3 { margin: 0; font-size: 17px; color: var(--g-gold-hi); font-weight: 800; }
.g-sec-head small { color: var(--g-muted); font-size: 12px; }
.g-notice { padding: 10px 14px; border-radius: 14px; background: rgba(15, 26, 50, .78); border: 1px solid rgba(148, 163, 184, .3); display: flex; flex-direction: column; gap: 8px; }
.g-notice p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--g-text-2); }
.g-notice.warn { border-color: rgba(251, 191, 36, .55); background: rgba(68, 44, 8, .55); }
.g-notice.warn p { color: #FDE68A; }
.g-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.g-kv dt { color: var(--g-muted); }
.g-kv dd { margin: 0; min-width: 0; }
.g-chip { display: flex; align-items: center; gap: 8px; min-width: 0; }
.g-chip-ico { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--g-gold-hi); background: radial-gradient(circle at 35% 30%, rgba(214, 165, 71, .35), rgba(214, 165, 71, .08)); border: 1px solid var(--g-gold-edge); }
.g-chip small { display: block; font-size: 12px; color: var(--g-text-2); white-space: nowrap; }
.g-chip > div { min-width: 0; }
.g-chip b { display: block; font-size: 16px; color: var(--g-gold-hi); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; line-height: 1.3; }
.g-tabs { flex: 0 0 auto; display: flex; gap: 6px; margin: 0 16px 8px; padding: 4px; border-radius: 14px; background: rgba(10, 18, 36, .75); border: 1px solid var(--g-gold-edge); }
.g-tab { flex: 1; min-height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--g-text-2); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.g-tab.on { color: var(--g-gold-ink); background: linear-gradient(180deg, var(--g-gold-hi), var(--g-gold)); box-shadow: 0 2px 8px rgba(214, 165, 71, .3); }
.g-seg { display: inline-flex; padding: 3px; gap: 3px; border-radius: 12px; background: rgba(10, 18, 36, .75); border: 1px solid rgba(148, 163, 184, .3); }
.g-seg button { min-width: 44px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--g-text-2); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.g-seg button.on { background: linear-gradient(180deg, var(--g-gold-hi), var(--g-gold)); color: var(--g-gold-ink); }
.g-foot { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; align-items: stretch; padding: 10px 16px calc(12px + var(--safe-bottom)); background: linear-gradient(180deg, transparent, rgba(7, 13, 28, .92) 35%); }
.g-foot > small { text-align: center; font-size: 12px; color: var(--g-muted); display: flex; align-items: center; justify-content: center; gap: 4px; }

/* 绿桌金边 */
.g-rim { position: relative; border-radius: 50%; padding: 7px; background: linear-gradient(160deg, #FFE7A8 0%, #C9993E 22%, #7A5414 48%, #E8C46C 70%, #8C6420 100%);
  box-shadow: 0 0 0 1px rgba(255, 240, 200, .35), 0 14px 34px rgba(0, 0, 0, .55), 0 0 40px rgba(214, 165, 71, .18); }
.g-felt { position: relative; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(ellipse 70% 60% at 50% 42%, var(--g-felt-hi) 0%, var(--g-felt) 55%, var(--g-felt-lo) 100%);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35), inset 0 10px 30px rgba(0, 0, 0, .45), inset 0 -8px 24px rgba(0, 0, 0, .4); }
.g-felt-mark { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); width: 34%; aspect-ratio: 1; opacity: .09; pointer-events: none;
  background: radial-gradient(circle at 30% 42%, #E6F4EA 0 24%, transparent 25%), radial-gradient(circle at 70% 42%, #E6F4EA 0 24%, transparent 25%), conic-gradient(from 135deg at 50% 18%, #E6F4EA 0 90deg, transparent 0); clip-path: polygon(50% 0, 100% 52%, 72% 78%, 58% 72%, 66% 100%, 34% 100%, 42% 72%, 28% 78%, 0 52%); }


/* 牌背 */
.g-back { display: inline-block; width: 26px; height: 38px; border-radius: 4px; flex: 0 0 auto;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .28) 0 3px, transparent 4px), repeating-linear-gradient(45deg, #2747A8 0 4px, #1E3A8A 4px 8px);
  border: 2px solid #F1F5F9; box-shadow: 0 2px 4px rgba(0, 0, 0, .45); }
.g-back.solo { width: 36px; height: 50px; border-radius: 6px; }


.g-practice-flag { align-self: center; padding: 4px 14px; border-radius: 999px; font-size: 13px; font-weight: 800; color: #E0F2FE; background: linear-gradient(180deg, #2563EB, #1E40AF); border: 1px solid rgba(147, 197, 253, .6); box-shadow: 0 0 12px rgba(37, 99, 235, .45); }

/* 底部导航（游戏内） */
.g-dock { flex: 0 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 6px 8px calc(6px + var(--safe-bottom)); background: linear-gradient(180deg, rgba(12, 22, 44, .95), #070D1C); border-top: 1px solid var(--g-gold-edge); }
.g-dock-item { min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 12px; border: 1px solid rgba(214, 165, 71, .25); background: linear-gradient(180deg, rgba(31, 46, 78, .9), rgba(13, 22, 42, .9)); color: var(--g-text-2); font: inherit; font-size: 12px; cursor: pointer; position: relative; }
.g-dock-item svg { color: var(--g-gold-hi); }
.g-dock-item.on { color: var(--g-gold-ink); background: linear-gradient(180deg, var(--g-gold-hi), var(--g-gold)); }
.g-dock-item.on svg { color: var(--g-gold-ink); }
.g-dock-badge { position: absolute; top: 3px; right: 4px; min-width: 18px; height: 16px; padding: 0 5px; border-radius: 8px; font-size: 10px; font-style: normal; font-weight: 800; line-height: 16px; text-align: center; color: var(--g-gold-ink); background: var(--g-gold-hi); }
/* 底部弹层 */
.g-sheet-back { position: absolute; inset: 0; z-index: 30; display: flex; align-items: flex-end; justify-content: center; padding: 12px 10px calc(10px + var(--safe-bottom)); background: rgba(5, 10, 22, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: g-fade .2s ease-out 1 both; }
.g-sheet-back.center { align-items: center; }
.g-sheet { width: min(100%, 440px); max-height: calc(100% - 40px); overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 16px 14px 14px; border-radius: 20px;
  background: linear-gradient(170deg, rgba(31, 46, 78, .98), rgba(10, 17, 34, .98)); border: 2px solid var(--g-gold); box-shadow: 0 -6px 30px rgba(0, 0, 0, .55), 0 0 30px rgba(214, 165, 71, .2); }
.g-sheet.neutral { border-color: #60A5FA; }
.g-sheet.lose { border-color: rgba(148, 163, 184, .6); }
.g-sheet-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; }
.g-sheet-head h2 { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: 1px; color: var(--g-gold-hi); }
.g-sheet-head p { margin: 0; font-size: 14px; color: var(--g-text-2); }
.g-sheet.neutral .g-sheet-head h2 { color: #BFDBFE; }
.g-pos { color: var(--g-pos); }
.g-neg { color: var(--g-neg); }
.g-spin { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(214, 165, 71, .25); border-top-color: var(--g-gold); animation: g-spin .9s linear infinite; flex: 0 0 auto; }
.g-plaque { padding: 8px 20px; border-radius: 14px; text-align: center; background: linear-gradient(180deg, rgba(31, 46, 78, .95), rgba(13, 22, 42, .95)); border: 2px solid var(--g-gold); box-shadow: 0 6px 18px rgba(0, 0, 0, .45), 0 0 18px rgba(214, 165, 71, .2); clip-path: polygon(6% 0, 94% 0, 100% 50%, 94% 100%, 6% 100%, 0 50%); }
.g-plaque h2 { margin: 0; font-size: 20px; font-weight: 900; letter-spacing: 2px; color: var(--g-gold-hi); white-space: nowrap; }
.g-plaque p { margin: 2px 0 0; font-size: 13px; color: var(--g-text-2); white-space: nowrap; }
.g-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.g-table th { font-weight: 600; color: var(--g-text-2); padding: 7px 4px; border-bottom: 1px solid rgba(214, 165, 71, .3); text-align: center; white-space: nowrap; }
.g-table td { padding: 7px 4px; text-align: center; border-bottom: 1px solid rgba(148, 163, 184, .15); font-variant-numeric: tabular-nums; }
.g-table tr:last-child td { border-bottom: 0; }

@keyframes g-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes g-sheen { to { transform: translateX(120%); } }
@keyframes g-spin { to { transform: rotate(360deg); } }
html.reduce-motion .g-screen *, html.reduce-motion .g-sheet-back { animation: none !important; transition: none !important; }
html.reduce-motion .g-sheet { animation: g-fade .2s ease-out 1 both !important; }
@media (prefers-reduced-motion: reduce) { .g-screen *, .g-sheet-back { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; } }

/* ---- styles/bac/index.css ---- */
/* 百家乐（界面 UI 第三阶段 BAC-01—BAC-23）样式模块。全部选择器带 .bac- 前缀，只作用于百家乐页面；
   通用的深蓝厅堂、顶栏、按钮、面板、弹层来自 styles/game/（.g-*），与斗地主同一套视觉。
   tokens   区域色（闲蓝、庄红、和绿、对子）与牌面尺寸
   cards    牌面、空槽、“无需补牌”、发牌翻转
   lobby    BAC-01 大厅、BAC-02 赔率确认、完整规则
   table    BAC-03 牌桌骨架、状态牌匾、发牌区、补牌过程、路单条
   areas    BAC-03/04 五区：已接注实线、草稿虚线、结果标记
   controls BAC-04—BAC-09 金额面板、筹码、操作、提交与回执未知
   sheets   BAC-05/06/07/15/16/17/23 确认卡、注单、预览、结果、作废、练习、更多
   records  BAC-18—BAC-22 路单详情、牌靴、证明、战绩、注单详情与回放
   effects  动效与“减少动态效果” */
/* ---- styles/bac/tokens.css ---- */
/* 区域色：颜色之外始终有文字（庄/闲/和/对子），不靠颜色单独表达 */
.g-screen.bac-table, .g-screen.bac-lobby, .g-screen.bac-ack, .g-screen.bac-rules, .g-screen.bac-sub {
  --bac-player: #2563EB; --bac-player-hi: #60A5FA; --bac-player-lo: #1E3A8A;
  --bac-banker: #DC2626; --bac-banker-hi: #F87171; --bac-banker-lo: #7F1D1D;
  --bac-tie: #16A34A; --bac-tie-hi: #4ADE80; --bac-tie-lo: #14532D;
  --bac-card-w: clamp(38px, 11.2vw, 50px);
}

/* ---- styles/bac/cards.css ---- */
/* 牌面：象牙白、衬线点数、左上点数花色 + 右下大花色；空槽为虚线框 */
.bac-card { position: relative; flex: 0 0 auto; width: var(--bac-card-w); aspect-ratio: 5 / 7; border-radius: 6px; color: #111827;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBF8F1 100%); border: 1px solid #D6CFC0; box-shadow: -2px 2px 5px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .7); }
.bac-card.red { color: #D21F2D; }
.bac-card .r { position: absolute; top: 2px; left: 4px; font-family: Georgia, "Times New Roman", "Noto Serif SC", serif; font-weight: 700; font-size: calc(var(--bac-card-w) * .4); line-height: 1; letter-spacing: -1px; }
.bac-card .s { position: absolute; top: calc(var(--bac-card-w) * .44); left: 5px; font-size: calc(var(--bac-card-w) * .26); line-height: 1; }
.bac-card .c { position: absolute; right: 4px; bottom: 2px; font-size: calc(var(--bac-card-w) * .5); line-height: 1; }
.bac-card.md { --bac-card-w: clamp(32px, 9vw, 40px); }
.bac-card.sm { --bac-card-w: 26px; display: inline-block; vertical-align: middle; border-radius: 4px; }
.bac-card.sm .s { display: none; }
.bac-card.slot, .bac-card.none, .bac-card.back { box-shadow: none; }
.bac-card.slot { background: rgba(5, 30, 18, .35); border: 1.5px dashed rgba(246, 216, 138, .45); }
.bac-card.none { background: rgba(5, 30, 18, .25); border: 1.5px dashed rgba(203, 213, 225, .3); display: flex; align-items: center; justify-content: center; }
.bac-card.none span { font-size: 10px; line-height: 1.25; color: var(--g-text-2); text-align: center; writing-mode: vertical-rl; letter-spacing: 1px; }
.bac-card.back { background: radial-gradient(circle, rgba(255, 255, 255, .3) 0 3px, transparent 4px), repeating-linear-gradient(45deg, #2747A8 0 4px, #1E3A8A 4px 8px); border: 2px solid #F1F5F9; }

/* ---- styles/bac/lobby.css ---- */
/* BAC-01 大厅 */
.bac-lobby-body { gap: 12px; }
.g-rim.bac-lobby-table, .g-rim.bac-ack-table { border-radius: 28px; padding: 6px; }
.bac-lobby-table .g-felt, .bac-ack-table .g-felt { border-radius: 23px; padding: 12px 10px 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bac-felt-title { position: relative; font-size: 13px; font-weight: 700; color: var(--g-gold-hi); letter-spacing: 1px; }
.bac-felt-note { position: relative; margin: 0; font-size: 12px; line-height: 1.55; color: #D1FAE5; text-align: center; }
.bac-oddsboard { position: relative; width: 100%; display: flex; flex-direction: column; gap: 6px; }
.bac-oz-row { display: grid; gap: 6px; }
.bac-oz-row.main { grid-template-columns: 1fr .8fr 1fr; }
.bac-oz-row.pairs { grid-template-columns: 1fr 1fr; }
.bac-oz { min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 12px; border: 1.5px solid rgba(246, 216, 138, .55); background: rgba(6, 40, 22, .45); position: relative; overflow: hidden; }
.bac-oddsboard.compact .bac-oz { min-height: 48px; }
.bac-oz b { font-size: 20px; font-weight: 900; letter-spacing: 2px; }
.bac-oz span { font-size: 12px; color: #E2E8F0; }
.bac-oz em { font-style: normal; font-size: 17px; font-weight: 900; color: var(--g-gold-hi); font-variant-numeric: tabular-nums; }
.bac-oz.player b, .bac-oz.ppair b { color: #BFDBFE; }
.bac-oz.banker b, .bac-oz.bpair b { color: #FECACA; }
.bac-oz.tie b { color: #BBF7D0; }
.bac-oz.player { background: linear-gradient(180deg, rgba(37, 99, 235, .35), rgba(30, 58, 138, .35)); }
.bac-oz.banker { background: linear-gradient(180deg, rgba(220, 38, 38, .32), rgba(127, 29, 29, .35)); }
.bac-oz.tie { background: linear-gradient(180deg, rgba(22, 163, 74, .3), rgba(20, 83, 45, .4)); }
.bac-oz.ppair, .bac-oz.bpair { min-height: 44px; flex-direction: row; gap: 10px; }
.bac-oz.ppair b, .bac-oz.bpair b { font-size: 16px; }
.bac-oz .bac-stack { position: absolute; right: 6px; bottom: 6px; transform: scale(.8); transform-origin: right bottom; }
.bac-unit { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; }
.bac-unit b { display: block; font-size: 16px; color: var(--g-gold-hi); }
.bac-unit small { font-size: 12px; color: var(--g-muted); }
.bac-unit-chips { display: flex; gap: 6px; }
.bac-chip { width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 900; color: #fff; flex: 0 0 auto;
  border: 2px dashed rgba(255, 255, 255, .85); box-shadow: 0 0 0 3px var(--bac-chip, #475569), 0 4px 8px rgba(0, 0, 0, .45); background: var(--bac-chip, #475569); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.bac-chip.c0 { --bac-chip: #0E7490; }
.bac-chip.c1 { --bac-chip: #B91C1C; }
.bac-chip.c2 { --bac-chip: #6D28D9; }
.bac-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bac-mode { padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bac-mode-head { display: flex; align-items: center; gap: 8px; }
.bac-mode-head h3 { margin: 0; font-size: 16px; color: var(--g-gold-hi); }
.bac-mode-head small { font-size: 12px; color: var(--g-muted); }
.bac-mode-ico { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--g-gold-hi); background: radial-gradient(circle at 35% 30%, rgba(214, 165, 71, .35), rgba(214, 165, 71, .08)); border: 1px solid var(--g-gold-edge); }
.bac-mode.practice .bac-mode-ico { color: #BFDBFE; border-color: rgba(96, 165, 250, .6); background: radial-gradient(circle at 35% 30%, rgba(37, 99, 235, .45), rgba(30, 64, 175, .1)); }
.bac-rooms { display: flex; flex-direction: column; gap: 6px; }
.bac-room { min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; text-align: left; cursor: pointer; font: inherit; color: var(--g-white); background: rgba(10, 18, 36, .6); border: 1px solid rgba(214, 165, 71, .3); }
.bac-room > div { flex: 1; min-width: 0; }
.bac-room b { display: block; font-size: 14px; }
.bac-room small { display: block; font-size: 11px; color: var(--g-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bac-room svg { color: var(--g-gold-hi); flex: 0 0 auto; }
.bac-room:disabled { opacity: .55; cursor: default; }
.bac-dot { width: 8px; height: 8px; border-radius: 50%; background: #64748B; flex: 0 0 auto; }
.bac-dot.ok { background: #22C55E; box-shadow: 0 0 6px #22C55E; }
.bac-mode-points { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--g-text-2); }
.bac-facts { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; }
.bac-facts > div { display: grid; grid-template-columns: 22px auto 1fr; gap: 8px; align-items: start; font-size: 13px; }
.bac-facts svg { color: var(--g-gold-hi); }
.bac-facts span { color: var(--g-muted); white-space: nowrap; }
.bac-facts b { font-weight: 600; color: var(--g-white); line-height: 1.5; }
.bac-lobby-actions { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 359px) { .bac-modes { grid-template-columns: 1fr; } .bac-chip { width: 40px; height: 40px; font-size: 13px; } }

/* BAC-02 赔率确认 */
.bac-ack-tags { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.bac-ack-limits, .bac-example, .bac-ack-rules { display: flex; flex-direction: column; gap: 8px; }
.bac-example h3, .bac-ack-rules h3, .bac-rules-sec h3 { margin: 0; font-size: 16px; color: var(--g-gold-hi); }
.bac-ex-flow { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.bac-ex-flow > div { flex: 1; min-width: 0; text-align: center; padding: 8px 2px; border-radius: 10px; background: rgba(10, 18, 36, .6); border: 1px solid rgba(214, 165, 71, .3); }
.bac-ex-flow b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }
.bac-ex-flow small { display: block; font-size: 11px; color: var(--g-muted); }
.bac-ex-flow > span { color: var(--g-gold-hi); font-weight: 900; }
.bac-ack-rules ul, .bac-rules-sec ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.6; color: var(--g-text-2); }
.bac-rules-sec { display: flex; flex-direction: column; gap: 8px; }
.bac-rules-sec .g-table { margin: 6px 0; }
.bac-rules-sec .g-table th, .bac-ack-limits .g-table th { white-space: normal; }

/* ---- styles/bac/table.css ---- */
/* BAC-03 牌桌骨架：顶栏 → 靴局/状态/限额 → 可滚动的绿桌（发牌区、补牌过程或路单、五区） → 控制区 → 资产行 → 底部导航 */
.bac-table .g-top { min-height: 52px; padding: 4px 8px; }
.bac-table .g-top-right { gap: 2px; }
.bac-table .g-top-right .g-icon-btn { width: 40px; height: 40px; }
.bac-table .g-icon-btn.off { opacity: .6; }
.bac-info { flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; padding: 0 10px 6px; }
.bac-info-box { min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 5px 8px; border-radius: 10px; background: rgba(10, 18, 36, .72); border: 1px solid rgba(214, 165, 71, .3); }
.bac-info-box b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.bac-info-box small { font-size: 11px; color: var(--g-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bac-info-box.end { text-align: right; }
.bac-phase { padding: 5px 18px; min-width: 128px; max-width: 48vw; }
.bac-phase p { overflow: hidden; text-overflow: ellipsis; }
.bac-phase h2 { font-size: 18px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.bac-phase p { font-size: 12px; font-variant-numeric: tabular-nums; }
.bac-phase.open h2 { color: #BBF7D0; }
.bac-phase.urgent { border-color: #F59E0B; }
.bac-phase.urgent h2, .bac-phase.urgent p { color: #FDE68A; }
.bac-phase.closed h2 { color: var(--g-gold-hi); }
.bac-phase.warn { border-color: #60A5FA; }
.bac-phase.warn h2 { color: #BFDBFE; }
.bac-phase.res.banker h2 { color: #FECACA; }
.bac-phase.res.player h2 { color: #BFDBFE; }
.bac-phase.res.tie h2 { color: #BBF7D0; }
.bac-lock { display: inline-flex; color: var(--g-gold-hi); }
@media (max-width: 359px) {
  .bac-info { gap: 4px; padding: 0 6px 6px; }
  .bac-info-box { padding: 4px 6px; }
  .bac-info-box b { font-size: 12px; }
  .bac-phase { min-width: 104px; padding: 4px 12px; }
  .bac-phase h2 { font-size: 16px; letter-spacing: 1px; }
  .bac-phase p { font-size: 11px; }
}

.bac-main { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 8px 6px; }
.bac-felt { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px 8px; border-radius: 26px;
  background: radial-gradient(ellipse 80% 60% at 50% 30%, var(--g-felt-hi) 0%, var(--g-felt) 55%, var(--g-felt-lo) 100%);
  box-shadow: 0 0 0 4px #C99A3E, 0 0 0 6px #6E4B12, 0 0 0 7px rgba(240, 203, 122, .55), 0 12px 30px rgba(0, 0, 0, .55), inset 0 10px 30px rgba(0, 0, 0, .4);
  margin: 7px 0; }
.bac-felt.mini { padding: 8px 6px; margin: 4px 0 8px; border-radius: 18px; box-shadow: 0 0 0 3px #C99A3E, 0 0 0 4px #6E4B12, inset 0 8px 20px rgba(0, 0, 0, .4); }

/* 发牌区：左闲右庄，各三槽 */
.bac-hands { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bac-hand { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 4px 8px; border-radius: 14px; border: 1.5px solid rgba(255, 255, 255, .12); background: rgba(5, 30, 18, .3); transition: box-shadow .3s ease, border-color .3s ease; }
.bac-hand.player { border-color: rgba(96, 165, 250, .45); }
.bac-hand.banker { border-color: rgba(248, 113, 113, .45); }
.bac-hand.win { border-color: var(--g-gold-hi); box-shadow: 0 0 0 1px var(--g-gold-hi), 0 0 18px rgba(246, 216, 138, .45); }
.bac-hand-head { display: flex; align-items: center; gap: 6px; min-height: 28px; }
.bac-side { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 900; color: #fff; }
.bac-hand.player .bac-side { background: linear-gradient(180deg, var(--bac-player-hi), var(--bac-player)); }
.bac-hand.banker .bac-side { background: linear-gradient(180deg, var(--bac-banker-hi), var(--bac-banker)); }
.bac-total { min-width: 30px; height: 28px; padding: 0 6px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--g-white); background: rgba(10, 18, 36, .75); border: 1px solid rgba(214, 165, 71, .4); }
.bac-total.natural { color: var(--g-gold-ink); background: linear-gradient(180deg, var(--g-gold-hi), var(--g-gold)); box-shadow: 0 0 10px rgba(246, 216, 138, .6); }
.bac-slots { display: flex; gap: 4px; justify-content: center; }

/* 中部：补牌过程 */
.bac-draw, .bac-road, .bac-state-card { border-radius: 14px; background: rgba(6, 22, 14, .55); border: 1px solid rgba(214, 165, 71, .35); padding: 8px 10px; }
.bac-draw-title { text-align: center; font-size: 13px; font-weight: 700; color: var(--g-gold-hi); margin-bottom: 4px; }
.bac-draw-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bac-draw-cols > div { min-width: 0; }
.bac-draw-cols b { display: block; font-size: 13px; margin-bottom: 2px; }
.bac-draw-cols .player b { color: #BFDBFE; }
.bac-draw-cols .banker b { color: #FECACA; }
.bac-draw-cols ol { margin: 0; padding-left: 16px; font-size: 12px; line-height: 1.55; color: #E2E8F0; }
.bac-verdict { margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(214, 165, 71, .35); display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.bac-verdict b { font-size: 16px; color: var(--g-gold-hi); }
.bac-verdict small { font-size: 12px; color: var(--g-text-2); }
.bac-verdict.banker b { color: #FECACA; }
.bac-verdict.player b { color: #BFDBFE; }
.bac-verdict.tie b { color: #BBF7D0; }
.bac-state-card { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.bac-state-card b { font-size: 15px; }
.bac-state-card small { font-size: 12px; color: var(--g-text-2); }
.bac-state-card .g-row { width: 100%; }
.bac-state-card .g-btn { min-height: 44px; font-size: 15px; }

/* 路单条 */
.bac-road-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bac-road-head > b { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--g-gold-hi); margin-right: auto; }
.bac-road-head > small { font-size: 12px; color: var(--g-text-2); }
.bac-road-head .g-seg button { min-height: 32px; font-size: 12px; padding: 0 8px; }
.bac-road-head .g-link { min-height: 32px; padding: 4px; font-size: 13px; }
.bac-road .g-fine { margin-top: 4px; font-size: 11px; }
.bac-road.closed { padding-top: 4px; padding-bottom: 4px; }
.bac-road-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 6px; border-radius: 8px; background: #F8FAFC; padding: 3px; }
.bac-road-empty { padding: 10px; text-align: center; color: #475569 !important; }
.bac-road-grid { display: grid; grid-template-rows: repeat(6, var(--cell)); grid-auto-flow: column; gap: 2px; width: max-content;
  background-image: linear-gradient(#CBD5E1 1px, transparent 1px), linear-gradient(90deg, #CBD5E1 1px, transparent 1px); background-size: calc(var(--cell) + 2px) calc(var(--cell) + 2px); background-position: -1px -1px; }
.bac-road-grid > .g-fine { grid-column: 1 / span 8; color: #475569; }
.bac-bead { position: relative; width: var(--cell); height: var(--cell); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: calc(var(--cell) * .55); font-weight: 900; color: #fff; }
.bac-bead.banker { background: var(--bac-banker); }
.bac-bead.player { background: var(--bac-player); }
.bac-bead.tie { background: var(--bac-tie); }
.bac-ring { position: relative; width: var(--cell); height: var(--cell); border-radius: 50%; border: 3px solid; background: transparent; box-sizing: border-box; }
.bac-ring.banker { border-color: var(--bac-banker); }
.bac-ring.player { border-color: var(--bac-player); }
.bac-ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: calc(var(--cell) * .45); color: #15803D; font-weight: 900; }
.bac-ring b::before { content: ''; position: absolute; left: -2px; right: -2px; top: 50%; height: 2px; background: var(--bac-tie); transform: rotate(-45deg); }
.bac-bead i, .bac-ring i { position: absolute; width: 6px; height: 6px; border-radius: 50%; border: 1px solid #fff; }
.bac-bead i.bp, .bac-ring i.bp { top: -1px; left: -1px; background: var(--bac-banker); }
.bac-bead i.pp, .bac-ring i.pp { bottom: -1px; right: -1px; background: var(--bac-player); }
.bac-road-grid.pick [data-r] { cursor: pointer; }
.bac-road-grid.pick [data-r]:focus-visible { outline: 2px solid var(--g-gold); outline-offset: 1px; }

/* ---- styles/bac/areas.css ---- */
/* 五区：上排 闲对 · 和 · 庄对，下排 闲 · 庄（大区）。已接注实线 + ✓，草稿虚线；颜色之外都有文字 */
.bac-areas { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-areas: "pp pp tie tie bp bp" "pl pl pl bk bk bk"; gap: 6px; }
.bac-area { --tone: #64748B; --tone-hi: #CBD5E1; position: relative; min-width: 0; min-height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1px; padding: 6px 4px 5px; cursor: pointer;
  border-radius: 14px; font: inherit; color: var(--g-white); border: 1.5px solid rgba(246, 216, 138, .5);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 38%, transparent), color-mix(in srgb, var(--tone) 18%, rgba(5, 30, 18, .6))); transition: transform .08s ease, box-shadow .2s ease; }
.bac-area.player { grid-area: pl; --tone: var(--bac-player); --tone-hi: #BFDBFE; min-height: 96px; }
.bac-area.banker { grid-area: bk; --tone: var(--bac-banker); --tone-hi: #FECACA; min-height: 96px; }
.bac-area.tie { grid-area: tie; --tone: var(--bac-tie); --tone-hi: #BBF7D0; }
.bac-area.ppair { grid-area: pp; --tone: var(--bac-player-lo); --tone-hi: #BFDBFE; }
.bac-area.bpair { grid-area: bp; --tone: var(--bac-banker-lo); --tone-hi: #FECACA; }
.bac-a-name { font-size: 17px; font-weight: 900; letter-spacing: 2px; color: var(--tone-hi); line-height: 1.2; }
.bac-area.player .bac-a-name, .bac-area.banker .bac-a-name { font-size: 24px; letter-spacing: 4px; }
.bac-a-odds { font-size: 11px; color: #E2E8F0; white-space: nowrap; }
.bac-a-odds em { font-style: normal; font-size: 14px; font-weight: 900; color: var(--g-gold-hi); font-variant-numeric: tabular-nums; }
.bac-area .bac-stack { position: absolute; left: 6px; bottom: 6px; opacity: 0; transition: opacity .2s ease; }
.bac-area.accepted .bac-stack, .bac-area.drafted .bac-stack { opacity: 1; }
.bac-a-foot { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 4px; font-size: 11px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.bac-a-conf { display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px; border-radius: 6px; color: var(--g-gold-ink); background: var(--g-gold-hi); font-weight: 800; }
.bac-a-draft { padding: 0 5px; border-radius: 6px; border: 1.5px dashed var(--g-gold-hi); color: var(--g-gold-hi); font-weight: 700; }
.bac-a-amt { color: var(--g-text-2); }
.bac-a-res { padding: 0 5px; border-radius: 6px; font-weight: 800; }
.bac-a-res.win { color: #052E16; background: var(--g-pos); }
.bac-a-res.lose { color: #F1F5F9; background: rgba(100, 116, 139, .8); }
.bac-a-res.push { color: #0C4A6E; background: #BAE6FD; }
.bac-a-res.none { color: var(--g-muted); }
.bac-a-net { width: 100%; text-align: center; font-weight: 800; }
.bac-area.accepted { border-style: solid; border-color: var(--g-gold-hi); box-shadow: inset 0 0 0 1px rgba(246, 216, 138, .5); }
.bac-area.drafted { border-style: dashed; border-color: var(--g-gold-hi); }
.bac-area.focus { box-shadow: 0 0 0 2px var(--g-gold-hi), 0 0 16px rgba(246, 216, 138, .5); }
.bac-area.hit { box-shadow: 0 0 0 2px var(--g-gold-hi), 0 0 20px rgba(246, 216, 138, .55); }
.bac-area.hit::after { content: '中'; position: absolute; top: 4px; right: 6px; font-size: 11px; font-weight: 900; color: var(--g-gold-ink); background: var(--g-gold-hi); border-radius: 6px; padding: 0 4px; }
.bac-area.locked { cursor: default; }
.bac-area.locked:not(.hit) { filter: saturate(.8); }
.bac-area:active:not(.locked) { transform: scale(.98); }
.bac-stack { display: inline-flex; flex-direction: column-reverse; }
.bac-stack i { display: block; width: 20px; height: 6px; margin-top: -2px; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .8); }
.bac-stack.player i, .bac-stack.ppair i { background: #1D4ED8; }
.bac-stack.banker i, .bac-stack.bpair i { background: #B91C1C; }
.bac-stack.tie i { background: #15803D; }
@media (max-width: 359px) { .bac-a-name { font-size: 15px; letter-spacing: 1px; } .bac-area.player .bac-a-name, .bac-area.banker .bac-a-name { font-size: 20px; } .bac-area { min-height: 70px; } .bac-area.player, .bac-area.banker { min-height: 84px; } }

/* ---- styles/bac/controls.css ---- */
/* BAC-04—BAC-09 控制区：金额面板 → 筹码行 → 操作按钮；提交中、回执未知与版本冲突替换整个控制区 */
.bac-ctrl { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; padding: 6px 10px 4px; background: linear-gradient(180deg, rgba(7, 13, 28, 0), rgba(7, 13, 28, .85) 30%); }
.bac-chips { display: flex; align-items: center; gap: 6px; }
.bac-unit-box { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; padding: 2px 8px; border-radius: 10px; background: rgba(10, 18, 36, .75); border: 1px solid rgba(214, 165, 71, .35); }
.bac-unit-box small { font-size: 10px; color: var(--g-muted); white-space: nowrap; }
.bac-unit-box b { font-size: 16px; color: var(--g-gold-hi); }
.bac-chips .bac-chip { cursor: pointer; font-family: inherit; transition: transform .1s ease, box-shadow .15s ease; }
.bac-chips .bac-chip.on { transform: translateY(-3px); box-shadow: 0 0 0 3px var(--bac-chip), 0 0 0 5px var(--g-gold-hi), 0 0 14px rgba(246, 216, 138, .7); }
.bac-clear { margin-left: auto; min-height: 44px; font-size: 15px; padding: 0 12px; }
.bac-acts { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 6px; }
.bac-acts .g-btn { min-height: 48px; font-size: 16px; padding: 0 6px; letter-spacing: 0; }
.bac-ctrl-locked { display: flex; align-items: center; gap: 8px; min-height: 52px; }
.bac-ctrl-locked .g-btn { min-height: 44px; font-size: 15px; flex: 0 0 auto; }
.bac-ctrl-note { flex: 1; margin: 0; font-size: 13px; line-height: 1.5; color: var(--g-text-2); text-align: center; }
.bac-pending { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 10px; padding: 10px 12px; border-radius: 14px; background: rgba(15, 26, 50, .9); border: 1px solid var(--g-gold-edge); }
.bac-pending b { display: block; font-size: 15px; }
.bac-pending small { display: block; font-size: 12px; color: var(--g-text-2); line-height: 1.5; }
.bac-pending > .g-row, .bac-pending > .g-btn { grid-column: 1 / -1; }
.bac-pending .g-btn { min-height: 46px; font-size: 16px; }
.bac-pending.warn { border-color: rgba(251, 191, 36, .6); }
.bac-pending.warn > svg { color: var(--g-warn); }

/* BAC-04 单区金额面板 */
.bac-editor { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 14px; background: var(--g-glass); border: 1.5px solid var(--g-gold-edge); animation: g-fade .15s ease-out 1 both; }
.bac-editor.player, .bac-editor.ppair { border-color: rgba(96, 165, 250, .7); }
.bac-editor.banker, .bac-editor.bpair { border-color: rgba(248, 113, 113, .7); }
.bac-editor.tie { border-color: rgba(74, 222, 128, .7); }
.bac-ed-head { display: flex; align-items: center; justify-content: space-between; }
.bac-ed-head b { font-size: 14px; color: var(--g-gold-hi); }
.bac-ed-head .g-icon-btn { width: 36px; height: 36px; }
.bac-ed-vals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; }
.bac-ed-vals small { display: block; font-size: 11px; color: var(--g-muted); }
.bac-ed-vals b { display: inline-block; min-width: 56px; font-size: 16px; font-variant-numeric: tabular-nums; padding: 0 6px; border-radius: 8px; }
.bac-ed-vals b.solid { border: 1.5px solid var(--g-gold-hi); }
.bac-ed-vals b.dashed { border: 1.5px dashed var(--g-gold-hi); color: var(--g-gold-hi); }
.bac-ed-btns { display: grid; grid-template-columns: repeat(4, 1fr) 1.3fr; gap: 5px; }
.bac-ed-btn { min-height: 40px; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 800; color: var(--g-white); background: linear-gradient(180deg, var(--g-enamel-hi), var(--g-enamel)); border: 1px solid rgba(148, 163, 184, .4); cursor: pointer; }
.bac-ed-btn:disabled { opacity: .5; cursor: default; }
.bac-ed-input { min-width: 0; min-height: 40px; border-radius: 10px; padding: 0 8px; font: inherit; font-size: 16px; text-align: center; color: var(--g-white); background: rgba(5, 10, 22, .8); border: 1.5px dashed var(--g-gold-hi); font-variant-numeric: tabular-nums; }
.bac-ed-input.bad { border-color: var(--g-neg); }
.bac-ed-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.bac-ed-foot small { font-size: 11px; color: var(--g-muted); line-height: 1.4; }
.bac-ed-foot .g-link { min-height: 36px; padding: 2px 4px; font-size: 13px; white-space: nowrap; }
.bac-ed-foot .g-link:disabled { opacity: .45; }
.bac-ed-err { min-height: 0; font-size: 12px; color: var(--g-neg); }
.bac-ed-err:empty { display: none; }

/* 资产行 */
.bac-assets { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 12px; padding: 2px 10px 6px; font-size: 12px; color: var(--g-text-2); font-variant-numeric: tabular-nums; }
.bac-assets:empty { display: none; }
.bac-assets b { color: var(--g-gold-hi); font-size: 13px; }
.bac-assets > span { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.bac-assets .g-practice-flag.small, .bac-sub .g-practice-flag.small, .bac-table .g-sheet .g-practice-flag.small { padding: 1px 8px; font-size: 11px; }
.bac-assets .g-warn { font-size: 12px; }
.bac-lockico { display: inline-flex; color: var(--g-gold-hi); }
@media (max-width: 359px) { .bac-acts .g-btn { font-size: 14px; } .bac-chips .bac-chip { width: 40px; height: 40px; font-size: 13px; } .bac-ed-btn { font-size: 13px; } }
@media (max-height: 640px) { .bac-acts .g-btn { min-height: 44px; } .bac-ctrl { gap: 4px; padding-top: 4px; } .bac-editor { gap: 4px; padding: 6px 8px; } .bac-ed-head .g-icon-btn { width: 32px; height: 32px; } .bac-ed-vals b { font-size: 14px; } .bac-ed-btn, .bac-ed-input { min-height: 36px; } .bac-chips .bac-chip { width: 40px; height: 40px; } }

/* ---- styles/bac/sheets.css ---- */
/* BAC-05 确认卡、BAC-06 注单、BAC-07 预览、BAC-15/16 结果、BAC-17 作废、BAC-23 练习、更多菜单 */
.bac-table .g-sheet .g-table td small.bac-odds-mini { display: block; font-size: 10px; color: var(--g-muted); }
.bac-table .g-sheet .g-table tr.bad td { background: rgba(127, 29, 29, .25); }
.bac-table .g-sheet .g-row .g-btn, .bac-table .g-sheet .bac-menu .g-btn { min-height: 48px; font-size: 17px; }
.bac-confirm-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bac-confirm-sum > div { min-width: 0; padding: 6px 4px; border-radius: 10px; text-align: center; background: rgba(10, 18, 36, .7); border: 1px solid rgba(214, 165, 71, .3); }
.bac-confirm-sum small { display: block; font-size: 11px; color: var(--g-muted); line-height: 1.35; }
.bac-confirm-sum b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; }
.bac-confirm .g-sheet-head b { color: var(--g-gold-hi); font-variant-numeric: tabular-nums; }
.bac-menu { display: flex; flex-direction: column; gap: 6px; }
.bac-menu-item { min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 12px; font: inherit; font-size: 15px; text-align: left; color: var(--g-white); cursor: pointer; background: rgba(10, 18, 36, .65); border: 1px solid rgba(214, 165, 71, .28); }
.bac-menu-item span { flex: 1; }
.bac-menu-item svg:first-child { color: var(--g-gold-hi); }
.bac-menu-item svg:last-child { color: var(--g-muted); }
.bac-result .g-sheet-head h2 { font-size: 20px; color: var(--g-white); }
.bac-result .g-sheet-head h2 span { font-size: 26px; font-variant-numeric: tabular-nums; }
.bac-result.lose { border-color: rgba(148, 163, 184, .6); box-shadow: 0 -6px 30px rgba(0, 0, 0, .55); }
.bac-pay td.bac-tone { font-weight: 800; }
.bac-tone.player, .bac-tone.ppair { color: #BFDBFE; }
.bac-tone.banker, .bac-tone.bpair { color: #FECACA; }
.bac-tone.tie { color: #BBF7D0; }
.bac-st.win { color: var(--g-pos); font-weight: 800; }
.bac-st.lose { color: var(--g-muted); }
.bac-st.push { color: #7DD3FC; font-weight: 700; }
.bac-st.none { color: var(--g-muted); opacity: .7; }
.bac-unlock-big { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #BFDBFE; background: rgba(37, 99, 235, .2); border: 1px solid rgba(96, 165, 250, .5); }

/* ---- styles/bac/records.css ---- */
/* BAC-18—BAC-22 子页面公共 */
.bac-sub .g-notice { flex-direction: row; align-items: flex-start; margin: 0; }
.bac-sub .g-notice > svg { flex: 0 0 auto; color: var(--g-gold-hi); margin-top: 2px; }
.bac-sub .g-notice > span { font-size: 13px; line-height: 1.6; color: var(--g-text-2); }
.bac-sub .g-notice.warn > svg { color: var(--g-warn); }
.bac-sub .g-notice.warn > span { color: #FDE68A; }
.bac-sub .g-sec-head h2 { margin: 0; font-size: 17px; color: var(--g-gold-hi); font-weight: 800; min-width: 0; }
.bac-sub .g-row.two .g-btn { min-height: 50px; font-size: 17px; }
.bac-sub .g-pill { cursor: pointer; font: inherit; font-size: 13px; min-height: 36px; }
.bac-sub .g-pill.on { color: var(--g-gold-ink); background: linear-gradient(180deg, var(--g-gold-hi), var(--g-gold)); }

/* BAC-18 路单详情 */
.bac-road-panel .g-sec-head { flex-wrap: wrap; }
.bac-road-big .bac-road-scroll { margin-top: 0; }
.bac-pick { min-height: 36px; margin-top: 8px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 14px; }
.bac-pick b { color: var(--g-gold-hi); }
.bac-road-panel > .g-fine { margin-top: 6px; }
.bac-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.bac-stat { padding: 8px 2px; border-radius: 12px; text-align: center; background: var(--g-glass); border: 1px solid var(--g-gold-edge); }
.bac-stat small { display: block; font-size: 12px; font-weight: 700; }
.bac-stat b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.bac-stat.banker small, .bac-stat.bpair small { color: #FECACA; }
.bac-stat.player small, .bac-stat.ppair small { color: #BFDBFE; }
.bac-stat.tie small { color: #BBF7D0; }

/* BAC-19 牌靴 */
.bac-shoe-card { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.bac-shoe-card h2 { margin: 0 0 8px; font-size: 20px; color: var(--g-gold-hi); display: flex; align-items: center; gap: 8px; }
.bac-shoe-deck { position: relative; width: 54px; height: 74px; margin-top: 4px; }
.bac-shoe-deck i { position: absolute; inset: 0; border-radius: 6px; border: 2px solid #F1F5F9; box-shadow: 0 2px 4px rgba(0, 0, 0, .45);
  background: radial-gradient(circle, rgba(255, 255, 255, .3) 0 3px, transparent 4px), repeating-linear-gradient(45deg, #2747A8 0 4px, #1E3A8A 4px 8px); }
.bac-shoe-deck i:nth-child(1) { transform: translate(-6px, 4px) rotate(-8deg); }
.bac-shoe-deck i:nth-child(2) { transform: translate(-2px, 2px) rotate(-3deg); }
.bac-shoe-deck i:nth-child(3) { transform: translate(2px, 1px) rotate(3deg); }
.bac-shoe-deck i:nth-child(4) { transform: translate(6px, 0) rotate(8deg); }
.bac-shoe-card.closed .bac-shoe-deck { filter: grayscale(.6) brightness(.8); }
.bac-hash { overflow-wrap: anywhere; font-size: 12px; }
.bac-shoe-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.bac-shoe-facts > div { padding: 8px 4px; border-radius: 10px; text-align: center; background: rgba(10, 18, 36, .6); border: 1px solid rgba(214, 165, 71, .3); }
.bac-shoe-facts small { display: block; font-size: 11px; color: var(--g-muted); }
.bac-shoe-facts b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
.bac-shoepage .g-panel > .g-fine + .g-fine { margin-top: 6px; }
.bac-shoe-list { display: flex; flex-direction: column; gap: 4px; }
.bac-shoe-row { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; border-radius: 10px; background: rgba(10, 18, 36, .5); border: 1px solid transparent; }
.bac-shoe-row.on { border-color: var(--g-gold-edge); }
.bac-shoe-row > b { font-size: 14px; }
.bac-shoe-row > .g-row { margin-left: auto; }
.bac-shoe-row .g-link { min-height: 36px; padding: 2px 4px; }

/* BAC-20 证明 */
.bac-steps { margin: 0; padding: 0; list-style: none; counter-reset: bacstep; display: flex; flex-direction: column; gap: 6px; }
.bac-steps li { counter-increment: bacstep; display: grid; grid-template-columns: 26px 1fr; gap: 2px 8px; align-items: center; font-size: 14px; color: var(--g-text-2); }
.bac-steps li > i { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 12px; font-weight: 800; color: var(--g-muted); border: 1.5px solid rgba(148, 163, 184, .5); }
.bac-steps li > i::before { content: counter(bacstep); }
.bac-steps li.ok { color: var(--g-white); }
.bac-steps li.ok > i { color: #052E16; background: var(--g-pos); border-color: var(--g-pos); }
.bac-steps li.ok > i::before { content: '✓'; }
.bac-steps li.bad { color: var(--g-neg); }
.bac-steps li.bad > i { color: #fff; background: var(--g-neg); border-color: var(--g-neg); }
.bac-steps li.bad > i::before { content: '✕'; }
.bac-steps li > small { grid-column: 2; font-size: 12px; color: var(--g-neg); }
.bac-proof-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.bac-proofpage .g-panel > .g-notice { margin-top: 12px; }
.bac-proof-rounds summary { cursor: pointer; min-height: 32px; font-size: 15px; font-weight: 700; color: var(--g-gold-hi); }
.bac-proof-rounds .g-table { margin-top: 8px; }
.bac-notes { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.6; color: var(--g-text-2); }

/* BAC-21 战绩 */
.bac-filter { display: flex; align-items: center; gap: 8px; }
.bac-filter .g-tabs { flex: 1; margin: 0; }
.bac-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 10px; border-radius: 16px; background: var(--g-glass); border: 1px solid var(--g-gold-edge); }
.bac-sum:empty { display: none; }
.bac-sum > div { text-align: center; min-width: 0; }
.bac-sum small { display: block; font-size: 11px; color: var(--g-muted); }
.bac-sum b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bac-sum > .g-fine { grid-column: 1 / -1; font-size: 11px; }
.bac-recs { display: flex; flex-direction: column; gap: 8px; }
.bac-rec { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px 30px 10px 12px; border-radius: 14px; text-align: left; font: inherit; color: var(--g-white); cursor: pointer; background: var(--g-glass); border: 1px solid rgba(214, 165, 71, .35); }
.bac-rec.pending { border-style: dashed; }
.bac-rec-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.bac-rec-head b { font-size: 14px; }
.bac-rec-head small { margin-left: auto; font-size: 11px; color: var(--g-muted); }
.bac-rec-badge { padding: 1px 7px; border-radius: 6px; font-size: 12px; font-weight: 800; }
.bac-rec-badge.win { color: #052E16; background: var(--g-pos); }
.bac-rec-badge.lose { color: #F1F5F9; background: #64748B; }
.bac-rec-badge.draw { color: #0C4A6E; background: #BAE6FD; }
.bac-rec-badge.aborted, .bac-rec-badge.pending { color: #BFDBFE; border: 1px solid rgba(96, 165, 250, .6); }
.bac-win { font-size: 12px; font-weight: 800; padding: 0 6px; border-radius: 6px; }
.bac-win.banker { color: #FECACA; background: rgba(220, 38, 38, .25); }
.bac-win.player { color: #BFDBFE; background: rgba(37, 99, 235, .25); }
.bac-win.tie { color: #BBF7D0; background: rgba(22, 163, 74, .25); }
.bac-vtags { display: flex; flex-wrap: wrap; gap: 4px; }
.bac-vtag { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 7px; border-radius: 11px; font-size: 12px; font-variant-numeric: tabular-nums; background: rgba(10, 18, 36, .7); border: 1px solid rgba(148, 163, 184, .35); }
.bac-vtag i { font-style: normal; font-weight: 800; }
.bac-vtag.player i, .bac-vtag.ppair i { color: #93C5FD; }
.bac-vtag.banker i, .bac-vtag.bpair i { color: #FCA5A5; }
.bac-vtag.tie i { color: #86EFAC; }
.bac-rec-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.bac-rec-nums small { display: block; font-size: 11px; color: var(--g-muted); }
.bac-rec-nums b { display: block; font-size: 14px; font-variant-numeric: tabular-nums; }
.bac-rec-go { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--g-muted); }

/* BAC-22 注单详情与回放 */
.bac-rd-head .g-sec-head { margin-bottom: 6px; }
.bac-rd-head .bac-vtags { margin-bottom: 6px; }
.bac-roundpage .bac-draw-cols { margin-top: 4px; }
.bac-roundpage .bac-draw-cols ol { color: var(--g-text-2); }
.bac-roundpage .g-panel > .g-fine { margin-top: 6px; }
.bac-timeline { margin: 0; padding: 0 0 0 14px; list-style: none; display: flex; flex-direction: column; gap: 10px; border-left: 2px solid rgba(214, 165, 71, .35); }
.bac-timeline li { position: relative; display: flex; flex-direction: column; gap: 4px; }
.bac-timeline li::before { content: ''; position: absolute; left: -21px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--g-enamel-hi); border: 2px solid var(--g-gold-edge); }
.bac-timeline li.on::before { background: var(--g-gold-hi); border-color: var(--g-gold-hi); }
.bac-tl-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bac-tl-head small { font-size: 11px; color: var(--g-muted); }
.bac-rd-acts { display: flex; flex-direction: column; gap: 8px; }
.bac-rd-acts .g-btn { min-height: 50px; font-size: 17px; }
.bac-replay { display: flex; flex-direction: column; gap: 8px; }
.bac-replay .g-sec-head { margin-bottom: 0; }
.bac-rp-text { margin: 0; min-height: 22px; text-align: center; font-size: 14px; color: var(--g-gold-hi); }
.bac-rp-bar { display: flex; align-items: center; gap: 8px; }
.bac-rp-bar input { flex: 1; accent-color: var(--g-gold); min-height: 32px; }
.bac-rp-ctrl { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 6px; align-items: center; }
.bac-rp-ctrl .g-btn { min-height: 44px; font-size: 15px; padding: 0 6px; letter-spacing: 0; }
@media (max-width: 359px) { .bac-stats b { font-size: 17px; } .bac-sum b { font-size: 14px; } .bac-rp-ctrl { grid-template-columns: 1fr 1fr 1fr; } .bac-rp-ctrl .g-seg { grid-column: 1 / -1; justify-self: center; } }

/* ---- styles/bac/effects.css ---- */
/* 动效：发牌翻转 600ms、补牌说明淡入、换靴牌背收拢舒展 600ms、整份全中才放金光；减少动态效果时只保留一次淡入 */
.bac-card.deal { animation: bac-deal .6s cubic-bezier(.2, .8, .3, 1) 1 both; transform-origin: 50% 50%; }
.bac-fade { animation: g-fade .3s ease-out 1 both; }
.bac-table.shoe-change .bac-hands { animation: bac-shoe .6s ease-in-out 1 both; }
.bac-result.anim-win { animation: bac-glow 1.2s ease-out 1 both; }
.bac-phase.urgent p { animation: bac-pulse 1s ease-in-out infinite; }
.bac-lockico.open { animation: bac-unlock .6s ease-out 1 both; }
.bac-bead, .bac-ring { animation: g-fade .12s ease-out 1 both; }
@keyframes bac-deal { 0% { transform: translateY(-40px) rotateY(90deg) scale(.8); opacity: 0; } 50% { transform: translateY(0) rotateY(90deg) scale(1); opacity: 1; } 100% { transform: rotateY(0) scale(1); opacity: 1; } }
@keyframes bac-shoe { 0% { transform: scale(1); opacity: 1; } 45% { transform: scaleX(.6); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }
@keyframes bac-glow { 0% { box-shadow: 0 0 0 0 rgba(246, 216, 138, .0); } 30% { box-shadow: 0 0 0 4px rgba(246, 216, 138, .6), 0 0 40px rgba(246, 216, 138, .5); } 100% { box-shadow: 0 -6px 30px rgba(0, 0, 0, .55), 0 0 30px rgba(214, 165, 71, .2); } }
@keyframes bac-pulse { 50% { opacity: .55; } }
@keyframes bac-unlock { 0% { transform: rotate(0); } 40% { transform: rotate(-18deg); } 100% { transform: rotate(0); } }
html.reduce-motion .bac-card.deal, html.reduce-motion .bac-table.shoe-change .bac-hands { animation: g-fade .2s ease-out 1 both !important; }

/* ---- styles/hol/index.css ---- */
/* 德州扑克（界面 UI 第四阶段 TH-01—TH-26）样式模块。全部选择器带 .hol- 前缀，只作用于德州页面；
   通用的厅堂背景、顶栏、按钮、面板、弹层来自 styles/game/（.g-*），与斗地主、百家乐同一套视觉。
   tokens   色板补充与牌面尺寸
   cards    牌面、牌背、公共牌空槽、最佳五张描金
   lobby    TH-01 大厅、TH-03 带入、TH-04 匹配、TH-05 创建练习桌、TH-06 邀请、TH-02 规则
   table    TH-07—TH-13 牌桌骨架：信息条、椭圆绿桌、六席、底池与公共牌、本人区
   actions  TH-10—TH-18、TH-20—TH-23 提示条、操作区、金额面板、结算面板
   sheets   TH-15 确认、TH-19 池详情、TH-22 补充、菜单与短语
   records  TH-24 桌会话、TH-25 战绩与回放
   effects  动效与“减少动态效果” */
/* ---- styles/hol/tokens.css ---- */
.g-screen.hol-table, .g-screen.hol-lobby, .g-screen.hol-buyin, .g-screen.hol-sub {
  --hol-blue: #2563EB; --hol-blue-hi: #93C5FD; --hol-red: #DC2626; --hol-green: #16A34A;
  --hol-card-md: clamp(30px, 9.6vw, 42px);
}

/* ---- styles/hol/cards.css ---- */
/* 牌面：象牙白、衬线点数；牌背深蓝花纹白边；公共牌空槽为暗绿描边并带淡黑桃 */
.hol-card { --w: var(--hol-card-md); position: relative; flex: 0 0 auto; width: var(--w); aspect-ratio: 5 / 7; border-radius: calc(var(--w) * .12); color: #111827;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBF8F1 100%); border: 1px solid #D6CFC0; box-shadow: -2px 2px 5px rgba(0, 0, 0, .35); transition: transform .18s ease, opacity .18s ease, filter .18s ease; }
.hol-card.xl { --w: 54px; }
.hol-card.lg { --w: 46px; }
.hol-card.sm { --w: 26px; }
.hol-card.xs { --w: 18px; border-radius: 3px; box-shadow: -1px 1px 2px rgba(0, 0, 0, .35); }
.hol-card.red { color: #D21F2D; }
.hol-card .r { position: absolute; top: 1px; left: calc(var(--w) * .09); font-family: Georgia, "Times New Roman", "Noto Serif SC", serif; font-weight: 700; font-size: calc(var(--w) * .42); line-height: 1; letter-spacing: -1px; }
.hol-card .s { position: absolute; top: calc(var(--w) * .47); left: calc(var(--w) * .1); font-size: calc(var(--w) * .26); line-height: 1; }
.hol-card .c { position: absolute; right: calc(var(--w) * .07); bottom: calc(var(--w) * .04); font-size: calc(var(--w) * .52); line-height: 1; }
.hol-card.xs .s, .hol-card.sm .s { display: none; }
.hol-card.xs .r { font-size: 10px; left: 2px; letter-spacing: -.5px; }
.hol-card.xs .c { font-size: 10px; right: 1px; bottom: 0; }
.hol-card.back { background: radial-gradient(circle, rgba(255, 255, 255, .28) 0 2px, transparent 3px), repeating-linear-gradient(45deg, #2747A8 0 3px, #1E3A8A 3px 6px); border: 2px solid #F1F5F9; }
.hol-card.slot { background: rgba(5, 40, 22, .35); border: 1.5px solid rgba(214, 165, 71, .3); box-shadow: inset 0 0 8px rgba(0, 0, 0, .35); display: flex; align-items: center; justify-content: center; }
.hol-card.slot i { font-style: normal; color: rgba(214, 165, 71, .22); font-size: calc(var(--w) * .45); }
.hol-card.best { box-shadow: 0 0 0 2px var(--g-gold-hi), 0 0 12px rgba(246, 216, 138, .75); border-color: var(--g-gold); transform: translateY(-2px); }
.hol-card.dim { filter: brightness(.6) saturate(.6); }
.hol-cards { display: flex; gap: 4px; flex-wrap: nowrap; align-items: center; }
.hol-cards.tight { gap: 2px; }

/* ---- styles/hol/lobby.css ---- */
/* 六席桌缩影（大厅、匹配、创建、邀请共用） */
.hol-mini { position: relative; height: 210px; margin: 6px 4px 34px; flex-shrink: 0; }
.hol-mini-felt { position: absolute; inset: 22px 30px; border-radius: 50%;
  background: radial-gradient(ellipse 70% 60% at 50% 45%, var(--g-felt-hi) 0%, var(--g-felt) 55%, var(--g-felt-lo) 100%);
  box-shadow: 0 0 0 5px #C99A3E, 0 0 0 7px #6E4B12, 0 0 0 8px rgba(240, 203, 122, .55), 0 14px 30px rgba(0, 0, 0, .55), inset 0 10px 26px rgba(0, 0, 0, .45);
  display: flex; align-items: center; justify-content: center; }
.hol-mini-center { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.hol-mini-center b { color: var(--g-gold-hi); font-size: 16px; letter-spacing: 1px; }
.hol-mini-center small { font-size: 12px; color: #D1FAE5; }
.hol-mini-title { font-family: Georgia, "Times New Roman", serif; font-style: italic; opacity: .85; }
.hol-mini-count { font-size: 34px !important; line-height: 1; }
.hol-mini-board { display: flex; gap: 3px; }
.hol-mini-seat { position: absolute; width: 48px; display: flex; flex-direction: column; align-items: center; gap: 2px; transform: translate(-50%, -50%); transition: filter .3s ease; }
.hol-mini-seat > span { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: var(--g-muted);
  background: rgba(10, 18, 36, .85); border: 2px dashed rgba(148, 163, 184, .5); }
.hol-mini-seat .avatar { border: 2px solid var(--g-gold); border-radius: 50%; }
.hol-mini-seat.on > span { color: var(--g-gold-ink); background: linear-gradient(180deg, var(--g-gold-hi), var(--g-gold)); border: 2px solid #FFF0C2; box-shadow: 0 0 12px rgba(246, 216, 138, .55); }
.hol-mini-seat small { font-size: 11px; color: var(--g-text-2); white-space: nowrap; }
.hol-mini-seat.s0 { left: 50%; top: 100%; }
.hol-mini-seat.s1 { left: 8%; top: 70%; }
.hol-mini-seat.s2 { left: 8%; top: 22%; }
.hol-mini-seat.s3 { left: 50%; top: 4%; }
.hol-mini-seat.s4 { left: 92%; top: 22%; }
.hol-mini-seat.s5 { left: 92%; top: 70%; }
.hol-mini.bg { opacity: .5; filter: blur(2px); }

/* TH-01 大厅 */
.hol-params { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.hol-params.three { grid-template-columns: repeat(3, 1fr); }
.hol-params > div { min-width: 0; padding: 8px 4px; border-radius: 12px; text-align: center; background: var(--g-glass); border: 1px solid var(--g-gold-edge); }
.hol-params small { display: block; font-size: 11px; color: var(--g-muted); }
.hol-params b { display: block; font-size: clamp(12px, 3.5vw, 15px); color: var(--g-gold-hi); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hol-wallet { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; padding: 10px 14px; }
.hol-wallet small { display: block; font-size: 12px; color: var(--g-muted); }
.hol-wallet b { font-size: 20px; color: var(--g-gold-hi); font-variant-numeric: tabular-nums; }
.hol-wallet p { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--g-text-2); }
.hol-lobby-actions { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 359px) { .hol-params { grid-template-columns: repeat(2, 1fr); } .hol-mini { height: 180px; } }

/* TH-03 带入 */
.hol-buyin { position: relative; }
.hol-buyin-bg { flex: 1; min-height: 0; padding: 0 16px; overflow: hidden; }
.hol-buyin-panel { position: relative; z-index: 2; margin: 0 10px calc(10px + var(--safe-bottom)); width: auto; max-height: none; flex: 0 0 auto; }
.hol-split { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; }
.hol-split > div { padding: 8px; border-radius: 12px; text-align: center; background: rgba(10, 18, 36, .7); border: 1px solid rgba(214, 165, 71, .3); display: flex; flex-direction: column; gap: 1px; }
.hol-split small { font-size: 11px; color: var(--g-muted); }
.hol-split b { font-size: 18px; color: var(--g-gold-hi); font-variant-numeric: tabular-nums; }
.hol-split-arrow { color: var(--g-gold-hi); font-size: 20px; font-weight: 900; }
.hol-amt-row { display: flex; align-items: center; justify-content: center; gap: 8px; }
.hol-amt-input { flex: 1; min-width: 0; max-width: 220px; height: 52px; border-radius: 12px; text-align: center; font: inherit; font-size: 26px; font-weight: 900; color: var(--g-gold-hi);
  background: rgba(5, 10, 22, .85); border: 1.5px solid var(--g-gold-edge); font-variant-numeric: tabular-nums; }
.hol-amt-input:focus { outline: 2px solid var(--g-gold); }
.hol-step { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 12px; font: inherit; font-size: 24px; font-weight: 900; color: var(--g-white); cursor: pointer;
  background: linear-gradient(180deg, var(--g-enamel-hi), var(--g-enamel)); border: 1px solid rgba(148, 163, 184, .4); }
.hol-quick { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.hol-quick.four { display: grid; grid-template-columns: repeat(4, 1fr); }
.hol-quick-btn { min-height: 44px; min-width: 64px; padding: 4px 10px; border-radius: 12px; font: inherit; font-size: 15px; font-weight: 800; color: var(--g-white); cursor: pointer; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--g-enamel-hi), var(--g-enamel)); border: 1px solid rgba(148, 163, 184, .4); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hol-quick-btn small { font-size: 11px; font-weight: 600; color: var(--g-text-2); }
.hol-quick-btn.on { color: var(--g-gold-ink); background: linear-gradient(180deg, var(--g-gold-hi), var(--g-gold)); border-color: #FFF0C2; }
.hol-quick-btn.on small { color: var(--g-gold-ink); }
.hol-quick-btn:disabled { opacity: .45; cursor: default; }
.hol-err { margin: 0; min-height: 0; font-size: 13px; color: var(--g-neg); text-align: center; }
.hol-err:empty { display: none; }
.hol-notes { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; font-size: 13px; line-height: 1.55; color: var(--g-text-2); }

/* TH-04 匹配、TH-05/06 */
.hol-match-note h3 { margin: 0 0 8px; font-size: 16px; color: var(--g-gold-hi); }
.hol-invite-fail { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.hol-invite-fail svg { color: var(--g-warn); }
.hol-invite-fail h3 { margin: 0; font-size: 17px; }
.hol-sub .g-practice-flag { align-self: center; }
.hol-sub .g-notice { flex-direction: row; align-items: flex-start; margin: 0; }
.hol-sub .g-notice > svg { flex: 0 0 auto; color: var(--g-gold-hi); margin-top: 2px; }
.hol-sub .g-notice > span { font-size: 13px; line-height: 1.6; color: var(--g-text-2); }
.hol-sub .g-row.two .g-btn { min-height: 50px; font-size: 17px; }

/* TH-02 规则 */
.hol-rules .g-body { padding-top: 0; }
.hol-rules-body, .hol-rules-tab { display: flex; flex-direction: column; gap: 12px; }
.hol-flow { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; padding: 10px 6px; border-radius: 12px; background: radial-gradient(ellipse at 50% 40%, var(--g-felt-hi), var(--g-felt-lo)); }
.hol-flow > div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hol-flow b { font-size: 13px; color: var(--g-gold-hi); }
.hol-flow small { font-size: 11px; color: #D1FAE5; }
.hol-flow > span { align-self: center; color: var(--g-gold-hi); font-size: 22px; }
.hol-demo-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.hol-demo-row small { display: block; font-size: 12px; color: var(--g-muted); margin-bottom: 6px; }
.hol-demo-hole { padding-right: 10px; border-right: 1px solid rgba(214, 165, 71, .3); }
.hol-demo .hol-card.md { --w: clamp(28px, 8.6vw, 40px); }
.hol-demo-note { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; font-size: 13px; line-height: 1.55; color: var(--g-text-2); background: rgba(10, 18, 36, .6); }
.hol-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-bottom: 8px; }
.hol-cat { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 12px; background: rgba(10, 18, 36, .6); border: 1px solid rgba(214, 165, 71, .25); }
.hol-cat b { font-size: 14px; color: var(--g-gold-hi); }
.hol-cat small { font-size: 12px; line-height: 1.5; color: var(--g-text-2); }
.hol-rules-sec h3 { margin: 0 0 8px; font-size: 16px; color: var(--g-gold-hi); }
.hol-rules-sec ul, .hol-rules-sec ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.6; color: var(--g-text-2); }
.hol-rule-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hol-rule-card { display: flex; gap: 8px; align-items: flex-start; padding: 10px; border-radius: 14px; background: var(--g-glass); border: 1px solid var(--g-gold-edge); }
.hol-rule-ico { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--g-gold-hi); background: rgba(214, 165, 71, .12); border: 1px solid var(--g-gold-edge); }
.hol-rules-more { align-self: center; min-height: 36px; }
.hol-rule-card b { font-size: 15px; color: var(--g-gold-hi); }
.hol-rule-card p { margin: 4px 0 0; font-size: 12px; line-height: 1.55; color: var(--g-text-2); }
.hol-ex-players { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; }
.hol-ex-players > div { padding: 8px 4px; border-radius: 10px; background: rgba(10, 18, 36, .7); border: 1px solid rgba(214, 165, 71, .3); }
.hol-ex-players b { display: block; font-size: 16px; color: var(--g-gold-hi); }
.hol-ex-players small { font-size: 12px; color: var(--g-text-2); }
@media (max-width: 359px) { .hol-rule-cards { grid-template-columns: 1fr; } .hol-demo-row { grid-template-columns: 1fr; } .hol-demo-hole { border-right: 0; padding-right: 0; } }
.hol-demo .g-sec-head { flex-wrap: wrap; }
.hol-demo .g-sec-head small { flex-basis: 100%; }

/* ---- styles/hol/table.css ---- */
/* TH-07—TH-13 牌桌：顶栏 → 信息条 → 椭圆绿桌（六席、底池、公共牌、本人区） → 提示条 → 操作区 */
.hol-table .g-top { min-height: 52px; padding: 4px 8px; }
.hol-table .g-top-right { gap: 2px; }
.hol-table .g-top-right .g-icon-btn { width: 40px; height: 40px; }
.hol-table .g-icon-btn.off { opacity: .6; }
.hol-info { flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; padding: 0 10px 4px; }
.hol-info-box { min-width: 0; display: flex; flex-direction: column; padding: 4px 8px; border-radius: 10px; background: rgba(10, 18, 36, .72); border: 1px solid rgba(214, 165, 71, .3); }
.hol-info-box b { font-size: 13px; color: var(--g-gold-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.hol-info-box small { font-size: 11px; color: var(--g-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hol-info-box.end { text-align: right; }
.hol-practice { margin-left: 6px; padding: 0 6px; border-radius: 6px; font-size: 10px; font-weight: 800; color: #E0F2FE; background: linear-gradient(180deg, #2563EB, #1E40AF); }
.hol-street { padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; color: var(--g-text-2); background: rgba(10, 18, 36, .8); border: 1px solid rgba(148, 163, 184, .35); white-space: nowrap; }
.hol-street.live { color: var(--g-gold-ink); background: linear-gradient(180deg, var(--g-gold-hi), var(--g-gold)); border-color: #FFF0C2; }

.hol-felt-wrap { flex: 1; min-height: 0; position: relative; padding: 14px 10px 6px; }
.hol-felt { position: relative; height: 100%; border-radius: 46% / 30%;
  background: radial-gradient(ellipse 70% 55% at 50% 45%, var(--g-felt-hi) 0%, var(--g-felt) 55%, var(--g-felt-lo) 100%);
  box-shadow: 0 0 0 5px #C99A3E, 0 0 0 7px #6E4B12, 0 0 0 8px rgba(240, 203, 122, .55), 0 0 0 10px rgba(10, 18, 36, .85), 0 16px 36px rgba(0, 0, 0, .6), inset 0 12px 36px rgba(0, 0, 0, .45); }
.hol-felt-mark { position: absolute; left: 50%; top: 56%; width: 70px; height: 70px; transform: translate(-50%, -50%); opacity: .07; pointer-events: none;
  background: radial-gradient(circle at 30% 42%, #E6F4EA 0 24%, transparent 25%), radial-gradient(circle at 70% 42%, #E6F4EA 0 24%, transparent 25%), conic-gradient(from 135deg at 50% 18%, #E6F4EA 0 90deg, transparent 0); clip-path: polygon(50% 0, 100% 52%, 72% 78%, 58% 72%, 66% 100%, 34% 100%, 42% 72%, 28% 78%, 0 52%); }

/* 席位：头像（行动者金色计时环）+ 名字筹码牌 + 状态 */
.hol-seat { position: absolute; z-index: 2; width: 78px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.hol-seat.a-top { left: 50%; top: -12px; transform: translateX(-50%); }
.hol-seat.a-lt { left: -4px; top: 13%; }
.hol-seat.a-rt { right: -4px; top: 13%; }
.hol-seat.a-lm { left: -4px; top: 46%; }
.hol-seat.a-rm { right: -4px; top: 46%; }
.hol-ava { --p: 0; position: relative; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: conic-gradient(var(--g-gold-hi) calc(var(--p) * 360deg), rgba(10, 18, 36, .9) 0); padding: 3px; }
.hol-ava .avatar { border-radius: 50%; overflow: hidden; border: 2px solid #0B1328; }
.hol-ava.urgent { background: conic-gradient(#F59E0B calc(var(--p) * 360deg), rgba(10, 18, 36, .9) 0); }
.hol-ava.empty { background: rgba(10, 18, 36, .5); border: 2px dashed rgba(148, 163, 184, .4); color: var(--g-muted); font-weight: 800; }
.hol-seat.acting .hol-ava, .hol-me.acting .hol-ava { box-shadow: 0 0 14px rgba(246, 216, 138, .65); }
.hol-seat.ready .hol-ava { box-shadow: 0 0 0 2px var(--g-gold); }
.hol-seat.folded .hol-ava, .hol-seat.folded .hol-plate { filter: grayscale(.8) brightness(.7); }
.hol-seat.win .hol-ava, .hol-me.win .hol-ava { box-shadow: 0 0 0 3px var(--g-gold-hi), 0 0 18px rgba(246, 216, 138, .7); }
.hol-pos-wrap { position: absolute; left: -12px; top: -6px; display: flex; flex-direction: column; gap: 2px; z-index: 2; }
.hol-seat.a-rt .hol-pos-wrap, .hol-seat.a-rm .hol-pos-wrap { left: auto; right: -12px; }
.hol-pos { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 18px; padding: 0 4px; border-radius: 9px; font-size: 10px; font-weight: 900; white-space: nowrap; }
.hol-pos.pos-btn { color: var(--g-gold-ink); background: linear-gradient(180deg, #FFF0C2, var(--g-gold)); border: 1px solid #FFF0C2; }
.hol-pos.pos-sb { color: #fff; background: linear-gradient(180deg, #3B82F6, #1E40AF); border: 1px solid #93C5FD; }
.hol-pos.pos-bb { color: #fff; background: linear-gradient(180deg, #4F46E5, #312E81); border: 1px solid #A5B4FC; }
.hol-pos-inline { display: inline-flex; gap: 2px; margin-left: 4px; vertical-align: middle; }
.hol-plate { min-width: 64px; max-width: 78px; padding: 1px 6px; border-radius: 8px; background: rgba(7, 13, 28, .88); border: 1px solid rgba(214, 165, 71, .45); display: flex; flex-direction: column; line-height: 1.2; }
.hol-name { font-size: 11px; color: var(--g-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hol-plate b { font-size: 13px; color: var(--g-gold-hi); font-variant-numeric: tabular-nums; }
.hol-hole { position: absolute; top: 18px; display: flex; gap: 1px; z-index: 1; }
.hol-seat.a-lt .hol-hole, .hol-seat.a-lm .hol-hole { left: 58px; }
.hol-seat.a-rt .hol-hole, .hol-seat.a-rm .hol-hole { right: 58px; }
.hol-seat.a-top .hol-hole { left: 64px; }
.hol-hole .hol-card.sm { --w: 22px; }
.hol-tag { padding: 0 6px; border-radius: 6px; font-size: 11px; font-weight: 700; color: var(--g-text-2); background: rgba(10, 18, 36, .85); border: 1px solid rgba(148, 163, 184, .4); white-space: nowrap; }
.hol-tag.ok { color: #BBF7D0; border-color: rgba(74, 222, 128, .5); }
.hol-tag.allin { color: var(--g-gold-ink); background: var(--g-gold-hi); border-color: var(--g-gold); }
.hol-tag.fold { color: var(--g-muted); }
.hol-tag.wait { color: #BFDBFE; border-color: rgba(96, 165, 250, .7); }
.hol-tag.win { color: var(--g-gold-ink); background: linear-gradient(180deg, var(--g-gold-hi), var(--g-gold)); border-color: #FFF0C2; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.hol-flags { font-size: 10px; color: #FCD34D; white-space: nowrap; }
.hol-bet { position: absolute; display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px 1px 2px; border-radius: 10px; font-size: 12px; font-weight: 800; color: var(--g-white); background: rgba(7, 13, 28, .8); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hol-seat.a-lt .hol-bet, .hol-seat.a-lm .hol-bet { left: 80px; top: 52px; }
.hol-seat.a-rt .hol-bet, .hol-seat.a-rm .hol-bet { right: 80px; top: 52px; }
.hol-seat.a-top .hol-bet { left: 50%; translate: -50% 0; top: 100%; margin-top: 2px; }
.hol-bet.me { position: absolute; left: 50%; top: -24px; translate: -50% 0; }
.hol-last { font-size: 10px; color: #E2E8F0; white-space: nowrap; max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
.hol-bubble { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); padding: 3px 8px; border-radius: 10px; font-size: 12px; color: #0F172A; background: #F8FAFC; white-space: nowrap; z-index: 5; }
.hol-chips { display: inline-flex; flex-direction: column-reverse; }
.hol-chips i { display: block; width: 14px; height: 4px; margin-top: -1px; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .85); background: #B91C1C; }
.hol-chips i:nth-child(2) { background: #1D4ED8; }
.hol-chips i:nth-child(3) { background: #15803D; }

/* 中心：底池、公共牌、街道或分池结果 */
.hol-center { position: absolute; z-index: 1; left: 50%; top: 31%; transform: translateX(-50%); width: min(70%, 260px); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hol-pot { display: inline-flex; align-items: center; gap: 4px; padding: 3px 12px; border-radius: 999px; font-size: 14px; color: var(--g-text-2); background: rgba(7, 13, 28, .78); border: 1px solid rgba(214, 165, 71, .45); }
.hol-pot b { color: var(--g-gold-hi); font-size: 17px; font-variant-numeric: tabular-nums; }
.hol-board { display: flex; gap: 4px; justify-content: center; }
.hol-center-note { font-size: 12px; color: #D1FAE5; text-align: center; }
.hol-awards { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; color: var(--g-gold-hi); text-align: center; }

/* 本人区：底部居中 */
.hol-me { position: absolute; z-index: 3; left: 50%; bottom: -8px; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 8px; }
.hol-me-id { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hol-me .hol-ava { width: 54px; height: 54px; }
.hol-me-cards { display: flex; gap: 4px; padding-bottom: 6px; }
.hol-me.folded .hol-me-cards .hol-card { filter: brightness(.45) saturate(.4); transform: translateY(6px) scale(.9); }
.hol-me.waiting .hol-ava { box-shadow: 0 0 0 3px #3B82F6, 0 0 14px rgba(59, 130, 246, .5); }

/* TH-26 核验 / 作废静止说明 */
.hol-hold { position: absolute; z-index: 6; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(86%, 320px); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px; text-align: center;
  border-radius: 16px; background: rgba(15, 26, 50, .96); border: 2px solid #60A5FA; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); }
.hol-hold svg { color: #93C5FD; }
.hol-hold b { font-size: 17px; color: #BFDBFE; }
.hol-hold small { font-size: 12px; line-height: 1.5; color: var(--g-text-2); }
.hol-hold .g-row { width: 100%; }
.hol-hold .g-btn { min-height: 44px; font-size: 15px; }

@media (max-width: 359px) {
  .hol-seat { width: 70px; }
  .hol-ava { width: 44px; height: 44px; }
  .hol-ava .avatar { width: 36px !important; height: 36px !important; }
  .hol-seat.a-lt .hol-hole, .hol-seat.a-lm .hol-hole { left: 50px; }
  .hol-seat.a-rt .hol-hole, .hol-seat.a-rm .hol-hole { right: 50px; }
  .hol-seat.a-lt .hol-bet, .hol-seat.a-lm .hol-bet { left: 70px; }
  .hol-seat.a-rt .hol-bet, .hol-seat.a-rm .hol-bet { right: 70px; }
  .hol-card.xl { --w: 46px; }
  .hol-center { width: 62%; }
}
@media (max-height: 640px) {
  .hol-felt-wrap { padding-top: 12px; }
  .hol-seat.a-lt, .hol-seat.a-rt { top: 10%; }
  .hol-seat.a-lm, .hol-seat.a-rm { top: 42%; }
  .hol-center { top: 27%; gap: 3px; }
  .hol-last, .hol-flags { display: none; }
  .hol-card.xl { --w: 42px; }
  .hol-me .hol-ava { width: 46px; height: 46px; }
}

/* ---- styles/hol/actions.css ---- */
/* 提示条与操作区 */
.hol-hint { flex: 0 0 auto; min-height: 24px; padding: 2px 12px; text-align: center; font-size: 13px; line-height: 1.45; color: var(--g-text-2); }
.hol-hint .turn { color: var(--g-gold-hi); font-weight: 700; }
.hol-hint .gold { color: var(--g-gold-hi); }
.hol-hint .muted { color: var(--g-muted); }
.hol-hint .wait { color: #BFDBFE; }
.hol-hint b { font-variant-numeric: tabular-nums; }
.hol-hint b.urgent { color: #FCD34D; }
.hol-ctrl { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; padding: 4px 10px calc(8px + var(--safe-bottom)); max-height: 58%; overflow-y: auto;
  background: linear-gradient(180deg, rgba(7, 13, 28, 0), rgba(7, 13, 28, .92) 24px); }
.hol-acts { display: grid; gap: 6px; }
.hol-acts.n2 { grid-template-columns: 1fr 1fr; }
.hol-acts.n3 { grid-template-columns: 1.2fr 1fr 1fr; }
.hol-acts.one { grid-template-columns: 1fr; }
.hol-acts .g-btn { min-height: 50px; font-size: 17px; padding: 0 6px; letter-spacing: 0; }
.hol-ctrl-note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--g-muted); text-align: center; display: flex; align-items: center; justify-content: center; gap: 4px; }
.hol-ctrl-note.warn { color: #FDE68A; }
.hol-ready-line { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--g-text-2); }
.hol-ready-line b { color: var(--g-gold-hi); font-variant-numeric: tabular-nums; }
.hol-ready-line .g-link { min-height: 32px; padding: 2px 4px; font-size: 13px; }
.hol-strip { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 12px; font: inherit; font-size: 13px; text-align: left; cursor: pointer;
  color: #FDE68A; background: rgba(68, 44, 8, .7); border: 1px solid rgba(214, 165, 71, .7); }
.hol-strip span { flex: 1; }
.hol-strip u { color: var(--g-gold-hi); font-size: 12px; }
.hol-pending { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 10px; padding: 10px 12px; border-radius: 14px; background: rgba(15, 26, 50, .92); border: 1px solid var(--g-gold-edge); }
.hol-pending b { display: block; font-size: 15px; }
.hol-pending small { display: block; font-size: 12px; color: var(--g-text-2); line-height: 1.5; overflow-wrap: anywhere; }
.hol-pending > .g-btn { grid-column: 1 / -1; min-height: 46px; font-size: 16px; }
.hol-ctrl-note .g-spin.small { width: 14px; height: 14px; border-width: 2px; display: inline-block; vertical-align: middle; }

/* TH-14 金额面板 */
.hol-amount .g-sheet-head { flex-direction: row; justify-content: center; }
.hol-x { position: absolute; right: 0; top: -4px; width: 36px !important; height: 36px !important; }
.hol-amt-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.hol-amt-stats > div { padding: 6px 4px; border-radius: 10px; text-align: center; background: rgba(10, 18, 36, .7); border: 1px solid rgba(214, 165, 71, .3); }
.hol-amt-stats small { display: block; font-size: 11px; color: var(--g-muted); }
.hol-amt-stats b { display: block; font-size: 17px; color: var(--g-gold-hi); font-variant-numeric: tabular-nums; }
.hol-amt-label { text-align: center; font-size: 12px; color: var(--g-muted); }
.hol-range { --fill: 0%; width: 100%; height: 30px; -webkit-appearance: none; appearance: none; background: transparent; }
.hol-range::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--g-gold) var(--fill), rgba(148, 163, 184, .3) var(--fill)); }
.hol-range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF4D2, var(--g-gold)); border: 2px solid #FFF0C2; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.hol-range::-moz-range-track { height: 8px; border-radius: 4px; background: rgba(148, 163, 184, .3); }
.hol-range::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--g-gold); }
.hol-range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--g-gold); border: 2px solid #FFF0C2; }
.hol-range-ends { display: flex; justify-content: space-between; margin-top: -6px; font-size: 11px; color: var(--g-muted); }
.hol-amt-add { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: baseline; gap: 2px 10px; padding: 8px 10px; border-radius: 12px; background: rgba(10, 18, 36, .7); border: 1px solid rgba(214, 165, 71, .35); }
.hol-amt-add span { font-size: 13px; color: var(--g-text-2); }
.hol-amt-add b { font-size: 26px; color: var(--g-gold-hi); font-variant-numeric: tabular-nums; }
.hol-amt-add small { grid-column: 1 / -1; text-align: center; font-size: 12px; color: var(--g-muted); }
@media (max-width: 359px) { .hol-quick.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-height: 640px) { .hol-amount { gap: 6px; } .hol-amount .g-fine { display: none; } .hol-amt-input { height: 44px; font-size: 22px; } .hol-step { width: 44px; height: 44px; } }

/* TH-20 / TH-21 结算面板：浮在桌面下半部，公共牌与摊牌仍可见；操作按钮在面板底部固定 */
.hol-result-host { position: absolute; z-index: 20; left: 8px; right: 8px; bottom: calc(6px + var(--safe-bottom)); max-height: 52%; overflow-y: auto; border-radius: 16px; overscroll-behavior: contain; box-shadow: 0 -8px 24px rgba(0, 0, 0, .55); }
.hol-table.res .hol-center { top: 15%; }
.hol-table.res .hol-seat.a-top { opacity: .55; }
.hol-table.res .hol-seat.empty { visibility: hidden; }
.hol-result-host:empty { display: none; }
.hol-res-actions { position: sticky; bottom: -10px; z-index: 1; display: flex; flex-direction: column; gap: 6px; margin: 0 -10px -10px; padding: 8px 10px 10px; background: linear-gradient(180deg, rgba(10, 17, 34, 0), #0A1122 30%); }
.hol-res-actions .g-btn.big { min-height: 50px; }
.hol-result { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 16px; background: linear-gradient(170deg, #1F2E4E, #0A1122); border: 2px solid var(--g-gold); }
.hol-res-top { display: flex; align-items: center; justify-content: space-between; }
.hol-res-top h2 { margin: 0; font-size: 18px; color: var(--g-gold-hi); letter-spacing: 2px; }
.hol-res-top .g-link { min-height: 32px; padding: 2px 4px; }
.hol-res-head { display: flex; flex-direction: column; align-items: center; gap: 0; text-align: center; }
.hol-res-head small { font-size: 12px; color: var(--g-text-2); }
.hol-res-head b { font-size: 36px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hol-res-head.lose b { color: var(--g-neg); }
.hol-res-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.hol-res-stats.two { grid-template-columns: 1fr 1fr; }
.hol-res-stats > div { padding: 6px 4px; border-radius: 10px; text-align: center; background: rgba(10, 18, 36, .7); border: 1px solid rgba(214, 165, 71, .3); min-width: 0; }
.hol-res-stats small { display: block; font-size: 11px; color: var(--g-muted); }
.hol-res-stats b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; }
.hol-res-detail td { font-size: 12px; padding: 5px 3px; }
.hol-res-detail td:first-child { text-align: left; color: var(--g-text-2); white-space: nowrap; }
.hol-res-detail td:nth-child(2) { font-weight: 800; white-space: nowrap; }
.hol-res-detail td:last-child { text-align: left; color: var(--g-muted); font-size: 11px; }
.hol-res-detail tr.sum td { border-top: 1px solid rgba(214, 165, 71, .4); font-weight: 800; }
.hol-res-pots summary { cursor: pointer; font-size: 13px; color: var(--g-gold-hi); min-height: 28px; }
.hol-res-pots p { margin: 4px 0; font-size: 12px; line-height: 1.5; color: var(--g-text-2); }
.hol-result .g-row.links { gap: 2px 10px; }
.hol-result .g-link { font-size: 13px; min-height: 36px; }

@media (max-height: 640px) { .hol-result-host { max-height: 56%; } .hol-table.res .hol-center { top: 10%; } .hol-res-head b { font-size: 30px; } }

/* 等待合法行动状态卡 */
.hol-wait { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; background: var(--g-glass); border: 1px solid rgba(96, 165, 250, .45); }
.hol-wait-ico { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--g-gold-hi); background: rgba(214, 165, 71, .12); border: 1px solid var(--g-gold-edge); }
.hol-wait b { display: block; font-size: 17px; color: var(--g-gold-hi); letter-spacing: 1px; }
.hol-wait small { display: block; font-size: 13px; color: var(--g-text-2); line-height: 1.45; }
.hol-wait.gold { border-color: var(--g-gold-edge); }
.hol-wait.muted { border-color: rgba(148, 163, 184, .4); }
.hol-wait.muted b { color: var(--g-text-2); }
.hol-acts.small .g-btn { min-height: 44px; font-size: 15px; }
/* 结算面板：准备下一手（保持当前筹码）与四个入口 */
.hol-ready-big { flex-direction: column; gap: 0; line-height: 1.15; }
.hol-ready-big small { font-size: 12px; font-weight: 600; letter-spacing: 0; opacity: .8; }
.hol-res-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.hol-res-links button { min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 12px; font: inherit; font-size: 12px; color: var(--g-text-2); cursor: pointer;
  background: linear-gradient(180deg, rgba(31, 46, 78, .9), rgba(13, 22, 42, .9)); border: 1px solid rgba(214, 165, 71, .3); }
.hol-res-links button svg { color: var(--g-gold-hi); }
.hol-res-links button:disabled { opacity: .45; cursor: default; }
.hol-res-close { align-self: center; min-height: 32px; font-size: 13px; }
/* 高屏：结算面板放在桌面下方（不遮住席位），桌面切换为紧凑布局：小一号公共牌、席位上移、本人区压到底边 */
@media (min-height: 720px) {
  .hol-table.res .hol-result-host { position: relative; left: auto; right: auto; bottom: auto; flex: 0 1 auto; max-height: 47%; margin: 0 8px calc(6px + var(--safe-bottom)); }
  .hol-table.res .hol-felt-wrap { padding-top: 14px; min-height: 290px; }
  .hol-table.res { --hol-card-md: 30px; }
  .hol-table.res .hol-seat.a-top { opacity: 1; }
  .hol-table.res .hol-seat.a-lt, .hol-table.res .hol-seat.a-rt { top: 3%; }
  .hol-table.res .hol-seat.a-lm, .hol-table.res .hol-seat.a-rm { top: 45%; }
  .hol-table.res .hol-center { top: 21%; gap: 4px; }
  .hol-table.res .hol-pot { padding: 2px 10px; font-size: 13px; }
  .hol-table.res .hol-pot b { font-size: 15px; }
  .hol-table.res .hol-awards, .hol-table.res .hol-last, .hol-table.res .hol-flags { display: none; }
  .hol-table.res .hol-hole .hol-card.sm { --w: 18px; }
  .hol-table.res .hol-me { bottom: -14px; gap: 4px; }
  .hol-table.res .hol-me .hol-ava { width: 44px; height: 44px; }
  .hol-table.res .hol-me .hol-card.xl { --w: 34px; }
  .hol-table.res .hol-me .hol-tag:not(.win) { display: none; }
}

/* ---- styles/hol/sheets.css ---- */
/* TH-15 确认、TH-19 池详情、菜单与短语 */
.hol-confirm .g-sheet-head b { color: var(--g-gold-hi); font-variant-numeric: tabular-nums; }
.hol-pot-card { display: flex; flex-direction: column; gap: 3px; padding: 10px; border-radius: 12px; background: rgba(10, 18, 36, .7); border: 1.5px solid var(--g-gold-edge); }
.hol-pot-card.side { border-color: rgba(96, 165, 250, .6); border-style: dashed; }
.hol-pot-card.ret { border-color: rgba(148, 163, 184, .5); }
.hol-pot-head { display: flex; align-items: center; gap: 8px; }
.hol-pot-head b { font-size: 15px; color: var(--g-gold-hi); }
.hol-pot-card.side .hol-pot-head b { color: #BFDBFE; }
.hol-pot-head span:nth-child(2) { font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; margin-right: auto; }
.hol-pot-card small { font-size: 12px; line-height: 1.5; color: var(--g-text-2); }
.hol-menu { display: flex; flex-direction: column; gap: 6px; }
.hol-menu-item { min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 12px; font: inherit; font-size: 15px; text-align: left; color: var(--g-white); cursor: pointer; background: rgba(10, 18, 36, .65); border: 1px solid rgba(214, 165, 71, .28); }
.hol-menu-item span { flex: 1; }
.hol-menu-item svg:first-child { color: var(--g-gold-hi); }
.hol-menu-item svg:last-child { color: var(--g-muted); }
.hol-menu-item:disabled { opacity: .45; }
.hol-phrases { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hol-phrases .hol-quick-btn { font-size: 14px; font-weight: 600; }
.hol-topup .hol-amt-input { max-width: none; }

/* ---- styles/hol/records.css ---- */
/* TH-25 战绩 */
.hol-recs { display: flex; flex-direction: column; gap: 8px; }
.hol-rec { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 10px 30px 10px 12px; border-radius: 14px; text-align: left; font: inherit; color: var(--g-white); cursor: pointer; background: var(--g-glass); border: 1px solid rgba(214, 165, 71, .35); }
.hol-rec.pending { border-style: dashed; }
.hol-rec-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.hol-rec-head b { font-size: 14px; }
.hol-rec-head small { margin-left: auto; font-size: 11px; color: var(--g-muted); }
.hol-rec-badge { padding: 1px 7px; border-radius: 6px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.hol-rec-badge.win { color: #052E16; background: var(--g-pos); }
.hol-rec-badge.lose { color: #F1F5F9; background: #64748B; }
.hol-rec-badge.draw { color: #0C4A6E; background: #BAE6FD; }
.hol-rec-badge.aborted, .hol-rec-badge.pending { color: #BFDBFE; border: 1px solid rgba(96, 165, 250, .6); }
.hol-rec-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--g-text-2); align-items: center; }
.hol-rec-net { display: flex; align-items: baseline; gap: 8px; }
.hol-rec-net small { font-size: 11px; color: var(--g-muted); }
.hol-rec-net b { font-size: 17px; font-variant-numeric: tabular-nums; }
.hol-rec-go { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--g-muted); }

/* TH-25 详情与回放 */
.hol-hd-head .g-sec-head { margin-bottom: 4px; }
.hol-hd-head .g-sec-head h2, .hol-sub .g-sec-head h2 { margin: 0; font-size: 17px; color: var(--g-gold-hi); font-weight: 800; }
.hol-hd-cards { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 8px 0; }
.hol-hd-cards small { display: block; font-size: 12px; color: var(--g-muted); margin-bottom: 4px; }
.hol-hd-players { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.hol-hd-row { display: grid; grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 10px; background: rgba(10, 18, 36, .55); }
.hol-hd-row.me { border: 1px solid var(--g-gold-edge); }
.hol-hd-row.win { background: rgba(214, 165, 71, .14); }
.hol-hd-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hol-hd-row small { font-size: 12px; color: var(--g-text-2); }
.hol-hd-row b { font-variant-numeric: tabular-nums; font-size: 14px; }
.hol-hd-acts { display: flex; flex-direction: column; gap: 8px; }
.hol-hd-acts .g-btn { min-height: 50px; font-size: 17px; }
.hol-replay { display: flex; flex-direction: column; gap: 8px; }
.hol-replay .g-sec-head { margin-bottom: 0; }
.hol-rp-stage { display: flex; flex-direction: column; gap: 6px; }
.hol-rp-board { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border-radius: 14px; background: radial-gradient(ellipse at 50% 40%, var(--g-felt-hi), var(--g-felt-lo)); border: 2px solid #C99A3E; }
.hol-rp-board small { font-size: 12px; color: var(--g-gold-hi); }
.hol-rp-seats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.hol-rp-seat { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; padding: 5px 6px; border-radius: 10px; background: rgba(10, 18, 36, .6); border: 1px solid transparent; }
.hol-rp-seat b { font-size: 13px; }
.hol-rp-seat small { width: 100%; font-size: 11px; color: var(--g-text-2); }
.hol-rp-seat.me { border-color: var(--g-gold-edge); }
.hol-rp-seat.acting { border-color: var(--g-gold-hi); box-shadow: 0 0 8px rgba(246, 216, 138, .4); }
.hol-rp-seat.folded { opacity: .55; }
.hol-rp-text { margin: 0; min-height: 22px; text-align: center; font-size: 14px; color: var(--g-gold-hi); }
.hol-rp-bar { display: flex; align-items: center; gap: 8px; }
.hol-rp-bar .hol-range { flex: 1; }
.hol-rp-ctrl { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 6px; align-items: center; }
.hol-rp-ctrl .g-btn { min-height: 44px; font-size: 15px; padding: 0 6px; letter-spacing: 0; }
@media (max-width: 359px) { .hol-rp-ctrl { grid-template-columns: 1fr 1fr 1fr; } .hol-rp-ctrl .g-seg { grid-column: 1 / -1; justify-self: center; } .hol-rp-seats { grid-template-columns: 1fr; } }

/* TH-24 桌会话 */
.hol-ses-head { display: flex; flex-direction: column; gap: 10px; }
.hol-ses-ids { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr auto; gap: 6px; align-items: start; }
.hol-ses-ids > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hol-ses-ids small, .hol-ses-times small, .hol-ses-metrics small { font-size: 11px; color: var(--g-muted); }
.hol-ses-ids b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hol-copy { display: inline-flex; align-items: center; gap: 4px; padding: 0; min-height: 24px; white-space: nowrap; background: none; border: 0; color: var(--g-white); font-size: 12px; cursor: pointer; text-align: left; }
.hol-copy svg { color: var(--g-gold-hi); }
.hol-ses-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 8px 4px; border-radius: 12px; background: rgba(10, 18, 36, .6); border: 1px solid rgba(214, 165, 71, .35); }
.hol-ses-metrics > div { text-align: center; min-width: 0; }
.hol-ses-metrics b { display: block; font-size: 17px; color: var(--g-gold-hi); font-variant-numeric: tabular-nums; }
.hol-ses-metrics b.g-pos { color: var(--g-pos); }
.hol-ses-metrics b.g-neg { color: var(--g-neg); }
.hol-ses-times { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.hol-ses-times b { display: block; font-size: 12px; font-weight: 600; }
.hol-sespage .g-tabs { margin: 0; }
.hol-ses-hands { display: flex; flex-direction: column; gap: 4px; }
.hol-ses-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 14px; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 10px; font: inherit; color: var(--g-white); text-align: left; cursor: pointer; background: rgba(10, 18, 36, .6); border: 1px solid rgba(214, 165, 71, .2); }
.hol-ses-no { display: flex; flex-direction: column; font-size: 13px; font-weight: 800; }
.hol-ses-no small { font-size: 11px; font-weight: 500; color: var(--g-muted); }
.hol-ses-cards { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow: hidden; }
.hol-ses-cards small { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--g-gold-hi); }
.hol-ses-cards small .g-tag { height: 16px; font-size: 10px; font-style: normal; padding: 0 5px; }
.hol-ses-res { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.hol-ses-res b { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hol-sep { display: inline-block; width: 1px; height: 18px; margin: 0 2px; background: rgba(214, 165, 71, .5); }
.hol-ses-row svg { color: var(--g-muted); }
.hol-flow-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.hol-flow-list li { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; padding: 8px; border-radius: 10px; background: rgba(10, 18, 36, .6); }
.hol-flow-list li > div { display: flex; flex-direction: column; min-width: 0; }
.hol-flow-list li small { font-size: 11px; color: var(--g-muted); }
.hol-flow-list li > b { font-size: 14px; font-variant-numeric: tabular-nums; }
.hol-flow-ico { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; color: #fff; }
.hol-flow-ico.in { background: #2563EB; }
.hol-flow-ico.out { background: var(--g-gold); color: var(--g-gold-ink); }
@media (max-width: 359px) { .hol-ses-ids { grid-template-columns: 1fr 1fr; } .hol-ses-metrics b { font-size: 15px; } .hol-ses-row { grid-template-columns: 36px minmax(0, 1fr) auto 12px; } }

.hol-ses-acts { display: flex; flex-direction: column; gap: 0; margin-top: 2px; }
.hol-ses-cards .hol-ses-acts small { display: block; font-size: 11px; line-height: 1.4; color: var(--g-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hol-flow-amt { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; text-align: right; }
.hol-flow-amt small { font-size: 11px; color: var(--g-muted); }

/* ---- styles/hol/effects.css ---- */
/* 动效：底牌发出、公共牌翻入、下注筹码轻动、获胜金边；减少动态效果时只保留一次淡入 */
.hol-card.deal { animation: hol-deal .45s cubic-bezier(.2, .8, .3, 1) 1 both; }
.hol-bet.fresh { animation: hol-bet .25s ease-out 1 both; }
.hol-res-head.anim b { animation: hol-glow .6s ease-out 1 both; }
.hol-hint b.urgent { animation: hol-pulse 1s ease-in-out infinite; }
.hol-mini-seat.on { animation: g-fade .3s ease-out 1 both; }
@keyframes hol-deal { 0% { transform: translateY(-24px) rotateY(90deg) scale(.8); opacity: 0; } 55% { transform: rotateY(90deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes hol-bet { from { transform: scale(.6); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes hol-glow { 0% { text-shadow: 0 0 0 rgba(246, 216, 138, 0); } 50% { text-shadow: 0 0 18px rgba(246, 216, 138, .9); } 100% { text-shadow: none; } }
@keyframes hol-pulse { 50% { opacity: .5; } }
.hol-table.no-anim .hol-card.deal, .hol-table.no-anim .hol-bet.fresh { animation: g-fade .2s ease-out 1 both !important; }
html.reduce-motion .hol-card.deal { animation: g-fade .2s ease-out 1 both !important; }

/* ---- styles/tdh/index.css ---- */
/* 推倒胡麻将（界面 UI 第五阶段 MJ-01—MJ-25）样式模块。全部选择器带 .tdh- 前缀，只作用于推倒胡页面；
   旧样式表里已有 .mj-* / .mjt-* 类名，因此本模块改用 .tdh-（推倒胡）前缀，避免同名冲突。
   通用的厅堂背景、顶栏、按钮、面板、弹层来自 styles/game/（.g-*），与斗地主、百家乐、德州同一套视觉。
   tokens   色板补充与牌面尺寸
   tiles    陶瓷牌面（万/筒/条/字）、牌背、副露、赢家结构
   lobby    MJ-01 大厅、MJ-03 创建、MJ-04 邀请、MJ-05 准备（四人方桌框架）、MJ-02 规则
   table    MJ-06—MJ-18 牌桌骨架：信息条、方桌、三家对手、牌河与方位盘、本人副露与手牌
   actions  MJ-07—MJ-18 操作区、响应条、倒计时环、私下提示、托管、听牌提示
   result   MJ-19—MJ-23 结算面板
   records  MJ-24 战绩与详情、MJ-25 回放与承诺
   effects  动效与“减少动态效果” */
/* ---- styles/tdh/tokens.css ---- */
/* 推倒胡色板补充：象牙白牌面、翡翠绿牌背、万字红、筒蓝、条绿 */
.g-screen.tdh-sub, .g-screen.tdh-table {
  --tdh-ivory: #FBF8EF; --tdh-ivory-2: #EFE6CF; --tdh-ivory-3: #DDD1B2;
  --tdh-jade: #1E8A4C; --tdh-jade-hi: #34B26A; --tdh-jade-lo: #0E5A2F;
  --tdh-red: #C62828; --tdh-blue: #1D4ED8; --tdh-green: #15803D; --tdh-ink: #1F2937;
  --tdh-river: clamp(14px, 4.4vw, 19px);
  --tdh-side: clamp(48px, 14vw, 62px);
}
.g-screen.tdh-sub .g-body, .g-screen.tdh-table .g-body { scrollbar-width: none; }
.tdh-sub .g-practice-flag.mini { padding: 2px 8px; font-size: 11px; }
.tdh-sub .g-notice, .tdh-table .g-notice { flex-direction: row; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.6; color: var(--g-text-2); }
.tdh-sub .g-notice > svg { flex: 0 0 auto; margin-top: 2px; color: var(--g-gold-hi); }
.tdh-sub .g-notice.warn > svg { color: var(--g-warn); }

/* ---- styles/tdh/tiles.css ---- */
/* 牌面：象牙白陶瓷正面 + 翡翠绿底边（立体感）；文字/点数始终可读，颜色只作辅助 */
.tdh-tile { --w: 34px; position: relative; flex: 0 0 auto; width: var(--w); height: calc(var(--w) * 1.36); margin: 0 0 calc(var(--w) * .12); padding: 0; border: 0;
  border-radius: calc(var(--w) * .16); display: grid; place-items: center; color: var(--tdh-ink); font-family: "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--tdh-ivory) 55%, var(--tdh-ivory-2) 100%);
  box-shadow: inset 0 -1px 0 var(--tdh-ivory-3), 0 calc(var(--w) * .06) 0 var(--tdh-ivory-3), 0 calc(var(--w) * .12) 0 var(--tdh-jade), 0 calc(var(--w) * .14) 0 var(--tdh-jade-lo), 0 4px 8px rgba(0, 0, 0, .35);
  transition: transform .12s ease, box-shadow .12s ease; -webkit-tap-highlight-color: transparent; }
.tdh-tile.xl { --w: 52px; }
.tdh-tile.lg { --w: 44px; }
.tdh-tile.md { --w: 34px; }
.tdh-tile.sm { --w: 26px; }
.tdh-tile.xs { --w: 18px; border-radius: 3px; }
button.tdh-tile { cursor: pointer; }
button.tdh-tile:focus-visible { outline: 2px solid var(--g-gold-hi); outline-offset: 2px; }
.tdh-tile.back { background: linear-gradient(180deg, var(--tdh-jade-hi), var(--tdh-jade) 60%, var(--tdh-jade-lo));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 calc(var(--w) * .1) 0 var(--tdh-ivory-2), 0 calc(var(--w) * .13) 0 var(--tdh-ivory-3), 0 3px 6px rgba(0, 0, 0, .35); }
.tdh-tile .f { display: flex; align-items: center; justify-content: center; line-height: 1; pointer-events: none; }
/* 万：汉字点数 + 红色“萬” */
.tdh-tile .f.wan { flex-direction: column; gap: calc(var(--w) * .02); }
.tdh-tile .f.wan b { font-size: calc(var(--w) * .4); font-weight: 900; color: #111827; }
.tdh-tile .f.wan i { font-style: normal; font-size: calc(var(--w) * .44); font-weight: 900; color: var(--tdh-red); }
/* 筒、条：3×3 点位 */
.tdh-tile .f.pips { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); width: calc(var(--w) * .8); height: calc(var(--w) * 1.04); place-items: center; }
.tdh-tile .f.pips .p { display: block; }
.tdh-tile.s-tong .f.pips .p { width: calc(var(--w) * .22); height: calc(var(--w) * .22); border-radius: 50%; background: radial-gradient(circle, currentColor 0 28%, #FFF 30% 44%, currentColor 46% 100%); }
.tdh-tile.s-tong .f.pips.n1 .p { width: calc(var(--w) * .62); height: calc(var(--w) * .62); grid-column: 1 / 4 !important; grid-row: 1 / 4 !important;
  background: radial-gradient(circle, var(--tdh-red) 0 16%, #FFF 18% 30%, var(--tdh-green) 32% 46%, #FFF 48% 58%, var(--tdh-blue) 60% 100%); }
.tdh-tile.s-tiao .f.pips .p { width: calc(var(--w) * .1); height: calc(var(--w) * .27); border-radius: calc(var(--w) * .05); background: linear-gradient(180deg, currentColor 0 42%, #FFF 44% 56%, currentColor 58%); }
.tdh-tile.s-tiao .f.pips.n1 .p { width: calc(var(--w) * .16); height: calc(var(--w) * .8); grid-row: 1 / 4 !important; }
.tdh-tile .f.pips .p.c0 { color: var(--tdh-green); }
.tdh-tile .f.pips .p.c1 { color: var(--tdh-blue); }
.tdh-tile.s-tiao .f.pips .p.c1 { color: var(--tdh-green); }
.tdh-tile .f.pips .p.c2 { color: var(--tdh-red); }
/* 字牌 */
.tdh-tile .f.honor b { font-size: calc(var(--w) * .58); font-weight: 900; color: #111827; }
.tdh-tile .f.honor.z5 b { color: var(--tdh-red); }
.tdh-tile .f.honor.z6 b { color: var(--tdh-green); }
.tdh-tile .f.honor .white-box { display: block; width: calc(var(--w) * .52); height: calc(var(--w) * .7); border: max(2px, calc(var(--w) * .07)) solid var(--tdh-blue); border-radius: calc(var(--w) * .06); box-shadow: inset 0 0 0 max(1px, calc(var(--w) * .03)) #FFF, inset 0 0 0 max(2px, calc(var(--w) * .06)) rgba(29, 78, 216, .5); }
/* 小号（牌河）：文字牌面 */
.tdh-tile .f.txt { flex-direction: column; gap: 0; }
.tdh-tile .f.txt b { font-size: calc(var(--w) * .58); font-weight: 900; color: #111827; font-family: system-ui, sans-serif; }
.tdh-tile .f.txt i { font-style: normal; font-size: calc(var(--w) * .44); font-weight: 800; }
.tdh-tile.s-wan .f.txt i { color: var(--tdh-red); }
.tdh-tile.s-tong .f.txt i { color: var(--tdh-blue); }
.tdh-tile.s-tiao .f.txt i { color: var(--tdh-green); }
.tdh-tile.s-honor .f.txt b { font-family: "Songti SC", "Noto Serif SC", serif; font-size: calc(var(--w) * .66); }
/* 状态 */
.tdh-tile.sel { transform: translateY(calc(var(--w) * -.22)); box-shadow: 0 0 0 2px var(--g-gold-hi), 0 calc(var(--w) * .12) 0 var(--tdh-jade), 0 0 14px rgba(246, 216, 138, .65); }
.tdh-tile.glow { box-shadow: 0 0 0 2px var(--g-gold-hi), 0 calc(var(--w) * .12) 0 var(--tdh-jade), 0 0 12px 2px rgba(246, 216, 138, .75); }
.tdh-tile.hu { box-shadow: 0 0 0 2px #FDE68A, 0 calc(var(--w) * .12) 0 var(--tdh-jade), 0 0 14px 3px rgba(251, 191, 36, .8); }
.tdh-tile.taken { opacity: .42; filter: grayscale(.8); }
.tdh-tile.dim { opacity: .55; filter: saturate(.6); }
.tdh-tile.drawn::after { content: ''; position: absolute; left: 50%; bottom: calc(var(--w) * -.38); width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--g-gold-hi); box-shadow: 0 0 6px var(--g-gold-hi); }
/* 副露：碰 3 张、杠 4 张，来源方位文字标签 */
.tdh-meld { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; flex: 0 0 auto; }
.tdh-meld-tiles { display: flex; gap: 1px; position: relative; }
.tdh-meld-tag { font-size: 10px; line-height: 1.2; color: var(--g-gold-hi); white-space: nowrap; }
.tdh-meld.concealed .tdh-meld-tag { color: var(--g-text-2); }
.tdh-meld.pending .tdh-meld-tiles > .tdh-tile:last-child { margin-left: 3px; transform: translateY(-30%) rotate(6deg); }
.tdh-meld.pending .tdh-meld-tag { color: var(--g-warn); font-weight: 800; }
/* 赢家结构 */
.tdh-reveal { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tdh-reveal-groups { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 6px; }
.tdh-grp { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.tdh-grp-tiles { display: flex; gap: 1px; }
.tdh-grp > small { position: relative; min-width: 100%; text-align: center; padding-top: 3px; font-size: 11px; color: var(--g-text-2); border-top: 1px solid rgba(246, 216, 138, .45); }
.tdh-grp.declared > small { color: var(--g-gold-hi); }
.tdh-grp.jiang > small { color: #A7F3D0; }
.tdh-wintile { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tdh-wintile span { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--g-gold-ink); background: linear-gradient(180deg, var(--g-gold-hi), var(--g-gold)); }

/* ---- styles/tdh/lobby.css ---- */
/* MJ-01/03/04/05 四人方桌框架：上对家、左上家、右下家、本人在下；四边牌墙为纯装饰牌背 */
.tdh-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.tdh-hero h2 { margin: 0; font-size: 30px; font-weight: 900; letter-spacing: 3px; color: transparent; background: linear-gradient(180deg, #FFF4D2, var(--g-gold-hi) 45%, var(--g-gold)); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); }
.tdh-pill { padding: 4px 16px; border-radius: 999px; font-size: 13px; color: var(--g-white); background: rgba(15, 23, 42, .75); border: 1px solid var(--g-gold-edge); }
.tdh-frame { position: relative; padding: 32px 30px 44px; }
.tdh-felt { position: relative; min-height: 220px; padding: 72px 30px 64px; display: grid; place-items: center; border-radius: 26px;
  border: 4px solid transparent; background: radial-gradient(ellipse at 50% 42%, var(--g-felt-hi), var(--g-felt) 58%, var(--g-felt-lo)) padding-box, linear-gradient(160deg, #FCE7A8, var(--g-gold) 35%, var(--g-gold-lo) 70%, #F6D88A) border-box;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .45), 0 10px 26px rgba(0, 0, 0, .45); }
.tdh-wall { position: absolute; display: flex; gap: 1px; pointer-events: none; opacity: .9; }
.tdh-wall i { display: block; width: 12px; height: 16px; border-radius: 2px; background: linear-gradient(180deg, var(--tdh-jade-hi), var(--tdh-jade)); box-shadow: 0 2px 0 var(--tdh-ivory-2), 0 3px 0 var(--tdh-ivory-3); }
.tdh-wall.ps-t { top: 46px; left: 50%; transform: translateX(-50%); }
.tdh-wall.ps-b { bottom: 42px; left: 50%; transform: translateX(-50%); }
.tdh-wall.ps-l, .tdh-wall.ps-r { top: 50%; transform: translateY(-50%); flex-direction: column; }
.tdh-wall.ps-l { left: 10px; }
.tdh-wall.ps-r { right: 10px; }
.tdh-wall.ps-l i, .tdh-wall.ps-r i { width: 16px; height: 9px; box-shadow: 2px 0 0 var(--tdh-ivory-2); }
.tdh-fcenter { position: relative; z-index: 1; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 10px 14px; border-radius: 18px; background: radial-gradient(ellipse, rgba(8, 30, 18, .72), rgba(8, 30, 18, .35) 70%, transparent); }
.tdh-fcenter small { font-size: 12px; color: var(--g-text-2); }
.tdh-cap { font-size: 12px; color: var(--g-gold-hi) !important; letter-spacing: 1px; }
.tdh-code { font-size: 26px; font-weight: 900; letter-spacing: 4px; color: var(--g-white); font-family: ui-monospace, monospace; }
.tdh-count { font-size: 15px; color: var(--g-gold-hi); }
.tdh-count.big { font-size: 32px; }
.tdh-suits { display: flex; gap: 3px; }
.tdh-deco { display: flex; gap: 2px; opacity: .95; }
.tdh-fseat { position: absolute; z-index: 2; width: 74px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.tdh-fseat.ps-t { top: 0; left: 50%; transform: translateX(-50%); }
.tdh-fseat.ps-b { bottom: 0; left: 50%; transform: translateX(-50%); }
.tdh-fseat.ps-l, .tdh-fseat.ps-r { top: 50%; transform: translateY(-50%); }
.tdh-fseat.ps-l { left: -6px; }
.tdh-fseat.ps-r { right: -6px; }
.tdh-ava { width: 52px; height: 52px; padding: 3px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, #FCE7A8, var(--g-gold) 50%, var(--g-gold-lo)); box-shadow: 0 4px 10px rgba(0, 0, 0, .45); }
.tdh-ava .avatar { width: 46px !important; height: 46px !important; border-radius: 50%; overflow: hidden; }
.tdh-ava.ok { background: linear-gradient(160deg, #BBF7D0, #22C55E 55%, #15803D); }
.tdh-fseat.vacant .tdh-ava { background: rgba(15, 23, 42, .7); border: 2px dashed rgba(203, 213, 225, .45); box-shadow: none; }
.tdh-fseat.vacant .tdh-ava span { font-size: 20px; font-weight: 800; color: var(--g-muted); }
.tdh-fname { max-width: 100%; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--g-white); background: rgba(10, 18, 36, .85); border: 1px solid var(--g-gold-edge); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdh-fseat.vacant .tdh-fname { color: var(--g-muted); border-color: rgba(148, 163, 184, .35); }
.tdh-fseat.me .tdh-fname { color: var(--g-gold-ink); background: linear-gradient(180deg, var(--g-gold-hi), var(--g-gold)); }
.tdh-fsub { font-size: 11px; color: var(--g-text-2); }
.tdh-marker { position: absolute; top: -4px; right: 6px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px; font-size: 11px; font-weight: 900; line-height: 20px; color: var(--g-gold-ink); background: linear-gradient(180deg, var(--g-gold-hi), var(--g-gold)); box-shadow: 0 2px 4px rgba(0, 0, 0, .4); }
.tdh-tag { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; color: var(--g-text-2); background: rgba(15, 23, 42, .78); border: 1px solid rgba(148, 163, 184, .4); }
.tdh-tag.ok { color: #DCFCE7; background: linear-gradient(180deg, #16A34A, #15803D); border-color: #4ADE80; }
.tdh-tag.wait { color: #FEF3C7; background: rgba(120, 72, 6, .85); border-color: #F59E0B; }
.tdh-tag.gold { color: var(--g-gold-ink); background: linear-gradient(180deg, var(--g-gold-hi), var(--g-gold)); border-color: #FDE68A; }
.tdh-tag.off { color: var(--g-muted); background: rgba(30, 41, 59, .85); }
/* 倒计时环 */
.tdh-ring { --p: 1; position: relative; flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  background: conic-gradient(var(--g-gold-hi) calc(var(--p) * 360deg), rgba(30, 41, 59, .9) 0); box-shadow: 0 0 0 2px rgba(214, 165, 71, .35), 0 4px 12px rgba(0, 0, 0, .45); }
.tdh-ring::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #1E2B4A, #0B1328); }
.tdh-ring b, .tdh-ring small { position: relative; }
.tdh-ring b { font-size: 22px; font-weight: 900; color: var(--g-white); font-variant-numeric: tabular-nums; }
.tdh-ring small { font-size: 10px; color: var(--g-gold-hi); margin-top: 1px; }
.tdh-ring.urgent { background: conic-gradient(#F87171 calc(var(--p) * 360deg), rgba(30, 41, 59, .9) 0); }
.tdh-ring.urgent b { color: #FCA5A5; }
/* 参数条 */
.tdh-params { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 10px 4px; border-radius: 16px; background: var(--g-glass); border: 1px solid var(--g-gold-edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.tdh-params > div { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 0 2px; }
.tdh-params > div + div { border-left: 1px solid rgba(148, 163, 184, .25); }
.tdh-params small { font-size: 12px; color: var(--g-text-2); white-space: nowrap; }
.tdh-params b { font-size: 20px; font-weight: 900; color: var(--g-gold-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tdh-params .practice b { font-size: 14px; color: #BFDBFE; }
.tdh-params > p { grid-column: 1 / -1; margin: 8px 8px 0; padding-top: 8px; border-top: 1px solid rgba(148, 163, 184, .2); font-size: 12px; line-height: 1.5; color: var(--g-muted); text-align: center; }
.tdh-params.slim { padding: 6px 2px; border-radius: 12px; }
.tdh-params.slim small { font-size: 11px; }
.tdh-params.slim b { font-size: 15px; }
.tdh-params.slim .practice b { font-size: 12px; }
/* 规则一句话、说明列表、操作 */
.tdh-rule-line { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; }
.tdh-rule-line > svg { flex: 0 0 auto; color: var(--g-gold-hi); margin-top: 2px; }
.tdh-rule-line p { margin: 2px 0 0; font-size: 13px; line-height: 1.6; color: var(--g-text-2); }
.tdh-rule-line b { color: var(--g-gold-hi); font-size: 14px; }
.tdh-notes { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.6; color: var(--g-text-2); }
.tdh-notes li::marker { color: var(--g-gold); }
.tdh-actions { display: flex; flex-direction: column; gap: 10px; }
.tdh-ack-demo { display: flex; justify-content: center; align-items: flex-end; gap: 1px; flex-wrap: wrap; }
.tdh-ack-demo > i { width: 8px; }
/* MJ-04 邀请 */
.tdh-inviter { display: flex; align-items: center; gap: 12px; padding: 12px; }
.tdh-inviter > div:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tdh-inviter b { font-size: 17px; color: var(--g-gold-hi); }
.tdh-inviter b span { color: var(--g-white); font-weight: 600; font-size: 14px; }
.tdh-inviter small { font-size: 12px; color: var(--g-muted); }
.tdh-inviter .avatar { border-radius: 50%; box-shadow: 0 0 0 2px var(--g-gold); }
.tdh-room-rules { padding: 12px; }
.tdh-rule-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tdh-rule-cols > div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 8px; border-radius: 12px; background: rgba(10, 18, 36, .5); }
.tdh-rule-cols svg { grid-row: 1 / 3; color: var(--g-gold-hi); }
.tdh-rule-cols b { font-size: 14px; color: var(--g-white); }
.tdh-rule-cols small { font-size: 11px; color: var(--g-muted); line-height: 1.4; }
.tdh-join { flex-direction: column; gap: 0; line-height: 1.2; }
.tdh-join small { font-size: 12px; font-weight: 600; letter-spacing: 0; opacity: .85; }
.tdh-invite-fail { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.tdh-invite-fail h3 { margin: 0; font-size: 18px; color: var(--g-gold-hi); }
.tdh-invite-fail > svg { color: var(--g-warn); }
/* MJ-05 准备 */
.tdh-codechip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 2px 12px; border-radius: 999px; cursor: pointer; color: var(--g-text-2); font: inherit; font-size: 12px; background: rgba(10, 18, 36, .75); border: 1px solid var(--g-gold-edge); }
.tdh-codechip b { font-size: 18px; letter-spacing: 3px; color: var(--g-white); font-family: ui-monospace, monospace; }
.tdh-readyline { font-size: 14px; color: var(--g-text-2); }
.tdh-readyline b { font-size: 26px; color: var(--g-gold-hi); padding: 0 2px; }
.tdh-status { margin: 0; font-size: 14px; color: var(--g-white); font-weight: 700; }
.tdh-room .g-foot { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.tdh-room .g-foot > small { text-align: center; font-size: 11px; color: var(--g-muted); }
.tdh-room-acts { display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 8px; align-items: center; }
.tdh-room-acts .g-btn:not(.big) { padding: 0 8px; font-size: 15px; letter-spacing: 0; }
.tdh-room-acts .g-btn.big { font-size: 18px; letter-spacing: 2px; }
.tdh-room.fresh .tdh-room-acts .g-btn.blue:first-child { box-shadow: 0 0 0 2px var(--g-gold-hi), 0 0 14px rgba(246, 216, 138, .55); }
/* MJ-02 规则 */
.tdh-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(10, 18, 36, .7); border: 1px solid var(--g-gold-edge); }
.tdh-tabbtn { min-height: 40px; border: 0; border-radius: 10px; cursor: pointer; font: inherit; font-size: 15px; font-weight: 800; color: var(--g-text-2); background: transparent; }
.tdh-tabbtn.on { color: var(--g-gold-ink); background: linear-gradient(180deg, var(--g-gold-hi), var(--g-gold)); }
.tdh-rules-body { display: flex; flex-direction: column; gap: 12px; }
.tdh-rule-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.tdh-rule-card h3 { margin: 0; font-size: 16px; color: var(--g-gold-hi); }
.tdh-rule-card p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--g-text-2); }
.tdh-struct { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 6px; padding: 10px 6px; border-radius: 14px; background: radial-gradient(ellipse, var(--g-felt-hi), var(--g-felt) 70%); }
.tdh-suitrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tdh-suitrow > div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tdh-suitrow small { font-size: 11px; color: var(--g-muted); }
.tdh-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.6; color: var(--g-text-2); }
.tdh-steps b { color: var(--g-gold-hi); }
.tdh-btnrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tdh-btnrow .tdh-op { height: 40px; font-size: 18px; }
.tdh-formula { display: flex; align-items: center; justify-content: center; gap: 10px; }
.tdh-formula > div { display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 6px 10px; border-radius: 12px; background: rgba(10, 18, 36, .6); border: 1px solid rgba(148, 163, 184, .3); }
.tdh-formula > div.gold { border-color: var(--g-gold); }
.tdh-formula small { font-size: 11px; color: var(--g-muted); }
.tdh-formula b { font-size: 22px; color: var(--g-gold-hi); }
.tdh-formula i { font-style: normal; font-size: 20px; color: var(--g-text-2); }
.tdh-settle { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tdh-settle span { padding: 4px 10px; border-radius: 999px; font-size: 14px; font-weight: 800; color: var(--g-text-2); background: rgba(10, 18, 36, .6); border: 1px solid rgba(148, 163, 184, .3); }
@media (max-width: 359px) {
  .tdh-frame { padding: 30px 24px 42px; }
  .tdh-fseat { width: 62px; }
  .tdh-ava { width: 44px; height: 44px; }
  .tdh-ava .avatar { width: 38px !important; height: 38px !important; }
  .tdh-felt { padding: 66px 22px 60px; }
  .tdh-deco { display: none; }
  .tdh-code { font-size: 22px; letter-spacing: 2px; }
  .tdh-params b { font-size: 17px; }
  .tdh-room-acts { grid-template-columns: 1fr 1.3fr 1fr; gap: 6px; }
  .tdh-room-acts .g-btn:not(.big) { font-size: 13px; }
  .tdh-room-acts .g-btn.big { font-size: 16px; letter-spacing: 0; padding: 0 6px; }
}

/* ---- styles/tdh/table.css ---- */
/* MJ-06—MJ-18 牌桌骨架：墨绿方桌金边；上对家、左上家、右下家；中央四家牌河 + 方位盘；本人副露与手牌在桌面下部 */
.tdh-table .tdh-table-body { padding: 0 8px calc(10px + var(--safe-bottom, 0px)); gap: 8px; }
.tdh-topwrap { flex: 0 0 auto; }
.tdh-net { display: inline-grid; place-items: center; width: 26px; color: var(--g-pos); }
.tdh-net:not(.online) { color: var(--g-warn); animation: tdh-blink 1s ease-in-out infinite; }
.tdh-info { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 12px; font-size: 12px; color: var(--g-text-2); }
.tdh-info b { color: var(--g-gold-hi); font-weight: 800; }
.tdh-info .warn b, .tdh-info .warn { color: var(--g-warn); }
.tdh-info .practice { padding: 0 8px; border-radius: 999px; color: #DBEAFE; background: rgba(37, 99, 235, .55); }
.tdh-banner { display: none; padding: 8px 12px; border-radius: 12px; font-size: 13px; line-height: 1.5; color: var(--g-text-2); background: rgba(15, 26, 50, .85); border: 1px solid rgba(148, 163, 184, .35); text-align: center; }
.tdh-banner.show { display: block; }
.tdh-banner.warn { color: #FEF3C7; background: rgba(68, 44, 8, .7); border-color: rgba(251, 191, 36, .6); }
.tdh-board { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px 6px 10px; border-radius: 22px;
  border: 4px solid transparent; background: radial-gradient(ellipse at 50% 40%, var(--g-felt-hi), var(--g-felt) 55%, var(--g-felt-lo)) padding-box, linear-gradient(160deg, #FCE7A8, var(--g-gold) 35%, var(--g-gold-lo) 70%, #F6D88A) border-box;
  box-shadow: inset 0 0 28px rgba(0, 0, 0, .5), 0 10px 24px rgba(0, 0, 0, .5); }
/* 对手 */
.tdh-ohead { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tdh-oava { position: relative; flex: 0 0 auto; padding: 2px; border-radius: 50%; background: linear-gradient(160deg, #FCE7A8, var(--g-gold) 50%, var(--g-gold-lo)); }
.tdh-oava .avatar { border-radius: 50%; overflow: hidden; display: block; }
.tdh-rel { position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); padding: 0 6px; border-radius: 999px; font-size: 10px; font-weight: 800; line-height: 15px; white-space: nowrap; color: var(--g-white); background: rgba(10, 18, 36, .92); border: 1px solid var(--g-gold-edge); }
.tdh-ohead.actor .tdh-oava, .tdh-opp.actor .tdh-oava, .tdh-mebar.actor .tdh-oava { background: conic-gradient(from 0deg, #FFF4D2, var(--g-gold-hi), var(--g-gold), #FFF4D2); box-shadow: 0 0 0 2px rgba(246, 216, 138, .5), 0 0 16px rgba(246, 216, 138, .8); }
.tdh-oname { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 12px; font-weight: 700; color: var(--g-white); }
.tdh-oname > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 6.5em; }
.tdh-wind { display: inline-flex; align-items: center; gap: 1px; padding: 0 5px; border-radius: 6px; font-size: 11px; font-weight: 900; line-height: 17px; color: var(--g-gold-hi); background: rgba(0, 0, 0, .35); border: 1px solid var(--g-gold-edge); white-space: nowrap; }
.tdh-wind.dl { color: var(--g-gold-ink); background: linear-gradient(180deg, var(--g-gold-hi), var(--g-gold)); border-color: #FDE68A; }
.tdh-wind i { font-style: normal; font-size: 10px; padding-left: 2px; border-left: 1px solid rgba(42, 27, 5, .35); margin-left: 2px; }
.tdh-cnt { font-size: 11px; font-weight: 700; color: var(--g-text-2); white-space: nowrap; }
.tdh-backs { display: flex; gap: 1px; }
.tdh-backs i { display: block; border-radius: 2px; background: linear-gradient(180deg, var(--tdh-jade-hi), var(--tdh-jade)); }
.tdh-backs.h i { width: clamp(9px, 2.9vw, 13px); height: clamp(13px, 4vw, 18px); box-shadow: 0 2px 0 var(--tdh-ivory-2), 0 3px 0 var(--tdh-ivory-3); }
.tdh-backs.v { flex-direction: column; }
.tdh-backs.v i { width: clamp(18px, 5.4vw, 24px); height: clamp(6px, 1.7vw, 8px); box-shadow: 2px 1px 0 var(--tdh-ivory-2); }
.tdh-opp.top { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tdh-opp.top .tdh-ohead { justify-content: center; flex-wrap: wrap; }
.tdh-orow { display: flex; align-items: center; gap: 6px; }
.tdh-orow.v { flex-direction: column; gap: 3px; }
.tdh-omelds { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.tdh-omelds.v { flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 3px; }
.tdh-mid { display: flex; align-items: stretch; gap: 4px; min-height: 0; }
.tdh-opp.side { flex: 0 0 var(--tdh-side); width: var(--tdh-side); display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 4px; }
.tdh-opp.side .tdh-ohead { flex-direction: column; gap: 9px; }
.tdh-opp.side .tdh-oname { flex-direction: column; gap: 2px; }
.tdh-opp.side .tdh-oname > span:first-child { max-width: var(--tdh-side); font-size: 11px; }
.tdh-mmeld { display: flex; align-items: center; gap: 2px; padding: 1px 3px; border-radius: 6px; background: rgba(0, 0, 0, .28); }
.tdh-mmeld b { font-size: 10px; color: var(--g-white); }
.tdh-mmeld small { font-size: 9px; color: var(--g-gold-hi); white-space: nowrap; }
.tdh-mmeld.pending { box-shadow: 0 0 0 1px var(--g-warn); }
.tdh-mmeld.pending small { color: var(--g-warn); }
/* 中央：牌河 + 方位盘 */
.tdh-center { position: relative; flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: auto minmax(64px, 1fr) auto; grid-template-areas: "t t t" "l c r" "b b b"; gap: 6px 4px; align-items: center; justify-items: center; padding: 4px 2px; border-radius: 16px; background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, .06), transparent 65%); }
.tdh-rv { min-width: 0; transition: opacity .2s ease; }
.tdh-rv.t { grid-area: t; } .tdh-rv.l { grid-area: l; } .tdh-rv.r { grid-area: r; } .tdh-rv.b { grid-area: b; }
.tdh-river { position: relative; display: grid; gap: 2px 2px; cursor: pointer; min-height: calc(var(--tdh-river) * 1.36); border-radius: 6px; }
.tdh-river .tdh-tile { --w: var(--tdh-river); margin-bottom: calc(var(--tdh-river) * .1); }
.tdh-river.r0, .tdh-river.r2 { grid-template-columns: repeat(6, var(--tdh-river)); }
.tdh-river.r1, .tdh-river.r3 { grid-template-columns: repeat(3, var(--tdh-river)); }
.tdh-river:empty::after { content: ''; display: block; width: calc(var(--tdh-river) * 3); height: calc(var(--tdh-river) * 1.2); border-radius: 6px; border: 1px dashed rgba(255, 255, 255, .14); }
.tdh-river:focus-visible { outline: 2px solid var(--g-gold-hi); outline-offset: 2px; }
.tdh-more { position: absolute; top: -8px; right: -6px; z-index: 1; padding: 0 4px; border-radius: 8px; font-size: 9px; line-height: 14px; color: var(--g-gold-ink); background: var(--g-gold-hi); }
.tdh-compass { grid-area: c; position: relative; width: 100%; max-width: 96px; aspect-ratio: 1; border-radius: 16px; background: radial-gradient(circle, #0D2A1B, #0A2016 70%); border: 1px solid rgba(246, 216, 138, .45); box-shadow: inset 0 0 14px rgba(0, 0, 0, .6); display: grid; place-items: center; }
.tdh-cw { position: absolute; font-size: 12px; font-weight: 900; color: rgba(246, 216, 138, .55); line-height: 1; }
.tdh-cw.c0 { bottom: 4px; left: 50%; transform: translateX(-50%); }
.tdh-cw.c1 { right: 5px; top: 50%; transform: translateY(-50%); }
.tdh-cw.c2 { top: 4px; left: 50%; transform: translateX(-50%); }
.tdh-cw.c3 { left: 5px; top: 50%; transform: translateY(-50%); }
.tdh-cw.dl { text-decoration: underline; text-underline-offset: 2px; }
.tdh-cw.on { color: var(--g-gold-ink); background: var(--g-gold-hi); border-radius: 4px; padding: 1px 2px; box-shadow: 0 0 8px var(--g-gold-hi); }
.tdh-cin { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tdh-cin small { font-size: 10px; color: var(--g-text-2); white-space: nowrap; }
.tdh-cin .tdh-ring { width: 40px; height: 40px; }
.tdh-cin .tdh-ring b { font-size: 16px; }
.tdh-cin .tdh-ring small { display: none; }
.tdh-deal { font-size: 13px; color: var(--g-gold-hi); }
.tdh-center.calling .tdh-rv, .tdh-center.calling .tdh-compass { opacity: .35; }
.tdh-river-full { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 8px 4px; }
.tdh-river-full > div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tdh-river-full small { font-size: 10px; color: var(--g-muted); }
/* 中央提示：可碰/可杠/可胡/可抢杠胡（MJ-09/14/17） */
.tdh-callout { position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%); width: min(94%, 300px); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 10px 8px; text-align: center; border-radius: 18px;
  background: radial-gradient(ellipse at 50% 30%, rgba(30, 43, 74, .96), rgba(8, 14, 30, .96)); border: 1px solid var(--g-gold); box-shadow: 0 0 0 3px rgba(214, 165, 71, .18), 0 10px 26px rgba(0, 0, 0, .6); }
.tdh-cotiles { display: flex; align-items: flex-end; justify-content: center; gap: 8px; padding-top: 4px; }
.tdh-cotiles.rob .tdh-grp-tiles { padding: 3px; border-radius: 8px; box-shadow: 0 0 0 1px var(--g-gold-edge); }
.tdh-cofloat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tdh-bubble { padding: 1px 8px; border-radius: 8px; font-size: 11px; font-weight: 800; color: var(--g-gold-ink); background: linear-gradient(180deg, #FFF4D2, var(--g-gold-hi)); }
.tdh-cotitle { font-size: 24px; font-weight: 900; letter-spacing: 2px; color: transparent; background: linear-gradient(180deg, #FFF4D2, var(--g-gold-hi) 45%, var(--g-gold)); -webkit-background-clip: text; background-clip: text; }
.tdh-callout.sent .tdh-cotitle { font-size: 19px; }
.tdh-cotime { padding: 2px 12px; border-radius: 999px; font-size: 13px; color: var(--g-white); background: rgba(10, 18, 36, .9); border: 1px solid rgba(148, 163, 184, .4); }
.tdh-cotime b { font-size: 18px; color: var(--g-gold-hi); padding: 0 2px; }
.tdh-callout small { font-size: 11px; color: var(--g-text-2); }
.tdh-cofine { color: var(--g-gold-hi) !important; }
.tdh-callout.deal b { font-size: 20px; color: var(--g-gold-hi); }
/* 本人 */
.tdh-mebar { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 4px 0; border-top: 1px solid rgba(246, 216, 138, .18); }
.tdh-ohead.me { flex: 0 0 auto; }
.tdh-mymelds { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-top: 10px; }
.tdh-hand { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 12px; }
.tdh-hrow { display: flex; gap: 3px; align-items: flex-end; }
.tdh-hrow .tdh-tile.drawn { margin-left: 8px; }
.tdh-hand.active .tdh-tile:not(.dim) { cursor: pointer; }
.tdh-hnote { font-size: 11px; color: var(--g-warn); text-align: center; }
.tdh-table.has-result .tdh-table-body { visibility: hidden; }
.tdh-table.has-result .tdh-topwrap { visibility: hidden; }
/* 矮屏（如 320×640、横屏手机）：压缩对手信息与牌河，保证操作条尽量在首屏内 */
@media (max-height: 720px) {
  .g-screen.tdh-table { --tdh-river: clamp(12px, 4vw, 16px); }
  .tdh-table .g-top { min-height: 48px; padding: 2px 8px; }
  .tdh-table .tdh-table-body { gap: 6px; }
  .tdh-info { font-size: 11px; }
  .tdh-board { gap: 4px; padding: 6px 4px 8px; }
  .tdh-opp.top { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 8px; }
  .tdh-opp.top .tdh-omelds { flex-basis: 100%; }
  .tdh-opp.side .tdh-oname > span:first-child { display: none; }
  .tdh-backs.v i { height: 5px; }
  .tdh-compass { max-width: 76px; }
  .tdh-cin small { display: none; }
  .tdh-mebar { min-height: 34px; }
  .tdh-hand { padding-top: 8px; gap: 3px; }
  .tdh-op { height: 50px; }
  .tdh-acts-row .tdh-ring { width: 50px; height: 50px; }
}
/* 更矮的屏（320×568 等）：两侧只保留头像、方位与张数，牌河再缩一档 */
@media (max-height: 600px) {
  .g-screen.tdh-table { --tdh-river: 12px; }
  .tdh-backs.v { display: none; }
  .tdh-backs.h i { height: 12px; width: 8px; }
  .tdh-compass { max-width: 64px; }
  .tdh-cin .tdh-ring { width: 34px; height: 34px; }
  .tdh-cin .tdh-ring b { font-size: 14px; }
  .tdh-info { gap: 0 8px; }
}

/* ---- styles/tdh/actions.css ---- */
/* MJ-07—MJ-18 操作区：按钮位置固定（胡 / 杠 / 碰 · 倒计时 · 过）；只显示服务器给出的合法能力 */
.tdh-acts { display: flex; flex-direction: column; gap: 8px; }
.tdh-acts:empty { display: none; }
.tdh-acts-row { display: flex; align-items: center; justify-content: center; gap: 8px; }
.tdh-acts-row > .g-btn { flex: 1 1 0; }
.tdh-op { flex: 1 1 0; min-width: 0; height: 56px; padding: 0 6px; border-radius: 28px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: "Songti SC", "Noto Serif SC", serif; font-size: 24px; font-weight: 900; letter-spacing: 2px; white-space: nowrap; transition: transform .08s ease, filter .15s ease; }
.tdh-op.hu, .tdh-op.discard { color: #7F1D1D; background: linear-gradient(180deg, #FFF4D2 0%, var(--g-gold-hi) 25%, var(--g-gold) 65%, var(--g-gold-lo)); border: 1px solid #FDE68A; box-shadow: 0 6px 16px rgba(214, 165, 71, .35), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(120, 80, 20, .35); }
.tdh-op.discard { color: var(--g-gold-ink); font-family: inherit; font-size: 19px; letter-spacing: 1px; }
.tdh-op.kong, .tdh-op.peng { color: #ECFDF5; background: linear-gradient(180deg, #2BA864, #15803D 60%, #0E5A2F); border: 1px solid rgba(246, 216, 138, .65); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 4px 10px rgba(0, 0, 0, .35); }
.tdh-op.pass { color: var(--g-white); background: linear-gradient(180deg, #3B6FD8, #1E40AF 60%, #172F7A); border: 1px solid rgba(147, 197, 253, .6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 4px 10px rgba(0, 0, 0, .35); }
.tdh-op:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.tdh-op:disabled { cursor: default; filter: grayscale(.6) brightness(.75); opacity: .7; }
.tdh-op:focus-visible { outline: 2px solid #FFF; outline-offset: 2px; }
.tdh-op .tdh-tile { --w: 18px; margin: 0; }
.tdh-acts-row.resp.n5 .tdh-op { font-size: 21px; letter-spacing: 0; }
.tdh-acts-row.self .tdh-op.discard { flex: 1.6 1 0; }
.tdh-status { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; min-height: 48px; padding: 8px 12px; border-radius: 14px; font-size: 14px; color: var(--g-text-2); background: rgba(10, 18, 36, .7); border: 1px solid rgba(148, 163, 184, .3); text-align: center; }
.tdh-status .g-btn { min-height: 40px; font-size: 15px; }
.tdh-status.sent { flex: 1; color: #DCFCE7; border-color: rgba(74, 222, 128, .5); }
.tdh-status.sent svg { color: var(--g-pos); }
.tdh-tip { margin: 0; font-size: 13px; color: var(--g-gold-hi); text-align: center; }
.tdh-private { margin: 0; display: flex; align-items: flex-start; gap: 6px; padding: 8px 10px; border-radius: 12px; font-size: 12px; line-height: 1.55; color: #E0E7FF; background: rgba(30, 27, 75, .85); border: 1px dashed rgba(165, 180, 252, .7); }
.tdh-private svg { flex: 0 0 auto; margin-top: 1px; color: #A5B4FC; }
.tdh-auto { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: rgba(68, 44, 8, .75); border: 1px solid rgba(251, 191, 36, .65); }
.tdh-auto > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tdh-auto b { font-size: 15px; color: #FDE68A; }
.tdh-auto small { font-size: 11px; line-height: 1.4; color: #FEF3C7; }
.tdh-auto .g-btn { flex: 0 0 auto; min-height: 44px; font-size: 15px; padding: 0 12px; }
/* 工具与听牌提示 */
.tdh-tools { display: flex; flex-direction: column; gap: 8px; }
.tdh-toolrow { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.tdh-tool { min-height: 36px; padding: 0 12px; border-radius: 18px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 13px; color: var(--g-text-2); background: rgba(15, 23, 42, .65); border: 1px solid rgba(148, 163, 184, .35); }
.tdh-tool.on { color: var(--g-gold-hi); border-color: var(--g-gold); background: rgba(60, 42, 10, .55); }
.tdh-tool:disabled { opacity: .55; cursor: default; }
.tdh-hints { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 14px; background: var(--g-glass); border: 1px solid var(--g-gold-edge); }
.tdh-hints-body { display: flex; flex-wrap: wrap; gap: 6px; }
.tdh-hint { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 2px 8px; border-radius: 12px; cursor: pointer; font: inherit; font-size: 13px; color: var(--g-white); background: rgba(10, 18, 36, .7); border: 1px solid rgba(148, 163, 184, .35); }
.tdh-hint.on { border-color: var(--g-gold-hi); box-shadow: 0 0 8px rgba(246, 216, 138, .45); }
.tdh-hint.static { cursor: default; }
.tdh-hint:disabled { cursor: default; opacity: .85; }
.tdh-hint .tdh-tile { margin-bottom: 2px; }
.tdh-waits { display: inline-flex; gap: 4px; }
.tdh-wait { display: inline-flex; align-items: flex-start; gap: 1px; }
.tdh-wait sup { font-size: 10px; font-weight: 800; color: var(--g-gold-hi); }
/* 杠选择卡 */
.tdh-kong-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 14px; cursor: pointer; text-align: left; font: inherit; color: var(--g-white); background: rgba(10, 18, 36, .7); border: 1px solid var(--g-gold-edge); }
.tdh-kong-opt > div:last-child { display: flex; flex-direction: column; gap: 2px; }
.tdh-kong-opt b { font-size: 16px; color: var(--g-gold-hi); }
.tdh-kong-opt small { font-size: 12px; color: var(--g-text-2); }
@media (max-width: 359px) {
  .tdh-op { height: 50px; font-size: 21px; letter-spacing: 0; }
  .tdh-op.discard { font-size: 16px; }
  .tdh-acts-row { gap: 6px; }
  .tdh-acts-row .tdh-ring { width: 50px; height: 50px; }
  .tdh-acts-row .tdh-ring b { font-size: 18px; }
  .tdh-acts-row.resp.n5 .tdh-op { font-size: 18px; }
}

/* ---- styles/tdh/result.css ---- */
/* MJ-19—MJ-23 结算：标题、赢家结构与胡牌来源、四家卡片（胡牌者金色 / 放炮者蓝色）、结算说明、操作 */
.tdh-overlay:empty { display: none; }
.tdh-overlay { position: absolute; inset: 0; z-index: 20; overflow-y: auto; -webkit-overflow-scrolling: touch; background: radial-gradient(ellipse at 50% 0%, rgba(30, 43, 74, .97), rgba(6, 11, 24, .98) 70%); }
.tdh-result { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px calc(16px + var(--safe-bottom, 0px)); min-height: 100%; animation: tdh-rise .35s ease-out 1 both; }
.tdh-res-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.tdh-res-flag { display: flex; flex-direction: column; gap: 3px; max-width: 58%; }
.tdh-res-flag b { align-self: flex-start; padding: 3px 12px; border-radius: 999px; font-size: 13px; color: #E0F2FE; background: linear-gradient(180deg, #2563EB, #1E40AF); border: 1px solid #93C5FD; }
.tdh-res-flag small { font-size: 11px; line-height: 1.4; color: var(--g-text-2); }
.tdh-res-params { margin: 0; padding: 6px 10px; border-radius: 12px; display: flex; flex-direction: column; gap: 1px; font-size: 11px; color: var(--g-text-2); background: rgba(10, 18, 36, .75); border: 1px solid rgba(148, 163, 184, .35); }
.tdh-res-params > div { display: flex; gap: 4px; }
.tdh-res-params dt { color: var(--g-muted); }
.tdh-res-params dd { margin: 0; color: var(--g-white); }
.tdh-res-title { margin: 2px 0 0; text-align: center; font-size: 32px; font-weight: 900; letter-spacing: 4px; color: transparent; background: linear-gradient(180deg, #FFF4D2, var(--g-gold-hi) 45%, var(--g-gold)); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); }
.tdh-result.k-draw_normal .tdh-res-title, .tdh-result.k-aborted .tdh-res-title { background: linear-gradient(180deg, #F8FAFC, #CBD5E1); -webkit-background-clip: text; background-clip: text; }
.tdh-labels { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.tdh-labels span { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--g-gold-ink); background: linear-gradient(180deg, var(--g-gold-hi), var(--g-gold)); }
.tdh-labels small { font-size: 11px; color: var(--g-muted); }
.tdh-res-felt { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px; border-radius: 20px; border: 3px solid transparent;
  background: radial-gradient(ellipse at 50% 40%, var(--g-felt-hi), var(--g-felt) 60%, var(--g-felt-lo)) padding-box, linear-gradient(160deg, #FCE7A8, var(--g-gold) 40%, var(--g-gold-lo)) border-box; box-shadow: inset 0 0 22px rgba(0, 0, 0, .45); }
.tdh-res-cap { padding: 2px 14px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--g-gold-hi); background: rgba(8, 20, 14, .75); border: 1px solid var(--g-gold-edge); }
.tdh-flow { margin: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 700; }
.tdh-flow span { padding: 2px 10px; border-radius: 999px; }
.tdh-flow .src { color: #DBEAFE; background: rgba(37, 99, 235, .55); border: 1px solid #93C5FD; }
.tdh-flow .win { color: var(--g-gold-ink); background: linear-gradient(180deg, var(--g-gold-hi), var(--g-gold)); }
.tdh-flow i { display: block; width: 40px; height: 2px; position: relative; background: linear-gradient(90deg, rgba(147, 197, 253, .8), var(--g-gold-hi)); }
.tdh-flow i::after { content: ''; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left-color: var(--g-gold-hi); border-right: 0; }
.tdh-res-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 8px; }
.tdh-res-empty b { font-size: 18px; color: var(--g-white); }
.tdh-res-empty small { font-size: 12px; color: var(--g-text-2); }
.tdh-res-sec { display: flex; flex-direction: column; gap: 10px; padding: 12px 10px; border-radius: 18px; background: var(--g-glass); border: 1px solid var(--g-gold-edge); }
.tdh-res-sechead { text-align: center; }
.tdh-res-sechead span { padding: 2px 18px; border-radius: 999px; font-size: 14px; font-weight: 800; color: var(--g-gold-hi); border: 1px solid var(--g-gold-edge); background: rgba(10, 18, 36, .8); }
.tdh-pcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.tdh-pcard { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 3px 8px; border-radius: 14px; text-align: center; background: rgba(15, 26, 50, .85); border: 1px solid rgba(148, 163, 184, .3); min-width: 0; }
.tdh-pcard.win { background: linear-gradient(180deg, rgba(120, 86, 22, .75), rgba(60, 42, 10, .85)); border-color: var(--g-gold-hi); box-shadow: 0 0 14px rgba(246, 216, 138, .35); }
.tdh-pcard.src { border-color: rgba(147, 197, 253, .7); }
.tdh-pcard.me .tdh-pname { text-decoration: underline; text-decoration-color: var(--g-gold); text-underline-offset: 3px; }
.tdh-pava { position: relative; padding: 2px; border-radius: 50%; background: linear-gradient(160deg, #FCE7A8, var(--g-gold) 50%, var(--g-gold-lo)); }
.tdh-pava .avatar { border-radius: 50%; overflow: hidden; display: block; }
.tdh-crown { position: absolute; left: 50%; top: -9px; width: 20px; height: 12px; transform: translateX(-50%); background: linear-gradient(180deg, #FFF4D2, var(--g-gold)); clip-path: polygon(0 100%, 0 25%, 25% 60%, 50% 0, 75% 60%, 100% 25%, 100% 100%); }
.tdh-role { padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; color: var(--g-text-2); background: rgba(30, 41, 59, .9); }
.tdh-role.gold { color: var(--g-gold-ink); background: linear-gradient(180deg, var(--g-gold-hi), var(--g-gold)); }
.tdh-role.blue { color: #E0F2FE; background: linear-gradient(180deg, #2563EB, #1E40AF); }
.tdh-pname { max-width: 100%; font-size: 12px; color: var(--g-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdh-pname small { font-size: 10px; color: var(--g-muted); }
.tdh-pdelta { font-size: 22px; font-weight: 900; color: var(--g-white); font-variant-numeric: tabular-nums; }
.tdh-pdelta.g-pos { color: var(--g-gold-hi); }
.tdh-pdelta.g-neg { color: #93C5FD; }
.tdh-res-notes { padding: 10px 12px; border-radius: 14px; background: rgba(8, 14, 30, .6); border: 1px solid rgba(148, 163, 184, .25); }
.tdh-res-noteshead { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.tdh-res-noteshead svg { color: var(--g-gold-hi); }
.tdh-res-noteshead b { flex: 1; font-size: 14px; color: var(--g-gold-hi); }
.tdh-res-noteshead small { font-size: 11px; color: var(--g-text-2); }
.tdh-res-notes ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 3px; font-size: 12px; line-height: 1.6; color: var(--g-text-2); }
.tdh-myline { margin: 0; text-align: center; font-size: 15px; font-weight: 800; color: var(--g-white); }
.tdh-myline small { font-size: 12px; font-weight: 400; color: var(--g-text-2); }
.tdh-res-acts { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 359px) {
  .tdh-res-title { font-size: 26px; letter-spacing: 2px; }
  .tdh-pcards { gap: 4px; }
  .tdh-pdelta { font-size: 18px; }
  .tdh-pname { font-size: 11px; }
}

/* ---- styles/tdh/records.css ---- */
/* MJ-24 战绩与详情、MJ-25 回放与承诺 */
.tdh-filters { display: flex; flex-direction: column; gap: 8px; }
.tdh-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tdh-chip { flex: 0 0 auto; min-height: 34px; padding: 0 12px; border-radius: 17px; cursor: pointer; font: inherit; font-size: 13px; color: var(--g-text-2); background: rgba(15, 23, 42, .65); border: 1px solid rgba(148, 163, 184, .35); }
.tdh-chip.on { color: var(--g-gold-ink); font-weight: 800; background: linear-gradient(180deg, var(--g-gold-hi), var(--g-gold)); border-color: #FDE68A; }
.tdh-hist { display: flex; flex-direction: column; gap: 8px; }
.tdh-hrec { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 10px; border-radius: 14px; cursor: pointer; text-align: left; font: inherit; color: var(--g-white); background: var(--g-glass); border: 1px solid rgba(214, 165, 71, .35); }
.tdh-hrec > svg { flex: 0 0 auto; color: var(--g-muted); }
.tdh-hbadge { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; text-align: center; padding: 2px; font-size: 13px; font-weight: 900; line-height: 1.15; color: var(--g-gold-ink); background: linear-gradient(180deg, #FFF4D2, var(--g-gold-hi) 40%, var(--g-gold)); box-shadow: inset 0 -3px 0 var(--tdh-jade); }
.tdh-hbadge.k-draw_normal, .tdh-hbadge.k-aborted, .tdh-hbadge.k-playing { color: var(--g-white); background: linear-gradient(180deg, #475569, #1E293B); box-shadow: inset 0 -3px 0 #0F172A; }
.tdh-hbadge.big { width: 64px; height: 64px; font-size: 15px; }
.tdh-hmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tdh-hmain b { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.tdh-hmain small { font-size: 12px; line-height: 1.4; color: var(--g-muted); }
.tdh-hdelta { flex: 0 0 auto; font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; }
.tdh-more-wrap { display: flex; justify-content: center; }
.tdh-more-wrap:empty { display: none; }
.tdh-dhead { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.tdh-dhead > div:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tdh-dhead h2 { margin: 0; font-size: 19px; color: var(--g-gold-hi); }
.tdh-dhead small { font-size: 12px; color: var(--g-muted); }
.tdh-dhead .tdh-flow, .tdh-dhead .tdh-labels { flex: 1 1 100%; }
.tdh-ledger dl { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.tdh-ledger dl > div { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.tdh-ledger dt { color: var(--g-muted); }
.tdh-ledger dd { margin: 0; color: var(--g-white); font-weight: 700; text-align: right; }
.tdh-ledger > small { display: block; margin-top: 8px; word-break: break-all; }
.tdh-proof { display: flex; flex-direction: column; gap: 10px; }
.tdh-proof dl { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.tdh-proof dl > div { display: flex; flex-direction: column; gap: 2px; }
.tdh-proof dt { font-size: 12px; color: var(--g-muted); }
.tdh-proof dd { margin: 0; font-size: 13px; color: var(--g-white); }
.tdh-proof code { font-family: ui-monospace, monospace; font-size: 12px; word-break: break-all; color: var(--g-gold-hi); }
/* 回放 */
.tdh-rp-stage { display: flex; flex-direction: column; gap: 6px; padding: 10px 8px; border-radius: 20px; border: 3px solid transparent;
  background: radial-gradient(ellipse at 50% 40%, var(--g-felt-hi), var(--g-felt) 60%, var(--g-felt-lo)) padding-box, linear-gradient(160deg, #FCE7A8, var(--g-gold) 40%, var(--g-gold-lo)) border-box; }
.tdh-rp-step { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; padding: 4px 10px; border-radius: 12px; font-size: 12px; color: var(--g-text-2); background: rgba(8, 20, 14, .7); }
.tdh-rp-step b { font-size: 15px; color: var(--g-gold-hi); }
.tdh-rp-mid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tdh-rp-seat { display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 12px; background: rgba(0, 0, 0, .2); border: 1px solid transparent; min-width: 0; }
.tdh-rp-seat.actor { border-color: var(--g-gold-hi); box-shadow: 0 0 10px rgba(246, 216, 138, .4); }
.tdh-rp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12px; color: var(--g-white); }
.tdh-rp-head small { font-size: 11px; color: var(--g-muted); }
.tdh-rp-melds { display: flex; flex-wrap: wrap; gap: 4px; }
.tdh-rp-river { display: flex; flex-wrap: wrap; gap: 2px; min-height: 20px; }
.tdh-rp-hand { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; padding-top: 4px; }
.tdh-rp-result { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px; border-radius: 12px; font-size: 12px; color: var(--g-white); background: rgba(10, 18, 36, .8); border: 1px solid var(--g-gold-edge); }
.tdh-rp-result b { font-size: 16px; color: var(--g-gold-hi); }
.tdh-rp-ctl { display: flex; flex-direction: column; gap: 8px; }
.tdh-rp-ctl input[type=range] { width: 100%; accent-color: #D6A547; }
.tdh-rp-btns { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; }
.tdh-rp-proof { display: flex; flex-direction: column; gap: 8px; }

/* ---- styles/tdh/effects.css ---- */
/* 动效：只做轻量提示；“减少动态效果”时全部关闭 */
@keyframes tdh-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes tdh-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes tdh-pulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(214, 165, 71, .18), 0 10px 26px rgba(0, 0, 0, .6); } 50% { box-shadow: 0 0 0 5px rgba(246, 216, 138, .35), 0 10px 26px rgba(0, 0, 0, .6); } }
@keyframes tdh-float { 0%, 100% { transform: translateY(-30%) rotate(6deg); } 50% { transform: translateY(-45%) rotate(6deg); } }
.tdh-callout:not(.sent):not(.deal) { animation: tdh-pulse 1.6s ease-in-out infinite; }
.tdh-meld.pending .tdh-meld-tiles > .tdh-tile:last-child { animation: tdh-float 1.4s ease-in-out infinite; }
.tdh-ring.urgent.live { animation: tdh-blink .8s ease-in-out infinite; }
html.reduce-motion .tdh-callout, html.reduce-motion .tdh-meld.pending .tdh-tile, html.reduce-motion .tdh-ring, html.reduce-motion .tdh-result, html.reduce-motion .tdh-net { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .tdh-callout, .tdh-meld.pending .tdh-tile, .tdh-ring, .tdh-result, .tdh-net, .tdh-tile { animation: none !important; transition: none !important; } }