@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
:root{font-family:'DM Sans',system-ui,sans-serif;color:#303d38;background:#f5f3ed;font-synthesis:none}*{box-sizing:border-box}body{margin:0;height:100dvh;display:flex;flex-direction:column;overflow:hidden}button,input{font:inherit}button{cursor:pointer;color:inherit;border:0;background:none;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default;opacity:.32}button:focus-visible,a:focus-visible{outline:2px solid #32785f;outline-offset:4px}header{height:72px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 30px;background:#faf9f5;border-bottom:1px solid #e2e3da;z-index:2}.brand{text-decoration:none;color:#34483d;font-size:24px;letter-spacing:-1px;font-weight:600;display:flex;align-items:center;gap:10px}.brandmark{font-size:33px;color:#43866c;width:1em;height:1em;flex-shrink:0;display:block}.scores{display:flex;align-items:center;gap:24px;font-size:13px}.player{display:flex;align-items:center;gap:10px;color:#8a9189}.player b{font-size:22px;font-weight:500;color:#8a9189;min-width:26px;text-align:right}.player i{width:6px;height:6px;border-radius:100%;background:transparent}.player.active,.player.active b{color:#284c3b}.player.active i{background:#398264;box-shadow:0 0 0 4px #e1ebe1}.score-divider{height:22px;width:1px;background:#e0e3da}#fold{color:#829086}.header-actions{display:flex;gap:8px}.icon{width:36px;height:36px;border-radius:50%;font-size:23px;color:#7b877d}.icon:hover{background:#e9ece4}main{position:relative;flex:1;min-height:0}canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}canvas.selecting{cursor:crosshair}canvas:active{cursor:grabbing}.board-label{position:absolute;top:24px;left:30px;font-size:10px;font-weight:600;letter-spacing:1.8px;color:#8c978c;pointer-events:none}.connection{position:absolute;top:20px;right:25px;font-size:12px;color:#a65e2c}.view-controls{position:absolute;right:28px;bottom:24px;display:flex;align-items:center;padding:4px;background:#faf9f5e8;border:1px solid #dfe3d8;border-radius:8px;box-shadow:0 2px 5px #233f3010}.view-controls button{width:32px;height:32px;font-size:21px;color:#768274}.view-controls button:hover{background:#e9ece4;border-radius:4px}footer{z-index:2;background:#faf9f5;border-top:1px solid #e0e3d9;padding:17px 28px 25px;flex-shrink:0}.rack-meta{max-width:655px;margin:0 auto 12px;display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:1.5px;color:#879183;font-weight:600}.bag{display:flex;align-items:center;gap:6px;letter-spacing:0}.rack-row{display:flex;align-items:center;justify-content:center;gap:30px}.hand{display:flex;gap:9px;min-height:64px}.tile{width:62px;height:62px;display:flex;align-items:center;justify-content:center;background:#202523;border:1px solid #101613;border-radius:7px;box-shadow:0 3px 0 #101713,0 5px 7px #14281c19;touch-action:none;transition:transform .13s,opacity .13s;position:relative;padding:10px}.tile svg{width:100%;height:100%;pointer-events:none}.tile.selected{outline:2px solid #579a78;outline-offset:4px;transform:translateY(-7px)}.tile.used{opacity:.17;box-shadow:none}.tile:hover:not(:disabled){transform:translateY(-5px)}.tile:disabled{opacity:.25}.turn-actions{display:flex;align-items:center;gap:10px}.undo{font-size:28px;width:35px;color:#788575}.commit{background:#376e53;color:#fff;border-radius:8px;min-width:80px;height:48px;font-weight:500;font-size:16px;padding:0 18px}.commit:hover:not(:disabled){background:#295c43}.commit:disabled{background:#d6ddd0;opacity:1;color:#98a28f}.pass{font-size:11px;color:#899380;padding:10px 0}.undo:disabled{opacity:.25}#notice{position:fixed;bottom:160px;left:50%;transform:translateX(-50%);background:#334a3c;color:#fff;padding:12px 20px;border-radius:8px;z-index:6;font-size:13px;max-width:90%;text-align:center;box-shadow:0 4px 20px #0002}#ledger{position:absolute;top:64px;left:50%;transform:translateX(-50%);width:330px;max-height:50vh;overflow:auto;background:#faf9f5;border:1px solid #e0e3d9;border-radius:10px;box-shadow:0 12px 35px #21382a16;z-index:5;padding:18px}.ledger-head,.ledger-row{display:grid;grid-template-columns:1fr 1.5fr 1.5fr;text-align:right;gap:10px}.ledger-head{font-size:9px;letter-spacing:1px;color:#8b9689;padding-bottom:12px}.ledger-head span:first-child,.ledger-row span:first-child{text-align:left}.ledger-row{font-size:14px;padding:10px 0;border-top:1px solid #e8e9e0}.ledger-row span:first-child{color:#98a190;font-size:12px}.ledger-row em{font-size:10px;font-style:normal;color:#bc8e38;margin-left:5px}.ledger-empty{color:#99a191;font-size:13px;text-align:center;padding:18px 0}dialog{border:1px solid #e0e3d9;border-radius:14px;padding:26px;width:350px;max-width:calc(100% - 32px);color:#34473b;background:#faf9f5;box-shadow:0 20px 90px #20352626}dialog::backdrop{background:#233d3030;backdrop-filter:blur(3px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}h2{font-weight:500;font-size:20px;margin:0}.setting{display:flex;justify-content:space-between;align-items:center;font-size:14px;padding:15px 0;border-bottom:1px solid #e4e7dc}input[type=checkbox]{accent-color:#376e53;width:18px;height:18px}.wide{width:100%;margin-top:24px}.secondary{border:1px solid #dce1d5;border-radius:8px;padding:12px;font-size:13px}dialog p{font-size:13px;line-height:1.6;color:#7a8777}dialog p.small{font-size:11px}#invite-url{width:100%;border:1px solid #dce1d5;border-radius:6px;padding:12px;background:#f1f2eb;color:#4e6755;font-size:12px}.drag-ghost{position:fixed;pointer-events:none;z-index:20;transform:translate(-50%,-50%);opacity:.9} @media(max-width:650px){header{height:60px;padding:0 14px}.brand{font-size:19px;gap:5px}.brandmark{font-size:27px}.scores{gap:10px}.player{gap:6px}.player-name{display:none}.player b{font-size:20px;min-width:20px}.header-actions{gap:0}.icon{width:30px;font-size:21px}.score-divider{height:17px}footer{padding:14px 14px max(19px,env(safe-area-inset-bottom))}.rack-row{gap:12px;flex-wrap:wrap}.hand{gap:7px;min-height:47px}.tile{width:clamp(40px,12.8vw,57px);height:clamp(40px,12.8vw,57px);padding:8px}.rack-meta{max-width:377px}.turn-actions{width:100%;justify-content:center;gap:24px}.commit{height:40px;min-width:120px}.board-label{left:18px;top:19px;font-size:9px}.view-controls{right:16px;bottom:16px}#notice{bottom:200px}.rack-row{gap:16px}#ledger{top:53px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
[hidden]{display:none!important}.score-band{display:flex;align-items:center;min-width:0}.scores{gap:25px}.player .player-name{display:block;max-width:120px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.player input.player-name{width:110px;min-width:0;background:transparent;border:0;border-bottom:1px solid transparent;padding:5px 0;color:inherit;font:inherit;outline:none}.player input.player-name:hover{border-color:#d1d9cb}.player input.player-name:focus{border-color:#43866c}.player.offline{opacity:.45}.ledger-toggle{font-size:17px;margin-left:8px}.rack-meta{justify-content:flex-end}.swapping{background:#dde9d9!important;color:#376e53}.ledger-head,.ledger-row{grid-template-columns:30px repeat(var(--players,2),minmax(0,1fr))}.ledger-head span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#lobby{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:auto;padding:28px}#entry{width:260px}#join-form{display:flex;gap:12px;margin-top:18px}#join-code{min-width:0;width:170px;border:1px solid #dce1d5;border-radius:8px;background:#faf9f5;padding:12px;text-transform:uppercase;text-align:center;font-size:22px;letter-spacing:8px;color:#47654e}#join-form .secondary{margin:0;flex:1}#waiting{width:440px;max-width:100%;text-align:center}#room-code{font-size:30px;letter-spacing:10px;font-weight:500;padding:10px 0 10px 10px;color:#536d59}.arrivals{display:flex;justify-content:center;gap:20px;margin:35px 0 28px}.arrival{width:80px;min-width:0;display:flex;align-items:center;flex-direction:column;gap:14px;color:#7b8b78;font-size:12px}.arrival>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.arrival-tile{width:64px;height:64px;border:1px dashed #c9d1c1;border-radius:9px;display:flex;justify-content:center;align-items:center;font-size:24px;color:#b7c1b0}.arrival.occupied .arrival-tile{background:#242b26;border:1px solid #17231b;box-shadow:0 3px 0 #132217,0 6px 12px #18382212;padding:9px}.arrival.offline{opacity:.4}.arrival-tile svg{width:100%;height:100%}.lobby-settings{max-width:290px;margin:0 auto;text-align:left}.lobby-settings .setting{font-size:12px}#start-game{max-width:290px}input:disabled{opacity:.5;cursor:default}#ledger{width:min(430px,calc(100% - 24px))}@media(max-width:850px){header{flex-wrap:wrap;height:auto;min-height:64px;padding:12px 16px;gap:12px}.brand{order:0}.header-actions{order:1;margin-left:auto}.score-band{order:2;width:100%;justify-content:center;border-top:1px solid #e6e9df;padding-top:8px}.scores{gap:15px;flex:1;justify-content:space-around}.player{gap:5px;min-width:0;flex:1;justify-content:center}.player .player-name{display:block;font-size:11px;max-width:80px}.player input.player-name{width:75px}.player b{font-size:18px;min-width:10px}.player i{flex-shrink:0;width:5px;height:5px}.ledger-toggle{flex-shrink:0;margin-left:0;width:22px}#ledger{top:110px}.arrivals{gap:12px}.arrival-tile{width:57px;height:57px}.turn-actions{gap:18px}.rack-meta{margin-bottom:10px}}@media(max-width:430px){.scores{gap:8px}.player{flex-wrap:wrap;gap:4px}.player .player-name{max-width:62px}.player input.player-name{width:62px}.player b{font-size:15px}.arrivals{gap:8px}.arrival{width:66px}#lobby{padding:20px}}
.tile:disabled:not(.used){opacity:1;box-shadow:0 3px 0 #101713,0 5px 7px #14281c19}@media(max-width:650px){header:not(.many-players){height:60px;min-height:60px;flex-wrap:nowrap;padding:0 12px;gap:9px}header:not(.many-players) .brand{font-size:0;gap:0}header:not(.many-players) .brandmark{font-size:28px}header:not(.many-players) .score-band{order:0;flex:1;width:auto;border:0;padding:0}header:not(.many-players) .scores{gap:8px}header:not(.many-players) .header-actions{order:1;margin:0}header:not(.many-players) .player{flex-wrap:nowrap}header:not(.many-players) .player input.player-name{width:61px}body:has(header:not(.many-players)) #ledger{top:53px}}
.arrival input.arrival-name{width:100%;min-width:0;text-align:center;font:inherit;color:inherit;background:transparent;border:0;border-bottom:1px solid #cbd5c4;border-radius:0;padding:0 0 4px;outline:none}.arrival input.arrival-name:focus{border-color:#488864}footer{position:relative;isolation:isolate}footer::after{content:'';position:absolute;inset:8px;border:2px dashed transparent;border-radius:12px;pointer-events:none;z-index:1}footer.active-turn::after{border-color:#488864}footer.waiting-turn::after{background:rgb(204 204 204 / 20%)}.ledger-settings{border-top:1px solid #e0e3d9;margin:15px 0 0;padding-top:12px;font-size:11px;color:#81907d}.ledger-settings>div{display:flex;justify-content:space-between;gap:16px;padding:5px 0}.ledger-settings dd{margin:0;color:#47654e}


footer.waiting-turn::after{pointer-events:none}.player{border-radius:5px}

.arrival-order{display:flex;align-items:center;justify-content:center;gap:2px;min-height:30px}.arrival-order span{font-size:10px;color:#8b9689}.arrival-order button{font-size:18px;width:27px;height:30px;border-radius:5px}.arrival-order button:hover:not(:disabled){background:#e1e9dc}.order-hint{font-size:11px;color:#81907d;margin:10px 0 0}.arrivals{margin-top:20px}.ledger-head,.ledger-row{grid-template-columns:42px repeat(var(--players,2),minmax(0,1fr))}#sound[aria-pressed=true]{opacity:.45}

.rack-row{gap:24px}.rack-meta{max-width:930px;justify-content:space-between;gap:12px}#hand-help{font-size:10px;letter-spacing:0;font-weight:400}.hand-viewport{max-width:100%;width:639px;overflow-x:auto;overflow-y:hidden;padding:12px 5px 10px;touch-action:pan-x;scrollbar-width:thin;scrollbar-color:#bdcaba transparent}.rack-track{--rack-size:62px;--rack-gap:9px;--rack-step:calc((var(--rack-size) + var(--rack-gap))/2);position:relative;width:calc(9 * (var(--rack-size) + var(--rack-gap)) - var(--rack-gap));height:var(--rack-size)}.hand{position:relative;display:block;width:100%;height:100%;min-height:0}.hand>.tile{position:absolute;left:calc(var(--slot)*var(--rack-step));top:0;width:var(--rack-size);height:var(--rack-size);cursor:grab}.hand>.tile:active{cursor:grabbing}#hand-preview{position:absolute;left:calc(var(--slot)*var(--rack-step));top:0;width:var(--rack-size);height:var(--rack-size);border:2px dashed #43866c;border-radius:7px;background:#43866c18;pointer-events:none}.hand.arranging>.tile{opacity:.65}.hand.arranging>.tile.used{opacity:.17}@media(max-width:950px){.rack-row{flex-wrap:wrap;gap:8px}.turn-actions{justify-content:center;width:100%}}@media(max-width:650px){.rack-track{--rack-size:clamp(40px,10vw,57px);--rack-gap:7px}.hand-viewport{width:100%}.rack-meta{max-width:none}#hand-help{font-size:9px}.hand>.tile{padding:7px}}

#game-elapsed,#turn-elapsed{font-variant-numeric:tabular-nums}

.player.with-hand-count{position:relative;padding-bottom:12px}.hand-count{position:absolute;bottom:1px;left:50%;transform:translateX(-50%);display:flex;justify-content:center;gap:3px;height:5px}.hand-count>span{display:block;width:5px;height:5px;background:#202523}

#victory{position:absolute;left:0;right:0;top:35%;transform:translateY(-50%);z-index:1;padding:24px;text-align:center;pointer-events:none;background:#faf9f5eb;border-block:1px solid #cddccf;color:#376e53;font-size:clamp(25px,5vw,48px);font-weight:600;overflow-wrap:anywhere}