* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Microsoft YaHei", sans-serif;
  overflow-y: auto;
  padding-top: 30px;
  padding-bottom: 60px;
}

.wheel-container {
  position: relative;
  width: 400px;
  height: 400px;
  flex-shrink: 0;
}

/* 外层静止转盘 */
.outer-wheel {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.1),
    inset 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* 内圈背景 */
.outer-wheel::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* 放射状分隔线容器 */
.outer-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  pointer-events: none;
  overflow: hidden;
}

/* 放射状分隔线 - 位于数字之间 */
.outer-lines::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 75deg,
    transparent 0deg 29deg,
    #e0e0e0 29deg 30deg,
    transparent 30deg 59deg,
    #e0e0e0 59deg 60deg,
    transparent 60deg 89deg,
    #e0e0e0 89deg 90deg,
    transparent 90deg 119deg,
    #e0e0e0 119deg 120deg,
    transparent 120deg 149deg,
    #e0e0e0 149deg 150deg,
    transparent 150deg 179deg,
    #e0e0e0 179deg 180deg,
    transparent 180deg 209deg,
    #e0e0e0 209deg 210deg,
    transparent 210deg 239deg,
    #e0e0e0 239deg 240deg,
    transparent 240deg 269deg,
    #e0e0e0 269deg 270deg,
    transparent 270deg 299deg,
    #e0e0e0 299deg 300deg,
    transparent 300deg 329deg,
    #e0e0e0 329deg 330deg,
    transparent 330deg 359deg,
    #e0e0e0 359deg 360deg
  );
}

/* 外层格子 */
.outer-cell {
  position: absolute;
  width: 40px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: 500;
  color: #2c3e50;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  text-align: center;
}

/* 内层可旋转转盘 */
.inner-wheel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  height: 220px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 5px 20px rgba(0, 0, 0, 0.08),
    inset 0 1px 5px rgba(0, 0, 0, 0.03);
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.inner-wheel:active {
  cursor: grabbing;
}

.inner-wheel::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #909cc6 0%, #bcaecb 60%);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

/* 内层放射状分隔线容器 */
.inner-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  pointer-events: none;
  overflow: hidden;
}

/* 命宫、事业宫、财帛宫蓝色背景扇形 - 位于两根分隔线之间 */
.inner-lines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(
    from 60deg,
    transparent 0deg 45deg,
    rgba(59, 130, 246, 0.3) 45deg 75deg,
    transparent 75deg 165deg,
    rgba(59, 130, 246, 0.3) 165deg 195deg,
    transparent 195deg 285deg,
    rgba(59, 130, 246, 0.3) 285deg 315deg,
    transparent 315deg 360deg
  );
  z-index: -1;
}

/* 内层放射状分隔线 - 位于数字之间 */
.inner-lines::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from -75deg,
    transparent 0deg 29deg,
    #e0e0e0 29deg 30deg,
    transparent 30deg 59deg,
    #e0e0e0 59deg 60deg,
    transparent 60deg 89deg,
    #e0e0e0 89deg 90deg,
    transparent 90deg 119deg,
    #e0e0e0 119deg 120deg,
    transparent 120deg 149deg,
    #e0e0e0 149deg 150deg,
    transparent 150deg 179deg,
    #e0e0e0 179deg 180deg,
    transparent 180deg 209deg,
    #e0e0e0 209deg 210deg,
    transparent 210deg 239deg,
    #e0e0e0 239deg 240deg,
    transparent 240deg 269deg,
    #e0e0e0 269deg 270deg,
    transparent 270deg 299deg,
    #e0e0e0 299deg 300deg,
    transparent 300deg 329deg,
    #e0e0e0 329deg 330deg,
    transparent 330deg 359deg,
    #e0e0e0 359deg 360deg
  );
}

/* 内层格子 */
.inner-cell {
  position: absolute;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  pointer-events: none;
}

/* 中心装饰 */
.center-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 10;
  pointer-events: none;
}

/* 切换星曜按钮 */
.changeStar {
  position: relative;
  margin-top: 30px;
  display: flex;
  gap: 10px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  z-index: 100;
  flex-shrink: 0;
}

.star-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  background: #f0f0f0;
  color: #666;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.star-btn:hover {
  background: #e0e0e0;
}

.star-btn.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}

/* 页脚 */
.footer {
  position: relative;
  margin-top: 30px;
  text-align: center;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.footer p {
  font-size: 14px;
  color: #5a6c7d;
  margin: 0;
}