* { font-family: var(--font-secondary), sans-serif; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-primary), serif; }
.fancy { font-family: var(--font-fancy), serif; font-weight: 400 !important; font-style: normal !important; }
.mystery { font-family: var(--font-mystery), serif; font-style: normal !important; }

::-webkit-scrollbar { width: 0px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-neutral-800); }
::-webkit-scrollbar-thumb { background-color: var(--color-accent-700); border-radius: 0px; }

.pageTransition-enter-active,
.pageTransition-leave-active { transition: opacity 0.2s ease; }

.pageTransition-enter-from,
.pageTransition-leave-to { opacity: 0; }

button { transition: all 0.4s; }

.modal-background-enter-active,
.modal-background-leave-active { transition: opacity 0.3s ease; }

.modal-background-enter-from,
.modal-background-leave-to { opacity: 0; }

.modal-pop-enter-active { transition: all 0.3s ease-out; }
.modal-pop-leave-active { transition: all 0.2s ease-in; }

.modal-pop-enter-from,
.modal-pop-leave-to { transform: scale(0.9); opacity: 0; }

/* ------------------------------------------------------------
   Mobile viewport + bottom-bar safety

   Why:
   - Mobile browsers (especially iOS Safari) have a *dynamic* viewport when the
     top/bottom browser chrome expands/collapses. Pure `100vh` / Tailwind's
     `h-screen` (height: 100vh) can be larger than the actually visible area,
     causing bottom-anchored UI to render out of frame.

   Approach:
   - JS keeps `--app-viewport-height` in sync with `visualViewport.height`.
   - We override `html.h-screen` (set in index.php inline CSS) to use that var.
   - We reserve space for the fixed mobile bottom bar using `.app-main`.
------------------------------------------------------------ */

:root {
  --app-viewport-height: 100vh;
  --mobile-bottom-bar-height: 64px;
  --mobile-bottom-bar-offset: calc(var(--mobile-bottom-bar-height) + env(safe-area-inset-bottom));
}

/* Override the inline `.h-screen { height: 100vh }` in index.php */
html.h-screen {
  height: var(--app-viewport-height) !important;
}

body,
#app {
  height: 100%;
}

@media (max-width: 767px) {
  .app-main {
    padding-bottom: var(--mobile-bottom-bar-offset);
  }
}

/* Hide the fixed mobile bottom bar while the on-screen keyboard is open */
html.keyboard-open .mobile-bottom-bar {
  display: none !important;
}

/* When the bar is hidden, don’t reserve extra space at the bottom */
@media (max-width: 767px) {
  html.keyboard-open .app-main {
    padding-bottom: 0 !important;
  }
}