/* ============ 基础 ============ */
:root {
  --item-h: 64px;
  --bg: #f5f5f7;
  --card: #ffffff;
  --ink: #1d1d1f;
  --ink2: #86868b;
  --line: rgba(0, 0, 0, 0.08);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro SC", "PingFang SC", "HarmonyOS Sans SC",
    "Source Han Sans SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: radial-gradient(1200px 500px at 50% -80px, #ffffff 0%, var(--bg) 70%);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  /* 整页在视口中垂直水平居中；内容超高时自然回退为普通滚动 */
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100svh;
}
.app { max-width: 1160px; margin: auto; padding: 28px 20px; width: 100%; }
button { font-family: inherit; }
button:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; }

/* ============ 顶部：标题 + 一键抽取 ============ */
.hero { text-align: center; margin-bottom: 28px; }
.hero h1 { font-size: 32px; font-weight: 700; letter-spacing: 0.5px; margin: 0 0 20px; }

.btn-primary {
  appearance: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, #37a2ff, #0071e3);
  color: #fff; font-size: 19px; font-weight: 650;
  padding: 15px 46px; border-radius: 999px;
  box-shadow: 0 10px 26px rgba(0, 113, 227, 0.35);
  transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s;
  user-select: none;
}
.btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(0, 113, 227, 0.42); }
.btn-primary:active:not(:disabled) { transform: scale(0.97); }
.btn-primary:disabled { opacity: 0.55; cursor: default; box-shadow: none; }

/* ============ 卡片区 ============ */
.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }

.card {
  background: var(--card); border-radius: 24px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 16px 16px 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  animation: cardIn 0.5s ease backwards;
}
.card:nth-child(2) { animation-delay: 0.07s; }
.card:nth-child(3) { animation-delay: 0.14s; }
@keyframes cardIn { from { opacity: 0; transform: translateY(14px); } }

.card-head { display: flex; align-items: center; margin: 2px 4px 12px; }
.card-head h2 { font-size: 18px; font-weight: 700; margin: 0; }

/* 单独抽取的图标按钮（原人数位置） */
.btn-solo {
  margin-left: auto; width: 32px; height: 32px; border-radius: 50%;
  border: none; background: #f5f5f7; font-size: 16px; line-height: 1;
  cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.12s ease, background 0.2s, opacity 0.2s;
}
.btn-solo:hover:not(:disabled) { background: #e8e8ed; }
.btn-solo:active:not(:disabled) { transform: scale(0.92); }
.btn-solo:disabled { opacity: 0.4; cursor: default; }

/* ============ 滚轮（Apple Picker 风格） ============ */
.wheel {
  position: relative; height: calc(var(--item-h) * 5);
  border-radius: 18px;
  background: linear-gradient(180deg, #fbfbfd, #f3f3f8);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.05);
  user-select: none;
}
.mask {
  position: absolute; inset: 0; overflow: hidden; border-radius: inherit;
  perspective: 900px;
  -webkit-mask-image: linear-gradient(180deg, transparent 4%, #000 26%, #000 74%, transparent 96%);
  mask-image: linear-gradient(180deg, transparent 4%, #000 26%, #000 74%, transparent 96%);
}
.cell {
  position: absolute; left: 0; right: 0;
  top: calc(50% - var(--item-h) / 2);
  height: var(--item-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1.15; will-change: transform, opacity; backface-visibility: hidden;
}
.cell .name { font-size: 24px; font-weight: 650; color: var(--ink); transition: color 0.25s; white-space: nowrap; }
.cell .name.selected { color: var(--accent-text); }
.cell .sid { font-size: 12px; color: var(--ink2); font-variant-numeric: tabular-nums; margin-top: 3px; }

.hairline { position: absolute; left: 16px; right: 16px; height: 1px; background: var(--line); pointer-events: none; }
.hairline.top { top: calc(50% - var(--item-h) / 2); }
.hairline.bottom { top: calc(50% + var(--item-h) / 2); }

/* 中间小框：平时灰色，抽中后变成组别颜色（考研金 / 考公红 / Java蓝） */
.selection-frame {
  position: absolute; left: 12px; right: 12px;
  top: calc(50% - var(--item-h) / 2 + 2px);
  height: calc(var(--item-h) - 4px);
  border: 2px solid #d6d6db;
  border-radius: 14px;
  pointer-events: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.selection-frame.show {
  border-color: var(--accent);
  box-shadow: 0 0 0 5px var(--accent-soft), 0 6px 20px var(--accent-glow);
  animation: framePop 0.35s ease;
}
@keyframes framePop { 0% { transform: scale(0.9); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }

/* ============ 提示条（仅名单读取失败时出现） ============ */
.banner {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 99; background: #fff8e1; color: #7a5b00;
  border: 1px solid rgba(122, 91, 0, 0.2);
  padding: 10px 18px; border-radius: 12px; font-size: 13.5px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); max-width: min(92vw, 560px);
}
.banner.error { background: #ffe9e7; color: #b3261e; border-color: rgba(179, 38, 30, 0.25); }

.btn-sound {
  position: fixed; top: 18px; right: 18px; z-index: 50;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.9); border: 1px solid var(--line);
  font-size: 18px; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(8px);
  transition: transform 0.12s ease;
}
.btn-sound:active { transform: scale(0.92); }

/* ============ 响应式 ============ */
@media (max-width: 640px) {
  :root { --item-h: 54px; }
  .app { padding: 20px 14px; }
  .hero { margin-bottom: 20px; }
  .hero h1 { font-size: 26px; margin-bottom: 14px; }
  .btn-primary { font-size: 17px; padding: 12px 34px; }
  .cell .name { font-size: 20px; }
  .cell .sid { font-size: 11px; }
  .card { border-radius: 20px; padding: 13px 13px 15px; }
  .card-head h2 { font-size: 16.5px; }
  .btn-solo { width: 30px; height: 30px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .card, .selection-frame.show { animation: none; }
}