:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--color-global-bg:#212737;--color-global-text:#eaedf3;--color-muted:#b3aec9;--color-accent:#a79fe8;--color-accent-2:#eaedf3;--color-on-accent:#181c28;--color-surface:#1a1f2c;--color-surface-raised:#283044;--color-border:#b3aec947;--color-border-strong:#b3aec97a;--ivory:#f6f6fb;--ivory-shade:#e6e5f2;--jade:#3b3866;--jade-deep:#252342;--ink:#0c0c19;--cinnabar:#d13b40;--bamboo:#1f7a54;--lapis:#3559b8;--brass:var(--color-accent);--brass-deep:#8278d6;--lacquer:#c94a50;--lacquer-lit:#de5d63;--paper:var(--color-global-text);--paper-dim:var(--color-muted);--wood-dark:var(--color-surface);--wood:var(--color-surface-raised);--wood-lit:var(--color-border-strong);--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--font-display:var(--font-mono);--font-ui:var(--font-mono);--font-han:"Songti SC", "Noto Serif TC", "STSong", "SimSun", serif;--text-sm:.78125rem;--text-base:.875rem;--text-lg:1.0625rem;--text-display:clamp(2rem, 1.5rem + 2.2vw, 3rem);--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1.25rem;--space-5:1.75rem;--space-6:2.75rem;--radius-tile:4px;--radius-panel:4px;--duration-fast:.12s;--duration-normal:.2s;--ease-out-expo:cubic-bezier(.16, 1, .3, 1);--shadow-panel:0 10px 30px -10px #00000073}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--color-global-bg:#f6f6fb;--color-global-text:#0c0c19;--color-muted:#54515b;--color-accent:#554ea0;--color-accent-2:#0c0c19;--color-on-accent:#fff;--color-surface:#ecebf5;--color-surface-raised:#fff;--color-border:#54515b47;--color-border-strong:#54515b80;--ivory:#fff;--ivory-shade:#efeff7;--jade:#6760b4;--jade-deep:#484288;--ink:#0c0c19;--brass:var(--color-accent);--brass-deep:#453e8a;--shadow-panel:0 10px 28px -12px #0c0c1924}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font-ui);font-size:var(--text-base);color:var(--color-global-text);background:var(--color-global-bg);-webkit-font-smoothing:antialiased;min-width:1100px;min-height:700px;line-height:1.5;overflow:hidden}button{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.felt{background-color:var(--color-global-bg);background-image:radial-gradient(var(--color-border) 1px, transparent 1px);background-size:24px 24px;height:100%;position:relative}.felt>*{position:relative}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important}}.closed-notice{place-content:center;justify-items:center;gap:var(--space-3);text-align:center;display:grid}.closed-notice h1{font-family:var(--font-display);letter-spacing:-.02em;margin:0;font-size:1.75rem;font-weight:700}.closed-notice p{margin:0 0 var(--space-3);color:var(--color-muted)}.theme-toggle{bottom:var(--space-4);right:var(--space-4);z-index:20;border:1px solid var(--color-border-strong);border-radius:var(--radius-panel);background:var(--color-surface);width:34px;height:34px;color:var(--color-global-text);cursor:pointer;transition:border-color var(--duration-fast) ease, color var(--duration-fast) ease, background-color var(--duration-fast) ease;place-items:center;padding:0;display:inline-grid;position:fixed}.theme-toggle:hover{border-color:var(--color-accent);color:var(--color-accent)}.avatar{flex:none;justify-content:center;align-items:center;line-height:0;display:inline-flex}.avatar--sm{width:20px;height:20px}.avatar--md{width:26px;height:26px}.avatar--lg{width:76px;height:76px}.avatar-svg{width:100%;height:100%;display:block}.avatar-picker{justify-content:center;display:flex}.avatar-picker-stage{align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-panel);border:1px dashed var(--color-border-strong);background:var(--color-global-bg);grid-template-columns:auto auto auto;display:inline-grid}.avatar-picker-arrows{gap:4px;display:grid}.avatar-step{border:1px solid var(--color-border-strong);border-radius:var(--radius-panel);background:var(--color-surface);width:32px;height:32px;color:var(--color-global-text);font-family:var(--font-mono);cursor:pointer;transition:border-color var(--duration-fast) ease, color var(--duration-fast) ease;padding:0;font-size:1rem;font-weight:700;line-height:1}.avatar-step:hover{border-color:var(--color-accent);color:var(--color-accent)}.avatar-picker-preview{place-items:center;display:grid;position:relative}.avatar-dice{border:1px solid var(--color-border-strong);border-radius:var(--radius-panel);background:var(--color-surface);cursor:pointer;width:32px;height:32px;transition:border-color var(--duration-fast) ease, transform var(--duration-fast) ease;place-items:center;padding:0;font-size:.9rem;line-height:1;display:grid;position:absolute;bottom:-6px;right:-8px}.avatar-dice:hover{border-color:var(--color-accent);transform:rotate(15deg)}.home{align-items:center;gap:var(--space-6);grid-template-columns:1.1fr .9fr;max-width:1080px;margin:0 auto;padding:0 clamp(2.5rem,6vw,5rem);display:grid}.home-title{position:relative}.home-han{font-family:var(--font-han);color:var(--color-accent);opacity:.08;-webkit-user-select:none;user-select:none;pointer-events:none;margin:0;font-size:clamp(7rem,15vw,12rem);line-height:1;position:absolute;top:-.75em;left:-.08em}.home h1{font-family:var(--font-display);font-weight:700;font-size:var(--text-display);letter-spacing:-.03em;color:var(--color-accent-2);margin:0;line-height:1.1;position:relative}.home h1:after{content:"";width:3.5rem;height:2px;margin-top:var(--space-3);background:var(--color-accent);display:block}.home-tagline{max-width:38ch;margin:var(--space-4) 0 0;font-size:var(--text-base);color:var(--color-muted);line-height:1.65;position:relative}.home-tray{padding:var(--space-4) var(--space-5);border-radius:var(--radius-panel);border:1px solid var(--color-border-strong);background:var(--color-surface);box-shadow:var(--shadow-panel);gap:var(--space-3);display:grid}.field{gap:var(--space-2);display:grid}.field span{font-size:var(--text-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted);font-weight:600}.field input{border:1px solid var(--color-border-strong);border-radius:var(--radius-panel);background:var(--color-global-bg);color:var(--color-global-text);font:inherit;font-size:var(--text-base);transition:border-color var(--duration-fast) ease;padding:.65em .85em}.field input:focus{border-color:var(--color-accent)}.field input::placeholder{color:var(--color-muted);opacity:.5}.field--code input{font-family:var(--font-mono);letter-spacing:.32em;text-align:center;text-transform:uppercase;padding:.42em .6em;font-size:1.45rem;font-weight:700}.tray-row{gap:var(--space-3);grid-template-columns:1.2fr 1fr;display:grid}.tray-divider{align-items:center;gap:var(--space-3);font-size:var(--text-sm);color:var(--color-muted);display:flex}.tray-divider:before,.tray-divider:after{content:"";border-top:1px dashed var(--color-border-strong);flex:1}.join-form{align-items:end;gap:var(--space-3);grid-template-columns:1fr auto;display:grid}.home-error{border-radius:var(--radius-panel);color:var(--color-global-text);font-size:var(--text-sm);background:#ef44441f;border:1px solid #ef444473;border-left:3px solid #ef4444;margin:0;padding:.65rem .85rem}.btn{border-radius:var(--radius-panel);font-weight:600;font-size:var(--text-base);cursor:pointer;transition:background-color var(--duration-fast) ease, border-color var(--duration-fast) ease, color var(--duration-fast) ease, opacity var(--duration-fast) ease;border:1px solid #0000;justify-content:center;align-items:center;padding:.65em 1.2em;display:inline-flex}.btn:disabled{opacity:.45;cursor:not-allowed}.btn--brass{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent)}.btn--brass:hover:not(:disabled){opacity:.9}.btn--lacquer{border-color:var(--color-accent);color:var(--color-accent);background:0 0;padding:.72em 1.35em}.btn--lacquer:hover:not(:disabled){background:var(--color-accent);color:var(--color-on-accent)}.btn--ghost{border-color:var(--color-border-strong);color:var(--color-global-text);background:0 0}.btn--ghost:hover:not(:disabled){border-color:var(--color-accent);color:var(--color-accent);background:#a79fe814}.chat{z-index:5;flex-direction:column;align-items:flex-end;display:flex;position:relative}.chat-toggle{align-items:center;gap:var(--space-2);border:1px solid var(--color-border-strong);border-radius:var(--radius-panel);background:var(--color-surface);min-height:32px;font-size:var(--text-sm);cursor:pointer;transition:border-color var(--duration-fast) ease, color var(--duration-fast) ease;padding:.4em .9em;font-weight:600;display:inline-flex}.chat-toggle:hover{border-color:var(--color-accent);color:var(--color-accent)}.chat-badge{border-radius:var(--radius-panel);background:var(--color-accent);min-width:1.4em;color:var(--color-on-accent);font-size:var(--text-sm);text-align:center;padding:0 .35em;font-weight:700}.chat-panel{width:300px;margin-top:var(--space-2);border-radius:var(--radius-panel);border:1px solid var(--color-border-strong);background:var(--color-surface);box-shadow:var(--shadow-panel);overflow:hidden}.chat-log{height:200px;padding:var(--space-3);align-content:start;gap:var(--space-2);font-size:var(--text-sm);margin:0;list-style:none;display:grid;overflow-y:auto}.chat-line{align-items:flex-start;gap:var(--space-2);display:flex}.chat-line b{color:var(--color-accent);font-weight:600}.chat-line--me b{color:var(--color-global-text)}.chat-empty{color:var(--color-muted)}.chat-form input{border:0;border-top:1px solid var(--color-border);background:var(--color-global-bg);width:100%;color:var(--color-global-text);font:inherit;font-size:var(--text-sm);padding:.7em .9em}.lobby{grid-template-rows:auto 1fr auto;justify-items:center;display:grid}.lobby-bar{padding:var(--space-4) var(--space-5);justify-content:space-between;justify-self:stretch;align-items:flex-start;display:flex}.lobby-table{aspect-ratio:1;border:1px solid var(--color-border-strong);background:var(--color-surface);width:min(540px,60vh);box-shadow:var(--shadow-panel);border-radius:8px;align-self:center;position:relative}.lobby-table:before{content:"";border:1px dashed var(--color-border);border-radius:var(--radius-panel);pointer-events:none;position:absolute;inset:20%}.lobby-hub{place-content:center;justify-items:center;gap:var(--space-2);text-align:center;display:grid;position:absolute;inset:22% 18%}.lobby-share{gap:var(--space-2);flex-wrap:wrap;justify-content:center;display:flex}.lobby-label{font-size:var(--text-sm);letter-spacing:.12em;text-transform:uppercase;color:var(--color-muted);margin:0;font-weight:600}.lobby-code{font-family:var(--font-mono);letter-spacing:.16em;color:var(--color-accent);margin:0;padding-left:.16em;font-size:clamp(2.1rem,4.8vh,3rem);font-weight:700;line-height:1.1}.lobby-seat{justify-content:center;align-items:center;gap:var(--space-2);border-radius:var(--radius-panel);text-align:left;background:var(--color-global-bg);border:1px solid var(--color-border-strong);min-width:120px;padding:.45em .85em;display:inline-flex;position:absolute}.lobby-seat-meta{gap:1px;display:grid}.lobby-seat--empty{text-align:center}.lobby-seat--top{top:4%;left:50%;transform:translate(-50%)}.lobby-seat--bottom{bottom:4%;left:50%;transform:translate(-50%)}.lobby-seat--left{top:50%;left:3%;transform:translateY(-50%)}.lobby-seat--right{top:50%;right:3%;transform:translateY(-50%)}.lobby-seat-name{color:var(--color-global-text);font-weight:600}.lobby-seat-role{font-size:var(--text-sm);color:var(--color-muted)}.lobby-seat--empty{border:1px dashed var(--color-border-strong);background:0 0}.lobby-seat--empty .lobby-seat-name{color:var(--color-muted);font-weight:400}.lobby-foot{justify-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5) var(--space-5);color:var(--color-muted);display:grid}.lobby-foot p{font-size:var(--text-sm);margin:0}.tile{--tw:40px;--th:56px;width:var(--tw);height:var(--th);border-radius:var(--radius-tile);box-shadow:0 calc(var(--tw) * .08) 0 var(--jade-deep), 0 calc(var(--tw) * .12) calc(var(--tw) * .16) #00000059;transition:transform var(--duration-fast) var(--ease-out-expo), box-shadow var(--duration-fast) ease, filter var(--duration-fast) linear;border:1px solid #0c0c1938;flex:none;padding:0;display:inline-block;position:relative}.tile--lg{--tw:52px;--th:72px}.tile--md{--tw:44px;--th:62px}.tile--sm{--tw:38px;--th:54px}.tile--xs{--tw:22px;--th:30px}.tile--sideways{width:var(--th);height:var(--tw)}.tile--face{background:linear-gradient(170deg, var(--ivory) 0%, var(--ivory-shade) 100%);cursor:default}.tile--back{background:linear-gradient(160deg, var(--jade) 0%, var(--jade-deep) 100%);border-color:#a79fe84d}.tile-back-mark{border:1px dashed #ffffff40;border-radius:2px;position:absolute;inset:18%}.tile-face{width:100%;height:100%;padding:6%;display:block}.tile--interactive{cursor:pointer}.tile--interactive:hover{transform:translateY(-7px)}.tile--selected,.tile--selected.tile--interactive:hover{box-shadow:0 0 0 2px var(--color-accent), 0 calc(var(--tw) * .08) 0 var(--jade-deep), 0 18px 16px -8px #00000073;transform:translateY(-16px)}.tile--highlight{box-shadow:0 0 0 2px var(--color-accent), 0 0 14px 2px #a79fe88c, 0 calc(var(--tw) * .08) 0 var(--jade-deep)}.tile:disabled{filter:saturate(.65)brightness(.92)}[data-tip]{position:relative}[data-tip]:hover:after,[data-tip]:focus-visible:after{content:attr(data-tip);border-radius:var(--radius-panel);border:1px solid var(--color-border-strong);background:var(--color-surface);color:var(--color-global-text);font-family:var(--font-mono);white-space:nowrap;box-shadow:var(--shadow-panel);pointer-events:none;z-index:30;padding:.28rem .55rem;font-size:.72rem;font-weight:600;line-height:1.2;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.table{grid-template:"corner top chat""left center right"minmax(0,1fr)"me me me"/220px 1fr 220px;height:100%;display:grid}.table-corner{align-items:flex-start;gap:var(--space-3);padding:var(--space-4);grid-area:corner;display:flex}.table-chat{padding:var(--space-4);z-index:6;grid-area:chat;justify-content:flex-end;display:flex}.code-chip{border-radius:var(--radius-panel);border:1px solid var(--color-border-strong);min-height:32px;font-family:var(--font-mono);font-weight:700;font-size:var(--text-sm);letter-spacing:.16em;background:var(--color-surface);color:var(--color-accent);align-items:center;padding:.25em .75em;display:inline-flex}.btn--small{font-size:var(--text-sm);min-height:32px;padding:.4em .85em}.seat-plate{align-items:center;gap:var(--space-2);border-radius:var(--radius-panel);border:1px solid var(--color-border-strong);background:var(--color-surface);font-weight:600;font-size:var(--text-sm);white-space:nowrap;padding:.3em .85em .3em .35em;display:inline-flex;position:relative}.seat-plate--turn{border-color:var(--color-accent);box-shadow:0 0 0 1px var(--color-accent), 0 0 16px #a79fe847}.seat-plate-tag{font-size:var(--text-sm);color:var(--color-muted);font-weight:400}.wind-badge{width:1.8em;height:1.8em;font-family:var(--font-han);background:var(--color-surface-raised);border:1px solid var(--color-border);color:var(--color-global-text);border-radius:3px;place-items:center;display:grid}.wind-badge--dealer{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent)}.opponent{gap:var(--space-2);padding:var(--space-2) var(--space-3);align-content:start;justify-items:center;display:grid}.opponent--top{padding-top:var(--space-3);grid-area:top}.opponent--left{grid-area:left;grid-template-columns:auto 1fr;align-content:center;justify-items:start}.opponent--right{grid-area:right;grid-template-columns:1fr auto;align-content:center;justify-items:end}.opponent--left .seat-plate,.opponent--right .seat-plate{grid-row:1}.opponent--left .opponent-hand{grid-area:2/1}.opponent--right .opponent-hand,.opponent--left .opponent-extras{grid-area:2/2}.opponent--right .opponent-extras{grid-area:2/1}.opponent-hand{gap:2px;display:flex}.opponent--left .opponent-hand,.opponent--right .opponent-hand{flex-direction:column}.opponent-extras{gap:var(--space-2);align-content:start;display:grid}.meld-row,.flower-row,.discard-pool{margin:0;padding:0;list-style:none}.meld-row{gap:var(--space-2) var(--space-3);flex-wrap:wrap;display:flex}.meld{flex-direction:column;gap:5px;display:inline-flex}.meld-tiles{gap:2px;display:inline-flex}.meld--pong .hand-group-tag,.meld--kong .hand-group-tag{border-top-color:var(--color-accent);color:var(--color-accent)}.meld--chow .hand-group-tag{color:#4ec994;border-top-color:#4ec994}:root[data-theme=light] .meld--chow .hand-group-tag{color:#1b734e;border-top-color:#1b734e}.flower-row{flex-wrap:wrap;gap:2px;display:flex}.table-center{gap:var(--space-3);padding:var(--space-3);grid-template:".ptop."1fr"pleft hub pright"".pbottom."1fr/1fr auto 1fr;grid-area:center;min-height:0;display:grid}.pool--top{grid-area:ptop;align-self:end}.pool--bottom{grid-area:pbottom;align-self:start}.pool--left{grid-area:pleft;place-self:center end}.pool--right{grid-area:pright;place-self:center start}.hub{grid-area:hub}.discard-pool{grid-template-columns:repeat(7,auto);gap:5px 4px;display:grid}.hub{justify-items:center;gap:var(--space-2);min-width:196px;padding:var(--space-3) var(--space-4);border-radius:var(--radius-panel);border:1px dashed var(--color-border-strong);background:var(--color-surface);text-align:center;display:grid}.hub p{margin:0}.hub-wall{color:var(--color-muted);font-size:var(--text-sm)}.hub-wall b{font-family:var(--font-mono);color:var(--color-accent);margin-right:.2em;font-size:1.35rem}.hub-turn{font-family:var(--font-mono);font-size:var(--text-base);color:var(--color-global-text);font-weight:700}.hub-last{justify-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-muted);display:grid}.table-me{align-content:end;justify-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4) var(--space-3);background:var(--color-surface);border-top:1px solid var(--color-border-strong);grid-area:me;display:grid}.me-top{justify-self:stretch;align-items:center;gap:var(--space-4);min-height:36px;display:flex}.my-hand{align-items:flex-start;gap:14px;padding-top:14px;padding-bottom:2px;display:flex}.hand-group{flex-direction:column;align-items:stretch;gap:6px;display:flex}.hand-group-tiles{gap:3px;margin:0;padding:0;list-style:none;display:flex}.hand-group--loose .hand-group-tiles{gap:5px}.hand-group-tag{border-top:2px solid var(--color-border-strong);font-family:var(--font-mono);letter-spacing:.08em;text-align:center;color:var(--color-muted);padding-top:3px;font-size:.68rem;font-weight:700;display:block}.hand-group--pong .hand-group-tag{border-top-color:var(--color-accent);color:var(--color-accent)}.hand-group--chow .hand-group-tag{color:#4ec994;border-top-color:#4ec994}:root[data-theme=light] .hand-group--chow .hand-group-tag{color:#1b734e;border-top-color:#1b734e}.hand-group--pair .hand-group-tag{border-top-style:dashed;border-top-color:var(--color-border-strong);color:var(--color-muted)}.action-bar{align-items:center;gap:var(--space-3);min-height:36px;display:flex}.action-hint{color:var(--color-muted);font-size:var(--text-sm);margin:0}.action-hint b{color:var(--color-global-text);font-weight:600}.claim-timer{border-radius:var(--radius-panel);border:1px solid var(--color-accent);font-variant-numeric:tabular-nums;min-width:2.5em;font-size:var(--text-sm);text-align:center;color:var(--color-accent);background:#a79fe81f;padding:.2em .55em;font-weight:600}.act{border:1px solid var(--color-border-strong);border-radius:var(--radius-panel);font-weight:600;font-size:var(--text-sm);cursor:pointer;background:var(--color-surface-raised);color:var(--color-global-text);transition:background-color var(--duration-fast) ease, border-color var(--duration-fast) ease, color var(--duration-fast) ease;padding:.5em 1.15em}.act:hover{border-color:var(--color-accent)}.act--claim{background:var(--color-surface-raised);border-color:var(--color-accent);color:var(--color-accent)}.act--claim:hover{background:var(--color-accent);color:var(--color-on-accent)}.act--win,.act--discard{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent)}.act--pass{border-color:var(--color-border-strong);color:var(--color-muted);background:0 0}.act--pass:hover{color:var(--color-global-text)}.act--chow{align-items:center;gap:var(--space-2);display:inline-flex}.chow-preview{gap:1px;display:inline-flex}.action-bar--claim{animation:claim-in var(--duration-normal) var(--ease-out-expo)}@keyframes claim-in{0%{opacity:0;transform:translateY(8px)}}.toast{top:var(--space-4);border-radius:var(--radius-panel);background:var(--color-surface);color:var(--color-global-text);font-size:var(--text-sm);z-index:8;border:1px solid #ef444473;border-left:3px solid #ef4444;margin:0;padding:.55em 1rem;position:absolute;left:50%;transform:translate(-50%)}.result-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:10;background:#0c0c19b8;place-items:center;display:grid;position:absolute;inset:0}.result{width:min(920px,94vw);padding:var(--space-5);border-radius:var(--radius-panel);border:1px solid var(--color-border-strong);background:var(--color-surface);box-shadow:var(--shadow-panel);animation:claim-in .26s var(--ease-out-expo)}.result-kicker{letter-spacing:.14em;text-transform:uppercase;font-size:var(--text-sm);color:var(--color-accent);margin:0;font-weight:600}.result h2{margin:var(--space-2) 0 var(--space-4);font-family:var(--font-display);letter-spacing:-.02em;font-size:1.85rem;font-weight:700}.result-hands{margin:0 0 var(--space-4);gap:var(--space-2);padding:0;list-style:none;display:grid}.result-hand{align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-panel);border:1px solid var(--color-border);background:var(--color-global-bg);grid-template-columns:110px 1fr;display:grid}.result-hand--winner{border-color:var(--color-accent);border-left:3px solid var(--color-accent);background:#a79fe81a}.result-name{font-weight:600;font-size:var(--text-sm)}.result-tiles{gap:2px var(--space-3);flex-wrap:wrap;align-items:center;display:flex}.result-tiles .meld-row{display:contents}.result-actions{align-items:center;gap:var(--space-4);flex-wrap:wrap;display:flex}.result-note{color:var(--color-muted);font-size:var(--text-sm);flex:1;margin:0}