/* The artwork reaches every edge; only readable content uses the safe area. */
html.native-game {
  --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);
  --edge: clamp(12px, 2.5vmin, 26px);
}
html.native-game body { padding:0; gap:0; }
html.native-game #game-shell { display:block; height:100%; }
html.native-game body #game-shell #game-stage {
  width:100%; height:100%; max-width:none; max-height:none;
  aspect-ratio:auto; border:0; border-radius:0; outline:0; box-shadow:none;
}
.native-game #hud {
  inset:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
}
.native-game #move-controls {
  left:calc(var(--safe-left) + var(--edge));
  right:calc(var(--safe-right) + var(--edge));
  bottom:calc(var(--safe-bottom) + var(--edge));
}
.native-game #game-message { margin-top:0; }
.native-game .screen { padding:calc(var(--safe-top) + var(--edge)) calc(var(--safe-right) + var(--edge)) calc(var(--safe-bottom) + var(--edge)) calc(var(--safe-left) + var(--edge)); }
.native-game #welcome-screen, .native-game #serve-screen, .native-game #gameover-screen { padding:0; }
.native-game #welcome-screen .welcome-card,
.native-game #serve-screen .serve-card,
.native-game #gameover-screen .gameover-card {
  padding:calc(var(--safe-top) + var(--edge)) calc(var(--safe-right) + var(--edge)) calc(var(--safe-bottom) + var(--edge) + 6px) calc(var(--safe-left) + var(--edge));
}
.native-game .settings-gear { top:calc(var(--safe-top) + 12px); right:calc(var(--safe-right) + 12px); }
.native-game #serve-screen .serve-actions { max-width:520px; }
@media (orientation:portrait) {
  .native-game #serve-screen #serve-title { max-width:90%; }
}