:root{--bg:#efe8dc;--felt:#1e2b52;--felt-dark:#141d3b;--frame:#6e1510;--gold:#c99a3e;--face:#fbf6ea;--edge:#e8863f;--back:#ee8b4c;--back-dark:#d8692e;--red:#c8261d;--ink:#2a2522;--panel:#e3ebe4}*{box-sizing:border-box}html,body{background:var(--bg);min-height:100%;color:var(--ink);-webkit-tap-highlight-color:transparent;overscroll-behavior:none;margin:0;padding:0;font-family:Nunito,system-ui,-apple-system,Segoe UI,sans-serif}button{font:inherit}.tile-glyph{font-family:Noto Serif TC,Songti TC,PMingLiU,MingLiU,serif;font-weight:700}.tile{--tw:32px;--thick:calc(var(--tw) * .2);width:var(--tw);height:calc(var(--tw) * 1.36);border-radius:calc(var(--tw) * .13);background:radial-gradient(120% 80% at 30% 15%, #ffffffe6, transparent 55%), linear-gradient(180deg, #fffdf7 0%, var(--face) 60%, #ece1c9 100%);box-shadow:inset 0 calc(var(--tw) * -.03) 0 #966e3c2e, inset 0 0 0 1px #a0784638, 0 calc(var(--thick) * .45) 0 #efe4cc, 0 var(--thick) 0 var(--edge), 0 calc(var(--thick) + 1px) 0 #b9561d, 0 calc(var(--thick) + 3px) calc(var(--tw) * .18) #28140059;margin-bottom:calc(var(--thick) + 2px);border:none;flex:none;padding:0;transition:transform .14s cubic-bezier(.3,1.4,.5,1),filter .2s;display:block;position:relative}.tile-svg{width:90%;height:90%;position:absolute;inset:5%}.tile-back{background:radial-gradient(120% 80% at 30% 15%, #ffdcbeb3, transparent 55%), linear-gradient(180deg, #f6a46c 0%, var(--back) 55%, var(--back-dark) 100%);box-shadow:inset 0 0 0 1px #78320a40, 0 var(--thick) 0 #f7ead2, 0 calc(var(--thick) + 3px) calc(var(--tw) * .18) #28140059}.tile-clickable{cursor:pointer}@media (hover:hover){.tile-clickable:hover{transform:translateY(-8%)}}.tile-selected,.tile-selected:hover{filter:drop-shadow(0 0 6px #ffc43de6);transform:translateY(-30%)}.tile-highlight{filter:drop-shadow(0 0 5px #ffc83cf2)}.tile-dim{filter:saturate(.85)brightness(.96)}.menu{place-items:center;min-height:100dvh;padding:24px 16px;display:grid}.menu-card{background:var(--felt);color:#f4ecdc;border:6px solid var(--frame);outline:2px solid var(--gold);outline-offset:-10px;text-align:center;border-radius:22px;width:100%;max-width:380px;padding:28px 22px 22px;box-shadow:0 20px 40px #1e140a40}.menu-card h1{letter-spacing:1px;margin:0 0 14px;font-size:34px}.menu-panda{color:#c9cfe6;width:90px;margin:0 auto 6px}.menu-tiles{justify-content:center;gap:6px;margin-bottom:22px;display:flex}.menu-tiles .tile{--tw:40px}.menu-label{text-align:left;opacity:.8;margin-bottom:6px;font-size:13px;display:block}.menu-input{color:#fff;background:#26345f;border:2px solid #3a4a7a;border-radius:12px;width:100%;margin-bottom:16px;padding:12px 14px;font-size:16px}.menu-play{padding:14px;font-size:18px;text-decoration:none;display:block}.rules{text-align:left;opacity:.9;margin-top:18px;font-size:14px}.rules summary{cursor:pointer;font-weight:800}.rules ul{padding-left:18px;line-height:1.5}.loading{place-items:center;min-height:100dvh;font-weight:800;display:grid}.play{background:radial-gradient(90% 60% at 50% 35%,#fbf4e6 0%,#efe4d0 60%,#e2d3b8 100%);flex-direction:column;height:100dvh;display:flex;overflow:hidden}.stage{flex:1;min-height:0;position:relative}.stage canvas{touch-action:none}.scene-loading{opacity:.6;place-items:center;font-weight:800;display:grid;position:absolute;inset:0}.topbar{padding:calc(8px + env(safe-area-inset-top)) 12px 0;pointer-events:none;justify-content:space-between;align-items:center;display:flex;position:absolute;top:0;left:0;right:0}.icon-btn{pointer-events:auto;width:40px;height:40px;color:var(--ink);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer;background:#ffffffbf;border:none;border-radius:50%;place-items:center;text-decoration:none;display:grid;box-shadow:0 2px 8px #3c280a26}.round-pill{letter-spacing:.5px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#ffffffbf;border-radius:99px;padding:6px 14px;font-size:13px;font-weight:900;box-shadow:0 2px 8px #3c280a26}.badges{pointer-events:none;position:absolute;inset:0}.badge{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#f3eee4;white-space:nowrap;will-change:transform;background:#10162ec7;border:1.5px solid #ffffff1f;border-radius:99px;align-items:center;gap:7px;padding:4px 10px 4px 4px;transition:border-color .2s,box-shadow .2s,background .2s;display:flex;position:absolute;top:0;left:0;box-shadow:0 4px 14px #0000004d}.badge-active{border-color:#ffc23d;box-shadow:0 0 0 3px #ffc23d59,0 4px 18px #ffaa2873}.badge-me.badge-active{background:#b01e16eb}.avatar{color:#fff;border-radius:50%;place-items:center;width:30px;height:30px;font-size:14px;font-weight:900;display:grid;box-shadow:inset 0 -3px #0003,0 0 0 2px #ffffffd9}.badge-text{flex-direction:column;line-height:1.1;display:flex}.badge-text b{font-size:13px;font-weight:900}.badge-text small{opacity:.75;align-items:center;gap:4px;font-size:11px;font-weight:700;display:flex}.wind-chip,.dealer-chip{border-radius:6px;place-items:center;width:22px;height:22px;font-family:Noto Serif TC,serif;font-size:13px;font-weight:700;display:grid}.wind-chip{color:#222;background:#f6efdf}.dealer-chip{color:#5a2a00;background:#f2b632}.dots{gap:2px;display:inline-flex}.dots i{background:#ffc23d;border-radius:50%;width:4px;height:4px;animation:1s infinite blink}.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}@keyframes blink{0%,to{opacity:.2}50%{opacity:1}}.panel{z-index:2;padding:8px 6px calc(12px + env(safe-area-inset-bottom));color:#f3eee4;background:linear-gradient(#241b16f0,#16100dfa);border-top:2px solid #c99a3e;position:relative;box-shadow:0 -10px 30px #28140040}.panel-actions{justify-content:center;align-items:center;min-height:52px;display:flex}.claim-bar{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.action-btn{color:#fff;letter-spacing:.3px;cursor:pointer;background:linear-gradient(#4a5d9e,#2f3f73);border:none;border-radius:14px;justify-content:center;align-items:center;gap:6px;min-height:46px;padding:8px 18px;font-size:16px;font-weight:900;text-decoration:none;animation:.25s cubic-bezier(.3,1.5,.5,1) btn-in;display:inline-flex;box-shadow:0 4px #1b2650,0 6px 14px #0000004d}.action-btn:active{transform:translateY(3px);box-shadow:0 1px #1b2650}@keyframes btn-in{0%{opacity:0;transform:scale(.6)}}.action-hu{background:linear-gradient(#ef4a3c,#b81d14);box-shadow:0 4px #7d120c,0 0 18px #ff50328c}.action-pass{color:var(--ink);background:linear-gradient(#fff,#e9e2d4);box-shadow:0 4px #b3a98f,0 6px 14px #00000040}.mini-tiles{gap:1px;display:inline-flex}.mini-tiles .tile{--tw:20px}.discard-btn{color:#ffffff8c;cursor:pointer;background:#ffffff1a;border:none;border-radius:99px;justify-content:center;align-items:center;gap:8px;min-width:132px;height:46px;padding:0 20px;font-size:16px;font-weight:900;transition:background .2s,transform .15s;display:flex}.discard-btn small{opacity:.75;font-size:11px;font-weight:700}.discard-btn:not(:disabled){color:#fff;background:linear-gradient(#ef4a3c,#b81d14);box-shadow:0 4px #7d120c,0 0 16px #ff503273}.discard-btn:disabled{cursor:default}.status{text-align:center;color:#e8d9b5;min-height:18px;margin:4px 0 2px;font-size:13px;font-weight:800}.my-hand{justify-content:center;align-items:flex-end;gap:2px;min-height:88px;padding-top:14px;display:flex}.my-hand .tile{--tw:min(64px, calc((100vw - 30px) / 14.5))}.my-hand .tile-drawn{margin-left:min(14px,2.6vw)}.my-turn .tile-drawn{animation:.35s cubic-bezier(.3,1.4,.5,1) drawn-in}@keyframes drawn-in{0%{opacity:0;transform:translateY(-60%)rotate(8deg)}}.callout{--c:#ff5a4a;--c2:#9e1a12;--dur:1.5s;pointer-events:none;z-index:20;animation:callout-life var(--dur) ease forwards;flex-direction:column;align-items:center;display:flex;position:absolute;top:42%;left:50%;transform:translate(-50%,-50%)}.callout-pong{--c:#3fa9ff;--c2:#0c4f8f}.callout-chow{--c:#3ecf6e;--c2:#0d6a2f}.callout-kong{--c:#b66bff;--c2:#4f1a8a}.callout-hu,.callout-zimo{--c:#fc3;--c2:#a3200f;--dur:2.6s}.burst{width:0;height:0;position:absolute;top:40%;left:50%}.rays{background:repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--c) 70%, transparent) 0deg 8deg, transparent 8deg 22deg);width:340px;height:340px;animation:rays var(--dur) ease-out forwards;border-radius:50%;position:absolute;top:-170px;left:-170px;-webkit-mask:radial-gradient(circle,#000 0%,#0009 35%,#0000 70%);mask:radial-gradient(circle,#000 0%,#0009 35%,#0000 70%)}.callout-hu .rays,.callout-zimo .rays{width:520px;height:520px;top:-260px;left:-260px}.ring{border:6px solid var(--c);width:120px;height:120px;box-shadow:0 0 24px var(--c), inset 0 0 18px var(--c);border-radius:50%;animation:.7s cubic-bezier(.1,.7,.3,1) forwards ring;position:absolute;top:-60px;left:-60px}.ring-2{opacity:0;border-width:3px;animation-delay:.12s}.spark{background:linear-gradient(180deg, #fff, var(--c));width:8px;height:22px;box-shadow:0 0 10px var(--c);transform:rotate(var(--a)) translateY(0);opacity:0;border-radius:99px;animation:.75s cubic-bezier(.1,.8,.3,1) forwards spark;position:absolute;top:-4px;left:-4px}.callout-han{color:#fff8e6;-webkit-text-stroke:4px var(--c2);paint-order:stroke fill;text-shadow:0 5px 0 color-mix(in srgb, var(--c2) 70%, #000), 0 0 26px var(--c), 0 0 60px var(--c);font-family:Noto Serif TC,serif;font-size:clamp(72px,20vw,132px);font-weight:700;line-height:1;animation:.55s cubic-bezier(.2,1.6,.4,1) both han-in;position:relative}.callout-hu .callout-han,.callout-zimo .callout-han{background:linear-gradient(#fff6c8 10%,#ffd34d 45%,#ff9f1a 90%);color:#0000;text-shadow:none;-webkit-text-stroke:3px #a3200f;-webkit-background-clip:text;background-clip:text;font-size:clamp(96px,28vw,180px);animation:.6s cubic-bezier(.2,1.6,.4,1) both han-in,.9s ease-in-out .6s infinite alternate han-glow}.callout-label{background:linear-gradient(180deg, color-mix(in srgb, var(--c) 85%, #fff), var(--c2));color:#fff;letter-spacing:2px;box-shadow:0 6px 18px #00000059, 0 0 18px color-mix(in srgb, var(--c) 60%, transparent);white-space:nowrap;text-shadow:0 1px 2px #0006;border-radius:99px;margin-top:8px;padding:7px 20px;font-size:17px;font-weight:900;animation:.45s cubic-bezier(.2,1.5,.4,1) .18s both label-in;position:relative}.callout:not([class*=callout-]) .callout-label{--c:#ff5a4a;--c2:#9e1a12}@keyframes callout-life{0%,82%{opacity:1}to{opacity:0;transform:translate(-50%,-58%)}}@keyframes rays{0%{opacity:0;transform:scale(.2)rotate(0)}15%{opacity:1}to{opacity:0;transform:scale(1.15)rotate(70deg)}}@keyframes ring{0%{opacity:1;transform:scale(.2)}to{opacity:0;transform:scale(3.2)}}@keyframes spark{0%{transform:rotate(var(--a)) translateY(-10px) scaleY(.4);opacity:1}70%{opacity:1}to{transform:rotate(var(--a)) translateY(calc(var(--d) * -1)) scaleY(1);opacity:0}}@keyframes han-in{0%{opacity:0;filter:blur(8px);transform:scale(3)rotate(-12deg)}60%{opacity:1;filter:blur()}to{opacity:1;transform:scale(1)rotate(0)}}@keyframes han-glow{0%{filter:drop-shadow(0 0 10px #ffc83cb3)}to{filter:drop-shadow(0 0 28px #ff8c1e)}}@keyframes label-in{0%{opacity:0;transform:translateY(14px)scale(.6)}}.confetti{pointer-events:none;z-index:25;position:fixed;inset:0;overflow:hidden}.confetti i{border-radius:2px;animation-name:confetti-fall;animation-timing-function:cubic-bezier(.3,.4,.6,1);animation-fill-mode:both;position:absolute;top:-20px}@keyframes confetti-fall{0%{opacity:1;transform:translate(0)rotate(0)}85%{opacity:1}to{transform:translate(var(--drift), 105vh) rotate(var(--rot));opacity:0}}@media (prefers-reduced-motion:reduce){.rays,.ring,.spark,.confetti{display:none}.callout-han,.callout-label{animation:none}}.modal-backdrop{z-index:30;background:#140f1e73;place-items:center;padding:16px;animation:.3s 2.4s both fade;display:grid;position:fixed;inset:0}@keyframes fade{0%{opacity:0}to{opacity:1}}.modal{text-align:center;background:#fffaf0;border-top:8px solid #2f3f73;border-radius:20px;width:100%;max-width:440px;padding:22px 18px 18px;box-shadow:0 24px 50px #00000059}.modal-win{border-top-color:var(--red)}.modal h2{margin:0;font-size:26px}.modal-sub{opacity:.7;margin:4px 0 14px;font-weight:700}.win-hand{flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:14px;display:flex}.meld{gap:1px;display:flex}.win-hand .tile{--tw:min(26px, calc((100vw - 90px) / 15))}.score-table{border-collapse:collapse;width:100%;margin-bottom:16px;font-weight:700}.score-table td{text-align:left;border-bottom:1px solid #eadfcb;padding:7px 10px}.score-table td:last-child{text-align:right}.winner-row{color:var(--red)}.modal-actions{justify-content:center;gap:10px;display:flex}.join-row{gap:8px;margin-top:12px;display:flex}.join-row .menu-input{margin:0}.code-input{text-transform:uppercase;letter-spacing:6px;text-align:center;font-weight:900}.menu-error{color:#ffb4a8;margin:10px 0 0;font-size:14px;font-weight:700}.menu-divider{opacity:.6;align-items:center;gap:10px;margin:18px 0 12px;font-size:12px;display:flex}.menu-divider:before,.menu-divider:after{content:"";opacity:.4;background:currentColor;flex:1;height:1px}.action-btn:disabled{opacity:.6;cursor:default}.lobby-label{opacity:.7;margin:0;font-size:13px;font-weight:700}.room-code{letter-spacing:12px;color:#ffd98a;margin:2px 0 12px 12px;font-size:52px;font-weight:900}.share-row{flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:18px;display:flex}.share-row .action-btn{min-height:40px;padding:6px 14px;font-size:14px}.action-wa{background:linear-gradient(#2fbf62,#1d8a45);box-shadow:0 4px #136032}.seat-list{text-align:left;gap:8px;margin:0 0 16px;padding:0;list-style:none;display:grid}.seat-row{background:#ffffff14;border:1.5px solid #ffffff1a;border-radius:12px;align-items:center;gap:8px;padding:10px 12px;display:flex}.seat-you{border-color:#ffc23d}.seat-empty{opacity:.55;border-style:dashed;font-size:14px}.seat-no{background:#ffffff26;border-radius:50%;place-items:center;width:24px;height:24px;font-size:12px;font-weight:900;display:grid}.tag{background:#ffffff26;border-radius:99px;padding:2px 8px;font-size:11px;font-weight:800}.tag-host{color:#5a2a00;background:#f2b632}.tag-off{background:#6b6b6b}.lobby-hint{opacity:.7;margin:12px 0 0;font-size:13px}.link-btn{color:inherit;opacity:.7;cursor:pointer;background:0 0;border:none;margin-top:14px;text-decoration:underline}.conn-banner{z-index:50;color:#fff;text-align:center;background:#b81d14;padding:6px;font-size:13px;font-weight:800;position:fixed;top:0;left:0;right:0}.badge-offline{opacity:.75;filter:grayscale(.6)}.badge-timer{color:#3a2400;background:#ffc23d;border-radius:99px;padding:0 6px;font-weight:900}.avatar svg{color:#fff}.timer{text-align:center;background:#ffffff1f;border-radius:99px;max-width:360px;height:18px;margin:6px auto 0;font-size:11px;font-weight:900;line-height:18px;position:relative;overflow:hidden}.timer-fill{background:linear-gradient(90deg,#f2b632,#ffd98a);transition:width .25s linear;position:absolute;inset:0 auto 0 0}.timer span{color:#2a1a00;position:relative}.timer-urgent .timer-fill{background:linear-gradient(90deg,#e53a2c,#ff7a5c)}