/* ============================================
   塔罗占卜 Web 应用 - 暗黑神秘学 (Mystic Noir)
   ============================================ */

:root {
  /* 主色：深紫 / 藏青天鹅绒 */
  --bg-primary: #0d0b14;
  --bg-secondary: #15121f;
  --bg-tertiary: #1a1628;
  /* 烫金色 */
  --gold: #c9a227;
  --gold-light: #e5c76b;
  --gold-dark: #9a7b1a;
  /* 文字 */
  --text-primary: #f0ebe3;
  --text-secondary: #a89f91;
  --text-muted: #6b635a;
  /* 边框与阴影 */
  --border-gold: rgba(201, 162, 39, 0.4);
  --shadow-deep: 0 4px 24px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 20px rgba(201, 162, 39, 0.15);
}

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

html, body {
  height: 100%;
  overflow-x: hidden;
}

body {
  font-family: 'Source Sans 3', -apple-system, sans-serif;
  background: linear-gradient(135deg, #0d0b14 0%, #15121f 50%, #0f0d18 100%);
  background-attachment: fixed;
  color: var(--text-primary);
  min-height: 100vh;
  position: relative;
}

/* 边缘羽化暗影 */
.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.6) 100%);
  z-index: 100;
}

/* ========== 布局：侧栏 + 舞台（开始占卜后启用） ========== */
.app-layout {
  position: relative;
}

.sidebar-toggle {
  display: none;
}

.sidebar-overlay {
  display: none;
}

.sidebar {
  /* 默认（未开始占卜）：保持页面原本的单列体验 */
  width: 100%;
}

.stage {
  /* 默认：与原本的 .altar 一致，保持单列 */
  width: 100%;
}

body.reading-mode .app-layout {
  display: grid;
  grid-template-columns: 172px 1fr;
  gap: 20px;
  align-items: start;
}

body.reading-mode .sidebar {
  position: sticky;
  top: 1rem;
  /* 建议：背景色调至 40% 透明 */
  background: rgba(21, 18, 31, 0.4); 
  /* 统一毛玻璃效果 */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  
  /* 边框也调至极淡，增加融合感 */
  border: 1px solid rgba(201, 162, 39, 0.15);
  border-radius: 12px;
  padding: 0.8rem;
  box-shadow: var(--shadow-deep);
  /* 👇 新增核心逻辑：限制最大高度，并开启独立滚动 */
  max-height: calc(100vh - 2rem); /* 高度最多占满屏幕，上下留出 1rem 边距 */
  overflow-y: auto;               /* 内容超出版面时，开启垂直滚动 */
  /* 👇 新增：隐藏滚动条（Firefox 和 IE） */
  scrollbar-width: none; 
  -ms-overflow-style: none;
}
/* 👇 新增：隐藏滚动条（Chrome, Safari, Edge 等 Webkit 内核浏览器） */
body.reading-mode .sidebar::-webkit-scrollbar {
  display: none;
}


body.reading-mode .spread-selector {
  margin-bottom: 1.25rem;
}

body.reading-mode .spread-cards {
  display: flex;
  flex-direction: column; /* 👈 核心修复：进入侧边栏后，强制上下垂直排列 */
  align-items: center;
  gap: 12px; /* 侧边栏里卡片上下的间距 */
  justify-content: flex-start;
}

body.reading-mode .spread-card {
  width: 100%;
  
  /* 👇 核心修复：解除主页 240px 的高度锁定，让侧边栏按钮恢复小巧紧凑 */
  height: auto; 
  
  padding: 1rem 0.5rem;

}
body.reading-mode .spread-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(201, 162, 39, 0.4);
  transform: translateX(4px); /* 侧边栏特有的向右微动感 */
}

body.reading-mode .spread-card.active {
  background: rgba(201, 162, 39, 0.08);
  border: 1px solid rgba(201, 162, 39, 0.5); /* 稍微淡化的金边 */
  box-shadow: 0 0 15px rgba(201, 162, 39, 0.1);
}


body.reading-mode .spread-name,
body.reading-mode .spread-desc {
  width: 100%;
  text-align: center;
}

body.reading-mode .spread-thumb {
  display: none;
}

body.reading-mode .controls {
  margin-bottom: 0;
  display: grid;
  gap: 0.75rem;
}

body.reading-mode .btn {
  width: 100%;
}

/* ========== 排版 ========== */
h1, h2, .section-title {
  font-family: 'Playfair Display', Georgia, serif;
}

/* ========== 头部 ========== */
.header {
  text-align: center;
  padding: 2rem 1rem 1rem;
}

.logo {
  font-size: 2rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.2em;
  /*text-shadow: var(--shadow-glow); */
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

.tagline {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
  letter-spacing: 0.3em;
}

/* ========== 主内容区 ========== */
.main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
  min-height: calc(100vh - 180px);
}

/* ========== 牌阵选择 ========== */
.spread-selector {
  margin-bottom: 2rem;
}

.section-title {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text-secondary);
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
  text-align: center;
}

.spread-cards {
  display: flex;
  flex-direction: row;
  /* 👇 优化点3：从 space-around 改为 center，让四张卡片紧凑地在中间组合 */
  justify-content: center; 
  gap: 20px; /* 缩小卡片之间的距离 */
  width: 100%;
  transition: opacity 0.5s ease;
  margin-bottom: 25px;
}

/* ================= 未选中状态 ================= */
.spread-card {
  background: rgba(255, 255, 255, 0.02); 
  backdrop-filter: blur(10px);       
  -webkit-backdrop-filter: blur(10px); 
  border: 1px solid rgba(201, 162, 39, 0.15);
  border-radius: 8px;
  
  /* 👇 调整点 1：增加上下间距，缩小左右间距，让形状偏向竖长形 */
  padding: 1.8rem 0.8rem; 
  
  cursor: pointer;
  text-align: center;
  transition: all 0.3s ease;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  
  /* 👇 核心修改：在这里锁死电脑端的宽度和高度！ */
  width: 150px; 
  height: 240px; 
  flex: 0 0 auto; 
}
/* 👇 针对被“挤掉”的内部图案进行控制，确保它们缩放良好 */
.spread-card .spread-icon {
  /* 稍微缩小图标大小，防止被挤 */
  font-size: 1.8rem; 
  margin-bottom: 0.2rem;
  /* 防止图标本身被压缩 */
  flex-shrink: 0; 
}

/* 👇 对标题和描述文字进行微调 */
.spread-card .spread-name {
  font-size: 1rem;
  letter-spacing: 0.1em;
  font-weight: 600;
  margin: 0;
  flex-shrink: 0;
}

.spread-card .spread-desc {
  font-size: 0.75rem;
  opacity: 0.8;
  margin: 0;
  /* 允许描述文字换行，但不挤压其他元素 */
  max-width: 90%;
}








/* 鼠标悬停时微微加深底色并亮起边框 */
.spread-card:hover {
  background: rgba(255, 255, 255, 0.05); /* 稍微提亮一点点玻璃质感 */
  border-color: rgba(201, 162, 39, 0.4);
  transform: translateY(-2px);
}

/* 选中（Active）时的暗金发光质感 */
.spread-card.active {
  /* 调整这里！将最后的透明度降到 0.05，底色就会非常淡 */
  background: rgba(201, 162, 39, 0.05); 
  
  /* 毛玻璃稍微加重，突出层级 */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  
  /* 用明亮的金边和微弱的发光来强调“选中”，而不是靠死板的底色 */
  border: 1px solid var(--gold);
  box-shadow: 0 0 15px rgba(201, 162, 39, 0.15); /* 减弱了发光阴影 */
}

.spread-thumb {
  width: 48px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.spread-thumb span {
  width: 12px;
  height: 20px;
  background: linear-gradient(180deg, var(--gold-dark), var(--gold));
  border-radius: 2px;
  opacity: 0.8;
}

.spread-thumb.pentagram {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a227' stroke-width='1.5'%3E%3Cpath d='M12 2L14 9L21 9L16 14L18 21L12 17L6 21L8 14L3 9L10 9Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.spread-thumb.more-icon {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='6' cy='12' r='1.7' fill='%23c9a227'/%3E%3Ccircle cx='12' cy='12' r='1.7' fill='%23c9a227'/%3E%3Ccircle cx='18' cy='12' r='1.7' fill='%23c9a227'/%3E%3C/svg%3E") center/contain no-repeat;
}

.spread-name {
  font-weight: 600;
  font-size: 0.95rem;
}

.spread-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ========== 按钮 ========== */
.controls {
  text-align: center;
  margin-bottom: 2rem;
}

.btn {
  padding: 0.75rem 2rem;
  font-size: 1rem;
  font-family: 'Playfair Display', serif;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.1em;
}

.btn-gold {
  background: linear-gradient(180deg, var(--gold-light), var(--gold-dark));
  color: var(--bg-primary);
}

.btn-gold:hover:not(:disabled) {
  box-shadow: 0 0 20px rgba(201, 162, 39, 0.4);
  transform: scale(1.02);
}

.btn-gold:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-outline {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
}

.btn-outline:hover {
  background: rgba(201, 162, 39, 0.1);
}

/* ========== 占卜桌面 ========== */
.altar {
  position: relative;
  min-height: 500px; /* 👈 已统一高度，使其紧凑，参考单张牌展开法 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 1rem 2rem;
}

.reading-positions {
  position: relative;
  z-index: 50;
  pointer-events: none;
  margin: 10px auto; /* 👈 居中对齐，并保持与顶部的距离 */
  
  padding-top: 10px;
  
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  min-height: 220px; 
  width: 100%;
  max-width: 500px;
}


/* ================= 右上角旋转齿轮按钮 ================= */
.settings-control {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2000;
  width: 44px;
  height: 44px;
  background: transparent; /* 去除原来的深色背景 */
  border: none; /* 去除有毛刺的金边光圈 */
  color: #c9a227;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px; /* 去除边框后稍微放大一点齿轮以保持视觉分量 */
  cursor: pointer;
  transition: all 0.3s ease;
  
  /* 修复偏心旋转的核心：微调变换中心点（根据不同字体可能需要微调 50% 52% 等） */
  transform-origin: center 52%; 
  animation: gear-spin 6s linear infinite; /* 稍微放慢一点点，更显神秘从容 */
}

/* 鼠标悬停时：发光，并且【暂停旋转】以便于点击 */
.settings-control:hover {
  background: transparent;
  /* 去除原来的边框发光，改为文字直接发光 */
  text-shadow: 0 0 15px rgba(201, 162, 39, 0.8);
  transform: scale(1.1); /* 悬停微动放大 */
  animation-play-state: paused; 
}

@keyframes gear-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
}

.setting-item:last-child {
  border-bottom: none;
}

.toggle-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-secondary);
  padding: 6px 18px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
}

/* 开关处于“开启”状态时泛金光 */
.toggle-btn.active {
  background: rgba(201, 162, 39, 0.15);
  border-color: var(--gold);
  color: var(--gold);
  text-shadow: 0 0 5px rgba(201, 162, 39, 0.3);
  box-shadow: inset 0 0 10px rgba(201, 162, 39, 0.1);
}




.deck-container {
  position: relative;
  margin-top: 250px;  /* 👈 紧跟抽出的牌，不再偏下 */
  margin-bottom: 40px;
  z-index: 10;
  width: 100%;
  height: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.deck-container.deck-fadeout {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

/* 牌堆卡片统一淡出类：抽满后隐藏剩余牌堆，避免布局缩进 */
.tarot-card.deck-card-drawn,
.tarot-card.deck-card-fadeout {
  opacity: 0;
  pointer-events: none;
}

/* 临时横向排布样式：抽牌时强制水平排列 */
.reading-positions.temp-horizontal {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  grid-template-areas: none !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 15px !important;
  max-width: 800px !important; /* 👈 增加宽度，确保 5 张牌能排成一行 (5*100 + 间隙 > 600) */
  margin: 10px auto !important;
  min-height: 220px !important;
}

.reading-positions.temp-horizontal .reading-slot {
  margin: 0 !important;
  transform: none !important;
  position: relative !important;
  grid-area: auto !important; /* 必须清除 grid-area，否则会被 grid 布局吸附 */
}

/* ========== 塔罗牌 ========== */
.tarot-card {
  position: absolute;
  width: 80px;
  height: 140px;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.reading-positions .tarot-card {
  pointer-events: auto; /* 关键：恢复卡片自身的点击响应 */
}

.tarot-card:hover {
  z-index: 10;
}

/* ================= 极致性能版：修复旧版 iOS 空白/卡顿/翻牌问题 ================= */
.tarot-card .card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  /* 开启 3D 空间 */
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.tarot-card.flipped .card-inner {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}

/* 逆位牌图案直接倒置 */
.tarot-card.reversed .card-front img {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}

.tarot-card .card-face {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  /* 核心：隐藏背面 */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 6px;
  
  /* ⚠️ 核心修复 1：坚决删除了 overflow: hidden，它是导致老版 iOS 出现“空心框”的元凶 */
  /* ⚠️ 核心修复 2：降低了阴影复杂度，提升洗牌和展牌时的帧率 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); 
  border: 1px solid var(--border-gold);

  /* 强制开启硬件加速，使用 0 防止 Z 轴深度混乱 */
  transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
}

.tarot-card .card-back {
  background-image: url('../assets/cards/card_back.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  /* ⚠️ 核心修复 3：增加暗色底色。在旧手机图片加载慢时，显示暗紫色而不是透明窟窿 */
  background-color: #1a1628; 
  display: flex;
  align-items: center;
  justify-content: center;
}

.tarot-card .card-back::before {
  content: '';
  width: 70%;
  height: 85%;
  border: 2px solid var(--gold);
  border-radius: 4px;
  opacity: 0.5;
}

.tarot-card .card-front {
  transform: rotateY(180deg) translate3d(0,0,0);
  -webkit-transform: rotateY(180deg) translate3d(0,0,0);
  background-color: #0f0d18;
}

.tarot-card .card-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* 因为父级去掉了 overflow: hidden，所以图片自身需要加上圆角避免刺出边框 */
  border-radius: 5px; 
}
/* ================= 极致性能版 结束 ================= */

/* 占卜位上的牌 - 稍大 */
.tarot-card.in-reading {
  z-index: 100;       /* 抽出的牌永远在最前面 */
 /* 使用更长的时长和更优雅的曲线 */
 animation: fly-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;

  width: 100px;
  height: 175px;
  position: relative;
  cursor: pointer;
}

.tarot-card.in-reading .card-face {
  border-color: var(--gold);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 12px rgba(201, 162, 39, 0.2);
}

.card-label {
  text-align: center;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--gold);
  font-family: 'Playfair Display', serif;
}

.reading-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.reading-slot .slot-label {
  /* 1. 提高亮度：换成亮米色或直接用 var(--text-primary) */
  color: var(--text-primary); 
  
  /* 2. 核心魔法：增加多层黑投影。这能确保无论背景旋转到金色还是黑色，字都能看清 */
  text-shadow: 
    0 0 10px rgba(0, 0, 0, 1),   /* 柔和黑影 */
    0 1px 3px rgba(0, 0, 0, 1);  /* 实体投影 */
    
  /* 3. 微调排版：稍微加粗并增加字间距，提升精致感 */
  font-size: 0.8rem; 
  font-weight: 500;
  letter-spacing: 0.15em;
  margin-bottom: 0.6rem;
  
  /* 保持之前的动画逻辑 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
}
/* 激活显示时 */
.reading-positions.show-labels .slot-label {
  opacity: 1; /* 稍微给点透明度感，不要太生硬 */
  visibility: visible;
}
/* ========== 弹窗 ========== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  /* 1. 提速：将原来的 0.8s 改为 0.2s，实现干脆利落的“点开即现” */
  transition: opacity 0.1s ease, visibility 0.2s;
}

.modal.open {
  opacity: 1;
  visibility: visible;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  /* 2. 变透：将原来的 0.85 死黑，降低为 0.4 的半透明暗影 */
  /* 这样既能压暗周围突出弹窗，又能清楚地看到背后转动的魔法阵 */
  background: rgba(0, 0, 0, 0.4);
}

/* ================= 全局弹窗通用样式 (极致通透的暗金玻璃) ================= */
.modal-content {
  position: relative;
  /* 1. 降低底色透明度，从 0.3 降到 0.15 左右 */
  background: rgba(21, 18, 31, 0.20) !important; 
  
  /* 2. 降低模糊度，让背后的魔法阵更清晰 */
  backdrop-filter: blur(12px) !important;       
  -webkit-backdrop-filter: blur(12px) !important; 
  
  /* 3. 统一的细金边和内发光 */
  border: 1px solid rgba(201, 162, 39, 0.3) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(201, 162, 39, 0.05) !important;
  
  /* 基础尺寸设置 */
  max-width: 700px;
  width: 90%;
  max-height: 90vh;
  overflow: hidden;
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

/* ================= 针对不同弹窗的微调 ================= */

/* 1. 系统设置弹窗：需要更窄、内部边距更大 */
.settings-content {
  width: 280px !important; 
  padding: 30px 24px !important;
}

/* 2. 塔罗牌详情弹窗：覆盖之前的边框和阴影，避免冲突 */
.modal-card-img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  /* 稍微弱化卡片上的金框，让它融入玻璃背景 */
  border: 1px solid rgba(201, 162, 39, 0.5); 
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.modal.open .modal-content {
  transform: scale(1);
} 

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 2;
  line-height: 1;
  transition: color 0.2s;
}

.modal-close:hover {
  color: var(--gold);
}

.modal-body {
  display: flex;
  gap: 2rem;
  padding: 2rem;
  overflow-y: auto;
  max-height: 80vh;
}

.modal-card {
  flex-shrink: 0;
  width: 180px;
}

.modal-card-img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  border: 2px solid var(--gold);
  box-shadow: var(--shadow-deep);
}

.modal-card-img.reversed {
  transform: rotate(180deg);
}

.modal-interpretation {
  flex: 1;
  min-width: 0;
}

.modal-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  color: var(--gold);
  margin-bottom: 0.25rem;
}

.modal-position {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.interpretation-section {
  margin-bottom: 1.5rem;
}

.interpretation-section h4 {
  font-size: 0.8rem;
  color: var(--gold);
  letter-spacing: 0.1em;
  margin-bottom: 0.6rem;
  font-weight: 500;
}

.interpretation-section p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ========== 动画 ========== */
@keyframes spread-out {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes fly-in {
 /* from {
    transform: translate(var(--tx), var(--ty)) scale(0.5);
    opacity: 0.5;
  }
  to {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  } */
  0% {
    /* 初始：在点击的位置，缩小并透明 */
    transform: translate(var(--tx), var(--ty)) scale(0.6);
    opacity: 0;
  }
  
  50% {
    /* 抛物线顶点：位移一半，但向上（Y轴）额外弹起 180px */
    /* 这里的 -180px 是关键，它形成了“往上跳一下再落下”的半圆感 */
    transform: translate(calc(var(--tx) * 0.5), calc(var(--ty) - 180px)) scale(1.1);
    opacity: 1;
  }

  100% {
    /* 终点：回到占卜位原点 */
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }

}

@keyframes collapse-out {
  to {
    transform: translate(0, 0) scale(0);
    opacity: 0;
  }
}

/* 响应式 */
@media (max-width: 768px) {
  .modal-body {
    flex-direction: column;
    align-items: center;
  }
  
  .modal-card {
    width: 140px;
  }
  
    /* 👇 修复点3：将手机端/窄屏的布局改为 2列网格，不再是粗暴的单列 100% */
  .spread-cards {
    display: grid;
    /* 手机端强制一行显示 2 个 */
    grid-template-columns: repeat(2, 1fr); 
    gap: 12px;
    width: 100%;
    padding: 0 10px;
  }

 .spread-card {
    /* 👇 恢复这里：手机端不需要写死宽高，让它自动贴合网格 */
    width: 100%;  
    height: auto; 
    padding: 1.2rem 0.5rem;
  }

  /* 移动端：开始占卜后，侧栏变抽屉 */
  body.reading-mode .app-layout {
    display: block;
  }

  body.reading-mode .sidebar-toggle {
    display: inline-flex;
    position: fixed;
    left: 1rem;
    top: 1rem;
    z-index: 1200;
    padding: 0.6rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--border-gold);
    background: rgba(13, 11, 20, 0.85);
    color: var(--gold);
    font-family: 'Playfair Display', serif;
    letter-spacing: 0.08em;
    cursor: pointer;
    box-shadow: var(--shadow-deep);
    backdrop-filter: blur(6px);
  }

  body.reading-mode .sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 1100;
  }

  body.reading-mode.sidebar-open .sidebar-overlay {
    opacity: 1;
    visibility: visible;
  }

  body.reading-mode .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: min(86vw, 340px);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 1150;
    overflow: auto;
    border-radius: 0 12px 12px 0;
  }

  body.reading-mode.sidebar-open .sidebar {
    transform: translateX(0);
  }

  body.reading-mode .header {
    padding-top: 4.5rem;
  }
}

/* styles.css */

/* 强制五角星布局生效 */
.reading-positions.spread-five {
  display: grid !important; 
  grid-template-areas: 
      ".    s4    ."
      "s2   s0    s3"
      ".    s1    .";
  grid-template-columns: repeat(3, 100px); /* 👈 固定列宽，防止挤压 */
  grid-template-rows: auto auto auto;
  gap: 50px 30px; 
  justify-content: center;
  align-items: center;
  min-height: 400px;
  margin: 60px auto; /* 增加上下外边距，防止贴顶 */
  max-width: 600px;
}

/* 映射位置 */
.spread-five .slot-0 { grid-area: s0; } /* 现状-中心 */
.spread-five .slot-1 { grid-area: s1; } /* 建议-下 */
.spread-five .slot-2 { grid-area: s2; } /* 过去-左 */
.spread-five .slot-3 { grid-area: s3; } /* 未来-右 */
.spread-five .slot-4 { grid-area: s4; } /* 挑战-上 */

/* 确保占卜位格子有固定宽高，并添加平滑变换动画 */
.reading-slot {
  width: 100px; /* 👈 略微减小宽度，防止 5 张牌在窄屏下挤压 */
  height: 175px;
  position: relative;
  transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1); /* 👈 增加动画时长，让队形变换更优雅 */
}

/* 1. 初始状态：隐藏所有提示字段 */
.slot-label {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease; /* 添加平滑过渡动画 */
}

/* 2. 激活状态：当点击“开始占卜”后显示 */
.reading-positions.show-labels .slot-label {
  opacity: 1;
  visibility: visible;
}

/* ================= 更多牌阵选择界面样式 (更新为统一定制玻璃风格) ================= */
.more-spreads-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  
  /* 1. 撕掉 98% 的黑幕，换成 40% 的薄纱，让魔法阵透出来 */
  background: rgba(0, 0, 0, 0.4); 
  
  z-index: 2000;
  display: none; /* 初始隐藏 */
  justify-content: center;
  align-items: center;
  /* 去掉这里的 blur，把模糊效果交给内部的 content 面板 */
}

.more-spreads-overlay.active { display: flex; }

.more-spreads-content {
  max-width: 900px;
  width: 95%;
  max-height: 85vh;
  margin-bottom: 20px;
  
  /* 2. 统一暗金玻璃底色 (和设置面板完全一致) */
  background: rgba(21, 18, 31, 0.20) !important; 
  
  /* 3. 统一模糊度 */
  backdrop-filter: blur(12px) !important;       
  -webkit-backdrop-filter: blur(12px) !important; 
  
  /* 4. 统一暗金发光边框 */
  border: 1px solid rgba(201, 162, 39, 0.3) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(201, 162, 39, 0.05) !important;
  
  padding: 30px;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.sub-spread-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 核心：强制3列 */
  gap: 25px;
  margin-top: 16px;
  margin-bottom: 20px;
  justify-content: center;
}

/* 移动端适配：手机上变回2列或1列 */
@media (max-width: 768px) {
  .sub-spread-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ================= 更多牌阵卡片：统一毛玻璃与圆角 ================= */
.sub-spread-item {
  /* 换成极淡的白玻璃底色，呼应主页设计 */
  background: rgba(255, 255, 255, 0.02); 
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateZ(0);
  /* 边框调暗，增加 8px 的圆角，去掉直角感 */
  border: 1px solid rgba(201, 162, 39, 0.15);
  border-radius: 8px;
  
  padding: 24px 20px;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  
  /* 使用 flex 让内部文字排版更居中、呼吸感更好 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.sub-spread-item h4 {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
  letter-spacing: 0.05em;
}
.sub-spread-item p {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.sub-spread-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(201, 162, 39, 0.4);
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

/* 选中状态已在之前统一定义过，这里只需补充确保持有圆角 */
.sub-spread-item.selected {
  border-radius: 8px; /* 强制保持圆角 */
  /* 选中时：底色不再是沉闷的暗金，而是带有高光的通透金 */
  background: rgba(201, 162, 39, 0.15); 
  border: 1px solid rgba(201, 162, 39, 0.6); 
  box-shadow: 0 4px 20px rgba(201, 162, 39, 0.2); 
  border-radius: 8px;
  transform: translateY(-2px);
}

/* 找到并修改选中状态 */
.spread-card.active, 
.sub-spread-item.selected {
  /* 背景保持极淡的金色薄雾 */
  background: rgba(201, 162, 39, 0.05); 
  /* 边框：将原来的实色改为 40% 不透明度，厚度保持 1px */
  border: 1px solid rgba(201, 162, 39, 0.4); 
  /* 减弱阴影，让它更内敛 */
  box-shadow: 0 0 12px rgba(201, 162, 39, 0.1); 
}





/* “更多进阶牌阵”右上角操作区 */
.more-spreads-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  /* 👇 缩小顶部 padding，降低黑边的高度 */
  padding: 20px 0 0 0; 
  /* 👇 优化渐变曲线，让黑色别那么快出现 */
  background: none;
  z-index: 10;
  pointer-events: none;
}


.more-spreads-actions .confirm-spread-btn,
.more-spreads-actions .back-home-btn {
  pointer-events: auto;
}

.back-home-btn,
.confirm-spread-btn {
  border-radius: 8px; 
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.confirm-spread-btn {
/* 透明度提至 0.95，变成极具分量的暗金色，彻底不透字 */
  background: rgba(36, 28, 10, 0.95);
  border: 1px solid rgba(201, 162, 39, 0.6);
  color: var(--gold);
  text-shadow: 0 0 5px rgba(201, 162, 39, 0.2);
}
.confirm-spread-btn:not(:disabled):hover {
/* 悬停时提亮底色 */
  background: rgba(56, 44, 15, 0.95);
  border-color: var(--gold);
  box-shadow: 0 0 15px rgba(201, 162, 39, 0.3);
  transform: translateY(-2px);
}

.confirm-spread-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  /* 禁用时变成深灰色，同样不透底 */
  background: rgba(21, 18, 31, 0.95); 
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
}

/* ================= 返回按钮：低调幽灵玻璃风格 ================= */
.back-home-btn {
/* 透明度提至 0.95，变成深沉的灰紫底色 */
  background: rgba(26, 22, 37, 0.95) !important; 
  color: var(--text-primary) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  outline: none;
  box-shadow: none;
}

/* 鼠标悬停时微微变亮 */
.back-home-btn:hover {
  background: rgba(45, 40, 60, 0.95) !important;
  color: var(--text-primary) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.back-home-btn:hover,
.confirm-spread-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.3);
}

.custom-spread-builder {
  margin-top: 18px;
  /* 👇 新增这一行：留出足够的底部空白，让矩阵能完全滚出渐变区 */
  margin-bottom: 80px;
  padding: 18px;
  border: 1px solid rgba(201, 162, 39, 0.25);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
}

.custom-spread-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.custom-spread-tabs {
  display: flex;
  gap: 8px;
}

.custom-tab {
  background: transparent;
  border: 1px solid rgba(201, 162, 39, 0.35);
  color: var(--text-secondary);
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
}

.custom-tab.active {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(201, 162, 39, 0.08);
}

/* ================= 自定义牌阵重命名输入框 ================= */
.custom-tab-edit-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(201, 162, 39, 0.6);
  color: var(--gold);
  font-family: inherit;
  font-size: inherit;
  width: 90px;
  text-align: center;
  outline: none;
  padding: 0;
  margin: 0;
}

/* 选中文字时的背景色 */
.custom-tab-edit-input::selection {
  background: rgba(201, 162, 39, 0.3);
}

.custom-spread-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-secondary);
  font-size: 13px;
}

.custom-clear-btn {
  background: transparent;
  border: 1px solid var(--text-muted);
  color: var(--text-secondary);
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.custom-clear-btn:hover {
  color: var(--gold);
  border-color: var(--gold);
}

.custom-grid {
  display: grid;
  grid-template-columns: repeat(var(--custom-grid-cols, 5), 30px);
  /* 高度拉长到 60px，形成 36x60 的塔罗比例 (约 1:1.67) */
  grid-template-rows: repeat(var(--custom-grid-rows, 5), 50px); 
  gap: 12px;
  justify-content: center;
  padding: 10px;
}

.custom-cell {
  width: 36px;
  height: 60px;
  border-radius: 4px; /* 稍微收一点圆角，更像卡牌 */
  border: 1px solid rgba(201, 162, 39, 0.22);
  background: rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: all 0.2s ease;
  
  /* 新增：使用 Flex 居中数字 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
}

/* ================= 优化 3.2：数字高亮加粗，替换原底色 ================= */
/* 移除原有的 .custom-cell.active 和动画 customGlow */

.custom-cell.numbered-active {
  color: var(--gold);
  font-weight: 700;
  text-shadow: 0 0 10px rgba(201, 162, 39, 0.8), 0 2px 4px rgba(0,0,0,1);
  /* 仅保留极微弱的底色高光和边框提亮 */
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(201, 162, 39, 0.8);
  box-shadow: 0 0 12px rgba(201, 162, 39, 0.2);
}

.custom-cell:active {
  transform: scale(0.92);
}
/* --- 新牌阵的布局定义 --- */

/* 1. 十字型 (3x3布局) */
.reading-positions.spread-cross {
  display: grid;
  grid-template-areas: 
      ".    s1    ."
      "s3   s0    s4"
      ".    s2    .";
  gap: 50px 30px;
}

/* 2. 倒三角形 (3-2-1 阵型) */
.reading-positions.spread-invertedTriangle {
  display: grid;
  grid-template-columns: repeat(6, 50px);
  grid-template-rows: repeat(3, 160px);
  gap: 50px 30px;
  grid-template-areas:
    "s0 s0 s1 s1 s2 s2"
    ".  s3 s3 s4 s4 ."
    ".  .  s5 s5 .  .";
  justify-content: center;
  align-content: center;
  max-width: 600px;
  min-height: 500px;
  margin: 20px auto;
}

/* 映射倒三角形格子 */
.spread-invertedTriangle .slot-0 { grid-area: s0; }
.spread-invertedTriangle .slot-1 { grid-area: s1; }
.spread-invertedTriangle .slot-2 { grid-area: s2; }
.spread-invertedTriangle .slot-3 { grid-area: s3; }
.spread-invertedTriangle .slot-4 { grid-area: s4; }
.spread-invertedTriangle .slot-5 { grid-area: s5; }


/* 3. 正三角形 (1-2-3 阵型) */
.reading-positions.spread-pyramid {
  display: grid;
  grid-template-columns: repeat(6, 50px);
  grid-template-rows: repeat(3, 160px);
  gap: 50px 20px;
  grid-template-areas:
    ".  .  s0 s0 .  ."
    ".  s1 s1 s2 s2 ."
    "s3 s3 s4 s4 s5 s5";
  justify-content: center;
  align-content: center;
  max-width: 600px;
  min-height: 500px;
  margin: 20px auto;
}

/* 映射正三角形格子 */
.spread-pyramid .slot-0 { grid-area: s0; }
.spread-pyramid .slot-1 { grid-area: s1; }
.spread-pyramid .slot-2 { grid-area: s2; }
.spread-pyramid .slot-3 { grid-area: s3; }
.spread-pyramid .slot-4 { grid-area: s4; }
.spread-pyramid .slot-5 { grid-area: s5; }


/* 4. 梯形 (1-2-2 阵型) */
.reading-positions.spread-trapezoid {
  display: grid;
  grid-template-columns: repeat(4, 70px); 
  grid-template-rows: repeat(3, 160px);
  gap: 50px 30px;
  grid-template-areas:
    ".  s0 s0 ."   
    "s1 s1 s2 s2"  
    "s3 s3 s4 s4"; 
  justify-content: center;
  align-content: center;
  max-width: 400px;
  min-height: 500px;
  margin: 20px auto;
}

/* 映射梯形格子 */
.spread-trapezoid .slot-0 { grid-area: s0; }
.spread-trapezoid .slot-1 { grid-area: s1; }
.spread-trapezoid .slot-2 { grid-area: s2; }
.spread-trapezoid .slot-3 { grid-area: s3; }
.spread-trapezoid .slot-4 { grid-area: s4; }

/* 5. 沙漏型 (2-1-2) */
.reading-positions.spread-hourglass {
  display: grid;
  grid-template-columns: repeat(4, 70px);
  grid-template-rows: repeat(3, 160px);
  gap: 50px 30px;
  grid-template-areas:
    "s0 s0 s1 s1"
    ".  s2 s2 ."
    "s3 s3 s4 s4";
  justify-content: center;
  align-content: center;
  max-width: 500px;
  min-height: 500px;
  margin: 20px auto;
}

.spread-hourglass .slot-0 { grid-area: s0; }
.spread-hourglass .slot-1 { grid-area: s1; }
.spread-hourglass .slot-2 { grid-area: s2; }
.spread-hourglass .slot-3 { grid-area: s3; }
.spread-hourglass .slot-4 { grid-area: s4; }

/* 为每个格子分配 Area (以十字型为例) */
.spread-cross .slot-0 { grid-area: s0; }
.spread-cross .slot-1 { grid-area: s1; }
.spread-cross .slot-2 { grid-area: s2; }
.spread-cross .slot-3 { grid-area: s3; }
.spread-cross .slot-4 { grid-area: s4; }

/* 临时横向排布样式：抽牌时强制水平排列 (移到底部以覆盖 Grid) */
.reading-positions.temp-horizontal {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  grid-template-areas: none !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 15px !important;
  max-width: 800px !important; 
  margin: 20px auto !important;
  min-height: 220px !important;
}

.reading-positions.temp-horizontal .reading-slot {
  margin: 0 !important;
  transform: none !important;
  position: relative !important;
  grid-area: auto !important; 
}

.reading-positions.spread-custom {
  display: grid;
  grid-template-columns: repeat(var(--custom-cols, 5), 100px);
  grid-auto-rows: 210px;
  gap: 20px 30px;
  place-content: center;
  max-width: 980px;
  margin: 0 auto;
}

.spread-custom .reading-slot { height: auto; }
.spread-custom .slot-label { margin-bottom: 12px; }
.spread-custom .slot-card-placeholder { margin-top: 0; }



@keyframes fixed-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}


/* 应用到你的背景图类名上 */
.tarot-bg {
    position: fixed;
    top: 50%;
    left: 50%;
    
    /* 核心魔法：使用 CSS 变量和 clamp 函数 */
    /* 意思是：最大永远是 600px，但在屏幕极窄的手机上，它会自适应为屏幕宽度的 90%，防止溢出 */
    --magic-size: clamp(300px, 90vw, 550px); 
    width: var(--magic-size);
    height: var(--magic-size);
    
    /* 强制居中 */
    transform: translate(-50%, -50%);
    
    background-image: url('../assets/cards/background.webp'); 
    /* 将背景图锁死为 100% 撑满这个容器，绝不随意缩放 */
    background-size: 100% 100%; 
    background-repeat: no-repeat;
    background-position: center;
    
    border-radius: 50%;
    overflow: hidden;
    mix-blend-mode: screen; 
    opacity: 0.5;
    z-index: -1;
    pointer-events: none;
    
    animation: fixed-spin 60s linear infinite;

}

/* ================= 左上角返回主页按钮 ================= */
.home-control {
  position: fixed;
  top: 24px;
  left: 20px;
  z-index: 2000;
  background: rgba(21, 18, 31, 0.4);
  border: 1px solid rgba(201, 162, 39, 0.2);
  color: var(--text-secondary);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-family: 'Playfair Display', serif;
  letter-spacing: 0.05em;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* 初始隐藏，带有向右滑出的入场动画效果 */
  opacity: 0;
  visibility: hidden;
  transform: translateX(-15px);
}

/* 仅在进入占卜模式后显示 */
body.reading-mode .home-control {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.home-control:hover {
  background: rgba(201, 162, 39, 0.15);
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 15px rgba(201, 162, 39, 0.2);
}

/* 移动端适配：手机上如果和汉堡菜单冲突，可以稍微下移或居中 */
@media (max-width: 768px) {
    .home-control {
    top: 16px; /* 让返回主页占据最顶端的黄金位置 */
    left: 16px;
    /* 下面这些属性完全照搬菜单按钮，确保它们长得一模一样 */
    padding: 0.6rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--border-gold);
    background: rgba(13, 11, 20, 0.85);
    color: var(--gold);
    font-family: 'Playfair Display', serif;
    font-size: 1rem; /* 统一字体大小 */
    letter-spacing: 0.08em;
    box-shadow: var(--shadow-deep);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  body.reading-mode .sidebar-toggle {
    top: 65px; /* 让侧边栏菜单按钮向下移动，避开返回按钮 */
    left: 16px;
    font-size: 1rem; /* 统一字体大小 */}
    /* 👇 优化 3：移动端牌堆缩小到约 70% */
  .deck-container {
    transform: scale(0.7); /* 整体等比缩小 */
    transform-origin: top center; /* 以顶部为轴收缩，避免底部留太多白 */
    margin-top: 140px; /* 缩小后微调上边距，使其紧凑 */
    margin-bottom: 10px;
  }
}

/* ================= 优化：消除主页底部多余空白 ================= */
/* 在未进入占卜模式（主页状态）时，完全隐藏占卜舞台，彻底切断向下滚动 */
body:not(.reading-mode) .stage {
  display: none;
}



/* ================= 占卜区缩放控制 (图标版) ================= */
.zoom-controls {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: rgba(21, 18, 31, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(201, 162, 39, 0.25);
  border-radius: 20px;
  padding: 14px 8px;
  z-index: 1000;
  
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
}

/* 当占卜最终队形完成后，显示缩放条 */
body.reading-mode.spread-completed .zoom-controls {
  opacity: 1;
  visibility: visible;
}

.zoom-btn {
  background: transparent;
  border: 1px solid rgba(201, 162, 39, 0.3);
  width: 38px; 
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  outline: none;
}

.zoom-icon {
  fill: var(--gold);
  transition: fill 0.2s ease;
}

.zoom-btn:not(:disabled):hover {
  background: rgba(201, 162, 39, 0.15);
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(201, 162, 39, 0.3);
}

.zoom-btn:not(:disabled):hover .zoom-icon {
  fill: #fff; /* 悬停时提亮图标 */
}

/* 禁用状态：变灰、透明度降低 */
.zoom-btn:disabled {
  border-color: rgba(255, 255, 255, 0.1);
  cursor: not-allowed;
  background: transparent !important;
  box-shadow: none !important;
}

.zoom-btn:disabled .zoom-icon {
  fill: rgba(255, 255, 255, 0.2); 
}

.zoom-text {
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-family: 'Playfair Display', serif;
  margin: 6px 0;
  letter-spacing: 0.05em;
}
/* 让牌阵容器支持平滑缩放，并以顶部为锚点 */
.reading-positions {
  transition: transform 0.3s ease;
  transform-origin: top center; 
}


/* ================= 移动端专属悬浮重启按钮 ================= */
.mobile-reset-btn {
  display: none;
}

@media (max-width: 768px) {
  body.reading-mode .mobile-reset-btn {
    display: inline-flex;
    position: fixed;
    top: 65px;
    right: 16px; /* 👈 放在右侧，和左侧的“菜单”按钮完美对称 */
    z-index: 1200;
    padding: 0.6rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--border-gold);
    background: rgba(13, 11, 20, 0.85);
    color: var(--gold);
    font-family: 'Playfair Display', serif;
    letter-spacing: 0.08em;
    cursor: pointer;
    box-shadow: var(--shadow-deep);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  /* 👇 修复 1：将移动端自定义牌阵的底层网格(Grid)缩小，匹配 70px 的小卡片 */
  .reading-positions.spread-custom {
    /* 列宽从 100px 缩小到 70px */
    grid-template-columns: repeat(var(--custom-cols, 5), 70px) !important;
    /* 行高从 210px 缩小到 150px (容纳122px的牌 + 标签文字) */
    grid-auto-rows: 150px !important; 
    /* 缩小卡片之间的上下左右间距 */
    gap: 15px 15px !important; 
  }
  /* 👇 优化 3：把抽出的牌和底座格子也相应缩小到约 70% (从 100px 缩小到 70px) */
  .tarot-card.in-reading {
    width: 70px !important;
    height: 122px !important;
  }
  .reading-slot {
    width: 70px !important;
    height: 122px !important;
  }

  /* 👇 修复 1 (竖屏)：调整弹窗内间距，进一步缩小卡片给文字留空间 */
  .modal-body {
    padding: 1.5rem;
    gap: 1rem;
  }
  .modal-card {
    width: 110px; 
  }
  .interpretation-section {
    margin-bottom: 0.8rem;
  }
}

/* 👇 修复 1 (横屏核心)：当手机横向时，高度极小，强制改为左右排布！ */
@media (max-height: 500px) and (orientation: landscape) {
  /* 1. 恢复完美居中（去掉 flex-end 和 right-padding） */
  .modal {
    justify-content: center !important; 
    padding-right: 0 !important;        
  }

  /* 2. 保持之前调好的精致卡片尺寸 */
  .modal-content {
    width: 100% !important;
    max-width: 420px !important; 
    margin-left: 0 !important;   
  }

  /* 3. 内部排版紧凑化 */
  .modal-body {
    flex-direction: row !important; 
    align-items: flex-start !important;
    gap: 1.2rem !important;      
    padding: 1.2rem !important;  
  }
  
  .modal-card {
    width: 115px !important;     
    flex-shrink: 0;
  }
  
  .interpretation-section {
    margin-bottom: 0.6rem !important; 
  }

  .interpretation-section p {
    font-size: 0.85rem;
    line-height: 1.4;
  }
}