/* ==================== IMMERSIVE FULLSCREEN / PWA FIX ====================
   Loaded last. Keeps the game feeling like a native mobile app.
   Note: normal browsers are not allowed to enter fullscreen or lock landscape
   without a user gesture. This CSS + JS makes the first tap enter immersive
   mode, and PWA/Add-to-Home-Screen opens fullscreen by default.
======================================================================= */
html,
body {
  margin: 0 !important;
  padding: 0 !important;
  background: #07142f !important;
  overscroll-behavior: none !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

body.immersive-standalone #fullscreenBtn,
body.immersive-standalone #enterFullscreenBtn {
  display: none !important;
}

#fullscreenBtn {
  top: max(10px, env(safe-area-inset-top, 0px)) !important;
  right: max(10px, env(safe-area-inset-right, 0px)) !important;
  width: auto !important;
  min-width: 46px !important;
  min-height: 42px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  z-index: 100000 !important;
  font-weight: 800 !important;
}

.immersive-inline-btn {
  border: none;
  border-radius: 12px;
  padding: 9px 12px;
  font-weight: 800;
  background: linear-gradient(135deg, #00c6ff, #0072ff);
  color: #fff;
  box-shadow: 0 5px 14px rgba(0,0,0,.22);
  cursor: pointer;
  white-space: nowrap;
}

#installPwaBtn {
  position: fixed;
  left: max(10px, env(safe-area-inset-left, 0px));
  bottom: max(10px, env(safe-area-inset-bottom, 0px));
  z-index: 100000;
  border: none;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, #ff9800, #ff5722);
  box-shadow: 0 8px 22px rgba(0,0,0,.28);
  cursor: pointer;
}

body.immersive-standalone #installPwaBtn {
  display: none !important;
}

.orientation-warning-inner .immersive-tip {
  margin-top: 12px;
  opacity: .92;
  font-size: .95rem;
  line-height: 1.35;
}

@media (orientation: landscape) and (max-height: 520px) {
  .immersive-inline-btn {
    padding: 7px 9px !important;
    font-size: .82rem !important;
    max-width: 112px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (orientation: landscape) and (max-width: 760px) {
  .immersive-inline-btn {
    width: 42px !important;
    min-width: 42px !important;
    padding: 7px !important;
    font-size: 0 !important;
  }
  .immersive-inline-btn::before {
    content: "⛶";
    font-size: 1.2rem;
  }
}