/* ===== AI 塔罗 · 移动优先 ===== */
/* 关键修复：任何带 hidden 的元素必须隐藏，不被 display 样式覆盖 */
[hidden] { display: none !important; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 80% 8%, #ffe9c4 0%, #ffe9c4 3%, rgba(255,233,196,.25) 7%, transparent 12%),   /* 月亮本体 */
    radial-gradient(circle at 80% 8%, rgba(245,179,1,.28), transparent 20%),                              /* 月光晕 */
    radial-gradient(circle at 80% 8%, rgba(245,179,1,.12), transparent 30%),
    radial-gradient(ellipse at 15% 8%, rgba(109,74,255,.34), transparent 50%),
    radial-gradient(ellipse at 85% 25%, rgba(109,74,255,.2), transparent 42%),
    radial-gradient(ellipse at 55% 95%, rgba(109,74,255,.28), transparent 50%),
    linear-gradient(160deg, #170f2c 0%, #2a1a4a 45%, #120d1c 100%);
  min-height: 100vh;
  color: #e8e2f5;
  position: relative;
}
/* 星空：更大更密的星星，顶部月亮周围也点缀 */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(3px 3px at 5% 14%, #fff, transparent),
    radial-gradient(2px 2px at 10% 6%, #fff, transparent),
    radial-gradient(2.5px 2.5px at 20% 55%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 28% 20%, #fff, transparent),
    radial-gradient(3px 3px at 42% 8%, #fff, transparent),
    radial-gradient(2px 2px at 52% 38%, #fff, transparent),
    radial-gradient(2.5px 2.5px at 62% 12%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 70% 55%, #fff, transparent),
    radial-gradient(3px 3px at 85% 30%, #fff, transparent),
    radial-gradient(2px 2px at 92% 60%, #fff, transparent),
    radial-gradient(2.5px 2.5px at 36% 75%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 14% 82%, #fff, transparent),
    radial-gradient(2.5px 2.5px at 78% 86%, #fff, transparent),
    radial-gradient(2px 2px at 50% 92%, #fff, transparent),
    radial-gradient(2px 2px at 90% 14%, #fff, transparent);
  animation: twinkle 5s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: 0.35; } to { opacity: 0.9; } }
#app { position: relative; z-index: 1; }

#app { max-width: 640px; margin: 0 auto; padding: 16px; }

.view { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }

/* ---- 卡片 ---- */
.card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 16px;
  backdrop-filter: blur(4px);
}

/* ---- 品牌 ---- */
.brand { text-align: center; margin-bottom: 20px; }
.brand .logo { font-size: 48px; }
.brand h1 { font-size: 26px; margin: 6px 0 2px; }
.subtitle { color: #a99cc9; font-size: 14px; }
.brand.small { display: flex; align-items: center; gap: 8px; margin: 0; }
.brand.small .logo { font-size: 24px; }

/* ---- Tab ---- */
.tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.tab {
  flex: 1; padding: 10px; border: none; border-radius: 10px;
  background: rgba(255,255,255,0.06); color: #b7aad6; font-size: 15px; cursor: pointer;
}
.tab.active { background: #6d4aff; color: #fff; }

/* ---- 表单 ---- */
.form { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; gap: 8px; }
.row input { flex: 1; }
input, textarea {
  width: 100%; padding: 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08); color: #fff; font-size: 15px; outline: none;
}
input:focus, textarea:focus { border-color: #8a6fff; }
textarea { resize: vertical; font-family: inherit; }
.hint { color: #8d7fb0; font-size: 12px; margin: -4px 0 0; }

button {
  border: none; border-radius: 10px; padding: 12px 16px; font-size: 15px; cursor: pointer;
  background: #6d4aff; color: #fff; transition: opacity .15s;
}
button:hover { opacity: .88; }
button:disabled { opacity: .5; cursor: not-allowed; }
button.primary.big { font-size: 17px; padding: 14px; }
button.small { padding: 10px 14px; font-size: 13px; }
button.ghost { background: transparent; border: 1px solid rgba(255,255,255,0.25); }
.divider { text-align: center; color: #8d7fb0; font-size: 12px; margin: 14px 0; position: relative; }
.divider span { background: #1f1438; padding: 0 12px; }
.divider::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255,255,255,0.12); z-index: -1; }

/* ---- 消息 ---- */
.msg { margin-top: 12px; font-size: 14px; min-height: 18px; }
.msg.error { color: #ff8a80; }
.msg.ok { color: #a5d6a7; }
.msg.loading { color: #b7aad6; }

/* ---- 顶栏 ---- */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0 16px;
}
.userbox { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #c9bce8; }

/* ---- 牌阵 ---- */
.spread-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.spread-item {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; padding: 12px; cursor: pointer;
}
.spread-item .name { font-weight: 600; font-size: 15px; }
.spread-item .desc { color: #9b8dbf; font-size: 12px; margin-top: 4px; }
.spread-item .pos { color: #6d4aff; font-size: 12px; margin-top: 6px; }
.spread-item .badge { font-size: 11px; padding: 2px 8px; border-radius: 8px; margin-left: 6px; }
.badge.free { background: #264a30; color: #a5d6a7; }
.badge.paid { background: #4a3a26; color: #ffd54f; }
.spread-item.selected { border-color: #8a6fff; background: rgba(109,74,255,0.15); }

/* ---- 结果区 ---- */
.section-title { margin: 8px 0 12px; font-size: 18px; }
.flip-hint { text-align: center; color: #c9bce8; font-size: 14px; margin-bottom: 12px; }

/* ---- 翻牌 ---- */
.flip-scene { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 8px 0 16px; }
.flip-card { width: 118px; height: 176px; perspective: 900px; cursor: pointer; }
.flip-inner {
  position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transition: transform .55s ease;
}
.flip-card.flipped .flip-inner { transform: rotateY(180deg); }
.flip-face {
  position: absolute; inset: 0; backface-visibility: hidden; border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 10px; text-align: center; overflow: hidden;
}
.flip-back {
  background: linear-gradient(135deg, #6d4aff, #241642);
  border: 2px solid rgba(255,255,255,.35);
  box-shadow: 0 4px 18px rgba(0,0,0,.4);
}
.flip-back .pattern { font-size: 40px; }
.flip-back .poslabel { color: #d7ccff; font-size: 13px; margin-top: 8px; }
.flip-front {
  background: linear-gradient(160deg, #332658, #201736);
  border: 2px solid #8a6fff; transform: rotateY(180deg);
  overflow: hidden;
}
.flip-front .card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.flip-front { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.flip-front .name { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.flip-front .orient { font-size: 13px; margin-bottom: 6px; }
.flip-front .kw { color: #b7aad6; font-size: 11px; line-height: 1.5; }
.flip-back .cardback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.flip-back .poslabel { position: relative; z-index: 1; background: rgba(0,0,0,.55); border-radius: 8px; padding: 3px 10px; }
.orient.upright { color: #a5d6a7; }
.orient.reversed { color: #ff8a80; }

.reading-text { line-height: 1.7; font-size: 15px; }
.reading-text h3 { color: #c3b5ff; font-size: 16px; margin: 14px 0 6px; }
.reading-text h4 { color: #d7ccff; font-size: 15px; margin: 10px 0 4px; }
.reading-text strong { color: #e8e2f5; }

.again-wrap { text-align: center; margin-top: 14px; }
.again-wrap button { padding: 12px 32px; }

/* ---- 选择占卜类型 ---- */
.pick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.pick-item {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px; padding: 18px; text-align: center; cursor: pointer; transition: border-color .15s;
}
.pick-item:hover { border-color: #8a6fff; }
.pick-icon { font-size: 40px; }
.pick-name { font-size: 18px; font-weight: 700; margin: 8px 0 4px; }
.pick-desc { color: #9b8dbf; font-size: 12px; line-height: 1.5; }

/* ---- 公告横幅 ---- */
.notice { border-color: #8a6fff; background: rgba(109,74,255,0.12); font-size: 14px; line-height: 1.6; }
.notice strong { color: #c3b5ff; }

/* ---- 返回按钮 ---- */
.back-btn { margin-bottom: 12px; }

/* ---- 我的记录 ---- */
.record-item { cursor: pointer; }
.record-item .record-body { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.1); }
.record-item .record-toggle { margin-top: 10px; }

/* ---- 星座运势 ---- */
.zodiac-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.zodiac-item { padding: 11px 4px; background: rgba(255,255,255,0.07); border-radius: 10px; text-align: center; cursor: pointer; font-size: 14px; }
.zodiac-item:hover { border-color: #8a6fff; }

/* ---- 塔罗图鉴 ---- */
.guide-link { margin-top: 12px; text-align: center; }
.guide-link a { color: #c3b5ff; font-size: 13px; cursor: pointer; text-decoration: underline; }
.guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.guide-item { padding: 10px; background: rgba(255,255,255,0.06); border-radius: 10px; cursor: pointer; }
.guide-item .guide-en { color: #9b8dbf; font-size: 11px; }
.guide-mean-wrap { margin-top: 6px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 6px; }
.guide-mean { font-size: 12px; color: #c9bce8; margin-top: 4px; text-align: left; line-height: 1.5; }
.guide-mean.rev { color: #9b8dbf; }

/* ---- 趣味测试 ---- */
.quiz-item { cursor: pointer; }
.quiz-q { margin-bottom: 18px; }
.quiz-qtext { margin-bottom: 8px; font-size: 15px; line-height: 1.5; }
.quiz-opt { display: block; width: 100%; text-align: left; margin-bottom: 6px; font-size: 14px; }
.quiz-opt.selected { border-color: #8a6fff; background: rgba(109,74,255,0.2); }
.quiz-result { text-align: center; padding: 10px 0; }
.quiz-result .quiz-type { font-size: 20px; margin-bottom: 10px; }
.quiz-result .quiz-type strong { color: #f5b301; }

/* ---- 分享弹窗 ---- */
.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal-box { background: #1f1438; border-radius: 16px; padding: 16px; max-width: 430px; width: 100%; max-height: 94vh; overflow: auto; text-align: center; }
.modal-box h3 { margin-bottom: 6px; }
.modal-box input { margin: 10px 0; }
#share-canvas { width: 100%; height: auto; border-radius: 10px; margin: 4px 0 10px; }

/* ---- 品牌 logo（水晶球） ---- */
.brand-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 96px; height: 96px; margin-bottom: 10px;
  font-size: 52px;
  background: radial-gradient(circle at 35% 30%, rgba(109,74,255,.35), rgba(20,13,30,.6));
  border: 2px solid rgba(245,179,1,.4);
  border-radius: 50%;
  box-shadow: 0 8px 30px rgba(109,74,255,.35), inset 0 0 20px rgba(109,74,255,.2);
  animation: brand-glow 3s ease-in-out infinite;
}
@keyframes brand-glow { 0%,100% { box-shadow: 0 8px 30px rgba(109,74,255,.35); } 50% { box-shadow: 0 8px 45px rgba(245,179,1,.3); } }

/* ---- 塔罗图鉴牌面 ---- */
.guide-card {
  border-radius: 10px; padding: 10px 6px; text-align: center;
  background: linear-gradient(160deg, #332658, #201736);
  border: 1.5px solid #8a6fff;
}
.guide-card .gc-img { width: 100%; height: 150px; object-fit: cover; border-radius: 6px; }
.guide-card .gc-icon { font-size: 26px; }
.guide-card .gc-name { font-size: 14px; font-weight: 600; margin-top: 4px; }
.guide-card .gc-en { color: #9b8dbf; font-size: 9px; margin-top: 2px; }

/* ---- 六爻铜钱（CSS 绘制，不依赖图片） ---- */
.coin-css {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f7d774, #c9971f 60%, #8a6a14);
  border: 2px solid #6b4e0e;
  font-size: 12px; font-weight: 800; color: #4a3608;
  box-shadow: inset 0 0 5px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.5);
  vertical-align: middle; margin-right: 6px;
}
.guide-card.wands { border-color: #f08c4a; }
.guide-card.cups { border-color: #4aa8f0; }
.guide-card.swords { border-color: #e0e0e0; }
.guide-card.pentacles { border-color: #f5b301; }