/* 牌桌样式沿用 legacy（靛蓝桌布、瓷白牌面、黄铜色），下面追加主界面和各子页面 */
:root{
  --felt:#1e3156; --felt-2:#162540; --felt-3:#2b4474;
  --porcelain:#f4f6fa; --porcelain-edge:#c3cbdf;
  --ink:#1a2132; --cinnabar:#c7372d;
  --brass:#e2ab4b; --brass-ink:#2a1c04;
  --text:#e8edf9; --mist:#a3b2d3; --line:rgba(214,226,255,.16);
  --f-display:"Ma Shan Zheng","STKaiti","KaiTi",serif;
  --f-rank:"Noto Serif SC","Songti SC","SimSun",serif;
  --f-ui:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --cw:clamp(46px,9.5vw,70px);
  --sw:clamp(30px,6.2vw,42px);
  --shade:10,18,36; --bar-bg:rgba(14,24,46,.94); --warn:#ffb4a8; --down:#ff9d90; --card-edge:#c3cbdf;
  color-scheme:dark;
}
:root[data-theme="light"]{--felt:#dde4f3; --felt-2:#c8d2ea; --felt-3:#eef2fa;
  --porcelain-edge:#8e9bbd; --cinnabar:#b32a21;
  --brass:#8f6208; --brass-ink:#fff;
  --text:#1a2132; --mist:#47557a; --line:rgba(30,49,86,.22);
  --shade:255,255,255; --bar-bg:rgba(236,241,250,.95); --warn:#b3261e; --down:#b3261e;
  color-scheme:light;}
:root[data-theme="light"] body[data-felt="jade"]{--felt:#d3e8df;--felt-2:#bcd9cd;--felt-3:#ebf6f1}
:root[data-theme="light"] body[data-felt="plum"]{--felt:#ead7e6;--felt-2:#dcc0d6;--felt-3:#f6eaf3}
@media (prefers-color-scheme:light){
:root:not([data-theme="dark"]){--felt:#dde4f3; --felt-2:#c8d2ea; --felt-3:#eef2fa;
  --porcelain-edge:#8e9bbd; --cinnabar:#b32a21;
  --brass:#8f6208; --brass-ink:#fff;
  --text:#1a2132; --mist:#47557a; --line:rgba(30,49,86,.22);
  --shade:255,255,255; --bar-bg:rgba(236,241,250,.95); --warn:#b3261e; --down:#b3261e;
  color-scheme:light;}
:root:not([data-theme="dark"]) body[data-felt="jade"]{--felt:#d3e8df;--felt-2:#bcd9cd;--felt-3:#ebf6f1}
:root:not([data-theme="dark"]) body[data-felt="plum"]{--felt:#ead7e6;--felt-2:#dcc0d6;--felt-3:#f6eaf3}
}
html,body{height:100%}
body[data-felt="jade"]{--felt:#1c4a40;--felt-2:#123630;--felt-3:#276153}
body[data-felt="plum"]{--felt:#47223f;--felt-2:#34182f;--felt-3:#5f2f53}
body{
  background-color:var(--felt-2);
  background-image:
    radial-gradient(rgba(214,226,255,.055) 1.2px,transparent 1.7px),
    radial-gradient(ellipse at 50% 38%,var(--felt-3) 0%,var(--felt) 42%,var(--felt-2) 100%);
  background-size:22px 22px,100% 100%;
  color:var(--text);font-family:var(--f-ui);overflow:auto;
}
.app{
  height:100%;min-height:560px;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:10px 12px;max-width:1100px;margin:0 auto;
}
/* header */
.top{display:flex;align-items:center;gap:8px}
.top h1{margin:0 4px 0 0;font-family:var(--f-display);font-weight:400;font-size:30px;line-height:1;color:var(--brass);letter-spacing:.04em}
.stakes{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-right:auto;color:var(--mist);font-size:13px;min-width:0}
.stakes b{color:var(--text);font-variant-numeric:tabular-nums;font-size:15px;margin-left:3px}
.lv{font:600 12px var(--f-ui);padding:3px 10px;min-width:0;border-radius:999px;background:transparent;border:1px solid rgba(226,171,75,.55);color:var(--brass)}
.lv.hell{background:var(--cinnabar);border-color:var(--cinnabar);color:#fff}
.icon{width:34px;height:34px;min-width:0;padding:0;display:grid;place-items:center;border-radius:50%;background:rgba(var(--shade),.3);border:1px solid var(--line);color:var(--text)}
.icon svg{width:18px;height:18px;display:block}
/* tracker */
.tracker{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:rgba(var(--shade),.28)}
.tk{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;padding:3px 0;border-left:1px solid var(--line)}
.tk:first-child{border-left:0}
.tk span{font:600 11px/1.2 var(--f-rank);color:var(--mist)}
.tk b{font:700 13px/1.3 var(--f-ui);font-variant-numeric:tabular-nums}
.tk.zero b{color:rgba(163,178,211,.35)}
.tk.hot b{color:var(--brass)}
/* table */
.table{flex:1;min-height:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px}
.seat{display:flex;flex-direction:column;align-items:center;gap:5px;padding-top:4px;width:76px}
.ava{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-size:24px;background:var(--felt-3);border:2px solid var(--line);color:var(--text);transition:border-color .2s,box-shadow .2s}
.seat.active .ava,.me.active .ava{border-color:var(--brass);box-shadow:0 0 0 4px rgba(226,171,75,.22)}
.nm{font-size:13px;font-weight:600}
.badges{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;min-height:19px}
.role{font-size:11px;padding:1px 8px;border-radius:999px;border:1px solid var(--mist);color:var(--mist);line-height:1.5}
.role.lord{background:var(--brass);border-color:var(--brass);color:var(--brass-ink);font-weight:700}
.dbl{font-size:11px;padding:1px 7px;border-radius:999px;background:var(--cinnabar);color:#fff;line-height:1.55;font-weight:700}
.stack{position:relative;margin-top:2px}
.back{width:38px;height:53px;border-radius:5px;border:2px solid var(--porcelain);box-sizing:border-box;
  background-color:var(--felt-3);
  background-image:repeating-linear-gradient(45deg,rgba(244,246,250,.22) 0 1px,transparent 1px 7px),repeating-linear-gradient(-45deg,rgba(244,246,250,.22) 0 1px,transparent 1px 7px);
  box-shadow:3px 3px 0 -1px var(--felt-2),3px 3px 0 0 var(--porcelain-edge)}
.stack b{position:absolute;inset:0;display:grid;place-items:center;font:700 18px var(--f-ui);font-variant-numeric:tabular-nums;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.alarm{font-size:11px;font-weight:700;color:#fff;background:var(--cinnabar);padding:1px 8px;border-radius:999px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.35}}
.pts{font-size:11px;color:var(--mist)}
.pts b{color:var(--text);font-variant-numeric:tabular-nums}
.well{position:relative;min-width:0;display:flex;flex-direction:column;gap:8px}
.dipai{display:flex;align-items:center;justify-content:center;gap:6px}
.dipai .cap{font-size:12px;color:var(--mist);margin-right:4px}
.dipai .back{width:var(--sw);height:calc(var(--sw)*1.4);box-shadow:none;border-width:1.5px}
.status{text-align:center;font-size:13px;color:var(--mist);min-height:18px}
.status.warn{color:var(--warn)}
.outs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.out{min-height:calc(var(--sw)*1.4 + 4px);display:flex;align-items:center;min-width:0}
.out-left{justify-content:flex-start}
.out-right{justify-content:flex-end}
.out-me{justify-content:center;margin-top:auto}
.row{display:flex;max-width:100%}
.row.reveal{opacity:.78}
.row.enter .card{animation:land .3s cubic-bezier(.2,.8,.3,1) both;animation-delay:calc(var(--i,0)*16ms)}
@keyframes land{from{opacity:0;transform:translateY(12px) scale(.88)}to{opacity:1;transform:none}}
.say{font:600 15px var(--f-ui);padding:5px 14px;border-radius:999px;background:rgba(var(--shade),.45);border:1px solid var(--line);color:var(--mist)}
.say.bid{color:var(--brass);border-color:rgba(226,171,75,.5)}
.announce{position:absolute;left:0;right:0;top:42%;text-align:center;pointer-events:none;font-family:var(--f-display);font-size:clamp(40px,9vw,72px);color:var(--brass);text-shadow:0 3px 0 rgba(10,18,36,.6),0 0 28px rgba(226,171,75,.35);opacity:0}
.announce.big{color:#ffd6cf;text-shadow:0 3px 0 rgba(10,18,36,.6),0 0 30px rgba(199,55,45,.7)}
.announce.go{animation:pop 1.4s ease-out forwards}
@keyframes pop{0%{opacity:0;transform:scale(.6)}15%{opacity:1;transform:scale(1.12)}25%{transform:scale(1)}75%{opacity:1}100%{opacity:0;transform:translateY(-12px)}}
.toast{position:absolute;left:50%;bottom:calc(var(--sw)*1.4 + 14px);transform:translateX(-50%);background:var(--cinnabar);color:#fff;font-size:13px;font-weight:600;padding:6px 14px;border-radius:999px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s}
.toast.on{opacity:1}
/* me */
.mebar{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;justify-content:space-between;min-height:42px}
.me{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mist);flex-wrap:wrap}
.me .ava{width:32px;height:32px;font-size:18px}
.me b{color:var(--text);font-variant-numeric:tabular-nums}
.title{font-size:11px;padding:1px 8px;border-radius:4px;background:rgba(226,171,75,.14);color:var(--brass);border:1px solid rgba(226,171,75,.35)}
.clock{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:2px solid var(--brass);color:var(--brass);font:700 15px var(--f-ui);font-variant-numeric:tabular-nums;box-sizing:border-box}
.clock.urgent{border-color:var(--cinnabar);color:#fff;background:var(--cinnabar);animation:blink .5s steps(2) infinite}
.achv{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 14px);transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:10px;background:var(--brass);color:var(--brass-ink);padding:8px 18px;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.4);animation:drop .35s ease-out both;white-space:nowrap}
.achv span{font-size:12px;opacity:.75}
.achv b{font-family:var(--f-display);font-weight:400;font-size:22px;line-height:1}
.shake{animation:shake .45s}
.shake-big{animation:shake .8s}
@keyframes shake{10%,50%,90%{transform:translate(-6px,2px)}30%,70%{transform:translate(6px,-3px)}100%{transform:none}}
.flash{position:fixed;inset:0;pointer-events:none;z-index:30;background:radial-gradient(circle at 50% 45%,rgba(255,214,160,.55),rgba(199,55,45,.25) 45%,transparent 75%);opacity:0}
.flash.go{animation:flash .6s ease-out}
@keyframes flash{0%{opacity:1}100%{opacity:0}}
@keyframes drop{from{opacity:0;transform:translate(-50%,-14px)}to{opacity:1;transform:translate(-50%,0)}}
.actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-left:auto}
button{font:600 15px var(--f-ui);padding:9px 18px;border-radius:999px;min-width:68px;cursor:pointer;border:1px solid transparent;transition:transform .08s,opacity .15s}
button:active:not(:disabled){transform:translateY(1px)}
button:disabled{opacity:.32;cursor:default}
button:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.gold{background:var(--brass);color:var(--brass-ink)}
.ghost{background:rgba(var(--shade),.3);border-color:var(--line);color:var(--text)}
.top .ghost{padding:6px 14px;font-size:13px;min-width:0}
/* hand */
.hand{display:flex;justify-content:center;align-items:flex-end;height:calc(var(--cw)*1.4 + 18px);touch-action:none;user-select:none;-webkit-user-select:none}
/* cards */
.card{position:relative;flex:none;width:var(--cw);height:calc(var(--cw)*1.4);box-sizing:border-box;border-radius:calc(var(--cw)*.1);
  background:linear-gradient(180deg,#fff 0%,var(--porcelain) 100%);border:1px solid var(--porcelain-edge);
  box-shadow:-2px 0 5px rgba(8,14,32,.28);color:var(--ink);transition:transform .12s ease}
.card.sm{--cw:var(--sw)}
.card.red{color:var(--cinnabar)}
.card .rk{position:absolute;left:7%;top:4%;font-family:var(--f-rank);font-weight:900;font-size:calc(var(--cw)*.3);line-height:1;letter-spacing:-.08em}
.card .st{position:absolute;left:9%;top:calc(6% + var(--cw)*.3);font-size:calc(var(--cw)*.23);line-height:1}
.card .big{position:absolute;right:9%;bottom:6%;font-size:calc(var(--cw)*.52);line-height:1}
.card .jk{position:absolute;left:8%;top:5%;writing-mode:vertical-rl;text-orientation:upright;font:900 calc(var(--cw)*.16)/1 var(--f-rank);letter-spacing:-.18em}
.card .wang{position:absolute;right:7%;bottom:5%;font-family:var(--f-display);font-size:calc(var(--cw)*.5);line-height:1}
#hand .card{cursor:pointer}
#hand .card.sel{transform:translateY(-16px)}
#hand .card.dealt{animation:land .2s ease-out both}
.card.fresh::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2px var(--brass)}
/* overlays */
.overlay{position:fixed;inset:0;display:grid;place-items:center;background:rgba(8,14,30,.62);padding:16px;z-index:20}
.panel{background:var(--felt);border:1px solid var(--line);border-radius:14px;padding:22px 24px;width:min(340px,100%);box-sizing:border-box;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.panel h2{margin:0;font-family:var(--f-display);font-weight:400;font-size:46px;line-height:1.1;color:var(--brass)}
.panel h2.lose{color:var(--mist)}
.panel p{margin:6px 0 14px;color:var(--mist);font-size:13px}
.panel table{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:16px}
.panel td{padding:7px 4px;border-top:1px solid var(--line);text-align:left}
.panel td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.panel td.up{color:var(--brass)}
.panel td.down{color:var(--down)}
.panel .btns{display:flex;gap:8px;justify-content:center}
.panel.wide{width:min(440px,100%);text-align:left;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;padding:18px 20px 20px}
.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.sheet-head h2{font-size:34px}
.field{margin-top:14px}
.lbl{font-size:12px;color:var(--mist);letter-spacing:.08em;margin-bottom:7px}
.seg{display:flex;border:1px solid var(--line);border-radius:999px;padding:3px;gap:3px;background:rgba(var(--shade),.35)}
.seg button{flex:1;min-width:0;padding:7px 8px;font-size:14px;background:transparent;color:var(--text);border:0}
.seg button[aria-pressed="true"]{background:var(--brass);color:var(--brass-ink)}
.note{margin:7px 2px 0;font-size:12px;color:var(--mist);line-height:1.6}
.note:empty{display:none}
.tg{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:14px;cursor:pointer}
.tg:first-child{border-top:0}
.tg small{display:block;color:var(--mist);font-size:12px;margin-top:2px}
.tg input{appearance:none;-webkit-appearance:none;width:40px;height:22px;border-radius:999px;background:rgba(var(--shade),.55);border:1px solid var(--line);position:relative;cursor:pointer;flex:none;margin:0;transition:background .15s}
.tg input::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--mist);transition:transform .15s}
.tg input:checked{background:var(--brass);border-color:var(--brass)}
.tg input:checked::after{transform:translateX(18px);background:var(--brass-ink)}
.tg input:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.tg input:disabled{opacity:.4}
.statgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:10px}
.stat{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:rgba(var(--shade),.25)}
.stat b{display:block;font-size:20px;font-variant-numeric:tabular-nums}
.stat span{font-size:11px;color:var(--mist)}
.ach-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.ach{border:1px dashed var(--line);border-radius:8px;padding:7px 10px;opacity:.5}
.ach b{display:block;font-size:13px}
.ach span{font-size:11px;color:var(--mist)}
.ach.on{opacity:1;border-style:solid;border-color:rgba(226,171,75,.55);background:rgba(226,171,75,.08)}
.ach.on b{color:var(--brass)}
.lbl .count{float:right;letter-spacing:0;color:var(--brass)}
.log{list-style:none;margin:0;padding:0;font-size:13px}
.log li{display:flex;gap:10px;align-items:baseline;padding:5px 0}
.log li.sep{border-top:1px dashed var(--line);padding:0;margin:4px 0}
.log li.sys{display:block;color:var(--mist);font-size:12px}
.log .who{flex:none;width:3em;color:var(--mist)}
.log .what{display:flex;flex-wrap:wrap;gap:3px;align-items:center;min-width:0}
.log .what em{font-style:normal;color:var(--mist);font-size:11px;margin-left:4px}
.log .what i{font-style:normal;color:var(--mist)}
.lc{display:inline-block;background:var(--porcelain);color:var(--ink);border-radius:3px;padding:0 4px;font:700 12px/1.6 var(--f-rank);font-variant-numeric:tabular-nums}
.lc.red{color:var(--cinnabar)}
.panel .rank{margin:-6px 0 14px;font-size:13px;color:var(--mist)}
.panel .rank b{color:var(--brass)}
.rules{margin-top:16px;border-top:1px solid var(--line);padding-top:10px;font-size:13px;line-height:1.7;color:var(--text)}
.rules summary{cursor:pointer;color:var(--brass);font-weight:600}
.rules ul{padding-left:18px;margin:8px 0}
.rules li{margin:2px 0}
.rules em{font-style:normal;color:var(--brass)}
@media (max-width:640px){
  .ach-grid{grid-template-columns:1fr}
  .lv{display:none}
  .outs{grid-template-columns:1fr}
  .seat{width:64px}
  .ava{width:38px;height:38px;font-size:20px}
  .top h1{font-size:26px}
  button{padding:8px 14px;font-size:14px;min-width:56px}
  .statgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:430px){.stakes .hide-narrow{display:none}}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  .row.enter .card,#hand .card.dealt,.achv,.shake,.shake-big,.flash.go{animation:none}
  .clock.urgent{animation:none}
  .announce.go{animation:fade 1.4s steps(1) forwards}
  @keyframes fade{0%{opacity:1}100%{opacity:0}}
  .alarm{animation:none}
}