/* Desktop remains unchanged; smaller touch screens get their own table geometry. */
.mobileOnly{display:none}
.discardSheetHeader{display:flex;align-items:center;justify-content:space-between;gap:8px;position:sticky;top:-16px;background:#103529;z-index:1;padding:8px 0}
.discardSheetHeader h2{margin:0;font-size:18px}
.discardSheetHeader .row{gap:5px}
.discardSheet h3{font-size:14px;text-align:left;margin:18px 0 8px}
.discardSheetGrid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
.discardSheetGrid .tinyTile{width:100%;height:auto;aspect-ratio:2 / 3}

@media(max-width:1023px){
 html,body{min-width:0;width:100%}
 body{overflow-x:hidden}
 button,input,select{touch-action:manipulation}
 input,select{font-size:16px}
 .topbar{height:calc(42px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) max(10px,env(safe-area-inset-right,0px)) 0 max(10px,env(safe-area-inset-left,0px))}
 .brand{gap:7px;min-width:0}.brand b{font-size:18px;letter-spacing:2px}.brand span{display:none}.brandIcon{width:20px;height:27px}
 .pill{font-size:10px;padding:4px 7px;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .container{margin:16px auto;padding:0 12px}.heading{font-size:23px}.sub{font-size:13px;line-height:1.6}
 .panel{padding:16px}.grid2{grid-template-columns:minmax(0,1fr)}.fields{grid-template-columns:repeat(2,minmax(0,1fr))}.fields>div,.row>div{min-width:0}
 .seatGrid{gap:8px}.seat{padding:14px 8px}.seat b{font-size:18px}.seatChoice{min-height:88px;padding:8px}
 .roomRow{gap:8px}.roomRow button{white-space:nowrap;min-height:44px}
 .deskWrap{margin:4px auto;padding:0 max(4px,env(safe-area-inset-right,0px)) 0 max(4px,env(safe-area-inset-left,0px))}
 .deskWrap>.row.space{min-height:0;display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:4px 2px 6px}
 .deskWrap h2{font-size:12px;line-height:16px;margin:0}
 .deskWrap>.row.space>.row{justify-content:space-between;gap:5px;flex-wrap:nowrap}
 .deskWrap>.row.space button{padding:6px 9px;min-height:32px;font-size:11px;white-space:nowrap}
 .desk{--mobile-hand-space:168px;height:calc(100dvh - 224px - var(--mobile-extra-controls,0px) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));min-height:320px;max-height:none;border-width:8px;border-radius:20px}
 .desk::before{inset:-8px;border-width:3px;border-radius:18px}.desk::after{inset:3px;border-radius:12px}
 .desk .wall{display:none}
 .desk .playerBox{min-width:0;width:calc((100% - 24px) / 3);padding:4px 3px;border-radius:7px;box-shadow:none}
 .desk .playerBox strong{font-size:11px;line-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0}
 .desk .playerBox small{display:block;font-size:9px;line-height:12px}
 .desk .playerBox .handCount{font-size:9px;line-height:11px;margin:0}
 .desk .playerBox.north{top:6px;left:50%;transform:translateX(-50%)}
 .desk .playerBox.west{top:6px;left:6px;transform:none}
 .desk .playerBox.east{top:6px;right:6px;left:auto;transform:none}
 .desk .playerBox.south{display:none}
 .desk .playerBox .otherHand{display:none}
 .desk .playerBox .meld{margin-top:3px;gap:1px;flex-wrap:wrap;max-height:28px;overflow-y:auto}
 .desk .meld .tinyTile{width:12px;height:18px;flex:none}
 .discardLayout{--river-spacing:2px;--river-zone-gap:8px;--river-padding:4px;--river-center-space:120px;top:80px;bottom:var(--mobile-hand-space);width:calc(100% - 16px);gap:8px;grid-template-rows:minmax(0,1fr) 104px minmax(0,1fr)}
 .desk .centerBoard{top:calc((100% + 80px - var(--mobile-hand-space)) / 2);width:148px;min-width:148px;height:104px;min-height:104px;padding:4px;grid-template-columns:18px minmax(0,1fr) 18px;grid-template-rows:16px minmax(0,1fr) 16px;gap:2px;border-radius:11px}
 .centerBoard .centerSeat{font-size:11px}.centerBoard .centerSeat.north,.centerBoard .centerSeat.south{width:28px}.centerBoard .centerSeat.west,.centerBoard .centerSeat.east{height:28px}
 .centerBoard .centerDealer,.desk .centerBoard .centerDealer .centerWind,.centerBoard .centerDealer small{font-size:9px;line-height:12px}
 .desk .centerBoard .remaining{font-size:14px;line-height:16px}.centerBoard .status{font-size:10px;line-height:13px}.desk .centerBoard .centerDice{display:none}
 .myHand{display:grid;grid-template-columns:repeat(7,minmax(0,40px));justify-content:center;align-items:end;gap:10px 2px;left:8px;right:8px;bottom:8px;width:auto;max-width:none;transform:none;padding:8px 0 0;filter:none}
 .myHand .tile{min-width:0;width:100%;height:auto;aspect-ratio:347 / 532;flex:none;touch-action:manipulation;-webkit-touch-callout:none}
 .myHand .tile.drawn{margin-left:0}.myHand .tile:hover{transform:none}.myHand .tile.selected{transform:translateY(-6px)}
 .controlBar{position:sticky;bottom:0;z-index:10;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:4px 0 0;padding:4px 4px calc(6px + env(safe-area-inset-bottom,0px));background:#08291ff5;border-radius:10px}
 .controlBar .picked{grid-column:1 / -1;min-width:0;padding:0;min-height:16px;font-size:11px;line-height:16px}
 .controlBar button{min-width:0;min-height:44px;padding:8px 4px;font-size:13px}
 .mobileOnly{display:block}
 .scores{gap:4px;margin:8px 0}.score{min-width:0;padding:6px 3px;font-size:10px}.score b{font-size:16px}
 .journalPanel{margin:8px 0 12px}.journalHeader{padding:10px 12px}.journalHeader h3{font-size:13px}.journalNote{padding:8px 12px}.journalPanel .journal{max-height:128px;font-size:12px}
 .modalShade{padding:12px 0;overflow-y:auto}.modal{width:calc(100% - 24px);max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain;padding:16px;border-radius:14px}
 .modal h2{font-size:20px}.modal h3{font-size:16px}.modal .grid2{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.modal button{min-height:44px}
 .markerRow{padding:12px 0;gap:4px}.markerCard{width:42px;height:64px;flex:none}
 #toast{bottom:calc(12px + env(safe-area-inset-bottom,0px));max-width:calc(100% - 24px);width:max-content;font-size:13px;padding:10px 14px}
}
@media(max-width:1023px) and (orientation:portrait) and (max-height:700px){
 .topbar{height:calc(36px + env(safe-area-inset-top,0px))}.brand b{font-size:16px}
 .desk{--mobile-hand-space:158px;height:calc(100dvh - 210px - var(--mobile-extra-controls,0px) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
 .myHand{grid-template-columns:repeat(7,minmax(0,38px))}
}
@media(max-width:1023px) and (orientation:landscape){
 .topbar{height:calc(32px + env(safe-area-inset-top,0px))}.brand b{font-size:15px}.brandIcon{width:17px;height:23px}
 .deskWrap{margin-top:2px}.deskWrap>.row.space{flex-direction:row;align-items:center;gap:6px;padding:2px;min-height:32px}.deskWrap>.row.space>.row{gap:4px}
 .deskWrap>.row.space button{min-height:28px;padding:4px 7px;font-size:10px}
 .desk{--mobile-hand-space:78px;height:calc(100dvh - 132px - var(--mobile-extra-controls,0px) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));min-height:190px;border-width:6px;border-radius:16px}
 .desk .playerBox{width:calc((100% - 30px) / 3);padding:2px 4px}.desk .playerBox.north,.desk .playerBox.west,.desk .playerBox.east{top:3px}
 .desk .playerBox strong{display:inline;font-size:10px;line-height:12px}.desk .playerBox small{display:inline;font-size:8px;line-height:10px;margin-left:4px}.desk .playerBox .handCount{display:inline;font-size:8px}.desk .playerBox .meld{display:flex;max-height:18px;margin-top:1px}
 .discardLayout{--river-center-space:80px;top:54px;bottom:var(--mobile-hand-space);width:calc(100% - 100px);grid-template-rows:minmax(0,1fr) 64px minmax(0,1fr)}
 .desk .centerBoard{top:calc((100% + 54px - var(--mobile-hand-space)) / 2);width:144px;min-width:144px;height:64px;min-height:64px;grid-template-rows:12px minmax(0,1fr) 12px;gap:1px;padding:3px}
 .centerBoard .centerSeat{font-size:10px}.centerBoard .centerSeat.north,.centerBoard .centerSeat.south{width:24px}.centerBoard .centerSeat.west,.centerBoard .centerSeat.east{height:24px}
 .centerBoard .centerDealer{display:none}.desk .centerBoard .remaining{font-size:12px;line-height:14px}.centerBoard .status{font-size:10px;line-height:12px}
 .myHand{grid-template-columns:repeat(14,minmax(0,38px));gap:0 2px;bottom:4px;padding-top:8px}
 .controlBar{grid-template-columns:minmax(0,1fr) repeat(3,minmax(60px,90px));align-items:center;gap:4px;margin-top:2px;padding:2px 4px calc(2px + env(safe-area-inset-bottom,0px))}
 .controlBar .picked{grid-column:auto;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.controlBar button{min-height:44px;padding:5px;font-size:12px}
}

@media(max-width:1023px){.desk .mobileMelds{position:absolute;bottom:var(--mobile-hand-space);left:16px;right:16px;display:flex;justify-content:center;gap:2px;z-index:5}.mobileMelds .tinyTile{width:15px;height:23px}}
@media(max-width:1023px) and (orientation:portrait) and (max-height:600px){.desk{--mobile-hand-space:142px}.discardLayout{top:76px;--river-center-space:88px;grid-template-rows:minmax(0,1fr) 72px minmax(0,1fr)}.desk .centerBoard{top:calc((100% + 76px - var(--mobile-hand-space)) / 2);height:72px;min-height:72px;grid-template-rows:12px minmax(0,1fr) 12px;gap:1px;padding:3px}.centerBoard .centerDealer{display:none}.desk .centerBoard .remaining{font-size:12px;line-height:14px}.centerBoard .status{font-size:10px;line-height:12px}}

@media(max-width:1023px){.deskWrap:has(.controlBar button:nth-of-type(4)){--mobile-extra-controls:49px}.deskWrap:has(.controlBar button:nth-of-type(7)){--mobile-extra-controls:98px}}

@media(max-width:1023px){.spectating .desk{--mobile-hand-space:80px}.spectating .playerBox.south{display:block;top:auto;bottom:8px;left:50%;transform:translateX(-50%)}.spectating .controlBar{grid-template-columns:minmax(0,1fr) 100px;align-items:center}.spectating .controlBar .picked{grid-column:auto}.roomRow{flex-wrap:wrap}.roomRow>div{flex:1 0 40%}}