/* SO, HWATU v38 — mobile/popup and non-interactive feature styling fixes */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.app-shell, main, .hero, .hero-copy, .panel, .about-card, .about-copy,
.section-heading, .modal-card, .detail-card, .modal-head, .modal-body,
.modal-text-grid, .four-cards, .detail-copy, .media-showcase, .tarot-media-row {
  min-width: 0;
  max-width: 100%;
}

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

/* Reviewer feedback: these are descriptive chips, not buttons. */
.feature-pills {
  list-style: none;
  padding-left: 0;
}
.feature-pills li {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 3px 0 !important;
  cursor: default !important;
  pointer-events: none;
}
.feature-pills li::before {
  content: "•";
  display: inline-block;
  margin-right: .45em;
  opacity: .65;
}

/* Keep popups inside the mobile viewport and above the safe area. */
.modal,
.card-detail-modal,
.history-modal {
  box-sizing: border-box;
  padding-left: max(10px, env(safe-area-inset-left));
  padding-right: max(10px, env(safe-area-inset-right));
  padding-top: max(10px, env(safe-area-inset-top));
  padding-bottom: max(18px, env(safe-area-inset-bottom));
  overflow: hidden;
}

.modal-card,
.detail-card,
.history-modal-card {
  width: min(960px, calc(100vw - 20px)) !important;
  max-width: calc(100vw - 20px) !important;
  max-height: calc(100dvh - 28px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

.modal-body,
.detail-copy,
.history-modal-copy {
  overflow-wrap: anywhere;
  word-break: normal;
}

.four-cards > *,
.modal-text-grid > *,
.media-showcase > *,
.tarot-media-row > * {
  min-width: 0;
}

footer {
  max-width: 100%;
  overflow-wrap: anywhere;
}

@media (max-width: 680px) {
  .app-shell {
    width: 100%;
    overflow-x: hidden;
  }

  .hero,
  .panel,
  .about-card,
  .result-card,
  .empty-state {
    max-width: 100%;
    overflow-x: hidden;
  }

  .modal-head,
  .modal-text-grid,
  .detail-card,
  .history-modal-card {
    grid-template-columns: 1fr !important;
  }

  .modal-head > img,
  .detail-card > img,
  .history-modal-card > img {
    width: min(230px, 72vw) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .four-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100%;
  }

  .four-cards img {
    width: 100% !important;
    height: auto !important;
  }

  .modal-close {
    position: sticky;
    top: 0;
    margin-left: auto;
    z-index: 4;
  }

  .feature-pills {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 3px 14px !important;
    width: 100%;
  }
}

@media (max-width: 420px) {
  .four-cards,
  .feature-pills {
    grid-template-columns: 1fr 1fr !important;
  }
  .modal-card,
  .detail-card,
  .history-modal-card {
    width: calc(100vw - 14px) !important;
    max-width: calc(100vw - 14px) !important;
  }
}

/* v39 — simplify the landing screen and separate navigation from primary action */
.hero-actions-simple {
  display: flex !important;
  gap: 0 !important;
  flex-wrap: nowrap !important;
}

.hero-actions-simple .button {
  width: auto;
  min-width: min(260px, 100%);
}

/* Hide legacy descriptive chips if an older base file restores them. */
.hero-copy > .feature-pills {
  display: none !important;
}

/* Keep the main CTA visually dominant. */
.hero-actions-simple .button.primary {
  padding-inline: 28px;
}

@media (max-width: 680px) {
  body {
    padding-bottom: calc(82px + env(safe-area-inset-bottom));
  }

  .hero-copy {
    text-align: left;
  }

  .hero-actions-simple,
  .hero-actions-simple .button {
    width: 100% !important;
  }

  .hero-actions-simple .button {
    display: flex;
    justify-content: center;
  }

  /* App navigation: visually separate it from content buttons. */
  .tabs {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    z-index: 9500 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 6px !important;
    border: 1px solid rgba(157, 15, 21, .14) !important;
    border-radius: 18px !important;
    background: rgba(255, 250, 241, .96) !important;
    box-shadow: 0 10px 30px rgba(30, 20, 15, .16) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .tabs .tab {
    min-width: 0 !important;
    padding: 10px 5px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .tabs .tab.active {
    box-shadow: none !important;
  }

  footer {
    padding-bottom: 16px;
  }
}

@media (max-width: 420px) {
  .tabs .tab {
    font-size: 11px !important;
    padding-inline: 3px !important;
  }
}


/* v40: prevent sideways popup movement and keep the lower edge reachable on mobile */
.modal,
.card-detail-modal,
.history-modal {
  overscroll-behavior-x: none;
  touch-action: pan-y;
}
.modal-card,
.detail-card,
.history-modal-card,
.modal-body,
.four-cards {
  overscroll-behavior-x: none;
  touch-action: pan-y;
}
@media (max-width: 680px) {
  .modal.open,
  .card-detail-modal.open,
  .history-modal.show {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    align-items: flex-start !important;
    -webkit-overflow-scrolling: touch;
  }
  .modal-card,
  .detail-card,
  .history-modal-card {
    margin-top: max(6px, env(safe-area-inset-top)) !important;
    margin-bottom: max(18px, env(safe-area-inset-bottom)) !important;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }
}