/* --- Import the Google Font --- */
/* This is also in the HTML head, but adding it here is good practice */
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');

/* --- Main Container (Optional) --- */
.fantasy-decision-container {
  display: flex;
  gap: 20px; /* Space between the buttons */
  font-family: 'Special Elite', cursive; /* Apply the cool font */
  padding: 20px;
}

/* --- Base Button Style --- */
.fantasy-btn {
  /* Box Model & Positioning */
  position: relative; /* Needed for the pseudo-elements */
  display: inline-block;
  padding: 18px 30px;
  
  /* Text & Appearance */
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 2px;
  border: none;
  
  /* The "Torn Paper" Effect */
  /* This SVG clip-path creates the jagged edges */
  clip-path: polygon(
    0% 15%, 5% 5%, 15% 0%, 25% 5%, 35% 2%, 45% 8%, 
    55% 3%, 65% 10%, 75% 4%, 85% 9%, 95% 2%, 100% 12%, 
    95% 98%, 90% 92%, 80% 100%, 70% 94%, 60% 99%, 50% 93%, 
    40% 100%, 30% 95%, 20% 99%, 10% 93%, 5% 100%
  );

  /* Interaction */
  cursor: pointer;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

/* --- Hover & Active States --- */
.fantasy-btn:hover {
  transform: translateY(-5px) rotate(-1deg);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

.fantasy-btn:active {
  transform: translateY(-2px) rotate(0.5deg);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}


/* --- START 'EM --- */
.start-em {
  background-color: #2c6b2f; /* A darker, grassy green */
  color: #c8e6c9; /* Light, faded green text */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  transform: rotate(-2deg); /* Slight initial rotation */
}

/* --- SIT 'EM --- */
.sit-em {
  background-color: #a02c2c; /* A darker, cautionary red */
  color: #ffcdd2; /* Light, faded red text */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  transform: rotate(2deg); /* Slight initial rotation in the other direction */
}