/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;700&display=swap');

/* --- 全域與基本樣式 --- */
:root {
  /* --- 新的配色方案 --- */
  --primary-color: #9E5E5E;   /* 灰玫瑰色 (來自圖片) */
  --secondary-color: #D49A3A; /* 芥末黃/金色 (來自圖片) */
  --background-color: #4D403A; /* 深棕色 (來自圖片) */
  --text-color: #F5F5DC;       /* 米色 (為了搭配深色背景) */
  --card-back-color: #7BA095;  /* 柔和的藍綠色 (來自圖片) */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Noto Serif TC', serif;
  background-color: var(--background-color);
  color: var(--text-color);
  line-height: 1.8;
  overflow-x: hidden;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* --- 導覽列 --- */
.navbar {
  background: rgba(77, 64, 58, 0.8); /* 使用背景深棕色配合透明度 */
  backdrop-filter: blur(10px);
  padding: 15px 30px;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.navbar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo {
  font-size: 1.8em;
  font-weight: 700;
  color: var(--secondary-color);
  text-decoration: none;
  cursor: default;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 25px;
}

.nav-links a {
  color: var(--text-color);
  text-decoration: none;
  font-size: 1.1em;
  transition: color 0.3s ease;
  cursor: pointer;
}

.nav-links a:hover {
  color: var(--secondary-color);
}

/* --- 主內容區域 --- */
.main-content {
  text-align: center;
  padding: 50px 20px;
}

h1, h2 {
  color: var(--secondary-color);
  margin-bottom: 20px;
}

.hidden {
  display: none !important;
}

/* --- 陣法選擇 --- */
#spread-selection p {
  max-width: 600px;
  margin: 0 auto 30px;
  font-size: 1.1em;
}
.spread-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
}
.spread-btn {
  background: var(--primary-color);
  color: white;
  border: 2px solid var(--secondary-color);
  /*padding: 15px 30px;*/
  width: 250px;
  font-size: 1em;
  font-family: 'Noto Serif TC', serif;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(158, 94, 94, 0.4);
}
.spread-btn:hover {
  background: var(--secondary-color);
  color: var(--background-color);
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(212, 154, 58, 0.5);
}

/* --- 卡牌區域 --- */
#card-section h2 {
    margin-bottom: 30px;
    min-height: 1.5em; /* 確保文字換行時佈局穩定 */
}
.card-area {
  position: relative;
  padding: 20px;
  max-width: 100%;
  margin: 0 auto;
  perspective: 1500px;
  min-height: 400px;
}

/* 牌堆中的原始牌 */
.card {
  width: 120px;
  height: 200px;
  position: absolute;
  cursor: pointer;
  transition: transform 0.4s ease, opacity 0.5s ease, left 0.4s ease, filter 0.3s ease;
  transform-style: preserve-3d;
  top: 50%;
  transform: translateY(-50%);
}

.card:hover:not(.unselectable) {
  transform: translateY(calc(-50% - 30px)) scale(1.15);
  z-index: 100;
}

/* 新增：被點擊時的短暫發光效果 */
.card.is-triggered {
    filter: drop-shadow(0 0 15px var(--secondary-color));
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  background-size: cover;
  background-position: center;
}

.card-back {
  background-color: var(--card-back-color);
  /*background-image: url('https://placehold.co/200x340/7BA095/4D403A?text=%E6%9B%BC%E6%AE%8A');*/
  background-image: url("../images/card-back2.jpg");
}

.card-front {
  background-color: #fff;
  transform: rotateY(180deg);
}

/* 動畫: "複製牌" 的飛行與翻轉 */
.ghost-card {
  /* 初始狀態與原始牌相同 */
  width: 120px;
  height: 200px;
  position: fixed; /* 使用 fixed 定位以在整個視窗飛行 */
  transform-style: preserve-3d;
  z-index: 200;
  pointer-events: none;
  transition: all 0.9s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.ghost-card.is-selected {
  width: 180px; /* 放大後的尺寸 */
  height: 306px;
}

/* 陣法一：單張牌的位置 */
.ghost-card.selected-pos-1 { transform: translateY(-50%); }

/* 陣法二：三張牌的位置 */
.ghost-card.selected-pos-2 { transform: translate(-160%, -50%); } /* 左 */
.ghost-card.selected-pos-3 { transform: translate(-50%, -50%); }  /* 中 */
.ghost-card.selected-pos-4 { transform: translate(60%, -50%); }   /* 右 */

/* 動畫: 翻轉 */
.ghost-card.is-flipped {
  transform: var(--final-transform) rotateY(180deg);
}
.ghost-card.selected-pos-1.is-flipped { --final-transform: translateY(-50%); }
.ghost-card.selected-pos-2.is-flipped { --final-transform: translate(-160%, -50%); }
.ghost-card.selected-pos-3.is-flipped { --final-transform: translate(-50%, -50%); }
.ghost-card.selected-pos-4.is-flipped { --final-transform: translate(60%, -50%); }

/* 動畫: 牌堆中未選中的卡片 */
.card.unselectable {
  opacity: 0.1;
  pointer-events: none;
}

/* --- 結果顯示區域 --- */
#result-section {
  padding: 40px;
  background: rgba(0,0,0,0.2);
  border-radius: 15px;
  /* margin-top: 380px; /* 留出空間給飛到中間的卡片 */
}

.result-cards-display {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.result-card-item {
    background: rgba(255,255,255,0.05);
    padding: 20px;
    border-radius: 10px;
    border: 1px solid var(--primary-color);
    max-width: 320px;
    text-align: left;
}

.responsive-image {
            max-width: 100%; /* 圖片寬度最大為其父容器的 100% */
            height: auto;    /* 讓高度自動計算，保持圖片的原始比例 */
            display: block;  /* 讓圖片變成區塊元素 */
            margin: 0 auto 15px auto; /* 居中並在下方留出空間 (可選) */
}

.result-card-item h3 {
    color: var(--secondary-color);
    margin-bottom: 10px;
    text-align: center;
}

/* --- 新增：讓解卦內文的排版正常顯示 --- */
.result-card-item p {
  white-space: pre-line; /* 關鍵！此屬性會保留換行符號 */
  text-align: left;
}

.cta-line {
    background: var(--primary-color);
    color: white;
    padding: 20px;
    border-radius: 10px;
    margin-top: 40px;
}
.cta-line a {
    color: var(--secondary-color);
    font-weight: bold;
}
#reset-btn {
    margin-top: 30px;
}

/* --- 內容頁面樣式 --- */
.content-page {
  text-align: left;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background: rgba(0,0,0,0.1);
  border-radius: 10px;
}
.content-page h1 {
  text-align: center;
  margin-bottom: 40px;
}
.content-page article {
  margin-bottom: 40px;
}
.content-page h2 {
  color: var(--primary-color);
  margin-top: 30px;
  margin-bottom: 15px;
  border-left: 4px solid var(--secondary-color);
  padding-left: 10px;
}
.content-page p {
  margin-bottom: 15px;
  text-indent: 2em; /* 段落開頭縮排 */
}

/* --- 手風琴/摺疊面板樣式 --- */
.accordion {
  width: 100%;
}
.accordion-item {
  border-bottom: 1px solid rgba(158, 94, 94, 0.5);
}
.accordion-item:last-child {
  border-bottom: none;
}
.accordion-header {
  background-color: transparent;
  color: var(--text-color);
  cursor: pointer;
  padding: 20px 5px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 1.4em;
  font-family: 'Noto Serif TC', serif;
  font-weight: 700;
  transition: background-color 0.3s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.accordion-header:hover, .accordion-header.active {
  color: var(--secondary-color);
}
.accordion-icon {
  width: 14px;
  height: 14px;
  position: relative;
  transition: transform 0.4s ease;
  flex-shrink: 0; /* 防止 icon 變形 */
  margin-left: 15px;
}
.accordion-icon::before,
.accordion-icon::after {
  content: '';
  position: absolute;
  background-color: var(--secondary-color);
  transition: all 0.3s ease;
}
.accordion-icon::before {
  width: 100%;
  height: 2px;
  left: 0;
  top: 6px;
}
.accordion-icon::after {
  width: 2px;
  height: 100%;
  left: 6px;
  top: 0;
}
.accordion-header.active .accordion-icon {
  transform: rotate(45deg);
}
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
  background-color: transparent;
}
.accordion-content-inner {
  padding: 5px 18px 25px 18px;
  white-space: pre-line; /* 關鍵！此屬性會保留換行符號 */
}
.accordion-content-inner p {
    text-indent: 2em;
}

@media (max-width: 768px) {
	.logo {
	  font-size: 1.8em;
	  font-weight: 700;
	  color: var(--secondary-color);
	  text-decoration: none;
	  cursor: default;
	}
	
	.nav-links {
	  width: 100%; /* 容器寬度設為 100% */
	  overflow-x: auto; /* 水平捲軸 */
	  white-space: nowrap; /* 禁止換行 */
	  display: flex; /* 使用 Flexbox 佈局 */
	  gap: 10px;
	}
	
	.navbar-item {
		flex: 0 0 auto; /* 子元素不隨容器縮放 */
		padding: 1px;
		margin-right: 0px;
		display: inline-block; /* 讓子元素可以被inline-block排列表達 */
	}

  .ghost-card {
    /* 初始狀態與原始牌相同 */
    width: 60px;
    height: 100px;
    position: fixed; /* 使用 fixed 定位以在整個視窗飛行 */
    transform-style: preserve-3d;
    z-index: 100;
    pointer-events: none;
    transition: all 0.9s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  }

  .ghost-card.is-selected {
    width: 120px; /* 放大後的尺寸 */
    height: 206px;
  }
  /* 陣法一：單張牌的位置 */
  .ghost-card.selected-pos-1 { transform: translateY(-50%); }

  /* 陣法二：三張牌的位置 */
  .ghost-card.selected-pos-2 { transform: translate(-40%, -50%); } /* 左 */
  .ghost-card.selected-pos-3 { transform: translate(20%, -50%); }  /* 中 */
  .ghost-card.selected-pos-4 { transform: translate(80%, -50%); }   /* 右 */

  /* 動畫: 翻轉 */
  .ghost-card.is-flipped {
    transform: var(--final-transform) rotateY(180deg);
  }
  .ghost-card.selected-pos-1.is-flipped { --final-transform: translateY(-50%); }
  .ghost-card.selected-pos-2.is-flipped { --final-transform: translate(-40%, -50%); }
  .ghost-card.selected-pos-3.is-flipped { --final-transform: translate(20%, -50%); }
  .ghost-card.selected-pos-4.is-flipped { --final-transform: translate(80%, -50%); }
}