/* Native-feel reset for phone PWAs (Fisher Research standard, v1.5).
   Load before the app's own stylesheet. On a phone or tablet (touch screen) text can't be highlighted
   or long-pressed; with a mouse, highlighting and right-click work as on any web page, and anything
   clickable shows the hand pointer. */

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-font-smoothing: antialiased;
}

/* Touch screens only: no text highlighting, no long-press copy/look-up menu */
@media (hover: none) and (pointer: coarse) {
  body {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
}

*, *::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; }

button { -webkit-appearance: none; appearance: none; }

/* With a mouse, anything clickable shows the hand pointer */
@media (hover: hover) and (pointer: fine) {
  button, a[href], select, summary, label[for], [role="button"] { cursor: pointer; }
  button:disabled { cursor: default; }
}

/* 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.
   The shell is pinned to the four screen edges rather than sized with 100vh/100dvh: in an
   iPhone home-screen app with a translucent status bar, those units leave out the status bar
   height, so the app would stop short and leave a dead band at the bottom. */
body.app-shell {
  display: flex; flex-direction: column;
  position: fixed; inset: 0; height: auto; min-height: 0;
  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; }