:root{font-family:Arial,"Segoe UI",sans-serif;color:#f5efda;background:#061d1c;color-scheme:dark;--gold:#e4bd72;--muted:#a9c3b5;--line:#ffffff22;--panel:#153f35;--tile:#f7f2df}*{box-sizing:border-box}body{margin:0;min-height:100dvh;display:flex;justify-content:center}button,input{font:inherit}button{cursor:pointer;border:1px solid #ffffff35;border-radius:8px;color:inherit;background:#ffffff09;min-height:36px;padding:6px 10px;font-weight:600;font-size:12px}button:hover:not(:disabled){background:#ffffff1e}button:disabled{opacity:.45;cursor:default}button.primary{background:var(--gold);border-color:var(--gold);color:#24382e}button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}input{min-width:0;width:100%;border:1px solid #ffffff32;border-radius:8px;padding:9px;background:#0a2e28;color:#fff8e5;font-size:16px}input::placeholder{color:#a4baac}h1,h2,h3,p{margin:0}h1{font:24px Georgia,serif;letter-spacing:-.03em}h2{font-size:15px}p{line-height:1.45}.shell{width:100%;max-width:460px;height:100dvh;display:grid;grid-template-rows:40px minmax(0,1fr);background:radial-gradient(ellipse at 40% 20%,#194c3e,#0a302a 80%);position:relative}header{display:flex;align-items:center;gap:8px;padding:3px 10px;border-bottom:1px solid var(--line);font-size:12px;letter-spacing:.08em}header em{color:var(--gold);font-style:normal}#connection{margin-left:auto;font-size:9px;letter-spacing:0;max-width:100px;text-align:right}header .icon{width:32px;min-height:30px;padding:0}main{min-height:0;padding:8px}.welcome{height:100%;display:grid;grid-template-rows:30px auto 42px 24px minmax(0,1fr) 36px 28px;gap:7px}
.welcome:has(#network-note[hidden]){height:100%;display:grid;grid-template-rows:30px auto 42px 24px minmax(0,1fr) 36px;gap:7px}.welcome-heading{display:flex;align-items:center;justify-content:space-between;gap:5px}.welcome-heading h1{font-size:21px}.welcome-heading>span{font-size:10px;color:var(--muted);text-align:right;max-width:85px}.create-row{display:grid;grid-template-columns:minmax(0,1fr) 100px;gap:6px;height:42px}.visibility{display:flex;gap:6px;border:0;padding:0;margin:6px 0 0}.visibility label{display:flex;align-items:center;justify-content:center;gap:5px;flex:1;border:1px solid var(--line);border-radius:8px;height:38px;font-size:13px;cursor:pointer}.visibility label:has(input:checked){border-color:var(--gold);background:#e4bd7212}.visibility input{width:15px;height:15px;margin:0;accent-color:var(--gold)}.visibility small{font-size:10px;color:var(--muted)}.join-row{display:grid;grid-template-columns:minmax(0,1fr) 100px;gap:6px}.directory-heading{display:flex;align-items:center;justify-content:space-between}.text-button{padding:0 6px;border:0;background:transparent;min-height:24px;color:var(--gold);font-size:11px}.directory{display:grid;grid-template-rows:repeat(var(--rows,3),minmax(0,1fr));gap:6px;min-height:0}.room-card{display:grid;grid-template-columns:minmax(0,1fr) 72px;align-items:center;border:1px solid var(--line);border-radius:9px;padding:7px 9px;background:#ffffff05;min-height:0}.room-card h3{font-size:14px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin-bottom:4px}.room-card p{color:var(--muted);font-size:11px}.room-card button{min-height:38px;padding:4px;font-size:12px}.directory-empty{grid-row:1/-1;display:grid;place-content:center;gap:8px;text-align:center;border:1px dashed var(--line);border-radius:9px;color:var(--muted);font-size:12px}.pagination{display:flex;align-items:center;justify-content:center;gap:18px;font-size:12px}.pagination button{width:44px;padding:0;font-size:22px}.local-note{font-size:11px;color:var(--muted);line-height:1.3;align-self:center}.room{height:100%;display:grid;grid-template-rows:36px minmax(0,1fr);gap:5px}.room-bar{display:flex;align-items:center;justify-content:space-between;gap:3px;border-bottom:1px solid var(--line)}.room-bar>span{font-size:11px;white-space:nowrap}.room-bar b{letter-spacing:.08em}.room-bar small{color:var(--gold);font-size:9px;display:block}.room-bar>div{display:flex;gap:3px}.room-bar button{padding:3px 7px;min-height:31px;font-size:11px}.lobby{display:grid;grid-template-rows:52px minmax(0,1fr) 44px 42px;gap:10px;padding:8px 0}.lobby-heading{text-align:center}.lobby-heading p{color:var(--muted);font-size:12px;margin-top:5px}.seat-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;min-height:0}.seat-card{border:1px solid var(--line);border-radius:12px;padding:14px 10px;display:flex;flex-direction:column;justify-content:center;gap:9px;min-width:0;background:#ffffff05}.seat-card.mine{border-color:#e4bd7370}.seat-number{font:26px Georgia,serif;color:var(--gold)}.seat-card h3{font-size:16px;overflow-wrap:anywhere}.seat-card p{font-size:12px;color:var(--muted)}.lobby-actions{display:flex;gap:8px}.lobby-actions button{flex:1;min-height:44px}.lobby-note{font-size:12px;color:var(--muted);text-align:center;align-self:center}.game{min-height:0;display:grid;grid-template-rows:24px minmax(96px,1fr) 28px auto 108px 44px 20px;gap:4px}.game-stats{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--muted)}#timer{color:var(--gold);font-size:12px}.table{min-height:0;border:1px solid #56867570;border-radius:12px;padding:7px;background:radial-gradient(ellipse,#24634c,#124635);display:grid;grid-template-rows:auto minmax(30px,1fr) auto 20px;gap:4px}.opponents{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.opponent{border:1px solid #ffffff19;background:#07362d70;border-radius:7px;padding:5px 4px;min-width:0}.opponent.active{border-color:var(--gold)}.opponent h3{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.opponent p{font-size:10px;color:#c9d9c8;white-space:nowrap}.opponent .seat-role{font-size:9px;color:var(--gold)}.table-center{display:flex;align-items:center;justify-content:center;gap:10px;min-height:0;text-align:center}.table-center h2{font:20px Georgia,serif;line-height:1.05}.table-center p{font-size:10px;color:#c1d6c7;margin-top:4px;max-width:205px}#last-discard:empty{display:none}#last-discard .tile{width:35px;height:45px}.discards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.river-preview{display:flex;align-items:center;justify-content:center;gap:3px;min-width:0;font-size:10px;color:#d8e0cc}.river-preview .tile{width:17px;height:23px;border-radius:3px;border-bottom-width:2px}.river-preview .tile svg{width:100%;height:100%}.table-details{border:0;background:transparent;min-height:20px;padding:0;font-size:10px;color:#d2e0ce}.hand-heading{display:flex;align-items:center;gap:6px;font-size:12px}.hand-heading strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hand-heading>span{color:var(--gold);margin-left:auto;white-space:nowrap;font-size:11px}.hand-heading button{min-height:27px;padding:3px 8px;font-size:11px}.my-melds{display:flex;gap:5px;min-height:0}.my-melds:empty{display:none}.meld-group{display:flex;gap:1px}.meld-group .tile{width:16px;height:24px;border-radius:3px;border-bottom-width:2px}.hand{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(2,52px);gap:4px;align-content:start;touch-action:none}.tile{display:inline-flex;align-items:center;justify-content:center;border:1px solid #e7dbb9;border-bottom:4px solid #afbd84;border-radius:6px;background:linear-gradient(#fffdf1,#eee6c9);color:#135545;padding:1px;min-width:0;min-height:0;box-shadow:0 1px 2px #001b2440;vertical-align:middle;flex-shrink:0}.tile svg{width:100%;height:100%;pointer-events:none}.hand .tile{width:100%;height:52px;min-height:52px;touch-action:none;user-select:none;-webkit-user-select:none}.hand .tile.selected{outline:2px solid #f5c567;outline-offset:0;background:#fff5cc;transform:translateY(-1px)}.hand .tile.drawn{border-top:3px solid var(--gold)}.tile.concealed{background:#799b7b;border-color:#bfd0aa}.tile.drag-origin{opacity:.35}.tile.drop-target{outline:3px dashed var(--gold);outline-offset:-3px}.drag-ghost{position:fixed;z-index:30;pointer-events:none;opacity:.95;transform:rotate(-5deg);box-shadow:0 5px 12px #0007}.actions{display:flex;gap:4px;align-items:stretch;min-height:0}.actions>button{flex:1;min-width:0;min-height:44px;padding:4px;font-size:12px;line-height:1.15}.hand-help{font-size:10px;color:var(--muted);line-height:1.3;align-self:center;text-align:center}.actions .waiting{font-size:12px;align-self:center;color:var(--muted);width:100%;text-align:center}.notice{position:absolute;z-index:8;left:10px;right:10px;top:45px;display:flex;align-items:center;gap:8px;padding:10px;background:#f2e7c9;color:#183d31;border-radius:9px;box-shadow:0 5px 20px #0004;font-size:12px;line-height:1.35}.notice>span{flex:1}.notice button{color:#183d31;border:0;font-size:22px;padding:0 7px}dialog{width:calc(100% - 24px);max-width:430px;max-height:85dvh;overflow:auto;border:1px solid #648878;border-radius:14px;background:#123d33;color:#f5efda;padding:16px}dialog::backdrop{background:#001d23b0}.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}.dialog-head h2{font:24px Georgia,serif}.dialog-head button{font-size:24px;width:38px;padding:0}dialog p,dialog li{font-size:14px;line-height:1.6;margin-bottom:12px}dialog h3{font-size:15px;margin:12px 0 8px}dialog label{display:block;font-size:13px;margin:10px 0}dialog input{margin-bottom:10px}dialog .tile{width:25px;height:35px;margin:2px}.full-seat{border-top:1px solid var(--line);padding:9px 0}.full-seat .tiles{display:flex;flex-wrap:wrap}.choices,.voice-controls,.arrange-controls{display:flex;flex-wrap:wrap;gap:8px}.choices button,.voice-controls button,.arrange-controls button{min-height:44px;flex:1}.score-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px}.score-grid p{font-size:12px;margin:0}#voice-members span{display:inline-block;padding:5px 8px;border:1px solid var(--line);border-radius:15px;font-size:11px;margin:4px}#result button{min-height:44px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;clip:rect(0,0,0,0);overflow:hidden;white-space:nowrap;border:0}[hidden]{display:none!important}
@media(min-width:600px){.shell{border-left:1px solid #ffffff15;border-right:1px solid #ffffff15;box-shadow:0 0 80px #0007}}
@media(max-height:650px){.welcome{grid-template-rows:26px auto 40px 22px minmax(0,1fr) 32px 24px;gap:6px}
.welcome:has(#network-note[hidden]){grid-template-rows:26px auto 40px 22px minmax(0,1fr) 32px;gap:6px}.welcome-heading h1{font-size:20px}.visibility label{height:36px}.room-card{padding:5px 8px}.room-card p{font-size:10px}.pagination button{min-height:32px}.game{grid-template-rows:22px minmax(96px,1fr) 26px auto 104px 42px 18px;gap:3px}.hand{grid-template-rows:repeat(2,50px)}.hand .tile{height:50px;min-height:50px}.actions>button{min-height:42px;font-size:11px}.table{padding:5px;gap:3px}.opponent{padding:4px}.table-center h2{font-size:18px}.table-center p{font-size:10px}.lobby{gap:7px}.seat-card{padding:10px}.hand-help{font-size:10px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.table{position:relative;grid-template-rows:auto minmax(30px,1fr) auto}.discards{padding-right:22px}.table-details{position:absolute;bottom:3px;right:3px;width:22px;height:22px;font-size:0}.table-details::after{content:'•••';font-size:10px}#last-discard .tile{width:28px;height:36px}.opponent p{overflow:hidden;text-overflow:ellipsis}
.table-center>div:first-child{min-width:0;max-width:calc(100% - 38px)}.table-center h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}dialog h3,dialog p{overflow-wrap:anywhere}
.game-stats{grid-row:1}.game>.table{grid-row:2}.hand-heading{grid-row:3}.my-melds{grid-row:4}.hand{grid-row:5}.actions{grid-row:6}.hand-help{grid-row:7}
.hand .tile:hover:not(:disabled){background:linear-gradient(#fffdf1,#eee6c9)}.hand .tile.selected:hover:not(:disabled){background:#fff5cc}
.tile{background:linear-gradient(112deg,#fffef6 0%,#f8f4e7 57%,#e8e2d2 100%);border-color:#e7dfcb;border-bottom-color:#c6bda4;box-shadow:inset 1px 1px 0 #fff,inset -1px 0 0 #d9d0ba,0 2px 2px #001b2445;border-radius:5px}
.hand .tile:hover:not(:disabled),.hand .tile.selected:hover:not(:disabled),.hand .tile.selected{background:linear-gradient(112deg,#fffef6 0%,#f8f4e7 57%,#e8e2d2 100%)}
.hand .tile.selected{outline:1px solid #e8c67e;box-shadow:inset 1px 1px 0 #fff,0 0 0 2px #e8c67e50,0 3px 4px #001b2460;transform:translateY(-2px)}
.river-table{grid-template-rows:36px minmax(0,1fr) 24px;gap:4px}.river-table .opponents{display:none}.river-table .table-center{grid-row:1;justify-content:space-between;text-align:left;padding:0 3px}.river-table .table-center h2{font-size:17px}.river-table .table-center p{margin-top:1px}.river-table .discards{grid-row:2;display:grid;grid-template-rows:repeat(4,minmax(0,1fr));grid-template-columns:1fr;gap:0;padding:0;min-height:0}.river-row{display:grid;grid-template-columns:64px minmax(0,1fr);gap:6px;align-items:center;min-height:0;border-top:1px solid #ffffff20;padding:2px 0}.river-owner{min-width:0}.river-owner h3{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.river-owner span,.river-owner small{display:block;font-size:9px;line-height:1.35;color:#c9d9c8}.river-row.active .river-owner h3{color:var(--gold)}.river-tiles{display:grid;gap:2px;align-content:center;min-width:0;min-height:0}.discard-entry{display:flex;flex-direction:column;align-items:center;width:100%;min-width:0;height:38px}.discard-entry>.tile{width:24px;height:30px;border-bottom-width:2px;border-radius:3px;max-width:100%}.discard-entry>small{font-size:8px;line-height:8px;color:#dae4d7}.discard-entry.latest>.tile{outline:2px solid var(--gold);outline-offset:0}.discard-entry.claimed>.tile{opacity:.48;position:relative}.discard-entry.claimed>.tile:after{content:'';position:absolute;width:110%;height:1px;background:#d95d43;transform:rotate(-45deg)}.discard-entry.claimed>small{color:#ffc9b3}.river-empty{grid-column:1/-1;font-size:10px;color:#9fbbab}.river-navigation{grid-row:3;display:flex;align-items:center;justify-content:flex-end;gap:4px;font-size:9px;min-width:0;padding-right:23px}.river-navigation button{min-height:24px;height:24px;padding:0 5px;font-size:12px;min-width:23px}.river-navigation #river-note{margin-right:auto;font-size:8px}.river-navigation #river-page{white-space:nowrap}.river-table .table-details{bottom:5px}.river-table #last-discard .tile{height:31px;width:24px}
@media(max-height:650px){.river-table{grid-template-rows:32px minmax(0,1fr) 24px;gap:3px}.river-row{grid-template-columns:64px minmax(0,1fr);padding:1px 0}.discard-entry{height:31px}.discard-entry>.tile{width:20px;height:24px}.discard-entry>small{font-size:7px;line-height:7px}.river-owner h3{font-size:10px}.river-owner span,.river-owner small{font-size:8px}.river-navigation{gap:2px}.river-navigation #river-note{font-size:7px}.river-table .table-center h2{font-size:15px}}
#last-discard.claimed-preview{opacity:.48;position:relative}#last-discard.claimed-preview:after{content:'↗';position:absolute;right:-2px;bottom:-2px;color:#ffc9b3;font-size:12px}.full-seat .discard-entry{width:30px;height:44px;margin:2px}.full-seat .discard-entry .tile{margin:0;height:34px;width:25px}
.shell{--hand-tile-height:clamp(56px,calc((100vw - 40px)/7/.73),82px)}
button{touch-action:manipulation}
.game{grid-template-rows:24px minmax(96px,1fr) 36px auto calc(var(--hand-tile-height)*2 + 4px) 44px 20px}
.hand{grid-template-rows:repeat(2,var(--hand-tile-height))}.hand .tile{height:var(--hand-tile-height);min-height:var(--hand-tile-height)}
.hand-heading button{min-height:32px;height:32px;white-space:nowrap}.hand-heading #sort-hand-direct{font-size:11px;padding:3px 7px}
.meld-group .tile{width:17px;height:24px}.river-table #last-discard .tile{width:23px;height:32px}
.discard-entry>.tile{width:23px;height:32px}.discard-entry{height:40px}.full-seat .discard-entry .tile{width:25px;height:35px}
@media(max-height:650px){.game{grid-template-rows:22px minmax(96px,1fr) 32px auto calc(var(--hand-tile-height)*2 + 4px) 42px 16px;gap:3px}.river-table{grid-template-rows:30px minmax(0,1fr) 24px}.river-table .table-center p{line-height:1.2}.discard-entry{height:33px}.discard-entry>.tile{width:19px;height:26px}.hand-heading{gap:5px}.hand-heading button{font-size:10px}.hand-heading #sort-hand-direct{font-size:10px}.hand-help{font-size:9px}}
#claim-panel{width:calc(100% - 16px);max-width:430px;height:min(580px,calc(100dvh - 16px));max-height:calc(100dvh - 16px);padding:12px;background:#123c32;border:2px solid #b39b65;overflow:hidden}
#claim-panel[open]{display:grid;grid-template-rows:34px 90px 44px minmax(0,1fr) 30px 48px;gap:8px}#claim-panel::backdrop{background:#001913db}
.claim-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.claim-panel-head h2{font-size:18px}.claim-panel-head strong{font-size:16px;color:#ffe2a2;white-space:nowrap;padding:5px 7px;background:#ffffff10;border-radius:7px}
.claim-discard{display:flex;align-items:center;gap:14px;min-width:0}.claim-discard>div:last-child{min-width:0}.claim-discard p{margin:0!important;font-size:12px!important;line-height:1.35!important}.claim-discard strong{display:block;font-size:17px;margin:5px 0;overflow-wrap:anywhere}#claim-source{max-height:34px;overflow:auto;overflow-wrap:anywhere}#claim-incoming .tile{width:60px;height:84px;margin:0;border-bottom-width:5px}
#claim-types{display:flex;gap:5px}#claim-types button{flex:1;min-width:0;min-height:44px;padding:4px 3px;font-size:12px;line-height:1.2}#claim-types button[aria-pressed=true]{background:#e4bd72;color:#183b2e;border-color:#e4bd72}
#claim-combinations{min-height:0;overflow:auto;display:flex;flex-direction:column;gap:7px;padding:3px}.claim-empty{font-size:15px!important;line-height:1.6!important;margin:auto 5px!important;text-align:center;color:#c8dbca}
.claim-combination{flex:none;display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;min-height:78px;padding:6px;background:#082b24;border:1px solid #728c76}.claim-combination[aria-pressed=true]{outline:2px solid #e4bd72;outline-offset:-2px;background:#214d3d}.combination-label{font-size:12px;max-width:65px;text-align:left}.combination-tiles{display:flex;gap:3px;flex-wrap:wrap;justify-content:center;min-width:0}.combination-tiles .tile{width:43px;height:60px;margin:0;border-bottom-width:3px;flex-shrink:0}.combination-tiles .incoming-tile{outline:2px solid #d7ad58;outline-offset:-1px}
.claim-combination.winning{display:block;text-align:left}.winning .combination-label{display:block;margin-bottom:7px}.winning .combination-tiles{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.winning .tile{width:100%;height:auto;aspect-ratio:.72;min-height:0}
#claim-hint{font-size:11px!important;line-height:1.3!important;margin:0!important;color:#cfddcb;align-self:center}.claim-panel-actions{display:grid;grid-template-columns:78px minmax(0,1fr);gap:8px}.claim-panel-actions button{min-height:48px;font-size:13px;padding:5px}#claim-panel button:focus-visible{outline:3px solid #ffdd8d;outline-offset:1px}
@media(max-width:350px){#claim-panel{padding:10px}.combination-tiles .tile{width:39px;height:55px}.combination-label{font-size:11px;max-width:57px}#claim-types button{font-size:11px}.claim-panel-head h2{font-size:17px}.claim-panel-actions button{font-size:12px}}
#claim-panel[open]{gap:6px}#claim-combinations{gap:6px}.combination-tiles .tile{width:48px;height:67px}@media(max-width:350px){.combination-tiles .tile{width:44px;height:62px}}.winning .tile{width:100%;height:auto}
.tile,.hand .tile:hover:not(:disabled),.hand .tile.selected:hover:not(:disabled),.hand .tile.selected{background:linear-gradient(115deg,#fff 0%,#fcfcfc 60%,#eceff0 100%);border-color:#dfe3e4;border-bottom-color:#b9c2c5;box-shadow:inset 1px 1px 0 #fff,inset -1px 0 0 #dce1e3,0 2px 2px #001b2445}
.tile.concealed{background:#799b7b;border-color:#bfd0aa}.hand .tile.selected{outline:1px solid #e8c67e;box-shadow:inset 1px 1px 0 #fff,0 0 0 2px #e8c67e50,0 3px 4px #001b2460}

/* Keep touch feedback on the card border, preserving white tile previews. */
#claim-panel button{-webkit-tap-highlight-color:transparent}

@media(max-height:650px){.discard-entry{height:28px}.discard-entry>.tile{width:15px;height:21px}}
/* Compact, non-modal claim sheet is bounded by the central table. */
#claim-panel{position:absolute;inset:0;margin:0;width:100%;max-width:none;height:100%;max-height:100%;padding:5px;border:1px solid #b39b65;border-radius:8px;z-index:3;box-shadow:none}
#claim-panel[open]{display:grid;grid-template-columns: minmax(0,1fr) auto;grid-template-rows:40px 36px minmax(48px,1fr) 36px;gap:3px}
.claim-panel-head{grid-column:1;grid-row:1;gap:4px;justify-content:flex-start}.claim-panel-head h2{font-size:14px}.claim-panel-head strong{font-size:18px;padding:0 4px;background:none}
.claim-discard{grid-column:2;grid-row:1;gap:5px}.claim-discard strong{font-size:12px;margin:0}.claim-discard p{display:none}#claim-incoming .tile{width:25px;height:35px;border-bottom-width:2px}
#claim-types{grid-column:1/-1;grid-row:2;gap:3px}#claim-types button{min-height:36px;font-size:12px;padding:2px}
#claim-combinations{grid-column:1/-1;grid-row:3;display:flex;flex-direction:row;overflow:hidden;gap:3px;padding:2px}
.claim-combination{flex:1;min-width:0;width:auto;min-height:0;padding:2px;display:flex;flex-direction:column;justify-content:center;gap:2px}.combination-label{font-size:12px;max-width:none;text-align:center;line-height:14px}.combination-tiles{gap:2px;flex-wrap:nowrap}.combination-tiles .tile{width:25px;height:35px;border-bottom-width:2px}
.claim-combination:only-child{flex-direction:row;gap:8px}.claim-combination:only-child .tile{width:29px;height:40px}.claim-combination.winning{display:flex;flex-direction:row}.winning .combination-label{display:none}.winning .combination-tiles{display:flex;flex-wrap:wrap;max-width:250px;gap:2px}.claim-combination.winning .tile{width:20px;height:28px}
#claim-hint{display:none}.claim-panel-actions{grid-column:1/-1;grid-row:4;grid-template-columns:70px minmax(0,1fr);gap:4px}.claim-panel-actions button{min-height:36px;padding:2px;font-size:12px}
.table:has(#claim-panel[open])>.table-center,.table:has(#claim-panel[open])>.discards,.table:has(#claim-panel[open])>.river-navigation,.table:has(#claim-panel[open])>.table-details{visibility:hidden}
.game-stats{position:relative}#timer{display:flex;align-items:center;gap:4px;white-space:nowrap}#timer small{font-size:10px}#timer b{font-size:19px;line-height:1;font-variant-numeric:tabular-nums}#timer.own-turn{background:#ffe2a2;color:#142e27;border-radius:5px;padding:2px 5px;z-index:1}#timer.own-turn b{font-size:32px}#timer.own-turn small{font-size:11px}
@media(min-height:651px){#claim-panel{height:230px;top:50%;transform:translateY(-50%)}.combination-tiles .tile{width:32px;height:45px}.claim-combination:only-child .tile{width:36px;height:50px}}
.my-melds{flex-wrap:wrap;gap:2px}.bonus-board{flex-basis:100%;display:flex;align-items:center;gap:3px;min-width:0;height:36px}.bonus-caption{font-size:10px;color:#e4bd72;margin-right:1px}.bonus-owner{display:flex;align-items:center;gap:1px;min-width:0}.bonus-owner>b{font-size:10px;padding:0 1px}.bonus-board .tile{width:23px;height:32px;min-width:0;border-bottom-width:2px;border-radius:3px;flex-shrink:0}.bonus-detail .tile{width:39px;height:54px;margin:3px}
@media(max-height:650px){#claim-panel[open]{grid-template-rows:34px 32px minmax(42px,1fr) 34px;gap:2px}.claim-panel-actions button{min-height:34px}#claim-types button{min-height:32px}.combination-tiles .tile{width:22px;height:31px}.claim-combination:only-child .tile{width:25px;height:35px}.claim-combination.winning .tile{width:17px;height:24px}.winning .combination-tiles{max-width:200px}.bonus-board{height:34px}}
/* Rivers share the remaining table height with the public bonus shelf. */
.river-tiles{height:100%;grid-auto-rows:minmax(0,1fr);align-content:center}.river-row{align-items:stretch}.river-owner{align-self:center}.river-tiles .discard-entry{height:100%;max-height:40px;min-height:0;align-self:center}.river-tiles .discard-entry>.tile{height:calc(100% - 8px);max-height:32px;min-height:0;width:auto;aspect-ratio:.72;flex-shrink:1}.river-tiles .discard-entry>small{flex-shrink:0}
@media(max-height:650px){.river-owner span{display:none}.river-owner h3{line-height:1.1}.river-owner small{line-height:1.2}.river-tiles .discard-entry{max-height:28px}.river-tiles .discard-entry>.tile{height:calc(100% - 7px);max-height:21px}}
/* Portrait prototype; no rotation requirement. */



/* Shared visual language: dark teal canvas, warm primary actions, clear sections. */
:root{font-family:Arial,"Segoe UI",sans-serif;--gold:#efd08a;--muted:#b4cec5;--line:#bfd9ca26}button{border-radius:6px}header em{font-weight:800;letter-spacing:.1em}.welcome-heading h1{font-family:Georgia,serif;font-weight:normal}.welcome #entry,.welcome #join-form{border-radius:8px}.visibility label{background:#ffffff06}.room-card{background:#153e34;border-color:#507768}.seat-card{background:#143e33}.seat-card.mine{background:#24513f;border-color:#e4c483}.lobby-actions .primary{box-shadow:0 2px 0 #0003}dialog{border:1px solid #809985;background:#123b30;border-radius:10px}dialog h2{font-size:18px}.dialog-head{gap:8px}.dialog-head button{min-width:40px}#result{padding:8px 0}.voice-explainer{font-size:12px;color:#bad1c6;line-height:1.5}
#chat-dialog{width:min(460px,calc(100vw - 16px));height:min(420px,calc(min(var(--visual-height,100dvh),100dvh) - 12px));max-height:calc(min(var(--visual-height,100dvh),100dvh) - 12px);padding:10px;top:var(--visual-top,0px);bottom:auto;margin-top:6px;overflow:hidden}#chat-dialog[open]{display:grid;grid-template-rows:auto minmax(0,1fr) 40px auto;gap:7px}#chat-dialog .dialog-head{margin:0;align-items:center}#chat-dialog small{font-size:10px;color:#c9dcd1}#chat-messages{overflow:auto;overscroll-behavior:contain;min-height:0;padding:2px 4px}.chat-message{padding:7px 8px;margin-bottom:6px;border-radius:7px;background:#ffffff0a}.chat-message b{font-size:11px;color:#efd08a}.chat-message p{font-size:14px;line-height:1.4;margin:3px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}.chat-empty{font-size:13px;color:#b4cec5}#chat-form{display:grid;grid-template-columns:minmax(0,1fr) 62px;gap:5px}#chat-input{font-size:16px}#chat-feedback{font-size:10px;line-height:1.2;margin:0;color:#c9dcd1}

#chat-dialog .dialog-head button{width:auto;min-width:56px;flex-shrink:0;font-size:12px;line-height:1.2;padding:4px 8px}#chat-form{min-height:0}#chat-input{margin:0;height:100%;min-height:0;padding:6px 8px}#chat-form button{height:100%;min-height:0;padding:4px;font-size:12px}

:root{--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}


/* Portrait-first v0.4 preview, safe-area aware across entry, lobby and game. */
body{padding:var(--safe-top,0px) var(--safe-right,0px) var(--safe-bottom,0px) var(--safe-left,0px)}
.shell{width:100%;max-width:460px;height:calc(100dvh - var(--safe-top,0px) - var(--safe-bottom,0px));--hand-tile-height:clamp(56px,calc((min(100vw,460px) - 40px - var(--safe-left,0px) - var(--safe-right,0px))/7/.73),82px)}
.welcome-heading h1{font-size:20px;line-height:1.05}.welcome-heading>span{font-size:10px;min-width:68px}.welcome{grid-template-rows:minmax(34px,auto) auto 42px 24px minmax(70px,1fr) 36px 28px}
.welcome:has(#network-note[hidden]){grid-template-rows:minmax(34px,auto) auto 42px 24px minmax(70px,1fr) 36px}.welcome #entry{padding:8px;border:1px solid #ffffff22;background:#ffffff05}.visibility label{min-width:0;font-size:12px}.visibility small{font-size:9px}.welcome .create-row{grid-template-columns:minmax(0,1fr) 92px}.welcome #join-form{grid-template-columns:minmax(0,1fr) 92px}.local-note{line-height:1.25}
.room-bar button{padding:3px 6px;font-size:11px}.room-bar>div{gap:3px}.room-bar>span{font-size:10px}.hand-heading{font-size:12px}.actions>button{font-size:13px;border-radius:8px}.hand .tile{border-radius:6px}.hand{grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(2,var(--hand-tile-height))}
.game:has(.hand:not(:has(.tile:nth-child(8)))){grid-template-rows:24px minmax(96px,1fr) 36px auto var(--hand-tile-height) 44px 20px}.hand:not(:has(.tile:nth-child(8))){grid-template-rows:var(--hand-tile-height)}
#chat-dialog{width:min(440px,calc(100vw - var(--safe-left,0px) - var(--safe-right,0px) - 16px));left:var(--safe-left,0px);right:var(--safe-right,0px)}
.dialog-head{position:sticky;top:-10px;background:#123b30;z-index:1;padding:3px 0}.dialog-head button{flex-shrink:0}dialog:not(#claim-panel):not(#chat-dialog){max-height:calc(min(var(--visual-height,100dvh),100dvh) - 16px);max-width:calc(100vw - 16px)}
@media(max-height:650px){.shell{grid-template-rows:34px minmax(0,1fr)}header{font-size:11px;padding:2px 8px}.welcome{gap:5px;grid-template-rows:32px auto 40px 22px minmax(56px,1fr) 30px 24px}
.welcome:has(#network-note[hidden]){gap:5px;grid-template-rows:32px auto 40px 22px minmax(56px,1fr) 30px}.welcome #entry{padding:6px}.welcome-heading h1{font-size:18px}.visibility label{height:34px}.welcome .pagination button{height:30px;min-height:30px}.room{grid-template-rows:34px minmax(0,1fr);gap:4px}.game:has(.hand:not(:has(.tile:nth-child(8)))){grid-template-rows:22px minmax(96px,1fr) 32px auto var(--hand-tile-height) 42px 16px}.actions>button{font-size:12px}}
@media(max-height:600px){#claim-panel{padding:3px}#claim-panel[open]{grid-template-rows:28px 30px minmax(42px,1fr) 32px;gap:2px}.claim-panel-head h2{font-size:13px}.claim-panel-head strong{font-size:17px}.claim-discard strong{font-size:11px}#claim-incoming .tile{width:19px;height:27px}#claim-types button{min-height:30px}.claim-panel-actions button{min-height:32px}.claim-combination{padding:1px}.combination-label{font-size:11px;line-height:12px}.combination-tiles .tile{width:20px;height:28px}.claim-combination:only-child .tile{width:25px;height:35px}.claim-combination.winning .tile{width:17px;height:24px}}
@media(max-height:450px){.shell:has(#welcome:not([hidden])),.shell:has(#lobby:not([hidden])){height:auto;min-height:calc(100dvh - var(--safe-top,0px) - var(--safe-bottom,0px))}.welcome{height:auto;min-height:450px}.lobby{min-height:420px}}
/* Light Mahjong palette: jade felt, cream surfaces, white tile bodies. */
:root{color-scheme:light;background:#e8eee5;color:#173e30;--gold:#755a1c;--muted:#4d6858;--line:#b9c8b5;--panel:#faf8ed;--tile:#fff;font-family:system-ui,-apple-system,'Segoe UI',Arial,sans-serif}
body{background:radial-gradient(ellipse at 50% 0,#f9f8ed,#e1eadd)}.shell{background:linear-gradient(180deg,#fffdf4,#eaf2e5);box-shadow:0 0 28px #3c604c12}header{background:#faf8ec;border-bottom:1px solid #cbbd8f;color:#234b38}header em{color:#27694e}#connection{color:#4d6858}button{background:#f8f8ef;color:#244b38;border-color:#b5c5ad;font-weight:650}button:hover:not(:disabled){background:#e2ecd9}button.primary{background:#28674f;border-color:#215841;color:#fffdf5}button:disabled{opacity:.58}button:focus-visible,input:focus-visible{outline-color:#927020}input{background:#fffef9;border-color:#a5bca9;color:#173e30}input::placeholder{color:#607567}
.welcome-heading h1,.lobby-heading h1{color:#234f3a;font-family:Georgia,serif}.welcome-heading>span,.local-note,.lobby-note{color:#526b59}.welcome #entry{background:#faf8ed;border-color:#c8cfb7}.visibility label{background:#fffdf4;border-color:#b8c8b1}.visibility label:has(input:checked){background:#dcead5;border-color:#78976c}.visibility small{color:#516952}.directory-empty{color:#526b59;border-color:#b5c6ae;background:#f3f6eb}.room-card{background:#fffdf3;border-color:#c7ceaf}.room-card p{color:#526b59}.text-button{color:#476c41}.pagination{color:#365641}
.room-bar{border-color:#c2ceb8}.room-bar small{color:#635221}.seat-card{background:#faf9ee;border-color:#bdcdb4}.seat-card.mine{background:#e1ecd7;border-color:#a49353}.seat-number{color:#7b6024}.seat-card p{color:#536c59}.game-stats{color:#4d6858}#timer{color:#745818}#timer.own-turn{background:#fae9ad;border:1px solid #c6aa57;color:#284532}.hand-heading>span{color:#755a1c}.hand-help{color:#476951}
.table{background:radial-gradient(ellipse at 50% 40%,#d4e6d9,#b9d4c1);border-color:#85aa8c;box-shadow:inset 0 1px 3px #67836a12}.table-center h2{color:#1d4b35}.table-center p{color:#3f624c}.river-row{border-top-color:#789d803d}.river-owner span,.river-owner small{color:#3f624c}.river-owner h3{color:#204b36}.river-row.active .river-owner h3{color:#6b5113}.river-empty{color:#496c52}.discard-entry>small{color:#31513a}.discard-entry.claimed>.tile{opacity:.65}.discard-entry.claimed>small{color:#874032}.river-navigation,.river-navigation #river-note,.table-details{color:#385e45}.river-navigation button{background:#e0eddc;border-color:#9ab594;color:#2e593c}.bonus-caption{color:#745818}.bonus-owner>b{color:#37573e}
#claim-panel{background:#faf8ec;border-color:#a89c62;box-shadow:0 1px 5px #36523920}.claim-panel-head h2{color:#244c37}.claim-panel-head strong{color:#775416}.claim-discard strong,.claim-discard p{color:#365b40}#claim-types button{background:#edf3e3;border-color:#b5c7a8;color:#294d35}#claim-types button[aria-pressed=true]{background:#2c6b50;border-color:#245940;color:#fffdf6}.claim-combination{background:#f1f4e7;border-color:#b4c6a7;color:#26472f}.claim-combination[aria-pressed=true]{background:#e3ebd2;outline-color:#9d8033}.claim-empty,#claim-hint{color:#4d6850}#claim-panel button:focus-visible{outline-color:#876716}
dialog{background:#fffdf3;color:#1e4432;border-color:#a8b79a;box-shadow:0 10px 30px #2a44362b}dialog::backdrop{background:#234c3555}.dialog-head{background:#fffdf3}.voice-explainer{color:#4d6858}#chat-dialog small,#chat-feedback,.chat-empty{color:#4c6754}.chat-message{background:#e8f0df;border:1px solid #cfddc2}.chat-message b{color:#426a3e}.chat-message p{color:#193f2c}.notice{background:#fff5cf;color:#55451e;border-color:#c7ad6b}
/* Preserve the existing white Rouge tile surface through every button state. */
.tile,.hand .tile:hover:not(:disabled),.hand .tile.selected:hover:not(:disabled),.hand .tile.selected{background:linear-gradient(115deg,#fff 0%,#fcfcfc 60%,#eceff0 100%);border-color:#c7d2c7;border-bottom-color:#a7b5aa;box-shadow:inset 1px 1px 0 #fff,inset -1px 0 0 #dce1e3,0 2px 2px #294c302c}.tile.concealed{background:#80a68a;border-color:#b4ceb8}
.table-center p,.river-owner span,.river-owner small,.river-empty{color:#31553d}

/* One accessible communication/sort row beside the hand. */
#lobby-comms{display:inline-flex;gap:3px}.hand-heading{display:grid;grid-template-columns:1fr auto auto;grid-template-rows:36px 40px 32px;gap:3px 6px;height:79px}.hand-heading #hand-label{grid-column:1;grid-row:1}.hand-heading #my-score{grid-column:2;grid-row:1}.hand-heading #arrange-open{grid-column:3;grid-row:1;height:24px;min-height:24px;padding:1px 8px}.hand-toolbar{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:5px;min-width:0}.hand-heading .hand-toolbar button{height:40px;min-height:40px;padding:3px;font-size:12px;white-space:nowrap}.hand-toolbar #sort-hand-direct{font-size:12px;padding:3px}.hand-toolbar #chat-open:before{content:'▤ ';}.hand-toolbar #voice-open:before{content:'♩ ';}.hand-toolbar #sort-hand-direct:before{content:'↕ ';}.game,.game:has(.hand:not(:has(.tile:nth-child(8)))){grid-template-rows:24px minmax(96px,1fr) 79px auto calc(var(--hand-tile-height)*2 + 4px) 44px 20px}.game:has(.hand:not(:has(.tile:nth-child(8)))){grid-template-rows:24px minmax(96px,1fr) 79px auto var(--hand-tile-height) 44px 20px}@media(max-height:650px){.game{grid-template-rows:22px minmax(96px,1fr) 79px auto calc(var(--hand-tile-height)*2 + 4px) 42px 16px}.game:has(.hand:not(:has(.tile:nth-child(8)))){grid-template-rows:22px minmax(96px,1fr) 79px auto var(--hand-tile-height) 42px 16px}}

#game{grid-template-rows:24px minmax(96px,1fr) 79px auto calc(var(--hand-tile-height)*2 + 4px) 44px 20px}#game:has(.hand:not(:has(.tile:nth-child(8)))){grid-template-rows:24px minmax(96px,1fr) 79px auto var(--hand-tile-height) 44px 20px}@media(max-height:650px){#game{grid-template-rows:22px minmax(96px,1fr) 79px auto calc(var(--hand-tile-height)*2 + 4px) 42px 16px}#game:has(.hand:not(:has(.tile:nth-child(8)))){grid-template-rows:22px minmax(96px,1fr) 79px auto var(--hand-tile-height) 42px 16px}}
.hand .tile.drawn{border:3px solid #007f85;border-bottom-width:4px;box-shadow:inset 0 0 0 1px white}.hand .tile.drawn.selected{outline:3px solid #b77900;outline-offset:1px}.result-hand{border-top:1px solid #bccbb6;padding:8px 0}.result-hand .tiles{display:flex;flex-wrap:wrap;gap:2px}.result-hand .tile{width:32px;height:45px;margin:0}.result-hand .winning-tile{outline:3px solid #007f85;outline-offset:-2px}.result-hand h3{margin:4px 0}.result-hand .result-label{font-size:11px;margin:5px 0}.result-hand.winner{background:#e9f3e2}.result-hand .meld-group{margin:3px 4px 3px 0}#result-dialog{scrollbar-gutter:stable}

.river-tiles{contain:size;overflow:hidden;grid-template-rows:repeat(var(--river-rows,1),minmax(0,1fr))}.river-tiles .discard-entry{min-height:0;overflow:hidden}.river-tiles .discard-entry>.tile{flex:1 1 0;min-height:0;max-height:calc(100% - 7px);height:0}.river-tiles .discard-entry>.tile svg{min-height:0}

.river-row{grid-template-rows:minmax(0,1fr)}.river-tiles{height:auto;align-self:stretch}.river-owner{min-height:0;overflow:hidden}

.claim-panel-actions{grid-template-columns:1fr}.claim-panel-actions #claim-skip{width:100%}.claim-empty{font-size:12px;line-height:1.35;padding:5px}

/* Single-row, labelled claim actions; colour is supplementary. */
#claim-panel[open]{grid-template-rows:34px 40px minmax(42px,1fr)}#claim-types{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:3px;min-width:0}#claim-types button{min-width:0;min-height:40px;height:40px;font-size:11px;white-space:nowrap;padding:2px 1px;line-height:1.2}#claim-types #claim-skip{background:#edf0ec;color:#354239;border-color:#8c9a8c}#claim-types [data-kind=chow]{background:#dceedd;color:#174e2a;border-color:#6a9b76}#claim-types [data-kind=pung]{background:#dceafa;color:#164677;border-color:#7399bc}#claim-types [data-kind=kong]{background:#eee2f5;color:#573172;border-color:#a286b6}#claim-types [data-kind=win]{background:#fff0bf;color:#694800;border-color:#b3943e}#claim-types button[aria-pressed=true]{box-shadow:inset 0 0 0 2px currentColor}#claim-panel button:focus-visible{outline:3px solid #153f3e;outline-offset:1px}@media(max-height:600px){#claim-panel[open]{grid-template-rows:28px 40px minmax(42px,1fr)}}

.hand-heading{grid-template-columns:1fr auto}.hand-heading #my-score{margin-left:0}

.hand-heading #timer{grid-column:1/-1;grid-row:3;justify-content:flex-end;min-height:28px;margin:0;width:100%;font-size:14px}.hand-heading #timer b{font-size:32px}.hand-heading #timer.own-turn b{font-size:32px}.hand-heading #timer small{font-size:12px}

#turn-status{grid-column:1/-1;grid-row:1;display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0}#turn-status h2{font-size:14px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#turn-status p{font-size:10px;line-height:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;color:#31553d}.game-stats #hand-label,.game-stats #my-score{font-size:10px}.table-center{justify-content:flex-end}
.river-owner{align-self:stretch;max-height:100%;overflow:hidden}.river-owner h3{margin:0;line-height:1.1}

.river-table{grid-template-rows:minmax(0,1fr) 24px}.river-table .discards{grid-row:1}.river-table .river-navigation{grid-row:2}#turn-status .turn-copy{min-width:0;flex:1}#turn-status h2{line-height:18px}#turn-status p{line-height:12px}.turn-preview{display:flex;align-items:center;gap:5px;flex-shrink:0}.turn-preview:has(#last-discard:empty){display:none}.turn-preview small{font-size:9px;max-width:43px;line-height:11px;color:#31553d}#turn-status #last-discard .tile{width:25px;height:35px;margin:0}

/* Large river faces: choose a seat; history remains paginated. */
.hand-heading #timer{grid-row:2}.hand-toolbar{grid-row:3}.hand-heading{grid-template-rows:36px 32px 40px}.hand-help{display:none}#game{grid-template-rows:24px minmax(126px,1fr) 79px auto calc(var(--hand-tile-height)*2 + 4px) 44px 0}#game:has(.hand:not(:has(.tile:nth-child(8)))){grid-template-rows:24px minmax(126px,1fr) 79px auto var(--hand-tile-height) 44px 0}@media(max-height:650px){#game{grid-template-rows:22px minmax(126px,1fr) 79px auto calc(var(--hand-tile-height)*2 + 4px) 42px 0}#game:has(.hand:not(:has(.tile:nth-child(8)))){grid-template-rows:22px minmax(126px,1fr) 79px auto var(--hand-tile-height) 42px 0}}
.river-table .discards{grid-template-rows:24px minmax(0,1fr);gap:3px}.river-seat-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px}.river-seat-tabs button{height:24px;min-height:24px;font-size:10px;padding:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.river-seat-tabs button[aria-pressed=true]{background:#245940;color:white}.river-row{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr);padding:0;border:0}.river-row .river-owner{display:none}.river-tiles{align-self:center;contain:none;height:calc(var(--hand-tile-height) + 9px);grid-template-rows:1fr}.river-tiles .discard-entry{height:calc(var(--hand-tile-height) + 9px);max-height:none;overflow:visible}.river-tiles .discard-entry>.tile{flex:none;height:var(--hand-tile-height);max-height:none;width:calc(var(--hand-tile-height)*.72);aspect-ratio:.72}.river-tiles .discard-entry>small{line-height:9px;font-size:8px}.river-table .river-navigation{font-size:9px}

.hand-heading{grid-template-rows:36px 40px;height:79px}.hand-toolbar{grid-row:2;grid-template-columns:1.2fr 1fr 1.2fr 1fr;gap:3px}.hand-heading #timer{grid-column:auto;grid-row:auto;display:flex;justify-content:center;gap:2px;min-width:0;height:40px;font-size:10px;padding:1px}.hand-heading #timer b,.hand-heading #timer.own-turn b{font-size:27px}.hand-heading #timer small{font-size:9px}.hand-heading #timer small:last-child{display:none}.hand-toolbar #sort-hand-direct{font-size:12px}

.hand-heading #timer b,.hand-heading #timer.own-turn b{font-size:32px}#full-table .tile{width:40px;height:56px}#full-table .discard-entry{width:44px;height:68px}#full-table .discard-entry .tile{width:40px;height:56px}

/* Four seats together, fixed readable faces and paginated history. */
.river-table .discards{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:4px}.river-row{display:grid;grid-template-columns:1fr;grid-template-rows:14px minmax(0,1fr);gap:2px;border:1px solid #adc4ac;border-radius:4px;padding:2px;min-width:0}.river-row .river-owner{display:block;min-width:0;overflow:hidden}.river-owner h3{font-size:10px;line-height:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.river-owner span,.river-owner small{display:none}.river-tiles{--river-face:clamp(40px,calc(var(--hand-tile-height) - 16px),56px);height:calc(var(--river-face) + 9px);align-self:center;gap:2px}.river-tiles .discard-entry{height:calc(var(--river-face) + 9px)}.river-tiles .discard-entry>.tile{height:var(--river-face);width:calc(var(--river-face)*.72)}
.river-row{grid-template-rows:12px minmax(0,1fr);gap:1px;padding:1px}

/* Instructions precede larger action buttons; no empty choice row. */
#claim-panel[open]{height:132px;max-height:100%;top:0;transform:none;grid-template-rows:28px 40px 44px;gap:3px}#claim-hint{display:block;grid-column:1/-1;grid-row:2;font-size:11px!important;line-height:13px!important;margin:0!important;padding:1px 3px;color:#31553d;align-self:center}#claim-types{grid-row:3}#claim-types button{height:44px;min-height:44px;font-size:12px}.claim-empty{display:none}#claim-combinations{display:none}#claim-panel[open]:has(.claim-combination){height:205px;grid-template-rows:28px 30px 44px minmax(0,1fr)}#claim-panel:has(.claim-combination) #claim-combinations{display:flex;grid-row:4;min-height:0}
#game{grid-template-rows:24px minmax(164px,1fr) 79px auto calc(var(--hand-tile-height)*2 + 4px) 44px 0}#game:has(.hand:not(:has(.tile:nth-child(8)))){grid-template-rows:24px minmax(164px,1fr) 79px auto var(--hand-tile-height) 44px 0}@media(max-height:650px){#game{grid-template-rows:22px minmax(164px,1fr) 79px auto calc(var(--hand-tile-height)*2 + 4px) 42px 0}#game:has(.hand:not(:has(.tile:nth-child(8)))){grid-template-rows:22px minmax(164px,1fr) 79px auto var(--hand-tile-height) 42px 0}}
#game{gap:2px;grid-template-rows:24px minmax(176px,1fr) 79px auto calc(var(--hand-tile-height)*2 + 4px) 44px 0}#game:has(.hand:not(:has(.tile:nth-child(8)))){grid-template-rows:24px minmax(176px,1fr) 79px auto var(--hand-tile-height) 44px 0}@media(max-height:650px){#game{grid-template-rows:20px minmax(176px,1fr) 79px auto calc(var(--hand-tile-height)*2 + 4px) 42px 0}#game:has(.hand:not(:has(.tile:nth-child(8)))){grid-template-rows:20px minmax(176px,1fr) 79px auto var(--hand-tile-height) 42px 0}}

/* Four full-width player rows; maximize faces within each row. */
.river-table .discards{grid-template-columns:1fr;grid-template-rows:repeat(4,minmax(0,1fr));gap:2px}.river-row{grid-template-columns:48px minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:3px;padding:0;border:0;border-top:1px solid #adc4ac;border-radius:0}.river-row .river-owner{align-self:center;max-height:100%}.river-owner h3{white-space:normal;overflow-wrap:anywhere;font-size:9px;line-height:11px}.river-tiles{height:100%;align-self:stretch;min-height:0;contain:size}.river-tiles .discard-entry{height:100%;max-height:none;min-height:0;align-self:stretch}.river-tiles .discard-entry>.tile{height:calc(100% - 9px);max-height:56px;width:auto;aspect-ratio:.72;flex:none}.river-tiles .discard-entry>small{height:9px;line-height:9px}

.river-tiles .discard-entry{flex-direction:row;justify-content:center;gap:1px;align-items:center}.river-tiles .discard-entry>.tile{height:100%;max-height:56px}.river-tiles .discard-entry>small{width:19px;flex-shrink:0;height:auto;font-size:7px;line-height:9px;overflow-wrap:anywhere}

/* Sequence labels occupy a corner inside each face, never an extra column. */
.river-tiles{gap:2px;justify-items:start}.river-tiles .discard-entry{position:relative;width:max-content;max-width:100%;gap:0;justify-content:flex-start}.river-tiles .discard-entry>.tile{padding-bottom:6px}.river-tiles .discard-entry>small{position:absolute;right:1px;bottom:1px;width:auto;max-width:100%;height:8px;line-height:8px;font-size:6px;font-weight:700;padding:0 1px;border-radius:2px;background:#fffef2;color:#254333;pointer-events:none;white-space:nowrap;overflow-wrap:normal}.river-tiles .discard-entry.claimed>small{color:#7b301c;background:#fff1df}
.river-tiles .discard-entry{max-height:56px;align-self:center}

/* Centre claims within the board, with larger touch targets. */
#claim-panel[open]{top:50%;transform:translateY(-50%);height:144px;max-height:100%;grid-template-rows:28px 40px 52px}#claim-types button{height:52px;min-height:52px;font-size:13px}#claim-panel[open]:has(.claim-combination){height:215px;grid-template-rows:28px 30px 52px minmax(0,1fr)}

#match-mode{font:inherit;max-width:240px;height:30px;background:#fffdf3;color:#234b38}.fan-breakdown{padding:6px;border:1px solid #b9c8b5}.fan-breakdown p{font-size:12px;margin:3px 0}

#rule-preset{font:inherit;max-width:240px;height:30px;background:#fffdf3;color:#234b38}.lobby-note>label{display:block}.lobby-note select{max-width:calc(100% - 45px)}

.lobby{grid-template-rows:52px minmax(0,1fr) 44px 114px}.lobby-note{line-height:1.35}

/* Lobby refresh 0.6.1: scoped so the game table stays unchanged. */
.room:has(#lobby:not([hidden])) .room-bar{height:38px;border-bottom:1px solid #d3dcc9}.room:has(#lobby:not([hidden])) #room-label{font-size:13px;letter-spacing:.12em}.room:has(#lobby:not([hidden])) #visibility-label{background:#e1ebd8;border-radius:4px;padding:3px;font-size:8px}
#lobby{grid-template-rows:48px 108px 52px minmax(110px,1fr) 42px 16px;gap:7px;padding:6px 0;min-height:0}.lobby-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;text-align:left;align-items:center}.lobby-heading small{font-size:8px;letter-spacing:.16em;color:#6a816d}.lobby-heading h1{font:22px Georgia,serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lobby-heading a{font-size:10px;color:#315e47}.lobby-heading #lobby-status{grid-column:1/-1;text-align:left;font-size:10px;color:#617863;margin-top:2px}
#lobby .seat-grid{gap:6px}#lobby .seat-card{display:grid;grid-template-columns:30px minmax(0,1fr);grid-template-rows:1fr 1fr;column-gap:7px;padding:7px 8px;border-radius:9px;background:#fdfcf3;border:1px solid #c8d6bf;min-height:0;text-align:left}#lobby .seat-card.mine{background:#e3eddb;border-color:#75936e}#lobby .seat-number{grid-row:1/3;display:grid;place-items:center;background:white;border:1px solid #b8c7b1;border-bottom-width:3px;border-radius:4px;font:22px Georgia,serif;color:#33543d;width:29px;height:38px}#lobby .seat-card h3{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-self:end;margin:0}#lobby .seat-card p{font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-self:start;margin:2px 0 0;color:#54735b}
.lobby-settings{display:grid;grid-template-columns:1fr 1fr;gap:7px;background:#eaf0e1;border-radius:8px;padding:5px 7px}.lobby-settings label{font-size:9px;color:#54705c;min-width:0}.lobby-settings select{display:block;width:100%;max-width:100%!important;height:29px!important;border:0;border-radius:4px;padding:2px;background:#fffef7!important;font-size:11px!important;color:#234b38}
.lobby-chat{display:grid;grid-template-rows:25px minmax(25px,1fr) 38px 12px;gap:3px;min-height:0;border:1px solid #c3d1b9;border-radius:10px;background:#fffef7;padding:7px}.lobby-chat-heading{display:flex;align-items:center;gap:6px}.lobby-chat-heading h2{font-size:12px}.lobby-chat-heading>span{font-size:8px;color:#6d826b;margin-left:auto}#lobby-chat-new{font-size:9px;min-height:22px;padding:2px 5px;background:#deead3;color:#315f42}#lobby-chat-messages{overflow-y:auto;overscroll-behavior:contain;min-height:0;scrollbar-width:thin;padding:2px 3px;overflow-wrap:anywhere}#lobby-chat-messages .chat-message{padding:5px 7px;margin:0 0 5px;border-radius:7px;background:#eff3e9;border:0}#lobby-chat-messages .chat-message.own{background:#e2eedc}#lobby-chat-messages .chat-message b{font-size:9px;color:#52705a}#lobby-chat-messages .chat-message p{font-size:12px;line-height:1.35;margin:2px 0;white-space:pre-wrap;overflow-wrap:anywhere}.lobby-chat .chat-empty{display:grid;align-content:center;justify-items:center;gap:5px;height:100%;font-size:11px;color:#82927b;text-align:center}.lobby-chat .chat-empty strong{font-weight:500;color:#61785c}.lobby-chat .chat-empty span{font-size:9px}#lobby-chat-form{display:flex;gap:5px;min-width:0}#lobby-chat-input{min-width:0;font-size:16px;background:#fff;border:1px solid #c3ceb9;color:#234b38;padding:5px 8px}#lobby-chat-send{background:#2c644e;color:white;min-height:38px;padding:4px 11px}#lobby-chat-feedback{font-size:9px;line-height:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#587252;margin:0}.lobby-actions{gap:7px}#lobby .lobby-actions button{min-height:42px;font-size:12px}#lobby .lobby-note{font-size:9px;line-height:14px;margin:0}
@media(max-height:650px){#lobby{grid-template-rows:42px 98px 49px minmax(100px,1fr) 40px 14px;gap:5px}#lobby .lobby-actions button{min-height:40px}.lobby-heading h1{font-size:20px}}
@media(max-height:450px){.shell:has(#lobby:not([hidden])){height:var(--visual-height,100dvh);min-height:0}#lobby{grid-template-rows:1fr;gap:0;padding:0}#lobby>.lobby-heading,#lobby>#seats,#lobby>.lobby-settings,#lobby>.lobby-actions,#lobby>.lobby-note{display:none}.room:has(#lobby:not([hidden])){grid-template-rows:35px minmax(0,1fr)}.lobby-chat{min-height:0} }

.shell:has(#lobby:not([hidden])){height:var(--visual-height,100dvh)}.shell.lobby-keyboard:has(#lobby:not([hidden])){min-height:0}.shell.lobby-keyboard #lobby{grid-template-rows:1fr;gap:0;padding:0}.shell.lobby-keyboard #lobby>.lobby-heading,.shell.lobby-keyboard #lobby>#seats,.shell.lobby-keyboard #lobby>.lobby-settings,.shell.lobby-keyboard #lobby>.lobby-actions,.shell.lobby-keyboard #lobby>.lobby-note{display:none}.shell.lobby-keyboard .room:has(#lobby:not([hidden])){grid-template-rows:35px minmax(0,1fr)}

#lobby{grid-template-rows:54px 108px 52px minmax(110px,1fr) 42px 16px}.lobby-heading{grid-template-rows:36px 14px}.lobby-heading #lobby-status{line-height:14px;margin:0}#lobby .seat-card p{font-size:9px}@media(max-height:650px){#lobby{grid-template-rows:52px 98px 49px minmax(100px,1fr) 40px 14px}.lobby-heading{grid-template-rows:34px 14px}}

/* 0.6.2: visible lobby voice and unambiguous physical-tile selection. */
.room:has(#lobby:not([hidden])) .room-bar button{padding:3px 5px;font-size:10px;min-height:32px}
.room:has(#lobby:not([hidden])) #voice-open{display:inline-block;border-color:#537c61;font-weight:700}
#lobby-voice-note{color:#526d52}
.hand .tile.selected,.hand .tile.drawn.selected{position:relative;outline:3px solid #c3202d;outline-offset:-2px;border-color:#c3202d;box-shadow:0 0 0 1px #c3202d;transform:translateY(-2px)}
.selection-mark{position:absolute;right:-2px;top:-3px;width:14px;height:14px;display:grid;place-items:center;border-radius:50%;background:#c3202d;color:white;font:bold 11px/1 sans-serif;pointer-events:none;z-index:1}
/* 0.6.3: paged result sheet, bounded by the actual visible viewport. */
body:has(#result-dialog[open]){overflow:hidden}
body:has(#result-dialog[open]) .shell{height:var(--visual-height,100dvh);min-height:0;overflow:hidden}
#result-dialog{position:fixed;inset:auto;left:50%;top:calc(var(--visual-top,0px) + var(--visual-height,100dvh)/2);transform:translate(-50%,-50%);margin:0;width:calc(100% - 16px);max-width:440px;height:min(680px,calc(var(--visual-height,100dvh) - 16px - var(--result-safe-top,env(safe-area-inset-top,0px)) - var(--result-safe-bottom,env(safe-area-inset-bottom,0px))));max-height:none;padding:10px;overflow:hidden;scrollbar-gutter:auto}
#result-dialog[open]{display:grid;grid-template-rows:34px minmax(0,1fr);gap:7px}
#result-dialog .dialog-head{margin:0;height:34px}#result-dialog .dialog-head h2{font:21px Georgia,serif}#result-dialog .dialog-head button{height:34px;min-height:34px;width:34px}
#result{display:grid;grid-template-rows:36px minmax(0,1fr) 42px;gap:7px;min-height:0}
#result p,#result h3{margin:0}#result p{font-size:12px;line-height:1.3}#result h3{font-size:16px;line-height:1.25;overflow-wrap:anywhere}#result small{font-size:10px;line-height:1.2}
.result-tabs,.result-players,.result-parts{display:flex;gap:4px;min-width:0}.result-tabs button,.result-players button,.result-parts button{flex:1;min-width:0;height:36px;min-height:36px;padding:3px;font-size:12px}.result-tabs button[aria-pressed=true],.result-players button[aria-pressed=true],.result-parts button[aria-pressed=true]{background:#2c644e;color:white;border-color:#2c644e}
.result-page{min-height:0;display:flex;flex-direction:column;gap:7px;justify-content:flex-start}.result-hero p{margin-top:3px!important;color:#456149}.result-calculation,.result-payment{padding:7px 8px;border-radius:7px;background:#e5eedc}.result-calculation{display:grid;gap:3px}.result-calculation strong,.result-payment strong{font-size:14px;line-height:1.2}.result-payment{background:#f0f1e5;display:grid;gap:3px}
.result-scores{width:100%;border-collapse:collapse;table-layout:fixed;font-size:12px}.result-scores th,.result-scores td{padding:5px 4px;border-bottom:1px solid #d2dcc8;text-align:right;line-height:1.2}.result-scores th:first-child{width:58%;text-align:left;overflow-wrap:anywhere;font-weight:500}.result-scores thead th{font-size:10px;color:#53684e}.result-scores tr.round-winner{background:#e9f0e2}.result-scores td{font-variant-numeric:tabular-nums}.result-standing{font-weight:700;color:#28533e}.result-footer{display:flex;gap:6px;align-items:center}.result-footer button{flex:1;min-height:42px;height:42px;padding:4px;font-size:13px}.result-footer>span{flex:1;font-size:11px;text-align:center}
.result-pattern-list{display:grid;gap:8px}.result-pattern{display:flex;gap:10px;padding:12px 9px;border:1px solid #c7d5bd;border-radius:7px;align-items:center;min-height:56px;font-size:14px}.result-pattern span{flex:1;overflow-wrap:anywhere}.result-pattern strong{white-space:nowrap;font-size:13px}.result-pagination{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-top:auto;flex-shrink:0}.result-pagination button{height:36px;min-height:36px;padding:3px 7px;font-size:12px}.result-pagination span{font-size:12px}.result-guide{font-size:12px;text-align:center}.result-pattern-note{color:#53684e}
.result-players button{height:32px;min-height:32px}.result-player-name{font-size:14px!important}.result-tile-area{min-height:0}.result-tile-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.result-tile-grid .tile{width:100%;height:auto;aspect-ratio:.72;margin:0;border-bottom-width:3px}.result-tile-grid.bonus-grid{grid-template-columns:repeat(4,38px);justify-content:center}.result-meld{margin-bottom:8px}.result-meld p{margin-bottom:3px!important}.result-meld-tiles{display:flex;gap:3px}.result-meld-tiles .tile{width:35px;height:49px;margin:0}.result-tile-area .winning-tile{outline:3px solid #007f85;outline-offset:-2px}.result-tile-note{font-size:10px!important;color:#53684e}
@media(max-height:570px){#result-dialog{padding:8px}#result-dialog[open],#result,.result-page{gap:5px}.result-calculation,.result-payment{padding:5px 7px}.result-scores th,.result-scores td{padding:4px}.result-pattern{padding:8px;min-height:48px}.result-tile-grid{gap:3px}}
#result .result-scores th:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#result .result-scores tbody th{font-size:12px}
#result{padding:0}#result .result-tabs button,#result .result-parts button,#result .result-pagination button{min-height:36px}#result .result-players button{min-height:32px}#result .result-footer button{min-height:42px}
@media(max-height:570px){#result .result-hero h3{font-size:14px}.result-scores th,.result-scores td{padding:3px 4px}}
/* Lobby microphone beside its HTTPS status, below the message input. */
.room:has(#lobby:not([hidden])) #lobby-comms{display:none}
.lobby-chat{grid-template-rows:25px minmax(25px,1fr) 38px 32px}
.lobby-chat-tools,#lobby-voice-controls{display:flex;align-items:center;gap:7px;min-width:0}.lobby-chat-tools{justify-content:space-between}#lobby-voice-controls #voice-open{height:32px;min-height:32px;font-size:11px;padding:3px 8px;white-space:nowrap}#lobby-voice-note{font-size:9px;line-height:1.2}#lobby-chat-feedback{flex-shrink:0}
#result .result-footer button.primary,#result .result-footer button.primary:hover,#result .result-footer button.primary:focus{background:#2c644e;border-color:#2c644e;color:#fff}
/* 0.6.4: explicit return to the last authenticated room. */
#resume-card{display:grid;gap:5px;padding:7px 9px;background:#e3eddc;border:1px solid #89a17a;border-radius:8px;min-width:0}#resume-game{width:100%;min-height:40px;font-size:14px;background:#2c644e;border-color:#2c644e;color:white}#resume-game:hover:not(:disabled){background:#24553f}#resume-note{font-size:11px;line-height:1.3;color:#3e5b45;margin:0;overflow-wrap:anywhere}.welcome:has(#resume-card:not([hidden])){grid-template-rows:minmax(34px,auto) auto auto 42px 24px minmax(56px,1fr) 36px 28px}
.welcome:has(#resume-card:not([hidden])):has(#network-note[hidden]){grid-template-rows:minmax(34px,auto) auto auto 42px 24px minmax(56px,1fr) 36px}
@media(max-height:650px){.welcome:has(#resume-card:not([hidden])){grid-template-rows:32px auto auto 40px 22px minmax(48px,1fr) 30px 24px;gap:5px}
.welcome:has(#resume-card:not([hidden])):has(#network-note[hidden]){grid-template-rows:32px auto auto 40px 22px minmax(48px,1fr) 30px;gap:5px}#resume-card{padding:6px 8px;gap:3px}}

/* 0.6.5: one shared ready/start/mic bar immediately above room chat. */
#lobby{grid-template-rows:54px 108px 52px 44px minmax(100px,1fr) 16px}.lobby-action-bar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;min-width:0}.lobby-action-bar:has(#start[hidden]){grid-template-columns:repeat(2,minmax(0,1fr))}.lobby-action-bar #lobby-voice-controls{display:contents}.lobby-action-bar button,.lobby-action-bar #lobby-voice-controls #voice-open{width:100%;min-width:0;height:44px;min-height:44px;font-size:12px;padding:3px;line-height:1.1}.lobby-chat{grid-template-rows:25px minmax(25px,1fr) 38px 12px}.lobby-chat-tools{min-height:0}.lobby-chat-heading #lobby-voice-note{font-size:9px;text-align:right}.lobby-action-bar .primary:hover{background:#2c644e;color:white}
@media(max-height:650px){#lobby{grid-template-rows:52px 98px 49px 44px minmax(88px,1fr) 14px}}
@media(max-height:450px){#lobby{grid-template-rows:44px minmax(0,1fr)}}.shell.lobby-keyboard #lobby{grid-template-rows:44px minmax(0,1fr)}

.audio-unlock{position:fixed;bottom:8px;left:50%;transform:translateX(-50%);z-index:100;min-height:44px;padding:8px 18px;background:#245e49;color:white;box-shadow:0 2px 12px #0005}
/* 0.7.1: every winner scoring component is visible together. */
#result.winner-sheet{grid-template-rows:minmax(0,1fr) 42px;gap:4px}.winner-body{display:flex;flex-direction:column;gap:4px;min-height:0}.winner-heading{display:flex;flex-direction:column;font-size:13px;line-height:1.15}.winner-name,.winner-source{overflow-wrap:anywhere}.winner-name{font-size:14px}.winner-source{font-size:12px}.winner-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}.winner-group{background:#edf2e5;border-radius:4px;padding:2px;min-width:0;text-align:center;font-size:11.5px;line-height:1.2}.winner-group-tiles{display:flex;justify-content:center;gap:1px;flex-wrap:wrap}.winner-group .tile{width:20px;height:28px;margin:0;border-bottom-width:2px}.winner-group:has(.tile:nth-child(5)){grid-column:1/-1}.winner-group:has(.tile:nth-child(5)) .tile{width:18px;height:25px}.winner-body .winning-tile{outline:2px solid #007f85;outline-offset:-2px}.winner-bonus{display:flex;align-items:center;gap:2px;font-size:12px}.winner-bonus .tile{width:17px;height:24px;margin:0;border-bottom-width:2px}.winner-base{display:flex;flex-wrap:wrap;gap:2px 9px;font-size:12px;line-height:1.2}.winner-base strong{margin-left:auto}.winner-doubles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px 6px;font-size:12px;line-height:1.2;color:#31563f}.winner-calculation{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1px 7px;padding:3px 5px;background:#e5eedc;font-size:12px;line-height:1.2}.winner-limit{width:100%;font-size:11.5px}.winner-body .winner-payment{font-size:12px!important;font-weight:700}.winner-sheet .result-scores th,.winner-sheet .result-scores td{padding:2px 3px;font-size:12px;line-height:1.15}.winner-sheet .result-scores thead th{font-size:11px}.winner-sheet .result-scores th:first-child{width:52%}.winner-standing{font-size:12px!important}.winner-sheet-dialog .dialog-head h2{font-size:19px!important}.winner-sheet-dialog .dialog-head{height:30px!important}.winner-sheet-dialog[open]{grid-template-rows:30px minmax(0,1fr)!important;gap:4px!important;padding:7px!important}.opponent-tiles{display:flex;flex-wrap:wrap;gap:2px}.opponent-tiles .tile{width:27px;height:38px;margin:0}.opponent-hand{margin:10px 0}#opponent-dialog{max-height:90dvh;overflow:auto}#share-dialog input{width:100%;min-width:0;font-size:14px}#share-dialog label{display:block;margin-top:10px}#share-dialog #native-share{width:100%;min-height:44px}.share-actions{display:flex;gap:8px;margin-top:8px}.share-actions>*{flex:1;text-align:center;min-height:44px}.share-actions a{display:flex;align-items:center;justify-content:center;border:1px solid #9caf96;border-radius:6px;text-decoration:none;color:#245b43;font-weight:700}#share-status{min-height:32px;font-size:13px}
@media(min-height:700px){.winner-body{gap:7px}.winner-group .tile{width:26px;height:36px}.winner-group{font-size:12px;padding:3px}.winner-base,.winner-doubles,.winner-calculation{font-size:13px}.winner-sheet .result-scores td,.winner-sheet .result-scores th{padding:4px}}

@media(max-height:600px){.winner-body{gap:2px}.winner-group{padding:1px}.winner-group .tile{height:25px;width:18px}.winner-group-tiles{gap:1px}.winner-bonus .tile{height:22px;width:16px}.winner-sheet .result-scores td,.winner-sheet .result-scores th{padding:1px 3px}.winner-calculation{padding:2px 4px}.winner-sheet-dialog[open]{gap:2px!important}}
@media(max-height:600px){#result-dialog.winner-sheet-dialog[open]{grid-template-rows:0 minmax(0,1fr)!important;gap:0!important;width:calc(100% - 8px);padding:5px!important}.winner-sheet-dialog .dialog-head{height:0!important}.winner-sheet-dialog .dialog-head h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.winner-sheet-dialog .dialog-head button{position:absolute;right:5px;top:5px}.winner-sheet-dialog .winner-heading{padding-right:36px;min-height:30px}.winner-sheet-dialog .winner-name{font-size:13px}}

.winner-body>*,.winner-heading>*{flex-shrink:0}
@media(max-height:600px){.winner-body{gap:1px}.winner-sheet-dialog .winner-heading{display:block}.winner-sheet-dialog .winner-name,.winner-sheet-dialog .winner-source{display:inline}.winner-sheet-dialog .winner-source:before{content:' · '}}
@media(max-height:600px){.winner-sheet-dialog .dialog-head{position:static;background:transparent;padding:0;min-height:0}.winner-sheet-dialog .winner-heading{padding-top:3px}}

/* Preferred invitation targets */
#share-dialog{box-sizing:border-box;width:min(400px,calc(100vw - 20px));padding:14px}#share-dialog .invite-targets{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 8px}#share-dialog .invite-targets>*{display:flex;align-items:center;justify-content:center;min-height:46px;box-sizing:border-box;border:1px solid #aabb9e;border-radius:7px;background:#f8f9f2;color:#24513e;font:inherit;font-weight:600;text-decoration:none;padding:8px}#share-dialog #native-share{width:100%;min-height:44px;margin-bottom:12px}#share-dialog label{display:block}#share-dialog #invite-url{box-sizing:border-box;width:100%;min-width:0}#share-dialog p{font-size:13px;line-height:1.35;margin:10px 0 0}#share-dialog .share-help{color:#52624f}#share-dialog a:focus-visible{outline:3px solid #287657;outline-offset:2px}

/* Explicit scoring terms; keep every breakdown visible. */
.winner-group>span{display:block}.winner-chows{grid-column:1/-1}.winner-calculation>span:first-child,.winner-calculation>strong{width:100%}.winner-doubles{font-size:11.5px}.winner-doubles>span{overflow-wrap:anywhere}

.winner-double-title{grid-column:1/-1;font-size:11.5px}.winner-group>span{white-space:pre-line;font-size:11px;letter-spacing:-.15px}.winner-doubles{line-height:1.15}.winner-limit{font-size:11px;line-height:1.1}

@media(max-height:600px){#result-dialog.winner-sheet-dialog[open]{height:calc(100dvh - 8px);max-height:calc(100dvh - 8px);margin:4px auto}.winner-doubles>span{font-size:11px}.winner-sheet .result-scores td,.winner-sheet .result-scores th{line-height:1.05}}

@media(max-height:600px){.winner-sheet-dialog .winner-calculation{line-height:1.1}.winner-sheet-dialog .winner-base{gap:1px 6px;line-height:1.1}.winner-sheet-dialog .winner-group{line-height:1.1}.winner-sheet-dialog .winner-limit{font-size:11px}.winner-sheet-dialog .winner-doubles{line-height:1.05}}

@media(max-height:600px){#result-dialog.winner-sheet-dialog[open]{padding:4px!important}.winner-sheet-dialog .winner-doubles{column-gap:3px}.winner-sheet-dialog .winner-calculation{padding:1px 3px}.winner-sheet-dialog .winner-group-tiles .tile{height:23px;width:17px}}

@media(max-height:600px){.winner-sheet-dialog .winner-group>span{line-height:1}.winner-sheet-dialog .winner-group-tiles .tile{height:22px;width:16px}.winner-sheet .result-scores th,.winner-sheet .result-scores td{padding-top:0;padding-bottom:0}.winner-sheet-dialog .winner-calculation{line-height:1}.winner-sheet-dialog .winner-limit{line-height:1}}

@media(max-height:600px){.winner-sheet-dialog .winner-body{gap:0}}


/* Compact independent playback controls. */
#audio-dialog{width:min(390px,calc(100vw - 20px));box-sizing:border-box;padding:14px}#audio-dialog .audio-setting{display:grid;grid-template-columns:1fr 92px;align-items:center;gap:0 8px;margin-top:10px}#audio-dialog .audio-setting>label:first-child{grid-column:1/-1;display:flex;justify-content:space-between;font-weight:600;font-size:14px}#audio-dialog input[type=range]{width:100%;min-width:0;height:44px;padding:0;accent-color:#28694d}#audio-dialog .audio-mute{display:flex;gap:6px;align-items:center;min-height:44px;font-size:13px}#audio-dialog input[type=checkbox]{width:20px;height:20px;accent-color:#28694d}#audio-dialog p{font-size:12px;line-height:1.35;margin:9px 0}.audio-footer{display:flex;gap:8px}.audio-footer button{flex:1;min-height:44px}#rules-open{font-size:20px}#game-audio-status{min-height:32px}

#pwa-dialog{box-sizing:border-box;width:min(400px,calc(100vw - 20px));padding:14px}#pwa-dialog p{font-size:13px;line-height:1.4;margin:12px 0}.pwa-actions{display:flex;gap:8px}.pwa-actions button{flex:1;min-height:44px;padding:6px}#pwa-update{min-height:44px;width:100%}#audio-dialog .audio-footer button{min-width:0;font-size:12px;padding:4px}html:fullscreen,html:fullscreen body{width:100%;height:100%;background:#164832}

#pwa-install.primary{background:#2c644e;color:#fff;border-color:#2c644e}#pwa-install:disabled{background:#e3eadb;color:#4a5c48;opacity:1;border-color:#a9bba1}

#audio-dialog,#pwa-dialog{max-height:calc(100dvh - var(--safe-top,0px) - var(--safe-bottom,0px) - 12px)}@media(max-height:600px){#result-dialog.winner-sheet-dialog[open]{height:calc(100dvh - var(--safe-top,0px) - var(--safe-bottom,0px) - 8px);max-height:calc(100dvh - var(--safe-top,0px) - var(--safe-bottom,0px) - 8px);margin-top:calc(4px + var(--safe-top,0px));margin-bottom:calc(4px + var(--safe-bottom,0px))}}

body:has(#result-dialog[open]) .shell{height:calc(var(--visual-height,100dvh) - var(--safe-top,0px) - var(--safe-bottom,0px))}@media(max-height:600px){#result-dialog.winner-sheet-dialog[open]{margin:0;top:calc(var(--visual-top,0px) + (var(--visual-height,100dvh) + var(--safe-top,0px) - var(--safe-bottom,0px))/2)}}

@media(min-height:601px) and (max-height:699px){.winner-sheet-dialog .winner-body{gap:1px}}
/* Public melds beneath each name; discarded-tile state stays on the server. */
.public-board{display:block;min-height:0;padding:3px!important}.public-board #public-table{height:100%;display:flex;flex-direction:column;justify-content:space-around;gap:2px;min-height:0}.public-seat{min-width:0;border-bottom:1px solid #8fae9170;padding:1px 0}.public-seat.own{border:0}.public-seat-heading{display:flex;align-items:center;gap:5px;min-width:0;font-size:11px;line-height:15px}.public-seat-heading h3{font-size:12px;margin:0;min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.public-wind{font-size:10px;white-space:nowrap}.public-total{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:12px}.public-seat.active{background:#e9efca;border-radius:3px}.public-melds{display:flex;flex-wrap:wrap;gap:2px 4px;align-items:center;min-height:24px}.public-meld,.public-bonus{display:flex;gap:1px;flex-wrap:nowrap}.public-meld .tile,.public-bonus .tile{height:clamp(24px,calc((100vw - 76px)/16/.72),36px);width:auto;aspect-ratio:.72;margin:0;border-bottom-width:2px;flex:none}.public-bonus .tile{height:24px}.public-empty{font-size:10px;color:#4b654b}.public-board:has(#claim-panel[open]) #public-table,.public-board:has(#claim-panel[open]) .table-details{visibility:hidden}
:root{font-family:system-ui,-apple-system,'Segoe UI','Microsoft YaHei','PingFang TC','Noto Sans CJK TC',sans-serif}
@media(min-height:601px) and (max-height:699px){.winner-sheet .result-scores th,.winner-sheet .result-scores td{padding-top:0;padding-bottom:0;line-height:1.05}.winner-heading{line-height:1.05}.winner-group>span{line-height:1.05}.winner-base{line-height:1.1}}
/* Four discard rows retained; each heading now shows cumulative score. */
.river-table .discards{grid-template-rows:repeat(4,minmax(0,1fr));gap:2px}.river-row{grid-template-columns:1fr;grid-template-rows:12px auto minmax(0,1fr);gap:1px;border-top:1px solid #adc4ac}.river-row .river-owner{display:block;align-self:auto;max-height:none;overflow:visible}.river-owner h3{font-size:10px;line-height:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.river-melds{display:flex;gap:3px;min-height:0}.river-melds:empty{display:none}.river-melds .public-meld{display:flex;gap:1px}.river-melds .tile{height:clamp(21px,calc((100vw - 80px)/16/.72),29px);width:auto;aspect-ratio:.72;margin:0;border-bottom-width:2px}.river-tiles{height:100%;contain:size;min-height:0}.river-tiles .discard-entry{height:100%;max-height:32px;min-height:0}.river-tiles .discard-entry>.tile{height:100%;max-height:32px;padding-bottom:4px}.river-tiles .discard-entry>small{font-size:6px;height:6px;line-height:6px}
@media(min-height:700px){.winner-body{gap:5px}}
.river-row .river-owner{display:flex;align-items:center;gap:5px;min-width:0}.river-owner h3{flex:1;min-width:0}.river-total{font-size:11px;line-height:12px;white-space:nowrap;font-variant-numeric:tabular-nums;flex:none}
/* Allocate space to public melds on short phones while keeping hand taps >=44px. */
@media(max-height:650px){#game:has(.river-melds:not(:empty)){--hand-tile-height:46px;grid-template-rows:20px minmax(210px,1fr) 79px auto 96px 42px 0}#game:has(.river-melds:not(:empty)):has(.hand:not(:has(.tile:nth-child(8)))){grid-template-rows:20px minmax(210px,1fr) 79px auto 46px 42px 0}#game:has(.river-melds:not(:empty)) .bonus-board .tile{height:23px;width:16.5px}.river-table{padding:3px;grid-template-rows:minmax(0,1fr) 20px}.river-navigation button{height:20px;min-height:20px}.river-table .discards{display:flex;flex-direction:column;gap:2px}.river-row{flex:1;min-height:29px}.river-row:has(.river-melds:not(:empty)){flex:1.65;min-height:48px}.river-row:not(:has(.river-melds:not(:empty))){grid-template-rows:12px minmax(0,1fr)}.river-row:not(:has(.river-melds:not(:empty))) .river-tiles{grid-row:2}}
.river-tiles .discard-entry{align-self:stretch}.river-tiles .discard-entry>.tile{min-height:0}
@media(max-height:650px){#game:has(.river-melds:not(:empty)){--hand-tile-height:44px;gap:1px;grid-template-rows:20px minmax(224px,1fr) 79px auto 90px 42px 0}#game:has(.river-melds:not(:empty)):has(.hand:not(:has(.tile:nth-child(8)))){grid-template-rows:20px minmax(224px,1fr) 79px auto 44px 42px 0}#game:has(.river-melds:not(:empty)) .bonus-board .tile{height:21px;width:15px}.river-row:has(.river-melds:not(:empty)){min-height:53px}.river-row{min-height:31px}.river-tiles,.river-tiles .discard-entry{min-height:18px}.river-tiles .discard-entry>.tile{height:18px;min-height:18px;max-height:18px}}
@media(max-height:600px){.winner-sheet-dialog .winner-heading{min-height:44px;padding-right:46px}}
.winner-sheet .result-footer{display:flex;gap:4px}.winner-sheet .result-footer button{flex:1;min-width:0;min-height:42px;padding:3px;font-size:12px;position:static}
@media(max-height:600px){.winner-sheet-dialog .winner-heading{min-height:30px;padding-right:0}}
/* 0.7.6.1: explicit tracks prevent empty meld containers collapsing discard faces. */
.river-row .river-owner{grid-row:1}.river-melds{grid-row:2}.river-row .river-tiles{grid-row:3}
.river-row:not(:has(.river-melds:not(:empty))){grid-template-rows:12px minmax(0,1fr)}
.river-row:not(:has(.river-melds:not(:empty))) .river-tiles{grid-row:2}
@media(max-height:650px){.river-tiles .discard-entry>.tile{padding-top:0;padding-bottom:2px;border-top-width:1px;border-bottom-width:1px}}
/* Open combinations stay compact beneath names; discard history keeps priority. */
.river-melds .tile{height:22px}
@media(max-height:650px){.river-melds .tile{height:18px}}
/* Restored four-row layout: every discard remains in its own touch-scroll strip. */
.river-row .river-tiles{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;touch-action:pan-x;overscroll-behavior-x:contain;scrollbar-width:none;gap:2px;align-items:center;justify-content:flex-start}
.river-tiles::-webkit-scrollbar{display:none}.river-tiles .discard-entry{flex:0 0 auto;width:auto;max-width:none}.river-tiles .discard-entry>.tile{flex:none;width:auto;aspect-ratio:.72}
.river-tiles:focus-visible{outline:2px solid #287657;outline-offset:-2px}
/* 0.7.8 staging: independently requested compact header and equal toolbar. */
.shell:has(#room:not([hidden])){grid-template-rows:44px minmax(0,1fr)}
header{padding:0 4px;gap:4px;letter-spacing:0}header strong{font-size:11px}header #header-room{font-size:10px;line-height:12px;margin-right:auto}header #header-room small{display:block;font-size:8px}header #back,header #rules-open{height:44px;min-height:44px;min-width:44px;padding:2px;font-size:11px}header #rules-open{font-size:20px}header #connection{font-size:7px;max-width:48px;margin-left:0}
.shell:has(#room[hidden]) #header-room,.shell:has(#room[hidden]) header #back{display:none}
.shell:has(#room:not([hidden])) main{padding:2px 4px}.room{grid-template-rows:minmax(0,1fr);gap:0}.room-bar{display:none}.room:has(#lobby:not([hidden])){grid-template-rows:32px minmax(0,1fr)}.room:has(#lobby:not([hidden])) .room-bar{display:flex;height:32px}
#hand-toolbar{grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}#hand-toolbar>button,#hand-toolbar>#timer{box-sizing:border-box;width:100%;height:44px;min-height:44px;max-height:44px;min-width:0;margin:0;padding:1px;font-size:11px;overflow:hidden}#hand-toolbar>#timer{display:flex;align-items:center;justify-content:center;gap:2px;border:1px solid #b3c4a5;border-radius:6px}#hand-toolbar>#timer b{font-size:26px}#hand-toolbar>#timer small{font-size:8px}
.hand-heading{grid-template-rows:36px 44px;height:83px}#room #game{grid-template-rows:20px minmax(176px,1fr) 83px auto calc(var(--hand-tile-height)*2 + 4px) 44px 0;gap:2px}#room #game:has(.hand:not(:has(.tile:nth-child(8)))){grid-template-rows:20px minmax(176px,1fr) 83px auto var(--hand-tile-height) 44px 0}
/* Own groups and all players' bonus tiles share one scrollable strip. */
#game #my-melds{display:flex;flex-wrap:nowrap;gap:4px;align-items:center;overflow-x:auto;overflow-y:hidden;touch-action:pan-x;overscroll-behavior-x:contain;scrollbar-width:none;height:24px;min-height:24px}#game #my-melds:empty{display:none}#my-melds::-webkit-scrollbar{display:none}#game #my-melds>.meld-group{flex:none}#game #my-melds>.bonus-board{flex:0 0 auto;width:max-content;height:24px;margin:0;padding-left:4px;border-left:1px solid #96ac90;gap:2px}#game #my-melds>.bonus-board:first-child{padding-left:0;border-left:0}#game #my-melds .tile{width:16px;height:22px;flex:none;margin:0}#game #my-melds .bonus-caption{font-size:9px}#game #my-melds .bonus-owner{flex:none}
#room #game:not(:has(#hand .tile:nth-child(8))){grid-template-rows:20px minmax(176px,1fr) 83px auto var(--hand-tile-height) 44px 0}
#my-melds:focus-visible{outline:2px solid #287657;outline-offset:-2px}
/* Responsive maximum faces; controls stay below the table, no right rail. */
#room #game,#room #game:not(:has(#hand .tile:nth-child(8))){grid-template-rows:14px minmax(0,1fr) calc(var(--river-face,32px) + 46px) auto var(--hand-block-size,116px) 44px 0;gap:1px}
#game .hand-heading{height:calc(var(--river-face,32px) + 46px);grid-template-rows:var(--river-face,32px) 44px;row-gap:2px}
#turn-status #last-discard .tile{height:var(--river-face);width:var(--river-width);padding:1px;border-width:1px;border-bottom-width:3px;margin:0}
.river-table{padding:2px;grid-template-rows:minmax(0,1fr) 20px;gap:2px}.river-table .discards{display:grid;grid-template-columns:1fr;gap:2px;min-height:0}
#game .river-row,#game .river-row:not(:has(.river-melds:not(:empty))),#game .river-row:has(.river-melds:not(:empty)){display:grid;grid-template-columns:74px minmax(0,1fr);grid-template-rows:12px minmax(0,1fr);gap:0 3px;min-height:0;padding:0;align-items:start}
#game .river-row .river-owner{grid-column:1;grid-row:1;display:flex;align-items:center;gap:2px;overflow:hidden;min-height:12px}#game .river-owner h3{font-size:9px;line-height:12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#game .river-owner .river-total{font-size:8px;line-height:12px}
#game .river-row .river-melds{grid-column:1;grid-row:2;display:flex;flex-direction:column;flex-wrap:nowrap;gap:1px;align-items:flex-start;min-height:0}#game .river-row .river-melds:empty{display:none}#game .river-melds .public-meld{display:flex;flex-direction:row;gap:0}#game .river-melds .tile{height:var(--meld-face,12px);width:calc(var(--meld-face,12px)*.72);padding:0;border-width:1px;border-radius:2px;margin:0}
#game .river-row .river-tiles,#game .river-row:not(:has(.river-melds:not(:empty))) .river-tiles{grid-column:2;grid-row:1/3;height:100%;min-height:0;align-items:center}
#game .river-tiles .discard-entry,#game .river-tiles .discard-entry>.tile{height:var(--river-face);min-height:var(--river-face);max-height:var(--river-face);width:var(--river-width);max-width:none;flex:none}#game .river-tiles .discard-entry>.tile{padding:1px;border-width:1px;border-bottom-width:3px;aspect-ratio:auto}
#game .river-navigation button{height:20px;min-height:20px}#game .river-navigation{gap:2px}#game .river-navigation #river-note{font-size:7px}#game .river-navigation #river-page{font-size:8px}
#game .river-tiles{--river-face:inherit}
/* Direct one-tap fullscreen; normal connection status does not occupy the header. */
header #fullscreen-toggle{flex:none;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;display:grid;place-items:center}header #fullscreen-toggle svg{pointer-events:none}header #fullscreen-toggle[aria-pressed=true]{background:#dbead4;border-color:#367153}header #fullscreen-toggle[data-supported=false]{color:#687766}
header #connection{position:absolute;right:4px;top:44px;z-index:9;max-width:none;padding:3px 6px;font-size:10px;line-height:14px;background:#fff0c1;color:#75410e;border:1px solid #c9a854;border-radius:4px;pointer-events:none}
header{gap:2px;padding:0 4px}header>strong{flex:none;font-size:9px;letter-spacing:0}header #header-room{flex:none;white-space:nowrap;font-size:9px;line-height:14px;margin-right:auto}header #header-room small{display:inline;font:inherit}header #header-room b{font-size:9px;letter-spacing:0}header #back{font-size:10px}
header>button{align-self:start}
/* All players' public groups and bonus tiles live beside their own river. */
header>strong,header #header-room,header #header-room b{font-size:11px}header #header-room small{font:inherit}
#game #my-melds{display:none!important}
#game .river-public{grid-column:1;grid-row:2;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px;min-width:0;align-items:start}
#game .river-public .river-melds{grid-column:1;grid-row:1;position:static}#game .river-bonus{display:grid;grid-template-columns:repeat(2,auto);gap:1px;grid-column:2;grid-row:1;align-content:start}#game .river-bonus:empty{display:none}
#game .river-bonus .tile{height:min(var(--meld-face,12px),14px);width:calc(min(var(--meld-face,12px),14px)*.72);padding:0;border-width:1px;border-radius:2px;margin:0;flex:none}
/* Preserve prior hand sizing: only opponent melds trigger the existing short-phone44px size. */
@media(max-height:650px){#room #game{--hand-tile-height:inherit}#room #game.opponent-melds{--hand-tile-height:44px}}
/* 0.7.11: state-scoped polish; keep the playing layout geometry unchanged. */
#game .game-stats #my-score{visibility:hidden}
.shell:has(#welcome:not([hidden])){grid-template-rows:44px minmax(0,1fr)}
.shell:has(#welcome:not([hidden])) header #fullscreen-toggle{margin-left:auto}
.room:has(#lobby:not([hidden])){grid-template-rows:44px minmax(0,1fr);gap:2px}
.room:has(#lobby:not([hidden])) .room-bar{height:44px;min-height:44px;border:0;justify-content:flex-end}
.room:has(#lobby:not([hidden])) .room-bar>div{width:136px;justify-content:flex-end}
.room:has(#lobby:not([hidden])) #share{width:136px;height:44px;min-height:44px;background:#2c644e;color:#fff;border-color:#24513e;font-size:13px}
.room:has(#lobby:not([hidden])) #share:hover{background:#24553f}
/* Lobby-only: use the space beside Share for the room heading and clarify duration. */
.room:has(#lobby:not([hidden])) .room-bar{justify-content:space-between;gap:6px}
.room:has(#lobby:not([hidden])) .room-bar>.lobby-heading{width:auto;flex:1;min-width:0;height:44px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:0;text-align:left}
.room:has(#lobby:not([hidden])) .room-bar>.lobby-heading>div{min-width:0;max-width:100%}
.room-bar .lobby-heading small{font-size:7px;line-height:9px;letter-spacing:.07em}
.room-bar .lobby-heading h1{font-size:16px;line-height:19px;margin:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room-bar .lobby-heading #lobby-status{font-size:9px;line-height:11px;margin:0;white-space:nowrap}
#lobby{grid-template-rows:108px 84px 44px minmax(100px,1fr) 16px}
#duration-note{display:block;min-height:36px;padding-top:2px;font-size:10px;line-height:12px;color:#31553d;white-space:normal}
#duration-note strong{display:block;font-size:10px;line-height:12px}#duration-note small{display:block;font-size:9px;line-height:11px}
@media(max-height:650px){#lobby{grid-template-rows:98px 84px 44px minmax(88px,1fr) 14px}}
.room:has(#lobby:not([hidden])){min-width:0;grid-template-columns:minmax(0,1fr)}
.shell:has(#lobby:not([hidden])) main{min-width:0}
.room:has(#lobby:not([hidden])) .room-bar{min-width:0;width:100%}
.room:has(#lobby:not([hidden])) .room-bar>.lobby-heading{flex:1 1 0;overflow:hidden}
.room:has(#lobby:not([hidden])) .room-bar>.lobby-heading>div{width:100%;min-width:0;overflow:hidden}
.room:has(#lobby:not([hidden])) .room-bar>div:not(.lobby-heading){flex:0 0 136px}

/* Lobby: one full-width duration setting; game geometry stays unchanged. */
#lobby .lobby-settings{grid-template-columns:minmax(0,1fr);gap:0}
#lobby .lobby-settings>label{display:block;width:100%;min-width:0}
#lobby #duration-note{min-height:0}
#lobby{grid-template-rows:108px minmax(76px,max-content) 44px minmax(100px,1fr) 16px}
@media(max-height:650px){#lobby{grid-template-rows:98px minmax(76px,max-content) 44px minmax(88px,1fr) 14px}}

.result-readiness{font-size:11px;line-height:1.1;margin:2px 0;color:#184d39;flex-shrink:0}.result-footer button:disabled{opacity:.7}

.winner-sheet .result-readiness{font-size:11px!important;line-height:1.05!important;margin:1px 0!important}
@media(max-height:550px){.winner-sheet .result-readiness{font-size:10px!important;line-height:1!important;margin:0!important}.winner-sheet-dialog .winner-doubles,.winner-sheet-dialog .winner-doubles>span{font-size:10px!important;line-height:1!important}.winner-sheet .result-scores th,.winner-sheet .result-scores td{font-size:10px!important;line-height:1!important;padding-top:0!important;padding-bottom:0!important}.winner-sheet-dialog .winner-group-tiles .tile{height:19px;width:14px}.winner-sheet-dialog .winner-group>span{font-size:10px;line-height:1}.winner-sheet-dialog .winner-standing{font-size:10px;line-height:1}}

@media(min-height:700px){.winner-sheet-dialog .winner-body{gap:3px}}

/* Compact, textual server-authoritative connection status. */
#game .river-public .player-presence{display:block;grid-column:1/-1;grid-row:1;font-size:9px;line-height:11px;font-weight:700;color:#705200;white-space:normal;overflow-wrap:normal}#game .river-public .player-presence[hidden]{display:none}#game .river-public.has-presence .river-melds,#game .river-public.has-presence .river-bonus{grid-row:2}#game .river-public .is-disconnected,#lobby .seat-card[data-disconnected=true] p{color:#a02020}

/* Match opening draw: temporary overlay, existing table grid unchanged. */
.seat-draw-overlay{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:#133d2bbd;padding:16px;touch-action:manipulation}.seat-draw-overlay[hidden]{display:none}.seat-draw-card{width:min(320px,100%);padding:16px;border-radius:15px;background:#fffdf3;color:#244b37;border:1px solid #b4c8a8;box-shadow:0 12px 45px #0005;text-align:center}.seat-draw-card h2{font-size:19px;margin:0}.seat-draw-hint{font-size:11px;margin:5px 0 10px}.seat-draw-dice{display:flex;justify-content:center;gap:16px;height:67px;align-items:center}.seat-die{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:4px;padding:9px;width:54px;height:54px;background:white;border:1px solid #a9b7a0;border-bottom:4px solid #bdcdb3;border-radius:10px;box-shadow:0 5px 8px #17392733;animation:seat-roll 1.4s ease-out both}.seat-die i{border-radius:50%;background:#b02926}.seat-die .blank{visibility:hidden}.seat-draw-seats{padding:0;margin:8px 0;list-style:none;text-align:left}.seat-draw-seats li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:5px;font-size:12px;line-height:26px;padding:0 7px;border-radius:4px}.seat-draw-seats .mine{background:#dfecd7}.seat-draw-seats span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.seat-draw-summary{font-size:11px;line-height:15px;margin:5px 0 10px}.seat-draw-card button{width:100%;height:38px;font-size:12px}.seat-draw-card button:focus-visible{outline:3px solid #af790d;outline-offset:2px}@keyframes seat-roll{0%{transform:translateY(-12px) rotate(-150deg) scale(.75)}25%{transform:translateY(5px) rotate(110deg)}55%{transform:translateY(-7px) rotate(-35deg)}80%{transform:translateY(2px) rotate(10deg)}100%{transform:none}}@media(prefers-reduced-motion:reduce){.seat-die{animation:none}}

#account-dialog{max-width:340px;width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto}#account-dialog p{overflow-wrap:anywhere}#google-button{min-height:44px}.account-note{font-size:12px}.privacy-page{height:auto;overflow:auto;padding:20px}.privacy-page main{max-width:680px;margin:auto;display:block}.privacy-page h2{margin-top:24px}.privacy-page p{line-height:1.5}
#account-dialog{box-sizing:border-box;padding:14px}#account-dialog .dialog-head{display:flex;align-items:center;justify-content:space-between;gap:8px}#account-dialog .dialog-head h2{font-size:20px;min-width:0;margin:0}#account-close{flex:0 0 auto;min-width:58px;min-height:44px;padding:6px;font-size:14px}#account-dialog p{font-size:14px;line-height:1.4}#account-dialog .account-note{font-size:12px}.privacy-page main{height:auto;overflow:visible}

#profile-form{display:grid;gap:8px;margin:12px 0}#profile-form[hidden]{display:none}#profile-form label{font-size:13px;font-weight:600}#profile-form input{box-sizing:border-box;width:100%;min-width:0;min-height:44px}#profile-id{font:12px monospace;padding:5px}.profile-id-row{display:grid;grid-template-columns:minmax(0,1fr) 54px;gap:5px}.profile-id-row button{font-size:12px;min-width:0;padding:4px}#profile-form p{margin:0}#profile-save{min-height:44px}#account-dialog #account-summary{font-size:12px}#account-dialog{overscroll-behavior:contain}

#friends-dialog{box-sizing:border-box;width:min(400px,calc(100vw - 16px));max-height:calc(100dvh - 16px);padding:12px;overflow:auto}#friends-dialog .dialog-head{position:sticky;top:-12px;background:inherit;z-index:2;display:flex;justify-content:space-between;align-items:center}#friends-dialog h2{font-size:20px}#friends-dialog h3{font-size:15px;margin:14px 0 6px}#friends-dialog button{min-height:44px;font-size:12px;padding:6px}#friends-search label{display:block;font-size:13px}.friend-search-row{display:grid;grid-template-columns:minmax(0,1fr) 54px;gap:6px}.friend-search-row input{min-width:0;width:100%;box-sizing:border-box}.friend-row{display:flex;flex-wrap:wrap;gap:6px;border:1px solid #b1c4a4;border-radius:8px;padding:8px;margin:7px 0}.friend-label{flex:1 1 100%;min-width:0;overflow-wrap:anywhere}.friend-label strong,.friend-label small{display:block}.friend-label small{font:11px monospace}.friend-presence{font-size:12px;flex:1 1 100%}.friend-help,#friends-status{font-size:12px;line-height:1.4}#account-friends{min-height:44px;margin-left:8px}