.playing-page{--tile-w:clamp(18px,2.7vw,44px);--tile-h:clamp(26px,5.8vh,58px);width:100%;max-width:none;height:var(--game-height,100dvh);color:#fff4d4;background:#173b30 url(/images/mahjong-teahouse.png) 50%/100% 100% no-repeat;min-height:0;padding:0;display:block;position:relative;overflow:hidden}.playing-page .game-header{z-index:50;-webkit-backdrop-filter:none;backdrop-filter:none;width:auto;height:48px;min-height:0;box-shadow:none;background:0 0;border:0;flex-wrap:nowrap;gap:10px;padding:0;position:absolute;inset:12px 18px auto}.playing-page .game-header>strong{white-space:nowrap;letter-spacing:2px;font:700 clamp(15px,1.65vw,26px) KaiTi,STKaiti,serif}.playing-page .game-header .brand-mark,.playing-page .game-score{display:none}.playing-page .game-header .rule-badge{color:#efddaf;background:#111c1bba;border:1px solid #d4bd7350;padding:8px 10px;font-size:clamp(10px,.9vw,14px);display:block}.playing-page .game-header button{color:#fff1cf;background:#14211bd9;border:1px solid #d6bd7966;border-radius:9px;height:42px;padding:0 12px;font-size:13px;box-shadow:0 3px 9px #0003}.playing-page .game-header button:hover{background:#34463bee}.playing-page .live-table-wrap,.playing-page .live-table,.playing-page .live-felt{width:100%;max-width:none;height:100%;min-height:0;box-shadow:none;background:0 0;border:0;border-radius:0;margin:0;padding:0;position:absolute;inset:0;overflow:visible;transform:none}.playing-page .live-felt{container-type:size}.playing-page .live-felt:before{display:none}.playing-page .player-zone{pointer-events:none;z-index:10;width:auto;max-width:none;height:auto;display:block;inset:0;transform:none}.playing-page .player-tag{color:#fff2d3;white-space:nowrap;background:#12221edb;border:1px solid #c4a86b70;border-radius:12px;grid-template-rows:auto auto auto;grid-template-columns:auto 1fr;gap:2px 10px;max-width:21%;padding:8px 14px 8px 8px;font-size:clamp(11px,1.25cqw,20px);display:grid;position:absolute;box-shadow:0 4px 12px #0004}.playing-page .player-tag b{text-overflow:ellipsis;font-family:KaiTi,STKaiti,serif;font-weight:500;overflow:hidden}.playing-page .player-tag i{color:#a7c9b2;grid-column:2;font-size:clamp(9px,.8cqw,12px);display:block}.playing-page .seat-balance{color:#f2d471;font-variant-numeric:tabular-nums;grid-area:2/2;font-size:clamp(12px,1.5cqw,23px)}.playing-page .seat-balance small{color:#b7c2a2;font:10px sans-serif}.playing-page .mini-avatar{color:#ead8a8;background:#385b4d;border:2px solid #d6b971;border-radius:50%;grid-row:1/4;width:clamp(34px,4.6cqw,74px);height:clamp(34px,4.6cqw,74px);position:relative;box-shadow:inset 0 0 0 4px #142e2680}.playing-page .mini-avatar svg{width:55%;height:55%}.playing-page .mini-avatar .avatar-art{object-fit:cover;border-radius:50%;width:100%;height:100%;display:block}.playing-page .mini-avatar em{background:#152c25;border:1px solid #ecd794;border-radius:50%;place-items:center;width:22px;height:22px;font:16px KaiTi,STKaiti,serif;display:grid;position:absolute;bottom:-2px;right:-3px}.playing-page .top-player .player-tag{top:1.5%;left:50%;transform:translate(-50%)}.playing-page .left-player .player-tag{grid-template-columns:1fr;justify-items:center;max-width:12%;padding:8px;top:39%;left:1.3%}.playing-page .right-player .player-tag{grid-template-columns:1fr;justify-items:center;max-width:12%;padding:8px;top:39%;right:1.3%}.playing-page :is(.left-player,.right-player) .player-tag :is(.mini-avatar,b,i,.seat-balance){grid-area:auto/1}.playing-page .self-player .player-tag{max-width:20%;bottom:20%;left:1.5%}.playing-page .active-player .player-tag{background:#203c2eea;border-color:#ffe3a0;box-shadow:0 0 0 2px #eacc713b,0 0 18px #f0d8753d}.playing-page .turn-seat-label{color:#294433;background:#efd387;border-radius:10px;padding:2px 8px;font:600 10px sans-serif;position:absolute;top:-11px;right:8px}.playing-page .hidden-hand{gap:2px;margin:0;padding:0;display:flex;position:absolute}.playing-page .top-player .hidden-hand{flex-direction:row;top:13%;left:50%;transform:translate(-50%)}.playing-page :is(.left-player,.right-player) .hidden-hand{flex-direction:column;gap:1px;top:27%}.playing-page .left-player .hidden-hand{left:16%}.playing-page .right-player .hidden-hand{right:16%}.playing-page .hidden-hand .mahjong-tile{background:#2e774c;border:1px solid #7fb889;border-top:4px solid #f3f1db;border-bottom:3px solid #1e5535;border-radius:4px;flex:none;width:clamp(16px,2.6cqw,42px);height:clamp(25px,6.3cqh,61px);margin:0;transform:none;box-shadow:0 3px 3px #071c2c70}.playing-page .hidden-hand .tile-back>span{display:none}.playing-page :is(.left-player,.right-player) .hidden-hand .mahjong-tile{border-top-width:2px;border-radius:2px;width:clamp(14px,1.7cqw,29px);height:clamp(10px,2.8cqh,27px)}.playing-page .meld-row{flex-wrap:nowrap;gap:12px;width:auto;max-width:none;padding:0;display:flex;position:absolute}.playing-page .top-player .meld-row{top:20.8%;left:50%;transform:translate(-50%)}.playing-page .left-player .meld-row{flex-direction:column;gap:15px;top:27%;left:19%}.playing-page .right-player .meld-row{flex-direction:column;gap:15px;top:27%;right:19%}.playing-page .self-player .meld-row{gap:12px;bottom:22%;left:26%}.playing-page .meld-set{gap:1px;position:relative}.playing-page .meld-label{z-index:2;color:#ffefbd;background:#694e20;border-radius:3px;padding:1px 3px;font-size:9px;position:absolute;top:-8px;left:-11px}.playing-page .meld-row .mahjong-tile{border-radius:3px;width:clamp(14px,1.8cqw,30px);height:clamp(20px,4.4cqh,42px);margin:0;transform:none}.playing-page .flower-row{background:0 0;border:0;gap:1px;max-width:12%;padding:0;display:flex;position:absolute}.playing-page .top-player .flower-row{top:13%;left:71%}.playing-page .left-player .flower-row{top:63%;left:2%}.playing-page .right-player .flower-row{top:63%;right:2%}.playing-page .self-player .flower-row{bottom:16%;left:2%}.playing-page .flower-row .mahjong-tile{width:clamp(12px,1.4cqw,23px);height:clamp(19px,3.8cqh,34px);margin:0;transform:none}.playing-page .mahjong-tile{color:#223c2a;opacity:1;background:#faf8ec;border:1px solid #dbddc6;border-bottom:3px solid #8aa67b;border-radius:5px;box-shadow:0 3px #315735,0 5px 6px #06181060}.playing-page .tile-art{object-fit:contain;width:91%;height:91%;transform:none}.playing-page .my-hand{z-index:30;perspective:none;flex-wrap:nowrap;gap:3px;width:76%;max-width:76%;padding:0;display:flex;position:absolute;bottom:7.8%;left:50%;transform:translate(-50%)}.playing-page .my-hand .mahjong-tile{touch-action:manipulation;border-top:3px solid #a1c298;border-radius:6px;flex:0 5.2cqw;width:5.2cqw;min-width:0;height:clamp(42px,12.7cqh,120px);margin:0;transition:filter .1s,box-shadow .1s;transform:translate(0,0)}.playing-page .my-hand .mahjong-tile:hover:not(:disabled),.playing-page .my-hand .mahjong-tile:active:not(:disabled){filter:brightness(1.08);outline:2px solid #f2d278;transform:translate(0,0);box-shadow:0 0 14px #f2d27880}.playing-page .my-hand .drawn-tile{outline:2px solid #ebcf85;margin-left:10px;animation:none}.playing-page .my-hand .mahjong-tile:before{display:none}.playing-page .discard-field{perspective:none;pointer-events:none;grid-template:"west north east"36%"west.east"28%"west south east"36%/24% 52% 24%;height:auto;display:grid;position:absolute;inset:29% 28% 36%;transform:none}.playing-page .discard-pile{grid-template-columns:repeat(6,max-content);place-content:start center;gap:3px 2px;width:auto;display:grid;position:relative;inset:auto;transform:none}.playing-page .pile-0{grid-area:south;place-self:end center}.playing-page .pile-2{grid-area:north;place-self:start center}.playing-page :is(.pile-1,.pile-3){grid-template-rows:repeat(6,max-content);grid-template-columns:repeat(2,max-content);grid-auto-flow:column}.playing-page .pile-1{grid-area:east;place-self:center end}.playing-page .pile-3{grid-area:west;place-self:center start}.playing-page .discard-pile .mahjong-tile{width:var(--tile-w);height:var(--tile-h);aspect-ratio:auto;border-radius:3px;min-width:0;margin:0;transform:none}.playing-page .discard-pile :is(.tile-art,.tile-symbol){width:91%;max-width:100%;height:91%;transform:none}.playing-page .fresh-discard{outline-offset:1px;outline:2px solid #ffe5a4;animation:none;box-shadow:0 0 9px #f6d47790,0 3px #496d3a}.playing-page .discard-pile-label{white-space:nowrap;color:#f3e3b7;background:#103b2bd9;border:1px solid #a7b18b40;border-radius:4px;padding:2px 6px;font-size:10px;line-height:1.2;position:absolute;top:-19px;left:50%;transform:translate(-50%)}.playing-page .table-center{color:#f5dda1;z-index:12;background:#193e33eb;border:3px solid #b99f66;border-radius:50%;flex-direction:column;justify-content:center;gap:3px;width:clamp(92px,11cqw,178px);max-width:none;height:clamp(92px,11cqw,178px);min-height:0;padding:24px 10px;display:flex;position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 4px #14291b70,inset 0 0 0 4px #f1d58614,0 8px 18px #08241850}.playing-page .table-center[hidden]{display:none}.playing-page .table-compass{pointer-events:none;position:absolute;inset:0}.playing-page .compass-seat{color:#83a58a;place-items:center;width:24px;height:24px;font:20px KaiTi,STKaiti,serif;display:grid;position:absolute}.playing-page .compass-0{bottom:3px;left:calc(50% - 12px)}.playing-page .compass-2{top:3px;left:calc(50% - 12px)}.playing-page .compass-1{top:calc(50% - 12px);right:3px}.playing-page .compass-3{top:calc(50% - 12px);left:3px}.playing-page .compass-active{color:#ffe097;text-shadow:0 0 12px #eed488}.playing-page .table-center .turn-announcement{color:#eee4c3;white-space:nowrap;letter-spacing:0;background:#123327da;border-radius:20px;width:max-content;max-width:230px;padding:4px 10px;font-size:clamp(10px,1cqw,15px);position:absolute;top:calc(100% + 13px);left:50%;transform:translate(-50%)}.playing-page .table-center .your-turn{color:#1d4932;background:#efd48b}.playing-page .table-center .turn-timer{width:auto}.playing-page .turn-timer>span{color:#f1db9c;font-size:clamp(18px,2.5cqw,38px);line-height:1}.playing-page .turn-timer svg,.playing-page .turn-timer>i{display:none}.playing-page .table-center>span:last-child{color:#a4c4ac;font-size:10px;display:block}.playing-page .table-signature{text-align:center;color:#0a412ebb;letter-spacing:5px;pointer-events:none;font:700 clamp(18px,2.6cqw,38px) KaiTi,STKaiti,serif;position:absolute;top:65%;left:50%;transform:translate(-50%)}.playing-page .table-signature span{letter-spacing:4px;margin-top:3px;font-size:clamp(9px,.9cqw,14px);display:block}.playing-page .claim-context,.playing-page .last-action-call{z-index:25;color:#f4e7c2;pointer-events:none;white-space:nowrap;background:#152d21e8;border:1px solid #d6bd7670;border-radius:7px;align-items:center;gap:7px;padding:4px 10px;font-size:clamp(10px,1cqw,15px);display:flex;position:absolute}.playing-page .claim-context{top:21%;left:50%;transform:translate(-50%)}.playing-page .last-action-call{max-width:25%;top:69%;right:3%;transform:none}.playing-page .claim-context .mahjong-tile,.playing-page .last-action-call .mahjong-tile{flex:none;width:clamp(18px,1.7cqw,28px);height:clamp(26px,4cqh,38px);margin:0}.playing-page .action-bar{width:max-content;max-width:73%;box-shadow:none;z-index:35;background:0 0;border:0;border-radius:0;flex-wrap:wrap;justify-content:center;gap:12px;padding:0;display:flex;position:absolute;bottom:23.5%;left:50%;transform:translate(-50%)}.playing-page .action-bar button{color:#fff6db;background:#377a66;border:2px solid #ffffff65;border-bottom:4px solid #102c2e75;border-radius:999px;justify-content:center;align-items:center;gap:7px;min-width:clamp(58px,8.5cqw,135px);height:clamp(38px,8cqh,72px);min-height:38px;padding:4px 16px;font:700 clamp(24px,3.4cqw,50px) KaiTi,STKaiti,serif;display:flex;box-shadow:inset 0 3px 5px #ffffff40,0 4px 7px #001b2370}.playing-page .action-bar button:hover{filter:brightness(1.13)}.playing-page .action-bar button small{white-space:normal;max-width:105px;font:500 clamp(10px,.85cqw,13px) sans-serif}.playing-page .action-bar .action-peng{background:#247dba}.playing-page .action-bar .action-gang{background:#c58829}.playing-page .action-bar .action-hu{background:#b83f41}.playing-page .action-bar .action-pass{background:#636c69}.playing-page .win-replay{background:#132c22f5;border:1px solid #caae6c;border-radius:14px;width:max-content;min-width:0;max-width:40%;padding:16px 24px;top:47%;box-shadow:0 12px 35px #0005}.playing-page .win-replay>strong{color:#f2d184;font:700 clamp(18px,2.5cqw,36px) KaiTi,STKaiti,serif}.playing-page .win-replay>button{color:#274330;background:#e7c77e}.playing-page .result-panel{color:#f3e6bf;background:#17392e;border:1px solid #ccaf70}.playing-page .chat-dock,.playing-page .table-help{display:none}.playing-page .discard-field{grid-template-rows:28% 44% 28%;top:25%;bottom:31%}.playing-page .table-center .turn-announcement{white-space:nowrap;background:0 0;order:2;width:auto;max-width:none;margin-top:2px;padding:2px 4px;font-size:clamp(9px,.75cqw,12px);position:static;transform:none}.playing-page .table-center .your-turn{color:#ffe193}.playing-page .claim-context{top:20.5%;left:33%}.playing-page .top-player .meld-row{top:20.5%;left:61%}.playing-page .self-player .meld-row{bottom:1.5%;left:50%;transform:translate(-50%)}.playing-page .table-center{flex-wrap:nowrap;width:clamp(86px,9cqw,150px);height:clamp(86px,9cqw,150px)}.playing-page .table-center .turn-announcement{flex-shrink:1;height:auto;min-height:0;line-height:1.2}.playing-page .top-player .meld-row .mahjong-tile,.playing-page .left-player .meld-row .mahjong-tile,.playing-page .right-player .meld-row .mahjong-tile{width:clamp(14px,1.8cqw,30px);height:clamp(20px,4.4cqh,42px)}.playing-page .action-bar{bottom:21.5%}.playing-page .table-signature{font-size:clamp(16px,1.9cqw,28px);top:72%}.playing-page .hidden-hand .mahjong-tile{background:#2e774c;border-top:4px solid #f3f1db}@media (orientation:landscape) and (max-height:600px){.playing-page .game-header{gap:6px;height:30px;inset:5px 9px auto}.playing-page .game-header button{height:29px;min-height:29px;padding:0 8px;font-size:10px}.playing-page .game-header .rule-badge{padding:5px 7px}.playing-page .game-header>strong{letter-spacing:1px;font-size:15px}.playing-page .player-tag{border-radius:7px;column-gap:5px;padding:4px 7px}.playing-page .mini-avatar{width:35px;height:35px}.playing-page .mini-avatar em{width:17px;height:17px;font-size:12px}.playing-page .player-tag i{font-size:8px}.playing-page .top-player .player-tag{top:2%}.playing-page .top-player .player-tag i{display:none}.playing-page .top-player .mini-avatar{grid-row:1/3}.playing-page .seat-balance small{display:none}.playing-page .table-center{border-width:2px;width:83px;height:83px;padding:19px 8px}.playing-page .compass-seat{width:18px;height:18px;font-size:15px}.playing-page .compass-0,.playing-page .compass-2{left:calc(50% - 9px)}.playing-page .compass-1,.playing-page .compass-3{top:calc(50% - 9px)}.playing-page .turn-timer>span{font-size:21px}.playing-page .table-center>span:last-child{font-size:8px}.playing-page .table-center .turn-announcement{padding:2px 7px;top:calc(100% + 7px)}.playing-page .discard-pile-label{padding:1px 4px;font-size:8px;top:-13px}.playing-page .discard-pile{gap:2px 1px}.playing-page .claim-context{gap:4px;padding:2px 7px;top:21%}.playing-page .last-action-call{gap:4px;padding:2px 6px;font-size:9px;right:2%}.playing-page .action-bar{gap:8px}.playing-page .action-bar button{border-width:1px 1px 3px;padding:3px 10px}.playing-page .table-center .turn-announcement{padding:0;font-size:8px}}@media (orientation:portrait){.playing-page{--tile-w:5.6vw;--tile-h:4.4vh;background-size:auto 100%}.playing-page .game-header{gap:5px;height:34px;inset:6px}.playing-page .game-header>strong{font-size:15px}.playing-page .game-header .rule-badge{display:none}.playing-page .game-header button{height:30px;padding:0 6px;font-size:10px}.playing-page .top-player .player-tag{max-width:48%;top:7%}.playing-page .player-tag{font-size:12px}.playing-page .top-player .hidden-hand{top:16%}.playing-page .hidden-hand .mahjong-tile{width:4vw;height:4vh}.playing-page :is(.left-player,.right-player) .player-tag{max-width:21%;top:28%}.playing-page :is(.left-player,.right-player) .hidden-hand{display:none}.playing-page .self-player .player-tag{max-width:43%;bottom:24%}.playing-page .discard-field{inset:29% 22% 41%}.playing-page .discard-pile-label{font-size:8px;top:-13px}.playing-page .table-center{width:85px;height:85px;padding:22px 7px;top:44%}.playing-page .table-center .turn-announcement{font-size:9px}.playing-page .table-signature{font-size:22px;top:61%}.playing-page .my-hand{grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;width:94%;max-width:94%;display:grid;bottom:5%}.playing-page .my-hand .mahjong-tile{width:100%;height:8vh;margin:0}.playing-page .action-bar{gap:5px;max-width:95%;bottom:23%}.playing-page .action-bar button{min-width:45px;height:40px;padding:3px 10px;font-size:24px}.playing-page .action-bar button small{font-size:9px}.playing-page .claim-context{top:21.5%;left:50%}.playing-page .last-action-call{max-width:none;font-size:9px;top:63%;right:3%}.playing-page .self-player .meld-row{bottom:20.5%;left:48%}.playing-page .top-player .meld-row{top:25%}.playing-page .left-player .meld-row{top:48%;left:1%}.playing-page .right-player .meld-row{top:48%;right:1%}.playing-page .meld-row .mahjong-tile{width:14px;height:21px}.playing-page .win-replay{max-width:80%}}@media (prefers-reduced-motion:reduce){.playing-page .mahjong-tile{transition:none;animation:none}}