:root {
  --bg: #0d0f1a;
  --fg: #f4f4f4;
  --accent: #00e5ff;
  --accent-2: #ff00e5;
  --yes: #18c964;
  --no: #ff3b3b;
  --annoy-scroll: 60px; /* extra scroll area on all sides */
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Orbitron', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
  background: radial-gradient(1200px 800px at 50% 10%, #14172a 0%, var(--bg) 60%);
  color: var(--fg);
  display: block;
}

/* Global rave mode toggled during spins */
.rave-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: hue;
  background: radial-gradient(circle at 30% 20%, rgba(255,0,229,0.25), transparent 40%),
              radial-gradient(circle at 70% 80%, rgba(0,229,255,0.25), transparent 40%),
              linear-gradient(90deg, rgba(255,0,229,0.18), rgba(0,229,255,0.18), rgba(255,234,0,0.18));
  opacity: 0;
  transition: opacity 600ms ease;
  z-index: 998;
}

.rave .rave-layer { opacity: 1; animation: rave-hue 6s linear infinite; }

@keyframes rave-hue { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }

.header {
  background: repeating-linear-gradient(90deg,
    #ff004c 0 16px,
    #ff7a00 16px 32px,
    #ffe600 32px 48px,
    #00d12a 48px 64px,
    #00c2ff 64px 80px,
    #5a00ff 80px 96px,
    #ff00e5 96px 112px
  );
  background-size: 400% 100%;
  animation: rainbow-pan 6s linear infinite;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

@keyframes rainbow-pan {
  0% { background-position: 0% 0; }
  100% { background-position: 100% 0; }
}

.marquee-wrap {
  padding: 6px 0;
}

.marquee-text {
  font-family: 'Press Start 2P', monospace;
  color: #fff;
  text-shadow: 0 0 6px rgba(0,229,255,0.6), 0 0 12px rgba(255,0,229,0.3);
  display: inline-block;
  animation: bounce 1.2s ease-in-out infinite alternate, hue 8s linear infinite;
}

@keyframes bounce {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-6px) scale(1.02); }
}

@keyframes hue {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

.main { flex: 1; width: 100%; margin: 0 auto; padding: 0; }
.layout { display: flex; align-items: stretch; justify-content: center; gap: 0; width: 100%; min-height: 100vh; }

.gutter {
  flex: 1 1 20vw;
  min-width: 120px;
  background-color: #101010;
  /* 90s-style obnoxious pattern: neon zig-zags and dots */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Crect width='120' height='120' fill='none'/%3E%3Cg fill='none' stroke='%23ff00e5' stroke-width='3' opacity='.6'%3E%3Cpolygon points='15,35 35,35 25,15'/%3E%3Cpolygon points='55,75 75,75 65,55'/%3E%3C/g%3E%3Crect x='70' y='10' width='20' height='20' fill='none' stroke='%2300e5ff' stroke-width='3' opacity='.6'/%3E%3Cg stroke='%23ffd400' stroke-width='3' opacity='.65'%3E%3Cline x1='20' y1='90' x2='40' y2='90'/%3E%3Cline x1='30' y1='80' x2='30' y2='100'/%3E%3C/g%3E%3Cg stroke='%2300ff84' stroke-width='3' transform='rotate(45 90 90)' opacity='.5'%3E%3Cline x1='80' y1='90' x2='100' y2='90'/%3E%3Cline x1='90' y1='80' x2='90' y2='100'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Crect x='12' y='18' width='86' height='14' rx='7' fill='%2300ffa8' opacity='.45' transform='rotate(20 55 25)'/%3E%3Crect x='50' y='110' width='70' height='12' rx='6' fill='%23ffd400' opacity='.42' transform='rotate(-15 85 116)'/%3E%3Crect x='100' y='50' width='64' height='10' rx='5' fill='%23ff5ea2' opacity='.5' transform='rotate(35 132 55)'/%3E%3C/svg%3E"),
    radial-gradient(circle at 20% 30%, rgba(255,0,229,0.4) 0 6px, transparent 7px),
    radial-gradient(circle at 70% 60%, rgba(0,229,255,0.35) 0 6px, transparent 7px),
    repeating-linear-gradient(135deg,
      rgba(0,0,0,0) 0 18px,
      rgba(255,255,255,0.08) 18px 20px,
      rgba(0,0,0,0) 20px 40px
    );
  background-size: 120px 120px, 160px 160px, 120px 120px, 140px 140px, 24px 24px;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
  animation: gutter-scroll 10s linear infinite;
}

@keyframes gutter-scroll {
  0% {
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
  }
  100% {
    background-position: 160px 160px, -160px 120px, 120px 120px, 140px 140px, 60px 60px;
  }
}

.app {
  flex: 0 1 980px;
  padding: 24px 16px 48px;
}

.page { display: flex; flex-direction: column; min-height: 100vh; width: 100%; max-width: 1100px; position: relative; }

/* Tiny extra scroll region in all directions to be mildly annoying */
.page::after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--annoy-scroll));
  left: calc(-1 * var(--annoy-scroll));
  right: calc(-1 * var(--annoy-scroll));
  bottom: calc(-1 * var(--annoy-scroll));
  pointer-events: none;
}

/* CRT scanlines + flicker overlay */
.page::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,0.02), rgba(0,0,0,0.02)),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0 2px, transparent 2px 4px);
  mix-blend-mode: overlay;
  opacity: 0.35;
  animation: vhs-flicker 1.8s steps(2, end) infinite;
}

@keyframes vhs-flicker {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.45; }
}

.title {
  text-align: center;
  font-size: clamp(28px, 6vw, 56px);
  margin: 12px 0 0;
  letter-spacing: 1px;
  text-shadow:
    0 0 6px rgba(255,0,229,0.5),
    0 0 12px rgba(0,229,255,0.55),
    0 0 28px rgba(90,0,255,0.45);
  animation: glow-pulse 1.25s ease-in-out infinite alternate;
}

@keyframes glow-pulse {
  0% { filter: saturate(1) brightness(1); }
  100% { filter: saturate(1.4) brightness(1.15); }
}

.subtitle {
  text-align: center;
  opacity: 0.85;
  margin: 8px 0 24px;
}

.wheel-section { text-align: center; }

.wheel-container {
  position: relative;
  width: min(90vw, 520px);
  height: min(90vw, 520px);
  margin: 0 auto 16px;
}

.wheel-container::before {
  content: '';
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(255,0,229,0.4), rgba(0,229,255,0.4), rgba(255,234,0,0.35), rgba(24,201,100,0.35), rgba(90,0,255,0.35), rgba(255,0,229,0.4)
  );
  filter: blur(16px) saturate(1.2);
  z-index: 0;
  animation: ring-spin 10s linear infinite;
}

@keyframes ring-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 10px solid rgba(255,255,255,0.15);
  background: conic-gradient(
    var(--yes) 0deg 30deg, var(--no) 30deg 60deg,
    var(--yes) 60deg 90deg, var(--no) 90deg 120deg,
    var(--yes) 120deg 150deg, var(--no) 150deg 180deg,
    var(--yes) 180deg 210deg, var(--no) 210deg 240deg,
    var(--yes) 240deg 270deg, var(--no) 270deg 300deg,
    var(--yes) 300deg 330deg, var(--no) 330deg 360deg
  );
  box-shadow:
    inset 0 0 40px rgba(0,0,0,0.65),
    0 20px 60px rgba(0,0,0,0.5),
    0 0 0 4px rgba(0,229,255,0.15);
  cursor: pointer;
  transition: filter 120ms ease;
  position: relative;
}

.wheel.blur {
  filter: blur(2px) saturate(1.2) brightness(1.05);
}

.wheel.all-yes {
  box-shadow:
    inset 0 0 60px rgba(24, 201, 100, 0.6),
    0 20px 60px rgba(0,0,0,0.5),
    0 0 0 4px rgba(24, 201, 100, 0.25);
}

/* Green overlay used to crossfade to all-YES when cheat triggers */
.wheel::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--yes) 0deg 360deg);
  opacity: 0;
  transition: opacity 2000ms cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
  z-index: 1; /* green morph overlay */
}

.wheel.morph-yes::after {
  opacity: 1;
}

/* Thin black separators between wedges, kept above green overlay */
.wheel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(
    rgba(0,0,0,0.85) 0deg 1deg,
    transparent 1deg 30deg
  );
  pointer-events: none;
  z-index: 2; /* above ::after, below labels */
}

/* Labels SVG fade utility */
.wheel-labels { transition: opacity 200ms ease; position: absolute; inset: 0; z-index: 3; }

.pointer {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 28px;
  color: var(--accent);
  text-shadow: 0 0 8px rgba(0,229,255,0.75);
}

.controls { display: flex; gap: 12px; justify-content: center; margin-bottom: 8px; }

.btn {
  background: linear-gradient(90deg, rgba(255,0,229,0.35), rgba(0,229,255,0.35), rgba(255,234,0,0.35));
  background-size: 300% 100%;
  animation: btn-pan 2s linear infinite;
  color: var(--fg);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(255,0,229,0.35), inset 0 0 12px rgba(0,229,255,0.2);
}

.btn:hover { border-color: rgba(255,255,255,0.45); }
.btn:active { transform: translateY(1px); }

.btn-outline {
  background: transparent;
}

@keyframes btn-pan { 0% { background-position: 0% 0; } 100% { background-position: 100% 0; } }

.result {
  min-height: 28px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.footer {
  padding: 16px;
  text-align: center;
  opacity: 0.7;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* Responsive tweaks */
@media (max-width: 520px) {
  .pointer { top: -14px; font-size: 22px; }
  .result { font-size: 18px; }
}

/* Fake popup promo (avoid adblock keywords) */
.promo-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(2px);
  z-index: 999;
}

.promo-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: min(92vw, 560px);
  border-radius: 14px;
  background: radial-gradient(circle at 30% -10%, rgba(255,0,229,0.25), rgba(0,229,255,0.15)), #12131d;
  border: 3px solid #ff00e5;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 28px rgba(255,0,229,0.35), inset 0 0 24px rgba(0,229,255,0.15);
  z-index: 1000;
  overflow: hidden;
  animation: pop-in 220ms ease-out forwards;
}

@keyframes pop-in { to { transform: translate(-50%, -50%) scale(1); } }

.promo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: repeating-linear-gradient(90deg,#ff004c 0 14px,#ff7a00 14px 28px,#ffe600 28px 42px,#00d12a 42px 56px,#00c2ff 56px 70px,#5a00ff 70px 84px,#ff00e5 84px 98px);
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-shadow: 0 0 6px rgba(0,0,0,0.6);
}

.promo-close {
  background: #0e0f18;
  border: 2px solid rgba(255,255,255,0.35);
  color: #fff;
  border-radius: 8px;
  padding: 4px 8px;
  cursor: pointer;
}

.promo-body { padding: 16px; text-align: center; }
.promo-img-wrap { display: flex; justify-content: center; }
.promo-img { width: 180px; height: auto; border-radius: 8px; box-shadow: 0 10px 24px rgba(0,0,0,0.5), 0 0 18px rgba(255,0,229,0.35); margin: 6px auto 10px; transform: rotate(-2deg); }
.promo-shout {
  font-family: 'Press Start 2P', monospace;
  font-size: 16px;
  line-height: 1.6;
  color: #fff;
  text-shadow: 0 0 10px rgba(255,0,229,0.6), 0 0 16px rgba(0,229,255,0.45);
  margin: 8px 0 12px;
}
.promo-sale {
  font-size: 24px;
  font-weight: 900;
  color: #00ffa8;
  text-shadow: 0 0 8px rgba(0,255,168,0.55);
  margin: 0 0 14px;
}
.promo-cta {
  margin-top: 8px;
  font-size: 18px;
}
.promo-footer {
  font-size: 12px;
  text-align: center;
  opacity: 0.7;
  padding: 8px 14px 14px;
}