/* Gift page only: game-show / slot-machine stage.
   The rest of the site (header, footer, rules page) stays calm. */

.gift-intro { padding-bottom: 0.4rem; }
.gift-intro .lede { max-width: 42rem; }

.gift-stage {
  --gift-gold: #e3c36a;
  --gift-gold-dim: #8a6d28;
  --gift-warm: #fff4d4;
  --gift-neon: #3ee0c8;
  --gift-ink: #f7f0de;
  --gift-muted: #c9c0a8;
  --gift-panel: #0a1113;
  position: relative;
  background:
    radial-gradient(ellipse at 50% 30%, #1a2e31 0%, #0a1113 62%, #070b0c 100%);
  border: 3px solid var(--gift-gold);
  border-radius: 28px;
  padding: 1.6rem 1.2rem 1.8rem;
  color: var(--gift-ink);
  box-shadow:
    0 0 0 1px #7a5c1e,
    0 0 28px rgba(227, 195, 106, 0.28),
    0 0 48px rgba(62, 224, 200, 0.12),
    inset 0 0 80px rgba(62, 224, 200, 0.05);
  overflow: hidden;
  margin: 0 0 2rem;
}
.gift-stage h2 {
  font-family: var(--serif);
  color: var(--gift-gold);
  text-align: center;
  margin: 0 0 0.35rem;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  text-shadow: 0 0 18px rgba(227, 195, 106, 0.35);
}
.gift-tagline {
  text-align: center;
  color: var(--gift-muted);
  margin: 0 0 1.2rem;
}

.gift-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
  gap: 1.4rem 1.8rem;
  align-items: start;
}

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

.wheel-frame {
  position: relative;
  width: min(100%, 28rem);
  aspect-ratio: 1;
  margin: 0 auto 1rem;
}

/* Marquee of bulbs — period 0.7s ≈ 1.43 Hz, under the 3 flashes/sec cap. */
.marquee {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.bulb {
  position: absolute;
  width: 0.7rem;
  height: 0.7rem;
  margin: -0.35rem;
  border-radius: 50%;
  background: #3a341c;
  box-shadow: inset 0 0 0 1px rgba(255, 244, 212, 0.2);
  animation: bulb-pulse 0.7s steps(1, end) infinite;
}
.bulb:nth-child(odd) {
  background: var(--gift-gold);
  box-shadow: 0 0 8px rgba(227, 195, 106, 0.85), 0 0 2px var(--gift-warm);
  animation-delay: 0s;
}
.bulb:nth-child(even) {
  background: var(--gift-warm);
  box-shadow: 0 0 8px rgba(255, 244, 212, 0.7);
  animation-delay: -0.35s;
}
@keyframes bulb-pulse {
  0%, 49% { filter: brightness(1.15); opacity: 1; }
  50%, 100% { filter: brightness(0.35); opacity: 0.7; }
}

/* Jackpot: a highlight chases around the ring. Each bulb lights briefly
   as the chase passes — not a full-ring strobe. */
.gift-stage.is-jackpot .bulb {
  animation: none;
  background: #3a341c;
  box-shadow: inset 0 0 0 1px rgba(255, 244, 212, 0.2);
  filter: none;
  opacity: 0.8;
}
.gift-stage.is-jackpot .bulb.is-chase {
  background: var(--gift-gold);
  box-shadow:
    0 0 12px rgba(227, 195, 106, 1),
    0 0 22px rgba(62, 224, 200, 0.6);
  opacity: 1;
}

.pointer {
  position: absolute;
  top: 6%;
  left: 50%;
  z-index: 4;
  width: 0;
  height: 0;
  border-left: 0.55rem solid transparent;
  border-right: 0.55rem solid transparent;
  border-top: 1.15rem solid var(--gift-gold);
  transform: translate(-50%, 0);
  filter: drop-shadow(0 0 6px rgba(227, 195, 106, 0.8));
}

.wheel {
  position: absolute;
  inset: 8.5%;
  border-radius: 50%;
  overflow: hidden;
  background: #111;
  box-shadow:
    0 0 0 6px #1a1408,
    0 0 0 8px var(--gift-gold),
    0 0 22px rgba(62, 224, 200, 0.25);
  transform: rotate(0deg);
  will-change: transform;
}
.wheel svg { width: 100%; height: 100%; display: block; overflow: hidden; }
.wheel text {
  font-family: var(--font);
  font-weight: 700;
  font-size: 11px;
  fill: #f7f0de;
  text-anchor: middle;
  pointer-events: none;
}

.hub {
  position: absolute;
  inset: 36%;
  z-index: 3;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #2a2314, #120e0a 70%);
  border: 3px solid var(--gift-gold);
  box-shadow:
    0 0 16px rgba(227, 195, 106, 0.35),
    inset 0 0 12px rgba(0, 0, 0, 0.4);
}

/* Gift box in the hub */
.gift-box {
  position: relative;
  width: 2.6rem;
  height: 2.2rem;
  transform-style: preserve-3d;
}
.gift-box .body {
  position: absolute;
  inset: 0.7rem 0 0;
  background: linear-gradient(180deg, #b4232c, #7a1218);
  border-radius: 3px;
  box-shadow: inset 0 0 0 2px rgba(227, 195, 106, 0.5);
}
.gift-box .body::before,
.gift-box .ribbon {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 0.35rem;
  background: var(--gift-gold);
  transform: translateX(-50%);
}
.gift-box .lid {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0.8rem;
  background: linear-gradient(180deg, #d12a34, #9a1820);
  border-radius: 3px 3px 1px 1px;
  transform-origin: left bottom;
  box-shadow: inset 0 0 0 2px rgba(227, 195, 106, 0.5);
  transition: transform 0.7s ease;
  z-index: 1;
}
.gift-box .lid::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -0.45rem;
  width: 0.7rem;
  height: 0.55rem;
  border: 0.22rem solid var(--gift-gold);
  border-radius: 50%;
  border-bottom-color: transparent;
  border-left-color: transparent;
  transform: translateX(-50%) rotate(-45deg);
}
.gift-box .lid-ribbon {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 0.35rem;
  background: var(--gift-gold);
  transform: translateX(-50%);
}
.gift-stage.is-jackpot .gift-box .lid,
.gift-box.is-open .lid {
  transform: rotate(-110deg) translate(-2px, -4px);
}
.gift-stage.is-jackpot .hub,
.gift-box.is-open {
  box-shadow:
    0 0 22px rgba(227, 195, 106, 0.7),
    0 0 28px rgba(62, 224, 200, 0.3),
    inset 0 0 12px rgba(0, 0, 0, 0.4);
}
.gift-burst {
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227, 195, 106, 0.55) 0%, rgba(62, 224, 200, 0.15) 40%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.gift-stage.is-jackpot .gift-burst {
  animation: gold-burst 1.2s ease-out 1;
}
@keyframes gold-burst {
  0% { opacity: 0; transform: scale(0.4); }
  35% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 0; transform: scale(1.6); }
}

.confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

.wheel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
  justify-content: center;
  margin: 0.2rem 0 0.7rem;
}
.btn-spin {
  background: linear-gradient(180deg, #f0d27a, #c9a24a);
  color: #1a1204 !important;
  border-color: #f5e2a6;
  font-weight: 700;
  min-width: 12rem;
  box-shadow: 0 0 16px rgba(227, 195, 106, 0.4);
}
.btn-spin:hover { background: linear-gradient(180deg, #ffe7a0, #e3c36a); color: #1a1204 !important; }
.btn-spin:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  background: #4a4330;
  color: #e8d9a8 !important;
  border-color: #6a5c38;
}
.sound-toggle {
  background: transparent;
  color: var(--gift-ink) !important;
  border-color: rgba(227, 195, 106, 0.45);
  font-size: 0.9rem;
}
.sound-toggle:hover { background: rgba(227, 195, 106, 0.1); color: var(--gift-ink) !important; }
.sound-toggle[aria-pressed="true"] {
  border-color: var(--gift-neon);
  box-shadow: 0 0 8px rgba(62, 224, 200, 0.35);
}

.gift-legal {
  text-align: center;
  font-size: 0.88rem;
  color: var(--gift-muted);
  max-width: 32rem;
  margin: 0 auto 0.4rem;
}
.gift-legal a { color: var(--gift-gold); }

.gift-form-panel,
.gift-odds,
.gift-result {
  background: rgba(8, 12, 14, 0.55);
  border: 1px solid rgba(227, 195, 106, 0.28);
  border-radius: 16px;
  padding: 1rem 1.05rem 1.1rem;
}
.gift-form-panel h3,
.gift-odds h3 {
  font-family: var(--serif);
  color: var(--gift-gold);
  font-size: 1.15rem;
  margin: 0 0 0.5rem;
}
.gift-form-panel label,
.gift-form-panel .checkbox { color: var(--gift-ink); }
.gift-form-panel input[type="email"] {
  background: #10181a;
  color: var(--gift-ink);
  border-color: rgba(227, 195, 106, 0.35);
}
.gift-form-panel .hint,
.gift-form-panel .tiny { color: var(--gift-muted); }
.gift-form-panel a { color: var(--gift-gold); }
.gift-form-panel .form-status {
  background: rgba(62, 224, 200, 0.12);
  color: var(--gift-ink);
}
.gift-form-panel .form-status.is-error { background: rgba(180, 50, 50, 0.25); color: #ffd4d4; }

.gift-odds { overflow-x: visible; min-width: 0; }
.gift-odds table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.86rem;
}
.gift-odds th, .gift-odds td {
  text-align: left;
  padding: 0.4rem 0.35rem 0.4rem 0;
  border-bottom: 1px solid rgba(227, 195, 106, 0.15);
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.gift-odds th { color: var(--gift-gold); font-weight: 650; }
.gift-odds th:nth-child(1),
.gift-odds td:nth-child(1) { width: auto; }
.gift-odds th:nth-child(2),
.gift-odds td:nth-child(2) { width: 5.6rem; }
.gift-odds th:nth-child(3),
.gift-odds td:nth-child(3) { width: 4.2rem; }
.gift-odds-prize {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.4rem;
}
.gift-odds-pct {
  flex: 0 0 auto;
  white-space: nowrap;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gift-gold);
}
.gift-odds .tiny { margin: 0.5rem 0 0; color: var(--gift-muted); }

.gift-result {
  margin-top: 0.9rem;
  text-align: center;
  min-height: 4rem;
}
.gift-result[hidden] { display: none !important; }
.gift-result .kicker { color: var(--gift-gold); }
.gift-result h3 { color: var(--gift-gold); margin-bottom: 0.35rem; }
.gift-result.is-jackpot-copy {
  border-color: var(--gift-gold);
  box-shadow: 0 0 22px rgba(227, 195, 106, 0.3), 0 0 18px rgba(62, 224, 200, 0.12);
}
.gift-result .jackpot-word {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: 0.08em;
  color: var(--gift-gold);
  text-shadow: 0 0 18px rgba(227, 195, 106, 0.7);
  margin: 0 0 0.3rem;
}
.gift-result.is-calm {
  border-color: rgba(201, 192, 168, 0.3);
  box-shadow: none;
}
.gift-result.is-calm h3 { color: var(--gift-ink); }
.gift-result p { margin: 0.35rem 0; color: var(--gift-ink); }
.gift-result .tiny { color: var(--gift-muted); }

.gift-stage.is-win-lite {
  box-shadow:
    0 0 0 1px #7a5c1e,
    0 0 28px rgba(227, 195, 106, 0.4),
    0 0 36px rgba(62, 224, 200, 0.16),
    inset 0 0 80px rgba(227, 195, 106, 0.06);
}

@media (max-width: 840px) {
  .gift-layout { grid-template-columns: 1fr; }
  .gift-stage { padding: 1.15rem 0.8rem 1.3rem; border-radius: 20px; }
  .wheel-frame { width: min(100%, 20.5rem); }
  .gift-odds thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .gift-odds table { table-layout: auto; }
  .gift-odds tbody tr {
    display: block;
    padding: 0.55rem 0 0.45rem;
    border-bottom: 1px solid rgba(227, 195, 106, 0.15);
  }
  .gift-odds tbody tr:last-child { border-bottom: 0; }
  .gift-odds th,
  .gift-odds td,
  .gift-odds th:nth-child(1),
  .gift-odds td:nth-child(1),
  .gift-odds th:nth-child(2),
  .gift-odds td:nth-child(2),
  .gift-odds th:nth-child(3),
  .gift-odds td:nth-child(3) {
    display: block;
    width: 100%;
    border: 0;
    padding: 0.08rem 0;
    overflow-wrap: break-word;
    word-break: normal;
  }
  .gift-odds td[data-label]::before {
    content: attr(data-label) ": ";
    color: var(--gift-gold);
    font-weight: 650;
  }
  .gift-odds-pct { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bulb { animation: none !important; }
  .bulb:nth-child(odd) { background: var(--gift-gold); opacity: 1; filter: none; }
  .bulb:nth-child(even) { background: var(--gift-warm); opacity: 1; filter: none; }
  .wheel { transition: none !important; }
  .gift-box .lid { transition: opacity 0.4s ease, transform 0.4s ease; }
  .gift-stage.is-jackpot .gift-burst { animation: none; opacity: 0.5; }
}