/* ============================================================
   dddjili.click - Core Stylesheet (basefiles)
   Prefix: sdbc-
   Palette: #DEB887 | #2E4057 | #FF69B4 | #DB7093 | #FFEFD5 | #E5E5E5
   Mobile-first HTML5 casino layout (max-width 430px)
   ============================================================ */

:root{
  --sdbc-primary:#DEB887;
  --sdbc-secondary:#2E4057;
  --sdbc-accent:#FF69B4;
  --sdbc-accent-2:#DB7093;
  --sdbc-cream:#FFEFD5;
  --sdbc-light:#E5E5E5;
  --sdbc-bg:#1a2533;
  --sdbc-bg-2:#22324a;
  --sdbc-text:#FFEFD5;
  --sdbc-text-soft:#E5E5E5;
  --sdbc-muted:#9fb1c4;
  --sdbc-card:#22324a;
  --sdbc-border:rgba(222,184,135,.25);
  --sdbc-gradient:linear-gradient(135deg,#DEB887 0%,#DB7093 55%,#FF69B4 100%);
  --sdbc-shadow:0 6px 22px rgba(0,0,0,.32);
  --sdbc-radius:14px;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{font-size:62.5%;scroll-behavior:smooth;}
body{
  font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif;
  background:var(--sdbc-bg);
  color:var(--sdbc-text);
  line-height:1.5rem;
  font-size:1.5rem;
  overflow-x:hidden;
  min-height:100vh;
}
img{max-width:100%;display:block;}
a{color:var(--sdbc-primary);text-decoration:none;}
h1,h2,h3,h4{line-height:1.25;}

/* ---------- Layout helpers ---------- */
.sdbc-container{width:100%;max-width:430px;margin:0 auto;padding:0 12px;}
.sdbc-wrapper{padding-bottom:90px;}
.sdbc-section{padding:22px 0;}
.sdbc-section-title{
  font-size:2rem;font-weight:800;color:var(--sdbc-cream);
  margin-bottom:12px;display:flex;align-items:center;gap:8px;
}
.sdbc-section-title::before{
  content:"";width:5px;height:22px;border-radius:3px;background:var(--sdbc-gradient);
}
.sdbc-text-link{color:var(--sdbc-accent);font-weight:700;}
.sdbc-text-link:hover{text-decoration:underline;}

/* ---------- Header / Nav ---------- */
.sdbc-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:rgba(26,37,51,.96);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--sdbc-border);
}
.sdbc-header-inner{
  max-width:430px;margin:0 auto;padding:8px 12px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.sdbc-logo{display:flex;align-items:center;gap:8px;min-width:0;}
.sdbc-logo img{width:30px;height:30px;border-radius:8px;}
.sdbc-logo-name{
  font-size:1.8rem;font-weight:900;color:var(--sdbc-primary);letter-spacing:.5px;
  white-space:nowrap;
}
.sdbc-header-actions{display:flex;align-items:center;gap:6px;}
.sdbc-btn{
  border:none;cursor:pointer;border-radius:24px;padding:8px 16px;
  font-size:1.3rem;font-weight:700;letter-spacing:.3px;
  transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease;
}
.sdbc-btn:active{transform:scale(.95);}
.sdbc-btn-login{
  background:transparent;color:var(--sdbc-cream);
  border:1.5px solid var(--sdbc-primary);
}
.sdbc-btn-register{
  background:var(--sdbc-gradient);color:#1a2533;
  box-shadow:0 4px 14px rgba(255,105,180,.4);
}
.sdbc-menu-toggle{
  background:transparent;border:none;color:var(--sdbc-cream);
  font-size:2rem;cursor:pointer;padding:4px 6px;display:flex;align-items:center;
}

/* ---------- Mobile Menu Drawer ---------- */
.sdbc-mobile-menu{
  position:fixed;top:0;right:-100%;width:80%;max-width:340px;height:100vh;
  background:var(--sdbc-secondary);z-index:9999;
  transition:right .3s ease;padding:70px 18px 30px;overflow-y:auto;
  box-shadow:-6px 0 24px rgba(0,0,0,.45);
}
.sdbc-mobile-menu.sdbc-open{right:0;}
.sdbc-mobile-menu h3{
  color:var(--sdbc-primary);font-size:1.6rem;margin:14px 0 8px;
  text-transform:uppercase;letter-spacing:1px;
}
.sdbc-mobile-menu a{
  display:block;padding:11px 12px;border-radius:10px;
  color:var(--sdbc-cream);font-size:1.4rem;font-weight:600;
  border-bottom:1px solid rgba(222,184,135,.12);
}
.sdbc-mobile-menu a:hover,.sdbc-mobile-menu a:focus{background:rgba(222,184,135,.12);}
.sdbc-menu-close{
  position:absolute;top:14px;right:14px;background:transparent;border:none;
  color:var(--sdbc-cream);font-size:2.4rem;cursor:pointer;
}
.sdbc-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9998;
  opacity:0;visibility:hidden;transition:opacity .25s ease;
}
.sdbc-overlay.sdbc-open{opacity:1;visibility:visible;}

/* ---------- Hero / Carousel ---------- */
.sdbc-hero{margin-top:62px;}
.sdbc-carousel{position:relative;border-radius:18px;overflow:hidden;box-shadow:var(--sdbc-shadow);}
.sdbc-carousel-track{display:flex;transition:transform .45s ease;}
.sdbc-slide{min-width:100%;position:relative;}
.sdbc-slide img{width:100%;height:200px;object-fit:cover;}
.sdbc-slide-overlay{
  position:absolute;left:0;right:0;bottom:0;padding:14px;
  background:linear-gradient(to top,rgba(26,37,51,.92),transparent);
}
.sdbc-slide-overlay h2{font-size:1.9rem;color:var(--sdbc-cream);margin-bottom:6px;}
.sdbc-slide-overlay p{font-size:1.25rem;color:var(--sdbc-light);}
.sdbc-carousel-dots{
  display:flex;justify-content:center;gap:6px;margin-top:10px;
}
.sdbc-carousel-dots button{
  width:8px;height:8px;border-radius:50%;border:none;
  background:rgba(222,184,135,.4);cursor:pointer;padding:0;
}
.sdbc-carousel-dots button.sdbc-active{background:var(--sdbc-accent);width:22px;border-radius:4px;}

/* ---------- Promo CTA ---------- */
.sdbc-promo-banner{
  background:var(--sdbc-gradient);border-radius:16px;padding:14px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  color:#1a2533;box-shadow:var(--sdbc-shadow);margin-bottom:8px;
}
.sdbc-promo-banner h3{font-size:1.6rem;font-weight:900;}
.sdbc-promo-banner p{font-size:1.15rem;font-weight:600;}
.sdbc-promo-btn{
  background:#1a2533;color:var(--sdbc-primary);padding:9px 16px;border-radius:22px;
  font-weight:800;font-size:1.25rem;white-space:nowrap;
}

/* ---------- Game Grid ---------- */
.sdbc-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;margin-bottom:6px;}
.sdbc-tabs::-webkit-scrollbar{display:none;}
.sdbc-tab{
  flex:0 0 auto;padding:7px 14px;border-radius:20px;font-size:1.25rem;font-weight:700;
  background:var(--sdbc-card);color:var(--sdbc-light);border:1px solid var(--sdbc-border);
  cursor:pointer;white-space:nowrap;
}
.sdbc-tab.sdbc-active{background:var(--sdbc-gradient);color:#1a2533;border-color:transparent;}
.sdbc-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
.sdbc-game-card{
  background:var(--sdbc-card);border-radius:12px;overflow:hidden;
  border:1px solid var(--sdbc-border);transition:transform .15s ease;
  cursor:pointer;position:relative;
}
.sdbc-game-card:active{transform:scale(.96);}
.sdbc-game-card img{width:100%;aspect-ratio:1;object-fit:cover;background:#0f1822;}
.sdbc-game-card-name{
  padding:6px 6px 8px;font-size:1.1rem;color:var(--sdbc-cream);text-align:center;
  font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sdbc-game-card .sdbc-play-tag{
  position:absolute;top:6px;right:6px;background:rgba(255,105,180,.92);
  color:#fff;font-size:.95rem;padding:2px 7px;border-radius:8px;font-weight:700;
}

/* ---------- Info / Content ---------- */
.sdbc-content-block{
  background:var(--sdbc-card);border-radius:14px;padding:16px;
  border:1px solid var(--sdbc-border);margin-bottom:12px;
}
.sdbc-content-block h2{font-size:1.8rem;color:var(--sdbc-primary);margin-bottom:8px;}
.sdbc-content-block h3{font-size:1.5rem;color:var(--sdbc-accent);margin:10px 0 6px;}
.sdbc-content-block p{margin-bottom:8px;color:var(--sdbc-text-soft);}
.sdbc-content-block ul{padding-left:18px;margin-bottom:8px;color:var(--sdbc-text-soft);}
.sdbc-content-block li{margin-bottom:4px;}

/* ---------- Features strip ---------- */
.sdbc-features{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.sdbc-feature{
  background:var(--sdbc-card);border-radius:12px;padding:14px;text-align:center;
  border:1px solid var(--sdbc-border);
}
.sdbc-feature-icon{
  width:42px;height:42px;border-radius:50%;margin:0 auto 8px;
  display:flex;align-items:center;justify-content:center;font-size:2rem;
  background:var(--sdbc-gradient);color:#1a2533;
}
.sdbc-feature h4{font-size:1.3rem;color:var(--sdbc-cream);margin-bottom:4px;}
.sdbc-feature p{font-size:1.1rem;color:var(--sdbc-muted);}

/* ---------- Footer ---------- */
.sdbc-footer{
  background:var(--sdbc-secondary);padding:24px 0 18px;margin-top:20px;
  border-top:1px solid var(--sdbc-border);
}
.sdbc-footer-brand{
  color:var(--sdbc-light);font-size:1.25rem;margin-bottom:14px;line-height:1.6;
}
.sdbc-footer-promos{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;
}
.sdbc-footer-promos .sdbc-btn{padding:7px 14px;font-size:1.15rem;}
.sdbc-footer-links{
  display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:14px;
}
.sdbc-footer-links a{font-size:1.15rem;color:var(--sdbc-text-soft);}
.sdbc-footer-links a:hover{color:var(--sdbc-primary);}
.sdbc-copyright{
  font-size:1.1rem;color:var(--sdbc-muted);text-align:center;border-top:1px solid rgba(222,184,135,.15);padding-top:12px;
}

/* ---------- Mobile Bottom Nav ---------- */
.sdbc-bottom-nav{
  position:fixed;bottom:0;left:0;right:0;z-index:1000;height:62px;
  background:rgba(26,37,51,.98);
  border-top:1px solid var(--sdbc-border);
  display:flex;justify-content:space-around;align-items:stretch;
  box-shadow:0 -4px 18px rgba(0,0,0,.35);
}
.sdbc-bottom-nav-btn{
  flex:1;min-width:60px;min-height:60px;background:transparent;border:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--sdbc-light);cursor:pointer;padding:6px 2px;gap:2px;
  transition:color .15s ease,transform .15s ease;position:relative;
}
.sdbc-bottom-nav-btn:active{transform:scale(.92);}
.sdbc-bottom-nav-btn .sdbc-bn-icon{font-size:22px;line-height:1;}
.sdbc-bottom-nav-btn .sdbc-bn-label{font-size:1rem;font-weight:600;letter-spacing:.2px;}
.sdbc-bottom-nav-btn.sdbc-bn-active{color:var(--sdbc-primary);}
.sdbc-bottom-nav-btn.sdbc-bn-active .sdbc-bn-icon{
  background:var(--sdbc-gradient);color:#1a2533;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin-top:-18px;
  box-shadow:0 4px 12px rgba(255,105,180,.5);font-size:22px;
}
.sdbc-bottom-nav-btn.sdbc-bn-promo{color:var(--sdbc-accent);}

/* ---------- Desktop ---------- */
@media (min-width:769px){
  .sdbc-bottom-nav{display:none;}
  .sdbc-wrapper{padding-bottom:30px;}
}
@media (min-width:600px) and (max-width:768px){
  .sdbc-grid{grid-template-columns:repeat(4,1fr);}
}
@media (max-width:430px){
  .sdbc-slide img{height:180px;}
}