/* One safe frame for every game view. The mobile fallback also works in H5
   containers that incorrectly report zero insets. Controls never enter it. */
:root{--safe-top:max(48px,env(safe-area-inset-top,0px));--safe-bottom:max(16px,env(safe-area-inset-bottom,0px));--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}
#app{padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);height:100vh;height:100dvh}
#app:before,#app:after{content:'';position:absolute;left:0;right:0;pointer-events:none;z-index:15}
#app:before{top:0;height:var(--safe-top);background:#e3f0e4}
#app:after{bottom:0;height:var(--safe-bottom);background:#fbefd8}
#app .topbar,#app .game-top{padding-top:12px}
#app .board-wrap{min-width:112px}
#app .bottom-nav{height:76px;padding-top:7px;padding-bottom:7px}
.modal-backdrop{position:fixed;inset:0;height:100vh;height:100dvh;box-sizing:border-box;padding:calc(var(--safe-top) + 12px) max(16px,var(--safe-right)) calc(var(--safe-bottom) + 12px) max(16px,var(--safe-left));display:flex;align-items:center;justify-content:center;overflow:hidden}
.modal{max-height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;flex-shrink:1}
#toast{bottom:calc(var(--safe-bottom) + 88px);max-width:calc(100vw - var(--safe-left) - var(--safe-right) - 28px)}
@media(max-height:710px){#app .topbar,#app .game-top{padding-top:8px}#app .bottom-nav{height:65px;padding-top:5px;padding-bottom:5px}}
@media(max-height:620px){#app .topbar,#app .game-top{padding-top:5px}#app .bottom-nav{height:58px;padding-top:4px;padding-bottom:4px}.modal-backdrop{padding-top:calc(var(--safe-top) + 7px);padding-bottom:calc(var(--safe-bottom) + 7px)}}
@media(min-width:700px){#app{height:calc(100vh - 30px);height:calc(100dvh - 30px)}}
@media(orientation:landscape) and (max-height:500px){:root{--safe-top:max(12px,env(safe-area-inset-top,0px));--safe-bottom:max(8px,env(safe-area-inset-bottom,0px))}.modal-backdrop{align-items:flex-start}.modal{max-height:100%}}