/* styles.css - basic styling for prototype */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
  /* 多层背景组合 */
  background: 
    /* 半透明紫色覆盖层 */
    linear-gradient(rgba(147, 51, 234, 0.03), rgba(147, 51, 234, 0.03)),
    /* 大尺寸六芒星图案 */
    url("data:image/svg+xml,%3Csvg width='300' height='300' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z' fill='none' stroke='%239333ea' stroke-width='0.5' opacity='0.2'/%3E%3C/svg%3E") center/cover,
    /* 十字网格图案 */
    repeating-linear-gradient(45deg, rgba(147, 51, 234, 0.08) 0px, rgba(147, 51, 234, 0.08) 1px, transparent 1px, transparent 10px),
    repeating-linear-gradient(135deg, rgba(147, 51, 234, 0.08) 0px, rgba(147, 51, 234, 0.08) 1px, transparent 1px, transparent 10px),
    /* 基础紫色渐变 */
    linear-gradient(135deg, #fdf6ff 0%, #f8efff 100%);
  background-attachment: fixed;
  color: #333;
}
.header { background: #fff; border-bottom: 1px solid #eee; }
.header-container { max-width: 1100px; margin: 0 auto; padding: 14px 20px; }
.header-content { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-title { font-size: 18px; background: linear-gradient(135deg, #6a1b9a, #4a148c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.nav-menu { list-style: none; display: flex; gap: 12px; }
.nav-link { color: #444; text-decoration: none; padding: 8px 12px; border-radius: 8px; }
.nav-link:hover { background: rgba(106,27,154,0.08); color: #6a1b9a; }
#main-content { max-width: 1100px; margin: 40px auto; padding: 0 20px; } /* 增加顶部外边距避免遮挡 */
#hero { padding: 40px 0; text-align: center; }
#hero h1 { font-size: 36px; background: linear-gradient(135deg, #d8b4fe, #c4b5fd); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.05; }
/* 深紫色标题样式，接近logo颜色 */
#page-home #hero h1,
#page-tarot #hero h1,
#page-community #hero h1,
#page-market #hero h1,
#page-diviners #hero h1,
#page-home .features .feature-card h3 {
  background: linear-gradient(135deg, #6a1b9a, #4a148c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 恢复header为原来的白色背景 */
.header {
  background: #fff;
  border-bottom: 1px solid #eee;
}

/* 恢复导航链接文字颜色 */
.nav-link {
  color: #444;
}

/* 恢复悬停效果 */
.nav-link:hover {
  background: rgba(106,27,154,0.08);
  color: #6a1b9a;
}

/* 恢复品牌标题样式 */
.brand-title {
  font-size: 18px;
  background: linear-gradient(135deg, #6a1b9a, #4a148c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
#hero p { margin-top: 12px; color: #555; }
.grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 24px; }
.fruit { background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 8px 20px rgba(0,0,0,0.08); text-align: center; }
.fruit img { width: 100%; height: 160px; object-fit: cover; border-radius: 8px; }
#footer { text-align: center; padding: 28px 0; color: #666; background: #fdfaff; margin-top: 40px; }

/* Tarot page */
.tarot-board { display:flex; gap: 20px; justify-content:center; align-items:flex-start; margin-top: 28px; }
.card { width: 160px; height: 240px; background: linear-gradient(180deg,#ffffff,#f5f0ff); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); display:flex; align-items:center; justify-content:center; font-weight:700; color:#6a1b9a; cursor:pointer; }
.card.back { background-image: linear-gradient(135deg,#f0e6ff,#e6ccff); color: #311b92; }
.card.revealed { background: #fffdfa; transform: rotate(0deg); }
.card.placeholder { pointer-events: none; cursor: default; opacity: 0.98; }
/* placeholder fade/scale when a flying card is incoming */
.card.placeholder{ transition: transform 300ms ease, opacity 300ms ease; }
.card.placeholder.fading{ opacity: 0.45; transform: scale(0.94) translateY(-6px); }
.controls { text-align:center; margin-top: 8px; }
.button { background: linear-gradient(135deg, #6a1b9a, #4a148c); color: #fff; border: none; padding: 10px 14px; border-radius: 8px; cursor:pointer; }
.button.secondary { background: #fff; color: #6a1b9a; border: 1px solid rgba(106,27,154,0.2); }
/* disabled button style */
.button:disabled { opacity: 0.5; cursor: not-allowed; }
.button.small { padding: 8px 10px; font-size: 14px; border-radius: 8px; }

/* reading-type buttons container */
.reading-types { margin-top: 12px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* New Tarot deck and animation styles */
.tarot-stage { min-height: 340px; display:flex; align-items:center; justify-content:center; }
.slots { display:flex; gap: 26px; align-items:center; justify-content:center; }
.slot { width:160px; height:260px; display:flex; align-items:center; justify-content:center; }
.deck-container { position: fixed; left: 0; right:0; bottom: 24px; display:flex; align-items:center; justify-content:center; pointer-events: none; }
.deck { width:160px; height:260px; position:relative; pointer-events: none; }
.deck { cursor: default; }
.deck .card-back, .deck .card-front { position:absolute; left:0; right:0; margin:0 auto; width:100%; height:100%; border-radius:12px; background-image: linear-gradient(135deg,#f8f0ff,#ede0ff); box-shadow: 0 12px 32px rgba(0,0,0,0.14); transform-origin:center; }

/* front visible cards (separated) */
.deck .fronts { position: absolute; left: -46px; top: 0; width: 340px; height:100%; pointer-events: none; }
.deck .fronts .card-front { left: auto; position: absolute; width:140px; height:210px; border-radius:10px; box-shadow: 0 12px 30px rgba(0,0,0,0.12); background-image: url('public/images/4.webp'); background-size: cover; background-position: center; }
.deck .fronts .f0 { transform: translateX(-150px) rotate(-12deg); z-index: 10; }
.deck .fronts .f1 { transform: translateX(-100px) rotate(-7deg); z-index: 9; }
.deck .fronts .f2 { transform: translateX(-50px) rotate(-3deg); z-index: 8; }
.deck .fronts .f3 { transform: translateX(-10px) rotate(-1deg); z-index: 7; }
.deck .fronts .f4 { transform: translateX(30px) rotate(0deg); z-index: 6; }

/* stacked pile behind: show multiple thin offsets, last one on top */
.deck .stack { position:absolute; left:14px; top:18px; width:100%; height:100%; pointer-events:none; }
.deck .stack .card-back { left:0; top:0; position:absolute; width:100%; height:100%; border-radius:12px; }
.deck .stack .s0{ transform: translateY(-6px) rotate(0deg); z-index:1; }
.deck .stack .s1{ transform: translateY(-12px) rotate(0.2deg); z-index:2; }
.deck .stack .s2{ transform: translateY(-18px) rotate(0.4deg); z-index:3; }
.deck .stack .s3{ transform: translateY(-24px) rotate(0.6deg); z-index:4; }
.deck .card-back::after{ content: ''; position:absolute; inset:12px; border-radius:8px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0)); }
.deck:hover .card-back{ transform: translateY(calc(var(--i) * -16px)) rotate(calc(var(--i) * 2deg)); }

.card-back.flying{ will-change: transform; }
.card.revealed.flip{ backface-visibility:hidden; transform-style:preserve-3d; }

/* Make revealed card flip effect nicer */
.card.revealed{ transform-origin: center; perspective: 1000px; }

/* animation fallback: consistent flip-in for revealed cards */
.flip-in{ transform-origin: center; backface-visibility: hidden; transform-style: preserve-3d; animation: flipIn 420ms ease forwards; }
@keyframes flipIn{
  0% { transform: rotateY(90deg); }
  60% { transform: rotateY(-10deg); }
  100% { transform: rotateY(0deg); }
}

/* ensure deck sits above footer without overlapping important UI on small screens */
@media (max-height:640px){ .deck-container{ bottom:56px; } }

/* ensure controls are not overlapped by decorative deck */
/* Reduced bottom margin so decorative deck sits closer to the controls for better visual balance */
.tarot-board-section .controls { margin-bottom: 28px; }

/* decorative deck row (five face-down cards) placed above controls, non-interactive */
.deck-row { display:flex; gap:18px; align-items:center; justify-content:center; margin:10px 0 0 0; pointer-events: none; }

/* Reading-type buttons: small framed buttons (white background, subtle orange border), black text */
.reading-types .button.small {
  background: #f3e5f5; /* 浅紫色背景 */
  color: #6a1b9a;
  border: 1px solid #e1bee7; /* 浅紫色边框 */
  box-shadow: none;
  padding: 6px 8px;
  border-radius: 8px;
}
.reading-types .button.small:hover{ background: #e1bee7; /* 更深一点的紫色悬停效果 */ }
.deck-row .deck-card { width:140px; height:210px; border-radius:10px; box-shadow: 0 10px 26px rgba(0,0,0,0.12); background-image: url('public/images/4.webp'); background-size: cover; background-position: center; transform: none; position: relative; }
.deck-row .deck-card.back { background-image: url('public/images/4.webp'); background-size: cover; background-position: center; }
.deck-row .d0{ transform: translateY(0px) rotate(-6deg); }
.deck-row .d1{ transform: translateY(-4px) rotate(-3deg); }
.deck-row .d2{ transform: translateY(-8px) rotate(0deg); }
.deck-row .d3{ transform: translateY(-4px) rotate(3deg); }
.deck-row .d4{ transform: translateY(0px) rotate(6deg); }

/* make the last card appear as if it's stacked on top of more cards */
.deck-row .d4::before,
.deck-row .d4::after{
  content: '';
  position: absolute;
  left: 10px;
  top: -6px;
  width: 96%;
  height: 96%;
  border-radius:10px;
  background-image: url('public/images/4.webp');
  background-size: cover;
  background-position: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  z-index: -1;
  transform-origin: center;
  opacity: 0.95;
}
.deck-row .d4{
  transform: translateY(0px) rotate(6deg);
}
.deck-row .d4::before,
.deck-row .d4::after{
  /* align bottoms so stack doesn't protrude; lift pseudo-layers slightly to show thickness */
  bottom: 0;
  left: 6px;
  width: 92%;
  height: 92%;
  transform-origin: center;
  z-index: -1;
  opacity: 0.98;
}
.deck-row .d4::before{ transform: translateY(-6px) scale(0.995) rotate(0.5deg); z-index:-2; }
.deck-row .d4::after{ transform: translateY(-12px) scale(0.99) rotate(1deg); z-index:-3; left:10px; opacity:0.96; }

/* Love reading view: three small card thumbnails with per-card meaning and a combined summary */
.love-view { display:flex; flex-direction:column; gap:14px; align-items:center; justify-content:center; max-width:780px; margin: 0 auto; }
.love-view .cards-row { display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center; }
.love-view .love-card { width:460px; display:flex; flex-direction:row; gap:12px; align-items:flex-start; text-align:left; padding:6px 8px; border-radius:6px; }
.love-view .love-card .thumb { width:56px; height:84px; border-radius:6px; background-image: url('public/images/4.webp'); background-size: cover; background-position: center; border: 1px solid rgba(0,0,0,0.06); flex:0 0 auto; }
.love-view .love-card .meaning { font-size: 13px; color:#444; background: transparent; padding:0; border-radius:0; box-shadow: none; border: none; line-height:1.3; }
.love-view .combined-meaning { max-width:780px; color:#333; background:#fff; padding:12px 14px; border-radius:8px; box-shadow: 0 8px 24px rgba(0,0,0,0.06); }

@media (max-width:700px){
  .love-view { max-width:100%; padding: 0 18px; }
  .love-view .cards-row { flex-direction: column; }
  /* on small screens stack thumb above meaning */
  .love-view .love-card { width:100%; max-width:420px; flex-direction:column; align-items:center; }
  .love-view .love-card .thumb { width:120px; height:180px; }
  .love-view .love-card .meaning { text-align:center; }
}
/* revealed card face */
.card .card-face { width:100%; height:100%; border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:700; color:#311b92; background: linear-gradient(180deg,#fffefe,#fcf8ff); box-shadow: inset 0 6px 12px rgba(0,0,0,0.03); }
.card.revealed .card-face { transition: transform 420ms ease; backface-visibility: hidden; }

/* note section style (moved from inline) */
.note-section{ margin-top:28px; text-align:center; color:#666; }


/* Responsive */
@media (max-width:700px){
  .card { width:110px; height:170px; }
  #hero h1 { font-size: 24px; }
  .header-content { padding: 6px 0; }
}

/* Homepage hero and features */
.hero { background: linear-gradient(90deg,#f9f5ff,#f0e7ff); padding: 64px 0 48px; } /* 增加顶部内边距解决遮挡问题 */
.hero-inner { max-width:1100px; margin:0 auto; text-align:center; padding:0 20px; }
.hero { display:flex; align-items:center; }
.hero-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.hero-copy { flex:1; text-align:left; }
.hero h1 { font-size:48px; background: linear-gradient(135deg, #6a1b9a, #311b92); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom:32px; line-height:1.3; padding: 8px 0; text-rendering: optimizeLegibility; font-weight:800; }
.hero-media { flex:0 0 360px; }
.hero-media img { width:100%; height: auto; border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,0.08); }
.hero .lead { color:#555; max-width:820px; margin:0 auto; line-height:1.7; font-size:16px; }
.hero-cta { margin-top:18px; display:flex; gap:12px; justify-content:center; }
.cta-button { background: linear-gradient(135deg, #6a1b9a, #4a148c); color:#fff; padding:10px 16px; border-radius:10px; text-decoration:none; display:inline-block; }
.cta-button.secondary { background:#fff; color:#6a1b9a; border:1px solid rgba(106,27,154,0.12); }

.features { max-width:1100px; margin:28px auto; display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:18px; padding:0 20px; }
.feature-card { background:#fff; padding:18px; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,0.08); text-align:left; }
.feature-card h3 { background: linear-gradient(135deg, #d8b4fe, #c4b5fd); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom:6px; }
.feature-card p { color:#666; margin-bottom:12px; }
.cta-button.small { padding:8px 10px; font-size:14px; }

.search-topten { max-width:1100px; margin:24px auto; display:flex; gap:20px; padding:0 20px; align-items:flex-start; }
.search-box { flex:1; }
.search-box label { display:block; color:#666; margin-bottom:6px; }
.search-box input { width:100%; padding:10px 12px; border-radius:8px; border:1px solid #eee; }
.top-ten { width:320px; background:#fff; padding:12px; border-radius:10px; box-shadow:0 8px 20px rgba(0,0,0,0.08); }
.top-ten h4 { margin-bottom:8px; color:#333; }
.top-ten ol { padding-left:20px; color:#666; }

/* small utility */
.lead small { color:#999; }

/* Footer */
.footer-inner { max-width:1100px; margin:0 auto; padding:28px 20px; color:#b0b0b0; }

@media (max-width:900px){
  .hero-inner { flex-direction:column; text-align:center; }
  .hero-copy { text-align:center; }
  .top-ten { display:none; }
}

/* Marketplace area */
.marketplace-area { max-width:1100px; margin:24px auto; padding:0 20px; }
.marketplace-inner h2 { color:#333; margin-bottom:6px; }
.marketplace-inner p { color:#666; margin-bottom:12px; }
.marketplace-list { min-height:80px; margin-bottom:12px; }

@media (max-width:900px){
  .top-ten { width:100%; }
}

  /* Search with actions */
  .search-row { display:flex; gap:12px; align-items:center; }
  .search-row input { flex:1; padding:10px 12px; border-radius:8px; border:1px solid #eee; }

  /* Top10 photo area (above footer) */
  .top10-photo { max-width:1100px; margin:28px auto; display:flex; gap:20px; align-items:flex-start; padding:0 20px; }
  .top10-list { flex:1; background:#fff; padding:12px; border-radius:10px; box-shadow:0 8px 20px rgba(0,0,0,0.08); }
  .top10-photo img { width:320px; height:auto; border-radius:10px; object-fit:cover; box-shadow:0 8px 20px rgba(0,0,0,0.06); }
.top10-list ol { padding-left:28px; } /* 增加左边距以确保数字1-10完全显示 */

  @media (max-width:900px){
    .top10-photo { flex-direction:column; }
  }
  .top10-list ol li.matched { background: linear-gradient(90deg,#e8e0ff,#e1d5ff); border-radius:6px; padding:6px; }