/* ============================================================================
   幸运大转盘 · 移动端抽奖 H5
   共享样式：高级深色金视觉 / 全屏移动端布局
   页面：index.html（抽奖主页）、result.html（中奖结果页）
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* seed tokens */
  --seed-bg: #0A0F1E;
  --seed-fg: #F5EFE2;
  --seed-primary: #E8C36A;
  --seed-accent: #B98A2F;
  --seed-surface: #101A30;
  --seed-radius: 18px;

  /* derived palette — everything flows from the seed tokens */
  --bg: var(--seed-bg);
  --fg: var(--seed-fg);
  --muted: color-mix(in oklch, var(--seed-fg) 62%, var(--seed-bg));
  --surface: var(--seed-surface);
  --border: color-mix(in oklch, var(--seed-primary) 20%, transparent);
  --white: #FFFFFF;

  --gold-100: color-mix(in oklch, var(--seed-primary) 35%, white);
  --gold-200: color-mix(in oklch, var(--seed-primary) 60%, white);
  --gold-300: var(--seed-primary);
  --gold-400: var(--seed-accent);
  --gold-500: color-mix(in oklch, var(--seed-accent) 75%, black);
  --gold: var(--gold-300);
  --gold-deep: var(--gold-400);
  --gold-soft: var(--gold-200);
  --gold-dim: color-mix(in oklch, var(--seed-primary) 60%, transparent);
  --ink-gold: color-mix(in oklch, var(--seed-accent) 50%, black);
  --lamp: color-mix(in oklch, var(--gold-soft) 50%, white);

  --wheel-a: color-mix(in oklch, var(--seed-surface) 90%, var(--seed-primary));
  --wheel-b: color-mix(in oklch, var(--seed-surface) 78%, var(--seed-fg));
  --wheel-c: color-mix(in oklch, var(--seed-surface) 60%, var(--seed-bg));

  --card-top: var(--seed-surface);
  --card-bottom: color-mix(in oklch, var(--seed-surface) 55%, var(--seed-bg));

  --hub-off-a: color-mix(in oklch, var(--seed-fg) 22%, var(--seed-bg));
  --hub-off-b: color-mix(in oklch, var(--seed-fg) 12%, var(--seed-bg));
  --hub-off-border: color-mix(in oklch, var(--seed-fg) 32%, var(--seed-bg));
  --hub-off-text: color-mix(in oklch, var(--seed-fg) 45%, var(--seed-bg));

  --spin-ms: 4400ms;
  --radius-card: var(--seed-radius);

  --font-display: 'Songti SC', 'STSong', 'Noto Serif SC', 'Source Han Serif SC', 'SimSun', Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* responsive wheel geometry（基准 326px，小屏按 86vw 等比缩放） */
  --ring: min(326px, 86vw);
  --wheel-size: calc(var(--ring) * 0.920);
  --ring-pad: calc(var(--ring) * 0.040);
  --chip-size: calc(var(--ring) * 0.209);
  --chip-img: calc(var(--ring) * 0.184);
  --hub-size: calc(var(--ring) * 0.282);
  --hub-pad: calc(var(--ring) * 0.055);
  --slice-lift: calc(var(--ring) * 0.172);
  --lamp-size: calc(var(--ring) * 0.022);
  --lamp-r: calc(var(--ring) * -0.48);

  --frame: color-mix(in oklch, var(--gold) 33%, var(--bg));
}

/* ------------------------------------------------------------------ base -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }

body {
  min-height: 100dvh;
  background:
    radial-gradient(72% 46% at 50% -8%, color-mix(in oklch, var(--gold) 11%, var(--bg)) 0%, var(--bg) 62%),
    var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
button { font-family: inherit; }

.app {
  position: relative;
  width: 100%;
  max-width: 480px;
  min-height: 100dvh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding:
    calc(env(safe-area-inset-top, 0px) + 22px)
    calc(env(safe-area-inset-right, 0px) + 18px)
    calc(env(safe-area-inset-bottom, 0px) + 26px)
    calc(env(safe-area-inset-left, 0px) + 18px);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}

/* ================================================================ 抽奖主页 -- */

.hero { text-align: center; padding: 4px 4px 0; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--gold) 78%, transparent);
  margin: 0 0 8px;
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 8.6vw, 36px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 60%, var(--gold-500) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold-deep);
}
.hero .sub { margin: 8px 0 0; font-size: 13px; color: var(--muted); letter-spacing: 0.02em; }

/* ---- 转盘 ---- */
.wheel-zone {
  position: relative;
  width: var(--ring);
  margin: clamp(16px, 5vw, 26px) auto 0;
}

.pointer {
  position: absolute;
  top: calc(var(--ring) * -0.040);
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--ring) * 0.104);
  height: auto;
  z-index: 6;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
}

.wheel-ring {
  position: relative;
  width: var(--ring);
  height: var(--ring);
  border-radius: 50%;
  padding: var(--ring-pad);
  background: radial-gradient(circle at 30% 25%, var(--gold-soft) 0%, var(--gold) 38%, var(--gold-deep) 78%, var(--gold-500) 100%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--gold-soft) 35%, transparent) inset,
    0 10px 34px -8px color-mix(in srgb, var(--gold) 28%, transparent),
    0 4px 14px rgba(0, 0, 0, 0.5);
}

.lamp {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--lamp-size); height: var(--lamp-size);
  border-radius: 50%;
  background: var(--lamp);
  box-shadow: 0 0 6px 1px color-mix(in srgb, var(--lamp) 85%, transparent);
  transform: translate(-50%, -50%) rotate(var(--a, 0deg)) translateY(var(--lamp-r));
  animation: lamp-twinkle 1.6s ease-in-out infinite;
}
@keyframes lamp-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.32; } }

.wheel {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: conic-gradient(
    var(--wheel-a) 0deg 60deg,
    var(--wheel-c) 60deg 120deg,
    var(--wheel-b) 120deg 180deg,
    var(--wheel-c) 180deg 240deg,
    var(--wheel-a) 240deg 300deg,
    var(--wheel-c) 300deg 360deg
  );
  transform: rotate(0deg);
  will-change: transform;
}
.wheel.spinning { transition: transform var(--spin-ms) cubic-bezier(0.15, 0.65, 0.1, 1); }
/* 扇区之间的细金分隔线 */
.wheel::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg,
    transparent 0deg 59.5deg, color-mix(in srgb, var(--gold) 75%, transparent) 59.5deg 60deg);
  pointer-events: none;
}
/* 内侧细描边 */
.wheel::after {
  content: ''; position: absolute; inset: calc(var(--ring) * 0.015); border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
  pointer-events: none;
}

.slice {
  position: absolute; left: 50%; top: 50%;
  width: 0; height: 0;
  transform: rotate(var(--mid));
}
.slice-inner {
  position: absolute; left: 0; top: 0;
  transform: translate(-50%, -100%);
  /* column-reverse：图片靠内、文字靠外，避免中圈挤压 */
  display: flex; flex-direction: column-reverse; align-items: center; gap: 5px;
  padding-bottom: var(--slice-lift);
}

.prize-chip {
  width: var(--chip-size); height: var(--chip-size); border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--gold);
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.45),
    0 0 14px color-mix(in srgb, var(--gold) 40%, transparent);
  display: grid; place-items: center;
  overflow: hidden;
}
.prize-chip img { width: var(--chip-img); height: var(--chip-img); object-fit: contain; }
.prize-chip img.fallback { width: 58%; height: 58%; object-fit: contain; }

.slice-label {
  font-size: clamp(11px, 3.4vw, 13px);
  font-weight: 600; line-height: 1.25;
  color: var(--gold-soft); letter-spacing: 0.02em;
  text-align: center; white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.miss-icon {
  width: calc(var(--ring) * 0.153); height: calc(var(--ring) * 0.153);
  border-radius: 50%;
  border: 1.5px dashed color-mix(in srgb, var(--gold) 50%, transparent);
  display: grid; place-items: center;
  color: color-mix(in srgb, var(--gold) 65%, transparent);
}
.miss-icon svg { width: 56%; height: 56%; stroke: currentColor; fill: none; stroke-width: 1.6; }
.miss-label { color: var(--muted); }

/* ---- 中央按钮 ---- */
.hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: var(--hub-size); height: var(--hub-size); border-radius: 50%;
  border: calc(var(--ring) * 0.012) solid var(--gold-soft);
  background: radial-gradient(circle at 32% 28%, var(--gold-100) 0%, var(--gold) 45%, var(--gold-deep) 100%);
  box-shadow:
    0 8px 22px -4px rgba(0, 0, 0, 0.55),
    0 0 0 calc(var(--ring) * 0.018) color-mix(in srgb, var(--seed-bg) 90%, transparent),
    0 0 24px color-mix(in srgb, var(--gold) 35%, transparent);
  color: var(--ink-gold); font: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 0; z-index: 5;
  transition: transform 0.15s ease, filter 0.3s ease;
}
.hub .hub-main {
  font-family: var(--font-display);
  font-size: clamp(15px, 5.4vw, 21px);
  font-weight: 700; letter-spacing: 0.06em; line-height: 1.1;
}
.hub .hub-sub { font-size: clamp(9px, 2.7vw, 10px); font-weight: 600; letter-spacing: 0.06em; opacity: 0.8; }
.hub:not(:disabled) { animation: hub-glow 2.2s ease-in-out infinite; }
.hub:not(:disabled):active { transform: translate(-50%, -50%) scale(0.94); }
@keyframes hub-glow {
  0%, 100% { box-shadow: 0 8px 22px -4px rgba(0,0,0,0.55), 0 0 0 calc(var(--ring)*0.018) color-mix(in srgb, var(--seed-bg) 90%, transparent), 0 0 18px color-mix(in srgb, var(--gold) 30%, transparent); }
  50%      { box-shadow: 0 8px 22px -4px rgba(0,0,0,0.55), 0 0 0 calc(var(--ring)*0.018) color-mix(in srgb, var(--seed-bg) 90%, transparent), 0 0 34px color-mix(in srgb, var(--gold) 60%, transparent); }
}
.hub:disabled,
.hub.is-locked {
  cursor: not-allowed;
  background: radial-gradient(circle at 32% 28%, var(--hub-off-a) 0%, var(--hub-off-b) 100%);
  border-color: var(--hub-off-border);
  color: var(--hub-off-text);
  animation: none;
}
.hub.spinning { pointer-events: none; animation: none; }
.hub.spinning .hub-main { opacity: 0.55; }

/* ---- 剩余次数 ---- */
.chances {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: clamp(14px, 4.6vw, 20px) auto 0;
  font-size: 13px; color: var(--muted); letter-spacing: 0.02em;
}
.chances .badge {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 10px;
}

/* ---- 活动规则 ---- */
.rules {
  margin: clamp(18px, 5.6vw, 26px) 0 0;
  background: color-mix(in oklch, var(--surface) 88%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 16px 18px;
}
.rules h2 {
  font-family: var(--font-display); font-size: 16px; font-weight: 600;
  letter-spacing: 0.02em; margin: 0 0 10px; color: var(--gold);
  display: flex; align-items: center; gap: 8px;
}
.rules h2 svg { width: 16px; height: 16px; flex: none; stroke: var(--gold); fill: none; stroke-width: 1.7; }
.rules ol { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.rules li { font-size: 13px; line-height: 1.55; color: var(--muted); }
.rules li strong { color: var(--fg); font-weight: 500; }

/* ============================================================ 中奖结果页 -- */

.page-result .app { justify-content: center; padding-top: calc(env(safe-area-inset-top, 0px) + 18px); }

.result-head { position: relative; text-align: center; padding: 0 4px 4px; z-index: 1; }
.win-kicker {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--gold) 78%, transparent);
  margin: 0 0 6px;
}
.win-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 7.4vw, 30px); font-weight: 700;
  letter-spacing: 0.04em; line-height: 1.2; margin: 0;
  background: linear-gradient(180deg, var(--gold), var(--gold-deep) 55%, var(--gold-500));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold-deep);
}

.win-card {
  position: relative;
  width: 100%;
  margin: clamp(16px, 5vw, 24px) 0 0;
  background: linear-gradient(180deg, var(--card-top) 0%, var(--card-bottom) 100%);
  border: 1.5px solid var(--gold);
  border-radius: calc(var(--radius-card) + 6px);
  padding: clamp(22px, 7vw, 30px) 22px 22px;
  text-align: center;
  box-shadow:
    0 0 0 5px color-mix(in srgb, var(--gold) 12%, transparent),
    0 24px 60px -12px rgba(0, 0, 0, 0.8);
  animation: card-in 0.55s cubic-bezier(0.2, 0.9, 0.25, 1.15);
  overflow: hidden;
  z-index: 2;
}
@keyframes card-in { from { opacity: 0; transform: scale(0.88) translateY(22px); } to { opacity: 1; transform: none; } }

.win-card .rays {
  position: absolute; top: -46%; left: 50%;
  width: 172%; aspect-ratio: 1; border-radius: 50%;
  transform: translateX(-50%);
  background: repeating-conic-gradient(from 0deg,
    color-mix(in srgb, var(--gold) 7%, transparent) 0deg 7deg, transparent 7deg 18deg);
  animation: rays-rotate 36s linear infinite;
  pointer-events: none;
}
@keyframes rays-rotate { to { transform: translateX(-50%) rotate(360deg); } }

.win-prize-img {
  position: relative; z-index: 1;
  width: min(150px, 39vw); height: min(150px, 39vw);
  margin: 16px auto 12px;
  border-radius: 50%; background: var(--white);
  border: 2px solid var(--gold);
  box-shadow: 0 10px 30px -6px color-mix(in srgb, var(--gold) 40%, transparent);
  display: grid; place-items: center; overflow: hidden;
}
.win-prize-img img { width: 88%; height: 88%; object-fit: contain; }
.win-prize-img img.fallback { width: 60%; height: 60%; }

.win-prize-name { position: relative; z-index: 1; font-size: 16px; font-weight: 600; color: var(--fg); margin: 0 0 4px; letter-spacing: 0.02em; }
.win-prize-desc { position: relative; z-index: 1; font-size: 12.5px; color: var(--muted); margin: 0 0 18px; letter-spacing: 0.02em; }

.btn-gold {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 48px;
  background: linear-gradient(180deg, var(--gold-soft) 0%, var(--gold) 55%, var(--gold-deep) 100%);
  color: var(--ink-gold); border: 0; border-radius: 999px;
  font-size: 16px; font-weight: 700; letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--gold) 50%, transparent);
  transition: transform 0.15s ease;
}
.btn-gold:active { transform: scale(0.97); }

.btn-ghost {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 12px; padding: 10px 18px; min-height: 40px;
  background: transparent; color: var(--muted);
  border: 0; font-size: 13px; letter-spacing: 0.02em;
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, var(--muted) 50%, transparent);
  cursor: pointer;
}

.claim-hint {
  display: none;
  position: relative; z-index: 1;
  margin: 12px 0 0; padding: 10px 12px;
  background: color-mix(in srgb, var(--gold) 8%, transparent);
  border: 1px dashed var(--gold-dim);
  border-radius: 10px;
  font-size: 12.5px; line-height: 1.6; color: var(--gold-soft);
  text-align: left;
}
.claim-hint.show { display: block; animation: fade-in 0.3s ease; }

.result-rules { display: none; margin-top: 14px; text-align: left; }
.result-rules.show { display: block; animation: fade-in 0.3s ease; }
.result-rules h2 { font-size: 15px; }

@keyframes fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---- 彩带 ---- */
.confetti {
  position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
}
.confetti i {
  position: absolute; top: -14px;
  width: 7px; height: 12px; border-radius: 2px;
  opacity: 0;
  animation: confetti-fall 2.8s ease-in infinite;
}
.confetti i.dot { width: 6px; height: 6px; border-radius: 50%; }
@keyframes confetti-fall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  8%   { opacity: 1; }
  82%  { opacity: 1; }
  100% { transform: translateY(104dvh) rotate(340deg); opacity: 0; }
}

/* ------------------------------------------------------ reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .lamp, .hub:not(:disabled), .rays, .confetti i { animation: none; }
  .win-card { animation: none; }
}

/* --------------------------------------------------------------- small -- */
@media (max-height: 680px) {
  .hero .sub { display: none; }
  :root { --ring: min(300px, 82vw); }
}