/* ===========================================================
   Big Bunny App - layout.css
   Prefix: uia2-
   Palette: #E0FFFF | #00CED1 | #40E0D0 | #0F0F23 | #AFEEEE
   Mobile-first HTML5 casino layout
   =========================================================== */

:root{
  --uia2-primary:#00CED1;
  --uia2-secondary:#40E0D0;
  --uia2-accent:#AFEEEE;
  --uia2-bg:#0F0F23;
  --uia2-bg-soft:#171734;
  --uia2-bg-card:#1c1c3e;
  --uia2-text:#E0FFFF;
  --uia2-text-muted:#9fb6d6;
  --uia2-border:#2a2a55;
  --uia2-gold:#FFD86b;
  --uia2-pink:#ff6b9d;
  --uia2-shadow:0 6px 22px rgba(0,0,0,.45);
}

*{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:radial-gradient(circle at 20% 0%,#1a1a3f 0%,var(--uia2-bg) 55%);
  color:var(--uia2-text);
  line-height:1.5;
  font-size:1.5rem;
  min-height:100vh;
  overflow-x:hidden;
}
a{color:var(--uia2-secondary);text-decoration:none;}
img{max-width:100%;display:block;}

/* ---------- Layout helpers ---------- */
.uia2-container{width:100%;max-width:430px;margin:0 auto;padding:0 12px;}
.uia2-wrapper{padding:14px 0;}
.uia2-section{margin:22px 0;}
.uia2-text-center{text-align:center;}
.uia2-clamp{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;}

/* ---------- Buttons ---------- */
.uia2-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:0;border-radius:999px;padding:10px 18px;font-weight:700;font-size:1.35rem;
  cursor:pointer;color:#061018;background:linear-gradient(135deg,var(--uia2-primary),var(--uia2-secondary));
  box-shadow:0 4px 14px rgba(0,206,209,.4);transition:transform .15s ease,box-shadow .15s ease;
  min-height:40px;
}
.uia2-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,206,209,.55);}
.uia2-btn:active{transform:scale(.97);}
.uia2-btn-outline{
  background:transparent;color:var(--uia2-text);
  border:1.5px solid var(--uia2-primary);
  box-shadow:none;
}
.uia2-btn-gold{background:linear-gradient(135deg,#FFD86b,#ffae3b);color:#3a2400;}
.uia2-btn-block{display:flex;width:100%;}
.uia2-link-text{color:var(--uia2-primary);font-weight:700;border-bottom:1px dashed transparent;}
.uia2-link-text:hover{border-bottom-color:var(--uia2-primary);}

/* ---------- Header ---------- */
.uia2-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:rgba(15,15,35,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--uia2-border);
}
.uia2-header-inner{
  max-width:430px;margin:0 auto;padding:8px 12px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.uia2-logo{display:flex;align-items:center;gap:8px;min-width:0;}
.uia2-logo img{width:30px;height:30px;border-radius:8px;}
.uia2-logo-name{font-weight:800;font-size:1.5rem;color:var(--uia2-text);white-space:nowrap;}
.uia2-logo-name b{color:var(--uia2-primary);}
.uia2-header-actions{display:flex;align-items:center;gap:6px;}
.uia2-header-actions .uia2-btn{padding:7px 14px;font-size:1.25rem;min-height:34px;}
.uia2-menu-btn{
  background:transparent;border:0;color:var(--uia2-text);font-size:2rem;cursor:pointer;
  width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;
}
.uia2-menu-btn:hover{background:rgba(0,206,209,.12);}

/* ---------- Dropdown nav ---------- */
.uia2-nav{
  position:fixed;top:54px;left:0;right:0;z-index:999;
  background:var(--uia2-bg-soft);border-bottom:1px solid var(--uia2-border);
  max-height:0;overflow:hidden;transition:max-height .28s ease;
}
.uia2-nav.open{max-height:520px;}
.uia2-nav-inner{max-width:430px;margin:0 auto;padding:8px 12px 14px;}
.uia2-nav-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.uia2-nav-item{
  display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;
  background:var(--uia2-bg-card);color:var(--uia2-text);font-size:1.3rem;font-weight:600;
  border:1px solid var(--uia2-border);
}
.uia2-nav-item:hover{background:#222252;color:var(--uia2-primary);}
.uia2-nav-item i{color:var(--uia2-primary);}

/* ---------- Hero / Carousel ---------- */
.uia2-hero{margin-top:62px;}
.uia2-carousel{position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--uia2-shadow);}
.uia2-slides{display:flex;scroll-snap-type:x mandatory;overflow-x:auto;scrollbar-width:none;}
.uia2-slides::-webkit-scrollbar{display:none;}
.uia2-slide{min-width:100%;scroll-snap-align:center;position:relative;}
.uia2-slide img{width:100%;height:200px;object-fit:cover;}
.uia2-slide-overlay{
  position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,15,35,.05) 30%,rgba(15,15,35,.85) 100%);
  display:flex;flex-direction:column;justify-content:flex-end;padding:14px;
}
.uia2-slide-title{font-size:1.9rem;font-weight:800;color:#fff;margin-bottom:4px;}
.uia2-slide-sub{font-size:1.2rem;color:var(--uia2-accent);margin-bottom:8px;}
.uia2-dots{display:flex;justify-content:center;gap:6px;padding:8px 0;}
.uia2-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25);cursor:pointer;}
.uia2-dot.active{background:var(--uia2-primary);width:22px;border-radius:4px;}

/* ---------- Headings ---------- */
.uia2-h1{font-size:2.1rem;font-weight:800;line-height:1.25;margin:14px 0 6px;}
.uia2-h1 b{color:var(--uia2-primary);}
.uia2-h2{font-size:1.8rem;font-weight:800;margin:18px 0 8px;display:flex;align-items:center;gap:8px;}
.uia2-h2 i,.uia2-h2 span.ic{color:var(--uia2-primary);}
.uia2-h3{font-size:1.5rem;font-weight:700;margin:12px 0 4px;color:var(--uia2-accent);}
.uia2-lead{color:var(--uia2-text-muted);font-size:1.35rem;margin-bottom:10px;}

/* ---------- Game grid ---------- */
.uia2-cat-head{
  display:flex;align-items:center;justify-content:space-between;margin:18px 0 10px;
}
.uia2-cat-title{display:flex;align-items:center;gap:8px;font-size:1.65rem;font-weight:800;}
.uia2-cat-title .ic{color:var(--uia2-primary);}
.uia2-cat-more{font-size:1.2rem;color:var(--uia2-primary);font-weight:700;}
.uia2-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
.uia2-game{
  display:block;background:var(--uia2-bg-card);border:1px solid var(--uia2-border);
  border-radius:12px;padding:6px;text-align:center;cursor:pointer;transition:transform .15s,border-color .15s;
  position:relative;overflow:hidden;
}
.uia2-game:hover{transform:translateY(-2px);border-color:var(--uia2-primary);}
.uia2-game-img{width:100%;aspect-ratio:1/1;border-radius:8px;object-fit:cover;background:#11112a;}
.uia2-game-name{
  font-size:1.15rem;color:var(--uia2-text);font-weight:600;margin-top:5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.uia2-game-tag{
  position:absolute;top:8px;left:6px;background:var(--uia2-pink);color:#fff;
  font-size:1rem;font-weight:700;padding:1px 7px;border-radius:6px;
}

/* ---------- Cards ---------- */
.uia2-card{
  background:var(--uia2-bg-card);border:1px solid var(--uia2-border);
  border-radius:14px;padding:14px;box-shadow:var(--uia2-shadow);margin-bottom:12px;
}
.uia2-card-row{display:flex;gap:12px;align-items:flex-start;}
.uia2-card-ic{
  width:42px;height:42px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,var(--uia2-primary),var(--uia2-secondary));
  display:flex;align-items:center;justify-content:center;color:#061018;font-size:2rem;
}
.uia2-card p{color:var(--uia2-text-muted);font-size:1.3rem;margin-top:3px;}

/* ---------- Feature list ---------- */
.uia2-feature-list{display:grid;gap:10px;}
.uia2-feature{
  display:flex;gap:10px;align-items:flex-start;padding:10px;border-radius:10px;background:var(--uia2-bg-soft);
}
.uia2-feature .ic{color:var(--uia2-primary);font-size:1.9rem;margin-top:2px;}
.uia2-feature h4{font-size:1.35rem;margin-bottom:2px;}
.uia2-feature p{font-size:1.25rem;color:var(--uia2-text-muted);}

/* ---------- RTP table ---------- */
.uia2-rtp-table{width:100%;border-collapse:collapse;font-size:1.25rem;}
.uia2-rtp-table th,.uia2-rtp-table td{padding:8px 10px;border-bottom:1px solid var(--uia2-border);text-align:left;}
.uia2-rtp-table th{color:var(--uia2-accent);font-weight:700;}
.uia2-rtp-bar{height:6px;border-radius:4px;background:#222252;overflow:hidden;margin-top:4px;}
.uia2-rtp-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--uia2-primary),var(--uia2-gold));}

/* ---------- Testimonials ---------- */
.uia2-testi{display:grid;gap:10px;}
.uia2-testi-item{
  background:var(--uia2-bg-soft);border-radius:10px;padding:12px;border-left:3px solid var(--uia2-primary);
}
.uia2-testi-name{font-weight:700;color:var(--uia2-accent);font-size:1.3rem;}
.uia2-stars{color:var(--uia2-gold);font-size:1.2rem;margin:2px 0;}
.uia2-testi p{color:var(--uia2-text-muted);font-size:1.25rem;}

/* ---------- Payment ---------- */
.uia2-pay{display:flex;flex-wrap:wrap;gap:8px;}
.uia2-pay span{
  background:var(--uia2-bg-card);border:1px solid var(--uia2-border);border-radius:8px;
  padding:6px 12px;font-size:1.2rem;font-weight:600;display:flex;align-items:center;gap:5px;
}
.uia2-pay i{color:var(--uia2-primary);}

/* ---------- Winners ticker ---------- */
.uia2-winners{
  background:var(--uia2-bg-card);border:1px solid var(--uia2-border);border-radius:12px;
  padding:10px 12px;margin-bottom:12px;
}
.uia2-winner{display:flex;justify-content:space-between;font-size:1.25rem;padding:4px 0;border-bottom:1px dashed var(--uia2-border);}
.uia2-winner:last-child{border-bottom:0;}
.uia2-winner b{color:var(--uia2-gold);}

/* ---------- FAQ ---------- */
.uia2-faq-item{
  background:var(--uia2-bg-card);border:1px solid var(--uia2-border);border-radius:10px;
  margin-bottom:8px;overflow:hidden;
}
.uia2-faq-q{
  width:100%;text-align:left;background:transparent;border:0;color:var(--uia2-text);
  font-weight:700;font-size:1.35rem;padding:12px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;
}
.uia2-faq-q .ic{color:var(--uia2-primary);transition:transform .2s;}
.uia2-faq-item.open .uia2-faq-q .ic{transform:rotate(45deg);}
.uia2-faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;padding:0 12px;color:var(--uia2-text-muted);font-size:1.25rem;}
.uia2-faq-item.open .uia2-faq-a{max-height:240px;padding:0 12px 12px;}

/* ---------- App download CTA ---------- */
.uia2-app-cta{
  background:linear-gradient(135deg,#1e1e48,#0c2c2e);
  border:1px solid var(--uia2-primary);border-radius:14px;padding:16px;text-align:center;
}
.uia2-app-cta h3{color:var(--uia2-accent);font-size:1.7rem;margin-bottom:6px;}
.uia2-app-cta p{color:var(--uia2-text-muted);font-size:1.25rem;margin-bottom:12px;}
.uia2-app-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}

/* ---------- Achievements ---------- */
.uia2-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.uia2-stat{
  background:var(--uia2-bg-card);border:1px solid var(--uia2-border);border-radius:10px;padding:10px;text-align:center;
}
.uia2-stat b{display:block;color:var(--uia2-primary);font-size:1.9rem;font-weight:800;}
.uia2-stat span{color:var(--uia2-text-muted);font-size:1.15rem;}

/* ---------- Promo banner ---------- */
.uia2-promo{
  background:linear-gradient(135deg,#2a1a45,#0c2c2e);border:1px solid var(--uia2-secondary);
  border-radius:14px;padding:14px;display:flex;gap:12px;align-items:center;margin:14px 0;
}
.uia2-promo .ic{font-size:3rem;color:var(--uia2-gold);}
.uia2-promo h3{font-size:1.55rem;color:var(--uia2-text);}
.uia2-promo p{color:var(--uia2-text-muted);font-size:1.2rem;}

/* ---------- CTA block ---------- */
.uia2-cta-box{
  background:radial-gradient(circle at 30% 20%,rgba(0,206,209,.25),transparent 60%),var(--uia2-bg-card);
  border:1px solid var(--uia2-primary);border-radius:16px;padding:18px;text-align:center;margin:18px 0;
}
.uia2-cta-box h2{color:var(--uia2-accent);justify-content:center;}
.uia2-cta-box p{color:var(--uia2-text-muted);margin:6px 0 12px;font-size:1.3rem;}

/* ---------- Footer ---------- */
.uia2-footer{
  background:var(--uia2-bg-soft);border-top:1px solid var(--uia2-border);
  padding:20px 0 96px;margin-top:24px;
}
.uia2-footer-inner{max-width:430px;margin:0 auto;padding:0 12px;}
.uia2-footer-brand{font-size:1.3rem;color:var(--uia2-text-muted);margin-bottom:12px;}
.uia2-footer-brand b{color:var(--uia2-primary);}
.uia2-footer-promos{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.uia2-footer-links{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:14px;}
.uia2-footer-links a{
  font-size:1.2rem;color:var(--uia2-text-muted);padding:5px 0;border-bottom:1px dashed var(--uia2-border);
}
.uia2-footer-links a:hover{color:var(--uia2-primary);}
.uia2-footer-copy{font-size:1.15rem;color:#6b7a99;text-align:center;border-top:1px solid var(--uia2-border);padding-top:12px;}

/* ---------- Mobile bottom nav ---------- */
.uia2-bottom{
  position:fixed;bottom:0;left:0;right:0;z-index:1000;height:62px;
  background:linear-gradient(180deg,rgba(20,20,45,.96),rgba(10,10,28,.98));
  backdrop-filter:blur(10px);border-top:1px solid var(--uia2-border);
  display:flex;justify-content:space-around;align-items:center;
}
.uia2-bottom-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:transparent;border:0;cursor:pointer;color:var(--uia2-text-muted);
  font-size:1rem;gap:2px;min-width:60px;min-height:60px;position:relative;
  transition:color .15s,transform .15s;
}
.uia2-bottom-btn .ic{font-size:24px;line-height:1;}
.uia2-bottom-btn.material .material-icons{font-size:24px;}
.uia2-bottom-btn.active{color:var(--uia2-primary);}
.uia2-bottom-btn.active::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:28px;height:3px;background:var(--uia2-primary);border-radius:0 0 4px 4px;
}
.uia2-bottom-btn:active{transform:scale(.92);}
.uia2-bottom-btn .uia2-badge{
  position:absolute;top:6px;right:18px;background:var(--uia2-pink);color:#fff;
  font-size:.9rem;font-weight:700;padding:0 5px;border-radius:8px;min-width:16px;line-height:14px;
}
.uia2-bottom-btn.promo .ic{color:var(--uia2-gold);}

/* ---------- Responsive ---------- */
@media (min-width:769px){
  .uia2-bottom{display:none;}
  .uia2-footer{padding-bottom:24px;}
  body{background:#0F0F23;}
}
@media (max-width:768px){
  main.uia2-main{padding-bottom:80px;}
}
.uia2-hide-mobile{display:none;}
@media (min-width:769px){.uia2-hide-mobile{display:inline-block;}}