:root{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{font:inherit}.shell{min-height:100vh;display:grid;place-items:center;padding:1rem}.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}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-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}.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:.6rem}.meld{display:flex;min-width:3.5rem;min-height:4.7rem;padding:.35rem;border-radius:.6rem;background:#0a2a1d3d;box-shadow:inset 0 0 0 1px #ffffff1f}.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 3.25rem;display:grid;place-items:center;align-content:center;gap:0;width:3.25rem;height:4.25rem;min-height:4.25rem;padding:.15rem;border:2px solid #e5ded0;border-radius:.45rem;background:#fffdf4;box-shadow:0 2px 4px #0000004d;touch-action:none;-webkit-user-select:none;user-select:none;font-size:1.65rem;line-height:1;z-index:1}.tile small{max-width:100%;margin-top:.2rem;overflow:hidden;color:#333;font-size:.48rem;letter-spacing:-.02em;text-transform:uppercase}.tile-red{color:#b21f17}.tile-blue{color:#1559a0}.tile-black{color:#171717}.tile-orange{color:#a34b00}.tile-joker{color:#5a247d;background:linear-gradient(145deg,#fff8cf,#f2e2ff)}.tile.dragging{opacity:.45;z-index:20}.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:4.65rem;gap:.15rem;overflow-x:auto;padding:.15rem .2rem .35rem;overscroll-behavior-x:contain}.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-controls button{min-height:2.75rem;padding:.45rem;font-size:.74rem}.game-controls .sort-controls{display:flex;grid-column:1 / -1;gap:.35rem}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}@media(min-width:768px){.game-shell{grid-template:auto auto minmax(0,1fr) auto auto / 12rem minmax(0,1fr)}.game-status{grid-column:1 / -1;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-error,.opening-hint{grid-column:2}.table-region{grid-column:2;min-height:0;padding:.75rem}.rack-region{grid-column:2}.game-controls{grid-column:1 / -1;grid-template-columns:2fr repeat(3,minmax(7rem,1fr))}.game-controls .sort-controls{grid-column:auto}.tile{flex-basis:3.55rem;width:3.55rem;height:4.65rem;min-height:4.65rem;font-size:1.85rem}}