/* ============================================================
   AO 88 - Core Base Stylesheet (theme.css)
   Prefix: scce-
   Palette: #0C0C0C | #ECF0F1 | #3C3C3C | #FF7F50 | #20B2AA
   ============================================================ */

:root {
  --scce-bg: #0C0C0C;
  --scce-bg-2: #181818;
  --scce-bg-3: #1f1f1f;
  --scce-text: #ECF0F1;
  --scce-text-muted: #9aa3a6;
  --scce-dark: #3C3C3C;
  --scce-primary: #FF7F50;
  --scce-secondary: #20B2AA;
  --scce-accent: #FFD166;
  --scce-radius: 14px;
  --scce-radius-lg: 22px;
  --scce-header-h: 58px;
  --scce-bottomnav-h: 62px;
  --scce-shadow: 0 8px 24px rgba(0,0,0,.45);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 62.5%; -webkit-text-size-adjust: 100%; }

body {
  font-family: "Inter","Be Vietnam Pro","Segoe UI",system-ui,-apple-system,sans-serif;
  background: var(--scce-bg);
  color: var(--scce-text);
  line-height: 1.5rem;
  font-size: 1.6rem;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ---------- Layout helpers ---------- */
.scce-container { width: 100%; max-width: 430px; margin: 0 auto; padding: 0 14px; }
.scce-wrapper { max-width: 430px; margin: 0 auto; }
.scce-section { padding: 22px 0; }
.scce-section-alt { background: var(--scce-bg-2); }
.scce-clearfix::after { content:""; display:table; clear:both; }

/* ---------- Header ---------- */
.scce-header {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--scce-header-h);
  background: linear-gradient(180deg, #111 0%, #0a0a0a 100%);
  border-bottom: 1px solid rgba(255,127,80,.18);
  z-index: 1000;
  box-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.scce-header .scce-container {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px;
}
.scce-brand { display:flex; align-items:center; gap:10px; }
.scce-brand-icon {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, var(--scce-primary), var(--scce-secondary));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:1.5rem;
  box-shadow: 0 2px 8px rgba(255,127,80,.35);
}
.scce-brand-name { font-size: 1.9rem; font-weight: 800; letter-spacing: .3px; }
.scce-brand-name span { color: var(--scce-primary); }
.scce-header-actions { display:flex; align-items:center; gap:8px; }
.scce-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height: 38px; padding: 0 16px; border-radius: 20px;
  font-size: 1.35rem; font-weight: 700; line-height: 1;
  transition: transform .18s ease, box-shadow .18s ease, background .2s ease;
  white-space: nowrap;
}
.scce-btn:active { transform: scale(.95); }
.scce-btn-login {
  color: var(--scce-text);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(236,240,241,.25);
}
.scce-btn-login:hover { background: rgba(255,255,255,.12); }
.scce-btn-register {
  color: #1a0e08;
  background: linear-gradient(180deg, #FF9A6B 0%, #FF7F50 100%);
  box-shadow: 0 4px 12px rgba(255,127,80,.45);
}
.scce-btn-register:hover { box-shadow: 0 6px 18px rgba(255,127,80,.6); }
.scce-menu-toggle {
  width: 38px; height: 38px; border-radius: 10px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.06);
  color: var(--scce-text);
  font-size: 1.8rem;
}
.scce-menu-toggle:hover { background: rgba(255,255,255,.12); }

/* ---------- Mobile slide menu ---------- */
.scce-mobile-menu {
  position: fixed; top: 0; right: -82%; bottom: 0;
  width: 78%; max-width: 320px;
  background: var(--scce-bg-2);
  border-left: 1px solid rgba(255,127,80,.18);
  z-index: 9999;
  transform: translateX(0);
  transition: right .28s ease;
  overflow-y: auto; padding: 16px 0 24px;
}
.scce-mobile-menu.active { right: 0; box-shadow: -8px 0 32px rgba(0,0,0,.5); }
.scce-menu-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  z-index: 9998; opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.scce-menu-overlay.active { opacity: 1; pointer-events: auto; }
.scce-menu-head {
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 16px 14px; border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 10px;
}
.scce-menu-head .scce-brand-name { font-size: 1.7rem; }
.scce-menu-close { font-size: 2rem; color: var(--scce-text-muted); width:36px;height:36px; }
.scce-menu-list { list-style: none; padding: 0 10px; }
.scce-menu-list li a {
  display:flex; align-items:center; gap:12px;
  padding: 13px 12px; border-radius: 10px;
  color: var(--scce-text); font-size: 1.45rem; font-weight: 600;
  transition: background .18s ease;
}
.scce-menu-list li a:hover, .scce-menu-list li a:focus { background: rgba(255,127,80,.12); color: var(--scce-primary); }
.scce-menu-list li a i, .scce-menu-list li a span.material-icons-outlined { font-size: 1.9rem; color: var(--scce-secondary); }
.scce-menu-cta { padding: 14px 14px 0; display:flex; flex-direction:column; gap:10px; }

/* ---------- Main / content padding ---------- */
.scce-main { padding-top: var(--scce-header-h); padding-bottom: 16px; }

/* ---------- Hero carousel ---------- */
.scce-hero { position: relative; margin: 10px 0 6px; }
.scce-carousel {
  position: relative; border-radius: var(--scce-radius-lg);
  overflow: hidden; box-shadow: var(--scce-shadow);
  background: #000;
}
.scce-carousel-track { display:flex; transition: transform .42s ease; }
.scce-slide { min-width: 100%; position: relative; }
.scce-slide img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.scce-slide-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px 16px 18px;
  background: linear-gradient(0deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.4) 60%, rgba(0,0,0,0) 100%);
}
.scce-slide-cap h2 { font-size: 1.7rem; font-weight: 800; color: #fff; margin-bottom: 4px; }
.scce-slide-cap p { font-size: 1.25rem; color: #ddd; margin-bottom: 8px; }
.scce-slide-cap .scce-link {
  color: var(--scce-primary); font-weight: 700; font-size: 1.25rem;
  display:inline-flex; align-items:center; gap:5px;
}
.scce-carousel-dots {
  position: absolute; bottom: 8px; left: 0; right: 0;
  display:flex; justify-content:center; gap:6px; z-index: 3;
}
.scce-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.4); transition: all .2s ease;
}
.scce-dot.active { background: var(--scce-primary); width: 18px; border-radius: 4px; }

/* ---------- Section heading ---------- */
.scce-section-title {
  display:flex; align-items:center; justify-content:space-between;
  margin: 18px 0 12px;
}
.scce-section-title h3 {
  font-size: 1.7rem; font-weight: 800; letter-spacing:.2px;
  position: relative; padding-left: 12px;
}
.scce-section-title h3::before {
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:4px; height:22px; border-radius:3px;
  background: linear-gradient(180deg, var(--scce-primary), var(--scce-secondary));
}
.scce-section-title .scce-more { font-size: 1.2rem; color: var(--scce-secondary); font-weight: 600; }

/* ---------- Promo bar / banners ---------- */
.scce-promo-bar {
  display:flex; gap:10px; overflow-x:auto; padding: 4px 0 12px;
  scrollbar-width: none;
}
.scce-promo-bar::-webkit-scrollbar { display:none; }
.scce-promo-card {
  flex: 0 0 84%; border-radius: var(--scce-radius);
  padding: 14px; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #20302f 0%, #1a1a1a 100%);
  border: 1px solid rgba(32,178,170,.25);
}
.scce-promo-card.alt {
  background: linear-gradient(135deg, #3a201a 0%, #1a1a1a 100%);
  border-color: rgba(255,127,80,.3);
}
.scce-promo-card h4 { font-size: 1.45rem; font-weight: 800; margin-bottom: 4px; color: var(--scce-primary); }
.scce-promo-card.alt h4 { color: var(--scce-accent); }
.scce-promo-card p { font-size: 1.18rem; color: #cfd6d7; }
.scce-promo-card .scce-link {
  display:inline-block; margin-top: 8px; color: var(--scce-secondary);
  font-weight: 700; font-size: 1.2rem;
}

/* ---------- Game grid (compact icon layout) ---------- */
.scce-game-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.scce-game-grid.cols4 { grid-template-columns: repeat(4, 1fr); }
.scce-game-card {
  background: var(--scce-bg-2);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  text-align: center;
  padding: 6px 6px 8px;
}
.scce-game-card:hover, .scce-game-card:focus {
  transform: translateY(-3px);
  border-color: rgba(255,127,80,.45);
  box-shadow: 0 8px 18px rgba(255,127,80,.18);
}
.scce-game-card .scce-game-thumb {
  width: 100%; aspect-ratio: 1/1; border-radius: 8px; overflow: hidden;
  background: #111; margin-bottom: 4px;
}
.scce-game-card .scce-game-thumb img { width:100%; height:100%; object-fit: cover; }
.scce-game-name {
  font-size: 1.08rem; color: var(--scce-text); font-weight: 600;
  line-height: 1.25; padding: 0 2px;
  overflow: hidden; text-overflow: ellipsis; display:-webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.6rem;
}
.scce-game-tag {
  display:inline-block; font-size: .95rem; padding: 2px 7px; border-radius: 4px;
  background: rgba(255,127,80,.15); color: var(--scce-primary);
  margin-top: 4px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
}
.scce-game-block { margin-bottom: 26px; }
.scce-game-block-head {
  display:flex; align-items:center; gap:8px; margin: 16px 0 10px;
}
.scce-game-block-head i, .scce-game-block-head span.material-icons {
  font-size: 2.2rem; color: var(--scce-secondary);
}
.scce-game-block-head h3 {
  font-size: 1.55rem; font-weight: 800; color: var(--scce-text);
}

/* ---------- Info / feature cards ---------- */
.scce-info-grid { display:grid; grid-template-columns: 1fr; gap: 12px; }
.scce-info-card {
  background: var(--scce-bg-2); border-radius: var(--scce-radius);
  padding: 16px; border: 1px solid rgba(255,255,255,.05);
}
.scce-info-card h4 { font-size: 1.45rem; font-weight: 800; margin-bottom: 6px; color: var(--scce-primary); }
.scce-info-card p { font-size: 1.28rem; color: #c7ced0; line-height: 1.45; }
.scce-info-card ul { list-style:none; padding-left: 0; margin-top: 6px; }
.scce-info-card ul li { position: relative; padding-left: 18px; margin-bottom: 6px; font-size: 1.22rem; color: #c0c8ca; }
.scce-info-card ul li::before {
  content:""; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%;
  background: var(--scce-secondary);
}
.scce-feature-row {
  display:grid; grid-template-columns: repeat(2,1fr); gap:10px; margin: 10px 0;
}
.scce-feature-row .scce-feature {
  background: var(--scce-bg-2); border-radius: 12px; padding: 12px; text-align:center;
  border: 1px solid rgba(255,255,255,.05);
}
.scce-feature i, .scce-feature span.material-icons-outlined { font-size: 2.6rem; color: var(--scce-primary); }
.scce-feature h5 { font-size: 1.25rem; font-weight: 700; margin: 4px 0 2px; }
.scce-feature p { font-size: 1.1rem; color: var(--scce-text-muted); }

/* ---------- Steps ---------- */
.scce-steps { list-style: none; counter-reset: step; padding: 0; }
.scce-steps li {
  position: relative; padding: 12px 12px 12px 48px; margin-bottom: 10px;
  background: var(--scce-bg-2); border-radius: 12px;
  counter-increment: step; border: 1px solid rgba(255,255,255,.05);
}
.scce-steps li::before {
  content: counter(step);
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--scce-primary), var(--scce-secondary));
  color: #fff; font-weight: 800; font-size: 1.35rem;
  display:flex; align-items:center; justify-content:center;
}
.scce-steps li h5 { font-size: 1.35rem; font-weight: 700; margin-bottom: 3px; }
.scce-steps li p { font-size: 1.22rem; color: #c0c8ca; }

/* ---------- CTA banner ---------- */
.scce-cta {
  background: linear-gradient(135deg, rgba(255,127,80,.16), rgba(32,178,170,.12));
  border: 1px solid rgba(255,127,80,.3);
  border-radius: var(--scce-radius-lg);
  padding: 20px 16px; text-align:center; margin: 18px 0;
}
.scce-cta h3 { font-size: 1.7rem; font-weight: 800; margin-bottom: 6px; color: var(--scce-primary); }
.scce-cta p { font-size: 1.28rem; color: #cdd5d7; margin-bottom: 12px; }
.scce-cta .scce-btn-register { min-width: 180px; font-size: 1.5rem; padding: 10px 24px; }

/* ---------- Testimonials ---------- */
.scce-review { background: var(--scce-bg-2); border-radius: 12px; padding: 14px; margin-bottom: 10px; border:1px solid rgba(255,255,255,.05); }
.scce-review-head { display:flex; align-items:center; gap:10px; margin-bottom: 6px; }
.scce-review-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--scce-secondary), var(--scce-primary));
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:1.5rem;
}
.scce-review-name { font-size: 1.35rem; font-weight: 700; }
.scce-review-stars { color: var(--scce-accent); font-size: 1.2rem; margin-left: auto; }
.scce-review p { font-size: 1.22rem; color: #c0c8ca; }

/* ---------- Payment ---------- */
.scce-payment-row { display:flex; flex-wrap:wrap; gap:8px; }
.scce-payment {
  flex: 1 1 calc(50% - 8px); min-width: 130px;
  background: var(--scce-bg-2); border-radius: 10px; padding: 10px;
  display:flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.05);
}
.scce-payment i, .scce-payment span.material-icons { font-size: 2rem; color: var(--scce-secondary); }
.scce-payment b { font-size: 1.25rem; font-weight: 700; }

/* ---------- FAQ ---------- */
.scce-faq-item { background: var(--scce-bg-2); border-radius: 10px; margin-bottom: 8px; border:1px solid rgba(255,255,255,.05); overflow: hidden; }
.scce-faq-q {
  width:100%; text-align:left; padding: 13px 14px; font-size: 1.3rem; font-weight: 700;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.scce-faq-q .scce-faq-icon { color: var(--scce-primary); font-size: 1.6rem; transition: transform .2s; }
.scce-faq-item.open .scce-faq-q .scce-faq-icon { transform: rotate(45deg); }
.scce-faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.scce-faq-item.open .scce-faq-a { max-height: 320px; }
.scce-faq-a p { padding: 0 14px 14px; font-size: 1.2rem; color: #c0c8ca; }

/* ---------- Winners ---------- */
.scce-winner {
  display:flex; align-items:center; justify-content:space-between;
  background: var(--scce-bg-2); border-radius: 10px; padding: 10px 12px; margin-bottom: 7px;
  border:1px solid rgba(255,255,255,.05);
}
.scce-winner .scce-winner-user { display:flex; align-items:center; gap:8px; }
.scce-winner .scce-winner-game { font-size: 1.15rem; color: var(--scce-text-muted); }
.scce-winner .scce-winner-amount { color: var(--scce-primary); font-weight: 800; font-size: 1.25rem; }

/* ---------- Inline promo links (SEO) ---------- */
.scce-inline-link { color: var(--scce-primary); font-weight: 700; }
.scce-inline-link:hover { text-decoration: underline; }
.scce-promo-text {
  background: linear-gradient(90deg, rgba(255,127,80,.1), transparent);
  border-left: 3px solid var(--scce-primary);
  padding: 12px 14px; border-radius: 0 10px 10px 0; margin: 8px 0;
  font-size: 1.25rem; color: #e2e7e8;
}
.scce-promo-text a { color: var(--scce-secondary); font-weight: 700; }

/* ---------- Footer ---------- */
.scce-footer {
  background: #070707; border-top: 1px solid rgba(255,127,80,.18);
  padding: 24px 0 96px; margin-top: 24px;
}
.scce-footer .scce-footer-brand { font-size: 1.6rem; font-weight: 800; margin-bottom: 10px; }
.scce-footer .scce-footer-brand span { color: var(--scce-primary); }
.scce-footer p { font-size: 1.2rem; color: var(--scce-text-muted); margin-bottom: 10px; line-height: 1.45; }
.scce-footer-links {
  display:flex; flex-wrap:wrap; gap: 8px 16px; margin: 12px 0 14px;
}
.scce-footer-links a {
  font-size: 1.18rem; color: var(--scce-text-muted); padding: 4px 0;
  border-bottom: 1px dotted rgba(255,255,255,.12);
}
.scce-footer-links a:hover { color: var(--scce-primary); }
.scce-footer-promo { display:flex; flex-wrap:wrap; gap: 8px; margin: 12px 0; }
.scce-footer-promo .scce-btn { flex: 1 1 calc(50% - 4px); min-height: 40px; font-size: 1.25rem; }
.scce-copy { font-size: 1.1rem; color: #6a7274; margin-top: 8px; text-align:center; }

/* ---------- Mobile bottom nav ---------- */
.scce-bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--scce-bottomnav-h);
  background: linear-gradient(180deg, #141414 0%, #070707 100%);
  border-top: 1px solid rgba(255,127,80,.22);
  display:flex; justify-content: space-around; align-items: center;
  z-index: 1000; padding-bottom: env(safe-area-inset-bottom, 0);
}
.scce-bottom-nav-item {
  flex: 1; min-width: 60px; min-height: 60px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  color: var(--scce-text-muted); font-size: 1.05rem; font-weight: 600;
  transition: color .2s ease, transform .18s ease;
  position: relative;
}
.scce-bottom-nav-item i, .scce-bottom-nav-item span.material-icons-outlined {
  font-size: 2.3rem; transition: transform .18s ease, color .2s ease;
}
.scce-bottom-nav-item:active { transform: scale(.9); }
.scce-bottom-nav-item.active { color: var(--scce-primary); }
.scce-bottom-nav-item.active i, .scce-bottom-nav-item.active span { color: var(--scce-primary); transform: translateY(-2px); }
.scce-bottom-nav-item.active::before {
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width: 26px; height: 3px; border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--scce-primary), var(--scce-secondary));
}
.scce-bottom-nav-item.promo { color: var(--scce-secondary); }
.scce-bottom-nav-item.promo i, .scce-bottom-nav-item.promo span { color: var(--scce-secondary); }
.scce-bottom-nav-badge {
  position:absolute; top:8px; right:18px; min-width:15px; height:15px; padding: 0 3px;
  border-radius:8px; background: var(--scce-primary); color:#fff;
  font-size: .9rem; font-weight:800; display:flex; align-items:center; justify-content:center;
}

/* ---------- Utility ---------- */
.scce-hidden { display:none !important; }
.scce-text-center { text-align:center; }
.scce-mt-12 { margin-top: 12px; }
.scce-mt-20 { margin-top: 20px; }
.scce-p-16 { padding: 16px 0; }
.scce-lead { font-size: 1.3rem; color: #cdd5d7; }
.scce-keyword { color: var(--scce-primary); font-weight: 700; }

/* ---------- Responsive: hide bottom nav on desktop ---------- */
@media (min-width: 769px) {
  .scce-bottom-nav { display: none; }
  .scce-footer { padding-bottom: 24px; }
  .scce-menu-toggle { display: none; }
}
@media (max-width: 768px) {
  .scce-main { padding-bottom: calc(var(--scce-bottomnav-h) + 18px); }
}
/* prevent horizontal scroll, ensure tap targets */
@media (max-width: 430px) {
  .scce-container { padding: 0 12px; }
  body { font-size: 1.55rem; }
}