* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  color: #ffeccb;
  background: #0b0618;
  overflow-x: hidden;
}

:root{
  --gold:#ffd76a;
  --gold-strong:#ffcb3d;
  --purple:#4b2abf;
  --deep:#0b0618;
  --glass: rgba(255,255,255,0.06);
}

.bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; }
.bg-gradient { position: absolute; inset: -30%; filter: blur(70px); opacity: 0.7; }
.layer1 { background: conic-gradient(from 0deg, #ff3d6e, #6a5cff, #3dfff5, #ffd76a, #ff3d6e); animation: swirl 30s linear infinite; }
.layer2 { background: radial-gradient(circle at 10% 20%, #8b5cf6, transparent 40%), radial-gradient(circle at 90% 30%, #22d3ee, transparent 40%), radial-gradient(circle at 50% 80%, #f59e0b, transparent 40%); mix-blend-mode: screen; animation: pulse 10s ease-in-out infinite; }
.layer3 { background: conic-gradient(from 90deg, #06b6d4, #84cc16, #f97316, #ef4444, #a855f7, #06b6d4); opacity: .45; animation: drift 40s linear infinite reverse; }
.bg-noise { position: absolute; inset:0; background-image: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22100%25%22 height=%22100%25%22><filter id=%22n%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%220.65%22 numOctaves=%222%22 stitchTiles=%22stitch%22/></filter><rect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22 opacity=%220.07%22/></svg>'); mix-blend-mode: soft-light; pointer-events: none; }

@keyframes swirl { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.05);} }
@keyframes drift { to { transform: rotate(-360deg); } }

.site-header {
  padding: 18px 22px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; background: rgba(11,6,24,0.55); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,215,106,0.18);
}
.brand { display:flex; align-items: center; gap:12px; }
.brand h1 { margin:0; font-size: clamp(22px, 3vw, 36px); letter-spacing: 0.5px; font-weight:800; }
.brand .royal { color: var(--gold); text-shadow: 0 0 8px rgba(255,215,106,0.5), 0 0 20px rgba(255,215,106,0.25); }
.crown { width: 36px; height: 36px; filter: drop-shadow(0 0 8px rgba(255,215,106,0.4)); }
.byline a{ color:var(--gold); text-decoration: none; border-bottom: 1px dotted rgba(255,215,106,0.6); }
.container { max-width: 1100px; margin: 40px auto; padding: 0 16px; }

.glass {
  background: var(--glass);
  border: 1px solid rgba(255,215,106,0.18);
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35), inset 0 0 40px rgba(255,215,106,0.06);
}

.wheel-card {
  position: relative;
  padding: 20px;
  display: grid; place-items: center;
}
#wheel, #confetti { width: min(86vw, 800px); height: min(86vw, 800px); }
.confetti-layer{ position:absolute; inset:auto; pointer-events:none; }

.pointer {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  transform: translate(-50%, calc(-50% - min(43vw, 400px) + 18px));
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-bottom: 32px solid var(--gold);
  filter: drop-shadow(0 0 12px rgba(255,215,106,0.9));
}

.wheel-overlay {
  position: absolute; inset: 0;
  display: grid; place-items: end center; padding-bottom: 24px;
  pointer-events: none;
}
.btn-royal {
  pointer-events: auto;
  appearance: none; border: 0; cursor: pointer;
  font-weight: 800; letter-spacing: .5px;
  color: #1a0f02; background: linear-gradient(135deg, #ffe082, #ffd76a, #ffcb3d);
  padding: 14px 22px; border-radius: 999px;
  box-shadow: 0 10px 30px rgba(255,215,106,0.35), inset 0 -4px 0 rgba(0,0,0,0.25);
  transition: transform .1s ease, filter .2s ease;
}
.btn-royal:hover { transform: translateY(-2px); filter: brightness(1.03); }
.btn-royal:active { transform: translateY(1px); }

.status { text-align:center; margin-top: 10px; color: #ffe; opacity: .9; font-size: 14px; text-shadow: 0 2px 8px rgba(0,0,0,.6); }

.legend { margin-top: 26px; padding: 18px; }
.legend h2 { margin: 0 0 10px 0; font-size: 18px; color: var(--gold); }
.slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.slot-chip {
  padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.05); color: #fff; font-weight: 600;
  display:flex; align-items:center; justify-content:center;
  text-shadow: 0 2px 6px rgba(0,0,0,.5);
}

.site-footer { text-align: center; opacity: .8; padding: 30px 12px 60px; }

/* Add sparkle particles */
.wheel-card::before, .wheel-card::after {
  content: ""; position: absolute; inset: -2px;
  background: radial-gradient(circle at 20% 10%, rgba(255,255,255,.13), transparent 30%),
              radial-gradient(circle at 80% 25%, rgba(255,215,106,.12), transparent 35%),
              radial-gradient(circle at 30% 80%, rgba(147,51,234,.12), transparent 40%),
              radial-gradient(circle at 70% 70%, rgba(56,189,248,.12), transparent 40%);
  filter: blur(1px);
  border-radius: 22px; z-index: -1;
}