/* 雾城牌局 · 牌桌、手牌与信息层级 */
.game-screen{background-image:linear-gradient(90deg,#071610df,#0b1c16c9),url('./assets/city.png')}
.game-topbar{height:72px;background:#0d1d18f5;border-color:#b9a57540;box-shadow:0 8px 25px #0002}
.game-title h2{font-size:20px;letter-spacing:.08em}.game-title small{font-size:11px;color:#acb8a7;letter-spacing:.04em}
.game-tools .tag{padding:6px 12px;font-size:11px;background:#c4ad7510}.game-tools .btn{font-size:12px;padding:8px 14px}
.game-tools .icon-btn{width:42px;height:42px}.game-tools .icon{width:20px;height:20px}
.game-body{gap:22px;padding:21px 28px 12px;grid-template-columns:minmax(0,1fr) 232px}
.table-info{padding:0 4px 12px;font-size:11px;color:#c3cebb}.table-info .tag{font-size:10px;padding:4px 9px;background:#10251bbc}
.game-table{border:11px solid #463f2d;border-radius:38px;background:radial-gradient(ellipse at 50% 43%,#2e5843 0%,#214834 43%,#153827 100%);box-shadow:inset 0 0 0 2px #a68b534f,inset 0 0 0 5px #071d171f,inset 0 0 95px #00180e9c,0 0 0 1px #b39a5e45,0 7px 0 #232d20,0 13px 28px #0005;min-height:430px}
.game-table::before{inset:15px;border:1px solid #c4b0753b;border-radius:18px}.game-table::after{content:'';position:absolute;inset:20px;border:1px solid #c4b0750d;border-radius:15px;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 0h1v1H0zM3 3h1v1H3z' fill='%23ecdc9a' opacity='.075'/%3E%3C/svg%3E");opacity:.35}
.table-seat{background:linear-gradient(140deg,#102d22f5,#10251cda);border:1px solid #91ab7933;box-shadow:0 8px 22px #00120833;border-radius:9px;padding:12px;gap:11px;min-width:124px;transition:border-color .25s;align-items:center}
.table-seat.active{border-color:#ddbc73b3;background:linear-gradient(140deg,#3b4329,#203822);box-shadow:0 0 0 2px #d0ad6f12,0 4px 22px #0003}
.seat-left,.seat-right{top:32%;padding:13px 12px;max-width:126px;min-width:115px;align-items:center;text-align:center}
.seat-right{right:24px}.seat-left{left:24px}.seat-top{top:20px;padding:10px 18px;min-width:214px;justify-content:center}
.seat-self{left:22px;bottom:21px;background:#122c2299;padding:8px 12px;min-width:147px}
.seat-avatar .portrait,.seat-avatar .initial-avatar{width:49px;height:49px;border-radius:8px;box-shadow:0 2px 9px #0005;border:1px solid #b8a77880}
.table-seat.active .portrait,.table-seat.active .initial-avatar{box-shadow:0 0 0 2px #ddb57044;border-color:#e0bc78}
.seat-name{font-size:16px;line-height:1.45;color:#f1ecd7;font-weight:600;letter-spacing:.03em}
.seat-name small{margin-left:6px;font-family:var(--sans);font-size:9px;padding:1px 4px;border:1px solid #c4b57745;border-radius:3px;color:#bfc5a9;font-weight:400}
.seat-role{display:inline-block;white-space:nowrap;background:#7f9a7622;border:1px solid #90b58447;border-radius:3px;font-size:10px;line-height:1.4;padding:2px 7px;color:#bdcfad;margin-top:4px}
.seat-role.landlord-role{background:#b97f362b;border-color:#cf9c4e88;color:#f4ce86}.seat-role.won-role{background:#bb9b5a25;border-color:#bda36366;color:#efd498}
.seat-meta{display:flex;align-items:baseline;gap:4px;justify-content:inherit;color:#a8b89b;font-size:10px;margin-top:5px;line-height:1.25}
.seat-left .seat-meta,.seat-right .seat-meta{justify-content:center}.remaining-count{font-size:24px;line-height:1.1;color:#f0ecda;font-family:Georgia,serif;font-weight:400;font-variant-numeric:tabular-nums}.urgent-count{color:#ffac83}
.seat-score{font-size:13px;color:#e2cb99;margin-top:5px;font-family:Georgia,var(--sans)}.seat-score small{font-size:9px;color:#95a68c;font-family:var(--sans)}.won-hand-label{font-size:10px;color:#dbcc9d;max-width:85px;white-space:normal;line-height:1.5}
.opponent-backs{max-width:95px;justify-content:center;gap:2px;margin:7px auto 0;overflow:visible;padding:0}.seat-top .opponent-backs,.seat-self .opponent-backs{display:none}
.tile-back{width:12px;height:21px;border-radius:3px;background:linear-gradient(115deg,#96b195 0%,#526e53 25%,#36523b 100%);border:1px solid #b7c8a267;border-bottom:3px solid #112f20;box-shadow:0 2px 3px #0003}
.card-back{position:relative;width:19px;height:29px;background:repeating-linear-gradient(45deg,#294d3c 0,#294d3c 2px,#315b45 2px,#315b45 4px);border:2px solid #d6cba7;box-shadow:inset 0 0 0 1px #9e8a59,0 2px 4px #0004;margin-right:-10px;border-radius:3px;overflow:hidden}
.card-back::after{content:'';position:absolute;inset:3px;border:1px solid #c0ac6a9c;background:linear-gradient(45deg,transparent 45%,#c0ac6a35 47%,#c0ac6a35 53%,transparent 55%)}.card-back span{font:12px var(--serif);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#d4be85;z-index:1}.opponent-backs .card-back span{display:none}
.seat-turn-label{position:absolute;top:-9px;left:50%;transform:translateX(-50%);font-size:9px;line-height:1.6;background:#d2b480;color:#263726;padding:1px 8px;border-radius:10px;white-space:nowrap;box-shadow:0 2px 7px #0002}
.seat-bubble{left:55px;top:-23px;background:#f0e6c8;color:#254032;border:1px solid #c9ba8f;z-index:6;font-size:11px;padding:5px 10px}.seat-right .seat-bubble{right:55px}.seat-top .seat-bubble{top:0}
.table-center{width:195px;top:49%;z-index:1}.table-watermark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:130px var(--serif);color:#c6c59607;pointer-events:none;z-index:-1}
.wall-counter{display:flex;align-items:baseline;justify-content:center;gap:7px}.wall-counter>span{font-size:10px;color:#bbc9af;letter-spacing:.1em}.wall-counter strong{font-size:39px;font-family:Georgia,serif;font-weight:400;line-height:1;color:#e4d6ad;text-shadow:0 2px 8px #0002}.wall-counter small{font-size:10px;color:#a5b797}
.table-round-info{display:flex;justify-content:center;gap:10px;color:#a7bc9d;font-size:10px;margin-top:9px}.table-round-info span{opacity:.4}
.center-turn{display:inline-block;font-size:12px;letter-spacing:.04em;border:1px solid #c6c2932c;padding:5px 12px;margin-top:15px;border-radius:20px;background:#173425cc;color:#dbe0c2;box-shadow:0 2px 8px #07231633}.center-turn.your-turn{color:#f5deb0;background:#8f81312b;border-color:#d8bc7061}
.center-sub{font-size:10px;color:#a6b998;margin-top:8px}.table-center.claim-center{top:48%;border:1px solid #dbc3843d;border-radius:10px;background:#153527ed;width:148px;padding:11px 9px 10px;box-shadow:0 7px 20px #08231355}.claim-caption{font-size:11px;background:none;padding:0;color:#ebdeba}.claim-tile{margin:10px auto}.claim-tile .tile{width:47px;height:67px}
.river{gap:4px;grid-template-columns:repeat(6,28px);max-height:170px;padding:3px 3px 7px;scrollbar-width:thin;scrollbar-color:#c1b88730 transparent}.river-label{grid-column:1/-1;color:#9fb095;font-size:9px;line-height:1.2;padding-bottom:3px;text-align:center;white-space:nowrap}
.river .tile{width:28px;height:39px;padding:2px;border-bottom:4px solid #728e77;box-shadow:0 1px 0 #163c29,0 3px 4px #0004;opacity:1;border-radius:3px}.river .tile .wan-num{font-size:16px}.river .tile .wan-char{font-size:15px}
.river-top{top:134px}.river-bottom{bottom:29px}.river-left{left:173px;top:47%;grid-template-columns:repeat(3,28px);max-height:227px}.river-right{right:173px;top:47%;grid-template-columns:repeat(3,28px);max-height:227px}.latest-discard{outline:2px solid #ebc968;outline-offset:2px}
.own-melds{bottom:20px;right:24px;gap:9px}.meld-group .tile{width:25px;height:35px;border-bottom-width:3px}.meld-group .wan-num,.meld-group .wan-char{font-size:13px}.other-melds .tile{width:17px;height:24px;border-bottom-width:2px}.other-melds .wan-num,.other-melds .wan-char{font-size:9px}
.hand-zone{background:linear-gradient(180deg,#203a2be8,#122b20f5);border:1px solid #aa996043;border-radius:10px;box-shadow:inset 0 1px 0 #ddc7960d,0 10px 35px #0003;margin-top:23px;padding:12px 16px 10px;min-height:216px;position:relative}
.hand-zone::before{content:'';position:absolute;top:0;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,#cfb47a70,transparent)}
.hand-toolbar{min-height:30px;padding:0 4px 10px;border-bottom:1px solid #b6ba8c17;margin:0 0 4px;gap:16px}.hand-state{font-size:13px;color:#ede8d1;line-height:1.5}.hand-state .turn-dot,.bid-note .turn-dot{width:7px;height:7px;background:#ebc874;box-shadow:0 0 10px #eac16a66;flex-shrink:0;border-radius:50%}.hand-toolbar .hand-hints{font-size:10px;color:#98ab8f;white-space:nowrap}
.hand{min-height:117px;gap:5px;padding:20px 2px 12px}.tile-row,.card-row{display:contents}
.tile{width:clamp(39px,4.1vw,59px);height:clamp(59px,5.8vw,84px);padding:5px 4px 3px;border:1px solid #fffbe3;border-bottom:6px solid #819e82;border-right:2px solid #b8c6a4;border-radius:6px;background:linear-gradient(125deg,#fffef3 0%,#f4f1dc 50%,#e8e6cc 100%);box-shadow:inset 1px 1px 0 #fff,0 1px 0 #294d34,0 4px 0 #406749,0 7px 8px #0005;text-shadow:0 1px 0 #fff8;overflow:hidden}
.tile::after{content:'';position:absolute;top:1px;left:2px;right:2px;height:36%;border-radius:4px 4px 30% 30%;background:linear-gradient(135deg,#ffffff62,transparent 70%);pointer-events:none}
.tile-face{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}.tile-art{display:block;filter:drop-shadow(0 1px 0 #fff8)}
.wan-num{font-family:var(--serif);font-size:clamp(23px,2.25vw,32px);line-height:1.04;color:#163f33;font-weight:700}.wan-char{font-family:var(--serif);font-size:clamp(23px,2.2vw,31px);line-height:1.07;color:#aa2f2a;font-weight:700}
.hand .tile:hover:not(:disabled){transform:translateY(-7px);box-shadow:inset 1px 1px 0 #fff,0 1px 0 #294d34,0 4px 0 #63855b,0 12px 13px #0005}.hand .tile.selected{transform:translateY(-14px);outline:2px solid #efd07d;outline-offset:2px;box-shadow:0 4px 0 #988d4f,0 11px 15px #0006,0 0 23px #debb5320}
.tile.missing-tile{background:linear-gradient(125deg,#fff8e6,#ecdebf);border-bottom-color:#a89870}.missing-dot{top:3px;right:3px;width:5px;height:5px;border:1px solid #8e3122;background:#bf4c35}.tile.tile-muted{filter:saturate(.7) brightness(.84)}.tile.tile-muted:hover{filter:none}.hand .tile.drawn{margin-left:15px;border-bottom-color:#c6a25d}.drawn-marker{position:absolute;right:2px;top:2px;background:#c8aa68;color:#3b3b20;padding:0 3px;font-size:8px;font-style:normal;border-radius:1px;line-height:1.6}.tile.selected .drawn-marker{background:#dec68b}
.tile.mini{width:32px;height:45px;padding:3px;border-bottom-width:4px}.tile.mini .wan-num{font-size:18px}.tile.mini .wan-char{font-size:17px}
.action-bar{min-height:68px;margin:0;flex-direction:column;gap:9px}.action-buttons{display:flex;justify-content:center;align-items:center;gap:11px;flex-wrap:wrap}.selection-readout{display:flex;justify-content:center;align-items:center;gap:16px;min-height:20px;font-size:11px;color:#e0dac3}.selection-readout b{font-size:13px;color:#f0cd84;font-weight:600}.selection-readout small{font-size:10px;color:#93aa8c}.selection-readout.invalid{color:#ffc0a1}.selection-readout.invalid small{color:#d39275}.selection-readout>span+small{border-left:1px solid #94a47d40;padding-left:16px}
.action-bar .btn{padding:10px 24px;font-size:13px;min-width:86px;border-radius:5px;box-shadow:0 2px 6px #0002}.action-bar .btn .icon{width:17px;height:17px}.action-bar .btn.primary{background:linear-gradient(135deg,#e6cd97,#c3a570);color:#1c3325;border-color:#f4dfb255;min-width:126px}.action-bar .btn.primary:hover{background:linear-gradient(135deg,#f4deb0,#d0b37b)}.action-bar .btn:disabled{opacity:.35;box-shadow:none}.action-bar .btn.secondary{background:#173624;border-color:#96a07855;color:#d9dfc3}.action-bar .btn.secondary:hover{background:#2c4e33;border-color:#afbb8d}.action-bar .btn.hu{background:linear-gradient(135deg,#cb7556,#974329);border-color:#e0a477;color:#fff0cf;min-width:120px;font-weight:600}.waiting-actions{flex-direction:row;gap:15px;min-height:48px}.waiting-actions .btn{font-size:11px;padding:7px 13px;min-width:0}.turn-wait{font-size:11px;color:#b4c3a7}.hint-explanation{font-size:11px;color:#bfcca9;min-height:21px;padding:7px 12px 0}.hint-explanation:empty{min-height:0;padding:0}
.missing-choice{margin:14px 0 8px;gap:13px}.missing-choice .btn{background:#1a3928;border-color:#94a77950;min-width:123px}.missing-choice .btn:hover{background:#344b2e}.missing-choice b{font-size:25px;color:#e4d9b2}.missing-choice small{color:#a8b89c}
.game-panel{background:linear-gradient(140deg,#183025f5,#11231cfa);border-color:#b5aa7040;padding:19px}.game-panel .eyebrow{font-size:10px;color:#c8b885}.game-panel h3{font-size:18px}.game-panel p{font-size:12px;color:#b6c2a8;line-height:1.85}.game-objective{font-size:11px;color:#e1d1a3}.game-log p{font-size:11px;color:#adc09f;line-height:1.7;border-color:#a7b28016;padding:8px 0}.game-log p:last-child{color:#ebd9ad}.game-panel .keyboard-note{font-size:10px}.game-bottom{font-size:10px;color:#9aad92}.game-bottom>.icon{width:13px;height:13px}
.playing-card{width:70px;height:99px;border:1px solid #fdf9df;border-bottom:3px solid #b9b297;border-right:1px solid #b5b49e;border-radius:6px;background:radial-gradient(ellipse at 20% 5%,#fffef5,#f3efd9 80%);box-shadow:inset 0 0 0 1px #fff9,0 2px 1px #8f9179,0 5px 8px #0005;color:#223b3e;overflow:hidden}
.playing-card::before{content:'';position:absolute;inset:4px;border:1px solid #a7976433;border-radius:3px;pointer-events:none}.playing-card.red{color:#af332f}.card-corner{left:5px;top:5px;font:700 22px/1 Georgia,'Times New Roman',serif;min-width:16px;z-index:2;text-align:center}.card-corner small{font-size:19px;line-height:1;margin-top:3px}.card-corner.invert{right:5px;bottom:5px;left:auto;top:auto}.card-illustration{position:absolute;left:22%;right:22%;top:12%;bottom:12%;display:flex;align-items:center;justify-content:center;pointer-events:none}.card-illustration svg{width:100%;height:100%;overflow:visible}.court-card .card-illustration{left:25%;right:17%;top:8%;bottom:8%}.joker-card .card-corner{font-family:var(--serif);font-size:17px}.joker-card .card-corner small{font-size:17px}.joker-card .card-illustration{left:24%;right:19%;top:10%;bottom:8%}
.cards-hand{gap:0;min-height:139px;padding:24px 4px 14px}.cards-hand .playing-card{width:clamp(58px,5.6vw,80px);height:clamp(88px,8.1vw,117px);margin-right:clamp(-37px,-2.4vw,-24px);box-shadow:-1px 1px 2px #152e2444,0 3px 0 #8b9479,0 7px 12px #0004}.cards-hand .card-corner{font-size:25px;left:5px;top:6px;min-width:20px}.cards-hand .card-corner small{font-size:22px}.cards-hand .invert{display:none}.cards-hand .playing-card.selected{transform:translateY(-17px);outline:2px solid #ecd28a;outline-offset:1px;box-shadow:0 3px 0 #998146,0 10px 20px #0007}.cards-hand .playing-card:hover{transform:translateY(-9px)}.cards-hand .playing-card:last-child{margin-right:0}.cards-hand .card-illustration{left:33%;right:13%;top:10%;bottom:10%}.cards-hand .court-card .card-illustration{left:36%;right:10%}.cards-hand .joker-card .card-corner{font-size:18px}.cards-hand .joker-card .card-illustration{left:33%;right:12%}
.landlord-table .seat-left,.landlord-table .seat-right{top:23%;max-width:143px;min-width:128px}.bottom-cards{top:25px;padding:8px 11px;background:#112d21c2;border:1px solid #b09c603d;border-radius:7px;gap:7px}.bottom-cards .playing-card{width:39px;height:55px;border-bottom-width:2px}.bottom-cards .card-corner{font-size:15px;left:4px;top:4px}.bottom-cards .card-corner small{font-size:13px}.bottom-cards .card-illustration{left:41%;right:9%;top:25%;bottom:15%;opacity:.7}.bottom-cards .card-back{width:37px;height:53px;margin:0;border-width:2px}.bottom-cards .card-back span{font-size:17px}.bottom-label{top:103px;font-size:10px;color:#bac7aa;letter-spacing:.05em}.landlord-table .table-center{top:41%;width:190px;opacity:1}.multiplier-counter{display:flex;justify-content:center;align-items:baseline;gap:9px}.multiplier-counter span{font-size:10px;color:#9bb68f;letter-spacing:.1em}.multiplier-counter strong{font:26px Georgia,serif;color:#d3c598}.landlord-center .table-watermark{font-size:115px;color:#d1c18d09}
.trick-area{top:65%;width:65%;z-index:3}.trick-owner{display:flex;align-items:center;justify-content:center;gap:9px;color:#cdd4b8;font-size:11px}.trick-owner>span{font-size:9px;color:#8bab8a}.trick-owner b{font-weight:500;font-family:var(--serif);font-size:14px}.trick-owner i{font-size:10px;font-style:normal;padding:2px 7px;background:#b3b48017;border:1px solid #b3b48035;border-radius:3px;color:#d1c895}
.trick-cards{padding:13px 0 9px;max-width:100%;margin:auto}.trick-cards .playing-card{width:54px;height:78px;margin-right:-17px;border-radius:4px}.trick-cards .card-corner{font-size:18px;left:4px;top:4px}.trick-cards .card-corner small{font-size:16px}.trick-cards .card-illustration{left:37%;right:12%;top:15%;bottom:12%}.trick-caption{color:#a9bd9e;font-size:10px;margin-top:3px}.bid-note{font-size:13px;color:#d7dfbf;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border:1px solid #aac08e35;background:#123220a6;border-radius:30px;max-width:230px;margin:auto}.new-trick{display:flex;flex-direction:column;gap:9px;align-items:center}.new-trick span{color:#91aa86;font-size:10px;letter-spacing:.15em}.new-trick strong{font-size:17px;font-family:var(--serif);font-weight:500;color:#dbdebe}
.practice-art .tile{width:75px;height:105px}.practice-art .wan-num{font-size:37px}.practice-art .wan-char{font-size:35px}.practice-art .playing-card{width:88px;height:125px}.practice-art .card-corner{font-size:26px}.practice-art .card-corner small{font-size:23px}
.rule-examples .tile.mini{width:33px;height:47px}.rule-examples .playing-card{width:49px;height:71px}.rule-examples .card-corner{font-size:17px}.rule-examples .card-corner small{font-size:14px}.rule-examples .card-illustration{left:39%;right:12%}
@media(max-width:1200px){.game-body{padding:18px 20px 12px;grid-template-columns:minmax(0,1fr) 205px;gap:17px}.game-table{min-height:410px}.seat-left,.seat-right{min-width:99px;max-width:109px;padding:10px 8px}.seat-left{left:18px}.seat-right{right:18px}.seat-avatar .portrait{width:43px;height:43px}.seat-name{font-size:14px}.seat-meta{font-size:9px}.seat-score{font-size:12px}.remaining-count{font-size:21px}.river-left{left:132px}.river-right{right:132px}.river{grid-template-columns:repeat(6,25px);gap:3px}.river-left,.river-right{grid-template-columns:repeat(3,25px);max-height:195px}.river .tile{width:25px;height:35px}.river .tile .wan-num{font-size:14px}.river .tile .wan-char{font-size:13px}.seat-top{min-width:200px;top:17px}.river-top{top:127px}.table-center{width:162px}.wall-counter strong{font-size:34px}.wall-counter>span{font-size:9px}.center-turn{font-size:11px;padding:5px 10px}.game-panel{padding:16px}.hand-zone{padding:12px 12px 10px}.hand{gap:4px}.hand .tile{width:clamp(35px,4.1vw,54px);height:clamp(55px,5.8vw,78px)}.hand .wan-num{font-size:26px}.hand .wan-char{font-size:25px}.cards-hand .playing-card{width:68px;height:100px;margin-right:-32px}.cards-hand .card-corner{font-size:23px}.hand-state{font-size:12px}.landlord-table .seat-left,.landlord-table .seat-right{min-width:115px;max-width:124px}.trick-cards .playing-card{width:50px;height:73px}.seat-self{min-width:135px;left:18px}.game-log{max-height:365px}}
@media(max-width:1000px){.game-body{display:block;padding:18px}.game-title h2{font-size:18px!important}.game-title small{font-size:10px}.game-table{min-height:418px}.hand .tile{width:clamp(42px,5.8vw,57px);height:clamp(62px,8vw,81px)}.hand .wan-num{font-size:29px}.hand .wan-char{font-size:28px}.river-left{left:149px}.river-right{right:149px}.hand-zone{margin-top:20px}.cards-hand .playing-card{width:73px;height:107px;margin-right:-31px}.game-tools .btn{font-size:11px}.game-tools .icon-btn{width:38px;height:38px}.game-screen{min-height:100svh}}
@media(max-height:800px) and (min-width:761px){.game-topbar{height:62px}.game-body{padding-top:12px}.game-table{min-height:365px}.hand-zone{min-height:196px;margin-top:16px;padding-top:9px}.hand{min-height:105px;padding-top:17px;padding-bottom:10px}.cards-hand{min-height:122px}.game-bottom{padding:5px}.hand-toolbar{padding-bottom:7px}.river{max-height:123px}.river-top{top:119px}.river-bottom{bottom:19px}.river-left,.river-right{max-height:174px;top:46%}.seat-top{top:14px;padding:8px 12px}.seat-self{bottom:14px}.seat-left,.seat-right{top:28%}.table-center{top:49%}.game-panel p{font-size:11px}.game-log{max-height:260px}.landlord-table .table-center{top:44%}}
@media(max-width:760px){.game-topbar{height:66px;padding:0 10px;gap:8px}.game-title h2{font-size:14px!important;max-width:150px}.game-title small{font-size:9px;max-width:165px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.game-title>.icon-btn{width:35px;height:40px}.game-tools{gap:2px}.game-tools .tag{display:none}.game-tools .btn{font-size:10px;padding:8px 9px;min-height:37px}.game-tools .icon-btn{width:35px;height:40px}.game-tools .icon{width:18px;height:18px}.game-body{padding:12px 10px 9px}.table-info{padding:0 3px 10px;font-size:9px;gap:9px}.table-info .tag{font-size:9px;padding:3px 6px}.table-tags{gap:5px!important}.game-table{border-width:7px;border-radius:27px;min-height:348px;box-shadow:inset 0 0 0 1px #b5a17055,inset 0 0 50px #00180e99,0 0 0 1px #b39a5e45,0 5px 0 #232d20,0 9px 18px #0004}.game-table::before{inset:9px;border-radius:15px}.game-table::after{inset:13px}.table-seat{padding:8px;border-radius:7px;gap:7px;min-width:0}.seat-left,.seat-right{top:27%;min-width:75px;max-width:82px;gap:6px;padding:9px 5px}.seat-left{left:10px}.seat-right{right:10px}.seat-top{top:12px;min-width:169px;padding:7px 12px}.seat-top .seat-avatar .portrait{width:38px;height:38px}.seat-avatar .portrait,.seat-avatar .initial-avatar{width:38px;height:38px;border-radius:6px}.seat-name{font-size:13px;white-space:nowrap}.seat-name small{font-size:8px;margin-left:3px;padding:0 3px}.seat-role{font-size:9px;padding:1px 5px;line-height:1.4;margin-top:3px}.seat-meta{font-size:8px;gap:4px;margin-top:4px}.remaining-count{font-size:20px;line-height:1}.seat-score{font-size:11px;line-height:1.2;margin-top:4px}.seat-score small{font-size:8px}.seat-self{left:11px;bottom:12px;padding:6px 8px;min-width:118px;gap:8px}.seat-self .seat-role{margin:3px 0 0}.seat-self .seat-meta{display:none}.seat-self .seat-score{font-size:10px}.seat-self .initial-avatar{width:33px;height:40px;font-size:23px}.seat-turn-label{font-size:8px;top:-8px;padding:1px 6px}.opponent-backs{gap:1px;margin-top:6px}.tile-back{width:8px;height:15px;border-radius:2px;border-bottom-width:2px}.opponent-backs .card-back{width:13px;height:21px;margin-right:-6px;border-width:1px}.card-back::after{inset:2px}.seat-bubble{font-size:9px;left:39px;top:-18px;padding:3px 6px}.seat-right .seat-bubble{right:39px}.won-hand-label{font-size:8px;max-width:64px}.other-melds{gap:4px;margin-top:6px;justify-content:center}.other-melds .tile{width:12px;height:18px;padding:1px;border-bottom-width:2px}.other-melds .wan-num,.other-melds .wan-char{font-size:7px}.table-center{width:151px;top:48%}.wall-counter{gap:5px}.wall-counter strong{font-size:31px}.wall-counter>span{font-size:9px;letter-spacing:0}.wall-counter small{font-size:8px}.table-watermark{font-size:100px}.table-round-info{font-size:9px;gap:6px;margin-top:6px}.center-turn{font-size:10px;padding:5px 9px;margin-top:11px;letter-spacing:0}.center-sub{font-size:8px;margin-top:6px}.table-center.claim-center{top:50%;width:112px;padding:8px}.claim-caption{font-size:10px}.claim-tile{margin:8px auto}.claim-tile .tile{width:34px;height:49px;padding:3px}.claim-tile .wan-num,.claim-tile .wan-char{font-size:20px}.river{grid-template-columns:repeat(6,21px);gap:2px;max-height:99px;padding:2px 2px 4px}.river .tile{width:21px;height:29px;padding:1px;border-bottom-width:3px;border-right-width:1px}.river .tile .wan-num{font-size:12px}.river .tile .wan-char{font-size:11px}.river-label{font-size:7px;padding:0}.river-top{top:102px;max-height:71px}.river-bottom{bottom:68px;max-height:71px}.river-left{left:13px;top:67%;grid-template-columns:repeat(3,19px);max-height:104px}.river-right{right:13px;top:67%;grid-template-columns:repeat(3,19px);max-height:104px}.river-left .tile,.river-right .tile{width:19px;height:27px}.own-melds{bottom:20px;right:13px;gap:6px}.meld-group .tile{width:19px;height:27px;padding:1px;border-bottom-width:3px}.meld-group .wan-num,.meld-group .wan-char{font-size:11px}.meld-label{font-size:7px;bottom:-11px}.hand-zone{margin-top:18px;padding:10px 10px 12px;border-radius:9px;min-height:0}.hand-toolbar{min-height:34px;padding:0 1px 9px;margin:0 0 5px;border-color:#b6ba8c25;gap:8px}.hand-state{font-size:11px;line-height:1.6;gap:8px}.hand-state .turn-dot{width:6px;height:6px}.hand-hints{display:none!important}.hand{display:flex;flex-direction:column;gap:9px;min-height:0;padding:18px 0 13px;align-items:center;justify-content:center}.tile-row,.card-row{display:flex;justify-content:center;align-items:flex-end;gap:5px;width:100%}.hand .tile{width:clamp(36px,10.25vw,52px);height:clamp(53px,14.6vw,75px);padding:3px 3px 2px;border-radius:4px;border-bottom-width:5px;border-right-width:1px;box-shadow:inset 1px 1px 0 #fff,0 3px 0 #3a6140,0 5px 6px #0005}.hand .wan-num{font-size:clamp(23px,6.4vw,32px);line-height:1.03}.hand .wan-char{font-size:clamp(22px,6.2vw,31px);line-height:1.05}.hand .tile.drawn{margin-left:6px}.hand .tile.selected{transform:translateY(-8px);outline-width:2px;outline-offset:1px;box-shadow:0 3px 0 #aa914e,0 8px 11px #0006}.hand .tile:hover:not(:disabled){transform:translateY(-5px)}.missing-dot{width:4px;height:4px;top:3px;right:2px}.drawn-marker{font-size:7px;padding:0 2px;line-height:1.4;right:1px;top:1px}.action-bar{gap:9px;min-height:63px}.selection-readout{display:flex!important;gap:10px;font-size:10px;line-height:1.5;min-height:17px}.selection-readout small{font-size:9px}.selection-readout b{font-size:12px}.selection-readout>span+small{padding-left:10px}.action-buttons{gap:8px;width:100%}.action-bar .btn{font-size:12px;padding:10px 14px;min-width:61px;min-height:39px;border-radius:5px}.action-bar .btn .icon{width:15px;height:15px}.action-bar .btn.primary{min-width:110px}.action-bar .btn.hu{min-width:99px}.hint-explanation{font-size:10px;line-height:1.6;padding:8px 0 0;color:#c2ceaa}.waiting-actions{flex-direction:row;min-height:36px;gap:10px}.waiting-actions .btn{font-size:10px;padding:7px 10px;min-height:32px;flex-shrink:0}.turn-wait{font-size:10px;gap:8px;line-height:1.5}.missing-choice{gap:9px;margin:10px 0 3px}.missing-choice .btn{min-width:91px;padding:10px 16px}.missing-choice b{font-size:24px}.missing-choice small{font-size:9px}.game-bottom{font-size:8px;line-height:1.7;padding:3px 16px 12px}.game-bottom>.icon{width:11px;height:11px}.landlord-table{min-height:315px}.landlord-table .seat-left,.landlord-table .seat-right{top:24%;min-width:77px;max-width:87px}.landlord-table .seat-self{min-width:116px;bottom:12px}.landlord-table .seat-self .seat-meta{display:flex;position:absolute;left:124px;bottom:9px;background:#183724bb;border:1px solid #a4b48325;border-radius:4px;padding:5px 8px;min-width:63px}.landlord-table .seat-self .remaining-count{font-size:20px}.bottom-cards{top:16px;padding:5px 7px;gap:5px;border-radius:5px}.bottom-cards .playing-card{width:29px;height:41px;border-radius:3px}.bottom-cards .card-corner{font-size:12px;left:3px;top:3px;min-width:11px}.bottom-cards .card-corner small{font-size:10px}.bottom-cards .card-illustration{display:none}.bottom-cards .card-back{width:27px;height:39px;border-width:2px}.bottom-cards .card-back span{font-size:13px}.bottom-label{top:73px;font-size:8px}.landlord-table .table-center{top:39%;width:140px}.multiplier-counter{flex-direction:column;align-items:center;gap:3px}.multiplier-counter span{font-size:8px}.multiplier-counter strong{font-size:24px}.landlord-center .table-watermark{font-size:94px}.trick-area{width:73%;top:67%}.trick-owner{gap:5px;font-size:9px;flex-wrap:wrap}.trick-owner>span{font-size:8px}.trick-owner b{font-size:11px}.trick-owner i{font-size:8px;padding:1px 4px}.trick-cards{padding:9px 0 5px}.trick-cards .playing-card{width:36px;height:53px;margin-right:min(-10px,calc((240px - 36px * var(--trick-count)) / max(1,var(--trick-count) - 1)));border-radius:3px;border-bottom-width:2px}.trick-cards .card-corner{font-size:13px;left:3px;top:3px;min-width:10px}.trick-cards .card-corner small{font-size:11px}.trick-cards .card-illustration{left:44%;right:8%;top:24%;bottom:13%;opacity:.7}.trick-caption{font-size:8px}.bid-note{font-size:11px;padding:8px 13px;max-width:190px}.bid-note .turn-dot{width:5px;height:5px}.new-trick{gap:5px}.new-trick span{font-size:9px}.new-trick strong{font-size:14px}.cards-hand{gap:12px;padding:17px 0 12px;min-height:0}.card-row{gap:0;padding-right:0}.cards-hand .playing-card{width:clamp(45px,12.6vw,52px);height:clamp(70px,18.8vw,82px);margin-right:clamp(-17px,-4.2vw,-15px);border-radius:4px;border-bottom-width:2px;box-shadow:-1px 1px 2px #102e2255,0 2px 0 #8b9479,0 5px 6px #0005}.cards-hand .playing-card:last-child{margin-right:0}.cards-hand .card-corner{font-size:19px;left:4px;top:5px;min-width:15px}.cards-hand .card-corner small{font-size:17px;margin-top:3px}.cards-hand .playing-card.selected{transform:translateY(-8px);outline:2px solid #efd185;outline-offset:0;box-shadow:0 3px 0 #998146,0 8px 10px #0005}.cards-hand .playing-card:hover{transform:translateY(-5px)}.cards-hand .card-illustration{left:39%;right:11%;top:14%;bottom:11%}.cards-hand .court-card .card-illustration{left:42%;right:9%;top:9%;bottom:8%}.cards-hand .joker-card .card-corner{font-size:15px}.cards-hand .joker-card .card-corner small{font-size:16px}.cards-hand .joker-card .card-illustration{left:40%;right:10%}.practice-art .tile{width:69px;height:98px}.practice-art .wan-num{font-size:34px}.practice-art .wan-char{font-size:32px}}
@media(max-width:400px){.game-topbar{padding:0 7px}.game-title{gap:4px!important}.game-title h2{font-size:13px!important;max-width:132px}.game-title small{max-width:146px;font-size:8px}.game-tools .icon-btn{width:32px}.game-tools .btn{padding:8px 7px}.game-body{padding-left:9px;padding-right:9px}.hand-zone{padding-left:8px;padding-right:8px}.tile-row{gap:4px}.hand .tile{width:10.3vw;height:14.8vw}.hand .tile.drawn{margin-left:4px}.cards-hand .playing-card{width:12.6vw;height:19.2vw;margin-right:-4.45vw}.action-buttons{gap:6px}.action-bar .btn{padding:9px 11px;min-width:57px;font-size:11px}.action-bar .btn.primary{min-width:97px}.selection-readout{gap:8px;font-size:9px}.selection-readout small{font-size:8px}.selection-readout>span+small{padding-left:8px}.game-table{min-height:341px}.landlord-table{min-height:311px}.seat-left,.seat-right{min-width:71px;max-width:79px}.seat-name{font-size:12px}.table-center{width:146px}.river-left{left:11px}.river-right{right:11px}.river-left,.river-right{grid-template-columns:repeat(3,18px)}.river-left .tile,.river-right .tile{width:18px;height:26px}.river-top{top:102px}.trick-area{width:75%}}

.hand .tile.selected:hover:not(:disabled){transform:translateY(-14px)}.cards-hand .playing-card.selected:hover{transform:translateY(-17px)}
@media(max-width:760px){.hand .tile.selected:hover:not(:disabled),.cards-hand .playing-card.selected:hover{transform:translateY(-8px)}}

.seat-top .seat-info,.seat-self .seat-info{display:grid;grid-template-columns:auto auto;align-items:center;gap:5px 10px}.seat-top .seat-name,.seat-self .seat-name{grid-column:1;grid-row:1}.seat-top .seat-role,.seat-self .seat-role{grid-column:2;grid-row:1;margin-top:0;justify-self:start}.seat-top .seat-meta,.seat-self .seat-meta{grid-column:1;grid-row:2;margin-top:0}.seat-top .seat-score,.seat-self .seat-score{grid-column:2;grid-row:2;margin-top:0;white-space:nowrap}.seat-top{min-width:218px}.river-top{top:111px;max-height:108px}.river-bottom{max-height:132px}.mahjong-table .table-center{top:54%}.mahjong-table .claim-center{top:53%}.river-access,.recent-discard{display:none}.river-review{margin-top:25px;padding-top:20px;border-top:1px solid var(--line)}.river-review h3{font-size:16px}.public-meld-review{margin-top:14px}.public-meld-review>small{color:var(--muted);font-size:10px}.public-meld-review .rule-examples{padding-top:8px;gap:12px}.public-meld-review .tile-back{height:40px;width:28px}
@media(max-height:800px) and (min-width:761px){.game-table{min-height:410px}.river-top{top:100px;max-height:86px}.river-bottom{max-height:92px}.seat-top{padding:8px 12px}}
@media(max-width:760px){.seat-top .seat-info,.seat-self .seat-info{gap:4px 7px}.seat-top{min-width:174px}.seat-top .remaining-count{font-size:20px}.seat-top .seat-score{font-size:10px}.seat-top .seat-score small{display:none}.seat-self .seat-info{grid-template-columns:auto;gap:4px}.seat-self .seat-name{grid-column:1}.seat-self .seat-role{grid-column:1;grid-row:2;margin:0}.seat-self .seat-score{grid-column:1;grid-row:3;margin:0}.seat-self .seat-meta{display:none}.river{display:none}.river-access{display:flex;align-items:center;gap:7px;position:absolute;right:13px;bottom:17px;padding:9px 12px;z-index:6;background:#112e21e8;border:1px solid #bac1954a;border-radius:5px;color:#ced8b8;font-size:10px;min-height:39px}.river-access .icon{width:16px;height:16px;color:#c3cb9f}.river-access b{font:15px Georgia;color:#e1cb94;margin-left:4px}.recent-discard{display:block;color:#bcc7a6;font-size:9px;margin-top:8px}.mahjong-table .table-center{top:51%;width:145px}.mahjong-table .claim-center{top:51%}.own-melds{bottom:83px;right:15px;max-width:245px;flex-wrap:wrap}.landlord-table .seat-self .seat-meta{display:flex;grid-column:auto;grid-row:auto;left:112px;bottom:9px}.seat-self{min-width:108px}.rule-examples .tile.mini{width:30px;height:44px}.rule-examples .tile.mini .wan-num{font-size:17px}.rule-examples .tile.mini .wan-char{font-size:16px}}