:root{color-scheme:dark;--ink:#f6ead4;--muted:#bdd0c3;--gold:#edce8f;--line:#e9c99045;--base:#0b231f;font:15px/1.45 system-ui,"Microsoft YaHei",sans-serif}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);background:radial-gradient(ellipse at top,#163b32,#091e1b 75%);min-height:100dvh}
button,a,summary{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{cursor:default;opacity:.4}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #ffd38a;outline-offset:3px}
a{color:var(--gold)}
[hidden]{display:none!important}
.top{width:min(1140px,100%);margin:auto;display:flex;align-items:center;justify-content:space-between;padding:15px 24px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:700 18px/1.15 Georgia,"Songti SC",SimSun,serif;letter-spacing:.16em}
.brand small{display:block;margin-top:5px;color:var(--gold);font:500 8px/1.2 system-ui;letter-spacing:.23em}
.brand-mark{display:grid;place-items:center;border:1px solid var(--line);width:36px;height:36px;border-radius:11px;color:var(--gold);font-size:24px;letter-spacing:0}
.top-actions,.controls,.dialog-actions{display:flex;gap:9px;justify-content:center}
.ghost,.primary{border:1px solid var(--line);background:#15392f;border-radius:9px;min-height:40px;padding:7px 17px;font-weight:650}
.ghost:hover:enabled{background:#245244;border-color:#edce8f99}
.primary{background:linear-gradient(#ffe2a7,#e4b668);color:#251f10;border-color:#ffdb90;box-shadow:0 3px 12px #0003}
.primary:hover:enabled{background:#ffe9b9}
main{max-width:1140px;margin:auto;padding:0 24px 25px}
.scoreboard{display:flex;justify-content:center;gap:8px;align-items:stretch;margin:0 auto 10px}
.team,.round{display:flex;align-items:center;gap:12px;border:1px solid var(--line);padding:4px 15px;border-radius:10px;background:#102e27}
.team small,.round small{color:var(--muted);white-space:nowrap}
.team b{font:700 25px/1.15 Georgia,serif;color:#f5d396}
.team.away b{color:#f9b6aa}
.round{display:flex;flex-direction:column;justify-content:center;gap:0;min-width:100px}
.round strong{font-size:15px;color:var(--gold)}
.table{display:grid;grid-template:70px minmax(150px,1fr) 24px / minmax(100px,1fr) minmax(0,2.9fr) minmax(100px,1fr);align-items:center;justify-items:center;position:relative;isolation:isolate;min-height:287px;border:5px solid #37503c;border-radius:90px 90px 62px 62px;box-shadow:0 16px 28px #0005,inset 0 0 45px #02140dc0,0 0 0 1px #9b7c4e;overflow:hidden;background:radial-gradient(ellipse,#25604c,#194938 72%,#14392d);background-image:repeating-linear-gradient(128deg,#0000 0px 3px,#011f131a 4px 5px),radial-gradient(ellipse,#25604c,#194938 72%,#14392d)}
.table-line{position:absolute;inset:10px;border-radius:77px 77px 52px 52px;border:1px solid #ddc48545;z-index:-1;pointer-events:none}
.north{grid-area:1/2}.east{grid-area:2/3}.west{grid-area:2/1}
.player{background:#11382d;border:1px solid #9ead7159;min-width:86px;max-width:100%;border-radius:12px;padding:6px 10px;text-align:center;position:relative}
.player.turn{border-color:#ffcf7e;box-shadow:0 0 0 2px #edce8f33}
.player strong{display:block;white-space:nowrap}
.player small{color:var(--muted);font-size:11px;white-space:nowrap}
.player .token{font:700 16px Georgia,serif;color:var(--gold);margin-right:5px}
.center{grid-area:2/2;text-align:center;position:relative;width:100%;min-width:0}
.felt-mark{position:absolute;inset:0;z-index:-1;display:grid;place-items:center;pointer-events:none;font:800 clamp(65px,12vw,146px)/1 "Songti SC",SimSun,serif;color:#b6d3a417;letter-spacing:.12em}
.call{font-size:11px;letter-spacing:.13em;color:#ffe2a4;min-height:16px}
.current{font-size:17px;font-weight:750;min-height:25px}
.table-cards{display:flex;justify-content:center;align-items:center;gap:3px;min-height:61px;margin:6px auto 2px}
.passes{font-size:11px;color:#d3e4d7;min-height:16px}
.rack{position:relative;margin:-11px auto 0;max-width:1050px;padding:14px 16px 12px;background:#102b25;border:1px solid var(--line);border-radius:17px;box-shadow:0 10px 24px #0004}
.rack-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
.rack-title{white-space:nowrap;font-weight:750;color:var(--ink)}
.rack-title span{font-weight:400;color:var(--muted);font-size:12px}
.status{text-align:center;color:var(--gold);font-size:13px}
.sort{min-height:31px;padding:3px 11px;white-space:nowrap;font-size:12px}
.hand{display:grid;grid-template-columns:repeat(27,minmax(0,1fr));gap:2px;min-height:77px;align-items:end}
.card{position:relative;display:grid;grid-template-rows:1fr 1fr;justify-items:center;align-items:center;border:1px solid #f7eac8;background:linear-gradient(150deg,#fffaf0,#eadabe);box-shadow:0 3px 6px #0004;border-radius:6px;color:#132e26;min-width:0;height:76px;padding:4px 0;line-height:1;font-family:Georgia,"Microsoft YaHei",serif}
.card.red{color:#a02b36}
.card strong{font-size:clamp(10px,1.85vw,19px);white-space:nowrap}
.card .suit{font-size:clamp(14px,2.8vw,30px);font-weight:500}
.card.joker .suit{font-size:clamp(13px,2.1vw,22px)}
.card.level::after{content:"";position:absolute;bottom:2px;width:10px;height:2px;border-radius:2px;background:#887039}
.card.wild{background:linear-gradient(150deg,#fff3cf,#f1bf74);border-color:#ffe89e}
.card.wild::after{width:64%;background:#a63d38}
button.card{transition:transform .12s ease,box-shadow .12s ease}
button.card[aria-pressed=true]{transform:translateY(-7px);box-shadow:0 0 0 2px #edc672,0 6px 10px #0007;z-index:1}
button.card:disabled{opacity:1}
button.card:disabled[aria-pressed=false]{filter:saturate(.8)}
button.card.ineligible{opacity:.58}
.card.mini{width:min(38px,9%);height:59px}
.card.mini strong{font-size:14px}
.card.mini .suit{font-size:19px}
.note{text-align:center;min-height:23px;color:var(--muted);font-size:12px;padding:4px 0}
.controls button{min-width:84px}
.controls .primary{min-width:122px}
.choices{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;padding-top:9px}
.choices button{min-height:31px;padding:3px 8px;font-size:12px}
.choices button[aria-pressed=true]{border-color:#f9d391;color:var(--gold)}
.history{margin:12px auto 0;max-width:1050px;color:var(--muted);font-size:13px}
.history summary{cursor:pointer;padding:8px 2px;width:max-content}
.history ol{max-height:220px;overflow:auto;margin:2px 0;background:#0d2821;border-radius:10px;padding:10px 12px 10px 34px}
dialog{background:#14352d;color:var(--ink);border:1px solid var(--line);border-radius:17px;width:min(580px,calc(100vw - 32px));padding:20px;box-shadow:0 15px 60px #0008}
dialog::backdrop{background:#031512c4}
dialog h2{margin:0;color:var(--gold);font-size:20px}
dialog li{margin:8px 0}
.dialog-head{display:flex;align-items:center;justify-content:space-between}
.dialog-actions{justify-content:flex-end;flex-wrap:wrap}
@media(max-width:820px){
  .hand{grid-template-columns:repeat(14,minmax(0,1fr));gap:5px 3px}
  .card{height:61px}.card strong{font-size:17px}.card .suit{font-size:23px}
}
@media(max-width:520px){
  .top{padding:12px}.top-actions{gap:5px}.top-actions button{padding:4px 10px;min-height:34px}
  main{padding:0 8px 18px}.scoreboard{margin-bottom:8px}
  .table{min-height:235px;border-width:3px;border-radius:37px;grid-template:57px minmax(136px,1fr) 22px / 67px minmax(0,1fr) 67px}
  .table-line{inset:6px;border-radius:31px}
  .player{min-width:59px;padding:4px;border-radius:8px}.player strong{font-size:12px}.player small{font-size:10px}
  .player .token{font-size:12px;margin-right:3px}.current{font-size:14px}
  .table-cards{gap:1px}.card.mini{width:min(30px,9.4%);height:47px;border-radius:4px}
  .card.mini strong{font-size:10px}.card.mini .suit{font-size:14px}
  .rack{padding:11px 7px 9px}.rack-title{font-size:13px}.rack-title span{font-size:10px}.status{font-size:11px}
  .card{height:52px;border-radius:4px}.card strong{font-size:clamp(8px,3vw,15px)}.card .suit{font-size:clamp(14px,4.6vw,22px)}
  .card.joker .suit{font-size:13px}.hand{gap:5px 2px}
  .controls button{min-height:43px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}

.player .portrait{display:inline-block;width:25px;height:25px;object-fit:contain;vertical-align:middle;margin-right:5px}
.card.joker{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;overflow:hidden}
.joker-art{width:100%;height:70%;min-height:0;object-fit:contain;pointer-events:none}
.joker-art.mono{filter:grayscale(1)}
.joker-mark{font:700 clamp(8px,1.1vw,12px)/1.1 system-ui,sans-serif;white-space:nowrap}
.card.mini .joker-mark{font-size:8px}
@media(max-width:520px){.player .portrait{width:18px;height:18px;margin-right:2px}.joker-mark{font-size:8px}.card.mini .joker-mark{font-size:7px}}


.table{grid-template-rows:65px minmax(78px,auto) minmax(73px,auto);padding-bottom:17px}
.table-cards{grid-area:3/1/4/4;align-self:start;flex-wrap:wrap;gap:5px 8px;max-width:100%;padding:0 12px;min-height:64px}
.played-hand{display:grid;justify-items:center;gap:2px;padding:1px 5px 4px;border:1px solid transparent;border-radius:8px}
.played-hand.leading{border-color:#ffdf9d91;background:#11392b80}
.played-hand small{font-size:10px;color:var(--muted)}
.played-row{display:flex;justify-content:center;gap:2px}
.played-row .card.mini{width:26px;height:40px}
.played-row .card.mini strong{font-size:12px}
.played-row .card.mini .suit{font-size:15px}
.rack-tools{display:flex;gap:5px;white-space:nowrap}
.rack-tools button[aria-pressed=true]{color:var(--gold);border-color:var(--gold)}
.hand{display:flex;flex-wrap:wrap;align-items:end;gap:9px 12px;user-select:none}
.hand-group{display:grid;justify-items:start;align-content:end;min-width:0;gap:5px}
.group-label{background:transparent;border:0;color:var(--gold);padding:0 0 0 2px;font-size:10px;line-height:1.35}
.group-cards{display:flex;gap:2px}
.group-cards .card{width:32px;touch-action:none}
.group-cards .card[aria-pressed=true]{transform:translateY(-4px)}
.group-cards .card.drop-target{box-shadow:0 0 0 2px #ffe4a5;z-index:2}
.hand.dragging .card{cursor:grabbing}
.wild-as{position:absolute;top:1px;right:1px;color:#982733;font:700 8px/1 system-ui;background:#fff6d9;padding:1px;border-radius:2px}
.split-drop{margin:7px auto 0;padding:6px;text-align:center;border:1px dashed var(--gold);border-radius:7px;color:var(--gold);font-size:12px}
@media(max-width:820px){.group-cards .card{width:27px}}
@media(max-width:520px){
  .table{grid-template-rows:51px minmax(64px,auto) minmax(67px,auto)}
  .table-cards{gap:3px 4px;padding:0 5px}
  .played-hand{padding:1px 2px 3px}
  .played-row .card.mini{width:21px;height:34px}
  .played-row .card.mini strong{font-size:10px}
  .played-row .card.mini .suit{font-size:13px}
  .hand{gap:7px 8px}
  .group-cards .card{width:23px}
  .rack-top{flex-wrap:wrap}
  .rack-tools .sort{padding:2px 5px;font-size:10px}
}