:root{--tile-scale: 1;--tile-width: 3.25rem;--tile-height: 4.25rem;--tile-number-size: 1.65rem;--tile-label-size: .48rem;--tile-meld-extra: .7rem;--meld-padding: .35rem;--tile-padding: .15rem;--tile-radius: .45rem;--tile-border-width: 2px;--tile-band-depth: -.3rem;--tile-insertion-width: .65rem;--tile-outline-width: 4px;--tile-preview-y: .65rem;--tile-preview-x: .9rem;--tile-preview-font: .9rem;--meld-gap: .6rem;font-family:Inter,system-ui,sans-serif;color:#17211d;background:#e8eee9;font-synthesis:none}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;min-width:320px;min-height:100dvh;overscroll-behavior:none}button,input,select{font:inherit}.checkbox-setting{display:flex;grid-template-columns:none;align-items:center;gap:.75rem;padding:.75rem;border:1px solid #c5d2cb;border-radius:.6rem;background:#f1f5f2}.checkbox-setting input{flex:0 0 auto;width:1.35rem;min-height:1.35rem;margin:0;accent-color:#235f48}.checkbox-setting span{display:grid;gap:.15rem}.checkbox-setting small{color:#68766f;font-weight:400}.shell{min-height:100vh;display:grid;place-items:center;padding:1rem}.home-shell{min-height:100vh;display:grid;align-items:start;gap:1rem;padding:1rem}.home-card,.scoreboard{max-width:42rem;margin-inline:auto}.home-card h2,.scoreboard h2{margin:0 0 .5rem;color:#12372a}.open-games,.create-game,.advanced-join{margin-top:1.25rem;padding-top:1rem;border-top:1px solid #d5ddd8}.open-games ul{display:grid;gap:.55rem;margin:0;padding:0;list-style:none}.open-games li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.75rem;padding:.75rem;border:1px solid #cad7cf;border-radius:.65rem;background:#f5f8f6}.open-games li>span{display:grid;gap:.2rem;min-width:0}.open-games small{color:#637168}.open-games button{width:auto}.room-badges{display:flex;gap:.35rem}.room-badges b{width:max-content;padding:.12rem .35rem;border-radius:.25rem;color:#3b2a00;background:#ffdc70;font-size:.62rem;letter-spacing:.06em}.advanced-join summary{color:#234a3a;font-weight:700;cursor:pointer}.scoreboard{width:100%}.scoreboard-rule{margin-top:0;font-size:.8rem}.scoreboard-scroll{overflow-x:auto}.scoreboard table{width:100%;border-collapse:collapse;font-size:.85rem}.scoreboard th,.scoreboard td{padding:.55rem;border-bottom:1px solid #dce3df;text-align:right}.scoreboard th:first-child{text-align:left}.card{width:100%;max-width:30rem;padding:1.5rem;border-radius:1rem;background:#fffdf8;box-shadow:0 .5rem 2rem #12372a1f}h1{margin:0 0 .5rem;color:#12372a;font-size:clamp(2rem,10vw,3rem)}.eyebrow{margin:0 0 .25rem;color:#587166;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}label{display:grid;gap:.4rem;margin:1rem 0;font-weight:650}input{width:100%;min-height:3rem;padding:.75rem;border:1px solid #aab8b1;border-radius:.5rem;background:#fff;font-size:1rem}select{min-height:3rem;padding:.75rem;border:1px solid #aab8b1;border-radius:.5rem;background:#fff}.sandbox-banner{margin-right:.5rem;padding:.3rem .55rem;border-radius:.35rem;color:#2f2100;background:#ffd65a;font-size:.75rem;font-weight:900;letter-spacing:.12em;text-align:center}input:focus{outline:3px solid rgb(49 121 94 / 25%);border-color:#31795e}button{width:100%;min-height:3rem;padding:.75rem 1rem;border:0;border-radius:.5rem;color:#fff;background:#12372a;font-weight:700;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}button.secondary{color:#12372a;background:#dfe9e2}.divider{display:flex;align-items:center;gap:.75rem;margin:1.5rem 0 0;color:#68766f;font-size:.85rem}.divider:before,.divider:after{content:"";height:1px;flex:1;background:#d5ddd8}.players{padding:0;list-style:none}.players li{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 0;border-bottom:1px solid #e2e7e4}.online{color:#23764e}.offline,.muted{color:#68766f}.error{color:#a52f25;font-weight:600}@media(min-width:640px){.card{padding:2.25rem}}.room-code{display:inline-flex;width:auto;align-items:baseline;gap:.5rem;min-height:auto;padding:.25rem .55rem;font-size:inherit;letter-spacing:.08em}.room-code small{font-size:.65rem;font-weight:500;letter-spacing:0}.lobby-card>button+button{margin-top:.75rem}.game-shell{min-height:100dvh;display:grid;grid-template:auto auto auto minmax(12rem,1fr) auto auto / minmax(0,1fr);background:#d9e5dc;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);overflow:hidden}.game-topbar{grid-row:1;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;background:#12372a}.players-panel{grid-row:2}.game-notices{grid-row:3;min-height:0}.table-region{grid-row:4}.rack-region{grid-row:5}.game-controls{grid-row:6}.game-shell.loading{place-items:center}.connection-banner{position:fixed;z-index:50;top:max(.35rem,env(safe-area-inset-top));left:50%;transform:translate(-50%);width:auto;padding:.25rem .65rem;border-radius:999px;background:#153f30;color:#fff;font-size:.7rem;box-shadow:0 2px 8px #0003}.connection-banner.online{opacity:0;pointer-events:none;transition:opacity .6s 1.2s}.connection-banner.offline{background:#9c352c}.game-status{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.65rem .8rem;color:#fff;background:#12372a}.game-status>div{display:grid;gap:.1rem}.game-status strong{font-size:1.05rem}.game-status span{font-size:.72rem;color:#d4e5da}.game-status dl{display:flex;gap:.9rem;margin:0}.game-status dl div{display:grid;text-align:center}.game-status dt{font-size:.65rem;color:#c1d8ca;text-transform:uppercase}.game-status dd{margin:0;font-weight:800}.players-panel{overflow-x:auto;background:#fffdf8;border-bottom:1px solid #bacbc0}.game-players{display:flex;min-width:max-content;gap:.3rem;margin:0;padding:.4rem .55rem;list-style:none}.game-players li{display:flex;align-items:center;gap:.3rem;min-width:8rem;padding:.35rem .5rem;border:2px solid transparent;border-radius:.55rem}.game-players li.active-player{border-color:#c44536;background:#fff0ec}.game-players li>span:last-child{display:grid}.game-players small{color:#65736c;font-size:.68rem}.turn-marker{color:#c44536;font-weight:900}.game-error,.opening-hint{z-index:2;display:flex;justify-content:space-between;align-items:center;margin:0;padding:.5rem .75rem;background:#fff0ec;color:#8e2b23;font-size:.82rem;font-weight:650}.game-notices{display:grid}.opening-hint{background:#fff8d9;color:#624d00}.game-error button{width:2rem;min-height:2rem;padding:0;color:inherit;font-size:1.2rem}.table-region{min-height:0;padding:.5rem;background:radial-gradient(circle at center,#4e8b68,#2d694c);overflow:hidden}.table-scroll{height:100%;overflow:auto;overscroll-behavior:contain;padding:.4rem;border:1px solid rgb(255 255 255 / 18%);border-radius:.75rem}.meld-grid{display:flex;align-content:flex-start;flex-wrap:wrap;gap:var(--meld-gap)}.meld-with-insertion{display:flex;flex:0 0 auto}.meld{display:flex;flex-direction:column;min-width:calc(var(--tile-width) + 2.5rem);min-height:calc(var(--tile-height) + var(--tile-meld-extra));padding:var(--meld-padding);border:2px solid rgb(230 247 237 / 62%);border-radius:max(.35rem,var(--tile-radius));background:#0836238f;box-shadow:inset 0 0 0 1px #08231859,0 3px 8px #061f1540;transition:border-color .12s ease,box-shadow .12s ease}.meld-header{display:flex;align-items:center;gap:.35rem;min-height:2.25rem;padding:0 .15rem .2rem;color:#f2fff7}.meld-number{font-size:.7rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.meld-invalid-label{padding:.12rem .35rem;border-radius:999px;color:#fff;background:#a9241d;font-size:.62rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase}.meld-tiles{display:flex;flex:0 0 auto}.meld-selected,.meld:focus-within{border-color:#ffe483;box-shadow:inset 0 0 0 1px #244f3c,0 0 0 2px #ffe48359}.meld-dragging{opacity:.35;z-index:20}.meld-drag-handle{margin-left:auto;width:2.25rem;min-height:2.25rem;padding:.2rem;border:0;border-radius:.4rem;color:#e8f3ed;background:#0420146b;touch-action:none;cursor:grab}.meld-invalid{border-color:#ff5148;background:#5b1413ad;animation:invalid-meld-pulse 1.1s ease-in-out infinite alternate}.tile-invalid{outline:var(--tile-outline-width) solid #ff3b30;outline-offset:2px;animation:invalid-tile-pulse .8s ease-in-out infinite alternate}.tile-change-new{outline:var(--tile-outline-width) solid #fff08a;outline-offset:2px;box-shadow:0 0 .85rem #fff08ae5}.tile-change-moved{outline:var(--tile-outline-width) solid #70e6ff;outline-offset:2px;box-shadow:0 0 .75rem #70e6ffbf}.rack-region .tile-change-new,.change-animated .tile-change-new{animation:authoritative-tile-new .7s ease-in-out 2 alternate}.change-animated .tile-change-moved{animation:authoritative-tile-moved .6s ease-in-out 2 alternate}.meld-authoritative-change{border-color:#9cf3ff;box-shadow:0 0 .8rem #70e6ffa6}.meld-authoritative-change.change-animated{animation:authoritative-meld-change .8s ease-in-out 2 alternate}@keyframes authoritative-tile-new{0%{filter:brightness(1)}to{filter:brightness(1.22)}}@keyframes authoritative-tile-moved{0%{transform:translateY(0)}to{transform:translateY(calc(-.12rem * var(--tile-scale)))}}@keyframes authoritative-meld-change{0%{background:#0836238f}to{background:#1b686fb8}}.change-summary{z-index:3;padding:.45rem .75rem;color:#12372a;background:#d9fbff;border-bottom:1px solid #78cbd5;font-size:.8rem;font-weight:750;text-align:center}@keyframes invalid-meld-pulse{0%{box-shadow:0 0 0 1px #ff514859}to{box-shadow:0 0 1.1rem .25rem #ff3b30d9}}@keyframes invalid-tile-pulse{0%{filter:brightness(1)}to{filter:brightness(1.25) drop-shadow(0 0 .4rem #ff3b30)}}@media(prefers-reduced-motion:reduce){.meld-invalid,.tile-invalid,.tile-change-new,.tile-change-moved,.meld-authoritative-change{animation:none}}.meld-drag-handle:disabled{opacity:.45;cursor:default}.tile-with-insertion{display:flex;flex:0 0 auto}.split-boundary{position:relative;display:flex;flex:0 0 auto}.split-handle{position:absolute;z-index:5;top:50%;left:50%;width:2rem;min-height:2.75rem;padding:0;border:1px solid rgb(255 255 255 / 70%);border-radius:999px;background:#244f3c;box-shadow:0 2px 6px #00000059;opacity:0;pointer-events:none;transform:translate(-50%,-50%);transition:opacity .12s ease;touch-action:manipulation}.split-handle span{display:block;width:2px;height:1.4rem;margin:auto;border-left:2px dashed #ffe483}.meld:hover .split-handle,.meld:focus-within .split-handle,.meld-selected .split-handle,.split-handle:focus-visible{opacity:1;pointer-events:auto}.insertion-zone{position:relative;flex:0 0 var(--tile-insertion-width);min-height:var(--tile-height);touch-action:pan-x}.insertion-zone:after{position:absolute;inset:.15rem auto .15rem 50%;width:3px;border-radius:2px;background:transparent;content:"";transform:translate(-50%)}.insertion-zone.insertion-active:after{background:#ffe483;box-shadow:0 0 0 1px #234a3a}.drop-active{outline:3px solid #ffe483;outline-offset:2px}.empty-table{margin:2rem auto;color:#e7f2eb;text-align:center}.new-meld-zone{display:grid;place-items:center;min-height:4.5rem;margin-top:.75rem;padding:.75rem;border:2px dashed rgb(255 255 255 / 50%);border-radius:.65rem;color:#fff;font-size:.8rem}.tile{position:relative;flex:0 0 var(--tile-width);display:grid;place-items:center;align-content:center;gap:0;width:var(--tile-width);height:var(--tile-height);min-height:var(--tile-height);padding:var(--tile-padding);border:var(--tile-border-width) solid #e5ded0;border-radius:var(--tile-radius);background:#fffdf4;box-shadow:0 2px 4px #0000004d;touch-action:pan-x;-webkit-user-select:none;user-select:none;font-size:var(--tile-number-size);line-height:1;z-index:1}.tile small{max-width:100%;margin-top:var(--tile-padding);overflow:hidden;color:#333;font-size:var(--tile-label-size);letter-spacing:-.02em;text-transform:uppercase}.tile-red{color:#961515;border-color:#c77470;background:#fff5f4;box-shadow:inset 0 var(--tile-band-depth) #b92720,0 2px 4px #0000004d}.tile-blue{color:#0b4f9c;border-color:#6798ce;background:#f1f7ff;box-shadow:inset 0 var(--tile-band-depth) #1976d2,0 2px 4px #0000004d}.tile-black{color:#111;border-color:#696969;background:#f2f2f2;box-shadow:inset 0 var(--tile-band-depth) #202020,0 2px 4px #0000004d}.tile-orange{color:#c84f00;border-color:#e6a044;background:#fff7df;box-shadow:inset 0 var(--tile-band-depth) #f28c00,0 2px 4px #0000004d}.tile-joker{color:#5a247d;background:linear-gradient(145deg,#fff8cf,#f2e2ff)}.tile.dragging{opacity:.45;z-index:20}.tile.selected{outline:var(--tile-outline-width) solid #ffe15a;outline-offset:2px;filter:drop-shadow(0 0 2px #173f31) drop-shadow(0 4px 4px rgb(0 0 0 / 40%));transform:translateY(-.15rem)}.meld-invalid .tile.tile-invalid{outline-color:#ff3b30}.drag-preview{min-width:var(--tile-width);min-height:calc(var(--tile-height) * .65);padding:var(--tile-preview-y) var(--tile-preview-x);border:2px solid #ffe15a;border-radius:.7rem;color:#fff;background:#123f2f;box-shadow:0 5px 14px #00000059;font-weight:800;font-size:var(--tile-preview-font)}.meld-preview{background:#245d46}.tile:disabled{opacity:1;cursor:default}.rack-region{min-width:0;padding:.4rem .55rem .55rem;background:#f7f3ea;border-top:1px solid #c9c2b5}.rack-region h2{display:flex;justify-content:space-between;margin:0 0 .3rem;color:#47534d;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase}.rack-scroll{display:flex;min-height:calc(var(--tile-height) + .4rem);gap:.15rem;overflow-x:auto;padding:.15rem .2rem .35rem;overscroll-behavior-x:contain;touch-action:pan-x;-webkit-overflow-scrolling:touch}.game-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem;padding:.5rem max(.55rem,env(safe-area-inset-right)) max(.5rem,env(safe-area-inset-bottom)) max(.55rem,env(safe-area-inset-left));background:#fffdf8;border-top:1px solid #d1ccc2}.game-menu-button{width:auto;min-width:4.25rem;min-height:2.5rem;margin-right:max(.5rem,env(safe-area-inset-right));padding:.4rem .7rem;color:#fff;border-color:#fff6}.game-menu-card{display:grid;gap:.75rem}.tile-size-setting{margin:0;padding:.75rem;border-radius:.5rem;background:#f1f5f2}.tile-size-setting span{display:flex;justify-content:space-between}.tile-size-setting input{min-height:2rem;padding:0;accent-color:#235f48}button.danger{background:#8f241d}.game-controls button{min-height:2.75rem;padding:.45rem;font-size:.74rem}.game-controls .sort-controls{display:flex;grid-column:1 / -1;gap:.35rem}.sort-controls button[aria-pressed=true]{border-color:#235f48;background:#dcebe3;box-shadow:inset 0 0 0 1px #235f48}button.quiet{color:#234a3a;background:transparent;border:1px solid #b9c8bf}.draw-button{background:#9a4c18}.winner-backdrop{position:fixed;z-index:100;inset:0;display:grid;place-items:center;padding:1rem;background:#081912bf}.winner-card{width:min(24rem,100%);padding:2rem;border-radius:1rem;background:#fffdf8;text-align:center;box-shadow:0 1rem 4rem #00000059}.winner-card p{margin:0;color:#d39713;font-size:3rem}.winner-card h1{font-size:2rem;text-transform:uppercase}.round-results{margin:1rem 0;text-align:left}.round-results h2{margin-bottom:.5rem}.round-results ul{display:grid;gap:.45rem;margin:0;padding:0;list-style:none}.round-results li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.1rem .5rem;padding:.45rem;border-radius:.4rem;background:#f0f5f1}.round-results small{grid-column:1 / -1;color:#647169}.winner-actions{display:grid;gap:.5rem}@media(min-width:900px){.home-shell{grid-template-columns:minmax(0,42rem) minmax(20rem,32rem);justify-content:center}}@media(min-width:768px){.game-shell{grid-template:auto auto minmax(0,1fr) auto auto / 12rem minmax(0,1fr)}.game-topbar{grid-column:1 / -1;grid-row:1}.game-status{padding-inline:1.2rem}.players-panel{grid-column:1;grid-row:2 / 5;overflow:auto;border-right:1px solid #bacbc0}.game-players{min-width:0;flex-direction:column;padding:.75rem}.game-players li{min-width:0}.game-notices{grid-column:2;grid-row:2}.table-region{grid-column:2;grid-row:3;min-height:0;padding:.75rem}.rack-region{grid-column:2;grid-row:4}.game-controls{grid-column:1 / -1;grid-row:5;grid-template-columns:2fr repeat(3,minmax(7rem,1fr))}.game-controls .sort-controls{grid-column:auto}}