:root{--paper:#f4ecd8;--paper-2:#fbf6ea;--ink:#2d2a26;--ink-soft:#6b645a;--line:#2d2a262e;--red:#c4473d;--green:#2f7d4f;--blue:#2f5d8a;--gold:#e3a93a;--felt:#dde8d3;--felt-line:#8fae86;--tile-face:#fbfaf4;--tile-back:#2f8f55;--pos:#2f7d4f;--neg:#c4473d;--sketch:255px 15px 225px 15px / 15px 225px 15px 255px;--sketch-sm:12px 4px 10px 5px / 5px 10px 4px 12px;--font:system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;--font-brush:"KaiTi", "STKaiti", "Kaiti SC", "BiauKai", var(--font);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{background:var(--paper);height:100%;color:var(--ink);font-family:var(--font);-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;overscroll-behavior:none;margin:0}body{-webkit-user-select:none;user-select:none;touch-action:manipulation}input{-webkit-user-select:text;user-select:text}button{font:inherit;color:inherit}.page{min-height:100vh;min-height:100dvh;padding:max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left))}.page.center{justify-content:center;align-items:center;display:flex}.card{background:var(--paper-2);border:2px solid var(--ink);border-radius:var(--sketch-sm);box-shadow:3px 4px 0 var(--line);padding:16px}.col{flex-direction:column;gap:12px;display:flex}.col.tight{gap:2px}.col.right{align-items:flex-end}.row{align-items:center;display:flex}.row.gap{gap:8px}.row.tiny-gap{gap:2px}.row.between{justify-content:space-between}.row.center{justify-content:center}.center-text{text-align:center}.muted{color:var(--ink-soft)}.small{font-size:13px}.tiny{font-size:11px}.pos{color:var(--pos)}.neg{color:var(--neg)}.title{font-family:var(--font-brush);letter-spacing:4px;margin:8px 0 0;font-size:34px}.title-sm{font-family:var(--font-brush);letter-spacing:2px;font-size:20px;font-weight:700}.btn{-webkit-appearance:none;appearance:none;border:2px solid var(--ink);border-radius:var(--sketch);background:var(--paper-2);cursor:pointer;box-shadow:2px 3px 0 var(--ink);white-space:nowrap;padding:9px 18px;font-size:16px;transition:transform 60ms,box-shadow 60ms}.btn:active:not(:disabled){box-shadow:0 0 0 var(--ink);transform:translate(2px,3px)}.btn:disabled{opacity:.45;cursor:default}.btn.primary{background:var(--gold)}.btn.danger{background:#f1c8c1}.btn.small{box-shadow:1px 2px 0 var(--ink);padding:5px 12px;font-size:14px}.btn.big{padding:13px 18px;font-size:19px;font-weight:700}.btn.icon{box-shadow:1px 2px 0 var(--ink);padding:2px 12px;font-size:20px;line-height:1.3}.input{border:2px solid var(--ink);border-radius:var(--sketch-sm);background:#fff;outline:none;flex:1;min-width:0;padding:10px 12px;font-size:17px}.input:focus{box-shadow:0 0 0 3px #e3a93a73}.code-input{letter-spacing:6px;text-align:center;font-variant-numeric:tabular-nums;font-size:22px}.badge{border:1.5px solid var(--ink);background:var(--gold);vertical-align:middle;white-space:nowrap;border-radius:8px 3px;margin-left:4px;padding:0 6px;font-size:11px;line-height:16px;display:inline-block}.badge.alt{background:#cfe0f2}.badge.gray{color:var(--ink-soft);background:#e3ded2}.badge.red{background:var(--red);color:#fff}.toast{z-index:1000;background:var(--ink);color:var(--paper-2);border-radius:var(--sketch-sm);pointer-events:none;max-width:86vw;padding:10px 18px;font-size:15px;animation:.18s ease-out pop;position:fixed;top:18%;left:50%;transform:translate(-50%)}.conn-banner{left:50%;top:max(6px, env(safe-area-inset-top));z-index:999;border:2px solid var(--ink);border-radius:var(--sketch-sm);pointer-events:none;background:#f1c8c1;padding:4px 14px;font-size:13px;position:fixed;transform:translate(-50%)}@keyframes pop{0%{opacity:0;transform:translate(-50%)scale(.85)}}.login-card{text-align:center;width:min(360px,100%)}.login-card form{margin-top:16px}.logo-row{justify-content:center;gap:8px;display:flex}.logo-row .tile:first-child{transform:rotate(-8deg)}.logo-row .tile:nth-child(3){transform:rotate(7deg)}.lobby{flex-direction:column;gap:14px;max-width:880px;margin:0 auto;display:flex}.lobby-head{justify-content:space-between;align-items:center;gap:8px;display:flex}.brand{align-items:center;gap:8px;display:flex}.lobby-grid{grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px;display:grid}.nick{font-size:20px;font-weight:700}.opt-label{color:var(--ink-soft);margin-bottom:-6px;font-size:13px}.seg{flex-wrap:wrap;gap:6px;display:flex}.seg-btn{border:2px solid var(--ink);border-radius:var(--sketch-sm);cursor:pointer;white-space:nowrap;background:#fff;flex:1;padding:7px 4px;font-size:14px}.seg-btn.on{background:var(--ink);color:var(--paper-2)}.room-code{font-family:var(--font-brush);letter-spacing:8px;font-variant-numeric:tabular-nums;font-size:46px;font-weight:700}.member-list{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.member-list li{border-bottom:1.5px dashed var(--line);align-items:center;gap:6px;padding:5px 2px;display:flex}.member-list li.offline{opacity:.5}.member-no{border:1.5px solid var(--ink);border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;font-size:12px;display:inline-flex}.member-name{font-size:16px}.match-row{text-align:left;cursor:pointer;justify-content:space-between;align-items:center;font-size:15px;display:flex}.score{font-variant-numeric:tabular-nums;font-size:20px;font-weight:700}.rank-list{flex-direction:column;gap:4px;display:flex}.rank-item{border-bottom:1.5px dashed var(--line);align-items:center;gap:10px;padding:6px 8px;display:flex}.rank-item.me{background:#e3a93a2e}.rank-no{border:2px solid var(--ink);border-radius:50%;justify-content:center;align-items:center;width:26px;height:26px;font-weight:700;display:inline-flex}.rank-item:first-child .rank-no{background:var(--gold)}.rank-name{flex:1}.table-scroll{padding:8px;overflow-x:auto}.hist-table{border-collapse:collapse;white-space:nowrap;width:100%;font-size:13px}.hist-table th,.hist-table td{border-bottom:1px dashed var(--line);text-align:right;font-variant-numeric:tabular-nums;padding:6px 8px}.hist-table .left{text-align:left}.tile{--w:34px;--h:46px;--d:4px;width:var(--w);height:var(--h);background:var(--tile-face);border:1.6px solid var(--ink);box-shadow:0 var(--d) 0 -1.6px var(--tile-back), 0 var(--d) 0 0 var(--ink);margin-bottom:var(--d);border-radius:6px 7px 5px;flex:none;position:relative}.tile-face{width:calc(var(--w) * .9);height:calc(var(--h) * .9);pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tile-xl{--w:50px;--h:70px;--d:7px;border-width:2px;border-radius:7px 9px 6px 8px}.tile-lg{--w:40px;--h:56px;--d:5px}.tile-md{--w:34px;--h:46px}.tile-sm{--w:28px;--h:38px;--d:3px}.tile-rv{--w:31px;--h:42px;--d:3px;border-width:1.4px;border-radius:4px 5px}.tile-xs{--w:24px;--h:33px;--d:3px;border-width:1.3px;border-radius:4px 5px}.tile-back{background:repeating-linear-gradient(-45deg, var(--tile-back) 0 5px, #287a49 5px 6.5px)}.tile-side-l,.tile-side-r{width:var(--h);height:var(--w)}.tile-side-l .tile-face{width:calc(var(--w) * .9);height:calc(var(--h) * .9);transform:translate(-50%,-50%)rotate(90deg)}.tile-side-r .tile-face{width:calc(var(--w) * .9);height:calc(var(--h) * .9);transform:translate(-50%,-50%)rotate(-90deg)}.stage-outer{transform-origin:0 0;background:var(--paper);position:fixed;top:0;left:0;overflow:hidden}.stage{transform-origin:0 0;position:absolute;top:0}.table-root{position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden}.felt{background:var(--felt);border:2.5px solid var(--ink);box-shadow:inset 0 0 0 9px var(--felt), inset 0 0 0 11px var(--felt-line), 5px 7px 0 var(--line);border-radius:46px 30px 52px 34px/34px 48px 30px 50px;position:absolute;top:40px;bottom:6px;left:3%;right:3%}.topbar{z-index:20;justify-content:space-between;align-items:center;height:34px;display:flex;position:absolute;top:4px;left:14px;right:14px}.chip{border:1.6px solid var(--ink);border-radius:var(--sketch-sm);background:var(--paper-2);white-space:nowrap;padding:2px 10px;font-size:13px}.queue-chip{text-overflow:ellipsis;max-width:420px;overflow:hidden}.queue-chip .offline{opacity:.45}.plane-wrap{perspective:1100px;pointer-events:none;width:700px;height:360px;position:absolute;top:49%;left:50%;transform:translate(-50%,-50%)}.plane{transform-origin:50%;position:absolute;top:0;bottom:0;left:0;right:0;transform:rotateX(28deg)}.compass{border:2px solid var(--ink);background:var(--paper-2);width:110px;height:110px;box-shadow:0 6px 0 -2px #c9bfa6, 0 6px 0 0 var(--ink);border-radius:20px 14px 22px 16px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.compass-center{flex-direction:column;justify-content:center;align-items:center;line-height:1.05;display:flex;position:absolute;top:22px;bottom:22px;left:22px;right:22px}.wall-count{font-variant-numeric:tabular-nums;font-size:24px;font-weight:700}.compass-timer{font-variant-numeric:tabular-nums;font-size:30px;font-weight:700;line-height:1.1}.compass-arm{background:0 0;border-radius:4px;position:absolute}.compass-arm.on{background:var(--gold);border:1.6px solid var(--ink)}.arm-b{height:11px;bottom:5px;left:22px;right:22px}.arm-t{height:11px;top:5px;left:22px;right:22px}.arm-l{width:11px;top:22px;bottom:22px;left:5px}.arm-r{width:11px;top:22px;bottom:22px;right:5px}.river{gap:1px;display:flex;position:absolute}.river .tile{margin-bottom:0}.river-b{flex-wrap:wrap;row-gap:3px;width:384px;top:calc(50% + 68px);left:50%;transform:translate(-50%)}.river-t{flex-flow:row-reverse wrap-reverse;row-gap:3px;width:384px;bottom:calc(50% + 72px);left:50%;transform:translate(-50%)}.river-l{flex-flow:column wrap-reverse;column-gap:3px;height:128px;top:50%;right:calc(50% + 64px);transform:translateY(-50%)}.river-r{flex-flow:column-reverse wrap;column-gap:3px;height:128px;top:50%;left:calc(50% + 64px);transform:translateY(-50%)}.last-discard{background:#fff2c6}.last-discard:after{content:"";border-left:5px solid #0000;border-right:5px solid #0000;border-top:8px solid var(--red);width:0;height:0;animation:.9s ease-in-out infinite alternate bob;position:absolute;top:-11px;left:50%;transform:translate(-50%)}@keyframes bob{to{transform:translate(-50%,-3px)}}.opp{z-index:2;gap:8px;display:flex;position:absolute}.opp-t{align-items:flex-end;top:46px;left:50%;transform:translate(-50%)}.opp-b{align-items:flex-end;bottom:18px;left:50%;transform:translate(-50%)}.opp-l{flex-direction:column;align-items:center;top:50%;left:7%;transform:translateY(-46%)}.opp-r{flex-direction:column-reverse;align-items:center;top:50%;right:7%;transform:translateY(-46%)}.melds{gap:5px;display:flex}.opp-l .melds,.opp-r .melds{flex-direction:column}.meld{gap:0;display:flex}.opp-l .meld,.opp-r .meld{flex-direction:column}.opp-l .meld .tile,.opp-r .meld .tile{margin-bottom:0}.backs-row{display:flex}.back-stand{border:1.5px solid var(--ink);background:repeating-linear-gradient(-45deg, var(--tile-back) 0 4px, #287a49 4px 5.5px);width:22px;height:30px;box-shadow:0 3px 0 -1.5px #fffaf0, 0 3px 0 0 var(--ink);border-radius:4px 5px 3px 4px}.back-stand.drawn,.backs-col .drawn{margin-left:8px}.backs-col{flex-direction:column;display:flex}.back-edge{border:1.5px solid var(--ink);background:linear-gradient(90deg, #fffaf0 0 38%, var(--tile-back) 38% 100%);border-radius:3px;width:30px;height:15px;margin-top:-2px}.backs-col .back-edge.drawn{margin:0 0 8px}.avatar{background:var(--paper-2);border:2px solid var(--ink);border-radius:var(--sketch-sm);box-shadow:2px 3px 0 var(--line);z-index:5;align-items:center;gap:6px;min-width:108px;padding:4px 10px 4px 4px;display:flex;position:absolute}.avatar.active{border-color:var(--gold);box-shadow:0 0 0 2px var(--ink), 2px 3px 0 var(--line)}.avatar.offline{opacity:.7}.avatar-face{border:2px solid var(--ink);width:34px;height:34px;font-family:var(--font-brush);background:#f6dfb0;border-radius:50% 45% 52% 48%;justify-content:center;align-items:center;font-size:18px;font-weight:700;display:flex}.avatar-name{text-overflow:ellipsis;white-space:nowrap;max-width:110px;font-size:13px;overflow:hidden}.avatar-score{font-variant-numeric:tabular-nums;font-size:15px;font-weight:700}.dealer{border:2px solid var(--ink);background:var(--red);color:#fff;width:24px;height:24px;font-family:var(--font-brush);border-radius:50%;justify-content:center;align-items:center;font-size:13px;font-weight:700;display:flex;position:absolute;top:-10px;right:-10px;transform:rotate(-12deg)}.avatar-timer{background:var(--gold);border:2px solid var(--ink);border-radius:50%;justify-content:center;align-items:center;width:26px;height:26px;font-size:13px;font-weight:700;display:flex;position:absolute;bottom:-12px;right:-8px}.countdown.urgent{color:var(--red)}.avatar-timer.urgent{background:#f1c8c1}.avatar-b{bottom:118px;left:5%}.avatar-t{top:46px;right:calc(50% + 180px)}.avatar-l{top:calc(50% - 175px);left:1.5%}.avatar-r{top:calc(50% - 175px);right:1.5%}.my-area{z-index:10;justify-content:center;align-items:flex-end;gap:16px;display:flex;position:absolute;bottom:12px;left:12px;right:12px}.my-hand{align-items:flex-end;display:flex}.my-hand .tile{cursor:pointer;transition:transform 80ms ease-out}.my-hand .tile.drawn{margin-left:12px}.my-hand .tile.selected{background:#fff2c6;transform:translateY(-16px)}.my-hand.can-discard .tile:not(.selected):active{transform:translateY(-6px)}.ting-hint,.turn-hint{background:var(--paper-2);border:1.5px solid var(--ink);border-radius:var(--sketch-sm);white-space:nowrap;z-index:11;padding:1px 10px;font-size:13px;position:absolute;bottom:104px;left:50%;transform:translate(-50%)}.turn-hint{background:var(--gold);bottom:128px}.action-bar{z-index:15;align-items:center;gap:10px;display:flex;position:absolute;bottom:108px;right:7%}.act-btn{border:2.5px solid var(--ink);min-width:66px;height:66px;font-family:var(--font-brush);cursor:pointer;box-shadow:2px 4px 0 var(--ink);border-radius:50% 46% 52% 48%;justify-content:center;align-items:center;gap:4px;padding:0 10px;font-size:28px;font-weight:700;animation:1.2s ease-in-out infinite alternate pulse;display:flex}.act-btn:active{box-shadow:none;transform:translate(2px,4px)}.act-btn.hu{background:var(--red);color:#fff}.act-btn.peng{background:#cfe0f2}.act-btn.gang{background:var(--gold)}.act-btn.pass{background:var(--paper-2);min-width:54px;height:54px;font-size:22px;animation:none}.act-btn .tile{margin-bottom:3px}@keyframes pulse{to{transform:scale(1.06)}}.action-timer{border:2px solid var(--ink);background:var(--paper-2);border-radius:50%;justify-content:center;align-items:center;width:34px;height:34px;font-size:20px;font-weight:700;display:flex}.trustee-bar{z-index:16;border:2px solid var(--ink);border-radius:var(--sketch);cursor:pointer;background:#cfe0f2;padding:6px 18px;font-size:15px;position:absolute;bottom:104px;left:50%;transform:translate(-50%)}.spectate-tag{border:2px solid var(--ink);border-radius:var(--sketch);background:var(--paper-2);z-index:10;padding:6px 18px;position:absolute;bottom:22px;left:50%;transform:translate(-50%)}.callout{z-index:30;font-family:var(--font-brush);color:var(--red);-webkit-text-stroke:1.5px var(--ink);text-shadow:3px 4px 0 var(--paper-2);pointer-events:none;font-size:54px;font-weight:700;animation:1.3s ease-out forwards callout;position:absolute}.callout-b{bottom:150px;left:50%}.callout-t{top:100px;left:50%}.callout-l{top:42%;left:20%}.callout-r{top:42%;right:20%}@keyframes callout{0%{opacity:0;transform:translate(-50%)scale(.3)rotate(-10deg)}18%{opacity:1;transform:translate(-50%)scale(1.15)rotate(-6deg)}75%{opacity:1;transform:translate(-50%)scale(1)rotate(-6deg)}to{opacity:0;transform:translate(-50%)scale(1)rotate(-6deg)}}.overlay{z-index:50;background:#2d2a2661;justify-content:center;align-items:center;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.overlay.soft{background:#2d2a2638}.sheet{background:var(--paper-2);border:2.5px solid var(--ink);box-shadow:5px 7px 0 var(--ink);border-radius:18px 10px 22px 12px/12px 22px 10px 18px;max-height:94%;padding:14px 18px;overflow:auto}.sheet h2,.sheet h3{font-family:var(--font-brush);margin:4px 0 8px}.small-sheet{width:400px}.menu-sheet{width:360px}.final-sheet{width:440px}.final-sheet .rank-list{margin:8px 0 14px}.result-sheet{width:min(900px,94%)}.result-title{font-family:var(--font-brush);justify-content:center;align-items:center;gap:10px;margin-bottom:6px;font-size:26px;font-weight:700;display:flex}.hu-text{color:var(--red)}.result-rows{flex-direction:column;display:flex}.result-row{border-bottom:1.5px dashed var(--line);grid-template-columns:130px 1fr 170px 64px;align-items:center;gap:8px;padding:6px 4px;display:grid}.result-row.me{background:#e3a93a26}.result-row.win .result-name{font-weight:700}.result-name{white-space:nowrap;text-overflow:ellipsis;font-size:15px;overflow:hidden}.result-tiles{flex-wrap:wrap;align-items:flex-end;gap:6px;display:flex}.result-tiles .meld{display:flex}.result-tiles .tile{margin-bottom:3px}.win-tile{background:#fff2c6}.result-detail{color:var(--ink-soft);flex-wrap:wrap;justify-content:flex-end;gap:2px 8px;font-size:12px;display:flex}.result-total{text-align:right;font-variant-numeric:tabular-nums;font-size:20px;font-weight:700}.result-foot{justify-content:space-between;align-items:center;gap:10px;margin-top:10px;display:flex}.rules summary{cursor:pointer;font-size:14px}.rules ul{margin:6px 0 0;padding-left:18px;line-height:1.6}.badge.ai{background:#d9cff2}.link-btn{-webkit-appearance:none;appearance:none;color:var(--red);cursor:pointer;background:0 0;border:none;margin-left:auto;padding:0 4px;font-size:13px;text-decoration:underline}.queue-chip .link-btn{margin-left:2px;font-weight:700;text-decoration:none}.thinking{border:1.5px solid var(--ink);white-space:nowrap;background:#d9cff2;border-radius:8px 3px;padding:0 6px;font-size:11px;animation:1s ease-in-out infinite alternate blink;position:absolute;bottom:-14px;left:50%;transform:translate(-50%)}@keyframes blink{to{opacity:.45}}.hint-card{border:2px dashed var(--ink-soft);border-radius:var(--sketch-sm);background:#ffffff80;padding:10px 14px;font-size:14px;line-height:1.6}.avatar-face.ai{background:#d9cff2}