/* Hallmark · macrostructure: Focused Game Module · tone: mystical premium · anchor hue: teal */
/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4 · scope: Lucky Spin only */

.nexus-spin-section {
  --ls-ink: oklch(11% .035 255);
  --ls-ink-soft: oklch(16% .045 258);
  --ls-gold: oklch(78% .14 84);
  --ls-gold-bright: oklch(90% .13 89);
  --ls-gold-deep: oklch(47% .13 70);
  --ls-teal: oklch(72% .13 192);
  --ls-teal-deep: oklch(37% .11 201);
  --ls-purple: oklch(50% .16 306);
  --ls-purple-deep: oklch(24% .105 306);
  --ls-blue: oklch(35% .1 255);
  --ls-ruby: oklch(34% .11 354);
  --ls-green: oklch(31% .09 178);
  --ls-core: oklch(22% .08 266);
  --ls-highlight: oklch(97% .01 92);
  --ls-sapphire: oklch(70% .12 245);
  --ls-sapphire-bright: oklch(82% .1 231);
  --ls-violet: oklch(72% .13 305);
  --ls-violet-bright: oklch(80% .12 305);
  --ls-ruby-soft: oklch(72% .13 5);
  --ls-ruby-bright: oklch(80% .12 5);
  --ls-text: oklch(94% .035 92);
  --ls-muted: oklch(74% .035 248);
  --ls-rule: oklch(42% .06 235 / .65);
  --ls-focus: oklch(82% .14 193);
  --ls-shadow: oklch(5% .012 255);
  --ls-display: Georgia, "Times New Roman", serif;
  --ls-body: var(--font-body, "Be Vietnam Pro", system-ui, sans-serif);
  --ls-ease-out: cubic-bezier(.16, 1, .3, 1);
  --ls-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ls-dur-short: 180ms;
  background-image:
    radial-gradient(circle at 12% 8%, color-mix(in oklab, var(--ls-teal) 11%, transparent), transparent 25%),
    radial-gradient(circle at 88% 15%, color-mix(in oklab, var(--ls-purple) 15%, transparent), transparent 28%);
  font-family: var(--ls-body);
}

.nexus-spin-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .3;
  background-image:
    radial-gradient(circle at 17% 28%, var(--ls-gold-bright) 0 1px, transparent 1.5px),
    radial-gradient(circle at 73% 24%, var(--ls-teal) 0 1px, transparent 1.5px),
    radial-gradient(circle at 84% 70%, var(--ls-purple) 0 1px, transparent 1.5px),
    radial-gradient(circle at 28% 78%, var(--ls-gold) 0 1px, transparent 1.5px);
  background-size: 167px 151px, 211px 193px, 239px 227px, 181px 173px;
  mask-image: radial-gradient(ellipse at center, black 0 62%, transparent 94%);
}

.nexus-spin-heading h2 {
  font-family: var(--ls-display);
  font-style: normal;
  font-weight: 700;
  letter-spacing: .05em;
  text-shadow: 0 2px 18px color-mix(in oklab, var(--ls-gold) 22%, transparent);
}

.nexus-spin-heading h2::after {
  background: linear-gradient(90deg, var(--ls-gold), color-mix(in oklab, var(--ls-teal) 64%, transparent), transparent);
}

.nexus-spin-wheel-shell {
  width: min(540px, 100%);
  filter: drop-shadow(0 22px 28px color-mix(in oklab, var(--ls-shadow) 60%, transparent));
}

.nexus-spin-wheel-shell::before {
  border-color: color-mix(in oklab, var(--ls-gold-bright) 36%, transparent);
  box-shadow:
    0 0 0 9px color-mix(in oklab, var(--ls-ink) 88%, transparent),
    0 0 0 11px color-mix(in oklab, var(--ls-teal) 20%, transparent),
    inset 0 0 24px color-mix(in oklab, var(--ls-gold) 12%, transparent);
}

.nexus-spin-wheel-shell::after {
  content: "";
  position: absolute;
  inset: -2.5%;
  z-index: 0;
  pointer-events: none;
  border: 1px solid color-mix(in oklab, var(--ls-teal) 42%, transparent);
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, color-mix(in oklab, var(--ls-gold) 60%, transparent) 0 .45deg, transparent .45deg 15deg);
  mask-image: radial-gradient(circle, transparent 0 48%, black 49% 51%, transparent 52%);
}

.nexus-spin-wheel {
  border-width: 14px;
  background:
    conic-gradient(from -22.5deg,
      var(--ls-teal-deep) 0 12.5%, var(--ls-gold-deep) 12.5% 25%, var(--ls-blue) 25% 37.5%,
      color-mix(in oklab, var(--ls-teal-deep) 84%, var(--ls-blue)) 37.5% 50%, var(--ls-purple-deep) 50% 62.5%,
      var(--ls-ruby) 62.5% 75%, var(--ls-green) 75% 87.5%, var(--ls-purple-deep) 87.5% 100%) padding-box,
    linear-gradient(140deg, var(--ls-gold-bright), var(--ls-gold-deep) 24%, var(--ls-gold) 49%, var(--ls-gold-deep) 76%, var(--ls-gold-bright)) border-box;
  box-shadow:
    0 0 0 5px color-mix(in oklab, var(--ls-ink) 94%, transparent),
    0 0 0 8px color-mix(in oklab, var(--ls-gold) 19%, transparent),
    inset 0 0 0 2px color-mix(in oklab, var(--ls-gold-bright) 17%, transparent),
    inset 0 0 42px color-mix(in oklab, var(--ls-shadow) 80%, transparent),
    0 0 38px color-mix(in oklab, var(--ls-teal) 10%, transparent),
    0 0 50px color-mix(in oklab, var(--ls-gold) 11%, transparent);
}

.nexus-spin-wheel::before {
  background: repeating-radial-gradient(circle at 50% 50%, transparent 0 23px, color-mix(in oklab, var(--ls-gold-bright) 6%, transparent) 24px 25px, transparent 26px 50px);
  border-color: color-mix(in oklab, var(--ls-gold-bright) 38%, transparent);
  box-shadow: inset 0 0 0 7px color-mix(in oklab, var(--ls-shadow) 28%, transparent), 0 0 18px color-mix(in oklab, var(--ls-teal) 10%, transparent);
}

.nexus-spin-wheel-bezel {
  opacity: .36;
  background: repeating-conic-gradient(from 0deg, color-mix(in oklab, var(--ls-gold-bright) 34%, transparent) 0 .7deg, transparent .7deg 15deg);
}

.nexus-spin-segment span {
  border-color: color-mix(in oklab, var(--ls-gold) 22%, transparent);
  background: linear-gradient(180deg, color-mix(in oklab, var(--ls-ink-soft) 70%, transparent), color-mix(in oklab, var(--ls-shadow) 24%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--ls-gold-bright) 6%, transparent), 0 5px 10px color-mix(in oklab, var(--ls-shadow) 22%, transparent);
}

.nexus-spin-segment i { color: var(--ls-gold-bright); text-shadow: 0 0 9px color-mix(in oklab, var(--ls-gold) 42%, transparent); }
.nexus-spin-segment--sapphire span { border-color: color-mix(in oklab, var(--ls-sapphire) 54%, transparent); }
.nexus-spin-segment--sapphire i { color: var(--ls-sapphire-bright); }
.nexus-spin-segment--teal span { border-color: color-mix(in oklab, var(--ls-teal) 55%, transparent); }
.nexus-spin-segment--teal i { color: var(--ls-teal); }
.nexus-spin-segment--violet span { border-color: color-mix(in oklab, var(--ls-violet) 55%, transparent); }
.nexus-spin-segment--violet i { color: var(--ls-violet-bright); }
.nexus-spin-segment--ruby span { border-color: color-mix(in oklab, var(--ls-ruby-soft) 52%, transparent); }
.nexus-spin-segment--ruby i { color: var(--ls-ruby-bright); }

.nexus-spin-segment.is-result span {
  border-color: var(--ls-gold-bright);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ls-gold) 42%, transparent), 0 0 26px color-mix(in oklab, var(--ls-gold) 52%, transparent);
  animation: ls-winner-pulse 520ms var(--ls-ease-out) 2;
}

.nexus-spin-wheel-core {
  background:
    radial-gradient(circle at 32% 18%, color-mix(in oklab, var(--ls-teal) 43%, transparent), transparent 24%),
    radial-gradient(circle at 70% 80%, color-mix(in oklab, var(--ls-purple) 48%, transparent), transparent 54%),
    linear-gradient(145deg, var(--ls-core), var(--ls-ink) 74%);
  border-color: var(--ls-gold-bright) !important;
  box-shadow:
    inset 0 0 0 5px color-mix(in oklab, var(--ls-ink) 88%, transparent),
    inset 0 0 24px color-mix(in oklab, var(--ls-teal) 26%, transparent),
    0 0 0 4px color-mix(in oklab, var(--ls-gold) 15%, transparent),
    0 0 25px color-mix(in oklab, var(--ls-purple) 40%, transparent);
}

.nexus-spin-wheel-core i { color: var(--ls-gold-bright); text-shadow: 0 0 13px color-mix(in oklab, var(--ls-teal) 55%, transparent); }
.nexus-spin-wheel-core strong { color: var(--ls-gold-bright); font-family: var(--ls-display); font-weight: 700; letter-spacing: .13em; }
.nexus-spin-wheel-core span { color: color-mix(in oklab, var(--ls-teal) 82%, white); }

.nexus-spin-pointer {
  width: 54px;
  height: 70px;
  filter: drop-shadow(0 7px 9px color-mix(in oklab, var(--ls-shadow) 76%, transparent));
}

.nexus-spin-pointer::before {
  background: linear-gradient(110deg, var(--ls-gold-bright), var(--ls-gold-deep) 52%, var(--ls-gold));
  filter: drop-shadow(0 0 8px color-mix(in oklab, var(--ls-gold) 50%, transparent));
}

.nexus-spin-pointer span {
  width: 17px;
  height: 17px;
  border-color: var(--ls-gold-bright);
  background: var(--ls-purple-deep);
  box-shadow: inset 0 0 0 3px var(--ls-teal-deep), 0 0 12px color-mix(in oklab, var(--ls-teal) 56%, transparent);
}

.nexus-spin-pointer span::before {
  content: "★";
  position: absolute;
  top: -1.15rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--ls-gold-bright);
  font-size: .7rem;
  text-shadow: 0 0 9px color-mix(in oklab, var(--ls-gold) 70%, transparent);
}

.nexus-spin-button {
  min-width: min(300px, 88%);
  min-height: 54px;
  border-color: var(--ls-gold-bright);
  color: var(--ls-ink);
  background: linear-gradient(135deg, var(--ls-gold-bright), var(--ls-gold) 54%, var(--ls-gold-deep));
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--ls-highlight) 72%, transparent), 0 5px 0 var(--ls-gold-deep), 0 12px 26px color-mix(in oklab, var(--ls-shadow) 42%, transparent), 0 0 22px color-mix(in oklab, var(--ls-gold) 20%, transparent);
  font-weight: 900;
  transition: transform var(--ls-dur-short) var(--ls-ease-out), filter var(--ls-dur-short) var(--ls-ease-out), box-shadow var(--ls-dur-short) var(--ls-ease-out);
}

.nexus-spin-button:hover:not(:disabled) { filter: brightness(1.08); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--ls-highlight) 84%, transparent), 0 5px 0 var(--ls-gold-deep), 0 16px 30px color-mix(in oklab, var(--ls-shadow) 52%, transparent), 0 0 30px color-mix(in oklab, var(--ls-gold) 32%, transparent); }
.nexus-spin-button:focus-visible { outline: 3px solid var(--ls-focus); outline-offset: 3px; }
.nexus-spin-button:active:not(:disabled) { transform: translateY(2px); }
.nexus-spin-button[aria-busy="true"] { cursor: wait; }

.nexus-spin-reward-item {
  border-color: color-mix(in oklab, var(--ls-teal) 20%, transparent);
  background: linear-gradient(145deg, color-mix(in oklab, var(--ls-gold) 6%, transparent), color-mix(in oklab, var(--ls-shadow) 22%, transparent));
}
.nexus-spin-reward-item:hover { border-color: color-mix(in oklab, var(--ls-gold) 45%, transparent); }
.nexus-spin-reward-icon { border-color: color-mix(in oklab, var(--ls-gold) 24%, transparent); color: var(--ls-gold); }
.nexus-spin-reward-item strong { color: var(--ls-text); }

@keyframes ls-winner-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .58; } }

@media (max-width: 980px) {
  .nexus-spin-wheel-shell { width: min(540px, 86vw); }
}

@media (max-width: 680px) {
  .nexus-spin-wheel-shell { width: min(370px, 100%); }
  .nexus-spin-pointer { transform: translateX(-50%) scale(.9); transform-origin: top center; }
  .nexus-spin-button { min-width: min(290px, 92%); }
}

@media (prefers-reduced-motion: reduce) {
  .nexus-spin-section::before, .nexus-spin-wheel-core { animation: none; }
  .nexus-spin-button, .nexus-spin-segment.is-result span { transition: none; animation: none; }
}