:root{--paper:#f5f3ed;--surface:#fffefa;--ink:#242e2b;--muted:#7a817b;--line:#dedfd5;--green:#214e40;--green-deep:#173d32;--gold:#e8c982;--orange:#a65b2c;--spade:#243344;--heart:#bc343f;--club:#237249;--diamond:#276db1;--radius:14px;--font:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.55}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #dbad4e;outline-offset:4px}a{color:inherit}button{touch-action:manipulation}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:600}button{transition:background .16s,box-shadow .16s,transform .12s}button:disabled{opacity:.45}button:active:not(:disabled){transform:translateY(1px)}.skip{position:fixed;top:-70px;left:16px;z-index:50;background:white;padding:10px}.skip:focus{top:10px}.btn{display:inline-flex;gap:10px;align-items:center;justify-content:center;border:1px solid transparent;border-radius:7px;padding:9px 17px;font-weight:500;min-height:40px;white-space:nowrap;background:transparent;color:inherit}.primary{background:var(--green);color:#fffefa}.primary:hover:not(:disabled){background:#31644f}.secondary{background:#fffefa;border-color:#d5d8cf;color:#3b4942}.secondary:hover:not(:disabled){background:#ebece4}.quiet{color:#5f6c63;padding:8px 11px}.quiet:hover:not(:disabled){background:#e8e9e1}.gold{background:var(--gold);color:#394133;border-color:#ecd395}.gold:hover:not(:disabled){background:#f4d89c}.light{background:#f7f3e7;color:#244937}.light-outline{border-color:#8bafa0;color:#f5f1df}.light-outline:hover:not(:disabled){background:#ffffff13}.tool{font-size:13px;padding:5px 10px;min-height:30px;border-color:#dedfd5;background:#faf9f4;color:#4a5a50}.tool:hover:not(:disabled){background:#e8ede4}.subtle{color:var(--muted);font-size:12px}.text-link{border:0;background:none;padding:2px 6px;color:#2b6752;text-decoration:underline;text-underline-offset:3px;font-size:12px}.eyebrow{display:block;font-size:12px;letter-spacing:3px;color:#d9cba5;margin-bottom:16px}.eyebrow.dark{color:#687a69;letter-spacing:2px}.suit0{color:var(--spade)}.suit1{color:var(--heart)}.suit2{color:var(--club)}.suit3{color:var(--diamond)}.gold-heart{color:#b68627}.jade-text{color:#235d48}.orange-text{color:var(--orange)}
.boot{height:100vh;display:grid;place-content:center;text-align:center;font-size:50px;color:var(--green)}.boot p{font-size:15px}.topbar{height:86px;padding:0 38px;display:flex;align-items:center;justify-content:space-between;gap:24px;background:#faf9f4;border-bottom:1px solid var(--line)}.brand{text-decoration:none;display:flex;align-items:center;gap:11px;font-weight:600;font-size:19px;letter-spacing:1px;flex-shrink:0}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:var(--green-deep);color:#eddbb5;font-size:30px}.brand small{display:block;font-size:9px;font-weight:500;letter-spacing:2.2px;color:#6d7c6b;margin-top:1px}.top-center{display:flex;gap:13px;align-items:center;color:#879082;font-size:12px;white-space:nowrap}.top-center i{height:11px;border-left:1px solid #d8dacf}.top-actions{display:flex;align-items:center;gap:13px;white-space:nowrap}.connection{font-size:11px;color:#708472;display:flex;align-items:center;gap:6px}.connection b,.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#5d946c}.user-dot{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#e5eadc;color:#426348;font-size:13px}.user-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.entry{min-height:100vh;display:grid;grid-template-columns:56% 44%}.entry-art{min-height:800px;background:#1d4739;position:relative;overflow:hidden;padding:40px 54px;color:#fff8e6}.entry-art:after{content:"";position:absolute;width:670px;height:670px;border:1px solid #ffffff0b;border-radius:50%;left:-150px;top:260px;pointer-events:none}.entry-brand{font-size:20px;letter-spacing:2px}.entry-copy{position:relative;z-index:1;margin-top:100px}.entry-copy h1{font-family:"Songti SC","STSong",serif;font-size:43px;line-height:1.5;letter-spacing:2px;font-weight:500}.entry-copy p{margin-top:25px;color:#a9c0ae;line-height:1.9;letter-spacing:1px}.entry-cards{height:230px;display:flex;align-items:center;margin:46px 0 0 65px;position:relative;z-index:1}.art-card{width:110px;height:160px;padding:12px 16px;border-radius:10px;background:#fffdf3;box-shadow:0 10px 25px #0002;font-size:32px;font-family:Georgia,serif;position:relative;margin-left:-20px}.art-card span{display:block;text-align:center;font-size:57px}.art-spade{color:#263c44;transform:rotate(-18deg) translateY(12px)}.art-heart{color:#b63c42;transform:rotate(-6deg) translateY(-5px)}.art-club{color:#2d8056;transform:rotate(6deg) translateY(-5px)}.art-diamond{color:#2c75b9;transform:rotate(18deg) translateY(12px)}.entry-foot{position:absolute;bottom:32px;font-size:11px;letter-spacing:1px;color:#a9b9a3}.entry-form{display:flex;align-items:center;justify-content:center;position:relative;padding:48px}.form-inner{width:350px;max-width:100%}.form-inner h2{font-size:28px;margin-bottom:10px}.form-inner>p{color:var(--muted);font-size:13px;margin-bottom:40px}label{display:block;font-size:13px;color:#637363}input{display:block;width:100%;background:#fffefa;border:1px solid #d1d9ce;border-radius:8px;padding:14px 15px;font-size:16px;margin:10px 0 20px;color:var(--ink)}input::placeholder{color:#a3aa9e}.entry-submit{width:100%;height:50px;justify-content:space-between;padding:0 20px}.entry-note{margin-top:48px;display:flex;align-items:center;gap:17px;border-top:1px solid var(--line);padding-top:24px}.entry-note>span{font-size:24px;letter-spacing:1px;white-space:nowrap}.entry-note p{font-size:11px;color:#919887;line-height:1.8}.local-note{position:absolute;bottom:30px;font-size:11px;color:#939c8d}
.lobby{max-width:1340px;margin:auto;padding:50px 42px 28px}.lobby-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px;gap:20px}.lobby-heading .eyebrow{margin-bottom:10px}.lobby-heading h1{font-size:30px;font-weight:500;letter-spacing:.5px}.lobby-heading p{margin-top:9px;color:#7d897d;font-size:13px}.lobby-status{display:flex;align-items:center;gap:8px;color:#536a56;font-size:12px}.lobby-status .subtle{margin-left:12px}.tables{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.table-card{border:1px solid #d9ddd2;border-radius:var(--radius);background:#fbfaf5;overflow:hidden}.table-card-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px 0}.table-no{font-family:Georgia,serif;font-size:25px;color:#365443}.table-no small{font-family:var(--font);font-size:11px;margin-left:5px;color:#8b9487}.table-status{font-size:10px;letter-spacing:1px;color:#60815b}.table-status:before{content:"";display:inline-block;width:5px;height:5px;margin-right:6px;border-radius:50%;background:currentColor}.table-status.is-busy{color:#a57b42}.mini-table{height:245px;position:relative;margin:0 22px}.mini-felt{position:absolute;inset:65px 55px 48px;background:#e4ebdf;border:1px solid #d6e0cf;border-radius:65px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#476649}.mini-felt>span{font-size:22px;color:#91a98c}.mini-felt strong{font-size:13px;font-weight:500}.mini-felt small{font-size:8px;color:#8a9b81}.mini-seat{position:absolute;width:88px;border:0;background:none;padding:0;color:#8a9788;display:flex;flex-direction:column;align-items:center;gap:4px;opacity:1!important}.mini-seat>span{width:33px;height:33px;border-radius:50%;display:grid;place-items:center;border:1px dashed #bcc9b4;background:#fafaf4;color:#7b9372;font-size:18px}.mini-seat small{font-size:10px;max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mini-seat:not(:disabled):hover>span{background:#dce7d2;border-style:solid}.mini-seat.occupied>span{background:#395e47;color:#f1ebd8;border:0;font-size:13px}.mini-seat.robot>span{background:#e7dfcb;color:#8e7855}.mini-seat:disabled{cursor:default}.mini-0{left:calc(50% - 44px);bottom:0}.mini-2{left:calc(50% - 44px);top:10px}.mini-1{right:-23px;top:100px}.mini-3{left:-23px;top:100px}.table-card-foot{border-top:1px solid #e9eade;display:flex;justify-content:space-between;margin:20px 22px 0;padding:14px 0;font-size:10px;color:#889581}.open-arrow{color:#536f4f}.lobby-footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);margin-top:32px;padding-top:22px;color:#8c9585;font-size:11px}.lobby-footer b{color:#5e7257;font-weight:500;margin-right:12px}.recover-banner{background:#e4ecdc;border:1px solid #d2dfc5;display:flex;justify-content:space-between;align-items:center;padding:13px 20px;margin-bottom:24px;border-radius:9px;color:#466340}
.game{max-width:1600px;margin:auto;padding:0 28px 20px}.game-toolbar{height:78px;display:flex;align-items:center;justify-content:space-between;gap:18px}.scoreboard{display:flex;align-items:center;gap:13px}.score-team{font-size:12px;white-space:nowrap}.score-team b{font-family:Georgia,serif;font-size:24px;font-weight:500;margin-left:8px}.score-divider{color:#a1aa99}.score-caption{font-size:10px;color:#8b9786;margin-left:4px}.current-level{display:flex;align-items:center;gap:9px}.current-level small{color:#7a8977;font-size:11px}.current-level strong{font-family:Georgia,serif;font-size:27px;color:#3e5942;font-weight:500}.current-level .gold-heart{font-size:24px}.current-level>span:last-child{font-size:10px;color:#a28f60}.game-tools{display:flex;gap:3px}.settings{display:flex;align-items:center;gap:18px}.settings label{display:flex;align-items:center;gap:8px;font-size:11px;white-space:nowrap}.settings select{border:1px solid #d7ddce;padding:6px 24px 6px 8px;background:#fdfcf7;border-radius:5px;font-size:13px;color:#41553d;min-height:34px}.playfield{height:420px;position:relative;margin:0 0 13px}.felt{position:absolute;inset:18px 124px 38px;background:#2c5b48;border:8px solid #254936;border-radius:170px;box-shadow:inset 0 1px 8px #0002,0 6px 15px #2a3b2410;overflow:hidden}.felt-inner{position:absolute;inset:12px;border:1px solid #7f9a6c44;border-radius:160px;pointer-events:none}.table-watermark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:25px;letter-spacing:5px;color:#d7d7aa10;text-align:center;pointer-events:none;white-space:nowrap}.table-watermark small{display:block;font-size:10px;letter-spacing:4px}.table-top-label{position:absolute;left:50%;top:0;transform:translateX(-50%);padding:0 15px;background:var(--paper);font-size:10px;letter-spacing:1px;color:#909a85;white-space:nowrap}.player{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;min-width:130px}.player-0{bottom:0;left:50%;transform:translateX(-50%);background:var(--paper);padding:4px 15px;border-radius:9px}.player-2{top:0;left:50%;transform:translateX(-50%);background:var(--paper);padding:0 14px 5px}.player-1{right:0;top:39%;flex-direction:column;text-align:center;max-width:123px;min-width:110px}.player-3{left:0;top:39%;flex-direction:column;text-align:center;max-width:123px;min-width:110px}.avatar{width:43px;height:43px;border:2px solid #f4f3e9;border-radius:50%;display:grid;place-items:center;font-size:18px;position:relative;box-shadow:0 2px 5px #25351c15;flex-shrink:0}.avatar.jade{background:#dbe5ce;color:#486c38}.avatar.orange{background:#efdfcc;color:#9b6a39}.player-info{min-width:0}.player-info strong{font-size:12px;font-weight:500;display:block;max-width:160px;overflow-wrap:anywhere}.player-info em{font-style:normal;color:#a4936c;font-size:8px;white-space:nowrap}.player-info>div{font-size:10px;color:#879078;display:flex;gap:6px;justify-content:inherit}.player-info small{font-size:10px;color:#708867}.player-1 .player-info>div,.player-3 .player-info>div{justify-content:center}.relation{color:#899984}.acting .avatar{outline:2px solid #c29f50;outline-offset:3px}.acting .player-info small{color:#ae8338}.thinking-dot{position:absolute;bottom:-2px;right:-2px;border:2px solid var(--paper);background:#b89b51;width:11px;height:11px;border-radius:50%}.remove-bot{border:0;background:none;color:#8e927f;font-size:19px;padding:0 5px}.empty-player button{border:1px dashed #bdc9b1;background:#f5f5ea;border-radius:8px;padding:8px 14px;color:#8a9a7f;font-size:20px}.empty-player small{display:block;font-size:10px}.table-welcome{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px;color:#eee9d7}.felt-symbol{font-size:38px;color:#a4b58e;margin-bottom:9px}.table-welcome h2{font-size:21px;font-weight:400;letter-spacing:1px}.table-welcome p{font-size:12px;color:#a9bda1;margin-top:10px}.waiting-actions{display:flex;gap:10px;margin-top:23px;justify-content:center;flex-wrap:wrap}.field-meta{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:25px;color:#95ae8a;font-size:9px;letter-spacing:1px;white-space:nowrap}.waiting-bottom{display:flex;justify-content:space-between;align-items:center;margin:22px auto;padding:23px 28px;background:#eceee4;border:1px solid #dde2d3;border-radius:10px;max-width:900px;gap:20px}.waiting-bottom b{font-size:13px;font-weight:500;color:#50694c}.waiting-bottom p{font-size:11px;color:#8a957f;margin-top:5px}.four-suits{font-size:28px;letter-spacing:5px;white-space:nowrap}.trick-center,.result{position:absolute;left:50%;top:50%;width:90%;transform:translate(-50%,-50%);text-align:center;color:#f5eddb}.round-eyebrow{display:block;color:#c4c9aa;font-size:11px;letter-spacing:1px;margin-bottom:15px}.played-cards{display:flex;justify-content:center;padding:10px 0;pointer-events:none}.waiting-lead>span{font-size:36px;letter-spacing:9px;opacity:.18}.waiting-lead p{font-size:16px;color:#e4e3c9;margin-top:15px}.exchange-center>span{font-size:38px;color:#b6bc8f}.exchange-center h2{font-size:23px;font-weight:400}.exchange-center p{font-size:12px;color:#becbae;margin-top:12px}.turn-clock{position:absolute;bottom:29px;right:20px;text-align:center;color:#5d7553;min-width:100px}.turn-clock small{display:block;font-size:10px;max-width:150px}.turn-clock strong{display:inline-grid;place-items:center;width:42px;height:42px;font-family:Georgia,serif;border:2px solid #d5dcca;border-radius:50%;font-size:21px;background:var(--paper);margin-top:5px}.turn-clock.urgent strong{color:#b16e3c;border-color:#bf9468}.result-symbol{display:block;color:#d4c184;font-size:31px;line-height:1.1;margin-bottom:8px}.result .round-eyebrow{margin-bottom:7px}.result h2{font-size:27px;font-weight:400;letter-spacing:1px}.result p{font-size:12px;color:#c0cbaa;margin-top:7px}.finish-order{display:block;font-size:9px;color:#9eb59a;margin-top:11px;overflow-wrap:anywhere}.result .waiting-actions{margin-top:16px}.result .btn{min-height:35px;font-size:12px;padding:7px 15px}
.hand-tray{background:var(--surface);border:1px solid #dce0d3;border-radius:12px;padding:14px 23px 17px;margin-top:12px;min-height:250px}.hand-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}.hand-toolbar>div{display:flex;align-items:center;gap:9px}.hand-toolbar strong{font-size:12px;font-weight:500;white-space:nowrap}.hand-toolbar strong span{margin-left:7px;font-family:Georgia,serif;font-size:19px;color:#546e4c}.hand-help{font-size:10px;color:#8d9886}.hand-scroll{overflow-x:auto;overflow-y:hidden;padding:29px 7px 8px;min-height:140px;scrollbar-width:thin;scrollbar-color:#ced9c4 transparent}.hand{display:flex;justify-content:center;min-width:calc(var(--n)*29px + 45px);padding-right:26px;user-select:none;isolation:isolate;min-height:112px}.card{display:block;position:relative;width:69px;height:102px;flex-shrink:0;margin-right:-40px;background:linear-gradient(130deg,#fffef9,#f4f3ed);border:1px solid #d1d4c8;border-radius:7px;box-shadow:-2px 0 4px #374b2a12;padding:0;text-align:left;font-family:Georgia,"Times New Roman",serif;user-select:none;vertical-align:top}.card:disabled{opacity:.45}.card:last-child{margin-right:0}.card-corner{position:absolute;left:7px;top:6px;display:flex;flex-direction:column;align-items:center;line-height:1.05}.card-corner b{font-size:23px;font-weight:700}.card-corner i{font-style:normal;font-size:19px;line-height:1.15}.card-center{position:absolute;right:10px;bottom:7px;font-size:32px;opacity:.55}.card.wild{color:#ad781b;background:linear-gradient(130deg,#fff9e3,#f7ebc9);border-color:#d9b76a}.wild-label{position:absolute;right:5px;top:5px;background:#ac781e;color:#fff8de;border-radius:3px;font:8px var(--font);padding:1px 3px}.card.selected{transform:translateY(-22px);background:#fcf8e8;border-color:#ab944b;box-shadow:0 -2px 0 #ac954e,0 4px 9px #233c2830}.card:hover:not(:disabled){background:#eaf0e2}.card.selected:hover{background:#f6f0da}.mapped{position:absolute;bottom:-17px;left:0;background:#e3d4aa;color:#644f24;border-radius:2px;padding:1px 3px;white-space:nowrap;font:8px var(--font)}.small-card{width:52px;height:76px;margin-right:-8px;border-radius:5px;box-shadow:-1px 1px 4px #122b2325}.small-card .card-corner{top:5px;left:6px}.small-card .card-corner b{font-size:19px}.small-card .card-corner i{font-size:15px}.small-card .card-center{font-size:25px;bottom:6px;right:7px}.small-card .mapped{bottom:-14px}.selection-description{height:21px;text-align:center;font-size:11px;color:#9b8959;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.selection-description .text-link{font-size:10px}.hand-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:14px}.flush-shortcuts{display:flex;align-items:center;gap:8px}.flush-shortcuts>span{font-size:10px;color:#99a18c;margin-right:4px}.flush-button{display:flex;align-items:center;justify-content:center;gap:4px;border:1px solid #d8dfcf;border-radius:6px;padding:4px 10px;font-size:24px;line-height:1;background:#f3f4ed;min-width:60px;min-height:38px}.flush-button small{font-size:9px;font-family:var(--font)}.flush-button:not(.available){color:#aaaFA3;background:#f0f1eb;border-color:#e5e7de;opacity:.65}.flush-button.available{background:#fffdf5;border-color:currentColor}.flush-button.available:hover{box-shadow:0 0 0 2px #e4e8da}.play-actions{display:flex;align-items:center;gap:8px}.play-actions .btn{min-width:64px}.play-actions .primary{min-width:100px;font-size:15px}.play-actions .primary:disabled{background:#bdcbb7;color:#fffefa;opacity:1}.record-panel{position:fixed;right:22px;top:100px;bottom:25px;width:340px;max-width:calc(100vw - 32px);z-index:8;background:#fffef8;border:1px solid #d9dece;border-radius:12px;box-shadow:0 15px 45px #1e392a25;padding:20px;overflow:auto}.record-panel>div{display:flex;align-items:center;justify-content:space-between}.record-panel h3{font-size:15px}.record-panel ol{list-style:none;padding:0;font-size:11px;color:#6a7a5d}.record-panel li{border-bottom:1px solid #e9ecdf;padding:10px 0;overflow-wrap:anywhere}.icon-close{border:0;background:none;font-size:24px;color:#8b977e;padding:0 6px}.control-banner{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:20;padding:12px 20px;background:#fff3d4;border:1px solid #e0c890;box-shadow:0 4px 18px #0002;border-radius:10px;display:flex;gap:20px;align-items:center}
#toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,15px);padding:11px 22px;background:#253f32;color:#fff8e7;border:1px solid #7f9a73;border-radius:8px;box-shadow:0 6px 20px #0002;font-size:13px;z-index:60;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;max-width:90vw;text-align:center}#toast.visible{opacity:1;transform:translate(-50%,0)}dialog{max-width:600px;width:calc(100% - 32px);max-height:85vh;border:1px solid #d6dccc;border-radius:14px;background:#fffef8;padding:26px;color:#41513c;box-shadow:0 25px 70px #172a2640}dialog::backdrop{background:#12291f88}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:22px}.modal-head h2{font-size:20px;font-weight:500}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}.rules-body h3,.difficulty-explain h3{font-size:14px;margin:19px 0 6px;color:#2d5b41}.rules-body p,.difficulty-explain p{font-size:13px;line-height:1.85;color:#7b866f}.rules-body .rule-ranking{padding:13px;background:#eeefdf;color:#5b6d45;font-size:12px;border-radius:7px}.difficulty-explain small{display:block;margin-top:25px;color:#9a9d89;font-size:11px}
@media(min-width:1450px){.playfield{height:460px}.hand-tray{margin-top:18px}.hand{min-width:calc(var(--n)*34px + 40px)}.card{margin-right:-35px}.small-card{margin-right:-8px}}
@media(max-width:1100px){.topbar{padding:0 24px;height:76px}.top-center{display:none}.lobby{padding:32px 24px}.tables{grid-template-columns:repeat(2,minmax(0,1fr))}.mini-table{margin:0 28px}.game{padding:0 16px 16px}.game-toolbar{height:75px;gap:8px}.score-caption{display:none}.settings{gap:8px}.settings .text-link{display:none}.playfield{height:370px}.felt{inset:23px 100px 35px;border-width:6px}.player-1{right:-7px}.player-3{left:-7px}.player-info strong{max-width:120px;font-size:11px}.table-welcome h2{font-size:18px}.hand-tray{padding:12px 15px}.hand-help{display:none}.entry-art{padding:30px}.entry-copy h1{font-size:33px}.entry-cards{margin-left:30px}.entry-form{padding:30px}.entry-note>span{font-size:20px}}
@media(max-width:700px){.entry{grid-template-columns:1fr;min-height:100vh}.entry-art{min-height:285px;padding:24px;display:block}.entry-copy{margin-top:30px}.entry-copy h1{font-size:26px;line-height:1.4}.entry-copy .eyebrow{font-size:10px;margin-bottom:8px}.entry-copy p,.entry-foot{display:none}.entry-cards{position:absolute;right:10px;bottom:8px;margin:0;transform:scale(.6);transform-origin:bottom right}.entry-form{min-height:450px;padding:35px 28px 60px}.form-inner{width:100%}.form-inner h2{font-size:25px}.form-inner>p{margin-bottom:25px}.entry-note{margin-top:30px}.topbar{padding:0 16px;height:68px;gap:10px}.brand{font-size:16px;gap:8px}.brand-mark{width:34px;height:34px;font-size:25px}.brand small{font-size:7px}.top-actions{gap:6px}.top-actions .btn{font-size:11px;padding:5px}.connection,.user-name{display:none}.user-dot{width:27px;height:27px;font-size:11px}.lobby{padding:29px 16px}.lobby-heading{align-items:flex-start;margin-bottom:23px}.lobby-heading h1{font-size:23px}.lobby-heading p{font-size:11px;max-width:240px}.lobby-status{font-size:10px;flex-wrap:wrap;justify-content:flex-end;max-width:95px}.lobby-status .subtle{margin:0}.tables{grid-template-columns:1fr;gap:18px}.table-card-head{padding-top:15px}.mini-table{height:210px;margin:0 42px}.mini-felt{inset:58px 55px 40px}.mini-1,.mini-3{top:85px}.mini-2{top:4px}.table-card-foot{margin-top:15px}.lobby-footer{flex-direction:column;font-size:10px;gap:12px}.recover-banner{padding:10px;font-size:12px;gap:8px}.recover-banner .btn{padding:7px;font-size:11px}.game{padding:0 9px 12px}.game-toolbar{height:auto;min-height:78px;gap:6px;flex-wrap:wrap;padding:10px 3px}.scoreboard{gap:7px}.score-team{font-size:10px}.score-team b{font-size:20px;margin-left:4px}.game-tools .btn{font-size:10px;padding:5px;min-height:28px}.settings{order:3;width:100%;justify-content:center;gap:14px}.settings select{font-size:16px;padding:3px 15px 3px 7px}.settings label{font-size:10px}.current-level{gap:5px}.current-level small{font-size:9px}.current-level strong{font-size:24px}.current-level>span:last-child{display:none}.current-level .gold-heart{font-size:20px}.playfield{height:360px;margin-bottom:5px}.felt{inset:28px 58px 37px;border-radius:90px;border-width:4px}.felt-inner{inset:8px;border-radius:80px}.player{gap:5px;min-width:75px}.avatar{width:31px;height:31px;font-size:14px}.player-1,.player-3{max-width:68px;min-width:60px;top:38%;gap:6px}.player-1{right:-3px}.player-3{left:-3px}.player-0,.player-2{padding-left:8px;padding-right:8px}.player-info strong{font-size:9px;max-width:90px}.player-info em{font-size:7px}.player-info>div{font-size:8px;gap:3px}.player-info small{font-size:8px}.player-1 .player-info strong,.player-3 .player-info strong{max-width:59px}.table-top-label{font-size:8px;top:0}.field-meta{gap:9px;font-size:7px;bottom:13px;letter-spacing:0}.table-welcome{padding:20px 5px}.felt-symbol{font-size:28px}.table-welcome h2{font-size:14px;max-width:170px}.table-welcome p{font-size:9px;max-width:160px}.waiting-actions{gap:6px;margin-top:15px}.waiting-actions .btn{font-size:10px;min-height:29px;padding:6px 10px}.turn-clock{right:3px;bottom:0;min-width:60px}.turn-clock small{font-size:8px;max-width:90px}.turn-clock strong{width:32px;height:32px;font-size:17px}.waiting-bottom{margin:22px 4px;padding:18px}.waiting-bottom p{font-size:10px}.four-suits{display:none}.round-eyebrow{font-size:9px;margin-bottom:10px}.small-card{width:40px;height:62px;margin-right:-12px;border-radius:4px}.small-card .card-corner{left:4px;top:4px}.small-card .card-corner b{font-size:15px}.small-card .card-corner i{font-size:13px}.small-card .card-center{font-size:20px;bottom:4px;right:4px}.small-card .mapped{font-size:7px}.played-cards{flex-wrap:wrap;row-gap:18px;padding:5px}.waiting-lead>span{font-size:22px;letter-spacing:3px}.waiting-lead p{font-size:12px}.result h2{font-size:20px}.result p{font-size:10px}.finish-order{font-size:8px;max-width:180px;margin:10px auto 0}.result .btn{font-size:9px;padding:5px 8px;min-height:28px}.exchange-center h2{font-size:19px}.exchange-center p{font-size:10px;padding:0 5px}.hand-tray{padding:12px 8px;border-radius:9px;margin-top:12px;min-height:270px}.hand-toolbar{align-items:flex-start;gap:6px}.hand-toolbar>div{gap:3px}.hand-toolbar strong{font-size:11px}.hand-toolbar strong span{font-size:16px;margin-left:3px}.tool{padding:4px 6px;font-size:10px;min-height:28px}.hand-scroll{margin:0 -5px;padding:27px 6px 11px;min-height:132px}.hand{justify-content:flex-start;min-width:calc(var(--n)*26px + 40px);padding-right:10px}.card{width:61px;height:91px;margin-right:-35px}.card-corner b{font-size:21px}.card-corner{left:6px}.card-center{font-size:28px}.small-card{width:40px;height:62px;margin-right:-12px}.small-card .card-corner b{font-size:15px}.hand-bottom{flex-direction:column;gap:13px;margin-top:8px}.flush-shortcuts{gap:7px;align-self:flex-start;width:100%;justify-content:center}.flush-shortcuts>span{font-size:9px}.flush-button{min-width:54px;min-height:35px;padding:4px 7px;font-size:21px}.flush-button small{font-size:8px}.play-actions{width:100%;justify-content:flex-end;gap:7px}.play-actions .btn{min-width:56px;font-size:12px;padding:7px 12px;min-height:37px}.play-actions .primary{min-width:92px}.selection-description{font-size:10px;margin-top:0;height:18px}.control-banner{width:calc(100% - 24px);font-size:12px;padding:9px 12px;gap:10px}.control-banner .btn{font-size:11px;white-space:nowrap}.empty-player button{font-size:17px;padding:6px}.empty-player small{font-size:8px}dialog{padding:22px}.modal-head h2{font-size:18px}}
@media(max-height:600px) and (min-width:701px){.topbar{height:58px}.brand-mark{height:31px;width:31px;font-size:23px}.brand{font-size:15px}.brand small{font-size:7px}.game-toolbar{height:58px}.playfield{height:250px}.felt{inset:15px 100px 25px}.player-0{bottom:-7px}.player-2{top:-10px}.table-welcome h2{font-size:17px}.felt-symbol{display:none}.table-welcome p{margin-top:5px}.waiting-actions{margin-top:12px}.hand-tray{padding-top:9px;margin-top:14px;min-height:225px}.hand-toolbar{margin-bottom:0}.hand-scroll{padding-top:25px;min-height:122px}.hand-bottom{margin-top:5px}.hand .card{height:86px}.field-meta{bottom:10px}.result-symbol{display:none}.result h2{font-size:21px}.result p{font-size:10px}.finish-order{font-size:9px}.result .waiting-actions{margin-top:9px}}
.hand .card.group-end{margin-right:-23px}.hand{min-width:calc(var(--n)*29px + 45px + var(--groups,0)*17px)}
@media(min-width:701px){.active-game .playfield{height:clamp(220px,calc(100dvh - 495px),420px)}.active-game .hand-tray{padding-block:12px}.active-game .hand-toolbar{margin-bottom:4px}.active-game .hand{min-height:102px}.active-game .hand-scroll{padding-top:26px;min-height:134px}.active-game .hand .card-corner b{max-width:32px}.active-game .result{width:88%}.active-game .result-symbol{display:none}.active-game .result h2{font-size:23px}.active-game .result .waiting-actions{margin-top:12px}.active-game .round-eyebrow{margin-bottom:9px}}
@media(max-width:700px){.hand{min-width:calc(var(--n)*26px + 40px + var(--groups,0)*17px)}.hand .card.group-end{margin-right:-18px}}
@media(min-width:701px){.active-game .turn-clock{right:clamp(100px,11vw,150px);bottom:58px;color:#d1d7b8}.active-game .turn-clock strong{color:#5d7553}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* 连越：浅绿场景、完整牌桌与悬浮手牌。 */
:root{--paper:#eaf2e6;--surface:#f6f9f0;--line:#d4dfcb}
.topbar{height:74px;background:#f3f7ee;border-color:#d6e1ce}.brand-mark{background:none;border-radius:0;width:45px;height:38px}.brand-mark img{width:45px;height:35px;object-fit:contain}.brand small{font-size:8px;letter-spacing:1.8px}.entry-brand{display:flex;align-items:center;gap:12px}.entry-brand img{width:52px;height:40px;object-fit:contain}.boot img{width:95px;height:75px;object-fit:contain;margin:auto}.mini-felt .mini-logo{width:29px;height:23px;object-fit:contain;margin-bottom:5px}.mini-felt>span{display:none}
.game{padding:0 24px 8px;max-width:1800px}.game-toolbar{height:64px}.game .playfield{height:calc(100dvh - 154px);min-height:480px;margin:0}.game .felt{inset:25px 87px 10px;border-radius:180px;border:7px solid #244a37;background:#2d624c;box-shadow:inset 0 1px 8px #0002,0 8px 20px #23453212}.game .felt-inner{inset:12px;border-radius:170px}.game .table-watermark{top:35%;display:flex;flex-direction:column;align-items:center;color:#d5e5ca25;letter-spacing:4px}.table-watermark .felt-logo{width:100px;height:75px;object-fit:contain;opacity:.12;margin-bottom:12px}.table-watermark>span{font-size:20px}.table-watermark small{font-size:8px;letter-spacing:3px}.felt-welcome-logo{width:65px;height:48px;object-fit:contain;margin-bottom:18px}.game .table-top-label{background:var(--paper);top:0}.game .trick-center{top:35%;width:84%}.game .result{top:35%;width:84%}.game .result-symbol{display:none}.game .round-eyebrow{margin-bottom:12px}.game .field-meta{bottom:237px;font-size:9px;color:#c5d6b4}.game .turn-clock{top:calc(37% - 29px);right:118px;bottom:auto;color:#dae5c9}.game .turn-clock strong{color:#426848;background:#f1f5e9}.game .player-0{left:0;bottom:35px;transform:none;flex-direction:column;max-width:98px;min-width:86px;text-align:center;padding:7px 3px;background:none}.game .player-0 .player-info>div{justify-content:center}.game .player-2{top:0;background:var(--paper);padding-bottom:8px}.game .player-1,.game .player-3{top:31%;gap:8px}.game .player-1{right:-9px}.game .player-3{left:-9px}.game .player-info strong{max-width:143px}.game .waiting-bottom{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);margin:0;max-width:850px;width:70%;background:none;border:none;padding:12px;color:#6c8260}.game.waiting-game{position:relative}.waiting-game .table-welcome{padding-bottom:45px}.waiting-game .field-meta{bottom:35px}.waiting-game .table-watermark{display:none}.game.waiting-game .playfield{min-height:490px}
.opponent-hand{position:relative;height:54px;width:66px;flex-shrink:0;margin-top:4px}.card-back{display:block;position:absolute;width:34px;height:49px;top:0;left:16px;background:#f1f5e9;border:1px solid #d2dbbf;border-radius:4px;box-shadow:0 2px 3px #183f3525}.card-back:before{content:"";position:absolute;inset:3px;border:1px solid #b9c9a2;border-radius:2px}.card-back img{position:absolute;width:25px;height:20px;left:4px;top:14px;object-fit:contain}.card-back.back-0{transform:translateX(-12px) rotate(-12deg)}.card-back.back-1{transform:translateY(-3px)}.card-back.back-2{transform:translateX(12px) rotate(12deg)}.player-2 .opponent-hand{margin:0 0 0 10px;height:47px}.player-1 .opponent-hand,.player-3 .opponent-hand{margin-top:2px}
.game .floating-hand{position:absolute;z-index:4;left:104px;right:104px;bottom:14px;margin:0;min-height:0;background:none;border:0;border-radius:0;box-shadow:none;padding:0 10px}.floating-hand .hand-toolbar{margin:0 0 1px;gap:12px;min-height:30px}.floating-hand .hand-toolbar strong{color:#f2f2dd;font-size:12px}.floating-hand .hand-toolbar strong span{color:#e8d8a2;font-size:18px}.floating-hand .hand-help{color:#c3d3b1;font-size:10px}.floating-hand .hand-toolbar>div{gap:7px}.floating-hand .tool{background:#e9efdd;border-color:#cdd8bd;color:#3b5942;font-size:11px;min-height:29px;padding:4px 9px}.floating-hand .hand-surface{display:flex;align-items:center;gap:14px;min-width:0}.floating-hand .hand-scroll{flex:1;min-width:0;padding:34px 7px 18px;min-height:154px;scrollbar-width:thin;scrollbar-color:#a1b98c55 transparent}.floating-hand .hand{min-width:calc(var(--n)*30px + 42px + var(--groups,0)*17px);min-height:102px;justify-content:center;padding-right:0;gap:0}.floating-hand .hand .card{width:72px;height:102px;margin-right:-42px;border-color:#d0d8c5;box-shadow:-2px 1px 4px #14392e27;overflow:visible}.floating-hand .hand .card:last-child{margin-right:0}.floating-hand .hand .card.group-end{margin-right:-25px}.floating-hand .hand .card.selected{transform:translateY(-17px);box-shadow:0 -2px 0 #bd9e50,0 5px 10px #14392e40}.group-label{position:absolute;left:0;top:-24px;font:9px var(--font);line-height:17px;padding:1px 6px;background:#dbe7cb;color:#3f6244;white-space:nowrap;border-radius:4px;pointer-events:none}.wild .group-label{background:#efdfad;color:#75591d}.floating-hand .manual-tools{display:flex;flex-direction:column;gap:8px;width:57px;flex-shrink:0;padding-top:8px}.manual-arrange{background:#edd398;border:1px solid #ddc380;color:#405239;width:57px;min-height:46px;padding:8px 5px;font-size:14px;box-shadow:0 2px 4px #183b2f22}.manual-arrange:hover:not(:disabled){background:#f7e0aa}.manual-arrange:disabled{background:#a1b792;color:#31523f;border-color:#8ca67d;opacity:.65}.floating-hand .manual-tools .tool{padding:5px;min-height:30px}.floating-hand .selection-description{height:18px;line-height:18px;margin-top:0;color:#dcd4a4;font-size:10px}.floating-hand .selection-description .text-link{color:#e4dfb8}.floating-hand .hand-bottom{margin-top:4px;gap:12px}.floating-hand .flush-shortcuts{gap:6px}.floating-hand .flush-shortcuts>span{color:#b8cda3;font-size:9px}.floating-hand .flush-button{font-size:23px;min-height:35px;min-width:53px;padding:3px 7px;background:#edf2e4;border-color:#ccd7bc}.floating-hand .flush-button small{font-size:9px}.floating-hand .flush-button:not(.available){background:#91ac8144;border-color:#9cb88b55;color:#d1dcc2;opacity:.6}.floating-hand .flush-button.available{background:#fbfcf5;border-color:#cad8b9;box-shadow:0 1px 4px #173b2c25}.floating-hand .play-actions .btn{min-height:36px;padding:6px 14px;min-width:64px;font-size:13px}.floating-hand .play-actions .primary{min-width:100px;background:#e9d096;color:#3d4c32;border-color:#dac182}.floating-hand .play-actions .primary:disabled{background:#91a880;color:#d4dfc8;border-color:#a8bd94}.floating-hand .play-actions .quiet{color:#d0ddbd}.floating-hand .play-actions .quiet:hover:not(:disabled){background:#dce9c922}.floating-hand .play-actions .secondary{background:#e9efde;border-color:#c9d6b8;color:#436043}.floating-hand .subtle{color:#c7d6b3}.floating-hand .card.wild{color:#a87515;background:linear-gradient(130deg,#fff9e3,#f7ebc9);border-color:#ddbd71}.floating-hand .card .mapped{bottom:-15px}.active-game .felt-inner{bottom:12px}
@media(max-width:1100px) and (min-width:701px){.game{padding-inline:14px}.game .felt{inset-inline:70px;border-radius:140px}.game .felt-inner{border-radius:130px}.game .player-1,.game .player-3{min-width:88px;max-width:90px}.game .floating-hand{left:80px;right:80px;padding-inline:2px}.floating-hand .hand-help{display:none}.floating-hand .hand{min-width:calc(var(--n)*27px + 40px + var(--groups,0)*17px)}.floating-hand .hand .card{width:67px;margin-right:-40px}.floating-hand .hand .card.group-end{margin-right:-23px}.game .turn-clock{right:95px}.floating-hand .hand-toolbar{gap:8px}}
@media(max-width:700px){.topbar{height:66px}.brand-mark{width:35px;height:29px}.brand-mark img{width:35px;height:28px}.brand{font-size:15px}.brand small{font-size:6px;letter-spacing:1px}.entry-brand img{width:42px;height:32px}.game{padding:0 8px 5px}.game-toolbar{height:auto;min-height:76px}.game .playfield{height:calc(100dvh - 150px);min-height:570px;margin:0}.game .felt{inset:25px 0 0;border-radius:86px;border-width:4px}.game .felt-inner{inset:8px;border-radius:78px}.game .table-top-label{font-size:8px;top:0}.game .trick-center,.game .result{top:34%;width:72%}.game .player-2{top:0;gap:6px;max-width:225px;padding-bottom:5px}.game .player-2 .player-info{max-width:90px}.player-2 .opponent-hand{margin-left:3px;transform:scale(.83);transform-origin:center;width:48px}.game .player-1,.game .player-3{top:23%;max-width:63px;min-width:58px;gap:5px;color:#ecf1df}.game .player-1{right:4px}.game .player-3{left:4px}.game .player-1 .player-info strong,.game .player-3 .player-info strong{max-width:60px}.game .player-1 .player-info small,.game .player-3 .player-info small{color:#bfd1af}.game .player-1 .player-info>div,.game .player-3 .player-info>div{color:#bfd1af}.game .player-1 .relation,.game .player-3 .relation{color:#c9d8b8}.player-1 .opponent-hand,.player-3 .opponent-hand{transform:scale(.75);transform-origin:top;height:42px;width:55px}.game .player-0{left:10px;bottom:244px;max-width:110px;min-width:70px;flex-direction:row;padding:0;text-align:left;color:#eef2de}.game .player-0 .player-info>div{justify-content:flex-start}.game .player-0 .player-info small,.game .player-0 .player-info>div,.game .player-0 .relation{color:#c4d4b2}.game .player-0 .player-info strong{max-width:88px}.game .turn-clock{right:17px;top:auto;bottom:242px;min-width:55px}.game .turn-clock small{font-size:8px}.game .turn-clock strong{width:30px;height:30px;font-size:16px}.game .table-watermark{top:35%}.table-watermark .felt-logo{width:70px;height:50px}.table-watermark>span{font-size:14px}.table-watermark small{font-size:6px;letter-spacing:2px}.game .field-meta{bottom:265px;font-size:7px;gap:13px}.game .floating-hand{left:9px;right:9px;bottom:9px;padding:0}.floating-hand .hand-toolbar{gap:6px;margin:0;min-height:27px}.floating-hand .hand-toolbar>div{gap:3px}.floating-hand .hand-help{display:none}.floating-hand .hand-toolbar strong{font-size:10px}.floating-hand .hand-toolbar strong span{font-size:15px}.floating-hand .tool{font-size:10px;min-height:26px;padding:3px 6px}.floating-hand .hand-surface{gap:7px}.floating-hand .hand-scroll{padding:30px 4px 16px;min-height:133px}.floating-hand .hand{justify-content:flex-start;min-height:88px;min-width:calc(var(--n)*25px + 35px + var(--groups,0)*15px)}.floating-hand .hand .card{width:60px;height:88px;margin-right:-35px}.floating-hand .hand .card.group-end{margin-right:-20px}.floating-hand .hand .card-corner b{font-size:20px}.floating-hand .hand .card-corner i{font-size:17px}.floating-hand .hand .card-center{font-size:26px}.floating-hand .manual-tools{width:43px;gap:7px}.floating-hand .manual-arrange{width:43px;min-height:41px;font-size:12px;padding:6px 3px}.floating-hand .manual-tools .tool{font-size:9px;min-height:25px}.floating-hand .selection-description{height:17px;font-size:9px;line-height:17px}.floating-hand .hand-bottom{flex-direction:column;margin-top:2px;gap:8px}.floating-hand .flush-shortcuts{gap:6px;justify-content:flex-start}.floating-hand .flush-button{min-width:45px;min-height:30px;font-size:20px;padding:3px 6px}.floating-hand .flush-button small{font-size:8px}.floating-hand .play-actions{justify-content:flex-end;gap:7px}.floating-hand .play-actions .btn{min-width:54px;padding:6px 11px;font-size:12px;min-height:34px}.floating-hand .play-actions .primary{min-width:90px}.floating-hand .group-label{top:-22px;font-size:8px;line-height:15px;padding:1px 4px}.game.waiting-game .playfield{min-height:530px}.game .waiting-bottom{width:94%;bottom:10px;padding:8px}.waiting-game .table-welcome{padding:0 14px 50px}.waiting-game .table-welcome h2{max-width:240px;font-size:17px}.waiting-game .table-welcome p{max-width:235px;font-size:11px}.waiting-game .table-welcome .waiting-actions{max-width:270px}.game .result h2{font-size:21px}.game .result .waiting-actions{gap:6px}.game .result p{font-size:10px}.felt-welcome-logo{width:53px;height:40px}}
@media(max-height:600px) and (min-width:701px){.topbar{height:56px}.game-toolbar{height:52px}.game .playfield{height:calc(100dvh - 120px);min-height:370px}.game .felt{top:20px}.game .floating-hand{bottom:6px}.floating-hand .hand-scroll{padding-top:27px;min-height:127px}.floating-hand .hand .card{height:86px}.floating-hand .hand{min-height:86px}.floating-hand .hand-toolbar{min-height:25px}.floating-hand .selection-description{height:15px;line-height:15px}.floating-hand .hand-bottom{margin-top:1px}.floating-hand .play-actions .btn{min-height:31px}.game .trick-center,.game .result{top:30%}.game .field-meta{bottom:218px}.game .player-0{bottom:30px}.game .turn-clock{top:20%}.game .table-watermark{top:30%}.game .result .finish-order{margin-top:5px}.game .result .waiting-actions{margin-top:9px}}
@media(max-width:700px){.game .player-0{bottom:282px}.game .turn-clock{bottom:282px}.game .field-meta{bottom:293px}}

/* 理好的组合以竖向牌叠显示；散牌仍为原来的横向手牌。 */
.playfield{--stack-extra:var(--stack-extra-desktop,0px)}
.game .playfield.has-stacked-hand{min-height:calc(480px + var(--stack-extra) / 3)}
.floating-hand .hand.hand-columns{width:max-content;min-width:100%;display:flex;align-items:flex-end;justify-content:center;gap:18px;min-height:102px;margin:0;padding-right:6px}
.hand-columns .loose-cards{display:flex;align-items:flex-end;flex-shrink:0;min-height:102px;padding:0;margin:0}
.floating-hand .hand.hand-columns .loose-cards .card{position:relative;margin-right:-42px}
.floating-hand .hand.hand-columns .loose-cards .card:last-child{margin-right:0}
.card-stack{--stack-step:var(--stack-step-desktop);--stack-card-width:76px;--stack-card-height:102px;position:relative;flex-shrink:0;width:var(--stack-card-width);height:calc(var(--stack-card-height) + (var(--stack-count) - 1) * var(--stack-step));transition:transform .12s}
.floating-hand .hand.hand-columns .card-stack .card{position:absolute;left:0;top:calc(var(--stack-index) * var(--stack-step));width:var(--stack-card-width);height:var(--stack-card-height);margin:0;border-radius:6px;box-shadow:0 -1px 3px #16382d25}
.card-stack .stack-label{position:absolute;left:-3px;right:-3px;top:-27px;display:flex;align-items:center;justify-content:center;gap:5px;height:23px;min-height:23px;border:1px solid #c1d1ad;border-radius:5px;background:#dce7cd;color:#3b6043;padding:1px 4px;font:10px var(--font);white-space:nowrap;box-shadow:0 1px 3px #16382d15}
.stack-label span{min-width:0;overflow:hidden;text-overflow:ellipsis}.stack-label small{font-size:8px;opacity:.75;flex-shrink:0}.stack-label:hover:not(:disabled){background:#edf2df}.stack-label:disabled{opacity:.85}
.floating-hand .hand .card-stack .card-corner{left:7px;top:3px;flex-direction:row;gap:3px;align-items:center;line-height:1}
.floating-hand .hand .card-stack .card-corner b{font-size:20px;line-height:20px}.floating-hand .hand .card-stack .card-corner i{font-size:17px;line-height:20px}
.floating-hand .card-stack .card .mapped{top:4px;bottom:auto;left:auto;right:3px;font-size:8px;line-height:12px;padding:1px 2px}
.card-stack .card:has(.mapped) .wild-label{display:none}
.floating-hand .hand .card-stack .card.selected{transform:translateX(-4px);box-shadow:inset 0 0 0 1px #b89b52,0 -1px 3px #173d2925}
.card-stack.selected-stack{transform:translateY(-8px)}
.floating-hand .hand .card-stack.selected-stack .card.selected{transform:none}
.card-stack.selected-stack .stack-label{background:#ecd49a;border-color:#c6a66d;color:#614f2d}
.floating-hand .hand-surface{align-items:flex-end}.floating-hand .manual-tools{align-self:flex-end;padding-top:0;padding-bottom:20px}
.active-game .has-stacked-hand .trick-center,.active-game .has-stacked-hand .result{top:calc(35% - var(--stack-extra) / 4)}
.game.active-game .field-meta{top:72px;bottom:auto}
@media(max-width:1100px) and (min-width:701px){.floating-hand .hand.hand-columns .loose-cards .card{margin-right:-40px}.floating-hand .hand.hand-columns .loose-cards .card:last-child{margin-right:0}.card-stack{--stack-card-width:70px}.floating-hand .hand.hand-columns{gap:15px}}
@media(max-width:700px){.playfield{--stack-extra:var(--stack-extra-mobile,0px)}.game .playfield.has-stacked-hand{min-height:calc(570px + var(--stack-extra) / 3)}.card-stack{--stack-step:var(--stack-step-mobile);--stack-card-width:65px;--stack-card-height:88px}.floating-hand .hand.hand-columns{justify-content:flex-start;gap:14px;min-height:88px}.hand-columns .loose-cards{min-height:88px}.floating-hand .hand.hand-columns .loose-cards .card{margin-right:-35px}.floating-hand .hand.hand-columns .loose-cards .card:last-child{margin-right:0}.floating-hand .hand .card-stack .card-corner{left:5px;gap:2px;top:2px}.floating-hand .hand .card-stack .card-corner b{font-size:17px;line-height:17px}.floating-hand .hand .card-stack .card-corner i{font-size:15px;line-height:17px}.card-stack .stack-label{font-size:9px;top:-23px;height:20px;min-height:20px;gap:3px}.stack-label small{font-size:7px}.floating-hand .card-stack .card .mapped{font-size:7px;right:2px;top:3px;padding:1px}.floating-hand .manual-tools{padding-bottom:18px}.game .player-0{bottom:calc(282px + var(--stack-extra))}.game .turn-clock{bottom:calc(282px + var(--stack-extra))}.game.active-game .field-meta{top:66px;bottom:auto}.active-game .has-stacked-hand .trick-center,.active-game .has-stacked-hand .result{top:calc(34% - var(--stack-extra) / 4)}}
@media(max-height:600px) and (min-width:701px){.playfield{--stack-extra:var(--stack-extra-short,0px)}.card-stack{--stack-step:var(--stack-step-short);--stack-card-height:86px}.game .playfield.has-stacked-hand{min-height:calc(420px + var(--stack-extra) / 3)}.floating-hand .hand.hand-columns,.hand-columns .loose-cards{min-height:86px}.game.active-game .field-meta{top:60px;bottom:auto}}
@media(prefers-reduced-motion:reduce){.card-stack{transition:none}}
@media(min-width:701px){.game .has-stacked-hand .turn-clock{top:calc(37% - 29px - var(--stack-extra) / 2)}}
@media(max-width:700px){.game .has-stacked-hand .player-1,.game .has-stacked-hand .player-3{top:calc(23% - var(--stack-extra) / 2)}}
.floating-hand .hand .card-stack.dense-stack .card-corner{top:0}
.floating-hand .hand .card-stack.dense-stack .card-corner b{font-size:min(20px,calc(var(--stack-step) - 1px));line-height:var(--stack-step)}
.floating-hand .hand .card-stack.dense-stack .card-corner i{font-size:min(17px,calc(var(--stack-step) - 3px));line-height:var(--stack-step)}
.floating-hand .card-stack.dense-stack .card .mapped{top:0;padding:0 2px;line-height:calc(var(--stack-step) - 2px);font-size:min(8px,calc(var(--stack-step) - 4px))}

/* 四家各自的出牌位置，按当前查看者的座位旋转。 */
.game .has-seat-plays{min-height:calc(442px + var(--stack-extra,0px))}
.seat-play{position:absolute;z-index:3;width:222px;color:#d5e3c7;pointer-events:none}
.seat-play-2{top:64px;left:50%;transform:translateX(-50%)}
.seat-play-3{left:126px;top:calc(25% - var(--stack-extra,0px) / 4)}
.seat-play-1{right:126px;top:calc(25% - var(--stack-extra,0px) / 4)}
.seat-play-0{left:50%;bottom:calc(232px + var(--stack-extra,0px));transform:translateX(-50%)}
.seat-play-label{height:16px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:10px;line-height:16px;margin-bottom:3px;white-space:nowrap}
.seat-play-label strong{font-weight:500;max-width:90px;overflow:hidden;text-overflow:ellipsis}
.seat-play-type{max-width:103px;overflow:hidden;text-overflow:ellipsis;font-size:9px;color:#adc5a0}
.seat-play-label b{font-size:8px;font-weight:500;line-height:13px;padding:1px 4px;background:#e4ce91;color:#405033;border-radius:3px;flex-shrink:0}
.seat-play .played-cards{display:flex;justify-content:center;align-items:flex-start;flex-wrap:nowrap;padding:0 2px 3px;min-height:50px;pointer-events:auto;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#bbca9c66 transparent}
.seat-play-3 .played-cards,.seat-play-3 .seat-play-label{justify-content:flex-start}
.seat-play-1 .played-cards,.seat-play-1 .seat-play-label{justify-content:flex-end}
.seat-play .small-card{display:block;flex-shrink:0;width:36px;height:50px;margin-right:-18px;border-radius:4px;box-shadow:-1px 1px 3px #153c2e33;pointer-events:none;opacity:.85}
.seat-play .small-card:last-child{margin-right:0}
.seat-play .small-card .card-corner{top:3px;left:4px;gap:0}
.seat-play .small-card .card-corner b{font-size:15px;line-height:16px}.seat-play .small-card .card-corner i{font-size:12px;line-height:14px}
.seat-play .small-card .card-center{font-size:18px;bottom:3px;right:4px}
.seat-play .small-card .wild-label{top:3px;right:2px;font-size:6px;padding:0 2px}
.seat-play .small-card .mapped{bottom:2px;top:auto;left:auto;right:1px;font-size:6px;padding:0 2px;line-height:10px}
.seat-play.current-play .small-card{opacity:1;box-shadow:0 0 0 1px #d1b777,-1px 2px 4px #16382c44}
.seat-play.current-play .seat-play-label{color:#f2e4ad}
.pass-word,.lead-word{display:block;font-size:17px;line-height:27px;letter-spacing:3px;color:#c1d3ae;text-align:center}
.lead-word{font-size:13px;color:#e5d6a4;letter-spacing:1px}
.seat-play-1 .pass-word,.seat-play-1 .lead-word{text-align:right}.seat-play-3 .pass-word,.seat-play-3 .lead-word{text-align:left}
.game .has-seat-plays .turn-clock{top:7px;right:15px;bottom:auto;width:100px;color:#5c7352}
.game .has-seat-plays .turn-clock small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1100px) and (min-width:701px){.seat-play-1{right:100px}.seat-play-3{left:100px}.seat-play{width:195px}}
@media(max-width:700px){.game .has-seat-plays{min-height:calc(530px + var(--stack-extra,0px))}.seat-play{width:190px}.seat-play-2{top:65px}.seat-play-0{bottom:calc(232px + var(--stack-extra,0px))}.seat-play-3{left:72px;top:147px;width:105px}.seat-play-1{right:72px;top:147px;width:105px}.seat-play-label{font-size:8px;gap:3px;height:14px;line-height:14px}.seat-play-label strong{max-width:62px}.seat-play-type{font-size:7px;max-width:81px}.seat-play-label b{font-size:7px;padding:0 3px;line-height:12px}.seat-play-1 .seat-play-type,.seat-play-3 .seat-play-type{display:none}.seat-play .played-cards{min-height:46px;padding-bottom:3px}.seat-play .small-card{width:32px;height:46px;margin-right:-17px}.seat-play .small-card .card-corner{top:3px;left:3px}.seat-play .small-card .card-corner b{font-size:14px;line-height:15px}.seat-play .small-card .card-corner i{font-size:11px;line-height:12px}.seat-play .small-card .card-center{font-size:17px;right:3px;bottom:3px}.game .has-seat-plays .turn-clock{top:5px;right:8px;width:80px}.game .has-seat-plays .turn-clock small{max-width:80px}.game .has-seat-plays .turn-clock strong{margin-top:3px}.pass-word{font-size:15px}.lead-word{font-size:11px}}
.game .has-seat-plays .field-meta{top:30px;bottom:auto;left:45px;transform:none}
@media(max-width:700px){.game .has-seat-plays .field-meta{top:18px;left:22px;gap:8px}}
@media(max-width:700px){.seat-play-1,.seat-play-3{width:clamp(70px,calc(50% - 78px),105px)}}
.seat-play{width:244px}.seat-play .small-card{margin-right:-14px}.seat-play .small-card .card-corner b{font-size:16px;line-height:17px}
@media(max-width:1100px) and (min-width:701px){.seat-play{width:195px}}
@media(max-width:700px){.seat-play{width:190px}.seat-play-1,.seat-play-3{width:clamp(70px,calc(50% - 78px),105px)}.seat-play .small-card{margin-right:-16px}.seat-play .small-card .card-corner{left:2px}.seat-play .small-card .card-corner b{font-size:13px;line-height:15px}}

/* 叠牌只露左侧点数；牌面更紧密，保留组名与拆组选牌。 */
.floating-hand .hand .card-stack .card-corner{top:0;left:6px;display:block;line-height:var(--stack-step)}
.floating-hand .hand .card-stack .card-corner b{font-size:min(17px,calc(var(--stack-step) - 1px));line-height:var(--stack-step)}
.floating-hand .hand .card-stack .card-corner i{display:none}
.floating-hand .hand .card-stack.dense-stack .card-corner b{font-size:min(17px,calc(var(--stack-step) - 1px));line-height:var(--stack-step)}
.floating-hand .hand .card-stack .mapped{top:1px;line-height:calc(var(--stack-step) - 2px)}
.floating-hand .selection-description{height:auto;min-height:18px;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:1px 10px;overflow:visible;text-overflow:clip;white-space:normal;line-height:18px}
.play-block-reason{color:#ffe0a4;font-size:11px}.selection-summary{max-width:100%}
.joker-mark{display:inline-block;width:14px;height:11px;vertical-align:middle;background:currentColor;-webkit-mask:url('/public/assets/linyue-logo.png') center/contain no-repeat;mask:url('/public/assets/linyue-logo.png') center/contain no-repeat}
.card.joker-large{color:#ce2146}.card.joker-small{color:#111111}
.card.joker .card-center{width:44px;height:33px;right:8px;bottom:10px;opacity:1}
.card.joker .card-center .joker-mark{width:100%;height:100%}
.seat-play .card.joker .card-center{width:23px;height:17px;right:3px;bottom:4px}
@media(max-width:700px){.floating-hand .hand .card-stack .card-corner{left:5px}.floating-hand .hand .card-stack .card-corner b,.floating-hand .hand .card-stack.dense-stack .card-corner b{font-size:min(13px,calc(var(--stack-step) - 1px))}.floating-hand .selection-description{font-size:9px;line-height:15px;min-height:17px;gap:1px 6px}.play-block-reason{font-size:9px}.card.joker .card-center{width:36px;height:27px;right:6px;bottom:8px}.seat-play .card.joker .card-center{width:21px;height:16px;right:3px;bottom:3px}}

/* 倒计时与自己的最近出牌一起跟随手牌高度，避免被竖叠牌遮挡。 */
.game .hand-zone{position:absolute;left:104px;right:104px;bottom:12px;z-index:5}
.game .hand-zone .floating-hand{position:relative;inset:auto;width:auto;margin:0}
.game .hand-zone .player-0{left:-104px;bottom:23px}
.game .hand-zone .player-0 .player-info strong{color:var(--ink);font-size:12px;font-weight:500}
.hand-front{display:flex;align-items:center;justify-content:center;gap:24px;min-height:76px;margin-bottom:8px}
.game .hand-front .seat-play-0{position:relative;inset:auto;transform:none;width:244px;flex-shrink:0}
.hand-front .seat-play-0 .played-cards,.hand-front .seat-play-0 .seat-play-label{justify-content:center}
.game .hand-front .turn-clock{position:relative;inset:auto;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:15px;width:auto;min-width:190px;max-width:290px;margin:0;padding:7px 16px;border:2px solid #b9c6a4;border-radius:11px;background:#f2f3df;color:#3d553c;box-shadow:0 3px 9px #112f2926;text-align:left}
.game .hand-front .turn-clock small{font-size:13px;line-height:1.5;font-weight:600;max-width:135px;white-space:normal;overflow-wrap:anywhere;overflow:visible;text-overflow:clip}
.game .hand-front .clock-value{display:flex;align-items:baseline;gap:4px;flex-shrink:0}
.game .hand-front .turn-clock strong{display:block;width:auto;min-width:53px;height:auto;margin:0;background:transparent;color:inherit;border:0;border-radius:0;font:700 42px/1.1 var(--font);font-variant-numeric:tabular-nums;letter-spacing:-1px;text-align:center}
.clock-value>span{font-size:11px}
.game .hand-front .turn-clock.own-turn{background:#f7e7b4;border-color:#d6b96d;color:#59451d}
.game .hand-front .turn-clock.urgent{background:#fff0e4;border-color:#d57850;color:#9b361e}
.game .hand-front .turn-clock.urgent strong{color:inherit}
@media(max-width:1100px) and (min-width:701px){.game .hand-zone{left:80px;right:80px}.game .hand-zone .player-0{left:-80px}.hand-front{gap:15px}.game .hand-front .seat-play-0{width:210px}.game .hand-front .turn-clock{min-width:180px;max-width:260px}}
@media(max-width:700px){.game .hand-zone{left:9px;right:9px;bottom:9px}.game .hand-zone .player-0{position:static;inset:auto;min-width:26px;max-width:26px;padding:0;margin-right:3px;transform:none}.hand-zone .player-0 .avatar{width:26px;height:26px;font-size:12px}.hand-zone .player-0 .player-info{display:none}.hand-owner{min-width:0}.hand-owner strong{white-space:nowrap}.hand-front{gap:10px;min-height:71px;margin-bottom:6px}.game .hand-front .seat-play-0{width:auto;min-width:0;max-width:180px;flex:1}.game .hand-front .turn-clock{min-width:145px;max-width:190px;gap:8px;padding:7px 10px;border-radius:9px}.game .hand-front .turn-clock small{font-size:11px;max-width:78px}.game .hand-front .turn-clock strong{font-size:34px;min-width:43px}.clock-value>span{font-size:9px}}
@media(max-height:600px) and (min-width:701px){.game .hand-zone{bottom:6px}.hand-front{min-height:62px;margin-bottom:4px}.game .hand-front .turn-clock{padding:5px 13px}.game .hand-front .turn-clock strong{font-size:35px}}

/* 2026-10 视觉焕新：统一品牌、材质、层级与动效，不改变牌局交互。 */
:root {
  --paper: #f2f5ef;
  --surface: #fffefa;
  --ink: #182b24;
  --muted: #718078;
  --line: #dce4db;
  --green: #15533f;
  --green-deep: #0b3529;
  --gold: #ddbd73;
  --orange: #aa623d;
  --spade: #202b35;
  --heart: #c33d4d;
  --club: #218257;
  --diamond: #3278b8;
  --radius: 18px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --shadow-soft: 0 12px 34px rgba(25, 55, 42, .08);
}
html { background: var(--paper); }
body {
  min-width: 320px;
  background:
    radial-gradient(circle at 4% -10%, rgba(255,255,255,.95), transparent 34rem),
    radial-gradient(circle at 98% 12%, rgba(210,226,211,.55), transparent 30rem),
    var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, .card, .table-card { -webkit-tap-highlight-color: transparent; }
button { transition: color .18s, background .18s, border-color .18s, box-shadow .22s, transform .22s var(--ease-out); }
.btn { border-radius: 10px; letter-spacing: .02em; }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.primary {
  background: linear-gradient(135deg, #1c624a, #104432);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 5px 14px rgba(17, 71, 52, .16);
}
.primary:hover:not(:disabled) { background: linear-gradient(135deg, #267458, #15503c); box-shadow: 0 8px 20px rgba(17,71,52,.22); }
.secondary { background: rgba(255,255,255,.8); border-color: #d9e1d7; box-shadow: 0 2px 5px rgba(30,55,43,.04); }
.quiet { border-radius: 9px; }
.quiet:hover:not(:disabled) { background: rgba(255,255,255,.75); color: var(--green); }
.gold { background: linear-gradient(135deg, #efd796, #d7b464); border-color: #f2dda8; box-shadow: 0 5px 15px rgba(96,70,24,.15); }
.eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 4px; }
.eyebrow.dark { color: #788b7d; }

/* 顶栏 */
.topbar {
  height: 76px;
  padding: 0 clamp(20px, 3vw, 48px);
  background: rgba(248,250,246,.82);
  border-bottom: 1px solid rgba(199,213,200,.72);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
.brand { font-size: 18px; font-weight: 650; letter-spacing: 1.5px; }
.brand-mark {
  width: 46px;
  height: 40px;
  padding: 4px;
  border: 1px solid rgba(211,220,209,.85);
  border-radius: 11px;
  background: rgba(255,255,255,.7);
  box-shadow: 0 3px 10px rgba(30,57,43,.06);
}
.brand-mark img { width: 36px; height: 29px; }
.brand small { color: #7c8c80; font-size: 7px; letter-spacing: 2.2px; }
.top-center { color: #75857a; font-size: 11px; letter-spacing: .04em; }
.top-center i { border-color: #d3ddd2; }
.connection { color: #66816e; }
.connection b, .live-dot { background: #55a271; box-shadow: 0 0 0 4px rgba(85,162,113,.1); animation: live-pulse 2.8s ease-in-out infinite; }
.user-dot { color: #f8f2df; background: linear-gradient(145deg, #527761, #274c3a); box-shadow: 0 3px 9px rgba(27,65,47,.14); }

/* 登录页 */
.entry { grid-template-columns: 57% 43%; }
.entry-art {
  isolation: isolate;
  background:
    radial-gradient(circle at 76% 22%, rgba(111,161,126,.2), transparent 27rem),
    radial-gradient(circle at 10% 90%, rgba(221,189,115,.08), transparent 28rem),
    linear-gradient(145deg, #174f3c, #0b3429 72%);
}
.entry-art::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 520px;
  height: 520px;
  right: -190px;
  top: -210px;
  border: 1px solid rgba(235,217,169,.1);
  border-radius: 50%;
  box-shadow: 0 0 0 80px rgba(255,255,255,.015), 0 0 0 160px rgba(255,255,255,.01);
}
.entry-art::after { border-color: rgba(238,222,177,.08); box-shadow: 0 0 0 90px rgba(255,255,255,.012); }
.entry-brand img { padding: 3px; border-radius: 8px; background: rgba(255,255,255,.92); }
.entry-copy { margin-top: clamp(72px, 11vh, 124px); animation: rise-in .7s .08s var(--ease-out) both; }
.entry-copy h1 { font-size: clamp(36px, 3.25vw, 50px); line-height: 1.45; letter-spacing: 3px; text-shadow: 0 4px 25px rgba(0,0,0,.12); }
.entry-copy h1::after { content: ""; display: block; width: 44px; height: 2px; margin-top: 26px; background: linear-gradient(90deg, #e1c37d, transparent); }
.entry-copy p { color: #afc8b6; }
.entry-cards { animation: gentle-float 7s ease-in-out infinite; }
.art-card {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 13px;
  background: linear-gradient(145deg, #fffef9, #f0eee4);
  box-shadow: -8px 18px 34px rgba(0,0,0,.2), inset 0 0 0 1px rgba(255,255,255,.65);
  animation: card-arrive .72s var(--ease-out) both;
}
.art-card:nth-child(2) { animation-delay: .08s; }
.art-card:nth-child(3) { animation-delay: .16s; }
.art-card:nth-child(4) { animation-delay: .24s; }
.entry-form { background: radial-gradient(circle at 90% 10%, rgba(215,228,213,.45), transparent 25rem); }
.form-inner { width: 370px; animation: rise-in .65s .15s var(--ease-out) both; }
.form-inner h2 { font-size: 30px; letter-spacing: -.02em; }
.form-inner > p { line-height: 1.8; }
input {
  height: 52px;
  border-color: #d3ded2;
  border-radius: 11px;
  background: rgba(255,255,255,.85);
  box-shadow: inset 0 1px 2px rgba(24,52,38,.025);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
input:focus { border-color: #6c9c7f; background: #fff; box-shadow: 0 0 0 4px rgba(52,119,83,.09); outline: none; }
.entry-submit { height: 52px; border-radius: 11px; }
.entry-submit span { font-size: 20px; transition: transform .25s var(--ease-out); }
.entry-submit:hover span { transform: translateX(4px); }
.entry-note { border-color: #dfe6dc; }

/* 大厅 */
.lobby { max-width: 1400px; padding-top: 46px; }
.lobby-heading h1 { font-family: "Songti SC", "STSong", serif; font-size: 35px; letter-spacing: 1px; }
.lobby-status { padding: 9px 13px; border: 1px solid rgba(207,220,205,.8); border-radius: 30px; background: rgba(255,255,255,.5); }
.tables { gap: 24px; }
.table-card {
  position: relative;
  border: 1px solid rgba(211,221,209,.85);
  border-radius: 20px;
  background: rgba(255,255,252,.78);
  box-shadow: 0 4px 16px rgba(32,62,46,.045);
  transition: transform .3s var(--ease-out), box-shadow .3s, border-color .3s;
  animation: rise-in .5s var(--ease-out) both;
}
.table-card:nth-child(2) { animation-delay: .05s; }
.table-card:nth-child(3) { animation-delay: .1s; }
.table-card:nth-child(4) { animation-delay: .15s; }
.table-card:nth-child(5) { animation-delay: .2s; }
.table-card::before { content: ""; position: absolute; z-index: 1; left: 22px; right: 22px; top: 0; height: 2px; background: linear-gradient(90deg, transparent, #c7ab6d, transparent); opacity: 0; transition: opacity .25s; }
.table-card:hover { transform: translateY(-5px); border-color: #c8d7c7; box-shadow: 0 18px 38px rgba(27,60,44,.1); }
.table-card:hover::before { opacity: .8; }
.table-no { color: #274f3c; font-size: 28px; }
.table-status { padding: 4px 8px; border-radius: 20px; background: #edf4e9; }
.table-status.is-busy { background: #f6efe2; }
.mini-felt {
  border: 1px solid rgba(216,190,126,.32);
  background: radial-gradient(ellipse at 50% 15%, #396f55, #174735 75%);
  color: #f0ead6;
  box-shadow: 0 0 0 5px #e2e9dd, 0 0 0 6px #d4dfd1, inset 0 8px 22px rgba(0,0,0,.12), 0 8px 18px rgba(30,65,47,.1);
}
.mini-felt small { color: #acc4af; }
.mini-felt .mini-logo { filter: drop-shadow(0 2px 3px rgba(0,0,0,.15)); }
.mini-seat > span { background: rgba(255,255,255,.8); border-color: #bdcebd; transition: transform .2s var(--ease-out), background .2s, box-shadow .2s; }
.mini-seat:not(:disabled):hover > span { transform: translateY(-3px); background: #fff8e8; border-color: #c9aa66; box-shadow: 0 5px 13px rgba(37,65,45,.12); }
.mini-seat.occupied > span { background: linear-gradient(145deg, #4e755e, #274e3b); box-shadow: 0 3px 8px rgba(26,62,43,.14); }
.table-card-foot { border-color: #e6ebe2; }
.open-arrow { transition: transform .2s; }
.table-card:hover .open-arrow { transform: translateX(2px); color: #9a7737; }
.recover-banner { border-radius: 13px; background: rgba(232,240,225,.8); box-shadow: var(--shadow-soft); }

/* 牌桌工具栏与桌面 */
.game { max-width: 1800px; padding-bottom: 12px; }
.game-toolbar { height: 70px; }
.scoreboard { padding: 6px 13px; border: 1px solid rgba(211,221,209,.75); border-radius: 12px; background: rgba(255,255,255,.48); }
.score-team b { font-family: "Avenir Next", "DIN Alternate", Georgia, serif; font-weight: 650; }
.current-level { padding: 6px 13px; border: 1px solid #e0d4b7; border-radius: 12px; background: linear-gradient(135deg, rgba(255,253,245,.8), rgba(244,238,219,.65)); box-shadow: 0 3px 12px rgba(92,72,30,.04); }
.current-level strong { color: #705522; font-family: "Avenir Next", Georgia, serif; }
.game-tools { gap: 5px; }
.game-tools .quiet { color: #63766a; }
.game .playfield { height: calc(100dvh - 166px); min-height: 500px; }
.game .felt {
  inset: 27px 92px 12px;
  border: 1px solid rgba(225,199,135,.45);
  border-radius: 180px;
  background:
    radial-gradient(ellipse at 50% 8%, rgba(88,145,112,.35), transparent 55%),
    repeating-linear-gradient(38deg, rgba(255,255,255,.008) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, #1b5942, #0f4232 65%, #0b382b);
  box-shadow:
    0 0 0 7px #173f31,
    0 0 0 8px rgba(190,164,103,.35),
    0 22px 48px rgba(23,55,41,.16),
    inset 0 2px 2px rgba(255,255,255,.06),
    inset 0 -30px 70px rgba(0,0,0,.12);
}
.game .felt::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 25%, rgba(255,255,255,.035) 45%, transparent 62%);
  transform: translateX(-75%);
  animation: table-sheen 13s ease-in-out infinite;
}
.game .felt::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 80px rgba(0,0,0,.09); }
.game .felt-inner { inset: 13px; border: 1px solid rgba(226,207,155,.15); border-radius: 166px; }
.table-watermark { opacity: .85; }
.table-watermark .felt-logo { opacity: .16; }
.table-watermark > span { text-shadow: 0 2px 12px rgba(0,0,0,.12); }
.game .table-top-label { top: -10px; padding: 3px 13px; border: 1px solid #dbe4d8; border-radius: 20px; background: rgba(247,249,244,.96); color: #718174; box-shadow: 0 3px 9px rgba(30,56,43,.05); }
.game .field-meta { color: #a9c0aa; }
.game .trick-center, .game .result { filter: drop-shadow(0 4px 12px rgba(0,0,0,.08)); }

/* 玩家状态 */
.game .player-2 {
  top: -2px;
  padding: 8px 13px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 16px;
  background: rgba(250,252,247,.94);
  box-shadow: 0 8px 24px rgba(20,52,38,.12);
  backdrop-filter: blur(10px);
}
.game .player-1, .game .player-3 {
  padding: 11px 8px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 16px;
  background: rgba(250,252,247,.87);
  color: var(--ink);
  box-shadow: 0 8px 22px rgba(20,52,38,.09);
  backdrop-filter: blur(10px);
}
.avatar { border: 2px solid rgba(255,255,255,.9); box-shadow: 0 3px 10px rgba(24,55,39,.14); }
.avatar.jade { background: linear-gradient(145deg, #e1eddc, #bfd4b8); color: #365e3f; }
.avatar.orange { background: linear-gradient(145deg, #f4e6d5, #e6c9ac); color: #975f38; }
.player-info strong { font-weight: 600; letter-spacing: .01em; }
.player-info > div, .player-info small, .relation { color: #748578; }
.game .player.acting { border-color: rgba(218,184,107,.85); box-shadow: 0 8px 25px rgba(20,52,38,.1), 0 0 0 3px rgba(218,184,107,.12); }
.acting .avatar { outline: 0; animation: turn-avatar 2s ease-in-out infinite; }
.thinking-dot { background: #e0b75d; border-color: #fff; animation: thinking 1.2s ease-in-out infinite; }
.card-back { border-color: #d9d5c5; border-radius: 5px; background: linear-gradient(145deg, #fffef7, #ebe9de); box-shadow: 0 3px 7px rgba(4,33,24,.18); }
.card-back::before { border-color: rgba(179,150,87,.35); }

/* 公开出牌 */
.seat-play-label {
  width: max-content;
  max-width: 100%;
  height: 22px;
  margin: 0 auto 5px;
  padding: 2px 9px;
  border: 1px solid rgba(224,235,214,.12);
  border-radius: 20px;
  background: rgba(3,31,23,.38);
  color: #d8e4d1;
  backdrop-filter: blur(8px);
}
.seat-play-1 .seat-play-label { margin-right: 0; }
.seat-play-3 .seat-play-label { margin-left: 0; }
.seat-play-type { color: #b5c9ae; }
.seat-play-label b { border-radius: 10px; background: linear-gradient(135deg, #f0d797, #d6b363); color: #4c3a1b; }
.seat-play .small-card {
  width: 40px;
  height: 56px;
  margin-right: -16px;
  border-color: rgba(255,255,255,.75);
  border-radius: 5px;
  opacity: .9;
  box-shadow: -2px 4px 8px rgba(2,27,20,.2);
}
.seat-play.current-play .small-card { box-shadow: 0 0 0 1px #e0c478, -2px 5px 12px rgba(2,27,20,.28); }
.seat-play.current-play .seat-play-label { border-color: rgba(231,204,137,.32); background: rgba(79,62,25,.4); color: #f4e4b5; }
.pass-word, .lead-word { width: max-content; margin: 5px auto 0; padding: 4px 13px; border: 1px solid rgba(223,234,211,.12); border-radius: 20px; background: rgba(4,34,25,.28); }
.seat-play-1 .pass-word, .seat-play-1 .lead-word { margin-right: 0; }
.seat-play-3 .pass-word, .seat-play-3 .lead-word { margin-left: 0; }

/* 倒计时 */
.hand-front { min-height: 78px; margin-bottom: 5px; }
.game .hand-front .turn-clock {
  --clock-ratio: 1;
  overflow: hidden;
  min-width: 202px;
  padding: 9px 17px 10px;
  border: 1px solid rgba(214,224,200,.85);
  border-radius: 14px;
  background: rgba(244,248,237,.94);
  color: #365440;
  box-shadow: 0 8px 22px rgba(3,31,23,.18), inset 0 1px rgba(255,255,255,.7);
  backdrop-filter: blur(12px);
}
.game .hand-front .turn-clock::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 0; height: 2px; border-radius: 2px; background: currentColor; opacity: .55; transform: scaleX(var(--clock-ratio)); transform-origin: left; transition: transform .25s linear; }
.game .hand-front .turn-clock small { font-size: 12px; font-weight: 600; }
.game .hand-front .turn-clock strong { font-family: "DIN Alternate", "Avenir Next", var(--font); font-size: 40px; font-weight: 700; letter-spacing: -.03em; }
.game .hand-front .turn-clock.own-turn { border-color: #e2c274; background: linear-gradient(135deg, #fff4cf, #ecd294); color: #624717; box-shadow: 0 8px 24px rgba(55,39,7,.2), 0 0 0 3px rgba(232,201,123,.1); }
.game .hand-front .turn-clock.urgent { border-color: #e49a76; background: linear-gradient(135deg, #fff2e8, #f3c3a6); color: #a44125; animation: urgent-clock 1s ease-in-out infinite; }

/* 手牌与操作 */
.game .hand-zone { bottom: 15px; }
.floating-hand .hand-toolbar strong { color: #f4f3e7; font-weight: 550; letter-spacing: .03em; }
.floating-hand .hand-toolbar strong span { color: #efd99e; }
.floating-hand .hand-help { color: #b4c8ae; }
.floating-hand .tool {
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 8px;
  background: rgba(242,247,236,.9);
  color: #345341;
  box-shadow: 0 3px 8px rgba(3,30,22,.08);
}
.floating-hand .tool:hover:not(:disabled) { background: #fffdf4; border-color: #e3cd91; box-shadow: 0 5px 12px rgba(3,30,22,.15); }
.floating-hand .hand-scroll { scrollbar-color: rgba(213,226,197,.35) transparent; }
.floating-hand .hand-scroll::-webkit-scrollbar, .seat-play .played-cards::-webkit-scrollbar { height: 4px; }
.floating-hand .hand-scroll::-webkit-scrollbar-thumb, .seat-play .played-cards::-webkit-scrollbar-thumb { border-radius: 4px; background: rgba(213,226,197,.35); }
.floating-hand .hand .card, .seat-play .small-card {
  border: 1px solid rgba(81,83,68,.24);
  background: linear-gradient(145deg, #ffffff 0%, #fffdf7 56%, #f0eee5 100%);
  box-shadow: -2px 3px 6px rgba(4,31,23,.18), inset 0 0 0 1px rgba(255,255,255,.65);
}
.floating-hand .hand .card { border-radius: 9px; transition: transform .24s var(--ease-out), box-shadow .24s, border-color .2s, background .2s; }
.card-corner b { font-weight: 700; text-shadow: 0 1px rgba(255,255,255,.6); }
.card-center { opacity: .24; }
.floating-hand .card.wild { border-color: #d7b563; background: linear-gradient(145deg, #fffdf0, #f7e8bb); color: #a87618; box-shadow: -2px 3px 8px rgba(61,42,5,.2), inset 0 0 0 1px rgba(255,255,255,.55); }
.wild-label { border-radius: 5px; background: linear-gradient(135deg, #c29336, #a87920); box-shadow: 0 2px 4px rgba(91,59,5,.15); }
.floating-hand .hand-columns .loose-cards .card:hover:not(:disabled):not(.selected) { transform: translateY(-9px); border-color: #b8c9ad; background: linear-gradient(145deg, #fff, #f4f8ed); box-shadow: -2px 10px 18px rgba(3,29,21,.26); }
.floating-hand .hand .card.selected { transform: translate(-6px,-18px); border-color: #d2aa4f; background: linear-gradient(145deg, #fffef6, #f9ebc8); box-shadow: 0 0 0 2px #f0d589, 0 11px 23px rgba(3,29,21,.32); }
.floating-hand .hand .card.selected::after { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(190,145,48,.32); border-radius: 6px; pointer-events: none; }
.floating-hand .hand .card-stack .card { border-radius: 7px; }
.floating-hand .hand .card-stack .card.selected { transform: translateX(-4px); box-shadow: inset 0 0 0 2px #d5b15e, -2px 3px 7px rgba(3,29,21,.18); }
.floating-hand .hand .card-stack.selected-stack .card.selected { transform: none; }
.card-stack.selected-stack { transform: translateY(-9px); }
.card-stack .stack-label { border-color: rgba(255,255,255,.65); border-radius: 7px; background: rgba(242,247,235,.94); color: #36543f; box-shadow: 0 3px 8px rgba(3,29,21,.12); transition: transform .2s, background .2s, border-color .2s; }
.card-stack .stack-label:hover:not(:disabled) { transform: translateY(-2px); background: #fffdf4; border-color: #d9bd79; }
.card-stack.selected-stack .stack-label { background: linear-gradient(135deg, #f2dda4, #ddbd73); border-color: #f2dda4; color: #5c431d; }
.manual-arrange { border-radius: 10px; background: linear-gradient(135deg, #efd796, #d9b86d); border-color: #f0dca9; box-shadow: 0 4px 12px rgba(3,29,21,.14); }
.floating-hand .selection-description { color: #e0d7ac; }
.floating-hand .flush-shortcuts > span { color: #b5c8ab; letter-spacing: .06em; }
.floating-hand .flush-button { border: 1px solid rgba(255,255,255,.5); border-radius: 9px; background: rgba(242,247,236,.92); box-shadow: 0 3px 8px rgba(3,29,21,.08); }
.floating-hand .flush-button.available:hover { transform: translateY(-2px); border-color: currentColor; box-shadow: 0 6px 13px rgba(3,29,21,.17); }
.floating-hand .flush-button:not(.available) { background: rgba(194,211,182,.12); border-color: rgba(213,226,197,.14); color: #b5c5aa; }
.floating-hand .play-actions .btn { border-radius: 10px; }
.floating-hand .play-actions .secondary { background: rgba(242,247,236,.94); border-color: rgba(255,255,255,.55); }
.floating-hand .play-actions .primary { border-color: #f1d895; background: linear-gradient(135deg, #f0d894, #d8b667); color: #493716; box-shadow: 0 5px 15px rgba(3,29,21,.2); }
.floating-hand .play-actions .primary:hover:not(:disabled) { background: linear-gradient(135deg, #f8e5ae, #e2c279); box-shadow: 0 8px 20px rgba(3,29,21,.28); }
.floating-hand .play-actions .primary:disabled { border-color: rgba(200,214,187,.15); background: rgba(174,195,158,.25); color: #bdcdb3; box-shadow: none; }

/* 浮层 */
.record-panel { top: 88px; border: 1px solid rgba(255,255,255,.8); border-radius: 18px; background: rgba(255,254,249,.94); box-shadow: 0 24px 70px rgba(15,46,33,.2); backdrop-filter: blur(20px); animation: panel-in .3s var(--ease-out); }
#toast { border: 1px solid rgba(235,215,163,.28); border-radius: 12px; background: rgba(13,51,39,.96); box-shadow: 0 12px 35px rgba(7,34,24,.25); backdrop-filter: blur(12px); }
dialog { border: 1px solid rgba(255,255,255,.8); border-radius: 20px; background: #fffef9; box-shadow: 0 28px 90px rgba(10,42,30,.28); }
dialog[open] { animation: dialog-in .3s var(--ease-out); }
dialog::backdrop { background: rgba(6,35,25,.58); backdrop-filter: blur(4px); }
.icon-close { border-radius: 50%; transition: background .2s, transform .2s; }
.icon-close:hover { background: #edf1e9; transform: rotate(5deg); }
.control-banner { border-radius: 14px; background: rgba(255,246,218,.96); box-shadow: 0 12px 35px rgba(40,49,22,.18); }

@keyframes rise-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes card-arrive { from { opacity: 0; translate: -15px 35px; } to { opacity: 1; translate: 0 0; } }
@keyframes gentle-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes live-pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(85,162,113,.08); } 50% { box-shadow: 0 0 0 6px rgba(85,162,113,.03); } }
@keyframes table-sheen { 0%,68% { transform: translateX(-75%); } 88%,100% { transform: translateX(75%); } }
@keyframes turn-avatar { 0%,100% { box-shadow: 0 3px 10px rgba(24,55,39,.14), 0 0 0 3px rgba(226,190,109,.22); } 50% { box-shadow: 0 3px 10px rgba(24,55,39,.14), 0 0 0 6px rgba(226,190,109,.06); } }
@keyframes thinking { 0%,100% { transform: scale(.8); opacity: .65; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes played-card-in { from { opacity: 0; translate: 0 -12px; } to { opacity: .9; translate: 0 0; } }
@keyframes urgent-clock { 0%,100% { box-shadow: 0 8px 22px rgba(70,25,10,.18); } 50% { box-shadow: 0 8px 25px rgba(151,55,25,.28), 0 0 0 4px rgba(228,154,118,.12); } }
@keyframes panel-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 1100px) and (min-width: 701px) {
  .game .felt { inset-inline: 73px; border-radius: 145px; }
  .game .felt-inner { border-radius: 132px; }
  .game .player-1, .game .player-3 { padding-inline: 5px; }
  .scoreboard { padding-inline: 8px; }
  .current-level { padding-inline: 9px; }
}

@media (max-width: 700px) {
  .topbar { height: 66px; padding-inline: 13px; }
  .brand-mark { width: 37px; height: 32px; padding: 3px; border-radius: 9px; }
  .brand-mark img { width: 30px; height: 24px; }
  .brand { letter-spacing: .8px; }
  .entry { grid-template-columns: 1fr; }
  .entry-art { min-height: 300px; }
  .entry-copy { margin-top: 31px; }
  .entry-copy h1 { font-size: 27px; letter-spacing: 1.5px; }
  .entry-copy h1::after { margin-top: 15px; }
  .entry-cards { animation: none; }
  .form-inner h2 { font-size: 26px; }
  .lobby { padding-top: 30px; }
  .lobby-heading h1 { font-size: 25px; }
  .lobby-status { padding: 6px 8px; background: rgba(255,255,255,.45); }
  .table-card { border-radius: 17px; }
  .table-card:hover { transform: none; }
  .game-toolbar { min-height: 78px; }
  .scoreboard { padding: 4px 8px; border-radius: 9px; }
  .current-level { padding: 4px 8px; border-radius: 9px; }
  .game .playfield { height: calc(100dvh - 156px); min-height: 580px; }
  .game .felt {
    inset: 25px 0 0;
    border-radius: 90px;
    box-shadow: 0 0 0 4px #173f31, 0 0 0 5px rgba(190,164,103,.3), 0 15px 32px rgba(23,55,41,.14), inset 0 -25px 50px rgba(0,0,0,.1);
  }
  .game .felt-inner { inset: 8px; border-radius: 80px; }
  .game .table-top-label { top: -9px; }
  .game .player-2 { top: -2px; padding: 5px 8px; border-radius: 12px; }
  .game .player-1, .game .player-3 {
    top: 23%;
    padding: 7px 3px;
    border-color: rgba(229,236,215,.16);
    border-radius: 12px;
    background: rgba(4,38,28,.5);
    color: #edf2e5;
    box-shadow: 0 6px 15px rgba(2,25,18,.12);
  }
  .game .player-1 .player-info strong, .game .player-3 .player-info strong { color: #f0f3e8; }
  .game .player-1 .player-info > div, .game .player-3 .player-info > div,
  .game .player-1 .player-info small, .game .player-3 .player-info small,
  .game .player-1 .relation, .game .player-3 .relation { color: #bed0b6; }
  .game .player.acting { border-color: rgba(227,191,111,.6); }
  .seat-play-label { height: 19px; padding: 1px 6px; }
  .seat-play .small-card { width: 33px; height: 47px; border-radius: 4px; }
  .game .hand-front .turn-clock { min-width: 148px; padding: 8px 11px 9px; border-radius: 12px; }
  .game .hand-front .turn-clock strong { font-size: 34px; }
  .floating-hand .hand .card { border-radius: 7px; }
  .floating-hand .hand-columns .loose-cards .card:hover:not(:disabled):not(.selected) { transform: none; }
  .floating-hand .hand .card.selected { transform: translate(-4px,-15px); }
  .record-panel { top: 76px; right: 12px; bottom: 12px; }
}

@media (max-width: 380px) {
  .brand small { letter-spacing: .7px; }
  .top-actions { gap: 2px; }
  .game-tools { gap: 0; }
  .game .hand-front .turn-clock { min-width: 140px; gap: 6px; padding-inline: 9px; }
  .floating-hand .flush-button { min-width: 43px; }
}

@media (max-height: 600px) and (min-width: 701px) {
  .game .playfield { height: calc(100dvh - 128px); min-height: 380px; }
  .game .felt { top: 22px; }
  .game .hand-zone { bottom: 9px; }
  .hand-front { min-height: 64px; }
  .game .hand-front .turn-clock { padding-block: 6px 7px; }
}

@media (hover: none) {
  .table-card:hover, .btn:hover:not(:disabled) { transform: none; }
  .floating-hand .hand-columns .loose-cards .card:hover:not(:disabled):not(.selected) { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .entry-cards, .game .felt::before, .connection b, .live-dot, .acting .avatar, .thinking-dot, .game .hand-front .turn-clock.urgent { animation: none !important; }
}

/* 王牌与级牌标识：Joker 角标、居中品牌 Logo、竖排级牌。 */
.card.joker .card-corner b {
  font-family: "Avenir Next", "Trebuchet MS", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.1;
}
.card.joker .card-center {
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  width: 38px;
  height: 29px;
  transform: translate(-50%, -50%);
  opacity: 1;
}
.card .level-label {
  position: absolute;
  z-index: 2;
  left: 6px;
  top: 47px;
  padding: 3px 2px;
  border: 1px solid rgba(184,145,59,.36);
  border-radius: 3px;
  background: rgba(250,239,203,.9);
  color: #8b6420;
  font: 600 9px/1.05 var(--font);
  letter-spacing: 1px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  box-shadow: 0 1px 3px rgba(73,51,10,.08);
  pointer-events: none;
}
.card.wild .level-label { background: rgba(244,221,151,.94); color: #815a15; }
.floating-hand .hand .card-stack .card.joker .card-corner b {
  font-size: 8px;
  line-height: var(--stack-step);
  letter-spacing: -.06em;
}
.floating-hand .hand .card-stack .level-label { display: none; }
.floating-hand .hand .card-stack .card:last-child .level-label {
  display: block;
  left: 5px;
  top: 32px;
  font-size: 8px;
}
.seat-play .card.joker .card-corner b { font-size: 7px; line-height: 10px; letter-spacing: -.06em; }
.seat-play .card.joker .card-center {
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  width: 23px;
  height: 17px;
  transform: translate(-50%, -50%);
}
.seat-play .small-card .level-label {
  left: 3px;
  top: 32px;
  padding: 1px;
  border-radius: 2px;
  font-size: 6px;
  letter-spacing: 0;
}
@media (max-width: 700px) {
  .floating-hand .hand .card.joker .card-corner b { font-size: 9px; }
  .floating-hand .hand .card.joker .card-center { width: 32px; height: 24px; }
  .floating-hand .hand .card .level-label { left: 5px; top: 45px; font-size: 8px; }
  .floating-hand .hand .card-stack .card.joker .card-corner b { font-size: 7px; }
  .floating-hand .hand .card-stack .card:last-child .level-label { top: 28px; font-size: 7px; }
}

/* 手牌操作收进桌内，主行动与花色快捷入口保持清晰。 */
.game .hand-zone { left: 120px; right: 120px; bottom: 30px; }
.floating-hand .flush-shortcuts {
  gap: 6px;
  padding: 3px;
  border: 1px solid rgba(223,234,211,.14);
  border-radius: 12px;
  background: rgba(4,35,26,.42);
  backdrop-filter: blur(8px);
}
.floating-hand .flush-button {
  width: 38px;
  min-width: 38px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 8px;
  font-size: 24px;
  line-height: 1;
}
.floating-hand .play-actions {
  gap: 7px;
  padding: 3px;
  border: 1px solid rgba(223,234,211,.14);
  border-radius: 13px;
  background: rgba(4,35,26,.42);
  backdrop-filter: blur(8px);
}
.floating-hand .play-actions #play-button {
  min-width: 112px;
  min-height: 42px;
  padding-inline: 20px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .12em;
}
.floating-hand .play-actions #play-button:not(:disabled) {
  border-color: #ffe4a0;
  background: linear-gradient(135deg, #ffe7a4, #dfad4f);
  color: #3f2c0d;
  box-shadow: 0 0 0 2px rgba(255,222,143,.14), 0 7px 20px rgba(3,25,17,.32);
  animation: play-ready 2.8s ease-in-out infinite;
}
@keyframes play-ready {
  0%,100% { box-shadow: 0 0 0 2px rgba(255,222,143,.12), 0 7px 20px rgba(3,25,17,.3); }
  50% { box-shadow: 0 0 0 4px rgba(255,222,143,.06), 0 9px 24px rgba(3,25,17,.38); }
}
@media (max-width: 1100px) and (min-width: 701px) {
  .game .hand-zone { left: 92px; right: 92px; bottom: 27px; }
}
@media (max-width: 700px) {
  .game .hand-zone { left: 16px; right: 16px; bottom: 22px; }
  .floating-hand .flush-shortcuts { gap: 5px; }
  .floating-hand .flush-button { width: 32px; min-width: 32px; height: 32px; min-height: 32px; font-size: 21px; }
  .floating-hand .play-actions #play-button { min-width: 96px; min-height: 38px; padding-inline: 15px; font-size: 14px; }
}
@media (max-width: 380px) {
  .game .hand-zone { left: 12px; right: 12px; bottom: 20px; }
}
@media (max-height: 600px) and (min-width: 701px) {
  .game .hand-zone { bottom: 19px; }
}

/* 回合倒计时跟随玩家；名次与低张数提示直接落在座位上。 */
.game .player .turn-clock {
  position: absolute;
  z-index: 8;
  left: auto;
  right: -10px;
  top: -10px;
  bottom: auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  min-width: 42px;
  max-width: 42px;
  margin: 0;
  padding: 0;
  border: 2px solid #dbe4d2;
  border-radius: 50%;
  background: rgba(244,248,237,.97);
  color: #365440;
  box-shadow: 0 5px 15px rgba(3,29,21,.2);
  text-align: center;
}
.game .player .turn-clock.own-turn { border-color: #e2bd60; background: linear-gradient(145deg,#fff0bc,#e5c16a); color: #624717; }
.game .player .turn-clock.urgent { border-color: #df8b61; background: #f7c5a7; color: #9b361e; }
.game .player .turn-clock .clock-value { display: flex; align-items: baseline; justify-content: center; gap: 1px; }
.game .player .turn-clock strong {
  display: block;
  width: auto;
  min-width: 0;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: 700 20px/1 "DIN Alternate","Avenir Next",var(--font);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
}
.game .player .turn-clock .clock-value > span { font-size: 7px; }
.player-info small:empty { display: none; }
.player .finish-badge {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: -11px;
  transform: translateX(-50%);
  padding: 3px 10px;
  border: 1px solid #f2d997;
  border-radius: 20px;
  background: linear-gradient(135deg,#f4dda0,#d9b45f);
  color: #533b13;
  box-shadow: 0 4px 12px rgba(3,29,21,.2);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .08em;
  white-space: nowrap;
}
.player-2 .finish-badge { top: auto; bottom: -11px; }
.finished-player .avatar { box-shadow: 0 0 0 3px rgba(226,190,109,.24),0 3px 10px rgba(24,55,39,.14); }
@media (max-width: 700px) {
  .game .player .turn-clock { right: -8px; top: -8px; width: 34px; height: 34px; min-width: 34px; max-width: 34px; border-width: 1px; }
  .game .player .turn-clock strong { font-size: 16px; }
  .game .player .turn-clock .clock-value > span { font-size: 6px; }
  .player .finish-badge { top: -9px; padding: 2px 7px; font-size: 9px; }
  .player-2 .finish-badge { top: auto; bottom: -9px; }
}

/* 自己回合中央提醒、竖叠花色与手牌上方主操作。 */
.own-clock-wrap { position: absolute; z-index: 6; left: 50%; top: 29%; transform: translate(-50%,-50%); pointer-events: none; }
.game .own-clock-wrap .turn-clock {
  position: relative;
  inset: auto;
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  min-width: 86px;
  max-width: 86px;
  margin: 0;
  padding: 0;
  border: 3px solid #f0cd75;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%,#fff5cf,#e5bd60 72%);
  color: #5a3d0d;
  box-shadow: 0 0 0 7px rgba(239,204,117,.12),0 12px 32px rgba(3,29,21,.32);
  text-align: center;
}
.game .own-clock-wrap .turn-clock.urgent { border-color: #e58a5c; background: radial-gradient(circle at 35% 25%,#fff0df,#efa678 72%); color: #8f2f17; animation: urgent-clock 1s ease-in-out infinite; }
.game .own-clock-wrap .turn-clock .clock-value { display: flex; align-items: baseline; justify-content: center; gap: 3px; }
.game .own-clock-wrap .turn-clock strong {
  display: block;
  width: auto;
  min-width: 0;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: 750 42px/1 "DIN Alternate","Avenir Next",var(--font);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.05em;
}
.game .own-clock-wrap .turn-clock .clock-value > span { font-size: 10px; font-weight: 600; }
.hand-front:empty { display: none; }
.floating-hand .play-actions-top {
  position: relative;
  z-index: 6;
  width: max-content;
  max-width: 100%;
  margin: 3px auto 5px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  justify-content: center;
}
.floating-hand .play-actions-top .btn { min-height: 36px; }
.hand-secondary { display: flex; align-items: center; gap: 8px; }
.floating-hand .hand-secondary .quiet { color: #d0ddbd; }
.floating-hand .hand-secondary .quiet:hover:not(:disabled) { background: rgba(220,233,201,.12); }
.floating-hand .hand-bottom { flex-direction: row; align-items: center; justify-content: space-between; }
.floating-hand .hand .card-stack .card-corner {
  top: 0;
  left: 5px;
  display: flex;
  align-items: center;
  gap: 3px;
  line-height: var(--stack-step);
}
.floating-hand .hand .card-stack .card-corner b,
.floating-hand .hand .card-stack.dense-stack .card-corner b { font-size: min(15px,calc(var(--stack-step) - 1px)); line-height: var(--stack-step); }
.floating-hand .hand .card-stack .card-corner i {
  display: block;
  height: auto;
  font-size: min(13px,calc(var(--stack-step) - 4px));
  font-style: normal;
  line-height: var(--stack-step);
}
@media (max-width: 700px) {
  .own-clock-wrap { top: 31%; }
  .game .own-clock-wrap .turn-clock { width: 66px; height: 66px; min-width: 66px; max-width: 66px; border-width: 2px; box-shadow: 0 0 0 5px rgba(239,204,117,.1),0 9px 24px rgba(3,29,21,.28); }
  .game .own-clock-wrap .turn-clock strong { font-size: 32px; }
  .game .own-clock-wrap .turn-clock .clock-value > span { font-size: 8px; }
  .floating-hand .play-actions-top { gap: 5px; margin: 2px auto 3px; padding: 2px; }
  .floating-hand .play-actions-top .btn { min-height: 34px; }
  .floating-hand .hand-bottom { gap: 8px; }
  .floating-hand .hand .card-stack .card-corner { left: 4px; gap: 2px; }
  .floating-hand .hand .card-stack .card-corner b,
  .floating-hand .hand .card-stack.dense-stack .card-corner b { font-size: min(12px,calc(var(--stack-step) - 1px)); }
  .floating-hand .hand .card-stack .card-corner i { font-size: min(10px,calc(var(--stack-step) - 3px)); }
}

/* ---- 2026-10-31：工具栏右侧按钮下移 + 托管机器人 ---- */
/* 按大小 / 一键理牌 / 托管 这组按钮原来紧贴右侧牌友的座位卡片，整体下移一点让出位置 */
.floating-hand .hand-toolbar > div:last-child { transform: translateY(12px); }
@media (max-width: 700px) { .floating-hand .hand-toolbar > div:last-child { transform: translateY(8px); } }
/* 托管中的标记：小机器人在座位信息里左右摇晃，托管结束后随标记一起消失 */
.auto-flag { display: inline-flex; align-items: center; gap: 3px; color: #f0d79a; font-weight: 600; letter-spacing: .02em; }
.bot-sway { width: 13px; height: 13px; display: block; flex: none; transform-origin: 50% 90%; animation: bot-sway 1.5s ease-in-out infinite; }
@keyframes bot-sway { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
@media (prefers-reduced-motion: reduce) { .bot-sway { animation: none; } }

/* ---- 2026-10-31：手机浏览器直接打开的补丁 ---- */
/* 同事用手机浏览器访问时：去掉点按高亮、iOS 长按弹菜单、下拉回弹，手牌区避开底部安全区 */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.connection[data-status="connecting"] b,
.connection[data-status="reconnecting"] b { background: #b47b25; }
.connection[data-status="offline"] b { background: #b13c42; }
body { overscroll-behavior-y: none; }
button, a, .card, .seat-play-label { -webkit-tap-highlight-color: transparent; }
.card, .hand-toolbar, .seat-play-label, .stack-label { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
@media (max-width: 700px) {
  .topbar { height: calc(68px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
  .game { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .hand-tray { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .hand-scroll { overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  dialog { max-height: calc(85vh - env(safe-area-inset-bottom)); }
}

/* Confirmed special plays: a brief, non-interactive celebration above the felt.
   Kept outside #app so state/selection renders cannot restart the animation. */
.play-effect {
  --effect-gold: #ffe4a0;
  position: fixed; z-index: 15; height: 224px;
  transform: translate(-50%, -50%); pointer-events: none; user-select: none;
  isolation: isolate; animation: effect-lifetime 1600ms both;
}
.play-effect *, .play-effect *::before, .play-effect *::after { pointer-events: none; }
.effect-title {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff0bb; font-family: "Songti SC", "STSong", "SimSun", serif;
  font-size: 64px; font-weight: 900; letter-spacing: .14em; padding-left: .14em;
  line-height: 1.2; white-space: nowrap;
  text-shadow: 0 2px 0 #b46c26, 0 4px 0 #713c20, 0 7px 16px #20140acc, 0 0 28px #f9ae4c99;
}
.effect-aura {
  position: absolute; inset: 12px 0; z-index: -1; border-radius: 50%;
  background: radial-gradient(ellipse, #c1843e9e, #47391499 42%, transparent 71%);
}
.effect-bomb .effect-title { animation: bomb-title 650ms cubic-bezier(.16,1,.3,1) both; }
.effect-bomb .effect-aura { animation: bomb-aura 1200ms ease-out both; }
.effect-burst {
  position: absolute; width: 200px; height: 160px; left: calc(50% - 100px); top: calc(50% - 80px); z-index: -1;
  background: radial-gradient(ellipse, #fff6c2, #f7b243 37%, #d66a2544 65%, transparent 72%);
  clip-path: polygon(50% 0,58% 27%,77% 8%,73% 35%,100% 30%,81% 50%,100% 72%,72% 69%,78% 96%,57% 78%,47% 100%,40% 75%,17% 94%,25% 66%,0 72%,18% 51%,0 29%,29% 34%,24% 7%,43% 27%);
  animation: bomb-burst 800ms ease-out both;
}
.effect-shockwave {
  position: absolute; width: 186px; height: 132px; left: calc(50% - 93px); top: calc(50% - 66px);
  border: 2px solid #ffdd8d; border-radius: 50%;
  box-shadow: 0 0 16px #ffc96588, inset 0 0 14px #ffc96555;
  animation: bomb-wave 900ms cubic-bezier(.16,1,.3,1) both;
}
.effect-shockwave-late { animation-delay: 140ms; border-width: 1px; }
.effect-spark {
  position: absolute; left: 50%; top: 50%; width: 14px; height: 3px; border-radius: 50%;
  background: #ffe7a1; box-shadow: 0 0 7px #ffb34e;
  animation: bomb-spark 850ms var(--delay) cubic-bezier(.15,.65,.25,1) both;
}
.effect-flush { animation-duration: 2000ms; }
.effect-flush .effect-aura { background: radial-gradient(ellipse, #e5c87344, #0a352bd9 46%, transparent 72%); }
.effect-flush .effect-title {
  inset: 2px 0 auto; height: 75px; font-size: 43px; letter-spacing: .2em;
  animation: flush-title 500ms 180ms both;
}
.effect-card-row { position: absolute; inset: 86px 0 auto; height: 94px; display: flex; justify-content: center; gap: 7px; perspective: 700px; }
.effect-card-slot { position: relative; animation: flush-card 540ms calc(var(--i) * 110ms) cubic-bezier(.2,.8,.2,1) both; }
.effect-card-row .card {
  width: 61px; height: 87px; margin: 0; border-radius: 7px; opacity: 1;
  border: 1px solid #eed392; box-shadow: 0 7px 18px #001d22aa, 0 0 0 1px #ffe9a338;
  animation: none; transform: none;
}
.effect-card-row .card-corner { top: 6px; left: 7px; }
.effect-card-row .card-corner b { font-size: 23px; }
.effect-card-row .card-corner i { font-size: 19px; }
.effect-card-row .card-center { font-size: 31px; right: 7px; bottom: 6px; }
.effect-card-row .mapped { bottom: 3px; left: auto; right: 3px; font-size: 8px; }
.effect-flush-line {
  position: absolute; left: 13%; right: 13%; top: 190px; height: 1px;
  background: linear-gradient(90deg, transparent, #ffe5a2, transparent);
  box-shadow: 0 0 10px #e6d29c99; animation: flush-line 650ms 360ms both;
}
@keyframes effect-lifetime { 0%, 76% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bomb-title { 0% { opacity: 0; transform: scale(.5) rotate(-8deg); } 45% { opacity: 1; transform: scale(1.12) rotate(2deg); } 70% { transform: scale(.97) rotate(-1deg); } 100% { transform: scale(1); } }
@keyframes bomb-aura { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: 1; } 100% { opacity: .6; transform: scale(1.12); } }
@keyframes bomb-burst { 0% { opacity: 0; transform: scale(.1) rotate(-15deg); } 22% { opacity: .9; } 100% { opacity: 0; transform: scale(1.5) rotate(8deg); } }
@keyframes bomb-wave { 0% { opacity: 0; transform: scale(.2); } 15% { opacity: .9; } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes bomb-spark { 0% { opacity: 0; transform: translate(0,0) rotate(var(--angle)) scaleX(.3); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx),var(--dy)) rotate(var(--angle)) scaleX(.25); } }
@keyframes flush-title { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes flush-card { from { opacity: 0; transform: translateX(calc((2 - var(--i)) * 42px - 35px)) translateY(17px) rotateY(-32deg) rotate(-8deg); } to { opacity: 1; transform: translateX(0) translateY(0) rotateY(0) rotate(0); } }
@keyframes flush-line { from { opacity: 0; transform: scaleX(.1); } to { opacity: 1; transform: scaleX(1); } }
@media (max-width: 700px) {
  .effect-title { font-size: 51px; }
  .effect-flush .effect-title { font-size: 35px; }
  .effect-card-row { gap: 5px; }
  .effect-card-row .card { width: 48px; height: 73px; }
  .effect-card-row .card-corner b { font-size: 20px; }
  .effect-card-row .card-corner i { font-size: 16px; }
  .effect-card-row .card-center { font-size: 26px; }
  .effect-flush-line { top: 174px; }
}
.effect-still .effect-spark, .effect-still .effect-shockwave, .effect-still .effect-burst { display: none; }
.effect-still, .effect-still * { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .play-effect .effect-spark, .play-effect .effect-shockwave, .play-effect .effect-burst { display: none; }
}

/* Larger public plays: keep rank/suit readable at every seat. */
.seat-play { width: 300px; }
.game .hand-front .seat-play-0 { width: 300px; }
.seat-play .played-cards { min-height: 80px; padding-bottom: 6px; }
.seat-play-1 .played-cards { justify-content: safe flex-end; }
.seat-play .small-card {
  width: 50px; height: 72px; margin-right: -23px;
  border-radius: 6px; opacity: 1;
}
.seat-play .small-card:last-child { margin-right: 0; }
.seat-play .small-card .card-corner { left: 4px; top: 5px; }
.seat-play .small-card .card-corner b { font-size: 21px; line-height: 22px; }
.seat-play .small-card .card-corner i { font-size: 17px; line-height: 19px; }
.seat-play .small-card .card-center { font-size: 26px; right: 5px; bottom: 5px; }
.seat-play .small-card .wild-label { font-size: 8px; right: 3px; }
.seat-play .small-card .level-label { top: 46px; left: 4px; font-size: 7px; }
.seat-play .small-card .mapped { font-size: 8px; line-height: 12px; }
.seat-play .card.joker .card-corner b { font-size: 9px; line-height: 12px; }
.seat-play .card.joker .card-center { width: 26px; height: 20px; }
@media (min-width: 701px) and (max-width: 1100px) {
  .seat-play, .game .hand-front .seat-play-0 { width: 250px; }
}
@media (max-width: 700px) {
  .seat-play { width: 220px; }
  .seat-play-1, .seat-play-3 { width: clamp(88px, calc(50% - 64px), 124px); }
  .seat-play-1 { right: 64px; }
  .seat-play-3 { left: 64px; }
  .game .hand-front .seat-play-0 { width: auto; max-width: 220px; }
  .seat-play .played-cards { min-height: 71px; }
  .seat-play .small-card { width: 44px; height: 64px; margin-right: -22px; border-radius: 5px; }
  .seat-play .small-card .card-corner { left: 3px; top: 4px; }
  .seat-play .small-card .card-corner b { font-size: 18px; line-height: 20px; }
  .seat-play .small-card .card-corner i { font-size: 15px; line-height: 17px; }
  .seat-play .small-card .card-center { font-size: 23px; right: 4px; bottom: 4px; }
  .seat-play .small-card .level-label { top: 41px; left: 3px; }
  .seat-play .card.joker .card-center { width: 24px; height: 18px; }
}

/* Jokers use one large logo and an upright, vertical corner label. */
.card.joker .card-corner .joker-word {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .03em;
}
.card.joker .card-center,
.seat-play .card.joker .card-center {
  left: calc(50% + 5px);
  top: 44%;
  display: grid;
  place-items: center;
}
.card.joker .card-center .joker-mark { display: block; }
.seat-play .card.joker .card-corner .joker-word { font-size: 9px; line-height: 1; }
.floating-hand .hand .card-stack .card.joker .card-corner .joker-word {
  font-size: 9px;
  line-height: 1;
}
@media (max-width: 700px) {
  .card.joker .card-corner .joker-word { font-size: 10px; }
  .seat-play .card.joker .card-corner .joker-word,
  .floating-hand .hand .card-stack .card.joker .card-corner .joker-word { font-size: 8px; }
}

/* ── 登录 / 注册 ─────────────────────────────────────── */
.auth-tabs{display:flex;gap:6px;margin:-16px 0 22px;padding:4px;background:#e9e8e0;border-radius:10px}
.auth-tabs button{flex:1;border:0;background:transparent;border-radius:7px;padding:9px 0;color:#5f6c63;font-weight:500;font-size:13.5px}
.auth-tabs button.active{background:#fffefa;color:var(--green);box-shadow:0 1px 4px #1d2b2320}
.auth-hint{margin-top:16px;color:var(--muted);font-size:12.5px}
.field-note{display:block;color:var(--muted);font-size:12px;margin:-12px 0 18px}
.invite-input{letter-spacing:.14em;text-transform:uppercase;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ── 我的牌局 ────────────────────────────────────────── */
.mine{max-width:1000px;margin:0 auto;padding:34px clamp(16px,4vw,40px) 80px}
.mine-loading{padding:80px 0;text-align:center;color:var(--muted)}
.mine-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:22px}
.mine-head h1{font-size:30px;letter-spacing:-.02em;margin:10px 0 6px}
.mine-head p{color:var(--muted);font-size:13px;max-width:52ch}
.mine-back{padding-left:0;color:#5f6c63}
.mine-side{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.mine-stats{display:flex;gap:18px;background:#fffefa;border:1px solid var(--line);border-radius:12px;padding:12px 18px}
.mine-stats span{display:flex;flex-direction:column;align-items:center;font-size:11px;color:var(--muted);gap:2px}
.mine-stats b{font-size:20px;color:var(--ink);font-weight:600;line-height:1.1}
.mine-logout{font-size:12.5px;color:var(--muted)}
.mine-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px;padding:12px 14px;background:#fffefa;border:1px solid var(--line);border-radius:12px}
.mine-ranges{display:flex;gap:6px}
.mine-ranges .range-btn{padding:6px 14px;min-height:32px;font-size:13px;border-radius:7px}
.mine-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mine-format{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.mine-format select{width:auto;margin:0;padding:6px 8px;font-size:12.5px;height:32px;border-radius:7px}
.mine-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.mine-row{display:grid;grid-template-columns:44px minmax(0,1fr) 52px 52px 84px auto;align-items:center;gap:12px;padding:12px 16px;background:#fffefa;border:1px solid var(--line);border-radius:11px;transition:border-color .16s,background .16s}
.mine-row:hover{border-color:#b9c9b7}
.mine-row.picked{border-color:#7fa98b;background:#f6faf4;box-shadow:inset 3px 0 0 #4b7f5e}
.mine-check{display:flex;align-items:center;justify-content:center;cursor:pointer}
.mine-check input{appearance:none;-webkit-appearance:none;width:19px;height:19px;margin:0;border:1.5px solid #b9c2b6;border-radius:5px;background:#fff;cursor:pointer;transition:background .15s,border-color .15s}
.mine-check input:checked{background:var(--green);border-color:var(--green)}
.mine-check input:checked::after{content:"";display:block;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(4.5px,1.5px)}
.mine-main{min-width:0;display:flex;flex-direction:column;gap:3px}
.mine-main strong{font-size:14px;font-weight:600}
.mine-main small{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mine-result{font-size:12.5px;font-weight:600;text-align:center;border-radius:6px;padding:4px 0}
.mine-result.win{background:#f6e9e6;color:#a3352f}
.mine-result.lose{background:#eceeec;color:#6b736c}
.mine-place .mine-dur{font-size:12.5px;color:#5f6c63;text-align:center}
.mine-place,.mine-dur{font-size:12.5px;color:#5f6c63;text-align:center}
.mine-single{min-height:30px;padding:4px 10px;font-size:12.5px}
.mine-foot{color:var(--muted);font-size:12.5px;margin-top:16px}
.mine-empty{background:#fffefa;border:1px dashed #d3d8cd;border-radius:14px;padding:60px 24px;text-align:center;color:var(--muted)}
.mine-empty h2{font-size:19px;color:var(--ink);margin-bottom:8px}
.mine-empty span{font-size:38px;color:#c6cec0;display:block;margin-bottom:12px}
@media (max-width:720px){
  .mine{padding:22px 14px 70px}
  .mine-head{flex-direction:column;align-items:flex-start;gap:14px}
  .mine-side{align-items:flex-start;width:100%}
  .mine-stats{width:100%;justify-content:space-between}
  .mine-row{grid-template-columns:36px minmax(0,1fr) auto;row-gap:6px}
  .mine-result,.mine-place,.mine-dur{justify-self:start;font-size:11.5px}
  .mine-result{padding:2px 8px}
  .mine-single{grid-column:3;grid-row:1}
  .mine-toolbar{flex-direction:column;align-items:stretch}
  .mine-ranges{justify-content:space-between}
  .mine-actions{justify-content:space-between}
}

/* 顶栏只留一个姓名方块：圆角矩形、浅底细边框，点击进入「我的」 */
.user-chip{display:inline-flex;align-items:center;justify-content:center;max-width:190px;min-height:32px;padding:5px 14px;border:1px solid #cfd9cc;border-radius:9px;background:#fffefa;color:#26463a;font-size:13px;font-weight:600;line-height:1.2;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 1px 2px #1d2b2312;transition:background .16s,border-color .16s,box-shadow .16s}
button.user-chip:hover{border-color:#9cb8a3;background:#f1f7f0;box-shadow:0 2px 6px #1d2b2318}
button.user-chip:active{transform:translateY(1px)}
.user-chip.static{cursor:default;background:#f4f2e8;border-color:#dcdcd0;color:#3d4b42;box-shadow:none}
@media (max-width:720px){
  .user-chip{max-width:104px;padding:5px 10px;font-size:12.5px;min-height:30px}
}

/* 2026-11-01 牌桌纵向分区：手牌区压扁贴底下移，三家出牌整体上抬，倒计时固定收回手牌上方（不再压在牌桌中央），避免上家/对家出牌与我的出牌重叠。 */
@media(min-width:701px) and (min-height:601px){
  /* 牌桌加高，给下方手牌区留出固定空间 */
  .game .playfield.has-seat-plays{min-height:calc(520px + var(--stack-extra,0px))}
  /* 手牌区整体更紧凑，向下贴底 */
  .game .hand-zone{bottom:6px}
  .hand-front{min-height:64px;margin-bottom:2px}
  .floating-hand .hand-toolbar{min-height:26px}
  .floating-hand .hand-scroll{padding-top:30px;padding-bottom:16px;min-height:148px}
  .floating-hand .selection-description{min-height:16px;line-height:16px}
  .floating-hand .hand-bottom{margin-top:2px}
  /* 对家与两家出牌远离我方出牌带 */
  .seat-play-2{top:44px}
  .seat-play-1,.seat-play-3{top:calc(19% - var(--stack-extra,0px) / 4)}
}
/* 右座玩家贴屏幕右缘，回合倒计时改挂卡片左上角，避免被视口裁切。 */
.game .player-1 .turn-clock{left:-10px;right:auto}
@media(max-width:700px){.game .player-1 .turn-clock{left:-8px;right:auto}}

/* 贡还阶段：倒计时并入中央面板（原来挂在手牌上方，正好挡住「进一张好牌 / 还一张牌」标题）。 */
.game .trick-center .turn-clock{position:relative;inset:auto;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;width:auto;min-width:150px;max-width:260px;margin:12px auto 0;padding:5px 16px;border:2px solid #b9c6a4;border-radius:11px;background:#f2f3df;color:#3d553c;box-shadow:0 3px 9px #112f2926}
.game .trick-center .turn-clock .clock-value{display:flex;align-items:baseline;justify-content:center;gap:4px}
.game .trick-center .turn-clock strong{display:block;width:auto;min-width:40px;height:auto;margin:0;border:0;border-radius:0;background:transparent;color:inherit;font:700 30px/1.1 var(--font);font-variant-numeric:tabular-nums;letter-spacing:-1px;text-align:center}
.game .trick-center .turn-clock.urgent{background:#fff0e4;border-color:#d57850;color:#9b361e}
.game .trick-center .turn-clock.urgent strong{color:inherit}
/* 贡还阶段：中央面板上移，牌局信息挪到左上角，避免与阶段标题、说明文字和确认按钮相叠。 */
@media(min-width:701px){
  .game .trick-center{top:30%}
  .game.active-game .playfield:not(.has-seat-plays) .field-meta{top:30px;bottom:auto;left:45px;transform:none}
}

/* 2026-11-01 手机端巡检修复：工具栏换行后高度自适应（此前被固定高度截住，第二行按钮压到牌桌和对家卡片）；结算后的提示小字在窄屏挤在右下角被裁切，直接隐藏（结算面板已有「开始下一副」）。 */
@media(max-width:700px){
  .game-toolbar{height:auto}
  .hand-secondary .subtle{display:none}
  /* 等牌阶段「固定搭档 · 对家同队」与准备按钮相叠，且与底部说明重复，窄屏直接隐藏 */
  .game.waiting-game .field-meta{display:none}
}

/* 级牌：牌顶一条金边。竖叠时每张只露出上面一截，靠这条金边也能一眼认出是级牌。 */
.card.level-card::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:5px;border-radius:7px 7px 0 0;background:linear-gradient(180deg,#f3dca8,#c9a24a);pointer-events:none;z-index:3}
.small-card.level-card::before{height:4px;border-radius:5px 5px 0 0}

/* ---- 2026-11-01：手机横屏紧凑牌桌（高 ≤540px、宽 701–1024px，即手机横屏）----
   竖向只有 ~390px：顶栏与工具栏压扁、手牌缩成一条底带、三家出牌全部收进桌面区，
   出牌按钮并入手牌底行居中，倒计时小型化，保证整页不滚动、元素互不重叠。 */
@media (max-height: 540px) and (min-width: 701px) and (max-width: 1024px) {
  /* 顶栏与工具栏 */
  .topbar { height: 42px; padding-block: 0; }
  .brand { font-size: 13px; gap: 6px; }
  .brand small { display: none; }
  .brand-mark { width: 28px; height: 24px; padding: 2px; border-radius: 7px; }
  .brand-mark img { width: 22px; height: 18px; }
  .connection { display: none; }
  .top-actions .btn, .user-chip { min-height: 26px; font-size: 11px; padding: 3px 9px; }
  .game { padding: 0 10px; }
  .game-toolbar { height: 38px; min-height: 0; gap: 8px; }
  .scoreboard { gap: 6px; padding: 2px 7px; }
  .score-team { font-size: 10px; }
  .score-team b { font-size: 16px; margin-left: 5px; }
  .score-caption { font-size: 8px; }
  .current-level { gap: 5px; padding: 2px 7px; }
  .current-level small { font-size: 9px; }
  .current-level strong { font-size: 18px; }
  .current-level .gold-heart { font-size: 15px; }
  .current-level > span:last-child { display: none; }
  .settings { gap: 8px; }
  .settings label { font-size: 10px; gap: 4px; }
  .settings select { min-height: 24px; font-size: 12px; padding: 2px 16px 2px 6px; }
  .settings .text-link { display: none; }
  .game-tools .btn { min-height: 24px; font-size: 10px; padding: 2px 6px; }

  /* 牌桌占满剩余高度，整页不滚动 */
  .game .playfield, .game .playfield.has-stacked-hand, .game .has-seat-plays,
  .game.waiting-game .playfield { height: calc(100dvh - 86px); min-height: 0; }
  .game .felt { inset: 2px 64px; border-width: 5px; border-radius: 110px; }
  .game .felt-inner { inset: 7px; border-radius: 100px; }
  .game .table-top-label { top: -7px; font-size: 8px; padding: 1px 9px; }
  .game .table-watermark { top: 34%; }
  .table-watermark .felt-logo { width: 54px; height: 40px; margin-bottom: 5px; }
  .table-watermark > span { font-size: 12px; }
  .table-watermark small { font-size: 6px; }
  .game .field-meta, .game.active-game .field-meta,
  .game .has-seat-plays .field-meta,
  .game.active-game .playfield:not(.has-seat-plays) .field-meta {
    top: 6px; bottom: auto; left: 112px; transform: none; font-size: 8px; gap: 8px;
  }

  /* 三家座位卡片 */
  .game .player-2 { top: 0; padding: 3px 10px 4px; border-radius: 11px; gap: 6px; }
  .player-2 .opponent-hand { transform: scale(.62); transform-origin: left center; width: 42px; height: 30px; margin-left: 2px; }
  .game .player-1, .game .player-3 { top: 16%; padding: 5px 3px; border-radius: 11px; min-width: 70px; max-width: 74px; gap: 3px; }
  .game .player-1 { right: -4px; }
  .game .player-3 { left: -4px; }
  .game .player .avatar { width: 26px; height: 26px; font-size: 12px; }
  .game .player-info strong { font-size: 9px; max-width: 90px; }
  .game .player-1 .player-info strong, .game .player-3 .player-info strong { max-width: 64px; }
  .game .player-info > div, .game .player-info small { font-size: 8px; gap: 3px; }
  .player-1 .opponent-hand, .player-3 .opponent-hand { transform: scale(.6); transform-origin: top center; height: 32px; width: 44px; }
  .game .player .turn-clock { width: 28px; height: 28px; min-width: 28px; max-width: 28px; right: -6px; top: -6px; border-width: 1px; }
  .game .player-1 .turn-clock { left: -6px; right: auto; }
  .game .player .turn-clock strong { font-size: 13px; }
  .game .player .turn-clock .clock-value > span { font-size: 6px; }
  .player .finish-badge { font-size: 8px; padding: 1px 6px; top: -8px; }
  .player-2 .finish-badge { top: auto; bottom: -8px; }
  .game .player-0 { left: 4px; bottom: 4px; max-width: 70px; min-width: 58px; padding: 3px; gap: 3px; }

  /* 三家出牌收进桌面区 */
  .seat-play { width: 160px; }
  .seat-play-2 { top: 36px; width: 190px; }
  .seat-play-1, .seat-play-3 { top: 40px; width: 132px; }
  .seat-play-1 { right: 68px; }
  .seat-play-3 { left: 68px; }
  .seat-play-label { height: 14px; line-height: 14px; font-size: 8px; gap: 3px; padding: 0 6px; margin-bottom: 2px; }
  .seat-play-type { font-size: 7px; }
  .seat-play-label b { font-size: 7px; padding: 0 3px; line-height: 11px; }
  .seat-play .played-cards { min-height: 44px; padding-bottom: 2px; }
  .seat-play .small-card { width: 30px; height: 43px; margin-right: -15px; border-radius: 4px; }
  .seat-play .small-card .card-corner { left: 3px; top: 3px; }
  .seat-play .small-card .card-corner b { font-size: 13px; line-height: 14px; }
  .seat-play .small-card .card-corner i { font-size: 10px; line-height: 11px; }
  .seat-play .small-card .card-center { font-size: 15px; right: 3px; bottom: 3px; }
  .seat-play .small-card .level-label { top: 27px; left: 2px; font-size: 6px; }
  .seat-play .small-card .mapped, .seat-play .small-card .wild-label { font-size: 6px; }
  .seat-play .card.joker .card-corner b { font-size: 7px; line-height: 9px; }
  .seat-play .card.joker .card-center { width: 18px; height: 13px; }
  .pass-word, .lead-word { font-size: 10px; padding: 2px 8px; margin-top: 2px; }

  /* 自己回合的中央大金圈在横屏太占地方，手牌上方的倒计时已够用 */
  .own-clock-wrap { display: none; }

  /* 中央面板（贡还 / 结算 / 领出提示） */
  .game .trick-center, .game .result { top: 46%; width: 72%; }
  .game .round-eyebrow { font-size: 9px; margin-bottom: 5px; }
  .exchange-center > span { display: none; }
  .exchange-center h2 { font-size: 16px; }
  .exchange-center p { font-size: 9px; margin-top: 5px; }
  .game .result h2 { font-size: 18px; }
  .game .result p { font-size: 9px; margin-top: 4px; }
  .game .result .finish-order { font-size: 8px; margin-top: 5px; }
  .game .result .waiting-actions { margin-top: 7px; gap: 6px; }
  .game .result .btn, .exchange-center .btn, .game .trick-center .btn { min-height: 26px; font-size: 10px; padding: 4px 10px; }
  .waiting-lead > span { font-size: 20px; letter-spacing: 3px; }
  .waiting-lead p { font-size: 11px; margin-top: 6px; }
  .game .trick-center .turn-clock { min-width: 120px; padding: 3px 10px; margin-top: 6px; }
  .game .trick-center .turn-clock strong { font-size: 20px; min-width: 30px; }
  .game .trick-center .turn-clock small { font-size: 10px; }

  /* 等牌页 */
  .table-welcome h2 { font-size: 15px; }
  .table-welcome p { font-size: 10px; margin-top: 5px; max-width: 300px; }
  .table-welcome .felt-symbol, .felt-symbol { display: none; }
  .table-welcome .waiting-actions, .waiting-actions { margin-top: 10px; }
  .waiting-actions .btn { min-height: 28px; font-size: 11px; }
  /* 等牌页底部说明在横屏放不下一整行，且与按钮区信息重复，直接隐藏 */
  .game .waiting-bottom { display: none; }
  .four-suits { display: none; }
  .empty-player button { font-size: 15px; padding: 5px 8px; }

  /* 手牌区：一条底带；出牌按钮并入底行居中 */
  .game .hand-zone { left: 76px; right: 76px; bottom: 2px; }
  .hand-front { min-height: 44px; margin-bottom: 1px; gap: 12px; }
  .game .hand-front .seat-play-0 { width: 190px; }
  .game .hand-front .turn-clock { min-width: 132px; max-width: 190px; gap: 7px; padding: 3px 10px; border-radius: 9px; }
  .game .hand-front .turn-clock small { font-size: 9px; max-width: 76px; line-height: 1.3; }
  .game .hand-front .turn-clock strong { font-size: 22px; min-width: 32px; }
  .game .hand-front .turn-clock .clock-value > span { font-size: 8px; }
  .game .floating-hand { left: 0; right: 0; bottom: 0; padding: 0; }
  .floating-hand .hand-toolbar { min-height: 20px; margin: 0 0 1px; gap: 6px; }
  .floating-hand .hand-toolbar > div { gap: 4px; }
  .floating-hand .hand-toolbar > div:last-child { transform: none; }
  .floating-hand .hand-toolbar strong { font-size: 10px; }
  .floating-hand .hand-toolbar strong span { font-size: 13px; margin-left: 4px; }
  .floating-hand .hand-help { display: none; }
  .floating-hand .tool { min-height: 22px; font-size: 9px; padding: 2px 6px; }
  .floating-hand .play-actions-top { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 6; margin: 0; width: max-content; }
  .floating-hand .play-actions .btn { min-height: 27px; min-width: 52px; font-size: 11px; padding: 3px 10px; }
  .floating-hand .play-actions #play-button { min-width: 82px; min-height: 29px; font-size: 13px; padding-inline: 12px; }
  .floating-hand .hand-surface { gap: 7px; }
  .floating-hand .hand-scroll { padding: 17px 4px 3px; min-height: 80px; }
  .floating-hand .hand { min-height: 60px; min-width: calc(var(--n) * 22px + 30px + var(--groups, 0) * 13px); }
  .floating-hand .hand .card { width: 41px; height: 60px; margin-right: -23px; border-radius: 6px; }
  .floating-hand .hand.hand-columns .loose-cards .card { width: 41px; height: 60px; margin-right: -23px; border-radius: 6px; }
  .floating-hand .hand.hand-columns .loose-cards .card:last-child { margin-right: 0; }
  .floating-hand .hand .card.group-end { margin-right: -12px; }
  .floating-hand .hand .card-corner { left: 4px; top: 3px; }
  .floating-hand .hand .card-corner b { font-size: 15px; }
  .floating-hand .hand .card-corner i { font-size: 12px; }
  .floating-hand .hand .card-center { font-size: 19px; right: 4px; bottom: 3px; }
  .floating-hand .hand .card .level-label { top: 37px; left: 3px; font-size: 7px; padding: 1px; }
  .floating-hand .hand .card.selected { transform: translate(-3px, -12px); }
  .floating-hand .card .mapped { bottom: -12px; font-size: 7px; }
  .floating-hand .manual-tools { width: 36px; gap: 5px; padding-top: 0; }
  .floating-hand .manual-arrange { width: 36px; min-height: 32px; font-size: 11px; padding: 4px 2px; }
  .floating-hand .manual-tools .tool { min-height: 22px; font-size: 8px; padding: 2px; }
  .floating-hand .selection-description { height: 12px; line-height: 12px; font-size: 9px; }
  .floating-hand .hand-bottom { margin-top: 1px; gap: 8px; }
  .floating-hand .flush-shortcuts { gap: 4px; padding: 2px; }
  .floating-hand .flush-shortcuts > span { display: none; }
  .floating-hand .flush-button { width: 26px; min-width: 26px; height: 24px; min-height: 24px; font-size: 15px; padding: 0; border-radius: 6px; }
  .floating-hand .hand-secondary .quiet { min-height: 24px; font-size: 10px; padding: 2px 8px; }
  .hand-secondary .subtle { display: none; }
  .floating-hand .group-label { top: -17px; font-size: 8px; line-height: 13px; padding: 0 4px; }
  .card-stack { --stack-card-height: 60px; --stack-card-width: 45px; }
  .floating-hand .hand.hand-columns, .hand-columns .loose-cards { min-height: 60px; }

  /* 浮层 */
  .record-panel { top: 46px; right: 8px; bottom: 8px; }
  #toast { bottom: 8px; font-size: 11px; padding: 7px 14px; }
  .control-banner { bottom: 6px; font-size: 11px; padding: 7px 12px; gap: 8px; }
  dialog { max-height: calc(100dvh - 20px); padding: 16px; }
}

/* 手机竖屏打开牌桌：全屏引导横屏（可点「继续竖屏」关闭）。登录、大厅不受限。 */
.rotate-hint { display: none; }
@media (max-width: 700px) and (orientation: portrait) {
  .rotate-hint {
    position: fixed; inset: 0; z-index: 500;
    display: flex; align-items: center; justify-content: center;
    background: rgba(15,38,30,.94); backdrop-filter: blur(8px);
  }
  .rotate-card { text-align: center; color: #f3ecd7; padding: 30px; }
  .rotate-icon { display: block; font-size: 44px; margin-bottom: 12px; animation: rotate-sway 2.2s ease-in-out infinite; }
  .rotate-card b { font-size: 17px; letter-spacing: .1em; }
  .rotate-card p { font-size: 12px; color: #b9cbb5; margin: 10px 0 20px; }
  .rotate-card .btn { min-height: 34px; font-size: 12px; color: #d7e4cc; }
}
@keyframes rotate-sway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(90deg); } }

/* 点「出牌 / 不要 / 确认贡还」后的即时反馈：选中的牌抬起淡出，按钮进入提交态。
   服务端确认前先这样给回应，避免往返期间看着像卡住。 */
.floating-hand .hand .card.leaving,
.floating-hand .hand .card-stack .card.leaving,
.floating-hand .hand .card-stack.selected-stack .card.leaving{
  opacity:.3;
  transform:translateY(-20px) scale(.97);
  transition:opacity .12s linear,transform .14s ease-out;
  pointer-events:none;
}
body.submitting .play-actions-top .btn,
body.submitting .hand-toolbar .btn,
body.submitting .manual-tools .btn,
body.submitting .flush-button{pointer-events:none;opacity:.55}
body.submitting .selection-summary::after{content:" · 正在提交…";color:#8a8f86}

/* 进贡 / 还贡：只把合法的牌点亮，其余保持正常，不再整手变透明 */
.card.exchange-pick{border-color:#c69a3f;background:linear-gradient(150deg,#fffdf2,#f9edcd);box-shadow:0 0 0 2px #f0d589,0 8px 18px #233c2830}
.floating-hand .hand .card.exchange-pick{animation:pickPulse 1.6s ease-in-out infinite}
@keyframes pickPulse{
  0%,100%{box-shadow:0 0 0 2px #f0d589,0 8px 18px #233c2830}
  50%{box-shadow:0 0 0 3px #e8c463,0 10px 22px #233c2838}
}
@media (prefers-reduced-motion: reduce){.floating-hand .hand .card.exchange-pick{animation:none}}

/* ── 2026-11-01 可读性调整：剩牌数、托管机器人、座位倒计时、出牌拦截原因 ── */

/* 剩不到 10 张：数字放大加粗标红，别让它藏在 10px 小字里 */
.player-info .count-low{font-size:19px;font-weight:800;line-height:1;letter-spacing:-.02em;color:#ff6a45;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.game .hand-tray .player-info .count-low,.game .hand-front .player-info .count-low{color:#d0331c;text-shadow:none}

/* 托管中的机器人：比原来大一档、摆幅更明显，一眼能看出这桌在托管 */
.auto-flag{display:inline-flex;align-items:center;gap:4px;padding:1px 7px 1px 5px;border:1px solid rgba(240,215,154,.45);border-radius:10px;background:rgba(240,215,154,.14);color:#ffe7a8;font-weight:700;letter-spacing:.02em}
.bot-sway{width:20px;height:20px;display:block;flex:none;transform-origin:50% 88%;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));animation:bot-sway 1.4s ease-in-out infinite}
@keyframes bot-sway{
  0%,100%{transform:rotate(-14deg) translateY(0)}
  25%{transform:rotate(0deg) translateY(-1px)}
  50%{transform:rotate(14deg) translateY(0)}
  75%{transform:rotate(0deg) translateY(-1px)}
}

/* 其他家的出牌倒计时：整体放大约 25%，数字更粗更醒目 */
.game .player .turn-clock{
  width:54px;height:54px;min-width:54px;max-width:54px;
  border-width:2.5px;
  box-shadow:0 7px 20px rgba(3,29,21,.3),0 0 0 3px rgba(244,248,237,.28);
}
.game .player .turn-clock strong{font-size:27px;font-weight:800;letter-spacing:-.03em}
.game .player .turn-clock .clock-value > span{font-size:10px;font-weight:700}
.game .player .turn-clock.urgent{animation:urgent-clock 1s ease-in-out infinite}
@media (max-width:700px){
  .game .player .turn-clock{width:46px;height:46px;min-width:46px;max-width:46px;border-width:2px}
  .game .player .turn-clock strong{font-size:22px}
  .game .player .turn-clock .clock-value > span{font-size:8px}
  .bot-sway{width:17px;height:17px}
  .player-info .count-low{font-size:16px}
}
@media (max-height:540px) and (min-width:701px) and (max-width:1024px){
  .game .player .turn-clock{width:44px;height:44px;min-width:44px;max-width:44px}
  .game .player .turn-clock strong{font-size:22px}
  .play-block-hint{display:none !important}
}

/* 出牌按钮下方直接说明「为什么不能出」，就在手边，不用去猜 */
.play-block-hint{display:none;z-index:6;max-width:min(560px,88vw);margin:2px auto 4px;padding:6px 14px;border:1px solid #f0b39c;border-radius:9px;background:#fff3ee;color:#a8321a;font-size:12.5px;font-weight:700;line-height:1.45;text-align:center;box-shadow:0 4px 12px rgba(3,29,21,.18)}
.play-block-hint.visible{display:block}