/* 引入 Zen Maru 字體 */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru&display=swap');

body {
	font-family: "Zen Maru", sans-serif;
	text-align: center; /*置中*/
	background-color: #0a0a0c; /*背景顏色*/
	color: #d8d4cf; /*文字顏色*/
	padding: 20px 20px;
	min-height: 100vh;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size:18px;
}

h1 {
	color: #c8b687;
	font-size: 2.5em;
	font-weight: normal;
	letter-spacing: 6px;
	margin-bottom: 15px;
	border-bottom: 1px solid rgba(200, 182, 135, 0.3);
	padding-bottom: 10px;
}

#question {
	width:90vw;
	max-width: 650px;
	padding: 10px 15px;
	background: transparent;
	border: none;
	border-bottom: 1px solid #444;/*細細的底線*/
	color: #d8d4cf;
	font-family:"Zen Maru", sans-serif;
	font-size:1.2em;
	text-align: center;
	outline: none;
	margin-bottom: 25px;
	transition: all 0.3s ease;
}

#question::placeholder {
	color:#555;
	letter-spacing: 2px;
}

#question:focus {
	border-bottom: 1px solid #c8b687;
}

/* 牌陣容器*/
.cards-container {
	display: flex;
	justify-content: center;
	flex-wrap: wrap; /*空間不夠時自動換行 */
	gap: 20px;
	margin: 15px 0 30px 0;
	flex-wrap: wrap;
}

/* 單張塔羅牌 */
.tarot-card {
	width: 150px;   /*從 100px改成150px*/
	height: 240px;  /*從 160px改成240px*/
	background-color: #4a4e69;
	border: 2px solid #9a8c98; 
	border-radius: 10px; 
	font-size: 40px; 
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer; 
	transition: transform 0.5s ease; 
	transform-style: preserve-3d;
	position: relative;
}

.tarot-card:hover { /*當滑鼠懸停在卡牌上的效果*/
  transform: translateY(-10px) scale(1.05); /*牌往上浮動*/
  box-shadow: 0px 5px 15px rgba(255, 255, 255, 0.3); /*發光效果*/
}

.tarot-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 6px;
	box-shadow: 1px rgba(225, 225, 225, 0.5);
	transition: border-color 0.4s ease;
}

.tarot-card:hover img {
	border: 1px rgba(200, 182, 135, 0.5);
}

/* 被選中翻轉時的狀態 */
.tarot-card.flipped {
	transform: rotateY(180deg); /*翻轉180度*/
}

/* 卡片正面與反面的通用樣式:重疊在一起 */
.card-front, .card-back {
	width: 100%;
	height: 100%;
	border-radius: 12px;
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
	position: absolute; /*重疊*/
	backface-visibility: hidden; /*翻到背面隱藏第一面*/
	top: 0;
	left: 0;
	overflow: hidden; /*防止圖片超出*/
}

/* 正面 */
.card-front {
	background-color: #fff;
	color: #000;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transform: rotateY(180deg);
}

/* 正面圖片的樣式（用來處理逆位） */
.card-front img {
	transition: transform 0.5s; /* 逆位旋轉動畫 */
}

/* 逆位時，圖片旋轉180度 */
.card-front.reversed img {
	transform:rotate(180deg);
	border: 1px solid rgba(150, 50, 50, 0.3); /*逆位帶點極暗的紅色邊緣*/
}

/* 卡背*/
.card-back {
  background-color: #4a4e69;
}

textarea { /*讓文字框好看一點*/
  width: 80%;
  max-width: 400px;
  padding: 10px;
  border-radius: 8px;
  font-family: inherit;
}

/*按鈕區塊*/
.action-buttons {
	margin-top:15px;
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap:wrap;
	justify-content: center;
}

.action-btn {
	background: transparent;
	color:#888;
	padding: 10px 30px;
	font-size:1.2em;
	letter-spacing:2px;
	font-family: inherit;
	border: 1px solid #444;
	border-radius: 50px;
	cursor: pointer;
	font-family: 'Zen Maru', sans-serif;
	transition: translate 0.4s ease;
	text-decoration: none;/*去除a標籤預設的底線*/
	display: inline-block;
	font-weight: bold;
}

.action-btn:hover{
	color: #c8b687;
	border-color: #c8b687;
	background: rgba(200, 182, 135, 0.05); /* 微微的金色背景 */
}

.cardName {
	color:#c8b687;
	font-size:1.8em;
	margin-bottom: 15px;
	letter-spacing: 2px;
}

.result-section {
	width:100%;
	max-width: 600px;
	text-align: center;
	margin-bottom: 40px;
	padding: 20px;
}

#AIPrompt {
	width:100%;
	max-width:600px;
	height:150px;
	background: rgba(255, 255, 255, 0.02);
	color: #777;
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 4px;
	padding: 15px;
	font-family: 'Zen Maru', sans-serif;
	font-size: 1em;
	line-height: 1.6;
	resize: none;
	margin-bottom: 20px;
	box-sizing: border-box; /*確保 padding 不會撐破寬度*/
}

.hashtags {
	color:#999;
	font-size:1.2em;
	letter-spacing: 1px;
}

/*複製按鈕樣式*/
#copyBtn {
	background-color: #9a8c98;
	color: #1a1a2e;
}

#copyBtn:hover {
	color: #8ab6d4;
	border-color: #8ab6d4;
	background: rgba(138, 182, 212, 0.05);
	background-color: #c9bbc8;
	transform: translateY(-2px);/*稍微飄起*/
}

/*gemini按鈕樣式*/
.gemini-btn {
	background-color: #4a4e69;
	color:#e9e9eb;
	border: 1px solid #9a8c98;
}

.gemini-btn:hover {
	background-color: #6a6e8f;
	transform: translateY(-2px);
	box-shadow: 0px 4px 10px rgba(225, 225, 225, 0.2);
}

.reset-btn {
	background-color: #b5838d;
	color:#1a1a2e;
}

.rest-btn:hover {
	color: #d48a8a;
	background: rgba(212, 138, 138, 0.05);
	border-color: #d48a8a;
	transform:translateY(-2px);
}

.deepseek-btn {
	background-color: #4a4e69;
	color:#e9e9eb;
	border: 1px solid #9a8c98;
}

.deepseek-btn:hover {
	background-color: #6a6e8f;
	transform: translateY(-2px);
	box-shadow: 0px 4px 10px rgba(225, 225, 225, 0.2);
}

@media (max-width: 600px) {
  h1 { font-size: 1.8em; margin-bottom: 10px; }
  
  .tarot-card {
    width: 120px; /* 卡牌在手機上稍微縮小 */
    height: 192px;
  }
  
  .cards-container {
    gap: 15px;
    max-width: 280px; /* 配合手機版縮小的卡牌 */
  }

  .action-btn {
    font-size: 1em;
    padding: 8px 15px;
    width: 45%; /* 讓按鈕在手機上並排成兩列比較整齊 */
    text-align: center;
  }

  #AIPrompt {
    height: 80px;
    font-size: 0.9em;
  }
}