/* 槟果德扑AI · H5 原型样式 */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root {
  --bg: #0b0f14; --panel: #141a22; --panel2: #1b232e; --line: #232d3a;
  --txt: #e8edf2; --sub: #8b97a5;
  --acc: #34d399; --acc-dim: #16352b;
  --gold: #e8b04b; --red: #f0554d; --yellow: #e8c04b; --blue: #5aa2f0;
  --bar: #0d1218; --tabbar: rgba(13, 18, 24, .96); --track: #0d1319;
  --seat: rgba(13, 19, 25, .92); --panel3: #0c1218; --sheet: #10161e;
  --toast: rgba(22, 30, 40, .97); --mask: rgba(4, 7, 10, .72);
  --faint: #55606d; --soft: #b8c2cd; --seat-txt: #cdd6df;
  --cardline: transparent; --cardslot-bg: rgba(255, 255, 255, .05); --cardslot-bd: rgba(255, 255, 255, .18);
  --frame: #10151c; --gold-txt: #ffd98a;
}
html[data-theme] { color-scheme: dark; }
html, body { height: 100%; }
body {
  background: var(--bg); color: var(--txt);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "PingFang TC", "HarmonyOS Sans SC", "Microsoft YaHei", "Microsoft JhengHei", sans-serif;
  font-size: 15px; line-height: 1.5; overflow: hidden;
}
button { font-family: inherit; border: none; cursor: pointer; color: inherit; background: none; }
input { font-family: inherit; }

/* 点击目标可感知性:pointer 光标 + 键盘焦点环(桌面评审/无障碍) */
.g-cell, .lvl-cell, .sel-card, .heat-cell, .st-tab, .rv-item, .err-row,
.sess-card, .tour-item, .tab { cursor: pointer; -webkit-user-select: none; user-select: none; }
[onclick]:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; }
[onclick]:focus-visible, button:focus-visible {
  outline: 2px solid var(--acc); outline-offset: 2px;
}

/* ---------- 手机框(桌面) ---------- */
#phone { position: relative; width: 100%; max-width: 414px; height: 100dvh; margin: 0 auto; background: var(--bg); overflow: hidden; }
@media (min-width: 560px) {
  body { background: radial-gradient(1200px 700px at 50% -10%, #12202e 0%, #080b0f 60%); display: flex; align-items: center; }
  html[data-theme="light"] body { background: radial-gradient(1200px 700px at 50% -10%, #dde6ef 0%, #e9edf2 60%); }
  #phone { height: min(860px, 94vh); border-radius: 42px; border: 10px solid var(--frame); box-shadow: 0 40px 90px rgba(0,0,0,.6), 0 0 0 1px #2a3542; }
  html[data-theme="light"] #phone { box-shadow: 0 30px 70px rgba(30, 45, 60, .25), 0 0 0 1px #c6ced8; }
  #phone::before { content: ""; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 110px; height: 26px; background: var(--frame); border-radius: 14px; z-index: 300; }
}

/* ---------- 屏幕与导航 ---------- */
.screen { position: absolute; inset: 0; display: none; flex-direction: column; background: var(--bg); animation: fadein .22s ease; }
.screen.on { display: flex; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.scroll { overflow-y: auto; flex: 1; scrollbar-width: none; overscroll-behavior: contain; }
.scroll::-webkit-scrollbar { display: none; }
.pad { padding: 14px 16px calc(84px + env(safe-area-inset-bottom)); }
.screen.tabbed .pad { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }

.topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 52px; padding: 0 10px; border-bottom: 1px solid var(--line); flex: none; background: var(--bar); position: relative; z-index: 5; }
.back { grid-column: 1; }
.topbar-t { grid-column: 2; font-weight: 700; font-size: 16px; text-align: center; }
.topbar-r { grid-column: 3; text-align: right; font-size: 11px; padding-right: 6px; }
.back { width: 40px; height: 40px; font-size: 24px; color: var(--sub); flex: none; }

#tabbar { position: absolute; bottom: 0; left: 0; right: 0; height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); display: none; background: var(--tabbar); border-top: 1px solid var(--line); z-index: 90; }
body[data-tabvis="1"] #tabbar { display: flex; }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10.5px; color: var(--sub); }
.tab .ico { width: 22px; height: 22px; }
.tab.on { color: var(--acc); }

/* ---------- 通用组件 ---------- */
.h2 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.muted { color: var(--sub); }
.small { font-size: 12px; }
.mb12 { margin-bottom: 12px; } .mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; }
.center { text-align: center; }
.bad { color: var(--red); }
.btn { border-radius: 12px; padding: 12px 18px; font-size: 15px; font-weight: 600; transition: transform .06s ease, opacity .2s; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .35; }
.btn-block { width: 100%; margin-top: 12px; }
.btn-primary { background: linear-gradient(135deg, #2fbf8a, #1f9d6d); color: #06231a; }
.btn-gold { background: linear-gradient(135deg, #efc36a, #d99a2b); color: #33210a; }
.btn-ghost { background: var(--panel2); color: var(--txt); border: 1px solid var(--line); }
.btn-sm { padding: 7px 14px; font-size: 13px; border-radius: 9px; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px; margin-bottom: 12px; }
.card-t { font-weight: 700; font-size: 14.5px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: baseline; }
.note-card { background: var(--panel2); font-size: 13px; color: var(--sub); }

.stat-row { display: flex; gap: 10px; margin-bottom: 12px; }
.stat { flex: 1; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; text-align: center; padding: 12px 4px; }
.stat b { font-size: 20px; display: block; }
.stat span { font-size: 11px; color: var(--sub); }

.pbar { flex: 1; height: 6px; background: var(--track); border-radius: 4px; overflow: hidden; margin: 0 8px; }
.pbar i { display: block; height: 100%; background: linear-gradient(90deg, #2fbf8a, #56d6a4); border-radius: 4px; }

.law-strip { text-align: center; color: var(--faint); font-size: 11px; padding: 14px 0 4px; letter-spacing: 1px; }

/* ---------- 首启 ---------- */
.splash-wrap { height: 100%; overflow-y: auto; padding: 8vh 24px 40px; display: flex; flex-direction: column; align-items: center; }
.logo-big { width: 84px; height: 84px; border-radius: 24px; background: linear-gradient(145deg, #1e2c3a, #101820); border: 1px solid #2c3a4a; display: flex; align-items: center; justify-content: center; box-shadow: 0 18px 40px rgba(0,0,0,.5); }
.logo-mark { display: flex; width: 48px; height: 48px; color: #f0f4f8; }
.logo-mark svg { width: 100%; height: 100%; }
.splash-title { font-size: 26px; font-weight: 800; margin-top: 18px; letter-spacing: 6px; }
.splash-sub { color: var(--sub); font-size: 13px; margin-top: 6px; letter-spacing: 1px; }
.chip-demo { margin-top: 14px; font-size: 11px; color: var(--gold); background: rgba(232,176,75,.1); border: 1px solid rgba(232,176,75,.3); padding: 4px 12px; border-radius: 999px; }
.law-card { width: 100%; margin-top: 26px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.law-card-t { font-weight: 700; margin-bottom: 12px; }
.law-item { display: flex; gap: 12px; padding: 9px 0; font-size: 13px; color: var(--soft); border-top: 1px dashed var(--line); }
.law-item:first-of-type { border-top: none; }
.law-ico { display: inline-flex; width: 22px; height: 22px; flex: none; margin-top: 2px; }
.law-ico .ico { width: 20px; height: 20px; }
.lc-red { color: var(--red); } .lc-blue { color: var(--blue); } .lc-acc { color: var(--acc); }
.law-check { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13.5px; color: #b8c2cd; align-self: flex-start; }
.law-check input { width: 18px; height: 18px; accent-color: var(--acc); }
.splash-foot { margin-top: 18px; font-size: 11px; color: var(--faint); text-align: center; line-height: 1.8; }

/* ---------- 自评 / 设置 选择卡 ---------- */
.sel-cards { display: flex; flex-direction: column; gap: 10px; }
.sel-card { background: var(--panel); border: 1.5px solid var(--line); border-radius: 14px; padding: 14px; transition: all .15s; }
.sel-card.on { border-color: var(--acc); background: linear-gradient(160deg, rgba(52,211,153,.08), var(--panel)); }
.sel-card .sc-t { font-weight: 700; font-size: 15px; }
.sel-card .sc-d { font-size: 12.5px; color: var(--sub); margin-top: 3px; }
.sel-card .sc-tags { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.tag { font-size: 11px; padding: 2px 8px; border-radius: 6px; background: var(--panel2); color: var(--sub); border: 1px solid var(--line); }
.tag.t1 { color: var(--acc); border-color: rgba(52,211,153,.35); }
.tag.t2 { color: var(--blue); border-color: rgba(90,162,240,.35); }

.lvl-row { display: flex; gap: 8px; }
.lvl-cell { flex: 1; text-align: center; background: var(--panel); border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 2px; font-size: 13px; }
.lvl-cell b { display: block; font-size: 14px; }
.lvl-cell small { font-size: 10px; color: var(--sub); display: block; margin-top: 3px; }
.lvl-cell.on { border-color: var(--acc); background: var(--acc-dim); }

/* ---------- 首页 ---------- */
.home-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.hello { font-size: 19px; font-weight: 800; }
.rank-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--gold); background: rgba(232,176,75,.08); border: 1px solid rgba(232,176,75,.25); padding: 3px 10px; border-radius: 999px; }
.streak { display: flex; align-items: center; gap: 6px; }
.streak .ico { width: 20px; height: 20px; color: #f0663b; }
.streak b { display: block; font-size: 16px; }
.streak span { font-size: 10px; color: var(--sub); }
.icon-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--panel); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--sub); margin-right: 10px; flex: none; }
.icon-btn .ico { width: 18px; height: 18px; }
.icon-btn:active { transform: scale(.94); }
.plan-card { background: linear-gradient(160deg, rgba(52,211,153,.07), var(--panel) 55%); }
.plan-rows { margin-bottom: 4px; }
.plan-row { display: flex; align-items: center; padding: 7px 0; font-size: 13.5px; }
.plan-ico { display: inline-flex; margin-right: 8px; color: var(--acc); }
.plan-ico .ico { width: 18px; height: 18px; }
.plan-name { width: 82px; }
.plan-n { font-size: 12px; color: var(--sub); width: 52px; text-align: right; }
.grid4 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.g-cell { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 12px; text-align: center; font-size: 13px; }
.g-ico { display: flex; justify-content: center; margin-bottom: 6px; }
.g-ico .ico { width: 26px; height: 26px; }
.insight { font-size: 13.5px; color: var(--soft); line-height: 1.7; }
.quota-line { text-align: center; font-size: 12px; color: var(--sub); margin: 4px 0; }
.quota-line b { color: var(--txt); }

/* ---------- 牌桌 ---------- */
#scr-table { background: radial-gradient(420px 360px at 50% 34%, #17352c 0%, #0f2b23 38%, #0a1b16 62%, var(--bg) 100%); }
.table-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px 4px; flex: none; }
.tbl-exit { color: var(--sub); font-size: 13px; padding: 6px 10px; border-radius: 8px; background: rgba(0,0,0,.25); }
.tbl-handno { font-size: 13px; font-weight: 700; }
.tbl-badges { margin-left: auto; display: flex; gap: 6px; }
.badge-练习 { font-size: 10px; color: #9fe8c8; background: rgba(52,211,153,.12); border: 1px solid rgba(52,211,153,.3); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
#tblExamBadge { color: var(--gold); background: rgba(232,176,75,.12); border-color: rgba(232,176,75,.4); }

.felt { flex: 1; position: relative; min-height: 0; }
.felt::before { content: ""; position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); width: 86%; height: 62%; border-radius: 50%; background: radial-gradient(closest-side, #1c4a3b, #143a30 70%, #123528); border: 6px solid #2a2119; box-shadow: 0 18px 50px rgba(0,0,0,.45), inset 0 0 60px rgba(0,0,0,.35); }

.seat { position: absolute; width: 96px; z-index: 3; transition: opacity .3s; }
/* v0.3.0 起座位改由 layoutSeats() 按椭圆弧动态定位,不再使用静态 slot-* 类 */

.seat-box { background: var(--seat); border: 1px solid var(--line); border-radius: 12px; padding: 7px 8px; position: relative; transition: border-color .2s, box-shadow .2s; }
.seat-box.active { border-color: var(--acc); box-shadow: 0 0 0 2px rgba(52,211,153,.25), 0 0 24px rgba(52,211,153,.15); }
.seat-box.folded { opacity: .38; filter: grayscale(.8); }
.seat-name { font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat-style { font-size: 9.5px; color: var(--sub); }
.seat-row2 { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.seat-stack { font-size: 11px; color: var(--seat-txt); }
.pos-badge { font-size: 9px; background: #2a3846; border-radius: 4px; padding: 1px 5px; color: #9fc3e8; font-weight: 700; }
.pos-badge.hi { background: #3a3f8f; color: #cfd6ff; }
.d-btn { position: absolute; right: -7px; top: -7px; width: 18px; height: 18px; background: #fff; color: #0b0f14; border-radius: 50%; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.seat-cards { display: flex; gap: 3px; margin-top: 5px; min-height: 30px; }
.seat-act { position: absolute; left: 50%; bottom: calc(100% + 3px); transform: translateX(-50%); font-size: 10px; background: #223041; border: 1px solid #31435a; color: #bcd3ec; padding: 2px 8px; border-radius: 999px; white-space: nowrap; animation: pop .18s ease; z-index: 4; }
.slot-tl .seat-act, .slot-tc .seat-act, .slot-tr .seat-act { top: calc(100% + 3px); bottom: auto; }
.seat-act.win { background: rgba(52,211,153,.18); border-color: rgba(52,211,153,.5); color: #9fe8c8; }
@keyframes pop { from { opacity: 0; transform: translateX(-50%) translateY(4px); } to { opacity: 1; transform: translateX(-50%); } }
.seat-bet { position: absolute; right: -6px; top: 100%; margin-top: 2px; font-size: 10px; color: #ffd98a; background: rgba(0,0,0,.5); border: 1px solid rgba(232,176,75,.4); border-radius: 999px; padding: 1px 7px; z-index: 4; }
.think-dots::after { content: "…"; animation: dots 1s infinite steps(4); }
@keyframes dots { 0% { content: ""; } 25% { content: "·"; } 50% { content: "· ·"; } 75% { content: "· · ·"; } }

.board-zone { position: absolute; left: 50%; top: 31%; transform: translate(-50%, -50%); text-align: center; z-index: 2; width: 92%; }
.pot-line { font-size: 12.5px; font-weight: 700; color: #ffd98a; }
.street-lab { font-size: 10px; color: #7ba796; letter-spacing: 3px; margin: 2px 0 6px; }
.board { display: flex; gap: 5px; justify-content: center; min-height: 50px; }
.last-act { font-size: 11px; color: var(--sub); margin-top: 8px; height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hero-zone { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; z-index: 3; }
.hero-info { display: flex; justify-content: center; align-items: center; gap: 8px; margin-bottom: 6px; }
.hero-stack { font-size: 13px; color: #cdd6df; font-weight: 700; }
.verdict-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.verdict-dot.g { background: var(--acc); box-shadow: 0 0 8px rgba(52,211,153,.8); }
.verdict-dot.y { background: var(--yellow); box-shadow: 0 0 8px rgba(232,192,75,.8); }
.verdict-dot.r { background: var(--red); box-shadow: 0 0 8px rgba(240,85,77,.8); }
.hero-cards { display: flex; justify-content: center; gap: 8px; }
.hero-bet { height: 20px; margin-top: 4px; font-size: 12px; color: #ffd98a; }

/* 扑克牌 */
.pcard { width: 38px; height: 53px; background: linear-gradient(160deg, #fdfefd, #e9edf2); border: 1px solid var(--cardline); border-radius: 5px; box-shadow: 0 3px 8px rgba(0,0,0,.45); display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; animation: dealin .25s ease; }
.pcard .pr { font-size: 16px; line-height: 1; }
.pcard .ps { font-size: 13px; line-height: 1.1; }
.pcard.mini { width: 24px; height: 33px; border-radius: 4px; }
.pcard.mini .pr { font-size: 11px; } .pcard.mini .ps { font-size: 9px; }
.pcard.empty { background: var(--cardslot-bg); border: 1.5px dashed var(--cardslot-bd); box-shadow: none; }
.pcard.back { background: repeating-linear-gradient(45deg, #24476d, #24476d 4px, #1d3a5c 4px, #1d3a5c 8px); border: 1px solid #35597f; }
.pcard { color: #1f2937; }
.pcard.suit-s .pr, .pcard.suit-s .ps { color: #1f2937; }
.pcard.suit-h .pr, .pcard.suit-h .ps { color: #e02c3c; }
.pcard.suit-d .pr, .pcard.suit-d .ps { color: #2563eb; }
.pcard.suit-c .pr, .pcard.suit-c .ps { color: #0f8a43; }
.suit-spade { color: #1f2937; } .suit-heart { color: #e02c3c; } .suit-diamond { color: #2563eb; } .suit-club { color: #0f8a43; }
@keyframes dealin { from { opacity: 0; transform: translateY(-14px) rotate(-6deg); } to { opacity: 1; transform: none; } }
.pcard.no-anim { animation: none; }
.pcard.back { animation: none; }
.seat-cards .pcard { animation: none; }
.seat-act.think::after { content: "…"; animation: dots 1s infinite steps(4); }

/* 行动面板 */
.action-panel { flex: none; background: var(--panel3); border-top: 1px solid var(--line); padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); min-height: 118px; }
.wait-line { text-align: center; color: var(--sub); font-size: 13px; padding: 34px 0; }
.quick-row { display: flex; gap: 6px; margin-bottom: 8px; }
.qbtn { flex: 1; font-size: 11.5px; padding: 6px 2px; border-radius: 8px; background: var(--panel2); border: 1px solid var(--line); color: #cdd6df; }
.qbtn.on { border-color: var(--acc); color: var(--acc); background: rgba(52,211,153,.08); }
.slider-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.slider-val { font-size: 12px; color: var(--gold-txt); white-space: nowrap; min-width: 108px; text-align: right; }
input[type=range] { flex: 1; appearance: none; height: 6px; border-radius: 4px; background: linear-gradient(90deg, #2fbf8a var(--fill,30%), var(--panel2) var(--fill,30%)); outline: none; }
input[type=range]::-webkit-slider-thumb { appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid #2fbf8a; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.btn-row { display: flex; gap: 8px; }
.abtn { flex: 1; padding: 13px 4px; border-radius: 12px; font-size: 14.5px; font-weight: 800; }
.abtn:active { transform: scale(.97); }
.abtn-fold { background: #342028; color: #f1998f; border: 1px solid #5c2f34; flex: .8; }
.abtn-call { background: #10314e; color: #8ec6ff; border: 1px solid #2b567f; }
.abtn-raise { background: linear-gradient(135deg, #efc36a, #d99a2b); color: #33210a; }

/* ---------- 手牌结果弹层 ---------- */
.modal-mask { position: absolute; inset: 0; background: var(--mask); z-index: 200; display: flex; align-items: flex-end; animation: fadein .2s; }
.sheet { width: 100%; background: var(--sheet); border-radius: 22px 22px 0 0; border-top: 1px solid var(--line); padding: 18px 18px calc(22px + env(safe-area-inset-bottom)); max-height: 84%; overflow-y: auto; animation: up .25s ease; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-t { font-size: 16px; font-weight: 800; margin-bottom: 12px; text-align: center; }
.show-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 10px; margin-bottom: 6px; background: var(--panel); }
.show-row.win { background: linear-gradient(90deg, rgba(52,211,153,.14), var(--panel)); border: 1px solid rgba(52,211,153,.4); }
.show-name { font-size: 13px; font-weight: 700; }
.show-hand { font-size: 11.5px; color: var(--sub); }
.show-amt { font-size: 13px; color: var(--acc); font-weight: 800; }
.grade-strip { display: flex; align-items: center; gap: 10px; background: var(--panel2); border-radius: 12px; padding: 10px 12px; margin: 10px 0; }
.grade-strip .g-lab { font-size: 12px; color: var(--sub); }
.grade-strip b { font-size: 14px; }
.grade-chip { font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 8px; }
.grade-chip.g { background: rgba(52,211,153,.15); color: var(--acc); }
.grade-chip.y { background: rgba(232,192,75,.15); color: var(--yellow); }
.grade-chip.r { background: rgba(240,85,77,.15); color: var(--red); }

/* ---------- 小结 ---------- */
.sum-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.sum-cell { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; text-align: center; padding: 12px 4px; }
.sum-cell b { font-size: 19px; display: block; }
.sum-cell span { font-size: 11px; color: var(--sub); }
.err-row { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 13px; padding: 11px 12px; margin-bottom: 8px; }
.err-main { flex: 1; min-width: 0; }
.err-t { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.err-d { font-size: 11.5px; color: var(--sub); }
.err-ev { font-size: 13px; font-weight: 800; text-align: right; }
.evdot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.evdot.g { background: var(--acc); } .evdot.y { background: var(--yellow); } .evdot.r { background: var(--red); }

/* ---------- 复盘 ---------- */
.rv-item { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 13px; padding: 12px; margin-bottom: 9px; }
.rv-no { font-size: 11px; color: var(--sub); width: 44px; flex: none; }
.rv-main { flex: 1; min-width: 0; }
.rv-t { font-size: 13.5px; font-weight: 700; }
.rv-d { font-size: 11.5px; color: var(--sub); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.street-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.st-tab { flex: 1; text-align: center; padding: 8px 2px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); font-size: 13px; color: var(--sub); }
.st-tab.on { color: var(--txt); border-color: var(--acc); background: var(--acc-dim); font-weight: 700; }
.replay-board { display: flex; gap: 6px; justify-content: center; margin: 10px 0 4px; }
.act-list { margin-top: 10px; }
.act-li { display: flex; gap: 8px; font-size: 13px; padding: 6px 8px; border-radius: 8px; }
.act-li.hero { background: rgba(52,211,153,.08); color: var(--acc); font-weight: 600; }
.act-li .w { width: 58px; color: var(--sub); flex: none; font-size: 12px; }
.dist-bars { margin: 10px 0; }
.dist-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; font-size: 12.5px; }
.dist-name { width: 52px; flex: none; }
.dist-track { flex: 1; height: 18px; background: #0d1319; border-radius: 5px; overflow: hidden; }
.dist-fill { height: 100%; border-radius: 5px; display: flex; align-items: center; justify-content: flex-end; padding-right: 5px; font-size: 10.5px; color: #06231a; font-weight: 800; transition: width .5s ease; }
.dist-fill.own { background: #64748b; color: #fff; }
.df-rec { background: linear-gradient(90deg, #2fbf8a, #56d6a4); }
.df-alt { background: #3a4c60; }
.expl-block { border-left: 3px solid var(--acc); padding: 2px 0 2px 10px; margin-bottom: 10px; }
.expl-block .eb-t { font-size: 11px; color: var(--acc); font-weight: 700; margin-bottom: 2px; }
.expl-block .eb-b { font-size: 13px; color: var(--soft); line-height: 1.75; }
.pro-blur { position: relative; overflow: hidden; border-radius: 12px; }
.pro-blur .blur-body { filter: blur(7px); user-select: none; pointer-events: none; }
.pro-cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(11, 15, 20, .55); z-index: 2; }

/* ---------- 段位 ---------- */
.rank-card { display: flex; gap: 16px; align-items: center; background: linear-gradient(150deg, rgba(232,176,75,.12), var(--panel) 60%); border: 1px solid rgba(232,176,75,.35); border-radius: 18px; padding: 18px; margin-bottom: 12px; }
.rank-kyu { font-size: 56px; font-weight: 900; color: var(--gold); line-height: 1; font-family: "Songti SC", "STSong", serif; }
.rank-kyu span { font-size: 18px; margin-left: 2px; }
.rank-meta { flex: 1; font-size: 12.5px; color: #c3aa7a; }
.rank-meta b { color: var(--gold); }
.rank-bar { margin: 8px 0; }
.radar-wrap { display: flex; justify-content: center; }
.radar-wrap svg text { fill: #8b97a5; font-size: 10px; }
.chip-pro { font-size: 10px; color: var(--gold); background: rgba(232,176,75,.12); border: 1px solid rgba(232,176,75,.3); padding: 1px 7px; border-radius: 999px; font-weight: 400; }
.exam-line { font-size: 14px; }
.share-card { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(135deg, #1d2b3a, #142031); border: 1px solid #2c3e55; border-radius: 14px; padding: 14px 16px; }
.sc-kyu { font-size: 26px; font-weight: 900; color: #e8b04b; font-family: "Songti SC", "STSong", serif; }
.sc-sub { font-size: 10.5px; color: #8b97a5; letter-spacing: 1px; }
.sc-r { font-size: 20px; letter-spacing: 3px; color: #cdd6df; }
.watermark { text-align: center; font-size: 10px; color: var(--faint); margin-top: 8px; letter-spacing: 1px; }

/* ---------- 热图 ---------- */
.heat-wrap { display: grid; grid-template-columns: 44px repeat(4, 1fr); gap: 5px; }
.heat-head { font-size: 10.5px; color: var(--sub); text-align: center; padding: 6px 0; }
.heat-pos { font-size: 11.5px; color: var(--soft); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.heat-cell { text-align: center; border-radius: 8px; padding: 13px 2px; font-size: 12px; font-weight: 700; border: 1px solid transparent; }
.hc-g { background: rgba(52,211,153,.16); color: #7fe0ba; }
.hc-y { background: rgba(232,192,75,.16); color: #ecd58f; }
.hc-o { background: rgba(240,140,60,.18); color: #f2b183; }
.hc-r { background: rgba(240,85,77,.2); color: #f2938e; }
.heat-legend { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.lg { font-size: 10.5px; padding: 2px 8px; border-radius: 6px; }
.lg-g { background: rgba(52,211,153,.16); } .lg-y { background: rgba(232,192,75,.16); } .lg-o { background: rgba(240,140,60,.18); } .lg-r { background: rgba(240,85,77,.2); }

/* ---------- 题库 ---------- */
.q-scene { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.q-board { display: flex; gap: 6px; justify-content: center; margin: 12px 0; }
.q-opt { width: 100%; text-align: left; background: var(--panel); border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 14px; font-size: 14px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.q-opt small { color: var(--sub); }
.q-opt.ok { border-color: var(--acc); background: rgba(52,211,153,.09); }
.q-opt.ng { border-color: var(--red); background: rgba(240,85,77,.08); }
.q-opt:disabled { opacity: 1; }

/* ---------- 付费 ---------- */
.pay-hero { text-align: center; padding: 8px 0 16px; }
.pay-h1 { font-size: 21px; font-weight: 800; margin-bottom: 6px; }
.plan-row-sel { display: flex; gap: 10px; margin-bottom: 12px; }
.plan-pick { flex: 1; background: var(--panel); border: 1.5px solid var(--line); border-radius: 15px; padding: 14px; }
.plan-pick.on { border-color: var(--gold); background: linear-gradient(160deg, rgba(232,176,75,.09), var(--panel)); }
.pp-t { font-size: 13px; font-weight: 700; }
.pp-tag { font-size: 10px; color: #33210a; background: var(--gold); border-radius: 5px; padding: 1px 6px; margin-left: 5px; }
.pp-p { font-size: 24px; font-weight: 900; margin-top: 6px; }
.pp-p span { font-size: 12px; color: var(--sub); font-weight: 400; }
.pp-e { font-size: 11px; color: var(--sub); margin-top: 2px; }
.pp-alt { font-size: 11px; color: var(--faint); text-align: center; margin-top: 3px; }
.ben { font-size: 13.5px; padding: 5px 0; color: var(--soft); }
.ben span { color: var(--acc); margin-right: 8px; font-weight: 800; }
.ben-no span { color: var(--red); }
.code-row { display: flex; gap: 8px; }
.code-row input { flex: 1; background: var(--panel2); border: 1px solid var(--line); border-radius: 11px; color: var(--txt); padding: 11px 14px; font-size: 14px; outline: none; }
.code-row input:focus { border-color: var(--gold); }

/* ---------- 我的 ---------- */
.me-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.avatar { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(145deg, #2c3e55, #1a2637); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--gold); font-weight: 800; }
.avatar svg { width: 30px; height: 30px; }
.me-name { font-weight: 800; font-size: 16px; }
.me-row .btn { margin-left: auto; }
.set-item { padding: 11px 2px; font-size: 14px; border-bottom: 1px solid var(--line); }
.set-item:last-child { border-bottom: none; }
.spark-wrap { background: var(--panel2); border-radius: 10px; padding: 10px; }
.cal-row { display: flex; gap: 7px; margin-top: 10px; }
.cal-d { flex: 1; aspect-ratio: 1; max-height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--sub); background: var(--panel2); }
.cal-d.did { background: var(--acc-dim); color: var(--acc); border: 1px solid rgba(52,211,153,.3); }

/* ---------- 导览 / toast ---------- */
#tourBtn { position: absolute; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 95; width: 44px; height: 44px; border-radius: 50%; background: rgba(232, 176, 75, .16); border: 1px solid rgba(232, 176, 75, .5); color: var(--gold); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
#tourBtn .ico { width: 20px; height: 20px; }
#tourBtn.dragging { opacity: .8; box-shadow: 0 10px 24px rgba(0, 0, 0, .4); cursor: grabbing; }
.set-item-link { display: flex; justify-content: space-between; align-items: center; }
.tour-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tour-item { background: var(--panel2); border: 1px solid var(--line); border-radius: 11px; padding: 10px; text-align: left; }
.tour-item b { display: block; font-size: 13px; }
.tour-item span { font-size: 10.5px; color: var(--sub); }
#toast { position: absolute; left: 50%; bottom: calc(140px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--toast); border: 1px solid var(--line); color: var(--txt); font-size: 13px; padding: 10px 16px; border-radius: 12px; z-index: 400; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; max-width: 86%; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
#toast.on { opacity: 1; transform: translateX(-50%) translateY(-6px); }
#toast .tt-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }

/* ================= v0.2:SVG 图标系统 ================= */
i.ico { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: none; }
i.ico svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
.ico-xs { width: 13px; height: 13px; }
.ico-sm { width: 15px; height: 15px; }
.ico-lg { width: 24px; height: 24px; }
.ico-acc { color: var(--acc); }
.ico-fill svg { fill: currentColor; stroke: none; }
.pro-cover .ico { width: 24px; height: 24px; color: var(--gold); }
.dist-name { display: flex; align-items: center; gap: 3px; width: 58px; }
.dist-name .ico { color: var(--acc); }

/* ================= 主题切换控件 ================= */
.theme-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.theme-row b { font-size: 14px; }
.theme-seg { display: inline-flex; background: var(--panel2); border: 1px solid var(--line); border-radius: 11px; padding: 3px; gap: 2px; flex: none; }
.theme-seg button { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; padding: 6px 13px; border-radius: 8px; color: var(--sub); }
.theme-seg button.on { background: var(--acc); color: #06231a; font-weight: 700; }

/* ================= 浅色主题覆盖 ================= */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #eef1f5; --panel: #ffffff; --panel2: #e9edf2; --line: #dce2e9;
  --txt: #1c2530; --sub: #5b6774;
  --acc: #0e9f6e; --acc-dim: #dcf4e9;
  --gold: #b07818; --red: #d63a31; --yellow: #9a7400; --blue: #2563eb;
  --bar: #ffffff; --tabbar: rgba(255, 255, 255, .97); --track: #e2e8ee;
  --seat: rgba(255, 255, 255, .96); --panel3: #f6f8fa; --sheet: #ffffff;
  --toast: rgba(255, 255, 255, .98); --mask: rgba(38, 48, 60, .38);
  --faint: #8b95a0; --soft: #43505d; --seat-txt: #33404d;
  --cardline: #d8dee6; --cardslot-bg: rgba(15, 35, 25, .05); --cardslot-bd: rgba(20, 45, 32, .2);
  --frame: #d5dbe2; --gold-txt: #8a6410;
}
html[data-theme="light"] #scr-table { background: radial-gradient(420px 360px at 50% 34%, #dcebe1 0%, #d2e5d9 38%, #e6efe9 62%, var(--bg) 100%); }
html[data-theme="light"] .badge-练习 { color: #0b7a53; background: rgba(14, 159, 110, .1); border-color: rgba(14, 159, 110, .35); }
html[data-theme="light"] .tbl-exit { background: rgba(255, 255, 255, .75); }
html[data-theme="light"] .rank-meta { color: #7a5c1e; }
html[data-theme="light"] .pro-cover { background: rgba(240, 244, 248, .6); }
html[data-theme="light"] .spark-wrap svg polyline { stroke: #0e9f6e; }

/* ---------- 浅色专项修复(v0.2.1 自查) ---------- */
/* 热图色块文字:暗色主题的淡彩在白底上对比不足,浅色换深色系 */
html[data-theme="light"] .hc-g { background: rgba(14, 159, 110, .12); color: #0b7a53; }
html[data-theme="light"] .hc-y { background: rgba(154, 116, 0, .12); color: #8a6400; }
html[data-theme="light"] .hc-o { background: rgba(216, 108, 28, .14); color: #b45309; }
html[data-theme="light"] .hc-r { background: rgba(214, 58, 49, .14); color: #c02318; }
html[data-theme="light"] .lg-g { background: rgba(14, 159, 110, .12); }
html[data-theme="light"] .lg-y { background: rgba(154, 116, 0, .12); }
html[data-theme="light"] .lg-o { background: rgba(216, 108, 28, .14); }
html[data-theme="light"] .lg-r { background: rgba(214, 58, 49, .14); }
/* 雷达图:亮绿描边/点在白底上偏浅,浅色用深一档;网格线同步调浅 */
html[data-theme="light"] .radar-wrap svg polygon[stroke="#34d399"] { stroke: #0e9f6e; }
html[data-theme="light"] .radar-wrap svg polygon[fill="rgba(52,211,153,.22)"] { fill: rgba(14, 159, 110, .16); }
html[data-theme="light"] .radar-wrap svg circle[fill="#34d399"] { fill: #0e9f6e; }
html[data-theme="light"] .radar-wrap svg line, html[data-theme="light"] .radar-wrap svg polygon[stroke="#232d3a"] { stroke: #c9d2db; }
html[data-theme="light"] .radar-wrap svg text { fill: #5b6774; }
/* 答题选项的对/错标记随结果着色(双主题通用) */
.q-opt.ok .muted { color: var(--acc); font-weight: 700; }
.q-opt.ng .muted { color: var(--red); font-weight: 700; }
/* 浅色下扑克牌阴影减淡,避免白底上过重 */
html[data-theme="light"] .pcard { box-shadow: 0 2px 6px rgba(30, 45, 60, .22); }

/* ---------- 牌型段位阶梯 ---------- */
.rank-ladder { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 6px; }
.rank-ladder span { font-size: 10px; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, .12); color: var(--sub); border: 1px solid var(--line); }
.rank-ladder span.on { background: var(--acc); color: #06231a; font-weight: 800; border-color: transparent; }
.rank-kyu { font-family: inherit; }

/* ---------- 金属段位色 ---------- */
.tk-b { color: #c07a4a; } .tk-s { color: #9fb0c0; } .tk-g { color: var(--gold); }
.tk-p { color: #7fd6cf; } .tk-d { color: #6db3f2; } .tk-m { color: #a97fe8; }
.rank-ladder span.on { background: transparent; color: inherit; border-color: currentColor; font-weight: 800; }
.rank-ladder span.tk-g.on { color: var(--gold); }
html[data-theme="light"] .tk-b { color: #9c5c30; }
html[data-theme="light"] .tk-s { color: #5f7488; }
html[data-theme="light"] .tk-p { color: #1f8f86; }
html[data-theme="light"] .tk-d { color: #2f7fd0; }
html[data-theme="light"] .tk-m { color: #7d4fc9; }

/* ---------- 段位图标 ---------- */
.rank-badge { width: 46px; height: 46px; border-radius: 14px; background: rgba(232, 176, 75, .12); border: 1px solid rgba(232, 176, 75, .4); display: flex; align-items: center; justify-content: center; flex: none; }
.rank-badge .ico { width: 26px; height: 26px; }
.rank-ladder span { display: inline-flex; align-items: center; gap: 3px; }
.rank-ladder .ico { width: 12px; height: 12px; }
.rc-ico { display: inline-flex; }
.rc-ico .ico { width: 14px; height: 14px; }
.sc-kyu { display: flex; align-items: center; gap: 5px; }
.sc-kyu .ico { width: 16px; height: 16px; color: #e8b04b; }
.lvl-cell b { display: flex; align-items: center; justify-content: center; gap: 3px; font-size: 12px; min-height: 18px; }

/* ---------- 段位卡片布局调整(v0.2.6):图标/文字分层,避免挤压 ---------- */
.rank-kyu { font-size: 42px; line-height: 1.05; }
.rank-kyu span { font-size: 13px; }
.rank-card { gap: 14px; }
.lvl-cell { padding: 10px 2px 8px; }
.lvl-ico { display: flex; justify-content: center; align-items: center; height: 22px; margin-bottom: 4px; }
.lvl-ico .ico { width: 18px; height: 18px; }
.lvl-cell b { display: block; font-size: 13px; min-height: 0; }

/* ---------- v0.2.7:段位展示统一竖排(图标在上,文字在下,缩小) ---------- */
.rank-left { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: none; width: 92px; }
.rank-kyu { font-size: 21px; letter-spacing: 1px; }
.rank-kyu span { font-size: 13px; margin-left: 1px; }
.rank-ladder { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin: 8px 0 6px; }
.rank-ladder span { flex-direction: column; gap: 3px; padding: 6px 2px 5px; border-radius: 9px; background: var(--panel); border: 1px solid var(--line); font-size: 10px; }
.rank-ladder .ico { width: 15px; height: 15px; }
.sc-kyu { flex-direction: column; align-items: flex-start; gap: 4px; font-size: 22px; }
.sc-kyu .ico { width: 18px; height: 18px; }

/* ---------- 牌局级复盘(v0.2.8) ---------- */
.sess-card { background: var(--panel); border: 1px solid var(--line); border-radius: 15px; padding: 13px 14px; margin-bottom: 10px; }
.sess-top { display: flex; justify-content: space-between; align-items: baseline; }
.sess-name { font-weight: 700; font-size: 14.5px; }
.sess-date { font-size: 11px; color: var(--sub); }
.sess-score { font-size: 12px; font-weight: 800; padding: 2px 10px; border-radius: 8px; flex: none; }
.sess-score.g { background: rgba(52,211,153,.15); color: var(--acc); }
.sess-score.y { background: rgba(232,192,75,.15); color: var(--yellow); }
.sess-meta { font-size: 11.5px; color: var(--sub); margin: 4px 0 7px; }
.sess-find { font-size: 12.5px; color: var(--soft); display: flex; gap: 8px; align-items: flex-start; }
.range-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.rr-pos { width: 32px; font-size: 12px; font-weight: 700; color: var(--sub); flex: none; }
.rr-track { flex: 1; height: 10px; background: var(--track); border-radius: 5px; position: relative; }
.rr-zone { position: absolute; top: 0; bottom: 0; background: rgba(52,211,153,.25); border-radius: 5px; }
.rr-dot { position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%; transform: translate(-50%, -50%); border: 2.5px solid var(--sheet); }
.rr-dot.g { background: var(--acc); } .rr-dot.y { background: var(--yellow); } .rr-dot.r { background: var(--red); }
.rr-val { width: 76px; font-size: 12px; text-align: right; flex: none; }
.rr-val small { display: block; font-size: 9.5px; color: var(--sub); }
.rr-mark { width: 40px; text-align: center; font-size: 10.5px; flex: none; }
.m-g { color: var(--acc); } .m-y { color: var(--yellow); } .m-r { color: var(--red); }
.leak-item { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--line); align-items: flex-start; }
.leak-item:last-child { border-bottom: none; }
.leak-item b { font-size: 13.5px; }
.street-ev-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12.5px; }
.street-ev-row .dist-name { width: 40px; }

/* ---------- v0.2.9:即时提示可关闭 + 移到顶部不挡牌 ---------- */
#toast { top: calc(58px + env(safe-area-inset-top)); bottom: auto; pointer-events: auto; cursor: pointer; }
#toast.on { transform: translateX(-50%) translateY(4px); }

/* ---------- v0.3.0:多桌型环形座位布局 ---------- */
.seat { transform: translate(-50%, -50%); }
.seat-act { top: calc(100% + 3px); bottom: auto; }
.seat.low .seat-act { top: auto; bottom: calc(100% + 3px); }
.seats.small .seat { width: 78px; }
.seats.small .seat-name { font-size: 10px; }
.seats.small .seat-style { font-size: 8.5px; }
.seats.small .seat-stack { font-size: 9.5px; }
.seats.small .pcard.mini { width: 19px; height: 26px; border-radius: 3px; }
.seats.small .pcard.mini .pr { font-size: 9px; } .seats.small .pcard.mini .ps { font-size: 8px; }
.seats.small .seat-box { padding: 5px 6px; border-radius: 10px; }