:root {
  --bg1: #1a0f2e;
  --bg2: #2b1055;
  --accent: #ffd23f;
  --pink: #ff4d94;
  --text: #fff6ff;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 20% 0%, #4a1f8f 0%, transparent 45%),
    radial-gradient(circle at 85% 10%, #ff4d9440 0%, transparent 40%),
    radial-gradient(circle at 50% 100%, #ffb34733 0%, transparent 55%),
    linear-gradient(160deg, var(--bg1), var(--bg2) 60%, #120a22);
  min-height: 100vh;
  overflow-x: hidden;
}
body::before, body::after {
  content: "🎁";
  position: fixed;
  font-size: 42px;
  opacity: .18;
  filter: blur(.3px);
  pointer-events: none;
}
body::before { top: 8%; left: 6%; transform: rotate(-12deg); }
body::after { bottom: 10%; right: 7%; transform: rotate(14deg); }
main { max-width: 620px; margin: 0 auto; padding: 22px 18px 36px; text-align: center; }
header { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 0 22px; }
header h1 { font-size: 30px; margin: 0; letter-spacing: .5px; text-shadow: 0 3px 16px #ff4d9466; }
.spark { color: var(--accent); font-size: 26px; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.25); opacity: 1; } }

.wheel-zone { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.wheel-wrap { position: relative; width: min(86vw, 380px); aspect-ratio: 1; }
.wheel-wrap::before { content: ''; position: absolute; z-index: -1; left: 50%; bottom: -5%; transform: translateX(-50%); width: 98%; height: 28%; border-radius: 50%; background: radial-gradient(ellipse at center, #ff8fb066, #ff5c9e22 60%, transparent 78%); filter: blur(7px); }
.pointer {
  position: absolute; top: -8px; left: 50%; z-index: 3;
  width: 30px; height: 30px; border-radius: 7px;
  transform: translateX(-50%) rotate(45deg);
  background: linear-gradient(135deg, #ff6a8f, #e11d48 70%);
  border: 2px solid #fff4f8;
  box-shadow: 0 6px 14px #0009, 0 0 18px #ff2d6faa, inset 0 3px 6px #ffffff88;
}
.hub {
  position: absolute; inset: 0; margin: auto; width: 27%; height: 27%;
  display: grid; place-items: center; z-index: 2;
  border-radius: 50%; font-size: 26px; color: #fff;
  background: radial-gradient(circle at 38% 28%, #ffd0e0 0%, #ff5c9e 42%, #d81b60 100%);
  box-shadow: 0 0 0 7px #ffffff2e, 0 0 0 9px #ff5c9e66, 0 10px 26px #0009, inset 0 -6px 14px #a5003a66, inset 0 5px 10px #ffffff88;
}
#wheel {
  width: 100%; height: 100%; display: block;
  border-radius: 50%;
  transition: transform 4.2s cubic-bezier(.15, .9, .25, 1);
  filter: drop-shadow(0 0 22px #ff4d9466) drop-shadow(0 12px 26px #0008);
  transform: rotate(0deg);
}
#wheel .win-label { fill: #ffffff; stroke: #00000066; stroke-width: 2.4px; paint-order: stroke; font-weight: 800; font-family: system-ui, sans-serif; }

.spin {
  padding: 16px 54px; border: 0; border-radius: 999px; cursor: pointer;
  font-size: 19px; font-weight: 800; letter-spacing: 2px; color: #3a1000;
  background: linear-gradient(180deg, #ffe066, var(--accent));
  box-shadow: 0 8px 0 #b8860b, 0 14px 30px #0008;
  transition: transform .12s ease, box-shadow .12s ease;
}
.spin:active { transform: translateY(4px); box-shadow: 0 4px 0 #b8860b, 0 8px 18px #0008; }
.spin:disabled { opacity: .6; cursor: default; }

dialog {
  border: 0; border-radius: 22px; padding: 26px 22px; max-width: 420px; width: calc(100% - 32px);
  background: linear-gradient(165deg, #2c1b4f, #1b1233); color: var(--text);
  box-shadow: 0 24px 60px #000a, 0 0 0 1px #ffffff1a; text-align: center;
}
dialog::backdrop { background: #0a0614cc; backdrop-filter: blur(3px); }
dialog h2 { margin: 0 0 10px; font-size: 22px; }
dialog p { color: #d9cff0; line-height: 1.45; }
dialog .close { position: absolute; top: 10px; right: 14px; background: none; border: 0; color: #b9aede; font-size: 26px; cursor: pointer; }
.modal-channels { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.channel { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #ffffff0f; text-align: left; }
.tag { display: inline-block; padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; text-decoration: none; background: #c8ff48; color: #17260a; white-space: nowrap; }
a.tag { background: #ff5c83; color: #fff; }
.modal-error { color: #ff9fbd; min-height: 18px; font-size: 14px; }
.ghost { margin-top: 12px; padding: 13px 20px; border: 0; border-radius: 14px; cursor: pointer; font-size: 15px; font-weight: 700; color: var(--text); background: #ffffff1c; }
#code { display: block; margin: 14px auto; padding: 14px; border-radius: 14px; background: #00000044; font-size: 20px; letter-spacing: 2px; word-break: break-all; color: var(--accent); }
#promo { margin: 16px 0 4px; padding: 14px; border-radius: 16px; background: #ffffff0f; }
#promo img { width: 100%; border-radius: 12px; margin-bottom: 10px; }
#promo a.ghost { display: inline-block; text-decoration: none; }
#preview-banner { margin: 0 auto 14px; padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #1c1030; background: linear-gradient(180deg, #ffe066, var(--accent)); box-shadow: 0 6px 18px #0006; }