/* =========================================================================
   style.css — BABA8-style lobby
   Mobile-first. Breakpoints widen the grid and swap the bottom nav for
   a calmer desktop layout at 768px and 1100px.
   ========================================================================= */

:root,
[data-theme="dark"] {
  --bg:            #0a0a0f;
  --bg-raised:     #14141c;
  --bg-card:       #1b1b26;
  --bg-card-2:     #21212f;
  --border:        #2a2a38;
  --text:          #f3f3f6;
  --text-dim:      #9b9bab;
  --text-faint:    #6c6c7c;
  --accent-gold:   #f5b800;
  --accent-gold-2: #ffd84d;
  --accent-blue:   #2f6bff;
  --accent-blue-2: #5a8bff;
  --accent-purple: #7b2ff7;
  --success:       #35c46a;
  --danger:        #ff4d6d;
  --shadow:        0 10px 30px rgba(0,0,0,.45);
  --radius-sm:     8px;
  --radius-md:     14px;
  --radius-lg:     20px;
}

[data-theme="light"] {
  --bg:            #f2f3f7;
  --bg-raised:     #ffffff;
  --bg-card:       #ffffff;
  --bg-card-2:     #eef0f6;
  --border:        #dfe1ea;
  --text:          #17171f;
  --text-dim:      #55566b;
  --text-faint:    #8a8ba0;
  --accent-gold:   #e6a800;
  --accent-gold-2: #f2c94c;
  --accent-blue:   #2f6bff;
  --accent-blue-2: #4f7fff;
  --accent-purple: #7b2ff7;
  --success:       #1f9d52;
  --danger:        #e0304c;
  --shadow:        0 10px 24px rgba(20,20,40,.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 76px; /* room for mobile bottom nav */
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
img { max-width: 100%; display: block; }

:focus-visible { outline: 2px solid var(--accent-gold-2); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  /* Keep the Register pulse controllable by its own duration.
     Some browsers/OS settings enable reduced motion and the old global
     rule forced ALL animations to .01ms, making any Register timing change
     appear to do nothing. */
  *:not(.register-btn) { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---- Layout shell ------------------------------------------------------ */
.app-shell {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 14px 24px;
}

/* ---- Header -------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
}
.brand {
  display: flex;
  align-items: center;
}
.brand-text {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .5px;
}
.brand-text span { color: var(--accent-gold); }
.brand-logo-img {
  display: block;
  width: auto;
}

/* ---- Register button (header, right side) ---------------------------------
   Pulses continuously (big-to-small loop) to draw the eye; stops the
   instant the pointer is over it or it's keyboard-focused. */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .2px;
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: border-color .15s ease, background .15s ease;
}
.login-btn:hover {
  border-color: var(--accent-gold);
  background: var(--bg-card-2);
}

.register-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 20px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .2px;
  color: #241a00;
  background: linear-gradient(135deg, var(--accent-gold-2), var(--accent-gold));
  transform-origin: center;
  --register-pulse-duration: 1.5s;
  animation: register-pulse var(--register-pulse-duration) ease-in-out infinite;
}
.register-btn:hover,
.register-btn:focus-visible {
  animation-play-state: paused;
  transform: scale(1);
}
@keyframes register-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.14); }
}

/* ---- Footer link ------------------------------------------------------------ */
.footer-link { display: block; }
.footer-link:hover p { color: var(--text-dim); }

/* ---- Promo slider ----------------------------------------------------------- */
.promo-slider { margin-top: 16px; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.promo-track { display: flex; transition: transform .4s ease; }
.promo-slide {
  position: relative;
  min-width: 100%;
  padding: 26px 20px;
  min-height: 170px;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  color: #fff;
  overflow: hidden;
}
.promo-slide-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* dark readability overlay removed — banners are shown as-is */
.promo-slide-copy { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.promo-eyebrow { margin: 0; font-size: 12px; opacity: .85; }
.promo-title { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: .5px; text-shadow: 0 2px 8px rgba(0,0,0,.35); }
.promo-subtitle { margin: 0 0 8px; font-size: 13px; opacity: .9; max-width: 240px; }
.promo-cta {
  align-self: flex-start;
  display: flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,.35);
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 700; font-size: 13px;
  backdrop-filter: blur(2px);
}
.promo-cta svg { width: 16px; height: 16px; stroke: none; fill: #fff; }
.promo-dots { display: flex; justify-content: center; gap: 6px; padding: 10px 0; background: var(--bg-card); }
.promo-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); }
.promo-dot.active { background: var(--accent-gold); width: 18px; border-radius: 4px; }

/* ---- Support strip ----------------------------------------------------------- */
.support-strip {
  margin-top: 12px;
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--text-dim);
}
.support-strip svg { width: 16px; height: 16px; stroke: var(--accent-blue-2); }

/* ---- Plain image banner (above Hot Games) --------------------------------------- */
.simple-banner {
  margin-top: 16px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.simple-banner-img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- Section titles -------------------------------------------------------------- */
.section-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700;
  margin: 26px 0 12px;
}
.section-title .fire, .section-title .dot-icon { font-size: 16px; }

/* ---- Hot games grid ---------------------------------------------------------------- */
.game-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.game-tile {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: linear-gradient(160deg, var(--c1), var(--c2));
  display: flex; flex-direction: column; justify-content: flex-end;
  border: 1px solid var(--border);
  transition: transform .15s ease;
}
.game-tile:hover { transform: translateY(-3px); }
.game-tile-art {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 45%),
    radial-gradient(circle at 75% 75%, rgba(0,0,0,.35), transparent 60%);
}
.game-tile-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
}
.game-tag {
  position: absolute; top: 6px; left: 6px;
  font-size: 8.5px; font-weight: 800; letter-spacing: .3px;
  background: rgba(0,0,0,.5);
  color: #fff;
  padding: 3px 6px;
  border-radius: 4px;
  z-index: 2;
}
.game-tile-name {
  position: relative; z-index: 2;
  font-size: 11.5px; font-weight: 700;
  color: #fff;
  padding: 8px 8px 10px;
  background: linear-gradient(to top, rgba(0,0,0,.55), transparent);
  line-height: 1.2;
}

/* ---- Provider badge grid ---------------------------------------------------------- */
.provider-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.provider-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.provider-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.provider-badge {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 8px;
  display: grid; place-items: center;
  min-height: 56px;
  transition: border-color .15s ease, transform .15s ease;
}
.provider-badge:hover { border-color: var(--accent-gold); transform: translateY(-2px); }
.provider-name {
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: var(--text-dim);
  letter-spacing: .2px;
}
.provider-logo {
  max-width: 100%;
  max-height: 28px;
  object-fit: contain;
}
/* once a logo image has actually loaded, hide the text label and let the logo carry the badge */
.provider-badge.has-logo { padding: 10px 8px; }
.provider-badge.has-logo .provider-name { display: none; }

/* ---- Footer ------------------------------------------------------------------------ */
.site-footer {
  text-align: center;
  padding: 24px 14px 90px;
  font-size: 11.5px;
  color: var(--text-faint);
}

/* ---- Chat FAB ------------------------------------------------------------------------ */
.chat-fab {
  position: fixed;
  right: 16px; bottom: 88px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--accent-blue);
  color: #fff;
  display: grid; place-items: center;
  box-shadow: var(--shadow);
  z-index: 45;
}
.chat-fab svg { stroke: #fff; }

/* ---- Bottom nav (mobile) -------------------------------------------------------------- */
.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  background: var(--bg-raised);
  border-top: 1px solid var(--border);
  display: flex;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.nav-item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 10.5px;
  color: var(--text-faint);
  padding: 6px 2px;
  border-radius: var(--radius-sm);
}
.nav-item svg { width: 20px; height: 20px; }
.nav-item:hover { color: var(--accent-gold); background: var(--bg-card); }

/* =========================================================================
   Desktop / tablet breakpoints
   ========================================================================= */
@media (min-width: 768px) {
  body { padding-bottom: 0; }
  .bottom-nav { display: none; }
  .chat-fab { bottom: 24px; }

  .app-shell { max-width: 900px; padding: 0 24px 40px; }
  .header-inner { max-width: 900px; padding: 14px 24px; }

  .game-grid { grid-template-columns: repeat(6, 1fr); gap: 14px; }
  .provider-grid { grid-template-columns: repeat(6, 1fr); gap: 12px; }
  .provider-grid.cols-2 { grid-template-columns: repeat(4, 1fr); }
  .provider-grid.cols-3 { grid-template-columns: repeat(6, 1fr); }

  .simple-banner { margin-top: 20px; }

  .promo-slide { min-height: 220px; padding: 40px 48px; }
  .promo-title { font-size: 34px; }
}

@media (min-width: 1100px) {
  .app-shell { max-width: 1100px; }
  .header-inner { max-width: 1100px; }
  .game-grid { grid-template-columns: repeat(6, 1fr); }
  .provider-grid { grid-template-columns: repeat(8, 1fr); }
  .provider-grid.cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 400px; }
  .provider-grid.cols-3 { grid-template-columns: repeat(3, 1fr); max-width: 600px; }
}
/* ===== ABOUT / BRAND SECTION ===== */

.about-section {
  color: #ece913;
  padding: 60px 20px;
  text-align: center;

  /* Keep all text consistent */
  font-family: inherit;
}

/* Small section heading */
.section-small-title {
  color: #ece913;
  font-size: 1rem;
  line-height: 1.4;
  margin: 0 0 10px;
  font-weight: 600;
}

/* Main headings */
.about-title {
  font-size: 1.8rem;
  line-height: 1.3;
  font-weight: 700;
  margin: 0 auto 25px;
  color: #ece913;
  text-align: center;
}

.about-title span {
  color: #ece913;
  font-size: inherit;
  font-weight: inherit;
}

/* Sub-headings */
.section-sub-title {
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 600;
  margin: 0 auto 18px;
  color: #ece913;
}

/* Paragraph text */
.section-text {
  max-width: 900px;
  margin: 0 auto 25px;

  /* Same font size everywhere */
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 400;

  color: #ffffff;
}

/* Strong text inside paragraphs */
.section-text strong {
  font-size: inherit;
  font-weight: 700;
}

/* Highlight text */
.section-text .highlight {
  color: #ece913;
  font-size: inherit;
  font-weight: 600;
}

/* Lists */
.feature-list {
  max-width: 900px;
  margin: 0 auto 25px;
  padding-left: 20px;

  font-size: 1rem;
  line-height: 1.7;
  color: #ffffff;
}

.feature-list li {
  margin-bottom: 8px;
}

/* Divider */
.divider {
  width: 70%;
  max-width: 500px;
  height: 2px;
  background: #ece913;
  margin: 40px auto;
}

/* ===== MOBILE ===== */

@media (max-width: 768px) {
  .about-section {
    padding: 45px 16px;
  }

  .section-small-title {
    font-size: 0.95rem;
  }

  .about-title {
    font-size: 1.6rem;
    line-height: 1.3;
    margin-bottom: 20px;
  }

  .section-sub-title {
    font-size: 1.15rem;
    line-height: 1.4;
  }

  .section-text,
  .feature-list {
    font-size: 1rem;
    line-height: 1.7;
  }

  .divider {
    width: 80%;
    margin: 35px auto;
  }
}

/* ===== SMALL MOBILE PHONES ===== */

@media (max-width: 480px) {
  .about-title {
    font-size: 1.45rem;
  }

  .section-sub-title {
    font-size: 1.1rem;
  }

  .section-text,
  .feature-list {
    font-size: 0.95rem;
    line-height: 1.65;
  }
}