/* =========================================================
 * x88 pro - Shared Stylesheet (Basefile)
 * Every custom class is prefixed with "s430-" to namespace
 * the website. CSS variables are prefixed with "--s430-".
 * Mobile-first: target width <= 430px.
 * ========================================================= */

:root {
  --s430-bg: #0E1621;
  --s430-bg-2: #142235;
  --s430-bg-3: #1b2c45;
  --s430-primary: #00CED1;
  --s430-primary-2: #4DB6AC;
  --s430-gold: #FFD700;
  --s430-cream: #FFFACD;
  --s430-text: #FFFACD;
  --s430-text-muted: #999999;
  --s430-border: rgba(0, 206, 209, 0.25);
  --s430-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.45);
  --s430-radius: 1.2rem;
  --s430-header-h: 6rem;
  --s430-bottom-h: 6.4rem;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html {
  font-size: 62.5%; /* root font for rem units */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", "Helvetica Neue", "Inter", system-ui, -apple-system, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 50% -10%, #16314a 0%, var(--s430-bg) 60%);
  color: var(--s430-text);
  line-height: 1.5rem;
  font-size: 1.5rem;
  min-height: 100vh;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--s430-primary); text-decoration: none; }
a:hover { color: var(--s430-gold); }

h1, h2, h3, h4 { margin: 0; line-height: 1.5; font-weight: 700; }
p { margin: 0 0 1rem; }

/* ===== Layout helpers ===== */
.s430-container { width: 100%; max-width: 430px; margin: 0 auto; padding: 0 1.2rem; }
.s430-wrapper { padding: 1.6rem 0; }
.s430-section { padding: 2.4rem 0; }
.s430-section--alt { background: linear-gradient(180deg, rgba(0,206,209,0.06), rgba(77,182,172,0.03)); }

.s430-section__head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.4rem; }
.s430-section__title { font-size: 2rem; color: var(--s430-cream); }
.s430-section__title em { font-style: normal; color: var(--s430-primary); }
.s430-section__bar { width: 0.4rem; height: 2.2rem; background: linear-gradient(180deg, var(--s430-primary), var(--s430-gold)); border-radius: 0.4rem; }
.s430-section__sub { color: var(--s430-text-muted); font-size: 1.35rem; margin-top: -0.6rem; margin-bottom: 1.2rem; }

/* ===== Header ===== */
.s430-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: linear-gradient(180deg, rgba(14,22,33,0.98), rgba(14,22,33,0.85));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--s430-border);
}
.s430-header__inner { max-width: 430px; margin: 0 auto; padding: 0.6rem 1rem; display: flex; align-items: center; gap: 0.8rem; min-height: var(--s430-header-h); }
.s430-logo { display: flex; align-items: center; gap: 0.6rem; flex: 1; min-width: 0; }
.s430-logo__img { width: 3.2rem; height: 3.2rem; border-radius: 0.8rem; object-fit: cover; box-shadow: 0 0 0 2px rgba(0,206,209,0.4); }
.s430-logo__txt { display: flex; flex-direction: column; line-height: 1.1; }
.s430-logo__name { font-size: 1.7rem; font-weight: 800; color: var(--s430-cream); letter-spacing: 0.04em; }
.s430-logo__name b { color: var(--s430-primary); }
.s430-logo__tag { font-size: 1.05rem; color: var(--s430-gold); }

.s430-header__actions { display: flex; align-items: center; gap: 0.5rem; }

/* ===== Buttons ===== */
.s430-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 44px; padding: 0 1.2rem; border-radius: 2.4rem;
  font-size: 1.35rem; font-weight: 700; cursor: pointer; border: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
}
.s430-btn:active { transform: scale(0.96); }
.s430-btn--login { background: transparent; color: var(--s430-cream); border: 1px solid var(--s430-primary); }
.s430-btn--register {
  background: linear-gradient(135deg, var(--s430-gold), #ff9d2f);
  color: #0E1621;
  box-shadow: 0 0.4rem 1.2rem rgba(255, 215, 0, 0.35);
}
.s430-btn--register:hover { color: #0E1621; }
.s430-btn--cta {
  background: linear-gradient(135deg, var(--s430-primary), var(--s430-primary-2));
  color: #0E1621; width: 100%;
}
.s430-btn--ghost { background: rgba(0,206,209,0.12); color: var(--s430-cream); border: 1px solid var(--s430-border); }
.s430-btn--sm { min-height: 36px; padding: 0 0.9rem; font-size: 1.2rem; }

.s430-icon-btn {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(0,206,209,0.12); color: var(--s430-cream);
  border: 1px solid var(--s430-border); cursor: pointer; font-size: 2rem;
}

/* ===== Mobile dropdown menu ===== */
.s430-menu {
  position: fixed; top: var(--s430-header-h); left: 0; right: 0; z-index: 9999;
  background: var(--s430-bg-2); border-bottom: 1px solid var(--s430-border);
  max-height: 0; overflow: hidden; transition: max-height 0.3s ease;
  box-shadow: var(--s430-shadow);
}
.s430-menu--open { max-height: 70vh; overflow-y: auto; }
.s430-menu__inner { max-width: 430px; margin: 0 auto; padding: 1rem 1.2rem 1.4rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.s430-menu__item { display: flex; align-items: center; gap: 0.8rem; padding: 1rem; border-radius: 1rem; background: rgba(0,206,209,0.06); border: 1px solid var(--s430-border); color: var(--s430-cream); font-weight: 600; min-height: 44px; }
.s430-menu__item .material-symbols-outlined { font-size: 2.2rem; color: var(--s430-primary); }
.s430-menu__item:hover { background: rgba(255,215,0,0.08); color: var(--s430-gold); }

/* ===== Hero carousel ===== */
.s430-hero { margin-top: calc(var(--s430-header-h) + 1rem); }
.s430-hero__viewport { position: relative; border-radius: var(--s430-radius); overflow: hidden; box-shadow: var(--s430-shadow); aspect-ratio: 16/9; background: #000; }
.s430-hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease; }
.s430-hero-slide--active { opacity: 1; }
.s430-hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.s430-hero__overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.2rem; background: linear-gradient(0deg, rgba(14,22,33,0.92), rgba(14,22,33,0)); }
.s430-hero__title { font-size: 1.8rem; color: var(--s430-gold); margin-bottom: 0.2rem; }
.s430-hero__desc { font-size: 1.2rem; color: var(--s430-cream); margin-bottom: 0.8rem; }
.s430-hero__dots { display: flex; gap: 0.4rem; justify-content: center; padding: 0.8rem 0 0; }
.s430-hero-dot { width: 0.8rem; height: 0.8rem; border-radius: 50%; background: rgba(255,250,205,0.35); border: 0; cursor: pointer; }
.s430-hero-dot--active { background: var(--s430-gold); transform: scale(1.2); }

/* ===== Hero CTA band ===== */
.s430-hero-cta { display: flex; gap: 0.8rem; margin-top: 1rem; }
.s430-hero-cta .s430-btn { flex: 1; }

/* ===== Promo banner ===== */
.s430-promo {
  background: linear-gradient(135deg, rgba(255,215,0,0.15), rgba(0,206,209,0.18));
  border: 1px solid var(--s430-border); border-radius: var(--s430-radius);
  padding: 1.2rem; display: flex; align-items: center; gap: 1rem; margin: 1.6rem 0;
}
.s430-promo__icon { font-size: 3rem; color: var(--s430-gold); }
.s430-promo__txt { flex: 1; }
.s430-promo__txt b { color: var(--s430-cream); font-size: 1.4rem; display: block; }
.s430-promo__txt span { color: var(--s430-text-muted); font-size: 1.2rem; }

/* ===== Game grid ===== */
.s430-category { margin-bottom: 2.4rem; }
.s430-category__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.s430-category__title { display: flex; align-items: center; gap: 0.6rem; font-size: 1.7rem; color: var(--s430-cream); }
.s430-category__badge { font-size: 1.05rem; color: var(--s430-bg); background: var(--s430-gold); padding: 0.1rem 0.6rem; border-radius: 0.8rem; font-weight: 700; }
.s430-category__link { font-size: 1.2rem; color: var(--s430-primary); }

.s430-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }
.s430-grid--four { grid-template-columns: repeat(4, 1fr); }
.s430-card {
  background: var(--s430-bg-2); border: 1px solid var(--s430-border); border-radius: 1rem;
  overflow: hidden; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.2s ease;
  display: flex; flex-direction: column;
}
.s430-card:hover { transform: translateY(-3px); box-shadow: var(--s430-shadow); border-color: var(--s430-primary); }
.s430-card__media { position: relative; aspect-ratio: 1/1; background: #0a121e; overflow: hidden; }
.s430-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.s430-card:hover .s430-card__media img { transform: scale(1.06); }
.s430-card__type { position: absolute; top: 0.4rem; left: 0.4rem; background: rgba(0,0,0,0.6); color: var(--s430-gold); font-size: 0.95rem; padding: 0.1rem 0.5rem; border-radius: 0.6rem; }
.s430-card__name { font-size: 1.15rem; color: var(--s430-cream); padding: 0.6rem 0.5rem; text-align: center; font-weight: 600; line-height: 1.2; min-height: 3.2em; display: flex; align-items: center; justify-content: center; }

/* ===== Content blocks (What is, How to Play, FAQ...) ===== */
.s430-block { background: var(--s430-bg-2); border: 1px solid var(--s430-border); border-radius: var(--s430-radius); padding: 1.4rem; margin-bottom: 1.6rem; }
.s430-block__title { font-size: 1.7rem; color: var(--s430-gold); margin-bottom: 0.8rem; display: flex; align-items: center; gap: 0.6rem; }
.s430-block__title i, .s430-block__title .material-symbols-outlined { color: var(--s430-primary); }
.s430-block p { color: var(--s430-cream); }
.s430-list { padding-left: 1.6rem; margin: 0 0 1rem; color: var(--s430-cream); }
.s430-list li { margin-bottom: 0.5rem; line-height: 1.5; }
.s430-steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.s430-steps li { counter-increment: step; position: relative; padding: 0.6rem 0 0.6rem 3.4rem; color: var(--s430-cream); border-left: 1px dashed var(--s430-border); margin-left: 1.2rem; }
.s430-steps li::before { content: counter(step); position: absolute; left: -1.2rem; top: 0.4rem; width: 2.4rem; height: 2.4rem; background: linear-gradient(135deg, var(--s430-primary), var(--s430-primary-2)); color: var(--s430-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem; }

.s430-faq { border-bottom: 1px solid var(--s430-border); padding: 0.8rem 0; }
.s430-faq__q { font-weight: 700; color: var(--s430-gold); cursor: pointer; display: flex; gap: 0.6rem; align-items: flex-start; }
.s430-faq__q::before { content: "Q"; color: var(--s430-primary); }
.s430-faq__a { color: var(--s430-cream); padding-top: 0.4rem; }
.s430-faq__a::before { content: "A: "; color: var(--s430-primary); font-weight: 700; }

/* ===== Feature highlights ===== */
.s430-features { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.s430-feature { background: var(--s430-bg-3); border-radius: 1rem; padding: 1.2rem; border: 1px solid var(--s430-border); text-align: center; }
.s430-feature i, .s430-feature .material-symbols-outlined { font-size: 2.6rem; color: var(--s430-primary); margin-bottom: 0.4rem; }
.s430-feature b { display: block; color: var(--s430-gold); font-size: 1.3rem; margin-bottom: 0.2rem; }
.s430-feature span { color: var(--s430-text-muted); font-size: 1.15rem; }

/* ===== Testimonials ===== */
.s430-testimonials { display: grid; gap: 0.8rem; }
.s430-testimonial { background: var(--s430-bg-3); border-radius: 1rem; padding: 1rem 1.2rem; border-left: 3px solid var(--s430-gold); }
.s430-testimonial__head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; }
.s430-testimonial__avatar { width: 3rem; height: 3rem; border-radius: 50%; background: linear-gradient(135deg, var(--s430-primary), var(--s430-gold)); display: flex; align-items: center; justify-content: center; color: var(--s430-bg); font-weight: 800; }
.s430-testimonial__name { color: var(--s430-cream); font-weight: 700; font-size: 1.3rem; }
.s430-testimonial__stars { color: var(--s430-gold); font-size: 1.2rem; }
.s430-testimonial p { color: var(--s430-cream); font-size: 1.25rem; }

/* ===== Winners ===== */
.s430-winners { display: grid; gap: 0.6rem; }
.s430-winner { display: flex; align-items: center; gap: 0.8rem; background: var(--s430-bg-3); border-radius: 0.8rem; padding: 0.7rem 1rem; }
.s430-winner i, .s430-winner .material-symbols-outlined { color: var(--s430-gold); }
.s430-winner__name { flex: 1; color: var(--s430-cream); font-size: 1.25rem; }
.s430-winner__amount { color: var(--s430-primary); font-weight: 800; }

/* ===== Payments ===== */
.s430-payments { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.s430-payments span { background: var(--s430-bg-3); border: 1px solid var(--s430-border); color: var(--s430-cream); padding: 0.5rem 1rem; border-radius: 0.8rem; font-size: 1.2rem; display: inline-flex; align-items: center; gap: 0.4rem; }

/* ===== App download ===== */
.s430-app { display: flex; align-items: center; gap: 1rem; background: linear-gradient(135deg, rgba(0,206,209,0.12), rgba(255,215,0,0.08)); border: 1px solid var(--s430-border); border-radius: var(--s430-radius); padding: 1.2rem; }
.s430-app__txt { flex: 1; }
.s430-app__txt b { display: block; color: var(--s430-gold); font-size: 1.4rem; margin-bottom: 0.2rem; }
.s430-app__txt span { color: var(--s430-cream); font-size: 1.2rem; }
.s430-app__btns { display: flex; flex-direction: column; gap: 0.5rem; min-width: 12rem; }

/* ===== Footer ===== */
.s430-footer { background: var(--s430-bg-2); border-top: 1px solid var(--s430-border); padding: 2.4rem 0 calc(var(--s430-bottom-h) + 1rem); margin-top: 2rem; }
.s430-footer__brand { color: var(--s430-cream); font-size: 1.4rem; line-height: 1.6; margin-bottom: 1.2rem; }
.s430-footer__brand b { color: var(--s430-primary); }
.s430-footer__links { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 1.4rem; }
.s430-footer__links a { color: var(--s430-cream); font-size: 1.25rem; padding: 0.4rem 0; }
.s430-footer__links a:hover { color: var(--s430-gold); }
.s430-footer__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 1.2rem; }
.s430-footer__copy { color: var(--s430-text-muted); font-size: 1.15rem; text-align: center; border-top: 1px dashed var(--s430-border); padding-top: 1rem; }

/* ===== Mobile bottom navigation ===== */
.s430-bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
  background: linear-gradient(180deg, rgba(20,34,53,0.98), rgba(14,22,33,1));
  border-top: 1px solid var(--s430-border);
  height: var(--s430-bottom-h);
  display: flex; justify-content: space-around; align-items: stretch;
  padding: 0.4rem 0.2rem 0.6rem;
}
.s430-bottom-nav__btn {
  flex: 1; min-width: 60px; min-height: 60px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.2rem; color: var(--s430-text-muted); background: transparent; border: 0; cursor: pointer;
  transition: color 0.18s ease, transform 0.18s ease;
}
.s430-bottom-nav__btn:active { transform: scale(0.92); }
.s430-bottom-nav__btn:hover { color: var(--s430-cream); }
.s430-bottom-nav__icon { font-size: 2.4rem; line-height: 1; }
.s430-bottom-nav__icon .material-symbols-outlined { font-size: 2.4rem; }
.s430-bottom-nav__label { font-size: 1rem; line-height: 1; font-weight: 600; }
.s430-bottom-nav__btn--active { color: var(--s430-gold); }
.s430-bottom-nav__btn--promo .s430-bottom-nav__icon { color: var(--s430-primary); }

/* ===== Inline SEO link styles ===== */
.s430-seo-link { color: var(--s430-gold); font-weight: 600; border-bottom: 1px dashed rgba(255,215,0,0.4); }
.s430-seo-link:hover { color: var(--s430-primary); }

/* ===== Desktop adjustments ===== */
@media (min-width: 768px) {
  body { background: radial-gradient(1400px 700px at 50% -10%, #16314a 0%, var(--s430-bg) 60%); }
  .s430-container { max-width: 960px; padding: 0 2rem; }
  .s430-header__inner { max-width: 960px; }
  .s430-menu__inner { max-width: 960px; grid-template-columns: repeat(4, 1fr); }
  .s430-grid { grid-template-columns: repeat(6, 1fr); }
  .s430-grid--four { grid-template-columns: repeat(8, 1fr); }
  .s430-features { grid-template-columns: repeat(4, 1fr); }
  .s430-footer__links { grid-template-columns: repeat(4, 1fr); }
  .s430-bottom-nav { display: none; }
  .s430-footer { padding-bottom: 2.4rem; }
  main { padding-bottom: 0 !important; }
}

/* ===== Mobile bottom padding so content is not covered ===== */
@media (max-width: 767px) {
  main { padding-bottom: calc(var(--s430-bottom-h) + 1.2rem); }
}

/* ===== Utility ===== */
.s430-text-center { text-align: center; }
.s430-mt-8 { margin-top: 0.8rem; }
.s430-mt-16 { margin-top: 1.6rem; }
.s430-hidden { display: none !important; }