.page-blog-af888-game-strategy {
  --primary-color: #11A84E;
  --secondary-color: #22C768;
  --button-gradient: linear-gradient(180deg, #2AD16F 0%, #13994A 100%);
  --card-bg: #11271B;
  --background-color: #08160F;
  --text-main-color: #F2FFF6;
  --text-secondary-color: #A7D9B8;
  --border-color: #2E7A4E;
  --glow-color: #57E38D;
  --gold-color: #F2C14E;
  --divider-color: #1E3A2A;
  --deep-green-color: #0A4B2C;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: var(--text-main-color); /* Body background is dark, so text should be light */
  background-color: var(--background-color);
}

.page-blog-af888-game-strategy__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.page-blog-af888-game-strategy__hero-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 10px; /* Small top padding, body handles --header-offset */
  padding-bottom: 60px;
  overflow: hidden;
}

.page-blog-af888-game-strategy__hero-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  filter: brightness(0.7); /* Darken image for text readability */
}

.page-blog-af888-game-strategy__hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 900px;
  color: var(--text-main-color);
  z-index: 10;
  padding: 20px;
  box-sizing: border-box;
}

/* The above absolute positioning for hero-content is specifically allowed here because the prompt explicitly stated "强制上图下文、禁止在主图上叠字" and then "The above absolute positioning for hero-content is specifically allowed here because the prompt explicitly stated \"强制上图下文、禁止在主图上叠字\" and then "禁止叠层" for text *on* the image. However, the first rule "强制上图下文" implies that the image block should come first, then the text block. The current HTML structure has the image first, then the content, but the content is absolutely positioned. I need to adjust this to strictly follow the "上图下文" rule, meaning the text should not overlap the image, but be below it in the normal document flow. */
/* Re-evaluating the hero section based on "强制上图下文、禁止在主图上叠字" */
/* This means the hero image and hero content should be siblings, stacked vertically, with the image first. */
/* The absolute positioning of hero-content is against this rule. I will remove it and stack them normally. */

.page-blog-af888-game-strategy__hero-section {
  position: relative;
  display: flex;
  flex-direction: column; /* Stack image and content vertically */
  align-items: center;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 60px;
  overflow: hidden;
  background-color: var(--deep-green-color); /* A solid background for the section */
}

.page-blog-af888-game-strategy__hero-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  max-height: 500px; /* Limit height for better visual balance */
  filter: brightness(0.8); /* Slightly darken for better contrast with text below */
}

.page-blog-af888-game-strategy__hero-content {
  width: 100%;
  max-width: 900px;
  color: var(--text-main-color);
  padding: 40px 20px;
  box-sizing: border-box;
}

.page-blog-af888-game-strategy__main-title {
  font-size: clamp(2rem, 5vw, 3rem); /* Responsive font size, not fixed large */
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 20px;
  color: var(--gold-color);
}

.page-blog-af888-game-strategy__description {
  font-size: 1.1rem;
  margin-bottom: 30px;
  color: var(--text-secondary-color);
}

.page-blog-af888-game-strategy__cta-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.page-blog-af888-game-strategy__btn-primary,
.page-blog-af888-game-strategy__btn-secondary {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
  box-sizing: border-box;
  max-width: 100%;
  white-space: normal;
  word-wrap: break-word;
}

.page-blog-af888-game-strategy__btn-primary {
  background: var(--button-gradient);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.page-blog-af888-game-strategy__btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

.page-blog-af888-game-strategy__btn-secondary {
  background-color: transparent;
  color: var(--gold-color);
  border: 2px solid var(--gold-color);
}

.page-blog-af888-game-strategy__btn-secondary:hover {
  background-color: var(--gold-color);
  color: var(--deep-green-color);
}

.page-blog-af888-game-strategy__content-section {
  padding: 60px 0;
  background-color: var(--background-color);
  color: var(--text-main-color);
}

.page-blog-af888-game-strategy__dark-section {
  background-color: var(--deep-green-color);
}

.page-blog-af888-game-strategy__section-title {
  font-size: 2.5rem;
  font-weight: bold;
  color: var(--gold-color);
  text-align: center;
  margin-bottom: 40px;
}

.page-blog-af888-game-strategy__sub-title {
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--primary-color);
  margin-top: 40px;
  margin-bottom: 20px;
}

.page-blog-af888-game-strategy__text-block {
  font-size: 1.1rem;
  margin-bottom: 20px;
  color: var(--text-secondary-color);
}

.page-blog-af888-game-strategy__image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  margin: 40px auto;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  max-width: 100%; /* Ensure responsiveness */
  object-fit: cover;
}

.page-blog-af888-game-strategy__cta-section {
  background: var(--button-gradient);
  padding: 80px 20px;
  text-align: center;
  color: #ffffff;
}

.page-blog-af888-game-strategy__cta-title {
  font-size: 2.8rem;
  font-weight: bold;
  margin-bottom: 20px;
  color: #ffffff;
}

.page-blog-af888-game-strategy__cta-description {
  font-size: 1.2rem;
  margin-bottom: 40px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.page-blog-af888-game-strategy__faq-section {
  padding: 60px 0;
  color: var(--text-main-color);
}

.page-blog-af888-game-strategy__faq-list {
  margin-top: 40px;
}

.page-blog-af888-game-strategy__faq-item {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 15px;
  overflow: hidden;
}

.page-blog-af888-game-strategy__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--text-main-color);
  cursor: pointer;
  list-style: none; /* For details/summary */
}

.page-blog-af888-game-strategy__faq-question::-webkit-details-marker {
  display: none;
}

.page-blog-af888-game-strategy__faq-toggle {
  font-size: 1.5rem;
  line-height: 1;
  margin-left: 15px;
  color: var(--gold-color);
}

.page-blog-af888-game-strategy__faq-answer {
  padding: 0 20px 20px;
  font-size: 1rem;
  color: var(--text-secondary-color);
}

/* Responsive Styles */
@media (max-width: 1024px) {
  .page-blog-af888-game-strategy__main-title {
    font-size: clamp(1.8rem, 4.5vw, 2.5rem);
  }
  .page-blog-af888-game-strategy__section-title {
    font-size: 2rem;
  }
  .page-blog-af888-game-strategy__sub-title {
    font-size: 1.6rem;
  }
  .page-blog-af888-game-strategy__cta-title {
    font-size: 2.2rem;
  }
}

@media (max-width: 768px) {
  .page-blog-af888-game-strategy__hero-section {
    padding-bottom: 40px;
  }
  .page-blog-af888-game-strategy__hero-content {
    padding: 20px 15px;
  }
  .page-blog-af888-game-strategy__main-title {
    font-size: clamp(1.5rem, 6vw, 2rem);
    margin-bottom: 15px;
  }
  .page-blog-af888-game-strategy__description {
    font-size: 1rem;
    margin-bottom: 25px;
  }
  .page-blog-af888-game-strategy__cta-buttons {
    flex-direction: column;
    gap: 15px;
  }
  .page-blog-af888-game-strategy__btn-primary,
  .page-blog-af888-game-strategy__btn-secondary {
    width: 100% !important; /* Force full width */
    max-width: 100% !important;
    padding: 12px 20px;
    white-space: normal !important;
    word-wrap: break-word !important;
  }
  .page-blog-af888-game-strategy__container {
    padding: 0 15px;
  }
  .page-blog-af888-game-strategy__content-section {
    padding: 40px 0;
  }
  .page-blog-af888-game-strategy__section-title {
    font-size: 1.8rem;
    margin-bottom: 30px;
  }
  .page-blog-af888-game-strategy__sub-title {
    font-size: 1.4rem;
    margin-top: 30px;
    margin-bottom: 15px;
  }
  .page-blog-af888-game-strategy__text-block {
    font-size: 1rem;
  }
  .page-blog-af888-game-strategy__image {
    margin: 30px auto;
  }
  .page-blog-af888-game-strategy__cta-section {
    padding: 60px 15px;
  }
  .page-blog-af888-game-strategy__cta-title {
    font-size: 1.8rem;
  }
  .page-blog-af888-game-strategy__cta-description {
    font-size: 1rem;
  }
  .page-blog-af888-game-strategy__faq-section {
    padding: 40px 0;
  }
  .page-blog-af888-game-strategy__faq-question {
    font-size: 1rem;
    padding: 15px;
  }
  .page-blog-af888-game-strategy__faq-answer {
    padding: 0 15px 15px;
    font-size: 0.95rem;
  }
  /* Mobile image responsiveness */
  .page-blog-af888-game-strategy img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
  .page-blog-af888-game-strategy__section,
  .page-blog-af888-game-strategy__card,
  .page-blog-af888-game-strategy__container {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
  }
  .page-blog-af888-game-strategy__video-section {
    padding-top: 10px !important; /* body handles --header-offset */
  }
  /* Video responsiveness */
  .page-blog-af888-game-strategy video,
  .page-blog-af888-game-strategy__video {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
  .page-blog-af888-game-strategy__video-section,
  .page-blog-af888-game-strategy__video-container,
  .page-blog-af888-game-strategy__video-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
    overflow: hidden !important;
  }
  .page-blog-af888-game-strategy__video-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}