:root{font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:#f8f4e9;background:#0a2926;font-synthesis:none}
#toast{position:fixed;left:50%;bottom:calc(145px + env(safe-area-inset-bottom));transform:translate(-50%,12px);z-index:30;opacity:0;pointer-events:none;background:#1c332e;color:#fff2d4;border:1px solid #c9a85b;padding:10px 15px;border-radius:9px;box-shadow:0 8px 30px #001b1a88;font-size:13px;white-space:nowrap;max-width:90vw;overflow:hidden;text-overflow:ellipsis;transition:opacity .2s,transform .2s}#toast.show{opacity:1;transform:translate(-50%,0)}
.seat-row .kick{margin-left:auto;color:#145143;border-color:#a8c8b6;white-space:nowrap}
.setup-note{color:#69847a;font-size:12px;line-height:1.5;margin:12px 0 0}
*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:radial-gradient(circle at 50% -12%,#236a55 0,#103c35 42%,#0a2926 100%)}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.42;cursor:not-allowed}.app{min-height:100dvh;max-width:850px;margin:auto;display:flex;flex-direction:column}.topbar{height:62px;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #ffffff1f;background:#092d29aa}.brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:.08em;font-size:18px;white-space:nowrap}.brand-icon{width:34px;height:34px;border-radius:8px;background:#f2e9d2;color:#145244;display:grid;place-items:center;font-family:serif;font-size:24px}.head-actions{display:flex;gap:6px;align-items:center}.small-btn{border:1px solid #ffffff32;background:#ffffff10;color:#f5ead2;border-radius:9px;padding:7px 9px;font-size:12px}.small-btn:active,.action:active,.tile:active{transform:translateY(1px)}.online{height:7px;width:7px;border-radius:50%;background:#6fe1a6;display:inline-block;margin-right:5px;box-shadow:0 0 8px #6fe1a6}.online.off{background:#f19c78;box-shadow:none}.landing{padding:24px 20px 44px;display:flex;flex-direction:column;gap:20px;max-width:520px;width:100%;margin:auto}.hero{padding:20px 0 6px;text-align:center}.hero-mark{width:100px;height:116px;border-radius:14px;background:#f7f0de;box-shadow:0 9px 0 #cebfa2,0 20px 35px #001d1b66;margin:10px auto 32px;display:grid;place-items:center;font-family:serif;color:#0e5a4a;font-size:67px;font-weight:bold;transform:rotate(-5deg)}h1{font-size:32px;margin:0 0 9px;letter-spacing:.1em}.hero p,.muted{color:#bbd0c3;margin:0;font-size:14px;line-height:1.6}.card{background:#f6f0df;color:#173d35;border:1px solid #fff7df;border-radius:18px;padding:19px;box-shadow:0 15px 40px #001b1b3d}.card-title{font-weight:800;font-size:19px;margin:0 0 15px}.field{display:flex;flex-direction:column;gap:6px;margin-bottom:13px;font-size:13px;font-weight:700;color:#476359}.field input{height:47px;padding:0 14px;border:1px solid #c6d3ca;border-radius:10px;background:#fffdf7;color:#153d34;outline:none;font-size:16px}.field input:focus{border-color:#2a7863;box-shadow:0 0 0 3px #2a786329}.primary,.secondary{width:100%;height:47px;border:0;border-radius:10px;font-size:15px;font-weight:800}.primary{background:#cda659;color:#193e33}.primary:hover{background:#e3be75}.secondary{background:#dfebe1;color:#185442}.join-row{display:flex;gap:8px}.join-row input{flex:1;min-width:0}.join-row button{width:105px}.divider{display:flex;align-items:center;gap:12px;color:#758b80;font-size:12px;margin:18px 0}.divider:before,.divider:after{content:"";height:1px;flex:1;background:#cbd5ca}.hint{color:#a8c8b6;text-align:center;font-size:12px;line-height:1.6}.room-card{text-align:center}.room-code{font-size:34px;letter-spacing:.18em;font-weight:900;color:#155544;margin:8px 0}.room-link{display:flex;justify-content:center;gap:8px;margin-bottom:18px}.seat-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;text-align:left;margin:15px 0}.seat-row{background:#e5ede2;border-radius:10px;padding:11px;min-height:58px;display:flex;align-items:center;gap:9px}.avatar{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;background:#125d4d;color:#f7e7bd;font-weight:800}.seat-row .name{font-weight:800;font-size:13px}.seat-row .sub{font-size:11px;color:#6f8879}.seat-row.empty{opacity:.5}.waiting{font-size:12px;color:#69847a;margin-top:10px}.game{flex:1;min-height:0;display:flex;flex-direction:column}.score-strip{display:flex;justify-content:space-between;align-items:center;padding:9px 13px;background:#052d27;color:#e9e4cd;font-size:12px}.round-badge{background:#cda659;color:#193d33;padding:4px 9px;border-radius:20px;font-weight:800}.table{position:relative;flex:1;min-height:360px;margin:9px 9px 0;border-radius:24px;border:7px solid #215948;background:radial-gradient(circle at center,#2d8665 0,#13634f 58%,#0b4a3e 100%);box-shadow:inset 0 0 0 2px #3b9475,0 12px 27px #001e1c60;overflow:hidden;display:grid;grid-template-columns:62px 1fr 62px;grid-template-rows:73px 1fr 73px;grid-template-areas:". top ." "left center right" ". bottom ."}.opp{z-index:2;display:flex;align-items:center;gap:5px;color:#f5edd8}.opp.top{grid-area:top;justify-content:center}.opp.left{grid-area:left;writing-mode:vertical-rl;justify-content:center}.opp.right{grid-area:right;writing-mode:vertical-rl;justify-content:center}.opp.bottom{grid-area:bottom;justify-content:center}.opp .avatar{width:30px;height:30px;font-size:12px;background:#e7d0a0;color:#235546;writing-mode:horizontal-tb}.opp.current .avatar{box-shadow:0 0 0 3px #f9cd6b,0 0 16px #e9c15e}.opp .info{font-size:11px;font-weight:700;max-width:115px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.opp.left .info,.opp.right .info{max-height:110px}.opp .tiny{font-size:10px;color:#d3e6d7}.table-center{grid-area:center;position:relative;min-width:0;display:grid;grid-template-rows:1fr 45px 1fr;grid-template-columns:1fr 55px 1fr;grid-template-areas:". north ." "west middle east" ". south .";gap:2px;padding:4px}.river{display:flex;align-content:center;align-items:center;justify-content:center;flex-wrap:wrap;gap:2px;overflow:hidden}.river.north{grid-area:north}.river.south{grid-area:south}.river.west{grid-area:west}.river.east{grid-area:east}.river-tile{width:24px;height:32px;background:#f5efdf;color:#184b3f;border-radius:3px;display:grid;place-items:center;font-size:11px;font-weight:800;box-shadow:0 2px 0 #c5b99d}.table-middle{grid-area:middle;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;border:1px solid #ffffff38;border-radius:12px;background:#062b2788;text-align:center;font-size:11px;line-height:1.4;padding:3px;color:#e6e3c8}.wind{font-family:serif;font-size:19px;font-weight:bold;color:#ebca7b}.meld-line{padding:4px 10px 0;display:flex;gap:5px;overflow-x:auto;min-height:30px}.meld-pill{background:#ffffff24;border:1px solid #ffffff2c;border-radius:6px;padding:3px 6px;font-size:10px;white-space:nowrap}.my-zone{padding:3px 8px max(12px,env(safe-area-inset-bottom));background:linear-gradient(#124438,#0b302b);box-shadow:0 -8px 20px #04231f66}.my-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;font-size:12px;color:#d6e8d5}.my-heading strong{font-size:14px;color:#f0d38c}.hand{display:flex;gap:3px;overflow-x:auto;overflow-y:hidden;padding:12px 2px 14px;scrollbar-width:none}.hand::-webkit-scrollbar{display:none}.tile{border:0;flex:0 0 auto;width:clamp(27px,7.4vw,41px);height:clamp(43px,12vw,58px);padding:0;border-radius:5px 5px 4px 4px;color:#164a3c;background:linear-gradient(#fffdf3 0 82%,#d0c4a9 83%);box-shadow:0 3px 0 #a2a28e,0 4px 4px #001b1666;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.tile.selected{transform:translateY(-11px);outline:2px solid #eccd78;box-shadow:0 4px 13px #e8c877aa}.tile.drawn:before{content:"";position:absolute;left:-3px;top:4px;bottom:7px;border-left:2px solid #d7b668}.tile .face{font-size:clamp(17px,5.1vw,27px);line-height:1;font-weight:900;font-family:serif}.tile .suit{font-size:9px;line-height:1.1;font-weight:700;margin-top:3px}.tile.wan .face{color:#b3483d}.tile.tong .face{color:#1d6a86}.tile.tiao .face{color:#277953}.tile.honor .face{color:#944d43}.actions{display:flex;align-items:center;gap:6px;overflow-x:auto;min-height:47px;padding-bottom:2px;scrollbar-width:none}.action{flex:none;background:#d8e8dc;color:#124d3f;border:0;border-radius:9px;padding:10px 13px;font-size:12px;font-weight:800;white-space:nowrap}.action.gold{background:#e4b65f;color:#173f34}.action.red{background:#a94740;color:#fff2db}.action.ghost{background:#ffffff22;color:#f0edda;border:1px solid #ffffff35}.status-message{padding:7px 10px;font-size:12px;color:#d4e5d4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history{background:#082b27;padding:10px 15px;color:#a8cbb6;font-size:11px;max-height:72px;overflow:hidden}.history div{line-height:1.6}.overlay{position:fixed;inset:0;background:#001b19b8;z-index:10;display:flex;align-items:center;justify-content:center;padding:20px}.dialog{width:min(100%,420px);max-height:85dvh;overflow:auto;background:#f7f0df;color:#15473b;border-radius:20px;padding:21px;box-shadow:0 20px 80px #0008}.dialog h2{margin:0 0 12px;font-size:23px}.dialog p,.dialog li{font-size:13px;line-height:1.7}.dialog ul{padding-left:20px}.dialog .primary{margin-top:10px}.result-score{font-size:42px;font-weight:900;color:#a65c35;text-align:center;margin:5px}.result-reasons{text-align:center;color:#6d806e;font-size:12px;margin-bottom:17px}.result-list{display:flex;flex-direction:column;gap:6px}.result-row{background:#e6ecdf;padding:9px 11px;border-radius:9px;display:flex;justify-content:space-between;font-size:13px}.footnote{margin:8px auto 15px;text-align:center;font-size:11px;color:#b4c6b7}@media(max-height:710px){.table{min-height:290px}.history{display:none}.my-zone{padding-bottom:6px}.hand{padding-top:8px;padding-bottom:10px}}@media(min-width:700px){.table{min-height:520px}.tile{width:43px;height:61px}.landing{padding-top:40px}}

.room-link .small-btn{border-color:#b6ccb9;background:#e4eee5;color:#185442}.server-settings{padding:14px 18px}.server-settings summary{cursor:pointer;font-weight:800;color:#185442;list-style:none}.server-settings summary::-webkit-details-marker{display:none}.server-settings summary:after{content:'▾';float:right}.server-settings[open] summary{margin-bottom:14px}
.room-card>.secondary{margin-bottom:10px}