/* ==========================================================================
   幸运儿挑选器（v4.11.0，路由 /random，无导航入口）
   --------------------------------------------------------------------------
   设计取向：**大屏优先** —— 整屏摊开、字号用 vmin/clamp 驱动、触控友好的大按钮、
   高对比度；配色沿用设计令牌（--brand-500 / --accent-violet / --bg-*），
   浅色与深色主题下都成立。
   两个阶段：
     · .lucky-setup  选学生 / 设人数 / 设「禁止重复」 → 开始抽取
     · .lucky-draw   无限延伸的悬浮词条滑动定格 → 中奖者高亮 → 加入幸运儿名单
   ========================================================================== */

.lucky {
  --lucky-chip: 176px;   /* 词条宽度：JS 侧常量必须与它一致（见 pages/random.js 的 CHIP_W） */
  --lucky-gap: 14px;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vmin, 22px);
  min-height: 100%;
  padding: clamp(14px, 2.2vmin, 32px) clamp(16px, 3vmin, 48px);
  background: var(--bg-app);
  background-image: var(--bg-app-gradient);
}

/* --------------------------------------------------------------------------
   1. 头部
   -------------------------------------------------------------------------- */
.lucky__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.lucky__title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(22px, 3.4vmin, 40px);
  font-weight: 750;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}

.lucky__title-icon {
  display: grid;
  place-items: center;
  width: clamp(40px, 5vmin, 60px);
  height: clamp(40px, 5vmin, 60px);
  border-radius: var(--radius-md);
  background: var(--fill-brand);
  color: #fff;
  box-shadow: var(--shadow-brand);
}

.lucky__sub { color: var(--text-secondary); font-size: clamp(13px, 1.6vmin, 17px); }

.lucky__head-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   2. 布局：设置阶段是两栏（左选择 / 右设置+名单），窄屏自动堆叠
   -------------------------------------------------------------------------- */
.lucky-setup {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr);
  gap: clamp(12px, 1.6vmin, 22px);
  align-items: start;
  flex: 1;
  min-height: 0;
}

@media (max-width: 1080px) {
  .lucky-setup { grid-template-columns: 1fr; }
}

.lucky-panel {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vmin, 16px);
  padding: clamp(14px, 1.8vmin, 22px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  min-height: 0;
}

.lucky-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.lucky-panel__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(15px, 1.9vmin, 20px);
  font-weight: 650;
  color: var(--text-primary);
}

.lucky-panel__hint { font-size: clamp(12px, 1.5vmin, 14px); color: var(--text-tertiary); }

/* 学生选择的工具行 */
.lucky-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lucky-tools .input { flex: 1; min-width: 160px; }

/* 学生多选网格：chip 布局，触控友好 */
.lucky-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  overflow: auto;
  max-height: 62vh;
  padding: 2px;
}

.lucky-select {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface-sunken);
  color: var(--text-primary);
  font: inherit;
  font-size: clamp(14px, 1.7vmin, 18px);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.lucky-select:hover { transform: translateY(-1px); border-color: var(--brand-300); }

.lucky-select.is-on {
  border-color: var(--brand-500);
  background: rgba(99, 102, 241, 0.12);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.28);
}

.lucky-select__check { opacity: 0.25; }
.lucky-select.is-on .lucky-select__check { opacity: 1; color: var(--brand-500); }
.lucky-select__name { font-weight: 620; }
.lucky-select__no { margin-left: auto; font-family: var(--font-mono); font-size: 0.82em; color: var(--text-tertiary); }

/* --------------------------------------------------------------------------
   3. 抽取设置
   -------------------------------------------------------------------------- */
.lucky-field { display: grid; gap: 8px; }
.lucky-field__label { font-size: clamp(13px, 1.6vmin, 16px); color: var(--text-secondary); font-weight: 600; }

/* 人数步进器：大按钮 */
.lucky-stepper { display: flex; align-items: center; gap: 12px; }

.lucky-stepper__btn {
  display: grid;
  place-items: center;
  width: clamp(48px, 5.6vmin, 64px);
  height: clamp(48px, 5.6vmin, 64px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface-sunken);
  color: var(--text-primary);
  font-size: clamp(20px, 2.6vmin, 28px);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.lucky-stepper__btn:hover:not(:disabled) { border-color: var(--brand-500); background: rgba(99, 102, 241, 0.10); }
.lucky-stepper__btn:disabled { opacity: 0.45; cursor: not-allowed; }

.lucky-stepper__value {
  min-width: clamp(64px, 8vmin, 96px);
  text-align: center;
  font-family: var(--font-mono);
  font-size: clamp(24px, 3.4vmin, 40px);
  font-weight: 700;
  color: var(--text-primary);
}

/* 「禁止重复」开关：整块可点，大屏上也看得清 */
.lucky-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface-sunken);
  color: var(--text-primary);
  font: inherit;
  font-size: clamp(14px, 1.7vmin, 17px);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.lucky-toggle.is-on { border-color: var(--success); background: var(--success-soft); }

.lucky-toggle__track {
  flex: none;
  position: relative;
  width: 52px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--bg-muted);
  transition: background var(--dur-fast) var(--ease-out);
}

.lucky-toggle__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3);
  transition: transform var(--dur-fast) var(--ease-out);
}

.lucky-toggle.is-on .lucky-toggle__track { background: var(--success); }
.lucky-toggle.is-on .lucky-toggle__knob { transform: translateX(24px); }
.lucky-toggle__text { display: grid; gap: 2px; }
.lucky-toggle__sub { font-size: 0.8em; color: var(--text-tertiary); }

/* 开始抽取：整块大按钮 */
.lucky-start {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: clamp(16px, 2.2vmin, 24px);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--fill-brand);
  color: #fff;
  font: inherit;
  font-size: clamp(18px, 2.6vmin, 28px);
  font-weight: 750;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: var(--shadow-brand);
  transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}

.lucky-start:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.06); }
.lucky-start:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

/* --------------------------------------------------------------------------
   4. 幸运儿名单
   -------------------------------------------------------------------------- */
.lucky-winners { display: flex; flex-direction: column; gap: 8px; min-height: 0; }

.lucky-winners__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
  max-height: 40vh;
}

.lucky-winner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(139, 92, 246, 0.32);
  border-radius: var(--radius-md);
  background: rgba(139, 92, 246, 0.10);
  animation: lucky-pop var(--dur-normal) var(--ease-spring) both;
}

.lucky-winner__idx {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--fill-brand);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
}

.lucky-winner__name { font-weight: 700; font-size: clamp(15px, 1.9vmin, 20px); }
.lucky-winner__meta { margin-left: auto; font-family: var(--font-mono); font-size: 0.82em; color: var(--text-tertiary); }

@keyframes lucky-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   5. 抽取舞台（draw 阶段）：无限延伸的悬浮词条
   -------------------------------------------------------------------------- */
.lucky-draw {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(16px, 2.4vmin, 32px);
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.lucky-draw__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.lucky-draw__round {
  font-family: var(--font-mono);
  font-size: clamp(14px, 1.9vmin, 20px);
  color: var(--text-secondary);
  letter-spacing: 0.08em;
}

/* 词条轨道：两侧渐隐 → 视觉上「无限延伸」 */
.lucky-reel {
  position: relative;
  height: clamp(150px, 22vmin, 260px);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}

/* 中央选中标记：上下两条勾角 + 竖线，固定在屏幕正中 */
.lucky-reel__center {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: calc(var(--lucky-chip) + 12px);
  transform: translateX(-50%);
  border-radius: var(--radius-lg);
  border: 2px solid rgba(99, 102, 241, 0.55);
  background: rgba(99, 102, 241, 0.07);
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.25) inset;
  pointer-events: none;
  z-index: 2;
}

.lucky-reel__pointer {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: var(--brand-500);
  pointer-events: none;
}

.lucky-reel__pointer--top { top: 2px; }
.lucky-reel__pointer--bottom { bottom: 2px; transform: translateX(-50%) rotate(180deg); }

/* 词条带：绝对定位在 50% 处，靠 translateX(-offset) 把目标词条推到正中 */
.lucky-reel__strip {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--lucky-gap);
  will-change: transform;
}

.lucky-reel__chip {
  flex: none;
  display: grid;
  place-items: center;
  gap: 2px;
  width: var(--lucky-chip);
  height: calc(var(--lucky-chip) * 0.72);
  padding: 8px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface-sunken);
  color: var(--text-secondary);
  /* 「悬浮」：每个词条按索引错开相位，整体缓慢上下漂浮（转场期间暂停） */
  animation: lucky-float 3.4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.23s);
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.lucky-reel__name { font-size: clamp(15px, 2vmin, 22px); font-weight: 650; white-space: nowrap; }
.lucky-reel__no { font-family: var(--font-mono); font-size: clamp(10px, 1.2vmin, 13px); color: var(--text-tertiary); }

/* 正中央的那一个：放大 + 亮色 + 描边（「像被选中一样」） */
.lucky-reel__chip.is-center {
  transform: scale(1.12);
  border-color: var(--brand-500);
  background: rgba(99, 102, 241, 0.16);
  color: var(--text-primary);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.34), 0 10px 30px rgba(99, 102, 241, 0.28);
}

/* 定格后的中奖词条：更亮、更大、带光环 */
.lucky-reel__chip.is-winner {
  transform: scale(1.2);
  border-color: var(--accent-violet);
  background: color-mix(in srgb, var(--brand-500) 26%, transparent);
  color: var(--text-primary);
  animation: lucky-winner-pop 620ms var(--ease-spring) both;
}

@keyframes lucky-float {
  0%, 100% { translate: 0 -3px; }
  50% { translate: 0 3px; }
}

@keyframes lucky-winner-pop {
  0% { transform: scale(1.12); }
  45% { transform: scale(1.34); }
  100% { transform: scale(1.2); }
}

/* 中奖横幅 */
.lucky-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: clamp(60px, 8vmin, 96px);
  font-size: clamp(20px, 3.2vmin, 40px);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  text-align: center;
}

.lucky-banner.is-win { animation: lucky-banner-in 520ms var(--ease-spring) both; color: var(--brand-600); }
.lucky-banner__name { color: var(--brand-600); }
.lucky-banner__meta { font-family: var(--font-mono); font-size: 0.6em; color: var(--text-tertiary); }

@keyframes lucky-banner-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: none; }
}

/* 底部：本轮幸运儿（横向滚动） */
.lucky-round {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-height: clamp(52px, 7vmin, 76px);
}

.lucky-round__label { font-size: clamp(13px, 1.6vmin, 16px); color: var(--text-tertiary); }

.lucky-round__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(139, 92, 246, 0.40);
  background: rgba(139, 92, 246, 0.12);
  font-size: clamp(14px, 1.8vmin, 19px);
  font-weight: 650;
  animation: lucky-pop var(--dur-normal) var(--ease-spring) both;
}

/* 减动效：不做漂浮、不做弹跳，词条只做位置变化 */
@media (prefers-reduced-motion: reduce) {
  .lucky-reel__chip { animation: none; }
  .lucky-reel__chip.is-winner { animation: none; }
  .lucky-banner.is-win { animation: none; }
  .lucky-winner, .lucky-round__chip { animation: none; }
  .lucky-select:hover { transform: none; }
  .lucky-reel__strip { transition: none; }
}