:root {
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-top: var(--safe-area-top);
  --safe-bottom: var(--safe-area-bottom);
}

html {
  min-width: 320px;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 320px;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}

button,
a,
label,
input,
select,
textarea {
  touch-action: manipulation;
}

button,
a {
  -webkit-user-select: none;
  user-select: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

input,
select,
textarea {
  font-size: 16px;
}

img,
svg {
  max-width: 100%;
}

img {
  height: auto;
}

/* Keep fixed and sticky surfaces below the camera cutout on iOS. */
.topbar {
  padding-top: var(--safe-area-top);
}

.topbar-inner {
  min-height: 68px;
}

.page-shell {
  padding-bottom: var(--safe-area-bottom);
}

.footer {
  padding-bottom: calc(40px + var(--safe-area-bottom));
}

.gallery-page > header {
  padding-top: var(--safe-area-top) !important;
}

.gallery-page #modal-content {
  max-height: calc(100vh - var(--safe-area-top));
  max-height: calc(100svh - var(--safe-area-top));
  max-height: calc(100dvh - var(--safe-area-top));
}

.gallery-page #modal-body {
  min-height: 0;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.gallery-page.no-scroll {
  overscroll-behavior: none;
}

@media (max-width: 820px) {
  .topbar-action,
  .control-button,
  .nav-dot,
  .gallery-page #quiz-prev,
  .gallery-page #quiz-next,
  .gallery-page header a[href="index.html"],
  .gallery-page header button {
    min-width: 44px;
    min-height: 44px;
  }

  .quiz-main,
  .progress-panel {
    min-width: 0;
  }

  .controls {
    padding-bottom: var(--safe-area-bottom);
  }
}

@media (max-width: 460px) {
  .shell {
    width: min(calc(100% - 20px), 1180px);
  }

  .topbar-inner {
    gap: 10px;
  }

  .topbar-actions {
    flex-shrink: 0;
  }

  .quiz-main {
    padding-right: 14px;
    padding-left: 14px;
  }

  .option-text,
  .question-help {
    overflow-wrap: anywhere;
  }

  .gallery-page > header .max-w-5xl {
    padding-right: max(.75rem, var(--safe-area-right));
    padding-left: max(.75rem, var(--safe-area-left));
  }

  .gallery-page > section,
  .gallery-page > main {
    padding-right: max(.75rem, var(--safe-area-right));
    padding-left: max(.75rem, var(--safe-area-left));
  }
}

@media (hover: none) and (pointer: coarse) {
  .option:hover,
  .gallery-page .quiz-option:hover,
  .gallery-page #quiz-prev:not(:disabled):hover,
  .gallery-page #quiz-next:not(:disabled):hover,
  .gallery-page .card:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
}