.page-casino {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333333; /* Default dark text for light body background */
  background-color: #FFFFFF;
}

.page-casino__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

.page-casino__section-title {
  font-size: 2.5em;
  color: #26A9E0;
  text-align: center;
  margin-bottom: 40px;
  font-weight: bold;
}

.page-casino__section-title--white {
  color: #FFFFFF;
}

.page-casino__paragraph {
  font-size: 1.1em;
  text-align: center;
  margin-bottom: 30px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.page-casino__paragraph--white {
  color: #FFFFFF;
}

.page-casino__cta-button {
  display: inline-block;
  padding: 15px 40px;
  background: #EA7C07; /* Login color */
  color: #ffffff;
  text-decoration: none;
  border-radius: 5px;
  font-size: 18px;
  font-weight: bold;
  margin-top: 30px;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  word-wrap: break-word;
}

.page-casino__cta-button:hover {
  background: #d66b00;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.page-casino__cta-button--centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.page-casino__btn-primary {
  display: inline-block;
  padding: 12px 30px;
  background: #26A9E0;
  color: #ffffff;
  text-decoration: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  word-wrap: break-word;
}

.page-casino__btn-primary:hover {
  background: #1e87bb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.page-casino__btn-secondary {
  display: inline-block;
  padding: 12px 30px;
  background: #FFFFFF;
  color: #26A9E0;
  text-decoration: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  transition: all 0.3s ease;
  border: 2px solid #26A9E0;
  cursor: pointer;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  word-wrap: break-word;
}

.page-casino__btn-secondary:hover {
  background: #f0f8ff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.page-casino__button-group {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.page-casino__button-group--center {
  margin-left: auto;
  margin-right: auto;
}

/* Hero Section */
.page-casino__hero-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
  padding-top: var(--header-offset, 120px); /* Fixed header offset */
  background: linear-gradient(135deg, #26A9E0, #FFFFFF);
}

.page-casino__hero-container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.page-casino__hero-image {
  width: 100%;
  margin-bottom: 30px;
}

.page-casino__hero-image img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  border-radius: 8px;
  object-fit: cover;
}

.page-casino__hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
}

.page-casino__main-heading {
  font-size: 3em;
  color: #FFFFFF;
  margin-bottom: 15px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.page-casino__intro-text {
  font-size: 1.2em;
  color: #FFFFFF;
  margin-bottom: 30px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

/* Intro Section */
.page-casino__intro-section {
  padding: 80px 0;
  background-color: #f8f8f8;
}

.page-casino__features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.page-casino__feature-item {
  text-align: center;
  padding: 20px;
  background: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.page-casino__feature-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.page-casino__feature-item img {
  width: 100%;
  height: auto;
  max-width: 200px; /* Small icon size is allowed for this type of feature item, but not less than 200px width for content images. This is an exception for icon type, but the prompt says NO small icons. So I will adjust to make sure it is at least 200x200 */
  min-width: 200px;
  min-height: 200px;
  margin-bottom: 15px;
  border-radius: 4px;
  object-fit: cover;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.page-casino__feature-title {
  font-size: 1.4em;
  color: #26A9E0;
  margin-bottom: 10px;
}

/* Games Section */
.page-casino__games-section {
  padding: 80px 0;
  background-color: #26A9E0;
}

.page-casino__game-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.page-casino__game-card {
  background: #FFFFFF;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.page-casino__game-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.page-casino__game-card img {
  width: 100%;
  height: 220px; /* Fixed height for consistency */
  object-fit: cover;
  display: block;
}

.page-casino__game-title {
  font-size: 1.5em;
  color: #26A9E0;
  padding: 15px 20px 0;
  margin-bottom: 5px;
}

.page-casino__game-link {
  text-decoration: none;
  color: #26A9E0;
  transition: color 0.3s ease;
}

.page-casino__game-link:hover {
  color: #1e87bb;
  text-decoration: underline;
}

.page-casino__game-description {
  font-size: 0.95em;
  color: #555555;
  padding: 0 20px 20px;
}

/* Promotions Section */
.page-casino__promotions-section {
  padding: 80px 0;
  background-color: #f8f8f8;
}

.page-casino__promo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.page-casino__promo-card {
  background: #FFFFFF;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
}

.page-casino__promo-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.page-casino__promo-card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
}

.page-casino__promo-title {
  font-size: 1.4em;
  color: #26A9E0;
  padding: 15px 20px 0;
  margin-bottom: 5px;
}

.page-casino__promo-link {
  text-decoration: none;
  color: #26A9E0;
  transition: color 0.3s ease;
}

.page-casino__promo-link:hover {
  color: #1e87bb;
  text-decoration: underline;
}

.page-casino__promo-description {
  font-size: 0.95em;
  color: #555555;
  padding: 0 20px 20px;
  margin-bottom: 20px;
}

/* Security & Support Section */
.page-casino__security-support-section {
  padding: 80px 0;
  background-color: #26A9E0;
}

.page-casino__info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.page-casino__info-item {
  text-align: center;
  padding: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #FFFFFF;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.page-casino__info-item img {
   /* Specific size for icon type */
  
  margin-bottom: 15px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  object-fit: contain;
}

.page-casino__info-title {
  font-size: 1.3em;
  color: #FFFFFF;
  margin-bottom: 10px;
}

/* FAQ Section */
.page-casino__faq-section {
  padding: 80px 0;
  background-color: #f8f8f8;
}

.page-casino__faq-list {
  margin-top: 40px;
}

.page-casino__faq-item {
  margin-bottom: 15px;
  border-radius: 5px;
  overflow: hidden;
}

.page-casino__faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease;
  padding: 0 15px;
  opacity: 0;
}

.page-casino__faq-item.active .page-casino__faq-answer {
  max-height: 2000px !important; /* Ensure it expands */
  padding: 20px 15px !important;
  opacity: 1;
  background: #f9f9f9;
  border-radius: 0 0 5px 5px;
}

.page-casino__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  position: relative;
}

.page-casino__faq-question:hover {
  background: #f5f5f5;
  border-color: #d0d0d0;
}

.page-casino__faq-question:active {
  background: #eeeeee;
}

.page-casino__faq-question h3 {
  margin: 0;
  padding: 0;
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  pointer-events: none;
}

.page-casino__faq-toggle {
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
  color: #666;
  transition: transform 0.3s ease, color 0.3s ease;
  flex-shrink: 0;
  margin-left: 15px;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

.page-casino__faq-item.active .page-casino__faq-toggle {
  color: #333;
}

/* News Section */
.page-casino__news-section {
  padding: 80px 0;
  background-color: #26A9E0;
}

.page-casino__news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.page-casino__news-card {
  background: #FFFFFF;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.page-casino__news-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.page-casino__news-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.page-casino__news-title {
  font-size: 1.3em;
  color: #26A9E0;
  padding: 15px 20px 0;
  margin-bottom: 5px;
}

.page-casino__news-link {
  text-decoration: none;
  color: #26A9E0;
  transition: color 0.3s ease;
}

.page-casino__news-link:hover {
  color: #1e87bb;
  text-decoration: underline;
}

.page-casino__news-excerpt {
  font-size: 0.9em;
  color: #555555;
  padding: 0 20px;
}

.page-casino__news-date {
  font-size: 0.8em;
  color: #888888;
  display: block;
  padding: 10px 20px 20px;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .page-casino__main-heading {
    font-size: 2.5em;
  }
  .page-casino__section-title {
    font-size: 2em;
  }
}

@media (max-width: 768px) {
  .page-casino {
    font-size: 16px;
    line-height: 1.6;
  }

  .page-casino__hero-section {
    padding-top: var(--header-offset, 120px) !important;
    padding-bottom: 40px;
    padding-left: 15px;
    padding-right: 15px;
  }
  
  .page-casino__hero-image img {
    border-radius: 4px;
  }
  
  .page-casino__main-heading {
    font-size: 2em;
  }

  .page-casino__intro-text {
    font-size: 1em;
  }

  .page-casino__cta-button,
  .page-casino__btn-primary,
  .page-casino__btn-secondary,
  .page-casino a[class*="button"],
  .page-casino a[class*="btn"] {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    padding-left: 15px;
    padding-right: 15px;
  }
  
  .page-casino__button-group,
  .page-casino__btn-container {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
    flex-direction: column !important;
    gap: 10px;
  }

  .page-casino__container {
    padding-left: 15px;
    padding-right: 15px;
  }

  .page-casino__section-title {
    font-size: 1.8em;
    margin-bottom: 30px;
  }

  .page-casino__paragraph {
    font-size: 1em;
  }

  .page-casino__feature-item img {
     /* Adjusted from 200px to 150px for mobile in this context, but still >= 200px as per global rule. Reverting to 200px min-width. */
    min-width: 200px !important; /* Enforce global minimum */
    min-height: 200px !important; /* Enforce global minimum */
  }

  .page-casino__game-card img,
  .page-casino__promo-card img,
  .page-casino__news-card img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }

  .page-casino__info-item img {
    
    
  }
  
  .page-casino__faq-question {
    padding: 15px;
    flex-wrap: wrap;
  }
  
  .page-casino__faq-question h3 {
    font-size: 15px;
    margin-bottom: 0;
    width: calc(100% - 40px);
  }
  
  .page-casino__faq-toggle {
    margin-left: 10px;
    width: 24px;
    height: 24px;
    font-size: 20px;
  }
  
  .page-casino__faq-answer {
    padding: 0 15px;
  }
  
  .page-casino__faq-item.active .page-casino__faq-answer {
    padding: 15px !important;
  }
}

/* Global image rules for content area - ensure min-width/height */
.page-casino img:not(.page-casino__info-item img) {
  min-width: 200px;
  min-height: 200px;
}

/* Override specific icon sizing from global rule if needed, but ensure contrast/visibility */
.page-casino__info-item img {
  
  
  object-fit: contain;
  min-width: unset; /* Allow smaller for icons, but this is a specific override for small icons which were prohibited. Reverting to larger sizes or removing icons. The prompt states "禁止所有小图标" and "任何宽度或高度小于200像素的图片". I will remove the small icons and replace them with images that are at least 200x200. */
  min-height: unset;
}

/* Adjusting info-item images to meet minimum size requirement */
.page-casino__info-item img {
  width: 200px;
  height: 200px;
  object-fit: contain;
  margin-bottom: 15px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .page-casino__info-item img {
     /* Still needs to be at least 200px, so this is problematic. */
    
    /* Reverting to 200x200 for mobile too, as per strict rules */
    width: 200px !important;
    height: 200px !important;
  }
}