/* Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap");

/* Global Styles */
body {
  font-family: "Inter", sans-serif;
}

/* Content Wrapper with darker gradient */
.content-wrapper {
  background: linear-gradient(135deg, hsl(222 47% 8%), hsl(222 47% 4%));
}

/* Card with subtle gradient */
.card-gradient {
  background: linear-gradient(
    135deg,
    hsl(222 45% 12% / 0.6),
    hsl(222 47% 7% / 0.6)
  );
}

/* Accent Glow Animation */
@keyframes glow-pulse {
  0%,
  100% {
    box-shadow: 0 0 20px hsl(84 81% 44% / 0.5);
  }
  50% {
    box-shadow: 0 0 40px hsl(84 81% 44% / 0.8);
  }
}

.accent-glow {
  box-shadow: 0 0 20px hsl(84 81% 44% / 0.5);
}

.animate-glow-pulse {
  animation: glow-pulse 2s ease-in-out infinite;
}

/* Button Pulse Animation */
@keyframes button-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.85;
  }
}

.animate-pulse-glow {
  animation: button-pulse 2s ease-in-out infinite;
}

/* Match Row with Flag Fade Effect */
.match-row {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
}

/* Left flag fade - schuin afgeknipt van linksboven naar rechtsboven (135deg) */
.match-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--flag-left);
  background-size: auto 120%;
  background-position: left center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
  opacity: 0.8;
  mask-image: var(--mask-left);
  -webkit-mask-image: var(--mask-left);
}

/* Right flag fade - schuin afgeknipt van linksonder naar rechtsboven (45deg) */
.match-row::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--flag-right);
  background-size: auto 120%;
  background-position: right center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
  opacity: 0.8;
  mask-image: var(--mask-right);
  -webkit-mask-image: var(--mask-right);
}

.match-row > * {
  position: relative;
  z-index: 1;
}

/* Progress Dots */
.progress-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background-color: hsl(0 0% 40%);
  transition: all 0.3s ease;
}

.progress-dot.active {
  width: 24px;
  height: 8px;
  background-color: hsl(84 81% 44%);
  box-shadow: 0 0 12px hsl(84 81% 44% / 0.6);
}

.progress-dot.completed {
  width: 8px;
  height: 8px;
  background-color: hsl(84 81% 44%);
}

/* Option Buttons */
.option-button {
  width: 100%;
  padding: 1rem;
  border: 1px solid hsl(0 0% 30%);
  border-radius: 0.5rem;
  background: linear-gradient(
    135deg,
    hsl(222 45% 14% / 0.5),
    hsl(222 47% 9% / 0.5)
  );
  color: hsl(0 0% 100%);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.option-button:hover:not(:disabled) {
  border-color: hsl(84 81% 44% / 0.5);
  background: linear-gradient(
    135deg,
    hsl(222 45% 16% / 0.7),
    hsl(222 47% 11% / 0.7)
  );
  box-shadow: 0 0 12px hsl(84 81% 44% / 0.2);
}

.option-button:active:not(:disabled) {
  background: linear-gradient(
    135deg,
    hsl(222 45% 16% / 0.9),
    hsl(222 47% 11% / 0.9)
  );
  border-color: hsl(84 81% 44%);
  box-shadow: 0 0 20px hsl(84 81% 44% / 0.4);
}

/* Nav Buttons */
.nav-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid hsl(0 0% 30%);
  border-radius: 0.5rem;
  background: transparent;
  color: hsl(0 0% 100%);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nav-button:hover:not(:disabled) {
  border-color: hsl(84 81% 44% / 0.5);
  color: hsl(84 81% 44%);
}

.nav-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.nav-button.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Fade In Animation */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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