/*!
 * uu8.homes layout stylesheet
 * All custom classes use the "w2a4d-" prefix.
 * Palette: #CD853F (primary), #FAF0E6 (linen/light), #1A1A1A (dark bg).
 * Comments in English.
 */
:root{
  --w2a4d-primary:#CD853F;
  --w2a4d-primary-dark:#a86a2c;
  --w2a4d-primary-soft:#e6b98a;
  --w2a4d-bg:#1A1A1A;
  --w2a4d-bg-2:#232323;
  --w2a4d-bg-3:#2e2e2e;
  --w2a4d-text:#FAF0E6;
  --w2a4d-text-muted:#c9bba9;
  --w2a4d-line:#3a3a3a;
  --w2a4d-success:#4caf7d;
  --w2a4d-warning:#e0a93b;
  --w2a4d-radius:14px;
  --w2a4d-shadow:0 8px 24px rgba(0,0,0,.45);
}

*{box-sizing:border-box;}
html{font-size:62.5%; -webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--w2a4d-bg); color:var(--w2a4d-text);
  font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  font-size:1.5rem; line-height:1.5rem; overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:var(--w2a4d-primary-soft); text-decoration:none;}
a:hover{color:var(--w2a4d-primary);}
h1,h2,h3{line-height:1.45; margin:0 0 .6em; color:var(--w2a4d-text);}
h1{font-size:2.1rem;} h2{font-size:1.85rem;} h3{font-size:1.6rem;}
p{margin:0 0 1em;}

/* Layout primitives */
.w2a4d-wrapper{
  width:100%; max-width:430px; margin:0 auto; position:relative;
  padding-top:62px; /* header clearance */
}
.w2a4d-container{padding:18px 14px 10px;}
.w2a4d-section{margin:22px 0;}
.w2a4d-grid{display:grid; gap:12px;}
.w2a4d-row{display:flex; flex-wrap:wrap; gap:10px;}

/* Buttons */
.w2a4d-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:44px; padding:10px 18px; border:none; border-radius:999px;
  font-size:1.4rem; font-weight:700; cursor:pointer; text-decoration:none;
  background:var(--w2a4d-primary); color:#1A1A1A; transition:transform .15s ease, background .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.w2a4d-btn:hover{background:var(--w2a4d-primary-dark); color:#fff; transform:translateY(-1px);}
.w2a4d-btn:active{transform:scale(.97);}
.w2a4d-btn-outline{
  background:transparent; border:1.5px solid var(--w2a4d-primary); color:var(--w2a4d-primary);
}
.w2a4d-btn-outline:hover{background:rgba(205,133,63,.12); color:var(--w2a4d-primary-soft);}
.w2a4d-btn-block{display:flex; width:100%;}

/* Header */
.w2a4d-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  max-width:430px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  height:56px; padding:0 12px;
  background:linear-gradient(180deg,#1f1f1f,#1A1A1A);
  border-bottom:1px solid var(--w2a4d-line);
  transition:box-shadow .25s ease, background .25s ease;
}
.w2a4d-header.w2a4d-scrolled{box-shadow:0 4px 18px rgba(0,0,0,.55);}
.w2a4d-brand{display:flex; align-items:center; gap:8px; font-weight:800; font-size:1.6rem; color:var(--w2a4d-text);}
.w2a4d-brand img{width:26px; height:26px; border-radius:6px;}
.w2a4d-brand .w2a4d-brand-accent{color:var(--w2a4d-primary);}
.w2a4d-header-actions{display:flex; align-items:center; gap:8px;}
.w2a4d-btn-mini{min-height:34px; padding:6px 14px; font-size:1.3rem;}
.w2a4d-menu-toggle{
  width:40px; height:40px; border:none; background:transparent; color:var(--w2a4d-text);
  display:flex; align-items:center; justify-content:center; cursor:pointer; border-radius:8px;
}
.w2a4d-menu-toggle .material-symbols-outlined{font-size:26px;}

/* Nav menu (expandable) */
.w2a4d-nav{position:relative;}
.w2a4d-nav-menu{
  position:fixed; top:56px; left:0; right:0; max-width:430px; margin:0 auto;
  background:#1f1f1f; border-bottom:1px solid var(--w2a4d-line);
  padding:8px 12px 14px; z-index:999;
  display:grid; grid-template-columns:1fr 1fr; gap:6px 10px;
  transform:translateY(-130%); transition:transform .28s ease; visibility:hidden;
}
.w2a4d-nav-menu.w2a4d-open{transform:translateY(0); visibility:visible;}
.w2a4d-nav-menu a{
  display:flex; align-items:center; gap:8px; padding:9px 10px;
  border-radius:10px; color:var(--w2a4d-text); font-size:1.35rem;
  border:1px solid transparent;
}
.w2a4d-nav-menu a:hover{background:rgba(205,133,63,.14); border-color:var(--w2a4d-line);}
.w2a4d-nav-menu a .material-symbols-outlined,.w2a4d-nav-menu a i{font-size:18px; color:var(--w2a4d-primary);}

/* Carousel */
.w2a4d-carousel{position:relative; border-radius:var(--w2a4d-radius); overflow:hidden; box-shadow:var(--w2a4d-shadow); margin:6px 0 4px;}
.w2a4d-carousel-track{display:flex; transition:transform .45s ease;}
.w2a4d-carousel-slide{min-width:100%; position:relative;}
.w2a4d-carousel-slide img{width:100%; height:200px; object-fit:cover; cursor:pointer;}
.w2a4d-carousel-slide .w2a4d-slide-cap{
  position:absolute; left:12px; bottom:12px; right:12px;
  background:rgba(26,26,26,.55); padding:8px 12px; border-radius:10px;
  font-size:1.35rem; font-weight:600;
}
.w2a4d-carousel-dots{position:absolute; bottom:8px; left:0; right:0; display:flex; gap:6px; justify-content:center;}
.w2a4d-carousel-dots span{width:8px; height:8px; border-radius:50%; background:rgba(250,240,230,.4);}
.w2a4d-carousel-dots span.w2a4d-active{background:var(--w2a4d-primary);}

/* Cards */
.w2a4d-card{
  background:var(--w2a4d-bg-2); border:1px solid var(--w2a4d-line);
  border-radius:var(--w2a4d-radius); padding:14px; box-shadow:var(--w2a4d-shadow);
}
.w2a4d-card h3{color:var(--w2a4d-primary);}

/* Section title */
.w2a4d-section-title{
  display:flex; align-items:center; gap:8px; margin:18px 0 10px;
  font-size:1.7rem; color:var(--w2a4d-text); font-weight:800;
}
.w2a4d-section-title .material-symbols-outlined,.w2a4d-section-title i{color:var(--w2a4d-primary); font-size:22px;}
.w2a4d-section-title .w2a4d-accent{color:var(--w2a4d-primary);}

/* Game grid (compact icons) */
.w2a4d-game-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
.w2a4d-game-item{display:block; text-align:center; cursor:pointer;}
.w2a4d-game-item img{
  width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px;
  border:1px solid var(--w2a4d-line); transition:transform .15s ease, border-color .2s ease;
}
.w2a4d-game-item:hover img{transform:translateY(-2px); border-color:var(--w2a4d-primary);}
.w2a4d-game-name{
  font-size:1.1rem; color:var(--w2a4d-text-muted); margin-top:4px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Category badge */
.w2a4d-cat-badge{
  display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px;
  background:rgba(205,133,63,.16); color:var(--w2a4d-primary); font-size:1.2rem; font-weight:700;
}

/* Feature list */
.w2a4d-features{display:grid; gap:10px;}
.w2a4d-feature{
  display:flex; gap:10px; align-items:flex-start;
  background:var(--w2a4d-bg-2); border:1px solid var(--w2a4d-line);
  padding:12px; border-radius:12px;
}
.w2a4d-feature .material-symbols-outlined,.w2a4d-feature i{color:var(--w2a4d-primary); font-size:22px; flex:0 0 auto;}
.w2a4d-feature strong{color:var(--w2a4d-primary); display:block; margin-bottom:2px;}

/* Steps */
.w2a4d-steps{counter-reset:step; display:grid; gap:8px;}
.w2a4d-step{display:flex; gap:10px; align-items:flex-start;}
.w2a4d-step-num{
  flex:0 0 28px; width:28px; height:28px; border-radius:50%;
  background:var(--w2a4d-primary); color:#1A1A1A; font-weight:800;
  display:flex; align-items:center; justify-content:center; font-size:1.3rem;
}

/* RTP table */
.w2a4d-table{width:100%; border-collapse:collapse; font-size:1.3rem;}
.w2a4d-table th,.w2a4d-table td{padding:8px 10px; border-bottom:1px solid var(--w2a4d-line); text-align:left;}
.w2a4d-table th{color:var(--w2a4d-primary);}

/* FAQ */
.w2a4d-faq-item{background:var(--w2a4d-bg-2); border:1px solid var(--w2a4d-line); border-radius:10px; margin-bottom:8px; overflow:hidden;}
.w2a4d-faq-q{padding:12px 14px; font-weight:700; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:8px;}
.w2a4d-faq-q::after{content:"+"; color:var(--w2a4d-primary); font-size:1.6rem;}
.w2a4d-faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease; padding:0 14px; color:var(--w2a4d-text-muted);}
.w2a4d-faq-item.w2a4d-open .w2a4d-faq-a{max-height:480px; padding:0 14px 12px;}
.w2a4d-faq-item.w2a4d-open .w2a4d-faq-q::after{content:"-";}

/* Testimonial */
.w2a4d-testi{background:var(--w2a4d-bg-2); border:1px solid var(--w2a4d-line); border-radius:12px; padding:12px; margin-bottom:8px;}
.w2a4d-testi .w2a4d-stars{color:var(--w2a4d-warning); margin-bottom:4px; font-size:1.2rem;}
.w2a4d-testi cite{color:var(--w2a4d-primary); font-style:normal; font-weight:700;}

/* Payment icons */
.w2a4d-pay-row{display:flex; flex-wrap:wrap; gap:8px;}
.w2a4d-pay{
  background:var(--w2a4d-bg-2); border:1px solid var(--w2a4d-line); border-radius:10px;
  padding:8px 12px; font-size:1.2rem; display:flex; align-items:center; gap:6px; color:var(--w2a4d-text-muted);
}

/* Winners */
.w2a4d-winner{display:flex; justify-content:space-between; padding:8px 10px; border-bottom:1px dashed var(--w2a4d-line); font-size:1.3rem;}
.w2a4d-winner:last-child{border-bottom:none;}
.w2a4d-winner b{color:var(--w2a4d-success);}

/* Footer */
.w2a4d-footer{background:#141414; border-top:1px solid var(--w2a4d-line); padding:20px 14px 110px; margin-top:24px;}
.w2a4d-footer p{color:var(--w2a4d-text-muted); font-size:1.3rem;}
.w2a4d-footer-links{display:flex; flex-wrap:wrap; gap:8px 12px; margin:10px 0 14px;}
.w2a4d-footer-links a{color:var(--w2a4d-text); font-size:1.25rem; text-decoration:underline; text-underline-offset:3px;}
.w2a4d-footer-links a:hover{color:var(--w2a4d-primary);}
.w2a4d-promo-row{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:10px 0 14px;}
.w2a4d-copy{font-size:1.2rem; color:var(--w2a4d-text-muted); border-top:1px solid var(--w2a4d-line); padding-top:10px; text-align:center;}

/* Mobile bottom nav */
.w2a4d-bottom-nav{
  position:fixed; bottom:0; left:0; right:0; z-index:1000;
  max-width:430px; margin:0 auto;
  height:62px; display:flex; justify-content:space-around; align-items:center;
  background:linear-gradient(180deg,#1f1f1f,#121212);
  border-top:1px solid var(--w2a4d-line);
  box-shadow:0 -6px 18px rgba(0,0,0,.5);
}
.w2a4d-bottom-nav a{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:60px; min-height:60px; color:var(--w2a4d-text-muted); font-size:1.1rem;
  gap:2px; text-decoration:none; transition:color .2s ease, transform .15s ease;
  -webkit-tap-highlight-color:transparent; position:relative;
}
.w2a4d-bottom-nav a .material-symbols-outlined,
.w2a4d-bottom-nav a i{font-size:24px;}
.w2a4d-bottom-nav a:hover, .w2a4d-bottom-nav a:active{color:var(--w2a4d-primary); transform:translateY(-1px);}
.w2a4d-bottom-nav a.w2a4d-active{color:var(--w2a4d-primary);}
.w2a4d-bottom-nav a.w2a4d-active::before{
  content:""; position:absolute; top:0; left:30%; right:30%; height:3px;
  background:var(--w2a4d-primary); border-radius:0 0 4px 4px;
}
.w2a4d-bottom-nav .w2a4d-badge{
  position:absolute; top:6px; right:24%;
  background:var(--w2a4d-primary); color:#1A1A1A; font-size:.95rem; font-weight:800;
  min-width:16px; height:16px; padding:0 4px; border-radius:9px; display:flex; align-items:center; justify-content:center;
}

/* Back to top */
.w2a4d-back-top{
  position:fixed; right:14px; bottom:78px; z-index:900;
  width:42px; height:42px; border-radius:50%; border:none; cursor:pointer;
  background:var(--w2a4d-primary); color:#1A1A1A; font-size:1.8rem; font-weight:800;
  opacity:0; visibility:hidden; transform:translateY(10px); transition:.25s ease;
  box-shadow:var(--w2a4d-shadow);
}
.w2a4d-back-top.w2a4d-show{opacity:1; visibility:visible; transform:translateY(0);}

/* Highlights banner */
.w2a4d-highlight{
  background:linear-gradient(135deg,rgba(205,133,63,.22),rgba(205,133,63,.05));
  border:1px solid var(--w2a4d-primary); border-radius:var(--w2a4d-radius); padding:14px;
}

/* Mobile main padding for bottom nav clearance handled via wrapper padding-bottom */
@media (max-width:768px){
  .w2a4d-wrapper{padding-bottom:78px;}
}

/* Desktop: hide mobile-only bottom nav, widen wrapper */
@media (min-width:769px){
  .w2a4d-bottom-nav{display:none;}
  .w2a4d-wrapper{max-width:430px;}
  .w2a4d-footer{padding-bottom:30px;}
}

/* Utility */
.w2a4d-mt{margin-top:12px;} .w2a4d-mb{margin-bottom:12px;}
.w2a4d-text-center{text-align:center;}
.w2a4d-hidden{display:none !important;}
.w2a4d-text-primary{color:var(--w2a4d-primary);}
.w2a4d-muted{color:var(--w2a4d-text-muted);}