/* ===========================================================
   kkkkjjjj.homes - Core theme stylesheet (prefix: ui4d-)
   Mobile-first HTML5 casino homepage styling.
   =========================================================== */

:root{
  --ui4d-bg:#2D2D2D;
  --ui4d-bg-2:#1c1c1c;
  --ui4d-bg-3:#3a3a3a;
  --ui4d-primary:#FF0000;
  --ui4d-green:#7CFC00;
  --ui4d-gold:#DAA520;
  --ui4d-cream:#FFEF94;
  --ui4d-text:#F0F0F0;
  --ui4d-muted:#b9b9b9;
  --ui4d-radius:14px;
  --ui4d-radius-sm:10px;
  --ui4d-shadow:0 6px 18px rgba(0,0,0,.45);
  --ui4d-header-h:58px;
  --ui4d-nav-h:62px;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{font-size:62.5%;}
body{
  font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--ui4d-bg);
  color:var(--ui4d-text);
  line-height:1.5rem;
  font-size:1.6rem;
  min-height:100vh;
  overflow-x:hidden;
}
a{color:var(--ui4d-gold);text-decoration:none;}
img{max-width:100%;display:block;}
ul{list-style:none;}

/* ---------- Layout ---------- */
.ui4d-wrapper{
  width:100%;
  max-width:430px;
  margin:0 auto;
  position:relative;
}
.ui4d-container{padding:0 14px;}
main{padding-bottom:90px;padding-top:calc(var(--ui4d-header-h) + 8px);}

/* ---------- Header / Top nav ---------- */
.ui4d-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:linear-gradient(180deg,#1f1f1f,#2D2D2D);
  border-bottom:2px solid var(--ui4d-gold);
  box-shadow:0 2px 10px rgba(0,0,0,.6);
}
.ui4d-header-inner{
  max-width:430px;margin:0 auto;
  height:var(--ui4d-header-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 12px;
}
.ui4d-brand{display:flex;align-items:center;gap:8px;color:var(--ui4d-text);font-weight:800;}
.ui4d-brand img{width:28px;height:28px;border-radius:6px;}
.ui4d-brand-name{font-size:1.9rem;letter-spacing:.3px;color:var(--ui4d-cream);}
.ui4d-brand-name b{color:var(--ui4d-primary);}
.ui4d-header-actions{display:flex;align-items:center;gap:8px;}
.ui4d-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 16px;border-radius:30px;border:0;cursor:pointer;
  font-size:1.4rem;font-weight:700;color:#fff;
  transition:transform .15s ease,filter .15s ease;
  min-height:38px;
}
.ui4d-btn:active{transform:scale(.95);}
.ui4d-btn-primary{background:linear-gradient(135deg,#FF0000,#a30000);}
.ui4d-btn-secondary{background:linear-gradient(135deg,#DAA520,#9a7a12);color:#1c1c1c;}
.ui4d-btn-ghost{background:transparent;border:1px solid var(--ui4d-gold);color:var(--ui4d-gold);}
.ui4d-menu-btn{
  background:transparent;border:0;color:var(--ui4d-cream);
  font-size:2.2rem;cursor:pointer;padding:6px 8px;
}

/* ---------- Mobile slide menu ---------- */
.ui4d-menu{
  position:fixed;top:0;right:-80%;width:80%;max-width:320px;
  height:100vh;z-index:9999;background:#171717;
  box-shadow:-4px 0 24px rgba(0,0,0,.6);
  transition:right .28s ease;padding:18px 16px;overflow-y:auto;
}
.ui4d-menu.open{right:0;}
.ui4d-menu-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  z-index:9998;opacity:0;pointer-events:none;transition:opacity .25s ease;
}
.ui4d-menu-overlay.open{opacity:1;pointer-events:auto;}
.ui4d-menu h3{font-size:1.5rem;color:var(--ui4d-cream);margin:14px 0 8px;text-transform:uppercase;letter-spacing:1px;}
.ui4d-menu a{
  display:block;padding:11px 12px;border-radius:8px;
  color:var(--ui4d-text);font-size:1.5rem;font-weight:600;
  border-bottom:1px solid #2a2a2a;
}
.ui4d-menu a:hover{background:#262626;color:var(--ui4d-gold);}
.ui4d-menu-close{
  position:absolute;top:10px;right:12px;background:transparent;border:0;
  color:var(--ui4d-text);font-size:2.4rem;cursor:pointer;
}

/* ---------- Hero / Carousel ---------- */
.ui4d-hero{margin:12px 0 6px;}
.ui4d-carousel{position:relative;border-radius:var(--ui4d-radius);overflow:hidden;box-shadow:var(--ui4d-shadow);}
.ui4d-slides{display:flex;scroll-snap-type:x mandatory;overflow-x:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;}
.ui4d-slides::-webkit-scrollbar{display:none;}
.ui4d-slide{flex:0 0 100%;scroll-snap-align:start;position:relative;cursor:pointer;}
.ui4d-slide img{width:100%;height:200px;object-fit:cover;}
.ui4d-slide-caption{
  position:absolute;left:14px;bottom:12px;right:14px;color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.7);font-weight:700;font-size:1.7rem;
}
.ui4d-dots{display:flex;justify-content:center;gap:6px;margin-top:8px;}
.ui4d-dots span{
  width:8px;height:8px;border-radius:50%;background:#666;cursor:pointer;
}
.ui4d-dots span.active{background:var(--ui4d-gold);}

/* ---------- Section heading ---------- */
.ui4d-section{margin:22px 0;}
.ui4d-section-title{
  display:flex;align-items:center;gap:8px;
  font-size:1.9rem;font-weight:800;color:var(--ui4d-cream);
  margin:0 0 12px;padding-left:10px;border-left:4px solid var(--ui4d-primary);
}
.ui4d-section-title i{color:var(--ui4d-gold);}

/* ---------- Game grid ---------- */
.ui4d-game-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
.ui4d-game-card{
  background:var(--ui4d-bg-2);border:1px solid #3a3a3a;border-radius:var(--ui4d-radius-sm);
  padding:8px;text-align:center;cursor:pointer;overflow:hidden;
  transition:transform .15s ease,border-color .2s ease;
}
.ui4d-game-card:active{transform:scale(.95);}
.ui4d-game-card:hover{border-color:var(--ui4d-gold);}
.ui4d-game-card img{
  width:100%;height:84px;object-fit:cover;border-radius:8px;margin-bottom:6px;
  background:#000;
}
.ui4d-game-card .ui4d-game-name{
  font-size:1.25rem;font-weight:600;color:var(--ui4d-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ui4d-game-cat-tag{
  display:inline-block;font-size:1.05rem;color:var(--ui4d-green);
  font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;
}

/* ---------- Info / Feature blocks ---------- */
.ui4d-card{
  background:var(--ui4d-bg-2);border-radius:var(--ui4d-radius);
  padding:14px;margin-bottom:12px;border:1px solid #333;
}
.ui4d-card h3{font-size:1.7rem;color:var(--ui4d-gold);margin-bottom:6px;}
.ui4d-card p{font-size:1.4rem;color:var(--ui4d-muted);line-height:1.55rem;}
.ui4d-feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.ui4d-feature-item{
  background:var(--ui4d-bg-3);border-radius:var(--ui4d-radius-sm);
  padding:12px;text-align:center;
}
.ui4d-feature-item i{font-size:2.6rem;color:var(--ui4d-primary);display:block;margin-bottom:6px;}
.ui4d-feature-item b{color:var(--ui4d-cream);font-size:1.4rem;display:block;}
.ui4d-feature-item span{font-size:1.2rem;color:var(--ui4d-muted);}

/* ---------- Promo CTA ---------- */
.ui4d-cta{
  background:linear-gradient(135deg,#7CFC00,#3a8b00);
  color:#0f1d00;border-radius:var(--ui4d-radius);padding:18px 14px;
  text-align:center;margin:18px 0;box-shadow:var(--ui4d-shadow);
}
.ui4d-cta h3{font-size:2rem;color:#1c1c1c;margin-bottom:6px;}
.ui4d-cta p{font-size:1.35rem;color:#243800;margin-bottom:10px;}
.ui4d-cta .ui4d-btn{background:#1c1c1c;color:var(--ui4d-cream);}

.ui4d-promo-link{
  color:var(--ui4d-primary);font-weight:800;text-decoration:underline;
}

/* ---------- RTP table ---------- */
.ui4d-rtp-table{width:100%;border-collapse:collapse;font-size:1.3rem;}
.ui4d-rtp-table th,.ui4d-rtp-table td{padding:8px;border-bottom:1px solid #333;text-align:left;}
.ui4d-rtp-table th{color:var(--ui4d-gold);}
.ui4d-rtp-table td span{color:var(--ui4d-green);font-weight:700;}

/* ---------- Testimonials ---------- */
.ui4d-testimonial{
  background:var(--ui4d-bg-3);border-radius:var(--ui4d-radius-sm);
  padding:12px;margin-bottom:10px;border-left:3px solid var(--ui4d-green);
}
.ui4d-testimonial b{color:var(--ui4d-cream);}
.ui4d-testimonial .stars{color:var(--ui4d-gold);font-size:1.3rem;}
.ui4d-testimonial p{font-size:1.35rem;color:var(--ui4d-text);margin-top:4px;}

/* ---------- Payment methods ---------- */
.ui4d-pay-row{display:flex;flex-wrap:wrap;gap:8px;}
.ui4d-pay-chip{
  background:var(--ui4d-bg-3);border:1px solid #444;border-radius:30px;
  padding:6px 12px;font-size:1.25rem;color:var(--ui4d-text);
  display:inline-flex;align-items:center;gap:6px;
}

/* ---------- Winners ---------- */
.ui4d-winner{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--ui4d-bg-3);border-radius:8px;padding:8px 10px;margin-bottom:6px;font-size:1.3rem;
}
.ui4d-winner b{color:var(--ui4d-cream);}
.ui4d-winner span{color:var(--ui4d-green);font-weight:800;}

/* ---------- App download ---------- */
.ui4d-app-cta{
  background:linear-gradient(135deg,#FF0000,#7a0000);
  border-radius:var(--ui4d-radius);padding:16px;text-align:center;color:#fff;margin:18px 0;
}
.ui4d-app-cta h3{font-size:1.9rem;color:var(--ui4d-cream);margin-bottom:6px;}
.ui4d-app-cta p{font-size:1.35rem;margin-bottom:10px;}
.ui4d-app-cta .ui4d-btn{background:#1c1c1c;color:var(--ui4d-cream);}

/* ---------- Footer ---------- */
.ui4d-footer{
  background:#161616;border-top:2px solid var(--ui4d-gold);
  padding:20px 14px 30px;color:var(--ui4d-muted);
}
.ui4d-footer-brand{font-size:1.4rem;margin-bottom:10px;line-height:1.6rem;}
.ui4d-footer-brand b{color:var(--ui4d-primary);}
.ui4d-footer-links{
  display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;
}
.ui4d-footer-links a{
  flex:1 1 45%;background:#262626;color:var(--ui4d-text);
  padding:8px 10px;border-radius:8px;font-size:1.25rem;text-align:center;
}
.ui4d-footer-links a:hover{background:#333;color:var(--ui4d-gold);}
.ui4d-footer-copy{text-align:center;font-size:1.2rem;color:#777;margin-top:14px;border-top:1px solid #2a2a2a;padding-top:12px;}

/* ---------- Bottom nav ---------- */
.ui4d-bottom-nav{
  position:fixed;bottom:0;left:0;right:0;z-index:1000;
  height:var(--ui4d-nav-h);background:#1a1a1a;
  border-top:2px solid var(--ui4d-gold);
  display:flex;justify-content:space-around;align-items:center;
  box-shadow:0 -3px 14px rgba(0,0,0,.55);
}
.ui4d-bottom-nav a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--ui4d-muted);font-size:1.1rem;font-weight:600;
  min-width:60px;min-height:60px;gap:3px;transition:color .2s ease,transform .15s ease;
}
.ui4d-bottom-nav a:active{transform:scale(.92);}
.ui4d-bottom-nav a.active{color:var(--ui4d-gold);}
.ui4d-bottom-nav a .material-icons,
.ui4d-bottom-nav a ion-icon,
.ui4d-bottom-nav a i{font-size:24px;}
.ui4d-bottom-nav a .badge{
  position:absolute;top:8px;right:50%;transform:translateX(16px);
  background:var(--ui4d-primary);color:#fff;border-radius:50%;
  font-size:1rem;padding:0 5px;line-height:1.6rem;height:1.6rem;min-width:1.6rem;
}
.ui4d-bottom-nav a{position:relative;}

/* ---------- Desktop ---------- */
@media (min-width:769px){
  .ui4d-bottom-nav{display:none;}
  main{padding-bottom:40px;}
  .ui4d-wrapper{max-width:760px;}
}

/* ---------- Helpers ---------- */
.ui4d-text-center{text-align:center;}
.ui4d-mt-10{margin-top:10px;}
.ui4d-hidden-mobile{display:none;}
@media (min-width:769px){.ui4d-hidden-mobile{display:block;}}