/* rr8866 layout - all custom classes use the sacd- prefix */
:root{
  --sacd-primary:#0097A7;
  --sacd-bg:#34495E;
  --sacd-bg-dark:#2a3744;
  --sacd-text:#f4f7fa;
  --sacd-muted:#6C757D;
  --sacd-accent:#00E5FF;
  --sacd-danger:#B22222;
  --sacd-card:#3d4c5e;
  --sacd-border:#4a5b70;
  --sacd-radius:10px;
  --sacd-shadow:0 3px 12px rgba(0,0,0,.35);
}

*{box-sizing:border-box;margin:0;padding:0}
html{font-size:62.5%}
body{
  font-family:"Segoe UI",Roboto,system-ui,Arial,sans-serif;
  background:var(--sacd-bg);
  color:var(--sacd-text);
  line-height:1.5rem;
  font-size:1.5rem;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--sacd-accent);text-decoration:none}

/* Layout containers */
.sacd-container{width:100%;max-width:430px;margin:0 auto;padding:0 1.2rem}
.sacd-wrapper{min-height:100vh;display:flex;flex-direction:column}
main{flex:1;padding-bottom:80px}

/* Header */
.sacd-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:linear-gradient(180deg,#2a3744,#34495E);
  border-bottom:2px solid var(--sacd-primary);
  box-shadow:var(--sacd-shadow);
}
.sacd-header-inner{
  max-width:430px;margin:0 auto;padding:.6rem 1rem;
  display:flex;align-items:center;gap:.8rem;
}
.sacd-logo{display:flex;align-items:center;gap:.6rem;flex:1;min-width:0}
.sacd-logo img{width:30px;height:30px;border-radius:6px}
.sacd-logo-text{font-size:1.7rem;font-weight:800;color:var(--sacd-accent);white-space:nowrap;letter-spacing:.5px}
.sacd-header-actions{display:flex;gap:.5rem;align-items:center}
.sacd-btn{
  border:none;border-radius:20px;padding:.6rem 1.2rem;font-size:1.3rem;font-weight:700;
  cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;min-height:36px;
}
.sacd-btn:active{transform:scale(.96)}
.sacd-btn-login{background:transparent;color:var(--sacd-text);border:1px solid var(--sacd-accent)}
.sacd-btn-register{background:linear-gradient(90deg,var(--sacd-danger),#d94a4a);color:#fff;box-shadow:0 2px 8px rgba(178,34,34,.45)}
.sacd-menu-btn{
  background:transparent;border:none;color:var(--sacd-text);font-size:2rem;cursor:pointer;
  padding:.2rem .5rem;line-height:1;
}

/* Expandable nav menu */
.sacd-nav-menu{
  max-height:0;overflow:hidden;transition:max-height .3s ease;
  background:var(--sacd-bg-dark);border-top:1px solid var(--sacd-border);
}
.sacd-nav-open{max-height:480px}
.sacd-nav-list{list-style:none;padding:.4rem 1.2rem}
.sacd-nav-list li{border-bottom:1px solid rgba(255,255,255,.06)}
.sacd-nav-list li:last-child{border-bottom:none}
.sacd-nav-list a{display:block;padding:1rem .4rem;color:var(--sacd-text);font-size:1.4rem}
.sacd-nav-list a:hover{color:var(--sacd-accent)}

/* Hero / Carousel */
.sacd-hero{margin-top:64px;padding:1rem 0 .4rem}
.sacd-carousel{position:relative;border-radius:var(--sacd-radius);overflow:hidden;box-shadow:var(--sacd-shadow)}
.sacd-slides{position:relative;height:170px}
.sacd-slide{
  position:absolute;inset:0;opacity:0;transition:opacity .6s ease;cursor:pointer;
}
.sacd-slide img{width:100%;height:170px;object-fit:cover}
.sacd-slide-active{opacity:1}
.sacd-slide-caption{
  position:absolute;left:0;right:0;bottom:0;padding:.8rem 1rem;
  background:linear-gradient(0deg,rgba(0,0,0,.75),transparent);
  font-size:1.3rem;font-weight:700;
}
.sacd-dots{position:absolute;bottom:8px;left:0;right:0;display:flex;justify-content:center;gap:.5rem}
.sacd-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4)}
.sacd-dot-active{background:var(--sacd-accent)}

/* Sections */
.sacd-section{padding:1.6rem 0}
.sacd-section-title{
  font-size:2rem;font-weight:800;margin-bottom:1rem;color:var(--sacd-accent);
  display:flex;align-items:center;gap:.5rem;border-left:4px solid var(--sacd-danger);padding-left:.8rem;
}
.sacd-section-title i{font-size:2.2rem}
.sacd-lead{font-size:1.4rem;color:#dfe7f1;margin-bottom:1rem;line-height:1.6}

/* H1 */
.sacd-h1{font-size:2.2rem;font-weight:800;color:var(--sacd-accent);line-height:1.3;margin:.4rem 0 1rem}

/* Game grid */
.sacd-game-cat{margin-bottom:1.6rem}
.sacd-cat-title{
  font-size:1.7rem;font-weight:700;margin:.6rem 0 .8rem;color:var(--sacd-text);
  display:flex;align-items:center;gap:.5rem;
}
.sacd-cat-title .sacd-cat-badge{
  background:var(--sacd-primary);color:#fff;font-size:1.1rem;padding:.15rem .6rem;border-radius:10px;
}
.sacd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.sacd-game-card{
  background:var(--sacd-card);border:1px solid var(--sacd-border);border-radius:var(--sacd-radius);
  overflow:hidden;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;text-align:center;
}
.sacd-game-card:active{transform:scale(.96);box-shadow:0 0 0 2px var(--sacd-accent)}
.sacd-game-card img{width:100%;aspect-ratio:1;object-fit:cover;background:#222}
.sacd-game-name{font-size:1.1rem;padding:.4rem .2rem;color:#eef3f9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Cards */
.sacd-card{
  background:var(--sacd-card);border:1px solid var(--sacd-border);border-radius:var(--sacd-radius);
  padding:1.2rem;margin-bottom:1rem;box-shadow:var(--sacd-shadow);
}
.sacd-card h3{font-size:1.6rem;color:var(--sacd-accent);margin-bottom:.6rem}
.sacd-card p{font-size:1.3rem;color:#dfe7f1;line-height:1.6}
.sacd-card ul{padding-left:1.4rem}
.sacd-card li{font-size:1.3rem;color:#dfe7f1;margin-bottom:.4rem;line-height:1.5}

/* Promo CTA */
.sacd-cta{
  display:inline-block;background:linear-gradient(90deg,var(--sacd-danger),#d94a4a);
  color:#fff;font-weight:700;padding:.8rem 1.6rem;border-radius:24px;font-size:1.4rem;
  cursor:pointer;border:none;box-shadow:0 3px 10px rgba(178,34,34,.45);transition:transform .15s ease;
}
.sacd-cta:active{transform:scale(.96)}
.sacd-text-link{color:var(--sacd-accent);font-weight:700;text-decoration:underline}

/* Features list */
.sacd-features{display:grid;grid-template-columns:1fr;gap:.8rem}
.sacd-feature{display:flex;gap:.8rem;align-items:flex-start;background:var(--sacd-card);padding:1rem;border-radius:var(--sacd-radius);border:1px solid var(--sacd-border)}
.sacd-feature i{color:var(--sacd-accent);font-size:2rem;flex-shrink:0}
.sacd-feature h4{font-size:1.4rem;color:var(--sacd-text);margin-bottom:.3rem}
.sacd-feature p{font-size:1.2rem;color:#cdd7e3;line-height:1.5}

/* RTP compact table */
.sacd-rtp{width:100%;border-collapse:collapse;font-size:1.2rem}
.sacd-rtp th,.sacd-rtp td{padding:.6rem .4rem;border-bottom:1px solid var(--sacd-border);text-align:left}
.sacd-rtp th{color:var(--sacd-accent)}
.sacd-rtp td.num{color:var(--sacd-accent);font-weight:700}

/* Winners showcase */
.sacd-winners{display:grid;grid-template-columns:1fr;gap:.6rem}
.sacd-winner{display:flex;justify-content:space-between;align-items:center;background:var(--sacd-card);padding:.7rem 1rem;border-radius:var(--sacd-radius);border:1px solid var(--sacd-border)}
.sacd-winner .name{font-size:1.2rem;font-weight:700}
.sacd-winner .amt{color:var(--sacd-accent);font-weight:800;font-size:1.3rem}

/* Testimonials */
.sacd-testi{background:var(--sacd-card);border:1px solid var(--sacd-border);border-radius:var(--sacd-radius);padding:1rem;margin-bottom:.8rem}
.sacd-testi .stars{color:#FFD700;margin-bottom:.4rem}
.sacd-testi p{font-size:1.3rem;color:#dfe7f1;line-height:1.5;margin-bottom:.4rem}
.sacd-testi .who{font-size:1.1rem;color:var(--sacd-muted)}

/* Payment chips */
.sacd-pay{display:flex;flex-wrap:wrap;gap:.6rem}
.sacd-pay span{background:var(--sacd-card);border:1px solid var(--sacd-border);border-radius:20px;padding:.4rem 1rem;font-size:1.2rem;color:#dfe7f1}

/* App download CTA */
.sacd-app-box{background:linear-gradient(135deg,#2a3744,#3d4c5e);border:1px solid var(--sacd-primary);border-radius:var(--sacd-radius);padding:1.2rem;text-align:center;margin-bottom:1rem}
.sacd-app-box h3{color:var(--sacd-accent);font-size:1.7rem;margin-bottom:.5rem}
.sacd-app-box p{font-size:1.3rem;color:#dfe7f1;margin-bottom:.8rem}

/* FAQ */
.sacd-faq{border-bottom:1px solid var(--sacd-border);padding:.8rem 0}
.sacd-faq q{display:block;font-weight:700;color:var(--sacd-text);font-size:1.4rem;margin-bottom:.3rem}
.sacd-faq a{font-size:1.3rem;color:var(--sacd-accent)}

/* Footer */
.sacd-footer{background:var(--sacd-bg-dark);border-top:2px solid var(--sacd-primary);padding:1.6rem 0 1rem}
.sacd-footer-brand{font-size:1.3rem;color:#cdd7e3;line-height:1.6;margin-bottom:1rem}
.sacd-footer-links{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;margin-bottom:1rem}
.sacd-footer-links a{font-size:1.2rem;color:#cdd7e3}
.sacd-footer-links a:hover{color:var(--sacd-accent)}
.sacd-footer-promo{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1rem}
.sacd-copy{font-size:1.1rem;color:var(--sacd-muted);text-align:center;padding-top:.8rem;border-top:1px solid var(--sacd-border)}

/* Mobile bottom navigation */
.sacd-bnav{
  position:fixed;bottom:0;left:0;right:0;z-index:1000;
  background:linear-gradient(180deg,#34495E,#2a3744);
  border-top:2px solid var(--sacd-primary);
  display:flex;justify-content:space-around;align-items:center;
  height:60px;
}
.sacd-bnav-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:60px;min-height:60px;background:transparent;border:none;color:#cdd7e3;
  cursor:pointer;gap:.2rem;transition:transform .15s ease,color .15s ease;flex:1;
}
.sacd-bnav-btn i,.sacd-bnav-btn .material-icons-outlined{font-size:24px}
.sacd-bnav-btn span{font-size:1.1rem}
.sacd-bnav-btn:active{transform:scale(.9)}
.sacd-bnav-active{color:var(--sacd-accent)}
.sacd-bnav-active i{color:var(--sacd-danger)}

/* Desktop: hide bottom nav, show desktop nav */
@media (min-width:769px){
  .sacd-bnav{display:none}
  main{padding-bottom:0}
  .sacd-container{max-width:960px}
  .sacd-grid{grid-template-columns:repeat(6,1fr)}
  .sacd-features{grid-template-columns:repeat(2,1fr)}
  .sacd-winners{grid-template-columns:repeat(2,1fr)}
}
