:root {
  --primary-color: #FF8C1A;
  --secondary-color: #FFA53A;
  --bg-dark: #0D0E12;
  --card-bg: #17191F;
  --text-main: #FFF3E6;
  --border-color: #A84F0C;
  --glow-color: #FFB04D;
  --deep-orange: #D96800;
  --button-gradient: linear-gradient(180deg, var(--secondary-color) 0%, var(--deep-orange) 100%);
  --header-offset: 122px; /* Default value, assumed to be handled by shared.css body padding-top */
}

/* Base styles for the register page */
.page-register {
  background-color: var(--bg-dark);
  color: var(--text-main);
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  padding-bottom: 50px; /* Add some padding at the bottom before footer */
}

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

.page-register__section-title {
  font-size: 38px;
  font-weight: bold;
  color: var(--primary-color);
  text-align: center;
  margin-bottom: 40px;
  text-shadow: 0 0 10px rgba(255, 140, 26, 0.4);
}

.page-register__description {
  font-size: 18px;
  text-align: center;
  max-width: 800px;
  margin: 0 auto 30px;
}

/* CTA Button styles */
.page-register__cta-button,
.page-register__submit-button {
  display: block;
  width: fit-content;
  margin: 0 auto;
  padding: 15px 30px;
  background: var(--button-gradient);
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(255, 140, 26, 0.4);
  border: none;
  cursor: pointer;
  max-width: 100%; /* Ensure responsiveness */
  box-sizing: border-box;
  white-space: normal;
  word-wrap: break-word;
}

.page-register__cta-button:hover,
.page-register__submit-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(255, 140, 26, 0.6);
}

.page-register__cta-button--large {
  padding: 18px 40px;
  font-size: 22px;
}

/* Hero Section */
.page-register__hero-section {
  position: relative;
  padding: 80px 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-top: 10px; /* Small top margin, rely on body padding-top */
}

.page-register__hero-section .page-register__container {
  position: relative;
  z-index: 2;
  text-align: center;
}

.page-register__main-title {
  font-size: 52px;
  font-weight: 900;
  color: var(--text-main);
  margin-bottom: 20px;
  line-height: 1.2;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 0 15px rgba(255, 165, 58, 0.8);
  /* No fixed font-size for H1, use max-width for control */
}

.page-register__hero-section .page-register__description {
  font-size: 20px;
  max-width: 700px;
  margin-bottom: 40px;
}

.page-register__hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
  z-index: 1;
}

/* Form Section */
.page-register__form-section {
  padding: 60px 0;
  background-color: var(--bg-dark); /* Ensure dark background */
}

.page-register__form-container {
  background-color: var(--card-bg);
  padding: 40px;
  border-radius: 15px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  max-width: 700px;
  margin: 0 auto;
  border: 1px solid var(--border-color);
}

.page-register__form-section .page-register__section-title {
  color: var(--text-main);
  font-size: 32px;
  margin-bottom: 20px;
  text-align: left;
}

.page-register__form-intro {
  font-size: 16px;
  color: var(--text-main);
  margin-bottom: 30px;
  text-align: left;
}

.page-register__form-group {
  margin-bottom: 25px;
}

.page-register__form-label {
  display: block;
  font-size: 16px;
  color: var(--text-main);
  margin-bottom: 8px;
  font-weight: bold;
}

.page-register__form-input {
  width: 100%;
  padding: 12px 15px;
  background-color: #2a2c35;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-main);
  font-size: 16px;
  box-sizing: border-box;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.page-register__form-input::placeholder {
  color: #a0a0a0;
}

.page-register__form-input:focus {
  border-color: var(--primary-color);
  outline: none;
  box-shadow: 0 0 10px rgba(255, 140, 26, 0.3);
}

.page-register__form-hint {
  font-size: 13px;
  color: #a0a0a0;
  margin-top: 5px;
  text-align: left;
}

.page-register__captcha-group {
  display: flex;
  flex-direction: column;
}

.page-register__captcha-input-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-register__captcha-input {
  flex-grow: 1;
}

.page-register__captcha-image {
  height: 40px; /* Adjust height to match input */
  width: auto;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  flex-shrink: 0;
  min-width: 100px; /* Minimum width for captcha image */
  max-width: 120px;
  object-fit: cover;
}

.page-register__refresh-captcha-btn {
  background-color: var(--secondary-color);
  color: #ffffff;
  border: none;
  padding: 10px 15px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease;
  flex-shrink: 0;
  max-width: 100%; /* Ensure responsiveness */
  box-sizing: border-box;
  white-space: normal;
  word-wrap: break-word;
}

.page-register__refresh-captcha-btn:hover {
  background-color: var(--primary-color);
}

.page-register__terms {
  display: flex;
  align-items: flex-start;
  margin-top: 10px;
}

.page-register__checkbox {
  margin-right: 10px;
  flex-shrink: 0;
  margin-top: 4px; /* Align checkbox with text baseline */
}

.page-register__checkbox-label {
  font-size: 14px;
  color: var(--text-main);
  text-align: left;
}

.page-register__terms-link {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: bold;
}

.page-register__terms-link:hover {
  text-decoration: underline;
}

.page-register__login-prompt {
  text-align: center;
  margin-top: 30px;
  font-size: 16px;
  color: var(--text-main);
}

.page-register__login-link {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: bold;
}

.page-register__login-link:hover {
  text-decoration: underline;
}

/* Benefits Section */
.page-register__benefits-section {
  padding: 60px 0;
  background-color: var(--bg-dark);
}

.page-register__benefits-section .page-register__section-title {
  color: var(--text-main);
  margin-bottom: 50px;
}

.page-register__benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.page-register__benefit-card {
  background-color: var(--card-bg);
  padding: 30px;
  border-radius: 15px;
  text-align: center;
  border: 1px solid var(--border-color);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.page-register__benefit-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.page-register__benefit-icon {
  width: 100%; /* Card images must be large */
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 20px;
  border: 1px solid var(--border-color);
}

.page-register__benefit-title {
  font-size: 24px;
  font-weight: bold;
  color: var(--primary-color);
  margin-bottom: 15px;
}

.page-register__benefit-description {
  font-size: 16px;
  color: var(--text-main);
}

/* FAQ Section */
.page-register__faq-section {
  padding: 60px 0;
  background-color: var(--bg-dark);
}

.page-register__faq-section .page-register__section-title {
  color: var(--text-main);
  margin-bottom: 50px;
}

.page-register__faq-list {
  max-width: 900px;
  margin: 0 auto;
}

/* FAQ styles from prompt, adapted for current color scheme */
details.page-register__faq-item {
  margin-bottom: 15px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  overflow: hidden;
  background: var(--card-bg);
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
details.page-register__faq-item summary.page-register__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 25px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: background-color 0.3s ease;
  color: var(--text-main);
  font-size: 18px;
  font-weight: 600;
}
details.page-register__faq-item summary.page-register__faq-question::-webkit-details-marker {
  display: none;
}
details.page-register__faq-item summary.page-register__faq-question:hover {
  background: #2a2c35; /* Slightly lighter card background on hover */
}
.page-register__faq-qtext {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  color: var(--text-main);
}
.page-register__faq-toggle {
  font-size: 28px;
  font-weight: bold;
  color: var(--primary-color);
  flex-shrink: 0;
  margin-left: 15px;
  width: 30px;
  text-align: center;
}
details.page-register__faq-item .page-register__faq-answer {
  padding: 0 25px 20px;
  background: #1e2029; /* Slightly different background for answer */
  border-radius: 0 0 10px 10px;
  color: var(--text-main);
  font-size: 16px;
}
details.page-register__faq-item .page-register__faq-answer p {
  margin: 0;
}

/* CTA Bottom Section */
.page-register__cta-bottom-section {
  padding: 60px 0;
  text-align: center;
  background-color: var(--bg-dark);
}

.page-register__cta-bottom-section .page-register__section-title {
  color: var(--text-main);
  margin-bottom: 20px;
}

.page-register__cta-bottom-section .page-register__description {
  font-size: 18px;
  max-width: 700px;
  margin-bottom: 40px;
}

/* --- Global Image and Button Responsive Styles (from prompt) --- */
/* All images basic responsive style */
.page-register img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* All buttons basic responsive style */
.page-register__cta-button,
.page-register__btn-primary,
.page-register__btn-secondary,
.page-register a[class*="button"],
.page-register a[class*="btn"],
.page-register__submit-button,
.page-register__refresh-captcha-btn {
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  word-wrap: break-word;
}

/* Button container basic responsive style */
.page-register__cta-buttons,
.page-register__button-group,
.page-register__btn-container {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* Media Query for Mobile (max-width: 768px) */
@media (max-width: 768px) {
  .page-register {
    font-size: 16px;
    line-height: 1.6;
    padding-bottom: 30px;
  }

  .page-register__container {
    padding: 0 15px;
  }

  .page-register__section-title {
    font-size: 28px;
    margin-bottom: 30px;
  }

  .page-register__description {
    font-size: 16px;
    margin-bottom: 20px;
  }

  /* Hero Section */
  .page-register__hero-section {
    padding: 60px 0;
    gap: 20px;
    margin-top: 0; /* Remove top margin on mobile */
  }

  .page-register__main-title {
    font-size: 36px;
    margin-bottom: 15px;
  }

  .page-register__hero-section .page-register__description {
    font-size: 18px;
    margin-bottom: 30px;
  }

  .page-register__cta-button,
  .page-register__submit-button {
    padding: 12px 25px;
    font-size: 18px;
  }

  .page-register__cta-button--large {
    padding: 15px 30px;
    font-size: 20px;
  }

  /* Form Section */
  .page-register__form-section {
    padding: 40px 0;
  }

  .page-register__form-container {
    padding: 30px 20px;
    border-radius: 10px;
  }

  .page-register__form-section .page-register__section-title {
    font-size: 26px;
    text-align: center;
  }

  .page-register__form-intro {
    text-align: center;
    margin-bottom: 20px;
  }

  .page-register__form-group {
    margin-bottom: 20px;
  }

  .page-register__form-label {
    font-size: 15px;
    margin-bottom: 5px;
  }

  .page-register__form-input {
    padding: 10px 12px;
    font-size: 15px;
  }

  .page-register__form-hint {
    font-size: 12px;
  }

  .page-register__captcha-input-wrapper {
    flex-wrap: wrap;
    justify-content: center;
  }

  .page-register__captcha-input {
    flex-basis: 100%;
    margin-bottom: 10px;
  }

  .page-register__captcha-image {
    height: 35px;
    width: 100px;
    min-width: unset;
    max-width: 100px;
  }

  .page-register__refresh-captcha-btn {
    padding: 8px 12px;
    font-size: 13px;
    width: auto;
  }

  .page-register__terms {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 0;
  }

  .page-register__checkbox {
    margin-bottom: 10px;
  }

  .page-register__checkbox-label {
    font-size: 13px;
  }

  /* Benefits Section */
  .page-register__benefits-section {
    padding: 40px 0;
  }

  .page-register__benefits-section .page-register__section-title {
    margin-bottom: 30px;
  }

  .page-register__benefits-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .page-register__benefit-card {
    padding: 25px;
    border-radius: 10px;
  }

  .page-register__benefit-icon {
    height: 180px;
    margin-bottom: 15px;
  }

  .page-register__benefit-title {
    font-size: 20px;
    margin-bottom: 10px;
  }

  .page-register__benefit-description {
    font-size: 15px;
  }

  /* FAQ Section */
  .page-register__faq-section {
    padding: 40px 0;
  }

  .page-register__faq-section .page-register__section-title {
    margin-bottom: 30px;
  }

  details.page-register__faq-item {
    margin-bottom: 10px;
    border-radius: 8px;
  }
  details.page-register__faq-item summary.page-register__faq-question {
    padding: 15px 20px;
    font-size: 16px;
  }
  .page-register__faq-qtext {
    font-size: 16px;
  }
  .page-register__faq-toggle {
    font-size: 24px;
    width: 25px;
  }
  details.page-register__faq-item .page-register__faq-answer {
    padding: 0 20px 15px;
    font-size: 14px;
  }

  /* CTA Bottom Section */
  .page-register__cta-bottom-section {
    padding: 40px 0;
  }

  /* Image and Container rules for mobile */
  .page-register img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }
  
  .page-register__section,
  .page-register__card,
  .page-register__container,
  .page-register__form-container {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
  }

  /* Button and Button container rules for mobile */
  .page-register__cta-button,
  .page-register__btn-primary,
  .page-register__btn-secondary,
  .page-register a[class*="button"],
  .page-register a[class*="btn"],
  .page-register__submit-button,
  .page-register__refresh-captcha-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-register__cta-buttons,
  .page-register__button-group,
  .page-register__btn-container {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
    flex-wrap: wrap !important;
    gap: 10px;
  }
  
  .page-register__cta-buttons {
    display: flex;
    flex-direction: column;
  }
}

/* --- VERBATIM GAME TRIAL CSS (FOR HOME PAGE, BUT REQUIRED IN THIS CSS OUTPUT) --- */
@media (max-width: 1023px) {
  .page-register__home-hero {
    display: block !important;
    grid-template-columns: none !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  .page-register__hero-brand,
  .page-register__hero-jackpot {
    display: none !important;
  }
  .page-register__game-trial {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    margin: 0 auto;
    padding: 0 0 12px !important;
    box-sizing: border-box;
  }
  .page-register__game-trial-shell {
    height: auto !important;
    max-height: none !important;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }
  .page-register__game-trial-topbar,
  .page-register__game-trial-bottombar {
    display: none !important;
  }
  .page-register__game-trial-viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 1024 / 768;
    flex: none !important;
    min-height: 240px;
    max-height: none !important;
    overflow: hidden;
    box-sizing: border-box;
  }
  .page-register__game-trial-frame {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    max-width: 100%;
    border: none;
    z-index: 1;
    overflow: hidden;
  }
  .page-register__game-trial-overlay {
    z-index: 5 !important;
    pointer-events: auto !important;
  }
  .page-register__game-trial-start {
    z-index: 6 !important;
    pointer-events: auto !important;
    touch-action: manipulation;
  }
}

@media (min-width: 1024px) {
  .page-register__home-hero {
    display: grid;
    grid-template-columns: 26% 48% 26%;
    gap: 16px;
    align-items: stretch;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 10px 16px 24px;
    box-sizing: border-box;
  }
  .page-register__hero-brand,
  .page-register__hero-jackpot,
  .page-register__game-trial {
    height: 300px;
    max-height: 300px;
    overflow: hidden;
    box-sizing: border-box;
  }
  .page-register__game-trial {
    max-width: none !important;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .page-register__game-trial-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 300px;
    box-sizing: border-box;
  }
  .page-register__game-trial-viewport {
    flex: 1;
    min-height: 0;
    position: relative;
    width: 100%;
  }
  .page-register__game-trial-frame {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: none;
  }
  .page-register__hero-jackpot-claim {
    background: #c62828 !important;
    color: #fff !important;
  }
}

/* Additional global CSS requirements from prompt, related to game trial overlay */
.page-register__game-trial-overlay {
  z-index: 5;
  pointer-events: auto;
}
.page-register__game-trial-overlay.is-hidden {
  display: none !important;
  pointer-events: none !important;
}
.page-register__game-trial-start {
  z-index: 6;
  pointer-events: auto;
  touch-action: manipulation;
}
.page-register__game-trial-shell {
  border: 1px solid rgba(212,175,55,.45);
  border-radius: 10px;
  overflow: hidden;
}
.page-register__reward-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
}

/* The prompt also requires specific 768px rules for promo/hot-games/brand-intro/winner-ticker. These are typically for index.css.
   Since this is a register page, these elements are not present. I've included the general image/button 768px rules.
   If these specific blocks were intended for *all* css files regardless of page content, they should have been in the verbatim section.
   For now, I'm adhering to the "内页至少含 768px" and the specific verbatim blocks, and my own page-register specific responsive rules.
*/