/* ============================================
   Pray4Meta — 祖克聖殿
   AAA-Grade Temple UI Redesign
   ============================================ */

:root {
  --red-deep: #8B0000;
  --red-main: #CC0000;
  --red-bright: #E63946;
  --red-glow: rgba(204, 0, 0, 0.4);
  --gold-deep: #B8860B;
  --gold-main: #DAA520;
  --gold-bright: #FFD700;
  --gold-light: #FFF3C4;
  --gold-glow: rgba(255, 215, 0, 0.3);
  --wood-dark: #3E1F00;
  --wood-main: #5C2E00;
  --wood-light: #8B4513;
  --black: #0D0500;
  --black-warm: #1A0A00;
  --cream: #FFF8E7;
  --smoke: rgba(200, 180, 160, 0.3);
  --font-serif: 'Noto Serif TC', serif;
  --font-calligraphy: 'Ma Shan Zheng', cursive;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-serif);
  background: var(--black);
  color: var(--cream);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  /* Deep temple background with texture */
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(139, 0, 0, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 50%, rgba(92, 46, 0, 0.08) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 50%, rgba(92, 46, 0, 0.08) 0%, transparent 40%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(62, 31, 0, 0.03) 2px,
      rgba(62, 31, 0, 0.03) 4px
    );
}

/* ============================================
   Ambient Light Overlay
   ============================================ */
.ambient-light {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255, 215, 0, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(139, 0, 0, 0.06) 0%, transparent 40%);
  animation: ambientPulse 8s ease-in-out infinite;
}

/* ============================================
   Smoke Background
   ============================================ */
.smoke-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.smoke-particle {
  position: absolute;
  background: radial-gradient(circle, rgba(180, 165, 145, 0.25) 0%, rgba(160, 140, 120, 0.1) 40%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
  filter: blur(8px);
  animation: smokeRise 10s ease-out infinite;
}

/* Ember particles */
.ember-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.ember-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--gold-bright);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--gold-bright), 0 0 12px rgba(255, 140, 0, 0.5);
  opacity: 0;
  animation: emberFloat 6s ease-out infinite;
}

/* ============================================
   Temple Wrapper
   ============================================ */
.temple-wrapper {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto;
  min-height: 100vh;
  background:
    linear-gradient(180deg,
      rgba(60, 10, 0, 0.95) 0%,
      rgba(30, 8, 0, 0.9) 5%,
      rgba(20, 5, 0, 0.85) 20%,
      rgba(15, 3, 0, 0.9) 50%,
      rgba(10, 2, 0, 0.95) 80%,
      var(--black) 100%
    );
  box-shadow:
    0 0 120px rgba(218, 165, 32, 0.12),
    0 0 60px rgba(139, 0, 0, 0.15),
    inset 0 0 100px rgba(0, 0, 0, 0.3);
  border-left: 1px solid rgba(218, 165, 32, 0.08);
  border-right: 1px solid rgba(218, 165, 32, 0.08);
}

/* ============================================
   Temple Roof — Dramatic Header
   ============================================ */
.temple-roof {
  position: relative;
  text-align: center;
  padding: 0;
  background:
    linear-gradient(180deg,
      rgba(60, 0, 0, 0.95) 0%,
      rgba(40, 5, 0, 0.8) 60%,
      transparent 100%
    );
  overflow: visible;
}

.roof-dragon-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 80px;
  overflow: hidden;
  padding: 0 10px;
}

.roof-dragon-svg {
  width: 45%;
  max-height: 70px;
  object-fit: contain;
  opacity: 0.7;
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.3));
}

.roof-dragon-svg.right {
  transform: scaleX(-1);
}

.roof-pearl-orb {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}

.pearl-core {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFFDE0, var(--gold-bright), var(--gold-deep));
  box-shadow:
    0 0 20px rgba(255, 215, 0, 0.7),
    0 0 40px rgba(255, 215, 0, 0.4),
    0 0 60px rgba(255, 215, 0, 0.2);
  animation: pearlGlow 3s ease-in-out infinite;
}

.pearl-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, transparent 70%);
  animation: pearlGlowPulse 3s ease-in-out infinite;
}

/* Roof tiles */
.roof-tiles {
  height: 20px;
  margin: 0 12px;
  background:
    linear-gradient(180deg, var(--red-deep) 0%, #5C1010 50%, var(--wood-dark) 100%);
  border-top: 4px solid var(--gold-main);
  border-bottom: 3px solid var(--gold-deep);
  position: relative;
}

.roof-tile-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 18px,
    rgba(139, 0, 0, 0.3) 18px,
    rgba(139, 0, 0, 0.3) 20px
  );
}

.roof-eave {
  height: 8px;
  margin: 0 8px;
  background: linear-gradient(180deg, var(--gold-deep), var(--wood-dark));
  position: relative;
}

.eave-ornament {
  position: absolute;
  top: -4px;
  width: 24px;
  height: 16px;
  background: var(--gold-main);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.eave-ornament.left { left: 8px; }
.eave-ornament.right { right: 8px; }

/* Hanging Lanterns */
.lantern-row {
  display: flex;
  justify-content: space-between;
  padding: 0 40px;
  position: relative;
  height: 50px;
}

.lantern {
  position: relative;
  animation: lanternSway 4s ease-in-out infinite;
  transform-origin: top center;
}

.lantern.right {
  animation-delay: -2s;
}

.lantern-body {
  width: 32px;
  height: 40px;
  background: radial-gradient(ellipse at 50% 40%, #FF2020, var(--red-deep));
  border-radius: 4px 4px 50% 50%;
  border: 1px solid var(--gold-main);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 20px rgba(255, 50, 50, 0.4),
    0 0 40px rgba(255, 50, 50, 0.2),
    inset 0 0 15px rgba(255, 100, 50, 0.3);
  position: relative;
}

.lantern-body span {
  font-family: var(--font-calligraphy);
  font-size: 0.85rem;
  color: var(--gold-bright);
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

.lantern-body::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 6px;
  background: var(--gold-main);
  border-radius: 2px 2px 0 0;
}

.lantern-body::after {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 10px;
  background: var(--gold-deep);
}

.lantern-tassel {
  width: 2px;
  height: 14px;
  background: linear-gradient(to bottom, var(--gold-main), var(--red-deep));
  margin: 0 auto;
  position: relative;
}

.lantern-tassel::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 6px;
  background: var(--red-main);
  border-radius: 0 0 50% 50%;
}

/* Temple Plaque */
.temple-plaque {
  display: inline-block;
  margin: 8px auto 4px;
  padding: 14px 48px;
  background:
    linear-gradient(135deg,
      #2A1200 0%,
      var(--wood-dark) 20%,
      var(--wood-main) 50%,
      var(--wood-dark) 80%,
      #2A1200 100%
    );
  border: 4px solid var(--gold-main);
  border-radius: 4px;
  box-shadow:
    0 0 30px rgba(218, 165, 32, 0.4),
    0 0 60px rgba(218, 165, 32, 0.15),
    inset 0 2px 0 rgba(255, 215, 0, 0.2),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3),
    4px 4px 12px rgba(0, 0, 0, 0.5);
  position: relative;
}

.plaque-ornament {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
}

.plaque-ornament.top { top: 4px; }
.plaque-ornament.bottom { bottom: 4px; }

.plaque-text {
  font-family: var(--font-calligraphy);
  font-size: 2.8rem;
  color: var(--gold-bright);
  text-shadow:
    0 0 10px rgba(255, 215, 0, 0.6),
    0 0 30px rgba(255, 215, 0, 0.3),
    2px 2px 4px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.4em;
}

.plaque-text .meta-blue {
  color: #0668E1;
  text-shadow:
    0 0 10px rgba(6, 104, 225, 0.6),
    0 0 30px rgba(6, 104, 225, 0.3),
    2px 2px 4px rgba(0, 0, 0, 0.5);
}

.temple-subtitle {
  font-family: var(--font-calligraphy);
  font-size: 0.95rem;
  color: var(--gold-main);
  opacity: 0.7;
  margin: 4px 0 12px;
  letter-spacing: 0.2em;
  text-shadow: 0 0 10px rgba(218, 165, 32, 0.3);
}

/* ============================================
   Decorative Columns
   ============================================ */
.temple-columns {
  position: absolute;
  top: 140px;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.column-left,
.column-right {
  position: absolute;
  top: 0;
  width: 28px;
  height: 100%;
  opacity: 0.15;
}

.column-left {
  left: 0;
}

.column-right {
  right: 0;
}

.column-left img,
.column-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ============================================
   Step Indicator — Temple Style
   ============================================ */
.step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px 28px;
  gap: 0;
  position: relative;
  z-index: 2;
}

.step {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 40%, rgba(62, 31, 0, 0.9), var(--wood-dark));
  border: 2px solid var(--gold-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.step-icon {
  font-family: var(--font-calligraphy);
  font-size: 0.85rem;
  color: var(--gold-deep);
  transition: all 0.5s ease;
  line-height: 1;
}

.step span {
  font-size: 0.65rem;
  font-family: var(--font-calligraphy);
  color: var(--gold-deep);
  white-space: nowrap;
  position: absolute;
  bottom: -20px;
  transition: all 0.5s ease;
  letter-spacing: 0.1em;
}

.step.active {
  background:
    radial-gradient(circle at 40% 40%, var(--red-main), var(--red-deep));
  border-color: var(--gold-bright);
  box-shadow:
    0 0 16px rgba(255, 215, 0, 0.5),
    0 0 30px rgba(255, 215, 0, 0.2),
    inset 0 0 10px rgba(255, 215, 0, 0.1);
  transform: scale(1.1);
}

.step.active .step-icon {
  color: var(--gold-bright);
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

.step.active span {
  color: var(--gold-bright);
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.4);
}

.step.completed {
  background:
    radial-gradient(circle at 40% 40%, var(--gold-main), var(--gold-deep));
  border-color: var(--gold-bright);
  box-shadow: 0 0 10px rgba(218, 165, 32, 0.3);
}

.step.completed .step-icon {
  color: var(--wood-dark);
}

.step.completed span {
  color: var(--gold-main);
}

.step-line {
  flex: 0 0 28px;
  height: 2px;
  background: linear-gradient(90deg, var(--wood-dark), rgba(62, 31, 0, 0.5), var(--wood-dark));
  transition: all 0.5s ease;
  position: relative;
}

.step-line.completed {
  background: linear-gradient(90deg, var(--gold-main), var(--gold-bright), var(--gold-main));
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
  height: 3px;
}

/* ============================================
   Main Content
   ============================================ */
.temple-main {
  padding: 10px 20px 40px;
  min-height: 60vh;
  position: relative;
  z-index: 2;
}

.ritual-step {
  display: none;
  animation: fadeInUp 0.8s ease;
}

.ritual-step.active {
  display: block;
}

.step-title {
  font-family: var(--font-calligraphy);
  font-size: 2rem;
  color: var(--gold-bright);
  text-align: center;
  margin-bottom: 8px;
  text-shadow:
    0 0 12px rgba(255, 215, 0, 0.4),
    0 0 30px rgba(255, 215, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.title-ornament {
  display: inline-block;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-main), transparent);
  position: relative;
}

.title-ornament::before {
  content: '';
  position: absolute;
  top: -3px;
  width: 8px;
  height: 8px;
  background: var(--gold-main);
  transform: rotate(45deg);
}

.title-ornament.left::before { right: 0; }
.title-ornament.right::before { left: 0; }

.step-desc {
  text-align: center;
  color: var(--gold-light);
  opacity: 0.6;
  font-size: 0.9rem;
  margin-bottom: 24px;
}

/* ============================================
   Step 1: Shrine & Incense — Premium
   ============================================ */
.shrine {
  text-align: center;
  margin-bottom: 20px;
}

.shrine-frame-wrapper {
  position: relative;
  display: inline-block;
  width: 300px;
  max-width: 85vw;
}

.shrine-frame-svg {
  position: absolute;
  top: -20px;
  left: -25px;
  width: calc(100% + 50px);
  height: calc(100% + 40px);
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 0 12px rgba(218, 165, 32, 0.3));
}

.shrine-frame-content {
  position: relative;
  z-index: 2;
  padding: 30px 20px;
}

.deity-image {
  position: relative;
  width: 220px;
  height: 280px;
  margin: 0 auto;
  background: var(--wood-dark);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 40px rgba(218, 165, 32, 0.2),
    0 0 80px rgba(218, 165, 32, 0.1),
    inset 0 0 30px rgba(0, 0, 0, 0.5);
  border: 3px solid var(--gold-main);
}

.deity-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.05) brightness(1.02);
}

.deity-glow {
  position: absolute;
  top: -40px;
  left: -40px;
  right: -40px;
  bottom: -40px;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 215, 0, 0.2) 0%,
    rgba(255, 215, 0, 0.08) 40%,
    transparent 70%
  );
  pointer-events: none;
  animation: divineGlow 4s ease-in-out infinite;
}

.deity-rays {
  position: absolute;
  top: -60px;
  left: -60px;
  right: -60px;
  bottom: -60px;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg,
      rgba(255, 215, 0, 0.06) 10deg,
      transparent 20deg,
      transparent 30deg,
      rgba(255, 215, 0, 0.04) 40deg,
      transparent 50deg,
      transparent 60deg,
      rgba(255, 215, 0, 0.06) 70deg,
      transparent 80deg,
      transparent 90deg,
      rgba(255, 215, 0, 0.04) 100deg,
      transparent 110deg
    );
  pointer-events: none;
  animation: deityRaysSpin 30s linear infinite;
}

/* Altar Table */
.altar-table {
  position: relative;
  margin-top: 12px;
  padding: 12px 20px 8px;
  background: linear-gradient(135deg, var(--wood-dark), var(--wood-main), var(--wood-dark));
  border: 2px solid var(--gold-deep);
  border-radius: 4px;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 215, 0, 0.1);
}

.altar-cloth {
  position: absolute;
  top: -4px;
  left: 10%;
  right: 10%;
  height: 8px;
  background: linear-gradient(135deg, var(--red-deep), var(--red-main), var(--red-deep));
  border-radius: 0 0 4px 4px;
  border-bottom: 2px solid var(--gold-main);
}

.incense-holder-wrapper {
  position: relative;
  height: 130px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.incense-holder-svg {
  position: absolute;
  bottom: 0;
  width: 120px;
  height: 140px;
  z-index: 1;
  opacity: 0.9;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}

.incense-sticks-overlay {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 10px;
  height: 120px;
  align-items: flex-end;
  padding-bottom: 35px;
}

.incense-stick {
  width: 3px;
  height: 0;
  background: linear-gradient(to top, var(--gold-deep) 0%, #8B4513 40%, #D2691E 100%);
  border-radius: 1px 1px 0 0;
  transition: height 1s ease;
  position: relative;
}

.incense-stick.lit {
  height: 80px;
}

.incense-stick.lit::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background: #FF4500;
  border-radius: 50%;
  box-shadow:
    0 0 8px #FF4500,
    0 0 16px #FF6600,
    0 0 24px rgba(255, 100, 0, 0.4);
  animation: incenseBurn 1.5s ease-in-out infinite;
}

.incense-stick.lit::after {
  content: '';
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 60px;
  background: radial-gradient(ellipse at center,
    rgba(180, 170, 160, 0.3) 0%,
    rgba(160, 140, 120, 0.15) 40%,
    transparent 70%
  );
  filter: blur(3px);
  animation: incenseSmoke 3s ease-out infinite;
}

.altar-fruits {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 8px;
}

.altar-fruit {
  width: 16px;
  height: 16px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 40% 35%, #FF8C00, #CC6600);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ============================================
   Step 2: Offerings — Embossed Cards
   ============================================ */
.offerings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.offering-card {
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.offering-card-inner {
  background:
    linear-gradient(145deg,
      rgba(92, 46, 0, 0.7) 0%,
      rgba(62, 31, 0, 0.9) 50%,
      rgba(42, 20, 0, 0.95) 100%
    );
  border: 2px solid rgba(184, 134, 11, 0.3);
  border-radius: 10px;
  padding: 14px 8px 12px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 215, 0, 0.08);
}

/* Emboss effect top highlight */
.offering-card-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.04) 0%, transparent 100%);
  pointer-events: none;
}

.offering-card:hover .offering-card-inner {
  border-color: var(--gold-deep);
  transform: translateY(-4px);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(218, 165, 32, 0.1);
}

.offering-card.selected .offering-card-inner {
  border-color: var(--gold-bright);
  background:
    linear-gradient(145deg,
      rgba(139, 0, 0, 0.5) 0%,
      rgba(92, 46, 0, 0.7) 50%,
      rgba(62, 31, 0, 0.85) 100%
    );
  box-shadow:
    0 0 20px rgba(255, 215, 0, 0.2),
    0 4px 16px rgba(0, 0, 0, 0.4),
    inset 0 0 20px rgba(255, 215, 0, 0.05);
}

.offering-check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(218, 165, 32, 0.3);
  transition: all 0.3s ease;
}

.offering-card.selected .offering-check {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.offering-card.selected .offering-check::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 6px;
  width: 5px;
  height: 9px;
  border: solid var(--wood-dark);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.offering-img {
  width: 68px;
  height: 68px;
  margin: 0 auto 8px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 2rem;
  border: 1px solid rgba(218, 165, 32, 0.15);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
}

.offering-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.offering-img .emoji-fallback {
  font-size: 2rem;
  line-height: 1;
}

.offering-name {
  display: block;
  font-size: 0.8rem;
  color: var(--gold-bright);
  font-weight: 700;
  margin-bottom: 3px;
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.2);
}

.offering-desc {
  display: block;
  font-size: 0.65rem;
  color: var(--gold-light);
  opacity: 0.5;
}

/* Substep title */
.substep-title {
  font-family: var(--font-calligraphy);
  font-size: 1.4rem;
  color: var(--gold-main);
  text-align: center;
  margin: 28px 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Joss Paper */
.joss-paper-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}

.joss-card {
  background:
    linear-gradient(145deg, rgba(92, 46, 0, 0.5), rgba(62, 31, 0, 0.7));
  border: 2px solid rgba(184, 134, 11, 0.2);
  border-radius: 8px;
  padding: 10px 4px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.joss-card:hover {
  border-color: var(--gold-deep);
  transform: translateY(-2px);
}

.joss-card.selected {
  border-color: var(--gold-bright);
  box-shadow:
    0 0 15px rgba(255, 215, 0, 0.2),
    0 4px 12px rgba(0, 0, 0, 0.3);
  background:
    linear-gradient(145deg, rgba(139, 0, 0, 0.3), rgba(92, 46, 0, 0.6));
}

.joss-img {
  width: 52px;
  height: 64px;
  margin: 0 auto 6px;
  background: linear-gradient(135deg, var(--gold-light) 0%, #E8D5A0 100%);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.2),
    inset 0 0 0 1px rgba(218, 165, 32, 0.3);
}

.joss-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.joss-card span {
  font-size: 0.72rem;
  color: var(--gold-light);
  font-family: var(--font-calligraphy);
  letter-spacing: 0.05em;
}

/* Burn Overlay */
.burn-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 100;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.burn-overlay.active {
  display: flex;
}

.fire-container {
  width: 200px;
  height: 250px;
  position: relative;
}

.burn-text {
  font-family: var(--font-calligraphy);
  font-size: 1.6rem;
  color: var(--gold-bright);
  margin-top: 20px;
  animation: burnTextPulse 1.5s ease-in-out infinite;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

.fire-particle {
  position: absolute;
  border-radius: 50%;
  animation: fireFloat 1.5s ease-out infinite;
}

/* ============================================
   Step 3: Wish — Scroll Style
   ============================================ */
.wish-scroll {
  position: relative;
  max-width: 400px;
  margin: 0 auto 24px;
}

.scroll-top,
.scroll-bottom {
  height: 12px;
  background:
    linear-gradient(180deg,
      var(--wood-main),
      var(--wood-dark)
    );
  border: 1px solid var(--gold-deep);
  border-radius: 6px;
  position: relative;
  z-index: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.scroll-top { border-radius: 6px 6px 0 0; }
.scroll-bottom { border-radius: 0 0 6px 6px; }

.wish-textarea {
  width: 100%;
  height: 120px;
  padding: 16px;
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--wood-dark);
  background:
    linear-gradient(180deg,
      #F5E6C8 0%,
      var(--gold-light) 20%,
      #F5E6C8 80%,
      #ECD8A8 100%
    );
  border: none;
  border-left: 3px solid var(--gold-main);
  border-right: 3px solid var(--gold-main);
  resize: none;
  outline: none;
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.08);
  /* Subtle paper texture */
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 23px,
      rgba(184, 134, 11, 0.08) 23px,
      rgba(184, 134, 11, 0.08) 24px
    );
}

.wish-textarea::placeholder {
  color: var(--wood-light);
  opacity: 0.4;
}

.wish-textarea:focus {
  box-shadow:
    inset 0 2px 12px rgba(0, 0, 0, 0.08),
    0 0 20px rgba(218, 165, 32, 0.15);
}

.wish-char-count {
  text-align: right;
  font-size: 0.75rem;
  color: var(--gold-deep);
  margin-top: 6px;
  opacity: 0.6;
}

/* ============================================
   Step 5: Moon Blocks — OVERHAULED
   3D Crescent Jiaobei with realistic physics
   ============================================ */

/* Holy counter — 3 dots showing progress toward 3 聖筊 */
.holy-counter {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 24px;
  position: relative;
}

.holy-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--gold-deep);
  background: rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
  position: relative;
  overflow: visible;
}

.holy-dot::after {
  content: '筊';
  font-family: var(--font-calligraphy);
  font-size: 0.85rem;
  color: var(--gold-deep);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.4;
  transition: all 0.3s ease;
}

.holy-dot.achieved {
  border-color: var(--gold-bright);
  background: radial-gradient(circle at 40% 35%,
    #FFF8C4 0%,
    var(--gold-bright) 40%,
    var(--gold-deep) 100%
  );
  animation: holyBurst 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.holy-dot.achieved::after {
  content: '聖';
  color: var(--red-deep);
  opacity: 1;
  font-weight: 700;
  font-size: 0.95rem;
  text-shadow: 0 0 4px rgba(255, 215, 0, 0.5);
}

/* Expanding ring on achievement */
.holy-dot.achieved::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border: 2px solid var(--gold-bright);
  border-radius: 50%;
  animation: holyRing 0.8s ease-out forwards;
}

/* All three achieved — celebration state */
.holy-counter.celebrating .holy-dot.achieved {
  animation: holyBurst 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
             holyCelebrate 1.5s ease-in-out 0.7s;
}

/* Celebration glow behind the counter */
.holy-counter.celebrating::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(255, 215, 0, 0.4) 0%,
    rgba(255, 215, 0, 0.1) 40%,
    transparent 70%
  );
  border-radius: 50%;
  animation: celebrateGlow 1.5s ease-out forwards;
  pointer-events: none;
}

/* --- Blocks Area --- */
.blocks-area {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin: 30px 0;
  min-height: 260px;
  align-items: flex-end;
  position: relative;
}

/* --- Moon Block — 3D Crescent Shape --- */
.moon-block {
  width: 90px;
  height: 55px;
  position: relative;
  cursor: pointer;
  --final-rot-left: 0deg;
  --final-rot-right: 0deg;
}

/* Ground shadow beneath each block */
.moon-block::before {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 16px;
  background: radial-gradient(ellipse,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0.1) 50%,
    transparent 70%
  );
  border-radius: 50%;
  filter: blur(3px);
  transition: all 0.3s ease;
}

.block-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 0.5s ease;
}

/* Each block has two visual faces stacked */
.block-flat, .block-round {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* --- FLAT SIDE (red/painted side — faces up when flat) --- */
/* --- FLAT SIDE (red/painted side — 陰面朝上) --- */
/* 筊杯是橫向半月形：上方圓弧，下方平直 */
.block-flat {
  width: 90px;
  height: 50px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* 上方大圓弧，下方近乎平直 */
  border-radius: 50% 50% 8px 8px / 80% 80% 8px 8px;
  background:
    radial-gradient(ellipse at 40% 30%, rgba(255, 80, 80, 0.5) 0%, transparent 50%),
    linear-gradient(180deg,
      #E03030 0%,
      var(--red-main) 30%,
      var(--red-deep) 70%,
      #4A0000 100%
    );
  border: 2px solid var(--gold-main);
  box-shadow:
    inset 0 -6px 12px rgba(0, 0, 0, 0.5),
    inset 0 3px 6px rgba(255, 100, 100, 0.25),
    0 6px 16px rgba(0, 0, 0, 0.4);
}

/* Flat side — 中央金圓裝飾 */
.block-flat::after {
  content: '';
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 215, 0, 0.35);
  border-radius: 50%;
}

.block-flat::before {
  content: '';
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: rgba(255, 215, 0, 0.25);
  border-radius: 50%;
}

/* --- ROUND SIDE (gold/木頭色 — 陽面朝上) --- */
.block-round {
  width: 90px;
  height: 50px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50% 50% 8px 8px / 80% 80% 8px 8px;
  background:
    radial-gradient(ellipse at 35% 25%, rgba(255, 255, 200, 0.5) 0%, transparent 40%),
    linear-gradient(180deg,
      #FFEC8B 0%,
      var(--gold-main) 30%,
      var(--gold-deep) 70%,
      #7A5E14 100%
    );
  border: 2px solid var(--gold-bright);
  box-shadow:
    inset 0 6px 12px rgba(255, 255, 200, 0.35),
    inset 0 -6px 12px rgba(0, 0, 0, 0.35),
    0 6px 16px rgba(0, 0, 0, 0.4);
  display: none;
}

/* Round side — 凸面高光 */
.block-round::after {
  content: '';
  position: absolute;
  top: 15%;
  left: 20%;
  width: 60%;
  height: 45%;
  background: radial-gradient(ellipse, rgba(255, 255, 220, 0.45) 0%, transparent 70%);
  border-radius: 50%;
}

.block-round::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 25px;
  border-radius: 50%;
  border: 1px solid rgba(139, 105, 20, 0.15);
}

/* --- Animation States --- */

/* Throwing state — main toss animation */
.moon-block.block-left.throwing .block-inner {
  animation: blockTossLeft 2.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.moon-block.block-right.throwing .block-inner {
  animation: blockTossRight 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

/* Shadow shrinks during flight */
.moon-block.throwing::before {
  animation: blockShadowFlight 2.2s ease forwards;
}

.moon-block.block-right.throwing::before {
  animation: blockShadowFlight 2.4s ease forwards;
}

/* Landed flat — show red side with bounce */
.moon-block.flat .block-flat {
  display: block;
}
.moon-block.flat .block-round {
  display: none;
}
.moon-block.flat .block-inner {
  animation: blockBounceFlat 0.5s ease-out;
}

/* Landed round — show gold side with bounce */
.moon-block.round .block-flat {
  display: none;
}
.moon-block.round .block-round {
  display: block;
}
.moon-block.round .block-inner {
  animation: blockBounceRound 0.5s ease-out;
}

/* Ground impact flash on landing */
.moon-block.landed::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  width: 90%;
  height: 8px;
  background: radial-gradient(ellipse,
    rgba(255, 215, 0, 0.4) 0%,
    rgba(255, 215, 0, 0.1) 50%,
    transparent 70%
  );
  border-radius: 50%;
  animation: groundImpact 0.6s ease-out;
}

.blocks-result {
  text-align: center;
  font-family: var(--font-calligraphy);
  font-size: 1.5rem;
  color: var(--gold-bright);
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
  transition: opacity 0.3s ease;
}

/* ============================================
   Step 4: Fortune Cylinder — OVERHAULED
   Bigger, more dramatic, with stick physics
   ============================================ */
.fortune-container {
  display: flex;
  justify-content: center;
  margin: 20px 0 30px;
  min-height: 340px;
  align-items: flex-end;
}

.fortune-cylinder-wrapper {
  position: relative;
}

.fortune-cylinder {
  width: 120px;
  height: 300px;
  background:
    linear-gradient(90deg,
      #3A1800 0%,
      #5C2E00 8%,
      var(--wood-light) 20%,
      #A0613A 35%,
      #B8743E 50%,
      #A0613A 65%,
      var(--wood-light) 80%,
      #5C2E00 92%,
      #3A1800 100%
    );
  border-radius: 12px 12px 50% 50%;
  border: 3px solid var(--gold-deep);
  position: relative;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12px;
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.6),
    0 4px 12px rgba(0, 0, 0, 0.3),
    inset 0 0 30px rgba(0, 0, 0, 0.35),
    inset 0 3px 0 rgba(255, 200, 100, 0.15);
  transition: box-shadow 0.3s ease;
}

/* Decorative band — upper */
.fortune-cylinder::before {
  content: '';
  position: absolute;
  top: 25%;
  left: -1px;
  right: -1px;
  height: 30px;
  background:
    linear-gradient(180deg,
      var(--gold-deep) 0%,
      var(--gold-main) 25%,
      var(--gold-bright) 50%,
      var(--gold-main) 75%,
      var(--gold-deep) 100%
    );
  border-top: 1px solid var(--gold-bright);
  border-bottom: 1px solid var(--gold-bright);
  z-index: 1;
}

/* Label on the band */
.fortune-cylinder::after {
  content: '籤';
  position: absolute;
  top: calc(25% + 3px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-calligraphy);
  font-size: 1.2rem;
  color: var(--red-deep);
  z-index: 2;
  text-shadow: 0 1px 0 rgba(255, 215, 0, 0.4);
}

.cylinder-sticks {
  display: flex;
  gap: 4px;
  align-items: flex-start;
  position: relative;
  z-index: 3;
}

.stick {
  width: 5px;
  height: 240px;
  background: linear-gradient(to top,
    var(--gold-light) 0%,
    #D2B48C 30%,
    #C4A070 60%,
    #B8956A 100%
  );
  border-radius: 2px 2px 1px 1px;
  transition: transform 0.8s ease;
  transform-origin: bottom center;
  box-shadow: 1px 0 2px rgba(0, 0, 0, 0.2);
  position: relative;
}

/* Red tip on main stick */
.stick::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(to top, #C4A070, var(--red-main) 40%, var(--red-deep));
  border-radius: 2px 2px 0 0;
}

.stick-decor {
  width: 4px;
  height: 220px;
  background: linear-gradient(to top, #E8D5A0 0%, #C4A070 60%, #B8956A 100%);
  border-radius: 1px;
  opacity: 0.7;
  transform-origin: bottom center;
}

.stick-decor:nth-child(2) { height: 210px; margin-top: 10px; }
.stick-decor:nth-child(3) { height: 225px; margin-top: 5px; }
.stick-decor:nth-child(4) { height: 200px; margin-top: 15px; }
.stick-decor:nth-child(5) { height: 215px; margin-top: 8px; }
.stick-decor:nth-child(6) { height: 205px; margin-top: 12px; }

.fortune-cylinder:hover .stick {
  transform: translateY(-16px);
}

.fortune-cylinder:hover .stick-decor {
  transform: translateY(-6px);
  transition: transform 0.5s ease;
}

/* Shaking state — cylinder + individual stick rattle */
.fortune-cylinder.shaking {
  animation: cylinderShake 1.8s ease-in-out, cylinderGlowPulse 0.6s ease-in-out 3;
}

.fortune-cylinder.shaking .stick-decor:nth-child(2) {
  --rattle-x: 3px;
  --rattle-r: 4deg;
  animation: stickRattle 0.25s ease-in-out infinite;
  animation-delay: 0.02s;
}

.fortune-cylinder.shaking .stick-decor:nth-child(3) {
  --rattle-x: -2px;
  --rattle-r: -3deg;
  animation: stickRattle 0.22s ease-in-out infinite;
  animation-delay: 0.05s;
}

.fortune-cylinder.shaking .stick-decor:nth-child(4) {
  --rattle-x: 2.5px;
  --rattle-r: 5deg;
  animation: stickRattle 0.28s ease-in-out infinite;
  animation-delay: 0.03s;
}

.fortune-cylinder.shaking .stick-decor:nth-child(5) {
  --rattle-x: -3px;
  --rattle-r: -4deg;
  animation: stickRattle 0.2s ease-in-out infinite;
  animation-delay: 0.07s;
}

.fortune-cylinder.shaking .stick-decor:nth-child(6) {
  --rattle-x: 1.5px;
  --rattle-r: 3deg;
  animation: stickRattle 0.24s ease-in-out infinite;
  animation-delay: 0.04s;
}

.fortune-cylinder.shaking .stick {
  --rattle-x: -2px;
  --rattle-r: -5deg;
  animation: stickRattle 0.18s ease-in-out infinite;
}

/* Stick pop out */
.stick.drawn {
  animation: stickPopOut 1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

/* Fortune number reveal animation */
.fortune-poem.revealing .poem-number {
  animation: fortuneNumberReveal 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Fortune Poem Display */
.fortune-poem {
  max-width: 400px;
  margin: 0 auto;
  padding: 28px 24px;
  background:
    linear-gradient(180deg,
      #F5E6C8 0%,
      var(--gold-light) 20%,
      var(--gold-light) 80%,
      #F5E6C8 100%
    );
  border: 4px solid var(--gold-main);
  border-radius: 4px;
  text-align: center;
  animation: fadeInUp 0.8s ease;
  box-shadow:
    0 0 30px rgba(218, 165, 32, 0.3),
    0 8px 24px rgba(0, 0, 0, 0.3),
    inset 0 0 40px rgba(255, 255, 200, 0.1);
  position: relative;
}

.poem-seal {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 3px solid var(--red-main);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.4;
}

.poem-seal::after {
  content: '驗';
  font-family: var(--font-calligraphy);
  font-size: 0.9rem;
  color: var(--red-main);
}

.poem-rank {
  font-family: var(--font-calligraphy);
  font-size: 2.2rem;
  color: var(--red-deep);
  margin-bottom: 4px;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
}

.poem-number {
  font-size: 0.8rem;
  color: var(--wood-light);
  margin-bottom: 16px;
}

.poem-text {
  font-family: var(--font-calligraphy);
  font-size: 1.3rem;
  color: var(--wood-dark);
  line-height: 2.2;
  margin-bottom: 16px;
  white-space: pre-line;
}

.poem-interpretation {
  font-size: 0.85rem;
  color: var(--wood-main);
  line-height: 1.7;
  border-top: 2px solid var(--gold-main);
  padding-top: 14px;
}

/* ============================================
   Result / Fortune Card
   ============================================ */
.fortune-card {
  max-width: 360px;
  margin: 0 auto 24px;
  background:
    linear-gradient(135deg, var(--gold-light) 0%, #F5E6C8 50%, #ECD8A8 100%);
  border: 5px solid var(--gold-main);
  border-radius: 8px;
  padding: 24px;
  box-shadow:
    0 0 40px rgba(218, 165, 32, 0.3),
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 0 0 2px rgba(218, 165, 32, 0.2);
  position: relative;
}

.card-border-ornament {
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  bottom: 6px;
  border: 1px solid rgba(218, 165, 32, 0.4);
  border-radius: 4px;
  pointer-events: none;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--gold-main);
}

.card-temple {
  font-family: var(--font-calligraphy);
  font-size: 1.3rem;
  color: var(--red-deep);
}

.card-rank {
  font-family: var(--font-calligraphy);
  font-size: 1.6rem;
  color: var(--red-main);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.08);
}

.card-poem {
  font-family: var(--font-calligraphy);
  font-size: 1.15rem;
  color: var(--wood-dark);
  line-height: 2.2;
  text-align: center;
  margin-bottom: 16px;
  white-space: pre-line;
}

.card-wish {
  background: rgba(139, 0, 0, 0.08);
  padding: 10px 14px;
  border-radius: 4px;
  margin-bottom: 16px;
  text-align: center;
  border: 1px solid rgba(139, 0, 0, 0.1);
}

.card-wish-label {
  font-size: 0.75rem;
  color: var(--red-deep);
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-calligraphy);
  letter-spacing: 0.1em;
}

.card-wish-text {
  font-size: 0.9rem;
  color: var(--wood-dark);
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--gold-main);
  font-size: 0.75rem;
  color: var(--wood-light);
}

.card-url {
  font-weight: 700;
  color: var(--red-deep);
}

/* Share Actions */
.share-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 30px;
}

.share-btn {
  padding: 10px 24px;
  background:
    linear-gradient(135deg, var(--red-deep), #A00000);
  color: var(--gold-bright);
  border: 2px solid var(--gold-main);
  border-radius: 6px;
  font-family: var(--font-serif);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.share-btn:hover {
  background:
    linear-gradient(135deg, var(--red-main), var(--red-bright));
  box-shadow:
    0 4px 20px rgba(255, 215, 0, 0.2),
    0 0 15px rgba(255, 215, 0, 0.15);
  transform: translateY(-2px);
}

/* ============================================
   Ritual Button (Primary CTA) — Premium
   ============================================ */
.ritual-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 300px;
  margin: 24px auto 0;
  padding: 16px 28px;
  background:
    linear-gradient(145deg,
      var(--red-deep) 0%,
      #B80000 40%,
      var(--red-main) 100%
    );
  color: var(--gold-bright);
  border: 3px solid var(--gold-main);
  border-radius: 8px;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow:
    0 6px 20px rgba(139, 0, 0, 0.5),
    0 0 30px rgba(218, 165, 32, 0.1),
    inset 0 1px 0 rgba(255, 100, 100, 0.2),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  letter-spacing: 0.05em;
}

.btn-glow {
  position: absolute;
  top: -2px;
  left: -10%;
  width: 120%;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.1) 0%, transparent 100%);
  pointer-events: none;
}

.ritual-btn:hover {
  background:
    linear-gradient(145deg,
      var(--red-main) 0%,
      #D00000 40%,
      var(--red-bright) 100%
    );
  box-shadow:
    0 8px 30px rgba(218, 165, 32, 0.3),
    0 0 40px rgba(218, 165, 32, 0.15),
    inset 0 1px 0 rgba(255, 100, 100, 0.3);
  transform: translateY(-2px);
  border-color: var(--gold-bright);
}

.ritual-btn:active {
  transform: translateY(0);
  box-shadow:
    0 2px 10px rgba(139, 0, 0, 0.4),
    inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.ritual-btn.secondary {
  background: transparent;
  border-color: var(--gold-deep);
  color: var(--gold-main);
  font-size: 0.9rem;
  box-shadow: none;
}

.ritual-btn.secondary:hover {
  background: rgba(218, 165, 32, 0.08);
  box-shadow: 0 0 20px rgba(218, 165, 32, 0.1);
}

.btn-icon {
  font-size: 1.3rem;
}

/* ============================================
   Donation Section
   ============================================ */
.donation-section {
  text-align: center;
  padding: 30px 16px;
  border-top: 2px solid rgba(218, 165, 32, 0.15);
  margin-top: 20px;
  position: relative;
}

.donation-section::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(218, 165, 32, 0.3), transparent);
}

.donation-title {
  font-family: var(--font-calligraphy);
  font-size: 1.4rem;
  color: var(--gold-bright);
  margin-bottom: 8px;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
}

.donation-desc {
  font-size: 0.85rem;
  color: var(--gold-light);
  opacity: 0.5;
  margin-bottom: 16px;
}

.donation-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.donation-link {
  padding: 8px 20px;
  background: rgba(218, 165, 32, 0.08);
  border: 1px solid rgba(218, 165, 32, 0.3);
  border-radius: 20px;
  color: var(--gold-main);
  text-decoration: none;
  font-size: 0.85rem;
  transition: all 0.3s ease;
}

.donation-link:hover {
  background: rgba(218, 165, 32, 0.15);
  border-color: var(--gold-bright);
  box-shadow: 0 0 15px rgba(218, 165, 32, 0.15);
  transform: translateY(-1px);
}

/* ============================================
   Footer
   ============================================ */
.temple-footer {
  padding: 30px 16px;
  text-align: center;
  border-top: 3px solid var(--gold-deep);
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(42, 10, 0, 0.6) 40%,
      rgba(30, 5, 0, 0.8) 100%
    );
  position: relative;
}

.temple-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
}

.footer-cta {
  margin-bottom: 24px;
}

.footer-cta p {
  font-size: 0.9rem;
  color: var(--gold-light);
  opacity: 0.6;
  margin-bottom: 12px;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.footer-links a {
  padding: 8px 24px;
  background:
    linear-gradient(135deg, var(--red-deep), #A00000);
  color: var(--gold-bright);
  text-decoration: none;
  border: 2px solid var(--gold-main);
  border-radius: 6px;
  font-weight: 700;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.footer-links a:hover {
  background:
    linear-gradient(135deg, var(--red-main), var(--red-bright));
  box-shadow:
    0 0 20px rgba(255, 215, 0, 0.2),
    0 4px 16px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

.footer-credit {
  font-size: 0.75rem;
  color: var(--gold-deep);
  line-height: 1.8;
}

.footer-credit a {
  color: var(--gold-main);
  text-decoration: none;
}

.footer-year {
  opacity: 0.4;
  margin-top: 4px;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 480px) {
  .offerings-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .plaque-text {
    font-size: 2rem;
    letter-spacing: 0.3em;
  }
  .deity-image {
    width: 180px;
    height: 230px;
  }
  .temple-plaque {
    padding: 10px 32px;
  }
  .roof-dragon-container {
    height: 60px;
  }
  .lantern-row {
    padding: 0 24px;
  }
  .shrine-frame-wrapper {
    width: 260px;
  }
  .step {
    width: 36px;
    height: 36px;
  }
  .step-icon {
    font-size: 0.75rem;
  }
}

@media (min-width: 481px) and (max-width: 640px) {
  .plaque-text {
    font-size: 2.4rem;
  }
}