@charset "UTF-8";
:root{color-scheme:dark;--bg:#0c2924;--panel:#143e33;--gold:#e9c477;--ink:#f2f2e9;--muted:#abc2b7;--line:#ffffff16;--danger:#ffb8a8;font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(ellipse at 50% 0,#1d4b3b 0,transparent 65%),var(--bg);color:var(--ink)}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation}button:disabled{cursor:default;opacity:.4}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:4px}a{color:var(--gold)}button{border:1px solid var(--line);border-radius:9px;background:#ffffff09;color:var(--ink);padding:12px 20px;transition:background .15s,transform .15s}button:hover:enabled{background:#ffffff16}button.primary{background:var(--gold);border-color:var(--gold);color:#243326;font-weight:750}button.primary:hover:enabled{background:#f6d999}button.ghost{background:transparent}button.small{font-size:12px;padding:7px 12px}.danger{color:var(--danger)}input{background:#071f1b8c;color:var(--ink);border:1px solid #ffffff26;border-radius:9px;padding:13px 15px;min-width:0;width:100%}input::placeholder{color:#819e91}h1,h2,h3,p{margin:0}h1{font-size:52px;letter-spacing:6px;font-weight:700}h2{font-size:27px;font-weight:650}h3{font-size:18px}p{line-height:1.8}.muted{color:var(--muted)}.eyebrow{font-size:11px;letter-spacing:3px;color:var(--gold);text-transform:uppercase}.shell{max-width:1120px;margin:auto;padding:28px 32px 40px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:26px}.brand{display:flex;align-items:center;gap:11px;font-size:18px;font-weight:700;letter-spacing:2px}.brand .suit{font-size:31px;color:var(--gold)}.connection{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted)}.dot{width:6px;height:6px;border-radius:50%;background:#7ed1a5;box-shadow:0 0 10px #7ed1a540}.dot.off{background:#e2ac6d}.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.between{justify-content:space-between}.panel{background:#12382fcc;border:1px solid var(--line);border-radius:16px;padding:26px}.login{min-height:calc(100vh - 80px);display:grid;grid-template-columns:1.15fr 1fr;gap:60px;align-items:center;max-width:980px;margin:auto}.login-copy h1{margin:18px 0 15px}.login-copy .subtitle{color:var(--muted);font-size:15px;letter-spacing:3px}.login-form{max-width:340px}.login-form label{display:block;margin:28px 0 9px;color:var(--muted);font-size:13px}.login-form button{width:100%;margin-top:13px}.login-form .fine{font-size:11px;margin-top:14px}.motif{height:285px;position:relative;display:flex;align-items:center;justify-content:center}.motif .art-card{position:absolute;width:145px;height:205px;border-radius:14px;background:#f7f4e8;color:#283d34;box-shadow:0 15px 45px #0005;border:6px solid #fff;font-family:Georgia,serif;font-size:36px;padding:10px;transform:rotate(-18deg) translateX(-65px)}.motif .art-card:nth-child(2){transform:rotate(17deg) translateX(62px);color:#b23f43}.motif .art-card b{position:absolute;left:0;right:0;top:60px;text-align:center;font-size:80px;font-weight:400}.motif .art-card:last-child{transform:rotate(0);background:#e9c477;z-index:2}.lobby-hero{display:flex;justify-content:space-between;align-items:center;gap:24px;margin:36px 0}.lobby-hero h2{font-size:36px;letter-spacing:2px;margin:10px 0}.lobby-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:22px}.lobby-grid .panel{min-height:200px}.panel h3{margin-bottom:12px}.panel .muted{font-size:13px}.full{width:100%}.stack{display:grid;gap:12px}.join-form{display:flex;gap:10px;margin-top:22px}.join-form input{letter-spacing:5px}.room-list{margin-top:25px}.room-entry{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-top:1px solid var(--line);gap:12px}.room-entry p{font-size:12px;color:var(--muted)}.rule-note{margin-top:25px;color:var(--muted);font-size:12px;line-height:1.9}.room-heading{margin-bottom:24px}.room-code{font-size:31px;font-variant-numeric:tabular-nums;letter-spacing:5px;color:var(--gold)}.badge{display:inline-block;border:1px solid #e9c47740;color:var(--gold);padding:3px 7px;border-radius:5px;font-size:10px;letter-spacing:1px;vertical-align:middle}.seat-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0}.waiting-seat{display:flex;align-items:center;gap:17px;border:1px solid var(--line);border-radius:12px;background:#ffffff03;padding:22px}.waiting-seat .info{flex:1;min-width:0}.avatar{display:grid;place-items:center;width:45px;height:45px;border-radius:50%;background:#e9c47716;color:var(--gold);font-size:18px;border:1px solid #e9c47730;flex-shrink:0}.waiting-seat p{font-size:12px;color:var(--muted);margin-top:5px}.waiting-seat.empty{border-style:dashed;opacity:.65}.chat{margin-top:22px}.chat-form{display:flex;gap:9px;margin-top:12px}.logs{list-style:none;margin:0;padding:0;max-height:170px;overflow:auto;scrollbar-width:thin;font-size:12px;line-height:1.85}.logs li{color:var(--muted);padding:3px 0;overflow-wrap:anywhere}.logs li.action{color:#dfdfc9}.logs li.chat{color:#e9c477;margin:0}.logs time{font-variant-numeric:tabular-nums;color:#759b87;margin-right:8px}.table-shell{max-width:1300px}.table-shell .topbar{margin-bottom:16px;padding-bottom:14px}.scorebar{display:flex;justify-content:center;gap:20px;align-items:center;font-size:13px;margin-bottom:18px;flex-wrap:wrap}.scorebar b{color:var(--gold);font-size:20px;margin-left:7px}.arena{position:relative;min-height:310px;display:grid;grid-template-columns:145px 1fr 145px;grid-template-rows:90px 1fr;gap:10px;background:radial-gradient(ellipse,#26604675,#154a3a55 60%,#103c3055);border:1px solid #e9c47724;border-radius:100px;box-shadow:inset 0 0 50px #0002;padding:16px 22px}.opponent{display:flex;align-items:center;gap:10px;align-self:center;justify-self:center;max-width:100%;font-size:12px}.opponent .avatar{width:36px;height:36px;font-size:14px}.opponent .name{font-weight:650;max-width:145px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.opponent p{font-size:11px;color:var(--muted);margin-top:2px}.opponent.top{grid-column:2;grid-row:1}.opponent.left{grid-column:1;grid-row:2;flex-direction:column;text-align:center}.opponent.right{grid-column:3;grid-row:2;flex-direction:column;text-align:center}.opponent.current .avatar{border:2px solid var(--gold);box-shadow:0 0 15px #e9c47730}.opponent.finished .avatar{background:#e9c477;color:#193626}.table-center{grid-column:2;grid-row:2;align-self:center;text-align:center;min-width:0;padding:8px 0 26px}.table-center .caption{font-size:12px;color:var(--muted);margin-bottom:12px}.table-cards{display:flex;justify-content:center;gap:5px;flex-wrap:wrap}.table-label{color:var(--gold);font-size:12px;margin-top:12px}.empty-table{font-size:28px;color:#d7c68d3b;letter-spacing:6px}.turnbar{display:flex;align-items:center;justify-content:center;gap:13px;margin:15px 0;font-size:13px;min-height:24px}.countdown{font-variant-numeric:tabular-nums;color:var(--gold);min-width:35px}.countdown.urgent{color:#ffb8a8}.my-zone{margin:10px 0 20px}.my-info{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;margin-bottom:20px;color:var(--muted)}.my-info strong{font-size:14px;color:var(--ink)}.hand{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;min-height:100px;padding-top:12px}.card{position:relative;background:#f7f5e9;color:#253c31;border:1px solid #f6f4e9;border-radius:7px;width:61px;height:89px;flex:0 0 61px;box-shadow:0 4px 8px #0002;font-family:Georgia,"Times New Roman",serif;text-align:left;font-size:22px;font-weight:700;line-height:1;padding:7px;user-select:none}.card.red{color:#b03940}.card:hover:enabled{background:#fffbee;transform:translateY(-4px)}.card.selected{transform:translateY(-14px);outline:2px solid var(--gold);outline-offset:2px;background:#fff8dd}.card.selected:hover:enabled{transform:translateY(-14px)}.card .corner{display:block}.card .pip{display:block;font-size:18px;margin-top:3px}.card .middle{position:absolute;right:9px;bottom:12px;font-size:29px;opacity:.85}.table-cards .card{width:45px;height:65px;flex-basis:45px;font-size:18px;padding:5px;box-shadow:0 3px 5px #0002}.table-cards .card .middle{font-size:23px;right:6px;bottom:7px}.table-cards .card .pip{font-size:12px;margin-top:2px}.selection-hint{min-height:24px;color:var(--gold);text-align:center;font-size:13px;margin:12px 0}.actions{display:flex;justify-content:center;gap:12px;align-items:center}.actions button{min-width:132px}.table-bottom{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;margin-top:22px}.table-bottom .panel{padding:16px 20px}.table-bottom h3{font-size:13px;color:var(--muted)}.table-bottom .logs{max-height:150px}.result{margin-top:20px;text-align:center;border-color:#e9c47760}.result h2{color:var(--gold);margin:6px 0 12px}.result p{font-size:13px}.rank-list{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:20px 0}.rank-item{padding:10px 14px;background:#ffffff06;border:1px solid var(--line);border-radius:8px;font-size:12px}.rank-item b{color:var(--gold);margin-right:8px}.result button{margin-top:15px}details{font-size:12px;color:var(--muted);margin-top:20px}summary{cursor:pointer}.history{width:100%;border-collapse:collapse;margin-top:12px;text-align:center}.history td,.history th{padding:8px;border-bottom:1px solid var(--line)}#toast{position:fixed;z-index:100;left:50%;bottom:32px;transform:translateX(-50%);background:#fff1d5;color:#3e2d22;border:1px solid #e9c477;border-radius:10px;box-shadow:0 8px 25px #0004;padding:14px 24px;max-width:calc(100vw - 32px);width:max-content;font-size:14px}footer{margin-top:32px;text-align:center;color:#7e9d8e;font-size:11px;letter-spacing:2px}[hidden]{display:none!important}
.space-top{margin-top:22px}.brand,.badge{white-space:nowrap}.chat-form button{white-space:nowrap;flex-shrink:0}.header-tools{justify-content:flex-end}
@media(min-width:1000px){.table-shell{padding-top:18px}.arena{min-height:320px}.hand{gap:10px}}
@media(max-width:700px){.shell{padding:17px 16px 24px}.topbar{margin-bottom:19px;padding-bottom:16px}.brand{font-size:15px;letter-spacing:1px}.connection{font-size:10px;gap:6px}.login{grid-template-columns:1fr;gap:5px;min-height:auto;text-align:center}.login-copy{padding-top:25px}h1{font-size:42px}.login-form{margin:auto;width:100%;max-width:360px;text-align:left}.motif{height:190px;margin-top:15px;grid-row:2}.motif .art-card{width:105px;height:146px;font-size:26px;transform:rotate(-18deg) translateX(-50px)}.motif .art-card:nth-child(2){transform:rotate(17deg) translateX(50px)}.motif .art-card b{font-size:55px;top:45px}.login-form label{margin-top:13px}.lobby-hero{margin:24px 0}.lobby-hero h2{font-size:28px}.lobby-hero .muted{font-size:12px}.lobby-grid{grid-template-columns:1fr;gap:15px}.lobby-grid .panel{min-height:auto}.panel{padding:20px}.seat-grid{gap:10px}.waiting-seat{padding:14px 10px;gap:9px}.waiting-seat .avatar{width:31px;height:31px;font-size:13px}.waiting-seat .info{font-size:12px}.waiting-seat p{font-size:10px}.waiting-seat .small{padding:5px;font-size:10px}.room-code{font-size:26px}.table-shell .topbar{gap:7px}.table-shell .topbar button{padding:7px 9px;font-size:11px}.scorebar{gap:10px;font-size:11px;margin-bottom:10px}.scorebar b{font-size:17px}.arena{border-radius:32px;min-height:270px;grid-template-columns:65px 1fr 65px;grid-template-rows:72px 1fr;padding:10px 8px;gap:2px}.opponent{gap:5px;font-size:10px}.opponent .name{max-width:90px}.opponent.left .name,.opponent.right .name{max-width:64px}.opponent p{font-size:10px}.opponent .avatar{width:30px;height:30px;font-size:12px}.table-center{padding:6px 2px 18px}.table-cards{gap:3px}.table-cards .card{width:32px;flex-basis:32px;height:47px;font-size:14px;padding:3px;border-radius:4px}.table-cards .card .pip{font-size:10px}.table-cards .card .middle{font-size:17px;bottom:4px;right:3px}.table-label,.table-center .caption{font-size:10px}.empty-table{font-size:18px;letter-spacing:3px}.turnbar{font-size:12px;margin:12px 0}.my-info{font-size:10px;margin-bottom:15px}.my-info strong{font-size:12px}.hand{gap:7px;min-height:72px}.card{width:42px;flex-basis:42px;height:64px;font-size:17px;padding:4px;border-radius:5px}.card .pip{font-size:13px}.card .middle{font-size:23px;right:5px;bottom:7px}.card.selected{transform:translateY(-11px)}.card.selected:hover:enabled{transform:translateY(-11px)}.table-bottom{grid-template-columns:1fr;gap:12px;margin-top:16px}.table-bottom .logs{max-height:110px}.table-bottom .panel{padding:14px}.my-zone{margin-bottom:12px}.actions button{min-width:115px;padding:11px 16px}.result h2{font-size:24px}footer{margin-top:24px;font-size:10px;letter-spacing:1px}}
@media(max-width:700px){.connection-name{display:none}.header-tools{gap:6px}.topbar .brand{flex-shrink:0}.brand .suit{font-size:26px}.brand .badge{font-size:9px;padding:3px 5px;letter-spacing:0}.brand{gap:7px}.table-shell .topbar{flex-wrap:wrap}.header-tools .connection{gap:5px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.table-actor{display:inline-flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;margin:0 auto 12px;padding:7px 15px;border-radius:999px;background:#e9c4771f;border:1px solid #e9c47799;box-shadow:0 0 0 4px #e9c47712;color:#f3e7c4;font-size:13px;letter-spacing:1px}
.table-actor .actor-chip{background:var(--gold);color:#243326;font-weight:750;padding:3px 11px;border-radius:999px;font-size:14px;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:0}
.table-actor b{color:var(--gold)}
.turn-indicator{display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border-radius:999px;background:#ffffff0e;border:1px solid #e9c47766;color:var(--ink)}
.turn-indicator b{color:#fff3d4;letter-spacing:1px}
.turn-dot{width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px #e9c477;flex-shrink:0;animation:zsy-pulse 1.4s ease-in-out infinite}
.turn-note{color:var(--muted);font-size:11px}
.turnbar.my-turn .turn-indicator{background:var(--gold);border-color:var(--gold)}
.turnbar.my-turn .turn-indicator b{color:#243326;font-weight:750}
.turnbar.my-turn .turn-dot{background:#243326;box-shadow:none}
.opponent.current{background:#e9c47726;border:1px solid #e9c47799;border-radius:12px;padding:7px 10px;box-shadow:0 0 0 3px #e9c47712}
.opponent.current .name{color:var(--gold)}
.opponent.current .avatar{border:2px solid var(--gold);background:var(--gold);color:#243326;font-weight:750}
.turn-tag{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:5px;background:var(--gold);color:#243326;font-size:10px;font-weight:750;letter-spacing:0;vertical-align:middle}
.my-zone.my-turn{background:#e9c4770d;border:1px solid #e9c4774d;border-radius:16px;padding:12px 10px 4px}
.my-zone.my-turn .my-info strong{color:var(--gold)}
@keyframes zsy-pulse{50%{opacity:.35}}
@media(min-width:701px){.turnbar{font-size:15px;min-height:40px}.turn-indicator b{font-size:16px}}
@media(max-width:700px){.turnbar{font-size:13px;min-height:34px}.turn-indicator{padding:6px 12px;gap:7px}.turn-indicator b{font-size:13px}.turn-note{font-size:10px}.table-actor{font-size:11px;padding:5px 10px;gap:6px;margin-bottom:8px}.table-actor .actor-chip{font-size:12px;max-width:100px}.opponent.current{padding:3px 4px;border-radius:8px}.turn-tag{font-size:9px;margin-left:4px}}

/* ===== ZSY SKIN v3 : 手游风格牌桌 / 单花色 ===== */
:root{--bg:#5b1b12;--panel:#7c2b1ccc;--gold:#ffd36b;--ink:#fff7e9;--muted:#f2d3b7;--line:#ffdfae38;--danger:#ffd0c0}
body{background:radial-gradient(ellipse at 50% -12%,#d87342 0%,#a8472b 38%,transparent 72%),repeating-linear-gradient(94deg,#ffffff08 0 1px,transparent 1px 7px,#0000000a 7px 8px,transparent 8px 16px),linear-gradient(180deg,#9a3a25 0%,#742718 52%,#4a160e 100%);background-attachment:fixed;color:var(--ink)}
.panel{background:#3a120c66;border:1px solid #ffdfae38;border-radius:18px;box-shadow:inset 0 1px 0 #ffffff1c,0 10px 28px #0003}
.topbar{border-bottom-color:#ffdfae30}
.brand .suit{color:var(--gold)}
input{background:#2c0e08a8;border-color:#ffdfae45;color:var(--ink);border-radius:12px}
button{border-color:#ffdfae45;background:#ffffff12;color:var(--ink)}
button.primary{background:linear-gradient(180deg,#ffdf88,#efaa35);border-color:#ffe9ac;color:#4a2308;font-weight:800}
/* 顶部信息 / 操作按钮 / 手牌 / 提示 的顺序 */
.my-zone{display:flex;flex-direction:column;align-items:stretch}
.my-zone.my-turn{background:#ffd36b12;border:1px solid #ffd36b55}
.my-info{order:0}
.actions{order:1}
.hand{order:2}
.selection-hint{order:3}
.actions{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin:10px 0 4px}
.actions[hidden]{display:none!important}
.actions button,.actions button.primary{min-width:116px;padding:12px 26px;border-radius:999px;font-size:16px;font-weight:800;letter-spacing:1px;color:#5a2a0c;background:linear-gradient(180deg,#ffe496 0%,#f6bc4a 55%,#e39a28 100%);border:1px solid #fff0c2;box-shadow:0 4px 0 #a6631a,0 9px 18px #0005;text-shadow:0 1px 0 #fff7d4;transform:none;transition:transform .12s,filter .12s}
.actions button:hover:enabled{background:linear-gradient(180deg,#fff0b6,#f8c85f);transform:translateY(-2px)}
.actions button:disabled,.actions button.primary:disabled{opacity:1;background:linear-gradient(180deg,#dedbd5,#a8a49d);border-color:#eae6de;color:#64615c;box-shadow:0 3px 0 #77736d,0 6px 12px #0003;text-shadow:none;transform:none}
/* 手牌 / 桌面牌：白底大牌，仅左上角一组「点数 + 花色」 */
.hand{--card-w:76px;--card-gap:-8px;display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-end;gap:0;min-height:0;margin:0;padding:calc(var(--card-w)*0.26) 0 6px;overflow:visible}
.table-cards{--card-w:42px;--card-gap:-14px;gap:0;flex-wrap:wrap;justify-content:center;min-height:0;padding-top:0}
.card,.table-cards .card{position:relative;display:block;flex:0 0 var(--card-w);width:var(--card-w);height:calc(var(--card-w)*1.62);margin-left:var(--card-gap);padding:calc(var(--card-w)*0.10);background:linear-gradient(170deg,#fffefb 0%,#fbf7ee 62%,#eee7d9 100%);color:#1f2428;border:1px solid #ffffff;border-radius:calc(var(--card-w)*0.13);box-shadow:0 4px 10px #0006,inset 0 0 0 1px #cfc5b3;font-family:Georgia,"Times New Roman",serif;font-size:calc(var(--card-w)*0.34);font-weight:700;line-height:1;text-align:left;user-select:none;overflow:hidden}
.card:first-child,.table-cards .card:first-child{margin-left:0}
.card.red,.table-cards .card.red{color:#c0202b}
.card .corner,.table-cards .card .corner{display:block;height:calc(var(--card-w)*0.36);font-size:calc(var(--card-w)*0.34);line-height:1;font-weight:700;letter-spacing:-.05em;white-space:nowrap}
.card .pip,.table-cards .card .pip{display:block;margin-top:calc(var(--card-w)*0.09);height:calc(var(--card-w)*0.34);font-size:calc(var(--card-w)*0.32);line-height:1;font-weight:400;font-family:"Segoe UI Symbol","Noto Sans Symbols 2","Apple Symbols","Arial Unicode MS",Arial,sans-serif;font-variant-emoji:text;white-space:nowrap}
.card .middle,.table-cards .card .middle{display:none!important}
.card:hover:enabled,.table-cards .card:hover:enabled{background:linear-gradient(170deg,#fffdf4,#f7f0df);transform:translateY(calc(var(--card-w)*-0.08))}
.card.selected,.card.selected:hover:enabled{transform:translateY(calc(var(--card-w)*-0.20));outline:3px solid var(--gold);outline-offset:1px;background:linear-gradient(170deg,#fffbe8,#f6e6bd);box-shadow:0 8px 18px #0007;z-index:3}
/* 出牌者与当前回合提示，改为暖色高亮 */
.table-actor{background:#ffd36b24;border-color:#ffd36bcc;color:#fff4d6;box-shadow:0 0 0 4px #ffd36b18}
.opponent.current{background:#ffd36b1a;border:1px solid #ffd36b88;box-shadow:0 0 18px #ffd36b30}
.countdown{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 5px;border-radius:50%;background:#fff3d2;color:#8a3b0e;border:2px solid var(--gold);font-size:12px;font-weight:800;box-shadow:0 0 0 4px #ffd36b2e;white-space:nowrap}
/* 房间动态 / 牌桌聊天：不在页面显示 */
.table-bottom{display:none!important}
@media(min-width:701px) and (max-width:1000px){.hand{--card-w:56px;--card-gap:-16px}.table-cards{--card-w:36px;--card-gap:-12px}}
@media(max-width:700px){.hand{--card-w:clamp(34px,11.5vw,48px);--card-gap:calc(var(--card-w) * -0.48)}.table-cards{--card-w:30px;--card-gap:-11px}.actions{gap:10px;margin:8px 0 2px}.actions button,.actions button.primary{min-width:96px;padding:10px 18px;font-size:14px}.my-zone.my-turn{padding:10px 8px 2px}.countdown{min-width:34px;height:34px;font-size:11px}}

/* ===== ZSY SKIN v4 : 一屏牌桌 + 单机大厅 ===== */
.zsy-offline .lobby-hero::after{content:"单机模式 · 创建房间 / 加入房间 / 房间列表在联网版启用；单机点「匹配对局」可直接配 3 个机器人开局";display:block;margin-top:10px;color:var(--gold);font-size:12px;letter-spacing:0;line-height:1.6}
.table-shell{height:100dvh;min-height:0;display:flex;flex-direction:column;padding:8px 16px 8px;overflow:hidden}
.table-shell>.topbar{flex:0 0 auto;margin:0 0 6px;padding:0 0 8px}
.table-shell>main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:6px;overflow-y:auto;overflow-x:hidden}
.table-shell .scorebar{flex:0 0 auto;margin:0}
.table-shell .arena{flex:1 1 auto;min-height:0;margin:0;padding:8px 18px;grid-template-rows:60px 1fr}
.table-shell .turnbar{flex:0 0 auto;margin:0}
.table-shell .my-zone{flex:0 0 auto;margin:0}
.table-shell .my-info{margin-bottom:2px}
.table-shell .actions{margin:4px 0 2px}
.table-shell .selection-hint{min-height:0;margin:2px 0;font-size:11px}
.table-shell .hand{padding:calc(var(--card-w)*0.16) 0 2px}
.table-shell .table-center{padding:2px 0 6px}
.table-shell .opponent .avatar{width:30px;height:30px;font-size:12px}
.table-shell .result{flex:0 1 auto;overflow:auto;margin:0}
@media(max-height:820px){
 .table-shell .hand{--card-w:clamp(34px,8.2vh,60px);--card-gap:calc(var(--card-w)*-0.20)}
 .table-shell .table-cards{--card-w:32px;--card-gap:-10px}
 .table-shell .actions button,.table-shell .actions button.primary{padding:8px 20px;font-size:14px}
 .table-shell .arena{grid-template-rows:48px 1fr;padding:6px 16px}
 .table-shell .table-actor{margin-bottom:4px;padding:4px 10px}
}
@media(max-width:700px){
 .table-shell{padding:6px 10px 6px}
 .table-shell .arena{grid-template-rows:52px 1fr;padding:6px 8px}
 .table-shell .hand{padding:calc(var(--card-w)*0.12) 0 2px}
}

/* ===== ZSY SKIN v5 : 对局页重设计（仍保持一屏） ===== */
.table-shell>.topbar{margin:0 0 10px;padding:0 0 12px;border-bottom:1px solid #ffdfae33}
.table-shell>main{gap:9px}
.table-shell .scorebar{gap:12px;font-size:12px;margin:0 0 2px;padding:8px 18px;border-radius:999px;background:#3a120c66;border:1px solid #ffdfae2e;width:fit-content;max-width:100%;align-self:center}
.table-shell .scorebar b{font-size:18px;margin-left:5px}
.table-shell .arena{border-radius:52px;background:radial-gradient(ellipse at 50% 42%,#7a432a55,#3d180d88 68%,#2a0f0899);border:1px solid #ffdfae33;box-shadow:inset 0 0 70px #0004,0 12px 28px #0003;padding:10px 22px;gap:8px}
.table-shell .opponent{background:#2a0f0866;border:1px solid #ffdfae26;border-radius:15px;padding:8px 11px;gap:9px;box-shadow:0 4px 14px #0002}
.table-shell .opponent.current{background:#ffd36b20;border-color:#ffd36baa;box-shadow:0 0 20px #ffd36b26}
.table-shell .opponent .avatar{width:34px;height:34px;font-size:13px;border:1px solid #ffdfaa55}
.table-shell .opponent .name{font-size:12px}
.table-shell .opponent p{font-size:10px;line-height:1.5;margin-top:1px}
.table-shell .table-center{padding:0 0 4px}
.table-shell .table-actor{font-size:12px;padding:6px 15px;margin-bottom:10px}
.table-shell .table-cards{--card-w:38px;--card-gap:-10px}
.table-shell .empty-table{font-size:23px}
.table-shell .turnbar{background:#3a120c66;border:1px solid #ffdfae2e;border-radius:999px;padding:6px 18px;min-height:36px;margin:2px 0 0;align-self:center;gap:11px}
.table-shell .my-zone{background:#ffffff09;border:1px solid #ffdfae2e;border-radius:22px;padding:11px 16px 9px;box-shadow:0 10px 26px #0002}
.table-shell .my-zone.my-turn{background:#ffd36b14;border-color:#ffd36b70}
.table-shell .my-info{margin-bottom:7px;font-size:11px}
.table-shell .actions{margin:0 0 9px;gap:16px}
.table-shell .actions[hidden]{display:flex!important}
.table-shell .actions button,.table-shell .actions button.primary{min-width:136px;padding:11px 28px;font-size:15px}
.table-shell .hand{padding:calc(var(--card-w)*0.10) 0 4px}
.table-shell .selection-hint{margin:3px 0 0;font-size:11px}
@media(min-width:701px) and (max-height:820px){
 .table-shell .hand{--card-w:clamp(56px,min(7.6vw,10.5vh),84px);--card-gap:-8px}
 .table-shell .table-cards{--card-w:34px;--card-gap:-10px}
 .table-shell .arena{grid-template-rows:56px 1fr;padding:8px 22px}
 .table-shell .actions{margin-bottom:7px;gap:14px}
 .table-shell .actions button,.table-shell .actions button.primary{min-width:122px;padding:9px 24px;font-size:14px}
 .table-shell .my-zone{padding:9px 14px 7px}
}
@media(max-width:700px){
 .table-shell>.topbar{margin-bottom:8px;padding-bottom:9px}
 .table-shell>main{gap:7px}
 .table-shell .scorebar{padding:6px 12px;gap:8px}
 .table-shell .my-zone{padding:9px 10px 7px;border-radius:18px}
 .table-shell .opponent{padding:5px 7px;gap:6px;border-radius:11px}
 .table-shell .opponent .avatar{width:28px;height:28px;font-size:11px}
 .table-shell .actions{gap:9px;margin-bottom:6px}
 .table-shell .actions button,.table-shell .actions button.primary{min-width:92px;padding:9px 15px;font-size:13px}
}

/* ===== ZSY SKIN v5 polish : 浮层不挡手牌 / 禁用按钮暖色化 ===== */
#toast{top:56px;pointer-events:none;bottom:auto;left:auto;right:14px;transform:none;max-width:min(420px,calc(100vw - 28px));padding:10px 16px;font-size:13px;line-height:1.5}
.table-shell .actions button:disabled,.table-shell .actions button.primary:disabled{opacity:.78;background:linear-gradient(180deg,#c9a961,#8d6d33);border-color:#e3c984;color:#3b260c;box-shadow:0 3px 0 #6a4b1c,0 6px 12px #0003;text-shadow:none;transform:none}
@media(max-width:700px){#toast{top:52px;right:8px;padding:9px 13px;font-size:12px}}

/* ===== ZSY SKIN v6 : 结算态独立布局 ===== */
.table-shell.zsy-result>main{justify-content:center;align-items:center;gap:0}
.table-shell.zsy-result .scorebar,
.table-shell.zsy-result .arena,
.table-shell.zsy-result .turnbar,
.table-shell.zsy-result .my-zone{display:none!important}
.table-shell.zsy-result .result{flex:0 0 auto;width:min(660px,100%);margin:0 auto;padding:28px 32px 26px;border-radius:26px;background:linear-gradient(180deg,#5b2115f5,#311109f5);border:1px solid #ffd36b66;box-shadow:0 18px 50px #0006,inset 0 1px 0 #ffffff1a;text-align:center}
.table-shell.zsy-result .result .eyebrow{font-size:12px;letter-spacing:3px;color:var(--gold)}
.table-shell.zsy-result .result h2{font-size:34px;letter-spacing:2px;color:#ffe6a8;margin:12px 0 14px}
.table-shell.zsy-result .result .cumulative{display:inline-block;padding:7px 16px;border-radius:999px;background:#ffd36b1c;border:1px solid #ffd36b44;font-size:13px;color:#f4dcae;margin-bottom:20px}
.table-shell.zsy-result .result .rank-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 22px}
.table-shell.zsy-result .result .rank-item{display:flex;align-items:center;justify-content:center;gap:9px;padding:12px 10px;border-radius:14px;background:#ffffff0d;border:1px solid #ffdfae26;font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.table-shell.zsy-result .result .rank-item:first-child{background:#ffd36b20;border-color:#ffd36b99;color:#ffe9b5}
.table-shell.zsy-result .result .rank-item b{font-size:16px;color:var(--gold)}
.table-shell.zsy-result .result button{min-width:230px;padding:13px 28px;border-radius:999px;font-size:16px;font-weight:800;color:#4a2308;background:linear-gradient(180deg,#ffe496,#f6bc4a 55%,#e39a28);border:1px solid #fff0c2;box-shadow:0 4px 0 #a6631a,0 9px 18px #0005;margin-top:0}
.table-shell.zsy-result .result .muted{font-size:13px}
.table-shell.zsy-result .result details{margin-top:18px;font-size:12px;color:var(--muted);text-align:left}
.table-shell.zsy-result .result summary{cursor:pointer;color:var(--gold)}
@media(max-height:760px){.table-shell.zsy-result .result{padding:18px 26px 18px}.table-shell.zsy-result .result h2{font-size:28px;margin:8px 0 10px}.table-shell.zsy-result .result .cumulative{margin-bottom:14px}.table-shell.zsy-result .result .rank-list{margin-bottom:16px;gap:8px}.table-shell.zsy-result .result .rank-item{padding:9px 8px}}
@media(max-width:700px){.table-shell.zsy-result .result{width:100%;padding:20px 16px 18px;border-radius:20px}.table-shell.zsy-result .result h2{font-size:25px}.table-shell.zsy-result .result .rank-list{grid-template-columns:1fr;gap:8px}.table-shell.zsy-result .result button{min-width:0;width:100%}}

/* 特殊双 4 压制提示 */
.table-actor .actor-note{display:block;margin-top:2px;font-size:11px;font-style:normal;letter-spacing:.4px;color:#ffe6b0}
@media(max-width:520px){.table-actor .actor-note{font-size:10px}}

/* ===== ZSY SKIN v7 : 参考斗地主手游的横向牌桌布局 ===== */
/* 只作用于对局态，结算态仍由 v6 独立布局接管 */
body{background:radial-gradient(ellipse 60% 34% at 50% 2%,#ffe9cd66 0%,transparent 72%),linear-gradient(180deg,#3d2f78 0%,#634a99 16%,#a77cbc 34%,#dfa6b6 47%,#6b519c 60%,#2a2359 78%,#161334 100%);background-attachment:fixed}
body::before{content:"";position:fixed;left:0;right:0;top:0;height:72vh;pointer-events:none;z-index:0;opacity:.42;background:linear-gradient(180deg,#5b4796,#241d52);clip-path:polygon(0 100%,0 68%,5% 68%,5% 55%,9% 55%,9% 64%,14% 64%,14% 46%,19% 46%,19% 60%,23% 60%,23% 40%,28% 40%,28% 58%,33% 58%,33% 50%,37% 50%,37% 34%,41% 34%,41% 52%,46% 52%,46% 44%,50% 44%,50% 30%,54% 30%,54% 48%,59% 48%,59% 40%,63% 40%,63% 56%,68% 56%,68% 46%,72% 46%,72% 62%,77% 62%,77% 50%,82% 50%,82% 66%,87% 66%,87% 56%,92% 56%,92% 70%,100% 70%,100% 100%)}
.table-shell{position:relative;z-index:1}
.table-shell>.topbar{background:linear-gradient(180deg,#1b174a66,transparent);border-bottom:1px solid #ffffff24}
.table-shell:not(.zsy-result) .scorebar{background:linear-gradient(180deg,#ffffff2e,#ffffff10);border:1px solid #ffffff55;color:#fff8ea;box-shadow:0 5px 16px #0004;padding:6px 18px;font-size:12px}
.table-shell:not(.zsy-result) .scorebar b{color:#ffe08a}
.table-shell:not(.zsy-result) .arena{background:radial-gradient(ellipse 76% 88% at 50% 46%,#54419be0 0%,#382a78e8 54%,#1e1854f2 100%);border:2px solid #c3b0ff55;border-radius:50%/44%;box-shadow:inset 0 0 90px #0b083a99,0 16px 40px #0005,inset 0 2px 0 #ffffff22;padding:7px 20px;gap:4px}
.table-shell:not(.zsy-result) .opponent{background:linear-gradient(180deg,#33559ae6,#1b2f60e6);border:1px solid #a9c9ff77;border-radius:14px;padding:6px 10px;gap:8px;box-shadow:0 6px 18px #0005,inset 0 1px 0 #ffffff26}
.table-shell:not(.zsy-result) .opponent.current{background:linear-gradient(180deg,#8a6a1ee6,#4c3510e6);border-color:#ffd879;box-shadow:0 0 22px #ffd87955}
.table-shell:not(.zsy-result) .opponent .avatar{width:38px;height:38px;border-radius:50%;font-size:15px;font-weight:800;color:#5b3312;background:radial-gradient(circle at 34% 26%,#fff1d6,#eec294 58%,#b07c4c);border:2px solid #ffe4b8;box-shadow:0 3px 10px #0005}
.table-shell:not(.zsy-result) .opponent .name{font-size:12px;color:#fff7e6}
.table-shell:not(.zsy-result) .opponent p{font-size:10px;color:#cfe0ff}
.table-shell:not(.zsy-result) .opponent .turn-tag{background:#ffd879;color:#4a2c06}
.table-shell:not(.zsy-result) .table-center{padding:0}
.table-shell:not(.zsy-result) .table-actor{background:#ffd36b26;border:1px solid #ffd36bcc;color:#fff4d6;box-shadow:0 0 0 4px #ffd36b1c;font-size:12px;padding:5px 14px;margin-bottom:6px}
.table-shell:not(.zsy-result) .empty-table{color:#e6dcff66;font-size:26px;letter-spacing:8px}
.table-shell:not(.zsy-result) .caption{color:#e7dcffcc}
.table-shell:not(.zsy-result) .table-cards{--card-w:38px;--card-gap:-10px}
.table-shell:not(.zsy-result) .turnbar{background:#1b174a99;border:1px solid #ffffff33;border-radius:999px;padding:4px 16px;min-height:32px;margin:0;gap:9px;color:#fff5e2}
.table-shell:not(.zsy-result) .turnbar.my-turn{background:#ffd36b24;border-color:#ffd36b99}
/* 银白胶囊三按钮 + 中间橙色圆形闹钟 */
.table-shell:not(.zsy-result) .actions{display:flex;justify-content:center;align-items:center;gap:clamp(10px,1.8vw,24px);margin:1px 0 5px;flex-wrap:nowrap}
.table-shell:not(.zsy-result) .actions button,.table-shell:not(.zsy-result) .actions button.primary{min-width:clamp(104px,12vw,164px);padding:11px 26px;border-radius:999px;font-size:16px;font-weight:800;letter-spacing:2px;color:#33405c;background:linear-gradient(180deg,#ffffff 0%,#f0f2f7 40%,#cdd3df 76%,#adb5c4 100%);border:2px solid #ffffff;box-shadow:0 5px 0 #7c8496,0 10px 20px #0005,inset 0 2px 0 #ffffff;text-shadow:0 1px 0 #ffffff;transform:none}
.table-shell:not(.zsy-result) .actions button:hover:enabled{background:linear-gradient(180deg,#ffffff,#f6f8fc 45%,#dbe0ea);transform:translateY(-2px)}
.table-shell:not(.zsy-result) .actions button:disabled,.table-shell:not(.zsy-result) .actions button.primary:disabled{opacity:.92;background:linear-gradient(180deg,#e8eaf0,#b7bdc9);border-color:#e2e6ee;color:#79818f;box-shadow:0 3px 0 #8b929f,0 6px 12px #0003;text-shadow:none;transform:none}
.table-shell:not(.zsy-result) .actions .countdown{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:clamp(44px,4.6vw,58px);height:clamp(44px,4.6vw,58px);min-width:0;padding:0;border-radius:50%;background:radial-gradient(circle at 34% 26%,#ffdb84,#f8a426 56%,#c96a08);border:3px solid #fff0c0;color:#5a2a05;font-size:clamp(17px,1.9vw,23px);font-weight:900;box-shadow:0 0 0 5px #f8a42633,0 6px 16px #0006,inset 0 2px 4px #ffffff88;text-shadow:0 1px 0 #ffe6a8;white-space:nowrap}
.table-shell:not(.zsy-result) .actions .countdown.urgent{background:radial-gradient(circle at 34% 26%,#ffb1a0,#ef4b32 58%,#a01b10);color:#fff;border-color:#ffd9cd;box-shadow:0 0 0 5px #ef4b3244,0 6px 16px #0006}
/* 手牌直接铺在桌沿，去掉独立面板，点数与花色放大 */
.table-shell:not(.zsy-result) .my-zone{background:none;border:0;border-radius:0;box-shadow:none;padding:1px 0 0}
.table-shell:not(.zsy-result) .my-zone.my-turn{background:none;border:0}
.table-shell:not(.zsy-result) .my-info{font-size:10px;margin:0 0 2px;color:#e6dcffb8}
.table-shell:not(.zsy-result) .hand{--card-w:clamp(56px,min(7.8vw,10.8vh),86px);--card-gap:-4px;padding:calc(var(--card-w)*0.10) 0 2px}
.table-shell:not(.zsy-result) .hand .card{border-radius:calc(var(--card-w)*0.14);box-shadow:0 5px 14px #0007,inset 0 0 0 1px #cfc5b3}
.table-shell:not(.zsy-result) .hand .corner{font-size:calc(var(--card-w)*0.44);height:calc(var(--card-w)*0.42)}
.table-shell:not(.zsy-result) .hand .pip{font-size:calc(var(--card-w)*0.40);height:calc(var(--card-w)*0.38);margin-top:calc(var(--card-w)*0.06)}
.table-shell:not(.zsy-result) .hand .card.selected{outline:3px solid #ffd879;background:linear-gradient(170deg,#fffbe8,#f6e6bd)}
.table-shell:not(.zsy-result) .selection-hint{margin:2px 0 0;font-size:11px;color:#ffe6b0}
/* 结算卡片与紫蓝夜景统一 */
.table-shell.zsy-result .result{background:linear-gradient(180deg,#3b2f76f5,#1b1647f5);border-color:#c9b6ff66;box-shadow:0 18px 50px #0007,inset 0 1px 0 #ffffff1a}
@media(min-width:701px) and (max-height:820px){
 .table-shell:not(.zsy-result) .arena{padding:6px 18px}
 .table-shell:not(.zsy-result) .actions button,.table-shell:not(.zsy-result) .actions button.primary{min-width:clamp(100px,11vw,146px);padding:9px 22px;font-size:15px}
 .table-shell:not(.zsy-result) .hand{--card-w:clamp(56px,min(7.6vw,10.4vh),84px);--card-gap:-5px}
 .table-shell:not(.zsy-result) .opponent .avatar{width:32px;height:32px;font-size:13px}
}
@media(max-width:700px){
 .table-shell:not(.zsy-result) .arena{padding:5px 9px;border-radius:46%/40%}
 .table-shell:not(.zsy-result) .opponent{padding:4px 6px;gap:5px;border-radius:11px}
 .table-shell:not(.zsy-result) .opponent .avatar{width:27px;height:27px;font-size:11px}
 .table-shell:not(.zsy-result) .opponent .name{font-size:10px}
 .table-shell:not(.zsy-result) .actions{gap:7px;margin:1px 0 4px}
 .table-shell:not(.zsy-result) .actions button,.table-shell:not(.zsy-result) .actions button.primary{min-width:0;flex:1 1 0;padding:9px 6px;font-size:13px;letter-spacing:1px}
 .table-shell:not(.zsy-result) .actions .countdown{width:38px;height:38px;font-size:15px;border-width:2px}
 .table-shell:not(.zsy-result) .hand{--card-w:clamp(34px,11.4vw,48px);--card-gap:calc(var(--card-w) * -0.48)}
 .table-shell:not(.zsy-result) .my-info{font-size:9px}
}

/* ===== ZSY SKIN v8 : 去掉大厅横切线 + 非自己回合不显示操作区 ===== */
/* 城市剪影原本 z-index:0 盖在静态定位的大厅内容之上，其 72vh 底边形成一条横贯全屏的硬直线，
   方块还会压住标题与「创建房间」按钮。现在让 body 建立层叠上下文，剪影退到内容之下，
   并让自身背景向下渐隐到透明，底边不再可见。 */
body{isolation:isolate}
body::before{z-index:-1;background:linear-gradient(180deg,#5b4796 0%,#3a2c70 48%,rgba(36,29,82,0) 100%)}
/* 剪影不再覆盖后，大厅面板 / 输入框改用紫蓝玻璃色，避免露出旧暖棕底 */
.shell .panel{background:linear-gradient(180deg,#3b2f76b8,#241a52b8);border-color:#ffffff30;box-shadow:inset 0 1px 0 #ffffff18,0 10px 28px #0003}
.shell input{background:#1b1442a8;border-color:#ffffff33;color:#fff7e9}
.shell input::placeholder{color:#c9bdf0}
.shell .room-entry{border-top-color:#ffffff22}
/* 单机说明原来作为第三个 flex item 被推到标题右侧，改为独占下一行 */
.lobby-hero{flex-wrap:wrap}
.zsy-offline .lobby-hero::after{flex:0 0 100%;order:3;margin-top:6px;color:#ffe6b0}
/* 非自己回合：回合条与「不要 / 提示 / 出牌 + 倒计时」整块不显示。
   谁在出牌仍由桌面中央的出牌者徽章、对手区金色高亮与「出牌中」标签指示。 */
.table-shell:not(.zsy-result) .turnbar.offturn,
.table-shell:not(.zsy-result) .actions.offturn{display:none!important}

/* ===== ZSY SKIN v9 : 固定场景几何 + 连续过渡 + 5 秒紧急提醒 ===== */
/* 1) 隐藏只淡出不撤占位：牌桌椭圆、对手位置、手牌高度在两种状态下完全一致，不再重排跳变 */
.table-shell:not(.zsy-result) .turnbar,
.table-shell:not(.zsy-result) .actions{
  visibility:visible;opacity:1;transform:none;
  transition:opacity .26s ease,transform .26s ease,visibility 0s;
}
.table-shell:not(.zsy-result) .turnbar{width:min(320px,88vw)}
.table-shell:not(.zsy-result) .turnbar.offturn,
.table-shell:not(.zsy-result) .actions.offturn{
  display:flex!important;visibility:hidden;opacity:0;transform:none;pointer-events:none;
  transition:opacity .26s ease,visibility 0s linear .26s;
}
/* 2) 选牌与出牌后手牌收拢的平滑过渡 */
.table-shell:not(.zsy-result) .hand .card{transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s ease,background .18s ease,outline-color .18s ease}
/* 3) 桌面牌从出牌者方向飞入，徽章淡入 */
@keyframes zsy-deal-in{from{opacity:0;transform:translate(var(--deal-x,0px),var(--deal-y,70px)) scale(.78) rotate(-5deg)}to{opacity:1;transform:none}}
@keyframes zsy-badge-in{from{opacity:0;transform:translateY(-10px) scale(.94)}to{opacity:1;transform:none}}
.table-center.deal-in .table-cards .card{animation:zsy-deal-in .34s cubic-bezier(.18,.84,.3,1) both;animation-delay:calc(var(--i,0)*38ms)}
.table-center.deal-in .table-actor{animation:zsy-badge-in .3s ease-out both}
/* 4) 回合易主时对手卡光晕入场 */
@keyframes zsy-turn-glow{from{box-shadow:0 0 0 #ffd87900;filter:brightness(1)}50%{box-shadow:0 0 26px #ffd87988;filter:brightness(1.12)}to{box-shadow:0 0 22px #ffd87955;filter:brightness(1)}}
.arena.turn-changed .opponent.current{animation:zsy-turn-glow .5s ease-out}
/* 5) 倒计时剩余 5 秒：红钟放大脉冲 + 扩散光环 + 回合条红光，重点提醒 */
.table-shell:not(.zsy-result) .actions .countdown{position:relative}
.table-shell:not(.zsy-result) .actions .countdown.urgent{
  background:radial-gradient(circle at 34% 26%,#ffb1a0,#ef4b32 58%,#a01b10);
  color:#fff;border-color:#ffd9cd;font-size:clamp(20px,2.2vw,27px);
  animation:zsy-urgent .58s ease-in-out infinite alternate;
}
@keyframes zsy-urgent{
  from{transform:scale(1);box-shadow:0 0 0 5px #ef4b3244,0 0 14px #ef4b3266}
  to{transform:scale(1.13);box-shadow:0 0 0 10px #ef4b3255,0 0 28px #ef4b32dd}
}
@keyframes zsy-urgent-ring{from{transform:scale(.86);opacity:.8}to{transform:scale(1.75);opacity:0}}
.table-shell:not(.zsy-result) .actions .countdown.urgent::before{
  content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid #ff7a55;
  animation:zsy-urgent-ring 1s ease-out infinite;pointer-events:none;
}
.table-shell:not(.zsy-result) .turnbar.urgent{
  border-color:#ff7a55;background:#ef4b3226;color:#ffe0d6;
  box-shadow:0 0 20px #ef4b3255;
}
.table-shell:not(.zsy-result) .turnbar.urgent .turn-dot{background:#ff6b4a;box-shadow:0 0 14px #ff6b4a}
@media(prefers-reduced-motion:reduce){
  .table-shell .actions .countdown.urgent,.table-shell .actions .countdown.urgent::before,
  .table-center .table-cards .card,.arena.turn-changed .opponent.current{animation:none!important}
}
/* 6) 提示行固定高度：两种状态下手牌位置完全一致，不再差一截 */
.table-shell:not(.zsy-result) .selection-hint{height:20px;min-height:20px;line-height:20px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* ===== ZSY SKIN v10 : 放大椭圆桌面 + 出场动画仅首手 ===== */
/* 用溢出的伪元素画更大的椭圆，arena 容器几何不变：
   一屏布局与两种状态的坐标一致性完全保留，只是桌面向上下左右延伸得更满。 */
.table-shell:not(.zsy-result) .arena{
  position:relative;isolation:isolate;
  background:none;border-color:transparent;box-shadow:none;
}
.table-shell:not(.zsy-result) .arena::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  inset:-10px -22px -52px;
  border-radius:50%/50%;
  background:radial-gradient(ellipse 76% 88% at 50% 44%,#54419be0 0%,#382a78e8 54%,#1e1854f2 100%);
  border:2px solid #c3b0ff55;
  box-shadow:inset 0 0 90px #0b083a99,0 16px 40px #0005,inset 0 2px 0 #ffffff22;
}
.table-shell:not(.zsy-result) .arena>*{position:relative;z-index:1}
@media(max-width:700px){
  .table-shell:not(.zsy-result) .arena::before{inset:-4px -10px -24px;border-radius:50%/48%}
}

/* ===== ZSY SKIN v11 : 放大椭圆不再压住出牌提示 ===== */
/* 根因：v10 的 .arena 是 position:relative + isolation:isolate 的定位层，
   绘制顺序在 static 的 .turnbar 之上，溢出的半透明桌面把「轮到你出牌」盖暗。 */
.table-shell:not(.zsy-result) .turnbar,
.table-shell:not(.zsy-result) .my-zone{position:relative;z-index:2}
/* 底边渐隐：金色弧线不再横切操作区；同时把下溢幅度从 52px 收到 42px */
.table-shell:not(.zsy-result) .arena::before{
  inset:-10px -22px -42px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 66%,rgba(0,0,0,.45) 86%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 66%,rgba(0,0,0,.45) 86%,transparent 100%);
}
@media(max-width:700px){
  .table-shell:not(.zsy-result) .arena::before{inset:-4px -10px -20px}
}

/* ===== ZSY SKIN v17: 顶栏设置菜单（音效 / 音乐 / 邀请 / 离开 / 重连） ===== */
.settings-wrap{position:relative;z-index:60;flex:0 0 auto}
.settings-toggle{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-size:11px;padding:6px 10px;letter-spacing:.5px}
.settings-toggle>span{color:var(--gold);font-size:13px;line-height:1}
.settings-toggle.is-open{background:#ffffff1f;border-color:var(--gold);color:#fff3d4}
.settings-menu{
  position:absolute;right:0;top:calc(100% + 8px);width:188px;
  display:grid;gap:3px;padding:8px;
  background:linear-gradient(180deg,#2a2258f7,#1b174af7);
  border:1px solid #e9c47755;border-radius:12px;
  box-shadow:0 14px 36px #000a,inset 0 0 0 1px #ffffff10;
  animation:zsy-menu-in .16s ease-out both;
}
@keyframes zsy-menu-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.settings-menu .settings-item{
  width:100%;text-align:left;font-size:12px;padding:9px 10px;border-radius:8px;
  border:1px solid transparent;background:transparent;color:var(--ink);
  white-space:nowrap;letter-spacing:.4px;
}
.settings-menu .settings-item:hover:enabled{background:#ffffff1c;border-color:#e9c47744}
.settings-menu .settings-item.is-off{opacity:.55}
.settings-menu .settings-item.danger-item{color:#ffc4b4}
.settings-divider{height:1px;background:#ffffff22;margin:3px 2px}
@media(max-width:700px){
  .settings-toggle{font-size:10px;padding:5px 8px}
  .settings-menu{width:170px;top:calc(100% + 6px)}
  .settings-menu .settings-item{font-size:11px;padding:8px 9px}
}
@media(prefers-reduced-motion:reduce){.settings-menu{animation:none!important}}

/* ===== ZSY SKIN v14: 每个座位的出牌倒计时 ===== */
.table-shell:not(.zsy-result) .opponent{position:relative}
.seat-clock{
  display:none;align-items:center;justify-content:center;
  width:26px;height:26px;min-width:26px;border-radius:50%;
  background:radial-gradient(circle at 34% 26%,#ffdb84,#f8a426 56%,#c96a08);
  border:2px solid #fff0c0;color:#5a2a05;
  font-size:12px;font-weight:900;font-variant-numeric:tabular-nums;line-height:1;
  box-shadow:0 0 0 3px #f8a42633,0 3px 9px #0007,inset 0 1px 2px #ffffff88;
  text-shadow:0 1px 0 #ffe6a8;white-space:nowrap;z-index:4;
}
.seat-clock.active{display:inline-flex}
.opponent>.seat-clock{position:absolute;top:-7px;right:-7px}
.my-info .seat-clock.my-clock{position:static;margin-left:7px;vertical-align:middle;width:24px;height:24px;min-width:24px;font-size:11px}
.seat-clock.urgent,.my-info .seat-clock.urgent{
  background:radial-gradient(circle at 34% 26%,#ffb1a0,#ef4b32 58%,#a01b10);
  color:#fff;border-color:#ffd9cd;box-shadow:0 0 0 4px #ef4b3244,0 3px 12px #0008;
  animation:zsy-seat-urgent .58s ease-in-out infinite alternate;
}
@keyframes zsy-seat-urgent{from{transform:scale(1)}to{transform:scale(1.18)}}
.opponent:has(>.seat-clock.active){filter:drop-shadow(0 0 8px #f8a42655)}
@media(max-width:700px){
  .seat-clock{width:22px;height:22px;min-width:22px;font-size:10px;border-width:1px}
  .opponent>.seat-clock{top:-5px;right:-5px}
  .my-info .seat-clock.my-clock{width:20px;height:20px;min-width:20px;font-size:9px;margin-left:4px}
}
@media(prefers-reduced-motion:reduce){.seat-clock.urgent{animation:none!important}}