* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  color: #ece6ff;
  background: radial-gradient(ellipse at top, #2a1f4d 0%, #120c24 60%, #08060f 100%);
  min-height: 100vh;
}

header { text-align: center; padding: 32px 16px 8px; }
h1 { margin: 0; font-size: 2.2rem; letter-spacing: 4px; color: #f3d98b; }
.subtitle { color: #b6a9dd; margin-top: 6px; }
h2 { color: #f3d98b; margin-top: 0; }

main { max-width: 1100px; margin: 0 auto; padding: 16px; }

.panel {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(243, 217, 139, 0.25);
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 20px;
}

#setup { max-width: 560px; margin: 0 auto 24px; }
label { display: block; margin: 14px 0 6px; color: #d8cdf7; }
label.check { display: flex; align-items: center; gap: 8px; }

input[type=text], select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #5a4b8c;
  background: #1c1536;
  color: #fff;
  font-size: 1rem;
}
.spread-desc { color: #a99cd0; font-size: 0.9rem; line-height: 1.6; margin: 8px 0 0; }

.buttons { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.buttons.center { justify-content: center; }
button {
  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid #f3d98b;
  background: transparent;
  color: #f3d98b;
  font-size: 1rem;
  cursor: pointer;
  transition: 0.2s;
}
button:hover { background: rgba(243, 217, 139, 0.15); }
button.primary { background: #f3d98b; color: #1c1536; font-weight: bold; }
button.primary:hover { background: #ffe9a8; }
button.danger { border-color: #e88; color: #e88; padding: 6px 12px; font-size: 0.85rem; }

.hidden { display: none !important; }
.hint { text-align: center; color: #a99cd0; margin-top: -8px; }
#resultTitle { text-align: center; }

/* ===== 牌桌 ===== */
#board {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin: 20px 0;
}
#board { --cw: 120px; --ch: 180px; }
#board.compact { --cw: 96px; --ch: 144px; }
#board.grid {
  display: grid;
  justify-content: center;
  align-items: center;
  gap: 12px 16px;
}

.slot { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.slot .pos { font-size: 0.85rem; color: #d8cdf7; }

/* 卡牌翻轉 */
.card {
  width: var(--cw);
  height: var(--ch);
  perspective: 800px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-30px);
  animation: deal 0.5s forwards;
}
@keyframes deal { to { opacity: 1; transform: translateY(0); } }

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.7s;
  transform-style: preserve-3d;
}
.card.flipped .card-inner { transform: rotateY(180deg); }

.face {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
  text-align: center;
}
.back {
  background: #f4ead2 url("img/back.jpg") center / cover no-repeat;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}
.front {
  transform: rotateY(180deg);
  background: #f4ead2;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}
.front .art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.3s;
}
.front.reversed .art, .modal-art.reversed { transform: rotate(180deg); }
.front .orient {
  position: absolute; top: 4px; right: 4px; font-size: 0.65rem;
  padding: 1px 6px; border-radius: 8px; background: rgba(43,29,79,0.85); color: #f3d98b;
}
.front.reversed .orient { background: rgba(139,47,61,0.9); }
.card.flipped:hover .front { box-shadow: 0 0 18px rgba(243,217,139,0.8); }
.modal-art {
  display: block; max-width: 100%; max-height: 50vh;
  margin: 0 auto 12px; border-radius: 10px;
}
.modal-box { max-height: 92vh; overflow-y: auto; }

/* 凱爾特十字：第二張牌橫放 */
.slot.cross { position: relative; z-index: 2; }
.slot.cross .card-wrap { transform: rotate(90deg); }

/* ===== 解讀 ===== */
#reading h3 { color: #f3d98b; margin: 20px 0 8px; }
#reading .item {
  border-left: 3px solid #f3d98b;
  padding: 6px 0 6px 14px;
  margin: 12px 0;
}
#reading .item .t { font-weight: bold; }
#reading .item .pm { color: #a99cd0; font-size: 0.88rem; }
#reading p { line-height: 1.8; }
.tag { display: inline-block; font-size: 0.75rem; padding: 1px 8px; border-radius: 10px; margin-left: 6px; }
.tag.up { background: #2f6b4f; }
.tag.rev { background: #8b2f3d; }

/* ===== 紀錄 ===== */
.history-head { display: flex; justify-content: space-between; align-items: center; }
.h-item {
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 12px 0;
  cursor: pointer;
}
.h-item:hover { background: rgba(255,255,255,0.04); }
.h-item .date { color: #a99cd0; font-size: 0.8rem; }
.h-item .q { margin: 4px 0; }
.h-item .cards { font-size: 0.85rem; color: #d8cdf7; }
.empty { color: #a99cd0; text-align: center; padding: 20px; }

/* ===== 彈出視窗 ===== */
.modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 16px;
}
.modal-box {
  background: #1c1536;
  border: 1px solid #f3d98b;
  border-radius: 14px;
  padding: 24px;
  max-width: 480px;
  width: 100%;
  position: relative;
  line-height: 1.7;
}
.modal-box .close {
  position: absolute; top: 8px; right: 10px;
  border: none; font-size: 1.6rem; padding: 0 8px;
}

/* ===== 牌陣預覽 ===== */
#spreadPreview {
  --cw: 52px; --ch: 76px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin: 14px 0 4px; padding: 14px 8px;
  background: rgba(0,0,0,0.2); border-radius: 10px;
}
#spreadPreview.grid { display: grid; justify-content: center; align-items: center; gap: 6px 8px; }
.pv-slot { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pv-card {
  width: var(--cw); height: var(--ch);
  border: 1.5px dashed #f3d98b; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: #f3d98b; font-weight: bold; background: rgba(243,217,139,0.08);
}
.pv-slot span { font-size: 0.65rem; color: #d8cdf7; text-align: center; max-width: 64px; line-height: 1.2; }
.pv-slot.cross { position: relative; z-index: 2; }
.pv-slot.cross .pv-card { transform: rotate(90deg); background: #2a1f4d; }

/* ===== 結果表格與 AI 提示 ===== */
.result-table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.result-table th, .result-table td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.result-table th { color: #f3d98b; font-weight: normal; font-size: 0.85rem; }
.result-table small { color: #a99cd0; }
#aiPrompt {
  width: 100%; height: 220px; resize: vertical;
  background: #120c24; color: #ece6ff; border: 1px solid #5a4b8c; border-radius: 8px;
  padding: 12px; font-size: 0.85rem; line-height: 1.6; font-family: inherit;
}
.hint-left { color: #a99cd0; font-size: 0.9rem; margin: 4px 0 10px; }
#copyMsg { align-self: center; color: #9fe0b8; font-size: 0.9rem; }

/* ===== 洗牌・切牌・選牌 ===== */
button:disabled { opacity: 0.4; cursor: not-allowed; }
#ritual h2 { text-align: center; margin-bottom: 8px; }
.steps { display: flex; justify-content: center; gap: 8px; margin-bottom: 14px; }
.steps span {
  padding: 4px 14px; border-radius: 20px; font-size: 0.85rem;
  border: 1px solid #5a4b8c; color: #8f84b5;
}
.steps span.on { background: #f3d98b; color: #1c1536; border-color: #f3d98b; font-weight: bold; }
.steps span.done { color: #f3d98b; border-color: #f3d98b; }

#deckArea {
  min-height: 260px;
  display: flex; justify-content: center; align-items: center;
  gap: 48px; padding: 24px 0; flex-wrap: wrap;
}
.stack { position: relative; width: 110px; height: 165px; }
.stack .bc {
  position: absolute; inset: 0; border-radius: 8px;
  background: #f4ead2 url("img/back.jpg") center / cover;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  transform: translate(calc(var(--i) * -1px), calc(var(--i) * -1px));
}
.stack.shuffling .bc { animation: shuf 1s ease-in-out; }
@keyframes shuf {
  0%   { transform: translate(calc(var(--i) * -1px), calc(var(--i) * -1px)); }
  30%  { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); }
  60%  { transform: translate(calc(var(--dx) * -0.6), calc(var(--dy) * -0.5)) rotate(calc(var(--rot) * -1)); }
  100% { transform: translate(calc(var(--i) * -1px), calc(var(--i) * -1px)); }
}

.pile { cursor: pointer; text-align: center; transition: 0.5s; }
.pile .stack { transition: transform 0.2s; }
.pile:hover .stack { transform: translateY(-10px); }
.pile .count { margin-top: 12px; color: #d8cdf7; font-size: 0.85rem; }
.pile.chosen .stack { transform: translateY(-24px) scale(1.08); }
.pile.chosen .stack .bc { box-shadow: 0 0 16px rgba(243,217,139,0.9); }
.pile.fade { opacity: 0.25; transform: scale(0.9); }

#fan {
  display: flex; flex-wrap: wrap; justify-content: center;
  padding-left: 36px; row-gap: 14px; max-width: 1000px;
}
.fc {
  width: 64px; height: 96px; margin-left: -36px;
  border-radius: 6px; cursor: pointer; position: relative;
  background: #f4ead2 url("img/back.jpg") center / cover;
  box-shadow: -2px 2px 6px rgba(0,0,0,0.55);
  transition: transform 0.15s, filter 0.15s;
  opacity: 0; animation: fanin 0.4s forwards;
}
@keyframes fanin { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; } }
.fc:hover { transform: translateY(-12px); z-index: 5; }
.fc.sel { transform: translateY(-20px); filter: brightness(1.15); outline: 2px solid #f3d98b; z-index: 4; }
.fc.sel::after {
  content: attr(data-n);
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: #f3d98b; color: #1c1536; font-weight: bold; font-size: 0.75rem;
  width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 50%;
}

@media (max-width: 680px) {
  #deckArea { gap: 20px; }
  .stack { width: 80px; height: 120px; }
  .fc { width: 46px; height: 69px; margin-left: -28px; }
  #fan { padding-left: 28px; }
  #board, #board.compact { --cw: 84px; --ch: 126px; }
  #board.grid { display: flex; }
  .slot.cross .card-wrap { transform: none; }
}
.pv-card b { display: inline-block; }
.pv-slot.cross .pv-card b { transform: rotate(-90deg); }

/* ===== 牌陣問號說明 ===== */
.select-row { display: flex; gap: 8px; align-items: center; }
.select-row select { flex: 1; }
button.help {
  width: 38px; height: 38px; padding: 0; flex-shrink: 0;
  border-radius: 50%; font-weight: bold; font-size: 1.1rem;
}
.modal-box h3 { color: #f3d98b; margin: 16px 0 6px; font-size: 1rem; }
.modal-box ul, .modal-box ol { margin: 4px 0; padding-left: 22px; }
.modal-box li { margin: 3px 0; }
.help-tag { display: inline-block; margin: 0; padding: 2px 10px; border-radius: 10px; background: #3b2c72; font-size: 0.8rem; }
.all-item { padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 0.9rem; }
.all-item:hover { background: rgba(243,217,139,0.1); }
.all-item b { color: #ece6ff; }
.all-item div { color: #a99cd0; font-size: 0.85rem; }
.restart { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); }
.pos-list { list-style: none; padding-left: 0 !important; }

/* ===== 牌義圖鑑 ===== */
#gSearch { margin-top: 8px; }
.g-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.g-tabs button { padding: 5px 12px; font-size: 0.88rem; }
.g-tabs button.on { background: #f3d98b; color: #1c1536; border-color: #f3d98b; }
.g-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; }
.g-card { cursor: pointer; text-align: center; transition: transform .2s; }
.g-card:hover { transform: translateY(-4px); }
.g-card img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.5); display: block; }
.g-name { margin-top: 6px; color: #f3d98b; font-size: 0.9rem; }
.g-kw { color: #a99cd0; font-size: 0.72rem; line-height: 1.4; }

/* 底部留白，避免被網站角落的標章擋住 */
body { padding-bottom: 90px; }