* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: radial-gradient(circle at 50% 30%, #3d2a91, #1e0d7c, #0d053d);
  color: #e0d8ff;
  font-family: 'Georgia', serif;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  cursor: none; 
}
.background-effects {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
.background-effects::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 150vmax; height: 150vmax;
  background: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=2000&q=80') center/cover no-repeat;
  opacity: 0.6; 
  mix-blend-mode: screen; 
  animation: earth-rotation 250s linear infinite; 
}
@keyframes earth-rotation {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(white 0.8px, transparent 0.8px), radial-gradient(#ffccff 1px, transparent 1px);
  background-size: 85px 85px, 60px 60px;
  opacity: 0.3;
  animation: stars-twinkle 4s infinite alternate;
  pointer-events: none;
  z-index: -1;
}
@keyframes stars-twinkle { 0% { opacity: 0.2; } 100% { opacity: 0.5; } }
.app { position: relative; z-index: 2; padding: 12px 0; text-align: center; display: flex; flex-direction: column; min-height: 100vh; }
header { margin-bottom: 6px; }
h1 { font-size: clamp(2.5rem, 5vw, 4rem); letter-spacing: 10px; color: #d0bfff; text-shadow: 0 0 40px #ff99cc; margin-bottom: 6px; }
.miko-title { font-size: clamp(1rem, 3vw, 1.5rem); letter-spacing: 5px; color: #ff99cc; margin-bottom: 10px; }
.subtitle { font-size: clamp(0.9rem, 2vw, 1.1rem); opacity: 0.85; letter-spacing: 1.5px; margin-bottom: 12px; color: #c9b3ff; line-height: 1.5; }
button, select {
  background: rgba(30,15,70,0.6);
  backdrop-filter: blur(14px);
  border: 1.5px solid #ff99cc;
  color: #d8cfff;
  padding: 10px 25px;
  font-size: 1rem;
  border-radius: 60px;
  margin: 5px;
  transition: all 0.3s;
  cursor: none; 
}
button:hover { background: rgba(255,150,200,0.3); transform: translateY(-3px); }

/* ==================== 轮盘滑动区间最终优化（已大幅收紧） ==================== */
.wheel-wrapper {
  position: relative;
  height: 41vh;               /* ← 进一步缩小 */
  min-height: 290px;
  width: 100vw;
  max-width: 100%;
  margin: 2px 0 8px;
  padding-bottom: 10px;       /* ← 大幅收缩，滑动区域更精准 */
  display: flex;
  justify-content: center;
  align-items: center; 
  perspective: 1600px; 
  overflow: hidden;
  contain: layout;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.wheel-wrapper:active { cursor: grabbing; }

.card-container {
  position: relative;
  width: clamp(48px, 5.8vw, 78px); 
  height: clamp(82px, 9.5vw, 125px);
  transform-style: preserve-3d; 
  will-change: transform;
}
.deck-card {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: 6px; 
  box-shadow: 0 8px 25px rgba(0,0,0,0.95);
  transition: transform 0.6s cubic-bezier(0.23,1,0.32,1), opacity 0.6s, box-shadow 0.3s;
  border: 1px solid #122b1c;
  opacity: 0; 
  transform: scale(0); 
  touch-action: manipulation;
  pointer-events: auto;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  isolation: isolate;
}
.deck-card:hover:not(.selected) { 
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.6); 
  transform: translateY(-5px); 
}
.deck-card.selected { box-shadow: 0 0 50px #ffd700, 0 0 25px #d4af37; z-index: 20; }

/* 埃及荷鲁斯之眼牌背 */
.deck-card .card-back {
  width: 100%; height: 100%;
  background: url('./images/egypt-back.jpg') center/cover no-repeat;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.6);
}
.deck-card .card-back::before,
.deck-card .card-back::after,
.deck-card .back-text {
  display: none;
}

.action-area { margin-bottom: 22px; min-height: 50px; }

/* 宇宙密码 */
#cosmicCode {
  margin: 8px auto 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.cosmic-label {
  font-size: clamp(0.95rem, 2.8vw, 1.25rem);
  color: #ffcc88;
  letter-spacing: 3px;
  text-shadow: 0 0 12px #ffd700;
}
.cosmic-numbers {
  display: flex;
  gap: 18px;
  font-size: clamp(2.1rem, 6vw, 3.2rem);
  font-weight: bold;
  color: #d4af37;
  text-shadow: 0 0 20px #ffcc88, 0 0 40px #ffd700;
  cursor: pointer;
}
.cosmic-numbers .num {
  transition: all 0.4s ease;
  animation: numberPulse 4s infinite alternate ease-in-out;
  padding: 8px 16px;
  border-radius: 12px;
}
.cosmic-numbers .num:hover {
  transform: scale(1.25) rotate(5deg);
  text-shadow: 0 0 35px #ffcc88, 0 0 65px #ffd700;
  background: rgba(255, 204, 136, 0.15);
}

@keyframes numberPulse {
  0% { transform: scale(1); text-shadow: 0 0 15px #ffd700; }
  100% { transform: scale(1.12); text-shadow: 0 0 35px #ffcc88, 0 0 55px #ffd700; }
}

/* 解读区（保持之前优化） */
.interpretation-area { 
  display: flex; 
  flex-wrap: nowrap; 
  overflow-x: auto; 
  gap: 16px; 
  padding: 18px 30px 22px 35px;
  margin-top: -12px;
  max-width: 100%; 
  justify-content: center !important; 
  background: rgba(10,5,30,0.95); 
  border-top: 1px solid rgba(255,153,204,0.3); 
}
.interp-card { 
  background: rgba(20,10,55,0.98); 
  backdrop-filter: blur(12px); 
  border: 1.5px solid #ff99cc; 
  border-radius: 16px; 
  padding: 12px; 
  width: clamp(145px, 38vw, 178px); 
  flex: 0 0 auto; 
  text-align: center; 
  transition: all 0.3s ease; 
}
.interp-card img { width: 100%; height: auto; margin: 0 auto 10px; border-radius: 8px; box-shadow: 0 8px 20px rgba(0,0,0,0.6); }
.interp-card h3 { font-size: 1.05rem; color: #d0bfff; }
.interp-card p { margin-top: 8px; font-size: 0.84rem; line-height: 1.5; color: #e0d8ff; text-shadow: 0 0 6px #ff99cc; }
.interp-card small { color: #ffcc88; display: block; margin-top: 7px; font-weight: bold; font-size: 0.92rem; }

#catCursor { position: fixed; font-size: 24px; pointer-events: none; z-index: 10000; text-shadow: 0 0 15px #ff66aa; transform: translate(-50%, -50%); }
#trailCanvas { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; }