/* ------------------------------------------------------------------------
   The Decoding Studio modal, on its own.

   The modal is the only part of the new design the boss asked for: the site
   stays the site it is, and clicking "start the journey" opens this over it
   instead of walking the reader to onboarding.php. So the rules that used to
   live in t2.less next to the one-page layout are lifted out here, every one
   of them scoped to `.journey-overlay`.

   The scoping is not cosmetic. t2.less styles `body`, `*` and `button`
   outright, the way the prototype's own stylesheet did; dropped on top of
   D2styles.css that would repaint the landing page. Nothing here reaches
   outside the overlay, apart from `body.t2-locked`, which is how the page
   underneath is held still while the modal is open.

   The rules themselves are the prototype's, unchanged -- see the note in
   TheBug2Web.md before "fixing" anything in them. The one-page version of
   the site keeps its own copy in t2.less (index_t2.php still uses it).

   NOTE ON LESS: written as plain CSS, the same way t2.less is. Easy LESS
   compiles and reformats it, so t2_modal.css is its output rather than a copy
   -- and any min()/max() holding a subtraction has to be escaped, ~"min(...)",
   or LESS does the arithmetic itself. See the longer note in t2.less.
   ------------------------------------------------------------------------ */
/* --- What the prototype put on :root, body and * -------------------- */
/* Scoped to the overlay, so the page underneath keeps its own. */
.journey-overlay {
  --primary: #c91645;
  --primary-foreground: #fffaf4;
  --background: #fffdf9;
  --foreground: #241d3d;
  --card: #fff;
  --card-foreground: #241d3d;
  --popover: #fff;
  --popover-foreground: #241d3d;
  --secondary: #f7f1e9;
  --secondary-foreground: #503a4e;
  --muted: #f3ede6;
  --muted-foreground: #756b78;
  --accent: #f6d647;
  --accent-foreground: #3b2d34;
  --destructive: #c91645;
  --destructive-foreground: #fff;
  --border: #eadfd8;
  --input: #ded2cf;
  --ring: #c91645;
  --radius: 1rem;
  color: var(--foreground);
  font-family: Noto Sans TC, ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.journey-overlay,
.journey-overlay *,
.journey-overlay *:before,
.journey-overlay *:after {
  box-sizing: border-box;
}
.journey-overlay button,
.journey-overlay input,
.journey-overlay textarea,
.journey-overlay select {
  font: inherit;
}
.journey-overlay button {
  border: 0;
}
.journey-overlay button:focus-visible,
.journey-overlay input:focus-visible,
.journey-overlay textarea:focus-visible,
.journey-overlay select:focus-visible {
  outline-offset: 3px;
  outline: 3px solid #c9164547;
}
.journey-overlay button:not(:disabled),
.journey-overlay [role=button]:not([aria-disabled=true]),
.journey-overlay a[href],
.journey-overlay select:not(:disabled) {
  cursor: pointer;
}
.journey-overlay em {
  color: #c91645;
  font-style: normal;
}
/* An overlay that is `hidden` has to beat its own `display:grid`. */
.journey-overlay[hidden],
.journey-overlay [hidden] {
  display: none !important;
}
/* The page underneath is held still while the modal is open. This is the
   one rule in the file that reaches outside the overlay. */
body.t2-locked {
  overflow: hidden;
}
/* --- Shared pieces the modal borrows from the page ------------------ */
/* .eyebrow, .primary-button and .character-badge are defined near the top
   of t2.less for the whole site; the modal needs its own scoped copies. */
.journey-overlay .eyebrow {
  color: #766b79;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  align-items: center;
  gap: 8px;
  font-family: Space Grotesk, sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  display: inline-flex;
}
.journey-overlay .eyebrow-dot {
  background: #c91645;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  box-shadow: 0 0 0 5px #c916451f;
}
.journey-overlay .primary-button {
  color: #fffaf4;
  background: #c91645;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 9px;
  padding: 14px 20px;
  font-size: 12px;
  font-weight: 800;
  transition: transform 0.18s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.18s, background 0.18s;
  display: inline-flex;
  box-shadow: 0 8px 18px #c916452b;
}
.journey-overlay .primary-button:hover {
  background: #a90e38;
  transform: translateY(-2px);
  box-shadow: 0 12px 22px #c916453d;
}
.journey-overlay .primary-button:active,
.journey-overlay .secondary-button:active,
.journey-overlay .cast-button:active {
  transform: scale(0.97);
}
.journey-overlay .primary-button:disabled {
  cursor: not-allowed;
  opacity: 0.4;
  box-shadow: none;
}
.journey-overlay .character-badge {
  color: #fff;
  border-radius: 42% 58% 49% 51%;
  place-items: center;
  width: 45px;
  height: 45px;
  font-family: Space Grotesk, sans-serif;
  font-size: 17px;
  font-weight: 800;
  display: inline-grid;
  position: relative;
  box-shadow: inset -4px -5px #241d3d21, 0 5px 8px #241d3d17;
}
.journey-overlay .character-badge:before,
.journey-overlay .character-badge:after {
  content: "";
  opacity: 0.78;
  background: currentColor;
  border-radius: 50%;
  width: 11px;
  height: 7px;
  position: absolute;
  top: -3px;
}
.journey-overlay .character-badge:before {
  left: 7px;
  transform: rotate(-30deg);
}
.journey-overlay .character-badge:after {
  right: 7px;
  transform: rotate(30deg);
}
.journey-overlay .character-badge-pink {
  color: #f5b8cf;
  background: #ed6c9d;
}
.journey-overlay .character-badge-blue {
  color: #a2e0ee;
  background: #54badb;
}
.journey-overlay .character-badge-yellow {
  color: #ffe9a0;
  background: #f2c735;
}
.journey-overlay .character-badge-green {
  color: #b5dda0;
  background: #78ba71;
}
.journey-overlay .character-badge-purple {
  color: #a894d3;
  background: #7451a7;
}
.journey-overlay .character-badge-red {
  color: #ed738f;
  background: #c91645;
}
.journey-overlay .character-badge span {
  z-index: 1;
  color: #fff;
  text-shadow: 1px 1px #241d3d29;
  position: relative;
}
/* A destination that is a real page is a link here, not a button. */
.journey-overlay .quiet-link,
.journey-overlay .topic-card,
.journey-overlay a.primary-button,
.journey-overlay a.secondary-button,
.journey-overlay a.ghost-button {
  text-decoration: none;
}
/* --- The modal itself, lifted from t2.less --------------------------- */
.journey-overlay {
  /* 50 in the prototype, which had the page to itself. Here the modal has
     to clear the site's own chrome, and stay under .modal-overlay (1000)
     so signing in from a topic card still lands on top of it. */
  z-index: 900;
  place-items: center;
  padding: 22px;
  display: grid;
  position: fixed;
  inset: 0;
}
.journey-overlay .journey-backdrop {
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  background: #241d3d9e;
  animation: 0.24s both fade-in;
  position: absolute;
  inset: 0;
}
.journey-overlay .journey-modal {
  z-index: 1;
  background: #fffdf9;
  border: 1px solid #241d3d1f;
  border-radius: 30px;
  width: min(1020px, 100%);
  max-height: min(790px,100vh - 44px);
  animation: 0.42s cubic-bezier(0.23, 1, 0.32, 1) both modal-in;
  position: relative;
  overflow: auto;
  box-shadow: 0 35px 90px #140a1e47;
}
.journey-overlay .journey-topbar {
  border-bottom: 1px solid #eee4de;
  justify-content: space-between;
  align-items: center;
  padding: 20px 26px;
  display: flex;
}
.journey-overlay .modal-brand {
  color: #241d3d;
  align-items: center;
  gap: 8px;
  font-family: Space Grotesk, sans-serif;
  font-size: 12px;
  font-weight: 900;
  display: flex;
}
.journey-overlay .modal-brand img {
  object-fit: contain;
  width: 24px;
  height: 24px;
}
.journey-overlay .modal-brand small {
  color: #a699a2;
  letter-spacing: 0.14em;
  font-size: 8px;
  display: block;
}
.journey-overlay .close-button {
  color: #241d3d;
  background: #f3ede6;
  border-radius: 50%;
  place-items: center;
  width: 34px;
  height: 34px;
  transition: transform 0.2s, background 0.2s;
  display: grid;
}
.journey-overlay .close-button:hover {
  background: #f4d5dc;
  transform: rotate(90deg);
}
.journey-overlay .journey-content {
  padding: 38px 55px 55px;
}
.journey-overlay .step-dots {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 37px;
  display: flex;
}
.journey-overlay .step-label {
  color: #a699a2;
  letter-spacing: 0.14em;
  font-family: Space Grotesk, sans-serif;
  font-size: 9px;
  font-weight: 700;
}
.journey-overlay .dots {
  gap: 5px;
  display: flex;
}
.journey-overlay .dots span {
  background: #eadfd8;
  border-radius: 20px;
  width: 24px;
  height: 4px;
  display: block;
}
.journey-overlay .dots span.is-active {
  background: #c91645;
}
.journey-overlay .choose-content {
  text-align: center;
  position: relative;
}
.journey-overlay .choose-content h1,
.journey-overlay .question-copy h1,
.journey-overlay .birth-copy h1,
.journey-overlay .cast-content h1,
.journey-overlay .map-content h1,
.journey-overlay .result-content h1,
.journey-overlay .ziwei-result-content h1 {
  color: #241d3d;
  letter-spacing: -0.08em;
  margin: 12px 0;
  font-size: clamp(40px, 6vw, 62px);
  font-weight: 900;
  line-height: 0.98;
}
.journey-overlay .journey-lede {
  color: #756b78;
  margin: 0 auto;
  font-size: 13px;
  line-height: 1.8;
}
.journey-overlay .method-choices {
  text-align: left;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  max-width: 780px;
  margin: 43px auto 20px;
  display: grid;
}
.journey-overlay .method-choice {
  color: #241d3d;
  text-align: left;
  border: 1px solid #241d3d1f;
  border-radius: 22px;
  grid-template-columns: 53px 1fr 20px;
  align-items: center;
  gap: 13px;
  min-height: 132px;
  padding: 21px;
  transition: transform 0.22s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.22s;
  display: grid;
}
.journey-overlay .choice-iching {
  background: #d7f1f2;
}
.journey-overlay .choice-ziwei {
  background: #f9e6ee;
}
.journey-overlay .method-choice:hover {
  transform: translateY(-5px) rotate(-0.8deg);
  box-shadow: 0 17px 30px #241d3d1f;
}
.journey-overlay .choice-icon {
  color: #241d3d;
  background: #fffdf9;
  border: 2px solid #241d3d;
  border-radius: 44% 56% 53% 47%;
  place-items: center;
  width: 53px;
  height: 53px;
  display: grid;
}
.journey-overlay .method-choice h3 {
  letter-spacing: -0.04em;
  margin: 6px 0 4px;
  font-size: 19px;
  font-weight: 900;
}
.journey-overlay .method-choice p {
  color: #6e6170;
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
}
.journey-overlay .choice-kicker {
  color: #766b79;
  letter-spacing: 0.12em;
  font-family: Space Grotesk, sans-serif;
  font-size: 8px;
  font-weight: 800;
}
.journey-overlay .quiet-link {
  color: #756b78;
  background: 0 0;
  align-items: center;
  gap: 6px;
  padding: 8px;
  font-size: 11px;
  display: inline-flex;
}
.journey-overlay .quiet-link:hover {
  color: #c91645;
}
.journey-overlay .character-orbit {
  place-items: center;
  animation: 4s ease-in-out infinite sticker-bob;
  display: grid;
  position: absolute;
}
.journey-overlay .orbit-left {
  top: 140px;
  left: 15px;
  transform: rotate(-17deg);
}
.journey-overlay .orbit-right {
  animation-delay: -1.5s;
  bottom: 45px;
  right: 16px;
  transform: rotate(15deg);
}
.journey-overlay .modal-split {
  grid-template-columns: 0.88fr 1.12fr;
  align-items: center;
  gap: 46px;
  display: grid;
}
.journey-overlay .question-copy p,
.journey-overlay .birth-copy p {
  color: #756b78;
  max-width: 340px;
  margin: 0;
  font-size: 13px;
  line-height: 1.85;
}
.journey-overlay .prompt-tags {
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 25px;
  display: flex;
}
.journey-overlay .prompt-tags button {
  color: #756b78;
  background: #fff;
  border: 1px solid #e1d5d2;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 11px;
}
.journey-overlay .prompt-tags button:hover {
  color: #c91645;
  background: #fff3f5;
  border-color: #ee7f9f;
}
.journey-overlay .question-card-wrap {
  position: relative;
}
.journey-overlay .modal-art {
  object-fit: cover;
  mix-blend-mode: multiply;
  border-radius: 24px;
  width: 100%;
  height: 230px;
  display: block;
}
.journey-overlay .question-card,
.journey-overlay .birth-form-card {
  background: #fffdf9f2;
  border: 1px solid #241d3d1a;
  border-radius: 22px;
  margin: -32px 18px 0;
  padding: 20px;
  position: relative;
  box-shadow: 0 12px 30px #371b351a;
}
.journey-overlay .question-card label,
.journey-overlay .field-label {
  color: #241d3d;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 800;
  display: flex;
}
.journey-overlay .question-card textarea {
  resize: vertical;
  color: #241d3d;
  background: #fff;
  border: 1px solid #ded2cf;
  border-radius: 12px;
  outline: 0;
  width: 100%;
  min-height: 88px;
  margin: 10px 0 8px;
  padding: 11px;
  font-size: 12px;
  line-height: 1.7;
  display: block;
}
.journey-overlay .question-card textarea:focus {
  border-color: #c91645;
  box-shadow: 0 0 0 4px #c916451a;
}
.journey-overlay .field-meta {
  color: #978b92;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
  margin-bottom: 14px;
  font-size: 9px;
  display: flex;
}
.journey-overlay .question-card .primary-button,
.journey-overlay .birth-form-card .primary-button {
  width: 100%;
}
.journey-overlay .birth-copy .privacy-note {
  color: #756b78;
  background: #f7f0e9;
  border-radius: 10px;
  align-items: center;
  gap: 7px;
  margin-top: 25px;
  padding: 9px 11px;
  font-size: 10px;
  display: inline-flex;
}
.journey-overlay .birth-form-card {
  gap: 10px;
  margin: 0;
  display: grid;
}
.journey-overlay .birth-form-card input,
.journey-overlay .birth-form-card select {
  color: #241d3d;
  background: #fff;
  border: 1px solid #ded2cf;
  border-radius: 11px;
  outline: 0;
  width: 100%;
  height: 44px;
  margin: 0 0 9px;
  padding: 0 12px;
  font-size: 12px;
}
.journey-overlay .birth-form-card input:focus,
.journey-overlay .birth-form-card select:focus {
  border-color: #c91645;
  box-shadow: 0 0 0 4px #c916451a;
}
.journey-overlay .profile-options {
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-bottom: 9px;
  display: grid;
}
.journey-overlay .profile-options button {
  color: #756b78;
  background: #fff;
  border: 1px solid #ded2cf;
  border-radius: 10px;
  min-height: 48px;
  padding: 6px;
  font-size: 10px;
}
.journey-overlay .profile-options button.selected {
  color: #c91645;
  background: #fff1f4;
  border-color: #c91645;
}
.journey-overlay .profile-options svg {
  margin: 3px auto 0;
  display: block;
}
.journey-overlay .cast-content,
.journey-overlay .map-content,
.journey-overlay .result-content,
.journey-overlay .ziwei-result-content {
  text-align: center;
}
.journey-overlay .cast-content .journey-lede {
  max-width: 330px;
}
.journey-overlay .cast-stage {
  background: #d7f1f2;
  border-radius: 28px;
  place-items: center;
  min-height: 370px;
  margin: 28px auto 0;
  display: grid;
  position: relative;
  overflow: hidden;
}
.journey-overlay .cast-stage:before {
  content: "";
  border: 2px solid #241d3d1f;
  border-radius: 50%;
  width: 290px;
  height: 180px;
  position: absolute;
  transform: rotate(-14deg);
}
.journey-overlay .cast-orbit {
  border: 1px solid #241d3d29;
  border-radius: 50%;
  width: 350px;
  height: 230px;
  position: absolute;
}
.journey-overlay .orbit-one {
  transform: rotate(33deg);
}
.journey-overlay .orbit-two {
  width: 250px;
  height: 350px;
  transform: rotate(-33deg);
}
.journey-overlay .coin-cluster {
  z-index: 2;
  align-items: center;
  gap: 13px;
  margin-top: -50px;
  display: flex;
  position: relative;
}
.journey-overlay .ritual-coin {
  color: #8a4318;
  background: #f2c735;
  border: 2px solid #241d3d;
  border-radius: 50%;
  place-items: center;
  width: 64px;
  height: 64px;
  font-size: 22px;
  transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), background 0.2s;
  display: grid;
  box-shadow: 4px 5px #241d3dbf;
}
.journey-overlay .ritual-coin:nth-child(2) {
  background: #ee7f9f;
  transform: translateY(-16px) rotate(8deg);
}
.journey-overlay .ritual-coin:nth-child(3) {
  background: #6bc8e1;
  transform: rotate(-8deg);
}
.journey-overlay .ritual-coin.coin-cast {
  background: #fffdf9;
  animation: 0.56s cubic-bezier(0.23, 1, 0.32, 1) both coin-cast;
}
.journey-overlay .yin-yang-lines {
  z-index: 1;
  gap: 5px;
  display: grid;
  position: absolute;
  bottom: 75px;
}
.journey-overlay .yin-yang-lines span {
  opacity: 0.18;
  justify-content: center;
  gap: 8px;
  transition: opacity 0.25s;
  display: flex;
}
.journey-overlay .yin-yang-lines span.line-lit {
  opacity: 1;
}
.journey-overlay .yin-yang-lines i {
  background: #241d3d;
  border-radius: 8px;
  width: 29px;
  height: 5px;
  display: block;
}
.journey-overlay .yin-yang-lines i + i {
  width: 11px;
}
.journey-overlay .cast-instruction {
  color: #756b78;
  margin: 0;
  font-size: 11px;
  position: absolute;
  bottom: 36px;
}
.journey-overlay .cast-button {
  color: #fff;
  background: #241d3d;
  border-radius: 999px;
  align-items: center;
  gap: 7px;
  padding: 10px 13px;
  font-size: 10px;
  font-weight: 800;
  transition: transform 0.18s, background 0.18s;
  display: inline-flex;
  position: absolute;
  bottom: 20px;
  right: 18px;
}
.journey-overlay .cast-button:hover {
  background: #c91645;
}
.journey-overlay .cast-button:disabled {
  cursor: default;
  opacity: 0.6;
}
.journey-overlay .skip-link {
  color: #978b92;
  background: 0 0;
  align-items: center;
  gap: 5px;
  margin-top: 17px;
  font-size: 10px;
  display: inline-flex;
}
.journey-overlay .skip-link:hover {
  color: #c91645;
}
.journey-overlay .result-content {
  max-width: 650px;
  margin: 0 auto;
  position: relative;
}
.journey-overlay .result-confetti {
  color: #c91645;
  justify-content: space-between;
  font-size: 28px;
  display: flex;
  position: absolute;
  inset: 20px 0 auto;
}
.journey-overlay .result-confetti span:nth-child(2) {
  color: #69c9e8;
  font-size: 17px;
  transform: translateY(65px);
}
.journey-overlay .result-confetti span:nth-child(3) {
  color: #f2d14d;
  transform: translateY(-20px);
}
.journey-overlay .result-hexagram {
  background: #f2d14d;
  border: 2px solid #241d3d;
  border-radius: 46% 54% 48% 52%;
  place-items: center;
  width: 120px;
  height: 120px;
  margin: 14px auto 20px;
  display: grid;
  transform: rotate(-4deg);
  box-shadow: 7px 8px #241d3d;
}
.journey-overlay .result-hexagram span {
  color: #241d3d;
  font-size: 57px;
  line-height: 0.8;
}
.journey-overlay .result-hexagram small {
  color: #241d3d;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 800;
}
.journey-overlay .result-question {
  color: #978b92;
  margin: 0 auto 24px;
  font-size: 11px;
}
.journey-overlay .result-reveal {
  text-align: left;
  max-width: 520px;
  margin: 0 auto;
}
.journey-overlay .reveal-toggle {
  color: #241d3d;
  background: #fff;
  border: 1px solid #eadfd8;
  border-radius: 13px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 14px 16px;
  font-size: 12px;
  font-weight: 800;
  display: flex;
}
.journey-overlay .reveal-toggle svg {
  transition: transform 0.2s;
}
.journey-overlay .reveal-toggle svg.rotate {
  transform: rotate(180deg);
}
.journey-overlay .result-detail {
  color: #756b78;
  background: #f7f0e9;
  border-radius: 13px;
  margin-top: 8px;
  padding: 16px;
  font-size: 12px;
  line-height: 1.8;
  animation: 0.28s both detail-in;
}
.journey-overlay .next-step {
  color: #241d3d;
  border-top: 1px solid #e7dcd6;
  gap: 7px;
  margin-top: 12px;
  padding-top: 11px;
  font-size: 11px;
  display: flex;
}
.journey-overlay .next-step svg {
  color: #c91645;
  flex: none;
}
.journey-overlay .result-actions {
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
  display: flex;
}
.journey-overlay .secondary-button,
.journey-overlay .ghost-button {
  border-radius: 999px;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  font-size: 11px;
  font-weight: 800;
  transition: transform 0.18s, background 0.18s;
  display: inline-flex;
}
.journey-overlay .secondary-button {
  color: #fff;
  background: #c91645;
}
.journey-overlay .secondary-button:hover {
  background: #a90e38;
}
.journey-overlay .secondary-button.saved {
  color: #241d3d;
  background: #f2d14d;
}
.journey-overlay .ghost-button {
  color: #756b78;
  background: #f3ede6;
}
.journey-overlay .ghost-button:hover {
  color: #c91645;
  background: #f8e1e6;
}
.journey-overlay .map-content .journey-lede {
  max-width: 340px;
}
.journey-overlay .map-stage {
  background: #f9e6ee;
  border-radius: 24px;
  max-width: 540px;
  height: 300px;
  margin: 25px auto 0;
  position: relative;
  overflow: hidden;
}
.journey-overlay .map-stage img {
  object-fit: cover;
  mix-blend-mode: multiply;
  width: 100%;
  height: 100%;
  animation: 4s ease-in-out infinite map-pulse;
}
.journey-overlay .map-status {
  color: #241d3d;
  text-transform: uppercase;
  background: #fffdf9d9;
  border-radius: 12px;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-family: Space Grotesk, sans-serif;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  position: absolute;
  bottom: 15px;
  left: 16px;
  right: 16px;
}
.journey-overlay .map-status span:last-child {
  color: #c91645;
  margin-left: auto;
}
.journey-overlay .pulse-dot {
  background: #c91645;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  animation: 1.4s ease-in-out infinite pulse;
  box-shadow: 0 0 0 5px #c9164526;
}
.journey-overlay .map-button {
  margin-top: 18px;
}
.journey-overlay .ziwei-result-content {
  max-width: 690px;
  margin: 0 auto;
}
.journey-overlay .ziwei-result-visual {
  background: #f9e6ee;
  border-radius: 24px;
  width: min(500px, 100%);
  height: 230px;
  margin: 13px auto 20px;
  position: relative;
  overflow: hidden;
}
.journey-overlay .ziwei-result-visual img {
  object-fit: cover;
  mix-blend-mode: multiply;
  width: 100%;
  height: 100%;
}
.journey-overlay .result-stamp {
  color: #c91645;
  background: #fffdf9cc;
  border: 2px solid #c91645;
  border-radius: 50%;
  place-items: center;
  width: 67px;
  height: 67px;
  font-family: Space Grotesk, sans-serif;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  display: grid;
  position: absolute;
  top: 18px;
  right: 19px;
  transform: rotate(11deg);
}
.journey-overlay .result-stamp small {
  font-size: 7px;
}
.journey-overlay .ziwei-result-content h1 {
  font-size: clamp(34px, 5vw, 55px);
}
.journey-overlay .topic-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 25px;
  display: grid;
}
.journey-overlay .topic-card {
  color: #241d3d;
  text-align: left;
  border: 1px solid #241d3d21;
  border-radius: 14px;
  grid-template-columns: 34px 1fr 15px;
  align-items: center;
  gap: 8px;
  padding: 13px;
  transition: transform 0.2s, box-shadow 0.2s;
  display: grid;
}
.journey-overlay .topic-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 20px #241d3d1a;
}
.journey-overlay .topic-mint {
  background: #d7f1e8;
}
.journey-overlay .topic-sun {
  background: #f2d14d;
}
.journey-overlay .topic-berry {
  background: #f2a1b8;
}
.journey-overlay .topic-icon {
  color: #241d3d;
  background: #ffffff8c;
  border-radius: 50%;
  place-items: center;
  width: 34px;
  height: 34px;
  display: grid;
}
.journey-overlay .topic-card span:not(.topic-icon) {
  gap: 1px;
  display: grid;
}
.journey-overlay .topic-card strong {
  font-size: 12px;
}
.journey-overlay .topic-card small {
  color: #756b78;
  text-transform: uppercase;
  font-family: Space Grotesk, sans-serif;
  font-size: 8px;
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes modal-in {
  0% {
    opacity: 0;
    transform: translateY(15px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes sticker-bob {
  0%,
  to {
    transform: translateY(0) rotate(-13deg);
  }
  50% {
    transform: translateY(-7px) rotate(-7deg);
  }
}
@keyframes coin-cast {
  0% {
    transform: translateY(-60px) rotate(-25deg) scale(0.82);
  }
  75% {
    transform: translateY(6px) rotate(12deg) scale(1.04);
  }
  to {
    transform: translateY(0) rotate(0) scale(1);
  }
}
@keyframes detail-in {
  0% {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes map-pulse {
  0%,
  to {
    transform: scale(1);
  }
  50% {
    transform: scale(1.035);
  }
}
@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}
/* --- Phone: the modal fills the screen ------------------------------ */
@media (max-width: 760px) {
  .journey-overlay {
    padding: 0;
  }
  .journey-overlay .journey-modal {
    border: 0;
    border-radius: 0;
    width: 100%;
    min-height: 100vh;
    max-height: 100vh;
  }
  .journey-overlay .journey-topbar {
    padding: 16px;
  }
  .journey-overlay .journey-content {
    padding: 29px 18px 36px;
  }
  .journey-overlay .step-dots {
    margin-bottom: 28px;
  }
  .journey-overlay .choose-content h1,
  .journey-overlay .question-copy h1,
  .journey-overlay .birth-copy h1,
  .journey-overlay .cast-content h1,
  .journey-overlay .map-content h1,
  .journey-overlay .result-content h1,
  .journey-overlay .ziwei-result-content h1 {
    font-size: clamp(40px, 13vw, 57px);
  }
  .journey-overlay .character-orbit {
    display: none;
  }
  .journey-overlay .method-choices {
    grid-template-columns: 1fr;
    margin-top: 32px;
  }
  .journey-overlay .method-choice {
    min-height: 112px;
  }
  .journey-overlay .modal-split {
    grid-template-columns: 1fr;
    gap: 27px;
  }
  .journey-overlay .question-copy p,
  .journey-overlay .birth-copy p {
    max-width: none;
  }
  .journey-overlay .question-card-wrap {
    flex-direction: column;
    display: flex;
  }
  .journey-overlay .modal-art {
    height: 170px;
  }
  .journey-overlay .question-card {
    margin: -24px 8px 0;
  }
  .journey-overlay .birth-form-card {
    margin: 0;
  }
  .journey-overlay .cast-stage {
    min-height: 350px;
    margin-left: -2px;
    margin-right: -2px;
  }
  .journey-overlay .ritual-coin {
    width: 57px;
    height: 57px;
  }
  .journey-overlay .cast-instruction {
    bottom: 41px;
  }
  .journey-overlay .cast-button {
    white-space: nowrap;
    right: 50%;
    transform: translate(50%);
  }
  .journey-overlay .cast-button:active {
    transform: translate(50%) scale(0.97);
  }
  .journey-overlay .result-confetti {
    inset: 15px 20px auto;
  }
  .journey-overlay .result-actions {
    flex-wrap: wrap;
  }
  .journey-overlay .result-actions button {
    flex: 150px;
  }
  .journey-overlay .topic-grid {
    grid-template-columns: 1fr;
  }
  .journey-overlay .ziwei-result-visual {
    height: 190px;
  }
}
/* --- The star map's loading bar -------------------------------------- */
/* The brief asks for a real bar on this step. This is the mechanism; the
   look still has to come from the designer. */
.journey-overlay .t2-progress {
  background: #241d3d14;
  border-radius: 999px;
  height: 6px;
  margin: 14px auto 0;
  width: min(420px, 100%);
  overflow: hidden;
}
.journey-overlay .t2-progress > span {
  background: linear-gradient(90deg, #c91645, #f6d647);
  border-radius: inherit;
  width: 0;
  height: 100%;
  transition: width 0.18s linear;
  display: block;
}
/* --- The coins are buttons here, not decoration --------------------- */
/* The reset is only for what the browser puts on a <button>. It used to
   say `border: 0`, which also wiped the 2px outline the design draws
   round every coin -- the base rule above already sets that border, so
   nothing of the browser's is left to clear. */
.journey-overlay .ritual-coin {
  cursor: pointer;
  padding: 0;
}
/* --- The coins bounce on the stage floor ---------------------------- */
/* While the cast step is open, js/t2.js writes each coin's transform frame
   by frame, so the transition that would smooth every one of those frames
   into the next has to stand down -- and so does the prototype's drop-in
   animation on a cast coin, which would otherwise take the transform over
   and freeze it on the way. The colour change on `coin-cast` stays. */
.journey-overlay .coin-cluster.is-live .ritual-coin {
  transition: background 0.2s;
  will-change: transform;
}
.journey-overlay .ritual-coin.coin-cast {
  animation: none;
}
/* --- The result's hexagram, and the reading under it ---------------- */
/* The brief (slide 5) asks the circle to carry the hexagram's name *and*
   its six bars; the prototype drew a single trigram glyph there instead.
   One element per line: a solid line is a filled bar, a broken one is the
   same bar with its middle cut out, so the six read as the cast that was
   actually thrown. The three readings below the fold are ours as well --
   api/iching answers in three parts and the prototype's one paragraph had
   nowhere to put them. Both are placeholders until the design lands. */
.journey-overlay .result-hexagram .hexagram-bars {
  display: grid;
  gap: 4px;
  font-size: 0;
  line-height: 0;
}
.journey-overlay .hexagram-bars i {
  background: #241d3d;
  border-radius: 3px;
  width: 46px;
  height: 5px;
  display: block;
}
.journey-overlay .hexagram-bars i.bar-yin {
  background: linear-gradient(90deg, #241d3d 0 41%, transparent 41% 59%, #241d3d 59%);
}
.journey-overlay .reading-tabs {
  gap: 6px;
  margin-top: 14px;
  display: flex;
}
.journey-overlay .reading-tab {
  color: #756b78;
  cursor: pointer;
  background: #fffdf9;
  border: 1px solid #e7dcd6;
  border-radius: 999px;
  flex: 1;
  padding: 8px 6px;
  font-size: 11px;
  font-weight: 800;
  transition: color 0.18s, background 0.18s, border-color 0.18s;
}
.journey-overlay .reading-tab:hover {
  color: #241d3d;
}
.journey-overlay .reading-tab[aria-selected="true"] {
  color: #fffdf9;
  background: #241d3d;
  border-color: #241d3d;
}
.journey-overlay .reading-text {
  margin: 12px 0 0;
  transition: opacity 0.22s, transform 0.22s;
}
/* The swap is one frame long: this class carries `transition: none`, so the
   text drops to nothing at once and then eases back in on its own. Without
   JS the class never lands and the first reading simply stands there. */
.journey-overlay .reading-text.is-swapping {
  opacity: 0;
  transform: translateY(4px);
  transition: none;
}
/* --- The reading now comes from the server -------------------------- */
/* Until api/iching answers, what the circle carries is still the printed
   placeholder, so it steps back while a line of text says what is going on.
   If the answer never comes it goes away altogether, rather than let a
   stand-in be read as the cast the reader just threw. */
.journey-overlay .result-status {
  color: #978b92;
  margin: 10px 0 0;
  font-size: 11px;
  font-weight: 700;
}
.journey-overlay .result-content.is-error .result-status {
  color: #c91645;
}
.journey-overlay .result-content.is-loading .result-hexagram {
  opacity: 0.3;
  transition: opacity 0.2s;
}
/* The accordion still holds the printed placeholder while the answer is on
   its way, so it does not open until the real reading is in it. */
.journey-overlay .result-content.is-loading .reveal-toggle {
  opacity: 0.5;
  pointer-events: none;
}
/* Nothing on an error screen may still read as a reading: the title is a
   line about a hexagram, and the card there is nothing to save. */
.journey-overlay .result-content.is-error .result-confetti,
.journey-overlay .result-content.is-error .result-hexagram,
.journey-overlay .result-content.is-error h1,
.journey-overlay .result-content.is-error .result-question,
.journey-overlay .result-content.is-error .result-reveal,
.journey-overlay .result-content.is-error .result-actions .secondary-button {
  display: none;
}
.journey-overlay .result-actions .secondary-button:disabled {
  cursor: default;
  opacity: 0.45;
}
/* 第 N 卦 and the pinyin, which the brief asks for under the circle. The
   negative top margin keeps it tucked under the circle it belongs to
   instead of floating between it and the title. */
.journey-overlay .result-index {
  color: #756b78;
  letter-spacing: 0.04em;
  margin: -8px 0 0;
  font-size: 11px;
  font-weight: 700;
}
/* A reading out of iching_results can carry its own line breaks, and the
   panel is filled with textContent, which keeps them as characters -- so
   the CSS has to be the one that honours them. */
.journey-overlay .reading-text {
  white-space: pre-line;
}
/* --- The star map now comes from the server ------------------------- */
/* The gender row is a pair, not the three the mood row has. */
.journey-overlay .profile-options-pair {
  grid-template-columns: repeat(2, 1fr);
}
/* api/ziwei did not answer: the bar stops where it is and this says why.
   The button under it stays disabled, which .primary-button:disabled already
   dresses, so there is nothing to add for that. */
.journey-overlay .map-error {
  color: #c91645;
  margin: 12px 0 0;
  font-size: 11px;
  font-weight: 700;
}
/* The main star stands on the design's panel rather than replacing it: the
   panel's own image is a texture, laid in with object-fit:cover and a
   multiply blend, and a character dropped into that would be cropped and
   tinted. This sits over it, contained and unblended. */
.journey-overlay .ziwei-star-figure {
  place-items: center;
  padding: 18px;
  display: grid;
  position: absolute;
  inset: 0;
}
.journey-overlay .ziwei-star-figure img {
  object-fit: contain;
  mix-blend-mode: normal;
  width: auto;
  height: auto;
  max-width: 58%;
  max-height: 100%;
}
/* The star's name, under the panel it is standing in. */
.journey-overlay .ziwei-star-name {
  color: #241d3d;
  letter-spacing: 0.02em;
  margin: -10px 0 0;
  font-size: 13px;
  font-weight: 800;
}
/* --- The coin's face ------------------------------------------------- */
/* The prototype set it as text (the character U+262F at 22px); every
   browser handed that to its emoji font and drew a coloured tile instead.
   It is an SVG now, so the mark is the same everywhere. `--coin-face` is
   the light half -- each coin's own background, so the eye inside the dark
   half reads as a hole rather than a spot of some other colour. */
.journey-overlay .ritual-coin {
  --coin-face: #f2c735;
}
.journey-overlay .ritual-coin:nth-child(2) {
  --coin-face: #ee7f9f;
}
.journey-overlay .ritual-coin:nth-child(3) {
  --coin-face: #6bc8e1;
}
.journey-overlay .ritual-coin.coin-cast {
  --coin-face: #fffdf9;
}
.journey-overlay .coin-face {
  width: 36%;
  height: 36%;
  display: block;
}
/* --- 流日解碼, the step after the star -------------------------------- */
/* Three columns, the same three ziwei_result.php has always had: the mascot,
   the reading, the chart. Written in the modal's own language -- the cream
   card, the rounded corners, the design's weights -- so the step does not
   read as a page borrowed from somewhere else.

   The chart is a tall image the API streams at whatever size it likes, so
   its column is the one that gives, and on a phone the three stack. */
.journey-overlay .ziwei-daily-content {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}
.journey-overlay .ziwei-daily-content h1 {
  margin-bottom: 26px;
}
.journey-overlay .daily-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.15fr 1.35fr;
  align-items: start;
  gap: 22px;
  text-align: left;
}
.journey-overlay .daily-figure {
  background: #f9e6ee;
  border: 1px solid #241d3d14;
  border-radius: 24px;
  padding: 18px 14px;
  display: grid;
  justify-items: center;
  gap: 10px;
}
.journey-overlay .daily-figure img {
  width: auto;
  max-width: 100%;
  max-height: 190px;
  display: block;
}
/* The name sits under the figure here, not pulled up over it. */
.journey-overlay .daily-figure .ziwei-star-name {
  margin: 0;
  text-align: center;
}
.journey-overlay .daily-reading p {
  color: #4b4152;
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.75;
  white-space: pre-line;
}
.journey-overlay .daily-reading p:last-child {
  margin-bottom: 0;
}
.journey-overlay .daily-status {
  color: #978b92;
  margin: 0;
  font-size: 11px;
  font-weight: 700;
}
.journey-overlay .daily-chart {
  background: #f3ede6;
  border: 1px solid #241d3d14;
  border-radius: 24px;
  padding: 10px;
  overflow: hidden;
}
.journey-overlay .daily-chart img {
  border-radius: 16px;
  width: 100%;
  height: auto;
  display: block;
}
.journey-overlay .daily-chart-error {
  color: #c91645;
  margin: 0;
  padding: 22px 10px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.journey-overlay .ziwei-daily-content .result-actions {
  justify-content: center;
  margin-top: 26px;
}
@media (max-width: 760px) {
  .journey-overlay .daily-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .journey-overlay .daily-figure img {
    max-height: 150px;
  }
}
/* --- The star's reading, and the one way on -------------------------- */
/* The three 健康/事業/愛情 cards the prototype drew here are gone: the flow is
   the one the site already had, where the star step has a single continue.
   Their rules are left further up the file -- .topic-grid and .topic-card --
   in case the design asks for them back. */
.journey-overlay .ziwei-overview {
  color: #4b4152;
  max-width: 540px;
  margin: 18px auto 0;
  font-size: 13px;
  line-height: 1.75;
  text-align: left;
  white-space: pre-line;
}
.journey-overlay .ziwei-overview-status {
  color: #978b92;
  margin: 16px 0 0;
  font-size: 11px;
  font-weight: 700;
}
.journey-overlay .ziwei-continue {
  justify-content: center;
  margin-top: 26px;
  display: flex;
}
/* The button is the site's own .navigation-button2, styled by D2styles.css,
   so it is the button the reader already knows rather than a copy of it. Two
   things have to give, both because it was drawn for the dark site and this
   card is cream: the purple variant paints .text-sub white, which would be
   invisible here, and the reset above strips borders off anything the modal
   treats as a button. */
.journey-overlay .navigation-button2 {
  text-decoration: none;
}
.journey-overlay .navigation-button2.purple .text-sub {
  color: #241d3d;
}
.journey-overlay .navigation-button2 .play-triangle {
  border-left-color: #c91645;
}