/* ============================================================
 * F16877 - theme-a500.css
 * All custom classes use the sa50- prefix.
 * Palette: #808080 | #1E90FF | #000080 | #5D5D5D | #3A3A3A
 * Mobile-first. Max content width 430px on primary layout.
 * ============================================================ */

:root {
  --sa50-c-gray: #808080;
  --sa50-c-blue: #1E90FF;
  --sa50-c-navy: #000080;
  --sa50-c-dgray: #5D5D5D;
  --sa50-c-xgray: #3A3A3A;
  --sa50-bg: #0b1228;
  --sa50-bg2: #0e1a3a;
  --sa50-card: #142046;
  --sa50-line: rgba(255,255,255,.08);
  --sa50-text: #f3f6ff;
  --sa50-muted: #aeb8d6;
  --sa50-gold: #ffd24a;
  --sa50-grad: linear-gradient(135deg, #1E90FF 0%, #000080 100%);
  --sa50-shadow: 0 8px 24px rgba(0,0,0,.35);
  --sa50-radius: 14px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Be Vietnam Pro", "Segoe UI", Roboto, system-ui, -apple-system, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 50% -10%, #15286b 0%, var(--sa50-bg) 55%, #060a1c 100%);
  color: var(--sa50-text);
  line-height: 1.55;
  font-size: 15px;
  overflow-x: hidden;
}
a { color: var(--sa50-c-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
h1,h2,h3,h4 { line-height: 1.3; margin: 0 0 .5em; font-weight: 700; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 .8em; color: var(--sa50-muted); }

.sa50-wrap { width: 100%; max-width: 430px; margin: 0 auto; padding: 0 14px; }
.sa50-section { padding: 26px 0; }
.sa50-section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.sa50-section-head h2 { position: relative; padding-left: 14px; }
.sa50-section-head h2::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px;
  background: var(--sa50-grad); border-radius: 4px;
}
.sa50-section-head a { font-size: .8rem; color: var(--sa50-c-blue); }

/* ===== Header ===== */
.sa50-header {
  position: sticky; top: 0; z-index: 1000;
  background: linear-gradient(180deg, rgba(8,12,30,.96), rgba(8,12,30,.86));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sa50-line);
}
.sa50-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 60px; max-width: 430px; margin: 0 auto; padding: 0 12px;
}
.sa50-logo { display:flex; align-items:center; gap:8px; font-weight: 800; font-size: 1.15rem; color:#fff; }
.sa50-logo img { width: 32px; height: 32px; border-radius: 8px; }
.sa50-logo span b { color: var(--sa50-c-blue); }
.sa50-hbtns { display: flex; align-items: center; gap: 8px; }
.sa50-btn {
  display:inline-flex; align-items:center; gap:6px; border:none; cursor:pointer;
  font-weight: 700; font-size: .82rem; padding: 9px 14px; border-radius: 999px;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s;
  text-decoration: none;
}
.sa50-btn:hover { text-decoration: none; transform: translateY(-1px); }
.sa50-btn-login { background: rgba(30,144,255,.12); color: #cfe3ff; border: 1px solid rgba(30,144,255,.4); }
.sa50-btn-reg { background: var(--sa50-grad); color: #fff; box-shadow: 0 4px 14px rgba(30,144,255,.35); }
.sa50-menu-btn {
  background: transparent; border: 1px solid var(--sa50-line); color: #fff;
  width: 38px; height: 38px; border-radius: 10px; display:flex; align-items:center; justify-content:center;
  cursor: pointer; font-size: 1.1rem;
}

/* ===== Mobile menu ===== */
#sa50-menu-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 9998;
  opacity: 0; visibility: hidden; transition: opacity .25s;
}
#sa50-menu-overlay.sa50-show { opacity: 1; visibility: visible; }
#sa50-mobile-menu {
  position: fixed; top: 0; right: -86%; width: 86%; max-width: 340px; height: 100%;
  background: linear-gradient(180deg, #0c1430, #060a1c); z-index: 9999;
  transition: right .28s ease; padding: 18px; overflow-y: auto;
  border-left: 1px solid var(--sa50-line);
}
#sa50-mobile-menu.sa50-open { right: 0; }
.sa50-mm-head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 14px; }
.sa50-mm-head h3 { margin: 0; color: #fff; }
.sa50-mm-close { background: rgba(255,255,255,.08); border:none; color:#fff; width:36px; height:36px; border-radius:10px; font-size:1.1rem; cursor:pointer; }
.sa50-mm-promo { background: var(--sa50-grad); border-radius: 14px; padding: 14px; margin-bottom: 14px; color:#fff; }
.sa50-mm-promo b { font-size: 1.05rem; display:block; margin-bottom: 6px; }
.sa50-mm-promo .sa50-btn { background:#fff; color: var(--sa50-c-navy); margin-top:8px; }
.sa50-mm-nav { list-style: none; padding: 0; margin: 0; }
.sa50-mm-nav li { border-bottom: 1px solid var(--sa50-line); }
.sa50-mm-nav a, .sa50-mm-nav button {
  display:flex; align-items:center; gap:10px; padding: 13px 6px; color: #d6def5;
  font-size: .95rem; width: 100%; background: none; border:none; cursor:pointer; text-align:left;
}
.sa50-mm-nav a:hover, .sa50-mm-nav button:hover { color:#fff; text-decoration:none; }
.sa50-mm-nav i { color: var(--sa50-c-blue); width: 22px; text-align:center; }

/* ===== Hero / Carousel ===== */
.sa50-hero { padding: 16px 0 6px; }
.sa50-hero-carousel { position: relative; border-radius: 18px; overflow: hidden; box-shadow: var(--sa50-shadow); }
.sa50-hero-slide {
  display: none; position: relative; padding: 22px 18px; min-height: 200px;
  background: var(--sa50-grad);
}
.sa50-hero-slide.sa50-active { display: block; animation: sa50fade .6s ease; }
@keyframes sa50fade { from { opacity:0; transform: translateY(8px);} to {opacity:1; transform:none;} }
.sa50-hero-slide:nth-child(2) { background: linear-gradient(135deg, #000080, #1E90FF); }
.sa50-hero-slide:nth-child(3) { background: linear-gradient(135deg, #3A3A3A, #000080); }
.sa50-hero-slide h1, .sa50-hero-slide h2 { color: #fff; margin-bottom: 6px; }
.sa50-hero-slide h1 { font-size: 1.5rem; }
.sa50-hero-slide p { color: rgba(255,255,255,.9); margin-bottom: 14px; font-size: .9rem; }
.sa50-hero-cta { display:flex; gap: 10px; flex-wrap: wrap; }
.sa50-hero-dots { display:flex; gap:6px; justify-content:center; padding: 10px 0; }
.sa50-hero-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.3); cursor: pointer; }
.sa50-hero-dot.sa50-active { background: var(--sa50-c-blue); width: 22px; border-radius: 4px; }

/* ===== Stats strip ===== */
.sa50-stats { display:grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 14px; }
.sa50-stat { background: rgba(255,255,255,.04); border:1px solid var(--sa50-line); border-radius: 12px; padding: 12px 8px; text-align:center; }
.sa50-stat b { display:block; font-size: 1.15rem; color: var(--sa50-c-blue); }
.sa50-stat small { color: var(--sa50-muted); font-size: .72rem; }

/* ===== Filter tabs ===== */
.sa50-filter { display:flex; gap: 8px; overflow-x:auto; padding-bottom: 6px; margin-bottom: 12px; scrollbar-width: none; }
.sa50-filter::-webkit-scrollbar { display:none; }
.sa50-filter-tab {
  white-space: nowrap; padding: 8px 14px; border-radius: 999px; cursor:pointer;
  background: rgba(255,255,255,.05); border:1px solid var(--sa50-line); color: var(--sa50-muted);
  font-size: .82rem; font-weight:600;
}
.sa50-filter-tab.sa50-active { background: var(--sa50-grad); color:#fff; border-color: transparent; }

/* ===== Game grid ===== */
.sa50-game-group { margin-bottom: 22px; }
.sa50-game-group h3 { display:flex; align-items:center; gap:8px; margin-bottom: 10px; color:#fff; font-size: 1.05rem; }
.sa50-game-group h3 i { color: var(--sa50-c-blue); }
.sa50-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.sa50-card {
  background: var(--sa50-card); border:1px solid var(--sa50-line); border-radius: 12px;
  overflow:hidden; position:relative; transition: transform .15s, box-shadow .15s;
}
.sa50-card:hover { transform: translateY(-3px); box-shadow: var(--sa50-shadow); }
.sa50-card img { aspect-ratio: 1/1; object-fit: cover; background:#0a1330; }
.sa50-card .sa50-card-name { padding: 7px 8px; font-size: .72rem; color: #e9eefc; line-height:1.25; height: 38px; overflow:hidden; }
.sa50-card .sa50-card-tag {
  position:absolute; top:6px; left:6px; background: rgba(0,0,0,.6); color:#ffd24a;
  font-size:.6rem; padding:2px 6px; border-radius:6px;
}
.sa50-card .sa50-play {
  position:absolute; inset:0; margin:auto; width:44px; height:44px; border-radius:50%;
  background: rgba(30,144,255,.85); color:#fff; display:flex; align-items:center; justify-content:center;
  opacity:0; transition: opacity .2s; font-size: 1.1rem;
}
.sa50-card:hover .sa50-play { opacity:1; }

/* ===== Featured / promo banner ===== */
.sa50-feat { display:grid; grid-template-columns: 1fr; gap:12px; }
.sa50-feat-card {
  background: linear-gradient(135deg, #142046, #0b1a44); border:1px solid var(--sa50-line);
  border-radius: 14px; padding: 14px; display:flex; gap: 12px; align-items:center;
}
.sa50-feat-card img { width: 86px; height: 86px; border-radius: 10px; object-fit: cover; flex-shrink:0; }
.sa50-feat-card h3 { margin:0 0 4px; font-size: 1rem; color:#fff; }
.sa50-feat-card p { margin:0 0 8px; font-size: .8rem; }

/* ===== SEO long text ===== */
.sa50-seo { background: rgba(255,255,255,.03); border:1px solid var(--sa50-line); border-radius: 14px; padding: 18px; }
.sa50-seo h2 { color: #fff; }
.sa50-seo h3 { color: var(--sa50-c-blue); margin-top: 14px; }
.sa50-seo p { font-size: .88rem; }

/* ===== FAQ ===== */
.sa50-faq-item { background: rgba(255,255,255,.03); border:1px solid var(--sa50-line); border-radius: 12px; margin-bottom: 10px; overflow:hidden; }
.sa50-faq-q { width:100%; background:none; border:none; color:#fff; text-align:left; padding:14px; font-weight:600; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:.92rem; }
.sa50-faq-q i { color: var(--sa50-c-blue); transition: transform .2s; }
.sa50-faq-item.sa50-open .sa50-faq-q i { transform: rotate(45deg); }
.sa50-faq-a { max-height:0; overflow:hidden; transition: max-height .25s ease; padding: 0 14px; }
.sa50-faq-item.sa50-open .sa50-faq-a { max-height: 360px; padding-bottom: 14px; }
.sa50-faq-a p { margin:0; font-size:.85rem; }

/* ===== Footer ===== */
.sa50-footer { background: #060a1c; border-top: 1px solid var(--sa50-line); padding: 24px 0 92px; margin-top: 18px; }
.sa50-footer h4 { color:#fff; font-size:.95rem; margin-bottom: 10px; }
.sa50-footer ul { list-style:none; padding:0; margin:0 0 16px; }
.sa50-footer li { margin-bottom: 6px; }
.sa50-footer a { color: var(--sa50-muted); font-size: .82rem; }
.sa50-footer a:hover { color: var(--sa50-c-blue); }
.sa50-foot-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sa50-foot-bottom { border-top: 1px solid var(--sa50-line); margin-top: 16px; padding-top: 14px; font-size: .72rem; color: var(--sa50-c-dgray); }
.sa50-pay { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.sa50-pay span { background: rgba(255,255,255,.06); border:1px solid var(--sa50-line); border-radius:6px; padding:4px 8px; font-size:.7rem; color: var(--sa50-muted); }

/* ===== Mobile bottom nav ===== */
.sa50-bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0; height: 62px; z-index: 1000;
  background: linear-gradient(180deg, rgba(10,16,40,.97), rgba(6,10,28,.99));
  border-top: 1px solid var(--sa50-line);
  display: flex; justify-content: space-around; align-items: center;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.sa50-bottomnav a, .sa50-bottomnav button {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:none; border:none; color: var(--sa50-muted); font-size: .66rem; gap:3px;
  min-width: 60px; min-height: 58px; cursor:pointer; text-decoration:none; flex:1;
  transition: color .15s;
}
.sa50-bottomnav a:hover, .sa50-bottomnav button:hover { text-decoration:none; }
.sa50-bottomnav i { font-size: 22px; }
.sa50-bottomnav .sa50-active { color: var(--sa50-c-blue); }
.sa50-bottomnav .sa50-bn-promo {
  background: var(--sa50-grad); color:#fff; border-radius: 50%;
  width: 50px; height: 50px; margin-top: -22px; box-shadow: 0 6px 16px rgba(30,144,255,.4);
  border: 3px solid #060a1c;
}
.sa50-bottomnav .sa50-bn-promo i { font-size: 24px; }

/* ===== Back to top ===== */
#sa50-back-top {
  position: fixed; right: 14px; bottom: 78px; z-index: 999;
  width: 42px; height: 42px; border-radius: 50%; border:1px solid var(--sa50-line);
  background: rgba(30,144,255,.9); color:#fff; display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition: opacity .2s; cursor:pointer; font-size:1rem;
}
#sa50-back-top.sa50-show { opacity:1; visibility:visible; }

/* ===== Desktop ===== */
@media (min-width: 769px) {
  body { font-size: 16px; }
  .sa50-wrap, .sa50-header-inner { max-width: 960px; }
  .sa50-grid { grid-template-columns: repeat(6,1fr); }
  .sa50-feat { grid-template-columns: 1fr 1fr; }
  .sa50-foot-grid { grid-template-columns: repeat(4,1fr); }
  .sa50-bottomnav { display: none; }
  .sa50-footer { padding-bottom: 28px; }
  .sa50-section { padding: 36px 0; }
  h2 { font-size: 1.6rem; }
}

@media (max-width: 768px) {
  main { padding-bottom: 80px; }
}