/* Fullscreen toggle, iOS add-to-home-screen tip (install.js) and safe-area layout for the game canvas.
   index.html sets viewport-fit=cover, so on notched phones (and the home-screen app with a translucent status
   bar) the page runs edge to edge; the canvas (and the HUD drawn on it) is kept inside the safe area here.
   The touch controls already inset themselves (mobile.css). */

#game {
  position: fixed;
  left: env(safe-area-inset-left, 0px);
  top: env(safe-area-inset-top, 0px);
  width: calc(100% - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  height: calc(100% - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}

/* ---- fullscreen toggle (menus only; hidden where the Fullscreen API is missing, e.g. iPhone) ---- */
.dcf-fs {
  position: fixed; z-index: 25; display: none;
  top: max(10px, env(safe-area-inset-top, 0px)); right: max(10px, env(safe-area-inset-right, 0px));
  width: 40px; height: 40px; padding: 8px; margin: 0; border-radius: 10px; cursor: pointer;
  background: rgba(11, 11, 14, 0.55); border: 2px solid rgba(255, 109, 0, 0.55); color: #f3f1ec; opacity: 0.75;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; outline: none;
}
.dcf-fs.on { display: block; }
.dcf-fs:hover, .dcf-fs:active { opacity: 1; border-color: #ffc400; }
.dcf-fs svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round; }
.dcf-fs .dcf-fs-out, .dcf-fs.full .dcf-fs-in { display: none; }
.dcf-fs.full .dcf-fs-out { display: inline; }

/* ---- iOS: "Add to Home Screen" tip on the title screen (top-left, clear of the centred logo) ---- */
.dcf-tip {
  position: fixed; z-index: 25; display: none; align-items: center; gap: 10px;
  left: max(10px, env(safe-area-inset-left, 0px)); top: max(10px, env(safe-area-inset-top, 0px));
  max-width: min(300px, calc(50vw - 190px)); min-width: 150px; padding: 7px 8px 7px 12px; border-radius: 12px;
  background: rgba(11, 11, 14, 0.82); border: 2px solid rgba(255, 196, 0, 0.7); color: #f3f1ec;
  font: 12px/1.3 'Russo One', 'Arial Black', Impact, sans-serif; letter-spacing: 0.03em;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.dcf-tip.on { display: flex; }
.dcf-tip-x {
  flex: none; width: 30px; height: 30px; padding: 0; margin: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 109, 0, 0.25); border: 1px solid rgba(255, 109, 0, 0.7); color: #f3f1ec;
  font: 20px/1 Arial, sans-serif; touch-action: manipulation;
}

/* ---- visually hidden, still read by screen readers (index.html copyright footer) ---- */
.dcf-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}