@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Outfit:wght@600;700;800;900&display=swap');

:root {
  --color-primary: #f59e0b;
  --color-primary-hover: #d97706;
  --color-accent: #10b981;
  --color-bg: #030f0b;
  --color-surface: #071e16;
  --color-surface-hover: #0c291f;
  --color-border: rgba(16, 185, 129, 0.2);
  --color-border-glow: rgba(245, 158, 11, 0.35);
  --color-text-primary: #f8fafc;
  --color-text-secondary: #94a3b8;
  --color-text-muted: #64748b;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

/* UI/UX Pro Max: No iOS Auto-Zoom on inputs & touch target */
input, select, textarea {
  font-size: 16px !important;
  touch-action: manipulation;
}

button, a {
  touch-action: manipulation;
  cursor: pointer;
  user-select: none;
}

/* Ambient Radial Glow */
.bg-glow {
  position: fixed;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(100vw, 750px);
  height: min(100vw, 750px);
  background: radial-gradient(circle, rgba(16, 185, 129, 0.16) 0%, rgba(245, 158, 11, 0.07) 50%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

/* Wheel Canvas Wrapper: Perfectly scaled for viewport height and width */
#wheel-wrapper {
  position: relative;
  width: min(84vw, 48vh, 370px);
  height: min(84vw, 48vh, 370px);
  margin: 0 auto;
  filter: drop-shadow(0 20px 35px rgba(0, 0, 0, 0.9));
}

.wheel-outer-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 4px solid #f59e0b;
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.35), inset 0 0 14px rgba(245, 158, 11, 0.25);
  pointer-events: none;
  z-index: 5;
}

/* Pointer Ticker with Spring Physics */
.wheel-pointer {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 40px;
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6));
  z-index: 20;
  transform-origin: 50% 0%;
  transition: transform 0.05s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wheel-pointer.tick {
  transform: translateX(-50%) rotate(-18deg);
}

/* Confetti Canvas */
#confettiCanvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
}

/* UI/UX Pro Max Smooth Motion Presets */
@keyframes modalEnter {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.animate-modal-enter {
  animation: modalEnter 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 2px solid #f59e0b;
  outline-offset: 2px;
}

/* Mobile Safe Areas */
.safe-padding-top {
  padding-top: max(8px, env(safe-area-inset-top));
}

.safe-padding-bottom {
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}