/* Keep the existing proportions and controls inside the usable iPhone viewport.
   Zero insets retain the existing desktop/Safari board dimensions. No rotation lock. */
:root {
  --pwa-top: env(safe-area-inset-top, 0px);
  --pwa-right: env(safe-area-inset-right, 0px);
  --pwa-bottom: env(safe-area-inset-bottom, 0px);
  --pwa-left: env(safe-area-inset-left, 0px);
  --pwa-width: calc(100vw - var(--pwa-left) - var(--pwa-right));
  --pwa-height: calc(100dvh - var(--pwa-top) - var(--pwa-bottom));
}
@supports (padding: env(safe-area-inset-top)) {
  #game { padding: var(--pwa-top) var(--pwa-right) var(--pwa-bottom) var(--pwa-left); }
  #stage {
    height: min(var(--pwa-height), calc(var(--pwa-width) * 1.77683));
    width: min(var(--pwa-width), calc(var(--pwa-height) * .5628));
  }
  header { left: max(7px, var(--pwa-left)); right: max(7px, var(--pwa-right)); }
  #message { max-width: min(94vw, var(--pwa-width)); left: calc(var(--pwa-left) + var(--pwa-width) / 2); }
  #lobby, #stats-screen, #opening-screen, #handy-screen, #battle-screen,
  #duel-screen, #recovery-screen, #six-battle-screen, #end-screen, #win-screen {
    inset: var(--pwa-top) var(--pwa-right) var(--pwa-bottom) var(--pwa-left);
  }
  #end-screen .end-panel { max-height: calc(var(--pwa-height) - 48px); }
  #recovery-panel { max-height: calc(86dvh - var(--pwa-top) - var(--pwa-bottom)); }
  dialog {
    inset: var(--pwa-top) var(--pwa-right) var(--pwa-bottom) var(--pwa-left);
    max-width: min(360px, calc(var(--pwa-width) - 40px));
    max-height: calc(var(--pwa-height) - 40px);
    overflow-y: auto;
  }
  #settings, #card-hand { max-height: min(88dvh, calc(var(--pwa-height) - 40px)); }
  #card-hand { max-width: min(650px, calc(var(--pwa-width) - 24px)); }
  #account-dialog {
    max-width: min(360px, calc(var(--pwa-width) - 32px));
    max-height: min(85dvh, calc(var(--pwa-height) - 40px));
  }
}