/* Fullscreen / immersive mode + tablet & phone tuning for Deep2Lead.
   Layer 1: body.gc-immersive reclaims the whole viewport (works everywhere).
   Layer 2: native Fullscreen API is requested by immersive.js on top. */

/* ── Floating enter/exit toggle — always visible above all game VFX ───────── */
#gcFullscreenToggle {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 100000;                 /* above #vfx-flash, story overlays, guide popups */
  width: 44px; height: 44px;       /* ≥44px touch target */
  border-radius: 12px;
  border: 1px solid rgba(120, 160, 220, .4);
  background: rgba(10, 16, 28, .78);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #e7edf7; font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, .45);
  transition: transform .12s ease, background .15s ease;
}
#gcFullscreenToggle:hover { background: rgba(20, 30, 48, .92); transform: scale(1.05); }
#gcFullscreenToggle:active { transform: scale(.94); }

/* ── Layout fullscreen: hide the sidebar chrome, give the game the viewport ─ */
body.gc-immersive #sidebar { display: none !important; }
body.gc-immersive #mainArea,
body.gc-immersive .main-area { margin-left: 0 !important; width: 100% !important; }
body.gc-immersive .main-area > .container { max-width: 100% !important; padding: 0 !important; }
body.gc-immersive #disclaimerBanner { display: none !important; }
/* hide the in-page header row (title + nav buttons) so the battle fills the screen */
body.gc-immersive .main-area > .container > .d-flex:first-child { display: none !important; }

/* first-run fullscreen nudge */
#gcFsNudge {
  position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 100000;
  background: rgba(10, 16, 28, .95); border: 1px solid rgba(34, 211, 238, .4);
  color: #e7edf7; border-radius: 12px; padding: 10px 14px; display: flex; gap: 10px; align-items: center;
  font-size: 13.5px; box-shadow: 0 6px 22px rgba(0, 0, 0, .5);
}
#gcFsNudge button { border: none; border-radius: 8px; padding: 6px 12px; font-weight: 700; cursor: pointer; font-size: 13px; }
#gcFsNudge .yes { background: linear-gradient(135deg, #3b82f6, #22d3ee); color: #04121e; }
#gcFsNudge .no { background: transparent; color: #93a4bf; }

/* ── Rotate-to-landscape hint on small portrait screens ───────────────────── */
#gcRotateHint { display: none; }
@media (max-width: 820px) and (orientation: portrait) {
  body.gc-immersive #gcRotateHint {
    display: flex; position: fixed; left: 50%; top: max(64px, env(safe-area-inset-top));
    transform: translateX(-50%); z-index: 99999;
    background: rgba(10, 16, 28, .9); border: 1px solid rgba(120, 160, 220, .3);
    color: #93a4bf; border-radius: 10px; padding: 7px 13px; font-size: 12.5px; gap: 7px; align-items: center;
  }
}

/* ── Tablet / phone tuning (no restructure — safe, additive) ───────────────── */
@media (max-width: 820px) {
  /* never let the battle push a horizontal scrollbar */
  body { overflow-x: hidden; }
  .game-container, #gameViewport { max-width: 100%; }
  /* touch-friendly primary game buttons */
  .game-container button, #gameViewport button { min-height: 40px; }
}