/* Give the play surface definite dimensions; don't resolve nested percentage
   heights through an auto-sized, auto-margin grid item on mobile Safari. */
@media(max-width:950px) and (pointer:coarse),(max-width:750px){
body:not(.at-title){display:block;position:relative;height:var(--play-vh,100vh);min-height:0;padding:0;overflow:hidden;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
body:not(.at-title)>header{position:absolute;top:var(--safe-top);left:12px;right:12px;bottom:auto;height:44px;margin:0;width:auto}
body:not(.at-title)>.mobile-status{position:absolute;top:calc(var(--safe-top) + 44px);left:0;right:0;height:44px;box-sizing:border-box}
body:not(.at-title)>main{position:absolute;top:calc(var(--safe-top) + 88px);bottom:calc(var(--safe-bottom) + 220px);left:0;right:0;width:auto;height:auto;margin:0;padding:0 5px;min-width:0;min-height:0;overflow:visible}
body:not(.at-title) .play{position:absolute;inset:0 5px;height:auto;display:flex;flex-direction:column;min-height:0}
body:not(.at-title) .opponent{flex:0 0 28px}
body:not(.at-title) .stage{position:relative;flex:1 1 0;height:auto;min-height:0;width:100%;display:block;margin:2px 0;padding:0}
body:not(.at-title) .table,body:not(.at-title).topview .table{position:absolute;inset:0;height:auto;min-height:0;width:auto;max-width:none;transform:none;transform-style:flat}
body:not(.at-title) .tablefoot{flex:0 0 18px;height:18px}
body:not(.at-title)>.handzone{position:absolute;left:0;right:0;bottom:calc(var(--safe-bottom) + 88px);height:132px;min-height:0;width:auto;margin:0;display:grid;grid-template-rows:29px 103px;grid-template-columns:1fr 1fr;box-sizing:border-box}
body:not(.at-title) #hand{height:103px;min-height:0;align-items:stretch;box-sizing:border-box;overflow:visible}
body:not(.at-title) #hand .card{height:83px;min-height:0;transform-style:flat}
body:not(.at-title)>.mobile-dock{position:absolute;left:0;right:0;bottom:var(--safe-bottom);height:88px;box-sizing:border-box}
body:not(.at-title) #board{transform-style:flat;min-width:0;min-height:0;grid-template-columns:repeat(4,minmax(0,1fr))}
body:not(.at-title) #board .card{min-height:0;transform-style:flat}
body:not(.at-title) #board .card .book,body:not(.at-title) #hand .card .book{transform:rotate(-8deg);transform-style:flat}
dialog{max-height:calc(var(--play-vh,100vh) - 24px)}
}
@media(max-width:599px) and (max-height:650px){body:not(.at-title)>header{height:38px}body:not(.at-title)>.mobile-status{top:calc(var(--safe-top) + 38px);height:36px}body:not(.at-title)>main{top:calc(var(--safe-top) + 74px);bottom:calc(var(--safe-bottom) + 206px)}body:not(.at-title)>.handzone{height:118px;grid-template-rows:29px 89px}body:not(.at-title) #hand{height:89px}body:not(.at-title) #hand .card{height:69px}}
@media(max-height:590px) and (min-width:600px) and (max-width:1000px){body:not(.at-title)>main{top:calc(var(--safe-top) + 88px);left:0;right:44%;bottom:var(--safe-bottom)}body:not(.at-title)>.handzone{top:calc(var(--safe-top) + 88px);left:56%;right:0;bottom:calc(var(--safe-bottom) + 88px);height:auto;grid-template-columns:1fr;grid-template-rows:25px 30px minmax(0,1fr)}body:not(.at-title) #hand{height:auto;grid-template-rows:repeat(2,minmax(0,1fr));min-height:0}body:not(.at-title) #hand .card{height:100%;min-height:0}body:not(.at-title)>.mobile-dock{left:56%;right:0}}