body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
    background-color: #121212; 
    color: #e1e1e1; 
    max-width: 800px; 
    margin: 20px auto; 
    padding: 20px; 
}
h1, h2 { 
    color: #e60000; /* Angry red */
    border-bottom: 2px solid #e60000; 
    padding-bottom: 10px;
}
h3 {
    color: #ccc;
    border-bottom: 1px solid #444;
}
p {
    line-height: 1.6;
    font-size: 1.1em;
}
ul {
    background-color: #1e1e1e;
    border: 1px solid #333;
    padding: 15px;
    list-style-position: inside;
}
li {
    margin-bottom: 10px;
}
a {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 15px;
    background-color: #e60000;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
}
a:hover {
    background-color: #ff3333;
}
.score {
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    margin: 20px 0;
    padding: 15px;
    background-color: #1e1e1e;
    border: 1px solid #333;
}
.win { color: #a3ffa3; }

.loss { color: #ffadad; }
/* This container uses Flexbox to line up its children (the image cards) in a row. */
.fantasy-shame-container {
  display: flex;
  justify-content: space-around; /* Spreads the images out evenly */
  flex-wrap: wrap; /* Allows images to stack on small screens */
  gap: 20px; /* Adds some space between the images */
  margin-top: 20px;
}

/* This styles each individual image "card" */
.image-card {
  border: 1px solid #ccc; /* A light gray border */
  border-radius: 8px; /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* A subtle shadow */
  padding: 10px;
  text-align: center; /* Centers the caption text */
  background-color: #f9f9f9; /* A slight off-white background */
}

/* This makes sure the images fit nicely inside their "card" */
.image-card img {
  max-width: 300px; /* Adjust this width as needed */
  height: auto; /* Keeps the image's aspect ratio */
  border-radius: 4px; /* Slightly rounded corners on the image itself */
}

/* Styles the caption text */
.image-card p {
  font-family: Arial, sans-serif;
  font-style: italic;
  color: #555;
  margin-top: 10px;
}
.fantasy-shame-stacked {
  display: flex;
  flex-direction: column; /* Stacks the items vertically */
  align-items: center; /* Centers them on the page */
  gap: 25px; /* Adds space between the two images */
  margin-top: 20px;
}

.fantasy-shame-stacked img {
  max-width: 80%; /* Makes the image responsive, up to 80% of the container */
  height: auto;
  border: 2px solid #ddd; /* A simple border */
  border-radius: 8px; /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* A subtle shadow */
}