/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --bg-0: #0a0612;
  --bg-1: #140a22;
  --bg-2: #1e1033;
  --gold: #ffd56a;
  --gold-deep: #e8a838;
  --gold-glow: rgba(255, 213, 106, 0.55);
  --accent: #c44dff;
  --accent-2: #5b8cff;
  --text: #f4eefc;
  --text-dim: #a894c4;
  --danger: #ff5c7a;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --font: "Segoe UI", system-ui, -apple-system, sans-serif;
  /* Scene includes rim space for the arched title */
  --wheel-max: min(72vmin, 480px);
  --wheel-scene: min(88vmin, 600px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  min-height: 100dvh;
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
}

body {
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(196, 77, 255, 0.22), transparent 55%),
    radial-gradient(ellipse 70% 50% at 80% 100%, rgba(91, 140, 255, 0.12), transparent 50%),
    radial-gradient(ellipse 50% 40% at 10% 80%, rgba(232, 168, 56, 0.08), transparent 45%),
    var(--bg-0);
  overflow-x: hidden;
}

/* ── Layout ─────────────────────────────────────────────── */
.app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding:
    calc(0.5rem + var(--safe-top))
    1rem
    calc(1.25rem + var(--safe-bottom));
  gap: 0.35rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Stage / wheel ──────────────────────────────────────── */
.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 760px;
  gap: clamp(0.75rem, 2.5vh, 1.5rem);
  min-height: 0;
}

/* Scene is larger than the wheel so titles can sit on the outer rim */
.wheel-scene {
  position: relative;
  width: var(--wheel-scene);
  height: var(--wheel-scene);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  overflow: visible;
}

.arc-title {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 6;
}

.arc-title-text {
  fill: url(#title-grad);
  font-family: var(--font);
  font-size: 8px; /* viewBox 0–100 units — scales with the scene */
  font-weight: 800;
  letter-spacing: 0.1em;
  dominant-baseline: middle;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7))
    drop-shadow(0 0 5px rgba(255, 213, 106, 0.4));
}

.arc-subtitle-text {
  /* Same gold as the main title — applied to each glyph in the group */
  fill: url(#title-grad);
  font-family: var(--font);
  font-size: 4.6px;
  font-weight: 700;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7))
    drop-shadow(0 0 4px rgba(255, 213, 106, 0.35));
}

.arc-subtitle-text text {
  fill: inherit;
  font: inherit;
}

.wheel-wrap {
  position: relative;
  width: var(--wheel-max);
  height: var(--wheel-max);
  flex-shrink: 0;
  z-index: 1;
}

#wheel {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.55));
  /* Spin uses CSS rotate for GPU compositing (set from JS) */
  will-change: transform;
  transform-origin: 50% 50%;
}

.wheel-glow {
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-glow) 0%, transparent 65%);
  opacity: 0.35;
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.wheel-wrap.spinning .wheel-glow {
  opacity: 0.7;
  animation: glow-pulse 0.6s ease-in-out infinite alternate;
}

.wheel-wrap.winner .wheel-glow {
  opacity: 1;
  animation: glow-win 0.8s ease-out;
}

@keyframes glow-pulse {
  from { transform: scale(0.96); opacity: 0.45; }
  to   { transform: scale(1.04); opacity: 0.85; }
}

@keyframes glow-win {
  0%   { transform: scale(1); opacity: 0.6; }
  40%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1.05); opacity: 0.75; }
}

/* Pointer (fixed at top) */
.pointer {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  width: 36px;
  height: 48px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.55));
  pointer-events: none;
}

.pointer-tip {
  width: 0;
  height: 0;
  margin: 0 auto;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 36px solid var(--gold);
  position: relative;
}

.pointer-tip::after {
  content: "";
  position: absolute;
  top: -36px;
  left: -10px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 24px solid #fff2c4;
}

.wheel-wrap.spinning .pointer {
  animation: pointer-tick 0.08s ease-in-out infinite;
}

@keyframes pointer-tick {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  50%      { transform: translateX(-50%) rotate(-8deg); }
}

/* Center hub */
.hub {
  position: absolute;
  inset: 50%;
  width: 14%;
  height: 14%;
  min-width: 44px;
  min-height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #fff8e0, var(--gold) 45%, var(--gold-deep) 100%);
  border: 3px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    0 0 0 4px rgba(0, 0, 0, 0.35),
    0 4px 16px rgba(0, 0, 0, 0.5),
    inset 0 2px 6px rgba(255, 255, 255, 0.45);
  z-index: 4;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.hub-icon {
  font-size: clamp(0.9rem, 2.5vmin, 1.25rem);
  color: #5a3a00;
  line-height: 1;
}

/* ── Empty state (no query choices) ─────────────────────── */
.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
  max-width: 36rem;
  padding: 1rem;
}

.empty-state[hidden] {
  display: none;
}

.empty-title {
  margin: 0 0 0.25rem;
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, var(--gold), #fff2c4 45%, var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}

.empty-lead {
  margin: 0;
  font-size: clamp(1rem, 3.5vw, 1.2rem);
  color: var(--text);
}

.empty-formats {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.empty-formats code {
  display: block;
  padding: 0.65rem 0.85rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 213, 106, 0.2);
  color: var(--gold);
  font-size: clamp(0.7rem, 2.4vw, 0.85rem);
  word-break: break-all;
  text-align: left;
}

.empty-demos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  max-width: 28rem;
  margin-top: 0.35rem;
}

.empty-demo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--text);
  background:
    linear-gradient(145deg, rgba(255, 213, 106, 0.14), rgba(196, 77, 255, 0.1));
  border: 1px solid rgba(255, 213, 106, 0.35);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

.empty-demo-link:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 213, 106, 0.65);
  background:
    linear-gradient(145deg, rgba(255, 213, 106, 0.28), rgba(196, 77, 255, 0.18));
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.35),
    0 0 20px rgba(255, 213, 106, 0.15);
  color: #fff8e8;
}

.empty-demo-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.empty-demo-link:active {
  transform: translateY(0);
}

/* ── Controls / pinball plunger ─────────────────────────── */
.controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  /* Room for the knob to travel downward without clipping layout badly */
  padding-bottom: 0.25rem;
}

.plunger {
  --max-pull: 130px;
  --spring-rest: 48px;
  --shaft-w: 18px;
  --knob-size: clamp(72px, 18vmin, 96px);
  --power: 0;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.75rem;
  /* Reserve space so full pull doesn't shove the hint off-screen */
  min-height: calc(var(--spring-rest) + var(--max-pull) + var(--knob-size) + 28px);
  user-select: none;
  touch-action: none;
}

.plunger-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--knob-size);
}

/* Housing cap at the top (where the "shot" leaves) */
.plunger-cap {
  width: 44px;
  height: 16px;
  border-radius: 7px 7px 3px 3px;
  background:
    linear-gradient(180deg, #f0d78a, var(--gold-deep));
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  z-index: 2;
  position: relative;
}

.plunger-cap::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: 22px;
  height: 8px;
  background: linear-gradient(90deg, #5a5a68, #b0b0bc, #5a5a68);
  border-radius: 0 0 2px 2px;
}

/* Coil spring: height grows as user pulls (stretch), snaps back on fire */
.plunger-spring {
  width: 30px;
  height: var(--spring-rest);
  margin-top: 6px;
  border-radius: 3px;
  background:
    repeating-linear-gradient(
      180deg,
      #d4b45a 0 3px,
      #4a3418 3px 5px,
      #f0d78a 5px 7px,
      #4a3418 7px 9px
    );
  background-size: 100% 9px;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.4),
    0 0 14px rgba(255, 213, 106, calc(var(--power) * 0.4));
  z-index: 1;
  /* Metal rod visible through coils */
  outline: 1px solid rgba(0, 0, 0, 0.2);
}

.plunger.is-maxed .plunger-spring {
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(255, 92, 122, 0.5);
}

/* Shaft + knob sit under the spring in normal flow (spring height pushes them down) */
.plunger-shaft {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
  margin-top: -2px;
}

.plunger-shaft::before {
  content: "";
  display: block;
  width: var(--shaft-w);
  height: 18px;
  margin-bottom: -4px;
  border-radius: 3px;
  background:
    linear-gradient(90deg, #6a6a78, #d0d0dc 40%, #8a8a98 60%, #5a5a68);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.plunger-knob {
  appearance: none;
  -webkit-appearance: none;
  width: var(--knob-size);
  height: var(--knob-size);
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.28);
  cursor: grab;
  color: #2a1800;
  font-weight: 900;
  font-size: clamp(0.75rem, 2.8vmin, 0.95rem);
  letter-spacing: 0.12em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  padding: 0;
  background:
    radial-gradient(circle at 35% 28%, #fff4c8, var(--gold) 42%, var(--gold-deep) 100%);
  box-shadow:
    0 0 0 5px rgba(255, 213, 106, 0.12),
    0 10px 24px rgba(0, 0, 0, 0.5),
    inset 0 2px 8px rgba(255, 255, 255, 0.5);
  touch-action: none;
  position: relative;
  transition: box-shadow 0.15s ease, filter 0.15s ease;
}

.plunger-knob:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

.plunger-knob-label {
  line-height: 1;
}

.plunger-knob-arrows {
  font-size: 0.7em;
  opacity: 0.7;
  animation: pull-nudge 1.2s ease-in-out infinite;
}

.plunger.is-pulling .plunger-knob-arrows,
.plunger.is-disabled .plunger-knob-arrows {
  animation: none;
}

@keyframes pull-nudge {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50%      { transform: translateY(3px); opacity: 1; }
}

.plunger.is-pulling .plunger-knob {
  cursor: grabbing;
  box-shadow:
    0 0 0 6px rgba(255, 213, 106, calc(0.1 + var(--power) * 0.25)),
    0 14px 28px rgba(0, 0, 0, 0.55),
    inset 0 2px 8px rgba(255, 255, 255, 0.5),
    0 0 40px rgba(255, 213, 106, calc(var(--power) * 0.45));
}

.plunger.is-maxed .plunger-knob {
  background:
    radial-gradient(circle at 35% 28%, #ffe0e8, #ff8aa0 42%, #e05070 100%);
  color: #3a0010;
}

.plunger.is-firing .plunger-knob {
  box-shadow:
    0 0 0 8px rgba(255, 213, 106, 0.35),
    0 0 48px var(--gold-glow),
    0 8px 20px rgba(0, 0, 0, 0.45);
}

.plunger.is-disabled {
  filter: grayscale(0.4) brightness(0.75);
  opacity: 0.7;
  pointer-events: none;
}

.plunger.is-disabled .plunger-knob {
  cursor: not-allowed;
}

/* Vertical power meter beside the plunger
   Gradient is fixed to the full rail (green bottom → gold → red top).
   Fill height clips that gradient, so low pull only shows green. */
.plunger-power-rail {
  --rail-h: calc(var(--spring-rest) + var(--knob-size) * 0.55);
  position: absolute;
  left: calc(50% + var(--knob-size) * 0.55 + 10px);
  top: 8px;
  width: 8px;
  height: var(--rail-h);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.35);
}

.plunger-power-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* Reveal from the bottom as --power goes 0→1 (set on .plunger) */
  height: calc(var(--power, 0) * 100%);
  overflow: hidden;
  border-radius: inherit;
  transition: none;
  pointer-events: none;
}

/* Full-rail gradient, anchored to the bottom of the fill clip */
.plunger-power-fill::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--rail-h);
  background: linear-gradient(
    to top,
    #5dffb0 0%,
    #5dffb0 18%,
    var(--gold) 55%,
    #ff5c7a 100%
  );
  border-radius: inherit;
}

.hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  min-height: 1.25em;
  text-align: center;
}

@media (max-height: 560px) and (orientation: landscape) {
  .plunger {
    --max-pull: 90px;
    --spring-rest: 40px;
    --knob-size: 68px;
    min-height: calc(var(--spring-rest) + var(--knob-size) + 24px);
  }
}

/* ── Winner reveal ──────────────────────────────────────── */
.reveal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}

.reveal[hidden] {
  display: none;
}

.reveal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 2, 14, 0.72);
  backdrop-filter: blur(6px);
  animation: fade-in 0.35s ease-out;
}

.reveal-burst {
  position: absolute;
  width: min(90vmin, 520px);
  height: min(90vmin, 520px);
  border-radius: 50%;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg 8deg,
      rgba(255, 213, 106, 0.35) 8deg 12deg,
      transparent 12deg 28deg,
      rgba(196, 77, 255, 0.3) 28deg 32deg,
      transparent 32deg 48deg,
      rgba(91, 140, 255, 0.28) 48deg 52deg,
      transparent 52deg 68deg,
      rgba(255, 213, 106, 0.3) 68deg 72deg,
      transparent 72deg 88deg,
      rgba(255, 92, 122, 0.25) 88deg 92deg,
      transparent 92deg 108deg,
      rgba(196, 77, 255, 0.28) 108deg 112deg,
      transparent 112deg 360deg
    );
  animation: burst-spin 8s linear infinite, burst-in 0.6s ease-out;
  pointer-events: none;
  opacity: 0.85;
}

.reveal-card {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: clamp(1.75rem, 5vw, 2.75rem) clamp(1.5rem, 6vw, 3rem);
  border-radius: 1.25rem;
  background:
    linear-gradient(160deg, rgba(40, 22, 70, 0.95), rgba(18, 10, 32, 0.98));
  border: 1px solid rgba(255, 213, 106, 0.45);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 80px rgba(255, 213, 106, 0.2);
  max-width: 28rem;
  width: 100%;
  animation: card-pop 0.55s cubic-bezier(0.22, 1.35, 0.36, 1) both;
}

.reveal-kicker {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  animation: text-glow 1.2s ease-in-out infinite alternate;
}

.reveal-label {
  margin: 0 0 1.5rem;
  font-size: clamp(1.75rem, 7vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  background: linear-gradient(135deg, #fff, var(--gold) 60%, var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  word-break: break-word;
}

.reveal-dismiss {
  appearance: none;
  border: 1px solid rgba(255, 213, 106, 0.4);
  background: linear-gradient(135deg, rgba(255, 213, 106, 0.2), rgba(196, 77, 255, 0.15));
  color: var(--text);
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.9rem;
  padding: 0.75rem 1.75rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.reveal-dismiss:hover {
  background: linear-gradient(135deg, rgba(255, 213, 106, 0.35), rgba(196, 77, 255, 0.25));
  transform: translateY(-1px);
}

.reveal-dismiss:active {
  transform: translateY(0);
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes burst-in {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1); opacity: 0.85; }
}

@keyframes burst-spin {
  to { transform: rotate(360deg); }
}

@keyframes card-pop {
  from {
    opacity: 0;
    transform: scale(0.6) translateY(24px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes text-glow {
  from { text-shadow: 0 0 8px rgba(255, 213, 106, 0.3); }
  to   { text-shadow: 0 0 18px rgba(255, 213, 106, 0.7); }
}

/* ── Confetti particles (JS-injected) ───────────────────── */
.confetti-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 101;
  overflow: hidden;
}

.confetti {
  position: absolute;
  top: -12px;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  opacity: 0.95;
  animation: confetti-fall linear forwards;
}

@keyframes confetti-fall {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--dx), 110vh, 0) rotate(var(--rot));
    opacity: 0.15;
  }
}

/* ── Small screens / landscape ──────────────────────────── */
@media (max-height: 560px) and (orientation: landscape) {
  .app {
    padding-top: calc(0.35rem + var(--safe-top));
    padding-bottom: calc(0.5rem + var(--safe-bottom));
  }

  :root {
    --wheel-max: min(58vmin, 320px);
    --wheel-scene: min(72vmin, 400px);
  }

  .arc-title-text {
    font-size: 7.2px;
  }

  .stage {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wheel-wrap.spinning .wheel-glow,
  .wheel-wrap.spinning .pointer,
  .reveal-burst,
  .reveal-kicker {
    animation: none;
  }

  .reveal-card {
    animation: fade-in 0.2s ease-out;
  }
}