/* ═══════════════════════════════════════════
   GUIDE & SACRED SPACE — 塔罗入门页 + 神圣空间页
   修改攻略卡片、大小奥秘、四元素卡片、圣坛桌布时改此文件
   ═══════════════════════════════════════════ */

/* ─── 通用页面结构 ─── */
.guide-container { max-width:900px; margin:0 auto; padding:36px 20px 60px; }

.page-header { text-align:center; margin-bottom:44px; }
.page-header h2 {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(1.3rem,4vw,2.1rem);
  color: var(--accent-gold);
  text-shadow: 0 0 26px var(--card-glow);
  margin-bottom: 9px;
}
.page-header p {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size:1rem;
  color: var(--pale-lavender); opacity:.78;
}

/* ─── 攻略卡片网格 ─── */
.guide-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-bottom:32px; }

.guide-card {
  background: linear-gradient(135deg, rgba(26,10,46,.8), rgba(13,13,31,.9));
  border: 1px solid rgba(201,168,76,.18);
  border-radius: 14px; padding:24px 20px;
  position: relative; overflow:hidden;
  transition: transform .3s, box-shadow .3s;
}
.guide-card::before {
  content: ''; position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(to right, transparent, var(--accent-gold), transparent);
  opacity: .5;
}
.guide-card:hover { transform:translateY(-4px); box-shadow:0 13px 36px rgba(100,50,200,.26); border-color:rgba(201,168,76,.36); }
.guide-icon { font-size:2rem; margin-bottom:11px; display:block; }
.guide-card h3 {
  font-family: 'Cinzel Decorative', serif;
  font-size: .86rem; color:var(--accent-gold); margin-bottom:8px; letter-spacing:1px;
}
.guide-card p { font-size:.81rem; line-height:1.82; color:rgba(212,200,232,.78); }

/* ─── 大小奥秘介绍区 ─── */
.card-type-section {
  background: linear-gradient(135deg, rgba(26,10,46,.55), rgba(5,5,8,.78));
  border: 1px solid rgba(201,168,76,.14);
  border-radius: 17px; padding:30px; margin-bottom:30px;
}
.card-type-section h3 {
  font-family: 'Cinzel Decorative', serif;
  color: var(--accent-gold); font-size:1rem; margin-bottom:20px; text-align:center;
}
.arcana-list { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.arcana-item { display:flex; gap:11px; align-items:flex-start; }
.arcana-number {
  background: linear-gradient(135deg, var(--mystic-purple), #3a0a6e);
  border: 1px solid rgba(201,168,76,.38);
  border-radius: 50%; width:36px; height:36px;
  display: flex; align-items:center; justify-content:center; flex-shrink:0;
  font-family: 'Cinzel Decorative', serif; font-size:.58rem; color:var(--accent-gold);
}
.arcana-text h4 { font-size:.83rem; color:var(--light-gold); margin-bottom:3px; }
.arcana-text p  { font-size:.74rem; color:rgba(212,200,232,.68); line-height:1.6; }

/* 牌阵类型徽章 */
.reading-types { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-bottom:34px; }
.reading-type-badge {
  background: linear-gradient(135deg, rgba(45,20,88,.8), rgba(26,10,46,.9));
  border: 1px solid rgba(201,168,76,.26);
  border-radius: 10px; padding:13px 15px; text-align:center; min-width:118px;
  transition: all .3s;
}
.reading-type-badge:hover { border-color:var(--accent-gold); box-shadow:0 0 16px rgba(201,168,76,.16); }
.reading-type-badge .icon { font-size:1.55rem; margin-bottom:5px; }
.reading-type-badge h4    { font-size:.78rem; color:var(--light-gold); margin-bottom:2px; }
.reading-type-badge p     { font-size:.68rem; color:rgba(212,200,232,.68); }

/* ─── 神圣空间页 ─── */
.sacred-section { margin-bottom:36px; }
.sacred-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1rem; color:var(--accent-gold);
  text-align: center; margin-bottom:22px; letter-spacing:2px;
}

/* 环境卡片 */
.env-card {
  background: linear-gradient(135deg, rgba(20,8,40,.9), rgba(10,8,28,.95));
  border: 1px solid rgba(201,168,76,.22);
  border-radius: 18px; padding:28px; margin-bottom:18px;
  position: relative; overflow:hidden;
}
.env-card::after {
  content: ''; position:absolute; inset:0;
  background: radial-gradient(circle at 50% 0%, rgba(201,168,76,.05), transparent 55%);
  pointer-events: none;
}
.env-card h4 { font-family:'Cinzel Decorative',serif; font-size:.88rem; color:var(--accent-gold); margin-bottom:10px; }
.env-card p  { font-size:.82rem; color:rgba(212,200,232,.75); line-height:1.8; }

/* 四元素网格 */
.elements-grid {
  display: grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:18px;
}
@media(min-width:600px) { .elements-grid { grid-template-columns:repeat(4,1fr); } }

.element-card {
  border-radius: 14px; padding:22px 14px; text-align:center;
  position: relative; overflow:hidden;
  transition: transform .35s, box-shadow .35s;
}
.element-card:hover { transform:translateY(-5px); }

/* 火元素 */
.element-card.fire  { background:linear-gradient(160deg,rgba(80,20,5,.85),rgba(30,8,2,.95)); border:1px solid rgba(255,120,40,.35); }
.element-card.fire:hover { box-shadow:0 12px 30px rgba(255,100,20,.25); }
/* 土元素 */
.element-card.earth { background:linear-gradient(160deg,rgba(15,50,25,.85),rgba(6,22,12,.95)); border:1px solid rgba(100,200,120,.3); }
.element-card.earth:hover { box-shadow:0 12px 30px rgba(80,180,100,.2); }
/* 风元素 */
.element-card.wind  { background:linear-gradient(160deg,rgba(20,30,80,.85),rgba(8,12,35,.95)); border:1px solid rgba(100,140,255,.3); }
.element-card.wind:hover  { box-shadow:0 12px 30px rgba(80,120,255,.2); }
/* 水元素 */
.element-card.water { background:linear-gradient(160deg,rgba(5,30,70,.85),rgba(2,12,30,.95)); border:1px solid rgba(60,150,255,.3); }
.element-card.water:hover { box-shadow:0 12px 30px rgba(40,130,255,.2); }

.element-card .el-icon {
  font-size: 2.2rem; margin-bottom:10px;
  filter: drop-shadow(0 0 10px rgba(255,255,255,.3));
  animation: elGlow 3s ease-in-out infinite alternate;
}
.element-card.fire  .el-icon { filter:drop-shadow(0 0 10px rgba(255,120,40,.6)); }
.element-card.earth .el-icon { filter:drop-shadow(0 0 10px rgba(100,200,120,.5)); }
.element-card.wind  .el-icon { filter:drop-shadow(0 0 10px rgba(100,160,255,.5)); }
.element-card.water .el-icon { filter:drop-shadow(0 0 10px rgba(60,160,255,.6)); }

.element-card h4    { font-family:'Cinzel Decorative',serif; font-size:.74rem; margin-bottom:5px; }
.element-card.fire  h4 { color:#ffaa60; }
.element-card.earth h4 { color:#8de8aa; }
.element-card.wind  h4 { color:#90b8ff; }
.element-card.water h4 { color:#60c0ff; }
.element-card p { font-size:.72rem; color:rgba(212,200,232,.65); line-height:1.6; }

/* 圣坛桌布 */
.altar-cloth {
  background: linear-gradient(135deg, rgba(8,4,20,.92), rgba(15,5,30,.96));
  border: 1px solid rgba(201,168,76,.2);
  border-radius: 14px; padding:24px 22px;
  display: flex; align-items:flex-start; gap:18px;
}
.altar-cloth .cloth-icon { font-size:2.5rem; flex-shrink:0; filter:drop-shadow(0 0 12px rgba(201,168,76,.4)); }
.altar-cloth h4 { font-family:'Cinzel Decorative',serif; font-size:.86rem; color:var(--accent-gold); margin-bottom:7px; }
.altar-cloth p  { font-size:.8rem; color:rgba(212,200,232,.72); line-height:1.75; }