:root {
  color-scheme: dark;
  --ink: oklch(0.98 0.012 68);
  --muted: oklch(0.82 0.035 68);
  --paper: oklch(0.96 0.022 76);
  --paper-ink: oklch(0.22 0.045 36);
  --red-900: oklch(0.25 0.085 28);
  --red-800: oklch(0.33 0.12 28);
  --red-700: oklch(0.43 0.17 31);
  --red-600: oklch(0.54 0.2 34);
  --orange: oklch(0.74 0.15 63);
  --gold: oklch(0.86 0.13 86);
  --green: oklch(0.73 0.14 143);
  --shadow: 0 28px 70px oklch(0.12 0.04 28 / 0.42);
  --font-sans: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif;
  font-family: var(--font-sans);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background:
    radial-gradient(circle at 25% 6%, oklch(0.46 0.13 38 / 0.35), transparent 34rem),
    linear-gradient(180deg, var(--red-900), oklch(0.17 0.055 30) 48%, oklch(0.12 0.035 32));
}

body {
  min-height: 100%;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
}

.page-shell {
  width: min(100%, 480px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 10px 12px 26px;
}

.hero {
  position: relative;
  min-height: 238px;
  overflow: hidden;
  border: 1px solid oklch(0.72 0.13 58 / 0.24);
  border-radius: 8px;
  box-shadow: var(--shadow);
  background: var(--red-800);
}

.hero__image,
.hero__shade {
  position: absolute;
  inset: 0;
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__shade {
  background:
    linear-gradient(180deg, oklch(0.14 0.035 30 / 0.78), oklch(0.23 0.08 31 / 0.42) 38%, oklch(0.12 0.035 30 / 0.82)),
    radial-gradient(circle at 50% 75%, transparent 0 36%, oklch(0.12 0.035 30 / 0.72) 78%);
}

.hero__content {
  position: relative;
  display: flex;
  min-height: 238px;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 17px 16px;
}

.hero__kicker,
.hero__copy,
.ticket__eyebrow,
.footer-note {
  margin: 0;
}

.hero__kicker {
  width: fit-content;
  max-width: 100%;
  padding: 6px 10px;
  border: 1px solid oklch(0.86 0.12 86 / 0.46);
  border-radius: 999px;
  background: oklch(0.18 0.055 32 / 0.72);
  color: var(--gold);
  font-size: 0.82rem;
  font-weight: 800;
}

h1 {
  margin: 56px 0 0;
  color: oklch(0.97 0.025 75);
  font-family: var(--font-display);
  font-size: clamp(2.95rem, 13vw, 3.55rem);
  font-weight: 950;
  line-height: 0.92;
  letter-spacing: 0;
  text-shadow:
    0 2px 0 oklch(0.43 0.17 31 / 0.48),
    0 9px 22px oklch(0.1 0.04 30 / 0.78);
}

.hero__copy {
  max-width: 20rem;
  color: oklch(0.94 0.045 78);
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.45;
}

.lottery {
  margin-top: 12px;
  padding: 14px 14px 18px;
  border: 1px solid oklch(0.76 0.12 70 / 0.22);
  border-radius: 8px;
  background:
    linear-gradient(180deg, oklch(0.28 0.085 30 / 0.92), oklch(0.18 0.052 30 / 0.96)),
    radial-gradient(circle at 50% 0, oklch(0.76 0.12 64 / 0.16), transparent 19rem);
  box-shadow: var(--shadow);
}

.lottery__topline,
.ticket__header,
.rule-strip,
.ticket__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.lottery__topline span,
.ticket__header span,
.ticket__eyebrow {
  color: var(--gold);
  font-size: 0.82rem;
  font-weight: 900;
}

.lottery__topline strong,
.ticket__header strong {
  color: var(--muted);
  font-size: 0.82rem;
}

.wheel-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: min(86vw, 326px);
  height: min(86vw, 326px);
  margin: 12px auto 16px;
}

.wheel-pointer {
  position: absolute;
  top: 2px;
  z-index: 4;
  width: 0;
  height: 0;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  border-top: 28px solid var(--gold);
  filter: drop-shadow(0 5px 5px oklch(0.12 0.05 30 / 0.5));
}

.wheel {
  width: 100%;
  height: 100%;
  padding: 10px;
  border-radius: 999px;
  background:
    linear-gradient(135deg, oklch(0.95 0.09 84), oklch(0.62 0.14 58) 34%, oklch(0.98 0.04 86) 52%, oklch(0.49 0.14 43));
  box-shadow:
    inset 0 0 0 2px oklch(0.98 0.04 86 / 0.42),
    0 18px 42px oklch(0.1 0.04 30 / 0.5);
  transform: rotate(var(--spin, 0deg));
}

.wheel.is-spinning {
  transition: transform 2.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.wheel.is-spinning .wheel__labels span,
.wheel.is-spinning .wheel__center {
  transition: transform 2.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.wheel__plate {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background:
    radial-gradient(circle, oklch(0.98 0.055 86 / 0.26) 0 18%, transparent 19% 100%),
    var(
      --wheel-segments,
      conic-gradient(
        from 0deg,
        oklch(0.54 0.19 31) 0deg 60deg,
        oklch(0.93 0.1 84) 60deg 120deg,
        oklch(0.74 0.17 55) 120deg 180deg,
        oklch(0.48 0.17 29) 180deg 240deg,
        oklch(0.87 0.13 72) 240deg 300deg,
        oklch(0.64 0.19 42) 300deg 360deg
      )
    );
}

.wheel__plate::before {
  position: absolute;
  inset: 0;
  content: "";
  border-radius: inherit;
  background:
    repeating-conic-gradient(
      from 0deg,
      transparent 0 calc(var(--segment-angle, 60deg) - 1.4deg),
      oklch(0.98 0.04 86 / 0.42) calc(var(--segment-angle, 60deg) - 1.4deg) var(--segment-angle, 60deg)
    ),
    radial-gradient(circle, transparent 0 34%, oklch(0.22 0.05 30 / 0.08) 66%, oklch(0.1 0.035 30 / 0.24) 100%);
  pointer-events: none;
}

.wheel__plate::after {
  position: absolute;
  inset: 9px;
  content: "";
  border: 1px solid oklch(0.98 0.045 86 / 0.55);
  border-radius: inherit;
}

.wheel__labels {
  position: absolute;
  inset: 0;
}

.wheel__labels span {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  width: 82px;
  margin-left: -41px;
  flex-direction: column;
  align-items: center;
  color: oklch(0.17 0.065 31);
  font-family: var(--font-display);
  line-height: 1.08;
  text-align: center;
  text-shadow:
    0 1px 0 oklch(0.98 0.035 86 / 0.52),
    0 5px 12px oklch(0.18 0.05 28 / 0.18);
  transform: rotate(var(--angle)) translateY(-106px) rotate(calc(-1 * var(--angle) - var(--spin, 0deg)));
}

.wheel__labels strong {
  font-size: 0.82rem;
  font-weight: 950;
}

.wheel__labels small {
  margin-top: 2px;
  padding: 1px 6px 2px;
  border-radius: 999px;
  background: oklch(0.98 0.035 86 / 0.42);
  color: oklch(0.34 0.12 34);
  font-size: 0.66rem;
  font-weight: 900;
}

.wheel__center {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: grid;
  width: 86px;
  height: 86px;
  place-items: center;
  border: 5px solid oklch(0.96 0.07 83);
  border-radius: 999px;
  background: radial-gradient(circle at 40% 30%, oklch(0.81 0.16 62), var(--red-700) 68%);
  box-shadow: 0 10px 24px oklch(0.1 0.04 30 / 0.42);
  transform: translate(-50%, -50%) rotate(calc(-1 * var(--spin, 0deg)));
}

.wheel__center span {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 1.42rem;
  font-weight: 950;
}

.wheel__center small {
  margin-top: -22px;
  color: oklch(0.96 0.08 84);
  font-size: 0.58rem;
  font-weight: 900;
}

.draw-button {
  display: block;
  width: 100%;
  min-height: 58px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, oklch(0.9 0.15 86), oklch(0.68 0.16 56));
  color: oklch(0.2 0.07 30);
  box-shadow: 0 12px 26px oklch(0.12 0.05 28 / 0.46);
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 950;
}

.draw-button:active {
  transform: translateY(1px);
}

.draw-button:disabled {
  cursor: wait;
  opacity: 0.76;
}

.rule-strip {
  margin-top: 12px;
}

.rule-strip span {
  flex: 1;
  min-width: 0;
  padding: 8px 5px;
  border: 1px solid oklch(0.78 0.12 70 / 0.28);
  border-radius: 999px;
  color: oklch(0.91 0.05 76);
  font-size: 0.76rem;
  font-weight: 800;
  text-align: center;
}

.ticket {
  margin-top: 12px;
  overflow: hidden;
  border: 2px solid var(--red-600);
  border-radius: 8px;
  background: var(--paper);
  color: var(--paper-ink);
  box-shadow: var(--shadow);
}

.ticket[hidden] {
  display: none;
}

.ticket__header {
  padding: 12px 14px;
  background: linear-gradient(90deg, var(--red-700), oklch(0.62 0.18 42));
}

.ticket__header span,
.ticket__header strong {
  color: oklch(0.97 0.04 82);
}

.ticket__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.ticket__body {
  padding: 14px 14px 10px;
}

.ticket__eyebrow {
  color: var(--red-700);
}

.ticket h2 {
  margin: 7px 0 8px;
  color: oklch(0.31 0.11 30);
  font-size: 1.52rem;
  line-height: 1.16;
  letter-spacing: 0;
}

.ticket__value,
.ticket__condition {
  margin: 0;
  font-weight: 850;
  line-height: 1.35;
}

.ticket__value {
  color: var(--red-700);
  font-size: 1.05rem;
}

.ticket__condition {
  margin-top: 5px;
  color: oklch(0.3 0.06 42);
}

.ticket__meta {
  margin: 0 14px;
  padding: 10px 0;
  border-top: 1px dashed oklch(0.56 0.09 42 / 0.42);
  border-bottom: 1px dashed oklch(0.56 0.09 42 / 0.42);
}

.ticket__meta div {
  min-width: 0;
}

.ticket__meta dt {
  color: oklch(0.42 0.065 44);
  font-size: 0.75rem;
  font-weight: 850;
}

.ticket__meta dd {
  margin: 3px 0 0;
  color: oklch(0.26 0.085 31);
  font-size: 1.05rem;
  font-weight: 950;
}

.ticket__rules {
  margin: 0;
  padding: 12px 14px 14px 31px;
  color: oklch(0.31 0.052 42);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.55;
}

.footer-note {
  padding: 15px 6px 0;
  color: oklch(0.78 0.04 68);
  font-size: 0.78rem;
  line-height: 1.45;
  text-align: center;
}

@media (max-width: 374px) {
  .page-shell {
    padding-right: 8px;
    padding-left: 8px;
  }

  h1 {
    font-size: 2.62rem;
  }

  .wheel__labels span {
    width: 70px;
    margin-left: -35px;
    transform: rotate(var(--angle)) translateY(-96px) rotate(calc(-1 * var(--angle) - var(--spin, 0deg)));
  }

  .wheel__labels strong {
    font-size: 0.72rem;
  }

  .wheel__labels small {
    font-size: 0.58rem;
  }

  .ticket h2 {
    font-size: 1.32rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}