@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;600;700&display=swap");

:root {
  --bg: #f4ede2;
  --card: #faf6ee;
  --ink: #2b211b;
  --ink-soft: #6b6058;
  --line: #ddd1bd;

  --brick: #8c3324;
  --gold: #a9812f;
  --brown: #6b4a34;
  --slate: #55635c;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Noto Serif TC", "PingFang TC", "Microsoft JhengHei", serif;
  overflow: hidden;
}

#deck {
  height: 100dvh;
  width: 100vw;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#deck::-webkit-scrollbar {
  display: none;
}

.slide {
  flex: 0 0 100vw;
  height: 100%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8vh 8vw 14vh;
  text-align: center;
  position: relative;
}

/* ---- 頂部裝飾：孔廟屋簷線條 + 頁籤 ---- */
.roofline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
}

.eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  color: var(--ink-soft);
  margin-bottom: 1.2rem;
}

/* ---- 邊框雷紋：畫面四周留白處的紅色回紋線，開頁時慢慢延伸出來 ---- */
.leiwen-frame {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  pointer-events: none;
  z-index: 2;
}
.leiwen-frame path {
  fill: none;
  stroke: var(--brick);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: miter;
  opacity: 0.8;
  shape-rendering: geometricPrecision;
}
@media (prefers-reduced-motion: reduce) {
  .leiwen-frame rect {
    transition: none !important;
  }
}

/* ---- Slide 1: 你帶走的是 [字] ---- */
.hero-char {
  font-size: min(30vw, 11rem);
  line-height: 1;
  font-weight: 700;
  color: var(--brick);
  margin: 0.2em 0;
}
.hero-sub {
  font-size: 0.95rem;
  color: var(--ink-soft);
  letter-spacing: 0.15em;
}

/* ---- Slide 2: 關於這個字 ---- */
.temple-icon {
  width: 52px;
  height: 52px;
  margin-bottom: 1.4rem;
  color: var(--brick);
  opacity: 0.9;
}
.char-badge {
  font-size: 3.4rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}
.pinyin {
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
  margin-bottom: 1.6rem;
  font-style: italic;
}
.quote {
  font-size: 1.05rem;
  line-height: 1.9;
  max-width: 26em;
  margin: 0 0 0.4rem;
}
.quote-from {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-bottom: 1.6rem;
}
.meaning {
  font-size: 0.95rem;
  line-height: 2;
  color: var(--ink);
  max-width: 24em;
}

/* ---- Slide 3: 牌匾祝福 ---- */
.plaque-phrase {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.plaque-from {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  margin-bottom: 1.8rem;
}
.blessing-mark {
  font-size: 1.6rem;
  margin-bottom: 1.2rem;
}
.blessing-text {
  font-size: 1.15rem;
  line-height: 2;
  max-width: 22em;
}

/* ---- Slide 4: 抽籤（今日吉字 + 今日運勢）---- */
.hidden {
  display: none;
}

/* ---- 籤筒：搖一搖抽籤的互動插畫 ---- */
.qiantong-wrap {
  width: 132px;
  margin: 0 auto 1.2rem;
  cursor: pointer;
}
.qiantong {
  width: 100%;
  height: auto;
  overflow: visible;
  display: block;
  transform-origin: 50% 92%;
}
.qt-body {
  fill: #caa15c;
  stroke: #8a6a34;
  stroke-width: 1.5;
}
.qt-body-line {
  stroke: #8a6a34;
  stroke-width: 1;
  opacity: 0.5;
}
.qt-band {
  fill: var(--brick);
}
.qt-mouth {
  fill: #5c4326;
}
.qt-rim {
  fill: none;
  stroke: #8a6a34;
  stroke-width: 1.5;
}
.qt-stick {
  fill: #ecdcb2;
  stroke: #b98f4f;
  stroke-width: 0.5;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.qt-stick-active {
  fill: #f4e7c4;
}

.qiantong-wrap.shaking .qiantong {
  animation: qt-shake 0.4s ease-in-out infinite;
}
@keyframes qt-shake {
  0%, 100% { transform: rotate(0deg) translateX(0); }
  20% { transform: rotate(-9deg) translateX(-3px); }
  40% { transform: rotate(7deg) translateX(3px); }
  60% { transform: rotate(-6deg) translateX(-2px); }
  80% { transform: rotate(8deg) translateX(2px); }
}
.qiantong-wrap.shaking .qt-stick {
  animation: qt-jitter 0.35s ease-in-out infinite;
}
@keyframes qt-jitter {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

.qiantong-wrap.popped .qt-stick-active {
  animation: qt-pop 0.95s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes qt-pop {
  0% { transform: translateY(0) rotate(0deg); }
  45% { transform: translateY(-78px) rotate(-16deg); }
  72% { transform: translateY(-44px) rotate(9deg); }
  100% { transform: translateY(26px) rotate(3deg); }
}
.qiantong-wrap.popped .qt-sticks .qt-stick:not(.qt-stick-active) {
  opacity: 0.45;
  transition: opacity 0.4s;
}
@media (prefers-reduced-motion: reduce) {
  .qiantong-wrap.shaking .qiantong,
  .qiantong-wrap.shaking .qt-stick,
  .qiantong-wrap.popped .qt-stick-active {
    animation: none !important;
  }
}

.draw-hint {
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.7;
  margin-bottom: 1.6rem;
}

#drawResult {
  animation: fadeUp 0.4s ease-out;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.lucky-label {
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}
.lucky-char {
  font-size: 5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1;
}
/* 抽籤結果的吉字，accent class 是直接掛在同一個元素上，不是靠祖先包住，
   所以要另外補一組「自己就是」的選擇器，不能只靠 .accent-x .lucky-char */
.lucky-char.accent-brick { color: var(--brick); }
.lucky-char.accent-gold { color: var(--gold); }
.lucky-char.accent-brown { color: var(--brown); }
.lucky-char.accent-slate { color: var(--slate); }

.stars {
  font-size: 1.6rem;
  letter-spacing: 0.3em;
  margin-bottom: 0.8rem;
  color: var(--gold);
}
.fortune-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
}
.fortune-text {
  font-size: 1rem;
  line-height: 2;
  max-width: 22em;
  margin-bottom: 2rem;
}

button.save-btn {
  font-family: inherit;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  background: var(--ink);
  color: var(--bg);
  border: none;
  border-radius: 999px;
  padding: 0.85em 2.4em;
  cursor: pointer;
}
button.save-btn:active {
  opacity: 0.75;
}
button.save-btn[disabled] {
  opacity: 0.55;
}

/* ---- accent colors (依字輪替) ---- */
.accent-brick .char-badge,
.accent-brick .hero-char,
.accent-brick .lucky-char {
  color: var(--brick);
}
.accent-gold .char-badge,
.accent-gold .hero-char,
.accent-gold .lucky-char {
  color: var(--gold);
}
.accent-brown .char-badge,
.accent-brown .hero-char,
.accent-brown .lucky-char {
  color: var(--brown);
}
.accent-slate .char-badge,
.accent-slate .hero-char,
.accent-slate .lucky-char {
  color: var(--slate);
}

/* ---- 底部頁籤點 ---- */
#dots {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 5vh;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  z-index: 10;
}
.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line);
  transition: background 0.2s, transform 0.2s;
}
.dot.active {
  background: var(--ink);
  transform: scale(1.3);
}

/* ---- 左右點按翻頁的透明熱區 ---- */
.tap-zone {
  position: fixed;
  top: 0;
  bottom: 8vh;
  width: 30%;
  z-index: 5;
}
.tap-zone.left {
  left: 0;
}
.tap-zone.right {
  right: 0;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 12vh;
  transform: translate(-50%, 0);
  background: var(--ink);
  color: var(--bg);
  font-size: 0.85rem;
  padding: 0.6em 1.4em;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  z-index: 20;
}
.toast.show {
  opacity: 1;
}

/* ---- 左下角會動的禮虎，點了連去孔廟官網 ---- */
.mascot {
  position: fixed;
  left: 3vw;
  bottom: 1vh;
  z-index: 20;
  display: block;
  line-height: 0;
  animation: mascot-bob 1.4s ease-in-out infinite;
}
.mascot img {
  height: 9.9vh;
  min-height: 62px;
  max-height: 84px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(43, 33, 27, 0.25));
}
@keyframes mascot-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .mascot {
    animation: none;
  }
}