:root{--bg-primary:#0a0e14;--bg-secondary:#1a1f2b;--bg-tertiary:#1e2533;--bg-table:#0c2e0c;--bg-table-gradient-start:#1a4a1a;--bg-table-gradient-end:#071a07;--bg-input:#1a1f2b;--text-primary:#d4d4d4;--text-secondary:#9ca3af;--text-muted:#718096;--text-accent:#e8b339;--text-success:#34d399;--text-error:#ff6b6b;--text-info:#63b3ed;--border-primary:#2d3748;--border-secondary:#374151;--border-accent:#e8b339;--border-success:#38a169;--border-error:#c53030;--border-info:#2d5a6e;--btn-bg:#1e2533;--btn-bg-hover:#2d3748;--btn-bg-success:#276749;--btn-bg-danger:#742a2a;--btn-bg-info:#1a3a4a;--tile-bg:#f5f0e6;--tile-border:#c4b89a;--tile-facedown-bg:#1a6b3a;--tile-facedown-border:#2f855a;--color-gold:#e8b339;--color-purple:#4c1d95;--color-purple-light:#c4b5fd;--color-purple-bg:#2d1b4e;--compass-bg:#1e1145;--compass-border:#4c1d95}[data-theme=light]{--bg-primary:#f5f5f0;--bg-secondary:#fff;--bg-tertiary:#f0f0eb;--bg-table:#1a5a1a;--bg-table-gradient-start:#2a7a2a;--bg-table-gradient-end:#0a3a0a;--bg-input:#fff;--text-primary:#1a1a1a;--text-secondary:#4a4a4a;--text-muted:#6a6a6a;--text-accent:#b8860b;--text-success:#059669;--text-error:#dc2626;--text-info:#2563eb;--border-primary:#d0d0d0;--border-secondary:silver;--border-accent:#b8860b;--border-success:#059669;--border-error:#dc2626;--border-info:#3b82f6;--btn-bg:#e0e0e0;--btn-bg-hover:#d0d0d0;--btn-bg-success:#059669;--btn-bg-danger:#dc2626;--btn-bg-info:#3b82f6;--tile-bg:#fffef8;--tile-border:#d4c9a9;--tile-facedown-bg:#2a8a5a;--tile-facedown-border:#3aa07a;--color-gold:#b8860b;--color-purple:#6b21a8;--color-purple-light:#7c3aed;--color-purple-bg:#ede9fe;--compass-bg:#ede9fe;--compass-border:#6b21a8}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-primary);color:var(--text-primary);-webkit-tap-highlight-color:transparent;font-family:Noto Sans SC,PingFang SC,Microsoft YaHei,sans-serif;overflow:hidden}.lobby{flex-direction:column;justify-content:center;align-items:center;gap:.8rem;min-height:100dvh;padding:1rem;display:flex}.lobby h2{color:var(--text-accent);font-size:1.6rem}.connection-status{font-size:.9rem}.lobby-actions{flex-direction:column;align-items:center;gap:.6rem;display:flex}.join-section{gap:.4rem;display:flex}.room-input{background:var(--bg-input);border:1px solid var(--border-primary);color:var(--text-primary);text-align:center;letter-spacing:.25em;border-radius:4px;width:6rem;padding:.4rem;font-size:1rem}.lobby-btn{background:var(--btn-bg);color:var(--text-primary);border:1px solid var(--border-primary);cursor:pointer;border-radius:4px;padding:.4rem 1.1rem;font-size:.95rem;transition:background .15s}.lobby-btn:hover:not(:disabled){background:var(--btn-bg-hover)}.lobby-btn:disabled{opacity:.35;cursor:not-allowed}.room-info{flex-direction:column;align-items:center;gap:.5rem;display:flex}.room-id-display{color:var(--text-accent);letter-spacing:.1em;font-size:1.3rem}.player-list{background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:4px;min-width:240px;padding:.6rem}.player-list-title{color:var(--text-info);border-bottom:1px solid var(--border-primary);margin-bottom:.3rem;padding-bottom:.15rem;font-size:.95rem}.player-slot{padding:.2rem 0;font-size:.95rem}.player-slot-self{color:var(--text-accent)}.empty-slot{color:var(--text-muted)}.waiting-hint{color:var(--text-muted);font-size:.85rem}.role-badge{border:1px solid var(--border-secondary);color:var(--text-secondary);background:var(--bg-tertiary);border-radius:3px;align-items:center;margin-left:.25rem;padding:.05rem .25rem;font-size:.7rem;display:inline-flex}.role-owner{border-color:var(--text-accent);color:var(--text-accent)}.role-admin{border-color:var(--text-info);color:var(--text-info)}.role-btn{background:var(--btn-bg-info);color:var(--text-info);border:1px solid var(--border-info);cursor:pointer;border-radius:2px;margin-left:.3rem;padding:.08rem .3rem;font-size:.75rem}.kick-btn{background:var(--btn-bg-danger);color:var(--text-error);border:1px solid var(--border-error);cursor:pointer;border-radius:2px;margin-left:.3rem;padding:.08rem .3rem;font-size:.75rem}.lobby-btn-group{flex-wrap:wrap;justify-content:center;gap:.4rem;margin-top:.3rem;display:flex}.unready-btn{background:var(--text-muted)}.dissolve-owner-btn{background:var(--btn-bg-danger);border-color:var(--border-error)}.start-btn{font-weight:700;background:var(--btn-bg-success)!important;border-color:var(--border-success)!important;color:#fff!important}.G{grid-template-rows:auto 1fr;height:100dvh;display:grid;overflow:hidden}.G-hd{background:var(--bg-tertiary);border-bottom:1px solid var(--border-secondary);white-space:nowrap;z-index:10;justify-content:center;align-items:center;gap:.8rem;padding:.3rem .5rem;font-size:.95rem;display:flex}.hd-room{color:var(--text-accent);font-size:1rem;font-weight:700}.hd-my{color:var(--text-success);font-weight:700}.hd-btn{background:var(--bg-secondary);color:var(--text-secondary);border:1px solid var(--border-secondary);cursor:pointer;border-radius:3px;padding:.15rem .5rem;font-size:.8rem}.G-table{background:var(--bg-table);background-image:radial-gradient(ellipse at 50% 50%,var(--bg-table-gradient-start) 0%,var(--bg-table) 45%,var(--bg-table-gradient-end) 100%);grid-template:".top.""left center right"1fr"bot bot bot"/auto 1fr auto;display:grid;position:relative;overflow:hidden}.G-top{flex-direction:column;grid-area:top;align-items:center;gap:2px;padding:4px;display:flex}.G-left{writing-mode:vertical-rl;flex-direction:column;grid-area:left;align-items:center;gap:2px;padding:4px;display:flex}.G-right{writing-mode:vertical-rl;flex-direction:column;grid-area:right;align-items:center;gap:2px;padding:4px;display:flex}.G-bot{z-index:50;flex-direction:column;grid-area:bot;align-items:center;gap:3px;padding:4px;display:flex}.hand-other{pointer-events:none;writing-mode:horizontal-tb;gap:1px;display:flex}.hand-other-top{flex-direction:row;justify-content:center}.hand-other-left{flex-direction:column;align-items:flex-end}.hand-other-right{flex-direction:column;align-items:flex-start}.hand-other-left .tile{overflow:visible;transform:rotate(90deg)}.hand-other-right .tile{overflow:visible;transform:rotate(-90deg)}.G-center{grid-area:center;justify-content:center;align-items:center;min-height:0;display:flex;position:relative;overflow:hidden}.G-meld-layer{pointer-events:none;grid-template:".top."1fr"left.right"".self."1fr/1fr auto 1fr;display:grid;position:absolute;inset:0}.G-meld-layer>div{pointer-events:auto}.G-meld-top{grid-area:top;justify-content:center;align-self:start;align-items:flex-end;display:flex}.G-meld-left{grid-area:left;justify-content:flex-end;justify-self:start;align-items:center;display:flex}.G-meld-right{grid-area:right;justify-content:flex-start;justify-self:end;align-items:center;display:flex}.G-meld-self{grid-area:self;justify-content:center;align-self:end;align-items:flex-start;display:flex}.G-river-layer{pointer-events:none;grid-template:".top."1fr"left.right"".self."1fr/1fr auto 1fr;display:grid;position:absolute;inset:0}.G-river-layer>div{pointer-events:auto}.G-river-top{grid-area:top;justify-content:center;align-items:center;display:flex}.G-river-left{grid-area:left;justify-content:center;align-items:center;display:flex}.G-river-right{grid-area:right;justify-content:center;align-items:center;display:flex}.G-river-self{grid-area:self;justify-content:center;align-items:center;display:flex}.G-compass{z-index:1;justify-content:center;align-items:center;display:flex;position:relative}.G-compass:before{content:"";pointer-events:none;background:radial-gradient(circle,#00280040 0%,#0000 100%);border:2px solid #ffd70033;border-radius:50%;width:clamp(5.5rem,16vw,8.5rem);height:clamp(5.5rem,16vw,8.5rem);position:absolute}.plbl{border:1px solid var(--border-secondary);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);white-space:nowrap;background:#111827d9;border-radius:4px;align-items:center;gap:.3rem;padding:.15rem .4rem;font-size:.85rem;display:flex}.plbl-act{border-color:var(--text-success);box-shadow:0 0 5px #34d3994d}.plbl-seat{color:var(--text-accent);font-size:.95rem;font-weight:700}.plbl-score{color:var(--text-info);font-size:.85rem}.plbl-cnt{color:var(--text-secondary);font-size:.8rem}.plbl-ic{font-size:.8rem}.G-hand{z-index:50;scrollbar-width:none;-ms-overflow-style:none;justify-content:center;gap:2px;width:100%;max-width:100vw;padding:10px 2px 0;display:flex;overflow:auto visible}.G-hand::-webkit-scrollbar{display:none}.river{grid-template-columns:repeat(6,auto);justify-content:center;gap:1px;display:grid}.G-river-left .river{flex-direction:column;align-items:flex-end;gap:1px;display:flex}.G-river-right .river{flex-direction:column;align-items:flex-start;gap:1px;display:flex}.G-river-left .river .tile{overflow:visible;transform:rotate(90deg)}.G-river-right .river .tile{overflow:visible;transform:rotate(-90deg)}.meld-zone{align-items:flex-end;gap:2px;display:flex}.meld-row{flex-wrap:wrap;align-items:flex-end;gap:4px;display:flex}.meld-row-self{flex-direction:row}.meld-row-right{flex-direction:column;align-items:flex-end}.meld-row-top{flex-direction:row}.meld-row-left{flex-direction:column;align-items:flex-start}.meld-group{align-items:flex-end;gap:1px;display:flex;position:relative}.meld-group.meld-peng,.meld-group.meld-ming_gang,.meld-group.meld-an-gang{flex-direction:row}.meld-group.meld-bu-gang{flex-direction:row;position:relative}.G-meld-left .meld-group .tile{overflow:visible;transform:rotate(90deg)}.G-meld-right .meld-group .tile{overflow:visible;transform:rotate(-90deg)}.G-meld-left .meld-group{flex-direction:column;align-items:flex-start}.G-meld-right .meld-group{flex-direction:column;align-items:flex-end}.meld-extra{z-index:1;margin-top:-25%;margin-left:-40%;position:relative}.compass{-webkit-user-select:none;user-select:none;flex-direction:column;flex-shrink:0;align-items:center;display:flex}.cp-dir{background:var(--color-purple-bg);width:2.5rem;height:1.6rem;color:var(--color-purple-light);border:1px solid var(--color-purple);justify-content:center;align-items:center;font-size:.95rem;font-weight:700;display:flex}.cp-top{border-bottom:none;border-radius:5px 5px 0 0}.cp-bot{border-top:none;border-radius:0 0 5px 5px}.cp-left{border-right:none;border-radius:5px 0 0 5px}.cp-right{border-left:none;border-radius:0 5px 5px 0}.cp-mid{align-items:stretch;display:flex}.cp-center{background:var(--compass-bg);border:1px solid var(--compass-border);width:3.2rem;color:var(--text-accent);justify-content:center;align-items:center;font-size:1.1rem;font-weight:700;display:flex}.cp-active{background:var(--color-purple);color:var(--text-accent);animation:1s infinite cpBlink}@keyframes cpBlink{0%,to{opacity:1}50%{opacity:.35}}.tile{background:var(--tile-bg);border:1px solid var(--tile-border);-webkit-user-select:none;user-select:none;border-radius:4px;justify-content:center;align-items:center;transition:transform .1s,box-shadow .1s;display:flex;position:relative;overflow:hidden;box-shadow:0 1px 3px #0000004d,inset 0 1px #fff6}.tile-img{object-fit:contain;pointer-events:none;width:100%;height:100%;display:block}.tile-sm{width:clamp(1rem,2.5vw,1.5rem);height:clamp(1.3rem,3.3vw,2rem)}.tile-md{width:clamp(1.4rem,3.5vw,2rem);height:clamp(1.8rem,4.5vw,2.6rem)}.tile-lg{width:clamp(1.6rem,6.25vw,2.6rem);height:clamp(2.1rem,8.33333vw,3.5rem)}.tile-clickable{cursor:pointer}.tile-clickable:hover{transform:translateY(-3px);box-shadow:0 4px 8px #00000059}.tile-clickable:active{transform:translateY(0)}.tile-last-drawn{border-color:var(--text-accent);box-shadow:0 0 6px #d4a01780}.tile-selected{border-color:var(--text-error);transform:translateY(-5px);box-shadow:0 5px 10px #e53e3e4d}.tile-facedown{background:var(--tile-facedown-bg);border-color:var(--tile-facedown-border)}.tile-bounce{animation:1.2s ease-in-out 3 bounce}@keyframes bounce{0%,to{transform:translateY(0)}30%{transform:translateY(-5px)}60%{transform:translateY(0)}80%{transform:translateY(-3px)}}.tile-selected.tile-bounce{animation:.8s ease-in-out infinite selbounce}@keyframes selbounce{0%,to{transform:translateY(-5px)}50%{transform:translateY(-9px)}}.tile-back-label{color:var(--text-secondary);font-size:.7rem}.action-bar{border:1px solid var(--border-secondary);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:60;background:#111827eb;border-radius:4px;justify-content:center;align-items:center;gap:.4rem;padding:.2rem .4rem;display:flex}.timer{color:var(--text-accent);font-size:.95rem}.action-divider{color:var(--text-muted)}.action-btn{background:var(--btn-bg);color:var(--text-primary);border:1px solid var(--border-secondary);cursor:pointer;border-radius:4px;padding:.25rem .8rem;font-size:1rem;transition:background .15s}.action-btn:hover{background:var(--btn-bg-hover)}.action-hu{background:var(--btn-bg-danger);border-color:var(--border-error);color:var(--text-accent)}.action-hu:hover{background:#9b2c2c}.blink{animation:1s infinite blink}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.pause-overlay{z-index:100;background:#000c;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.pause-content{text-align:center;color:var(--text-accent)}.pause-content h2{margin-bottom:.4rem;font-size:1.6rem}.pause-content p{color:var(--text-primary);margin-bottom:.5rem;font-size:1rem}.disconnected-player{color:var(--text-error);margin:.15rem 0;font-size:.9rem}.vote-dialog{z-index:90;background:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.vote-content{background:var(--bg-secondary);border:1px solid var(--text-accent);text-align:center;border-radius:6px;padding:1.2rem;font-size:1rem}.vote-buttons{justify-content:center;gap:.8rem;margin-top:.6rem;display:flex}.dice-overlay{z-index:95;background:#000000d9;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.dice-content{text-align:center;color:var(--text-accent)}.dice-content h2{margin-bottom:.6rem;font-size:1.5rem}.dice-rolls{flex-direction:column;gap:.4rem;font-size:1.1rem;display:flex}.dice-player{background:var(--bg-secondary);border:1px solid var(--border-primary);color:var(--text-primary);border-radius:4px;padding:.3rem .6rem;font-size:1rem}.dice-winner{border-color:var(--text-accent);color:var(--text-accent);font-weight:700;animation:1s ease-in-out 2 bounce}.score-modal-overlay{z-index:110;background:#000000d9;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.score-modal-content{background:var(--bg-secondary);border:1px solid var(--border-secondary);border-radius:8px;min-width:320px;max-width:min(95vw,720px);max-height:85vh;overflow:auto}.score-modal-header{border-bottom:1px solid var(--border-secondary);justify-content:space-between;align-items:center;padding:.5rem .8rem;display:flex}.score-modal-title{color:var(--text-accent);font-size:1.1rem;font-weight:700}.sp-float{z-index:40;touch-action:none;cursor:grab;position:fixed}.sp-float:active{cursor:grabbing}.sp-btn{color:var(--text-info);border:1px solid var(--border-primary);cursor:pointer;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#111827eb;border-radius:4px;padding:.25rem .6rem;font-size:.85rem}.sp-btn:hover{background:var(--bg-secondary)}.sp-body{border:1px solid var(--border-primary);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#111827f2;border-radius:4px;max-width:280px;max-height:30vh;margin-top:4px;padding:.3rem .5rem;font-size:.8rem;overflow-y:auto}.sp-row{border-bottom:1px solid var(--bg-tertiary);flex-wrap:wrap;gap:.3rem;padding:.08rem 0;display:flex}.sp-room{color:var(--text-info);font-size:.7rem}.sp-rd{color:var(--text-accent);font-weight:700}.sp-res{color:var(--text-secondary)}.sp-d{font-size:.75rem}.theme-toggle{z-index:120;background:var(--btn-bg);color:var(--text-primary);border:1px solid var(--border-primary);cursor:pointer;border-radius:4px;padding:.25rem .5rem;font-size:.8rem;position:fixed;top:.5rem;right:.5rem}.theme-toggle:hover{background:var(--btn-bg-hover)}.room-list-container{background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:6px;min-width:280px;max-width:90vw;margin-top:.8rem;padding:.6rem}.room-list-title{color:var(--text-info);border-bottom:1px solid var(--border-primary);margin-bottom:.4rem;padding-bottom:.2rem;font-size:.95rem}.room-list{flex-direction:column;gap:.3rem;display:flex}.room-list-item{background:var(--bg-tertiary);border-radius:4px;align-items:center;gap:.5rem;padding:.3rem .4rem;font-size:.85rem;display:flex}.room-list-id{color:var(--text-accent);letter-spacing:.05em;font-family:monospace;font-weight:700}.room-list-count{color:var(--text-secondary);margin-left:auto}.room-list-status{border-radius:3px;padding:.1rem .3rem;font-size:.75rem}.status-waiting{color:var(--text-success);border:1px solid var(--border-success);background:#34d39926}.status-playing{color:var(--text-info);border:1px solid var(--border-info);background:#63b3ed26}.status-finished{color:var(--text-secondary);border:1px solid var(--border-primary);background:#9ca3af26}.room-list-join-btn{background:var(--btn-bg-success);color:#fff;cursor:pointer;border:none;border-radius:3px;padding:.15rem .4rem;font-size:.75rem}.room-list-join-btn:hover:not(:disabled){opacity:.9}.room-list-join-btn:disabled{opacity:.4;cursor:not-allowed}@media (max-width:768px){.G-hd{gap:.4rem;padding:.2rem .3rem;font-size:.8rem}.hd-room{font-size:.85rem}.plbl{padding:.1rem .25rem;font-size:.72rem}.plbl-seat{font-size:.8rem}.tile-sm{width:clamp(.85rem,2.2vw,1.2rem);height:clamp(1.1rem,2.8vw,1.6rem)}.action-btn{padding:.2rem .6rem;font-size:.85rem}.cp-dir{width:2rem;height:1.3rem;font-size:.8rem}.cp-center{width:2.6rem;font-size:.9rem}.sp-body{max-width:220px;font-size:.7rem}}@media (max-width:480px){.tile-lg{width:clamp(1.2rem,5.26316vw,1.8rem);height:clamp(1.6rem,7.14286vw,2.3rem)}.tile-sm{width:clamp(.7rem,1.8vw,.9rem);height:clamp(.9rem,2.3vw,1.2rem)}.plbl{font-size:.6rem}.action-btn{padding:.15rem .45rem;font-size:.78rem}.cp-dir{width:1.5rem;height:1rem;font-size:.65rem}.cp-center{width:2rem;font-size:.75rem}}