/* Reset and variables */
:root {
  --primary: #0070f3;
  --primary-hover: #0057c2;
  --accent: #00bfa6;
  --foreground: #1a1a1a;
  --background: #fff;
  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

  --background: 0 0% 100%;
  --foreground: 210 15% 20%;

  --card: 0 0% 100%;
  --card-foreground: 210 15% 20%;

  --popover: 0 0% 100%;
  --popover-foreground: 210 15% 20%;

  /* Primary: Professional blue for trust and focus */
  --primary: 215 85% 50%;
  --primary-foreground: 0 0% 100%;
  --primary-hover: 215 85% 45%;

  /* Secondary: Subtle gray for elegance */
  --secondary: 210 20% 96%;
  --secondary-foreground: 210 15% 30%;

  --muted: 210 20% 96%;
  --muted-foreground: 210 10% 50%;

  /* Accent: Energetic teal for engagement */
  --accent: 180 85% 40%;
  --accent-foreground: 0 0% 100%;
  --accent-hover: 180 85% 35%;

  --destructive: 0 85% 60%;
  --destructive-foreground: 0 0% 100%;

  --border: 210 20% 90%;
  --input: 210 20% 90%;
  --ring: 215 85% 50%;

  --radius: 0.75rem;

  /* Game specific colors */
  --game-success: 140 85% 45%;
  --game-warning: 45 95% 55%;
  --game-danger: 0 85% 60%;

  /* Gradients */
  --gradient-primary: linear-gradient(
    135deg,
    hsl(215 85% 50%),
    hsl(180 85% 40%)
  );
  --gradient-hero: linear-gradient(
    135deg,
    hsl(215 85% 50% / 0.1),
    hsl(180 85% 40% / 0.1)
  );
  --gradient-section: linear-gradient(180deg, hsl(0 0% 98%), hsl(0 0% 100%));

  /* Shadows */
  --shadow-card: 0 4px 12px hsl(210 20% 20% / 0.1);
  --shadow-button: 0 2px 8px hsl(215 85% 50% / 0.3);
  --shadow-game: 0 8px 24px hsl(180 85% 40% / 0.2);
}



/* Global */
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
  color: hsl(var(--foreground));
  scroll-behavior: smooth;
}

h2 {
  font-size: 1.875rem;
  font-weight: 700; /* font-bold */
  margin-bottom: 1.5rem; /* mb-6 */
  color: hsl(var(--foreground));
  margin-top: 0;
  line-height: 1;
}
@media (min-width: 768px) {
  /* md:text-5xl */
  h2 {
    font-size: 3rem; /* text-5xl */
  }
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
}

.divider {
  width: 5rem; /* w-20 (80px) */
  height: 0.25rem;
  background: hsl(var(--primary));

  margin: 0 auto 2rem auto;
  border-radius: 9999px;
}

/* Header */
#header {
  position: fixed; /* Keep header fixed at top */
  top: 0;
  left: 0;
  right: 0;
  background: transparent; /* Initial transparent background */
  transition: all 0.3s; /* Smooth transition for scroll effect */
  z-index: 50; /* Ensure header stays above other content */
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* Custom easing for transition */
}

#header .container {
  padding: 1rem 1rem; /* Inner container padding */
}

#header.scrolled {
  background-color: hsl(var(--background) / 0.95); /* Slightly opaque background on scroll */
  backdrop-filter: blur(10px); /* Blur effect for backdrop */
  border-bottom: 1px solid hsl(var(--border)); /* Bottom border on scroll */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* Subtle shadow for depth */
}

.header-inner {
  display: flex;
  justify-content: space-between; /* Space between logo and nav */
  align-items: center;
  padding: 1rem 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* Space between logo box and text */
  font-weight: bold;
  font-size: 1.2rem;
}

.logo-box {
  width: 32px;
  height: 32px;
  background: #0077ff; /* Logo background */
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-dot {
  width: 16px;
  height: 16px;
  background-color: hsl(var(--accent)); /* Accent dot inside logo */
  border-radius: 50%;
}

.nav-desktop {
  display: none; /* Hidden on mobile */
  gap: 2rem;
}

.nav-desktop a {
  font-weight: 500;
  transition: color 0.3s; /* Smooth hover color transition */
  color: hsl(var(--foreground));
  text-decoration: none;
}

.nav-desktop a:hover {
  color: var(--primary); /* Hover color change */
}

.menu-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer; /* Hamburger icon button */
}

.nav-mobile {
  display: flex;
  flex-direction: column; /* Stack links vertically */
  padding: 1rem;
}

.nav-mobile a {
  padding: 0.5rem 0;
  font-weight: 500;
  color: hsl(var(--foreground)); /* Mobile nav link color */
  text-decoration: none;
}

.hidden {
  display: none; /* Utility class to hide elements */
}

@media (min-width: 768px) {
  .nav-desktop {
    display: flex; /* Show desktop nav on larger screens */
  }
  .menu-btn {
    display: none; /* Hide mobile button on desktop */
  }
  .nav-mobile {
    display: none; /* Hide mobile nav on desktop */
  }
}

/* Hero Section */
.hero-section {
  position: relative; /* Needed for absolute background layers */
  min-height: 100vh; /* Full viewport height */
  display: flex;
  align-items: center; /* Center content vertically */
  justify-content: center; /* Center content horizontally */
  overflow: hidden; /* Hide overflowing backgrounds */
}

.hero-gradient {
  position: absolute;
  inset: 0; /* Cover entire hero section */
  background: var(--gradient-hero); /* Background gradient */
}

.bg-grid-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.05; /* Subtle pattern overlay */
  background-size: 20px 20px; /* Grid size */
}

.hero-content {
  position: relative; /* Keep content above background layers */
  text-align: center;
  z-index: 10; /* Ensure it is above backgrounds */
}

.hero-badge {
  display: inline-flex; /* Align icon and text horizontally */
  align-items: center; /* Vertical center */
  gap: 0.5rem; /* Space between icon and text */
  background: rgba(255, 255, 255, 0.8); /* Semi-transparent badge background */
  padding: 5px 15px;
  border-radius: 999px; /* Pill shape */
  margin-bottom: 20px;
  color: hsl(var(--muted-foreground));
}

.hero-badge svg {
  color: hsl(var(--accent)); /* Icon color */
  width: 1rem;
  height: 1rem;
  flex-shrink: 0; /* Prevent shrinking */
}

.hero-badge span {
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.hero-title {
  font-size: 2.25rem; /* Base font size */
  font-weight: 700; /* Bold text */
  margin-bottom: 1.5rem;
  animation: slide-up 1s ease-out forwards; /* Slide-up animation on load */
  line-height: 1;
  margin-top: 0;
  width: 100%;
}

@media (min-width: 768px) {
  /* Medium screens and up */
  .hero-title {
    font-size: 3.75rem; /* Larger text for md screens */
  }
}

@media (min-width: 1024px) {
  /* Large screens and up */
  .hero-title {
    font-size: 4.5rem; /* Largest title size */
  }
}

@keyframes slide-up {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.gradient-text {
  background: var(--gradient-primary); /* Gradient text effect */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-foreground {
  color: hsl(var(--foreground)); /* Normal text color */
}

.hero-subtext {
  font-size: 1.25rem; /* Base subtext size */
  color: #6b7280; /* Muted gray color */
  max-width: 42rem; /* Limit text width */
  margin: 0 auto 3rem auto; /* Center horizontally and add bottom spacing */
  animation: fade-in 1s ease-out forwards; /* Fade-in on load */
}

@media (min-width: 768px) {
  /* Medium screens */
  .hero-subtext {
    font-size: 1.5rem; /* Increase subtext size */
  }
}

/* Fade-in animation */
@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.hero-btn {
  display: inline-flex; /* Align icon and text horizontally */
  align-items: center; /* Vertical centering */
  justify-content: center; /* Horizontal centering */
  gap: 0.5rem; /* Space between icon and text */
  white-space: nowrap; /* Prevent text wrapping */
  border-radius: calc(var(--radius) - 2px); /* Rounded corners */
  height: 2.5rem; /* Button height */
  padding: 1.5rem 2rem; /* Internal spacing */
  font-size: 1.125rem; /* Text size */
  line-height: 1.75rem; /* Line height */
  font-weight: 600; /* Semi-bold text */
  background-color: hsl(var(--primary)); /* Button background color */
  color: hsl(var(--primary-foreground)); /* Button text color */
  cursor: pointer; /* Pointer on hover */
  transition: all 0.3s ease; /* Smooth hover transition */
  position: relative; /* For glow pseudo-element */
  overflow: hidden; /* Clip glow effect */
  margin-bottom: 4rem; /* Space below button */
  border: none; /* Remove default border */
  animation: slide-up 1s ease-out forwards; /* Entrance animation */
}

.hero-btn:hover {
  background-color: hsl(var(--primary-hover)); /* Hover background */
  transform: scale(1.05); /* Slight grow on hover */
}

/* Button glow effect (optional) */
.hero-btn::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: rgba(255, 255, 255, 0.1); /* Subtle glow overlay */
  pointer-events: none; /* Allow clicks through glow */
  border-radius: inherit; /* Match button shape */
  opacity: 0;
  transition: opacity 0.3s ease; /* Smooth fade-in */
}

.hero-btn:hover::after {
  opacity: 1; /* Show glow on hover */
}

/* Disabled button state */
.hero-btn:disabled {
  pointer-events: none; /* Prevent interaction */
  opacity: 0.5; /* Visual feedback */
}

/* Focus styles for accessibility */
.hero-btn:focus-visible {
  outline: none; /* Remove default outline */
  box-shadow: 0 0 0 2px #2563eb, 0 0 0 4px #ffffff; /* Custom focus ring */
}

/* SVG inside button */
.hero-btn svg {
  pointer-events: none; /* Ignore mouse events */
  width: 1rem; /* Icon size */
  height: 1rem;
  flex-shrink: 0; /* Prevent shrinking */
}

/** Hero Email Signup **/

.hero-email {
  max-width: 28rem; /* Limit width */
  margin: 0 auto; /* Center horizontally */
  animation: fade-in 0.5s ease-out forwards; /* Fade-in animation */
}

.hero-email h3 {
  font-size: 1.125rem; /* Heading size */
  font-weight: 600; /* Semi-bold */
  margin-bottom: 1rem; /* Space below heading */
  color: #111827; /* Dark text color */
}
/* Form styling */
#email-form {
  display: flex; /* Arrange input & button horizontally */
  width: 100%;
  gap: 0.5rem; /* Spacing between input & button */
}

#email-form input {
  flex: 1; /* Input fills remaining space */
  padding: 0.5rem 0.75rem; /* Internal spacing */
  font-size: 1rem; /* Text size */
  border-radius: calc(var(--radius) - 2px); /* Rounded corners */
  border: 1px solid hsl(var(--border)); /* Border color */
  background-color: hsl(var(--card) / 0.8); /* Semi-transparent background */
  backdrop-filter: blur(8px); /* Blur effect behind input */
  color: #111827; /* Text color */
}

#email-from input::placeholder {
  color: hsl(var(--muted-foreground)); /* Placeholder color */
}

#email-form button {
  padding: 0.5rem 1rem; /* Button padding */
  border: none; /* Remove default border */
  border-radius: 0.375rem; /* Rounded corners */
  background: var(--accent); /* Button color */
  color: #fff; /* Text color */
  cursor: pointer; /* Pointer on hover */
  flex-shrink: 0; /* Prevent button from shrinking */
}

@media (min-width: 768px) {
  #email-form input {
    font-size: 0.875rem; /* Smaller font for larger screens */
    line-height: 1.25rem;
  }
}

/* Reuse fade-in animation for elements */
@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero Email Subscribe button */
.hero-email button {
  padding: 10px 20px; /* Internal spacing */
  border: none; /* Remove default border */
  border-radius: 8px; /* Rounded corners */
  background: hsl(var(--accent)) !important; /* Button color override */
  color: #fff; /* Text color */
  cursor: pointer; /* Pointer on hover */
}

/* Floating decorative circles */
.hero-floating {
  position: absolute; /* Absolute positioning */
  border-radius: 50%; /* Make circle */
  filter: blur(50px); /* Soft blur effect */
  animation: pulse 2s infinite; /* Continuous pulse animation */
}
.accent-circle {
  width: 80px;
  height: 80px;
  top: 25%;
  left: 10%;
  background: rgba(0, 191, 166, 0.1); /* Subtle accent color */
}
.primary-circle {
  width: 64px;
  height: 64px;
  top: 33%;
  right: 20%;
  background: rgba(0, 112, 243, 0.1); /* Subtle primary color */
}
.success-circle {
  width: 48px;
  height: 48px;
  bottom: 25%;
  left: 25%;
  background: rgba(50, 205, 50, 0.1); /* Subtle success color */
}
/* About Section */
.about-section {
  padding: 100px 0; /* Top & bottom spacing */
  background: linear-gradient(180deg, #f9f9f9, #fff); /* Gradient background */
  text-align: center; /* Center align text */
}

/* About Section Header */
.about-header {
  max-width: 56rem; /* Limit width for readability (~1024px) */
  margin: 0 auto 4rem auto; /* Center horizontally + bottom margin */
  text-align: center; /* Center text */
}

.about-header p {
  font-size: 1.125rem; /* text-lg */
  color: #6b7280; /* Muted gray text */
  line-height: 1.75rem; /* Comfortable line height */
  margin-top: 0; /* Remove default margin */
}

@media (min-width: 768px) {
  /* Medium screens and up */
  .about-header p {
    font-size: 1.25rem; /* Slightly larger font for readability */
  }
}

/* Features Grid */
.features {
  display: flex; /* Flex layout */
  flex-wrap: wrap; /* Wrap cards to next line if needed */
  gap: 20px; /* Spacing between cards */
  justify-content: center; /* Center cards */
  margin-top: 40px; /* Space above features */
}

/* Individual Feature Card */
.feature-card {
  background-color: hsl(var(--card)); /* Card background color */
  padding: 2rem; /* Internal spacing */
  border-radius: 1rem; /* Rounded corners */
  width: 250px; /* Fixed width */
  box-shadow: var(--shadow-card); /* Soft shadow */
  transition: transform 0.3s; /* Smooth scale on hover */
}

.feature-card:hover {
  transform: scale(1.05); /* Slight zoom on hover */
}

/* Feature Icon Container */
.feature-icon {
  display: inline-flex; /* Inline flex for alignment */
  align-items: center; /* Vertical center */
  justify-content: center; /* Horizontal center */
  width: 4rem; /* Icon container width */
  height: 4rem; /* Icon container height */
  background-color: #f3f4f6; /* Light gray background */
  border-radius: 1rem; /* Rounded corners */
  margin-bottom: 1.5rem; /* Space below icon */
}

/* Individual Icons inside feature */
.feature-icon .feature-1 {
  color: hsl(var(--primary)); /* Primary color */
  width: 2rem; /* Icon size */
  height: 2rem;
}
.feature-icon .feature-2 {
  color: hsl(var(--accent)); /* Accent color */
  width: 2rem;
  height: 2rem;
}
.feature-icon .feature-3 {
  color: hsl(var(--game-success)); /* Success color */
  width: 2rem;
  height: 2rem;
}

/* Feature Card Title */
.feature-card h3 {
  font-size: 1.25rem; /* text-xl */
  line-height: 1.75rem; /* Comfortable line height */
  font-weight: 700; /* Bold text */
  margin-bottom: 1rem; /* Space below title */
  color: hsl(var(--foreground)); /* Foreground color */
  margin-top: 0; /* Remove default margin */
}

/* Feature Card Description */
.feature-card p {
  color: hsl(var(--muted-foreground)); /* Muted text color */
  line-height: 1.625; /* Slightly tighter spacing for readability */
  margin: 0; /* Remove default margin */
}
/* Game Section Container */
.game-section {
  padding: 100px 0; /* Top & bottom spacing */
  background: var(--background); /* Background color from CSS variable */
  text-align: center; /* Center all text */
}

/* Accent line under titles */
.line-accent {
  width: 80px; /* Line width */
  height: 4px; /* Line height */
  background: var(--accent); /* Accent color */
  margin: 10px auto 20px; /* Top, auto horizontal, bottom spacing */
  border-radius: 4px; /* Rounded edges */
}

/* Utility classes */
.text-center {
  text-align: center; /* Center text */
}
.mb-16 {
  margin-bottom: 64px; /* Margin bottom 16 (Tailwind spacing) */
}
.mb-8 {
  margin-bottom: 32px; /* Margin bottom 8 */
}

/* Paragraphs inside game section */
.game-section p {
  font-size: 1.125rem; /* text-lg */
  color: #6b7280; /* Muted gray text */
  line-height: 1.75rem; /* Comfortable line spacing */
  margin-top: 0; /* Remove default top margin */
  max-width: 42rem; /* Limit width for readability */
  margin-left: auto;
  margin-right: auto; /* Center horizontally */
}

@media (min-width: 768px) {
  /* Medium screens and up */
  .game-section p {
    font-size: 1.25rem; /* Slightly larger font for readability */
  }
}

/* Flex container for centering content */
.flex-center {
  display: flex;
  justify-content: center; /* Horizontal center */
}

/* Golf Game Card */
.golf-game {
  width: 100%;
  max-width: 600px; /* Limit width */
  background: #fff; /* White background */
  padding: 32px; /* Inner spacing */
  border-radius: 24px; /* Rounded corners */
  box-shadow: var(--shadow-game); /* Soft shadow */
}

/* Golf Game Title */
.golf-game h3 {
  color: hsl(var(--foreground)); /* Foreground color */
  font-weight: 700; /* Bold */
  font-size: 1.5rem; /* text-xl */
  line-height: 2rem; /* Comfortable line height */
  text-align: center; /* Center text */
  margin-bottom: 2rem; /* Space below heading */
  margin-top: 0; /* Remove default top margin */
}
/* Golf Course Container */
.golf-course {
  position: relative;
  height: 160px; /* Course height */
  background: linear-gradient(to right, #d1fae5, #bbf7d0, #d1fae5); /* Green gradient */
  border-radius: 16px; /* Rounded corners */
  margin-bottom: 32px; /* Spacing below course */
  overflow: hidden; /* Prevent overflow of ball or other elements */
}

/* Golf Ball */
.golf-ball {
  position: absolute;
  left: 16px; /* Starting position from left */
  top: 50%; /* Vertical center */
  width: 24px;
  height: 24px;
  background: radial-gradient(circle at 30% 30%, #fff, #f0f0f0); /* Ball shading */
  border-radius: 50%; /* Perfect circle */
  border: 2px solid rgb(229 231 235 / 1); /* Light border */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  transform: translateY(-50%) translateX(0); /* Center vertically, start X */
  transition: transform 0.2s; /* Smooth movement */
}

/* Golf Hole */
.golf-hole {
  position: absolute;
  right: 40px; /* Distance from right edge */
  top: 50%; /* Vertical center */
  width: 40px;
  height: 40px;
  border: 2px solid #15803d4d; /* Semi-transparent green */
  border-radius: 9999px; /* Circle */
  transform: translateY(-50%); /* Center vertically */
}


/* Flag container */
.the-flag {
  position: absolute;
  top: -2rem; /* Above the hole */
  left: 50%;
  transform: translateX(-50%);
}

/* Flag bar (pole) */
.flag-bar {
  width: 0.25rem; /* Thin pole */
  height: 2rem; /* Pole height */
  background-color: #ca8a04; /* Yellow pole */
  border-radius: 9999px; /* Fully rounded */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Flag cloth */
.flag {
  position: absolute;
  top: 0;
  left: 0.25rem;
  width: 0.75rem;
  height: 0.5rem;
  background-color: #ef4444; /* Red flag */
  border-radius: 0.125rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  animation: flag-wave 1s infinite alternate; /* Waving animation */
}

/* Flag waving animation */
@keyframes flag-wave {
  0% {
    transform: rotate(0deg) translateY(0);
  }
  50% {
    transform: rotate(5deg) translateY(-2px);
  }
  100% {
    transform: rotate(-5deg) translateY(2px);
  }
}

/* Bubble container should be relative to the game area */
.bubble-container {
  position: absolute;
  inset: 0; /* cover the golf course */
  pointer-events: none; /* don't block clicks */
  overflow: visible;
}

/* Bubble style */
.bubble {
  position: absolute;
  bottom: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0.8;
  animation: rise 1s forwards;
}

/* Keyframes for rising bubbles */
@keyframes rise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-80px) scale(0.5);
    opacity: 0;
  }
}


/* Power Control Section */
.power-control {
  margin-bottom: 32px; /* Spacing below power controls */
}

/* Power Display (text indicators) */
.power-display {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-weight: bold;
}

.power-display span:last-child {
  font-size: 24px;
  color: #2563eb; /* Highlighted current power */
}

/* Power Meter */
.power-meter {
  height: 24px;
  background: #e5e7eb; /* Light gray background */
  border-radius: 12px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}

/* Active power bar */
#power-bar {
  height: 100%;
  background: linear-gradient(to right, #60a5fa, #14b8a6); /* Blue to teal gradient */
  width: 50%; /* Default width, updated dynamically */
  transition: width 0.3s ease-out; /* Smooth animation */
}

/* Power Buttons (LESS / MORE) */
.power-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.power-buttons button {
  padding: 0.5rem 1.5rem;
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--background));
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.5rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.power-buttons button:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

/* SVG icons inside buttons */
.power-buttons svg {
  width: 1rem;
  height: 1rem;
  pointer-events: none; /* Prevent SVG from capturing clicks */
  margin-right: 0.25rem;
}

/* Action Buttons (Shoot / Retry) */
.action-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
}

.action-buttons button {
  padding: 0.75rem 2rem;
  border-radius: calc(var(--radius) - 2px);
  white-space: nowrap;
  gap: 0.5rem;
  font-weight: bold;
  cursor: pointer;
}
/* Shoot Button (main action button) */
#shoot-btn {
  background-color: hsl(var(--primary-hover));
  color: hsl(var(--primary-foreground));
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.75rem;
  height: 2.5rem;
  border: none;
  display: flex; /* ensures text/icons are centered */
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-button);
}

#shoot-btn:hover {
  background-color: #1e40af; /* darker hover state */
}

/* Reset Button (appears only after shooting) */
#reset-btn {
  display: none; /* hidden initially */
  background-color: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  font-size: 0.875rem;
  line-height: 1.25rem;
  height: 2.5rem;
  font-weight: 500;
  align-items: center;
  justify-content: center;
}

#reset-btn svg {
  width: 1rem;
  height: 1rem;
  pointer-events: none; /* icon won't block clicks */
  margin-right: 0.5rem; /* spacing between icon and text */
}

#reset-btn:hover {
  background-color: #f3f4f6; /* subtle hover background */
}

/* Feedback container (appears after action) */
.feedback-container {
  text-align: center;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid hsl(var(--game-warning) / 0.2);
  display: none; /* shown dynamically with .show */
}

#feedback {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  margin: 0;
}

.feedback-container.show {
  display: block; /* toggle visibility */
}

/* Warning feedback (e.g., low score / too high power) */
.feedback-warning {
  --game-warning: 45 95% 55%; /* yellow-ish tone */
  background-color: hsl(var(--game-warning) / 0.1);
  border-color: hsl(var(--game-warning) / 0.2);
}

.feedback-warning p {
  color: hsl(var(--game-warning)); /* highlight warning text */
}
/* Success message box styling */
.feedback-success {
  --game-success: 140 85% 45%;
  background-color: hsl(var(--game-success) / 0.1); /* Light green background */
  border-color: hsl(var(--game-success) / 0.2); /* Subtle green border */
  color: hsl(var(--game-success)); /* Main green text */
}

.feedback-success p {
  color: hsl(var(--game-success)); /* Success text color */
}

.instructions p {
  margin-top: 1.5rem; /* Add spacing above instructions */
  font-size: 0.875rem !important; /* Small readable text */
  line-height: 1.25rem !important; /* Line spacing for readability */
  color: hsl(var(--muted-foreground)); /* Muted text color */
  text-align: center; /* Center align instructions */
}

/* Stats container layout */
.game-stats {
  display: flex; /* Arrange stats side by side */
  justify-content: space-between; /* Space out stats evenly */
  margin-top: 4rem; /* Add top spacing */
  gap: 1.5rem; /* Space between stats */
  max-width: 48rem; /* Limit container width */
  margin-left: auto; /* Center horizontally */
  margin-right: auto;
}

/* Individual stat card */
.stat {
  text-align: center; /* Center text inside card */
  background-color: hsl(var(--card)); /* Card background */
  padding: 1.5rem; /* Inner spacing */
  border-radius: 1rem; /* Rounded corners */
  box-shadow: var(--shadow-card); /* Card shadow */
  flex: 1; /* Equal width for all cards */
}

/* Highlighted stat value */
.stat-value {
  font-size: 1.875rem; /* Large font for numbers */
  line-height: 2.25rem;
  margin-bottom: 0.5rem; /* Space below value */
  font-weight: 700; /* Bold numbers */
}

/* Mobile responsive adjustments */
@media (max-width: 571px) {
  .game-stats {
    display: block; /* Stack stats vertically */
  }

  .stat {
    margin-bottom: 1rem; /* Space between stacked cards */
  }
}

/* Specific stat colors */
.stat-one {
  color: hsl(var(--primary)) !important; /* Primary stat color */
}
.stat-two {
  color: hsl(var(--accent)); /* Accent stat color */
}
.stat-three {
  color: hsl(var(--game-success)); /* Success stat color */
}

/* Stat label text */
.stat-label {
  font-size: 0.875rem; /* Small label font */
  line-height: 1.25rem; /* Readable spacing */
  color: hsl(var(--muted-foreground)); /* Muted label color */
}
/* How Section container */
.how-section {
  padding: 6rem 0; /* Section spacing */
  background: linear-gradient(to bottom, #f9fafb, #fff); /* Light gradient background */
}

/* Section header container */
.how-section-header {
  margin-bottom: 64px; /* Space below header */
}

.how-section-header p {
  font-size: 1.125rem; /* Base text size */
  color: #6b7280; /* Muted gray text */
  line-height: 1.75rem; /* Comfortable spacing */
  margin-top: 0;
  max-width: 42rem; /* Limit paragraph width */
  margin: 0 auto; /* Center horizontally */
}

@media (min-width: 768px) {
  .how-section-header p {
    font-size: 1.25rem; /* Larger text on medium+ screens */
  }
}

/* Steps grid layout */
.steps {
  display: grid;
  gap: 32px; /* Space between steps */
  grid-template-columns: 1fr; /* Single column on small screens */
  max-width: 1000px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .steps {
    grid-template-columns: repeat(3, 1fr); /* 3 columns on medium+ screens */
  }
}

/* Individual step container */
.step {
  position: relative;
  text-align: center;
}

/* Step number circle */
.step-number {
  position: absolute;
  top: -20px;
  left: -20px;
  width: 48px;
  height: 48px;
  background-color: hsl(var(--primary));
  color: #fff;
  border-radius: 50%; /* Perfect circle */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  z-index: 10;
  font-size: 1.25rem;
  line-height: 1.75rem;
}

/* Step card styling */
.card {
  background: #fff;
  padding: 48px 24px 32px; /* Inner spacing */
  border-radius: 24px; /* Rounded corners */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); /* Soft shadow */
  transition: transform 0.3s, box-shadow 0.3s; /* Hover effects */
}
.card:hover {
  transform: scale(1.05); /* Slight zoom */
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15); /* Stronger hover shadow */
}

/* Icon circle container */
.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5rem; /* 80px */
  height: 5rem;
  background-color: hsl(var(--secondary));
  border-radius: 1.5rem; /* Rounded-3xl */
  margin-bottom: 1.5rem; /* Space below icon */
}

.icon-circle svg {
  width: 3rem; /* Icon size */
  height: 3rem;
}

/* Icon color variations */
.icon-circle .how-it-1 {
  color: hsl(var(--primary));
}
.icon-circle .how-it-2 {
  color: hsl(var(--accent));
}
.icon-circle .how-it-3 {
  color: hsl(var(--game-success));
}

/* Step title */
.card h3 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: bold;
  margin-bottom: 1rem;
  margin-top: 0;
  color: hsl(var(--foreground));
}

/* Step description */
.card p {
  color: hsl(var(--muted-foreground));
  line-height: 1.625;
  margin: 0;
}
/* Illustration container */
.illustration {
  margin-top: 64px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Course background bar */
.course {
  position: relative;
  height: 96px;
  background: linear-gradient(to right, #d1fae5, #bbf7d0); /* Green gradient */
  border-radius: 16px;
  overflow: hidden;
}

/* Ball element */
.ball {
  position: absolute;
  left: 2rem;
  top: 50%;
  width: 1rem;
  height: 1rem;
  background: #fff; /* White ball */
  border-radius: 50%; /* Circle shape */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* Drop shadow */
  transform: translateY(-50%); /* Center vertically */
}

/* Target (flag base icon) */
.target {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -44%);
  font-size: 24px;
}

.target svg {
  color: hsl(var(--primary)) !important; /* Primary color */
  width: 2rem;
  height: 2rem;
}

/* Hole on the course */
.hole {
  position: absolute;
  right: 2rem;
  top: 50%;
  width: 1.5rem;
  height: 1.5rem;
  background: #000; /* Black hole */
  border-radius: 50%; /* Circle */
  transform: translateY(-50%); /* Center vertically */
}

/* Dashed trajectory line */
.trajectory {
  position: absolute;
  left: 3rem;
  right: 3.5rem;
  top: 50%;
  height: 1px;
  border-top: 2px dashed hsl(var(--primary) / 0.5); /* Semi-transparent dashed line */
  transform: translateY(-50%); /* Center vertically */
}

/* Labels under trajectory */
.labels {
  display: flex;
  justify-content: space-between; /* Spread labels evenly */
  margin-top: 16px;
  font-size: 14px;
  color: #6b7280; /* Muted gray text */
}

/* Benefits section container */
.benefits-section {
  padding: 6rem 0; /* Spacious padding */
  background: #fff; /* White background */
}

/* Section header container */
.section-header {
  text-align: center;
  margin-bottom: 4rem; /* Space below header */
}

.section-header p {
  font-size: 1.125rem; /* Base text-lg */
  color: #6b7280; /* Muted text */
  line-height: 1.75rem; /* Comfortable spacing */
  margin-top: 0;
  max-width: 42rem; /* Limit width for readability */
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .section-header p {
    font-size: 1.25rem; /* Larger text on medium+ screens */
  }
}

/* Benefits grid layout */
.benefits-grid {
  display: grid;
  gap: 2rem; /* Space between cards */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive columns */
  max-width: 1100px;
  margin: 0 auto 5rem auto; /* Center grid with bottom space */
}

/* Benefit card container */
.benefit-card {
  padding: 2rem;
  border-radius: 1.5rem; /* Rounded corners */
  border: 1px solid hsl(var(--border) / .5);; /* Light border */
  background: #fafafa; /* Light background */
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); /* Card shadow */
}

.benefit-card:hover {
  transform: scale(1.05); /* Slight zoom */
  border-color: hsl(var(--border)); /* Themed border on hover */
}

/* Icon container */
.icon-box {
  width: 64px;
  height: 64px;
  background: #fff; /* White box */
  border-radius: 1rem; /* Rounded corners */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: 1.5rem; /* Space below icon */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Icon color variations */
.icon-box .benefit-icon-1 {
  color: hsl(var(--primary));
  width: 2.5rem;
  height: 2.5rem;
}
.icon-box .benefit-icon-2 {
  color: hsl(var(--accent));
  width: 2.5rem;
  height: 2.5rem;
}
.icon-box .benefit-icon-3 {
  color: hsl(var(--game-success));
  width: 2.5rem;
  height: 2.5rem;
}

/* Benefit title */
.benefit-card h3 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: bold;
  margin-bottom: 1rem;
  color: hsl(var(--foreground));
}

/* Benefit description */
.benefit-card p {
  color: hsl(var(--muted-foreground));
  line-height: 1.625;
  font-size: 1.125rem; /* Readable size */
}

/* Decorative line under text */
.decor-line {
  width: 50px;
  height: 4px;
  background: currentColor; /* Inherits text color */
  opacity: 0.2;
  border-radius: 9999px; /* Fully rounded */
  margin-top: 1rem;
  transition: width 0.3s ease; /* Smooth hover */
}

/* Expand decorative line on hover */
.benefit-card:hover .decor-line {
  width: 70px;
}
/* Gradient variations - used for different theme highlights */
.gradient-primary {
  background: linear-gradient(
    to bottom right,
    rgba(37, 99, 235, 0.1),
    rgba(37, 99, 235, 0.05)
  );
}
.gradient-accent {
  background: linear-gradient(
    to bottom right,
    rgba(6, 182, 212, 0.1),
    rgba(6, 182, 212, 0.05)
  );
}
.gradient-success {
  background: linear-gradient(
    to bottom right,
    rgba(16, 185, 129, 0.1),
    rgba(16, 185, 129, 0.05)
  );
}

/* Stats grid layout */
.stats-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(2, 1fr);
  max-width: 56rem;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr); /* 4 columns on medium+ screens */
  }
}

.benefit-stat {
  text-align: center; /* Center align each stat */
}

.stat-number {
  font-size: 1.875rem; /* 30px */
  line-height: 2.25rem; /* 36px */
  font-weight: bold;
  margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
  .stat-number {
    font-size: 2.25rem; /* 36px */
    line-height: 2.5rem; /* 40px */
  }
}

.stat-label {
  font-size: 0.875rem; /* Small text for labels */
  line-height: 1.25rem;
  color: hsl(var(--muted-foreground));
}

/* Stat number color variations */
.stat-number.primary {
  color: #2563eb;
}
.stat-number.accent {
  color: #06b6d4;
}
.stat-number.success {
  color: #10b981;
}

/* Signup section wrapper */
.signup-section {
  padding: 6rem 0;
  background: var(--gradient-section);
}

/* Signup form container */
.signup-form {
  max-width: 42rem;
  margin: 0 auto;
  text-align: center;
}

.signup-form p {
  font-size: 1.125rem; /* text-lg */
  color: hsl(var(--muted-foreground)); /* Muted gray text */
  line-height: 1.75rem;
  margin-bottom: 3rem;
}

@media (min-width: 768px) {
  .signup-form p {
    font-size: 1.25rem; /* Larger text on medium+ screens */
  }
}

/* Icon circle with primary theme */
.icon-circle.primary {
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
}
/* Signup icon circle */
.signup-circle {
  display: inline-flex; /* Flex container inline */
  align-items: center; /* Vertically center content */
  justify-content: center; /* Horizontally center content */
  width: 4rem; /* Circle width */
  height: 4rem; /* Circle height */
  background-color: hsl(var(--primary) / 0.1); /* Light primary background */
  border-radius: 9999px; /* Fully rounded circle */
  margin-bottom: 1.5rem; /* Spacing below */
}

.signup-circle svg {
  width: 2rem; /* Icon size */
  height: 2rem; /* Icon size */
  color: hsl(var(--primary)); /* Primary color icon */
}
/* Form wrapper */
.form {
  max-width: 400px; /* keeps container fixed */
  margin: 0 auto 1.5rem;
  box-sizing: border-box;
}

/* Form group */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%; /* make sure it doesn't exceed parent */
}

@media (min-width: 640px) {
  .form-group {
    flex-direction: row;
    gap: 0.5rem; /* smaller gap in row */
  }
}

/* Input field */
.signup-form input {
  flex: 1 1 auto; /* grow and shrink as needed */
  min-width: 0; /* important to prevent overflow inside flex */
  padding: 0.5rem 1rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 2px);
  background-color: hsl(var(--card) / 0.8);
  height: 3rem;
  box-sizing: border-box;
}

/* Button */
.signup-form button {
  flex: 0 0 auto; /* don't grow */
  padding: 0.5rem 1.5rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: white;
  background-color: hsl(var(--primary));
  border: none;
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  white-space: nowrap;
}


button:hover {
  background: #1e40af; /* Darker shade on hover */
}

/* Privacy note text */
.privacy {
  font-size: 0.875rem !important; /* Small text */
  line-height: 1.25rem;
  color: hsl(var(--muted-foreground));
}

/* Features grid layout */
.features-grid {
  display: grid;
  gap: 1.5rem; /* Gap between feature cards */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Responsive columns */
  max-width: 900px;
  margin: 3rem auto 0 auto;
}

/* Single feature card */
.feature {
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.8); /* Semi-transparent card */
  border-radius: 1rem;
  text-align: center;
  backdrop-filter: blur(4px); /* Glass effect */
}

/* Feature title */
.feature-title {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

/* Feature title color variations */
.feature-title.primary {
  color: #2563eb;
}
.feature-title.accent {
  color: #06b6d4;
}
.feature-title.success {
  color: #10b981;
}
/* Feature description text */
.feature-desc {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: hsl(var(--muted-foreground)); /* Muted gray text */
}

/* Footer wrapper */
.footer {
  background-color: #f3f4f6;
  padding: 4rem 0;
  border-top: 1px solid #d1d5db; /* Top border */
}

/* Footer grid layout */
.footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Responsive columns */
}

.footer-brand {
  grid-column: span 2; /* Brand spans 2 columns */
}

/* Brand logo layout */
.brand-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* Outer square of brand logo */
.outer-square {
  width: 32px;
  height: 32px;
  background-color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px; /* Rounded corners */
}

/* Inner circle of brand logo */
.inner-circle {
  width: 16px;
  height: 16px;
  background-color: #06b6d4;
  border-radius: 50%; /* Full circle */
}

/* Brand name text */
.brand-name {
  font-weight: bold;
  font-size: 1.25rem;
  color: #111;
}

/* Brand description text */
.brand-desc {
  max-width: 28rem;
  color: hsl(var(--muted-foreground));
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

/* Copyright text */
.copyright {
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
  line-height: 1.25rem;
}
/* Footer grid layout */
.footer-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem 0;
}

/* Brand section */
.footer-brand {
  flex: 1;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.brand-name {
  font-weight: 700;
  font-size: 1.25rem;
}

.brand-desc {
  font-size: 0.95rem;
  color: hsl(var(--muted-foreground));
  margin-bottom: 1rem;
}

copyright {
  font-size: 0.85rem;
  color: hsl(var(--muted-foreground));
}

/* Footer links */
.footer-links {
  flex: 1;
}

.footer-links h4 {
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #111;
}

.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 0.5rem;
}

.footer-links a,
.footer-links button {
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  transition: color 0.3s;
}

.footer-links a:hover,
.footer-links button:hover {
  color: hsl(var(--primary));
}

/* Bottom section */
.footer-bottom {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #d1d5db;
  text-align: center;
  font-size: 0.85rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.4rem;
}

/* Media Queries for larger screens */
@media (min-width: 768px) {
  .footer-grid {
    flex-direction: row;
    justify-content: space-between;
    gap: 3rem;
  }

  .footer-brand,
  .footer-links {
    flex: 1;
  }

  .footer-brand {
    max-width: 40%;
  }

  .footer-links {
    max-width: 25%;
  }

  .footer-bottom {
    text-align: left;
    margin-top: 3rem;
    padding-top: 2rem;
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    gap: 4rem;
    padding: 3rem 2rem;
  }
}

/** Cookies **/
/* Cookie consent wrapper */
.cookie-consent {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  max-width: 400px;
  z-index: 1000;
  display: none; /* Hidden by default */
  animation: slide-up 0.5s ease forwards; /* Slide in animation */
}

@keyframes slide-up {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Cookie card design */
.cookie-card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #d1d5db;
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(6px); /* Glass effect */
}

/* Cookie content layout */
.cookie-content {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

/* Cookie icon wrapper */
.cookie-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: #2563eb20; /* Semi-transparent blue */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 1.2rem;
}

/* Cookie text wrapper */
.cookie-text {
  flex: 1;
  min-width: 0;
}

.cookie-text h4 {
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: #111;
}

.cookie-text p {
  font-size: 0.875rem;
  color: #555;
  margin-bottom: 0.5rem;
}

/* Cookie policy link */
.cookie-link {
  color: #2563eb;
  text-decoration: none;
  margin-left: 0.25rem;
}

.cookie-link:hover {
  text-decoration: underline;
}

/* Cookie action buttons container */
.cookie-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* General button style */
.btn {
  cursor: pointer;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

/* Primary button style */
.btn-primary {
  background-color: #2563eb;
  color: #fff;
}

.btn-primary:hover {
  background-color: #1d4ed8; /* Darker on hover */
}

/* Outline button style */
.btn-outline {
  background: transparent;
  color: #111;
  border: 1px solid #d1d5db;
}

.btn-outline:hover {
  background: #f3f4f6;
}

/* Close button for cookie */
.btn-close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}



/** Toast for Game **/

/* Toast notification */
.toast {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  min-width: 250px;
  max-width: 300px;
  background: rgba(220, 38, 38, 0.9); /* red background for fail */
  color: white;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  font-size: 0.95rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 9999;
}

/* Toast visible */
.toast.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}