/* Spin & Win page. Loaded only by /spin so the rest of the site stays lean.
   Brand tokens (--blue, --gold, --ink, ...) come from styles.css. */

.spin-page main { display: block; }

/* Brand blue (#007aff, Pantone 2925 C) sits at 4.02:1 on white — fine for
   large text, short of the 4.5:1 that normal-size text needs. This is the
   same hue a few points darker (5.8:1), used ONLY where small text sits on or
   in blue. The brand token itself is left alone. */
:root { --blue-text: #0062cc; }

/* ── Hero ───────────────────────────────────────────────────────────── */

.spin-hero {
  padding: 48px 0 64px;
  background:
    radial-gradient(1100px 520px at 12% -10%, rgba(0, 122, 255, .16), transparent 60%),
    radial-gradient(900px 460px at 105% 15%, rgba(255, 206, 0, .22), transparent 62%),
    var(--bg);
}

/* The wheel spans both rows on the left; the intro and the form stack on the
   right. On a phone the same three areas fall into reading order. */
.spin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "wheel intro"
    "wheel form";
  gap: 28px 48px;
  align-items: center;
}

.spin-intro { grid-area: intro; align-self: end; }
.wheel-col  { grid-area: wheel; }
.spin-copy  { grid-area: form; align-self: start; }

.spin-intro h1 {
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 10px 0 14px;
}

.spin-intro h1 em {
  font-style: normal;
  color: var(--blue);
}

.spin-intro .lead {
  font-size: 1.06rem;
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0 0 26px;
}

/* ── Wheel ──────────────────────────────────────────────────────────── */

.wheel-col { display: flex; flex-direction: column; align-items: center; }

.wheel-stage {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1 / 1;      /* reserves the box so nothing jumps when JS draws */
}

.wheel-mount, .wheel-svg { width: 100%; height: 100%; display: block; }

.wheel-svg { overflow: visible; }

/* The spinning group. Transitions are set from JS so the duration and easing
   can change between a real spin and the reduced-motion version. */
#wheel-rotor { transform-origin: 200px 200px; }

.wheel-seg { stroke: #ffffff; stroke-width: 2; }

/* Segment fill uses the accessible blue: the second label line is 15px, which
   never qualifies as large text, so it needs the full 4.5:1 against it. */

.wheel-label {
  font-family: Poppins, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: .01em;
  pointer-events: none;
}

.wheel-label.l1 { font-size: 19px; }
.wheel-label.l2 { font-size: 15px; font-weight: 600; }

.wheel-bulb { fill: var(--gold); }

.wheel-hub-ring { fill: none; stroke: var(--gold); stroke-width: 5; }
.wheel-hub { fill: #fff; filter: drop-shadow(0 6px 14px rgba(0, 60, 130, .35)); }
.wheel-hub-text {
  font-family: Poppins, system-ui, sans-serif;
  font-weight: 800;
  font-size: 26px;
  fill: var(--blue);
  letter-spacing: .04em;
}

.wheel-pointer {
  fill: var(--ink);
  stroke: var(--gold);
  stroke-width: 3;
  stroke-linejoin: round;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .3));
}

/* Gentle breathing while the wheel is waiting to be used. */
.wheel-stage.is-idle .wheel-svg { animation: wheelIdle 4.5s ease-in-out infinite; }
@keyframes wheelIdle {
  0%, 100% { transform: scale(1) }
  50%      { transform: scale(1.015) }
}
.wheel-stage.is-spinning .wheel-svg { animation: none; }

.wheel-caption {
  margin: 18px 0 0;
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-align: center;
  min-height: 1.4em;
}

.wheel-noscript {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  text-align: center;
  padding: 24px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ── Form ───────────────────────────────────────────────────────────── */

.spin-form {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px;
  display: grid;
  gap: 16px;
}

.spin-form .field { display: grid; gap: 6px; }

.spin-form label {
  font-weight: 600;
  font-size: .92rem;
  color: var(--ink);
}

.spin-form input[type="text"],
.spin-form input[type="tel"] {
  font: inherit;
  padding: 13px 14px;
  border: 2px solid #dbe3ee;
  border-radius: 12px;
  background: #fbfcfe;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.spin-form input:focus-visible {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(0, 122, 255, .18);
}

.spin-form input[aria-invalid="true"] { border-color: #d92b2b; background: #fff6f6; }

.field-hint { margin: 0; font-size: .82rem; color: var(--ink-soft); }
.field-err  { margin: 0; font-size: .84rem; font-weight: 600; color: #d92b2b; }

.btn-spin {
  width: 100%;
  justify-content: center;
  font-size: 1.05rem;
  padding: 15px 20px;
}

.btn-spin[disabled] { opacity: .55; cursor: not-allowed; pointer-events: none; }

.btn-spin.is-busy .btn-spin-label::after {
  content: "";
  display: inline-block;
  width: 14px; height: 14px;
  margin-left: 10px;
  vertical-align: -2px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btnSpin .7s linear infinite;
}
@keyframes btnSpin { to { transform: rotate(360deg) } }

.form-note {
  margin: 0;
  font-size: .9rem;
  font-weight: 600;
  min-height: 1.2em;
  color: var(--ink-soft);
}
.form-note.is-error { color: #d92b2b; }
.form-note.is-good  { color: #0a8a3f; }

.fine {
  margin: 16px 2px 0;
  font-size: .8rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ── Prize bag ──────────────────────────────────────────────────────── */

.prize-bag { padding: 64px 0; background: var(--white); }

/* Eight prizes, so break 4+4 rather than letting auto-fit strand a row of 3. */
.prize-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 34px;
}

@media (max-width: 1040px) { .prize-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .prize-grid { grid-template-columns: 1fr; } }

.prize-item {
  border: 2px solid #e6ecf5;
  border-radius: var(--radius);
  padding: 22px 18px;
  text-align: center;
  background: var(--bg);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.prize-item:hover {
  transform: translateY(-3px);
  border-color: var(--blue);
  box-shadow: var(--shadow);
}

.prize-item .pi-icon { font-size: 2rem; line-height: 1; }

.prize-item .pi-name {
  display: block;
  margin: 12px 0 6px;
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--ink);
}

.prize-item .pi-desc {
  margin: 0;
  font-size: .86rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

.prize-item.is-grand {
  border-color: var(--gold);
  background: linear-gradient(180deg, var(--gold-soft), var(--white));
}

.prize-item .pi-tag {
  display: inline-block;
  margin-top: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--gold);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ── How it works / rules ───────────────────────────────────────────── */

.spin-how { padding: 64px 0; background: var(--bg); }

.spin-how .steps-3 .step {
  background: var(--white);
  border-radius: var(--radius);
  padding: 26px 22px;
  box-shadow: var(--shadow);
}

.spin-how .steps-3 h3 { margin: 12px 0 8px; font-size: 1.1rem; }
.spin-how .steps-3 p  { margin: 0; color: var(--ink-soft); font-size: .93rem; line-height: 1.6; }

.how-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 34px;
}

.spin-rules { padding: 52px 0 72px; background: var(--white); }
.spin-rules h2 { font-size: 1.35rem; margin: 0 0 18px; }
.spin-rules ul { margin: 0; padding-left: 20px; max-width: 78ch; }
.spin-rules li { font-size: .88rem; line-height: 1.75; color: var(--ink-soft); }

/* ── Prize modal ────────────────────────────────────────────────────── */

.prize-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.prize-modal[hidden] { display: none; }

.prize-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 20, 44, .62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: fadeIn .25s ease both;
}

.prize-card {
  position: relative;
  z-index: 2;
  width: min(460px, 100%);
  /* 100vh on iOS is the LARGE viewport, so `calc(100vh - 40px)` can exceed
     the actually-visible height and push the Done button off-screen while the
     address bar is expanded. The parent is inset:0 with 20px padding, so
     100% is both simpler and correct. */
  max-height: 100%;
  overflow-y: auto;
  background: var(--white);
  border-radius: 24px;
  padding: 34px 28px 28px;
  text-align: center;
  box-shadow: 0 40px 80px -20px rgba(0, 40, 90, .55);
  animation: popIn .38s cubic-bezier(.2, .9, .3, 1.25) both;
}

@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes popIn  { from { opacity: 0; transform: translateY(18px) scale(.94) } to { opacity: 1; transform: none } }

.prize-close {
  position: absolute;
  top: 10px; right: 14px;
  width: 36px; height: 36px;
  border: 0;
  background: transparent;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: 50%;
}
.prize-close:hover { background: var(--bg); color: var(--ink); }

.prize-burst { font-size: 2.6rem; line-height: 1; }

.prize-kicker {
  margin: 10px 0 2px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.prize-title {
  margin: 0 0 8px;
  font-size: clamp(1.5rem, 5.5vw, 2rem);
  line-height: 1.15;
  color: var(--blue);
}

.prize-sub { margin: 0 0 22px; color: var(--ink-soft); font-size: .95rem; line-height: 1.6; }

.prize-code-box {
  background: var(--bg);
  border: 2px dashed var(--blue);
  border-radius: 16px;
  padding: 16px;
  display: grid;
  gap: 8px;
  justify-items: center;
}

.prize-code-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.prize-code {
  font-size: clamp(1.4rem, 6vw, 1.85rem);
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}

.prize-copy {
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  padding: 7px 16px;
  border: 2px solid var(--blue-text);
  border-radius: 999px;
  background: transparent;
  color: var(--blue-text);
  cursor: pointer;
}

.recall-btn { margin-top: 10px; }
.prize-copy:hover { background: var(--blue); color: #fff; }

.prize-expiry { margin: 14px 0 0; font-size: .84rem; font-weight: 600; color: var(--ink-soft); }
.prize-howto  { margin: 6px 0 22px; font-size: .84rem; line-height: 1.6; color: var(--ink-soft); }

.prize-actions { display: grid; gap: 10px; }
.prize-actions .btn { justify-content: center; width: 100%; }

/* width/height are NOT optional here. <canvas> is a replaced element, so
   `inset: 0` alone leaves it at its intrinsic 300x150 — the confetti then
   fires off the top of a small box pinned to the corner. Worse, spin.js sizes
   the backing store from getBoundingClientRect() * dpr, which on a
   default-sized canvas feeds back into the layout size and DOUBLES it on
   every open (300x150 -> 600x300 -> 1200x600 ...). Six re-opens reached a
   ~700MB backing store and killed the tab. */
.confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .spin-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "intro" "wheel" "form";
    gap: 28px;
  }
  .spin-intro { align-self: auto; text-align: center; }
  .spin-intro .lead { margin-left: auto; margin-right: auto; }
  .spin-hero { padding: 32px 0 48px; }
  .wheel-stage { max-width: 400px; }
}

@media (max-width: 560px) {
  .wheel-stage { max-width: min(92vw, 340px); }
  .spin-form { padding: 20px 18px; }
  .prize-card { padding: 28px 20px 22px; }
  .how-cta .btn { width: 100%; justify-content: center; }
}

/* Leave room for the fixed mobile call/directions bar. */
@media (max-width: 760px) {
  .spin-rules { padding-bottom: 110px; }
}

@media (prefers-reduced-motion: reduce) {
  .wheel-stage.is-idle .wheel-svg { animation: none; }
  .prize-card, .prize-modal-backdrop { animation: none; }
  .prize-item { transition: none; }
}

/* The homepage banner sends everyone here, not just the winner, so most
   visitors land with no code. This is their way forward. */
.no-code {
  margin: 16px 2px 0;
  font-size: .9rem;
  line-height: 1.6;
  font-weight: 600;
  color: var(--ink);
}
.no-code a { color: var(--blue-text); text-decoration: underline; text-underline-offset: 2px; }
.no-code a:hover { color: var(--ink); }