/* ═══════════════════════════════════════════════════════════════
   NATIVE APP SHELL (iOS / Android)

   Only applies when js/native-shell.js has put .native-app on <html>,
   so the website is completely unaffected by everything in this file.

   The WebView draws edge to edge (overlaysWebView: true), which means the
   notch and the home indicator sit ON TOP of the page rather than beside it.
   Painting the full screen is what removes the white bands; keeping the
   controls out from under the hardware is what these rules do.
   ═══════════════════════════════════════════════════════════════ */

html.native-app,
html.native-app body {
  /* The safe areas are ours to paint now — without this the WebView's own
     backdrop shows through at the notch and the home indicator. */
  background: var(--bg);
  /* main.css pairs the background with `background-attachment: fixed`, which
     WKWebView implements badly: the painted area stops short of the safe
     areas and the view behind shows through as white bands at the notch and
     the home indicator. `scroll` is the plain, correct behaviour here — the
     background is a flat colour, so nothing is lost visually. */
  background-attachment: scroll;
  /* dvh tracks the real viewport; 100vh can overshoot on iOS and hand the
     page a scrollbar it should not have. */
  min-height: 100dvh;
}

/* The root element's background is what propagates to the page canvas, so this
   is the colour the WebView shows anywhere the body does not reach. */
html.native-app {
  background-color: var(--bg);
}

html.native-app .app {
  height: 100dvh;
}

/* The top bar starts at y=0 now, so grow it by the notch and push its
   contents below — otherwise the logo and balance sit under the clock. */
html.native-app .topbar {
  height: calc(46px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
}

/* The landing navbar is position:fixed at top:0, so padding on its parent
   cannot move it — it has to grow by the notch itself. Without this the
   wordmark and the Log In / Sign Up buttons sit under the clock and battery. */
html.native-app #auth-navbar {
  height: calc(72px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
}
@media (max-width: 768px) {
  html.native-app #auth-navbar {
    height: calc(54px + env(safe-area-inset-top, 0px));
  }
  /* The wordmark is absolutely centred (top:50%), and an absolute child
     resolves that against the PADDING box — so it centres across the notch
     strip too and floats above the logo and buttons, which are flex-centred in
     the content box. Half the inset puts it back on their line. */
  html.native-app .auth-nav-name {
    top: calc(50% + env(safe-area-inset-top, 0px) / 2);
  }
}

/* .auth-content clears the fixed navbar with a fixed 98px of padding, so it
   has to gain the same notch height or the hero slides up under the bar. */
html.native-app .auth-content {
  padding-top: calc(98px + env(safe-area-inset-top, 0px));
}

/* Login / register overlay. .afo-back is absolutely placed at top:22px, which
   on a notched phone lands it right on the clock. The overlay itself is
   position:fixed inset:0, so it needs the inset too or its content starts
   under the status bar. */
html.native-app #auth-form-overlay {
  padding-top: env(safe-area-inset-top, 0px);
}
html.native-app .afo-back {
  top: calc(22px + env(safe-area-inset-top, 0px));
}

/* Pinned to the bottom edge — keep it above the home indicator. */
html.native-app #cookie-banner {
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

/* Anything pinned to the top edge needs the same treatment. Sheets and modals
   that fill the screen would otherwise tuck their close button under the notch. */
html.native-app .sheet-full,
html.native-app .modal-full,
html.native-app .screen-header {
  padding-top: env(safe-area-inset-top, 0px);
}

/* No rubber-band scroll on the shell itself — it exposes the background behind
   the page and reads as a broken web view rather than an app. Individual
   scrollers keep their own momentum scrolling. */
html.native-app, html.native-app body {
  overscroll-behavior: none;
}

/* Text selection and the long-press callout are desktop affordances; in a game
   they only produce accidental blue highlights while tapping. Inputs keep both. */
html.native-app *:not(input):not(textarea):not([contenteditable]) {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* iOS zooms the whole page in when a focused input's font is under 16px. */
html.native-app input,
html.native-app textarea,
html.native-app select {
  font-size: max(16px, 1em);
}