/* Native-app feel — applies only inside the Capacitor shell (html.cap-app),
   so regular web/desktop is untouched. Removes the browser "tells" that make
   a WebView feel like a website. */

html.cap-app {
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;              /* no rubber-band / pull-to-refresh */
  -webkit-user-select: none;
}

/* The native shell paints a dark (#08080c) background behind the webview; in
   light mode that shows as dark screen edges. Paint the html/body with the
   theme background so the whole viewport matches the current theme. */
html.cap-app, html.cap-app body { background: var(--bg-primary, #0a0a0f) !important; }
/* Light mode's page bg (#c4c7cd) reads as "darkish" at the screen edges in the
   app — lighten it to a cleaner light while keeping cards slightly elevated. */
html.cap-app[data-theme="light"], html.cap-app[data-theme="light"] body { background: #dcdfe3 !important; }
/* The title header band uses --bg-secondary (#b7bbc2 — darker than the lightened
   body), which shows as a darker band. Match it to the body; the border-bottom
   still separates it. */
html.cap-app[data-theme="light"] .main-header { background: #dcdfe3 !important; }

/* The bottom-bar Menu button replaces the top hamburger — hide the top one so
   there aren't two menu triggers. It stays in the DOM so the bottom Menu can
   still programmatically click it to open the drawer. */
html.cap-app #mobileMenuToggle { display: none !important; }

/* Vibration toggle — must look IDENTICAL to the sound toggle next to it, in both
   its bare and in-game .btn forms. Values copied from .sound-toggle /
   .btn.sound-toggle so the pair reads as one consistent control (theme vars keep
   them matching in light/dark). */
html.cap-app .haptics-toggle {
  background: none; border: none; font-size: 1.125rem; cursor: pointer;
  padding: 0.25rem 0.375rem; border-radius: 0.25rem; opacity: 0.7;
  transition: opacity 0.2s, background 0.2s; line-height: 1;
}
html.cap-app .haptics-toggle:hover, html.cap-app .haptics-toggle:active {
  opacity: 1; background: rgba(255, 255, 255, 0.1);
}
html.cap-app .btn.haptics-toggle {
  background: var(--bg-tertiary, #2a2f3a); border: 1px solid var(--border, #3a3f4a);
  color: #cdd5e2; padding: 0.5rem 0.875rem; font-size: 1.125rem; opacity: 1; min-width: 2.625rem;
}
html.cap-app .btn.haptics-toggle:hover {
  background: var(--bg-card, #353a47); border-color: var(--accent, #22d3ee);
}

/* Fingerprint back button (.fp-back-btn, position:absolute top/right) has no
   positioning context because .fp-hero is static, so it escaped to the viewport
   top and landed under the header's Buy button. Give .fp-hero a context so the
   back button sits in the hero card's top-right, clear of the header. */
html.cap-app .fp-hero { position: relative; }

/* Kill tap highlight + long-press callout on interactive elements, and remove
   the ~click delay so taps feel instant/native. */
html.cap-app button,
html.cap-app .btn,
html.cap-app .nav-item,
html.cap-app a,
html.cap-app [role="button"],
html.cap-app [onclick],
html.cap-app label,
html.cap-app .archetype-card,
html.cap-app .suggestion-item {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

/* Chrome shouldn't be text-selectable (feels like an app); keep inputs, the
   board, and anything marked .selectable selectable. */
html.cap-app :not(input):not(textarea):not([contenteditable]):not(.selectable):not(.selectable *) {
  -webkit-user-select: none;
  user-select: none;
}

/* Subtle, native-feeling press feedback (scale) on primary controls. */
html.cap-app button:active,
html.cap-app .btn:active,
html.cap-app .nav-item:active,
html.cap-app .archetype-card:active {
  transform: scale(0.975);
  transition: transform .05s ease;
}

/* Smooth momentum scrolling inside scroll areas. */
html.cap-app, html.cap-app body { -webkit-overflow-scrolling: touch; }


/* Show the page subtitle in the app — mobile web hides it to save space, but in
   the app the one-line description under each title helps orient the user.
   Readable in both themes (uses the theme-aware muted token). */
html.cap-app #pageSubtitle {
  display: block !important;
  color: var(--text-muted, #9aa0ac);
  font-size: 12.5px;
  line-height: 1.35;
  margin-top: 2px;
  max-width: 90vw;
}

/* ---- Native-style bottom navigation bar (app only) ---- */
html.cap-app.has-cpbn #cpBottomNav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
  display: flex; align-items: stretch;
  background: var(--bg-sidebar, #0a0a0f);            /* theme-aware: light in light mode */
  border-top: 1px solid var(--border-dark, rgba(212, 175, 55, 0.16));
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
html.cap-app #cpBottomNav .cpbn-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 7px 2px 6px; background: none; border: none;
  color: var(--text-muted, #83839a); font-size: 10px; font-weight: 600; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: transform .05s ease, color .15s ease;
}
html.cap-app #cpBottomNav .cpbn-lb { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.cap-app #cpBottomNav .cpbn-ic { font-size: 19px; line-height: 1; }
html.cap-app #cpBottomNav .cpbn-item.active { color: var(--accent-gold, #f0c75e); }
html.cap-app #cpBottomNav .cpbn-item:active { transform: scale(.93); }
/* keep content clear of the bar */
html.cap-app.has-cpbn .main-content { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important; }
/* hide during a game so the board keeps the whole screen */
html.cap-app body.in-game #cpBottomNav { display: none; }
html.cap-app.has-cpbn body.in-game .main-content { padding-bottom: 0.75rem !important; }