*,:after,:before{box-sizing:border-box;margin:0;padding:0}body{font-family:Noto Sans SC,PingFang SC,Microsoft YaHei,sans-serif;background:#0a0e14;color:#d4d4d4;overflow:hidden;-webkit-tap-highlight-color:transparent}.lobby{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100dvh;gap:.8rem;padding:1rem}.lobby h2{font-size:1.6rem;color:#e8b339}.connection-status{font-size:.9rem}.lobby-actions{display:flex;flex-direction:column;gap:.6rem;align-items:center}.join-section{display:flex;gap:.4rem}.room-input{padding:.4rem;font-size:1rem;background:#1a1f2b;text-align:center;width:6rem;letter-spacing:.25em}.lobby-btn,.room-input{border:1px solid #2d3748;color:#d4d4d4;border-radius:4px}.lobby-btn{padding:.4rem 1.1rem;font-size:.95rem;background:#1e2533;cursor:pointer;transition:background .15s}.lobby-btn:hover:not(:disabled){background:#2d3748}.lobby-btn:disabled{opacity:.35;cursor:not-allowed}.room-info{display:flex;flex-direction:column;align-items:center;gap:.5rem}.room-id-display{font-size:1.3rem;color:#e8b339;letter-spacing:.1em}.player-list{background:#1a1f2b;border:1px solid #2d3748;padding:.6rem;min-width:240px;border-radius:4px}.player-list-title{font-size:.95rem;color:#63b3ed;margin-bottom:.3rem;border-bottom:1px solid #2d3748;padding-bottom:.15rem}.player-slot{padding:.2rem 0;font-size:.95rem}.player-slot-self{color:#e8b339}.empty-slot{color:#4a5568}.waiting-hint{color:#718096;font-size:.85rem}.kick-btn{margin-left:.3rem;padding:.08rem .3rem;font-size:.75rem;background:#742a2a;color:#feb2b2;border:1px solid #c53030;cursor:pointer;border-radius:2px}.lobby-btn-group{display:flex;gap:.4rem;margin-top:.3rem;flex-wrap:wrap;justify-content:center}.unready-btn{background:#4a5568}.dissolve-owner-btn{background:#742a2a;border-color:#c53030}.start-btn{background:#276749!important;border-color:#38a169!important;color:#fff!important;font-weight:700}.G{display:grid;grid-template-rows:auto 1fr;height:100dvh;overflow:hidden}.G-hd{display:flex;align-items:center;justify-content:center;gap:.8rem;padding:.3rem .5rem;background:#111827;border-bottom:1px solid #1f2937;font-size:.95rem;white-space:nowrap;z-index:10}.hd-room{color:#e8b339;font-weight:700;font-size:1rem}.hd-my{color:#34d399;font-weight:700}.hd-btn{padding:.15rem .5rem;font-size:.8rem;background:#1f2937;color:#9ca3af;border:1px solid #374151;cursor:pointer;border-radius:3px}.G-table{position:relative;background:#0c2e0c;background-image:radial-gradient(ellipse at 50% 50%,#1a4a1a 0,#0c2e0c 45%,#071a07 100%);display:grid;grid-template-areas:".    top    ." "left center right" "bot   bot   bot";grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr auto;overflow:hidden}.G-top{grid-area:top;display:flex;flex-direction:column;align-items:center;padding:4px;gap:2px}.G-left{grid-area:left}.G-left,.G-right{display:flex;flex-direction:column;align-items:center;padding:4px;gap:2px;writing-mode:vertical-rl}.G-right{grid-area:right}.G-bot{grid-area:bot;display:flex;flex-direction:column;align-items:center;padding:4px;gap:3px;z-index:50}.hand-other{display:flex;gap:1px;pointer-events:none;writing-mode:horizontal-tb}.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{transform:rotate(90deg);overflow:visible}.hand-other-right .tile{transform:rotate(-90deg);overflow:visible}.G-center{grid-area:center;position:relative;display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden}.G-meld-layer{position:absolute;inset:0;display:grid;grid-template-areas:".    top    ." "left .      right" ".    self   .";grid-template-columns:1fr auto 1fr;grid-template-rows:1fr auto 1fr;pointer-events:none}.G-meld-layer>div{pointer-events:auto}.G-meld-top{grid-area:top;display:flex;justify-content:center;align-items:flex-end;align-self:start}.G-meld-left{grid-area:left;justify-content:flex-end;justify-self:start}.G-meld-left,.G-meld-right{display:flex;align-items:center}.G-meld-right{grid-area:right;justify-content:flex-start;justify-self:end}.G-meld-self{grid-area:self;display:flex;justify-content:center;align-items:flex-start;align-self:end}.G-river-layer{position:absolute;inset:0;display:grid;grid-template-areas:".    top    ." "left .      right" ".    self   .";grid-template-columns:1fr auto 1fr;grid-template-rows:1fr auto 1fr;pointer-events:none}.G-river-layer>div{pointer-events:auto}.G-river-top{grid-area:top}.G-river-left,.G-river-top{display:flex;justify-content:center;align-items:center}.G-river-left{grid-area:left}.G-river-right{grid-area:right}.G-river-right,.G-river-self{display:flex;justify-content:center;align-items:center}.G-river-self{grid-area:self}.G-compass{position:relative;z-index:1;display:flex;align-items:center;justify-content:center}.G-compass:before{content:"";position:absolute;width:clamp(5.5rem,16vw,8.5rem);height:clamp(5.5rem,16vw,8.5rem);border-radius:50%;border:2px solid rgba(255,215,0,.2);background:radial-gradient(circle,rgba(0,40,0,.25) 0,transparent 100%);pointer-events:none}.plbl{display:flex;align-items:center;gap:.3rem;padding:.15rem .4rem;background:rgba(17,24,39,.85);border:1px solid #374151;border-radius:4px;font-size:.85rem;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);white-space:nowrap}.plbl-act{border-color:#34d399;box-shadow:0 0 5px rgba(52,211,153,.3)}.plbl-seat{color:#e8b339;font-weight:700;font-size:.95rem}.plbl-score{color:#63b3ed;font-size:.85rem}.plbl-cnt{color:#9ca3af}.plbl-cnt,.plbl-ic{font-size:.8rem}.G-hand{display:flex;justify-content:center;gap:2px;width:100%;max-width:100vw;padding:10px 2px 0;z-index:50;overflow-x:auto;overflow-y:visible;scrollbar-width:none;-ms-overflow-style:none}.G-hand::-webkit-scrollbar{display:none}.river{display:grid;grid-template-columns:repeat(6,auto);grid-gap:1px;gap:1px;justify-content:center}.G-river-left .river{display:flex;flex-direction:column;gap:1px;align-items:flex-end}.G-river-right .river{display:flex;flex-direction:column;gap:1px;align-items:flex-start}.G-river-left .river .tile{transform:rotate(90deg);overflow:visible}.G-river-right .river .tile{transform:rotate(-90deg);overflow:visible}.meld-zone{gap:2px}.meld-row,.meld-zone{display:flex;align-items:flex-end}.meld-row{gap:4px;flex-wrap:wrap}.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{display:flex;gap:1px;align-items:flex-end;position:relative}.meld-group.meld-an-gang,.meld-group.meld-ming_gang,.meld-group.meld-peng{flex-direction:row}.meld-group.meld-bu-gang{flex-direction:row;position:relative}.G-meld-left .meld-group .tile{transform:rotate(90deg);overflow:visible}.G-meld-right .meld-group .tile{transform:rotate(-90deg);overflow:visible}.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{margin-left:-40%;margin-top:-25%;position:relative;z-index:1}.compass{flex-direction:column;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0}.compass,.cp-dir{display:flex;align-items:center}.cp-dir{width:2.5rem;height:1.6rem;justify-content:center;background:#2d1b4e;color:#c4b5fd;font-weight:700;font-size:.95rem;border:1px solid #4c1d95}.cp-top{border-radius:5px 5px 0 0;border-bottom:none}.cp-bot{border-radius:0 0 5px 5px;border-top:none}.cp-left{border-radius:5px 0 0 5px;border-right:none}.cp-right{border-radius:0 5px 5px 0;border-left:none}.cp-mid{display:flex;align-items:stretch}.cp-center{width:3.2rem;display:flex;align-items:center;justify-content:center;background:#1e1145;border:1px solid #4c1d95;color:#e8b339;font-size:1.1rem;font-weight:700}.cp-active{animation:cpBlink 1s infinite;background:#4c1d95;color:#fbbf24}@keyframes cpBlink{0%,to{opacity:1}50%{opacity:.35}}.tile{position:relative;display:flex;align-items:center;justify-content:center;background:#f5f0e6;border:1px solid #c4b89a;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-shadow:0 1px 3px rgba(0,0,0,.3),inset 0 1px 0 hsla(0,0%,100%,.4);transition:transform .1s,box-shadow .1s;overflow:hidden}.tile-img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}.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,calc(100vw/16),2.6rem);height:clamp(2.1rem,calc(100vw/12),3.5rem)}.tile-clickable{cursor:pointer}.tile-clickable:hover{transform:translateY(-3px);box-shadow:0 4px 8px rgba(0,0,0,.35)}.tile-clickable:active{transform:translateY(0)}.tile-last-drawn{border-color:#d4a017;box-shadow:0 0 6px rgba(212,160,23,.5)}.tile-selected{border-color:#e53e3e;transform:translateY(-5px);box-shadow:0 5px 10px rgba(229,62,62,.3)}.tile-facedown{background:#1a6b3a;border-color:#2f855a}.tile-bounce{animation:bounce 1.2s ease-in-out 3}@keyframes bounce{0%,to{transform:translateY(0)}30%{transform:translateY(-5px)}60%{transform:translateY(0)}80%{transform:translateY(-3px)}}.tile-selected.tile-bounce{animation:selbounce .8s ease-in-out infinite}@keyframes selbounce{0%,to{transform:translateY(-5px)}50%{transform:translateY(-9px)}}.tile-back-label{color:#9ca3af;font-size:.7rem}.action-bar{display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.2rem .4rem;background:rgba(17,24,39,.92);border:1px solid #374151;border-radius:4px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:60}.timer{font-size:.95rem;color:#e8b339}.action-divider{color:#4a5568}.action-btn{padding:.25rem .8rem;font-size:1rem;background:#1e2533;color:#d4d4d4;border:1px solid #374151;cursor:pointer;border-radius:4px;transition:background .15s}.action-btn:hover{background:#374151}.action-hu{background:#742a2a;border-color:#c53030;color:#fbd38d}.action-hu:hover{background:#9b2c2c}.blink{animation:blink 1s infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.pause-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:100}.pause-content{text-align:center;color:#e8b339}.pause-content h2{font-size:1.6rem;margin-bottom:.4rem}.pause-content p{font-size:1rem;color:#d4d4d4;margin-bottom:.5rem}.disconnected-player{font-size:.9rem;color:#fc8181;margin:.15rem 0}.vote-dialog{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:90}.vote-content{background:#1a1f2b;border:1px solid #e8b339;padding:1.2rem;text-align:center;border-radius:6px;font-size:1rem}.vote-buttons{gap:.8rem;margin-top:.6rem}.dice-overlay,.vote-buttons{display:flex;justify-content:center}.dice-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);align-items:center;z-index:95}.dice-content{text-align:center;color:#e8b339}.dice-content h2{font-size:1.5rem;margin-bottom:.6rem}.dice-rolls{display:flex;flex-direction:column;gap:.4rem;font-size:1.1rem}.dice-player{padding:.3rem .6rem;background:#1a1f2b;border:1px solid #2d3748;color:#d4d4d4;border-radius:4px;font-size:1rem}.dice-winner{border-color:#e8b339;color:#e8b339;font-weight:700;animation:bounce 1s ease-in-out 2}.score-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:110}.score-modal-content{background:#1a1f2b;border:1px solid #374151;border-radius:8px;max-width:min(95vw,720px);max-height:85vh;overflow:auto;min-width:320px}.score-modal-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem .8rem;border-bottom:1px solid #374151}.score-modal-title{color:#e8b339;font-size:1.1rem;font-weight:700}.sp-float{position:fixed;z-index:40;touch-action:none;cursor:-webkit-grab;cursor:grab}.sp-float:active{cursor:-webkit-grabbing;cursor:grabbing}.sp-btn{padding:.25rem .6rem;font-size:.85rem;background:rgba(17,24,39,.92);color:#63b3ed;border:1px solid #2d3748;border-radius:4px;cursor:pointer;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.sp-btn:hover{background:#1f2937}.sp-body{margin-top:4px;background:rgba(17,24,39,.95);border:1px solid #2d3748;border-radius:4px;padding:.3rem .5rem;max-height:30vh;overflow-y:auto;max-width:280px;font-size:.8rem;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.sp-row{display:flex;flex-wrap:wrap;gap:.3rem;padding:.08rem 0;border-bottom:1px solid #1f2937}.sp-room{color:#63b3ed;font-size:.7rem}.sp-rd{color:#e8b339;font-weight:700}.sp-res{color:#9ca3af}.sp-d{font-size:.75rem}@media(max-width:768px){.G-hd{gap:.4rem;font-size:.8rem;padding:.2rem .3rem}.hd-room{font-size:.85rem}.plbl{font-size:.72rem;padding:.1rem .25rem}.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,calc(100vw/19),1.8rem);height:clamp(1.6rem,calc(100vw/14),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}}