/* Google Fonts moved to <link> tags in index.html for better performance */

/* font */
:root {
  /* --font-family: 'Chiron Sung HK WS','cwTeXYen', 'Noto Sans TC Rounded', sans-serif; */
  --font-family: 'Chiron Sung HK WS';
  --font-family-question: 'Noto Sans TC', sans-serif;
}

html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  height: -webkit-fill-available;
}

body {
  margin: 0;
  padding: 0;
  background-image: url(../images/backgrounds/desktop-background.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
  font-family: var(--font-family);

  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
}


#root {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
}


.button-width {
  width: 135px;
}

.button-answer-width {
  width: 200px;
}

@media (max-width: 376px) {
  .button-width {
    width: 125px;
  }
  .button-answer-width {
    width: 180px;
  }  
}

@media (max-width: 414px) {
  .result-content {
      padding-left: 32px;
      padding-right: 32px;
  }
}

/* 結果頁：虎爺裝飾可超出 CTA，勿裁切 */
.result-content {
  overflow-x: visible;
  overflow-y: visible;
}

@keyframes swing {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(15deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-15deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes rotateClockwise {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes rotateCounterClockwise {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}
/* 使用 cubic-bezier 來實現進出時的減速效果 */
/* img[src*="starIcon"] { */
img[src*="star.png"] {
  animation: swing 1.25s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
  transform-origin: center center;
}

img[src*="cat-icon"] {
  animation: catAnimation 3s infinite;
  transform-origin: center center;
}

img[src*="crystal-ball"] {
  animation: catAnimation 5s infinite;
  transform-origin: center center;
}

@keyframes catAnimation {
  0%, 15% { transform: rotate(0deg); }
  17.5% { transform: rotate(10deg); }
  20% { transform: rotate(0deg); }
  22.5% { transform: rotate(-10deg); }
  25% { transform: rotate(0deg); }
  
  27.5% { transform: rotate(10deg); }
  30% { transform: rotate(0deg); }
  32.5% { transform: rotate(-10deg); }
  35% { transform: rotate(0deg); }
  
  37.5% { transform: rotate(10deg); }
  40% { transform: rotate(0deg); }
  42.5% { transform: rotate(-10deg); }
  45% { transform: rotate(0deg); }
  
  /* 暫停一下 */
  45.1%, 50% { transform: rotate(0deg); }
  
  50.1%, 75% { 
    animation-name: var(--rotation-direction, rotateClockwise);
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  75.1%, 100% { transform: rotate(0deg); }
}

@media (min-width: 1024px) {
  button:hover img,
  a:hover img,
  img[role="button"]:hover {
    filter: brightness(1.2);
    transition: filter 0.3s ease;
  }
  /* 結果頁「再測一次／分享」：不要套用 brightness，避免與填色 hover 疊加、視覺像位移 */
  .result-restart-btn:hover img,
  .result-share-btn:hover img {
    filter: none;
    transition: none;
  }
  /* 首頁按鈕：不要套用 brightness，使用圖片抽換 */
  .start-btn-wrap:hover img {
    filter: none;
    transition: none;
  }
  /* 虎爺裝飾：hover 時不變色 */
  .cta-deco-tiger:hover img,
  .cta-with-deco:hover .cta-deco-tiger img {
    filter: none !important;
    transition: none;
  }
}

button, 
a, 
img[role="button"] {
  cursor: pointer;
  transition: filter 0.3s ease;
}

@media (hover: hover) {
  /* Momo  */
  div[style*="backgroundColor: f305bd"]:hover {
    filter: brightness(1.2);
  }

  /* PChome */
  div[style*="backgroundColor: d7000f"]:hover {
    filter: brightness(1.2);
  }
}

button img,
a img,
img[role="button"] {
  transition: filter 0.3s ease;
}

/* 防止某些元素重複應用效果 */
.outcome-container img:not([role="button"]) {
  filter: none;
  transition: none;
}

.start-button {
  width: 220px;
}
/* 首頁按鈕：hover 使用專用圖片疊加，不用 opacity/brightness */
.start-btn-wrap {
  cursor: pointer;
}
.start-btn-img-wrap {
  display: block;
}
.start-btn-hover-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
@media (hover: hover) {
  .start-btn-wrap:hover .start-btn-hover-layer {
    opacity: 1;
  }
}
.start-btn-wrap:focus-visible .start-btn-hover-layer {
  opacity: 1;
}

.restart-button {
  transition: opacity 0.25s ease;
}

.skip-button {
  transition: transform 0.3s ease-in-out;
}
@media (hover: hover) {
  .skip-button:hover {
    transform: rotate(-3deg);
  }
}

.next-button {
  transition: transform 0.3s ease-in-out;
}
@media (hover: hover) {
  .next-button:hover {
    transform: rotate(3deg);
  }
}

.share-button {
  transition: opacity 0.25s ease;
}

.shop-button {
  transition: transform 0.3s ease-in-out;
}
@media (hover: hover) {
  .shop-button:hover {
    transform: rotate(4deg);
  }
}
/* 
@keyframes shake {
  0%, 100% {
    transform: translate(0, 0);
  }
  10%, 50%, 90% {
    transform: translate(-2px, -2px);
  }
  20%, 60%, 100% {
    transform: translate(2px, 2px);
  }
  30%, 70% {
    transform: translate(2px, -2px);
  }
  40%, 80% {
    transform: translate(-2px, 2px);
  }
}

.card-frame-img {
  animation: shake 10s ease-in-out infinite;
} */

@keyframes float {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-10px) scale(1.05);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 0.8;
  }
}

.cloud-animation {
  animation: float 6s ease-in-out infinite;
  pointer-events: none; /* 確保雲不影響鼠標事件 */
}

  @keyframes rotateHourglass {
      0% {
          transform: rotate(0deg);
      }
      30% {
          transform: rotate(360deg);
      }
      100% {
          transform: rotate(360deg);
      }
  }
  .hourglass-spin {
      animation: rotateHourglass 2s infinite ease-in-out;
  }

  /* Loading 頁：老虎 iframe + 進度條 */
  .loading-tiger-iframe {
    pointer-events: none;
  }
  .loading-progress-track {
    overflow: hidden;
  }
  .loading-progress-fill {
    width: 33%;
    transform: translateX(0);
    animation: loading-progress 1.5s ease-in-out infinite;
  }
  /* 橘條在軌道內滑動：寬 33%，右移最多 (100%-33%)/33% ≈ 203% 自身寬度 */
  @keyframes loading-progress {
    0%,
    100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(203%);
    }
  }

  /* Oracle 選擇頁：符號浮動動畫 */
  .oracle-symbol-btn {
    animation: oracleFloat 3s ease-in-out infinite;
  }
  .oracle-symbol-btn:nth-child(1) { animation-delay: 0s; }
  .oracle-symbol-btn:nth-child(2) { animation-delay: 0.4s; }
  .oracle-symbol-btn:nth-child(3) { animation-delay: 0.8s; }

  @keyframes oracleFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
  }

  .oracle-symbol-btn.oracle-symbol-chosen {
    animation: oracleChosen 0.35s ease-out forwards;
  }
  @keyframes oracleChosen {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.25); }
    100% { transform: scale(1.1); }
  }

  .oracle-icon-wrap {
    transition: background-color 0.3s, color 0.3s, transform 0.3s, box-shadow 0.3s;
  }

  .oracle-chosen-bar {
    animation: oracleBar 0.4s ease-out forwards;
  }
  @keyframes oracleBar {
    from { width: 0; }
    to   { width: 100%; }
  }

  .oracle-hint-text {
    font-weight: 600;
  }

  @keyframes marker-glow {
    0%, 100% { 
      opacity: 0;
      transform: translateX(0);
    }
    50% { 
      opacity: 0.3;
      transform: translateX(3px);
    }
  }
  
  .process-marker {
    position: absolute;
    top: 56%;
    transform: translateY(-50%);
    z-index: 30;
    pointer-events: none;
    
    svg {
      filter: drop-shadow(0 0 2px rgba(101, 67, 33, 0.3));
      animation: marker-glow 1.5s ease-in-out infinite;
    }
  
    path {
      stroke: #000000;
      opacity: 0.9;
    }
  }

  .back-button-slide {
    animation: slideBackButton 2s ease-in-out infinite;
    transform-origin: center;
  }
  
  @keyframes slideBackButton {
    0% {
      transform: translateX(0);
    }
    20% {
      transform: translateX(-8px);
    }
    35% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(0);
    }
  }

/* Ghost answer button：344 × 100（含 border + padding） */
.ghost-answer-btn {
  width: 300px !important;
  max-width: calc(100% - 16px) !important;
  min-height: 0 !important;
  padding: 16px 8px !important;
  box-sizing: border-box;
  border: 2px solid #FFDE44;
  border-radius: 84px;
  background: transparent;
  color: #000000;
  font-size: 18px;
  line-height: 1.4;
  font-family: 'Noto Sans TC', sans-serif;
  font-weight: 500;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: background-color 0.25s ease;
  text-align: center;
  overflow: hidden;
}
@media (hover: hover) {
  .ghost-answer-btn:hover {
    background-color: #FFF099;
  }
}
.ghost-answer-btn:focus {
  background-color: #FFF099;
}
.ghost-answer-btn:active {
  background-color: #FFF099;
  transform: scale(0.97);
}

/* CTA 按鈕 + 虎爺：可超出按鈕、較大、偏右；寬度與第一顆一致（不受上層較窄區塊影響） */
.cta-with-deco {
  overflow: visible;
  box-sizing: border-box;
  width: 340px;
  max-width: 100%;
}
.cta-with-deco .cta-btn-img {
  display: block;
}
.cta-btn-wrap {
  display: block;
}
.cta-btn-hover-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
@media (hover: hover) {
  .cta-with-deco:hover .cta-btn-hover-layer {
    opacity: 1;
  }
}
.cta-with-deco:focus-visible .cta-btn-hover-layer {
  opacity: 1;
}
/* 虎爺外層只負責位移定位，hover 僅內層圖旋轉轉正，避免整塊 transform 造成視覺往右跑 */
.cta-deco-tiger {
  width: 56px;
  height: 50px;
  left: 20px;
  transform: translateY(-50%) translateX(4px);
  transform-origin: center center;
}
.cta-deco-tiger > img {
  transition: transform 0.3s ease;
  transform: rotate(-10deg);
  transform-origin: center center;
}
@media (hover: hover) {
  .cta-with-deco:hover .cta-deco-tiger > img {
    transform: rotate(0deg);
  }
}

/* 再測一次 / 分享給朋友：hover 使用專用 SVG 疊加、opacity transition，不位移 */
.result-restart-btn,
.result-share-btn {
  cursor: pointer;
  background-color: transparent;
  transform: none;
}
.result-restart-btn:active,
.result-share-btn:active {
  transform: none;
}
.result-btn-img-wrap {
  display: block;
}
.result-btn-hover-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
@media (hover: hover) {
  .result-restart-btn:hover .result-btn-hover-layer,
  .result-share-btn:hover .result-btn-hover-layer {
    opacity: 1;
  }
}
.result-restart-btn:focus-visible .result-btn-hover-layer,
.result-share-btn:focus-visible .result-btn-hover-layer {
  opacity: 1;
}
.result-restart-btn img,
.result-share-btn img {
  transform: none;
}

/* ShareModal 內的社群按鈕：reset button defaults */
.share-modal-btn {
  border: none;
  padding: 0;
  cursor: pointer;
}

/* 社群按鈕：圖例 #84756B，hover 品牌色 */
.social-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #84756b;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  transition: background-color 0.25s ease;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.social-icon {
  width: 22px;
  height: 22px;
  display: block;
  position: relative;
  z-index: 1;
  object-fit: contain;
}
.social-icon--line {
  width: 28px;
  height: 28px;
}
.social-line-word {
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  line-height: 1;
  position: relative;
  z-index: 1;
}
.social-threads-at {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  font-family: system-ui, -apple-system, sans-serif;
  position: relative;
  z-index: 1;
}
/* IG：gradient 無法 transition，改用偽元素 + opacity 淡入淡出，避免離開時閃白 */
.social-btn-ig::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
@media (hover: hover) {
  .social-btn-fb:hover {
    background-color: #1877f2 !important;
  }
  .social-btn-ig:hover::before {
    opacity: 1;
  }
  .social-btn-threads:hover {
    background-color: #000000 !important;
  }
  .social-btn-line:hover {
    background-color: #06c755 !important;
  }
}

/* 首頁 Lottie：比原本大；頂端為錨點，放大時視覺往下延伸、非自中心脹開 */
.lottie-first-page {
  margin-top: 0;
  width: min(288px, 86vw);
  height: min(288px, 86vw);
  transform-origin: top center;
  border: none;
  overflow: hidden;
  background: transparent;
}

.page-transition {
    opacity: 1;
    transition: opacity 300ms ease-in-out;
}
.page-transition-enter {
    opacity: 0;
}
.page-transition-exit {
    opacity: 0;
}

/* 題號 (1/5)：Libre Baskerville 700 40px */
.question-page-number {
  font-family: 'Libre Baskerville', serif;
  font-weight: 700;
  font-size: 40px;
  color: #806F63;
}

/* Lottie + 題目：動畫 JSON 內已含白底，文字緊貼其下、不加區塊 padding */
.question-page-lottie-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.question-page-lottie {
  flex-shrink: 0;
}
.question-page-lottie svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* 延續動畫內白底；固定「兩行題目」高度，一行時留白不變矮（與 .question-page-text 22px / 1.7 同步） */
.question-page-text-block {
  width: 100%;
  padding: 0 16px 24px;
  min-height: calc(22px * 1.7 * 2 + 24px);
  background: transparent;
  border-radius: 0 0 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
}
.question-page-text {
  font-family: var(--font-family);
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  color: #000000;
  line-height: 1.7;
  letter-spacing: 3px;
  white-space: pre-line;
  margin: 0;
  padding: 0;
}

/* 題目頁標題、Loading 文案、結果頁區塊標題與儲存提示：粗體 */
.question-page-title {
  font-weight: 700;
}
.loading-page-text,
.result-section-title,
.result-save-hint {
  font-weight: 700;
}

.result-save-hint {
  font-family: 'Noto Sans TC', sans-serif;
}

.result-section-title {
  font-size:20px;
  letter-spacing: 12%;
}
/* Loading 頁「守護神正在商量中」：字稍大、字距放開 */
.loading-page-text {
  font-size: 1.25rem;
  letter-spacing: 0.14em;
}

/* ConfirmDialog 彈窗 */
.confirm-card {
  width: 300px;
  max-width: calc(100% - 32px);
  padding: 32px 24px 28px;
  background: #FFFFFF;
  border: none;
  border-radius: 24px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(64, 37, 41, 0.18);
}
.confirm-star {
  position: absolute;
  width: 26px;
  pointer-events: none;
  animation: swing 1.25s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
  transform-origin: center center;
}
.confirm-star--tl { top: -10px; left: -8px; }
.confirm-star--br { bottom: -10px; right: -8px; }
.confirm-title {
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #000000;
  letter-spacing: 0.14em;
  line-height: 1.5;
}
.confirm-btn {
  min-width: 100px;
  padding: 12px 8px;
  border: 2px solid #FFDE44;
  border-radius: 84px;
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: #000000;
  background: #FFFFFF;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
@media (hover: hover) {
  .confirm-btn:hover {
    background-color: #FFF099;
  }
}
.confirm-btn:focus-visible {
  background-color: #FFF099;
}
.confirm-btn:active {
  transform: scale(0.97);
}

/* 結果頁：背景圖只由 body 顯示（與其他頁一致，不另設、不放大）；中間內容區白底由 ResultPage 內層 bg-white 處理 */

/* ── Skeleton placeholder ── */
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-box {
  background: linear-gradient(110deg, #e8ddd6 0%, #f5ebe4 45%, #ede4df 55%, #e8ddd6 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: inherit;
}

.skeleton-box--round {
  border-radius: 9999px;
}