/* Native-feel reset for phone PWAs (Fisher Research standard, v1.2).
   Load before the app's own stylesheet. */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior: none;            /* no rubber-band bounce or pull-to-refresh */
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  min-height: 100dvh;
  overscroll-behavior: none;
  -webkit-user-select: none;            /* no text highlighting */
  user-select: none;
  -webkit-touch-callout: none;          /* no long-press copy/look-up menu */
  -webkit-font-smoothing: antialiased;
}

*, *::before, *::after {
  -webkit-tap-highlight-color: transparent;  /* no grey flash on tap */
  touch-action: manipulation;                /* no double-tap zoom, no 300 ms tap delay */
}

/* Text fields stay selectable and editable */
input, textarea, [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* iOS zooms the page when a field under 16px gets focus */
input, select, textarea { font-size: max(16px, 1em); }

/* Images and icons can't be dragged or long-pressed out */
img, svg { -webkit-user-drag: none; }

/* Buttons behave like controls, not links */
button { cursor: default; -webkit-appearance: none; appearance: none; }

/* No focus ring after a tap; keep it for keyboard users */
:focus:not(:focus-visible) { outline: none; }

/* Scroll areas inside the app don't drag the whole page with them */
.scroll-area { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* App shell: the header stays put and only the content scrolls, like a native screen.
   <body class="app-shell"><header class="app-header">…</header><main class="app-content">…</main></body>
   Reset .app-content's scrollTop to 0 when switching screens. */
body.app-shell { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
.app-shell > .app-header { flex: none; }
.app-shell > .app-content {
  flex: 1; min-height: 0; width: 100%;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}

/* One-screen views (players, board, controls…): the screen itself never scrolls.
   Give .app-content the class "locked" while such a view is showing, make the view
   a flex column with height: 100%, and let one flex: 1 area absorb the spare height. */
.app-content.locked { overflow: hidden; }

/* `hidden` always wins, even over display: flex */
[hidden] { display: none !important; }