/**
 * 抽奖页样式 - Figma 67-184
 * 布局：标题区（左返回/中金币/右设置）| 转盘区（中心「幸运」按钮）| 底部统计（云/狮子/财神）
 */

.page-lottery {
  min-height: 100vh;
}

.lottery-container {
  position: relative;
  width: 420px;
  min-height: 874px;
  overflow-x: hidden;
  padding-top: 50px;
}

.lottery-container .bg-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.lottery-container .game-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 一、标题区：左返回、中金币、右设置 */
.lottery-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  min-height: 52px;
}

.lottery-header-btn {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s;
}

.lottery-header-btn:active {
  transform: scale(0.95);
}

.lottery-header-btn-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lottery-header-coin {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-gold, #FFD700);
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.lottery-header-coin-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* 二、幸运按钮（转盘中心） */
.lottery-lucky-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin: -100px 0 0 -100px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s;
  z-index: 3;
}

.lottery-lucky-btn:active {
  transform: scale(0.95);
}

.lottery-lucky-btn-text {
  font-size: 36px;
  font-weight: 700;
  color: #8B4513;
  text-shadow: 0 2px 0 rgba(255,255,255,0.5);
}

.lottery-lucky-btn-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 三、转盘区 */
.lottery-wheel-section {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
}

.lottery-wheel-wrap {
  position: relative;
  width: 416px;
  height: 416px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lottery-wheel {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 箭头：箭尾在幸运按钮中心，箭头指向底部卡牌区，旋转时箭尾不动 */
.lottery-pointer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 96px;
  height: 192px;
  margin: 0 0 0 -48px;
  object-fit: contain;
  z-index: 4;
  pointer-events: none;
  transform-origin: 50% 0%;
  transform: rotate(180deg);
}

.lottery-pointer.is-spinning {
  animation: lottery-arrow-spin 0.5s linear infinite;
}

@keyframes lottery-arrow-spin {
  from { transform: rotate(180deg); }
  to { transform: rotate(540deg); }
}

/* 四、底部统计：第一行云卡牌，第二行狮子、财神 */
.lottery-footer {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 24px;
  gap: 16px;
}

.lottery-footer-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.lottery-footer-row-cards {
  gap: 48px;
}

.lottery-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.lottery-stat-icon {
  object-fit: contain;
}

.lottery-stat-icon-coin {
  width: 56px;
  height: 56px;
}

.lottery-stat-icon-card {
  width: 112px;
  height: 112px;
}

.lottery-stat-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text, #8B0000);
}