/* The 101 packing, dragging and scoring engine uses two rows of 18 slots. */
@media(max-width:900px){
 #root main.gameScreen.yuzbirGame .tileRackGrid{display:grid!important;grid-template-columns:repeat(18,minmax(0,1fr))!important;grid-template-rows:repeat(2,minmax(0,1fr))!important;grid-auto-rows:0!important;gap:2px 1px!important;min-width:0!important;width:100%!important;box-sizing:border-box!important}
 #root main.gameScreen.yuzbirGame .tileRackGrid .rackSlot{width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
 #root main.gameScreen.yuzbirGame .tileRackGrid .rackSlot .okeyTile{width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
}

/* Compact the wooden rack and use the tile face's full width. */
@media(max-width:700px) and (orientation:portrait){
 #root main.gameScreen.yuzbirGame .rackArea{height:18.2%!important;top:79.2%!important;bottom:auto!important}
 #root main.gameScreen.yuzbirGame .rackBoardShell{inset:31% 1.5% 4%!important}
 #root main.gameScreen.yuzbirGame .tileRackGrid{padding:3px!important;column-gap:0!important;row-gap:3px!important}
 #root main.gameScreen.yuzbirGame .tileRackGrid .rackSlot .okeyTile{padding:0!important;border:0!important;box-shadow:none!important;background:transparent!important}
 #root main.gameScreen.yuzbirGame .tileRackGrid .rackSlot .okeyTile img{transform:scale(1.1)!important;transform-origin:center!important;object-fit:contain!important}
}
@media(max-width:1000px) and (max-height:520px) and (orientation:landscape){
 #root main.gameScreen.yuzbirGame .rackArea{height:19%!important;top:78.5%!important;bottom:auto!important}
 #root main.gameScreen.yuzbirGame .tileRackGrid .rackSlot .okeyTile{padding:0!important;border:0!important;background:transparent!important}
 #root main.gameScreen.yuzbirGame .tileRackGrid .rackSlot .okeyTile img{transform:scale(1.08)!important;object-fit:contain!important}
}

/* Keep sort controls, opening controls and tiles in separate rows. */
@media(max-width:700px) and (orientation:portrait){
 #root main.gameScreen.yuzbirGame .rackArea{height:clamp(160px,20dvh,190px)!important;top:auto!important;bottom:2.5%!important;overflow:hidden!important}
 #root main.gameScreen.yuzbirGame .rackHead{position:absolute!important;top:5px!important;left:8px!important;right:8px!important;height:27px!important;margin:0!important;padding:0!important}
 #root main.gameScreen.yuzbirGame .rackTools{width:100%!important;height:100%!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px!important}
 #root main.gameScreen.yuzbirGame .rackTools button{height:27px!important;min-height:0!important;padding:0 3px!important;font-size:clamp(9px,2.4vw,12px)!important}
 #root main.gameScreen.yuzbirGame .rack101ScoreBar{position:absolute!important;top:36px!important;left:8px!important;right:8px!important;bottom:auto!important;width:auto!important;max-width:none!important;height:28px!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;display:block!important;box-shadow:none!important}
 #root main.gameScreen.yuzbirGame .rack101UnifiedActions{width:100%!important;height:28px!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px!important;padding:0!important;margin:0!important}
 #root main.gameScreen.yuzbirGame .rack101UnifiedActions>button{height:28px!important;min-height:0!important;padding:0 3px!important;font-size:clamp(9px,2.4vw,12px)!important}
 #root main.gameScreen.yuzbirGame .rack101UnifiedActions .returnSideTile{display:none!important}
 #root main.gameScreen.yuzbirGame .rackBoardShell{position:absolute!important;inset:70px 6px 6px!important;min-height:0!important;margin:0!important}
 #root main.gameScreen.yuzbirGame .rack101Score,#root main.gameScreen.yuzbirGame .rack101Warning,#root main.gameScreen.yuzbirGame .rackMode{display:none!important}
}

/* Size the rack from the two tile rows, independently of screen height. */
@media(max-width:700px) and (orientation:portrait){
 #root main.gameScreen.yuzbirGame .rackArea{height:calc(76px + clamp(56px,14.4vw,92px))!important;min-height:0!important;max-height:none!important}
 #root main.gameScreen.yuzbirGame .rackHead{top:5px!important;height:25px!important}
 #root main.gameScreen.yuzbirGame .rackTools button{height:25px!important}
 #root main.gameScreen.yuzbirGame .rack101ScoreBar{top:34px!important;height:25px!important}
 #root main.gameScreen.yuzbirGame .rack101UnifiedActions,#root main.gameScreen.yuzbirGame .rack101UnifiedActions>button{height:25px!important}
 #root main.gameScreen.yuzbirGame .rackBoardShell{inset:63px 6px 5px!important}
 #root main.gameScreen.yuzbirGame .tileRackGrid{padding:2px 3px!important;column-gap:1px!important;row-gap:3px!important}
 #root main.gameScreen.yuzbirGame .tileRackGrid .rackSlot{border:0!important;background:transparent!important;display:flex!important;align-items:center!important;justify-content:center!important;min-height:0!important;height:100%!important}
 #root main.gameScreen.yuzbirGame .tileRackGrid .rackSlot .okeyTile{position:relative!important;inset:auto!important;height:100%!important;max-height:100%!important;margin:0!important;padding:0!important}
 #root main.gameScreen.yuzbirGame .tileRackGrid .rackSlot .okeyTile img{transform:none!important;width:100%!important;height:100%!important;object-fit:contain!important}
}

@media(max-width:700px) and (orientation:portrait){
 #root main.gameScreen.yuzbirGame .rackBoardShell{inset:65px 7px 7px!important}
 #root main.gameScreen.yuzbirGame .tileRackGrid{padding:3px 2px!important;column-gap:1.5px!important;row-gap:5px!important}
}