:root{
  color-scheme:dark;--bg:#0c201b;--panel:#14372d;--felt:#1b5a43;--felt-deep:#174c39;
  --ivory:#f3efdf;--muted:#a8beb0;--gold:#c7aa75;--line:#d7c29238;
  --red:#aa5145;--tile-w:clamp(34px,3.6vw,52px);--small-w:clamp(20px,2.05vw,29px);--back-w:clamp(13px,1.5vw,20px);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;color:var(--ivory);background:var(--bg)
}
*{box-sizing:border-box}html,body{margin:0;min-width:320px;min-height:100%}body{background:#0c211b}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}[hidden]{display:none!important}
.app-shell{height:100dvh;min-height:320px;display:flex;flex-direction:column;overflow:hidden}
.topbar{height:55px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,2vw,34px);background:#0e2921;border-bottom:1px solid var(--line);gap:18px}
.brand{display:flex;align-items:center;gap:10px;white-space:nowrap}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--gold);border-radius:6px;color:var(--gold);font:700 23px "Songti SC",serif}
.brand strong{display:block;font-size:15px;letter-spacing:.08em}.brand small{display:block;font-size:10px;color:var(--muted);letter-spacing:.13em;margin-top:2px}
.top-meta{display:flex;align-items:center;gap:18px;color:var(--muted);font-size:12px}.room-label strong{font-size:15px;color:var(--ivory);letter-spacing:.08em}.network-status{white-space:nowrap}.network-status:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#a97356;margin-right:6px}.network-status.online:before{background:#8fc5a0}.utility-link{color:var(--muted);text-decoration:none}.utility-link:hover{color:var(--ivory)}
main{flex:1;min-height:0;display:flex;flex-direction:column}
.section-kicker{display:block;color:var(--gold);font-size:11px;letter-spacing:.13em;font-weight:600}
button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid #e4cf9b;outline-offset:2px}
.primary-button,.secondary-button,.ghost-button{min-height:39px;border-radius:7px;padding:0 18px;font-weight:650;white-space:nowrap;border:1px solid var(--gold)}
.primary-button{background:var(--gold);color:#16392d}.primary-button:hover{background:#dfc18a}.secondary-button{background:#24634b;color:var(--ivory)}.secondary-button:hover{background:#2e7659}
.ghost-button{background:transparent;border-color:#c8c8a066;color:var(--ivory)}.ghost-button:hover{background:#ffffff12}
.lobby-panel{width:min(980px,calc(100% - 44px));height:min(555px,calc(100dvh - 90px));min-height:280px;margin:auto;display:grid;grid-template-columns:1fr 1.05fr;grid-template-rows:auto 1fr auto;column-gap:clamp(24px,6vw,80px);row-gap:14px;padding:clamp(20px,3vw,42px);border:1px solid var(--line);border-radius:16px;background:#12382d;box-shadow:0 24px 70px #04110d88}
.lobby-heading{grid-column:1;grid-row:1}.lobby-heading h1{font-family:"Songti SC",serif;font-weight:700;font-size:clamp(28px,3.2vw,43px);line-height:1.12;margin:13px 0 12px}.lobby-heading p{font-size:13px;color:var(--muted);line-height:1.6;margin:0;max-width:25em}
.lobby-profile{grid-column:1;grid-row:2;display:grid;grid-template-columns:56px 1fr;align-content:center;gap:8px 14px;max-width:350px}.avatar{width:38px;height:38px;display:grid;place-items:center;flex:none;border-radius:50%;background:#2a634d;border:1px solid #bbad7f;color:#f2dfb4;font-family:"Songti SC",serif;font-size:20px}.avatar-large{width:56px;height:56px;font-size:28px;grid-row:span 2}.lobby-profile label{font-size:11px;color:var(--muted);display:flex;flex-direction:column;gap:4px}.lobby-profile input,.reconnect-form input{height:34px;border:1px solid #aac5ab69;background:#0e2a22;border-radius:6px;color:var(--ivory);padding:0 10px;min-width:0}.guest-note{grid-column:2;font-size:10px;color:#a8bcae;line-height:1.4}
.lobby-actions{grid-column:2;grid-row:1/span 2;display:flex;flex-direction:column;justify-content:center;gap:12px}.entry-button{display:flex;align-items:center;text-align:left;gap:16px;width:100%;min-height:85px;padding:14px 19px;background:#1b4d3a;color:var(--ivory);border:1px solid #d7c29255;border-radius:10px}.entry-button:hover{background:#246247;border-color:var(--gold)}.entry-button.entry-primary{background:#caad77;color:#12372b;border-color:#e2c995}.entry-button.entry-primary:hover{background:#e0c58e}.entry-button>span:nth-child(2){flex:1;display:flex;flex-direction:column;gap:4px}.entry-button strong{font-size:18px}.entry-button small{font-size:11px;opacity:.75}.entry-button>span:last-child{font-size:28px;font-weight:300}.entry-symbol{font-family:"Songti SC",serif;font-size:27px;width:34px;text-align:center}
.lobby-secondary{grid-column:1;grid-row:3;display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:11px}.lobby-secondary button{background:none;border:0;padding:0;color:var(--muted)}.lobby-secondary a{color:var(--gold);text-decoration:none}
.reconnect-box{grid-column:2;grid-row:3;color:var(--muted);font-size:11px;align-self:end}.reconnect-box summary{cursor:pointer}.reconnect-form{display:flex;align-items:end;gap:7px;margin-top:9px}.reconnect-form label{display:grid;gap:4px;min-width:0}.reconnect-form input{width:110px;height:32px}.reconnect-form label:nth-child(2){flex:1}.reconnect-form label:nth-child(2) input{width:100%}.reconnect-form button{min-height:32px;padding:0 9px;font-size:11px}
.waiting-view{width:min(960px,calc(100% - 36px));margin:auto;display:flex;flex-direction:column;gap:20px;padding:25px 32px;border-radius:14px;border:1px solid var(--line);background:#12382d;max-height:calc(100dvh - 85px);overflow:auto}.waiting-heading{display:flex;justify-content:space-between;align-items:center}.waiting-heading h1{font:700 clamp(23px,3vw,35px) "Songti SC",serif;margin:8px 0 0}.waiting-code{color:#ead8b1;font-size:28px;letter-spacing:.15em}.waiting-info{display:flex;gap:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;color:var(--muted);font-size:12px;flex-wrap:wrap}.waiting-seats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.waiting-seat{display:flex;align-items:center;gap:9px;min-width:0;padding:15px 10px;background:#194734;border:1px solid #b6bd9655;border-radius:9px}.waiting-seat.is-ready{border-color:var(--gold)}.wind-badge{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:5px;background:#d2bc87;color:#183c31;font:700 16px "Songti SC",serif}.waiting-player{display:grid;gap:3px;min-width:0}.waiting-player strong{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.waiting-player small{font-size:10px;color:var(--muted)}.waiting-controls{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap}.waiting-text{text-align:center;font-size:12px;color:var(--muted);margin:0}
.game-area{height:100%;min-height:0;display:flex;flex-direction:column;padding:8px clamp(8px,1.6vw,22px) 9px;gap:7px}.match-strip{height:38px;flex:none;display:flex;align-items:center;justify-content:space-around;gap:9px;background:#14392d;border:1px solid var(--line);border-radius:8px;padding:0 18px;color:#a9c0ae;font-size:12px;white-space:nowrap}.match-strip strong{font-variant-numeric:tabular-nums;color:var(--ivory);font-size:14px}.countdown{font-variant-numeric:tabular-nums;color:#e1c383;font-size:19px;font-weight:750;min-width:53px;text-align:right}.countdown.urgent{color:#ef8d79}
.table-scroll{flex:1;min-height:0;display:flex}.mahjong-table{position:relative;isolation:isolate;width:100%;height:100%;min-height:0;overflow:hidden;background:#1b5b44;border:8px solid #3c352b;border-radius:25px;box-shadow:inset 0 0 0 2px #ab956b,inset 0 9px 28px #0a3326c7,0 7px 0 #27241e}.mahjong-table:before{content:"";position:absolute;inset:10px;border:1px solid #dbc38f42;border-radius:15px;pointer-events:none}
.player-area{position:absolute;z-index:1;display:flex;flex-direction:column;gap:3px;min-width:0;overflow:hidden;padding:4px 6px;border:1px solid transparent;border-radius:8px}.player-area.active-player{background:#e4c88813;border-color:#ddc78eaa}.player-area.response-player{border-color:#e9e4b7a8}.player-top{top:2%;left:28%;width:44%;height:27%}.player-left{top:23%;left:2%;width:25%;height:47%}.player-right{top:23%;right:2%;width:25%;height:47%}.player-bottom{bottom:1%;left:10%;width:80%;height:34%}
.player-header{display:flex;align-items:center;gap:6px;background:#0e392dcd;border-radius:6px;padding:3px 6px;min-height:28px}.player-identity{display:flex;flex-direction:column;min-width:0;gap:1px}.player-identity strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-identity small{font-size:9px;color:#b4ccb9;white-space:nowrap}.player-points{margin-left:auto;font-size:13px;color:#f3d9a1;font-weight:700;white-space:nowrap}.empty-seat{margin:auto;color:#d1ddc781}
.opponent-hand,.river,.meld-row,.flower-row{display:flex;align-items:flex-start;align-content:flex-start;flex-wrap:wrap;gap:1px;min-height:0}.opponent-hand{flex-wrap:nowrap;overflow:hidden;flex:none}.river{overflow:hidden;flex:1}.player-top .river,.player-bottom .river{max-width:75%}.player-left .river,.player-right .river{max-height:62%}.area-caption{font-size:9px;color:#d2dac1;line-height:1.1}.meld-row,.flower-row{flex:none;max-height:26%;overflow:hidden}.meld-group{display:flex;align-items:center;background:#0833268f;border-radius:3px;padding:1px;gap:1px}.meld-group small{font-size:9px;color:#ead39d}.player-bottom>.area-caption,.player-bottom>.river,.player-bottom>.meld-row,.player-bottom>.flower-row{display:none}
.own-hand{display:flex;align-items:flex-end;justify-content:center;gap:2px;min-height:0;margin-top:auto;width:100%;overflow:visible;padding-top:12px}.mahjong-tile{width:var(--tile-w);height:calc(var(--tile-w)*1.37);position:relative;display:inline-block;flex:none;margin:0;padding:0;border:0;background:none;vertical-align:bottom;touch-action:manipulation;transition:transform .12s ease,filter .12s ease}.mahjong-tile svg{display:block;width:100%;height:100%;filter:drop-shadow(1px 2px 1px #07251caa)}.mahjong-tile.tile-small{width:var(--small-w);height:calc(var(--small-w)*1.37)}.opponent-hand .mahjong-tile{width:var(--back-w);height:calc(var(--back-w)*1.37)}.own-hand button{cursor:pointer}.own-hand button:hover{transform:translateY(-4px)}.own-hand button.selected{transform:translateY(-9px);filter:drop-shadow(0 0 3px #ecd48f)}.own-hand button.drawn{margin-left:clamp(5px,1vw,13px)}.mahjong-tile.highlight{filter:drop-shadow(0 0 4px #f4da8e);transform:translateY(-2px)}
.table-center{position:absolute;left:43%;top:44%;width:14%;height:11%;border:1px solid #d3bd895e;background:#164a37d9;border-radius:5px;display:grid;place-items:center;color:#e7d5ad;font:600 11px "Songti SC",serif;text-align:center;pointer-events:none}
.control-dock{min-height:54px;flex:none;display:flex;align-items:center;justify-content:center;gap:12px;background:#12382d;border:1px solid var(--line);border-radius:8px;padding:5px 12px}.turn-hint{color:#b9cdbb;font-size:12px;min-width:220px;text-align:center}.actions{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}.action-button{min-height:38px;padding:4px 13px;border-radius:7px;border:1px solid #d1bb8e9e;background:#245b45;color:#f3ecd8;font-size:12px;font-weight:650}.action-button:hover{background:#367556}.action-button.win-button{background:#a65442;color:#fff4df;border-color:#d7a680}.action-button.pass-button{background:#25463a;color:#d4ddcf}.session-details{font-size:10px;color:var(--muted);align-self:center}.session-details summary{cursor:pointer}.session-details p{margin:3px}.session-details code{word-break:break-all}
.toast{position:fixed;z-index:50;top:60px;left:50%;transform:translate(-50%,-9px);max-width:min(90vw,520px);padding:10px 16px;border:1px solid #d4bf8b;border-radius:7px;background:#e9dfc5;color:#173b2d;box-shadow:0 10px 30px #0008;font-size:12px;opacity:0;pointer-events:none;transition:.18s}.toast.show{opacity:1;transform:translate(-50%,0)}
.modal-backdrop{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:12px;background:#071811dc;backdrop-filter:blur(3px)}.dialog-card,.result-card{position:relative;width:min(96vw,520px);max-height:94dvh;overflow:auto;border:1px solid #c7af7d91;border-radius:12px;background:#163e30;padding:clamp(18px,2.6vw,30px);box-shadow:0 23px 60px #000a}.dialog-card h2,.result-card h2{font:700 clamp(25px,3vw,34px) "Songti SC",serif;margin:9px 0 20px}.modal-close{position:absolute;right:16px;top:12px;background:none;color:#d4c7a5;border:0;font-size:25px}.setting-list{border-top:1px solid var(--line)}.setting-list>div{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);padding:12px 0;font-size:12px;color:#b9cebf}.setting-list strong{font-weight:500;color:var(--ivory);text-align:right}.modal-disclaimer{color:var(--muted);font-size:11px;line-height:1.5}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:18px}
.join-code{width:100%;height:49px;text-align:center;background:#0f2e25;border:1px solid #baa77e;border-radius:7px;color:var(--ivory);font-size:29px;letter-spacing:.28em;font-variant-numeric:tabular-nums}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}.keypad-key{min-height:37px;background:#215441;color:var(--ivory);border:1px solid #b9bc9659;border-radius:5px;font-size:16px}.keypad-key:hover{background:#2e7054}.keypad-key:nth-last-child(3),.keypad-key:last-child{font-size:11px}
.result-card{text-align:center;width:min(96vw,640px)}.result-card h2{margin-bottom:5px}.result-subtitle{color:#e8d5ad;font-size:14px;margin:0 0 12px}.winning-tile{display:flex;justify-content:center;min-height:0}.winning-tile .mahjong-tile{width:48px;height:66px}.pattern-list{display:flex;justify-content:center;flex-wrap:wrap;gap:5px;margin:11px 0}.pattern-chip{font-size:11px;color:#edd8a6;border:1px solid #c9b78083;background:#234d3c;padding:5px 8px;border-radius:4px}.score-grid,.standing-list{display:grid;gap:3px;text-align:left}.score-row,.standing-row{display:grid;align-items:center;grid-template-columns:1fr 85px 110px;gap:8px;padding:9px 12px;background:#ffffff0b;border-bottom:1px solid #d7c29228;font-size:12px}.score-row strong{text-align:right;color:#f0cf8e;font-size:17px}.score-row small{text-align:right;color:#afc5b4}.standing-row{grid-template-columns:38px 1fr 90px 110px}.standing-row .rank{color:#efcf92;font:700 23px "Songti SC",serif}.standing-row strong{text-align:right;color:#f0d7a1;font-size:16px}.standing-row span:last-child{text-align:right;color:var(--muted);font-size:11px}.result-note{color:var(--muted);font-size:11px;margin:11px 0}.match-details{display:flex;justify-content:center;gap:8px 18px;flex-wrap:wrap;margin-top:15px;color:var(--muted);font-size:11px}.match-id{font-size:10px;color:var(--muted);word-break:break-all}.match-id code{color:#ead4a2}.match-card{width:min(96vw,710px)}
@media(max-width:900px){
  :root{--tile-w:35px;--small-w:18px;--back-w:12px}
  .topbar{height:38px;padding:0 12px}.brand-mark{width:27px;height:27px;font-size:18px}.brand strong{font-size:12px}.brand small{display:none}.top-meta{font-size:10px;gap:10px}
  .game-area{padding:4px 5px 5px;gap:4px}.match-strip{height:27px;padding:0 8px;font-size:9px;gap:4px}.match-strip strong{font-size:10px}.countdown{font-size:14px;min-width:35px}
  .mahjong-table{border-width:5px;border-radius:15px;box-shadow:inset 0 0 0 1px #ab956b,inset 0 8px 20px #0a3326a9}.mahjong-table:before{inset:5px;border-radius:9px}
  .player-area{padding:2px 3px;gap:1px}.player-header{min-height:20px;padding:1px 3px;gap:3px}.wind-badge{width:18px;height:18px;font-size:11px}.player-identity strong{font-size:9px}.player-identity small{font-size:7px}.player-points{font-size:9px}.area-caption{display:none}
  .player-top{top:1%;left:28%;width:44%;height:27%}.player-left,.player-right{top:23%;width:26%;height:47%}.player-left{left:1%}.player-right{right:1%}.player-bottom{bottom:0;left:8%;width:84%;height:35%}
  .opponent-hand .mahjong-tile{width:var(--back-w);height:calc(var(--back-w)*1.37)}.player-left .opponent-hand,.player-right .opponent-hand{max-height:18px}
  .table-center{font-size:9px}.own-hand{gap:1px;padding-top:9px}.control-dock{min-height:39px;padding:2px 5px;gap:5px}.turn-hint{min-width:0;font-size:9px}.action-button{min-height:34px;padding:2px 7px;font-size:10px}.control-dock .ghost-button{min-height:34px;padding:0 7px;font-size:10px}.session-details{display:none}
  .lobby-panel{width:calc(100% - 20px);height:calc(100dvh - 55px);min-height:0;padding:18px;column-gap:25px}.lobby-heading h1{font-size:26px}.lobby-heading p{font-size:11px}.entry-button{min-height:65px;padding:8px 12px}.entry-button strong{font-size:15px}.entry-button small{font-size:10px}.lobby-actions{gap:8px}
  .waiting-view{width:calc(100% - 16px);max-height:calc(100dvh - 45px);padding:13px;gap:10px}.waiting-heading h1{font-size:23px}.waiting-code{font-size:21px}.waiting-info{padding:6px 0;font-size:10px}.waiting-seat{padding:6px;gap:5px}.waiting-seat .avatar{width:25px;height:25px;font-size:13px}.waiting-controls button{min-height:32px;font-size:11px}
  .dialog-card,.result-card{padding:14px 19px}.dialog-card h2,.result-card h2{font-size:25px;margin:5px 0 10px}.setting-list>div{padding:6px 0}.modal-disclaimer{margin:7px 0}.dialog-actions{margin-top:9px}.join-code{height:40px}.keypad{gap:4px;margin-top:7px}.keypad-key{min-height:30px}.result-subtitle{font-size:11px;margin:0 0 5px}.winning-tile .mahjong-tile{width:35px;height:48px}.pattern-list{margin:5px 0}.score-row,.standing-row{padding:4px 8px;font-size:10px}.score-row strong,.standing-row strong{font-size:13px}.result-note{margin:5px 0}.match-details{margin-top:6px}
}
@media(max-width:680px) and (orientation:portrait){
  .app-shell{min-height:100dvh;height:auto;overflow:auto}.lobby-panel{height:auto;min-height:calc(100dvh - 58px);grid-template-columns:1fr;grid-template-rows:auto auto auto auto auto;gap:18px}.lobby-heading,.lobby-profile,.lobby-actions,.lobby-secondary,.reconnect-box{grid-column:1;grid-row:auto}.lobby-profile{align-content:start}.game-area{min-height:calc(100dvh - 38px)}.table-scroll{overflow-x:auto}.mahjong-table{min-width:680px;min-height:350px}.waiting-seats{grid-template-columns:repeat(2,1fr)}.match-strip{overflow-x:auto;justify-content:flex-start}.control-dock{flex-wrap:wrap}.turn-hint{width:100%}
}
@media(max-height:420px) and (orientation:landscape){
  :root{--tile-w:31px;--small-w:16px;--back-w:11px}.player-bottom{height:37%}.own-hand{padding-top:6px}.control-dock{min-height:36px}.action-button{min-height:31px}.lobby-panel{height:calc(100dvh - 48px)}.lobby-secondary{gap:9px}.reconnect-box{font-size:10px}.waiting-view{gap:7px}.waiting-seats{gap:6px}
}
.table-zones{display:flex;gap:4px;flex:1;min-height:0;overflow:hidden}.river-block{flex:1;min-width:0;overflow:hidden}.river-block .river{max-width:100%;max-height:100%;overflow:hidden}.meld-block,.flower-block{flex:none;max-width:36%;overflow:hidden}.meld-block .meld-row,.flower-block .flower-row{max-height:none}.player-left .table-zones,.player-right .table-zones{flex-direction:column}.player-left .meld-block,.player-right .meld-block,.player-left .flower-block,.player-right .flower-block{max-width:100%;max-height:30%}.player-bottom>.table-zones{flex:none;height:calc(var(--small-w)*1.5);width:100%}.player-bottom>.table-zones .river-block{max-width:56%}.player-bottom>.table-zones .meld-block,.player-bottom>.table-zones .flower-block{max-width:22%}
.player-left,.player-right{height:39%}.player-left .river-block,.player-right .river-block{flex:0 0 auto;max-height:62%}.player-left .table-zones,.player-right .table-zones{justify-content:flex-start}.player-left .meld-block,.player-right .meld-block,.player-left .flower-block,.player-right .flower-block{max-height:38%}
.river-block,.meld-block,.flower-block{overflow:auto;scrollbar-width:thin;scrollbar-color:#c8b6837a transparent}.river-block .river,.meld-block .meld-row,.flower-block .flower-row{max-height:none;overflow:visible}
@media(max-height:420px) and (orientation:landscape){:root{--tile-w:38px}.player-left,.player-right{height:36%}.player-bottom{height:40%}}
.table-zones .river-block,.table-zones .meld-block,.table-zones .flower-block{scrollbar-width:none}.table-zones .river-block::-webkit-scrollbar,.table-zones .meld-block::-webkit-scrollbar,.table-zones .flower-block::-webkit-scrollbar{display:none}

/* Records, detail, replay and statistics use the table's existing colors and controls. */
.data-page{height:100%;min-height:0;width:min(1160px,100%);margin:0 auto;padding:18px clamp(14px,3vw,32px) 28px;overflow:auto;scrollbar-color:#b5a57769 transparent}
.data-toolbar{display:flex;align-items:center;gap:16px;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--line)}
.data-toolbar>div{flex:1;min-width:0}.data-toolbar h1{font:700 clamp(23px,2.6vw,34px) "Songti SC",serif;margin:3px 0 0}.data-toolbar button{flex:none}
.data-heading{font:700 19px "Songti SC",serif;color:#eddbb6;margin:20px 0 10px}.data-status,.data-muted{font-size:12px;color:var(--muted);line-height:1.5}.data-status{min-height:18px;margin:12px 0}.records-list{display:grid;gap:10px}
.record-card,.detail-round,.stats-card,.replay-seat{border:1px solid var(--line);background:#153c2f;border-radius:9px}
.record-card{padding:13px 16px}.record-head,.record-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.record-head strong{font-size:16px;color:#f0d5a3}.record-head span{font-size:11px;color:var(--muted)}.record-card p{margin:9px 0;overflow-wrap:anywhere}.record-footer{border-top:1px solid var(--line);padding-top:9px;font-size:12px}.record-footer strong{color:#eed39c}.record-footer button{min-height:32px}
.detail-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.detail-field{min-width:0;background:#153c2f;border:1px solid var(--line);border-radius:7px;padding:9px 11px}.detail-field small,.stats-card small,.replay-seat small{display:block;color:var(--muted);font-size:11px}.detail-field strong{display:block;color:#f0e2c5;font-size:12px;overflow-wrap:anywhere;margin-top:4px}.detail-scores,.detail-rounds{display:grid;gap:5px}.detail-score{display:grid;grid-template-columns:100px 1fr 90px 115px;align-items:center;gap:8px;padding:10px 12px;background:#153c2f;border-bottom:1px solid var(--line);font-size:12px}.detail-score strong{font-size:14px}.detail-score span:nth-child(3){color:#eed39c;font-weight:700;text-align:right}.detail-score span:last-child{text-align:right;color:var(--muted)}
.detail-round{overflow:hidden}.detail-round-head{display:grid;grid-template-columns:105px 1fr 70px;gap:10px;align-items:center;padding:11px 15px;cursor:pointer;list-style:none;font-size:12px}.detail-round-head::-webkit-details-marker{display:none}.detail-round-head strong{color:#eed39c}.detail-round-head span:last-child{text-align:right}.detail-round[open] .detail-round-head{border-bottom:1px solid var(--line)}.detail-round-body{padding:8px 15px 13px}.detail-round-body .pattern-list{justify-content:flex-start}.round-score-line{display:grid;grid-template-columns:1fr 90px 110px;gap:10px;border-bottom:1px solid #d4c19524;padding:5px 0;font-size:11px}.round-score-line strong{color:#eed39c;text-align:right}.round-score-line span:last-child{text-align:right;color:var(--muted)}.detail-round-body button{margin-top:10px;min-height:31px}
.replay-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0}.replay-controls label{font-size:12px;color:var(--muted)}.replay-controls select{background:#173e31;color:var(--ivory);border:1px solid var(--line);border-radius:5px;padding:7px}.replay-controls button{min-height:32px;padding:0 11px}.replay-controls input[type=range]{flex:1;min-width:120px;accent-color:#c9ab77}.replay-controls span{font-size:11px;color:var(--muted)}.replay-meta{font-size:12px;color:#e9d4a8;margin:4px 0 10px}.replay-seats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.replay-seat{min-width:0;padding:10px}.replay-seat.replay-own{border-color:#d1b978}.replay-seat>strong{display:block;font-size:12px;margin-bottom:8px}.replay-seat small{margin:6px 0 3px}.replay-tiles{display:flex;flex-wrap:wrap;gap:2px;min-height:12px}.replay-tiles .mahjong-tile{width:21px;height:29px}.replay-result{color:#efcf92;font-size:13px}
.stats-totals,.stats-ranks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.stats-totals{grid-template-columns:repeat(3,minmax(0,1fr))}.stats-card{padding:12px 16px}.stats-card strong{display:block;color:#eed39c;font-size:24px;margin-top:5px;font-variant-numeric:tabular-nums}.stats-fans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:start}.fan-group{background:#153c2f;border:1px solid var(--line);border-radius:8px;padding:9px 11px}.fan-group h3{font-size:13px;color:#eed39c;margin:0 0 5px}.fan-row{display:flex;justify-content:space-between;gap:9px;border-top:1px solid #d4c1951e;padding:5px 0;font-size:11px}.fan-row strong{font-variant-numeric:tabular-nums;color:#e7d4ae}.stats-supplemental{margin:14px 0 0}
@media(max-width:900px){.data-page{padding:8px 12px 22px}.data-toolbar{padding-bottom:7px;gap:7px}.data-toolbar h1{font-size:22px}.data-toolbar button{min-height:31px;padding:0 8px;font-size:11px}.data-heading{font-size:16px;margin:13px 0 7px}.data-status{margin:6px 0}.record-card{padding:9px 11px}.detail-field{padding:6px}.detail-score{padding:5px 7px}.detail-round-head{padding:7px 10px}.replay-seats{grid-template-columns:repeat(4,minmax(0,1fr))}.replay-seat{padding:6px}.replay-tiles .mahjong-tile{width:16px;height:22px}.stats-card{padding:8px}.stats-card strong{font-size:19px}}
@media(max-width:680px){.detail-meta{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-score{grid-template-columns:75px 1fr 55px 75px;font-size:10px}.replay-seats{grid-template-columns:repeat(2,minmax(0,1fr))}.stats-fans{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Compact four-seat waiting room for phone and desktop. */
.waiting-view{width:min(820px,calc(100% - 24px));gap:14px;padding:20px 24px;background:#12382d;box-shadow:0 18px 48px #04150f6b}
.waiting-heading{align-items:stretch;gap:16px}.waiting-heading-copy{align-self:center}.waiting-heading h1{font-size:clamp(23px,3vw,31px);margin:4px 0 3px}.waiting-heading p{margin:0;color:var(--muted);font-size:11px}
.waiting-room-block{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:2px;min-width:170px;padding-left:16px;border-left:1px solid var(--line)}.waiting-room-block>span{color:var(--muted);font-size:10px}.waiting-code{font:700 clamp(25px,3.6vw,34px) "PingFang SC",sans-serif;letter-spacing:.12em;font-variant-numeric:tabular-nums}.waiting-connection{font-size:10px;color:#9bd3ad}.waiting-connection.is-offline{color:#e2aa86}
.waiting-info{gap:8px;border:0;padding:0;justify-content:space-between}.waiting-info span{flex:1;min-width:105px;text-align:center;padding:7px 6px;border:1px solid #a6b79536;background:#184434;border-radius:5px;color:#dfd9bf;font-size:11px}
.waiting-seats{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"north east" "west south";gap:9px;min-height:0}.waiting-seat.seat-north{grid-area:north}.waiting-seat.seat-east{grid-area:east}.waiting-seat.seat-west{grid-area:west}.waiting-seat.seat-south{grid-area:south}
.waiting-seat{display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;gap:8px;padding:11px 13px;background:#194735;border-color:#b6bd9642;min-height:82px}.waiting-seat.is-own-seat{background:#20543f}.waiting-seat.is-ready{border-color:#cbb57f}.waiting-seat.is-offline{opacity:.74}
.waiting-seat-head{display:flex;align-items:center;gap:9px;min-width:0}.waiting-seat .wind-badge{width:27px;height:27px}.waiting-seat .avatar{width:31px;height:31px;font-size:17px}.waiting-player{min-width:0}.waiting-player strong{display:block;font-size:13px}.waiting-seat-status{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-left:36px;font-size:11px;color:var(--muted)}.waiting-seat-status .presence:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#af896a;margin-right:5px}.waiting-seat-status .presence.is-online:before{background:#9bcfa8}.waiting-seat-status .ready-label.is-ready{color:#edd4a1;font-weight:700}
.waiting-footer{display:flex;align-items:center;justify-content:space-between;gap:12px}.waiting-text{text-align:left}.waiting-controls{flex:none}.waiting-controls .primary-button{min-width:92px}.waiting-controls .ghost-button{border-color:#b5b89960}
@media(max-width:900px) and (orientation:landscape){.waiting-view{width:calc(100% - 14px);padding:11px 16px;gap:7px;max-height:calc(100dvh - 44px)}.waiting-heading h1{font-size:21px}.waiting-heading p{font-size:10px}.waiting-code{font-size:24px}.waiting-info span{padding:4px;font-size:9px;min-width:0}.waiting-seats{gap:5px}.waiting-seat{min-height:64px;padding:5px 9px;gap:3px}.waiting-seat .avatar{width:24px;height:24px;font-size:13px}.waiting-seat .wind-badge{width:22px;height:22px;font-size:13px}.waiting-player strong{font-size:11px}.waiting-seat-status{padding-left:30px;font-size:9px}.waiting-footer .waiting-text{font-size:10px}.waiting-controls button{min-height:31px;padding:0 10px;font-size:10px}}
@media(max-width:900px) and (orientation:portrait){.waiting-view{width:calc(100% - 20px);max-height:none;margin:10px auto;padding:18px;gap:14px}.waiting-heading{align-items:flex-start}.waiting-heading p{font-size:10px}.waiting-room-block{min-width:118px;padding-left:10px}.waiting-code{font-size:23px}.waiting-info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.waiting-info span{min-width:0}.waiting-seats{gap:7px}.waiting-seat{min-height:91px;padding:9px;gap:8px}.waiting-seat-head{gap:5px}.waiting-seat .wind-badge{width:23px;height:23px;font-size:14px}.waiting-seat .avatar{width:26px;height:26px;font-size:14px}.waiting-player strong{font-size:11px}.waiting-seat-status{padding-left:0;font-size:9px}.waiting-footer{flex-direction:column;align-items:stretch}.waiting-text{text-align:center}.waiting-controls{justify-content:center}.waiting-controls button{min-height:42px}.lobby-panel{min-height:calc(100dvh - 55px);padding:20px;gap:16px}.lobby-profile{align-content:start}.data-page{height:auto;min-height:calc(100dvh - 55px)}.data-toolbar{flex-wrap:wrap}.data-toolbar>div{order:-1;flex-basis:100%}.stats-totals,.stats-ranks{grid-template-columns:repeat(2,minmax(0,1fr))}.record-footer{align-items:flex-start}

}

/* All game views share one landscape coordinate system on handheld portrait screens. */
html.app-handheld,html.app-handheld body{overflow:hidden}
html.app-handheld:not(.app-rotated) .app-shell{height:var(--app-viewport-height,100dvh);min-height:0;padding-inline:env(safe-area-inset-left) env(safe-area-inset-right)}
html.app-rotated body{position:fixed;left:var(--app-viewport-left,0px);top:var(--app-viewport-top,0px);width:var(--app-layout-width);height:var(--app-layout-height);min-width:0;min-height:0;margin:0;overflow:hidden;transform-origin:top left;transform:rotate(90deg) translateY(-100%)}
html.app-rotated .app-shell{width:100%;height:100%;min-height:0;overflow:hidden;padding-left:env(safe-area-inset-top);padding-right:env(safe-area-inset-bottom)}
html.app-rotated .modal-backdrop,html.app-rotated .toast{position:fixed}
html.app-rotated .dialog-card,html.app-rotated .result-card{max-height:calc(var(--app-layout-height) - 14px)}
html.app-rotated .lobby-panel{width:calc(100% - 16px);height:calc(100% - 12px);min-height:0;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-rows:auto minmax(0,1fr) auto;column-gap:18px;row-gap:6px;padding:12px 18px}
html.app-rotated .lobby-heading{grid-column:1;grid-row:1}html.app-rotated .lobby-profile{grid-column:1;grid-row:2;align-content:center}html.app-rotated .lobby-actions{grid-column:2;grid-row:1/span 2}html.app-rotated .lobby-secondary{grid-column:1;grid-row:3}html.app-rotated .reconnect-box{grid-column:2;grid-row:3}
html.app-rotated .game-area{min-height:0}html.app-rotated .table-scroll{overflow:hidden}html.app-rotated .mahjong-table{min-width:0;min-height:0}html.app-rotated .match-strip{overflow:hidden;justify-content:space-around}html.app-rotated .control-dock{flex-wrap:nowrap}html.app-rotated .turn-hint{width:auto}
html.app-rotated .data-page{height:100%;min-height:0;overflow:auto}html.app-rotated .data-toolbar{flex-wrap:nowrap}html.app-rotated .data-toolbar>div{order:0;flex-basis:auto}html.app-rotated .stats-totals{grid-template-columns:repeat(3,minmax(0,1fr))}html.app-rotated .stats-ranks{grid-template-columns:repeat(4,minmax(0,1fr))}
html.app-rotated .detail-meta{grid-template-columns:repeat(4,minmax(0,1fr))}html.app-rotated .replay-seats{grid-template-columns:repeat(4,minmax(0,1fr))}html.app-rotated .stats-fans{grid-template-columns:repeat(3,minmax(0,1fr))}
html.app-handheld .match-card{padding:9px 14px}html.app-handheld .match-card h2{margin:2px 0 4px}html.app-handheld .match-card .result-subtitle{margin:0 0 4px}html.app-handheld .match-card .standing-row{padding:2px 6px;line-height:1.15}html.app-handheld .match-card .match-details{margin-top:4px}html.app-handheld .match-card .match-id{margin:5px 0}html.app-handheld .match-card .dialog-actions{margin-top:5px}

/* One-screen waiting room: room facts, four seats, and controls stay in view. */
@media(min-width:700px) and (orientation:landscape){
  .waiting-view{display:grid;grid-template-columns:minmax(155px,.9fr) minmax(320px,2.1fr) minmax(125px,.7fr);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"heading seats footer" "info seats footer";align-items:stretch;width:calc(100% - 14px);height:calc(100% - 10px);max-height:calc(100% - 10px);gap:8px;padding:11px 13px;background:repeating-linear-gradient(135deg,#ffffff04 0 1px,transparent 1px 23px),#12382d}
  .waiting-heading{grid-area:heading;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:7px;min-height:0}.waiting-heading h1{font-size:21px}.waiting-heading p{font-size:10px}.waiting-room-block{align-items:flex-start;min-width:0;border:0;padding:0}.waiting-code{font-size:25px}
  .waiting-info{grid-area:info;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;align-self:end}.waiting-info span{min-width:0;padding:6px 2px;font-size:9px}
  .waiting-seats{grid-area:seats;min-height:0}.waiting-seat{min-height:0;padding:9px;gap:5px}.waiting-seat-status{padding-left:0}
  .waiting-footer{grid-area:footer;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;gap:12px}.waiting-text{text-align:left;line-height:1.5;font-size:10px}.waiting-controls{display:flex;flex-direction:column;align-items:stretch;gap:8px}.waiting-controls button{width:100%;min-height:36px}
}
html.app-rotated .waiting-view{display:grid;grid-template-columns:minmax(155px,.9fr) minmax(320px,2.1fr) minmax(125px,.7fr);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"heading seats footer" "info seats footer";align-items:stretch;width:calc(100% - 14px);height:calc(100% - 10px);max-height:calc(100% - 10px);min-height:0;margin:auto;gap:8px;padding:11px 13px;background:repeating-linear-gradient(135deg,#ffffff04 0 1px,transparent 1px 23px),#12382d}
html.app-rotated .waiting-heading{grid-area:heading;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:7px;min-height:0}html.app-rotated .waiting-heading h1{font-size:21px}html.app-rotated .waiting-heading p{font-size:10px}html.app-rotated .waiting-room-block{align-items:flex-start;min-width:0;border:0;padding:0}html.app-rotated .waiting-code{font-size:25px}
html.app-rotated .waiting-info{grid-area:info;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;align-self:end}html.app-rotated .waiting-info span{min-width:0;padding:6px 2px;font-size:9px}
html.app-rotated .waiting-seats{grid-area:seats;min-height:0}html.app-rotated .waiting-seat{min-height:0;padding:9px;gap:5px}html.app-rotated .waiting-seat-status{padding-left:0}
html.app-rotated .waiting-footer{grid-area:footer;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;gap:12px}html.app-rotated .waiting-text{text-align:left;line-height:1.5;font-size:10px}html.app-rotated .waiting-controls{display:flex;flex-direction:column;align-items:stretch;gap:8px}html.app-rotated .waiting-controls button{width:100%;min-height:36px}