/* Include padding and borders in element dimensions */
* {
  box-sizing: border-box;
}

/* Base page styles */
body {
  margin: 0;
  background-color: #f5f6f7;
  font-family: Arial, sans-serif;
  color: #222;
}

/* White container for the page content */
main {
  max-width: 800px;
  margin: 24px auto;
  padding: 28px;
  background-color: white;
}

/* Page heading */
h1 {
  margin-top: 0;
  font-size: 28px;
  font-weight: 500;
}

/* Paragraph styles */
p {
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 20px;
}

/* Center the logo */
main img {
  display: block;
  width: 200px;
  max-width: 100%;
  height: auto;
  margin: 24px auto 12px;
  border-radius: 20px;
}

/* Adjust the layout for mobile screens */
@media (max-width: 600px) {
  main {
    margin: 12px;
    padding: 20px;
  }

  h1 {
    font-size: 24px;
  }
}
/* Yellow header */
.site-header {
  background-color: rgb(252, 190, 5);
}


/* Align the header logo with the page content */
.navigation {
  max-width: 800px;
  margin: 0 auto;
  padding: 12px 28px;
  display: flex;
  align-items: center;
}

/* Header logo link */
.brand {
  display: block;
  flex-shrink: 0;
}

/* Header logo image */
.brand img {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 10px;
}


/* Navigation links */
.navigation a {
  color: #222222;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

/* Highlight the current page */
.navigation a.active {
  color: #222222;
  padding: 8px 0;
  border-bottom: 2px solid #222222;
}

/* Mobile navigation spacing */
@media (max-width: 600px) {
  .navigation {
    padding: 12px 20px;
    gap: 20px;
  }
}/* Section heading with a yellow gradient */
.section-title {
  margin: 24px 0 16px;
  padding: 12px 20px;
  background: linear-gradient(
    to right,
    rgb(210, 145, 0),
    rgb(252, 190, 5),
    rgb(255, 224, 100)
  );
  color: #222222;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  border-left: 4px solid rgb(180, 120, 0);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(180, 120, 0, 0.2);
}/* Center the button below the logo */
.button-container {
  text-align: center;
  margin-bottom: 24px;
}

/* Register and download button */
.register-button {
  display: inline-block;
  padding: 12px 24px;
  border: none;
  border-radius: 30px;
  background: linear-gradient(
    to right,
    rgb(210, 145, 0),
    rgb(252, 190, 5),
    rgb(255, 224, 100)
  );
  color: #222222;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(180, 120, 0, 0.25);
}

/* Highlight the button on hover */
.register-button:hover {
  filter: brightness(1.05);
}

/* Show keyboard focus */
.register-button:focus-visible {
  outline: 3px solid #222222;
  outline-offset: 4px;
}
/* Links within the page content */
.text-link {
  color: #0066cc;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.text-link:hover {
  color: #004499;
}/* Rounded container for the information table */
.table-container {
  margin-top: 24px;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(180, 120, 0, 0.1);
}

/* App information table */
.app-info-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 14px;
  line-height: 1.6;
}

/* Table cell spacing and borders */
.app-info-table th,
.app-info-table td {
  padding: 12px 16px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid #f0dfaa;
  overflow-wrap: anywhere;
}

/* Table header without a background */
.app-info-table thead {
  background: transparent;
  color: #222222;
}

/* Make column headings stand out */
.app-info-table thead th {
  font-size: 16px;
  font-weight: 700;
  border-bottom: 2px solid #d4a000;
}

/* Row labels */
.app-info-table tbody th {
  font-weight: 400;
}

/* Alternate row backgrounds */
.app-info-table tbody tr:nth-child(odd) {
  background-color: #fff9e6;
}

.app-info-table tbody tr:nth-child(even) {
  background-color: #ffffff;
}

/* Divider between columns */
.app-info-table th:first-child {
  border-right: 1px solid #f0dfaa;
}

/* Remove the bottom border from the final row */
.app-info-table tbody tr:last-child th,
.app-info-table tbody tr:last-child td {
  border-bottom: none;
}

/* Smaller spacing on mobile screens */
@media (max-width: 600px) {
  .app-info-table th,
  .app-info-table td {
    padding: 10px 8px;
    font-size: 13px;
  }
}
/* Platform overview section */
.platform-overview {
  margin-top: 40px;
}

/* Left-aligned section heading */
.overview-title {
  margin: 0 0 24px;
  color: #222222;
  font-size: 26px;
  line-height: 1.3;
}

/* Short yellow accent below the heading */
.overview-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin-top: 12px;
  background-color: rgb(252, 190, 5);
  border-radius: 4px;
}

/* Three-column card layout */
.overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* Individual information card */
.overview-card {
  padding: 22px;
  background-color: #fffdf5;
  border: 1px solid #eee3bf;
  border-radius: 14px;
}

/* Small category label */
.overview-label {
  color: #705200;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
}

/* Card heading */
.overview-card h3 {
  margin: 12px 0;
  color: #222222;
  font-size: 19px;
  line-height: 1.4;
}

/* Card description */
.overview-card p {
  margin: 0;
  color: #444444;
  font-size: 14px;
  line-height: 1.7;
}

/* Stack the cards on smaller screens */
@media (max-width: 700px) {
  .overview-grid {
    grid-template-columns: 1fr;
  }

  .overview-title {
    font-size: 24px;
  }
}/* Registration guide section */
.registration-guide {
  margin-top: 40px;
}

/* Registration steps container */
.registration-steps {
  margin-top: 24px;
  padding: 24px;
  background-color: #ffffff;
  border: 1px solid #eee3bf;
  border-radius: 14px;
}

/* Steps heading */
.registration-steps h3 {
  margin: 0 0 20px;
  color: #222222;
  font-size: 20px;
  line-height: 1.4;
}

/* Numbered registration instructions */
.registration-steps ol {
  margin: 0;
  padding-left: 26px;
}

/* Individual registration step */
.registration-steps li {
  padding-left: 8px;
  margin-bottom: 14px;
  font-size: 15px;
  line-height: 1.7;
}

.registration-steps li:last-child {
  margin-bottom: 0;
}

/* Emphasize step numbers */
.registration-steps li::marker {
  color: #705200;
  font-weight: 700;
}

/* Account security note */
.registration-note {
  margin: 20px 0 0;
  padding: 16px 20px;
  background-color: #fff9e6;
  border-left: 4px solid rgb(252, 190, 5);
  border-radius: 0 10px 10px 0;
}

/* Adjust spacing on mobile screens */
@media (max-width: 600px) {
  .registration-steps {
    padding: 18px;
  }
}/* Registration image below the heading */
.registration-guide .registration-image {
  display: block;
  width: 280px;
  max-width: 100%;
  height: auto;
  margin: 24px auto;
  border-radius: 12px;
}/* Login guide section */
.login-guide {
  margin-top: 40px;
}

/* Login screenshot */
.login-guide .login-image {
  display: block;
  width: 280px;
  max-width: 100%;
  height: auto;
  margin: 24px auto;
  border-radius: 12px;
}

/* Login instructions list */
.registration-steps ul {
  margin: 0;
  padding-left: 26px;
}

/* Space between the login steps and the next paragraph */
.login-guide .registration-steps {
  margin-bottom: 24px;
}/* Available games section */
.games-guide {
  margin-top: 40px;
}

/* Separate each game category */
.game-category {
  margin-top: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #eee3bf;
}

/* Game category heading */
.game-category h3 {
  margin: 0 0 14px;
  padding-left: 12px;
  border-left: 4px solid rgb(252, 190, 5);
  color: #222222;
  font-size: 20px;
  line-height: 1.4;
}

/* Remove extra space after the final paragraph */
.game-category p:last-child {
  margin-bottom: 0;
}

/* Remove the divider after the final category */
.game-category:last-child {
  padding-bottom: 0;
  border-bottom: none;
}/* APK download guide section */
.download-guide {
  margin-top: 40px;
}/* Dark panel for the download guide */
.download-steps {
  margin-top: 24px;
  padding: 24px;
  background: linear-gradient(135deg, #27241c, #141414);
  border: 1px solid #514427;
  border-radius: 20px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

/* Two-column step layout */
.download-steps ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: download-step;
}

/* Individual step card */
.download-steps li {
  position: relative;
  counter-increment: download-step;
  min-width: 0;
  margin: 0;
  padding: 64px 18px 20px;
  background-color: #252525;
  border: 1px solid #454035;
  border-radius: 14px;
  color: #eeeeee;
  font-size: 14px;
  line-height: 1.7;
}

/* Gold step number */
.download-steps li::before {
  content: counter(download-step, decimal-leading-zero);
  position: absolute;
  top: 16px;
  left: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: linear-gradient(
    135deg,
    rgb(252, 190, 5),
    #ffe795
  );
  border-radius: 10px;
  color: #222222;
  font-size: 14px;
  font-weight: 700;
}

/* Highlight important actions */
.download-steps strong {
  color: #ffda65;
}

/* Single-column layout on mobile */
@media (max-width: 600px) {
  .download-steps {
    padding: 16px;
    border-radius: 16px;
  }

  .download-steps ol {
    grid-template-columns: 1fr;
  }
}/* Deposit guide section */
.deposit-guide {
  margin-top: 40px;
}

/* Deposit instructions panel */
.deposit-steps {
  margin: 24px 0;
  padding: 24px;
  background-color: #ffffff;
  border: 1px solid #eee3bf;
  border-top: 4px solid rgb(252, 190, 5);
  border-radius: 14px;
}

/* Deposit panel heading */
.deposit-steps h3 {
  margin: 0 0 20px;
  color: #222222;
  font-size: 20px;
  line-height: 1.4;
}

/* Numbered deposit instructions */
.deposit-steps ol {
  margin: 0;
  padding-left: 26px;
}

/* Individual deposit step */
.deposit-steps li {
  padding: 12px 0 12px 8px;
  border-bottom: 1px solid #f1ead6;
  color: #333333;
  font-size: 15px;
  line-height: 1.7;
}

/* Emphasize step numbers */
.deposit-steps li::marker {
  color: #705200;
  font-weight: 700;
}

/* Remove the final divider */
.deposit-steps li:last-child {
  border-bottom: none;
}

/* Adjust panel spacing on mobile */
@media (max-width: 600px) {
  .deposit-steps {
    padding: 18px;
  }
}/* Withdrawal guide section */
.withdrawal-guide {
  margin-top: 40px;
}

/* Withdrawal instructions container */
.withdrawal-steps {
  margin: 24px 0;
  padding: 24px;
  border: 1px solid #eee3bf;
  border-radius: 14px;
}

/* Subsection headings */
.withdrawal-steps h3,
.withdrawal-information h3 {
  margin: 0 0 20px;
  color: #222222;
  font-size: 20px;
  line-height: 1.4;
}

/* Main withdrawal steps */
.withdrawal-steps > ol {
  margin: 0;
  padding-left: 26px;
}

/* Separate the main steps */
.withdrawal-steps > ol > li {
  padding: 0 0 20px 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee3bf;
}

/* Main step numbers */
.withdrawal-steps > ol > li::marker {
  color: #705200;
  font-weight: 700;
}

/* Individual step heading */
.withdrawal-steps h4 {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.5;
}

/* Step descriptions */
.withdrawal-steps p {
  margin: 0;
}

/* Payment method list */
.withdrawal-steps ul {
  margin: 10px 0 0;
  padding-left: 20px;
}

.withdrawal-steps ul li {
  font-size: 15px;
  line-height: 1.7;
}

/* Remove the final step divider */
.withdrawal-steps > ol > li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* Withdrawal information box */
.withdrawal-information {
  padding: 20px;
  background-color: #fff9e6;
  border-left: 4px solid rgb(252, 190, 5);
  border-radius: 0 12px 12px 0;
}

.withdrawal-information h3 {
  margin-bottom: 12px;
}

.withdrawal-information p:last-child {
  margin-bottom: 0;
}

/* Mobile spacing */
@media (max-width: 600px) {
  .withdrawal-steps {
    padding: 18px;
  }
}/* Final informational sections */
.gift-guide,
.responsible-guide,
.disclaimer-guide {
  margin-top: 40px;
}

/* Disclaimer panel */
.disclaimer-content {
  padding: 24px;
  background-color: #f7f7f7;
  border: 1px solid #e4e4e4;
  border-radius: 14px;
}

/* Disclaimer text */
.disclaimer-content p {
  color: #444444;
  font-size: 14px;
  line-height: 1.8;
}

/* Remove extra spacing after the final paragraph */
.disclaimer-content p:last-child {
  margin-bottom: 0;
}

/* Mobile panel spacing */
@media (max-width: 600px) {
  .disclaimer-content {
    padding: 18px;
  }
}/* Final thoughts section */
.final-thoughts {
  margin-top: 40px;
}/* Frequently asked questions section */
.faq-guide {
  margin-top: 40px;
}

/* Space between FAQ items */
.faq-list {
  display: grid;
  gap: 12px;
}

/* Individual FAQ container */
.faq-item {
  background-color: #ffffff;
  border: 1px solid #eee3bf;
  border-radius: 12px;
}

/* Clickable FAQ question */
.faq-item summary {
  position: relative;
  padding: 18px 52px 18px 20px;
  color: #222222;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  list-style: none;
  cursor: pointer;
}

/* Hide the default marker in WebKit browsers */
.faq-item summary::-webkit-details-marker {
  display: none;
}

/* Expand and collapse indicator */
.faq-item summary::after {
  content: "+";
  position: absolute;
  top: 18px;
  right: 20px;
  color: #705200;
  font-size: 22px;
  line-height: 1;
}

/* Expanded question background */
.faq-item[open] summary {
  background-color: #fff9e6;
  border-radius: 12px 12px 0 0;
}

/* Expanded indicator */
.faq-item[open] summary::after {
  content: "−";
}

/* FAQ answer */
.faq-item p {
  margin: 0;
  padding: 16px 20px 20px;
  color: #444444;
  font-size: 15px;
  line-height: 1.7;
}

/* Visible keyboard focus */
.faq-item summary:focus-visible {
  outline: 3px solid #705200;
  outline-offset: 3px;
  border-radius: 12px;
}/* Collapsible table of contents */
.table-of-contents {
  margin: 24px 0;
  background-color: #fffdf5;
  border: 1px solid #ead9a5;
  border-radius: 12px;
}

/* Table of contents toggle */
.table-of-contents summary {
  padding: 16px 20px;
  color: #222222;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

/* Navigation spacing */
.table-of-contents nav {
  padding: 0 20px 18px;
}

/* Table of contents list */
.table-of-contents ol {
  margin: 0;
  padding-left: 24px;
}

/* List item spacing */
.table-of-contents li {
  padding: 6px 0;
  font-size: 14px;
  line-height: 1.6;
}

/* Navigation links */
.table-of-contents a {
  color: #333333;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.table-of-contents a:hover {
  color: #705200;
}

/* Visible keyboard focus */
.table-of-contents summary:focus-visible,
.table-of-contents a:focus-visible {
  outline: 2px solid #705200;
  outline-offset: 3px;
}

/* Space above anchor destinations */
main h2[id] {
  scroll-margin-top: 24px;
}/* Compact table of contents */
.table-of-contents {
  width: fit-content;
  max-width: 100%;
}

/* Compact toggle with a three-dot indicator */
.table-of-contents summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 14px;
  list-style: none;
}

/* Hide the default arrow */
.table-of-contents summary::-webkit-details-marker {
  display: none;
}

/* Three-dot indicator */
.table-of-contents summary span {
  font-size: 22px;
  line-height: 1;
}/* About page sections */
.about-section {
  margin-top: 32px;
}

/* About page topic list */
.about-list {
  margin: 0;
  padding-left: 22px;
}

.about-list li {
  padding: 6px 0;
  font-size: 15px;
  line-height: 1.7;
}

/* Navigation link spacing */
.navigation {
  gap: 24px;
  flex-wrap: wrap;
}

/* Mark the current navigation page */
.navigation a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 6px;
}
/* Center the menu while keeping the logo on the left */
.site-header .navigation {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.site-header .navigation > .brand {
  justify-self: start;
}

.site-header .navigation > .navigation-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
/* Hide the menu toggle on desktop */
.site-header .menu-toggle {
  display: none;
}

/* Mobile navigation */
@media (max-width: 600px) {
  .site-header .navigation {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
  }

  .site-header .navigation > .brand {
    justify-self: start;
  }

  .site-header .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid #705200;
    border-radius: 8px;
    color: #222222;
    font-size: 28px;
    cursor: pointer;
  }

  .site-header .navigation > .navigation-links {
    display: none;
    grid-column: 1 / -1;
    width: 100%;
  }

  .site-header .navigation > .navigation-links.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .site-header .navigation-links a {
    display: block;
    padding: 12px;
    text-align: left;
  }

  .site-header .menu-toggle:focus-visible {
    outline: 2px solid #222222;
    outline-offset: 3px;
  }
}
/* Footer matching the header */
.site-footer {
  margin-top: 40px;
  padding: 20px;
  background-color: rgb(254, 253, 251);
  border-top: none;
  text-align: center;
}
/* Copyright text */
.footer-copyright {
  margin: 0;
  color: #222222;
  font-size: 14px;
  line-height: 1.5;
}
/* Keep the button label free of underlines */
button.register-button {
  text-decoration: none;
}