/* ============================================================
   roobetpromo.click - Core Stylesheet
   Prefix: ui6a-
   Layout: mobile-first, max-width 430px container
   ============================================================ */

:root{
  --ui6a-bg:#0b0e1a;
  --ui6a-bg-2:#11162a;
  --ui6a-panel:#161c34;
  --ui6a-panel-2:#1d2546;
  --ui6a-line:#26305a;
  --ui6a-text:#eef2ff;
  --ui6a-muted:#9aa4cc;
  --ui6a-brand:#7c3aed;     /* violet */
  --ui6a-brand-2:#a855f7;
  --ui6a-accent:#22d3ee;    /* cyan */
  --ui6a-gold:#fbbf24;
  --ui6a-green:#22c55e;
  --ui6a-red:#ef4444;
  --ui6a-grad:linear-gradient(135deg,#7c3aed 0%,#22d3ee 100%);
  --ui6a-grad-gold:linear-gradient(135deg,#fbbf24 0%,#f59e0b 100%);
  --ui6a-radius:14px;
  --ui6a-shadow:0 10px 30px rgba(0,0,0,.45);
  --ui6a-header-h:60px;
  --ui6a-nav-h:64px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{background:var(--ui6a-bg);color:var(--ui6a-text);font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;line-height:1.6;-webkit-text-size-adjust:100%;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
body{min-height:100vh;overflow-x:hidden;}

/* ---------- Layout shell ---------- */
.ui6a-shell{width:100%;max-width:430px;margin:0 auto;background:var(--ui6a-bg);position:relative;box-shadow:0 0 40px rgba(0,0,0,.4);}
main.ui6a-main{padding:18px 14px 90px;}

/* ---------- Header ---------- */
.ui6a-header{
  position:sticky;top:0;z-index:1000;
  height:var(--ui6a-header-h);
  display:flex;align-items:center;gap:10px;
  padding:0 12px;
  background:rgba(11,14,26,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ui6a-line);
}
.ui6a-logo{display:flex;align-items:center;gap:8px;font-weight:800;letter-spacing:.3px;}
.ui6a-logo-badge{
  width:34px;height:34px;border-radius:9px;
  background:var(--ui6a-grad);
  display:grid;place-items:center;color:#fff;font-size:18px;
  box-shadow:0 4px 14px rgba(124,58,237,.5);
}
.ui6a-logo-text{font-size:16px;line-height:1;}
.ui6a-logo-text small{display:block;font-size:10px;color:var(--ui6a-accent);font-weight:600;letter-spacing:.6px;}
.ui6a-spacer{flex:1;}

.ui6a-btn{
  border:0;cursor:pointer;font-weight:700;border-radius:10px;
  padding:9px 14px;font-size:13px;color:#fff;
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.ui6a-btn:active{transform:translateY(1px) scale(.98);}
.ui6a-btn-login{background:var(--ui6a-panel-2);border:1px solid var(--ui6a-line);}
.ui6a-btn-reg{background:var(--ui6a-grad);box-shadow:0 6px 18px rgba(124,58,237,.45);}
.ui6a-btn-reg:hover{filter:brightness(1.08);}
.ui6a-icon-btn{
  width:38px;height:38px;border-radius:10px;background:var(--ui6a-panel-2);
  border:1px solid var(--ui6a-line);display:grid;place-items:center;color:var(--ui6a-text);
  cursor:pointer;
}

/* ---------- Top nav (desktop links row) ---------- */
.ui6a-topnav{
  display:flex;gap:6px;padding:8px 12px;overflow-x:auto;
  background:var(--ui6a-bg-2);border-bottom:1px solid var(--ui6a-line);
  scrollbar-width:none;
}
.ui6a-topnav::-webkit-scrollbar{display:none;}
.ui6a-topnav a{
  flex:0 0 auto;padding:6px 12px;border-radius:20px;
  font-size:12px;color:var(--ui6a-muted);background:transparent;
  border:1px solid transparent;white-space:nowrap;
}
.ui6a-topnav a:hover,.ui6a-topnav a.active{color:#fff;background:var(--ui6a-panel-2);border-color:var(--ui6a-line);}

/* ---------- Hero ---------- */
.ui6a-hero{
  position:relative;border-radius:var(--ui6a-radius);overflow:hidden;
  background:linear-gradient(135deg,#1b1146 0%,#0b2a3a 60%,#06121f 100%);
  padding:22px 18px;border:1px solid var(--ui6a-line);
}
.ui6a-hero::before{
  content:"";position:absolute;inset:-40% -20% auto -20%;height:60%;
  background:radial-gradient(closest-side,rgba(124,58,237,.45),transparent 70%);
  pointer-events:none;
}
.ui6a-hero .ui6a-pill{
  display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
  color:var(--ui6a-gold);background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.3);
  padding:5px 10px;border-radius:20px;margin-bottom:10px;
}
.ui6a-hero h1{font-size:24px;line-height:1.2;margin-bottom:8px;}
.ui6a-hero h1 span{background:var(--ui6a-grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.ui6a-hero p{color:var(--ui6a-muted);font-size:13px;margin-bottom:14px;}
.ui6a-hero-cta{display:flex;gap:8px;flex-wrap:wrap;}
.ui6a-hero-cta .ui6a-btn{padding:11px 18px;font-size:14px;}
.ui6a-hero-stats{
  margin-top:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
}
.ui6a-hero-stat{
  background:rgba(255,255,255,.04);border:1px solid var(--ui6a-line);
  border-radius:10px;padding:9px 6px;text-align:center;
}
.ui6a-hero-stat b{display:block;font-size:16px;color:#fff;}
.ui6a-hero-stat small{font-size:10px;color:var(--ui6a-muted);}

/* ---------- Carousel strip ---------- */
.ui6a-strip{display:flex;gap:10px;overflow-x:auto;padding:14px 0;scrollbar-width:none;}
.ui6a-strip::-webkit-scrollbar{display:none;}
.ui6a-strip-card{
  flex:0 0 70%;border-radius:12px;overflow:hidden;
  border:1px solid var(--ui6a-line);background:var(--ui6a-panel);
}
.ui6a-strip-card .ui6a-strip-img{height:120px;background-size:cover;background-position:center;position:relative;}
.ui6a-strip-card .ui6a-strip-tag{position:absolute;top:8px;left:8px;background:var(--ui6a-grad);color:#fff;font-size:10px;font-weight:700;padding:4px 8px;border-radius:6px;}
.ui6a-strip-card .ui6a-strip-body{padding:10px 12px;}
.ui6a-strip-card h3{font-size:13px;}
.ui6a-strip-card p{font-size:11px;color:var(--ui6a-muted);}

/* ---------- Section heading ---------- */
.ui6a-section{margin-top:22px;}
.ui6a-section-head{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;
}
.ui6a-section-head h2{font-size:16px;display:flex;align-items:center;gap:8px;}
.ui6a-section-head h2 i{color:var(--ui6a-accent);}
.ui6a-section-head a{font-size:11px;color:var(--ui6a-brand-2);font-weight:600;}

/* ---------- Game grid ---------- */
.ui6a-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.ui6a-card{
  background:var(--ui6a-panel);border:1px solid var(--ui6a-line);border-radius:12px;
  overflow:hidden;cursor:pointer;position:relative;
  transition:transform .18s ease, border-color .2s ease, box-shadow .2s ease;
}
.ui6a-card:hover{transform:translateY(-2px);border-color:var(--ui6a-brand);box-shadow:0 8px 18px rgba(0,0,0,.4);}
.ui6a-card .ui6a-card-img{
  aspect-ratio:1/1;background:#0d1326;display:grid;place-items:center;position:relative;overflow:hidden;
}
.ui6a-card .ui6a-card-img img{width:100%;height:100%;object-fit:cover;}
.ui6a-card .ui6a-card-overlay{
  position:absolute;inset:0;background:rgba(8,11,22,.7);display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .2s ease;
}
.ui6a-card:hover .ui6a-card-overlay{opacity:1;}
.ui6a-card .ui6a-card-play{
  width:42px;height:42px;border-radius:50%;background:var(--ui6a-grad);color:#fff;display:grid;place-items:center;font-size:16px;
}
.ui6a-card .ui6a-card-hot{
  position:absolute;top:6px;left:6px;background:linear-gradient(135deg,#ef4444,#f59e0b);
  color:#fff;font-size:9px;font-weight:800;padding:3px 7px;border-radius:6px;letter-spacing:.5px;
}
.ui6a-card .ui6a-card-title{padding:7px 8px;font-size:11px;text-align:center;color:var(--ui6a-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ---------- Filter chips ---------- */
.ui6a-filters{display:flex;gap:8px;overflow-x:auto;padding:6px 0 10px;scrollbar-width:none;}
.ui6a-filters::-webkit-scrollbar{display:none;}
.ui6a-chip{
  flex:0 0 auto;padding:7px 14px;border-radius:20px;font-size:12px;font-weight:600;
  background:var(--ui6a-panel);border:1px solid var(--ui6a-line);color:var(--ui6a-muted);cursor:pointer;
}
.ui6a-chip.active{background:var(--ui6a-grad);color:#fff;border-color:transparent;}

/* ---------- Feature blocks ---------- */
.ui6a-features{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.ui6a-feature{
  background:var(--ui6a-panel);border:1px solid var(--ui6a-line);border-radius:12px;padding:14px;
}
.ui6a-feature .ui6a-ic{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:18px;
  background:rgba(124,58,237,.18);color:var(--ui6a-brand-2);margin-bottom:8px;
}
.ui6a-feature h3{font-size:13px;margin-bottom:4px;}
.ui6a-feature p{font-size:11px;color:var(--ui6a-muted);}

/* ---------- Promo banner ---------- */
.ui6a-promo{
  background:linear-gradient(135deg,#3b0d57 0%,#1a1140 100%);
  border:1px solid var(--ui6a-line);border-radius:var(--ui6a-radius);
  padding:16px;display:flex;gap:12px;align-items:center;position:relative;overflow:hidden;
}
.ui6a-promo .ui6a-promo-ic{font-size:36px;color:var(--ui6a-gold);}
.ui6a-promo h3{font-size:15px;margin-bottom:3px;}
.ui6a-promo p{font-size:12px;color:var(--ui6a-muted);}

/* ---------- VIP / Tiers ---------- */
.ui6a-tiers{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.ui6a-tier{
  border-radius:12px;padding:14px;border:1px solid var(--ui6a-line);background:var(--ui6a-panel);
}
.ui6a-tier.t1{background:linear-gradient(135deg,#3a2a06,#1a1505);}
.ui6a-tier.t2{background:linear-gradient(135deg,#0b2e2a,#06151a);}
.ui6a-tier.t3{background:linear-gradient(135deg,#2a0b3a,#150620);}
.ui6a-tier.t4{background:linear-gradient(135deg,#3a0d0d,#1a0606);}
.ui6a-tier h4{font-size:13px;margin-bottom:5px;display:flex;align-items:center;gap:6px;}
.ui6a-tier p{font-size:11px;color:var(--ui6a-muted);}

/* ---------- Long-form SEO content ---------- */
.ui6a-prose{background:var(--ui6a-panel);border:1px solid var(--ui6a-line);border-radius:var(--ui6a-radius);padding:18px 16px;}
.ui6a-prose h2{font-size:17px;margin:14px 0 8px;display:flex;align-items:center;gap:8px;}
.ui6a-prose h2:first-child{margin-top:0;}
.ui6a-prose h3{font-size:14px;margin:12px 0 6px;color:var(--ui6a-accent);}
.ui6a-prose p{font-size:13px;color:#c8cfe9;margin-bottom:10px;}
.ui6a-prose ul{padding-left:18px;margin-bottom:10px;}
.ui6a-prose li{font-size:12.5px;color:#c8cfe9;margin-bottom:5px;}
.ui6a-prose a{color:var(--ui6a-brand-2);text-decoration:underline;}
.ui6a-prose strong{color:#fff;}

/* ---------- FAQ ---------- */
.ui6a-faq-item{
  border:1px solid var(--ui6a-line);border-radius:10px;margin-bottom:8px;overflow:hidden;background:var(--ui6a-panel);
}
.ui6a-faq-q{
  width:100%;text-align:left;background:transparent;border:0;color:#fff;padding:12px 14px;
  font-size:13px;font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.ui6a-faq-q i{transition:transform .2s ease;color:var(--ui6a-accent);}
.ui6a-faq-item.open .ui6a-faq-q i{transform:rotate(45deg);}
.ui6a-faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;padding:0 14px;}
.ui6a-faq-item.open .ui6a-faq-a{max-height:280px;padding:0 14px 12px;}
.ui6a-faq-a p{font-size:12.5px;color:var(--ui6a-muted);}

/* ---------- Footer ---------- */
.ui6a-footer{
  background:var(--ui6a-bg-2);border-top:1px solid var(--ui6a-line);padding:22px 16px 28px;
}
.ui6a-footer-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:14px;}
.ui6a-footer-col h4{font-size:12px;color:var(--ui6a-accent);margin-bottom:8px;letter-spacing:.5px;text-transform:uppercase;}
.ui6a-footer-col a{display:block;font-size:12px;color:var(--ui6a-muted);padding:3px 0;}
.ui6a-footer-col a:hover{color:#fff;}
.ui6a-footer-bottom{text-align:center;font-size:11px;color:var(--ui6a-muted);border-top:1px solid var(--ui6a-line);padding-top:14px;}
.ui6a-footer-pay{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:10px 0;}
.ui6a-footer-pay span{font-size:10px;padding:4px 8px;border-radius:6px;background:var(--ui6a-panel);border:1px solid var(--ui6a-line);}

/* ---------- Mobile menu overlay ---------- */
.ui6a-menu{
  position:fixed;inset:0;z-index:9999;background:rgba(7,9,18,.6);backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity .22s ease;
}
.ui6a-menu.open{opacity:1;pointer-events:auto;}
.ui6a-menu-panel{
  position:absolute;top:0;right:0;height:100%;width:84%;max-width:360px;
  background:var(--ui6a-bg-2);padding:18px 16px;overflow-y:auto;
  transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1);
  border-left:1px solid var(--ui6a-line);
}
.ui6a-menu.open .ui6a-menu-panel{transform:translateX(0);}
.ui6a-menu-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.ui6a-menu-head h3{font-size:15px;}
.ui6a-menu-section-title{font-size:11px;color:var(--ui6a-accent);text-transform:uppercase;letter-spacing:.5px;margin:14px 0 6px;}
.ui6a-menu a{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-size:13px;color:#d6dcf5;
  border:1px solid transparent;
}
.ui6a-menu a:hover{background:var(--ui6a-panel-2);border-color:var(--ui6a-line);}
.ui6a-menu a i{width:20px;text-align:center;color:var(--ui6a-brand-2);}

/* ---------- Mobile bottom nav ---------- */
.ui6a-bottomnav{
  position:fixed;left:50%;transform:translateX(-50%);bottom:0;
  width:100%;max-width:430px;height:var(--ui6a-nav-h);z-index:1000;
  background:rgba(11,14,26,.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--ui6a-line);
  display:flex;justify-content:space-around;align-items:center;
  padding:6px 4px;
}
.ui6a-bottomnav a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:10px;color:var(--ui6a-muted);gap:3px;height:100%;position:relative;cursor:pointer;
}
.ui6a-bottomnav a i{font-size:20px;}
.ui6a-bottomnav a.active{color:var(--ui6a-accent);}
.ui6a-bottomnav a.ui6a-bn-promo{color:var(--ui6a-gold);}
.ui6a-bottomnav a.ui6a-bn-promo i{
  width:42px;height:42px;border-radius:50%;background:var(--ui6a-grad-gold);
  color:#1a1106;display:grid;place-items:center;font-size:22px;margin-top:-22px;
  box-shadow:0 6px 14px rgba(245,158,11,.45);border:3px solid var(--ui6a-bg);
}

/* ---------- Utilities ---------- */
.ui6a-hide-mobile{display:none;}
@media(min-width:768px){
  .ui6a-bottomnav{display:none;}
  .ui6a-hide-mobile{display:flex;}
  main.ui6a-main{padding-bottom:32px;}
}

/* small focus reset for a11y */
:focus-visible{outline:2px solid var(--ui6a-accent);outline-offset:2px;border-radius:6px;}