/* Shared phone viewport. Insets include the status bar and the home indicator. */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}
html {
  width: 100%;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html, body { touch-action: pan-x pan-y; overflow-x: clip; }
body { width: 100%; min-width: 0; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
input, select, textarea { font-size: 16px; }
button, a { -webkit-user-select: none; user-select: none; }
img, svg { max-width: 100%; }
#app, .app-shell, .game-shell, .game-content { min-width: 0; }
.app-shell {
  padding-left: max(16px, var(--safe-left));
  padding-right: max(16px, var(--safe-right));
}
.game-shell {
  padding-left: max(10px, var(--safe-left));
  padding-right: max(10px, var(--safe-right));
}
@media (max-width: 360px) {
  .game-shell { padding-left: max(8px, var(--safe-left)); padding-right: max(8px, var(--safe-right)); }
}
.public-bar {
  height: auto;
  min-height: calc(64px + var(--safe-top));
  padding-top: calc(8px + var(--safe-top));
  padding-bottom: 8px;
}
.public-bar > b { min-width: 0; }
/* A coarse-pointer tablet must not inherit the old 430px desktop phone frame. */
@media (pointer: coarse) and (min-width: 600px) {
  .app-shell, .game-shell {
    width: 100% !important; max-width: 680px !important;
    padding-left: max(16px, var(--safe-left)) !important;
    padding-right: max(16px, var(--safe-right)) !important;
  }
  .bottom-nav { width: min(100%, 680px) !important; }
}
body:has(.home-shell){padding-bottom:0}