:root{--color-paper: oklch(97% .012 95);--color-paper-2: oklch(94% .016 95);--color-paper-3: oklch(90% .024 95);--color-ink: oklch(20% .012 250);--color-ink-soft: oklch(36% .014 215);--color-muted: oklch(46% .018 120);--color-rule: oklch(79% .025 95);--color-accent: oklch(86% .18 95);--color-accent-deep: oklch(68% .16 92);--color-accent-ink: oklch(20% .012 250);--color-accent-2: oklch(66% .14 215);--color-accent-2-soft: oklch(91% .045 215);--color-accent-2-deep: oklch(49% .12 215);--color-accent-3: oklch(64% .19 25);--color-accent-3-soft: oklch(92% .04 25);--color-mint: oklch(78% .11 155);--color-success: oklch(46% .11 155);--color-focus: oklch(52% .14 235);--color-table: oklch(39% .075 166);--color-table-deep: oklch(29% .065 166);--color-table-line: oklch(58% .07 166);--color-table-ink: oklch(95% .018 95);--color-tile: oklch(98% .014 95);--color-tile-side: oklch(82% .045 102);--color-tile-red: oklch(50% .18 25);--color-tile-green: oklch(42% .1 156);--color-tile-blue: oklch(41% .11 235);--color-overlay: oklch(14% .02 166 / .22);--color-backdrop: oklch(14% .02 166 / .58);--color-shadow: oklch(20% .03 90 / .14);--color-shadow-strong: oklch(18% .04 166 / .28);--color-accent-cast: oklch(76% .16 95 / .38);--color-cyan-cast: oklch(55% .12 215 / .22);--color-coral-cast: oklch(55% .14 25 / .2);--font-display: "Plus Jakarta Sans", "PingFang TC", sans-serif;--font-body: "Plus Jakarta Sans", "PingFang TC", sans-serif;--font-mono: "JetBrains Mono", monospace;--text-xs: .72rem;--text-sm: .82rem;--text-base: 1rem;--text-md: 1.2rem;--text-lg: 1.5rem;--text-xl: 1.9rem;--text-display: clamp(2.8rem, 7vw, 5.25rem);--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.5rem;--space-6: 2rem;--space-7: 3rem;--space-8: clamp(3.5rem, 8vw, 7rem);--page-gutter: clamp(1rem, 3vw, 2.5rem);--page-max: 78rem;--radius-sm: .5rem;--radius-input: .75rem;--radius-card: 1.25rem;--radius-pill: 999px;--ease-snap: cubic-bezier(.16, 1, .3, 1);--ease-press: cubic-bezier(.2, .7, .3, 1);--ease-standard: cubic-bezier(.65, 0, .35, 1);--dur-fast: .14s;--dur-base: .24s;--dur-slow: .6s;--rule-thin: 1px;--masthead-height: 4.25rem;--z-table: 1;--z-seat: 3;--z-dock: 10;--z-toast: 20;--z-overlay: 30}*{box-sizing:border-box}html,body{min-width:0;min-height:100%;overflow-x:clip}html{background:var(--color-paper)}body{margin:0;color:var(--color-ink);background:var(--color-paper);font-family:var(--font-body);font-size:var(--text-base);line-height:1.55;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}button,input{font:inherit}button{color:inherit}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}h1,h2,h3,p{margin:0}h1,h2,h3{min-width:0;overflow-wrap:anywhere;font-family:var(--font-display);font-style:normal}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.app{min-height:100dvh}.masthead{min-height:var(--masthead-height);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) var(--page-gutter);border-bottom:var(--rule-thin) solid var(--color-rule);background:var(--color-paper)}.wordmark{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1);border:0;background:transparent;font-weight:700;letter-spacing:-.04em;cursor:pointer;white-space:nowrap}.wordmark__mark{display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;color:var(--color-accent-ink);background:var(--color-accent);box-shadow:inset 0 0 0 var(--rule-thin) var(--color-accent-deep);animation:mark-breathe 4s var(--ease-standard) infinite}.wordmark small{margin-inline-start:var(--space-1);color:var(--color-muted);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;letter-spacing:.06em}.masthead__meta{display:flex;align-items:center;gap:var(--space-3)}.edition,.room-pill{color:var(--color-muted);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.04em;white-space:nowrap}.room-pill{padding:var(--space-2) var(--space-3);border-radius:var(--radius-pill);background:var(--color-paper-2)}.icon-button{display:inline-flex;align-items:center;gap:var(--space-2);min-height:2.5rem;padding:var(--space-2) var(--space-3);border:var(--rule-thin) solid var(--color-rule);border-radius:var(--radius-pill);background:var(--color-paper);cursor:pointer;white-space:nowrap;transition:background-color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-snap)}.icon-button:hover{background:var(--color-paper-2);transform:translateY(-1px)}.welcome{width:min(100%,var(--page-max));min-height:calc(100dvh - var(--masthead-height));margin-inline:auto;display:grid;grid-template-columns:minmax(0,1.18fr) minmax(20rem,.82fr);align-items:center;gap:clamp(2rem,7vw,8rem);padding:clamp(2rem,6vw,5.5rem) var(--page-gutter) clamp(4rem,9vw,8rem)}.welcome__copy{display:grid;align-content:center;gap:var(--space-5);animation:reveal-up var(--dur-slow) var(--ease-snap) both}.kicker{color:var(--color-accent-2-deep);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;letter-spacing:.09em;text-transform:uppercase}.welcome h1{max-width:10ch;font-size:var(--text-display);font-weight:600;line-height:1.06;letter-spacing:-.05em}.welcome__lede{max-width:34rem;color:var(--color-ink-soft);font-size:clamp(1rem,1.4vw,1.2rem)}.house-rules{display:flex;flex-wrap:wrap;gap:var(--space-2)}.house-rules span{padding:var(--space-2) var(--space-3);border:var(--rule-thin) solid var(--color-rule);border-radius:var(--radius-pill);color:var(--color-muted);font-size:var(--text-sm)}.entry-panel{display:grid;gap:var(--space-4);padding:clamp(1.25rem,3vw,2rem);border:var(--rule-thin) solid var(--color-rule);border-radius:var(--radius-card);background:var(--color-paper-2);box-shadow:0 1.25rem 3.5rem -2rem var(--color-shadow);animation:reveal-up var(--dur-slow) var(--ease-snap) .1s both}.field{display:grid;gap:var(--space-2)}.field label{font-size:var(--text-sm);font-weight:600}.field input{width:100%;min-height:3rem;padding:0 var(--space-4);border:var(--rule-thin) solid var(--color-rule);border-radius:var(--radius-input);outline:2px solid transparent;background:var(--color-paper);color:var(--color-ink);transition:background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)}.field input:hover{border-color:var(--color-muted)}.field input:focus-visible{border-color:var(--color-focus);background:var(--color-tile)}.field input[aria-invalid=true]{border-color:var(--color-accent-3)}.field input:disabled{opacity:.55;cursor:not-allowed;background:var(--color-paper-3)}.field__helper{min-height:1lh;color:var(--color-muted);font-size:var(--text-xs)}.code-input{font-family:var(--font-mono);font-size:var(--text-md);letter-spacing:.12em;text-transform:uppercase}.join-divider{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--space-3);color:var(--color-muted);font-size:var(--text-xs)}.join-divider:before,.join-divider:after{content:"";height:var(--rule-thin);background:var(--color-rule)}.join-form{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-3)}.join-form .btn{min-height:3rem;margin-top:var(--space-1)}.create-settings{display:grid;gap:var(--space-4);padding-block:var(--space-4);border-block:var(--rule-thin) solid var(--color-rule)}.setting-group{display:grid;gap:var(--space-3)}.setting-label,.field--compact label{display:inline-flex;align-items:center;gap:var(--space-2)}.segmented-control{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-1);padding:var(--space-1);border-radius:var(--radius-input);background:var(--color-paper-3)}.segmented-control button{min-height:2.5rem;border:0;border-radius:calc(var(--radius-input) - var(--space-1));background:transparent;color:var(--color-ink-soft);cursor:pointer;white-space:nowrap}.segmented-control button:hover{background:var(--color-paper-2)}.segmented-control button:focus-visible{outline:2px solid var(--color-focus);outline-offset:1px}.segmented-control button:active,.segmented-control button.is-selected{color:var(--color-ink);background:var(--color-paper);box-shadow:0 var(--space-1) var(--space-3) calc(var(--space-1) * -1) var(--color-shadow)}.segmented-control button:disabled,.table-icon-button:disabled{opacity:.55;cursor:not-allowed;pointer-events:none}.money-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}.field--compact{gap:var(--space-2)}.field--compact input{min-height:2.75rem}.form-error{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3);border-radius:var(--radius-input);color:var(--color-tile-red);background:var(--color-accent-3-soft);font-size:var(--text-sm)}.btn{--btn-face: var(--color-accent);--btn-ink: var(--color-accent-ink);--btn-edge: var(--color-accent-deep);--btn-cast: var(--color-accent-cast);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:2.75rem;padding:.72rem 1.25rem;border:0;border-radius:var(--radius-pill);background:var(--btn-face);color:var(--btn-ink);font-weight:600;cursor:pointer;position:relative;isolation:isolate;white-space:nowrap;box-shadow:0 4px 0 0 var(--btn-edge),0 6px 12px -3px var(--btn-cast);transform:translateY(0);transition:transform var(--dur-fast) var(--ease-press),box-shadow var(--dur-fast) var(--ease-press),background-color var(--dur-fast) var(--ease-standard)}.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 0 0 var(--btn-edge),0 12px 22px -4px var(--btn-cast)}.btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 0 var(--btn-edge),0 2px 6px -2px var(--btn-cast);transition-duration:70ms}.btn:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}.btn:disabled{opacity:.55;cursor:not-allowed;pointer-events:none;transform:none;box-shadow:0 4px 0 0 var(--btn-edge)}.btn--lg{min-height:3.25rem;padding-inline:1.6rem}.btn--soft{box-shadow:0 8px 20px -12px var(--btn-cast)}.btn--soft:hover:not(:disabled){box-shadow:0 12px 24px -12px var(--btn-cast)}.btn--outline{border:var(--rule-thin) solid var(--btn-edge);background:var(--color-paper);box-shadow:none}.btn--outline:hover:not(:disabled){background:var(--btn-face);box-shadow:none}.btn--cyan{--btn-face: var(--color-accent-2-soft);--btn-edge: var(--color-accent-2-deep);--btn-cast: var(--color-cyan-cast)}.btn--coral{--btn-face: var(--color-accent-3-soft);--btn-edge: var(--color-accent-3);--btn-cast: var(--color-coral-cast)}.room-shell{width:min(100%,60rem);min-height:calc(100dvh - var(--masthead-height));margin-inline:auto;display:grid;align-content:center;gap:var(--space-6);padding:var(--space-7) var(--page-gutter) var(--space-8)}.room-head{display:grid;justify-items:start;gap:var(--space-3)}.room-head h1{font-size:clamp(2.2rem,6vw,4.25rem);line-height:1.05;letter-spacing:-.045em}.room-head>p:last-of-type{max-width:36rem;color:var(--color-ink-soft)}.room-summary{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-5);color:var(--color-ink-soft)}.room-summary span{display:inline-flex;align-items:center;gap:var(--space-2);white-space:nowrap}.room-code{display:inline-flex;align-items:center;gap:var(--space-3);margin-top:var(--space-3);padding:var(--space-3) var(--space-4);border:var(--rule-thin) solid var(--color-accent-deep);border-radius:var(--radius-input);background:var(--color-accent);cursor:pointer}.room-code span:first-child{font-family:var(--font-mono);font-size:var(--text-lg);font-weight:500;letter-spacing:.14em}.seat-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:var(--rule-thin) solid var(--color-rule)}.lobby-seat{min-height:6rem;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-4);padding:var(--space-4);border-bottom:var(--rule-thin) solid var(--color-rule);color:var(--color-muted)}.lobby-seat:nth-child(odd){border-right:var(--rule-thin) solid var(--color-rule)}.lobby-seat.is-filled{color:var(--color-ink);background:var(--color-paper-2)}.lobby-seat__wind{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--color-paper-3);font-weight:700}.lobby-seat div{min-width:0;display:grid}.lobby-seat strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lobby-seat small{color:var(--color-muted)}.room-actions{display:flex;justify-content:flex-end}.waiting-note{color:var(--color-muted)}.game-shell{height:calc(100dvh - var(--masthead-height));min-height:calc(100dvh - var(--masthead-height));display:grid;grid-template-rows:minmax(0,1fr) auto;background:var(--color-paper-2)}.table-wrap{min-height:0;display:grid;place-items:center;padding:clamp(.75rem,2vw,1.5rem)}.mahjong-table{position:relative;width:min(100%,48rem,calc((100dvh - var(--masthead-height) - 21rem) * 1.32));min-width:34rem;aspect-ratio:1.32;overflow:hidden;border:.35rem solid var(--color-table-deep);border-radius:var(--radius-card);color:var(--color-table-ink);background:var(--color-table);box-shadow:inset 0 0 0 var(--rule-thin) var(--color-table-line),0 2rem 4rem -2rem var(--color-shadow-strong);isolation:isolate}.mahjong-table:before{content:"";position:absolute;inset:0;z-index:var(--z-table);opacity:.28;background-image:linear-gradient(90deg,transparent 49.8%,var(--color-table-line) 50%,transparent 50.2%),linear-gradient(0deg,transparent 49.8%,var(--color-table-line) 50%,transparent 50.2%);pointer-events:none}.seat{position:absolute;z-index:var(--z-seat);display:flex;align-items:center;gap:var(--space-2);max-width:12rem;padding:var(--space-2) var(--space-3);border:var(--rule-thin) solid transparent;border-radius:var(--radius-pill);color:var(--color-table-ink);background:var(--color-overlay);transition:background-color var(--dur-base) var(--ease-snap),border-color var(--dur-base) var(--ease-snap),transform var(--dur-base) var(--ease-snap)}.seat.is-active{border-color:var(--color-accent);background:var(--color-table-deep);transform:translateY(-2px)}.seat--top{top:var(--space-3);left:50%;transform:translate(-50%)}.seat--top.is-active{transform:translate(-50%) translateY(-2px)}.seat--bottom{bottom:var(--space-3);left:50%;transform:translate(-50%)}.seat--bottom.is-active{transform:translate(-50%) translateY(-2px)}.seat--left{left:var(--space-3);top:50%;transform:translateY(-50%)}.seat--left.is-active{transform:translateY(calc(-50% - 2px))}.seat--right{right:var(--space-3);top:50%;transform:translateY(-50%)}.seat--right.is-active{transform:translateY(calc(-50% - 2px))}.seat__avatar{flex:0 0 auto;display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;color:var(--color-accent-ink);background:var(--color-paper-3)}.seat__identity{min-width:0;display:grid;line-height:1.25}.seat__identity strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm)}.seat__identity small{color:var(--color-table-ink);font-size:var(--text-xs);white-space:nowrap}.seat__dealer{display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;color:var(--color-accent-ink);background:var(--color-accent);font-size:var(--text-xs);font-weight:700}.seat__ready{display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;color:var(--color-accent-ink);background:var(--color-accent-2);font-size:var(--text-xs);font-weight:700}.seat__presence{width:.48rem;height:.48rem;border-radius:50%;background:var(--color-muted)}.seat__presence.is-online{background:var(--color-mint)}.table-center{position:absolute;z-index:var(--z-seat);inset:50% auto auto 50%;display:grid;justify-items:center;gap:var(--space-2);transform:translate(-50%,-50%)}.round-marker{width:clamp(3.5rem,8vw,5rem);aspect-ratio:1;display:grid;place-items:center;align-content:center;border:var(--rule-thin) solid var(--color-table-line);border-radius:var(--radius-sm);background:var(--color-table-deep);box-shadow:0 .7rem 1.5rem -.8rem var(--color-shadow-strong)}.round-marker span{font-size:clamp(1.3rem,3vw,2rem);font-weight:700;line-height:1}.round-marker small{font-size:var(--text-xs)}.wall-count{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-2);border-radius:var(--radius-pill);background:var(--color-overlay);font-family:var(--font-mono);font-size:var(--text-xs)}.discard-field{position:absolute;z-index:var(--z-seat);inset:19%;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-content:start;justify-items:center;gap:clamp(.15rem,.5vw,.35rem);padding:var(--space-2)}.meld-rack{position:absolute;z-index:var(--z-seat);display:flex;gap:.12rem;pointer-events:none}.meld-rack--top{top:4.5rem;left:50%;transform:translate(-50%)}.meld-rack--bottom{bottom:4.5rem;left:50%;transform:translate(-50%)}.meld-rack--left{left:var(--space-3);bottom:var(--space-3)}.meld-rack--right{right:var(--space-3);bottom:var(--space-3)}.hand-dock{position:relative;z-index:var(--z-dock);display:grid;justify-items:center;gap:var(--space-3);padding:var(--space-3) var(--page-gutter) var(--space-2);border-top:var(--rule-thin) solid var(--color-rule);background:var(--color-paper);box-shadow:0 -1rem 2.5rem -2rem var(--color-shadow)}.turn-message{min-height:1.75rem;display:flex;align-items:center;justify-content:center;gap:var(--space-2);color:var(--color-ink-soft);font-size:var(--text-sm);text-align:center}.hand-row{width:min(100%,56rem);display:grid;grid-template-columns:repeat(17,minmax(2rem,1fr));align-items:end;gap:clamp(.12rem,.35vw,.3rem)}.flower-row{display:flex;gap:var(--space-1)}.tile{width:100%;min-width:0;aspect-ratio:.74;display:block;padding:.1rem;border:var(--rule-thin) solid var(--color-tile-side);border-radius:clamp(.25rem,.5vw,.45rem);background:var(--color-tile);box-shadow:0 .18rem 0 0 var(--color-tile-side),0 .35rem .65rem -.4rem var(--color-shadow-strong);line-height:1;-webkit-user-select:none;user-select:none}.tile__image{display:block;width:100%;height:100%;object-fit:contain;border-radius:inherit;pointer-events:none}button.tile{cursor:pointer;touch-action:manipulation}.tile--interactive{transition:transform var(--dur-fast) var(--ease-snap),box-shadow var(--dur-fast) var(--ease-snap),border-color var(--dur-fast) var(--ease-standard)}.tile--interactive:hover,.tile--interactive.is-selected{border-color:var(--color-accent-deep);transform:translateY(-.55rem);box-shadow:0 .24rem 0 0 var(--color-accent-deep),0 .85rem 1rem -.5rem var(--color-accent-cast)}.tile--interactive:active{transform:translateY(-.2rem)}.tile--compact{width:clamp(1.3rem,3.2vw,2rem);min-width:clamp(1.3rem,3.2vw,2rem);padding:.05rem}.game-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--space-3)}.hand-hint{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-muted);font-size:var(--text-xs)}.claim-panel{position:fixed;z-index:var(--z-overlay);left:50%;bottom:var(--space-5);width:min(42rem,calc(100vw - 2rem));display:grid;gap:var(--space-3);padding:var(--space-4);border:var(--rule-thin) solid var(--color-rule);border-radius:var(--radius-card);background:var(--color-paper);box-shadow:0 1.5rem 4rem -1.5rem var(--color-shadow-strong);transform:translate(-50%);animation:claim-in var(--dur-base) var(--ease-snap) both}.claim-panel__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}.claim-panel__head>div{display:grid}.claim-panel__head small{color:var(--color-muted)}.claim-pass{min-width:3rem;min-height:2.5rem;border:var(--rule-thin) solid var(--color-rule);border-radius:var(--radius-pill);background:var(--color-paper-2);cursor:pointer}.claim-options{display:flex;gap:var(--space-2);overflow-x:auto;padding-bottom:var(--space-2)}.claim-option{flex:0 0 auto;min-height:4.5rem;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border:var(--rule-thin) solid var(--color-rule);border-radius:var(--radius-input);background:var(--color-paper-2);cursor:pointer;white-space:nowrap;transition:background-color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-snap)}.claim-option:hover{background:var(--color-accent-2-soft);transform:translateY(-2px)}.claim-option--win{border-color:var(--color-accent-3);background:var(--color-accent-3-soft)}.claim-option__name{font-size:var(--text-lg);font-weight:700}.claim-option__tiles{display:flex;gap:.1rem}.result-panel{position:fixed;z-index:var(--z-overlay);inset:50% auto auto 50%;width:min(30rem,calc(100vw - 2rem));display:grid;justify-items:center;gap:var(--space-4);padding:clamp(1.5rem,4vw,2.5rem);border:var(--rule-thin) solid var(--color-rule);border-radius:var(--radius-card);background:var(--color-paper);box-shadow:0 2rem 5rem -1.5rem var(--color-shadow-strong);transform:translate(-50%,-50%);text-align:center}.result-panel:before{content:"";position:fixed;z-index:-1;inset:-100vh -100vw;background:var(--color-backdrop)}.result-panel__icon{display:grid;place-items:center;width:4rem;height:4rem;border-radius:50%;color:var(--color-accent-ink);background:var(--color-accent)}.result-panel h2{font-size:var(--text-xl);letter-spacing:-.035em}.score-lines{width:100%;display:grid;gap:var(--space-2)}.score-lines span,.settlement{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding-bottom:var(--space-2);border-bottom:var(--rule-thin) solid var(--color-rule)}.settlement{width:100%;display:grid;justify-items:center;border:0;color:var(--color-muted)}.settlement strong{color:var(--color-ink);font-size:var(--text-md)}.result-copy{color:var(--color-ink-soft)}.rules-backdrop{position:fixed;z-index:var(--z-overlay);inset:0;display:flex;justify-content:flex-end;background:var(--color-backdrop);animation:fade-in var(--dur-base) var(--ease-standard) both}.rules-drawer{width:min(32rem,100%);height:100%;overflow-y:auto;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:var(--space-5);padding:var(--space-5);background:var(--color-paper);box-shadow:-1.5rem 0 4rem -2rem var(--color-shadow-strong);animation:drawer-in var(--dur-base) var(--ease-snap) both}.rules-drawer__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4)}.rules-drawer__head>div{display:grid;gap:var(--space-2)}.rules-drawer__head h2{font-size:var(--text-xl);letter-spacing:-.035em}.rules-list{display:grid;align-content:start}.rules-list section{display:grid;gap:var(--space-2);padding:var(--space-4) 0;border-top:var(--rule-thin) solid var(--color-rule)}.rules-list h3{font-size:var(--text-md)}.rules-list p{color:var(--color-ink-soft)}.rules-drawer__foot{display:grid;gap:var(--space-2)}.rules-drawer__foot a{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-accent-2-deep);text-decoration:none}.rules-drawer__foot a:hover{text-decoration:underline}.toast{position:fixed;z-index:var(--z-toast);left:50%;bottom:var(--space-5);max-width:calc(100vw - 2rem);padding:var(--space-3) var(--space-4);border-radius:var(--radius-pill);color:var(--color-table-ink);background:var(--color-table-deep);box-shadow:0 1rem 2.5rem -1rem var(--color-shadow-strong);transform:translate(-50%);animation:toast-in var(--dur-base) var(--ease-snap) both;white-space:nowrap}.toast--error{color:var(--color-tile-red);background:var(--color-accent-3-soft)}@keyframes reveal-up{0%{opacity:0;transform:translateY(.75rem)}to{opacity:1;transform:translateY(0)}}@keyframes mark-breathe{0%,to{transform:scale(1)}50%{transform:scale(1.04)}}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,.5rem)}to{opacity:1;transform:translate(-50%)}}@keyframes claim-in{0%{opacity:0;transform:translate(-50%,.75rem)}to{opacity:1;transform:translate(-50%)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes drawer-in{0%{opacity:0;transform:translate(1.5rem)}to{opacity:1;transform:translate(0)}}@media(max-width:48rem){.masthead{min-height:3.75rem}.edition,.wordmark small{display:none}.welcome{min-height:auto;grid-template-columns:minmax(0,1fr);align-items:start;gap:var(--space-7);padding-top:var(--space-7)}.welcome h1{font-size:clamp(2.65rem,12vw,4.25rem)}.room-shell{align-content:start}.game-shell{height:auto;min-height:calc(100dvh - 3.75rem)}.table-wrap{align-items:start}.mahjong-table{width:100%;min-width:0;min-height:21rem;aspect-ratio:1}.seat{max-width:8.5rem;padding:var(--space-1) var(--space-2)}.seat__avatar{width:1.65rem;height:1.65rem}.seat__identity small{display:none}.seat__dealer{width:1.25rem;height:1.25rem}.seat--left,.seat--right{top:23%}.discard-field{inset:27% 12% 17%}.hand-row{grid-template-columns:repeat(9,minmax(1.75rem,1fr));row-gap:.75rem}.meld-rack--left,.meld-rack--right{bottom:var(--space-2)}}@media(max-width:30rem){.masthead__meta{gap:var(--space-2)}.room-pill,.icon-button span{display:none}.join-form{grid-template-columns:minmax(0,1fr)}.join-form .btn{width:100%;margin-top:0}.seat-list{grid-template-columns:minmax(0,1fr)}.lobby-seat:nth-child(odd){border-right:0}.mahjong-table{min-height:19rem}.seat__presence{display:none}.seat--left{left:var(--space-1)}.seat--right{right:var(--space-1)}.discard-field{grid-template-columns:repeat(6,minmax(0,1fr));inset-inline:9%}.hand-dock{padding-inline:var(--space-2)}.hand-row{grid-template-columns:repeat(8,minmax(1.7rem,1fr))}.game-actions{gap:var(--space-2)}.game-actions .btn{padding-inline:1rem}.claim-panel{bottom:var(--space-2)}.rules-drawer{padding:var(--space-4)}}.app--playing{width:100%;height:100dvh;overflow:hidden;background:var(--color-table-deep)}.app--playing .game-shell{--hand-height: clamp(6.75rem, 24dvh, 12.5rem);position:relative;width:100%;height:100dvh;min-height:0;display:block;overflow:hidden;background:var(--color-table-deep)}.app--playing .mahjong-table{position:relative;width:100vw;height:100dvh;min-width:0;min-height:0;aspect-ratio:auto;overflow:hidden;border:0;border-radius:0;color:var(--color-table-ink);background:var(--color-table);box-shadow:inset 0 0 0 var(--rule-thin) var(--color-table-line)}.table-toolbar{position:absolute;z-index:var(--z-dock);inset:var(--space-3) var(--space-3) auto;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);pointer-events:none}.table-toolbar__round,.table-toolbar__actions{display:flex;align-items:center;gap:var(--space-2);pointer-events:auto}.table-toolbar__round{padding:var(--space-2) var(--space-3);border:var(--rule-thin) solid var(--color-table-line);border-radius:var(--radius-pill);background:var(--color-overlay);line-height:1.2}.table-toolbar__round strong{font-size:var(--text-xs);letter-spacing:.06em}.table-toolbar__round span{color:var(--color-table-ink);font-size:var(--text-xs)}.table-icon-button{min-height:2.5rem;display:inline-flex;align-items:center;gap:var(--space-2);padding-inline:var(--space-3);border:var(--rule-thin) solid var(--color-table-line);border-radius:var(--radius-pill);color:var(--color-table-ink);background:var(--color-overlay);cursor:pointer;line-height:1;white-space:nowrap;transition:background-color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-press)}.table-icon-button:hover{background:var(--color-table-deep);transform:translateY(-2px)}.table-icon-button:active{transform:translateY(1px)}.table-icon-button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.app--playing .seat--top{top:var(--space-4)}.app--playing .seat--bottom{bottom:calc(var(--hand-height) + var(--space-3))}.app--playing .seat--left,.app--playing .seat--right{top:42%}.app--playing .meld-rack--bottom{bottom:calc(var(--hand-height) + var(--space-3))}.app--playing .meld-rack--top{top:var(--space-7)}.app--playing .meld-rack--left,.app--playing .meld-rack--right{bottom:calc(var(--hand-height) + var(--space-3))}.app--playing .table-center{top:39%}.app--playing .discard-field{inset:17% 22% calc(var(--hand-height) + 8%);grid-template-columns:repeat(8,minmax(0,1fr));overflow:hidden}.app--playing .hand-dock{position:absolute;z-index:var(--z-dock);inset:auto 0 0;width:100%;height:var(--hand-height);display:grid;grid-template-rows:auto minmax(0,1fr) auto;justify-items:center;gap:var(--space-1);padding:var(--space-2) var(--page-gutter) var(--space-2);border-top:var(--rule-thin) solid var(--color-table-line);color:var(--color-table-ink);background:var(--color-table-deep);box-shadow:0 -1.5rem 3rem -2rem var(--color-shadow-strong)}.app--playing .turn-message{min-height:1.4rem;color:var(--color-table-ink);line-height:1.2}.app--playing .hand-row{width:min(92vw,60rem);min-height:0;grid-template-columns:repeat(17,minmax(0,1fr));align-items:end;gap:clamp(.1rem,.35vw,.3rem)}.app--playing .hand-row .tile{align-self:end;max-height:calc(var(--hand-height) - 3.75rem)}.app--playing .flower-row{position:absolute;left:var(--space-3);top:var(--space-2)}.hand-controls{width:min(92vw,60rem);min-height:2.5rem;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.app--playing .hand-hint{color:var(--color-table-ink);white-space:nowrap}.app--playing .game-actions{justify-content:flex-end;flex-wrap:nowrap;gap:var(--space-2)}.app--playing .game-actions .btn{min-height:2.25rem;padding:var(--space-2) var(--space-3);box-shadow:none}.app--playing .claim-panel{position:absolute;bottom:calc(var(--hand-height) + var(--space-3))}.portrait-lock{display:none}@media(orientation:portrait)and (max-width:64rem){.app--playing .mahjong-table{visibility:hidden}.portrait-lock{position:fixed;z-index:var(--z-overlay);inset:0;display:grid;place-content:center;justify-items:center;gap:var(--space-4);padding:var(--space-6);color:var(--color-table-ink);background:var(--color-table-deep);text-align:center}.portrait-lock h2{font-size:clamp(1.8rem,8vw,3rem)}.portrait-lock p{max-width:52ch;color:var(--color-table-ink)}}@media(orientation:landscape)and (max-height:34rem){.app--playing .game-shell{--hand-height: clamp(7.75rem, 33dvh, 9rem)}.table-toolbar{inset:var(--space-2) var(--space-2) auto}.table-toolbar__round{padding:var(--space-1) var(--space-2)}.table-icon-button{min-height:2.25rem;padding-inline:var(--space-2)}.table-icon-button span{display:none}.app--playing .seat{padding:var(--space-1) var(--space-2)}.app--playing .seat__avatar{width:1.5rem;height:1.5rem}.app--playing .seat--top{top:var(--space-2)}.app--playing .table-center{top:37%}.app--playing .discard-field{inset:18% 19% calc(var(--hand-height) + 5%)}.app--playing .turn-message{font-size:var(--text-xs)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}}