/* El Basra Online — PWA/mobile hardening layer.
 * Loaded AFTER the game's own styles; only fixes installability, safe areas,
 * standalone display and small-screen issues. Never restyles the game itself.
 */

/* --- Safe areas (notch / gesture bar / rounded corners) --- */
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

/* Do not put the safe-area insets on <body>.  Padding the application root
   shrinks every absolute `inset: 0` screen, which is what created visible
   bands around the game on cutout/gesture devices.  HUD controls consume
   these variables individually where needed; backgrounds and the table stay
   genuinely edge-to-edge. */

/* Gutter color behind any inset area / overscroll: same felt-black as the
   WebView background so edges never flash white on any screen. */
html {
  background: #0a1210;
}

/* Root-viewport hardening: the shell always spans the full WebView, so no
   ancestor can shrink-wrap the app into a centered sub-frame. No-op when
   the viewport is already correct; affects no inner layout, modal, or game. */
html,
body {
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 100dvh;
  margin: 0;
  overflow: hidden;
}
#screens-wrapper {
  width: 100%;
  min-height: 0;
}

/* --- Fullscreen standalone feel: no overscroll bounce, no text select --- */
@media (display-mode: standalone) {
  html,
  body {
    overscroll-behavior: none;
  }
}

/* Chrome's installed-PWA window and Capacitor must use the full dynamic
   viewport.  This prevents a stale 100vh measurement leaving a strip when
   Android hides or transiently reveals its system bars. */
@supports (height: 100dvh) {
  body {
    height: 100dvh;
  }
}

/* --- Install button (hidden until beforeinstallprompt fires) --- */
#pwa-install-btn {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
#pwa-install-btn.pwa-ready {
  display: inline-flex;
}

/* --- Network status pill (subtle, game-styled, non-blocking) --- */
#net-status {
  position: fixed;
  top: calc(8px + var(--sat));
  left: 50%;
  transform: translateX(-50%) translateY(-200%);
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 900;
  color: #fff;
  background: rgba(185, 28, 28, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  transition: transform 0.25s ease;
  pointer-events: none;
  white-space: nowrap;
}
#net-status.show {
  transform: translateX(-50%) translateY(0);
}
#net-status.reconnecting {
  background: rgba(194, 65, 12, 0.92);
}
#net-status .dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #fff;
  animation: netblink 1s ease-in-out infinite;
}
@keyframes netblink {
  50% {
    opacity: 0.35;
  }
}

/* --- Capacitor/Android WebView tweaks --- */
.capacitor-native body {
  user-select: none;
  -webkit-user-select: none;
}
.capacitor-native img {
  -webkit-user-drag: none;
}

/* --- Small-height landscape phones: keep lobby reachable, no squeeze --- */
@media (max-height: 420px) and (orientation: landscape) {
  .login-wrap {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
}