:root{color-scheme:dark;--ink:#e7f2ed;--muted:#94ada4;--gold:#e6cb80;--green:#0c6955;--panel:#122b26}*{box-sizing:border-box}body{margin:0;background:#0b211c;color:var(--ink);font:14px "Microsoft YaHei UI","Microsoft YaHei",sans-serif}button,input,select{font:inherit}button{border:1px solid #ffffff25;background:#ffffff09;color:var(--ink);border-radius:7px;padding:10px 17px;cursor:pointer;transition:background .15s,transform .15s}button:hover{background:#ffffff19}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.primary{background:var(--gold);color:#25352a;border-color:var(--gold);font-weight:700}.primary:hover{background:#f5d98f}input{background:#0b211c;border:1px solid #ffffff25;border-radius:5px;color:var(--ink);padding:12px;width:100%;outline:none}label{display:block;font-size:12px;color:var(--muted);margin:14px 0 8px}.hidden{display:none!important}.muted{color:var(--muted);font-size:12px;line-height:1.8}.eyebrow{font-size:11px;letter-spacing:3px;color:var(--gold)}.home{min-height:100vh;padding:50px 24px 30px;text-align:center;background:radial-gradient(ellipse at 50% 24%,#155a46 0,#0b211c 64%)}.home-mark{width:64px;height:64px;display:grid;place-items:center;border:1px solid #d5be7166;border-radius:18px;margin:0 auto 20px;color:var(--gold);font:40px KaiTi,serif;box-shadow:0 10px 50px #0004}.home h1{font-size:36px;font-weight:500;letter-spacing:4px;margin:18px 0}.home-sub{color:#b8cec3;letter-spacing:2px}.home-panel{width:360px;max-width:100%;margin:30px auto 20px;text-align:left}.home-panel .big{width:100%;margin:20px 0 10px;padding:15px}.home-split{display:flex;gap:10px}.home-split button{flex:1}.home-panel p{text-align:center}.home-note{font-size:12px;color:#8aa99b;line-height:2.2}.text-button{background:transparent;border:0;color:var(--gold);width:100%;margin-top:15px}#join-form{margin-top:18px}#join-form button{width:100%;margin-top:12px}.game{height:100vh;display:flex;flex-direction:column;overflow:hidden}header{height:64px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 26px;border-bottom:1px solid #ffffff0d;background:#0c231e;gap:15px}.brand{display:flex;align-items:center;gap:10px;color:var(--gold);font:27px KaiTi,serif}.brand span{font:17px "Microsoft YaHei",sans-serif;color:#f2f6ec}.brand small{font:11px "Microsoft YaHei",sans-serif;background:#d9be731a;border:1px solid #d9be7333;padding:4px 8px;border-radius:4px}#room-label{font-size:12px;color:var(--muted)}.header-right{display:flex;align-items:center;gap:10px}.header-right button{padding:7px 12px;font-size:12px}.connection{font-size:11px;color:#a1c3ae}.connection:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#8ed6ae;margin-right:6px}.connection.bad{color:#efb07b}.workspace{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 252px;min-height:0}main{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse,#117a61 0,#09624f 65%,#084d40 100%)}#table{width:1200px;height:780px;position:absolute;flex:none;transform-origin:center;user-select:none}.table-inlay{position:absolute;inset:26px;border:1px solid #d3d6aa13;border-radius:100px;box-shadow:inset 0 0 0 12px #062f2620;pointer-events:none}.table-label{position:absolute;top:290px;left:440px;width:320px;text-align:center;font-size:44px;font-family:KaiTi,serif;color:#003e3235;letter-spacing:12px;transform:rotate(-12deg)}.table-label span{display:block;font:12px "Microsoft YaHei";letter-spacing:3px;margin-top:10px}.tile{width:45px;height:62px;border-radius:4px;position:relative;background:linear-gradient(130deg,#fffef2,#e8ebdc);box-shadow:0 4px 0 #c3a756,1px 6px 4px #002a2680;display:inline-flex;align-items:center;justify-content:center;flex:none;vertical-align:middle;color:#124637;border:1px solid #c6ceb5}.tile svg{width:100%;height:100%;display:block;pointer-events:none}.tile.back{background:linear-gradient(135deg,#429882,#1a7561);border:2px solid #a8d5b7;box-shadow:0 3px 0 #cfb35f,0 5px 5px #003c2d80}.tile.back:before{content:"";position:absolute;inset:5px;border:1px solid #cbead64d;border-radius:2px}.tile.back:after{content:"";font:16px KaiTi,serif;color:#bbdfca7a}.tile.claimed{opacity:.28;box-shadow:0 1px 0 #c3a756}.tile.last-discard:after{content:"";position:absolute;top:-8px;left:50%;border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid #ffe798;transform:translateX(-50%)}.seat-info{position:absolute;display:flex;align-items:center;gap:10px;font-size:15px;min-width:150px}.seat-info .avatar{width:42px;height:42px;border:1px solid #d6c48880;border-radius:50%;display:grid;place-items:center;color:#e8d78e;background:#104d41;font-size:18px}.seat-info .name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.seat-info .sub{font-size:11px;margin-top:3px;color:#acd0be}.seat-info .points{color:var(--gold);margin-left:4px}.seat-info .dealer{color:#172e24;background:#e7ce81;font-size:10px;padding:2px 4px;border-radius:3px;margin-left:5px}.seat-info.top{top:28px;left:500px}.seat-info.left{top:118px;left:50px}.seat-info.right{top:118px;left:978px}.seat-info.bottom{top:617px;left:83px}.seat-info.active .avatar{border:2px solid #f6dc8d;box-shadow:0 0 20px #e4cf6c44}.flowers{display:flex;gap:3px;position:absolute;top:50px;left:0}.flowers .tile{width:21px;height:29px;box-shadow:0 2px 0 #c3a756;border-radius:2px}.rival-hand{position:absolute;display:flex;gap:3px}.rival-hand .tile{width:29px;height:41px;border-radius:3px}.rival-hand.top{top:97px;left:600px;transform:translateX(-50%)}.rival-hand.left{left:39px;top:219px;flex-direction:column;gap:4px}.rival-hand.right{right:39px;top:219px;flex-direction:column;gap:4px}.rival-hand.left .tile,.rival-hand.right .tile{width:41px;height:25px}.rival-hand.left .tile svg{transform:rotate(90deg);width:25px;height:41px}.rival-hand.right .tile svg{transform:rotate(-90deg);width:25px;height:41px}.rival-hand .back:after{font-size:13px}.melds{position:absolute;display:flex;gap:12px}.melds .meld{display:flex;gap:1px}.melds .tile{width:28px;height:39px;border-radius:3px;box-shadow:0 2px 0 #c3a756}.melds.top{top:153px;left:600px;transform:translateX(-50%)}.melds.left{left:101px;top:247px;flex-direction:column}.melds.right{right:101px;top:247px;flex-direction:column}.melds.bottom{bottom:129px;right:125px}.melds.bottom .tile{width:33px;height:45px}.river{position:absolute;width:248px;display:grid;grid-template-columns:repeat(6,38px);gap:4px 3px;align-content:start}.river .tile{width:37px;height:49px;border-radius:3px;box-shadow:0 2px 0 #c3a756,0 3px 3px #002f2260}.river.top{top:210px;left:416px}.river.bottom{top:425px;left:537px}.river.left{top:298px;left:154px}.river.right{top:290px;left:824px}.compass{width:112px;height:112px;position:absolute;top:320px;left:544px;border-radius:22px;border:3px solid #c2a94b;background:#0b4c3e;box-shadow:0 0 0 5px #073d3350,0 10px 20px #00392d55}.compass span{position:absolute;font-size:15px;color:#93bca4}.compass .north{top:5px;left:45px}.compass .east{right:7px;top:40px}.compass .south{bottom:5px;left:45px}.compass .west{left:7px;top:40px}.compass strong{position:absolute;left:35px;top:26px;width:38px;text-align:center;font-size:28px;color:var(--gold);font-weight:500}.compass small{position:absolute;top:60px;left:41px;font-size:10px;color:#8fb8a0}.compass .on{color:#ffe18b;text-shadow:0 0 10px #e8cb7788}.pending{position:absolute;top:345px;left:680px}.pending .tile{width:42px;height:57px;outline:2px solid #e5cf82;outline-offset:3px}.turn-message{position:absolute;top:559px;left:280px;width:640px;text-align:center;color:#d3e9dc;font-size:15px;letter-spacing:1px}.actions{position:absolute;bottom:128px;left:320px;right:110px;display:flex;justify-content:center;gap:12px;z-index:6}.actions button{background:#144e3e;border:1px solid #d9d29280;min-width:76px;padding:12px 18px;box-shadow:0 5px 12px #00302480;font-size:18px;color:#ffe6a4}.actions .discard-action{background:#e6cd83;color:#254831;border-color:#e6cd83}.actions .pass-action{color:#c5d9cf;background:#155443;border-color:#83b8a050}.actions .choice{display:flex;align-items:center;gap:2px;padding:7px 9px}.actions .choice .tile{width:23px;height:32px}.my-hand{position:absolute;left:0;right:0;bottom:26px;display:flex;justify-content:center;align-items:flex-end;gap:4px;height:96px}.my-hand .tile{width:59px;height:81px;cursor:pointer;transition:transform .13s,filter .13s}.my-hand .tile:hover{transform:translateY(-9px)}.my-hand .tile.selected{transform:translateY(-19px);outline:3px solid #ffe59a;outline-offset:2px}.my-hand .tile.illegal{filter:brightness(.72);cursor:default}.my-hand .tile.illegal:hover{transform:none}.my-hand .tile.drawn{margin-left:18px}.table-overlay{position:absolute;inset:0;display:grid;place-items:center;background:#003c3060;z-index:8}.overlay-box{width:490px;background:#102e26ed;border:1px solid #a2b99140;border-radius:16px;text-align:center;padding:30px;box-shadow:0 25px 80px #00241b99}.overlay-box h2{font-weight:500;font-size:27px;margin:14px 0}.overlay-box strong{color:var(--gold);letter-spacing:3px}#lobby-seats{display:flex;justify-content:center;gap:14px;margin:24px 0}#lobby-seats>div{border:1px solid #ffffff16;border-radius:8px;padding:12px 8px;width:88px;color:#a4bbaf;font-size:12px;overflow:hidden}#lobby-seats b{display:block;font-size:23px;color:var(--gold);margin-bottom:8px}#invite-address{font-size:13px;line-height:1.7;color:#a7ccbb;word-break:break-all;margin-bottom:18px}.overlay-box button{margin:3px}aside{background:var(--panel);border-left:1px solid #ffffff0a;padding:23px 19px 18px;overflow-y:auto;display:flex;flex-direction:column}.aside-head{display:flex;justify-content:space-between;font-size:13px;letter-spacing:1px;color:#b8cfc2}.aside-head small{font-size:11px;color:#86a394}.score-row{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff0b;padding:15px 0}.score-row .who{display:flex;gap:8px;align-items:center;font-size:12px}.score-row .wind{color:#a8c6b2;background:#ffffff08;border:1px solid #ffffff16;border-radius:4px;padding:3px 6px;font-size:10px}.score-row .score{font-size:18px;font-variant-numeric:tabular-nums;color:#c7d8ca}.score-row.me .score{color:var(--gold)}.my-summary{border-bottom:1px solid #ffffff10;padding:22px 0 14px}.my-summary>span{font-size:11px;color:#90b09e;display:block}.my-summary>strong{font-size:38px;font-weight:400;color:var(--gold);font-variant-numeric:tabular-nums;display:block;margin-top:5px}.my-summary>small{color:#98b5a5;font-size:11px}#profit-spark{width:100%;height:50px;margin-top:10px;overflow:visible}.log-head{margin-top:22px}#activity{font-size:12px;line-height:1.8;padding-top:13px;color:#91b4a1;min-height:100px}#activity p{margin:5px 0}#activity strong{font-weight:400;color:#d6e4d8}#activity .recent{color:#e2d295}.aside-bottom{margin-top:auto;padding-top:20px}.aside-bottom label{display:flex;justify-content:space-between;align-items:center;font-size:11px}.aside-bottom select{background:#133b2e;color:#bed5c6;border:1px solid #ffffff1a;border-radius:4px;padding:5px}.aside-bottom button{width:100%;padding:8px}.aside-bottom p{font-size:10px;color:#86a797;margin:15px 0 6px}.aside-bottom small{font-size:10px;color:#6c9781;line-height:1.7}footer{height:38px;flex:none;background:#0c231e;display:flex;align-items:center;justify-content:space-between;padding:0 22px;font-size:11px;color:#8fae9d;gap:10px}footer button{font-size:11px;padding:3px 10px}dialog{border:1px solid #b9c89140;border-radius:15px;background:#12352a;color:var(--ink);max-width:640px;width:calc(100% - 36px);padding:0;box-shadow:0 30px 100px #0006}dialog::backdrop{background:#001b16b8;backdrop-filter:blur(4px)}.dialog-content{padding:32px}.dialog-content h2{font-weight:500;font-size:28px;margin:15px 0 24px}.dialog-content p{font-size:13px;line-height:1.9;color:#b3cabb}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:25px}.result-row{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid #ffffff10}.result-row b{font-size:20px;font-weight:500;color:var(--gold)}.result-row small{font-size:11px;color:#9bb6a5;margin-left:12px}#win-details{margin-top:20px;font-size:12px;color:#a9c6b4;line-height:2}.result-note{margin-top:18px;font-size:11px;color:#87a994;line-height:1.8}.rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px 20px}.rules-grid span{display:flex;justify-content:space-between;border-bottom:1px solid #ffffff10;font-size:12px;padding:10px 0;color:#b1c9b8}.rules-grid b{color:var(--gold);font-weight:400}.toast{position:fixed;bottom:55px;left:50%;transform:translateX(-50%);padding:12px 20px;background:#263e30f5;border:1px solid #c5b47b66;border-radius:8px;box-shadow:0 10px 40px #0006;color:#fff0c7;z-index:50;font-size:13px;max-width:90vw;text-align:center}@media(max-width:1050px){.workspace{grid-template-columns:minmax(0,1fr) 210px}aside{padding:18px 14px}header{padding:0 16px}.brand small{display:none}}@media(max-width:760px){header{height:49px;padding:0 10px}.brand{font-size:23px}.brand span{font-size:13px}.header-right{gap:5px}.header-right button{font-size:10px;padding:6px}.connection{display:none}.workspace{display:flex}.workspace aside{display:none}#room-label{font-size:10px}footer{font-size:10px;height:32px;padding:0 10px}.home{padding-top:26px}.home h1{font-size:25px}.home-note{font-size:10px}.dialog-content{padding:22px}.rules-grid{gap:1px 10px}}@media(orientation:portrait) and (max-width:760px){#table-area:after{content:"横屏体验更好";position:absolute;top:12px;left:50%;transform:translateX(-50%);font-size:11px;color:#b9d2b4;pointer-events:none}}
main{min-width:0;flex:1}@media(max-width:900px){.workspace{display:flex}.workspace aside{display:none}.brand small{display:none}}
.river .tile{width:29px;height:38px}.river.top,.river.bottom{width:253px;grid-template-columns:repeat(8,29px);gap:3px;left:474px}.river.top{top:199px}.river.bottom{top:493px}.river.left,.river.right{width:189px;grid-template-columns:repeat(6,29px);gap:3px;top:285px}.river.left{left:210px}.river.right{left:798px}.river.top.dense .tile,.river.bottom.dense .tile{height:29px}.river.left.dense .tile,.river.right.dense .tile{height:33px}.compass{top:370px}.pending{left:682px;top:395px}.melds.left{left:95px;top:207px}.melds.right{right:95px;top:207px}.melds.bottom{display:none}.turn-message{top:575px;left:120px;width:300px;font-size:14px}.actions{left:780px;right:85px;bottom:130px;flex-wrap:wrap;gap:8px;justify-content:flex-end}.actions button{font-size:16px;padding:10px 14px;min-width:64px}.actions .choice{padding:7px 8px}.seat-info.top .flowers{left:205px;top:6px}.my-hand .inline-melds{display:flex;align-items:flex-end;gap:12px;margin-left:18px;margin-bottom:2px}.my-hand .inline-melds .meld{display:flex;gap:1px}.my-hand .inline-melds .tile{width:36px;height:51px;cursor:default;transform:none;transition:none}