/* The device reports the cutout size in Safari and Home Screen standalone mode.
   Keep the background edge-to-edge, but put interactive content inside it. */
:root{
  --app-safe-top:env(safe-area-inset-top,0px);
  --app-safe-bottom:env(safe-area-inset-bottom,0px);
  --app-safe-left:env(safe-area-inset-left,0px);
  --app-safe-right:env(safe-area-inset-right,0px);
  --table-safe-top:var(--app-safe-top);
  --table-safe-bottom:var(--app-safe-bottom);
}
/* No bottom reservation in iPhone's installed Safari app. Other devices and
   ordinary browser tabs keep their existing system insets. */
html.ios-homescreen{--app-safe-bottom:0px!important;--table-safe-bottom:0px}
html.ios-homescreen #app.on{height:100vh;height:100dvh}
html.ios-homescreen.portrait #app #left,html.ios-homescreen.compact #app #left{padding-bottom:0}
html.ios-homescreen #app .release-badge{bottom:0;left:2px;padding:0;font-size:8px;line-height:9px;opacity:.4;pointer-events:none}
html.ios-homescreen #setup .pro-mobile-launch{padding-bottom:6px}
html.ios-homescreen #right{padding-bottom:0}
html.ios-homescreen.compact #right{bottom:0}
html.ios-homescreen .rebuy-reminder{bottom:14px}
@media(max-width:800px){html.ios-homescreen .rebuy-reminder{bottom:82px}}
@media(orientation:landscape) and (max-height:500px){html.ios-homescreen .rebuy-reminder{bottom:6px}}
@media(max-width:800px), (max-width:1100px) and (max-height:540px), (max-width:1100px) and (orientation:portrait){
  html #setup{padding-top:calc(6px + var(--app-safe-top))!important;padding-left:var(--app-safe-left)!important;padding-right:var(--app-safe-right)!important}
  html #setup .pro-mobile-launch{padding-left:calc(12px + var(--app-safe-left));padding-right:calc(12px + var(--app-safe-right))}
}
@media(min-width:801px) and (min-height:541px) and (orientation:landscape), (min-width:1101px){
  html #setup{padding-top:calc(14px + var(--app-safe-top));padding-left:calc(20px + var(--app-safe-left));padding-right:calc(20px + var(--app-safe-right))}
  html #app #left{padding-top:calc(10px + var(--app-safe-top))}
}
@media(max-width:1100px) and (orientation:portrait){
  html.portrait #app #left{padding-top:calc(4px + var(--table-safe-top))}
  html.portrait #right{max-height:calc(var(--game-height,100dvh) - var(--app-safe-top) - 12px)}
  html.portrait .topbar #tableTools{max-height:calc(var(--game-height,100dvh) - var(--app-safe-top) - var(--app-safe-bottom) - 96px)}
}
@media(max-width:600px) and (orientation:portrait) and (max-height:690px){
  html.portrait #app #left{padding-top:calc(2px + var(--table-safe-top))}
}
@media(min-width:601px) and (max-width:1100px) and (orientation:portrait){
  html.portrait #app #left{padding-top:calc(12px + var(--table-safe-top))}
}
@media(orientation:landscape) and (max-height:640px){
  html.compact #app #left{padding:calc(3px + var(--app-safe-top)) calc(5px + var(--app-safe-right)) calc(3px + var(--app-safe-bottom)) calc(5px + var(--app-safe-left))}
}
html dialog,html #memberDialog,html #memberDialog.member-center,html #plansDialog,html #upgradeDialog,html .pro-dialog,html .screen-dialog{
  inset:calc(12px + var(--app-safe-top)) calc(12px + var(--app-safe-right)) calc(12px + var(--app-safe-bottom)) calc(12px + var(--app-safe-left));
  margin:auto;
  max-width:calc(100vw - var(--app-safe-left) - var(--app-safe-right) - 24px);
  max-height:calc(100dvh - var(--app-safe-top) - var(--app-safe-bottom) - 24px);
}