/* 九宫连击：界面、牌桌与响应式布局 */
:root{
  --paper:#f4f4ef;--surface:#fff;--ink:#253b32;--muted:#6f7c74;--line:#dfe5dc;
  --green:#275d48;--green-hover:#1d4a38;--table:#183e30;--table-muted:#b9d0c3;
  --gold:#d4b06a;--gold-b:#f0d493;--gold-dim:rgba(212,176,106,.35);
  --text:#f1f3e9;--text-dim:#b9d0c3;--panel-border:rgba(212,176,106,.20);
  --serif:"Songti SC","STSong","SimSun",Georgia,serif;
  --radius-control:8px;--radius-card:9px;--radius-panel:14px;
  --card-height:clamp(104px,calc((100dvh - 380px)/3),164px);
  --card-width:calc(var(--card-height)*.715);--grid-gap:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{min-height:100%;background:var(--paper)}
body{min-height:100vh;min-height:100dvh;font-family:-apple-system,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:var(--ink);background:var(--paper);font-size:14px;line-height:1.5;overflow-x:hidden}
button,input{font:inherit}button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{cursor:not-allowed}button,input{transition:background .16s,border-color .16s,box-shadow .16s}
button:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #58a5d1;outline-offset:4px}
.hidden{display:none!important}::selection{background:#d5e5d7}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-thumb{background:#c6d0c5;border-radius:4px}
button.primary{display:inline-flex;justify-content:center;align-items:center;min-height:48px;padding:12px 28px;border:1px solid var(--green);border-radius:8px;background:var(--green);color:#fff;font-size:15px;font-weight:600;letter-spacing:.5px}
button.primary:hover{background:var(--green-hover)}
/* 对局设置 */
#setup{display:flex;align-items:center;justify-content:center;min-height:100dvh;padding:32px 20px}
.setup-box{width:100%;max-width:560px;padding:36px 40px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 36px #283a2310}
.setup-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}
.setup-box h1{font-family:var(--serif);font-size:32px;letter-spacing:3px;color:var(--green);font-weight:700}
.suit-row{font-size:16px;letter-spacing:7px;color:var(--green);white-space:nowrap}.suit-row .r{color:#ae504a}
.mode-switch{display:flex;padding:4px;background:#eef1ea;border-radius:9px;margin-bottom:26px;gap:4px}
.mode-switch button{flex:1;min-height:40px;border:0;border-radius:6px;background:transparent;color:var(--muted);font-weight:500}
.mode-switch button[aria-pressed="true"]{background:#fff;color:var(--green);box-shadow:0 1px 5px #1a362215}
.mode-switch button:disabled{opacity:.55}
.setup-label{display:block;font-size:13px;font-weight:600;margin-bottom:10px}.setup-label small{float:right;font-weight:400;color:var(--muted)}
.count-row{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:24px}
.count-btn{min-height:42px;border:1px solid var(--line);background:#fff;border-radius:7px;color:var(--muted);font-size:14px}.count-btn:hover{border-color:#8bab92}.count-btn.on{color:var(--green);border-color:#729a7a;background:#eff5eb;font-weight:600}
#name-list{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}.slot-row{display:flex;align-items:center;gap:10px}.slot-index{width:24px;color:#89958b;font-size:12px;font-variant-numeric:tabular-nums}
.name-inp,.lan-form-row input{flex:1;min-width:0;min-height:44px;padding:10px 12px;border-radius:7px;border:1px solid var(--line);background:#fff;color:var(--ink);outline:none}.name-inp::placeholder,.lan-form-row input::placeholder{color:#97a197}.name-inp:focus,.lan-form-row input:focus{border-color:#729a7a;box-shadow:0 0 0 3px #ecf3e8}
.who-btn{flex:0 0 78px;min-height:44px;padding:8px;border:1px solid var(--line);border-radius:7px;background:#f8f9f6;color:#647168;font-size:13px}.who-btn.ai{color:var(--green);background:#edf3e9;border-color:#d8e5d3}
#btn-start{width:100%}.setup-feedback{font-size:12px;color:#a4483e;margin-bottom:10px}.quick-rules{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;line-height:1.8;color:var(--muted)}.quick-rules summary{cursor:pointer;color:var(--green);font-weight:500}.quick-rules ul{padding-left:18px;margin-top:10px}
/* 局域网设置与房间 */
.lan-panel h3{font-size:17px;color:var(--ink);font-weight:600;margin-bottom:6px}.lan-panel p{font-size:13px;line-height:1.7;color:var(--muted)}.lan-form-row{display:flex;gap:8px;margin-top:14px}.lan-form-row button,.lan-copy,.lan-seat-row button,.lan-start,.lan-leave{min-height:40px;padding:8px 12px;border:1px solid var(--line);border-radius:7px;background:#f7f9f4;color:var(--green);font-size:13px;white-space:nowrap}.lan-form-row button:hover,.lan-copy:hover,.lan-seat-row button:hover{background:#edf3e8;border-color:#90ac90}
.lan-code{display:flex;align-items:center;gap:8px;margin:20px 0 12px}.lan-code b{font-size:26px;letter-spacing:4px;color:var(--green);font-variant-numeric:tabular-nums}.lan-copy{margin-left:auto;font-size:12px}.lan-meta{display:flex;justify-content:space-between;background:#f1f4ed;padding:9px 10px;border-radius:7px;font-size:12px;color:var(--muted)}#lan-status{margin-top:10px}.lan-roster{list-style:none;display:flex;flex-direction:column;gap:7px;margin:12px 0}.lan-roster li{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}.lan-presence{font-size:12px}.lan-presence.online{color:#3b7a52}.lan-presence.away{color:#a97425}.lan-presence.bot{color:#657b95}
.lan-seat-row{display:flex;align-items:center;gap:7px;margin-top:16px;font-size:12px;color:var(--muted)}.lan-seat-row button{min-height:36px;padding:6px 13px}.lan-seat-row button.on{background:#edf3e8;border-color:#729a7a}.lan-host-controls{display:flex;gap:7px;margin-top:14px}.lan-host-controls button{flex:1}.lan-host-controls .lan-start{flex:1.4;background:var(--green);color:#fff}.lan-start:disabled{opacity:.45}.lan-actions{margin-top:16px}.lan-leave{color:#a65447;background:#fff}.lan-error{margin-top:10px;font-size:12px;color:#a4483e;min-height:0}.lan-error:empty{display:none}.lan-events{padding-top:12px;margin-top:14px;border-top:1px solid var(--line);list-style:none;max-height:110px;overflow-y:auto}.lan-events li{display:flex;gap:8px;font-size:12px;padding:3px 0;color:var(--muted)}.lan-events time{font-variant-numeric:tabular-nums;color:#8e978d}
/* 牌桌外壳 */
#game:not(.hidden){min-height:100dvh;display:flex;flex-direction:column}header{background:#fff;border-bottom:1px solid var(--line)}.header-inner{max-width:1480px;margin:auto;min-height:66px;padding:10px 28px;display:flex;align-items:center;gap:24px}.hd-title{font-family:var(--serif);font-size:22px;font-weight:700;letter-spacing:2px;color:var(--green);white-space:nowrap}.hd-info{display:flex;gap:10px;align-items:center;margin-left:18px;flex:1;min-width:0}.hd-info span{font-size:13px;color:var(--muted);white-space:nowrap}.hd-info #hd-turn{color:var(--green);font-weight:600}.hd-info #hd-round{border-right:1px solid var(--line);padding-right:12px}#hd-act{display:none}.hd-info .combo-tag{padding:3px 9px;border-radius:5px;background:#f8f0da;color:#946d22;font-size:11px;font-weight:600}.end-tag{color:#ad682b!important}.hd-btns{display:flex;align-items:center;gap:6px}.hd-btns button{min-height:40px;padding:8px 10px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--muted);font-size:12px;white-space:nowrap}.hd-btns button:hover{background:#f1f4ee;color:var(--green)}.tool-icon{font-size:16px;display:inline-flex;align-items:center;justify-content:center;width:18px}.tool-label{margin-left:4px}.sound-control{position:relative}#sound-popover{position:absolute;top:calc(100% + 10px);right:0;z-index:70;display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:0 8px 30px #213c2720}.volume-control{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;white-space:nowrap}#volume-slider{width:92px;accent-color:var(--green)}#volume-value{width:32px;font-variant-numeric:tabular-nums}#btn-sound-mute{background:#f1f4ee;font-size:12px;padding:6px 9px;min-height:34px}#table-connection{font-size:11px;color:#557b65;white-space:nowrap}#table-connection[data-state="reconnecting"]{color:#a97425}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 276px;gap:24px;max-width:1480px;width:100%;margin:0 auto;padding:24px 28px;flex:1;align-items:start}
.center-col{position:relative;min-width:0;overflow:visible;border-radius:14px;background:var(--table);color:var(--text);box-shadow:0 2px 8px #1931260d;display:flex;flex-direction:column;min-height:calc(100dvh - 114px)}
.table-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 24px 0;font-size:12px;color:var(--table-muted)}.table-heading b{color:#e8ede1;font-weight:500;letter-spacing:1px}.table-heading span{font-size:11px;color:#a3bfaf}
.table-workspace{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 20px 18px;min-height:0;gap:10px}.table-row{display:flex;align-items:center;justify-content:center;gap:28px;max-width:100%}.pile-v{display:flex;flex-direction:column;align-items:center;gap:10px;width:64px;color:#afc7b7;font-size:11px;line-height:1.8;text-align:center}.pile-v b{display:block;font-size:20px;color:#e8d5a1;font-weight:500;font-variant-numeric:tabular-nums}.pile-top{min-height:66px}.pile-v .card.small{width:46px;height:64px}
#grid{display:grid;grid-template-columns:repeat(3,var(--card-width));gap:var(--grid-gap);padding:6px;position:relative}.cell{height:var(--card-height);display:flex;align-items:center;justify-content:center}#grid .card{width:var(--card-width);height:var(--card-height)}
#resolve-banner{min-height:0;max-width:100%;font-size:12px;line-height:1.5;color:#c6d9cb;text-align:center}#resolve-banner:empty{display:none}#resolve-banner.flash{animation:bannerFlash .8s ease}@keyframes bannerFlash{from{color:var(--gold-b)}to{color:#c6d9cb}}
/* 比分与对局信息 */
.side{display:flex;flex-direction:column;gap:24px;min-width:0}.panel{position:relative;min-width:0}.panel-title{font-size:12px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:600;color:var(--muted);margin-bottom:12px}.panel-title small{font-weight:400;font-size:11px}.score-panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 16px}#players-panel{display:flex;flex-direction:column;gap:10px}.pl-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px 10px;border:1px solid transparent;border-radius:8px;background:#f7f8f4}.pl-row.cur{background:#edf4e9;border-color:#c5d9bd}.pl-avatar{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#e8eee3;color:#708365;font-size:12px}.pl-row.cur .pl-avatar{background:var(--green);color:#fff}.pl-meta{min-width:0}.pl-name{font-weight:500;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pl-detail{display:block;color:#85907f;font-size:10px;margin-top:2px}.pl-score{font-size:23px;font-weight:500;line-height:1.1;color:var(--green);font-variant-numeric:tabular-nums}.pl-score small{display:block;text-align:right;font-size:10px;color:#93a08b;font-weight:400;margin-top:3px}.pl-hand{display:none}.mini-hand-card{display:none}
.log-panel{padding:0 4px}#log{max-height:225px;overflow-y:auto;font-size:12px;line-height:1.75;padding-right:5px}.log-row{padding:8px 0;border-bottom:1px solid var(--line);color:#788171}.cr{color:#b4534e}.cb{color:var(--green);font-weight:600}
#combo-panel{padding:0 4px;border-top:1px solid var(--line);padding-top:18px}.mini-tips{list-style:none;font-size:12px;color:#828a7b;line-height:1.85}.mini-tips li{padding:2px 0}.mini-tips b{color:#526747}#btn-quick-rules{margin-top:12px;min-height:36px;padding:7px 12px;border:1px solid #d6dfcf;border-radius:7px;background:transparent;color:var(--green);font-size:12px;cursor:pointer}
/* 棋盘下的行动与手牌 */
.hand-area{position:relative;z-index:25;border-top:1px solid #ffffff15;padding:14px 24px 18px;background:#143426;border-radius:0 0 14px 14px}.dock-inner{max-width:700px;margin:auto}.action-strip{position:relative}.action-strip-title{position:absolute;left:0;top:-40px;color:#b9d0c3;font-size:11px;display:none}.action-strip-title span{color:var(--gold-b);margin-left:8px}.actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.actions button{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:54px;padding:7px 6px;border:1px solid #96bba340;border-radius:8px;background:#ffffff08;color:#e4ebdf;font-size:13px;line-height:1.4}.actions button b{font-weight:500}.actions button small{font-size:10px;color:#95b49e;margin-top:3px}.actions button:enabled:hover{background:#ffffff13;border-color:#c6d8ba}.actions button:disabled{color:#7e9b84;border-color:#ffffff0c;background:transparent}.actions button:disabled small{color:#62816b}.actions button.on,.actions button[aria-pressed="true"]{color:#203b27;background:#e5d4a6;border-color:#e5d4a6}.actions button.on small,.actions button[aria-pressed="true"] small{color:#586649}
#hint-bar{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;min-height:36px;padding:9px 0 5px;color:#d0dcca;font-size:12px;text-align:center;line-height:1.65}.hand-area.is-context-mode #hint-bar{min-height:52px}.hand-area.is-context-mode .actions{display:none}#hint:empty{display:none}#q-axis-actions,#combo-offer{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}#q-axis-actions button,#combo-offer button,#btn-cancel,#btn-abort,#btn-finish{min-height:38px;border:1px solid #91ad9180;border-radius:7px;background:#ffffff0a;color:#dce9d3;padding:7px 12px;font-size:12px;cursor:pointer}#q-axis-actions button:hover,#combo-offer button:hover,#btn-cancel:hover{background:#ffffff18}#btn-abort{color:#edb2a3;border-color:#e4ac9a60}#btn-finish{background:#e3d3a9;color:#234533;border-color:#e3d3a9}.combo-offer-title{align-self:center;color:#e3cc9b;font-size:12px}#combo-offer button.ghost{background:transparent;color:#a6bdab}#table-error{padding:8px 0;color:#f1b9a6;font-size:12px;text-align:center}
.hand-strip{margin-top:6px;text-align:center}#hand-owner{font-size:11px;line-height:1.5;color:#91ae98;margin-bottom:8px}#hand{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;min-height:82px;padding:3px 0}#hand .card{width:56px;height:78px;transform:none}#hand .card .rk{font-size:16px;top:6px;left:7px}#hand .card .st{font-size:10px;top:23px;left:7px}#hand .card .rk2{bottom:6px;right:7px;left:auto;top:auto}#hand .card .st2{bottom:23px;right:7px;left:auto;top:auto}#hand .card .ctr{font-size:25px}#hand .card.selectable:hover{transform:translateY(-6px)}.hand-area.is-empty #hand{min-height:20px}.hand-area.is-empty #hand-owner{margin-bottom:2px}.hand-empty{font-size:12px;color:#88a991}.rotate-tip{display:none}#game.ai-only .hand-area{display:none}
/* ============ 牌面 ============ */
.card{position:relative;width:82px;height:115px;border-radius:10px;user-select:none;
  background:linear-gradient(155deg,#fcf8ee 0%,#f3ecd9 70%,#ece2c8 100%);
  color:#20242c;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 5px 14px rgba(0,0,0,.4);
  transition:transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s}
.card::before{content:'';position:absolute;inset:3px;border-radius:7px;border:1px solid rgba(120,100,60,.14);pointer-events:none}
.card .rk{position:absolute;top:7px;left:9px;font-family:Georgia,"Times New Roman",serif;font-size:20px;font-weight:700;line-height:1}
.card .st{position:absolute;top:29px;left:9px;font-size:14px;line-height:1}
.card .rk2{top:auto;left:auto;bottom:7px;right:9px;transform:rotate(180deg)}
.card .st2{top:auto;left:auto;bottom:29px;right:9px;transform:rotate(180deg)}
.card .ctr{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:38px;opacity:.95}
.card.red{color:#bf4342}
.card.back{
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 45%),
    repeating-linear-gradient(45deg, rgba(212,176,106,.14) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, rgba(212,176,106,.14) 0 1px, transparent 1px 7px),
    linear-gradient(160deg,#2e3d57,#1c2736);
  border:3px solid #efe8d4;
  box-shadow:inset 0 0 0 1px rgba(212,176,106,.4), 0 5px 14px rgba(0,0,0,.4)}
.card.back::before{display:none}
.card.back::after{content:'';position:absolute;left:50%;top:50%;width:27px;height:27px;
  border:1px solid rgba(232,201,135,.72);transform:translate(-50%,-50%) rotate(45deg);
  box-shadow:0 0 0 5px rgba(10,20,30,.2),inset 0 0 0 5px rgba(212,176,106,.12)}
.card.empty{background:rgba(255,255,255,.03);border:1.5px dashed rgba(212,176,106,.25);box-shadow:none}
.card.empty::before{display:none}
.card.small{width:48px;height:66px;border-radius:7px}
.card.small .rk{font-size:13px;top:4px;left:6px}
.card.small .st{font-size:10px;top:19px;left:6px}
.card.small .rk2,.card.small .st2{display:none}
.card.small .ctr{font-size:22px}
.card.small.back::after{width:16px;height:16px;box-shadow:0 0 0 3px rgba(10,20,30,.2),inset 0 0 0 3px rgba(212,176,106,.12)}
.card.face::after{content:'';position:absolute;inset:4px;border-radius:7px;border:1px solid rgba(170,130,60,.5);pointer-events:none}
.card.small.face::after{inset:2px;border-radius:5px}
.card.selectable{cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 0 0 3px var(--gold),0 8px 20px rgba(0,0,0,.45)}
.card.selectable:hover{transform:translateY(-6px)}
.card.selected{transform:translateY(-10px)!important;box-shadow:0 0 0 3px #fff,0 14px 28px rgba(0,0,0,.5)}
.card.wild{box-shadow:0 0 0 3px #b085f5,0 5px 14px rgba(0,0,0,.45)}
.wild-tag{position:absolute;top:-9px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:1px;z-index:3;
  background:linear-gradient(135deg,#8f6ae0,#6a48c9);color:#fff;padding:2px 9px;border-radius:9px;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.card.elimming{animation:elimAnim 1.05s ease forwards;z-index:5}
@keyframes elimAnim{0%{transform:scale(1)}35%{transform:scale(1.16);box-shadow:0 0 30px 8px rgba(212,176,106,.9)}100%{transform:scale(.15) rotate(24deg);opacity:0}}
.card.q-reveal{animation:qReveal .58s cubic-bezier(.2,.8,.25,1);z-index:6}
@keyframes qReveal{0%{transform:rotateY(88deg) scale(.86);filter:brightness(1.7)}65%{transform:rotateY(-7deg) scale(1.05);box-shadow:0 0 28px rgba(111,210,255,.72)}100%{transform:rotateY(0) scale(1)}}
.card.q-line-hover{outline:3px solid #78d8ff;outline-offset:-3px;box-shadow:0 0 0 4px rgba(26,115,149,.38),0 0 30px rgba(104,212,255,.48),0 8px 20px rgba(0,0,0,.45);filter:brightness(1.13);z-index:6}
.card.k-target{box-shadow:0 0 0 3px #f2cf7d,0 0 34px rgba(242,185,70,.65),0 10px 26px rgba(0,0,0,.5);animation:kTargetPulse .9s ease-in-out infinite alternate;z-index:7}
@keyframes kTargetPulse{from{transform:translateY(-4px) scale(1);filter:brightness(1)}to{transform:translateY(-7px) scale(1.04);filter:brightness(1.16)}}
.card.k-out{animation:kCardOut .34s ease forwards;z-index:8}
.card.k-in{animation:kCardIn .58s cubic-bezier(.18,.9,.25,1.18);z-index:8}
@keyframes kCardOut{to{transform:scale(.5) rotate(-12deg);opacity:0;filter:blur(3px)}}
@keyframes kCardIn{0%{transform:translateY(-70px) scale(.58) rotate(8deg);opacity:0;filter:brightness(1.8)}65%{transform:translateY(5px) scale(1.08) rotate(-2deg);opacity:1}100%{transform:none;filter:none}}
.card.joker .rk{font-size:14px;letter-spacing:1px}
.card.joker .rk2{font-size:14px;letter-spacing:1px}
.card.joker .st{font-size:11px}
.card.joker .st2{font-size:11px}
.card.joker .ctr{font-family:var(--serif);font-size:42px;font-weight:700}
.conn-0{outline:3px solid #ff6b6b;outline-offset:-3px}
.conn-1{outline:3px solid #4dabf7;outline-offset:-3px}
.conn-2{outline:3px solid #51cf66;outline-offset:-3px}
.conn-3{outline:3px solid #ffd43b;outline-offset:-3px}

/* ============ 浮层 ============ */
.overlay{position:fixed;inset:0;background:rgba(4,12,9,.78);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:60;padding:20px}
.modal-box{position:relative;background:linear-gradient(165deg,#faf6ea,#f0e8d4);color:#26221a;border-radius:18px;padding:26px 30px;max-width:580px;width:100%;max-height:86vh;overflow-y:auto;
  box-shadow:0 40px 90px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.7)}
.modal-box::before{content:'';position:absolute;inset:8px;border:1px solid rgba(170,130,60,.28);border-radius:12px;pointer-events:none}
.modal-box h3{font-family:var(--serif);font-size:20px;letter-spacing:1px;margin-bottom:10px}
.modal-msg{font-size:14px;line-height:1.7;white-space:pre-line;color:#4a4436}
.modal-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.modal-btns button{padding:11px 20px;border-radius:11px;border:none;cursor:pointer;font-size:15px;font-weight:600;letter-spacing:1px;color:#241a08;
  background:linear-gradient(135deg,#e8c987,#c9a35c);box-shadow:0 4px 14px rgba(201,163,92,.35);transition:all .18s}
.modal-btns button:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(201,163,92,.45)}
.modal-btns button.ghost{background:transparent;border:1px solid rgba(90,80,60,.4);color:#5a5240;box-shadow:none}
.modal-btns button.ghost:hover{border-color:#5a5240;transform:none}

/* ============ K·王令征召 ============ */
.modal-box.k-draft-modal{max-width:720px;overflow:visible;text-align:center;color:#f5ecd7;
  background:radial-gradient(circle at 50% 12%,rgba(225,180,87,.2),transparent 34%),linear-gradient(155deg,#17392c,#091c15 72%);
  border:1px solid rgba(232,201,135,.48);box-shadow:0 42px 100px rgba(0,0,0,.72),0 0 70px rgba(212,176,106,.16)}
.k-draft-modal::before{border-color:rgba(232,201,135,.2)}
.k-draft-kicker{font-size:12px;letter-spacing:5px;color:#d8b96f;text-transform:uppercase;margin-bottom:7px}
.k-draft-modal h3{font-size:25px;color:#f4d895;margin-bottom:4px}
.k-draft-target{font-size:13px;color:rgba(245,236,215,.62);margin-bottom:20px}
.k-candidates{display:flex;justify-content:center;align-items:flex-end;gap:22px;padding:8px 6px 14px}
.k-choice{position:relative;border:1px solid rgba(232,201,135,.28);border-radius:16px;padding:15px 17px 12px;cursor:pointer;
  background:linear-gradient(165deg,rgba(255,255,255,.08),rgba(255,255,255,.015));color:#f5ecd7;
  box-shadow:0 14px 34px rgba(0,0,0,.34);animation:kDeal .48s cubic-bezier(.2,.85,.3,1.12) both;animation-delay:var(--delay);transition:transform .18s,border-color .18s,box-shadow .18s}
.k-choice:hover:not(:disabled){transform:translateY(-10px);border-color:#f0d493;box-shadow:0 22px 44px rgba(0,0,0,.46),0 0 30px rgba(212,176,106,.25)}
.k-choice:disabled{cursor:default}
.k-choice .card{width:92px;height:129px;margin:auto;pointer-events:none}
.k-choice .pick-label{display:block;margin-top:10px;font-size:12px;letter-spacing:2px;color:rgba(245,236,215,.64)}
.k-choice.chosen{border-color:#ffe09a;transform:translateY(-10px) scale(1.06);box-shadow:0 22px 50px rgba(0,0,0,.5),0 0 46px rgba(255,190,75,.55)}
.k-choice.chosen::after{content:'王令选中';position:absolute;top:-11px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:4px 12px;border-radius:12px;background:#d4b06a;color:#211806;font-size:11px;font-weight:800;letter-spacing:1px}
.k-draft-tip{font-size:12px;color:rgba(245,236,215,.48);margin-top:2px}
@keyframes kDeal{from{opacity:0;transform:translateY(-46px) rotate(-5deg) scale(.82)}to{opacity:1;transform:none}}
@media (max-width:660px){.k-candidates{gap:8px}.k-choice{padding:10px 8px}.k-choice .card{width:68px;height:95px}.k-draft-modal{padding:22px 14px}}

/* ============ 交接浮层 ============ */
.pass-box{position:relative;text-align:center;max-width:92vw;padding:48px 64px;border-radius:24px;
  background:linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.015)), rgba(9,24,18,.75);
  border:1px solid var(--panel-border);backdrop-filter:blur(12px);
  box-shadow:0 30px 80px rgba(0,0,0,.6)}
.pass-box::before{content:'';position:absolute;inset:10px;border:1px solid rgba(212,176,106,.15);border-radius:17px;pointer-events:none}
.pass-kicker{font-size:14px;letter-spacing:5px;color:var(--text-dim)}
.pass-name{font-family:var(--serif);font-size:42px;font-weight:700;letter-spacing:2px;color:var(--gold-b);margin:12px 0 6px;text-shadow:0 2px 24px rgba(212,176,106,.35)}
.pass-sub{font-size:14px;color:var(--text-dim);margin-bottom:24px;letter-spacing:1px}
.pass-tip{margin-top:18px;font-size:12px;color:var(--text-dim);letter-spacing:.5px}

/* ============ 结算 ============ */
.over-win{font-family:var(--serif);font-size:23px;color:#8a6a2a;font-weight:700;margin:8px 0 16px;letter-spacing:1px}
.over-list{display:flex;flex-direction:column;gap:7px}
.over-row{display:flex;gap:12px;align-items:center;background:rgba(0,0,0,.05);padding:9px 14px;border-radius:11px;border:1px solid rgba(0,0,0,.06)}
.over-row span:first-child{width:36px;font-size:18px}
.over-row b{flex:1;font-family:var(--serif)}

/* ============ 规则弹窗 ============ */
#rules h4{margin:15px 0 5px;color:#9c7a2e;font-family:var(--serif);letter-spacing:1px}
#rules p,#rules li{font-size:13.5px;line-height:1.75}
#rules ul{padding-left:20px}

/* ============ 快览 ============ */
#combo-panel{z-index:30}
#btn-quick-rules{width:100%;margin-top:11px;padding:8px 10px;border-radius:10px;font-size:12px;letter-spacing:1px;cursor:pointer;color:#f0d493;
  border:1px solid rgba(212,176,106,.35);background:rgba(212,176,106,.08);transition:all .2s}
#btn-quick-rules:hover{border-color:var(--gold-b);background:rgba(212,176,106,.15)}
#quick-panel{position:absolute;top:calc(100% + 9px);right:0;z-index:41;width:min(352px,calc(100vw - 36px));max-height:min(62vh,540px);overflow-y:auto;display:none;
  background:linear-gradient(165deg,#faf6ea,#efe7d2);color:#26221a;border-radius:16px;padding:14px 18px 16px;
  box-shadow:0 24px 70px rgba(0,0,0,.55), inset 0 0 0 1px rgba(170,130,60,.25)}
#quick-panel.open{display:block}
.qp-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(170,130,60,.35);padding-bottom:7px;margin-bottom:2px}
.qp-head h3{font-family:var(--serif);font-size:16px;margin:0;letter-spacing:2px}
.qp-close{border:none;background:none;font-size:16px;cursor:pointer;color:#8a7a58;padding:2px 6px}
#quick-panel h4{margin:11px 0 3px;color:#9c7a2e;font-family:var(--serif);font-size:13.5px;letter-spacing:1px}
#quick-panel p,#quick-panel li{font-size:12.5px;line-height:1.7}
#quick-panel ul{padding-left:18px;margin:2px 0}

/* ============ 提示 ============ */
#toasts{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:rgba(10,20,15,.85);border:1px solid rgba(212,176,106,.5);color:#f0e6cf;padding:10px 20px;border-radius:24px;font-size:14px;letter-spacing:.5px;max-width:80vw;text-align:center;backdrop-filter:blur(6px);box-shadow:0 10px 30px rgba(0,0,0,.4);animation:tin .25s}
.toast.out{opacity:0;transition:opacity .3s}
@keyframes tin{from{opacity:0;transform:translateY(-8px)}to{opacity:1}}
#popup-layer{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:center;z-index:20}
.score-pop{background:linear-gradient(165deg, rgba(20,35,27,.94), rgba(5,12,9,.94));border:1px solid var(--gold);color:var(--gold-b);
  font-family:var(--serif);font-size:34px;font-weight:700;letter-spacing:2px;padding:18px 38px;border-radius:18px;text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.5), 0 0 44px rgba(212,176,106,.28);animation:popAnim 1.6s ease forwards}
.score-pop small{display:block;font-size:14px;font-weight:500;color:#f2ecdb;margin-top:5px;letter-spacing:1px}
.score-pop.combo-2{border-color:#ffca58;box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 56px rgba(255,166,40,.4)}
.score-pop.combo-3{border-color:#ff9f2e;color:#fff0b5;box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 72px rgba(255,112,30,.58)}
@keyframes popAnim{0%{opacity:0;transform:scale(.6)}20%{opacity:1;transform:scale(1.06)}75%{opacity:1}100%{opacity:0;transform:translateY(-36px)}}


/* 弹层与牌面细节 */
.card{border-radius:8px;box-shadow:0 2px 6px #0003;background:linear-gradient(145deg,#fffdf7,#f1eddf)}.card.back{border-width:2px;box-shadow:0 2px 6px #0003}.card.selectable{box-shadow:0 0 0 3px #e1c48a,0 4px 12px #0004}.card.selected{box-shadow:0 0 0 3px #fff,0 8px 20px #0004}.card[role="button"]{cursor:pointer}.card[role="img"]{cursor:default}#grid .card .rk{font-size:23px}#grid .card .st{font-size:15px}#grid .card .ctr{font-size:44px}
.overlay{background:#142b22a6;backdrop-filter:blur(4px);padding:20px;z-index:60}.modal-box{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:14px;max-height:85dvh;padding:28px;box-shadow:0 18px 60px #14271b30}.modal-box::before,.pass-box::before{display:none}.modal-box h3{font-family:inherit;font-size:20px;letter-spacing:0;font-weight:600}.modal-msg{color:var(--muted);font-size:13px;line-height:1.8}.modal-btns{gap:8px}.modal-btns button{background:var(--green);color:#fff;font-size:13px;border-radius:7px;box-shadow:none;min-height:42px;letter-spacing:0}.modal-btns button:hover{background:var(--green-hover);box-shadow:none;transform:none}.modal-btns button.ghost{background:#f4f6f0;border-color:var(--line);color:var(--muted)}.pass-box{background:#fff;color:var(--ink);border:0;border-radius:14px;box-shadow:0 18px 60px #14271b30}.pass-kicker,.pass-sub,.pass-tip{color:var(--muted);letter-spacing:0}.pass-name{color:var(--green);text-shadow:none}.over-win{color:var(--green)}.over-row{background:#f3f5ef;border:0}.over-row b{font-family:inherit}#rules h4,#quick-panel h4{font-family:inherit;color:var(--green);letter-spacing:0}#rules p,#rules li{color:var(--muted);line-height:1.8;font-size:13px}#rules h4{font-size:14px}.toast{background:#fff;border:1px solid var(--line);color:var(--green);box-shadow:0 4px 20px #21332620;border-radius:8px;padding:9px 16px;font-size:12px;letter-spacing:0}.score-pop{background:#113224ed;border-color:#d8bf87;border-radius:12px;box-shadow:0 8px 30px #0004;font-size:32px}
#quick-panel{position:fixed;right:24px;top:82px;z-index:55;width:min(380px,calc(100vw - 32px));max-height:calc(100dvh - 112px);background:#fff;border:1px solid var(--line);color:var(--ink);border-radius:12px;box-shadow:0 12px 48px #17291d30;padding:18px 20px}#quick-panel.open{display:block}.qp-head{border-color:var(--line)}.qp-head h3{font-family:inherit;font-size:16px;letter-spacing:0}.qp-close{min-width:32px;min-height:32px;color:var(--muted)}#quick-panel p,#quick-panel li{font-size:12px;color:var(--muted)}
@media(max-width:1100px){.layout{grid-template-columns:minmax(0,1fr) 232px;gap:18px;padding:18px}.header-inner{padding:10px 18px;gap:16px}.table-row{gap:16px}.hd-info{margin-left:0;gap:8px}.hd-btns{gap:2px}.hd-btns button{padding:8px}.pl-row{padding:10px 7px;gap:8px}.center-col{min-height:calc(100dvh - 104px)}}
@media(max-width:960px){
  body:has(#game:not(.hidden)){height:100svh;min-height:0;overflow:hidden;overscroll-behavior:none}
  :root{--card-height:clamp(88px,calc((100dvh - 430px)/3),120px);--grid-gap:12px}
  .header-inner{min-height:76px;display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:7px 14px;grid-template-areas:"brand tools" "status status"}.hd-title{grid-area:brand;font-size:20px}.hd-btns{grid-area:tools;gap:2px}.hd-btns button{padding:6px;width:36px;min-height:38px}.tool-label{display:none}.hd-info{grid-area:status;margin:0;justify-content:center;gap:8px;height:22px}.hd-info span{font-size:11px}.hd-info #hd-round{padding-right:8px}#table-connection{font-size:10px}
  .layout{display:flex;flex-direction:column;gap:10px;padding:12px;max-width:680px}.side{order:-1;display:contents}.score-panel{order:-1;width:100%;padding:0;border:0;background:transparent;border-radius:0}.score-panel .panel-title{display:none}#players-panel{flex-direction:row;gap:8px;overflow-x:auto;padding:1px 0 4px;scrollbar-width:thin}.pl-row{flex:1 0 146px;max-width:none;gap:8px;padding:9px 10px;background:#fff;border-color:var(--line)}.pl-row.cur{border-color:#b7ceb1}.pl-score{font-size:20px}.pl-score small{font-size:9px;margin-top:2px}.pl-avatar{width:25px;height:25px}.pl-detail{font-size:9px}.log-panel,#combo-panel{display:none}
  .center-col{width:100%;min-height:0;border-radius:12px}.table-heading{padding:12px 16px 0;font-size:11px}.table-heading span{font-size:10px}.table-workspace{padding:12px 12px 8px;gap:6px}.table-row{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;width:100%}#grid{grid-row:1;grid-column:1 / -1;justify-content:center;padding:4px}.pile-v{grid-row:2;width:auto;flex-direction:row;justify-content:center;gap:6px;font-size:10px;line-height:1.5}.pile-v>.card,.pile-top{display:none}.pile-v b{display:inline;font-size:12px;margin-left:5px}.pile-v br{display:none}
  .hand-area{padding:10px 12px 14px;border-radius:0 0 12px 12px}.actions{gap:6px}.actions button{min-height:48px;padding:6px 4px;font-size:12px}.actions button small{font-size:9px;margin-top:2px}.hand-area.is-context-mode #hint-bar{min-height:50px}#hint-bar{font-size:11px;min-height:35px;padding:8px 0 3px;gap:6px}#hand-owner{font-size:10px;margin-bottom:5px}#hand{min-height:72px;gap:9px}#hand .card{width:48px;height:68px}#hand .card .rk{font-size:14px}#hand .card .st{font-size:9px;top:22px}#hand .card .st2{top:auto;bottom:22px}#hand .card .ctr{font-size:22px}.hand-empty{font-size:11px}#q-axis-actions button,#combo-offer button,#btn-cancel,#btn-abort,#btn-finish{min-height:42px}
  #grid .card .rk{font-size:20px}#grid .card .st{font-size:13px}#grid .card .ctr{font-size:36px}.modal-box{padding:22px 20px}.pass-box{padding:30px 22px}.pass-name{font-size:32px}.pass-box .primary{font-size:13px;padding:10px 18px}#quick-panel{right:16px;top:90px}
}
@media(max-width:420px){.setup-box{padding:28px 22px;border-radius:12px}.setup-box h1{font-size:27px}.setup-heading{gap:10px}.suit-row{font-size:13px;letter-spacing:4px}.count-row{gap:6px}.count-btn{font-size:12px}.slot-row{gap:7px}.who-btn{flex-basis:66px}.name-inp{font-size:13px}.lan-copy{padding:7px 8px;font-size:10px}.lan-code{gap:6px}.lan-code b{font-size:21px;letter-spacing:2px}.lan-host-controls{flex-wrap:wrap}.lan-host-controls .lan-start{flex-basis:100%}.header-inner{padding-inline:12px}.hd-title{font-size:19px}.layout{padding:10px}.actions button small{font-size:9px}.table-heading span{font-size:9px}.k-candidates{gap:8px}.k-choice{padding:10px 8px}.k-choice .card{width:60px;height:84px}.k-draft-modal{padding:20px 12px}.k-draft-modal h3{font-size:21px}.k-draft-target{margin-bottom:10px}.k-choice .pick-label{font-size:10px;letter-spacing:0}.hand-empty{font-size:10px}}
@media(orientation:landscape) and (max-height:560px){
  :root{--card-height:clamp(58px,calc((100dvh - 144px)/3),96px);--grid-gap:8px}
  #setup{padding:16px}.setup-box{padding:24px 30px}.header-inner{display:flex;min-height:50px;padding:5px 16px;gap:14px}.hd-title{font-size:17px}.hd-info{height:auto;justify-content:flex-start;flex:1}.hd-btns button{min-height:36px;width:34px}.hd-info span{font-size:10px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 168px;padding:10px 14px;gap:14px;max-width:1200px}.side{display:flex;order:0;gap:14px}.score-panel{padding:0;background:transparent;border:0}.score-panel .panel-title{display:flex;margin-bottom:7px}.score-panel .panel-title small{display:none}#players-panel{flex-direction:column;overflow-y:auto;max-height:calc(100dvh - 112px)}.pl-row{flex:0 0 auto;padding:8px;gap:6px;grid-template-columns:22px minmax(0,1fr) auto}.pl-avatar{width:22px;height:22px;font-size:10px}.pl-score{font-size:18px}.pl-name{font-size:11px}.pl-detail{font-size:9px}.log-panel,#combo-panel{display:none}
  .center-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,.85fr);min-height:calc(100dvh - 70px);align-items:center}.table-heading{grid-column:1/-1;padding:10px 16px 0;align-self:start}.table-workspace{padding:8px 6px 10px;gap:3px}.table-row{gap:5px}#grid{padding:3px}.pile-v{font-size:9px}.pile-v b{font-size:10px}.hand-area{border:0;border-left:1px solid #ffffff15;border-radius:0 0 12px 0;align-self:stretch;padding:12px 14px;display:flex;align-items:center}.dock-inner{width:100%}.actions{grid-template-columns:repeat(2,1fr);gap:6px}.actions button{min-height:43px;font-size:12px}.actions button small{font-size:9px}#hint-bar{font-size:10px;min-height:38px}#hand-owner{font-size:10px}#hand{min-height:62px;gap:7px}#hand .card{width:41px;height:58px}#hand .card .ctr{font-size:19px}#hand .card .rk{font-size:12px}#hand .card .st{font-size:8px;top:19px}#hand .card .rk2,#hand .card .st2{display:none}.hand-empty{font-size:10px}#resolve-banner{font-size:10px}#grid .card .rk{font-size:17px;top:6px;left:6px}#grid .card .st{font-size:10px;top:24px;left:6px}#grid .card .ctr{font-size:29px}#grid .card .rk2{top:auto;left:auto;right:6px;bottom:6px}#grid .card .st2{display:none}#quick-panel{top:60px;max-height:calc(100dvh - 76px)}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
/* 操作次数与辅助规则沿用同一套浅色控件 */
.hd-info #hd-act{display:inline;font-size:11px;color:#7c8c75;background:#f0f3eb;padding:3px 7px;border-radius:5px}
#btn-quick-rules{width:auto;margin-top:12px;padding:7px 12px;border:1px solid #d6dfcf;border-radius:7px;background:transparent;color:var(--green);font-size:12px;letter-spacing:0;min-height:36px}
#btn-quick-rules:hover{background:#edf3e8;border-color:#90ac90}
@media(max-width:420px){.hd-info{gap:7px}.hd-info #hd-act{font-size:9px;padding:2px 5px}.hd-info #hd-round{padding-right:7px}}
@media(min-width:961px) and (min-height:561px){.side{gap:20px}.mini-tips{line-height:1.6}.log-panel #log{max-height:clamp(90px,calc(100dvh - 545px),225px)}.center-col{min-height:calc(100dvh - 114px)}}
.k-draft-target .cb,.table-workspace .cb{color:#e5cc94}.k-draft-tip{color:#b4c4b5}
@media(max-width:960px){.pl-detail{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#grid .card .ctr{font-size:clamp(28px,calc(var(--card-height)*.3),40px)}}
@media(max-width:960px) and (max-height:740px) and (orientation:portrait){
  :root{--card-height:80px;--grid-gap:10px}.layout{padding:8px;gap:8px}.pl-row{padding:7px 8px;gap:6px;grid-template-columns:24px minmax(0,1fr) auto}.table-heading{padding:9px 14px 0}.table-workspace{padding:8px 10px 6px;gap:4px}#resolve-banner{font-size:10px}.actions button{min-height:44px}.actions button small{display:none}.hand-area{padding:8px 10px 12px}#hint-bar{min-height:31px;padding:6px 0 3px}#hand-owner{margin-bottom:2px}#grid .card .rk{font-size:17px}#grid .card .st{top:25px;font-size:11px}#grid .card .st2{display:none}
}
@media(orientation:landscape) and (max-height:560px){:root{--card-height:clamp(58px,calc((100dvh - 190px)/3),96px)}#grid .card .ctr{font-size:clamp(23px,calc(var(--card-height)*.33),32px)}}
.modal-inline-error{font-size:12px;line-height:1.7;color:#a4483d;padding-top:10px}.modal-inline-error:empty{display:none}
#modal-box:not(.k-draft-modal) .k-choice{background:#edf2e8;border-color:#cfdbc9}.k-choice:focus-visible{outline:3px solid #58a5d1;outline-offset:4px}
@media(min-width:961px) and (min-height:561px){.center-col{min-height:calc(100dvh - 115px)}}
@media(orientation:landscape) and (max-height:560px){.center-col{min-height:calc(100dvh - 71px)}}
@media(max-width:960px){.hd-info{height:auto;min-height:22px;flex-wrap:wrap}.hd-info #hd-turn{max-width:150px;overflow:hidden;text-overflow:ellipsis}}
.lan-host-controls button{min-height:40px;padding:8px 12px;border:1px solid var(--line);border-radius:7px;background:#f7f9f4;color:var(--green);font-size:13px;white-space:nowrap}.lan-host-controls .lan-start{background:var(--green);color:#fff}
@media(min-width:961px) and (min-height:561px){
  .hand-area .dock-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;max-width:none}.hand-strip{margin:0;max-width:340px;min-width:168px}#hand-owner{margin-bottom:5px}#hand{padding:3px 0}.hand-empty{font-size:11px}.hand-area{padding:14px 24px}.side{max-height:calc(100dvh - 115px)}.score-panel,#combo-panel{flex-shrink:0}.log-panel{min-height:0;display:flex;flex-direction:column;flex-shrink:1}.log-panel .panel-title{flex-shrink:0}.side .log-panel #log{min-height:0;max-height:225px;flex-shrink:1}
}
@media(max-width:960px) and (orientation:portrait){.center-col:has(.hand-area:not(.is-empty)){--card-height:clamp(80px,calc((100dvh - 520px)/3),112px)}}
@media(max-width:960px) and (max-height:740px) and (orientation:portrait){.center-col:has(.hand-area:not(.is-empty)){--card-height:72px}#grid .card .ctr{font-size:26px}}
#grid .card.joker .rk{font-size:13px;letter-spacing:0}#grid .card.joker .rk2,#grid .card.joker .st,#grid .card.joker .st2{display:none}#grid .card.joker .ctr{font-size:clamp(27px,calc(var(--card-height)*.3),42px)}
@media(min-width:961px) and (min-height:561px){.layout{padding-bottom:23px}}
#players-panel{position:relative}
@media(min-width:961px) and (min-height:561px){.score-panel #players-panel{max-height:clamp(146px,calc(100dvh - 490px),436px);overflow-y:auto;scrollbar-width:thin}}
@media(max-width:960px) and (max-height:740px) and (orientation:portrait){.header-inner{min-height:72px;padding-block:5px}.hand-area{padding-bottom:8px}.hand-strip{margin-top:4px}#hint-bar{min-height:28px}.table-workspace{gap:2px}}
.text-button{float:right;padding:0 2px;border:0;background:transparent;font-size:12px;color:var(--green);font-weight:400;line-height:20px}.text-button:hover{text-decoration:underline}
.text-button{min-height:36px;line-height:36px;margin-block:-8px;padding-inline:4px}
/* 先选牌，再选择此牌的合法操作。菜单独立于棋盘滚动区域。 */
.card.is-actionable{cursor:pointer}.card.is-actionable:hover{transform:translateY(-3px);box-shadow:0 0 0 2px #d8bc7c,0 5px 14px #0004}.card.menu-selected{box-shadow:0 0 0 3px #e5c887,0 5px 14px #0004}
.card-menu{position:fixed;z-index:55;width:248px;max-width:calc(100vw - 24px);padding:10px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 35px #0d221b38;color:var(--ink)}
.card-menu-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 0 7px 4px}.card-menu-heading h2{font-size:12px;font-weight:500;color:var(--muted)}#card-menu-close{flex:0 0 32px;width:32px;height:32px;border:0;border-radius:6px;background:transparent;color:var(--muted);font-size:22px;line-height:1}#card-menu-close:hover{background:#f1f4ed}
.card-menu-actions{display:flex;flex-direction:column;gap:5px}.card-menu-action{min-height:48px;padding:10px 12px;border:1px solid #dce5d5;border-radius:7px;background:#f3f7ee;color:var(--green);text-align:left}.card-menu-action:hover{background:#e9f2e1;border-color:#98b88c}.card-menu-action span{display:block;font-size:14px;font-weight:500}.card-menu-action small{display:block;margin-top:3px;font-size:11px;color:#77866e}
.hand-area .action-strip-title{display:none}.hand-area #hint-bar{padding:4px 0;min-height:32px}.hand-area.is-context-mode #hint-bar{min-height:44px}.hand-empty{font-size:11px}
@media(max-width:960px){.card-menu{width:220px}#card-menu-close{width:36px;flex-basis:36px;height:36px}.card-menu-action{min-height:48px}.hand-area{padding-top:9px}.hand-area #hint-bar{min-height:29px}}

/* 玩家状态留在牌桌上缘，手牌在棋盘下方居中。 */
:root{--card-height:clamp(88px,calc((100dvh - 450px)/3),164px)}
.table-heading{padding-top:12px}
.table-players{padding:10px 24px 8px;min-width:0}
.table-players #players-panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:8px;max-width:1040px;margin:0 auto;padding:0;overflow:visible;max-height:none}
.table-players #players-panel[data-count="2"]{max-width:520px}
.table-players #players-panel[data-count="3"]{max-width:740px}
.table-players .pl-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;grid-template-rows:auto auto;gap:2px 9px;padding:8px 10px;min-width:0;max-width:none;background:#ffffff08;border:1px solid #ffffff1a;border-radius:8px;color:#ecf1e6;flex:none}
.table-players .pl-row.cur{background:#e8d9a617;border-color:#d6bd7c}
.table-players .pl-avatar{grid-column:1;grid-row:1/3;background:#ffffff12;color:#c8d9cc;width:28px;height:28px;font-size:12px}
.table-players .pl-row.cur .pl-avatar{background:#e1c98d;color:#284333}
.table-players .pl-meta{grid-column:2;grid-row:1;min-width:0}
.table-players .pl-name{display:block;font-size:13px;font-weight:500;color:#edf2e8}
.table-players .pl-detail{display:block;font-size:11px;color:#b2caba;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.table-players .pl-state{grid-column:2;grid-row:2;font-size:11px;color:#a7c1af;line-height:1.5}
.table-players .pl-row.cur .pl-state{color:#edd8a4;font-weight:600}
.table-players .pl-score{grid-column:3;grid-row:1/3;font-size:23px;color:#e9d7a6;align-self:center;white-space:nowrap}
.table-players .pl-score small{font-size:10px;color:#9cb9a6;margin-top:2px}
.table-workspace{padding-block:8px 10px;gap:6px}
.hand-area .dock-inner{display:flex;flex-direction:column;gap:4px;align-items:stretch;max-width:700px;margin:auto;width:100%}
.hand-area .hand-strip{margin:0;max-width:none;min-width:0;width:100%;text-align:center}
.hand-area{padding:9px 24px 12px}
.hand-area #hint-bar{min-height:26px;padding:2px 0}
.hand-area #hand-owner{margin-bottom:4px}
.hand-area #hand{justify-content:center;min-height:74px;gap:10px}
.hand-area #hand .card{width:50px;height:70px}
.hand-area.is-empty #hand{min-height:18px}
#btn-table-tools{display:none}
.header-inner{position:relative}
@media(min-width:961px){
  .table-players #players-panel:is([data-count="4"],[data-count="5"],[data-count="6"]) .pl-row{grid-template-columns:22px minmax(0,1fr) auto;grid-template-rows:auto auto auto;gap:3px 6px}
  .table-players #players-panel:is([data-count="4"],[data-count="5"],[data-count="6"]) .pl-avatar{grid-row:1;grid-column:1;width:22px;height:22px}
  .table-players #players-panel:is([data-count="4"],[data-count="5"],[data-count="6"]) .pl-meta{display:contents}
  .table-players #players-panel:is([data-count="4"],[data-count="5"],[data-count="6"]) .pl-name{grid-row:1;grid-column:2/4}
  .table-players #players-panel:is([data-count="4"],[data-count="5"],[data-count="6"]) .pl-detail{grid-row:3;grid-column:1/4;margin:0}
  .table-players #players-panel:is([data-count="4"],[data-count="5"],[data-count="6"]) .pl-state{grid-row:2;grid-column:1/3}
  .table-players #players-panel:is([data-count="4"],[data-count="5"],[data-count="6"]) .pl-score{grid-row:2;grid-column:3;font-size:20px}
  .table-players #players-panel:is([data-count="4"],[data-count="5"],[data-count="6"]) .pl-score small{display:none}
}
@media(max-width:960px){
  .header-inner{display:flex;min-height:54px;padding:6px 12px;gap:10px;align-items:center}
  .hd-title{font-size:17px;letter-spacing:1px}
  .hd-info{flex:1;margin:0;justify-content:flex-end;gap:5px;min-height:0;height:auto;flex-wrap:wrap}
  .hd-info #hd-turn{display:none}
  .hd-info #hd-round{border:0;padding:0;font-size:11px}
  .hd-info #hd-act{font-size:11px;padding:2px 5px}
  .hd-info .combo-tag{font-size:10px;padding:2px 5px}
  #btn-table-tools{display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px;min-height:40px;border:1px solid var(--line);border-radius:7px;background:#f6f8f2;color:var(--green);font-size:25px;line-height:1}
  #table-tools{display:none;position:absolute;top:calc(100% + 4px);right:12px;z-index:58;width:208px;padding:6px;border:1px solid var(--line);border-radius:9px;background:#fff;box-shadow:0 8px 28px #132d2225;align-items:stretch;gap:2px}
  #table-tools.open{display:flex;flex-direction:column}
  #table-tools>button,#table-tools>.sound-control>button{display:flex;align-items:center;width:100%;min-height:44px;padding:10px 12px;text-align:left;font-size:13px}
  #table-tools .tool-label{display:inline;margin-left:10px}
  #table-tools .sound-control{width:100%}
  #sound-popover{position:static;width:100%;flex-wrap:wrap;box-shadow:none;border:0;border-top:1px solid var(--line);border-radius:0;margin-bottom:4px;padding:10px 6px}
  .volume-control{gap:6px;width:100%;font-size:12px}
  #volume-slider{width:88px;min-height:32px}
  #table-tools #btn-sound-mute{width:100%;min-height:40px;text-align:center;justify-content:center}
  .layout{display:flex;max-width:720px;padding:10px;gap:0}
  .side{display:none}
  .center-col{display:flex;width:100%;min-height:0}
  .table-heading{padding:10px 14px 0}
  .table-players{padding:9px 12px 7px}
  .table-players #players-panel{grid-template-columns:repeat(auto-fit,minmax(98px,1fr));gap:6px}
  .table-players .pl-row{grid-template-columns:20px minmax(0,1fr) auto;grid-template-rows:auto auto auto;padding:7px 8px;gap:3px 5px}
  .table-players .pl-avatar{width:20px;height:20px;font-size:11px;grid-row:1;grid-column:1}
  .table-players .pl-meta{display:contents}
  .table-players .pl-name{grid-row:1;grid-column:2/4;font-size:12px;line-height:20px}
  .table-players .pl-detail{grid-row:3;grid-column:1/4;font-size:11px;margin:0;line-height:16px}
  .table-players .pl-state{grid-row:2;grid-column:1/3;font-size:11px;line-height:18px}
  .table-players .pl-score{grid-row:2;grid-column:3;font-size:18px;line-height:18px}
  .table-players .pl-score small{display:none}
  .table-workspace{padding:8px 10px;gap:5px}
  .hand-area{padding:8px 12px 10px}
  .hand-area #hand{min-height:72px;gap:9px}
  .hand-area #hand .card{width:48px;height:68px}
  .hand-area #hand-owner{font-size:11px}
  .hand-area #hint-bar{font-size:12px;min-height:28px}
}
@media(max-width:960px) and (orientation:portrait){
  :root,.center-col:has(.hand-area:not(.is-empty)){--card-height:clamp(86px,calc((100dvh - 420px)/3),120px);--grid-gap:10px}
}
@media(max-width:960px) and (max-height:740px) and (orientation:portrait){
  :root,.center-col:has(.hand-area:not(.is-empty)){--card-height:88px}
  .table-heading{display:none}
  .table-players{padding:10px 10px 5px}
  .table-workspace{padding-block:5px}
}
@media(orientation:landscape) and (max-height:560px){
  :root{--card-height:clamp(62px,calc((100dvh - 226px)/3),86px);--grid-gap:4px}
  .header-inner{min-height:46px;padding-block:3px}
  .layout{max-width:1200px;padding:8px 12px}
  .center-col{display:grid;grid-template-columns:minmax(0,1fr) 220px;grid-template-rows:1fr auto;align-items:start;min-height:calc(100dvh - 62px)}
  .table-heading{display:none}
  .table-players{grid-column:2;grid-row:1/3;padding:12px 12px 12px 0}
  .table-players #players-panel{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .table-players #players-panel[data-count="2"],.table-players #players-panel[data-count="3"]{grid-template-columns:1fr}
  .table-workspace{grid-column:1;grid-row:1;padding:3px 10px;align-self:center;gap:3px}
  .table-row{display:flex;width:auto;gap:20px}
  #grid{padding:2px}
  .pile-v{width:48px;flex-direction:column;gap:0;font-size:10px}
  #resolve-banner{line-height:14px}
  .hand-area{grid-column:1;grid-row:2;display:block;border:0;border-top:1px solid #ffffff15;border-radius:0 0 0 12px;padding:3px 12px;align-self:end}
  .hand-area .dock-inner{gap:2px}
  .hand-area #hint-bar{font-size:11px;min-height:18px;line-height:16px;padding:0}
  .hand-area #hand-owner{font-size:10px;line-height:12px;margin:0}
  .hand-area #hand{min-height:60px;padding:1px 0;gap:8px}
  .hand-area #hand .card{width:44px;height:60px}
  .hand-area.is-empty #hand{min-height:16px}
  .hand-area.is-context-mode #hint-bar{min-height:38px}
  .hand-area #hand .card .rk{font-size:14px}
}

.quick-rules .text-button,#quick-panel .text-button{display:inline-flex;align-items:center;min-height:40px;margin-top:8px;padding:4px 0;color:var(--green)}

/* 手机对局固定各区高度，选择和结算只更新内容，不挤动棋盘。 */
#btn-table-history,#table-history-close{display:none}
@media(hover:hover) and (pointer:fine){
  .card.selectable:hover,#hand .card.selectable:hover{transform:translateY(-3px)}
  .card.selected{transform:translateY(-4px)!important}
  .k-choice:hover:not(:disabled){transform:translateY(-3px)}
  .k-choice.chosen{transform:translateY(-3px)}
}
@media(max-width:960px){
  #game:not(.hidden){height:100vh;height:100svh;min-height:0;overflow:hidden}
  #game>header{flex:0 0 54px;min-height:54px}
  .header-inner{height:54px;min-height:54px;padding:4px 10px;gap:6px;flex-wrap:nowrap}
  .hd-title{font-size:16px;letter-spacing:1px;flex:none}
  .hd-info{flex:1;min-width:0;flex-wrap:nowrap;justify-content:flex-end;gap:4px}
  .hd-info #hd-round,.hd-info #hd-act{font-size:11px;flex:none}
  .hd-info .combo-tag{font-size:10px;flex:none}
  .hd-info #hd-end,#table-connection{font-size:10px;min-width:0;overflow:hidden;text-overflow:ellipsis}
  #btn-table-tools{flex-basis:40px}
  #table-tools #btn-table-history{display:flex}
  .layout{display:flex;flex:1;min-height:0;max-width:720px;width:100%;padding:6px;gap:0}
  .center-col{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;min-height:0;height:100%;align-items:stretch}
  .table-heading{display:none}
  .table-players{grid-column:1;grid-row:1;padding:6px 8px;min-height:0}
  .table-players #players-panel,.table-players #players-panel[data-count="2"],.table-players #players-panel[data-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;gap:6px;margin:0;overflow:visible}
  .table-players #players-panel[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .table-players .pl-row{position:relative;height:54px;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:18px 16px;padding:7px 7px;gap:2px 4px;align-items:center}
  .table-players .pl-avatar{display:none}
  .table-players .pl-meta{display:contents}
  .table-players .pl-name{grid-column:1;grid-row:1;font-size:12px;line-height:18px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .table-players .pl-detail{grid-column:1/4;grid-row:2;font-size:11px;line-height:16px;margin:0}
  .table-players .pl-score{grid-column:3;grid-row:1;font-size:18px;line-height:18px;align-self:center}
  .table-players .pl-score small,.table-players .pl-state{display:none}
  .table-players .pl-row.cur .pl-state{display:inline-flex;grid-column:2;grid-row:1;align-items:center;justify-content:center;min-height:14px;padding:0 3px;border-radius:3px;background:#ddc488;color:#234332;font-size:10px;line-height:14px;white-space:nowrap}
  .table-players .pl-state-full{display:none}
  .table-players .pl-state-short{display:inline}
  .table-workspace{grid-column:1;grid-row:2;flex:none;min-height:0;height:100%;padding:4px 8px;gap:4px;justify-content:center;overflow:visible;--card-height:var(--board-card-height,80px);--card-width:var(--board-card-width,calc(var(--card-height)*.715));--grid-gap:var(--board-grid-gap,8px)}
  .table-row{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:4px 8px;width:100%;max-width:100%;min-height:0;max-height:100%;flex:none;align-items:center;justify-content:center}
  #grid{grid-column:1/-1;grid-row:1;justify-content:center;padding:4px;gap:var(--grid-gap);flex:none}
  .cell{height:var(--card-height)}
  .pile-v{grid-row:2;grid-column:auto;width:auto;flex-direction:row;gap:4px;justify-content:center;font-size:10px;line-height:15px}
  .pile-v>.card,.pile-top{display:none}
  .pile-v b{display:inline;font-size:11px;margin-left:4px;line-height:15px}
  .pile-v br{display:none}
  #resolve-banner{display:none!important}
  .hand-area{grid-column:1;grid-row:3;display:block;align-self:stretch;padding:4px 10px 8px;border:0;border-top:1px solid #ffffff15;border-radius:0 0 12px 12px;min-height:0}
  .hand-area .dock-inner{display:flex;flex-direction:column;gap:0;max-width:none;width:100%}
  .hand-area .action-strip{position:relative}
  .hand-area #hint-bar,.hand-area.is-context-mode #hint-bar{display:flex;height:68px;min-height:68px;max-height:68px;padding:2px 0;gap:4px;align-items:center;align-content:flex-end;justify-content:center;flex-wrap:wrap;font-size:12px;line-height:18px}
  .hand-area #hint{display:none;flex:0 0 100%;width:100%;line-height:18px}
  .hand-area.has-active-step #hint{display:block}
  #q-axis-actions{flex:1;min-width:0;gap:4px;flex-wrap:nowrap}
  #q-axis-actions button{flex:1;min-width:0;white-space:nowrap;font-size:11px;padding:6px}
  #combo-offer{flex:1 1 100%;gap:4px;flex-wrap:nowrap;align-items:center}
  #combo-offer .combo-offer-title{display:none}
  #combo-offer button{flex:1;min-width:0}
  #q-axis-actions button,#combo-offer button,#btn-cancel,#btn-abort,#btn-finish{min-height:40px;height:40px;padding:6px 9px;line-height:18px;white-space:nowrap}
  .hand-area #hand-owner{height:16px;line-height:16px;font-size:11px;margin:0}
  .hand-area.is-empty #hand-owner{margin:0}
  .hand-area .hand-strip{margin:0;min-width:0;max-width:none}
  .hand-area #hand,.hand-area.is-empty #hand{display:grid;grid-auto-flow:column;grid-template-columns:repeat(var(--hand-count,5),minmax(0,48px));justify-content:center;align-items:center;gap:6px;height:80px;min-height:80px;max-height:80px;padding:4px 0;flex-wrap:nowrap}
  .hand-area #hand .card{width:100%;min-width:0;height:68px}
  .hand-area #hand:has(.card:nth-child(n+6)){grid-template-columns:repeat(var(--hand-count,6),minmax(0,46px));gap:5px}
  .hand-area.is-empty #hand{grid-template-columns:1fr}
  .hand-empty{white-space:nowrap;font-size:11px}
  #table-error{position:absolute;bottom:calc(100% + 6px);left:0;right:0;z-index:56;margin:0;padding:8px 10px;border:1px solid #aa715c;border-radius:7px;background:#3b241e;color:#ffd0c0;font-size:12px;line-height:1.5}
  .card,.card.selectable:hover,#hand .card.selectable:hover,.card.is-actionable:hover,.card.k-target{transform:none!important}
  .card.selected{transform:none!important}
  .card.elimming{animation:mobileEliminate .3s ease forwards}
  .card.q-reveal{animation:mobileReveal .28s ease}
  .card.k-target{animation:none}
  .card.k-out{animation:mobileCardOut .2s ease forwards}
  .card.k-in{animation:mobileReveal .28s ease}
  .k-choice{animation:mobileNotice .2s ease both;animation-delay:var(--delay);transition:border-color .15s,box-shadow .15s}
  .k-choice:hover:not(:disabled),.k-choice.chosen{transform:none}
  #toasts{top:60px;gap:4px}
  .toast{max-width:calc(100vw - 24px);padding:7px 10px;border-radius:7px;font-size:12px;letter-spacing:0;animation:mobileNotice .2s ease}
  .score-pop{padding:10px 18px;max-width:90%;border-radius:9px;font-size:24px;animation:mobileScore 1.2s ease forwards}
  .score-pop small{font-size:12px;letter-spacing:0}
  .side{display:none}
  .side.open{display:flex;position:fixed;inset:60px 12px 12px auto;z-index:60;width:min(420px,calc(100vw - 24px));max-height:none;margin:0;padding:14px;border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:0 10px 35px #0d221b38;overflow:hidden}
  .side.open .log-panel{display:flex;flex:1;min-height:0;flex-direction:column;padding:0}
  .side.open .log-panel .panel-title{flex:none;min-height:40px;margin-bottom:8px;color:var(--ink)}
  .side.open #log{flex:1;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain}
  .side.open #combo-panel{display:none}
  #table-history-close{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;padding:5px 10px;border:1px solid var(--line);border-radius:6px;background:#f6f8f2;color:var(--green);font-size:13px}
}
@media(max-width:420px){.hd-title{display:none}}
@media(orientation:landscape) and (max-height:560px) and (max-width:960px){
  #game>header{flex-basis:46px;min-height:46px}
  .header-inner{height:46px;min-height:46px;padding-block:3px}
  .hd-title{display:block}
  .layout{max-width:1200px;padding:4px 8px}
  .center-col{grid-template-columns:minmax(0,1fr) 220px;grid-template-rows:minmax(0,1fr) auto;height:100%;min-height:0}
  .table-players{grid-column:2;grid-row:1/3;padding:6px 8px 6px 0}
  .table-players #players-panel,.table-players #players-panel[data-count="2"],.table-players #players-panel[data-count="3"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .table-players #players-panel[data-count="2"],.table-players #players-panel[data-count="3"]{grid-template-columns:1fr}
  .table-workspace{grid-column:1;grid-row:1;padding:3px 8px;gap:0;align-self:stretch}
  .table-row{display:flex;flex-direction:row;justify-content:center;gap:10px;width:100%}
  .pile-v{flex:0 0 48px;width:48px;flex-direction:column;gap:0;font-size:10px;line-height:15px}
  .pile-v b{display:block;margin:0;line-height:15px}
  #grid{padding:3px}
  .hand-area{grid-column:1;grid-row:2;padding:3px 10px;border-radius:0 0 0 12px}
  .hand-area #hint-bar,.hand-area.is-context-mode #hint-bar{height:52px;min-height:52px;max-height:52px;padding:0;gap:2px;font-size:11px;line-height:14px}
  .hand-area #hint{flex:0 1 auto;width:auto;max-width:calc(100% - 80px);line-height:14px}
  #q-axis-actions button,#combo-offer button,#btn-cancel,#btn-abort,#btn-finish{min-height:40px;height:40px;font-size:11px;padding:5px 8px;line-height:16px}
  .hand-area #hand-owner{height:14px;line-height:14px;font-size:10px}
  .hand-area #hand,.hand-area.is-empty #hand{height:58px;min-height:58px;max-height:58px;padding:0;grid-template-columns:repeat(var(--hand-count,5),minmax(0,41px));gap:6px}
  .hand-area #hand .card{height:58px}
  .hand-area #hand:has(.card:nth-child(n+6)){grid-template-columns:repeat(var(--hand-count,6),minmax(0,41px));gap:5px}
  .hand-area.is-empty #hand{grid-template-columns:1fr}
  .hand-area #hand .card .rk{font-size:12px}
  .hand-area #hand .card .st{font-size:8px;top:19px}
  .hand-area #hand .card .ctr{font-size:19px}
  .hand-area #hand .card .rk2,.hand-area #hand .card .st2{display:none}
  .side.open{top:52px}
  #toasts{top:52px}
}
@media(hover:none),(pointer:coarse){
  .card.selectable:hover,#hand .card.selectable:hover,.card.is-actionable:hover,.card.selected{transform:none!important}
  .k-choice:hover:not(:disabled),.k-choice.chosen{transform:none}
}
@keyframes mobileNotice{from{opacity:0}to{opacity:1}}
@keyframes mobileEliminate{0%{opacity:1;filter:brightness(1)}45%{opacity:1;filter:brightness(1.25)}100%{opacity:0;filter:brightness(1)}}
@keyframes mobileReveal{from{opacity:.4;filter:brightness(1.3)}to{opacity:1;filter:brightness(1)}}
@keyframes mobileCardOut{from{opacity:1}to{opacity:0}}
@keyframes mobileScore{0%{opacity:0}15%,75%{opacity:1}100%{opacity:0}}

.pl-state-short{display:none}
@media(max-width:960px){.table-players .pl-state-short{display:inline}}

@media(max-width:960px){
  .toast:not(.is-essential){display:none}
  #table-connection:not(.hidden){position:absolute;right:10px;top:calc(100% + 2px);z-index:54;flex:none;max-width:calc(100vw - 20px);padding:3px 7px;border-radius:4px;background:#fff;overflow:visible;white-space:normal}
}
@media(orientation:landscape) and (max-height:560px) and (max-width:960px){
  .hand-area:has(#combo-offer:not(.hidden)) #hint{display:none}
}

/* 翻出功能牌：只为效果 / 摸牌选择使用紧凑弹窗。 */
#modal.is-effect-choice{
  padding:16px;
  background:rgba(16,35,26,.32);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
#modal-box.effect-choice-dialog{
  width:100%;
  max-width:420px;
  max-height:calc(100dvh - 32px);
  padding:20px;
  border-radius:12px;
  background:#fdfefb;
  box-shadow:0 12px 36px #152a212b;
  overflow-y:auto;
  overscroll-behavior:contain;
  animation:none;
  transform:none;
}
.effect-choice-head{display:flex;align-items:center;gap:14px}
.effect-choice-head>div:last-child{min-width:0}
.effect-choice-card{flex:none}
.effect-choice-card .card.small{
  width:44px;
  height:62px;
  margin:0;
  border-radius:6px;
  box-shadow:0 1px 3px #17281d20;
  pointer-events:none;
  transform:none;
  animation:none;
}
.effect-choice-kicker{margin-bottom:3px;color:#647168;font-size:12px;line-height:18px}
#modal-box.effect-choice-dialog h3{margin:0;font-size:20px;line-height:1.35;letter-spacing:0;color:var(--ink);font-weight:600}
.effect-choice-description{margin:16px 0 18px;color:var(--ink);font-size:14px;line-height:1.65}
.effect-choice-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.effect-choice-option{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-width:0;
  min-height:76px;
  padding:13px 10px;
  border:1px solid transparent;
  border-radius:8px;
  text-align:center;
  line-height:1.4;
  transform:none;
  animation:none;
  box-shadow:none;
  transition:background .15s,border-color .15s;
}
.effect-choice-option .option-label{font-size:15px;font-weight:600}
.effect-choice-option .option-detail{font-size:12px;font-weight:400;line-height:1.5}
.effect-choice-primary{background:var(--green);border-color:var(--green);color:#fff}
.effect-choice-primary .option-detail{color:#e0ebe3}
.effect-choice-secondary{background:#f1f5ee;border-color:#d5dfcf;color:var(--green)}
.effect-choice-secondary .option-detail{color:#66736a}
.effect-choice-option:disabled{cursor:not-allowed;background:#eef1eb;border-color:var(--line);color:#606d63;opacity:1}
.effect-choice-option:disabled .option-detail{color:#606d63}
.effect-choice-note{margin-top:12px;color:#647168;font-size:12px;line-height:1.6}
.effect-choice-note:empty{display:none}
#modal-box.effect-choice-dialog .modal-inline-error{padding-top:10px;font-size:12px;line-height:1.6}
@media(hover:hover) and (pointer:fine){
  .effect-choice-primary:hover:not(:disabled){background:var(--green-hover);border-color:var(--green-hover)}
  .effect-choice-secondary:hover:not(:disabled){background:#e8efe3;border-color:#aabc9f}
}
@media(max-width:420px){
  #modal-box.effect-choice-dialog{padding:18px}
  .effect-choice-head{gap:12px}
  .effect-choice-description{margin:14px 0 16px}
  .effect-choice-options{gap:8px}
}
@media(max-height:420px){
  #modal-box.effect-choice-dialog{padding:16px 20px}
  .effect-choice-card .card.small{width:40px;height:56px}
  .effect-choice-description{margin:12px 0 14px}
  .effect-choice-option{min-height:68px;padding-block:10px}
  .effect-choice-note{margin-top:10px}
}

/* 独立音乐和音效音量；设置浮层不改变牌桌尺寸。 */
#sound-popover{display:flex;flex-direction:column;align-items:stretch;width:264px;gap:10px;padding:14px}
.music-control-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--ink);font-size:13px;font-weight:500}
#btn-music{min-height:36px;padding:6px 10px;border:1px solid var(--line);border-radius:6px;background:#edf3e8;color:var(--green);font-size:12px}
#btn-music[aria-pressed="false"]{background:#f5f6f2;color:var(--muted)}
#sound-popover .volume-control{display:flex;width:100%;gap:8px;justify-content:space-between}
#sound-popover .volume-control input{flex:1;min-width:0;width:96px;min-height:32px;accent-color:var(--green)}
#music-volume-value{width:32px;font-variant-numeric:tabular-nums}
.music-status{font-size:11px;line-height:16px;color:var(--muted)}
#sound-popover #btn-sound-mute{width:100%;min-height:36px;text-align:center;justify-content:center;border:1px solid var(--line)}
@media(max-width:960px){
  #sound-popover{width:100%;gap:8px;padding:10px 6px}
  #table-tools #btn-music{width:auto;min-height:40px;padding:6px 8px}
  #table-tools #btn-sound-mute{min-height:40px}
}
@media(max-width:960px){#table-tools{max-height:calc(100svh - 70px);overflow-y:auto;overscroll-behavior:contain}}

/* 原创 12×12 像素花色与工具图标，内联矢量，不依赖网络或字体下载。 */
[data-suit="spade"]{--pixel-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2012%2012%27%20shape-rendering%3D%27crispEdges%27%3E%3Cpath%20fill%3D%27white%27%20d%3D%27M5%200h1v1h-1zM6%200h1v1h-1zM4%201h1v1h-1zM5%201h1v1h-1zM6%201h1v1h-1zM7%201h1v1h-1zM3%202h1v1h-1zM4%202h1v1h-1zM5%202h1v1h-1zM6%202h1v1h-1zM7%202h1v1h-1zM8%202h1v1h-1zM2%203h1v1h-1zM3%203h1v1h-1zM4%203h1v1h-1zM5%203h1v1h-1zM6%203h1v1h-1zM7%203h1v1h-1zM8%203h1v1h-1zM9%203h1v1h-1zM1%204h1v1h-1zM2%204h1v1h-1zM3%204h1v1h-1zM4%204h1v1h-1zM5%204h1v1h-1zM6%204h1v1h-1zM7%204h1v1h-1zM8%204h1v1h-1zM9%204h1v1h-1zM10%204h1v1h-1zM0%205h1v1h-1zM1%205h1v1h-1zM2%205h1v1h-1zM3%205h1v1h-1zM4%205h1v1h-1zM5%205h1v1h-1zM6%205h1v1h-1zM7%205h1v1h-1zM8%205h1v1h-1zM9%205h1v1h-1zM10%205h1v1h-1zM11%205h1v1h-1zM0%206h1v1h-1zM1%206h1v1h-1zM2%206h1v1h-1zM3%206h1v1h-1zM4%206h1v1h-1zM5%206h1v1h-1zM6%206h1v1h-1zM7%206h1v1h-1zM8%206h1v1h-1zM9%206h1v1h-1zM10%206h1v1h-1zM11%206h1v1h-1zM1%207h1v1h-1zM2%207h1v1h-1zM3%207h1v1h-1zM5%207h1v1h-1zM6%207h1v1h-1zM8%207h1v1h-1zM9%207h1v1h-1zM10%207h1v1h-1zM5%208h1v1h-1zM6%208h1v1h-1zM4%209h1v1h-1zM5%209h1v1h-1zM6%209h1v1h-1zM7%209h1v1h-1zM3%2010h1v1h-1zM4%2010h1v1h-1zM5%2010h1v1h-1zM6%2010h1v1h-1zM7%2010h1v1h-1zM8%2010h1v1h-1z%27%2F%3E%3C%2Fsvg%3E")}
[data-suit="heart"]{--pixel-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2012%2012%27%20shape-rendering%3D%27crispEdges%27%3E%3Cpath%20fill%3D%27white%27%20d%3D%27M1%201h1v1h-1zM2%201h1v1h-1zM3%201h1v1h-1zM8%201h1v1h-1zM9%201h1v1h-1zM10%201h1v1h-1zM0%202h1v1h-1zM1%202h1v1h-1zM2%202h1v1h-1zM3%202h1v1h-1zM4%202h1v1h-1zM7%202h1v1h-1zM8%202h1v1h-1zM9%202h1v1h-1zM10%202h1v1h-1zM11%202h1v1h-1zM0%203h1v1h-1zM1%203h1v1h-1zM2%203h1v1h-1zM3%203h1v1h-1zM4%203h1v1h-1zM5%203h1v1h-1zM6%203h1v1h-1zM7%203h1v1h-1zM8%203h1v1h-1zM9%203h1v1h-1zM10%203h1v1h-1zM11%203h1v1h-1zM0%204h1v1h-1zM1%204h1v1h-1zM2%204h1v1h-1zM3%204h1v1h-1zM4%204h1v1h-1zM5%204h1v1h-1zM6%204h1v1h-1zM7%204h1v1h-1zM8%204h1v1h-1zM9%204h1v1h-1zM10%204h1v1h-1zM11%204h1v1h-1zM1%205h1v1h-1zM2%205h1v1h-1zM3%205h1v1h-1zM4%205h1v1h-1zM5%205h1v1h-1zM6%205h1v1h-1zM7%205h1v1h-1zM8%205h1v1h-1zM9%205h1v1h-1zM10%205h1v1h-1zM2%206h1v1h-1zM3%206h1v1h-1zM4%206h1v1h-1zM5%206h1v1h-1zM6%206h1v1h-1zM7%206h1v1h-1zM8%206h1v1h-1zM9%206h1v1h-1zM3%207h1v1h-1zM4%207h1v1h-1zM5%207h1v1h-1zM6%207h1v1h-1zM7%207h1v1h-1zM8%207h1v1h-1zM4%208h1v1h-1zM5%208h1v1h-1zM6%208h1v1h-1zM7%208h1v1h-1zM5%209h1v1h-1zM6%209h1v1h-1z%27%2F%3E%3C%2Fsvg%3E")}
[data-suit="diamond"]{--pixel-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2012%2012%27%20shape-rendering%3D%27crispEdges%27%3E%3Cpath%20fill%3D%27white%27%20d%3D%27M5%200h1v1h-1zM6%200h1v1h-1zM4%201h1v1h-1zM5%201h1v1h-1zM6%201h1v1h-1zM7%201h1v1h-1zM3%202h1v1h-1zM4%202h1v1h-1zM5%202h1v1h-1zM6%202h1v1h-1zM7%202h1v1h-1zM8%202h1v1h-1zM2%203h1v1h-1zM3%203h1v1h-1zM4%203h1v1h-1zM5%203h1v1h-1zM6%203h1v1h-1zM7%203h1v1h-1zM8%203h1v1h-1zM9%203h1v1h-1zM1%204h1v1h-1zM2%204h1v1h-1zM3%204h1v1h-1zM4%204h1v1h-1zM5%204h1v1h-1zM6%204h1v1h-1zM7%204h1v1h-1zM8%204h1v1h-1zM9%204h1v1h-1zM10%204h1v1h-1zM0%205h1v1h-1zM1%205h1v1h-1zM2%205h1v1h-1zM3%205h1v1h-1zM4%205h1v1h-1zM5%205h1v1h-1zM6%205h1v1h-1zM7%205h1v1h-1zM8%205h1v1h-1zM9%205h1v1h-1zM10%205h1v1h-1zM11%205h1v1h-1zM0%206h1v1h-1zM1%206h1v1h-1zM2%206h1v1h-1zM3%206h1v1h-1zM4%206h1v1h-1zM5%206h1v1h-1zM6%206h1v1h-1zM7%206h1v1h-1zM8%206h1v1h-1zM9%206h1v1h-1zM10%206h1v1h-1zM11%206h1v1h-1zM1%207h1v1h-1zM2%207h1v1h-1zM3%207h1v1h-1zM4%207h1v1h-1zM5%207h1v1h-1zM6%207h1v1h-1zM7%207h1v1h-1zM8%207h1v1h-1zM9%207h1v1h-1zM10%207h1v1h-1zM2%208h1v1h-1zM3%208h1v1h-1zM4%208h1v1h-1zM5%208h1v1h-1zM6%208h1v1h-1zM7%208h1v1h-1zM8%208h1v1h-1zM9%208h1v1h-1zM3%209h1v1h-1zM4%209h1v1h-1zM5%209h1v1h-1zM6%209h1v1h-1zM7%209h1v1h-1zM8%209h1v1h-1zM4%2010h1v1h-1zM5%2010h1v1h-1zM6%2010h1v1h-1zM7%2010h1v1h-1zM5%2011h1v1h-1zM6%2011h1v1h-1z%27%2F%3E%3C%2Fsvg%3E")}
[data-suit="club"]{--pixel-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2012%2012%27%20shape-rendering%3D%27crispEdges%27%3E%3Cpath%20fill%3D%27white%27%20d%3D%27M4%200h1v1h-1zM5%200h1v1h-1zM6%200h1v1h-1zM7%200h1v1h-1zM3%201h1v1h-1zM4%201h1v1h-1zM5%201h1v1h-1zM6%201h1v1h-1zM7%201h1v1h-1zM8%201h1v1h-1zM3%202h1v1h-1zM4%202h1v1h-1zM5%202h1v1h-1zM6%202h1v1h-1zM7%202h1v1h-1zM8%202h1v1h-1zM4%203h1v1h-1zM5%203h1v1h-1zM6%203h1v1h-1zM7%203h1v1h-1zM1%204h1v1h-1zM2%204h1v1h-1zM5%204h1v1h-1zM6%204h1v1h-1zM9%204h1v1h-1zM10%204h1v1h-1zM0%205h1v1h-1zM1%205h1v1h-1zM2%205h1v1h-1zM3%205h1v1h-1zM4%205h1v1h-1zM5%205h1v1h-1zM6%205h1v1h-1zM7%205h1v1h-1zM8%205h1v1h-1zM9%205h1v1h-1zM10%205h1v1h-1zM11%205h1v1h-1zM0%206h1v1h-1zM1%206h1v1h-1zM2%206h1v1h-1zM3%206h1v1h-1zM4%206h1v1h-1zM5%206h1v1h-1zM6%206h1v1h-1zM7%206h1v1h-1zM8%206h1v1h-1zM9%206h1v1h-1zM10%206h1v1h-1zM11%206h1v1h-1zM0%207h1v1h-1zM1%207h1v1h-1zM2%207h1v1h-1zM3%207h1v1h-1zM4%207h1v1h-1zM5%207h1v1h-1zM6%207h1v1h-1zM7%207h1v1h-1zM8%207h1v1h-1zM9%207h1v1h-1zM10%207h1v1h-1zM11%207h1v1h-1zM1%208h1v1h-1zM2%208h1v1h-1zM3%208h1v1h-1zM5%208h1v1h-1zM6%208h1v1h-1zM8%208h1v1h-1zM9%208h1v1h-1zM10%208h1v1h-1zM5%209h1v1h-1zM6%209h1v1h-1zM4%2010h1v1h-1zM5%2010h1v1h-1zM6%2010h1v1h-1zM7%2010h1v1h-1zM3%2011h1v1h-1zM4%2011h1v1h-1zM5%2011h1v1h-1zM6%2011h1v1h-1zM7%2011h1v1h-1zM8%2011h1v1h-1z%27%2F%3E%3C%2Fsvg%3E")}
[data-suit="big-joker"]{--pixel-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2012%2012%27%20shape-rendering%3D%27crispEdges%27%3E%3Cpath%20fill%3D%27white%27%20d%3D%27M5%200h1v1h-1zM6%200h1v1h-1zM5%201h1v1h-1zM6%201h1v1h-1zM1%202h1v1h-1zM4%202h1v1h-1zM5%202h1v1h-1zM6%202h1v1h-1zM7%202h1v1h-1zM10%202h1v1h-1zM0%203h1v1h-1zM1%203h1v1h-1zM2%203h1v1h-1zM3%203h1v1h-1zM4%203h1v1h-1zM5%203h1v1h-1zM6%203h1v1h-1zM7%203h1v1h-1zM8%203h1v1h-1zM9%203h1v1h-1zM10%203h1v1h-1zM11%203h1v1h-1zM0%204h1v1h-1zM1%204h1v1h-1zM2%204h1v1h-1zM3%204h1v1h-1zM4%204h1v1h-1zM5%204h1v1h-1zM6%204h1v1h-1zM7%204h1v1h-1zM8%204h1v1h-1zM9%204h1v1h-1zM10%204h1v1h-1zM11%204h1v1h-1zM1%205h1v1h-1zM2%205h1v1h-1zM3%205h1v1h-1zM4%205h1v1h-1zM5%205h1v1h-1zM6%205h1v1h-1zM7%205h1v1h-1zM8%205h1v1h-1zM9%205h1v1h-1zM10%205h1v1h-1zM1%206h1v1h-1zM2%206h1v1h-1zM3%206h1v1h-1zM4%206h1v1h-1zM5%206h1v1h-1zM6%206h1v1h-1zM7%206h1v1h-1zM8%206h1v1h-1zM9%206h1v1h-1zM10%206h1v1h-1zM2%207h1v1h-1zM3%207h1v1h-1zM4%207h1v1h-1zM5%207h1v1h-1zM6%207h1v1h-1zM7%207h1v1h-1zM8%207h1v1h-1zM9%207h1v1h-1zM2%208h1v1h-1zM3%208h1v1h-1zM4%208h1v1h-1zM5%208h1v1h-1zM6%208h1v1h-1zM7%208h1v1h-1zM8%208h1v1h-1zM9%208h1v1h-1zM2%2010h1v1h-1zM3%2010h1v1h-1zM4%2010h1v1h-1zM5%2010h1v1h-1zM6%2010h1v1h-1zM7%2010h1v1h-1zM8%2010h1v1h-1zM9%2010h1v1h-1zM2%2011h1v1h-1zM3%2011h1v1h-1zM4%2011h1v1h-1zM5%2011h1v1h-1zM6%2011h1v1h-1zM7%2011h1v1h-1zM8%2011h1v1h-1zM9%2011h1v1h-1z%27%2F%3E%3C%2Fsvg%3E")}
[data-suit="small-joker"]{--pixel-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2012%2012%27%20shape-rendering%3D%27crispEdges%27%3E%3Cpath%20fill%3D%27white%27%20d%3D%27M5%200h1v1h-1zM6%200h1v1h-1zM5%201h1v1h-1zM6%201h1v1h-1zM1%202h1v1h-1zM4%202h1v1h-1zM7%202h1v1h-1zM10%202h1v1h-1zM0%203h1v1h-1zM1%203h1v1h-1zM2%203h1v1h-1zM3%203h1v1h-1zM8%203h1v1h-1zM9%203h1v1h-1zM10%203h1v1h-1zM11%203h1v1h-1zM0%204h1v1h-1zM11%204h1v1h-1zM1%205h1v1h-1zM10%205h1v1h-1zM1%206h1v1h-1zM10%206h1v1h-1zM2%207h1v1h-1zM9%207h1v1h-1zM2%208h1v1h-1zM3%208h1v1h-1zM4%208h1v1h-1zM5%208h1v1h-1zM6%208h1v1h-1zM7%208h1v1h-1zM8%208h1v1h-1zM9%208h1v1h-1zM2%2010h1v1h-1zM3%2010h1v1h-1zM4%2010h1v1h-1zM5%2010h1v1h-1zM6%2010h1v1h-1zM7%2010h1v1h-1zM8%2010h1v1h-1zM9%2010h1v1h-1z%27%2F%3E%3C%2Fsvg%3E")}
[data-icon="fullscreen"]{--pixel-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2012%2012%27%20shape-rendering%3D%27crispEdges%27%3E%3Cpath%20fill%3D%27white%27%20d%3D%27M0%200h1v1h-1zM1%200h1v1h-1zM2%200h1v1h-1zM3%200h1v1h-1zM8%200h1v1h-1zM9%200h1v1h-1zM10%200h1v1h-1zM11%200h1v1h-1zM0%201h1v1h-1zM11%201h1v1h-1zM0%202h1v1h-1zM11%202h1v1h-1zM0%203h1v1h-1zM11%203h1v1h-1zM0%208h1v1h-1zM11%208h1v1h-1zM0%209h1v1h-1zM11%209h1v1h-1zM0%2010h1v1h-1zM11%2010h1v1h-1zM0%2011h1v1h-1zM1%2011h1v1h-1zM2%2011h1v1h-1zM3%2011h1v1h-1zM8%2011h1v1h-1zM9%2011h1v1h-1zM10%2011h1v1h-1zM11%2011h1v1h-1z%27%2F%3E%3C%2Fsvg%3E")}
[data-icon="sound"]{--pixel-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2012%2012%27%20shape-rendering%3D%27crispEdges%27%3E%3Cpath%20fill%3D%27white%27%20d%3D%27M4%200h1v1h-1zM3%201h1v1h-1zM4%201h1v1h-1zM8%201h1v1h-1zM0%202h1v1h-1zM1%202h1v1h-1zM2%202h1v1h-1zM3%202h1v1h-1zM4%202h1v1h-1zM9%202h1v1h-1zM0%203h1v1h-1zM4%203h1v1h-1zM7%203h1v1h-1zM10%203h1v1h-1zM0%204h1v1h-1zM4%204h1v1h-1zM8%204h1v1h-1zM10%204h1v1h-1zM0%205h1v1h-1zM4%205h1v1h-1zM8%205h1v1h-1zM10%205h1v1h-1zM0%206h1v1h-1zM4%206h1v1h-1zM8%206h1v1h-1zM10%206h1v1h-1zM0%207h1v1h-1zM4%207h1v1h-1zM7%207h1v1h-1zM10%207h1v1h-1zM0%208h1v1h-1zM1%208h1v1h-1zM2%208h1v1h-1zM3%208h1v1h-1zM4%208h1v1h-1zM9%208h1v1h-1zM3%209h1v1h-1zM4%209h1v1h-1zM8%209h1v1h-1zM4%2010h1v1h-1z%27%2F%3E%3C%2Fsvg%3E")}
[data-icon="muted"]{--pixel-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2012%2012%27%20shape-rendering%3D%27crispEdges%27%3E%3Cpath%20fill%3D%27white%27%20d%3D%27M4%200h1v1h-1zM3%201h1v1h-1zM4%201h1v1h-1zM0%202h1v1h-1zM1%202h1v1h-1zM2%202h1v1h-1zM3%202h1v1h-1zM4%202h1v1h-1zM0%203h1v1h-1zM4%203h1v1h-1zM7%203h1v1h-1zM10%203h1v1h-1zM0%204h1v1h-1zM4%204h1v1h-1zM8%204h1v1h-1zM9%204h1v1h-1zM0%205h1v1h-1zM4%205h1v1h-1zM8%205h1v1h-1zM9%205h1v1h-1zM0%206h1v1h-1zM4%206h1v1h-1zM7%206h1v1h-1zM10%206h1v1h-1zM0%207h1v1h-1zM4%207h1v1h-1zM0%208h1v1h-1zM1%208h1v1h-1zM2%208h1v1h-1zM3%208h1v1h-1zM4%208h1v1h-1zM3%209h1v1h-1zM4%209h1v1h-1zM4%2010h1v1h-1z%27%2F%3E%3C%2Fsvg%3E")}
[data-icon="rules"]{--pixel-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2012%2012%27%20shape-rendering%3D%27crispEdges%27%3E%3Cpath%20fill%3D%27white%27%20d%3D%27M3%200h1v1h-1zM4%200h1v1h-1zM5%200h1v1h-1zM6%200h1v1h-1zM7%200h1v1h-1zM2%201h1v1h-1zM3%201h1v1h-1zM7%201h1v1h-1zM8%201h1v1h-1zM2%202h1v1h-1zM3%202h1v1h-1zM7%202h1v1h-1zM8%202h1v1h-1zM7%203h1v1h-1zM8%203h1v1h-1zM6%204h1v1h-1zM7%204h1v1h-1zM5%205h1v1h-1zM6%205h1v1h-1zM5%206h1v1h-1zM6%206h1v1h-1zM5%208h1v1h-1zM6%208h1v1h-1zM5%209h1v1h-1zM6%209h1v1h-1z%27%2F%3E%3C%2Fsvg%3E")}
[data-icon="history"]{--pixel-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2012%2012%27%20shape-rendering%3D%27crispEdges%27%3E%3Cpath%20fill%3D%27white%27%20d%3D%27M2%201h1v1h-1zM3%201h1v1h-1zM4%201h1v1h-1zM5%201h1v1h-1zM6%201h1v1h-1zM7%201h1v1h-1zM8%201h1v1h-1zM9%201h1v1h-1zM2%202h1v1h-1zM3%202h1v1h-1zM4%202h1v1h-1zM5%202h1v1h-1zM6%202h1v1h-1zM7%202h1v1h-1zM8%202h1v1h-1zM9%202h1v1h-1zM2%204h1v1h-1zM3%204h1v1h-1zM4%204h1v1h-1zM5%204h1v1h-1zM6%204h1v1h-1zM7%204h1v1h-1zM8%204h1v1h-1zM9%204h1v1h-1zM2%205h1v1h-1zM3%205h1v1h-1zM4%205h1v1h-1zM5%205h1v1h-1zM6%205h1v1h-1zM7%205h1v1h-1zM8%205h1v1h-1zM9%205h1v1h-1zM2%207h1v1h-1zM3%207h1v1h-1zM4%207h1v1h-1zM5%207h1v1h-1zM6%207h1v1h-1zM7%207h1v1h-1zM8%207h1v1h-1zM9%207h1v1h-1zM2%208h1v1h-1zM3%208h1v1h-1zM4%208h1v1h-1zM5%208h1v1h-1zM6%208h1v1h-1zM7%208h1v1h-1zM8%208h1v1h-1zM9%208h1v1h-1z%27%2F%3E%3C%2Fsvg%3E")}
[data-icon="restart"]{--pixel-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2012%2012%27%20shape-rendering%3D%27crispEdges%27%3E%3Cpath%20fill%3D%27white%27%20d%3D%27M3%200h1v1h-1zM4%200h1v1h-1zM5%200h1v1h-1zM6%200h1v1h-1zM7%200h1v1h-1zM2%201h1v1h-1zM8%201h1v1h-1zM1%202h1v1h-1zM9%202h1v1h-1zM0%203h1v1h-1zM10%203h1v1h-1zM0%204h1v1h-1zM0%205h1v1h-1zM0%206h1v1h-1zM1%207h1v1h-1zM9%207h1v1h-1zM2%208h1v1h-1zM8%208h1v1h-1zM9%208h1v1h-1zM3%209h1v1h-1zM4%209h1v1h-1zM5%209h1v1h-1zM6%209h1v1h-1zM7%209h1v1h-1zM8%209h1v1h-1zM9%209h1v1h-1zM8%2010h1v1h-1zM9%2010h1v1h-1z%27%2F%3E%3C%2Fsvg%3E")}
.card .pixel-suit{color:transparent}
.card .pixel-suit::before{content:'';position:absolute;left:0;top:0;width:1em;height:1em;background:var(--card-ink);-webkit-mask:var(--pixel-mask) center/contain no-repeat;mask:var(--pixel-mask) center/contain no-repeat;image-rendering:pixelated}
.card .ctr.pixel-suit::before{left:50%;top:50%;width:.85em;height:.85em;transform:translate(-50%,-50%)}
.suit-row{display:flex;align-items:center;gap:10px;letter-spacing:0}
.suit-row .pixel-suit{display:block;width:20px;height:20px;font-size:0;background:currentColor;-webkit-mask:var(--pixel-mask) center/contain no-repeat;mask:var(--pixel-mask) center/contain no-repeat;image-rendering:pixelated}
.tool-icon{position:relative;font-size:0;width:18px;height:18px;flex:none;color:inherit}
.tool-icon::before{content:'';display:block;width:16px;height:16px;background:currentColor;-webkit-mask:var(--pixel-mask) center/contain no-repeat;mask:var(--pixel-mask) center/contain no-repeat;image-rendering:pixelated}

/* 电玩主题：集中配色，沿用既有桌面和手机布局。 */
:root{
  color-scheme:dark;
  --arcade-bg:#101329;--arcade-panel:#242044;--arcade-panel-raised:#302953;
  --arcade-table:#172b48;--arcade-seat:#203655;--arcade-line:#665886;--arcade-edge:#080e20;
  --arcade-white:#f4efff;--arcade-muted:#bbb5d1;--arcade-cyan:#72e9ec;--arcade-pink:#ff8dc3;--arcade-gold:#ffd57d;
  --arcade-card:#fff8e5;--arcade-card-ink:#243458;--arcade-card-red:#b42e55;
  --paper:var(--arcade-bg);--surface:var(--arcade-panel);--ink:var(--arcade-white);--muted:var(--arcade-muted);--line:var(--arcade-line);
  --green:var(--arcade-cyan);--green-hover:var(--arcade-cyan);--table:var(--arcade-table);--table-muted:var(--arcade-muted);
  --gold:var(--arcade-gold);--gold-b:var(--arcade-gold);--gold-dim:#ffd57d55;
  --text:var(--arcade-white);--text-dim:var(--arcade-muted);--panel-border:var(--arcade-line);
  --serif:"Courier New","PingFang SC","Microsoft YaHei",monospace;
  --radius-control:4px;--radius-card:4px;--radius-panel:6px;
  --arcade-shadow:4px 4px 0 var(--arcade-edge);
  --pixel-dots:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath fill='%235366a0' d='M0 0h2v2H0zM3 3h2v2H3z'/%3E%3C/svg%3E");
}
body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;background:var(--arcade-bg)}
button,input{transition:color .12s,background-color .12s,border-color .12s}
button:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible,.k-choice:focus-visible{outline:2px dashed var(--arcade-gold);outline-offset:4px}
::selection{background:var(--arcade-pink);color:var(--arcade-edge)}
::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{background:var(--arcade-line);border-radius:0}
button.primary{border:2px solid var(--arcade-pink);border-radius:4px;background:var(--arcade-pink);color:var(--arcade-edge);box-shadow:0 4px 0 #8c3c73,inset 0 2px 0 #ffbedf;font-weight:750}
button.primary:hover{background:#ffacd3;border-color:#ffacd3}
.setup-box{border:2px solid var(--arcade-line);border-radius:6px;background:var(--arcade-panel);box-shadow:6px 6px 0 var(--arcade-edge)}
.setup-heading{border-bottom:2px solid var(--arcade-line);padding-bottom:18px}
.setup-box h1,.hd-title{font-family:inherit;font-weight:800;letter-spacing:2px;color:var(--arcade-gold)}
.suit-row{gap:10px}.suit-row .pixel-suit{background:var(--arcade-cyan)}.suit-row [data-suit="heart"],.suit-row [data-suit="diamond"]{background:var(--arcade-pink)}
.mode-switch{padding:4px;gap:4px;border:1px solid var(--arcade-line);border-radius:4px;background:var(--arcade-bg)}
.mode-switch button{border-radius:2px;color:var(--arcade-muted);font-weight:600}
.mode-switch button[aria-pressed="true"]{background:var(--arcade-cyan);color:var(--arcade-edge);box-shadow:0 2px 0 #317781}
.mode-switch button:disabled,.lan-start:disabled{opacity:1;border-style:dashed;background:var(--arcade-panel-raised);color:var(--arcade-muted);box-shadow:none}
.count-btn,.who-btn,.name-inp,.lan-form-row input,.lan-form-row button,.lan-copy,.lan-seat-row button,.lan-host-controls button,.lan-leave{border:1px solid var(--arcade-line);border-radius:4px;background:var(--arcade-bg);color:var(--arcade-white)}
.count-btn.on,.who-btn.ai,.lan-seat-row button.on{background:var(--arcade-panel-raised);color:var(--arcade-cyan);border-color:var(--arcade-cyan);box-shadow:inset 0 -2px 0 #3b737e}
.count-btn:hover,.lan-form-row button:hover,.lan-copy:hover,.lan-seat-row button:hover{border-color:var(--arcade-cyan);background:var(--arcade-panel-raised)}
.slot-index{color:var(--arcade-gold);font-family:"Courier New",monospace;font-weight:700}
.name-inp::placeholder,.lan-form-row input::placeholder{color:var(--arcade-muted)}
.name-inp:focus,.lan-form-row input:focus{border-color:var(--arcade-cyan);box-shadow:inset 0 -2px 0 var(--arcade-cyan)}
.setup-feedback,.lan-error{color:var(--arcade-pink)}
.lan-events li,.lan-events time{color:var(--arcade-muted)}
.lan-presence.online{color:var(--arcade-cyan)}.lan-presence.away{color:var(--arcade-gold)}.lan-presence.bot{color:var(--arcade-pink)}
.lan-meta{border:1px solid var(--arcade-line);border-radius:4px;background:var(--arcade-bg)}
.lan-host-controls .lan-start{border-color:var(--arcade-cyan);background:var(--arcade-cyan);color:var(--arcade-edge)}
.lan-host-controls .lan-start:disabled{border-color:var(--arcade-line);background:var(--arcade-panel-raised);color:var(--arcade-muted)}
.lan-leave{color:var(--arcade-pink)}
.text-button{color:var(--arcade-cyan);text-decoration:underline;text-underline-offset:3px}
.quick-rules summary{color:var(--arcade-cyan);font-weight:600}
header{background:var(--arcade-bg);border-bottom:2px solid var(--arcade-line)}
.hd-btns button,#btn-table-tools,#btn-music,#btn-sound-mute,#btn-quick-rules,#table-history-close{border-radius:4px;color:var(--arcade-muted);background:transparent}
.hd-btns button:hover{background:var(--arcade-panel-raised);color:var(--arcade-cyan)}
.hd-info #hd-turn{color:var(--arcade-cyan)}
.hd-info #hd-act{background:var(--arcade-panel);color:var(--arcade-white);border:1px solid var(--arcade-line);border-radius:3px;font-family:"Courier New","PingFang SC",monospace}
.hd-info .combo-tag{background:var(--arcade-gold);color:var(--arcade-edge);border-radius:3px}
.end-tag{color:var(--arcade-gold)!important}
#table-connection{color:var(--arcade-cyan)}#table-connection[data-state="reconnecting"]{color:var(--arcade-gold)}
.center-col{border:2px solid #466589;border-radius:6px;background:var(--arcade-table);box-shadow:0 4px 0 var(--arcade-edge)}
.table-heading b{color:var(--arcade-cyan)}.table-heading span,.pile-v{color:var(--arcade-muted)}.pile-v b{color:var(--arcade-gold);font-family:"Courier New",monospace;font-weight:700}
#resolve-banner,.table-workspace .cb{color:var(--arcade-gold)}
.table-players .pl-row{border:1px solid #52718d;border-radius:4px;background:var(--arcade-seat);color:var(--arcade-white)}
.table-players .pl-avatar{border:1px solid #647b9d;border-radius:2px;background:var(--arcade-table);color:var(--arcade-muted);font-family:"Courier New",monospace}
.table-players .pl-name{color:var(--arcade-white);font-weight:600}
.table-players .pl-detail,.table-players .pl-state,.table-players .pl-score small{color:var(--arcade-muted)}
.table-players .pl-row.cur{background:#353a65;border-color:var(--arcade-cyan);box-shadow:inset 3px 0 0 var(--arcade-cyan)}
.table-players .pl-row.cur .pl-state{color:var(--arcade-cyan);font-weight:600}
.table-players .pl-row.cur .pl-avatar{background:var(--arcade-cyan);color:var(--arcade-edge);border-color:var(--arcade-cyan)}
.table-players .pl-score{color:var(--arcade-gold);font-family:"Courier New",monospace;font-weight:700}
.hand-area{border-color:#466589;border-radius:0 0 4px 4px;background:#15213b}
#hint-bar{color:var(--arcade-white)}#hand-owner,.hand-empty{color:var(--arcade-muted)}.combo-offer-title{color:var(--arcade-gold)}
#q-axis-actions button,#combo-offer button,#btn-cancel,#btn-abort,#btn-finish{border:1px solid #647396;border-radius:4px;background:#263754;color:var(--arcade-white)}
#btn-finish{background:var(--arcade-gold);color:var(--arcade-edge);border-color:var(--arcade-gold);box-shadow:0 2px 0 #8c662f}
#q-axis-actions button:hover,#combo-offer button:hover,#btn-cancel:hover{background:#324965;border-color:var(--arcade-cyan)}
#btn-abort{color:var(--arcade-pink)}#combo-offer button.ghost{background:transparent;color:var(--arcade-muted);border-style:dashed}
#table-error{border-color:var(--arcade-pink);border-radius:4px;background:var(--arcade-panel);color:var(--arcade-pink);font-weight:600}
.cr{color:var(--arcade-pink)}.cb{color:var(--arcade-cyan)}.log-row,.mini-tips{color:var(--arcade-muted)}.mini-tips b{color:var(--arcade-gold)}
.log-row{border-bottom-color:#494063;border-bottom-style:dashed}
.panel-title{color:var(--arcade-white);font-weight:600}
#btn-quick-rules{border-color:var(--arcade-line);background:var(--arcade-panel);color:var(--arcade-cyan)}
#btn-quick-rules:hover{border-color:var(--arcade-cyan);background:var(--arcade-panel-raised)}
/* 暖白牌面、红黑花色与像素图案，状态边框画在桌面上。 */
.card{--card-ink:var(--arcade-card-ink);border:2px solid var(--arcade-card);border-radius:3px;background:var(--arcade-card);color:var(--card-ink);box-shadow:0 3px 0 var(--arcade-edge);transition:none}
.card.red{--card-ink:var(--arcade-card-red);color:var(--card-ink)}
.card::before{inset:1px;border:1px solid #b1b3c5;border-radius:1px}
.card.small,.effect-choice-card .card.small{border-radius:3px;box-shadow:0 2px 0 var(--arcade-edge)}
.card .rk{font-family:"Courier New",monospace;font-weight:700}
.card.face::after,.card.small.face::after{inset:3px;border:1px dashed #b1b3c5;border-radius:0}
.card.back{background-color:#2d3b6b;background-image:var(--pixel-dots);border:2px solid #b2c7e4;box-shadow:0 3px 0 var(--arcade-edge)}
.card.back::after{width:24px;height:24px;border:3px double var(--arcade-cyan);border-radius:0;background:#2d3b6b;transform:translate(-50%,-50%);box-shadow:0 0 0 3px #2d3b6b}
.card.small.back::after{width:14px;height:14px;border-width:3px;box-shadow:0 0 0 2px #2d3b6b}
.card.empty{border:1px dashed #687e9e;background:transparent;box-shadow:none}
.card.is-actionable:hover,.card.selectable:hover,#hand .card.selectable:hover{transform:none;box-shadow:0 0 0 2px var(--arcade-edge),0 0 0 4px var(--arcade-cyan)}
.card.selectable{box-shadow:0 3px 0 var(--arcade-edge);outline:2px dashed var(--arcade-cyan);outline-offset:3px}
.card.selected,.card.menu-selected{background:#e7ffff;border-color:#e7ffff;transform:none!important;box-shadow:0 0 0 2px var(--arcade-edge),0 0 0 4px var(--arcade-cyan);outline:none}
.card.back.menu-selected{background-color:#2d3b6b;background-image:var(--pixel-dots);border-color:var(--arcade-cyan)}
.card.wild{box-shadow:0 0 0 2px var(--arcade-edge),0 0 0 4px var(--arcade-pink)}
.wild-tag{background:var(--arcade-pink);color:var(--arcade-edge);border:1px solid var(--arcade-edge);border-radius:2px;box-shadow:0 2px 0 var(--arcade-edge);font-weight:700}
.card.k-target{animation:none;box-shadow:0 0 0 2px var(--arcade-edge),0 0 0 4px var(--arcade-gold);filter:none}
.card.k-target::after{content:'锁定';position:absolute;inset:auto 4px 4px;border:0;border-radius:2px;padding:1px;background:var(--arcade-gold);color:var(--arcade-edge);font-size:10px;text-align:center;line-height:14px}
.card.q-line-hover{outline:3px dashed var(--arcade-cyan);outline-offset:3px;box-shadow:0 0 0 1px var(--arcade-edge);filter:none}
.conn-0,.conn-1,.conn-2,.conn-3{outline-offset:-5px}
.conn-0{outline-color:#ce4663;outline-style:solid}.conn-1{outline-color:#326791;outline-style:dashed}.conn-2{outline-color:#357848;outline-style:double}.conn-3{outline-color:#846018;outline-style:dotted}
.card:focus-visible{outline:2px dashed var(--arcade-gold);outline-offset:5px}
/* 选择弹层采用同一套紫色面板，按钮维持原来的位置和语义。 */
.overlay,#modal.is-effect-choice{background:rgba(8,10,29,.72);backdrop-filter:none;-webkit-backdrop-filter:none}
.modal-box,.modal-box.k-draft-modal,#modal-box.effect-choice-dialog,.pass-box,#quick-panel,.card-menu,#sound-popover,.side.open{border:2px solid var(--arcade-line);border-radius:6px;background:var(--arcade-panel);color:var(--arcade-white);box-shadow:var(--arcade-shadow)}
.modal-box,.modal-box.k-draft-modal,.pass-box{backdrop-filter:none;-webkit-backdrop-filter:none}
.modal-box h3,#modal-box.effect-choice-dialog h3,.k-draft-modal h3,.pass-name,.over-win{color:var(--arcade-gold);text-shadow:none}
.k-draft-kicker{color:var(--arcade-pink)}
.k-draft-target,.k-draft-tip,.pass-kicker,.pass-sub,.pass-tip,.modal-msg,#rules p,#rules li,#quick-panel p,#quick-panel li,.effect-choice-kicker,.effect-choice-note{color:var(--arcade-muted);text-shadow:none}
.effect-choice-description{color:var(--arcade-white)}
#rules h4,#quick-panel h4,.k-draft-target .cb{color:var(--arcade-cyan)}
.modal-inline-error{color:var(--arcade-pink)}
.modal-btns button{border:1px solid var(--arcade-cyan);border-radius:4px;background:var(--arcade-cyan);color:var(--arcade-edge);box-shadow:0 2px 0 #317781}
.modal-btns button:hover{background:#a0f5f5;color:var(--arcade-edge);transform:none;box-shadow:0 2px 0 #317781}
.modal-btns button.ghost{background:var(--arcade-panel-raised);color:var(--arcade-white);border-color:var(--arcade-line);box-shadow:0 2px 0 var(--arcade-edge)}
.over-row{border:1px solid var(--arcade-line);border-radius:4px;background:var(--arcade-panel-raised)}
.k-choice,#modal-box:not(.k-draft-modal) .k-choice{border:1px solid var(--arcade-line);border-radius:4px;background:var(--arcade-panel-raised);color:var(--arcade-white);animation:none;box-shadow:0 3px 0 var(--arcade-edge);transition:none}
.k-choice .pick-label{color:var(--arcade-muted)}
.k-choice:hover:not(:disabled),.k-choice.chosen{border-color:var(--arcade-cyan);box-shadow:inset 0 0 0 1px var(--arcade-cyan),0 3px 0 var(--arcade-edge);transform:none}
.k-choice.chosen::after{border:1px solid var(--arcade-edge);border-radius:2px;background:var(--arcade-gold);color:var(--arcade-edge);box-shadow:none}
.effect-choice-option{border:1px solid var(--arcade-line);border-radius:4px;transition:none}
.effect-choice-primary,.effect-choice-primary:hover:not(:disabled){background:var(--arcade-cyan);color:var(--arcade-edge);border-color:var(--arcade-cyan);box-shadow:0 3px 0 #317781}
.effect-choice-primary .option-detail{color:#203955}
.effect-choice-secondary,.effect-choice-secondary:hover:not(:disabled){background:var(--arcade-panel-raised);color:var(--arcade-white);border-color:#9582ba;box-shadow:0 3px 0 var(--arcade-edge)}
.effect-choice-secondary:hover:not(:disabled){border-color:var(--arcade-cyan)}
.effect-choice-secondary .option-detail{color:var(--arcade-muted)}
.effect-choice-option:disabled{background:#292840;border-color:var(--arcade-line);border-style:dashed;color:var(--arcade-muted);opacity:1;box-shadow:none}
.effect-choice-option:disabled .option-detail{color:var(--arcade-muted)}
.card-menu-heading h2,.qp-close,#card-menu-close{color:var(--arcade-muted)}
#card-menu-close{border-radius:3px}
#card-menu-close:hover{background:var(--arcade-panel-raised);color:var(--arcade-white)}
.card-menu-action,.card-menu-action:hover{border:1px solid var(--arcade-line);border-radius:4px;background:var(--arcade-panel-raised);color:var(--arcade-cyan)}
.card-menu-action small{color:var(--arcade-muted)}
.card-menu-action:hover{border-color:var(--arcade-cyan);background:#39415f}
#table-tools{border-radius:4px}
#sound-popover #btn-music,#sound-popover #btn-sound-mute{border-color:var(--arcade-line);background:var(--arcade-panel-raised);color:var(--arcade-white)}
#sound-popover #btn-music[aria-pressed="true"]{border-color:var(--arcade-cyan);color:var(--arcade-cyan)}
#sound-popover .volume-control input{appearance:none;-webkit-appearance:none;accent-color:var(--arcade-cyan);background:transparent;border:0;cursor:pointer}
#sound-popover input::-webkit-slider-runnable-track{height:6px;background:var(--arcade-bg);border:1px solid var(--arcade-line)}
#sound-popover input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:14px;height:18px;margin-top:-7px;border:2px solid var(--arcade-table);border-radius:1px;background:var(--arcade-cyan);box-shadow:0 0 0 1px var(--arcade-cyan)}
#sound-popover input::-moz-range-track{height:4px;background:var(--arcade-bg);border:1px solid var(--arcade-line)}
#sound-popover input::-moz-range-thumb{width:10px;height:14px;border:2px solid var(--arcade-table);border-radius:1px;background:var(--arcade-cyan);box-shadow:0 0 0 1px var(--arcade-cyan)}
.toast{border:2px solid var(--arcade-cyan);border-radius:4px;background:var(--arcade-panel);color:var(--arcade-white);box-shadow:var(--arcade-shadow);backdrop-filter:none}
.score-pop,.score-pop.combo-2,.score-pop.combo-3{border:2px solid var(--arcade-gold);border-radius:4px;background:var(--arcade-panel);color:var(--arcade-gold);box-shadow:var(--arcade-shadow);font-family:"Courier New","PingFang SC",monospace}
.score-pop small{color:var(--arcade-white)}
.card.elimming{animation:arcadeRemove .3s steps(2,end) forwards}
.card.q-reveal,.card.k-in{animation:arcadeReveal .24s steps(2,end)}
.card.k-out{animation:arcadeRemove .2s steps(2,end) forwards}
.score-pop{animation:arcadeScore 1.4s steps(1,end) forwards}
#resolve-banner.flash{animation:none}
@keyframes arcadeRemove{0%,45%{visibility:visible}46%,65%{visibility:hidden}66%,85%{visibility:visible}86%,100%{visibility:hidden}}
@keyframes arcadeReveal{0%,25%{visibility:hidden}26%,100%{visibility:visible}}
@keyframes arcadeScore{0%,85%{opacity:1;transform:none}86%,100%{opacity:0;transform:none}}
@media(min-width:961px){
  #table-tools{border:0;background:transparent;box-shadow:none}
}
@media(max-width:960px){
  #table-tools{border:2px solid var(--arcade-line);background:var(--arcade-panel);box-shadow:var(--arcade-shadow)}
  #sound-popover{border:0;border-top:1px solid var(--arcade-line);box-shadow:none}
  #table-history-close,#btn-table-tools{background:var(--arcade-panel);color:var(--arcade-cyan);border-color:var(--arcade-line)}
  #table-connection:not(.hidden){background:var(--arcade-panel)}
  .table-players .pl-row.cur .pl-state{border-radius:2px;background:var(--arcade-cyan);color:var(--arcade-edge)}
  .card.elimming{animation:arcadeRemove .3s steps(2,end) forwards}
  .card.q-reveal,.card.k-in{animation:arcadeReveal .24s steps(2,end)}
  .card.k-out{animation:arcadeRemove .2s steps(2,end) forwards}
}

/* 得分阶段只换颜色，牌桌、手牌与操作槽的尺寸保持稳定。 */
:root[data-arcade-phase="build"]{
  --arcade-bg:#10232d;--arcade-panel:#203d4d;--arcade-panel-raised:#2a4a5a;
  --arcade-table:#183e4d;--arcade-seat:#244957;--arcade-line:#527d8b;
  --arcade-cyan:#9debbd;--arcade-pink:#ffa4bb;--arcade-gold:#ffe49a;
}
:root[data-arcade-phase="rush"]{
  --arcade-bg:#291a31;--arcade-panel:#453044;--arcade-panel-raised:#5b3b51;
  --arcade-table:#3c2c46;--arcade-seat:#4a3852;--arcade-line:#a06b8b;
  --arcade-cyan:#ffc48c;--arcade-pink:#ff9eaf;--arcade-gold:#ffe69e;
}
:root[data-arcade-phase="final"],:root[data-arcade-phase="finished"]{
  --arcade-bg:#261536;--arcade-panel:#4b2b58;--arcade-panel-raised:#633d70;
  --arcade-table:#3c2852;--arcade-seat:#513563;--arcade-line:#a97cb6;
  --arcade-cyan:#efb7ff;--arcade-pink:#ffb7d2;--arcade-gold:#ffe4a1;
}
body,header,.center-col,.hand-area,.modal-box,.card-menu{transition:background-color .35s,border-color .35s}
.center-col{border-color:var(--arcade-line)}
.hand-area{background:var(--arcade-bg);border-color:var(--arcade-line)}
.table-players .pl-row{background:var(--arcade-seat);border-color:var(--arcade-line)}
.table-players .pl-row.cur{background:var(--arcade-panel-raised);border-color:var(--arcade-cyan)}
.table-players .pl-avatar{background:var(--arcade-table);border-color:var(--arcade-line)}
.table-players .pl-row.is-winner{border-color:var(--arcade-gold);box-shadow:inset 3px 0 0 var(--arcade-gold)}
.table-players .pl-row.is-winner .pl-state{color:var(--arcade-gold)}
.arcade-phase{position:relative;display:flex;align-items:center;gap:8px;flex:none;min-width:138px;height:38px;padding:3px 9px 6px;border:1px solid var(--arcade-line);border-radius:4px;background:var(--arcade-panel);color:var(--arcade-white);font-size:12px;line-height:1}
.arcade-phase-face{display:block;flex:none;width:24px;height:24px}
.arcade-phase-face svg,.arcade-reaction svg,.arcade-result-sprite svg{display:block;width:100%;height:100%;image-rendering:pixelated}
#arcade-phase-score{font-family:"Courier New",monospace;font-size:12px;color:var(--arcade-gold);white-space:nowrap}
.arcade-phase-progress{position:absolute;left:0;bottom:0;width:100%;height:3px;overflow:hidden;background:var(--arcade-bg)}
.arcade-phase-progress::before{content:'';display:block;width:var(--phase-progress,0%);height:100%;background:var(--arcade-cyan);transition:width .2s}
:root[data-arcade-phase] #hd-end{display:none!important}
/* 插画在牌角之间；牌面重绘和鼠标经过都不让卡片抬升。 */
.card .card-art{inset:24% 12%;font-size:0;opacity:1;pointer-events:none}
.card-art-svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%;image-rendering:pixelated;pointer-events:none}
.card.small .card-art{inset:24% 12% 20% 18%}
#hand .card .card-art{inset:28% 14% 30% 28%}
#hand .card .st2{display:none}
.card::before{border-top-width:2px}
.card.red::before{border-color:#d997aa}
.card.face::after{border-color:#b8a2cf}
.arcade-reaction{position:absolute;top:10px;right:16px;z-index:28;display:none;align-items:center;gap:9px;max-width:260px;min-height:46px;padding:7px 12px;border:2px solid var(--arcade-cyan);border-radius:5px;background:var(--arcade-panel);box-shadow:3px 3px 0 var(--arcade-edge);color:var(--arcade-white);pointer-events:none}
#arcade-reaction-icon{display:block;flex:none;width:30px;height:30px}
#arcade-reaction-text{font-size:12px;font-weight:650;line-height:1.5}
#game.has-arcade-feedback .arcade-reaction{display:flex}
#game[data-arcade-reaction="combo"] .arcade-reaction{border-color:var(--arcade-pink);background:var(--arcade-panel-raised)}
#game[data-arcade-reaction="finish"] .arcade-reaction{border-color:var(--arcade-gold)}
#game.is-arcade-celebrating .arcade-phase-face,#game.is-arcade-celebrating #arcade-reaction-icon{animation:pixelHappy .3s steps(2,end) 3}
#game.is-arcade-celebrating .emote-eyes{animation:pixelBlink .5s steps(1,end) 2}
.pixel-spark{position:absolute;display:none;width:5px;height:5px;background:var(--arcade-gold);pointer-events:none}
.spark-one{left:-9px;top:0}.spark-two{right:-8px;top:14px;background:var(--arcade-pink)}.spark-three{right:12px;top:-10px;background:var(--arcade-cyan)}
#game.is-arcade-celebrating .pixel-spark{display:block;animation:pixelSpark .6s steps(2,end) 2}
.arcade-result-title{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--arcade-gold)}
.arcade-result-sprite{display:block;width:48px;height:48px;flex:none;animation:pixelHappy .35s steps(2,end) 3}
@keyframes pixelHappy{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes pixelBlink{0%,40%,100%{opacity:1}41%,50%{opacity:0}}
@keyframes pixelSpark{0%{opacity:0;transform:translateY(3px)}50%{opacity:1;transform:translateY(-3px)}100%{opacity:0;transform:translateY(-7px)}}
/* 大桌面、当前座位和较小信息面板形成层次。 */
@media(min-width:961px) and (min-height:561px){
  .layout{grid-template-columns:minmax(0,1fr) 248px;gap:20px}
  .side{gap:14px}
  .side .log-panel{padding:14px;border:1px solid var(--arcade-line);border-radius:6px;background:var(--arcade-panel)}
  .side #log{max-height:clamp(150px,calc(100dvh - 400px),440px)}
  .side #combo-panel{padding:14px;border:1px solid var(--arcade-line);border-radius:4px;background:var(--arcade-panel-raised)}
  .table-players #players-panel[data-count="2"]:has(.pl-row:first-child.cur){grid-template-columns:1.12fr .88fr;max-width:560px}
  .table-players #players-panel[data-count="2"]:has(.pl-row:last-child.cur){grid-template-columns:.88fr 1.12fr;max-width:560px}
  .table-players .pl-row.cur{box-shadow:inset 3px 0 0 var(--arcade-cyan),0 3px 0 var(--arcade-edge)}
}
@media(max-width:1100px) and (min-width:961px){.header-inner{gap:10px}.arcade-phase{min-width:120px;gap:6px}}
@media(max-width:960px){
  .arcade-phase{height:34px;min-width:82px;padding:3px 7px 6px;gap:6px;font-size:11px}
  .arcade-phase-face{width:22px;height:22px}
  #arcade-phase-score{display:none}
  .hd-title{display:none}
  .table-players .pl-row.is-winner .pl-state{background:var(--arcade-gold);color:var(--arcade-edge)}
  .arcade-reaction{position:fixed;top:auto;right:auto;left:50%;bottom:116px;transform:translateX(-50%);max-width:calc(100vw - 40px);min-height:40px;padding:5px 10px}
  #arcade-reaction-icon{width:26px;height:26px}
  #arcade-reaction-text{font-size:11px;white-space:nowrap}
  .center-col:has(.hand-area.has-active-step) .arcade-reaction{display:none!important}
}
@media(orientation:landscape) and (max-height:560px) and (max-width:960px){
  .arcade-phase{height:32px}
  .arcade-reaction{left:calc((100vw - 220px)/2);bottom:96px;max-width:calc(100vw - 280px)}
}
@media(prefers-reduced-motion:reduce){
  #game.is-arcade-celebrating .arcade-phase-face,#game.is-arcade-celebrating #arcade-reaction-icon,.arcade-result-sprite{animation:none!important;transform:none!important}
  .pixel-spark{display:none!important}
  .arcade-phase-progress::before{transition:none}
}

/* 角色动作独立于卡框；移动/选牌的坐标和数字、花色始终不动。 */
.card-art{--sprite-motion:spriteHello;--sprite-bye:spriteBye}
.card-art[data-motion="swing"]{--sprite-motion:spriteSwing}
.card-art[data-motion="wiggle"]{--sprite-motion:spriteWiggle}
.card-art[data-motion="launch"]{--sprite-motion:spriteLaunch;--sprite-bye:spriteLaunchBye}
.card-art[data-motion="shine"]{--sprite-motion:spriteShine}
.card-art[data-motion="orbit"]{--sprite-motion:spriteOrbit;--sprite-bye:spriteOrbitBye}
.card-art[data-motion="peek"]{--sprite-motion:spritePeek}
.card-art[data-motion="pop"]{--sprite-motion:spritePop}
.card-art[data-motion="wave"]{--sprite-motion:spriteWave}
.card-art[data-motion="royal"]{--sprite-motion:spriteRoyal}
.card-art-svg{overflow:visible}
.card-character{transform-box:fill-box;transform-origin:50% 75%}
.card-charm,.card-eyes,.card-mouth{transform-box:fill-box;transform-origin:center}
@media(hover:hover) and (pointer:fine){
  .card:not(.elimming):hover .card-character{animation:var(--sprite-motion) .6s steps(4,end) 2}
  .card:not(.elimming):hover .card-charm{animation:spriteCharm .6s steps(4,end) 2}
  .card:not(.elimming):hover .card-eyes{animation:spriteEye .6s steps(2,end) 2}
  .card.back:not(.elimming):hover::after{animation:spriteBack .55s steps(4,end) 2}
}
.card:is(.menu-selected,.selected):not(.elimming) .card-character,.card:not(.elimming):focus-visible .card-character{animation:var(--sprite-motion) .48s steps(4,end) 1}
.card:is(.menu-selected,.selected):not(.elimming) .card-charm{animation:spriteCharm .48s steps(4,end) 1}
.card.back.menu-selected::after{animation:spriteBack .45s steps(4,end) 1}
@keyframes spriteSwing{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg)}60%{transform:rotate(7deg)}}
@keyframes spriteWiggle{0%,100%{transform:none}25%{transform:translate(-1px,-1px) rotate(-5deg)}60%{transform:translate(1px,-2px) rotate(5deg)}}
@keyframes spriteLaunch{0%,100%{transform:none}35%{transform:translateY(-3px) rotate(-3deg)}70%{transform:translateY(-1px) rotate(3deg)}}
@keyframes spriteShine{0%,100%{transform:scale(1)}40%{transform:scale(1.08) rotate(-3deg)}70%{transform:scale(1.03) rotate(3deg)}}
@keyframes spriteOrbit{0%,100%{transform:rotate(0)}30%{transform:rotate(-9deg) translateY(-1px)}65%{transform:rotate(9deg) translateY(-1px)}}
@keyframes spritePeek{0%,100%{transform:none}30%{transform:translateX(-1px) rotate(-5deg)}65%{transform:translateX(1px) rotate(5deg)}}
@keyframes spritePop{0%,100%{transform:scale(1)}35%{transform:translateY(-2px) scale(1.08,.94)}70%{transform:scale(.97,1.04)}}
@keyframes spriteWave{0%,100%{transform:none}25%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}75%{transform:rotate(-3deg)}}
@keyframes spriteRoyal{0%,100%{transform:none}40%{transform:translateY(-2px) rotate(-4deg)}70%{transform:rotate(4deg)}}
@keyframes spriteHello{0%,100%{transform:none}25%{transform:translateY(-2px) rotate(-7deg)}60%{transform:translateY(-1px) rotate(7deg)}}
@keyframes spriteCharm{0%,100%{transform:none}45%{transform:translateY(-1px) rotate(12deg) scale(1.15)}}
@keyframes spriteEye{0%,35%,100%{transform:scaleY(1)}55%,65%{transform:scaleY(.35)}}
@keyframes spriteBack{0%,100%{transform:translate(-50%,-50%) scale(1)}40%{transform:translate(-50%,-50%) scale(1.15) rotate(-5deg)}70%{transform:translate(-50%,-50%) scale(1.05) rotate(5deg)}}
/* 稳定图层按真实消除事件一次播放，重绘、补牌和联机重复同步不会重播。 */
#card-clear-layer{position:absolute;inset:0;z-index:31;overflow:hidden;pointer-events:none}
.card-clear-ghost{position:absolute;pointer-events:none}
.card-clear-ghost .card-art{position:absolute;inset:24% 12%;display:flex;align-items:center;justify-content:center;opacity:1;pointer-events:none}
.card-clear-ghost[data-source="hand"] .card-art{inset:28% 14% 30% 28%}
.card-clear-ghost .card-character{animation:var(--sprite-bye) .55s steps(5,end) both;animation-delay:var(--clear-delay,0s)}
.card-clear-ghost .card-charm{animation:spriteBye .55s steps(5,end) both;animation-delay:var(--clear-delay,0s)}
.card-clear-ghost .card-mouth{animation:spriteSmile .25s steps(3,end) both;animation-delay:var(--clear-delay,0s)}
.card-clear-particles{position:absolute;inset:0;pointer-events:none}
.card-clear-particles i{position:absolute;left:50%;top:50%;width:5px;height:5px;background:var(--arcade-gold);animation:cardParticle .58s steps(5,end) both;animation-delay:var(--clear-delay,0s)}
.card-clear-particles i:nth-child(1){--particle-x:-24px;--particle-y:-28px}
.card-clear-particles i:nth-child(2){--particle-x:25px;--particle-y:-19px;background:var(--arcade-cyan)}
.card-clear-particles i:nth-child(3){--particle-x:-18px;--particle-y:20px;background:var(--arcade-pink)}
.card-clear-particles i:nth-child(4){--particle-x:20px;--particle-y:24px;background:var(--arcade-gold)}
.card.elimming{animation:pixelCardFade .55s steps(5,end) forwards;transform:none!important;filter:none}
.card.elimming .card-art{opacity:0}
@keyframes spriteBye{0%{opacity:1;transform:scale(1)}25%{opacity:1;transform:translateY(-2px) rotate(-8deg) scale(1.08)}60%{opacity:1;transform:translateY(-5px) rotate(8deg) scale(.9)}100%{opacity:0;transform:translateY(-10px) scale(.12)}}
@keyframes spriteLaunchBye{0%{opacity:1;transform:none}30%{opacity:1;transform:translateY(-4px) rotate(-3deg)}100%{opacity:0;transform:translateY(-28px) scale(.35)}}
@keyframes spriteOrbitBye{0%{opacity:1;transform:none}35%{opacity:1;transform:rotate(-12deg) scale(1.08)}100%{opacity:0;transform:rotate(50deg) scale(.12)}}
@keyframes spriteSmile{0%{transform:scale(1)}70%,100%{transform:scale(1.12,1.3)}}
@keyframes cardParticle{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}20%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(var(--particle-x),var(--particle-y)) scale(.2)}}
@keyframes pixelCardFade{0%,25%{opacity:1}100%{opacity:.08}}
@keyframes pixelFadeOnly{from{opacity:1}to{opacity:0}}
@media(max-width:960px){.card-clear-particles i{width:4px;height:4px}}
@media(prefers-reduced-motion:reduce){
  .card .card-character,.card .card-charm,.card .card-eyes,.card .card-mouth,.card.back::after{animation:none!important;transform:none!important}
  .card.back::after{transform:translate(-50%,-50%)!important}
  .card-clear-ghost .card-character,.card-clear-ghost .card-charm{animation:pixelFadeOnly .12s linear both!important;transform:none!important}
  .card-clear-ghost .card-mouth{animation:none!important;transform:none!important}
  .card-clear-particles{display:none!important}
  .card.elimming{animation:pixelFadeOnly .12s linear forwards!important}
}

/* 新手选择与教学独立于普通对局；教学槽始终占同样的空间。 */
#welcome-choice{margin-bottom:22px;padding:18px 0 22px;border-bottom:1px solid var(--arcade-line)}
#welcome-choice h2{font-size:20px;font-weight:750;line-height:1.4;color:var(--arcade-gold)}
#welcome-choice p{margin-top:6px;color:var(--arcade-muted);font-size:13px;line-height:1.7}
.welcome-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.welcome-options button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:68px;min-width:0;padding:10px;border:1px solid var(--arcade-line);border-radius:4px;background:var(--arcade-panel-raised);color:var(--arcade-white);font-size:15px;font-weight:650;line-height:1.5}
.welcome-options button.primary{border-color:var(--arcade-pink);background:var(--arcade-pink);color:var(--arcade-edge)}
.welcome-options button small{font-size:11px;font-weight:400;color:var(--arcade-muted)}
.welcome-options button.primary small{color:#492039}
.welcome-options button:hover{border-color:var(--arcade-cyan);background:#394367}
.welcome-options button.primary:hover{border-color:#ffacd3;background:#ffacd3}
#tutorial-entry{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--arcade-line);color:var(--arcade-muted);font-size:12px}
#tutorial-entry button{min-height:40px;padding:7px 10px;border:1px solid var(--arcade-line);border-radius:4px;background:var(--arcade-panel-raised);color:var(--arcade-cyan);font-size:12px;white-space:nowrap}
#tutorial-entry button:hover{border-color:var(--arcade-cyan)}
#tutorial-entry .tutorial-entry-actions{display:flex;flex-wrap:wrap;gap:8px}
#tutorial-bar{display:grid;grid-template-rows:32px 54px 40px;gap:2px;height:142px;max-width:700px;margin:0 auto;padding:5px 10px;border:1px solid var(--arcade-line);border-left:3px solid var(--arcade-gold);border-radius:4px;background:var(--arcade-panel);color:var(--arcade-white);overflow:visible}
.tutorial-heading{display:flex;align-items:center;gap:8px;min-width:0;height:32px}
#tutorial-progress{flex:none;padding:2px 5px;border:1px solid var(--arcade-line);border-radius:2px;background:var(--arcade-panel-raised);color:var(--arcade-cyan);font:700 11px/1.5 "Courier New","PingFang SC",monospace;white-space:nowrap}
#tutorial-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--arcade-gold);font-size:13px;font-weight:650;line-height:1.5}
#tutorial-exit{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:32px;min-width:40px;padding:4px 5px;border:0;background:transparent;color:var(--arcade-muted);font-size:12px;line-height:1.5}
#tutorial-exit:hover{color:var(--arcade-white)}
#tutorial-instruction{display:flex;align-items:center;min-width:0;height:54px;margin:0;color:var(--arcade-white);font-size:12px;line-height:18px;overflow:auto;overscroll-behavior:contain}
#tutorial-instruction-text{display:block;min-width:0}
.tutorial-buttons{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;height:40px}
.tutorial-buttons button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:6px 14px;border:1px solid var(--arcade-line);border-radius:4px;background:var(--arcade-panel-raised);color:var(--arcade-cyan);font-size:12px;line-height:18px;white-space:nowrap}
.tutorial-buttons #tutorial-next{border-color:var(--arcade-cyan);background:var(--arcade-cyan);color:var(--arcade-edge);font-weight:650;box-shadow:0 2px 0 #317781}
.tutorial-buttons button:hover:not(:disabled){border-color:var(--arcade-cyan);background:#394367;color:var(--arcade-white)}
.tutorial-buttons #tutorial-next:hover:not(:disabled){background:#a0f5f5;color:var(--arcade-edge)}
.tutorial-buttons button:disabled{border-style:dashed;border-color:var(--arcade-line);background:var(--arcade-panel-raised);color:var(--arcade-muted);box-shadow:none}
body.tutorial-active .hand-area #hint-bar,body.tutorial-active .hand-area.is-context-mode #hint-bar{display:flex;height:44px;min-height:44px;max-height:44px;padding:2px 0;align-items:center;align-content:center;gap:4px;font-size:11px;line-height:16px;overflow:auto;overscroll-behavior:contain}
body.tutorial-active .hand-area #hint{display:block;flex:1;min-width:0;width:auto;text-align:left;font-size:11px;line-height:16px}
body.tutorial-active .hand-area #q-axis-actions,body.tutorial-active .hand-area #combo-offer{flex:1;flex-wrap:nowrap}
body.tutorial-active .hand-area #combo-offer .combo-offer-title{display:none}
body.tutorial-active .hand-area #q-axis-actions button,body.tutorial-active .hand-area #combo-offer button,body.tutorial-active .hand-area #btn-cancel,body.tutorial-active .hand-area #btn-abort,body.tutorial-active .hand-area #btn-finish{min-height:40px;height:40px;padding:6px 8px;white-space:nowrap;font-size:11px;line-height:18px}
body.tutorial-active .tutorial-target{outline:3px dashed var(--arcade-gold);outline-offset:4px}
body.tutorial-active .card.tutorial-target{transform:none!important}
.tutorial-target-label{position:absolute;top:2px;right:2px;z-index:5;max-width:calc(100% - 4px);padding:1px 3px;border:1px solid var(--arcade-edge);border-radius:2px;background:var(--arcade-gold);color:var(--arcade-edge);font-size:10px;font-weight:700;line-height:14px;pointer-events:none;white-space:nowrap}
#tutorial-demo{position:static;transform:none;width:100%;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--arcade-white);font-size:12px;line-height:18px;overflow:visible}
#tutorial-demo h3{margin:0;color:var(--arcade-gold);font-size:12px;font-weight:650}
.tutorial-demo-options{display:flex;flex:1;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:8px;min-width:0;height:40px;margin:0}
.tutorial-demo-options button{min-height:40px;padding:7px 10px;border:1px solid var(--arcade-line);border-radius:4px;background:var(--arcade-panel-raised);color:var(--arcade-cyan);font-size:12px;line-height:18px}
.tutorial-demo-options button:hover,.tutorial-demo-options button[aria-pressed="true"]{border-color:var(--arcade-cyan)}
.tutorial-demo-result{min-height:0;margin:0;color:var(--arcade-white);font-size:12px;line-height:18px}
body.tutorial-active .arcade-reaction{display:none!important}
body.tutorial-active #arcade-phase{display:none}
body.tutorial-active #hint{display:none!important}
body.tutorial-active .side{display:none}
@media(min-width:961px){body.tutorial-active .layout{grid-template-columns:minmax(0,1fr);max-width:1080px;margin:auto}}
@media(max-width:960px){
  #welcome-choice{margin-bottom:18px;padding:10px 0 18px}
  .welcome-options{gap:10px;margin-top:12px}
  .welcome-options button{min-height:64px;font-size:14px}
  #tutorial-bar{max-width:none;padding:5px 8px}
  #tutorial-exit{min-height:40px}
  body.tutorial-active .hand-area{padding:4px 8px 6px}
  body.tutorial-active .hand-area #hand-owner{height:14px;line-height:14px}
  body.tutorial-active .hand-area #hand,body.tutorial-active .hand-area.is-empty #hand{height:72px;min-height:72px;max-height:72px;padding:2px 0}
  body.tutorial-active .hand-area #hand .card{height:64px}
  body.tutorial-active .table-players .pl-row{height:48px;padding:4px 6px}
  .tutorial-demo-options{gap:6px}
}
@media(max-width:380px){
  #welcome-choice h2{font-size:18px}
  .welcome-options{gap:8px}
  .welcome-options button{padding:8px;font-size:13px}
  #tutorial-bar{padding-left:6px;padding-right:6px}
  .tutorial-heading{gap:5px}
  #tutorial-progress{padding-left:3px;padding-right:3px;font-size:10px}
  #tutorial-title{font-size:12px}
  #tutorial-exit{font-size:11px}
  .tutorial-buttons{gap:6px}
  .tutorial-buttons button{padding-left:10px;padding-right:10px}
}
@media(orientation:landscape) and (max-height:560px) and (max-width:960px){
  body.tutorial-active .hand-area,body.tutorial-active .hand-area .action-strip{position:static}
  #tutorial-bar{position:absolute;right:8px;bottom:8px;z-index:26;width:204px;grid-template-columns:minmax(0,1fr);grid-template-rows:32px 72px 40px;gap:2px;height:160px;padding:5px 8px}
  .tutorial-heading{height:32px;gap:4px}
  #tutorial-progress{padding-left:3px;padding-right:3px;font-size:10px}
  #tutorial-title{font-size:12px}
  #tutorial-instruction{height:72px}
  .tutorial-buttons{height:40px;gap:4px}
  .tutorial-buttons button{min-height:40px;padding:5px 8px}
  body.tutorial-active .hand-area #hint-bar,body.tutorial-active .hand-area.is-context-mode #hint-bar{height:44px;min-height:44px;max-height:44px}
  body.tutorial-active .hand-area #hand,body.tutorial-active .hand-area.is-empty #hand{height:58px;min-height:58px;max-height:58px}
  body.tutorial-active .hand-area #hand .card{height:54px}
}
@media(prefers-reduced-motion:reduce){
  .tutorial-target,.tutorial-target-label,#tutorial-bar,.welcome-options button{animation:none!important;transition:none!important}
}