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

:root {
  --red: #B94A3E;
  --red-dark: #8C3630;
  --red-light: #D4756A;
  --tan: #A89578;
  --tan-light: #C4B8A4;
  --tan-dark: #7A6B56;
  --cream: #F0E8DA;
  --cream-dark: #E0D4C2;
  --brown: #3A2A1A;
  --brown-light: #5C4A38;
  --brown-mid: #6E5C48;
  --parchment: #F5F0E5;
  --surface: #EAE0D0;
  --gold-stick: #C4A86C;
  --gold-stick-light: #D8C48E;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: "PingFang SC", "Microsoft YaHei", serif;
  background: var(--cream);
  color: var(--brown);
}

#app {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  position: relative;
  z-index: 1;
}

#animCanvas { display: none; }

/* ===== Page transitions ===== */
.page { min-height: 100vh; animation: fadeIn .5s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ===== HOME PAGE ===== */
.home {
  min-height: 100vh;
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-dark) 50%, var(--cream) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24px 40px;
}

.home-header {
  text-align: center;
  padding: 60px 0 12px;
}

.home-header h1 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 8px;
  color: var(--red);
}

.home-header .subtitle {
  font-size: 14px;
  color: var(--tan-dark);
  margin-top: 8px;
  letter-spacing: 4px;
}

.home-divider {
  width: 120px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--tan), transparent);
  margin: 20px 0 32px;
}

.cards { width: 100%; max-width: 400px; }

.card {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
  cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease;
  box-shadow: 0 4px 20px rgba(58,42,26,.15);
  border: 1px solid var(--tan-light);
}

.card:active { transform: scale(.97); }

.card-img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
  filter: brightness(.8) contrast(1.05);
  transition: filter .3s;
}

.card:active .card-img { filter: brightness(.65) contrast(1.05); }

.card-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 40px 20px 20px;
  background: linear-gradient(transparent, rgba(58,42,26,.9));
}

.card-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--parchment);
  letter-spacing: 4px;
  margin-bottom: 6px;
}

.card-desc {
  font-size: 13px;
  color: rgba(245,240,229,.8);
  line-height: 1.6;
}

.card-badge {
  position: absolute;
  top: 16px; right: 16px;
  background: rgba(185,74,62,.85);
  color: #fff;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 2px;
  backdrop-filter: blur(4px);
}

/* ===== SCENE PAGE ===== */
.scene {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  padding-bottom: calc(160px + env(safe-area-inset-bottom, 20px));
}

.scene-bg {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1;
}

.scene-header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  position: relative;
  z-index: 2;
}

.btn-back {
  width: 36px; height: 36px;
  border: 1px solid var(--tan-light);
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  color: var(--parchment);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.scene-title {
  flex: 1;
  text-align: center;
  font-size: 18px;
  color: var(--parchment);
  letter-spacing: 4px;
  margin-right: 36px;
}

.scene-artifact {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

.artifact-img {
  width: 160px;
  height: 200px;
  object-fit: contain;
  border-radius: 12px;
  filter: drop-shadow(0 0 20px rgba(185,74,62,.2));
  animation: artifactFloat 4s ease-in-out infinite;
}

@keyframes artifactFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.scene-intro {
  text-align: center;
  padding: 0 32px 20px;
  font-size: 13px;
  color: rgba(245,240,229,.6);
  line-height: 1.8;
}

/* ===== STICKS (Fortune Sticks) ===== */
.sticks-section {
  padding: 0 24px;
}

.sticks-label {
  text-align: center;
  font-size: 14px;
  color: var(--tan-light);
  letter-spacing: 3px;
  margin-bottom: 16px;
}

.sticks-container {
  display: flex;
  justify-content: center;
  gap: 10px;
  perspective: 600px;
  margin-bottom: 20px;
}

.stick {
  width: 50px;
  height: 180px;
  background: linear-gradient(180deg, #d4a855 0%, #b8892e 50%, #a07428 100%);
  border-radius: 6px 6px 3px 3px;
  cursor: pointer;
  position: relative;
  transition: transform .4s ease, box-shadow .4s ease;
  box-shadow: 2px 4px 12px rgba(58,42,26,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  font-size: 14px;
  color: var(--red-dark);
  font-weight: 600;
  letter-spacing: 6px;
  text-shadow: 0 1px 0 rgba(255,255,255,.2);
  user-select: none;
}

.stick::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 30px;
  background: linear-gradient(180deg, #e8c96a, #d4a855);
  border-radius: 6px 6px 0 0;
}

.stick.glow {
  transform: translateY(-14px) scale(1.04);
  box-shadow: 0 6px 24px rgba(201,168,76,.5);
  background: linear-gradient(180deg, #e8c96a 0%, #d4a855 50%, #c49a3c 100%);
  transition: transform .06s, box-shadow .06s, background .06s;
}

.stick.selected {
  transform: translateY(-24px) scale(1.08);
  box-shadow: 0 8px 30px rgba(185,74,62,.5);
  background: linear-gradient(180deg, #e8c96a 0%, #d4a855 50%, #c49a3c 100%);
}

.stick.shake {
  animation: stickShake .5s ease;
}

@keyframes stickShake {
  0%   { transform: translateY(-24px) scale(1.08) rotate(0deg); }
  15%  { transform: translateY(-28px) scale(1.12) rotate(-3deg); }
  30%  { transform: translateY(-24px) scale(1.08) rotate(3deg); }
  45%  { transform: translateY(-26px) scale(1.10) rotate(-2deg); }
  60%  { transform: translateY(-24px) scale(1.08) rotate(1deg); }
  80%  { transform: translateY(-25px) scale(1.09) rotate(-0.5deg); }
  100% { transform: translateY(-24px) scale(1.08) rotate(0deg); }
}

.stick:active { transform: translateY(-12px) scale(1.02); }

/* ===== Bottom Actions ===== */
.scene-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 24px calc(12px + env(safe-area-inset-bottom, 20px));
  background: linear-gradient(transparent, rgba(30,24,18,.95) 30%);
  z-index: 10;
}

.selected-text {
  text-align: center;
  font-size: 15px;
  color: var(--parchment);
  margin-bottom: 16px;
  min-height: 22px;
  letter-spacing: 2px;
}

.gift-notice {
  text-align: center;
  font-size: 13px;
  color: var(--parchment, #f5f0e5);
  background: linear-gradient(135deg, rgba(185,74,62,.18), rgba(196,168,108,.18));
  border: 1px solid rgba(196,168,108,.4);
  border-radius: 999px;
  padding: 7px 16px;
  margin-bottom: 14px;
  letter-spacing: 1px;
}
.gift-notice strong {
  color: #f3d999;
  font-weight: 600;
}

.btn-bless {
  width: 100%;
  height: 52px;
  border: none;
  border-radius: 26px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 4px;
  cursor: pointer;
  transition: all .3s ease;
}

.btn-bless.primary {
  background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
  color: #fff;
  box-shadow: 0 4px 20px rgba(185,74,62,.4);
}

.btn-bless.primary:disabled {
  opacity: .4;
  box-shadow: none;
  cursor: not-allowed;
}

.btn-bless.primary:not(:disabled):active {
  transform: scale(.97);
  box-shadow: 0 2px 10px rgba(185,74,62,.3);
}

.btn-random {
  width: 100%;
  height: 44px;
  border: 1px solid rgba(245,240,229,.3);
  border-radius: 22px;
  background: transparent;
  color: var(--tan-light);
  font-size: 14px;
  letter-spacing: 3px;
  cursor: pointer;
  margin-top: 12px;
  transition: all .3s ease;
}

.btn-random:active {
  background: rgba(255,255,255,.08);
}

/* ===== Payment Modal ===== */
.modal-mask {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(58,42,26,.75);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn .3s ease;
  backdrop-filter: blur(4px);
}

.modal {
  width: 320px;
  background: linear-gradient(180deg, var(--cream), var(--cream-dark));
  border: 1px solid var(--tan-light);
  border-radius: 20px;
  padding: 32px 24px;
  text-align: center;
  animation: modalIn .4s ease;
}

@keyframes modalIn {
  from { transform: scale(.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.modal h3 {
  font-size: 20px;
  color: var(--brown);
  letter-spacing: 4px;
  margin-bottom: 20px;
}

.modal-blessing {
  font-size: 24px;
  color: var(--red);
  font-weight: 700;
  letter-spacing: 6px;
  margin-bottom: 8px;
}

.modal-scene-name {
  font-size: 13px;
  color: var(--brown-mid);
  margin-bottom: 24px;
}

.modal-price {
  font-size: 40px;
  font-weight: 700;
  color: var(--red);
  margin-bottom: 4px;
}

.modal-price span {
  font-size: 16px;
  font-weight: 400;
}

.modal-price-note {
  font-size: 12px;
  color: var(--tan-dark);
  margin-bottom: 28px;
}

.modal-btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-pay {
  height: 48px;
  border: none;
  border-radius: 24px;
  background: linear-gradient(135deg, #07c160, #05a14a);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 3px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(7,193,96,.3);
  transition: all .3s;
}

.btn-pay:active { transform: scale(.97); }

.btn-cancel {
  height: 40px;
  border: none;
  background: transparent;
  color: var(--tan-dark);
  font-size: 14px;
  cursor: pointer;
  letter-spacing: 2px;
}

/* ===== Video Overlay ===== */
.video-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 200;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-overlay video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-blessing-bar {
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(58,42,26,.6);
  border: 1px solid rgba(196,168,108,.4);
  border-radius: 12px;
  padding: 12px 32px;
  color: var(--parchment);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 6px;
  backdrop-filter: blur(6px);
  white-space: nowrap;
  opacity: 0;
  animation: blessingBarIn 1s ease 2s forwards;
}

@keyframes blessingBarIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.video-skip {
  position: absolute;
  top: 20px; right: 20px;
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 20px;
  padding: 6px 16px;
  color: rgba(255,255,255,.7);
  font-size: 12px;
  cursor: pointer;
  z-index: 201;
  backdrop-filter: blur(4px);
}

.video-skip:active { background: rgba(0,0,0,.6); }

.video-tap-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 14px 28px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: rgba(255,255,255,.95);
  font-size: 16px;
  letter-spacing: 4px;
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(6px);
  z-index: 202;
  pointer-events: none;
}

/* ===== Result Page ===== */
.result {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: linear-gradient(180deg, var(--cream), var(--cream-dark), var(--cream));
  text-align: center;
}

.result-icon {
  width: 80px; height: 80px;
  margin-bottom: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(185,74,62,.15), rgba(185,74,62,.05));
  border: 1px solid rgba(185,74,62,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
}

.result h2 {
  font-size: 20px;
  color: var(--red);
  letter-spacing: 4px;
  margin-bottom: 20px;
}

.result-detail {
  font-size: 15px;
  color: var(--brown);
  line-height: 2;
  margin-bottom: 32px;
}

.result-detail strong {
  color: var(--red);
  letter-spacing: 2px;
}

.result-guide {
  width: 100%;
  max-width: 340px;
  background: rgba(185,74,62,.06);
  border: 1px solid rgba(185,74,62,.2);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 32px;
}

.result-guide h4 {
  font-size: 14px;
  color: var(--red);
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.result-guide p {
  font-size: 13px;
  color: var(--brown-mid);
  line-height: 1.8;
}

.result-btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 300px;
}

.btn-again {
  height: 48px;
  border: 1px solid var(--red);
  border-radius: 24px;
  background: transparent;
  color: var(--red);
  font-size: 15px;
  letter-spacing: 3px;
  cursor: pointer;
  transition: all .3s;
}

.btn-again:active { background: rgba(185,74,62,.08); }

.btn-home {
  height: 40px;
  border: none;
  background: transparent;
  color: var(--tan-dark);
  font-size: 13px;
  cursor: pointer;
  letter-spacing: 2px;
}

/* ===== Reveal Popup ===== */
.reveal-mask {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 300;
  background: rgba(20,15,8,.75);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn .3s ease;
  backdrop-filter: blur(6px);
}

.reveal-mask.dismiss {
  animation: fadeOut .4s ease forwards;
}

@keyframes fadeOut {
  to { opacity: 0; }
}

.reveal-rays {
  position: absolute;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,.25) 0%, transparent 70%);
  animation: raysRotate 4s linear infinite, raysPulse 1.5s ease-in-out infinite;
}

@keyframes raysRotate {
  to { transform: rotate(360deg); }
}

@keyframes raysPulse {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: .6; }
  50% { transform: scale(1.15) rotate(180deg); opacity: 1; }
}

.reveal-card {
  position: relative;
  width: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(135deg, #d4a855 0%, #f0d88a 25%, #c49a3c 50%, #e8c96a 75%, #b8892e 100%);
  background-size: 200% 200%;
  animation: revealIn .5s cubic-bezier(.34,1.56,.64,1), goldShimmer 2s ease infinite;
  border-radius: 16px;
  padding: 32px 20px 20px;
  box-shadow:
    0 0 40px rgba(201,168,76,.6),
    0 0 80px rgba(201,168,76,.3),
    inset 0 1px 0 rgba(255,255,255,.4);
}

@keyframes revealIn {
  from { transform: scale(0) rotate(-10deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes goldShimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.reveal-text {
  font-size: 36px;
  font-weight: 700;
  color: var(--red-dark);
  letter-spacing: 8px;
  text-shadow: 0 1px 0 rgba(255,255,255,.3);
  writing-mode: vertical-rl;
  white-space: nowrap;
}

.reveal-gift {
  margin-top: 16px;
  font-size: 13px;
  color: #6b4f2a;
  background: rgba(243,217,153,.4);
  border: 1px solid rgba(196,168,108,.5);
  border-radius: 999px;
  padding: 6px 14px;
  letter-spacing: 1px;
  writing-mode: horizontal-tb;
}
.reveal-gift strong {
  color: var(--red-dark, #8b3a30);
  font-weight: 700;
}

.reveal-btn {
  margin-top: 20px;
  width: 120px;
  height: 40px;
  border: none;
  border-radius: 20px;
  background: var(--red);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 3px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(185,74,62,.4);
  transition: transform .2s;
  writing-mode: horizontal-tb;
}

.reveal-btn:active { transform: scale(.95); }

.reveal-sparkles {
  position: absolute;
  width: 100%; height: 100%;
  top: 0; left: 0;
  pointer-events: none;
}

.reveal-sparkles i {
  position: absolute;
  width: 6px; height: 6px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 8px 2px rgba(255,230,150,.8);
  animation: sparkle 1.5s ease-in-out infinite;
}

.reveal-sparkles i:nth-child(1) { top: -10px; left: 20%; animation-delay: 0s; }
.reveal-sparkles i:nth-child(2) { top: 10%; right: -8px; animation-delay: .2s; }
.reveal-sparkles i:nth-child(3) { bottom: -10px; left: 40%; animation-delay: .4s; }
.reveal-sparkles i:nth-child(4) { top: 30%; left: -8px; animation-delay: .6s; }
.reveal-sparkles i:nth-child(5) { top: -8px; right: 25%; animation-delay: .15s; }
.reveal-sparkles i:nth-child(6) { bottom: -8px; right: 20%; animation-delay: .35s; }
.reveal-sparkles i:nth-child(7) { top: 60%; right: -10px; animation-delay: .5s; }
.reveal-sparkles i:nth-child(8) { bottom: 20%; left: -10px; animation-delay: .7s; }

@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0); }
  50% { opacity: 1; transform: scale(1.5); }
}

/* ===== Utilities ===== */
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 20px); }