/* Website-only H5 finish. Mini-program styles remain in apps/weapp/src. */
#app .page {
  color: #f1eee6;
}

#app .page .title {
  font-family: "Noto Serif SC", "Songti SC", "Microsoft YaHei UI", serif;
}

#app .page :is(.subtitle, .tarot-deck-hint, .tarot-status-text, .tarot-progress-next,
  .spread-option-description, .spread-option-best, .spread-option-time,
  .tarot-question-lock-copy, .question-helper, .question-hint) {
  color: #cbd4ce;
  line-height: 1.55;
}

#app .page :is(button, textarea, input):focus-visible,
#app .page [role="button"]:focus-visible {
  outline: 2px solid #dfae78;
  outline-offset: 3px;
}

#app .page :is(.question-input, .answer-book-question, .text-input, textarea) {
  color: #f1eee6;
  caret-color: #dfae78;
}

#app .tarot-visual {
  background-image: linear-gradient(90deg, rgba(4, 10, 10, .32), rgba(4, 10, 10, .08)),
    url("/static/images/assets/tarot/visuals/tarot-hero-classical-web.webp");
  background-position: center;
  background-size: cover;
  max-height: 420px;
}

#app .tarot-result-hero {
  background: linear-gradient(180deg, rgba(5, 12, 13, .08) 30%, #101716 100%),
    url("/static/images/assets/tarot/visuals/tarot-hero-classical-web.webp") center 44% / cover;
  border-color: rgba(202, 165, 118, .45);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
}

#app .tarot-result-hero::before,
#app .tarot-result-hero-image,
#app .tarot-result-hero-vortex,
#app .tarot-result-hero-scan,
#app .tarot-result-hero-sparks { display: none; }

#app .tarot-result-hero::after {
  background: linear-gradient(180deg, transparent, #101716);
}

#app .tarot-result-hero-frame {
  border-color: rgba(202, 165, 118, .32);
  box-shadow: inset 0 0 0 1px rgba(13, 34, 34, .22);
}

#app .mystic-theme.result-ready:has(.api-upgrade-banner) .result-status.error-text {
  display: none;
}

#app .mystic-theme .insight-result-panel {
  background: #17211e;
  border: 1px solid rgba(202, 165, 118, .52);
  border-radius: 8px;
  box-shadow: none;
}

#app .mystic-theme .insight-result-panel::before,
#app .mystic-theme .insight-result-panel::after { display: none; }

#app .mystic-theme .insight-result-head {
  border-bottom-color: rgba(202, 165, 118, .34);
}

#app .mystic-theme .insight-result-label,
#app .mystic-theme .insight-result-summary {
  background: none;
  color: #f1eee6;
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
}

#app .mystic-theme .insight-result-label { color: #dbb788; }
#app .mystic-theme .insight-result-summary { font-weight: 500; text-align: left; }
#app .mystic-theme .focus-badge {
  background: #24332d;
  border: 1px solid #718578;
  color: #e7eee6;
}

#app .mystic-theme .api-upgrade-banner {
  background: #1a2421;
  border: 1px solid #7c8e80;
  border-radius: 8px;
  gap: 10px;
}

#app .mystic-theme .api-upgrade-banner .banner-text {
  color: #e8eee7;
}

#app .mystic-theme .action-dock {
  background: #101716;
  border-top: 1px solid rgba(223, 174, 120, .52);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, .42);
}

#app .mystic-theme .action-dock .primary-button.glowing-btn,
#app .mystic-theme .api-upgrade-banner .upgrade-btn {
  background: #c47a4b;
  border: 1px solid #e1a679;
  box-shadow: none;
  color: #171311;
}

#app .mystic-theme .action-dock .secondary-button.ghost-btn {
  background: #17201e;
  border: 1px solid #68796f;
  box-shadow: none;
  color: #f1eee6;
}

@media (max-width: 720px) {
  #app .page .title { font-size: 24px; line-height: 1.25; }
  #app .page .subtitle { font-size: 15px; line-height: 1.5; }
  #app .page :is(.question-input, .answer-book-question, .text-input, textarea) {
    font-size: 16px !important;
    line-height: 1.5;
  }
  #app .page :is(.topic-chip, .spread-option-title, .spread-selected,
    .tarot-deck-title, .tarot-status-label, .tarot-progress-title,
    .tarot-question-lock-title, .answer-book-topic) { font-size: 15px; }
  #app .page :is(.spread-option-description, .spread-option-best, .spread-option-time,
    .tarot-deck-hint, .tarot-status-text, .tarot-progress-next,
    .tarot-question-lock-copy) { font-size: 13px; }
  #app .page button:not(.tarot-selection-card):not(.tarot-deck-card) {
    min-height: 44px;
  }
  #app .tarot-visual { max-height: 230px; }
  #app .tarot-visual::after { opacity: .3; }
  #app .tarot-selection-rail {
    gap: 12px;
    padding: 16px 20px 24px;
  }
  #app .tarot-selection-card {
    flex: 0 0 94px;
    height: 154px;
    padding: 0 10px 12px;
  }
  #app .tarot-selection-card .tarot-deck-card-index,
  #app .tarot-selection-card .tarot-deck-card-prompt {
    font-size: 13px;
    letter-spacing: 0;
  }
  #app .tarot-selection-stage { min-height: 205px; }
  #app .mystic-theme .api-upgrade-banner {
    margin: 14px auto;
    padding: 14px;
    width: calc(100% - 20px);
  }
  #app .mystic-theme .api-upgrade-banner .banner-text {
    font-size: 14px;
    line-height: 1.45;
  }
  #app .mystic-theme .api-upgrade-banner .upgrade-btn {
    border-radius: 8px;
    font-size: 15px;
    min-height: 44px;
    width: 100%;
  }
  #app .mystic-theme .action-dock {
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  }
  #app .mystic-theme .action-dock .commercial-hook { display: none; }
  #app .mystic-theme .action-dock .button-row { gap: 8px; }
  #app .mystic-theme .action-dock .button-row button {
    border-radius: 8px;
    font-size: 15px;
    height: 44px;
    min-height: 44px;
    padding: 0 8px;
  }
  #app .mystic-theme .action-dock .result-next-row { margin-top: 7px; }
  #app .mystic-theme .action-dock .result-feedback-link { margin-top: 5px; }
  #app .mystic-theme .action-dock .result-feedback-text { font-size: 12px; }
  #app .mystic-theme .action-dock .result-disclaimer {
    color: #b9c4bd;
    font-size: 11px;
    line-height: 1.3;
    margin-top: 5px;
  }
  #app .mystic-theme .bottom-padding { height: 230px; }
  #app .mystic-theme :is(.result-status, .insight-result-summary,
    .result-content, .insight-result-label) {
    font-size: 15px;
    line-height: 1.55;
  }
  #app .mystic-theme .insight-result-panel { padding: 18px; }
  #app .mystic-theme .insight-result-summary { margin-top: 12px; }
  #app .mystic-theme .focus-badge { font-size: 12px; padding: 6px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  #app .page *, #app .page *::before, #app .page *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Website draw rail: keep the first card inside the horizontal scroll origin. */
#app .tarot-selection-stage { align-items: stretch; }
#app .tarot-selection-rail {
  align-self: flex-start;
  justify-content: flex-start;
  min-width: 100%;
  width: max-content;
}
#app .tarot-selection-card { touch-action: manipulation; }
#app .tarot-selection-card-drawing { animation: none; visibility: hidden; }
#app .tarot-progress-slot-latest,
#app .tarot-progress-slot-latest::after,
#app .tarot-progress-slot-latest .tarot-card-view-animate-reveal {
  animation: none;
}
.site-card-flight {
  animation: none !important;
  box-sizing: border-box;
  margin: 0 !important;
  pointer-events: none !important;
  position: fixed !important;
  transform: none !important;
  transition: none !important;
  z-index: 10000 !important;
}
.site-motion-status {
  background: #142320;
  border: 1px solid #b59468;
  border-radius: 6px;
  bottom: max(20px, env(safe-area-inset-bottom));
  color: #f2e8d4;
  font-size: 14px;
  left: 50%;
  max-width: calc(100vw - 32px);
  opacity: 0;
  padding: 9px 15px;
  pointer-events: none;
  position: fixed;
  text-align: center;
  transform: translateX(-50%);
  transition: opacity 180ms ease;
  z-index: 10001;
}
.site-motion-status.is-visible { opacity: 1; }

@media (max-width: 720px) {
  #app .tarot-selection-stage { min-height: 218px; }
  #app .tarot-selection-rail { padding-left: 14px; padding-right: 14px; }
  #app .tarot-selection-card { flex-basis: 96px; height: 158px; }
  #app .tarot-progress-panel {
    position: sticky;
    top: 0;
    z-index: 30;
    background: #0d1a19;
    padding: 8px 0 10px;
  }
  #app .tarot-progress-heading { align-items: center; padding: 0 14px 7px; }
  #app .tarot-progress-title { font-size: 15px; }
  #app .tarot-progress-next { font-size: 12px; }
  #app .tarot-progress-track { gap: 9px; padding: 0 14px 4px; }
  #app .tarot-progress-slot { flex-basis: 86px; min-width: 86px; }
  #app .tarot-progress-slot-head { min-height: 20px; margin-bottom: 4px; }
  #app .tarot-progress-number { font-size: 11px; }
  #app .tarot-progress-position { font-size: 11px; }
  #app .tarot-progress-slot .tarot-card-view,
  #app .tarot-progress-empty { width: 86px; }
  #app .tarot-progress-empty { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  #app .tarot-selection-card-drawing { visibility: visible; }
  .site-motion-status { transition: none; }
}

/* A page lifts from the right leaf, crosses the spine, then rests before text appears. */
#app .answer-book-visual-opening .answer-book-art-stage,
#app .answer-book-visual-opening .answer-book-veil-left,
#app .answer-book-visual-opening .answer-book-veil-right { animation: none; }
#app .answer-book-visual-opening .answer-book-flip-leaf {
  animation: site-book-turn 1760ms cubic-bezier(.32,.04,.16,1) both;
}
@keyframes site-book-turn {
  0% { opacity: 0; transform: rotateY(0deg) translateZ(0); }
  7% { opacity: 1; transform: rotateY(-4deg) translateZ(10px); }
  24% { opacity: 1; transform: rotateY(-34deg) translateZ(38px); }
  48% { opacity: 1; transform: rotateY(-91deg) translateZ(72px); }
  75% { opacity: 1; transform: rotateY(-157deg) translateZ(25px); }
  87% { opacity: .88; transform: rotateY(-179deg) translateZ(2px); }
  100% { opacity: 0; transform: rotateY(-180deg) translateZ(0); }
}
#app .answer-book-visual-result .answer-book-inscription {
  transition: opacity 220ms ease;
}

/* Three discrete instrument stages; the final reading remains still. */
#app .stellar-progress-segment { transition: background 220ms ease, box-shadow 220ms ease; }
#app .stellar-instrument-spinning .stellar-engraving-ring { animation-duration: 2250ms; }
#app .stellar-stage-complete .stellar-orbit,
#app .stellar-stage-complete .stellar-dial,
#app .stellar-stage-complete .stellar-gear-ring { animation: none; }
#app .stellar-trace-field,
#app .stellar-connection { pointer-events: none; }

/* Shared controls acknowledge an action without competing with scene motion. */
#app .page button:not([disabled='true']):not(:disabled):active { filter: brightness(1.12); }
#app .page button[disabled='true'],
#app .page button:disabled { cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  #app .answer-book-visual-opening .answer-book-flip-leaf { animation: none; }
  #app .answer-book-visual-result .answer-book-inscription { transition: none; }
  #app .stellar-progress-segment { transition: none; }
}