/* Maple Arcade Club — homepage */

.hero {
  padding: var(--s-9) 0 var(--s-8);
  background-image:
    linear-gradient(to bottom, rgba(252, 248, 241, 0.62), rgba(252, 248, 241, 0.93) 58%, var(--ivory) 100%),
    url("/assets/img/bg-aurora-hero.webp");
  background-size: cover;
  background-position: center 22%;
  border-bottom: 1px solid var(--line-soft);
}

.hero__inner { max-width: 46rem; }

.hero h1 { margin-bottom: var(--s-5); }

.hero__lede {
  font-size: 1.2rem;
  color: var(--ink);
  max-width: 40rem;
  margin-bottom: var(--s-6);
}

.hero__free {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  align-items: center;
  background: var(--surface);
  border: 2px solid var(--gold);
  border-radius: var(--radius-pill);
  padding: var(--s-2) var(--s-5) var(--s-2) var(--s-3);
  margin-bottom: var(--s-6);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--purple);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* --- featured game band --- */

.featured {
  padding: var(--s-8) 0;
  background: linear-gradient(180deg, rgba(239, 231, 248, 0.75), rgba(252, 248, 241, 0));
  border-bottom: 1px solid var(--line-soft);
}

.featured__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--s-7);
  align-items: center;
}

.featured__art {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: var(--frame);
  box-shadow: var(--sink), var(--float);
}

.featured__art img { width: 100%; }

.featured h2 { margin-top: var(--s-3); }

.featured__facts {
  list-style: none;
  margin: 0 0 var(--s-5);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.featured__facts li { margin: 0; }

@media (max-width: 820px) {
  .featured__grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .featured__art { order: -1; }
}

/* --- games carousel row --- */

.section { padding: var(--s-8) 0; }

.section__head { max-width: 52rem; margin-bottom: var(--s-6); }
.section__head p { margin-bottom: 0; }

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(258px, 1fr);
  gap: var(--s-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: var(--s-1) var(--s-1) var(--s-5);
  margin: 0 calc(var(--s-1) * -1);
  scrollbar-color: var(--purple-mid) var(--purple-soft);
}

.rail > * { scroll-snap-align: start; }

.game-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--frame);
  border-radius: var(--radius);
  box-shadow: var(--sink), var(--float);
  overflow: hidden;
}

.game-card__strip {
  padding: var(--s-3) var(--s-4);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--strip, var(--purple));
  color: var(--strip-ink, #fff6e6);
}

.game-card__art { position: relative; }

.game-card__art img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.game-card__corner {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
}

.game-card__body {
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex: 1 1 auto;
}

.game-card__body h3 { margin: 0; }
.game-card__body p { margin: 0; font-size: 0.95rem; color: var(--ink-soft); flex: 1 1 auto; }
.game-card__body .btn { margin-top: var(--s-2); }

/* --- pace and difficulty overview --- */

.overview {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: var(--frame);
  border-radius: var(--radius);
  box-shadow: var(--sink);
  overflow: hidden;
  font-size: 0.95rem;
}

.overview caption {
  caption-side: top;
  text-align: left;
  padding-bottom: var(--s-3);
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.overview th, .overview td {
  padding: var(--s-4);
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.overview thead th {
  background: var(--purple-soft);
  color: var(--purple);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.overview tbody th { color: var(--purple); font-weight: 700; width: 22%; }
.overview tbody tr:last-child th, .overview tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 700px) {
  .overview, .overview thead, .overview tbody, .overview tr, .overview th, .overview td { display: block; }
  .overview thead { display: none; }
  .overview tbody tr { border-bottom: 1px solid var(--line); padding: var(--s-3) 0; }
  .overview tbody tr:last-child { border-bottom: 0; }
  .overview tbody th { width: auto; padding-bottom: var(--s-1); border-bottom: 0; font-size: 1.05rem; }
  .overview tbody td { border-bottom: 0; padding: var(--s-1) var(--s-4) var(--s-2); }
  .overview tbody td::before {
    content: attr(data-label) ": ";
    font-weight: 700;
    color: var(--purple);
  }
}

/* --- themes and art --- */

.themes__figure {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: var(--frame);
  box-shadow: var(--sink), var(--float);
  margin-bottom: var(--s-6);
}

.themes__figure img {
  display: block;
  width: 100%;
}

.theme-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-5);
}

.theme-list li {
  margin: 0;
  padding-left: var(--s-4);
  border-left: 3px solid var(--gold);
}

.theme-list h3 { margin-bottom: var(--s-2); font-size: 1.05rem; }
.theme-list p { margin: 0; font-size: 0.95rem; color: var(--ink-soft); }

/* --- coins explainer --- */

.coins-section {
  padding: var(--s-8) 0;
  background: linear-gradient(180deg, rgba(239, 231, 248, 0), rgba(239, 231, 248, 0.7));
  border-top: 1px solid var(--line-soft);
}

.coins-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--s-7);
  align-items: center;
}

.coins-grid img {
  border-radius: var(--radius-lg);
  border: var(--frame);
  box-shadow: var(--sink);
  background: var(--surface);
}

.coins-list { list-style: none; margin: 0; padding: 0; }

.coins-list li {
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}

.coins-list li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.coins-list b { color: var(--purple); }

@media (max-width: 820px) {
  .coins-grid { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* --- FAQ --- */

.faq { max-width: 66ch; }
.faq dt { font-weight: 800; color: var(--purple); margin-bottom: var(--s-2); font-size: 1.05rem; }
.faq dd { margin: 0 0 var(--s-6); }
.faq dd:last-child { margin-bottom: 0; }

/* --- disclaimer --- */

.disclaimer {
  background: var(--surface);
  border: var(--frame);
  border-radius: var(--radius);
  box-shadow: var(--sink);
  padding: var(--s-6);
  margin-bottom: var(--s-8);
}

.disclaimer h2 { font-size: 1.15rem; }
.disclaimer p { font-size: 0.92rem; color: var(--ink-soft); max-width: 88ch; }
.disclaimer p:last-child { margin-bottom: 0; }